@popmelt.com/core 0.6.0 → 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/dist/index.mjs +19 -19
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
var wc=Object.defineProperty,Cc=Object.defineProperties;var Ec=Object.getOwnPropertyDescriptors;var Cr=Object.getOwnPropertySymbols;var Ys=Object.prototype.hasOwnProperty,js=Object.prototype.propertyIsEnumerable;var Ws=(e,t,n)=>t in e?wc(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,f=(e,t)=>{for(var n in t||(t={}))Ys.call(t,n)&&Ws(e,n,t[n]);if(Cr)for(var n of Cr(t))js.call(t,n)&&Ws(e,n,t[n]);return e},y=(e,t)=>Cc(e,Ec(t));var Er=e=>typeof e=="symbol"?e:e+"",to=(e,t)=>{var n={};for(var r in e)Ys.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&&js.call(e,r)&&(n[r]=e[r]);return n};import{createContext as pg,useCallback as on,useContext as fg,useEffect as Ft,useMemo as er,useRef as _t,useState as cn}from"react";import{useCallback as tl,useEffect as kc,useSyncExternalStore as Tc}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,y(f({},t),{signal:r.signal})).finally(()=>clearTimeout(o))}async function Vs(e=Nn){try{let t=await On(`${e}/capabilities`,{},5e3);return t.ok?await t.json():null}catch(t){return null}}async function Lo(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 Gs(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 Us(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 Gs(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 Gs(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 Js(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 Xs(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 Ks(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 qs(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 Zs(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 ui(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 Qs(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 Ao(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 el(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 Ir={};var yo=typeof Ir!="undefined"?Ir.hot:void 0,rl,il,fi=(il=(rl=yo==null?void 0:yo.data)==null?void 0:rl.sourceId)!=null?il:typeof crypto!="undefined"&&typeof crypto.randomUUID=="function"?crypto.randomUUID():Math.random().toString(36).slice(2);yo!=null&&yo.data&&(yo.data.sourceId=fi);function gi(){return fi}var bo=typeof Ir!="undefined"?Ir.hot:void 0,Qt=bo==null?void 0:bo.data,Mc={isConnected:!1,status:"disconnected",jobResponses:{},jobThinking:{},activeJobIds:[],currentResponse:"",currentThinking:"",events:[],activeJobId:null,lastCompletedJobId:null,lastResponseText:null,lastThreadId:null,lastErrorByJob:{},pendingQuestions:[],incrementalResolutions:[],capabilitiesVersion:0},sl,or=(sl=Qt==null?void 0:Qt.store)!=null?sl:f({},Mc),ll,kr=(ll=Qt==null?void 0:Qt.listeners)!=null?ll:new Set,al,mo=(al=Qt==null?void 0:Qt.activeEs)!=null?al:null,cl,pi=(cl=Qt==null?void 0:Qt.activeBridgeUrl)!=null?cl:null,fo=null,dl,Tr=(dl=Qt==null?void 0:Qt.connectionGeneration)!=null?dl:0;bo!=null&&bo.data&&Object.defineProperties(bo.data,{store:{get:()=>or,configurable:!0},listeners:{get:()=>kr,configurable:!0},activeEs:{get:()=>mo,configurable:!0},activeBridgeUrl:{get:()=>pi,configurable:!0},connectionGeneration:{get:()=>Tr,configurable:!0},discoveredBridgeUrl:{get:()=>ho,configurable:!0}});var Mr=new Set,Oo=new Map,Bo={};function go(e,t){var r;if(!e)return!1;if(Mr.has(e)){let o=Oo.get(e);return o||(o=[],Oo.set(e,o)),o.push({type:(r=t.type)!=null?r:"",data:t}),!0}let n=Bo[e];return n!==void 0&&typeof t.seq=="number"&&t.seq<=n}async function Ic(e,t,n){let r=()=>n!==Tr;for(let o of t){if(r())return;Mr.add(o),Oo.set(o,[])}await Promise.all(t.map(async o=>{var i;try{let s=await Js(e,o);if(r())return;let l=(i=Oo.get(o))!=null?i:[];if(s){Zt(a=>{let d=y(f({},a.jobResponses),{[o]:s.accumulated.response}),c=y(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 y(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})}),Bo[o]=s.currentSeq;for(let a of l)typeof a.data.seq=="number"&&a.data.seq<=s.currentSeq||nl(a.type,a.data,o)}else for(let a of l)nl(a.type,a.data,o)}finally{Mr.delete(o),Oo.delete(o)}}))}function nl(e,t,n){if(e==="delta"){let r=t.text||"";Zt(o=>y(f({},o),{jobResponses:y(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=>y(f({},o),{jobThinking:y(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=>y(f({},r),{events:[...r.events,{type:e,data:t,timestamp:Date.now()}]}))}var ul,ho=(ul=Qt==null?void 0:Qt.discoveredBridgeUrl)!=null?ul:null,Po=null;async function Rc(e){return e&&e!=="http://localhost:1111"?(ho=e,e):ho||Po||(Po=Us(e).then(n=>{var r;return ho=(r=n==null?void 0:n.url)!=null?r:null,Po=null,ho}).catch(()=>(Po=null,null)),Po)}function pl(){return ho}function ol(){return or}function Lc(e){return kr.add(e),()=>{kr.delete(e)}}function Zt(e){or=e(or);for(let t of kr)t()}function fl(e){if(mo&&mo.readyState!==EventSource.CLOSED&&pi===e)return;mo&&(mo.close(),mo=null),fo&&(clearTimeout(fo),fo=null),pi=e;let t=++Tr,n=new EventSource(`${e}/events?sourceId=${fi}`);mo=n;let r=()=>t!==Tr;n.addEventListener("connected",()=>{r()||Lo(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),C=u.activeJobIds.filter(b=>!s.has(b));for(let b of C){let T=a.get(b);(T==null?void 0:T.status)==="error"&&T.error&&(g[b]=T.error)}let S=u.activeJobIds.filter(b=>s.has(b));for(let b of s)S.includes(b)||S.push(b);return y(f({},u),{isConnected:!0,status:d?"streaming":C.length>0||u.status==="disconnected"?"idle":u.status,activeJobId:d?i[i.length-1].id:S.length>0?S[S.length-1]:null,activeJobIds:S,lastErrorByJob:g,lastCompletedJobId:C.length>0?C[C.length-1]:u.lastCompletedJobId})}),d){let u=Array.from(s);Ic(e,u,t).catch(()=>{})}})}),n.addEventListener("job_started",o=>{if(r())return;let i=JSON.parse(o.data),s=i.jobId;go(s,i)||Zt(l=>{var a,d,c,p;return y(f({},l),{status:"streaming",activeJobId:s,activeJobIds:l.activeJobIds.includes(s)?l.activeJobIds:[...l.activeJobIds,s],jobResponses:y(f({},l.jobResponses),{[s]:(a=l.jobResponses[s])!=null?a:""}),jobThinking:y(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(go(s,i))return;let l=i.text||"";Zt(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;if(go(s,i))return;let l=i.text||"";Zt(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),s=i.jobId;go(s,i)||Zt(l=>y(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;go(s,i)||(s&&delete Bo[s],Zt(l=>{var g;let a=s?l.activeJobIds.filter(C=>C!==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 y(f(y(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;go(s,i)||Zt(l=>y(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=>y(f({},o),{capabilitiesVersion:o.capabilitiesVersion+1}))}),n.addEventListener("queue_drained",()=>{if(!r()){for(let o of Object.keys(Bo))delete Bo[o];Mr.clear(),Oo.clear(),Zt(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)Zt(l=>y(f({},l),{isConnected:!1,status:"disconnected"})),fo&&(clearTimeout(fo),fo=null),fo=setTimeout(()=>{Lo(e).then(l=>{l&&fl(e)})},5e3);else if(o instanceof MessageEvent){let l=JSON.parse(o.data),a=(i=l.jobId)!=null?i:null;if(go(a!=null?a:void 0,l))return;a&&delete Bo[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 y(f({},c),{status:u,activeJobIds:p,lastCompletedJobId:a!=null?a:c.activeJobId,lastErrorByJob:a&&d?y(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=>y(f({},o),{isConnected:!1,status:"disconnected"}))}}function gl(e="http://localhost:1111"){let t=Tc(Lc,ol,ol);kc(()=>{Rc(e).then(o=>{o&&Lo(o).then(i=>{i&&fl(o)})})},[e]);let n=tl(()=>{Zt(()=>y(f({},or),{events:[],currentResponse:"",currentThinking:"",jobResponses:{},jobThinking:{},lastResponseText:null,lastThreadId:null,lastErrorByJob:{},incrementalResolutions:[]}))},[]),r=tl(o=>{Zt(i=>y(f({},i),{pendingQuestions:i.pendingQuestions.filter(s=>s.threadId!==o)}))},[]);return y(f({},t),{clearEvents:n,dismissQuestion:r})}import{useEffect as Ac,useReducer as Pc}from"react";var Bc={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 Rr(){return Math.random().toString(36).substring(2,9)}function ml(e){return e.status?e:e.captured?y(f({},e),{status:"in_flight"}):y(f({},e),{status:"pending"})}function hn(e){return y(f({},e),{undoStack:[...e.undoStack,{annotations:e.annotations,styleModifications:e.styleModifications,spacingTokenMods:e.spacingTokenMods}],redoStack:[]})}function Oc(e,t){return y(f({},e),{isAnnotating:t})}function Nc(e,t){return y(f({},e),{activeTool:t,inspectedElement:null})}function Dc(e,t){return y(f({},e),{activeColor:t})}function Hc(e,t){return y(f({},e),{strokeWidth:t})}function Fc(e,t){return y(f({},e),{currentPath:[t]})}function _c(e,t){return y(f({},e),{currentPath:[...e.currentPath,t]})}function zc(e){return y(f({},e),{currentPath:[]})}function $c(e,t){if(e.currentPath.length<2&&e.activeTool!=="text")return y(f({},e),{currentPath:[]});let n={id:Rr(),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 y(f({},r),{annotations:[...e.annotations,n],currentPath:[]})}function Wc(e,t){var o;let n=f({id:(o=t.id)!=null?o:Rr(),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 y(f({},r),{annotations:[...e.annotations,n]})}function Yc(e,t){let n=hn(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 jc(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 Gc(e,t){let n=hn(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 Vc(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 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(d=>({x:d.x+l,y:d.y+a}))})})})}function Uc(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 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 Jc(e,t){let n=hn(e);return y(f({},n),{annotations:[...e.annotations,...t.annotations.map(ml)]})}function Xc(e,t){let n=new Set,r=[];for(let o of t.annotations)n.has(o.id)||(n.add(o.id),r.push(ml(o)));return y(f({},e),{annotations:r})}function Kc(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 qc(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 Zc(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 Qc(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 ed(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 td(e){return y(f({},e),{annotations:[],undoStack:[],redoStack:[],currentPath:[],selectedAnnotationIds:[],lastSelectedId:null,spacingTokenChanges:[],spacingTokenMods:[]})}function nd(e,t){return y(f({},e),{inspectedElement:t})}function od(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),C=g.styleModifications.map((S,b)=>b===l?y(f({},S),{changes:[{property:o,original:i,modified:s}],captured:!1}):S);return y(f({},g),{styleModifications:C})}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((C,S)=>S!==d):c=a.changes.map((C,S)=>S===d?y(f({},C),{modified:s}):C)}else{if(i===s)return e;p=hn(e),c=[...a.changes,{property:o,original:i,modified:s}]}if(c.length===0)return y(f({},p),{styleModifications:p.styleModifications.filter((g,C)=>C!==l)});let u=p.styleModifications.map((g,C)=>C===l?y(f({},g),{changes:c}):g);return y(f({},p),{styleModifications:u})}else{let a=hn(e),d={selector:n,element:r,changes:[{property:o,original:i,modified:s}]};return y(f({},a),{styleModifications:[...a.styleModifications,d]})}}function rd(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,C)=>C!==u):c=c.map((g,C)=>C===u?y(f({},g),{modified:p.modified}):g):c.push(p)}return c.length===0?y(f({},l),{styleModifications:l.styleModifications.filter((p,u)=>u!==a)}):y(f({},l),{styleModifications:l.styleModifications.map((p,u)=>u===a?y(f({},p),{changes:c,captured:!1}):p)})}else return y(f({},l),{styleModifications:[...l.styleModifications,{selector:n,durableSelector:r,element:o,changes:s}]})}function id(e,t){let{selector:n,property:r}=t,o=hn(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 sd(e){if(e.styleModifications.length===0)return y(f({},e),{inspectedElement:null});let t=hn(e);return y(f({},t),{styleModifications:[],inspectedElement:null})}function ld(e,t){return y(f({},e),{styleModifications:t})}function ad(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 cd(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 dd(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 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 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 pd(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 fd(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 y(f({},e),{annotations:a,styleModifications:d,selectedAnnotationIds:c,lastSelectedId:c.length>0?c[c.length-1]:null,inspectedElement:p})}function gd(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 md(e,t){return y(f({},e),{spacingTokenChanges:t})}function hd(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=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 yd(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],y(f({},n),{spacingTokenMods:l})}var bd={SET_ANNOTATING:Oc,SET_TOOL:Nc,SET_COLOR:Dc,SET_STROKE_WIDTH:Hc,START_PATH:Fc,CONTINUE_PATH:_c,CANCEL_PATH:zc,FINISH_PATH:$c,ADD_TEXT:Wc,UPDATE_TEXT:Yc,UPDATE_TEXT_SIZE:jc,DELETE_ANNOTATION:Gc,MOVE_ANNOTATION:Vc,RESIZE_ANNOTATION:Uc,PASTE_ANNOTATIONS:Jc,RESTORE_ANNOTATIONS:Xc,UNDO:Kc,REDO:qc,SELECT_ANNOTATION:Zc,UPDATE_ANNOTATION_COLOR:Qc,MARK_CAPTURED:ed,CLEAR:td,SELECT_ELEMENT:nd,MODIFY_STYLE:od,MODIFY_STYLES_BATCH:rd,CLEAR_STYLE:id,CLEAR_ALL_STYLES:sd,RESTORE_STYLE_MODIFICATIONS:ld,UPDATE_LINKED_POSITIONS:ad,CLEANUP_ORPHANED:fd,SET_ANNOTATION_STATUS:cd,SET_ANNOTATION_THREAD:dd,SET_ANNOTATION_QUESTION:ud,APPLY_RESOLUTIONS:pd,ADD_SPACING_TOKEN_CHANGE:gd,RESTORE_SPACING_TOKEN_CHANGES:md,MODIFY_SPACING_TOKEN:hd,DELETE_SPACING_TOKEN:yd};function xd(e,t){let n=bd[t.type];return n?n(e,t.payload):e}function hl(){let[e,t]=Pc(xd,Bc);return Ac(()=>{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 vd}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 Sd(e){return window.addEventListener("popstate",e),window.addEventListener("popmelt:locationchange",e),()=>{window.removeEventListener("popstate",e),window.removeEventListener("popmelt:locationchange",e)}}function wd(){return window.location.pathname}function No(){return vd(Sd,wd,()=>"/")}import{domToCanvas as Cd}from"modern-screenshot";function mi(e){let t=document.createElement("canvas").getContext("2d");return t?(t.fillStyle=e,t.fillStyle):"#888888"}function hi(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(y(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(y(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 Ed(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 kd(e,t){if(e.length===0)return[];let n=e.map(c=>({annotation:c,bounds:Ed(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,C=Math.max(0,g-t/2);i.push({top:C,bottom:C+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 Td(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 Md(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 C of c)g=Math.max(g,e.measureText(C).width);e.fillRect(l.x-u,l.y-u,g+u*2,c.length*p+u*2),e.fillStyle="#ffffff",c.forEach((C,S)=>{e.fillText(C,l.x,l.y+a+S*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=Td(s),a=kd(s,i);if(a.length===0){let c=await yl(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 yl(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 yl(e,t,n,r,o,i,s){try{let l=await Cd(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),Md(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 bl(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=hi(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 Xr,useRef as Pt,useState as dt}from"react";import{useCallback as Fo,useRef as Rd}from"react";function yi(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 bi(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 xi(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 vi(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 Id(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 Do(e){let t=window.innerWidth-e-16;return Math.max(60,Math.min(400,t))}function xl(e,t,n){let r=[];for(let o of t)r.push(...Id(e,o,n));return r}function Ho(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 vl(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=Ho(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 Sl=11,Si=4,Ld=`600 ${Sl}px system-ui, -apple-system, sans-serif`;function wi(e,t,n){return e.map(r=>({x:r.x-t,y:r.y-n}))}function Ad(e,t,n,r,o,i){let s=String(r);e.font=Ld;let a=e.measureText(s).width+Si*2,d=Sl+Si*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+Si,p+d/2)}function Pd(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 wl(){let e=Rd(null),t=Fo(()=>{let l=e.current;if(!l)return;let a=l.getContext("2d");a&&a.clearRect(0,0,l.width,l.height)},[]),n=Fo((l,a,d)=>{var C;let c=e.current;if(!c)return;let p=c.getContext("2d");if(!p)return;let g=((C=l.status)!=null?C:l.captured?"in_flight":"pending")==="pending"||d?l.color:"#999999";switch(l.type){case"freehand":bi(p,l.points,g,l.strokeWidth);break;case"line":xi(p,l.points,g,l.strokeWidth);break;case"rectangle":vi(p,l.points,g,l.strokeWidth);break;case"circle":yi(p,l.points,g,l.strokeWidth);break;case"text":l.text&&l.points[0]&&vl(p,l.points[0],l.text,g,l.fontSize,a,l.points[0].x);break}},[]),r=Fo((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":bi(u,l,d,c);break;case"line":xi(u,l,d,c);break;case"rectangle":vi(u,l,d,c);break;case"circle":yi(u,l,d,c);break}},[]),o=Fo((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),C=Math.max(p.x,u.x),S=Math.min(p.y,u.y),b=Math.max(p.y,u.y),T=(g+C)/2,N=(S+b)/2;[{x:T,y:S},{x:T,y:b},{x:g,y:N},{x:C,y:N}].forEach(M=>{c.beginPath(),c.rect(M.x-a/2,M.y-a/2,a,a),c.fill(),c.stroke()});return}if(l.type==="rectangle"||l.type==="freehand"){let p,u,g,C;if(l.type==="freehand")p=Math.min(...l.points.map(b=>b.x)),u=Math.max(...l.points.map(b=>b.x)),g=Math.min(...l.points.map(b=>b.y)),C=Math.max(...l.points.map(b=>b.y));else{let b=l.points[0],T=l.points[l.points.length-1];p=Math.min(b.x,T.x),u=Math.max(b.x,T.x),g=Math.min(b.y,T.y),C=Math.max(b.y,T.y)}[{x:p,y:g},{x:u,y:g},{x:p,y:C},{x:u,y:C}].forEach(b=>{c.beginPath(),c.rect(b.x-a/2,b.y-a/2,a,a),c.fill(),c.stroke()})}}},[]),i=Fo((l,a,d,c,p,u,g,C=0,S=0,b,T)=>{var N;if(t(),l.forEach(L=>{var Z;let M=y(f({},L),{points:wi(L.points,C,S)}),w=b==null?void 0:b.get(L.id),H=(Z=T==null?void 0:T.has(L.id))!=null?Z:!1;n(M,w,H)}),a.length>0){let L=wi(a,C,S);r(L,d,c,p)}if(u&&u.length>0&&g){let L=e.current,M=L==null?void 0:L.getContext("2d");for(let w of u){let H=l.find(Z=>Z.id===w);if(H){let Z=y(f({},H),{points:wi(H.points,C,S)});if(o(Z,g),M&&H.type!=="text"&&b&&!(H.groupId&&l.some(z=>z.groupId===H.groupId&&z.type==="text"))){let z=b.get(H.id);if(z!==void 0){let K=Pd(Z,g);if(K){let P=((N=H.status)!=null?N:H.captured?"in_flight":"pending")==="pending"?H.color:"#999999";Ad(M,K.x,K.y,z,P,g)}}}}}}},[t,n,r,o]),s=Fo(()=>{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 Bd,useRef as Od}from"react";function Cl(){let e=Od({shift:!1,cmd:!1});return Bd(()=>{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 Nd}from"react";function El(e,t,n,r,o){Nd(()=>{let i=s=>{if(e){if(e.linkedSelector)return;s.preventDefault(),s.stopPropagation();let a=s.deltaY>0?-2:2;t(d=>d?y(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 Fl,useEffect as zr,useRef as _l,useState as pr}from"react";function Lr(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 Ci(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 Ar(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 kl(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 Pr(e,t=0){var a;let n=Ci(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=Ar(s.fiber))!=null?a:e;return{name:s.name,path:r,depthIndex:i,rootElement:l}}function Tl(e,t){var i,s;let n=Ci(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=Ar(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=Ar(n[o].fiber))!=null?s:e;return{name:t,path:n.map(a=>a.name),depthIndex:o,rootElement:l}}return null}function _o(e){let t=zo(),n=[],r=new Set,o=t.currentNode;for(;o=t.nextNode();){let i=Tl(o,e);i&&!r.has(i.rootElement)&&(r.add(i.rootElement),n.push(i))}return n}function Ei(e){let t=new Map;if(e.size===0)return t;let n=new Set(e),r=zo(),o=new Set,i=r.currentNode;for(;(i=r.nextNode())&&n.size>0;)for(let s of n){let l=Tl(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 zo(){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:kl(e),tagName:e.tagName.toLowerCase()};e.id&&(t.id=e.id),e.classList.length>0&&(t.className=Array.from(e.classList).join(" "));let n=Ml(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=Lr(e);o&&(t.reactComponent=o.name);let i=Dd(e);return i&&(t.context=i),t}function Ml(e){let t="";for(let n of e.childNodes)n.nodeType===Node.TEXT_NODE&&(t+=n.textContent||"");return t.trim()}function xo(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 Dd(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 Il(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=xo(l,a);d&&!t.has(d)&&(t.add(d),n.push(yn(d)))}return n.slice(0,3)}function ki(e){if(e.length===0)return[];let t=e.map(r=>r.x),n=e.map(r=>r.y);return Il({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 Hd(e,t=30){if(e<=0)return[];let n=[],r=zo(),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 Ti(e,t=30){if(e<=0)return[];let n=[],r=zo(),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,C=s.clientHeight,S=parseFloat(a.paddingTop)||0;!Yt(s,"padding-top")&&Math.abs(S-e)<o&&n.push({x:l.left+u,y:l.top+d,width:g,height:e,direction:"vertical",property:"padding-top"});let b=parseFloat(a.paddingBottom)||0;!Yt(s,"padding-bottom")&&Math.abs(b-e)<o&&n.length<t&&n.push({x:l.left+u,y:l.top+d+C-e,width:g,height:e,direction:"vertical",property:"padding-bottom"});let T=parseFloat(a.paddingLeft)||0;!Yt(s,"padding-left")&&Math.abs(T-e)<o&&n.length<t&&n.push({x:l.left+u,y:l.top+d,width:e,height:C,direction:"horizontal",property:"padding-left"});let N=parseFloat(a.paddingRight)||0;!Yt(s,"padding-right")&&Math.abs(N-e)<o&&n.length<t&&n.push({x:l.left+u+g-e,y:l.top+d,width:e,height:C,direction:"horizontal",property:"padding-right"});let L=parseFloat(a.marginTop)||0;!Yt(s,"margin-top")&&Math.abs(L-e)<o&&n.length<t&&n.push({x:l.left,y:l.top-e,width:l.width,height:e,direction:"vertical",property:"margin-top"});let M=parseFloat(a.marginBottom)||0;!Yt(s,"margin-bottom")&&Math.abs(M-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;!Yt(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 H=parseFloat(a.marginRight)||0;!Yt(s,"margin-right")&&Math.abs(H-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 z=Array.from(s.children).filter(K=>{let E=getComputedStyle(K);return E.display!=="none"&&E.position!=="absolute"&&E.position!=="fixed"});if(z.length>=2)for(let K=0;K<z.length-1&&n.length<t;K++){let E=z[K].getBoundingClientRect(),P=z[K+1].getBoundingClientRect(),J=P.top-E.bottom;Math.abs(J-e)<o&&J>.5&&n.push({x:Math.min(E.left,P.left),y:E.bottom,width:Math.max(E.right,P.right)-Math.min(E.left,P.left),height:J,direction:"vertical",property:"gap"});let ge=P.left-E.right;Math.abs(ge-e)<o&&ge>.5&&n.push({x:E.right,y:Math.min(E.top,P.top),width:ge,height:Math.max(E.bottom,P.bottom)-Math.min(E.top,P.top),direction:"horizontal",property:"gap"})}}}return n}function Br(e){return typeof e=="string"?{value:e}:e}var Ll={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 Rl(e,t){let n=Ll[t];return n?n.includes(e):!1}function Fd(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 _d(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 Mi(e,t=30){let n=parseFloat(e.value);if(isNaN(n)||n<=0)return[];if(e.bindings&&e.bindings.length>0){let o=[],i=zo(),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(!Fd(d,c))continue;let p=_d(c);if(p&&!(e.property&&!Rl(p,e.property))){o.push({element:l,property:p});break}}}return o}let r=Hd(n,t*2);return e.property?r.filter(o=>Rl(o.property,e.property)).slice(0,t):r.slice(0,t)}function Ii(e,t=30){let n=Mi(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(C=>{let S=getComputedStyle(C);return S.display!=="none"&&S.position!=="absolute"&&S.position!=="fixed"});for(let C=0;C<g.length-1&&r.length<t;C++){let S=g[C].getBoundingClientRect(),b=g[C+1].getBoundingClientRect(),T=b.top-S.bottom;T>.5&&r.push({x:Math.min(S.left,b.left),y:S.bottom,width:Math.max(S.right,b.right)-Math.min(S.left,b.left),height:T,direction:"vertical",property:"gap"});let N=b.left-S.right;N>.5&&r.push({x:S.right,y:Math.min(S.top,b.top),width:N,height:Math.max(S.bottom,b.bottom)-Math.min(S.top,b.top),direction:"horizontal",property:"gap"})}break}}}return r}function Al(e,t){let n=new Set,r=sr(t);for(let o of e){let i=Bl[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 Pl(e){let t=new Set;for(let n of e)for(let[r,o]of Object.entries(Ll))if(o.includes(n.property)){t.add(r);break}if(t.size===1)return[...t][0]}function Ri(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 zd={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=zd[e])!=null?t:`[${e}px]`}var Bl={"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 $d(e,t,n,r){let o=Bl[t];if(!o)return null;let i=sr(n);for(let s of o){let l=new RegExp("(?:^|\\s)((?:[\\w-]+:)*"+s+"-(?:"+Wd(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 Wd(e){return e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function Ol(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=Lr(i.element),d=i.element.className||"",c=$d(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 Li(e,t){if(e instanceof HTMLElement){let r=e.style.getPropertyValue(t);if(r)return r}let n=Yd(e,t);return n&&n.includes("var(")?n:lr(e,t)}function Yd(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 Or(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 Nr(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 jd(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 vo(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 jd(n)}function Ai(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 $o(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 So(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 Pi(e){for(let t of e.childNodes)if(t.nodeType===Node.TEXT_NODE&&(t.textContent||"").trim().length>0)return!0;return!1}function Wo(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 Bi(e,t,n){e instanceof HTMLElement&&e.style.removeProperty(t)}function Dr(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 Oi(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)Bi(n,o.property,o.original)}function Hr(e){for(let t of e){let n=pn(t.selector);if(n)for(let r of t.changes)Bi(n,r.property,r.original)}}function Dl(e,t,n,r){if(e)for(let o of e){if(o instanceof CSSGroupingRule){Dl(o.cssRules,t,n,r);continue}if(o instanceof CSSStyleRule){let i=o.selectorText.toLowerCase();(i===":root"||i==="html"||i==="*"||i.includes(":root"))&&Gd(o.style,t,n,r)}}}function Gd(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();Hl(s)&&r.push({name:i,value:s,usage:`var(${i})`})}}}var Fr=null,Vd=5e3;function Ni(){if(Fr&&Date.now()-Fr.timestamp<Vd)return Fr.variables;let e=[],t=new Set,n=getComputedStyle(document.documentElement);try{for(let i of document.styleSheets)try{Dl(i.cssRules||i.rules,n,t,e)}catch(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();Hl(l)&&e.push({name:s,value:l,usage:`var(${s})`})}}let o=e.sort((i,s)=>i.name.localeCompare(s.name));return Fr={variables:o,timestamp:Date.now()},o}function Hl(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=Nl(e);if(!n)return null;for(let r of t){let o=Nl(r.value);if(o&&n===o)return r}return null}function Nl(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 wo,jsx as at,jsxs as zn}from"react/jsx-runtime";var Ln=22,no=12,Ud=3,Jd=250,_r=["reviewing","considering","thinking","zhuzhing","iterating","tweaking","reflecting","noodling","pondering","finessing","polishing","riffing"],Xd=3e3;function Kd(s){var l=s,{left:e,top:t,avoidBottom:n,style:r,children:o}=l,i=to(l,["left","top","avoidBottom","style","children"]);let a=e+no,d=t+no,c=n!==void 0?`${n}px`:"100vh";return at("div",y(f({"data-devtools":"badge-hit-area"},i),{style:f({position:"fixed",left:e,top:t,padding:no},r),children:at("div",{style:{transform:`translate(min(0px, calc(100vw - ${a}px - 100%)), min(0px, calc(${c} - ${d}px - 100%)))`},children:o})}))}function zl({annotations:e,supersededAnnotations:t,inFlightIds:n,scrollX:r,scrollY:o,annotationGroupMap:i,onViewThread:s,onSelectAnnotation:l,onHoverAnnotation:a,canvasRef:d}){var w,H,Z,D,z,K,E;let[c,p]=pr(0),[u,g]=pr(()=>Math.floor(Math.random()*_r.length)),C=!!(n&&n.size>0);zr(()=>{if(!C)return;let P=setInterval(()=>{p(ge=>(ge+1)%Ud)},Jd),J=setInterval(()=>{g(ge=>(ge+1)%_r.length)},Xd);return()=>{clearInterval(P),clearInterval(J)}},[C]);let S=[];for(let P of e){if(P.type!=="text"||!P.text||!P.points[0]||t.has(P))continue;let J=P.groupId?e.filter(Be=>Be.groupId===P.groupId):[P],ge=!!(n&&(n.has(P.id)||J.some(Be=>n.has(Be.id)))),ve=(w=P.status)!=null?w:"pending",ye=J.some(Be=>Be.status==="resolved"||Be.status==="needs_review"),ae=J.some(Be=>Be.threadId);if(!ge&&ve!=="resolved"&&ve!=="needs_review"&&!ye&&!ae)continue;let ze=P.threadId||((H=J.find(Be=>Be.threadId))==null?void 0:H.threadId),Me=ve==="needs_review"||J.some(Be=>Be.status==="needs_review"),ne=J.reduce((Be,De)=>{var $;return Be+(($=De.replyCount)!=null?$:0)},0),He=P.points[0],Ne=P.fontSize||12,Ve=Ne*1.4,$e=i.get(P.id),Ie=P.text.replace(/\n/g," "),st=$e!==void 0?$e+". "+Ie:Ie,ct=(D=(Z=d==null?void 0:d.current)==null?void 0:Z.getContext("2d"))!=null?D:document.createElement("canvas").getContext("2d");if(!ct)continue;ct.font=`${Ne}px ${Jt}`;let _=He.x-r,xe=Do(_),ce=Ho(ct,st,xe),Se=ct.measureText(ce).width;S.push({id:P.id,threadId:ze,linkedSelector:P.linkedSelector||((z=J.find(Be=>Be.linkedSelector))==null?void 0:z.linkedSelector),x:He.x+Se+4,y:He.y-4,size:Ve+8,color:P.color,isInFlight:ge,isNeedsReview:Me,replyCount:ne})}if(S.length===0)return null;let b=2,T=(E=(K=d==null?void 0:d.current)==null?void 0:K.getContext("2d"))!=null?E:document.createElement("canvas").getContext("2d"),N=S.map(P=>{var ae;let J;P.isInFlight?J=(ae=_r[u])!=null?ae:"thinking":P.replyCount>0?J=`${P.replyCount} ${P.replyCount===1?"reply":"replies"}`:P.threadId?J="1 reply":J="Cancelled";let ge=11,ve=4,ye=J.length*7.2;return T&&(T.font=`12px ${Jt}`,ye=T.measureText(J).width),4+ge+ve+ye+4}),L=typeof window!="undefined"?window.innerHeight:9999,M=[];for(let P=0;P<S.length;P++){let J=S[P].y-o,ge=Math.min(J,L-Ln),ve=ge+Ln,ae=S[P].x-r;for(let ze=0;ze<P;ze++){let Me=S[ze].y-o,ne=Math.min(Me,L-Ln),He=ne+Ln;if(!(ge<He&&ve>ne))continue;let Ve=M[ze]+N[ze];ae<Ve+b&&(ae=Ve+b)}M.push(ae)}return at(wo,{children:S.map((P,J)=>{let ge=!!P.threadId;return at(Kd,{left:M[J]-no,top:P.y-o-no,onMouseDown:ge?ve=>ve.stopPropagation():void 0,onClick:ge?ve=>{if(ve.stopPropagation(),l==null||l(P.id),s==null||s(P.threadId),P.linkedSelector)try{let ye=document.querySelector(P.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(P.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:P.size,display:"flex",alignItems:"center",backgroundColor:P.color,fontFamily:Jt,fontSize:12,color:"#ffffff",userSelect:"none",padding:`0 ${4}px`,gap:4,whiteSpace:"nowrap"},children:P.isInFlight?zn(wo,{children:[at("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:"currentColor",style:{verticalAlign:"middle"},children:c===1?zn(wo,{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(wo,{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:_r[u]})]}):zn(wo,{children:[P.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:P.replyCount>0?`${P.replyCount} ${P.replyCount===1?"reply":"replies"}`:P.threadId?"1 reply":"Cancelled"})]})})},P.id)})})}function Di({inFlightSelectorColors:e,animated:t=!0}){let[n,r]=pr([]);return zr(()=>{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(wo,{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 $l({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],C=u.fontSize||12,S=C*1.4,b=i.get(u.id),T=u.text.replace(/\n/g," "),N=b!==void 0?b+". "+T:T,M=document.createElement("canvas").getContext("2d");if(!M)continue;M.font=`${C}px ${Jt}`;let w=g.x-n,H=Do(w),Z=Ho(M,N,H),D=M.measureText(Z).width;c.push({annotation:p,x:g.x+D+4,y:g.y-4,size:S+8})}}return c.length===0?null:at(wo,{children:c.map(({annotation:p,x:u,y:g,size:C})=>at(qd,{annotation:p,x:u-n,y:g-r,size:C,onReply:o,onHoverAnnotation:l},`question-${p.threadId}`))})}function qd({annotation:e,x:t,y:n,size:r,onReply:o,onHoverAnnotation:i}){let[s,l]=pr(!1),[a,d]=pr(""),c=_l(null),p=_l(null);zr(()=>{s&&c.current&&c.current.focus()},[s]),zr(()=>{if(!s)return;let b=N=>{p.current&&!N.composedPath().includes(p.current)&&l(!1)},T=N=>{N.key==="Escape"&&l(!1)};return document.addEventListener("mousedown",b),document.addEventListener("keydown",T),()=>{document.removeEventListener("mousedown",b),document.removeEventListener("keydown",T)}},[s]);let u=Fl(()=>{!a.trim()||!e.threadId||(o(e.threadId,a.trim()),d(""),l(!1))},[a,e.threadId,o]),g=Fl(b=>{b.key==="Enter"&&(b.metaKey||b.ctrlKey)&&(b.preventDefault(),u())},[u]),C=s?t:t-no,S=s?n:n-no;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, ${C}px)`,top:`max(0px, ${S}px)`,padding:s?0:no,transform:`translate(min(0px, calc(100vw - max(0px, ${C}px) - 100%)), min(0px, calc(100vh - max(0px, ${S}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:b=>d(b.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 $r(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 Wl,useLayoutEffect as Zd,useState as Yl}from"react";import{jsx as Hi,jsxs as Gl}from"react/jsx-runtime";function Qd(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 jl=["top-left","top-right","bottom-right","bottom-left"];function Vl({element:e,radius:t,accentColor:n,hoveredCorner:r,draggingCorner:o,cursorViewport:i}){let[s,l]=Yl(null),[a,d]=Yl(!1);if(Wl(()=>{let T=M=>{(M.key==="Meta"||M.key==="Control")&&d(!0)},N=M=>{(M.key==="Meta"||M.key==="Control")&&d(!1)},L=()=>d(!1);return window.addEventListener("keydown",T,!0),window.addEventListener("keyup",N,!0),window.addEventListener("blur",L),()=>{window.removeEventListener("keydown",T,!0),window.removeEventListener("keyup",N,!0),window.removeEventListener("blur",L)}},[]),Wl(()=>{if(!e){l(null);return}let T=()=>{l(e.getBoundingClientRect())};return T(),window.addEventListener("scroll",T,{passive:!0}),window.addEventListener("resize",T,{passive:!0}),()=>{window.removeEventListener("scroll",T),window.removeEventListener("resize",T)}},[e]),Zd(()=>{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=Qd(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"]}},C=new Set,S=o!=null?o:r;if(S)if(a)C.add(S);else for(let T of jl)C.add(T);let b={position:"fixed",top:s.top,left:s.left,width:c,height:p,pointerEvents:"none",zIndex:9996,overflow:"visible"};return Gl("div",{"data-devtools":"border-radius-handles",style:b,children:[Gl("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${c} ${p}`,children:[Hi("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"}),jl.map(T=>{let N=g[T],L=C.has(T);return Hi("circle",{cx:N.x,cy:N.y,r:T===(o!=null?o:r)?3:2.5,fill:n,stroke:"#ffffff",strokeWidth:T===(o!=null?o:r)?4:2,paintOrder:"stroke"},T)})]}),i&&S&&(()=>{let T=Math.round(t[S]);return Hi("div",{style:{position:"fixed",left:i.x+8,top:i.y-28,background:n,color:"#fff",fontSize:11,fontWeight:600,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',lineHeight:1,padding:"4px 4px",borderRadius:0,whiteSpace:"nowrap",pointerEvents:"none",zIndex:9997},children:T})})()]})}import{useEffect as eu,useState as tu}from"react";function Yo(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 nu,jsx as Fi,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]=tu(null);if(eu(()=>{if(!e){a(null);return}let w=()=>{let H=e.getBoundingClientRect();a(H)};return w(),window.addEventListener("scroll",w,{passive:!0}),window.addEventListener("resize",w,{passive:!0}),()=>{window.removeEventListener("scroll",w),window.removeEventListener("resize",w)}},[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:Yo(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,C=g?`<${g}> ${c}${p}${u}`:`${c}${p}${u}`,S=22,b=l.height>=window.innerHeight,T=b?0:l.top>=S?l.top-S:l.bottom,N=b?{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:T,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},M=!s&&fr("div",{"data-devtools":"tooltip",style:N,children:[o!==void 0&&fr("span",{children:[o,"."]}),Fi("span",{style:{overflow:"hidden",textOverflow:"ellipsis",flex:1,minWidth:0},children:C}),i!==void 0&&i>0&&fr("span",{style:{opacity:.8},children:["(",i," ",i===1?"change":"changes",")"]})]});return fr(nu,{children:[fr("div",{"data-devtools":"highlight",style:d,children:[Fi("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},children:Fi("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"}))}),b&&M]}),!b&&M]})}import{useEffect as Ul,useLayoutEffect as ou,useState as _i}from"react";import{jsx as Vn,jsxs as $i}from"react/jsx-runtime";function zi(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 Wi({element:e,gap:t,accentColor:n,hoveredAxis:r,draggingAxis:o,cursorViewport:i,isAutoGap:s=!1,refreshKey:l=0}){let[a,d]=_i(null),[c,p]=_i([]),[u,g]=_i(!1);if(Ul(()=>{let D=E=>{(E.key==="Meta"||E.key==="Control")&&g(!0)},z=E=>{(E.key==="Meta"||E.key==="Control")&&g(!1)},K=()=>g(!1);return window.addEventListener("keydown",D,!0),window.addEventListener("keyup",z,!0),window.addEventListener("blur",K),()=>{window.removeEventListener("keydown",D,!0),window.removeEventListener("keyup",z,!0),window.removeEventListener("blur",K)}},[]),Ul(()=>{if(!e){d(null),p([]);return}let D=()=>{d(e.getBoundingClientRect()),p(vo(e))};return D(),window.addEventListener("scroll",D,{passive:!0}),window.addEventListener("resize",D,{passive:!0}),()=>{window.removeEventListener("scroll",D),window.removeEventListener("resize",D)}},[e]),ou(()=>{e&&(d(e.getBoundingClientRect()),p(vo(e)))},[e,t.row,t.column,l]),!a||c.length===0)return null;let C=a.width,S=a.height,b="pm-gap-stripe-pattern",T=zi(n,.25),N=zi(n,.1),L=zi(n,.2),M=8,w=2,H={position:"fixed",top:a.top,left:a.left,width:C,height:S,pointerEvents:"none",zIndex:9996,overflow:"visible"},Z=o!=null?o:r;return $i("div",{"data-devtools":"gap-handles",style:H,children:[$i("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${C} ${S}`,children:[Vn("defs",{children:Vn("pattern",{id:b,patternUnits:"userSpaceOnUse",width:"4",height:"4",patternTransform:"rotate(45)",children:Vn("line",{x1:"0",y1:"0",x2:"0",y2:"4",stroke:T,strokeWidth:"1.5"})})}),Vn("rect",{x:"0.5",y:"0.5",width:Math.max(0,C-1),height:Math.max(0,S-1),fill:"none",stroke:L,strokeWidth:"1"}),c.map((D,z)=>{let K=D.x-a.left,E=D.y-a.top,P=D.w,J=D.h,ge=u?D.axis===Z:!0;return(D.axis==="row"?t.row:t.column)===0?null:$i("g",{opacity:ge?1:.6,children:[Vn("rect",{x:K,y:E,width:P,height:J,fill:N}),Vn("rect",{x:K,y:E,width:P,height:J,fill:`url(#${b})`})]},z)}),Z&&(()=>{let D=c.filter(He=>He.axis===Z);if(D.length===0)return null;let z=D[0];if(i&&D.length>1){let He=1/0;for(let Ne of D){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,z=Ne)}}let K=z.x-a.left,E=z.y-a.top,P=z.w,J=z.h,ge=K+P/2,ve=E+J/2;if(s)return Vn("circle",{cx:ge,cy:ve,r:1.5,fill:n,stroke:"#ffffff",strokeWidth:4,paintOrder:"stroke"});let ye=Z==="column",ae=ye?w:M,ze=ye?M:w,Me=ge-ae/2,ne=ve-ze/2;return Vn("rect",{x:Me,y:ne,width:ae,height:ze,fill:n,stroke:"#ffffff",strokeWidth:4,paintOrder:"stroke"})})()]}),i&&Z&&(()=>{let D=s?"auto":String(Math.round(Z==="row"?t.row:t.column));return Vn("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:D})})()]})}import{useCallback as au,useEffect as cu,useState as du}from"react";import{useEffect as ru,useState as Jl}from"react";var iu=3,su=250,Yi=["reviewing","considering","thinking","zhuzhing","iterating","tweaking","reflecting","noodling","pondering","finessing","polishing","riffing"],lu=3e3;function Xl(e){let[t,n]=Jl(0),[r,o]=Jl(()=>Math.floor(Math.random()*Yi.length));return ru(()=>{if(!e)return;let i=setInterval(()=>n(l=>(l+1)%iu),su),s=setInterval(()=>o(l=>(l+1)%Yi.length),lu);return()=>{clearInterval(i),clearInterval(s)}},[e]),{charIndex:t,word:Yi[r]}}import{Fragment as ji,jsx as Cn,jsxs as jo}from"react/jsx-runtime";function uu(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 Kl=22,Gi=12;function pu(s){var l=s,{left:e,top:t,avoidBottom:n,style:r,children:o}=l,i=to(l,["left","top","avoidBottom","style","children"]);let a=n!==void 0?`${n}px`:"100vh";return Cn("div",y(f({"data-devtools":"badge-hit-area"},i),{style:f({position:"fixed",left:`max(0px, ${e}px)`,top:`max(0px, ${t}px)`,padding:Gi,transform:`translate(min(0px, calc(100vw - max(0px, ${e}px) - 100%)), min(0px, calc(${a} - max(0px, ${t}px) - 100%)))`},r),children:o}))}function ql({styleModifications:e,isInspecting:t,accentColor:n,annotationGroupCount:r,dispatch:o,inFlightSelectors:i,toolbarRef:s,onHoverSelector:l}){var N;let[a,d]=du([]),c=i&&i.size>0,{charIndex:p,word:u}=Xl(!!c);cu(()=>{if(t){d([]);return}let L=null,M=()=>{let Z=[];e.forEach((D,z)=>{let K=pn(D.selector);if(!K)return;let E=K.getBoundingClientRect();Z.push({selector:D.selector,modIndex:z,top:E.top>=Kl?E.top-Kl:E.bottom,left:E.left,label:uu(D),changeCount:D.changes.length,annotationNumber:r+z+1})}),d(Z)},w=()=>{L&&cancelAnimationFrame(L),L=requestAnimationFrame(M)};M(),window.addEventListener("scroll",w,!0),window.addEventListener("resize",w,!0);let H=new MutationObserver(w);return H.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),H.disconnect(),L&&cancelAnimationFrame(L)}},[e,t,r]);let g=au(L=>{let M=e[L];if(!M)return;let w=pn(M.selector);w&&(o({type:"SELECT_ANNOTATION",payload:{id:null}}),o({type:"SET_TOOL",payload:"inspector"}),o({type:"SELECT_ELEMENT",payload:{el:w,info:M.element}}))},[e,o]);if(a.length===0)return null;let C=(N=s==null?void 0:s.current)==null?void 0:N.getBoundingClientRect(),S=C?C.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},T={overflow:"hidden",textOverflow:"ellipsis",flex:1,minWidth:0};return Cn(ji,{children:a.map(L=>{let M=i==null?void 0:i.has(L.selector);return Cn(pu,{left:L.left-Gi,top:L.top-Gi,avoidBottom:S,onClick:()=>g(L.modIndex),onMouseEnter:l?()=>l(L.selector):void 0,onMouseLeave:l?()=>l(null):void 0,style:{zIndex:1e4,cursor:"pointer",pointerEvents:"auto"},children:jo("div",{"data-devtools":"badge",style:y(f({},b),{backgroundColor:M?"#999999":n}),children:[jo("span",{children:[L.annotationNumber,"."]}),Cn("span",{style:T,children:L.label}),jo("span",{style:{opacity:.8},children:["(",L.changeCount," ",L.changeCount===1?"change":"changes",")"]}),M&&jo("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?jo(ji,{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"})]}):jo(ji,{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]})]})},L.selector)})})}import{useEffect as fu,useState as gu}from"react";import{Fragment as hu,jsx as Zl}from"react/jsx-runtime";function mu(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 Ql({styleModifications:e,accentColor:t}){let[n,r]=gu([]);if(fu(()=>{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=So(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=mu(t,.2);return Zl(hu,{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 ea,useLayoutEffect as yu,useState as ta}from"react";import{jsx as oo,jsxs as Ui}from"react/jsx-runtime";function Vi(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 bu={top:"bottom",bottom:"top",left:"right",right:"left"};function Ji({element:e,padding:t,accentColor:n,hoveredSide:r,draggingSide:o,cursorViewport:i,refreshKey:s}){let[l,a]=ta(null),[d,c]=ta(!1);if(ea(()=>{let P=ve=>{(ve.key==="Meta"||ve.key==="Control")&&c(!0)},J=ve=>{(ve.key==="Meta"||ve.key==="Control")&&c(!1)},ge=()=>c(!1);return window.addEventListener("keydown",P,!0),window.addEventListener("keyup",J,!0),window.addEventListener("blur",ge),()=>{window.removeEventListener("keydown",P,!0),window.removeEventListener("keyup",J,!0),window.removeEventListener("blur",ge)}},[]),ea(()=>{if(!e){a(null);return}let P=()=>{a(e.getBoundingClientRect())};return P(),window.addEventListener("scroll",P,{passive:!0}),window.addEventListener("resize",P,{passive:!0}),()=>{window.removeEventListener("scroll",P),window.removeEventListener("resize",P)}},[e]),yu(()=>{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:C,bottom:S,left:b}=t,T="pm-stripe-pattern",N=Vi(n,.25),L=Vi(n,.1),M=Vi(n,.2),w=8,H=2,Z={position:"fixed",top:l.top,left:l.left,width:p,height:u,pointerEvents:"none",zIndex:9996,overflow:"visible"},D=["top","right","bottom","left"],z={top:`0,0 ${p},0 ${p-C},${g} ${b},${g}`,right:`${p},0 ${p},${u} ${p-C},${u-S} ${p-C},${g}`,bottom:`0,${u} ${b},${u-S} ${p-C},${u-S} ${p},${u}`,left:`0,0 ${b},${g} ${b},${u-S} 0,${u}`},K={top:{x:p/2-w/2,y:g/2-H/2,w,h:H},bottom:{x:p/2-w/2,y:u-S/2-H/2,w,h:H},left:{x:b/2-H/2,y:u/2-w/2,w:H,h:w},right:{x:p-C/2-H/2,y:u/2-w/2,w:H,h:w}},E=new Set;return o?E.add(o):r&&(E.add(r),d||E.add(bu[r])),Ui("div",{"data-devtools":"padding-handles",style:Z,children:[Ui("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${p} ${u}`,children:[oo("defs",{children:oo("pattern",{id:T,patternUnits:"userSpaceOnUse",width:"4",height:"4",patternTransform:"rotate(45)",children:oo("line",{x1:"0",y1:"0",x2:"0",y2:"4",stroke:N,strokeWidth:"1.5"})})}),oo("rect",{x:"0.5",y:"0.5",width:Math.max(0,p-1),height:Math.max(0,u-1),fill:"none",stroke:M,strokeWidth:"1"}),D.map(P=>{if(t[P]<=0)return null;let ge=E.has(P);return Ui("g",{opacity:ge?1:.6,children:[oo("polygon",{points:z[P],fill:L}),oo("polygon",{points:z[P],fill:`url(#${T})`})]},P)}),D.map(P=>{let J=K[P],ge=E.has(P);return oo("rect",{x:J.x,y:J.y,width:J.w,height:J.h,fill:n,stroke:"#ffffff",strokeWidth:ge?4:2,paintOrder:"stroke"},`handle-${P}`)})]}),i&&(r||o)&&(()=>{let P=o!=null?o:r,J=Math.round(t[P]);return oo("div",{style:{position:"fixed",left:i.x+8,top:i.y-28,background:n,color:"#fff",fontSize:11,fontWeight:600,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',lineHeight:1,padding:"4px 4px",borderRadius:0,whiteSpace:"nowrap",pointerEvents:"none",zIndex:9997},children:J})})()]})}import{useCallback as Wn,useEffect as An,useMemo as Jr,useRef as vn,useState as tn}from"react";import{Check as Ur,ChevronDown as ns,MoveHorizontal as fa,RotateCcw as Yu,Shrink as ju,X as Gu}from"lucide-react";var xu="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMicgaGVpZ2h0PScxMic+PGRlZnM+PHBhdHRlcm4gaWQ9J2QnIHdpZHRoPSc0JyBoZWlnaHQ9JzQnIHBhdHRlcm5Vbml0cz0ndXNlclNwYWNlT25Vc2UnPjxwYXRoIGQ9J00tMSwxIGwyLC0yIE0wLDQgbDQsLTQgTTMsNSBsMiwtMicgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPScuNScvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9JzEyJyBoZWlnaHQ9JzEyJyBmaWxsPSd1cmwoI2QpJy8+PC9zdmc+",ro={borderWidth:3,borderStyle:"solid",borderImage:`url("${xu}") 4 / 1.9 / 0 round`};var Wr={"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 Go(e){var t,n;return(n=(t=Wr[e])==null?void 0:t[0])!=null?n:"px"}function io(e){let t=e.match(/^([\d.-]+)(.*)$/);return t?{num:parseFloat(t[1]),unit:t[2]||""}:{num:0,unit:""}}function Yr(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}=io(n);return`${s}${l||Go(t)}`}return`${s}${Go(t)}`}return o}function Xi(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 vu,useEffect as Su,useRef as na,useState as wu}from"react";import{Plus as oa,X as Cu}from"lucide-react";import{jsx as xn,jsxs as Co}from"react/jsx-runtime";var jr=[{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 Eu(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 Ki(e){return e.length===0?"none":e.map(t=>{var o;let n=jr.find(i=>i.name===t.name),r=(o=n==null?void 0:n.unit)!=null?o:"";return`${t.name}(${t.value}${r})`}).join(" ")}function ra({value:e,onChange:t,accentColor:n,modified:r,panelContentRef:o}){let i=Eu(e),[s,l]=wu(!1),a=na(null),d=na(null);Su(()=>{if(!s)return;let L=M=>{a.current&&!M.composedPath().includes(a.current)&&l(!1)};return document.addEventListener("mousedown",L,!0),()=>document.removeEventListener("mousedown",L,!0)},[s]);let c=jr.filter(L=>!i.some(M=>M.name===L.name)),p=L=>{let M=[...i,{name:L.name,value:L.defaultValue}];t(Ki(M)),l(!1)},u=L=>{let M=i.filter((w,H)=>H!==L);t(Ki(M))},g=(L,M)=>{let w=i.map((H,Z)=>Z===L?y(f({},H),{value:M}):H);t(Ki(w))},C={width:"100%",padding:"4px 8px",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',border:"none",borderRadius:2,outline:"none",backgroundColor:"transparent"},S=vu(L=>{var E;if(!d.current)return{position:"fixed",top:0,left:0};let M=d.current.getBoundingClientRect(),w=d.current.closest('[data-devtools="panel"]'),H=w?w.getBoundingClientRect():{top:0,left:0,bottom:9999},Z=(E=o==null?void 0:o.current)==null?void 0:E.getBoundingClientRect(),D=L*24+8,K=H.bottom-M.bottom<D;return y(f({position:"fixed"},K?{bottom:H.bottom-M.top+2-H.top}:{top:M.bottom+2-H.top}),{left:Z?Z.left+4-H.left:M.left-H.left,width:Z?Z.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)"},T={display:"block",width:"100%",padding:"4px 10px",border:"none",backgroundColor:"transparent",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#334155",cursor:"pointer",textAlign:"left"},N=L=>xn("div",{ref:a,style:f(f({},S(L.length)),b),children:L.map(M=>xn("button",{type:"button",onClick:()=>p(M),style:T,onMouseEnter:w=>{w.currentTarget.style.backgroundColor="rgba(0,0,0,0.05)"},onMouseLeave:w=>{w.currentTarget.style.backgroundColor="transparent"},children:M.label},M.name))});return i.length===0?Co("div",{children:[Co("div",{style:{display:"flex",alignItems:"center",gap:4},children:[xn(Un,{modified:!1,children:xn("input",{type:"text",value:"",placeholder:"\u2014",readOnly:!0,style:y(f({},C),{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(oa,{size:12})})]}),s&&N(jr)]}):Co("div",{style:{display:"flex",flexDirection:"column",gap:4,position:"relative"},children:[i.map((L,M)=>{let w=jr.find(H=>H.name===L.name);return w?Co("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:w.label}),xn(Un,{modified:r,children:Co("div",{style:{display:"flex",alignItems:"center",gap:4,padding:"0 4px"},children:[xn("input",{type:"range",min:w.min,max:w.max,step:w.step,value:L.value,onChange:H=>g(M,parseFloat(H.target.value)),style:{flex:1,height:2,appearance:"none",WebkitAppearance:"none",background:`linear-gradient(to right, ${n} ${(L.value-w.min)/(w.max-w.min)*100}%, rgba(0,0,0,0.1) ${(L.value-w.min)/(w.max-w.min)*100}%)`,borderRadius:1,outline:"none",cursor:"pointer"}}),xn("input",{type:"number",min:w.min,max:w.max,step:w.step,value:w.unit==="px"||w.unit==="deg"?Math.round(L.value):Math.round(L.value*100)/100,onChange:H=>g(M,parseFloat(H.target.value)||0),style:y(f({},C),{width:44,padding:"2px 4px",textAlign:"right",flexShrink:0})}),w.unit&&xn("span",{style:{fontSize:9,color:"#94a3b8",fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',flexShrink:0,width:16},children:w.unit})]})}),xn("button",{type:"button",onClick:()=>u(M),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(Cu,{size:10})})]},L.name):null}),c.length>0&&Co("div",{children:[Co("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(oa,{size:10}),"Add filter"]}),s&&N(c)]})]})}import{useCallback as Uo,useEffect as Iu,useRef as Gr,useState as ia}from"react";import{AlignHorizontalSpaceAround as Ru,AlignVerticalSpaceAround as Lu,Columns3 as Au,Grid2x2 as Pu,RectangleHorizontal as Bu,Rows3 as Ou,UnfoldHorizontal as sa,UnfoldVertical as la}from"lucide-react";import{useCallback as ku,useEffect as Tu,useRef as gr}from"react";import{jsx as Mu}from"react/jsx-runtime";var qi=[0,1,2,4,8,12,16,20,24,28,32];function Vo({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),C=gr(o),S=gr(i),b=gr(!1);C.current=o,S.current=i,Tu(()=>{let N=M=>{let w=g.current;if(!w)return;w.hasMoved=!0,b.current=M.shiftKey;let H=w.unit==="rem"||w.unit==="em"?.1:1;w.accum+=M.movementX*H;let Z=Math.max(0,Math.round((w.startValue+w.accum)*10)/10);if(M.shiftKey&&a){let D=w.unit==="rem"||w.unit==="em"?parseFloat(getComputedStyle(document.documentElement).fontSize)||16:1,z=w.unit==="rem"||w.unit==="em"?Z*D:Z,K=a[a.length-1];for(let E=0;E<a.length-1;E++){let P=a[E],J=a[E+1];if(z<=(P+J)/2){K=P;break}if(z<J){K=J;break}}z>a[a.length-1]&&(K=Math.round(z/8)*8),Z=w.unit==="rem"||w.unit==="em"?Math.round(K/D*1e3)/1e3:K}n==null||n(`${Z}${w.unit}`)},L=()=>{let M=g.current;if(!M)return;let w=Math.max(0,Math.round((M.startValue+M.accum)*10)/10);if(b.current&&a){let Z=M.unit==="rem"||M.unit==="em"?parseFloat(getComputedStyle(document.documentElement).fontSize)||16:1,D=M.unit==="rem"||M.unit==="em"?w*Z:w,z=a[a.length-1];for(let K=0;K<a.length-1;K++){let E=a[K],P=a[K+1];if(D<=(E+P)/2){z=E;break}if(D<P){z=P;break}}D>a[a.length-1]&&(z=Math.round(D/8)*8),w=M.unit==="rem"||M.unit==="em"?Math.round(z/Z*1e3)/1e3:z}let H=M.hasMoved&&w!==M.startValue;g.current=null,document.exitPointerLock(),H?t(`${w}${M.unit}`):M.hasMoved?n==null||n(`${M.startValue}${M.unit}`):S.current&&C.current&&C.current(),r==null||r()};return document.addEventListener("mousemove",N),document.addEventListener("mouseup",L),()=>{document.removeEventListener("mousemove",N),document.removeEventListener("mouseup",L)}},[t,n,r]);let T=ku(N=>{var w;if(N.button!==0)return;N.preventDefault();let L=io(e),M=L.unit&&L.unit!=="px"?L.unit:l;g.current={startValue:L.num,unit:M,accum:0,hasMoved:!1},(w=u.current)==null||w.requestPointerLock()},[e,l]);return Mu("span",{ref:u,onMouseDown:T,title:i?"Click to reset \xB7 Drag to scrub":"Drag to scrub",style:f({color:i?s||"#3b82f6":d||"#999",padding:"0 4px",display:"flex",alignItems:"center",cursor:"ew-resize"},c),children:p})}import{Fragment as Zi,jsx as Ae,jsxs as Xt}from"react/jsx-runtime";function Nu({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:y(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:y(f({},en),{width:32,textAlign:"center",padding:2})})]})})}function aa({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:C,onUnitCycle:S}){let b=c,T=t("display"),N=t("flex-direction"),L=ca(T,N),M=T==="flex"||T==="inline-flex",w=T==="grid",H=M||w,Z=t("width"),D=t("height"),z=o("width")?Z:Or(e,"width"),K=o("height")?D:Or(e,"height"),E=Qi(Z,z),P=Qi(D,K),J=t("min-width"),ge=t("max-width"),ve=t("min-height"),ye=t("max-height"),ae=Jo(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]=ia(!1),_=d!==null,xe=_||st,ce=_?.3:st?.65:1,Se=({mode:Q,icon:Fe,active:tt})=>Ae("button",{type:"button",onClick:()=>da(Q,r),style:{flex:1,display:"flex",alignItems:"center",justifyContent:"center",padding:"6px 8px",border:"none",borderRadius:2,backgroundColor:tt?Yo(u,.15):"transparent",color:tt?u:"#64748b",cursor:"pointer",fontSize:14},children:Fe}),Be=(Q,Fe,tt)=>{tt==="fixed"?r(Q,Fe):r(Q,Vr(tt,Fe))},De=Q=>{let Fe=Jo(t("padding")),tt=Q||"0";r("padding",`${Fe.top} ${tt} ${Fe.bottom} ${tt}`)},$=Q=>{let Fe=Jo(t("padding")),tt=Q||"0";r("padding",`${tt} ${Fe.right} ${tt} ${Fe.left}`)},[re,se]=ia({}),be=Uo((Q,Fe)=>tt=>{Fe(tt),se(In=>y(f({},In),{[Q]:tt}))},[]),pe=Uo(Q=>{se(Fe=>{let tt=f({},Fe);return delete tt[Q],tt})},[]),ke=Uo(Q=>{let Fe=Jo(t("padding"));Ge(e,"padding",`${Fe.top} ${Q} ${Fe.bottom} ${Q}`)},[e,t]),oe=Uo(Q=>{let Fe=Jo(t("padding"));Ge(e,"padding",`${Q} ${Fe.right} ${Q} ${Fe.left}`)},[e,t]),We=Uo(Q=>Fe=>{Ge(e,Q,Fe)},[e]),Xe=N==="column"||N==="column-reverse",Lt=Q=>Q==="center"?1:Q==="flex-end"||Q==="end"?2:0,Gt=Lt(t("justify-content")),it=Lt(t("align-items")),Vt=Xe?it:Gt,Kt=Xe?Gt:it,St=Gr(null),Ot=Gr({x:0,y:0}),bt=Gr({col:Vt,row:Kt});bt.current={col:Vt,row:Kt};let Et=Uo((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=Gr(Et);rn.current=Et,Iu(()=>{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(Zi,{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(Zi,{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(Zi,{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:H?"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(Bu,{size:16}),active:L==="block"}),Ae(Se,{mode:"flex-col",icon:Ae(Ou,{size:16}),active:L==="flex-col"}),Ae(Se,{mode:"flex-row",icon:Ae(Au,{size:16}),active:L==="flex-row"}),Ae(Se,{mode:"grid",icon:Ae(Pu,{size:16}),active:L==="grid"})]}),Xt("div",{style:{display:"flex",gap:4,marginBottom:8},children:[Ae(es,{label:"W",property:"width",cssValue:E==="fixed"?Z:`${Math.round(e.getBoundingClientRect().width)}px`,mode:E,onValueChange:Q=>r("width",Q),onModeChange:Q=>{if(Q==="fixed"){let Fe=e.getBoundingClientRect();r("width",`${Math.round(Fe.width)}px`)}else r("width",Vr(Q,Z))},modified:o("width"),dimmed:_&&d!=="width",dropdownOpen:d==="width",onDropdownChange:Q=>b(Q?"width":null),panelContentRef:p,accentColor:u,onReset:()=>i("width"),minValue:J!=="none"&&J!=="0px"&&J!=="auto"?J:"",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(es,{label:"H",property:"height",cssValue:P==="fixed"?D:`${Math.round(e.getBoundingClientRect().height)}px`,mode:P,onValueChange:Q=>r("height",Q),onModeChange:Q=>{if(Q==="fixed"){let Fe=e.getBoundingClientRect();r("height",`${Math.round(Fe.height)}px`)}else r("height",Vr(Q,D))},modified:o("height"),dimmed:_&&d!=="height",dropdownOpen:d==="height",onDropdownChange:Q=>b(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")})]}),M&&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(Vo,{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:C,children:N==="column"||N==="column-reverse"?Ae(la,{size:12,strokeWidth:o("gap")?2.5:1.5}):Ae(sa,{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:y(f({},en),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:C,onUnitCycle:S})]})})]})]}),w&&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(Nu,{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(Vo,{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:C,children:Ae(sa,{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:y(f({},en),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:C,onUnitCycle:S})]})}),Ae(En,{dimmed:_,children:Xt("div",{style:{display:"flex",alignItems:"center"},children:[Ae(Vo,{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:C,children:Ae(la,{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:y(f({},en),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:C,onUnitCycle:S})]})})]})]}),H&&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(Vo,{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:C,snapSteps:qi,children:Ae(Ru,{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:y(f({},en),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:C,onUnitCycle:S})]})}),Ae(En,{style:{flex:1},dimmed:_,children:Xt("div",{style:{display:"flex",alignItems:"center"},children:[Ae(Vo,{value:ae.top,onChange:Q=>{pe("padding-v"),$(Q)},onPreview:be("padding-v",oe),onScrubEnd:()=>pe("padding-v"),onReset:()=>i("padding"),isModified:o("padding"),accentColor:u,defaultUnit:C,snapSteps:qi,children:Ae(Lu,{size:12,strokeWidth:o("padding")?2.5:1.5})}),Ae(Hn,{property:"padding",value:re["padding-v"]||ae.top,onChange:Q=>$(Q),isModified:o("padding")||"padding-v"in re,placeholder:"V pad",style:y(f({},en),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:C,onUnitCycle:S})]})})]}),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 Du,AlignJustify as Hu,AlignLeft as Fu,AlignRight as _u,Baseline as zu,ChevronDown as $u,WholeWord as Wu}from"lucide-react";import{jsx as yt,jsxs as Jn}from"react/jsx-runtime";var ua={100:"Thin",200:"Extra Light",300:"Light",400:"Regular",500:"Medium",600:"Semi Bold",700:"Bold",800:"Extra Bold",900:"Black"};function pa({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:C}){var P;let S=t("font-family"),b=t("font-size"),T=t("font-weight"),N=t("line-height"),L=t("letter-spacing"),M=t("text-align"),w=t("color"),H=String(T),Z=ua[H]||H,D=dr(e,w),z=w.includes("var(")?null:ur(D,d),K=({align:J,icon:ge})=>{let ve=M===J;return yt("button",{type:"button",onClick:()=>n("text-align",J),style:{flex:1,display:"flex",alignItems:"center",justifyContent:"center",padding:"6px 8px",border:"none",borderRadius:2,backgroundColor:ve?Yo(a,.15):"transparent",color:ve?a:"#64748b",cursor:"pointer"},children:ge})},E=((P=S.split(",")[0])==null?void 0:P.trim().replace(/^["']|["']$/g,""))||"System";return Jn("div",{style:{borderBottom:"1px solid rgba(0,0,0,0.08)"},children:[yt("div",{style:l,children:yt("span",{children:"Typography"})}),Jn("div",{style:{padding:"8px 12px",display:"flex",flexDirection:"column",gap:4},children:[yt(En,{children:Jn("div",{style:{display:"flex",alignItems:"center",padding:"6px 8px"},children:[yt("input",{type:"text",value:S,onChange:J=>n("font-family",J.target.value),style:y(f({},en),{flex:1,minWidth:0,padding:0,fontWeight:r("font-family")?600:400,color:r("font-family")?a:"inherit"}),title:S}),yt($u,{size:12,style:{color:"#999",flexShrink:0,marginLeft:4}})]})}),Jn("div",{style:{display:"flex",gap:4},children:[yt(En,{style:{flex:1},children:yt("select",{value:H,onChange:J=>n("font-weight",J.target.value),style:y(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(ua).map(([J,ge])=>yt("option",{value:J,children:ge},J))})}),yt(En,{style:{flex:1},children:yt("div",{style:{display:"flex",alignItems:"center",position:"relative"},children:yt(Hn,{property:"font-size",value:b,onChange:J=>n("font-size",J),isModified:r("font-size"),min:1,max:999,style:y(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:C})})})]}),Jn("div",{style:{display:"flex",gap:4},children:[yt(En,{style:{flex:1},children:Jn("div",{style:{display:"flex",alignItems:"center",padding:"6px 8px",gap:4},children:[yt(zu,{size:12,style:{color:r("line-height")?a:"#999",flexShrink:0}}),yt(Hn,{property:"line-height",value:N,onChange:J=>n("line-height",J),isModified:r("line-height"),step:.1,min:0,placeholder:"Auto",style:y(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:Jn("div",{style:{display:"flex",alignItems:"center",padding:"6px 8px",gap:4},children:[yt(Wu,{size:12,style:{color:r("letter-spacing")?a:"#999",flexShrink:0}}),yt(Hn,{property:"letter-spacing",value:L,onChange:J=>n("letter-spacing",J),isModified:r("letter-spacing"),step:.1,placeholder:"\u2014",style:y(f({},en),{flex:1,minWidth:0,padding:0,fontWeight:r("letter-spacing")?600:400,color:r("letter-spacing")?a:"inherit"}),showUnit:!1})]})})]}),Jn("div",{style:{display:"flex",gap:2,backgroundColor:Fn,borderRadius:2,padding:2},children:[yt(K,{align:"left",icon:yt(Fu,{size:14})}),yt(K,{align:"center",icon:yt(Du,{size:14})}),yt(K,{align:"right",icon:yt(_u,{size:14})}),yt(K,{align:"justify",icon:yt(Hu,{size:14})})]}),Jn("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(ts,{value:w,resolvedValue:D,colorVariables:d,matchingVariable:z,onChange:J=>n("color",J),accentColor:a,modified:r("color"),panelContentRef:u,isDropdownOpen:c==="color",onDropdownChange:J=>p(J?"color":null)})})]})]})]})}import{Fragment as Uu,jsx as me,jsxs as Ct}from"react/jsx-runtime";var ga=[{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 Vu(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 Qi(e,t){return!t||e==="auto"||e==="fit-content"||e==="max-content"||e==="min-content"?"hug":e==="100%"||t==="100%"?"fill":"fixed"}function Vr(e,t){switch(e){case"hug":return"fit-content";case"fill":return"100%";case"fixed":{let n=io(t);if(typeof n.num=="number"&&!isNaN(n.num)){let r=n.unit==="%"?"px":n.unit||"px";return`${n.num}${r}`}return"auto"}}}function Jo(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 ca(e,t){return e==="grid"?"grid":e==="flex"||e==="inline-flex"?t==="column"||t==="column-reverse"?"flex-col":"flex-row":"block"}function da(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 es({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:C,onMinChange:S,onMaxChange:b,onMinReset:T,onMaxReset:N,minModified:L,maxModified:M}){let w=io(n),H=s?w.unit||Go(t):Go(t),Z=!s&&w.unit&&w.unit!==H?Xi(w.num,H):w.num,[D,z]=tn(!1),[K,E]=tn(String(Z)),[P,J]=tn(!1),ge=vn(null),ve=vn(null),ye=vn(null),ae=vn(!1);An(()=>{D||E(String(Z))},[Z,D]),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(()=>{D&&ge.current&&(ge.current.focus(),ge.current.select())},[D]);let ze=()=>{let Ie=Yr(K,t,n,s);o(Ie||`${Math.max(0,parseFloat(K)||0)}${H}`),z(!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,E(String(Z)),z(!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(K)||0,xe=Math.round(Math.max(0,_+st*ct)*1e3)/1e3;E(String(xe)),o(`${xe}${H}`)}},He={fixed:"Fixed",hug:"Hug",fill:"Fill"},Ne={fixed:me(fa,{size:12}),hug:me(ju,{size:12}),fill:me(fa,{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:()=>J(!0),onMouseLeave:()=>J(!1),style:{flex:1,display:"flex",alignItems:"center",position:"relative",borderRadius:2,border:"1px solid",borderColor:D?p:P?"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"?D?me("input",{ref:ge,type:"text",inputMode:"numeric",value:K,onChange:Ie=>E(Ie.target.value),onKeyDown:ne,onBlur:Me,style:y(f({},en),{flex:1,minWidth:0,padding:"4px 2px"})}):me("span",{onClick:()=>z(!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(ns,{size:12})]}),a&&Ct("div",{ref:ve,style:y(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(Ur,{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(Ur,{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(Ur,{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:L?Ie=>{Ie.stopPropagation(),T==null||T()}:void 0,title:L?"Click to reset":void 0,style:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:L?p:"#999",fontWeight:L?600:400,marginRight:8,flexShrink:0,cursor:L?"pointer":"default"},children:"Min"}),me("input",{type:"text",value:g||"",placeholder:"\u2014",onChange:Ie=>S==null?void 0:S(Ie.target.value),onClick:Ie=>Ie.stopPropagation(),style:y(f({},en),{flex:1,minWidth:0,padding:0,textAlign:"right",color:L?p:"inherit",fontWeight:L?600:400})})]}),Ct("div",{style:{display:"flex",alignItems:"center",backgroundColor:Fn,borderRadius:2,padding:"4px 8px"},children:[me("span",{onClick:M?Ie=>{Ie.stopPropagation(),N==null||N()}:void 0,title:M?"Click to reset":void 0,style:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:M?p:"#999",fontWeight:M?600:400,marginRight:8,flexShrink:0,cursor:M?"pointer":"default"},children:"Max"}),me("input",{type:"text",value:C||"",placeholder:"\u2014",onChange:Ie=>b==null?void 0:b(Ie.target.value),onClick:Ie=>Ie.stopPropagation(),style:y(f({},en),{flex:1,minWidth:0,padding:0,textAlign:"right",color:M?p:"inherit",fontWeight:M?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 Un({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=io(t),C=Go(e),S=Wr[e],T=p&&S&&S.includes(p)?p:C,N=r&&g.unit||T,L=!r&&g.unit&&g.unit!==N?Xi(g.num,N):g.num,[M,w]=tn(!1),[H,Z]=tn(""),D=Me=>{w(!0),Z(String(L||"")),requestAnimationFrame(()=>Me.target.select())},z=()=>{if(w(!1),H.trim()){let Me=Yr(H,e,t,r);Me&&n(Me)}},K=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}${N}`)}},E=Me=>{if(Me.key==="Enter"){if(H.trim()){let ne=Yr(H,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(H)||L||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}${N}`)}},P=/^-?[\d.]/.test(t.trim()),J=M?H:P?String(L):"",ve=M&&/\s*(rem|em|px|%)\s*$/i.test(H)?"":N,ye=u&&(ve==="rem"||ve==="px"),ae={fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",pointerEvents:"none"},ze=y(f({},c!=null?c:ae),{pointerEvents:"auto",cursor:"pointer"});return Ct(Uu,{children:[me("input",{type:"text",inputMode:"decimal",value:J,onFocus:D,onBlur:z,onChange:K,onKeyDown:E,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 ts({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,C]=tn(u),[S,b]=tn(!1),[T,N]=tn(!1),[L,M]=tn(!1),w=vn(null),H=vn(null),Z=vn(null),D=a!==void 0?a:S,z=d||b,K=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;C(ne)}},[e,c,r]),An(()=>{if(!D&&!T)return;let ne=Ne=>{Z.current&&!Ne.composedPath().includes(Z.current)&&(z(!1),N(!1))},He=Ne=>{Ne.key==="Escape"&&(z(!1),N(!1))};return document.addEventListener("mousedown",ne),document.addEventListener("keydown",He),()=>{document.removeEventListener("mousedown",ne),document.removeEventListener("keydown",He)}},[D,T]),An(()=>{c&&w.current&&(w.current.focus(),w.current.select())},[c]);let E=Jr(()=>{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]),P=()=>{o(g),p(!1),N(!1)},J=ne=>{C(ne),ne.includes("var")||ne.includes("--")||ne.length>0&&!ne.startsWith("#")?N(!0):N(!1)},ge=ne=>{C(ne.usage),o(ne.usage),z(!1),N(!1),p(!1)},ve=()=>{setTimeout(()=>{!D&&!T&&P()},150)},ye=ne=>{ne.key==="Enter"?P():ne.key==="Escape"&&(C(e),p(!1),N(!1))},ae=Jr(()=>{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;C(He),o(He)},Me=e.includes("var(");return Ct("div",{ref:Z,onMouseEnter:()=>M(!0),onMouseLeave:()=>M(!1),style:{position:"relative",borderRadius:2,border:"1px solid",borderColor:c?i:L?"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:w,type:"text",value:g,onChange:ne=>J(ne.target.value),onKeyDown:ye,onBlur:ve,style:y(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:()=>z(!D),style:{display:"flex",alignItems:"center",justifyContent:"center",width:20,height:24,border:"none",background:"none",cursor:"pointer",color:"#999",flexShrink:0},children:me(ns,{size:12})})]}),T&&E.length>0&&me("div",{style:y(f({},K()),{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:E.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))}),D&&me("div",{ref:H,style:y(f({},K()),{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(Ur,{size:14,style:{marginLeft:"auto",flexShrink:0}})]},ne.name))})]})}function ma({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($){return!1}});An(()=>{if(p)return;let $=setTimeout(()=>u(!0),50);return()=>clearTimeout($)},[p]);let[g,C]=tn(null),[S,b]=tn(null),T=g!==null||S!==null,[N,L]=tn("rem"),M=Wn(()=>{L($=>$==="rem"?"px":"rem")},[]),w=vn(new Map),[H,Z]=tn(""),D=Jr(()=>Ni(),[]);An(()=>{let $=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",$),()=>window.removeEventListener("keydown",$)},[i]);let z=vn({top:0,left:0,maxHeight:400}),[,K]=tn(0),E="devtools-panel-position",P=vn({x:0,y:0}),J=vn(null),ge=vn(!1);An(()=>{try{let $=localStorage.getItem(E);if($){let re=JSON.parse($);typeof re.top=="number"&&typeof re.left=="number"&&(ge.current=!0,z.current=y(f({},z.current),{top:re.top,left:re.left}))}}catch($){}},[]),An(()=>{let $=se=>{var bt;let be=J.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,z.current.left+pe)),Lt=Math.max(We,z.current.top+ke);P.current={x:Xe-z.current.left,y:Lt-z.current.top};let Gt=d.current,it=Gt==null?void 0:Gt.parentElement;if(!it)return;it.style.top=`${Lt}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,Lt),Ot=Math.max(200,Kt-St);Gt&&(Gt.style.maxHeight=`${Ot}px`)},re=()=>{if(!J.current)return;let se=z.current.top+P.current.y,be=z.current.left+P.current.x;z.current=y(f({},z.current),{top:se,left:be}),P.current={x:0,y:0},ge.current=!0;try{localStorage.setItem(E,JSON.stringify({top:se,left:be}))}catch(pe){}J.current=null};return window.addEventListener("mousemove",$),window.addEventListener("mouseup",re),()=>{window.removeEventListener("mousemove",$),window.removeEventListener("mouseup",re)}},[]);let ve=Wn($=>{$.button!==0||$.target.closest("button")||($.preventDefault(),J.current={startX:$.clientX,startY:$.clientY,startOffsetX:P.current.x,startOffsetY:P.current.y})},[]);An(()=>{P.current={x:0,y:0};let $=(be=!1)=>{var Kt;let pe=d.current,ke=280,oe=8,We,Xe;if(ge.current)We=z.current.top,Xe=z.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 Lt=(Kt=a==null?void 0:a.current)==null?void 0:Kt.getBoundingClientRect(),Gt=window.innerHeight-16;Lt&&Xe+ke>Lt.left&&(Gt=Lt.top-oe);let it=Math.max(0,We),Vt=Math.max(200,Gt-it);if(z.current={top:We,left:Xe,maxHeight:Vt},be&&pe){let St=pe.parentElement;St&&!ge.current&&(St.style.top=`${We+P.current.y}px`,St.style.left=`${Xe+P.current.x}px`),pe.style.maxHeight=`${Vt}px`}else K(St=>St+1)};$(!1);let re=()=>$(!0),se=()=>$(!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 $=d.current;if(!$)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 $.addEventListener("wheel",re,{passive:!1}),()=>$.removeEventListener("wheel",re)},[]);let ye=Jr(()=>r.find($=>$.selector===n),[r,n]),ae=Wn($=>{let re=ye==null?void 0:ye.changes.find(se=>se.property===$);if(re)return re.modified;if($.includes("color")){let se=Li(e,$);if(se&&se.includes("var("))return se}return lr(e,$)},[e,ye]),ze=Wn($=>{if(w.current.has($))return w.current.get($);let re=ye==null?void 0:ye.changes.find(be=>be.property===$);if(re)return re.original;let se=lr(e,$);return w.current.set($,se),se},[e,ye]),Me=Wn(($,re)=>{let se=ze($);Ge(e,$,re),$==="backdrop-filter"&&Ge(e,"-webkit-backdrop-filter",re),o({type:"MODIFY_STYLE",payload:{selector:n,element:t,property:$,original:se,modified:re}})},[e,n,t,o,ze]),ne=Wn(()=>{Oi(n,r);let $=r.find(re=>re.selector===n);if($)for(let re of $.changes)o({type:"CLEAR_STYLE",payload:{selector:n,property:re.property}});w.current.clear()},[n,r,o]),He=Wn($=>{let re=r.find(be=>be.selector===n);re!=null&&re.changes.find(be=>be.property===$)&&e instanceof HTMLElement&&(e.style.removeProperty($),o({type:"CLEAR_STYLE",payload:{selector:n,property:$}}),w.current.delete($))},[e,n,r,o]),Ne=Wn(()=>{let $=H.split(";").map(re=>re.trim()).filter(re=>re);for(let re of $){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("")},[H,Me]),Ve=Wn($=>{var re;return(re=ye==null?void 0:ye.changes.some(se=>se.property===$))!=null?re:!1},[ye]),$e=$=>{var ke;let re=ae($.property),se=Ve($.property),be=!se&&Vu($.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&&$.type!=="backdrop-filter")return me(Un,{modified:!1,children:me("input",{type:"text",value:"",placeholder:"\u2014",onFocus:()=>{},onChange:oe=>Me($.property,oe.target.value),style:y(f({},pe),{color:"#999"})})});switch($.type){case"color":{let oe=dr(e,re),We=re.includes("var(")?null:ur(oe,D);return me(ts,{value:re,resolvedValue:oe,colorVariables:D,matchingVariable:We,onChange:Xe=>Me($.property,Xe),accentColor:l,modified:se,panelContentRef:c,isDropdownOpen:S===$.property,onDropdownChange:Xe=>b(Xe?$.property:null)})}case"number":{if(!!Wr[$.property])return me(Un,{modified:se,children:me(Hn,{property:$.property,value:re,onChange:Xe=>Me($.property,Xe),isModified:se,min:$.min,max:$.max,step:$.step||1,style:y(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:N,onUnitCycle:M})});let{num:We}=io(re);return me(Un,{modified:se,children:me("input",{type:"number",value:We,min:$.min,max:$.max,step:$.step||1,onChange:Xe=>Me($.property,Xe.target.value),style:pe})})}case"select":return me(Un,{modified:se,children:Ct("div",{style:{position:"relative",display:"flex",alignItems:"center"},children:[me("select",{value:re,onChange:oe=>Me($.property,oe.target.value),style:y(f({},pe),{cursor:"pointer",paddingLeft:4,paddingRight:24,appearance:"none",WebkitAppearance:"none"}),children:(ke=$.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(ns,{size:12})})]})});case"spacing":return me(Un,{modified:se,children:me("input",{type:"text",value:re,onChange:oe=>Me($.property,oe.target.value),placeholder:"e.g., 10px or 10px 20px",style:pe})});case"backdrop-filter":return me(ra,{value:re,onChange:oe=>Me($.property,oe),accentColor:l,modified:se,panelContentRef:c});default:return me(Un,{modified:se,children:me("input",{type:"text",value:re,onChange:oe=>Me($.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=y(f({position:"fixed",top:z.current.top,left:z.current.left,width:280,maxHeight:z.current.maxHeight,backgroundColor:"rgba(255, 255, 255, 0.85)",backdropFilter:"blur(32px)",WebkitBackdropFilter:"blur(32px)"},ro),{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:J.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:z.current.top+P.current.y,left:z.current.left+P.current.x,zIndex:1e4,pointerEvents:"none"},children:Ct("div",{ref:d,"data-devtools":"panel",style:y(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(Yu,{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(Gu,{size:14})})]})]}),Ct("div",{ref:c,style:{flex:1,overflowY:"auto",margin:"0 3px 3px"},children:[me("div",{style:{opacity:S?.3:1,transition:"opacity 150ms ease"},children:me(aa,{element:e,getValue:ae,getOriginalValue:ze,handleChange:Me,isModified:Ve,onResetProperty:He,isCollapsed:!1,onToggle:()=>{},sectionHeaderStyle:xe,activeDropdown:g,onDropdownChange:C,panelContentRef:c,accentColor:l,onFieldHover:s,preferredUnit:N,onUnitCycle:M})}),me("div",{style:{opacity:g?.3:1,transition:"opacity 150ms ease"},children:me(pa,{element:e,getValue:ae,handleChange:Me,isModified:Ve,onResetProperty:He,isCollapsed:!1,onToggle:()=>{},sectionHeaderStyle:xe,accentColor:l,colorVariables:D,activeColorDropdown:S,onColorDropdownChange:b,panelContentRef:c,preferredUnit:N,onUnitCycle:M})}),ga.map(($,re)=>{let se=re===ga.length-1,be=S&&$.properties.some(ke=>ke.property===S);return Ct("div",{style:{borderBottom:se?"none":"1px solid rgba(0,0,0,0.08)",opacity:T&&!be?.3:1,transition:"opacity 150ms ease"},children:[me("div",{style:xe,children:me("span",{children:$.name})}),me("div",{style:{padding:"4px 0"},children:$.properties.map(ke=>{let oe=Ve(ke.property),We=be&&ke.property!==S;return Ct("div",{style:y(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:y(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)})})]},$.name)}),Ct("div",{style:{opacity:T?.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:H,onChange:$=>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"}}),H.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:H.trim()?1:.5},children:"Apply"})]})]})]})]})})}import{useEffect as Ju,useLayoutEffect as Xu,useState as Ku}from"react";import{Fragment as ep,jsx as Eo,jsxs as Qu}from"react/jsx-runtime";var os=["flex-start","center","flex-end"],rs=["flex-start","center","flex-end"];function qu(e){return e==="normal"||e==="flex-start"||e==="start"?"flex-start":e==="flex-end"||e==="end"?"flex-end":e==="center"?"center":null}function Zu(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 ha(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 ya({element:e,modifier:t,accentColor:n,refreshKey:r=0}){let[o,i]=Ku(null);if(Ju(()=>{if(!e){i(null);return}let S=()=>i(ha(e));return S(),window.addEventListener("scroll",S,{passive:!0}),window.addEventListener("resize",S,{passive:!0}),()=>{window.removeEventListener("scroll",S),window.removeEventListener("resize",S)}},[e]),Xu(()=>{e&&i(ha(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 S=qu(l.justifyContent);if(S){let b=os.indexOf(S);c==="horizontal"?(b>0&&u.push("left"),b<os.length-1&&u.push("right")):(b>0&&u.push("up"),b<os.length-1&&u.push("down"))}}else{let S=Zu(l.alignItems);if(S){let b=rs.indexOf(S);p==="horizontal"?(b>0&&u.push("left"),b<rs.length-1&&u.push("right")):(b>0&&u.push("up"),b<rs.length-1&&u.push("down"))}}if(u.length===0)return null;let g=14,C=7;return Eo(ep,{children:u.map(S=>{let b,T;switch(S){case"right":b=s.right+g,T=s.top+s.height/2;break;case"left":b=s.left-g,T=s.top+s.height/2;break;case"down":b=s.left+s.width/2,T=s.bottom+g;break;case"up":b=s.left+s.width/2,T=s.top-g;break}let N=S==="right"?0:S==="left"?180:S==="down"?90:-90,L={position:"fixed",left:b-C,top:T-C,width:C*2,height:C*2,pointerEvents:"none",zIndex:9997};return Eo("div",{"data-devtools":"swipe-hint",style:L,children:Eo("svg",{width:C*2,height:C*2,viewBox:"-7 -7 14 14",style:{overflow:"visible"},children:Qu("g",{transform:`rotate(${N})`,children:[Eo("line",{x1:"-5",y1:"0",x2:"3",y2:"0",stroke:"#fff",strokeWidth:"4",strokeLinecap:"round"}),Eo("polyline",{points:"0,-4 5,0 0,4",fill:"none",stroke:"#fff",strokeWidth:"4",strokeLinecap:"round",strokeLinejoin:"round"}),Eo("line",{x1:"-5",y1:"0",x2:"3",y2:"0",stroke:n,strokeWidth:"1.5",strokeLinecap:"round"}),Eo("polyline",{points:"0,-4 5,0 0,4",fill:"none",stroke:n,strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]})})},S)})})}import{useEffect as tp,useLayoutEffect as np,useState as op}from"react";import{jsx as is,jsxs as ss}from"react/jsx-runtime";function rp(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 ba({element:e,fontSize:t,lineHeight:n,accentColor:r,hoveredProperty:o,draggingProperty:i,cursorViewport:s}){let[l,a]=op(null);if(tp(()=>{if(!e){a(null);return}let T=()=>{a(Wo(e))};return T(),window.addEventListener("scroll",T,{passive:!0}),window.addEventListener("resize",T,{passive:!0}),()=>{window.removeEventListener("scroll",T),window.removeEventListener("resize",T)}},[e]),np(()=>{e&&a(Wo(e))},[e,t,n]),!l)return null;let d=l.width,c=l.height,p=rp(r,.2),u=i!=null?i:o,g=8,C=2,S={position:"fixed",top:l.top,left:l.left,width:d,height:c,pointerEvents:"none",zIndex:9996,overflow:"visible"},b=T=>T==="font-size"?`${Math.round(t)}`:(t>0?n/t:1.2).toFixed(2).replace(/\.?0+$/,"");return ss("div",{"data-devtools":"text-handles",style:S,children:[ss("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${d} ${c}`,children:[is("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)&&is("rect",{x:d-C/2,y:c/2-g/2,width:C,height:g,fill:r,stroke:"#ffffff",strokeWidth:u==="font-size"?4:2,paintOrder:"stroke"}),(u==="line-height"||!u)&&is("rect",{x:d/2-g/2,y:c-C/2,width:g,height:C,fill:r,stroke:"#ffffff",strokeWidth:u==="line-height"?4:2,paintOrder:"stroke"})]}),s&&u&&(()=>{let T=u==="font-size"?"Aa":"Lh",N=b(u);return ss("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:[T," ",N]})})()]})}import{Fragment as Ko,jsx as rt,jsxs as Xo}from"react/jsx-runtime";var xa=8,ls=[0,1,2,4,8,12,16,20,24,28,32],as="devtools-active-text";function va(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 Sa({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:C,modelSpacingTokenHover:S,highlightedAnnotationIds:b,focusedThreadAnnotationId:T,externalCanvasRef:N,toolbarRef:L}){var Bs,Os,Ns,Ds,Hs,Fs,_s,zs,$s;let{canvasRef:M,redrawAll:w,resizeCanvas:H}=wl(),Z=jt(m=>{M.current=m,N&&(N.current=m)},[N,M]),D=Pt(!1);an(()=>{let m=M.current;if(!m)return;let h=()=>{D.current&&(D.current=!1,m.style.pointerEvents="")},U=I=>{I.button===0&&D.current&&h()};return window.addEventListener("mousedown",U),()=>window.removeEventListener("mousedown",U)},[M]);let[z,K]=dt(!1),[E,P]=dt(()=>{if(typeof window=="undefined")return null;try{let m=localStorage.getItem(as);return m?JSON.parse(m):null}catch(m){return null}}),[J,ge]=dt(null),[ve,ye]=dt(null),[ae,ze]=dt(null),Me=Pt(null),ne=Pt(null),He=Pt({x:0,y:0}),Ne=Pt([]),Ve=Pt(0),[$e,Ie]=dt(null),[st,ct]=dt(new Map),_=Pt(0),xe=Pt(null),[ce,Se]=dt(null),[Be,De]=dt(null),[$,re]=dt(null),[se,be]=dt(null),pe=Pt({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),[Lt,Gt]=dt(null),[it,Vt]=dt(null),Kt=Pt({x:0,y:0}),[St,Ot]=dt({x:0,y:0}),bt=Pt({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=Pt({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,At]=dt(null),[Nt,qt]=dt(null),[xt,Zn]=dt(null),Pn=Pt({isDragging:!1,property:null,startX:0,startY:0,originalFontSize:0,originalLineHeight:0,originalRatio:1.2,element:null,elementInfo:null,selector:null,durableSelector:null}),[Dt,Yn]=dt(null),[gn,mn]=dt(null),[ut,B]=dt(null),X=Cl(),te=Pt(i);te.current=i;let Re=jt(m=>{let h=te.current;if(!h||h.size===0)return!1;for(let U of h.keys())try{if(m.matches(U))return!0}catch(I){}return!1},[]),he=Pt(e);he.current=e;let Ue=Pt(E);Ue.current=E;let Je=Pt([]),Le=Pt(n);Le.current=n;let[v,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(()=>(H(),window.addEventListener("resize",H),()=>window.removeEventListener("resize",H)),[H]),an(()=>{let m=()=>{et({x:window.scrollX,y:window.scrollY})};return window.addEventListener("scroll",m,{passive:!0}),()=>window.removeEventListener("scroll",m)},[]),an(()=>{E?localStorage.setItem(as,JSON.stringify(E)):localStorage.removeItem(as)},[E]),El(E,P,J,e.annotations,t);let pt=Pt($e);pt.current=$e,an(()=>{if(e.activeTool!=="model"||!e.isAnnotating)return;let m=h=>{if(!h.altKey||!pt.current)return;h.preventDefault();let U=h.deltaY>0?-1:1;_.current=Math.max(0,_.current+U);let I=xe.current;if(I){let R=Pr(I,_.current);Ie(R)}};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 U;let m=(U=$e==null?void 0:$e.name)!=null?U:null,h=m&&(g!=null&&g.has(m))?m:null;u==null||u(h)},[$e,g,u]);let[mt,Ht]=dt(null);an(()=>{var U;if(!C){Ht(null);return}let m=_o(C.name),h=C.instanceIndex;Ht((U=m[h%m.length])!=null?U:null)},[C]);let[Qn,eo]=dt([]);an(()=>{var m,h;if(!S){eo([]);return}(h=(m=S.token)==null?void 0:m.bindings)!=null&&h.length?eo(Ii(S.token)):eo(Ti(S.px))},[S]);let ht=Pt(null),ln=Pt(null);ht.current=Et,ln.current=zt,an(()=>{let m=["flex-start","center","flex-end"],h=["flex-start","center","flex-end"],I=null,R=!1,W=null,ie=null,F=(ue,Te)=>{let Ze=xo(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=()=>{R=!0,I&&clearTimeout(I),I=setTimeout(()=>{R=!1,I=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 Gn=m[Ut],{selector:po,durableSelector:di}=x(ue);Ge(ue,"justify-content",Gn),t({type:"MODIFY_STYLES_BATCH",payload:{selector:po,durableSelector:di,element:yn(ue),changes:[{property:"justify-content",original:Ye,modified:Gn}]}})}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)},A=(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 Gn=h.indexOf(Bn)+nt;if(Gn<0||Gn>=h.length)return;let po=h[Gn],{selector:di,durableSelector:vc}=x(ue);Ge(ue,"align-items",po),t({type:"MODIFY_STYLES_BATCH",payload:{selector:di,durableSelector:vc,element:yn(ue),changes:[{property:"align-items",original:wt,modified:po}]}}),$t(Sc=>Sc+1)},O=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)),R)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 po=Ye>0?1:-1;if(fe!==0&&po!==fe){Y=ue.clientX,V=ue.clientY,fe=0;return}fe=po}if(Math.abs(Ze)<O&&Math.abs(ft)<O)return;let wt=F(W,ie);if(!wt)return;let Bn=Math.abs(Ze)>=Math.abs(ft)?"horizontal":"vertical",Gn=(Bn==="horizontal"?Ze:ft)>0?1:-1;Y=null,V=null,fe=0,Te?G(wt,Bn,Gn):A(wt,Bn,Gn),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),I&&clearTimeout(I)}},[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,A=Ne.current.map(Y=>y(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:A}});let O=A.find(Y=>Y.type!=="text")||A[0];O&&de(O.id);return}let U=Je.current;if(U.length===0||Ue.current)return;let I=(F=(ie=h.composedPath)==null?void 0:ie.call(h)[0])!=null?F:h.target,R=I==null?void 0:I.tagName;if(!(R==="INPUT"||R==="TEXTAREA"||I!=null&&I.isContentEditable)&&(h.key==="Delete"||h.key==="Backspace")){if(h.preventDefault(),d){let x=he.current.annotations;for(let k of U){let G=x.find(O=>O.id===k);if(!G)continue;let A=G.threadId||G.groupId&&((q=x.find(O=>O.groupId===G.groupId&&O.threadId))==null?void 0:q.threadId);A&&d(A)}}for(let x of U)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=No(),Tt=Xr(()=>e.annotations.filter(m=>!m.pathname||m.pathname===Wt),[e.annotations,Wt]),Rn=Xr(()=>$r(e.annotations),[e.annotations]),Sn=Xr(()=>{let m=new Map,h=new Set,U=1,I=[...e.annotations].sort((R,W)=>R.timestamp-W.timestamp);for(let R of I)if(!Rn.has(R))if(R.groupId){if(!h.has(R.groupId)){h.add(R.groupId);let W=e.annotations.filter(ie=>ie.groupId===R.groupId);for(let ie of W)m.set(ie.id,U);U++}}else m.set(R.id,U),U++;return m},[e.annotations,Rn]),ai=Xr(()=>{if(ee.length===0)return null;let m=new Map;for(let h of ee){let U=e.annotations.find(R=>R.id===h);if(!U)continue;let I=U.groupId?e.annotations.filter(R=>R.groupId===U.groupId):[U];for(let R of I)if(R.linkedSelector&&!(i!=null&&i.has(R.linkedSelector))){let W=R.color||e.activeColor;m.set(R.linkedSelector,W)}}return m.size>0?m:null},[ee,e.annotations,e.activeColor,i]);an(()=>{let m=Tt.filter(h=>!(Rn.has(h)||E&&!E.isNew&&h.id===E.id));w(m,e.currentPath,e.activeTool,e.activeColor,e.strokeWidth,ee,xa,Pe.x,Pe.y,Sn,b)},[Tt,e.currentPath,e.activeTool,e.activeColor,e.strokeWidth,w,E,ee,Pe,Sn,Rn,b]),an(()=>{if(ve){let m=Math.random().toString(36).substring(2,9);P({id:m,point:ve.point,text:"",fontSize:12,isNew:!0,groupId:ve.groupId}),ye(null)}},[ve]),an(()=>{ae&&(P({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 Mo=Pt(null),un=(Bs=E==null?void 0:E.id)!=null?Bs:null;an(()=>{un&&Me.current?requestAnimationFrame(()=>{var U;let m=Me.current;if(!m||(m.focus(),ne.current===un))return;ne.current=un;let h=Ue.current;if(h){if(Mo.current!==null){let I=Math.min(Mo.current,m.value.length);m.setSelectionRange(I,I);return}if(!h.isNew&&h.clickPoint){let I=M.current;if(!I)return;let R=I.getContext("2d");if(!R)return;R.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 O=0;O<=k.length;O++){let Y=R.measureText(k.substring(0,O)).width;if(Y>x){let V=O>0?R.measureText(k.substring(0,O-1)).width:0;G=x-V<Y-x?O-1:O;break}G=O}let A=G;for(let O=0;O<q;O++)A+=(((U=ie[O])==null?void 0:U.length)||0)+1;m.setSelectionRange(A,A)}}}):(ne.current=null,Mo.current=null)},[un,M]);let Io=jt(m=>{let h=M.current;if(!h)return{x:0,y:0};let U=h.getBoundingClientRect(),I,R;if("touches"in m&&m.touches[0])I=m.touches[0].clientX,R=m.touches[0].clientY;else if("clientX"in m)I=m.clientX,R=m.clientY;else return{x:0,y:0};return{x:I-U.left+window.scrollX,y:R-U.top+window.scrollY}},[M]),uo=jt((m,h,U,I)=>{let R=U.x-h.x,W=U.y-h.y,ie=R*R+W*W;if(ie===0)return Math.sqrt((m.x-h.x)**2+(m.y-h.y)**2)<=I;let F=Math.max(0,Math.min(1,((m.x-h.x)*R+(m.y-h.y)*W)/ie)),q=h.x+F*R,x=h.y+F*W;return Math.sqrt((m.x-q)**2+(m.y-x)**2)<=I},[]),wr=jt(m=>{for(let U=Tt.length-1;U>=0;U--){let I=Tt[U];if(!I||Rn.has(I))continue;let R=(I.strokeWidth||3)+4;switch(I.type){case"text":{if(!I.points[0]||!I.text)continue;let W=I.points[0],ie=I.fontSize||12,F=M.current;if(F){let q=F.getContext("2d");if(q){q.font=`${ie}px ${Jt}`;let x=I.text.replace(/\n/g," "),k=W.x-Pe.x,G=Do(k),A=Ho(q,x,G),O=q.measureText(A).width,Y=ie*1.4;if(m.x>=W.x-4-4&&m.x<=W.x+O+4+4&&m.y>=W.y-4-4&&m.y<=W.y+Y+4+4)return I}}break}case"rectangle":{if(I.points.length<2)continue;let W=I.points[0],ie=I.points[I.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=uo(m,{x:F,y:x},{x:q,y:x},R),A=uo(m,{x:F,y:k},{x:q,y:k},R),O=uo(m,{x:F,y:x},{x:F,y:k},R),Y=uo(m,{x:q,y:x},{x:q,y:k},R);if(G||A||O||Y)return I;break}case"circle":{if(I.points.length<2)continue;let W=I.points[0],ie=I.points[I.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,A=m.y-q,O=Math.sqrt((G/x)**2+(A/k)**2);if(Math.abs(O-1)*Math.max(x,k)<=R)return I;break}case"line":{if(I.points.length<2)continue;let W=I.points[0],ie=I.points[I.points.length-1];if(uo(m,W,ie,R))return I;break}case"freehand":{if(I.points.length<2)continue;for(let W=0;W<I.points.length-1;W++){let ie=I.points[W],F=I.points[W+1];if(uo(m,ie,F,R))return I}break}}}return null},[Tt,M,uo,Rn,Pe.x]),Ms=jt(m=>{let h=wr(m);return(h==null?void 0:h.type)==="text"?h:null},[wr]),Is=jt(m=>{if(ee.length===0)return null;let h=xa/2+4;for(let U of ee){let I=e.annotations.find(R=>R.id===U);if(!(!I||I.points.length<2)){if(I.type==="line"){let R=I.points[0],W=I.points[I.points.length-1];if(Math.sqrt((m.x-R.x)**2+(m.y-R.y)**2)<=h)return{handle:"start",annotationId:U};if(Math.sqrt((m.x-W.x)**2+(m.y-W.y)**2)<=h)return{handle:"end",annotationId:U};continue}if(I.type==="circle"){let R=I.points[0],W=I.points[I.points.length-1],ie=Math.min(R.x,W.x),F=Math.max(R.x,W.x),q=Math.min(R.y,W.y),x=Math.max(R.y,W.y),k=(ie+F)/2,G=(q+x)/2,A=[{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:O,x:Y,y:V}of A)if(Math.sqrt((m.x-Y)**2+(m.y-V)**2)<=h)return{handle:O,annotationId:U};continue}if(I.type==="rectangle"||I.type==="freehand"){let R=I.points[0],W=I.points[I.points.length-1],ie,F,q,x;I.type==="freehand"?(ie=Math.min(...I.points.map(G=>G.x)),F=Math.max(...I.points.map(G=>G.x)),q=Math.min(...I.points.map(G=>G.y)),x=Math.max(...I.points.map(G=>G.y))):(ie=Math.min(R.x,W.x),F=Math.max(R.x,W.x),q=Math.min(R.y,W.y),x=Math.max(R.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:A,y:O}of k)if(Math.sqrt((m.x-A)**2+(m.y-O)**2)<=h)return{handle:G,annotationId:U}}}}return null},[ee,e.annotations]);an(()=>{let m=h=>{if(He.current={x:h.clientX+window.scrollX,y:h.clientY+window.scrollY},!E){let U=Ms(He.current);ge((U==null?void 0:U.id)||null)}};return window.addEventListener("mousemove",m),()=>window.removeEventListener("mousemove",m)},[E,Ms]);let Ro=jt(()=>{var h;if(!E)return;let m=((h=E.images)==null?void 0:h.length)||0;if(E.text.trim()||m>0)if(E.isNew){let U=Rr();t({type:"ADD_TEXT",payload:f({point:E.point,text:E.text||(m>0?`[${m} image${m>1?"s":""}]`:""),fontSize:E.fontSize,id:U,groupId:E.groupId,linkedSelector:E.linkedSelector,linkedAnchor:E.linkedAnchor,elements:E.elements},m>0?{imageCount:m}:{})}),m>0&&E.images&&s&&s(U,E.images)}else t({type:"UPDATE_TEXT",payload:f({id:E.id,text:E.text||(m>0?`[${m} image${m>1?"s":""}]`:"")},m>0?{imageCount:m}:{})}),m>0&&E.images&&s&&s(E.id,E.images);else E.isNew||t({type:"DELETE_ANNOTATION",payload:{id:E.id}});P(null)},[E,t,s]),jn=jt(m=>{for(let h=0;h<ls.length-1;h++){let U=ls[h],I=ls[h+1];if(m<=(U+I)/2)return U;if(m<I)return I}return Math.round(m/8)*8},[]),Rs=jt((m,h,U,I)=>{let R=U.top+Math.max(I.top,4),W=U.bottom-Math.max(I.bottom,4),ie=U.left+Math.max(I.left,4),F=U.right-Math.max(I.right,4);if(m<U.left||m>U.right||h<U.top||h>U.bottom)return null;let q=h<R,x=h>W,k=m<ie,G=m>F;return q&&k?I.top>=I.left?"top":"left":q&&G?I.top>=I.right?"top":"right":x&&k?I.bottom>=I.left?"bottom":"left":x&&G?I.bottom>=I.right?"bottom":"right":q?"top":x?"bottom":k?"left":G?"right":null},[]),Ls=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=Io(m),U="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 A=`[data-pm="${G}"]`,O=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=(O?1:0)+Y,fe=k.top>=Ln*(1+V)?"top-left":"bottom-left",Oe=va(k,fe,V,L==null?void 0:L.current);ze({point:Oe,linkedSelector:A,linkedAnchor:fe,elements:[y(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),A=ar(F),O=h.x-window.scrollX,Y=h.y-window.scrollY,V=Fe,fe=window.getComputedStyle(F).justifyContent,Oe=0;if(V){let Ke=vo(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:O,startY:Y,originalRow:V?Oe:A.row,originalColumn:V?Oe:A.column,element:F,elementInfo:y(f({},G),{selector:k}),selector:k,durableSelector:x,isAuto:V,originalJustifyContent:fe,visualGap:Oe},Q({axis:zt,row:V?Oe:A.row,column:V?Oe:A.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:A}=cr(F),O=G>0?A/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:A,originalRatio:O,element:F,elementInfo:y(f({},k),{selector:x}),selector:x,durableSelector:fe},B({property:gn,fontSize:G,lineHeight:A});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),A=So(F),O=F.getBoundingClientRect(),Y=Math.floor(O.height/2),V=h.y-window.scrollY;Ge(F,"transition","none"),gt.current={isDragging:!0,corner:Nt,startY:V,original:A,maxRadius:Y,element:F,elementInfo:y(f({},G),{selector:x}),selector:x,durableSelector:k},Zn({corner:Nt,radius:f({},A)});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),A=$o(F),O=h.x-window.scrollX,Y=h.y-window.scrollY;Ge(F,"transition","none"),pe.current={isDragging:!0,side:We,startX:O,startY:Y,original:A,element:F,elementInfo:y(f({},G),{selector:x}),selector:x,durableSelector:k},Vt({side:We,padding:f({},A)});return}let I=Is(h);if(I){let F=e.annotations.find(q=>q.id===I.annotationId);if(F&&F.type!=="text"&&((W=F.status)!=null?W:"pending")==="pending"){ot({annotationId:I.annotationId,handle:I.handle,startPoint:h,originalPoints:[...F.points],hasMoved:!1});return}}let R=wr(h);if(R&&R.points[0]){if(E&&Ro(),R.type!=="text"?(de(R.id,U),R.color&&t({type:"SET_COLOR",payload:R.color})):U||we(),a){let F=R.threadId||(R.groupId?(ie=e.annotations.find(q=>q.groupId===R.groupId&&q.threadId))==null?void 0:ie.threadId:void 0);F&&a(F)}j({annotation:R,startPoint:h,hasMoved:!1});return}if(U||we(),e.activeTool==="text"){E&&Ro();let F=Math.random().toString(36).substring(2,9);P({id:F,point:h,text:"",fontSize:12,isNew:!0});return}K(!0),t({type:"START_PATH",payload:h})},[e.isAnnotating,e.activeTool,e.inspectedElement,e.annotations,E,ee,ce,ke,We,sn,Nt,Et,zt,Fe,Dt,gn,$e,st,g,c,p,a,Io,wr,Is,t,de,we,Ro]),As=jt(m=>{var U,I;let h=Io(m);if(e.activeTool==="inspector"&&e.isAnnotating){let R=h.x-window.scrollX,W=h.y-window.scrollY,ie=xo(R,W),F=ie&&Re(ie)?null:ie;F!==ce&&(Se(F),De(F?yn(F):null));return}if(e.activeTool==="model"&&e.isAnnotating){let R=h.x-window.scrollX,W=h.y-window.scrollY,ie=xo(R,W);if(ie!==xe.current&&(xe.current=ie,_.current=0),ie){let F=Pr(ie,_.current);Ie(F)}else Ie(null);return}if(e.activeTool==="hand"&&e.isAnnotating){let R=h.x-window.scrollX,W=h.y-window.scrollY;Kt.current={x:R,y:W},Ot({x:R,y:W});let ie=X.current.cmd,F=X.current.shift;if(bt.current.isDragging){let x=bt.current,k=x.element;if(!k)return;if(!x.hasMoved){let Y=Math.abs(R-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,A=x.originalRow,O=x.originalColumn;if(G==="column"){let Y=R-x.startX;O=x.originalColumn+Y,ie||(A=x.originalRow+Y)}else{let Y=W-x.startY;A=x.originalRow+Y,ie||(O=x.originalColumn+Y)}A=Math.max(0,A),O=Math.max(0,O),F&&(A=jn(A),O=jn(O)),A=Math.round(A),O=Math.round(O),Ge(k,"row-gap",`${A}px`),Ge(k,"column-gap",`${O}px`),Q({axis:G,row:A,column:O});return}if(gt.current.isDragging){let x=gt.current,k=x.element;if(!k)return;let G=W-x.startY,A=x.corner,O=x.original,Y=f({},O);if(ie){let V=O[A]+G;V=Math.max(0,Math.min(x.maxRadius,V)),F&&(V=jn(V)),V=Math.round(V),Y[A]=V}else{let V=O[A]+G;V=Math.max(0,Math.min(x.maxRadius,V)),F&&(V=jn(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`),Zn({corner:A,radius:Y});return}if(Pn.current.isDragging){let x=Pn.current,k=x.element;if(!k)return;let G=x.property,A=x.originalFontSize,O=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=R-x.startX;A=x.originalFontSize+fe,A=Math.max(1,A)}else{let fe=W-x.startY;O=x.originalLineHeight+fe,O=Math.max(A,O)}if(F)if(G==="font-size"){let fe=Y[0],Oe=Math.abs(A-fe);for(let je of Y){let Ke=Math.abs(A-je);Ke<Oe&&(fe=je,Oe=Ke)}A=fe}else{let fe=A>0?O/A:1.2,Oe=Math.round(fe*2)/2;O=A*Math.max(1,Oe)}A=Math.round(A),O=Math.round(O*10)/10,Ge(k,"font-size",`${A}px`);let V=A>0?Math.round(O/A*1e3)/1e3:1.2;Ge(k,"line-height",`${V}`),B({property:G,fontSize:A,lineHeight:O});return}if(pe.current.isDragging){let x=pe.current,k=x.element;if(!k)return;let G=x.side,A=x.original,O=A.top,Y=A.right,V=A.bottom,fe=A.left;if(G==="top"){let Oe=x.startY-W;O=A.top+Oe,ie||(V=A.bottom+Oe)}else if(G==="bottom"){let Oe=W-x.startY;V=A.bottom+Oe,ie||(O=A.top+Oe)}else if(G==="left"){let Oe=x.startX-R;fe=A.left+Oe,ie||(Y=A.right+Oe)}else if(G==="right"){let Oe=R-x.startX;Y=A.right+Oe,ie||(fe=A.left+Oe)}O=Math.max(0,O),Y=Math.max(0,Y),V=Math.max(0,V),fe=Math.max(0,fe),F&&(O=jn(O),Y=jn(Y),V=jn(V),fe=jn(fe)),O=Math.round(O),Y=Math.round(Y),V=Math.round(V),fe=Math.round(fe),Ge(k,"padding",`${O}px ${Y}px ${V}px ${fe}px`),Vt({side:G,padding:{top:O,right:Y,bottom:V,left:fe}});return}let q=xo(R,W);for(;q&&q.tagName==="A";)q=q.parentElement;{let k=[];q&&k.push(q),sn&&sn!==q&&k.push(sn);let G=null,A=16,O=null;for(let Y of k){let V=Y.getBoundingClientRect(),fe=So(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(R-Ke,W-kt);qe<A&&(A=qe,G=je,O=Y)}}if(G&&O){At(O),qt(G),ke&&oe(null),We&&Xe(null),Et&&rn(null),zt&&Mn(null),tt(!1),Dt&&Yn(null),gn&&mn(null);return}}sn&&At(null),Nt&&qt(null);{let x=[];q&&Nr(q)&&x.push(q);let k=(U=q==null?void 0:q.parentElement)!=null?U:null;for(;k&&k!==document.body&&x.length<3;)Nr(k)&&x.push(k),k=k.parentElement;for(let G of x){let O=vo(G).find(Y=>R>=Y.x&&R<=Y.x+Y.w&&W>=Y.y&&W<=Y.y+Y.h);if(O){rn(G),Mn(O.axis),tt(Ai(G,O.axis)),ke&&oe(null),We&&Xe(null),Dt&&Yn(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,A=1/0,O=null;for(let Y of k){if(!Pi(Y))continue;let V=Wo(Y);if(!V)continue;let fe=R>=V.left&&R<=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(R-Ke,W-kt);(fe||qe<12)&&qe<A&&(A=qe,G=je,O=Y)}}G&&O?(Yn(O),mn(G)):(Dt&&Yn(null),gn&&mn(null))}if(q!==ke&&oe(q),q){let x=$o(q),k=q.getBoundingClientRect(),G=Rs(R,W,k,x);Xe(G)}else Xe(null);return}if(le){let{handle:R,originalPoints:W,hasMoved:ie}=le,F=e.annotations.find(A=>A.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 A=W[0],O=W[W.length-1];R==="start"?G=[h,O]:G=[A,h]}else if(F.type==="freehand"){let A=Math.min(...W.map(Ye=>Ye.x)),O=Math.max(...W.map(Ye=>Ye.x)),Y=Math.min(...W.map(Ye=>Ye.y)),V=Math.max(...W.map(Ye=>Ye.y)),fe=(A+O)/2,Oe=(Y+V)/2,je=O-A||1,Ke=V-Y||1,kt=je/Ke,qe=A,ue=O,Te=Y,nt=V;switch(R){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(R){case"topLeft":ue=O+(A-qe),nt=V+(Y-Te);break;case"topRight":qe=A-(ue-O),nt=V+(Y-Te);break;case"bottomLeft":ue=O+(A-qe),Te=Y-(nt-V);break;case"bottomRight":qe=A-(ue-O),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);R==="topLeft"||R==="bottomLeft"?qe=ue-Ut:ue=qe+Ut}else{let Ut=Math.abs(Ye)/kt*Math.sign(wt);R==="topLeft"||R==="topRight"?Te=nt-Ut:nt=Te+Ut}}let Ze=ue-qe||1,ft=nt-Te||1;G=W.map(Ye=>({x:qe+(Ye.x-A)/je*Ze,y:Te+(Ye.y-Y)/Ke*ft}))}else if(F.type==="circle"){let A=W[0],O=W[W.length-1],Y=Math.min(A.x,O.x),V=Math.max(A.x,O.x),fe=Math.min(A.y,O.y),Oe=Math.max(A.y,O.y),je=(Y+V)/2,Ke=(fe+Oe)/2,kt=V-Y,qe=Oe-fe,ue=Y,Te=V,nt=fe,Ze=Oe;switch(R){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 A=W[0],O=W[W.length-1],Y=Math.min(A.x,O.x),V=Math.max(A.x,O.x),fe=Math.min(A.y,O.y),Oe=Math.max(A.y,O.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(R){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(R){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);R==="topLeft"||R==="bottomLeft"?Te=nt-Ut:nt=Te+Ut}else{let Ut=Math.abs(Ye)/ue*Math.sign(wt);R==="topLeft"||R==="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(y(f({},le),{hasMoved:!0}));return}if(v&&((I=v.annotation.status)!=null?I:"pending")==="pending"){let R=h.x-v.startPoint.x,W=h.y-v.startPoint.y;if((Math.abs(R)>2||Math.abs(W)>2)&&!v.hasMoved)j(y(f({},v),{hasMoved:!0,startPoint:h})),t({type:"MOVE_ANNOTATION",payload:{id:v.annotation.id,delta:{x:R,y:W},saveUndo:!0}});else if(v.hasMoved){let F=h.x-v.startPoint.x,q=h.y-v.startPoint.y;j(y(f({},v),{startPoint:h})),t({type:"MOVE_ANNOTATION",payload:{id:v.annotation.id,delta:{x:F,y:q}}})}return}!z||!e.isAnnotating||t({type:"CONTINUE_PATH",payload:h})},[z,e.isAnnotating,e.activeTool,v,le,ce,ke,We,sn,Nt,Et,zt,Dt,gn,Io,t,jn,Rs]),ci=jt(m=>{var I,R,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 A=x.originalFontSize>0?Math.round(x.originalLineHeight/x.originalFontSize*1e3)/1e3:1.2,O=ut.fontSize>0?Math.round(ut.lineHeight/ut.fontSize*1e3)/1e3:1.2;Ge(k,"line-height",`${O}`),G.push({property:"line-height",original:`${A}`,modified:`${O}`})}G.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:x.selector,durableSelector:(I=x.durableSelector)!=null?I: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},B(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 A=["space-between","space-around","stretch","normal"],O=x.originalJustifyContent||"normal",Y=A.indexOf(O),V=A[(Y+1)%A.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:(R=x.durableSelector)!=null?R: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 A=[];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`),A.push({property:"justify-content",original:x.originalJustifyContent,modified:"normal"}),A.push({property:"row-gap",original:"0px",modified:`${lt.row}px`}),A.push({property:"column-gap",original:"0px",modified:`${lt.column}px`})):(x.originalRow!==lt.row&&(Ge(k,"row-gap",`${lt.row}px`),A.push({property:"row-gap",original:`${x.originalRow}px`,modified:`${lt.row}px`})),x.originalColumn!==lt.column&&(Ge(k,"column-gap",`${lt.column}px`),A.push({property:"column-gap",original:`${x.originalColumn}px`,modified:`${lt.column}px`}))),A.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:x.selector,durableSelector:(W=x.durableSelector)!=null?W:void 0,element:x.elementInfo,changes:A}})}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"],A={"top-left":"border-top-left-radius","top-right":"border-top-right-radius","bottom-right":"border-bottom-right-radius","bottom-left":"border-bottom-left-radius"},O=[];for(let Y of G)x.original[Y]!==xt.radius[Y]&&(Ge(k,A[Y],`${xt.radius[Y]}px`),O.push({property:A[Y],original:`${x.original[Y]}px`,modified:`${xt.radius[Y]}px`}));O.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:x.selector,durableSelector:(ie=x.durableSelector)!=null?ie:void 0,element:x.elementInfo,changes:O}})}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},Zn(null);return}if(pe.current.isDragging){let x=pe.current,k=x.element,G=x.selector,A=x.elementInfo;if(k&&G&&A&&it){let O=x.original,Y=it.padding;k instanceof HTMLElement&&(k.style.removeProperty("padding"),k.style.removeProperty("transition"));let V=[],fe=[{prop:"padding-top",origVal:O.top,newVal:Y.top},{prop:"padding-right",origVal:O.right,newVal:Y.right},{prop:"padding-bottom",origVal:O.bottom,newVal:Y.bottom},{prop:"padding-left",origVal:O.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:A,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(v){if(!v.hasMoved&&v.annotation.type==="text"&&((q=v.annotation.status)!=null?q:"pending")==="pending"){let x=Io(m);P({id:v.annotation.id,point:v.annotation.points[0],text:v.annotation.text||"",fontSize:v.annotation.fontSize||12,isNew:!1,clickPoint:x,groupId:v.annotation.groupId})}j(null);return}if(!z)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),A=Math.abs(k.y-x.y);if((e.activeTool==="line"?Math.sqrt(G*G+A*A)<h:G<h&&A<h)&&["rectangle","circle","line"].includes(e.activeTool)){K(!1),t({type:"CANCEL_PATH"});return}}let U=ki(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),A=Math.max(x.y,k.y),O=e.strokeWidth/2,Y=Math.random().toString(36).substring(2,9);ye({point:{x:G-O+4,y:A+O+4},groupId:Y}),K(!1),t({type:"FINISH_PATH",payload:{groupId:Y,elements:U}});return}K(!1),t({type:"FINISH_PATH",payload:{elements:U}})},[z,v,le,it,xt,lt,ut,Io,t,e.activeTool,e.currentPath,e.strokeWidth]),uc=jt(m=>{let h=m.target.value;Mo.current=m.target.selectionStart,P(U=>U&&y(f({},U),{text:h}))},[]),pc=jt(m=>{m.key==="Escape"?P(null):m.key==="Enter"&&!m.shiftKey&&(m.preventDefault(),Ro())},[Ro]),fc=jt(m=>{if(!E)return;let h=m.clipboardData.items,U=[];for(let I=0;I<h.length;I++){let R=h[I];if(R.type.startsWith("image/")){let W=R.getAsFile();W&&U.push(W)}}U.length>0&&(m.preventDefault(),P(I=>I?y(f({},I),{images:[...I.images||[],...U]}):null))},[E]),gc=jt(m=>{if(!e.isAnnotating)return;if(e.activeTool==="hand"){m.preventDefault();let U=ke||Et||sn||Dt;if(U&&!Re(U)){let I=yn(U),R=wn(U);t({type:"SELECT_ELEMENT",payload:{el:U,info:y(f({},I),{selector:R})}})}return}m.preventDefault();let h=M.current;h&&(D.current=!0,h.style.pointerEvents="none",setTimeout(()=>{D.current&&(D.current=!1,h.style.pointerEvents="")},4e3))},[e.activeTool,e.isAnnotating,ke,Et,sn,Dt,t,Re,M]);an(()=>{let m=Tt.filter(ie=>ie.linkedSelector);if(m.length===0)return;let h=null,U=document.createElement("canvas").getContext("2d"),I=()=>{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 A=G.getBoundingClientRect(),O=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=(O?1:0)+Y,fe;if(k.text&&U){let qe=k.fontSize||12;U.font=`${qe}px ${Jt}`,fe=Math.max(...k.text.split(`
|
|
5
|
-
`).map(ue=>
|
|
6
|
-
`),W=
|
|
7
|
-
`).length)*E.fontSize*1.4+8:0,Ps=nr.height+8,bc=nr.isWrapped?Ps-yc:0,xc=E?{position:"fixed",left:E.point.x-4-Pe.x,top:E.point.y-4-Pe.y-bc,zIndex:9999,width:nr.width+8,height:Ps,padding:4,fontSize:E.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 Xo(Ko,{children:[rt("canvas",{ref:Z,id:"devtools-canvas",style:hc,onMouseDown:Ls,onMouseMove:As,onMouseUp:m=>ci(m),onMouseLeave:m=>{ci(m),Se(null),De(null)},onTouchStart:Ls,onTouchMove:As,onTouchEnd:m=>ci(m),onContextMenu:gc}),E&&Xo(Ko,{children:[rt("style",{children:"#devtools-text-input::placeholder { color: rgba(255, 255, 255, 0.5); }"}),rt("textarea",{id:"devtools-text-input",ref:Me,value:E.text,onChange:uc,onKeyDown:pc,onPaste:fc,onBlur:Ro,placeholder:"Type here...",style:xc}),E.images&&E.images.length>0&&Xo("div",{"data-devtools":!0,style:{position:"fixed",left:E.point.x-4-Pe.x,top:E.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:[E.images.length," image",E.images.length>1?"s":""," attached"]})]}),e.isAnnotating&&e.activeTool!=="hand"&&e.styleModifications.length>0&&rt(ql,{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:L,onHoverSelector:be}),e.activeTool==="hand"&&e.isAnnotating&&e.styleModifications.length>0&&rt(Ql,{styleModifications:e.styleModifications,accentColor:e.activeColor}),e.isAnnotating&&rt(zl,{annotations:Tt,supersededAnnotations:Rn,inFlightIds:r,scrollX:Pe.x,scrollY:Pe.y,annotationGroupMap:Sn,onViewThread:a,onSelectAnnotation:de,onHoverAnnotation:re,canvasRef:M}),e.isAnnotating&&l&&rt($l,{annotations:Tt,supersededAnnotations:Rn,scrollX:Pe.x,scrollY:Pe.y,onReply:l,annotationGroupMap:Sn,canvasRef:M,onHoverAnnotation:re}),e.isAnnotating&&i&&i.size>0&&rt(Di,{inFlightSelectorColors:i}),e.isAnnotating&&ai&&rt(Di,{inFlightSelectorColors:ai,animated:!1}),e.activeTool==="hand"&&e.isAnnotating&&(lt?bt.current.element:Et)&&rt(Wi,{element:lt?bt.current.element:Et,gap:lt?{row:lt.row,column:lt.column}:ar(Et),accentColor:e.activeColor,hoveredAxis:zt,draggingAxis:(Os=lt==null?void 0:lt.axis)!=null?Os:null,cursorViewport:St,isAutoGap:Fe,refreshKey:In}),e.activeTool==="hand"&&e.isAnnotating&&fn&&rt(ya,{element:fn.target,modifier:fn.modifier,accentColor:e.activeColor,refreshKey:In}),e.activeTool==="hand"&&e.isAnnotating&&!fn&&(xt?gt.current.element:sn)&&rt(Vl,{element:xt?gt.current.element:sn,radius:(Ns=xt==null?void 0:xt.radius)!=null?Ns:So(sn),accentColor:e.activeColor,hoveredCorner:Nt,draggingCorner:(Ds=xt==null?void 0:xt.corner)!=null?Ds:null,cursorViewport:St}),e.activeTool==="hand"&&e.isAnnotating&&!fn&&(ut?Pn.current.element:Dt)&&rt(ba,{element:ut?Pn.current.element:Dt,fontSize:(Hs=ut==null?void 0:ut.fontSize)!=null?Hs:cr(Dt).fontSize,lineHeight:(Fs=ut==null?void 0:ut.lineHeight)!=null?Fs:cr(Dt).lineHeight,accentColor:e.activeColor,hoveredProperty:gn,draggingProperty:(_s=ut==null?void 0:ut.property)!=null?_s:null,cursorViewport:St}),e.activeTool==="hand"&&e.isAnnotating&&!fn&&(it?pe.current.element:ke)&&rt(Ji,{element:it?pe.current.element:ke,padding:(zs=it==null?void 0:it.padding)!=null?zs:$o(ke),accentColor:e.activeColor,hoveredSide:We,draggingSide:($s=it==null?void 0:it.side)!=null?$s:null,cursorViewport:St,refreshKey:ut?ut.fontSize+ut.lineHeight*1e3:0}),e.activeTool==="inspector"&&e.isAnnotating&&rt(Ko,{children:ce&&!e.inspectedElement&&(()=>{let m=(E==null?void 0:E.linkedSelector)||(ae==null?void 0:ae.linkedSelector);if(m)try{if(ce.matches(m))return null}catch(U){}let h=!!ae||!!(E!=null&&E.linkedSelector)||Tt.some(U=>{if(!U.linkedSelector)return!1;try{return ce.matches(U.linkedSelector)}catch(I){return!1}});return rt($n,{element:ce,isSelected:!1,elementInfo:Be,color:e.activeColor,hideTooltip:h})})()}),((E==null?void 0:E.linkedSelector)||(ae==null?void 0:ae.linkedSelector))&&(()=>{let m=(E==null?void 0:E.linkedSelector)||(ae==null?void 0:ae.linkedSelector);if(!m)return null;let h=null;try{h=document.querySelector(m)}catch(U){}return h?rt($n,{element:h,isSelected:!0,color:e.activeColor,hideTooltip:!0}):null})(),T&&(()=>{let m=e.annotations.find(I=>I.id===T);if(!(m!=null&&m.linkedSelector))return null;let h=null;try{h=document.querySelector(m.linkedSelector)}catch(I){}if(!h)return null;let U=!!(r&&r.has(m.id));return rt($n,{element:h,isSelected:!U,color:m.color,hideTooltip:!0})})(),$&&(()=>{let m=e.annotations.find(R=>R.id===$);if(!(m!=null&&m.linkedSelector))return null;let h=null;try{h=document.querySelector(m.linkedSelector)}catch(R){}if(!h)return null;let U=m.groupId?e.annotations.filter(R=>R.groupId===m.groupId):[m],I=!!(r&&U.some(R=>r.has(R.id)));return rt($n,{element:h,isSelected:!I,color:m.color,hideTooltip:!0})})(),se&&(()=>{let m=null;try{m=document.querySelector(se)}catch(U){}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&&Qn.length>0&&Qn.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"?Xo(Ko,{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)})]}):Xo(Ko,{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&&Xo(Ko,{children:[Lt&&Lt!=="padding"&&Lt!=="gap"&&(()=>{var F;let m=new Set(Tt.map(q=>q.groupId||q.id)).size,h=e.inspectedElement.info.selector,U=e.styleModifications.findIndex(q=>q.selector===h),I=U>=0?m+U+1:m+e.styleModifications.length+1,R=e.styleModifications.find(q=>q.selector===h),W=(F=R==null?void 0:R.changes.length)!=null?F:0,ie=!!(R!=null&&R.captured);return rt($n,{element:e.inspectedElement.el,isSelected:!0,elementInfo:e.inspectedElement.info,color:ie?"#999999":e.activeColor,annotationNumber:I,changeCount:W})})(),Lt==="padding"&&rt(Ji,{element:e.inspectedElement.el,padding:$o(e.inspectedElement.el),accentColor:e.activeColor,hoveredSide:null,draggingSide:null}),Lt==="gap"&&rt(Wi,{element:e.inspectedElement.el,gap:ar(e.inspectedElement.el),accentColor:e.activeColor,hoveredAxis:null,draggingAxis:null}),rt(ma,{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:L})]})]})}import{useCallback as Tn,useEffect as bn,useMemo as yr,useRef as It,useState as br}from"react";import{Circle as Qp,Component as ef,Hand as tf,MessageCircle as nf,Pen as of,Slash as rf,Square as sf,Trash2 as lf,Type as af}from"lucide-react";import{useEffect as wa,useRef as Ca}from"react";function Ea(e,t,n,r,o){let i=Ca(0),s=Ca(t.annotations);wa(()=>{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]),wa(()=>{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 wp,createElement as Cp,useCallback as ei,useEffect as so,useRef as ko,useState as kn}from"react";import{Link2 as Ep}from"lucide-react";var ip={colors:[],fonts:[],typeScale:[],spacing:[],radii:[],shadows:[],other:[],references:{}},sp=/^#[0-9a-fA-F]{3,8}$/,lp=/^(?:rgba?|hsla?|oklch|oklab|lch|lab)\(/,ap=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 Ta(e){let t=e.trim().toLowerCase();return sp.test(t)||lp.test(t)||ap.has(t)}var cp=/^-?\d+(\.\d+)?(px|rem|em|%)$/;function cs(e){return cp.test(e.trim())}var ka=new Set(["serif","sans-serif","monospace","cursive","fantasy","system-ui","ui-serif","ui-sans-serif","ui-monospace","ui-rounded"]);function dp(e){let t=e.trim().toLowerCase();return!!(ka.has(t)||t.includes(",")&&t.split(",").some(n=>ka.has(n.trim().replace(/['"]/g,""))))}function up(e){let t=e.trim().toLowerCase(),n=t.match(/\d+(\.\d+)?px/g);return!!(n&&n.length>=2&&(Ta(t.replace(/[^#()\w,.\s/%]/g,"").split(/\s+/).pop()||"")||t.includes("rgb")||t.includes("hsl")||t.includes("#")))}var pp=/(?:^--(color|bg|fg|accent|border-color|text-color|surface|background|foreground))|(?:-(color|bg|fg)$)/i,fp=/^--(font-family|font|ff|family)/i,gp=/^--(font-size|text-size|fs|text-(?:xs|sm|base|md|lg|xl|2xl|3xl|4xl|5xl))/i,mp=/^--(space|gap|padding|margin|inset)/i,hp=/^--(radius|rounded|br|border-radius)/i,yp=/^--(shadow|elevation|drop-shadow)/i;function Ma(e,t){let n=e.toLowerCase();return yp.test(n)?"shadows":hp.test(n)?"radii":fp.test(n)?"fonts":gp.test(n)&&cs(t)?"typeScale":pp.test(n)||Ta(t)?"colors":dp(t)?"fonts":up(t)?"shadows":mp.test(n)&&cs(t)||cs(t)?"spacing":"other"}function Ia(e,t,n,r){if(e)for(let o of e){if(o instanceof CSSGroupingRule){Ia(o.cssRules,t,n,r);continue}if(o instanceof CSSStyleRule){let i=o.selectorText.toLowerCase();(i===":root"||i==="html"||i==="*"||i.includes(":root"))&&bp(o.style,t,n,r)}}}var Ra=/var\((--[^,)]+)/;function bp(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=Ma(i,s);r[l].push([i,s]);let d=e.getPropertyValue(i).trim().match(Ra);d&&(r.references[i]=d[1])}}function Kr(e){let t=e.trim().match(/^(-?\d+(?:\.\d+)?)/);return t?parseFloat(t[1]):null}function Zr(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 La(e){return e==="colors"?(t,n)=>{let r=Zr(t[1]),o=Zr(n[1]);return r!==null&&o!==null?r-o:t[0].localeCompare(n[0])}:e==="typeScale"||e==="spacing"||e==="radii"?(t,n)=>{let r=Kr(t[1]),o=Kr(n[1]);return r!==null&&o!==null?r-o:t[0].localeCompare(n[0])}:e==="other"?(t,n)=>{let r=Kr(t[1]),o=Kr(n[1]);return r!==null&&o!==null?r-o:t[0].localeCompare(n[0])}:(t,n)=>t[0].localeCompare(n[0])}function xp(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 Aa(e){let t=new Map;for(let o of e){let i=xp(o[0]),s=t.get(i);s||(s=[],t.set(i,s)),s.push(o)}let n=La("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=Zr(o[1][0][1]))!=null?a:0,l=(d=Zr(i[1][0][1]))!=null?d:0;return s-l}),r}var vp=["colors","fonts","typeScale","spacing","radii","shadows","other"],qr=null,Sp=5e3;function Pa(){if(typeof document=="undefined")return ip;if(qr&&Date.now()-qr.timestamp<Sp)return qr.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{Ia(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=Ma(i,s);e[l].push([i,s]);let d=r.getPropertyValue(i).trim().match(Ra);d&&(e.references[i]=d[1])}for(let o of vp)e[o].sort(La(o));return qr={tokens:e,timestamp:Date.now()},e}import{Fragment as qo,jsx as _e,jsxs as nn}from"react/jsx-runtime";var Ba="popmelt-library-tab",kp=/^#[0-9a-fA-F]{3,8}$/,Tp=/^(?:rgba?|hsla?|oklch)\([^)]+\)$/,Mp=new Set(["black","white","red","blue","green","yellow","orange","purple","pink","gray","grey","cyan","magenta","brown","navy","teal","maroon","olive","silver","aqua","fuchsia","lime"]),Ip=/^-?\d+(\.\d+)?(px|rem|em|%)$/;function Na(e){let t=e.trim();return kp.test(t)||Tp.test(t)||Mp.has(t.toLowerCase())}function Rp(e){return Ip.test(e.trim())}function Lp(e){let t=e.trim().match(/^(-?\d+(?:\.\d+)?)px$/);return t?parseFloat(t[1]):null}function Da(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(...Da(o,i))}else n.push([i,Array.isArray(o)?o.map(String).join(", "):String(o!=null?o:"")])}return n}function Ap(e){return e.length===0?"generic":e.filter(([,r])=>Na(r)).length>e.length/2?"colors":e.filter(([,r])=>Rp(r)).length>e.length/2?"spacing":"generic"}var Pp=y(f({position:"fixed",top:16,right:16,bottom:80,width:300,backgroundColor:"#eaeaea"},ro),{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"}),Ha={border:"none",background:"none",cursor:"pointer",fontFamily:"inherit",fontSize:11,fontWeight:600,padding:"2px 0",color:"#9ca3af"},Bp=y(f({},Ha),{color:"#1f2937",borderBottom:"1.5px solid #1f2937"});function Op({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(Ep,{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 Fa({entries:e,references:t}){let n=[],r=[];for(let i of e)Na(i[1])?n.push(i):r.push(i);let o=Aa(n);return nn(qo,{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(Op,{varName:l,value:a,reference:t[l]},l))})]},i)),r.length>0&&_e(ti,{entries:r})]})}var Qr=[0,1,2,4,8,12,16,20,24,28,32];function Np(e){if(e<=32){let t=Qr[0],n=Math.abs(e-t);for(let r=1;r<Qr.length;r++){let o=Math.abs(e-Qr[r]);o<n&&(t=Qr[r],n=o)}return t}return Math.round(e/8)*8}function Dp({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=ko(!1),g=ko(0),C=ko(0),S=ko([]),b=c!==null?c:n,T=c!==null?`${c}px`:t,N=c!==null,L=ei(w=>{w.preventDefault(),u.current=!0,g.current=w.clientX,C.current=n;let H=Br(o);S.current=Mi(H);let Z=z=>{let K=z.clientX-g.current,E=Math.max(0,Math.round(C.current+K));z.shiftKey&&(E=Np(E));for(let P of S.current)P.element.style.setProperty(P.property,E+"px","important");p(E),i==null||i({name:e,px:E,token:H})},D=()=>{window.removeEventListener("mousemove",Z),window.removeEventListener("mouseup",D),document.body.style.cursor="",u.current=!1,p(z=>{if(z!==null&&z!==n&&s){let K=Br(o),E=K.bindings&&K.bindings.length>0,P;if(E){let ye=Ri(K.bindings,C.current,z);P=JSON.stringify(y(f({},K),{value:`${z}px`,bindings:ye}))}else{let ye=Al(S.current,C.current),ae=Pl(S.current);if(ye.length>0){let ze=Ri(ye,C.current,z);P=JSON.stringify({value:`${z}px`,property:ae,bindings:ze})}else P=`${z}px`}let J=typeof o=="string"?o:JSON.stringify(o),ge=S.current.map(ye=>({selector:wn(ye.element),property:ye.property})),ve=Ol(S.current,C.current,z);s({tokenPath:r,originalValue:J,currentValue:P,targets:ge,originalPx:C.current,currentPx:z},{id:Math.random().toString(36).substring(2,9),tokenPath:r,tokenName:e,originalPx:C.current,newPx:z,affectedElements:ve})}return z})};document.body.style.cursor="ew-resize",window.addEventListener("mousemove",Z),window.addEventListener("mouseup",D)},[n,e,r,o,i,s]),M=Br(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:b,token:M}))},onMouseLeave:()=>{u.current||(d(!1),i==null||i(null))},onMouseDown:L,children:[_e("span",{style:{color:a||N?"#FF0000":"#9ca3af"},children:e}),nn("span",{style:{display:"flex",alignItems:"center",gap:4},children:[_e("span",{style:{color:a||N?"#FF0000":"#6b7280",fontWeight:600},children:T}),l&&a&&!N&&_e("button",{type:"button",title:"Remove token",onMouseDown:w=>{w.stopPropagation();let H=typeof o=="string"?o:JSON.stringify(o);l(r,H)},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 Hp({entries:e,categoryKey:t,rawTokens:n,onHover:r,onModify:o,onDelete:i}){let s=[],l=[];for(let a of e){let d=Lp(a[1]);d!==null?s.push([a[0],a[1],d]):l.push(a)}return nn(qo,{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?Fp(n,a):d,g=u&&typeof u=="object"&&"value"in u?u:d;return _e(Dp,{label:p,value:d,px:c,tokenPath:`tokens.${t}.${a}`,rawToken:g,onHover:r,onModify:o,onDelete:i},a)})}),l.length>0&&_e(ti,{entries:l})]})}function Fp(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 ti({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 _p({entries:e,categoryKey:t,rawTokens:n,onSpacingHover:r,onModifyToken:o,onDeleteToken:i}){let s=Ap(e);return s==="colors"?_e(Fa,{entries:e}):s==="spacing"?_e(Hp,{entries:e,categoryKey:t,rawTokens:n,onHover:r,onModify:o,onDelete:i}):_e(ti,{entries:e})}function zp(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 ds=class extends wp{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}},_a="popmelt-principles-collapsed";function $p(){try{let e=localStorage.getItem(_a);if(e)return new Set(JSON.parse(e))}catch(e){}return new Set}function Wp(e){try{localStorage.setItem(_a,JSON.stringify([...e]))}catch(t){}}function Yp({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 jp={colors:"Colors",fonts:"Fonts",typeScale:"Type Scale",spacing:"Spacing",radii:"Radii",shadows:"Shadows",other:"Other"},Oa=["colors","fonts","typeScale","spacing","radii","shadows","other"];function Gp(){let[e,t]=kn(null),[n,r]=kn($p);so(()=>{t(Pa())},[]);let o=ei(s=>{r(l=>{let a=new Set(l);return a.has(s)?a.delete(s):a.add(s),Wp(a),a})},[]);return e?Oa.some(s=>e[s].length>0)?_e(qo,{children:Oa.map(s=>{let l=e[s];return l.length===0?null:_e(Yp,{id:s,label:jp[s],count:l.length,collapsed:n.has(s),onToggle:o,children:s==="colors"?_e(Fa,{entries:l,references:e.references}):_e(ti,{entries:l})},s)})}):_e("div",{style:{color:"#9ca3af",fontSize:11},children:"No :root tokens found."}):null}function Vp({rules:e}){return!e||e.length===0?_e("div",{style:{color:"#9ca3af",fontSize:11},children:"No rules defined yet."}):_e(qo,{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 Up({name:e,value:t,selected:n,highlighted:r,onRemove:o,onHover:i}){var z;let[s,l]=kn(!1),[a,d]=kn(!1),c=ko(null),p=ko(0),[u,g]=kn(0),[C,S]=kn(0),b=Da(t),T=(z=b.find(([K])=>K==="description"))==null?void 0:z[1];so(()=>{if(!a&&!r){g(0),S(0),p.current=0;return}let K=_o(e);g(K.length)},[a,r,e]),so(()=>{n&&c.current&&c.current.scrollIntoView({behavior:"smooth",block:"nearest"})},[n]);let N=n||r||a,L=n?"139,92,246":"34,197,94",M=n?"#8b5cf6":"#22c55e",w=N?`rgba(${L},0.06)`:void 0,H=N?`inset 0 0 0 1.5px rgba(${L},0.35)`:void 0,Z=r||a,D=ei(()=>{let K=_o(e);if(K.length===0)return;let E=p.current%K.length;K[E].rootElement.scrollIntoView({behavior:"smooth",block:"center"}),S(E),p.current=E+1,i==null||i({name:e,instanceIndex:E})},[e,i]);return nn("div",{ref:c,onClick:D,onMouseEnter:()=>{d(!0),i==null||i({name:e,instanceIndex:0})},onMouseLeave:()=>{d(!1),i==null||i(null)},style:{marginBottom:8,background:w,padding:6,boxShadow:H,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?M:"transparent",color:Z?"#fff":"#6b7280"},children:e}),Z&&u>1&&nn("span",{style:{fontSize:10,fontWeight:600,color:"#9ca3af"},children:[C+1,"/",u]})]}),o&&a&&_e("button",{type:"button",title:"Remove from model",onClick:K=>{K.stopPropagation(),o(e)},style:{border:"none",background:"none",cursor:"pointer",padding:"0 2px",fontSize:14,lineHeight:1,color:"#9ca3af",marginTop:-4},onMouseEnter:K=>{K.currentTarget.style.color="#FF0000"},onMouseLeave:K=>{K.currentTarget.style.color="#9ca3af"},children:"\u2715"})]}),T&&_e("div",{style:{fontSize:11,color:Z?"#1f2937":"#9ca3af",marginBottom:6,lineHeight:1.4},children:T}),s?_e(_p,{entries:b.filter(([K])=>K!=="description"),categoryKey:""}):_e(Jp,{name:e,onNotFound:()=>l(!0),entries:b})]})}function Jp({name:e,onNotFound:t}){let[n,r]=kn(null),[o,i]=kn(!1);return so(()=>{let s=zp(e);s||t(),r(s),i(!0)},[e,t]),!o||!n?null:_e(ds,{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:Cp(n.type,n.props)})})})}function Xp({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=Ei(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(qo,{children:l.map(([a,d])=>_e(Up,{name:a,value:d,selected:t===a,highlighted:n===a,onRemove:r,onHover:o},a))})}function za({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),[C,S]=kn(!0),[b,T]=kn(()=>{try{let D=localStorage.getItem(Ba);if(D==="patterns"||D==="principles"||D==="rules")return D}catch(D){}return"patterns"});so(()=>{Ao(e).then(D=>{g(D),S(!1)})},[e,t]),so(()=>{try{localStorage.setItem(Ba,b)}catch(D){}},[b]),so(()=>{o&&(T("patterns"),Ao(e).then(D=>{D&&g(D)}))},[o,e]);let N=ei(D=>{g(z=>{if(!(z!=null&&z.components))return z;let P=z.components,{[D]:K}=P,E=to(P,[Er(D)]);return y(f({},z),{components:E})}),p==null||p(D)},[p]),L=u==null?void 0:u.components,M=u==null?void 0:u.rules,w=L&&Object.keys(L).length>0,H=M&&M.length>0,Z=ko(null);return so(()=>{let D=Z.current;if(!D)return;let z=n,K=r;return z&&D.addEventListener("mouseenter",z),K&&D.addEventListener("mouseleave",K),()=>{z&&D.removeEventListener("mouseenter",z),K&&D.removeEventListener("mouseleave",K)}},[n,r]),nn("div",{ref:Z,style:Pp,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(D=>_e("button",{type:"button",style:b===D?Bp:Ha,onClick:()=>T(D),children:D.charAt(0).toUpperCase()+D.slice(1)},D))}),_e("div",{style:{flex:1,overflowY:"auto",minHeight:0},children:b==="principles"?_e(Gp,{}):C?_e("div",{style:{color:"#9ca3af",fontSize:11},children:"Loading..."}):!u||!w&&!H?_e("div",{style:{color:"#9ca3af",lineHeight:1.5},children:"No design model yet. Pattern-scoped annotations will build one automatically."}):nn(qo,{children:[b==="patterns"&&_e(Xp,{components:L,selectedComponent:o,hoveredComponent:i,onRemove:N,onHover:s}),b==="rules"&&_e(Vp,{rules:M})]})})]})}import{jsx as Zo}from"react/jsx-runtime";var Kp="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",qp="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 us({size:e=16,style:t}){return Zo("svg",{width:e,height:e,viewBox:"0 0 1200 1200",fill:"currentColor",stroke:"none",style:f({flexShrink:0},t),children:Zo("path",{d:Kp})})}function ps({size:e=16,style:t}){return Zo("svg",{width:e,height:e,viewBox:"0 0 158.7128 157.296",fill:"currentColor",stroke:"none",style:f({flexShrink:0},t),children:Zo("path",{d:qp})})}function fs({provider:e,size:t=16,style:n}){return e==="codex"?Zo(ps,{size:t,style:n}):Zo(us,{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 Zp=[...mr,...hr];function gs(e,t){if(!e)return t==="codex"?"Codex":"Claude Code";let n=Zp.find(r=>r.id===e);return n?n.label:e.replace(/-\d{8,}$/,"")}import{jsx as Wa}from"react/jsx-runtime";var Xn={iconDefault:"#1f2937",iconActive:"#1f2937",bgActive:"#dedede",bgHover:"#e2e2e2",separator:"#e5e7eb"};function lo({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?Xn.bgActive:"transparent",color:t?Xn.iconActive:Xn.iconDefault,opacity:s()};return Wa("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=Xn.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 $a(){return Wa("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 To=[{type:"rectangle",icon:sf,label:"Rectangle",shortcut:"R"},{type:"circle",icon:Qp,label:"Oval",shortcut:"O"},{type:"line",icon:rf,label:"Line",shortcut:"L"},{type:"freehand",icon:of,label:"Pen",shortcut:"P"}],cf=new Set(To.map(e=>e.type));function df(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 uf(){let e=window.innerWidth-16,t=e-326,n=window.innerHeight-80;return{left:t,right:e,y:n}}var pf=[{type:"text",icon:af,label:"Text",shortcut:"T"}],Ya={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.
|
|
9
9
|
|
|
10
|
-
Your AI gets the visual and technical context it needs to act.`,usage:[],keys:[{key:"\u2318\u2318",desc:"Toggle toolbar"}]}},ff={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)"},ms="devtools-toolbar-expanded",hs="devtools-annotations",ys="devtools-style-modifications",bs="devtools-active-tool",ja="devtools-active-color",Ga="devtools-stroke-width",Va="devtools-inspected-element",xs="devtools-spacing-changes",gf={expanded:ms,annotations:hs,styleMods:ys,spacingChanges:xs,tool:bs,color:ja,stroke:Ga,inspected:Va};function Ua({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:C,onViewThread:S,isThreadPanelOpen:b,mcpStatus:T,onInstallMcp:N,mcpJustInstalled:L,bridgeUrl:M,isBridgeConnected:w,modelSelectedComponent:H,modelCanvasHoveredComponent:Z,onModelComponentHover:D,onSpacingTokenHover:z,onModifySpacingToken:K,onDeleteSpacingToken:E,modelRefreshKey:P,onModelComponentAdded:J,onModelComponentRemoved:ge,onMouseEnter:ve,toolbarRef:ye}){let[ae,ze]=br(()=>typeof window=="undefined"?!1:localStorage.getItem(ms)==="true"),[Me,ne]=br(0),He=It(0),Ne=It(0),Ve=It(e.isAnnotating),$e=It(!1),Ie=It(typeof window!="undefined"?localStorage.getItem(bs):null),st=It(typeof window!="undefined"?localStorage.getItem(ja):null),ct=It(typeof window!="undefined"?localStorage.getItem(Ga):null),[_,xe]=br(null),ce=It(!1),Se=It(null),Be=It(null),De=It(null),$=It({x:0,y:0}),re=It(null),se=It(null),be=It(null),pe=Tn(()=>{re.current=null,se.current=null,be.current&&(clearTimeout(be.current),be.current=null)},[]),ke=Tn(B=>{Be.current&&(clearTimeout(Be.current),Be.current=null),ce.current?(re.current=B,se.current=f({},$.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(B),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 B=De.current;if(!B)return;let X=()=>{pe(),Be.current&&(clearTimeout(Be.current),Be.current=null)},te=()=>{Be.current=setTimeout(()=>{ce.current=!1,xe(null)},150)};return B.addEventListener("mouseenter",X),B.addEventListener("mouseleave",te),()=>{B.removeEventListener("mouseenter",X),B.removeEventListener("mouseleave",te)}},[_,pe]);let We=Tn(B=>{if($.current={x:B.clientX,y:B.clientY},re.current&&se.current){let X=se.current,te=uf();df(B.clientX,B.clientY,X.x,X.y,te.left,te.y,te.right,te.y)||(xe(re.current),pe())}},[pe]),Xe=yr(()=>{let B=(c!=null?c:[]).map(X=>X==="claude"?"Claude":X==="codex"?"Codex":X);return{name:"AI Model",desc:B.length>1?`${B.join(" and ")} are available.`:B.length===1?`Connected to ${B[0]}.`:"No AI providers detected.",usage:B.length>1?["Click the logo to switch between providers","Click the model name to switch tiers"]:["Click the model name to switch tiers"],keys:B.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]);Ea(ae,e,$e,!!o,gf),bn(()=>{let B=new URLSearchParams(window.location.search);if(!B.has("popmelt"))return;let X=document.createElement("style");X.textContent="nextjs-portal, vite-error-overlay { display: none !important; }",document.head.appendChild(X);let te=parseInt(B.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 X;if(localStorage.getItem(ms)==="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(hs);if(te)try{let Le=JSON.parse(te);if(Array.isArray(Le)&&Le.length>0){for(let v of Le)(v.status==="waiting_input"||v.status==="in_flight")&&(v.status=v.threadId?"resolved":"pending");t({type:"RESTORE_ANNOTATIONS",payload:{annotations:Le}})}}catch(Le){}let Re=localStorage.getItem(ys);if(Re)try{let Le=JSON.parse(Re);Array.isArray(Le)&&Le.length>0&&(t({type:"RESTORE_STYLE_MODIFICATIONS",payload:Le}),Dr(Le))}catch(Le){}let he=localStorage.getItem(xs);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(Va);if(Ue)try{let{selector:Le,info:v}=JSON.parse(Ue);if(Le){let j=pn(Le);if(j){let ee=v||y(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 v=te?(X=JSON.parse(te))!=null?X:[]:[];requestAnimationFrame(()=>{t({type:"SELECT_ANNOTATION",payload:{id:Le}});let j=v.find(ee=>ee.id===Le);if(j){let de=(j.groupId?v.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 Lt=It(e.styleModifications);bn(()=>{let B=Lt.current,X=e.styleModifications;B!==X&&(Hr(B),Dr(X),Lt.current=X)},[e.styleModifications]),bn(()=>{let B=Ve.current;Ve.current=e.isAnnotating,B&&!e.isAnnotating&&ae&&ze(!1)},[e.isAnnotating,ae]);let Gt=It(ae);Gt.current=ae,bn(()=>{let B=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(bs);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},X=te=>{te.key!=="Meta"&&te.key!=="Control"&&(Ne.current=0)};return window.addEventListener("keydown",B),window.addEventListener("keyup",X),()=>{window.removeEventListener("keydown",B),window.removeEventListener("keyup",X)}},[t]);let it=Tn(B=>{pe(),t({type:"SET_TOOL",payload:B}),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(()=>{Hr(e.styleModifications),document.querySelectorAll("[data-pm]").forEach(B=>B.removeAttribute("data-pm")),t({type:"CLEAR"}),t({type:"CLEAR_ALL_STYLES"}),localStorage.removeItem(hs),localStorage.removeItem(ys),localStorage.removeItem(xs),Nt(null),l==null||l()},[t,e.styleModifications,l]),[bt,Et]=br(()=>{if(st.current){let B=st.current.match(/oklch\([^)]*\s+([\d.]+)\s*\)/);if(B!=null&&B[1])return parseFloat(B[1])}return 29}),rn=It(null),zt=It(null),Mn=It(!1),lt=Tn(B=>{let X=B.match(/oklch\([^)]*\s+([\d.]+)\s*\)/);return X&&X[1]?parseFloat(X[1]):null},[]);bn(()=>{Mn.current=!0;let B=`oklch(0.628 0.258 ${bt})`;t({type:"SET_COLOR",payload:B}),requestAnimationFrame(()=>{Mn.current=!1})},[bt,t]),bn(()=>{if(Mn.current)return;let B=lt(e.activeColor);B!==null&&Math.abs(B-bt)>.5&&Et(B)},[e.activeColor,lt,bt]);let Q=e.annotations.length>0;bn(()=>{let B=zt.current;if(!B||!Q)return;let X=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 B.addEventListener("wheel",X,{passive:!1}),()=>B.removeEventListener("wheel",X)},[Q,e.selectedAnnotationIds,e.lastSelectedId,bt,t]);let Fe=It(!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=No(),fn=yr(()=>e.annotations.filter(B=>!B.pathname||B.pathname===$t),[e.annotations,$t]),dn=yr(()=>$r(e.annotations),[e.annotations]),gt=yr(()=>{let B=[],X=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(!X.has(Re.groupId)){X.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));B.push({id:Ue.id,pathname:Re.pathname,annotations:he,timestamp:Je})}}else B.push({id:Re.id,pathname:Re.pathname,annotations:[Re],timestamp:Re.timestamp});return B},[e.annotations,dn]),sn=yr(()=>gt.filter(B=>!B.pathname||B.pathname===$t),[gt,$t]),[At,Nt]=br(null),qt=gt.length+e.styleModifications.length;bn(()=>{(qt===0||At!==null&&At>=qt)&&Nt(null)},[qt,At]),bn(()=>{if(e.selectedAnnotationIds.length===0&&!e.inspectedElement){Nt(null);return}if(e.selectedAnnotationIds.length>0){let B=e.selectedAnnotationIds[0],X=gt.findIndex(te=>te.id===B||te.annotations.some(Re=>Re.id===B));X>=0&&X!==At&&Nt(X)}},[e.selectedAnnotationIds,e.inspectedElement,gt]);let xt=Tn(()=>{var X;if(qt===0)return;let B;if(At===null?B=0:At+1>=qt?B=null:B=At+1,Nt(B),B===null){t({type:"SELECT_ANNOTATION",payload:{id:null}}),t({type:"SELECT_ELEMENT",payload:null});return}if(B<gt.length){let te=gt[B];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=To.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)),v=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+v)/2,we=(j+ee)/2;if(window.scrollTo({left:de-window.innerWidth/2,top:we-window.innerHeight/2,behavior:"smooth"}),b&&S){let le=(X=te.annotations.find(ot=>ot.threadId))==null?void 0:X.threadId;le&&S(le)}}else{let te=B-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,At,t,lt,b,S]);bn(()=>{if(!ae)return;let B=X=>{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((X.metaKey||X.ctrlKey)&&X.key==="Enter"){r&&(e.annotations.length>0||e.styleModifications.length>0||e.spacingTokenChanges.filter(Je=>!Je.captured).length>0)&&(X.preventDefault(),Kt());return}if((X.metaKey||X.ctrlKey)&&(X.key==="c"||X.key==="C"||X.code==="KeyC")){(e.annotations.length>0||e.styleModifications.length>0)&&(X.preventDefault(),window.focus(),Vt());return}if((X.metaKey||X.ctrlKey)&&(X.key==="Backspace"||X.key==="Delete")){X.preventDefault(),Ot();return}if(X.metaKey||X.ctrlKey||X.altKey)return;let Re={p:"freehand",l:"line",r:"rectangle",o:"circle",t:"text",c:"inspector",h:"hand"};if(X.key.toLowerCase()==="m"){X.preventDefault(),it("model");return}let he=Re[X.key.toLowerCase()];if(he){X.preventDefault();let Je=To.findIndex(Le=>Le.type===he);Je>=0&&ne(Je),it(he)}};return window.addEventListener("keydown",B),()=>window.removeEventListener("keydown",B)},[ae,it,Vt,Kt,r,Ot,e.annotations.length,e.styleModifications.length,e.spacingTokenChanges,_]);let Zn=y(f({},ff),{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>`,Yn=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=w===!1?"rgba(239, 68, 68, 0.4)":o&&i?i:Xn.iconActive,mn=It(null);bn(()=>{if(!ae)return;let B=mn.current;if(!B)return;let X=()=>{s==null||s(!0),ke("collapse")},te=()=>{s==null||s(!1),oe()};return B.addEventListener("mouseenter",X),B.addEventListener("mouseleave",te),()=>{B.removeEventListener("mouseenter",X),B.removeEventListener("mouseleave",te)}},[ae,o,s,ke,oe]);let ut=It(null);return bn(()=>{if(ae)return;let B=ut.current;if(!B)return;let X=B.querySelector("[data-popmelt-logo]"),te=()=>{B.style.opacity="1",!o&&X&&(X.style.fill="#000"),ve==null||ve()},Re=()=>{B.style.opacity=o?"1":"0.5",!o&&X&&(X.style.fill="none")};return B.addEventListener("mouseenter",te),B.addEventListener("mouseleave",Re),()=>{B.removeEventListener("mouseenter",te),B.removeEventListener("mouseleave",Re)}},[ae,o,ve]),ae?Mt(xr,{children:[Ce("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:`
|
|
11
11
|
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
|
|
12
12
|
@keyframes popmelt-border-march { to { background-position: 0 -5px; } }
|
|
13
|
-
`}),Ce("div",{id:"devtools-scrim",style:{position:"fixed",inset:0,backgroundColor:"rgba(0, 0, 0, 0.06)",zIndex:9997,pointerEvents:"none"}}),!
|
|
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(`
|
|
14
14
|
|
|
15
|
-
`).map((X,te)=>Ce("p",{style:{margin:0,marginTop:te>0?8:0},children:X},te))}),B.usage.map((X,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:X})]},te)),_==="collapse"&&T&&Object.keys(T).length>0&&(()=>{let X=Object.entries(T).filter(([,he])=>he.found&&!he.disabled).map(([he])=>he.charAt(0).toUpperCase()+he.slice(1)),te=Object.entries(T).filter(([,he])=>!he.found).map(([he])=>he);if(X.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:X.length>0?"#22c55e":"rgba(0,0,0,0.2)",flexShrink:0}}),X.length>0?Mt("span",{style:{color:"#6b7280",display:"flex",alignItems:"center",gap:6},children:[Mt("span",{children:["Registry available in ",X.join(", "),L&&" \u2014 restart CLI to activate"]}),te.length>0&&N&&!L&&Mt("button",{type:"button",onClick:he=>{he.stopPropagation(),N()},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&&N?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(),N()},style:{border:"none",background:"#1f2937",color:"#fff",fontSize:10,fontWeight:600,fontFamily:"inherit",padding:"2px 8px",cursor:"pointer",pointerEvents:"auto"},children:"Connect"})]}):null]})})(),B.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:B.keys.slice(1).map((X,te)=>Mt("div",{style:{display:"flex",alignItems:"center",gap:8,fontSize:11,color:X.accent?"#fff":"#6b7280"},children:[Ce("code",{style:{fontSize:10,backgroundColor:X.accent?e.activeColor:"rgba(0,0,0,0.06)",color:X.accent?"#fff":void 0,padding:"1px 4px",whiteSpace:"nowrap"},children:X.key}),Ce("span",{style:{color:X.accent?e.activeColor:void 0,fontWeight:X.accent?600:void 0},children:X.desc})]},te))}),_==="counter"&>.length>0&&(()=>{let X=new Map;for(let he of gt){let Ue=he.pathname||$t;X.has(Ue)||X.set(Ue,[]),X.get(Ue).push(he)}let te=[...X.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),v=(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:v})]},Je.id)})},he))})})()]})})(),Mt("div",{ref:B=>{ye&&(ye.current=B)},id:"devtools-toolbar",style:Zn,onMouseEnter:ve,onMouseMove:We,children:[Yn,Mt("div",{style:{display:"flex",flexDirection:"row",gap:4,alignItems:"center"},children:[Ce("span",{onMouseEnter:()=>ke("inspector"),onMouseLeave:oe,children:Ce(lo,{active:e.isAnnotating&&e.activeTool==="inspector",siblingActive:e.isAnnotating,onClick:()=>it("inspector"),children:Ce(nf,{size:20,strokeWidth:1.5})})}),Ce("span",{onMouseEnter:()=>ke("hand"),onMouseLeave:oe,children:Ce(lo,{active:e.isAnnotating&&e.activeTool==="hand",siblingActive:e.isAnnotating,onClick:()=>it("hand"),children:Mt("div",{style:{position:"relative",display:"flex",alignItems:"center",justifyContent:"center"},children:[Ce(tf,{size:20,strokeWidth:1.5}),e.styleModifications.filter(B=>!B.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(B=>!B.captured).length})]})})}),(()=>{let B=To[Me],X=B.icon,te=e.isAnnotating&&cf.has(e.activeTool);return Ce("span",{onMouseEnter:()=>ke(B.type),onMouseLeave:oe,children:Mt("div",{style:{display:"flex",alignItems:"center",gap:0},children:[Ce(lo,{active:te,siblingActive:e.isAnnotating,onClick:()=>it(B.type),children:Ce(X,{size:20,strokeWidth:1.5})}),Ce("button",{type:"button",onClick:()=>{let Re=(Me+1)%To.length;ne(Re),it(To[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:To.map((Re,he)=>Ce("div",{style:{width:3,height:3,borderRadius:"50%",backgroundColor:he===Me?Xn.iconDefault:"rgba(0,0,0,0.2)",transition:"background-color 150ms ease"}},he))})]})})})(),pf.map(({type:B,icon:X,label:te,shortcut:Re})=>Ce("span",{onMouseEnter:()=>ke(B),onMouseLeave:oe,children:Ce(lo,{active:e.isAnnotating&&e.activeTool===B,siblingActive:e.isAnnotating,onClick:()=>it(B),children:Ce(X,{size:20,strokeWidth:1.5})})},B)),Ce("span",{onMouseEnter:()=>ke("model"),onMouseLeave:oe,children:Ce(lo,{active:e.isAnnotating&&e.activeTool==="model",siblingActive:e.isAnnotating,onClick:()=>it("model"),children:Ce(ef,{size:17,strokeWidth:1.5})})})]}),Ce($a,{}),Mt("div",{style:{display:"flex",flexDirection:"row",gap:4,alignItems:"center"},children:[(gt.length>0||e.styleModifications.length>0||e.spacingTokenChanges.filter(B=>!B.captured).length>0)&&(()=>{var he;let B=At!==null&&At<gt.length?gt[At]:null,X=e.annotations.length>0&&e.annotations.every(Ue=>Ue.status&&Ue.status!=="pending"),te=At!==null?(he=B==null?void 0:B.annotations.some(Ue=>Ue.status&&Ue.status!=="pending"))!=null?he:!1:X,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(At!==null)return Mt(xr,{children:[At+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(lo,{siblingActive:e.isAnnotating,onClick:Ot,title:"Clear all (\u2318\u232B)",children:Ce(lf,{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(lo,{onClick:()=>d(a==="claude"?"codex":"claude"),children:a==="claude"?Ce(us,{}):Ce(ps,{})}),Mt("button",{type:"button",onClick:()=>{let B=(p+1)%u;C==null||C(B)},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:Xn.iconDefault,whiteSpace:"nowrap"},children:[Ce("span",{children:g}),Ce("span",{style:{display:"flex",flexDirection:"column",gap:2},children:Array.from({length:u},(B,X)=>Ce("div",{style:{width:3,height:3,borderRadius:"50%",backgroundColor:X===p?Xn.iconDefault:"rgba(0,0,0,0.2)",transition:"background-color 150ms ease"}},X))})]})]})})]}),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:`
|
|
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:`
|
|
16
16
|
@keyframes popmelt-border-march { to { background-position: 0 -5px; } }
|
|
17
|
-
`}),Mt("div",{ref:B=>{ut.current=B,ye&&(ye.current=B)},id:"devtools-toolbar",style:y(f({},Zn),{overflow:"visible",opacity:o?1:.5,transition:"opacity 150ms ease"}),children:[Yn,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{useEffect as Qo,useRef as mf,useState as vs}from"react";import{Fragment as Xa,jsx as Bt,jsxs as vr}from"react/jsx-runtime";var hf={position:"fixed",bottom:86,right:16,zIndex:9999,display:"flex",flexDirection:"column"},yf=24,bf=6,xf=yf-bf,vf=8,Ja=y(f({display:"flex",alignItems:"center",gap:6,padding:"4px 10px",backgroundColor:"rgba(255, 255, 255, 0.85)"},ro),{backdropFilter:"blur(32px)",fontFamily:"ui-monospace, SFMono-Regular, Menlo, monospace",fontSize:11,color:"#1f2937",whiteSpace:"nowrap",transition:"transform 200ms ease, opacity 200ms ease"});function Sf(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 wf(e){let t=e.replace(/^Error:\s*/i,"");return t.length>40?t.slice(0,37)+"...":t}function Cf(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 Ef({color:e}){let[t,n]=vs(0);return Qo(()=>{let r=setInterval(()=>{n(o=>(o+1)%2)},250);return()=>clearInterval(r)},[]),Bt("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:e,style:{verticalAlign:"middle",flexShrink:0},children:t===1?vr(Xa,{children:[Bt("circle",{cx:"7",cy:"7",r:"2"}),Bt("circle",{cx:"17",cy:"7",r:"2"}),Bt("circle",{cx:"7",cy:"17",r:"2"}),Bt("circle",{cx:"17",cy:"17",r:"2"})]}):vr(Xa,{children:[Bt("circle",{cx:"12",cy:"6",r:"2"}),Bt("circle",{cx:"6",cy:"12",r:"2"}),Bt("circle",{cx:"18",cy:"12",r:"2"}),Bt("circle",{cx:"12",cy:"18",r:"2"})]})})}function kf({color:e}){return Bt("span",{style:{display:"inline-block",width:8,height:8,backgroundColor:e,opacity:.6}})}function Tf({color:e}){return Bt("span",{style:{color:e,fontSize:12,lineHeight:1,width:10,display:"inline-block"},children:"\u2713"})}function Mf(){return Bt("span",{style:{display:"inline-block",width:8,height:8,borderRadius:"50%",backgroundColor:"#ef4444"}})}function Ka({bridge:e,inFlightJobs:t,isVisible:n,onHover:r,clearSignal:o,onViewThread:i,onCancel:s,onHoverJob:l,isConnected:a,dismissedThreadIds:d}){let[c,p]=vs([]),[u,g]=vs(!1);Qo(()=>{o>0&&p([])},[o]),Qo(()=>{!d||d.size===0||p(b=>{let T=b.filter(N=>!N.threadId||!d.has(N.threadId));return T.length===b.length?b:T})},[d]),Qo(()=>{p(b=>{var M;let T=new Set(b.map(w=>w.jobId)),N=!1,L=b.map(w=>{let H=t[w.jobId];return H&&(!w.threadId||w.color==="#888")?(N=!0,y(f({},w),{threadId:w.threadId||H.threadId,color:w.color==="#888"?H.color:w.color})):w});for(let[w,H]of Object.entries(t))T.has(w)||(L.push({jobId:w,color:H.color,status:"queued",threadId:H.threadId}),N=!0);for(let w of e.activeJobIds)if(!T.has(w)&&!L.some(H=>H.jobId===w)){let H=e.events.find(Z=>Z.type==="job_started"&&Z.data.jobId===w);L.push({jobId:w,color:"#888",status:"working",threadId:(M=H==null?void 0:H.data)==null?void 0:M.threadId}),N=!0}return N?L:b})},[t,e.activeJobIds]),Qo(()=>{if(e.activeJobIds.length===0)return;let b=new Set(e.activeJobIds);p(T=>T.map(N=>b.has(N.jobId)&&N.status!=="done"&&N.status!=="error"?y(f({},N),{status:"working"}):N))},[e.activeJobIds]);let C=mf(null);if(Qo(()=>{let b=e.lastCompletedJobId;if(!b||b===C.current)return;C.current=b;let T=e.events.find(Z=>Z.type==="error"&&(Z.data.jobId===b||e.status==="error")),N=!!T,L=N?void 0:Cf(e.events,b),M=T?String(T.data.message||""):void 0,w=T?!!T.data.cancelled:void 0,H=T==null?void 0:T.data.threadId;p(Z=>Z.map(D=>D.jobId===b?y(f({},D),{status:N?"error":"done",doneLabel:L,errorMessage:M,cancelled:w,threadId:D.threadId||H}):D))},[e.lastCompletedJobId,e.events,e.status]),!n||c.length===0&&a!==!1)return null;let S=!u&&c.length>1;return vr("div",{style:hf,"data-devtools":!0,onMouseEnter:()=>{g(!0),r(!0)},onMouseLeave:()=>{g(!1),r(!1),l==null||l(null)},children:[[...c].reverse().map((b,T)=>{let N=T===c.length-1,L=c.length-1-T,M=b.status==="working"?Sf(e.events.filter(w=>w.data.jobId===b.jobId)):b.status==="queued"?"Queued":b.status==="done"?b.doneLabel||"Done":b.cancelled?"Cancelled":b.errorMessage?wf(b.errorMessage):"Error";return Bt("div",{style:{position:"relative",zIndex:T,marginBottom:S?N?0:-xf:N?0:vf,transform:S?`scale(${Math.max(.94,1-L*.02)})`:"scale(1)",opacity:S?Math.max(.5,1-L*.15):1,transformOrigin:"bottom right",transition:"margin-bottom 250ms ease, transform 250ms ease, opacity 250ms ease"},children:vr("div",{style:y(f({},Ja),{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"&&Bt(Ef,{color:b.color}),b.status==="queued"&&Bt(kf,{color:b.color}),b.status==="done"&&Bt(Tf,{color:b.color}),b.status==="error"&&Bt(Mf,{}),Bt("span",{style:{color:b.status==="queued"?"#9ca3af":"#1f2937"},children:M}),b.status==="working"&&s&&Bt("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")&&Bt("button",{onClick:w=>{w.stopPropagation(),p(H=>H.filter(Z=>Z.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&&c.length>0&&vr("div",{style:y(f({},Ja),{color:"#9ca3af"}),children:[Bt("span",{style:{display:"inline-block",width:8,height:8,borderRadius:"50%",backgroundColor:"#f59e0b"}}),Bt("span",{children:"Reconnecting\u2026"})]})]})}import{Fragment as Lf,jsx as Rf,jsxs as Af}from"react/jsx-runtime";var If=`
|
|
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=`
|
|
18
18
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
19
19
|
:host {
|
|
20
20
|
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
@@ -30,9 +30,9 @@ Your AI gets the visual and technical context it needs to act.`,usage:[],keys:[{
|
|
|
30
30
|
color: initial;
|
|
31
31
|
-webkit-font-smoothing: auto;
|
|
32
32
|
}
|
|
33
|
-
`;function
|
|
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(
|
|
35
|
-
`)},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=`
|
|
36
36
|
[data-devtools="thread-panel-messages"]:hover {
|
|
37
37
|
scrollbar-width: thin !important;
|
|
38
38
|
}
|
|
@@ -46,8 +46,8 @@ Your AI gets the visual and technical context it needs to act.`,usage:[],keys:[{
|
|
|
46
46
|
background: rgba(0,0,0,0.15);
|
|
47
47
|
border-radius: 3px;
|
|
48
48
|
}
|
|
49
|
-
`,
|
|
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:
|
|
51
|
-
`)?
|
|
52
|
-
`)?
|
|
53
|
-
`)?ao(Se):Se}),!ce&&Se&&Ee("div",{style:{lineHeight:1.5,wordBreak:"break-word"},children:ao(Se)}),ce&&_.replyToQuestion&&(()=>{let se=rg(_,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:ri,onClick:()=>D(be.url)},pe))})})(),ce&&!_.replyToQuestion&&(()=>{let se=ig(_,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:ri,onClick:()=>D(be.url)},pe))})})(),Be&&Ee("div",{style:{marginTop:Se?4:0,lineHeight:1.5,wordBreak:"break-word"},children:ao(Be)}),($||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:[$&&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:$?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(fs,{provider:u,size:11,style:{color:"#6b7280"}}),Ee("span",{style:{fontWeight:600,fontSize:11,color:"#6b7280"},children:gs(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(ng,{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=nc(_.text);return ce?Ee("div",{style:{paddingLeft:12,marginTop:2,marginBottom:2,lineHeight:1.5,wordBreak:"break-word"},children:ao(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:[w.length>0&&Ee("div",{style:{position:"absolute",bottom:"100%",display:"flex",gap:4,padding:"6px 5px 5px",flexWrap:"wrap"},children:w.map((_,xe)=>vt("span",{onClick:()=>H(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:Qf,children:[Ee("input",{"data-popmelt-reply":!0,value:L,onChange:_=>M(_.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:!L.trim(),style:{display:"flex",alignItems:"center",justifyContent:"center",width:28,height:28,padding:0,background:"none",border:"none",cursor:L.trim()?"pointer":"default",color:L.trim()?"#1f2937":"rgba(0,0,0,0.2)",flexShrink:0},children: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(sg,{src:Z,onClose:()=>D(null)})]})}import{Fragment as yg,jsx as tr,jsxs as cc}from"react/jsx-runtime";var dc=pg(null),Es="devtools-provider",ks="devtools-model",Ts="devtools-open-thread-id";async function ac(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 gg(e,t,n){let r=e==="codex"?hr:mr;return Math.min(n,(t==="codex"?hr:mr).length-1)}function mg({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]=hl(),l=gl(n),a=_t(null),d=_t(null),c=(te=pl())!=null?te:n,p=_t(new Map),u=_t(new Map),g=_t(!1),C=No(),[S,b]=cn(()=>typeof window=="undefined"?"claude":localStorage.getItem(Es)||"claude"),[T,N]=cn(()=>{if(typeof window=="undefined")return 0;let v=localStorage.getItem(ks);return v&&parseInt(v,10)||0}),[L,M]=cn([]),[w,H]=cn({}),[Z,D]=cn(!1);Ft(()=>{l.isConnected&&Vs(c).then(v=>{if(!v)return;let j=Object.entries(v.providers).filter(([,we])=>we.available).map(([we])=>we);j.length>0&&M(j);let ee={};for(let[we,le]of Object.entries(v.providers))le.mcp&&(ee[we]=le.mcp);H(ee),Object.values(ee).every(we=>we.found)&&D(!1)})},[l.isConnected,l.capabilitiesVersion,c]),Ft(()=>{if(L.length>0&&!L.includes(S)){let v=L[0];b(v),localStorage.setItem(Es,v)}},[L,S]);let z=S==="codex"?hr:mr,K=(Re=z[T])!=null?Re:z[0],E=on(v=>{let j=S;b(v),localStorage.setItem(Es,v);let ee=gg(j,v,T);N(ee),localStorage.setItem(ks,String(ee))},[S,T]),P=on(v=>{N(v),localStorage.setItem(ks,String(v))},[]),J=on(async()=>{let v=await Ks(c);if(!v)return;let j={};for(let[ee,de]of Object.entries(v.capabilities.providers))de.mcp&&(j[ee]=de.mcp);H(j),v.results.some(ee=>ee.installed)&&D(!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&&Ao(c).then(v=>{v!=null&&v.components&&ve(new Set(Object.keys(v.components)))})},[l.isConnected,c]);let $e=on(async v=>{let j=[];for(let ee of v)try{(await qs(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(v=>{ae(v)},[]),st=on(()=>{Ao(c).then(v=>{v!=null&&v.components&&ve(new Set(Object.keys(v.components)))})},[c]),ct=on(async v=>{try{(await Zs(v,c)).removed&&ve(ee=>{let de=new Set(ee);return de.delete(v),de})}catch(j){console.error("[Popmelt] Failed to remove component from model:",j)}},[c]),_=on((v,j)=>{s({type:"MODIFY_SPACING_TOKEN",payload:v}),s({type:"ADD_SPACING_TOKEN_CHANGE",payload:j})},[s]),xe=on((v,j)=>{s({type:"DELETE_SPACING_TOKEN",payload:{tokenPath:v,originalValue:j}})},[s]),[ce,Se]=cn(0),Be=_t([]);Ft(()=>{let v=Be.current,j=i.spacingTokenMods;Be.current=j;let ee=new Map(v.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__"?Qs(le,c).catch(et=>console.error("[Popmelt] Failed to sync token delete:",et)):ui(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,ui(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,$]=cn(()=>typeof window=="undefined"?null:localStorage.getItem(Ts)||null),[re,se]=cn(new Set),[be,pe]=cn(null);Ft(()=>{De?localStorage.setItem(Ts,De):localStorage.removeItem(Ts)},[De]);let ke="popmelt-in-flight-jobs",[oe,We]=cn(()=>{try{let v=sessionStorage.getItem(ke);return v?JSON.parse(v):{}}catch(v){return{}}});Ft(()=>{try{Object.keys(oe).length>0?sessionStorage.setItem(ke,JSON.stringify(oe)):sessionStorage.removeItem(ke)}catch(v){}},[oe]);let Xe=_t(new Map),Lt=_t(new Map);Ft(()=>{for(let[v,j]of Object.entries(oe))j.annotationIds.length>0&&Xe.current.set(v,j.annotationIds),j.threadId&&Lt.current.set(v,j.threadId)},[oe]);let Gt=_t(!1);Ft(()=>{if(Gt.current||i.annotations.length===0)return;Gt.current=!0;let v=new Set;for(let ee of Object.values(oe))for(let de of ee.annotationIds)v.add(de);let j=i.annotations.filter(ee=>v.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 v=new Set;for(let j of Object.values(oe))for(let ee of j.annotationIds)v.add(ee);return v},[oe]),Vt=er(()=>{let v=new Set;for(let j of Object.values(oe))for(let ee of j.styleSelectors)v.add(ee);return v},[oe]),Kt=er(()=>{let v=new Map;for(let j of Object.values(oe)){for(let ee of j.styleSelectors)v.set(ee,j.color);for(let ee of j.annotationIds){let de=i.annotations.find(we=>we.id===ee);if(de&&(de.linkedSelector&&v.set(de.linkedSelector,j.color),de.groupId))for(let we of i.annotations)we.groupId===de.groupId&&we.linkedSelector&&v.set(we.linkedSelector,j.color)}}return v},[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 v=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)&&(v&&clearTimeout(v),v=setTimeout(j,3e3))});return ee.observe(document.body,{childList:!0,subtree:!0}),()=>{ee.disconnect(),v&&clearTimeout(v)}},[s]);let Et=_t(typeof window!="undefined"?window.location.pathname:"/");Ft(()=>{let v=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&&(v(we),Et.current=window.location.pathname)},ee=()=>{let de=Et.current;v(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(v=>{var de;let we=v,{[de=l.lastCompletedJobId]:j}=we;return to(we,[Er(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(()=>{Lo(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 v=l.events.filter(j=>j.type==="done"&&j.data.resolutions);for(let j of v){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 v=l.events.filter(j=>j.type==="error"&&j.data.cancelled);for(let j of v){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 v=l.incrementalResolutions;if(v.length<=lt.current)return;let j=v.slice(lt.current);lt.current=v.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 v=Q.current;Q.current=l.status,v==="disconnected"&&l.status==="idle"&&We({})},[l.status]);let Fe=on(async()=>{let v=a.current;if(!v)return!1;let j=await rr(document.body,v,i.annotations);if(j.length===0)return!1;let ee=await bl(j,i.annotations,i.styleModifications);return ee&&s({type:"MARK_CAPTURED"}),ee},[i.annotations,i.styleModifications,s]),tt=on((v,j)=>{let ee=p.current.get(v)||[];p.current.set(v,[...ee,...j])},[]),In=on(async()=>{var eo;let v=a.current;if(!v)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||C;de.has(ln)||de.set(ln,[]),de.get(ln).push(ht)}let we=new Map,le=[...de.keys()].filter(ht=>ht!==C);if(le.length>0){let ht=C,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 ac(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,v,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 ac(ht,r),window.scrollTo(ln.x,ln.y),g.current=!1}let ot=j.filter(ht=>(ht.pathname||C)===C),Pe=await rr(document.body,v,ot.length>0?i.annotations:[]);if(Pe.length>0){let ht=await ir(Pe);ht&&we.set(C,ht)}if(we.size===0)return!1;let et=hi(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 Qn=Ht?we:(eo=we.get(C))!=null?eo:we;try{let ht=mi(i.activeColor),{jobId:ln,threadId:Wt}=await Xs(Qn,pt,c,ht,S,K.id,mt.size>0?mt:void 0,gi());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=>y(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*\)/),Mo=((Sn!=null&&Sn[1]?parseFloat(Sn[1]):29)+60)%360;return s({type:"SET_COLOR",payload:`oklch(0.628 0.258 ${Mo})`}),!0}catch(ht){return console.error("[Pare] Failed to send to bridge:",ht),!1}},[i.annotations,i.styleModifications,i.spacingTokenChanges,i.activeColor,s,c,S,K.id,C,r]),$t=on(async(v,j,ee)=>{var de,we,le,ot;try{let Pe=mi(i.activeColor),{jobId:et}=await el(v,j,c,Pe,S,K.id,ee,gi()),pt=(ot=(le=(de=Object.values(bt.current).find(Ht=>Ht.threadId===v))==null?void 0:de.color)!=null?le:(we=i.annotations.find(Ht=>Ht.threadId===v))==null?void 0:we.color)!=null?ot:i.activeColor;We(Ht=>y(f({},Ht),{[et]:{annotationIds:[],styleSelectors:[],color:pt,threadId:v}}));let mt=i.annotations.filter(Ht=>Ht.threadId===v&&(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 Qn=Ht[et];return Qn?y(f({},Ht),{[et]:y(f({},Qn),{annotationIds:[...Qn.annotationIds,...mt.map(eo=>eo.id)]})}):Ht})),l.dismissQuestion(v)}catch(Pe){console.error("[Pare] Failed to send reply:",Pe)}},[i.activeColor,i.annotations,c,l.dismissQuestion,s,S,K.id]),fn=_t(new Set);Ft(()=>{for(let v of l.pendingQuestions){if(fn.current.has(v.jobId))continue;fn.current.add(v.jobId);let j=v.annotationIds&&v.annotationIds.length>0?v.annotationIds:void 0;!j&&v.threadId&&(j=i.annotations.filter(ee=>ee.threadId===v.threadId).map(ee=>ee.id)),j&&j.length>0&&s({type:"SET_ANNOTATION_QUESTION",payload:{ids:j,question:v.question,threadId:v.threadId}})}},[l.pendingQuestions,s,i.annotations]);let dn=er(()=>{if(l.activeJobId&&l.activeJobId in oe)return oe[l.activeJobId].color;let v=Object.values(oe);return v.length>0?v[v.length-1].color:void 0},[l.activeJobId,oe]),gt=on(v=>{$(v)},[]),sn=on(v=>{if(!v){pe(null);return}let j=Xe.current.get(v);j&&j.length>0?pe(new Set(j)):pe(null)},[]),At=on(async v=>{try{let j=v?`${c}/cancel?jobId=${v}`:`${c}/cancel`;await fetch(j,{method:"POST"})}catch(j){}},[c]);Ft(()=>{i.activeTool==="model"&&De&&$(null)},[i.activeTool]);let Nt=_t(null);Ft(()=>{i.isAnnotating?Nt.current&&($(Nt.current),Nt.current=null):De&&(Nt.current=De,$(null))},[i.isAnnotating]);let qt=er(()=>{if(!De)return null;for(let[v,j]of Object.entries(oe))if(j.threadId===De)return v;return null},[De,oe]),xt=De?i.annotations.find(v=>v.threadId===De):void 0,Zn=xt?i.annotations.indexOf(xt)+1:void 0,[Pn,Dt]=cn(!1),[Yn,gn]=cn(0),mn=_t(null),ut=on(v=>{v?(mn.current&&(clearTimeout(mn.current),mn.current=null),Dt(!0)):mn.current=setTimeout(()=>{Dt(!1),mn.current=null},150)},[]),B=on(()=>{gn(v=>v+1),l.clearEvents(),$(null),se(new Set),At()},[l.clearEvents,At]);Ft(()=>()=>{mn.current&&clearTimeout(mn.current)},[]);let X=er(()=>({isEnabled:t}),[t]);return t?cc(dc.Provider,{value:X,children:[e,tr(Sa,{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:v=>{$(null),v&&se(j=>new Set(j).add(v))},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(Qa,{children:cc(qa,{children:[tr(Ua,{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:B,provider:S,onProviderChange:l.isConnected&&L.length>1?E:void 0,availableProviders:L,modelIndex:T,modelCount:z.length,modelLabel:K.label,onModelChange:l.isConnected?P:void 0,onViewThread:l.isConnected?gt:void 0,isThreadPanelOpen:De!==null,mcpStatus:w,onInstallMcp:l.isConnected?J: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(lc,{threadId:De,bridgeUrl:c,accentColor:(he=xt==null?void 0:xt.color)!=null?he:i.activeColor,isStreaming:qt!==null,streamingEvents:qt?l.events.filter(v=>v.data.jobId===qt):[],onClose:()=>$(null),onReply:$t,onCancel:qt?()=>At(qt):void 0,lastError:(Le=(Ue=l.lastErrorByJob)==null?void 0:Ue[qt!=null?qt:""])!=null?Le:l.lastCompletedJobId&&Lt.current.get(l.lastCompletedJobId)===De?(Je=l.lastErrorByJob)==null?void 0:Je[l.lastCompletedJobId]:void 0,toolbarRef:d,currentModel:K.id,currentProvider:S,annotationNumber:Zn,annotationText:xt==null?void 0:xt.text}),tr(Ka,{bridge:l,bridgeUrl:c,inFlightJobs:oe,isVisible:Pn||l.lastResponseText!==null||l.activeJobIds.length>0,onHover:ut,clearSignal:Yn,onReply:$t,onViewThread:gt,onCancel:At,onHoverJob:sn,isConnected:l.isConnected,dismissedThreadIds:re})]})})]}):tr(yg,{children:e})}function hg(){let e=fg(dc);if(!e)throw new Error("usePopmelt must be used within PopmeltProvider");return e}export{mg as PopmeltProvider,hg 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};
|