@popmelt.com/core 0.5.20 → 0.5.22
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/index.mjs +23 -18
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -1,21 +1,25 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
var sc=Object.defineProperty,lc=Object.defineProperties;var ac=Object.getOwnPropertyDescriptors;var cr=Object.getOwnPropertySymbols;var Ns=Object.prototype.hasOwnProperty,Hs=Object.prototype.propertyIsEnumerable;var Ds=(e,t,n)=>t in e?sc(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,f=(e,t)=>{for(var n in t||(t={}))Ns.call(t,n)&&Ds(e,n,t[n]);if(cr)for(var n of cr(t))Hs.call(t,n)&&Ds(e,n,t[n]);return e},y=(e,t)=>lc(e,ac(t));var dr=e=>typeof e=="symbol"?e:e+"",Yn=(e,t)=>{var n={};for(var r in e)Ns.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(e!=null&&cr)for(var r of cr(e))t.indexOf(r)<0&&Hs.call(e,r)&&(n[r]=e[r]);return n};import{createContext as $f,useCallback as Vt,useContext as Wf,useEffect as Dt,useMemo as zo,useRef as Xt,useState as Kt}from"react";import{useCallback as Us,useEffect as cc,useSyncExternalStore as dc}from"react";var Rn="http://localhost:1111";function In(e,t={},n=15e3){let r=new AbortController;t.signal&&t.signal.addEventListener("abort",()=>r.abort());let o=setTimeout(()=>r.abort(),n);return fetch(e,y(f({},t),{signal:r.signal})).finally(()=>clearTimeout(o))}async function _s(e=Rn){try{let t=await In(`${e}/capabilities`,{},5e3);return t.ok?await t.json():null}catch(t){return null}}async function bo(e=Rn){try{let t=new AbortController,n=setTimeout(()=>t.abort(),2e3),r=await fetch(`${e}/status`,{signal:t.signal});return clearTimeout(n),r.ok?await r.json():null}catch(t){return null}}async function Fs(e){try{let t=new AbortController,n=setTimeout(()=>t.abort(),500),r=await fetch(`http://localhost:${e}/status`,{signal:t.signal});return clearTimeout(n),r.ok?await r.json():null}catch(t){return null}}async function zs(e){if(e&&e!=="http://localhost:1111")try{let c=new URL(e);return{url:e,port:parseInt(c.port,10)||1111}}catch(c){return null}let o=typeof window!="undefined"?window.location.origin:null,i=await Fs(1111);if(i&&i.devOrigin&&o&&i.devOrigin===o)return{url:"http://localhost:1111",port:1111};let s=Array.from({length:8},(c,d)=>{let u=1112+d;return Fs(u).then(p=>p?{status:p,port:u}:null)}),l=(await Promise.all(s)).filter(c=>c!==null),a=[];i&&a.push({port:1111,devOrigin:i.devOrigin});for(let c of l)a.push({port:c.port,devOrigin:c.status.devOrigin});if(o){let c=a.find(d=>d.devOrigin===o);if(c)return{url:`http://localhost:${c.port}`,port:c.port}}return a.length===1?{url:`http://localhost:${a[0].port}`,port:a[0].port}:i?{url:"http://localhost:1111",port:1111}:a.length>0?{url:`http://localhost:${a[0].port}`,port:a[0].port}:null}async function $s(e,t,n=Rn,r,o,i,s,l){let a=new FormData;if(a.append("screenshot",e,"screenshot.png"),a.append("feedback",t),r&&a.append("color",r),o&&a.append("provider",o),i&&a.append("model",i),l&&a.append("sourceId",l),s)for(let[d,u]of s)for(let p=0;p<u.length;p++)a.append(`image-${d}-${p}`,u[p],`image-${d}-${p}.png`);let c=await In(`${n}/send`,{method:"POST",body:a},3e4);if(!c.ok){let d=await c.text();throw new Error(`Bridge returned ${c.status}: ${d}`)}return c.json()}async function Ws(e=Rn,t){try{let n=await In(`${e}/mcp/install`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(t?{serverUrl:t}:{})},15e3);return n.ok?await n.json():null}catch(n){return null}}async function Ys(e,t=Rn){let n=await In(`${t}/model/component`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({name:e})},1e4);if(!n.ok){let r=await n.text();throw new Error(`Bridge returned ${n.status}: ${r}`)}return n.json()}async function js(e,t=Rn){let n=await In(`${t}/model/component`,{method:"DELETE",headers:{"Content-Type":"application/json"},body:JSON.stringify({name:e})},1e4);if(!n.ok){let r=await n.text();throw new Error(`Bridge returned ${n.status}: ${r}`)}return n.json()}async function Ur(e,t,n=Rn){let r=await In(`${n}/model/token`,{method:"PATCH",headers:{"Content-Type":"application/json"},body:JSON.stringify({path:e,value:t})},1e4);if(!r.ok){let o=await r.text();throw new Error(`Bridge returned ${r.status}: ${o}`)}return r.json()}async function Gs(e,t=Rn){let n=await In(`${t}/model/token`,{method:"DELETE",headers:{"Content-Type":"application/json"},body:JSON.stringify({path:e})},1e4);if(!n.ok){let r=await n.text();throw new Error(`Bridge returned ${n.status}: ${r}`)}return n.json()}async function xo(e=Rn){var t;try{let n=await In(`${e}/model`,{},5e3);return n.ok&&(t=(await n.json()).model)!=null?t:null}catch(n){return null}}async function Vs(e,t,n=Rn,r,o,i,s,l){let a;if(s&&s.length>0){let c=new FormData,d=new Blob([new Uint8Array([137,80,78,71,13,10,26,10,0,0,0,13,73,72,68,82,0,0,0,1,0,0,0,1,8,6,0,0,0,31,21,196,137,0,0,0,10,73,68,65,84,120,156,98,0,0,0,2,0,1,229,39,222,252,0,0,0,0,73,69,78,68,174,66,96,130])],{type:"image/png"});c.append("screenshot",d,"screenshot.png"),c.append("feedback",JSON.stringify({threadId:e,reply:t,color:r,provider:o,model:i,sourceId:l}));for(let u=0;u<s.length;u++)c.append(`image-reply-${u}`,s[u],`reply-image-${u}.png`);a=await In(`${n}/reply`,{method:"POST",body:c},3e4)}else a=await In(`${n}/reply`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({threadId:e,reply:t,color:r,provider:o,model:i,sourceId:l})},3e4);if(!a.ok){let c=await a.text();throw new Error(`Bridge returned ${a.status}: ${c}`)}return a.json()}var pr={};var eo=typeof pr!="undefined"?pr.hot:void 0,Xs,Ks,Kr=(Ks=(Xs=eo==null?void 0:eo.data)==null?void 0:Xs.sourceId)!=null?Ks:typeof crypto!="undefined"&&typeof crypto.randomUUID=="function"?crypto.randomUUID():Math.random().toString(36).slice(2);eo!=null&&eo.data&&(eo.data.sourceId=Kr);function qr(){return Kr}var to=typeof pr!="undefined"?pr.hot:void 0,Wt=to==null?void 0:to.data,uc={isConnected:!1,status:"disconnected",jobResponses:{},jobThinking:{},activeJobIds:[],currentResponse:"",currentThinking:"",events:[],activeJobId:null,lastCompletedJobId:null,lastResponseText:null,lastThreadId:null,lastErrorByJob:{},pendingQuestions:[],incrementalResolutions:[],capabilitiesVersion:0},qs,Yo=(qs=Wt==null?void 0:Wt.store)!=null?qs:f({},uc),Zs,ur=(Zs=Wt==null?void 0:Wt.listeners)!=null?Zs:new Set,Qs,Zn=(Qs=Wt==null?void 0:Wt.activeEs)!=null?Qs:null,el,Jr=(el=Wt==null?void 0:Wt.activeBridgeUrl)!=null?el:null,qn=null,tl,Xr=(tl=Wt==null?void 0:Wt.connectionGeneration)!=null?tl:0;to!=null&&to.data&&Object.defineProperties(to.data,{store:{get:()=>Yo,configurable:!0},listeners:{get:()=>ur,configurable:!0},activeEs:{get:()=>Zn,configurable:!0},activeBridgeUrl:{get:()=>Jr,configurable:!0},connectionGeneration:{get:()=>Xr,configurable:!0},discoveredBridgeUrl:{get:()=>Qn,configurable:!0}});var nl,Qn=(nl=Wt==null?void 0:Wt.discoveredBridgeUrl)!=null?nl:null,So=null;async function pc(e){return e&&e!=="http://localhost:1111"?(Qn=e,e):Qn||So||(So=zs(e).then(n=>{var r;return Qn=(r=n==null?void 0:n.url)!=null?r:null,So=null,Qn}).catch(()=>(So=null,null)),So)}function ol(){return Qn}function Js(){return Yo}function fc(e){return ur.add(e),()=>{ur.delete(e)}}function rn(e){Yo=e(Yo);for(let t of ur)t()}function rl(e){if(Zn&&Zn.readyState!==EventSource.CLOSED&&Jr===e)return;Zn&&(Zn.close(),Zn=null),qn&&(clearTimeout(qn),qn=null),Jr=e;let t=++Xr,n=new EventSource(`${e}/events?sourceId=${Kr}`);Zn=n;let r=()=>t!==Xr;n.addEventListener("connected",()=>{r()||bo(e).then(o=>{var d,u;if(r())return;let i=(d=o==null?void 0:o.activeJobs)!=null?d:o!=null&&o.activeJob?[o.activeJob]:[],s=new Set(i.map(p=>p.id)),l=(u=o==null?void 0:o.recentJobs)!=null?u:[],a=new Map(l.map(p=>[p.id,p])),c=i.length>0;rn(p=>{let g=f({},p.lastErrorByJob),k=p.activeJobIds.filter(b=>!s.has(b));for(let b of k){let E=a.get(b);(E==null?void 0:E.status)==="error"&&E.error&&(g[b]=E.error)}let w=p.activeJobIds.filter(b=>s.has(b));for(let b of s)w.includes(b)||w.push(b);return y(f({},p),{isConnected:!0,status:c?"streaming":k.length>0||p.status==="disconnected"?"idle":p.status,activeJobId:c?i[i.length-1].id:w.length>0?w[w.length-1]:null,activeJobIds:w,lastErrorByJob:g,lastCompletedJobId:k.length>0?k[k.length-1]:p.lastCompletedJobId})})})}),n.addEventListener("job_started",o=>{if(r())return;let i=JSON.parse(o.data),s=i.jobId;rn(l=>y(f({},l),{status:"streaming",activeJobId:s,activeJobIds:[...l.activeJobIds,s],jobResponses:y(f({},l.jobResponses),{[s]:""}),jobThinking:y(f({},l.jobThinking),{[s]:""}),currentResponse:"",currentThinking:"",lastResponseText:null,lastThreadId:null,events:[...l.events,{type:"job_started",data:i,timestamp:Date.now()}]}))}),n.addEventListener("delta",o=>{if(r())return;let i=JSON.parse(o.data),s=i.jobId,l=i.text||"";rn(a=>y(f({},a),{jobResponses:s?y(f({},a.jobResponses),{[s]:(a.jobResponses[s]||"")+l}):a.jobResponses,currentResponse:!s||s===a.activeJobId?a.currentResponse+l:a.currentResponse,events:[...a.events,{type:"delta",data:i,timestamp:Date.now()}]}))}),n.addEventListener("thinking",o=>{if(r())return;let i=JSON.parse(o.data),s=i.jobId,l=i.text||"";rn(a=>y(f({},a),{jobThinking:s?y(f({},a.jobThinking),{[s]:(a.jobThinking[s]||"")+l}):a.jobThinking,currentThinking:!s||s===a.activeJobId?a.currentThinking+l:a.currentThinking,events:[...a.events,{type:"thinking",data:i,timestamp:Date.now()}]}))}),n.addEventListener("tool_use",o=>{if(r())return;let i=JSON.parse(o.data);rn(s=>y(f({},s),{events:[...s.events,{type:"tool_use",data:i,timestamp:Date.now()}]}))}),n.addEventListener("done",o=>{if(r())return;let i=JSON.parse(o.data),s=i.jobId;rn(l=>{var g;let a=s?l.activeJobIds.filter(k=>k!==s):l.activeJobIds,c=f({},l.jobResponses),d=f({},l.jobThinking),u=s?c[s]:void 0;s&&(delete c[s],delete d[s]);let p=s===l.activeJobId?a.length>0?a[a.length-1]:null:l.activeJobId;return y(f(y(f({},l),{activeJobIds:a,activeJobId:p,jobResponses:c,jobThinking:d,lastCompletedJobId:s!=null?s:l.activeJobId,lastResponseText:u||l.currentResponse||i.responseText||null,lastThreadId:(g=i.threadId)!=null?g:null}),s===l.activeJobId?{currentResponse:p&&c[p]||"",currentThinking:p&&d[p]||""}:{}),{events:[...l.events,{type:"done",data:i,timestamp:Date.now()}]})})}),n.addEventListener("question",o=>{if(r())return;let i=JSON.parse(o.data);rn(s=>y(f({},s),{pendingQuestions:[...s.pendingQuestions,{jobId:i.jobId,threadId:i.threadId,question:i.question,annotationIds:i.annotationIds,timestamp:Date.now()}],events:[...s.events,{type:"question",data:i,timestamp:Date.now()}]}))}),n.addEventListener("capabilities_changed",()=>{r()||rn(o=>y(f({},o),{capabilitiesVersion:o.capabilitiesVersion+1}))}),n.addEventListener("queue_drained",()=>{r()||rn(o=>y(f({},o),{status:o.status==="error"?"error":"idle",activeJobId:null,activeJobIds:[],currentResponse:"",currentThinking:"",jobResponses:{},jobThinking:{},lastErrorByJob:{},incrementalResolutions:[]}))}),n.addEventListener("error",o=>{var i,s;if(!r()){if(n.readyState===EventSource.CLOSED)rn(l=>y(f({},l),{isConnected:!1,status:"disconnected"})),qn&&(clearTimeout(qn),qn=null),qn=setTimeout(()=>{bo(e).then(l=>{l&&rl(e)})},5e3);else if(o instanceof MessageEvent){let l=JSON.parse(o.data),a=(i=l.jobId)!=null?i:null,c=(s=l.message)!=null?s:"";rn(d=>{let u=a?d.activeJobIds.filter(g=>g!==a):d.activeJobIds,p=u.length>0?d.status:"error";return y(f({},d),{status:p,activeJobIds:u,lastCompletedJobId:a!=null?a:d.activeJobId,lastErrorByJob:a&&c?y(f({},d.lastErrorByJob),{[a]:c}):d.lastErrorByJob,events:[...d.events,{type:"error",data:l,timestamp:Date.now()}]})})}}}),n.onerror=()=>{r()||n.readyState===EventSource.CLOSED&&rn(o=>y(f({},o),{isConnected:!1,status:"disconnected"}))}}function il(e="http://localhost:1111"){let t=dc(fc,Js,Js);cc(()=>{pc(e).then(o=>{o&&bo(o).then(i=>{i&&rl(o)})})},[e]);let n=Us(()=>{rn(()=>y(f({},Yo),{events:[],currentResponse:"",currentThinking:"",jobResponses:{},jobThinking:{},lastResponseText:null,lastThreadId:null,lastErrorByJob:{},incrementalResolutions:[]}))},[]),r=Us(o=>{rn(i=>y(f({},i),{pendingQuestions:i.pendingQuestions.filter(s=>s.threadId!==o)}))},[]);return y(f({},t),{clearEvents:n,dismissQuestion:r})}import{useEffect as gc,useReducer as mc}from"react";var hc={isAnnotating:!1,activeTool:"inspector",activeColor:"#ff0000",strokeWidth:3,annotations:[],undoStack:[],redoStack:[],currentPath:[],selectedAnnotationIds:[],lastSelectedId:null,inspectedElement:null,styleModifications:[],spacingTokenChanges:[],spacingTokenMods:[]};function fr(){return Math.random().toString(36).substring(2,9)}function sl(e){return e.status?e:e.captured?y(f({},e),{status:"in_flight"}):y(f({},e),{status:"pending"})}function tn(e){return y(f({},e),{undoStack:[...e.undoStack,{annotations:e.annotations,styleModifications:e.styleModifications,spacingTokenMods:e.spacingTokenMods}],redoStack:[]})}function yc(e,t){return y(f({},e),{isAnnotating:t})}function bc(e,t){return y(f({},e),{activeTool:t,inspectedElement:null})}function xc(e,t){return y(f({},e),{activeColor:t})}function Sc(e,t){return y(f({},e),{strokeWidth:t})}function vc(e,t){return y(f({},e),{currentPath:[t]})}function wc(e,t){return y(f({},e),{currentPath:[...e.currentPath,t]})}function Ec(e){return y(f({},e),{currentPath:[]})}function Cc(e,t){if(e.currentPath.length<2&&e.activeTool!=="text")return y(f({},e),{currentPath:[]});let n={id:fr(),type:e.activeTool,points:e.currentPath,color:e.activeColor,strokeWidth:e.strokeWidth,timestamp:Date.now(),status:"pending",groupId:t==null?void 0:t.groupId,elements:t==null?void 0:t.elements},r=tn(e);return y(f({},r),{annotations:[...e.annotations,n],currentPath:[]})}function kc(e,t){var o;let n=f({id:(o=t.id)!=null?o:fr(),type:"text",points:[t.point],text:t.text,fontSize:t.fontSize||12,color:e.activeColor,strokeWidth:e.strokeWidth,timestamp:Date.now(),status:"pending",groupId:t.groupId,linkedSelector:t.linkedSelector,linkedAnchor:t.linkedAnchor,elements:t.elements},t.imageCount?{imageCount:t.imageCount}:{}),r=t.groupId?e:tn(e);return y(f({},r),{annotations:[...e.annotations,n]})}function Mc(e,t){let n=tn(e);return y(f({},n),{annotations:e.annotations.map(r=>r.id===t.id?f(y(f({},r),{text:t.text}),t.imageCount!=null?{imageCount:t.imageCount}:{}):r)})}function Tc(e,t){return y(f({},e),{annotations:e.annotations.map(n=>n.id===t.id?y(f({},n),{fontSize:Math.max(12,Math.min(72,t.fontSize))}):n)})}function Ic(e,t){let n=tn(e),r=e.annotations.find(i=>i.id===t.id),o=r==null?void 0:r.groupId;return y(f({},n),{annotations:e.annotations.filter(i=>i.id!==t.id&&!(o&&i.groupId===o))})}function Rc(e,t){let n=t.saveUndo?tn(e):e,r=e.annotations.find(i=>i.id===t.id),o=r==null?void 0:r.groupId;return y(f({},n),{annotations:e.annotations.map(i=>{if(!(i.id===t.id||o&&i.groupId===o))return i;let l=t.delta.x,a=t.delta.y;return y(f({},i),{points:i.points.map(c=>({x:c.x+l,y:c.y+a}))})})})}function Lc(e,t){let n=t.saveUndo?tn(e):e,r=e.annotations.find(s=>s.id===t.id);if(!r||r.type==="text"||r.points.length<2)return e;let o=0,i=0;if(r.type==="rectangle"&&r.groupId){let s=t.points,l=Math.min(s[0].x,s[1].x),a=Math.max(s[0].y,s[1].y),c=r.points[0],d=r.points[r.points.length-1],u=Math.min(c.x,d.x),p=Math.max(c.y,d.y);o=l-u,i=a-p}return y(f({},n),{annotations:e.annotations.map(s=>s.id===t.id?y(f({},s),{points:t.points}):r.groupId&&s.groupId===r.groupId&&s.type==="text"?y(f({},s),{points:s.points.map(l=>({x:l.x+o,y:l.y+i}))}):s)})}function Ac(e,t){let n=tn(e);return y(f({},n),{annotations:[...e.annotations,...t.annotations.map(sl)]})}function Pc(e,t){let n=new Set,r=[];for(let o of t.annotations)n.has(o.id)||(n.add(o.id),r.push(sl(o)));return y(f({},e),{annotations:r})}function Bc(e){if(e.undoStack.length===0)return e;let t=e.undoStack[e.undoStack.length-1];return y(f({},e),{annotations:(t==null?void 0:t.annotations)||[],styleModifications:(t==null?void 0:t.styleModifications)||[],spacingTokenMods:(t==null?void 0:t.spacingTokenMods)||[],undoStack:e.undoStack.slice(0,-1),redoStack:[...e.redoStack,{annotations:e.annotations,styleModifications:e.styleModifications,spacingTokenMods:e.spacingTokenMods}]})}function Oc(e){if(e.redoStack.length===0)return e;let t=e.redoStack[e.redoStack.length-1];return y(f({},e),{annotations:(t==null?void 0:t.annotations)||[],styleModifications:(t==null?void 0:t.styleModifications)||[],spacingTokenMods:(t==null?void 0:t.spacingTokenMods)||[],redoStack:e.redoStack.slice(0,-1),undoStack:[...e.undoStack,{annotations:e.annotations,styleModifications:e.styleModifications,spacingTokenMods:e.spacingTokenMods}]})}function Dc(e,t){let{id:n,addToSelection:r}=t;if(n===null)return y(f({},e),{selectedAnnotationIds:[],lastSelectedId:null});if(r)if(e.selectedAnnotationIds.includes(n)){let i=e.selectedAnnotationIds.filter(s=>s!==n);return y(f({},e),{selectedAnnotationIds:i,lastSelectedId:i.length>0?i[i.length-1]:null})}else return y(f({},e),{selectedAnnotationIds:[...e.selectedAnnotationIds,n],lastSelectedId:n});return y(f({},e),{selectedAnnotationIds:[n],lastSelectedId:n})}function Nc(e,t){let n=new Set;for(let r of e.selectedAnnotationIds){let o=e.annotations.find(i=>i.id===r);o!=null&&o.groupId&&n.add(o.groupId)}return y(f({},e),{annotations:e.annotations.map(r=>{let o=e.selectedAnnotationIds.includes(r.id),i=r.groupId&&n.has(r.groupId);return!o&&!i?r:y(f({},r),{color:t.color})})})}function Hc(e){return y(f({},e),{annotations:e.annotations.map(t=>y(f({},t),{captured:!0,status:t.status==="pending"||!t.status?"in_flight":t.status})),styleModifications:e.styleModifications.map(t=>y(f({},t),{captured:!0})),spacingTokenChanges:e.spacingTokenChanges.map(t=>y(f({},t),{captured:!0}))})}function Fc(e){return y(f({},e),{annotations:[],undoStack:[],redoStack:[],currentPath:[],selectedAnnotationIds:[],lastSelectedId:null,spacingTokenChanges:[],spacingTokenMods:[]})}function _c(e,t){return y(f({},e),{inspectedElement:t})}function zc(e,t){let{selector:n,element:r,property:o,original:i,modified:s}=t,l=e.styleModifications.findIndex(a=>a.selector===n);if(i===s&&l<0)return e;if(l>=0){let a=e.styleModifications[l];if(a.captured){let g=tn(e),k=g.styleModifications.map((w,b)=>b===l?y(f({},w),{changes:[{property:o,original:i,modified:s}],captured:!1}):w);return y(f({},g),{styleModifications:k})}let c=a.changes.findIndex(g=>g.property===o),d,u=e;if(c>=0){let g=a.changes[c];s===g.original?d=a.changes.filter((k,w)=>w!==c):d=a.changes.map((k,w)=>w===c?y(f({},k),{modified:s}):k)}else{if(i===s)return e;u=tn(e),d=[...a.changes,{property:o,original:i,modified:s}]}if(d.length===0)return y(f({},u),{styleModifications:u.styleModifications.filter((g,k)=>k!==l)});let p=u.styleModifications.map((g,k)=>k===l?y(f({},g),{changes:d}):g);return y(f({},u),{styleModifications:p})}else{let a=tn(e),c={selector:n,element:r,changes:[{property:o,original:i,modified:s}]};return y(f({},a),{styleModifications:[...a.styleModifications,c]})}}function $c(e,t){let{selector:n,durableSelector:r,element:o,changes:i}=t,s=i.filter(c=>c.original!==c.modified);if(s.length===0)return e;let l=tn(e),a=l.styleModifications.findIndex(c=>c.selector===n);if(a>=0){let c=l.styleModifications[a],d=c.captured?[]:[...c.changes];for(let u of s){let p=d.findIndex(g=>g.property===u.property);p>=0?u.modified===d[p].original?d=d.filter((g,k)=>k!==p):d=d.map((g,k)=>k===p?y(f({},g),{modified:u.modified}):g):d.push(u)}return d.length===0?y(f({},l),{styleModifications:l.styleModifications.filter((u,p)=>p!==a)}):y(f({},l),{styleModifications:l.styleModifications.map((u,p)=>p===a?y(f({},u),{changes:d,captured:!1}):u)})}else return y(f({},l),{styleModifications:[...l.styleModifications,{selector:n,durableSelector:r,element:o,changes:s}]})}function Wc(e,t){let{selector:n,property:r}=t,o=tn(e),i=o.styleModifications.map(s=>s.selector!==n?s:y(f({},s),{changes:s.changes.filter(l=>l.property!==r)})).filter(s=>s.changes.length>0);return y(f({},o),{styleModifications:i})}function Yc(e){if(e.styleModifications.length===0)return y(f({},e),{inspectedElement:null});let t=tn(e);return y(f({},t),{styleModifications:[],inspectedElement:null})}function jc(e,t){return y(f({},e),{styleModifications:t})}function Gc(e,t){let{updates:n}=t,r=new Map(n.map(o=>[o.id,o]));return y(f({},e),{annotations:e.annotations.map(o=>{let i=r.get(o.id);return i?f(y(f({},o),{points:[i.point,...o.points.slice(1)]}),i.linkedAnchor?{linkedAnchor:i.linkedAnchor}:{}):o})})}function Vc(e,t){let n=new Set(t.ids);return y(f({},e),{annotations:e.annotations.map(r=>n.has(r.id)?y(f({},r),{status:t.status}):r)})}function Uc(e,t){let n=new Set(t.ids),r=new Set;for(let o of e.annotations)n.has(o.id)&&o.groupId&&r.add(o.groupId);return y(f({},e),{annotations:e.annotations.map(o=>n.has(o.id)||o.groupId&&r.has(o.groupId)?y(f({},o),{threadId:t.threadId}):o)})}function Jc(e,t){let n=new Set(t.ids),r=new Set;for(let o of e.annotations)n.has(o.id)&&o.groupId&&r.add(o.groupId);return y(f({},e),{annotations:e.annotations.map(o=>n.has(o.id)||o.groupId&&r.has(o.groupId)?y(f({},o),{status:"waiting_input",question:t.question,threadId:t.threadId}):o)})}function Xc(e,t){let n=new Map(t.resolutions.map(o=>[o.annotationId,o])),r=new Map;for(let o of e.annotations){let i=n.get(o.id);i&&o.groupId&&r.set(o.groupId,i)}return y(f({},e),{annotations:e.annotations.map(o=>{var s,l,a;let i=n.get(o.id)||(o.groupId?r.get(o.groupId):void 0);return i?y(f({},o),{status:i.status,resolutionSummary:i.summary,scope:(l=(s=i.finalScope)!=null?s:i.inferredScope)!=null?l:null,replyCount:((a=o.replyCount)!=null?a:0)+1,question:void 0,threadId:o.threadId||t.threadId}):o})})}function Kc(e,t){let{linkedSelectors:n,styleSelectors:r}=t,o=new Set(n),i=new Set(r),s=new Set,l=new Set;for(let p of e.annotations)p.linkedSelector&&o.has(p.linkedSelector)&&(s.add(p.id),p.groupId&&l.add(p.groupId));for(let p of e.annotations)p.groupId&&l.has(p.groupId)&&s.add(p.id);let a=e.annotations.filter(p=>!s.has(p.id)),c=e.styleModifications.filter(p=>!i.has(p.selector));if(a.length===e.annotations.length&&c.length===e.styleModifications.length)return e;let d=e.selectedAnnotationIds.filter(p=>!s.has(p)),u=e.inspectedElement&&i.has(e.inspectedElement.info.selector)?null:e.inspectedElement;return y(f({},e),{annotations:a,styleModifications:c,selectedAnnotationIds:d,lastSelectedId:d.length>0?d[d.length-1]:null,inspectedElement:u})}function qc(e,t){let n=e.spacingTokenChanges.findIndex(r=>r.tokenPath===t.tokenPath);return n>=0?y(f({},e),{spacingTokenChanges:e.spacingTokenChanges.map((r,o)=>o===n?t:r)}):y(f({},e),{spacingTokenChanges:[...e.spacingTokenChanges,t]})}function Zc(e,t){return y(f({},e),{spacingTokenChanges:t})}function Qc(e,t){let n=tn(e),r=e.spacingTokenMods.findIndex(i=>i.tokenPath===t.tokenPath),o;if(r>=0){let i=e.spacingTokenMods[r],s=y(f({},t),{originalValue:i.originalValue,originalPx:i.originalPx});o=e.spacingTokenMods.map((l,a)=>a===r?s:l)}else o=[...e.spacingTokenMods,t];return y(f({},n),{spacingTokenMods:o})}function ed(e,t){let n=tn(e),r=e.spacingTokenMods.findIndex(a=>a.tokenPath===t.tokenPath),o=r>=0?e.spacingTokenMods[r].originalValue:t.originalValue,i=r>=0?e.spacingTokenMods[r].originalPx:parseFloat(t.originalValue)||0,s={tokenPath:t.tokenPath,originalValue:o,currentValue:"__deleted__",targets:r>=0?e.spacingTokenMods[r].targets:[],originalPx:i,currentPx:0},l;return r>=0?l=e.spacingTokenMods.map((a,c)=>c===r?s:a):l=[...e.spacingTokenMods,s],y(f({},n),{spacingTokenMods:l})}var td={SET_ANNOTATING:yc,SET_TOOL:bc,SET_COLOR:xc,SET_STROKE_WIDTH:Sc,START_PATH:vc,CONTINUE_PATH:wc,CANCEL_PATH:Ec,FINISH_PATH:Cc,ADD_TEXT:kc,UPDATE_TEXT:Mc,UPDATE_TEXT_SIZE:Tc,DELETE_ANNOTATION:Ic,MOVE_ANNOTATION:Rc,RESIZE_ANNOTATION:Lc,PASTE_ANNOTATIONS:Ac,RESTORE_ANNOTATIONS:Pc,UNDO:Bc,REDO:Oc,SELECT_ANNOTATION:Dc,UPDATE_ANNOTATION_COLOR:Nc,MARK_CAPTURED:Hc,CLEAR:Fc,SELECT_ELEMENT:_c,MODIFY_STYLE:zc,MODIFY_STYLES_BATCH:$c,CLEAR_STYLE:Wc,CLEAR_ALL_STYLES:Yc,RESTORE_STYLE_MODIFICATIONS:jc,UPDATE_LINKED_POSITIONS:Gc,CLEANUP_ORPHANED:Kc,SET_ANNOTATION_STATUS:Vc,SET_ANNOTATION_THREAD:Uc,SET_ANNOTATION_QUESTION:Jc,APPLY_RESOLUTIONS:Xc,ADD_SPACING_TOKEN_CHANGE:qc,RESTORE_SPACING_TOKEN_CHANGES:Zc,MODIFY_SPACING_TOKEN:Qc,DELETE_SPACING_TOKEN:ed};function nd(e,t){let n=td[t.type];return n?n(e,t.payload):e}function ll(){let[e,t]=mc(nd,hc);return gc(()=>{let n=r=>{(r.metaKey||r.ctrlKey)&&r.key==="z"&&(r.preventDefault(),r.shiftKey?t({type:"REDO"}):t({type:"UNDO"}))};return window.addEventListener("keydown",n),()=>window.removeEventListener("keydown",n)},[]),[e,t]}import{domToCanvas as od}from"modern-screenshot";function Zr(e){let t=document.createElement("canvas").getContext("2d");return t?(t.fillStyle=e,t.fillStyle):"#888888"}function Qr(e,t=[],n,r){let o=new Map,i=[];for(let l of e)if(l.groupId){let a=o.get(l.groupId)||[];a.push(l),o.set(l.groupId,a)}else i.push(l);let s=[];for(let[l,a]of o){let c=a.find(u=>u.type!=="text"),d=a.find(u=>u.type==="text");if(c){let u=c.linkedSelector||(d==null?void 0:d.linkedSelector),p=(d==null?void 0:d.imageCount)||c.imageCount;s.push(f(y(f({id:c.id,type:c.type,instruction:d==null?void 0:d.text},u?{linkedSelector:u}:{}),{elements:c.elements||[]}),p?{imageCount:p}:{}))}}for(let l of i)s.push(f(y(f({id:l.id,type:l.type,instruction:l.type==="text"?l.text:void 0},l.linkedSelector?{linkedSelector:l.linkedSelector}:{}),{elements:l.elements||[]}),l.imageCount?{imageCount:l.imageCount}:{}));return f(f({timestamp:new Date().toISOString(),url:window.location.href,viewport:{width:window.innerWidth,height:window.innerHeight},scrollPosition:{x:window.scrollX,y:window.scrollY},annotations:s,styleModifications:t},n?{inspectedElement:n}:{}),r&&r.length>0?{spacingTokenChanges:r}:{})}function rd(e){if(!e.points||e.points.length===0)return null;let t=e.points.map(r=>r.x),n=e.points.map(r=>r.y);return{minX:Math.min(...t),minY:Math.min(...n),maxX:Math.max(...t),maxY:Math.max(...n)}}function id(e,t){if(e.length===0)return[];let n=e.map(d=>({annotation:d,bounds:rd(d)})).filter(d=>d.bounds!==null);if(n.length===0)return[];n.sort((d,u)=>d.bounds.minY-u.bounds.minY);let r=Math.min(...n.map(d=>d.bounds.minY)),o=Math.max(...n.map(d=>d.bounds.maxY));if(o-r<=t){let d=(r+o)/2,u=Math.max(0,d-t/2);return[{top:u,bottom:u+t,annotations:e}]}let i=[],s=50,l=Math.max(0,r-s),a=[],c=l;for(let{annotation:d,bounds:u}of n){let p=u.maxY+s;if(p-l<=t)a.push(d),c=Math.max(c,p);else{if(a.length>0){let g=(l+c)/2,k=Math.max(0,g-t/2);i.push({top:k,bottom:k+t,annotations:a})}l=Math.max(0,u.minY-s),a=[d],c=u.maxY+s}}if(a.length>0){let d=(l+c)/2,u=Math.max(0,d-t/2);i.push({top:u,bottom:u+t,annotations:a})}return i}function sd(e,t,n,r){e.save(),e.scale(r,r);for(let o of t){let i=o.points.map(s=>({x:s.x,y:s.y-n}));switch(e.strokeStyle=o.color,e.fillStyle=o.color,e.lineWidth=o.strokeWidth,e.lineCap="round",e.lineJoin="round",o.type){case"freehand":if(i.length<2)break;e.beginPath(),e.moveTo(i[0].x,i[0].y);for(let s=1;s<i.length;s++)e.lineTo(i[s].x,i[s].y);e.stroke();break;case"line":if(i.length<2)break;e.beginPath(),e.moveTo(i[0].x,i[0].y),e.lineTo(i[i.length-1].x,i[i.length-1].y),e.stroke();break;case"rectangle":{if(i.length<2)break;let s=i[0],l=i[i.length-1],a=Math.min(s.x,l.x),c=Math.min(s.y,l.y),d=Math.abs(l.x-s.x),u=Math.abs(l.y-s.y);e.strokeRect(a,c,d,u);break}case"circle":{if(i.length<2)break;let s=i[0],l=i[i.length-1],a=(s.x+l.x)/2,c=(s.y+l.y)/2,d=Math.abs(l.x-s.x)/2,u=Math.abs(l.y-s.y)/2;e.beginPath(),e.ellipse(a,c,d,u,0,0,Math.PI*2),e.stroke();break}case"text":{if(!o.text||i.length<1)break;let s=i[0],l=o.fontSize||16;e.font=`${l}px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`,e.fillStyle=o.color;let c=(o.imageCount&&o.imageCount>0?`[${o.imageCount} image${o.imageCount>1?"s":""}] ${o.text}`:o.text).split(`
|
|
3
|
-
`),d=l*1.2,u=4,p=0;for(let g of c)p=Math.max(p,e.measureText(g).width);e.fillRect(s.x-u,s.y-u,p+u*2,c.length*d+u*2),e.fillStyle="#ffffff",c.forEach((g,
|
|
4
|
-
`),c=i!==void 0?[i+". "+(a[0]||""),...a.slice(1)]:a;e.font=`${o}px ${zt}`,e.textBaseline="middle";let d=s!==void 0?Math.min(400,Math.max(60,window.innerWidth-s-16)):400,u=no(e,c,d),p=Math.min(d,Math.max(...u.map(E=>e.measureText(E).width))),g=u.length*l,k=c.length*l,w=g-k,b=t.y-w;e.fillStyle=r,e.fillRect(t.x-4,b-4,p+8,g+8),e.fillStyle="#ffffff",u.forEach((E,B)=>{e.fillText(E,t.x,b+B*l+l/2)})}var ul=11,si=4,cd=`600 ${ul}px system-ui, -apple-system, sans-serif`;function li(e,t,n){return e.map(r=>({x:r.x-t,y:r.y-n}))}function dd(e,t,n,r,o,i){let s=String(r);e.font=cd;let a=e.measureText(s).width+si*2,c=ul+si*2,d=t-a/2,u=n+i/2+2;e.fillStyle=o,e.fillRect(d,u,a,c),e.fillStyle="#ffffff",e.textBaseline="middle",e.fillText(s,d+si,u+c/2)}function ud(e,t){if(e.points.length<2&&e.type!=="text")return null;switch(e.type){case"rectangle":case"freehand":{let n,r;if(e.type==="freehand")n=Math.min(...e.points.map(o=>o.x)),r=Math.max(...e.points.map(o=>o.y));else{let o=e.points[0],i=e.points[e.points.length-1];n=Math.min(o.x,i.x),r=Math.max(o.y,i.y)}return{x:n,y:r}}case"circle":{let n=e.points[0],r=e.points[e.points.length-1],o=Math.min(n.x,r.x),i=(Math.min(n.y,r.y)+Math.max(n.y,r.y))/2;return{x:o,y:i}}case"line":{let n=e.points[0],r=e.points[e.points.length-1],o=n.y>r.y?n:r;return{x:o.x,y:o.y}}default:return null}}function pl(){let e=ad(null),t=wo(()=>{let l=e.current;if(!l)return;let a=l.getContext("2d");a&&a.clearRect(0,0,l.width,l.height)},[]),n=wo((l,a,c)=>{var k;let d=e.current;if(!d)return;let u=d.getContext("2d");if(!u)return;let g=((k=l.status)!=null?k:l.captured?"in_flight":"pending")==="pending"||c?l.color:"#999999";switch(l.type){case"freehand":oi(u,l.points,g,l.strokeWidth);break;case"line":ri(u,l.points,g,l.strokeWidth);break;case"rectangle":ii(u,l.points,g,l.strokeWidth);break;case"circle":ni(u,l.points,g,l.strokeWidth);break;case"text":l.text&&l.points[0]&&dl(u,l.points[0],l.text,g,l.fontSize,a,l.points[0].x);break}},[]),r=wo((l,a,c,d)=>{let u=e.current;if(!u||l.length<2)return;let p=u.getContext("2d");if(p)switch(a){case"freehand":oi(p,l,c,d);break;case"line":ri(p,l,c,d);break;case"rectangle":ii(p,l,c,d);break;case"circle":ni(p,l,c,d);break}},[]),o=wo((l,a)=>{let c=e.current;if(!c||l.points.length<2)return;let d=c.getContext("2d");if(d){if(d.fillStyle="#ffffff",d.strokeStyle=l.color,d.lineWidth=1.5,l.type==="line"){let u=l.points[0],p=l.points[l.points.length-1];[u,p].forEach(g=>{d.beginPath(),d.arc(g.x,g.y,a/2,0,Math.PI*2),d.fill(),d.stroke()});return}if(l.type==="circle"){let u=l.points[0],p=l.points[l.points.length-1],g=Math.min(u.x,p.x),k=Math.max(u.x,p.x),w=Math.min(u.y,p.y),b=Math.max(u.y,p.y),E=(g+k)/2,B=(w+b)/2;[{x:E,y:w},{x:E,y:b},{x:g,y:B},{x:k,y:B}].forEach(T=>{d.beginPath(),d.rect(T.x-a/2,T.y-a/2,a,a),d.fill(),d.stroke()});return}if(l.type==="rectangle"||l.type==="freehand"){let u,p,g,k;if(l.type==="freehand")u=Math.min(...l.points.map(b=>b.x)),p=Math.max(...l.points.map(b=>b.x)),g=Math.min(...l.points.map(b=>b.y)),k=Math.max(...l.points.map(b=>b.y));else{let b=l.points[0],E=l.points[l.points.length-1];u=Math.min(b.x,E.x),p=Math.max(b.x,E.x),g=Math.min(b.y,E.y),k=Math.max(b.y,E.y)}[{x:u,y:g},{x:p,y:g},{x:u,y:k},{x:p,y:k}].forEach(b=>{d.beginPath(),d.rect(b.x-a/2,b.y-a/2,a,a),d.fill(),d.stroke()})}}},[]),i=wo((l,a,c,d,u,p,g,k=0,w=0,b,E)=>{var B;if(t(),l.forEach(L=>{var H;let T=y(f({},L),{points:li(L.points,k,w)}),v=b==null?void 0:b.get(L.id),O=(H=E==null?void 0:E.has(L.id))!=null?H:!1;n(T,v,O)}),a.length>0){let L=li(a,k,w);r(L,c,d,u)}if(p&&p.length>0&&g){let L=e.current,T=L==null?void 0:L.getContext("2d");for(let v of p){let O=l.find(H=>H.id===v);if(O){let H=y(f({},O),{points:li(O.points,k,w)});if(o(H,g),T&&O.type!=="text"&&b&&!(O.groupId&&l.some(G=>G.groupId===O.groupId&&G.type==="text"))){let G=b.get(O.id);if(G!==void 0){let X=ud(H,g);if(X){let I=((B=O.status)!=null?B:O.captured?"in_flight":"pending")==="pending"?O.color:"#999999";dd(T,X.x,X.y,G,I,g)}}}}}}},[t,n,r,o]),s=wo(()=>{let l=e.current;if(!l)return;let a=window.devicePixelRatio||1;l.width=window.innerWidth*a,l.height=window.innerHeight*a;let c=l.getContext("2d");c&&c.scale(a,a)},[]);return{canvasRef:e,clearCanvas:t,drawAnnotation:n,drawCurrentPath:r,redrawAll:i,resizeCanvas:s}}import{useEffect as pd,useRef as fd}from"react";function fl(){let e=fd({shift:!1,cmd:!1});return pd(()=>{let t=o=>{o.key==="Shift"&&(e.current.shift=!0),(o.key==="Meta"||o.key==="Control")&&(e.current.cmd=!0)},n=o=>{o.key==="Shift"&&(e.current.shift=!1),(o.key==="Meta"||o.key==="Control")&&(e.current.cmd=!1)},r=()=>{e.current={shift:!1,cmd:!1}};return window.addEventListener("keydown",t,!0),window.addEventListener("keyup",n,!0),window.addEventListener("blur",r),()=>{window.removeEventListener("keydown",t,!0),window.removeEventListener("keyup",n,!0),window.removeEventListener("blur",r)}},[]),e}import{useEffect as gd}from"react";function gl(e,t,n,r,o){gd(()=>{let i=s=>{if(e){if(e.linkedSelector)return;s.preventDefault(),s.stopPropagation();let a=s.deltaY>0?-2:2;t(c=>c?y(f({},c),{fontSize:Math.max(12,Math.min(72,c.fontSize+a))}):null);return}if(!n)return;s.preventDefault();let l=r.find(a=>a.id===n);if(l&&l.type==="text"&&!l.linkedSelector){let a=l.fontSize||12,c=s.deltaY>0?-2:2;o({type:"UPDATE_TEXT_SIZE",payload:{id:n,fontSize:a+c}})}};return window.addEventListener("wheel",i,{passive:!1}),()=>{window.removeEventListener("wheel",i)}},[n,e,r,o,t])}import{useCallback as Il,useEffect as Cr,useRef as Rl,useState as Ko}from"react";function gr(e){let t=Object.keys(e).find(o=>o.startsWith("__reactFiber$")||o.startsWith("__reactInternalInstance$"));if(!t)return null;let n=e[t],r=[];for(;n;){let o=n.type,i=(o==null?void 0:o.displayName)||(o==null?void 0:o.name);i&&typeof i=="string"&&/^[A-Z]/.test(i)&&!i.startsWith("_")&&i!=="Fragment"&&r.unshift(i),n=n.return}return r.length>0?{name:r[r.length-1],path:r}:null}function ai(e){let t=Object.keys(e).find(o=>o.startsWith("__reactFiber$")||o.startsWith("__reactInternalInstance$"));if(!t)return[];let n=e[t],r=[];for(;n;){let o=n.type,i=typeof o=="function"||typeof o=="object"?(o==null?void 0:o.displayName)||(o==null?void 0:o.name):null;i&&typeof i=="string"&&/^[A-Z]/.test(i)&&!i.startsWith("_")&&i!=="Fragment"&&r.push({name:i,fiber:n}),n=n.return}return r.reverse(),r}function mr(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 ml(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 un(e){if(e.id&&!e.id.startsWith("radix-")&&!e.id.startsWith(":"))return`#${CSS.escape(e.id)}`;let t=[],n=e;for(;n&&n!==document.documentElement;){let r=n.tagName.toLowerCase();if(n.id&&!n.id.startsWith("radix-")&&!n.id.startsWith(":")){t.unshift(`#${CSS.escape(n.id)}`);break}let o=Array.from(n.classList).filter(s=>!s.startsWith("_")&&s.length<30).slice(0,2);o.length>0&&(r+="."+o.map(s=>CSS.escape(s)).join("."));let i=n.parentElement;if(i){let s=Array.from(i.children).filter(l=>l.tagName===n.tagName);if(s.length>1){let l=s.indexOf(n)+1;r+=`:nth-of-type(${l})`}}t.unshift(r),n=i}return t.join(" > ")}function Qt(e){try{return document.querySelector(e)}catch(t){return null}}function hr(e,t=0){var a;let n=ai(e);if(n.length===0)return null;let r=n.map(c=>c.name),o=n.length-1,i=Math.max(0,Math.min(n.length-1,o-t)),s=n[i],l=(a=mr(s.fiber))!=null?a:e;return{name:s.name,path:r,depthIndex:i,rootElement:l}}function hl(e,t){var i,s;let n=ai(e),r=t.toLowerCase(),o=-1;for(let l=n.length-1;l>=0;l--){let a=n[l].name;if(a===t){let c=(i=mr(n[l].fiber))!=null?i:e;return{name:t,path:n.map(d=>d.name),depthIndex:l,rootElement:c}}if(o===-1){let c=a.toLowerCase();(c.length>=4&&r.includes(c)||r.length>=4&&c.includes(r))&&(o=l)}}if(o>=0){let l=(s=mr(n[o].fiber))!=null?s:e;return{name:t,path:n.map(a=>a.name),depthIndex:o,rootElement:l}}return null}function Eo(e){let t=Co(),n=[],r=new Set,o=t.currentNode;for(;o=t.nextNode();){let i=hl(o,e);i&&!r.has(i.rootElement)&&(r.add(i.rootElement),n.push(i))}return n}function ci(e){let t=new Map;if(e.size===0)return t;let n=new Set(e),r=Co(),o=new Set,i=r.currentNode;for(;(i=r.nextNode())&&n.size>0;)for(let s of n){let l=hl(i,s);if(!l||o.has(l.rootElement))continue;o.add(l.rootElement);let a=l.rootElement.getBoundingClientRect();t.set(s,a.top+window.scrollY),n.delete(s);break}for(let s of n)t.set(s,1/0);return t}function Co(){return document.createTreeWalker(document.body,NodeFilter.SHOW_ELEMENT,{acceptNode(e){return e.closest("#devtools-toolbar, #devtools-canvas, #devtools-scrim, [data-popmelt-panel]")?NodeFilter.FILTER_REJECT:NodeFilter.FILTER_ACCEPT}})}function nn(e){let t={selector:ml(e),tagName:e.tagName.toLowerCase()};e.id&&(t.id=e.id),e.classList.length>0&&(t.className=Array.from(e.classList).join(" "));let n=yl(e);n&&n.length>0&&n.length<200&&(t.textContent=n);let r={};for(let s of e.attributes)s.name.startsWith("data-")&&(r[s.name]=s.value);Object.keys(r).length>0&&(t.dataAttributes=r);let o=gr(e);o&&(t.reactComponent=o.name);let i=md(e);return i&&(t.context=i),t}function yl(e){let t="";for(let n of e.childNodes)n.nodeType===Node.TEXT_NODE&&(t+=n.textContent||"");return t.trim()}function oo(e,t){let n=document.elementsFromPoint(e,t);for(let r of n)if(r instanceof HTMLElement&&!(r.id==="devtools-canvas"||r.id==="devtools-toolbar"||r.id==="devtools-scrim")&&!r.closest("#devtools-toolbar")&&!(r.dataset.devtools||r.closest("[data-devtools]"))&&!["html","body"].includes(r.tagName.toLowerCase()))return r;return null}function md(e){let t=e.parentElement,n=["section","article","nav","aside","header","footer","main"];for(;t&&t!==document.body;){let r=t.tagName.toLowerCase();if(n.includes(r)&&t.id)return`${r}#${t.id}`;if(t.id&&!t.id.startsWith("radix-")&&!t.id.startsWith(":"))return`${r}#${t.id}`;t=t.parentElement}return null}function bl(e){let t=new Set,n=[],r=window.scrollX,o=window.scrollY,i=[{x:(e.minX+e.maxX)/2,y:(e.minY+e.maxY)/2},{x:e.minX,y:e.minY},{x:e.maxX,y:e.minY},{x:e.minX,y:e.maxY},{x:e.maxX,y:e.maxY}];for(let s of i){let l=s.x-r,a=s.y-o;if(l<0||a<0||l>window.innerWidth||a>window.innerHeight)continue;let c=oo(l,a);c&&!t.has(c)&&(t.add(c),n.push(nn(c)))}return n.slice(0,3)}function di(e){if(e.length===0)return[];let t=e.map(r=>r.x),n=e.map(r=>r.y);return bl({minX:Math.min(...t),minY:Math.min(...n),maxX:Math.max(...t),maxY:Math.max(...n)})}function At(e,t){return e.style.getPropertyValue(t)!==""}function hd(e,t=30){if(e<=0)return[];let n=[],r=Co(),o=.5,i=r.currentNode;for(;(i=r.nextNode())&&n.length<t;){let s=i,l=s.getBoundingClientRect();if(l.bottom<-50||l.top>window.innerHeight+50||l.right<-50||l.left>window.innerWidth+50||l.width<1||l.height<1)continue;let a=getComputedStyle(s);!At(s,"padding-top")&&Math.abs((parseFloat(a.paddingTop)||0)-e)<o&&n.push({element:s,property:"padding-top"}),!At(s,"padding-bottom")&&Math.abs((parseFloat(a.paddingBottom)||0)-e)<o&&n.length<t&&n.push({element:s,property:"padding-bottom"}),!At(s,"padding-left")&&Math.abs((parseFloat(a.paddingLeft)||0)-e)<o&&n.length<t&&n.push({element:s,property:"padding-left"}),!At(s,"padding-right")&&Math.abs((parseFloat(a.paddingRight)||0)-e)<o&&n.length<t&&n.push({element:s,property:"padding-right"}),!At(s,"margin-top")&&Math.abs((parseFloat(a.marginTop)||0)-e)<o&&n.length<t&&n.push({element:s,property:"margin-top"}),!At(s,"margin-bottom")&&Math.abs((parseFloat(a.marginBottom)||0)-e)<o&&n.length<t&&n.push({element:s,property:"margin-bottom"}),!At(s,"margin-left")&&Math.abs((parseFloat(a.marginLeft)||0)-e)<o&&n.length<t&&n.push({element:s,property:"margin-left"}),!At(s,"margin-right")&&Math.abs((parseFloat(a.marginRight)||0)-e)<o&&n.length<t&&n.push({element:s,property:"margin-right"});let c=a.display;if((c.includes("flex")||c.includes("grid"))&&n.length<t){let d=At(s,"gap"),u=parseFloat(a.gap)||0,p=parseFloat(a.rowGap)||0,g=parseFloat(a.columnGap)||0;!d&&Math.abs(u-e)<o?n.push({element:s,property:"gap"}):!At(s,"row-gap")&&Math.abs(p-e)<o?n.push({element:s,property:"row-gap"}):!At(s,"column-gap")&&Math.abs(g-e)<o&&n.push({element:s,property:"column-gap"})}}return n}function ui(e,t=30){if(e<=0)return[];let n=[],r=Co(),o=.5,i=r.currentNode;for(;(i=r.nextNode())&&n.length<t;){let s=i,l=s.getBoundingClientRect();if(l.bottom<-50||l.top>window.innerHeight+50||l.right<-50||l.left>window.innerWidth+50||l.width<1||l.height<1)continue;let a=getComputedStyle(s),c=parseFloat(a.borderTopWidth)||0,d=parseFloat(a.borderRightWidth)||0,u=parseFloat(a.borderBottomWidth)||0,p=parseFloat(a.borderLeftWidth)||0,g=s.clientWidth,k=s.clientHeight,w=parseFloat(a.paddingTop)||0;!At(s,"padding-top")&&Math.abs(w-e)<o&&n.push({x:l.left+p,y:l.top+c,width:g,height:e,direction:"vertical",property:"padding-top"});let b=parseFloat(a.paddingBottom)||0;!At(s,"padding-bottom")&&Math.abs(b-e)<o&&n.length<t&&n.push({x:l.left+p,y:l.top+c+k-e,width:g,height:e,direction:"vertical",property:"padding-bottom"});let E=parseFloat(a.paddingLeft)||0;!At(s,"padding-left")&&Math.abs(E-e)<o&&n.length<t&&n.push({x:l.left+p,y:l.top+c,width:e,height:k,direction:"horizontal",property:"padding-left"});let B=parseFloat(a.paddingRight)||0;!At(s,"padding-right")&&Math.abs(B-e)<o&&n.length<t&&n.push({x:l.left+p+g-e,y:l.top+c,width:e,height:k,direction:"horizontal",property:"padding-right"});let L=parseFloat(a.marginTop)||0;!At(s,"margin-top")&&Math.abs(L-e)<o&&n.length<t&&n.push({x:l.left,y:l.top-e,width:l.width,height:e,direction:"vertical",property:"margin-top"});let T=parseFloat(a.marginBottom)||0;!At(s,"margin-bottom")&&Math.abs(T-e)<o&&n.length<t&&n.push({x:l.left,y:l.bottom,width:l.width,height:e,direction:"vertical",property:"margin-bottom"});let v=parseFloat(a.marginLeft)||0;!At(s,"margin-left")&&Math.abs(v-e)<o&&n.length<t&&n.push({x:l.left-e,y:l.top,width:e,height:l.height,direction:"horizontal",property:"margin-left"});let O=parseFloat(a.marginRight)||0;!At(s,"margin-right")&&Math.abs(O-e)<o&&n.length<t&&n.push({x:l.right,y:l.top,width:e,height:l.height,direction:"horizontal",property:"margin-right"});let H=a.display;if((H.includes("flex")||H.includes("grid"))&&n.length<t&&!At(s,"gap")){let G=Array.from(s.children).filter(X=>{let S=getComputedStyle(X);return S.display!=="none"&&S.position!=="absolute"&&S.position!=="fixed"});if(G.length>=2)for(let X=0;X<G.length-1&&n.length<t;X++){let S=G[X].getBoundingClientRect(),I=G[X+1].getBoundingClientRect(),K=I.top-S.bottom;Math.abs(K-e)<o&&K>.5&&n.push({x:Math.min(S.left,I.left),y:S.bottom,width:Math.max(S.right,I.right)-Math.min(S.left,I.left),height:K,direction:"vertical",property:"gap"});let ge=I.left-S.right;Math.abs(ge-e)<o&&ge>.5&&n.push({x:S.right,y:Math.min(S.top,I.top),width:ge,height:Math.max(S.bottom,I.bottom)-Math.min(S.top,I.top),direction:"horizontal",property:"gap"})}}}return n}function yr(e){return typeof e=="string"?{value:e}:e}var Sl={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 xl(e,t){let n=Sl[t];return n?n.includes(e):!1}function yd(e,t){let n=e.split(/\s+/);for(let r of n){if(r===t)return!0;let o=r.lastIndexOf(":");if(o>=0&&r.slice(o+1)===t)return!0}return!1}function bd(e){var l,a;let t=e.lastIndexOf(":"),n=t>=0?e.slice(t+1):e,r=n.indexOf("-");if(r<0)return null;let o=n.slice(0,r),i={gap:"gap","gap-x":"column-gap","gap-y":"row-gap",p:"padding",pt:"padding-top",pb:"padding-bottom",pl:"padding-left",pr:"padding-right",px:"padding-left",py:"padding-top",m:"margin",mt:"margin-top",mb:"margin-bottom",ml:"margin-left",mr:"margin-right",mx:"margin-left",my:"margin-top"},s=n.slice(0,n.indexOf("-",r+1)>0?n.indexOf("-",r+1):r);return(a=(l=i[s])!=null?l:i[o])!=null?a:null}function pi(e,t=30){let n=parseFloat(e.value);if(isNaN(n)||n<=0)return[];if(e.bindings&&e.bindings.length>0){let o=[],i=Co(),s=i.currentNode;for(;(s=i.nextNode())&&o.length<t;){let l=s,a=l.getBoundingClientRect();if(a.bottom<-50||a.top>window.innerHeight+50||a.right<-50||a.left>window.innerWidth+50||a.width<1||a.height<1)continue;let c=l.className;if(typeof c=="string")for(let d of e.bindings){if(!yd(c,d))continue;let u=bd(d);if(u&&!(e.property&&!xl(u,e.property))){o.push({element:l,property:u});break}}}return o}let r=hd(n,t*2);return e.property?r.filter(o=>xl(o.property,e.property)).slice(0,t):r.slice(0,t)}function fi(e,t=30){let n=pi(e,t),r=[];for(let o of n){let i=o.element,s=i.getBoundingClientRect(),l=getComputedStyle(i),a=parseFloat(l.borderTopWidth)||0,c=parseFloat(l.borderRightWidth)||0,d=parseFloat(l.borderLeftWidth)||0,u=i.clientWidth,p=i.clientHeight;switch(o.property){case"padding-top":{let g=parseFloat(l.paddingTop)||0;r.push({x:s.left+d,y:s.top+a,width:u,height:g,direction:"vertical",property:o.property});break}case"padding-bottom":{let g=parseFloat(l.paddingBottom)||0;r.push({x:s.left+d,y:s.top+a+p-g,width:u,height:g,direction:"vertical",property:o.property});break}case"padding-left":{let g=parseFloat(l.paddingLeft)||0;r.push({x:s.left+d,y:s.top+a,width:g,height:p,direction:"horizontal",property:o.property});break}case"padding-right":{let g=parseFloat(l.paddingRight)||0;r.push({x:s.left+d+u-g,y:s.top+a,width:g,height:p,direction:"horizontal",property:o.property});break}case"margin-top":{let g=parseFloat(l.marginTop)||0;r.push({x:s.left,y:s.top-g,width:s.width,height:g,direction:"vertical",property:o.property});break}case"margin-bottom":{let g=parseFloat(l.marginBottom)||0;r.push({x:s.left,y:s.bottom,width:s.width,height:g,direction:"vertical",property:o.property});break}case"margin-left":{let g=parseFloat(l.marginLeft)||0;r.push({x:s.left-g,y:s.top,width:g,height:s.height,direction:"horizontal",property:o.property});break}case"margin-right":{let g=parseFloat(l.marginRight)||0;r.push({x:s.right,y:s.top,width:g,height:s.height,direction:"horizontal",property:o.property});break}case"gap":case"row-gap":case"column-gap":{let g=Array.from(i.children).filter(k=>{let w=getComputedStyle(k);return w.display!=="none"&&w.position!=="absolute"&&w.position!=="fixed"});for(let k=0;k<g.length-1&&r.length<t;k++){let w=g[k].getBoundingClientRect(),b=g[k+1].getBoundingClientRect(),E=b.top-w.bottom;E>.5&&r.push({x:Math.min(w.left,b.left),y:w.bottom,width:Math.max(w.right,b.right)-Math.min(w.left,b.left),height:E,direction:"vertical",property:"gap"});let B=b.left-w.right;B>.5&&r.push({x:w.right,y:Math.min(w.top,b.top),width:B,height:Math.max(w.bottom,b.bottom)-Math.min(w.top,b.top),direction:"horizontal",property:"gap"})}break}}}return r}function vl(e,t){let n=new Set,r=jo(t);for(let o of e){let i=El[o.property];if(!i)continue;let s=o.element.className;if(typeof s=="string")for(let l of i){let a=`${l}-${r}`;for(let c of s.split(/\s+/)){let d=c.lastIndexOf(":"),u=d>=0?c.slice(d+1):c;if(u===a){n.add(u);break}}}}return[...n]}function wl(e){let t=new Set;for(let n of e)for(let[r,o]of Object.entries(Sl))if(o.includes(n.property)){t.add(r);break}if(t.size===1)return[...t][0]}function gi(e,t,n){if(t===n)return e;let r=jo(t),o=jo(n);return e.map(i=>{let s=i.lastIndexOf("-");if(s<0)return i;let l=i.slice(0,s),a=i.slice(s+1);return a===r||a===`[${t}px]`?`${l}-${o}`:i})}var xd={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 jo(e){var t;return(t=xd[e])!=null?t:`[${e}px]`}var El={"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 Sd(e,t,n,r){let o=El[t];if(!o)return null;let i=jo(n);for(let s of o){let l=new RegExp("(?:^|\\s)((?:[\\w-]+:)*"+s+"-(?:"+vd(i)+"|\\["+n+"px\\]))(?:\\s|$)"),a=e.match(l);if(a!=null&&a[1]){let c=jo(r),d=a[1].lastIndexOf(":"),u=d>=0?a[1].slice(0,d+1):"";return{matched:a[1],suggested:`${u}${s}-${c}`}}}return null}function vd(e){return e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function Cl(e,t,n){let r=new Set,o=[];for(let i of e){let s=un(i.element),l=`${s}::${i.property}`;if(r.has(l))continue;r.add(l);let a=gr(i.element),c=i.element.className||"",d=Sd(c,i.property,t,n);o.push({selector:s,reactComponent:a==null?void 0:a.name,className:c,property:i.property,matchedClass:d==null?void 0:d.matched,suggestedClass:d==null?void 0:d.suggested})}return o}function Go(e,t){return window.getComputedStyle(e).getPropertyValue(t)}function mi(e,t){if(e instanceof HTMLElement){let r=e.style.getPropertyValue(t);if(r)return r}let n=wd(e,t);return n&&n.includes("var(")?n:Go(e,t)}function wd(e,t){let n=t.replace(/-([a-z])/g,(r,o)=>o.toUpperCase());try{for(let r of document.styleSheets)try{let o=r.cssRules||r.rules;for(let i of o)if(i instanceof CSSStyleRule&&e.matches(i.selectorText)){let s=i.style.getPropertyValue(t);if(s&&s.includes("var("))return s;let l=i.style[n];if(l&&l.includes("var("))return l}}catch(o){}}catch(r){}return null}function br(e,t){if(e instanceof HTMLElement){let r=e.style.getPropertyValue(t);if(r)return r}let n=t.replace(/-([a-z])/g,(r,o)=>o.toUpperCase());try{for(let r of document.styleSheets)try{let o=r.cssRules||r.rules;for(let i of o)if(i instanceof CSSStyleRule&&e.matches(i.selectorText)){let s=i.style.getPropertyValue(t);if(s)return s;let l=i.style[n];if(l)return l}}catch(o){}}catch(r){}return null}function xr(e){let t=window.getComputedStyle(e).display;return t==="flex"||t==="inline-flex"||t==="grid"||t==="inline-grid"}function Vo(e){let t=window.getComputedStyle(e);return{row:parseFloat(t.rowGap)||0,column:parseFloat(t.columnGap)||0}}function Ed(e){let t=[];for(let n of e){let r=t.find(o=>o.axis!==n.axis?!1:n.axis==="row"?Math.abs(o.y-n.y)<2&&Math.abs(o.h-n.h)<2:Math.abs(o.x-n.x)<2&&Math.abs(o.w-n.w)<2);if(r)if(n.axis==="row"){let o=Math.min(r.x,n.x),i=Math.max(r.x+r.w,n.x+n.w);r.x=o,r.w=i-o}else{let o=Math.min(r.y,n.y),i=Math.max(r.y+r.h,n.y+n.h);r.y=o,r.h=i-o}else t.push(f({},n))}return t}function ro(e){let t=Array.from(e.children).filter(a=>{if(!(a instanceof HTMLElement))return!1;let c=window.getComputedStyle(a);return c.display!=="none"&&c.position!=="absolute"&&c.position!=="fixed"});if(t.length<2)return[];let n=[],r=e.getBoundingClientRect(),i=window.getComputedStyle(e).flexDirection,s=i==="column"||i==="column-reverse",l=6;for(let a=0;a<t.length-1;a++){let c=t[a].getBoundingClientRect(),d=t[a+1].getBoundingClientRect();if(d.left>c.right+.5&&n.push({axis:"column",x:c.right,y:r.top,w:d.left-c.right,h:r.height}),d.top>c.bottom+.5&&n.push({axis:"row",x:r.left,y:c.bottom,w:r.width,h:d.top-c.bottom}),!(d.left>c.right+.5)&&!(d.top>c.bottom+.5))if(s){let u=(c.bottom+d.top)/2;n.push({axis:"row",x:r.left,y:u-l/2,w:r.width,h:l})}else{let u=(c.right+d.left)/2;n.push({axis:"column",x:u-l/2,y:r.top,w:l,h:r.height})}}return Ed(n)}function hi(e,t){let n=window.getComputedStyle(e),r=n.display;if(r!=="flex"&&r!=="inline-flex")return!1;let o=n.justifyContent;if(o!=="space-between"&&o!=="space-around"&&o!=="space-evenly"&&o!=="stretch")return!1;let i=n.flexDirection;return!(t!==(i==="column"||i==="column-reverse"?"row":"column")||parseFloat(t==="row"?n.rowGap:n.columnGap)>0)}function ko(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 io(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 yi(e){for(let t of e.childNodes)if(t.nodeType===Node.TEXT_NODE&&(t.textContent||"").trim().length>0)return!0;return!1}function Mo(e){var d,u;let t=document.createRange(),n=!1;for(let p of e.childNodes)p.nodeType===Node.TEXT_NODE&&(p.textContent||"").trim().length>0&&(n||(t.setStart(p,0),n=!0),t.setEnd(p,(u=(d=p.textContent)==null?void 0:d.length)!=null?u:0));if(!n)return null;let r=t.getBoundingClientRect(),o=window.getComputedStyle(e),i=parseFloat(o.fontSize)||16,s=parseFloat(o.lineHeight);isNaN(s)&&(s=i*1.2);let l=Math.max(1,t.getClientRects().length),a=Math.max(r.height,l*s),c=(a-r.height)/2;return new DOMRect(r.x,r.y-c,r.width,a)}function Uo(e){let t=window.getComputedStyle(e),n=parseFloat(t.fontSize)||16,r=parseFloat(t.lineHeight);return isNaN(r)&&(r=n*1.2),{fontSize:n,lineHeight:r}}function $e(e,t,n){e instanceof HTMLElement&&e.style.setProperty(t,n,"important")}function bi(e,t,n){e instanceof HTMLElement&&e.style.removeProperty(t)}function Sr(e){var t;for(let n of e){let r=Qt(n.selector);if(!r&&n.durableSelector&&(r=Qt(n.durableSelector),r)){let o=(t=n.selector.match(/\[data-pm="([^"]+)"\]/))==null?void 0:t[1];o&&r.setAttribute("data-pm",o)}if(r)for(let o of n.changes)$e(r,o.property,o.modified)}}function xi(e,t){let n=Qt(e);if(!n)return;let r=t.find(o=>o.selector===e);if(r)for(let o of r.changes)bi(n,o.property,o.original)}function vr(e){for(let t of e){let n=Qt(t.selector);if(n)for(let r of t.changes)bi(n,r.property,r.original)}}function Ml(e,t,n,r){if(e)for(let o of e){if(o instanceof CSSGroupingRule){Ml(o.cssRules,t,n,r);continue}if(o instanceof CSSStyleRule){let i=o.selectorText.toLowerCase();(i===":root"||i==="html"||i==="*"||i.includes(":root"))&&Cd(o.style,t,n,r)}}}function Cd(e,t,n,r){for(let o=0;o<e.length;o++){let i=e[o];if(i!=null&&i.startsWith("--")){if(n.has(i))continue;n.add(i);let s=t.getPropertyValue(i).trim();Tl(s)&&r.push({name:i,value:s,usage:`var(${i})`})}}}var wr=null,kd=5e3;function Si(){if(wr&&Date.now()-wr.timestamp<kd)return wr.variables;let e=[],t=new Set,n=getComputedStyle(document.documentElement);try{for(let i of document.styleSheets)try{Ml(i.cssRules||i.rules,n,t,e)}catch(s){}}catch(i){}let r=document.documentElement.style;for(let i=0;i<r.length;i++){let s=r[i];if(s!=null&&s.startsWith("--")&&!t.has(s)){t.add(s);let l=n.getPropertyValue(s).trim();Tl(l)&&e.push({name:s,value:l,usage:`var(${s})`})}}let o=e.sort((i,s)=>i.name.localeCompare(s.name));return wr={variables:o,timestamp:Date.now()},o}function Tl(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 Jo(e,t){let n=t.match(/var\((--[^,)]+)(?:,\s*([^)]+))?\)/);if(n){let r=n[1],o=n[2];return getComputedStyle(document.documentElement).getPropertyValue(r).trim()||o||t}return t}function Xo(e,t){if(!e)return null;let n=kl(e);if(!n)return null;for(let r of t){let o=kl(r.value);if(o&&n===o)return r}return null}function kl(e){if(!e)return null;let t=e.trim().toLowerCase();if(t.startsWith("oklch(")){let n=t.match(/oklch\(\s*([\d.]+%?)\s+([\d.]+%?)\s+([\d.]+)/);if(n){let r=n[1].endsWith("%")?parseFloat(n[1])/100:parseFloat(n[1]),o=n[2].endsWith("%")?parseFloat(n[2])/100:parseFloat(n[2]),i=parseFloat(n[3]);r=Math.round(r*100)/100,o=Math.round(o*1e3)/1e3;let s=Math.round(i);return`oklch(${r} ${o} ${s})`}}if(t.startsWith("rgb")){let n=t.match(/rgba?\(\s*(\d+)[,\s]+(\d+)[,\s]+(\d+)/);if(n)return`rgb(${n[1]},${n[2]},${n[3]})`}return t.startsWith("#")?t.length===4?`#${t[1]}${t[1]}${t[2]}${t[2]}${t[3]}${t[3]}`:t.slice(0,7):t}import{Fragment as so,jsx as Qe,jsxs as wn}from"react/jsx-runtime";var bn=22,jn=12,Md=3,Td=250,Er=["reviewing","considering","thinking","zhuzhing","iterating","tweaking","reflecting","noodling","pondering","finessing","polishing","riffing"],Id=3e3;function Rd(s){var l=s,{left:e,top:t,avoidBottom:n,style:r,children:o}=l,i=Yn(l,["left","top","avoidBottom","style","children"]);let a=e+jn,c=t+jn,d=n!==void 0?`${n}px`:"100vh";return Qe("div",y(f({"data-devtools":"badge-hit-area"},i),{style:f({position:"fixed",left:e,top:t,padding:jn},r),children:Qe("div",{style:{transform:`translate(min(0px, calc(100vw - ${a}px - 100%)), min(0px, calc(${d} - ${c}px - 100%)))`},children:o})}))}function Ll({annotations:e,supersededAnnotations:t,inFlightIds:n,scrollX:r,scrollY:o,annotationGroupMap:i,onViewThread:s,onSelectAnnotation:l,onHoverAnnotation:a,canvasRef:c}){var v,O,H,U,G,X,S;let[d,u]=Ko(0),[p,g]=Ko(()=>Math.floor(Math.random()*Er.length)),k=!!(n&&n.size>0);Cr(()=>{if(!k)return;let I=setInterval(()=>{u(ge=>(ge+1)%Md)},Td),K=setInterval(()=>{g(ge=>(ge+1)%Er.length)},Id);return()=>{clearInterval(I),clearInterval(K)}},[k]);let w=[];for(let I of e){if(I.type!=="text"||!I.text||!I.points[0]||t.has(I))continue;let K=I.groupId?e.filter(j=>j.groupId===I.groupId):[I],ge=!!(n&&(n.has(I.id)||K.some(j=>n.has(j.id)))),be=(v=I.status)!=null?v:"pending",de=K.some(j=>j.status==="resolved"||j.status==="needs_review"),ue=K.some(j=>j.threadId);if(!ge&&be!=="resolved"&&be!=="needs_review"&&!de&&!ue)continue;let Fe=I.threadId||((O=K.find(j=>j.threadId))==null?void 0:O.threadId),Te=be==="needs_review"||K.some(j=>j.status==="needs_review"),ee=K.reduce((j,he)=>{var xe;return j+((xe=he.replyCount)!=null?xe:0)},0),Le=I.points[0],Ae=I.fontSize||12,_e=Ae*1.4,Pe=I.text.split(`
|
|
5
|
-
`),Me=i.get(I.id),
|
|
6
|
-
`),E=i.get(p.id),B=E!==void 0?[E+". "+(b[0]||""),...b.slice(1)]:b,T=document.createElement("canvas").getContext("2d");if(!T)continue;T.font=`${k}px ${zt}`;let v=g.x-n,O=vo(v),H=O!==void 0?Math.min(400,O):400,U=no(T,B,H),G=Math.min(H,Math.max(...U.map(ge=>T.measureText(ge).width))),X=U.length*w,S=B.length*w,I=X-S,K=X+8;d.push({annotation:u,x:g.x+G+4,y:g.y-4-I,size:K})}}return d.length===0?null:Qe(so,{children:d.map(({annotation:u,x:p,y:g,size:k})=>Qe(Ld,{annotation:u,x:p-n,y:g-r,size:k,onReply:o,onHoverAnnotation:l},`question-${u.threadId}`))})}function Ld({annotation:e,x:t,y:n,size:r,onReply:o,onHoverAnnotation:i}){let[s,l]=Ko(!1),[a,c]=Ko(""),d=Rl(null),u=Rl(null);Cr(()=>{s&&d.current&&d.current.focus()},[s]),Cr(()=>{if(!s)return;let b=B=>{u.current&&!B.composedPath().includes(u.current)&&l(!1)},E=B=>{B.key==="Escape"&&l(!1)};return document.addEventListener("mousedown",b),document.addEventListener("keydown",E),()=>{document.removeEventListener("mousedown",b),document.removeEventListener("keydown",E)}},[s]);let p=Il(()=>{!a.trim()||!e.threadId||(o(e.threadId,a.trim()),c(""),l(!1))},[a,e.threadId,o]),g=Il(b=>{b.key==="Enter"&&(b.metaKey||b.ctrlKey)&&(b.preventDefault(),p())},[p]),k=s?t:t-jn,w=s?n:n-jn;return wn("div",{ref:u,"data-devtools":"question-badge",onMouseEnter:i?()=>i(e.id):void 0,onMouseLeave:i?()=>i(null):void 0,style:{position:"fixed",left:`max(0px, ${k}px)`,top:`max(0px, ${w}px)`,padding:s?0:jn,transform:`translate(min(0px, calc(100vw - max(0px, ${k}px) - 100%)), min(0px, calc(100vh - max(0px, ${w}px) - 100%)))`,zIndex:s?10002:9999,pointerEvents:"auto",cursor:s?void 0:"pointer"},children:[!s&&wn("div",{onClick:()=>l(!0),style:{height:r,display:"flex",alignItems:"center",backgroundColor:e.color,padding:`0 ${4}px`,gap:4,fontFamily:zt,fontSize:12,color:"#ffffff",whiteSpace:"nowrap"},children:[wn("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",children:[Qe("line",{x1:"12",y1:"3",x2:"12",y2:"9"}),Qe("line",{x1:"12",y1:"15",x2:"12",y2:"21"}),Qe("line",{x1:"3",y1:"12",x2:"9",y2:"12"}),Qe("line",{x1:"15",y1:"12",x2:"21",y2:"12"})]}),Qe("span",{style:{opacity:.7},children:"reply?"})]}),s&&wn("div",{style:{minWidth:260,maxWidth:360,backgroundColor:"#eaeaea",fontFamily:zt,fontSize:12,color:"#1f2937",border:"1px solid rgba(0, 0, 0, 0.1)"},children:[Qe("div",{style:{padding:`${6}px ${8}px`,lineHeight:1.4},children:e.question}),wn("div",{style:{padding:`0 ${4}px ${4}px`},children:[Qe("textarea",{ref:d,value:a,onChange:b=>c(b.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"}}),Qe("div",{style:{display:"flex",justifyContent:"flex-end",marginTop:4},children:Qe("button",{onClick:p,disabled:!a.trim(),style:{padding:"4px 12px",fontSize:11,fontFamily:zt,fontWeight:600,backgroundColor:a.trim()?e.color:"rgba(0,0,0,0.1)",color:a.trim()?"#ffffff":"rgba(0,0,0,0.3)",border:"none",cursor:a.trim()?"pointer":"default"},children:"Send \u2318\u23CE"})})]})]})]})}function kr(e){var i;let t=new Set,n=new Map;for(let s of e){if(!s.linkedSelector)continue;let l=n.get(s.linkedSelector)||[];l.push(s),n.set(s.linkedSelector,l)}let r=new Set,o=new Set;for(let s of n.values()){if(s.length<=1){(i=s[0])!=null&&i.groupId&&o.add(s[0].groupId);continue}s.sort((a,c)=>c.timestamp-a.timestamp);let l=s[0];l.groupId&&o.add(l.groupId);for(let a=1;a<s.length;a++){let c=s[a];t.add(c),c.groupId&&r.add(c.groupId)}}for(let s of e)s.groupId&&r.has(s.groupId)&&!o.has(s.groupId)&&t.add(s);return t}import{useEffect as Pl,useLayoutEffect as Ad,useState as Bl}from"react";import{jsx as wi,jsxs as Dl}from"react/jsx-runtime";function Pd(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 Ol=["top-left","top-right","bottom-right","bottom-left"];function Nl({element:e,radius:t,accentColor:n,hoveredCorner:r,draggingCorner:o,cursorViewport:i}){let[s,l]=Bl(null),[a,c]=Bl(!1);if(Pl(()=>{let E=T=>{(T.key==="Meta"||T.key==="Control")&&c(!0)},B=T=>{(T.key==="Meta"||T.key==="Control")&&c(!1)},L=()=>c(!1);return window.addEventListener("keydown",E,!0),window.addEventListener("keyup",B,!0),window.addEventListener("blur",L),()=>{window.removeEventListener("keydown",E,!0),window.removeEventListener("keyup",B,!0),window.removeEventListener("blur",L)}},[]),Pl(()=>{if(!e){l(null);return}let E=()=>{l(e.getBoundingClientRect())};return E(),window.addEventListener("scroll",E,{passive:!0}),window.addEventListener("resize",E,{passive:!0}),()=>{window.removeEventListener("scroll",E),window.removeEventListener("resize",E)}},[e]),Ad(()=>{e&&l(e.getBoundingClientRect())},[e,t["top-left"],t["top-right"],t["bottom-right"],t["bottom-left"]]),!s)return null;let d=s.width,u=s.height,p=Pd(n,.2),g={"top-left":{x:0,y:t["top-left"]},"top-right":{x:d,y:t["top-right"]},"bottom-right":{x:d,y:u-t["bottom-right"]},"bottom-left":{x:0,y:u-t["bottom-left"]}},k=new Set,w=o!=null?o:r;if(w)if(a)k.add(w);else for(let E of Ol)k.add(E);let b={position:"fixed",top:s.top,left:s.left,width:d,height:u,pointerEvents:"none",zIndex:9996,overflow:"visible"};return Dl("div",{"data-devtools":"border-radius-handles",style:b,children:[Dl("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${d} ${u}`,children:[wi("rect",{x:"0.5",y:"0.5",width:Math.max(0,d-1),height:Math.max(0,u-1),fill:"none",stroke:p,strokeWidth:"1"}),Ol.map(E=>{let B=g[E],L=k.has(E);return wi("circle",{cx:B.x,cy:B.y,r:E===(o!=null?o:r)?3:2.5,fill:n,stroke:"#ffffff",strokeWidth:E===(o!=null?o:r)?4:2,paintOrder:"stroke"},E)})]}),i&&w&&(()=>{let E=Math.round(t[w]);return wi("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:E})})()]})}import{useEffect as Bd,useState as Od}from"react";function lo(e,t){let n=e.match(/^oklch\(([^)]+)\)$/i);if(n)return`oklch(${n[1]} / ${t})`;let r=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(r){let o=parseInt(r[1],16),i=parseInt(r[2],16),s=parseInt(r[3],16);return`rgba(${o}, ${i}, ${s}, ${t})`}return`color-mix(in srgb, ${e} ${Math.round(t*100)}%, transparent)`}import{Fragment as Dd,jsx as ao,jsxs as qo}from"react/jsx-runtime";function Ln({element:e,isSelected:t=!1,elementInfo:n,color:r="#3b82f6",annotationNumber:o,changeCount:i,hideTooltip:s=!1}){let[l,a]=Od(null);if(Bd(()=>{if(!e){a(null);return}let O=()=>{let H=e.getBoundingClientRect();a(H)};return O(),window.addEventListener("scroll",O,{passive:!0}),window.addEventListener("resize",O,{passive:!0}),()=>{window.removeEventListener("scroll",O),window.removeEventListener("resize",O)}},[e]),!l||!e)return null;let c={position:"fixed",top:l.top,left:l.left,width:l.width,height:l.height,pointerEvents:"none",zIndex:9996,backgroundColor:t?lo(r,.1):lo(r,.05),overflow:"visible"},d={position:"absolute",width:2,height:2,backgroundColor:r,pointerEvents:"none"},u=e.tagName.toLowerCase(),p=e.id?`#${e.id}`:"",g=e.classList.length>0?"."+Array.from(e.classList).slice(0,2).join("."):"",k=n==null?void 0:n.reactComponent,w=k?`<${k}> ${u}${p}${g}`:`${u}${p}${g}`,b=22,E=l.height>=window.innerHeight,B=E?0:l.top>=b?l.top-b:l.bottom,L=E?{position:"absolute",top:8,left:8,zIndex:9997,display:"flex",alignItems:"center",gap:6,backgroundColor:r,color:"#fff",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',padding:"4px 8px",borderRadius:0,pointerEvents:"none",whiteSpace:"nowrap",maxWidth:400}:{position:"fixed",top:B,left:l.left,zIndex:9997,display:"flex",alignItems:"center",gap:6,backgroundColor:r,color:"#fff",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',padding:"4px 8px",borderRadius:0,pointerEvents:"none",whiteSpace:"nowrap",maxWidth:400},v=!s&&qo("div",{"data-devtools":"tooltip",style:L,children:[o!==void 0&&qo("span",{children:[o,"."]}),ao("span",{style:{overflow:"hidden",textOverflow:"ellipsis",flex:1,minWidth:0},children:w}),i!==void 0&&i>0&&qo("span",{style:{opacity:.8},children:["(",i," ",i===1?"change":"changes",")"]})]});return qo(Dd,{children:[qo("div",{"data-devtools":"highlight",style:c,children:[ao("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},children:ao("rect",f({x:"0.5",y:"0.5",width:Math.max(0,l.width-1),height:Math.max(0,l.height-1),fill:"none",stroke:r,strokeWidth:"1"},!t&&{strokeDasharray:"2 4"}))}),ao("div",{style:y(f({},d),{top:-1,left:-1})}),ao("div",{style:y(f({},d),{top:-1,right:-1})}),ao("div",{style:y(f({},d),{bottom:-1,left:-1})}),ao("div",{style:y(f({},d),{bottom:-1,right:-1})}),E&&v]}),!E&&v]})}import{useEffect as Hl,useLayoutEffect as Nd,useState as Ei}from"react";import{jsx as Dn,jsxs as ki}from"react/jsx-runtime";function Ci(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 Mi({element:e,gap:t,accentColor:n,hoveredAxis:r,draggingAxis:o,cursorViewport:i,isAutoGap:s=!1,refreshKey:l=0}){let[a,c]=Ei(null),[d,u]=Ei([]),[p,g]=Ei(!1);if(Hl(()=>{let U=S=>{(S.key==="Meta"||S.key==="Control")&&g(!0)},G=S=>{(S.key==="Meta"||S.key==="Control")&&g(!1)},X=()=>g(!1);return window.addEventListener("keydown",U,!0),window.addEventListener("keyup",G,!0),window.addEventListener("blur",X),()=>{window.removeEventListener("keydown",U,!0),window.removeEventListener("keyup",G,!0),window.removeEventListener("blur",X)}},[]),Hl(()=>{if(!e){c(null),u([]);return}let U=()=>{c(e.getBoundingClientRect()),u(ro(e))};return U(),window.addEventListener("scroll",U,{passive:!0}),window.addEventListener("resize",U,{passive:!0}),()=>{window.removeEventListener("scroll",U),window.removeEventListener("resize",U)}},[e]),Nd(()=>{e&&(c(e.getBoundingClientRect()),u(ro(e)))},[e,t.row,t.column,l]),!a||d.length===0)return null;let k=a.width,w=a.height,b="pm-gap-stripe-pattern",E=Ci(n,.25),B=Ci(n,.1),L=Ci(n,.2),T=8,v=2,O={position:"fixed",top:a.top,left:a.left,width:k,height:w,pointerEvents:"none",zIndex:9996,overflow:"visible"},H=o!=null?o:r;return ki("div",{"data-devtools":"gap-handles",style:O,children:[ki("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${k} ${w}`,children:[Dn("defs",{children:Dn("pattern",{id:b,patternUnits:"userSpaceOnUse",width:"4",height:"4",patternTransform:"rotate(45)",children:Dn("line",{x1:"0",y1:"0",x2:"0",y2:"4",stroke:E,strokeWidth:"1.5"})})}),Dn("rect",{x:"0.5",y:"0.5",width:Math.max(0,k-1),height:Math.max(0,w-1),fill:"none",stroke:L,strokeWidth:"1"}),d.map((U,G)=>{let X=U.x-a.left,S=U.y-a.top,I=U.w,K=U.h,ge=p?U.axis===H:!0;return(U.axis==="row"?t.row:t.column)===0?null:ki("g",{opacity:ge?1:.6,children:[Dn("rect",{x:X,y:S,width:I,height:K,fill:B}),Dn("rect",{x:X,y:S,width:I,height:K,fill:`url(#${b})`})]},G)}),H&&(()=>{let U=d.filter(Le=>Le.axis===H);if(U.length===0)return null;let G=U[0];if(i&&U.length>1){let Le=1/0;for(let Ae of U){let _e=Ae.x+Ae.w/2,Pe=Ae.y+Ae.h/2,Me=Math.abs(i.x-_e)+Math.abs(i.y-Pe);Me<Le&&(Le=Me,G=Ae)}}let X=G.x-a.left,S=G.y-a.top,I=G.w,K=G.h,ge=X+I/2,be=S+K/2;if(s)return Dn("circle",{cx:ge,cy:be,r:1.5,fill:n,stroke:"#ffffff",strokeWidth:4,paintOrder:"stroke"});let de=H==="column",ue=de?v:T,Fe=de?T:v,Te=ge-ue/2,ee=be-Fe/2;return Dn("rect",{x:Te,y:ee,width:ue,height:Fe,fill:n,stroke:"#ffffff",strokeWidth:4,paintOrder:"stroke"})})()]}),i&&H&&(()=>{let U=s?"auto":String(Math.round(H==="row"?t.row:t.column));return Dn("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:U})})()]})}import{useCallback as $d,useEffect as Wd,useState as Yd}from"react";import{useEffect as Hd,useState as Fl}from"react";var Fd=3,_d=250,Ti=["reviewing","considering","thinking","zhuzhing","iterating","tweaking","reflecting","noodling","pondering","finessing","polishing","riffing"],zd=3e3;function Mr(e){let[t,n]=Fl(0),[r,o]=Fl(()=>Math.floor(Math.random()*Ti.length));return Hd(()=>{if(!e)return;let i=setInterval(()=>n(l=>(l+1)%Fd),_d),s=setInterval(()=>o(l=>(l+1)%Ti.length),zd);return()=>{clearInterval(i),clearInterval(s)}},[e]),{charIndex:t,word:Ti[r]}}import{Fragment as Ii,jsx as pn,jsxs as Io}from"react/jsx-runtime";function jd(e){let{element:t}=e,n=t.tagName,r=t.id?`#${t.id}`:"",o=t.className?"."+t.className.split(" ").slice(0,2).join("."):"",i=t.reactComponent;return i?`<${i}> ${n}${r}${o}`:`${n}${r}${o}`}var _l=22,Ri=12;function Gd(s){var l=s,{left:e,top:t,avoidBottom:n,style:r,children:o}=l,i=Yn(l,["left","top","avoidBottom","style","children"]);let a=n!==void 0?`${n}px`:"100vh";return pn("div",y(f({"data-devtools":"badge-hit-area"},i),{style:f({position:"fixed",left:`max(0px, ${e}px)`,top:`max(0px, ${t}px)`,padding:Ri,transform:`translate(min(0px, calc(100vw - max(0px, ${e}px) - 100%)), min(0px, calc(${a} - max(0px, ${t}px) - 100%)))`},r),children:o}))}function zl({styleModifications:e,isInspecting:t,accentColor:n,annotationGroupCount:r,dispatch:o,inFlightSelectors:i,toolbarRef:s,onHoverSelector:l}){var B;let[a,c]=Yd([]),d=i&&i.size>0,{charIndex:u,word:p}=Mr(!!d);Wd(()=>{if(t){c([]);return}let L=null,T=()=>{let H=[];e.forEach((U,G)=>{let X=Qt(U.selector);if(!X)return;let S=X.getBoundingClientRect();H.push({selector:U.selector,modIndex:G,top:S.top>=_l?S.top-_l:S.bottom,left:S.left,label:jd(U),changeCount:U.changes.length,annotationNumber:r+G+1})}),c(H)},v=()=>{L&&cancelAnimationFrame(L),L=requestAnimationFrame(T)};T(),window.addEventListener("scroll",v,!0),window.addEventListener("resize",v,!0);let O=new MutationObserver(v);return O.observe(document.body,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["style","class"]}),window.addEventListener("load",v),document.fonts.ready.then(v),()=>{window.removeEventListener("scroll",v,!0),window.removeEventListener("resize",v,!0),window.removeEventListener("load",v),O.disconnect(),L&&cancelAnimationFrame(L)}},[e,t,r]);let g=$d(L=>{let T=e[L];if(!T)return;let v=Qt(T.selector);v&&(o({type:"SELECT_ANNOTATION",payload:{id:null}}),o({type:"SET_TOOL",payload:"inspector"}),o({type:"SELECT_ELEMENT",payload:{el:v,info:T.element}}))},[e,o]);if(a.length===0)return null;let k=(B=s==null?void 0:s.current)==null?void 0:B.getBoundingClientRect(),w=k?k.top-8:void 0,b={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},E={overflow:"hidden",textOverflow:"ellipsis",flex:1,minWidth:0};return pn(Ii,{children:a.map(L=>{let T=i==null?void 0:i.has(L.selector);return pn(Gd,{left:L.left-Ri,top:L.top-Ri,avoidBottom:w,onClick:()=>g(L.modIndex),onMouseEnter:l?()=>l(L.selector):void 0,onMouseLeave:l?()=>l(null):void 0,style:{zIndex:1e4,cursor:"pointer",pointerEvents:"auto"},children:Io("div",{"data-devtools":"badge",style:y(f({},b),{backgroundColor:T?"#999999":n}),children:[Io("span",{children:[L.annotationNumber,"."]}),pn("span",{style:E,children:L.label}),Io("span",{style:{opacity:.8},children:["(",L.changeCount," ",L.changeCount===1?"change":"changes",")"]}),T&&Io("span",{style:{opacity:.8,marginLeft:4,display:"inline-flex",alignItems:"center",gap:4},children:[pn("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:"currentColor",style:{verticalAlign:"middle"},children:u===1?Io(Ii,{children:[pn("circle",{cx:"7",cy:"7",r:"2"}),pn("circle",{cx:"17",cy:"7",r:"2"}),pn("circle",{cx:"7",cy:"17",r:"2"}),pn("circle",{cx:"17",cy:"17",r:"2"})]}):Io(Ii,{children:[pn("circle",{cx:"12",cy:"6",r:"2"}),pn("circle",{cx:"6",cy:"12",r:"2"}),pn("circle",{cx:"18",cy:"12",r:"2"}),pn("circle",{cx:"12",cy:"18",r:"2"})]})}),p]})]})},L.selector)})})}import{useEffect as Vd,useState as Ud}from"react";import{Fragment as Xd,jsx as $l}from"react/jsx-runtime";function Jd(e,t){let n=e.match(/^oklch\(([^)]+)\)$/i);return n?`oklch(${n[1]} / ${t})`:`color-mix(in srgb, ${e} ${Math.round(t*100)}%, transparent)`}function Wl({styleModifications:e,accentColor:t}){let[n,r]=Ud([]);if(Vd(()=>{let i=null,s=()=>{let c=[];for(let d of e){let u=Qt(d.selector);if(!u)continue;let p=u.getBoundingClientRect();if(p.width===0&&p.height===0)continue;let g=io(u);c.push({selector:d.selector,top:p.top,left:p.left,width:p.width,height:p.height,borderRadius:`${g["top-left"]}px ${g["top-right"]}px ${g["bottom-right"]}px ${g["bottom-left"]}px`})}r(c)},l=()=>{i&&cancelAnimationFrame(i),i=requestAnimationFrame(s)};s(),window.addEventListener("scroll",l,{passive:!0}),window.addEventListener("resize",l,{passive:!0});let a=new MutationObserver(l);return a.observe(document.body,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["style","class"]}),()=>{window.removeEventListener("scroll",l),window.removeEventListener("resize",l),a.disconnect(),i&&cancelAnimationFrame(i)}},[e]),n.length===0)return null;let o=Jd(t,.2);return $l(Xd,{children:n.map(i=>{let s={position:"fixed",top:i.top,left:i.left,width:i.width,height:i.height,pointerEvents:"none",zIndex:9995,border:`1px solid ${o}`,borderRadius:i.borderRadius,boxSizing:"border-box"};return $l("div",{"data-devtools":"mod-border",style:s},i.selector)})})}import{useEffect as Yl,useLayoutEffect as Kd,useState as jl}from"react";import{jsx as Gn,jsxs as Ai}from"react/jsx-runtime";function Li(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 qd={top:"bottom",bottom:"top",left:"right",right:"left"};function Pi({element:e,padding:t,accentColor:n,hoveredSide:r,draggingSide:o,cursorViewport:i,refreshKey:s}){let[l,a]=jl(null),[c,d]=jl(!1);if(Yl(()=>{let I=be=>{(be.key==="Meta"||be.key==="Control")&&d(!0)},K=be=>{(be.key==="Meta"||be.key==="Control")&&d(!1)},ge=()=>d(!1);return window.addEventListener("keydown",I,!0),window.addEventListener("keyup",K,!0),window.addEventListener("blur",ge),()=>{window.removeEventListener("keydown",I,!0),window.removeEventListener("keyup",K,!0),window.removeEventListener("blur",ge)}},[]),Yl(()=>{if(!e){a(null);return}let I=()=>{a(e.getBoundingClientRect())};return I(),window.addEventListener("scroll",I,{passive:!0}),window.addEventListener("resize",I,{passive:!0}),()=>{window.removeEventListener("scroll",I),window.removeEventListener("resize",I)}},[e]),Kd(()=>{e&&a(e.getBoundingClientRect())},[e,t.top,t.right,t.bottom,t.left,s]),!l)return null;let u=l.width,p=l.height,{top:g,right:k,bottom:w,left:b}=t,E="pm-stripe-pattern",B=Li(n,.25),L=Li(n,.1),T=Li(n,.2),v=8,O=2,H={position:"fixed",top:l.top,left:l.left,width:u,height:p,pointerEvents:"none",zIndex:9996,overflow:"visible"},U=["top","right","bottom","left"],G={top:`0,0 ${u},0 ${u-k},${g} ${b},${g}`,right:`${u},0 ${u},${p} ${u-k},${p-w} ${u-k},${g}`,bottom:`0,${p} ${b},${p-w} ${u-k},${p-w} ${u},${p}`,left:`0,0 ${b},${g} ${b},${p-w} 0,${p}`},X={top:{x:u/2-v/2,y:g/2-O/2,w:v,h:O},bottom:{x:u/2-v/2,y:p-w/2-O/2,w:v,h:O},left:{x:b/2-O/2,y:p/2-v/2,w:O,h:v},right:{x:u-k/2-O/2,y:p/2-v/2,w:O,h:v}},S=new Set;return o?S.add(o):r&&(S.add(r),c||S.add(qd[r])),Ai("div",{"data-devtools":"padding-handles",style:H,children:[Ai("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${u} ${p}`,children:[Gn("defs",{children:Gn("pattern",{id:E,patternUnits:"userSpaceOnUse",width:"4",height:"4",patternTransform:"rotate(45)",children:Gn("line",{x1:"0",y1:"0",x2:"0",y2:"4",stroke:B,strokeWidth:"1.5"})})}),Gn("rect",{x:"0.5",y:"0.5",width:Math.max(0,u-1),height:Math.max(0,p-1),fill:"none",stroke:T,strokeWidth:"1"}),U.map(I=>{if(t[I]<=0)return null;let ge=S.has(I);return Ai("g",{opacity:ge?1:.6,children:[Gn("polygon",{points:G[I],fill:L}),Gn("polygon",{points:G[I],fill:`url(#${E})`})]},I)}),U.map(I=>{let K=X[I],ge=S.has(I);return Gn("rect",{x:K.x,y:K.y,width:K.w,height:K.h,fill:n,stroke:"#ffffff",strokeWidth:ge?4:2,paintOrder:"stroke"},`handle-${I}`)})]}),i&&(r||o)&&(()=>{let I=o!=null?o:r,K=Math.round(t[I]);return Gn("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 An,useEffect as Sn,useMemo as Br,useRef as ln,useState as jt}from"react";import{Check as Pr,ChevronDown as zi,MoveHorizontal as na,RotateCcw as wu,Shrink as Eu,X as Cu}from"lucide-react";var Zd="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMicgaGVpZ2h0PScxMic+PGRlZnM+PHBhdHRlcm4gaWQ9J2QnIHdpZHRoPSc0JyBoZWlnaHQ9JzQnIHBhdHRlcm5Vbml0cz0ndXNlclNwYWNlT25Vc2UnPjxwYXRoIGQ9J00tMSwxIGwyLC0yIE0wLDQgbDQsLTQgTTMsNSBsMiwtMicgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPScuNScvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9JzEyJyBoZWlnaHQ9JzEyJyBmaWxsPSd1cmwoI2QpJy8+PC9zdmc+",En={borderWidth:3,borderStyle:"solid",borderImage:`url("${Zd}") 4 / 1.9 / 0 round`};var Tr={"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 Ro(e){var t,n;return(n=(t=Tr[e])==null?void 0:t[0])!=null?n:"px"}function Vn(e){let t=e.match(/^([\d.-]+)(.*)$/);return t?{num:parseFloat(t[1]),unit:t[2]||""}:{num:0,unit:""}}function Ir(e,t,n,r){let o=e.trim();if(!o)return"";let i=o.match(/^(-?[\d.]+)\s*(rem|em|px|%)$/i);if(i)return`${parseFloat(i[1])}${i[2].toLowerCase()}`;let s=parseFloat(o);if(!isNaN(s)){if(r){let{unit:l}=Vn(n);return`${s}${l||Ro(t)}`}return`${s}${Ro(t)}`}return o}function Bi(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 Qd,useEffect as eu,useRef as Gl,useState as tu}from"react";import{Plus as Vl,X as nu}from"lucide-react";import{jsx as sn,jsxs as co}from"react/jsx-runtime";var Rr=[{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 ou(e){if(!e||e==="none")return[];let t=[],n=/([\w-]+)\(([^)]+)\)/g,r;for(;(r=n.exec(e))!==null;){let o=r[1],i=r[2],s=parseFloat(i);isNaN(s)||t.push({name:o,value:s})}return t}function Oi(e){return e.length===0?"none":e.map(t=>{var o;let n=Rr.find(i=>i.name===t.name),r=(o=n==null?void 0:n.unit)!=null?o:"";return`${t.name}(${t.value}${r})`}).join(" ")}function Ul({value:e,onChange:t,accentColor:n,modified:r,panelContentRef:o}){let i=ou(e),[s,l]=tu(!1),a=Gl(null),c=Gl(null);eu(()=>{if(!s)return;let L=T=>{a.current&&!T.composedPath().includes(a.current)&&l(!1)};return document.addEventListener("mousedown",L,!0),()=>document.removeEventListener("mousedown",L,!0)},[s]);let d=Rr.filter(L=>!i.some(T=>T.name===L.name)),u=L=>{let T=[...i,{name:L.name,value:L.defaultValue}];t(Oi(T)),l(!1)},p=L=>{let T=i.filter((v,O)=>O!==L);t(Oi(T))},g=(L,T)=>{let v=i.map((O,H)=>H===L?y(f({},O),{value:T}):O);t(Oi(v))},k={width:"100%",padding:"4px 8px",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',border:"none",borderRadius:2,outline:"none",backgroundColor:"transparent"},w=Qd(L=>{var S;if(!c.current)return{position:"fixed",top:0,left:0};let T=c.current.getBoundingClientRect(),v=c.current.closest('[data-devtools="panel"]'),O=v?v.getBoundingClientRect():{top:0,left:0,bottom:9999},H=(S=o==null?void 0:o.current)==null?void 0:S.getBoundingClientRect(),U=L*24+8,X=O.bottom-T.bottom<U;return y(f({position:"fixed"},X?{bottom:O.bottom-T.top+2-O.top}:{top:T.bottom+2-O.top}),{left:H?H.left+4-O.left:T.left-O.left,width:H?H.width-8:140,zIndex:10001})},[o]),b={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)"},E={display:"block",width:"100%",padding:"4px 10px",border:"none",backgroundColor:"transparent",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#334155",cursor:"pointer",textAlign:"left"},B=L=>sn("div",{ref:a,style:f(f({},w(L.length)),b),children:L.map(T=>sn("button",{type:"button",onClick:()=>u(T),style:E,onMouseEnter:v=>{v.currentTarget.style.backgroundColor="rgba(0,0,0,0.05)"},onMouseLeave:v=>{v.currentTarget.style.backgroundColor="transparent"},children:T.label},T.name))});return i.length===0?co("div",{children:[co("div",{style:{display:"flex",alignItems:"center",gap:4},children:[sn(Nn,{modified:!1,children:sn("input",{type:"text",value:"",placeholder:"\u2014",readOnly:!0,style:y(f({},k),{color:"#999",cursor:"default"})})}),sn("button",{ref:c,type:"button",onClick:()=>l(!s),style:{display:"flex",alignItems:"center",justifyContent:"center",width:20,height:20,padding:0,border:"none",borderRadius:2,backgroundColor:"transparent",color:"#94a3b8",cursor:"pointer",flexShrink:0},children:sn(Vl,{size:12})})]}),s&&B(Rr)]}):co("div",{style:{display:"flex",flexDirection:"column",gap:4,position:"relative"},children:[i.map((L,T)=>{let v=Rr.find(O=>O.name===L.name);return v?co("div",{style:{display:"flex",alignItems:"center",gap:4},children:[sn("span",{style:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:r?n:"#94a3b8",fontWeight:r?600:400,width:56,flexShrink:0,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},children:v.label}),sn(Nn,{modified:r,children:co("div",{style:{display:"flex",alignItems:"center",gap:4,padding:"0 4px"},children:[sn("input",{type:"range",min:v.min,max:v.max,step:v.step,value:L.value,onChange:O=>g(T,parseFloat(O.target.value)),style:{flex:1,height:2,appearance:"none",WebkitAppearance:"none",background:`linear-gradient(to right, ${n} ${(L.value-v.min)/(v.max-v.min)*100}%, rgba(0,0,0,0.1) ${(L.value-v.min)/(v.max-v.min)*100}%)`,borderRadius:1,outline:"none",cursor:"pointer"}}),sn("input",{type:"number",min:v.min,max:v.max,step:v.step,value:v.unit==="px"||v.unit==="deg"?Math.round(L.value):Math.round(L.value*100)/100,onChange:O=>g(T,parseFloat(O.target.value)||0),style:y(f({},k),{width:44,padding:"2px 4px",textAlign:"right",flexShrink:0})}),v.unit&&sn("span",{style:{fontSize:9,color:"#94a3b8",fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',flexShrink:0,width:16},children:v.unit})]})}),sn("button",{type:"button",onClick:()=>p(T),style:{display:"flex",alignItems:"center",justifyContent:"center",width:16,height:16,padding:0,border:"none",borderRadius:2,backgroundColor:"transparent",color:"#94a3b8",cursor:"pointer",flexShrink:0},children:sn(nu,{size:10})})]},L.name):null}),d.length>0&&co("div",{children:[co("button",{ref:c,type:"button",onClick:()=>l(!s),style:{display:"flex",alignItems:"center",gap:4,padding:"2px 4px",border:"none",borderRadius:2,backgroundColor:"transparent",fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#94a3b8",cursor:"pointer"},children:[sn(Vl,{size:10}),"Add filter"]}),s&&B(d)]})]})}import{useCallback as Ao,useEffect as lu,useRef as Lr,useState as Jl}from"react";import{AlignHorizontalSpaceAround as au,AlignVerticalSpaceAround as cu,Columns3 as du,Grid2x2 as uu,RectangleHorizontal as pu,Rows3 as fu,UnfoldHorizontal as Xl,UnfoldVertical as Kl}from"lucide-react";import{useCallback as ru,useEffect as iu,useRef as Zo}from"react";import{jsx as su}from"react/jsx-runtime";var Di=[0,1,2,4,8,12,16,20,24,28,32];function Lo({value:e,onChange:t,onPreview:n,onScrubEnd:r,onReset:o,isModified:i,accentColor:s,defaultUnit:l="rem",snapSteps:a,color:c,style:d,children:u}){let p=Zo(null),g=Zo(null),k=Zo(o),w=Zo(i),b=Zo(!1);k.current=o,w.current=i,iu(()=>{let B=T=>{let v=g.current;if(!v)return;v.hasMoved=!0,b.current=T.shiftKey;let O=v.unit==="rem"||v.unit==="em"?.1:1;v.accum+=T.movementX*O;let H=Math.max(0,Math.round((v.startValue+v.accum)*10)/10);if(T.shiftKey&&a){let U=v.unit==="rem"||v.unit==="em"?parseFloat(getComputedStyle(document.documentElement).fontSize)||16:1,G=v.unit==="rem"||v.unit==="em"?H*U:H,X=a[a.length-1];for(let S=0;S<a.length-1;S++){let I=a[S],K=a[S+1];if(G<=(I+K)/2){X=I;break}if(G<K){X=K;break}}G>a[a.length-1]&&(X=Math.round(G/8)*8),H=v.unit==="rem"||v.unit==="em"?Math.round(X/U*1e3)/1e3:X}n==null||n(`${H}${v.unit}`)},L=()=>{let T=g.current;if(!T)return;let v=Math.max(0,Math.round((T.startValue+T.accum)*10)/10);if(b.current&&a){let H=T.unit==="rem"||T.unit==="em"?parseFloat(getComputedStyle(document.documentElement).fontSize)||16:1,U=T.unit==="rem"||T.unit==="em"?v*H:v,G=a[a.length-1];for(let X=0;X<a.length-1;X++){let S=a[X],I=a[X+1];if(U<=(S+I)/2){G=S;break}if(U<I){G=I;break}}U>a[a.length-1]&&(G=Math.round(U/8)*8),v=T.unit==="rem"||T.unit==="em"?Math.round(G/H*1e3)/1e3:G}let O=T.hasMoved&&v!==T.startValue;g.current=null,document.exitPointerLock(),O?t(`${v}${T.unit}`):T.hasMoved?n==null||n(`${T.startValue}${T.unit}`):w.current&&k.current&&k.current(),r==null||r()};return document.addEventListener("mousemove",B),document.addEventListener("mouseup",L),()=>{document.removeEventListener("mousemove",B),document.removeEventListener("mouseup",L)}},[t,n,r]);let E=ru(B=>{var v;if(B.button!==0)return;B.preventDefault();let L=Vn(e),T=L.unit&&L.unit!=="px"?L.unit:l;g.current={startValue:L.num,unit:T,accum:0,hasMoved:!1},(v=p.current)==null||v.requestPointerLock()},[e,l]);return su("span",{ref:p,onMouseDown:E,title:i?"Click to reset \xB7 Drag to scrub":"Drag to scrub",style:f({color:i?s||"#3b82f6":c||"#999",padding:"0 4px",display:"flex",alignItems:"center",cursor:"ew-resize"},d),children:u})}import{Fragment as Ni,jsx as ke,jsxs as $t}from"react/jsx-runtime";function gu({gridCols:e,gridRows:t,gridModified:n,accentColor:r,onColsChange:o,onRowsChange:i}){return ke(fn,{style:{width:100},children:$t("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",padding:"8px 4px"},children:[ke("input",{type:"number",min:1,max:12,value:e,onChange:s=>o(parseInt(s.target.value)||1),style:y(f({},Yt),{width:32,textAlign:"center",padding:2})}),ke("span",{style:{fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:n?r:"#999",fontWeight:n?600:400,fontSize:11,margin:"0 4px"},children:"\xD7"}),ke("input",{type:"number",min:1,max:12,value:t,onChange:s=>i(parseInt(s.target.value)||1),style:y(f({},Yt),{width:32,textAlign:"center",padding:2})})]})})}function ql({element:e,getValue:t,getOriginalValue:n,handleChange:r,isModified:o,onResetProperty:i,isCollapsed:s,onToggle:l,sectionHeaderStyle:a,activeDropdown:c,onDropdownChange:d,panelContentRef:u,accentColor:p,onFieldHover:g,preferredUnit:k,onUnitCycle:w}){let b=d,E=t("display"),B=t("flex-direction"),L=Zl(E,B),T=E==="flex"||E==="inline-flex",v=E==="grid",O=T||v,H=t("width"),U=t("height"),G=o("width")?H:br(e,"width"),X=o("height")?U:br(e,"height"),S=Hi(H,G),I=Hi(U,X),K=t("min-width"),ge=t("max-width"),be=t("min-height"),de=t("max-height"),ue=Po(t("padding")),Fe=t("gap"),Te=t("row-gap"),ee=t("column-gap"),Le=t("grid-template-columns"),Ae=t("grid-template-rows"),_e=t("overflow"),Pe=Le.split(/\s+/).filter(Z=>Z&&Z!=="none").length||1,Me=Ae.split(/\s+/).filter(Z=>Z&&Z!=="none").length||1,[q,me]=Jl(!1),Ee=c!==null,ye=Ee||q,Ie=Ee?.3:q?.65:1,We=({mode:Z,icon:Re,active:Xe})=>ke("button",{type:"button",onClick:()=>Ql(Z,r),style:{flex:1,display:"flex",alignItems:"center",justifyContent:"center",padding:"6px 8px",border:"none",borderRadius:2,backgroundColor:Xe?lo(p,.15):"transparent",color:Xe?p:"#64748b",cursor:"pointer",fontSize:14},children:Re}),lt=(Z,Re,Xe)=>{Xe==="fixed"?r(Z,Re):r(Z,Ar(Xe,Re))},dt=Z=>{let Re=Po(t("padding")),Xe=Z||"0";r("padding",`${Re.top} ${Xe} ${Re.bottom} ${Xe}`)},W=Z=>{let Re=Po(t("padding")),Xe=Z||"0";r("padding",`${Xe} ${Re.right} ${Xe} ${Re.left}`)},[te,j]=Jl({}),he=Ao((Z,Re)=>Xe=>{Re(Xe),j(cn=>y(f({},cn),{[Z]:Xe}))},[]),xe=Ao(Z=>{j(Re=>{let Xe=f({},Re);return delete Xe[Z],Xe})},[]),Be=Ao(Z=>{let Re=Po(t("padding"));$e(e,"padding",`${Re.top} ${Z} ${Re.bottom} ${Z}`)},[e,t]),Ce=Ao(Z=>{let Re=Po(t("padding"));$e(e,"padding",`${Z} ${Re.right} ${Z} ${Re.left}`)},[e,t]),it=Ao(Z=>Re=>{$e(e,Z,Re)},[e]),qe=B==="column"||B==="column-reverse",Ct=Z=>Z==="center"?1:Z==="flex-end"||Z==="end"?2:0,Nt=Ct(t("justify-content")),et=Ct(t("align-items")),Rt=qe?et:Nt,Ht=qe?Nt:et,bt=Lr(null),wt=Lr({x:0,y:0}),mt=Lr({col:Rt,row:Ht});mt.current={col:Rt,row:Ht};let vt=Ao((Z,Re)=>{let Xe=["flex-start","center","flex-end"];qe?(r("justify-content",Xe[Re]),r("align-items",Xe[Z])):(r("justify-content",Xe[Z]),r("align-items",Xe[Re]))},[qe,r]),en=Lr(vt);en.current=vt,lu(()=>{let Re=Xe=>{let cn=bt.current;if(!cn||!Xe.composedPath().includes(cn))return;Xe.preventDefault(),Xe.stopPropagation(),wt.current.x+=Xe.deltaX,wt.current.y+=Xe.deltaY;let{col:qt,row:pt}=mt.current,tt=!1;Math.abs(wt.current.x)>=30&&(qt=Math.max(0,Math.min(2,qt+(wt.current.x>0?1:-1))),wt.current.x=0,wt.current.y=0,tt=!0),!tt&&Math.abs(wt.current.y)>=30&&(pt=Math.max(0,Math.min(2,pt+(wt.current.y>0?1:-1))),wt.current.x=0,wt.current.y=0,tt=!0),tt&&(qt!==mt.current.col||pt!==mt.current.row)&&en.current(qt,pt)};return document.addEventListener("wheel",Re,{passive:!1,capture:!0}),()=>document.removeEventListener("wheel",Re,{capture:!0})},[]);let Ft=()=>ke("div",{ref:bt,onMouseEnter:()=>{me(!0),u.current&&(u.current.style.overflowY="hidden")},onMouseLeave:()=>{me(!1),u.current&&(u.current.style.overflowY="auto")},style:{width:56,height:56,backgroundColor:kn,borderRadius:2,display:"grid",gridTemplateColumns:"repeat(3, 1fr)",gridTemplateRows:"repeat(3, 1fr)",padding:6,gap:2,touchAction:"none"},children:[0,1,2].map(Z=>[0,1,2].map(Re=>ke("button",{type:"button",onClick:()=>vt(Re,Z),style:{width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center",border:"none",backgroundColor:"transparent",cursor:"pointer",padding:0},children:Re===Rt&&Z===Ht?ke("svg",{width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",style:{flexShrink:0},children:Re===0?$t(Ni,{children:[ke("rect",{x:"1",y:"1.5",width:"8",height:"1.2",rx:"0.5",fill:p}),ke("rect",{x:"1",y:"4.4",width:"5",height:"1.2",rx:"0.5",fill:p}),ke("rect",{x:"1",y:"7.3",width:"7",height:"1.2",rx:"0.5",fill:p})]}):Re===1?$t(Ni,{children:[ke("rect",{x:"1",y:"1.5",width:"8",height:"1.2",rx:"0.5",fill:p}),ke("rect",{x:"2.5",y:"4.4",width:"5",height:"1.2",rx:"0.5",fill:p}),ke("rect",{x:"1.5",y:"7.3",width:"7",height:"1.2",rx:"0.5",fill:p})]}):$t(Ni,{children:[ke("rect",{x:"1",y:"1.5",width:"8",height:"1.2",rx:"0.5",fill:p}),ke("rect",{x:"4",y:"4.4",width:"5",height:"1.2",rx:"0.5",fill:p}),ke("rect",{x:"2",y:"7.3",width:"7",height:"1.2",rx:"0.5",fill:p})]})}):ke("div",{style:{width:5,height:5,borderRadius:"50%",backgroundColor:"#aaa"}})},`${Z}-${Re}`)))}),an=o("grid-template-columns")||o("grid-template-rows");return $t("div",{style:{borderBottom:"1px solid rgba(0,0,0,0.08)"},children:[ke("div",{style:a,children:ke("span",{children:O?"Auto layout":"Layout"})}),$t("div",{style:{padding:"8px 12px"},children:[$t("div",{style:{display:"flex",gap:2,marginBottom:8,backgroundColor:kn,borderRadius:2,padding:2,opacity:Ie,transition:"opacity 150ms ease"},children:[ke(We,{mode:"block",icon:ke(pu,{size:16}),active:L==="block"}),ke(We,{mode:"flex-col",icon:ke(fu,{size:16}),active:L==="flex-col"}),ke(We,{mode:"flex-row",icon:ke(du,{size:16}),active:L==="flex-row"}),ke(We,{mode:"grid",icon:ke(uu,{size:16}),active:L==="grid"})]}),$t("div",{style:{display:"flex",gap:4,marginBottom:8},children:[ke(Fi,{label:"W",property:"width",cssValue:S==="fixed"?H:`${Math.round(e.getBoundingClientRect().width)}px`,mode:S,onValueChange:Z=>r("width",Z),onModeChange:Z=>{if(Z==="fixed"){let Re=e.getBoundingClientRect();r("width",`${Math.round(Re.width)}px`)}else r("width",Ar(Z,H))},modified:o("width"),dimmed:Ee&&c!=="width",dropdownOpen:c==="width",onDropdownChange:Z=>b(Z?"width":null),panelContentRef:u,accentColor:p,onReset:()=>i("width"),minValue:K!=="none"&&K!=="0px"&&K!=="auto"?K:"",maxValue:ge!=="none"&&ge!=="auto"?ge:"",onMinChange:Z=>r("min-width",Z||"0"),onMaxChange:Z=>r("max-width",Z||"none"),onMinReset:()=>i("min-width"),onMaxReset:()=>i("max-width"),minModified:o("min-width"),maxModified:o("max-width")}),ke(Fi,{label:"H",property:"height",cssValue:I==="fixed"?U:`${Math.round(e.getBoundingClientRect().height)}px`,mode:I,onValueChange:Z=>r("height",Z),onModeChange:Z=>{if(Z==="fixed"){let Re=e.getBoundingClientRect();r("height",`${Math.round(Re.height)}px`)}else r("height",Ar(Z,U))},modified:o("height"),dimmed:Ee&&c!=="height",dropdownOpen:c==="height",onDropdownChange:Z=>b(Z?"height":null),panelContentRef:u,minValue:be!=="none"&&be!=="0px"&&be!=="auto"?be:"",maxValue:de!=="none"&&de!=="auto"?de:"",onMinChange:Z=>r("min-height",Z||"0"),onMaxChange:Z=>r("max-height",Z||"none"),onMinReset:()=>i("min-height"),onMaxReset:()=>i("max-height"),minModified:o("min-height"),maxModified:o("max-height"),accentColor:p,onReset:()=>i("height")})]}),T&&$t("div",{onMouseEnter:()=>g==null?void 0:g("gap"),onMouseLeave:()=>g==null?void 0:g("element"),style:{display:"flex",gap:8,marginBottom:8},children:[ke("div",{style:{opacity:Ee?.3:1,transition:"opacity 150ms ease"},children:Ft()}),$t("div",{style:{flex:1,opacity:Ie,transition:"opacity 150ms ease"},children:[ke("div",{onClick:o("gap")?()=>i("gap"):void 0,title:o("gap")?"Click to reset":void 0,style:{fontSize:9,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:o("gap")?p:"#999",fontWeight:o("gap")?600:400,marginBottom:2,cursor:o("gap")?"pointer":"default"},children:"Gap"}),ke(fn,{dimmed:Ee,children:$t("div",{style:{display:"flex",alignItems:"center"},children:[ke(Lo,{value:Fe,onChange:Z=>{xe("gap"),r("gap",Z)},onPreview:he("gap",it("gap")),onScrubEnd:()=>xe("gap"),onReset:()=>i("gap"),isModified:o("gap"),accentColor:p,defaultUnit:k,children:B==="column"||B==="column-reverse"?ke(Kl,{size:12,strokeWidth:o("gap")?2.5:1.5}):ke(Xl,{size:12,strokeWidth:o("gap")?2.5:1.5})}),ke(Cn,{property:"gap",value:te.gap||Fe,onChange:Z=>r("gap",Z),isModified:o("gap")||"gap"in te,style:y(f({},Yt),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:k,onUnitCycle:w})]})})]})]}),v&&$t("div",{onMouseEnter:()=>g==null?void 0:g("gap"),onMouseLeave:()=>g==null?void 0:g("element"),style:{display:"flex",gap:8,marginBottom:8,opacity:Ie,transition:"opacity 150ms ease"},children:[ke(gu,{gridCols:Pe,gridRows:Me,gridModified:an,accentColor:p,onColsChange:Z=>r("grid-template-columns",`repeat(${Z}, 1fr)`),onRowsChange:Z=>r("grid-template-rows",`repeat(${Z}, 1fr)`)}),$t("div",{style:{flex:1,display:"flex",flexDirection:"column",gap:4},children:[ke(fn,{dimmed:Ee,children:$t("div",{style:{display:"flex",alignItems:"center"},children:[ke(Lo,{value:ee||Fe,onChange:Z=>{xe("column-gap"),r("column-gap",Z)},onPreview:he("column-gap",it("column-gap")),onScrubEnd:()=>xe("column-gap"),onReset:()=>i("column-gap"),isModified:o("column-gap"),accentColor:p,defaultUnit:k,children:ke(Xl,{size:12,strokeWidth:o("column-gap")?2.5:1.5})}),ke(Cn,{property:"column-gap",value:te["column-gap"]||ee||Fe,onChange:Z=>r("column-gap",Z),isModified:o("column-gap")||"column-gap"in te,placeholder:"col",style:y(f({},Yt),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:k,onUnitCycle:w})]})}),ke(fn,{dimmed:Ee,children:$t("div",{style:{display:"flex",alignItems:"center"},children:[ke(Lo,{value:Te||Fe,onChange:Z=>{xe("row-gap"),r("row-gap",Z)},onPreview:he("row-gap",it("row-gap")),onScrubEnd:()=>xe("row-gap"),onReset:()=>i("row-gap"),isModified:o("row-gap"),accentColor:p,defaultUnit:k,children:ke(Kl,{size:12,strokeWidth:o("row-gap")?2.5:1.5})}),ke(Cn,{property:"row-gap",value:te["row-gap"]||Te||Fe,onChange:Z=>r("row-gap",Z),isModified:o("row-gap")||"row-gap"in te,placeholder:"row",style:y(f({},Yt),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:k,onUnitCycle:w})]})})]})]}),O&&$t("div",{onMouseEnter:()=>g==null?void 0:g("padding"),onMouseLeave:()=>g==null?void 0:g("element"),style:{display:"flex",gap:4,marginBottom:8,opacity:Ie,transition:"opacity 150ms ease"},children:[ke(fn,{style:{flex:1},dimmed:Ee,children:$t("div",{style:{display:"flex",alignItems:"center"},children:[ke(Lo,{value:ue.left,onChange:Z=>{xe("padding-h"),dt(Z)},onPreview:he("padding-h",Be),onScrubEnd:()=>xe("padding-h"),onReset:()=>i("padding"),isModified:o("padding"),accentColor:p,defaultUnit:k,snapSteps:Di,children:ke(au,{size:12,strokeWidth:o("padding")?2.5:1.5})}),ke(Cn,{property:"padding",value:te["padding-h"]||ue.left,onChange:Z=>dt(Z),isModified:o("padding")||"padding-h"in te,placeholder:"H pad",style:y(f({},Yt),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:k,onUnitCycle:w})]})}),ke(fn,{style:{flex:1},dimmed:Ee,children:$t("div",{style:{display:"flex",alignItems:"center"},children:[ke(Lo,{value:ue.top,onChange:Z=>{xe("padding-v"),W(Z)},onPreview:he("padding-v",Ce),onScrubEnd:()=>xe("padding-v"),onReset:()=>i("padding"),isModified:o("padding"),accentColor:p,defaultUnit:k,snapSteps:Di,children:ke(cu,{size:12,strokeWidth:o("padding")?2.5:1.5})}),ke(Cn,{property:"padding",value:te["padding-v"]||ue.top,onChange:Z=>W(Z),isModified:o("padding")||"padding-v"in te,placeholder:"V pad",style:y(f({},Yt),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:k,onUnitCycle:w})]})})]}),$t("label",{style:{display:"flex",alignItems:"center",gap:8,cursor:"pointer",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#64748b",opacity:Ie,transition:"opacity 150ms ease"},children:[ke("input",{type:"checkbox",checked:_e==="hidden",onChange:Z=>r("overflow",Z.target.checked?"hidden":"visible"),style:{margin:0,accentColor:p}}),"Clip content"]})]})]})}import{AlignCenter as mu,AlignJustify as hu,AlignLeft as yu,AlignRight as bu,Baseline as xu,ChevronDown as Su,WholeWord as vu}from"lucide-react";import{jsx as gt,jsxs as Hn}from"react/jsx-runtime";var ea={100:"Thin",200:"Extra Light",300:"Light",400:"Regular",500:"Medium",600:"Semi Bold",700:"Bold",800:"Extra Bold",900:"Black"};function ta({element:e,getValue:t,handleChange:n,isModified:r,onResetProperty:o,isCollapsed:i,onToggle:s,sectionHeaderStyle:l,accentColor:a,colorVariables:c,activeColorDropdown:d,onColorDropdownChange:u,panelContentRef:p,preferredUnit:g,onUnitCycle:k}){var I;let w=t("font-family"),b=t("font-size"),E=t("font-weight"),B=t("line-height"),L=t("letter-spacing"),T=t("text-align"),v=t("color"),O=String(E),H=ea[O]||O,U=Jo(e,v),G=v.includes("var(")?null:Xo(U,c),X=({align:K,icon:ge})=>{let be=T===K;return gt("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:be?lo(a,.15):"transparent",color:be?a:"#64748b",cursor:"pointer"},children:ge})},S=((I=w.split(",")[0])==null?void 0:I.trim().replace(/^["']|["']$/g,""))||"System";return Hn("div",{style:{borderBottom:"1px solid rgba(0,0,0,0.08)"},children:[gt("div",{style:l,children:gt("span",{children:"Typography"})}),Hn("div",{style:{padding:"8px 12px",display:"flex",flexDirection:"column",gap:4},children:[gt(fn,{children:Hn("div",{style:{display:"flex",alignItems:"center",padding:"6px 8px"},children:[gt("input",{type:"text",value:w,onChange:K=>n("font-family",K.target.value),style:y(f({},Yt),{flex:1,minWidth:0,padding:0,fontWeight:r("font-family")?600:400,color:r("font-family")?a:"inherit"}),title:w}),gt(Su,{size:12,style:{color:"#999",flexShrink:0,marginLeft:4}})]})}),Hn("div",{style:{display:"flex",gap:4},children:[gt(fn,{style:{flex:1},children:gt("select",{value:O,onChange:K=>n("font-weight",K.target.value),style:y(f({},Yt),{padding:"6px 8px",paddingLeft:4,paddingRight:20,cursor:"pointer",fontWeight:r("font-weight")?600:400,color:r("font-weight")?a:"inherit"}),children:Object.entries(ea).map(([K,ge])=>gt("option",{value:K,children:ge},K))})}),gt(fn,{style:{flex:1},children:gt("div",{style:{display:"flex",alignItems:"center",position:"relative"},children:gt(Cn,{property:"font-size",value:b,onChange:K=>n("font-size",K),isModified:r("font-size"),min:1,max:999,style:y(f({},Yt),{padding:"6px 8px",paddingRight:24,fontWeight:r("font-size")?600:400,color:r("font-size")?a:"inherit"}),unitStyle:{position:"absolute",right:8,top:"50%",transform:"translateY(-50%)",fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999"},preferredUnit:g,onUnitCycle:k})})})]}),Hn("div",{style:{display:"flex",gap:4},children:[gt(fn,{style:{flex:1},children:Hn("div",{style:{display:"flex",alignItems:"center",padding:"6px 8px",gap:4},children:[gt(xu,{size:12,style:{color:r("line-height")?a:"#999",flexShrink:0}}),gt(Cn,{property:"line-height",value:B,onChange:K=>n("line-height",K),isModified:r("line-height"),step:.1,min:0,placeholder:"Auto",style:y(f({},Yt),{flex:1,minWidth:0,padding:0,fontWeight:r("line-height")?600:400,color:r("line-height")?a:"inherit"}),showUnit:!1})]})}),gt(fn,{style:{flex:1},children:Hn("div",{style:{display:"flex",alignItems:"center",padding:"6px 8px",gap:4},children:[gt(vu,{size:12,style:{color:r("letter-spacing")?a:"#999",flexShrink:0}}),gt(Cn,{property:"letter-spacing",value:L,onChange:K=>n("letter-spacing",K),isModified:r("letter-spacing"),step:.1,placeholder:"\u2014",style:y(f({},Yt),{flex:1,minWidth:0,padding:0,fontWeight:r("letter-spacing")?600:400,color:r("letter-spacing")?a:"inherit"}),showUnit:!1})]})})]}),Hn("div",{style:{display:"flex",gap:2,backgroundColor:kn,borderRadius:2,padding:2},children:[gt(X,{align:"left",icon:gt(yu,{size:14})}),gt(X,{align:"center",icon:gt(mu,{size:14})}),gt(X,{align:"right",icon:gt(bu,{size:14})}),gt(X,{align:"justify",icon:gt(hu,{size:14})})]}),Hn("div",{style:{display:"flex",alignItems:"center",gap:8,padding:"4px 0"},children:[gt("span",{onClick:r("color")?()=>o("color"):void 0,title:r("color")?"Click to reset":void 0,style:{fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:r("color")?a:"#64748b",fontWeight:r("color")?600:400,cursor:r("color")?"pointer":"default",width:40,flexShrink:0},children:"Color"}),gt("div",{style:{flex:1,minWidth:0},children:gt(_i,{value:v,resolvedValue:U,colorVariables:c,matchingVariable:G,onChange:K=>n("color",K),accentColor:a,modified:r("color"),panelContentRef:p,isDropdownOpen:d==="color",onDropdownChange:K=>u(K?"color":null)})})]})]})]})}import{Fragment as Mu,jsx as ce,jsxs as yt}from"react/jsx-runtime";var oa=[{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 ku(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 Hi(e,t){return!t||e==="auto"||e==="fit-content"||e==="max-content"||e==="min-content"?"hug":e==="100%"||t==="100%"?"fill":"fixed"}function Ar(e,t){switch(e){case"hug":return"fit-content";case"fill":return"100%";case"fixed":{let n=Vn(t);if(typeof n.num=="number"&&!isNaN(n.num)){let r=n.unit==="%"?"px":n.unit||"px";return`${n.num}${r}`}return"auto"}}}function Po(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 Ql(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 kn="rgba(0, 0, 0, 0.04)",Yt={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 Fi({label:e,property:t,cssValue:n,mode:r,onValueChange:o,onModeChange:i,modified:s,dimmed:l,dropdownOpen:a,onDropdownChange:c,panelContentRef:d,accentColor:u="#3b82f6",onReset:p,minValue:g,maxValue:k,onMinChange:w,onMaxChange:b,onMinReset:E,onMaxReset:B,minModified:L,maxModified:T}){let v=Vn(n),O=s?v.unit||Ro(t):Ro(t),H=!s&&v.unit&&v.unit!==O?Bi(v.num,O):v.num,[U,G]=jt(!1),[X,S]=jt(String(H)),[I,K]=jt(!1),ge=ln(null),be=ln(null),de=ln(null),ue=ln(!1);Sn(()=>{U||S(String(H))},[H,U]),Sn(()=>{if(!a)return;let Me=me=>{be.current&&!me.composedPath().includes(be.current)&&de.current&&!me.composedPath().includes(de.current)&&(c==null||c(!1))},q=me=>{me.key==="Escape"&&(c==null||c(!1))};return document.addEventListener("mousedown",Me),document.addEventListener("keydown",q),()=>{document.removeEventListener("mousedown",Me),document.removeEventListener("keydown",q)}},[a,c]),Sn(()=>{U&&ge.current&&(ge.current.focus(),ge.current.select())},[U]);let Fe=()=>{let Me=Ir(X,t,n,s);o(Me||`${Math.max(0,parseFloat(X)||0)}${O}`),G(!1)},Te=()=>{if(ue.current){ue.current=!1;return}Fe()},ee=Me=>{if(Me.key==="Enter"){Fe();return}if(Me.key==="Escape"){ue.current=!0,S(String(H)),G(!1);return}if(Me.key==="ArrowUp"||Me.key==="ArrowDown"){Me.preventDefault();let q=Me.key==="ArrowUp"?1:-1,me=Me.shiftKey?8:Me.altKey?.1:1,Ee=parseFloat(X)||0,ye=Math.round(Math.max(0,Ee+q*me)*1e3)/1e3;S(String(ye)),o(`${ye}${O}`)}},Le={fixed:"Fixed",hug:"Hug",fill:"Fill"},Ae={fixed:ce(na,{size:12}),hug:ce(Eu,{size:12}),fill:ce(na,{size:12})},_e=()=>{c==null||c(!a)},Pe=()=>{if(!de.current||!(d!=null&&d.current))return{position:"absolute",top:"100%",left:-4,right:-4,width:"calc(100% + 8px)",marginTop:4};let Me=de.current.getBoundingClientRect(),q=d.current.getBoundingClientRect(),me=d.current.closest('[data-devtools="panel"]'),Ee=me?me.getBoundingClientRect():{top:0,left:0};return{position:"fixed",top:Me.bottom+4-Ee.top,left:q.left+4-Ee.left,width:q.width-8}};return yt("div",{ref:de,onMouseEnter:()=>K(!0),onMouseLeave:()=>K(!1),style:{flex:1,display:"flex",alignItems:"center",position:"relative",borderRadius:2,border:"1px solid",borderColor:U?u:I?"rgba(0,0,0,0.15)":"transparent",backgroundColor:kn,transition:"border-color 100ms ease, opacity 150ms ease",opacity:l?.3:1},children:[ce("span",{onClick:s&&p?p:void 0,title:s?"Click to reset":void 0,style:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:s?u:"#999",fontWeight:s?600:400,padding:"0 8px",flexShrink:0,cursor:s?"pointer":"default"},children:e}),r==="fixed"?U?ce("input",{ref:ge,type:"text",inputMode:"numeric",value:X,onChange:Me=>S(Me.target.value),onKeyDown:ee,onBlur:Te,style:y(f({},Yt),{flex:1,minWidth:0,padding:"4px 2px"})}):ce("span",{onClick:()=>G(!0),style:{flex:1,padding:"4px 2px",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',cursor:"text"},children:H}):ce("span",{style:{flex:1}}),yt("button",{type:"button",onClick:_e,style:{display:"flex",alignItems:"center",gap:2,padding:"4px 8px",border:"none",outline:"none",backgroundColor:"transparent",color:"#999",fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',cursor:"pointer",flexShrink:0},children:[Le[r],ce(zi,{size:12})]}),a&&yt("div",{ref:be,style:y(f({},Pe()),{backgroundColor:"#eaeaea",border:"1px solid rgba(0,0,0,0.1)",borderRadius:0,zIndex:10001,overflow:"hidden",fontSize:12,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace'}),children:[yt("button",{type:"button",onClick:()=>{i("fixed"),c==null||c(!1)},style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"10px 12px",border:"none",outline:"none",backgroundColor:r==="fixed"?"#f1f5f9":"transparent",color:"#1e293b",fontWeight:r==="fixed"?600:400,cursor:"pointer",textAlign:"left"},children:[Ae.fixed,yt("span",{children:["Fixed ",t," (",n,")"]}),r==="fixed"&&ce(Pr,{size:14,style:{marginLeft:"auto"}})]}),yt("button",{type:"button",onClick:()=>{i("hug"),c==null||c(!1)},style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"10px 12px",border:"none",outline:"none",backgroundColor:r==="hug"?"#f1f5f9":"transparent",color:"#1e293b",fontWeight:r==="hug"?600:400,cursor:"pointer",textAlign:"left"},children:[Ae.hug,ce("span",{children:"Hug contents"}),r==="hug"&&ce(Pr,{size:14,style:{marginLeft:"auto"}})]}),yt("button",{type:"button",onClick:()=>{i("fill"),c==null||c(!1)},style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"10px 12px",border:"none",outline:"none",backgroundColor:r==="fill"?"#f1f5f9":"transparent",color:"#1e293b",fontWeight:r==="fill"?600:400,cursor:"pointer",textAlign:"left"},children:[Ae.fill,ce("span",{children:"Fill container"}),r==="fill"&&ce(Pr,{size:14,style:{marginLeft:"auto"}})]}),ce("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",margin:"4px 0"}}),yt("div",{style:{padding:"8px 12px",display:"flex",flexDirection:"column",gap:4},children:[yt("div",{style:{display:"flex",alignItems:"center",backgroundColor:kn,borderRadius:2,padding:"4px 8px"},children:[ce("span",{onClick:L?Me=>{Me.stopPropagation(),E==null||E()}:void 0,title:L?"Click to reset":void 0,style:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:L?u:"#999",fontWeight:L?600:400,marginRight:8,flexShrink:0,cursor:L?"pointer":"default"},children:"Min"}),ce("input",{type:"text",value:g||"",placeholder:"\u2014",onChange:Me=>w==null?void 0:w(Me.target.value),onClick:Me=>Me.stopPropagation(),style:y(f({},Yt),{flex:1,minWidth:0,padding:0,textAlign:"right",color:L?u:"inherit",fontWeight:L?600:400})})]}),yt("div",{style:{display:"flex",alignItems:"center",backgroundColor:kn,borderRadius:2,padding:"4px 8px"},children:[ce("span",{onClick:T?Me=>{Me.stopPropagation(),B==null||B()}:void 0,title:T?"Click to reset":void 0,style:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:T?u:"#999",fontWeight:T?600:400,marginRight:8,flexShrink:0,cursor:T?"pointer":"default"},children:"Max"}),ce("input",{type:"text",value:k||"",placeholder:"\u2014",onChange:Me=>b==null?void 0:b(Me.target.value),onClick:Me=>Me.stopPropagation(),style:y(f({},Yt),{flex:1,minWidth:0,padding:0,textAlign:"right",color:T?u:"inherit",fontWeight:T?600:400})})]})]})]})]})}function fn({children:e,style:t,dimmed:n}){let[r,o]=jt(!1);return ce("div",{onMouseEnter:()=>o(!0),onMouseLeave:()=>o(!1),style:f({position:"relative",borderRadius:2,border:"1px solid",borderColor:r?"rgba(0,0,0,0.15)":"transparent",backgroundColor:kn,transition:"border-color 100ms ease, opacity 150ms ease",opacity:n?.3:1},t),children:e})}function Nn({children:e}){let[t,n]=jt(!1);return ce("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:kn,transition:"border-color 100ms ease"},children:e})}function Cn({property:e,value:t,onChange:n,isModified:r=!1,step:o=1,min:i,max:s,style:l,placeholder:a,showUnit:c=!0,unitStyle:d,preferredUnit:u,onUnitCycle:p}){let g=Vn(t),k=Ro(e),w=Tr[e],E=u&&w&&w.includes(u)?u:k,B=r&&g.unit||E,L=!r&&g.unit&&g.unit!==B?Bi(g.num,B):g.num,[T,v]=jt(!1),[O,H]=jt(""),U=Te=>{v(!0),H(String(L||"")),requestAnimationFrame(()=>Te.target.select())},G=()=>{if(v(!1),O.trim()){let Te=Ir(O,e,t,r);Te&&n(Te)}},X=Te=>{let ee=Te.target.value;H(ee);let Le=ee.trim(),Ae=Le.match(/^(-?[\d.]+)\s*(rem|em|px|%)$/i),_e=Le.match(/^(-?[\d.]+)$/);if(Ae){let Pe=parseFloat(Ae[1]);isNaN(Pe)||n(`${Pe}${Ae[2].toLowerCase()}`)}else if(_e){let Pe=parseFloat(_e[1]);isNaN(Pe)||n(`${Pe}${B}`)}},S=Te=>{if(Te.key==="Enter"){if(O.trim()){let ee=Ir(O,e,t,r);ee&&n(ee)}Te.target.blur();return}if(Te.key==="ArrowUp"||Te.key==="ArrowDown"){Te.preventDefault();let ee=Te.shiftKey?10:Te.altKey?.1:1,Le=(Te.key==="ArrowUp"?1:-1)*o*ee,Ae=parseFloat(O)||L||0,_e=Math.round((Ae+Le)*1e3)/1e3;i!==void 0&&(_e=Math.max(i,_e)),s!==void 0&&(_e=Math.min(s,_e)),H(String(_e)),n(`${_e}${B}`)}},I=/^-?[\d.]/.test(t.trim()),K=T?O:I?String(L):"",be=T&&/\s*(rem|em|px|%)\s*$/i.test(O)?"":B,de=p&&(be==="rem"||be==="px"),ue={fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",pointerEvents:"none"},Fe=y(f({},d!=null?d:ue),{pointerEvents:"auto",cursor:"pointer"});return yt(Mu,{children:[ce("input",{type:"text",inputMode:"decimal",value:K,onFocus:U,onBlur:G,onChange:X,onKeyDown:S,placeholder:a,style:l}),c&&be&&ce("span",{style:de?Fe:d!=null?d:ue,onClick:de?p:void 0,title:de?"Click to switch units":void 0,children:be})]})}function _i({value:e,resolvedValue:t,colorVariables:n,matchingVariable:r,onChange:o,accentColor:i="#3b82f6",modified:s,panelContentRef:l,isDropdownOpen:a,onDropdownChange:c}){let[d,u]=jt(!1),p=!e.includes("var(")&&r?r.usage:e,[g,k]=jt(p),[w,b]=jt(!1),[E,B]=jt(!1),[L,T]=jt(!1),v=ln(null),O=ln(null),H=ln(null),U=a!==void 0?a:w,G=c||b,X=An(()=>{if(!H.current)return{position:"fixed",top:0,left:0,width:200};let ee=H.current.getBoundingClientRect(),Le=H.current.closest('[data-devtools="panel"]'),Ae=Le?Le.getBoundingClientRect():{top:0,left:0};if(l!=null&&l.current){let _e=l.current.getBoundingClientRect();return{position:"fixed",top:ee.bottom+4-Ae.top,left:_e.left+4-Ae.left,width:_e.width-8}}return{position:"fixed",top:ee.bottom+4-Ae.top,left:ee.left-Ae.left,width:ee.width}},[l]);Sn(()=>{if(!d){let ee=!e.includes("var(")&&r?r.usage:e;k(ee)}},[e,d,r]),Sn(()=>{if(!U&&!E)return;let ee=Ae=>{H.current&&!Ae.composedPath().includes(H.current)&&(G(!1),B(!1))},Le=Ae=>{Ae.key==="Escape"&&(G(!1),B(!1))};return document.addEventListener("mousedown",ee),document.addEventListener("keydown",Le),()=>{document.removeEventListener("mousedown",ee),document.removeEventListener("keydown",Le)}},[U,E]),Sn(()=>{d&&v.current&&(v.current.focus(),v.current.select())},[d]);let S=Br(()=>{if(!g||g.startsWith("#")||g.startsWith("rgb")||g.startsWith("hsl")||g.startsWith("oklch"))return[];let ee=g.toLowerCase();return n.filter(Le=>Le.name.toLowerCase().includes(ee)||Le.usage.toLowerCase().includes(ee)).slice(0,8)},[g,n]),I=()=>{o(g),u(!1),B(!1)},K=ee=>{k(ee),ee.includes("var")||ee.includes("--")||ee.length>0&&!ee.startsWith("#")?B(!0):B(!1)},ge=ee=>{k(ee.usage),o(ee.usage),G(!1),B(!1),u(!1)},be=()=>{setTimeout(()=>{!U&&!E&&I()},150)},de=ee=>{ee.key==="Enter"?I():ee.key==="Escape"&&(k(e),u(!1),B(!1))},ue=Br(()=>{let ee=t.trim().toLowerCase();if(ee.startsWith("#"))return ee.length===4?`#${ee[1]}${ee[1]}${ee[2]}${ee[2]}${ee[3]}${ee[3]}`:ee.slice(0,7);let Le=ee.match(/rgba?\((\d+),?\s*(\d+),?\s*(\d+)/);if(Le){let _e=parseInt(Le[1],10).toString(16).padStart(2,"0"),Pe=parseInt(Le[2],10).toString(16).padStart(2,"0"),Me=parseInt(Le[3],10).toString(16).padStart(2,"0");return`#${_e}${Pe}${Me}`}let Ae=ee.match(/oklch\(\s*([\d.]+)/);if(Ae){let _e=Math.max(0,Math.min(1,parseFloat(Ae[1]))),Pe=Math.round(_e*255).toString(16).padStart(2,"0");return`#${Pe}${Pe}${Pe}`}return"#000000"},[t]),Fe=ee=>{let Le=ee.target.value;k(Le),o(Le)},Te=e.includes("var(");return yt("div",{ref:H,onMouseEnter:()=>T(!0),onMouseLeave:()=>T(!1),style:{position:"relative",borderRadius:2,border:"1px solid",borderColor:d?i:L?"rgba(0,0,0,0.15)":"transparent",backgroundColor:kn,transition:"border-color 100ms ease",overflow:"hidden"},children:[yt("div",{style:{display:"flex",alignItems:"center",minWidth:0},children:[yt("div",{style:{position:"relative",marginLeft:8,flexShrink:0},children:[ce("input",{type:"color",value:ue,onChange:Fe,style:{width:12,height:12,padding:0,border:"none",cursor:"pointer",opacity:0,position:"absolute",top:0,left:0}}),ce("div",{style:{width:12,height:12,borderRadius:2,backgroundColor:t,border:"1px solid rgba(0,0,0,0.1)",pointerEvents:"none"}})]}),d?ce("input",{ref:v,type:"text",value:g,onChange:ee=>K(ee.target.value),onKeyDown:de,onBlur:be,style:y(f({},Yt),{flex:1,minWidth:0})}):ce("span",{onClick:()=>u(!0),style:{flex:1,minWidth:0,padding:"4px 8px",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',cursor:"text",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",color:s?i:"inherit"},title:p,children:p}),n.length>0&&ce("button",{type:"button",onClick:()=>G(!U),style:{display:"flex",alignItems:"center",justifyContent:"center",width:20,height:24,border:"none",background:"none",cursor:"pointer",color:"#999",flexShrink:0},children:ce(zi,{size:12})})]}),E&&S.length>0&&ce("div",{style:y(f({},X()),{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:S.map(ee=>yt("button",{type:"button",onClick:()=>ge(ee),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:[ce("div",{style:{width:14,height:14,borderRadius:2,backgroundColor:ee.value,border:"1px solid rgba(0,0,0,0.1)",flexShrink:0}}),ce("span",{style:{flex:1,overflow:"hidden",textOverflow:"ellipsis"},children:ee.name})]},ee.name))}),U&&ce("div",{ref:O,style:y(f({},X()),{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(ee=>yt("button",{type:"button",onClick:()=>ge(ee),style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"10px 12px",border:"none",backgroundColor:p===ee.usage||e===ee.usage?"#f1f5f9":"transparent",color:"#1e293b",fontWeight:p===ee.usage||e===ee.usage?600:400,cursor:"pointer",textAlign:"left",fontSize:12},children:[ce("div",{style:{width:14,height:14,borderRadius:2,backgroundColor:ee.value,border:"1px solid rgba(0,0,0,0.1)",flexShrink:0}}),ce("span",{style:{flex:1,overflow:"hidden",textOverflow:"ellipsis"},children:ee.name}),(p===ee.usage||e===ee.usage)&&ce(Pr,{size:14,style:{marginLeft:"auto",flexShrink:0}})]},ee.name))})]})}function ra({element:e,elementInfo:t,selector:n,styleModifications:r,dispatch:o,onClose:i,onHover:s,accentColor:l="#3b82f6",toolbarRef:a}){var lt,dt;let c=ln(null),d=ln(null),[u,p]=jt(()=>{try{return!!localStorage.getItem("devtools-panel-position")}catch(W){return!1}});Sn(()=>{if(u)return;let W=setTimeout(()=>p(!0),50);return()=>clearTimeout(W)},[u]);let[g,k]=jt(null),[w,b]=jt(null),E=g!==null||w!==null,[B,L]=jt("rem"),T=An(()=>{L(W=>W==="rem"?"px":"rem")},[]),v=ln(new Map),[O,H]=jt(""),U=Br(()=>Si(),[]);Sn(()=>{let W=te=>{var he;if(te.key!=="Escape")return;let j=document.activeElement;j&&((he=c.current)!=null&&he.contains(j))||i()};return window.addEventListener("keydown",W),()=>window.removeEventListener("keydown",W)},[i]);let G=ln({top:0,left:0,maxHeight:400}),[,X]=jt(0),S="devtools-panel-position",I=ln({x:0,y:0}),K=ln(null),ge=ln(!1);Sn(()=>{try{let W=localStorage.getItem(S);if(W){let te=JSON.parse(W);typeof te.top=="number"&&typeof te.left=="number"&&(ge.current=!0,G.current=y(f({},G.current),{top:te.top,left:te.left}))}}catch(W){}},[]),Sn(()=>{let W=j=>{var mt;let he=K.current;if(!he)return;let xe=he.startOffsetX+(j.clientX-he.startX),Be=he.startOffsetY+(j.clientY-he.startY),Ce=280,it=16,qe=Math.max(it,Math.min(window.innerWidth-Ce-it,G.current.left+xe)),Ct=Math.max(it,G.current.top+Be);I.current={x:qe-G.current.left,y:Ct-G.current.top};let Nt=c.current,et=Nt==null?void 0:Nt.parentElement;if(!et)return;et.style.top=`${Ct}px`,et.style.left=`${qe}px`;let Rt=(mt=a==null?void 0:a.current)==null?void 0:mt.getBoundingClientRect(),Ht=window.innerHeight-16;Rt&&qe+Ce>Rt.left&&(Ht=Rt.top-8);let bt=Math.max(0,Ct),wt=Math.max(200,Ht-bt);Nt&&(Nt.style.maxHeight=`${wt}px`)},te=()=>{if(!K.current)return;let j=G.current.top+I.current.y,he=G.current.left+I.current.x;G.current=y(f({},G.current),{top:j,left:he}),I.current={x:0,y:0},ge.current=!0;try{localStorage.setItem(S,JSON.stringify({top:j,left:he}))}catch(xe){}K.current=null};return window.addEventListener("mousemove",W),window.addEventListener("mouseup",te),()=>{window.removeEventListener("mousemove",W),window.removeEventListener("mouseup",te)}},[]);let be=An(W=>{W.button!==0||W.target.closest("button")||(W.preventDefault(),K.current={startX:W.clientX,startY:W.clientY,startOffsetX:I.current.x,startOffsetY:I.current.y})},[]);Sn(()=>{I.current={x:0,y:0};let W=(he=!1)=>{var Ht;let xe=c.current,Be=280,Ce=8,it,qe;if(ge.current)it=G.current.top,qe=G.current.left;else{let bt=e.getBoundingClientRect();qe=bt.right+Ce,it=bt.top,qe+Be>window.innerWidth-Ce&&(qe=bt.left-Be-Ce),qe<Ce&&(qe=Math.max(Ce,(window.innerWidth-Be)/2))}let Ct=(Ht=a==null?void 0:a.current)==null?void 0:Ht.getBoundingClientRect(),Nt=window.innerHeight-16;Ct&&qe+Be>Ct.left&&(Nt=Ct.top-Ce);let et=Math.max(0,it),Rt=Math.max(200,Nt-et);if(G.current={top:it,left:qe,maxHeight:Rt},he&&xe){let bt=xe.parentElement;bt&&!ge.current&&(bt.style.top=`${it+I.current.y}px`,bt.style.left=`${qe+I.current.x}px`),xe.style.maxHeight=`${Rt}px`}else X(bt=>bt+1)};W(!1);let te=()=>W(!0),j=()=>W(!1);return window.addEventListener("scroll",te,{passive:!0}),window.addEventListener("resize",j,{passive:!0}),()=>{window.removeEventListener("scroll",te),window.removeEventListener("resize",j)}},[e]),Sn(()=>{let W=c.current;if(!W)return;let te=j=>{let he=d.current;if(!he){j.preventDefault();return}let{scrollTop:xe,scrollHeight:Be,clientHeight:Ce}=he,it=xe<=0&&j.deltaY<0,qe=xe+Ce>=Be&&j.deltaY>0;(it||qe)&&j.preventDefault()};return W.addEventListener("wheel",te,{passive:!1}),()=>W.removeEventListener("wheel",te)},[]);let de=Br(()=>r.find(W=>W.selector===n),[r,n]),ue=An(W=>{let te=de==null?void 0:de.changes.find(j=>j.property===W);if(te)return te.modified;if(W.includes("color")){let j=mi(e,W);if(j&&j.includes("var("))return j}return Go(e,W)},[e,de]),Fe=An(W=>{if(v.current.has(W))return v.current.get(W);let te=de==null?void 0:de.changes.find(he=>he.property===W);if(te)return te.original;let j=Go(e,W);return v.current.set(W,j),j},[e,de]),Te=An((W,te)=>{let j=Fe(W);$e(e,W,te),W==="backdrop-filter"&&$e(e,"-webkit-backdrop-filter",te),o({type:"MODIFY_STYLE",payload:{selector:n,element:t,property:W,original:j,modified:te}})},[e,n,t,o,Fe]),ee=An(()=>{xi(n,r);let W=r.find(te=>te.selector===n);if(W)for(let te of W.changes)o({type:"CLEAR_STYLE",payload:{selector:n,property:te.property}});v.current.clear()},[n,r,o]),Le=An(W=>{let te=r.find(he=>he.selector===n);te!=null&&te.changes.find(he=>he.property===W)&&e instanceof HTMLElement&&(e.style.removeProperty(W),o({type:"CLEAR_STYLE",payload:{selector:n,property:W}}),v.current.delete(W))},[e,n,r,o]),Ae=An(()=>{let W=O.split(";").map(te=>te.trim()).filter(te=>te);for(let te of W){let j=te.indexOf(":");if(j>0){let he=te.slice(0,j).trim(),xe=te.slice(j+1).trim();he&&xe&&Te(he,xe)}}H("")},[O,Te]),_e=An(W=>{var te;return(te=de==null?void 0:de.changes.some(j=>j.property===W))!=null?te:!1},[de]),Pe=W=>{var Be;let te=ue(W.property),j=_e(W.property),he=!j&&ku(W.property,te),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(he&&W.type!=="backdrop-filter")return ce(Nn,{modified:!1,children:ce("input",{type:"text",value:"",placeholder:"\u2014",onFocus:()=>{},onChange:Ce=>Te(W.property,Ce.target.value),style:y(f({},xe),{color:"#999"})})});switch(W.type){case"color":{let Ce=Jo(e,te),it=te.includes("var(")?null:Xo(Ce,U);return ce(_i,{value:te,resolvedValue:Ce,colorVariables:U,matchingVariable:it,onChange:qe=>Te(W.property,qe),accentColor:l,modified:j,panelContentRef:d,isDropdownOpen:w===W.property,onDropdownChange:qe=>b(qe?W.property:null)})}case"number":{if(!!Tr[W.property])return ce(Nn,{modified:j,children:ce(Cn,{property:W.property,value:te,onChange:qe=>Te(W.property,qe),isModified:j,min:W.min,max:W.max,step:W.step||1,style:y(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:B,onUnitCycle:T})});let{num:it}=Vn(te);return ce(Nn,{modified:j,children:ce("input",{type:"number",value:it,min:W.min,max:W.max,step:W.step||1,onChange:qe=>Te(W.property,qe.target.value),style:xe})})}case"select":return ce(Nn,{modified:j,children:yt("div",{style:{position:"relative",display:"flex",alignItems:"center"},children:[ce("select",{value:te,onChange:Ce=>Te(W.property,Ce.target.value),style:y(f({},xe),{cursor:"pointer",paddingLeft:4,paddingRight:24,appearance:"none",WebkitAppearance:"none"}),children:(Be=W.options)==null?void 0:Be.map(Ce=>ce("option",{value:Ce,children:Ce},Ce))}),ce("div",{style:{position:"absolute",right:4,top:"50%",transform:"translateY(-50%)",pointerEvents:"none",color:"#999",display:"flex",alignItems:"center"},children:ce(zi,{size:12})})]})});case"spacing":return ce(Nn,{modified:j,children:ce("input",{type:"text",value:te,onChange:Ce=>Te(W.property,Ce.target.value),placeholder:"e.g., 10px or 10px 20px",style:xe})});case"backdrop-filter":return ce(Ul,{value:te,onChange:Ce=>Te(W.property,Ce),accentColor:l,modified:j,panelContentRef:d});default:return ce(Nn,{modified:j,children:ce("input",{type:"text",value:te,onChange:Ce=>Te(W.property,Ce.target.value),style:xe})})}},Me=(lt=de==null?void 0:de.changes.length)!=null?lt:0,q=(dt=de==null?void 0:de.captured)!=null?dt:!1,me=y(f({position:"fixed",top:G.current.top,left:G.current.left,width:280,maxHeight:G.current.maxHeight,backgroundColor:"rgba(255, 255, 255, 0.85)",backdropFilter:"blur(32px)",WebkitBackdropFilter:"blur(32px)"},En),{zIndex:1e4,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',fontSize:12,overflow:"hidden",display:"flex",flexDirection:"column",opacity:u?1:0,transition:"opacity 150ms ease"}),Ee={display:"flex",alignItems:"center",justifyContent:"space-between",margin:"3px 3px 0",padding:"8px 7px 8px 12px",borderBottom:"1px solid rgba(0,0,0,0.1)",backgroundColor:"#f8fafc",cursor:K.current?"grabbing":"grab"},ye={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"},Ie={display:"flex",alignItems:"center",padding:"4px 12px",gap:8},We={width:80,fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#64748b",flexShrink:0};return ce("div",{"data-devtools":"panel-wrapper",style:{position:"fixed",top:G.current.top+I.current.y,left:G.current.left+I.current.x,zIndex:1e4,pointerEvents:"none"},children:yt("div",{ref:c,"data-devtools":"panel",style:y(f({},me),{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:[yt("div",{style:Ee,onMouseDown:be,children:[yt("div",{style:{display:"flex",alignItems:"center",gap:8,overflow:"hidden"},children:[ce("span",{style:{fontWeight:600,fontSize:11,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:t.tagName}),Me>0&&ce("span",{style:{backgroundColor:q?"#999999":l,color:"#fff",fontSize:9,padding:"1px 4px",borderRadius:2},children:Me})]}),yt("div",{style:{display:"flex",gap:4},children:[Me>0&&ce("button",{type:"button",onClick:ee,title:"Reset all changes",style:{display:"flex",alignItems:"center",justifyContent:"center",width:24,height:24,border:"none",background:"none",cursor:"pointer",color:"#64748b",borderRadius:2},children:ce(wu,{size:14})}),ce("button",{type:"button",onClick:i,title:"Close",style:{display:"flex",alignItems:"center",justifyContent:"center",width:24,height:24,border:"none",background:"none",cursor:"pointer",color:"#64748b",borderRadius:2},children:ce(Cu,{size:14})})]})]}),yt("div",{ref:d,style:{flex:1,overflowY:"auto",margin:"0 3px 3px"},children:[ce("div",{style:{opacity:w?.3:1,transition:"opacity 150ms ease"},children:ce(ql,{element:e,getValue:ue,getOriginalValue:Fe,handleChange:Te,isModified:_e,onResetProperty:Le,isCollapsed:!1,onToggle:()=>{},sectionHeaderStyle:ye,activeDropdown:g,onDropdownChange:k,panelContentRef:d,accentColor:l,onFieldHover:s,preferredUnit:B,onUnitCycle:T})}),ce("div",{style:{opacity:g?.3:1,transition:"opacity 150ms ease"},children:ce(ta,{element:e,getValue:ue,handleChange:Te,isModified:_e,onResetProperty:Le,isCollapsed:!1,onToggle:()=>{},sectionHeaderStyle:ye,accentColor:l,colorVariables:U,activeColorDropdown:w,onColorDropdownChange:b,panelContentRef:d,preferredUnit:B,onUnitCycle:T})}),oa.map((W,te)=>{let j=te===oa.length-1,he=w&&W.properties.some(Be=>Be.property===w);return yt("div",{style:{borderBottom:j?"none":"1px solid rgba(0,0,0,0.08)",opacity:E&&!he?.3:1,transition:"opacity 150ms ease"},children:[ce("div",{style:ye,children:ce("span",{children:W.name})}),ce("div",{style:{padding:"4px 0"},children:W.properties.map(Be=>{let Ce=_e(Be.property),it=he&&Be.property!==w;return yt("div",{style:y(f({},Ie),{opacity:it?.3:1,transition:"opacity 150ms ease"}),children:[ce("span",{onClick:Ce?()=>Le(Be.property):void 0,title:Ce?"Click to reset":void 0,style:y(f({},We),{color:Ce?l:"#64748b",fontWeight:Ce?600:400,cursor:Ce?"pointer":"default"}),children:Be.label}),ce("div",{style:{flex:1,minWidth:0,overflow:"hidden"},children:Pe(Be)})]},Be.property)})})]},W.name)}),yt("div",{style:{opacity:E?.3:1,transition:"opacity 150ms ease"},children:[ce("div",{style:ye,children:ce("span",{children:"Raw CSS"})}),yt("div",{style:{padding:"8px 12px"},children:[ce("textarea",{value:O,onChange:W=>H(W.target.value),placeholder:"property: value; ...",style:{width:"100%",height:60,padding:8,fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',border:"1px solid rgba(0,0,0,0.1)",borderRadius:2,resize:"vertical",outline:"none"}}),O.trim()&&ce("button",{type:"button",onClick:Ae,style:{marginTop:4,padding:"4px 8px",width:"100%",fontSize:11,border:"none",borderRadius:2,backgroundColor:l,color:"#fff",cursor:"pointer",opacity:O.trim()?1:.5},children:"Apply"})]})]})]})]})})}import{useEffect as Tu,useLayoutEffect as Iu,useState as Ru}from"react";import{Fragment as Bu,jsx as uo,jsxs as Pu}from"react/jsx-runtime";var $i=["flex-start","center","flex-end"],Wi=["flex-start","center","flex-end"];function Lu(e){return e==="normal"||e==="flex-start"||e==="start"?"flex-start":e==="flex-end"||e==="end"?"flex-end":e==="center"?"center":null}function Au(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 ia(e){let t=Array.from(e.children);if(t.length===0)return null;let n=1/0,r=1/0,o=-1/0,i=-1/0;for(let s of t){let l=s.getBoundingClientRect();l.width===0&&l.height===0||(l.top<n&&(n=l.top),l.left<r&&(r=l.left),l.bottom>o&&(o=l.bottom),l.right>i&&(i=l.right))}return n===1/0?null:new DOMRect(r,n,i-r,o-n)}function sa({element:e,modifier:t,accentColor:n,refreshKey:r=0}){let[o,i]=Ru(null);if(Tu(()=>{if(!e){i(null);return}let w=()=>i(ia(e));return w(),window.addEventListener("scroll",w,{passive:!0}),window.addEventListener("resize",w,{passive:!0}),()=>{window.removeEventListener("scroll",w),window.removeEventListener("resize",w)}},[e]),Iu(()=>{e&&i(ia(e))},[e,r]),!o)return null;let s=o,l=window.getComputedStyle(e),a=l.display;if(a!=="flex"&&a!=="inline-flex")return null;let c=l.flexDirection,d=c==="column"||c==="column-reverse"?"vertical":"horizontal",u=d==="horizontal"?"vertical":"horizontal",p=[];if(t==="shift"){let w=Lu(l.justifyContent);if(w){let b=$i.indexOf(w);d==="horizontal"?(b>0&&p.push("left"),b<$i.length-1&&p.push("right")):(b>0&&p.push("up"),b<$i.length-1&&p.push("down"))}}else{let w=Au(l.alignItems);if(w){let b=Wi.indexOf(w);u==="horizontal"?(b>0&&p.push("left"),b<Wi.length-1&&p.push("right")):(b>0&&p.push("up"),b<Wi.length-1&&p.push("down"))}}if(p.length===0)return null;let g=14,k=7;return uo(Bu,{children:p.map(w=>{let b,E;switch(w){case"right":b=s.right+g,E=s.top+s.height/2;break;case"left":b=s.left-g,E=s.top+s.height/2;break;case"down":b=s.left+s.width/2,E=s.bottom+g;break;case"up":b=s.left+s.width/2,E=s.top-g;break}let B=w==="right"?0:w==="left"?180:w==="down"?90:-90,L={position:"fixed",left:b-k,top:E-k,width:k*2,height:k*2,pointerEvents:"none",zIndex:9997};return uo("div",{"data-devtools":"swipe-hint",style:L,children:uo("svg",{width:k*2,height:k*2,viewBox:"-7 -7 14 14",style:{overflow:"visible"},children:Pu("g",{transform:`rotate(${B})`,children:[uo("line",{x1:"-5",y1:"0",x2:"3",y2:"0",stroke:"#fff",strokeWidth:"4",strokeLinecap:"round"}),uo("polyline",{points:"0,-4 5,0 0,4",fill:"none",stroke:"#fff",strokeWidth:"4",strokeLinecap:"round",strokeLinejoin:"round"}),uo("line",{x1:"-5",y1:"0",x2:"3",y2:"0",stroke:n,strokeWidth:"1.5",strokeLinecap:"round"}),uo("polyline",{points:"0,-4 5,0 0,4",fill:"none",stroke:n,strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]})})},w)})})}import{useEffect as Ou,useLayoutEffect as Du,useState as Nu}from"react";import{jsx as Yi,jsxs as ji}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 la({element:e,fontSize:t,lineHeight:n,accentColor:r,hoveredProperty:o,draggingProperty:i,cursorViewport:s}){let[l,a]=Nu(null);if(Ou(()=>{if(!e){a(null);return}let E=()=>{a(Mo(e))};return E(),window.addEventListener("scroll",E,{passive:!0}),window.addEventListener("resize",E,{passive:!0}),()=>{window.removeEventListener("scroll",E),window.removeEventListener("resize",E)}},[e]),Du(()=>{e&&a(Mo(e))},[e,t,n]),!l)return null;let c=l.width,d=l.height,u=Hu(r,.2),p=i!=null?i:o,g=8,k=2,w={position:"fixed",top:l.top,left:l.left,width:c,height:d,pointerEvents:"none",zIndex:9996,overflow:"visible"},b=E=>E==="font-size"?`${Math.round(t)}`:(t>0?n/t:1.2).toFixed(2).replace(/\.?0+$/,"");return ji("div",{"data-devtools":"text-handles",style:w,children:[ji("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${c} ${d}`,children:[Yi("rect",{x:"0.5",y:"0.5",width:Math.max(0,c-1),height:Math.max(0,d-1),fill:"none",stroke:u,strokeWidth:"1"}),(p==="font-size"||!p)&&Yi("rect",{x:c-k/2,y:d/2-g/2,width:k,height:g,fill:r,stroke:"#ffffff",strokeWidth:p==="font-size"?4:2,paintOrder:"stroke"}),(p==="line-height"||!p)&&Yi("rect",{x:c/2-g/2,y:d-k/2,width:g,height:k,fill:r,stroke:"#ffffff",strokeWidth:p==="line-height"?4:2,paintOrder:"stroke"})]}),s&&p&&(()=>{let E=p==="font-size"?"Aa":"Lh",B=b(p);return ji("div",{style:{position:"fixed",left:s.x+8,top:s.y-28,background:r,color:"#fff",fontSize:11,fontWeight:600,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',lineHeight:1,padding:"4px 4px",borderRadius:0,whiteSpace:"nowrap",pointerEvents:"none",zIndex:9997},children:[E," ",B]})})()]})}import{Fragment as Oo,jsx as rt,jsxs as Bo}from"react/jsx-runtime";var aa=8,Vi=[0,1,2,4,8,12,16,20,24,28,32],Ui="devtools-active-text";function ca(e,t,n=0,r,o){let i=e.left+window.scrollX+4,s=t==="top-left"?e.top+window.scrollY-bn-n*bn+4:e.bottom+window.scrollY+4-1+n*bn,l=window.scrollY+4,a=window.scrollY+window.innerHeight-bn-4,c=90,d=!1;if(r&&o!==void 0){let u=r.getBoundingClientRect();if(e.left+4+o+4+c>u.left){let g=window.scrollY+u.top-bn-4;g<a&&(a=g,d=!0)}}return s<l?s=e.top+window.scrollY+4:s>a&&(s=d?a:Math.max(e.top+window.scrollY+4,a)),{x:i,y:s}}function da({state:e,dispatch:t,onScreenshot:n,inFlightAnnotationIds:r,inFlightStyleSelectors:o,inFlightSelectorColors:i,onAttachImages:s,onReply:l,onViewThread:a,onCloseThread:c,onModelComponentsAdd:d,onModelComponentFocus:u,onModelComponentHover:p,modelComponentNames:g,modelPanelHoveredComponent:k,modelSpacingTokenHover:w,highlightedAnnotationIds:b,focusedThreadAnnotationId:E,externalCanvasRef:B,toolbarRef:L}){var Ms,Ts,Is,Rs,Ls,As,Ps,Bs,Os;let{canvasRef:T,redrawAll:v,resizeCanvas:O}=pl(),H=Pt(m=>{T.current=m,B&&(B.current=m)},[B,T]),U=Tt(!1);Jt(()=>{let m=T.current;if(!m)return;let h=()=>{U.current&&(U.current=!1,m.style.pointerEvents="")},V=M=>{M.button===0&&U.current&&h()};return window.addEventListener("mousedown",V),()=>window.removeEventListener("mousedown",V)},[T]);let[G,X]=ct(!1),[S,I]=ct(()=>{if(typeof window=="undefined")return null;try{let m=localStorage.getItem(Ui);return m?JSON.parse(m):null}catch(m){return null}}),[K,ge]=ct(null),[be,de]=ct(null),[ue,Fe]=ct(null),Te=Tt(null),ee=Tt(null),Le=Tt({x:0,y:0}),Ae=Tt([]),_e=Tt(0),[Pe,Me]=ct(null),[q,me]=ct(new Map),Ee=Tt(0),ye=Tt(null),[Ie,We]=ct(null),[lt,dt]=ct(null),[W,te]=ct(null),[j,he]=ct(null),xe=Tt({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}),[Be,Ce]=ct(null),[it,qe]=ct(null),[Ct,Nt]=ct(null),[et,Rt]=ct(null),Ht=Tt({x:0,y:0}),[bt,wt]=ct({x:0,y:0}),mt=Tt({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}),[vt,en]=ct(null),[Ft,an]=ct(null),[ut,Z]=ct(null),[Re,Xe]=ct(!1),[cn,qt]=ct(0),[pt,tt]=ct(null),Ut=Tt({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}),[kt,Jn]=ct(null),[dn,Pn]=ct(null),[F,ne]=ct(null),oe=Tt({isDragging:!1,property:null,startX:0,startY:0,originalFontSize:0,originalLineHeight:0,originalRatio:1.2,element:null,elementInfo:null,selector:null,durableSelector:null}),[Se,Oe]=ct(null),[pe,xt]=ct(null),[Je,Tn]=ct(null),P=fl(),Q=Tt(i);Q.current=i;let se=Pt(m=>{let h=Q.current;if(!h||h.size===0)return!1;for(let V of h.keys())try{if(m.matches(V))return!0}catch(M){}return!1},[]),fe=Tt(e);fe.current=e;let He=Tt(S);He.current=S;let Ze=Tt([]),at=Tt(n);at.current=n;let[Ne,je]=ct(null),nt=e.selectedAnnotationIds;Ze.current=nt;let Lt=Pt((m,h=!1)=>{t({type:"SELECT_ANNOTATION",payload:{id:m,addToSelection:h}})},[t]),on=Pt(()=>{t({type:"SELECT_ANNOTATION",payload:{id:null}})},[t]),[hn,$n]=ct(null),[Zt,Yr]=ct({x:window.scrollX,y:window.scrollY});Jt(()=>(O(),window.addEventListener("resize",O),()=>window.removeEventListener("resize",O)),[O]),Jt(()=>{let m=()=>{Yr({x:window.scrollX,y:window.scrollY})};return window.addEventListener("scroll",m,{passive:!0}),()=>window.removeEventListener("scroll",m)},[]),Jt(()=>{S?localStorage.setItem(Ui,JSON.stringify(S)):localStorage.removeItem(Ui)},[S]),gl(S,I,K,e.annotations,t);let yn=Tt(Pe);yn.current=Pe,Jt(()=>{if(e.activeTool!=="model"||!e.isAnnotating)return;let m=h=>{if(!h.altKey||!yn.current)return;h.preventDefault();let V=h.deltaY>0?-1:1;Ee.current=Math.max(0,Ee.current+V);let M=ye.current;if(M){let A=hr(M,Ee.current);Me(A)}};return window.addEventListener("wheel",m,{passive:!1}),()=>window.removeEventListener("wheel",m)},[e.activeTool,e.isAnnotating]),Jt(()=>{e.activeTool!=="model"&&(Me(null),me(new Map),Ee.current=0,ye.current=null)},[e.activeTool]),Jt(()=>{var V;let m=(V=Pe==null?void 0:Pe.name)!=null?V:null,h=m&&(g!=null&&g.has(m))?m:null;p==null||p(h)},[Pe,g,p]);let[rr,ys]=ct(null);Jt(()=>{var V;if(!k){ys(null);return}let m=Eo(k.name),h=k.instanceIndex;ys((V=m[h%m.length])!=null?V:null)},[k]);let[bs,jr]=ct([]);Jt(()=>{var m,h;if(!w){jr([]);return}(h=(m=w.token)==null?void 0:m.bindings)!=null&&h.length?jr(fi(w.token)):jr(ui(w.px))},[w]);let Ua=Tt(null),Ja=Tt(null);Ua.current=vt,Ja.current=Ft,Jt(()=>{let m=["flex-start","center","flex-end"],h=["flex-start","center","flex-end"],M=null,A=!1,z=null,ie=null,N=(ae,we)=>{let Ve=oo(ae,we);for(;Ve&&Ve!==document.documentElement;){let ft=window.getComputedStyle(Ve).display;if(ft==="flex"||ft==="inline-flex")return Ve;Ve=Ve.parentElement}return null},J=ae=>{let we=window.getComputedStyle(ae).flexDirection;return we==="column"||we==="column-reverse"?"vertical":"horizontal"},x=ae=>{let we=ae.getAttribute("data-pm");return we||(we=Math.random().toString(36).substring(2,8),ae.setAttribute("data-pm",we)),{selector:`[data-pm="${we}"]`,durableSelector:un(ae)}},C=()=>{A=!0,M&&clearTimeout(M),M=setTimeout(()=>{A=!1,M=null},300)},Y=(ae,we,Ke)=>{let Ve=J(ae);if(we===Ve){let ze=window.getComputedStyle(ae).justifyContent,ht=ze==="normal"||ze==="flex-start"||ze==="start"?"flex-start":ze==="flex-end"||ze==="end"?"flex-end":ze==="center"?"center":null;if(!ht)return;let _t=m.indexOf(ht)+Ke;if(_t<0||_t>=m.length)return;let On=m[_t],{selector:Kn,durableSelector:Vr}=x(ae);$e(ae,"justify-content",On),t({type:"MODIFY_STYLES_BATCH",payload:{selector:Kn,durableSelector:Vr,element:nn(ae),changes:[{property:"justify-content",original:ze,modified:On}]}})}else{let ze=window.getComputedStyle(ae).flexDirection,ht=Ve==="horizontal"?"column":"row",{selector:vn,durableSelector:_t}=x(ae);$e(ae,"flex-direction",ht),t({type:"MODIFY_STYLES_BATCH",payload:{selector:vn,durableSelector:_t,element:nn(ae),changes:[{property:"flex-direction",original:ze,modified:ht}]}})}qt(ft=>ft+1)},R=(ae,we,Ke)=>{let ft=J(ae)==="horizontal"?"vertical":"horizontal";if(we!==ft)return;let ht=window.getComputedStyle(ae).alignItems,vn=ht==="normal"||ht==="stretch"||ht==="flex-start"||ht==="start"?"flex-start":ht==="flex-end"||ht==="end"?"flex-end":ht==="center"?"center":null;if(!vn)return;let On=h.indexOf(vn)+Ke;if(On<0||On>=h.length)return;let Kn=h[On],{selector:Vr,durableSelector:rc}=x(ae);$e(ae,"align-items",Kn),t({type:"MODIFY_STYLES_BATCH",payload:{selector:Vr,durableSelector:rc,element:nn(ae),changes:[{property:"align-items",original:ht,modified:Kn}]}}),qt(ic=>ic+1)},D=20,_=null,$=null,le=0,ve=(ae,we,Ke)=>{let Ve=N(we,Ke);tt(Ve?{modifier:ae,target:Ve}:null)},ot=ae=>{if(!(e.activeTool!=="hand"||!e.isAnnotating)){if(ae.key==="Shift"&&!ae.altKey){let we=Ht.current;ve("shift",we.x,we.y)}else if(ae.key==="Alt"&&!ae.shiftKey){let we=Ht.current;ve("alt",we.x,we.y)}}},st=ae=>{if(e.activeTool!=="hand"||!e.isAnnotating)return;let we=ae.shiftKey&&!ae.altKey,Ke=ae.altKey&&!ae.shiftKey;if(!we&&!Ke||ae.buttons!==0){_=null,$=null,le=0,z=null,ie=null,tt(null);return}if(z===null&&(z=ae.clientX,ie=ae.clientY,ve(we?"shift":"alt",ae.clientX,ae.clientY)),A)return;_===null&&(_=ae.clientX,$=ae.clientY,le=0);let Ve=ae.clientX-_,ft=ae.clientY-$,ze=Math.abs(Ve)>=Math.abs(ft)?Ve:ft;if(Math.abs(ze)>3){let Kn=ze>0?1:-1;if(le!==0&&Kn!==le){_=ae.clientX,$=ae.clientY,le=0;return}le=Kn}if(Math.abs(Ve)<D&&Math.abs(ft)<D)return;let ht=N(z,ie);if(!ht)return;let vn=Math.abs(Ve)>=Math.abs(ft)?"horizontal":"vertical",On=(vn==="horizontal"?Ve:ft)>0?1:-1;_=null,$=null,le=0,we?Y(ht,vn,On):R(ht,vn,On),C()},Mt=ae=>{(ae.key==="Shift"||ae.key==="Alt")&&(z=null,ie=null,_=null,$=null,le=0,tt(null))},Ge=()=>{tt(null),_=null,$=null,le=0};return window.addEventListener("keydown",ot),window.addEventListener("mousemove",st),window.addEventListener("mousedown",Ge),window.addEventListener("keyup",Mt),()=>{window.removeEventListener("keydown",ot),window.removeEventListener("mousemove",st),window.removeEventListener("mousedown",Ge),window.removeEventListener("keyup",Mt),M&&clearTimeout(M)}},[e.activeTool,e.isAnnotating,t]),Jt(()=>{let m=h=>{var z,ie,N,J;if(h.key==="Escape"){if(He.current)return;if(e.activeTool==="model"&&q.size>0){h.preventDefault(),me(new Map);return}if(Ze.current.length>0){h.preventDefault(),on();return}}if(h.key==="Enter"&&e.activeTool==="model"&&q.size>0&&d){h.preventDefault();let x=[...q.keys()].filter(C=>!(g!=null&&g.has(C)));x.length>0&&d(x),me(new Map);return}if((h.metaKey||h.ctrlKey)&&h.key==="v"&&Ae.current.length>0&&!He.current){h.preventDefault(),_e.current++;let x=_e.current*20,Y=((z=Ae.current[0])==null?void 0:z.groupId)?Math.random().toString(36).substring(2,9):void 0,R=Ae.current.map(_=>y(f({},_),{id:Math.random().toString(36).substring(2,9),groupId:_.groupId?Y:void 0,timestamp:Date.now(),points:_.points.map($=>({x:$.x+x,y:$.y+x}))}));t({type:"PASTE_ANNOTATIONS",payload:{annotations:R}});let D=R.find(_=>_.type!=="text")||R[0];D&&Lt(D.id);return}let V=Ze.current;if(V.length===0||He.current)return;let M=(N=(ie=h.composedPath)==null?void 0:ie.call(h)[0])!=null?N:h.target,A=M==null?void 0:M.tagName;if(!(A==="INPUT"||A==="TEXTAREA"||M!=null&&M.isContentEditable)&&(h.key==="Delete"||h.key==="Backspace")){if(h.preventDefault(),c){let x=fe.current.annotations;for(let C of V){let Y=x.find(D=>D.id===C);if(!Y)continue;let R=Y.threadId||Y.groupId&&((J=x.find(D=>D.groupId===Y.groupId&&D.threadId))==null?void 0:J.threadId);R&&c(R)}}for(let x of V)t({type:"DELETE_ANNOTATION",payload:{id:x}});on()}};return window.addEventListener("keydown",m),()=>window.removeEventListener("keydown",m)},[t,on,Lt,e.activeTool,q,g,d,c]);let Wn=Gi(()=>kr(e.annotations),[e.annotations]),ir=Gi(()=>{let m=new Map,h=new Set,V=1;for(let M of e.annotations)if(!Wn.has(M))if(M.groupId){if(!h.has(M.groupId)){h.add(M.groupId);let A=e.annotations.filter(z=>z.groupId===M.groupId);for(let z of A)m.set(z.id,V);V++}}else m.set(M.id,V),V++;return m},[e.annotations,Wn]),xs=Gi(()=>{if(nt.length===0)return null;let m=new Map;for(let h of nt){let V=e.annotations.find(A=>A.id===h);if(!V)continue;let M=V.groupId?e.annotations.filter(A=>A.groupId===V.groupId):[V];for(let A of M)if(A.linkedSelector&&!(i!=null&&i.has(A.linkedSelector))){let z=A.color||e.activeColor;m.set(A.linkedSelector,z)}}return m.size>0?m:null},[nt,e.annotations,e.activeColor,i]);Jt(()=>{let m=e.annotations.filter(h=>!(Wn.has(h)||S&&!S.isNew&&h.id===S.id));v(m,e.currentPath,e.activeTool,e.activeColor,e.strokeWidth,nt,aa,Zt.x,Zt.y,ir,b)},[e.annotations,e.currentPath,e.activeTool,e.activeColor,e.strokeWidth,v,S,nt,Zt,ir,Wn,b]),Jt(()=>{if(be){let m=Math.random().toString(36).substring(2,9);I({id:m,point:be.point,text:"",fontSize:12,isNew:!0,groupId:be.groupId}),de(null)}},[be]),Jt(()=>{ue&&(I({id:Math.random().toString(36).substring(2,9),point:ue.point,text:"",fontSize:12,isNew:!0,linkedSelector:ue.linkedSelector,linkedAnchor:ue.linkedAnchor,elements:ue.elements}),Fe(null))},[ue]);let sr=Tt(null),lr=(Ms=S==null?void 0:S.id)!=null?Ms:null;Jt(()=>{lr&&Te.current?requestAnimationFrame(()=>{var V;let m=Te.current;if(!m||(m.focus(),ee.current===lr))return;ee.current=lr;let h=He.current;if(h){if(sr.current!==null){let M=Math.min(sr.current,m.value.length);m.setSelectionRange(M,M);return}if(!h.isNew&&h.clickPoint){let M=T.current;if(!M)return;let A=M.getContext("2d");if(!A)return;A.font=`${h.fontSize}px ${zt}`;let z=h.fontSize*1.4,ie=h.text.split(`
|
|
7
|
-
`),
|
|
8
|
-
`),C=z.x-Zt.x,Y=vo(C),R=Y!==void 0?Math.min(400,Y):void 0,D=R?no(J,x,R):x,_=R?Math.min(R,Math.max(...D.map(ot=>J.measureText(ot).width))):Math.max(...x.map(ot=>J.measureText(ot).width)),$=D.length*(ie*1.4),le=x.length*(ie*1.4),ve=$-le;if(m.x>=z.x-4-4&&m.x<=z.x+_+4+4&&m.y>=z.y-4-4-ve&&m.y<=z.y+le+4+4)return M}}break}case"rectangle":{if(M.points.length<2)continue;let z=M.points[0],ie=M.points[M.points.length-1],N=Math.min(z.x,ie.x),J=Math.max(z.x,ie.x),x=Math.min(z.y,ie.y),C=Math.max(z.y,ie.y),Y=Xn(m,{x:N,y:x},{x:J,y:x},A),R=Xn(m,{x:N,y:C},{x:J,y:C},A),D=Xn(m,{x:N,y:x},{x:N,y:C},A),_=Xn(m,{x:J,y:x},{x:J,y:C},A);if(Y||R||D||_)return M;break}case"circle":{if(M.points.length<2)continue;let z=M.points[0],ie=M.points[M.points.length-1],N=(z.x+ie.x)/2,J=(z.y+ie.y)/2,x=Math.abs(ie.x-z.x)/2,C=Math.abs(ie.y-z.y)/2,Y=m.x-N,R=m.y-J,D=Math.sqrt((Y/x)**2+(R/C)**2);if(Math.abs(D-1)*Math.max(x,C)<=A)return M;break}case"line":{if(M.points.length<2)continue;let z=M.points[0],ie=M.points[M.points.length-1];if(Xn(m,z,ie,A))return M;break}case"freehand":{if(M.points.length<2)continue;for(let z=0;z<M.points.length-1;z++){let ie=M.points[z],N=M.points[z+1];if(Xn(m,ie,N,A))return M}break}}}return null},[e.annotations,T,Xn,Wn,Zt.x]),Ss=Pt(m=>{let h=ar(m);return(h==null?void 0:h.type)==="text"?h:null},[ar]),vs=Pt(m=>{if(nt.length===0)return null;let h=aa/2+4;for(let V of nt){let M=e.annotations.find(A=>A.id===V);if(!(!M||M.points.length<2)){if(M.type==="line"){let A=M.points[0],z=M.points[M.points.length-1];if(Math.sqrt((m.x-A.x)**2+(m.y-A.y)**2)<=h)return{handle:"start",annotationId:V};if(Math.sqrt((m.x-z.x)**2+(m.y-z.y)**2)<=h)return{handle:"end",annotationId:V};continue}if(M.type==="circle"){let A=M.points[0],z=M.points[M.points.length-1],ie=Math.min(A.x,z.x),N=Math.max(A.x,z.x),J=Math.min(A.y,z.y),x=Math.max(A.y,z.y),C=(ie+N)/2,Y=(J+x)/2,R=[{handle:"top",x:C,y:J},{handle:"bottom",x:C,y:x},{handle:"left",x:ie,y:Y},{handle:"right",x:N,y:Y}];for(let{handle:D,x:_,y:$}of R)if(Math.sqrt((m.x-_)**2+(m.y-$)**2)<=h)return{handle:D,annotationId:V};continue}if(M.type==="rectangle"||M.type==="freehand"){let A=M.points[0],z=M.points[M.points.length-1],ie,N,J,x;M.type==="freehand"?(ie=Math.min(...M.points.map(Y=>Y.x)),N=Math.max(...M.points.map(Y=>Y.x)),J=Math.min(...M.points.map(Y=>Y.y)),x=Math.max(...M.points.map(Y=>Y.y))):(ie=Math.min(A.x,z.x),N=Math.max(A.x,z.x),J=Math.min(A.y,z.y),x=Math.max(A.y,z.y));let C=[{corner:"topLeft",x:ie,y:J},{corner:"topRight",x:N,y:J},{corner:"bottomLeft",x:ie,y:x},{corner:"bottomRight",x:N,y:x}];for(let{corner:Y,x:R,y:D}of C)if(Math.sqrt((m.x-R)**2+(m.y-D)**2)<=h)return{handle:Y,annotationId:V}}}}return null},[nt,e.annotations]);Jt(()=>{let m=h=>{if(Le.current={x:h.clientX+window.scrollX,y:h.clientY+window.scrollY},!S){let V=Ss(Le.current);ge((V==null?void 0:V.id)||null)}};return window.addEventListener("mousemove",m),()=>window.removeEventListener("mousemove",m)},[S,Ss]);let yo=Pt(()=>{var h;if(!S)return;let m=((h=S.images)==null?void 0:h.length)||0;if(S.text.trim()||m>0)if(S.isNew){let V=fr();t({type:"ADD_TEXT",payload:f({point:S.point,text:S.text||(m>0?`[${m} image${m>1?"s":""}]`:""),fontSize:S.fontSize,id:V,groupId:S.groupId,linkedSelector:S.linkedSelector,linkedAnchor:S.linkedAnchor,elements:S.elements},m>0?{imageCount:m}:{})}),m>0&&S.images&&s&&s(V,S.images)}else t({type:"UPDATE_TEXT",payload:f({id:S.id,text:S.text||(m>0?`[${m} image${m>1?"s":""}]`:"")},m>0?{imageCount:m}:{})}),m>0&&S.images&&s&&s(S.id,S.images);else S.isNew||t({type:"DELETE_ANNOTATION",payload:{id:S.id}});I(null)},[S,t,s]),Bn=Pt(m=>{for(let h=0;h<Vi.length-1;h++){let V=Vi[h],M=Vi[h+1];if(m<=(V+M)/2)return V;if(m<M)return M}return Math.round(m/8)*8},[]),ws=Pt((m,h,V,M)=>{let A=V.top+Math.max(M.top,4),z=V.bottom-Math.max(M.bottom,4),ie=V.left+Math.max(M.left,4),N=V.right-Math.max(M.right,4);if(m<V.left||m>V.right||h<V.top||h>V.bottom)return null;let J=h<A,x=h>z,C=m<ie,Y=m>N;return J&&C?M.top>=M.left?"top":"left":J&&Y?M.top>=M.right?"top":"right":x&&C?M.bottom>=M.left?"bottom":"left":x&&Y?M.bottom>=M.right?"bottom":"right":J?"top":x?"bottom":C?"left":Y?"right":null},[]),Es=Pt(m=>{var z,ie;if(!e.isAnnotating)return;if(e.inspectedElement&&e.activeTool==="hand"&&!("button"in m&&m.button===2)){m.preventDefault(),m.stopPropagation(),t({type:"SELECT_ELEMENT",payload:null});return}let h=ho(m),V="shiftKey"in m&&m.shiftKey;if(e.activeTool==="inspector"){if("button"in m&&m.button===2)return;if(Ie&&!se(Ie)){let N=nn(Ie),J=un(Ie),x=Ie.getBoundingClientRect(),C=Ie.getAttribute("data-pm");C||(C=Math.random().toString(36).substring(2,8),Ie.setAttribute("data-pm",C));let Y=`[data-pm="${C}"]`,R=e.styleModifications.some(ve=>{try{return Ie.matches(ve.selector)}catch(ot){return!1}}),D=e.annotations.filter(ve=>{if(!ve.linkedSelector)return!1;try{return Ie.matches(ve.linkedSelector)}catch(ot){return!1}}).length,_=(R?1:0)+D,$=x.top>=bn*(1+_)?"top-left":"bottom-left",le=ca(x,$,_,L==null?void 0:L.current);Fe({point:le,linkedSelector:Y,linkedAnchor:$,elements:[y(f({},N),{selector:J})]})}return}if(e.activeTool==="model"){if("button"in m&&m.button===2)return;if(Pe){let N=Pe.name;if(g!=null&&g.has(N)){u==null||u(N);return}"shiftKey"in m&&m.shiftKey?me(x=>{let C=new Map(x);return C.has(N)?C.delete(N):C.set(N,Pe),C}):q.size===1&&q.has(N)?(d&&d([N]),me(new Map)):me(new Map([[N,Pe]]))}return}if(e.activeTool==="hand"&&vt&&Ft){let N=vt,J=N.getAttribute("data-pm");J||(J=Math.random().toString(36).substring(2,8),N.setAttribute("data-pm",J));let x=un(N),C=`[data-pm="${J}"]`,Y=nn(N),R=Vo(N),D=h.x-window.scrollX,_=h.y-window.scrollY,$=Re,le=window.getComputedStyle(N).justifyContent,ve=0;if($){let st=ro(N).find(Mt=>Mt.axis===Ft);ve=st?Ft==="column"?st.w:st.h:0}$e(N,"transition","none"),mt.current={isDragging:!0,hasMoved:!1,axis:Ft,startX:D,startY:_,originalRow:$?ve:R.row,originalColumn:$?ve:R.column,element:N,elementInfo:y(f({},Y),{selector:C}),selector:C,durableSelector:x,isAuto:$,originalJustifyContent:le,visualGap:ve},Z({axis:Ft,row:$?ve:R.row,column:$?ve:R.column});return}if(e.activeTool==="hand"&&Se&&pe){let N=Se,J=N.getAttribute("data-pm");J||(J=Math.random().toString(36).substring(2,8),N.setAttribute("data-pm",J));let x=`[data-pm="${J}"]`,C=nn(N),{fontSize:Y,lineHeight:R}=Uo(N),D=Y>0?R/Y:1.2,_=h.x-window.scrollX,$=h.y-window.scrollY;$e(N,"transition","none");let le=un(N);oe.current={isDragging:!0,property:pe,startX:_,startY:$,originalFontSize:Y,originalLineHeight:R,originalRatio:D,element:N,elementInfo:y(f({},C),{selector:x}),selector:x,durableSelector:le},Tn({property:pe,fontSize:Y,lineHeight:R});return}if(e.activeTool==="hand"&&kt&&dn){let N=kt,J=N.getAttribute("data-pm");J||(J=Math.random().toString(36).substring(2,8),N.setAttribute("data-pm",J));let x=`[data-pm="${J}"]`,C=un(N),Y=nn(N),R=io(N),D=N.getBoundingClientRect(),_=Math.floor(D.height/2),$=h.y-window.scrollY;$e(N,"transition","none"),Ut.current={isDragging:!0,corner:dn,startY:$,original:R,maxRadius:_,element:N,elementInfo:y(f({},Y),{selector:x}),selector:x,durableSelector:C},ne({corner:dn,radius:f({},R)});return}if(e.activeTool==="hand"&&Be&&it){let N=Be,J=N.getAttribute("data-pm");J||(J=Math.random().toString(36).substring(2,8),N.setAttribute("data-pm",J));let x=`[data-pm="${J}"]`,C=un(N),Y=nn(N),R=ko(N),D=h.x-window.scrollX,_=h.y-window.scrollY;$e(N,"transition","none"),xe.current={isDragging:!0,side:it,startX:D,startY:_,original:R,element:N,elementInfo:y(f({},Y),{selector:x}),selector:x,durableSelector:C},Rt({side:it,padding:f({},R)});return}let M=vs(h);if(M){let N=e.annotations.find(J=>J.id===M.annotationId);if(N&&N.type!=="text"&&((z=N.status)!=null?z:"pending")==="pending"){$n({annotationId:M.annotationId,handle:M.handle,startPoint:h,originalPoints:[...N.points],hasMoved:!1});return}}let A=ar(h);if(A&&A.points[0]){if(S&&yo(),A.type!=="text"?(Lt(A.id,V),A.color&&t({type:"SET_COLOR",payload:A.color})):V||on(),a){let N=A.threadId||(A.groupId?(ie=e.annotations.find(J=>J.groupId===A.groupId&&J.threadId))==null?void 0:ie.threadId:void 0);N&&a(N)}je({annotation:A,startPoint:h,hasMoved:!1});return}if(V||on(),e.activeTool==="text"){S&&yo();let N=Math.random().toString(36).substring(2,9);I({id:N,point:h,text:"",fontSize:12,isNew:!0});return}X(!0),t({type:"START_PATH",payload:h})},[e.isAnnotating,e.activeTool,e.inspectedElement,e.annotations,S,nt,Ie,Be,it,kt,dn,vt,Ft,Re,Se,pe,Pe,q,g,d,u,a,ho,ar,vs,t,Lt,on,yo]),Cs=Pt(m=>{var V,M;let h=ho(m);if(e.activeTool==="inspector"&&e.isAnnotating){let A=h.x-window.scrollX,z=h.y-window.scrollY,ie=oo(A,z),N=ie&&se(ie)?null:ie;N!==Ie&&(We(N),dt(N?nn(N):null));return}if(e.activeTool==="model"&&e.isAnnotating){let A=h.x-window.scrollX,z=h.y-window.scrollY,ie=oo(A,z);if(ie!==ye.current&&(ye.current=ie,Ee.current=0),ie){let N=hr(ie,Ee.current);Me(N)}else Me(null);return}if(e.activeTool==="hand"&&e.isAnnotating){let A=h.x-window.scrollX,z=h.y-window.scrollY;Ht.current={x:A,y:z},wt({x:A,y:z});let ie=P.current.cmd,N=P.current.shift;if(mt.current.isDragging){let x=mt.current,C=x.element;if(!C)return;if(!x.hasMoved){let _=Math.abs(A-x.startX),$=Math.abs(z-x.startY);if(_<=2&&$<=2)return;x.hasMoved=!0,x.isAuto&&($e(C,"justify-content","normal"),$e(C,"row-gap",`${x.visualGap}px`),$e(C,"column-gap",`${x.visualGap}px`),Xe(!1))}let Y=x.axis,R=x.originalRow,D=x.originalColumn;if(Y==="column"){let _=A-x.startX;D=x.originalColumn+_,ie||(R=x.originalRow+_)}else{let _=z-x.startY;R=x.originalRow+_,ie||(D=x.originalColumn+_)}R=Math.max(0,R),D=Math.max(0,D),N&&(R=Bn(R),D=Bn(D)),R=Math.round(R),D=Math.round(D),$e(C,"row-gap",`${R}px`),$e(C,"column-gap",`${D}px`),Z({axis:Y,row:R,column:D});return}if(Ut.current.isDragging){let x=Ut.current,C=x.element;if(!C)return;let Y=z-x.startY,R=x.corner,D=x.original,_=f({},D);if(ie){let $=D[R]+Y;$=Math.max(0,Math.min(x.maxRadius,$)),N&&($=Bn($)),$=Math.round($),_[R]=$}else{let $=D[R]+Y;$=Math.max(0,Math.min(x.maxRadius,$)),N&&($=Bn($)),$=Math.round($),_={"top-left":$,"top-right":$,"bottom-right":$,"bottom-left":$}}$e(C,"border-top-left-radius",`${_["top-left"]}px`),$e(C,"border-top-right-radius",`${_["top-right"]}px`),$e(C,"border-bottom-right-radius",`${_["bottom-right"]}px`),$e(C,"border-bottom-left-radius",`${_["bottom-left"]}px`),ne({corner:R,radius:_});return}if(oe.current.isDragging){let x=oe.current,C=x.element;if(!C)return;let Y=x.property,R=x.originalFontSize,D=x.originalLineHeight,_=[8,10,11,12,13,14,16,18,20,22,24,28,32,36,40,48,56,64,72,80,96];if(Y==="font-size"){let le=A-x.startX;R=x.originalFontSize+le,R=Math.max(1,R)}else{let le=z-x.startY;D=x.originalLineHeight+le,D=Math.max(R,D)}if(N)if(Y==="font-size"){let le=_[0],ve=Math.abs(R-le);for(let ot of _){let st=Math.abs(R-ot);st<ve&&(le=ot,ve=st)}R=le}else{let le=R>0?D/R:1.2,ve=Math.round(le*2)/2;D=R*Math.max(1,ve)}R=Math.round(R),D=Math.round(D*10)/10,$e(C,"font-size",`${R}px`);let $=R>0?Math.round(D/R*1e3)/1e3:1.2;$e(C,"line-height",`${$}`),Tn({property:Y,fontSize:R,lineHeight:D});return}if(xe.current.isDragging){let x=xe.current,C=x.element;if(!C)return;let Y=x.side,R=x.original,D=R.top,_=R.right,$=R.bottom,le=R.left;if(Y==="top"){let ve=x.startY-z;D=R.top+ve,ie||($=R.bottom+ve)}else if(Y==="bottom"){let ve=z-x.startY;$=R.bottom+ve,ie||(D=R.top+ve)}else if(Y==="left"){let ve=x.startX-A;le=R.left+ve,ie||(_=R.right+ve)}else if(Y==="right"){let ve=A-x.startX;_=R.right+ve,ie||(le=R.left+ve)}D=Math.max(0,D),_=Math.max(0,_),$=Math.max(0,$),le=Math.max(0,le),N&&(D=Bn(D),_=Bn(_),$=Bn($),le=Bn(le)),D=Math.round(D),_=Math.round(_),$=Math.round($),le=Math.round(le),$e(C,"padding",`${D}px ${_}px ${$}px ${le}px`),Rt({side:Y,padding:{top:D,right:_,bottom:$,left:le}});return}let J=oo(A,z);for(;J&&J.tagName==="A";)J=J.parentElement;{let C=[];J&&C.push(J),kt&&kt!==J&&C.push(kt);let Y=null,R=16,D=null;for(let _ of C){let $=_.getBoundingClientRect(),le=io(_),ve=[["top-left",$.left,$.top+le["top-left"]],["top-right",$.right,$.top+le["top-right"]],["bottom-right",$.right,$.bottom-le["bottom-right"]],["bottom-left",$.left,$.bottom-le["bottom-left"]]];for(let[ot,st,Mt]of ve){let Ge=Math.hypot(A-st,z-Mt);Ge<R&&(R=Ge,Y=ot,D=_)}}if(Y&&D){Jn(D),Pn(Y),Be&&Ce(null),it&&qe(null),vt&&en(null),Ft&&an(null),Xe(!1),Se&&Oe(null),pe&&xt(null);return}}kt&&Jn(null),dn&&Pn(null);{let x=[];J&&xr(J)&&x.push(J);let C=(V=J==null?void 0:J.parentElement)!=null?V:null;for(;C&&C!==document.body&&x.length<3;)xr(C)&&x.push(C),C=C.parentElement;for(let Y of x){let D=ro(Y).find(_=>A>=_.x&&A<=_.x+_.w&&z>=_.y&&z<=_.y+_.h);if(D){en(Y),an(D.axis),Xe(hi(Y,D.axis)),Be&&Ce(null),it&&qe(null),Se&&Oe(null),pe&&xt(null);return}}}vt&&en(null),Ft&&an(null),Xe(!1);{let C=[];J&&C.push(J),Se&&Se!==J&&C.push(Se);let Y=null,R=1/0,D=null;for(let _ of C){if(!yi(_))continue;let $=Mo(_);if(!$)continue;let le=A>=$.left&&A<=$.right&&z>=$.top&&z<=$.bottom,ve=[["font-size",$.right,$.top+$.height/2],["line-height",$.left+$.width/2,$.bottom]];for(let[ot,st,Mt]of ve){let Ge=Math.hypot(A-st,z-Mt);(le||Ge<12)&&Ge<R&&(R=Ge,Y=ot,D=_)}}Y&&D?(Oe(D),xt(Y)):(Se&&Oe(null),pe&&xt(null))}if(J!==Be&&Ce(J),J){let x=ko(J),C=J.getBoundingClientRect(),Y=ws(A,z,C,x);qe(Y)}else qe(null);return}if(hn){let{handle:A,originalPoints:z,hasMoved:ie}=hn,N=e.annotations.find(R=>R.id===hn.annotationId);if(!N)return;let J="metaKey"in m,x=J&&(m.metaKey||m.ctrlKey),C=J&&m.shiftKey,Y;if(N.type==="line"){let R=z[0],D=z[z.length-1];A==="start"?Y=[h,D]:Y=[R,h]}else if(N.type==="freehand"){let R=Math.min(...z.map(ze=>ze.x)),D=Math.max(...z.map(ze=>ze.x)),_=Math.min(...z.map(ze=>ze.y)),$=Math.max(...z.map(ze=>ze.y)),le=(R+D)/2,ve=(_+$)/2,ot=D-R||1,st=$-_||1,Mt=ot/st,Ge=R,ae=D,we=_,Ke=$;switch(A){case"topLeft":Ge=h.x,we=h.y;break;case"topRight":ae=h.x,we=h.y;break;case"bottomLeft":Ge=h.x,Ke=h.y;break;case"bottomRight":ae=h.x,Ke=h.y;break}if(x)switch(A){case"topLeft":ae=D+(R-Ge),Ke=$+(_-we);break;case"topRight":Ge=R-(ae-D),Ke=$+(_-we);break;case"bottomLeft":ae=D+(R-Ge),we=_-(Ke-$);break;case"bottomRight":Ge=R-(ae-D),we=_-(Ke-$);break}if(C){let ze=ae-Ge,ht=Ke-we;if(Math.abs(ze/ht)>Mt){let _t=Math.abs(ht)*Mt*Math.sign(ze);A==="topLeft"||A==="bottomLeft"?Ge=ae-_t:ae=Ge+_t}else{let _t=Math.abs(ze)/Mt*Math.sign(ht);A==="topLeft"||A==="topRight"?we=Ke-_t:Ke=we+_t}}let Ve=ae-Ge||1,ft=Ke-we||1;Y=z.map(ze=>({x:Ge+(ze.x-R)/ot*Ve,y:we+(ze.y-_)/st*ft}))}else if(N.type==="circle"){let R=z[0],D=z[z.length-1],_=Math.min(R.x,D.x),$=Math.max(R.x,D.x),le=Math.min(R.y,D.y),ve=Math.max(R.y,D.y),ot=(_+$)/2,st=(le+ve)/2,Mt=$-_,Ge=ve-le,ae=_,we=$,Ke=le,Ve=ve;switch(A){case"top":if(Ke=h.y,x&&(Ve=st+(st-h.y)),C){let ze=(Ve-Ke)*(Mt/Ge)/2;ae=ot-ze,we=ot+ze}break;case"bottom":if(Ve=h.y,x&&(Ke=st-(h.y-st)),C){let ze=(Ve-Ke)*(Mt/Ge)/2;ae=ot-ze,we=ot+ze}break;case"left":if(ae=h.x,x&&(we=ot+(ot-h.x)),C){let ze=(we-ae)*(Ge/Mt)/2;Ke=st-ze,Ve=st+ze}break;case"right":if(we=h.x,x&&(ae=ot-(h.x-ot)),C){let ze=(we-ae)*(Ge/Mt)/2;Ke=st-ze,Ve=st+ze}break}Y=[{x:ae,y:Ke},{x:we,y:Ve}]}else{let R=z[0],D=z[z.length-1],_=Math.min(R.x,D.x),$=Math.max(R.x,D.x),le=Math.min(R.y,D.y),ve=Math.max(R.y,D.y),ot=(_+$)/2,st=(le+ve)/2,Mt=$-_||1,Ge=ve-le||1,ae=Mt/Ge,we=_,Ke=$,Ve=le,ft=ve;switch(A){case"topLeft":we=h.x,Ve=h.y;break;case"topRight":Ke=h.x,Ve=h.y;break;case"bottomLeft":we=h.x,ft=h.y;break;case"bottomRight":Ke=h.x,ft=h.y;break}if(x)switch(A){case"topLeft":Ke=$+(_-we),ft=ve+(le-Ve);break;case"topRight":we=_-(Ke-$),ft=ve+(le-Ve);break;case"bottomLeft":Ke=$+(_-we),Ve=le-(ft-ve);break;case"bottomRight":we=_-(Ke-$),Ve=le-(ft-ve);break}if(C){let ze=Ke-we,ht=ft-Ve;if(Math.abs(ze/ht)>ae){let _t=Math.abs(ht)*ae*Math.sign(ze);A==="topLeft"||A==="bottomLeft"?we=Ke-_t:Ke=we+_t}else{let _t=Math.abs(ze)/ae*Math.sign(ht);A==="topLeft"||A==="topRight"?Ve=ft-_t:ft=Ve+_t}}Y=[{x:we,y:Ve},{x:Ke,y:ft}]}t({type:"RESIZE_ANNOTATION",payload:{id:hn.annotationId,points:Y,saveUndo:!ie}}),ie||$n(y(f({},hn),{hasMoved:!0}));return}if(Ne&&((M=Ne.annotation.status)!=null?M:"pending")==="pending"){let A=h.x-Ne.startPoint.x,z=h.y-Ne.startPoint.y;if((Math.abs(A)>2||Math.abs(z)>2)&&!Ne.hasMoved)je(y(f({},Ne),{hasMoved:!0,startPoint:h})),t({type:"MOVE_ANNOTATION",payload:{id:Ne.annotation.id,delta:{x:A,y:z},saveUndo:!0}});else if(Ne.hasMoved){let N=h.x-Ne.startPoint.x,J=h.y-Ne.startPoint.y;je(y(f({},Ne),{startPoint:h})),t({type:"MOVE_ANNOTATION",payload:{id:Ne.annotation.id,delta:{x:N,y:J}}})}return}!G||!e.isAnnotating||t({type:"CONTINUE_PATH",payload:h})},[G,e.isAnnotating,e.activeTool,Ne,hn,Ie,Be,it,kt,dn,vt,Ft,Se,pe,ho,t,Bn,ws]),Gr=Pt(m=>{var M,A,z,ie,N,J;if(oe.current.isDragging){let x=oe.current,C=x.element;if(C&&x.selector&&x.elementInfo&&Je){C instanceof HTMLElement&&(C.style.removeProperty("font-size"),C.style.removeProperty("line-height"),C.style.removeProperty("transition"));let Y=[];if(x.originalFontSize!==Je.fontSize&&($e(C,"font-size",`${Je.fontSize}px`),Y.push({property:"font-size",original:`${x.originalFontSize}px`,modified:`${Je.fontSize}px`})),x.originalLineHeight!==Je.lineHeight){let R=x.originalFontSize>0?Math.round(x.originalLineHeight/x.originalFontSize*1e3)/1e3:1.2,D=Je.fontSize>0?Math.round(Je.lineHeight/Je.fontSize*1e3)/1e3:1.2;$e(C,"line-height",`${D}`),Y.push({property:"line-height",original:`${R}`,modified:`${D}`})}Y.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:x.selector,durableSelector:(M=x.durableSelector)!=null?M:void 0,element:x.elementInfo,changes:Y}})}oe.current={isDragging:!1,property:null,startX:0,startY:0,originalFontSize:0,originalLineHeight:0,originalRatio:1.2,element:null,elementInfo:null,selector:null,durableSelector:null},Tn(null);return}if(mt.current.isDragging){let x=mt.current,C=x.element,Y="button"in m&&m.button===2;if(!x.hasMoved&&!Y&&C&&x.selector&&x.elementInfo){C instanceof HTMLElement&&C.style.removeProperty("transition");let R=["space-between","space-around","stretch","normal"],D=x.originalJustifyContent||"normal",_=R.indexOf(D),$=R[(_+1)%R.length],le=[];$==="normal"?($e(C,"justify-content","normal"),le.push({property:"justify-content",original:x.originalJustifyContent,modified:"normal"})):$==="stretch"?($e(C,"justify-content",$),$e(C,"row-gap","8px"),$e(C,"column-gap","8px"),le.push({property:"justify-content",original:x.originalJustifyContent||"normal",modified:$}),x.originalRow!==8&&le.push({property:"row-gap",original:`${x.originalRow}px`,modified:"8px"}),x.originalColumn!==8&&le.push({property:"column-gap",original:`${x.originalColumn}px`,modified:"8px"})):(C instanceof HTMLElement&&(C.style.removeProperty("row-gap"),C.style.removeProperty("column-gap")),$e(C,"justify-content",$),le.push({property:"justify-content",original:x.originalJustifyContent||"normal",modified:$}),x.originalRow>0&&le.push({property:"row-gap",original:`${x.originalRow}px`,modified:"0px"}),x.originalColumn>0&&le.push({property:"column-gap",original:`${x.originalColumn}px`,modified:"0px"})),le.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:x.selector,durableSelector:(A=x.durableSelector)!=null?A:void 0,element:x.elementInfo,changes:le}})}else if(x.hasMoved&&C&&x.selector&&x.elementInfo&&ut){C instanceof HTMLElement&&(C.style.removeProperty("row-gap"),C.style.removeProperty("column-gap"),C.style.removeProperty("transition"));let R=[];x.isAuto?(C instanceof HTMLElement&&C.style.removeProperty("justify-content"),$e(C,"justify-content","normal"),$e(C,"row-gap",`${ut.row}px`),$e(C,"column-gap",`${ut.column}px`),R.push({property:"justify-content",original:x.originalJustifyContent,modified:"normal"}),R.push({property:"row-gap",original:"0px",modified:`${ut.row}px`}),R.push({property:"column-gap",original:"0px",modified:`${ut.column}px`})):(x.originalRow!==ut.row&&($e(C,"row-gap",`${ut.row}px`),R.push({property:"row-gap",original:`${x.originalRow}px`,modified:`${ut.row}px`})),x.originalColumn!==ut.column&&($e(C,"column-gap",`${ut.column}px`),R.push({property:"column-gap",original:`${x.originalColumn}px`,modified:`${ut.column}px`}))),R.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:x.selector,durableSelector:(z=x.durableSelector)!=null?z:void 0,element:x.elementInfo,changes:R}})}mt.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},Z(null);return}if(Ut.current.isDragging){let x=Ut.current,C=x.element;if(C&&x.selector&&x.elementInfo&&F){C instanceof HTMLElement&&(C.style.removeProperty("border-top-left-radius"),C.style.removeProperty("border-top-right-radius"),C.style.removeProperty("border-bottom-right-radius"),C.style.removeProperty("border-bottom-left-radius"),C.style.removeProperty("transition"));let Y=["top-left","top-right","bottom-right","bottom-left"],R={"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 _ of Y)x.original[_]!==F.radius[_]&&($e(C,R[_],`${F.radius[_]}px`),D.push({property:R[_],original:`${x.original[_]}px`,modified:`${F.radius[_]}px`}));D.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:x.selector,durableSelector:(ie=x.durableSelector)!=null?ie:void 0,element:x.elementInfo,changes:D}})}Ut.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},ne(null);return}if(xe.current.isDragging){let x=xe.current,C=x.element,Y=x.selector,R=x.elementInfo;if(C&&Y&&R&&et){let D=x.original,_=et.padding;C instanceof HTMLElement&&(C.style.removeProperty("padding"),C.style.removeProperty("transition"));let $=[],le=[{prop:"padding-top",origVal:D.top,newVal:_.top},{prop:"padding-right",origVal:D.right,newVal:_.right},{prop:"padding-bottom",origVal:D.bottom,newVal:_.bottom},{prop:"padding-left",origVal:D.left,newVal:_.left}];for(let{prop:ve,origVal:ot,newVal:st}of le)ot!==st&&($e(C,ve,`${st}px`),$.push({property:ve,original:`${ot}px`,modified:`${st}px`}));$.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:Y,durableSelector:(N=x.durableSelector)!=null?N:void 0,element:R,changes:$}})}xe.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},Rt(null);return}if(hn){$n(null);return}if(Ne){if(!Ne.hasMoved&&Ne.annotation.type==="text"&&((J=Ne.annotation.status)!=null?J:"pending")==="pending"){let x=ho(m);I({id:Ne.annotation.id,point:Ne.annotation.points[0],text:Ne.annotation.text||"",fontSize:Ne.annotation.fontSize||12,isNew:!1,clickPoint:x,groupId:Ne.annotation.groupId})}je(null);return}if(!G)return;let h=5;if(e.currentPath.length>=2){let x=e.currentPath[0],C=e.currentPath[e.currentPath.length-1],Y=Math.abs(C.x-x.x),R=Math.abs(C.y-x.y);if((e.activeTool==="line"?Math.sqrt(Y*Y+R*R)<h:Y<h&&R<h)&&["rectangle","circle","line"].includes(e.activeTool)){X(!1),t({type:"CANCEL_PATH"});return}}let V=di(e.currentPath);if(e.activeTool==="rectangle"&&e.currentPath.length>=2){let x=e.currentPath[0],C=e.currentPath[e.currentPath.length-1],Y=Math.min(x.x,C.x),R=Math.max(x.y,C.y),D=e.strokeWidth/2,_=Math.random().toString(36).substring(2,9);de({point:{x:Y-D+4,y:R+D+4},groupId:_}),X(!1),t({type:"FINISH_PATH",payload:{groupId:_,elements:V}});return}X(!1),t({type:"FINISH_PATH",payload:{elements:V}})},[G,Ne,hn,et,F,ut,Je,ho,t,e.activeTool,e.currentPath,e.strokeWidth]),Xa=Pt(m=>{let h=m.target.value;sr.current=m.target.selectionStart,I(V=>V&&y(f({},V),{text:h}))},[]),Ka=Pt(m=>{m.key==="Escape"?I(null):m.key==="Enter"&&!m.shiftKey&&(m.preventDefault(),yo())},[yo]),qa=Pt(m=>{if(!S)return;let h=m.clipboardData.items,V=[];for(let M=0;M<h.length;M++){let A=h[M];if(A.type.startsWith("image/")){let z=A.getAsFile();z&&V.push(z)}}V.length>0&&(m.preventDefault(),I(M=>M?y(f({},M),{images:[...M.images||[],...V]}):null))},[S]),Za=Pt(m=>{if(!e.isAnnotating)return;if(e.activeTool==="hand"){m.preventDefault();let V=Be||vt||kt||Se;if(V&&!se(V)){let M=nn(V),A=un(V);t({type:"SELECT_ELEMENT",payload:{el:V,info:y(f({},M),{selector:A})}})}return}m.preventDefault();let h=T.current;h&&(U.current=!0,h.style.pointerEvents="none",setTimeout(()=>{U.current&&(U.current=!1,h.style.pointerEvents="")},4e3))},[e.activeTool,e.isAnnotating,Be,vt,kt,Se,t,se,T]);Jt(()=>{let m=e.annotations.filter(ie=>ie.linkedSelector);if(m.length===0)return;let h=null,V=document.createElement("canvas").getContext("2d"),M=()=>{var N,J,x;let ie=[];for(let C of m){let Y=document.querySelector(C.linkedSelector);if(!Y&&((J=(N=C.elements)==null?void 0:N[0])!=null&&J.selector)&&C.linkedSelector.startsWith("[data-pm=")){try{Y=document.querySelector(C.elements[0].selector)}catch(Ge){}if(Y){let Ge=(x=C.linkedSelector.match(/data-pm="([^"]+)"/))==null?void 0:x[1];Ge&&Y.setAttribute("data-pm",Ge)}}if(!Y)continue;let R=Y.getBoundingClientRect(),D=e.styleModifications.some(Ge=>{try{return Y.matches(Ge.selector)}catch(ae){return!1}}),_=m.filter(Ge=>Ge.id!==C.id&&Ge.timestamp<C.timestamp&&Ge.linkedSelector===C.linkedSelector).length,$=(D?1:0)+_,le;if(C.text&&V){let Ge=C.fontSize||12;V.font=`${Ge}px ${zt}`,le=Math.max(...C.text.split(`
|
|
9
|
-
`).map(ae=>
|
|
10
|
-
`),
|
|
11
|
-
`).length)*S.fontSize*1.4+8:0,ks=Wo.height+8,nc=Wo.isWrapped?ks-tc:0,oc=S?{position:"fixed",left:S.point.x-4-Zt.x,top:S.point.y-4-Zt.y-nc,zIndex:9999,width:Wo.width+8,height:ks,padding:4,fontSize:S.fontSize,fontFamily:zt,color:"#ffffff",backgroundColor:e.activeColor,border:"none",borderRadius:0,outline:"none",boxShadow:"none",lineHeight:1.4,resize:"none",overflow:"hidden",whiteSpace:Wo.isWrapped?"pre-wrap":"pre",wordBreak:Wo.isWrapped?"break-word":void 0}:{};return Bo(Oo,{children:[rt("canvas",{ref:H,id:"devtools-canvas",style:ec,onMouseDown:Es,onMouseMove:Cs,onMouseUp:m=>Gr(m),onMouseLeave:m=>{Gr(m),We(null),dt(null)},onTouchStart:Es,onTouchMove:Cs,onTouchEnd:m=>Gr(m),onContextMenu:Za}),S&&Bo(Oo,{children:[rt("style",{children:"#devtools-text-input::placeholder { color: rgba(255, 255, 255, 0.5); }"}),rt("textarea",{id:"devtools-text-input",ref:Te,value:S.text,onChange:Xa,onKeyDown:Ka,onPaste:qa,onBlur:yo,placeholder:"Type here...",style:oc}),S.images&&S.images.length>0&&Bo("div",{"data-devtools":!0,style:{position:"fixed",left:S.point.x-4-Zt.x,top:S.point.y-4-Zt.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:[S.images.length," image",S.images.length>1?"s":""," attached"]})]}),e.isAnnotating&&e.activeTool!=="hand"&&e.styleModifications.length>0&&rt(zl,{styleModifications:e.styleModifications,isInspecting:!!e.inspectedElement,accentColor:e.activeColor,annotationGroupCount:new Set(e.annotations.map(m=>m.groupId||m.id)).size,dispatch:t,inFlightSelectors:o,toolbarRef:L,onHoverSelector:he}),e.activeTool==="hand"&&e.isAnnotating&&e.styleModifications.length>0&&rt(Wl,{styleModifications:e.styleModifications,accentColor:e.activeColor}),e.isAnnotating&&rt(Ll,{annotations:e.annotations,supersededAnnotations:Wn,inFlightIds:r,scrollX:Zt.x,scrollY:Zt.y,annotationGroupMap:ir,onViewThread:a,onSelectAnnotation:Lt,onHoverAnnotation:te,canvasRef:T}),e.isAnnotating&&l&&rt(Al,{annotations:e.annotations,supersededAnnotations:Wn,scrollX:Zt.x,scrollY:Zt.y,onReply:l,annotationGroupMap:ir,canvasRef:T,onHoverAnnotation:te}),e.isAnnotating&&i&&i.size>0&&rt(vi,{inFlightSelectorColors:i}),e.isAnnotating&&xs&&rt(vi,{inFlightSelectorColors:xs,animated:!1}),e.activeTool==="hand"&&e.isAnnotating&&(ut?mt.current.element:vt)&&rt(Mi,{element:ut?mt.current.element:vt,gap:ut?{row:ut.row,column:ut.column}:Vo(vt),accentColor:e.activeColor,hoveredAxis:Ft,draggingAxis:(Ts=ut==null?void 0:ut.axis)!=null?Ts:null,cursorViewport:bt,isAutoGap:Re,refreshKey:cn}),e.activeTool==="hand"&&e.isAnnotating&&pt&&rt(sa,{element:pt.target,modifier:pt.modifier,accentColor:e.activeColor,refreshKey:cn}),e.activeTool==="hand"&&e.isAnnotating&&!pt&&(F?Ut.current.element:kt)&&rt(Nl,{element:F?Ut.current.element:kt,radius:(Is=F==null?void 0:F.radius)!=null?Is:io(kt),accentColor:e.activeColor,hoveredCorner:dn,draggingCorner:(Rs=F==null?void 0:F.corner)!=null?Rs:null,cursorViewport:bt}),e.activeTool==="hand"&&e.isAnnotating&&!pt&&(Je?oe.current.element:Se)&&rt(la,{element:Je?oe.current.element:Se,fontSize:(Ls=Je==null?void 0:Je.fontSize)!=null?Ls:Uo(Se).fontSize,lineHeight:(As=Je==null?void 0:Je.lineHeight)!=null?As:Uo(Se).lineHeight,accentColor:e.activeColor,hoveredProperty:pe,draggingProperty:(Ps=Je==null?void 0:Je.property)!=null?Ps:null,cursorViewport:bt}),e.activeTool==="hand"&&e.isAnnotating&&!pt&&(et?xe.current.element:Be)&&rt(Pi,{element:et?xe.current.element:Be,padding:(Bs=et==null?void 0:et.padding)!=null?Bs:ko(Be),accentColor:e.activeColor,hoveredSide:it,draggingSide:(Os=et==null?void 0:et.side)!=null?Os:null,cursorViewport:bt,refreshKey:Je?Je.fontSize+Je.lineHeight*1e3:0}),e.activeTool==="inspector"&&e.isAnnotating&&rt(Oo,{children:Ie&&!e.inspectedElement&&(()=>{let m=!!ue||!!(S!=null&&S.linkedSelector)||e.annotations.some(h=>{if(!h.linkedSelector)return!1;try{return Ie.matches(h.linkedSelector)}catch(V){return!1}});return rt(Ln,{element:Ie,isSelected:!1,elementInfo:lt,color:e.activeColor,hideTooltip:m})})()}),((S==null?void 0:S.linkedSelector)||(ue==null?void 0:ue.linkedSelector))&&(()=>{let m=(S==null?void 0:S.linkedSelector)||(ue==null?void 0:ue.linkedSelector);if(!m)return null;let h=null;try{h=document.querySelector(m)}catch(V){}return h?rt(Ln,{element:h,isSelected:!0,color:e.activeColor,hideTooltip:!0}):null})(),E&&(()=>{let m=e.annotations.find(M=>M.id===E);if(!(m!=null&&m.linkedSelector))return null;let h=null;try{h=document.querySelector(m.linkedSelector)}catch(M){}if(!h)return null;let V=!!(r&&r.has(m.id));return rt(Ln,{element:h,isSelected:!V,color:m.color,hideTooltip:!0})})(),W&&(()=>{let m=e.annotations.find(A=>A.id===W);if(!(m!=null&&m.linkedSelector))return null;let h=null;try{h=document.querySelector(m.linkedSelector)}catch(A){}if(!h)return null;let V=m.groupId?e.annotations.filter(A=>A.groupId===m.groupId):[m],M=!!(r&&V.some(A=>r.has(A.id)));return rt(Ln,{element:h,isSelected:!M,color:m.color,hideTooltip:!0})})(),j&&(()=>{let m=null;try{m=document.querySelector(j)}catch(V){}if(!m)return null;let h=!!(o&&o.has(j));return rt(Ln,{element:m,isSelected:!h,color:e.activeColor,hideTooltip:!0})})(),e.activeTool==="model"&&e.isAnnotating&&q.size>0&&[...q.entries()].map(([m,h])=>rt(Ln,{element:h.rootElement,isSelected:!0,elementInfo:{selector:"",tagName:h.rootElement.tagName.toLowerCase(),reactComponent:m},color:"#8b5cf6"},m)),e.activeTool==="model"&&e.isAnnotating&&rr&&rt(Ln,{element:rr.rootElement,isSelected:!0,elementInfo:{selector:"",tagName:rr.rootElement.tagName.toLowerCase(),reactComponent:rr.name},color:"#22c55e"}),e.activeTool==="model"&&e.isAnnotating&&bs.length>0&&bs.map((m,h)=>rt("div",{style:{position:"absolute",left:m.x,top:m.y,width:m.width,height:m.height,backgroundColor:"rgba(255, 0, 0, 0.08)",pointerEvents:"none",zIndex:9998},children:m.direction==="vertical"?Bo(Oo,{children:[rt("div",{style:{position:"absolute",left:"50%",top:0,width:6,height:1,backgroundColor:"#FF0000",transform:"translateX(-50%)"}}),rt("div",{style:{position:"absolute",left:"50%",top:0,bottom:0,width:1,backgroundColor:"#FF0000",transform:"translateX(-50%)"}}),rt("div",{style:{position:"absolute",left:"50%",bottom:0,width:6,height:1,backgroundColor:"#FF0000",transform:"translateX(-50%)"}}),rt("div",{style:{position:"absolute",left:"calc(50% + 6px)",top:m.height<16?-6:"50%",transform:m.height<16?"none":"translateY(-50%)",fontSize:11,fontWeight:600,color:"#fff",backgroundColor:"#FF0000",padding:"2px 4px",whiteSpace:"nowrap",fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',lineHeight:1},children:Math.round(m.height)})]}):Bo(Oo,{children:[rt("div",{style:{position:"absolute",left:0,top:"50%",width:1,height:6,backgroundColor:"#FF0000",transform:"translateY(-50%)"}}),rt("div",{style:{position:"absolute",left:0,right:0,top:"50%",height:1,backgroundColor:"#FF0000",transform:"translateY(-50%)"}}),rt("div",{style:{position:"absolute",right:0,top:"50%",width:1,height:6,backgroundColor:"#FF0000",transform:"translateY(-50%)"}}),rt("div",{style:{position:"absolute",left:m.width<30?0:"50%",top:(m.width<30,void 0),bottom:"calc(50% + 4px)",transform:m.width<30?"none":"translateX(-50%)",fontSize:11,fontWeight:600,color:"#fff",backgroundColor:"#FF0000",padding:"2px 4px",whiteSpace:"nowrap",fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',lineHeight:1},children:Math.round(m.width)})]})},h)),e.activeTool==="model"&&e.isAnnotating&&Pe&&rt(Ln,{element:Pe.rootElement,isSelected:!1,elementInfo:{selector:"",tagName:Pe.rootElement.tagName.toLowerCase(),reactComponent:Pe.name},color:g!=null&&g.has(Pe.name)?"#22c55e":"#8b5cf6"}),e.activeTool==="hand"&&e.isAnnotating&&e.inspectedElement&&Bo(Oo,{children:[Ct&&Ct!=="padding"&&Ct!=="gap"&&(()=>{var N;let m=new Set(e.annotations.map(J=>J.groupId||J.id)).size,h=e.inspectedElement.info.selector,V=e.styleModifications.findIndex(J=>J.selector===h),M=V>=0?m+V+1:m+e.styleModifications.length+1,A=e.styleModifications.find(J=>J.selector===h),z=(N=A==null?void 0:A.changes.length)!=null?N:0,ie=!!(A!=null&&A.captured);return rt(Ln,{element:e.inspectedElement.el,isSelected:!0,elementInfo:e.inspectedElement.info,color:ie?"#999999":e.activeColor,annotationNumber:M,changeCount:z})})(),Ct==="padding"&&rt(Pi,{element:e.inspectedElement.el,padding:ko(e.inspectedElement.el),accentColor:e.activeColor,hoveredSide:null,draggingSide:null}),Ct==="gap"&&rt(Mi,{element:e.inspectedElement.el,gap:Vo(e.inspectedElement.el),accentColor:e.activeColor,hoveredAxis:null,draggingAxis:null}),rt(ra,{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:Nt,accentColor:e.activeColor,toolbarRef:L})]})]})}import{useCallback as mn,useEffect as Mn,useMemo as ts,useRef as Bt,useState as tr}from"react";import{Circle as Op,Component as Dp,Hand as Np,MessageCircle as Hp,Pen as Fp,Slash as _p,Square as zp,Trash2 as $p,Type as Wp}from"lucide-react";import{useEffect as Fu,useRef as _u}from"react";function ua(e,t,n,r,o){let i=_u(0);Fu(()=>{if(!n.current||(localStorage.setItem(o.expanded,String(e)),!e))return;let s=t.annotations.length;(s>=i.current||s===0||!r)&&(localStorage.setItem(o.annotations,JSON.stringify(t.annotations)),i.current=s),localStorage.setItem(o.styleMods,JSON.stringify(t.styleModifications)),localStorage.setItem(o.spacingChanges,JSON.stringify(t.spacingTokenChanges)),localStorage.setItem(o.tool,t.activeTool),localStorage.setItem(o.color,t.activeColor),localStorage.setItem(o.stroke,String(t.strokeWidth)),t.inspectedElement?localStorage.setItem(o.inspected,JSON.stringify({selector:t.inspectedElement.info.selector,info:t.inspectedElement.info})):localStorage.removeItem(o.inspected)},[e,t.annotations,t.styleModifications,t.spacingTokenChanges,t.activeTool,t.activeColor,t.strokeWidth,t.inspectedElement,r,n,o])}import{Component as op,createElement as rp,useCallback as Fr,useEffect as po,useRef as Do,useState as gn}from"react";import{Link2 as ip}from"lucide-react";var zu={colors:[],fonts:[],typeScale:[],spacing:[],radii:[],shadows:[],other:[],references:{}},$u=/^#[0-9a-fA-F]{3,8}$/,Wu=/^(?:rgba?|hsla?|oklch|oklab|lch|lab)\(/,Yu=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 fa(e){let t=e.trim().toLowerCase();return $u.test(t)||Wu.test(t)||Yu.has(t)}var ju=/^-?\d+(\.\d+)?(px|rem|em|%)$/;function Ji(e){return ju.test(e.trim())}var pa=new Set(["serif","sans-serif","monospace","cursive","fantasy","system-ui","ui-serif","ui-sans-serif","ui-monospace","ui-rounded"]);function Gu(e){let t=e.trim().toLowerCase();return!!(pa.has(t)||t.includes(",")&&t.split(",").some(n=>pa.has(n.trim().replace(/['"]/g,""))))}function Vu(e){let t=e.trim().toLowerCase(),n=t.match(/\d+(\.\d+)?px/g);return!!(n&&n.length>=2&&(fa(t.replace(/[^#()\w,.\s/%]/g,"").split(/\s+/).pop()||"")||t.includes("rgb")||t.includes("hsl")||t.includes("#")))}var Uu=/(?:^--(color|bg|fg|accent|border-color|text-color|surface|background|foreground))|(?:-(color|bg|fg)$)/i,Ju=/^--(font-family|font|ff|family)/i,Xu=/^--(font-size|text-size|fs|text-(?:xs|sm|base|md|lg|xl|2xl|3xl|4xl|5xl))/i,Ku=/^--(space|gap|padding|margin|inset)/i,qu=/^--(radius|rounded|br|border-radius)/i,Zu=/^--(shadow|elevation|drop-shadow)/i;function ga(e,t){let n=e.toLowerCase();return Zu.test(n)?"shadows":qu.test(n)?"radii":Ju.test(n)?"fonts":Xu.test(n)&&Ji(t)?"typeScale":Uu.test(n)||fa(t)?"colors":Gu(t)?"fonts":Vu(t)?"shadows":Ku.test(n)&&Ji(t)||Ji(t)?"spacing":"other"}function ma(e,t,n,r){if(e)for(let o of e){if(o instanceof CSSGroupingRule){ma(o.cssRules,t,n,r);continue}if(o instanceof CSSStyleRule){let i=o.selectorText.toLowerCase();(i===":root"||i==="html"||i==="*"||i.includes(":root"))&&Qu(o.style,t,n,r)}}}var ha=/var\((--[^,)]+)/;function Qu(e,t,n,r){for(let o=0;o<e.length;o++){let i=e[o];if(!(i!=null&&i.startsWith("--"))||n.has(i))continue;n.add(i);let s=t.getPropertyValue(i).trim();if(!s)continue;let l=ga(i,s);r[l].push([i,s]);let c=e.getPropertyValue(i).trim().match(ha);c&&(r.references[i]=c[1])}}function Or(e){let t=e.trim().match(/^(-?\d+(?:\.\d+)?)/);return t?parseFloat(t[1]):null}function Nr(e){let t=e.trim().toLowerCase(),n=t.match(/oklch\(\s*([\d.]+%?)/);if(n){let i=n[1];return i.endsWith("%")?parseFloat(i)/100:parseFloat(i)}let r=t.match(/rgba?\(\s*(\d+)[,\s]+(\d+)[,\s]+(\d+)/);if(r){let[i,s,l]=[parseInt(r[1],10),parseInt(r[2],10),parseInt(r[3],10)];return(.2126*i+.7152*s+.0722*l)/255}let o=t.match(/hsla?\(\s*[\d.]+[,\s]+[\d.]+%?[,\s]+([\d.]+)%?/);if(o)return parseFloat(o[1])/100;if(t.startsWith("#")){let i=t.slice(1);(i.length===3||i.length===4)&&(i=i[0]+i[0]+i[1]+i[1]+i[2]+i[2]);let s=parseInt(i.slice(0,2),16),l=parseInt(i.slice(2,4),16),a=parseInt(i.slice(4,6),16);if(!isNaN(s))return(.2126*s+.7152*l+.0722*a)/255}return null}function ya(e){return e==="colors"?(t,n)=>{let r=Nr(t[1]),o=Nr(n[1]);return r!==null&&o!==null?r-o:t[0].localeCompare(n[0])}:e==="typeScale"||e==="spacing"||e==="radii"?(t,n)=>{let r=Or(t[1]),o=Or(n[1]);return r!==null&&o!==null?r-o:t[0].localeCompare(n[0])}:e==="other"?(t,n)=>{let r=Or(t[1]),o=Or(n[1]);return r!==null&&o!==null?r-o:t[0].localeCompare(n[0])}:(t,n)=>t[0].localeCompare(n[0])}function ep(e){let t=e.replace(/^--/,"");t=t.replace(/^(?:color|clr)-/,"");let n=t.split("-");return n.length>1&&/^\d+$/.test(n[n.length-1])&&n.pop(),n.join("-")}function ba(e){let t=new Map;for(let o of e){let i=ep(o[0]),s=t.get(i);s||(s=[],t.set(i,s)),s.push(o)}let n=ya("colors");for(let o of t.values())o.sort(n);let r=[...t.entries()];return r.sort((o,i)=>{var a,c;let s=(a=Nr(o[1][0][1]))!=null?a:0,l=(c=Nr(i[1][0][1]))!=null?c:0;return s-l}),r}var tp=["colors","fonts","typeScale","spacing","radii","shadows","other"],Dr=null,np=5e3;function xa(){if(typeof document=="undefined")return zu;if(Dr&&Date.now()-Dr.timestamp<np)return Dr.tokens;let e={colors:[],fonts:[],typeScale:[],spacing:[],radii:[],shadows:[],other:[],references:{}},t=new Set,n=getComputedStyle(document.documentElement);try{for(let o of document.styleSheets)try{ma(o.cssRules||o.rules,n,t,e)}catch(i){}}catch(o){}let r=document.documentElement.style;for(let o=0;o<r.length;o++){let i=r[o];if(!(i!=null&&i.startsWith("--"))||t.has(i))continue;t.add(i);let s=n.getPropertyValue(i).trim();if(!s)continue;let l=ga(i,s);e[l].push([i,s]);let c=r.getPropertyValue(i).trim().match(ha);c&&(e.references[i]=c[1])}for(let o of tp)e[o].sort(ya(o));return Dr={tokens:e,timestamp:Date.now()},e}import{Fragment as No,jsx as De,jsxs as Gt}from"react/jsx-runtime";var Sa="popmelt-library-tab",sp=/^#[0-9a-fA-F]{3,8}$/,lp=/^(?:rgba?|hsla?|oklch)\([^)]+\)$/,ap=new Set(["black","white","red","blue","green","yellow","orange","purple","pink","gray","grey","cyan","magenta","brown","navy","teal","maroon","olive","silver","aqua","fuchsia","lime"]),cp=/^-?\d+(\.\d+)?(px|rem|em|%)$/;function wa(e){let t=e.trim();return sp.test(t)||lp.test(t)||ap.has(t.toLowerCase())}function dp(e){return cp.test(e.trim())}function up(e){let t=e.trim().match(/^(-?\d+(?:\.\d+)?)px$/);return t?parseFloat(t[1]):null}function Ea(e,t=""){if(e==null)return[];if(typeof e!="object")return[[t,String(e)]];if(Array.isArray(e))return[[t,e.map(String).join(", ")]];let n=[];for(let[r,o]of Object.entries(e)){let i=t?`${t}.${r}`:r;if(o!==null&&typeof o=="object"&&!Array.isArray(o)){let s=o;typeof s.value=="string"?n.push([i,s.value]):n.push(...Ea(o,i))}else n.push([i,Array.isArray(o)?o.map(String).join(", "):String(o!=null?o:"")])}return n}function pp(e){return e.length===0?"generic":e.filter(([,r])=>wa(r)).length>e.length/2?"colors":e.filter(([,r])=>dp(r)).length>e.length/2?"spacing":"generic"}var fp=y(f({position:"fixed",top:16,right:16,bottom:80,width:300,backgroundColor:"#eaeaea"},En),{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"}),Ca={border:"none",background:"none",cursor:"pointer",fontFamily:"inherit",fontSize:11,fontWeight:600,padding:"2px 0",color:"#9ca3af"},gp=y(f({},Ca),{color:"#1f2937",borderBottom:"1.5px solid #1f2937"});function mp({varName:e,value:t,reference:n}){return De("div",{title:n?`${e} \u2192 ${n}
|
|
12
|
-
${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&&De(ip,{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 ka({entries:e,references:t}){let n=[],r=[];for(let i of e)wa(i[1])?n.push(i):r.push(i);let o=ba(n);return Gt(No,{children:[o.map(([i,s])=>Gt("div",{style:{marginBottom:4},children:[Gt("div",{style:{fontSize:10,color:"#9ca3af",marginBottom:2},children:[i,s.length>1?` (${s.length})`:""]}),De("div",{style:{display:"flex",flexWrap:"wrap",gap:2},children:s.map(([l,a])=>De(mp,{varName:l,value:a,reference:t[l]},l))})]},i)),r.length>0&&De(_r,{entries:r})]})}var Hr=[0,1,2,4,8,12,16,20,24,28,32];function hp(e){if(e<=32){let t=Hr[0],n=Math.abs(e-t);for(let r=1;r<Hr.length;r++){let o=Math.abs(e-Hr[r]);o<n&&(t=Hr[r],n=o)}return t}return Math.round(e/8)*8}function yp({label:e,value:t,px:n,tokenPath:r,rawToken:o,onHover:i,onModify:s,onDelete:l}){let[a,c]=gn(!1),[d,u]=gn(null),p=Do(!1),g=Do(0),k=Do(0),w=Do([]),b=d!==null?d:n,E=d!==null?`${d}px`:t,B=d!==null,L=Fr(v=>{v.preventDefault(),p.current=!0,g.current=v.clientX,k.current=n;let O=yr(o);w.current=pi(O);let H=G=>{let X=G.clientX-g.current,S=Math.max(0,Math.round(k.current+X));G.shiftKey&&(S=hp(S));for(let I of w.current)I.element.style.setProperty(I.property,S+"px","important");u(S),i==null||i({name:e,px:S,token:O})},U=()=>{window.removeEventListener("mousemove",H),window.removeEventListener("mouseup",U),document.body.style.cursor="",p.current=!1,u(G=>{if(G!==null&&G!==n&&s){let X=yr(o),S=X.bindings&&X.bindings.length>0,I;if(S){let de=gi(X.bindings,k.current,G);I=JSON.stringify(y(f({},X),{value:`${G}px`,bindings:de}))}else{let de=vl(w.current,k.current),ue=wl(w.current);if(de.length>0){let Fe=gi(de,k.current,G);I=JSON.stringify({value:`${G}px`,property:ue,bindings:Fe})}else I=`${G}px`}let K=typeof o=="string"?o:JSON.stringify(o),ge=w.current.map(de=>({selector:un(de.element),property:de.property})),be=Cl(w.current,k.current,G);s({tokenPath:r,originalValue:K,currentValue:I,targets:ge,originalPx:k.current,currentPx:G},{id:Math.random().toString(36).substring(2,9),tokenPath:r,tokenName:e,originalPx:k.current,newPx:G,affectedElements:be})}return G})};document.body.style.cursor="ew-resize",window.addEventListener("mousemove",H),window.addEventListener("mouseup",U)},[n,e,r,o,i,s]),T=yr(o);return Gt("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",fontSize:11,padding:"1px 0",cursor:"ew-resize",userSelect:"none"},onMouseEnter:()=>{p.current||(c(!0),i==null||i({name:e,px:b,token:T}))},onMouseLeave:()=>{p.current||(c(!1),i==null||i(null))},onMouseDown:L,children:[De("span",{style:{color:a||B?"#FF0000":"#9ca3af"},children:e}),Gt("span",{style:{display:"flex",alignItems:"center",gap:4},children:[De("span",{style:{color:a||B?"#FF0000":"#6b7280",fontWeight:600},children:E}),l&&a&&!B&&De("button",{type:"button",title:"Remove token",onMouseDown:v=>{v.stopPropagation();let O=typeof o=="string"?o:JSON.stringify(o);l(r,O)},style:{border:"none",background:"none",cursor:"pointer",padding:0,fontSize:10,lineHeight:1,color:"#9ca3af"},onMouseEnter:v=>{v.currentTarget.style.color="#FF0000"},onMouseLeave:v=>{v.currentTarget.style.color="#9ca3af"},children:"\u2715"})]})]})}function bp({entries:e,categoryKey:t,rawTokens:n,onHover:r,onModify:o,onDelete:i}){let s=[],l=[];for(let a of e){let c=up(a[1]);c!==null?s.push([a[0],a[1],c]):l.push(a)}return Gt(No,{children:[s.length>0&&De("div",{style:{display:"flex",flexDirection:"column",gap:2},children:s.map(([a,c,d])=>{let u=a.split(".").pop(),p=n?xp(n,a):c,g=p&&typeof p=="object"&&"value"in p?p:c;return De(yp,{label:u,value:c,px:d,tokenPath:`tokens.${t}.${a}`,rawToken:g,onHover:r,onModify:o,onDelete:i},a)})}),l.length>0&&De(_r,{entries:l})]})}function xp(e,t){let n=t.split("."),r=e;for(let o of n){if(r==null||typeof r!="object")return;r=r[o]}return r}function _r({entries:e}){return De("div",{style:{display:"flex",flexDirection:"column",gap:3},children:e.map(([t,n])=>Gt("div",{style:{fontSize:11},children:[De("div",{style:{color:"#9ca3af",fontSize:10,marginBottom:1},children:t}),De("div",{style:{color:"#1f2937",lineHeight:1.4,paddingLeft:8},children:n})]},t))})}function Sp({entries:e,categoryKey:t,rawTokens:n,onSpacingHover:r,onModifyToken:o,onDeleteToken:i}){let s=pp(e);return s==="colors"?De(ka,{entries:e}):s==="spacing"?De(bp,{entries:e,categoryKey:t,rawTokens:n,onHover:r,onModify:o,onDelete:i}):De(_r,{entries:e})}function vp(e){let t=e.toLowerCase(),n=null,r=document.createTreeWalker(document.body,NodeFilter.SHOW_ELEMENT,{acceptNode(i){return i.closest("#devtools-toolbar, #devtools-canvas, #devtools-scrim, [data-popmelt-panel]")?NodeFilter.FILTER_REJECT:NodeFilter.FILTER_ACCEPT}}),o=r.currentNode;for(;o=r.nextNode();){let i=o,s=Object.keys(i).find(a=>a.startsWith("__reactFiber$")||a.startsWith("__reactInternalInstance$"));if(!s)continue;let l=i[s];for(;l;){let a=l.type,c=typeof a=="function"||typeof a=="object"?(a==null?void 0:a.displayName)||(a==null?void 0:a.name):null;if(typeof c=="string"){let d=c.toLowerCase();if(d===t){let u=f({},l.memoizedProps);return delete u.ref,{type:a,props:u}}if(!n){if(d.length>=4&&t.includes(d)){let u=f({},l.memoizedProps);delete u.ref,n={type:a,props:u}}else if(t.length>=4&&d.includes(t)){let u=f({},l.memoizedProps);delete u.ref,n={type:a,props:u}}}}l=l.return}}return n}var Xi=class extends op{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}},Ma="popmelt-principles-collapsed";function wp(){try{let e=localStorage.getItem(Ma);if(e)return new Set(JSON.parse(e))}catch(e){}return new Set}function Ep(e){try{localStorage.setItem(Ma,JSON.stringify([...e]))}catch(t){}}function Cp({id:e,label:t,count:n,children:r,collapsed:o,onToggle:i}){return Gt("div",{style:{marginBottom:14},children:[Gt("div",{onClick:()=>i(e),style:{fontWeight:700,fontSize:11,color:"#6b7280",letterSpacing:"0.05em",marginBottom:o?0:6,cursor:"pointer",display:"flex",alignItems:"center",gap:4,userSelect:"none"},children:[De("span",{style:{display:"inline-flex",alignItems:"center",justifyContent:"center",width:10,fontSize:9,color:"#9ca3af",transform:o?"rotate(-90deg)":"rotate(0deg)"},children:"\u25BC"}),t,De("span",{style:{fontWeight:400,color:"#9ca3af"},children:n})]}),!o&&r]})}var kp={colors:"Colors",fonts:"Fonts",typeScale:"Type Scale",spacing:"Spacing",radii:"Radii",shadows:"Shadows",other:"Other"},va=["colors","fonts","typeScale","spacing","radii","shadows","other"];function Mp(){let[e,t]=gn(null),[n,r]=gn(wp);po(()=>{t(xa())},[]);let o=Fr(s=>{r(l=>{let a=new Set(l);return a.has(s)?a.delete(s):a.add(s),Ep(a),a})},[]);return e?va.some(s=>e[s].length>0)?De(No,{children:va.map(s=>{let l=e[s];return l.length===0?null:De(Cp,{id:s,label:kp[s],count:l.length,collapsed:n.has(s),onToggle:o,children:s==="colors"?De(ka,{entries:l,references:e.references}):De(_r,{entries:l})},s)})}):De("div",{style:{color:"#9ca3af",fontSize:11},children:"No :root tokens found."}):null}function Tp({rules:e}){return!e||e.length===0?De("div",{style:{color:"#9ca3af",fontSize:11},children:"No rules defined yet."}):De(No,{children:e.map((t,n)=>Gt("div",{style:{display:"flex",gap:6,marginBottom:4,lineHeight:1.4,fontSize:11},children:[Gt("span",{style:{color:"#9ca3af",flexShrink:0},children:[n+1,"."]}),De("span",{children:t})]},n))})}function Ip({name:e,value:t,selected:n,highlighted:r,onRemove:o,onHover:i}){var G;let[s,l]=gn(!1),[a,c]=gn(!1),d=Do(null),u=Do(0),[p,g]=gn(0),[k,w]=gn(0),b=Ea(t),E=(G=b.find(([X])=>X==="description"))==null?void 0:G[1];po(()=>{if(!a&&!r){g(0),w(0),u.current=0;return}let X=Eo(e);g(X.length)},[a,r,e]),po(()=>{n&&d.current&&d.current.scrollIntoView({behavior:"smooth",block:"nearest"})},[n]);let B=n||r||a,L=n?"139,92,246":"34,197,94",T=n?"#8b5cf6":"#22c55e",v=B?`rgba(${L},0.06)`:void 0,O=B?`inset 0 0 0 1.5px rgba(${L},0.35)`:void 0,H=r||a,U=Fr(()=>{let X=Eo(e);if(X.length===0)return;let S=u.current%X.length;X[S].rootElement.scrollIntoView({behavior:"smooth",block:"center"}),w(S),u.current=S+1,i==null||i({name:e,instanceIndex:S})},[e,i]);return Gt("div",{ref:d,onClick:U,onMouseEnter:()=>{c(!0),i==null||i({name:e,instanceIndex:0})},onMouseLeave:()=>{c(!1),i==null||i(null)},style:{marginBottom:8,background:v,padding:6,boxShadow:O,cursor:"pointer"},children:[Gt("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between"},children:[Gt("div",{style:{display:"flex",alignItems:"center",gap:6,marginBottom:6},children:[De("div",{style:{fontWeight:700,fontSize:11,letterSpacing:"0.05em",padding:"2px 6px",backgroundColor:H?T:"transparent",color:H?"#fff":"#6b7280"},children:e}),H&&p>1&&Gt("span",{style:{fontSize:10,fontWeight:600,color:"#9ca3af"},children:[k+1,"/",p]})]}),o&&a&&De("button",{type:"button",title:"Remove from model",onClick:X=>{X.stopPropagation(),o(e)},style:{border:"none",background:"none",cursor:"pointer",padding:"0 2px",fontSize:14,lineHeight:1,color:"#9ca3af",marginTop:-4},onMouseEnter:X=>{X.currentTarget.style.color="#FF0000"},onMouseLeave:X=>{X.currentTarget.style.color="#9ca3af"},children:"\u2715"})]}),E&&De("div",{style:{fontSize:11,color:H?"#1f2937":"#9ca3af",marginBottom:6,lineHeight:1.4},children:E}),s?De(Sp,{entries:b.filter(([X])=>X!=="description"),categoryKey:""}):De(Rp,{name:e,onNotFound:()=>l(!0),entries:b})]})}function Rp({name:e,onNotFound:t}){let[n,r]=gn(null),[o,i]=gn(!1);return po(()=>{let s=vp(e);s||t(),r(s),i(!0)},[e,t]),!o||!n?null:De(Xi,{onError:t,children:De("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:De("div",{style:{zoom:.5,pointerEvents:"none"},children:rp(n.type,n.props)})})})}function Lp({components:e,selectedComponent:t,hoveredComponent:n,onRemove:r,onHover:o}){if(!e||Object.keys(e).length===0)return De("div",{style:{color:"#9ca3af",fontSize:11},children:"No component patterns defined yet."});let i=new Set(Object.keys(e)),s=ci(i),l=Object.entries(e).sort(([a],[c])=>{var d,u;return((d=s.get(a))!=null?d:1/0)-((u=s.get(c))!=null?u:1/0)});return De(No,{children:l.map(([a,c])=>De(Ip,{name:a,value:c,selected:t===a,highlighted:n===a,onRemove:r,onHover:o},a))})}function Ta({bridgeUrl:e,modelRefreshKey:t,onMouseEnter:n,onMouseLeave:r,selectedComponent:o,hoveredComponent:i,onComponentHover:s,onSpacingTokenHover:l,onModifySpacingToken:a,onDeleteSpacingToken:c,onComponentAdded:d,onComponentRemoved:u}){let[p,g]=gn(void 0),[k,w]=gn(!0),[b,E]=gn(()=>{try{let H=localStorage.getItem(Sa);if(H==="patterns"||H==="principles"||H==="rules")return H}catch(H){}return"patterns"});po(()=>{xo(e).then(H=>{g(H),w(!1)})},[e,t]),po(()=>{try{localStorage.setItem(Sa,b)}catch(H){}},[b]),po(()=>{o&&(E("patterns"),xo(e).then(H=>{H&&g(H)}))},[o,e]);let B=Fr(H=>{g(U=>{if(!(U!=null&&U.components))return U;let S=U.components,{[H]:G}=S,X=Yn(S,[dr(H)]);return y(f({},U),{components:X})}),u==null||u(H)},[u]),L=p==null?void 0:p.components,T=p==null?void 0:p.rules,v=L&&Object.keys(L).length>0,O=T&&T.length>0;return Gt("div",{style:fp,onMouseEnter:n,onMouseLeave:r,children:[Gt("div",{style:{display:"flex",alignItems:"center",gap:6,fontWeight:700,fontSize:13,marginBottom:6},children:[De("span",{children:"Model"}),De("code",{style:{fontSize:10,fontWeight:500,backgroundColor:"rgba(0,0,0,0.06)",padding:"1px 4px",color:"#6b7280"},children:"M"})]}),De("div",{style:{display:"flex",gap:12,marginBottom:10,borderBottom:"1px solid rgba(0,0,0,0.08)",paddingBottom:6},children:["patterns","principles","rules"].map(H=>De("button",{type:"button",style:b===H?gp:Ca,onClick:()=>E(H),children:H.charAt(0).toUpperCase()+H.slice(1)},H))}),De("div",{style:{flex:1,overflowY:"auto",minHeight:0},children:b==="principles"?De(Mp,{}):k?De("div",{style:{color:"#9ca3af",fontSize:11},children:"Loading..."}):!p||!v&&!O?De("div",{style:{color:"#9ca3af",lineHeight:1.5},children:"No design model yet. Pattern-scoped annotations will build one automatically."}):Gt(No,{children:[b==="patterns"&&De(Lp,{components:L,selectedComponent:o,hoveredComponent:i,onRemove:B,onHover:s}),b==="rules"&&De(Tp,{rules:T})]})})]})}import{jsx as Ho}from"react/jsx-runtime";var Ap="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",Pp="M60.8734,57.2556v-14.9432c0-1.2586.4722-2.2029,1.5728-2.8314l30.0443-17.3023c4.0899-2.3593,8.9662-3.4599,13.9988-3.4599,18.8759,0,30.8307,14.6289,30.8307,30.2006,0,1.1007,0,2.3593-.158,3.6178l-31.1446-18.2467c-1.8872-1.1006-3.7754-1.1006-5.6629,0l-39.4812,22.9651ZM131.0276,115.4561v-35.7074c0-2.2028-.9446-3.7756-2.8318-4.8763l-39.481-22.9651,12.8982-7.3934c1.1007-.6285,2.0453-.6285,3.1458,0l30.0441,17.3024c8.6523,5.0341,14.4708,15.7296,14.4708,26.1107,0,11.9539-7.0769,22.965-18.2461,27.527v.0021ZM51.593,83.9964l-12.8982-7.5497c-1.1007-.6285-1.5728-1.5728-1.5728-2.8314v-34.6048c0-16.8303,12.8982-29.5722,30.3585-29.5722,6.607,0,12.7403,2.2029,17.9324,6.1349l-30.987,17.9324c-1.8871,1.1007-2.8314,2.6735-2.8314,4.8764v45.6159l-.0014-.0015ZM79.3562,100.0403l-18.4829-10.3811v-22.0209l18.4829-10.3811,18.4812,10.3811v22.0209l-18.4812,10.3811ZM91.2319,147.8591c-6.607,0-12.7403-2.2031-17.9324-6.1344l30.9866-17.9333c1.8872-1.1005,2.8318-2.6728,2.8318-4.8759v-45.616l13.0564,7.5498c1.1005.6285,1.5723,1.5728,1.5723,2.8314v34.6051c0,16.8297-13.0564,29.5723-30.5147,29.5723v.001ZM53.9522,112.7822l-30.0443-17.3024c-8.652-5.0343-14.471-15.7296-14.471-26.1107,0-12.1119,7.2356-22.9652,18.403-27.5272v35.8634c0,2.2028.9443,3.7756,2.8314,4.8763l39.3248,22.8068-12.8982,7.3938c-1.1007.6287-2.045.6287-3.1456,0ZM52.2229,138.5791c-17.7745,0-30.8306-13.3713-30.8306-29.8871,0-1.2585.1578-2.5169.3143-3.7754l30.987,17.9323c1.8871,1.1005,3.7757,1.1005,5.6628,0l39.4811-22.807v14.9435c0,1.2585-.4721,2.2021-1.5728,2.8308l-30.0443,17.3025c-4.0898,2.359-8.9662,3.4605-13.9989,3.4605h.0014ZM91.2319,157.296c19.0327,0,34.9188-13.5272,38.5383-31.4594,17.6164-4.562,28.9425-21.0779,28.9425-37.908,0-11.0112-4.719-21.7066-13.2133-29.4143.7867-3.3035,1.2595-6.607,1.2595-9.909,0-22.4929-18.2471-39.3247-39.3251-39.3247-4.2461,0-8.3363.6285-12.4262,2.045-7.0792-6.9213-16.8318-11.3254-27.5271-11.3254-19.0331,0-34.9191,13.5268-38.5384,31.4591C11.3255,36.0212,0,52.5373,0,69.3675c0,11.0112,4.7184,21.7065,13.2125,29.4142-.7865,3.3035-1.2586,6.6067-1.2586,9.9092,0,22.4923,18.2466,39.3241,39.3248,39.3241,4.2462,0,8.3362-.6277,12.426-2.0441,7.0776,6.921,16.8302,11.3251,27.5271,11.3251Z";function Ki({size:e=16,style:t}){return Ho("svg",{width:e,height:e,viewBox:"0 0 1200 1200",fill:"currentColor",stroke:"none",style:f({flexShrink:0},t),children:Ho("path",{d:Ap})})}function qi({size:e=16,style:t}){return Ho("svg",{width:e,height:e,viewBox:"0 0 158.7128 157.296",fill:"currentColor",stroke:"none",style:f({flexShrink:0},t),children:Ho("path",{d:Pp})})}function Zi({provider:e,size:t=16,style:n}){return e==="codex"?Ho(qi,{size:t,style:n}):Ho(Ki,{size:t,style:n})}var Qo=[{id:"claude-opus-4-6",label:"Opus 4.6"},{id:"claude-sonnet-4-6",label:"Sonn 4.6"}],er=[{id:"gpt-5.3-codex",label:"Codex 5.3"},{id:"gpt-5.3-codex-spark",label:"Spark 5.3"},{id:"gpt-5.1-codex-mini",label:"Mini 5.1"}];var Bp=[...Qo,...er];function Qi(e,t){if(!e)return t==="codex"?"Codex":"Claude Code";let n=Bp.find(r=>r.id===e);return n?n.label:e.replace(/-\d{8,}$/,"")}import{jsx as Ia}from"react/jsx-runtime";var Fn={iconDefault:"#1f2937",iconActive:"#1f2937",bgActive:"#dedede",bgHover:"#e2e2e2",separator:"#e5e7eb"};function _n({children:e,active:t,siblingActive:n,disabled:r,onClick:o,title:i}){let s=()=>r?.4:n&&!t?.5:1,l={position:"relative",display:"flex",alignItems:"center",justifyContent:"center",width:32,height:32,borderRadius:0,border:"none",cursor:r?"default":"pointer",transition:"background-color 150ms ease, color 150ms ease, transform 100ms ease, opacity 150ms ease",backgroundColor:t?Fn.bgActive:"transparent",color:t?Fn.iconActive:Fn.iconDefault,opacity:s()};return Ia("button",{type:"button",onClick:r?void 0:o,title:i,disabled:r,style:l,onMouseEnter:a=>{r||(a.currentTarget.style.opacity="1",t||(a.currentTarget.style.backgroundColor=Fn.bgHover))},onMouseLeave:a=>{r||(a.currentTarget.style.opacity=String(s()),t||(a.currentTarget.style.backgroundColor="transparent"))},onMouseDown:a=>{r||(a.currentTarget.style.transform="scale(0.95)")},onMouseUp:a=>{r||(a.currentTarget.style.transform="scale(1)")},children:e})}function es(){return Ia("div",{style:{width:1,height:20,backgroundColor:"rgba(0, 0, 0, 0.05)",margin:"0 8px"}})}import{Fragment as fo,jsx as re,jsxs as St}from"react/jsx-runtime";var go=[{type:"rectangle",icon:zp,label:"Rectangle",shortcut:"R"},{type:"circle",icon:Op,label:"Oval",shortcut:"O"},{type:"line",icon:_p,label:"Line",shortcut:"L"},{type:"freehand",icon:Fp,label:"Pen",shortcut:"P"}],Yp=new Set(go.map(e=>e.type));function jp(e,t,n,r,o,i,s,l){let a=(e-o)*(r-i)-(n-o)*(t-i),c=(e-s)*(i-l)-(o-s)*(t-l),d=(e-n)*(l-r)-(s-n)*(t-r),u=a<0||c<0||d<0,p=a>0||c>0||d>0;return!(u&&p)}function Gp(){let e=window.innerWidth-16,t=e-326,n=window.innerHeight-80;return{left:t,right:e,y:n}}var Vp=[{type:"text",icon:Wp,label:"Text",shortcut:"T"}],Ra={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 ac=Object.defineProperty,cc=Object.defineProperties;var dc=Object.getOwnPropertyDescriptors;var cr=Object.getOwnPropertySymbols;var Ds=Object.prototype.hasOwnProperty,Ns=Object.prototype.propertyIsEnumerable;var Os=(e,t,n)=>t in e?ac(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,f=(e,t)=>{for(var n in t||(t={}))Ds.call(t,n)&&Os(e,n,t[n]);if(cr)for(var n of cr(t))Ns.call(t,n)&&Os(e,n,t[n]);return e},y=(e,t)=>cc(e,dc(t));var dr=e=>typeof e=="symbol"?e:e+"",zn=(e,t)=>{var n={};for(var r in e)Ds.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(e!=null&&cr)for(var r of cr(e))t.indexOf(r)<0&&Ns.call(e,r)&&(n[r]=e[r]);return n};import{createContext as Gf,useCallback as jt,useContext as Vf,useEffect as Bt,useMemo as _o,useRef as Ut,useState as Xt}from"react";import{useCallback as Vs,useEffect as uc,useSyncExternalStore as pc}from"react";var Tn="http://localhost:1111";function Mn(e,t={},n=15e3){let r=new AbortController;t.signal&&t.signal.addEventListener("abort",()=>r.abort());let o=setTimeout(()=>r.abort(),n);return fetch(e,y(f({},t),{signal:r.signal})).finally(()=>clearTimeout(o))}async function Fs(e=Tn){try{let t=await Mn(`${e}/capabilities`,{},5e3);return t.ok?await t.json():null}catch(t){return null}}async function bo(e=Tn){try{let t=new AbortController,n=setTimeout(()=>t.abort(),2e3),r=await fetch(`${e}/status`,{signal:t.signal});return clearTimeout(n),r.ok?await r.json():null}catch(t){return null}}async function Hs(e){try{let t=new AbortController,n=setTimeout(()=>t.abort(),500),r=await fetch(`http://localhost:${e}/status`,{signal:t.signal});return clearTimeout(n),r.ok?await r.json():null}catch(t){return null}}async function _s(e){if(e&&e!=="http://localhost:1111")try{let c=new URL(e);return{url:e,port:parseInt(c.port,10)||1111}}catch(c){return null}let o=typeof window!="undefined"?window.location.origin:null,i=await Hs(1111);if(i&&i.devOrigin&&o&&i.devOrigin===o)return{url:"http://localhost:1111",port:1111};let s=Array.from({length:8},(c,d)=>{let u=1112+d;return Hs(u).then(p=>p?{status:p,port:u}:null)}),l=(await Promise.all(s)).filter(c=>c!==null),a=[];i&&a.push({port:1111,devOrigin:i.devOrigin});for(let c of l)a.push({port:c.port,devOrigin:c.status.devOrigin});if(o){let c=a.find(d=>d.devOrigin===o);if(c)return{url:`http://localhost:${c.port}`,port:c.port}}return a.length===1?{url:`http://localhost:${a[0].port}`,port:a[0].port}:i?{url:"http://localhost:1111",port:1111}:a.length>0?{url:`http://localhost:${a[0].port}`,port:a[0].port}:null}async function zs(e,t,n=Tn,r,o,i,s,l){let a=new FormData;if(a.append("screenshot",e,"screenshot.png"),a.append("feedback",t),r&&a.append("color",r),o&&a.append("provider",o),i&&a.append("model",i),l&&a.append("sourceId",l),s)for(let[d,u]of s)for(let p=0;p<u.length;p++)a.append(`image-${d}-${p}`,u[p],`image-${d}-${p}.png`);let c=await Mn(`${n}/send`,{method:"POST",body:a},3e4);if(!c.ok){let d=await c.text();throw new Error(`Bridge returned ${c.status}: ${d}`)}return c.json()}async function $s(e=Tn,t){try{let n=await Mn(`${e}/mcp/install`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(t?{serverUrl:t}:{})},15e3);return n.ok?await n.json():null}catch(n){return null}}async function Ws(e,t=Tn){let n=await Mn(`${t}/model/component`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({name:e})},1e4);if(!n.ok){let r=await n.text();throw new Error(`Bridge returned ${n.status}: ${r}`)}return n.json()}async function Ys(e,t=Tn){let n=await Mn(`${t}/model/component`,{method:"DELETE",headers:{"Content-Type":"application/json"},body:JSON.stringify({name:e})},1e4);if(!n.ok){let r=await n.text();throw new Error(`Bridge returned ${n.status}: ${r}`)}return n.json()}async function Ur(e,t,n=Tn){let r=await Mn(`${n}/model/token`,{method:"PATCH",headers:{"Content-Type":"application/json"},body:JSON.stringify({path:e,value:t})},1e4);if(!r.ok){let o=await r.text();throw new Error(`Bridge returned ${r.status}: ${o}`)}return r.json()}async function js(e,t=Tn){let n=await Mn(`${t}/model/token`,{method:"DELETE",headers:{"Content-Type":"application/json"},body:JSON.stringify({path:e})},1e4);if(!n.ok){let r=await n.text();throw new Error(`Bridge returned ${n.status}: ${r}`)}return n.json()}async function xo(e=Tn){var t;try{let n=await Mn(`${e}/model`,{},5e3);return n.ok&&(t=(await n.json()).model)!=null?t:null}catch(n){return null}}async function Gs(e,t,n=Tn,r,o,i,s,l){let a;if(s&&s.length>0){let c=new FormData,d=new Blob([new Uint8Array([137,80,78,71,13,10,26,10,0,0,0,13,73,72,68,82,0,0,0,1,0,0,0,1,8,6,0,0,0,31,21,196,137,0,0,0,10,73,68,65,84,120,156,98,0,0,0,2,0,1,229,39,222,252,0,0,0,0,73,69,78,68,174,66,96,130])],{type:"image/png"});c.append("screenshot",d,"screenshot.png"),c.append("feedback",JSON.stringify({threadId:e,reply:t,color:r,provider:o,model:i,sourceId:l}));for(let u=0;u<s.length;u++)c.append(`image-reply-${u}`,s[u],`reply-image-${u}.png`);a=await Mn(`${n}/reply`,{method:"POST",body:c},3e4)}else a=await Mn(`${n}/reply`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({threadId:e,reply:t,color:r,provider:o,model:i,sourceId:l})},3e4);if(!a.ok){let c=await a.text();throw new Error(`Bridge returned ${a.status}: ${c}`)}return a.json()}var pr={};var eo=typeof pr!="undefined"?pr.hot:void 0,Xs,Js,Kr=(Js=(Xs=eo==null?void 0:eo.data)==null?void 0:Xs.sourceId)!=null?Js:typeof crypto!="undefined"&&typeof crypto.randomUUID=="function"?crypto.randomUUID():Math.random().toString(36).slice(2);eo!=null&&eo.data&&(eo.data.sourceId=Kr);function qr(){return Kr}var to=typeof pr!="undefined"?pr.hot:void 0,zt=to==null?void 0:to.data,fc={isConnected:!1,status:"disconnected",jobResponses:{},jobThinking:{},activeJobIds:[],currentResponse:"",currentThinking:"",events:[],activeJobId:null,lastCompletedJobId:null,lastResponseText:null,lastThreadId:null,lastErrorByJob:{},pendingQuestions:[],incrementalResolutions:[],capabilitiesVersion:0},Ks,Yo=(Ks=zt==null?void 0:zt.store)!=null?Ks:f({},fc),qs,ur=(qs=zt==null?void 0:zt.listeners)!=null?qs:new Set,Zs,Zn=(Zs=zt==null?void 0:zt.activeEs)!=null?Zs:null,Qs,Xr=(Qs=zt==null?void 0:zt.activeBridgeUrl)!=null?Qs:null,qn=null,el,Jr=(el=zt==null?void 0:zt.connectionGeneration)!=null?el:0;to!=null&&to.data&&Object.defineProperties(to.data,{store:{get:()=>Yo,configurable:!0},listeners:{get:()=>ur,configurable:!0},activeEs:{get:()=>Zn,configurable:!0},activeBridgeUrl:{get:()=>Xr,configurable:!0},connectionGeneration:{get:()=>Jr,configurable:!0},discoveredBridgeUrl:{get:()=>Qn,configurable:!0}});var tl,Qn=(tl=zt==null?void 0:zt.discoveredBridgeUrl)!=null?tl:null,vo=null;async function gc(e){return e&&e!=="http://localhost:1111"?(Qn=e,e):Qn||vo||(vo=_s(e).then(n=>{var r;return Qn=(r=n==null?void 0:n.url)!=null?r:null,vo=null,Qn}).catch(()=>(vo=null,null)),vo)}function nl(){return Qn}function Us(){return Yo}function mc(e){return ur.add(e),()=>{ur.delete(e)}}function on(e){Yo=e(Yo);for(let t of ur)t()}function ol(e){if(Zn&&Zn.readyState!==EventSource.CLOSED&&Xr===e)return;Zn&&(Zn.close(),Zn=null),qn&&(clearTimeout(qn),qn=null),Xr=e;let t=++Jr,n=new EventSource(`${e}/events?sourceId=${Kr}`);Zn=n;let r=()=>t!==Jr;n.addEventListener("connected",()=>{r()||bo(e).then(o=>{var d,u;if(r())return;let i=(d=o==null?void 0:o.activeJobs)!=null?d:o!=null&&o.activeJob?[o.activeJob]:[],s=new Set(i.map(p=>p.id)),l=(u=o==null?void 0:o.recentJobs)!=null?u:[],a=new Map(l.map(p=>[p.id,p])),c=i.length>0;on(p=>{let g=f({},p.lastErrorByJob),M=p.activeJobIds.filter(b=>!s.has(b));for(let b of M){let E=a.get(b);(E==null?void 0:E.status)==="error"&&E.error&&(g[b]=E.error)}let C=p.activeJobIds.filter(b=>s.has(b));for(let b of s)C.includes(b)||C.push(b);return y(f({},p),{isConnected:!0,status:c?"streaming":M.length>0||p.status==="disconnected"?"idle":p.status,activeJobId:c?i[i.length-1].id:C.length>0?C[C.length-1]:null,activeJobIds:C,lastErrorByJob:g,lastCompletedJobId:M.length>0?M[M.length-1]:p.lastCompletedJobId})})})}),n.addEventListener("job_started",o=>{if(r())return;let i=JSON.parse(o.data),s=i.jobId;on(l=>y(f({},l),{status:"streaming",activeJobId:s,activeJobIds:[...l.activeJobIds,s],jobResponses:y(f({},l.jobResponses),{[s]:""}),jobThinking:y(f({},l.jobThinking),{[s]:""}),currentResponse:"",currentThinking:"",lastResponseText:null,lastThreadId:null,events:[...l.events,{type:"job_started",data:i,timestamp:Date.now()}]}))}),n.addEventListener("delta",o=>{if(r())return;let i=JSON.parse(o.data),s=i.jobId,l=i.text||"";on(a=>y(f({},a),{jobResponses:s?y(f({},a.jobResponses),{[s]:(a.jobResponses[s]||"")+l}):a.jobResponses,currentResponse:!s||s===a.activeJobId?a.currentResponse+l:a.currentResponse,events:[...a.events,{type:"delta",data:i,timestamp:Date.now()}]}))}),n.addEventListener("thinking",o=>{if(r())return;let i=JSON.parse(o.data),s=i.jobId,l=i.text||"";on(a=>y(f({},a),{jobThinking:s?y(f({},a.jobThinking),{[s]:(a.jobThinking[s]||"")+l}):a.jobThinking,currentThinking:!s||s===a.activeJobId?a.currentThinking+l:a.currentThinking,events:[...a.events,{type:"thinking",data:i,timestamp:Date.now()}]}))}),n.addEventListener("tool_use",o=>{if(r())return;let i=JSON.parse(o.data);on(s=>y(f({},s),{events:[...s.events,{type:"tool_use",data:i,timestamp:Date.now()}]}))}),n.addEventListener("done",o=>{if(r())return;let i=JSON.parse(o.data),s=i.jobId;on(l=>{var g;let a=s?l.activeJobIds.filter(M=>M!==s):l.activeJobIds,c=f({},l.jobResponses),d=f({},l.jobThinking),u=s?c[s]:void 0;s&&(delete c[s],delete d[s]);let p=s===l.activeJobId?a.length>0?a[a.length-1]:null:l.activeJobId;return y(f(y(f({},l),{activeJobIds:a,activeJobId:p,jobResponses:c,jobThinking:d,lastCompletedJobId:s!=null?s:l.activeJobId,lastResponseText:u||l.currentResponse||i.responseText||null,lastThreadId:(g=i.threadId)!=null?g:null}),s===l.activeJobId?{currentResponse:p&&c[p]||"",currentThinking:p&&d[p]||""}:{}),{events:[...l.events,{type:"done",data:i,timestamp:Date.now()}]})})}),n.addEventListener("question",o=>{if(r())return;let i=JSON.parse(o.data);on(s=>y(f({},s),{pendingQuestions:[...s.pendingQuestions,{jobId:i.jobId,threadId:i.threadId,question:i.question,annotationIds:i.annotationIds,timestamp:Date.now()}],events:[...s.events,{type:"question",data:i,timestamp:Date.now()}]}))}),n.addEventListener("capabilities_changed",()=>{r()||on(o=>y(f({},o),{capabilitiesVersion:o.capabilitiesVersion+1}))}),n.addEventListener("queue_drained",()=>{r()||on(o=>y(f({},o),{status:o.status==="error"?"error":"idle",activeJobId:null,activeJobIds:[],currentResponse:"",currentThinking:"",jobResponses:{},jobThinking:{},lastErrorByJob:{},incrementalResolutions:[]}))}),n.addEventListener("error",o=>{var i,s;if(!r()){if(n.readyState===EventSource.CLOSED)on(l=>y(f({},l),{isConnected:!1,status:"disconnected"})),qn&&(clearTimeout(qn),qn=null),qn=setTimeout(()=>{bo(e).then(l=>{l&&ol(e)})},5e3);else if(o instanceof MessageEvent){let l=JSON.parse(o.data),a=(i=l.jobId)!=null?i:null,c=(s=l.message)!=null?s:"";on(d=>{let u=a?d.activeJobIds.filter(g=>g!==a):d.activeJobIds,p=u.length>0?d.status:"error";return y(f({},d),{status:p,activeJobIds:u,lastCompletedJobId:a!=null?a:d.activeJobId,lastErrorByJob:a&&c?y(f({},d.lastErrorByJob),{[a]:c}):d.lastErrorByJob,events:[...d.events,{type:"error",data:l,timestamp:Date.now()}]})})}}}),n.onerror=()=>{r()||n.readyState===EventSource.CLOSED&&on(o=>y(f({},o),{isConnected:!1,status:"disconnected"}))}}function rl(e="http://localhost:1111"){let t=pc(mc,Us,Us);uc(()=>{gc(e).then(o=>{o&&bo(o).then(i=>{i&&ol(o)})})},[e]);let n=Vs(()=>{on(()=>y(f({},Yo),{events:[],currentResponse:"",currentThinking:"",jobResponses:{},jobThinking:{},lastResponseText:null,lastThreadId:null,lastErrorByJob:{},incrementalResolutions:[]}))},[]),r=Vs(o=>{on(i=>y(f({},i),{pendingQuestions:i.pendingQuestions.filter(s=>s.threadId!==o)}))},[]);return y(f({},t),{clearEvents:n,dismissQuestion:r})}import{useEffect as hc,useReducer as yc}from"react";var bc={isAnnotating:!1,activeTool:"inspector",activeColor:"#ff0000",strokeWidth:3,annotations:[],undoStack:[],redoStack:[],currentPath:[],selectedAnnotationIds:[],lastSelectedId:null,inspectedElement:null,styleModifications:[],spacingTokenChanges:[],spacingTokenMods:[]};function fr(){return Math.random().toString(36).substring(2,9)}function il(e){return e.status?e:e.captured?y(f({},e),{status:"in_flight"}):y(f({},e),{status:"pending"})}function Qt(e){return y(f({},e),{undoStack:[...e.undoStack,{annotations:e.annotations,styleModifications:e.styleModifications,spacingTokenMods:e.spacingTokenMods}],redoStack:[]})}function xc(e,t){return y(f({},e),{isAnnotating:t})}function vc(e,t){return y(f({},e),{activeTool:t,inspectedElement:null})}function Sc(e,t){return y(f({},e),{activeColor:t})}function wc(e,t){return y(f({},e),{strokeWidth:t})}function Cc(e,t){return y(f({},e),{currentPath:[t]})}function Ec(e,t){return y(f({},e),{currentPath:[...e.currentPath,t]})}function kc(e){return y(f({},e),{currentPath:[]})}function Mc(e,t){if(e.currentPath.length<2&&e.activeTool!=="text")return y(f({},e),{currentPath:[]});let n={id:fr(),type:e.activeTool,points:e.currentPath,color:e.activeColor,strokeWidth:e.strokeWidth,timestamp:Date.now(),status:"pending",groupId:t==null?void 0:t.groupId,elements:t==null?void 0:t.elements},r=Qt(e);return y(f({},r),{annotations:[...e.annotations,n],currentPath:[]})}function Tc(e,t){var o;let n=f({id:(o=t.id)!=null?o:fr(),type:"text",points:[t.point],text:t.text,fontSize:t.fontSize||12,color:e.activeColor,strokeWidth:e.strokeWidth,timestamp:Date.now(),status:"pending",groupId:t.groupId,linkedSelector:t.linkedSelector,linkedAnchor:t.linkedAnchor,elements:t.elements},t.imageCount?{imageCount:t.imageCount}:{}),r=t.groupId?e:Qt(e);return y(f({},r),{annotations:[...e.annotations,n]})}function Ic(e,t){let n=Qt(e);return y(f({},n),{annotations:e.annotations.map(r=>r.id===t.id?f(y(f({},r),{text:t.text}),t.imageCount!=null?{imageCount:t.imageCount}:{}):r)})}function Rc(e,t){return y(f({},e),{annotations:e.annotations.map(n=>n.id===t.id?y(f({},n),{fontSize:Math.max(12,Math.min(72,t.fontSize))}):n)})}function Lc(e,t){let n=Qt(e),r=e.annotations.find(i=>i.id===t.id),o=r==null?void 0:r.groupId;return y(f({},n),{annotations:e.annotations.filter(i=>i.id!==t.id&&!(o&&i.groupId===o))})}function Ac(e,t){let n=t.saveUndo?Qt(e):e,r=e.annotations.find(i=>i.id===t.id),o=r==null?void 0:r.groupId;return y(f({},n),{annotations:e.annotations.map(i=>{if(!(i.id===t.id||o&&i.groupId===o))return i;let l=t.delta.x,a=t.delta.y;return y(f({},i),{points:i.points.map(c=>({x:c.x+l,y:c.y+a}))})})})}function Pc(e,t){let n=t.saveUndo?Qt(e):e,r=e.annotations.find(s=>s.id===t.id);if(!r||r.type==="text"||r.points.length<2)return e;let o=0,i=0;if(r.type==="rectangle"&&r.groupId){let s=t.points,l=Math.min(s[0].x,s[1].x),a=Math.max(s[0].y,s[1].y),c=r.points[0],d=r.points[r.points.length-1],u=Math.min(c.x,d.x),p=Math.max(c.y,d.y);o=l-u,i=a-p}return y(f({},n),{annotations:e.annotations.map(s=>s.id===t.id?y(f({},s),{points:t.points}):r.groupId&&s.groupId===r.groupId&&s.type==="text"?y(f({},s),{points:s.points.map(l=>({x:l.x+o,y:l.y+i}))}):s)})}function Bc(e,t){let n=Qt(e);return y(f({},n),{annotations:[...e.annotations,...t.annotations.map(il)]})}function Oc(e,t){let n=new Set,r=[];for(let o of t.annotations)n.has(o.id)||(n.add(o.id),r.push(il(o)));return y(f({},e),{annotations:r})}function Dc(e){if(e.undoStack.length===0)return e;let t=e.undoStack[e.undoStack.length-1];return y(f({},e),{annotations:(t==null?void 0:t.annotations)||[],styleModifications:(t==null?void 0:t.styleModifications)||[],spacingTokenMods:(t==null?void 0:t.spacingTokenMods)||[],undoStack:e.undoStack.slice(0,-1),redoStack:[...e.redoStack,{annotations:e.annotations,styleModifications:e.styleModifications,spacingTokenMods:e.spacingTokenMods}]})}function Nc(e){if(e.redoStack.length===0)return e;let t=e.redoStack[e.redoStack.length-1];return y(f({},e),{annotations:(t==null?void 0:t.annotations)||[],styleModifications:(t==null?void 0:t.styleModifications)||[],spacingTokenMods:(t==null?void 0:t.spacingTokenMods)||[],redoStack:e.redoStack.slice(0,-1),undoStack:[...e.undoStack,{annotations:e.annotations,styleModifications:e.styleModifications,spacingTokenMods:e.spacingTokenMods}]})}function Hc(e,t){let{id:n,addToSelection:r}=t;if(n===null)return y(f({},e),{selectedAnnotationIds:[],lastSelectedId:null});if(r)if(e.selectedAnnotationIds.includes(n)){let i=e.selectedAnnotationIds.filter(s=>s!==n);return y(f({},e),{selectedAnnotationIds:i,lastSelectedId:i.length>0?i[i.length-1]:null})}else return y(f({},e),{selectedAnnotationIds:[...e.selectedAnnotationIds,n],lastSelectedId:n});return y(f({},e),{selectedAnnotationIds:[n],lastSelectedId:n})}function Fc(e,t){let n=new Set;for(let r of e.selectedAnnotationIds){let o=e.annotations.find(i=>i.id===r);o!=null&&o.groupId&&n.add(o.groupId)}return y(f({},e),{annotations:e.annotations.map(r=>{let o=e.selectedAnnotationIds.includes(r.id),i=r.groupId&&n.has(r.groupId);return!o&&!i?r:y(f({},r),{color:t.color})})})}function _c(e){return y(f({},e),{annotations:e.annotations.map(t=>y(f({},t),{captured:!0,status:t.status==="pending"||!t.status?"in_flight":t.status})),styleModifications:e.styleModifications.map(t=>y(f({},t),{captured:!0})),spacingTokenChanges:e.spacingTokenChanges.map(t=>y(f({},t),{captured:!0}))})}function zc(e){return y(f({},e),{annotations:[],undoStack:[],redoStack:[],currentPath:[],selectedAnnotationIds:[],lastSelectedId:null,spacingTokenChanges:[],spacingTokenMods:[]})}function $c(e,t){return y(f({},e),{inspectedElement:t})}function Wc(e,t){let{selector:n,element:r,property:o,original:i,modified:s}=t,l=e.styleModifications.findIndex(a=>a.selector===n);if(i===s&&l<0)return e;if(l>=0){let a=e.styleModifications[l];if(a.captured){let g=Qt(e),M=g.styleModifications.map((C,b)=>b===l?y(f({},C),{changes:[{property:o,original:i,modified:s}],captured:!1}):C);return y(f({},g),{styleModifications:M})}let c=a.changes.findIndex(g=>g.property===o),d,u=e;if(c>=0){let g=a.changes[c];s===g.original?d=a.changes.filter((M,C)=>C!==c):d=a.changes.map((M,C)=>C===c?y(f({},M),{modified:s}):M)}else{if(i===s)return e;u=Qt(e),d=[...a.changes,{property:o,original:i,modified:s}]}if(d.length===0)return y(f({},u),{styleModifications:u.styleModifications.filter((g,M)=>M!==l)});let p=u.styleModifications.map((g,M)=>M===l?y(f({},g),{changes:d}):g);return y(f({},u),{styleModifications:p})}else{let a=Qt(e),c={selector:n,element:r,changes:[{property:o,original:i,modified:s}]};return y(f({},a),{styleModifications:[...a.styleModifications,c]})}}function Yc(e,t){let{selector:n,durableSelector:r,element:o,changes:i}=t,s=i.filter(c=>c.original!==c.modified);if(s.length===0)return e;let l=Qt(e),a=l.styleModifications.findIndex(c=>c.selector===n);if(a>=0){let c=l.styleModifications[a],d=c.captured?[]:[...c.changes];for(let u of s){let p=d.findIndex(g=>g.property===u.property);p>=0?u.modified===d[p].original?d=d.filter((g,M)=>M!==p):d=d.map((g,M)=>M===p?y(f({},g),{modified:u.modified}):g):d.push(u)}return d.length===0?y(f({},l),{styleModifications:l.styleModifications.filter((u,p)=>p!==a)}):y(f({},l),{styleModifications:l.styleModifications.map((u,p)=>p===a?y(f({},u),{changes:d,captured:!1}):u)})}else return y(f({},l),{styleModifications:[...l.styleModifications,{selector:n,durableSelector:r,element:o,changes:s}]})}function jc(e,t){let{selector:n,property:r}=t,o=Qt(e),i=o.styleModifications.map(s=>s.selector!==n?s:y(f({},s),{changes:s.changes.filter(l=>l.property!==r)})).filter(s=>s.changes.length>0);return y(f({},o),{styleModifications:i})}function Gc(e){if(e.styleModifications.length===0)return y(f({},e),{inspectedElement:null});let t=Qt(e);return y(f({},t),{styleModifications:[],inspectedElement:null})}function Vc(e,t){return y(f({},e),{styleModifications:t})}function Uc(e,t){let{updates:n}=t,r=new Map(n.map(o=>[o.id,o]));return y(f({},e),{annotations:e.annotations.map(o=>{let i=r.get(o.id);return i?f(y(f({},o),{points:[i.point,...o.points.slice(1)]}),i.linkedAnchor?{linkedAnchor:i.linkedAnchor}:{}):o})})}function Xc(e,t){let n=new Set(t.ids);return y(f({},e),{annotations:e.annotations.map(r=>n.has(r.id)?y(f({},r),{status:t.status}):r)})}function Jc(e,t){let n=new Set(t.ids),r=new Set;for(let o of e.annotations)n.has(o.id)&&o.groupId&&r.add(o.groupId);return y(f({},e),{annotations:e.annotations.map(o=>n.has(o.id)||o.groupId&&r.has(o.groupId)?y(f({},o),{threadId:t.threadId}):o)})}function Kc(e,t){let n=new Set(t.ids),r=new Set;for(let o of e.annotations)n.has(o.id)&&o.groupId&&r.add(o.groupId);return y(f({},e),{annotations:e.annotations.map(o=>n.has(o.id)||o.groupId&&r.has(o.groupId)?y(f({},o),{status:"waiting_input",question:t.question,threadId:t.threadId}):o)})}function qc(e,t){let n=new Map(t.resolutions.map(o=>[o.annotationId,o])),r=new Map;for(let o of e.annotations){let i=n.get(o.id);i&&o.groupId&&r.set(o.groupId,i)}return y(f({},e),{annotations:e.annotations.map(o=>{var s,l,a;let i=n.get(o.id)||(o.groupId?r.get(o.groupId):void 0);return i?y(f({},o),{status:i.status,resolutionSummary:i.summary,scope:(l=(s=i.finalScope)!=null?s:i.inferredScope)!=null?l:null,replyCount:((a=o.replyCount)!=null?a:0)+1,question:void 0,threadId:o.threadId||t.threadId}):o})})}function Zc(e,t){let{linkedSelectors:n,styleSelectors:r}=t,o=new Set(n),i=new Set(r),s=new Set,l=new Set;for(let p of e.annotations)p.linkedSelector&&o.has(p.linkedSelector)&&(s.add(p.id),p.groupId&&l.add(p.groupId));for(let p of e.annotations)p.groupId&&l.has(p.groupId)&&s.add(p.id);let a=e.annotations.filter(p=>!s.has(p.id)),c=e.styleModifications.filter(p=>!i.has(p.selector));if(a.length===e.annotations.length&&c.length===e.styleModifications.length)return e;let d=e.selectedAnnotationIds.filter(p=>!s.has(p)),u=e.inspectedElement&&i.has(e.inspectedElement.info.selector)?null:e.inspectedElement;return y(f({},e),{annotations:a,styleModifications:c,selectedAnnotationIds:d,lastSelectedId:d.length>0?d[d.length-1]:null,inspectedElement:u})}function Qc(e,t){let n=e.spacingTokenChanges.findIndex(r=>r.tokenPath===t.tokenPath);return n>=0?y(f({},e),{spacingTokenChanges:e.spacingTokenChanges.map((r,o)=>o===n?t:r)}):y(f({},e),{spacingTokenChanges:[...e.spacingTokenChanges,t]})}function ed(e,t){return y(f({},e),{spacingTokenChanges:t})}function td(e,t){let n=Qt(e),r=e.spacingTokenMods.findIndex(i=>i.tokenPath===t.tokenPath),o;if(r>=0){let i=e.spacingTokenMods[r],s=y(f({},t),{originalValue:i.originalValue,originalPx:i.originalPx});o=e.spacingTokenMods.map((l,a)=>a===r?s:l)}else o=[...e.spacingTokenMods,t];return y(f({},n),{spacingTokenMods:o})}function nd(e,t){let n=Qt(e),r=e.spacingTokenMods.findIndex(a=>a.tokenPath===t.tokenPath),o=r>=0?e.spacingTokenMods[r].originalValue:t.originalValue,i=r>=0?e.spacingTokenMods[r].originalPx:parseFloat(t.originalValue)||0,s={tokenPath:t.tokenPath,originalValue:o,currentValue:"__deleted__",targets:r>=0?e.spacingTokenMods[r].targets:[],originalPx:i,currentPx:0},l;return r>=0?l=e.spacingTokenMods.map((a,c)=>c===r?s:a):l=[...e.spacingTokenMods,s],y(f({},n),{spacingTokenMods:l})}var od={SET_ANNOTATING:xc,SET_TOOL:vc,SET_COLOR:Sc,SET_STROKE_WIDTH:wc,START_PATH:Cc,CONTINUE_PATH:Ec,CANCEL_PATH:kc,FINISH_PATH:Mc,ADD_TEXT:Tc,UPDATE_TEXT:Ic,UPDATE_TEXT_SIZE:Rc,DELETE_ANNOTATION:Lc,MOVE_ANNOTATION:Ac,RESIZE_ANNOTATION:Pc,PASTE_ANNOTATIONS:Bc,RESTORE_ANNOTATIONS:Oc,UNDO:Dc,REDO:Nc,SELECT_ANNOTATION:Hc,UPDATE_ANNOTATION_COLOR:Fc,MARK_CAPTURED:_c,CLEAR:zc,SELECT_ELEMENT:$c,MODIFY_STYLE:Wc,MODIFY_STYLES_BATCH:Yc,CLEAR_STYLE:jc,CLEAR_ALL_STYLES:Gc,RESTORE_STYLE_MODIFICATIONS:Vc,UPDATE_LINKED_POSITIONS:Uc,CLEANUP_ORPHANED:Zc,SET_ANNOTATION_STATUS:Xc,SET_ANNOTATION_THREAD:Jc,SET_ANNOTATION_QUESTION:Kc,APPLY_RESOLUTIONS:qc,ADD_SPACING_TOKEN_CHANGE:Qc,RESTORE_SPACING_TOKEN_CHANGES:ed,MODIFY_SPACING_TOKEN:td,DELETE_SPACING_TOKEN:nd};function rd(e,t){let n=od[t.type];return n?n(e,t.payload):e}function sl(){let[e,t]=yc(rd,bc);return hc(()=>{let n=r=>{(r.metaKey||r.ctrlKey)&&r.key==="z"&&(r.preventDefault(),r.shiftKey?t({type:"REDO"}):t({type:"UNDO"}))};return window.addEventListener("keydown",n),()=>window.removeEventListener("keydown",n)},[]),[e,t]}import{domToCanvas as id}from"modern-screenshot";function Zr(e){let t=document.createElement("canvas").getContext("2d");return t?(t.fillStyle=e,t.fillStyle):"#888888"}function Qr(e,t=[],n,r){let o=new Map,i=[];for(let l of e)if(l.groupId){let a=o.get(l.groupId)||[];a.push(l),o.set(l.groupId,a)}else i.push(l);let s=[];for(let[l,a]of o){let c=a.find(u=>u.type!=="text"),d=a.find(u=>u.type==="text");if(c){let u=c.linkedSelector||(d==null?void 0:d.linkedSelector),p=(d==null?void 0:d.imageCount)||c.imageCount;s.push(f(y(f({id:c.id,type:c.type,instruction:d==null?void 0:d.text},u?{linkedSelector:u}:{}),{elements:c.elements||[]}),p?{imageCount:p}:{}))}}for(let l of i)s.push(f(y(f({id:l.id,type:l.type,instruction:l.type==="text"?l.text:void 0},l.linkedSelector?{linkedSelector:l.linkedSelector}:{}),{elements:l.elements||[]}),l.imageCount?{imageCount:l.imageCount}:{}));return f(f({timestamp:new Date().toISOString(),url:window.location.href,viewport:{width:window.innerWidth,height:window.innerHeight},scrollPosition:{x:window.scrollX,y:window.scrollY},annotations:s,styleModifications:t},n?{inspectedElement:n}:{}),r&&r.length>0?{spacingTokenChanges:r}:{})}function sd(e){if(!e.points||e.points.length===0)return null;let t=e.points.map(r=>r.x),n=e.points.map(r=>r.y);return{minX:Math.min(...t),minY:Math.min(...n),maxX:Math.max(...t),maxY:Math.max(...n)}}function ld(e,t){if(e.length===0)return[];let n=e.map(d=>({annotation:d,bounds:sd(d)})).filter(d=>d.bounds!==null);if(n.length===0)return[];n.sort((d,u)=>d.bounds.minY-u.bounds.minY);let r=Math.min(...n.map(d=>d.bounds.minY)),o=Math.max(...n.map(d=>d.bounds.maxY));if(o-r<=t){let d=(r+o)/2,u=Math.max(0,d-t/2);return[{top:u,bottom:u+t,annotations:e}]}let i=[],s=50,l=Math.max(0,r-s),a=[],c=l;for(let{annotation:d,bounds:u}of n){let p=u.maxY+s;if(p-l<=t)a.push(d),c=Math.max(c,p);else{if(a.length>0){let g=(l+c)/2,M=Math.max(0,g-t/2);i.push({top:M,bottom:M+t,annotations:a})}l=Math.max(0,u.minY-s),a=[d],c=u.maxY+s}}if(a.length>0){let d=(l+c)/2,u=Math.max(0,d-t/2);i.push({top:u,bottom:u+t,annotations:a})}return i}function ad(e,t,n,r){e.save(),e.scale(r,r);for(let o of t){let i=o.points.map(s=>({x:s.x,y:s.y-n}));switch(e.strokeStyle=o.color,e.fillStyle=o.color,e.lineWidth=o.strokeWidth,e.lineCap="round",e.lineJoin="round",o.type){case"freehand":if(i.length<2)break;e.beginPath(),e.moveTo(i[0].x,i[0].y);for(let s=1;s<i.length;s++)e.lineTo(i[s].x,i[s].y);e.stroke();break;case"line":if(i.length<2)break;e.beginPath(),e.moveTo(i[0].x,i[0].y),e.lineTo(i[i.length-1].x,i[i.length-1].y),e.stroke();break;case"rectangle":{if(i.length<2)break;let s=i[0],l=i[i.length-1],a=Math.min(s.x,l.x),c=Math.min(s.y,l.y),d=Math.abs(l.x-s.x),u=Math.abs(l.y-s.y);e.strokeRect(a,c,d,u);break}case"circle":{if(i.length<2)break;let s=i[0],l=i[i.length-1],a=(s.x+l.x)/2,c=(s.y+l.y)/2,d=Math.abs(l.x-s.x)/2,u=Math.abs(l.y-s.y)/2;e.beginPath(),e.ellipse(a,c,d,u,0,0,Math.PI*2),e.stroke();break}case"text":{if(!o.text||i.length<1)break;let s=i[0],l=o.fontSize||16;e.font=`${l}px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`,e.fillStyle=o.color;let c=(o.imageCount&&o.imageCount>0?`[${o.imageCount} image${o.imageCount>1?"s":""}] ${o.text}`:o.text).split(`
|
|
3
|
+
`),d=l*1.2,u=4,p=0;for(let g of c)p=Math.max(p,e.measureText(g).width);e.fillRect(s.x-u,s.y-u,p+u*2,c.length*d+u*2),e.fillStyle="#ffffff",c.forEach((g,M)=>{e.fillText(g,s.x,s.y+l+M*d)});break}}}e.restore()}async function ei(e,t,n=[]){try{let r=window.devicePixelRatio||1,o=window.innerWidth,i=window.innerHeight,s=n.filter(c=>{var d;return((d=c.status)!=null?d:"pending")==="pending"});console.log("[Screenshot] Starting capture with",s.length,"active annotations (filtered",n.length-s.length,"captured)");let l=ld(s,i);if(l.length===0){let c=await ll(e,[],window.scrollY,o,i,r);return c?[c]:[]}let a=[];for(let c=0;c<l.length;c++){let d=l[c],u=await ll(e,d.annotations,d.top,o,i,r);u?a.push(u):console.warn(`[Screenshot] Region ${c+1} failed to capture`)}return console.log("[Screenshot] Capture complete"),a}catch(r){return console.error("[Screenshot] Capture failed:",r),[]}}async function ll(e,t,n,r,o,i){try{let s=await id(e,{filter:c=>!(c instanceof HTMLElement&&(c.id==="devtools-canvas"||c.id==="devtools-toolbar"||c.id==="devtools-scrim"||c.dataset.devtools!==void 0)),scale:i,backgroundColor:"#ffffff",width:r,height:o,style:{transform:`translate(${-window.scrollX}px, ${-n}px)`}}),l=document.createElement("canvas");l.width=r*i,l.height=o*i;let a=l.getContext("2d");return a?(a.drawImage(s,0,0,r*i,o*i,0,0,r*i,o*i),ad(a,t,n,i),new Promise(c=>{l.toBlob(d=>c(d),"image/png")})):null}catch(s){return console.error("Region capture failed:",s),null}}async function ti(e){if(e.length===0)return null;if(e.length===1)return e[0];let t=await Promise.all(e.map(l=>new Promise((a,c)=>{let d=new Image;d.onload=()=>a(d),d.onerror=c,d.src=URL.createObjectURL(l)}))),n=t[0].width,r=t.reduce((l,a)=>l+a.height,0),o=document.createElement("canvas");o.width=n,o.height=r;let i=o.getContext("2d");if(!i)return null;let s=0;for(let l of t)i.drawImage(l,0,s),s+=l.height,URL.revokeObjectURL(l.src);return new Promise(l=>{o.toBlob(a=>l(a),"image/png")})}async function al(e,t,n){try{let r=Array.isArray(e)?e:[e];if(r.length===0)return!1;let o=await ti(r);if(!o)return!1;let i={"image/png":o},s=t&&t.length>0,l=n&&n.length>0;if(s||l){let a=t?t.filter(c=>{var d;return((d=c.status)!=null?d:"pending")==="pending"}):[];if(a.length>0||l){let c=Qr(a,n||[]),d=new Blob([JSON.stringify(c,null,2)],{type:"text/plain"});i["text/plain"]=d}}return await navigator.clipboard.write([new ClipboardItem(i)]),!0}catch(r){return console.warn("Clipboard write failed:",r),!1}}import{useCallback as Pt,useEffect as Vt,useMemo as Gi,useRef as kt,useState as st}from"react";import{useCallback as wo,useRef as dd}from"react";function ni(e,t,n,r){if(t.length<2)return;let o=t[0],i=t[t.length-1];if(!o||!i)return;let s=(o.x+i.x)/2,l=(o.y+i.y)/2,a=Math.abs(i.x-o.x)/2,c=Math.abs(i.y-o.y)/2;e.beginPath(),e.strokeStyle=n,e.lineWidth=r,e.ellipse(s,l,a,c,0,0,Math.PI*2),e.stroke()}function oi(e,t,n,r){if(t.length<2)return;let o=t[0],i=t[t.length-1];if(!(!o||!i)){e.beginPath(),e.strokeStyle=n,e.lineWidth=r,e.lineCap="round",e.lineJoin="round",e.moveTo(o.x,o.y);for(let s=1;s<t.length-1;s++){let l=t[s],a=t[s+1];if(!l||!a)continue;let c=(l.x+a.x)/2,d=(l.y+a.y)/2;e.quadraticCurveTo(l.x,l.y,c,d)}e.lineTo(i.x,i.y),e.stroke()}}function ri(e,t,n,r){if(t.length<2)return;let o=t[0],i=t[t.length-1];!o||!i||(e.beginPath(),e.strokeStyle=n,e.lineWidth=r,e.lineCap="round",e.moveTo(o.x,o.y),e.lineTo(i.x,i.y),e.stroke())}function ii(e,t,n,r){if(t.length<2)return;let o=t[0],i=t[t.length-1];if(!o||!i)return;let s=Math.min(o.x,i.x),l=Math.min(o.y,i.y),a=Math.abs(i.x-o.x),c=Math.abs(i.y-o.y);e.beginPath(),e.strokeStyle=n,e.lineWidth=r,e.lineCap="round",e.lineJoin="round",e.strokeRect(s,l,a,c)}var Ft='"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace';function cd(e,t,n){if(!t||e.measureText(t).width<=n)return[t];let r=t.split(/\s+/),o=[],i="";for(let s of r){let l=i?i+" "+s:s;i&&e.measureText(l).width>n?(o.push(i),i=s):i=l}return i&&o.push(i),o.length>0?o:[t]}function So(e){let t=window.innerWidth-e-16;if(t<400)return Math.max(60,t)}function no(e,t,n){let r=[];for(let o of t)r.push(...cd(e,o,n));return r}function cl(e,t,n,r,o=12,i,s){if(!n)return;let l=o*1.4,a=n.split(`
|
|
4
|
+
`),c=i!==void 0?[i+". "+(a[0]||""),...a.slice(1)]:a;e.font=`${o}px ${Ft}`,e.textBaseline="middle";let d=s!==void 0?Math.min(400,Math.max(60,window.innerWidth-s-16)):400,u=no(e,c,d),p=Math.min(d,Math.max(...u.map(E=>e.measureText(E).width))),g=u.length*l,M=c.length*l,C=g-M,b=t.y-C;e.fillStyle=r,e.fillRect(t.x-4,b-4,p+8,g+8),e.fillStyle="#ffffff",u.forEach((E,D)=>{e.fillText(E,t.x,b+D*l+l/2)})}var dl=11,si=4,ud=`600 ${dl}px system-ui, -apple-system, sans-serif`;function li(e,t,n){return e.map(r=>({x:r.x-t,y:r.y-n}))}function pd(e,t,n,r,o,i){let s=String(r);e.font=ud;let a=e.measureText(s).width+si*2,c=dl+si*2,d=t-a/2,u=n+i/2+2;e.fillStyle=o,e.fillRect(d,u,a,c),e.fillStyle="#ffffff",e.textBaseline="middle",e.fillText(s,d+si,u+c/2)}function fd(e,t){if(e.points.length<2&&e.type!=="text")return null;switch(e.type){case"rectangle":case"freehand":{let n,r;if(e.type==="freehand")n=Math.min(...e.points.map(o=>o.x)),r=Math.max(...e.points.map(o=>o.y));else{let o=e.points[0],i=e.points[e.points.length-1];n=Math.min(o.x,i.x),r=Math.max(o.y,i.y)}return{x:n,y:r}}case"circle":{let n=e.points[0],r=e.points[e.points.length-1],o=Math.min(n.x,r.x),i=(Math.min(n.y,r.y)+Math.max(n.y,r.y))/2;return{x:o,y:i}}case"line":{let n=e.points[0],r=e.points[e.points.length-1],o=n.y>r.y?n:r;return{x:o.x,y:o.y}}default:return null}}function ul(){let e=dd(null),t=wo(()=>{let l=e.current;if(!l)return;let a=l.getContext("2d");a&&a.clearRect(0,0,l.width,l.height)},[]),n=wo((l,a,c)=>{var M;let d=e.current;if(!d)return;let u=d.getContext("2d");if(!u)return;let g=((M=l.status)!=null?M:l.captured?"in_flight":"pending")==="pending"||c?l.color:"#999999";switch(l.type){case"freehand":oi(u,l.points,g,l.strokeWidth);break;case"line":ri(u,l.points,g,l.strokeWidth);break;case"rectangle":ii(u,l.points,g,l.strokeWidth);break;case"circle":ni(u,l.points,g,l.strokeWidth);break;case"text":l.text&&l.points[0]&&cl(u,l.points[0],l.text,g,l.fontSize,a,l.points[0].x);break}},[]),r=wo((l,a,c,d)=>{let u=e.current;if(!u||l.length<2)return;let p=u.getContext("2d");if(p)switch(a){case"freehand":oi(p,l,c,d);break;case"line":ri(p,l,c,d);break;case"rectangle":ii(p,l,c,d);break;case"circle":ni(p,l,c,d);break}},[]),o=wo((l,a)=>{let c=e.current;if(!c||l.points.length<2)return;let d=c.getContext("2d");if(d){if(d.fillStyle="#ffffff",d.strokeStyle=l.color,d.lineWidth=1.5,l.type==="line"){let u=l.points[0],p=l.points[l.points.length-1];[u,p].forEach(g=>{d.beginPath(),d.arc(g.x,g.y,a/2,0,Math.PI*2),d.fill(),d.stroke()});return}if(l.type==="circle"){let u=l.points[0],p=l.points[l.points.length-1],g=Math.min(u.x,p.x),M=Math.max(u.x,p.x),C=Math.min(u.y,p.y),b=Math.max(u.y,p.y),E=(g+M)/2,D=(C+b)/2;[{x:E,y:C},{x:E,y:b},{x:g,y:D},{x:M,y:D}].forEach(R=>{d.beginPath(),d.rect(R.x-a/2,R.y-a/2,a,a),d.fill(),d.stroke()});return}if(l.type==="rectangle"||l.type==="freehand"){let u,p,g,M;if(l.type==="freehand")u=Math.min(...l.points.map(b=>b.x)),p=Math.max(...l.points.map(b=>b.x)),g=Math.min(...l.points.map(b=>b.y)),M=Math.max(...l.points.map(b=>b.y));else{let b=l.points[0],E=l.points[l.points.length-1];u=Math.min(b.x,E.x),p=Math.max(b.x,E.x),g=Math.min(b.y,E.y),M=Math.max(b.y,E.y)}[{x:u,y:g},{x:p,y:g},{x:u,y:M},{x:p,y:M}].forEach(b=>{d.beginPath(),d.rect(b.x-a/2,b.y-a/2,a,a),d.fill(),d.stroke()})}}},[]),i=wo((l,a,c,d,u,p,g,M=0,C=0,b,E)=>{var D;if(t(),l.forEach(A=>{var K;let R=y(f({},A),{points:li(A.points,M,C)}),w=b==null?void 0:b.get(A.id),O=(K=E==null?void 0:E.has(A.id))!=null?K:!1;n(R,w,O)}),a.length>0){let A=li(a,M,C);r(A,c,d,u)}if(p&&p.length>0&&g){let A=e.current,R=A==null?void 0:A.getContext("2d");for(let w of p){let O=l.find(K=>K.id===w);if(O){let K=y(f({},O),{points:li(O.points,M,C)});if(o(K,g),R&&O.type!=="text"&&b&&!(O.groupId&&l.some($=>$.groupId===O.groupId&&$.type==="text"))){let $=b.get(O.id);if($!==void 0){let q=fd(K,g);if(q){let I=((D=O.status)!=null?D:O.captured?"in_flight":"pending")==="pending"?O.color:"#999999";pd(R,q.x,q.y,$,I,g)}}}}}}},[t,n,r,o]),s=wo(()=>{let l=e.current;if(!l)return;let a=window.devicePixelRatio||1;l.width=window.innerWidth*a,l.height=window.innerHeight*a;let c=l.getContext("2d");c&&c.scale(a,a)},[]);return{canvasRef:e,clearCanvas:t,drawAnnotation:n,drawCurrentPath:r,redrawAll:i,resizeCanvas:s}}import{useEffect as gd,useRef as md}from"react";function pl(){let e=md({shift:!1,cmd:!1});return gd(()=>{let t=o=>{o.key==="Shift"&&(e.current.shift=!0),(o.key==="Meta"||o.key==="Control")&&(e.current.cmd=!0)},n=o=>{o.key==="Shift"&&(e.current.shift=!1),(o.key==="Meta"||o.key==="Control")&&(e.current.cmd=!1)},r=()=>{e.current={shift:!1,cmd:!1}};return window.addEventListener("keydown",t,!0),window.addEventListener("keyup",n,!0),window.addEventListener("blur",r),()=>{window.removeEventListener("keydown",t,!0),window.removeEventListener("keyup",n,!0),window.removeEventListener("blur",r)}},[]),e}import{useEffect as hd}from"react";function fl(e,t,n,r,o){hd(()=>{let i=s=>{if(e){if(e.linkedSelector)return;s.preventDefault(),s.stopPropagation();let a=s.deltaY>0?-2:2;t(c=>c?y(f({},c),{fontSize:Math.max(12,Math.min(72,c.fontSize+a))}):null);return}if(!n)return;s.preventDefault();let l=r.find(a=>a.id===n);if(l&&l.type==="text"&&!l.linkedSelector){let a=l.fontSize||12,c=s.deltaY>0?-2:2;o({type:"UPDATE_TEXT_SIZE",payload:{id:n,fontSize:a+c}})}};return window.addEventListener("wheel",i,{passive:!1}),()=>{window.removeEventListener("wheel",i)}},[n,e,r,o,t])}import{useCallback as Tl,useEffect as Er,useRef as Il,useState as Ko}from"react";function gr(e){let t=Object.keys(e).find(o=>o.startsWith("__reactFiber$")||o.startsWith("__reactInternalInstance$"));if(!t)return null;let n=e[t],r=[];for(;n;){let o=n.type,i=(o==null?void 0:o.displayName)||(o==null?void 0:o.name);i&&typeof i=="string"&&/^[A-Z]/.test(i)&&!i.startsWith("_")&&i!=="Fragment"&&r.unshift(i),n=n.return}return r.length>0?{name:r[r.length-1],path:r}:null}function ai(e){let t=Object.keys(e).find(o=>o.startsWith("__reactFiber$")||o.startsWith("__reactInternalInstance$"));if(!t)return[];let n=e[t],r=[];for(;n;){let o=n.type,i=typeof o=="function"||typeof o=="object"?(o==null?void 0:o.displayName)||(o==null?void 0:o.name):null;i&&typeof i=="string"&&/^[A-Z]/.test(i)&&!i.startsWith("_")&&i!=="Fragment"&&r.push({name:i,fiber:n}),n=n.return}return r.reverse(),r}function mr(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 gl(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 dn(e){if(e.id&&!e.id.startsWith("radix-")&&!e.id.startsWith(":"))return`#${CSS.escape(e.id)}`;let t=[],n=e;for(;n&&n!==document.documentElement;){let r=n.tagName.toLowerCase();if(n.id&&!n.id.startsWith("radix-")&&!n.id.startsWith(":")){t.unshift(`#${CSS.escape(n.id)}`);break}let o=Array.from(n.classList).filter(s=>!s.startsWith("_")&&s.length<30).slice(0,2);o.length>0&&(r+="."+o.map(s=>CSS.escape(s)).join("."));let i=n.parentElement;if(i){let s=Array.from(i.children).filter(l=>l.tagName===n.tagName);if(s.length>1){let l=s.indexOf(n)+1;r+=`:nth-of-type(${l})`}}t.unshift(r),n=i}return t.join(" > ")}function qt(e){try{return document.querySelector(e)}catch(t){return null}}function hr(e,t=0){var a;let n=ai(e);if(n.length===0)return null;let r=n.map(c=>c.name),o=n.length-1,i=Math.max(0,Math.min(n.length-1,o-t)),s=n[i],l=(a=mr(s.fiber))!=null?a:e;return{name:s.name,path:r,depthIndex:i,rootElement:l}}function ml(e,t){var i,s;let n=ai(e),r=t.toLowerCase(),o=-1;for(let l=n.length-1;l>=0;l--){let a=n[l].name;if(a===t){let c=(i=mr(n[l].fiber))!=null?i:e;return{name:t,path:n.map(d=>d.name),depthIndex:l,rootElement:c}}if(o===-1){let c=a.toLowerCase();(c.length>=4&&r.includes(c)||r.length>=4&&c.includes(r))&&(o=l)}}if(o>=0){let l=(s=mr(n[o].fiber))!=null?s:e;return{name:t,path:n.map(a=>a.name),depthIndex:o,rootElement:l}}return null}function Co(e){let t=Eo(),n=[],r=new Set,o=t.currentNode;for(;o=t.nextNode();){let i=ml(o,e);i&&!r.has(i.rootElement)&&(r.add(i.rootElement),n.push(i))}return n}function ci(e){let t=new Map;if(e.size===0)return t;let n=new Set(e),r=Eo(),o=new Set,i=r.currentNode;for(;(i=r.nextNode())&&n.size>0;)for(let s of n){let l=ml(i,s);if(!l||o.has(l.rootElement))continue;o.add(l.rootElement);let a=l.rootElement.getBoundingClientRect();t.set(s,a.top+window.scrollY),n.delete(s);break}for(let s of n)t.set(s,1/0);return t}function Eo(){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 en(e){let t={selector:gl(e),tagName:e.tagName.toLowerCase()};e.id&&(t.id=e.id),e.classList.length>0&&(t.className=Array.from(e.classList).join(" "));let n=hl(e);n&&n.length>0&&n.length<200&&(t.textContent=n);let r={};for(let s of e.attributes)s.name.startsWith("data-")&&(r[s.name]=s.value);Object.keys(r).length>0&&(t.dataAttributes=r);let o=gr(e);o&&(t.reactComponent=o.name);let i=yd(e);return i&&(t.context=i),t}function hl(e){let t="";for(let n of e.childNodes)n.nodeType===Node.TEXT_NODE&&(t+=n.textContent||"");return t.trim()}function oo(e,t){let n=document.elementsFromPoint(e,t);for(let r of n)if(r instanceof HTMLElement&&!(r.id==="devtools-canvas"||r.id==="devtools-toolbar"||r.id==="devtools-scrim")&&!r.closest("#devtools-toolbar")&&!(r.dataset.devtools||r.closest("[data-devtools]"))&&!["html","body"].includes(r.tagName.toLowerCase()))return r;return null}function yd(e){let t=e.parentElement,n=["section","article","nav","aside","header","footer","main"];for(;t&&t!==document.body;){let r=t.tagName.toLowerCase();if(n.includes(r)&&t.id)return`${r}#${t.id}`;if(t.id&&!t.id.startsWith("radix-")&&!t.id.startsWith(":"))return`${r}#${t.id}`;t=t.parentElement}return null}function yl(e){let t=new Set,n=[],r=window.scrollX,o=window.scrollY,i=[{x:(e.minX+e.maxX)/2,y:(e.minY+e.maxY)/2},{x:e.minX,y:e.minY},{x:e.maxX,y:e.minY},{x:e.minX,y:e.maxY},{x:e.maxX,y:e.maxY}];for(let s of i){let l=s.x-r,a=s.y-o;if(l<0||a<0||l>window.innerWidth||a>window.innerHeight)continue;let c=oo(l,a);c&&!t.has(c)&&(t.add(c),n.push(en(c)))}return n.slice(0,3)}function di(e){if(e.length===0)return[];let t=e.map(r=>r.x),n=e.map(r=>r.y);return yl({minX:Math.min(...t),minY:Math.min(...n),maxX:Math.max(...t),maxY:Math.max(...n)})}function At(e,t){return e.style.getPropertyValue(t)!==""}function bd(e,t=30){if(e<=0)return[];let n=[],r=Eo(),o=.5,i=r.currentNode;for(;(i=r.nextNode())&&n.length<t;){let s=i,l=s.getBoundingClientRect();if(l.bottom<-50||l.top>window.innerHeight+50||l.right<-50||l.left>window.innerWidth+50||l.width<1||l.height<1)continue;let a=getComputedStyle(s);!At(s,"padding-top")&&Math.abs((parseFloat(a.paddingTop)||0)-e)<o&&n.push({element:s,property:"padding-top"}),!At(s,"padding-bottom")&&Math.abs((parseFloat(a.paddingBottom)||0)-e)<o&&n.length<t&&n.push({element:s,property:"padding-bottom"}),!At(s,"padding-left")&&Math.abs((parseFloat(a.paddingLeft)||0)-e)<o&&n.length<t&&n.push({element:s,property:"padding-left"}),!At(s,"padding-right")&&Math.abs((parseFloat(a.paddingRight)||0)-e)<o&&n.length<t&&n.push({element:s,property:"padding-right"}),!At(s,"margin-top")&&Math.abs((parseFloat(a.marginTop)||0)-e)<o&&n.length<t&&n.push({element:s,property:"margin-top"}),!At(s,"margin-bottom")&&Math.abs((parseFloat(a.marginBottom)||0)-e)<o&&n.length<t&&n.push({element:s,property:"margin-bottom"}),!At(s,"margin-left")&&Math.abs((parseFloat(a.marginLeft)||0)-e)<o&&n.length<t&&n.push({element:s,property:"margin-left"}),!At(s,"margin-right")&&Math.abs((parseFloat(a.marginRight)||0)-e)<o&&n.length<t&&n.push({element:s,property:"margin-right"});let c=a.display;if((c.includes("flex")||c.includes("grid"))&&n.length<t){let d=At(s,"gap"),u=parseFloat(a.gap)||0,p=parseFloat(a.rowGap)||0,g=parseFloat(a.columnGap)||0;!d&&Math.abs(u-e)<o?n.push({element:s,property:"gap"}):!At(s,"row-gap")&&Math.abs(p-e)<o?n.push({element:s,property:"row-gap"}):!At(s,"column-gap")&&Math.abs(g-e)<o&&n.push({element:s,property:"column-gap"})}}return n}function ui(e,t=30){if(e<=0)return[];let n=[],r=Eo(),o=.5,i=r.currentNode;for(;(i=r.nextNode())&&n.length<t;){let s=i,l=s.getBoundingClientRect();if(l.bottom<-50||l.top>window.innerHeight+50||l.right<-50||l.left>window.innerWidth+50||l.width<1||l.height<1)continue;let a=getComputedStyle(s),c=parseFloat(a.borderTopWidth)||0,d=parseFloat(a.borderRightWidth)||0,u=parseFloat(a.borderBottomWidth)||0,p=parseFloat(a.borderLeftWidth)||0,g=s.clientWidth,M=s.clientHeight,C=parseFloat(a.paddingTop)||0;!At(s,"padding-top")&&Math.abs(C-e)<o&&n.push({x:l.left+p,y:l.top+c,width:g,height:e,direction:"vertical",property:"padding-top"});let b=parseFloat(a.paddingBottom)||0;!At(s,"padding-bottom")&&Math.abs(b-e)<o&&n.length<t&&n.push({x:l.left+p,y:l.top+c+M-e,width:g,height:e,direction:"vertical",property:"padding-bottom"});let E=parseFloat(a.paddingLeft)||0;!At(s,"padding-left")&&Math.abs(E-e)<o&&n.length<t&&n.push({x:l.left+p,y:l.top+c,width:e,height:M,direction:"horizontal",property:"padding-left"});let D=parseFloat(a.paddingRight)||0;!At(s,"padding-right")&&Math.abs(D-e)<o&&n.length<t&&n.push({x:l.left+p+g-e,y:l.top+c,width:e,height:M,direction:"horizontal",property:"padding-right"});let A=parseFloat(a.marginTop)||0;!At(s,"margin-top")&&Math.abs(A-e)<o&&n.length<t&&n.push({x:l.left,y:l.top-e,width:l.width,height:e,direction:"vertical",property:"margin-top"});let R=parseFloat(a.marginBottom)||0;!At(s,"margin-bottom")&&Math.abs(R-e)<o&&n.length<t&&n.push({x:l.left,y:l.bottom,width:l.width,height:e,direction:"vertical",property:"margin-bottom"});let w=parseFloat(a.marginLeft)||0;!At(s,"margin-left")&&Math.abs(w-e)<o&&n.length<t&&n.push({x:l.left-e,y:l.top,width:e,height:l.height,direction:"horizontal",property:"margin-left"});let O=parseFloat(a.marginRight)||0;!At(s,"margin-right")&&Math.abs(O-e)<o&&n.length<t&&n.push({x:l.right,y:l.top,width:e,height:l.height,direction:"horizontal",property:"margin-right"});let K=a.display;if((K.includes("flex")||K.includes("grid"))&&n.length<t&&!At(s,"gap")){let $=Array.from(s.children).filter(q=>{let v=getComputedStyle(q);return v.display!=="none"&&v.position!=="absolute"&&v.position!=="fixed"});if($.length>=2)for(let q=0;q<$.length-1&&n.length<t;q++){let v=$[q].getBoundingClientRect(),I=$[q+1].getBoundingClientRect(),Q=I.top-v.bottom;Math.abs(Q-e)<o&&Q>.5&&n.push({x:Math.min(v.left,I.left),y:v.bottom,width:Math.max(v.right,I.right)-Math.min(v.left,I.left),height:Q,direction:"vertical",property:"gap"});let ge=I.left-v.right;Math.abs(ge-e)<o&&ge>.5&&n.push({x:v.right,y:Math.min(v.top,I.top),width:ge,height:Math.max(v.bottom,I.bottom)-Math.min(v.top,I.top),direction:"horizontal",property:"gap"})}}}return n}function yr(e){return typeof e=="string"?{value:e}:e}var xl={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 bl(e,t){let n=xl[t];return n?n.includes(e):!1}function xd(e,t){let n=e.split(/\s+/);for(let r of n){if(r===t)return!0;let o=r.lastIndexOf(":");if(o>=0&&r.slice(o+1)===t)return!0}return!1}function vd(e){var l,a;let t=e.lastIndexOf(":"),n=t>=0?e.slice(t+1):e,r=n.indexOf("-");if(r<0)return null;let o=n.slice(0,r),i={gap:"gap","gap-x":"column-gap","gap-y":"row-gap",p:"padding",pt:"padding-top",pb:"padding-bottom",pl:"padding-left",pr:"padding-right",px:"padding-left",py:"padding-top",m:"margin",mt:"margin-top",mb:"margin-bottom",ml:"margin-left",mr:"margin-right",mx:"margin-left",my:"margin-top"},s=n.slice(0,n.indexOf("-",r+1)>0?n.indexOf("-",r+1):r);return(a=(l=i[s])!=null?l:i[o])!=null?a:null}function pi(e,t=30){let n=parseFloat(e.value);if(isNaN(n)||n<=0)return[];if(e.bindings&&e.bindings.length>0){let o=[],i=Eo(),s=i.currentNode;for(;(s=i.nextNode())&&o.length<t;){let l=s,a=l.getBoundingClientRect();if(a.bottom<-50||a.top>window.innerHeight+50||a.right<-50||a.left>window.innerWidth+50||a.width<1||a.height<1)continue;let c=l.className;if(typeof c=="string")for(let d of e.bindings){if(!xd(c,d))continue;let u=vd(d);if(u&&!(e.property&&!bl(u,e.property))){o.push({element:l,property:u});break}}}return o}let r=bd(n,t*2);return e.property?r.filter(o=>bl(o.property,e.property)).slice(0,t):r.slice(0,t)}function fi(e,t=30){let n=pi(e,t),r=[];for(let o of n){let i=o.element,s=i.getBoundingClientRect(),l=getComputedStyle(i),a=parseFloat(l.borderTopWidth)||0,c=parseFloat(l.borderRightWidth)||0,d=parseFloat(l.borderLeftWidth)||0,u=i.clientWidth,p=i.clientHeight;switch(o.property){case"padding-top":{let g=parseFloat(l.paddingTop)||0;r.push({x:s.left+d,y:s.top+a,width:u,height:g,direction:"vertical",property:o.property});break}case"padding-bottom":{let g=parseFloat(l.paddingBottom)||0;r.push({x:s.left+d,y:s.top+a+p-g,width:u,height:g,direction:"vertical",property:o.property});break}case"padding-left":{let g=parseFloat(l.paddingLeft)||0;r.push({x:s.left+d,y:s.top+a,width:g,height:p,direction:"horizontal",property:o.property});break}case"padding-right":{let g=parseFloat(l.paddingRight)||0;r.push({x:s.left+d+u-g,y:s.top+a,width:g,height:p,direction:"horizontal",property:o.property});break}case"margin-top":{let g=parseFloat(l.marginTop)||0;r.push({x:s.left,y:s.top-g,width:s.width,height:g,direction:"vertical",property:o.property});break}case"margin-bottom":{let g=parseFloat(l.marginBottom)||0;r.push({x:s.left,y:s.bottom,width:s.width,height:g,direction:"vertical",property:o.property});break}case"margin-left":{let g=parseFloat(l.marginLeft)||0;r.push({x:s.left-g,y:s.top,width:g,height:s.height,direction:"horizontal",property:o.property});break}case"margin-right":{let g=parseFloat(l.marginRight)||0;r.push({x:s.right,y:s.top,width:g,height:s.height,direction:"horizontal",property:o.property});break}case"gap":case"row-gap":case"column-gap":{let g=Array.from(i.children).filter(M=>{let C=getComputedStyle(M);return C.display!=="none"&&C.position!=="absolute"&&C.position!=="fixed"});for(let M=0;M<g.length-1&&r.length<t;M++){let C=g[M].getBoundingClientRect(),b=g[M+1].getBoundingClientRect(),E=b.top-C.bottom;E>.5&&r.push({x:Math.min(C.left,b.left),y:C.bottom,width:Math.max(C.right,b.right)-Math.min(C.left,b.left),height:E,direction:"vertical",property:"gap"});let D=b.left-C.right;D>.5&&r.push({x:C.right,y:Math.min(C.top,b.top),width:D,height:Math.max(C.bottom,b.bottom)-Math.min(C.top,b.top),direction:"horizontal",property:"gap"})}break}}}return r}function vl(e,t){let n=new Set,r=jo(t);for(let o of e){let i=wl[o.property];if(!i)continue;let s=o.element.className;if(typeof s=="string")for(let l of i){let a=`${l}-${r}`;for(let c of s.split(/\s+/)){let d=c.lastIndexOf(":"),u=d>=0?c.slice(d+1):c;if(u===a){n.add(u);break}}}}return[...n]}function Sl(e){let t=new Set;for(let n of e)for(let[r,o]of Object.entries(xl))if(o.includes(n.property)){t.add(r);break}if(t.size===1)return[...t][0]}function gi(e,t,n){if(t===n)return e;let r=jo(t),o=jo(n);return e.map(i=>{let s=i.lastIndexOf("-");if(s<0)return i;let l=i.slice(0,s),a=i.slice(s+1);return a===r||a===`[${t}px]`?`${l}-${o}`:i})}var Sd={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 jo(e){var t;return(t=Sd[e])!=null?t:`[${e}px]`}var wl={"padding-top":["pt","py","p"],"padding-bottom":["pb","py","p"],"padding-left":["pl","px","p"],"padding-right":["pr","px","p"],"margin-top":["mt","my","m"],"margin-bottom":["mb","my","m"],"margin-left":["ml","mx","m"],"margin-right":["mr","mx","m"],gap:["gap"],"row-gap":["gap-y","gap"],"column-gap":["gap-x","gap"]};function wd(e,t,n,r){let o=wl[t];if(!o)return null;let i=jo(n);for(let s of o){let l=new RegExp("(?:^|\\s)((?:[\\w-]+:)*"+s+"-(?:"+Cd(i)+"|\\["+n+"px\\]))(?:\\s|$)"),a=e.match(l);if(a!=null&&a[1]){let c=jo(r),d=a[1].lastIndexOf(":"),u=d>=0?a[1].slice(0,d+1):"";return{matched:a[1],suggested:`${u}${s}-${c}`}}}return null}function Cd(e){return e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function Cl(e,t,n){let r=new Set,o=[];for(let i of e){let s=dn(i.element),l=`${s}::${i.property}`;if(r.has(l))continue;r.add(l);let a=gr(i.element),c=i.element.className||"",d=wd(c,i.property,t,n);o.push({selector:s,reactComponent:a==null?void 0:a.name,className:c,property:i.property,matchedClass:d==null?void 0:d.matched,suggestedClass:d==null?void 0:d.suggested})}return o}function Go(e,t){return window.getComputedStyle(e).getPropertyValue(t)}function mi(e,t){if(e instanceof HTMLElement){let r=e.style.getPropertyValue(t);if(r)return r}let n=Ed(e,t);return n&&n.includes("var(")?n:Go(e,t)}function Ed(e,t){let n=t.replace(/-([a-z])/g,(r,o)=>o.toUpperCase());try{for(let r of document.styleSheets)try{let o=r.cssRules||r.rules;for(let i of o)if(i instanceof CSSStyleRule&&e.matches(i.selectorText)){let s=i.style.getPropertyValue(t);if(s&&s.includes("var("))return s;let l=i.style[n];if(l&&l.includes("var("))return l}}catch(o){}}catch(r){}return null}function br(e,t){if(e instanceof HTMLElement){let r=e.style.getPropertyValue(t);if(r)return r}let n=t.replace(/-([a-z])/g,(r,o)=>o.toUpperCase());try{for(let r of document.styleSheets)try{let o=r.cssRules||r.rules;for(let i of o)if(i instanceof CSSStyleRule&&e.matches(i.selectorText)){let s=i.style.getPropertyValue(t);if(s)return s;let l=i.style[n];if(l)return l}}catch(o){}}catch(r){}return null}function xr(e){let t=window.getComputedStyle(e).display;return t==="flex"||t==="inline-flex"||t==="grid"||t==="inline-grid"}function Vo(e){let t=window.getComputedStyle(e);return{row:parseFloat(t.rowGap)||0,column:parseFloat(t.columnGap)||0}}function kd(e){let t=[];for(let n of e){let r=t.find(o=>o.axis!==n.axis?!1:n.axis==="row"?Math.abs(o.y-n.y)<2&&Math.abs(o.h-n.h)<2:Math.abs(o.x-n.x)<2&&Math.abs(o.w-n.w)<2);if(r)if(n.axis==="row"){let o=Math.min(r.x,n.x),i=Math.max(r.x+r.w,n.x+n.w);r.x=o,r.w=i-o}else{let o=Math.min(r.y,n.y),i=Math.max(r.y+r.h,n.y+n.h);r.y=o,r.h=i-o}else t.push(f({},n))}return t}function ro(e){let t=Array.from(e.children).filter(a=>{if(!(a instanceof HTMLElement))return!1;let c=window.getComputedStyle(a);return c.display!=="none"&&c.position!=="absolute"&&c.position!=="fixed"});if(t.length<2)return[];let n=[],r=e.getBoundingClientRect(),i=window.getComputedStyle(e).flexDirection,s=i==="column"||i==="column-reverse",l=6;for(let a=0;a<t.length-1;a++){let c=t[a].getBoundingClientRect(),d=t[a+1].getBoundingClientRect();if(d.left>c.right+.5&&n.push({axis:"column",x:c.right,y:r.top,w:d.left-c.right,h:r.height}),d.top>c.bottom+.5&&n.push({axis:"row",x:r.left,y:c.bottom,w:r.width,h:d.top-c.bottom}),!(d.left>c.right+.5)&&!(d.top>c.bottom+.5))if(s){let u=(c.bottom+d.top)/2;n.push({axis:"row",x:r.left,y:u-l/2,w:r.width,h:l})}else{let u=(c.right+d.left)/2;n.push({axis:"column",x:u-l/2,y:r.top,w:l,h:r.height})}}return kd(n)}function hi(e,t){let n=window.getComputedStyle(e),r=n.display;if(r!=="flex"&&r!=="inline-flex")return!1;let o=n.justifyContent;if(o!=="space-between"&&o!=="space-around"&&o!=="space-evenly"&&o!=="stretch")return!1;let i=n.flexDirection;return!(t!==(i==="column"||i==="column-reverse"?"row":"column")||parseFloat(t==="row"?n.rowGap:n.columnGap)>0)}function ko(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 io(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 yi(e){for(let t of e.childNodes)if(t.nodeType===Node.TEXT_NODE&&(t.textContent||"").trim().length>0)return!0;return!1}function Mo(e){var d,u;let t=document.createRange(),n=!1;for(let p of e.childNodes)p.nodeType===Node.TEXT_NODE&&(p.textContent||"").trim().length>0&&(n||(t.setStart(p,0),n=!0),t.setEnd(p,(u=(d=p.textContent)==null?void 0:d.length)!=null?u:0));if(!n)return null;let r=t.getBoundingClientRect(),o=window.getComputedStyle(e),i=parseFloat(o.fontSize)||16,s=parseFloat(o.lineHeight);isNaN(s)&&(s=i*1.2);let l=Math.max(1,t.getClientRects().length),a=Math.max(r.height,l*s),c=(a-r.height)/2;return new DOMRect(r.x,r.y-c,r.width,a)}function Uo(e){let t=window.getComputedStyle(e),n=parseFloat(t.fontSize)||16,r=parseFloat(t.lineHeight);return isNaN(r)&&(r=n*1.2),{fontSize:n,lineHeight:r}}function $e(e,t,n){e instanceof HTMLElement&&e.style.setProperty(t,n,"important")}function bi(e,t,n){e instanceof HTMLElement&&e.style.removeProperty(t)}function vr(e){var t;for(let n of e){let r=qt(n.selector);if(!r&&n.durableSelector&&(r=qt(n.durableSelector),r)){let o=(t=n.selector.match(/\[data-pm="([^"]+)"\]/))==null?void 0:t[1];o&&r.setAttribute("data-pm",o)}if(r)for(let o of n.changes)$e(r,o.property,o.modified)}}function xi(e,t){let n=qt(e);if(!n)return;let r=t.find(o=>o.selector===e);if(r)for(let o of r.changes)bi(n,o.property,o.original)}function Sr(e){for(let t of e){let n=qt(t.selector);if(n)for(let r of t.changes)bi(n,r.property,r.original)}}function kl(e,t,n,r){if(e)for(let o of e){if(o instanceof CSSGroupingRule){kl(o.cssRules,t,n,r);continue}if(o instanceof CSSStyleRule){let i=o.selectorText.toLowerCase();(i===":root"||i==="html"||i==="*"||i.includes(":root"))&&Md(o.style,t,n,r)}}}function Md(e,t,n,r){for(let o=0;o<e.length;o++){let i=e[o];if(i!=null&&i.startsWith("--")){if(n.has(i))continue;n.add(i);let s=t.getPropertyValue(i).trim();Ml(s)&&r.push({name:i,value:s,usage:`var(${i})`})}}}var wr=null,Td=5e3;function vi(){if(wr&&Date.now()-wr.timestamp<Td)return wr.variables;let e=[],t=new Set,n=getComputedStyle(document.documentElement);try{for(let i of document.styleSheets)try{kl(i.cssRules||i.rules,n,t,e)}catch(s){}}catch(i){}let r=document.documentElement.style;for(let i=0;i<r.length;i++){let s=r[i];if(s!=null&&s.startsWith("--")&&!t.has(s)){t.add(s);let l=n.getPropertyValue(s).trim();Ml(l)&&e.push({name:s,value:l,usage:`var(${s})`})}}let o=e.sort((i,s)=>i.name.localeCompare(s.name));return wr={variables:o,timestamp:Date.now()},o}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 Xo(e,t){let n=t.match(/var\((--[^,)]+)(?:,\s*([^)]+))?\)/);if(n){let r=n[1],o=n[2];return getComputedStyle(document.documentElement).getPropertyValue(r).trim()||o||t}return t}function Jo(e,t){if(!e)return null;let n=El(e);if(!n)return null;for(let r of t){let o=El(r.value);if(o&&n===o)return r}return null}function El(e){if(!e)return null;let t=e.trim().toLowerCase();if(t.startsWith("oklch(")){let n=t.match(/oklch\(\s*([\d.]+%?)\s+([\d.]+%?)\s+([\d.]+)/);if(n){let r=n[1].endsWith("%")?parseFloat(n[1])/100:parseFloat(n[1]),o=n[2].endsWith("%")?parseFloat(n[2])/100:parseFloat(n[2]),i=parseFloat(n[3]);r=Math.round(r*100)/100,o=Math.round(o*1e3)/1e3;let s=Math.round(i);return`oklch(${r} ${o} ${s})`}}if(t.startsWith("rgb")){let n=t.match(/rgba?\(\s*(\d+)[,\s]+(\d+)[,\s]+(\d+)/);if(n)return`rgb(${n[1]},${n[2]},${n[3]})`}return t.startsWith("#")?t.length===4?`#${t[1]}${t[1]}${t[2]}${t[2]}${t[3]}${t[3]}`:t.slice(0,7):t}import{Fragment as so,jsx as qe,jsxs as wn}from"react/jsx-runtime";var bn=22,$n=12,Id=3,Rd=250,Cr=["reviewing","considering","thinking","zhuzhing","iterating","tweaking","reflecting","noodling","pondering","finessing","polishing","riffing"],Ld=3e3;function Ad(s){var l=s,{left:e,top:t,avoidBottom:n,style:r,children:o}=l,i=zn(l,["left","top","avoidBottom","style","children"]);let a=e+$n,c=t+$n,d=n!==void 0?`${n}px`:"100vh";return qe("div",y(f({"data-devtools":"badge-hit-area"},i),{style:f({position:"fixed",left:e,top:t,padding:$n},r),children:qe("div",{style:{transform:`translate(min(0px, calc(100vw - ${a}px - 100%)), min(0px, calc(${d} - ${c}px - 100%)))`},children:o})}))}function Rl({annotations:e,supersededAnnotations:t,inFlightIds:n,scrollX:r,scrollY:o,annotationGroupMap:i,onViewThread:s,onSelectAnnotation:l,onHoverAnnotation:a,canvasRef:c}){var w,O,K,H,$,q,v;let[d,u]=Ko(0),[p,g]=Ko(()=>Math.floor(Math.random()*Cr.length)),M=!!(n&&n.size>0);Er(()=>{if(!M)return;let I=setInterval(()=>{u(ge=>(ge+1)%Id)},Rd),Q=setInterval(()=>{g(ge=>(ge+1)%Cr.length)},Ld);return()=>{clearInterval(I),clearInterval(Q)}},[M]);let C=[];for(let I of e){if(I.type!=="text"||!I.text||!I.points[0]||t.has(I))continue;let Q=I.groupId?e.filter(V=>V.groupId===I.groupId):[I],ge=!!(n&&(n.has(I.id)||Q.some(V=>n.has(V.id)))),be=(w=I.status)!=null?w:"pending",ue=Q.some(V=>V.status==="resolved"||V.status==="needs_review"),ce=Q.some(V=>V.threadId);if(!ge&&be!=="resolved"&&be!=="needs_review"&&!ue&&!ce)continue;let Fe=I.threadId||((O=Q.find(V=>V.threadId))==null?void 0:O.threadId),Te=be==="needs_review"||Q.some(V=>V.status==="needs_review"),oe=Q.reduce((V,me)=>{var xe;return V+((xe=me.replyCount)!=null?xe:0)},0),Le=I.points[0],Ae=I.fontSize||12,_e=Ae*1.4,Pe=I.text.split(`
|
|
5
|
+
`),Me=i.get(I.id),Z=Me!==void 0?[Me+". "+(Pe[0]||""),...Pe.slice(1)]:Pe,pe=(H=(K=c==null?void 0:c.current)==null?void 0:K.getContext("2d"))!=null?H:document.createElement("canvas").getContext("2d");if(!pe)continue;pe.font=`${Ae}px ${Ft}`;let he=Le.x-r,fe=So(he),Ie=fe!==void 0?Math.min(400,fe):400,We=no(pe,Z,Ie),it=Math.min(Ie,Math.max(...We.map(V=>pe.measureText(V).width))),lt=We.length*_e,j=Z.length*_e,re=lt-j;C.push({id:I.id,threadId:Fe,linkedSelector:I.linkedSelector||(($=Q.find(V=>V.linkedSelector))==null?void 0:$.linkedSelector),x:Le.x+it+4,y:Le.y-4-re,size:lt+8,color:I.color,isInFlight:ge,isNeedsReview:Te,replyCount:oe})}if(C.length===0)return null;let b=2,E=(v=(q=c==null?void 0:c.current)==null?void 0:q.getContext("2d"))!=null?v:document.createElement("canvas").getContext("2d"),D=C.map(I=>{var ce;let Q;I.isInFlight?Q=(ce=Cr[p])!=null?ce:"thinking":I.replyCount>0?Q=`${I.replyCount} ${I.replyCount===1?"reply":"replies"}`:I.threadId?Q="1 reply":Q="Cancelled";let ge=11,be=4,ue=Q.length*7.2;return E&&(E.font=`12px ${Ft}`,ue=E.measureText(Q).width),4+ge+be+ue+4}),A=typeof window!="undefined"?window.innerHeight:9999,R=[];for(let I=0;I<C.length;I++){let Q=C[I].y-o,ge=Math.min(Q,A-bn),be=ge+bn,ce=C[I].x-r;for(let Fe=0;Fe<I;Fe++){let Te=C[Fe].y-o,oe=Math.min(Te,A-bn),Le=oe+bn;if(!(ge<Le&&be>oe))continue;let _e=R[Fe]+D[Fe];ce<_e+b&&(ce=_e+b)}R.push(ce)}return qe(so,{children:C.map((I,Q)=>{let ge=!!I.threadId;return qe(Ad,{left:R[Q]-$n,top:I.y-o-$n,onMouseDown:ge?be=>be.stopPropagation():void 0,onClick:ge?be=>{if(be.stopPropagation(),l==null||l(I.id),s==null||s(I.threadId),I.linkedSelector)try{let ue=document.querySelector(I.linkedSelector);if(ue){let ce=ue.getBoundingClientRect();(ce.bottom<0||ce.top>window.innerHeight)&&ue.scrollIntoView({behavior:"smooth",block:"center"})}}catch(ue){}}:void 0,onMouseEnter:a?()=>a(I.id):void 0,onMouseLeave:a?()=>a(null):void 0,style:{pointerEvents:ge?"auto":"none",cursor:ge?"pointer":void 0,zIndex:9999},children:qe("div",{"data-devtools":"annotation-badge",style:{height:I.size,display:"flex",alignItems:"center",backgroundColor:I.color,fontFamily:Ft,fontSize:12,color:"#ffffff",userSelect:"none",padding:`0 ${4}px`,gap:4,whiteSpace:"nowrap"},children:I.isInFlight?wn(so,{children:[qe("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:"currentColor",style:{verticalAlign:"middle"},children:d===1?wn(so,{children:[qe("circle",{cx:"7",cy:"7",r:"2"}),qe("circle",{cx:"17",cy:"7",r:"2"}),qe("circle",{cx:"7",cy:"17",r:"2"}),qe("circle",{cx:"17",cy:"17",r:"2"})]}):wn(so,{children:[qe("circle",{cx:"12",cy:"6",r:"2"}),qe("circle",{cx:"6",cy:"12",r:"2"}),qe("circle",{cx:"18",cy:"12",r:"2"}),qe("circle",{cx:"12",cy:"18",r:"2"})]})}),qe("span",{style:{opacity:.7},children:Cr[p]})]}):wn(so,{children:[I.isNeedsReview?qe("span",{style:{fontWeight:700},children:"?"}):qe("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:qe("polyline",{points:"4 12 10 18 20 6"})}),qe("span",{style:{opacity:.7},children:I.replyCount>0?`${I.replyCount} ${I.replyCount===1?"reply":"replies"}`:I.threadId?"1 reply":"Cancelled"})]})})},I.id)})})}function Si({inFlightSelectorColors:e,animated:t=!0}){let[n,r]=Ko([]);if(Er(()=>{if(e.size===0){r([]);return}let i=null,s=()=>{let c=[];for(let[d,u]of e){let p=qt(d);if(!p)continue;let g=p.getBoundingClientRect();c.push({selector:d,top:g.top,left:g.left,width:g.width,height:g.height,color:u})}r(c)},l=()=>{i&&cancelAnimationFrame(i),i=requestAnimationFrame(s)};s(),window.addEventListener("scroll",l,!0),window.addEventListener("resize",l,!0);let a=new MutationObserver(l);return a.observe(document.body,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["style","class"]}),()=>{window.removeEventListener("scroll",l,!0),window.removeEventListener("resize",l,!0),a.disconnect(),i&&cancelAnimationFrame(i)}},[e]),n.length===0)return null;let o={position:"absolute",width:2,height:2,pointerEvents:"none"};return wn(so,{children:[t&&qe("style",{children:"@keyframes popmelt-march { to { stroke-dashoffset: -6; } }"}),n.map(i=>wn("div",{"data-devtools":"marching-ants",style:{position:"fixed",top:i.top,left:i.left,width:i.width,height:i.height,pointerEvents:"none",zIndex:9995,overflow:"visible"},children:[qe("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible"},children:qe("rect",{x:"0.5",y:"0.5",width:Math.max(0,i.width-1),height:Math.max(0,i.height-1),fill:"none",stroke:i.color,strokeWidth:"1",strokeDasharray:"2 4",style:t?{animation:"popmelt-march 0.5s steps(2) infinite"}:void 0})}),qe("div",{style:y(f({},o),{top:-1,left:-1,backgroundColor:i.color})}),qe("div",{style:y(f({},o),{top:-1,right:-1,backgroundColor:i.color})}),qe("div",{style:y(f({},o),{bottom:-1,left:-1,backgroundColor:i.color})}),qe("div",{style:y(f({},o),{bottom:-1,right:-1,backgroundColor:i.color})})]},i.selector))]})}function Ll({annotations:e,supersededAnnotations:t,scrollX:n,scrollY:r,onReply:o,annotationGroupMap:i,canvasRef:s,onHoverAnnotation:l}){let a=e.filter(u=>t.has(u)?!1:u.status==="waiting_input"&&u.question&&u.threadId);if(a.length===0)return null;let c=new Set,d=[];for(let u of a){if(!u.threadId||c.has(u.threadId))continue;c.add(u.threadId);let p=u.type==="text"?u:e.find(g=>g.groupId&&g.groupId===u.groupId&&g.type==="text")||u;if(p.type==="text"&&p.text&&p.points[0]){let g=p.points[0],M=p.fontSize||12,C=M*1.4,b=p.text.split(`
|
|
6
|
+
`),E=i.get(p.id),D=E!==void 0?[E+". "+(b[0]||""),...b.slice(1)]:b,R=document.createElement("canvas").getContext("2d");if(!R)continue;R.font=`${M}px ${Ft}`;let w=g.x-n,O=So(w),K=O!==void 0?Math.min(400,O):400,H=no(R,D,K),$=Math.min(K,Math.max(...H.map(ge=>R.measureText(ge).width))),q=H.length*C,v=D.length*C,I=q-v,Q=q+8;d.push({annotation:u,x:g.x+$+4,y:g.y-4-I,size:Q})}}return d.length===0?null:qe(so,{children:d.map(({annotation:u,x:p,y:g,size:M})=>qe(Pd,{annotation:u,x:p-n,y:g-r,size:M,onReply:o,onHoverAnnotation:l},`question-${u.threadId}`))})}function Pd({annotation:e,x:t,y:n,size:r,onReply:o,onHoverAnnotation:i}){let[s,l]=Ko(!1),[a,c]=Ko(""),d=Il(null),u=Il(null);Er(()=>{s&&d.current&&d.current.focus()},[s]),Er(()=>{if(!s)return;let b=D=>{u.current&&!D.composedPath().includes(u.current)&&l(!1)},E=D=>{D.key==="Escape"&&l(!1)};return document.addEventListener("mousedown",b),document.addEventListener("keydown",E),()=>{document.removeEventListener("mousedown",b),document.removeEventListener("keydown",E)}},[s]);let p=Tl(()=>{!a.trim()||!e.threadId||(o(e.threadId,a.trim()),c(""),l(!1))},[a,e.threadId,o]),g=Tl(b=>{b.key==="Enter"&&(b.metaKey||b.ctrlKey)&&(b.preventDefault(),p())},[p]),M=s?t:t-$n,C=s?n:n-$n;return wn("div",{ref:u,"data-devtools":"question-badge",onMouseEnter:i?()=>i(e.id):void 0,onMouseLeave:i?()=>i(null):void 0,style:{position:"fixed",left:`max(0px, ${M}px)`,top:`max(0px, ${C}px)`,padding:s?0:$n,transform:`translate(min(0px, calc(100vw - max(0px, ${M}px) - 100%)), min(0px, calc(100vh - max(0px, ${C}px) - 100%)))`,zIndex:s?10002:9999,pointerEvents:"auto",cursor:s?void 0:"pointer"},children:[!s&&wn("div",{onClick:()=>l(!0),style:{height:r,display:"flex",alignItems:"center",backgroundColor:e.color,padding:`0 ${4}px`,gap:4,fontFamily:Ft,fontSize:12,color:"#ffffff",whiteSpace:"nowrap"},children:[wn("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",children:[qe("line",{x1:"12",y1:"3",x2:"12",y2:"9"}),qe("line",{x1:"12",y1:"15",x2:"12",y2:"21"}),qe("line",{x1:"3",y1:"12",x2:"9",y2:"12"}),qe("line",{x1:"15",y1:"12",x2:"21",y2:"12"})]}),qe("span",{style:{opacity:.7},children:"reply?"})]}),s&&wn("div",{style:{minWidth:260,maxWidth:360,backgroundColor:"#eaeaea",fontFamily:Ft,fontSize:12,color:"#1f2937",border:"1px solid rgba(0, 0, 0, 0.1)"},children:[qe("div",{style:{padding:`${6}px ${8}px`,lineHeight:1.4},children:e.question}),wn("div",{style:{padding:`0 ${4}px ${4}px`},children:[qe("textarea",{ref:d,value:a,onChange:b=>c(b.target.value),onKeyDown:g,placeholder:"Type your reply...",style:{width:"100%",minHeight:40,padding:4,fontSize:12,fontFamily:Ft,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"}}),qe("div",{style:{display:"flex",justifyContent:"flex-end",marginTop:4},children:qe("button",{onClick:p,disabled:!a.trim(),style:{padding:"4px 12px",fontSize:11,fontFamily:Ft,fontWeight:600,backgroundColor:a.trim()?e.color:"rgba(0,0,0,0.1)",color:a.trim()?"#ffffff":"rgba(0,0,0,0.3)",border:"none",cursor:a.trim()?"pointer":"default"},children:"Send \u2318\u23CE"})})]})]})]})}function kr(e){var i;let t=new Set,n=new Map;for(let s of e){if(!s.linkedSelector)continue;let l=n.get(s.linkedSelector)||[];l.push(s),n.set(s.linkedSelector,l)}let r=new Set,o=new Set;for(let s of n.values()){if(s.length<=1){(i=s[0])!=null&&i.groupId&&o.add(s[0].groupId);continue}s.sort((a,c)=>c.timestamp-a.timestamp);let l=s[0];l.groupId&&o.add(l.groupId);for(let a=1;a<s.length;a++){let c=s[a];t.add(c),c.groupId&&r.add(c.groupId)}}for(let s of e)s.groupId&&r.has(s.groupId)&&!o.has(s.groupId)&&t.add(s);return t}import{useEffect as Al,useLayoutEffect as Bd,useState as Pl}from"react";import{jsx as wi,jsxs as Ol}from"react/jsx-runtime";function Od(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 Bl=["top-left","top-right","bottom-right","bottom-left"];function Dl({element:e,radius:t,accentColor:n,hoveredCorner:r,draggingCorner:o,cursorViewport:i}){let[s,l]=Pl(null),[a,c]=Pl(!1);if(Al(()=>{let E=R=>{(R.key==="Meta"||R.key==="Control")&&c(!0)},D=R=>{(R.key==="Meta"||R.key==="Control")&&c(!1)},A=()=>c(!1);return window.addEventListener("keydown",E,!0),window.addEventListener("keyup",D,!0),window.addEventListener("blur",A),()=>{window.removeEventListener("keydown",E,!0),window.removeEventListener("keyup",D,!0),window.removeEventListener("blur",A)}},[]),Al(()=>{if(!e){l(null);return}let E=()=>{l(e.getBoundingClientRect())};return E(),window.addEventListener("scroll",E,{passive:!0}),window.addEventListener("resize",E,{passive:!0}),()=>{window.removeEventListener("scroll",E),window.removeEventListener("resize",E)}},[e]),Bd(()=>{e&&l(e.getBoundingClientRect())},[e,t["top-left"],t["top-right"],t["bottom-right"],t["bottom-left"]]),!s)return null;let d=s.width,u=s.height,p=Od(n,.2),g={"top-left":{x:0,y:t["top-left"]},"top-right":{x:d,y:t["top-right"]},"bottom-right":{x:d,y:u-t["bottom-right"]},"bottom-left":{x:0,y:u-t["bottom-left"]}},M=new Set,C=o!=null?o:r;if(C)if(a)M.add(C);else for(let E of Bl)M.add(E);let b={position:"fixed",top:s.top,left:s.left,width:d,height:u,pointerEvents:"none",zIndex:9996,overflow:"visible"};return Ol("div",{"data-devtools":"border-radius-handles",style:b,children:[Ol("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${d} ${u}`,children:[wi("rect",{x:"0.5",y:"0.5",width:Math.max(0,d-1),height:Math.max(0,u-1),fill:"none",stroke:p,strokeWidth:"1"}),Bl.map(E=>{let D=g[E],A=M.has(E);return wi("circle",{cx:D.x,cy:D.y,r:E===(o!=null?o:r)?3:2.5,fill:n,stroke:"#ffffff",strokeWidth:E===(o!=null?o:r)?4:2,paintOrder:"stroke"},E)})]}),i&&C&&(()=>{let E=Math.round(t[C]);return wi("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:E})})()]})}import{useEffect as Dd,useState as Nd}from"react";function lo(e,t){let n=e.match(/^oklch\(([^)]+)\)$/i);if(n)return`oklch(${n[1]} / ${t})`;let r=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(r){let o=parseInt(r[1],16),i=parseInt(r[2],16),s=parseInt(r[3],16);return`rgba(${o}, ${i}, ${s}, ${t})`}return`color-mix(in srgb, ${e} ${Math.round(t*100)}%, transparent)`}import{Fragment as Hd,jsx as ao,jsxs as qo}from"react/jsx-runtime";function In({element:e,isSelected:t=!1,elementInfo:n,color:r="#3b82f6",annotationNumber:o,changeCount:i,hideTooltip:s=!1}){let[l,a]=Nd(null);if(Dd(()=>{if(!e){a(null);return}let O=()=>{let K=e.getBoundingClientRect();a(K)};return O(),window.addEventListener("scroll",O,{passive:!0}),window.addEventListener("resize",O,{passive:!0}),()=>{window.removeEventListener("scroll",O),window.removeEventListener("resize",O)}},[e]),!l||!e)return null;let c={position:"fixed",top:l.top,left:l.left,width:l.width,height:l.height,pointerEvents:"none",zIndex:9996,backgroundColor:t?lo(r,.1):lo(r,.05),overflow:"visible"},d={position:"absolute",width:2,height:2,backgroundColor:r,pointerEvents:"none"},u=e.tagName.toLowerCase(),p=e.id?`#${e.id}`:"",g=e.classList.length>0?"."+Array.from(e.classList).slice(0,2).join("."):"",M=n==null?void 0:n.reactComponent,C=M?`<${M}> ${u}${p}${g}`:`${u}${p}${g}`,b=22,E=l.height>=window.innerHeight,D=E?0:l.top>=b?l.top-b:l.bottom,A=E?{position:"absolute",top:8,left:8,zIndex:9997,display:"flex",alignItems:"center",gap:6,backgroundColor:r,color:"#fff",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',padding:"4px 8px",borderRadius:0,pointerEvents:"none",whiteSpace:"nowrap",maxWidth:400}:{position:"fixed",top:D,left:l.left,zIndex:9997,display:"flex",alignItems:"center",gap:6,backgroundColor:r,color:"#fff",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',padding:"4px 8px",borderRadius:0,pointerEvents:"none",whiteSpace:"nowrap",maxWidth:400},w=!s&&qo("div",{"data-devtools":"tooltip",style:A,children:[o!==void 0&&qo("span",{children:[o,"."]}),ao("span",{style:{overflow:"hidden",textOverflow:"ellipsis",flex:1,minWidth:0},children:C}),i!==void 0&&i>0&&qo("span",{style:{opacity:.8},children:["(",i," ",i===1?"change":"changes",")"]})]});return qo(Hd,{children:[qo("div",{"data-devtools":"highlight",style:c,children:[ao("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},children:ao("rect",f({x:"0.5",y:"0.5",width:Math.max(0,l.width-1),height:Math.max(0,l.height-1),fill:"none",stroke:r,strokeWidth:"1"},!t&&{strokeDasharray:"2 4"}))}),ao("div",{style:y(f({},d),{top:-1,left:-1})}),ao("div",{style:y(f({},d),{top:-1,right:-1})}),ao("div",{style:y(f({},d),{bottom:-1,left:-1})}),ao("div",{style:y(f({},d),{bottom:-1,right:-1})}),E&&w]}),!E&&w]})}import{useEffect as Nl,useLayoutEffect as Fd,useState as Ci}from"react";import{jsx as Bn,jsxs as ki}from"react/jsx-runtime";function Ei(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 Mi({element:e,gap:t,accentColor:n,hoveredAxis:r,draggingAxis:o,cursorViewport:i,isAutoGap:s=!1,refreshKey:l=0}){let[a,c]=Ci(null),[d,u]=Ci([]),[p,g]=Ci(!1);if(Nl(()=>{let H=v=>{(v.key==="Meta"||v.key==="Control")&&g(!0)},$=v=>{(v.key==="Meta"||v.key==="Control")&&g(!1)},q=()=>g(!1);return window.addEventListener("keydown",H,!0),window.addEventListener("keyup",$,!0),window.addEventListener("blur",q),()=>{window.removeEventListener("keydown",H,!0),window.removeEventListener("keyup",$,!0),window.removeEventListener("blur",q)}},[]),Nl(()=>{if(!e){c(null),u([]);return}let H=()=>{c(e.getBoundingClientRect()),u(ro(e))};return H(),window.addEventListener("scroll",H,{passive:!0}),window.addEventListener("resize",H,{passive:!0}),()=>{window.removeEventListener("scroll",H),window.removeEventListener("resize",H)}},[e]),Fd(()=>{e&&(c(e.getBoundingClientRect()),u(ro(e)))},[e,t.row,t.column,l]),!a||d.length===0)return null;let M=a.width,C=a.height,b="pm-gap-stripe-pattern",E=Ei(n,.25),D=Ei(n,.1),A=Ei(n,.2),R=8,w=2,O={position:"fixed",top:a.top,left:a.left,width:M,height:C,pointerEvents:"none",zIndex:9996,overflow:"visible"},K=o!=null?o:r;return ki("div",{"data-devtools":"gap-handles",style:O,children:[ki("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${M} ${C}`,children:[Bn("defs",{children:Bn("pattern",{id:b,patternUnits:"userSpaceOnUse",width:"4",height:"4",patternTransform:"rotate(45)",children:Bn("line",{x1:"0",y1:"0",x2:"0",y2:"4",stroke:E,strokeWidth:"1.5"})})}),Bn("rect",{x:"0.5",y:"0.5",width:Math.max(0,M-1),height:Math.max(0,C-1),fill:"none",stroke:A,strokeWidth:"1"}),d.map((H,$)=>{let q=H.x-a.left,v=H.y-a.top,I=H.w,Q=H.h,ge=p?H.axis===K:!0;return(H.axis==="row"?t.row:t.column)===0?null:ki("g",{opacity:ge?1:.6,children:[Bn("rect",{x:q,y:v,width:I,height:Q,fill:D}),Bn("rect",{x:q,y:v,width:I,height:Q,fill:`url(#${b})`})]},$)}),K&&(()=>{let H=d.filter(Le=>Le.axis===K);if(H.length===0)return null;let $=H[0];if(i&&H.length>1){let Le=1/0;for(let Ae of H){let _e=Ae.x+Ae.w/2,Pe=Ae.y+Ae.h/2,Me=Math.abs(i.x-_e)+Math.abs(i.y-Pe);Me<Le&&(Le=Me,$=Ae)}}let q=$.x-a.left,v=$.y-a.top,I=$.w,Q=$.h,ge=q+I/2,be=v+Q/2;if(s)return Bn("circle",{cx:ge,cy:be,r:1.5,fill:n,stroke:"#ffffff",strokeWidth:4,paintOrder:"stroke"});let ue=K==="column",ce=ue?w:R,Fe=ue?R:w,Te=ge-ce/2,oe=be-Fe/2;return Bn("rect",{x:Te,y:oe,width:ce,height:Fe,fill:n,stroke:"#ffffff",strokeWidth:4,paintOrder:"stroke"})})()]}),i&&K&&(()=>{let H=s?"auto":String(Math.round(K==="row"?t.row:t.column));return Bn("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:H})})()]})}import{useCallback as Yd,useEffect as jd,useState as Gd}from"react";import{useEffect as _d,useState as Hl}from"react";var zd=3,$d=250,Ti=["reviewing","considering","thinking","zhuzhing","iterating","tweaking","reflecting","noodling","pondering","finessing","polishing","riffing"],Wd=3e3;function Mr(e){let[t,n]=Hl(0),[r,o]=Hl(()=>Math.floor(Math.random()*Ti.length));return _d(()=>{if(!e)return;let i=setInterval(()=>n(l=>(l+1)%zd),$d),s=setInterval(()=>o(l=>(l+1)%Ti.length),Wd);return()=>{clearInterval(i),clearInterval(s)}},[e]),{charIndex:t,word:Ti[r]}}import{Fragment as Ii,jsx as un,jsxs as Io}from"react/jsx-runtime";function Vd(e){let{element:t}=e,n=t.tagName,r=t.id?`#${t.id}`:"",o=t.className?"."+t.className.split(" ").slice(0,2).join("."):"",i=t.reactComponent;return i?`<${i}> ${n}${r}${o}`:`${n}${r}${o}`}var Fl=22,Ri=12;function Ud(s){var l=s,{left:e,top:t,avoidBottom:n,style:r,children:o}=l,i=zn(l,["left","top","avoidBottom","style","children"]);let a=n!==void 0?`${n}px`:"100vh";return un("div",y(f({"data-devtools":"badge-hit-area"},i),{style:f({position:"fixed",left:`max(0px, ${e}px)`,top:`max(0px, ${t}px)`,padding:Ri,transform:`translate(min(0px, calc(100vw - max(0px, ${e}px) - 100%)), min(0px, calc(${a} - max(0px, ${t}px) - 100%)))`},r),children:o}))}function _l({styleModifications:e,isInspecting:t,accentColor:n,annotationGroupCount:r,dispatch:o,inFlightSelectors:i,toolbarRef:s,onHoverSelector:l}){var D;let[a,c]=Gd([]),d=i&&i.size>0,{charIndex:u,word:p}=Mr(!!d);jd(()=>{if(t){c([]);return}let A=null,R=()=>{let K=[];e.forEach((H,$)=>{let q=qt(H.selector);if(!q)return;let v=q.getBoundingClientRect();K.push({selector:H.selector,modIndex:$,top:v.top>=Fl?v.top-Fl:v.bottom,left:v.left,label:Vd(H),changeCount:H.changes.length,annotationNumber:r+$+1})}),c(K)},w=()=>{A&&cancelAnimationFrame(A),A=requestAnimationFrame(R)};R(),window.addEventListener("scroll",w,!0),window.addEventListener("resize",w,!0);let O=new MutationObserver(w);return O.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),O.disconnect(),A&&cancelAnimationFrame(A)}},[e,t,r]);let g=Yd(A=>{let R=e[A];if(!R)return;let w=qt(R.selector);w&&(o({type:"SELECT_ANNOTATION",payload:{id:null}}),o({type:"SET_TOOL",payload:"inspector"}),o({type:"SELECT_ELEMENT",payload:{el:w,info:R.element}}))},[e,o]);if(a.length===0)return null;let M=(D=s==null?void 0:s.current)==null?void 0:D.getBoundingClientRect(),C=M?M.top-8:void 0,b={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},E={overflow:"hidden",textOverflow:"ellipsis",flex:1,minWidth:0};return un(Ii,{children:a.map(A=>{let R=i==null?void 0:i.has(A.selector);return un(Ud,{left:A.left-Ri,top:A.top-Ri,avoidBottom:C,onClick:()=>g(A.modIndex),onMouseEnter:l?()=>l(A.selector):void 0,onMouseLeave:l?()=>l(null):void 0,style:{zIndex:1e4,cursor:"pointer",pointerEvents:"auto"},children:Io("div",{"data-devtools":"badge",style:y(f({},b),{backgroundColor:R?"#999999":n}),children:[Io("span",{children:[A.annotationNumber,"."]}),un("span",{style:E,children:A.label}),Io("span",{style:{opacity:.8},children:["(",A.changeCount," ",A.changeCount===1?"change":"changes",")"]}),R&&Io("span",{style:{opacity:.8,marginLeft:4,display:"inline-flex",alignItems:"center",gap:4},children:[un("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:"currentColor",style:{verticalAlign:"middle"},children:u===1?Io(Ii,{children:[un("circle",{cx:"7",cy:"7",r:"2"}),un("circle",{cx:"17",cy:"7",r:"2"}),un("circle",{cx:"7",cy:"17",r:"2"}),un("circle",{cx:"17",cy:"17",r:"2"})]}):Io(Ii,{children:[un("circle",{cx:"12",cy:"6",r:"2"}),un("circle",{cx:"6",cy:"12",r:"2"}),un("circle",{cx:"18",cy:"12",r:"2"}),un("circle",{cx:"12",cy:"18",r:"2"})]})}),p]})]})},A.selector)})})}import{useEffect as Xd,useState as Jd}from"react";import{Fragment as qd,jsx as zl}from"react/jsx-runtime";function Kd(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 $l({styleModifications:e,accentColor:t}){let[n,r]=Jd([]);if(Xd(()=>{let i=null,s=()=>{let c=[];for(let d of e){let u=qt(d.selector);if(!u)continue;let p=u.getBoundingClientRect();if(p.width===0&&p.height===0)continue;let g=io(u);c.push({selector:d.selector,top:p.top,left:p.left,width:p.width,height:p.height,borderRadius:`${g["top-left"]}px ${g["top-right"]}px ${g["bottom-right"]}px ${g["bottom-left"]}px`})}r(c)},l=()=>{i&&cancelAnimationFrame(i),i=requestAnimationFrame(s)};s(),window.addEventListener("scroll",l,{passive:!0}),window.addEventListener("resize",l,{passive:!0});let a=new MutationObserver(l);return a.observe(document.body,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["style","class"]}),()=>{window.removeEventListener("scroll",l),window.removeEventListener("resize",l),a.disconnect(),i&&cancelAnimationFrame(i)}},[e]),n.length===0)return null;let o=Kd(t,.2);return zl(qd,{children:n.map(i=>{let s={position:"fixed",top:i.top,left:i.left,width:i.width,height:i.height,pointerEvents:"none",zIndex:9995,border:`1px solid ${o}`,borderRadius:i.borderRadius,boxSizing:"border-box"};return zl("div",{"data-devtools":"mod-border",style:s},i.selector)})})}import{useEffect as Wl,useLayoutEffect as Zd,useState as Yl}from"react";import{jsx as Wn,jsxs as Ai}from"react/jsx-runtime";function Li(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 Qd={top:"bottom",bottom:"top",left:"right",right:"left"};function Pi({element:e,padding:t,accentColor:n,hoveredSide:r,draggingSide:o,cursorViewport:i,refreshKey:s}){let[l,a]=Yl(null),[c,d]=Yl(!1);if(Wl(()=>{let I=be=>{(be.key==="Meta"||be.key==="Control")&&d(!0)},Q=be=>{(be.key==="Meta"||be.key==="Control")&&d(!1)},ge=()=>d(!1);return window.addEventListener("keydown",I,!0),window.addEventListener("keyup",Q,!0),window.addEventListener("blur",ge),()=>{window.removeEventListener("keydown",I,!0),window.removeEventListener("keyup",Q,!0),window.removeEventListener("blur",ge)}},[]),Wl(()=>{if(!e){a(null);return}let I=()=>{a(e.getBoundingClientRect())};return I(),window.addEventListener("scroll",I,{passive:!0}),window.addEventListener("resize",I,{passive:!0}),()=>{window.removeEventListener("scroll",I),window.removeEventListener("resize",I)}},[e]),Zd(()=>{e&&a(e.getBoundingClientRect())},[e,t.top,t.right,t.bottom,t.left,s]),!l)return null;let u=l.width,p=l.height,{top:g,right:M,bottom:C,left:b}=t,E="pm-stripe-pattern",D=Li(n,.25),A=Li(n,.1),R=Li(n,.2),w=8,O=2,K={position:"fixed",top:l.top,left:l.left,width:u,height:p,pointerEvents:"none",zIndex:9996,overflow:"visible"},H=["top","right","bottom","left"],$={top:`0,0 ${u},0 ${u-M},${g} ${b},${g}`,right:`${u},0 ${u},${p} ${u-M},${p-C} ${u-M},${g}`,bottom:`0,${p} ${b},${p-C} ${u-M},${p-C} ${u},${p}`,left:`0,0 ${b},${g} ${b},${p-C} 0,${p}`},q={top:{x:u/2-w/2,y:g/2-O/2,w,h:O},bottom:{x:u/2-w/2,y:p-C/2-O/2,w,h:O},left:{x:b/2-O/2,y:p/2-w/2,w:O,h:w},right:{x:u-M/2-O/2,y:p/2-w/2,w:O,h:w}},v=new Set;return o?v.add(o):r&&(v.add(r),c||v.add(Qd[r])),Ai("div",{"data-devtools":"padding-handles",style:K,children:[Ai("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${u} ${p}`,children:[Wn("defs",{children:Wn("pattern",{id:E,patternUnits:"userSpaceOnUse",width:"4",height:"4",patternTransform:"rotate(45)",children:Wn("line",{x1:"0",y1:"0",x2:"0",y2:"4",stroke:D,strokeWidth:"1.5"})})}),Wn("rect",{x:"0.5",y:"0.5",width:Math.max(0,u-1),height:Math.max(0,p-1),fill:"none",stroke:R,strokeWidth:"1"}),H.map(I=>{if(t[I]<=0)return null;let ge=v.has(I);return Ai("g",{opacity:ge?1:.6,children:[Wn("polygon",{points:$[I],fill:A}),Wn("polygon",{points:$[I],fill:`url(#${E})`})]},I)}),H.map(I=>{let Q=q[I],ge=v.has(I);return Wn("rect",{x:Q.x,y:Q.y,width:Q.w,height:Q.h,fill:n,stroke:"#ffffff",strokeWidth:ge?4:2,paintOrder:"stroke"},`handle-${I}`)})]}),i&&(r||o)&&(()=>{let I=o!=null?o:r,Q=Math.round(t[I]);return Wn("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:Q})})()]})}import{useCallback as Rn,useEffect as vn,useMemo as Br,useRef as sn,useState as Wt}from"react";import{Check as Pr,ChevronDown as zi,MoveHorizontal as ta,RotateCcw as Eu,Shrink as ku,X as Mu}from"lucide-react";var eu="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMicgaGVpZ2h0PScxMic+PGRlZnM+PHBhdHRlcm4gaWQ9J2QnIHdpZHRoPSc0JyBoZWlnaHQ9JzQnIHBhdHRlcm5Vbml0cz0ndXNlclNwYWNlT25Vc2UnPjxwYXRoIGQ9J00tMSwxIGwyLC0yIE0wLDQgbDQsLTQgTTMsNSBsMiwtMicgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPScuNScvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9JzEyJyBoZWlnaHQ9JzEyJyBmaWxsPSd1cmwoI2QpJy8+PC9zdmc+",Yn={borderWidth:3,borderStyle:"solid",borderImage:`url("${eu}") 4 / 1.9 / 0 round`};var Tr={"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 Ro(e){var t,n;return(n=(t=Tr[e])==null?void 0:t[0])!=null?n:"px"}function jn(e){let t=e.match(/^([\d.-]+)(.*)$/);return t?{num:parseFloat(t[1]),unit:t[2]||""}:{num:0,unit:""}}function Ir(e,t,n,r){let o=e.trim();if(!o)return"";let i=o.match(/^(-?[\d.]+)\s*(rem|em|px|%)$/i);if(i)return`${parseFloat(i[1])}${i[2].toLowerCase()}`;let s=parseFloat(o);if(!isNaN(s)){if(r){let{unit:l}=jn(n);return`${s}${l||Ro(t)}`}return`${s}${Ro(t)}`}return o}function Bi(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 tu,useEffect as nu,useRef as jl,useState as ou}from"react";import{Plus as Gl,X as ru}from"lucide-react";import{jsx as rn,jsxs as co}from"react/jsx-runtime";var Rr=[{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 iu(e){if(!e||e==="none")return[];let t=[],n=/([\w-]+)\(([^)]+)\)/g,r;for(;(r=n.exec(e))!==null;){let o=r[1],i=r[2],s=parseFloat(i);isNaN(s)||t.push({name:o,value:s})}return t}function Oi(e){return e.length===0?"none":e.map(t=>{var o;let n=Rr.find(i=>i.name===t.name),r=(o=n==null?void 0:n.unit)!=null?o:"";return`${t.name}(${t.value}${r})`}).join(" ")}function Vl({value:e,onChange:t,accentColor:n,modified:r,panelContentRef:o}){let i=iu(e),[s,l]=ou(!1),a=jl(null),c=jl(null);nu(()=>{if(!s)return;let A=R=>{a.current&&!R.composedPath().includes(a.current)&&l(!1)};return document.addEventListener("mousedown",A,!0),()=>document.removeEventListener("mousedown",A,!0)},[s]);let d=Rr.filter(A=>!i.some(R=>R.name===A.name)),u=A=>{let R=[...i,{name:A.name,value:A.defaultValue}];t(Oi(R)),l(!1)},p=A=>{let R=i.filter((w,O)=>O!==A);t(Oi(R))},g=(A,R)=>{let w=i.map((O,K)=>K===A?y(f({},O),{value:R}):O);t(Oi(w))},M={width:"100%",padding:"4px 8px",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',border:"none",borderRadius:2,outline:"none",backgroundColor:"transparent"},C=tu(A=>{var v;if(!c.current)return{position:"fixed",top:0,left:0};let R=c.current.getBoundingClientRect(),w=c.current.closest('[data-devtools="panel"]'),O=w?w.getBoundingClientRect():{top:0,left:0,bottom:9999},K=(v=o==null?void 0:o.current)==null?void 0:v.getBoundingClientRect(),H=A*24+8,q=O.bottom-R.bottom<H;return y(f({position:"fixed"},q?{bottom:O.bottom-R.top+2-O.top}:{top:R.bottom+2-O.top}),{left:K?K.left+4-O.left:R.left-O.left,width:K?K.width-8:140,zIndex:10001})},[o]),b={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)"},E={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"},D=A=>rn("div",{ref:a,style:f(f({},C(A.length)),b),children:A.map(R=>rn("button",{type:"button",onClick:()=>u(R),style:E,onMouseEnter:w=>{w.currentTarget.style.backgroundColor="rgba(0,0,0,0.05)"},onMouseLeave:w=>{w.currentTarget.style.backgroundColor="transparent"},children:R.label},R.name))});return i.length===0?co("div",{children:[co("div",{style:{display:"flex",alignItems:"center",gap:4},children:[rn(On,{modified:!1,children:rn("input",{type:"text",value:"",placeholder:"\u2014",readOnly:!0,style:y(f({},M),{color:"#999",cursor:"default"})})}),rn("button",{ref:c,type:"button",onClick:()=>l(!s),style:{display:"flex",alignItems:"center",justifyContent:"center",width:20,height:20,padding:0,border:"none",borderRadius:2,backgroundColor:"transparent",color:"#94a3b8",cursor:"pointer",flexShrink:0},children:rn(Gl,{size:12})})]}),s&&D(Rr)]}):co("div",{style:{display:"flex",flexDirection:"column",gap:4,position:"relative"},children:[i.map((A,R)=>{let w=Rr.find(O=>O.name===A.name);return w?co("div",{style:{display:"flex",alignItems:"center",gap:4},children:[rn("span",{style:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:r?n:"#94a3b8",fontWeight:r?600:400,width:56,flexShrink:0,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},children:w.label}),rn(On,{modified:r,children:co("div",{style:{display:"flex",alignItems:"center",gap:4,padding:"0 4px"},children:[rn("input",{type:"range",min:w.min,max:w.max,step:w.step,value:A.value,onChange:O=>g(R,parseFloat(O.target.value)),style:{flex:1,height:2,appearance:"none",WebkitAppearance:"none",background:`linear-gradient(to right, ${n} ${(A.value-w.min)/(w.max-w.min)*100}%, rgba(0,0,0,0.1) ${(A.value-w.min)/(w.max-w.min)*100}%)`,borderRadius:1,outline:"none",cursor:"pointer"}}),rn("input",{type:"number",min:w.min,max:w.max,step:w.step,value:w.unit==="px"||w.unit==="deg"?Math.round(A.value):Math.round(A.value*100)/100,onChange:O=>g(R,parseFloat(O.target.value)||0),style:y(f({},M),{width:44,padding:"2px 4px",textAlign:"right",flexShrink:0})}),w.unit&&rn("span",{style:{fontSize:9,color:"#94a3b8",fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',flexShrink:0,width:16},children:w.unit})]})}),rn("button",{type:"button",onClick:()=>p(R),style:{display:"flex",alignItems:"center",justifyContent:"center",width:16,height:16,padding:0,border:"none",borderRadius:2,backgroundColor:"transparent",color:"#94a3b8",cursor:"pointer",flexShrink:0},children:rn(ru,{size:10})})]},A.name):null}),d.length>0&&co("div",{children:[co("button",{ref:c,type:"button",onClick:()=>l(!s),style:{display:"flex",alignItems:"center",gap:4,padding:"2px 4px",border:"none",borderRadius:2,backgroundColor:"transparent",fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#94a3b8",cursor:"pointer"},children:[rn(Gl,{size:10}),"Add filter"]}),s&&D(d)]})]})}import{useCallback as Ao,useEffect as cu,useRef as Lr,useState as Ul}from"react";import{AlignHorizontalSpaceAround as du,AlignVerticalSpaceAround as uu,Columns3 as pu,Grid2x2 as fu,RectangleHorizontal as gu,Rows3 as mu,UnfoldHorizontal as Xl,UnfoldVertical as Jl}from"lucide-react";import{useCallback as su,useEffect as lu,useRef as Zo}from"react";import{jsx as au}from"react/jsx-runtime";var Di=[0,1,2,4,8,12,16,20,24,28,32];function Lo({value:e,onChange:t,onPreview:n,onScrubEnd:r,onReset:o,isModified:i,accentColor:s,defaultUnit:l="rem",snapSteps:a,color:c,style:d,children:u}){let p=Zo(null),g=Zo(null),M=Zo(o),C=Zo(i),b=Zo(!1);M.current=o,C.current=i,lu(()=>{let D=R=>{let w=g.current;if(!w)return;w.hasMoved=!0,b.current=R.shiftKey;let O=w.unit==="rem"||w.unit==="em"?.1:1;w.accum+=R.movementX*O;let K=Math.max(0,Math.round((w.startValue+w.accum)*10)/10);if(R.shiftKey&&a){let H=w.unit==="rem"||w.unit==="em"?parseFloat(getComputedStyle(document.documentElement).fontSize)||16:1,$=w.unit==="rem"||w.unit==="em"?K*H:K,q=a[a.length-1];for(let v=0;v<a.length-1;v++){let I=a[v],Q=a[v+1];if($<=(I+Q)/2){q=I;break}if($<Q){q=Q;break}}$>a[a.length-1]&&(q=Math.round($/8)*8),K=w.unit==="rem"||w.unit==="em"?Math.round(q/H*1e3)/1e3:q}n==null||n(`${K}${w.unit}`)},A=()=>{let R=g.current;if(!R)return;let w=Math.max(0,Math.round((R.startValue+R.accum)*10)/10);if(b.current&&a){let K=R.unit==="rem"||R.unit==="em"?parseFloat(getComputedStyle(document.documentElement).fontSize)||16:1,H=R.unit==="rem"||R.unit==="em"?w*K:w,$=a[a.length-1];for(let q=0;q<a.length-1;q++){let v=a[q],I=a[q+1];if(H<=(v+I)/2){$=v;break}if(H<I){$=I;break}}H>a[a.length-1]&&($=Math.round(H/8)*8),w=R.unit==="rem"||R.unit==="em"?Math.round($/K*1e3)/1e3:$}let O=R.hasMoved&&w!==R.startValue;g.current=null,document.exitPointerLock(),O?t(`${w}${R.unit}`):R.hasMoved?n==null||n(`${R.startValue}${R.unit}`):C.current&&M.current&&M.current(),r==null||r()};return document.addEventListener("mousemove",D),document.addEventListener("mouseup",A),()=>{document.removeEventListener("mousemove",D),document.removeEventListener("mouseup",A)}},[t,n,r]);let E=su(D=>{var w;if(D.button!==0)return;D.preventDefault();let A=jn(e),R=A.unit&&A.unit!=="px"?A.unit:l;g.current={startValue:A.num,unit:R,accum:0,hasMoved:!1},(w=p.current)==null||w.requestPointerLock()},[e,l]);return au("span",{ref:p,onMouseDown:E,title:i?"Click to reset \xB7 Drag to scrub":"Drag to scrub",style:f({color:i?s||"#3b82f6":c||"#999",padding:"0 4px",display:"flex",alignItems:"center",cursor:"ew-resize"},d),children:u})}import{Fragment as Ni,jsx as ke,jsxs as _t}from"react/jsx-runtime";function hu({gridCols:e,gridRows:t,gridModified:n,accentColor:r,onColsChange:o,onRowsChange:i}){return ke(pn,{style:{width:100},children:_t("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",padding:"8px 4px"},children:[ke("input",{type:"number",min:1,max:12,value:e,onChange:s=>o(parseInt(s.target.value)||1),style:y(f({},$t),{width:32,textAlign:"center",padding:2})}),ke("span",{style:{fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:n?r:"#999",fontWeight:n?600:400,fontSize:11,margin:"0 4px"},children:"\xD7"}),ke("input",{type:"number",min:1,max:12,value:t,onChange:s=>i(parseInt(s.target.value)||1),style:y(f({},$t),{width:32,textAlign:"center",padding:2})})]})})}function Kl({element:e,getValue:t,getOriginalValue:n,handleChange:r,isModified:o,onResetProperty:i,isCollapsed:s,onToggle:l,sectionHeaderStyle:a,activeDropdown:c,onDropdownChange:d,panelContentRef:u,accentColor:p,onFieldHover:g,preferredUnit:M,onUnitCycle:C}){let b=d,E=t("display"),D=t("flex-direction"),A=ql(E,D),R=E==="flex"||E==="inline-flex",w=E==="grid",O=R||w,K=t("width"),H=t("height"),$=o("width")?K:br(e,"width"),q=o("height")?H:br(e,"height"),v=Hi(K,$),I=Hi(H,q),Q=t("min-width"),ge=t("max-width"),be=t("min-height"),ue=t("max-height"),ce=Po(t("padding")),Fe=t("gap"),Te=t("row-gap"),oe=t("column-gap"),Le=t("grid-template-columns"),Ae=t("grid-template-rows"),_e=t("overflow"),Pe=Le.split(/\s+/).filter(te=>te&&te!=="none").length||1,Me=Ae.split(/\s+/).filter(te=>te&&te!=="none").length||1,[Z,pe]=Ul(!1),he=c!==null,fe=he||Z,Ie=he?.3:Z?.65:1,We=({mode:te,icon:Re,active:Xe})=>ke("button",{type:"button",onClick:()=>Zl(te,r),style:{flex:1,display:"flex",alignItems:"center",justifyContent:"center",padding:"6px 8px",border:"none",borderRadius:2,backgroundColor:Xe?lo(p,.15):"transparent",color:Xe?p:"#64748b",cursor:"pointer",fontSize:14},children:Re}),it=(te,Re,Xe)=>{Xe==="fixed"?r(te,Re):r(te,Ar(Xe,Re))},lt=te=>{let Re=Po(t("padding")),Xe=te||"0";r("padding",`${Re.top} ${Xe} ${Re.bottom} ${Xe}`)},j=te=>{let Re=Po(t("padding")),Xe=te||"0";r("padding",`${Xe} ${Re.right} ${Xe} ${Re.left}`)},[re,V]=Ul({}),me=Ao((te,Re)=>Xe=>{Re(Xe),V(an=>y(f({},an),{[te]:Xe}))},[]),xe=Ao(te=>{V(Re=>{let Xe=f({},Re);return delete Xe[te],Xe})},[]),Be=Ao(te=>{let Re=Po(t("padding"));$e(e,"padding",`${Re.top} ${te} ${Re.bottom} ${te}`)},[e,t]),we=Ao(te=>{let Re=Po(t("padding"));$e(e,"padding",`${te} ${Re.right} ${te} ${Re.left}`)},[e,t]),nt=Ao(te=>Re=>{$e(e,te,Re)},[e]),Ke=D==="column"||D==="column-reverse",wt=te=>te==="center"?1:te==="flex-end"||te==="end"?2:0,Ot=wt(t("justify-content")),Ze=wt(t("align-items")),It=Ke?Ze:Ot,Dt=Ke?Ot:Ze,mt=Lr(null),vt=Lr({x:0,y:0}),pt=Lr({col:It,row:Dt});pt.current={col:It,row:Dt};let ht=Ao((te,Re)=>{let Xe=["flex-start","center","flex-end"];Ke?(r("justify-content",Xe[Re]),r("align-items",Xe[te])):(r("justify-content",Xe[te]),r("align-items",Xe[Re]))},[Ke,r]),Zt=Lr(ht);Zt.current=ht,cu(()=>{let Re=Xe=>{let an=mt.current;if(!an||!Xe.composedPath().includes(an))return;Xe.preventDefault(),Xe.stopPropagation(),vt.current.x+=Xe.deltaX,vt.current.y+=Xe.deltaY;let{col:Jt,row:ct}=pt.current,Qe=!1;Math.abs(vt.current.x)>=30&&(Jt=Math.max(0,Math.min(2,Jt+(vt.current.x>0?1:-1))),vt.current.x=0,vt.current.y=0,Qe=!0),!Qe&&Math.abs(vt.current.y)>=30&&(ct=Math.max(0,Math.min(2,ct+(vt.current.y>0?1:-1))),vt.current.x=0,vt.current.y=0,Qe=!0),Qe&&(Jt!==pt.current.col||ct!==pt.current.row)&&Zt.current(Jt,ct)};return document.addEventListener("wheel",Re,{passive:!1,capture:!0}),()=>document.removeEventListener("wheel",Re,{capture:!0})},[]);let Nt=()=>ke("div",{ref:mt,onMouseEnter:()=>{pe(!0),u.current&&(u.current.style.overflowY="hidden")},onMouseLeave:()=>{pe(!1),u.current&&(u.current.style.overflowY="auto")},style:{width:56,height:56,backgroundColor:En,borderRadius:2,display:"grid",gridTemplateColumns:"repeat(3, 1fr)",gridTemplateRows:"repeat(3, 1fr)",padding:6,gap:2,touchAction:"none"},children:[0,1,2].map(te=>[0,1,2].map(Re=>ke("button",{type:"button",onClick:()=>ht(Re,te),style:{width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center",border:"none",backgroundColor:"transparent",cursor:"pointer",padding:0},children:Re===It&&te===Dt?ke("svg",{width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",style:{flexShrink:0},children:Re===0?_t(Ni,{children:[ke("rect",{x:"1",y:"1.5",width:"8",height:"1.2",rx:"0.5",fill:p}),ke("rect",{x:"1",y:"4.4",width:"5",height:"1.2",rx:"0.5",fill:p}),ke("rect",{x:"1",y:"7.3",width:"7",height:"1.2",rx:"0.5",fill:p})]}):Re===1?_t(Ni,{children:[ke("rect",{x:"1",y:"1.5",width:"8",height:"1.2",rx:"0.5",fill:p}),ke("rect",{x:"2.5",y:"4.4",width:"5",height:"1.2",rx:"0.5",fill:p}),ke("rect",{x:"1.5",y:"7.3",width:"7",height:"1.2",rx:"0.5",fill:p})]}):_t(Ni,{children:[ke("rect",{x:"1",y:"1.5",width:"8",height:"1.2",rx:"0.5",fill:p}),ke("rect",{x:"4",y:"4.4",width:"5",height:"1.2",rx:"0.5",fill:p}),ke("rect",{x:"2",y:"7.3",width:"7",height:"1.2",rx:"0.5",fill:p})]})}):ke("div",{style:{width:5,height:5,borderRadius:"50%",backgroundColor:"#aaa"}})},`${te}-${Re}`)))}),ln=o("grid-template-columns")||o("grid-template-rows");return _t("div",{style:{borderBottom:"1px solid rgba(0,0,0,0.08)"},children:[ke("div",{style:a,children:ke("span",{children:O?"Auto layout":"Layout"})}),_t("div",{style:{padding:"8px 12px"},children:[_t("div",{style:{display:"flex",gap:2,marginBottom:8,backgroundColor:En,borderRadius:2,padding:2,opacity:Ie,transition:"opacity 150ms ease"},children:[ke(We,{mode:"block",icon:ke(gu,{size:16}),active:A==="block"}),ke(We,{mode:"flex-col",icon:ke(mu,{size:16}),active:A==="flex-col"}),ke(We,{mode:"flex-row",icon:ke(pu,{size:16}),active:A==="flex-row"}),ke(We,{mode:"grid",icon:ke(fu,{size:16}),active:A==="grid"})]}),_t("div",{style:{display:"flex",gap:4,marginBottom:8},children:[ke(Fi,{label:"W",property:"width",cssValue:v==="fixed"?K:`${Math.round(e.getBoundingClientRect().width)}px`,mode:v,onValueChange:te=>r("width",te),onModeChange:te=>{if(te==="fixed"){let Re=e.getBoundingClientRect();r("width",`${Math.round(Re.width)}px`)}else r("width",Ar(te,K))},modified:o("width"),dimmed:he&&c!=="width",dropdownOpen:c==="width",onDropdownChange:te=>b(te?"width":null),panelContentRef:u,accentColor:p,onReset:()=>i("width"),minValue:Q!=="none"&&Q!=="0px"&&Q!=="auto"?Q:"",maxValue:ge!=="none"&&ge!=="auto"?ge:"",onMinChange:te=>r("min-width",te||"0"),onMaxChange:te=>r("max-width",te||"none"),onMinReset:()=>i("min-width"),onMaxReset:()=>i("max-width"),minModified:o("min-width"),maxModified:o("max-width")}),ke(Fi,{label:"H",property:"height",cssValue:I==="fixed"?H:`${Math.round(e.getBoundingClientRect().height)}px`,mode:I,onValueChange:te=>r("height",te),onModeChange:te=>{if(te==="fixed"){let Re=e.getBoundingClientRect();r("height",`${Math.round(Re.height)}px`)}else r("height",Ar(te,H))},modified:o("height"),dimmed:he&&c!=="height",dropdownOpen:c==="height",onDropdownChange:te=>b(te?"height":null),panelContentRef:u,minValue:be!=="none"&&be!=="0px"&&be!=="auto"?be:"",maxValue:ue!=="none"&&ue!=="auto"?ue:"",onMinChange:te=>r("min-height",te||"0"),onMaxChange:te=>r("max-height",te||"none"),onMinReset:()=>i("min-height"),onMaxReset:()=>i("max-height"),minModified:o("min-height"),maxModified:o("max-height"),accentColor:p,onReset:()=>i("height")})]}),R&&_t("div",{onMouseEnter:()=>g==null?void 0:g("gap"),onMouseLeave:()=>g==null?void 0:g("element"),style:{display:"flex",gap:8,marginBottom:8},children:[ke("div",{style:{opacity:he?.3:1,transition:"opacity 150ms ease"},children:Nt()}),_t("div",{style:{flex:1,opacity:Ie,transition:"opacity 150ms ease"},children:[ke("div",{onClick:o("gap")?()=>i("gap"):void 0,title:o("gap")?"Click to reset":void 0,style:{fontSize:9,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:o("gap")?p:"#999",fontWeight:o("gap")?600:400,marginBottom:2,cursor:o("gap")?"pointer":"default"},children:"Gap"}),ke(pn,{dimmed:he,children:_t("div",{style:{display:"flex",alignItems:"center"},children:[ke(Lo,{value:Fe,onChange:te=>{xe("gap"),r("gap",te)},onPreview:me("gap",nt("gap")),onScrubEnd:()=>xe("gap"),onReset:()=>i("gap"),isModified:o("gap"),accentColor:p,defaultUnit:M,children:D==="column"||D==="column-reverse"?ke(Jl,{size:12,strokeWidth:o("gap")?2.5:1.5}):ke(Xl,{size:12,strokeWidth:o("gap")?2.5:1.5})}),ke(Cn,{property:"gap",value:re.gap||Fe,onChange:te=>r("gap",te),isModified:o("gap")||"gap"in re,style:y(f({},$t),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:M,onUnitCycle:C})]})})]})]}),w&&_t("div",{onMouseEnter:()=>g==null?void 0:g("gap"),onMouseLeave:()=>g==null?void 0:g("element"),style:{display:"flex",gap:8,marginBottom:8,opacity:Ie,transition:"opacity 150ms ease"},children:[ke(hu,{gridCols:Pe,gridRows:Me,gridModified:ln,accentColor:p,onColsChange:te=>r("grid-template-columns",`repeat(${te}, 1fr)`),onRowsChange:te=>r("grid-template-rows",`repeat(${te}, 1fr)`)}),_t("div",{style:{flex:1,display:"flex",flexDirection:"column",gap:4},children:[ke(pn,{dimmed:he,children:_t("div",{style:{display:"flex",alignItems:"center"},children:[ke(Lo,{value:oe||Fe,onChange:te=>{xe("column-gap"),r("column-gap",te)},onPreview:me("column-gap",nt("column-gap")),onScrubEnd:()=>xe("column-gap"),onReset:()=>i("column-gap"),isModified:o("column-gap"),accentColor:p,defaultUnit:M,children:ke(Xl,{size:12,strokeWidth:o("column-gap")?2.5:1.5})}),ke(Cn,{property:"column-gap",value:re["column-gap"]||oe||Fe,onChange:te=>r("column-gap",te),isModified:o("column-gap")||"column-gap"in re,placeholder:"col",style:y(f({},$t),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:M,onUnitCycle:C})]})}),ke(pn,{dimmed:he,children:_t("div",{style:{display:"flex",alignItems:"center"},children:[ke(Lo,{value:Te||Fe,onChange:te=>{xe("row-gap"),r("row-gap",te)},onPreview:me("row-gap",nt("row-gap")),onScrubEnd:()=>xe("row-gap"),onReset:()=>i("row-gap"),isModified:o("row-gap"),accentColor:p,defaultUnit:M,children:ke(Jl,{size:12,strokeWidth:o("row-gap")?2.5:1.5})}),ke(Cn,{property:"row-gap",value:re["row-gap"]||Te||Fe,onChange:te=>r("row-gap",te),isModified:o("row-gap")||"row-gap"in re,placeholder:"row",style:y(f({},$t),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:M,onUnitCycle:C})]})})]})]}),O&&_t("div",{onMouseEnter:()=>g==null?void 0:g("padding"),onMouseLeave:()=>g==null?void 0:g("element"),style:{display:"flex",gap:4,marginBottom:8,opacity:Ie,transition:"opacity 150ms ease"},children:[ke(pn,{style:{flex:1},dimmed:he,children:_t("div",{style:{display:"flex",alignItems:"center"},children:[ke(Lo,{value:ce.left,onChange:te=>{xe("padding-h"),lt(te)},onPreview:me("padding-h",Be),onScrubEnd:()=>xe("padding-h"),onReset:()=>i("padding"),isModified:o("padding"),accentColor:p,defaultUnit:M,snapSteps:Di,children:ke(du,{size:12,strokeWidth:o("padding")?2.5:1.5})}),ke(Cn,{property:"padding",value:re["padding-h"]||ce.left,onChange:te=>lt(te),isModified:o("padding")||"padding-h"in re,placeholder:"H pad",style:y(f({},$t),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:M,onUnitCycle:C})]})}),ke(pn,{style:{flex:1},dimmed:he,children:_t("div",{style:{display:"flex",alignItems:"center"},children:[ke(Lo,{value:ce.top,onChange:te=>{xe("padding-v"),j(te)},onPreview:me("padding-v",we),onScrubEnd:()=>xe("padding-v"),onReset:()=>i("padding"),isModified:o("padding"),accentColor:p,defaultUnit:M,snapSteps:Di,children:ke(uu,{size:12,strokeWidth:o("padding")?2.5:1.5})}),ke(Cn,{property:"padding",value:re["padding-v"]||ce.top,onChange:te=>j(te),isModified:o("padding")||"padding-v"in re,placeholder:"V pad",style:y(f({},$t),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:M,onUnitCycle:C})]})})]}),_t("label",{style:{display:"flex",alignItems:"center",gap:8,cursor:"pointer",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#64748b",opacity:Ie,transition:"opacity 150ms ease"},children:[ke("input",{type:"checkbox",checked:_e==="hidden",onChange:te=>r("overflow",te.target.checked?"hidden":"visible"),style:{margin:0,accentColor:p}}),"Clip content"]})]})]})}import{AlignCenter as yu,AlignJustify as bu,AlignLeft as xu,AlignRight as vu,Baseline as Su,ChevronDown as wu,WholeWord as Cu}from"lucide-react";import{jsx as ut,jsxs as Dn}from"react/jsx-runtime";var Ql={100:"Thin",200:"Extra Light",300:"Light",400:"Regular",500:"Medium",600:"Semi Bold",700:"Bold",800:"Extra Bold",900:"Black"};function ea({element:e,getValue:t,handleChange:n,isModified:r,onResetProperty:o,isCollapsed:i,onToggle:s,sectionHeaderStyle:l,accentColor:a,colorVariables:c,activeColorDropdown:d,onColorDropdownChange:u,panelContentRef:p,preferredUnit:g,onUnitCycle:M}){var I;let C=t("font-family"),b=t("font-size"),E=t("font-weight"),D=t("line-height"),A=t("letter-spacing"),R=t("text-align"),w=t("color"),O=String(E),K=Ql[O]||O,H=Xo(e,w),$=w.includes("var(")?null:Jo(H,c),q=({align:Q,icon:ge})=>{let be=R===Q;return ut("button",{type:"button",onClick:()=>n("text-align",Q),style:{flex:1,display:"flex",alignItems:"center",justifyContent:"center",padding:"6px 8px",border:"none",borderRadius:2,backgroundColor:be?lo(a,.15):"transparent",color:be?a:"#64748b",cursor:"pointer"},children:ge})},v=((I=C.split(",")[0])==null?void 0:I.trim().replace(/^["']|["']$/g,""))||"System";return Dn("div",{style:{borderBottom:"1px solid rgba(0,0,0,0.08)"},children:[ut("div",{style:l,children:ut("span",{children:"Typography"})}),Dn("div",{style:{padding:"8px 12px",display:"flex",flexDirection:"column",gap:4},children:[ut(pn,{children:Dn("div",{style:{display:"flex",alignItems:"center",padding:"6px 8px"},children:[ut("input",{type:"text",value:C,onChange:Q=>n("font-family",Q.target.value),style:y(f({},$t),{flex:1,minWidth:0,padding:0,fontWeight:r("font-family")?600:400,color:r("font-family")?a:"inherit"}),title:C}),ut(wu,{size:12,style:{color:"#999",flexShrink:0,marginLeft:4}})]})}),Dn("div",{style:{display:"flex",gap:4},children:[ut(pn,{style:{flex:1},children:ut("select",{value:O,onChange:Q=>n("font-weight",Q.target.value),style:y(f({},$t),{padding:"6px 8px",paddingLeft:4,paddingRight:20,cursor:"pointer",fontWeight:r("font-weight")?600:400,color:r("font-weight")?a:"inherit"}),children:Object.entries(Ql).map(([Q,ge])=>ut("option",{value:Q,children:ge},Q))})}),ut(pn,{style:{flex:1},children:ut("div",{style:{display:"flex",alignItems:"center",position:"relative"},children:ut(Cn,{property:"font-size",value:b,onChange:Q=>n("font-size",Q),isModified:r("font-size"),min:1,max:999,style:y(f({},$t),{padding:"6px 8px",paddingRight:24,fontWeight:r("font-size")?600:400,color:r("font-size")?a:"inherit"}),unitStyle:{position:"absolute",right:8,top:"50%",transform:"translateY(-50%)",fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999"},preferredUnit:g,onUnitCycle:M})})})]}),Dn("div",{style:{display:"flex",gap:4},children:[ut(pn,{style:{flex:1},children:Dn("div",{style:{display:"flex",alignItems:"center",padding:"6px 8px",gap:4},children:[ut(Su,{size:12,style:{color:r("line-height")?a:"#999",flexShrink:0}}),ut(Cn,{property:"line-height",value:D,onChange:Q=>n("line-height",Q),isModified:r("line-height"),step:.1,min:0,placeholder:"Auto",style:y(f({},$t),{flex:1,minWidth:0,padding:0,fontWeight:r("line-height")?600:400,color:r("line-height")?a:"inherit"}),showUnit:!1})]})}),ut(pn,{style:{flex:1},children:Dn("div",{style:{display:"flex",alignItems:"center",padding:"6px 8px",gap:4},children:[ut(Cu,{size:12,style:{color:r("letter-spacing")?a:"#999",flexShrink:0}}),ut(Cn,{property:"letter-spacing",value:A,onChange:Q=>n("letter-spacing",Q),isModified:r("letter-spacing"),step:.1,placeholder:"\u2014",style:y(f({},$t),{flex:1,minWidth:0,padding:0,fontWeight:r("letter-spacing")?600:400,color:r("letter-spacing")?a:"inherit"}),showUnit:!1})]})})]}),Dn("div",{style:{display:"flex",gap:2,backgroundColor:En,borderRadius:2,padding:2},children:[ut(q,{align:"left",icon:ut(xu,{size:14})}),ut(q,{align:"center",icon:ut(yu,{size:14})}),ut(q,{align:"right",icon:ut(vu,{size:14})}),ut(q,{align:"justify",icon:ut(bu,{size:14})})]}),Dn("div",{style:{display:"flex",alignItems:"center",gap:8,padding:"4px 0"},children:[ut("span",{onClick:r("color")?()=>o("color"):void 0,title:r("color")?"Click to reset":void 0,style:{fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:r("color")?a:"#64748b",fontWeight:r("color")?600:400,cursor:r("color")?"pointer":"default",width:40,flexShrink:0},children:"Color"}),ut("div",{style:{flex:1,minWidth:0},children:ut(_i,{value:w,resolvedValue:H,colorVariables:c,matchingVariable:$,onChange:Q=>n("color",Q),accentColor:a,modified:r("color"),panelContentRef:p,isDropdownOpen:d==="color",onDropdownChange:Q=>u(Q?"color":null)})})]})]})]})}import{Fragment as Iu,jsx as de,jsxs as gt}from"react/jsx-runtime";var na=[{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 Tu(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 Hi(e,t){return!t||e==="auto"||e==="fit-content"||e==="max-content"||e==="min-content"?"hug":e==="100%"||t==="100%"?"fill":"fixed"}function Ar(e,t){switch(e){case"hug":return"fit-content";case"fill":return"100%";case"fixed":{let n=jn(t);if(typeof n.num=="number"&&!isNaN(n.num)){let r=n.unit==="%"?"px":n.unit||"px";return`${n.num}${r}`}return"auto"}}}function Po(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 ql(e,t){return e==="grid"?"grid":e==="flex"||e==="inline-flex"?t==="column"||t==="column-reverse"?"flex-col":"flex-row":"block"}function Zl(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 En="rgba(0, 0, 0, 0.04)",$t={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 Fi({label:e,property:t,cssValue:n,mode:r,onValueChange:o,onModeChange:i,modified:s,dimmed:l,dropdownOpen:a,onDropdownChange:c,panelContentRef:d,accentColor:u="#3b82f6",onReset:p,minValue:g,maxValue:M,onMinChange:C,onMaxChange:b,onMinReset:E,onMaxReset:D,minModified:A,maxModified:R}){let w=jn(n),O=s?w.unit||Ro(t):Ro(t),K=!s&&w.unit&&w.unit!==O?Bi(w.num,O):w.num,[H,$]=Wt(!1),[q,v]=Wt(String(K)),[I,Q]=Wt(!1),ge=sn(null),be=sn(null),ue=sn(null),ce=sn(!1);vn(()=>{H||v(String(K))},[K,H]),vn(()=>{if(!a)return;let Me=pe=>{be.current&&!pe.composedPath().includes(be.current)&&ue.current&&!pe.composedPath().includes(ue.current)&&(c==null||c(!1))},Z=pe=>{pe.key==="Escape"&&(c==null||c(!1))};return document.addEventListener("mousedown",Me),document.addEventListener("keydown",Z),()=>{document.removeEventListener("mousedown",Me),document.removeEventListener("keydown",Z)}},[a,c]),vn(()=>{H&&ge.current&&(ge.current.focus(),ge.current.select())},[H]);let Fe=()=>{let Me=Ir(q,t,n,s);o(Me||`${Math.max(0,parseFloat(q)||0)}${O}`),$(!1)},Te=()=>{if(ce.current){ce.current=!1;return}Fe()},oe=Me=>{if(Me.key==="Enter"){Fe();return}if(Me.key==="Escape"){ce.current=!0,v(String(K)),$(!1);return}if(Me.key==="ArrowUp"||Me.key==="ArrowDown"){Me.preventDefault();let Z=Me.key==="ArrowUp"?1:-1,pe=Me.shiftKey?8:Me.altKey?.1:1,he=parseFloat(q)||0,fe=Math.round(Math.max(0,he+Z*pe)*1e3)/1e3;v(String(fe)),o(`${fe}${O}`)}},Le={fixed:"Fixed",hug:"Hug",fill:"Fill"},Ae={fixed:de(ta,{size:12}),hug:de(ku,{size:12}),fill:de(ta,{size:12})},_e=()=>{c==null||c(!a)},Pe=()=>{if(!ue.current||!(d!=null&&d.current))return{position:"absolute",top:"100%",left:-4,right:-4,width:"calc(100% + 8px)",marginTop:4};let Me=ue.current.getBoundingClientRect(),Z=d.current.getBoundingClientRect(),pe=d.current.closest('[data-devtools="panel"]'),he=pe?pe.getBoundingClientRect():{top:0,left:0};return{position:"fixed",top:Me.bottom+4-he.top,left:Z.left+4-he.left,width:Z.width-8}};return gt("div",{ref:ue,onMouseEnter:()=>Q(!0),onMouseLeave:()=>Q(!1),style:{flex:1,display:"flex",alignItems:"center",position:"relative",borderRadius:2,border:"1px solid",borderColor:H?u:I?"rgba(0,0,0,0.15)":"transparent",backgroundColor:En,transition:"border-color 100ms ease, opacity 150ms ease",opacity:l?.3:1},children:[de("span",{onClick:s&&p?p:void 0,title:s?"Click to reset":void 0,style:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:s?u:"#999",fontWeight:s?600:400,padding:"0 8px",flexShrink:0,cursor:s?"pointer":"default"},children:e}),r==="fixed"?H?de("input",{ref:ge,type:"text",inputMode:"numeric",value:q,onChange:Me=>v(Me.target.value),onKeyDown:oe,onBlur:Te,style:y(f({},$t),{flex:1,minWidth:0,padding:"4px 2px"})}):de("span",{onClick:()=>$(!0),style:{flex:1,padding:"4px 2px",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',cursor:"text"},children:K}):de("span",{style:{flex:1}}),gt("button",{type:"button",onClick:_e,style:{display:"flex",alignItems:"center",gap:2,padding:"4px 8px",border:"none",outline:"none",backgroundColor:"transparent",color:"#999",fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',cursor:"pointer",flexShrink:0},children:[Le[r],de(zi,{size:12})]}),a&>("div",{ref:be,style:y(f({},Pe()),{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:[gt("button",{type:"button",onClick:()=>{i("fixed"),c==null||c(!1)},style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"10px 12px",border:"none",outline:"none",backgroundColor:r==="fixed"?"#f1f5f9":"transparent",color:"#1e293b",fontWeight:r==="fixed"?600:400,cursor:"pointer",textAlign:"left"},children:[Ae.fixed,gt("span",{children:["Fixed ",t," (",n,")"]}),r==="fixed"&&de(Pr,{size:14,style:{marginLeft:"auto"}})]}),gt("button",{type:"button",onClick:()=>{i("hug"),c==null||c(!1)},style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"10px 12px",border:"none",outline:"none",backgroundColor:r==="hug"?"#f1f5f9":"transparent",color:"#1e293b",fontWeight:r==="hug"?600:400,cursor:"pointer",textAlign:"left"},children:[Ae.hug,de("span",{children:"Hug contents"}),r==="hug"&&de(Pr,{size:14,style:{marginLeft:"auto"}})]}),gt("button",{type:"button",onClick:()=>{i("fill"),c==null||c(!1)},style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"10px 12px",border:"none",outline:"none",backgroundColor:r==="fill"?"#f1f5f9":"transparent",color:"#1e293b",fontWeight:r==="fill"?600:400,cursor:"pointer",textAlign:"left"},children:[Ae.fill,de("span",{children:"Fill container"}),r==="fill"&&de(Pr,{size:14,style:{marginLeft:"auto"}})]}),de("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",margin:"4px 0"}}),gt("div",{style:{padding:"8px 12px",display:"flex",flexDirection:"column",gap:4},children:[gt("div",{style:{display:"flex",alignItems:"center",backgroundColor:En,borderRadius:2,padding:"4px 8px"},children:[de("span",{onClick:A?Me=>{Me.stopPropagation(),E==null||E()}:void 0,title:A?"Click to reset":void 0,style:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:A?u:"#999",fontWeight:A?600:400,marginRight:8,flexShrink:0,cursor:A?"pointer":"default"},children:"Min"}),de("input",{type:"text",value:g||"",placeholder:"\u2014",onChange:Me=>C==null?void 0:C(Me.target.value),onClick:Me=>Me.stopPropagation(),style:y(f({},$t),{flex:1,minWidth:0,padding:0,textAlign:"right",color:A?u:"inherit",fontWeight:A?600:400})})]}),gt("div",{style:{display:"flex",alignItems:"center",backgroundColor:En,borderRadius:2,padding:"4px 8px"},children:[de("span",{onClick:R?Me=>{Me.stopPropagation(),D==null||D()}:void 0,title:R?"Click to reset":void 0,style:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:R?u:"#999",fontWeight:R?600:400,marginRight:8,flexShrink:0,cursor:R?"pointer":"default"},children:"Max"}),de("input",{type:"text",value:M||"",placeholder:"\u2014",onChange:Me=>b==null?void 0:b(Me.target.value),onClick:Me=>Me.stopPropagation(),style:y(f({},$t),{flex:1,minWidth:0,padding:0,textAlign:"right",color:R?u:"inherit",fontWeight:R?600:400})})]})]})]})]})}function pn({children:e,style:t,dimmed:n}){let[r,o]=Wt(!1);return de("div",{onMouseEnter:()=>o(!0),onMouseLeave:()=>o(!1),style:f({position:"relative",borderRadius:2,border:"1px solid",borderColor:r?"rgba(0,0,0,0.15)":"transparent",backgroundColor:En,transition:"border-color 100ms ease, opacity 150ms ease",opacity:n?.3:1},t),children:e})}function On({children:e}){let[t,n]=Wt(!1);return de("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:En,transition:"border-color 100ms ease"},children:e})}function Cn({property:e,value:t,onChange:n,isModified:r=!1,step:o=1,min:i,max:s,style:l,placeholder:a,showUnit:c=!0,unitStyle:d,preferredUnit:u,onUnitCycle:p}){let g=jn(t),M=Ro(e),C=Tr[e],E=u&&C&&C.includes(u)?u:M,D=r&&g.unit||E,A=!r&&g.unit&&g.unit!==D?Bi(g.num,D):g.num,[R,w]=Wt(!1),[O,K]=Wt(""),H=Te=>{w(!0),K(String(A||"")),requestAnimationFrame(()=>Te.target.select())},$=()=>{if(w(!1),O.trim()){let Te=Ir(O,e,t,r);Te&&n(Te)}},q=Te=>{let oe=Te.target.value;K(oe);let Le=oe.trim(),Ae=Le.match(/^(-?[\d.]+)\s*(rem|em|px|%)$/i),_e=Le.match(/^(-?[\d.]+)$/);if(Ae){let Pe=parseFloat(Ae[1]);isNaN(Pe)||n(`${Pe}${Ae[2].toLowerCase()}`)}else if(_e){let Pe=parseFloat(_e[1]);isNaN(Pe)||n(`${Pe}${D}`)}},v=Te=>{if(Te.key==="Enter"){if(O.trim()){let oe=Ir(O,e,t,r);oe&&n(oe)}Te.target.blur();return}if(Te.key==="ArrowUp"||Te.key==="ArrowDown"){Te.preventDefault();let oe=Te.shiftKey?10:Te.altKey?.1:1,Le=(Te.key==="ArrowUp"?1:-1)*o*oe,Ae=parseFloat(O)||A||0,_e=Math.round((Ae+Le)*1e3)/1e3;i!==void 0&&(_e=Math.max(i,_e)),s!==void 0&&(_e=Math.min(s,_e)),K(String(_e)),n(`${_e}${D}`)}},I=/^-?[\d.]/.test(t.trim()),Q=R?O:I?String(A):"",be=R&&/\s*(rem|em|px|%)\s*$/i.test(O)?"":D,ue=p&&(be==="rem"||be==="px"),ce={fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",pointerEvents:"none"},Fe=y(f({},d!=null?d:ce),{pointerEvents:"auto",cursor:"pointer"});return gt(Iu,{children:[de("input",{type:"text",inputMode:"decimal",value:Q,onFocus:H,onBlur:$,onChange:q,onKeyDown:v,placeholder:a,style:l}),c&&be&&de("span",{style:ue?Fe:d!=null?d:ce,onClick:ue?p:void 0,title:ue?"Click to switch units":void 0,children:be})]})}function _i({value:e,resolvedValue:t,colorVariables:n,matchingVariable:r,onChange:o,accentColor:i="#3b82f6",modified:s,panelContentRef:l,isDropdownOpen:a,onDropdownChange:c}){let[d,u]=Wt(!1),p=!e.includes("var(")&&r?r.usage:e,[g,M]=Wt(p),[C,b]=Wt(!1),[E,D]=Wt(!1),[A,R]=Wt(!1),w=sn(null),O=sn(null),K=sn(null),H=a!==void 0?a:C,$=c||b,q=Rn(()=>{if(!K.current)return{position:"fixed",top:0,left:0,width:200};let oe=K.current.getBoundingClientRect(),Le=K.current.closest('[data-devtools="panel"]'),Ae=Le?Le.getBoundingClientRect():{top:0,left:0};if(l!=null&&l.current){let _e=l.current.getBoundingClientRect();return{position:"fixed",top:oe.bottom+4-Ae.top,left:_e.left+4-Ae.left,width:_e.width-8}}return{position:"fixed",top:oe.bottom+4-Ae.top,left:oe.left-Ae.left,width:oe.width}},[l]);vn(()=>{if(!d){let oe=!e.includes("var(")&&r?r.usage:e;M(oe)}},[e,d,r]),vn(()=>{if(!H&&!E)return;let oe=Ae=>{K.current&&!Ae.composedPath().includes(K.current)&&($(!1),D(!1))},Le=Ae=>{Ae.key==="Escape"&&($(!1),D(!1))};return document.addEventListener("mousedown",oe),document.addEventListener("keydown",Le),()=>{document.removeEventListener("mousedown",oe),document.removeEventListener("keydown",Le)}},[H,E]),vn(()=>{d&&w.current&&(w.current.focus(),w.current.select())},[d]);let v=Br(()=>{if(!g||g.startsWith("#")||g.startsWith("rgb")||g.startsWith("hsl")||g.startsWith("oklch"))return[];let oe=g.toLowerCase();return n.filter(Le=>Le.name.toLowerCase().includes(oe)||Le.usage.toLowerCase().includes(oe)).slice(0,8)},[g,n]),I=()=>{o(g),u(!1),D(!1)},Q=oe=>{M(oe),oe.includes("var")||oe.includes("--")||oe.length>0&&!oe.startsWith("#")?D(!0):D(!1)},ge=oe=>{M(oe.usage),o(oe.usage),$(!1),D(!1),u(!1)},be=()=>{setTimeout(()=>{!H&&!E&&I()},150)},ue=oe=>{oe.key==="Enter"?I():oe.key==="Escape"&&(M(e),u(!1),D(!1))},ce=Br(()=>{let oe=t.trim().toLowerCase();if(oe.startsWith("#"))return oe.length===4?`#${oe[1]}${oe[1]}${oe[2]}${oe[2]}${oe[3]}${oe[3]}`:oe.slice(0,7);let Le=oe.match(/rgba?\((\d+),?\s*(\d+),?\s*(\d+)/);if(Le){let _e=parseInt(Le[1],10).toString(16).padStart(2,"0"),Pe=parseInt(Le[2],10).toString(16).padStart(2,"0"),Me=parseInt(Le[3],10).toString(16).padStart(2,"0");return`#${_e}${Pe}${Me}`}let Ae=oe.match(/oklch\(\s*([\d.]+)/);if(Ae){let _e=Math.max(0,Math.min(1,parseFloat(Ae[1]))),Pe=Math.round(_e*255).toString(16).padStart(2,"0");return`#${Pe}${Pe}${Pe}`}return"#000000"},[t]),Fe=oe=>{let Le=oe.target.value;M(Le),o(Le)},Te=e.includes("var(");return gt("div",{ref:K,onMouseEnter:()=>R(!0),onMouseLeave:()=>R(!1),style:{position:"relative",borderRadius:2,border:"1px solid",borderColor:d?i:A?"rgba(0,0,0,0.15)":"transparent",backgroundColor:En,transition:"border-color 100ms ease",overflow:"hidden"},children:[gt("div",{style:{display:"flex",alignItems:"center",minWidth:0},children:[gt("div",{style:{position:"relative",marginLeft:8,flexShrink:0},children:[de("input",{type:"color",value:ce,onChange:Fe,style:{width:12,height:12,padding:0,border:"none",cursor:"pointer",opacity:0,position:"absolute",top:0,left:0}}),de("div",{style:{width:12,height:12,borderRadius:2,backgroundColor:t,border:"1px solid rgba(0,0,0,0.1)",pointerEvents:"none"}})]}),d?de("input",{ref:w,type:"text",value:g,onChange:oe=>Q(oe.target.value),onKeyDown:ue,onBlur:be,style:y(f({},$t),{flex:1,minWidth:0})}):de("span",{onClick:()=>u(!0),style:{flex:1,minWidth:0,padding:"4px 8px",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',cursor:"text",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",color:s?i:"inherit"},title:p,children:p}),n.length>0&&de("button",{type:"button",onClick:()=>$(!H),style:{display:"flex",alignItems:"center",justifyContent:"center",width:20,height:24,border:"none",background:"none",cursor:"pointer",color:"#999",flexShrink:0},children:de(zi,{size:12})})]}),E&&v.length>0&&de("div",{style:y(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:v.map(oe=>gt("button",{type:"button",onClick:()=>ge(oe),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:[de("div",{style:{width:14,height:14,borderRadius:2,backgroundColor:oe.value,border:"1px solid rgba(0,0,0,0.1)",flexShrink:0}}),de("span",{style:{flex:1,overflow:"hidden",textOverflow:"ellipsis"},children:oe.name})]},oe.name))}),H&&de("div",{ref:O,style:y(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(oe=>gt("button",{type:"button",onClick:()=>ge(oe),style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"10px 12px",border:"none",backgroundColor:p===oe.usage||e===oe.usage?"#f1f5f9":"transparent",color:"#1e293b",fontWeight:p===oe.usage||e===oe.usage?600:400,cursor:"pointer",textAlign:"left",fontSize:12},children:[de("div",{style:{width:14,height:14,borderRadius:2,backgroundColor:oe.value,border:"1px solid rgba(0,0,0,0.1)",flexShrink:0}}),de("span",{style:{flex:1,overflow:"hidden",textOverflow:"ellipsis"},children:oe.name}),(p===oe.usage||e===oe.usage)&&de(Pr,{size:14,style:{marginLeft:"auto",flexShrink:0}})]},oe.name))})]})}function oa({element:e,elementInfo:t,selector:n,styleModifications:r,dispatch:o,onClose:i,onHover:s,accentColor:l="#3b82f6",toolbarRef:a}){var it,lt;let c=sn(null),d=sn(null),[u,p]=Wt(()=>{try{return!!localStorage.getItem("devtools-panel-position")}catch(j){return!1}});vn(()=>{if(u)return;let j=setTimeout(()=>p(!0),50);return()=>clearTimeout(j)},[u]);let[g,M]=Wt(null),[C,b]=Wt(null),E=g!==null||C!==null,[D,A]=Wt("rem"),R=Rn(()=>{A(j=>j==="rem"?"px":"rem")},[]),w=sn(new Map),[O,K]=Wt(""),H=Br(()=>vi(),[]);vn(()=>{let j=re=>{var me;if(re.key!=="Escape")return;let V=document.activeElement;V&&((me=c.current)!=null&&me.contains(V))||i()};return window.addEventListener("keydown",j),()=>window.removeEventListener("keydown",j)},[i]);let $=sn({top:0,left:0,maxHeight:400}),[,q]=Wt(0),v="devtools-panel-position",I=sn({x:0,y:0}),Q=sn(null),ge=sn(!1);vn(()=>{try{let j=localStorage.getItem(v);if(j){let re=JSON.parse(j);typeof re.top=="number"&&typeof re.left=="number"&&(ge.current=!0,$.current=y(f({},$.current),{top:re.top,left:re.left}))}}catch(j){}},[]),vn(()=>{let j=V=>{var pt;let me=Q.current;if(!me)return;let xe=me.startOffsetX+(V.clientX-me.startX),Be=me.startOffsetY+(V.clientY-me.startY),we=280,nt=16,Ke=Math.max(nt,Math.min(window.innerWidth-we-nt,$.current.left+xe)),wt=Math.max(nt,$.current.top+Be);I.current={x:Ke-$.current.left,y:wt-$.current.top};let Ot=c.current,Ze=Ot==null?void 0:Ot.parentElement;if(!Ze)return;Ze.style.top=`${wt}px`,Ze.style.left=`${Ke}px`;let It=(pt=a==null?void 0:a.current)==null?void 0:pt.getBoundingClientRect(),Dt=window.innerHeight-16;It&&Ke+we>It.left&&(Dt=It.top-8);let mt=Math.max(0,wt),vt=Math.max(200,Dt-mt);Ot&&(Ot.style.maxHeight=`${vt}px`)},re=()=>{if(!Q.current)return;let V=$.current.top+I.current.y,me=$.current.left+I.current.x;$.current=y(f({},$.current),{top:V,left:me}),I.current={x:0,y:0},ge.current=!0;try{localStorage.setItem(v,JSON.stringify({top:V,left:me}))}catch(xe){}Q.current=null};return window.addEventListener("mousemove",j),window.addEventListener("mouseup",re),()=>{window.removeEventListener("mousemove",j),window.removeEventListener("mouseup",re)}},[]);let be=Rn(j=>{j.button!==0||j.target.closest("button")||(j.preventDefault(),Q.current={startX:j.clientX,startY:j.clientY,startOffsetX:I.current.x,startOffsetY:I.current.y})},[]);vn(()=>{I.current={x:0,y:0};let j=(me=!1)=>{var Dt;let xe=c.current,Be=280,we=8,nt,Ke;if(ge.current)nt=$.current.top,Ke=$.current.left;else{let mt=e.getBoundingClientRect();Ke=mt.right+we,nt=mt.top,Ke+Be>window.innerWidth-we&&(Ke=mt.left-Be-we),Ke<we&&(Ke=Math.max(we,(window.innerWidth-Be)/2))}let wt=(Dt=a==null?void 0:a.current)==null?void 0:Dt.getBoundingClientRect(),Ot=window.innerHeight-16;wt&&Ke+Be>wt.left&&(Ot=wt.top-we);let Ze=Math.max(0,nt),It=Math.max(200,Ot-Ze);if($.current={top:nt,left:Ke,maxHeight:It},me&&xe){let mt=xe.parentElement;mt&&!ge.current&&(mt.style.top=`${nt+I.current.y}px`,mt.style.left=`${Ke+I.current.x}px`),xe.style.maxHeight=`${It}px`}else q(mt=>mt+1)};j(!1);let re=()=>j(!0),V=()=>j(!1);return window.addEventListener("scroll",re,{passive:!0}),window.addEventListener("resize",V,{passive:!0}),()=>{window.removeEventListener("scroll",re),window.removeEventListener("resize",V)}},[e]),vn(()=>{let j=c.current;if(!j)return;let re=V=>{let me=d.current;if(!me){V.preventDefault();return}let{scrollTop:xe,scrollHeight:Be,clientHeight:we}=me,nt=xe<=0&&V.deltaY<0,Ke=xe+we>=Be&&V.deltaY>0;(nt||Ke)&&V.preventDefault()};return j.addEventListener("wheel",re,{passive:!1}),()=>j.removeEventListener("wheel",re)},[]);let ue=Br(()=>r.find(j=>j.selector===n),[r,n]),ce=Rn(j=>{let re=ue==null?void 0:ue.changes.find(V=>V.property===j);if(re)return re.modified;if(j.includes("color")){let V=mi(e,j);if(V&&V.includes("var("))return V}return Go(e,j)},[e,ue]),Fe=Rn(j=>{if(w.current.has(j))return w.current.get(j);let re=ue==null?void 0:ue.changes.find(me=>me.property===j);if(re)return re.original;let V=Go(e,j);return w.current.set(j,V),V},[e,ue]),Te=Rn((j,re)=>{let V=Fe(j);$e(e,j,re),j==="backdrop-filter"&&$e(e,"-webkit-backdrop-filter",re),o({type:"MODIFY_STYLE",payload:{selector:n,element:t,property:j,original:V,modified:re}})},[e,n,t,o,Fe]),oe=Rn(()=>{xi(n,r);let j=r.find(re=>re.selector===n);if(j)for(let re of j.changes)o({type:"CLEAR_STYLE",payload:{selector:n,property:re.property}});w.current.clear()},[n,r,o]),Le=Rn(j=>{let re=r.find(me=>me.selector===n);re!=null&&re.changes.find(me=>me.property===j)&&e instanceof HTMLElement&&(e.style.removeProperty(j),o({type:"CLEAR_STYLE",payload:{selector:n,property:j}}),w.current.delete(j))},[e,n,r,o]),Ae=Rn(()=>{let j=O.split(";").map(re=>re.trim()).filter(re=>re);for(let re of j){let V=re.indexOf(":");if(V>0){let me=re.slice(0,V).trim(),xe=re.slice(V+1).trim();me&&xe&&Te(me,xe)}}K("")},[O,Te]),_e=Rn(j=>{var re;return(re=ue==null?void 0:ue.changes.some(V=>V.property===j))!=null?re:!1},[ue]),Pe=j=>{var Be;let re=ce(j.property),V=_e(j.property),me=!V&&Tu(j.property,re),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(me&&j.type!=="backdrop-filter")return de(On,{modified:!1,children:de("input",{type:"text",value:"",placeholder:"\u2014",onFocus:()=>{},onChange:we=>Te(j.property,we.target.value),style:y(f({},xe),{color:"#999"})})});switch(j.type){case"color":{let we=Xo(e,re),nt=re.includes("var(")?null:Jo(we,H);return de(_i,{value:re,resolvedValue:we,colorVariables:H,matchingVariable:nt,onChange:Ke=>Te(j.property,Ke),accentColor:l,modified:V,panelContentRef:d,isDropdownOpen:C===j.property,onDropdownChange:Ke=>b(Ke?j.property:null)})}case"number":{if(!!Tr[j.property])return de(On,{modified:V,children:de(Cn,{property:j.property,value:re,onChange:Ke=>Te(j.property,Ke),isModified:V,min:j.min,max:j.max,step:j.step||1,style:y(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:D,onUnitCycle:R})});let{num:nt}=jn(re);return de(On,{modified:V,children:de("input",{type:"number",value:nt,min:j.min,max:j.max,step:j.step||1,onChange:Ke=>Te(j.property,Ke.target.value),style:xe})})}case"select":return de(On,{modified:V,children:gt("div",{style:{position:"relative",display:"flex",alignItems:"center"},children:[de("select",{value:re,onChange:we=>Te(j.property,we.target.value),style:y(f({},xe),{cursor:"pointer",paddingLeft:4,paddingRight:24,appearance:"none",WebkitAppearance:"none"}),children:(Be=j.options)==null?void 0:Be.map(we=>de("option",{value:we,children:we},we))}),de("div",{style:{position:"absolute",right:4,top:"50%",transform:"translateY(-50%)",pointerEvents:"none",color:"#999",display:"flex",alignItems:"center"},children:de(zi,{size:12})})]})});case"spacing":return de(On,{modified:V,children:de("input",{type:"text",value:re,onChange:we=>Te(j.property,we.target.value),placeholder:"e.g., 10px or 10px 20px",style:xe})});case"backdrop-filter":return de(Vl,{value:re,onChange:we=>Te(j.property,we),accentColor:l,modified:V,panelContentRef:d});default:return de(On,{modified:V,children:de("input",{type:"text",value:re,onChange:we=>Te(j.property,we.target.value),style:xe})})}},Me=(it=ue==null?void 0:ue.changes.length)!=null?it:0,Z=(lt=ue==null?void 0:ue.captured)!=null?lt:!1,pe=y(f({position:"fixed",top:$.current.top,left:$.current.left,width:280,maxHeight:$.current.maxHeight,backgroundColor:"rgba(255, 255, 255, 0.85)",backdropFilter:"blur(32px)",WebkitBackdropFilter:"blur(32px)"},Yn),{zIndex:1e4,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',fontSize:12,overflow:"hidden",display:"flex",flexDirection:"column",opacity:u?1:0,transition:"opacity 150ms ease"}),he={display:"flex",alignItems:"center",justifyContent:"space-between",margin:"3px 3px 0",padding:"8px 7px 8px 12px",borderBottom:"1px solid rgba(0,0,0,0.1)",backgroundColor:"#f8fafc",cursor:Q.current?"grabbing":"grab"},fe={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"},Ie={display:"flex",alignItems:"center",padding:"4px 12px",gap:8},We={width:80,fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#64748b",flexShrink:0};return de("div",{"data-devtools":"panel-wrapper",style:{position:"fixed",top:$.current.top+I.current.y,left:$.current.left+I.current.x,zIndex:1e4,pointerEvents:"none"},children:gt("div",{ref:c,"data-devtools":"panel",style:y(f({},pe),{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:[gt("div",{style:he,onMouseDown:be,children:[gt("div",{style:{display:"flex",alignItems:"center",gap:8,overflow:"hidden"},children:[de("span",{style:{fontWeight:600,fontSize:11,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:t.tagName}),Me>0&&de("span",{style:{backgroundColor:Z?"#999999":l,color:"#fff",fontSize:9,padding:"1px 4px",borderRadius:2},children:Me})]}),gt("div",{style:{display:"flex",gap:4},children:[Me>0&&de("button",{type:"button",onClick:oe,title:"Reset all changes",style:{display:"flex",alignItems:"center",justifyContent:"center",width:24,height:24,border:"none",background:"none",cursor:"pointer",color:"#64748b",borderRadius:2},children:de(Eu,{size:14})}),de("button",{type:"button",onClick:i,title:"Close",style:{display:"flex",alignItems:"center",justifyContent:"center",width:24,height:24,border:"none",background:"none",cursor:"pointer",color:"#64748b",borderRadius:2},children:de(Mu,{size:14})})]})]}),gt("div",{ref:d,style:{flex:1,overflowY:"auto",margin:"0 3px 3px"},children:[de("div",{style:{opacity:C?.3:1,transition:"opacity 150ms ease"},children:de(Kl,{element:e,getValue:ce,getOriginalValue:Fe,handleChange:Te,isModified:_e,onResetProperty:Le,isCollapsed:!1,onToggle:()=>{},sectionHeaderStyle:fe,activeDropdown:g,onDropdownChange:M,panelContentRef:d,accentColor:l,onFieldHover:s,preferredUnit:D,onUnitCycle:R})}),de("div",{style:{opacity:g?.3:1,transition:"opacity 150ms ease"},children:de(ea,{element:e,getValue:ce,handleChange:Te,isModified:_e,onResetProperty:Le,isCollapsed:!1,onToggle:()=>{},sectionHeaderStyle:fe,accentColor:l,colorVariables:H,activeColorDropdown:C,onColorDropdownChange:b,panelContentRef:d,preferredUnit:D,onUnitCycle:R})}),na.map((j,re)=>{let V=re===na.length-1,me=C&&j.properties.some(Be=>Be.property===C);return gt("div",{style:{borderBottom:V?"none":"1px solid rgba(0,0,0,0.08)",opacity:E&&!me?.3:1,transition:"opacity 150ms ease"},children:[de("div",{style:fe,children:de("span",{children:j.name})}),de("div",{style:{padding:"4px 0"},children:j.properties.map(Be=>{let we=_e(Be.property),nt=me&&Be.property!==C;return gt("div",{style:y(f({},Ie),{opacity:nt?.3:1,transition:"opacity 150ms ease"}),children:[de("span",{onClick:we?()=>Le(Be.property):void 0,title:we?"Click to reset":void 0,style:y(f({},We),{color:we?l:"#64748b",fontWeight:we?600:400,cursor:we?"pointer":"default"}),children:Be.label}),de("div",{style:{flex:1,minWidth:0,overflow:"hidden"},children:Pe(Be)})]},Be.property)})})]},j.name)}),gt("div",{style:{opacity:E?.3:1,transition:"opacity 150ms ease"},children:[de("div",{style:fe,children:de("span",{children:"Raw CSS"})}),gt("div",{style:{padding:"8px 12px"},children:[de("textarea",{value:O,onChange:j=>K(j.target.value),placeholder:"property: value; ...",style:{width:"100%",height:60,padding:8,fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',border:"1px solid rgba(0,0,0,0.1)",borderRadius:2,resize:"vertical",outline:"none"}}),O.trim()&&de("button",{type:"button",onClick:Ae,style:{marginTop:4,padding:"4px 8px",width:"100%",fontSize:11,border:"none",borderRadius:2,backgroundColor:l,color:"#fff",cursor:"pointer",opacity:O.trim()?1:.5},children:"Apply"})]})]})]})]})})}import{useEffect as Ru,useLayoutEffect as Lu,useState as Au}from"react";import{Fragment as Du,jsx as uo,jsxs as Ou}from"react/jsx-runtime";var $i=["flex-start","center","flex-end"],Wi=["flex-start","center","flex-end"];function Pu(e){return e==="normal"||e==="flex-start"||e==="start"?"flex-start":e==="flex-end"||e==="end"?"flex-end":e==="center"?"center":null}function Bu(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 ra(e){let t=Array.from(e.children);if(t.length===0)return null;let n=1/0,r=1/0,o=-1/0,i=-1/0;for(let s of t){let l=s.getBoundingClientRect();l.width===0&&l.height===0||(l.top<n&&(n=l.top),l.left<r&&(r=l.left),l.bottom>o&&(o=l.bottom),l.right>i&&(i=l.right))}return n===1/0?null:new DOMRect(r,n,i-r,o-n)}function ia({element:e,modifier:t,accentColor:n,refreshKey:r=0}){let[o,i]=Au(null);if(Ru(()=>{if(!e){i(null);return}let C=()=>i(ra(e));return C(),window.addEventListener("scroll",C,{passive:!0}),window.addEventListener("resize",C,{passive:!0}),()=>{window.removeEventListener("scroll",C),window.removeEventListener("resize",C)}},[e]),Lu(()=>{e&&i(ra(e))},[e,r]),!o)return null;let s=o,l=window.getComputedStyle(e),a=l.display;if(a!=="flex"&&a!=="inline-flex")return null;let c=l.flexDirection,d=c==="column"||c==="column-reverse"?"vertical":"horizontal",u=d==="horizontal"?"vertical":"horizontal",p=[];if(t==="shift"){let C=Pu(l.justifyContent);if(C){let b=$i.indexOf(C);d==="horizontal"?(b>0&&p.push("left"),b<$i.length-1&&p.push("right")):(b>0&&p.push("up"),b<$i.length-1&&p.push("down"))}}else{let C=Bu(l.alignItems);if(C){let b=Wi.indexOf(C);u==="horizontal"?(b>0&&p.push("left"),b<Wi.length-1&&p.push("right")):(b>0&&p.push("up"),b<Wi.length-1&&p.push("down"))}}if(p.length===0)return null;let g=14,M=7;return uo(Du,{children:p.map(C=>{let b,E;switch(C){case"right":b=s.right+g,E=s.top+s.height/2;break;case"left":b=s.left-g,E=s.top+s.height/2;break;case"down":b=s.left+s.width/2,E=s.bottom+g;break;case"up":b=s.left+s.width/2,E=s.top-g;break}let D=C==="right"?0:C==="left"?180:C==="down"?90:-90,A={position:"fixed",left:b-M,top:E-M,width:M*2,height:M*2,pointerEvents:"none",zIndex:9997};return uo("div",{"data-devtools":"swipe-hint",style:A,children:uo("svg",{width:M*2,height:M*2,viewBox:"-7 -7 14 14",style:{overflow:"visible"},children:Ou("g",{transform:`rotate(${D})`,children:[uo("line",{x1:"-5",y1:"0",x2:"3",y2:"0",stroke:"#fff",strokeWidth:"4",strokeLinecap:"round"}),uo("polyline",{points:"0,-4 5,0 0,4",fill:"none",stroke:"#fff",strokeWidth:"4",strokeLinecap:"round",strokeLinejoin:"round"}),uo("line",{x1:"-5",y1:"0",x2:"3",y2:"0",stroke:n,strokeWidth:"1.5",strokeLinecap:"round"}),uo("polyline",{points:"0,-4 5,0 0,4",fill:"none",stroke:n,strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]})})},C)})})}import{useEffect as Nu,useLayoutEffect as Hu,useState as Fu}from"react";import{jsx as Yi,jsxs as ji}from"react/jsx-runtime";function _u(e,t){let n=e.match(/^oklch\(([^)]+)\)$/i);return n?`oklch(${n[1]} / ${t})`:`color-mix(in srgb, ${e} ${Math.round(t*100)}%, transparent)`}function sa({element:e,fontSize:t,lineHeight:n,accentColor:r,hoveredProperty:o,draggingProperty:i,cursorViewport:s}){let[l,a]=Fu(null);if(Nu(()=>{if(!e){a(null);return}let E=()=>{a(Mo(e))};return E(),window.addEventListener("scroll",E,{passive:!0}),window.addEventListener("resize",E,{passive:!0}),()=>{window.removeEventListener("scroll",E),window.removeEventListener("resize",E)}},[e]),Hu(()=>{e&&a(Mo(e))},[e,t,n]),!l)return null;let c=l.width,d=l.height,u=_u(r,.2),p=i!=null?i:o,g=8,M=2,C={position:"fixed",top:l.top,left:l.left,width:c,height:d,pointerEvents:"none",zIndex:9996,overflow:"visible"},b=E=>E==="font-size"?`${Math.round(t)}`:(t>0?n/t:1.2).toFixed(2).replace(/\.?0+$/,"");return ji("div",{"data-devtools":"text-handles",style:C,children:[ji("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${c} ${d}`,children:[Yi("rect",{x:"0.5",y:"0.5",width:Math.max(0,c-1),height:Math.max(0,d-1),fill:"none",stroke:u,strokeWidth:"1"}),(p==="font-size"||!p)&&Yi("rect",{x:c-M/2,y:d/2-g/2,width:M,height:g,fill:r,stroke:"#ffffff",strokeWidth:p==="font-size"?4:2,paintOrder:"stroke"}),(p==="line-height"||!p)&&Yi("rect",{x:c/2-g/2,y:d-M/2,width:g,height:M,fill:r,stroke:"#ffffff",strokeWidth:p==="line-height"?4:2,paintOrder:"stroke"})]}),s&&p&&(()=>{let E=p==="font-size"?"Aa":"Lh",D=b(p);return ji("div",{style:{position:"fixed",left:s.x+8,top:s.y-28,background:r,color:"#fff",fontSize:11,fontWeight:600,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',lineHeight:1,padding:"4px 4px",borderRadius:0,whiteSpace:"nowrap",pointerEvents:"none",zIndex:9997},children:[E," ",D]})})()]})}import{Fragment as Oo,jsx as tt,jsxs as Bo}from"react/jsx-runtime";var la=8,Vi=[0,1,2,4,8,12,16,20,24,28,32],Ui="devtools-active-text";function aa(e,t,n=0,r,o){let i=e.left+window.scrollX+4,s=t==="top-left"?e.top+window.scrollY-bn-n*bn+4:e.bottom+window.scrollY+4-1+n*bn,l=window.scrollY+4,a=window.scrollY+window.innerHeight-bn-4,c=90,d=!1;if(r&&o!==void 0){let u=r.getBoundingClientRect();if(e.left+4+o+4+c>u.left){let g=window.scrollY+u.top-bn-4;g<a&&(a=g,d=!0)}}return s<l?s=e.top+window.scrollY+4:s>a&&(s=d?a:Math.max(e.top+window.scrollY+4,a)),{x:i,y:s}}function ca({state:e,dispatch:t,onScreenshot:n,inFlightAnnotationIds:r,inFlightStyleSelectors:o,inFlightSelectorColors:i,onAttachImages:s,onReply:l,onViewThread:a,onCloseThread:c,onModelComponentsAdd:d,onModelComponentFocus:u,onModelComponentHover:p,modelComponentNames:g,modelPanelHoveredComponent:M,modelSpacingTokenHover:C,highlightedAnnotationIds:b,focusedThreadAnnotationId:E,externalCanvasRef:D,toolbarRef:A}){var ks,Ms,Ts,Is,Rs,Ls,As,Ps,Bs;let{canvasRef:R,redrawAll:w,resizeCanvas:O}=ul(),K=Pt(m=>{R.current=m,D&&(D.current=m)},[D,R]),H=kt(!1);Vt(()=>{let m=R.current;if(!m)return;let h=()=>{H.current&&(H.current=!1,m.style.pointerEvents="")},X=T=>{T.button===0&&H.current&&h()};return window.addEventListener("mousedown",X),()=>window.removeEventListener("mousedown",X)},[R]);let[$,q]=st(!1),[v,I]=st(()=>{if(typeof window=="undefined")return null;try{let m=localStorage.getItem(Ui);return m?JSON.parse(m):null}catch(m){return null}}),[Q,ge]=st(null),[be,ue]=st(null),[ce,Fe]=st(null),Te=kt(null),oe=kt(null),Le=kt({x:0,y:0}),Ae=kt([]),_e=kt(0),[Pe,Me]=st(null),[Z,pe]=st(new Map),he=kt(0),fe=kt(null),[Ie,We]=st(null),[it,lt]=st(null),[j,re]=st(null),[V,me]=st(null),xe=kt({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}),[Be,we]=st(null),[nt,Ke]=st(null),[wt,Ot]=st(null),[Ze,It]=st(null),Dt=kt({x:0,y:0}),[mt,vt]=st({x:0,y:0}),pt=kt({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}),[ht,Zt]=st(null),[Nt,ln]=st(null),[at,te]=st(null),[Re,Xe]=st(!1),[an,Jt]=st(0),[ct,Qe]=st(null),Gt=kt({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}),[Ct,Xn]=st(null),[cn,$o]=st(null),[yt,Ln]=st(null),tn=kt({isDragging:!1,property:null,startX:0,startY:0,originalFontSize:0,originalLineHeight:0,originalRatio:1.2,element:null,elementInfo:null,selector:null,durableSelector:null}),[Rt,kn]=st(null),[F,ee]=st(null),[U,Se]=st(null),S=pl(),P=kt(i);P.current=i;let ne=Pt(m=>{let h=P.current;if(!h||h.size===0)return!1;for(let X of h.keys())try{if(m.matches(X))return!0}catch(T){}return!1},[]),Ee=kt(e);Ee.current=e;let Ne=kt(v);Ne.current=v;let Ue=kt([]),ot=kt(n);ot.current=n;let[Oe,ye]=st(null),Ye=e.selectedAnnotationIds;Ue.current=Ye;let Lt=Pt((m,h=!1)=>{t({type:"SELECT_ANNOTATION",payload:{id:m,addToSelection:h}})},[t]),nn=Pt(()=>{t({type:"SELECT_ANNOTATION",payload:{id:null}})},[t]),[hn,Fn]=st(null),[Kt,Yr]=st({x:window.scrollX,y:window.scrollY});Vt(()=>(O(),window.addEventListener("resize",O),()=>window.removeEventListener("resize",O)),[O]),Vt(()=>{let m=()=>{Yr({x:window.scrollX,y:window.scrollY})};return window.addEventListener("scroll",m,{passive:!0}),()=>window.removeEventListener("scroll",m)},[]),Vt(()=>{v?localStorage.setItem(Ui,JSON.stringify(v)):localStorage.removeItem(Ui)},[v]),fl(v,I,Q,e.annotations,t);let yn=kt(Pe);yn.current=Pe,Vt(()=>{if(e.activeTool!=="model"||!e.isAnnotating)return;let m=h=>{if(!h.altKey||!yn.current)return;h.preventDefault();let X=h.deltaY>0?-1:1;he.current=Math.max(0,he.current+X);let T=fe.current;if(T){let B=hr(T,he.current);Me(B)}};return window.addEventListener("wheel",m,{passive:!1}),()=>window.removeEventListener("wheel",m)},[e.activeTool,e.isAnnotating]),Vt(()=>{e.activeTool!=="model"&&(Me(null),pe(new Map),he.current=0,fe.current=null)},[e.activeTool]),Vt(()=>{var X;let m=(X=Pe==null?void 0:Pe.name)!=null?X:null,h=m&&(g!=null&&g.has(m))?m:null;p==null||p(h)},[Pe,g,p]);let[rr,hs]=st(null);Vt(()=>{var X;if(!M){hs(null);return}let m=Co(M.name),h=M.instanceIndex;hs((X=m[h%m.length])!=null?X:null)},[M]);let[ys,jr]=st([]);Vt(()=>{var m,h;if(!C){jr([]);return}(h=(m=C.token)==null?void 0:m.bindings)!=null&&h.length?jr(fi(C.token)):jr(ui(C.px))},[C]);let Ja=kt(null),Ka=kt(null);Ja.current=ht,Ka.current=Nt,Vt(()=>{let m=["flex-start","center","flex-end"],h=["flex-start","center","flex-end"],T=null,B=!1,W=null,ie=null,_=(ae,Ce)=>{let Ge=oo(ae,Ce);for(;Ge&&Ge!==document.documentElement;){let dt=window.getComputedStyle(Ge).display;if(dt==="flex"||dt==="inline-flex")return Ge;Ge=Ge.parentElement}return null},J=ae=>{let Ce=window.getComputedStyle(ae).flexDirection;return Ce==="column"||Ce==="column-reverse"?"vertical":"horizontal"},x=ae=>{let Ce=ae.getAttribute("data-pm");return Ce||(Ce=Math.random().toString(36).substring(2,8),ae.setAttribute("data-pm",Ce)),{selector:`[data-pm="${Ce}"]`,durableSelector:dn(ae)}},k=()=>{B=!0,T&&clearTimeout(T),T=setTimeout(()=>{B=!1,T=null},300)},G=(ae,Ce,Je)=>{let Ge=J(ae);if(Ce===Ge){let ze=window.getComputedStyle(ae).justifyContent,ft=ze==="normal"||ze==="flex-start"||ze==="start"?"flex-start":ze==="flex-end"||ze==="end"?"flex-end":ze==="center"?"center":null;if(!ft)return;let Ht=m.indexOf(ft)+Je;if(Ht<0||Ht>=m.length)return;let Pn=m[Ht],{selector:Kn,durableSelector:Vr}=x(ae);$e(ae,"justify-content",Pn),t({type:"MODIFY_STYLES_BATCH",payload:{selector:Kn,durableSelector:Vr,element:en(ae),changes:[{property:"justify-content",original:ze,modified:Pn}]}})}else{let ze=window.getComputedStyle(ae).flexDirection,ft=Ge==="horizontal"?"column":"row",{selector:Sn,durableSelector:Ht}=x(ae);$e(ae,"flex-direction",ft),t({type:"MODIFY_STYLES_BATCH",payload:{selector:Sn,durableSelector:Ht,element:en(ae),changes:[{property:"flex-direction",original:ze,modified:ft}]}})}Jt(dt=>dt+1)},L=(ae,Ce,Je)=>{let dt=J(ae)==="horizontal"?"vertical":"horizontal";if(Ce!==dt)return;let ft=window.getComputedStyle(ae).alignItems,Sn=ft==="normal"||ft==="stretch"||ft==="flex-start"||ft==="start"?"flex-start":ft==="flex-end"||ft==="end"?"flex-end":ft==="center"?"center":null;if(!Sn)return;let Pn=h.indexOf(Sn)+Je;if(Pn<0||Pn>=h.length)return;let Kn=h[Pn],{selector:Vr,durableSelector:sc}=x(ae);$e(ae,"align-items",Kn),t({type:"MODIFY_STYLES_BATCH",payload:{selector:Vr,durableSelector:sc,element:en(ae),changes:[{property:"align-items",original:ft,modified:Kn}]}}),Jt(lc=>lc+1)},N=20,z=null,Y=null,le=0,ve=(ae,Ce,Je)=>{let Ge=_(Ce,Je);Qe(Ge?{modifier:ae,target:Ge}:null)},et=ae=>{if(!(e.activeTool!=="hand"||!e.isAnnotating)){if(ae.key==="Shift"&&!ae.altKey){let Ce=Dt.current;ve("shift",Ce.x,Ce.y)}else if(ae.key==="Alt"&&!ae.shiftKey){let Ce=Dt.current;ve("alt",Ce.x,Ce.y)}}},rt=ae=>{if(e.activeTool!=="hand"||!e.isAnnotating)return;let Ce=ae.shiftKey&&!ae.altKey,Je=ae.altKey&&!ae.shiftKey;if(!Ce&&!Je||ae.buttons!==0){z=null,Y=null,le=0,W=null,ie=null,Qe(null);return}if(W===null&&(W=ae.clientX,ie=ae.clientY,ve(Ce?"shift":"alt",ae.clientX,ae.clientY)),B)return;z===null&&(z=ae.clientX,Y=ae.clientY,le=0);let Ge=ae.clientX-z,dt=ae.clientY-Y,ze=Math.abs(Ge)>=Math.abs(dt)?Ge:dt;if(Math.abs(ze)>3){let Kn=ze>0?1:-1;if(le!==0&&Kn!==le){z=ae.clientX,Y=ae.clientY,le=0;return}le=Kn}if(Math.abs(Ge)<N&&Math.abs(dt)<N)return;let ft=_(W,ie);if(!ft)return;let Sn=Math.abs(Ge)>=Math.abs(dt)?"horizontal":"vertical",Pn=(Sn==="horizontal"?Ge:dt)>0?1:-1;z=null,Y=null,le=0,Ce?G(ft,Sn,Pn):L(ft,Sn,Pn),k()},Et=ae=>{(ae.key==="Shift"||ae.key==="Alt")&&(W=null,ie=null,z=null,Y=null,le=0,Qe(null))},je=()=>{Qe(null),z=null,Y=null,le=0};return window.addEventListener("keydown",et),window.addEventListener("mousemove",rt),window.addEventListener("mousedown",je),window.addEventListener("keyup",Et),()=>{window.removeEventListener("keydown",et),window.removeEventListener("mousemove",rt),window.removeEventListener("mousedown",je),window.removeEventListener("keyup",Et),T&&clearTimeout(T)}},[e.activeTool,e.isAnnotating,t]),Vt(()=>{let m=h=>{var W,ie,_,J;if(h.key==="Escape"){if(Ne.current)return;if(e.activeTool==="model"&&Z.size>0){h.preventDefault(),pe(new Map);return}if(Ue.current.length>0){h.preventDefault(),nn();return}}if(h.key==="Enter"&&e.activeTool==="model"&&Z.size>0&&d){h.preventDefault();let x=[...Z.keys()].filter(k=>!(g!=null&&g.has(k)));x.length>0&&d(x),pe(new Map);return}if((h.metaKey||h.ctrlKey)&&h.key==="v"&&Ae.current.length>0&&!Ne.current){h.preventDefault(),_e.current++;let x=_e.current*20,G=((W=Ae.current[0])==null?void 0:W.groupId)?Math.random().toString(36).substring(2,9):void 0,L=Ae.current.map(z=>y(f({},z),{id:Math.random().toString(36).substring(2,9),groupId:z.groupId?G:void 0,timestamp:Date.now(),points:z.points.map(Y=>({x:Y.x+x,y:Y.y+x}))}));t({type:"PASTE_ANNOTATIONS",payload:{annotations:L}});let N=L.find(z=>z.type!=="text")||L[0];N&&Lt(N.id);return}let X=Ue.current;if(X.length===0||Ne.current)return;let T=(_=(ie=h.composedPath)==null?void 0:ie.call(h)[0])!=null?_:h.target,B=T==null?void 0:T.tagName;if(!(B==="INPUT"||B==="TEXTAREA"||T!=null&&T.isContentEditable)&&(h.key==="Delete"||h.key==="Backspace")){if(h.preventDefault(),c){let x=Ee.current.annotations;for(let k of X){let G=x.find(N=>N.id===k);if(!G)continue;let L=G.threadId||G.groupId&&((J=x.find(N=>N.groupId===G.groupId&&N.threadId))==null?void 0:J.threadId);L&&c(L)}}for(let x of X)t({type:"DELETE_ANNOTATION",payload:{id:x}});nn()}};return window.addEventListener("keydown",m),()=>window.removeEventListener("keydown",m)},[t,nn,Lt,e.activeTool,Z,g,d,c]);let _n=Gi(()=>kr(e.annotations),[e.annotations]),ir=Gi(()=>{let m=new Map,h=new Set,X=1;for(let T of e.annotations)if(!_n.has(T))if(T.groupId){if(!h.has(T.groupId)){h.add(T.groupId);let B=e.annotations.filter(W=>W.groupId===T.groupId);for(let W of B)m.set(W.id,X);X++}}else m.set(T.id,X),X++;return m},[e.annotations,_n]),bs=Gi(()=>{if(Ye.length===0)return null;let m=new Map;for(let h of Ye){let X=e.annotations.find(B=>B.id===h);if(!X)continue;let T=X.groupId?e.annotations.filter(B=>B.groupId===X.groupId):[X];for(let B of T)if(B.linkedSelector&&!(i!=null&&i.has(B.linkedSelector))){let W=B.color||e.activeColor;m.set(B.linkedSelector,W)}}return m.size>0?m:null},[Ye,e.annotations,e.activeColor,i]);Vt(()=>{let m=e.annotations.filter(h=>!(_n.has(h)||v&&!v.isNew&&h.id===v.id));w(m,e.currentPath,e.activeTool,e.activeColor,e.strokeWidth,Ye,la,Kt.x,Kt.y,ir,b)},[e.annotations,e.currentPath,e.activeTool,e.activeColor,e.strokeWidth,w,v,Ye,Kt,ir,_n,b]),Vt(()=>{if(be){let m=Math.random().toString(36).substring(2,9);I({id:m,point:be.point,text:"",fontSize:12,isNew:!0,groupId:be.groupId}),ue(null)}},[be]),Vt(()=>{ce&&(I({id:Math.random().toString(36).substring(2,9),point:ce.point,text:"",fontSize:12,isNew:!0,linkedSelector:ce.linkedSelector,linkedAnchor:ce.linkedAnchor,elements:ce.elements}),Fe(null))},[ce]);let sr=kt(null),lr=(ks=v==null?void 0:v.id)!=null?ks:null;Vt(()=>{lr&&Te.current?requestAnimationFrame(()=>{var X;let m=Te.current;if(!m||(m.focus(),oe.current===lr))return;oe.current=lr;let h=Ne.current;if(h){if(sr.current!==null){let T=Math.min(sr.current,m.value.length);m.setSelectionRange(T,T);return}if(!h.isNew&&h.clickPoint){let T=R.current;if(!T)return;let B=T.getContext("2d");if(!B)return;B.font=`${h.fontSize}px ${Ft}`;let W=h.fontSize*1.4,ie=h.text.split(`
|
|
7
|
+
`),_=h.clickPoint.y-h.point.y,J=Math.max(0,Math.min(ie.length-1,Math.floor(_/W))),x=h.clickPoint.x-h.point.x,k=ie[J]||"",G=0;for(let N=0;N<=k.length;N++){let z=B.measureText(k.substring(0,N)).width;if(z>x){let Y=N>0?B.measureText(k.substring(0,N-1)).width:0;G=x-Y<z-x?N-1:N;break}G=N}let L=G;for(let N=0;N<J;N++)L+=(((X=ie[N])==null?void 0:X.length)||0)+1;m.setSelectionRange(L,L)}}}):(oe.current=null,sr.current=null)},[lr,R]);let ho=Pt(m=>{let h=R.current;if(!h)return{x:0,y:0};let X=h.getBoundingClientRect(),T,B;if("touches"in m&&m.touches[0])T=m.touches[0].clientX,B=m.touches[0].clientY;else if("clientX"in m)T=m.clientX,B=m.clientY;else return{x:0,y:0};return{x:T-X.left+window.scrollX,y:B-X.top+window.scrollY}},[R]),Jn=Pt((m,h,X,T)=>{let B=X.x-h.x,W=X.y-h.y,ie=B*B+W*W;if(ie===0)return Math.sqrt((m.x-h.x)**2+(m.y-h.y)**2)<=T;let _=Math.max(0,Math.min(1,((m.x-h.x)*B+(m.y-h.y)*W)/ie)),J=h.x+_*B,x=h.y+_*W;return Math.sqrt((m.x-J)**2+(m.y-x)**2)<=T},[]),ar=Pt(m=>{for(let X=e.annotations.length-1;X>=0;X--){let T=e.annotations[X];if(!T||_n.has(T))continue;let B=(T.strokeWidth||3)+4;switch(T.type){case"text":{if(!T.points[0]||!T.text)continue;let W=T.points[0],ie=T.fontSize||12,_=R.current;if(_){let J=_.getContext("2d");if(J){J.font=`${ie}px ${Ft}`;let x=T.text.split(`
|
|
8
|
+
`),k=W.x-Kt.x,G=So(k),L=G!==void 0?Math.min(400,G):void 0,N=L?no(J,x,L):x,z=L?Math.min(L,Math.max(...N.map(et=>J.measureText(et).width))):Math.max(...x.map(et=>J.measureText(et).width)),Y=N.length*(ie*1.4),le=x.length*(ie*1.4),ve=Y-le;if(m.x>=W.x-4-4&&m.x<=W.x+z+4+4&&m.y>=W.y-4-4-ve&&m.y<=W.y+le+4+4)return T}}break}case"rectangle":{if(T.points.length<2)continue;let W=T.points[0],ie=T.points[T.points.length-1],_=Math.min(W.x,ie.x),J=Math.max(W.x,ie.x),x=Math.min(W.y,ie.y),k=Math.max(W.y,ie.y),G=Jn(m,{x:_,y:x},{x:J,y:x},B),L=Jn(m,{x:_,y:k},{x:J,y:k},B),N=Jn(m,{x:_,y:x},{x:_,y:k},B),z=Jn(m,{x:J,y:x},{x:J,y:k},B);if(G||L||N||z)return T;break}case"circle":{if(T.points.length<2)continue;let W=T.points[0],ie=T.points[T.points.length-1],_=(W.x+ie.x)/2,J=(W.y+ie.y)/2,x=Math.abs(ie.x-W.x)/2,k=Math.abs(ie.y-W.y)/2,G=m.x-_,L=m.y-J,N=Math.sqrt((G/x)**2+(L/k)**2);if(Math.abs(N-1)*Math.max(x,k)<=B)return T;break}case"line":{if(T.points.length<2)continue;let W=T.points[0],ie=T.points[T.points.length-1];if(Jn(m,W,ie,B))return T;break}case"freehand":{if(T.points.length<2)continue;for(let W=0;W<T.points.length-1;W++){let ie=T.points[W],_=T.points[W+1];if(Jn(m,ie,_,B))return T}break}}}return null},[e.annotations,R,Jn,_n,Kt.x]),xs=Pt(m=>{let h=ar(m);return(h==null?void 0:h.type)==="text"?h:null},[ar]),vs=Pt(m=>{if(Ye.length===0)return null;let h=la/2+4;for(let X of Ye){let T=e.annotations.find(B=>B.id===X);if(!(!T||T.points.length<2)){if(T.type==="line"){let B=T.points[0],W=T.points[T.points.length-1];if(Math.sqrt((m.x-B.x)**2+(m.y-B.y)**2)<=h)return{handle:"start",annotationId:X};if(Math.sqrt((m.x-W.x)**2+(m.y-W.y)**2)<=h)return{handle:"end",annotationId:X};continue}if(T.type==="circle"){let B=T.points[0],W=T.points[T.points.length-1],ie=Math.min(B.x,W.x),_=Math.max(B.x,W.x),J=Math.min(B.y,W.y),x=Math.max(B.y,W.y),k=(ie+_)/2,G=(J+x)/2,L=[{handle:"top",x:k,y:J},{handle:"bottom",x:k,y:x},{handle:"left",x:ie,y:G},{handle:"right",x:_,y:G}];for(let{handle:N,x:z,y:Y}of L)if(Math.sqrt((m.x-z)**2+(m.y-Y)**2)<=h)return{handle:N,annotationId:X};continue}if(T.type==="rectangle"||T.type==="freehand"){let B=T.points[0],W=T.points[T.points.length-1],ie,_,J,x;T.type==="freehand"?(ie=Math.min(...T.points.map(G=>G.x)),_=Math.max(...T.points.map(G=>G.x)),J=Math.min(...T.points.map(G=>G.y)),x=Math.max(...T.points.map(G=>G.y))):(ie=Math.min(B.x,W.x),_=Math.max(B.x,W.x),J=Math.min(B.y,W.y),x=Math.max(B.y,W.y));let k=[{corner:"topLeft",x:ie,y:J},{corner:"topRight",x:_,y:J},{corner:"bottomLeft",x:ie,y:x},{corner:"bottomRight",x:_,y:x}];for(let{corner:G,x:L,y:N}of k)if(Math.sqrt((m.x-L)**2+(m.y-N)**2)<=h)return{handle:G,annotationId:X}}}}return null},[Ye,e.annotations]);Vt(()=>{let m=h=>{if(Le.current={x:h.clientX+window.scrollX,y:h.clientY+window.scrollY},!v){let X=xs(Le.current);ge((X==null?void 0:X.id)||null)}};return window.addEventListener("mousemove",m),()=>window.removeEventListener("mousemove",m)},[v,xs]);let yo=Pt(()=>{var h;if(!v)return;let m=((h=v.images)==null?void 0:h.length)||0;if(v.text.trim()||m>0)if(v.isNew){let X=fr();t({type:"ADD_TEXT",payload:f({point:v.point,text:v.text||(m>0?`[${m} image${m>1?"s":""}]`:""),fontSize:v.fontSize,id:X,groupId:v.groupId,linkedSelector:v.linkedSelector,linkedAnchor:v.linkedAnchor,elements:v.elements},m>0?{imageCount:m}:{})}),m>0&&v.images&&s&&s(X,v.images)}else t({type:"UPDATE_TEXT",payload:f({id:v.id,text:v.text||(m>0?`[${m} image${m>1?"s":""}]`:"")},m>0?{imageCount:m}:{})}),m>0&&v.images&&s&&s(v.id,v.images);else v.isNew||t({type:"DELETE_ANNOTATION",payload:{id:v.id}});I(null)},[v,t,s]),An=Pt(m=>{for(let h=0;h<Vi.length-1;h++){let X=Vi[h],T=Vi[h+1];if(m<=(X+T)/2)return X;if(m<T)return T}return Math.round(m/8)*8},[]),Ss=Pt((m,h,X,T)=>{let B=X.top+Math.max(T.top,4),W=X.bottom-Math.max(T.bottom,4),ie=X.left+Math.max(T.left,4),_=X.right-Math.max(T.right,4);if(m<X.left||m>X.right||h<X.top||h>X.bottom)return null;let J=h<B,x=h>W,k=m<ie,G=m>_;return J&&k?T.top>=T.left?"top":"left":J&&G?T.top>=T.right?"top":"right":x&&k?T.bottom>=T.left?"bottom":"left":x&&G?T.bottom>=T.right?"bottom":"right":J?"top":x?"bottom":k?"left":G?"right":null},[]),ws=Pt(m=>{var W,ie;if(!e.isAnnotating)return;if(e.inspectedElement&&e.activeTool==="hand"&&!("button"in m&&m.button===2)){m.preventDefault(),m.stopPropagation(),t({type:"SELECT_ELEMENT",payload:null});return}let h=ho(m),X="shiftKey"in m&&m.shiftKey;if(e.activeTool==="inspector"){if("button"in m&&m.button===2)return;if(Ie&&!ne(Ie)){let _=en(Ie),J=dn(Ie),x=Ie.getBoundingClientRect(),k=Ie.getAttribute("data-pm");k||(k=Math.random().toString(36).substring(2,8),Ie.setAttribute("data-pm",k));let G=`[data-pm="${k}"]`,L=e.styleModifications.some(ve=>{try{return Ie.matches(ve.selector)}catch(et){return!1}}),N=e.annotations.filter(ve=>{if(!ve.linkedSelector)return!1;try{return Ie.matches(ve.linkedSelector)}catch(et){return!1}}).length,z=(L?1:0)+N,Y=x.top>=bn*(1+z)?"top-left":"bottom-left",le=aa(x,Y,z,A==null?void 0:A.current);Fe({point:le,linkedSelector:G,linkedAnchor:Y,elements:[y(f({},_),{selector:J})]})}return}if(e.activeTool==="model"){if("button"in m&&m.button===2)return;if(Pe){let _=Pe.name;if(g!=null&&g.has(_)){u==null||u(_);return}"shiftKey"in m&&m.shiftKey?pe(x=>{let k=new Map(x);return k.has(_)?k.delete(_):k.set(_,Pe),k}):Z.size===1&&Z.has(_)?(d&&d([_]),pe(new Map)):pe(new Map([[_,Pe]]))}return}if(e.activeTool==="hand"&&ht&&Nt){let _=ht,J=_.getAttribute("data-pm");J||(J=Math.random().toString(36).substring(2,8),_.setAttribute("data-pm",J));let x=dn(_),k=`[data-pm="${J}"]`,G=en(_),L=Vo(_),N=h.x-window.scrollX,z=h.y-window.scrollY,Y=Re,le=window.getComputedStyle(_).justifyContent,ve=0;if(Y){let rt=ro(_).find(Et=>Et.axis===Nt);ve=rt?Nt==="column"?rt.w:rt.h:0}$e(_,"transition","none"),pt.current={isDragging:!0,hasMoved:!1,axis:Nt,startX:N,startY:z,originalRow:Y?ve:L.row,originalColumn:Y?ve:L.column,element:_,elementInfo:y(f({},G),{selector:k}),selector:k,durableSelector:x,isAuto:Y,originalJustifyContent:le,visualGap:ve},te({axis:Nt,row:Y?ve:L.row,column:Y?ve:L.column});return}if(e.activeTool==="hand"&&Rt&&F){let _=Rt,J=_.getAttribute("data-pm");J||(J=Math.random().toString(36).substring(2,8),_.setAttribute("data-pm",J));let x=`[data-pm="${J}"]`,k=en(_),{fontSize:G,lineHeight:L}=Uo(_),N=G>0?L/G:1.2,z=h.x-window.scrollX,Y=h.y-window.scrollY;$e(_,"transition","none");let le=dn(_);tn.current={isDragging:!0,property:F,startX:z,startY:Y,originalFontSize:G,originalLineHeight:L,originalRatio:N,element:_,elementInfo:y(f({},k),{selector:x}),selector:x,durableSelector:le},Se({property:F,fontSize:G,lineHeight:L});return}if(e.activeTool==="hand"&&Ct&&cn){let _=Ct,J=_.getAttribute("data-pm");J||(J=Math.random().toString(36).substring(2,8),_.setAttribute("data-pm",J));let x=`[data-pm="${J}"]`,k=dn(_),G=en(_),L=io(_),N=_.getBoundingClientRect(),z=Math.floor(N.height/2),Y=h.y-window.scrollY;$e(_,"transition","none"),Gt.current={isDragging:!0,corner:cn,startY:Y,original:L,maxRadius:z,element:_,elementInfo:y(f({},G),{selector:x}),selector:x,durableSelector:k},Ln({corner:cn,radius:f({},L)});return}if(e.activeTool==="hand"&&Be&&nt){let _=Be,J=_.getAttribute("data-pm");J||(J=Math.random().toString(36).substring(2,8),_.setAttribute("data-pm",J));let x=`[data-pm="${J}"]`,k=dn(_),G=en(_),L=ko(_),N=h.x-window.scrollX,z=h.y-window.scrollY;$e(_,"transition","none"),xe.current={isDragging:!0,side:nt,startX:N,startY:z,original:L,element:_,elementInfo:y(f({},G),{selector:x}),selector:x,durableSelector:k},It({side:nt,padding:f({},L)});return}let T=vs(h);if(T){let _=e.annotations.find(J=>J.id===T.annotationId);if(_&&_.type!=="text"&&((W=_.status)!=null?W:"pending")==="pending"){Fn({annotationId:T.annotationId,handle:T.handle,startPoint:h,originalPoints:[..._.points],hasMoved:!1});return}}let B=ar(h);if(B&&B.points[0]){if(v&&yo(),B.type!=="text"?(Lt(B.id,X),B.color&&t({type:"SET_COLOR",payload:B.color})):X||nn(),a){let _=B.threadId||(B.groupId?(ie=e.annotations.find(J=>J.groupId===B.groupId&&J.threadId))==null?void 0:ie.threadId:void 0);_&&a(_)}ye({annotation:B,startPoint:h,hasMoved:!1});return}if(X||nn(),e.activeTool==="text"){v&&yo();let _=Math.random().toString(36).substring(2,9);I({id:_,point:h,text:"",fontSize:12,isNew:!0});return}q(!0),t({type:"START_PATH",payload:h})},[e.isAnnotating,e.activeTool,e.inspectedElement,e.annotations,v,Ye,Ie,Be,nt,Ct,cn,ht,Nt,Re,Rt,F,Pe,Z,g,d,u,a,ho,ar,vs,t,Lt,nn,yo]),Cs=Pt(m=>{var X,T;let h=ho(m);if(e.activeTool==="inspector"&&e.isAnnotating){let B=h.x-window.scrollX,W=h.y-window.scrollY,ie=oo(B,W),_=ie&&ne(ie)?null:ie;_!==Ie&&(We(_),lt(_?en(_):null));return}if(e.activeTool==="model"&&e.isAnnotating){let B=h.x-window.scrollX,W=h.y-window.scrollY,ie=oo(B,W);if(ie!==fe.current&&(fe.current=ie,he.current=0),ie){let _=hr(ie,he.current);Me(_)}else Me(null);return}if(e.activeTool==="hand"&&e.isAnnotating){let B=h.x-window.scrollX,W=h.y-window.scrollY;Dt.current={x:B,y:W},vt({x:B,y:W});let ie=S.current.cmd,_=S.current.shift;if(pt.current.isDragging){let x=pt.current,k=x.element;if(!k)return;if(!x.hasMoved){let z=Math.abs(B-x.startX),Y=Math.abs(W-x.startY);if(z<=2&&Y<=2)return;x.hasMoved=!0,x.isAuto&&($e(k,"justify-content","normal"),$e(k,"row-gap",`${x.visualGap}px`),$e(k,"column-gap",`${x.visualGap}px`),Xe(!1))}let G=x.axis,L=x.originalRow,N=x.originalColumn;if(G==="column"){let z=B-x.startX;N=x.originalColumn+z,ie||(L=x.originalRow+z)}else{let z=W-x.startY;L=x.originalRow+z,ie||(N=x.originalColumn+z)}L=Math.max(0,L),N=Math.max(0,N),_&&(L=An(L),N=An(N)),L=Math.round(L),N=Math.round(N),$e(k,"row-gap",`${L}px`),$e(k,"column-gap",`${N}px`),te({axis:G,row:L,column:N});return}if(Gt.current.isDragging){let x=Gt.current,k=x.element;if(!k)return;let G=W-x.startY,L=x.corner,N=x.original,z=f({},N);if(ie){let Y=N[L]+G;Y=Math.max(0,Math.min(x.maxRadius,Y)),_&&(Y=An(Y)),Y=Math.round(Y),z[L]=Y}else{let Y=N[L]+G;Y=Math.max(0,Math.min(x.maxRadius,Y)),_&&(Y=An(Y)),Y=Math.round(Y),z={"top-left":Y,"top-right":Y,"bottom-right":Y,"bottom-left":Y}}$e(k,"border-top-left-radius",`${z["top-left"]}px`),$e(k,"border-top-right-radius",`${z["top-right"]}px`),$e(k,"border-bottom-right-radius",`${z["bottom-right"]}px`),$e(k,"border-bottom-left-radius",`${z["bottom-left"]}px`),Ln({corner:L,radius:z});return}if(tn.current.isDragging){let x=tn.current,k=x.element;if(!k)return;let G=x.property,L=x.originalFontSize,N=x.originalLineHeight,z=[8,10,11,12,13,14,16,18,20,22,24,28,32,36,40,48,56,64,72,80,96];if(G==="font-size"){let le=B-x.startX;L=x.originalFontSize+le,L=Math.max(1,L)}else{let le=W-x.startY;N=x.originalLineHeight+le,N=Math.max(L,N)}if(_)if(G==="font-size"){let le=z[0],ve=Math.abs(L-le);for(let et of z){let rt=Math.abs(L-et);rt<ve&&(le=et,ve=rt)}L=le}else{let le=L>0?N/L:1.2,ve=Math.round(le*2)/2;N=L*Math.max(1,ve)}L=Math.round(L),N=Math.round(N*10)/10,$e(k,"font-size",`${L}px`);let Y=L>0?Math.round(N/L*1e3)/1e3:1.2;$e(k,"line-height",`${Y}`),Se({property:G,fontSize:L,lineHeight:N});return}if(xe.current.isDragging){let x=xe.current,k=x.element;if(!k)return;let G=x.side,L=x.original,N=L.top,z=L.right,Y=L.bottom,le=L.left;if(G==="top"){let ve=x.startY-W;N=L.top+ve,ie||(Y=L.bottom+ve)}else if(G==="bottom"){let ve=W-x.startY;Y=L.bottom+ve,ie||(N=L.top+ve)}else if(G==="left"){let ve=x.startX-B;le=L.left+ve,ie||(z=L.right+ve)}else if(G==="right"){let ve=B-x.startX;z=L.right+ve,ie||(le=L.left+ve)}N=Math.max(0,N),z=Math.max(0,z),Y=Math.max(0,Y),le=Math.max(0,le),_&&(N=An(N),z=An(z),Y=An(Y),le=An(le)),N=Math.round(N),z=Math.round(z),Y=Math.round(Y),le=Math.round(le),$e(k,"padding",`${N}px ${z}px ${Y}px ${le}px`),It({side:G,padding:{top:N,right:z,bottom:Y,left:le}});return}let J=oo(B,W);for(;J&&J.tagName==="A";)J=J.parentElement;{let k=[];J&&k.push(J),Ct&&Ct!==J&&k.push(Ct);let G=null,L=16,N=null;for(let z of k){let Y=z.getBoundingClientRect(),le=io(z),ve=[["top-left",Y.left,Y.top+le["top-left"]],["top-right",Y.right,Y.top+le["top-right"]],["bottom-right",Y.right,Y.bottom-le["bottom-right"]],["bottom-left",Y.left,Y.bottom-le["bottom-left"]]];for(let[et,rt,Et]of ve){let je=Math.hypot(B-rt,W-Et);je<L&&(L=je,G=et,N=z)}}if(G&&N){Xn(N),$o(G),Be&&we(null),nt&&Ke(null),ht&&Zt(null),Nt&&ln(null),Xe(!1),Rt&&kn(null),F&&ee(null);return}}Ct&&Xn(null),cn&&$o(null);{let x=[];J&&xr(J)&&x.push(J);let k=(X=J==null?void 0:J.parentElement)!=null?X:null;for(;k&&k!==document.body&&x.length<3;)xr(k)&&x.push(k),k=k.parentElement;for(let G of x){let N=ro(G).find(z=>B>=z.x&&B<=z.x+z.w&&W>=z.y&&W<=z.y+z.h);if(N){Zt(G),ln(N.axis),Xe(hi(G,N.axis)),Be&&we(null),nt&&Ke(null),Rt&&kn(null),F&&ee(null);return}}}ht&&Zt(null),Nt&&ln(null),Xe(!1);{let k=[];J&&k.push(J),Rt&&Rt!==J&&k.push(Rt);let G=null,L=1/0,N=null;for(let z of k){if(!yi(z))continue;let Y=Mo(z);if(!Y)continue;let le=B>=Y.left&&B<=Y.right&&W>=Y.top&&W<=Y.bottom,ve=[["font-size",Y.right,Y.top+Y.height/2],["line-height",Y.left+Y.width/2,Y.bottom]];for(let[et,rt,Et]of ve){let je=Math.hypot(B-rt,W-Et);(le||je<12)&&je<L&&(L=je,G=et,N=z)}}G&&N?(kn(N),ee(G)):(Rt&&kn(null),F&&ee(null))}if(J!==Be&&we(J),J){let x=ko(J),k=J.getBoundingClientRect(),G=Ss(B,W,k,x);Ke(G)}else Ke(null);return}if(hn){let{handle:B,originalPoints:W,hasMoved:ie}=hn,_=e.annotations.find(L=>L.id===hn.annotationId);if(!_)return;let J="metaKey"in m,x=J&&(m.metaKey||m.ctrlKey),k=J&&m.shiftKey,G;if(_.type==="line"){let L=W[0],N=W[W.length-1];B==="start"?G=[h,N]:G=[L,h]}else if(_.type==="freehand"){let L=Math.min(...W.map(ze=>ze.x)),N=Math.max(...W.map(ze=>ze.x)),z=Math.min(...W.map(ze=>ze.y)),Y=Math.max(...W.map(ze=>ze.y)),le=(L+N)/2,ve=(z+Y)/2,et=N-L||1,rt=Y-z||1,Et=et/rt,je=L,ae=N,Ce=z,Je=Y;switch(B){case"topLeft":je=h.x,Ce=h.y;break;case"topRight":ae=h.x,Ce=h.y;break;case"bottomLeft":je=h.x,Je=h.y;break;case"bottomRight":ae=h.x,Je=h.y;break}if(x)switch(B){case"topLeft":ae=N+(L-je),Je=Y+(z-Ce);break;case"topRight":je=L-(ae-N),Je=Y+(z-Ce);break;case"bottomLeft":ae=N+(L-je),Ce=z-(Je-Y);break;case"bottomRight":je=L-(ae-N),Ce=z-(Je-Y);break}if(k){let ze=ae-je,ft=Je-Ce;if(Math.abs(ze/ft)>Et){let Ht=Math.abs(ft)*Et*Math.sign(ze);B==="topLeft"||B==="bottomLeft"?je=ae-Ht:ae=je+Ht}else{let Ht=Math.abs(ze)/Et*Math.sign(ft);B==="topLeft"||B==="topRight"?Ce=Je-Ht:Je=Ce+Ht}}let Ge=ae-je||1,dt=Je-Ce||1;G=W.map(ze=>({x:je+(ze.x-L)/et*Ge,y:Ce+(ze.y-z)/rt*dt}))}else if(_.type==="circle"){let L=W[0],N=W[W.length-1],z=Math.min(L.x,N.x),Y=Math.max(L.x,N.x),le=Math.min(L.y,N.y),ve=Math.max(L.y,N.y),et=(z+Y)/2,rt=(le+ve)/2,Et=Y-z,je=ve-le,ae=z,Ce=Y,Je=le,Ge=ve;switch(B){case"top":if(Je=h.y,x&&(Ge=rt+(rt-h.y)),k){let ze=(Ge-Je)*(Et/je)/2;ae=et-ze,Ce=et+ze}break;case"bottom":if(Ge=h.y,x&&(Je=rt-(h.y-rt)),k){let ze=(Ge-Je)*(Et/je)/2;ae=et-ze,Ce=et+ze}break;case"left":if(ae=h.x,x&&(Ce=et+(et-h.x)),k){let ze=(Ce-ae)*(je/Et)/2;Je=rt-ze,Ge=rt+ze}break;case"right":if(Ce=h.x,x&&(ae=et-(h.x-et)),k){let ze=(Ce-ae)*(je/Et)/2;Je=rt-ze,Ge=rt+ze}break}G=[{x:ae,y:Je},{x:Ce,y:Ge}]}else{let L=W[0],N=W[W.length-1],z=Math.min(L.x,N.x),Y=Math.max(L.x,N.x),le=Math.min(L.y,N.y),ve=Math.max(L.y,N.y),et=(z+Y)/2,rt=(le+ve)/2,Et=Y-z||1,je=ve-le||1,ae=Et/je,Ce=z,Je=Y,Ge=le,dt=ve;switch(B){case"topLeft":Ce=h.x,Ge=h.y;break;case"topRight":Je=h.x,Ge=h.y;break;case"bottomLeft":Ce=h.x,dt=h.y;break;case"bottomRight":Je=h.x,dt=h.y;break}if(x)switch(B){case"topLeft":Je=Y+(z-Ce),dt=ve+(le-Ge);break;case"topRight":Ce=z-(Je-Y),dt=ve+(le-Ge);break;case"bottomLeft":Je=Y+(z-Ce),Ge=le-(dt-ve);break;case"bottomRight":Ce=z-(Je-Y),Ge=le-(dt-ve);break}if(k){let ze=Je-Ce,ft=dt-Ge;if(Math.abs(ze/ft)>ae){let Ht=Math.abs(ft)*ae*Math.sign(ze);B==="topLeft"||B==="bottomLeft"?Ce=Je-Ht:Je=Ce+Ht}else{let Ht=Math.abs(ze)/ae*Math.sign(ft);B==="topLeft"||B==="topRight"?Ge=dt-Ht:dt=Ge+Ht}}G=[{x:Ce,y:Ge},{x:Je,y:dt}]}t({type:"RESIZE_ANNOTATION",payload:{id:hn.annotationId,points:G,saveUndo:!ie}}),ie||Fn(y(f({},hn),{hasMoved:!0}));return}if(Oe&&((T=Oe.annotation.status)!=null?T:"pending")==="pending"){let B=h.x-Oe.startPoint.x,W=h.y-Oe.startPoint.y;if((Math.abs(B)>2||Math.abs(W)>2)&&!Oe.hasMoved)ye(y(f({},Oe),{hasMoved:!0,startPoint:h})),t({type:"MOVE_ANNOTATION",payload:{id:Oe.annotation.id,delta:{x:B,y:W},saveUndo:!0}});else if(Oe.hasMoved){let _=h.x-Oe.startPoint.x,J=h.y-Oe.startPoint.y;ye(y(f({},Oe),{startPoint:h})),t({type:"MOVE_ANNOTATION",payload:{id:Oe.annotation.id,delta:{x:_,y:J}}})}return}!$||!e.isAnnotating||t({type:"CONTINUE_PATH",payload:h})},[$,e.isAnnotating,e.activeTool,Oe,hn,Ie,Be,nt,Ct,cn,ht,Nt,Rt,F,ho,t,An,Ss]),Gr=Pt(m=>{var T,B,W,ie,_,J;if(tn.current.isDragging){let x=tn.current,k=x.element;if(k&&x.selector&&x.elementInfo&&U){k instanceof HTMLElement&&(k.style.removeProperty("font-size"),k.style.removeProperty("line-height"),k.style.removeProperty("transition"));let G=[];if(x.originalFontSize!==U.fontSize&&($e(k,"font-size",`${U.fontSize}px`),G.push({property:"font-size",original:`${x.originalFontSize}px`,modified:`${U.fontSize}px`})),x.originalLineHeight!==U.lineHeight){let L=x.originalFontSize>0?Math.round(x.originalLineHeight/x.originalFontSize*1e3)/1e3:1.2,N=U.fontSize>0?Math.round(U.lineHeight/U.fontSize*1e3)/1e3:1.2;$e(k,"line-height",`${N}`),G.push({property:"line-height",original:`${L}`,modified:`${N}`})}G.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:x.selector,durableSelector:(T=x.durableSelector)!=null?T:void 0,element:x.elementInfo,changes:G}})}tn.current={isDragging:!1,property:null,startX:0,startY:0,originalFontSize:0,originalLineHeight:0,originalRatio:1.2,element:null,elementInfo:null,selector:null,durableSelector:null},Se(null);return}if(pt.current.isDragging){let x=pt.current,k=x.element,G="button"in m&&m.button===2;if(!x.hasMoved&&!G&&k&&x.selector&&x.elementInfo){k instanceof HTMLElement&&k.style.removeProperty("transition");let L=["space-between","space-around","stretch","normal"],N=x.originalJustifyContent||"normal",z=L.indexOf(N),Y=L[(z+1)%L.length],le=[];Y==="normal"?($e(k,"justify-content","normal"),le.push({property:"justify-content",original:x.originalJustifyContent,modified:"normal"})):Y==="stretch"?($e(k,"justify-content",Y),$e(k,"row-gap","8px"),$e(k,"column-gap","8px"),le.push({property:"justify-content",original:x.originalJustifyContent||"normal",modified:Y}),x.originalRow!==8&&le.push({property:"row-gap",original:`${x.originalRow}px`,modified:"8px"}),x.originalColumn!==8&&le.push({property:"column-gap",original:`${x.originalColumn}px`,modified:"8px"})):(k instanceof HTMLElement&&(k.style.removeProperty("row-gap"),k.style.removeProperty("column-gap")),$e(k,"justify-content",Y),le.push({property:"justify-content",original:x.originalJustifyContent||"normal",modified:Y}),x.originalRow>0&&le.push({property:"row-gap",original:`${x.originalRow}px`,modified:"0px"}),x.originalColumn>0&&le.push({property:"column-gap",original:`${x.originalColumn}px`,modified:"0px"})),le.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:x.selector,durableSelector:(B=x.durableSelector)!=null?B:void 0,element:x.elementInfo,changes:le}})}else if(x.hasMoved&&k&&x.selector&&x.elementInfo&&at){k instanceof HTMLElement&&(k.style.removeProperty("row-gap"),k.style.removeProperty("column-gap"),k.style.removeProperty("transition"));let L=[];x.isAuto?(k instanceof HTMLElement&&k.style.removeProperty("justify-content"),$e(k,"justify-content","normal"),$e(k,"row-gap",`${at.row}px`),$e(k,"column-gap",`${at.column}px`),L.push({property:"justify-content",original:x.originalJustifyContent,modified:"normal"}),L.push({property:"row-gap",original:"0px",modified:`${at.row}px`}),L.push({property:"column-gap",original:"0px",modified:`${at.column}px`})):(x.originalRow!==at.row&&($e(k,"row-gap",`${at.row}px`),L.push({property:"row-gap",original:`${x.originalRow}px`,modified:`${at.row}px`})),x.originalColumn!==at.column&&($e(k,"column-gap",`${at.column}px`),L.push({property:"column-gap",original:`${x.originalColumn}px`,modified:`${at.column}px`}))),L.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:x.selector,durableSelector:(W=x.durableSelector)!=null?W:void 0,element:x.elementInfo,changes:L}})}pt.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},te(null);return}if(Gt.current.isDragging){let x=Gt.current,k=x.element;if(k&&x.selector&&x.elementInfo&&yt){k instanceof HTMLElement&&(k.style.removeProperty("border-top-left-radius"),k.style.removeProperty("border-top-right-radius"),k.style.removeProperty("border-bottom-right-radius"),k.style.removeProperty("border-bottom-left-radius"),k.style.removeProperty("transition"));let G=["top-left","top-right","bottom-right","bottom-left"],L={"top-left":"border-top-left-radius","top-right":"border-top-right-radius","bottom-right":"border-bottom-right-radius","bottom-left":"border-bottom-left-radius"},N=[];for(let z of G)x.original[z]!==yt.radius[z]&&($e(k,L[z],`${yt.radius[z]}px`),N.push({property:L[z],original:`${x.original[z]}px`,modified:`${yt.radius[z]}px`}));N.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:x.selector,durableSelector:(ie=x.durableSelector)!=null?ie:void 0,element:x.elementInfo,changes:N}})}Gt.current={isDragging:!1,corner:null,startY:0,original:{"top-left":0,"top-right":0,"bottom-right":0,"bottom-left":0},maxRadius:0,element:null,elementInfo:null,selector:null,durableSelector:null},Ln(null);return}if(xe.current.isDragging){let x=xe.current,k=x.element,G=x.selector,L=x.elementInfo;if(k&&G&&L&&Ze){let N=x.original,z=Ze.padding;k instanceof HTMLElement&&(k.style.removeProperty("padding"),k.style.removeProperty("transition"));let Y=[],le=[{prop:"padding-top",origVal:N.top,newVal:z.top},{prop:"padding-right",origVal:N.right,newVal:z.right},{prop:"padding-bottom",origVal:N.bottom,newVal:z.bottom},{prop:"padding-left",origVal:N.left,newVal:z.left}];for(let{prop:ve,origVal:et,newVal:rt}of le)et!==rt&&($e(k,ve,`${rt}px`),Y.push({property:ve,original:`${et}px`,modified:`${rt}px`}));Y.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:G,durableSelector:(_=x.durableSelector)!=null?_:void 0,element:L,changes:Y}})}xe.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},It(null);return}if(hn){Fn(null);return}if(Oe){if(!Oe.hasMoved&&Oe.annotation.type==="text"&&((J=Oe.annotation.status)!=null?J:"pending")==="pending"){let x=ho(m);I({id:Oe.annotation.id,point:Oe.annotation.points[0],text:Oe.annotation.text||"",fontSize:Oe.annotation.fontSize||12,isNew:!1,clickPoint:x,groupId:Oe.annotation.groupId})}ye(null);return}if(!$)return;let h=5;if(e.currentPath.length>=2){let x=e.currentPath[0],k=e.currentPath[e.currentPath.length-1],G=Math.abs(k.x-x.x),L=Math.abs(k.y-x.y);if((e.activeTool==="line"?Math.sqrt(G*G+L*L)<h:G<h&&L<h)&&["rectangle","circle","line"].includes(e.activeTool)){q(!1),t({type:"CANCEL_PATH"});return}}let X=di(e.currentPath);if(e.activeTool==="rectangle"&&e.currentPath.length>=2){let x=e.currentPath[0],k=e.currentPath[e.currentPath.length-1],G=Math.min(x.x,k.x),L=Math.max(x.y,k.y),N=e.strokeWidth/2,z=Math.random().toString(36).substring(2,9);ue({point:{x:G-N+4,y:L+N+4},groupId:z}),q(!1),t({type:"FINISH_PATH",payload:{groupId:z,elements:X}});return}q(!1),t({type:"FINISH_PATH",payload:{elements:X}})},[$,Oe,hn,Ze,yt,at,U,ho,t,e.activeTool,e.currentPath,e.strokeWidth]),qa=Pt(m=>{let h=m.target.value;sr.current=m.target.selectionStart,I(X=>X&&y(f({},X),{text:h}))},[]),Za=Pt(m=>{m.key==="Escape"?I(null):m.key==="Enter"&&!m.shiftKey&&(m.preventDefault(),yo())},[yo]),Qa=Pt(m=>{if(!v)return;let h=m.clipboardData.items,X=[];for(let T=0;T<h.length;T++){let B=h[T];if(B.type.startsWith("image/")){let W=B.getAsFile();W&&X.push(W)}}X.length>0&&(m.preventDefault(),I(T=>T?y(f({},T),{images:[...T.images||[],...X]}):null))},[v]),ec=Pt(m=>{if(!e.isAnnotating)return;if(e.activeTool==="hand"){m.preventDefault();let X=Be||ht||Ct||Rt;if(X&&!ne(X)){let T=en(X),B=dn(X);t({type:"SELECT_ELEMENT",payload:{el:X,info:y(f({},T),{selector:B})}})}return}m.preventDefault();let h=R.current;h&&(H.current=!0,h.style.pointerEvents="none",setTimeout(()=>{H.current&&(H.current=!1,h.style.pointerEvents="")},4e3))},[e.activeTool,e.isAnnotating,Be,ht,Ct,Rt,t,ne,R]);Vt(()=>{let m=e.annotations.filter(ie=>ie.linkedSelector);if(m.length===0)return;let h=null,X=document.createElement("canvas").getContext("2d"),T=()=>{var _,J,x;let ie=[];for(let k of m){let G=document.querySelector(k.linkedSelector);if(!G&&((J=(_=k.elements)==null?void 0:_[0])!=null&&J.selector)&&k.linkedSelector.startsWith("[data-pm=")){try{G=document.querySelector(k.elements[0].selector)}catch(je){}if(G){let je=(x=k.linkedSelector.match(/data-pm="([^"]+)"/))==null?void 0:x[1];je&&G.setAttribute("data-pm",je)}}if(!G)continue;let L=G.getBoundingClientRect(),N=e.styleModifications.some(je=>{try{return G.matches(je.selector)}catch(ae){return!1}}),z=m.filter(je=>je.id!==k.id&&je.timestamp<k.timestamp&&je.linkedSelector===k.linkedSelector).length,Y=(N?1:0)+z,le;if(k.text&&X){let je=k.fontSize||12;X.font=`${je}px ${Ft}`,le=Math.max(...k.text.split(`
|
|
9
|
+
`).map(ae=>X.measureText(ae).width))}let ve=L.top>=bn*(1+Y)?"top-left":"bottom-left",et=aa(L,ve,Y,A==null?void 0:A.current,le),rt=k.points[0],Et=ve!==k.linkedAnchor;rt&&(Et||Math.abs(et.x-rt.x)>1||Math.abs(et.y-rt.y)>1)&&ie.push({id:k.id,point:et,linkedAnchor:Et?ve:void 0})}ie.length>0&&t({type:"UPDATE_LINKED_POSITIONS",payload:{updates:ie}})},B=()=>{h&&cancelAnimationFrame(h),h=requestAnimationFrame(T)};T(),window.addEventListener("scroll",B,!0),window.addEventListener("resize",B,!0),window.addEventListener("load",B),document.fonts.ready.then(B);let W=new MutationObserver(B);return W.observe(document.body,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["style","class"]}),()=>{window.removeEventListener("scroll",B,!0),window.removeEventListener("resize",B,!0),window.removeEventListener("load",B),W.disconnect(),h&&cancelAnimationFrame(h)}},[e.annotations,t]);let tc=()=>{var m,h,X;if(!e.isAnnotating)return"default";if(hn){let{handle:T}=hn;return T==="start"||T==="end"?"move":T==="top"||T==="bottom"?"ns-resize":T==="left"||T==="right"?"ew-resize":T==="topLeft"||T==="bottomRight"?"nwse-resize":"nesw-resize"}if(e.activeTool==="text")return"text";if(e.activeTool==="hand"){let T=(m=at==null?void 0:at.axis)!=null?m:Nt;if(T==="row")return"ns-resize";if(T==="column")return"ew-resize";if(yt||cn)return"ns-resize";let B=(h=U==null?void 0:U.property)!=null?h:F;if(B==="font-size")return"ew-resize";if(B==="line-height")return"ns-resize";let W=(X=Ze==null?void 0:Ze.side)!=null?X:nt;return W==="top"||W==="bottom"?"ns-resize":W==="left"||W==="right"?"ew-resize":"default"}return"crosshair"},nc={position:"fixed",top:0,left:0,width:"100vw",height:"100vh",zIndex:9998,pointerEvents:e.isAnnotating?"auto":"none",visibility:e.isAnnotating?"visible":"hidden",cursor:tc()},Wo=Pt(()=>{let m=R.current;if(!m||!v)return{width:100,height:12*1.4,isWrapped:!1};let h=m.getContext("2d");if(!h)return{width:100,height:v.fontSize*1.4,isWrapped:!1};h.font=`${v.fontSize}px ${Ft}`;let T=h.measureText("Type here...").width,B=v.text.split(`
|
|
10
|
+
`),W=B.length>0?Math.max(T,...B.map(k=>h.measureText(k||" ").width)):T,ie=v.point.x-Kt.x,_=So(ie);if(_!==void 0&&W>_){let k=no(h,B,_),G=Math.min(_,Math.max(T,...k.map(N=>h.measureText(N).width))),L=Math.max(1,k.length)*v.fontSize*1.4;return{width:G,height:L,isWrapped:!0}}let x=Math.max(1,B.length)*v.fontSize*1.4;return{width:W,height:x,isWrapped:!1}},[v,R,Kt.x])(),oc=v?Math.max(1,v.text.split(`
|
|
11
|
+
`).length)*v.fontSize*1.4+8:0,Es=Wo.height+8,rc=Wo.isWrapped?Es-oc:0,ic=v?{position:"fixed",left:v.point.x-4-Kt.x,top:v.point.y-4-Kt.y-rc,zIndex:9999,width:Wo.width+8,height:Es,padding:4,fontSize:v.fontSize,fontFamily:Ft,color:"#ffffff",backgroundColor:e.activeColor,border:"none",borderRadius:0,outline:"none",boxShadow:"none",lineHeight:1.4,resize:"none",overflow:"hidden",whiteSpace:Wo.isWrapped?"pre-wrap":"pre",wordBreak:Wo.isWrapped?"break-word":void 0}:{};return Bo(Oo,{children:[tt("canvas",{ref:K,id:"devtools-canvas",style:nc,onMouseDown:ws,onMouseMove:Cs,onMouseUp:m=>Gr(m),onMouseLeave:m=>{Gr(m),We(null),lt(null)},onTouchStart:ws,onTouchMove:Cs,onTouchEnd:m=>Gr(m),onContextMenu:ec}),v&&Bo(Oo,{children:[tt("style",{children:"#devtools-text-input::placeholder { color: rgba(255, 255, 255, 0.5); }"}),tt("textarea",{id:"devtools-text-input",ref:Te,value:v.text,onChange:qa,onKeyDown:Za,onPaste:Qa,onBlur:yo,placeholder:"Type here...",style:ic}),v.images&&v.images.length>0&&Bo("div",{"data-devtools":!0,style:{position:"fixed",left:v.point.x-4-Kt.x,top:v.point.y-4-Kt.y-20,zIndex:1e4,fontSize:11,fontFamily:"system-ui, sans-serif",color:"#fff",backgroundColor:"rgba(0,0,0,0.7)",padding:"2px 6px",borderRadius:3,whiteSpace:"nowrap"},children:[v.images.length," image",v.images.length>1?"s":""," attached"]})]}),e.isAnnotating&&e.activeTool!=="hand"&&e.styleModifications.length>0&&tt(_l,{styleModifications:e.styleModifications,isInspecting:!!e.inspectedElement,accentColor:e.activeColor,annotationGroupCount:new Set(e.annotations.map(m=>m.groupId||m.id)).size,dispatch:t,inFlightSelectors:o,toolbarRef:A,onHoverSelector:me}),e.activeTool==="hand"&&e.isAnnotating&&e.styleModifications.length>0&&tt($l,{styleModifications:e.styleModifications,accentColor:e.activeColor}),e.isAnnotating&&tt(Rl,{annotations:e.annotations,supersededAnnotations:_n,inFlightIds:r,scrollX:Kt.x,scrollY:Kt.y,annotationGroupMap:ir,onViewThread:a,onSelectAnnotation:Lt,onHoverAnnotation:re,canvasRef:R}),e.isAnnotating&&l&&tt(Ll,{annotations:e.annotations,supersededAnnotations:_n,scrollX:Kt.x,scrollY:Kt.y,onReply:l,annotationGroupMap:ir,canvasRef:R,onHoverAnnotation:re}),e.isAnnotating&&i&&i.size>0&&tt(Si,{inFlightSelectorColors:i}),e.isAnnotating&&bs&&tt(Si,{inFlightSelectorColors:bs,animated:!1}),e.activeTool==="hand"&&e.isAnnotating&&(at?pt.current.element:ht)&&tt(Mi,{element:at?pt.current.element:ht,gap:at?{row:at.row,column:at.column}:Vo(ht),accentColor:e.activeColor,hoveredAxis:Nt,draggingAxis:(Ms=at==null?void 0:at.axis)!=null?Ms:null,cursorViewport:mt,isAutoGap:Re,refreshKey:an}),e.activeTool==="hand"&&e.isAnnotating&&ct&&tt(ia,{element:ct.target,modifier:ct.modifier,accentColor:e.activeColor,refreshKey:an}),e.activeTool==="hand"&&e.isAnnotating&&!ct&&(yt?Gt.current.element:Ct)&&tt(Dl,{element:yt?Gt.current.element:Ct,radius:(Ts=yt==null?void 0:yt.radius)!=null?Ts:io(Ct),accentColor:e.activeColor,hoveredCorner:cn,draggingCorner:(Is=yt==null?void 0:yt.corner)!=null?Is:null,cursorViewport:mt}),e.activeTool==="hand"&&e.isAnnotating&&!ct&&(U?tn.current.element:Rt)&&tt(sa,{element:U?tn.current.element:Rt,fontSize:(Rs=U==null?void 0:U.fontSize)!=null?Rs:Uo(Rt).fontSize,lineHeight:(Ls=U==null?void 0:U.lineHeight)!=null?Ls:Uo(Rt).lineHeight,accentColor:e.activeColor,hoveredProperty:F,draggingProperty:(As=U==null?void 0:U.property)!=null?As:null,cursorViewport:mt}),e.activeTool==="hand"&&e.isAnnotating&&!ct&&(Ze?xe.current.element:Be)&&tt(Pi,{element:Ze?xe.current.element:Be,padding:(Ps=Ze==null?void 0:Ze.padding)!=null?Ps:ko(Be),accentColor:e.activeColor,hoveredSide:nt,draggingSide:(Bs=Ze==null?void 0:Ze.side)!=null?Bs:null,cursorViewport:mt,refreshKey:U?U.fontSize+U.lineHeight*1e3:0}),e.activeTool==="inspector"&&e.isAnnotating&&tt(Oo,{children:Ie&&!e.inspectedElement&&(()=>{let m=!!ce||!!(v!=null&&v.linkedSelector)||e.annotations.some(h=>{if(!h.linkedSelector)return!1;try{return Ie.matches(h.linkedSelector)}catch(X){return!1}});return tt(In,{element:Ie,isSelected:!1,elementInfo:it,color:e.activeColor,hideTooltip:m})})()}),((v==null?void 0:v.linkedSelector)||(ce==null?void 0:ce.linkedSelector))&&(()=>{let m=(v==null?void 0:v.linkedSelector)||(ce==null?void 0:ce.linkedSelector);if(!m)return null;let h=null;try{h=document.querySelector(m)}catch(X){}return h?tt(In,{element:h,isSelected:!0,color:e.activeColor,hideTooltip:!0}):null})(),E&&(()=>{let m=e.annotations.find(T=>T.id===E);if(!(m!=null&&m.linkedSelector))return null;let h=null;try{h=document.querySelector(m.linkedSelector)}catch(T){}if(!h)return null;let X=!!(r&&r.has(m.id));return tt(In,{element:h,isSelected:!X,color:m.color,hideTooltip:!0})})(),j&&(()=>{let m=e.annotations.find(B=>B.id===j);if(!(m!=null&&m.linkedSelector))return null;let h=null;try{h=document.querySelector(m.linkedSelector)}catch(B){}if(!h)return null;let X=m.groupId?e.annotations.filter(B=>B.groupId===m.groupId):[m],T=!!(r&&X.some(B=>r.has(B.id)));return tt(In,{element:h,isSelected:!T,color:m.color,hideTooltip:!0})})(),V&&(()=>{let m=null;try{m=document.querySelector(V)}catch(X){}if(!m)return null;let h=!!(o&&o.has(V));return tt(In,{element:m,isSelected:!h,color:e.activeColor,hideTooltip:!0})})(),e.activeTool==="model"&&e.isAnnotating&&Z.size>0&&[...Z.entries()].map(([m,h])=>tt(In,{element:h.rootElement,isSelected:!0,elementInfo:{selector:"",tagName:h.rootElement.tagName.toLowerCase(),reactComponent:m},color:"#8b5cf6"},m)),e.activeTool==="model"&&e.isAnnotating&&rr&&tt(In,{element:rr.rootElement,isSelected:!0,elementInfo:{selector:"",tagName:rr.rootElement.tagName.toLowerCase(),reactComponent:rr.name},color:"#22c55e"}),e.activeTool==="model"&&e.isAnnotating&&ys.length>0&&ys.map((m,h)=>tt("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"?Bo(Oo,{children:[tt("div",{style:{position:"absolute",left:"50%",top:0,width:6,height:1,backgroundColor:"#FF0000",transform:"translateX(-50%)"}}),tt("div",{style:{position:"absolute",left:"50%",top:0,bottom:0,width:1,backgroundColor:"#FF0000",transform:"translateX(-50%)"}}),tt("div",{style:{position:"absolute",left:"50%",bottom:0,width:6,height:1,backgroundColor:"#FF0000",transform:"translateX(-50%)"}}),tt("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)})]}):Bo(Oo,{children:[tt("div",{style:{position:"absolute",left:0,top:"50%",width:1,height:6,backgroundColor:"#FF0000",transform:"translateY(-50%)"}}),tt("div",{style:{position:"absolute",left:0,right:0,top:"50%",height:1,backgroundColor:"#FF0000",transform:"translateY(-50%)"}}),tt("div",{style:{position:"absolute",right:0,top:"50%",width:1,height:6,backgroundColor:"#FF0000",transform:"translateY(-50%)"}}),tt("div",{style:{position:"absolute",left:m.width<30?0:"50%",top:(m.width<30,void 0),bottom:"calc(50% + 4px)",transform:m.width<30?"none":"translateX(-50%)",fontSize:11,fontWeight:600,color:"#fff",backgroundColor:"#FF0000",padding:"2px 4px",whiteSpace:"nowrap",fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',lineHeight:1},children:Math.round(m.width)})]})},h)),e.activeTool==="model"&&e.isAnnotating&&Pe&&tt(In,{element:Pe.rootElement,isSelected:!1,elementInfo:{selector:"",tagName:Pe.rootElement.tagName.toLowerCase(),reactComponent:Pe.name},color:g!=null&&g.has(Pe.name)?"#22c55e":"#8b5cf6"}),e.activeTool==="hand"&&e.isAnnotating&&e.inspectedElement&&Bo(Oo,{children:[wt&&wt!=="padding"&&wt!=="gap"&&(()=>{var _;let m=new Set(e.annotations.map(J=>J.groupId||J.id)).size,h=e.inspectedElement.info.selector,X=e.styleModifications.findIndex(J=>J.selector===h),T=X>=0?m+X+1:m+e.styleModifications.length+1,B=e.styleModifications.find(J=>J.selector===h),W=(_=B==null?void 0:B.changes.length)!=null?_:0,ie=!!(B!=null&&B.captured);return tt(In,{element:e.inspectedElement.el,isSelected:!0,elementInfo:e.inspectedElement.info,color:ie?"#999999":e.activeColor,annotationNumber:T,changeCount:W})})(),wt==="padding"&&tt(Pi,{element:e.inspectedElement.el,padding:ko(e.inspectedElement.el),accentColor:e.activeColor,hoveredSide:null,draggingSide:null}),wt==="gap"&&tt(Mi,{element:e.inspectedElement.el,gap:Vo(e.inspectedElement.el),accentColor:e.activeColor,hoveredAxis:null,draggingAxis:null}),tt(oa,{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:Ot,accentColor:e.activeColor,toolbarRef:A})]})]})}import{useCallback as gn,useEffect as mn,useMemo as ts,useRef as Mt,useState as tr}from"react";import{Circle as Np,Component as Hp,Hand as Fp,MessageCircle as _p,Pen as zp,Slash as $p,Square as Wp,Trash2 as Yp,Type as jp}from"lucide-react";import{useEffect as zu,useRef as $u}from"react";function da(e,t,n,r,o){let i=$u(0);zu(()=>{if(!n.current||(localStorage.setItem(o.expanded,String(e)),!e))return;let s=t.annotations.length;(s>=i.current||s===0||!r)&&(localStorage.setItem(o.annotations,JSON.stringify(t.annotations)),i.current=s),localStorage.setItem(o.styleMods,JSON.stringify(t.styleModifications)),localStorage.setItem(o.spacingChanges,JSON.stringify(t.spacingTokenChanges)),localStorage.setItem(o.tool,t.activeTool),localStorage.setItem(o.color,t.activeColor),localStorage.setItem(o.stroke,String(t.strokeWidth)),t.inspectedElement?localStorage.setItem(o.inspected,JSON.stringify({selector:t.inspectedElement.info.selector,info:t.inspectedElement.info})):localStorage.removeItem(o.inspected)},[e,t.annotations,t.styleModifications,t.spacingTokenChanges,t.activeTool,t.activeColor,t.strokeWidth,t.inspectedElement,r,n,o])}import{Component as ip,createElement as sp,useCallback as Fr,useEffect as Gn,useRef as po,useState as fn}from"react";import{Link2 as lp}from"lucide-react";var Wu={colors:[],fonts:[],typeScale:[],spacing:[],radii:[],shadows:[],other:[],references:{}},Yu=/^#[0-9a-fA-F]{3,8}$/,ju=/^(?:rgba?|hsla?|oklch|oklab|lch|lab)\(/,Gu=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 pa(e){let t=e.trim().toLowerCase();return Yu.test(t)||ju.test(t)||Gu.has(t)}var Vu=/^-?\d+(\.\d+)?(px|rem|em|%)$/;function Xi(e){return Vu.test(e.trim())}var ua=new Set(["serif","sans-serif","monospace","cursive","fantasy","system-ui","ui-serif","ui-sans-serif","ui-monospace","ui-rounded"]);function Uu(e){let t=e.trim().toLowerCase();return!!(ua.has(t)||t.includes(",")&&t.split(",").some(n=>ua.has(n.trim().replace(/['"]/g,""))))}function Xu(e){let t=e.trim().toLowerCase(),n=t.match(/\d+(\.\d+)?px/g);return!!(n&&n.length>=2&&(pa(t.replace(/[^#()\w,.\s/%]/g,"").split(/\s+/).pop()||"")||t.includes("rgb")||t.includes("hsl")||t.includes("#")))}var Ju=/(?:^--(color|bg|fg|accent|border-color|text-color|surface|background|foreground))|(?:-(color|bg|fg)$)/i,Ku=/^--(font-family|font|ff|family)/i,qu=/^--(font-size|text-size|fs|text-(?:xs|sm|base|md|lg|xl|2xl|3xl|4xl|5xl))/i,Zu=/^--(space|gap|padding|margin|inset)/i,Qu=/^--(radius|rounded|br|border-radius)/i,ep=/^--(shadow|elevation|drop-shadow)/i;function fa(e,t){let n=e.toLowerCase();return ep.test(n)?"shadows":Qu.test(n)?"radii":Ku.test(n)?"fonts":qu.test(n)&&Xi(t)?"typeScale":Ju.test(n)||pa(t)?"colors":Uu(t)?"fonts":Xu(t)?"shadows":Zu.test(n)&&Xi(t)||Xi(t)?"spacing":"other"}function ga(e,t,n,r){if(e)for(let o of e){if(o instanceof CSSGroupingRule){ga(o.cssRules,t,n,r);continue}if(o instanceof CSSStyleRule){let i=o.selectorText.toLowerCase();(i===":root"||i==="html"||i==="*"||i.includes(":root"))&&tp(o.style,t,n,r)}}}var ma=/var\((--[^,)]+)/;function tp(e,t,n,r){for(let o=0;o<e.length;o++){let i=e[o];if(!(i!=null&&i.startsWith("--"))||n.has(i))continue;n.add(i);let s=t.getPropertyValue(i).trim();if(!s)continue;let l=fa(i,s);r[l].push([i,s]);let c=e.getPropertyValue(i).trim().match(ma);c&&(r.references[i]=c[1])}}function Or(e){let t=e.trim().match(/^(-?\d+(?:\.\d+)?)/);return t?parseFloat(t[1]):null}function Nr(e){let t=e.trim().toLowerCase(),n=t.match(/oklch\(\s*([\d.]+%?)/);if(n){let i=n[1];return i.endsWith("%")?parseFloat(i)/100:parseFloat(i)}let r=t.match(/rgba?\(\s*(\d+)[,\s]+(\d+)[,\s]+(\d+)/);if(r){let[i,s,l]=[parseInt(r[1],10),parseInt(r[2],10),parseInt(r[3],10)];return(.2126*i+.7152*s+.0722*l)/255}let o=t.match(/hsla?\(\s*[\d.]+[,\s]+[\d.]+%?[,\s]+([\d.]+)%?/);if(o)return parseFloat(o[1])/100;if(t.startsWith("#")){let i=t.slice(1);(i.length===3||i.length===4)&&(i=i[0]+i[0]+i[1]+i[1]+i[2]+i[2]);let s=parseInt(i.slice(0,2),16),l=parseInt(i.slice(2,4),16),a=parseInt(i.slice(4,6),16);if(!isNaN(s))return(.2126*s+.7152*l+.0722*a)/255}return null}function ha(e){return e==="colors"?(t,n)=>{let r=Nr(t[1]),o=Nr(n[1]);return r!==null&&o!==null?r-o:t[0].localeCompare(n[0])}:e==="typeScale"||e==="spacing"||e==="radii"?(t,n)=>{let r=Or(t[1]),o=Or(n[1]);return r!==null&&o!==null?r-o:t[0].localeCompare(n[0])}:e==="other"?(t,n)=>{let r=Or(t[1]),o=Or(n[1]);return r!==null&&o!==null?r-o: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 ya(e){let t=new Map;for(let o of e){let i=np(o[0]),s=t.get(i);s||(s=[],t.set(i,s)),s.push(o)}let n=ha("colors");for(let o of t.values())o.sort(n);let r=[...t.entries()];return r.sort((o,i)=>{var a,c;let s=(a=Nr(o[1][0][1]))!=null?a:0,l=(c=Nr(i[1][0][1]))!=null?c:0;return s-l}),r}var op=["colors","fonts","typeScale","spacing","radii","shadows","other"],Dr=null,rp=5e3;function ba(){if(typeof document=="undefined")return Wu;if(Dr&&Date.now()-Dr.timestamp<rp)return Dr.tokens;let e={colors:[],fonts:[],typeScale:[],spacing:[],radii:[],shadows:[],other:[],references:{}},t=new Set,n=getComputedStyle(document.documentElement);try{for(let o of document.styleSheets)try{ga(o.cssRules||o.rules,n,t,e)}catch(i){}}catch(o){}let r=document.documentElement.style;for(let o=0;o<r.length;o++){let i=r[o];if(!(i!=null&&i.startsWith("--"))||t.has(i))continue;t.add(i);let s=n.getPropertyValue(i).trim();if(!s)continue;let l=fa(i,s);e[l].push([i,s]);let c=r.getPropertyValue(i).trim().match(ma);c&&(e.references[i]=c[1])}for(let o of op)e[o].sort(ha(o));return Dr={tokens:e,timestamp:Date.now()},e}import{Fragment as Do,jsx as De,jsxs as Yt}from"react/jsx-runtime";var xa="popmelt-library-tab",ap=/^#[0-9a-fA-F]{3,8}$/,cp=/^(?:rgba?|hsla?|oklch)\([^)]+\)$/,dp=new Set(["black","white","red","blue","green","yellow","orange","purple","pink","gray","grey","cyan","magenta","brown","navy","teal","maroon","olive","silver","aqua","fuchsia","lime"]),up=/^-?\d+(\.\d+)?(px|rem|em|%)$/;function Sa(e){let t=e.trim();return ap.test(t)||cp.test(t)||dp.has(t.toLowerCase())}function pp(e){return up.test(e.trim())}function fp(e){let t=e.trim().match(/^(-?\d+(?:\.\d+)?)px$/);return t?parseFloat(t[1]):null}function wa(e,t=""){if(e==null)return[];if(typeof e!="object")return[[t,String(e)]];if(Array.isArray(e))return[[t,e.map(String).join(", ")]];let n=[];for(let[r,o]of Object.entries(e)){let i=t?`${t}.${r}`:r;if(o!==null&&typeof o=="object"&&!Array.isArray(o)){let s=o;typeof s.value=="string"?n.push([i,s.value]):n.push(...wa(o,i))}else n.push([i,Array.isArray(o)?o.map(String).join(", "):String(o!=null?o:"")])}return n}function gp(e){return e.length===0?"generic":e.filter(([,r])=>Sa(r)).length>e.length/2?"colors":e.filter(([,r])=>pp(r)).length>e.length/2?"spacing":"generic"}var mp=y(f({position:"fixed",top:16,right:16,bottom:80,width:300,backgroundColor:"#eaeaea"},Yn),{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"}),Ca={border:"none",background:"none",cursor:"pointer",fontFamily:"inherit",fontSize:11,fontWeight:600,padding:"2px 0",color:"#9ca3af"},hp=y(f({},Ca),{color:"#1f2937",borderBottom:"1.5px solid #1f2937"});function yp({varName:e,value:t,reference:n}){return De("div",{title:n?`${e} \u2192 ${n}
|
|
12
|
+
${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&&De(lp,{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 Ea({entries:e,references:t}){let n=[],r=[];for(let i of e)Sa(i[1])?n.push(i):r.push(i);let o=ya(n);return Yt(Do,{children:[o.map(([i,s])=>Yt("div",{style:{marginBottom:4},children:[Yt("div",{style:{fontSize:10,color:"#9ca3af",marginBottom:2},children:[i,s.length>1?` (${s.length})`:""]}),De("div",{style:{display:"flex",flexWrap:"wrap",gap:2},children:s.map(([l,a])=>De(yp,{varName:l,value:a,reference:t[l]},l))})]},i)),r.length>0&&De(_r,{entries:r})]})}var Hr=[0,1,2,4,8,12,16,20,24,28,32];function bp(e){if(e<=32){let t=Hr[0],n=Math.abs(e-t);for(let r=1;r<Hr.length;r++){let o=Math.abs(e-Hr[r]);o<n&&(t=Hr[r],n=o)}return t}return Math.round(e/8)*8}function xp({label:e,value:t,px:n,tokenPath:r,rawToken:o,onHover:i,onModify:s,onDelete:l}){let[a,c]=fn(!1),[d,u]=fn(null),p=po(!1),g=po(0),M=po(0),C=po([]),b=d!==null?d:n,E=d!==null?`${d}px`:t,D=d!==null,A=Fr(w=>{w.preventDefault(),p.current=!0,g.current=w.clientX,M.current=n;let O=yr(o);C.current=pi(O);let K=$=>{let q=$.clientX-g.current,v=Math.max(0,Math.round(M.current+q));$.shiftKey&&(v=bp(v));for(let I of C.current)I.element.style.setProperty(I.property,v+"px","important");u(v),i==null||i({name:e,px:v,token:O})},H=()=>{window.removeEventListener("mousemove",K),window.removeEventListener("mouseup",H),document.body.style.cursor="",p.current=!1,u($=>{if($!==null&&$!==n&&s){let q=yr(o),v=q.bindings&&q.bindings.length>0,I;if(v){let ue=gi(q.bindings,M.current,$);I=JSON.stringify(y(f({},q),{value:`${$}px`,bindings:ue}))}else{let ue=vl(C.current,M.current),ce=Sl(C.current);if(ue.length>0){let Fe=gi(ue,M.current,$);I=JSON.stringify({value:`${$}px`,property:ce,bindings:Fe})}else I=`${$}px`}let Q=typeof o=="string"?o:JSON.stringify(o),ge=C.current.map(ue=>({selector:dn(ue.element),property:ue.property})),be=Cl(C.current,M.current,$);s({tokenPath:r,originalValue:Q,currentValue:I,targets:ge,originalPx:M.current,currentPx:$},{id:Math.random().toString(36).substring(2,9),tokenPath:r,tokenName:e,originalPx:M.current,newPx:$,affectedElements:be})}return $})};document.body.style.cursor="ew-resize",window.addEventListener("mousemove",K),window.addEventListener("mouseup",H)},[n,e,r,o,i,s]),R=yr(o);return Yt("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",fontSize:11,padding:"1px 0",cursor:"ew-resize",userSelect:"none"},onMouseEnter:()=>{p.current||(c(!0),i==null||i({name:e,px:b,token:R}))},onMouseLeave:()=>{p.current||(c(!1),i==null||i(null))},onMouseDown:A,children:[De("span",{style:{color:a||D?"#FF0000":"#9ca3af"},children:e}),Yt("span",{style:{display:"flex",alignItems:"center",gap:4},children:[De("span",{style:{color:a||D?"#FF0000":"#6b7280",fontWeight:600},children:E}),l&&a&&!D&&De("button",{type:"button",title:"Remove token",onMouseDown:w=>{w.stopPropagation();let O=typeof o=="string"?o:JSON.stringify(o);l(r,O)},style:{border:"none",background:"none",cursor:"pointer",padding:0,fontSize:10,lineHeight:1,color:"#9ca3af"},onMouseEnter:w=>{w.currentTarget.style.color="#FF0000"},onMouseLeave:w=>{w.currentTarget.style.color="#9ca3af"},children:"\u2715"})]})]})}function vp({entries:e,categoryKey:t,rawTokens:n,onHover:r,onModify:o,onDelete:i}){let s=[],l=[];for(let a of e){let c=fp(a[1]);c!==null?s.push([a[0],a[1],c]):l.push(a)}return Yt(Do,{children:[s.length>0&&De("div",{style:{display:"flex",flexDirection:"column",gap:2},children:s.map(([a,c,d])=>{let u=a.split(".").pop(),p=n?Sp(n,a):c,g=p&&typeof p=="object"&&"value"in p?p:c;return De(xp,{label:u,value:c,px:d,tokenPath:`tokens.${t}.${a}`,rawToken:g,onHover:r,onModify:o,onDelete:i},a)})}),l.length>0&&De(_r,{entries:l})]})}function Sp(e,t){let n=t.split("."),r=e;for(let o of n){if(r==null||typeof r!="object")return;r=r[o]}return r}function _r({entries:e}){return De("div",{style:{display:"flex",flexDirection:"column",gap:3},children:e.map(([t,n])=>Yt("div",{style:{fontSize:11},children:[De("div",{style:{color:"#9ca3af",fontSize:10,marginBottom:1},children:t}),De("div",{style:{color:"#1f2937",lineHeight:1.4,paddingLeft:8},children:n})]},t))})}function wp({entries:e,categoryKey:t,rawTokens:n,onSpacingHover:r,onModifyToken:o,onDeleteToken:i}){let s=gp(e);return s==="colors"?De(Ea,{entries:e}):s==="spacing"?De(vp,{entries:e,categoryKey:t,rawTokens:n,onHover:r,onModify:o,onDelete:i}):De(_r,{entries:e})}function Cp(e){let t=e.toLowerCase(),n=null,r=document.createTreeWalker(document.body,NodeFilter.SHOW_ELEMENT,{acceptNode(i){return i.closest("#devtools-toolbar, #devtools-canvas, #devtools-scrim, [data-popmelt-panel]")?NodeFilter.FILTER_REJECT:NodeFilter.FILTER_ACCEPT}}),o=r.currentNode;for(;o=r.nextNode();){let i=o,s=Object.keys(i).find(a=>a.startsWith("__reactFiber$")||a.startsWith("__reactInternalInstance$"));if(!s)continue;let l=i[s];for(;l;){let a=l.type,c=typeof a=="function"||typeof a=="object"?(a==null?void 0:a.displayName)||(a==null?void 0:a.name):null;if(typeof c=="string"){let d=c.toLowerCase();if(d===t){let u=f({},l.memoizedProps);return delete u.ref,{type:a,props:u}}if(!n){if(d.length>=4&&t.includes(d)){let u=f({},l.memoizedProps);delete u.ref,n={type:a,props:u}}else if(t.length>=4&&d.includes(t)){let u=f({},l.memoizedProps);delete u.ref,n={type:a,props:u}}}}l=l.return}}return n}var Ji=class extends ip{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}},ka="popmelt-principles-collapsed";function Ep(){try{let e=localStorage.getItem(ka);if(e)return new Set(JSON.parse(e))}catch(e){}return new Set}function kp(e){try{localStorage.setItem(ka,JSON.stringify([...e]))}catch(t){}}function Mp({id:e,label:t,count:n,children:r,collapsed:o,onToggle:i}){return Yt("div",{style:{marginBottom:14},children:[Yt("div",{onClick:()=>i(e),style:{fontWeight:700,fontSize:11,color:"#6b7280",letterSpacing:"0.05em",marginBottom:o?0:6,cursor:"pointer",display:"flex",alignItems:"center",gap:4,userSelect:"none"},children:[De("span",{style:{display:"inline-flex",alignItems:"center",justifyContent:"center",width:10,fontSize:9,color:"#9ca3af",transform:o?"rotate(-90deg)":"rotate(0deg)"},children:"\u25BC"}),t,De("span",{style:{fontWeight:400,color:"#9ca3af"},children:n})]}),!o&&r]})}var Tp={colors:"Colors",fonts:"Fonts",typeScale:"Type Scale",spacing:"Spacing",radii:"Radii",shadows:"Shadows",other:"Other"},va=["colors","fonts","typeScale","spacing","radii","shadows","other"];function Ip(){let[e,t]=fn(null),[n,r]=fn(Ep);Gn(()=>{t(ba())},[]);let o=Fr(s=>{r(l=>{let a=new Set(l);return a.has(s)?a.delete(s):a.add(s),kp(a),a})},[]);return e?va.some(s=>e[s].length>0)?De(Do,{children:va.map(s=>{let l=e[s];return l.length===0?null:De(Mp,{id:s,label:Tp[s],count:l.length,collapsed:n.has(s),onToggle:o,children:s==="colors"?De(Ea,{entries:l,references:e.references}):De(_r,{entries:l})},s)})}):De("div",{style:{color:"#9ca3af",fontSize:11},children:"No :root tokens found."}):null}function Rp({rules:e}){return!e||e.length===0?De("div",{style:{color:"#9ca3af",fontSize:11},children:"No rules defined yet."}):De(Do,{children:e.map((t,n)=>Yt("div",{style:{display:"flex",gap:6,marginBottom:4,lineHeight:1.4,fontSize:11},children:[Yt("span",{style:{color:"#9ca3af",flexShrink:0},children:[n+1,"."]}),De("span",{children:t})]},n))})}function Lp({name:e,value:t,selected:n,highlighted:r,onRemove:o,onHover:i}){var $;let[s,l]=fn(!1),[a,c]=fn(!1),d=po(null),u=po(0),[p,g]=fn(0),[M,C]=fn(0),b=wa(t),E=($=b.find(([q])=>q==="description"))==null?void 0:$[1];Gn(()=>{if(!a&&!r){g(0),C(0),u.current=0;return}let q=Co(e);g(q.length)},[a,r,e]),Gn(()=>{n&&d.current&&d.current.scrollIntoView({behavior:"smooth",block:"nearest"})},[n]);let D=n||r||a,A=n?"139,92,246":"34,197,94",R=n?"#8b5cf6":"#22c55e",w=D?`rgba(${A},0.06)`:void 0,O=D?`inset 0 0 0 1.5px rgba(${A},0.35)`:void 0,K=r||a,H=Fr(()=>{let q=Co(e);if(q.length===0)return;let v=u.current%q.length;q[v].rootElement.scrollIntoView({behavior:"smooth",block:"center"}),C(v),u.current=v+1,i==null||i({name:e,instanceIndex:v})},[e,i]);return Yt("div",{ref:d,onClick:H,onMouseEnter:()=>{c(!0),i==null||i({name:e,instanceIndex:0})},onMouseLeave:()=>{c(!1),i==null||i(null)},style:{marginBottom:8,background:w,padding:6,boxShadow:O,cursor:"pointer"},children:[Yt("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between"},children:[Yt("div",{style:{display:"flex",alignItems:"center",gap:6,marginBottom:6},children:[De("div",{style:{fontWeight:700,fontSize:11,letterSpacing:"0.05em",padding:"2px 6px",backgroundColor:K?R:"transparent",color:K?"#fff":"#6b7280"},children:e}),K&&p>1&&Yt("span",{style:{fontSize:10,fontWeight:600,color:"#9ca3af"},children:[M+1,"/",p]})]}),o&&a&&De("button",{type:"button",title:"Remove from model",onClick:q=>{q.stopPropagation(),o(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"})]}),E&&De("div",{style:{fontSize:11,color:K?"#1f2937":"#9ca3af",marginBottom:6,lineHeight:1.4},children:E}),s?De(wp,{entries:b.filter(([q])=>q!=="description"),categoryKey:""}):De(Ap,{name:e,onNotFound:()=>l(!0),entries:b})]})}function Ap({name:e,onNotFound:t}){let[n,r]=fn(null),[o,i]=fn(!1);return Gn(()=>{let s=Cp(e);s||t(),r(s),i(!0)},[e,t]),!o||!n?null:De(Ji,{onError:t,children:De("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:De("div",{style:{zoom:.5,pointerEvents:"none"},children:sp(n.type,n.props)})})})}function Pp({components:e,selectedComponent:t,hoveredComponent:n,onRemove:r,onHover:o}){if(!e||Object.keys(e).length===0)return De("div",{style:{color:"#9ca3af",fontSize:11},children:"No component patterns defined yet."});let i=new Set(Object.keys(e)),s=ci(i),l=Object.entries(e).sort(([a],[c])=>{var d,u;return((d=s.get(a))!=null?d:1/0)-((u=s.get(c))!=null?u:1/0)});return De(Do,{children:l.map(([a,c])=>De(Lp,{name:a,value:c,selected:t===a,highlighted:n===a,onRemove:r,onHover:o},a))})}function Ma({bridgeUrl:e,modelRefreshKey:t,onMouseEnter:n,onMouseLeave:r,selectedComponent:o,hoveredComponent:i,onComponentHover:s,onSpacingTokenHover:l,onModifySpacingToken:a,onDeleteSpacingToken:c,onComponentAdded:d,onComponentRemoved:u}){let[p,g]=fn(void 0),[M,C]=fn(!0),[b,E]=fn(()=>{try{let H=localStorage.getItem(xa);if(H==="patterns"||H==="principles"||H==="rules")return H}catch(H){}return"patterns"});Gn(()=>{xo(e).then(H=>{g(H),C(!1)})},[e,t]),Gn(()=>{try{localStorage.setItem(xa,b)}catch(H){}},[b]),Gn(()=>{o&&(E("patterns"),xo(e).then(H=>{H&&g(H)}))},[o,e]);let D=Fr(H=>{g($=>{if(!($!=null&&$.components))return $;let I=$.components,{[H]:q}=I,v=zn(I,[dr(H)]);return y(f({},$),{components:v})}),u==null||u(H)},[u]),A=p==null?void 0:p.components,R=p==null?void 0:p.rules,w=A&&Object.keys(A).length>0,O=R&&R.length>0,K=po(null);return Gn(()=>{let H=K.current;if(!H)return;let $=n,q=r;return $&&H.addEventListener("mouseenter",$),q&&H.addEventListener("mouseleave",q),()=>{$&&H.removeEventListener("mouseenter",$),q&&H.removeEventListener("mouseleave",q)}},[n,r]),Yt("div",{ref:K,style:mp,children:[Yt("div",{style:{display:"flex",alignItems:"center",gap:6,fontWeight:700,fontSize:13,marginBottom:6},children:[De("span",{children:"Model"}),De("code",{style:{fontSize:10,fontWeight:500,backgroundColor:"rgba(0,0,0,0.06)",padding:"1px 4px",color:"#6b7280"},children:"M"})]}),De("div",{style:{display:"flex",gap:12,marginBottom:10,borderBottom:"1px solid rgba(0,0,0,0.08)",paddingBottom:6},children:["patterns","principles","rules"].map(H=>De("button",{type:"button",style:b===H?hp:Ca,onClick:()=>E(H),children:H.charAt(0).toUpperCase()+H.slice(1)},H))}),De("div",{style:{flex:1,overflowY:"auto",minHeight:0},children:b==="principles"?De(Ip,{}):M?De("div",{style:{color:"#9ca3af",fontSize:11},children:"Loading..."}):!p||!w&&!O?De("div",{style:{color:"#9ca3af",lineHeight:1.5},children:"No design model yet. Pattern-scoped annotations will build one automatically."}):Yt(Do,{children:[b==="patterns"&&De(Pp,{components:A,selectedComponent:o,hoveredComponent:i,onRemove:D,onHover:s}),b==="rules"&&De(Rp,{rules:R})]})})]})}import{jsx as No}from"react/jsx-runtime";var Bp="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",Op="M60.8734,57.2556v-14.9432c0-1.2586.4722-2.2029,1.5728-2.8314l30.0443-17.3023c4.0899-2.3593,8.9662-3.4599,13.9988-3.4599,18.8759,0,30.8307,14.6289,30.8307,30.2006,0,1.1007,0,2.3593-.158,3.6178l-31.1446-18.2467c-1.8872-1.1006-3.7754-1.1006-5.6629,0l-39.4812,22.9651ZM131.0276,115.4561v-35.7074c0-2.2028-.9446-3.7756-2.8318-4.8763l-39.481-22.9651,12.8982-7.3934c1.1007-.6285,2.0453-.6285,3.1458,0l30.0441,17.3024c8.6523,5.0341,14.4708,15.7296,14.4708,26.1107,0,11.9539-7.0769,22.965-18.2461,27.527v.0021ZM51.593,83.9964l-12.8982-7.5497c-1.1007-.6285-1.5728-1.5728-1.5728-2.8314v-34.6048c0-16.8303,12.8982-29.5722,30.3585-29.5722,6.607,0,12.7403,2.2029,17.9324,6.1349l-30.987,17.9324c-1.8871,1.1007-2.8314,2.6735-2.8314,4.8764v45.6159l-.0014-.0015ZM79.3562,100.0403l-18.4829-10.3811v-22.0209l18.4829-10.3811,18.4812,10.3811v22.0209l-18.4812,10.3811ZM91.2319,147.8591c-6.607,0-12.7403-2.2031-17.9324-6.1344l30.9866-17.9333c1.8872-1.1005,2.8318-2.6728,2.8318-4.8759v-45.616l13.0564,7.5498c1.1005.6285,1.5723,1.5728,1.5723,2.8314v34.6051c0,16.8297-13.0564,29.5723-30.5147,29.5723v.001ZM53.9522,112.7822l-30.0443-17.3024c-8.652-5.0343-14.471-15.7296-14.471-26.1107,0-12.1119,7.2356-22.9652,18.403-27.5272v35.8634c0,2.2028.9443,3.7756,2.8314,4.8763l39.3248,22.8068-12.8982,7.3938c-1.1007.6287-2.045.6287-3.1456,0ZM52.2229,138.5791c-17.7745,0-30.8306-13.3713-30.8306-29.8871,0-1.2585.1578-2.5169.3143-3.7754l30.987,17.9323c1.8871,1.1005,3.7757,1.1005,5.6628,0l39.4811-22.807v14.9435c0,1.2585-.4721,2.2021-1.5728,2.8308l-30.0443,17.3025c-4.0898,2.359-8.9662,3.4605-13.9989,3.4605h.0014ZM91.2319,157.296c19.0327,0,34.9188-13.5272,38.5383-31.4594,17.6164-4.562,28.9425-21.0779,28.9425-37.908,0-11.0112-4.719-21.7066-13.2133-29.4143.7867-3.3035,1.2595-6.607,1.2595-9.909,0-22.4929-18.2471-39.3247-39.3251-39.3247-4.2461,0-8.3363.6285-12.4262,2.045-7.0792-6.9213-16.8318-11.3254-27.5271-11.3254-19.0331,0-34.9191,13.5268-38.5384,31.4591C11.3255,36.0212,0,52.5373,0,69.3675c0,11.0112,4.7184,21.7065,13.2125,29.4142-.7865,3.3035-1.2586,6.6067-1.2586,9.9092,0,22.4923,18.2466,39.3241,39.3248,39.3241,4.2462,0,8.3362-.6277,12.426-2.0441,7.0776,6.921,16.8302,11.3251,27.5271,11.3251Z";function Ki({size:e=16,style:t}){return No("svg",{width:e,height:e,viewBox:"0 0 1200 1200",fill:"currentColor",stroke:"none",style:f({flexShrink:0},t),children:No("path",{d:Bp})})}function qi({size:e=16,style:t}){return No("svg",{width:e,height:e,viewBox:"0 0 158.7128 157.296",fill:"currentColor",stroke:"none",style:f({flexShrink:0},t),children:No("path",{d:Op})})}function Zi({provider:e,size:t=16,style:n}){return e==="codex"?No(qi,{size:t,style:n}):No(Ki,{size:t,style:n})}var Qo=[{id:"claude-opus-4-6",label:"Opus 4.6"},{id:"claude-sonnet-4-6",label:"Sonn 4.6"}],er=[{id:"gpt-5.3-codex",label:"Codex 5.3"},{id:"gpt-5.3-codex-spark",label:"Spark 5.3"},{id:"gpt-5.1-codex-mini",label:"Mini 5.1"}];var Dp=[...Qo,...er];function Qi(e,t){if(!e)return t==="codex"?"Codex":"Claude Code";let n=Dp.find(r=>r.id===e);return n?n.label:e.replace(/-\d{8,}$/,"")}import{jsx as Ta}from"react/jsx-runtime";var Nn={iconDefault:"#1f2937",iconActive:"#1f2937",bgActive:"#dedede",bgHover:"#e2e2e2",separator:"#e5e7eb"};function Vn({children:e,active:t,siblingActive:n,disabled:r,onClick:o,title:i}){let s=()=>r?.4:n&&!t?.5:1,l={position:"relative",display:"flex",alignItems:"center",justifyContent:"center",width:32,height:32,borderRadius:0,border:"none",cursor:r?"default":"pointer",transition:"background-color 150ms ease, color 150ms ease, transform 100ms ease, opacity 150ms ease",backgroundColor:t?Nn.bgActive:"transparent",color:t?Nn.iconActive:Nn.iconDefault,opacity:s()};return Ta("button",{type:"button",onClick:r?void 0:o,title:i,disabled:r,style:l,onMouseEnter:a=>{r||(a.currentTarget.style.opacity="1",t||(a.currentTarget.style.backgroundColor=Nn.bgHover))},onMouseLeave:a=>{r||(a.currentTarget.style.opacity=String(s()),t||(a.currentTarget.style.backgroundColor="transparent"))},onMouseDown:a=>{r||(a.currentTarget.style.transform="scale(0.95)")},onMouseUp:a=>{r||(a.currentTarget.style.transform="scale(1)")},children:e})}function es(){return Ta("div",{style:{width:1,height:20,backgroundColor:"rgba(0, 0, 0, 0.05)",margin:"0 8px"}})}import{Fragment as fo,jsx as se,jsxs as bt}from"react/jsx-runtime";var go=[{type:"rectangle",icon:Wp,label:"Rectangle",shortcut:"R"},{type:"circle",icon:Np,label:"Oval",shortcut:"O"},{type:"line",icon:$p,label:"Line",shortcut:"L"},{type:"freehand",icon:zp,label:"Pen",shortcut:"P"}],Gp=new Set(go.map(e=>e.type));function Vp(e,t,n,r,o,i,s,l){let a=(e-o)*(r-i)-(n-o)*(t-i),c=(e-s)*(i-l)-(o-s)*(t-l),d=(e-n)*(l-r)-(s-n)*(t-r),u=a<0||c<0||d<0,p=a>0||c>0||d>0;return!(u&&p)}function Up(){let e=window.innerWidth-16,t=e-326,n=window.innerHeight-80;return{left:t,right:e,y:n}}var Xp=[{type:"text",icon:jp,label:"Text",shortcut:"T"}],Ia={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.
|
|
13
13
|
|
|
14
|
-
Your AI gets the visual and technical context it needs to act.`,usage:[],keys:[{key:"\u2318\u2318",desc:"Toggle toolbar"}]}},Up=y(f({position:"fixed",bottom:16,right:16,zIndex:9999,display:"flex",alignItems:"center",backgroundColor:"#eaeaea"},En),{fontFamily:"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",cursor:"pointer",overflow:"visible",boxSizing:"content-box",transition:"all 0ms cubic-bezier(0.4, 0, 0.2, 1)"}),ns="devtools-toolbar-expanded",os="devtools-annotations",rs="devtools-style-modifications",is="devtools-active-tool",La="devtools-active-color",Aa="devtools-stroke-width",Pa="devtools-inspected-element",ss="devtools-spacing-changes",Jp={expanded:ns,annotations:os,styleMods:rs,spacingChanges:ss,tool:is,color:La,stroke:Aa,inspected:Pa};function Ba({state:e,dispatch:t,onScreenshot:n,onSendToClaude:r,hasActiveJobs:o,activeJobColor:i,onCrosshairHover:s,onClear:l,provider:a="claude",onProviderChange:c,availableProviders:d,modelIndex:u=0,modelCount:p=2,modelLabel:g="Opus 4.6",onModelChange:k,onViewThread:w,isThreadPanelOpen:b,mcpStatus:E,onInstallMcp:B,mcpJustInstalled:L,bridgeUrl:T,isBridgeConnected:v,modelSelectedComponent:O,modelCanvasHoveredComponent:H,onModelComponentHover:U,onSpacingTokenHover:G,onModifySpacingToken:X,onDeleteSpacingToken:S,modelRefreshKey:I,onModelComponentAdded:K,onModelComponentRemoved:ge,onMouseEnter:be,toolbarRef:de}){let[ue,Fe]=tr(()=>typeof window=="undefined"?!1:localStorage.getItem(ns)==="true"),[Te,ee]=tr(0),Le=Bt(0),Ae=Bt(0),_e=Bt(e.isAnnotating),Pe=Bt(!1),Me=Bt(typeof window!="undefined"?localStorage.getItem(is):null),q=Bt(typeof window!="undefined"?localStorage.getItem(La):null),me=Bt(typeof window!="undefined"?localStorage.getItem(Aa):null),{charIndex:Ee}=Mr(!!o),[ye,Ie]=tr(null),We=Bt(!1),lt=Bt(null),dt=Bt(null),W=Bt({x:0,y:0}),te=Bt(null),j=Bt(null),he=Bt(null),xe=mn(()=>{te.current=null,j.current=null,he.current&&(clearTimeout(he.current),he.current=null)},[]),Be=mn(F=>{dt.current&&(clearTimeout(dt.current),dt.current=null),We.current?(te.current=F,j.current=f({},W.current),he.current&&clearTimeout(he.current),he.current=setTimeout(()=>{te.current&&(Ie(te.current),xe())},300)):(lt.current&&clearTimeout(lt.current),lt.current=setTimeout(()=>{We.current=!0,Ie(F),lt.current=null},500))},[xe]),Ce=mn(()=>{xe(),lt.current&&(clearTimeout(lt.current),lt.current=null),dt.current=setTimeout(()=>{We.current=!1,Ie(null)},150)},[xe]),it=mn(F=>{if(W.current={x:F.clientX,y:F.clientY},te.current&&j.current){let ne=j.current,oe=Gp();jp(F.clientX,F.clientY,ne.x,ne.y,oe.left,oe.y,oe.right,oe.y)||(Ie(te.current),xe())}},[xe]),qe=ts(()=>{let F=(d!=null?d:[]).map(ne=>ne==="claude"?"Claude":ne==="codex"?"Codex":ne);return{name:"AI Model",desc:F.length>1?`${F.join(" and ")} are available.`:F.length===1?`Connected to ${F[0]}.`:"No AI providers detected.",usage:F.length>1?["Click the logo to switch between providers","Click the model name to switch tiers"]:["Click the model name to switch tiers"],keys:F.length>1?[{key:"Click",desc:"Switch"},{key:"\u2318 Enter",desc:"Hand off to your AI",accent:!0}]:[{key:"\u2318 Enter",desc:"Hand off to your AI",accent:!0}]}},[d]);ua(ue,e,Pe,!!o,Jp),Mn(()=>{if(localStorage.getItem(ns)==="true"&&!e.isAnnotating){if(ue||Fe(!0),t({type:"SET_TOOL",payload:Me.current||"inspector"}),t({type:"SET_ANNOTATING",payload:!0}),q.current&&t({type:"SET_COLOR",payload:q.current}),me.current){let pe=parseFloat(me.current);isNaN(pe)||t({type:"SET_STROKE_WIDTH",payload:pe})}let ne=localStorage.getItem(os);if(ne)try{let pe=JSON.parse(ne);if(Array.isArray(pe)&&pe.length>0){for(let xt of pe)(xt.status==="waiting_input"||xt.status==="in_flight")&&(xt.status=xt.threadId?"resolved":"pending");t({type:"RESTORE_ANNOTATIONS",payload:{annotations:pe}})}}catch(pe){}let oe=localStorage.getItem(rs);if(oe)try{let pe=JSON.parse(oe);Array.isArray(pe)&&pe.length>0&&(t({type:"RESTORE_STYLE_MODIFICATIONS",payload:pe}),Sr(pe))}catch(pe){}let Se=localStorage.getItem(ss);if(Se)try{let pe=JSON.parse(Se);Array.isArray(pe)&&pe.length>0&&t({type:"RESTORE_SPACING_TOKEN_CHANGES",payload:pe})}catch(pe){}let Oe=localStorage.getItem(Pa);if(Oe)try{let{selector:pe,info:xt}=JSON.parse(Oe);if(pe){let Je=Qt(pe);if(Je){let Tn=xt||y(f({},nn(Je)),{selector:pe});t({type:"SELECT_ELEMENT",payload:{el:Je,info:Tn}})}}}catch(pe){}}return Pe.current=!0,()=>{Pe.current=!1}},[]);let Ct=Bt(e.styleModifications);Mn(()=>{let F=Ct.current,ne=e.styleModifications;F!==ne&&(vr(F),Sr(ne),Ct.current=ne)},[e.styleModifications]),Mn(()=>{let F=_e.current;_e.current=e.isAnnotating,F&&!e.isAnnotating&&ue&&Fe(!1)},[e.isAnnotating,ue]);let Nt=Bt(ue);Nt.current=ue,Mn(()=>{let F=oe=>{if(oe.key==="Meta"||oe.key==="Control"){let Se=Date.now();if(Se-Le.current<300){if(Ae.current++,Ae.current>=2){if(Nt.current)t({type:"SET_ANNOTATING",payload:!1}),Fe(!1);else{let xt=localStorage.getItem(is);t({type:"SET_TOOL",payload:xt||"inspector"}),t({type:"SET_ANNOTATING",payload:!0}),Fe(!0)}Ae.current=0}}else Ae.current=1;Le.current=Se}else Ae.current=0},ne=oe=>{oe.key!=="Meta"&&oe.key!=="Control"&&(Ae.current=0)};return window.addEventListener("keydown",F),window.addEventListener("keyup",ne),()=>{window.removeEventListener("keydown",F),window.removeEventListener("keyup",ne)}},[t]);let et=mn(F=>{xe(),t({type:"SET_TOOL",payload:F}),e.isAnnotating||t({type:"SET_ANNOTATING",payload:!0}),We.current=!1,Ie(null),lt.current&&(clearTimeout(lt.current),lt.current=null),dt.current&&(clearTimeout(dt.current),dt.current=null)},[t,e.isAnnotating,xe]),Rt=mn(async()=>{window.focus(),await n()},[n]),Ht=mn(async()=>{r&&await r()},[r]),bt=mn(()=>{t({type:"SET_ANNOTATING",payload:!1}),Fe(!1)},[t]),wt=mn(()=>{vr(e.styleModifications),document.querySelectorAll("[data-pm]").forEach(F=>F.removeAttribute("data-pm")),t({type:"CLEAR"}),t({type:"CLEAR_ALL_STYLES"}),localStorage.removeItem(os),localStorage.removeItem(rs),localStorage.removeItem(ss),Ut(null),l==null||l()},[t,e.styleModifications,l]),[mt,vt]=tr(29),en=Bt(null),Ft=Bt(null),an=Bt(!1),ut=mn(F=>{let ne=F.match(/oklch\([^)]*\s+([\d.]+)\s*\)/);return ne&&ne[1]?parseFloat(ne[1]):null},[]);Mn(()=>{an.current=!0;let F=`oklch(0.628 0.258 ${mt})`;t({type:"SET_COLOR",payload:F}),requestAnimationFrame(()=>{an.current=!1})},[mt,t]),Mn(()=>{if(an.current)return;let F=ut(e.activeColor);F!==null&&Math.abs(F-mt)>.5&&vt(F)},[e.activeColor,ut,mt]);let Z=e.annotations.length>0;Mn(()=>{let F=Ft.current;if(!F||!Z)return;let ne=oe=>{oe.preventDefault(),oe.stopPropagation();let Se=oe.deltaY>0?-1:1,Oe=((mt+Se)%360+360)%360,pe=`oklch(0.628 0.258 ${Oe})`;vt(Oe),e.selectedAnnotationIds.length>0&&t({type:"UPDATE_ANNOTATION_COLOR",payload:{id:e.lastSelectedId||e.selectedAnnotationIds[0],color:pe}})};return F.addEventListener("wheel",ne,{passive:!1}),()=>F.removeEventListener("wheel",ne)},[Z,e.selectedAnnotationIds,e.lastSelectedId,mt,t]);let Re=Bt(!1),Xe=mn(()=>{Re.current=!1,en.current=setTimeout(()=>{Re.current=!0,vt(29)},500)},[]),cn=mn(()=>{en.current&&(clearTimeout(en.current),en.current=null)},[]);Mn(()=>()=>{en.current&&clearTimeout(en.current),he.current&&clearTimeout(he.current)},[]);let qt=ts(()=>kr(e.annotations),[e.annotations]),pt=ts(()=>{let F=[],ne=new Set;for(let oe of e.annotations)if(!qt.has(oe))if(oe.groupId){if(!ne.has(oe.groupId)){ne.add(oe.groupId);let Se=e.annotations.filter(pe=>pe.groupId===oe.groupId&&!qt.has(pe)),Oe=Se.find(pe=>pe.type!=="text")||Se[0];F.push({id:Oe.id,annotations:Se})}}else F.push({id:oe.id,annotations:[oe]});return F},[e.annotations,qt]),[tt,Ut]=tr(null),kt=pt.length+e.styleModifications.length;Mn(()=>{(kt===0||tt!==null&&tt>=kt)&&Ut(null)},[kt,tt]),Mn(()=>{if(e.selectedAnnotationIds.length===0&&!e.inspectedElement){Ut(null);return}if(e.selectedAnnotationIds.length>0){let F=e.selectedAnnotationIds[0],ne=pt.findIndex(oe=>oe.id===F||oe.annotations.some(Se=>Se.id===F));ne>=0&&ne!==tt&&Ut(ne)}},[e.selectedAnnotationIds,e.inspectedElement,pt]);let Jn=mn(()=>{var ne;if(kt===0)return;let F;if(tt===null?F=0:F=(tt+1)%kt,Ut(F),F<pt.length){let oe=pt[F];if(!oe)return;t({type:"SELECT_ELEMENT",payload:null}),t({type:"SELECT_ANNOTATION",payload:{id:oe.id}});let Se=oe.annotations.find(fe=>fe.type!=="text")||oe.annotations[0];if(oe.annotations.some(fe=>fe.linkedSelector))t({type:"SET_TOOL",payload:"inspector"});else if(Se!=null&&Se.type&&Se.type!=="text"&&Se.type!=="inspector"){t({type:"SET_TOOL",payload:Se.type});let fe=go.findIndex(He=>He.type===Se.type);fe>=0&&ee(fe)}if(Se!=null&&Se.color){t({type:"SET_COLOR",payload:Se.color});let fe=ut(Se.color);fe!==null&&vt(fe)}let pe=oe.annotations.flatMap(fe=>fe.points);if(pe.length===0)return;let xt=Math.min(...pe.map(fe=>fe.x)),Je=Math.max(...pe.map(fe=>fe.x)),Tn=Math.min(...pe.map(fe=>fe.y)),P=Math.max(...pe.map(fe=>fe.y)),Q=(xt+Je)/2,se=(Tn+P)/2;if(window.scrollTo({left:Q-window.innerWidth/2,top:se-window.innerHeight/2,behavior:"smooth"}),b&&w){let fe=(ne=oe.annotations.find(He=>He.threadId))==null?void 0:ne.threadId;fe&&w(fe)}}else{let oe=F-pt.length,Se=e.styleModifications[oe];if(!Se)return;let Oe=Qt(Se.selector);if(!Oe)return;t({type:"SELECT_ANNOTATION",payload:{id:null}}),t({type:"SET_TOOL",payload:"inspector"}),t({type:"SELECT_ELEMENT",payload:{el:Oe,info:Se.element}});let pe=Oe.getBoundingClientRect(),xt=pe.left+pe.width/2+window.scrollX,Je=pe.top+pe.height/2+window.scrollY;window.scrollTo({left:xt-window.innerWidth/2,top:Je-window.innerHeight/2,behavior:"smooth"})}},[pt,e.styleModifications,kt,tt,t,ut,b,w]);Mn(()=>{if(!ue)return;let F=ne=>{var pe;let oe=document.activeElement;for(;(pe=oe==null?void 0:oe.shadowRoot)!=null&&pe.activeElement;)oe=oe.shadowRoot.activeElement;if((oe==null?void 0:oe.tagName)==="INPUT"||(oe==null?void 0:oe.tagName)==="TEXTAREA"||oe!=null&&oe.isContentEditable)return;if((ne.metaKey||ne.ctrlKey)&&ne.key==="Enter"){r&&(e.annotations.length>0||e.styleModifications.length>0||e.spacingTokenChanges.filter(xt=>!xt.captured).length>0)&&(ne.preventDefault(),Ht());return}if((ne.metaKey||ne.ctrlKey)&&(ne.key==="c"||ne.key==="C"||ne.code==="KeyC")){(e.annotations.length>0||e.styleModifications.length>0)&&(ne.preventDefault(),window.focus(),Rt());return}if((ne.metaKey||ne.ctrlKey)&&(ne.key==="Backspace"||ne.key==="Delete")){ne.preventDefault(),wt();return}if(ne.metaKey||ne.ctrlKey||ne.altKey)return;let Se={p:"freehand",l:"line",r:"rectangle",o:"circle",t:"text",c:"inspector",h:"hand"};if(ne.key.toLowerCase()==="m"){ne.preventDefault(),et("model");return}let Oe=Se[ne.key.toLowerCase()];if(Oe){ne.preventDefault();let xt=go.findIndex(Je=>Je.type===Oe);xt>=0&&ee(xt),et(Oe)}};return window.addEventListener("keydown",F),()=>window.removeEventListener("keydown",F)},[ue,et,Rt,Ht,r,wt,e.annotations.length,e.styleModifications.length,e.spacingTokenChanges,ye]);let dn=y(f({},Up),{borderRadius:0,padding:ue?"0 8px":"0",width:ue?"auto":48,height:48,gap:0,justifyContent:ue?"flex-start":"center"}),Pn=v===!1?"rgba(239, 68, 68, 0.4)":o&&i?i:Fn.iconActive;return ue?St(fo,{children:[re("style",{children:`
|
|
14
|
+
Your AI gets the visual and technical context it needs to act.`,usage:[],keys:[{key:"\u2318\u2318",desc:"Toggle toolbar"}]}},Jp={position:"fixed",bottom:16,right:16,zIndex:9999,display:"flex",alignItems:"center",backgroundColor:"#eaeaea",borderWidth:3,borderStyle:"solid",borderColor:"transparent",fontFamily:"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",cursor:"pointer",overflow:"visible",boxSizing:"content-box",transition:"all 0ms cubic-bezier(0.4, 0, 0.2, 1)"},ns="devtools-toolbar-expanded",os="devtools-annotations",rs="devtools-style-modifications",is="devtools-active-tool",Ra="devtools-active-color",La="devtools-stroke-width",Aa="devtools-inspected-element",ss="devtools-spacing-changes",Kp={expanded:ns,annotations:os,styleMods:rs,spacingChanges:ss,tool:is,color:Ra,stroke:La,inspected:Aa};function Pa({state:e,dispatch:t,onScreenshot:n,onSendToClaude:r,hasActiveJobs:o,activeJobColor:i,onCrosshairHover:s,onClear:l,provider:a="claude",onProviderChange:c,availableProviders:d,modelIndex:u=0,modelCount:p=2,modelLabel:g="Opus 4.6",onModelChange:M,onViewThread:C,isThreadPanelOpen:b,mcpStatus:E,onInstallMcp:D,mcpJustInstalled:A,bridgeUrl:R,isBridgeConnected:w,modelSelectedComponent:O,modelCanvasHoveredComponent:K,onModelComponentHover:H,onSpacingTokenHover:$,onModifySpacingToken:q,onDeleteSpacingToken:v,modelRefreshKey:I,onModelComponentAdded:Q,onModelComponentRemoved:ge,onMouseEnter:be,toolbarRef:ue}){let[ce,Fe]=tr(()=>typeof window=="undefined"?!1:localStorage.getItem(ns)==="true"),[Te,oe]=tr(0),Le=Mt(0),Ae=Mt(0),_e=Mt(e.isAnnotating),Pe=Mt(!1),Me=Mt(typeof window!="undefined"?localStorage.getItem(is):null),Z=Mt(typeof window!="undefined"?localStorage.getItem(Ra):null),pe=Mt(typeof window!="undefined"?localStorage.getItem(La):null),{charIndex:he}=Mr(!!o),[fe,Ie]=tr(null),We=Mt(!1),it=Mt(null),lt=Mt(null),j=Mt({x:0,y:0}),re=Mt(null),V=Mt(null),me=Mt(null),xe=gn(()=>{re.current=null,V.current=null,me.current&&(clearTimeout(me.current),me.current=null)},[]),Be=gn(F=>{lt.current&&(clearTimeout(lt.current),lt.current=null),We.current?(re.current=F,V.current=f({},j.current),me.current&&clearTimeout(me.current),me.current=setTimeout(()=>{re.current&&(Ie(re.current),xe())},300)):(it.current&&clearTimeout(it.current),it.current=setTimeout(()=>{We.current=!0,Ie(F),it.current=null},500))},[xe]),we=gn(()=>{xe(),it.current&&(clearTimeout(it.current),it.current=null),lt.current=setTimeout(()=>{We.current=!1,Ie(null)},150)},[xe]),nt=gn(F=>{if(j.current={x:F.clientX,y:F.clientY},re.current&&V.current){let ee=V.current,U=Up();Vp(F.clientX,F.clientY,ee.x,ee.y,U.left,U.y,U.right,U.y)||(Ie(re.current),xe())}},[xe]),Ke=ts(()=>{let F=(d!=null?d:[]).map(ee=>ee==="claude"?"Claude":ee==="codex"?"Codex":ee);return{name:"AI Model",desc:F.length>1?`${F.join(" and ")} are available.`:F.length===1?`Connected to ${F[0]}.`:"No AI providers detected.",usage:F.length>1?["Click the logo to switch between providers","Click the model name to switch tiers"]:["Click the model name to switch tiers"],keys:F.length>1?[{key:"Click",desc:"Switch"},{key:"\u2318 Enter",desc:"Hand off to your AI",accent:!0}]:[{key:"\u2318 Enter",desc:"Hand off to your AI",accent:!0}]}},[d]);da(ce,e,Pe,!!o,Kp),mn(()=>{if(localStorage.getItem(ns)==="true"&&!e.isAnnotating){if(ce||Fe(!0),t({type:"SET_TOOL",payload:Me.current||"inspector"}),t({type:"SET_ANNOTATING",payload:!0}),Z.current&&t({type:"SET_COLOR",payload:Z.current}),pe.current){let P=parseFloat(pe.current);isNaN(P)||t({type:"SET_STROKE_WIDTH",payload:P})}let ee=localStorage.getItem(os);if(ee)try{let P=JSON.parse(ee);if(Array.isArray(P)&&P.length>0){for(let ne of P)(ne.status==="waiting_input"||ne.status==="in_flight")&&(ne.status=ne.threadId?"resolved":"pending");t({type:"RESTORE_ANNOTATIONS",payload:{annotations:P}})}}catch(P){}let U=localStorage.getItem(rs);if(U)try{let P=JSON.parse(U);Array.isArray(P)&&P.length>0&&(t({type:"RESTORE_STYLE_MODIFICATIONS",payload:P}),vr(P))}catch(P){}let Se=localStorage.getItem(ss);if(Se)try{let P=JSON.parse(Se);Array.isArray(P)&&P.length>0&&t({type:"RESTORE_SPACING_TOKEN_CHANGES",payload:P})}catch(P){}let S=localStorage.getItem(Aa);if(S)try{let{selector:P,info:ne}=JSON.parse(S);if(P){let Ee=qt(P);if(Ee){let Ne=ne||y(f({},en(Ee)),{selector:P});t({type:"SELECT_ELEMENT",payload:{el:Ee,info:Ne}})}}}catch(P){}}return Pe.current=!0,()=>{Pe.current=!1}},[]);let wt=Mt(e.styleModifications);mn(()=>{let F=wt.current,ee=e.styleModifications;F!==ee&&(Sr(F),vr(ee),wt.current=ee)},[e.styleModifications]),mn(()=>{let F=_e.current;_e.current=e.isAnnotating,F&&!e.isAnnotating&&ce&&Fe(!1)},[e.isAnnotating,ce]);let Ot=Mt(ce);Ot.current=ce,mn(()=>{let F=U=>{if(U.key==="Meta"||U.key==="Control"){let Se=Date.now();if(Se-Le.current<300){if(Ae.current++,Ae.current>=2){if(Ot.current)t({type:"SET_ANNOTATING",payload:!1}),Fe(!1);else{let ne=localStorage.getItem(is);t({type:"SET_TOOL",payload:ne||"inspector"}),t({type:"SET_ANNOTATING",payload:!0}),Fe(!0)}Ae.current=0}}else Ae.current=1;Le.current=Se}else Ae.current=0},ee=U=>{U.key!=="Meta"&&U.key!=="Control"&&(Ae.current=0)};return window.addEventListener("keydown",F),window.addEventListener("keyup",ee),()=>{window.removeEventListener("keydown",F),window.removeEventListener("keyup",ee)}},[t]);let Ze=gn(F=>{xe(),t({type:"SET_TOOL",payload:F}),e.isAnnotating||t({type:"SET_ANNOTATING",payload:!0}),We.current=!1,Ie(null),it.current&&(clearTimeout(it.current),it.current=null),lt.current&&(clearTimeout(lt.current),lt.current=null)},[t,e.isAnnotating,xe]),It=gn(async()=>{window.focus(),await n()},[n]),Dt=gn(async()=>{r&&await r()},[r]),mt=gn(()=>{t({type:"SET_ANNOTATING",payload:!1}),Fe(!1)},[t]),vt=gn(()=>{Sr(e.styleModifications),document.querySelectorAll("[data-pm]").forEach(F=>F.removeAttribute("data-pm")),t({type:"CLEAR"}),t({type:"CLEAR_ALL_STYLES"}),localStorage.removeItem(os),localStorage.removeItem(rs),localStorage.removeItem(ss),Gt(null),l==null||l()},[t,e.styleModifications,l]),[pt,ht]=tr(29),Zt=Mt(null),Nt=Mt(null),ln=Mt(!1),at=gn(F=>{let ee=F.match(/oklch\([^)]*\s+([\d.]+)\s*\)/);return ee&&ee[1]?parseFloat(ee[1]):null},[]);mn(()=>{ln.current=!0;let F=`oklch(0.628 0.258 ${pt})`;t({type:"SET_COLOR",payload:F}),requestAnimationFrame(()=>{ln.current=!1})},[pt,t]),mn(()=>{if(ln.current)return;let F=at(e.activeColor);F!==null&&Math.abs(F-pt)>.5&&ht(F)},[e.activeColor,at,pt]);let te=e.annotations.length>0;mn(()=>{let F=Nt.current;if(!F||!te)return;let ee=U=>{U.preventDefault(),U.stopPropagation();let Se=U.deltaY>0?-1:1,S=((pt+Se)%360+360)%360,P=`oklch(0.628 0.258 ${S})`;ht(S),e.selectedAnnotationIds.length>0&&t({type:"UPDATE_ANNOTATION_COLOR",payload:{id:e.lastSelectedId||e.selectedAnnotationIds[0],color:P}})};return F.addEventListener("wheel",ee,{passive:!1}),()=>F.removeEventListener("wheel",ee)},[te,e.selectedAnnotationIds,e.lastSelectedId,pt,t]);let Re=Mt(!1),Xe=gn(()=>{Re.current=!1,Zt.current=setTimeout(()=>{Re.current=!0,ht(29)},500)},[]),an=gn(()=>{Zt.current&&(clearTimeout(Zt.current),Zt.current=null)},[]);mn(()=>()=>{Zt.current&&clearTimeout(Zt.current),me.current&&clearTimeout(me.current)},[]);let Jt=ts(()=>kr(e.annotations),[e.annotations]),ct=ts(()=>{let F=[],ee=new Set;for(let U of e.annotations)if(!Jt.has(U))if(U.groupId){if(!ee.has(U.groupId)){ee.add(U.groupId);let Se=e.annotations.filter(P=>P.groupId===U.groupId&&!Jt.has(P)),S=Se.find(P=>P.type!=="text")||Se[0];F.push({id:S.id,annotations:Se})}}else F.push({id:U.id,annotations:[U]});return F},[e.annotations,Jt]),[Qe,Gt]=tr(null),Ct=ct.length+e.styleModifications.length;mn(()=>{(Ct===0||Qe!==null&&Qe>=Ct)&&Gt(null)},[Ct,Qe]),mn(()=>{if(e.selectedAnnotationIds.length===0&&!e.inspectedElement){Gt(null);return}if(e.selectedAnnotationIds.length>0){let F=e.selectedAnnotationIds[0],ee=ct.findIndex(U=>U.id===F||U.annotations.some(Se=>Se.id===F));ee>=0&&ee!==Qe&&Gt(ee)}},[e.selectedAnnotationIds,e.inspectedElement,ct]);let Xn=gn(()=>{var ee;if(Ct===0)return;let F;if(Qe===null?F=0:F=(Qe+1)%Ct,Gt(F),F<ct.length){let U=ct[F];if(!U)return;t({type:"SELECT_ELEMENT",payload:null}),t({type:"SELECT_ANNOTATION",payload:{id:U.id}});let Se=U.annotations.find(ye=>ye.type!=="text")||U.annotations[0];if(U.annotations.some(ye=>ye.linkedSelector))t({type:"SET_TOOL",payload:"inspector"});else if(Se!=null&&Se.type&&Se.type!=="text"&&Se.type!=="inspector"){t({type:"SET_TOOL",payload:Se.type});let ye=go.findIndex(Ye=>Ye.type===Se.type);ye>=0&&oe(ye)}if(Se!=null&&Se.color){t({type:"SET_COLOR",payload:Se.color});let ye=at(Se.color);ye!==null&&ht(ye)}let P=U.annotations.flatMap(ye=>ye.points);if(P.length===0)return;let ne=Math.min(...P.map(ye=>ye.x)),Ee=Math.max(...P.map(ye=>ye.x)),Ne=Math.min(...P.map(ye=>ye.y)),Ue=Math.max(...P.map(ye=>ye.y)),ot=(ne+Ee)/2,Oe=(Ne+Ue)/2;if(window.scrollTo({left:ot-window.innerWidth/2,top:Oe-window.innerHeight/2,behavior:"smooth"}),b&&C){let ye=(ee=U.annotations.find(Ye=>Ye.threadId))==null?void 0:ee.threadId;ye&&C(ye)}}else{let U=F-ct.length,Se=e.styleModifications[U];if(!Se)return;let S=qt(Se.selector);if(!S)return;t({type:"SELECT_ANNOTATION",payload:{id:null}}),t({type:"SET_TOOL",payload:"inspector"}),t({type:"SELECT_ELEMENT",payload:{el:S,info:Se.element}});let P=S.getBoundingClientRect(),ne=P.left+P.width/2+window.scrollX,Ee=P.top+P.height/2+window.scrollY;window.scrollTo({left:ne-window.innerWidth/2,top:Ee-window.innerHeight/2,behavior:"smooth"})}},[ct,e.styleModifications,Ct,Qe,t,at,b,C]);mn(()=>{if(!ce)return;let F=ee=>{var P;let U=document.activeElement;for(;(P=U==null?void 0:U.shadowRoot)!=null&&P.activeElement;)U=U.shadowRoot.activeElement;if((U==null?void 0:U.tagName)==="INPUT"||(U==null?void 0:U.tagName)==="TEXTAREA"||U!=null&&U.isContentEditable)return;if((ee.metaKey||ee.ctrlKey)&&ee.key==="Enter"){r&&(e.annotations.length>0||e.styleModifications.length>0||e.spacingTokenChanges.filter(ne=>!ne.captured).length>0)&&(ee.preventDefault(),Dt());return}if((ee.metaKey||ee.ctrlKey)&&(ee.key==="c"||ee.key==="C"||ee.code==="KeyC")){(e.annotations.length>0||e.styleModifications.length>0)&&(ee.preventDefault(),window.focus(),It());return}if((ee.metaKey||ee.ctrlKey)&&(ee.key==="Backspace"||ee.key==="Delete")){ee.preventDefault(),vt();return}if(ee.metaKey||ee.ctrlKey||ee.altKey)return;let Se={p:"freehand",l:"line",r:"rectangle",o:"circle",t:"text",c:"inspector",h:"hand"};if(ee.key.toLowerCase()==="m"){ee.preventDefault(),Ze("model");return}let S=Se[ee.key.toLowerCase()];if(S){ee.preventDefault();let ne=go.findIndex(Ee=>Ee.type===S);ne>=0&&oe(ne),Ze(S)}};return window.addEventListener("keydown",F),()=>window.removeEventListener("keydown",F)},[ce,Ze,It,Dt,r,vt,e.annotations.length,e.styleModifications.length,e.spacingTokenChanges,fe]);let cn=y(f({},Jp),{borderRadius:0,padding:ce?"0 8px":"0",width:ce?"auto":48,height:48,gap:0,justifyContent:ce?"flex-start":"center"}),yt=`<svg xmlns='http://www.w3.org/2000/svg' width='5' height='5'><path d='M-1,1 l2,-2 M0,5 l5,-5 M4,6 l2,-2' stroke='${o&&i?i:"rgb(0,0,0)"}' stroke-width='.75'/></svg>`,Ln=se("div",{style:f({position:"absolute",inset:-3,padding:5,backgroundImage:`url("data:image/svg+xml,${encodeURIComponent(yt)}")`,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"})}),tn=w===!1?"rgba(239, 68, 68, 0.4)":o&&i?i:Nn.iconActive,Rt=Mt(null);mn(()=>{if(!ce)return;let F=Rt.current;if(!F)return;let ee=()=>{s==null||s(!0),F.style.opacity="1";let Se=F.querySelector("[data-popmelt-logo]");Se&&(Se.style.fill="#000"),Be("collapse")},U=()=>{s==null||s(!1),F.style.opacity=o?"1":"0.5";let Se=F.querySelector("[data-popmelt-logo]");Se&&(Se.style.fill="none"),we()};return F.addEventListener("mouseenter",ee),F.addEventListener("mouseleave",U),()=>{F.removeEventListener("mouseenter",ee),F.removeEventListener("mouseleave",U)}},[ce,o,s,Be,we]);let kn=Mt(null);return mn(()=>{if(ce)return;let F=kn.current;if(!F)return;let ee=F.querySelector("[data-popmelt-logo]"),U=()=>{F.style.opacity="1",ee&&(ee.style.fill="#000"),be==null||be()},Se=()=>{F.style.opacity="0.5",ee&&(ee.style.fill="none")};return F.addEventListener("mouseenter",U),F.addEventListener("mouseleave",Se),()=>{F.removeEventListener("mouseenter",U),F.removeEventListener("mouseleave",Se)}},[ce,be]),ce?bt(fo,{children:[se("style",{children:`
|
|
15
15
|
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
|
|
16
|
-
|
|
16
|
+
@keyframes popmelt-border-march { to { background-position: 0 -5px; } }
|
|
17
|
+
`}),se("div",{id:"devtools-scrim",style:{position:"fixed",inset:0,backgroundColor:"rgba(0, 0, 0, 0.06)",zIndex:9997,pointerEvents:"none"}}),!b&&(fe==="model"||e.activeTool==="model")&&se(Ma,{bridgeUrl:R,selectedComponent:O,hoveredComponent:K,onComponentHover:H,onSpacingTokenHover:$,onModifySpacingToken:q,onDeleteSpacingToken:v,modelRefreshKey:I,onComponentAdded:Q,onComponentRemoved:ge,onMouseEnter:()=>{xe(),lt.current&&(clearTimeout(lt.current),lt.current=null)},onMouseLeave:e.activeTool==="model"?void 0:we}),fe&&fe!=="model"&&(fe==="provider"||Ia[fe])&&(()=>{let F=fe==="provider"?Ke:Ia[fe];return bt("div",{onMouseEnter:fe==="collapse"?()=>{xe(),lt.current&&(clearTimeout(lt.current),lt.current=null)}:void 0,onMouseLeave:fe==="collapse"?we:void 0,style:f(y(f({position:"fixed",bottom:80,right:16,width:300,backgroundColor:"#eaeaea"},Yn),{boxSizing:"content-box",zIndex:10001,fontFamily:"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",fontSize:12,color:"#1f2937",padding:12}),fe!=="collapse"?{pointerEvents:"none"}:{}),children:[fe==="collapse"&&se("div",{style:{marginBottom:10},children:se("svg",{width:"48",height:"48",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:se("path",{d:"M11.1406 31.2559C11.2407 31.3875 11.351 31.5132 11.4697 31.6338L3.10449 40H2.39746L11.1406 31.2559ZM8.05371 40H7.34668L14.5498 32.7959C14.8554 32.7706 15.1541 32.7063 15.4414 32.6113L8.05371 40ZM18.2197 34.0762C18.3788 34.1569 18.5445 34.2272 18.7168 34.2861L13.0039 40H12.2969L18.2197 34.0762ZM17.9531 40H17.2461L26.1338 31.1113C26.438 31.0829 26.7427 31.0148 27.0439 30.9082L17.9531 40ZM40 22.9023L22.9033 40H22.1963L40 22.1953V22.9023ZM40 27.8525L27.8525 40H27.1455L40 27.1455V27.8525ZM40 32.8027L32.8027 40H32.0957L40 32.0957V32.8027ZM40 37.752L37.752 40H37.0449L40 37.0449V37.752ZM9.06543 28.3809C9.25255 28.4332 9.45183 28.4715 9.66504 28.4883L0 38.1543V37.4473L9.06543 28.3809ZM6.59375 25.9023C6.65822 26.0626 6.73171 26.2263 6.81445 26.3896L0 33.2041V32.4971L6.59375 25.9023ZM20.25 8.00293H20.249C21.5098 8.0286 22.7219 8.25094 23.8584 8.63672L23.8604 8.63574C23.8961 8.64787 23.9312 8.66145 23.9668 8.67383C24.0611 8.70686 24.1548 8.74106 24.248 8.77637C24.2915 8.79273 24.3357 8.80727 24.3789 8.82422L24.376 8.82617C27.6145 10.0955 30.1646 12.7301 31.3213 16.0234L31.3232 16.0225C31.3327 16.0493 31.3404 16.0766 31.3496 16.1035C31.7691 17.3256 32 18.6356 32 20C32 20.8726 31.9366 21.6706 31.7598 22.4902L31.7197 22.6328C31.6412 23.0066 31.5136 23.6108 31.3408 24.2217L31.3398 24.2246C31.2967 24.377 31.251 24.5299 31.2021 24.6797C30.9215 25.5403 30.5473 26.2998 30.0879 26.2998C29.7613 26.2996 29.5995 25.9674 29.4316 25.6221C29.2501 25.2487 29.0614 24.8605 28.6484 24.8604C27.8532 24.8604 27.2081 25.5046 27.208 26.2998V27.0771C27.2079 27.6079 26.9661 28.112 26.5205 28.4004C25.9146 28.7925 25.2357 28.6462 24.7959 28.2061L24.7949 28.208C24.7897 28.2028 24.7854 28.1967 24.7803 28.1914C24.7654 28.1761 24.7507 28.1606 24.7363 28.1445C24.7105 28.1156 24.6858 28.0857 24.6621 28.0547C24.6461 28.0339 24.6302 28.013 24.6152 27.9912C24.5931 27.9591 24.5726 27.9257 24.5527 27.8916C24.5392 27.8685 24.5261 27.8452 24.5137 27.8213C24.5093 27.8128 24.5043 27.8045 24.5 27.7959L24.501 27.7939C24.3932 27.5763 24.3282 27.3276 24.3281 27.0576V26.2998C24.328 25.5993 23.8278 25.0158 23.165 24.8867V24.8877C23.0752 24.8702 22.9826 24.8604 22.8877 24.8604C22.8446 24.8604 22.8019 24.8624 22.7598 24.8662C22.0247 24.9312 21.4483 25.5479 21.4482 26.2998C21.4482 26.9127 21.4608 27.5305 21.4736 28.1494L21.4951 29.3135C21.5 29.7013 21.5015 30.089 21.4971 30.4756C21.4874 31.3103 20.8426 32 20.0078 32C19.1732 31.9998 18.5292 31.3102 18.5195 30.4756C18.5159 30.1613 18.5176 29.8464 18.5205 29.5312V29.5322C18.5212 29.4593 18.5206 29.3864 18.5215 29.3135L18.5303 28.8154V28.8145C18.5343 28.5927 18.5384 28.371 18.543 28.1494C18.5558 27.5305 18.5684 28.1129 18.5684 27.5C18.5684 26.7047 17.9232 26.0596 17.1279 26.0596C16.907 26.0596 16.6978 26.1103 16.5107 26.1992C16.2161 26.3393 15.9767 26.5769 15.834 26.8701C15.8269 26.8846 15.8201 26.8993 15.8135 26.9141C15.7821 26.9845 15.7562 27.0579 15.7363 27.1338C15.7243 27.1798 15.7155 27.2267 15.708 27.2744C15.7012 27.3175 15.6953 27.361 15.6924 27.4053C15.6903 27.4366 15.6885 27.4681 15.6885 27.5V28.7383C15.6883 29.9234 14.4911 30.7248 13.4961 30.0811C13.0505 29.7926 12.8086 29.2886 12.8086 28.7578V26.2998C12.8086 25.9737 12.6984 25.674 12.5156 25.4326C12.4437 25.3381 12.3612 25.2521 12.2686 25.1777V25.1768C12.0219 24.9788 11.709 24.8604 11.3682 24.8604C10.9892 24.8604 10.8622 24.8872 10.7295 25.2295C10.5837 25.6055 10.4302 26 9.92773 26C9.33081 25.9996 8.95963 25.2403 8.71484 24.3799C8.5591 23.8325 8.45907 23.571 8.3623 23.0107C8.3501 22.9401 8.33284 22.8403 8.31738 22.7529C8.12812 21.9466 8.02043 21.1089 8.00293 20.249V20.25L8 20C8 19.8617 8.00317 19.724 8.00781 19.5869C8.00837 19.5703 8.00816 19.5537 8.00879 19.5371L8.00977 19.5352C8.0998 17.1716 8.87444 14.9844 10.1396 13.1631C10.1488 13.1499 10.1587 13.1372 10.168 13.124C12.255 10.1453 15.6582 8.15745 19.5352 8.00977L19.5371 8.00879C19.5537 8.00816 19.5703 8.00837 19.5869 8.00781C19.724 8.00317 19.8617 8 20 8L20.25 8.00293ZM5.72266 22.5303L0 28.2539V27.5469L5.62793 21.918C5.6553 22.1234 5.6868 22.3275 5.72266 22.5303ZM16.2637 26.8398L16.2617 26.8408C16.2784 26.8013 16.2954 26.7627 16.3135 26.7256C16.3203 26.7116 16.3275 26.6982 16.334 26.6855C16.3125 26.7277 16.289 26.7808 16.2637 26.8398ZM40 17.9531L33.9854 23.9668C34.051 23.6832 34.1043 23.4321 34.1445 23.2412L34.1641 23.1748L34.1865 23.0967L34.1963 23.0488L40 17.2461V17.9531ZM5.87012 16.7266C5.80321 17.0165 5.74649 17.3101 5.69727 17.6064L0 23.3047V22.5977L5.87012 16.7266ZM40 13.0039L34.4297 18.5732C34.409 18.3615 34.3832 18.1513 34.3535 17.9424L40 12.2969V13.0039ZM0 18.3555V17.6484L17.6484 0H18.3555L0 18.3555ZM40 8.05371L33.458 14.5947C33.3909 14.4277 33.3202 14.2625 33.2471 14.0986L40 7.34668V8.05371ZM0 13.4053V12.6982L12.6992 0H13.4062L0 13.4053ZM40 3.10352L31.6865 11.416C31.5868 11.2805 31.4851 11.1465 31.3809 11.0146L40 2.39648V3.10352ZM29.2881 8.86523C29.1595 8.75783 29.0288 8.65278 28.8965 8.5498L37.4473 0H38.1543L29.2881 8.86523ZM0 8.45508V7.74805L7.74805 0H8.45508L0 8.45508ZM26.2783 6.92578C26.1183 6.84878 25.9562 6.77534 25.793 6.7041L32.498 0H33.2051L26.2783 6.92578ZM17.6064 5.69727C17.3101 5.74649 17.0165 5.80321 16.7266 5.87012L22.5977 0H23.3047L17.6064 5.69727ZM22.5322 5.7207C22.3295 5.685 22.1254 5.65316 21.9199 5.62598L27.5469 0H28.2539L22.5322 5.7207ZM0 3.50586V2.79883L2.79883 0H3.50586L0 3.50586Z",fill:"currentColor"})})}),bt("div",{style:{display:"flex",alignItems:"center",gap:6,fontWeight:700,fontSize:13,marginBottom:6},children:[se("span",{children:F.name}),F.keys[0]&&se("code",{style:{fontSize:10,fontWeight:500,backgroundColor:"rgba(0,0,0,0.06)",padding:"1px 4px",color:"#6b7280"},children:F.keys[0].key})]}),se("div",{style:{color:"#6b7280",lineHeight:1.5,marginBottom:fe==="collapse"?0:10},children:F.desc.split(`
|
|
17
18
|
|
|
18
|
-
`).map((ne,oe)=>re("p",{style:{margin:0,marginTop:oe>0?8:0},children:ne},oe))}),F.usage.map((ne,oe)=>St("div",{style:{display:"flex",gap:6,marginBottom:3,lineHeight:1.4},children:[re("span",{style:{color:"#9ca3af",flexShrink:0},children:"\u2013"}),re("span",{children:ne})]},oe)),ye==="collapse"&&E&&Object.keys(E).length>0&&(()=>{let ne=Object.entries(E).filter(([,Oe])=>Oe.found&&!Oe.disabled).map(([Oe])=>Oe.charAt(0).toUpperCase()+Oe.slice(1)),oe=Object.entries(E).filter(([,Oe])=>!Oe.found).map(([Oe])=>Oe);if(ne.length===0&&oe.length===0)return null;let Se=oe.map(Oe=>Oe.charAt(0).toUpperCase()+Oe.slice(1));return St("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",marginTop:10,paddingTop:8,display:"flex",alignItems:"center",gap:6,fontSize:11},children:[re("span",{style:{width:6,height:6,borderRadius:"50%",backgroundColor:ne.length>0?"#22c55e":"rgba(0,0,0,0.2)",flexShrink:0}}),ne.length>0?St("span",{style:{color:"#6b7280",display:"flex",alignItems:"center",gap:6},children:[St("span",{children:["Registry available in ",ne.join(", "),L&&" \u2014 restart CLI to activate"]}),oe.length>0&&B&&!L&&St("button",{type:"button",onClick:Oe=>{Oe.stopPropagation(),B()},style:{border:"none",background:"transparent",color:"#3b82f6",fontSize:10,fontWeight:500,fontFamily:"inherit",padding:0,cursor:"pointer",pointerEvents:"auto",textDecoration:"underline",textUnderlineOffset:2},children:["+ ",Se.join(", ")]})]}):oe.length>0&&B?St("span",{style:{color:"#6b7280",display:"flex",alignItems:"center",gap:6},children:[re("span",{children:"Connect Popmelt MCP"}),re("button",{type:"button",onClick:Oe=>{Oe.stopPropagation(),B()},style:{border:"none",background:"#1f2937",color:"#fff",fontSize:10,fontWeight:600,fontFamily:"inherit",padding:"2px 8px",cursor:"pointer",pointerEvents:"auto"},children:"Connect"})]}):null]})})(),F.keys.length>1&&re("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",marginTop:8,paddingTop:8,display:"flex",flexDirection:"column",gap:4},children:F.keys.slice(1).map((ne,oe)=>St("div",{style:{display:"flex",alignItems:"center",gap:8,fontSize:11,color:ne.accent?"#fff":"#6b7280"},children:[re("code",{style:{fontSize:10,backgroundColor:ne.accent?e.activeColor:"rgba(0,0,0,0.06)",color:ne.accent?"#fff":void 0,padding:"1px 4px",whiteSpace:"nowrap"},children:ne.key}),re("span",{style:{color:ne.accent?e.activeColor:void 0,fontWeight:ne.accent?600:void 0},children:ne.desc})]},oe))})]})})(),St("div",{ref:F=>{de&&(de.current=F)},id:"devtools-toolbar",style:dn,onMouseEnter:be,onMouseMove:it,children:[(e.annotations.length>0||e.styleModifications.length>0)&&St(fo,{children:[re("span",{onMouseEnter:()=>Be("clear"),onMouseLeave:Ce,children:re(_n,{onClick:wt,title:"Clear all (\u2318\u232B)",children:re($p,{size:17,strokeWidth:1.5})})}),re(es,{})]}),St("div",{style:{display:"flex",flexDirection:"row",gap:4,alignItems:"center"},children:[re("span",{onMouseEnter:()=>Be("inspector"),onMouseLeave:Ce,children:re(_n,{active:e.isAnnotating&&e.activeTool==="inspector",siblingActive:e.isAnnotating,onClick:()=>et("inspector"),children:re(Hp,{size:20,strokeWidth:1.5})})}),re("span",{onMouseEnter:()=>Be("hand"),onMouseLeave:Ce,children:re(_n,{active:e.isAnnotating&&e.activeTool==="hand",siblingActive:e.isAnnotating,onClick:()=>et("hand"),children:St("div",{style:{position:"relative",display:"flex",alignItems:"center",justifyContent:"center"},children:[re(Np,{size:20,strokeWidth:1.5}),e.styleModifications.filter(F=>!F.captured).length>0&&re("div",{style:{position:"absolute",top:-7,right:-9,minWidth:14,height:14,borderRadius:0,backgroundColor:e.activeColor,color:"#fff",fontSize:9,fontWeight:700,display:"flex",alignItems:"center",justifyContent:"center",padding:"0 2px",lineHeight:1},children:e.styleModifications.filter(F=>!F.captured).length})]})})}),(()=>{let F=go[Te],ne=F.icon,oe=e.isAnnotating&&Yp.has(e.activeTool);return re("span",{onMouseEnter:()=>Be(F.type),onMouseLeave:Ce,children:St("div",{style:{display:"flex",alignItems:"center",gap:0},children:[re(_n,{active:oe,siblingActive:e.isAnnotating,onClick:()=>et(F.type),children:re(ne,{size:20,strokeWidth:1.5})}),re("button",{type:"button",onClick:()=>{let Se=(Te+1)%go.length;ee(Se),et(go[Se].type)},title:"Cycle shape tool",style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",gap:2,width:12,height:32,border:"none",background:"none",cursor:"pointer",padding:"0 2px",opacity:e.isAnnotating&&!oe?.5:1,transition:"opacity 150ms ease"},children:go.map((Se,Oe)=>re("div",{style:{width:3,height:3,borderRadius:"50%",backgroundColor:Oe===Te?Fn.iconDefault:"rgba(0,0,0,0.2)",transition:"background-color 150ms ease"}},Oe))})]})})})(),Vp.map(({type:F,icon:ne,label:oe,shortcut:Se})=>re("span",{onMouseEnter:()=>Be(F),onMouseLeave:Ce,children:re(_n,{active:e.isAnnotating&&e.activeTool===F,siblingActive:e.isAnnotating,onClick:()=>et(F),children:re(ne,{size:20,strokeWidth:1.5})})},F)),re("span",{onMouseEnter:()=>Be("model"),onMouseLeave:Ce,children:re(_n,{active:e.isAnnotating&&e.activeTool==="model",siblingActive:e.isAnnotating,onClick:()=>et("model"),children:re(Dp,{size:17,strokeWidth:1.5})})})]}),re(es,{}),St("div",{style:{display:"flex",flexDirection:"row",gap:4,alignItems:"center"},children:[(pt.length>0||e.styleModifications.length>0||e.spacingTokenChanges.filter(F=>!F.captured).length>0)&&(()=>{var Oe;let F=tt!==null&&tt<pt.length?pt[tt]:null,ne=e.annotations.length>0&&e.annotations.every(pe=>pe.status&&pe.status!=="pending"),oe=tt!==null?(Oe=F==null?void 0:F.annotations.some(pe=>pe.status&&pe.status!=="pending"))!=null?Oe:!1:ne,Se=`oklch(0.628 0.258 ${mt})`;return re("span",{onMouseEnter:()=>Be("counter"),onMouseLeave:Ce,children:re("button",{ref:Ft,type:"button",onClick:()=>{if(Re.current){Re.current=!1;return}Jn()},onMouseDown:Xe,onMouseUp:cn,onMouseLeave:cn,title:"Cycle through annotations \u2022 Scroll to change color \u2022 Long press to reset",style:{display:"flex",alignItems:"center",justifyContent:"center",width:20,height:20,padding:0,marginRight:4,border:"none",borderRadius:0,background:oe?"#999999":Se,cursor:"pointer",fontFamily:"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",fontSize:11,fontWeight:600,color:"#ffffff",transition:"background 150ms ease"},children:tt!==null?tt+1:pt.length+e.styleModifications.length+e.spacingTokenChanges.filter(pe=>!pe.captured).length})})})(),c&&re("span",{onMouseEnter:()=>Be("provider"),onMouseLeave:Ce,style:{display:"contents"},children:St("div",{style:{display:"flex",alignItems:"center",gap:0},children:[re(_n,{onClick:()=>c(a==="claude"?"codex":"claude"),children:a==="claude"?re(Ki,{}):re(qi,{})}),St("button",{type:"button",onClick:()=>{let F=(u+1)%p;k==null||k(F)},style:{display:"flex",alignItems:"center",gap:6,height:32,border:"none",background:"none",cursor:"pointer",padding:"0 4px 0 0",fontFamily:"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",fontSize:10,fontWeight:500,color:Fn.iconDefault,whiteSpace:"nowrap"},children:[re("span",{children:g}),re("span",{style:{display:"flex",flexDirection:"column",gap:2},children:Array.from({length:p},(F,ne)=>re("div",{style:{width:3,height:3,borderRadius:"50%",backgroundColor:ne===u?Fn.iconDefault:"rgba(0,0,0,0.2)",transition:"background-color 150ms ease"}},ne))})]})]})}),re("div",{onMouseEnter:F=>{s==null||s(!0),F.currentTarget.style.opacity="1",Be("collapse")},onMouseLeave:F=>{s==null||s(!1),F.currentTarget.style.opacity=o?"1":"0.3",Ce()},style:{display:"inline-flex",opacity:o?1:.3,transition:"opacity 150ms ease"},children:re(_n,{onClick:bt,title:"Collapse (\u2318\u2318)",children:o?re("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:Pn,children:Ee===1?St(fo,{children:[re("circle",{cx:"7",cy:"7",r:"2"}),re("circle",{cx:"17",cy:"7",r:"2"}),re("circle",{cx:"7",cy:"17",r:"2"}),re("circle",{cx:"17",cy:"17",r:"2"})]}):St(fo,{children:[re("circle",{cx:"12",cy:"6",r:"2"}),re("circle",{cx:"6",cy:"12",r:"2"}),re("circle",{cx:"18",cy:"12",r:"2"}),re("circle",{cx:"12",cy:"18",r:"2"})]})}):St("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:Pn,strokeWidth:"1.5",strokeLinecap:"round",style:{transform:"rotate(45deg)"},children:[re("line",{x1:"12",y1:"3",x2:"12",y2:"9"}),re("line",{x1:"12",y1:"15",x2:"12",y2:"21"}),re("line",{x1:"3",y1:"12",x2:"9",y2:"12"}),re("line",{x1:"15",y1:"12",x2:"21",y2:"12"})]})})})]})]})]}):St(fo,{children:[re("style",{children:"@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }"}),re("div",{ref:F=>{de&&(de.current=F)},id:"devtools-toolbar",style:y(f({},dn),{overflow:"visible",opacity:.5,transition:"opacity 150ms ease"}),onMouseEnter:F=>{F.currentTarget.style.opacity="1",be==null||be()},onMouseLeave:F=>F.currentTarget.style.opacity="0.5",children:re("button",{type:"button",style:{display:"flex",alignItems:"center",justifyContent:"center",width:48,height:48,border:"none",background:"none",cursor:"pointer",padding:0},onClick:()=>{Fe(!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:o?re("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:Pn,children:Ee===1?St(fo,{children:[re("circle",{cx:"7",cy:"7",r:"2"}),re("circle",{cx:"17",cy:"7",r:"2"}),re("circle",{cx:"7",cy:"17",r:"2"}),re("circle",{cx:"17",cy:"17",r:"2"})]}):St(fo,{children:[re("circle",{cx:"12",cy:"6",r:"2"}),re("circle",{cx:"6",cy:"12",r:"2"}),re("circle",{cx:"18",cy:"12",r:"2"}),re("circle",{cx:"12",cy:"18",r:"2"})]})}):St("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:Pn,strokeWidth:"1.5",strokeLinecap:"round",children:[re("line",{x1:"12",y1:"3",x2:"12",y2:"9"}),re("line",{x1:"12",y1:"15",x2:"12",y2:"21"}),re("line",{x1:"3",y1:"12",x2:"9",y2:"12"}),re("line",{x1:"15",y1:"12",x2:"21",y2:"12"})]})})})]})}import{useEffect as Fo,useRef as Xp,useState as ls}from"react";import{Fragment as Da,jsx as It,jsxs as nr}from"react/jsx-runtime";var Kp={position:"fixed",bottom:86,right:16,zIndex:9999,display:"flex",flexDirection:"column"},qp=24,Zp=6,Qp=qp-Zp,ef=8,Oa=y(f({display:"flex",alignItems:"center",gap:6,padding:"4px 10px",backgroundColor:"rgba(255, 255, 255, 0.85)"},En),{backdropFilter:"blur(32px)",fontFamily:"ui-monospace, SFMono-Regular, Menlo, monospace",fontSize:11,color:"#1f2937",whiteSpace:"nowrap",transition:"transform 200ms ease, opacity 200ms ease"});function tf(e){var s;let t=e.filter(l=>l.type==="tool_use");if(t.length===0)return"Starting\u2026";let n=t[t.length-1],r=String(n.data.tool||""),o=n.data.file?String(n.data.file):null,i=o?(s=o.split("/").pop())!=null?s:o:null;switch(r){case"Read":return i?`Reading ${i}`:"Reading file";case"Edit":return i?`Editing ${i}`:"Editing file";case"Write":return i?`Writing ${i}`:"Writing file";case"Bash":return"Running command";case"Glob":return"Searching files";case"Grep":return"Searching code";default:return r?`Using ${r}`:"Working\u2026"}}function nf(e){let t=e.replace(/^Error:\s*/i,"");return t.length>40?t.slice(0,37)+"...":t}function of(e,t){if(e.some(o=>o.type==="question"&&o.data.jobId===t))return"Has a question";let r=e.find(o=>o.type==="done"&&o.data.jobId===t);if(r){let o=r.data.resolutions;if(Array.isArray(o)&&o.length>0)return"Applied changes"}return"Replied"}function rf({color:e}){let[t,n]=ls(0);return Fo(()=>{let r=setInterval(()=>{n(o=>(o+1)%2)},250);return()=>clearInterval(r)},[]),It("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:e,style:{verticalAlign:"middle",flexShrink:0},children:t===1?nr(Da,{children:[It("circle",{cx:"7",cy:"7",r:"2"}),It("circle",{cx:"17",cy:"7",r:"2"}),It("circle",{cx:"7",cy:"17",r:"2"}),It("circle",{cx:"17",cy:"17",r:"2"})]}):nr(Da,{children:[It("circle",{cx:"12",cy:"6",r:"2"}),It("circle",{cx:"6",cy:"12",r:"2"}),It("circle",{cx:"18",cy:"12",r:"2"}),It("circle",{cx:"12",cy:"18",r:"2"})]})})}function sf({color:e}){return It("span",{style:{display:"inline-block",width:8,height:8,backgroundColor:e,opacity:.6}})}function lf({color:e}){return It("span",{style:{color:e,fontSize:12,lineHeight:1,width:10,display:"inline-block"},children:"\u2713"})}function af(){return It("span",{style:{display:"inline-block",width:8,height:8,borderRadius:"50%",backgroundColor:"#ef4444"}})}function Na({bridge:e,inFlightJobs:t,isVisible:n,onHover:r,clearSignal:o,onViewThread:i,onCancel:s,onHoverJob:l,isConnected:a,dismissedThreadIds:c}){let[d,u]=ls([]),[p,g]=ls(!1);Fo(()=>{o>0&&u([])},[o]),Fo(()=>{!c||c.size===0||u(b=>{let E=b.filter(B=>!B.threadId||!c.has(B.threadId));return E.length===b.length?b:E})},[c]),Fo(()=>{u(b=>{var T;let E=new Set(b.map(v=>v.jobId)),B=!1,L=b.map(v=>{let O=t[v.jobId];return O&&(!v.threadId||v.color==="#888")?(B=!0,y(f({},v),{threadId:v.threadId||O.threadId,color:v.color==="#888"?O.color:v.color})):v});for(let[v,O]of Object.entries(t))E.has(v)||(L.push({jobId:v,color:O.color,status:"queued",threadId:O.threadId}),B=!0);for(let v of e.activeJobIds)if(!E.has(v)&&!L.some(O=>O.jobId===v)){let O=e.events.find(H=>H.type==="job_started"&&H.data.jobId===v);L.push({jobId:v,color:"#888",status:"working",threadId:(T=O==null?void 0:O.data)==null?void 0:T.threadId}),B=!0}return B?L:b})},[t,e.activeJobIds]),Fo(()=>{if(e.activeJobIds.length===0)return;let b=new Set(e.activeJobIds);u(E=>E.map(B=>b.has(B.jobId)&&B.status!=="done"&&B.status!=="error"?y(f({},B),{status:"working"}):B))},[e.activeJobIds]);let k=Xp(null);if(Fo(()=>{let b=e.lastCompletedJobId;if(!b||b===k.current)return;k.current=b;let E=e.events.find(H=>H.type==="error"&&(H.data.jobId===b||e.status==="error")),B=!!E,L=B?void 0:of(e.events,b),T=E?String(E.data.message||""):void 0,v=E?!!E.data.cancelled:void 0,O=E==null?void 0:E.data.threadId;u(H=>H.map(U=>U.jobId===b?y(f({},U),{status:B?"error":"done",doneLabel:L,errorMessage:T,cancelled:v,threadId:U.threadId||O}):U))},[e.lastCompletedJobId,e.events,e.status]),!n||d.length===0&&a!==!1)return null;let w=!p&&d.length>1;return nr("div",{style:Kp,"data-devtools":!0,onMouseEnter:()=>{g(!0),r(!0)},onMouseLeave:()=>{g(!1),r(!1),l==null||l(null)},children:[[...d].reverse().map((b,E)=>{let B=E===d.length-1,L=d.length-1-E,T=b.status==="working"?tf(e.events.filter(v=>v.data.jobId===b.jobId)):b.status==="queued"?"Queued":b.status==="done"?b.doneLabel||"Done":b.cancelled?"Cancelled":b.errorMessage?nf(b.errorMessage):"Error";return It("div",{style:{position:"relative",zIndex:E,marginBottom:w?B?0:-Qp:B?0:ef,transform:w?`scale(${Math.max(.94,1-L*.02)})`:"scale(1)",opacity:w?Math.max(.5,1-L*.15):1,transformOrigin:"bottom right",transition:"margin-bottom 250ms ease, transform 250ms ease, opacity 250ms ease"},children:nr("div",{style:y(f({},Oa),{cursor:b.threadId&&i?"pointer":void 0}),onClick:b.threadId&&i?()=>i(b.threadId):void 0,onMouseEnter:l?()=>l(b.jobId):void 0,onMouseLeave:l?()=>l(null):void 0,title:b.errorMessage||void 0,children:[b.status==="working"&&It(rf,{color:b.color}),b.status==="queued"&&It(sf,{color:b.color}),b.status==="done"&&It(lf,{color:b.color}),b.status==="error"&&It(af,{}),It("span",{style:{color:b.status==="queued"?"#9ca3af":"#1f2937"},children:T}),b.status==="working"&&s&&It("button",{onClick:v=>{v.stopPropagation(),s(b.jobId)},style:{background:"none",border:"none",cursor:"pointer",color:"#9ca3af",fontSize:14,padding:"0 4px",lineHeight:1},title:"Cancel",children:"\xD7"}),(b.status==="done"||b.status==="error")&&It("button",{onClick:v=>{v.stopPropagation(),u(O=>O.filter(H=>H.jobId!==b.jobId))},style:{background:"none",border:"none",cursor:"pointer",color:"#9ca3af",fontSize:14,padding:"0 4px",lineHeight:1},title:"Dismiss",children:"\xD7"})]})},b.jobId)}),a===!1&&d.length>0&&nr("div",{style:y(f({},Oa),{color:"#9ca3af"}),children:[It("span",{style:{display:"inline-block",width:8,height:8,borderRadius:"50%",backgroundColor:"#f59e0b"}}),It("span",{children:"Reconnecting\u2026"})]})]})}import{Fragment as uf,jsx as df,jsxs as pf}from"react/jsx-runtime";var cf=`
|
|
19
|
+
`).map((ee,U)=>se("p",{style:{margin:0,marginTop:U>0?8:0},children:ee},U))}),F.usage.map((ee,U)=>bt("div",{style:{display:"flex",gap:6,marginBottom:3,lineHeight:1.4},children:[se("span",{style:{color:"#9ca3af",flexShrink:0},children:"\u2013"}),se("span",{children:ee})]},U)),fe==="collapse"&&E&&Object.keys(E).length>0&&(()=>{let ee=Object.entries(E).filter(([,S])=>S.found&&!S.disabled).map(([S])=>S.charAt(0).toUpperCase()+S.slice(1)),U=Object.entries(E).filter(([,S])=>!S.found).map(([S])=>S);if(ee.length===0&&U.length===0)return null;let Se=U.map(S=>S.charAt(0).toUpperCase()+S.slice(1));return bt("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",marginTop:10,paddingTop:8,display:"flex",alignItems:"center",gap:6,fontSize:11},children:[se("span",{style:{width:6,height:6,borderRadius:"50%",backgroundColor:ee.length>0?"#22c55e":"rgba(0,0,0,0.2)",flexShrink:0}}),ee.length>0?bt("span",{style:{color:"#6b7280",display:"flex",alignItems:"center",gap:6},children:[bt("span",{children:["Registry available in ",ee.join(", "),A&&" \u2014 restart CLI to activate"]}),U.length>0&&D&&!A&&bt("button",{type:"button",onClick:S=>{S.stopPropagation(),D()},style:{border:"none",background:"transparent",color:"#3b82f6",fontSize:10,fontWeight:500,fontFamily:"inherit",padding:0,cursor:"pointer",pointerEvents:"auto",textDecoration:"underline",textUnderlineOffset:2},children:["+ ",Se.join(", ")]})]}):U.length>0&&D?bt("span",{style:{color:"#6b7280",display:"flex",alignItems:"center",gap:6},children:[se("span",{children:"Connect Popmelt MCP"}),se("button",{type:"button",onClick:S=>{S.stopPropagation(),D()},style:{border:"none",background:"#1f2937",color:"#fff",fontSize:10,fontWeight:600,fontFamily:"inherit",padding:"2px 8px",cursor:"pointer",pointerEvents:"auto"},children:"Connect"})]}):null]})})(),F.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:F.keys.slice(1).map((ee,U)=>bt("div",{style:{display:"flex",alignItems:"center",gap:8,fontSize:11,color:ee.accent?"#fff":"#6b7280"},children:[se("code",{style:{fontSize:10,backgroundColor:ee.accent?e.activeColor:"rgba(0,0,0,0.06)",color:ee.accent?"#fff":void 0,padding:"1px 4px",whiteSpace:"nowrap"},children:ee.key}),se("span",{style:{color:ee.accent?e.activeColor:void 0,fontWeight:ee.accent?600:void 0},children:ee.desc})]},U))})]})})(),bt("div",{ref:F=>{ue&&(ue.current=F)},id:"devtools-toolbar",style:cn,onMouseEnter:be,onMouseMove:nt,children:[Ln,(e.annotations.length>0||e.styleModifications.length>0)&&bt(fo,{children:[se("span",{onMouseEnter:()=>Be("clear"),onMouseLeave:we,children:se(Vn,{onClick:vt,title:"Clear all (\u2318\u232B)",children:se(Yp,{size:17,strokeWidth:1.5})})}),se(es,{})]}),bt("div",{style:{display:"flex",flexDirection:"row",gap:4,alignItems:"center"},children:[se("span",{onMouseEnter:()=>Be("inspector"),onMouseLeave:we,children:se(Vn,{active:e.isAnnotating&&e.activeTool==="inspector",siblingActive:e.isAnnotating,onClick:()=>Ze("inspector"),children:se(_p,{size:20,strokeWidth:1.5})})}),se("span",{onMouseEnter:()=>Be("hand"),onMouseLeave:we,children:se(Vn,{active:e.isAnnotating&&e.activeTool==="hand",siblingActive:e.isAnnotating,onClick:()=>Ze("hand"),children:bt("div",{style:{position:"relative",display:"flex",alignItems:"center",justifyContent:"center"},children:[se(Fp,{size:20,strokeWidth:1.5}),e.styleModifications.filter(F=>!F.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(F=>!F.captured).length})]})})}),(()=>{let F=go[Te],ee=F.icon,U=e.isAnnotating&&Gp.has(e.activeTool);return se("span",{onMouseEnter:()=>Be(F.type),onMouseLeave:we,children:bt("div",{style:{display:"flex",alignItems:"center",gap:0},children:[se(Vn,{active:U,siblingActive:e.isAnnotating,onClick:()=>Ze(F.type),children:se(ee,{size:20,strokeWidth:1.5})}),se("button",{type:"button",onClick:()=>{let Se=(Te+1)%go.length;oe(Se),Ze(go[Se].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&&!U?.5:1,transition:"opacity 150ms ease"},children:go.map((Se,S)=>se("div",{style:{width:3,height:3,borderRadius:"50%",backgroundColor:S===Te?Nn.iconDefault:"rgba(0,0,0,0.2)",transition:"background-color 150ms ease"}},S))})]})})})(),Xp.map(({type:F,icon:ee,label:U,shortcut:Se})=>se("span",{onMouseEnter:()=>Be(F),onMouseLeave:we,children:se(Vn,{active:e.isAnnotating&&e.activeTool===F,siblingActive:e.isAnnotating,onClick:()=>Ze(F),children:se(ee,{size:20,strokeWidth:1.5})})},F)),se("span",{onMouseEnter:()=>Be("model"),onMouseLeave:we,children:se(Vn,{active:e.isAnnotating&&e.activeTool==="model",siblingActive:e.isAnnotating,onClick:()=>Ze("model"),children:se(Hp,{size:17,strokeWidth:1.5})})})]}),se(es,{}),bt("div",{style:{display:"flex",flexDirection:"row",gap:4,alignItems:"center"},children:[(ct.length>0||e.styleModifications.length>0||e.spacingTokenChanges.filter(F=>!F.captured).length>0)&&(()=>{var S;let F=Qe!==null&&Qe<ct.length?ct[Qe]:null,ee=e.annotations.length>0&&e.annotations.every(P=>P.status&&P.status!=="pending"),U=Qe!==null?(S=F==null?void 0:F.annotations.some(P=>P.status&&P.status!=="pending"))!=null?S:!1:ee,Se=`oklch(0.628 0.258 ${pt})`;return se("span",{onMouseEnter:()=>Be("counter"),onMouseLeave:we,children:se("button",{ref:Nt,type:"button",onClick:()=>{if(Re.current){Re.current=!1;return}Xn()},onMouseDown:Xe,onMouseUp:an,onMouseLeave:an,title:"Cycle through annotations \u2022 Scroll to change color \u2022 Long press to reset",style:{display:"flex",alignItems:"center",justifyContent:"center",width:20,height:20,padding:0,marginRight:4,border:"none",borderRadius:0,background:U?"#999999":Se,cursor:"pointer",fontFamily:"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",fontSize:11,fontWeight:600,color:"#ffffff",transition:"background 150ms ease"},children:Qe!==null?Qe+1:ct.length+e.styleModifications.length+e.spacingTokenChanges.filter(P=>!P.captured).length})})})(),c&&se("span",{onMouseEnter:()=>Be("provider"),onMouseLeave:we,style:{display:"contents"},children:bt("div",{style:{display:"flex",alignItems:"center",gap:0},children:[se(Vn,{onClick:()=>c(a==="claude"?"codex":"claude"),children:a==="claude"?se(Ki,{}):se(qi,{})}),bt("button",{type:"button",onClick:()=>{let F=(u+1)%p;M==null||M(F)},style:{display:"flex",alignItems:"center",gap:6,height:32,border:"none",background:"none",cursor:"pointer",padding:"0 4px 0 0",fontFamily:"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",fontSize:10,fontWeight:500,color:Nn.iconDefault,whiteSpace:"nowrap"},children:[se("span",{children:g}),se("span",{style:{display:"flex",flexDirection:"column",gap:2},children:Array.from({length:p},(F,ee)=>se("div",{style:{width:3,height:3,borderRadius:"50%",backgroundColor:ee===u?Nn.iconDefault:"rgba(0,0,0,0.2)",transition:"background-color 150ms ease"}},ee))})]})]})}),se("div",{ref:Rt,style:{display:"inline-flex",opacity:o?1:.5,transition:"opacity 150ms ease",cursor:"pointer"},children:se("button",{type:"button",onClick:mt,title:"Collapse (\u2318\u2318)",style:{display:"flex",alignItems:"center",justifyContent:"center",width:32,height:32,border:"none",background:"none",padding:0,cursor:"inherit"},children:o?se("svg",{width:"30",height:"30",viewBox:"0 0 24 24",fill:tn,children:he===1?bt(fo,{children:[se("circle",{cx:"7",cy:"7",r:"2"}),se("circle",{cx:"17",cy:"7",r:"2"}),se("circle",{cx:"7",cy:"17",r:"2"}),se("circle",{cx:"17",cy:"17",r:"2"})]}):bt(fo,{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"})]})}):se("svg",{"data-popmelt-logo":!0,width:"30",height:"30",viewBox:"0 0 40 40",fill:"none",stroke:"#000",strokeWidth:"1",strokeLinejoin:"round",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"})})})})]})]})]}):bt(fo,{children:[se("style",{children:`
|
|
20
|
+
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
|
|
21
|
+
@keyframes popmelt-border-march { to { background-position: 0 -5px; } }
|
|
22
|
+
`}),bt("div",{ref:F=>{kn.current=F,ue&&(ue.current=F)},id:"devtools-toolbar",style:y(f({},cn),{overflow:"visible",opacity:.5,transition:"opacity 150ms ease"}),children:[Ln,se("button",{type:"button",style:{display:"flex",alignItems:"center",justifyContent:"center",width:48,height:48,border:"none",background:"none",cursor:"pointer",padding:0},onClick:()=>{Fe(!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:o?se("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:tn,children:he===1?bt(fo,{children:[se("circle",{cx:"7",cy:"7",r:"2"}),se("circle",{cx:"17",cy:"7",r:"2"}),se("circle",{cx:"7",cy:"17",r:"2"}),se("circle",{cx:"17",cy:"17",r:"2"})]}):bt(fo,{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"})]})}):se("svg",{"data-popmelt-logo":!0,width:"30",height:"30",viewBox:"0 0 40 40",fill:"none",stroke:tn,strokeWidth:"1",strokeLinejoin:"round",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"})})})]})]})}import{useEffect as Ho,useRef as qp,useState as ls}from"react";import{Fragment as Oa,jsx as Tt,jsxs as nr}from"react/jsx-runtime";var Zp={position:"fixed",bottom:86,right:16,zIndex:9999,display:"flex",flexDirection:"column"},Qp=24,ef=6,tf=Qp-ef,nf=8,Ba=y(f({display:"flex",alignItems:"center",gap:6,padding:"4px 10px",backgroundColor:"rgba(255, 255, 255, 0.85)"},Yn),{backdropFilter:"blur(32px)",fontFamily:"ui-monospace, SFMono-Regular, Menlo, monospace",fontSize:11,color:"#1f2937",whiteSpace:"nowrap",transition:"transform 200ms ease, opacity 200ms ease"});function of(e){var s;let t=e.filter(l=>l.type==="tool_use");if(t.length===0)return"Starting\u2026";let n=t[t.length-1],r=String(n.data.tool||""),o=n.data.file?String(n.data.file):null,i=o?(s=o.split("/").pop())!=null?s:o:null;switch(r){case"Read":return i?`Reading ${i}`:"Reading file";case"Edit":return i?`Editing ${i}`:"Editing file";case"Write":return i?`Writing ${i}`:"Writing file";case"Bash":return"Running command";case"Glob":return"Searching files";case"Grep":return"Searching code";default:return r?`Using ${r}`:"Working\u2026"}}function rf(e){let t=e.replace(/^Error:\s*/i,"");return t.length>40?t.slice(0,37)+"...":t}function sf(e,t){if(e.some(o=>o.type==="question"&&o.data.jobId===t))return"Has a question";let r=e.find(o=>o.type==="done"&&o.data.jobId===t);if(r){let o=r.data.resolutions;if(Array.isArray(o)&&o.length>0)return"Applied changes"}return"Replied"}function lf({color:e}){let[t,n]=ls(0);return Ho(()=>{let r=setInterval(()=>{n(o=>(o+1)%2)},250);return()=>clearInterval(r)},[]),Tt("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:e,style:{verticalAlign:"middle",flexShrink:0},children:t===1?nr(Oa,{children:[Tt("circle",{cx:"7",cy:"7",r:"2"}),Tt("circle",{cx:"17",cy:"7",r:"2"}),Tt("circle",{cx:"7",cy:"17",r:"2"}),Tt("circle",{cx:"17",cy:"17",r:"2"})]}):nr(Oa,{children:[Tt("circle",{cx:"12",cy:"6",r:"2"}),Tt("circle",{cx:"6",cy:"12",r:"2"}),Tt("circle",{cx:"18",cy:"12",r:"2"}),Tt("circle",{cx:"12",cy:"18",r:"2"})]})})}function af({color:e}){return Tt("span",{style:{display:"inline-block",width:8,height:8,backgroundColor:e,opacity:.6}})}function cf({color:e}){return Tt("span",{style:{color:e,fontSize:12,lineHeight:1,width:10,display:"inline-block"},children:"\u2713"})}function df(){return Tt("span",{style:{display:"inline-block",width:8,height:8,borderRadius:"50%",backgroundColor:"#ef4444"}})}function Da({bridge:e,inFlightJobs:t,isVisible:n,onHover:r,clearSignal:o,onViewThread:i,onCancel:s,onHoverJob:l,isConnected:a,dismissedThreadIds:c}){let[d,u]=ls([]),[p,g]=ls(!1);Ho(()=>{o>0&&u([])},[o]),Ho(()=>{!c||c.size===0||u(b=>{let E=b.filter(D=>!D.threadId||!c.has(D.threadId));return E.length===b.length?b:E})},[c]),Ho(()=>{u(b=>{var R;let E=new Set(b.map(w=>w.jobId)),D=!1,A=b.map(w=>{let O=t[w.jobId];return O&&(!w.threadId||w.color==="#888")?(D=!0,y(f({},w),{threadId:w.threadId||O.threadId,color:w.color==="#888"?O.color:w.color})):w});for(let[w,O]of Object.entries(t))E.has(w)||(A.push({jobId:w,color:O.color,status:"queued",threadId:O.threadId}),D=!0);for(let w of e.activeJobIds)if(!E.has(w)&&!A.some(O=>O.jobId===w)){let O=e.events.find(K=>K.type==="job_started"&&K.data.jobId===w);A.push({jobId:w,color:"#888",status:"working",threadId:(R=O==null?void 0:O.data)==null?void 0:R.threadId}),D=!0}return D?A:b})},[t,e.activeJobIds]),Ho(()=>{if(e.activeJobIds.length===0)return;let b=new Set(e.activeJobIds);u(E=>E.map(D=>b.has(D.jobId)&&D.status!=="done"&&D.status!=="error"?y(f({},D),{status:"working"}):D))},[e.activeJobIds]);let M=qp(null);if(Ho(()=>{let b=e.lastCompletedJobId;if(!b||b===M.current)return;M.current=b;let E=e.events.find(K=>K.type==="error"&&(K.data.jobId===b||e.status==="error")),D=!!E,A=D?void 0:sf(e.events,b),R=E?String(E.data.message||""):void 0,w=E?!!E.data.cancelled:void 0,O=E==null?void 0:E.data.threadId;u(K=>K.map(H=>H.jobId===b?y(f({},H),{status:D?"error":"done",doneLabel:A,errorMessage:R,cancelled:w,threadId:H.threadId||O}):H))},[e.lastCompletedJobId,e.events,e.status]),!n||d.length===0&&a!==!1)return null;let C=!p&&d.length>1;return nr("div",{style:Zp,"data-devtools":!0,onMouseEnter:()=>{g(!0),r(!0)},onMouseLeave:()=>{g(!1),r(!1),l==null||l(null)},children:[[...d].reverse().map((b,E)=>{let D=E===d.length-1,A=d.length-1-E,R=b.status==="working"?of(e.events.filter(w=>w.data.jobId===b.jobId)):b.status==="queued"?"Queued":b.status==="done"?b.doneLabel||"Done":b.cancelled?"Cancelled":b.errorMessage?rf(b.errorMessage):"Error";return Tt("div",{style:{position:"relative",zIndex:E,marginBottom:C?D?0:-tf:D?0:nf,transform:C?`scale(${Math.max(.94,1-A*.02)})`:"scale(1)",opacity:C?Math.max(.5,1-A*.15):1,transformOrigin:"bottom right",transition:"margin-bottom 250ms ease, transform 250ms ease, opacity 250ms ease"},children:nr("div",{style:y(f({},Ba),{cursor:b.threadId&&i?"pointer":void 0}),onClick:b.threadId&&i?()=>i(b.threadId):void 0,onMouseEnter:l?()=>l(b.jobId):void 0,onMouseLeave:l?()=>l(null):void 0,title:b.errorMessage||void 0,children:[b.status==="working"&&Tt(lf,{color:b.color}),b.status==="queued"&&Tt(af,{color:b.color}),b.status==="done"&&Tt(cf,{color:b.color}),b.status==="error"&&Tt(df,{}),Tt("span",{style:{color:b.status==="queued"?"#9ca3af":"#1f2937"},children:R}),b.status==="working"&&s&&Tt("button",{onClick:w=>{w.stopPropagation(),s(b.jobId)},style:{background:"none",border:"none",cursor:"pointer",color:"#9ca3af",fontSize:14,padding:"0 4px",lineHeight:1},title:"Cancel",children:"\xD7"}),(b.status==="done"||b.status==="error")&&Tt("button",{onClick:w=>{w.stopPropagation(),u(O=>O.filter(K=>K.jobId!==b.jobId))},style:{background:"none",border:"none",cursor:"pointer",color:"#9ca3af",fontSize:14,padding:"0 4px",lineHeight:1},title:"Dismiss",children:"\xD7"})]})},b.jobId)}),a===!1&&d.length>0&&nr("div",{style:y(f({},Ba),{color:"#9ca3af"}),children:[Tt("span",{style:{display:"inline-block",width:8,height:8,borderRadius:"50%",backgroundColor:"#f59e0b"}}),Tt("span",{children:"Reconnecting\u2026"})]})]})}import{Fragment as ff,jsx as pf,jsxs as gf}from"react/jsx-runtime";var uf=`
|
|
19
23
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
20
24
|
:host {
|
|
21
25
|
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
@@ -31,9 +35,9 @@ Your AI gets the visual and technical context it needs to act.`,usage:[],keys:[{
|
|
|
31
35
|
color: initial;
|
|
32
36
|
-webkit-font-smoothing: auto;
|
|
33
37
|
}
|
|
34
|
-
`;function
|
|
35
|
-
`),n=[],r=0;for(;r<t.length;){let i=t[r];if(i.trimStart().startsWith("```")){let c=[];for(r++;r<t.length&&!t[r].trimStart().startsWith("```");)c.push(t[r]),r++;r++,n.push(
|
|
36
|
-
`)},n.length));continue}if(/^(-{3,}|\*{3,}|_{3,})\s*$/.test(i)){n.push(
|
|
38
|
+
`;function Na({children:e}){return gf(ff,{children:[pf("style",{children:uf}),e]})}import{useEffect as mf,useLayoutEffect as hf,useRef as yf,useState as Ha}from"react";import{createPortal as bf}from"react-dom";import{Fragment as wf,jsx as Sf,jsxs as Cf}from"react/jsx-runtime";function xf(e){return e.tagName==="STYLE"||e.tagName==="LINK"&&e.rel==="stylesheet"}function vf(e){let t=new Map,n=e.firstChild;function r(s){if(t.has(s)||s.hasAttribute("data-pm-mirror"))return;let l=s.cloneNode(!0);l.setAttribute("data-pm-mirror",""),e.insertBefore(l,n),t.set(s,l)}function o(s){let l=t.get(s);l&&(l.remove(),t.delete(s))}for(let s of document.querySelectorAll('link[rel="stylesheet"], style'))s.getRootNode()===document&&r(s);try{document.adoptedStyleSheets.length>0&&(e.adoptedStyleSheets=[...document.adoptedStyleSheets,...e.adoptedStyleSheets])}catch(s){}let i=new MutationObserver(s=>{for(let l of s)if(l.type==="childList"){for(let a of l.addedNodes)a instanceof Element&&xf(a)&&r(a);for(let a of l.removedNodes)a instanceof Element&&o(a)}});return i.observe(document.head,{childList:!0}),document.body&&i.observe(document.body,{childList:!0}),()=>{i.disconnect();for(let s of t.values())s.remove();t.clear()}}function Fa({children:e}){let t=yf(null),[n,r]=Ha(null),[o,i]=Ha(null);return hf(()=>{let s=t.current;if(!s||s.shadowRoot)return;let l=s.attachShadow({mode:"open"}),a=document.createElement("div");a.setAttribute("data-popmelt-root",""),l.appendChild(a),r(l),i(a)},[]),mf(()=>{if(n)return vf(n)},[n]),Cf(wf,{children:[Sf("div",{ref:t,"data-popmelt-shadow-host":!0,style:{position:"absolute",width:0,height:0,overflow:"visible",zIndex:1e4}}),o&&bf(e,o)]})}import{useCallback as $r,useEffect as Un,useRef as Hn,useState as mo}from"react";import{Fragment as If,jsx as St}from"react/jsx-runtime";var _a="ui-monospace, SFMono-Regular, Menlo, monospace",Ef=/^#[0-9a-fA-F]{3,8}$/,kf=/^(?:rgba?|hsla?|oklch)\([^)]+\)$/,Mf=new Set(["black","white","red","blue","green","yellow","orange","purple","pink","gray","grey","cyan","magenta","brown","navy","teal","maroon","olive","silver","aqua","fuchsia","lime"]);function Tf(e){let t=e.trim();return Ef.test(t)||kf.test(t)||Mf.has(t.toLowerCase())}function as(e,t){return St("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 or(e){let t=[],n=/(`[^`]+`)|(\*\*\*(.+?)\*\*\*)|(\*\*(.+?)\*\*)|(\*(.+?)\*)|(_([^_]+?)_)|(\[([^\]]+)\]\(([^)]+)\))|(#[0-9a-fA-F]{3,8})(?![0-9a-fA-F])|((?:rgba?|hsla?|oklch)\([^)]+\))/g,r=0,o;for(;(o=n.exec(e))!==null;){if(o.index>r&&t.push(e.slice(r,o.index)),o[1]){let i=o[1].slice(1,-1);Tf(i)&&t.push(as(i,`sw-${o.index}`)),t.push(St("code",{style:{fontFamily:_a,fontSize:"0.9em",backgroundColor:"rgba(0,0,0,0.06)",padding:"1px 4px",borderRadius:2},children:i},o.index))}else o[3]!==void 0?t.push(St("strong",{children:St("em",{children:o[3]})},o.index)):o[5]!==void 0?t.push(St("strong",{children:o[5]},o.index)):o[7]!==void 0?t.push(St("em",{children:o[7]},o.index)):o[9]!==void 0?t.push(St("em",{children:o[9]},o.index)):o[11]!==void 0&&o[12]!==void 0?t.push(St("a",{href:o[12],target:"_blank",rel:"noopener noreferrer",style:{color:"inherit",textDecoration:"underline"},children:o[11]},o.index)):o[13]!==void 0?(t.push(as(o[13],`sw-${o.index}`)),t.push(o[13])):o[14]!==void 0&&(t.push(as(o[14],`sw-${o.index}`)),t.push(o[14]));r=o.index+o[0].length}return r<e.length&&t.push(e.slice(r)),t}function zr(e){var o;let t=e.split(`
|
|
39
|
+
`),n=[],r=0;for(;r<t.length;){let i=t[r];if(i.trimStart().startsWith("```")){let c=[];for(r++;r<t.length&&!t[r].trimStart().startsWith("```");)c.push(t[r]),r++;r++,n.push(St("pre",{style:{fontFamily:_a,fontSize:"0.9em",lineHeight:1.4,backgroundColor:"rgba(0,0,0,0.04)",padding:"6px 8px",margin:"4px 0",overflowX:"auto",whiteSpace:"pre"},children:c.join(`
|
|
40
|
+
`)},n.length));continue}if(/^(-{3,}|\*{3,}|_{3,})\s*$/.test(i)){n.push(St("hr",{style:{border:"none",borderTop:"1px solid rgba(0,0,0,0.1)",margin:"6px 0"}},n.length)),r++;continue}let s=i.match(/^(#{1,4})\s+(.+)/);if(s){let c=s[1].length,d={1:16,2:14,3:13,4:12};n.push(St("div",{style:{fontWeight:700,fontSize:(o=d[c])!=null?o:12,margin:"8px 0 2px"},children:or(s[2])},n.length)),r++;continue}if(i.trimStart().startsWith("|")&&i.trimEnd().endsWith("|")){let c=[];for(;r<t.length&&t[r].trimStart().startsWith("|")&&t[r].trimEnd().endsWith("|");)c.push(t[r]),r++;let d=E=>/^\|[\s\-:|]+\|$/.test(E),u=c.filter(E=>!d(E)),p=E=>E.split("|").slice(1,-1).map(D=>D.trim()),g=E=>/^\*\*.+\*\*$/.test(E)||/^__.+__$/.test(E),M=u.map(p),C=M.length>1&&M.slice(1).every(E=>E[0]&&g(E[0])),b=M.length>0&&M[0].every(E=>g(E));n.push(St("div",{style:{overflowX:"auto",margin:"4px 0",paddingBottom:4},children:St("table",{style:{borderCollapse:"separate",borderSpacing:0,fontSize:"0.95em",width:"max-content",minWidth:"100%"},children:St("tbody",{children:u.map((E,D)=>St("tr",{children:p(E).map((A,R)=>St(D===0?"th":"td",{style:f({border:"1px solid rgba(0,0,0,0.1)",padding:"3px 6px",textAlign:"left",fontWeight:D===0?600:400,minWidth:60,whiteSpace:"nowrap"},R===0&&C||D===0&&b?y(f(f({position:"sticky"},R===0&&C?{left:0}:{}),D===0&&b?{top:0}:{}),{background:"#fff",zIndex:R===0&&C&&D===0&&b?2:1}):{}),children:or(A)},R))},D))})})},n.length));continue}if(i.match(/^(\s*)([-*])\s+(.+)/)){let c=[];for(;r<t.length&&/^\s*[-*]\s+/.test(t[r]);){let d=t[r].match(/^\s*[-*]\s+(.+)/);d&&c.push(St("li",{children:or(d[1])},c.length)),r++}n.push(St("ul",{style:{margin:"2px 0",paddingLeft:20},children:c},n.length));continue}if(i.match(/^(\s*)\d+\.\s+(.+)/)){let c=[];for(;r<t.length&&/^\s*\d+\.\s+/.test(t[r]);){let d=t[r].match(/^\s*\d+\.\s+(.+)/);d&&c.push(St("li",{children:or(d[1])},c.length)),r++}n.push(St("ol",{style:{margin:"2px 0",paddingLeft:20},children:c},n.length));continue}if(i.trim()===""){n.push(St("div",{style:{height:4}},n.length)),r++;continue}n.push(St("div",{style:{margin:"2px 0"},children:or(i)},n.length)),r++}return St(If,{children:n})}import{Fragment as Wr,jsx as He,jsxs as xt}from"react/jsx-runtime";var Ya=400,Fo=16,ja=3,Rf=3,Ga=4,Lf=8,cs="devtools-thread-panel-position",ps=Ya+2*ja+2*Ga,Af=ps+2*Rf;function ds(){return{top:Fo,left:window.innerWidth-ps-Fo}}function za(e,t,n){let r=n==null?void 0:n.getBoundingClientRect(),o=2*ja+2*Ga,i=window.innerHeight-Fo-o;return r&&t+Af>r.left&&(i=r.top-Lf-o),Math.max(200,i-Math.max(0,e))}var Pf={width:Ya,backgroundColor:"#eaeaea",borderWidth:3,borderStyle:"solid",borderColor:"transparent",boxSizing:"content-box",display:"flex",flexDirection:"column",overflow:"visible",padding:4,fontFamily:Ft,fontSize:12,color:"#1f2937",pointerEvents:"auto"},Bf={display:"flex",alignItems:"center",justifyContent:"space-between",padding:"4px 5px 4px 10px",margin:0,fontWeight:600,fontSize:12,overflow:"hidden"},Of={flex:1,overflowY:"auto",padding:"8px 0",scrollbarWidth:"none"},Df=`
|
|
37
41
|
[data-devtools="thread-panel-messages"]:hover {
|
|
38
42
|
scrollbar-width: thin !important;
|
|
39
43
|
}
|
|
@@ -47,4 +51,5 @@ Your AI gets the visual and technical context it needs to act.`,usage:[],keys:[{
|
|
|
47
51
|
background: rgba(0,0,0,0.15);
|
|
48
52
|
border-radius: 3px;
|
|
49
53
|
}
|
|
50
|
-
`,Pf={borderTop:"1px solid rgba(0, 0, 0, 0.12)",display:"flex",alignItems:"center",gap:4,padding:"0 4px 0 10px"};function Wa(e){return e.replace(/<resolution>[\s\S]*?<\/resolution>/g,"").replace(/<question>[\s\S]*?<\/question>/g,"").replace(/<plan>[\s\S]*?<\/plan>/g,"").replace(/<review>[\s\S]*?<\/review>/g,"").trim()}function Ya(e){return new Date(e).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"})}var us=["reviewing","considering","thinking","zhuzhing","iterating","tweaking","reflecting","noodling","pondering","finessing","polishing","riffing"],Bf=3e3,Of=250;function Df({color:e}){let[t,n]=mo(0),[r,o]=mo(()=>Math.floor(Math.random()*us.length));return Un(()=>{let i=setInterval(()=>n(l=>(l+1)%2),Of),s=setInterval(()=>o(l=>(l+1)%us.length),Bf);return()=>{clearInterval(i),clearInterval(s)}},[]),Ot("span",{style:{display:"inline-flex",alignItems:"center",gap:4},children:[Ye("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:e,style:{verticalAlign:"middle",flexShrink:0},children:t===1?Ot(ps,{children:[Ye("circle",{cx:"7",cy:"7",r:"2"}),Ye("circle",{cx:"17",cy:"7",r:"2"}),Ye("circle",{cx:"7",cy:"17",r:"2"}),Ye("circle",{cx:"17",cy:"17",r:"2"})]}):Ot(ps,{children:[Ye("circle",{cx:"12",cy:"6",r:"2"}),Ye("circle",{cx:"6",cy:"12",r:"2"}),Ye("circle",{cx:"18",cy:"12",r:"2"}),Ye("circle",{cx:"12",cy:"18",r:"2"})]})}),Ye("span",{style:{fontSize:11,color:"#9ca3af",fontStyle:"italic"},children:us[r]})]})}function Nf(e){var o;let t=String(e.data.tool||""),n=e.data.file?String(e.data.file):null,r=n?(o=n.split("/").pop())!=null?o:n:null;switch(t){case"Read":return r?`Reading ${r}`:"Reading file";case"Edit":return r?`Editing ${r}`:"Editing file";case"Write":return r?`Writing ${r}`:"Writing file";case"Bash":return"Running command";case"Glob":return"Searching files";case"Grep":return"Searching code";case"WebFetch":return"Fetching page";case"WebSearch":return"Searching web";default:return t?`Using ${t}`:null}}var Hf=new Set(["Read","Glob","Grep","WebFetch","WebSearch"]),Ff=new Set(["Edit","Write","Bash"]);function _f(e){let t=0,n=!1;for(let r of e){if(r.type!=="tool_use")continue;let o=String(r.data.tool||"");Ff.has(o)?n=!0:Hf.has(o)&&t++}return!n&&t>=3?"researching":n?"applying changes":null}function zf(e){let t=[];for(let n of e)if(n.type==="tool_use"){let r=Nf(n);r&&t.push({kind:"tool",label:r})}else if(n.type==="delta"){let r=String(n.data.text||"");if(!r)continue;let o=t[t.length-1];o&&o.kind==="text"?o.text+=r:t.push({kind:"text",text:r})}else if(n.type==="thinking"){let r=String(n.data.text||"");if(!r)continue;let o=t[t.length-1];o&&o.kind==="thinking"?o.text+=r:t.push({kind:"thinking",text:r})}return t}function ja({threadId:e,bridgeUrl:t,accentColor:n,isStreaming:r,streamingEvents:o,onClose:i,onReply:s,onCancel:l,lastError:a,onMouseEnter:c,toolbarRef:d,currentModel:u,currentProvider:p,annotationNumber:g,annotationText:k}){let[w,b]=mo([]),[E,B]=mo(!0),[L,T]=mo(""),[v,O]=mo([]),H=zn(null),U=zn(null),G=zn(null),X=zn(r),S=zn(ds()),I=zn({x:0,y:0}),K=zn(!1),ge=zn({x:0,y:0,offsetX:0,offsetY:0}),be=zn(!1),[,de]=mo(0);Un(()=>{try{let q=localStorage.getItem(cs);if(q){let me=JSON.parse(q);typeof me.top=="number"&&typeof me.left=="number"&&(be.current=!0,S.current={top:me.top,left:me.left},de(Ee=>Ee+1))}}catch(q){}},[]),Un(()=>{let q=()=>{be.current||(S.current=ds()),de(me=>me+1)};return window.addEventListener("resize",q,{passive:!0}),()=>window.removeEventListener("resize",q)},[]),Un(()=>{let q=G.current;if(!q)return;let me=We=>{We.button!==0||We.target.closest("button")||(We.preventDefault(),We.stopPropagation(),K.current=!0,ge.current={x:We.clientX,y:We.clientY,offsetX:I.current.x,offsetY:I.current.y})},Ee=We=>{if(!K.current)return;let lt=ge.current,dt=lt.offsetX+(We.clientX-lt.x),W=lt.offsetY+(We.clientY-lt.y),te=Math.max(_o,Math.min(window.innerWidth-Wr-2*fs-_o,S.current.left+dt)),j=Math.max(_o,S.current.top+W);I.current={x:te-S.current.left,y:j-S.current.top};let he=U.current;he&&(he.style.top=`${j}px`,he.style.left=`${te}px`,he.style.height=`${$a(j,te,d==null?void 0:d.current)}px`)},ye=()=>{if(!K.current)return;let We=S.current.top+I.current.y,lt=S.current.left+I.current.x;S.current={top:We,left:lt},I.current={x:0,y:0},be.current=!0;try{localStorage.setItem(cs,JSON.stringify({top:We,left:lt}))}catch(dt){}K.current=!1},Ie=()=>{S.current=ds(),I.current={x:0,y:0},be.current=!1;try{localStorage.removeItem(cs)}catch(We){}de(We=>We+1)};return q.addEventListener("mousedown",me),window.addEventListener("mousemove",Ee),window.addEventListener("mouseup",ye),q.addEventListener("dblclick",Ie),()=>{q.removeEventListener("mousedown",me),window.removeEventListener("mousemove",Ee),window.removeEventListener("mouseup",ye),q.removeEventListener("dblclick",Ie)}},[]);let ue=$r(()=>{fetch(`${t}/thread/${e}`).then(q=>q.json()).then(q=>{var me;b((me=q.messages)!=null?me:[]),B(!1)}).catch(()=>B(!1))},[t,e]);Un(()=>{B(!0),ue()},[ue]),Un(()=>{X.current&&!r&&ue(),X.current=r},[r,ue]);let Fe=o?zf(o):[],Te=o?_f(o):null;Un(()=>{H.current&&(H.current.scrollTop=H.current.scrollHeight)},[w,Fe.length,r]),Un(()=>{let q=me=>{me.key==="Escape"&&(me.stopPropagation(),i())};return document.addEventListener("keydown",q),()=>document.removeEventListener("keydown",q)},[i]);let ee=$r(()=>{if(!L.trim()||!s)return;let q=L.trim(),me=v.length>0?v:void 0;b(Ee=>[...Ee,{role:"human",timestamp:Date.now(),jobId:"pending",replyToQuestion:me?`${q} [${me.length} image${me.length>1?"s":""}]`:q}]),s(e,q,me),T(""),O([])},[L,v,e,s]),Le=$r(q=>{let me=q.clipboardData.items,Ee=[];for(let ye=0;ye<me.length;ye++){let Ie=me[ye];if(Ie.type.startsWith("image/")){let We=Ie.getAsFile();We&&Ee.push(We)}}Ee.length>0&&(q.preventDefault(),O(ye=>[...ye,...Ee]))},[]),Ae=$r(q=>{q.key==="Enter"&&(q.metaKey||q.ctrlKey)&&(q.preventDefault(),ee())},[ee]),_e=S.current.top+I.current.y,Pe=S.current.left+I.current.x,Me=$a(_e,Pe,d==null?void 0:d.current);return Ot(ps,{children:[Ye("div",{"data-devtools":"thread-panel-backdrop",onMouseDown:q=>{q.target===q.currentTarget&&i()},style:{position:"fixed",inset:0,zIndex:9999}}),Ot("div",{ref:U,style:y(f({},If),{height:Me,position:"fixed",top:_e,left:Pe,zIndex:1e4}),"data-devtools":"thread-panel",onMouseEnter:c,children:[Ot("div",{ref:G,style:y(f({},Rf),{backgroundColor:n,color:"#ffffff",cursor:"grab",userSelect:"none",WebkitUserSelect:"none"}),children:[Ot("span",{style:{display:"flex",alignItems:"center",gap:6,minWidth:0},children:[Ye("span",{style:{flexShrink:0},children:g?`${g}.`:"Conversation"}),k&&Ye("span",{style:{opacity:.7,fontSize:11,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",minWidth:0},children:k})]}),Ye("button",{onClick:i,style:{background:"none",border:"none",cursor:"pointer",fontSize:16,color:"#ffffff",padding:"0 4px",lineHeight:1},children:"\xD7"})]}),Ye("style",{dangerouslySetInnerHTML:{__html:Af}}),Ot("div",{ref:H,style:Lf,"data-devtools":"thread-panel-messages",children:[E&&Ye("div",{style:{padding:16,color:"#9ca3af",textAlign:"center"},children:"Loading..."}),!E&&w.length===0&&!r&&Ye("div",{style:{padding:16,color:"#9ca3af",textAlign:"center"},children:"No messages yet."}),w.map((q,me)=>{let Ee=q.role==="human";if(q.cancelled||q.error)return Ot("div",{style:{padding:"8px 16px",borderBottom:"1px solid rgba(0, 0, 0, 0.04)",opacity:me===w.length-1?1:.5},children:[Ot("div",{style:{display:"flex",alignItems:"center",gap:4},children:[Ye("span",{style:{fontSize:11,color:q.error?"#dc2626":"#9ca3af",fontStyle:"italic"},children:q.error?"Error":"Cancelled"}),Ye("span",{style:{fontSize:10,color:"#9ca3af",marginLeft:"auto"},children:Ya(q.timestamp)})]}),q.error&&Ye("div",{style:{fontSize:12,color:"#6b7280",marginTop:4,lineHeight:1.4},children:q.error})]},`${q.jobId}-${me}`);let ye=Ee?q.replyToQuestion||q.feedbackSummary||"(annotation)":Wa(q.responseText||""),Ie=Ee?void 0:q.question,We=!Ee&&q.resolutions&&q.resolutions.length>0,lt=!Ee&&q.toolsUsed&&q.toolsUsed.length>0;if(!ye&&!Ie&&!We)return null;let dt=me===w.length-1;return Ot("div",{style:{padding:"8px 16px",borderBottom:"1px solid rgba(0, 0, 0, 0.04)",opacity:dt?1:.5},children:[Ot("div",{style:{display:"flex",alignItems:"center",gap:4,marginBottom:4},children:[!Ee&&Ye(Zi,{provider:q.provider,size:11,style:{color:"#6b7280"}}),Ye("span",{style:{fontWeight:600,fontSize:11,color:Ee?n:"#6b7280"},children:Ee?"You":Qi(q.model,q.provider)}),Ye("span",{style:{fontSize:10,color:"#9ca3af",marginLeft:"auto"},children:Ya(q.timestamp)})]}),ye&&Ye("div",{style:{lineHeight:1.5,wordBreak:"break-word"},children:Ee?ye:zr(ye)}),Ie&&Ye("div",{style:{marginTop:ye?4:0,lineHeight:1.5,wordBreak:"break-word"},children:zr(Ie)}),(lt||We)&&Ot("div",{style:{marginTop:ye||Ie?6:0,padding:"4px 8px",backgroundColor:"rgba(0, 0, 0, 0.03)",fontSize:11,lineHeight:1.5,color:"#6b7280"},children:[lt&&Ye("div",{style:{fontFamily:"ui-monospace, SFMono-Regular, Menlo, monospace",fontSize:10},children:q.toolsUsed.map((W,te)=>Ye("div",{children:W},te))}),We&&q.resolutions.map((W,te)=>{var xe;let j=(xe=W.finalScope)!=null?xe:W.inferredScope,he=j?`${j.breadth} \xB7 ${j.target}`:null;return Ot("div",{style:{marginTop:lt?4:0},children:[Ye("span",{style:{color:W.status==="resolved"?"#10b981":"#f59e0b"},children:W.status==="resolved"?"Done":"Needs review"}),he&&Ye("span",{style:{marginLeft:6,padding:"1px 5px",backgroundColor:"rgba(0, 0, 0, 0.06)",fontSize:10,fontFamily:"ui-monospace, SFMono-Regular, Menlo, monospace"},children:he}),W.summary?` \u2014 ${W.summary}`:""]},te)})]})]},`${q.jobId}-${me}`)}),r&&Ot("div",{style:{padding:"8px 16px",borderBottom:"1px solid rgba(0, 0, 0, 0.04)"},children:[Ot("div",{style:{display:"flex",alignItems:"center",gap:4,marginBottom:4},children:[Ye(Zi,{provider:p,size:11,style:{color:"#6b7280"}}),Ye("span",{style:{fontWeight:600,fontSize:11,color:"#6b7280"},children:Qi(u,p)}),Te&&Ye("span",{style:{fontSize:10,color:"#b0b7c3",fontStyle:"italic"},children:Te}),Ot("span",{style:{marginLeft:"auto",display:"flex",alignItems:"center",gap:6},children:[Ye(Df,{color:n}),l&&Ye("button",{onClick:l,style:{background:"none",border:"1px solid rgba(0,0,0,0.1)",color:"#6b7280",fontSize:10,padding:"2px 8px",cursor:"pointer",fontFamily:"inherit"},children:"Cancel"})]})]}),Fe.map((q,me)=>{if(q.kind==="tool")return Ye("div",{style:{paddingLeft:12,fontSize:11,color:"#9ca3af",fontFamily:"ui-monospace, SFMono-Regular, Menlo, monospace",lineHeight:1.6},children:q.label},me);if(q.kind==="thinking")return Ye("div",{style:{paddingLeft:12,marginTop:2,marginBottom:2,fontSize:11,color:"#9ca3af",fontStyle:"italic",lineHeight:1.4,whiteSpace:"pre-wrap",wordBreak:"break-word",maxHeight:80,overflowY:"auto"},children:q.text},me);let Ee=Wa(q.text);return Ee?Ye("div",{style:{paddingLeft:12,marginTop:2,marginBottom:2,lineHeight:1.5,wordBreak:"break-word"},children:zr(Ee)},me):null})]})]}),!r&&a&&Ot("div",{style:{padding:"8px 16px",backgroundColor:"rgba(239, 68, 68, 0.06)",borderBottom:"1px solid rgba(0,0,0,0.04)",fontSize:11,color:"#dc2626",lineHeight:1.4},children:[Ye("span",{style:{fontWeight:600},children:"Error: "}),a]}),s&&Ot("div",{style:Pf,children:[Ye("input",{value:L,onChange:q=>T(q.target.value),onKeyDown:Ae,onPaste:Le,placeholder:"Reply (cmd enter)",style:{flex:1,minWidth:0,height:32,padding:"0 4px",fontSize:12,fontFamily:zt,backgroundColor:"transparent",color:"#1f2937",border:"none",outline:"none",lineHeight:"32px",boxSizing:"border-box"}}),Ye("button",{onClick:ee,disabled:!L.trim(),style:{display:"flex",alignItems:"center",justifyContent:"center",width:28,height:28,padding:0,background:"none",border:"none",cursor:L.trim()?"pointer":"default",color:L.trim()?"#1f2937":"rgba(0,0,0,0.2)",flexShrink:0},children:Ot("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:[Ye("path",{d:"M22 2 11 13"}),Ye("path",{d:"M22 2 15 22 11 13 2 9z"})]})})]})]})]})}import{Fragment as Vf,jsx as $o,jsxs as Ga}from"react/jsx-runtime";var Va=$f(null),gs="devtools-provider",ms="devtools-model",hs="devtools-open-thread-id";function Yf(e,t,n){let r=e==="codex"?er:Qo;return Math.min(n,(t==="codex"?er:Qo).length-1)}function jf({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"}){var Oe,pe,xt,Je,Tn;let[o,i]=ll(),s=il(n),l=Xt(null),a=Xt(null),c=(Oe=ol())!=null?Oe:n,d=Xt(new Map),[u,p]=Kt(()=>typeof window=="undefined"?"claude":localStorage.getItem(gs)||"claude"),[g,k]=Kt(()=>{if(typeof window=="undefined")return 0;let P=localStorage.getItem(ms);return P&&parseInt(P,10)||0}),[w,b]=Kt(["claude","codex"]),[E,B]=Kt({}),[L,T]=Kt(!1);Dt(()=>{s.isConnected&&_s(c).then(P=>{if(!P)return;let Q=Object.entries(P.providers).filter(([,He])=>He.available).map(([He])=>He);Q.length>0&&b(Q);let se={};for(let[He,Ze]of Object.entries(P.providers))Ze.mcp&&(se[He]=Ze.mcp);B(se),Object.values(se).every(He=>He.found)&&T(!1)})},[s.isConnected,s.capabilitiesVersion,c]),Dt(()=>{if(w.length>0&&!w.includes(u)){let P=w[0];p(P),localStorage.setItem(gs,P)}},[w,u]);let v=u==="codex"?er:Qo,O=(pe=v[g])!=null?pe:v[0],H=Vt(P=>{let Q=u;p(P),localStorage.setItem(gs,P);let se=Yf(Q,P,g);k(se),localStorage.setItem(ms,String(se))},[u,g]),U=Vt(P=>{k(P),localStorage.setItem(ms,String(P))},[]),G=Vt(async()=>{let P=await Ws(c);if(!P)return;let Q={};for(let[se,fe]of Object.entries(P.capabilities.providers))fe.mcp&&(Q[se]=fe.mcp);B(Q),P.results.some(se=>se.installed)&&T(!0)},[c]),[X,S]=Kt(new Set),[I,K]=Kt(null),[ge,be]=Kt(null),[de,ue]=Kt(null),[Fe,Te]=Kt(null);Dt(()=>{s.isConnected&&xo(c).then(P=>{P!=null&&P.components&&S(new Set(Object.keys(P.components)))})},[s.isConnected,c]);let ee=Vt(async P=>{let Q=[];for(let se of P)try{(await Ys(se,c)).added&&Q.push(se)}catch(fe){console.error("[Popmelt] Failed to add component to model:",se,fe)}Q.length>0&&(S(se=>{let fe=new Set(se);for(let He of Q)fe.add(He);return fe}),K(Q[Q.length-1]))},[c]),Le=Vt(P=>{K(P)},[]),Ae=Vt(()=>{xo(c).then(P=>{P!=null&&P.components&&S(new Set(Object.keys(P.components)))})},[c]),_e=Vt(async P=>{try{(await js(P,c)).removed&&S(se=>{let fe=new Set(se);return fe.delete(P),fe})}catch(Q){console.error("[Popmelt] Failed to remove component from model:",Q)}},[c]),Pe=Vt((P,Q)=>{i({type:"MODIFY_SPACING_TOKEN",payload:P}),i({type:"ADD_SPACING_TOKEN_CHANGE",payload:Q})},[i]),Me=Vt((P,Q)=>{i({type:"DELETE_SPACING_TOKEN",payload:{tokenPath:P,originalValue:Q}})},[i]),[q,me]=Kt(0),Ee=Xt([]);Dt(()=>{let P=Ee.current,Q=o.spacingTokenMods;Ee.current=Q;let se=new Map(P.map(Ze=>[Ze.tokenPath,Ze])),fe=new Map(Q.map(Ze=>[Ze.tokenPath,Ze])),He=!1;for(let[Ze,at]of fe){let Ne=se.get(Ze);if(!(Ne&&Ne.currentValue===at.currentValue)){He=!0,at.currentValue==="__deleted__"?Gs(Ze,c).catch(je=>console.error("[Popmelt] Failed to sync token delete:",je)):Ur(Ze,at.currentValue,c).catch(je=>console.error("[Popmelt] Failed to sync token update:",je));for(let je of at.targets){let nt=document.querySelector(je.selector);if(nt)if(at.currentValue==="__deleted__")nt.style.removeProperty(je.property);else{let Lt=at.currentPx;Lt>0&&nt.style.setProperty(je.property,`${Lt}px`,"important")}}}}for(let[Ze,at]of se)if(!fe.has(Ze)){He=!0,Ur(Ze,at.originalValue,c).catch(Ne=>console.error("[Popmelt] Failed to restore token on undo:",Ne));for(let Ne of at.targets){let je=document.querySelector(Ne.selector);je&&je.style.removeProperty(Ne.property)}}He&&me(Ze=>Ze+1)},[o.spacingTokenMods,c]);let[ye,Ie]=Kt(()=>typeof window=="undefined"?null:localStorage.getItem(hs)||null),[We,lt]=Kt(new Set),[dt,W]=Kt(null);Dt(()=>{ye?localStorage.setItem(hs,ye):localStorage.removeItem(hs)},[ye]);let te="popmelt-in-flight-jobs",[j,he]=Kt(()=>{try{let P=sessionStorage.getItem(te);return P?JSON.parse(P):{}}catch(P){return{}}});Dt(()=>{try{Object.keys(j).length>0?sessionStorage.setItem(te,JSON.stringify(j)):sessionStorage.removeItem(te)}catch(P){}},[j]);let xe=Xt(new Map);Dt(()=>{for(let[P,Q]of Object.entries(j))Q.annotationIds.length>0&&xe.current.set(P,Q.annotationIds)},[j]);let Be=Xt(!1);Dt(()=>{if(Be.current||o.annotations.length===0)return;Be.current=!0;let P=new Set;for(let se of Object.values(j))for(let fe of se.annotationIds)P.add(fe);let Q=o.annotations.filter(se=>P.has(se.id)?!1:!!(se.status==="in_flight"||(se.status==="pending"||!se.status)&&(se.captured||se.threadId))).map(se=>se.id);Q.length>0&&i({type:"SET_ANNOTATION_STATUS",payload:{ids:Q,status:"dismissed"}})},[o.annotations,j,i]);let Ce=zo(()=>{let P=new Set;for(let Q of Object.values(j))for(let se of Q.annotationIds)P.add(se);return P},[j]),it=zo(()=>{let P=new Set;for(let Q of Object.values(j))for(let se of Q.styleSelectors)P.add(se);return P},[j]),qe=zo(()=>{let P=new Map;for(let Q of Object.values(j)){for(let se of Q.styleSelectors)P.set(se,Q.color);for(let se of Q.annotationIds){let fe=o.annotations.find(He=>He.id===se);if(fe&&(fe.linkedSelector&&P.set(fe.linkedSelector,Q.color),fe.groupId))for(let He of o.annotations)He.groupId===fe.groupId&&He.linkedSelector&&P.set(He.linkedSelector,Q.color)}}return P},[j,o.annotations]),Ct=Xt(o.annotations);Ct.current=o.annotations;let Nt=Xt(o.styleModifications);Nt.current=o.styleModifications;let et=Xt(j);et.current=j,Dt(()=>{let P=null,Q=()=>{var Ne,je;if(Object.keys(et.current).length>0)return;let fe=Ct.current,He=Nt.current,Ze=[],at=[];for(let nt of fe){if(!nt.linkedSelector||!nt.linkedSelector.startsWith("[data-pm=")||nt.captured||nt.status&&nt.status!=="pending")continue;let Lt=document.querySelector(nt.linkedSelector);!Lt&&((je=(Ne=nt.elements)==null?void 0:Ne[0])!=null&&je.selector)&&(Lt=document.querySelector(nt.elements[0].selector)),Lt||Ze.push(nt.linkedSelector)}for(let nt of He)document.querySelector(nt.selector)||at.push(nt.selector);(Ze.length>0||at.length>0)&&i({type:"CLEANUP_ORPHANED",payload:{linkedSelectors:Ze,styleSelectors:at}})},se=new MutationObserver(fe=>{fe.some(He=>He.removedNodes.length>0)&&(P&&clearTimeout(P),P=setTimeout(Q,3e3))});return se.observe(document.body,{childList:!0,subtree:!0}),()=>{se.disconnect(),P&&clearTimeout(P)}},[i]),Dt(()=>{s.lastCompletedJobId&&s.lastCompletedJobId in j&&he(P=>{var fe;let He=P,{[fe=s.lastCompletedJobId]:Q}=He;return Yn(He,[dr(fe)])})},[s.lastCompletedJobId]);let Rt=Xt(!1);Dt(()=>{if(!s.isConnected){Rt.current=!1;return}if(Rt.current||(Rt.current=!0,Object.keys(j).length===0))return;let Q=setTimeout(()=>{bo(c).then(se=>{var He;if(!se)return;let fe=new Set(((He=se.activeJobs)!=null?He:[]).map(Ze=>Ze.id));he(Ze=>{let at=Object.keys(Ze).filter(je=>!fe.has(je));if(at.length===0)return Ze;let Ne=f({},Ze);for(let je of at)delete Ne[je];return Ne})})},500);return()=>clearTimeout(Q)},[s.isConnected,c]);let Ht=Xt(new Set);Dt(()=>{let P=s.events.filter(Q=>Q.type==="done"&&Q.data.resolutions);for(let Q of P){let se=Q.data.jobId;Ht.current.has(se)||(Ht.current.add(se),Array.isArray(Q.data.resolutions)&&i({type:"APPLY_RESOLUTIONS",payload:{resolutions:Q.data.resolutions,threadId:Q.data.threadId}}))}},[s.events,i]);let bt=Xt(new Set);Dt(()=>{let P=s.events.filter(Q=>Q.type==="error"&&Q.data.cancelled);for(let Q of P){let se=Q.data.jobId;if(!se||bt.current.has(se))continue;bt.current.add(se);let fe=j[se];fe&&fe.annotationIds.length>0&&i({type:"SET_ANNOTATION_STATUS",payload:{ids:fe.annotationIds,status:"dismissed"}})}},[s.events,j,i]);let wt=Xt(0);Dt(()=>{let P=s.incrementalResolutions;if(P.length<=wt.current)return;let Q=P.slice(wt.current);wt.current=P.length,i({type:"APPLY_RESOLUTIONS",payload:{resolutions:Q}})},[s.incrementalResolutions,i]),Dt(()=>{s.incrementalResolutions.length===0&&(wt.current=0)},[s.incrementalResolutions.length]);let mt=Xt(s.status);Dt(()=>{let P=mt.current;mt.current=s.status,P==="disconnected"&&s.status==="idle"&&he({})},[s.status]);let vt=Vt(async()=>{let P=l.current;if(!P)return!1;let Q=await ei(document.body,P,o.annotations);if(Q.length===0)return!1;let se=await cl(Q,o.annotations,o.styleModifications);return se&&i({type:"MARK_CAPTURED"}),se},[o.annotations,o.styleModifications,i]),en=Vt((P,Q)=>{let se=d.current.get(P)||[];d.current.set(P,[...se,...Q])},[]),Ft=Vt(async()=>{let P=l.current;if(!P)return!1;let Q=o.annotations.filter(je=>{var nt;return((nt=je.status)!=null?nt:"pending")==="pending"}),se=o.spacingTokenChanges.filter(je=>!je.captured);if(Q.length===0&&o.styleModifications.filter(je=>!je.captured).length===0&&se.length===0)return!1;let fe=await ei(document.body,P,o.annotations);if(fe.length===0)return!1;let He=await ti(fe);if(!He)return!1;let Ze=Qr(Q,o.styleModifications,void 0,se.length>0?se:void 0),at=JSON.stringify(Ze),Ne=new Map;for(let je of Q){let nt=d.current.get(je.id);if(nt&&nt.length>0&&Ne.set(je.id,nt),je.groupId){for(let Lt of Q)if(Lt.groupId===je.groupId&&Lt.id!==je.id){let on=d.current.get(Lt.id);on&&on.length>0&&Ne.set(Lt.id,on)}}}try{let je=Zr(o.activeColor),{jobId:nt,threadId:Lt}=await $s(He,at,c,je,u,O.id,Ne.size>0?Ne:void 0,qr());for(let yn of Ne.keys())d.current.delete(yn);let on=Q.map(yn=>yn.id),hn=o.styleModifications.filter(yn=>!yn.captured).map(yn=>yn.selector);he(yn=>y(f({},yn),{[nt]:{annotationIds:on,styleSelectors:hn,color:o.activeColor,threadId:Lt}})),i({type:"MARK_CAPTURED"}),Lt&&on.length>0&&i({type:"SET_ANNOTATION_THREAD",payload:{ids:on,threadId:Lt}});let $n=o.activeColor.match(/oklch\([^)]*\s+([\d.]+)\s*\)/),Yr=(($n!=null&&$n[1]?parseFloat($n[1]):29)+60)%360;return i({type:"SET_COLOR",payload:`oklch(0.628 0.258 ${Yr})`}),!0}catch(je){return console.error("[Pare] Failed to send to bridge:",je),!1}},[o.annotations,o.styleModifications,o.spacingTokenChanges,o.activeColor,i,c,u,O.id]),an=Vt(async(P,Q,se)=>{try{let fe=Zr(o.activeColor),{jobId:He}=await Vs(P,Q,c,fe,u,O.id,se,qr());he(at=>y(f({},at),{[He]:{annotationIds:[],styleSelectors:[],color:o.activeColor,threadId:P}}));let Ze=o.annotations.filter(at=>at.threadId===P&&(at.status==="waiting_input"||at.status==="resolved"||at.status==="needs_review"));Ze.length>0&&(i({type:"SET_ANNOTATION_STATUS",payload:{ids:Ze.map(at=>at.id),status:"in_flight"}}),he(at=>{let Ne=at[He];return Ne?y(f({},at),{[He]:y(f({},Ne),{annotationIds:[...Ne.annotationIds,...Ze.map(je=>je.id)]})}):at})),s.dismissQuestion(P)}catch(fe){console.error("[Pare] Failed to send reply:",fe)}},[o.activeColor,o.annotations,c,s.dismissQuestion,i,u,O.id]),ut=Xt(new Set);Dt(()=>{for(let P of s.pendingQuestions){if(ut.current.has(P.jobId))continue;ut.current.add(P.jobId);let Q=P.annotationIds&&P.annotationIds.length>0?P.annotationIds:void 0;!Q&&P.threadId&&(Q=o.annotations.filter(se=>se.threadId===P.threadId).map(se=>se.id)),Q&&Q.length>0&&i({type:"SET_ANNOTATION_QUESTION",payload:{ids:Q,question:P.question,threadId:P.threadId}})}},[s.pendingQuestions,i,o.annotations]);let Z=zo(()=>{if(s.activeJobId&&s.activeJobId in j)return j[s.activeJobId].color;let P=Object.values(j);return P.length>0?P[P.length-1].color:void 0},[s.activeJobId,j]),Re=Vt(P=>{Ie(P)},[]),Xe=Vt(P=>{if(!P){W(null);return}let Q=xe.current.get(P);Q&&Q.length>0?W(new Set(Q)):W(null)},[]),cn=Vt(async P=>{try{let Q=P?`${c}/cancel?jobId=${P}`:`${c}/cancel`;await fetch(Q,{method:"POST"})}catch(Q){}},[c]);Dt(()=>{o.activeTool==="model"&&ye&&Ie(null)},[o.activeTool]);let qt=Xt(null);Dt(()=>{o.isAnnotating?qt.current&&(Ie(qt.current),qt.current=null):ye&&(qt.current=ye,Ie(null))},[o.isAnnotating]);let pt=zo(()=>{if(!ye)return null;for(let[P,Q]of Object.entries(j))if(Q.threadId===ye)return P;return null},[ye,j]),tt=ye?o.annotations.find(P=>P.threadId===ye):void 0,Ut=tt?o.annotations.indexOf(tt)+1:void 0,[kt,Jn]=Kt(!1),[dn,Pn]=Kt(0),F=Xt(null),ne=Vt(P=>{P?(F.current&&(clearTimeout(F.current),F.current=null),Jn(!0)):F.current=setTimeout(()=>{Jn(!1),F.current=null},150)},[]),oe=Vt(()=>{Pn(P=>P+1),s.clearEvents(),Ie(null),lt(new Set)},[s.clearEvents]);Dt(()=>()=>{F.current&&clearTimeout(F.current)},[]);let Se=zo(()=>({isEnabled:t}),[t]);return t?Ga(Va.Provider,{value:Se,children:[e,$o(da,{state:o,dispatch:i,onScreenshot:vt,inFlightAnnotationIds:Ce,inFlightStyleSelectors:it,inFlightSelectorColors:qe,onAttachImages:en,onReply:s.isConnected?an:void 0,onViewThread:s.isConnected?Re:void 0,onCloseThread:P=>{Ie(null),P&<(Q=>new Set(Q).add(P))},onModelComponentsAdd:s.isConnected?ee:void 0,onModelComponentFocus:s.isConnected?Le:void 0,onModelComponentHover:be,modelComponentNames:X,modelPanelHoveredComponent:de,modelSpacingTokenHover:Fe,highlightedAnnotationIds:dt,focusedThreadAnnotationId:tt==null?void 0:tt.id,externalCanvasRef:l,toolbarRef:a}),$o(_a,{children:Ga(Ha,{children:[$o(Ba,{state:o,dispatch:i,onScreenshot:vt,onSendToClaude:s.isConnected?Ft:void 0,hasActiveJobs:Object.keys(j).length>0||s.activeJobIds.length>0,activeJobColor:Z,onCrosshairHover:ne,onClear:oe,provider:u,onProviderChange:s.isConnected&&w.length>1?H:void 0,availableProviders:w,modelIndex:g,modelCount:v.length,modelLabel:O.label,onModelChange:s.isConnected?U:void 0,onViewThread:s.isConnected?Re:void 0,isThreadPanelOpen:ye!==null,mcpStatus:E,onInstallMcp:s.isConnected?G:void 0,mcpJustInstalled:L,bridgeUrl:c,isBridgeConnected:s.isConnected,modelSelectedComponent:I,modelCanvasHoveredComponent:ge,onModelComponentHover:ue,onSpacingTokenHover:Te,onModifySpacingToken:s.isConnected?Pe:void 0,onDeleteSpacingToken:s.isConnected?Me:void 0,modelRefreshKey:q,onModelComponentAdded:Ae,onModelComponentRemoved:_e,toolbarRef:a}),ye&&s.isConnected&&$o(ja,{threadId:ye,bridgeUrl:c,accentColor:(xt=tt==null?void 0:tt.color)!=null?xt:o.activeColor,isStreaming:pt!==null,streamingEvents:pt?s.events.filter(P=>P.data.jobId===pt):[],onClose:()=>Ie(null),onReply:an,onCancel:pt?()=>cn(pt):void 0,lastError:(Tn=(Je=s.lastErrorByJob)==null?void 0:Je[pt!=null?pt:""])!=null?Tn:void 0,toolbarRef:a,currentModel:O.id,currentProvider:u,annotationNumber:Ut,annotationText:tt==null?void 0:tt.text}),$o(Na,{bridge:s,bridgeUrl:c,inFlightJobs:j,isVisible:kt||s.lastResponseText!==null||s.activeJobIds.length>0,onHover:ne,clearSignal:dn,onReply:an,onViewThread:Re,onCancel:cn,onHoverJob:Xe,isConnected:s.isConnected,dismissedThreadIds:We})]})})]}):$o(Vf,{children:e})}function Gf(){let e=Wf(Va);if(!e)throw new Error("usePopmelt must be used within PopmeltProvider");return e}export{jf as PopmeltProvider,Gf as usePopmelt};
|
|
54
|
+
`,Nf={borderTop:"1px solid rgba(0, 0, 0, 0.12)",display:"flex",alignItems:"center",gap:4,padding:"0 8px 0 10px"};function $a(e){return e.replace(/<resolution>[\s\S]*?<\/resolution>/g,"").replace(/<question>[\s\S]*?<\/question>/g,"").replace(/<plan>[\s\S]*?<\/plan>/g,"").replace(/<review>[\s\S]*?<\/review>/g,"").trim()}function Wa(e){return new Date(e).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"})}var us=["reviewing","considering","thinking","zhuzhing","iterating","tweaking","reflecting","noodling","pondering","finessing","polishing","riffing"],Hf=3e3,Ff=250;function _f({color:e}){let[t,n]=mo(0),[r,o]=mo(()=>Math.floor(Math.random()*us.length));return Un(()=>{let i=setInterval(()=>n(l=>(l+1)%2),Ff),s=setInterval(()=>o(l=>(l+1)%us.length),Hf);return()=>{clearInterval(i),clearInterval(s)}},[]),xt("span",{style:{display:"inline-flex",alignItems:"center",gap:4},children:[He("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:e,style:{verticalAlign:"middle",flexShrink:0},children:t===1?xt(Wr,{children:[He("circle",{cx:"7",cy:"7",r:"2"}),He("circle",{cx:"17",cy:"7",r:"2"}),He("circle",{cx:"7",cy:"17",r:"2"}),He("circle",{cx:"17",cy:"17",r:"2"})]}):xt(Wr,{children:[He("circle",{cx:"12",cy:"6",r:"2"}),He("circle",{cx:"6",cy:"12",r:"2"}),He("circle",{cx:"18",cy:"12",r:"2"}),He("circle",{cx:"12",cy:"18",r:"2"})]})}),He("span",{style:{fontSize:11,color:"#9ca3af",fontStyle:"italic"},children:us[r]})]})}function zf(e){var o;let t=String(e.data.tool||""),n=e.data.file?String(e.data.file):null,r=n?(o=n.split("/").pop())!=null?o:n:null;switch(t){case"Read":return r?`Reading ${r}`:"Reading file";case"Edit":return r?`Editing ${r}`:"Editing file";case"Write":return r?`Writing ${r}`:"Writing file";case"Bash":return"Running command";case"Glob":return"Searching files";case"Grep":return"Searching code";case"WebFetch":return"Fetching page";case"WebSearch":return"Searching web";default:return t?`Using ${t}`:null}}var $f=new Set(["Read","Glob","Grep","WebFetch","WebSearch"]),Wf=new Set(["Edit","Write","Bash"]);function Yf(e){let t=0,n=!1;for(let r of e){if(r.type!=="tool_use")continue;let o=String(r.data.tool||"");Wf.has(o)?n=!0:$f.has(o)&&t++}return!n&&t>=3?"researching":n?"applying changes":null}function jf(e){let t=[];for(let n of e)if(n.type==="tool_use"){let r=zf(n);r&&t.push({kind:"tool",label:r})}else if(n.type==="delta"){let r=String(n.data.text||"");if(!r)continue;let o=t[t.length-1];o&&o.kind==="text"?o.text+=r:t.push({kind:"text",text:r})}else if(n.type==="thinking"){let r=String(n.data.text||"");if(!r)continue;let o=t[t.length-1];o&&o.kind==="thinking"?o.text+=r:t.push({kind:"thinking",text:r})}return t}function Va({threadId:e,bridgeUrl:t,accentColor:n,isStreaming:r,streamingEvents:o,onClose:i,onReply:s,onCancel:l,lastError:a,onMouseEnter:c,toolbarRef:d,currentModel:u,currentProvider:p,annotationNumber:g,annotationText:M}){let[C,b]=mo([]),[E,D]=mo(!0),[A,R]=mo(""),[w,O]=mo([]),K=Hn(null),H=Hn(null),$=Hn(null),q=Hn(r),v=Hn(ds()),I=Hn({x:0,y:0}),Q=Hn(!1),ge=Hn({x:0,y:0,offsetX:0,offsetY:0}),be=Hn(!1),[,ue]=mo(0);Un(()=>{try{let Z=localStorage.getItem(cs);if(Z){let pe=JSON.parse(Z);typeof pe.top=="number"&&typeof pe.left=="number"&&(be.current=!0,v.current={top:pe.top,left:pe.left},ue(he=>he+1))}}catch(Z){}},[]),Un(()=>{let Z=()=>{be.current||(v.current=ds()),ue(pe=>pe+1)};return window.addEventListener("resize",Z,{passive:!0}),()=>window.removeEventListener("resize",Z)},[]),Un(()=>{let Z=$.current;if(!Z)return;let pe=We=>{We.button!==0||We.target.closest("button")||(We.preventDefault(),We.stopPropagation(),Q.current=!0,ge.current={x:We.clientX,y:We.clientY,offsetX:I.current.x,offsetY:I.current.y})},he=We=>{if(!Q.current)return;let it=ge.current,lt=it.offsetX+(We.clientX-it.x),j=it.offsetY+(We.clientY-it.y),re=Math.max(Fo,Math.min(window.innerWidth-ps-Fo,v.current.left+lt)),V=Math.max(Fo,v.current.top+j);I.current={x:re-v.current.left,y:V-v.current.top};let me=H.current;me&&(me.style.top=`${V}px`,me.style.left=`${re}px`,me.style.height=`${za(V,re,d==null?void 0:d.current)}px`)},fe=()=>{if(!Q.current)return;let We=v.current.top+I.current.y,it=v.current.left+I.current.x;v.current={top:We,left:it},I.current={x:0,y:0},be.current=!0;try{localStorage.setItem(cs,JSON.stringify({top:We,left:it}))}catch(lt){}Q.current=!1},Ie=()=>{v.current=ds(),I.current={x:0,y:0},be.current=!1;try{localStorage.removeItem(cs)}catch(We){}ue(We=>We+1)};return Z.addEventListener("mousedown",pe),window.addEventListener("mousemove",he),window.addEventListener("mouseup",fe),Z.addEventListener("dblclick",Ie),()=>{Z.removeEventListener("mousedown",pe),window.removeEventListener("mousemove",he),window.removeEventListener("mouseup",fe),Z.removeEventListener("dblclick",Ie)}},[]);let ce=$r(()=>{fetch(`${t}/thread/${e}`).then(Z=>Z.json()).then(Z=>{var pe;b((pe=Z.messages)!=null?pe:[]),D(!1)}).catch(()=>D(!1))},[t,e]);Un(()=>{D(!0),ce()},[ce]),Un(()=>{q.current&&!r&&ce(),q.current=r},[r,ce]);let Fe=o?jf(o):[],Te=o?Yf(o):null;Un(()=>{K.current&&(K.current.scrollTop=K.current.scrollHeight)},[C,Fe.length,r]),Un(()=>{let Z=pe=>{pe.key==="Escape"&&(pe.stopPropagation(),i())};return document.addEventListener("keydown",Z),()=>document.removeEventListener("keydown",Z)},[i]);let oe=$r(()=>{if(!A.trim()||!s)return;let Z=A.trim(),pe=w.length>0?w:void 0;b(he=>[...he,{role:"human",timestamp:Date.now(),jobId:"pending",replyToQuestion:pe?`${Z} [${pe.length} image${pe.length>1?"s":""}]`:Z}]),s(e,Z,pe),R(""),O([])},[A,w,e,s]),Le=$r(Z=>{let pe=Z.clipboardData.items,he=[];for(let fe=0;fe<pe.length;fe++){let Ie=pe[fe];if(Ie.type.startsWith("image/")){let We=Ie.getAsFile();We&&he.push(We)}}he.length>0&&(Z.preventDefault(),O(fe=>[...fe,...he]))},[]),Ae=$r(Z=>{Z.key==="Enter"&&(Z.metaKey||Z.ctrlKey)&&(Z.preventDefault(),oe())},[oe]),_e=v.current.top+I.current.y,Pe=v.current.left+I.current.x,Me=za(_e,Pe,d==null?void 0:d.current);return xt(Wr,{children:[He("div",{"data-devtools":"thread-panel-backdrop",onMouseDown:Z=>{Z.target===Z.currentTarget&&i()},style:{position:"fixed",inset:0,zIndex:9999}}),xt("div",{ref:H,style:y(f({},Pf),{height:Me,position:"fixed",top:_e,left:Pe,zIndex:1e4}),"data-devtools":"thread-panel",onMouseEnter:c,children:[(()=>{let pe=`<svg xmlns='http://www.w3.org/2000/svg' width='5' height='5'><path d='M-1,1 l2,-2 M0,5 l5,-5 M4,6 l2,-2' stroke='${r?n:"rgb(0,0,0)"}' stroke-width='.75'/></svg>`,he=`url("data:image/svg+xml,${encodeURIComponent(pe)}")`;return xt(Wr,{children:[He("style",{children:`@keyframes popmelt-border-march { to { background-position: 0 -5px; } }
|
|
55
|
+
[data-popmelt-reply]::placeholder { opacity: 0.35; }`}),He("div",{style:f({position:"absolute",inset:-3,padding:5,backgroundImage:he,backgroundSize:"5px 5px",WebkitMask:"linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) border-box",WebkitMaskComposite:"xor",mask:"linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) border-box",maskComposite:"exclude",pointerEvents:"none"},r&&{animation:"popmelt-border-march 0.8s linear infinite"})})]})})(),xt("div",{style:{display:"flex",flexDirection:"column",overflow:"hidden",flex:1,minHeight:0},children:[xt("div",{ref:$,style:y(f({},Bf),{backgroundColor:n,color:"#ffffff",cursor:"grab",userSelect:"none",WebkitUserSelect:"none"}),children:[xt("span",{style:{display:"flex",alignItems:"center",gap:6,minWidth:0},children:[He("span",{style:{flexShrink:0},children:g?`${g}.`:"Conversation"}),M&&He("span",{style:{opacity:.7,fontSize:11,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",minWidth:0},children:M})]}),He("button",{onClick:i,style:{background:"none",border:"none",cursor:"pointer",fontSize:16,color:"#ffffff",padding:"0 4px",lineHeight:1},children:"\xD7"})]}),He("style",{dangerouslySetInnerHTML:{__html:Df}}),xt("div",{ref:K,style:Of,"data-devtools":"thread-panel-messages",children:[E&&He("div",{style:{padding:16,color:"#9ca3af",textAlign:"center"},children:"Loading..."}),!E&&C.length===0&&!r&&He("div",{style:{padding:16,color:"#9ca3af",textAlign:"center"},children:"No messages yet."}),C.map((Z,pe)=>{let he=Z.role==="human";if(Z.cancelled||Z.error)return xt("div",{style:{padding:"8px 16px",borderBottom:"1px solid rgba(0, 0, 0, 0.04)",opacity:pe===C.length-1?1:.5},children:[xt("div",{style:{display:"flex",alignItems:"center",gap:4},children:[He("span",{style:{fontSize:11,color:Z.error?"#dc2626":"#9ca3af",fontStyle:"italic"},children:Z.error?"Error":"Cancelled"}),He("span",{style:{fontSize:10,color:"#9ca3af",marginLeft:"auto"},children:Wa(Z.timestamp)})]}),Z.error&&He("div",{style:{fontSize:12,color:"#6b7280",marginTop:4,lineHeight:1.4},children:Z.error})]},`${Z.jobId}-${pe}`);let fe=he?Z.replyToQuestion||Z.feedbackSummary||"(annotation)":$a(Z.responseText||""),Ie=he?void 0:Z.question,We=!he&&Z.resolutions&&Z.resolutions.length>0,it=!he&&Z.toolsUsed&&Z.toolsUsed.length>0;if(!fe&&!Ie&&!We)return null;let lt=pe===C.length-1;return xt("div",{style:{padding:"8px 16px",borderBottom:"1px solid rgba(0, 0, 0, 0.04)",opacity:lt?1:.5},children:[xt("div",{style:{display:"flex",alignItems:"center",gap:4,marginBottom:4},children:[!he&&He(Zi,{provider:Z.provider,size:11,style:{color:"#6b7280"}}),He("span",{style:{fontWeight:600,fontSize:11,color:he?n:"#6b7280"},children:he?"You":Qi(Z.model,Z.provider)}),He("span",{style:{fontSize:10,color:"#9ca3af",marginLeft:"auto"},children:Wa(Z.timestamp)})]}),fe&&He("div",{style:{lineHeight:1.5,wordBreak:"break-word"},children:he?fe:zr(fe)}),Ie&&He("div",{style:{marginTop:fe?4:0,lineHeight:1.5,wordBreak:"break-word"},children:zr(Ie)}),(it||We)&&xt("div",{style:{marginTop:fe||Ie?6:0,padding:"4px 8px",backgroundColor:"rgba(0, 0, 0, 0.03)",fontSize:11,lineHeight:1.5,color:"#6b7280"},children:[it&&He("div",{style:{fontFamily:"ui-monospace, SFMono-Regular, Menlo, monospace",fontSize:10},children:Z.toolsUsed.map((j,re)=>He("div",{children:j},re))}),We&&Z.resolutions.map((j,re)=>{var xe;let V=(xe=j.finalScope)!=null?xe:j.inferredScope,me=V?`${V.breadth} \xB7 ${V.target}`:null;return xt("div",{style:{marginTop:it?4:0},children:[He("span",{style:{color:j.status==="resolved"?"#10b981":"#f59e0b"},children:j.status==="resolved"?"Done":"Needs review"}),me&&He("span",{style:{marginLeft:6,padding:"1px 5px",backgroundColor:"rgba(0, 0, 0, 0.06)",fontSize:10,fontFamily:"ui-monospace, SFMono-Regular, Menlo, monospace"},children:me}),j.summary?` \u2014 ${j.summary}`:""]},re)})]})]},`${Z.jobId}-${pe}`)}),r&&xt("div",{style:{padding:"8px 16px",borderBottom:"1px solid rgba(0, 0, 0, 0.04)"},children:[xt("div",{style:{display:"flex",alignItems:"center",gap:4,marginBottom:4},children:[He(Zi,{provider:p,size:11,style:{color:"#6b7280"}}),He("span",{style:{fontWeight:600,fontSize:11,color:"#6b7280"},children:Qi(u,p)}),Te&&He("span",{style:{fontSize:10,color:"#b0b7c3",fontStyle:"italic"},children:Te}),xt("span",{style:{marginLeft:"auto",display:"flex",alignItems:"center",gap:6},children:[He(_f,{color:n}),l&&He("button",{onClick:l,style:{background:"none",border:"1px solid rgba(0,0,0,0.1)",color:"#6b7280",fontSize:10,padding:"2px 8px",cursor:"pointer",fontFamily:"inherit"},children:"Cancel"})]})]}),Fe.map((Z,pe)=>{if(Z.kind==="tool")return He("div",{style:{paddingLeft:12,fontSize:11,color:"#9ca3af",fontFamily:"ui-monospace, SFMono-Regular, Menlo, monospace",lineHeight:1.6},children:Z.label},pe);if(Z.kind==="thinking")return He("div",{style:{paddingLeft:12,marginTop:2,marginBottom:2,fontSize:11,color:"#9ca3af",fontStyle:"italic",lineHeight:1.4,whiteSpace:"pre-wrap",wordBreak:"break-word",maxHeight:80,overflowY:"auto"},children:Z.text},pe);let he=$a(Z.text);return he?He("div",{style:{paddingLeft:12,marginTop:2,marginBottom:2,lineHeight:1.5,wordBreak:"break-word"},children:zr(he)},pe):null})]})]}),!r&&a&&xt("div",{style:{padding:"8px 16px",backgroundColor:"rgba(239, 68, 68, 0.06)",borderBottom:"1px solid rgba(0,0,0,0.04)",fontSize:11,color:"#dc2626",lineHeight:1.4},children:[He("span",{style:{fontWeight:600},children:"Error: "}),a]}),s&&xt("div",{style:{flexShrink:0,position:"relative"},children:[w.length>0&&He("div",{style:{position:"absolute",bottom:"100%",display:"flex",gap:4,padding:"6px 5px 5px",flexWrap:"wrap"},children:w.map((Z,pe)=>xt("span",{onClick:()=>O(he=>he.filter((fe,Ie)=>Ie!==pe)),onMouseEnter:he=>{let fe=he.currentTarget.querySelector("[data-chip-x]");fe&&(fe.style.color="#ef4444")},onMouseLeave:he=>{let fe=he.currentTarget.querySelector("[data-chip-x]");fe&&(fe.style.color="#9ca3af")},style:{display:"inline-flex",alignItems:"center",gap:5,fontSize:10,color:"#fff",backgroundColor:"rgba(0,0,0,1)",backdropFilter:"blur(4px)",padding:"2px 5px 2px 8px",cursor:"pointer"},children:["image ",pe+1,He("span",{"data-chip-x":!0,style:{fontSize:12,lineHeight:1,color:"#9ca3af"},children:"\xD7"})]},pe))}),xt("div",{style:Nf,children:[He("input",{"data-popmelt-reply":!0,value:A,onChange:Z=>R(Z.target.value),onKeyDown:Ae,onPaste:Le,placeholder:"Reply here (cmd + enter to send)",style:{flex:1,minWidth:0,minHeight:44,padding:"0 4px",fontSize:12,fontFamily:Ft,backgroundColor:"transparent",color:"#1f2937",border:"none",outline:"none",lineHeight:"40px",boxSizing:"border-box"}}),He("button",{onClick:oe,disabled:!A.trim(),style:{display:"flex",alignItems:"center",justifyContent:"center",width:28,height:28,padding:0,background:"none",border:"none",cursor:A.trim()?"pointer":"default",color:A.trim()?"#1f2937":"rgba(0,0,0,0.2)",flexShrink:0},children:xt("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:[He("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"}),He("path",{d:"M6 12h16"})]})})]})]})]})]})]})}import{Fragment as Kf,jsx as zo,jsxs as Ua}from"react/jsx-runtime";var Xa=Gf(null),fs="devtools-provider",gs="devtools-model",ms="devtools-open-thread-id";function Uf(e,t,n){let r=e==="codex"?er:Qo;return Math.min(n,(t==="codex"?er:Qo).length-1)}function Xf({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"}){var kn,F,ee,U,Se;let[o,i]=sl(),s=rl(n),l=Ut(null),a=Ut(null),c=(kn=nl())!=null?kn:n,d=Ut(new Map),[u,p]=Xt(()=>typeof window=="undefined"?"claude":localStorage.getItem(fs)||"claude"),[g,M]=Xt(()=>{if(typeof window=="undefined")return 0;let S=localStorage.getItem(gs);return S&&parseInt(S,10)||0}),[C,b]=Xt([]),[E,D]=Xt({}),[A,R]=Xt(!1);Bt(()=>{s.isConnected&&Fs(c).then(S=>{if(!S)return;let P=Object.entries(S.providers).filter(([,Ne])=>Ne.available).map(([Ne])=>Ne);P.length>0&&b(P);let ne={};for(let[Ne,Ue]of Object.entries(S.providers))Ue.mcp&&(ne[Ne]=Ue.mcp);D(ne),Object.values(ne).every(Ne=>Ne.found)&&R(!1)})},[s.isConnected,s.capabilitiesVersion,c]),Bt(()=>{if(C.length>0&&!C.includes(u)){let S=C[0];p(S),localStorage.setItem(fs,S)}},[C,u]);let w=u==="codex"?er:Qo,O=(F=w[g])!=null?F:w[0],K=jt(S=>{let P=u;p(S),localStorage.setItem(fs,S);let ne=Uf(P,S,g);M(ne),localStorage.setItem(gs,String(ne))},[u,g]),H=jt(S=>{M(S),localStorage.setItem(gs,String(S))},[]),$=jt(async()=>{let S=await $s(c);if(!S)return;let P={};for(let[ne,Ee]of Object.entries(S.capabilities.providers))Ee.mcp&&(P[ne]=Ee.mcp);D(P),S.results.some(ne=>ne.installed)&&R(!0)},[c]),[q,v]=Xt(new Set),[I,Q]=Xt(null),[ge,be]=Xt(null),[ue,ce]=Xt(null),[Fe,Te]=Xt(null);Bt(()=>{s.isConnected&&xo(c).then(S=>{S!=null&&S.components&&v(new Set(Object.keys(S.components)))})},[s.isConnected,c]);let oe=jt(async S=>{let P=[];for(let ne of S)try{(await Ws(ne,c)).added&&P.push(ne)}catch(Ee){console.error("[Popmelt] Failed to add component to model:",ne,Ee)}P.length>0&&(v(ne=>{let Ee=new Set(ne);for(let Ne of P)Ee.add(Ne);return Ee}),Q(P[P.length-1]))},[c]),Le=jt(S=>{Q(S)},[]),Ae=jt(()=>{xo(c).then(S=>{S!=null&&S.components&&v(new Set(Object.keys(S.components)))})},[c]),_e=jt(async S=>{try{(await Ys(S,c)).removed&&v(ne=>{let Ee=new Set(ne);return Ee.delete(S),Ee})}catch(P){console.error("[Popmelt] Failed to remove component from model:",P)}},[c]),Pe=jt((S,P)=>{i({type:"MODIFY_SPACING_TOKEN",payload:S}),i({type:"ADD_SPACING_TOKEN_CHANGE",payload:P})},[i]),Me=jt((S,P)=>{i({type:"DELETE_SPACING_TOKEN",payload:{tokenPath:S,originalValue:P}})},[i]),[Z,pe]=Xt(0),he=Ut([]);Bt(()=>{let S=he.current,P=o.spacingTokenMods;he.current=P;let ne=new Map(S.map(Ue=>[Ue.tokenPath,Ue])),Ee=new Map(P.map(Ue=>[Ue.tokenPath,Ue])),Ne=!1;for(let[Ue,ot]of Ee){let Oe=ne.get(Ue);if(!(Oe&&Oe.currentValue===ot.currentValue)){Ne=!0,ot.currentValue==="__deleted__"?js(Ue,c).catch(ye=>console.error("[Popmelt] Failed to sync token delete:",ye)):Ur(Ue,ot.currentValue,c).catch(ye=>console.error("[Popmelt] Failed to sync token update:",ye));for(let ye of ot.targets){let Ye=document.querySelector(ye.selector);if(Ye)if(ot.currentValue==="__deleted__")Ye.style.removeProperty(ye.property);else{let Lt=ot.currentPx;Lt>0&&Ye.style.setProperty(ye.property,`${Lt}px`,"important")}}}}for(let[Ue,ot]of ne)if(!Ee.has(Ue)){Ne=!0,Ur(Ue,ot.originalValue,c).catch(Oe=>console.error("[Popmelt] Failed to restore token on undo:",Oe));for(let Oe of ot.targets){let ye=document.querySelector(Oe.selector);ye&&ye.style.removeProperty(Oe.property)}}Ne&&pe(Ue=>Ue+1)},[o.spacingTokenMods,c]);let[fe,Ie]=Xt(()=>typeof window=="undefined"?null:localStorage.getItem(ms)||null),[We,it]=Xt(new Set),[lt,j]=Xt(null);Bt(()=>{fe?localStorage.setItem(ms,fe):localStorage.removeItem(ms)},[fe]);let re="popmelt-in-flight-jobs",[V,me]=Xt(()=>{try{let S=sessionStorage.getItem(re);return S?JSON.parse(S):{}}catch(S){return{}}});Bt(()=>{try{Object.keys(V).length>0?sessionStorage.setItem(re,JSON.stringify(V)):sessionStorage.removeItem(re)}catch(S){}},[V]);let xe=Ut(new Map);Bt(()=>{for(let[S,P]of Object.entries(V))P.annotationIds.length>0&&xe.current.set(S,P.annotationIds)},[V]);let Be=Ut(!1);Bt(()=>{if(Be.current||o.annotations.length===0)return;Be.current=!0;let S=new Set;for(let ne of Object.values(V))for(let Ee of ne.annotationIds)S.add(Ee);let P=o.annotations.filter(ne=>S.has(ne.id)?!1:!!(ne.status==="in_flight"||(ne.status==="pending"||!ne.status)&&(ne.captured||ne.threadId))).map(ne=>ne.id);P.length>0&&i({type:"SET_ANNOTATION_STATUS",payload:{ids:P,status:"dismissed"}})},[o.annotations,V,i]);let we=_o(()=>{let S=new Set;for(let P of Object.values(V))for(let ne of P.annotationIds)S.add(ne);return S},[V]),nt=_o(()=>{let S=new Set;for(let P of Object.values(V))for(let ne of P.styleSelectors)S.add(ne);return S},[V]),Ke=_o(()=>{let S=new Map;for(let P of Object.values(V)){for(let ne of P.styleSelectors)S.set(ne,P.color);for(let ne of P.annotationIds){let Ee=o.annotations.find(Ne=>Ne.id===ne);if(Ee&&(Ee.linkedSelector&&S.set(Ee.linkedSelector,P.color),Ee.groupId))for(let Ne of o.annotations)Ne.groupId===Ee.groupId&&Ne.linkedSelector&&S.set(Ne.linkedSelector,P.color)}}return S},[V,o.annotations]),wt=Ut(o.annotations);wt.current=o.annotations;let Ot=Ut(o.styleModifications);Ot.current=o.styleModifications;let Ze=Ut(V);Ze.current=V,Bt(()=>{let S=null,P=()=>{var Oe,ye;if(Object.keys(Ze.current).length>0)return;let Ee=wt.current,Ne=Ot.current,Ue=[],ot=[];for(let Ye of Ee){if(!Ye.linkedSelector||!Ye.linkedSelector.startsWith("[data-pm=")||Ye.captured||Ye.status&&Ye.status!=="pending")continue;let Lt=document.querySelector(Ye.linkedSelector);!Lt&&((ye=(Oe=Ye.elements)==null?void 0:Oe[0])!=null&&ye.selector)&&(Lt=document.querySelector(Ye.elements[0].selector)),Lt||Ue.push(Ye.linkedSelector)}for(let Ye of Ne)document.querySelector(Ye.selector)||ot.push(Ye.selector);(Ue.length>0||ot.length>0)&&i({type:"CLEANUP_ORPHANED",payload:{linkedSelectors:Ue,styleSelectors:ot}})},ne=new MutationObserver(Ee=>{Ee.some(Ne=>Ne.removedNodes.length>0)&&(S&&clearTimeout(S),S=setTimeout(P,3e3))});return ne.observe(document.body,{childList:!0,subtree:!0}),()=>{ne.disconnect(),S&&clearTimeout(S)}},[i]),Bt(()=>{s.lastCompletedJobId&&s.lastCompletedJobId in V&&me(S=>{var Ee;let Ne=S,{[Ee=s.lastCompletedJobId]:P}=Ne;return zn(Ne,[dr(Ee)])})},[s.lastCompletedJobId]);let It=Ut(!1);Bt(()=>{if(!s.isConnected){It.current=!1;return}if(It.current||(It.current=!0,Object.keys(V).length===0))return;let P=setTimeout(()=>{bo(c).then(ne=>{var Ne;if(!ne)return;let Ee=new Set(((Ne=ne.activeJobs)!=null?Ne:[]).map(Ue=>Ue.id));me(Ue=>{let ot=Object.keys(Ue).filter(ye=>!Ee.has(ye));if(ot.length===0)return Ue;let Oe=f({},Ue);for(let ye of ot)delete Oe[ye];return Oe})})},500);return()=>clearTimeout(P)},[s.isConnected,c]);let Dt=Ut(new Set);Bt(()=>{let S=s.events.filter(P=>P.type==="done"&&P.data.resolutions);for(let P of S){let ne=P.data.jobId;Dt.current.has(ne)||(Dt.current.add(ne),Array.isArray(P.data.resolutions)&&i({type:"APPLY_RESOLUTIONS",payload:{resolutions:P.data.resolutions,threadId:P.data.threadId}}))}},[s.events,i]);let mt=Ut(new Set);Bt(()=>{let S=s.events.filter(P=>P.type==="error"&&P.data.cancelled);for(let P of S){let ne=P.data.jobId;if(!ne||mt.current.has(ne))continue;mt.current.add(ne);let Ee=V[ne];Ee&&Ee.annotationIds.length>0&&i({type:"SET_ANNOTATION_STATUS",payload:{ids:Ee.annotationIds,status:"dismissed"}})}},[s.events,V,i]);let vt=Ut(0);Bt(()=>{let S=s.incrementalResolutions;if(S.length<=vt.current)return;let P=S.slice(vt.current);vt.current=S.length,i({type:"APPLY_RESOLUTIONS",payload:{resolutions:P}})},[s.incrementalResolutions,i]),Bt(()=>{s.incrementalResolutions.length===0&&(vt.current=0)},[s.incrementalResolutions.length]);let pt=Ut(s.status);Bt(()=>{let S=pt.current;pt.current=s.status,S==="disconnected"&&s.status==="idle"&&me({})},[s.status]);let ht=jt(async()=>{let S=l.current;if(!S)return!1;let P=await ei(document.body,S,o.annotations);if(P.length===0)return!1;let ne=await al(P,o.annotations,o.styleModifications);return ne&&i({type:"MARK_CAPTURED"}),ne},[o.annotations,o.styleModifications,i]),Zt=jt((S,P)=>{let ne=d.current.get(S)||[];d.current.set(S,[...ne,...P])},[]),Nt=jt(async()=>{let S=l.current;if(!S)return!1;let P=o.annotations.filter(ye=>{var Ye;return((Ye=ye.status)!=null?Ye:"pending")==="pending"}),ne=o.spacingTokenChanges.filter(ye=>!ye.captured);if(P.length===0&&o.styleModifications.filter(ye=>!ye.captured).length===0&&ne.length===0)return!1;let Ee=await ei(document.body,S,o.annotations);if(Ee.length===0)return!1;let Ne=await ti(Ee);if(!Ne)return!1;let Ue=Qr(P,o.styleModifications,void 0,ne.length>0?ne:void 0),ot=JSON.stringify(Ue),Oe=new Map;for(let ye of P){let Ye=d.current.get(ye.id);if(Ye&&Ye.length>0&&Oe.set(ye.id,Ye),ye.groupId){for(let Lt of P)if(Lt.groupId===ye.groupId&&Lt.id!==ye.id){let nn=d.current.get(Lt.id);nn&&nn.length>0&&Oe.set(Lt.id,nn)}}}try{let ye=Zr(o.activeColor),{jobId:Ye,threadId:Lt}=await zs(Ne,ot,c,ye,u,O.id,Oe.size>0?Oe:void 0,qr());for(let yn of Oe.keys())d.current.delete(yn);let nn=P.map(yn=>yn.id),hn=o.styleModifications.filter(yn=>!yn.captured).map(yn=>yn.selector);me(yn=>y(f({},yn),{[Ye]:{annotationIds:nn,styleSelectors:hn,color:o.activeColor,threadId:Lt}})),i({type:"MARK_CAPTURED"}),Lt&&nn.length>0&&i({type:"SET_ANNOTATION_THREAD",payload:{ids:nn,threadId:Lt}});let Fn=o.activeColor.match(/oklch\([^)]*\s+([\d.]+)\s*\)/),Yr=((Fn!=null&&Fn[1]?parseFloat(Fn[1]):29)+60)%360;return i({type:"SET_COLOR",payload:`oklch(0.628 0.258 ${Yr})`}),!0}catch(ye){return console.error("[Pare] Failed to send to bridge:",ye),!1}},[o.annotations,o.styleModifications,o.spacingTokenChanges,o.activeColor,i,c,u,O.id]),ln=jt(async(S,P,ne)=>{try{let Ee=Zr(o.activeColor),{jobId:Ne}=await Gs(S,P,c,Ee,u,O.id,ne,qr());me(ot=>y(f({},ot),{[Ne]:{annotationIds:[],styleSelectors:[],color:o.activeColor,threadId:S}}));let Ue=o.annotations.filter(ot=>ot.threadId===S&&(ot.status==="waiting_input"||ot.status==="resolved"||ot.status==="needs_review"));Ue.length>0&&(i({type:"SET_ANNOTATION_STATUS",payload:{ids:Ue.map(ot=>ot.id),status:"in_flight"}}),me(ot=>{let Oe=ot[Ne];return Oe?y(f({},ot),{[Ne]:y(f({},Oe),{annotationIds:[...Oe.annotationIds,...Ue.map(ye=>ye.id)]})}):ot})),s.dismissQuestion(S)}catch(Ee){console.error("[Pare] Failed to send reply:",Ee)}},[o.activeColor,o.annotations,c,s.dismissQuestion,i,u,O.id]),at=Ut(new Set);Bt(()=>{for(let S of s.pendingQuestions){if(at.current.has(S.jobId))continue;at.current.add(S.jobId);let P=S.annotationIds&&S.annotationIds.length>0?S.annotationIds:void 0;!P&&S.threadId&&(P=o.annotations.filter(ne=>ne.threadId===S.threadId).map(ne=>ne.id)),P&&P.length>0&&i({type:"SET_ANNOTATION_QUESTION",payload:{ids:P,question:S.question,threadId:S.threadId}})}},[s.pendingQuestions,i,o.annotations]);let te=_o(()=>{if(s.activeJobId&&s.activeJobId in V)return V[s.activeJobId].color;let S=Object.values(V);return S.length>0?S[S.length-1].color:void 0},[s.activeJobId,V]),Re=jt(S=>{Ie(S)},[]),Xe=jt(S=>{if(!S){j(null);return}let P=xe.current.get(S);P&&P.length>0?j(new Set(P)):j(null)},[]),an=jt(async S=>{try{let P=S?`${c}/cancel?jobId=${S}`:`${c}/cancel`;await fetch(P,{method:"POST"})}catch(P){}},[c]);Bt(()=>{o.activeTool==="model"&&fe&&Ie(null)},[o.activeTool]);let Jt=Ut(null);Bt(()=>{o.isAnnotating?Jt.current&&(Ie(Jt.current),Jt.current=null):fe&&(Jt.current=fe,Ie(null))},[o.isAnnotating]);let ct=_o(()=>{if(!fe)return null;for(let[S,P]of Object.entries(V))if(P.threadId===fe)return S;return null},[fe,V]),Qe=fe?o.annotations.find(S=>S.threadId===fe):void 0,Gt=Qe?o.annotations.indexOf(Qe)+1:void 0,[Ct,Xn]=Xt(!1),[cn,$o]=Xt(0),yt=Ut(null),Ln=jt(S=>{S?(yt.current&&(clearTimeout(yt.current),yt.current=null),Xn(!0)):yt.current=setTimeout(()=>{Xn(!1),yt.current=null},150)},[]),tn=jt(()=>{$o(S=>S+1),s.clearEvents(),Ie(null),it(new Set)},[s.clearEvents]);Bt(()=>()=>{yt.current&&clearTimeout(yt.current)},[]);let Rt=_o(()=>({isEnabled:t}),[t]);return t?Ua(Xa.Provider,{value:Rt,children:[e,zo(ca,{state:o,dispatch:i,onScreenshot:ht,inFlightAnnotationIds:we,inFlightStyleSelectors:nt,inFlightSelectorColors:Ke,onAttachImages:Zt,onReply:s.isConnected?ln:void 0,onViewThread:s.isConnected?Re:void 0,onCloseThread:S=>{Ie(null),S&&it(P=>new Set(P).add(S))},onModelComponentsAdd:s.isConnected?oe:void 0,onModelComponentFocus:s.isConnected?Le:void 0,onModelComponentHover:be,modelComponentNames:q,modelPanelHoveredComponent:ue,modelSpacingTokenHover:Fe,highlightedAnnotationIds:lt,focusedThreadAnnotationId:Qe==null?void 0:Qe.id,externalCanvasRef:l,toolbarRef:a}),zo(Fa,{children:Ua(Na,{children:[zo(Pa,{state:o,dispatch:i,onScreenshot:ht,onSendToClaude:s.isConnected?Nt:void 0,hasActiveJobs:Object.keys(V).length>0||s.activeJobIds.length>0,activeJobColor:te,onCrosshairHover:Ln,onClear:tn,provider:u,onProviderChange:s.isConnected&&C.length>1?K:void 0,availableProviders:C,modelIndex:g,modelCount:w.length,modelLabel:O.label,onModelChange:s.isConnected?H:void 0,onViewThread:s.isConnected?Re:void 0,isThreadPanelOpen:fe!==null,mcpStatus:E,onInstallMcp:s.isConnected?$:void 0,mcpJustInstalled:A,bridgeUrl:c,isBridgeConnected:s.isConnected,modelSelectedComponent:I,modelCanvasHoveredComponent:ge,onModelComponentHover:ce,onSpacingTokenHover:Te,onModifySpacingToken:s.isConnected?Pe:void 0,onDeleteSpacingToken:s.isConnected?Me:void 0,modelRefreshKey:Z,onModelComponentAdded:Ae,onModelComponentRemoved:_e,toolbarRef:a}),fe&&s.isConnected&&zo(Va,{threadId:fe,bridgeUrl:c,accentColor:(ee=Qe==null?void 0:Qe.color)!=null?ee:o.activeColor,isStreaming:ct!==null,streamingEvents:ct?s.events.filter(S=>S.data.jobId===ct):[],onClose:()=>Ie(null),onReply:ln,onCancel:ct?()=>an(ct):void 0,lastError:(Se=(U=s.lastErrorByJob)==null?void 0:U[ct!=null?ct:""])!=null?Se:void 0,toolbarRef:a,currentModel:O.id,currentProvider:u,annotationNumber:Gt,annotationText:Qe==null?void 0:Qe.text}),zo(Da,{bridge:s,bridgeUrl:c,inFlightJobs:V,isVisible:Ct||s.lastResponseText!==null||s.activeJobIds.length>0,onHover:Ln,clearSignal:cn,onReply:ln,onViewThread:Re,onCancel:an,onHoverJob:Xe,isConnected:s.isConnected,dismissedThreadIds:We})]})})]}):zo(Kf,{children:e})}function Jf(){let e=Vf(Xa);if(!e)throw new Error("usePopmelt must be used within PopmeltProvider");return e}export{Xf as PopmeltProvider,Jf as usePopmelt};
|