@popmelt.com/core 0.5.22 → 0.6.1
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/README.md +51 -36
- package/dist/cli.mjs +38 -35
- package/dist/index.d.mts +6 -1
- package/dist/index.mjs +19 -21
- package/dist/plugin-astro.mjs +1 -1
- package/dist/plugin-vite.mjs +1 -1
- package/dist/server-RSWDAN3X.mjs +130 -0
- package/dist/server.mjs +37 -34
- package/package.json +1 -1
- package/dist/server-CNHKE6KT.mjs +0 -127
package/dist/index.mjs
CHANGED
|
@@ -1,25 +1,20 @@
|
|
|
1
1
|
"use client";
|
|
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
|
-
`)
|
|
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.
|
|
2
|
+
var Cc=Object.defineProperty,Ec=Object.defineProperties;var kc=Object.getOwnPropertyDescriptors;var Er=Object.getOwnPropertySymbols;var js=Object.prototype.hasOwnProperty,Gs=Object.prototype.propertyIsEnumerable;var Ys=(e,t,n)=>t in e?Cc(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,f=(e,t)=>{for(var n in t||(t={}))js.call(t,n)&&Ys(e,n,t[n]);if(Er)for(var n of Er(t))Gs.call(t,n)&&Ys(e,n,t[n]);return e},b=(e,t)=>Ec(e,kc(t));var kr=e=>typeof e=="symbol"?e:e+"",no=(e,t)=>{var n={};for(var r in e)js.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(e!=null&&Er)for(var r of Er(e))t.indexOf(r)<0&&Gs.call(e,r)&&(n[r]=e[r]);return n};import{createContext as mg,useCallback as on,useContext as hg,useEffect as Ft,useMemo as er,useRef as _t,useState as cn}from"react";import{useCallback as nl,useEffect as Tc,useSyncExternalStore as Mc}from"react";var Nn="http://localhost:1111";function On(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,b(f({},t),{signal:r.signal})).finally(()=>clearTimeout(o))}async function Us(e=Nn){try{let t=await On(`${e}/capabilities`,{},5e3);return t.ok?await t.json():null}catch(t){return null}}async function Ao(e=Nn){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 Vs(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 Js(e){if(e&&e!=="http://localhost:1111")try{let d=new URL(e);return{url:e,port:parseInt(d.port,10)||1111}}catch(d){return null}let o=typeof window!="undefined"?window.location.origin:null,i=await Vs(1111);if(i&&i.devOrigin&&o&&i.devOrigin===o)return{url:"http://localhost:1111",port:1111};let s=Array.from({length:8},(d,c)=>{let p=1112+c;return Vs(p).then(u=>u?{status:u,port:p}:null)}),l=(await Promise.all(s)).filter(d=>d!==null),a=[];i&&a.push({port:1111,devOrigin:i.devOrigin});for(let d of l)a.push({port:d.port,devOrigin:d.status.devOrigin});if(o){let d=a.find(c=>c.devOrigin===o);if(d)return{url:`http://localhost:${d.port}`,port:d.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 Xs(e=Nn,t,n=-1){try{let r=await On(`${e}/jobs/${t}/events?afterSeq=${n}`,{},5e3);return r.ok?await r.json():null}catch(r){return null}}async function Ks(e,t,n=Nn,r,o,i,s,l){let a=new FormData;if(e instanceof Map){let c=!0;for(let[p,u]of e){let g=encodeURIComponent(p);a.append(`screenshot-${g}`,u,`screenshot-${g}.png`),c&&(a.append("screenshot",u,"screenshot.png"),c=!1)}c&&a.append("screenshot",new Blob([],{type:"image/png"}),"screenshot.png")}else a.append("screenshot",e,"screenshot.png");if(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[c,p]of s)for(let u=0;u<p.length;u++)a.append(`image-${c}-${u}`,p[u],`image-${c}-${u}.png`);let d=await On(`${n}/send`,{method:"POST",body:a},3e4);if(!d.ok){let c=await d.text();throw new Error(`Bridge returned ${d.status}: ${c}`)}return d.json()}async function qs(e=Nn,t){try{let n=await On(`${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 Zs(e,t=Nn){let n=await On(`${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 Qs(e,t=Nn){let n=await On(`${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 pi(e,t,n=Nn){let r=await On(`${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 el(e,t=Nn){let n=await On(`${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 Po(e=Nn){var t;try{let n=await On(`${e}/model`,{},5e3);return n.ok&&(t=(await n.json()).model)!=null?t:null}catch(n){return null}}async function tl(e,t,n=Nn,r,o,i,s,l){let a;if(s&&s.length>0){let d=new FormData,c=new Blob([new Uint8Array([137,80,78,71,13,10,26,10,0,0,0,13,73,72,68,82,0,0,0,1,0,0,0,1,8,6,0,0,0,31,21,196,137,0,0,0,10,73,68,65,84,120,156,98,0,0,0,2,0,1,229,39,222,252,0,0,0,0,73,69,78,68,174,66,96,130])],{type:"image/png"});d.append("screenshot",c,"screenshot.png"),d.append("feedback",JSON.stringify({threadId:e,reply:t,color:r,provider:o,model:i,sourceId:l}));for(let p=0;p<s.length;p++)d.append(`image-reply-${p}`,s[p],`reply-image-${p}.png`);a=await On(`${n}/reply`,{method:"POST",body:d},3e4)}else a=await On(`${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 d=await a.text();throw new Error(`Bridge returned ${a.status}: ${d}`)}return a.json()}var Rr={};var bo=typeof Rr!="undefined"?Rr.hot:void 0,il,sl,gi=(sl=(il=bo==null?void 0:bo.data)==null?void 0:il.sourceId)!=null?sl:typeof crypto!="undefined"&&typeof crypto.randomUUID=="function"?crypto.randomUUID():Math.random().toString(36).slice(2);bo!=null&&bo.data&&(bo.data.sourceId=gi);function mi(){return gi}var xo=typeof Rr!="undefined"?Rr.hot:void 0,Qt=xo==null?void 0:xo.data,Ic={isConnected:!1,status:"disconnected",jobResponses:{},jobThinking:{},activeJobIds:[],currentResponse:"",currentThinking:"",events:[],activeJobId:null,lastCompletedJobId:null,lastResponseText:null,lastThreadId:null,lastErrorByJob:{},pendingQuestions:[],incrementalResolutions:[],capabilitiesVersion:0},ll,or=(ll=Qt==null?void 0:Qt.store)!=null?ll:f({},Ic),al,Tr=(al=Qt==null?void 0:Qt.listeners)!=null?al:new Set,cl,ho=(cl=Qt==null?void 0:Qt.activeEs)!=null?cl:null,dl,fi=(dl=Qt==null?void 0:Qt.activeBridgeUrl)!=null?dl:null,go=null,ul,Mr=(ul=Qt==null?void 0:Qt.connectionGeneration)!=null?ul:0;xo!=null&&xo.data&&Object.defineProperties(xo.data,{store:{get:()=>or,configurable:!0},listeners:{get:()=>Tr,configurable:!0},activeEs:{get:()=>ho,configurable:!0},activeBridgeUrl:{get:()=>fi,configurable:!0},connectionGeneration:{get:()=>Mr,configurable:!0},discoveredBridgeUrl:{get:()=>yo,configurable:!0}});var Ir=new Set,No=new Map,Oo={};function mo(e,t){var r;if(!e)return!1;if(Ir.has(e)){let o=No.get(e);return o||(o=[],No.set(e,o)),o.push({type:(r=t.type)!=null?r:"",data:t}),!0}let n=Oo[e];return n!==void 0&&typeof t.seq=="number"&&t.seq<=n}async function Rc(e,t,n){let r=()=>n!==Mr;for(let o of t){if(r())return;Ir.add(o),No.set(o,[])}await Promise.all(t.map(async o=>{var i;try{let s=await Xs(e,o);if(r())return;let l=(i=No.get(o))!=null?i:[];if(s){Zt(a=>{let d=b(f({},a.jobResponses),{[o]:s.accumulated.response}),c=b(f({},a.jobThinking),{[o]:s.accumulated.thinking}),p=[...a.events];for(let u of s.events)p.push({type:u.type,data:u,timestamp:Date.now()});return b(f({},a),{jobResponses:d,jobThinking:c,currentResponse:o===a.activeJobId?s.accumulated.response:a.currentResponse,currentThinking:o===a.activeJobId?s.accumulated.thinking:a.currentThinking,events:p})}),Oo[o]=s.currentSeq;for(let a of l)typeof a.data.seq=="number"&&a.data.seq<=s.currentSeq||ol(a.type,a.data,o)}else for(let a of l)ol(a.type,a.data,o)}finally{Ir.delete(o),No.delete(o)}}))}function ol(e,t,n){if(e==="delta"){let r=t.text||"";Zt(o=>b(f({},o),{jobResponses:b(f({},o.jobResponses),{[n]:(o.jobResponses[n]||"")+r}),currentResponse:n===o.activeJobId?o.currentResponse+r:o.currentResponse,events:[...o.events,{type:"delta",data:t,timestamp:Date.now()}]}))}else if(e==="thinking"){let r=t.text||"";Zt(o=>b(f({},o),{jobThinking:b(f({},o.jobThinking),{[n]:(o.jobThinking[n]||"")+r}),currentThinking:n===o.activeJobId?o.currentThinking+r:o.currentThinking,events:[...o.events,{type:"thinking",data:t,timestamp:Date.now()}]}))}else Zt(r=>b(f({},r),{events:[...r.events,{type:e,data:t,timestamp:Date.now()}]}))}var pl,yo=(pl=Qt==null?void 0:Qt.discoveredBridgeUrl)!=null?pl:null,Bo=null;async function Lc(e){return e&&e!=="http://localhost:1111"?(yo=e,e):yo||Bo||(Bo=Js(e).then(n=>{var r;return yo=(r=n==null?void 0:n.url)!=null?r:null,Bo=null,yo}).catch(()=>(Bo=null,null)),Bo)}function fl(){return yo}function rl(){return or}function Ac(e){return Tr.add(e),()=>{Tr.delete(e)}}function Zt(e){or=e(or);for(let t of Tr)t()}function gl(e){if(ho&&ho.readyState!==EventSource.CLOSED&&fi===e)return;ho&&(ho.close(),ho=null),go&&(clearTimeout(go),go=null),fi=e;let t=++Mr,n=new EventSource(`${e}/events?sourceId=${gi}`);ho=n;let r=()=>t!==Mr;n.addEventListener("connected",()=>{r()||Ao(e).then(o=>{var c,p;if(r())return;let i=(c=o==null?void 0:o.activeJobs)!=null?c:o!=null&&o.activeJob?[o.activeJob]:[],s=new Set(i.map(u=>u.id)),l=(p=o==null?void 0:o.recentJobs)!=null?p:[],a=new Map(l.map(u=>[u.id,u])),d=i.length>0;if(Zt(u=>{let g=f({},u.lastErrorByJob),E=u.activeJobIds.filter(I=>!s.has(I));for(let I of E){let A=a.get(I);(A==null?void 0:A.status)==="error"&&A.error&&(g[I]=A.error)}let w=u.activeJobIds.filter(I=>s.has(I));for(let I of s)w.includes(I)||w.push(I);return b(f({},u),{isConnected:!0,status:d?"streaming":E.length>0||u.status==="disconnected"?"idle":u.status,activeJobId:d?i[i.length-1].id:w.length>0?w[w.length-1]:null,activeJobIds:w,lastErrorByJob:g,lastCompletedJobId:E.length>0?E[E.length-1]:u.lastCompletedJobId})}),d){let u=Array.from(s);Rc(e,u,t).catch(()=>{})}})}),n.addEventListener("job_started",o=>{if(r())return;let i=JSON.parse(o.data),s=i.jobId;mo(s,i)||Zt(l=>{var a,d,c,p;return b(f({},l),{status:"streaming",activeJobId:s,activeJobIds:l.activeJobIds.includes(s)?l.activeJobIds:[...l.activeJobIds,s],jobResponses:b(f({},l.jobResponses),{[s]:(a=l.jobResponses[s])!=null?a:""}),jobThinking:b(f({},l.jobThinking),{[s]:(d=l.jobThinking[s])!=null?d:""}),currentResponse:(c=l.jobResponses[s])!=null?c:"",currentThinking:(p=l.jobThinking[s])!=null?p:"",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;if(mo(s,i))return;let l=i.text||"";Zt(a=>b(f({},a),{jobResponses:s?b(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;if(mo(s,i))return;let l=i.text||"";Zt(a=>b(f({},a),{jobThinking:s?b(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),s=i.jobId;mo(s,i)||Zt(l=>b(f({},l),{events:[...l.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;mo(s,i)||(s&&delete Oo[s],Zt(l=>{var g;let a=s?l.activeJobIds.filter(E=>E!==s):l.activeJobIds,d=f({},l.jobResponses),c=f({},l.jobThinking),p=s?d[s]:void 0;s&&(delete d[s],delete c[s]);let u=s===l.activeJobId?a.length>0?a[a.length-1]:null:l.activeJobId;return b(f(b(f({},l),{activeJobIds:a,activeJobId:u,jobResponses:d,jobThinking:c,lastCompletedJobId:s!=null?s:l.activeJobId,lastResponseText:p||l.currentResponse||i.responseText||null,lastThreadId:(g=i.threadId)!=null?g:null}),s===l.activeJobId?{currentResponse:u&&d[u]||"",currentThinking:u&&c[u]||""}:{}),{events:[...l.events,{type:"done",data:i,timestamp:Date.now()}]})}))}),n.addEventListener("question",o=>{if(r())return;let i=JSON.parse(o.data),s=i.jobId;mo(s,i)||Zt(l=>b(f({},l),{pendingQuestions:[...l.pendingQuestions,{jobId:i.jobId,threadId:i.threadId,question:i.question,annotationIds:i.annotationIds,timestamp:Date.now()}],events:[...l.events,{type:"question",data:i,timestamp:Date.now()}]}))}),n.addEventListener("capabilities_changed",()=>{r()||Zt(o=>b(f({},o),{capabilitiesVersion:o.capabilitiesVersion+1}))}),n.addEventListener("queue_drained",()=>{if(!r()){for(let o of Object.keys(Oo))delete Oo[o];Ir.clear(),No.clear(),Zt(o=>b(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)Zt(l=>b(f({},l),{isConnected:!1,status:"disconnected"})),go&&(clearTimeout(go),go=null),go=setTimeout(()=>{Ao(e).then(l=>{l&&gl(e)})},5e3);else if(o instanceof MessageEvent){let l=JSON.parse(o.data),a=(i=l.jobId)!=null?i:null;if(mo(a!=null?a:void 0,l))return;a&&delete Oo[a];let d=(s=l.message)!=null?s:"";Zt(c=>{let p=a?c.activeJobIds.filter(g=>g!==a):c.activeJobIds,u=p.length>0?c.status:"error";return b(f({},c),{status:u,activeJobIds:p,lastCompletedJobId:a!=null?a:c.activeJobId,lastErrorByJob:a&&d?b(f({},c.lastErrorByJob),{[a]:d}):c.lastErrorByJob,events:[...c.events,{type:"error",data:l,timestamp:Date.now()}]})})}}}),n.onerror=()=>{r()||n.readyState===EventSource.CLOSED&&Zt(o=>b(f({},o),{isConnected:!1,status:"disconnected"}))}}function ml(e="http://localhost:1111"){let t=Mc(Ac,rl,rl);Tc(()=>{Lc(e).then(o=>{o&&Ao(o).then(i=>{i&&gl(o)})})},[e]);let n=nl(()=>{Zt(()=>b(f({},or),{events:[],currentResponse:"",currentThinking:"",jobResponses:{},jobThinking:{},lastResponseText:null,lastThreadId:null,lastErrorByJob:{},incrementalResolutions:[]}))},[]),r=nl(o=>{Zt(i=>b(f({},i),{pendingQuestions:i.pendingQuestions.filter(s=>s.threadId!==o)}))},[]);return b(f({},t),{clearEvents:n,dismissQuestion:r})}import{useEffect as Pc,useReducer as Bc}from"react";var Oc={isAnnotating:!1,activeTool:"inspector",activeColor:"oklch(0.628 0.258 29)",strokeWidth:3,annotations:[],undoStack:[],redoStack:[],currentPath:[],selectedAnnotationIds:[],lastSelectedId:null,inspectedElement:null,styleModifications:[],spacingTokenChanges:[],spacingTokenMods:[]};function Lr(){return Math.random().toString(36).substring(2,9)}function hl(e){return e.status?e:e.captured?b(f({},e),{status:"in_flight"}):b(f({},e),{status:"pending"})}function hn(e){return b(f({},e),{undoStack:[...e.undoStack,{annotations:e.annotations,styleModifications:e.styleModifications,spacingTokenMods:e.spacingTokenMods}],redoStack:[]})}function Nc(e,t){return b(f({},e),{isAnnotating:t})}function Dc(e,t){return b(f({},e),{activeTool:t,inspectedElement:null})}function Hc(e,t){return b(f({},e),{activeColor:t})}function Fc(e,t){return b(f({},e),{strokeWidth:t})}function _c(e,t){return b(f({},e),{currentPath:[t]})}function zc(e,t){return b(f({},e),{currentPath:[...e.currentPath,t]})}function $c(e){return b(f({},e),{currentPath:[]})}function Wc(e,t){if(e.currentPath.length<2&&e.activeTool!=="text")return b(f({},e),{currentPath:[]});let n={id:Lr(),type:e.activeTool,points:e.currentPath,color:e.activeColor,strokeWidth:e.strokeWidth,timestamp:Date.now(),status:"pending",pathname:typeof window!="undefined"?window.location.pathname:"/",groupId:t==null?void 0:t.groupId,elements:t==null?void 0:t.elements},r=hn(e);return b(f({},r),{annotations:[...e.annotations,n],currentPath:[]})}function Yc(e,t){var o;let n=f({id:(o=t.id)!=null?o:Lr(),type:"text",points:[t.point],text:t.text,fontSize:t.fontSize||12,color:e.activeColor,strokeWidth:e.strokeWidth,timestamp:Date.now(),status:"pending",pathname:typeof window!="undefined"?window.location.pathname:"/",groupId:t.groupId,linkedSelector:t.linkedSelector,linkedAnchor:t.linkedAnchor,elements:t.elements},t.imageCount?{imageCount:t.imageCount}:{}),r=t.groupId?e:hn(e);return b(f({},r),{annotations:[...e.annotations,n]})}function jc(e,t){let n=hn(e);return b(f({},n),{annotations:e.annotations.map(r=>r.id===t.id?f(b(f({},r),{text:t.text}),t.imageCount!=null?{imageCount:t.imageCount}:{}):r)})}function Gc(e,t){return b(f({},e),{annotations:e.annotations.map(n=>n.id===t.id?b(f({},n),{fontSize:Math.max(12,Math.min(72,t.fontSize))}):n)})}function Vc(e,t){let n=hn(e),r=e.annotations.find(i=>i.id===t.id),o=r==null?void 0:r.groupId;return b(f({},n),{annotations:e.annotations.filter(i=>i.id!==t.id&&!(o&&i.groupId===o))})}function Uc(e,t){let n=t.saveUndo?hn(e):e,r=e.annotations.find(i=>i.id===t.id),o=r==null?void 0:r.groupId;return b(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 b(f({},i),{points:i.points.map(d=>({x:d.x+l,y:d.y+a}))})})})}function Jc(e,t){let n=t.saveUndo?hn(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),d=r.points[0],c=r.points[r.points.length-1],p=Math.min(d.x,c.x),u=Math.max(d.y,c.y);o=l-p,i=a-u}return b(f({},n),{annotations:e.annotations.map(s=>s.id===t.id?b(f({},s),{points:t.points}):r.groupId&&s.groupId===r.groupId&&s.type==="text"?b(f({},s),{points:s.points.map(l=>({x:l.x+o,y:l.y+i}))}):s)})}function Xc(e,t){let n=hn(e);return b(f({},n),{annotations:[...e.annotations,...t.annotations.map(hl)]})}function Kc(e,t){let n=new Set,r=[];for(let o of t.annotations)n.has(o.id)||(n.add(o.id),r.push(hl(o)));return b(f({},e),{annotations:r})}function qc(e){if(e.undoStack.length===0)return e;let t=e.undoStack[e.undoStack.length-1];return b(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 Zc(e){if(e.redoStack.length===0)return e;let t=e.redoStack[e.redoStack.length-1];return b(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 Qc(e,t){let{id:n,addToSelection:r}=t;if(n===null)return b(f({},e),{selectedAnnotationIds:[],lastSelectedId:null});if(r)if(e.selectedAnnotationIds.includes(n)){let i=e.selectedAnnotationIds.filter(s=>s!==n);return b(f({},e),{selectedAnnotationIds:i,lastSelectedId:i.length>0?i[i.length-1]:null})}else return b(f({},e),{selectedAnnotationIds:[...e.selectedAnnotationIds,n],lastSelectedId:n});return b(f({},e),{selectedAnnotationIds:[n],lastSelectedId:n})}function ed(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 b(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:b(f({},r),{color:t.color})})})}function td(e){return b(f({},e),{annotations:e.annotations.map(t=>b(f({},t),{captured:!0,status:t.status==="pending"||!t.status?"in_flight":t.status})),styleModifications:e.styleModifications.map(t=>b(f({},t),{captured:!0})),spacingTokenChanges:e.spacingTokenChanges.map(t=>b(f({},t),{captured:!0}))})}function nd(e){return b(f({},e),{annotations:[],undoStack:[],redoStack:[],currentPath:[],selectedAnnotationIds:[],lastSelectedId:null,spacingTokenChanges:[],spacingTokenMods:[]})}function od(e,t){return b(f({},e),{inspectedElement:t})}function rd(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=hn(e),E=g.styleModifications.map((w,I)=>I===l?b(f({},w),{changes:[{property:o,original:i,modified:s}],captured:!1}):w);return b(f({},g),{styleModifications:E})}let d=a.changes.findIndex(g=>g.property===o),c,p=e;if(d>=0){let g=a.changes[d];s===g.original?c=a.changes.filter((E,w)=>w!==d):c=a.changes.map((E,w)=>w===d?b(f({},E),{modified:s}):E)}else{if(i===s)return e;p=hn(e),c=[...a.changes,{property:o,original:i,modified:s}]}if(c.length===0)return b(f({},p),{styleModifications:p.styleModifications.filter((g,E)=>E!==l)});let u=p.styleModifications.map((g,E)=>E===l?b(f({},g),{changes:c}):g);return b(f({},p),{styleModifications:u})}else{let a=hn(e),d={selector:n,element:r,changes:[{property:o,original:i,modified:s}]};return b(f({},a),{styleModifications:[...a.styleModifications,d]})}}function id(e,t){let{selector:n,durableSelector:r,element:o,changes:i}=t,s=i.filter(d=>d.original!==d.modified);if(s.length===0)return e;let l=hn(e),a=l.styleModifications.findIndex(d=>d.selector===n);if(a>=0){let d=l.styleModifications[a],c=d.captured?[]:[...d.changes];for(let p of s){let u=c.findIndex(g=>g.property===p.property);u>=0?p.modified===c[u].original?c=c.filter((g,E)=>E!==u):c=c.map((g,E)=>E===u?b(f({},g),{modified:p.modified}):g):c.push(p)}return c.length===0?b(f({},l),{styleModifications:l.styleModifications.filter((p,u)=>u!==a)}):b(f({},l),{styleModifications:l.styleModifications.map((p,u)=>u===a?b(f({},p),{changes:c,captured:!1}):p)})}else return b(f({},l),{styleModifications:[...l.styleModifications,{selector:n,durableSelector:r,element:o,changes:s}]})}function sd(e,t){let{selector:n,property:r}=t,o=hn(e),i=o.styleModifications.map(s=>s.selector!==n?s:b(f({},s),{changes:s.changes.filter(l=>l.property!==r)})).filter(s=>s.changes.length>0);return b(f({},o),{styleModifications:i})}function ld(e){if(e.styleModifications.length===0)return b(f({},e),{inspectedElement:null});let t=hn(e);return b(f({},t),{styleModifications:[],inspectedElement:null})}function ad(e,t){return b(f({},e),{styleModifications:t})}function cd(e,t){let{updates:n}=t,r=new Map(n.map(o=>[o.id,o]));return b(f({},e),{annotations:e.annotations.map(o=>{let i=r.get(o.id);return i?f(b(f({},o),{points:[i.point,...o.points.slice(1)]}),i.linkedAnchor?{linkedAnchor:i.linkedAnchor}:{}):o})})}function dd(e,t){let n=new Set(t.ids);return b(f({},e),{annotations:e.annotations.map(r=>n.has(r.id)?b(f({},r),{status:t.status}):r)})}function ud(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 b(f({},e),{annotations:e.annotations.map(o=>n.has(o.id)||o.groupId&&r.has(o.groupId)?b(f({},o),{threadId:t.threadId}):o)})}function pd(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 b(f({},e),{annotations:e.annotations.map(o=>n.has(o.id)||o.groupId&&r.has(o.groupId)?b(f({},o),{status:"waiting_input",question:t.question,threadId:t.threadId}):o)})}function fd(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 b(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?b(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 gd(e,t){let{linkedSelectors:n,styleSelectors:r}=t,o=new Set(n),i=new Set(r),s=new Set,l=new Set;for(let u of e.annotations)u.linkedSelector&&o.has(u.linkedSelector)&&(s.add(u.id),u.groupId&&l.add(u.groupId));for(let u of e.annotations)u.groupId&&l.has(u.groupId)&&s.add(u.id);let a=e.annotations.filter(u=>!s.has(u.id)),d=e.styleModifications.filter(u=>!i.has(u.selector));if(a.length===e.annotations.length&&d.length===e.styleModifications.length)return e;let c=e.selectedAnnotationIds.filter(u=>!s.has(u)),p=e.inspectedElement&&i.has(e.inspectedElement.info.selector)?null:e.inspectedElement;return b(f({},e),{annotations:a,styleModifications:d,selectedAnnotationIds:c,lastSelectedId:c.length>0?c[c.length-1]:null,inspectedElement:p})}function md(e,t){let n=e.spacingTokenChanges.findIndex(r=>r.tokenPath===t.tokenPath);return n>=0?b(f({},e),{spacingTokenChanges:e.spacingTokenChanges.map((r,o)=>o===n?t:r)}):b(f({},e),{spacingTokenChanges:[...e.spacingTokenChanges,t]})}function hd(e,t){return b(f({},e),{spacingTokenChanges:t})}function yd(e,t){let n=hn(e),r=e.spacingTokenMods.findIndex(i=>i.tokenPath===t.tokenPath),o;if(r>=0){let i=e.spacingTokenMods[r],s=b(f({},t),{originalValue:i.originalValue,originalPx:i.originalPx});o=e.spacingTokenMods.map((l,a)=>a===r?s:l)}else o=[...e.spacingTokenMods,t];return b(f({},n),{spacingTokenMods:o})}function bd(e,t){let n=hn(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,d)=>d===r?s:a):l=[...e.spacingTokenMods,s],b(f({},n),{spacingTokenMods:l})}var xd={SET_ANNOTATING:Nc,SET_TOOL:Dc,SET_COLOR:Hc,SET_STROKE_WIDTH:Fc,START_PATH:_c,CONTINUE_PATH:zc,CANCEL_PATH:$c,FINISH_PATH:Wc,ADD_TEXT:Yc,UPDATE_TEXT:jc,UPDATE_TEXT_SIZE:Gc,DELETE_ANNOTATION:Vc,MOVE_ANNOTATION:Uc,RESIZE_ANNOTATION:Jc,PASTE_ANNOTATIONS:Xc,RESTORE_ANNOTATIONS:Kc,UNDO:qc,REDO:Zc,SELECT_ANNOTATION:Qc,UPDATE_ANNOTATION_COLOR:ed,MARK_CAPTURED:td,CLEAR:nd,SELECT_ELEMENT:od,MODIFY_STYLE:rd,MODIFY_STYLES_BATCH:id,CLEAR_STYLE:sd,CLEAR_ALL_STYLES:ld,RESTORE_STYLE_MODIFICATIONS:ad,UPDATE_LINKED_POSITIONS:cd,CLEANUP_ORPHANED:gd,SET_ANNOTATION_STATUS:dd,SET_ANNOTATION_THREAD:ud,SET_ANNOTATION_QUESTION:pd,APPLY_RESOLUTIONS:fd,ADD_SPACING_TOKEN_CHANGE:md,RESTORE_SPACING_TOKEN_CHANGES:hd,MODIFY_SPACING_TOKEN:yd,DELETE_SPACING_TOKEN:bd};function vd(e,t){let n=xd[t.type];return n?n(e,t.payload):e}function yl(){let[e,t]=Bc(vd,Oc);return Pc(()=>{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{useSyncExternalStore as Sd}from"react";if(typeof window!="undefined"&&!window.__popmeltPathPatch){window.__popmeltPathPatch=!0;for(let e of["pushState","replaceState"]){let t=History.prototype[e];History.prototype[e]=function(...n){let r=window.location.pathname;t.apply(this,n),window.dispatchEvent(new CustomEvent("popmelt:locationchange",{detail:{prevPath:r}}))}}}function wd(e){return window.addEventListener("popstate",e),window.addEventListener("popmelt:locationchange",e),()=>{window.removeEventListener("popstate",e),window.removeEventListener("popmelt:locationchange",e)}}function Cd(){return window.location.pathname}function Do(){return Sd(wd,Cd,()=>"/")}import{domToCanvas as Ed}from"modern-screenshot";function hi(e){let t=document.createElement("canvas").getContext("2d");return t?(t.fillStyle=e,t.fillStyle):"#888888"}function yi(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 d=a.find(p=>p.type!=="text"),c=a.find(p=>p.type==="text");if(d){let p=d.linkedSelector||(c==null?void 0:c.linkedSelector),u=(c==null?void 0:c.imageCount)||d.imageCount,g=d.pathname||(c==null?void 0:c.pathname);s.push(f(b(f(f({id:d.id,type:d.type,instruction:c==null?void 0:c.text},p?{linkedSelector:p}:{}),g?{pathname:g}:{}),{elements:d.elements||[]}),u?{imageCount:u}:{}))}}for(let l of i)s.push(f(b(f(f({id:l.id,type:l.type,instruction:l.type==="text"?l.text:void 0},l.linkedSelector?{linkedSelector:l.linkedSelector}:{}),l.pathname?{pathname:l.pathname}:{}),{elements:l.elements||[]}),l.imageCount?{imageCount:l.imageCount}:{}));return f(f({timestamp:new Date().toISOString(),url:window.location.href,viewport:{width:window.innerWidth,height:window.innerHeight},scrollPosition:{x:window.scrollX,y:window.scrollY},annotations:s,styleModifications:t},n?{inspectedElement:n}:{}),r&&r.length>0?{spacingTokenChanges:r}:{})}function kd(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 Td(e,t){if(e.length===0)return[];let n=e.map(c=>({annotation:c,bounds:kd(c)})).filter(c=>c.bounds!==null);if(n.length===0)return[];n.sort((c,p)=>c.bounds.minY-p.bounds.minY);let r=Math.min(...n.map(c=>c.bounds.minY)),o=Math.max(...n.map(c=>c.bounds.maxY));if(o-r<=t){let c=(r+o)/2,p=Math.max(0,c-t/2);return[{top:p,bottom:p+t,annotations:e}]}let i=[],s=50,l=Math.max(0,r-s),a=[],d=l;for(let{annotation:c,bounds:p}of n){let u=p.maxY+s;if(u-l<=t)a.push(c),d=Math.max(d,u);else{if(a.length>0){let g=(l+d)/2,E=Math.max(0,g-t/2);i.push({top:E,bottom:E+t,annotations:a})}l=Math.max(0,p.minY-s),a=[c],d=p.maxY+s}}if(a.length>0){let c=(l+d)/2,p=Math.max(0,c-t/2);i.push({top:p,bottom:p+t,annotations:a})}return i}function Md(e){let t=new Map;for(let n of e)if(n.linkedSelector)try{let r=document.querySelector(n.linkedSelector);if(r){let o=r.getBoundingClientRect();t.set(n.id,{x:o.left+window.scrollX,y:o.top+window.scrollY,width:o.width,height:o.height})}}catch(r){}return t}function Id(e,t,n,r,o){if(e.save(),e.scale(r,r),o)for(let i of t){let s=o.get(i.id);if(!s)continue;let l=s.y-n;e.fillStyle=i.color,e.globalAlpha=.05,e.fillRect(s.x,l,s.width,s.height),e.globalAlpha=1,e.strokeStyle=i.color,e.lineWidth=1,e.setLineDash([2,4]),e.strokeRect(s.x,l,s.width,s.height),e.setLineDash([])}for(let i of t){let s=i.points.map(l=>({x:l.x,y:l.y-n}));switch(e.strokeStyle=i.color,e.fillStyle=i.color,e.lineWidth=i.strokeWidth,e.lineCap="round",e.lineJoin="round",i.type){case"freehand":if(s.length<2)break;e.beginPath(),e.moveTo(s[0].x,s[0].y);for(let l=1;l<s.length;l++)e.lineTo(s[l].x,s[l].y);e.stroke();break;case"line":if(s.length<2)break;e.beginPath(),e.moveTo(s[0].x,s[0].y),e.lineTo(s[s.length-1].x,s[s.length-1].y),e.stroke();break;case"rectangle":{if(s.length<2)break;let l=s[0],a=s[s.length-1],d=Math.min(l.x,a.x),c=Math.min(l.y,a.y),p=Math.abs(a.x-l.x),u=Math.abs(a.y-l.y);e.strokeRect(d,c,p,u);break}case"circle":{if(s.length<2)break;let l=s[0],a=s[s.length-1],d=(l.x+a.x)/2,c=(l.y+a.y)/2,p=Math.abs(a.x-l.x)/2,u=Math.abs(a.y-l.y)/2;e.beginPath(),e.ellipse(d,c,p,u,0,0,Math.PI*2),e.stroke();break}case"text":{if(!i.text||s.length<1)break;let l=s[0],a=i.fontSize||16;e.font=`${a}px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`,e.fillStyle=i.color;let c=(i.imageCount&&i.imageCount>0?`[${i.imageCount} image${i.imageCount>1?"s":""}] ${i.text}`:i.text).split(`
|
|
3
|
+
`),p=a*1.2,u=4,g=0;for(let E of c)g=Math.max(g,e.measureText(E).width);e.fillRect(l.x-u,l.y-u,g+u*2,c.length*p+u*2),e.fillStyle="#ffffff",c.forEach((E,w)=>{e.fillText(E,l.x,l.y+a+w*p)});break}}}e.restore()}async function rr(e,t,n=[]){try{let r=window.devicePixelRatio||1,o=window.innerWidth,i=window.innerHeight,s=n.filter(c=>{var p;return((p=c.status)!=null?p:"pending")==="pending"});console.log("[Screenshot] Starting capture with",s.length,"active annotations (filtered",n.length-s.length,"captured)");let l=Md(s),a=Td(s,i);if(a.length===0){let c=await bl(e,[],window.scrollY,o,i,r,l);return c?[c]:[]}let d=[];for(let c=0;c<a.length;c++){let p=a[c],u=await bl(e,p.annotations,p.top,o,i,r,l);u?d.push(u):console.warn(`[Screenshot] Region ${c+1} failed to capture`)}return console.log("[Screenshot] Capture complete"),d}catch(r){return console.error("[Screenshot] Capture failed:",r),[]}}async function bl(e,t,n,r,o,i,s){try{let l=await Ed(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)`}}),a=document.createElement("canvas");a.width=r*i,a.height=o*i;let d=a.getContext("2d");return d?(d.drawImage(l,0,0,r*i,o*i,0,0,r*i,o*i),Id(d,t,n,i,s),new Promise(c=>{a.toBlob(p=>c(p),"image/png")})):null}catch(l){return console.error("Region capture failed:",l),null}}async function ir(e){if(e.length===0)return null;if(e.length===1)return e[0];let t=await Promise.all(e.map(l=>new Promise((a,d)=>{let c=new Image;c.onload=()=>a(c),c.onerror=d,c.src=URL.createObjectURL(l)}))),n=t[0].width,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 xl(e,t,n){try{let r=Array.isArray(e)?e:[e];if(r.length===0)return!1;let o=await ir(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(d=>{var c;return((c=d.status)!=null?c:"pending")==="pending"}):[];if(a.length>0||l){let d=yi(a,n||[]),c=new Blob([JSON.stringify(d,null,2)],{type:"text/plain"});i["text/plain"]=c}}return await navigator.clipboard.write([new ClipboardItem(i)]),!0}catch(r){return console.warn("Clipboard write failed:",r),!1}}import{useCallback as jt,useEffect as an,useMemo as Kr,useRef as Bt,useState as dt}from"react";import{useCallback as _o,useRef as Ld}from"react";function bi(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,d=Math.abs(i.y-o.y)/2;e.beginPath(),e.strokeStyle=n,e.lineWidth=r,e.ellipse(s,l,a,d,0,0,Math.PI*2),e.stroke()}function xi(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 d=(l.x+a.x)/2,c=(l.y+a.y)/2;e.quadraticCurveTo(l.x,l.y,d,c)}e.lineTo(i.x,i.y),e.stroke()}}function vi(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 Si(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),d=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,d)}var Jt='"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace';function Rd(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 Ho(e){let t=window.innerWidth-e-16;return Math.max(60,Math.min(400,t))}function vl(e,t,n){let r=[];for(let o of t)r.push(...Rd(e,o,n));return r}function Fo(e,t,n){if(e.measureText(t).width<=n)return t;let r="\u2026";for(let o=t.length-1;o>0;o--){let i=t.slice(0,o)+r;if(e.measureText(i).width<=n)return i}return r}function Sl(e,t,n,r,o=12,i,s){if(!n)return;let l=o*1.4,a=n.replace(/\n/g," "),d=i!==void 0?i+". "+a:a;e.font=`${o}px ${Jt}`,e.textBaseline="middle";let c=s!==void 0?Math.min(400,Math.max(60,window.innerWidth-s-16)):400,p=Fo(e,d,c),u=e.measureText(p).width;e.fillStyle=r,e.fillRect(t.x-4,t.y-4,u+8,l+8),e.fillStyle="#ffffff",e.fillText(p,t.x,t.y+l/2)}var wl=11,wi=4,Ad=`600 ${wl}px system-ui, -apple-system, sans-serif`;function Ci(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=Ad;let a=e.measureText(s).width+wi*2,d=wl+wi*2,c=t-a/2,p=n+i/2+2;e.fillStyle=o,e.fillRect(c,p,a,d),e.fillStyle="#ffffff",e.textBaseline="middle",e.fillText(s,c+wi,p+d/2)}function Bd(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 Cl(){let e=Ld(null),t=_o(()=>{let l=e.current;if(!l)return;let a=l.getContext("2d");a&&a.clearRect(0,0,l.width,l.height)},[]),n=_o((l,a,d)=>{var E;let c=e.current;if(!c)return;let p=c.getContext("2d");if(!p)return;let g=((E=l.status)!=null?E:l.captured?"in_flight":"pending")==="pending"||d?l.color:"#999999";switch(l.type){case"freehand":xi(p,l.points,g,l.strokeWidth);break;case"line":vi(p,l.points,g,l.strokeWidth);break;case"rectangle":Si(p,l.points,g,l.strokeWidth);break;case"circle":bi(p,l.points,g,l.strokeWidth);break;case"text":l.text&&l.points[0]&&Sl(p,l.points[0],l.text,g,l.fontSize,a,l.points[0].x);break}},[]),r=_o((l,a,d,c)=>{let p=e.current;if(!p||l.length<2)return;let u=p.getContext("2d");if(u)switch(a){case"freehand":xi(u,l,d,c);break;case"line":vi(u,l,d,c);break;case"rectangle":Si(u,l,d,c);break;case"circle":bi(u,l,d,c);break}},[]),o=_o((l,a)=>{let d=e.current;if(!d||l.points.length<2)return;let c=d.getContext("2d");if(c){if(c.fillStyle="#ffffff",c.strokeStyle=l.color,c.lineWidth=1.5,l.type==="line"){let p=l.points[0],u=l.points[l.points.length-1];[p,u].forEach(g=>{c.beginPath(),c.arc(g.x,g.y,a/2,0,Math.PI*2),c.fill(),c.stroke()});return}if(l.type==="circle"){let p=l.points[0],u=l.points[l.points.length-1],g=Math.min(p.x,u.x),E=Math.max(p.x,u.x),w=Math.min(p.y,u.y),I=Math.max(p.y,u.y),A=(g+E)/2,U=(w+I)/2;[{x:A,y:w},{x:A,y:I},{x:g,y:U},{x:E,y:U}].forEach(y=>{c.beginPath(),c.rect(y.x-a/2,y.y-a/2,a,a),c.fill(),c.stroke()});return}if(l.type==="rectangle"||l.type==="freehand"){let p,u,g,E;if(l.type==="freehand")p=Math.min(...l.points.map(I=>I.x)),u=Math.max(...l.points.map(I=>I.x)),g=Math.min(...l.points.map(I=>I.y)),E=Math.max(...l.points.map(I=>I.y));else{let I=l.points[0],A=l.points[l.points.length-1];p=Math.min(I.x,A.x),u=Math.max(I.x,A.x),g=Math.min(I.y,A.y),E=Math.max(I.y,A.y)}[{x:p,y:g},{x:u,y:g},{x:p,y:E},{x:u,y:E}].forEach(I=>{c.beginPath(),c.rect(I.x-a/2,I.y-a/2,a,a),c.fill(),c.stroke()})}}},[]),i=_o((l,a,d,c,p,u,g,E=0,w=0,I,A)=>{var U;if(t(),l.forEach(B=>{var Z;let y=b(f({},B),{points:Ci(B.points,E,w)}),v=I==null?void 0:I.get(B.id),O=(Z=A==null?void 0:A.has(B.id))!=null?Z:!1;n(y,v,O)}),a.length>0){let B=Ci(a,E,w);r(B,d,c,p)}if(u&&u.length>0&&g){let B=e.current,y=B==null?void 0:B.getContext("2d");for(let v of u){let O=l.find(Z=>Z.id===v);if(O){let Z=b(f({},O),{points:Ci(O.points,E,w)});if(o(Z,g),y&&O.type!=="text"&&I&&!(O.groupId&&l.some(R=>R.groupId===O.groupId&&R.type==="text"))){let R=I.get(O.id);if(R!==void 0){let $=Bd(Z,g);if($){let L=((U=O.status)!=null?U:O.captured?"in_flight":"pending")==="pending"?O.color:"#999999";Pd(y,$.x,$.y,R,L,g)}}}}}}},[t,n,r,o]),s=_o(()=>{let l=e.current;if(!l)return;let a=window.devicePixelRatio||1;l.width=window.innerWidth*a,l.height=window.innerHeight*a;let d=l.getContext("2d");d&&d.scale(a,a)},[]);return{canvasRef:e,clearCanvas:t,drawAnnotation:n,drawCurrentPath:r,redrawAll:i,resizeCanvas:s}}import{useEffect as Od,useRef as Nd}from"react";function El(){let e=Nd({shift:!1,cmd:!1});return Od(()=>{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 Dd}from"react";function kl(e,t,n,r,o){Dd(()=>{let i=s=>{if(e){if(e.linkedSelector)return;s.preventDefault(),s.stopPropagation();let a=s.deltaY>0?-2:2;t(d=>d?b(f({},d),{fontSize:Math.max(12,Math.min(72,d.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,d=s.deltaY>0?-2:2;o({type:"UPDATE_TEXT_SIZE",payload:{id:n,fontSize:a+d}})}};return window.addEventListener("wheel",i,{passive:!1}),()=>{window.removeEventListener("wheel",i)}},[n,e,r,o,t])}import{useCallback as _l,useEffect as $r,useRef as zl,useState as pr}from"react";function Ar(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 Ei(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 Pr(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 Tl(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 wn(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 pn(e){try{return document.querySelector(e)}catch(t){return null}}function Br(e,t=0){var a;let n=Ei(e);if(n.length===0)return null;let r=n.map(d=>d.name),o=n.length-1,i=Math.max(0,Math.min(n.length-1,o-t)),s=n[i],l=(a=Pr(s.fiber))!=null?a:e;return{name:s.name,path:r,depthIndex:i,rootElement:l}}function Ml(e,t){var i,s;let n=Ei(e),r=t.toLowerCase(),o=-1;for(let l=n.length-1;l>=0;l--){let a=n[l].name;if(a===t){let d=(i=Pr(n[l].fiber))!=null?i:e;return{name:t,path:n.map(c=>c.name),depthIndex:l,rootElement:d}}if(o===-1){let d=a.toLowerCase();(d.length>=4&&r.includes(d)||r.length>=4&&d.includes(r))&&(o=l)}}if(o>=0){let l=(s=Pr(n[o].fiber))!=null?s:e;return{name:t,path:n.map(a=>a.name),depthIndex:o,rootElement:l}}return null}function zo(e){let t=$o(),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 ki(e){let t=new Map;if(e.size===0)return t;let n=new Set(e),r=$o(),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 $o(){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 yn(e){let t={selector:Tl(e),tagName:e.tagName.toLowerCase()};e.id&&(t.id=e.id),e.classList.length>0&&(t.className=Array.from(e.classList).join(" "));let n=Il(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=Ar(e);o&&(t.reactComponent=o.name);let i=Hd(e);return i&&(t.context=i),t}function Il(e){let t="";for(let n of e.childNodes)n.nodeType===Node.TEXT_NODE&&(t+=n.textContent||"");return t.trim()}function vo(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 Hd(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 Rl(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 d=vo(l,a);d&&!t.has(d)&&(t.add(d),n.push(yn(d)))}return n.slice(0,3)}function Ti(e){if(e.length===0)return[];let t=e.map(r=>r.x),n=e.map(r=>r.y);return Rl({minX:Math.min(...t),minY:Math.min(...n),maxX:Math.max(...t),maxY:Math.max(...n)})}function Yt(e,t){return e.style.getPropertyValue(t)!==""}function Fd(e,t=30){if(e<=0)return[];let n=[],r=$o(),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);!Yt(s,"padding-top")&&Math.abs((parseFloat(a.paddingTop)||0)-e)<o&&n.push({element:s,property:"padding-top"}),!Yt(s,"padding-bottom")&&Math.abs((parseFloat(a.paddingBottom)||0)-e)<o&&n.length<t&&n.push({element:s,property:"padding-bottom"}),!Yt(s,"padding-left")&&Math.abs((parseFloat(a.paddingLeft)||0)-e)<o&&n.length<t&&n.push({element:s,property:"padding-left"}),!Yt(s,"padding-right")&&Math.abs((parseFloat(a.paddingRight)||0)-e)<o&&n.length<t&&n.push({element:s,property:"padding-right"}),!Yt(s,"margin-top")&&Math.abs((parseFloat(a.marginTop)||0)-e)<o&&n.length<t&&n.push({element:s,property:"margin-top"}),!Yt(s,"margin-bottom")&&Math.abs((parseFloat(a.marginBottom)||0)-e)<o&&n.length<t&&n.push({element:s,property:"margin-bottom"}),!Yt(s,"margin-left")&&Math.abs((parseFloat(a.marginLeft)||0)-e)<o&&n.length<t&&n.push({element:s,property:"margin-left"}),!Yt(s,"margin-right")&&Math.abs((parseFloat(a.marginRight)||0)-e)<o&&n.length<t&&n.push({element:s,property:"margin-right"});let d=a.display;if((d.includes("flex")||d.includes("grid"))&&n.length<t){let c=Yt(s,"gap"),p=parseFloat(a.gap)||0,u=parseFloat(a.rowGap)||0,g=parseFloat(a.columnGap)||0;!c&&Math.abs(p-e)<o?n.push({element:s,property:"gap"}):!Yt(s,"row-gap")&&Math.abs(u-e)<o?n.push({element:s,property:"row-gap"}):!Yt(s,"column-gap")&&Math.abs(g-e)<o&&n.push({element:s,property:"column-gap"})}}return n}function Mi(e,t=30){if(e<=0)return[];let n=[],r=$o(),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),d=parseFloat(a.borderTopWidth)||0,c=parseFloat(a.borderRightWidth)||0,p=parseFloat(a.borderBottomWidth)||0,u=parseFloat(a.borderLeftWidth)||0,g=s.clientWidth,E=s.clientHeight,w=parseFloat(a.paddingTop)||0;!Yt(s,"padding-top")&&Math.abs(w-e)<o&&n.push({x:l.left+u,y:l.top+d,width:g,height:e,direction:"vertical",property:"padding-top"});let I=parseFloat(a.paddingBottom)||0;!Yt(s,"padding-bottom")&&Math.abs(I-e)<o&&n.length<t&&n.push({x:l.left+u,y:l.top+d+E-e,width:g,height:e,direction:"vertical",property:"padding-bottom"});let A=parseFloat(a.paddingLeft)||0;!Yt(s,"padding-left")&&Math.abs(A-e)<o&&n.length<t&&n.push({x:l.left+u,y:l.top+d,width:e,height:E,direction:"horizontal",property:"padding-left"});let U=parseFloat(a.paddingRight)||0;!Yt(s,"padding-right")&&Math.abs(U-e)<o&&n.length<t&&n.push({x:l.left+u+g-e,y:l.top+d,width:e,height:E,direction:"horizontal",property:"padding-right"});let B=parseFloat(a.marginTop)||0;!Yt(s,"margin-top")&&Math.abs(B-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 y=parseFloat(a.marginBottom)||0;!Yt(s,"margin-bottom")&&Math.abs(y-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;!Yt(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;!Yt(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 Z=a.display;if((Z.includes("flex")||Z.includes("grid"))&&n.length<t&&!Yt(s,"gap")){let R=Array.from(s.children).filter($=>{let C=getComputedStyle($);return C.display!=="none"&&C.position!=="absolute"&&C.position!=="fixed"});if(R.length>=2)for(let $=0;$<R.length-1&&n.length<t;$++){let C=R[$].getBoundingClientRect(),L=R[$+1].getBoundingClientRect(),X=L.top-C.bottom;Math.abs(X-e)<o&&X>.5&&n.push({x:Math.min(C.left,L.left),y:C.bottom,width:Math.max(C.right,L.right)-Math.min(C.left,L.left),height:X,direction:"vertical",property:"gap"});let ge=L.left-C.right;Math.abs(ge-e)<o&&ge>.5&&n.push({x:C.right,y:Math.min(C.top,L.top),width:ge,height:Math.max(C.bottom,L.bottom)-Math.min(C.top,L.top),direction:"horizontal",property:"gap"})}}}return n}function Or(e){return typeof e=="string"?{value:e}:e}var Al={gap:["gap","row-gap","column-gap"],padding:["padding-top","padding-bottom","padding-left","padding-right"],margin:["margin-top","margin-bottom","margin-left","margin-right"]};function Ll(e,t){let n=Al[t];return n?n.includes(e):!1}function _d(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 zd(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 Ii(e,t=30){let n=parseFloat(e.value);if(isNaN(n)||n<=0)return[];if(e.bindings&&e.bindings.length>0){let o=[],i=$o(),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 d=l.className;if(typeof d=="string")for(let c of e.bindings){if(!_d(d,c))continue;let p=zd(c);if(p&&!(e.property&&!Ll(p,e.property))){o.push({element:l,property:p});break}}}return o}let r=Fd(n,t*2);return e.property?r.filter(o=>Ll(o.property,e.property)).slice(0,t):r.slice(0,t)}function Ri(e,t=30){let n=Ii(e,t),r=[];for(let o of n){let i=o.element,s=i.getBoundingClientRect(),l=getComputedStyle(i),a=parseFloat(l.borderTopWidth)||0,d=parseFloat(l.borderRightWidth)||0,c=parseFloat(l.borderLeftWidth)||0,p=i.clientWidth,u=i.clientHeight;switch(o.property){case"padding-top":{let g=parseFloat(l.paddingTop)||0;r.push({x:s.left+c,y:s.top+a,width:p,height:g,direction:"vertical",property:o.property});break}case"padding-bottom":{let g=parseFloat(l.paddingBottom)||0;r.push({x:s.left+c,y:s.top+a+u-g,width:p,height:g,direction:"vertical",property:o.property});break}case"padding-left":{let g=parseFloat(l.paddingLeft)||0;r.push({x:s.left+c,y:s.top+a,width:g,height:u,direction:"horizontal",property:o.property});break}case"padding-right":{let g=parseFloat(l.paddingRight)||0;r.push({x:s.left+c+p-g,y:s.top+a,width:g,height:u,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(E=>{let w=getComputedStyle(E);return w.display!=="none"&&w.position!=="absolute"&&w.position!=="fixed"});for(let E=0;E<g.length-1&&r.length<t;E++){let w=g[E].getBoundingClientRect(),I=g[E+1].getBoundingClientRect(),A=I.top-w.bottom;A>.5&&r.push({x:Math.min(w.left,I.left),y:w.bottom,width:Math.max(w.right,I.right)-Math.min(w.left,I.left),height:A,direction:"vertical",property:"gap"});let U=I.left-w.right;U>.5&&r.push({x:w.right,y:Math.min(w.top,I.top),width:U,height:Math.max(w.bottom,I.bottom)-Math.min(w.top,I.top),direction:"horizontal",property:"gap"})}break}}}return r}function Pl(e,t){let n=new Set,r=sr(t);for(let o of e){let i=Ol[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 d of s.split(/\s+/)){let c=d.lastIndexOf(":"),p=c>=0?d.slice(c+1):d;if(p===a){n.add(p);break}}}}return[...n]}function Bl(e){let t=new Set;for(let n of e)for(let[r,o]of Object.entries(Al))if(o.includes(n.property)){t.add(r);break}if(t.size===1)return[...t][0]}function Li(e,t,n){if(t===n)return e;let r=sr(t),o=sr(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 $d={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 sr(e){var t;return(t=$d[e])!=null?t:`[${e}px]`}var Ol={"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=Ol[t];if(!o)return null;let i=sr(n);for(let s of o){let l=new RegExp("(?:^|\\s)((?:[\\w-]+:)*"+s+"-(?:"+Yd(i)+"|\\["+n+"px\\]))(?:\\s|$)"),a=e.match(l);if(a!=null&&a[1]){let d=sr(r),c=a[1].lastIndexOf(":"),p=c>=0?a[1].slice(0,c+1):"";return{matched:a[1],suggested:`${p}${s}-${d}`}}}return null}function Yd(e){return e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function Nl(e,t,n){let r=new Set,o=[];for(let i of e){let s=wn(i.element),l=`${s}::${i.property}`;if(r.has(l))continue;r.add(l);let a=Ar(i.element),d=i.element.className||"",c=Wd(d,i.property,t,n);o.push({selector:s,reactComponent:a==null?void 0:a.name,className:d,property:i.property,matchedClass:c==null?void 0:c.matched,suggestedClass:c==null?void 0:c.suggested})}return o}function lr(e,t){return window.getComputedStyle(e).getPropertyValue(t)}function Ai(e,t){if(e instanceof HTMLElement){let r=e.style.getPropertyValue(t);if(r)return r}let n=jd(e,t);return n&&n.includes("var(")?n:lr(e,t)}function jd(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 Nr(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 Dr(e){let t=window.getComputedStyle(e).display;return t==="flex"||t==="inline-flex"||t==="grid"||t==="inline-grid"}function ar(e){let t=window.getComputedStyle(e);return{row:parseFloat(t.rowGap)||0,column:parseFloat(t.columnGap)||0}}function Gd(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 So(e){let t=Array.from(e.children).filter(a=>{if(!(a instanceof HTMLElement))return!1;let d=window.getComputedStyle(a);return d.display!=="none"&&d.position!=="absolute"&&d.position!=="fixed"});if(t.length<2)return[];let n=[],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 d=t[a].getBoundingClientRect(),c=t[a+1].getBoundingClientRect();if(c.left>d.right+.5&&n.push({axis:"column",x:d.right,y:r.top,w:c.left-d.right,h:r.height}),c.top>d.bottom+.5&&n.push({axis:"row",x:r.left,y:d.bottom,w:r.width,h:c.top-d.bottom}),!(c.left>d.right+.5)&&!(c.top>d.bottom+.5))if(s){let p=(d.bottom+c.top)/2;n.push({axis:"row",x:r.left,y:p-l/2,w:r.width,h:l})}else{let p=(d.right+c.left)/2;n.push({axis:"column",x:p-l/2,y:r.top,w:l,h:r.height})}}return Gd(n)}function Pi(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 Wo(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 wo(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 Bi(e){for(let t of e.childNodes)if(t.nodeType===Node.TEXT_NODE&&(t.textContent||"").trim().length>0)return!0;return!1}function Yo(e){var c,p;let t=document.createRange(),n=!1;for(let u of e.childNodes)u.nodeType===Node.TEXT_NODE&&(u.textContent||"").trim().length>0&&(n||(t.setStart(u,0),n=!0),t.setEnd(u,(p=(c=u.textContent)==null?void 0:c.length)!=null?p:0));if(!n)return null;let 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),d=(a-r.height)/2;return new DOMRect(r.x,r.y-d,r.width,a)}function cr(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 Ge(e,t,n){e instanceof HTMLElement&&e.style.setProperty(t,n,"important")}function Oi(e,t,n){e instanceof HTMLElement&&e.style.removeProperty(t)}function Hr(e){var t;for(let n of e){let r=pn(n.selector);if(!r&&n.durableSelector&&(r=pn(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)Ge(r,o.property,o.modified)}}function Ni(e,t){let n=pn(e);if(!n)return;let r=t.find(o=>o.selector===e);if(r)for(let o of r.changes)Oi(n,o.property,o.original)}function Fr(e){for(let t of e){let n=pn(t.selector);if(n)for(let r of t.changes)Oi(n,r.property,r.original)}}function Hl(e,t,n,r){if(e)for(let o of e){if(o instanceof CSSGroupingRule){Hl(o.cssRules,t,n,r);continue}if(o instanceof CSSStyleRule){let i=o.selectorText.toLowerCase();(i===":root"||i==="html"||i==="*"||i.includes(":root"))&&Vd(o.style,t,n,r)}}}function Vd(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();Fl(s)&&r.push({name:i,value:s,usage:`var(${i})`})}}}var _r=null,Ud=5e3;function Di(){if(_r&&Date.now()-_r.timestamp<Ud)return _r.variables;let e=[],t=new Set,n=getComputedStyle(document.documentElement);try{for(let i of document.styleSheets)try{Hl(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();Fl(l)&&e.push({name:s,value:l,usage:`var(${s})`})}}let o=e.sort((i,s)=>i.name.localeCompare(s.name));return _r={variables:o,timestamp:Date.now()},o}function Fl(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 dr(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 ur(e,t){if(!e)return null;let n=Dl(e);if(!n)return null;for(let r of t){let o=Dl(r.value);if(o&&n===o)return r}return null}function Dl(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 Co,jsx as at,jsxs as zn}from"react/jsx-runtime";var Ln=22,oo=12,Jd=3,Xd=250,zr=["reviewing","considering","thinking","zhuzhing","iterating","tweaking","reflecting","noodling","pondering","finessing","polishing","riffing"],Kd=3e3;function qd(s){var l=s,{left:e,top:t,avoidBottom:n,style:r,children:o}=l,i=no(l,["left","top","avoidBottom","style","children"]);let a=e+oo,d=t+oo,c=n!==void 0?`${n}px`:"100vh";return at("div",b(f({"data-devtools":"badge-hit-area"},i),{style:f({position:"fixed",left:e,top:t,padding:oo},r),children:at("div",{style:{transform:`translate(min(0px, calc(100vw - ${a}px - 100%)), min(0px, calc(${c} - ${d}px - 100%)))`},children:o})}))}function $l({annotations:e,supersededAnnotations:t,inFlightIds:n,scrollX:r,scrollY:o,annotationGroupMap:i,onViewThread:s,onSelectAnnotation:l,onHoverAnnotation:a,canvasRef:d}){var v,O,Z,N,R,$,C;let[c,p]=pr(0),[u,g]=pr(()=>Math.floor(Math.random()*zr.length)),E=!!(n&&n.size>0);$r(()=>{if(!E)return;let L=setInterval(()=>{p(ge=>(ge+1)%Jd)},Xd),X=setInterval(()=>{g(ge=>(ge+1)%zr.length)},Kd);return()=>{clearInterval(L),clearInterval(X)}},[E]);let w=[];for(let L of e){if(L.type!=="text"||!L.text||!L.points[0]||t.has(L))continue;let X=L.groupId?e.filter(Be=>Be.groupId===L.groupId):[L],ge=!!(n&&(n.has(L.id)||X.some(Be=>n.has(Be.id)))),ve=(v=L.status)!=null?v:"pending",ye=X.some(Be=>Be.status==="resolved"||Be.status==="needs_review"),ae=X.some(Be=>Be.threadId);if(!ge&&ve!=="resolved"&&ve!=="needs_review"&&!ye&&!ae)continue;let ze=L.threadId||((O=X.find(Be=>Be.threadId))==null?void 0:O.threadId),Me=ve==="needs_review"||X.some(Be=>Be.status==="needs_review"),ne=X.reduce((Be,De)=>{var z;return Be+((z=De.replyCount)!=null?z:0)},0),He=L.points[0],Ne=L.fontSize||12,Ve=Ne*1.4,$e=i.get(L.id),Ie=L.text.replace(/\n/g," "),st=$e!==void 0?$e+". "+Ie:Ie,ct=(N=(Z=d==null?void 0:d.current)==null?void 0:Z.getContext("2d"))!=null?N:document.createElement("canvas").getContext("2d");if(!ct)continue;ct.font=`${Ne}px ${Jt}`;let _=He.x-r,xe=Ho(_),ce=Fo(ct,st,xe),Se=ct.measureText(ce).width;w.push({id:L.id,threadId:ze,linkedSelector:L.linkedSelector||((R=X.find(Be=>Be.linkedSelector))==null?void 0:R.linkedSelector),x:He.x+Se+4,y:He.y-4,size:Ve+8,color:L.color,isInFlight:ge,isNeedsReview:Me,replyCount:ne})}if(w.length===0)return null;let I=2,A=(C=($=d==null?void 0:d.current)==null?void 0:$.getContext("2d"))!=null?C:document.createElement("canvas").getContext("2d"),U=w.map(L=>{var ae;let X;L.isInFlight?X=(ae=zr[u])!=null?ae:"thinking":L.replyCount>0?X=`${L.replyCount} ${L.replyCount===1?"reply":"replies"}`:L.threadId?X="1 reply":X="Cancelled";let ge=11,ve=4,ye=X.length*7.2;return A&&(A.font=`12px ${Jt}`,ye=A.measureText(X).width),4+ge+ve+ye+4}),B=typeof window!="undefined"?window.innerHeight:9999,y=[];for(let L=0;L<w.length;L++){let X=w[L].y-o,ge=Math.min(X,B-Ln),ve=ge+Ln,ae=w[L].x-r;for(let ze=0;ze<L;ze++){let Me=w[ze].y-o,ne=Math.min(Me,B-Ln),He=ne+Ln;if(!(ge<He&&ve>ne))continue;let Ve=y[ze]+U[ze];ae<Ve+I&&(ae=Ve+I)}y.push(ae)}return at(Co,{children:w.map((L,X)=>{let ge=!!L.threadId;return at(qd,{left:y[X]-oo,top:L.y-o-oo,onMouseDown:ge?ve=>ve.stopPropagation():void 0,onClick:ge?ve=>{if(ve.stopPropagation(),l==null||l(L.id),s==null||s(L.threadId),L.linkedSelector)try{let ye=document.querySelector(L.linkedSelector);if(ye){let ae=ye.getBoundingClientRect();(ae.bottom<0||ae.top>window.innerHeight)&&ye.scrollIntoView({behavior:"smooth",block:"center"})}}catch(ye){}}:void 0,onMouseEnter:a?()=>a(L.id):void 0,onMouseLeave:a?()=>a(null):void 0,style:{pointerEvents:ge?"auto":"none",cursor:ge?"pointer":void 0,zIndex:9999},children:at("div",{"data-devtools":"annotation-badge",style:{height:L.size,display:"flex",alignItems:"center",backgroundColor:L.color,fontFamily:Jt,fontSize:12,color:"#ffffff",userSelect:"none",padding:`0 ${4}px`,gap:4,whiteSpace:"nowrap"},children:L.isInFlight?zn(Co,{children:[at("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:"currentColor",style:{verticalAlign:"middle"},children:c===1?zn(Co,{children:[at("circle",{cx:"7",cy:"7",r:"2"}),at("circle",{cx:"17",cy:"7",r:"2"}),at("circle",{cx:"7",cy:"17",r:"2"}),at("circle",{cx:"17",cy:"17",r:"2"})]}):zn(Co,{children:[at("circle",{cx:"12",cy:"6",r:"2"}),at("circle",{cx:"6",cy:"12",r:"2"}),at("circle",{cx:"18",cy:"12",r:"2"}),at("circle",{cx:"12",cy:"18",r:"2"})]})}),at("span",{style:{opacity:.7},children:zr[u]})]}):zn(Co,{children:[L.isNeedsReview?at("span",{style:{fontWeight:700},children:"?"}):at("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:at("polyline",{points:"4 12 10 18 20 6"})}),at("span",{style:{opacity:.7},children:L.replyCount>0?`${L.replyCount} ${L.replyCount===1?"reply":"replies"}`:L.threadId?"1 reply":"Cancelled"})]})})},L.id)})})}function Hi({inFlightSelectorColors:e,animated:t=!0}){let[n,r]=pr([]);return $r(()=>{if(e.size===0){r([]);return}let o=null,i=()=>{let a=[];for(let[d,c]of e){let p=pn(d);if(!p)continue;let u=p.getBoundingClientRect();a.push({selector:d,top:u.top,left:u.left,width:u.width,height:u.height,color:c})}r(a)},s=()=>{o&&cancelAnimationFrame(o),o=requestAnimationFrame(i)};i(),window.addEventListener("scroll",s,!0),window.addEventListener("resize",s,!0);let l=new MutationObserver(s);return l.observe(document.body,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["style","class"]}),()=>{window.removeEventListener("scroll",s,!0),window.removeEventListener("resize",s,!0),l.disconnect(),o&&cancelAnimationFrame(o)}},[e]),n.length===0?null:zn(Co,{children:[t&&at("style",{children:"@keyframes popmelt-march { to { stroke-dashoffset: -6; } }"}),n.map(o=>at("div",{"data-devtools":"marching-ants",style:{position:"fixed",top:o.top,left:o.left,width:o.width,height:o.height,pointerEvents:"none",zIndex:9995,overflow:"visible"},children:at("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible"},children:at("rect",{x:"0.5",y:"0.5",width:Math.max(0,o.width-1),height:Math.max(0,o.height-1),fill:"none",stroke:o.color,strokeWidth:"1",strokeDasharray:"2 4",style:t?{animation:"popmelt-march 0.5s steps(2) infinite"}:void 0})})},o.selector))]})}function Wl({annotations:e,supersededAnnotations:t,scrollX:n,scrollY:r,onReply:o,annotationGroupMap:i,canvasRef:s,onHoverAnnotation:l}){let a=e.filter(p=>t.has(p)?!1:p.status==="waiting_input"&&p.question&&p.threadId);if(a.length===0)return null;let d=new Set,c=[];for(let p of a){if(!p.threadId||d.has(p.threadId))continue;d.add(p.threadId);let u=p.type==="text"?p:e.find(g=>g.groupId&&g.groupId===p.groupId&&g.type==="text")||p;if(u.type==="text"&&u.text&&u.points[0]){let g=u.points[0],E=u.fontSize||12,w=E*1.4,I=i.get(u.id),A=u.text.replace(/\n/g," "),U=I!==void 0?I+". "+A:A,y=document.createElement("canvas").getContext("2d");if(!y)continue;y.font=`${E}px ${Jt}`;let v=g.x-n,O=Ho(v),Z=Fo(y,U,O),N=y.measureText(Z).width;c.push({annotation:p,x:g.x+N+4,y:g.y-4,size:w+8})}}return c.length===0?null:at(Co,{children:c.map(({annotation:p,x:u,y:g,size:E})=>at(Zd,{annotation:p,x:u-n,y:g-r,size:E,onReply:o,onHoverAnnotation:l},`question-${p.threadId}`))})}function Zd({annotation:e,x:t,y:n,size:r,onReply:o,onHoverAnnotation:i}){let[s,l]=pr(!1),[a,d]=pr(""),c=zl(null),p=zl(null);$r(()=>{s&&c.current&&c.current.focus()},[s]),$r(()=>{if(!s)return;let I=U=>{p.current&&!U.composedPath().includes(p.current)&&l(!1)},A=U=>{U.key==="Escape"&&l(!1)};return document.addEventListener("mousedown",I),document.addEventListener("keydown",A),()=>{document.removeEventListener("mousedown",I),document.removeEventListener("keydown",A)}},[s]);let u=_l(()=>{!a.trim()||!e.threadId||(o(e.threadId,a.trim()),d(""),l(!1))},[a,e.threadId,o]),g=_l(I=>{I.key==="Enter"&&(I.metaKey||I.ctrlKey)&&(I.preventDefault(),u())},[u]),E=s?t:t-oo,w=s?n:n-oo;return zn("div",{ref:p,"data-devtools":"question-badge",onMouseEnter:i?()=>i(e.id):void 0,onMouseLeave:i?()=>i(null):void 0,style:{position:"fixed",left:`max(0px, ${E}px)`,top:`max(0px, ${w}px)`,padding:s?0:oo,transform:`translate(min(0px, calc(100vw - max(0px, ${E}px) - 100%)), min(0px, calc(100vh - max(0px, ${w}px) - 100%)))`,zIndex:s?10002:9999,pointerEvents:"auto",cursor:s?void 0:"pointer"},children:[!s&&zn("div",{onClick:()=>l(!0),style:{height:r,display:"flex",alignItems:"center",backgroundColor:e.color,padding:`0 ${4}px`,gap:4,fontFamily:Jt,fontSize:12,color:"#ffffff",whiteSpace:"nowrap"},children:[zn("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",children:[at("line",{x1:"12",y1:"3",x2:"12",y2:"9"}),at("line",{x1:"12",y1:"15",x2:"12",y2:"21"}),at("line",{x1:"3",y1:"12",x2:"9",y2:"12"}),at("line",{x1:"15",y1:"12",x2:"21",y2:"12"})]}),at("span",{style:{opacity:.7},children:"reply?"})]}),s&&zn("div",{style:{minWidth:260,maxWidth:360,backgroundColor:"#eaeaea",fontFamily:Jt,fontSize:12,color:"#1f2937",border:"1px solid rgba(0, 0, 0, 0.1)"},children:[at("div",{style:{padding:`${6}px ${8}px`,lineHeight:1.4},children:e.question}),zn("div",{style:{padding:`0 ${4}px ${4}px`},children:[at("textarea",{ref:c,value:a,onChange:I=>d(I.target.value),onKeyDown:g,placeholder:"Type your reply...",style:{width:"100%",minHeight:40,padding:4,fontSize:12,fontFamily:Jt,backgroundColor:"rgba(0, 0, 0, 0.04)",color:"#1f2937",border:"1px solid rgba(0, 0, 0, 0.1)",borderRadius:0,outline:"none",resize:"vertical",lineHeight:1.4,boxSizing:"border-box"}}),at("div",{style:{display:"flex",justifyContent:"flex-end",marginTop:4},children:at("button",{onClick:u,disabled:!a.trim(),style:{padding:"4px 12px",fontSize:11,fontFamily:Jt,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 Wr(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,d)=>d.timestamp-a.timestamp);let l=s[0];l.groupId&&o.add(l.groupId);for(let a=1;a<s.length;a++){let d=s[a];t.add(d),d.groupId&&r.add(d.groupId)}}for(let s of e)s.groupId&&r.has(s.groupId)&&!o.has(s.groupId)&&t.add(s);return t}import{useEffect as Yl,useLayoutEffect as Qd,useState as jl}from"react";import{jsx as Fi,jsxs as Vl}from"react/jsx-runtime";function eu(e,t){let n=e.match(/^oklch\(([^)]+)\)$/i);return n?`oklch(${n[1]} / ${t})`:`color-mix(in srgb, ${e} ${Math.round(t*100)}%, transparent)`}var Gl=["top-left","top-right","bottom-right","bottom-left"];function Ul({element:e,radius:t,accentColor:n,hoveredCorner:r,draggingCorner:o,cursorViewport:i}){let[s,l]=jl(null),[a,d]=jl(!1);if(Yl(()=>{let A=y=>{(y.key==="Meta"||y.key==="Control")&&d(!0)},U=y=>{(y.key==="Meta"||y.key==="Control")&&d(!1)},B=()=>d(!1);return window.addEventListener("keydown",A,!0),window.addEventListener("keyup",U,!0),window.addEventListener("blur",B),()=>{window.removeEventListener("keydown",A,!0),window.removeEventListener("keyup",U,!0),window.removeEventListener("blur",B)}},[]),Yl(()=>{if(!e){l(null);return}let A=()=>{l(e.getBoundingClientRect())};return A(),window.addEventListener("scroll",A,{passive:!0}),window.addEventListener("resize",A,{passive:!0}),()=>{window.removeEventListener("scroll",A),window.removeEventListener("resize",A)}},[e]),Qd(()=>{e&&l(e.getBoundingClientRect())},[e,t["top-left"],t["top-right"],t["bottom-right"],t["bottom-left"]]),!s)return null;let c=s.width,p=s.height,u=eu(n,.2),g={"top-left":{x:0,y:t["top-left"]},"top-right":{x:c,y:t["top-right"]},"bottom-right":{x:c,y:p-t["bottom-right"]},"bottom-left":{x:0,y:p-t["bottom-left"]}},E=new Set,w=o!=null?o:r;if(w)if(a)E.add(w);else for(let A of Gl)E.add(A);let I={position:"fixed",top:s.top,left:s.left,width:c,height:p,pointerEvents:"none",zIndex:9996,overflow:"visible"};return Vl("div",{"data-devtools":"border-radius-handles",style:I,children:[Vl("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${c} ${p}`,children:[Fi("rect",{x:"0.5",y:"0.5",width:Math.max(0,c-1),height:Math.max(0,p-1),fill:"none",stroke:u,strokeWidth:"1"}),Gl.map(A=>{let U=g[A],B=E.has(A);return Fi("circle",{cx:U.x,cy:U.y,r:A===(o!=null?o:r)?3:2.5,fill:n,stroke:"#ffffff",strokeWidth:A===(o!=null?o:r)?4:2,paintOrder:"stroke"},A)})]}),i&&w&&(()=>{let A=Math.round(t[w]);return Fi("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:A})})()]})}import{useEffect as tu,useState as nu}from"react";function jo(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 ou,jsx as _i,jsxs as fr}from"react/jsx-runtime";function $n({element:e,isSelected:t=!1,elementInfo:n,color:r="#3b82f6",annotationNumber:o,changeCount:i,hideTooltip:s=!1}){let[l,a]=nu(null);if(tu(()=>{if(!e){a(null);return}let v=()=>{let O=e.getBoundingClientRect();a(O)};return v(),window.addEventListener("scroll",v,{passive:!0}),window.addEventListener("resize",v,{passive:!0}),()=>{window.removeEventListener("scroll",v),window.removeEventListener("resize",v)}},[e]),!l||!e)return null;let d={position:"fixed",top:l.top,left:l.left,width:l.width,height:l.height,pointerEvents:"none",zIndex:9996,backgroundColor:jo(r,.05),overflow:"visible"},c=e.tagName.toLowerCase(),p=e.id?`#${e.id}`:"",u=e.classList.length>0?"."+Array.from(e.classList).slice(0,2).join("."):"",g=n==null?void 0:n.reactComponent,E=g?`<${g}> ${c}${p}${u}`:`${c}${p}${u}`,w=22,I=l.height>=window.innerHeight,A=I?0:l.top>=w?l.top-w:l.bottom,U=I?{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:A,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},y=!s&&fr("div",{"data-devtools":"tooltip",style:U,children:[o!==void 0&&fr("span",{children:[o,"."]}),_i("span",{style:{overflow:"hidden",textOverflow:"ellipsis",flex:1,minWidth:0},children:E}),i!==void 0&&i>0&&fr("span",{style:{opacity:.8},children:["(",i," ",i===1?"change":"changes",")"]})]});return fr(ou,{children:[fr("div",{"data-devtools":"highlight",style:d,children:[_i("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},children:_i("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"}))}),I&&y]}),!I&&y]})}import{useEffect as Jl,useLayoutEffect as ru,useState as zi}from"react";import{jsx as Un,jsxs as Wi}from"react/jsx-runtime";function $i(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 Yi({element:e,gap:t,accentColor:n,hoveredAxis:r,draggingAxis:o,cursorViewport:i,isAutoGap:s=!1,refreshKey:l=0}){let[a,d]=zi(null),[c,p]=zi([]),[u,g]=zi(!1);if(Jl(()=>{let N=C=>{(C.key==="Meta"||C.key==="Control")&&g(!0)},R=C=>{(C.key==="Meta"||C.key==="Control")&&g(!1)},$=()=>g(!1);return window.addEventListener("keydown",N,!0),window.addEventListener("keyup",R,!0),window.addEventListener("blur",$),()=>{window.removeEventListener("keydown",N,!0),window.removeEventListener("keyup",R,!0),window.removeEventListener("blur",$)}},[]),Jl(()=>{if(!e){d(null),p([]);return}let N=()=>{d(e.getBoundingClientRect()),p(So(e))};return N(),window.addEventListener("scroll",N,{passive:!0}),window.addEventListener("resize",N,{passive:!0}),()=>{window.removeEventListener("scroll",N),window.removeEventListener("resize",N)}},[e]),ru(()=>{e&&(d(e.getBoundingClientRect()),p(So(e)))},[e,t.row,t.column,l]),!a||c.length===0)return null;let E=a.width,w=a.height,I="pm-gap-stripe-pattern",A=$i(n,.25),U=$i(n,.1),B=$i(n,.2),y=8,v=2,O={position:"fixed",top:a.top,left:a.left,width:E,height:w,pointerEvents:"none",zIndex:9996,overflow:"visible"},Z=o!=null?o:r;return Wi("div",{"data-devtools":"gap-handles",style:O,children:[Wi("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${E} ${w}`,children:[Un("defs",{children:Un("pattern",{id:I,patternUnits:"userSpaceOnUse",width:"4",height:"4",patternTransform:"rotate(45)",children:Un("line",{x1:"0",y1:"0",x2:"0",y2:"4",stroke:A,strokeWidth:"1.5"})})}),Un("rect",{x:"0.5",y:"0.5",width:Math.max(0,E-1),height:Math.max(0,w-1),fill:"none",stroke:B,strokeWidth:"1"}),c.map((N,R)=>{let $=N.x-a.left,C=N.y-a.top,L=N.w,X=N.h,ge=u?N.axis===Z:!0;return(N.axis==="row"?t.row:t.column)===0?null:Wi("g",{opacity:ge?1:.6,children:[Un("rect",{x:$,y:C,width:L,height:X,fill:U}),Un("rect",{x:$,y:C,width:L,height:X,fill:`url(#${I})`})]},R)}),Z&&(()=>{let N=c.filter(He=>He.axis===Z);if(N.length===0)return null;let R=N[0];if(i&&N.length>1){let He=1/0;for(let Ne of N){let Ve=Ne.x+Ne.w/2,$e=Ne.y+Ne.h/2,Ie=Math.abs(i.x-Ve)+Math.abs(i.y-$e);Ie<He&&(He=Ie,R=Ne)}}let $=R.x-a.left,C=R.y-a.top,L=R.w,X=R.h,ge=$+L/2,ve=C+X/2;if(s)return Un("circle",{cx:ge,cy:ve,r:1.5,fill:n,stroke:"#ffffff",strokeWidth:4,paintOrder:"stroke"});let ye=Z==="column",ae=ye?v:y,ze=ye?y:v,Me=ge-ae/2,ne=ve-ze/2;return Un("rect",{x:Me,y:ne,width:ae,height:ze,fill:n,stroke:"#ffffff",strokeWidth:4,paintOrder:"stroke"})})()]}),i&&Z&&(()=>{let N=s?"auto":String(Math.round(Z==="row"?t.row:t.column));return Un("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:N})})()]})}import{useCallback as cu,useEffect as du,useState as uu}from"react";import{useEffect as iu,useState as Xl}from"react";var su=3,lu=250,ji=["reviewing","considering","thinking","zhuzhing","iterating","tweaking","reflecting","noodling","pondering","finessing","polishing","riffing"],au=3e3;function Kl(e){let[t,n]=Xl(0),[r,o]=Xl(()=>Math.floor(Math.random()*ji.length));return iu(()=>{if(!e)return;let i=setInterval(()=>n(l=>(l+1)%su),lu),s=setInterval(()=>o(l=>(l+1)%ji.length),au);return()=>{clearInterval(i),clearInterval(s)}},[e]),{charIndex:t,word:ji[r]}}import{Fragment as Gi,jsx as Cn,jsxs as Go}from"react/jsx-runtime";function pu(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 ql=22,Vi=12;function fu(s){var l=s,{left:e,top:t,avoidBottom:n,style:r,children:o}=l,i=no(l,["left","top","avoidBottom","style","children"]);let a=n!==void 0?`${n}px`:"100vh";return Cn("div",b(f({"data-devtools":"badge-hit-area"},i),{style:f({position:"fixed",left:`max(0px, ${e}px)`,top:`max(0px, ${t}px)`,padding:Vi,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 U;let[a,d]=uu([]),c=i&&i.size>0,{charIndex:p,word:u}=Kl(!!c);du(()=>{if(t){d([]);return}let B=null,y=()=>{let Z=[];e.forEach((N,R)=>{let $=pn(N.selector);if(!$)return;let C=$.getBoundingClientRect();Z.push({selector:N.selector,modIndex:R,top:C.top>=ql?C.top-ql:C.bottom,left:C.left,label:pu(N),changeCount:N.changes.length,annotationNumber:r+R+1})}),d(Z)},v=()=>{B&&cancelAnimationFrame(B),B=requestAnimationFrame(y)};y(),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(),B&&cancelAnimationFrame(B)}},[e,t,r]);let g=cu(B=>{let y=e[B];if(!y)return;let v=pn(y.selector);v&&(o({type:"SELECT_ANNOTATION",payload:{id:null}}),o({type:"SET_TOOL",payload:"inspector"}),o({type:"SELECT_ELEMENT",payload:{el:v,info:y.element}}))},[e,o]);if(a.length===0)return null;let E=(U=s==null?void 0:s.current)==null?void 0:U.getBoundingClientRect(),w=E?E.top-8:void 0,I={display:"flex",alignItems:"center",gap:6,backgroundColor:n,color:"#fff",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',padding:"4px 8px",borderRadius:0,whiteSpace:"nowrap",maxWidth:400},A={overflow:"hidden",textOverflow:"ellipsis",flex:1,minWidth:0};return Cn(Gi,{children:a.map(B=>{let y=i==null?void 0:i.has(B.selector);return Cn(fu,{left:B.left-Vi,top:B.top-Vi,avoidBottom:w,onClick:()=>g(B.modIndex),onMouseEnter:l?()=>l(B.selector):void 0,onMouseLeave:l?()=>l(null):void 0,style:{zIndex:1e4,cursor:"pointer",pointerEvents:"auto"},children:Go("div",{"data-devtools":"badge",style:b(f({},I),{backgroundColor:y?"#999999":n}),children:[Go("span",{children:[B.annotationNumber,"."]}),Cn("span",{style:A,children:B.label}),Go("span",{style:{opacity:.8},children:["(",B.changeCount," ",B.changeCount===1?"change":"changes",")"]}),y&&Go("span",{style:{opacity:.8,marginLeft:4,display:"inline-flex",alignItems:"center",gap:4},children:[Cn("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:"currentColor",style:{verticalAlign:"middle"},children:p===1?Go(Gi,{children:[Cn("circle",{cx:"7",cy:"7",r:"2"}),Cn("circle",{cx:"17",cy:"7",r:"2"}),Cn("circle",{cx:"7",cy:"17",r:"2"}),Cn("circle",{cx:"17",cy:"17",r:"2"})]}):Go(Gi,{children:[Cn("circle",{cx:"12",cy:"6",r:"2"}),Cn("circle",{cx:"6",cy:"12",r:"2"}),Cn("circle",{cx:"18",cy:"12",r:"2"}),Cn("circle",{cx:"12",cy:"18",r:"2"})]})}),u]})]})},B.selector)})})}import{useEffect as gu,useState as mu}from"react";import{Fragment as yu,jsx as Ql}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 ea({styleModifications:e,accentColor:t}){let[n,r]=mu([]);if(gu(()=>{let i=null,s=()=>{let d=[];for(let c of e){let p=pn(c.selector);if(!p)continue;let u=p.getBoundingClientRect();if(u.width===0&&u.height===0)continue;let g=wo(p);d.push({selector:c.selector,top:u.top,left:u.left,width:u.width,height:u.height,borderRadius:`${g["top-left"]}px ${g["top-right"]}px ${g["bottom-right"]}px ${g["bottom-left"]}px`})}r(d)},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=hu(t,.2);return Ql(yu,{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 Ql("div",{"data-devtools":"mod-border",style:s},i.selector)})})}import{useEffect as ta,useLayoutEffect as bu,useState as na}from"react";import{jsx as ro,jsxs as Ji}from"react/jsx-runtime";function Ui(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 xu={top:"bottom",bottom:"top",left:"right",right:"left"};function Xi({element:e,padding:t,accentColor:n,hoveredSide:r,draggingSide:o,cursorViewport:i,refreshKey:s}){let[l,a]=na(null),[d,c]=na(!1);if(ta(()=>{let L=ve=>{(ve.key==="Meta"||ve.key==="Control")&&c(!0)},X=ve=>{(ve.key==="Meta"||ve.key==="Control")&&c(!1)},ge=()=>c(!1);return window.addEventListener("keydown",L,!0),window.addEventListener("keyup",X,!0),window.addEventListener("blur",ge),()=>{window.removeEventListener("keydown",L,!0),window.removeEventListener("keyup",X,!0),window.removeEventListener("blur",ge)}},[]),ta(()=>{if(!e){a(null);return}let L=()=>{a(e.getBoundingClientRect())};return L(),window.addEventListener("scroll",L,{passive:!0}),window.addEventListener("resize",L,{passive:!0}),()=>{window.removeEventListener("scroll",L),window.removeEventListener("resize",L)}},[e]),bu(()=>{e&&a(e.getBoundingClientRect())},[e,t.top,t.right,t.bottom,t.left,s]),!l)return null;let p=l.width,u=l.height,{top:g,right:E,bottom:w,left:I}=t,A="pm-stripe-pattern",U=Ui(n,.25),B=Ui(n,.1),y=Ui(n,.2),v=8,O=2,Z={position:"fixed",top:l.top,left:l.left,width:p,height:u,pointerEvents:"none",zIndex:9996,overflow:"visible"},N=["top","right","bottom","left"],R={top:`0,0 ${p},0 ${p-E},${g} ${I},${g}`,right:`${p},0 ${p},${u} ${p-E},${u-w} ${p-E},${g}`,bottom:`0,${u} ${I},${u-w} ${p-E},${u-w} ${p},${u}`,left:`0,0 ${I},${g} ${I},${u-w} 0,${u}`},$={top:{x:p/2-v/2,y:g/2-O/2,w:v,h:O},bottom:{x:p/2-v/2,y:u-w/2-O/2,w:v,h:O},left:{x:I/2-O/2,y:u/2-v/2,w:O,h:v},right:{x:p-E/2-O/2,y:u/2-v/2,w:O,h:v}},C=new Set;return o?C.add(o):r&&(C.add(r),d||C.add(xu[r])),Ji("div",{"data-devtools":"padding-handles",style:Z,children:[Ji("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${p} ${u}`,children:[ro("defs",{children:ro("pattern",{id:A,patternUnits:"userSpaceOnUse",width:"4",height:"4",patternTransform:"rotate(45)",children:ro("line",{x1:"0",y1:"0",x2:"0",y2:"4",stroke:U,strokeWidth:"1.5"})})}),ro("rect",{x:"0.5",y:"0.5",width:Math.max(0,p-1),height:Math.max(0,u-1),fill:"none",stroke:y,strokeWidth:"1"}),N.map(L=>{if(t[L]<=0)return null;let ge=C.has(L);return Ji("g",{opacity:ge?1:.6,children:[ro("polygon",{points:R[L],fill:B}),ro("polygon",{points:R[L],fill:`url(#${A})`})]},L)}),N.map(L=>{let X=$[L],ge=C.has(L);return ro("rect",{x:X.x,y:X.y,width:X.w,height:X.h,fill:n,stroke:"#ffffff",strokeWidth:ge?4:2,paintOrder:"stroke"},`handle-${L}`)})]}),i&&(r||o)&&(()=>{let L=o!=null?o:r,X=Math.round(t[L]);return ro("div",{style:{position:"fixed",left:i.x+8,top:i.y-28,background:n,color:"#fff",fontSize:11,fontWeight:600,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',lineHeight:1,padding:"4px 4px",borderRadius:0,whiteSpace:"nowrap",pointerEvents:"none",zIndex:9997},children:X})})()]})}import{useCallback as Wn,useEffect as An,useMemo as Xr,useRef as vn,useState as tn}from"react";import{Check as Jr,ChevronDown as os,MoveHorizontal as ga,RotateCcw as ju,Shrink as Gu,X as Vu}from"lucide-react";var vu="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMicgaGVpZ2h0PScxMic+PGRlZnM+PHBhdHRlcm4gaWQ9J2QnIHdpZHRoPSc0JyBoZWlnaHQ9JzQnIHBhdHRlcm5Vbml0cz0ndXNlclNwYWNlT25Vc2UnPjxwYXRoIGQ9J00tMSwxIGwyLC0yIE0wLDQgbDQsLTQgTTMsNSBsMiwtMicgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPScuNScvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9JzEyJyBoZWlnaHQ9JzEyJyBmaWxsPSd1cmwoI2QpJy8+PC9zdmc+",io={borderWidth:3,borderStyle:"solid",borderImage:`url("${vu}") 4 / 1.9 / 0 round`};var Yr={"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 Vo(e){var t,n;return(n=(t=Yr[e])==null?void 0:t[0])!=null?n:"px"}function so(e){let t=e.match(/^([\d.-]+)(.*)$/);return t?{num:parseFloat(t[1]),unit:t[2]||""}:{num:0,unit:""}}function jr(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}=so(n);return`${s}${l||Vo(t)}`}return`${s}${Vo(t)}`}return o}function Ki(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 Su,useEffect as wu,useRef as oa,useState as Cu}from"react";import{Plus as ra,X as Eu}from"lucide-react";import{jsx as xn,jsxs as Eo}from"react/jsx-runtime";var Gr=[{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 ku(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 qi(e){return e.length===0?"none":e.map(t=>{var o;let n=Gr.find(i=>i.name===t.name),r=(o=n==null?void 0:n.unit)!=null?o:"";return`${t.name}(${t.value}${r})`}).join(" ")}function ia({value:e,onChange:t,accentColor:n,modified:r,panelContentRef:o}){let i=ku(e),[s,l]=Cu(!1),a=oa(null),d=oa(null);wu(()=>{if(!s)return;let B=y=>{a.current&&!y.composedPath().includes(a.current)&&l(!1)};return document.addEventListener("mousedown",B,!0),()=>document.removeEventListener("mousedown",B,!0)},[s]);let c=Gr.filter(B=>!i.some(y=>y.name===B.name)),p=B=>{let y=[...i,{name:B.name,value:B.defaultValue}];t(qi(y)),l(!1)},u=B=>{let y=i.filter((v,O)=>O!==B);t(qi(y))},g=(B,y)=>{let v=i.map((O,Z)=>Z===B?b(f({},O),{value:y}):O);t(qi(v))},E={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=Su(B=>{var C;if(!d.current)return{position:"fixed",top:0,left:0};let y=d.current.getBoundingClientRect(),v=d.current.closest('[data-devtools="panel"]'),O=v?v.getBoundingClientRect():{top:0,left:0,bottom:9999},Z=(C=o==null?void 0:o.current)==null?void 0:C.getBoundingClientRect(),N=B*24+8,$=O.bottom-y.bottom<N;return b(f({position:"fixed"},$?{bottom:O.bottom-y.top+2-O.top}:{top:y.bottom+2-O.top}),{left:Z?Z.left+4-O.left:y.left-O.left,width:Z?Z.width-8:140,zIndex:10001})},[o]),I={backgroundColor:"rgba(255, 255, 255, 0.95)",backdropFilter:"blur(16px)",WebkitBackdropFilter:"blur(16px)",border:"1px solid rgba(0,0,0,0.1)",borderRadius:4,padding:"4px 0",boxShadow:"0 4px 12px rgba(0,0,0,0.1)"},A={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"},U=B=>xn("div",{ref:a,style:f(f({},w(B.length)),I),children:B.map(y=>xn("button",{type:"button",onClick:()=>p(y),style:A,onMouseEnter:v=>{v.currentTarget.style.backgroundColor="rgba(0,0,0,0.05)"},onMouseLeave:v=>{v.currentTarget.style.backgroundColor="transparent"},children:y.label},y.name))});return i.length===0?Eo("div",{children:[Eo("div",{style:{display:"flex",alignItems:"center",gap:4},children:[xn(Jn,{modified:!1,children:xn("input",{type:"text",value:"",placeholder:"\u2014",readOnly:!0,style:b(f({},E),{color:"#999",cursor:"default"})})}),xn("button",{ref:d,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:xn(ra,{size:12})})]}),s&&U(Gr)]}):Eo("div",{style:{display:"flex",flexDirection:"column",gap:4,position:"relative"},children:[i.map((B,y)=>{let v=Gr.find(O=>O.name===B.name);return v?Eo("div",{style:{display:"flex",alignItems:"center",gap:4},children:[xn("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}),xn(Jn,{modified:r,children:Eo("div",{style:{display:"flex",alignItems:"center",gap:4,padding:"0 4px"},children:[xn("input",{type:"range",min:v.min,max:v.max,step:v.step,value:B.value,onChange:O=>g(y,parseFloat(O.target.value)),style:{flex:1,height:2,appearance:"none",WebkitAppearance:"none",background:`linear-gradient(to right, ${n} ${(B.value-v.min)/(v.max-v.min)*100}%, rgba(0,0,0,0.1) ${(B.value-v.min)/(v.max-v.min)*100}%)`,borderRadius:1,outline:"none",cursor:"pointer"}}),xn("input",{type:"number",min:v.min,max:v.max,step:v.step,value:v.unit==="px"||v.unit==="deg"?Math.round(B.value):Math.round(B.value*100)/100,onChange:O=>g(y,parseFloat(O.target.value)||0),style:b(f({},E),{width:44,padding:"2px 4px",textAlign:"right",flexShrink:0})}),v.unit&&xn("span",{style:{fontSize:9,color:"#94a3b8",fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',flexShrink:0,width:16},children:v.unit})]})}),xn("button",{type:"button",onClick:()=>u(y),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:xn(Eu,{size:10})})]},B.name):null}),c.length>0&&Eo("div",{children:[Eo("button",{ref:d,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:[xn(ra,{size:10}),"Add filter"]}),s&&U(c)]})]})}import{useCallback as Jo,useEffect as Ru,useRef as Vr,useState as sa}from"react";import{AlignHorizontalSpaceAround as Lu,AlignVerticalSpaceAround as Au,Columns3 as Pu,Grid2x2 as Bu,RectangleHorizontal as Ou,Rows3 as Nu,UnfoldHorizontal as la,UnfoldVertical as aa}from"lucide-react";import{useCallback as Tu,useEffect as Mu,useRef as gr}from"react";import{jsx as Iu}from"react/jsx-runtime";var Zi=[0,1,2,4,8,12,16,20,24,28,32];function Uo({value:e,onChange:t,onPreview:n,onScrubEnd:r,onReset:o,isModified:i,accentColor:s,defaultUnit:l="rem",snapSteps:a,color:d,style:c,children:p}){let u=gr(null),g=gr(null),E=gr(o),w=gr(i),I=gr(!1);E.current=o,w.current=i,Mu(()=>{let U=y=>{let v=g.current;if(!v)return;v.hasMoved=!0,I.current=y.shiftKey;let O=v.unit==="rem"||v.unit==="em"?.1:1;v.accum+=y.movementX*O;let Z=Math.max(0,Math.round((v.startValue+v.accum)*10)/10);if(y.shiftKey&&a){let N=v.unit==="rem"||v.unit==="em"?parseFloat(getComputedStyle(document.documentElement).fontSize)||16:1,R=v.unit==="rem"||v.unit==="em"?Z*N:Z,$=a[a.length-1];for(let C=0;C<a.length-1;C++){let L=a[C],X=a[C+1];if(R<=(L+X)/2){$=L;break}if(R<X){$=X;break}}R>a[a.length-1]&&($=Math.round(R/8)*8),Z=v.unit==="rem"||v.unit==="em"?Math.round($/N*1e3)/1e3:$}n==null||n(`${Z}${v.unit}`)},B=()=>{let y=g.current;if(!y)return;let v=Math.max(0,Math.round((y.startValue+y.accum)*10)/10);if(I.current&&a){let Z=y.unit==="rem"||y.unit==="em"?parseFloat(getComputedStyle(document.documentElement).fontSize)||16:1,N=y.unit==="rem"||y.unit==="em"?v*Z:v,R=a[a.length-1];for(let $=0;$<a.length-1;$++){let C=a[$],L=a[$+1];if(N<=(C+L)/2){R=C;break}if(N<L){R=L;break}}N>a[a.length-1]&&(R=Math.round(N/8)*8),v=y.unit==="rem"||y.unit==="em"?Math.round(R/Z*1e3)/1e3:R}let O=y.hasMoved&&v!==y.startValue;g.current=null,document.exitPointerLock(),O?t(`${v}${y.unit}`):y.hasMoved?n==null||n(`${y.startValue}${y.unit}`):w.current&&E.current&&E.current(),r==null||r()};return document.addEventListener("mousemove",U),document.addEventListener("mouseup",B),()=>{document.removeEventListener("mousemove",U),document.removeEventListener("mouseup",B)}},[t,n,r]);let A=Tu(U=>{var v;if(U.button!==0)return;U.preventDefault();let B=so(e),y=B.unit&&B.unit!=="px"?B.unit:l;g.current={startValue:B.num,unit:y,accum:0,hasMoved:!1},(v=u.current)==null||v.requestPointerLock()},[e,l]);return Iu("span",{ref:u,onMouseDown:A,title:i?"Click to reset \xB7 Drag to scrub":"Drag to scrub",style:f({color:i?s||"#3b82f6":d||"#999",padding:"0 4px",display:"flex",alignItems:"center",cursor:"ew-resize"},c),children:p})}import{Fragment as Qi,jsx as Ae,jsxs as Xt}from"react/jsx-runtime";function Du({gridCols:e,gridRows:t,gridModified:n,accentColor:r,onColsChange:o,onRowsChange:i}){return Ae(En,{style:{width:100},children:Xt("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",padding:"8px 4px"},children:[Ae("input",{type:"number",min:1,max:12,value:e,onChange:s=>o(parseInt(s.target.value)||1),style:b(f({},en),{width:32,textAlign:"center",padding:2})}),Ae("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"}),Ae("input",{type:"number",min:1,max:12,value:t,onChange:s=>i(parseInt(s.target.value)||1),style:b(f({},en),{width:32,textAlign:"center",padding:2})})]})})}function ca({element:e,getValue:t,getOriginalValue:n,handleChange:r,isModified:o,onResetProperty:i,isCollapsed:s,onToggle:l,sectionHeaderStyle:a,activeDropdown:d,onDropdownChange:c,panelContentRef:p,accentColor:u,onFieldHover:g,preferredUnit:E,onUnitCycle:w}){let I=c,A=t("display"),U=t("flex-direction"),B=da(A,U),y=A==="flex"||A==="inline-flex",v=A==="grid",O=y||v,Z=t("width"),N=t("height"),R=o("width")?Z:Nr(e,"width"),$=o("height")?N:Nr(e,"height"),C=es(Z,R),L=es(N,$),X=t("min-width"),ge=t("max-width"),ve=t("min-height"),ye=t("max-height"),ae=Xo(t("padding")),ze=t("gap"),Me=t("row-gap"),ne=t("column-gap"),He=t("grid-template-columns"),Ne=t("grid-template-rows"),Ve=t("overflow"),$e=He.split(/\s+/).filter(Q=>Q&&Q!=="none").length||1,Ie=Ne.split(/\s+/).filter(Q=>Q&&Q!=="none").length||1,[st,ct]=sa(!1),_=d!==null,xe=_||st,ce=_?.3:st?.65:1,Se=({mode:Q,icon:Fe,active:tt})=>Ae("button",{type:"button",onClick:()=>ua(Q,r),style:{flex:1,display:"flex",alignItems:"center",justifyContent:"center",padding:"6px 8px",border:"none",borderRadius:2,backgroundColor:tt?jo(u,.15):"transparent",color:tt?u:"#64748b",cursor:"pointer",fontSize:14},children:Fe}),Be=(Q,Fe,tt)=>{tt==="fixed"?r(Q,Fe):r(Q,Ur(tt,Fe))},De=Q=>{let Fe=Xo(t("padding")),tt=Q||"0";r("padding",`${Fe.top} ${tt} ${Fe.bottom} ${tt}`)},z=Q=>{let Fe=Xo(t("padding")),tt=Q||"0";r("padding",`${tt} ${Fe.right} ${tt} ${Fe.left}`)},[re,se]=sa({}),be=Jo((Q,Fe)=>tt=>{Fe(tt),se(In=>b(f({},In),{[Q]:tt}))},[]),pe=Jo(Q=>{se(Fe=>{let tt=f({},Fe);return delete tt[Q],tt})},[]),ke=Jo(Q=>{let Fe=Xo(t("padding"));Ge(e,"padding",`${Fe.top} ${Q} ${Fe.bottom} ${Q}`)},[e,t]),oe=Jo(Q=>{let Fe=Xo(t("padding"));Ge(e,"padding",`${Q} ${Fe.right} ${Q} ${Fe.left}`)},[e,t]),We=Jo(Q=>Fe=>{Ge(e,Q,Fe)},[e]),Xe=U==="column"||U==="column-reverse",At=Q=>Q==="center"?1:Q==="flex-end"||Q==="end"?2:0,Gt=At(t("justify-content")),it=At(t("align-items")),Vt=Xe?it:Gt,Kt=Xe?Gt:it,St=Vr(null),Ot=Vr({x:0,y:0}),bt=Vr({col:Vt,row:Kt});bt.current={col:Vt,row:Kt};let Et=Jo((Q,Fe)=>{let tt=["flex-start","center","flex-end"];Xe?(r("justify-content",tt[Fe]),r("align-items",tt[Q])):(r("justify-content",tt[Q]),r("align-items",tt[Fe]))},[Xe,r]),rn=Vr(Et);rn.current=Et,Ru(()=>{let Fe=tt=>{let In=St.current;if(!In||!tt.composedPath().includes(In))return;tt.preventDefault(),tt.stopPropagation(),Ot.current.x+=tt.deltaX,Ot.current.y+=tt.deltaY;let{col:$t,row:fn}=bt.current,dn=!1;Math.abs(Ot.current.x)>=30&&($t=Math.max(0,Math.min(2,$t+(Ot.current.x>0?1:-1))),Ot.current.x=0,Ot.current.y=0,dn=!0),!dn&&Math.abs(Ot.current.y)>=30&&(fn=Math.max(0,Math.min(2,fn+(Ot.current.y>0?1:-1))),Ot.current.x=0,Ot.current.y=0,dn=!0),dn&&($t!==bt.current.col||fn!==bt.current.row)&&rn.current($t,fn)};return document.addEventListener("wheel",Fe,{passive:!1,capture:!0}),()=>document.removeEventListener("wheel",Fe,{capture:!0})},[]);let zt=()=>Ae("div",{ref:St,onMouseEnter:()=>{ct(!0),p.current&&(p.current.style.overflowY="hidden")},onMouseLeave:()=>{ct(!1),p.current&&(p.current.style.overflowY="auto")},style:{width:56,height:56,backgroundColor:Fn,borderRadius:2,display:"grid",gridTemplateColumns:"repeat(3, 1fr)",gridTemplateRows:"repeat(3, 1fr)",padding:6,gap:2,touchAction:"none"},children:[0,1,2].map(Q=>[0,1,2].map(Fe=>Ae("button",{type:"button",onClick:()=>Et(Fe,Q),style:{width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center",border:"none",backgroundColor:"transparent",cursor:"pointer",padding:0},children:Fe===Vt&&Q===Kt?Ae("svg",{width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",style:{flexShrink:0},children:Fe===0?Xt(Qi,{children:[Ae("rect",{x:"1",y:"1.5",width:"8",height:"1.2",rx:"0.5",fill:u}),Ae("rect",{x:"1",y:"4.4",width:"5",height:"1.2",rx:"0.5",fill:u}),Ae("rect",{x:"1",y:"7.3",width:"7",height:"1.2",rx:"0.5",fill:u})]}):Fe===1?Xt(Qi,{children:[Ae("rect",{x:"1",y:"1.5",width:"8",height:"1.2",rx:"0.5",fill:u}),Ae("rect",{x:"2.5",y:"4.4",width:"5",height:"1.2",rx:"0.5",fill:u}),Ae("rect",{x:"1.5",y:"7.3",width:"7",height:"1.2",rx:"0.5",fill:u})]}):Xt(Qi,{children:[Ae("rect",{x:"1",y:"1.5",width:"8",height:"1.2",rx:"0.5",fill:u}),Ae("rect",{x:"4",y:"4.4",width:"5",height:"1.2",rx:"0.5",fill:u}),Ae("rect",{x:"2",y:"7.3",width:"7",height:"1.2",rx:"0.5",fill:u})]})}):Ae("div",{style:{width:5,height:5,borderRadius:"50%",backgroundColor:"#aaa"}})},`${Q}-${Fe}`)))}),Mn=o("grid-template-columns")||o("grid-template-rows");return Xt("div",{style:{borderBottom:"1px solid rgba(0,0,0,0.08)"},children:[Ae("div",{style:a,children:Ae("span",{children:O?"Auto layout":"Layout"})}),Xt("div",{style:{padding:"8px 12px"},children:[Xt("div",{style:{display:"flex",gap:2,marginBottom:8,backgroundColor:Fn,borderRadius:2,padding:2,opacity:ce,transition:"opacity 150ms ease"},children:[Ae(Se,{mode:"block",icon:Ae(Ou,{size:16}),active:B==="block"}),Ae(Se,{mode:"flex-col",icon:Ae(Nu,{size:16}),active:B==="flex-col"}),Ae(Se,{mode:"flex-row",icon:Ae(Pu,{size:16}),active:B==="flex-row"}),Ae(Se,{mode:"grid",icon:Ae(Bu,{size:16}),active:B==="grid"})]}),Xt("div",{style:{display:"flex",gap:4,marginBottom:8},children:[Ae(ts,{label:"W",property:"width",cssValue:C==="fixed"?Z:`${Math.round(e.getBoundingClientRect().width)}px`,mode:C,onValueChange:Q=>r("width",Q),onModeChange:Q=>{if(Q==="fixed"){let Fe=e.getBoundingClientRect();r("width",`${Math.round(Fe.width)}px`)}else r("width",Ur(Q,Z))},modified:o("width"),dimmed:_&&d!=="width",dropdownOpen:d==="width",onDropdownChange:Q=>I(Q?"width":null),panelContentRef:p,accentColor:u,onReset:()=>i("width"),minValue:X!=="none"&&X!=="0px"&&X!=="auto"?X:"",maxValue:ge!=="none"&&ge!=="auto"?ge:"",onMinChange:Q=>r("min-width",Q||"0"),onMaxChange:Q=>r("max-width",Q||"none"),onMinReset:()=>i("min-width"),onMaxReset:()=>i("max-width"),minModified:o("min-width"),maxModified:o("max-width")}),Ae(ts,{label:"H",property:"height",cssValue:L==="fixed"?N:`${Math.round(e.getBoundingClientRect().height)}px`,mode:L,onValueChange:Q=>r("height",Q),onModeChange:Q=>{if(Q==="fixed"){let Fe=e.getBoundingClientRect();r("height",`${Math.round(Fe.height)}px`)}else r("height",Ur(Q,N))},modified:o("height"),dimmed:_&&d!=="height",dropdownOpen:d==="height",onDropdownChange:Q=>I(Q?"height":null),panelContentRef:p,minValue:ve!=="none"&&ve!=="0px"&&ve!=="auto"?ve:"",maxValue:ye!=="none"&&ye!=="auto"?ye:"",onMinChange:Q=>r("min-height",Q||"0"),onMaxChange:Q=>r("max-height",Q||"none"),onMinReset:()=>i("min-height"),onMaxReset:()=>i("max-height"),minModified:o("min-height"),maxModified:o("max-height"),accentColor:u,onReset:()=>i("height")})]}),y&&Xt("div",{onMouseEnter:()=>g==null?void 0:g("gap"),onMouseLeave:()=>g==null?void 0:g("element"),style:{display:"flex",gap:8,marginBottom:8},children:[Ae("div",{style:{opacity:_?.3:1,transition:"opacity 150ms ease"},children:zt()}),Xt("div",{style:{flex:1,opacity:ce,transition:"opacity 150ms ease"},children:[Ae("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")?u:"#999",fontWeight:o("gap")?600:400,marginBottom:2,cursor:o("gap")?"pointer":"default"},children:"Gap"}),Ae(En,{dimmed:_,children:Xt("div",{style:{display:"flex",alignItems:"center"},children:[Ae(Uo,{value:ze,onChange:Q=>{pe("gap"),r("gap",Q)},onPreview:be("gap",We("gap")),onScrubEnd:()=>pe("gap"),onReset:()=>i("gap"),isModified:o("gap"),accentColor:u,defaultUnit:E,children:U==="column"||U==="column-reverse"?Ae(aa,{size:12,strokeWidth:o("gap")?2.5:1.5}):Ae(la,{size:12,strokeWidth:o("gap")?2.5:1.5})}),Ae(Hn,{property:"gap",value:re.gap||ze,onChange:Q=>r("gap",Q),isModified:o("gap")||"gap"in re,style:b(f({},en),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:E,onUnitCycle:w})]})})]})]}),v&&Xt("div",{onMouseEnter:()=>g==null?void 0:g("gap"),onMouseLeave:()=>g==null?void 0:g("element"),style:{display:"flex",gap:8,marginBottom:8,opacity:ce,transition:"opacity 150ms ease"},children:[Ae(Du,{gridCols:$e,gridRows:Ie,gridModified:Mn,accentColor:u,onColsChange:Q=>r("grid-template-columns",`repeat(${Q}, 1fr)`),onRowsChange:Q=>r("grid-template-rows",`repeat(${Q}, 1fr)`)}),Xt("div",{style:{flex:1,display:"flex",flexDirection:"column",gap:4},children:[Ae(En,{dimmed:_,children:Xt("div",{style:{display:"flex",alignItems:"center"},children:[Ae(Uo,{value:ne||ze,onChange:Q=>{pe("column-gap"),r("column-gap",Q)},onPreview:be("column-gap",We("column-gap")),onScrubEnd:()=>pe("column-gap"),onReset:()=>i("column-gap"),isModified:o("column-gap"),accentColor:u,defaultUnit:E,children:Ae(la,{size:12,strokeWidth:o("column-gap")?2.5:1.5})}),Ae(Hn,{property:"column-gap",value:re["column-gap"]||ne||ze,onChange:Q=>r("column-gap",Q),isModified:o("column-gap")||"column-gap"in re,placeholder:"col",style:b(f({},en),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:E,onUnitCycle:w})]})}),Ae(En,{dimmed:_,children:Xt("div",{style:{display:"flex",alignItems:"center"},children:[Ae(Uo,{value:Me||ze,onChange:Q=>{pe("row-gap"),r("row-gap",Q)},onPreview:be("row-gap",We("row-gap")),onScrubEnd:()=>pe("row-gap"),onReset:()=>i("row-gap"),isModified:o("row-gap"),accentColor:u,defaultUnit:E,children:Ae(aa,{size:12,strokeWidth:o("row-gap")?2.5:1.5})}),Ae(Hn,{property:"row-gap",value:re["row-gap"]||Me||ze,onChange:Q=>r("row-gap",Q),isModified:o("row-gap")||"row-gap"in re,placeholder:"row",style:b(f({},en),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:E,onUnitCycle:w})]})})]})]}),O&&Xt("div",{onMouseEnter:()=>g==null?void 0:g("padding"),onMouseLeave:()=>g==null?void 0:g("element"),style:{display:"flex",gap:4,marginBottom:8,opacity:ce,transition:"opacity 150ms ease"},children:[Ae(En,{style:{flex:1},dimmed:_,children:Xt("div",{style:{display:"flex",alignItems:"center"},children:[Ae(Uo,{value:ae.left,onChange:Q=>{pe("padding-h"),De(Q)},onPreview:be("padding-h",ke),onScrubEnd:()=>pe("padding-h"),onReset:()=>i("padding"),isModified:o("padding"),accentColor:u,defaultUnit:E,snapSteps:Zi,children:Ae(Lu,{size:12,strokeWidth:o("padding")?2.5:1.5})}),Ae(Hn,{property:"padding",value:re["padding-h"]||ae.left,onChange:Q=>De(Q),isModified:o("padding")||"padding-h"in re,placeholder:"H pad",style:b(f({},en),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:E,onUnitCycle:w})]})}),Ae(En,{style:{flex:1},dimmed:_,children:Xt("div",{style:{display:"flex",alignItems:"center"},children:[Ae(Uo,{value:ae.top,onChange:Q=>{pe("padding-v"),z(Q)},onPreview:be("padding-v",oe),onScrubEnd:()=>pe("padding-v"),onReset:()=>i("padding"),isModified:o("padding"),accentColor:u,defaultUnit:E,snapSteps:Zi,children:Ae(Au,{size:12,strokeWidth:o("padding")?2.5:1.5})}),Ae(Hn,{property:"padding",value:re["padding-v"]||ae.top,onChange:Q=>z(Q),isModified:o("padding")||"padding-v"in re,placeholder:"V pad",style:b(f({},en),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:E,onUnitCycle:w})]})})]}),Xt("label",{style:{display:"flex",alignItems:"center",gap:8,cursor:"pointer",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#64748b",opacity:ce,transition:"opacity 150ms ease"},children:[Ae("input",{type:"checkbox",checked:Ve==="hidden",onChange:Q=>r("overflow",Q.target.checked?"hidden":"visible"),style:{margin:0,accentColor:u}}),"Clip content"]})]})]})}import{AlignCenter as Hu,AlignJustify as Fu,AlignLeft as _u,AlignRight as zu,Baseline as $u,ChevronDown as Wu,WholeWord as Yu}from"lucide-react";import{jsx as yt,jsxs as Xn}from"react/jsx-runtime";var pa={100:"Thin",200:"Extra Light",300:"Light",400:"Regular",500:"Medium",600:"Semi Bold",700:"Bold",800:"Extra Bold",900:"Black"};function fa({element:e,getValue:t,handleChange:n,isModified:r,onResetProperty:o,isCollapsed:i,onToggle:s,sectionHeaderStyle:l,accentColor:a,colorVariables:d,activeColorDropdown:c,onColorDropdownChange:p,panelContentRef:u,preferredUnit:g,onUnitCycle:E}){var L;let w=t("font-family"),I=t("font-size"),A=t("font-weight"),U=t("line-height"),B=t("letter-spacing"),y=t("text-align"),v=t("color"),O=String(A),Z=pa[O]||O,N=dr(e,v),R=v.includes("var(")?null:ur(N,d),$=({align:X,icon:ge})=>{let ve=y===X;return yt("button",{type:"button",onClick:()=>n("text-align",X),style:{flex:1,display:"flex",alignItems:"center",justifyContent:"center",padding:"6px 8px",border:"none",borderRadius:2,backgroundColor:ve?jo(a,.15):"transparent",color:ve?a:"#64748b",cursor:"pointer"},children:ge})},C=((L=w.split(",")[0])==null?void 0:L.trim().replace(/^["']|["']$/g,""))||"System";return Xn("div",{style:{borderBottom:"1px solid rgba(0,0,0,0.08)"},children:[yt("div",{style:l,children:yt("span",{children:"Typography"})}),Xn("div",{style:{padding:"8px 12px",display:"flex",flexDirection:"column",gap:4},children:[yt(En,{children:Xn("div",{style:{display:"flex",alignItems:"center",padding:"6px 8px"},children:[yt("input",{type:"text",value:w,onChange:X=>n("font-family",X.target.value),style:b(f({},en),{flex:1,minWidth:0,padding:0,fontWeight:r("font-family")?600:400,color:r("font-family")?a:"inherit"}),title:w}),yt(Wu,{size:12,style:{color:"#999",flexShrink:0,marginLeft:4}})]})}),Xn("div",{style:{display:"flex",gap:4},children:[yt(En,{style:{flex:1},children:yt("select",{value:O,onChange:X=>n("font-weight",X.target.value),style:b(f({},en),{padding:"6px 8px",paddingLeft:4,paddingRight:20,cursor:"pointer",fontWeight:r("font-weight")?600:400,color:r("font-weight")?a:"inherit"}),children:Object.entries(pa).map(([X,ge])=>yt("option",{value:X,children:ge},X))})}),yt(En,{style:{flex:1},children:yt("div",{style:{display:"flex",alignItems:"center",position:"relative"},children:yt(Hn,{property:"font-size",value:I,onChange:X=>n("font-size",X),isModified:r("font-size"),min:1,max:999,style:b(f({},en),{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:E})})})]}),Xn("div",{style:{display:"flex",gap:4},children:[yt(En,{style:{flex:1},children:Xn("div",{style:{display:"flex",alignItems:"center",padding:"6px 8px",gap:4},children:[yt($u,{size:12,style:{color:r("line-height")?a:"#999",flexShrink:0}}),yt(Hn,{property:"line-height",value:U,onChange:X=>n("line-height",X),isModified:r("line-height"),step:.1,min:0,placeholder:"Auto",style:b(f({},en),{flex:1,minWidth:0,padding:0,fontWeight:r("line-height")?600:400,color:r("line-height")?a:"inherit"}),showUnit:!1})]})}),yt(En,{style:{flex:1},children:Xn("div",{style:{display:"flex",alignItems:"center",padding:"6px 8px",gap:4},children:[yt(Yu,{size:12,style:{color:r("letter-spacing")?a:"#999",flexShrink:0}}),yt(Hn,{property:"letter-spacing",value:B,onChange:X=>n("letter-spacing",X),isModified:r("letter-spacing"),step:.1,placeholder:"\u2014",style:b(f({},en),{flex:1,minWidth:0,padding:0,fontWeight:r("letter-spacing")?600:400,color:r("letter-spacing")?a:"inherit"}),showUnit:!1})]})})]}),Xn("div",{style:{display:"flex",gap:2,backgroundColor:Fn,borderRadius:2,padding:2},children:[yt($,{align:"left",icon:yt(_u,{size:14})}),yt($,{align:"center",icon:yt(Hu,{size:14})}),yt($,{align:"right",icon:yt(zu,{size:14})}),yt($,{align:"justify",icon:yt(Fu,{size:14})})]}),Xn("div",{style:{display:"flex",alignItems:"center",gap:8,padding:"4px 0"},children:[yt("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"}),yt("div",{style:{flex:1,minWidth:0},children:yt(ns,{value:v,resolvedValue:N,colorVariables:d,matchingVariable:R,onChange:X=>n("color",X),accentColor:a,modified:r("color"),panelContentRef:u,isDropdownOpen:c==="color",onDropdownChange:X=>p(X?"color":null)})})]})]})]})}import{Fragment as Ju,jsx as me,jsxs as Ct}from"react/jsx-runtime";var ma=[{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 Uu(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 es(e,t){return!t||e==="auto"||e==="fit-content"||e==="max-content"||e==="min-content"?"hug":e==="100%"||t==="100%"?"fill":"fixed"}function Ur(e,t){switch(e){case"hug":return"fit-content";case"fill":return"100%";case"fixed":{let n=so(t);if(typeof n.num=="number"&&!isNaN(n.num)){let r=n.unit==="%"?"px":n.unit||"px";return`${n.num}${r}`}return"auto"}}}function Xo(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 da(e,t){return e==="grid"?"grid":e==="flex"||e==="inline-flex"?t==="column"||t==="column-reverse"?"flex-col":"flex-row":"block"}function ua(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 Fn="rgba(0, 0, 0, 0.04)",en={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 ts({label:e,property:t,cssValue:n,mode:r,onValueChange:o,onModeChange:i,modified:s,dimmed:l,dropdownOpen:a,onDropdownChange:d,panelContentRef:c,accentColor:p="#3b82f6",onReset:u,minValue:g,maxValue:E,onMinChange:w,onMaxChange:I,onMinReset:A,onMaxReset:U,minModified:B,maxModified:y}){let v=so(n),O=s?v.unit||Vo(t):Vo(t),Z=!s&&v.unit&&v.unit!==O?Ki(v.num,O):v.num,[N,R]=tn(!1),[$,C]=tn(String(Z)),[L,X]=tn(!1),ge=vn(null),ve=vn(null),ye=vn(null),ae=vn(!1);An(()=>{N||C(String(Z))},[Z,N]),An(()=>{if(!a)return;let Ie=ct=>{ve.current&&!ct.composedPath().includes(ve.current)&&ye.current&&!ct.composedPath().includes(ye.current)&&(d==null||d(!1))},st=ct=>{ct.key==="Escape"&&(d==null||d(!1))};return document.addEventListener("mousedown",Ie),document.addEventListener("keydown",st),()=>{document.removeEventListener("mousedown",Ie),document.removeEventListener("keydown",st)}},[a,d]),An(()=>{N&&ge.current&&(ge.current.focus(),ge.current.select())},[N]);let ze=()=>{let Ie=jr($,t,n,s);o(Ie||`${Math.max(0,parseFloat($)||0)}${O}`),R(!1)},Me=()=>{if(ae.current){ae.current=!1;return}ze()},ne=Ie=>{if(Ie.key==="Enter"){ze();return}if(Ie.key==="Escape"){ae.current=!0,C(String(Z)),R(!1);return}if(Ie.key==="ArrowUp"||Ie.key==="ArrowDown"){Ie.preventDefault();let st=Ie.key==="ArrowUp"?1:-1,ct=Ie.shiftKey?8:Ie.altKey?.1:1,_=parseFloat($)||0,xe=Math.round(Math.max(0,_+st*ct)*1e3)/1e3;C(String(xe)),o(`${xe}${O}`)}},He={fixed:"Fixed",hug:"Hug",fill:"Fill"},Ne={fixed:me(ga,{size:12}),hug:me(Gu,{size:12}),fill:me(ga,{size:12})},Ve=()=>{d==null||d(!a)},$e=()=>{if(!ye.current||!(c!=null&&c.current))return{position:"absolute",top:"100%",left:-4,right:-4,width:"calc(100% + 8px)",marginTop:4};let Ie=ye.current.getBoundingClientRect(),st=c.current.getBoundingClientRect(),ct=c.current.closest('[data-devtools="panel"]'),_=ct?ct.getBoundingClientRect():{top:0,left:0};return{position:"fixed",top:Ie.bottom+4-_.top,left:st.left+4-_.left,width:st.width-8}};return Ct("div",{ref:ye,onMouseEnter:()=>X(!0),onMouseLeave:()=>X(!1),style:{flex:1,display:"flex",alignItems:"center",position:"relative",borderRadius:2,border:"1px solid",borderColor:N?p:L?"rgba(0,0,0,0.15)":"transparent",backgroundColor:Fn,transition:"border-color 100ms ease, opacity 150ms ease",opacity:l?.3:1},children:[me("span",{onClick:s&&u?u:void 0,title:s?"Click to reset":void 0,style:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:s?p:"#999",fontWeight:s?600:400,padding:"0 8px",flexShrink:0,cursor:s?"pointer":"default"},children:e}),r==="fixed"?N?me("input",{ref:ge,type:"text",inputMode:"numeric",value:$,onChange:Ie=>C(Ie.target.value),onKeyDown:ne,onBlur:Me,style:b(f({},en),{flex:1,minWidth:0,padding:"4px 2px"})}):me("span",{onClick:()=>R(!0),style:{flex:1,padding:"4px 2px",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',cursor:"text"},children:Z}):me("span",{style:{flex:1}}),Ct("button",{type:"button",onClick:Ve,style:{display:"flex",alignItems:"center",gap:2,padding:"4px 8px",border:"none",outline:"none",backgroundColor:"transparent",color:"#999",fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',cursor:"pointer",flexShrink:0},children:[He[r],me(os,{size:12})]}),a&&Ct("div",{ref:ve,style:b(f({},$e()),{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:[Ct("button",{type:"button",onClick:()=>{i("fixed"),d==null||d(!1)},style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"10px 12px",border:"none",outline:"none",backgroundColor:r==="fixed"?"#f1f5f9":"transparent",color:"#1e293b",fontWeight:r==="fixed"?600:400,cursor:"pointer",textAlign:"left"},children:[Ne.fixed,Ct("span",{children:["Fixed ",t," (",n,")"]}),r==="fixed"&&me(Jr,{size:14,style:{marginLeft:"auto"}})]}),Ct("button",{type:"button",onClick:()=>{i("hug"),d==null||d(!1)},style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"10px 12px",border:"none",outline:"none",backgroundColor:r==="hug"?"#f1f5f9":"transparent",color:"#1e293b",fontWeight:r==="hug"?600:400,cursor:"pointer",textAlign:"left"},children:[Ne.hug,me("span",{children:"Hug contents"}),r==="hug"&&me(Jr,{size:14,style:{marginLeft:"auto"}})]}),Ct("button",{type:"button",onClick:()=>{i("fill"),d==null||d(!1)},style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"10px 12px",border:"none",outline:"none",backgroundColor:r==="fill"?"#f1f5f9":"transparent",color:"#1e293b",fontWeight:r==="fill"?600:400,cursor:"pointer",textAlign:"left"},children:[Ne.fill,me("span",{children:"Fill container"}),r==="fill"&&me(Jr,{size:14,style:{marginLeft:"auto"}})]}),me("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",margin:"4px 0"}}),Ct("div",{style:{padding:"8px 12px",display:"flex",flexDirection:"column",gap:4},children:[Ct("div",{style:{display:"flex",alignItems:"center",backgroundColor:Fn,borderRadius:2,padding:"4px 8px"},children:[me("span",{onClick:B?Ie=>{Ie.stopPropagation(),A==null||A()}:void 0,title:B?"Click to reset":void 0,style:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:B?p:"#999",fontWeight:B?600:400,marginRight:8,flexShrink:0,cursor:B?"pointer":"default"},children:"Min"}),me("input",{type:"text",value:g||"",placeholder:"\u2014",onChange:Ie=>w==null?void 0:w(Ie.target.value),onClick:Ie=>Ie.stopPropagation(),style:b(f({},en),{flex:1,minWidth:0,padding:0,textAlign:"right",color:B?p:"inherit",fontWeight:B?600:400})})]}),Ct("div",{style:{display:"flex",alignItems:"center",backgroundColor:Fn,borderRadius:2,padding:"4px 8px"},children:[me("span",{onClick:y?Ie=>{Ie.stopPropagation(),U==null||U()}:void 0,title:y?"Click to reset":void 0,style:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:y?p:"#999",fontWeight:y?600:400,marginRight:8,flexShrink:0,cursor:y?"pointer":"default"},children:"Max"}),me("input",{type:"text",value:E||"",placeholder:"\u2014",onChange:Ie=>I==null?void 0:I(Ie.target.value),onClick:Ie=>Ie.stopPropagation(),style:b(f({},en),{flex:1,minWidth:0,padding:0,textAlign:"right",color:y?p:"inherit",fontWeight:y?600:400})})]})]})]})]})}function En({children:e,style:t,dimmed:n}){let[r,o]=tn(!1);return me("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:Fn,transition:"border-color 100ms ease, opacity 150ms ease",opacity:n?.3:1},t),children:e})}function Jn({children:e}){let[t,n]=tn(!1);return me("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:Fn,transition:"border-color 100ms ease"},children:e})}function Hn({property:e,value:t,onChange:n,isModified:r=!1,step:o=1,min:i,max:s,style:l,placeholder:a,showUnit:d=!0,unitStyle:c,preferredUnit:p,onUnitCycle:u}){let g=so(t),E=Vo(e),w=Yr[e],A=p&&w&&w.includes(p)?p:E,U=r&&g.unit||A,B=!r&&g.unit&&g.unit!==U?Ki(g.num,U):g.num,[y,v]=tn(!1),[O,Z]=tn(""),N=Me=>{v(!0),Z(String(B||"")),requestAnimationFrame(()=>Me.target.select())},R=()=>{if(v(!1),O.trim()){let Me=jr(O,e,t,r);Me&&n(Me)}},$=Me=>{let ne=Me.target.value;Z(ne);let He=ne.trim(),Ne=He.match(/^(-?[\d.]+)\s*(rem|em|px|%)$/i),Ve=He.match(/^(-?[\d.]+)$/);if(Ne){let $e=parseFloat(Ne[1]);isNaN($e)||n(`${$e}${Ne[2].toLowerCase()}`)}else if(Ve){let $e=parseFloat(Ve[1]);isNaN($e)||n(`${$e}${U}`)}},C=Me=>{if(Me.key==="Enter"){if(O.trim()){let ne=jr(O,e,t,r);ne&&n(ne)}Me.target.blur();return}if(Me.key==="ArrowUp"||Me.key==="ArrowDown"){Me.preventDefault();let ne=Me.shiftKey?10:Me.altKey?.1:1,He=(Me.key==="ArrowUp"?1:-1)*o*ne,Ne=parseFloat(O)||B||0,Ve=Math.round((Ne+He)*1e3)/1e3;i!==void 0&&(Ve=Math.max(i,Ve)),s!==void 0&&(Ve=Math.min(s,Ve)),Z(String(Ve)),n(`${Ve}${U}`)}},L=/^-?[\d.]/.test(t.trim()),X=y?O:L?String(B):"",ve=y&&/\s*(rem|em|px|%)\s*$/i.test(O)?"":U,ye=u&&(ve==="rem"||ve==="px"),ae={fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",pointerEvents:"none"},ze=b(f({},c!=null?c:ae),{pointerEvents:"auto",cursor:"pointer"});return Ct(Ju,{children:[me("input",{type:"text",inputMode:"decimal",value:X,onFocus:N,onBlur:R,onChange:$,onKeyDown:C,placeholder:a,style:l}),d&&ve&&me("span",{style:ye?ze:c!=null?c:ae,onClick:ye?u:void 0,title:ye?"Click to switch units":void 0,children:ve})]})}function ns({value:e,resolvedValue:t,colorVariables:n,matchingVariable:r,onChange:o,accentColor:i="#3b82f6",modified:s,panelContentRef:l,isDropdownOpen:a,onDropdownChange:d}){let[c,p]=tn(!1),u=!e.includes("var(")&&r?r.usage:e,[g,E]=tn(u),[w,I]=tn(!1),[A,U]=tn(!1),[B,y]=tn(!1),v=vn(null),O=vn(null),Z=vn(null),N=a!==void 0?a:w,R=d||I,$=Wn(()=>{if(!Z.current)return{position:"fixed",top:0,left:0,width:200};let ne=Z.current.getBoundingClientRect(),He=Z.current.closest('[data-devtools="panel"]'),Ne=He?He.getBoundingClientRect():{top:0,left:0};if(l!=null&&l.current){let Ve=l.current.getBoundingClientRect();return{position:"fixed",top:ne.bottom+4-Ne.top,left:Ve.left+4-Ne.left,width:Ve.width-8}}return{position:"fixed",top:ne.bottom+4-Ne.top,left:ne.left-Ne.left,width:ne.width}},[l]);An(()=>{if(!c){let ne=!e.includes("var(")&&r?r.usage:e;E(ne)}},[e,c,r]),An(()=>{if(!N&&!A)return;let ne=Ne=>{Z.current&&!Ne.composedPath().includes(Z.current)&&(R(!1),U(!1))},He=Ne=>{Ne.key==="Escape"&&(R(!1),U(!1))};return document.addEventListener("mousedown",ne),document.addEventListener("keydown",He),()=>{document.removeEventListener("mousedown",ne),document.removeEventListener("keydown",He)}},[N,A]),An(()=>{c&&v.current&&(v.current.focus(),v.current.select())},[c]);let C=Xr(()=>{if(!g||g.startsWith("#")||g.startsWith("rgb")||g.startsWith("hsl")||g.startsWith("oklch"))return[];let ne=g.toLowerCase();return n.filter(He=>He.name.toLowerCase().includes(ne)||He.usage.toLowerCase().includes(ne)).slice(0,8)},[g,n]),L=()=>{o(g),p(!1),U(!1)},X=ne=>{E(ne),ne.includes("var")||ne.includes("--")||ne.length>0&&!ne.startsWith("#")?U(!0):U(!1)},ge=ne=>{E(ne.usage),o(ne.usage),R(!1),U(!1),p(!1)},ve=()=>{setTimeout(()=>{!N&&!A&&L()},150)},ye=ne=>{ne.key==="Enter"?L():ne.key==="Escape"&&(E(e),p(!1),U(!1))},ae=Xr(()=>{let ne=t.trim().toLowerCase();if(ne.startsWith("#"))return ne.length===4?`#${ne[1]}${ne[1]}${ne[2]}${ne[2]}${ne[3]}${ne[3]}`:ne.slice(0,7);let He=ne.match(/rgba?\((\d+),?\s*(\d+),?\s*(\d+)/);if(He){let Ve=parseInt(He[1],10).toString(16).padStart(2,"0"),$e=parseInt(He[2],10).toString(16).padStart(2,"0"),Ie=parseInt(He[3],10).toString(16).padStart(2,"0");return`#${Ve}${$e}${Ie}`}let Ne=ne.match(/oklch\(\s*([\d.]+)/);if(Ne){let Ve=Math.max(0,Math.min(1,parseFloat(Ne[1]))),$e=Math.round(Ve*255).toString(16).padStart(2,"0");return`#${$e}${$e}${$e}`}return"#000000"},[t]),ze=ne=>{let He=ne.target.value;E(He),o(He)},Me=e.includes("var(");return Ct("div",{ref:Z,onMouseEnter:()=>y(!0),onMouseLeave:()=>y(!1),style:{position:"relative",borderRadius:2,border:"1px solid",borderColor:c?i:B?"rgba(0,0,0,0.15)":"transparent",backgroundColor:Fn,transition:"border-color 100ms ease",overflow:"hidden"},children:[Ct("div",{style:{display:"flex",alignItems:"center",minWidth:0},children:[Ct("div",{style:{position:"relative",marginLeft:8,flexShrink:0},children:[me("input",{type:"color",value:ae,onChange:ze,style:{width:12,height:12,padding:0,border:"none",cursor:"pointer",opacity:0,position:"absolute",top:0,left:0}}),me("div",{style:{width:12,height:12,borderRadius:2,backgroundColor:t,border:"1px solid rgba(0,0,0,0.1)",pointerEvents:"none"}})]}),c?me("input",{ref:v,type:"text",value:g,onChange:ne=>X(ne.target.value),onKeyDown:ye,onBlur:ve,style:b(f({},en),{flex:1,minWidth:0})}):me("span",{onClick:()=>p(!0),style:{flex:1,minWidth:0,padding:"4px 8px",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',cursor:"text",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",color:s?i:"inherit"},title:u,children:u}),n.length>0&&me("button",{type:"button",onClick:()=>R(!N),style:{display:"flex",alignItems:"center",justifyContent:"center",width:20,height:24,border:"none",background:"none",cursor:"pointer",color:"#999",flexShrink:0},children:me(os,{size:12})})]}),A&&C.length>0&&me("div",{style:b(f({},$()),{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:C.map(ne=>Ct("button",{type:"button",onClick:()=>ge(ne),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:[me("div",{style:{width:14,height:14,borderRadius:2,backgroundColor:ne.value,border:"1px solid rgba(0,0,0,0.1)",flexShrink:0}}),me("span",{style:{flex:1,overflow:"hidden",textOverflow:"ellipsis"},children:ne.name})]},ne.name))}),N&&me("div",{ref:O,style:b(f({},$()),{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(ne=>Ct("button",{type:"button",onClick:()=>ge(ne),style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"10px 12px",border:"none",backgroundColor:u===ne.usage||e===ne.usage?"#f1f5f9":"transparent",color:"#1e293b",fontWeight:u===ne.usage||e===ne.usage?600:400,cursor:"pointer",textAlign:"left",fontSize:12},children:[me("div",{style:{width:14,height:14,borderRadius:2,backgroundColor:ne.value,border:"1px solid rgba(0,0,0,0.1)",flexShrink:0}}),me("span",{style:{flex:1,overflow:"hidden",textOverflow:"ellipsis"},children:ne.name}),(u===ne.usage||e===ne.usage)&&me(Jr,{size:14,style:{marginLeft:"auto",flexShrink:0}})]},ne.name))})]})}function ha({element:e,elementInfo:t,selector:n,styleModifications:r,dispatch:o,onClose:i,onHover:s,accentColor:l="#3b82f6",toolbarRef:a}){var Be,De;let d=vn(null),c=vn(null),[p,u]=tn(()=>{try{return!!localStorage.getItem("devtools-panel-position")}catch(z){return!1}});An(()=>{if(p)return;let z=setTimeout(()=>u(!0),50);return()=>clearTimeout(z)},[p]);let[g,E]=tn(null),[w,I]=tn(null),A=g!==null||w!==null,[U,B]=tn("rem"),y=Wn(()=>{B(z=>z==="rem"?"px":"rem")},[]),v=vn(new Map),[O,Z]=tn(""),N=Xr(()=>Di(),[]);An(()=>{let z=re=>{var be;if(re.key!=="Escape")return;let se=document.activeElement;se&&((be=d.current)!=null&&be.contains(se))||i()};return window.addEventListener("keydown",z),()=>window.removeEventListener("keydown",z)},[i]);let R=vn({top:0,left:0,maxHeight:400}),[,$]=tn(0),C="devtools-panel-position",L=vn({x:0,y:0}),X=vn(null),ge=vn(!1);An(()=>{try{let z=localStorage.getItem(C);if(z){let re=JSON.parse(z);typeof re.top=="number"&&typeof re.left=="number"&&(ge.current=!0,R.current=b(f({},R.current),{top:re.top,left:re.left}))}}catch(z){}},[]),An(()=>{let z=se=>{var bt;let be=X.current;if(!be)return;let pe=be.startOffsetX+(se.clientX-be.startX),ke=be.startOffsetY+(se.clientY-be.startY),oe=280,We=16,Xe=Math.max(We,Math.min(window.innerWidth-oe-We,R.current.left+pe)),At=Math.max(We,R.current.top+ke);L.current={x:Xe-R.current.left,y:At-R.current.top};let Gt=d.current,it=Gt==null?void 0:Gt.parentElement;if(!it)return;it.style.top=`${At}px`,it.style.left=`${Xe}px`;let Vt=(bt=a==null?void 0:a.current)==null?void 0:bt.getBoundingClientRect(),Kt=window.innerHeight-16;Vt&&Xe+oe>Vt.left&&(Kt=Vt.top-8);let St=Math.max(0,At),Ot=Math.max(200,Kt-St);Gt&&(Gt.style.maxHeight=`${Ot}px`)},re=()=>{if(!X.current)return;let se=R.current.top+L.current.y,be=R.current.left+L.current.x;R.current=b(f({},R.current),{top:se,left:be}),L.current={x:0,y:0},ge.current=!0;try{localStorage.setItem(C,JSON.stringify({top:se,left:be}))}catch(pe){}X.current=null};return window.addEventListener("mousemove",z),window.addEventListener("mouseup",re),()=>{window.removeEventListener("mousemove",z),window.removeEventListener("mouseup",re)}},[]);let ve=Wn(z=>{z.button!==0||z.target.closest("button")||(z.preventDefault(),X.current={startX:z.clientX,startY:z.clientY,startOffsetX:L.current.x,startOffsetY:L.current.y})},[]);An(()=>{L.current={x:0,y:0};let z=(be=!1)=>{var Kt;let pe=d.current,ke=280,oe=8,We,Xe;if(ge.current)We=R.current.top,Xe=R.current.left;else{let St=e.getBoundingClientRect();Xe=St.right+oe,We=St.top,Xe+ke>window.innerWidth-oe&&(Xe=St.left-ke-oe),Xe<oe&&(Xe=Math.max(oe,(window.innerWidth-ke)/2))}let At=(Kt=a==null?void 0:a.current)==null?void 0:Kt.getBoundingClientRect(),Gt=window.innerHeight-16;At&&Xe+ke>At.left&&(Gt=At.top-oe);let it=Math.max(0,We),Vt=Math.max(200,Gt-it);if(R.current={top:We,left:Xe,maxHeight:Vt},be&&pe){let St=pe.parentElement;St&&!ge.current&&(St.style.top=`${We+L.current.y}px`,St.style.left=`${Xe+L.current.x}px`),pe.style.maxHeight=`${Vt}px`}else $(St=>St+1)};z(!1);let re=()=>z(!0),se=()=>z(!1);return window.addEventListener("scroll",re,{passive:!0}),window.addEventListener("resize",se,{passive:!0}),()=>{window.removeEventListener("scroll",re),window.removeEventListener("resize",se)}},[e]),An(()=>{let z=d.current;if(!z)return;let re=se=>{let be=c.current;if(!be){se.preventDefault();return}let{scrollTop:pe,scrollHeight:ke,clientHeight:oe}=be,We=pe<=0&&se.deltaY<0,Xe=pe+oe>=ke&&se.deltaY>0;(We||Xe)&&se.preventDefault()};return z.addEventListener("wheel",re,{passive:!1}),()=>z.removeEventListener("wheel",re)},[]);let ye=Xr(()=>r.find(z=>z.selector===n),[r,n]),ae=Wn(z=>{let re=ye==null?void 0:ye.changes.find(se=>se.property===z);if(re)return re.modified;if(z.includes("color")){let se=Ai(e,z);if(se&&se.includes("var("))return se}return lr(e,z)},[e,ye]),ze=Wn(z=>{if(v.current.has(z))return v.current.get(z);let re=ye==null?void 0:ye.changes.find(be=>be.property===z);if(re)return re.original;let se=lr(e,z);return v.current.set(z,se),se},[e,ye]),Me=Wn((z,re)=>{let se=ze(z);Ge(e,z,re),z==="backdrop-filter"&&Ge(e,"-webkit-backdrop-filter",re),o({type:"MODIFY_STYLE",payload:{selector:n,element:t,property:z,original:se,modified:re}})},[e,n,t,o,ze]),ne=Wn(()=>{Ni(n,r);let z=r.find(re=>re.selector===n);if(z)for(let re of z.changes)o({type:"CLEAR_STYLE",payload:{selector:n,property:re.property}});v.current.clear()},[n,r,o]),He=Wn(z=>{let re=r.find(be=>be.selector===n);re!=null&&re.changes.find(be=>be.property===z)&&e instanceof HTMLElement&&(e.style.removeProperty(z),o({type:"CLEAR_STYLE",payload:{selector:n,property:z}}),v.current.delete(z))},[e,n,r,o]),Ne=Wn(()=>{let z=O.split(";").map(re=>re.trim()).filter(re=>re);for(let re of z){let se=re.indexOf(":");if(se>0){let be=re.slice(0,se).trim(),pe=re.slice(se+1).trim();be&&pe&&Me(be,pe)}}Z("")},[O,Me]),Ve=Wn(z=>{var re;return(re=ye==null?void 0:ye.changes.some(se=>se.property===z))!=null?re:!1},[ye]),$e=z=>{var ke;let re=ae(z.property),se=Ve(z.property),be=!se&&Uu(z.property,re),pe={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(be&&z.type!=="backdrop-filter")return me(Jn,{modified:!1,children:me("input",{type:"text",value:"",placeholder:"\u2014",onFocus:()=>{},onChange:oe=>Me(z.property,oe.target.value),style:b(f({},pe),{color:"#999"})})});switch(z.type){case"color":{let oe=dr(e,re),We=re.includes("var(")?null:ur(oe,N);return me(ns,{value:re,resolvedValue:oe,colorVariables:N,matchingVariable:We,onChange:Xe=>Me(z.property,Xe),accentColor:l,modified:se,panelContentRef:c,isDropdownOpen:w===z.property,onDropdownChange:Xe=>I(Xe?z.property:null)})}case"number":{if(!!Yr[z.property])return me(Jn,{modified:se,children:me(Hn,{property:z.property,value:re,onChange:Xe=>Me(z.property,Xe),isModified:se,min:z.min,max:z.max,step:z.step||1,style:b(f({},pe),{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:U,onUnitCycle:y})});let{num:We}=so(re);return me(Jn,{modified:se,children:me("input",{type:"number",value:We,min:z.min,max:z.max,step:z.step||1,onChange:Xe=>Me(z.property,Xe.target.value),style:pe})})}case"select":return me(Jn,{modified:se,children:Ct("div",{style:{position:"relative",display:"flex",alignItems:"center"},children:[me("select",{value:re,onChange:oe=>Me(z.property,oe.target.value),style:b(f({},pe),{cursor:"pointer",paddingLeft:4,paddingRight:24,appearance:"none",WebkitAppearance:"none"}),children:(ke=z.options)==null?void 0:ke.map(oe=>me("option",{value:oe,children:oe},oe))}),me("div",{style:{position:"absolute",right:4,top:"50%",transform:"translateY(-50%)",pointerEvents:"none",color:"#999",display:"flex",alignItems:"center"},children:me(os,{size:12})})]})});case"spacing":return me(Jn,{modified:se,children:me("input",{type:"text",value:re,onChange:oe=>Me(z.property,oe.target.value),placeholder:"e.g., 10px or 10px 20px",style:pe})});case"backdrop-filter":return me(ia,{value:re,onChange:oe=>Me(z.property,oe),accentColor:l,modified:se,panelContentRef:c});default:return me(Jn,{modified:se,children:me("input",{type:"text",value:re,onChange:oe=>Me(z.property,oe.target.value),style:pe})})}},Ie=(Be=ye==null?void 0:ye.changes.length)!=null?Be:0,st=(De=ye==null?void 0:ye.captured)!=null?De:!1,ct=b(f({position:"fixed",top:R.current.top,left:R.current.left,width:280,maxHeight:R.current.maxHeight,backgroundColor:"rgba(255, 255, 255, 0.85)",backdropFilter:"blur(32px)",WebkitBackdropFilter:"blur(32px)"},io),{zIndex:1e4,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',fontSize:12,overflow:"hidden",display:"flex",flexDirection:"column",opacity:p?1:0,transition:"opacity 150ms ease"}),_={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:X.current?"grabbing":"grab"},xe={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"},ce={display:"flex",alignItems:"center",padding:"4px 12px",gap:8},Se={width:80,fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#64748b",flexShrink:0};return me("div",{"data-devtools":"panel-wrapper",style:{position:"fixed",top:R.current.top+L.current.y,left:R.current.left+L.current.x,zIndex:1e4,pointerEvents:"none"},children:Ct("div",{ref:d,"data-devtools":"panel",style:b(f({},ct),{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:[Ct("div",{style:_,onMouseDown:ve,children:[Ct("div",{style:{display:"flex",alignItems:"center",gap:8,overflow:"hidden"},children:[me("span",{style:{fontWeight:600,fontSize:11,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:t.tagName}),Ie>0&&me("span",{style:{backgroundColor:st?"#999999":l,color:"#fff",fontSize:9,padding:"1px 4px",borderRadius:2},children:Ie})]}),Ct("div",{style:{display:"flex",gap:4},children:[Ie>0&&me("button",{type:"button",onClick:ne,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:me(ju,{size:14})}),me("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:me(Vu,{size:14})})]})]}),Ct("div",{ref:c,style:{flex:1,overflowY:"auto",margin:"0 3px 3px"},children:[me("div",{style:{opacity:w?.3:1,transition:"opacity 150ms ease"},children:me(ca,{element:e,getValue:ae,getOriginalValue:ze,handleChange:Me,isModified:Ve,onResetProperty:He,isCollapsed:!1,onToggle:()=>{},sectionHeaderStyle:xe,activeDropdown:g,onDropdownChange:E,panelContentRef:c,accentColor:l,onFieldHover:s,preferredUnit:U,onUnitCycle:y})}),me("div",{style:{opacity:g?.3:1,transition:"opacity 150ms ease"},children:me(fa,{element:e,getValue:ae,handleChange:Me,isModified:Ve,onResetProperty:He,isCollapsed:!1,onToggle:()=>{},sectionHeaderStyle:xe,accentColor:l,colorVariables:N,activeColorDropdown:w,onColorDropdownChange:I,panelContentRef:c,preferredUnit:U,onUnitCycle:y})}),ma.map((z,re)=>{let se=re===ma.length-1,be=w&&z.properties.some(ke=>ke.property===w);return Ct("div",{style:{borderBottom:se?"none":"1px solid rgba(0,0,0,0.08)",opacity:A&&!be?.3:1,transition:"opacity 150ms ease"},children:[me("div",{style:xe,children:me("span",{children:z.name})}),me("div",{style:{padding:"4px 0"},children:z.properties.map(ke=>{let oe=Ve(ke.property),We=be&&ke.property!==w;return Ct("div",{style:b(f({},ce),{opacity:We?.3:1,transition:"opacity 150ms ease"}),children:[me("span",{onClick:oe?()=>He(ke.property):void 0,title:oe?"Click to reset":void 0,style:b(f({},Se),{color:oe?l:"#64748b",fontWeight:oe?600:400,cursor:oe?"pointer":"default"}),children:ke.label}),me("div",{style:{flex:1,minWidth:0,overflow:"hidden"},children:$e(ke)})]},ke.property)})})]},z.name)}),Ct("div",{style:{opacity:A?.3:1,transition:"opacity 150ms ease"},children:[me("div",{style:xe,children:me("span",{children:"Raw CSS"})}),Ct("div",{style:{padding:"8px 12px"},children:[me("textarea",{value:O,onChange:z=>Z(z.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()&&me("button",{type:"button",onClick:Ne,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 Xu,useLayoutEffect as Ku,useState as qu}from"react";import{Fragment as tp,jsx as ko,jsxs as ep}from"react/jsx-runtime";var rs=["flex-start","center","flex-end"],is=["flex-start","center","flex-end"];function Zu(e){return e==="normal"||e==="flex-start"||e==="start"?"flex-start":e==="flex-end"||e==="end"?"flex-end":e==="center"?"center":null}function Qu(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 ya(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 ba({element:e,modifier:t,accentColor:n,refreshKey:r=0}){let[o,i]=qu(null);if(Xu(()=>{if(!e){i(null);return}let w=()=>i(ya(e));return w(),window.addEventListener("scroll",w,{passive:!0}),window.addEventListener("resize",w,{passive:!0}),()=>{window.removeEventListener("scroll",w),window.removeEventListener("resize",w)}},[e]),Ku(()=>{e&&i(ya(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 d=l.flexDirection,c=d==="column"||d==="column-reverse"?"vertical":"horizontal",p=c==="horizontal"?"vertical":"horizontal",u=[];if(t==="shift"){let w=Zu(l.justifyContent);if(w){let I=rs.indexOf(w);c==="horizontal"?(I>0&&u.push("left"),I<rs.length-1&&u.push("right")):(I>0&&u.push("up"),I<rs.length-1&&u.push("down"))}}else{let w=Qu(l.alignItems);if(w){let I=is.indexOf(w);p==="horizontal"?(I>0&&u.push("left"),I<is.length-1&&u.push("right")):(I>0&&u.push("up"),I<is.length-1&&u.push("down"))}}if(u.length===0)return null;let g=14,E=7;return ko(tp,{children:u.map(w=>{let I,A;switch(w){case"right":I=s.right+g,A=s.top+s.height/2;break;case"left":I=s.left-g,A=s.top+s.height/2;break;case"down":I=s.left+s.width/2,A=s.bottom+g;break;case"up":I=s.left+s.width/2,A=s.top-g;break}let U=w==="right"?0:w==="left"?180:w==="down"?90:-90,B={position:"fixed",left:I-E,top:A-E,width:E*2,height:E*2,pointerEvents:"none",zIndex:9997};return ko("div",{"data-devtools":"swipe-hint",style:B,children:ko("svg",{width:E*2,height:E*2,viewBox:"-7 -7 14 14",style:{overflow:"visible"},children:ep("g",{transform:`rotate(${U})`,children:[ko("line",{x1:"-5",y1:"0",x2:"3",y2:"0",stroke:"#fff",strokeWidth:"4",strokeLinecap:"round"}),ko("polyline",{points:"0,-4 5,0 0,4",fill:"none",stroke:"#fff",strokeWidth:"4",strokeLinecap:"round",strokeLinejoin:"round"}),ko("line",{x1:"-5",y1:"0",x2:"3",y2:"0",stroke:n,strokeWidth:"1.5",strokeLinecap:"round"}),ko("polyline",{points:"0,-4 5,0 0,4",fill:"none",stroke:n,strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]})})},w)})})}import{useEffect as np,useLayoutEffect as op,useState as rp}from"react";import{jsx as ss,jsxs as ls}from"react/jsx-runtime";function ip(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 xa({element:e,fontSize:t,lineHeight:n,accentColor:r,hoveredProperty:o,draggingProperty:i,cursorViewport:s}){let[l,a]=rp(null);if(np(()=>{if(!e){a(null);return}let A=()=>{a(Yo(e))};return A(),window.addEventListener("scroll",A,{passive:!0}),window.addEventListener("resize",A,{passive:!0}),()=>{window.removeEventListener("scroll",A),window.removeEventListener("resize",A)}},[e]),op(()=>{e&&a(Yo(e))},[e,t,n]),!l)return null;let d=l.width,c=l.height,p=ip(r,.2),u=i!=null?i:o,g=8,E=2,w={position:"fixed",top:l.top,left:l.left,width:d,height:c,pointerEvents:"none",zIndex:9996,overflow:"visible"},I=A=>A==="font-size"?`${Math.round(t)}`:(t>0?n/t:1.2).toFixed(2).replace(/\.?0+$/,"");return ls("div",{"data-devtools":"text-handles",style:w,children:[ls("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${d} ${c}`,children:[ss("rect",{x:"0.5",y:"0.5",width:Math.max(0,d-1),height:Math.max(0,c-1),fill:"none",stroke:p,strokeWidth:"1"}),(u==="font-size"||!u)&&ss("rect",{x:d-E/2,y:c/2-g/2,width:E,height:g,fill:r,stroke:"#ffffff",strokeWidth:u==="font-size"?4:2,paintOrder:"stroke"}),(u==="line-height"||!u)&&ss("rect",{x:d/2-g/2,y:c-E/2,width:g,height:E,fill:r,stroke:"#ffffff",strokeWidth:u==="line-height"?4:2,paintOrder:"stroke"})]}),s&&u&&(()=>{let A=u==="font-size"?"Aa":"Lh",U=I(u);return ls("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:[A," ",U]})})()]})}import{Fragment as qo,jsx as rt,jsxs as Ko}from"react/jsx-runtime";var va=8,as=[0,1,2,4,8,12,16,20,24,28,32],cs="devtools-active-text";function Sa(e,t,n=0,r,o){let i=e.left+window.scrollX+4,s=t==="top-left"?e.top+window.scrollY-Ln-n*Ln+4:e.bottom+window.scrollY+4-1+n*Ln,l=window.scrollY+4,a=window.scrollY+window.innerHeight-Ln-4,d=90,c=!1;if(r&&o!==void 0){let p=r.getBoundingClientRect();if(e.left+4+o+4+d>p.left){let g=window.scrollY+p.top-Ln-4;g<a&&(a=g,c=!0)}}return s<l?s=e.top+window.scrollY+4:s>a&&(s=c?a:Math.max(e.top+window.scrollY+4,a)),{x:i,y:s}}function wa({state:e,dispatch:t,onScreenshot:n,inFlightAnnotationIds:r,inFlightStyleSelectors:o,inFlightSelectorColors:i,onAttachImages:s,onReply:l,onViewThread:a,onCloseThread:d,onModelComponentsAdd:c,onModelComponentFocus:p,onModelComponentHover:u,modelComponentNames:g,modelPanelHoveredComponent:E,modelSpacingTokenHover:w,highlightedAnnotationIds:I,focusedThreadAnnotationId:A,externalCanvasRef:U,toolbarRef:B}){var Os,Ns,Ds,Hs,Fs,_s,zs,$s,Ws;let{canvasRef:y,redrawAll:v,resizeCanvas:O}=Cl(),Z=jt(m=>{y.current=m,U&&(U.current=m)},[U,y]),N=Bt(!1);an(()=>{let m=y.current;if(!m)return;let h=()=>{N.current&&(N.current=!1,m.style.pointerEvents="")},J=T=>{T.button===0&&N.current&&h()};return window.addEventListener("mousedown",J),()=>window.removeEventListener("mousedown",J)},[y]);let[R,$]=dt(!1),[C,L]=dt(()=>{if(typeof window=="undefined")return null;try{let m=localStorage.getItem(cs);return m?JSON.parse(m):null}catch(m){return null}}),[X,ge]=dt(null),[ve,ye]=dt(null),[ae,ze]=dt(null),Me=Bt(null),ne=Bt(null),He=Bt({x:0,y:0}),Ne=Bt([]),Ve=Bt(0),[$e,Ie]=dt(null),[st,ct]=dt(new Map),_=Bt(0),xe=Bt(null),[ce,Se]=dt(null),[Be,De]=dt(null),[z,re]=dt(null),[se,be]=dt(null),pe=Bt({isDragging:!1,side:null,startX:0,startY:0,original:{top:0,right:0,bottom:0,left:0},element:null,elementInfo:null,selector:null,durableSelector:null}),[ke,oe]=dt(null),[We,Xe]=dt(null),[At,Gt]=dt(null),[it,Vt]=dt(null),Kt=Bt({x:0,y:0}),[St,Ot]=dt({x:0,y:0}),bt=Bt({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}),[Et,rn]=dt(null),[zt,Mn]=dt(null),[lt,Q]=dt(null),[Fe,tt]=dt(!1),[In,$t]=dt(0),[fn,dn]=dt(null),gt=Bt({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}),[sn,Pt]=dt(null),[Nt,qt]=dt(null),[xt,Qn]=dt(null),Pn=Bt({isDragging:!1,property:null,startX:0,startY:0,originalFontSize:0,originalLineHeight:0,originalRatio:1.2,element:null,elementInfo:null,selector:null,durableSelector:null}),[Dt,jn]=dt(null),[gn,mn]=dt(null),[ut,D]=dt(null),K=El(),te=Bt(i);te.current=i;let Re=jt(m=>{let h=te.current;if(!h||h.size===0)return!1;for(let J of h.keys())try{if(m.matches(J))return!0}catch(T){}return!1},[]),he=Bt(e);he.current=e;let Ue=Bt(C);Ue.current=C;let Je=Bt([]),Le=Bt(n);Le.current=n;let[S,j]=dt(null),ee=e.selectedAnnotationIds;Je.current=ee;let de=jt((m,h=!1)=>{t({type:"SELECT_ANNOTATION",payload:{id:m,addToSelection:h}})},[t]),we=jt(()=>{t({type:"SELECT_ANNOTATION",payload:{id:null}})},[t]),[le,ot]=dt(null),[Pe,et]=dt({x:window.scrollX,y:window.scrollY});an(()=>(O(),window.addEventListener("resize",O),()=>window.removeEventListener("resize",O)),[O]),an(()=>{let m=()=>{et({x:window.scrollX,y:window.scrollY})};return window.addEventListener("scroll",m,{passive:!0}),()=>window.removeEventListener("scroll",m)},[]),an(()=>{C?localStorage.setItem(cs,JSON.stringify(C)):localStorage.removeItem(cs)},[C]),kl(C,L,X,e.annotations,t);let pt=Bt($e);pt.current=$e,an(()=>{if(e.activeTool!=="model"||!e.isAnnotating)return;let m=h=>{if(!h.altKey||!pt.current)return;h.preventDefault();let J=h.deltaY>0?-1:1;_.current=Math.max(0,_.current+J);let T=xe.current;if(T){let M=Br(T,_.current);Ie(M)}};return window.addEventListener("wheel",m,{passive:!1}),()=>window.removeEventListener("wheel",m)},[e.activeTool,e.isAnnotating]),an(()=>{e.activeTool!=="model"&&(Ie(null),ct(new Map),_.current=0,xe.current=null)},[e.activeTool]),an(()=>{var J;let m=(J=$e==null?void 0:$e.name)!=null?J:null,h=m&&(g!=null&&g.has(m))?m:null;u==null||u(h)},[$e,g,u]);let[mt,Ht]=dt(null);an(()=>{var J;if(!E){Ht(null);return}let m=zo(E.name),h=E.instanceIndex;Ht((J=m[h%m.length])!=null?J:null)},[E]);let[eo,to]=dt([]);an(()=>{var m,h;if(!w){to([]);return}(h=(m=w.token)==null?void 0:m.bindings)!=null&&h.length?to(Ri(w.token)):to(Mi(w.px))},[w]);let ht=Bt(null),ln=Bt(null);ht.current=Et,ln.current=zt,an(()=>{let m=["flex-start","center","flex-end"],h=["flex-start","center","flex-end"],T=null,M=!1,W=null,ie=null,F=(ue,Te)=>{let Ze=vo(ue,Te);for(;Ze&&Ze!==document.documentElement;){let ft=window.getComputedStyle(Ze).display;if(ft==="flex"||ft==="inline-flex")return Ze;Ze=Ze.parentElement}return null},q=ue=>{let Te=window.getComputedStyle(ue).flexDirection;return Te==="column"||Te==="column-reverse"?"vertical":"horizontal"},x=ue=>{let Te=ue.getAttribute("data-pm");return Te||(Te=Math.random().toString(36).substring(2,8),ue.setAttribute("data-pm",Te)),{selector:`[data-pm="${Te}"]`,durableSelector:wn(ue)}},k=()=>{M=!0,T&&clearTimeout(T),T=setTimeout(()=>{M=!1,T=null},300)},G=(ue,Te,nt)=>{let Ze=q(ue);if(Te===Ze){let Ye=window.getComputedStyle(ue).justifyContent,wt=Ye==="normal"||Ye==="flex-start"||Ye==="start"?"flex-start":Ye==="flex-end"||Ye==="end"?"flex-end":Ye==="center"?"center":null;if(!wt)return;let Ut=m.indexOf(wt)+nt;if(Ut<0||Ut>=m.length)return;let Vn=m[Ut],{selector:fo,durableSelector:ui}=x(ue);Ge(ue,"justify-content",Vn),t({type:"MODIFY_STYLES_BATCH",payload:{selector:fo,durableSelector:ui,element:yn(ue),changes:[{property:"justify-content",original:Ye,modified:Vn}]}})}else{let Ye=window.getComputedStyle(ue).flexDirection,wt=Ze==="horizontal"?"column":"row",{selector:Bn,durableSelector:Ut}=x(ue);Ge(ue,"flex-direction",wt),t({type:"MODIFY_STYLES_BATCH",payload:{selector:Bn,durableSelector:Ut,element:yn(ue),changes:[{property:"flex-direction",original:Ye,modified:wt}]}})}$t(ft=>ft+1)},P=(ue,Te,nt)=>{let ft=q(ue)==="horizontal"?"vertical":"horizontal";if(Te!==ft)return;let wt=window.getComputedStyle(ue).alignItems,Bn=wt==="normal"||wt==="stretch"||wt==="flex-start"||wt==="start"?"flex-start":wt==="flex-end"||wt==="end"?"flex-end":wt==="center"?"center":null;if(!Bn)return;let Vn=h.indexOf(Bn)+nt;if(Vn<0||Vn>=h.length)return;let fo=h[Vn],{selector:ui,durableSelector:Sc}=x(ue);Ge(ue,"align-items",fo),t({type:"MODIFY_STYLES_BATCH",payload:{selector:ui,durableSelector:Sc,element:yn(ue),changes:[{property:"align-items",original:wt,modified:fo}]}}),$t(wc=>wc+1)},H=20,Y=null,V=null,fe=0,Oe=(ue,Te,nt)=>{let Ze=F(Te,nt);dn(Ze?{modifier:ue,target:Ze}:null)},je=ue=>{if(!(e.activeTool!=="hand"||!e.isAnnotating)){if(ue.key==="Shift"&&!ue.altKey){let Te=Kt.current;Oe("shift",Te.x,Te.y)}else if(ue.key==="Alt"&&!ue.shiftKey){let Te=Kt.current;Oe("alt",Te.x,Te.y)}}},Ke=ue=>{if(e.activeTool!=="hand"||!e.isAnnotating)return;let Te=ue.shiftKey&&!ue.altKey,nt=ue.altKey&&!ue.shiftKey;if(!Te&&!nt||ue.buttons!==0){Y=null,V=null,fe=0,W=null,ie=null,dn(null);return}if(W===null&&(W=ue.clientX,ie=ue.clientY,Oe(Te?"shift":"alt",ue.clientX,ue.clientY)),M)return;Y===null&&(Y=ue.clientX,V=ue.clientY,fe=0);let Ze=ue.clientX-Y,ft=ue.clientY-V,Ye=Math.abs(Ze)>=Math.abs(ft)?Ze:ft;if(Math.abs(Ye)>3){let fo=Ye>0?1:-1;if(fe!==0&&fo!==fe){Y=ue.clientX,V=ue.clientY,fe=0;return}fe=fo}if(Math.abs(Ze)<H&&Math.abs(ft)<H)return;let wt=F(W,ie);if(!wt)return;let Bn=Math.abs(Ze)>=Math.abs(ft)?"horizontal":"vertical",Vn=(Bn==="horizontal"?Ze:ft)>0?1:-1;Y=null,V=null,fe=0,Te?G(wt,Bn,Vn):P(wt,Bn,Vn),k()},kt=ue=>{(ue.key==="Shift"||ue.key==="Alt")&&(W=null,ie=null,Y=null,V=null,fe=0,dn(null))},qe=()=>{dn(null),Y=null,V=null,fe=0};return window.addEventListener("keydown",je),window.addEventListener("mousemove",Ke),window.addEventListener("mousedown",qe),window.addEventListener("keyup",kt),()=>{window.removeEventListener("keydown",je),window.removeEventListener("mousemove",Ke),window.removeEventListener("mousedown",qe),window.removeEventListener("keyup",kt),T&&clearTimeout(T)}},[e.activeTool,e.isAnnotating,t]),an(()=>{let m=h=>{var W,ie,F,q;if(h.key==="Escape"){if(Ue.current)return;if(e.activeTool==="model"&&st.size>0){h.preventDefault(),ct(new Map);return}if(Je.current.length>0){h.preventDefault(),we();return}}if(h.key==="Enter"&&e.activeTool==="model"&&st.size>0&&c){h.preventDefault();let x=[...st.keys()].filter(k=>!(g!=null&&g.has(k)));x.length>0&&c(x),ct(new Map);return}if((h.metaKey||h.ctrlKey)&&h.key==="v"&&Ne.current.length>0&&!Ue.current){h.preventDefault(),Ve.current++;let x=Ve.current*20,G=((W=Ne.current[0])==null?void 0:W.groupId)?Math.random().toString(36).substring(2,9):void 0,P=Ne.current.map(Y=>b(f({},Y),{id:Math.random().toString(36).substring(2,9),groupId:Y.groupId?G:void 0,timestamp:Date.now(),points:Y.points.map(V=>({x:V.x+x,y:V.y+x}))}));t({type:"PASTE_ANNOTATIONS",payload:{annotations:P}});let H=P.find(Y=>Y.type!=="text")||P[0];H&&de(H.id);return}let J=Je.current;if(J.length===0||Ue.current)return;let T=(F=(ie=h.composedPath)==null?void 0:ie.call(h)[0])!=null?F:h.target,M=T==null?void 0:T.tagName;if(!(M==="INPUT"||M==="TEXTAREA"||T!=null&&T.isContentEditable)&&(h.key==="Delete"||h.key==="Backspace")){if(h.preventDefault(),d){let x=he.current.annotations;for(let k of J){let G=x.find(H=>H.id===k);if(!G)continue;let P=G.threadId||G.groupId&&((q=x.find(H=>H.groupId===G.groupId&&H.threadId))==null?void 0:q.threadId);P&&d(P)}}for(let x of J)t({type:"DELETE_ANNOTATION",payload:{id:x}});we()}};return window.addEventListener("keydown",m),()=>window.removeEventListener("keydown",m)},[t,we,de,e.activeTool,st,g,c,d]);let Wt=Do(),Tt=Kr(()=>e.annotations.filter(m=>!m.pathname||m.pathname===Wt),[e.annotations,Wt]),Rn=Kr(()=>Wr(e.annotations),[e.annotations]),Sn=Kr(()=>{let m=new Map,h=new Set,J=1,T=[...e.annotations].sort((M,W)=>M.timestamp-W.timestamp);for(let M of T)if(!Rn.has(M))if(M.groupId){if(!h.has(M.groupId)){h.add(M.groupId);let W=e.annotations.filter(ie=>ie.groupId===M.groupId);for(let ie of W)m.set(ie.id,J);J++}}else m.set(M.id,J),J++;return m},[e.annotations,Rn]),ci=Kr(()=>{if(ee.length===0)return null;let m=new Map;for(let h of ee){let J=e.annotations.find(M=>M.id===h);if(!J)continue;let T=J.groupId?e.annotations.filter(M=>M.groupId===J.groupId):[J];for(let M of T)if(M.linkedSelector&&!(i!=null&&i.has(M.linkedSelector))){let W=M.color||e.activeColor;m.set(M.linkedSelector,W)}}return m.size>0?m:null},[ee,e.annotations,e.activeColor,i]);an(()=>{let m=Tt.filter(h=>!(Rn.has(h)||C&&!C.isNew&&h.id===C.id));v(m,e.currentPath,e.activeTool,e.activeColor,e.strokeWidth,ee,va,Pe.x,Pe.y,Sn,I)},[Tt,e.currentPath,e.activeTool,e.activeColor,e.strokeWidth,v,C,ee,Pe,Sn,Rn,I]),an(()=>{if(ve){let m=Math.random().toString(36).substring(2,9);L({id:m,point:ve.point,text:"",fontSize:12,isNew:!0,groupId:ve.groupId}),ye(null)}},[ve]),an(()=>{ae&&(L({id:Math.random().toString(36).substring(2,9),point:ae.point,text:"",fontSize:12,isNew:!0,linkedSelector:ae.linkedSelector,linkedAnchor:ae.linkedAnchor,elements:ae.elements}),ze(null))},[ae]);let Io=Bt(null),un=(Os=C==null?void 0:C.id)!=null?Os:null;an(()=>{un&&Me.current?requestAnimationFrame(()=>{var J;let m=Me.current;if(!m||(m.focus(),ne.current===un))return;ne.current=un;let h=Ue.current;if(h){if(Io.current!==null){let T=Math.min(Io.current,m.value.length);m.setSelectionRange(T,T);return}if(!h.isNew&&h.clickPoint){let T=y.current;if(!T)return;let M=T.getContext("2d");if(!M)return;M.font=`${h.fontSize}px ${Jt}`;let W=h.fontSize*1.4,ie=h.text.split(`
|
|
4
|
+
`),F=h.clickPoint.y-h.point.y,q=Math.max(0,Math.min(ie.length-1,Math.floor(F/W))),x=h.clickPoint.x-h.point.x,k=ie[q]||"",G=0;for(let H=0;H<=k.length;H++){let Y=M.measureText(k.substring(0,H)).width;if(Y>x){let V=H>0?M.measureText(k.substring(0,H-1)).width:0;G=x-V<Y-x?H-1:H;break}G=H}let P=G;for(let H=0;H<q;H++)P+=(((J=ie[H])==null?void 0:J.length)||0)+1;m.setSelectionRange(P,P)}}}):(ne.current=null,Io.current=null)},[un,y]);let Ro=jt(m=>{let h=y.current;if(!h)return{x:0,y:0};let J=h.getBoundingClientRect(),T,M;if("touches"in m&&m.touches[0])T=m.touches[0].clientX,M=m.touches[0].clientY;else if("clientX"in m)T=m.clientX,M=m.clientY;else return{x:0,y:0};return{x:T-J.left+window.scrollX,y:M-J.top+window.scrollY}},[y]),po=jt((m,h,J,T)=>{let M=J.x-h.x,W=J.y-h.y,ie=M*M+W*W;if(ie===0)return Math.sqrt((m.x-h.x)**2+(m.y-h.y)**2)<=T;let F=Math.max(0,Math.min(1,((m.x-h.x)*M+(m.y-h.y)*W)/ie)),q=h.x+F*M,x=h.y+F*W;return Math.sqrt((m.x-q)**2+(m.y-x)**2)<=T},[]),Cr=jt(m=>{for(let J=Tt.length-1;J>=0;J--){let T=Tt[J];if(!T||Rn.has(T))continue;let M=(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,F=y.current;if(F){let q=F.getContext("2d");if(q){q.font=`${ie}px ${Jt}`;let x=T.text.replace(/\n/g," "),k=W.x-Pe.x,G=Ho(k),P=Fo(q,x,G),H=q.measureText(P).width,Y=ie*1.4;if(m.x>=W.x-4-4&&m.x<=W.x+H+4+4&&m.y>=W.y-4-4&&m.y<=W.y+Y+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],F=Math.min(W.x,ie.x),q=Math.max(W.x,ie.x),x=Math.min(W.y,ie.y),k=Math.max(W.y,ie.y),G=po(m,{x:F,y:x},{x:q,y:x},M),P=po(m,{x:F,y:k},{x:q,y:k},M),H=po(m,{x:F,y:x},{x:F,y:k},M),Y=po(m,{x:q,y:x},{x:q,y:k},M);if(G||P||H||Y)return T;break}case"circle":{if(T.points.length<2)continue;let W=T.points[0],ie=T.points[T.points.length-1],F=(W.x+ie.x)/2,q=(W.y+ie.y)/2,x=Math.abs(ie.x-W.x)/2,k=Math.abs(ie.y-W.y)/2,G=m.x-F,P=m.y-q,H=Math.sqrt((G/x)**2+(P/k)**2);if(Math.abs(H-1)*Math.max(x,k)<=M)return T;break}case"line":{if(T.points.length<2)continue;let W=T.points[0],ie=T.points[T.points.length-1];if(po(m,W,ie,M))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],F=T.points[W+1];if(po(m,ie,F,M))return T}break}}}return null},[Tt,y,po,Rn,Pe.x]),Is=jt(m=>{let h=Cr(m);return(h==null?void 0:h.type)==="text"?h:null},[Cr]),Rs=jt(m=>{if(ee.length===0)return null;let h=va/2+4;for(let J of ee){let T=e.annotations.find(M=>M.id===J);if(!(!T||T.points.length<2)){if(T.type==="line"){let M=T.points[0],W=T.points[T.points.length-1];if(Math.sqrt((m.x-M.x)**2+(m.y-M.y)**2)<=h)return{handle:"start",annotationId:J};if(Math.sqrt((m.x-W.x)**2+(m.y-W.y)**2)<=h)return{handle:"end",annotationId:J};continue}if(T.type==="circle"){let M=T.points[0],W=T.points[T.points.length-1],ie=Math.min(M.x,W.x),F=Math.max(M.x,W.x),q=Math.min(M.y,W.y),x=Math.max(M.y,W.y),k=(ie+F)/2,G=(q+x)/2,P=[{handle:"top",x:k,y:q},{handle:"bottom",x:k,y:x},{handle:"left",x:ie,y:G},{handle:"right",x:F,y:G}];for(let{handle:H,x:Y,y:V}of P)if(Math.sqrt((m.x-Y)**2+(m.y-V)**2)<=h)return{handle:H,annotationId:J};continue}if(T.type==="rectangle"||T.type==="freehand"){let M=T.points[0],W=T.points[T.points.length-1],ie,F,q,x;T.type==="freehand"?(ie=Math.min(...T.points.map(G=>G.x)),F=Math.max(...T.points.map(G=>G.x)),q=Math.min(...T.points.map(G=>G.y)),x=Math.max(...T.points.map(G=>G.y))):(ie=Math.min(M.x,W.x),F=Math.max(M.x,W.x),q=Math.min(M.y,W.y),x=Math.max(M.y,W.y));let k=[{corner:"topLeft",x:ie,y:q},{corner:"topRight",x:F,y:q},{corner:"bottomLeft",x:ie,y:x},{corner:"bottomRight",x:F,y:x}];for(let{corner:G,x:P,y:H}of k)if(Math.sqrt((m.x-P)**2+(m.y-H)**2)<=h)return{handle:G,annotationId:J}}}}return null},[ee,e.annotations]);an(()=>{let m=h=>{if(He.current={x:h.clientX+window.scrollX,y:h.clientY+window.scrollY},!C){let J=Is(He.current);ge((J==null?void 0:J.id)||null)}};return window.addEventListener("mousemove",m),()=>window.removeEventListener("mousemove",m)},[C,Is]);let Lo=jt(()=>{var h;if(!C)return;let m=((h=C.images)==null?void 0:h.length)||0;if(C.text.trim()||m>0)if(C.isNew){let J=Lr();t({type:"ADD_TEXT",payload:f({point:C.point,text:C.text||(m>0?`[${m} image${m>1?"s":""}]`:""),fontSize:C.fontSize,id:J,groupId:C.groupId,linkedSelector:C.linkedSelector,linkedAnchor:C.linkedAnchor,elements:C.elements},m>0?{imageCount:m}:{})}),m>0&&C.images&&s&&s(J,C.images)}else t({type:"UPDATE_TEXT",payload:f({id:C.id,text:C.text||(m>0?`[${m} image${m>1?"s":""}]`:"")},m>0?{imageCount:m}:{})}),m>0&&C.images&&s&&s(C.id,C.images);else C.isNew||t({type:"DELETE_ANNOTATION",payload:{id:C.id}});L(null)},[C,t,s]),Gn=jt(m=>{for(let h=0;h<as.length-1;h++){let J=as[h],T=as[h+1];if(m<=(J+T)/2)return J;if(m<T)return T}return Math.round(m/8)*8},[]),Ls=jt((m,h,J,T)=>{let M=J.top+Math.max(T.top,4),W=J.bottom-Math.max(T.bottom,4),ie=J.left+Math.max(T.left,4),F=J.right-Math.max(T.right,4);if(m<J.left||m>J.right||h<J.top||h>J.bottom)return null;let q=h<M,x=h>W,k=m<ie,G=m>F;return q&&k?T.top>=T.left?"top":"left":q&&G?T.top>=T.right?"top":"right":x&&k?T.bottom>=T.left?"bottom":"left":x&&G?T.bottom>=T.right?"bottom":"right":q?"top":x?"bottom":k?"left":G?"right":null},[]),As=jt(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=Ro(m),J="shiftKey"in m&&m.shiftKey;if(e.activeTool==="inspector"){if("button"in m&&m.button===2)return;if(ce&&!Re(ce)){let F=e.annotations.find(je=>{if(!je.linkedSelector||!je.threadId)return!1;try{return ce.matches(je.linkedSelector)}catch(Ke){return!1}});if(F!=null&&F.threadId&&a){a(F.threadId),requestAnimationFrame(()=>{var kt;let je=document.querySelector("[data-popmelt-shadow-host]"),Ke=(kt=je==null?void 0:je.shadowRoot)==null?void 0:kt.querySelector("[data-popmelt-reply]");Ke==null||Ke.focus()});return}let q=yn(ce),x=wn(ce),k=ce.getBoundingClientRect(),G=ce.getAttribute("data-pm");G||(G=Math.random().toString(36).substring(2,8),ce.setAttribute("data-pm",G));let P=`[data-pm="${G}"]`,H=e.styleModifications.some(je=>{try{return ce.matches(je.selector)}catch(Ke){return!1}}),Y=e.annotations.filter(je=>{if(!je.linkedSelector)return!1;try{return ce.matches(je.linkedSelector)}catch(Ke){return!1}}).length,V=(H?1:0)+Y,fe=k.top>=Ln*(1+V)?"top-left":"bottom-left",Oe=Sa(k,fe,V,B==null?void 0:B.current);ze({point:Oe,linkedSelector:P,linkedAnchor:fe,elements:[b(f({},q),{selector:x})]})}return}if(e.activeTool==="model"){if("button"in m&&m.button===2)return;if($e){let F=$e.name;if(g!=null&&g.has(F)){p==null||p(F);return}"shiftKey"in m&&m.shiftKey?ct(x=>{let k=new Map(x);return k.has(F)?k.delete(F):k.set(F,$e),k}):st.size===1&&st.has(F)?(c&&c([F]),ct(new Map)):ct(new Map([[F,$e]]))}return}if(e.activeTool==="hand"&&Et&&zt){let F=Et,q=F.getAttribute("data-pm");q||(q=Math.random().toString(36).substring(2,8),F.setAttribute("data-pm",q));let x=wn(F),k=`[data-pm="${q}"]`,G=yn(F),P=ar(F),H=h.x-window.scrollX,Y=h.y-window.scrollY,V=Fe,fe=window.getComputedStyle(F).justifyContent,Oe=0;if(V){let Ke=So(F).find(kt=>kt.axis===zt);Oe=Ke?zt==="column"?Ke.w:Ke.h:0}Ge(F,"transition","none"),bt.current={isDragging:!0,hasMoved:!1,axis:zt,startX:H,startY:Y,originalRow:V?Oe:P.row,originalColumn:V?Oe:P.column,element:F,elementInfo:b(f({},G),{selector:k}),selector:k,durableSelector:x,isAuto:V,originalJustifyContent:fe,visualGap:Oe},Q({axis:zt,row:V?Oe:P.row,column:V?Oe:P.column});return}if(e.activeTool==="hand"&&Dt&&gn){let F=Dt,q=F.getAttribute("data-pm");q||(q=Math.random().toString(36).substring(2,8),F.setAttribute("data-pm",q));let x=`[data-pm="${q}"]`,k=yn(F),{fontSize:G,lineHeight:P}=cr(F),H=G>0?P/G:1.2,Y=h.x-window.scrollX,V=h.y-window.scrollY;Ge(F,"transition","none");let fe=wn(F);Pn.current={isDragging:!0,property:gn,startX:Y,startY:V,originalFontSize:G,originalLineHeight:P,originalRatio:H,element:F,elementInfo:b(f({},k),{selector:x}),selector:x,durableSelector:fe},D({property:gn,fontSize:G,lineHeight:P});return}if(e.activeTool==="hand"&&sn&&Nt){let F=sn,q=F.getAttribute("data-pm");q||(q=Math.random().toString(36).substring(2,8),F.setAttribute("data-pm",q));let x=`[data-pm="${q}"]`,k=wn(F),G=yn(F),P=wo(F),H=F.getBoundingClientRect(),Y=Math.floor(H.height/2),V=h.y-window.scrollY;Ge(F,"transition","none"),gt.current={isDragging:!0,corner:Nt,startY:V,original:P,maxRadius:Y,element:F,elementInfo:b(f({},G),{selector:x}),selector:x,durableSelector:k},Qn({corner:Nt,radius:f({},P)});return}if(e.activeTool==="hand"&&ke&&We){let F=ke,q=F.getAttribute("data-pm");q||(q=Math.random().toString(36).substring(2,8),F.setAttribute("data-pm",q));let x=`[data-pm="${q}"]`,k=wn(F),G=yn(F),P=Wo(F),H=h.x-window.scrollX,Y=h.y-window.scrollY;Ge(F,"transition","none"),pe.current={isDragging:!0,side:We,startX:H,startY:Y,original:P,element:F,elementInfo:b(f({},G),{selector:x}),selector:x,durableSelector:k},Vt({side:We,padding:f({},P)});return}let T=Rs(h);if(T){let F=e.annotations.find(q=>q.id===T.annotationId);if(F&&F.type!=="text"&&((W=F.status)!=null?W:"pending")==="pending"){ot({annotationId:T.annotationId,handle:T.handle,startPoint:h,originalPoints:[...F.points],hasMoved:!1});return}}let M=Cr(h);if(M&&M.points[0]){if(C&&Lo(),M.type!=="text"?(de(M.id,J),M.color&&t({type:"SET_COLOR",payload:M.color})):J||we(),a){let F=M.threadId||(M.groupId?(ie=e.annotations.find(q=>q.groupId===M.groupId&&q.threadId))==null?void 0:ie.threadId:void 0);F&&a(F)}j({annotation:M,startPoint:h,hasMoved:!1});return}if(J||we(),e.activeTool==="text"){C&&Lo();let F=Math.random().toString(36).substring(2,9);L({id:F,point:h,text:"",fontSize:12,isNew:!0});return}$(!0),t({type:"START_PATH",payload:h})},[e.isAnnotating,e.activeTool,e.inspectedElement,e.annotations,C,ee,ce,ke,We,sn,Nt,Et,zt,Fe,Dt,gn,$e,st,g,c,p,a,Ro,Cr,Rs,t,de,we,Lo]),Ps=jt(m=>{var J,T;let h=Ro(m);if(e.activeTool==="inspector"&&e.isAnnotating){let M=h.x-window.scrollX,W=h.y-window.scrollY,ie=vo(M,W),F=ie&&Re(ie)?null:ie;F!==ce&&(Se(F),De(F?yn(F):null));return}if(e.activeTool==="model"&&e.isAnnotating){let M=h.x-window.scrollX,W=h.y-window.scrollY,ie=vo(M,W);if(ie!==xe.current&&(xe.current=ie,_.current=0),ie){let F=Br(ie,_.current);Ie(F)}else Ie(null);return}if(e.activeTool==="hand"&&e.isAnnotating){let M=h.x-window.scrollX,W=h.y-window.scrollY;Kt.current={x:M,y:W},Ot({x:M,y:W});let ie=K.current.cmd,F=K.current.shift;if(bt.current.isDragging){let x=bt.current,k=x.element;if(!k)return;if(!x.hasMoved){let Y=Math.abs(M-x.startX),V=Math.abs(W-x.startY);if(Y<=2&&V<=2)return;x.hasMoved=!0,x.isAuto&&(Ge(k,"justify-content","normal"),Ge(k,"row-gap",`${x.visualGap}px`),Ge(k,"column-gap",`${x.visualGap}px`),tt(!1))}let G=x.axis,P=x.originalRow,H=x.originalColumn;if(G==="column"){let Y=M-x.startX;H=x.originalColumn+Y,ie||(P=x.originalRow+Y)}else{let Y=W-x.startY;P=x.originalRow+Y,ie||(H=x.originalColumn+Y)}P=Math.max(0,P),H=Math.max(0,H),F&&(P=Gn(P),H=Gn(H)),P=Math.round(P),H=Math.round(H),Ge(k,"row-gap",`${P}px`),Ge(k,"column-gap",`${H}px`),Q({axis:G,row:P,column:H});return}if(gt.current.isDragging){let x=gt.current,k=x.element;if(!k)return;let G=W-x.startY,P=x.corner,H=x.original,Y=f({},H);if(ie){let V=H[P]+G;V=Math.max(0,Math.min(x.maxRadius,V)),F&&(V=Gn(V)),V=Math.round(V),Y[P]=V}else{let V=H[P]+G;V=Math.max(0,Math.min(x.maxRadius,V)),F&&(V=Gn(V)),V=Math.round(V),Y={"top-left":V,"top-right":V,"bottom-right":V,"bottom-left":V}}Ge(k,"border-top-left-radius",`${Y["top-left"]}px`),Ge(k,"border-top-right-radius",`${Y["top-right"]}px`),Ge(k,"border-bottom-right-radius",`${Y["bottom-right"]}px`),Ge(k,"border-bottom-left-radius",`${Y["bottom-left"]}px`),Qn({corner:P,radius:Y});return}if(Pn.current.isDragging){let x=Pn.current,k=x.element;if(!k)return;let G=x.property,P=x.originalFontSize,H=x.originalLineHeight,Y=[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 fe=M-x.startX;P=x.originalFontSize+fe,P=Math.max(1,P)}else{let fe=W-x.startY;H=x.originalLineHeight+fe,H=Math.max(P,H)}if(F)if(G==="font-size"){let fe=Y[0],Oe=Math.abs(P-fe);for(let je of Y){let Ke=Math.abs(P-je);Ke<Oe&&(fe=je,Oe=Ke)}P=fe}else{let fe=P>0?H/P:1.2,Oe=Math.round(fe*2)/2;H=P*Math.max(1,Oe)}P=Math.round(P),H=Math.round(H*10)/10,Ge(k,"font-size",`${P}px`);let V=P>0?Math.round(H/P*1e3)/1e3:1.2;Ge(k,"line-height",`${V}`),D({property:G,fontSize:P,lineHeight:H});return}if(pe.current.isDragging){let x=pe.current,k=x.element;if(!k)return;let G=x.side,P=x.original,H=P.top,Y=P.right,V=P.bottom,fe=P.left;if(G==="top"){let Oe=x.startY-W;H=P.top+Oe,ie||(V=P.bottom+Oe)}else if(G==="bottom"){let Oe=W-x.startY;V=P.bottom+Oe,ie||(H=P.top+Oe)}else if(G==="left"){let Oe=x.startX-M;fe=P.left+Oe,ie||(Y=P.right+Oe)}else if(G==="right"){let Oe=M-x.startX;Y=P.right+Oe,ie||(fe=P.left+Oe)}H=Math.max(0,H),Y=Math.max(0,Y),V=Math.max(0,V),fe=Math.max(0,fe),F&&(H=Gn(H),Y=Gn(Y),V=Gn(V),fe=Gn(fe)),H=Math.round(H),Y=Math.round(Y),V=Math.round(V),fe=Math.round(fe),Ge(k,"padding",`${H}px ${Y}px ${V}px ${fe}px`),Vt({side:G,padding:{top:H,right:Y,bottom:V,left:fe}});return}let q=vo(M,W);for(;q&&q.tagName==="A";)q=q.parentElement;{let k=[];q&&k.push(q),sn&&sn!==q&&k.push(sn);let G=null,P=16,H=null;for(let Y of k){let V=Y.getBoundingClientRect(),fe=wo(Y),Oe=[["top-left",V.left,V.top+fe["top-left"]],["top-right",V.right,V.top+fe["top-right"]],["bottom-right",V.right,V.bottom-fe["bottom-right"]],["bottom-left",V.left,V.bottom-fe["bottom-left"]]];for(let[je,Ke,kt]of Oe){let qe=Math.hypot(M-Ke,W-kt);qe<P&&(P=qe,G=je,H=Y)}}if(G&&H){Pt(H),qt(G),ke&&oe(null),We&&Xe(null),Et&&rn(null),zt&&Mn(null),tt(!1),Dt&&jn(null),gn&&mn(null);return}}sn&&Pt(null),Nt&&qt(null);{let x=[];q&&Dr(q)&&x.push(q);let k=(J=q==null?void 0:q.parentElement)!=null?J:null;for(;k&&k!==document.body&&x.length<3;)Dr(k)&&x.push(k),k=k.parentElement;for(let G of x){let H=So(G).find(Y=>M>=Y.x&&M<=Y.x+Y.w&&W>=Y.y&&W<=Y.y+Y.h);if(H){rn(G),Mn(H.axis),tt(Pi(G,H.axis)),ke&&oe(null),We&&Xe(null),Dt&&jn(null),gn&&mn(null);return}}}Et&&rn(null),zt&&Mn(null),tt(!1);{let k=[];q&&k.push(q),Dt&&Dt!==q&&k.push(Dt);let G=null,P=1/0,H=null;for(let Y of k){if(!Bi(Y))continue;let V=Yo(Y);if(!V)continue;let fe=M>=V.left&&M<=V.right&&W>=V.top&&W<=V.bottom,Oe=[["font-size",V.right,V.top+V.height/2],["line-height",V.left+V.width/2,V.bottom]];for(let[je,Ke,kt]of Oe){let qe=Math.hypot(M-Ke,W-kt);(fe||qe<12)&&qe<P&&(P=qe,G=je,H=Y)}}G&&H?(jn(H),mn(G)):(Dt&&jn(null),gn&&mn(null))}if(q!==ke&&oe(q),q){let x=Wo(q),k=q.getBoundingClientRect(),G=Ls(M,W,k,x);Xe(G)}else Xe(null);return}if(le){let{handle:M,originalPoints:W,hasMoved:ie}=le,F=e.annotations.find(P=>P.id===le.annotationId);if(!F)return;let q="metaKey"in m,x=q&&(m.metaKey||m.ctrlKey),k=q&&m.shiftKey,G;if(F.type==="line"){let P=W[0],H=W[W.length-1];M==="start"?G=[h,H]:G=[P,h]}else if(F.type==="freehand"){let P=Math.min(...W.map(Ye=>Ye.x)),H=Math.max(...W.map(Ye=>Ye.x)),Y=Math.min(...W.map(Ye=>Ye.y)),V=Math.max(...W.map(Ye=>Ye.y)),fe=(P+H)/2,Oe=(Y+V)/2,je=H-P||1,Ke=V-Y||1,kt=je/Ke,qe=P,ue=H,Te=Y,nt=V;switch(M){case"topLeft":qe=h.x,Te=h.y;break;case"topRight":ue=h.x,Te=h.y;break;case"bottomLeft":qe=h.x,nt=h.y;break;case"bottomRight":ue=h.x,nt=h.y;break}if(x)switch(M){case"topLeft":ue=H+(P-qe),nt=V+(Y-Te);break;case"topRight":qe=P-(ue-H),nt=V+(Y-Te);break;case"bottomLeft":ue=H+(P-qe),Te=Y-(nt-V);break;case"bottomRight":qe=P-(ue-H),Te=Y-(nt-V);break}if(k){let Ye=ue-qe,wt=nt-Te;if(Math.abs(Ye/wt)>kt){let Ut=Math.abs(wt)*kt*Math.sign(Ye);M==="topLeft"||M==="bottomLeft"?qe=ue-Ut:ue=qe+Ut}else{let Ut=Math.abs(Ye)/kt*Math.sign(wt);M==="topLeft"||M==="topRight"?Te=nt-Ut:nt=Te+Ut}}let Ze=ue-qe||1,ft=nt-Te||1;G=W.map(Ye=>({x:qe+(Ye.x-P)/je*Ze,y:Te+(Ye.y-Y)/Ke*ft}))}else if(F.type==="circle"){let P=W[0],H=W[W.length-1],Y=Math.min(P.x,H.x),V=Math.max(P.x,H.x),fe=Math.min(P.y,H.y),Oe=Math.max(P.y,H.y),je=(Y+V)/2,Ke=(fe+Oe)/2,kt=V-Y,qe=Oe-fe,ue=Y,Te=V,nt=fe,Ze=Oe;switch(M){case"top":if(nt=h.y,x&&(Ze=Ke+(Ke-h.y)),k){let Ye=(Ze-nt)*(kt/qe)/2;ue=je-Ye,Te=je+Ye}break;case"bottom":if(Ze=h.y,x&&(nt=Ke-(h.y-Ke)),k){let Ye=(Ze-nt)*(kt/qe)/2;ue=je-Ye,Te=je+Ye}break;case"left":if(ue=h.x,x&&(Te=je+(je-h.x)),k){let Ye=(Te-ue)*(qe/kt)/2;nt=Ke-Ye,Ze=Ke+Ye}break;case"right":if(Te=h.x,x&&(ue=je-(h.x-je)),k){let Ye=(Te-ue)*(qe/kt)/2;nt=Ke-Ye,Ze=Ke+Ye}break}G=[{x:ue,y:nt},{x:Te,y:Ze}]}else{let P=W[0],H=W[W.length-1],Y=Math.min(P.x,H.x),V=Math.max(P.x,H.x),fe=Math.min(P.y,H.y),Oe=Math.max(P.y,H.y),je=(Y+V)/2,Ke=(fe+Oe)/2,kt=V-Y||1,qe=Oe-fe||1,ue=kt/qe,Te=Y,nt=V,Ze=fe,ft=Oe;switch(M){case"topLeft":Te=h.x,Ze=h.y;break;case"topRight":nt=h.x,Ze=h.y;break;case"bottomLeft":Te=h.x,ft=h.y;break;case"bottomRight":nt=h.x,ft=h.y;break}if(x)switch(M){case"topLeft":nt=V+(Y-Te),ft=Oe+(fe-Ze);break;case"topRight":Te=Y-(nt-V),ft=Oe+(fe-Ze);break;case"bottomLeft":nt=V+(Y-Te),Ze=fe-(ft-Oe);break;case"bottomRight":Te=Y-(nt-V),Ze=fe-(ft-Oe);break}if(k){let Ye=nt-Te,wt=ft-Ze;if(Math.abs(Ye/wt)>ue){let Ut=Math.abs(wt)*ue*Math.sign(Ye);M==="topLeft"||M==="bottomLeft"?Te=nt-Ut:nt=Te+Ut}else{let Ut=Math.abs(Ye)/ue*Math.sign(wt);M==="topLeft"||M==="topRight"?Ze=ft-Ut:ft=Ze+Ut}}G=[{x:Te,y:Ze},{x:nt,y:ft}]}t({type:"RESIZE_ANNOTATION",payload:{id:le.annotationId,points:G,saveUndo:!ie}}),ie||ot(b(f({},le),{hasMoved:!0}));return}if(S&&((T=S.annotation.status)!=null?T:"pending")==="pending"){let M=h.x-S.startPoint.x,W=h.y-S.startPoint.y;if((Math.abs(M)>2||Math.abs(W)>2)&&!S.hasMoved)j(b(f({},S),{hasMoved:!0,startPoint:h})),t({type:"MOVE_ANNOTATION",payload:{id:S.annotation.id,delta:{x:M,y:W},saveUndo:!0}});else if(S.hasMoved){let F=h.x-S.startPoint.x,q=h.y-S.startPoint.y;j(b(f({},S),{startPoint:h})),t({type:"MOVE_ANNOTATION",payload:{id:S.annotation.id,delta:{x:F,y:q}}})}return}!R||!e.isAnnotating||t({type:"CONTINUE_PATH",payload:h})},[R,e.isAnnotating,e.activeTool,S,le,ce,ke,We,sn,Nt,Et,zt,Dt,gn,Ro,t,Gn,Ls]),di=jt(m=>{var T,M,W,ie,F,q;if(Pn.current.isDragging){let x=Pn.current,k=x.element;if(k&&x.selector&&x.elementInfo&&ut){k instanceof HTMLElement&&(k.style.removeProperty("font-size"),k.style.removeProperty("line-height"),k.style.removeProperty("transition"));let G=[];if(x.originalFontSize!==ut.fontSize&&(Ge(k,"font-size",`${ut.fontSize}px`),G.push({property:"font-size",original:`${x.originalFontSize}px`,modified:`${ut.fontSize}px`})),x.originalLineHeight!==ut.lineHeight){let P=x.originalFontSize>0?Math.round(x.originalLineHeight/x.originalFontSize*1e3)/1e3:1.2,H=ut.fontSize>0?Math.round(ut.lineHeight/ut.fontSize*1e3)/1e3:1.2;Ge(k,"line-height",`${H}`),G.push({property:"line-height",original:`${P}`,modified:`${H}`})}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}})}Pn.current={isDragging:!1,property:null,startX:0,startY:0,originalFontSize:0,originalLineHeight:0,originalRatio:1.2,element:null,elementInfo:null,selector:null,durableSelector:null},D(null);return}if(bt.current.isDragging){let x=bt.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 P=["space-between","space-around","stretch","normal"],H=x.originalJustifyContent||"normal",Y=P.indexOf(H),V=P[(Y+1)%P.length],fe=[];V==="normal"?(Ge(k,"justify-content","normal"),fe.push({property:"justify-content",original:x.originalJustifyContent,modified:"normal"})):V==="stretch"?(Ge(k,"justify-content",V),Ge(k,"row-gap","8px"),Ge(k,"column-gap","8px"),fe.push({property:"justify-content",original:x.originalJustifyContent||"normal",modified:V}),x.originalRow!==8&&fe.push({property:"row-gap",original:`${x.originalRow}px`,modified:"8px"}),x.originalColumn!==8&&fe.push({property:"column-gap",original:`${x.originalColumn}px`,modified:"8px"})):(k instanceof HTMLElement&&(k.style.removeProperty("row-gap"),k.style.removeProperty("column-gap")),Ge(k,"justify-content",V),fe.push({property:"justify-content",original:x.originalJustifyContent||"normal",modified:V}),x.originalRow>0&&fe.push({property:"row-gap",original:`${x.originalRow}px`,modified:"0px"}),x.originalColumn>0&&fe.push({property:"column-gap",original:`${x.originalColumn}px`,modified:"0px"})),fe.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:x.selector,durableSelector:(M=x.durableSelector)!=null?M:void 0,element:x.elementInfo,changes:fe}})}else if(x.hasMoved&&k&&x.selector&&x.elementInfo&<){k instanceof HTMLElement&&(k.style.removeProperty("row-gap"),k.style.removeProperty("column-gap"),k.style.removeProperty("transition"));let P=[];x.isAuto?(k instanceof HTMLElement&&k.style.removeProperty("justify-content"),Ge(k,"justify-content","normal"),Ge(k,"row-gap",`${lt.row}px`),Ge(k,"column-gap",`${lt.column}px`),P.push({property:"justify-content",original:x.originalJustifyContent,modified:"normal"}),P.push({property:"row-gap",original:"0px",modified:`${lt.row}px`}),P.push({property:"column-gap",original:"0px",modified:`${lt.column}px`})):(x.originalRow!==lt.row&&(Ge(k,"row-gap",`${lt.row}px`),P.push({property:"row-gap",original:`${x.originalRow}px`,modified:`${lt.row}px`})),x.originalColumn!==lt.column&&(Ge(k,"column-gap",`${lt.column}px`),P.push({property:"column-gap",original:`${x.originalColumn}px`,modified:`${lt.column}px`}))),P.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:x.selector,durableSelector:(W=x.durableSelector)!=null?W:void 0,element:x.elementInfo,changes:P}})}bt.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},Q(null);return}if(gt.current.isDragging){let x=gt.current,k=x.element;if(k&&x.selector&&x.elementInfo&&xt){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"],P={"top-left":"border-top-left-radius","top-right":"border-top-right-radius","bottom-right":"border-bottom-right-radius","bottom-left":"border-bottom-left-radius"},H=[];for(let Y of G)x.original[Y]!==xt.radius[Y]&&(Ge(k,P[Y],`${xt.radius[Y]}px`),H.push({property:P[Y],original:`${x.original[Y]}px`,modified:`${xt.radius[Y]}px`}));H.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:x.selector,durableSelector:(ie=x.durableSelector)!=null?ie:void 0,element:x.elementInfo,changes:H}})}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},Qn(null);return}if(pe.current.isDragging){let x=pe.current,k=x.element,G=x.selector,P=x.elementInfo;if(k&&G&&P&&it){let H=x.original,Y=it.padding;k instanceof HTMLElement&&(k.style.removeProperty("padding"),k.style.removeProperty("transition"));let V=[],fe=[{prop:"padding-top",origVal:H.top,newVal:Y.top},{prop:"padding-right",origVal:H.right,newVal:Y.right},{prop:"padding-bottom",origVal:H.bottom,newVal:Y.bottom},{prop:"padding-left",origVal:H.left,newVal:Y.left}];for(let{prop:Oe,origVal:je,newVal:Ke}of fe)je!==Ke&&(Ge(k,Oe,`${Ke}px`),V.push({property:Oe,original:`${je}px`,modified:`${Ke}px`}));V.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:G,durableSelector:(F=x.durableSelector)!=null?F:void 0,element:P,changes:V}})}pe.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},Vt(null);return}if(le){ot(null);return}if(S){if(!S.hasMoved&&S.annotation.type==="text"&&((q=S.annotation.status)!=null?q:"pending")==="pending"){let x=Ro(m);L({id:S.annotation.id,point:S.annotation.points[0],text:S.annotation.text||"",fontSize:S.annotation.fontSize||12,isNew:!1,clickPoint:x,groupId:S.annotation.groupId})}j(null);return}if(!R)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),P=Math.abs(k.y-x.y);if((e.activeTool==="line"?Math.sqrt(G*G+P*P)<h:G<h&&P<h)&&["rectangle","circle","line"].includes(e.activeTool)){$(!1),t({type:"CANCEL_PATH"});return}}let J=Ti(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),P=Math.max(x.y,k.y),H=e.strokeWidth/2,Y=Math.random().toString(36).substring(2,9);ye({point:{x:G-H+4,y:P+H+4},groupId:Y}),$(!1),t({type:"FINISH_PATH",payload:{groupId:Y,elements:J}});return}$(!1),t({type:"FINISH_PATH",payload:{elements:J}})},[R,S,le,it,xt,lt,ut,Ro,t,e.activeTool,e.currentPath,e.strokeWidth]),pc=jt(m=>{let h=m.target.value;Io.current=m.target.selectionStart,L(J=>J&&b(f({},J),{text:h}))},[]),fc=jt(m=>{m.key==="Escape"?L(null):m.key==="Enter"&&!m.shiftKey&&(m.preventDefault(),Lo())},[Lo]),gc=jt(m=>{if(!C)return;let h=m.clipboardData.items,J=[];for(let T=0;T<h.length;T++){let M=h[T];if(M.type.startsWith("image/")){let W=M.getAsFile();W&&J.push(W)}}J.length>0&&(m.preventDefault(),L(T=>T?b(f({},T),{images:[...T.images||[],...J]}):null))},[C]),mc=jt(m=>{if(!e.isAnnotating)return;if(e.activeTool==="hand"){m.preventDefault();let J=ke||Et||sn||Dt;if(J&&!Re(J)){let T=yn(J),M=wn(J);t({type:"SELECT_ELEMENT",payload:{el:J,info:b(f({},T),{selector:M})}})}return}m.preventDefault();let h=y.current;h&&(N.current=!0,h.style.pointerEvents="none",setTimeout(()=>{N.current&&(N.current=!1,h.style.pointerEvents="")},4e3))},[e.activeTool,e.isAnnotating,ke,Et,sn,Dt,t,Re,y]);an(()=>{let m=Tt.filter(ie=>ie.linkedSelector);if(m.length===0)return;let h=null,J=document.createElement("canvas").getContext("2d"),T=()=>{var F,q,x;let ie=[];for(let k of m){let G=document.querySelector(k.linkedSelector);if(!G&&((q=(F=k.elements)==null?void 0:F[0])!=null&&q.selector)&&k.linkedSelector.startsWith("[data-pm=")){try{G=document.querySelector(k.elements[0].selector)}catch(qe){}if(G){let qe=(x=k.linkedSelector.match(/data-pm="([^"]+)"/))==null?void 0:x[1];qe&&G.setAttribute("data-pm",qe)}}if(!G)continue;let P=G.getBoundingClientRect(),H=e.styleModifications.some(qe=>{try{return G.matches(qe.selector)}catch(ue){return!1}}),Y=m.filter(qe=>qe.id!==k.id&&qe.timestamp<k.timestamp&&qe.linkedSelector===k.linkedSelector).length,V=(H?1:0)+Y,fe;if(k.text&&J){let qe=k.fontSize||12;J.font=`${qe}px ${Jt}`,fe=Math.max(...k.text.split(`
|
|
5
|
+
`).map(ue=>J.measureText(ue).width))}let Oe=P.top>=Ln*(1+V)?"top-left":"bottom-left",je=Sa(P,Oe,V,B==null?void 0:B.current,fe),Ke=k.points[0],kt=Oe!==k.linkedAnchor;Ke&&(kt||Math.abs(je.x-Ke.x)>1||Math.abs(je.y-Ke.y)>1)&&ie.push({id:k.id,point:je,linkedAnchor:kt?Oe:void 0})}ie.length>0&&t({type:"UPDATE_LINKED_POSITIONS",payload:{updates:ie}})},M=()=>{h&&cancelAnimationFrame(h),h=requestAnimationFrame(T)};T(),window.addEventListener("scroll",M,!0),window.addEventListener("resize",M,!0),window.addEventListener("load",M),document.fonts.ready.then(M);let W=new MutationObserver(M);return W.observe(document.body,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["style","class"]}),()=>{window.removeEventListener("scroll",M,!0),window.removeEventListener("resize",M,!0),window.removeEventListener("load",M),W.disconnect(),h&&cancelAnimationFrame(h)}},[Tt,t]);let hc=()=>{var m,h,J;if(!e.isAnnotating)return"default";if(le){let{handle:T}=le;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=lt==null?void 0:lt.axis)!=null?m:zt;if(T==="row")return"ns-resize";if(T==="column")return"ew-resize";if(xt||Nt)return"ns-resize";let M=(h=ut==null?void 0:ut.property)!=null?h:gn;if(M==="font-size")return"ew-resize";if(M==="line-height")return"ns-resize";let W=(J=it==null?void 0:it.side)!=null?J:We;return W==="top"||W==="bottom"?"ns-resize":W==="left"||W==="right"?"ew-resize":"default"}return"crosshair"},yc={position:"fixed",top:0,left:0,width:"100vw",height:"100vh",zIndex:9998,pointerEvents:e.isAnnotating?"auto":"none",visibility:e.isAnnotating?"visible":"hidden",cursor:hc()},nr=jt(()=>{let m=y.current;if(!m||!C)return{width:100,height:12*1.4,isWrapped:!1};let h=m.getContext("2d");if(!h)return{width:100,height:C.fontSize*1.4,isWrapped:!1};h.font=`${C.fontSize}px ${Jt}`;let T=h.measureText("Type here...").width,M=C.text.split(`
|
|
6
|
+
`),W=M.length>0?Math.max(T,...M.map(k=>h.measureText(k||" ").width)):T,ie=C.point.x-Pe.x,F=Ho(ie);if(W>F){let k=vl(h,M,F),G=Math.min(F,Math.max(T,...k.map(H=>h.measureText(H).width))),P=Math.max(1,k.length)*C.fontSize*1.4;return{width:G,height:P,isWrapped:!0}}let x=Math.max(1,M.length)*C.fontSize*1.4;return{width:W,height:x,isWrapped:!1}},[C,y,Pe.x])(),bc=C?Math.max(1,C.text.split(`
|
|
7
|
+
`).length)*C.fontSize*1.4+8:0,Bs=nr.height+8,xc=nr.isWrapped?Bs-bc:0,vc=C?{position:"fixed",left:C.point.x-4-Pe.x,top:C.point.y-4-Pe.y-xc,zIndex:9999,width:nr.width+8,height:Bs,padding:4,fontSize:C.fontSize,fontFamily:Jt,color:"#ffffff",backgroundColor:e.activeColor,border:"none",borderRadius:0,outline:"none",boxShadow:"none",lineHeight:1.4,resize:"none",overflow:"hidden",whiteSpace:nr.isWrapped?"pre-wrap":"pre",wordBreak:nr.isWrapped?"break-word":void 0}:{};return Ko(qo,{children:[rt("canvas",{ref:Z,id:"devtools-canvas",style:yc,onMouseDown:As,onMouseMove:Ps,onMouseUp:m=>di(m),onMouseLeave:m=>{di(m),Se(null),De(null)},onTouchStart:As,onTouchMove:Ps,onTouchEnd:m=>di(m),onContextMenu:mc}),C&&Ko(qo,{children:[rt("style",{children:"#devtools-text-input::placeholder { color: rgba(255, 255, 255, 0.5); }"}),rt("textarea",{id:"devtools-text-input",ref:Me,value:C.text,onChange:pc,onKeyDown:fc,onPaste:gc,onBlur:Lo,placeholder:"Type here...",style:vc}),C.images&&C.images.length>0&&Ko("div",{"data-devtools":!0,style:{position:"fixed",left:C.point.x-4-Pe.x,top:C.point.y-4-Pe.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:[C.images.length," image",C.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(Tt.map(m=>m.groupId||m.id)).size,dispatch:t,inFlightSelectors:o,toolbarRef:B,onHoverSelector:be}),e.activeTool==="hand"&&e.isAnnotating&&e.styleModifications.length>0&&rt(ea,{styleModifications:e.styleModifications,accentColor:e.activeColor}),e.isAnnotating&&rt($l,{annotations:Tt,supersededAnnotations:Rn,inFlightIds:r,scrollX:Pe.x,scrollY:Pe.y,annotationGroupMap:Sn,onViewThread:a,onSelectAnnotation:de,onHoverAnnotation:re,canvasRef:y}),e.isAnnotating&&l&&rt(Wl,{annotations:Tt,supersededAnnotations:Rn,scrollX:Pe.x,scrollY:Pe.y,onReply:l,annotationGroupMap:Sn,canvasRef:y,onHoverAnnotation:re}),e.isAnnotating&&i&&i.size>0&&rt(Hi,{inFlightSelectorColors:i}),e.isAnnotating&&ci&&rt(Hi,{inFlightSelectorColors:ci,animated:!1}),e.activeTool==="hand"&&e.isAnnotating&&(lt?bt.current.element:Et)&&rt(Yi,{element:lt?bt.current.element:Et,gap:lt?{row:lt.row,column:lt.column}:ar(Et),accentColor:e.activeColor,hoveredAxis:zt,draggingAxis:(Ns=lt==null?void 0:lt.axis)!=null?Ns:null,cursorViewport:St,isAutoGap:Fe,refreshKey:In}),e.activeTool==="hand"&&e.isAnnotating&&fn&&rt(ba,{element:fn.target,modifier:fn.modifier,accentColor:e.activeColor,refreshKey:In}),e.activeTool==="hand"&&e.isAnnotating&&!fn&&(xt?gt.current.element:sn)&&rt(Ul,{element:xt?gt.current.element:sn,radius:(Ds=xt==null?void 0:xt.radius)!=null?Ds:wo(sn),accentColor:e.activeColor,hoveredCorner:Nt,draggingCorner:(Hs=xt==null?void 0:xt.corner)!=null?Hs:null,cursorViewport:St}),e.activeTool==="hand"&&e.isAnnotating&&!fn&&(ut?Pn.current.element:Dt)&&rt(xa,{element:ut?Pn.current.element:Dt,fontSize:(Fs=ut==null?void 0:ut.fontSize)!=null?Fs:cr(Dt).fontSize,lineHeight:(_s=ut==null?void 0:ut.lineHeight)!=null?_s:cr(Dt).lineHeight,accentColor:e.activeColor,hoveredProperty:gn,draggingProperty:(zs=ut==null?void 0:ut.property)!=null?zs:null,cursorViewport:St}),e.activeTool==="hand"&&e.isAnnotating&&!fn&&(it?pe.current.element:ke)&&rt(Xi,{element:it?pe.current.element:ke,padding:($s=it==null?void 0:it.padding)!=null?$s:Wo(ke),accentColor:e.activeColor,hoveredSide:We,draggingSide:(Ws=it==null?void 0:it.side)!=null?Ws:null,cursorViewport:St,refreshKey:ut?ut.fontSize+ut.lineHeight*1e3:0}),e.activeTool==="inspector"&&e.isAnnotating&&rt(qo,{children:ce&&!e.inspectedElement&&(()=>{let m=(C==null?void 0:C.linkedSelector)||(ae==null?void 0:ae.linkedSelector);if(m)try{if(ce.matches(m))return null}catch(J){}let h=!!ae||!!(C!=null&&C.linkedSelector)||Tt.some(J=>{if(!J.linkedSelector)return!1;try{return ce.matches(J.linkedSelector)}catch(T){return!1}});return rt($n,{element:ce,isSelected:!1,elementInfo:Be,color:e.activeColor,hideTooltip:h})})()}),((C==null?void 0:C.linkedSelector)||(ae==null?void 0:ae.linkedSelector))&&(()=>{let m=(C==null?void 0:C.linkedSelector)||(ae==null?void 0:ae.linkedSelector);if(!m)return null;let h=null;try{h=document.querySelector(m)}catch(J){}return h?rt($n,{element:h,isSelected:!0,color:e.activeColor,hideTooltip:!0}):null})(),A&&(()=>{let m=e.annotations.find(T=>T.id===A);if(!(m!=null&&m.linkedSelector))return null;let h=null;try{h=document.querySelector(m.linkedSelector)}catch(T){}if(!h)return null;let J=!!(r&&r.has(m.id));return rt($n,{element:h,isSelected:!J,color:m.color,hideTooltip:!0})})(),z&&(()=>{let m=e.annotations.find(M=>M.id===z);if(!(m!=null&&m.linkedSelector))return null;let h=null;try{h=document.querySelector(m.linkedSelector)}catch(M){}if(!h)return null;let J=m.groupId?e.annotations.filter(M=>M.groupId===m.groupId):[m],T=!!(r&&J.some(M=>r.has(M.id)));return rt($n,{element:h,isSelected:!T,color:m.color,hideTooltip:!0})})(),se&&(()=>{let m=null;try{m=document.querySelector(se)}catch(J){}if(!m)return null;let h=!!(o&&o.has(se));return rt($n,{element:m,isSelected:!h,color:e.activeColor,hideTooltip:!0})})(),e.activeTool==="model"&&e.isAnnotating&&st.size>0&&[...st.entries()].map(([m,h])=>rt($n,{element:h.rootElement,isSelected:!0,elementInfo:{selector:"",tagName:h.rootElement.tagName.toLowerCase(),reactComponent:m},color:"#8b5cf6"},m)),e.activeTool==="model"&&e.isAnnotating&&mt&&rt($n,{element:mt.rootElement,isSelected:!0,elementInfo:{selector:"",tagName:mt.rootElement.tagName.toLowerCase(),reactComponent:mt.name},color:"#22c55e"}),e.activeTool==="model"&&e.isAnnotating&&eo.length>0&&eo.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"?Ko(qo,{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)})]}):Ko(qo,{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&&$e&&rt($n,{element:$e.rootElement,isSelected:!1,elementInfo:{selector:"",tagName:$e.rootElement.tagName.toLowerCase(),reactComponent:$e.name},color:g!=null&&g.has($e.name)?"#22c55e":"#8b5cf6"}),e.activeTool==="hand"&&e.isAnnotating&&e.inspectedElement&&Ko(qo,{children:[At&&At!=="padding"&&At!=="gap"&&(()=>{var F;let m=new Set(Tt.map(q=>q.groupId||q.id)).size,h=e.inspectedElement.info.selector,J=e.styleModifications.findIndex(q=>q.selector===h),T=J>=0?m+J+1:m+e.styleModifications.length+1,M=e.styleModifications.find(q=>q.selector===h),W=(F=M==null?void 0:M.changes.length)!=null?F:0,ie=!!(M!=null&&M.captured);return rt($n,{element:e.inspectedElement.el,isSelected:!0,elementInfo:e.inspectedElement.info,color:ie?"#999999":e.activeColor,annotationNumber:T,changeCount:W})})(),At==="padding"&&rt(Xi,{element:e.inspectedElement.el,padding:Wo(e.inspectedElement.el),accentColor:e.activeColor,hoveredSide:null,draggingSide:null}),At==="gap"&&rt(Yi,{element:e.inspectedElement.el,gap:ar(e.inspectedElement.el),accentColor:e.activeColor,hoveredAxis:null,draggingAxis:null}),rt(ha,{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:Gt,accentColor:e.activeColor,toolbarRef:B})]})]})}import{useCallback as Tn,useEffect as bn,useMemo as yr,useRef as Rt,useState as br}from"react";import{Circle as ef,Component as tf,Hand as nf,MessageCircle as of,Pen as rf,Slash as sf,Square as lf,Trash2 as af,Type as cf}from"lucide-react";import{useEffect as Ca,useRef as Ea}from"react";function ka(e,t,n,r,o){let i=Ea(0),s=Ea(t.annotations);Ca(()=>{if(!n.current||!e)return;s.current=t.annotations;let l=t.annotations.length;l>0&&(l>=i.current||!r)&&(localStorage.setItem(o.annotations,JSON.stringify(t.annotations)),i.current=l)},[t.annotations,e,r,n,o]),Ca(()=>{n.current&&(localStorage.setItem(o.expanded,String(e)),e&&(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.styleModifications,t.spacingTokenChanges,t.activeTool,t.activeColor,t.strokeWidth,t.inspectedElement,n,o])}import{Component as Cp,createElement as Ep,useCallback as ti,useEffect as lo,useRef as To,useState as kn}from"react";import{Link2 as kp}from"lucide-react";var sp={colors:[],fonts:[],typeScale:[],spacing:[],radii:[],shadows:[],other:[],references:{}},lp=/^#[0-9a-fA-F]{3,8}$/,ap=/^(?:rgba?|hsla?|oklch|oklab|lch|lab)\(/,cp=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 Ma(e){let t=e.trim().toLowerCase();return lp.test(t)||ap.test(t)||cp.has(t)}var dp=/^-?\d+(\.\d+)?(px|rem|em|%)$/;function ds(e){return dp.test(e.trim())}var Ta=new Set(["serif","sans-serif","monospace","cursive","fantasy","system-ui","ui-serif","ui-sans-serif","ui-monospace","ui-rounded"]);function up(e){let t=e.trim().toLowerCase();return!!(Ta.has(t)||t.includes(",")&&t.split(",").some(n=>Ta.has(n.trim().replace(/['"]/g,""))))}function pp(e){let t=e.trim().toLowerCase(),n=t.match(/\d+(\.\d+)?px/g);return!!(n&&n.length>=2&&(Ma(t.replace(/[^#()\w,.\s/%]/g,"").split(/\s+/).pop()||"")||t.includes("rgb")||t.includes("hsl")||t.includes("#")))}var fp=/(?:^--(color|bg|fg|accent|border-color|text-color|surface|background|foreground))|(?:-(color|bg|fg)$)/i,gp=/^--(font-family|font|ff|family)/i,mp=/^--(font-size|text-size|fs|text-(?:xs|sm|base|md|lg|xl|2xl|3xl|4xl|5xl))/i,hp=/^--(space|gap|padding|margin|inset)/i,yp=/^--(radius|rounded|br|border-radius)/i,bp=/^--(shadow|elevation|drop-shadow)/i;function Ia(e,t){let n=e.toLowerCase();return bp.test(n)?"shadows":yp.test(n)?"radii":gp.test(n)?"fonts":mp.test(n)&&ds(t)?"typeScale":fp.test(n)||Ma(t)?"colors":up(t)?"fonts":pp(t)?"shadows":hp.test(n)&&ds(t)||ds(t)?"spacing":"other"}function Ra(e,t,n,r){if(e)for(let o of e){if(o instanceof CSSGroupingRule){Ra(o.cssRules,t,n,r);continue}if(o instanceof CSSStyleRule){let i=o.selectorText.toLowerCase();(i===":root"||i==="html"||i==="*"||i.includes(":root"))&&xp(o.style,t,n,r)}}}var La=/var\((--[^,)]+)/;function xp(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=Ia(i,s);r[l].push([i,s]);let d=e.getPropertyValue(i).trim().match(La);d&&(r.references[i]=d[1])}}function qr(e){let t=e.trim().match(/^(-?\d+(?:\.\d+)?)/);return t?parseFloat(t[1]):null}function Qr(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 Aa(e){return e==="colors"?(t,n)=>{let r=Qr(t[1]),o=Qr(n[1]);return r!==null&&o!==null?r-o:t[0].localeCompare(n[0])}:e==="typeScale"||e==="spacing"||e==="radii"?(t,n)=>{let r=qr(t[1]),o=qr(n[1]);return r!==null&&o!==null?r-o:t[0].localeCompare(n[0])}:e==="other"?(t,n)=>{let r=qr(t[1]),o=qr(n[1]);return r!==null&&o!==null?r-o:t[0].localeCompare(n[0])}:(t,n)=>t[0].localeCompare(n[0])}function vp(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 Pa(e){let t=new Map;for(let o of e){let i=vp(o[0]),s=t.get(i);s||(s=[],t.set(i,s)),s.push(o)}let n=Aa("colors");for(let o of t.values())o.sort(n);let r=[...t.entries()];return r.sort((o,i)=>{var a,d;let s=(a=Qr(o[1][0][1]))!=null?a:0,l=(d=Qr(i[1][0][1]))!=null?d:0;return s-l}),r}var Sp=["colors","fonts","typeScale","spacing","radii","shadows","other"],Zr=null,wp=5e3;function Ba(){if(typeof document=="undefined")return sp;if(Zr&&Date.now()-Zr.timestamp<wp)return Zr.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{Ra(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=Ia(i,s);e[l].push([i,s]);let d=r.getPropertyValue(i).trim().match(La);d&&(e.references[i]=d[1])}for(let o of Sp)e[o].sort(Aa(o));return Zr={tokens:e,timestamp:Date.now()},e}import{Fragment as Zo,jsx as _e,jsxs as nn}from"react/jsx-runtime";var Oa="popmelt-library-tab",Tp=/^#[0-9a-fA-F]{3,8}$/,Mp=/^(?:rgba?|hsla?|oklch)\([^)]+\)$/,Ip=new Set(["black","white","red","blue","green","yellow","orange","purple","pink","gray","grey","cyan","magenta","brown","navy","teal","maroon","olive","silver","aqua","fuchsia","lime"]),Rp=/^-?\d+(\.\d+)?(px|rem|em|%)$/;function Da(e){let t=e.trim();return Tp.test(t)||Mp.test(t)||Ip.has(t.toLowerCase())}function Lp(e){return Rp.test(e.trim())}function Ap(e){let t=e.trim().match(/^(-?\d+(?:\.\d+)?)px$/);return t?parseFloat(t[1]):null}function Ha(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(...Ha(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])=>Da(r)).length>e.length/2?"colors":e.filter(([,r])=>Lp(r)).length>e.length/2?"spacing":"generic"}var Bp=b(f({position:"fixed",top:16,right:16,bottom:80,width:300,backgroundColor:"#eaeaea"},io),{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"}),Fa={border:"none",background:"none",cursor:"pointer",fontFamily:"inherit",fontSize:11,fontWeight:600,padding:"2px 0",color:"#9ca3af"},Op=b(f({},Fa),{color:"#1f2937",borderBottom:"1.5px solid #1f2937"});function Np({varName:e,value:t,reference:n}){return _e("div",{title:n?`${e} \u2192 ${n}
|
|
8
|
+
${t}`:`${e}: ${t}`,style:{width:28,height:28,backgroundColor:t,outline:"1px solid rgba(0,0,0,0.08)",outlineOffset:-1,position:"relative"},children:n&&_e(kp,{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 _a({entries:e,references:t}){let n=[],r=[];for(let i of e)Da(i[1])?n.push(i):r.push(i);let o=Pa(n);return nn(Zo,{children:[o.map(([i,s])=>nn("div",{style:{marginBottom:4},children:[nn("div",{style:{fontSize:10,color:"#9ca3af",marginBottom:2},children:[i,s.length>1?` (${s.length})`:""]}),_e("div",{style:{display:"flex",flexWrap:"wrap",gap:2},children:s.map(([l,a])=>_e(Np,{varName:l,value:a,reference:t[l]},l))})]},i)),r.length>0&&_e(ni,{entries:r})]})}var ei=[0,1,2,4,8,12,16,20,24,28,32];function Dp(e){if(e<=32){let t=ei[0],n=Math.abs(e-t);for(let r=1;r<ei.length;r++){let o=Math.abs(e-ei[r]);o<n&&(t=ei[r],n=o)}return t}return Math.round(e/8)*8}function Hp({label:e,value:t,px:n,tokenPath:r,rawToken:o,onHover:i,onModify:s,onDelete:l}){let[a,d]=kn(!1),[c,p]=kn(null),u=To(!1),g=To(0),E=To(0),w=To([]),I=c!==null?c:n,A=c!==null?`${c}px`:t,U=c!==null,B=ti(v=>{v.preventDefault(),u.current=!0,g.current=v.clientX,E.current=n;let O=Or(o);w.current=Ii(O);let Z=R=>{let $=R.clientX-g.current,C=Math.max(0,Math.round(E.current+$));R.shiftKey&&(C=Dp(C));for(let L of w.current)L.element.style.setProperty(L.property,C+"px","important");p(C),i==null||i({name:e,px:C,token:O})},N=()=>{window.removeEventListener("mousemove",Z),window.removeEventListener("mouseup",N),document.body.style.cursor="",u.current=!1,p(R=>{if(R!==null&&R!==n&&s){let $=Or(o),C=$.bindings&&$.bindings.length>0,L;if(C){let ye=Li($.bindings,E.current,R);L=JSON.stringify(b(f({},$),{value:`${R}px`,bindings:ye}))}else{let ye=Pl(w.current,E.current),ae=Bl(w.current);if(ye.length>0){let ze=Li(ye,E.current,R);L=JSON.stringify({value:`${R}px`,property:ae,bindings:ze})}else L=`${R}px`}let X=typeof o=="string"?o:JSON.stringify(o),ge=w.current.map(ye=>({selector:wn(ye.element),property:ye.property})),ve=Nl(w.current,E.current,R);s({tokenPath:r,originalValue:X,currentValue:L,targets:ge,originalPx:E.current,currentPx:R},{id:Math.random().toString(36).substring(2,9),tokenPath:r,tokenName:e,originalPx:E.current,newPx:R,affectedElements:ve})}return R})};document.body.style.cursor="ew-resize",window.addEventListener("mousemove",Z),window.addEventListener("mouseup",N)},[n,e,r,o,i,s]),y=Or(o);return nn("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",fontSize:11,padding:"1px 0",cursor:"ew-resize",userSelect:"none"},onMouseEnter:()=>{u.current||(d(!0),i==null||i({name:e,px:I,token:y}))},onMouseLeave:()=>{u.current||(d(!1),i==null||i(null))},onMouseDown:B,children:[_e("span",{style:{color:a||U?"#FF0000":"#9ca3af"},children:e}),nn("span",{style:{display:"flex",alignItems:"center",gap:4},children:[_e("span",{style:{color:a||U?"#FF0000":"#6b7280",fontWeight:600},children:A}),l&&a&&!U&&_e("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 Fp({entries:e,categoryKey:t,rawTokens:n,onHover:r,onModify:o,onDelete:i}){let s=[],l=[];for(let a of e){let d=Ap(a[1]);d!==null?s.push([a[0],a[1],d]):l.push(a)}return nn(Zo,{children:[s.length>0&&_e("div",{style:{display:"flex",flexDirection:"column",gap:2},children:s.map(([a,d,c])=>{let p=a.split(".").pop(),u=n?_p(n,a):d,g=u&&typeof u=="object"&&"value"in u?u:d;return _e(Hp,{label:p,value:d,px:c,tokenPath:`tokens.${t}.${a}`,rawToken:g,onHover:r,onModify:o,onDelete:i},a)})}),l.length>0&&_e(ni,{entries:l})]})}function _p(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 ni({entries:e}){return _e("div",{style:{display:"flex",flexDirection:"column",gap:3},children:e.map(([t,n])=>nn("div",{style:{fontSize:11},children:[_e("div",{style:{color:"#9ca3af",fontSize:10,marginBottom:1},children:t}),_e("div",{style:{color:"#1f2937",lineHeight:1.4,paddingLeft:8},children:n})]},t))})}function zp({entries:e,categoryKey:t,rawTokens:n,onSpacingHover:r,onModifyToken:o,onDeleteToken:i}){let s=Pp(e);return s==="colors"?_e(_a,{entries:e}):s==="spacing"?_e(Fp,{entries:e,categoryKey:t,rawTokens:n,onHover:r,onModify:o,onDelete:i}):_e(ni,{entries:e})}function $p(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,d=typeof a=="function"||typeof a=="object"?(a==null?void 0:a.displayName)||(a==null?void 0:a.name):null;if(typeof d=="string"){let c=d.toLowerCase();if(c===t){let p=f({},l.memoizedProps);return delete p.ref,{type:a,props:p}}if(!n){if(c.length>=4&&t.includes(c)){let p=f({},l.memoizedProps);delete p.ref,n={type:a,props:p}}else if(t.length>=4&&c.includes(t)){let p=f({},l.memoizedProps);delete p.ref,n={type:a,props:p}}}}l=l.return}}return n}var us=class extends Cp{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}},za="popmelt-principles-collapsed";function Wp(){try{let e=localStorage.getItem(za);if(e)return new Set(JSON.parse(e))}catch(e){}return new Set}function Yp(e){try{localStorage.setItem(za,JSON.stringify([...e]))}catch(t){}}function jp({id:e,label:t,count:n,children:r,collapsed:o,onToggle:i}){return nn("div",{style:{marginBottom:14},children:[nn("div",{onClick:()=>i(e),style:{fontWeight:700,fontSize:11,color:"#6b7280",letterSpacing:"0.05em",marginBottom:o?0:6,cursor:"pointer",display:"flex",alignItems:"center",gap:4,userSelect:"none"},children:[_e("span",{style:{display:"inline-flex",alignItems:"center",justifyContent:"center",width:10,fontSize:9,color:"#9ca3af",transform:o?"rotate(-90deg)":"rotate(0deg)"},children:"\u25BC"}),t,_e("span",{style:{fontWeight:400,color:"#9ca3af"},children:n})]}),!o&&r]})}var Gp={colors:"Colors",fonts:"Fonts",typeScale:"Type Scale",spacing:"Spacing",radii:"Radii",shadows:"Shadows",other:"Other"},Na=["colors","fonts","typeScale","spacing","radii","shadows","other"];function Vp(){let[e,t]=kn(null),[n,r]=kn(Wp);lo(()=>{t(Ba())},[]);let o=ti(s=>{r(l=>{let a=new Set(l);return a.has(s)?a.delete(s):a.add(s),Yp(a),a})},[]);return e?Na.some(s=>e[s].length>0)?_e(Zo,{children:Na.map(s=>{let l=e[s];return l.length===0?null:_e(jp,{id:s,label:Gp[s],count:l.length,collapsed:n.has(s),onToggle:o,children:s==="colors"?_e(_a,{entries:l,references:e.references}):_e(ni,{entries:l})},s)})}):_e("div",{style:{color:"#9ca3af",fontSize:11},children:"No :root tokens found."}):null}function Up({rules:e}){return!e||e.length===0?_e("div",{style:{color:"#9ca3af",fontSize:11},children:"No rules defined yet."}):_e(Zo,{children:e.map((t,n)=>nn("div",{style:{display:"flex",gap:6,marginBottom:4,lineHeight:1.4,fontSize:11},children:[nn("span",{style:{color:"#9ca3af",flexShrink:0},children:[n+1,"."]}),_e("span",{children:t})]},n))})}function Jp({name:e,value:t,selected:n,highlighted:r,onRemove:o,onHover:i}){var R;let[s,l]=kn(!1),[a,d]=kn(!1),c=To(null),p=To(0),[u,g]=kn(0),[E,w]=kn(0),I=Ha(t),A=(R=I.find(([$])=>$==="description"))==null?void 0:R[1];lo(()=>{if(!a&&!r){g(0),w(0),p.current=0;return}let $=zo(e);g($.length)},[a,r,e]),lo(()=>{n&&c.current&&c.current.scrollIntoView({behavior:"smooth",block:"nearest"})},[n]);let U=n||r||a,B=n?"139,92,246":"34,197,94",y=n?"#8b5cf6":"#22c55e",v=U?`rgba(${B},0.06)`:void 0,O=U?`inset 0 0 0 1.5px rgba(${B},0.35)`:void 0,Z=r||a,N=ti(()=>{let $=zo(e);if($.length===0)return;let C=p.current%$.length;$[C].rootElement.scrollIntoView({behavior:"smooth",block:"center"}),w(C),p.current=C+1,i==null||i({name:e,instanceIndex:C})},[e,i]);return nn("div",{ref:c,onClick:N,onMouseEnter:()=>{d(!0),i==null||i({name:e,instanceIndex:0})},onMouseLeave:()=>{d(!1),i==null||i(null)},style:{marginBottom:8,background:v,padding:6,boxShadow:O,cursor:"pointer"},children:[nn("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between"},children:[nn("div",{style:{display:"flex",alignItems:"center",gap:6,marginBottom:6},children:[_e("div",{style:{fontWeight:700,fontSize:11,letterSpacing:"0.05em",padding:"2px 6px",backgroundColor:Z?y:"transparent",color:Z?"#fff":"#6b7280"},children:e}),Z&&u>1&&nn("span",{style:{fontSize:10,fontWeight:600,color:"#9ca3af"},children:[E+1,"/",u]})]}),o&&a&&_e("button",{type:"button",title:"Remove from model",onClick:$=>{$.stopPropagation(),o(e)},style:{border:"none",background:"none",cursor:"pointer",padding:"0 2px",fontSize:14,lineHeight:1,color:"#9ca3af",marginTop:-4},onMouseEnter:$=>{$.currentTarget.style.color="#FF0000"},onMouseLeave:$=>{$.currentTarget.style.color="#9ca3af"},children:"\u2715"})]}),A&&_e("div",{style:{fontSize:11,color:Z?"#1f2937":"#9ca3af",marginBottom:6,lineHeight:1.4},children:A}),s?_e(zp,{entries:I.filter(([$])=>$!=="description"),categoryKey:""}):_e(Xp,{name:e,onNotFound:()=>l(!0),entries:I})]})}function Xp({name:e,onNotFound:t}){let[n,r]=kn(null),[o,i]=kn(!1);return lo(()=>{let s=$p(e);s||t(),r(s),i(!0)},[e,t]),!o||!n?null:_e(us,{onError:t,children:_e("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:_e("div",{style:{zoom:.5,pointerEvents:"none"},children:Ep(n.type,n.props)})})})}function Kp({components:e,selectedComponent:t,hoveredComponent:n,onRemove:r,onHover:o}){if(!e||Object.keys(e).length===0)return _e("div",{style:{color:"#9ca3af",fontSize:11},children:"No component patterns defined yet."});let i=new Set(Object.keys(e)),s=ki(i),l=Object.entries(e).sort(([a],[d])=>{var c,p;return((c=s.get(a))!=null?c:1/0)-((p=s.get(d))!=null?p:1/0)});return _e(Zo,{children:l.map(([a,d])=>_e(Jp,{name:a,value:d,selected:t===a,highlighted:n===a,onRemove:r,onHover:o},a))})}function $a({bridgeUrl:e,modelRefreshKey:t,onMouseEnter:n,onMouseLeave:r,selectedComponent:o,hoveredComponent:i,onComponentHover:s,onSpacingTokenHover:l,onModifySpacingToken:a,onDeleteSpacingToken:d,onComponentAdded:c,onComponentRemoved:p}){let[u,g]=kn(void 0),[E,w]=kn(!0),[I,A]=kn(()=>{try{let N=localStorage.getItem(Oa);if(N==="patterns"||N==="principles"||N==="rules")return N}catch(N){}return"patterns"});lo(()=>{Po(e).then(N=>{g(N),w(!1)})},[e,t]),lo(()=>{try{localStorage.setItem(Oa,I)}catch(N){}},[I]),lo(()=>{o&&(A("patterns"),Po(e).then(N=>{N&&g(N)}))},[o,e]);let U=ti(N=>{g(R=>{if(!(R!=null&&R.components))return R;let L=R.components,{[N]:$}=L,C=no(L,[kr(N)]);return b(f({},R),{components:C})}),p==null||p(N)},[p]),B=u==null?void 0:u.components,y=u==null?void 0:u.rules,v=B&&Object.keys(B).length>0,O=y&&y.length>0,Z=To(null);return lo(()=>{let N=Z.current;if(!N)return;let R=n,$=r;return R&&N.addEventListener("mouseenter",R),$&&N.addEventListener("mouseleave",$),()=>{R&&N.removeEventListener("mouseenter",R),$&&N.removeEventListener("mouseleave",$)}},[n,r]),nn("div",{ref:Z,style:Bp,children:[nn("div",{style:{display:"flex",alignItems:"center",gap:6,fontWeight:700,fontSize:13,marginBottom:6},children:[_e("span",{children:"Model"}),_e("code",{style:{fontSize:10,fontWeight:500,backgroundColor:"rgba(0,0,0,0.06)",padding:"1px 4px",color:"#6b7280"},children:"M"})]}),_e("div",{style:{display:"flex",gap:12,marginBottom:10,borderBottom:"1px solid rgba(0,0,0,0.08)",paddingBottom:6},children:["patterns","principles","rules"].map(N=>_e("button",{type:"button",style:I===N?Op:Fa,onClick:()=>A(N),children:N.charAt(0).toUpperCase()+N.slice(1)},N))}),_e("div",{style:{flex:1,overflowY:"auto",minHeight:0},children:I==="principles"?_e(Vp,{}):E?_e("div",{style:{color:"#9ca3af",fontSize:11},children:"Loading..."}):!u||!v&&!O?_e("div",{style:{color:"#9ca3af",lineHeight:1.5},children:"No design model yet. Pattern-scoped annotations will build one automatically."}):nn(Zo,{children:[I==="patterns"&&_e(Kp,{components:B,selectedComponent:o,hoveredComponent:i,onRemove:U,onHover:s}),I==="rules"&&_e(Up,{rules:y})]})})]})}import{jsx as Qo}from"react/jsx-runtime";var qp="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",Zp="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 ps({size:e=16,style:t}){return Qo("svg",{width:e,height:e,viewBox:"0 0 1200 1200",fill:"currentColor",stroke:"none",style:f({flexShrink:0},t),children:Qo("path",{d:qp})})}function fs({size:e=16,style:t}){return Qo("svg",{width:e,height:e,viewBox:"0 0 158.7128 157.296",fill:"currentColor",stroke:"none",style:f({flexShrink:0},t),children:Qo("path",{d:Zp})})}function gs({provider:e,size:t=16,style:n}){return e==="codex"?Qo(fs,{size:t,style:n}):Qo(ps,{size:t,style:n})}var mr=[{id:"claude-opus-4-6",label:"Opus 4.6"},{id:"claude-sonnet-4-6",label:"Sonn 4.6"}],hr=[{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 Qp=[...mr,...hr];function ms(e,t){if(!e)return t==="codex"?"Codex":"Claude Code";let n=Qp.find(r=>r.id===e);return n?n.label:e.replace(/-\d{8,}$/,"")}import{jsx as Ya}from"react/jsx-runtime";var Kn={iconDefault:"#1f2937",iconActive:"#1f2937",bgActive:"#dedede",bgHover:"#e2e2e2",separator:"#e5e7eb"};function ao({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?Kn.bgActive:"transparent",color:t?Kn.iconActive:Kn.iconDefault,opacity:s()};return Ya("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=Kn.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 Wa(){return Ya("div",{style:{width:1,height:20,backgroundColor:"rgba(0, 0, 0, 0.05)",margin:"0 8px"}})}import{Fragment as xr,jsx as Ce,jsxs as Mt}from"react/jsx-runtime";var Mo=[{type:"rectangle",icon:lf,label:"Rectangle",shortcut:"R"},{type:"circle",icon:ef,label:"Oval",shortcut:"O"},{type:"line",icon:sf,label:"Line",shortcut:"L"},{type:"freehand",icon:rf,label:"Pen",shortcut:"P"}],df=new Set(Mo.map(e=>e.type));function uf(e,t,n,r,o,i,s,l){let a=(e-o)*(r-i)-(n-o)*(t-i),d=(e-s)*(i-l)-(o-s)*(t-l),c=(e-n)*(l-r)-(s-n)*(t-r),p=a<0||d<0||c<0,u=a>0||d>0||c>0;return!(p&&u)}function pf(){let e=window.innerWidth-16,t=e-326,n=window.innerHeight-80;return{left:t,right:e,y:n}}var ff=[{type:"text",icon:cf,label:"Text",shortcut:"T"}],ja={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
9
|
|
|
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:`
|
|
10
|
+
Your AI gets the visual and technical context it needs to act.`,usage:[],keys:[{key:"\u2318\u2318",desc:"Toggle toolbar"}]}},gf={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)"},hs="devtools-toolbar-expanded",ys="devtools-annotations",bs="devtools-style-modifications",xs="devtools-active-tool",Ga="devtools-active-color",Va="devtools-stroke-width",Ua="devtools-inspected-element",vs="devtools-spacing-changes",mf={expanded:hs,annotations:ys,styleMods:bs,spacingChanges:vs,tool:xs,color:Ga,stroke:Va,inspected:Ua};function Ja({state:e,dispatch:t,onScreenshot:n,onSendToClaude:r,hasActiveJobs:o,activeJobColor:i,onCrosshairHover:s,onClear:l,provider:a="claude",onProviderChange:d,availableProviders:c,modelIndex:p=0,modelCount:u=2,modelLabel:g="Opus 4.6",onModelChange:E,onViewThread:w,isThreadPanelOpen:I,mcpStatus:A,onInstallMcp:U,mcpJustInstalled:B,bridgeUrl:y,isBridgeConnected:v,modelSelectedComponent:O,modelCanvasHoveredComponent:Z,onModelComponentHover:N,onSpacingTokenHover:R,onModifySpacingToken:$,onDeleteSpacingToken:C,modelRefreshKey:L,onModelComponentAdded:X,onModelComponentRemoved:ge,onMouseEnter:ve,toolbarRef:ye}){let[ae,ze]=br(()=>typeof window=="undefined"?!1:localStorage.getItem(hs)==="true"),[Me,ne]=br(0),He=Rt(0),Ne=Rt(0),Ve=Rt(e.isAnnotating),$e=Rt(!1),Ie=Rt(typeof window!="undefined"?localStorage.getItem(xs):null),st=Rt(typeof window!="undefined"?localStorage.getItem(Ga):null),ct=Rt(typeof window!="undefined"?localStorage.getItem(Va):null),[_,xe]=br(null),ce=Rt(!1),Se=Rt(null),Be=Rt(null),De=Rt(null),z=Rt({x:0,y:0}),re=Rt(null),se=Rt(null),be=Rt(null),pe=Tn(()=>{re.current=null,se.current=null,be.current&&(clearTimeout(be.current),be.current=null)},[]),ke=Tn(D=>{Be.current&&(clearTimeout(Be.current),Be.current=null),ce.current?(re.current=D,se.current=f({},z.current),be.current&&clearTimeout(be.current),be.current=setTimeout(()=>{re.current&&(xe(re.current),pe())},300)):(Se.current&&clearTimeout(Se.current),Se.current=setTimeout(()=>{ce.current=!0,xe(D),Se.current=null},500))},[pe]),oe=Tn(()=>{pe(),Se.current&&(clearTimeout(Se.current),Se.current=null),Be.current=setTimeout(()=>{ce.current=!1,xe(null)},150)},[pe]);bn(()=>{let D=De.current;if(!D)return;let K=()=>{pe(),Be.current&&(clearTimeout(Be.current),Be.current=null)},te=()=>{Be.current=setTimeout(()=>{ce.current=!1,xe(null)},150)};return D.addEventListener("mouseenter",K),D.addEventListener("mouseleave",te),()=>{D.removeEventListener("mouseenter",K),D.removeEventListener("mouseleave",te)}},[_,pe]);let We=Tn(D=>{if(z.current={x:D.clientX,y:D.clientY},re.current&&se.current){let K=se.current,te=pf();uf(D.clientX,D.clientY,K.x,K.y,te.left,te.y,te.right,te.y)||(xe(re.current),pe())}},[pe]),Xe=yr(()=>{let D=(c!=null?c:[]).map(K=>K==="claude"?"Claude":K==="codex"?"Codex":K);return{name:"AI Model",desc:D.length>1?`${D.join(" and ")} are available.`:D.length===1?`Connected to ${D[0]}.`:"No AI providers detected.",usage:D.length>1?["Click the logo to switch between providers","Click the model name to switch tiers"]:["Click the model name to switch tiers"],keys:D.length>1?[{key:"Click",desc:"Switch"},{key:"\u2318 Enter",desc:"Hand off to your AI",accent:!0}]:[{key:"\u2318 Enter",desc:"Hand off to your AI",accent:!0}]}},[c]);ka(ae,e,$e,!!o,mf),bn(()=>{let D=new URLSearchParams(window.location.search);if(!D.has("popmelt"))return;let K=document.createElement("style");K.textContent="nextjs-portal, vite-error-overlay { display: none !important; }",document.head.appendChild(K);let te=parseInt(D.get("popmelt")||"0",10)||0,Re=()=>{ze(!0),t({type:"SET_TOOL",payload:"inspector"}),t({type:"SET_ANNOTATING",payload:!0})};if(te>0){let he=setTimeout(Re,te);return()=>clearTimeout(he)}Re()},[]),bn(()=>{var K;if(localStorage.getItem(hs)==="true"&&!e.isAnnotating){if(ae||ze(!0),t({type:"SET_TOOL",payload:Ie.current||"inspector"}),t({type:"SET_ANNOTATING",payload:!0}),st.current&&t({type:"SET_COLOR",payload:st.current}),ct.current){let Le=parseFloat(ct.current);isNaN(Le)||t({type:"SET_STROKE_WIDTH",payload:Le})}let te=localStorage.getItem(ys);if(te)try{let Le=JSON.parse(te);if(Array.isArray(Le)&&Le.length>0){for(let S of Le)(S.status==="waiting_input"||S.status==="in_flight")&&(S.status=S.threadId?"resolved":"pending");t({type:"RESTORE_ANNOTATIONS",payload:{annotations:Le}})}}catch(Le){}let Re=localStorage.getItem(bs);if(Re)try{let Le=JSON.parse(Re);Array.isArray(Le)&&Le.length>0&&(t({type:"RESTORE_STYLE_MODIFICATIONS",payload:Le}),Hr(Le))}catch(Le){}let he=localStorage.getItem(vs);if(he)try{let Le=JSON.parse(he);Array.isArray(Le)&&Le.length>0&&t({type:"RESTORE_SPACING_TOKEN_CHANGES",payload:Le})}catch(Le){}let Ue=localStorage.getItem(Ua);if(Ue)try{let{selector:Le,info:S}=JSON.parse(Ue);if(Le){let j=pn(Le);if(j){let ee=S||b(f({},yn(j)),{selector:Le});t({type:"SELECT_ELEMENT",payload:{el:j,info:ee}})}}}catch(Le){}let Je=sessionStorage.getItem("popmelt-pending-focus");if(Je){sessionStorage.removeItem("popmelt-pending-focus");try{let{annotationId:Le}=JSON.parse(Je);if(Le){let S=te?(K=JSON.parse(te))!=null?K:[]:[];requestAnimationFrame(()=>{t({type:"SELECT_ANNOTATION",payload:{id:Le}});let j=S.find(ee=>ee.id===Le);if(j){let de=(j.groupId?S.filter(we=>we.groupId===j.groupId):[j]).flatMap(we=>we.points);if(de.length>0){let we=Math.min(...de.map(et=>et.x)),le=Math.max(...de.map(et=>et.x)),ot=Math.min(...de.map(et=>et.y)),Pe=Math.max(...de.map(et=>et.y));window.scrollTo({left:(we+le)/2-window.innerWidth/2,top:(ot+Pe)/2-window.innerHeight/2,behavior:"smooth"})}}})}}catch(Le){}}}return $e.current=!0,()=>{$e.current=!1}},[]);let At=Rt(e.styleModifications);bn(()=>{let D=At.current,K=e.styleModifications;D!==K&&(Fr(D),Hr(K),At.current=K)},[e.styleModifications]),bn(()=>{let D=Ve.current;Ve.current=e.isAnnotating,D&&!e.isAnnotating&&ae&&ze(!1)},[e.isAnnotating,ae]);let Gt=Rt(ae);Gt.current=ae,bn(()=>{let D=te=>{if(te.key==="Meta"||te.key==="Control"){let Re=Date.now();if(Re-He.current<300){if(Ne.current++,Ne.current>=2){if(Gt.current)t({type:"SET_ANNOTATING",payload:!1}),ze(!1);else{let Je=localStorage.getItem(xs);t({type:"SET_TOOL",payload:Je||"inspector"}),t({type:"SET_ANNOTATING",payload:!0}),ze(!0)}Ne.current=0}}else Ne.current=1;He.current=Re}else Ne.current=0},K=te=>{te.key!=="Meta"&&te.key!=="Control"&&(Ne.current=0)};return window.addEventListener("keydown",D),window.addEventListener("keyup",K),()=>{window.removeEventListener("keydown",D),window.removeEventListener("keyup",K)}},[t]);let it=Tn(D=>{pe(),t({type:"SET_TOOL",payload:D}),e.isAnnotating||t({type:"SET_ANNOTATING",payload:!0}),ce.current=!1,xe(null),Se.current&&(clearTimeout(Se.current),Se.current=null),Be.current&&(clearTimeout(Be.current),Be.current=null)},[t,e.isAnnotating,pe]),Vt=Tn(async()=>{window.focus(),await n()},[n]),Kt=Tn(async()=>{r&&await r()},[r]),St=Tn(()=>{t({type:"SET_ANNOTATING",payload:!1}),ze(!1)},[t]),Ot=Tn(()=>{Fr(e.styleModifications),document.querySelectorAll("[data-pm]").forEach(D=>D.removeAttribute("data-pm")),t({type:"CLEAR"}),t({type:"CLEAR_ALL_STYLES"}),localStorage.removeItem(ys),localStorage.removeItem(bs),localStorage.removeItem(vs),Nt(null),l==null||l()},[t,e.styleModifications,l]),[bt,Et]=br(()=>{if(st.current){let D=st.current.match(/oklch\([^)]*\s+([\d.]+)\s*\)/);if(D!=null&&D[1])return parseFloat(D[1])}return 29}),rn=Rt(null),zt=Rt(null),Mn=Rt(!1),lt=Tn(D=>{let K=D.match(/oklch\([^)]*\s+([\d.]+)\s*\)/);return K&&K[1]?parseFloat(K[1]):null},[]);bn(()=>{Mn.current=!0;let D=`oklch(0.628 0.258 ${bt})`;t({type:"SET_COLOR",payload:D}),requestAnimationFrame(()=>{Mn.current=!1})},[bt,t]),bn(()=>{if(Mn.current)return;let D=lt(e.activeColor);D!==null&&Math.abs(D-bt)>.5&&Et(D)},[e.activeColor,lt,bt]);let Q=e.annotations.length>0;bn(()=>{let D=zt.current;if(!D||!Q)return;let K=te=>{te.preventDefault(),te.stopPropagation();let Re=te.deltaY>0?-1:1,he=((bt+Re)%360+360)%360,Ue=`oklch(0.628 0.258 ${he})`;Et(he),e.selectedAnnotationIds.length>0&&t({type:"UPDATE_ANNOTATION_COLOR",payload:{id:e.lastSelectedId||e.selectedAnnotationIds[0],color:Ue}})};return D.addEventListener("wheel",K,{passive:!1}),()=>D.removeEventListener("wheel",K)},[Q,e.selectedAnnotationIds,e.lastSelectedId,bt,t]);let Fe=Rt(!1),tt=Tn(()=>{Fe.current=!1,rn.current=setTimeout(()=>{Fe.current=!0,Et(29)},500)},[]),In=Tn(()=>{rn.current&&(clearTimeout(rn.current),rn.current=null)},[]);bn(()=>()=>{rn.current&&clearTimeout(rn.current),be.current&&clearTimeout(be.current)},[]);let $t=Do(),fn=yr(()=>e.annotations.filter(D=>!D.pathname||D.pathname===$t),[e.annotations,$t]),dn=yr(()=>Wr(e.annotations),[e.annotations]),gt=yr(()=>{let D=[],K=new Set,te=[...e.annotations].sort((Re,he)=>Re.timestamp-he.timestamp);for(let Re of te)if(!dn.has(Re))if(Re.groupId){if(!K.has(Re.groupId)){K.add(Re.groupId);let he=e.annotations.filter(Le=>Le.groupId===Re.groupId&&!dn.has(Le)),Ue=he.find(Le=>Le.type!=="text")||he[0],Je=Math.min(...he.map(Le=>Le.timestamp));D.push({id:Ue.id,pathname:Re.pathname,annotations:he,timestamp:Je})}}else D.push({id:Re.id,pathname:Re.pathname,annotations:[Re],timestamp:Re.timestamp});return D},[e.annotations,dn]),sn=yr(()=>gt.filter(D=>!D.pathname||D.pathname===$t),[gt,$t]),[Pt,Nt]=br(null),qt=gt.length+e.styleModifications.length;bn(()=>{(qt===0||Pt!==null&&Pt>=qt)&&Nt(null)},[qt,Pt]),bn(()=>{if(e.selectedAnnotationIds.length===0&&!e.inspectedElement){Nt(null);return}if(e.selectedAnnotationIds.length>0){let D=e.selectedAnnotationIds[0],K=gt.findIndex(te=>te.id===D||te.annotations.some(Re=>Re.id===D));K>=0&&K!==Pt&&Nt(K)}},[e.selectedAnnotationIds,e.inspectedElement,gt]);let xt=Tn(()=>{var K;if(qt===0)return;let D;if(Pt===null?D=0:Pt+1>=qt?D=null:D=Pt+1,Nt(D),D===null){t({type:"SELECT_ANNOTATION",payload:{id:null}}),t({type:"SELECT_ELEMENT",payload:null});return}if(D<gt.length){let te=gt[D];if(!(!te.pathname||te.pathname===$t)){sessionStorage.setItem("popmelt-pending-focus",JSON.stringify({annotationId:te.id,pathname:te.pathname})),window.location.href=te.pathname;return}t({type:"SELECT_ELEMENT",payload:null}),t({type:"SELECT_ANNOTATION",payload:{id:te.id}});let he=te.annotations.find(le=>le.type!=="text")||te.annotations[0];if(te.annotations.some(le=>le.linkedSelector))t({type:"SET_TOOL",payload:"inspector"});else if(he!=null&&he.type&&he.type!=="text"&&he.type!=="inspector"){t({type:"SET_TOOL",payload:he.type});let le=Mo.findIndex(ot=>ot.type===he.type);le>=0&&ne(le)}if(he!=null&&he.color){t({type:"SET_COLOR",payload:he.color});let le=lt(he.color);le!==null&&Et(le)}let Je=te.annotations.flatMap(le=>le.points);if(Je.length===0)return;let Le=Math.min(...Je.map(le=>le.x)),S=Math.max(...Je.map(le=>le.x)),j=Math.min(...Je.map(le=>le.y)),ee=Math.max(...Je.map(le=>le.y)),de=(Le+S)/2,we=(j+ee)/2;if(window.scrollTo({left:de-window.innerWidth/2,top:we-window.innerHeight/2,behavior:"smooth"}),I&&w){let le=(K=te.annotations.find(ot=>ot.threadId))==null?void 0:K.threadId;le&&w(le)}}else{let te=D-gt.length,Re=e.styleModifications[te];if(!Re)return;let he=pn(Re.selector);if(!he)return;t({type:"SELECT_ANNOTATION",payload:{id:null}}),t({type:"SET_TOOL",payload:"inspector"}),t({type:"SELECT_ELEMENT",payload:{el:he,info:Re.element}});let Ue=he.getBoundingClientRect(),Je=Ue.left+Ue.width/2+window.scrollX,Le=Ue.top+Ue.height/2+window.scrollY;window.scrollTo({left:Je-window.innerWidth/2,top:Le-window.innerHeight/2,behavior:"smooth"})}},[gt,$t,e.styleModifications,qt,Pt,t,lt,I,w]);bn(()=>{if(!ae)return;let D=K=>{var Ue;let te=document.activeElement;for(;(Ue=te==null?void 0:te.shadowRoot)!=null&&Ue.activeElement;)te=te.shadowRoot.activeElement;if((te==null?void 0:te.tagName)==="INPUT"||(te==null?void 0:te.tagName)==="TEXTAREA"||te!=null&&te.isContentEditable)return;if((K.metaKey||K.ctrlKey)&&K.key==="Enter"){r&&(e.annotations.length>0||e.styleModifications.length>0||e.spacingTokenChanges.filter(Je=>!Je.captured).length>0)&&(K.preventDefault(),Kt());return}if((K.metaKey||K.ctrlKey)&&(K.key==="c"||K.key==="C"||K.code==="KeyC")){(e.annotations.length>0||e.styleModifications.length>0)&&(K.preventDefault(),window.focus(),Vt());return}if((K.metaKey||K.ctrlKey)&&(K.key==="Backspace"||K.key==="Delete")){K.preventDefault(),Ot();return}if(K.metaKey||K.ctrlKey||K.altKey)return;let Re={p:"freehand",l:"line",r:"rectangle",o:"circle",t:"text",c:"inspector",h:"hand"};if(K.key.toLowerCase()==="m"){K.preventDefault(),it("model");return}let he=Re[K.key.toLowerCase()];if(he){K.preventDefault();let Je=Mo.findIndex(Le=>Le.type===he);Je>=0&&ne(Je),it(he)}};return window.addEventListener("keydown",D),()=>window.removeEventListener("keydown",D)},[ae,it,Vt,Kt,r,Ot,e.annotations.length,e.styleModifications.length,e.spacingTokenChanges,_]);let Qn=b(f({},gf),{borderRadius:0,padding:ae?"0 8px":"0",width:ae?"auto":48,height:48,gap:0,justifyContent:ae?"flex-start":"center"}),Dt=`<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>`,jn=Ce("div",{style:f({position:"absolute",inset:-3,padding:5,backgroundImage:`url("data:image/svg+xml,${encodeURIComponent(Dt)}")`,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"})}),gn=v===!1?"rgba(239, 68, 68, 0.4)":o&&i?i:Kn.iconActive,mn=Rt(null);bn(()=>{if(!ae)return;let D=mn.current;if(!D)return;let K=()=>{s==null||s(!0),ke("collapse")},te=()=>{s==null||s(!1),oe()};return D.addEventListener("mouseenter",K),D.addEventListener("mouseleave",te),()=>{D.removeEventListener("mouseenter",K),D.removeEventListener("mouseleave",te)}},[ae,o,s,ke,oe]);let ut=Rt(null);return bn(()=>{if(ae)return;let D=ut.current;if(!D)return;let K=D.querySelector("[data-popmelt-logo]"),te=()=>{D.style.opacity="1",!o&&K&&(K.style.fill="#000"),ve==null||ve()},Re=()=>{D.style.opacity=o?"1":"0.5",!o&&K&&(K.style.fill="none")};return D.addEventListener("mouseenter",te),D.addEventListener("mouseleave",Re),()=>{D.removeEventListener("mouseenter",te),D.removeEventListener("mouseleave",Re)}},[ae,o,ve]),ae?Mt(xr,{children:[Ce("style",{children:`
|
|
15
11
|
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
|
|
16
12
|
@keyframes popmelt-border-march { to { background-position: 0 -5px; } }
|
|
17
|
-
`}),
|
|
13
|
+
`}),Ce("div",{id:"devtools-scrim",style:{position:"fixed",inset:0,backgroundColor:"rgba(0, 0, 0, 0.06)",zIndex:9997,pointerEvents:"none"}}),!I&&(_==="model"||e.activeTool==="model")&&Ce($a,{bridgeUrl:y,selectedComponent:O,hoveredComponent:Z,onComponentHover:N,onSpacingTokenHover:R,onModifySpacingToken:$,onDeleteSpacingToken:C,modelRefreshKey:L,onComponentAdded:X,onComponentRemoved:ge,onMouseEnter:()=>{pe(),Be.current&&(clearTimeout(Be.current),Be.current=null)},onMouseLeave:e.activeTool==="model"?void 0:oe}),_&&_!=="model"&&(_==="provider"||ja[_])&&(()=>{let D=_==="provider"?Xe:ja[_];return Mt("div",{ref:De,style:f(b(f({position:"fixed",bottom:80,right:16,width:300,backgroundColor:"#eaeaea"},io),{boxSizing:"content-box",zIndex:10001,fontFamily:"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",fontSize:12,color:"#1f2937",padding:12}),_!=="collapse"&&_!=="counter"?{pointerEvents:"none"}:{}),children:[_==="collapse"&&Ce("div",{style:{marginBottom:10},children:Ce("svg",{width:"48",height:"48",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:Ce("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"})})}),Mt("div",{style:{display:"flex",alignItems:"center",gap:6,fontWeight:700,fontSize:13,marginBottom:6},children:[Ce("span",{children:D.name}),D.keys[0]&&Ce("code",{style:{fontSize:10,fontWeight:500,backgroundColor:"rgba(0,0,0,0.06)",padding:"1px 4px",color:"#6b7280"},children:D.keys[0].key})]}),Ce("div",{style:{color:"#6b7280",lineHeight:1.5,marginBottom:_==="collapse"?0:10},children:D.desc.split(`
|
|
18
14
|
|
|
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); } }
|
|
15
|
+
`).map((K,te)=>Ce("p",{style:{margin:0,marginTop:te>0?8:0},children:K},te))}),D.usage.map((K,te)=>Mt("div",{style:{display:"flex",gap:6,marginBottom:3,lineHeight:1.4},children:[Ce("span",{style:{color:"#9ca3af",flexShrink:0},children:"\u2013"}),Ce("span",{children:K})]},te)),_==="collapse"&&A&&Object.keys(A).length>0&&(()=>{let K=Object.entries(A).filter(([,he])=>he.found&&!he.disabled).map(([he])=>he.charAt(0).toUpperCase()+he.slice(1)),te=Object.entries(A).filter(([,he])=>!he.found).map(([he])=>he);if(K.length===0&&te.length===0)return null;let Re=te.map(he=>he.charAt(0).toUpperCase()+he.slice(1));return Mt("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",marginTop:10,paddingTop:8,display:"flex",alignItems:"center",gap:6,fontSize:11},children:[Ce("span",{style:{width:6,height:6,borderRadius:"50%",backgroundColor:K.length>0?"#22c55e":"rgba(0,0,0,0.2)",flexShrink:0}}),K.length>0?Mt("span",{style:{color:"#6b7280",display:"flex",alignItems:"center",gap:6},children:[Mt("span",{children:["Registry available in ",K.join(", "),B&&" \u2014 restart CLI to activate"]}),te.length>0&&U&&!B&&Mt("button",{type:"button",onClick:he=>{he.stopPropagation(),U()},style:{border:"none",background:"transparent",color:"#3b82f6",fontSize:10,fontWeight:500,fontFamily:"inherit",padding:0,cursor:"pointer",pointerEvents:"auto",textDecoration:"underline",textUnderlineOffset:2},children:["+ ",Re.join(", ")]})]}):te.length>0&&U?Mt("span",{style:{color:"#6b7280",display:"flex",alignItems:"center",gap:6},children:[Ce("span",{children:"Connect Popmelt MCP"}),Ce("button",{type:"button",onClick:he=>{he.stopPropagation(),U()},style:{border:"none",background:"#1f2937",color:"#fff",fontSize:10,fontWeight:600,fontFamily:"inherit",padding:"2px 8px",cursor:"pointer",pointerEvents:"auto"},children:"Connect"})]}):null]})})(),D.keys.length>1&&Ce("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",marginTop:8,paddingTop:8,display:"flex",flexDirection:"column",gap:4},children:D.keys.slice(1).map((K,te)=>Mt("div",{style:{display:"flex",alignItems:"center",gap:8,fontSize:11,color:K.accent?"#fff":"#6b7280"},children:[Ce("code",{style:{fontSize:10,backgroundColor:K.accent?e.activeColor:"rgba(0,0,0,0.06)",color:K.accent?"#fff":void 0,padding:"1px 4px",whiteSpace:"nowrap"},children:K.key}),Ce("span",{style:{color:K.accent?e.activeColor:void 0,fontWeight:K.accent?600:void 0},children:K.desc})]},te))}),_==="counter"&>.length>0&&(()=>{let K=new Map;for(let he of gt){let Ue=he.pathname||$t;K.has(Ue)||K.set(Ue,[]),K.get(Ue).push(he)}let te=[...K.entries()],Re=te.length>1;return Ce("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",marginTop:8,paddingTop:8,maxHeight:200,overflowY:"auto",scrollbarWidth:"thin"},children:te.map(([he,Ue])=>Ce("div",{style:{marginBottom:Re?4:0},children:Ue.map(Je=>{var le,ot,Pe,et;let Le=Je.annotations.find(pt=>pt.type==="text"&&pt.text),S=(Le==null?void 0:Le.text)||`[${(ot=(le=Je.annotations[0])==null?void 0:le.type)!=null?ot:"annotation"}]`,j=e.selectedAnnotationIds.includes(Je.id),ee=gt.indexOf(Je),de=ee+1,we=(et=(Pe=Je.annotations[0])==null?void 0:Pe.color)!=null?et:e.activeColor;return Mt("div",{onClick:()=>{if(!(!Je.pathname||Je.pathname===$t)){sessionStorage.setItem("popmelt-pending-focus",JSON.stringify({annotationId:Je.id,pathname:Je.pathname})),window.location.href=Je.pathname;return}Nt(ee),t({type:"SELECT_ELEMENT",payload:null}),t({type:"SELECT_ANNOTATION",payload:{id:Je.id}}),ce.current=!1,xe(null)},style:{display:"flex",alignItems:"baseline",gap:4,padding:"2px 0",cursor:"pointer"},onMouseEnter:pt=>{let mt=pt.currentTarget.querySelector("[data-route-badge]");mt&&(mt.style.backgroundColor=we,mt.style.color="#fff")},onMouseLeave:pt=>{if(j)return;let mt=pt.currentTarget.querySelector("[data-route-badge]");mt&&(mt.style.backgroundColor="rgba(0,0,0,0.06)",mt.style.color="#6b7280")},children:[Mt("code",{"data-route-badge":!0,style:{fontSize:10,color:j?"#fff":"#6b7280",backgroundColor:j?we:"rgba(0,0,0,0.06)",padding:"1px 4px",flexShrink:0,whiteSpace:"nowrap"},children:[de,". ",Re?he:""]}),Ce("span",{style:{fontSize:11,color:j?"#1f2937":"#6b7280",fontWeight:j?600:400,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",minWidth:0},children:S})]},Je.id)})},he))})})()]})})(),Mt("div",{ref:D=>{ye&&(ye.current=D)},id:"devtools-toolbar",style:Qn,onMouseEnter:ve,onMouseMove:We,children:[jn,Mt("div",{style:{display:"flex",flexDirection:"row",gap:4,alignItems:"center"},children:[Ce("span",{onMouseEnter:()=>ke("inspector"),onMouseLeave:oe,children:Ce(ao,{active:e.isAnnotating&&e.activeTool==="inspector",siblingActive:e.isAnnotating,onClick:()=>it("inspector"),children:Ce(of,{size:20,strokeWidth:1.5})})}),Ce("span",{onMouseEnter:()=>ke("hand"),onMouseLeave:oe,children:Ce(ao,{active:e.isAnnotating&&e.activeTool==="hand",siblingActive:e.isAnnotating,onClick:()=>it("hand"),children:Mt("div",{style:{position:"relative",display:"flex",alignItems:"center",justifyContent:"center"},children:[Ce(nf,{size:20,strokeWidth:1.5}),e.styleModifications.filter(D=>!D.captured).length>0&&Ce("div",{style:{position:"absolute",top:-7,right:-9,minWidth:14,height:14,borderRadius:0,backgroundColor:e.activeColor,color:"#fff",fontSize:9,fontWeight:700,display:"flex",alignItems:"center",justifyContent:"center",padding:"0 2px",lineHeight:1},children:e.styleModifications.filter(D=>!D.captured).length})]})})}),(()=>{let D=Mo[Me],K=D.icon,te=e.isAnnotating&&df.has(e.activeTool);return Ce("span",{onMouseEnter:()=>ke(D.type),onMouseLeave:oe,children:Mt("div",{style:{display:"flex",alignItems:"center",gap:0},children:[Ce(ao,{active:te,siblingActive:e.isAnnotating,onClick:()=>it(D.type),children:Ce(K,{size:20,strokeWidth:1.5})}),Ce("button",{type:"button",onClick:()=>{let Re=(Me+1)%Mo.length;ne(Re),it(Mo[Re].type)},title:"Cycle shape tool",style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",gap:2,width:12,height:32,border:"none",background:"none",cursor:"pointer",padding:"0 2px",opacity:e.isAnnotating&&!te?.5:1,transition:"opacity 150ms ease"},children:Mo.map((Re,he)=>Ce("div",{style:{width:3,height:3,borderRadius:"50%",backgroundColor:he===Me?Kn.iconDefault:"rgba(0,0,0,0.2)",transition:"background-color 150ms ease"}},he))})]})})})(),ff.map(({type:D,icon:K,label:te,shortcut:Re})=>Ce("span",{onMouseEnter:()=>ke(D),onMouseLeave:oe,children:Ce(ao,{active:e.isAnnotating&&e.activeTool===D,siblingActive:e.isAnnotating,onClick:()=>it(D),children:Ce(K,{size:20,strokeWidth:1.5})})},D)),Ce("span",{onMouseEnter:()=>ke("model"),onMouseLeave:oe,children:Ce(ao,{active:e.isAnnotating&&e.activeTool==="model",siblingActive:e.isAnnotating,onClick:()=>it("model"),children:Ce(tf,{size:17,strokeWidth:1.5})})})]}),Ce(Wa,{}),Mt("div",{style:{display:"flex",flexDirection:"row",gap:4,alignItems:"center"},children:[(gt.length>0||e.styleModifications.length>0||e.spacingTokenChanges.filter(D=>!D.captured).length>0)&&(()=>{var he;let D=Pt!==null&&Pt<gt.length?gt[Pt]:null,K=e.annotations.length>0&&e.annotations.every(Ue=>Ue.status&&Ue.status!=="pending"),te=Pt!==null?(he=D==null?void 0:D.annotations.some(Ue=>Ue.status&&Ue.status!=="pending"))!=null?he:!1:K,Re=`oklch(0.628 0.258 ${bt})`;return Ce("span",{onMouseEnter:()=>ke("counter"),onMouseLeave:oe,children:Ce("button",{ref:zt,type:"button",onClick:()=>{if(Fe.current){Fe.current=!1;return}xt()},onMouseDown:tt,onMouseUp:In,onMouseLeave:In,title:"Cycle through annotations \u2022 Scroll to change color \u2022 Long press to reset",style:{display:"flex",alignItems:"center",justifyContent:"center",minWidth:20,height:20,padding:"0 8px",marginRight:4,border:"none",borderRadius:0,background:te?"#999999":Re,cursor:"pointer",fontFamily:"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",fontSize:11,fontWeight:600,color:"#ffffff",transition:"background 150ms ease"},children:(()=>{let Ue=gt.length+e.styleModifications.length+e.spacingTokenChanges.filter(Le=>!Le.captured).length;if(Pt!==null)return Mt(xr,{children:[Pt+1,Ce("span",{style:{opacity:.4},children:` / ${Ue}`})]});let Je=sn.length+e.styleModifications.length+e.spacingTokenChanges.filter(Le=>!Le.captured).length;return Ue>Je?Mt(xr,{children:[Je,Ce("span",{style:{opacity:.4},children:` / ${Ue}`})]}):Ue})()})})})(),(e.annotations.length>0||e.styleModifications.length>0)&&Ce("span",{onMouseEnter:()=>ke("clear"),onMouseLeave:oe,children:Ce(ao,{siblingActive:e.isAnnotating,onClick:Ot,title:"Clear all (\u2318\u232B)",children:Ce(af,{size:17,strokeWidth:1.5})})}),d&&Mt(xr,{children:[Ce("div",{style:{width:1,height:20,backgroundColor:"rgba(0, 0, 0, 0.05)",margin:"0 2px"}}),Ce("span",{onMouseEnter:()=>ke("provider"),onMouseLeave:oe,style:{display:"contents"},children:Mt("div",{style:{display:"flex",alignItems:"center",gap:0},children:[Ce(ao,{onClick:()=>d(a==="claude"?"codex":"claude"),children:a==="claude"?Ce(ps,{}):Ce(fs,{})}),Mt("button",{type:"button",onClick:()=>{let D=(p+1)%u;E==null||E(D)},style:{display:"flex",alignItems:"center",gap:6,height:32,border:"none",background:"none",cursor:"pointer",padding:"0 4px 0 0",fontFamily:"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",fontSize:10,fontWeight:500,color:Kn.iconDefault,whiteSpace:"nowrap"},children:[Ce("span",{children:g}),Ce("span",{style:{display:"flex",flexDirection:"column",gap:2},children:Array.from({length:u},(D,K)=>Ce("div",{style:{width:3,height:3,borderRadius:"50%",backgroundColor:K===p?Kn.iconDefault:"rgba(0,0,0,0.2)",transition:"background-color 150ms ease"}},K))})]})]})})]}),Ce("div",{ref:mn,style:{display:"inline-flex",cursor:"pointer"},children:Ce("button",{type:"button",onClick:St,title:"Collapse (\u2318\u2318)",style:{display:"flex",alignItems:"center",justifyContent:"center",width:32,height:32,border:"none",background:"none",padding:0,cursor:"inherit"},children:Ce("svg",{"data-popmelt-logo":!0,width:"30",height:"30",viewBox:"0 0 40 40",fill:gn,stroke:"none",xmlns:"http://www.w3.org/2000/svg",children:Ce("path",{d:"M20.25 8.00293H20.249C21.5098 8.0286 22.7219 8.25094 23.8584 8.63672L23.8604 8.63574C23.8961 8.64787 23.9312 8.66145 23.9668 8.67383C24.0611 8.70686 24.1548 8.74106 24.248 8.77637C24.2915 8.79273 24.3357 8.80727 24.3789 8.82422L24.376 8.82617C27.6145 10.0955 30.1646 12.7301 31.3213 16.0234L31.3232 16.0225C31.3327 16.0493 31.3404 16.0766 31.3496 16.1035C31.7691 17.3256 32 18.6356 32 20C32 20.8726 31.9366 21.6706 31.7598 22.4902L31.7197 22.6328C31.6412 23.0066 31.5136 23.6108 31.3408 24.2217L31.3398 24.2246C31.2967 24.377 31.251 24.5299 31.2021 24.6797C30.9215 25.5403 30.5473 26.2998 30.0879 26.2998C29.7613 26.2996 29.5995 25.9674 29.4316 25.6221C29.2501 25.2487 29.0614 24.8605 28.6484 24.8604C27.8532 24.8604 27.2081 25.5046 27.208 26.2998V27.0771C27.2079 27.6079 26.9661 28.112 26.5205 28.4004C25.9146 28.7925 25.2357 28.6462 24.7959 28.2061L24.7949 28.208C24.7897 28.2028 24.7854 28.1967 24.7803 28.1914C24.7654 28.1761 24.7507 28.1606 24.7363 28.1445C24.7105 28.1156 24.6858 28.0857 24.6621 28.0547C24.6461 28.0339 24.6302 28.013 24.6152 27.9912C24.5931 27.9591 24.5726 27.9257 24.5527 27.8916C24.5392 27.8685 24.5261 27.8452 24.5137 27.8213C24.5093 27.8128 24.5043 27.8045 24.5 27.7959L24.501 27.7939C24.3932 27.5763 24.3282 27.3276 24.3281 27.0576V26.2998C24.328 25.5993 23.8278 25.0158 23.165 24.8867V24.8877C23.0752 24.8702 22.9826 24.8604 22.8877 24.8604C22.8446 24.8604 22.8019 24.8624 22.7598 24.8662C22.0247 24.9312 21.4483 25.5479 21.4482 26.2998C21.4482 26.9127 21.4608 27.5305 21.4736 28.1494L21.4951 29.3135C21.5 29.7013 21.5015 30.089 21.4971 30.4756C21.4874 31.3103 20.8426 32 20.0078 32C19.1732 31.9998 18.5292 31.3102 18.5195 30.4756C18.5159 30.1613 18.5176 29.8464 18.5205 29.5312V29.5322C18.5212 29.4593 18.5206 29.3864 18.5215 29.3135L18.5303 28.8154V28.8145C18.5343 28.5927 18.5384 28.371 18.543 28.1494C18.5558 27.5305 18.5684 28.1129 18.5684 27.5C18.5684 26.7047 17.9232 26.0596 17.1279 26.0596C16.907 26.0596 16.6978 26.1103 16.5107 26.1992C16.2161 26.3393 15.9767 26.5769 15.834 26.8701C15.8269 26.8846 15.8201 26.8993 15.8135 26.9141C15.7821 26.9845 15.7562 27.0579 15.7363 27.1338C15.7243 27.1798 15.7155 27.2267 15.708 27.2744C15.7012 27.3175 15.6953 27.361 15.6924 27.4053C15.6903 27.4366 15.6885 27.4681 15.6885 27.5V28.7383C15.6883 29.9234 14.4911 30.7248 13.4961 30.0811C13.0505 29.7926 12.8086 29.2886 12.8086 28.7578V26.2998C12.8086 25.9737 12.6984 25.674 12.5156 25.4326C12.4437 25.3381 12.3612 25.2521 12.2686 25.1777V25.1768C12.0219 24.9788 11.709 24.8604 11.3682 24.8604C10.9892 24.8604 10.8622 24.8872 10.7295 25.2295C10.5837 25.6055 10.4302 26 9.92773 26C9.33081 25.9996 8.95963 25.2403 8.71484 24.3799C8.5591 23.8325 8.45907 23.571 8.3623 23.0107C8.3501 22.9401 8.33284 22.8403 8.31738 22.7529C8.12812 21.9466 8.02043 21.1089 8.00293 20.249V20.25L8 20C8 19.8617 8.00317 19.724 8.00781 19.5869C8.00837 19.5703 8.00816 19.5537 8.00879 19.5371L8.00977 19.5352C8.0998 17.1716 8.87444 14.9844 10.1396 13.1631C10.1488 13.1499 10.1587 13.1372 10.168 13.124C12.255 10.1453 15.6582 8.15745 19.5352 8.00977L19.5371 8.00879C19.5537 8.00816 19.5703 8.00837 19.5869 8.00781C19.724 8.00317 19.8617 8 20 8L20.25 8.00293Z"})})})})]})]})]}):Mt(xr,{children:[Ce("style",{children:`
|
|
21
16
|
@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=`
|
|
17
|
+
`}),Mt("div",{ref:D=>{ut.current=D,ye&&(ye.current=D)},id:"devtools-toolbar",style:b(f({},Qn),{overflow:"visible",opacity:o?1:.5,transition:"opacity 150ms ease"}),children:[jn,Ce("button",{type:"button",style:{display:"flex",alignItems:"center",justifyContent:"center",width:48,height:48,border:"none",background:"none",cursor:"pointer",padding:0},onClick:()=>{ze(!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:Ce("svg",{"data-popmelt-logo":!0,width:"30",height:"30",viewBox:"0 0 40 40",fill:"none",stroke:gn,strokeWidth:"1",strokeLinejoin:"round",xmlns:"http://www.w3.org/2000/svg",children:Ce("path",{d:"M20.25 8.00293H20.249C21.5098 8.0286 22.7219 8.25094 23.8584 8.63672L23.8604 8.63574C23.8961 8.64787 23.9312 8.66145 23.9668 8.67383C24.0611 8.70686 24.1548 8.74106 24.248 8.77637C24.2915 8.79273 24.3357 8.80727 24.3789 8.82422L24.376 8.82617C27.6145 10.0955 30.1646 12.7301 31.3213 16.0234L31.3232 16.0225C31.3327 16.0493 31.3404 16.0766 31.3496 16.1035C31.7691 17.3256 32 18.6356 32 20C32 20.8726 31.9366 21.6706 31.7598 22.4902L31.7197 22.6328C31.6412 23.0066 31.5136 23.6108 31.3408 24.2217L31.3398 24.2246C31.2967 24.377 31.251 24.5299 31.2021 24.6797C30.9215 25.5403 30.5473 26.2998 30.0879 26.2998C29.7613 26.2996 29.5995 25.9674 29.4316 25.6221C29.2501 25.2487 29.0614 24.8605 28.6484 24.8604C27.8532 24.8604 27.2081 25.5046 27.208 26.2998V27.0771C27.2079 27.6079 26.9661 28.112 26.5205 28.4004C25.9146 28.7925 25.2357 28.6462 24.7959 28.2061L24.7949 28.208C24.7897 28.2028 24.7854 28.1967 24.7803 28.1914C24.7654 28.1761 24.7507 28.1606 24.7363 28.1445C24.7105 28.1156 24.6858 28.0857 24.6621 28.0547C24.6461 28.0339 24.6302 28.013 24.6152 27.9912C24.5931 27.9591 24.5726 27.9257 24.5527 27.8916C24.5392 27.8685 24.5261 27.8452 24.5137 27.8213C24.5093 27.8128 24.5043 27.8045 24.5 27.7959L24.501 27.7939C24.3932 27.5763 24.3282 27.3276 24.3281 27.0576V26.2998C24.328 25.5993 23.8278 25.0158 23.165 24.8867V24.8877C23.0752 24.8702 22.9826 24.8604 22.8877 24.8604C22.8446 24.8604 22.8019 24.8624 22.7598 24.8662C22.0247 24.9312 21.4483 25.5479 21.4482 26.2998C21.4482 26.9127 21.4608 27.5305 21.4736 28.1494L21.4951 29.3135C21.5 29.7013 21.5015 30.089 21.4971 30.4756C21.4874 31.3103 20.8426 32 20.0078 32C19.1732 31.9998 18.5292 31.3102 18.5195 30.4756C18.5159 30.1613 18.5176 29.8464 18.5205 29.5312V29.5322C18.5212 29.4593 18.5206 29.3864 18.5215 29.3135L18.5303 28.8154V28.8145C18.5343 28.5927 18.5384 28.371 18.543 28.1494C18.5558 27.5305 18.5684 28.1129 18.5684 27.5C18.5684 26.7047 17.9232 26.0596 17.1279 26.0596C16.907 26.0596 16.6978 26.1103 16.5107 26.1992C16.2161 26.3393 15.9767 26.5769 15.834 26.8701C15.8269 26.8846 15.8201 26.8993 15.8135 26.9141C15.7821 26.9845 15.7562 27.0579 15.7363 27.1338C15.7243 27.1798 15.7155 27.2267 15.708 27.2744C15.7012 27.3175 15.6953 27.361 15.6924 27.4053C15.6903 27.4366 15.6885 27.4681 15.6885 27.5V28.7383C15.6883 29.9234 14.4911 30.7248 13.4961 30.0811C13.0505 29.7926 12.8086 29.2886 12.8086 28.7578V26.2998C12.8086 25.9737 12.6984 25.674 12.5156 25.4326C12.4437 25.3381 12.3612 25.2521 12.2686 25.1777V25.1768C12.0219 24.9788 11.709 24.8604 11.3682 24.8604C10.9892 24.8604 10.8622 24.8872 10.7295 25.2295C10.5837 25.6055 10.4302 26 9.92773 26C9.33081 25.9996 8.95963 25.2403 8.71484 24.3799C8.5591 23.8325 8.45907 23.571 8.3623 23.0107C8.3501 22.9401 8.33284 22.8403 8.31738 22.7529C8.12812 21.9466 8.02043 21.1089 8.00293 20.249V20.25L8 20C8 19.8617 8.00317 19.724 8.00781 19.5869C8.00837 19.5703 8.00816 19.5537 8.00879 19.5371L8.00977 19.5352C8.0998 17.1716 8.87444 14.9844 10.1396 13.1631C10.1488 13.1499 10.1587 13.1372 10.168 13.124C12.255 10.1453 15.6582 8.15745 19.5352 8.00977L19.5371 8.00879C19.5537 8.00816 19.5703 8.00837 19.5869 8.00781C19.724 8.00317 19.8617 8 20 8L20.25 8.00293Z"})})})]})]})}import{useCallback as hf,useEffect as Yn,useRef as vr,useState as Ss}from"react";import{Fragment as Ka,jsx as It,jsxs as Sr}from"react/jsx-runtime";var yf={position:"fixed",bottom:86,right:16,zIndex:9999,display:"flex",flexDirection:"column",alignItems:"flex-end"},bf=24,xf=6,vf=bf-xf,Sf=8,Xa=b(f({display:"flex",alignItems:"center",gap:6,padding:"4px 10px",backgroundColor:"rgba(255, 255, 255, 0.85)"},io),{backdropFilter:"blur(32px)",fontFamily:"ui-monospace, SFMono-Regular, Menlo, monospace",fontSize:11,color:"#1f2937",whiteSpace:"nowrap",transition:"transform 200ms ease, opacity 200ms ease"});function wf(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 Cf(e){let t=e.replace(/^Error:\s*/i,"");return t.length>40?t.slice(0,37)+"...":t}function Ef(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 kf({color:e}){let[t,n]=Ss(0);return Yn(()=>{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?Sr(Ka,{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"})]}):Sr(Ka,{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 Tf({color:e}){return It("span",{style:{display:"inline-block",width:8,height:8,backgroundColor:e,opacity:.6}})}function Mf({color:e}){return It("span",{style:{color:e,fontSize:12,lineHeight:1,width:10,display:"inline-block"},children:"\u2713"})}function If(){return It("span",{style:{display:"inline-block",width:8,height:8,borderRadius:"50%",backgroundColor:"#ef4444"}})}function Rf({onCancel:e}){let t=vr(null);return Yn(()=>{let n=t.current;if(!n)return;let r=o=>{o.stopPropagation(),e()};return n.addEventListener("click",r),()=>n.removeEventListener("click",r)},[e]),It("button",{ref:t,style:{background:"none",border:"none",cursor:"pointer",color:"#9ca3af",fontSize:14,padding:"0 4px",lineHeight:1},title:"Cancel",children:"\xD7"})}function Lf({onDismiss:e}){let t=vr(null);return Yn(()=>{let n=t.current;if(!n)return;let r=o=>{o.stopPropagation(),e()};return n.addEventListener("click",r),()=>n.removeEventListener("click",r)},[e]),It("button",{ref:t,style:{background:"none",border:"none",cursor:"pointer",color:"#9ca3af",fontSize:14,padding:"0 4px",lineHeight:1},title:"Dismiss",children:"\xD7"})}function qa({bridge:e,inFlightJobs:t,isVisible:n,onHover:r,clearSignal:o,onViewThread:i,onCancel:s,onHoverJob:l,isConnected:a,dismissedThreadIds:d}){let[c,p]=Ss([]),[u,g]=Ss(!1);Yn(()=>{o>0&&p([])},[o]),Yn(()=>{!d||d.size===0||p(y=>{let v=y.filter(O=>!O.threadId||!d.has(O.threadId));return v.length===y.length?y:v})},[d]),Yn(()=>{p(y=>{var N;let v=new Set(y.map(R=>R.jobId)),O=!1,Z=y.map(R=>{let $=t[R.jobId];return $&&(!R.threadId||R.color==="#888")?(O=!0,b(f({},R),{threadId:R.threadId||$.threadId,color:R.color==="#888"?$.color:R.color})):R});for(let[R,$]of Object.entries(t))v.has(R)||(Z.push({jobId:R,color:$.color,status:"queued",threadId:$.threadId}),O=!0);for(let R of e.activeJobIds)if(!v.has(R)&&!Z.some($=>$.jobId===R)){let $=e.events.find(C=>C.type==="job_started"&&C.data.jobId===R);Z.push({jobId:R,color:"#888",status:"working",threadId:(N=$==null?void 0:$.data)==null?void 0:N.threadId}),O=!0}return O?Z:y})},[t,e.activeJobIds]),Yn(()=>{if(e.activeJobIds.length===0)return;let y=new Set(e.activeJobIds);p(v=>v.map(O=>y.has(O.jobId)&&O.status!=="done"&&O.status!=="error"?b(f({},O),{status:"working"}):O))},[e.activeJobIds]);let E=vr(null);Yn(()=>{let y=e.lastCompletedJobId;if(!y||y===E.current)return;E.current=y;let v=e.events.find(C=>C.type==="error"&&(C.data.jobId===y||e.status==="error")),O=!!v,Z=O?void 0:Ef(e.events,y),N=v?String(v.data.message||""):void 0,R=v?!!v.data.cancelled:void 0,$=v==null?void 0:v.data.threadId;p(C=>C.map(L=>L.jobId===y?b(f({},L),{status:O?"error":"done",doneLabel:Z,errorMessage:N,cancelled:R,threadId:L.threadId||$}):L))},[e.lastCompletedJobId,e.events,e.status]);let w=n&&(c.length>0||a===!1),I=vr(null);Yn(()=>{if(!w)return;let y=I.current;if(!y)return;let v=()=>{g(!0),r(!0)},O=()=>{g(!1),r(!1),l==null||l(null)};return y.addEventListener("mouseenter",v),y.addEventListener("mouseleave",O),()=>{y.removeEventListener("mouseenter",v),y.removeEventListener("mouseleave",O)}},[w,r,l]);let A=vr(new Map),U=hf((y,v)=>{v?A.current.set(y,v):A.current.delete(y)},[]);if(Yn(()=>{if(!w)return;let y=[];for(let v of c){let O=A.current.get(v.jobId);if(O){if(v.threadId&&i){let Z=v.threadId,N=()=>i(Z);O.addEventListener("click",N),y.push(()=>O.removeEventListener("click",N))}if(l){let Z=v.jobId,N=()=>l(Z),R=()=>l(null);O.addEventListener("mouseenter",N),O.addEventListener("mouseleave",R),y.push(()=>{O.removeEventListener("mouseenter",N),O.removeEventListener("mouseleave",R)})}}}return()=>y.forEach(v=>v())},[w,c,i,l]),!w)return null;let B=!u&&c.length>1;return Sr("div",{ref:I,style:yf,"data-devtools":!0,children:[[...c].reverse().map((y,v)=>{let O=v===c.length-1,Z=c.length-1-v,N=y.status==="working"?wf(e.events.filter(R=>R.data.jobId===y.jobId)):y.status==="queued"?"Queued":y.status==="done"?y.doneLabel||"Done":y.cancelled?"Cancelled":y.errorMessage?Cf(y.errorMessage):"Error";return It("div",{style:{position:"relative",zIndex:v,marginBottom:B?O?0:-vf:O?0:Sf,transform:B?`scale(${Math.max(.94,1-Z*.02)})`:"scale(1)",opacity:B?Math.max(.5,1-Z*.15):1,transformOrigin:"bottom right",transition:"margin-bottom 250ms ease, transform 250ms ease, opacity 250ms ease"},children:Sr("div",{ref:R=>U(y.jobId,R),style:b(f({},Xa),{cursor:y.threadId&&i?"pointer":void 0}),title:y.errorMessage||void 0,children:[y.status==="working"&&It(kf,{color:y.color}),y.status==="queued"&&It(Tf,{color:y.color}),y.status==="done"&&It(Mf,{color:y.color}),y.status==="error"&&It(If,{}),It("span",{style:{color:y.status==="queued"?"#9ca3af":"#1f2937",maxWidth:160,overflow:"hidden",textOverflow:"ellipsis"},children:N}),y.status==="working"&&s&&It(Rf,{onCancel:()=>s(y.jobId)}),(y.status==="done"||y.status==="error")&&It(Lf,{onDismiss:()=>p(R=>R.filter($=>$.jobId!==y.jobId))})]})},y.jobId)}),a===!1&&c.length>0&&Sr("div",{style:b(f({},Xa),{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 Bf,jsx as Pf,jsxs as Of}from"react/jsx-runtime";var Af=`
|
|
23
18
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
24
19
|
:host {
|
|
25
20
|
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
@@ -35,9 +30,9 @@ Your AI gets the visual and technical context it needs to act.`,usage:[],keys:[{
|
|
|
35
30
|
color: initial;
|
|
36
31
|
-webkit-font-smoothing: auto;
|
|
37
32
|
}
|
|
38
|
-
`;function
|
|
39
|
-
`),n=[],r=0;for(;r<t.length;){let i=t[r];if(i.trimStart().startsWith("```")){let
|
|
40
|
-
`)},n.length));continue}if(/^(-{3,}|\*{3,}|_{3,})\s*$/.test(i)){n.push(
|
|
33
|
+
`;function Za({children:e}){return Of(Bf,{children:[Pf("style",{children:Af}),e]})}import{useEffect as Nf,useLayoutEffect as Df,useRef as Hf,useState as Qa}from"react";import{createPortal as Ff}from"react-dom";import{Fragment as Wf,jsx as $f,jsxs as Yf}from"react/jsx-runtime";function _f(e){return e.tagName==="STYLE"||e.tagName==="LINK"&&e.rel==="stylesheet"}function zf(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&&_f(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 ec({children:e}){let t=Hf(null),[n,r]=Qa(null),[o,i]=Qa(null);return Df(()=>{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)},[]),Nf(()=>{if(n)return zf(n)},[n]),Yf(Wf,{children:[$f("div",{ref:t,"data-popmelt-shadow-host":!0,style:{position:"absolute",width:0,height:0,overflow:"visible",zIndex:1e4}}),o&&Ff(e,o)]})}import{useCallback as oi,useEffect as Zn,useRef as qn,useState as uo}from"react";import{Fragment as Jf,jsx as Lt}from"react/jsx-runtime";var tc="ui-monospace, SFMono-Regular, Menlo, monospace",jf=/^#[0-9a-fA-F]{3,8}$/,Gf=/^(?:rgba?|hsla?|oklch)\([^)]+\)$/,Vf=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 Uf(e){let t=e.trim();return jf.test(t)||Gf.test(t)||Vf.has(t.toLowerCase())}function ws(e,t){return Lt("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 wr(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);Uf(i)&&t.push(ws(i,`sw-${o.index}`)),t.push(Lt("code",{style:{fontFamily:tc,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(Lt("strong",{children:Lt("em",{children:o[3]})},o.index)):o[5]!==void 0?t.push(Lt("strong",{children:o[5]},o.index)):o[7]!==void 0?t.push(Lt("em",{children:o[7]},o.index)):o[9]!==void 0?t.push(Lt("em",{children:o[9]},o.index)):o[11]!==void 0&&o[12]!==void 0?t.push(Lt("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(ws(o[13],`sw-${o.index}`)),t.push(o[13])):o[14]!==void 0&&(t.push(ws(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 co(e){var o;let t=e.split(`
|
|
34
|
+
`),n=[],r=0;for(;r<t.length;){let i=t[r];if(i.trimStart().startsWith("```")){let d=[];for(r++;r<t.length&&!t[r].trimStart().startsWith("```");)d.push(t[r]),r++;r++,n.push(Lt("pre",{style:{fontFamily:tc,fontSize:"0.9em",lineHeight:1.4,backgroundColor:"rgba(0,0,0,0.04)",padding:"6px 8px",margin:"4px 0",overflowX:"auto",whiteSpace:"pre"},children:d.join(`
|
|
35
|
+
`)},n.length));continue}if(/^(-{3,}|\*{3,}|_{3,})\s*$/.test(i)){n.push(Lt("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 d=s[1].length,c={1:16,2:14,3:13,4:12};n.push(Lt("div",{style:{fontWeight:700,fontSize:(o=c[d])!=null?o:12,margin:"8px 0 2px"},children:wr(s[2])},n.length)),r++;continue}if(i.trimStart().startsWith("|")&&i.trimEnd().endsWith("|")){let d=[];for(;r<t.length&&t[r].trimStart().startsWith("|")&&t[r].trimEnd().endsWith("|");)d.push(t[r]),r++;let c=A=>/^\|[\s\-:|]+\|$/.test(A),p=d.filter(A=>!c(A)),u=A=>A.split("|").slice(1,-1).map(U=>U.trim()),g=A=>/^\*\*.+\*\*$/.test(A)||/^__.+__$/.test(A),E=p.map(u),w=E.length>1&&E.slice(1).every(A=>A[0]&&g(A[0])),I=E.length>0&&E[0].every(A=>g(A));n.push(Lt("div",{style:{overflowX:"auto",margin:"4px 0",paddingBottom:4},children:Lt("table",{style:{borderCollapse:"separate",borderSpacing:0,fontSize:"0.95em",width:"max-content",minWidth:"100%"},children:Lt("tbody",{children:p.map((A,U)=>Lt("tr",{children:u(A).map((B,y)=>Lt(U===0?"th":"td",{style:f({border:"1px solid rgba(0,0,0,0.1)",padding:"3px 6px",textAlign:"left",fontWeight:U===0?600:400,minWidth:60,whiteSpace:"nowrap"},y===0&&w||U===0&&I?b(f(f({position:"sticky"},y===0&&w?{left:0}:{}),U===0&&I?{top:0}:{}),{background:"#fff",zIndex:y===0&&w&&U===0&&I?2:1}):{}),children:wr(B)},y))},U))})})},n.length));continue}if(i.match(/^(\s*)([-*])\s+(.+)/)){let d=[];for(;r<t.length&&/^\s*[-*]\s+/.test(t[r]);){let c=t[r].match(/^\s*[-*]\s+(.+)/);c&&d.push(Lt("li",{children:wr(c[1])},d.length)),r++}n.push(Lt("ul",{style:{margin:"2px 0",paddingLeft:20},children:d},n.length));continue}if(i.match(/^(\s*)\d+\.\s+(.+)/)){let d=[];for(;r<t.length&&/^\s*\d+\.\s+/.test(t[r]);){let c=t[r].match(/^\s*\d+\.\s+(.+)/);c&&d.push(Lt("li",{children:wr(c[1])},d.length)),r++}n.push(Lt("ol",{style:{margin:"2px 0",paddingLeft:20},children:d},n.length));continue}if(i.trim()===""){n.push(Lt("div",{style:{height:4}},n.length)),r++;continue}n.push(Lt("div",{style:{margin:"2px 0"},children:wr(i)},n.length)),r++}return Lt(Jf,{children:n})}import{Fragment as ai,jsx as Ee,jsxs as vt}from"react/jsx-runtime";var ic=400,_n=16,sc=3,Xf=3,lc=4,Kf=8,Cs="devtools-thread-panel-position",si=ic+2*sc+2*lc,qf=si+2*Xf;function ri(){return{top:_n,left:window.innerWidth-si-_n}}function nc(e,t,n){let r=n==null?void 0:n.getBoundingClientRect(),o=2*sc+2*lc,i=window.innerHeight-_n-o;return r&&t+qf>r.left&&(i=r.top-Kf-o),Math.max(200,i-Math.max(0,e))}var Zf={width:ic,backgroundColor:"#eaeaea",borderWidth:3,borderStyle:"solid",borderColor:"transparent",boxSizing:"content-box",display:"flex",flexDirection:"column",overflow:"visible",padding:4,fontFamily:Jt,fontSize:12,color:"#1f2937",pointerEvents:"auto"},Qf={display:"flex",alignItems:"center",justifyContent:"space-between",padding:"4px 5px 4px 10px",margin:0,fontWeight:600,fontSize:12,overflow:"hidden"},eg={flex:1,overflowY:"auto",padding:"8px 0",scrollbarWidth:"none"},tg=`
|
|
41
36
|
[data-devtools="thread-panel-messages"]:hover {
|
|
42
37
|
scrollbar-width: thin !important;
|
|
43
38
|
}
|
|
@@ -51,5 +46,8 @@ Your AI gets the visual and technical context it needs to act.`,usage:[],keys:[{
|
|
|
51
46
|
background: rgba(0,0,0,0.15);
|
|
52
47
|
border-radius: 3px;
|
|
53
48
|
}
|
|
54
|
-
`,
|
|
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};
|
|
49
|
+
`,ng={borderTop:"1px solid rgba(0, 0, 0, 0.12)",display:"flex",alignItems:"center",gap:4,padding:"0 8px 0 10px"};function oc(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 rc(e){return new Date(e).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"})}var Es=["reviewing","considering","thinking","zhuzhing","iterating","tweaking","reflecting","noodling","pondering","finessing","polishing","riffing"],og=3e3,rg=250;function ig({color:e}){let[t,n]=uo(0),[r,o]=uo(()=>Math.floor(Math.random()*Es.length));return Zn(()=>{let i=setInterval(()=>n(l=>(l+1)%2),rg),s=setInterval(()=>o(l=>(l+1)%Es.length),og);return()=>{clearInterval(i),clearInterval(s)}},[]),vt("span",{style:{display:"inline-flex",alignItems:"center",gap:4},children:[Ee("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:e,style:{verticalAlign:"middle",flexShrink:0},children:t===1?vt(ai,{children:[Ee("circle",{cx:"7",cy:"7",r:"2"}),Ee("circle",{cx:"17",cy:"7",r:"2"}),Ee("circle",{cx:"7",cy:"17",r:"2"}),Ee("circle",{cx:"17",cy:"17",r:"2"})]}):vt(ai,{children:[Ee("circle",{cx:"12",cy:"6",r:"2"}),Ee("circle",{cx:"6",cy:"12",r:"2"}),Ee("circle",{cx:"18",cy:"12",r:"2"}),Ee("circle",{cx:"12",cy:"18",r:"2"})]})}),Ee("span",{style:{fontSize:11,color:"#9ca3af",fontStyle:"italic"},children:Es[r]})]})}var li=32,ii={width:li,height:li,objectFit:"cover",cursor:"pointer",border:"1px solid rgba(0,0,0,0.1)"};function sg(e){let t=/^`(\/[^`]*)`$/gm,n=[...e.matchAll(t)];if(n.length===0)return null;let r=[];for(let o=0;o<n.length;o++){let i=n[o],s=i[1],l=i.index+i[0].length,a=o+1<n.length?n[o+1].index:e.length,d=e.slice(l,a).trim();r.push({route:s,text:d})}return r}function lg(e,t){let n=[];if(e.replyImageUrls)for(let r of e.replyImageUrls){let o=r.startsWith("blob:")||r.startsWith("http")?r:`${t}${r}`;n.push({url:o,label:"pasted image"})}return n}function ag(e,t){let n=[];if(e.imageUrls)for(let[,r]of Object.entries(e.imageUrls))for(let o of r)n.push({url:`${t}${o}`,label:"pasted image"});return n}function cg({src:e,onClose:t}){return Zn(()=>{let n=r=>{r.key==="Escape"&&(r.stopPropagation(),t())};return document.addEventListener("keydown",n),()=>document.removeEventListener("keydown",n)},[t]),Ee("div",{onClick:t,style:{position:"fixed",inset:0,zIndex:1e5,backgroundColor:"rgba(0,0,0,0.8)",display:"flex",alignItems:"center",justifyContent:"center",cursor:"zoom-out"},children:Ee("img",{src:e,onClick:n=>n.stopPropagation(),style:{maxWidth:"90vw",maxHeight:"90vh",objectFit:"contain",cursor:"default",boxShadow:"0 4px 24px rgba(0,0,0,0.4)"}})})}function dg(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 ug=new Set(["Read","Glob","Grep","WebFetch","WebSearch"]),pg=new Set(["Edit","Write","Bash"]);function fg(e){let t=0,n=!1;for(let r of e){if(r.type!=="tool_use")continue;let o=String(r.data.tool||"");pg.has(o)?n=!0:ug.has(o)&&t++}return!n&&t>=3?"researching":n?"applying changes":null}function gg(e){let t=[];for(let n of e)if(n.type==="tool_use"){let r=dg(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 ac({threadId:e,bridgeUrl:t,accentColor:n,isStreaming:r,streamingEvents:o,onClose:i,onReply:s,onCancel:l,lastError:a,onMouseEnter:d,toolbarRef:c,currentModel:p,currentProvider:u,annotationNumber:g,annotationText:E}){let[w,I]=uo([]),[A,U]=uo(!0),[B,y]=uo(""),[v,O]=uo([]),[Z,N]=uo(null),R=qn(null),$=qn(null),C=qn(null),L=qn(r),X=qn(ri()),ge=qn({x:0,y:0}),ve=qn(!1),ye=qn({x:0,y:0,offsetX:0,offsetY:0}),ae=qn(!1),[,ze]=uo(0);Zn(()=>{try{let _=localStorage.getItem(Cs);if(_){let xe=JSON.parse(_);typeof xe.top=="number"&&typeof xe.left=="number"&&(ae.current=!0,X.current={top:xe.top,left:xe.left},ze(ce=>ce+1))}}catch(_){}},[]),Zn(()=>{let _=()=>{if(!ae.current)X.current=ri();else{let xe=X.current,ce=window.innerWidth-si-_n;xe.top===_n&&xe.left>=ce?X.current=ri():X.current={top:Math.max(_n,Math.min(xe.top,window.innerHeight-_n-200)),left:Math.max(_n,Math.min(xe.left,ce))}}ze(xe=>xe+1)};return window.addEventListener("resize",_,{passive:!0}),()=>window.removeEventListener("resize",_)},[]),Zn(()=>{let _=C.current;if(!_)return;let xe=De=>{De.button!==0||De.target.closest("button")||(De.preventDefault(),De.stopPropagation(),ve.current=!0,ye.current={x:De.clientX,y:De.clientY,offsetX:ge.current.x,offsetY:ge.current.y})},ce=De=>{if(!ve.current)return;let z=ye.current,re=z.offsetX+(De.clientX-z.x),se=z.offsetY+(De.clientY-z.y),be=Math.max(_n,Math.min(window.innerWidth-si-_n,X.current.left+re)),pe=Math.max(_n,X.current.top+se);ge.current={x:be-X.current.left,y:pe-X.current.top};let ke=$.current;ke&&(ke.style.top=`${pe}px`,ke.style.left=`${be}px`,ke.style.height=`${nc(pe,be,c==null?void 0:c.current)}px`)},Se=()=>{if(!ve.current)return;let De=X.current.top+ge.current.y,z=X.current.left+ge.current.x;X.current={top:De,left:z},ge.current={x:0,y:0},ae.current=!0;try{localStorage.setItem(Cs,JSON.stringify({top:De,left:z}))}catch(re){}ve.current=!1},Be=()=>{X.current=ri(),ge.current={x:0,y:0},ae.current=!1;try{localStorage.removeItem(Cs)}catch(De){}ze(De=>De+1)};return _.addEventListener("mousedown",xe),window.addEventListener("mousemove",ce),window.addEventListener("mouseup",Se),_.addEventListener("dblclick",Be),()=>{_.removeEventListener("mousedown",xe),window.removeEventListener("mousemove",ce),window.removeEventListener("mouseup",Se),_.removeEventListener("dblclick",Be)}},[]);let Me=oi(()=>{fetch(`${t}/thread/${e}`).then(_=>_.json()).then(_=>{var xe;I((xe=_.messages)!=null?xe:[]),U(!1)}).catch(()=>U(!1))},[t,e]);Zn(()=>{U(!0),Me()},[Me]),Zn(()=>{L.current&&!r&&Me(),L.current=r},[r,Me]);let ne=o?gg(o):[],He=o?fg(o):null;Zn(()=>{R.current&&(R.current.scrollTop=R.current.scrollHeight)},[w,ne.length,r]),Zn(()=>{let _=xe=>{xe.key==="Escape"&&(xe.stopPropagation(),i())};return document.addEventListener("keydown",_),()=>document.removeEventListener("keydown",_)},[i]);let Ne=oi(()=>{if(!B.trim()||!s)return;let _=B.trim(),xe=v.length>0?v:void 0,ce=xe?xe.map(Se=>URL.createObjectURL(Se)):void 0;I(Se=>[...Se,f({role:"human",timestamp:Date.now(),jobId:"pending",replyToQuestion:_},ce?{replyImageUrls:ce}:{})]),s(e,_,xe),y(""),O([])},[B,v,e,s]),Ve=oi(_=>{let xe=_.clipboardData.items,ce=[];for(let Se=0;Se<xe.length;Se++){let Be=xe[Se];if(Be.type.startsWith("image/")){let De=Be.getAsFile();De&&ce.push(De)}}ce.length>0&&(_.preventDefault(),O(Se=>[...Se,...ce]))},[]),$e=oi(_=>{_.key==="Enter"&&(_.metaKey||_.ctrlKey)&&(_.preventDefault(),Ne())},[Ne]),Ie=X.current.top+ge.current.y,st=X.current.left+ge.current.x,ct=nc(Ie,st,c==null?void 0:c.current);return vt(ai,{children:[Ee("div",{"data-devtools":"thread-panel-backdrop",onMouseDown:_=>{_.target===_.currentTarget&&i()},style:{position:"fixed",inset:0,zIndex:9999}}),vt("div",{ref:$,style:b(f({},Zf),{height:ct,position:"fixed",top:Ie,left:st,zIndex:1e4}),"data-devtools":"thread-panel",onMouseEnter:d,children:[(()=>{let xe=`<svg xmlns='http://www.w3.org/2000/svg' width='5' height='5'><path d='M-1,1 l2,-2 M0,5 l5,-5 M4,6 l2,-2' stroke='${r?n:"rgb(0,0,0)"}' stroke-width='.75'/></svg>`,ce=`url("data:image/svg+xml,${encodeURIComponent(xe)}")`;return vt(ai,{children:[Ee("style",{children:`@keyframes popmelt-border-march { to { background-position: 0 -5px; } }
|
|
50
|
+
[data-popmelt-reply]::placeholder { opacity: 0.35; }`}),Ee("div",{style:f({position:"absolute",inset:-3,padding:5,backgroundImage:ce,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"})})]})})(),vt("div",{style:{display:"flex",flexDirection:"column",overflow:"hidden",flex:1,minHeight:0},children:[vt("div",{ref:C,style:b(f({},Qf),{backgroundColor:n,color:"#ffffff",cursor:"grab",userSelect:"none",WebkitUserSelect:"none"}),children:[vt("span",{style:{display:"flex",alignItems:"center",gap:6,minWidth:0},children:[Ee("span",{style:{flexShrink:0},children:g?`${g}.`:"Conversation"}),E&&Ee("span",{style:{opacity:.7,fontSize:11,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",minWidth:0},children:E})]}),Ee("button",{onClick:i,style:{background:"none",border:"none",cursor:"pointer",fontSize:16,color:"#ffffff",padding:"0 4px",lineHeight:1},children:"\xD7"})]}),Ee("style",{dangerouslySetInnerHTML:{__html:tg}}),vt("div",{ref:R,style:eg,"data-devtools":"thread-panel-messages",children:[A&&Ee("div",{style:{padding:16,color:"#9ca3af",textAlign:"center"},children:"Loading..."}),!A&&w.length===0&&!r&&Ee("div",{style:{padding:16,color:"#9ca3af",textAlign:"center"},children:"No messages yet."}),w.map((_,xe)=>{let ce=_.role==="human";if(_.cancelled||_.error)return vt("div",{style:{padding:"8px 16px",borderBottom:"1px solid rgba(0, 0, 0, 0.04)",opacity:xe===w.length-1?1:.5},children:[vt("div",{style:{display:"flex",alignItems:"center",gap:4},children:[Ee("span",{style:{fontSize:11,color:_.error?"#dc2626":"#9ca3af",fontStyle:"italic"},children:_.error?"Error":"Cancelled"}),Ee("span",{style:{fontSize:10,color:"#9ca3af",marginLeft:"auto"},children:rc(_.timestamp)})]}),_.error&&Ee("div",{style:{fontSize:12,color:"#6b7280",marginTop:4,lineHeight:1.4},children:_.error})]},`${_.jobId}-${xe}`);let Se=ce?_.replyToQuestion||_.feedbackSummary||"(annotation)":oc(_.responseText||""),Be=ce?void 0:_.question,De=!ce&&_.resolutions&&_.resolutions.length>0,z=!ce&&_.toolsUsed&&_.toolsUsed.length>0;if(!Se&&!Be&&!De)return null;let re=xe===w.length-1;return vt("div",{style:{padding:"8px 16px",borderBottom:"1px solid rgba(0, 0, 0, 0.04)",opacity:re?1:.5},children:[vt("div",{style:{display:"flex",alignItems:"center",gap:4,marginBottom:4},children:[!ce&&Ee(gs,{provider:_.provider,size:11,style:{color:"#6b7280"}}),Ee("span",{style:{fontWeight:600,fontSize:11,color:ce?n:"#6b7280"},children:ce?"You":ms(_.model,_.provider)}),Ee("span",{style:{fontSize:10,color:"#9ca3af",marginLeft:"auto"},children:rc(_.timestamp)})]}),ce&&!_.replyToQuestion&&(()=>{let se=Se?sg(Se):null;if(se&&_.screenshotUrls)return Ee("div",{style:{display:"flex",flexDirection:"column",gap:4},children:se.map((pe,ke)=>{var Xe;let oe=(Xe=_.screenshotUrls)==null?void 0:Xe[pe.route],We=oe?`${t}${oe}`:null;return vt("div",{style:{display:"flex",gap:6,alignItems:"flex-start"},children:[We?Ee("img",{src:We,title:pe.route,style:b(f({},ii),{flexShrink:0,marginTop:1}),onClick:()=>N(We)}):Ee("div",{style:{width:li,height:li,flexShrink:0}}),vt("div",{style:{lineHeight:1.5,wordBreak:"break-word",minWidth:0},children:[Ee("code",{style:{fontSize:10,backgroundColor:"rgba(0,0,0,0.06)",padding:"1px 4px"},children:pe.route}),pe.text&&Ee("div",{style:{marginTop:2},children:co(pe.text)})]})]},ke)})});let be=_.screenshotUrl?`${t}${_.screenshotUrl}`:null;return be&&Se?vt("div",{style:{display:"flex",gap:6,alignItems:"flex-start"},children:[Ee("img",{src:be,title:"screenshot",style:b(f({},ii),{flexShrink:0,marginTop:1}),onClick:()=>N(be)}),Ee("div",{style:{lineHeight:1.5,wordBreak:"break-word",minWidth:0},children:Se.includes(`
|
|
51
|
+
`)?co(Se):Se})]}):Se?Ee("div",{style:{lineHeight:1.5,wordBreak:"break-word"},children:Se.includes(`
|
|
52
|
+
`)?co(Se):Se}):null})(),ce&&_.replyToQuestion&&Se&&Ee("div",{style:{lineHeight:1.5,wordBreak:"break-word"},children:Se.includes(`
|
|
53
|
+
`)?co(Se):Se}),!ce&&Se&&Ee("div",{style:{lineHeight:1.5,wordBreak:"break-word"},children:co(Se)}),ce&&_.replyToQuestion&&(()=>{let se=lg(_,t);return se.length===0?null:Ee("div",{style:{display:"flex",gap:4,flexWrap:"wrap",marginTop:6},children:se.map((be,pe)=>Ee("img",{src:be.url,title:be.label,style:ii,onClick:()=>N(be.url)},pe))})})(),ce&&!_.replyToQuestion&&(()=>{let se=ag(_,t);return se.length===0?null:Ee("div",{style:{display:"flex",gap:4,flexWrap:"wrap",marginTop:6},children:se.map((be,pe)=>Ee("img",{src:be.url,title:be.label,style:ii,onClick:()=>N(be.url)},pe))})})(),Be&&Ee("div",{style:{marginTop:Se?4:0,lineHeight:1.5,wordBreak:"break-word"},children:co(Be)}),(z||De)&&vt("div",{style:{marginTop:Se||Be?6:0,padding:"4px 8px",backgroundColor:"rgba(0, 0, 0, 0.03)",fontSize:11,lineHeight:1.5,color:"#6b7280"},children:[z&&Ee("div",{style:{fontFamily:"ui-monospace, SFMono-Regular, Menlo, monospace",fontSize:10},children:_.toolsUsed.map((se,be)=>Ee("div",{children:se},be))}),De&&_.resolutions.map((se,be)=>{var oe;let pe=(oe=se.finalScope)!=null?oe:se.inferredScope,ke=pe?`${pe.breadth} \xB7 ${pe.target}`:null;return vt("div",{style:{marginTop:z?4:0},children:[Ee("span",{style:{color:se.status==="resolved"?"#10b981":"#f59e0b"},children:se.status==="resolved"?"Done":"Needs review"}),ke&&Ee("span",{style:{marginLeft:6,padding:"1px 5px",backgroundColor:"rgba(0, 0, 0, 0.06)",fontSize:10,fontFamily:"ui-monospace, SFMono-Regular, Menlo, monospace"},children:ke}),se.summary?` \u2014 ${se.summary}`:""]},be)})]})]},`${_.jobId}-${xe}`)}),r&&vt("div",{style:{padding:"8px 16px",borderBottom:"1px solid rgba(0, 0, 0, 0.04)"},children:[vt("div",{style:{display:"flex",alignItems:"center",gap:4,marginBottom:4},children:[Ee(gs,{provider:u,size:11,style:{color:"#6b7280"}}),Ee("span",{style:{fontWeight:600,fontSize:11,color:"#6b7280"},children:ms(p,u)}),He&&Ee("span",{style:{fontSize:10,color:"#b0b7c3",fontStyle:"italic"},children:He}),vt("span",{style:{marginLeft:"auto",display:"flex",alignItems:"center",gap:6},children:[Ee(ig,{color:n}),l&&Ee("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"})]})]}),ne.map((_,xe)=>{if(_.kind==="tool")return Ee("div",{style:{paddingLeft:12,fontSize:11,color:"#9ca3af",fontFamily:"ui-monospace, SFMono-Regular, Menlo, monospace",lineHeight:1.6},children:_.label},xe);if(_.kind==="thinking")return Ee("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:_.text},xe);let ce=oc(_.text);return ce?Ee("div",{style:{paddingLeft:12,marginTop:2,marginBottom:2,lineHeight:1.5,wordBreak:"break-word"},children:co(ce)},xe):null})]})]}),!r&&a&&vt("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:[Ee("span",{style:{fontWeight:600},children:"Error: "}),a]}),s&&vt("div",{style:{flexShrink:0,position:"relative"},children:[v.length>0&&Ee("div",{style:{position:"absolute",bottom:"100%",display:"flex",gap:4,padding:"6px 5px 5px",flexWrap:"wrap"},children:v.map((_,xe)=>vt("span",{onClick:()=>O(ce=>ce.filter((Se,Be)=>Be!==xe)),onMouseEnter:ce=>{let Se=ce.currentTarget.querySelector("[data-chip-x]");Se&&(Se.style.color="#ef4444")},onMouseLeave:ce=>{let Se=ce.currentTarget.querySelector("[data-chip-x]");Se&&(Se.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 ",xe+1,Ee("span",{"data-chip-x":!0,style:{fontSize:12,lineHeight:1,color:"#9ca3af"},children:"\xD7"})]},xe))}),vt("div",{style:ng,children:[Ee("input",{"data-popmelt-reply":!0,value:B,onChange:_=>y(_.target.value),onKeyDown:$e,onPaste:Ve,placeholder:"Reply here (cmd + enter to send)",style:{flex:1,minWidth:0,minHeight:44,padding:"0 4px",fontSize:12,fontFamily:Jt,backgroundColor:"transparent",color:"#1f2937",border:"none",outline:"none",lineHeight:"40px",boxSizing:"border-box"}}),Ee("button",{onClick:Ne,disabled:!B.trim(),style:{display:"flex",alignItems:"center",justifyContent:"center",width:28,height:28,padding:0,background:"none",border:"none",cursor:B.trim()?"pointer":"default",color:B.trim()?"#1f2937":"rgba(0,0,0,0.2)",flexShrink:0},children:vt("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:[Ee("path",{d:"M3.714 3.048a.498.498 0 0 0-.683.627l2.843 7.627a2 2 0 0 1 0 1.396l-2.842 7.627a.498.498 0 0 0 .682.627l18-8.5a.5.5 0 0 0 0-.904z"}),Ee("path",{d:"M6 12h16"})]})})]})]})]})]}),Z&&Ee(cg,{src:Z,onClose:()=>N(null)})]})}import{Fragment as vg,jsx as tr,jsxs as dc}from"react/jsx-runtime";var uc=mg(null),ks="devtools-provider",Ts="devtools-model",Ms="devtools-open-thread-id";async function cc(e,t){t?await t(e):(window.history.pushState(window.history.state,"",e),window.dispatchEvent(new PopStateEvent("popstate",{state:window.history.state}))),await new Promise(n=>{requestAnimationFrame(()=>requestAnimationFrame(()=>{setTimeout(n,600)}))})}function yg(e,t,n){let r=e==="codex"?hr:mr;return Math.min(n,(t==="codex"?hr:mr).length-1)}function bg({children:e,enabled:t=process.env.NODE_ENV==="development",bridgeUrl:n=typeof window!="undefined"?(o=>(o=window.__POPMELT_BRIDGE_URL__)!=null?o:"http://localhost:1111")():"http://localhost:1111",navigate:r}){var te,Re,he,Ue,Je,Le;let[i,s]=yl(),l=ml(n),a=_t(null),d=_t(null),c=(te=fl())!=null?te:n,p=_t(new Map),u=_t(new Map),g=_t(!1),E=Do(),[w,I]=cn(()=>typeof window=="undefined"?"claude":localStorage.getItem(ks)||"claude"),[A,U]=cn(()=>{if(typeof window=="undefined")return 0;let S=localStorage.getItem(Ts);return S&&parseInt(S,10)||0}),[B,y]=cn([]),[v,O]=cn({}),[Z,N]=cn(!1);Ft(()=>{l.isConnected&&Us(c).then(S=>{if(!S)return;let j=Object.entries(S.providers).filter(([,we])=>we.available).map(([we])=>we);j.length>0&&y(j);let ee={};for(let[we,le]of Object.entries(S.providers))le.mcp&&(ee[we]=le.mcp);O(ee),Object.values(ee).every(we=>we.found)&&N(!1)})},[l.isConnected,l.capabilitiesVersion,c]),Ft(()=>{if(B.length>0&&!B.includes(w)){let S=B[0];I(S),localStorage.setItem(ks,S)}},[B,w]);let R=w==="codex"?hr:mr,$=(Re=R[A])!=null?Re:R[0],C=on(S=>{let j=w;I(S),localStorage.setItem(ks,S);let ee=yg(j,S,A);U(ee),localStorage.setItem(Ts,String(ee))},[w,A]),L=on(S=>{U(S),localStorage.setItem(Ts,String(S))},[]),X=on(async()=>{let S=await qs(c);if(!S)return;let j={};for(let[ee,de]of Object.entries(S.capabilities.providers))de.mcp&&(j[ee]=de.mcp);O(j),S.results.some(ee=>ee.installed)&&N(!0)},[c]),[ge,ve]=cn(new Set),[ye,ae]=cn(null),[ze,Me]=cn(null),[ne,He]=cn(null),[Ne,Ve]=cn(null);Ft(()=>{l.isConnected&&Po(c).then(S=>{S!=null&&S.components&&ve(new Set(Object.keys(S.components)))})},[l.isConnected,c]);let $e=on(async S=>{let j=[];for(let ee of S)try{(await Zs(ee,c)).added&&j.push(ee)}catch(de){console.error("[Popmelt] Failed to add component to model:",ee,de)}j.length>0&&(ve(ee=>{let de=new Set(ee);for(let we of j)de.add(we);return de}),ae(j[j.length-1]))},[c]),Ie=on(S=>{ae(S)},[]),st=on(()=>{Po(c).then(S=>{S!=null&&S.components&&ve(new Set(Object.keys(S.components)))})},[c]),ct=on(async S=>{try{(await Qs(S,c)).removed&&ve(ee=>{let de=new Set(ee);return de.delete(S),de})}catch(j){console.error("[Popmelt] Failed to remove component from model:",j)}},[c]),_=on((S,j)=>{s({type:"MODIFY_SPACING_TOKEN",payload:S}),s({type:"ADD_SPACING_TOKEN_CHANGE",payload:j})},[s]),xe=on((S,j)=>{s({type:"DELETE_SPACING_TOKEN",payload:{tokenPath:S,originalValue:j}})},[s]),[ce,Se]=cn(0),Be=_t([]);Ft(()=>{let S=Be.current,j=i.spacingTokenMods;Be.current=j;let ee=new Map(S.map(le=>[le.tokenPath,le])),de=new Map(j.map(le=>[le.tokenPath,le])),we=!1;for(let[le,ot]of de){let Pe=ee.get(le);if(!(Pe&&Pe.currentValue===ot.currentValue)){we=!0,ot.currentValue==="__deleted__"?el(le,c).catch(et=>console.error("[Popmelt] Failed to sync token delete:",et)):pi(le,ot.currentValue,c).catch(et=>console.error("[Popmelt] Failed to sync token update:",et));for(let et of ot.targets){let pt=document.querySelector(et.selector);if(pt)if(ot.currentValue==="__deleted__")pt.style.removeProperty(et.property);else{let mt=ot.currentPx;mt>0&&pt.style.setProperty(et.property,`${mt}px`,"important")}}}}for(let[le,ot]of ee)if(!de.has(le)){we=!0,pi(le,ot.originalValue,c).catch(Pe=>console.error("[Popmelt] Failed to restore token on undo:",Pe));for(let Pe of ot.targets){let et=document.querySelector(Pe.selector);et&&et.style.removeProperty(Pe.property)}}we&&Se(le=>le+1)},[i.spacingTokenMods,c]);let[De,z]=cn(()=>typeof window=="undefined"?null:localStorage.getItem(Ms)||null),[re,se]=cn(new Set),[be,pe]=cn(null);Ft(()=>{De?localStorage.setItem(Ms,De):localStorage.removeItem(Ms)},[De]);let ke="popmelt-in-flight-jobs",[oe,We]=cn(()=>{try{let S=sessionStorage.getItem(ke);return S?JSON.parse(S):{}}catch(S){return{}}});Ft(()=>{try{Object.keys(oe).length>0?sessionStorage.setItem(ke,JSON.stringify(oe)):sessionStorage.removeItem(ke)}catch(S){}},[oe]);let Xe=_t(new Map),At=_t(new Map);Ft(()=>{for(let[S,j]of Object.entries(oe))j.annotationIds.length>0&&Xe.current.set(S,j.annotationIds),j.threadId&&At.current.set(S,j.threadId)},[oe]);let Gt=_t(!1);Ft(()=>{if(Gt.current||i.annotations.length===0)return;Gt.current=!0;let S=new Set;for(let ee of Object.values(oe))for(let de of ee.annotationIds)S.add(de);let j=i.annotations.filter(ee=>S.has(ee.id)?!1:!!(ee.status==="in_flight"||(ee.status==="pending"||!ee.status)&&(ee.captured||ee.threadId))).map(ee=>ee.id);j.length>0&&s({type:"SET_ANNOTATION_STATUS",payload:{ids:j,status:"dismissed"}})},[i.annotations,oe,s]);let it=er(()=>{let S=new Set;for(let j of Object.values(oe))for(let ee of j.annotationIds)S.add(ee);return S},[oe]),Vt=er(()=>{let S=new Set;for(let j of Object.values(oe))for(let ee of j.styleSelectors)S.add(ee);return S},[oe]),Kt=er(()=>{let S=new Map;for(let j of Object.values(oe)){for(let ee of j.styleSelectors)S.set(ee,j.color);for(let ee of j.annotationIds){let de=i.annotations.find(we=>we.id===ee);if(de&&(de.linkedSelector&&S.set(de.linkedSelector,j.color),de.groupId))for(let we of i.annotations)we.groupId===de.groupId&&we.linkedSelector&&S.set(we.linkedSelector,j.color)}}return S},[oe,i.annotations]),St=_t(i.annotations);St.current=i.annotations;let Ot=_t(i.styleModifications);Ot.current=i.styleModifications;let bt=_t(oe);bt.current=oe,Ft(()=>{let S=null,j=()=>{var Pe,et;if(Object.keys(bt.current).length>0)return;let de=St.current,we=Ot.current,le=[],ot=[];for(let pt of de){if(!pt.linkedSelector||!pt.linkedSelector.startsWith("[data-pm=")||pt.pathname||pt.captured||pt.status&&pt.status!=="pending")continue;let mt=document.querySelector(pt.linkedSelector);!mt&&((et=(Pe=pt.elements)==null?void 0:Pe[0])!=null&&et.selector)&&(mt=document.querySelector(pt.elements[0].selector)),mt||le.push(pt.linkedSelector)}for(let pt of we)document.querySelector(pt.selector)||ot.push(pt.selector);(le.length>0||ot.length>0)&&s({type:"CLEANUP_ORPHANED",payload:{linkedSelectors:le,styleSelectors:ot}})},ee=new MutationObserver(de=>{de.some(we=>we.removedNodes.length>0)&&(S&&clearTimeout(S),S=setTimeout(j,3e3))});return ee.observe(document.body,{childList:!0,subtree:!0}),()=>{ee.disconnect(),S&&clearTimeout(S)}},[s]);let Et=_t(typeof window!="undefined"?window.location.pathname:"/");Ft(()=>{let S=de=>{if(g.current)return;let we=window.location.pathname;if(de===we)return;let le=St.current.filter(Pe=>{var et;return Pe.pathname===de&&((et=Pe.status)!=null?et:"pending")==="pending"});if(console.log(`[Popmelt] Navigation from ${de} \u2192 ${we}, ${le.length} pending annotations on departing page`),le.length===0)return;let ot=a.current;if(!ot){console.warn("[Popmelt] No canvas ref for capture-on-leave");return}if(rr(document.body,ot,le).then(Pe=>ir(Pe)).then(Pe=>{Pe?(u.current.set(de,Pe),console.log(`[Popmelt] Cached screenshot for ${de} (${(Pe.size/1024).toFixed(0)}KB)`)):console.warn(`[Popmelt] Capture-on-leave produced no blob for ${de}`)}).catch(Pe=>{console.warn("[Popmelt] Capture-on-leave failed:",Pe)}),u.current.size>20){let Pe=[...u.current.entries()];u.current=new Map(Pe.slice(-10))}},j=de=>{var le;let we=(le=de.detail)==null?void 0:le.prevPath;we&&(S(we),Et.current=window.location.pathname)},ee=()=>{let de=Et.current;S(de),Et.current=window.location.pathname};return window.addEventListener("popmelt:locationchange",j),window.addEventListener("popstate",ee),()=>{window.removeEventListener("popmelt:locationchange",j),window.removeEventListener("popstate",ee)}},[]),Ft(()=>{l.lastCompletedJobId&&l.lastCompletedJobId in oe&&We(S=>{var de;let we=S,{[de=l.lastCompletedJobId]:j}=we;return no(we,[kr(de)])})},[l.lastCompletedJobId]);let rn=_t(!1);Ft(()=>{if(!l.isConnected){rn.current=!1;return}if(rn.current||(rn.current=!0,Object.keys(oe).length===0))return;let j=setTimeout(()=>{Ao(c).then(ee=>{var we;if(!ee)return;let de=new Set(((we=ee.activeJobs)!=null?we:[]).map(le=>le.id));We(le=>{let ot=Object.keys(le).filter(et=>!de.has(et));if(ot.length===0)return le;let Pe=f({},le);for(let et of ot)delete Pe[et];return Pe})})},500);return()=>clearTimeout(j)},[l.isConnected,c]);let zt=_t(new Set);Ft(()=>{let S=l.events.filter(j=>j.type==="done"&&j.data.resolutions);for(let j of S){let ee=j.data.jobId;zt.current.has(ee)||(zt.current.add(ee),Array.isArray(j.data.resolutions)&&s({type:"APPLY_RESOLUTIONS",payload:{resolutions:j.data.resolutions,threadId:j.data.threadId}}))}},[l.events,s]);let Mn=_t(new Set);Ft(()=>{let S=l.events.filter(j=>j.type==="error"&&j.data.cancelled);for(let j of S){let ee=j.data.jobId;if(!ee||Mn.current.has(ee))continue;Mn.current.add(ee);let de=oe[ee];de&&de.annotationIds.length>0&&s({type:"SET_ANNOTATION_STATUS",payload:{ids:de.annotationIds,status:"dismissed"}})}},[l.events,oe,s]);let lt=_t(0);Ft(()=>{let S=l.incrementalResolutions;if(S.length<=lt.current)return;let j=S.slice(lt.current);lt.current=S.length,s({type:"APPLY_RESOLUTIONS",payload:{resolutions:j}})},[l.incrementalResolutions,s]),Ft(()=>{l.incrementalResolutions.length===0&&(lt.current=0)},[l.incrementalResolutions.length]);let Q=_t(l.status);Ft(()=>{let S=Q.current;Q.current=l.status,S==="disconnected"&&l.status==="idle"&&We({})},[l.status]);let Fe=on(async()=>{let S=a.current;if(!S)return!1;let j=await rr(document.body,S,i.annotations);if(j.length===0)return!1;let ee=await xl(j,i.annotations,i.styleModifications);return ee&&s({type:"MARK_CAPTURED"}),ee},[i.annotations,i.styleModifications,s]),tt=on((S,j)=>{let ee=p.current.get(S)||[];p.current.set(S,[...ee,...j])},[]),In=on(async()=>{var to;let S=a.current;if(!S)return!1;let j=i.annotations.filter(ht=>{var ln;return((ln=ht.status)!=null?ln:"pending")==="pending"}),ee=i.spacingTokenChanges.filter(ht=>!ht.captured);if(j.length===0&&i.styleModifications.filter(ht=>!ht.captured).length===0&&ee.length===0)return!1;let de=new Map;for(let ht of j){let ln=ht.pathname||E;de.has(ln)||de.set(ln,[]),de.get(ln).push(ht)}let we=new Map,le=[...de.keys()].filter(ht=>ht!==E);if(le.length>0){let ht=E,ln={x:window.scrollX,y:window.scrollY};g.current=!0;for(let Wt of le)try{console.log(`[Popmelt] Navigating to ${Wt} for screenshot capture`),await cc(Wt,r),window.location.pathname!==Wt&&console.warn(`[Popmelt] Navigation to ${Wt} did not take effect (at ${window.location.pathname})`);let Tt=de.get(Wt)||[],Rn=await rr(document.body,S,Tt),Sn=await ir(Rn);Sn&&(we.set(Wt,Sn),console.log(`[Popmelt] Captured ${Wt} (${(Sn.size/1024).toFixed(0)}KB)`))}catch(Tt){console.warn(`[Popmelt] Failed to capture ${Wt}:`,Tt)}await cc(ht,r),window.scrollTo(ln.x,ln.y),g.current=!1}let ot=j.filter(ht=>(ht.pathname||E)===E),Pe=await rr(document.body,S,ot.length>0?i.annotations:[]);if(Pe.length>0){let ht=await ir(Pe);ht&&we.set(E,ht)}if(we.size===0)return!1;let et=yi(j,i.styleModifications,void 0,ee.length>0?ee:void 0),pt=JSON.stringify(et),mt=new Map;for(let ht of j){let ln=p.current.get(ht.id);if(ln&&ln.length>0&&mt.set(ht.id,ln),ht.groupId){for(let Wt of j)if(Wt.groupId===ht.groupId&&Wt.id!==ht.id){let Tt=p.current.get(Wt.id);Tt&&Tt.length>0&&mt.set(Wt.id,Tt)}}}let Ht=de.size>1;console.log(`[Popmelt] Submit: ${de.size} page(s), ${we.size} screenshot(s), pages: [${[...de.keys()].join(", ")}], cached: [${[...u.current.keys()].join(", ")}]`);let eo=Ht?we:(to=we.get(E))!=null?to:we;try{let ht=hi(i.activeColor),{jobId:ln,threadId:Wt}=await Ks(eo,pt,c,ht,w,$.id,mt.size>0?mt:void 0,mi());for(let un of mt.keys())p.current.delete(un);for(let un of de.keys())u.current.delete(un);let Tt=j.map(un=>un.id),Rn=i.styleModifications.filter(un=>!un.captured).map(un=>un.selector);We(un=>b(f({},un),{[ln]:{annotationIds:Tt,styleSelectors:Rn,color:i.activeColor,threadId:Wt}})),s({type:"MARK_CAPTURED"}),Wt&&Tt.length>0&&s({type:"SET_ANNOTATION_THREAD",payload:{ids:Tt,threadId:Wt}});let Sn=i.activeColor.match(/oklch\([^)]*\s+([\d.]+)\s*\)/),Io=((Sn!=null&&Sn[1]?parseFloat(Sn[1]):29)+60)%360;return s({type:"SET_COLOR",payload:`oklch(0.628 0.258 ${Io})`}),!0}catch(ht){return console.error("[Pare] Failed to send to bridge:",ht),!1}},[i.annotations,i.styleModifications,i.spacingTokenChanges,i.activeColor,s,c,w,$.id,E,r]),$t=on(async(S,j,ee)=>{var de,we,le,ot;try{let Pe=hi(i.activeColor),{jobId:et}=await tl(S,j,c,Pe,w,$.id,ee,mi()),pt=(ot=(le=(de=Object.values(bt.current).find(Ht=>Ht.threadId===S))==null?void 0:de.color)!=null?le:(we=i.annotations.find(Ht=>Ht.threadId===S))==null?void 0:we.color)!=null?ot:i.activeColor;We(Ht=>b(f({},Ht),{[et]:{annotationIds:[],styleSelectors:[],color:pt,threadId:S}}));let mt=i.annotations.filter(Ht=>Ht.threadId===S&&(Ht.status==="waiting_input"||Ht.status==="resolved"||Ht.status==="needs_review"));mt.length>0&&(s({type:"SET_ANNOTATION_STATUS",payload:{ids:mt.map(Ht=>Ht.id),status:"in_flight"}}),We(Ht=>{let eo=Ht[et];return eo?b(f({},Ht),{[et]:b(f({},eo),{annotationIds:[...eo.annotationIds,...mt.map(to=>to.id)]})}):Ht})),l.dismissQuestion(S)}catch(Pe){console.error("[Pare] Failed to send reply:",Pe)}},[i.activeColor,i.annotations,c,l.dismissQuestion,s,w,$.id]),fn=_t(new Set);Ft(()=>{for(let S of l.pendingQuestions){if(fn.current.has(S.jobId))continue;fn.current.add(S.jobId);let j=S.annotationIds&&S.annotationIds.length>0?S.annotationIds:void 0;!j&&S.threadId&&(j=i.annotations.filter(ee=>ee.threadId===S.threadId).map(ee=>ee.id)),j&&j.length>0&&s({type:"SET_ANNOTATION_QUESTION",payload:{ids:j,question:S.question,threadId:S.threadId}})}},[l.pendingQuestions,s,i.annotations]);let dn=er(()=>{if(l.activeJobId&&l.activeJobId in oe)return oe[l.activeJobId].color;let S=Object.values(oe);return S.length>0?S[S.length-1].color:void 0},[l.activeJobId,oe]),gt=on(S=>{z(S)},[]),sn=on(S=>{if(!S){pe(null);return}let j=Xe.current.get(S);j&&j.length>0?pe(new Set(j)):pe(null)},[]),Pt=on(async S=>{try{let j=S?`${c}/cancel?jobId=${S}`:`${c}/cancel`;await fetch(j,{method:"POST"})}catch(j){}},[c]);Ft(()=>{i.activeTool==="model"&&De&&z(null)},[i.activeTool]);let Nt=_t(null);Ft(()=>{i.isAnnotating?Nt.current&&(z(Nt.current),Nt.current=null):De&&(Nt.current=De,z(null))},[i.isAnnotating]);let qt=er(()=>{if(!De)return null;for(let[S,j]of Object.entries(oe))if(j.threadId===De)return S;return null},[De,oe]),xt=De?i.annotations.find(S=>S.threadId===De):void 0,Qn=xt?i.annotations.indexOf(xt)+1:void 0,[Pn,Dt]=cn(!1),[jn,gn]=cn(0),mn=_t(null),ut=on(S=>{S?(mn.current&&(clearTimeout(mn.current),mn.current=null),Dt(!0)):mn.current=setTimeout(()=>{Dt(!1),mn.current=null},150)},[]),D=on(()=>{gn(S=>S+1),l.clearEvents(),z(null),se(new Set),Pt()},[l.clearEvents,Pt]);Ft(()=>()=>{mn.current&&clearTimeout(mn.current)},[]);let K=er(()=>({isEnabled:t}),[t]);return t?dc(uc.Provider,{value:K,children:[e,tr(wa,{state:i,dispatch:s,onScreenshot:Fe,inFlightAnnotationIds:it,inFlightStyleSelectors:Vt,inFlightSelectorColors:Kt,onAttachImages:tt,onReply:l.isConnected?$t:void 0,onViewThread:l.isConnected?gt:void 0,onCloseThread:S=>{z(null),S&&se(j=>new Set(j).add(S))},onModelComponentsAdd:l.isConnected?$e:void 0,onModelComponentFocus:l.isConnected?Ie:void 0,onModelComponentHover:Me,modelComponentNames:ge,modelPanelHoveredComponent:ne,modelSpacingTokenHover:Ne,highlightedAnnotationIds:be,focusedThreadAnnotationId:xt==null?void 0:xt.id,externalCanvasRef:a,toolbarRef:d}),tr(ec,{children:dc(Za,{children:[tr(Ja,{state:i,dispatch:s,onScreenshot:Fe,onSendToClaude:l.isConnected?In:void 0,hasActiveJobs:Object.keys(oe).length>0||l.activeJobIds.length>0,activeJobColor:dn,onCrosshairHover:ut,onClear:D,provider:w,onProviderChange:l.isConnected&&B.length>1?C:void 0,availableProviders:B,modelIndex:A,modelCount:R.length,modelLabel:$.label,onModelChange:l.isConnected?L:void 0,onViewThread:l.isConnected?gt:void 0,isThreadPanelOpen:De!==null,mcpStatus:v,onInstallMcp:l.isConnected?X:void 0,mcpJustInstalled:Z,bridgeUrl:c,isBridgeConnected:l.isConnected,modelSelectedComponent:ye,modelCanvasHoveredComponent:ze,onModelComponentHover:He,onSpacingTokenHover:Ve,onModifySpacingToken:l.isConnected?_:void 0,onDeleteSpacingToken:l.isConnected?xe:void 0,modelRefreshKey:ce,onModelComponentAdded:st,onModelComponentRemoved:ct,toolbarRef:d}),De&&l.isConnected&&tr(ac,{threadId:De,bridgeUrl:c,accentColor:(he=xt==null?void 0:xt.color)!=null?he:i.activeColor,isStreaming:qt!==null,streamingEvents:qt?l.events.filter(S=>S.data.jobId===qt):[],onClose:()=>z(null),onReply:$t,onCancel:qt?()=>Pt(qt):void 0,lastError:(Le=(Ue=l.lastErrorByJob)==null?void 0:Ue[qt!=null?qt:""])!=null?Le:l.lastCompletedJobId&&At.current.get(l.lastCompletedJobId)===De?(Je=l.lastErrorByJob)==null?void 0:Je[l.lastCompletedJobId]:void 0,toolbarRef:d,currentModel:$.id,currentProvider:w,annotationNumber:Qn,annotationText:xt==null?void 0:xt.text}),tr(qa,{bridge:l,bridgeUrl:c,inFlightJobs:oe,isVisible:Pn||l.lastResponseText!==null||l.activeJobIds.length>0,onHover:ut,clearSignal:jn,onReply:$t,onViewThread:gt,onCancel:Pt,onHoverJob:sn,isConnected:l.isConnected,dismissedThreadIds:re})]})})]}):tr(vg,{children:e})}function xg(){let e=hg(uc);if(!e)throw new Error("usePopmelt must be used within PopmeltProvider");return e}export{bg as PopmeltProvider,xg as usePopmelt};
|