@popmelt.com/core 0.5.3 → 0.5.4
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/cli.mjs +24 -21
- package/dist/index.mjs +15 -15
- package/dist/server.mjs +23 -20
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
var Fa=Object.defineProperty,Da=Object.defineProperties;var Ha=Object.getOwnPropertyDescriptors;var Co=Object.getOwnPropertySymbols;var zr=Object.prototype.hasOwnProperty,_r=Object.prototype.propertyIsEnumerable;var Hr=(t,e,o)=>e in t?Fa(t,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[e]=o,m=(t,e)=>{for(var o in e||(e={}))zr.call(e,o)&&Hr(t,o,e[o]);if(Co)for(var o of Co(e))_r.call(e,o)&&Hr(t,o,e[o]);return t},x=(t,e)=>Da(t,Ha(e));var Eo=t=>typeof t=="symbol"?t:t+"",To=(t,e)=>{var o={};for(var n in t)zr.call(t,n)&&e.indexOf(n)<0&&(o[n]=t[n]);if(t!=null&&Co)for(var n of Co(t))e.indexOf(n)<0&&_r.call(t,n)&&(o[n]=t[n]);return o};import{createContext as Mu,useCallback as Fe,useContext as Iu,useEffect as Te,useMemo as eo,useRef as nn,useState as Ue}from"react";import{useCallback as Io,useEffect as za,useRef as qr,useState as _a}from"react";var on="http://localhost:1111";async function $r(t=on){try{let e=await fetch(`${t}/capabilities`);return e.ok?await e.json():null}catch(e){return null}}async function Mo(t=on){try{let e=new AbortController,o=setTimeout(()=>e.abort(),2e3),n=await fetch(`${t}/status`,{signal:e.signal});return clearTimeout(o),n.ok?await n.json():null}catch(e){return null}}async function Wr(t,e,o=on,n,i,r,a){let s=new FormData;if(s.append("screenshot",t,"screenshot.png"),s.append("feedback",e),n&&s.append("color",n),i&&s.append("provider",i),r&&s.append("model",r),a)for(let[c,d]of a)for(let u=0;u<d.length;u++)s.append(`image-${c}-${u}`,d[u],`image-${c}-${u}.png`);let l=await fetch(`${o}/send`,{method:"POST",body:s});if(!l.ok){let c=await l.text();throw new Error(`Bridge returned ${l.status}: ${c}`)}return l.json()}async function Yr(t,e,o=on,n,i,r,a,s,l){let c=new FormData;c.append("screenshot",t,"screenshot.png"),c.append("goal",e),r&&c.append("pageUrl",r),a&&c.append("viewport",JSON.stringify(a)),n&&c.append("provider",n),i&&c.append("model",i),s&&c.append("manifest",JSON.stringify(s)),l&&c.append("feedback",l);let d=await fetch(`${o}/plan`,{method:"POST",body:c});if(!d.ok){let u=await d.text();throw new Error(`Bridge returned ${d.status}: ${u}`)}return d.json()}async function jr(t,e=on,o){let n=await fetch(`${e}/plan/approve`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({planId:t,approvedTaskIds:o})});if(!n.ok){let i=await n.text();throw new Error(`Bridge returned ${n.status}: ${i}`)}return n.json()}async function Gr(t,e,o=on,n,i){let r=new FormData;r.append("screenshot",e,"screenshot.png"),r.append("planId",t),n&&r.append("provider",n),i&&r.append("model",i);let a=await fetch(`${o}/plan/review`,{method:"POST",body:r});if(!a.ok){let s=await a.text();throw new Error(`Bridge returned ${a.status}: ${s}`)}return a.json()}async function Vr(t,e,o,n=on,i,r){let a=new FormData;a.append("screenshot",t,"screenshot.png"),a.append("planId",e),a.append("tasks",JSON.stringify(o)),i&&a.append("provider",i),r&&a.append("model",r);let s=await fetch(`${n}/plan/execute`,{method:"POST",body:a});if(!s.ok){let l=await s.text();throw new Error(`Bridge returned ${s.status}: ${l}`)}return s.json()}async function Jr(t=on,e){try{let o=await fetch(`${t}/mcp/install`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(e?{serverUrl:e}:{})});return o.ok?await o.json():null}catch(o){return null}}async function Xr(t,e=on){let o=await fetch(`${e}/model/component`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({name:t})});if(!o.ok){let n=await o.text();throw new Error(`Bridge returned ${o.status}: ${n}`)}return o.json()}async function Kr(t,e=on){let o=await fetch(`${e}/model/component`,{method:"DELETE",headers:{"Content-Type":"application/json"},body:JSON.stringify({name:t})});if(!o.ok){let n=await o.text();throw new Error(`Bridge returned ${o.status}: ${n}`)}return o.json()}async function ei(t,e,o=on){let n=await fetch(`${o}/model/token`,{method:"PATCH",headers:{"Content-Type":"application/json"},body:JSON.stringify({path:t,value:e})});if(!n.ok){let i=await n.text();throw new Error(`Bridge returned ${n.status}: ${i}`)}return n.json()}async function Ur(t,e=on){let o=await fetch(`${e}/model/token`,{method:"DELETE",headers:{"Content-Type":"application/json"},body:JSON.stringify({path:t})});if(!o.ok){let n=await o.text();throw new Error(`Bridge returned ${o.status}: ${n}`)}return o.json()}async function Wn(t=on){var e;try{let o=await fetch(`${t}/model`);return o.ok&&(e=(await o.json()).model)!=null?e:null}catch(o){return null}}async function Zr(t,e,o=on,n,i,r,a){let s;if(a&&a.length>0){let l=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"});l.append("screenshot",c,"screenshot.png"),l.append("feedback",JSON.stringify({threadId:t,reply:e,color:n,provider:i,model:r}));for(let d=0;d<a.length;d++)l.append(`image-reply-${d}`,a[d],`reply-image-${d}.png`);s=await fetch(`${o}/reply`,{method:"POST",body:l})}else s=await fetch(`${o}/reply`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({threadId:t,reply:e,color:n,provider:i,model:r})});if(!s.ok){let l=await s.text();throw new Error(`Bridge returned ${s.status}: ${l}`)}return s.json()}function Qr(t="http://localhost:1111"){let[e,o]=_a({isConnected:!1,status:"disconnected",jobResponses:{},jobThinking:{},activeJobIds:[],currentResponse:"",currentThinking:"",events:[],activeJobId:null,lastCompletedJobId:null,lastResponseText:null,lastThreadId:null,pendingQuestions:[],pendingPlans:[],planReviews:[],incrementalResolutions:[]}),n=qr(null),i=qr(null),r=Io(()=>{n.current&&(n.current.close(),n.current=null);let c=new EventSource(`${t}/events`);n.current=c,c.addEventListener("connected",()=>{Mo(t).then(d=>{var f;let u=(f=d==null?void 0:d.activeJobs)!=null?f:d!=null&&d.activeJob?[d.activeJob]:[],p=u.length>0;o(g=>x(m({},g),{isConnected:!0,status:p?"streaming":"idle",activeJobId:p?u[u.length-1].id:g.activeJobId,activeJobIds:u.map(b=>b.id)}))})}),c.addEventListener("job_started",d=>{let u=JSON.parse(d.data),p=u.jobId;o(f=>x(m({},f),{status:"streaming",activeJobId:p,activeJobIds:[...f.activeJobIds,p],jobResponses:x(m({},f.jobResponses),{[p]:""}),jobThinking:x(m({},f.jobThinking),{[p]:""}),currentResponse:"",currentThinking:"",lastResponseText:null,lastThreadId:null,events:[...f.events,{type:"job_started",data:u,timestamp:Date.now()}]}))}),c.addEventListener("delta",d=>{let u=JSON.parse(d.data),p=u.jobId,f=u.text||"";o(g=>x(m({},g),{jobResponses:p?x(m({},g.jobResponses),{[p]:(g.jobResponses[p]||"")+f}):g.jobResponses,currentResponse:!p||p===g.activeJobId?g.currentResponse+f:g.currentResponse}))}),c.addEventListener("thinking",d=>{let u=JSON.parse(d.data),p=u.jobId,f=u.text||"";o(g=>x(m({},g),{jobThinking:p?x(m({},g.jobThinking),{[p]:(g.jobThinking[p]||"")+f}):g.jobThinking,currentThinking:!p||p===g.activeJobId?g.currentThinking+f:g.currentThinking}))}),c.addEventListener("tool_use",d=>{let u=JSON.parse(d.data);o(p=>x(m({},p),{events:[...p.events,{type:"tool_use",data:u,timestamp:Date.now()}]}))}),c.addEventListener("done",d=>{let u=JSON.parse(d.data),p=u.jobId;o(f=>{var A;let g=p?f.activeJobIds.filter(R=>R!==p):f.activeJobIds,b=m({},f.jobResponses),C=m({},f.jobThinking),w=p?b[p]:void 0;p&&(delete b[p],delete C[p]);let L=p===f.activeJobId?g.length>0?g[g.length-1]:null:f.activeJobId;return x(m(x(m({},f),{activeJobIds:g,activeJobId:L,jobResponses:b,jobThinking:C,lastCompletedJobId:p!=null?p:f.activeJobId,lastResponseText:w||f.currentResponse||u.responseText||null,lastThreadId:(A=u.threadId)!=null?A:null}),p===f.activeJobId?{currentResponse:L&&b[L]||"",currentThinking:L&&C[L]||""}:{}),{events:[...f.events,{type:"done",data:u,timestamp:Date.now()}]})})}),c.addEventListener("question",d=>{let u=JSON.parse(d.data);o(p=>x(m({},p),{pendingQuestions:[...p.pendingQuestions,{jobId:u.jobId,threadId:u.threadId,question:u.question,annotationIds:u.annotationIds,timestamp:Date.now()}],events:[...p.events,{type:"question",data:u,timestamp:Date.now()}]}))}),c.addEventListener("plan_ready",d=>{let u=JSON.parse(d.data);o(p=>x(m({},p),{pendingPlans:[...p.pendingPlans,{jobId:u.jobId,planId:u.planId,tasks:u.tasks,threadId:u.threadId,timestamp:Date.now()}],events:[...p.events,{type:"plan_ready",data:u,timestamp:Date.now()}]}))}),c.addEventListener("plan_review",d=>{let u=JSON.parse(d.data);o(p=>x(m({},p),{planReviews:[...p.planReviews,{planId:u.planId,verdict:u.verdict,summary:u.summary,issues:u.issues,timestamp:Date.now()}],events:[...p.events,{type:"plan_review",data:u,timestamp:Date.now()}]}))}),c.addEventListener("task_resolved",d=>{var f;let u=JSON.parse(d.data),p=(f=u.resolutions)!=null?f:[];o(g=>x(m({},g),{incrementalResolutions:[...g.incrementalResolutions,...p],events:[...g.events,{type:"task_resolved",data:u,timestamp:Date.now()}]}))}),c.addEventListener("queue_drained",()=>{o(d=>x(m({},d),{status:d.status==="error"?"error":"idle",activeJobId:null,activeJobIds:[],currentResponse:"",currentThinking:"",jobResponses:{},jobThinking:{},incrementalResolutions:[]}))}),c.addEventListener("error",d=>{var u;if(c.readyState===EventSource.CLOSED)o(p=>x(m({},p),{isConnected:!1,status:"disconnected"})),i.current=setTimeout(()=>{Mo(t).then(p=>{p&&r()})},5e3);else if(d instanceof MessageEvent){let p=JSON.parse(d.data),f=(u=p.jobId)!=null?u:null;o(g=>{let b=f?g.activeJobIds.filter(w=>w!==f):g.activeJobIds,C=b.length>0?g.status:"error";return x(m({},g),{status:C,activeJobIds:b,lastCompletedJobId:f!=null?f:g.activeJobId,events:[...g.events,{type:"error",data:p,timestamp:Date.now()}]})})}}),c.onerror=()=>{c.readyState===EventSource.CLOSED&&o(d=>x(m({},d),{isConnected:!1,status:"disconnected"}))}},[t]);za(()=>(Mo(t).then(c=>{c&&r()}),()=>{n.current&&(n.current.close(),n.current=null),i.current&&clearTimeout(i.current)}),[t,r]);let a=Io(()=>{o(c=>x(m({},c),{events:[],currentResponse:"",currentThinking:"",jobResponses:{},jobThinking:{},lastResponseText:null,lastThreadId:null,incrementalResolutions:[]}))},[]),s=Io(c=>{o(d=>x(m({},d),{pendingQuestions:d.pendingQuestions.filter(u=>u.threadId!==c)}))},[]),l=Io(c=>{o(d=>x(m({},d),{pendingPlans:d.pendingPlans.filter(u=>u.planId!==c)}))},[]);return x(m({},e),{clearEvents:a,dismissQuestion:s,dismissPlan:l})}import{useEffect as $a,useReducer as Wa}from"react";var Ya={isAnnotating:!1,activeTool:"inspector",activeColor:"#ff0000",strokeWidth:3,annotations:[],undoStack:[],redoStack:[],currentPath:[],selectedAnnotationIds:[],lastSelectedId:null,inspectedElement:null,styleModifications:[],spacingTokenChanges:[],spacingTokenMods:[]};function Yn(){return Math.random().toString(36).substring(2,9)}function ts(t){return t.status?t:t.captured?x(m({},t),{status:"in_flight"}):x(m({},t),{status:"pending"})}function Qe(t){return x(m({},t),{undoStack:[...t.undoStack,{annotations:t.annotations,styleModifications:t.styleModifications,spacingTokenMods:t.spacingTokenMods}],redoStack:[]})}function ja(t,e){return x(m({},t),{isAnnotating:e})}function Ga(t,e){return x(m({},t),{activeTool:e,inspectedElement:null})}function Va(t,e){return x(m({},t),{activeColor:e})}function Ja(t,e){return x(m({},t),{strokeWidth:e})}function Xa(t,e){return x(m({},t),{currentPath:[e]})}function Ka(t,e){return x(m({},t),{currentPath:[...t.currentPath,e]})}function Ua(t){return x(m({},t),{currentPath:[]})}function Za(t,e){if(t.currentPath.length<2&&t.activeTool!=="text")return x(m({},t),{currentPath:[]});let o={id:Yn(),type:t.activeTool,points:t.currentPath,color:t.activeColor,strokeWidth:t.strokeWidth,timestamp:Date.now(),status:"pending",groupId:e==null?void 0:e.groupId,elements:e==null?void 0:e.elements},n=Qe(t);return x(m({},n),{annotations:[...t.annotations,o],currentPath:[]})}function qa(t,e){var i;let o=m({id:(i=e.id)!=null?i:Yn(),type:"text",points:[e.point],text:e.text,fontSize:e.fontSize||12,color:t.activeColor,strokeWidth:t.strokeWidth,timestamp:Date.now(),status:"pending",groupId:e.groupId,linkedSelector:e.linkedSelector,linkedAnchor:e.linkedAnchor,elements:e.elements},e.imageCount?{imageCount:e.imageCount}:{}),n=e.groupId?t:Qe(t);return x(m({},n),{annotations:[...t.annotations,o]})}function Qa(t,e){let o=Qe(t);return x(m({},o),{annotations:t.annotations.map(n=>n.id===e.id?m(x(m({},n),{text:e.text}),e.imageCount!=null?{imageCount:e.imageCount}:{}):n)})}function tl(t,e){return x(m({},t),{annotations:t.annotations.map(o=>o.id===e.id?x(m({},o),{fontSize:Math.max(12,Math.min(72,e.fontSize))}):o)})}function el(t,e){let o=Qe(t),n=t.annotations.find(r=>r.id===e.id),i=n==null?void 0:n.groupId;return x(m({},o),{annotations:t.annotations.filter(r=>r.id!==e.id&&!(i&&r.groupId===i))})}function nl(t,e){let o=e.saveUndo?Qe(t):t,n=t.annotations.find(r=>r.id===e.id),i=n==null?void 0:n.groupId;return x(m({},o),{annotations:t.annotations.map(r=>{if(!(r.id===e.id||i&&r.groupId===i))return r;let s=e.delta.x,l=e.delta.y;return x(m({},r),{points:r.points.map(c=>({x:c.x+s,y:c.y+l}))})})})}function ol(t,e){let o=e.saveUndo?Qe(t):t,n=t.annotations.find(a=>a.id===e.id);if(!n||n.type==="text"||n.points.length<2)return t;let i=0,r=0;if(n.type==="rectangle"&&n.groupId){let a=e.points,s=Math.min(a[0].x,a[1].x),l=Math.max(a[0].y,a[1].y),c=n.points[0],d=n.points[n.points.length-1],u=Math.min(c.x,d.x),p=Math.max(c.y,d.y);i=s-u,r=l-p}return x(m({},o),{annotations:t.annotations.map(a=>a.id===e.id?x(m({},a),{points:e.points}):n.groupId&&a.groupId===n.groupId&&a.type==="text"?x(m({},a),{points:a.points.map(s=>({x:s.x+i,y:s.y+r}))}):a)})}function il(t,e){let o=Qe(t);return x(m({},o),{annotations:[...t.annotations,...e.annotations.map(ts)]})}function rl(t,e){let o=new Set,n=[];for(let i of e.annotations)o.has(i.id)||(o.add(i.id),n.push(ts(i)));return x(m({},t),{annotations:n})}function sl(t){if(t.undoStack.length===0)return t;let e=t.undoStack[t.undoStack.length-1];return x(m({},t),{annotations:(e==null?void 0:e.annotations)||[],styleModifications:(e==null?void 0:e.styleModifications)||[],spacingTokenMods:(e==null?void 0:e.spacingTokenMods)||[],undoStack:t.undoStack.slice(0,-1),redoStack:[...t.redoStack,{annotations:t.annotations,styleModifications:t.styleModifications,spacingTokenMods:t.spacingTokenMods}]})}function al(t){if(t.redoStack.length===0)return t;let e=t.redoStack[t.redoStack.length-1];return x(m({},t),{annotations:(e==null?void 0:e.annotations)||[],styleModifications:(e==null?void 0:e.styleModifications)||[],spacingTokenMods:(e==null?void 0:e.spacingTokenMods)||[],redoStack:t.redoStack.slice(0,-1),undoStack:[...t.undoStack,{annotations:t.annotations,styleModifications:t.styleModifications,spacingTokenMods:t.spacingTokenMods}]})}function ll(t,e){let{id:o,addToSelection:n}=e;if(o===null)return x(m({},t),{selectedAnnotationIds:[],lastSelectedId:null});if(n)if(t.selectedAnnotationIds.includes(o)){let r=t.selectedAnnotationIds.filter(a=>a!==o);return x(m({},t),{selectedAnnotationIds:r,lastSelectedId:r.length>0?r[r.length-1]:null})}else return x(m({},t),{selectedAnnotationIds:[...t.selectedAnnotationIds,o],lastSelectedId:o});return x(m({},t),{selectedAnnotationIds:[o],lastSelectedId:o})}function cl(t,e){let o=new Set;for(let n of t.selectedAnnotationIds){let i=t.annotations.find(r=>r.id===n);i!=null&&i.groupId&&o.add(i.groupId)}return x(m({},t),{annotations:t.annotations.map(n=>{let i=t.selectedAnnotationIds.includes(n.id),r=n.groupId&&o.has(n.groupId);return!i&&!r?n:x(m({},n),{color:e.color})})})}function dl(t){return x(m({},t),{annotations:t.annotations.map(e=>x(m({},e),{captured:!0,status:e.status==="pending"||!e.status?"in_flight":e.status})),styleModifications:t.styleModifications.map(e=>x(m({},e),{captured:!0})),spacingTokenChanges:t.spacingTokenChanges.map(e=>x(m({},e),{captured:!0}))})}function ul(t){return x(m({},t),{annotations:[],undoStack:[],redoStack:[],currentPath:[],selectedAnnotationIds:[],lastSelectedId:null,spacingTokenChanges:[],spacingTokenMods:[]})}function pl(t,e){return x(m({},t),{inspectedElement:e})}function fl(t,e){let{selector:o,element:n,property:i,original:r,modified:a}=e,s=t.styleModifications.findIndex(l=>l.selector===o);if(r===a&&s<0)return t;if(s>=0){let l=t.styleModifications[s];if(l.captured){let f=Qe(t),g=f.styleModifications.map((b,C)=>C===s?x(m({},b),{changes:[{property:i,original:r,modified:a}],captured:!1}):b);return x(m({},f),{styleModifications:g})}let c=l.changes.findIndex(f=>f.property===i),d,u=t;if(c>=0){let f=l.changes[c];a===f.original?d=l.changes.filter((g,b)=>b!==c):d=l.changes.map((g,b)=>b===c?x(m({},g),{modified:a}):g)}else{if(r===a)return t;u=Qe(t),d=[...l.changes,{property:i,original:r,modified:a}]}if(d.length===0)return x(m({},u),{styleModifications:u.styleModifications.filter((f,g)=>g!==s)});let p=u.styleModifications.map((f,g)=>g===s?x(m({},f),{changes:d}):f);return x(m({},u),{styleModifications:p})}else{let l=Qe(t),c={selector:o,element:n,changes:[{property:i,original:r,modified:a}]};return x(m({},l),{styleModifications:[...l.styleModifications,c]})}}function gl(t,e){let{selector:o,durableSelector:n,element:i,changes:r}=e,a=r.filter(c=>c.original!==c.modified);if(a.length===0)return t;let s=Qe(t),l=s.styleModifications.findIndex(c=>c.selector===o);if(l>=0){let c=s.styleModifications[l],d=c.captured?[]:[...c.changes];for(let u of a){let p=d.findIndex(f=>f.property===u.property);p>=0?u.modified===d[p].original?d=d.filter((f,g)=>g!==p):d=d.map((f,g)=>g===p?x(m({},f),{modified:u.modified}):f):d.push(u)}return d.length===0?x(m({},s),{styleModifications:s.styleModifications.filter((u,p)=>p!==l)}):x(m({},s),{styleModifications:s.styleModifications.map((u,p)=>p===l?x(m({},u),{changes:d,captured:!1}):u)})}else return x(m({},s),{styleModifications:[...s.styleModifications,{selector:o,durableSelector:n,element:i,changes:a}]})}function ml(t,e){let{selector:o,property:n}=e,i=Qe(t),r=i.styleModifications.map(a=>a.selector!==o?a:x(m({},a),{changes:a.changes.filter(s=>s.property!==n)})).filter(a=>a.changes.length>0);return x(m({},i),{styleModifications:r})}function hl(t){if(t.styleModifications.length===0)return x(m({},t),{inspectedElement:null});let e=Qe(t);return x(m({},e),{styleModifications:[],inspectedElement:null})}function yl(t,e){return x(m({},t),{styleModifications:e})}function bl(t,e){let{updates:o}=e,n=new Map(o.map(i=>[i.id,i]));return x(m({},t),{annotations:t.annotations.map(i=>{let r=n.get(i.id);return r?m(x(m({},i),{points:[r.point,...i.points.slice(1)]}),r.linkedAnchor?{linkedAnchor:r.linkedAnchor}:{}):i})})}function xl(t,e){let o=new Set(e.ids);return x(m({},t),{annotations:t.annotations.map(n=>o.has(n.id)?x(m({},n),{status:e.status}):n)})}function vl(t,e){let o=new Set(e.ids),n=new Set;for(let i of t.annotations)o.has(i.id)&&i.groupId&&n.add(i.groupId);return x(m({},t),{annotations:t.annotations.map(i=>o.has(i.id)||i.groupId&&n.has(i.groupId)?x(m({},i),{threadId:e.threadId}):i)})}function Sl(t,e){let o=new Set(e.ids),n=new Set;for(let i of t.annotations)o.has(i.id)&&i.groupId&&n.add(i.groupId);return x(m({},t),{annotations:t.annotations.map(i=>o.has(i.id)||i.groupId&&n.has(i.groupId)?x(m({},i),{status:"waiting_input",question:e.question,threadId:e.threadId}):i)})}function wl(t,e){let o=new Map(e.resolutions.map(i=>[i.annotationId,i])),n=new Map;for(let i of t.annotations){let r=o.get(i.id);r&&i.groupId&&n.set(i.groupId,r)}return x(m({},t),{annotations:t.annotations.map(i=>{var a,s,l;let r=o.get(i.id)||(i.groupId?n.get(i.groupId):void 0);return r?x(m({},i),{status:r.status,resolutionSummary:r.summary,scope:(s=(a=r.finalScope)!=null?a:r.inferredScope)!=null?s:null,replyCount:((l=i.replyCount)!=null?l:0)+1,question:void 0,threadId:i.threadId||e.threadId}):i})})}function kl(t,e){let{groupId:o,planId:n,planTaskId:i,instruction:r,region:a,color:s,linkedSelector:l,elements:c}=e,d=r.length>60?r.slice(0,60).replace(/\s+\S*$/,"")+"\u2026":r,u={id:Yn(),type:"rectangle",points:[{x:a.x,y:a.y},{x:a.x+a.width,y:a.y+a.height}],color:s,strokeWidth:2,timestamp:Date.now(),groupId:o,linkedSelector:l,elements:c,planId:n,planTaskId:i,status:"pending"},p={id:Yn(),type:"text",points:[{x:a.x,y:a.y+a.height+4}],text:d,fontSize:12,color:s,strokeWidth:2,timestamp:Date.now(),status:"pending",groupId:o,linkedSelector:l,elements:c,planId:n,planTaskId:i};return x(m({},t),{annotations:[...t.annotations,u,p]})}function Cl(t,e){let{linkedSelectors:o,styleSelectors:n}=e,i=new Set(o),r=new Set(n),a=new Set,s=new Set;for(let p of t.annotations)p.linkedSelector&&i.has(p.linkedSelector)&&(a.add(p.id),p.groupId&&s.add(p.groupId));for(let p of t.annotations)p.groupId&&s.has(p.groupId)&&a.add(p.id);let l=t.annotations.filter(p=>!a.has(p.id)),c=t.styleModifications.filter(p=>!r.has(p.selector));if(l.length===t.annotations.length&&c.length===t.styleModifications.length)return t;let d=t.selectedAnnotationIds.filter(p=>!a.has(p)),u=t.inspectedElement&&r.has(t.inspectedElement.info.selector)?null:t.inspectedElement;return x(m({},t),{annotations:l,styleModifications:c,selectedAnnotationIds:d,lastSelectedId:d.length>0?d[d.length-1]:null,inspectedElement:u})}function El(t,e){let o=t.spacingTokenChanges.findIndex(n=>n.tokenPath===e.tokenPath);return o>=0?x(m({},t),{spacingTokenChanges:t.spacingTokenChanges.map((n,i)=>i===o?e:n)}):x(m({},t),{spacingTokenChanges:[...t.spacingTokenChanges,e]})}function Tl(t,e){return x(m({},t),{spacingTokenChanges:e})}function Ml(t,e){let o=Qe(t),n=t.spacingTokenMods.findIndex(r=>r.tokenPath===e.tokenPath),i;if(n>=0){let r=t.spacingTokenMods[n],a=x(m({},e),{originalValue:r.originalValue,originalPx:r.originalPx});i=t.spacingTokenMods.map((s,l)=>l===n?a:s)}else i=[...t.spacingTokenMods,e];return x(m({},o),{spacingTokenMods:i})}function Il(t,e){let o=Qe(t),n=t.spacingTokenMods.findIndex(l=>l.tokenPath===e.tokenPath),i=n>=0?t.spacingTokenMods[n].originalValue:e.originalValue,r=n>=0?t.spacingTokenMods[n].originalPx:parseFloat(e.originalValue)||0,a={tokenPath:e.tokenPath,originalValue:i,currentValue:"__deleted__",targets:n>=0?t.spacingTokenMods[n].targets:[],originalPx:r,currentPx:0},s;return n>=0?s=t.spacingTokenMods.map((l,c)=>c===n?a:l):s=[...t.spacingTokenMods,a],x(m({},o),{spacingTokenMods:s})}var Ll={SET_ANNOTATING:ja,SET_TOOL:Ga,SET_COLOR:Va,SET_STROKE_WIDTH:Ja,START_PATH:Xa,CONTINUE_PATH:Ka,CANCEL_PATH:Ua,FINISH_PATH:Za,ADD_TEXT:qa,UPDATE_TEXT:Qa,UPDATE_TEXT_SIZE:tl,DELETE_ANNOTATION:el,MOVE_ANNOTATION:nl,RESIZE_ANNOTATION:ol,PASTE_ANNOTATIONS:il,RESTORE_ANNOTATIONS:rl,UNDO:sl,REDO:al,SELECT_ANNOTATION:ll,UPDATE_ANNOTATION_COLOR:cl,MARK_CAPTURED:dl,CLEAR:ul,SELECT_ELEMENT:pl,MODIFY_STYLE:fl,MODIFY_STYLES_BATCH:gl,CLEAR_STYLE:ml,CLEAR_ALL_STYLES:hl,RESTORE_STYLE_MODIFICATIONS:yl,UPDATE_LINKED_POSITIONS:bl,CLEANUP_ORPHANED:Cl,SET_ANNOTATION_STATUS:xl,SET_ANNOTATION_THREAD:vl,SET_ANNOTATION_QUESTION:Sl,APPLY_RESOLUTIONS:wl,ADD_PLAN_ANNOTATION:kl,ADD_SPACING_TOKEN_CHANGE:El,RESTORE_SPACING_TOKEN_CHANGES:Tl,MODIFY_SPACING_TOKEN:Ml,DELETE_SPACING_TOKEN:Il};function Rl(t,e){let o=Ll[e.type];return o?o(t,e.payload):t}function es(){let[t,e]=Wa(Rl,Ya);return $a(()=>{let o=n=>{(n.metaKey||n.ctrlKey)&&n.key==="z"&&(n.preventDefault(),n.shiftKey?e({type:"REDO"}):e({type:"UNDO"}))};return window.addEventListener("keydown",o),()=>window.removeEventListener("keydown",o)},[]),[t,e]}function io(t){let e=Object.keys(t).find(i=>i.startsWith("__reactFiber$")||i.startsWith("__reactInternalInstance$"));if(!e)return null;let o=t[e],n=[];for(;o;){let i=o.type,r=(i==null?void 0:i.displayName)||(i==null?void 0:i.name);r&&typeof r=="string"&&/^[A-Z]/.test(r)&&!r.startsWith("_")&&r!=="Fragment"&&n.unshift(r),o=o.return}return n.length>0?{name:n[n.length-1],path:n}:null}function Al(t){if(t.id)return`#${t.id}`;let e=t.tagName.toLowerCase(),o=Array.from(t.classList).slice(0,3).join(".");return o?`${e}.${o}`:e}function Ve(t){let e={selector:Al(t),tagName:t.tagName.toLowerCase()};t.id&&(e.id=t.id),t.classList.length>0&&(e.className=Array.from(t.classList).join(" "));let o=ro(t);o&&o.length>0&&o.length<200&&(e.textContent=o);let n={};for(let a of t.attributes)a.name.startsWith("data-")&&(n[a.name]=a.value);Object.keys(n).length>0&&(e.dataAttributes=n);let i=io(t);i&&(e.reactComponent=i.name);let r=Pl(t);return r&&(e.context=r),e}function ro(t){let e="";for(let o of t.childNodes)o.nodeType===Node.TEXT_NODE&&(e+=o.textContent||"");return e.trim()}function Mn(t,e){let o=document.elementsFromPoint(t,e);for(let n of o)if(n instanceof HTMLElement&&!(n.id==="devtools-canvas"||n.id==="devtools-toolbar"||n.id==="devtools-scrim")&&!n.closest("#devtools-toolbar")&&!(n.dataset.devtools||n.closest("[data-devtools]"))&&!["html","body"].includes(n.tagName.toLowerCase()))return n;return null}function Pl(t){let e=t.parentElement,o=["section","article","nav","aside","header","footer","main"];for(;e&&e!==document.body;){let n=e.tagName.toLowerCase();if(o.includes(n)&&e.id)return`${n}#${e.id}`;if(e.id&&!e.id.startsWith("radix-")&&!e.id.startsWith(":"))return`${n}#${e.id}`;e=e.parentElement}return null}function os(t){let e=new Set,o=[],n=window.scrollX,i=window.scrollY,r=[{x:(t.minX+t.maxX)/2,y:(t.minY+t.maxY)/2},{x:t.minX,y:t.minY},{x:t.maxX,y:t.minY},{x:t.minX,y:t.maxY},{x:t.maxX,y:t.maxY}];for(let a of r){let s=a.x-n,l=a.y-i;if(s<0||l<0||s>window.innerWidth||l>window.innerHeight)continue;let c=Mn(s,l);c&&!e.has(c)&&(e.add(c),o.push(Ve(c)))}return o.slice(0,3)}function oi(t){if(t.length===0)return[];let e=t.map(n=>n.x),o=t.map(n=>n.y);return os({minX:Math.min(...e),minY:Math.min(...o),maxX:Math.max(...e),maxY:Math.max(...o)})}function is(t){let e=Object.keys(t).find(i=>i.startsWith("__reactFiber$")||i.startsWith("__reactInternalInstance$"));if(!e)return[];let o=t[e],n=[];for(;o;){let i=o.type,r=typeof i=="function"||typeof i=="object"?(i==null?void 0:i.displayName)||(i==null?void 0:i.name):null;r&&typeof r=="string"&&/^[A-Z]/.test(r)&&!r.startsWith("_")&&r!=="Fragment"&&n.push({name:r,fiber:o}),o=o.return}return n.reverse(),n}function ni(t){let e=t,o=new Set;for(;e&&!o.has(e);){if(o.add(e),e.stateNode instanceof Element)return e.stateNode;e.child?e=e.child:e=null}return null}function Lo(t,e=0){var l;let o=is(t);if(o.length===0)return null;let n=o.map(c=>c.name),i=o.length-1,r=Math.max(0,Math.min(o.length-1,i-e)),a=o[r],s=(l=ni(a.fiber))!=null?l:t;return{name:a.name,path:n,depthIndex:r,rootElement:s}}function rs(t,e){var r,a;let o=is(t),n=e.toLowerCase(),i=-1;for(let s=o.length-1;s>=0;s--){let l=o[s].name;if(l===e){let c=(r=ni(o[s].fiber))!=null?r:t;return{name:e,path:o.map(d=>d.name),depthIndex:s,rootElement:c}}if(i===-1){let c=l.toLowerCase();(c.length>=4&&n.includes(c)||n.length>=4&&c.includes(n))&&(i=s)}}if(i>=0){let s=(a=ni(o[i].fiber))!=null?a:t;return{name:e,path:o.map(l=>l.name),depthIndex:i,rootElement:s}}return null}function jn(t){let e=so(),o=[],n=new Set,i=e.currentNode;for(;i=e.nextNode();){let r=rs(i,t);r&&!n.has(r.rootElement)&&(n.add(r.rootElement),o.push(r))}return o}function ii(t){let e=new Map;if(t.size===0)return e;let o=new Set(t),n=so(),i=new Set,r=n.currentNode;for(;(r=n.nextNode())&&o.size>0;)for(let a of o){let s=rs(r,a);if(!s||i.has(s.rootElement))continue;i.add(s.rootElement);let l=s.rootElement.getBoundingClientRect();e.set(a,l.top+window.scrollY),o.delete(a);break}for(let a of o)e.set(a,1/0);return e}function so(){return document.createTreeWalker(document.body,NodeFilter.SHOW_ELEMENT,{acceptNode(t){return t.closest("#devtools-toolbar, #devtools-canvas, #devtools-scrim, [data-popmelt-panel]")?NodeFilter.FILTER_REJECT:NodeFilter.FILTER_ACCEPT}})}function Ne(t,e){return t.style.getPropertyValue(e)!==""}function Nl(t,e=30){if(t<=0)return[];let o=[],n=so(),i=.5,r=n.currentNode;for(;(r=n.nextNode())&&o.length<e;){let a=r,s=a.getBoundingClientRect();if(s.bottom<-50||s.top>window.innerHeight+50||s.right<-50||s.left>window.innerWidth+50||s.width<1||s.height<1)continue;let l=getComputedStyle(a);!Ne(a,"padding-top")&&Math.abs((parseFloat(l.paddingTop)||0)-t)<i&&o.push({element:a,property:"padding-top"}),!Ne(a,"padding-bottom")&&Math.abs((parseFloat(l.paddingBottom)||0)-t)<i&&o.length<e&&o.push({element:a,property:"padding-bottom"}),!Ne(a,"padding-left")&&Math.abs((parseFloat(l.paddingLeft)||0)-t)<i&&o.length<e&&o.push({element:a,property:"padding-left"}),!Ne(a,"padding-right")&&Math.abs((parseFloat(l.paddingRight)||0)-t)<i&&o.length<e&&o.push({element:a,property:"padding-right"}),!Ne(a,"margin-top")&&Math.abs((parseFloat(l.marginTop)||0)-t)<i&&o.length<e&&o.push({element:a,property:"margin-top"}),!Ne(a,"margin-bottom")&&Math.abs((parseFloat(l.marginBottom)||0)-t)<i&&o.length<e&&o.push({element:a,property:"margin-bottom"}),!Ne(a,"margin-left")&&Math.abs((parseFloat(l.marginLeft)||0)-t)<i&&o.length<e&&o.push({element:a,property:"margin-left"}),!Ne(a,"margin-right")&&Math.abs((parseFloat(l.marginRight)||0)-t)<i&&o.length<e&&o.push({element:a,property:"margin-right"});let c=l.display;if((c.includes("flex")||c.includes("grid"))&&o.length<e){let d=Ne(a,"gap"),u=parseFloat(l.gap)||0,p=parseFloat(l.rowGap)||0,f=parseFloat(l.columnGap)||0;!d&&Math.abs(u-t)<i?o.push({element:a,property:"gap"}):!Ne(a,"row-gap")&&Math.abs(p-t)<i?o.push({element:a,property:"row-gap"}):!Ne(a,"column-gap")&&Math.abs(f-t)<i&&o.push({element:a,property:"column-gap"})}}return o}function ri(t,e=30){if(t<=0)return[];let o=[],n=so(),i=.5,r=n.currentNode;for(;(r=n.nextNode())&&o.length<e;){let a=r,s=a.getBoundingClientRect();if(s.bottom<-50||s.top>window.innerHeight+50||s.right<-50||s.left>window.innerWidth+50||s.width<1||s.height<1)continue;let l=getComputedStyle(a),c=parseFloat(l.borderTopWidth)||0,d=parseFloat(l.borderRightWidth)||0,u=parseFloat(l.borderBottomWidth)||0,p=parseFloat(l.borderLeftWidth)||0,f=a.clientWidth,g=a.clientHeight,b=parseFloat(l.paddingTop)||0;!Ne(a,"padding-top")&&Math.abs(b-t)<i&&o.push({x:s.left+p,y:s.top+c,width:f,height:t,direction:"vertical",property:"padding-top"});let C=parseFloat(l.paddingBottom)||0;!Ne(a,"padding-bottom")&&Math.abs(C-t)<i&&o.length<e&&o.push({x:s.left+p,y:s.top+c+g-t,width:f,height:t,direction:"vertical",property:"padding-bottom"});let w=parseFloat(l.paddingLeft)||0;!Ne(a,"padding-left")&&Math.abs(w-t)<i&&o.length<e&&o.push({x:s.left+p,y:s.top+c,width:t,height:g,direction:"horizontal",property:"padding-left"});let L=parseFloat(l.paddingRight)||0;!Ne(a,"padding-right")&&Math.abs(L-t)<i&&o.length<e&&o.push({x:s.left+p+f-t,y:s.top+c,width:t,height:g,direction:"horizontal",property:"padding-right"});let A=parseFloat(l.marginTop)||0;!Ne(a,"margin-top")&&Math.abs(A-t)<i&&o.length<e&&o.push({x:s.left,y:s.top-t,width:s.width,height:t,direction:"vertical",property:"margin-top"});let R=parseFloat(l.marginBottom)||0;!Ne(a,"margin-bottom")&&Math.abs(R-t)<i&&o.length<e&&o.push({x:s.left,y:s.bottom,width:s.width,height:t,direction:"vertical",property:"margin-bottom"});let h=parseFloat(l.marginLeft)||0;!Ne(a,"margin-left")&&Math.abs(h-t)<i&&o.length<e&&o.push({x:s.left-t,y:s.top,width:t,height:s.height,direction:"horizontal",property:"margin-left"});let $=parseFloat(l.marginRight)||0;!Ne(a,"margin-right")&&Math.abs($-t)<i&&o.length<e&&o.push({x:s.right,y:s.top,width:t,height:s.height,direction:"horizontal",property:"margin-right"});let nt=l.display;if((nt.includes("flex")||nt.includes("grid"))&&o.length<e&&!Ne(a,"gap")){let K=Array.from(a.children).filter(q=>{let B=getComputedStyle(q);return B.display!=="none"&&B.position!=="absolute"&&B.position!=="fixed"});if(K.length>=2)for(let q=0;q<K.length-1&&o.length<e;q++){let B=K[q].getBoundingClientRect(),Q=K[q+1].getBoundingClientRect(),U=Q.top-B.bottom;Math.abs(U-t)<i&&U>.5&&o.push({x:Math.min(B.left,Q.left),y:B.bottom,width:Math.max(B.right,Q.right)-Math.min(B.left,Q.left),height:U,direction:"vertical",property:"gap"});let It=Q.left-B.right;Math.abs(It-t)<i&&It>.5&&o.push({x:B.right,y:Math.min(B.top,Q.top),width:It,height:Math.max(B.bottom,Q.bottom)-Math.min(B.top,Q.top),direction:"horizontal",property:"gap"})}}}return o}function sn(t){if(t.id&&!t.id.startsWith("radix-")&&!t.id.startsWith(":"))return`#${CSS.escape(t.id)}`;let e=[],o=t;for(;o&&o!==document.documentElement;){let n=o.tagName.toLowerCase();if(o.id&&!o.id.startsWith("radix-")&&!o.id.startsWith(":")){e.unshift(`#${CSS.escape(o.id)}`);break}let i=Array.from(o.classList).filter(a=>!a.startsWith("_")&&a.length<30).slice(0,2);i.length>0&&(n+="."+i.map(a=>CSS.escape(a)).join("."));let r=o.parentElement;if(r){let a=Array.from(r.children).filter(s=>s.tagName===o.tagName);if(a.length>1){let s=a.indexOf(o)+1;n+=`:nth-of-type(${s})`}}e.unshift(n),o=r}return e.join(" > ")}function Ro(t){return typeof t=="string"?{value:t}:t}var ss={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 ns(t,e){let o=ss[e];return o?o.includes(t):!1}function Bl(t,e){let o=t.split(/\s+/);for(let n of o){if(n===e)return!0;let i=n.lastIndexOf(":");if(i>=0&&n.slice(i+1)===e)return!0}return!1}function Ol(t){var s,l;let e=t.lastIndexOf(":"),o=e>=0?t.slice(e+1):t,n=o.indexOf("-");if(n<0)return null;let i=o.slice(0,n),r={gap:"gap","gap-x":"column-gap","gap-y":"row-gap",p:"padding",pt:"padding-top",pb:"padding-bottom",pl:"padding-left",pr:"padding-right",px:"padding-left",py:"padding-top",m:"margin",mt:"margin-top",mb:"margin-bottom",ml:"margin-left",mr:"margin-right",mx:"margin-left",my:"margin-top"},a=o.slice(0,o.indexOf("-",n+1)>0?o.indexOf("-",n+1):n);return(l=(s=r[a])!=null?s:r[i])!=null?l:null}function si(t,e=30){let o=parseFloat(t.value);if(isNaN(o)||o<=0)return[];if(t.bindings&&t.bindings.length>0){let i=[],r=so(),a=r.currentNode;for(;(a=r.nextNode())&&i.length<e;){let s=a,l=s.getBoundingClientRect();if(l.bottom<-50||l.top>window.innerHeight+50||l.right<-50||l.left>window.innerWidth+50||l.width<1||l.height<1)continue;let c=s.className;if(typeof c=="string")for(let d of t.bindings){if(!Bl(c,d))continue;let u=Ol(d);if(u&&!(t.property&&!ns(u,t.property))){i.push({element:s,property:u});break}}}return i}let n=Nl(o,e*2);return t.property?n.filter(i=>ns(i.property,t.property)).slice(0,e):n.slice(0,e)}function ai(t,e=30){let o=si(t,e),n=[];for(let i of o){let r=i.element,a=r.getBoundingClientRect(),s=getComputedStyle(r),l=parseFloat(s.borderTopWidth)||0,c=parseFloat(s.borderRightWidth)||0,d=parseFloat(s.borderLeftWidth)||0,u=r.clientWidth,p=r.clientHeight;switch(i.property){case"padding-top":{let f=parseFloat(s.paddingTop)||0;n.push({x:a.left+d,y:a.top+l,width:u,height:f,direction:"vertical",property:i.property});break}case"padding-bottom":{let f=parseFloat(s.paddingBottom)||0;n.push({x:a.left+d,y:a.top+l+p-f,width:u,height:f,direction:"vertical",property:i.property});break}case"padding-left":{let f=parseFloat(s.paddingLeft)||0;n.push({x:a.left+d,y:a.top+l,width:f,height:p,direction:"horizontal",property:i.property});break}case"padding-right":{let f=parseFloat(s.paddingRight)||0;n.push({x:a.left+d+u-f,y:a.top+l,width:f,height:p,direction:"horizontal",property:i.property});break}case"margin-top":{let f=parseFloat(s.marginTop)||0;n.push({x:a.left,y:a.top-f,width:a.width,height:f,direction:"vertical",property:i.property});break}case"margin-bottom":{let f=parseFloat(s.marginBottom)||0;n.push({x:a.left,y:a.bottom,width:a.width,height:f,direction:"vertical",property:i.property});break}case"margin-left":{let f=parseFloat(s.marginLeft)||0;n.push({x:a.left-f,y:a.top,width:f,height:a.height,direction:"horizontal",property:i.property});break}case"margin-right":{let f=parseFloat(s.marginRight)||0;n.push({x:a.right,y:a.top,width:f,height:a.height,direction:"horizontal",property:i.property});break}case"gap":case"row-gap":case"column-gap":{let f=Array.from(r.children).filter(g=>{let b=getComputedStyle(g);return b.display!=="none"&&b.position!=="absolute"&&b.position!=="fixed"});for(let g=0;g<f.length-1&&n.length<e;g++){let b=f[g].getBoundingClientRect(),C=f[g+1].getBoundingClientRect(),w=C.top-b.bottom;w>.5&&n.push({x:Math.min(b.left,C.left),y:b.bottom,width:Math.max(b.right,C.right)-Math.min(b.left,C.left),height:w,direction:"vertical",property:"gap"});let L=C.left-b.right;L>.5&&n.push({x:b.right,y:Math.min(b.top,C.top),width:L,height:Math.max(b.bottom,C.bottom)-Math.min(b.top,C.top),direction:"horizontal",property:"gap"})}break}}}return n}function as(t,e){let o=new Set,n=oo(e);for(let i of t){let r=cs[i.property];if(!r)continue;let a=i.element.className;if(typeof a=="string")for(let s of r){let l=`${s}-${n}`;for(let c of a.split(/\s+/)){let d=c.lastIndexOf(":"),u=d>=0?c.slice(d+1):c;if(u===l){o.add(u);break}}}}return[...o]}function ls(t){let e=new Set;for(let o of t)for(let[n,i]of Object.entries(ss))if(i.includes(o.property)){e.add(n);break}if(e.size===1)return[...e][0]}function li(t,e,o){if(e===o)return t;let n=oo(e),i=oo(o);return t.map(r=>{let a=r.lastIndexOf("-");if(a<0)return r;let s=r.slice(0,a),l=r.slice(a+1);return l===n||l===`[${e}px]`?`${s}-${i}`:r})}var Fl={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 oo(t){var e;return(e=Fl[t])!=null?e:`[${t}px]`}var cs={"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 Dl(t,e,o,n){let i=cs[e];if(!i)return null;let r=oo(o);for(let a of i){let s=new RegExp("(?:^|\\s)((?:[\\w-]+:)*"+a+"-(?:"+Hl(r)+"|\\["+o+"px\\]))(?:\\s|$)"),l=t.match(s);if(l!=null&&l[1]){let c=oo(n),d=l[1].lastIndexOf(":"),u=d>=0?l[1].slice(0,d+1):"";return{matched:l[1],suggested:`${u}${a}-${c}`}}}return null}function Hl(t){return t.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function ds(t,e,o){let n=new Set,i=[];for(let r of t){let a=sn(r.element),s=`${a}::${r.property}`;if(n.has(s))continue;n.add(s);let l=io(r.element),c=r.element.className||"",d=Dl(c,r.property,e,o);i.push({selector:a,reactComponent:l==null?void 0:l.name,className:c,property:r.property,matchedClass:d==null?void 0:d.matched,suggestedClass:d==null?void 0:d.suggested})}return i}function Je(t){try{return document.querySelector(t)}catch(e){return null}}function ci(t){let e=t.x+t.width/2,o=t.y+t.height/2,n=e-window.scrollX,i=o-window.scrollY,r=Mn(n,i);if(!r||!(r instanceof HTMLElement))return null;if(!r.hasAttribute("data-pm")){let d=Math.random().toString(36).substring(2,9);r.setAttribute("data-pm",d)}let s=`[data-pm="${r.getAttribute("data-pm")}"]`,l=Ve(r),c=r.getBoundingClientRect();return{selector:s,info:l,rect:c}}function ao(t,e){return window.getComputedStyle(t).getPropertyValue(e)}function di(t,e){if(t instanceof HTMLElement){let n=t.style.getPropertyValue(e);if(n)return n}let o=zl(t,e);return o&&o.includes("var(")?o:ao(t,e)}function zl(t,e){let o=e.replace(/-([a-z])/g,(n,i)=>i.toUpperCase());try{for(let n of document.styleSheets)try{let i=n.cssRules||n.rules;for(let r of i)if(r instanceof CSSStyleRule&&t.matches(r.selectorText)){let a=r.style.getPropertyValue(e);if(a&&a.includes("var("))return a;let s=r.style[o];if(s&&s.includes("var("))return s}}catch(i){}}catch(n){}return null}function Ao(t,e){if(t instanceof HTMLElement){let n=t.style.getPropertyValue(e);if(n)return n}let o=e.replace(/-([a-z])/g,(n,i)=>i.toUpperCase());try{for(let n of document.styleSheets)try{let i=n.cssRules||n.rules;for(let r of i)if(r instanceof CSSStyleRule&&t.matches(r.selectorText)){let a=r.style.getPropertyValue(e);if(a)return a;let s=r.style[o];if(s)return s}}catch(i){}}catch(n){}return null}function Po(t){let e=window.getComputedStyle(t).display;return e==="flex"||e==="inline-flex"||e==="grid"||e==="inline-grid"}function lo(t){let e=window.getComputedStyle(t);return{row:parseFloat(e.rowGap)||0,column:parseFloat(e.columnGap)||0}}function _l(t){let e=[];for(let o of t){let n=e.find(i=>i.axis!==o.axis?!1:o.axis==="row"?Math.abs(i.y-o.y)<2&&Math.abs(i.h-o.h)<2:Math.abs(i.x-o.x)<2&&Math.abs(i.w-o.w)<2);if(n)if(o.axis==="row"){let i=Math.min(n.x,o.x),r=Math.max(n.x+n.w,o.x+o.w);n.x=i,n.w=r-i}else{let i=Math.min(n.y,o.y),r=Math.max(n.y+n.h,o.y+o.h);n.y=i,n.h=r-i}else e.push(m({},o))}return e}function Bn(t){let e=Array.from(t.children).filter(l=>{if(!(l instanceof HTMLElement))return!1;let c=window.getComputedStyle(l);return c.display!=="none"&&c.position!=="absolute"&&c.position!=="fixed"});if(e.length<2)return[];let o=[],n=t.getBoundingClientRect(),r=window.getComputedStyle(t).flexDirection,a=r==="column"||r==="column-reverse",s=6;for(let l=0;l<e.length-1;l++){let c=e[l].getBoundingClientRect(),d=e[l+1].getBoundingClientRect();if(d.left>c.right+.5&&o.push({axis:"column",x:c.right,y:n.top,w:d.left-c.right,h:n.height}),d.top>c.bottom+.5&&o.push({axis:"row",x:n.left,y:c.bottom,w:n.width,h:d.top-c.bottom}),!(d.left>c.right+.5)&&!(d.top>c.bottom+.5))if(a){let u=(c.bottom+d.top)/2;o.push({axis:"row",x:n.left,y:u-s/2,w:n.width,h:s})}else{let u=(c.right+d.left)/2;o.push({axis:"column",x:u-s/2,y:n.top,w:s,h:n.height})}}return _l(o)}function ui(t,e){let o=window.getComputedStyle(t),n=o.display;if(n!=="flex"&&n!=="inline-flex")return!1;let i=o.justifyContent;if(i!=="space-between"&&i!=="space-around"&&i!=="space-evenly"&&i!=="stretch")return!1;let r=o.flexDirection;return!(e!==(r==="column"||r==="column-reverse"?"row":"column")||parseFloat(e==="row"?o.rowGap:o.columnGap)>0)}function Gn(t){let e=window.getComputedStyle(t);return{top:parseFloat(e.paddingTop)||0,right:parseFloat(e.paddingRight)||0,bottom:parseFloat(e.paddingBottom)||0,left:parseFloat(e.paddingLeft)||0}}function On(t){let e=window.getComputedStyle(t);return{"top-left":parseFloat(e.borderTopLeftRadius)||0,"top-right":parseFloat(e.borderTopRightRadius)||0,"bottom-right":parseFloat(e.borderBottomRightRadius)||0,"bottom-left":parseFloat(e.borderBottomLeftRadius)||0}}function pi(t){for(let e of t.childNodes)if(e.nodeType===Node.TEXT_NODE&&(e.textContent||"").trim().length>0)return!0;return!1}function Vn(t){var d,u;let e=document.createRange(),o=!1;for(let p of t.childNodes)p.nodeType===Node.TEXT_NODE&&(p.textContent||"").trim().length>0&&(o||(e.setStart(p,0),o=!0),e.setEnd(p,(u=(d=p.textContent)==null?void 0:d.length)!=null?u:0));if(!o)return null;let n=e.getBoundingClientRect(),i=window.getComputedStyle(t),r=parseFloat(i.fontSize)||16,a=parseFloat(i.lineHeight);isNaN(a)&&(a=r*1.2);let s=Math.max(1,e.getClientRects().length),l=Math.max(n.height,s*a),c=(l-n.height)/2;return new DOMRect(n.x,n.y-c,n.width,l)}function co(t){let e=window.getComputedStyle(t),o=parseFloat(e.fontSize)||16,n=parseFloat(e.lineHeight);return isNaN(n)&&(n=o*1.2),{fontSize:o,lineHeight:n}}function Gt(t,e,o){t instanceof HTMLElement&&t.style.setProperty(e,o,"important")}function fi(t,e,o){t instanceof HTMLElement&&t.style.removeProperty(e)}function No(t){var e;for(let o of t){let n=Je(o.selector);if(!n&&o.durableSelector&&(n=Je(o.durableSelector),n)){let i=(e=o.selector.match(/\[data-pm="([^"]+)"\]/))==null?void 0:e[1];i&&n.setAttribute("data-pm",i)}if(n)for(let i of o.changes)Gt(n,i.property,i.modified)}}function gi(t,e){let o=Je(t);if(!o)return;let n=e.find(i=>i.selector===t);if(n)for(let i of n.changes)fi(o,i.property,i.original)}function Bo(t){for(let e of t){let o=Je(e.selector);if(o)for(let n of e.changes)fi(o,n.property,n.original)}}function ps(t,e,o,n){if(t)for(let i of t){if(i instanceof CSSGroupingRule){ps(i.cssRules,e,o,n);continue}if(i instanceof CSSStyleRule){let r=i.selectorText.toLowerCase();(r===":root"||r==="html"||r==="*"||r.includes(":root"))&&$l(i.style,e,o,n)}}}function $l(t,e,o,n){for(let i=0;i<t.length;i++){let r=t[i];if(r!=null&&r.startsWith("--")){if(o.has(r))continue;o.add(r);let a=e.getPropertyValue(r).trim();fs(a)&&n.push({name:r,value:a,usage:`var(${r})`})}}}var Oo=null,Wl=5e3;function mi(){if(Oo&&Date.now()-Oo.timestamp<Wl)return Oo.variables;let t=[],e=new Set,o=getComputedStyle(document.documentElement);try{for(let r of document.styleSheets)try{ps(r.cssRules||r.rules,o,e,t)}catch(a){}}catch(r){}let n=document.documentElement.style;for(let r=0;r<n.length;r++){let a=n[r];if(a!=null&&a.startsWith("--")&&!e.has(a)){e.add(a);let s=o.getPropertyValue(a).trim();fs(s)&&t.push({name:a,value:s,usage:`var(${a})`})}}let i=t.sort((r,a)=>r.name.localeCompare(a.name));return Oo={variables:i,timestamp:Date.now()},i}function fs(t){if(!t)return!1;let e=t.toLowerCase().trim();return!!(/^#([0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(e)||e.startsWith("rgb")||e.startsWith("hsl")||e.startsWith("oklch")||e.startsWith("oklab")||e.startsWith("lch")||e.startsWith("lab")||["transparent","currentcolor","inherit","white","black","red","green","blue","yellow","orange","purple","pink","gray","grey"].includes(e))}function Fo(t,e){let o=e.match(/var\((--[^,)]+)(?:,\s*([^)]+))?\)/);if(o){let n=o[1],i=o[2];return getComputedStyle(document.documentElement).getPropertyValue(n).trim()||i||e}return e}function Do(t,e){if(!t)return null;let o=us(t);if(!o)return null;for(let n of e){let i=us(n.value);if(i&&o===i)return n}return null}function us(t){if(!t)return null;let e=t.trim().toLowerCase();if(e.startsWith("oklch(")){let o=e.match(/oklch\(\s*([\d.]+%?)\s+([\d.]+%?)\s+([\d.]+)/);if(o){let n=o[1].endsWith("%")?parseFloat(o[1])/100:parseFloat(o[1]),i=o[2].endsWith("%")?parseFloat(o[2])/100:parseFloat(o[2]),r=parseFloat(o[3]);n=Math.round(n*100)/100,i=Math.round(i*1e3)/1e3;let a=Math.round(r);return`oklch(${n} ${i} ${a})`}}if(e.startsWith("rgb")){let o=e.match(/rgba?\(\s*(\d+)[,\s]+(\d+)[,\s]+(\d+)/);if(o)return`rgb(${o[1]},${o[2]},${o[3]})`}return e.startsWith("#")?e.length===4?`#${e[1]}${e[1]}${e[2]}${e[2]}${e[3]}${e[3]}`:e.slice(0,7):e}var Yl=new Set(["button","a","input","select","textarea"]),jl=new Set(["button","link"]),Gl=new Set(["h1","h2","h3","h4","h5","h6","nav","main","header","footer","section","article","aside"]),Vl=["fontSize","fontWeight","fontFamily","lineHeight","letterSpacing","color","backgroundColor","padding","gap","borderRadius","boxShadow"];var hi=150;function Jl(t){let e=0,o=t.parentElement;for(;o&&o!==document.body;)e++,o=o.parentElement;return e}function Xl(t){return!(t.startsWith("_")||t.startsWith("css-")||t.length>30)}function Kl(t){let e=Array.from(t.classList).filter(Xl).slice(0,3);return e.length>0?e.join(" "):void 0}function Ul(t,e){let o=window.getComputedStyle(t),n=e?window.getComputedStyle(e):null,i={};for(let r of Vl){let a=o.getPropertyValue(r.replace(/[A-Z]/g,s=>`-${s.toLowerCase()}`));if(a&&!(r==="backgroundColor"&&(a==="rgba(0, 0, 0, 0)"||a==="transparent"))&&!(r==="boxShadow"&&a==="none")){if(r==="boxShadow"&&(a="yes"),r==="fontFamily"&&(a=a.split(",")[0].trim().replace(/['"]/g,"")),n){let s=n.getPropertyValue(r.replace(/[A-Z]/g,l=>`-${l.toLowerCase()}`));if(a===s)continue}i[r]=a}}return Object.keys(i).length>0?i:void 0}function Zl(t){if(!(t instanceof HTMLElement))return!1;let e=window.getComputedStyle(t);if(e.display==="none"||e.visibility==="hidden")return!1;if(t.offsetParent===null){let o=t.tagName.toLowerCase();if(o==="body"||o==="html")return!0;let n=e.position;return n==="fixed"||n==="sticky"}return!0}function ql(t){return!!(t instanceof HTMLElement&&t.dataset.devtools||t.closest("[data-devtools]")||t.id==="devtools-canvas"||t.id==="devtools-toolbar"||t.id==="devtools-scrim")}function Ql(t){let e=t.tagName.toLowerCase(),o=ro(t);if(o&&o.length>0||Yl.has(e))return!0;let n=t.getAttribute("role");return!!(n&&jl.has(n)||Gl.has(e)||(e==="img"||e==="svg")&&(t.getAttribute("alt")||t.getAttribute("aria-label")))}function gs(){var c,d,u,p,f;let t=[],e=document.createTreeWalker(document.body,NodeFilter.SHOW_ELEMENT),o=e.nextNode();for(;o;){let g=o;if(o=e.nextNode(),ql(g)||!Zl(g))continue;let b=g.getBoundingClientRect();if(b.width<1||b.height<1||!Ql(g))continue;let C=g.tagName.toLowerCase(),w=ro(g),L=Jl(g),A=g.getAttribute("role")||void 0,R=C==="a"&&g.getAttribute("href")||void 0,h=C==="img"&&g.getAttribute("alt")||void 0,$=(c=io(g))==null?void 0:c.name,nt=Kl(g),Y=Ul(g,g.parentElement),K={tag:C,rect:{x:Math.round(b.left+window.scrollX),y:Math.round(b.top+window.scrollY),w:Math.round(b.width),h:Math.round(b.height)},depth:L};w&&(K.text=w.length>80?w.slice(0,80)+"...":w),$&&(K.component=$),nt&&(K.classes=nt),Y&&(K.styles=Y),A&&(K.role=A),R&&(K.href=R),h&&(K.alt=h),t.push({el:g,entry:K})}t.sort((g,b)=>b.entry.depth-g.entry.depth);let n=new Set;for(let g=0;g<t.length;g++){let b=t[g];if(n.has(b.el))continue;let C=b.el.parentElement;if(!C||!t.find(R=>R.el===C))continue;let L=(d=b.el.textContent)==null?void 0:d.trim(),A=(u=C.textContent)==null?void 0:u.trim();L&&A&&L===A&&n.add(b.el)}let i=t.filter(g=>!n.has(g.el)),r=new Map;for(let g of i){let b=g.el.parentElement,C=[b?Array.from(b.classList).join("."):"",g.entry.tag,(p=g.entry.component)!=null?p:"",g.entry.styles?JSON.stringify(g.entry.styles):""].join("|"),w=(f=r.get(C))!=null?f:[];w.push(g),r.set(C,w)}let a=[],s=new Set;for(let[,g]of r)if(g.length>3){a.push(g[0].entry,g[1].entry),s.add(g[0].el),s.add(g[1].el);let b=1/0,C=1/0,w=-1/0,L=-1/0;for(let A=2;A<g.length;A++){let R=g[A].entry.rect;b=Math.min(b,R.x),C=Math.min(C,R.y),w=Math.max(w,R.x+R.w),L=Math.max(L,R.y+R.h)}a.push({tag:g[0].entry.tag,text:`(+${g.length-2} similar items)`,rect:{x:Math.round(b),y:Math.round(C),w:Math.round(w-b),h:Math.round(L-C)},depth:g[0].entry.depth});for(let A of g)s.add(A.el)}for(let g of i)s.has(g.el)||a.push(g.entry);let l=Math.max(document.documentElement.scrollHeight,1);if(a.sort((g,b)=>{let C=g.rect.w*g.rect.h,w=b.rect.w*b.rect.h,L=C*(1+.5*(1-g.rect.y/l));return w*(1+.5*(1-b.rect.y/l))-L}),a.length>hi){let g=a.slice(0,hi);return g.push({tag:"truncated",text:`${a.length-hi} additional elements omitted`,rect:{x:0,y:0,w:0,h:0},depth:0}),g}return a}import{domToCanvas as tc}from"modern-screenshot";function bi(t){let e=document.createElement("canvas").getContext("2d");return e?(e.fillStyle=t,e.fillStyle):"#888888"}function Ho(t,e=[],o,n){let i=new Map,r=[];for(let s of t)if(s.groupId){let l=i.get(s.groupId)||[];l.push(s),i.set(s.groupId,l)}else r.push(s);let a=[];for(let[s,l]of i){let c=l.find(u=>u.type!=="text"),d=l.find(u=>u.type==="text");if(c){let u=c.linkedSelector||(d==null?void 0:d.linkedSelector),p=(d==null?void 0:d.imageCount)||c.imageCount;a.push(m(x(m({id:c.id,type:c.type,instruction:d==null?void 0:d.text},u?{linkedSelector:u}:{}),{elements:c.elements||[]}),p?{imageCount:p}:{}))}}for(let s of r)a.push(m(x(m({id:s.id,type:s.type,instruction:s.type==="text"?s.text:void 0},s.linkedSelector?{linkedSelector:s.linkedSelector}:{}),{elements:s.elements||[]}),s.imageCount?{imageCount:s.imageCount}:{}));return m(m({timestamp:new Date().toISOString(),url:window.location.href,viewport:{width:window.innerWidth,height:window.innerHeight},scrollPosition:{x:window.scrollX,y:window.scrollY},annotations:a,styleModifications:e},o?{inspectedElement:o}:{}),n&&n.length>0?{spacingTokenChanges:n}:{})}function ms(t){if(!t.points||t.points.length===0)return null;let e=t.points.map(n=>n.x),o=t.points.map(n=>n.y);return{minX:Math.min(...e),minY:Math.min(...o),maxX:Math.max(...e),maxY:Math.max(...o)}}function ec(t,e){if(t.length===0)return[];let o=t.map(d=>({annotation:d,bounds:ms(d)})).filter(d=>d.bounds!==null);if(o.length===0)return[];o.sort((d,u)=>d.bounds.minY-u.bounds.minY);let n=Math.min(...o.map(d=>d.bounds.minY)),i=Math.max(...o.map(d=>d.bounds.maxY));if(i-n<=e){let d=(n+i)/2,u=Math.max(0,d-e/2);return[{top:u,bottom:u+e,annotations:t}]}let r=[],a=50,s=Math.max(0,n-a),l=[],c=s;for(let{annotation:d,bounds:u}of o){let p=u.maxY+a;if(p-s<=e)l.push(d),c=Math.max(c,p);else{if(l.length>0){let f=(s+c)/2,g=Math.max(0,f-e/2);r.push({top:g,bottom:g+e,annotations:l})}s=Math.max(0,u.minY-a),l=[d],c=u.maxY+a}}if(l.length>0){let d=(s+c)/2,u=Math.max(0,d-e/2);r.push({top:u,bottom:u+e,annotations:l})}return r}function nc(t,e,o,n){t.save(),t.scale(n,n);for(let i of e){let r=i.points.map(a=>({x:a.x,y:a.y-o}));switch(t.strokeStyle=i.color,t.fillStyle=i.color,t.lineWidth=i.strokeWidth,t.lineCap="round",t.lineJoin="round",i.type){case"freehand":if(r.length<2)break;t.beginPath(),t.moveTo(r[0].x,r[0].y);for(let a=1;a<r.length;a++)t.lineTo(r[a].x,r[a].y);t.stroke();break;case"line":if(r.length<2)break;t.beginPath(),t.moveTo(r[0].x,r[0].y),t.lineTo(r[r.length-1].x,r[r.length-1].y),t.stroke();break;case"rectangle":{if(r.length<2)break;let a=r[0],s=r[r.length-1],l=Math.min(a.x,s.x),c=Math.min(a.y,s.y),d=Math.abs(s.x-a.x),u=Math.abs(s.y-a.y);t.strokeRect(l,c,d,u);break}case"circle":{if(r.length<2)break;let a=r[0],s=r[r.length-1],l=(a.x+s.x)/2,c=(a.y+s.y)/2,d=Math.abs(s.x-a.x)/2,u=Math.abs(s.y-a.y)/2;t.beginPath(),t.ellipse(l,c,d,u,0,0,Math.PI*2),t.stroke();break}case"text":{if(!i.text||r.length<1)break;let a=r[0],s=i.fontSize||16;t.font=`${s}px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`,t.fillStyle=i.color;let c=(i.imageCount&&i.imageCount>0?`[${i.imageCount} image${i.imageCount>1?"s":""}] ${i.text}`:i.text).split(`
|
|
3
|
-
`),d=s*1.2,
|
|
4
|
-
`),l=r!==void 0?[r+". "+(s[0]||""),...s.slice(1)]:s;t.font=`${i}px ${Ce}`,t.textBaseline="middle";let c=l.map(f=>t.measureText(f).width),d=Math.min(400,Math.max(...c)),u=l.length*a,p=l.map((f,g)=>{if(c[g]<=400)return f;let b=0,C=f.length;for(;b<C;){let w=b+C+1>>1;t.measureText(f.slice(0,w)+"\u2026").width<=400?b=w:C=w-1}return f.slice(0,b)+"\u2026"});t.fillStyle=n,t.fillRect(e.x-4,e.y-4,d+8,u+8),t.fillStyle="#ffffff",p.forEach((f,g)=>{t.fillText(f,e.x,e.y+g*a+a/2)})}var bs=11,Ci=4,ic=`600 ${bs}px system-ui, -apple-system, sans-serif`;function Ei(t,e,o){return t.map(n=>({x:n.x-e,y:n.y-o}))}function rc(t,e,o,n,i,r){let a=String(n);t.font=ic;let l=t.measureText(a).width+Ci*2,c=bs+Ci*2,d=e-l/2,u=o+r/2+2;t.fillStyle=i,t.fillRect(d,u,l,c),t.fillStyle="#ffffff",t.textBaseline="middle",t.fillText(a,d+Ci,u+c/2)}function sc(t,e){if(t.points.length<2&&t.type!=="text")return null;switch(t.type){case"rectangle":case"freehand":{let o,n;if(t.type==="freehand")o=Math.min(...t.points.map(i=>i.x)),n=Math.max(...t.points.map(i=>i.y));else{let i=t.points[0],r=t.points[t.points.length-1];o=Math.min(i.x,r.x),n=Math.max(i.y,r.y)}return{x:o,y:n}}case"circle":{let o=t.points[0],n=t.points[t.points.length-1],i=Math.min(o.x,n.x),r=(Math.min(o.y,n.y)+Math.max(o.y,n.y))/2;return{x:i,y:r}}case"line":{let o=t.points[0],n=t.points[t.points.length-1],i=o.y>n.y?o:n;return{x:i.x,y:i.y}}default:return null}}function xs(){let t=oc(null),e=Jn(()=>{let s=t.current;if(!s)return;let l=s.getContext("2d");l&&l.clearRect(0,0,s.width,s.height)},[]),o=Jn((s,l)=>{var f;let c=t.current;if(!c)return;let d=c.getContext("2d");if(!d)return;let p=((f=s.status)!=null?f:s.captured?"in_flight":"pending")==="pending"?s.color:"#999999";switch(s.type){case"freehand":Si(d,s.points,p,s.strokeWidth);break;case"line":wi(d,s.points,p,s.strokeWidth);break;case"rectangle":ki(d,s.points,p,s.strokeWidth);break;case"circle":vi(d,s.points,p,s.strokeWidth);break;case"text":s.text&&s.points[0]&&ys(d,s.points[0],s.text,p,s.fontSize,l);break}},[]),n=Jn((s,l,c,d)=>{let u=t.current;if(!u||s.length<2)return;let p=u.getContext("2d");if(p)switch(l){case"freehand":Si(p,s,c,d);break;case"line":wi(p,s,c,d);break;case"rectangle":ki(p,s,c,d);break;case"circle":vi(p,s,c,d);break}},[]),i=Jn((s,l)=>{let c=t.current;if(!c||s.points.length<2)return;let d=c.getContext("2d");if(d){if(d.fillStyle="#ffffff",d.strokeStyle=s.color,d.lineWidth=1.5,s.type==="line"){let u=s.points[0],p=s.points[s.points.length-1];[u,p].forEach(f=>{d.beginPath(),d.arc(f.x,f.y,l/2,0,Math.PI*2),d.fill(),d.stroke()});return}if(s.type==="circle"){let u=s.points[0],p=s.points[s.points.length-1],f=Math.min(u.x,p.x),g=Math.max(u.x,p.x),b=Math.min(u.y,p.y),C=Math.max(u.y,p.y),w=(f+g)/2,L=(b+C)/2;[{x:w,y:b},{x:w,y:C},{x:f,y:L},{x:g,y:L}].forEach(R=>{d.beginPath(),d.rect(R.x-l/2,R.y-l/2,l,l),d.fill(),d.stroke()});return}if(s.type==="rectangle"||s.type==="freehand"){let u,p,f,g;if(s.type==="freehand")u=Math.min(...s.points.map(C=>C.x)),p=Math.max(...s.points.map(C=>C.x)),f=Math.min(...s.points.map(C=>C.y)),g=Math.max(...s.points.map(C=>C.y));else{let C=s.points[0],w=s.points[s.points.length-1];u=Math.min(C.x,w.x),p=Math.max(C.x,w.x),f=Math.min(C.y,w.y),g=Math.max(C.y,w.y)}[{x:u,y:f},{x:p,y:f},{x:u,y:g},{x:p,y:g}].forEach(C=>{d.beginPath(),d.rect(C.x-l/2,C.y-l/2,l,l),d.fill(),d.stroke()})}}},[]),r=Jn((s,l,c,d,u,p,f,g=0,b=0,C)=>{var w;if(e(),s.forEach(L=>{let A=x(m({},L),{points:Ei(L.points,g,b)}),R=C==null?void 0:C.get(L.id);o(A,R)}),l.length>0){let L=Ei(l,g,b);n(L,c,d,u)}if(p&&p.length>0&&f){let L=t.current,A=L==null?void 0:L.getContext("2d");for(let R of p){let h=s.find($=>$.id===R);if(h){let $=x(m({},h),{points:Ei(h.points,g,b)});if(i($,f),A&&h.type!=="text"&&C&&!(h.groupId&&s.some(Y=>Y.groupId===h.groupId&&Y.type==="text"))){let Y=C.get(h.id);if(Y!==void 0){let K=sc($,f);if(K){let B=((w=h.status)!=null?w:h.captured?"in_flight":"pending")==="pending"?h.color:"#999999";rc(A,K.x,K.y,Y,B,f)}}}}}}},[e,o,n,i]),a=Jn(()=>{let s=t.current;if(!s)return;let l=window.devicePixelRatio||1;s.width=window.innerWidth*l,s.height=window.innerHeight*l;let c=s.getContext("2d");c&&c.scale(l,l)},[]);return{canvasRef:t,clearCanvas:e,drawAnnotation:o,drawCurrentPath:n,redrawAll:r,resizeCanvas:a}}import{useEffect as ac,useRef as lc}from"react";function vs(){let t=lc({shift:!1,cmd:!1});return ac(()=>{let e=i=>{i.key==="Shift"&&(t.current.shift=!0),(i.key==="Meta"||i.key==="Control")&&(t.current.cmd=!0)},o=i=>{i.key==="Shift"&&(t.current.shift=!1),(i.key==="Meta"||i.key==="Control")&&(t.current.cmd=!1)},n=()=>{t.current={shift:!1,cmd:!1}};return window.addEventListener("keydown",e,!0),window.addEventListener("keyup",o,!0),window.addEventListener("blur",n),()=>{window.removeEventListener("keydown",e,!0),window.removeEventListener("keyup",o,!0),window.removeEventListener("blur",n)}},[]),t}import{useEffect as cc}from"react";function Ss(t,e,o,n,i){cc(()=>{let r=a=>{if(t){if(t.linkedSelector)return;a.preventDefault(),a.stopPropagation();let l=a.deltaY>0?-2:2;e(c=>c?x(m({},c),{fontSize:Math.max(12,Math.min(72,c.fontSize+l))}):null);return}if(!o)return;a.preventDefault();let s=n.find(l=>l.id===o);if(s&&s.type==="text"&&!s.linkedSelector){let l=s.fontSize||12,c=a.deltaY>0?-2:2;i({type:"UPDATE_TEXT_SIZE",payload:{id:o,fontSize:l+c}})}};return window.addEventListener("wheel",r,{passive:!1}),()=>{window.removeEventListener("wheel",r)}},[o,t,n,i,e])}function $o(t){var r;let e=new Set,o=new Map;for(let a of t){if(!a.linkedSelector)continue;let s=o.get(a.linkedSelector)||[];s.push(a),o.set(a.linkedSelector,s)}let n=new Set,i=new Set;for(let a of o.values()){if(a.length<=1){(r=a[0])!=null&&r.groupId&&i.add(a[0].groupId);continue}a.sort((l,c)=>c.timestamp-l.timestamp);let s=a[0];s.groupId&&i.add(s.groupId);for(let l=1;l<a.length;l++){let c=a[l];e.add(c),c.groupId&&n.add(c.groupId)}}for(let a of t)a.groupId&&n.has(a.groupId)&&!i.has(a.groupId)&&e.add(a);return e}import{useEffect as ws,useLayoutEffect as dc,useState as ks}from"react";import{jsx as Ti,jsxs as Es}from"react/jsx-runtime";function uc(t,e){let o=t.match(/^oklch\(([^)]+)\)$/i);return o?`oklch(${o[1]} / ${e})`:`color-mix(in srgb, ${t} ${Math.round(e*100)}%, transparent)`}var Cs=["top-left","top-right","bottom-right","bottom-left"];function Ts({element:t,radius:e,accentColor:o,hoveredCorner:n,draggingCorner:i,cursorViewport:r}){let[a,s]=ks(null),[l,c]=ks(!1);if(ws(()=>{let w=R=>{(R.key==="Meta"||R.key==="Control")&&c(!0)},L=R=>{(R.key==="Meta"||R.key==="Control")&&c(!1)},A=()=>c(!1);return window.addEventListener("keydown",w,!0),window.addEventListener("keyup",L,!0),window.addEventListener("blur",A),()=>{window.removeEventListener("keydown",w,!0),window.removeEventListener("keyup",L,!0),window.removeEventListener("blur",A)}},[]),ws(()=>{if(!t){s(null);return}let w=()=>{s(t.getBoundingClientRect())};return w(),window.addEventListener("scroll",w,{passive:!0}),window.addEventListener("resize",w,{passive:!0}),()=>{window.removeEventListener("scroll",w),window.removeEventListener("resize",w)}},[t]),dc(()=>{t&&s(t.getBoundingClientRect())},[t,e["top-left"],e["top-right"],e["bottom-right"],e["bottom-left"]]),!a)return null;let d=a.width,u=a.height,p=uc(o,.2),f={"top-left":{x:0,y:e["top-left"]},"top-right":{x:d,y:e["top-right"]},"bottom-right":{x:d,y:u-e["bottom-right"]},"bottom-left":{x:0,y:u-e["bottom-left"]}},g=new Set,b=i!=null?i:n;if(b)if(l)g.add(b);else for(let w of Cs)g.add(w);let C={position:"fixed",top:a.top,left:a.left,width:d,height:u,pointerEvents:"none",zIndex:9996,overflow:"visible"};return Es("div",{"data-devtools":"border-radius-handles",style:C,children:[Es("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${d} ${u}`,children:[Ti("rect",{x:"0.5",y:"0.5",width:Math.max(0,d-1),height:Math.max(0,u-1),fill:"none",stroke:p,strokeWidth:"1"}),Cs.map(w=>{let L=f[w],A=g.has(w);return Ti("circle",{cx:L.x,cy:L.y,r:w===(i!=null?i:n)?3:2.5,fill:o,stroke:"#ffffff",strokeWidth:w===(i!=null?i:n)?4:2,paintOrder:"stroke"},w)})]}),r&&b&&(()=>{let w=Math.round(e[b]);return Ti("div",{style:{position:"fixed",left:r.x+8,top:r.y-28,background:o,color:"#fff",fontSize:11,fontWeight:600,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',lineHeight:1,padding:"4px 4px",borderRadius:0,whiteSpace:"nowrap",pointerEvents:"none",zIndex:9997},children:w})})()]})}import{useEffect as pc,useState as fc}from"react";import{Fragment as gc,jsx as Fn,jsxs as uo}from"react/jsx-runtime";function Ms(t,e){let o=t.match(/^oklch\(([^)]+)\)$/i);if(o)return`oklch(${o[1]} / ${e})`;let n=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);if(n){let i=parseInt(n[1],16),r=parseInt(n[2],16),a=parseInt(n[3],16);return`rgba(${i}, ${r}, ${a}, ${e})`}return`color-mix(in srgb, ${t} ${Math.round(e*100)}%, transparent)`}function Xn({element:t,isSelected:e=!1,elementInfo:o,color:n="#3b82f6",annotationNumber:i,changeCount:r,hideTooltip:a=!1}){let[s,l]=fc(null);if(pc(()=>{if(!t){l(null);return}let R=()=>{let h=t.getBoundingClientRect();l(h)};return R(),window.addEventListener("scroll",R,{passive:!0}),window.addEventListener("resize",R,{passive:!0}),()=>{window.removeEventListener("scroll",R),window.removeEventListener("resize",R)}},[t]),!s||!t)return null;let c={position:"fixed",top:s.top,left:s.left,width:s.width,height:s.height,pointerEvents:"none",zIndex:9996,backgroundColor:e?Ms(n,.1):Ms(n,.05),overflow:"visible"},d={position:"absolute",width:2,height:2,backgroundColor:n,pointerEvents:"none"},u=t.tagName.toLowerCase(),p=t.id?`#${t.id}`:"",f=t.classList.length>0?"."+Array.from(t.classList).slice(0,2).join("."):"",g=o==null?void 0:o.reactComponent,b=g?`<${g}> ${u}${p}${f}`:`${u}${p}${f}`,C=22,L={position:"fixed",top:s.top>=C?s.top-C:s.bottom,left:s.left,zIndex:9997,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,pointerEvents:"none",whiteSpace:"nowrap",maxWidth:400},A={overflow:"hidden",textOverflow:"ellipsis",flex:1,minWidth:0};return uo(gc,{children:[uo("div",{"data-devtools":"highlight",style:c,children:[Fn("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},children:Fn("rect",m({x:"0.5",y:"0.5",width:Math.max(0,s.width-1),height:Math.max(0,s.height-1),fill:"none",stroke:n,strokeWidth:"1"},!e&&{strokeDasharray:"2 4"}))}),Fn("div",{style:x(m({},d),{top:-1,left:-1})}),Fn("div",{style:x(m({},d),{top:-1,right:-1})}),Fn("div",{style:x(m({},d),{bottom:-1,left:-1})}),Fn("div",{style:x(m({},d),{bottom:-1,right:-1})})]}),!a&&uo("div",{"data-devtools":"tooltip",style:L,children:[i!==void 0&&uo("span",{children:[i,"."]}),Fn("span",{style:A,children:b}),r!==void 0&&r>0&&uo("span",{style:{opacity:.8},children:["(",r," ",r===1?"change":"changes",")"]})]})]})}import{useEffect as Is,useLayoutEffect as mc,useState as Mi}from"react";import{jsx as vn,jsxs as Li}from"react/jsx-runtime";function Ii(t,e){let o=t.match(/^oklch\(([^)]+)\)$/i);return o?`oklch(${o[1]} / ${e})`:`color-mix(in srgb, ${t} ${Math.round(e*100)}%, transparent)`}function Ri({element:t,gap:e,accentColor:o,hoveredAxis:n,draggingAxis:i,cursorViewport:r,isAutoGap:a=!1,refreshKey:s=0}){let[l,c]=Mi(null),[d,u]=Mi([]),[p,f]=Mi(!1);if(Is(()=>{let Y=B=>{(B.key==="Meta"||B.key==="Control")&&f(!0)},K=B=>{(B.key==="Meta"||B.key==="Control")&&f(!1)},q=()=>f(!1);return window.addEventListener("keydown",Y,!0),window.addEventListener("keyup",K,!0),window.addEventListener("blur",q),()=>{window.removeEventListener("keydown",Y,!0),window.removeEventListener("keyup",K,!0),window.removeEventListener("blur",q)}},[]),Is(()=>{if(!t){c(null),u([]);return}let Y=()=>{c(t.getBoundingClientRect()),u(Bn(t))};return Y(),window.addEventListener("scroll",Y,{passive:!0}),window.addEventListener("resize",Y,{passive:!0}),()=>{window.removeEventListener("scroll",Y),window.removeEventListener("resize",Y)}},[t]),mc(()=>{t&&(c(t.getBoundingClientRect()),u(Bn(t)))},[t,e.row,e.column,s]),!l||d.length===0)return null;let g=l.width,b=l.height,C="pm-gap-stripe-pattern",w=Ii(o,.25),L=Ii(o,.1),A=Ii(o,.2),R=8,h=2,$={position:"fixed",top:l.top,left:l.left,width:g,height:b,pointerEvents:"none",zIndex:9996,overflow:"visible"},nt=i!=null?i:n;return Li("div",{"data-devtools":"gap-handles",style:$,children:[Li("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${g} ${b}`,children:[vn("defs",{children:vn("pattern",{id:C,patternUnits:"userSpaceOnUse",width:"4",height:"4",patternTransform:"rotate(45)",children:vn("line",{x1:"0",y1:"0",x2:"0",y2:"4",stroke:w,strokeWidth:"1.5"})})}),vn("rect",{x:"0.5",y:"0.5",width:Math.max(0,g-1),height:Math.max(0,b-1),fill:"none",stroke:A,strokeWidth:"1"}),d.map((Y,K)=>{let q=Y.x-l.left,B=Y.y-l.top,Q=Y.w,U=Y.h,It=p?Y.axis===nt:!0;return(Y.axis==="row"?e.row:e.column)===0?null:Li("g",{opacity:It?1:.6,children:[vn("rect",{x:q,y:B,width:Q,height:U,fill:L}),vn("rect",{x:q,y:B,width:Q,height:U,fill:`url(#${C})`})]},K)}),nt&&(()=>{let Y=d.filter(xt=>xt.axis===nt);if(Y.length===0)return null;let K=Y[0];if(r&&Y.length>1){let xt=1/0;for(let vt of Y){let jt=vt.x+vt.w/2,Ot=vt.y+vt.h/2,yt=Math.abs(r.x-jt)+Math.abs(r.y-Ot);yt<xt&&(xt=yt,K=vt)}}let q=K.x-l.left,B=K.y-l.top,Q=K.w,U=K.h,It=q+Q/2,ht=B+U/2;if(a)return vn("circle",{cx:It,cy:ht,r:1.5,fill:o,stroke:"#ffffff",strokeWidth:4,paintOrder:"stroke"});let St=nt==="column",Z=St?h:R,st=St?R:h,wt=It-Z/2,O=ht-st/2;return vn("rect",{x:wt,y:O,width:Z,height:st,fill:o,stroke:"#ffffff",strokeWidth:4,paintOrder:"stroke"})})()]}),r&&nt&&(()=>{let Y=a?"auto":String(Math.round(nt==="row"?e.row:e.column));return vn("div",{style:{position:"fixed",left:r.x+8,top:r.y-28,background:o,color:"#fff",fontSize:11,fontWeight:600,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',lineHeight:1,padding:"4px 4px",borderRadius:0,whiteSpace:"nowrap",pointerEvents:"none",zIndex:9997},children:Y})})()]})}import{useCallback as vc,useEffect as Sc,useState as wc}from"react";import{useEffect as hc,useState as Ls}from"react";var yc=3,bc=250,Ai=["reviewing","considering","thinking","zhuzhing","iterating","tweaking","reflecting","noodling","pondering","finessing","polishing","riffing"],xc=3e3;function Wo(t){let[e,o]=Ls(0),[n,i]=Ls(()=>Math.floor(Math.random()*Ai.length));return hc(()=>{if(!t)return;let r=setInterval(()=>o(s=>(s+1)%yc),bc),a=setInterval(()=>i(s=>(s+1)%Ai.length),xc);return()=>{clearInterval(r),clearInterval(a)}},[t]),{charIndex:e,word:Ai[n]}}import{Fragment as Ni,jsx as an,jsxs as Kn}from"react/jsx-runtime";function kc(t){let{element:e}=t,o=e.tagName,n=e.id?`#${e.id}`:"",i=e.className?"."+e.className.split(" ").slice(0,2).join("."):"",r=e.reactComponent;return r?`<${r}> ${o}${n}${i}`:`${o}${n}${i}`}var Rs=22,Pi=12;function As({styleModifications:t,isInspecting:e,accentColor:o,annotationGroupCount:n,dispatch:i,inFlightSelectors:r}){let[a,s]=wc([]),l=r&&r.size>0,{charIndex:c,word:d}=Wo(!!l);Sc(()=>{if(e){s([]);return}let g=null,b=()=>{let L=[];t.forEach((A,R)=>{let h=Je(A.selector);if(!h)return;let $=h.getBoundingClientRect();L.push({selector:A.selector,modIndex:R,top:$.top>=Rs?$.top-Rs:$.bottom,left:$.left,label:kc(A),changeCount:A.changes.length,annotationNumber:n+R+1})}),s(L)},C=()=>{g&&cancelAnimationFrame(g),g=requestAnimationFrame(b)};b(),window.addEventListener("scroll",C,!0),window.addEventListener("resize",C,!0);let w=new MutationObserver(C);return w.observe(document.body,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["style","class"]}),window.addEventListener("load",C),document.fonts.ready.then(C),()=>{window.removeEventListener("scroll",C,!0),window.removeEventListener("resize",C,!0),window.removeEventListener("load",C),w.disconnect(),g&&cancelAnimationFrame(g)}},[t,e,n]);let u=vc(g=>{let b=t[g];if(!b)return;let C=Je(b.selector);C&&(i({type:"SELECT_ANNOTATION",payload:{id:null}}),i({type:"SET_TOOL",payload:"inspector"}),i({type:"SELECT_ELEMENT",payload:{el:C,info:b.element}}))},[t,i]);if(a.length===0)return null;let p={display:"flex",alignItems:"center",gap:6,backgroundColor:o,color:"#fff",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',padding:"4px 8px",borderRadius:0,whiteSpace:"nowrap",maxWidth:400},f={overflow:"hidden",textOverflow:"ellipsis",flex:1,minWidth:0};return an(Ni,{children:a.map(g=>{let b=r==null?void 0:r.has(g.selector);return an("div",{"data-devtools":"badge-hit-area",onClick:()=>u(g.modIndex),style:{position:"fixed",top:g.top-Pi,left:g.left-Pi,padding:Pi,zIndex:1e4,cursor:"pointer",pointerEvents:"auto"},children:Kn("div",{"data-devtools":"badge",style:x(m({},p),{backgroundColor:b?"#999999":o}),children:[Kn("span",{children:[g.annotationNumber,"."]}),an("span",{style:f,children:g.label}),Kn("span",{style:{opacity:.8},children:["(",g.changeCount," ",g.changeCount===1?"change":"changes",")"]}),b&&Kn("span",{style:{opacity:.8,marginLeft:4,display:"inline-flex",alignItems:"center",gap:4},children:[an("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:"currentColor",style:{verticalAlign:"middle"},children:c===1?Kn(Ni,{children:[an("circle",{cx:"7",cy:"7",r:"2"}),an("circle",{cx:"17",cy:"7",r:"2"}),an("circle",{cx:"7",cy:"17",r:"2"}),an("circle",{cx:"17",cy:"17",r:"2"})]}):Kn(Ni,{children:[an("circle",{cx:"12",cy:"6",r:"2"}),an("circle",{cx:"6",cy:"12",r:"2"}),an("circle",{cx:"18",cy:"12",r:"2"}),an("circle",{cx:"12",cy:"18",r:"2"})]})}),d]})]})},g.selector)})})}import{useEffect as Cc,useState as Ec}from"react";import{Fragment as Mc,jsx as Ps}from"react/jsx-runtime";function Tc(t,e){let o=t.match(/^oklch\(([^)]+)\)$/i);return o?`oklch(${o[1]} / ${e})`:`color-mix(in srgb, ${t} ${Math.round(e*100)}%, transparent)`}function Ns({styleModifications:t,accentColor:e}){let[o,n]=Ec([]);if(Cc(()=>{let r=null,a=()=>{let c=[];for(let d of t){let u=Je(d.selector);if(!u)continue;let p=u.getBoundingClientRect();if(p.width===0&&p.height===0)continue;let f=On(u);c.push({selector:d.selector,top:p.top,left:p.left,width:p.width,height:p.height,borderRadius:`${f["top-left"]}px ${f["top-right"]}px ${f["bottom-right"]}px ${f["bottom-left"]}px`})}n(c)},s=()=>{r&&cancelAnimationFrame(r),r=requestAnimationFrame(a)};a(),window.addEventListener("scroll",s,{passive:!0}),window.addEventListener("resize",s,{passive:!0});let l=new MutationObserver(s);return l.observe(document.body,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["style","class"]}),()=>{window.removeEventListener("scroll",s),window.removeEventListener("resize",s),l.disconnect(),r&&cancelAnimationFrame(r)}},[t]),o.length===0)return null;let i=Tc(e,.2);return Ps(Mc,{children:o.map(r=>{let a={position:"fixed",top:r.top,left:r.left,width:r.width,height:r.height,pointerEvents:"none",zIndex:9995,border:`1px solid ${i}`,borderRadius:r.borderRadius,boxSizing:"border-box"};return Ps("div",{"data-devtools":"mod-border",style:a},r.selector)})})}import{useEffect as Bs,useLayoutEffect as Ic,useState as Os}from"react";import{jsx as In,jsxs as Oi}from"react/jsx-runtime";function Bi(t,e){let o=t.match(/^oklch\(([^)]+)\)$/i);return o?`oklch(${o[1]} / ${e})`:`color-mix(in srgb, ${t} ${Math.round(e*100)}%, transparent)`}var Lc={top:"bottom",bottom:"top",left:"right",right:"left"};function Fi({element:t,padding:e,accentColor:o,hoveredSide:n,draggingSide:i,cursorViewport:r,refreshKey:a}){let[s,l]=Os(null),[c,d]=Os(!1);if(Bs(()=>{let Q=ht=>{(ht.key==="Meta"||ht.key==="Control")&&d(!0)},U=ht=>{(ht.key==="Meta"||ht.key==="Control")&&d(!1)},It=()=>d(!1);return window.addEventListener("keydown",Q,!0),window.addEventListener("keyup",U,!0),window.addEventListener("blur",It),()=>{window.removeEventListener("keydown",Q,!0),window.removeEventListener("keyup",U,!0),window.removeEventListener("blur",It)}},[]),Bs(()=>{if(!t){l(null);return}let Q=()=>{l(t.getBoundingClientRect())};return Q(),window.addEventListener("scroll",Q,{passive:!0}),window.addEventListener("resize",Q,{passive:!0}),()=>{window.removeEventListener("scroll",Q),window.removeEventListener("resize",Q)}},[t]),Ic(()=>{t&&l(t.getBoundingClientRect())},[t,e.top,e.right,e.bottom,e.left,a]),!s)return null;let u=s.width,p=s.height,{top:f,right:g,bottom:b,left:C}=e,w="pm-stripe-pattern",L=Bi(o,.25),A=Bi(o,.1),R=Bi(o,.2),h=8,$=2,nt={position:"fixed",top:s.top,left:s.left,width:u,height:p,pointerEvents:"none",zIndex:9996,overflow:"visible"},Y=["top","right","bottom","left"],K={top:`0,0 ${u},0 ${u-g},${f} ${C},${f}`,right:`${u},0 ${u},${p} ${u-g},${p-b} ${u-g},${f}`,bottom:`0,${p} ${C},${p-b} ${u-g},${p-b} ${u},${p}`,left:`0,0 ${C},${f} ${C},${p-b} 0,${p}`},q={top:{x:u/2-h/2,y:f/2-$/2,w:h,h:$},bottom:{x:u/2-h/2,y:p-b/2-$/2,w:h,h:$},left:{x:C/2-$/2,y:p/2-h/2,w:$,h},right:{x:u-g/2-$/2,y:p/2-h/2,w:$,h}},B=new Set;return i?B.add(i):n&&(B.add(n),c||B.add(Lc[n])),Oi("div",{"data-devtools":"padding-handles",style:nt,children:[Oi("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${u} ${p}`,children:[In("defs",{children:In("pattern",{id:w,patternUnits:"userSpaceOnUse",width:"4",height:"4",patternTransform:"rotate(45)",children:In("line",{x1:"0",y1:"0",x2:"0",y2:"4",stroke:L,strokeWidth:"1.5"})})}),In("rect",{x:"0.5",y:"0.5",width:Math.max(0,u-1),height:Math.max(0,p-1),fill:"none",stroke:R,strokeWidth:"1"}),Y.map(Q=>{if(e[Q]<=0)return null;let It=B.has(Q);return Oi("g",{opacity:It?1:.6,children:[In("polygon",{points:K[Q],fill:A}),In("polygon",{points:K[Q],fill:`url(#${w})`})]},Q)}),Y.map(Q=>{let U=q[Q],It=B.has(Q);return In("rect",{x:U.x,y:U.y,width:U.w,height:U.h,fill:o,stroke:"#ffffff",strokeWidth:It?4:2,paintOrder:"stroke"},`handle-${Q}`)})]}),r&&(n||i)&&(()=>{let Q=i!=null?i:n,U=Math.round(e[Q]);return In("div",{style:{position:"fixed",left:r.x+8,top:r.y-28,background:o,color:"#fff",fontSize:11,fontWeight:600,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',lineHeight:1,padding:"4px 4px",borderRadius:0,whiteSpace:"nowrap",pointerEvents:"none",zIndex:9997},children:U})})()]})}import{useCallback as ze,useEffect as tn,useMemo as Vo,useRef as he,useState as Me}from"react";import{AlignCenter as Ac,AlignHorizontalSpaceAround as Pc,AlignJustify as Nc,AlignLeft as Bc,AlignRight as Oc,AlignVerticalSpaceAround as Fc,Baseline as Dc,Check as Yo,ChevronDown as Jo,Columns3 as Hc,Grid2x2 as zc,MoveHorizontal as Fs,Plus as Ds,RectangleHorizontal as _c,RotateCcw as $c,Rows3 as Wc,Shrink as Yc,UnfoldHorizontal as Hs,UnfoldVertical as zs,WholeWord as jc,X as Gs}from"lucide-react";var Rc="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMicgaGVpZ2h0PScxMic+PGRlZnM+PHBhdHRlcm4gaWQ9J2QnIHdpZHRoPSc0JyBoZWlnaHQ9JzQnIHBhdHRlcm5Vbml0cz0ndXNlclNwYWNlT25Vc2UnPjxwYXRoIGQ9J00tMSwxIGwyLC0yIE0wLDQgbDQsLTQgTTMsNSBsMiwtMicgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPScuNScvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9JzEyJyBoZWlnaHQ9JzEyJyBmaWxsPSd1cmwoI2QpJy8+PC9zdmc+",un={borderWidth:3,borderStyle:"solid",borderImage:`url("${Rc}") 4 / 1.9 / 0 round`};import{Fragment as Go,jsx as E,jsxs as bt}from"react/jsx-runtime";function Vs(t,e){let o=t.match(/^oklch\(([^)]+)\)$/i);if(o)return`oklch(${o[1]} / ${e})`;let n=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);if(n){let i=parseInt(n[1],16),r=parseInt(n[2],16),a=parseInt(n[3],16);return`rgba(${i}, ${r}, ${a}, ${e})`}return`color-mix(in srgb, ${t} ${Math.round(e*100)}%, transparent)`}var _s=[{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 Gc(t,e){let o=e.trim().toLowerCase();switch(t){case"opacity":return o==="1";case"border-width":return o==="0px"||o==="0"||o==="medium";case"border-radius":return o==="0px"||o==="0";case"border-style":return o==="none";case"box-shadow":return o==="none";case"backdrop-filter":return o==="none"||o==="";case"letter-spacing":return o==="normal"||o==="0px"||o==="0";case"background-color":return o==="rgba(0, 0, 0, 0)"||o==="transparent";default:return!1}}function $s(t,e){return!e||t==="auto"||t==="fit-content"||t==="max-content"||t==="min-content"?"hug":t==="100%"||e==="100%"?"fill":"fixed"}function Di(t,e){switch(t){case"hug":return"fit-content";case"fill":return"100%";case"fixed":{let o=Un(e);if(typeof o.num=="number"&&!isNaN(o.num)){let n=o.unit==="%"?"px":o.unit||"px";return`${o.num}${n}`}return"auto"}}}function po(t){let e=t.split(/\s+/).filter(Boolean);return e.length===1?{top:e[0],right:e[0],bottom:e[0],left:e[0]}:e.length===2?{top:e[0],right:e[1],bottom:e[0],left:e[1]}:e.length===3?{top:e[0],right:e[1],bottom:e[2],left:e[1]}:e.length>=4?{top:e[0],right:e[1],bottom:e[2],left:e[3]}:{top:"0px",right:"0px",bottom:"0px",left:"0px"}}function Vc(t,e){return t==="grid"?"grid":t==="flex"||t==="inline-flex"?e==="column"||e==="column-reverse"?"flex-col":"flex-row":"block"}function Jc(t,e){switch(t){case"block":e("display","block");break;case"flex-row":e("display","flex"),e("flex-direction","row");break;case"flex-col":e("display","flex"),e("flex-direction","column");break;case"grid":e("display","grid");break}}var wn="rgba(0, 0, 0, 0.04)",Xe={width:"100%",padding:"4px 8px",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',border:"none",borderRadius:2,outline:"none",backgroundColor:"transparent"},_i={"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(t){var e,o;return(o=(e=_i[t])==null?void 0:e[0])!=null?o:"px"}function zi(t,e,o,n){let i=t.trim();if(!i)return"";let r=i.match(/^(-?[\d.]+)\s*(rem|em|px|%)$/i);if(r)return`${parseFloat(r[1])}${r[2].toLowerCase()}`;let a=parseFloat(i);if(!isNaN(a)){if(n){let{unit:s}=Un(o);return`${a}${s||go(e)}`}return`${a}${go(e)}`}return i}function Js(t,e){if(!e||e==="px")return t;if(e==="rem"){let o=parseFloat(getComputedStyle(document.documentElement).fontSize)||16;return Math.round(t/o*1e3)/1e3}return t}function Ws({label:t,property:e,cssValue:o,mode:n,onValueChange:i,onModeChange:r,modified:a,dimmed:s,dropdownOpen:l,onDropdownChange:c,panelContentRef:d,accentColor:u="#3b82f6",onReset:p,minValue:f,maxValue:g,onMinChange:b,onMaxChange:C,onMinReset:w,onMaxReset:L,minModified:A,maxModified:R}){let h=Un(o),$=a&&h.unit||go(e),nt=!a&&h.unit&&h.unit!==$?Js(h.num,$):h.num,[Y,K]=Me(!1),[q,B]=Me(String(nt)),[Q,U]=Me(!1),It=he(null),ht=he(null),St=he(null),Z=he(!1);tn(()=>{Y||B(String(nt))},[nt,Y]),tn(()=>{if(!l)return;let yt=lt=>{ht.current&&!ht.current.contains(lt.target)&&St.current&&!St.current.contains(lt.target)&&(c==null||c(!1))},le=lt=>{lt.key==="Escape"&&(c==null||c(!1))};return document.addEventListener("mousedown",yt),document.addEventListener("keydown",le),()=>{document.removeEventListener("mousedown",yt),document.removeEventListener("keydown",le)}},[l,c]),tn(()=>{Y&&It.current&&(It.current.focus(),It.current.select())},[Y]);let st=()=>{let yt=zi(q,e,o,a);i(yt||`${Math.max(0,parseFloat(q)||0)}${$}`),K(!1)},wt=()=>{if(Z.current){Z.current=!1;return}st()},O=yt=>{if(yt.key==="Enter"){st();return}if(yt.key==="Escape"){Z.current=!0,B(String(nt)),K(!1);return}if(yt.key==="ArrowUp"||yt.key==="ArrowDown"){yt.preventDefault();let le=yt.key==="ArrowUp"?1:-1,lt=yt.shiftKey?8:yt.altKey?.1:1,Tt=parseFloat(q)||0,ne=Math.round(Math.max(0,Tt+le*lt)*1e3)/1e3;B(String(ne)),i(`${ne}${$}`)}},xt={fixed:"Fixed",hug:"Hug",fill:"Fill"},vt={fixed:E(Fs,{size:12}),hug:E(Yc,{size:12}),fill:E(Fs,{size:12})},jt=()=>{c==null||c(!l)},Ot=()=>{if(!St.current||!(d!=null&&d.current))return{position:"absolute",top:"100%",left:-4,right:-4,width:"calc(100% + 8px)",marginTop:4};let yt=St.current.getBoundingClientRect(),le=d.current.getBoundingClientRect(),lt=d.current.closest('[data-devtools="panel"]'),Tt=lt?lt.getBoundingClientRect():{top:0,left:0};return{position:"fixed",top:yt.bottom+4-Tt.top,left:le.left+4-Tt.left,width:le.width-8}};return bt("div",{ref:St,onMouseEnter:()=>U(!0),onMouseLeave:()=>U(!1),style:{flex:1,display:"flex",alignItems:"center",position:"relative",borderRadius:2,border:"1px solid",borderColor:Y?u:Q?"rgba(0,0,0,0.15)":"transparent",backgroundColor:wn,transition:"border-color 100ms ease, opacity 150ms ease",opacity:s?.3:1},children:[E("span",{onClick:a&&p?p:void 0,title:a?"Click to reset":void 0,style:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:a?u:"#999",fontWeight:a?600:400,padding:"0 8px",flexShrink:0,cursor:a?"pointer":"default"},children:t}),n==="fixed"?Y?E("input",{ref:It,type:"text",inputMode:"numeric",value:q,onChange:yt=>B(yt.target.value),onKeyDown:O,onBlur:wt,style:x(m({},Xe),{flex:1,minWidth:0,padding:"4px 2px"})}):E("span",{onClick:()=>K(!0),style:{flex:1,padding:"4px 2px",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',cursor:"text"},children:nt}):E("span",{style:{flex:1}}),bt("button",{type:"button",onClick:jt,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:[xt[n],E(Jo,{size:12})]}),l&&bt("div",{ref:ht,style:x(m({},Ot()),{backgroundColor:"#ffffff",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:[bt("button",{type:"button",onClick:()=>{r("fixed"),c==null||c(!1)},style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"10px 12px",border:"none",outline:"none",backgroundColor:n==="fixed"?"#f1f5f9":"transparent",color:"#1e293b",fontWeight:n==="fixed"?600:400,cursor:"pointer",textAlign:"left"},children:[vt.fixed,bt("span",{children:["Fixed ",e," (",o,")"]}),n==="fixed"&&E(Yo,{size:14,style:{marginLeft:"auto"}})]}),bt("button",{type:"button",onClick:()=>{r("hug"),c==null||c(!1)},style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"10px 12px",border:"none",outline:"none",backgroundColor:n==="hug"?"#f1f5f9":"transparent",color:"#1e293b",fontWeight:n==="hug"?600:400,cursor:"pointer",textAlign:"left"},children:[vt.hug,E("span",{children:"Hug contents"}),n==="hug"&&E(Yo,{size:14,style:{marginLeft:"auto"}})]}),bt("button",{type:"button",onClick:()=>{r("fill"),c==null||c(!1)},style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"10px 12px",border:"none",outline:"none",backgroundColor:n==="fill"?"#f1f5f9":"transparent",color:"#1e293b",fontWeight:n==="fill"?600:400,cursor:"pointer",textAlign:"left"},children:[vt.fill,E("span",{children:"Fill container"}),n==="fill"&&E(Yo,{size:14,style:{marginLeft:"auto"}})]}),E("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",margin:"4px 0"}}),bt("div",{style:{padding:"8px 12px",display:"flex",flexDirection:"column",gap:4},children:[bt("div",{style:{display:"flex",alignItems:"center",backgroundColor:wn,borderRadius:2,padding:"4px 8px"},children:[E("span",{onClick:A?yt=>{yt.stopPropagation(),w==null||w()}:void 0,title:A?"Click to reset":void 0,style:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:A?u:"#999",fontWeight:A?600:400,marginRight:8,flexShrink:0,cursor:A?"pointer":"default"},children:"Min"}),E("input",{type:"text",value:f||"",placeholder:"\u2014",onChange:yt=>b==null?void 0:b(yt.target.value),onClick:yt=>yt.stopPropagation(),style:x(m({},Xe),{flex:1,minWidth:0,padding:0,textAlign:"right",color:A?u:"inherit",fontWeight:A?600:400})})]}),bt("div",{style:{display:"flex",alignItems:"center",backgroundColor:wn,borderRadius:2,padding:"4px 8px"},children:[E("span",{onClick:R?yt=>{yt.stopPropagation(),L==null||L()}:void 0,title:R?"Click to reset":void 0,style:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:R?u:"#999",fontWeight:R?600:400,marginRight:8,flexShrink:0,cursor:R?"pointer":"default"},children:"Max"}),E("input",{type:"text",value:g||"",placeholder:"\u2014",onChange:yt=>C==null?void 0:C(yt.target.value),onClick:yt=>yt.stopPropagation(),style:x(m({},Xe),{flex:1,minWidth:0,padding:0,textAlign:"right",color:R?u:"inherit",fontWeight:R?600:400})})]})]})]})]})}function pn({children:t,style:e,dimmed:o}){let[n,i]=Me(!1);return E("div",{onMouseEnter:()=>i(!0),onMouseLeave:()=>i(!1),style:m({position:"relative",borderRadius:2,border:"1px solid",borderColor:n?"rgba(0,0,0,0.15)":"transparent",backgroundColor:wn,transition:"border-color 100ms ease, opacity 150ms ease",opacity:o?.3:1},e),children:t})}function Ln({children:t}){let[e,o]=Me(!1);return E("div",{onMouseEnter:()=>o(!0),onMouseLeave:()=>o(!1),style:{position:"relative",borderRadius:2,border:"1px solid",borderColor:e?"rgba(0,0,0,0.15)":"transparent",backgroundColor:wn,transition:"border-color 100ms ease"},children:t})}var jo=[{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 Xc(t){if(!t||t==="none")return[];let e=[],o=/([\w-]+)\(([^)]+)\)/g,n;for(;(n=o.exec(t))!==null;){let i=n[1],r=n[2],a=parseFloat(r);isNaN(a)||e.push({name:i,value:a})}return e}function Hi(t){return t.length===0?"none":t.map(e=>{var i;let o=jo.find(r=>r.name===e.name),n=(i=o==null?void 0:o.unit)!=null?i:"";return`${e.name}(${e.value}${n})`}).join(" ")}function Kc({value:t,onChange:e,accentColor:o,modified:n,panelContentRef:i}){let r=Xc(t),[a,s]=Me(!1),l=he(null),c=he(null);tn(()=>{if(!a)return;let A=R=>{l.current&&!l.current.contains(R.target)&&s(!1)};return document.addEventListener("mousedown",A,!0),()=>document.removeEventListener("mousedown",A,!0)},[a]);let d=jo.filter(A=>!r.some(R=>R.name===A.name)),u=A=>{let R=[...r,{name:A.name,value:A.defaultValue}];e(Hi(R)),s(!1)},p=A=>{let R=r.filter((h,$)=>$!==A);e(Hi(R))},f=(A,R)=>{let h=r.map(($,nt)=>nt===A?x(m({},$),{value:R}):$);e(Hi(h))},g={width:"100%",padding:"4px 8px",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',border:"none",borderRadius:2,outline:"none",backgroundColor:"transparent"},b=ze(A=>{var B;if(!c.current)return{position:"fixed",top:0,left:0};let R=c.current.getBoundingClientRect(),h=c.current.closest('[data-devtools="panel"]'),$=h?h.getBoundingClientRect():{top:0,left:0,bottom:9999},nt=(B=i==null?void 0:i.current)==null?void 0:B.getBoundingClientRect(),Y=A*24+8,q=$.bottom-R.bottom<Y;return x(m({position:"fixed"},q?{bottom:$.bottom-R.top+2-$.top}:{top:R.bottom+2-$.top}),{left:nt?nt.left+4-$.left:R.left-$.left,width:nt?nt.width-8:140,zIndex:10001})},[i]),C={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)"},w={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"},L=A=>E("div",{ref:l,style:m(m({},b(A.length)),C),children:A.map(R=>E("button",{type:"button",onClick:()=>u(R),style:w,onMouseEnter:h=>{h.currentTarget.style.backgroundColor="rgba(0,0,0,0.05)"},onMouseLeave:h=>{h.currentTarget.style.backgroundColor="transparent"},children:R.label},R.name))});return r.length===0?bt("div",{children:[bt("div",{style:{display:"flex",alignItems:"center",gap:4},children:[E(Ln,{modified:!1,children:E("input",{type:"text",value:"",placeholder:"\u2014",readOnly:!0,style:x(m({},g),{color:"#999",cursor:"default"})})}),E("button",{ref:c,type:"button",onClick:()=>s(!a),style:{display:"flex",alignItems:"center",justifyContent:"center",width:20,height:20,padding:0,border:"none",borderRadius:2,backgroundColor:"transparent",color:"#94a3b8",cursor:"pointer",flexShrink:0},children:E(Ds,{size:12})})]}),a&&L(jo)]}):bt("div",{style:{display:"flex",flexDirection:"column",gap:4,position:"relative"},children:[r.map((A,R)=>{let h=jo.find($=>$.name===A.name);return h?bt("div",{style:{display:"flex",alignItems:"center",gap:4},children:[E("span",{style:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:n?o:"#94a3b8",fontWeight:n?600:400,width:56,flexShrink:0,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},children:h.label}),E(Ln,{modified:n,children:bt("div",{style:{display:"flex",alignItems:"center",gap:4,padding:"0 4px"},children:[E("input",{type:"range",min:h.min,max:h.max,step:h.step,value:A.value,onChange:$=>f(R,parseFloat($.target.value)),style:{flex:1,height:2,appearance:"none",WebkitAppearance:"none",background:`linear-gradient(to right, ${o} ${(A.value-h.min)/(h.max-h.min)*100}%, rgba(0,0,0,0.1) ${(A.value-h.min)/(h.max-h.min)*100}%)`,borderRadius:1,outline:"none",cursor:"pointer"}}),E("input",{type:"number",min:h.min,max:h.max,step:h.step,value:h.unit==="px"||h.unit==="deg"?Math.round(A.value):Math.round(A.value*100)/100,onChange:$=>f(R,parseFloat($.target.value)||0),style:x(m({},g),{width:44,padding:"2px 4px",textAlign:"right",flexShrink:0})}),h.unit&&E("span",{style:{fontSize:9,color:"#94a3b8",fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',flexShrink:0,width:16},children:h.unit})]})}),E("button",{type:"button",onClick:()=>p(R),style:{display:"flex",alignItems:"center",justifyContent:"center",width:16,height:16,padding:0,border:"none",borderRadius:2,backgroundColor:"transparent",color:"#94a3b8",cursor:"pointer",flexShrink:0},children:E(Gs,{size:10})})]},A.name):null}),d.length>0&&bt("div",{children:[bt("button",{ref:c,type:"button",onClick:()=>s(!a),style:{display:"flex",alignItems:"center",gap:4,padding:"2px 4px",border:"none",borderRadius:2,backgroundColor:"transparent",fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#94a3b8",cursor:"pointer"},children:[E(Ds,{size:10}),"Add filter"]}),a&&L(d)]})]})}function Sn({property:t,value:e,onChange:o,isModified:n=!1,step:i=1,min:r,max:a,style:s,placeholder:l,showUnit:c=!0,unitStyle:d,preferredUnit:u,onUnitCycle:p}){let f=Un(e),g=go(t),b=_i[t],w=u&&b&&b.includes(u)?u:g,L=n&&f.unit||w,A=!n&&f.unit&&f.unit!==L?Js(f.num,L):f.num,[R,h]=Me(!1),[$,nt]=Me(""),Y=wt=>{h(!0),nt(String(A||"")),requestAnimationFrame(()=>wt.target.select())},K=()=>{if(h(!1),$.trim()){let wt=zi($,t,e,n);wt&&o(wt)}},q=wt=>{let O=wt.target.value;nt(O);let xt=O.trim(),vt=xt.match(/^(-?[\d.]+)\s*(rem|em|px|%)$/i),jt=xt.match(/^(-?[\d.]+)$/);if(vt){let Ot=parseFloat(vt[1]);isNaN(Ot)||o(`${Ot}${vt[2].toLowerCase()}`)}else if(jt){let Ot=parseFloat(jt[1]);isNaN(Ot)||o(`${Ot}${L}`)}},B=wt=>{if(wt.key==="Enter"){if($.trim()){let O=zi($,t,e,n);O&&o(O)}wt.target.blur();return}if(wt.key==="ArrowUp"||wt.key==="ArrowDown"){wt.preventDefault();let O=wt.shiftKey?10:wt.altKey?.1:1,xt=(wt.key==="ArrowUp"?1:-1)*i*O,vt=parseFloat($)||A||0,jt=Math.round((vt+xt)*1e3)/1e3;r!==void 0&&(jt=Math.max(r,jt)),a!==void 0&&(jt=Math.min(a,jt)),nt(String(jt)),o(`${jt}${L}`)}},Q=/^-?[\d.]/.test(e.trim()),U=R?$:Q?String(A):"",ht=R&&/\s*(rem|em|px|%)\s*$/i.test($)?"":L,St=p&&(ht==="rem"||ht==="px"),Z={fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",pointerEvents:"none"},st=x(m({},d!=null?d:Z),{pointerEvents:"auto",cursor:"pointer"});return bt(Go,{children:[E("input",{type:"text",inputMode:"decimal",value:U,onFocus:Y,onBlur:K,onChange:q,onKeyDown:B,placeholder:l,style:s}),c&&ht&&E("span",{style:St?st:d!=null?d:Z,onClick:St?p:void 0,title:St?"Click to switch units":void 0,children:ht})]})}function Xs({value:t,resolvedValue:e,colorVariables:o,matchingVariable:n,onChange:i,accentColor:r="#3b82f6",modified:a,panelContentRef:s,isDropdownOpen:l,onDropdownChange:c}){let[d,u]=Me(!1),p=!t.includes("var(")&&n?n.usage:t,[f,g]=Me(p),[b,C]=Me(!1),[w,L]=Me(!1),[A,R]=Me(!1),h=he(null),$=he(null),nt=he(null),Y=l!==void 0?l:b,K=c||C,q=ze(()=>{if(!nt.current)return{position:"fixed",top:0,left:0,width:200};let O=nt.current.getBoundingClientRect(),xt=nt.current.closest('[data-devtools="panel"]'),vt=xt?xt.getBoundingClientRect():{top:0,left:0};if(s!=null&&s.current){let jt=s.current.getBoundingClientRect();return{position:"fixed",top:O.bottom+4-vt.top,left:jt.left+4-vt.left,width:jt.width-8}}return{position:"fixed",top:O.bottom+4-vt.top,left:O.left-vt.left,width:O.width}},[s]);tn(()=>{if(!d){let O=!t.includes("var(")&&n?n.usage:t;g(O)}},[t,d,n]),tn(()=>{if(!Y&&!w)return;let O=vt=>{nt.current&&!nt.current.contains(vt.target)&&(K(!1),L(!1))},xt=vt=>{vt.key==="Escape"&&(K(!1),L(!1))};return document.addEventListener("mousedown",O),document.addEventListener("keydown",xt),()=>{document.removeEventListener("mousedown",O),document.removeEventListener("keydown",xt)}},[Y,w]),tn(()=>{d&&h.current&&(h.current.focus(),h.current.select())},[d]);let B=Vo(()=>{if(!f||f.startsWith("#")||f.startsWith("rgb")||f.startsWith("hsl")||f.startsWith("oklch"))return[];let O=f.toLowerCase();return o.filter(xt=>xt.name.toLowerCase().includes(O)||xt.usage.toLowerCase().includes(O)).slice(0,8)},[f,o]),Q=()=>{i(f),u(!1),L(!1)},U=O=>{g(O),O.includes("var")||O.includes("--")||O.length>0&&!O.startsWith("#")?L(!0):L(!1)},It=O=>{g(O.usage),i(O.usage),K(!1),L(!1),u(!1)},ht=()=>{setTimeout(()=>{!Y&&!w&&Q()},150)},St=O=>{O.key==="Enter"?Q():O.key==="Escape"&&(g(t),u(!1),L(!1))},Z=Vo(()=>{let O=e.trim().toLowerCase();if(O.startsWith("#"))return O.length===4?`#${O[1]}${O[1]}${O[2]}${O[2]}${O[3]}${O[3]}`:O.slice(0,7);let xt=O.match(/rgba?\((\d+),?\s*(\d+),?\s*(\d+)/);if(xt){let jt=parseInt(xt[1],10).toString(16).padStart(2,"0"),Ot=parseInt(xt[2],10).toString(16).padStart(2,"0"),yt=parseInt(xt[3],10).toString(16).padStart(2,"0");return`#${jt}${Ot}${yt}`}let vt=O.match(/oklch\(\s*([\d.]+)/);if(vt){let jt=Math.max(0,Math.min(1,parseFloat(vt[1]))),Ot=Math.round(jt*255).toString(16).padStart(2,"0");return`#${Ot}${Ot}${Ot}`}return"#000000"},[e]),st=O=>{let xt=O.target.value;g(xt),i(xt)},wt=t.includes("var(");return bt("div",{ref:nt,onMouseEnter:()=>R(!0),onMouseLeave:()=>R(!1),style:{position:"relative",borderRadius:2,border:"1px solid",borderColor:d?r:A?"rgba(0,0,0,0.15)":"transparent",backgroundColor:wn,transition:"border-color 100ms ease",overflow:"hidden"},children:[bt("div",{style:{display:"flex",alignItems:"center",minWidth:0},children:[bt("div",{style:{position:"relative",marginLeft:8,flexShrink:0},children:[E("input",{type:"color",value:Z,onChange:st,style:{width:12,height:12,padding:0,border:"none",cursor:"pointer",opacity:0,position:"absolute",top:0,left:0}}),E("div",{style:{width:12,height:12,borderRadius:2,backgroundColor:e,border:"1px solid rgba(0,0,0,0.1)",pointerEvents:"none"}})]}),d?E("input",{ref:h,type:"text",value:f,onChange:O=>U(O.target.value),onKeyDown:St,onBlur:ht,style:x(m({},Xe),{flex:1,minWidth:0})}):E("span",{onClick:()=>u(!0),style:{flex:1,minWidth:0,padding:"4px 8px",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',cursor:"text",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",color:a?r:"inherit"},title:p,children:p}),o.length>0&&E("button",{type:"button",onClick:()=>K(!Y),style:{display:"flex",alignItems:"center",justifyContent:"center",width:20,height:24,border:"none",background:"none",cursor:"pointer",color:"#999",flexShrink:0},children:E(Jo,{size:12})})]}),w&&B.length>0&&E("div",{style:x(m({},q()),{backgroundColor:"#ffffff",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:B.map(O=>bt("button",{type:"button",onClick:()=>It(O),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:[E("div",{style:{width:14,height:14,borderRadius:2,backgroundColor:O.value,border:"1px solid rgba(0,0,0,0.1)",flexShrink:0}}),E("span",{style:{flex:1,overflow:"hidden",textOverflow:"ellipsis"},children:O.name})]},O.name))}),Y&&E("div",{ref:$,style:x(m({},q()),{backgroundColor:"#ffffff",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:o.map(O=>bt("button",{type:"button",onClick:()=>It(O),style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"10px 12px",border:"none",backgroundColor:p===O.usage||t===O.usage?"#f1f5f9":"transparent",color:"#1e293b",fontWeight:p===O.usage||t===O.usage?600:400,cursor:"pointer",textAlign:"left",fontSize:12},children:[E("div",{style:{width:14,height:14,borderRadius:2,backgroundColor:O.value,border:"1px solid rgba(0,0,0,0.1)",flexShrink:0}}),E("span",{style:{flex:1,overflow:"hidden",textOverflow:"ellipsis"},children:O.name}),(p===O.usage||t===O.usage)&&E(Yo,{size:14,style:{marginLeft:"auto",flexShrink:0}})]},O.name))})]})}function Uc({gridCols:t,gridRows:e,gridModified:o,accentColor:n,onColsChange:i,onRowsChange:r}){return E(pn,{style:{width:100},children:bt("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",padding:"8px 4px"},children:[E("input",{type:"number",min:1,max:12,value:t,onChange:a=>i(parseInt(a.target.value)||1),style:x(m({},Xe),{width:32,textAlign:"center",padding:2})}),E("span",{style:{fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:o?n:"#999",fontWeight:o?600:400,fontSize:11,margin:"0 4px"},children:"\xD7"}),E("input",{type:"number",min:1,max:12,value:e,onChange:a=>r(parseInt(a.target.value)||1),style:x(m({},Xe),{width:32,textAlign:"center",padding:2})})]})})}function Zc({element:t,getValue:e,getOriginalValue:o,handleChange:n,isModified:i,onResetProperty:r,isCollapsed:a,onToggle:s,sectionHeaderStyle:l,activeDropdown:c,onDropdownChange:d,panelContentRef:u,accentColor:p,onFieldHover:f,preferredUnit:g,onUnitCycle:b}){let C=d,w=e("display"),L=e("flex-direction"),A=Vc(w,L),R=w==="flex"||w==="inline-flex",h=w==="grid",$=R||h,nt=e("width"),Y=e("height"),K=i("width")?nt:Ao(t,"width"),q=i("height")?Y:Ao(t,"height"),B=$s(nt,K),Q=$s(Y,q),U=e("min-width"),It=e("max-width"),ht=e("min-height"),St=e("max-height"),Z=po(e("padding")),st=e("gap"),wt=e("row-gap"),O=e("column-gap"),xt=e("grid-template-columns"),vt=e("grid-template-rows"),jt=e("overflow"),Ot=xt.split(/\s+/).filter(j=>j&&j!=="none").length||1,yt=vt.split(/\s+/).filter(j=>j&&j!=="none").length||1,[le,lt]=Me(!1),Tt=c!==null,ne=Tt||le,Yt=Tt?.3:le?.65:1,te=({mode:j,icon:At,active:Bt})=>E("button",{type:"button",onClick:()=>Jc(j,n),style:{flex:1,display:"flex",alignItems:"center",justifyContent:"center",padding:"6px 8px",border:"none",borderRadius:2,backgroundColor:Bt?Vs(p,.15):"transparent",color:Bt?p:"#64748b",cursor:"pointer",fontSize:14},children:At}),fe=(j,At,Bt)=>{Bt==="fixed"?n(j,At):n(j,Di(Bt,At))},G=j=>{let At=po(e("padding")),Bt=j||"0";n("padding",`${At.top} ${Bt} ${At.bottom} ${Bt}`)},mt=j=>{let At=po(e("padding")),Bt=j||"0";n("padding",`${Bt} ${At.right} ${Bt} ${At.left}`)},[at,Pt]=Me({}),Ht=ze((j,At)=>Bt=>{At(Bt),Pt(qe=>x(m({},qe),{[j]:Bt}))},[]),Nt=ze(j=>{Pt(At=>{let Bt=m({},At);return delete Bt[j],Bt})},[]),Lt=ze(j=>{let At=po(e("padding"));Gt(t,"padding",`${At.top} ${j} ${At.bottom} ${j}`)},[t,e]),ee=ze(j=>{let At=po(e("padding"));Gt(t,"padding",`${j} ${At.right} ${j} ${At.left}`)},[t,e]),Ft=ze(j=>At=>{Gt(t,j,At)},[t]),we=L==="column"||L==="column-reverse",se=j=>j==="center"?1:j==="flex-end"||j==="end"?2:0,ge=se(e("justify-content")),Zt=se(e("align-items")),De=we?Zt:ge,de=we?ge:Zt,_e=he(null),me=he({x:0,y:0}),Ze=he({col:De,row:de});Ze.current={col:De,row:de};let Re=ze((j,At)=>{let Bt=["flex-start","center","flex-end"];we?(n("justify-content",Bt[At]),n("align-items",Bt[j])):(n("justify-content",Bt[j]),n("align-items",Bt[At]))},[we,n]),We=he(Re);We.current=Re,tn(()=>{let At=Bt=>{let qe=_e.current;if(!qe||!qe.contains(Bt.target))return;Bt.preventDefault(),Bt.stopPropagation(),me.current.x+=Bt.deltaX,me.current.y+=Bt.deltaY;let{col:ue,row:qt}=Ze.current,xe=!1;Math.abs(me.current.x)>=30&&(ue=Math.max(0,Math.min(2,ue+(me.current.x>0?1:-1))),me.current.x=0,me.current.y=0,xe=!0),!xe&&Math.abs(me.current.y)>=30&&(qt=Math.max(0,Math.min(2,qt+(me.current.y>0?1:-1))),me.current.x=0,me.current.y=0,xe=!0),xe&&(ue!==Ze.current.col||qt!==Ze.current.row)&&We.current(ue,qt)};return document.addEventListener("wheel",At,{passive:!1,capture:!0}),()=>document.removeEventListener("wheel",At,{capture:!0})},[]);let $e=()=>E("div",{ref:_e,onMouseEnter:()=>{lt(!0),u.current&&(u.current.style.overflowY="hidden")},onMouseLeave:()=>{lt(!1),u.current&&(u.current.style.overflowY="auto")},style:{width:56,height:56,backgroundColor:wn,borderRadius:2,display:"grid",gridTemplateColumns:"repeat(3, 1fr)",gridTemplateRows:"repeat(3, 1fr)",padding:6,gap:2,touchAction:"none"},children:[0,1,2].map(j=>[0,1,2].map(At=>E("button",{type:"button",onClick:()=>Re(At,j),style:{width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center",border:"none",backgroundColor:"transparent",cursor:"pointer",padding:0},children:At===De&&j===de?E("svg",{width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",style:{flexShrink:0},children:At===0?bt(Go,{children:[E("rect",{x:"1",y:"1.5",width:"8",height:"1.2",rx:"0.5",fill:p}),E("rect",{x:"1",y:"4.4",width:"5",height:"1.2",rx:"0.5",fill:p}),E("rect",{x:"1",y:"7.3",width:"7",height:"1.2",rx:"0.5",fill:p})]}):At===1?bt(Go,{children:[E("rect",{x:"1",y:"1.5",width:"8",height:"1.2",rx:"0.5",fill:p}),E("rect",{x:"2.5",y:"4.4",width:"5",height:"1.2",rx:"0.5",fill:p}),E("rect",{x:"1.5",y:"7.3",width:"7",height:"1.2",rx:"0.5",fill:p})]}):bt(Go,{children:[E("rect",{x:"1",y:"1.5",width:"8",height:"1.2",rx:"0.5",fill:p}),E("rect",{x:"4",y:"4.4",width:"5",height:"1.2",rx:"0.5",fill:p}),E("rect",{x:"2",y:"7.3",width:"7",height:"1.2",rx:"0.5",fill:p})]})}):E("div",{style:{width:5,height:5,borderRadius:"50%",backgroundColor:"#aaa"}})},`${j}-${At}`)))}),ke=i("grid-template-columns")||i("grid-template-rows");return bt("div",{style:{borderBottom:"1px solid rgba(0,0,0,0.08)"},children:[E("div",{style:l,children:E("span",{children:$?"Auto layout":"Layout"})}),bt("div",{style:{padding:"8px 12px"},children:[bt("div",{style:{display:"flex",gap:2,marginBottom:8,backgroundColor:wn,borderRadius:2,padding:2,opacity:Yt,transition:"opacity 150ms ease"},children:[E(te,{mode:"block",icon:E(_c,{size:16}),active:A==="block"}),E(te,{mode:"flex-col",icon:E(Wc,{size:16}),active:A==="flex-col"}),E(te,{mode:"flex-row",icon:E(Hc,{size:16}),active:A==="flex-row"}),E(te,{mode:"grid",icon:E(zc,{size:16}),active:A==="grid"})]}),bt("div",{style:{display:"flex",gap:4,marginBottom:8},children:[E(Ws,{label:"W",property:"width",cssValue:B==="fixed"?nt:`${Math.round(t.getBoundingClientRect().width)}px`,mode:B,onValueChange:j=>n("width",j),onModeChange:j=>{if(j==="fixed"){let At=t.getBoundingClientRect();n("width",`${Math.round(At.width)}px`)}else n("width",Di(j,nt))},modified:i("width"),dimmed:Tt&&c!=="width",dropdownOpen:c==="width",onDropdownChange:j=>C(j?"width":null),panelContentRef:u,accentColor:p,onReset:()=>r("width"),minValue:U!=="none"&&U!=="0px"&&U!=="auto"?U:"",maxValue:It!=="none"&&It!=="auto"?It:"",onMinChange:j=>n("min-width",j||"0"),onMaxChange:j=>n("max-width",j||"none"),onMinReset:()=>r("min-width"),onMaxReset:()=>r("max-width"),minModified:i("min-width"),maxModified:i("max-width")}),E(Ws,{label:"H",property:"height",cssValue:Q==="fixed"?Y:`${Math.round(t.getBoundingClientRect().height)}px`,mode:Q,onValueChange:j=>n("height",j),onModeChange:j=>{if(j==="fixed"){let At=t.getBoundingClientRect();n("height",`${Math.round(At.height)}px`)}else n("height",Di(j,Y))},modified:i("height"),dimmed:Tt&&c!=="height",dropdownOpen:c==="height",onDropdownChange:j=>C(j?"height":null),panelContentRef:u,minValue:ht!=="none"&&ht!=="0px"&&ht!=="auto"?ht:"",maxValue:St!=="none"&&St!=="auto"?St:"",onMinChange:j=>n("min-height",j||"0"),onMaxChange:j=>n("max-height",j||"none"),onMinReset:()=>r("min-height"),onMaxReset:()=>r("max-height"),minModified:i("min-height"),maxModified:i("max-height"),accentColor:p,onReset:()=>r("height")})]}),R&&bt("div",{onMouseEnter:()=>f==null?void 0:f("gap"),onMouseLeave:()=>f==null?void 0:f("element"),style:{display:"flex",gap:8,marginBottom:8},children:[E("div",{style:{opacity:Tt?.3:1,transition:"opacity 150ms ease"},children:$e()}),bt("div",{style:{flex:1,opacity:Yt,transition:"opacity 150ms ease"},children:[E("div",{onClick:i("gap")?()=>r("gap"):void 0,title:i("gap")?"Click to reset":void 0,style:{fontSize:9,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:i("gap")?p:"#999",fontWeight:i("gap")?600:400,marginBottom:2,cursor:i("gap")?"pointer":"default"},children:"Gap"}),E(pn,{dimmed:Tt,children:bt("div",{style:{display:"flex",alignItems:"center"},children:[E(fo,{value:st,onChange:j=>{Nt("gap"),n("gap",j)},onPreview:Ht("gap",Ft("gap")),onScrubEnd:()=>Nt("gap"),onReset:()=>r("gap"),isModified:i("gap"),accentColor:p,defaultUnit:g,children:L==="column"||L==="column-reverse"?E(zs,{size:12,strokeWidth:i("gap")?2.5:1.5}):E(Hs,{size:12,strokeWidth:i("gap")?2.5:1.5})}),E(Sn,{property:"gap",value:at.gap||st,onChange:j=>n("gap",j),isModified:i("gap")||"gap"in at,style:x(m({},Xe),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:g,onUnitCycle:b})]})})]})]}),h&&bt("div",{onMouseEnter:()=>f==null?void 0:f("gap"),onMouseLeave:()=>f==null?void 0:f("element"),style:{display:"flex",gap:8,marginBottom:8,opacity:Yt,transition:"opacity 150ms ease"},children:[E(Uc,{gridCols:Ot,gridRows:yt,gridModified:ke,accentColor:p,onColsChange:j=>n("grid-template-columns",`repeat(${j}, 1fr)`),onRowsChange:j=>n("grid-template-rows",`repeat(${j}, 1fr)`)}),bt("div",{style:{flex:1,display:"flex",flexDirection:"column",gap:4},children:[E(pn,{dimmed:Tt,children:bt("div",{style:{display:"flex",alignItems:"center"},children:[E(fo,{value:O||st,onChange:j=>{Nt("column-gap"),n("column-gap",j)},onPreview:Ht("column-gap",Ft("column-gap")),onScrubEnd:()=>Nt("column-gap"),onReset:()=>r("column-gap"),isModified:i("column-gap"),accentColor:p,defaultUnit:g,children:E(Hs,{size:12,strokeWidth:i("column-gap")?2.5:1.5})}),E(Sn,{property:"column-gap",value:at["column-gap"]||O||st,onChange:j=>n("column-gap",j),isModified:i("column-gap")||"column-gap"in at,placeholder:"col",style:x(m({},Xe),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:g,onUnitCycle:b})]})}),E(pn,{dimmed:Tt,children:bt("div",{style:{display:"flex",alignItems:"center"},children:[E(fo,{value:wt||st,onChange:j=>{Nt("row-gap"),n("row-gap",j)},onPreview:Ht("row-gap",Ft("row-gap")),onScrubEnd:()=>Nt("row-gap"),onReset:()=>r("row-gap"),isModified:i("row-gap"),accentColor:p,defaultUnit:g,children:E(zs,{size:12,strokeWidth:i("row-gap")?2.5:1.5})}),E(Sn,{property:"row-gap",value:at["row-gap"]||wt||st,onChange:j=>n("row-gap",j),isModified:i("row-gap")||"row-gap"in at,placeholder:"row",style:x(m({},Xe),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:g,onUnitCycle:b})]})})]})]}),$&&bt("div",{onMouseEnter:()=>f==null?void 0:f("padding"),onMouseLeave:()=>f==null?void 0:f("element"),style:{display:"flex",gap:4,marginBottom:8,opacity:Yt,transition:"opacity 150ms ease"},children:[E(pn,{style:{flex:1},dimmed:Tt,children:bt("div",{style:{display:"flex",alignItems:"center"},children:[E(fo,{value:Z.left,onChange:j=>{Nt("padding-h"),G(j)},onPreview:Ht("padding-h",Lt),onScrubEnd:()=>Nt("padding-h"),onReset:()=>r("padding"),isModified:i("padding"),accentColor:p,defaultUnit:g,snapSteps:js,children:E(Pc,{size:12,strokeWidth:i("padding")?2.5:1.5})}),E(Sn,{property:"padding",value:at["padding-h"]||Z.left,onChange:j=>G(j),isModified:i("padding")||"padding-h"in at,placeholder:"H pad",style:x(m({},Xe),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:g,onUnitCycle:b})]})}),E(pn,{style:{flex:1},dimmed:Tt,children:bt("div",{style:{display:"flex",alignItems:"center"},children:[E(fo,{value:Z.top,onChange:j=>{Nt("padding-v"),mt(j)},onPreview:Ht("padding-v",ee),onScrubEnd:()=>Nt("padding-v"),onReset:()=>r("padding"),isModified:i("padding"),accentColor:p,defaultUnit:g,snapSteps:js,children:E(Fc,{size:12,strokeWidth:i("padding")?2.5:1.5})}),E(Sn,{property:"padding",value:at["padding-v"]||Z.top,onChange:j=>mt(j),isModified:i("padding")||"padding-v"in at,placeholder:"V pad",style:x(m({},Xe),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:g,onUnitCycle:b})]})})]}),bt("label",{style:{display:"flex",alignItems:"center",gap:8,cursor:"pointer",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#64748b",opacity:Yt,transition:"opacity 150ms ease"},children:[E("input",{type:"checkbox",checked:jt==="hidden",onChange:j=>n("overflow",j.target.checked?"hidden":"visible"),style:{margin:0,accentColor:p}}),"Clip content"]})]})]})}var Ys={100:"Thin",200:"Extra Light",300:"Light",400:"Regular",500:"Medium",600:"Semi Bold",700:"Bold",800:"Extra Bold",900:"Black"};function qc({element:t,getValue:e,handleChange:o,isModified:n,onResetProperty:i,isCollapsed:r,onToggle:a,sectionHeaderStyle:s,accentColor:l,colorVariables:c,activeColorDropdown:d,onColorDropdownChange:u,panelContentRef:p,preferredUnit:f,onUnitCycle:g}){var Q;let b=e("font-family"),C=e("font-size"),w=e("font-weight"),L=e("line-height"),A=e("letter-spacing"),R=e("text-align"),h=e("color"),$=String(w),nt=Ys[$]||$,Y=Fo(t,h),K=h.includes("var(")?null:Do(Y,c),q=({align:U,icon:It})=>{let ht=R===U;return E("button",{type:"button",onClick:()=>o("text-align",U),style:{flex:1,display:"flex",alignItems:"center",justifyContent:"center",padding:"6px 8px",border:"none",borderRadius:2,backgroundColor:ht?Vs(l,.15):"transparent",color:ht?l:"#64748b",cursor:"pointer"},children:It})},B=((Q=b.split(",")[0])==null?void 0:Q.trim().replace(/^["']|["']$/g,""))||"System";return bt("div",{style:{borderBottom:"1px solid rgba(0,0,0,0.08)"},children:[E("div",{style:s,children:E("span",{children:"Typography"})}),bt("div",{style:{padding:"8px 12px",display:"flex",flexDirection:"column",gap:4},children:[E(pn,{children:bt("div",{style:{display:"flex",alignItems:"center",padding:"6px 8px"},children:[E("input",{type:"text",value:b,onChange:U=>o("font-family",U.target.value),style:x(m({},Xe),{flex:1,minWidth:0,padding:0,fontWeight:n("font-family")?600:400,color:n("font-family")?l:"inherit"}),title:b}),E(Jo,{size:12,style:{color:"#999",flexShrink:0,marginLeft:4}})]})}),bt("div",{style:{display:"flex",gap:4},children:[E(pn,{style:{flex:1},children:E("select",{value:$,onChange:U=>o("font-weight",U.target.value),style:x(m({},Xe),{padding:"6px 8px",paddingLeft:4,paddingRight:20,cursor:"pointer",fontWeight:n("font-weight")?600:400,color:n("font-weight")?l:"inherit"}),children:Object.entries(Ys).map(([U,It])=>E("option",{value:U,children:It},U))})}),E(pn,{style:{flex:1},children:E("div",{style:{display:"flex",alignItems:"center",position:"relative"},children:E(Sn,{property:"font-size",value:C,onChange:U=>o("font-size",U),isModified:n("font-size"),min:1,max:999,style:x(m({},Xe),{padding:"6px 8px",paddingRight:24,fontWeight:n("font-size")?600:400,color:n("font-size")?l:"inherit"}),unitStyle:{position:"absolute",right:8,top:"50%",transform:"translateY(-50%)",fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999"},preferredUnit:f,onUnitCycle:g})})})]}),bt("div",{style:{display:"flex",gap:4},children:[E(pn,{style:{flex:1},children:bt("div",{style:{display:"flex",alignItems:"center",padding:"6px 8px",gap:4},children:[E(Dc,{size:12,style:{color:n("line-height")?l:"#999",flexShrink:0}}),E(Sn,{property:"line-height",value:L,onChange:U=>o("line-height",U),isModified:n("line-height"),step:.1,min:0,placeholder:"Auto",style:x(m({},Xe),{flex:1,minWidth:0,padding:0,fontWeight:n("line-height")?600:400,color:n("line-height")?l:"inherit"}),showUnit:!1})]})}),E(pn,{style:{flex:1},children:bt("div",{style:{display:"flex",alignItems:"center",padding:"6px 8px",gap:4},children:[E(jc,{size:12,style:{color:n("letter-spacing")?l:"#999",flexShrink:0}}),E(Sn,{property:"letter-spacing",value:A,onChange:U=>o("letter-spacing",U),isModified:n("letter-spacing"),step:.1,placeholder:"\u2014",style:x(m({},Xe),{flex:1,minWidth:0,padding:0,fontWeight:n("letter-spacing")?600:400,color:n("letter-spacing")?l:"inherit"}),showUnit:!1})]})})]}),bt("div",{style:{display:"flex",gap:2,backgroundColor:wn,borderRadius:2,padding:2},children:[E(q,{align:"left",icon:E(Bc,{size:14})}),E(q,{align:"center",icon:E(Ac,{size:14})}),E(q,{align:"right",icon:E(Oc,{size:14})}),E(q,{align:"justify",icon:E(Nc,{size:14})})]}),bt("div",{style:{display:"flex",alignItems:"center",gap:8,padding:"4px 0"},children:[E("span",{onClick:n("color")?()=>i("color"):void 0,title:n("color")?"Click to reset":void 0,style:{fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:n("color")?l:"#64748b",fontWeight:n("color")?600:400,cursor:n("color")?"pointer":"default",width:40,flexShrink:0},children:"Color"}),E("div",{style:{flex:1,minWidth:0},children:E(Xs,{value:h,resolvedValue:Y,colorVariables:c,matchingVariable:K,onChange:U=>o("color",U),accentColor:l,modified:n("color"),panelContentRef:p,isDropdownOpen:d==="color",onDropdownChange:U=>u(U?"color":null)})})]})]})]})}function Un(t){let e=t.match(/^([\d.-]+)(.*)$/);return e?{num:parseFloat(e[1]),unit:e[2]||""}:{num:0,unit:""}}var js=[0,1,2,4,8,12,16,20,24,28,32];function fo({value:t,onChange:e,onPreview:o,onScrubEnd:n,onReset:i,isModified:r,accentColor:a,defaultUnit:s="rem",snapSteps:l,color:c,style:d,children:u}){let p=he(null),f=he(null),g=he(i),b=he(r),C=he(!1);g.current=i,b.current=r,tn(()=>{let L=R=>{let h=f.current;if(!h)return;h.hasMoved=!0,C.current=R.shiftKey;let $=h.unit==="rem"||h.unit==="em"?.1:1;h.accum+=R.movementX*$;let nt=Math.max(0,Math.round((h.startValue+h.accum)*10)/10);if(R.shiftKey&&l){let Y=h.unit==="rem"||h.unit==="em"?parseFloat(getComputedStyle(document.documentElement).fontSize)||16:1,K=h.unit==="rem"||h.unit==="em"?nt*Y:nt,q=l[l.length-1];for(let B=0;B<l.length-1;B++){let Q=l[B],U=l[B+1];if(K<=(Q+U)/2){q=Q;break}if(K<U){q=U;break}}K>l[l.length-1]&&(q=Math.round(K/8)*8),nt=h.unit==="rem"||h.unit==="em"?Math.round(q/Y*1e3)/1e3:q}o==null||o(`${nt}${h.unit}`)},A=()=>{let R=f.current;if(!R)return;let h=Math.max(0,Math.round((R.startValue+R.accum)*10)/10);if(C.current&&l){let nt=R.unit==="rem"||R.unit==="em"?parseFloat(getComputedStyle(document.documentElement).fontSize)||16:1,Y=R.unit==="rem"||R.unit==="em"?h*nt:h,K=l[l.length-1];for(let q=0;q<l.length-1;q++){let B=l[q],Q=l[q+1];if(Y<=(B+Q)/2){K=B;break}if(Y<Q){K=Q;break}}Y>l[l.length-1]&&(K=Math.round(Y/8)*8),h=R.unit==="rem"||R.unit==="em"?Math.round(K/nt*1e3)/1e3:K}let $=R.hasMoved&&h!==R.startValue;f.current=null,document.exitPointerLock(),$?e(`${h}${R.unit}`):R.hasMoved?o==null||o(`${R.startValue}${R.unit}`):b.current&&g.current&&g.current(),n==null||n()};return document.addEventListener("mousemove",L),document.addEventListener("mouseup",A),()=>{document.removeEventListener("mousemove",L),document.removeEventListener("mouseup",A)}},[e,o,n]);let w=ze(L=>{var h;if(L.button!==0)return;L.preventDefault();let A=Un(t),R=A.unit&&A.unit!=="px"?A.unit:s;f.current={startValue:A.num,unit:R,accum:0,hasMoved:!1},(h=p.current)==null||h.requestPointerLock()},[t,s]);return E("span",{ref:p,onMouseDown:w,title:r?"Click to reset \xB7 Drag to scrub":"Drag to scrub",style:m({color:r?a||"#3b82f6":c||"#999",padding:"0 4px",display:"flex",alignItems:"center",cursor:"ew-resize"},d),children:u})}function Ks({element:t,elementInfo:e,selector:o,styleModifications:n,dispatch:i,onClose:r,onHover:a,accentColor:s="#3b82f6"}){var te,fe;let l=he(null),c=he(null),[d,u]=Me(()=>{try{return!!localStorage.getItem("devtools-panel-position")}catch(G){return!1}});tn(()=>{if(d)return;let G=setTimeout(()=>u(!0),50);return()=>clearTimeout(G)},[d]);let[p,f]=Me(null),[g,b]=Me(null),C=p!==null||g!==null,[w,L]=Me("rem"),A=ze(()=>{L(G=>G==="rem"?"px":"rem")},[]),R=he(new Map),[h,$]=Me(""),nt=Vo(()=>mi(),[]);tn(()=>{let G=mt=>{var Pt;if(mt.key!=="Escape")return;let at=document.activeElement;at&&((Pt=l.current)!=null&&Pt.contains(at))||r()};return window.addEventListener("keydown",G),()=>window.removeEventListener("keydown",G)},[r]);let Y=he({top:0,left:0,maxHeight:400}),[,K]=Me(0),q="devtools-panel-position",B=he({x:0,y:0}),Q=he(null),U=he(!1);tn(()=>{try{let G=localStorage.getItem(q);if(G){let mt=JSON.parse(G);typeof mt.top=="number"&&typeof mt.left=="number"&&(U.current=!0,Y.current=x(m({},Y.current),{top:mt.top,left:mt.left}))}}catch(G){}},[]),tn(()=>{let G=at=>{let Pt=Q.current;if(!Pt)return;let Ht=Pt.startOffsetX+(at.clientX-Pt.startX),Nt=Pt.startOffsetY+(at.clientY-Pt.startY),Lt=280,ee=16,Ft=Math.max(ee,Math.min(window.innerWidth-Lt-ee,Y.current.left+Ht)),we=Math.max(ee,Y.current.top+Nt);B.current={x:Ft-Y.current.left,y:we-Y.current.top};let se=l.current,ge=se==null?void 0:se.parentElement;if(!ge)return;ge.style.top=`${we}px`,ge.style.left=`${Ft}px`;let Zt=document.getElementById("devtools-toolbar"),De=Zt==null?void 0:Zt.getBoundingClientRect(),de=window.innerHeight-16;De&&Ft+Lt>De.left&&(de=De.top-8);let _e=Math.max(0,we),me=Math.max(200,de-_e);se&&(se.style.maxHeight=`${me}px`)},mt=()=>{if(!Q.current)return;let at=Y.current.top+B.current.y,Pt=Y.current.left+B.current.x;Y.current=x(m({},Y.current),{top:at,left:Pt}),B.current={x:0,y:0},U.current=!0;try{localStorage.setItem(q,JSON.stringify({top:at,left:Pt}))}catch(Ht){}Q.current=null};return window.addEventListener("mousemove",G),window.addEventListener("mouseup",mt),()=>{window.removeEventListener("mousemove",G),window.removeEventListener("mouseup",mt)}},[]);let It=ze(G=>{G.button!==0||G.target.closest("button")||(G.preventDefault(),Q.current={startX:G.clientX,startY:G.clientY,startOffsetX:B.current.x,startOffsetY:B.current.y})},[]);tn(()=>{B.current={x:0,y:0};let G=(Pt=!1)=>{let Ht=l.current,Nt=280,Lt=8,ee,Ft;if(U.current)ee=Y.current.top,Ft=Y.current.left;else{let de=t.getBoundingClientRect();Ft=de.right+Lt,ee=de.top,Ft+Nt>window.innerWidth-Lt&&(Ft=de.left-Nt-Lt),Ft<Lt&&(Ft=Math.max(Lt,(window.innerWidth-Nt)/2))}let we=document.getElementById("devtools-toolbar"),se=we==null?void 0:we.getBoundingClientRect(),ge=window.innerHeight-16;se&&Ft+Nt>se.left&&(ge=se.top-Lt);let Zt=Math.max(0,ee),De=Math.max(200,ge-Zt);if(Y.current={top:ee,left:Ft,maxHeight:De},Pt&&Ht){let de=Ht.parentElement;de&&!U.current&&(de.style.top=`${ee+B.current.y}px`,de.style.left=`${Ft+B.current.x}px`),Ht.style.maxHeight=`${De}px`}else K(de=>de+1)};G(!1);let mt=()=>G(!0),at=()=>G(!1);return window.addEventListener("scroll",mt,{passive:!0}),window.addEventListener("resize",at,{passive:!0}),()=>{window.removeEventListener("scroll",mt),window.removeEventListener("resize",at)}},[t]),tn(()=>{let G=l.current;if(!G)return;let mt=at=>{let Pt=c.current;if(!Pt){at.preventDefault();return}let{scrollTop:Ht,scrollHeight:Nt,clientHeight:Lt}=Pt,ee=Ht<=0&&at.deltaY<0,Ft=Ht+Lt>=Nt&&at.deltaY>0;(ee||Ft)&&at.preventDefault()};return G.addEventListener("wheel",mt,{passive:!1}),()=>G.removeEventListener("wheel",mt)},[]);let ht=Vo(()=>n.find(G=>G.selector===o),[n,o]),St=ze(G=>{let mt=ht==null?void 0:ht.changes.find(at=>at.property===G);if(mt)return mt.modified;if(G.includes("color")){let at=di(t,G);if(at&&at.includes("var("))return at}return ao(t,G)},[t,ht]),Z=ze(G=>{if(R.current.has(G))return R.current.get(G);let mt=ht==null?void 0:ht.changes.find(Pt=>Pt.property===G);if(mt)return mt.original;let at=ao(t,G);return R.current.set(G,at),at},[t,ht]),st=ze((G,mt)=>{let at=Z(G);Gt(t,G,mt),G==="backdrop-filter"&&Gt(t,"-webkit-backdrop-filter",mt),i({type:"MODIFY_STYLE",payload:{selector:o,element:e,property:G,original:at,modified:mt}})},[t,o,e,i,Z]),wt=ze(()=>{gi(o,n);let G=n.find(mt=>mt.selector===o);if(G)for(let mt of G.changes)i({type:"CLEAR_STYLE",payload:{selector:o,property:mt.property}});R.current.clear()},[o,n,i]),O=ze(G=>{let mt=n.find(Pt=>Pt.selector===o);mt!=null&&mt.changes.find(Pt=>Pt.property===G)&&t instanceof HTMLElement&&(t.style.removeProperty(G),i({type:"CLEAR_STYLE",payload:{selector:o,property:G}}),R.current.delete(G))},[t,o,n,i]),xt=ze(()=>{let G=h.split(";").map(mt=>mt.trim()).filter(mt=>mt);for(let mt of G){let at=mt.indexOf(":");if(at>0){let Pt=mt.slice(0,at).trim(),Ht=mt.slice(at+1).trim();Pt&&Ht&&st(Pt,Ht)}}$("")},[h,st]),vt=ze(G=>{var mt;return(mt=ht==null?void 0:ht.changes.some(at=>at.property===G))!=null?mt:!1},[ht]),jt=G=>{var Nt;let mt=St(G.property),at=vt(G.property),Pt=!at&&Gc(G.property,mt),Ht={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(Pt&&G.type!=="backdrop-filter")return E(Ln,{modified:!1,children:E("input",{type:"text",value:"",placeholder:"\u2014",onFocus:()=>{},onChange:Lt=>st(G.property,Lt.target.value),style:x(m({},Ht),{color:"#999"})})});switch(G.type){case"color":{let Lt=Fo(t,mt),ee=mt.includes("var(")?null:Do(Lt,nt);return E(Xs,{value:mt,resolvedValue:Lt,colorVariables:nt,matchingVariable:ee,onChange:Ft=>st(G.property,Ft),accentColor:s,modified:at,panelContentRef:c,isDropdownOpen:g===G.property,onDropdownChange:Ft=>b(Ft?G.property:null)})}case"number":{if(!!_i[G.property])return E(Ln,{modified:at,children:E(Sn,{property:G.property,value:mt,onChange:Ft=>st(G.property,Ft),isModified:at,min:G.min,max:G.max,step:G.step||1,style:x(m({},Ht),{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:w,onUnitCycle:A})});let{num:ee}=Un(mt);return E(Ln,{modified:at,children:E("input",{type:"number",value:ee,min:G.min,max:G.max,step:G.step||1,onChange:Ft=>st(G.property,Ft.target.value),style:Ht})})}case"select":return E(Ln,{modified:at,children:bt("div",{style:{position:"relative",display:"flex",alignItems:"center"},children:[E("select",{value:mt,onChange:Lt=>st(G.property,Lt.target.value),style:x(m({},Ht),{cursor:"pointer",paddingLeft:4,paddingRight:24,appearance:"none",WebkitAppearance:"none"}),children:(Nt=G.options)==null?void 0:Nt.map(Lt=>E("option",{value:Lt,children:Lt},Lt))}),E("div",{style:{position:"absolute",right:4,top:"50%",transform:"translateY(-50%)",pointerEvents:"none",color:"#999",display:"flex",alignItems:"center"},children:E(Jo,{size:12})})]})});case"spacing":return E(Ln,{modified:at,children:E("input",{type:"text",value:mt,onChange:Lt=>st(G.property,Lt.target.value),placeholder:"e.g., 10px or 10px 20px",style:Ht})});case"backdrop-filter":return E(Kc,{value:mt,onChange:Lt=>st(G.property,Lt),accentColor:s,modified:at,panelContentRef:c});default:return E(Ln,{modified:at,children:E("input",{type:"text",value:mt,onChange:Lt=>st(G.property,Lt.target.value),style:Ht})})}},Ot=(te=ht==null?void 0:ht.changes.length)!=null?te:0,yt=(fe=ht==null?void 0:ht.captured)!=null?fe:!1,le=x(m({position:"fixed",top:Y.current.top,left:Y.current.left,width:280,maxHeight:Y.current.maxHeight,backgroundColor:"rgba(255, 255, 255, 0.85)",backdropFilter:"blur(32px)",WebkitBackdropFilter:"blur(32px)"},un),{zIndex:1e4,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',fontSize:12,overflow:"hidden",display:"flex",flexDirection:"column",opacity:d?1:0,transition:"opacity 150ms ease"}),lt={display:"flex",alignItems:"center",justifyContent:"space-between",margin:"3px 3px 0",padding:"8px 7px 8px 12px",borderBottom:"1px solid rgba(0,0,0,0.1)",backgroundColor:"#f8fafc",cursor:Q.current?"grabbing":"grab"},Tt={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"},ne={display:"flex",alignItems:"center",padding:"4px 12px",gap:8},Yt={width:80,fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#64748b",flexShrink:0};return E("div",{"data-devtools":"panel-wrapper",style:{position:"fixed",top:Y.current.top+B.current.y,left:Y.current.left+B.current.x,zIndex:1e4,pointerEvents:"none"},children:bt("div",{ref:l,"data-devtools":"panel",style:x(m({},le),{position:"relative",top:0,left:0,zIndex:0,pointerEvents:"auto"}),onMouseEnter:()=>a==null?void 0:a("element"),onMouseLeave:()=>a==null?void 0:a(null),children:[bt("div",{style:lt,onMouseDown:It,children:[bt("div",{style:{display:"flex",alignItems:"center",gap:8,overflow:"hidden"},children:[E("span",{style:{fontWeight:600,fontSize:11,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:e.tagName}),Ot>0&&E("span",{style:{backgroundColor:yt?"#999999":s,color:"#fff",fontSize:9,padding:"1px 4px",borderRadius:2},children:Ot})]}),bt("div",{style:{display:"flex",gap:4},children:[Ot>0&&E("button",{type:"button",onClick:wt,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:E($c,{size:14})}),E("button",{type:"button",onClick:r,title:"Close",style:{display:"flex",alignItems:"center",justifyContent:"center",width:24,height:24,border:"none",background:"none",cursor:"pointer",color:"#64748b",borderRadius:2},children:E(Gs,{size:14})})]})]}),bt("div",{ref:c,style:{flex:1,overflowY:"auto",margin:"0 3px 3px"},children:[E("div",{style:{opacity:g?.3:1,transition:"opacity 150ms ease"},children:E(Zc,{element:t,getValue:St,getOriginalValue:Z,handleChange:st,isModified:vt,onResetProperty:O,isCollapsed:!1,onToggle:()=>{},sectionHeaderStyle:Tt,activeDropdown:p,onDropdownChange:f,panelContentRef:c,accentColor:s,onFieldHover:a,preferredUnit:w,onUnitCycle:A})}),E("div",{style:{opacity:p?.3:1,transition:"opacity 150ms ease"},children:E(qc,{element:t,getValue:St,handleChange:st,isModified:vt,onResetProperty:O,isCollapsed:!1,onToggle:()=>{},sectionHeaderStyle:Tt,accentColor:s,colorVariables:nt,activeColorDropdown:g,onColorDropdownChange:b,panelContentRef:c,preferredUnit:w,onUnitCycle:A})}),_s.map((G,mt)=>{let at=mt===_s.length-1,Pt=g&&G.properties.some(Nt=>Nt.property===g);return bt("div",{style:{borderBottom:at?"none":"1px solid rgba(0,0,0,0.08)",opacity:C&&!Pt?.3:1,transition:"opacity 150ms ease"},children:[E("div",{style:Tt,children:E("span",{children:G.name})}),E("div",{style:{padding:"4px 0"},children:G.properties.map(Nt=>{let Lt=vt(Nt.property),ee=Pt&&Nt.property!==g;return bt("div",{style:x(m({},ne),{opacity:ee?.3:1,transition:"opacity 150ms ease"}),children:[E("span",{onClick:Lt?()=>O(Nt.property):void 0,title:Lt?"Click to reset":void 0,style:x(m({},Yt),{color:Lt?s:"#64748b",fontWeight:Lt?600:400,cursor:Lt?"pointer":"default"}),children:Nt.label}),E("div",{style:{flex:1,minWidth:0,overflow:"hidden"},children:jt(Nt)})]},Nt.property)})})]},G.name)}),bt("div",{style:{opacity:C?.3:1,transition:"opacity 150ms ease"},children:[E("div",{style:Tt,children:E("span",{children:"Raw CSS"})}),bt("div",{style:{padding:"8px 12px"},children:[E("textarea",{value:h,onChange:G=>$(G.target.value),placeholder:"property: value; ...",style:{width:"100%",height:60,padding:8,fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',border:"1px solid rgba(0,0,0,0.1)",borderRadius:2,resize:"vertical",outline:"none"}}),h.trim()&&E("button",{type:"button",onClick:xt,style:{marginTop:4,padding:"4px 8px",width:"100%",fontSize:11,border:"none",borderRadius:2,backgroundColor:s,color:"#fff",cursor:"pointer",opacity:h.trim()?1:.5},children:"Apply"})]})]})]})]})})}import{useEffect as Qc,useLayoutEffect as td,useState as ed}from"react";import{Fragment as rd,jsx as Dn,jsxs as id}from"react/jsx-runtime";var $i=["flex-start","center","flex-end"],Wi=["flex-start","center","flex-end"];function nd(t){return t==="normal"||t==="flex-start"||t==="start"?"flex-start":t==="flex-end"||t==="end"?"flex-end":t==="center"?"center":null}function od(t){return t==="normal"||t==="stretch"||t==="flex-start"||t==="start"?"flex-start":t==="flex-end"||t==="end"?"flex-end":t==="center"?"center":null}function Us(t){let e=Array.from(t.children);if(e.length===0)return null;let o=1/0,n=1/0,i=-1/0,r=-1/0;for(let a of e){let s=a.getBoundingClientRect();s.width===0&&s.height===0||(s.top<o&&(o=s.top),s.left<n&&(n=s.left),s.bottom>i&&(i=s.bottom),s.right>r&&(r=s.right))}return o===1/0?null:new DOMRect(n,o,r-n,i-o)}function Zs({element:t,modifier:e,accentColor:o,refreshKey:n=0}){let[i,r]=ed(null);if(Qc(()=>{if(!t){r(null);return}let b=()=>r(Us(t));return b(),window.addEventListener("scroll",b,{passive:!0}),window.addEventListener("resize",b,{passive:!0}),()=>{window.removeEventListener("scroll",b),window.removeEventListener("resize",b)}},[t]),td(()=>{t&&r(Us(t))},[t,n]),!i)return null;let a=i,s=window.getComputedStyle(t),l=s.display;if(l!=="flex"&&l!=="inline-flex")return null;let c=s.flexDirection,d=c==="column"||c==="column-reverse"?"vertical":"horizontal",u=d==="horizontal"?"vertical":"horizontal",p=[];if(e==="shift"){let b=nd(s.justifyContent);if(b){let C=$i.indexOf(b);d==="horizontal"?(C>0&&p.push("left"),C<$i.length-1&&p.push("right")):(C>0&&p.push("up"),C<$i.length-1&&p.push("down"))}}else{let b=od(s.alignItems);if(b){let C=Wi.indexOf(b);u==="horizontal"?(C>0&&p.push("left"),C<Wi.length-1&&p.push("right")):(C>0&&p.push("up"),C<Wi.length-1&&p.push("down"))}}if(p.length===0)return null;let f=14,g=7;return Dn(rd,{children:p.map(b=>{let C,w;switch(b){case"right":C=a.right+f,w=a.top+a.height/2;break;case"left":C=a.left-f,w=a.top+a.height/2;break;case"down":C=a.left+a.width/2,w=a.bottom+f;break;case"up":C=a.left+a.width/2,w=a.top-f;break}let L=b==="right"?0:b==="left"?180:b==="down"?90:-90,A={position:"fixed",left:C-g,top:w-g,width:g*2,height:g*2,pointerEvents:"none",zIndex:9997};return Dn("div",{"data-devtools":"swipe-hint",style:A,children:Dn("svg",{width:g*2,height:g*2,viewBox:"-7 -7 14 14",style:{overflow:"visible"},children:id("g",{transform:`rotate(${L})`,children:[Dn("line",{x1:"-5",y1:"0",x2:"3",y2:"0",stroke:"#fff",strokeWidth:"4",strokeLinecap:"round"}),Dn("polyline",{points:"0,-4 5,0 0,4",fill:"none",stroke:"#fff",strokeWidth:"4",strokeLinecap:"round",strokeLinejoin:"round"}),Dn("line",{x1:"-5",y1:"0",x2:"3",y2:"0",stroke:o,strokeWidth:"1.5",strokeLinecap:"round"}),Dn("polyline",{points:"0,-4 5,0 0,4",fill:"none",stroke:o,strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]})})},b)})})}import{useEffect as sd,useLayoutEffect as ad,useState as ld}from"react";import{jsx as Yi,jsxs as ji}from"react/jsx-runtime";function cd(t,e){let o=t.match(/^oklch\(([^)]+)\)$/i);return o?`oklch(${o[1]} / ${e})`:`color-mix(in srgb, ${t} ${Math.round(e*100)}%, transparent)`}function qs({element:t,fontSize:e,lineHeight:o,accentColor:n,hoveredProperty:i,draggingProperty:r,cursorViewport:a}){let[s,l]=ld(null);if(sd(()=>{if(!t){l(null);return}let w=()=>{l(Vn(t))};return w(),window.addEventListener("scroll",w,{passive:!0}),window.addEventListener("resize",w,{passive:!0}),()=>{window.removeEventListener("scroll",w),window.removeEventListener("resize",w)}},[t]),ad(()=>{t&&l(Vn(t))},[t,e,o]),!s)return null;let c=s.width,d=s.height,u=cd(n,.2),p=r!=null?r:i,f=8,g=2,b={position:"fixed",top:s.top,left:s.left,width:c,height:d,pointerEvents:"none",zIndex:9996,overflow:"visible"},C=w=>w==="font-size"?`${Math.round(e)}`:(e>0?o/e:1.2).toFixed(2).replace(/\.?0+$/,"");return ji("div",{"data-devtools":"text-handles",style:b,children:[ji("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${c} ${d}`,children:[Yi("rect",{x:"0.5",y:"0.5",width:Math.max(0,c-1),height:Math.max(0,d-1),fill:"none",stroke:u,strokeWidth:"1"}),(p==="font-size"||!p)&&Yi("rect",{x:c-g/2,y:d/2-f/2,width:g,height:f,fill:n,stroke:"#ffffff",strokeWidth:p==="font-size"?4:2,paintOrder:"stroke"}),(p==="line-height"||!p)&&Yi("rect",{x:c/2-f/2,y:d-g/2,width:f,height:g,fill:n,stroke:"#ffffff",strokeWidth:p==="line-height"?4:2,paintOrder:"stroke"})]}),a&&p&&(()=>{let w=p==="font-size"?"Aa":"Lh",L=C(p);return ji("div",{style:{position:"fixed",left:a.x+8,top:a.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:[w," ",L]})})()]})}import{Fragment as Ke,jsx as ot,jsxs as ye}from"react/jsx-runtime";var Qs=8,Vi=[0,1,2,4,8,12,16,20,24,28,32],mo=22,ln=12,Ji="devtools-active-text";function ta(t,e,o=0){let n=t.left+window.scrollX+4,i=e==="top-left"?t.top+window.scrollY-mo-o*mo+4:t.bottom+window.scrollY+4-1+o*mo;return{x:n,y:i}}function na({state:t,dispatch:e,onScreenshot:o,inFlightAnnotationIds:n,inFlightStyleSelectors:i,inFlightSelectorColors:r,onAttachImages:a,onReply:s,onViewThread:l,activePlan:c,onModelComponentsAdd:d,onModelComponentFocus:u,onModelComponentHover:p,modelComponentNames:f,modelPanelHoveredComponent:g,modelSpacingTokenHover:b}){var Mr,Ir,Lr,Rr,Ar,Pr,Nr,Br,Or,Fr,Dr;let{canvasRef:C,redrawAll:w,resizeCanvas:L}=xs(),[A,R]=Ut(!1),[h,$]=Ut(()=>{if(typeof window=="undefined")return null;try{let S=localStorage.getItem(Ji);return S?JSON.parse(S):null}catch(S){return null}}),[nt,Y]=Ut(null),[K,q]=Ut(null),[B,Q]=Ut(null),U=ve(null),It=ve(null),ht=ve({x:0,y:0}),St=ve([]),Z=ve(0),[st,wt]=Ut(null),[O,xt]=Ut(new Map),vt=ve(0),jt=ve(null),[Ot,yt]=Ut(null),[le,lt]=Ut(null),Tt=ve({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}),[ne,Yt]=Ut(null),[te,fe]=Ut(null),[G,mt]=Ut(null),[at,Pt]=Ut(null),Ht=ve({x:0,y:0}),[Nt,Lt]=Ut({x:0,y:0}),ee=ve({isDragging:!1,hasMoved:!1,axis:null,startX:0,startY:0,originalRow:0,originalColumn:0,element:null,elementInfo:null,selector:null,durableSelector:null,isAuto:!1,originalJustifyContent:"",visualGap:0}),[Ft,we]=Ut(null),[se,ge]=Ut(null),[Zt,De]=Ut(null),[de,_e]=Ut(!1),[me,Ze]=Ut(0),[Re,We]=Ut(null),$e=ve({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}),[ke,mn]=Ut(null),[j,At]=Ut(null),[Bt,qe]=Ut(null),ue=ve({isDragging:!1,property:null,startX:0,startY:0,originalFontSize:0,originalLineHeight:0,originalRatio:1.2,element:null,elementInfo:null,selector:null,durableSelector:null}),[qt,xe]=Ut(null),[Ae,Tn]=Ut(null),[oe,cn]=Ut(null),V=vs(),et=ve(r);et.current=r;let ft=Ie(S=>{let k=et.current;if(!k||k.size===0)return!1;for(let tt of k.keys())try{if(S.matches(tt))return!0}catch(I){}return!1},[]),Mt=ve(t);Mt.current=t;let y=ve(h);y.current=h;let T=ve([]),W=ve(o);W.current=o;let[rt,kt]=Ut(null),Rt=t.selectedAnnotationIds;T.current=Rt;let ut=Ie((S,k=!1)=>{e({type:"SELECT_ANNOTATION",payload:{id:S,addToSelection:k}})},[e]),zt=Ie(()=>{e({type:"SELECT_ANNOTATION",payload:{id:null}})},[e]),[ct,_t]=Ut(null),[Vt,ae]=Ut({x:window.scrollX,y:window.scrollY});Le(()=>(L(),window.addEventListener("resize",L),()=>window.removeEventListener("resize",L)),[L]),Le(()=>{let S=()=>{ae({x:window.scrollX,y:window.scrollY})};return window.addEventListener("scroll",S,{passive:!0}),()=>window.removeEventListener("scroll",S)},[]),Le(()=>{h?localStorage.setItem(Ji,JSON.stringify(h)):localStorage.removeItem(Ji)},[h]),Ss(h,$,nt,t.annotations,e);let Ye=ve(st);Ye.current=st,Le(()=>{if(t.activeTool!=="model"||!t.isAnnotating)return;let S=k=>{if(!k.altKey||!Ye.current)return;k.preventDefault();let tt=k.deltaY>0?-1:1;vt.current=Math.max(0,vt.current+tt);let I=jt.current;if(I){let N=Lo(I,vt.current);wt(N)}};return window.addEventListener("wheel",S,{passive:!1}),()=>window.removeEventListener("wheel",S)},[t.activeTool,t.isAnnotating]),Le(()=>{t.activeTool!=="model"&&(wt(null),xt(new Map),vt.current=0,jt.current=null)},[t.activeTool]),Le(()=>{var tt;let S=(tt=st==null?void 0:st.name)!=null?tt:null,k=S&&(f!=null&&f.has(S))?S:null;p==null||p(k)},[st,f,p]);let[je,hn]=Ut(null);Le(()=>{var tt;if(!g){hn(null);return}let S=jn(g.name),k=g.instanceIndex;hn((tt=S[k%S.length])!=null?tt:null)},[g]);let[Rn,Ge]=Ut([]);Le(()=>{var S,k;if(!b){Ge([]);return}(k=(S=b.token)==null?void 0:S.bindings)!=null&&k.length?Ge(ai(b.token)):Ge(ri(b.px))},[b]);let An=ve(null),Ta=ve(null);An.current=Ft,Ta.current=se,Le(()=>{let S=["flex-start","center","flex-end"],k=["flex-start","center","flex-end"],I=null,N=!1,F=null,dt=null,D=(gt,Et)=>{let Xt=Mn(gt,Et);for(;Xt&&Xt!==document.documentElement;){let re=window.getComputedStyle(Xt).display;if(re==="flex"||re==="inline-flex")return Xt;Xt=Xt.parentElement}return null},J=gt=>{let Et=window.getComputedStyle(gt).flexDirection;return Et==="column"||Et==="column-reverse"?"vertical":"horizontal"},v=gt=>{let Et=gt.getAttribute("data-pm");return Et||(Et=Math.random().toString(36).substring(2,8),gt.setAttribute("data-pm",Et)),{selector:`[data-pm="${Et}"]`,durableSelector:sn(gt)}},M=()=>{N=!0,I&&clearTimeout(I),I=setTimeout(()=>{N=!1,I=null},300)},X=(gt,Et,Kt)=>{let Xt=J(gt);if(Et===Xt){let $t=window.getComputedStyle(gt).justifyContent,pe=$t==="normal"||$t==="flex-start"||$t==="start"?"flex-start":$t==="flex-end"||$t==="end"?"flex-end":$t==="center"?"center":null;if(!pe)return;let He=S.indexOf(pe)+Kt;if(He<0||He>=S.length)return;let xn=S[He],{selector:Nn,durableSelector:ti}=v(gt);Gt(gt,"justify-content",xn),e({type:"MODIFY_STYLES_BATCH",payload:{selector:Nn,durableSelector:ti,element:Ve(gt),changes:[{property:"justify-content",original:$t,modified:xn}]}})}else{let $t=window.getComputedStyle(gt).flexDirection,pe=Xt==="horizontal"?"column":"row",{selector:dn,durableSelector:He}=v(gt);Gt(gt,"flex-direction",pe),e({type:"MODIFY_STYLES_BATCH",payload:{selector:dn,durableSelector:He,element:Ve(gt),changes:[{property:"flex-direction",original:$t,modified:pe}]}})}Ze(re=>re+1)},P=(gt,Et,Kt)=>{let re=J(gt)==="horizontal"?"vertical":"horizontal";if(Et!==re)return;let pe=window.getComputedStyle(gt).alignItems,dn=pe==="normal"||pe==="stretch"||pe==="flex-start"||pe==="start"?"flex-start":pe==="flex-end"||pe==="end"?"flex-end":pe==="center"?"center":null;if(!dn)return;let xn=k.indexOf(dn)+Kt;if(xn<0||xn>=k.length)return;let Nn=k[xn],{selector:ti,durableSelector:Ba}=v(gt);Gt(gt,"align-items",Nn),e({type:"MODIFY_STYLES_BATCH",payload:{selector:ti,durableSelector:Ba,element:Ve(gt),changes:[{property:"align-items",original:pe,modified:Nn}]}}),Ze(Oa=>Oa+1)},H=20,_=null,z=null,pt=0,Ct=(gt,Et,Kt)=>{let Xt=D(Et,Kt);We(Xt?{modifier:gt,target:Xt}:null)},ie=gt=>{if(!(t.activeTool!=="hand"||!t.isAnnotating)){if(gt.key==="Shift"&&!gt.altKey){let Et=Ht.current;Ct("shift",Et.x,Et.y)}else if(gt.key==="Alt"&&!gt.shiftKey){let Et=Ht.current;Ct("alt",Et.x,Et.y)}}},Jt=gt=>{if(t.activeTool!=="hand"||!t.isAnnotating)return;let Et=gt.shiftKey&&!gt.altKey,Kt=gt.altKey&&!gt.shiftKey;if(!Et&&!Kt||gt.buttons!==0){_=null,z=null,pt=0,F=null,dt=null,We(null);return}if(F===null&&(F=gt.clientX,dt=gt.clientY,Ct(Et?"shift":"alt",gt.clientX,gt.clientY)),N)return;_===null&&(_=gt.clientX,z=gt.clientY,pt=0);let Xt=gt.clientX-_,re=gt.clientY-z,$t=Math.abs(Xt)>=Math.abs(re)?Xt:re;if(Math.abs($t)>3){let Nn=$t>0?1:-1;if(pt!==0&&Nn!==pt){_=gt.clientX,z=gt.clientY,pt=0;return}pt=Nn}if(Math.abs(Xt)<H&&Math.abs(re)<H)return;let pe=D(F,dt);if(!pe)return;let dn=Math.abs(Xt)>=Math.abs(re)?"horizontal":"vertical",xn=(dn==="horizontal"?Xt:re)>0?1:-1;_=null,z=null,pt=0,Et?X(pe,dn,xn):P(pe,dn,xn),M()},Pe=gt=>{(gt.key==="Shift"||gt.key==="Alt")&&(F=null,dt=null,_=null,z=null,pt=0,We(null))},ce=()=>{We(null),_=null,z=null,pt=0};return window.addEventListener("keydown",ie),window.addEventListener("mousemove",Jt),window.addEventListener("mousedown",ce),window.addEventListener("keyup",Pe),()=>{window.removeEventListener("keydown",ie),window.removeEventListener("mousemove",Jt),window.removeEventListener("mousedown",ce),window.removeEventListener("keyup",Pe),I&&clearTimeout(I)}},[t.activeTool,t.isAnnotating,e]),Le(()=>{let S=k=>{var I;if(k.key==="Escape"){if(y.current)return;if(t.activeTool==="model"&&O.size>0){k.preventDefault(),xt(new Map);return}if(T.current.length>0){k.preventDefault(),zt();return}}if(k.key==="Enter"&&t.activeTool==="model"&&O.size>0&&d){k.preventDefault();let N=[...O.keys()].filter(F=>!(f!=null&&f.has(F)));N.length>0&&d(N),xt(new Map);return}if((k.metaKey||k.ctrlKey)&&k.key==="v"&&St.current.length>0&&!y.current){k.preventDefault(),Z.current++;let N=Z.current*20,dt=((I=St.current[0])==null?void 0:I.groupId)?Math.random().toString(36).substring(2,9):void 0,D=St.current.map(v=>x(m({},v),{id:Math.random().toString(36).substring(2,9),groupId:v.groupId?dt:void 0,timestamp:Date.now(),points:v.points.map(M=>({x:M.x+N,y:M.y+N}))}));e({type:"PASTE_ANNOTATIONS",payload:{annotations:D}});let J=D.find(v=>v.type!=="text")||D[0];J&&ut(J.id);return}let tt=T.current;if(!(tt.length===0||y.current)&&(k.key==="Delete"||k.key==="Backspace")){k.preventDefault();for(let N of tt)e({type:"DELETE_ANNOTATION",payload:{id:N}});zt()}};return window.addEventListener("keydown",S),()=>window.removeEventListener("keydown",S)},[e,zt,ut,t.activeTool,O,f,d]);let yn=Gi(()=>$o(t.annotations),[t.annotations]),no=Gi(()=>{let S=new Map,k=new Set,tt=1;for(let I of t.annotations)if(!yn.has(I))if(I.groupId){if(!k.has(I.groupId)){k.add(I.groupId);let N=t.annotations.filter(F=>F.groupId===I.groupId);for(let F of N)S.set(F.id,tt);tt++}}else S.set(I.id,tt),tt++;return S},[t.annotations,yn]),vr=Gi(()=>{if(Rt.length===0)return null;let S=new Map;for(let k of Rt){let tt=t.annotations.find(N=>N.id===k);if(!tt)continue;let I=tt.groupId?t.annotations.filter(N=>N.groupId===tt.groupId):[tt];for(let N of I)if(N.linkedSelector&&!(r!=null&&r.has(N.linkedSelector))){let F=N.color||t.activeColor;S.set(N.linkedSelector,F)}}return S.size>0?S:null},[Rt,t.annotations,t.activeColor,r]);Le(()=>{let S=t.annotations.filter(k=>!(yn.has(k)||h&&!h.isNew&&k.id===h.id));w(S,t.currentPath,t.activeTool,t.activeColor,t.strokeWidth,Rt,Qs,Vt.x,Vt.y,no)},[t.annotations,t.currentPath,t.activeTool,t.activeColor,t.strokeWidth,w,h,Rt,Vt,no,yn]),Le(()=>{if(K){let S=Math.random().toString(36).substring(2,9);$({id:S,point:K.point,text:"",fontSize:12,isNew:!0,groupId:K.groupId}),q(null)}},[K]),Le(()=>{B&&($({id:Math.random().toString(36).substring(2,9),point:B.point,text:"",fontSize:12,isNew:!0,linkedSelector:B.linkedSelector,linkedAnchor:B.linkedAnchor,elements:B.elements}),Q(null))},[B]);let So=ve(null),wo=(Mr=h==null?void 0:h.id)!=null?Mr:null;Le(()=>{wo&&U.current?requestAnimationFrame(()=>{var tt;let S=U.current;if(!S||(S.focus(),It.current===wo))return;It.current=wo;let k=y.current;if(k){if(So.current!==null){let I=Math.min(So.current,S.value.length);S.setSelectionRange(I,I);return}if(!k.isNew&&k.clickPoint){let I=C.current;if(!I)return;let N=I.getContext("2d");if(!N)return;N.font=`${k.fontSize}px ${Ce}`;let F=k.fontSize*1.4,dt=k.text.split(`
|
|
5
|
-
`),
|
|
6
|
-
`),M=Math.max(...v.map(P=>J.measureText(P).width)),X=v.length*(dt*1.4);if(S.x>=F.x-4-4&&S.x<=F.x+M+4+4&&S.y>=F.y-4-4&&S.y<=F.y+X+4+4)return I}}break}case"rectangle":{if(I.points.length<2)continue;let F=I.points[0],dt=I.points[I.points.length-1],D=Math.min(F.x,dt.x),J=Math.max(F.x,dt.x),v=Math.min(F.y,dt.y),M=Math.max(F.y,dt.y),X=Pn(S,{x:D,y:v},{x:J,y:v},N),P=Pn(S,{x:D,y:M},{x:J,y:M},N),H=Pn(S,{x:D,y:v},{x:D,y:M},N),_=Pn(S,{x:J,y:v},{x:J,y:M},N);if(X||P||H||_)return I;break}case"circle":{if(I.points.length<2)continue;let F=I.points[0],dt=I.points[I.points.length-1],D=(F.x+dt.x)/2,J=(F.y+dt.y)/2,v=Math.abs(dt.x-F.x)/2,M=Math.abs(dt.y-F.y)/2,X=S.x-D,P=S.y-J,H=Math.sqrt((X/v)**2+(P/M)**2);if(Math.abs(H-1)*Math.max(v,M)<=N)return I;break}case"line":{if(I.points.length<2)continue;let F=I.points[0],dt=I.points[I.points.length-1];if(Pn(S,F,dt,N))return I;break}case"freehand":{if(I.points.length<2)continue;for(let F=0;F<I.points.length-1;F++){let dt=I.points[F],D=I.points[F+1];if(Pn(S,dt,D,N))return I}break}}}return null},[t.annotations,C,Pn,yn]),Sr=Ie(S=>{let k=ko(S);return(k==null?void 0:k.type)==="text"?k:null},[ko]),wr=Ie(S=>{if(Rt.length===0)return null;let k=Qs/2+4;for(let tt of Rt){let I=t.annotations.find(N=>N.id===tt);if(!(!I||I.points.length<2)){if(I.type==="line"){let N=I.points[0],F=I.points[I.points.length-1];if(Math.sqrt((S.x-N.x)**2+(S.y-N.y)**2)<=k)return{handle:"start",annotationId:tt};if(Math.sqrt((S.x-F.x)**2+(S.y-F.y)**2)<=k)return{handle:"end",annotationId:tt};continue}if(I.type==="circle"){let N=I.points[0],F=I.points[I.points.length-1],dt=Math.min(N.x,F.x),D=Math.max(N.x,F.x),J=Math.min(N.y,F.y),v=Math.max(N.y,F.y),M=(dt+D)/2,X=(J+v)/2,P=[{handle:"top",x:M,y:J},{handle:"bottom",x:M,y:v},{handle:"left",x:dt,y:X},{handle:"right",x:D,y:X}];for(let{handle:H,x:_,y:z}of P)if(Math.sqrt((S.x-_)**2+(S.y-z)**2)<=k)return{handle:H,annotationId:tt};continue}if(I.type==="rectangle"||I.type==="freehand"){let N=I.points[0],F=I.points[I.points.length-1],dt,D,J,v;I.type==="freehand"?(dt=Math.min(...I.points.map(X=>X.x)),D=Math.max(...I.points.map(X=>X.x)),J=Math.min(...I.points.map(X=>X.y)),v=Math.max(...I.points.map(X=>X.y))):(dt=Math.min(N.x,F.x),D=Math.max(N.x,F.x),J=Math.min(N.y,F.y),v=Math.max(N.y,F.y));let M=[{corner:"topLeft",x:dt,y:J},{corner:"topRight",x:D,y:J},{corner:"bottomLeft",x:dt,y:v},{corner:"bottomRight",x:D,y:v}];for(let{corner:X,x:P,y:H}of M)if(Math.sqrt((S.x-P)**2+(S.y-H)**2)<=k)return{handle:X,annotationId:tt}}}}return null},[Rt,t.annotations]);Le(()=>{let S=k=>{if(ht.current={x:k.clientX+window.scrollX,y:k.clientY+window.scrollY},!h){let tt=Sr(ht.current);Y((tt==null?void 0:tt.id)||null)}};return window.addEventListener("mousemove",S),()=>window.removeEventListener("mousemove",S)},[h,Sr]);let $n=Ie(()=>{var k;if(!h)return;let S=((k=h.images)==null?void 0:k.length)||0;if(h.text.trim()||S>0)if(h.isNew){let tt=Yn();e({type:"ADD_TEXT",payload:m({point:h.point,text:h.text||(S>0?`[${S} image${S>1?"s":""}]`:""),fontSize:h.fontSize,id:tt,groupId:h.groupId,linkedSelector:h.linkedSelector,linkedAnchor:h.linkedAnchor,elements:h.elements},S>0?{imageCount:S}:{})}),S>0&&h.images&&a&&a(tt,h.images)}else e({type:"UPDATE_TEXT",payload:m({id:h.id,text:h.text||(S>0?`[${S} image${S>1?"s":""}]`:"")},S>0?{imageCount:S}:{})}),S>0&&h.images&&a&&a(h.id,h.images);else h.isNew||e({type:"DELETE_ANNOTATION",payload:{id:h.id}});$(null)},[h,e,a]),bn=Ie(S=>{for(let k=0;k<Vi.length-1;k++){let tt=Vi[k],I=Vi[k+1];if(S<=(tt+I)/2)return tt;if(S<I)return I}return Math.round(S/8)*8},[]),kr=Ie((S,k,tt,I)=>{let N=tt.top+Math.max(I.top,4),F=tt.bottom-Math.max(I.bottom,4),dt=tt.left+Math.max(I.left,4),D=tt.right-Math.max(I.right,4);if(S<tt.left||S>tt.right||k<tt.top||k>tt.bottom)return null;let J=k<N,v=k>F,M=S<dt,X=S>D;return J&&M?I.top>=I.left?"top":"left":J&&X?I.top>=I.right?"top":"right":v&&M?I.bottom>=I.left?"bottom":"left":v&&X?I.bottom>=I.right?"bottom":"right":J?"top":v?"bottom":M?"left":X?"right":null},[]),Cr=Ie(S=>{var F,dt;if(!t.isAnnotating)return;if(t.inspectedElement&&t.activeTool==="hand"&&!("button"in S&&S.button===2)){S.preventDefault(),S.stopPropagation(),e({type:"SELECT_ELEMENT",payload:null});return}let k=_n(S),tt="shiftKey"in S&&S.shiftKey;if(t.activeTool==="inspector"){if("button"in S&&S.button===2)return;if(Ot&&!ft(Ot)){let D=Ve(Ot),J=sn(Ot),v=Ot.getBoundingClientRect(),M=Ot.getAttribute("data-pm");M||(M=Math.random().toString(36).substring(2,8),Ot.setAttribute("data-pm",M));let X=`[data-pm="${M}"]`,P=t.styleModifications.some(Ct=>{try{return Ot.matches(Ct.selector)}catch(ie){return!1}}),H=t.annotations.filter(Ct=>{if(!Ct.linkedSelector)return!1;try{return Ot.matches(Ct.linkedSelector)}catch(ie){return!1}}).length,_=(P?1:0)+H,z=v.top>=mo*(1+_)?"top-left":"bottom-left",pt=ta(v,z,_);Q({point:pt,linkedSelector:X,linkedAnchor:z,elements:[x(m({},D),{selector:J})]})}return}if(t.activeTool==="model"){if("button"in S&&S.button===2)return;if(st){let D=st.name;if(f!=null&&f.has(D)){u==null||u(D);return}"shiftKey"in S&&S.shiftKey?xt(v=>{let M=new Map(v);return M.has(D)?M.delete(D):M.set(D,st),M}):O.size===1&&O.has(D)?(d&&d([D]),xt(new Map)):xt(new Map([[D,st]]))}return}if(t.activeTool==="hand"&&Ft&&se){let D=Ft,J=D.getAttribute("data-pm");J||(J=Math.random().toString(36).substring(2,8),D.setAttribute("data-pm",J));let v=sn(D),M=`[data-pm="${J}"]`,X=Ve(D),P=lo(D),H=k.x-window.scrollX,_=k.y-window.scrollY,z=de,pt=window.getComputedStyle(D).justifyContent,Ct=0;if(z){let Jt=Bn(D).find(Pe=>Pe.axis===se);Ct=Jt?se==="column"?Jt.w:Jt.h:0}Gt(D,"transition","none"),ee.current={isDragging:!0,hasMoved:!1,axis:se,startX:H,startY:_,originalRow:z?Ct:P.row,originalColumn:z?Ct:P.column,element:D,elementInfo:x(m({},X),{selector:M}),selector:M,durableSelector:v,isAuto:z,originalJustifyContent:pt,visualGap:Ct},De({axis:se,row:z?Ct:P.row,column:z?Ct:P.column});return}if(t.activeTool==="hand"&&qt&&Ae){let D=qt,J=D.getAttribute("data-pm");J||(J=Math.random().toString(36).substring(2,8),D.setAttribute("data-pm",J));let v=`[data-pm="${J}"]`,M=Ve(D),{fontSize:X,lineHeight:P}=co(D),H=X>0?P/X:1.2,_=k.x-window.scrollX,z=k.y-window.scrollY;Gt(D,"transition","none");let pt=sn(D);ue.current={isDragging:!0,property:Ae,startX:_,startY:z,originalFontSize:X,originalLineHeight:P,originalRatio:H,element:D,elementInfo:x(m({},M),{selector:v}),selector:v,durableSelector:pt},cn({property:Ae,fontSize:X,lineHeight:P});return}if(t.activeTool==="hand"&&ke&&j){let D=ke,J=D.getAttribute("data-pm");J||(J=Math.random().toString(36).substring(2,8),D.setAttribute("data-pm",J));let v=`[data-pm="${J}"]`,M=sn(D),X=Ve(D),P=On(D),H=D.getBoundingClientRect(),_=Math.floor(H.height/2),z=k.y-window.scrollY;Gt(D,"transition","none"),$e.current={isDragging:!0,corner:j,startY:z,original:P,maxRadius:_,element:D,elementInfo:x(m({},X),{selector:v}),selector:v,durableSelector:M},qe({corner:j,radius:m({},P)});return}if(t.activeTool==="hand"&&ne&&te){let D=ne,J=D.getAttribute("data-pm");J||(J=Math.random().toString(36).substring(2,8),D.setAttribute("data-pm",J));let v=`[data-pm="${J}"]`,M=sn(D),X=Ve(D),P=Gn(D),H=k.x-window.scrollX,_=k.y-window.scrollY;Gt(D,"transition","none"),Tt.current={isDragging:!0,side:te,startX:H,startY:_,original:P,element:D,elementInfo:x(m({},X),{selector:v}),selector:v,durableSelector:M},Pt({side:te,padding:m({},P)});return}let I=wr(k);if(I){let D=t.annotations.find(J=>J.id===I.annotationId);if(D&&D.type!=="text"&&((F=D.status)!=null?F:"pending")==="pending"){_t({annotationId:I.annotationId,handle:I.handle,startPoint:k,originalPoints:[...D.points],hasMoved:!1});return}}let N=ko(k);if(N&&N.points[0]){if(h&&$n(),N.type!=="text"){if(ut(N.id,tt),N.color&&e({type:"SET_COLOR",payload:N.color}),l){let D=N.threadId||(N.groupId?(dt=t.annotations.find(J=>J.groupId===N.groupId&&J.threadId))==null?void 0:dt.threadId:void 0);D&&l(D)}}else tt||zt();kt({annotation:N,startPoint:k,hasMoved:!1});return}if(tt||zt(),t.activeTool==="text"){h&&$n();let D=Math.random().toString(36).substring(2,9);$({id:D,point:k,text:"",fontSize:12,isNew:!0});return}R(!0),e({type:"START_PATH",payload:k})},[t.isAnnotating,t.activeTool,t.inspectedElement,t.annotations,h,Rt,Ot,ne,te,ke,j,Ft,se,de,qt,Ae,st,O,f,d,u,l,_n,ko,wr,e,ut,zt,$n]),Er=Ie(S=>{var tt,I;let k=_n(S);if(t.activeTool==="inspector"&&t.isAnnotating){let N=k.x-window.scrollX,F=k.y-window.scrollY,dt=Mn(N,F),D=dt&&ft(dt)?null:dt;D!==Ot&&(yt(D),lt(D?Ve(D):null));return}if(t.activeTool==="model"&&t.isAnnotating){let N=k.x-window.scrollX,F=k.y-window.scrollY,dt=Mn(N,F);if(dt!==jt.current&&(jt.current=dt,vt.current=0),dt){let D=Lo(dt,vt.current);wt(D)}else wt(null);return}if(t.activeTool==="hand"&&t.isAnnotating){let N=k.x-window.scrollX,F=k.y-window.scrollY;Ht.current={x:N,y:F},Lt({x:N,y:F});let dt=V.current.cmd,D=V.current.shift;if(ee.current.isDragging){let v=ee.current,M=v.element;if(!M)return;if(!v.hasMoved){let _=Math.abs(N-v.startX),z=Math.abs(F-v.startY);if(_<=2&&z<=2)return;v.hasMoved=!0,v.isAuto&&(Gt(M,"justify-content","normal"),Gt(M,"row-gap",`${v.visualGap}px`),Gt(M,"column-gap",`${v.visualGap}px`),_e(!1))}let X=v.axis,P=v.originalRow,H=v.originalColumn;if(X==="column"){let _=N-v.startX;H=v.originalColumn+_,dt||(P=v.originalRow+_)}else{let _=F-v.startY;P=v.originalRow+_,dt||(H=v.originalColumn+_)}P=Math.max(0,P),H=Math.max(0,H),D&&(P=bn(P),H=bn(H)),P=Math.round(P),H=Math.round(H),Gt(M,"row-gap",`${P}px`),Gt(M,"column-gap",`${H}px`),De({axis:X,row:P,column:H});return}if($e.current.isDragging){let v=$e.current,M=v.element;if(!M)return;let X=F-v.startY,P=v.corner,H=v.original,_=m({},H);if(dt){let z=H[P]+X;z=Math.max(0,Math.min(v.maxRadius,z)),D&&(z=bn(z)),z=Math.round(z),_[P]=z}else{let z=H[P]+X;z=Math.max(0,Math.min(v.maxRadius,z)),D&&(z=bn(z)),z=Math.round(z),_={"top-left":z,"top-right":z,"bottom-right":z,"bottom-left":z}}Gt(M,"border-top-left-radius",`${_["top-left"]}px`),Gt(M,"border-top-right-radius",`${_["top-right"]}px`),Gt(M,"border-bottom-right-radius",`${_["bottom-right"]}px`),Gt(M,"border-bottom-left-radius",`${_["bottom-left"]}px`),qe({corner:P,radius:_});return}if(ue.current.isDragging){let v=ue.current,M=v.element;if(!M)return;let X=v.property,P=v.originalFontSize,H=v.originalLineHeight,_=[8,10,11,12,13,14,16,18,20,22,24,28,32,36,40,48,56,64,72,80,96];if(X==="font-size"){let pt=N-v.startX;P=v.originalFontSize+pt,P=Math.max(1,P)}else{let pt=F-v.startY;H=v.originalLineHeight+pt,H=Math.max(P,H)}if(D)if(X==="font-size"){let pt=_[0],Ct=Math.abs(P-pt);for(let ie of _){let Jt=Math.abs(P-ie);Jt<Ct&&(pt=ie,Ct=Jt)}P=pt}else{let pt=P>0?H/P:1.2,Ct=Math.round(pt*2)/2;H=P*Math.max(1,Ct)}P=Math.round(P),H=Math.round(H*10)/10,Gt(M,"font-size",`${P}px`);let z=P>0?Math.round(H/P*1e3)/1e3:1.2;Gt(M,"line-height",`${z}`),cn({property:X,fontSize:P,lineHeight:H});return}if(Tt.current.isDragging){let v=Tt.current,M=v.element;if(!M)return;let X=v.side,P=v.original,H=P.top,_=P.right,z=P.bottom,pt=P.left;if(X==="top"){let Ct=v.startY-F;H=P.top+Ct,dt||(z=P.bottom+Ct)}else if(X==="bottom"){let Ct=F-v.startY;z=P.bottom+Ct,dt||(H=P.top+Ct)}else if(X==="left"){let Ct=v.startX-N;pt=P.left+Ct,dt||(_=P.right+Ct)}else if(X==="right"){let Ct=N-v.startX;_=P.right+Ct,dt||(pt=P.left+Ct)}H=Math.max(0,H),_=Math.max(0,_),z=Math.max(0,z),pt=Math.max(0,pt),D&&(H=bn(H),_=bn(_),z=bn(z),pt=bn(pt)),H=Math.round(H),_=Math.round(_),z=Math.round(z),pt=Math.round(pt),Gt(M,"padding",`${H}px ${_}px ${z}px ${pt}px`),Pt({side:X,padding:{top:H,right:_,bottom:z,left:pt}});return}let J=Mn(N,F);for(;J&&J.tagName==="A";)J=J.parentElement;{let M=[];J&&M.push(J),ke&&ke!==J&&M.push(ke);let X=null,P=16,H=null;for(let _ of M){let z=_.getBoundingClientRect(),pt=On(_),Ct=[["top-left",z.left,z.top+pt["top-left"]],["top-right",z.right,z.top+pt["top-right"]],["bottom-right",z.right,z.bottom-pt["bottom-right"]],["bottom-left",z.left,z.bottom-pt["bottom-left"]]];for(let[ie,Jt,Pe]of Ct){let ce=Math.hypot(N-Jt,F-Pe);ce<P&&(P=ce,X=ie,H=_)}}if(X&&H){mn(H),At(X),ne&&Yt(null),te&&fe(null),Ft&&we(null),se&&ge(null),_e(!1),qt&&xe(null),Ae&&Tn(null);return}}ke&&mn(null),j&&At(null);{let v=[];J&&Po(J)&&v.push(J);let M=(tt=J==null?void 0:J.parentElement)!=null?tt:null;for(;M&&M!==document.body&&v.length<3;)Po(M)&&v.push(M),M=M.parentElement;for(let X of v){let H=Bn(X).find(_=>N>=_.x&&N<=_.x+_.w&&F>=_.y&&F<=_.y+_.h);if(H){we(X),ge(H.axis),_e(ui(X,H.axis)),ne&&Yt(null),te&&fe(null),qt&&xe(null),Ae&&Tn(null);return}}}Ft&&we(null),se&&ge(null),_e(!1);{let M=[];J&&M.push(J),qt&&qt!==J&&M.push(qt);let X=null,P=1/0,H=null;for(let _ of M){if(!pi(_))continue;let z=Vn(_);if(!z)continue;let pt=N>=z.left&&N<=z.right&&F>=z.top&&F<=z.bottom,Ct=[["font-size",z.right,z.top+z.height/2],["line-height",z.left+z.width/2,z.bottom]];for(let[ie,Jt,Pe]of Ct){let ce=Math.hypot(N-Jt,F-Pe);(pt||ce<12)&&ce<P&&(P=ce,X=ie,H=_)}}X&&H?(xe(H),Tn(X)):(qt&&xe(null),Ae&&Tn(null))}if(J!==ne&&Yt(J),J){let v=Gn(J),M=J.getBoundingClientRect(),X=kr(N,F,M,v);fe(X)}else fe(null);return}if(ct){let{handle:N,originalPoints:F,hasMoved:dt}=ct,D=t.annotations.find(P=>P.id===ct.annotationId);if(!D)return;let J="metaKey"in S,v=J&&(S.metaKey||S.ctrlKey),M=J&&S.shiftKey,X;if(D.type==="line"){let P=F[0],H=F[F.length-1];N==="start"?X=[k,H]:X=[P,k]}else if(D.type==="freehand"){let P=Math.min(...F.map($t=>$t.x)),H=Math.max(...F.map($t=>$t.x)),_=Math.min(...F.map($t=>$t.y)),z=Math.max(...F.map($t=>$t.y)),pt=(P+H)/2,Ct=(_+z)/2,ie=H-P||1,Jt=z-_||1,Pe=ie/Jt,ce=P,gt=H,Et=_,Kt=z;switch(N){case"topLeft":ce=k.x,Et=k.y;break;case"topRight":gt=k.x,Et=k.y;break;case"bottomLeft":ce=k.x,Kt=k.y;break;case"bottomRight":gt=k.x,Kt=k.y;break}if(v)switch(N){case"topLeft":gt=H+(P-ce),Kt=z+(_-Et);break;case"topRight":ce=P-(gt-H),Kt=z+(_-Et);break;case"bottomLeft":gt=H+(P-ce),Et=_-(Kt-z);break;case"bottomRight":ce=P-(gt-H),Et=_-(Kt-z);break}if(M){let $t=gt-ce,pe=Kt-Et;if(Math.abs($t/pe)>Pe){let He=Math.abs(pe)*Pe*Math.sign($t);N==="topLeft"||N==="bottomLeft"?ce=gt-He:gt=ce+He}else{let He=Math.abs($t)/Pe*Math.sign(pe);N==="topLeft"||N==="topRight"?Et=Kt-He:Kt=Et+He}}let Xt=gt-ce||1,re=Kt-Et||1;X=F.map($t=>({x:ce+($t.x-P)/ie*Xt,y:Et+($t.y-_)/Jt*re}))}else if(D.type==="circle"){let P=F[0],H=F[F.length-1],_=Math.min(P.x,H.x),z=Math.max(P.x,H.x),pt=Math.min(P.y,H.y),Ct=Math.max(P.y,H.y),ie=(_+z)/2,Jt=(pt+Ct)/2,Pe=z-_,ce=Ct-pt,gt=_,Et=z,Kt=pt,Xt=Ct;switch(N){case"top":if(Kt=k.y,v&&(Xt=Jt+(Jt-k.y)),M){let $t=(Xt-Kt)*(Pe/ce)/2;gt=ie-$t,Et=ie+$t}break;case"bottom":if(Xt=k.y,v&&(Kt=Jt-(k.y-Jt)),M){let $t=(Xt-Kt)*(Pe/ce)/2;gt=ie-$t,Et=ie+$t}break;case"left":if(gt=k.x,v&&(Et=ie+(ie-k.x)),M){let $t=(Et-gt)*(ce/Pe)/2;Kt=Jt-$t,Xt=Jt+$t}break;case"right":if(Et=k.x,v&&(gt=ie-(k.x-ie)),M){let $t=(Et-gt)*(ce/Pe)/2;Kt=Jt-$t,Xt=Jt+$t}break}X=[{x:gt,y:Kt},{x:Et,y:Xt}]}else{let P=F[0],H=F[F.length-1],_=Math.min(P.x,H.x),z=Math.max(P.x,H.x),pt=Math.min(P.y,H.y),Ct=Math.max(P.y,H.y),ie=(_+z)/2,Jt=(pt+Ct)/2,Pe=z-_||1,ce=Ct-pt||1,gt=Pe/ce,Et=_,Kt=z,Xt=pt,re=Ct;switch(N){case"topLeft":Et=k.x,Xt=k.y;break;case"topRight":Kt=k.x,Xt=k.y;break;case"bottomLeft":Et=k.x,re=k.y;break;case"bottomRight":Kt=k.x,re=k.y;break}if(v)switch(N){case"topLeft":Kt=z+(_-Et),re=Ct+(pt-Xt);break;case"topRight":Et=_-(Kt-z),re=Ct+(pt-Xt);break;case"bottomLeft":Kt=z+(_-Et),Xt=pt-(re-Ct);break;case"bottomRight":Et=_-(Kt-z),Xt=pt-(re-Ct);break}if(M){let $t=Kt-Et,pe=re-Xt;if(Math.abs($t/pe)>gt){let He=Math.abs(pe)*gt*Math.sign($t);N==="topLeft"||N==="bottomLeft"?Et=Kt-He:Kt=Et+He}else{let He=Math.abs($t)/gt*Math.sign(pe);N==="topLeft"||N==="topRight"?Xt=re-He:re=Xt+He}}X=[{x:Et,y:Xt},{x:Kt,y:re}]}e({type:"RESIZE_ANNOTATION",payload:{id:ct.annotationId,points:X,saveUndo:!dt}}),dt||_t(x(m({},ct),{hasMoved:!0}));return}if(rt&&((I=rt.annotation.status)!=null?I:"pending")==="pending"){let N=k.x-rt.startPoint.x,F=k.y-rt.startPoint.y;if((Math.abs(N)>2||Math.abs(F)>2)&&!rt.hasMoved)kt(x(m({},rt),{hasMoved:!0,startPoint:k})),e({type:"MOVE_ANNOTATION",payload:{id:rt.annotation.id,delta:{x:N,y:F},saveUndo:!0}});else if(rt.hasMoved){let D=k.x-rt.startPoint.x,J=k.y-rt.startPoint.y;kt(x(m({},rt),{startPoint:k})),e({type:"MOVE_ANNOTATION",payload:{id:rt.annotation.id,delta:{x:D,y:J}}})}return}!A||!t.isAnnotating||e({type:"CONTINUE_PATH",payload:k})},[A,t.isAnnotating,t.activeTool,rt,ct,Ot,ne,te,ke,j,Ft,se,qt,Ae,_n,e,bn,kr]),Qo=Ie(S=>{var I,N,F,dt,D,J;if(ue.current.isDragging){let v=ue.current,M=v.element;if(M&&v.selector&&v.elementInfo&&oe){M instanceof HTMLElement&&(M.style.removeProperty("font-size"),M.style.removeProperty("line-height"),M.style.removeProperty("transition"));let X=[];if(v.originalFontSize!==oe.fontSize&&(Gt(M,"font-size",`${oe.fontSize}px`),X.push({property:"font-size",original:`${v.originalFontSize}px`,modified:`${oe.fontSize}px`})),v.originalLineHeight!==oe.lineHeight){let P=v.originalFontSize>0?Math.round(v.originalLineHeight/v.originalFontSize*1e3)/1e3:1.2,H=oe.fontSize>0?Math.round(oe.lineHeight/oe.fontSize*1e3)/1e3:1.2;Gt(M,"line-height",`${H}`),X.push({property:"line-height",original:`${P}`,modified:`${H}`})}X.length>0&&e({type:"MODIFY_STYLES_BATCH",payload:{selector:v.selector,durableSelector:(I=v.durableSelector)!=null?I:void 0,element:v.elementInfo,changes:X}})}ue.current={isDragging:!1,property:null,startX:0,startY:0,originalFontSize:0,originalLineHeight:0,originalRatio:1.2,element:null,elementInfo:null,selector:null,durableSelector:null},cn(null);return}if(ee.current.isDragging){let v=ee.current,M=v.element,X="button"in S&&S.button===2;if(!v.hasMoved&&!X&&M&&v.selector&&v.elementInfo){M instanceof HTMLElement&&M.style.removeProperty("transition");let P=["space-between","space-around","stretch","normal"],H=v.originalJustifyContent||"normal",_=P.indexOf(H),z=P[(_+1)%P.length],pt=[];z==="normal"?(Gt(M,"justify-content","normal"),pt.push({property:"justify-content",original:v.originalJustifyContent,modified:"normal"})):z==="stretch"?(Gt(M,"justify-content",z),Gt(M,"row-gap","8px"),Gt(M,"column-gap","8px"),pt.push({property:"justify-content",original:v.originalJustifyContent||"normal",modified:z}),v.originalRow!==8&&pt.push({property:"row-gap",original:`${v.originalRow}px`,modified:"8px"}),v.originalColumn!==8&&pt.push({property:"column-gap",original:`${v.originalColumn}px`,modified:"8px"})):(M instanceof HTMLElement&&(M.style.removeProperty("row-gap"),M.style.removeProperty("column-gap")),Gt(M,"justify-content",z),pt.push({property:"justify-content",original:v.originalJustifyContent||"normal",modified:z}),v.originalRow>0&&pt.push({property:"row-gap",original:`${v.originalRow}px`,modified:"0px"}),v.originalColumn>0&&pt.push({property:"column-gap",original:`${v.originalColumn}px`,modified:"0px"})),pt.length>0&&e({type:"MODIFY_STYLES_BATCH",payload:{selector:v.selector,durableSelector:(N=v.durableSelector)!=null?N:void 0,element:v.elementInfo,changes:pt}})}else if(v.hasMoved&&M&&v.selector&&v.elementInfo&&Zt){M instanceof HTMLElement&&(M.style.removeProperty("row-gap"),M.style.removeProperty("column-gap"),M.style.removeProperty("transition"));let P=[];v.isAuto?(M instanceof HTMLElement&&M.style.removeProperty("justify-content"),Gt(M,"justify-content","normal"),Gt(M,"row-gap",`${Zt.row}px`),Gt(M,"column-gap",`${Zt.column}px`),P.push({property:"justify-content",original:v.originalJustifyContent,modified:"normal"}),P.push({property:"row-gap",original:"0px",modified:`${Zt.row}px`}),P.push({property:"column-gap",original:"0px",modified:`${Zt.column}px`})):(v.originalRow!==Zt.row&&(Gt(M,"row-gap",`${Zt.row}px`),P.push({property:"row-gap",original:`${v.originalRow}px`,modified:`${Zt.row}px`})),v.originalColumn!==Zt.column&&(Gt(M,"column-gap",`${Zt.column}px`),P.push({property:"column-gap",original:`${v.originalColumn}px`,modified:`${Zt.column}px`}))),P.length>0&&e({type:"MODIFY_STYLES_BATCH",payload:{selector:v.selector,durableSelector:(F=v.durableSelector)!=null?F:void 0,element:v.elementInfo,changes:P}})}ee.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},De(null);return}if($e.current.isDragging){let v=$e.current,M=v.element;if(M&&v.selector&&v.elementInfo&&Bt){M instanceof HTMLElement&&(M.style.removeProperty("border-top-left-radius"),M.style.removeProperty("border-top-right-radius"),M.style.removeProperty("border-bottom-right-radius"),M.style.removeProperty("border-bottom-left-radius"),M.style.removeProperty("transition"));let X=["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 _ of X)v.original[_]!==Bt.radius[_]&&(Gt(M,P[_],`${Bt.radius[_]}px`),H.push({property:P[_],original:`${v.original[_]}px`,modified:`${Bt.radius[_]}px`}));H.length>0&&e({type:"MODIFY_STYLES_BATCH",payload:{selector:v.selector,durableSelector:(dt=v.durableSelector)!=null?dt:void 0,element:v.elementInfo,changes:H}})}$e.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},qe(null);return}if(Tt.current.isDragging){let v=Tt.current,M=v.element,X=v.selector,P=v.elementInfo;if(M&&X&&P&&at){let H=v.original,_=at.padding;M instanceof HTMLElement&&(M.style.removeProperty("padding"),M.style.removeProperty("transition"));let z=[],pt=[{prop:"padding-top",origVal:H.top,newVal:_.top},{prop:"padding-right",origVal:H.right,newVal:_.right},{prop:"padding-bottom",origVal:H.bottom,newVal:_.bottom},{prop:"padding-left",origVal:H.left,newVal:_.left}];for(let{prop:Ct,origVal:ie,newVal:Jt}of pt)ie!==Jt&&(Gt(M,Ct,`${Jt}px`),z.push({property:Ct,original:`${ie}px`,modified:`${Jt}px`}));z.length>0&&e({type:"MODIFY_STYLES_BATCH",payload:{selector:X,durableSelector:(D=v.durableSelector)!=null?D:void 0,element:P,changes:z}})}Tt.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},Pt(null);return}if(ct){_t(null);return}if(rt){if(!rt.hasMoved&&rt.annotation.type==="text"&&((J=rt.annotation.status)!=null?J:"pending")==="pending"){let v=_n(S);$({id:rt.annotation.id,point:rt.annotation.points[0],text:rt.annotation.text||"",fontSize:rt.annotation.fontSize||12,isNew:!1,clickPoint:v,groupId:rt.annotation.groupId})}kt(null);return}if(!A)return;let k=5;if(t.currentPath.length>=2){let v=t.currentPath[0],M=t.currentPath[t.currentPath.length-1],X=Math.abs(M.x-v.x),P=Math.abs(M.y-v.y);if((t.activeTool==="line"?Math.sqrt(X*X+P*P)<k:X<k&&P<k)&&["rectangle","circle","line"].includes(t.activeTool)){R(!1),e({type:"CANCEL_PATH"});return}}let tt=oi(t.currentPath);if(t.activeTool==="rectangle"&&t.currentPath.length>=2){let v=t.currentPath[0],M=t.currentPath[t.currentPath.length-1],X=Math.min(v.x,M.x),P=Math.max(v.y,M.y),H=t.strokeWidth/2,_=Math.random().toString(36).substring(2,9);q({point:{x:X-H+4,y:P+H+4},groupId:_}),R(!1),e({type:"FINISH_PATH",payload:{groupId:_,elements:tt}});return}R(!1),e({type:"FINISH_PATH",payload:{elements:tt}})},[A,rt,ct,at,Bt,Zt,oe,_n,e,t.activeTool,t.currentPath,t.strokeWidth]),Ma=Ie(S=>{let k=S.target.value;So.current=S.target.selectionStart,$(tt=>tt&&x(m({},tt),{text:k}))},[]),Ia=Ie(S=>{S.key==="Escape"?$(null):S.key==="Enter"&&!S.shiftKey&&(S.preventDefault(),$n())},[$n]),La=Ie(S=>{if(!h)return;let k=S.clipboardData.items,tt=[];for(let I=0;I<k.length;I++){let N=k[I];if(N.type.startsWith("image/")){let F=N.getAsFile();F&&tt.push(F)}}tt.length>0&&(S.preventDefault(),$(I=>I?x(m({},I),{images:[...I.images||[],...tt]}):null))},[h]),Ra=Ie(S=>{if(t.activeTool!=="hand"||!t.isAnnotating)return;S.preventDefault();let k=ne||Ft||ke||qt;if(k&&!ft(k)){let tt=Ve(k),I=sn(k);e({type:"SELECT_ELEMENT",payload:{el:k,info:x(m({},tt),{selector:I})}})}},[t.activeTool,t.isAnnotating,ne,Ft,ke,qt,e,ft]);Le(()=>{let S=t.annotations.filter(F=>F.linkedSelector);if(S.length===0)return;let k=null,tt=()=>{var dt,D,J;let F=[];for(let v of S){let M=document.querySelector(v.linkedSelector);if(!M&&((D=(dt=v.elements)==null?void 0:dt[0])!=null&&D.selector)&&v.linkedSelector.startsWith("[data-pm=")){try{M=document.querySelector(v.elements[0].selector)}catch(Jt){}if(M){let Jt=(J=v.linkedSelector.match(/data-pm="([^"]+)"/))==null?void 0:J[1];Jt&&M.setAttribute("data-pm",Jt)}}if(!M)continue;let X=M.getBoundingClientRect(),P=t.styleModifications.some(Jt=>{try{return M.matches(Jt.selector)}catch(Pe){return!1}}),H=S.filter(Jt=>Jt.id!==v.id&&Jt.timestamp<v.timestamp&&Jt.linkedSelector===v.linkedSelector).length,_=(P?1:0)+H,z=X.top>=mo*(1+_)?"top-left":"bottom-left",pt=ta(X,z,_),Ct=v.points[0],ie=z!==v.linkedAnchor;Ct&&(ie||Math.abs(pt.x-Ct.x)>1||Math.abs(pt.y-Ct.y)>1)&&F.push({id:v.id,point:pt,linkedAnchor:ie?z:void 0})}F.length>0&&e({type:"UPDATE_LINKED_POSITIONS",payload:{updates:F}})},I=()=>{k&&cancelAnimationFrame(k),k=requestAnimationFrame(tt)};tt(),window.addEventListener("scroll",I,!0),window.addEventListener("resize",I,!0),window.addEventListener("load",I),document.fonts.ready.then(I);let N=new MutationObserver(I);return N.observe(document.body,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["style","class"]}),()=>{window.removeEventListener("scroll",I,!0),window.removeEventListener("resize",I,!0),window.removeEventListener("load",I),N.disconnect(),k&&cancelAnimationFrame(k)}},[t.annotations,e]);let Aa=()=>{var S,k,tt;if(!t.isAnnotating)return"default";if(ct){let{handle:I}=ct;return I==="start"||I==="end"?"move":I==="top"||I==="bottom"?"ns-resize":I==="left"||I==="right"?"ew-resize":I==="topLeft"||I==="bottomRight"?"nwse-resize":"nesw-resize"}if(t.activeTool==="text")return"text";if(t.activeTool==="hand"){let I=(S=Zt==null?void 0:Zt.axis)!=null?S:se;if(I==="row")return"ns-resize";if(I==="column")return"ew-resize";if(Bt||j)return"ns-resize";let N=(k=oe==null?void 0:oe.property)!=null?k:Ae;if(N==="font-size")return"ew-resize";if(N==="line-height")return"ns-resize";let F=(tt=at==null?void 0:at.side)!=null?tt:te;return F==="top"||F==="bottom"?"ns-resize":F==="left"||F==="right"?"ew-resize":"default"}return"crosshair"},Pa={position:"fixed",top:0,left:0,width:"100vw",height:"100vh",zIndex:9998,pointerEvents:t.isAnnotating?"auto":"none",visibility:t.isAnnotating?"visible":"hidden",cursor:Aa()},Tr=Ie(()=>{let S=C.current;if(!S||!h)return{width:100,height:12*1.4};let k=S.getContext("2d");if(!k)return{width:100,height:h.fontSize*1.4};k.font=`${h.fontSize}px ${Ce}`;let I=k.measureText("Type here...").width,N=h.text.split(`
|
|
7
|
-
`),F=N.length>0?Math.max(I,...N.map(D=>k.measureText(D||" ").width)):I,dt=Math.max(1,N.length)*h.fontSize*1.4;return{width:F,height:dt}},[h,C])(),Na=h?{position:"fixed",left:h.point.x-4-Vt.x,top:h.point.y-4-Vt.y,zIndex:9999,width:Tr.width+8,height:Tr.height+8,padding:4,fontSize:h.fontSize,fontFamily:Ce,color:"#ffffff",backgroundColor:t.activeColor,border:"none",borderRadius:0,outline:"none",boxShadow:"none",lineHeight:1.4,resize:"none",overflow:"hidden",whiteSpace:"pre"}:{};return ye(Ke,{children:[ot("canvas",{ref:C,id:"devtools-canvas",style:Pa,onMouseDown:Cr,onMouseMove:Er,onMouseUp:S=>Qo(S),onMouseLeave:S=>Qo(S),onTouchStart:Cr,onTouchMove:Er,onTouchEnd:S=>Qo(S),onContextMenu:Ra}),h&&ye(Ke,{children:[ot("style",{children:"#devtools-text-input::placeholder { color: rgba(255, 255, 255, 0.5); }"}),ot("textarea",{id:"devtools-text-input",ref:U,value:h.text,onChange:Ma,onKeyDown:Ia,onPaste:La,onBlur:$n,placeholder:"Type here...",style:Na}),h.images&&h.images.length>0&&ye("div",{"data-devtools":!0,style:{position:"fixed",left:h.point.x-4-Vt.x,top:h.point.y-4-Vt.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:[h.images.length," image",h.images.length>1?"s":""," attached"]})]}),t.isAnnotating&&t.activeTool!=="hand"&&t.styleModifications.length>0&&ot(As,{styleModifications:t.styleModifications,isInspecting:!!t.inspectedElement,accentColor:t.activeColor,annotationGroupCount:new Set(t.annotations.map(S=>S.groupId||S.id)).size,dispatch:e,inFlightSelectors:i}),t.activeTool==="hand"&&t.isAnnotating&&t.styleModifications.length>0&&ot(Ns,{styleModifications:t.styleModifications,accentColor:t.activeColor}),t.isAnnotating&&ot(dd,{annotations:t.annotations,supersededAnnotations:yn,inFlightIds:n,scrollX:Vt.x,scrollY:Vt.y,annotationGroupMap:no,onViewThread:l,onSelectAnnotation:ut}),t.isAnnotating&&((c==null?void 0:c.status)==="awaiting_approval"||(c==null?void 0:c.status)==="planning")&&c.threadId&&l&&ot(ud,{annotations:t.annotations,supersededAnnotations:yn,scrollX:Vt.x,scrollY:Vt.y,annotationGroupMap:no,planThreadId:c.threadId,taskCount:(Lr=(Ir=c.tasks)==null?void 0:Ir.length)!=null?Lr:0,planStatus:c.status,onViewThread:l,onSelectAnnotation:ut}),t.isAnnotating&&s&&ot(fd,{annotations:t.annotations,supersededAnnotations:yn,scrollX:Vt.x,scrollY:Vt.y,onReply:s,annotationGroupMap:no}),t.isAnnotating&&r&&r.size>0&&ot(ea,{inFlightSelectorColors:r}),t.isAnnotating&&vr&&ot(ea,{inFlightSelectorColors:vr,animated:!1}),t.activeTool==="hand"&&t.isAnnotating&&(Zt?ee.current.element:Ft)&&ot(Ri,{element:Zt?ee.current.element:Ft,gap:Zt?{row:Zt.row,column:Zt.column}:lo(Ft),accentColor:t.activeColor,hoveredAxis:se,draggingAxis:(Rr=Zt==null?void 0:Zt.axis)!=null?Rr:null,cursorViewport:Nt,isAutoGap:de,refreshKey:me}),t.activeTool==="hand"&&t.isAnnotating&&Re&&ot(Zs,{element:Re.target,modifier:Re.modifier,accentColor:t.activeColor,refreshKey:me}),t.activeTool==="hand"&&t.isAnnotating&&!Re&&(Bt?$e.current.element:ke)&&ot(Ts,{element:Bt?$e.current.element:ke,radius:(Ar=Bt==null?void 0:Bt.radius)!=null?Ar:On(ke),accentColor:t.activeColor,hoveredCorner:j,draggingCorner:(Pr=Bt==null?void 0:Bt.corner)!=null?Pr:null,cursorViewport:Nt}),t.activeTool==="hand"&&t.isAnnotating&&!Re&&(oe?ue.current.element:qt)&&ot(qs,{element:oe?ue.current.element:qt,fontSize:(Nr=oe==null?void 0:oe.fontSize)!=null?Nr:co(qt).fontSize,lineHeight:(Br=oe==null?void 0:oe.lineHeight)!=null?Br:co(qt).lineHeight,accentColor:t.activeColor,hoveredProperty:Ae,draggingProperty:(Or=oe==null?void 0:oe.property)!=null?Or:null,cursorViewport:Nt}),t.activeTool==="hand"&&t.isAnnotating&&!Re&&(at?Tt.current.element:ne)&&ot(Fi,{element:at?Tt.current.element:ne,padding:(Fr=at==null?void 0:at.padding)!=null?Fr:Gn(ne),accentColor:t.activeColor,hoveredSide:te,draggingSide:(Dr=at==null?void 0:at.side)!=null?Dr:null,cursorViewport:Nt,refreshKey:oe?oe.fontSize+oe.lineHeight*1e3:0}),t.activeTool==="inspector"&&t.isAnnotating&&ot(Ke,{children:Ot&&!t.inspectedElement&&(()=>{let S=!!B||!!(h!=null&&h.linkedSelector)||t.annotations.some(k=>{if(!k.linkedSelector)return!1;try{return Ot.matches(k.linkedSelector)}catch(tt){return!1}});return ot(Xn,{element:Ot,isSelected:!1,elementInfo:le,color:t.activeColor,hideTooltip:S})})()}),t.activeTool==="model"&&t.isAnnotating&&O.size>0&&[...O.entries()].map(([S,k])=>ot(Xn,{element:k.rootElement,isSelected:!0,elementInfo:{selector:"",tagName:k.rootElement.tagName.toLowerCase(),reactComponent:S},color:"#8b5cf6"},S)),t.activeTool==="model"&&t.isAnnotating&&je&&ot(Xn,{element:je.rootElement,isSelected:!0,elementInfo:{selector:"",tagName:je.rootElement.tagName.toLowerCase(),reactComponent:je.name},color:"#22c55e"}),t.activeTool==="model"&&t.isAnnotating&&Rn.length>0&&Rn.map((S,k)=>ot("div",{style:{position:"absolute",left:S.x,top:S.y,width:S.width,height:S.height,backgroundColor:"rgba(255, 0, 0, 0.08)",pointerEvents:"none",zIndex:9998},children:S.direction==="vertical"?ye(Ke,{children:[ot("div",{style:{position:"absolute",left:"50%",top:0,width:6,height:1,backgroundColor:"#FF0000",transform:"translateX(-50%)"}}),ot("div",{style:{position:"absolute",left:"50%",top:0,bottom:0,width:1,backgroundColor:"#FF0000",transform:"translateX(-50%)"}}),ot("div",{style:{position:"absolute",left:"50%",bottom:0,width:6,height:1,backgroundColor:"#FF0000",transform:"translateX(-50%)"}}),ot("div",{style:{position:"absolute",left:"calc(50% + 6px)",top:S.height<16?-6:"50%",transform:S.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(S.height)})]}):ye(Ke,{children:[ot("div",{style:{position:"absolute",left:0,top:"50%",width:1,height:6,backgroundColor:"#FF0000",transform:"translateY(-50%)"}}),ot("div",{style:{position:"absolute",left:0,right:0,top:"50%",height:1,backgroundColor:"#FF0000",transform:"translateY(-50%)"}}),ot("div",{style:{position:"absolute",right:0,top:"50%",width:1,height:6,backgroundColor:"#FF0000",transform:"translateY(-50%)"}}),ot("div",{style:{position:"absolute",left:S.width<30?0:"50%",top:(S.width<30,void 0),bottom:"calc(50% + 4px)",transform:S.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(S.width)})]})},k)),t.activeTool==="model"&&t.isAnnotating&&st&&ot(Xn,{element:st.rootElement,isSelected:!1,elementInfo:{selector:"",tagName:st.rootElement.tagName.toLowerCase(),reactComponent:st.name},color:f!=null&&f.has(st.name)?"#22c55e":"#8b5cf6"}),t.activeTool==="hand"&&t.isAnnotating&&t.inspectedElement&&ye(Ke,{children:[G&&G!=="padding"&&G!=="gap"&&(()=>{var D;let S=new Set(t.annotations.map(J=>J.groupId||J.id)).size,k=t.inspectedElement.info.selector,tt=t.styleModifications.findIndex(J=>J.selector===k),I=tt>=0?S+tt+1:S+t.styleModifications.length+1,N=t.styleModifications.find(J=>J.selector===k),F=(D=N==null?void 0:N.changes.length)!=null?D:0,dt=!!(N!=null&&N.captured);return ot(Xn,{element:t.inspectedElement.el,isSelected:!0,elementInfo:t.inspectedElement.info,color:dt?"#999999":t.activeColor,annotationNumber:I,changeCount:F})})(),G==="padding"&&ot(Fi,{element:t.inspectedElement.el,padding:Gn(t.inspectedElement.el),accentColor:t.activeColor,hoveredSide:null,draggingSide:null}),G==="gap"&&ot(Ri,{element:t.inspectedElement.el,gap:lo(t.inspectedElement.el),accentColor:t.activeColor,hoveredAxis:null,draggingAxis:null}),ot(Ks,{element:t.inspectedElement.el,elementInfo:t.inspectedElement.info,selector:t.inspectedElement.info.selector,styleModifications:t.styleModifications,dispatch:e,onClose:()=>e({type:"SELECT_ELEMENT",payload:null}),onHover:mt,accentColor:t.activeColor})]})]})}var oa=3,ia=250,Xi=["reviewing","considering","thinking","zhuzhing","iterating","tweaking","reflecting","noodling","pondering","finessing","polishing","riffing"],ra=3e3;function dd({annotations:t,supersededAnnotations:e,inFlightIds:o,scrollX:n,scrollY:i,annotationGroupMap:r,onViewThread:a,onSelectAnnotation:s}){var b,C;let[l,c]=Ut(0),[d,u]=Ut(()=>Math.floor(Math.random()*Xi.length)),p=!!(o&&o.size>0);Le(()=>{if(!p)return;let w=setInterval(()=>{c(A=>(A+1)%oa)},ia),L=setInterval(()=>{u(A=>(A+1)%Xi.length)},ra);return()=>{clearInterval(w),clearInterval(L)}},[p]);let f=[];for(let w of t){if(w.type!=="text"||!w.text||!w.points[0]||e.has(w))continue;let L=w.groupId?t.filter(O=>O.groupId===w.groupId):[w],A=!!(o&&(o.has(w.id)||L.some(O=>o.has(O.id)))),R=(b=w.status)!=null?b:"pending",h=L.some(O=>O.status==="resolved"||O.status==="needs_review"),$=L.some(O=>O.threadId);if(!A&&R!=="resolved"&&R!=="needs_review"&&!h&&!$)continue;let nt=w.threadId||((C=L.find(O=>O.threadId))==null?void 0:C.threadId),Y=R==="needs_review"||L.some(O=>O.status==="needs_review"),K=L.reduce((O,xt)=>{var vt;return O+((vt=xt.replyCount)!=null?vt:0)},0)||1,q=w.points[0],B=w.fontSize||12,Q=B*1.4,U=w.text.split(`
|
|
8
|
-
`),
|
|
9
|
-
`),$=i.get(f.id),nt=$!==void 0?[$+". "+(h[0]||""),...h.slice(1)]:h,K=document.createElement("canvas").getContext("2d");if(!K)continue;K.font=`${A}px ${Ce}`;let q=Math.min(400,Math.max(...nt.map(U=>K.measureText(U).width))),Q=nt.length*R+8;d.push({annotation:f,x:L.x+q+4,y:L.y-4,size:Q,groupNumber:$})}if(d.length===0)return null;let u=s==="planning";return ot(Ke,{children:d.map(({annotation:f,x:g,y:b,size:C})=>u?ot(pd,{x:g-o,y:b-n,size:C,color:f.color,onClick:()=>{c==null||c(f.id),l(r)}},`plan-thinking-${f.id}`):ot("div",{"data-devtools":"badge-hit-area",onClick:()=>{c==null||c(f.id),l(r)},style:{position:"fixed",left:g-o-ln,top:b-n-ln,padding:ln,cursor:"pointer",zIndex:9999,pointerEvents:"auto"},children:ye("div",{"data-devtools":"plan-waiting-badge",style:{height:C,display:"flex",alignItems:"center",backgroundColor:f.color,fontFamily:Ce,fontSize:12,color:"#ffffff",userSelect:"none",padding:`0 ${4}px`,gap:4,whiteSpace:"nowrap"},children:[ye("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[ot("circle",{cx:"12",cy:"12",r:"10"}),ot("path",{d:"M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3"}),ot("line",{x1:"12",y1:"17",x2:"12.01",y2:"17"})]}),ye("span",{style:{opacity:.7},children:[a," task",a!==1?"s":""," \u2014 approve?"]})]})},`plan-waiting-${f.id}`))})}function pd({x:t,y:e,size:o,color:n,onClick:i}){let[r,a]=Ut(0),[s,l]=Ut(()=>Math.floor(Math.random()*Ki.length));return Le(()=>{let c=setInterval(()=>{a(u=>(u+1)%oa)},ia),d=setInterval(()=>{l(u=>(u+1)%Ki.length)},ra);return()=>{clearInterval(c),clearInterval(d)}},[]),ot("div",{"data-devtools":"badge-hit-area",onClick:i,style:{position:"fixed",left:t-ln,top:e-ln,padding:ln,pointerEvents:i?"auto":"none",cursor:i?"pointer":void 0,zIndex:9999},children:ye("div",{"data-devtools":"plan-thinking-badge",style:{height:o,display:"flex",alignItems:"center",backgroundColor:n,fontFamily:Ce,fontSize:12,color:"#ffffff",userSelect:"none",padding:`0 ${4}px`,gap:4,whiteSpace:"nowrap"},children:[ot("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:"currentColor",style:{verticalAlign:"middle"},children:r===1?ye(Ke,{children:[ot("circle",{cx:"7",cy:"7",r:"2"}),ot("circle",{cx:"17",cy:"7",r:"2"}),ot("circle",{cx:"7",cy:"17",r:"2"}),ot("circle",{cx:"17",cy:"17",r:"2"})]}):ye(Ke,{children:[ot("circle",{cx:"12",cy:"6",r:"2"}),ot("circle",{cx:"6",cy:"12",r:"2"}),ot("circle",{cx:"18",cy:"12",r:"2"}),ot("circle",{cx:"12",cy:"18",r:"2"})]})}),ot("span",{style:{opacity:.7},children:Ki[s]})]})})}var Ki=["planning","strategizing","scheming","mapping","scoping","drafting","outlining","architecting"];function ea({inFlightSelectorColors:t,animated:e=!0}){let[o,n]=Ut([]);if(Le(()=>{if(t.size===0){n([]);return}let r=null,a=()=>{let c=[];for(let[d,u]of t){let p=Je(d);if(!p)continue;let f=p.getBoundingClientRect();c.push({selector:d,top:f.top,left:f.left,width:f.width,height:f.height,color:u})}n(c)},s=()=>{r&&cancelAnimationFrame(r),r=requestAnimationFrame(a)};a(),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(),r&&cancelAnimationFrame(r)}},[t]),o.length===0)return null;let i={position:"absolute",width:2,height:2,pointerEvents:"none"};return ye(Ke,{children:[e&&ot("style",{children:"@keyframes popmelt-march { to { stroke-dashoffset: -6; } }"}),o.map(r=>ye("div",{"data-devtools":"marching-ants",style:{position:"fixed",top:r.top,left:r.left,width:r.width,height:r.height,pointerEvents:"none",zIndex:9995,overflow:"visible"},children:[ot("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible"},children:ot("rect",{x:"0.5",y:"0.5",width:Math.max(0,r.width-1),height:Math.max(0,r.height-1),fill:"none",stroke:r.color,strokeWidth:"1",strokeDasharray:"2 4",style:e?{animation:"popmelt-march 0.5s steps(2) infinite"}:void 0})}),ot("div",{style:x(m({},i),{top:-1,left:-1,backgroundColor:r.color})}),ot("div",{style:x(m({},i),{top:-1,right:-1,backgroundColor:r.color})}),ot("div",{style:x(m({},i),{bottom:-1,left:-1,backgroundColor:r.color})}),ot("div",{style:x(m({},i),{bottom:-1,right:-1,backgroundColor:r.color})})]},r.selector))]})}function fd({annotations:t,supersededAnnotations:e,scrollX:o,scrollY:n,onReply:i,annotationGroupMap:r}){let a=t.filter(c=>e.has(c)?!1:c.status==="waiting_input"&&c.question&&c.threadId);if(a.length===0)return null;let s=new Set,l=[];for(let c of a){if(!c.threadId||s.has(c.threadId))continue;s.add(c.threadId);let d=c.type==="text"?c:t.find(u=>u.groupId&&u.groupId===c.groupId&&u.type==="text")||c;if(d.type==="text"&&d.text&&d.points[0]){let u=d.points[0],p=d.fontSize||12,f=p*1.4,g=d.text.split(`
|
|
10
|
-
`),b=r.get(d.id),C=b!==void 0?[b+". "+(g[0]||""),...g.slice(1)]:g,L=document.createElement("canvas").getContext("2d");if(!L)continue;L.font=`${p}px ${Ce}`;let A=Math.min(400,Math.max(...C.map($=>L.measureText($).width))),h=C.length*f+8;l.push({annotation:c,x:u.x+A+4,y:u.y-4,size:h})}}return l.length===0?null:ot(Ke,{children:l.map(({annotation:c,x:d,y:u,size:p})=>ot(gd,{annotation:c,x:d-o,y:u-n,size:p,onReply:i},`question-${c.threadId}`))})}function gd({annotation:t,x:e,y:o,size:n,onReply:i}){let[r,a]=Ut(!1),[s,l]=Ut(""),c=ve(null),d=ve(null);Le(()=>{r&&c.current&&c.current.focus()},[r]),Le(()=>{if(!r)return;let f=b=>{d.current&&!d.current.contains(b.target)&&a(!1)},g=b=>{b.key==="Escape"&&a(!1)};return document.addEventListener("mousedown",f),document.addEventListener("keydown",g),()=>{document.removeEventListener("mousedown",f),document.removeEventListener("keydown",g)}},[r]);let u=Ie(()=>{!s.trim()||!t.threadId||(i(t.threadId,s.trim()),l(""),a(!1))},[s,t.threadId,i]),p=Ie(f=>{f.key==="Enter"&&(f.metaKey||f.ctrlKey)&&(f.preventDefault(),u())},[u]);return ye("div",{ref:d,"data-devtools":"question-badge",style:{position:"fixed",left:r?e:e-ln,top:r?o:o-ln,padding:r?0:ln,zIndex:r?10002:9999,pointerEvents:"auto",cursor:r?void 0:"pointer"},children:[!r&&ye("div",{onClick:()=>a(!0),style:{height:n,display:"flex",alignItems:"center",backgroundColor:t.color,padding:`0 ${4}px`,gap:4,fontFamily:Ce,fontSize:12,color:"#ffffff",whiteSpace:"nowrap"},children:[ye("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",children:[ot("line",{x1:"12",y1:"3",x2:"12",y2:"9"}),ot("line",{x1:"12",y1:"15",x2:"12",y2:"21"}),ot("line",{x1:"3",y1:"12",x2:"9",y2:"12"}),ot("line",{x1:"15",y1:"12",x2:"21",y2:"12"})]}),ot("span",{style:{opacity:.7},children:"reply?"})]}),r&&ye("div",{style:{minWidth:260,maxWidth:360,backgroundColor:"#ffffff",fontFamily:Ce,fontSize:12,color:"#1f2937",border:"1px solid rgba(0, 0, 0, 0.1)"},children:[ot("div",{style:{padding:`${6}px ${8}px`,lineHeight:1.4},children:t.question}),ye("div",{style:{padding:`0 ${4}px ${4}px`},children:[ot("textarea",{ref:c,value:s,onChange:f=>l(f.target.value),onKeyDown:p,placeholder:"Type your reply...",style:{width:"100%",minHeight:40,padding:4,fontSize:12,fontFamily:Ce,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"}}),ot("div",{style:{display:"flex",justifyContent:"flex-end",marginTop:4},children:ot("button",{onClick:u,disabled:!s.trim(),style:{padding:"4px 12px",fontSize:11,fontFamily:Ce,fontWeight:600,backgroundColor:s.trim()?t.color:"rgba(0,0,0,0.1)",color:s.trim()?"#ffffff":"rgba(0,0,0,0.3)",border:"none",cursor:s.trim()?"pointer":"default"},children:"Send \u2318\u23CE"})})]})]})]})}import{useCallback as rn,useEffect as gn,useMemo as er,useRef as Be,useState as ho}from"react";import{Circle as _d,Component as $d,Hand as Wd,MessageCircle as Yd,Pen as jd,Slash as Gd,Square as Vd,Trash2 as Jd,Type as Xd}from"lucide-react";import{useEffect as md,useRef as hd}from"react";function sa(t,e,o,n,i){let r=hd(0);md(()=>{if(!o.current||(localStorage.setItem(i.expanded,String(t)),!t))return;let a=e.annotations.length;(a>=r.current||a===0||!n)&&(localStorage.setItem(i.annotations,JSON.stringify(e.annotations)),r.current=a),localStorage.setItem(i.styleMods,JSON.stringify(e.styleModifications)),localStorage.setItem(i.spacingChanges,JSON.stringify(e.spacingTokenChanges)),localStorage.setItem(i.tool,e.activeTool),localStorage.setItem(i.color,e.activeColor),localStorage.setItem(i.stroke,String(e.strokeWidth)),e.inspectedElement?localStorage.setItem(i.inspected,JSON.stringify({selector:e.inspectedElement.info.selector,info:e.inspectedElement.info})):localStorage.removeItem(i.inspected)},[t,e.annotations,e.styleModifications,e.spacingTokenChanges,e.activeTool,e.activeColor,e.strokeWidth,e.inspectedElement,n,o,i])}import{Component as yd,createElement as bd,useCallback as Ko,useEffect as qn,useRef as Zn,useState as fn}from"react";import{Fragment as Qn,jsx as Wt,jsxs as en}from"react/jsx-runtime";var aa="popmelt-library-tab",xd=/^#[0-9a-fA-F]{3,8}$/,vd=/^(?:rgba?|hsla?|oklch)\([^)]+\)$/,Sd=new Set(["black","white","red","blue","green","yellow","orange","purple","pink","gray","grey","cyan","magenta","brown","navy","teal","maroon","olive","silver","aqua","fuchsia","lime"]),wd=/^-?\d+(\.\d+)?(px|rem|em|%)$/;function la(t){let e=t.trim();return xd.test(e)||vd.test(e)||Sd.has(e.toLowerCase())}function kd(t){return wd.test(t.trim())}function Cd(t){let e=t.trim().match(/^(-?\d+(?:\.\d+)?)px$/);return e?parseFloat(e[1]):null}function qi(t,e=""){if(t==null)return[];if(typeof t!="object")return[[e,String(t)]];if(Array.isArray(t))return[[e,t.map(String).join(", ")]];let o=[];for(let[n,i]of Object.entries(t)){let r=e?`${e}.${n}`:n;if(i!==null&&typeof i=="object"&&!Array.isArray(i)){let a=i;typeof a.value=="string"?o.push([r,a.value]):o.push(...qi(i,r))}else o.push([r,Array.isArray(i)?i.map(String).join(", "):String(i!=null?i:"")])}return o}function Ed(t){return t.length===0?"generic":t.filter(([,n])=>la(n)).length>t.length/2?"colors":t.filter(([,n])=>kd(n)).length>t.length/2?"spacing":"generic"}var Td=x(m({position:"fixed",top:16,right:16,bottom:80,width:300,backgroundColor:"#ffffff"},un),{boxSizing:"content-box",zIndex:10001,display:"flex",flexDirection:"column",overflow:"hidden",fontFamily:"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",fontSize:12,color:"#1f2937",padding:12,pointerEvents:"auto"}),ca={border:"none",background:"none",cursor:"pointer",fontFamily:"inherit",fontSize:11,fontWeight:600,padding:"2px 0",color:"#9ca3af"},Md=x(m({},ca),{color:"#1f2937",borderBottom:"1.5px solid #1f2937"});function Id({entries:t}){let e=[],o=[];for(let n of t)la(n[1])?e.push(n):o.push(n);return en(Qn,{children:[e.length>0&&Wt("div",{style:{display:"flex",flexWrap:"wrap",gap:2,marginBottom:o.length>0?6:0},children:e.map(([n,i])=>Wt("div",{title:`${n.split(".").pop()}: ${i}`,style:{width:28,height:28,backgroundColor:i,outline:"1px solid rgba(0,0,0,0.08)",outlineOffset:-1}},n))}),o.length>0&&Wt(Qi,{entries:o})]})}var Xo=[0,1,2,4,8,12,16,20,24,28,32];function Ld(t){if(t<=32){let e=Xo[0],o=Math.abs(t-e);for(let n=1;n<Xo.length;n++){let i=Math.abs(t-Xo[n]);i<o&&(e=Xo[n],o=i)}return e}return Math.round(t/8)*8}function Rd({label:t,value:e,px:o,tokenPath:n,rawToken:i,onHover:r,onModify:a,onDelete:s}){let[l,c]=fn(!1),[d,u]=fn(null),p=Zn(!1),f=Zn(0),g=Zn(0),b=Zn([]),C=d!==null?d:o,w=d!==null?`${d}px`:e,L=d!==null,A=Ko(h=>{h.preventDefault(),p.current=!0,f.current=h.clientX,g.current=o;let $=Ro(i);b.current=si($);let nt=K=>{let q=K.clientX-f.current,B=Math.max(0,Math.round(g.current+q));K.shiftKey&&(B=Ld(B));for(let Q of b.current)Q.element.style.setProperty(Q.property,B+"px","important");u(B),r==null||r({name:t,px:B,token:$})},Y=()=>{window.removeEventListener("mousemove",nt),window.removeEventListener("mouseup",Y),document.body.style.cursor="",p.current=!1,u(K=>{if(K!==null&&K!==o&&a){let q=Ro(i),B=q.bindings&&q.bindings.length>0,Q;if(B){let St=li(q.bindings,g.current,K);Q=JSON.stringify(x(m({},q),{value:`${K}px`,bindings:St}))}else{let St=as(b.current,g.current),Z=ls(b.current);if(St.length>0){let st=li(St,g.current,K);Q=JSON.stringify({value:`${K}px`,property:Z,bindings:st})}else Q=`${K}px`}let U=typeof i=="string"?i:JSON.stringify(i),It=b.current.map(St=>({selector:sn(St.element),property:St.property})),ht=ds(b.current,g.current,K);a({tokenPath:n,originalValue:U,currentValue:Q,targets:It,originalPx:g.current,currentPx:K},{id:Math.random().toString(36).substring(2,9),tokenPath:n,tokenName:t,originalPx:g.current,newPx:K,affectedElements:ht})}return K})};document.body.style.cursor="ew-resize",window.addEventListener("mousemove",nt),window.addEventListener("mouseup",Y)},[o,t,n,i,r,a]),R=Ro(i);return en("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",fontSize:11,padding:"1px 0",cursor:"ew-resize",userSelect:"none"},onMouseEnter:()=>{p.current||(c(!0),r==null||r({name:t,px:C,token:R}))},onMouseLeave:()=>{p.current||(c(!1),r==null||r(null))},onMouseDown:A,children:[Wt("span",{style:{color:l||L?"#FF0000":"#9ca3af"},children:t}),en("span",{style:{display:"flex",alignItems:"center",gap:4},children:[Wt("span",{style:{color:l||L?"#FF0000":"#6b7280",fontWeight:600},children:w}),s&&l&&!L&&Wt("button",{type:"button",title:"Remove token",onMouseDown:h=>{h.stopPropagation();let $=typeof i=="string"?i:JSON.stringify(i);s(n,$)},style:{border:"none",background:"none",cursor:"pointer",padding:0,fontSize:10,lineHeight:1,color:"#9ca3af"},onMouseEnter:h=>{h.currentTarget.style.color="#FF0000"},onMouseLeave:h=>{h.currentTarget.style.color="#9ca3af"},children:"\u2715"})]})]})}function Ad({entries:t,categoryKey:e,rawTokens:o,onHover:n,onModify:i,onDelete:r}){let a=[],s=[];for(let l of t){let c=Cd(l[1]);c!==null?a.push([l[0],l[1],c]):s.push(l)}return en(Qn,{children:[a.length>0&&Wt("div",{style:{display:"flex",flexDirection:"column",gap:2},children:a.map(([l,c,d])=>{let u=l.split(".").pop(),p=o?Pd(o,l):c,f=p&&typeof p=="object"&&"value"in p?p:c;return Wt(Rd,{label:u,value:c,px:d,tokenPath:`tokens.${e}.${l}`,rawToken:f,onHover:n,onModify:i,onDelete:r},l)})}),s.length>0&&Wt(Qi,{entries:s})]})}function Pd(t,e){let o=e.split("."),n=t;for(let i of o){if(n==null||typeof n!="object")return;n=n[i]}return n}function Qi({entries:t}){return Wt("div",{style:{display:"flex",flexDirection:"column",gap:3},children:t.map(([e,o])=>en("div",{style:{fontSize:11},children:[Wt("div",{style:{color:"#9ca3af",fontSize:10,marginBottom:1},children:e}),Wt("div",{style:{color:"#1f2937",lineHeight:1.4,paddingLeft:8},children:o})]},e))})}function da({entries:t,categoryKey:e,rawTokens:o,onSpacingHover:n,onModifyToken:i,onDeleteToken:r}){let a=Ed(t);return a==="colors"?Wt(Id,{entries:t}):a==="spacing"?Wt(Ad,{entries:t,categoryKey:e,rawTokens:o,onHover:n,onModify:i,onDelete:r}):Wt(Qi,{entries:t})}function Nd(t){let e=t.toLowerCase(),o=null,n=document.createTreeWalker(document.body,NodeFilter.SHOW_ELEMENT,{acceptNode(r){return r.closest("#devtools-toolbar, #devtools-canvas, #devtools-scrim, [data-popmelt-panel]")?NodeFilter.FILTER_REJECT:NodeFilter.FILTER_ACCEPT}}),i=n.currentNode;for(;i=n.nextNode();){let r=i,a=Object.keys(r).find(l=>l.startsWith("__reactFiber$")||l.startsWith("__reactInternalInstance$"));if(!a)continue;let s=r[a];for(;s;){let l=s.type,c=typeof l=="function"||typeof l=="object"?(l==null?void 0:l.displayName)||(l==null?void 0:l.name):null;if(typeof c=="string"){let d=c.toLowerCase();if(d===e){let u=m({},s.memoizedProps);return delete u.ref,{type:l,props:u}}if(!o){if(d.length>=4&&e.includes(d)){let u=m({},s.memoizedProps);delete u.ref,o={type:l,props:u}}else if(e.length>=4&&d.includes(e)){let u=m({},s.memoizedProps);delete u.ref,o={type:l,props:u}}}}s=s.return}}return o}var Zi=class extends yd{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}};function Bd({children:t}){return Wt("div",{style:{fontWeight:700,fontSize:11,color:"#6b7280",letterSpacing:"0.05em",marginBottom:6},children:t})}function Od({tokens:t,onSpacingTokenHover:e,onModifyToken:o,onDeleteToken:n}){return!t||Object.keys(t).length===0?Wt("div",{style:{color:"#9ca3af",fontSize:11},children:"No tokens defined yet."}):Wt(Qn,{children:Object.entries(t).map(([i,r])=>en("div",{style:{marginBottom:14},children:[Wt(Bd,{children:i}),Wt(da,{entries:qi(r),categoryKey:i,rawTokens:r,onSpacingHover:e,onModifyToken:o,onDeleteToken:n})]},i))})}function Fd({rules:t}){return!t||t.length===0?Wt("div",{style:{color:"#9ca3af",fontSize:11},children:"No rules defined yet."}):Wt(Qn,{children:t.map((e,o)=>en("div",{style:{display:"flex",gap:6,marginBottom:4,lineHeight:1.4,fontSize:11},children:[en("span",{style:{color:"#9ca3af",flexShrink:0},children:[o+1,"."]}),Wt("span",{children:e})]},o))})}function Dd({name:t,value:e,selected:o,highlighted:n,onRemove:i,onHover:r}){var K;let[a,s]=fn(!1),[l,c]=fn(!1),d=Zn(null),u=Zn(0),[p,f]=fn(0),[g,b]=fn(0),C=qi(e),w=(K=C.find(([q])=>q==="description"))==null?void 0:K[1];qn(()=>{if(!l&&!n){f(0),b(0),u.current=0;return}let q=jn(t);f(q.length)},[l,n,t]),qn(()=>{o&&d.current&&d.current.scrollIntoView({behavior:"smooth",block:"nearest"})},[o]);let L=o||n||l,A=o?"139,92,246":"34,197,94",R=o?"#8b5cf6":"#22c55e",h=L?`rgba(${A},0.06)`:void 0,$=L?`inset 0 0 0 1.5px rgba(${A},0.35)`:void 0,nt=n||l,Y=Ko(()=>{let q=jn(t);if(q.length===0)return;let B=u.current%q.length;q[B].rootElement.scrollIntoView({behavior:"smooth",block:"center"}),b(B),u.current=B+1,r==null||r({name:t,instanceIndex:B})},[t,r]);return en("div",{ref:d,onClick:Y,onMouseEnter:()=>{c(!0),r==null||r({name:t,instanceIndex:0})},onMouseLeave:()=>{c(!1),r==null||r(null)},style:{marginBottom:8,background:h,padding:6,boxShadow:$,cursor:"pointer"},children:[en("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between"},children:[en("div",{style:{display:"flex",alignItems:"center",gap:6,marginBottom:6},children:[Wt("div",{style:{fontWeight:700,fontSize:11,letterSpacing:"0.05em",padding:"2px 6px",backgroundColor:nt?R:"transparent",color:nt?"#fff":"#6b7280"},children:t}),nt&&p>1&&en("span",{style:{fontSize:10,fontWeight:600,color:"#9ca3af"},children:[g+1,"/",p]})]}),i&&l&&Wt("button",{type:"button",title:"Remove from model",onClick:q=>{q.stopPropagation(),i(t)},style:{border:"none",background:"none",cursor:"pointer",padding:"0 2px",fontSize:14,lineHeight:1,color:"#9ca3af",marginTop:-4},onMouseEnter:q=>{q.currentTarget.style.color="#FF0000"},onMouseLeave:q=>{q.currentTarget.style.color="#9ca3af"},children:"\u2715"})]}),w&&Wt("div",{style:{fontSize:11,color:nt?"#1f2937":"#9ca3af",marginBottom:6,lineHeight:1.4},children:w}),a?Wt(da,{entries:C.filter(([q])=>q!=="description"),categoryKey:""}):Wt(Hd,{name:t,onNotFound:()=>s(!0),entries:C})]})}function Hd({name:t,onNotFound:e}){let[o,n]=fn(null),[i,r]=fn(!1);return qn(()=>{let a=Nd(t);a||e(),n(a),r(!0)},[t,e]),!i||!o?null:Wt(Zi,{onError:e,children:Wt("div",{"data-popmelt-panel":!0,onClick:a=>{a.preventDefault(),a.stopPropagation()},style:{width:"100%",overflowY:"auto",overflowX:"hidden",maxHeight:150,padding:"1rem",outline:"1px solid rgba(0,0,0,0.06)",backgroundColor:"rgb(250,250,250)",boxSizing:"border-box",marginBottom:4,display:"flex",flexDirection:"column",justifyContent:"stretch",alignItems:"center"},children:Wt("div",{style:{zoom:.5},children:bd(o.type,o.props)})})})}function zd({components:t,selectedComponent:e,hoveredComponent:o,onRemove:n,onHover:i}){if(!t||Object.keys(t).length===0)return Wt("div",{style:{color:"#9ca3af",fontSize:11},children:"No component patterns defined yet."});let r=new Set(Object.keys(t)),a=ii(r),s=Object.entries(t).sort(([l],[c])=>{var d,u;return((d=a.get(l))!=null?d:1/0)-((u=a.get(c))!=null?u:1/0)});return Wt(Qn,{children:s.map(([l,c])=>Wt(Dd,{name:l,value:c,selected:e===l,highlighted:o===l,onRemove:n,onHover:i},l))})}function ua({bridgeUrl:t,modelRefreshKey:e,onMouseEnter:o,onMouseLeave:n,selectedComponent:i,hoveredComponent:r,onComponentHover:a,onSpacingTokenHover:s,onModifySpacingToken:l,onDeleteSpacingToken:c,onComponentAdded:d,onComponentRemoved:u}){let[p,f]=fn(void 0),[g,b]=fn(!0),[C,w]=fn(()=>{try{let B=localStorage.getItem(aa);if(B==="tokens"||B==="components"||B==="rules")return B}catch(B){}return"components"});qn(()=>{Wn(t).then(B=>{f(B),b(!1)})},[t,e]),qn(()=>{try{localStorage.setItem(aa,C)}catch(B){}},[C]),qn(()=>{i&&(w("components"),Wn(t).then(B=>{B&&f(B)}))},[i,t]);let L=Ko((B,Q)=>{f(U=>{if(!(U!=null&&U.tokens))return U;let It=JSON.parse(JSON.stringify(U.tokens)),ht=B.split("."),St=It;for(let Z=1;Z<ht.length-1;Z++)if(St=St[ht[Z]],!St)return U;return delete St[ht[ht.length-1]],x(m({},U),{tokens:It})}),c==null||c(B,Q)},[c]),A=Ko(B=>{f(Q=>{if(!(Q!=null&&Q.components))return Q;let ht=Q.components,{[B]:U}=ht,It=To(ht,[Eo(B)]);return x(m({},Q),{components:It})}),u==null||u(B)},[u]),R=p==null?void 0:p.tokens,h=p==null?void 0:p.components,$=p==null?void 0:p.rules,nt=R&&Object.keys(R).length>0,Y=h&&Object.keys(h).length>0,K=$&&$.length>0,q=!p||!nt&&!Y&&!K;return en("div",{style:Td,onMouseEnter:o,onMouseLeave:n,children:[en("div",{style:{display:"flex",alignItems:"center",gap:6,fontWeight:700,fontSize:13,marginBottom:6},children:[Wt("span",{children:"Model"}),Wt("code",{style:{fontSize:10,fontWeight:500,backgroundColor:"rgba(0,0,0,0.06)",padding:"1px 4px",color:"#6b7280"},children:"M"})]}),Wt("div",{style:{display:"flex",gap:12,marginBottom:10,borderBottom:"1px solid rgba(0,0,0,0.08)",paddingBottom:6},children:["components","rules"].map(B=>Wt("button",{type:"button",style:C===B?Md:ca,onClick:()=>w(B),children:B.charAt(0).toUpperCase()+B.slice(1)},B))}),Wt("div",{style:{flex:1,overflowY:"auto",minHeight:0},children:g?Wt("div",{style:{color:"#9ca3af",fontSize:11},children:"Loading..."}):q?Wt("div",{style:{color:"#9ca3af",lineHeight:1.5},children:"No design model yet. Pattern-scoped annotations will build one automatically."}):en(Qn,{children:[C==="components"&&Wt(zd,{components:h,selectedComponent:i,hoveredComponent:r,onRemove:A,onHover:a}),C==="tokens"&&Wt(Od,{tokens:R,onSpacingTokenHover:s,onModifyToken:l,onDeleteToken:c?L:void 0}),C==="rules"&&Wt(Fd,{rules:$})]})})]})}import{jsx as pa}from"react/jsx-runtime";var Cn={iconDefault:"#1f2937",iconActive:"#1f2937",bgActive:"#f3f4f6",bgHover:"#f9fafb",separator:"#e5e7eb"};function En({children:t,active:e,siblingActive:o,disabled:n,onClick:i,title:r}){let a=()=>n?.4:o&&!e?.5:1,s={position:"relative",display:"flex",alignItems:"center",justifyContent:"center",width:32,height:32,borderRadius:0,border:"none",cursor:n?"default":"pointer",transition:"background-color 150ms ease, color 150ms ease, transform 100ms ease, opacity 150ms ease",backgroundColor:e?Cn.bgActive:"transparent",color:e?Cn.iconActive:Cn.iconDefault,opacity:a()};return pa("button",{type:"button",onClick:n?void 0:i,title:r,disabled:n,style:s,onMouseEnter:l=>{n||(l.currentTarget.style.opacity="1",e||(l.currentTarget.style.backgroundColor=Cn.bgHover))},onMouseLeave:l=>{n||(l.currentTarget.style.opacity=String(a()),e||(l.currentTarget.style.backgroundColor="transparent"))},onMouseDown:l=>{n||(l.currentTarget.style.transform="scale(0.95)")},onMouseUp:l=>{n||(l.currentTarget.style.transform="scale(1)")},children:t})}function tr(){return pa("div",{style:{width:1,height:20,backgroundColor:"rgba(0, 0, 0, 0.05)",margin:"0 8px"}})}import{Fragment as Hn,jsx as it,jsxs as be}from"react/jsx-runtime";var zn=[{type:"rectangle",icon:Vd,label:"Rectangle",shortcut:"R"},{type:"circle",icon:_d,label:"Oval",shortcut:"O"},{type:"line",icon:Gd,label:"Line",shortcut:"L"},{type:"freehand",icon:jd,label:"Pen",shortcut:"P"}],Kd=new Set(zn.map(t=>t.type));function Ud(t,e,o,n,i,r,a,s){let l=(t-i)*(n-r)-(o-i)*(e-r),c=(t-a)*(r-s)-(i-a)*(e-s),d=(t-o)*(s-n)-(a-o)*(e-n),u=l<0||c<0||d<0,p=l>0||c>0||d>0;return!(u&&p)}function Zd(){let t=window.innerWidth-16,e=t-326,o=window.innerHeight-80;return{left:e,right:t,y:o}}var qd=[{type:"text",icon:Xd,label:"Text",shortcut:"T"}],fa={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 gl=Object.defineProperty,ml=Object.defineProperties;var hl=Object.getOwnPropertyDescriptors;var Yo=Object.getOwnPropertySymbols;var fs=Object.prototype.hasOwnProperty,gs=Object.prototype.propertyIsEnumerable;var ps=(t,e,o)=>e in t?gl(t,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[e]=o,m=(t,e)=>{for(var o in e||(e={}))fs.call(e,o)&&ps(t,o,e[o]);if(Yo)for(var o of Yo(e))gs.call(e,o)&&ps(t,o,e[o]);return t},b=(t,e)=>ml(t,hl(e));var jo=t=>typeof t=="symbol"?t:t+"",Fn=(t,e)=>{var o={};for(var n in t)fs.call(t,n)&&e.indexOf(n)<0&&(o[n]=t[n]);if(t!=null&&Yo)for(var n of Yo(t))e.indexOf(n)<0&&gs.call(t,n)&&(o[n]=t[n]);return o};import{createContext as dp,useCallback as Ne,useContext as up,useEffect as Me,useMemo as Co,useRef as tn,useState as Je}from"react";import{useCallback as Vo,useEffect as yl,useRef as Ts,useState as bl}from"react";var sn="http://localhost:1111";async function ms(t=sn){try{let e=await fetch(`${t}/capabilities`);return e.ok?await e.json():null}catch(e){return null}}async function Go(t=sn){try{let e=new AbortController,o=setTimeout(()=>e.abort(),2e3),n=await fetch(`${t}/status`,{signal:e.signal});return clearTimeout(o),n.ok?await n.json():null}catch(e){return null}}async function hs(t,e,o=sn,n,r,i,a){let s=new FormData;if(s.append("screenshot",t,"screenshot.png"),s.append("feedback",e),n&&s.append("color",n),r&&s.append("provider",r),i&&s.append("model",i),a)for(let[l,d]of a)for(let p=0;p<d.length;p++)s.append(`image-${l}-${p}`,d[p],`image-${l}-${p}.png`);let c=await fetch(`${o}/send`,{method:"POST",body:s});if(!c.ok){let l=await c.text();throw new Error(`Bridge returned ${c.status}: ${l}`)}return c.json()}async function ys(t,e,o=sn,n,r,i,a,s,c){let l=new FormData;l.append("screenshot",t,"screenshot.png"),l.append("goal",e),i&&l.append("pageUrl",i),a&&l.append("viewport",JSON.stringify(a)),n&&l.append("provider",n),r&&l.append("model",r),s&&l.append("manifest",JSON.stringify(s)),c&&l.append("feedback",c);let d=await fetch(`${o}/plan`,{method:"POST",body:l});if(!d.ok){let p=await d.text();throw new Error(`Bridge returned ${d.status}: ${p}`)}return d.json()}async function bs(t,e=sn,o){let n=await fetch(`${e}/plan/approve`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({planId:t,approvedTaskIds:o})});if(!n.ok){let r=await n.text();throw new Error(`Bridge returned ${n.status}: ${r}`)}return n.json()}async function xs(t,e,o=sn,n,r){let i=new FormData;i.append("screenshot",e,"screenshot.png"),i.append("planId",t),n&&i.append("provider",n),r&&i.append("model",r);let a=await fetch(`${o}/plan/review`,{method:"POST",body:i});if(!a.ok){let s=await a.text();throw new Error(`Bridge returned ${a.status}: ${s}`)}return a.json()}async function vs(t,e,o,n=sn,r,i){let a=new FormData;a.append("screenshot",t,"screenshot.png"),a.append("planId",e),a.append("tasks",JSON.stringify(o)),r&&a.append("provider",r),i&&a.append("model",i);let s=await fetch(`${n}/plan/execute`,{method:"POST",body:a});if(!s.ok){let c=await s.text();throw new Error(`Bridge returned ${s.status}: ${c}`)}return s.json()}async function Ss(t=sn,e){try{let o=await fetch(`${t}/mcp/install`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(e?{serverUrl:e}:{})});return o.ok?await o.json():null}catch(o){return null}}async function ws(t,e=sn){let o=await fetch(`${e}/model/component`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({name:t})});if(!o.ok){let n=await o.text();throw new Error(`Bridge returned ${o.status}: ${n}`)}return o.json()}async function ks(t,e=sn){let o=await fetch(`${e}/model/component`,{method:"DELETE",headers:{"Content-Type":"application/json"},body:JSON.stringify({name:t})});if(!o.ok){let n=await o.text();throw new Error(`Bridge returned ${o.status}: ${n}`)}return o.json()}async function Sr(t,e,o=sn){let n=await fetch(`${o}/model/token`,{method:"PATCH",headers:{"Content-Type":"application/json"},body:JSON.stringify({path:t,value:e})});if(!n.ok){let r=await n.text();throw new Error(`Bridge returned ${n.status}: ${r}`)}return n.json()}async function Cs(t,e=sn){let o=await fetch(`${e}/model/token`,{method:"DELETE",headers:{"Content-Type":"application/json"},body:JSON.stringify({path:t})});if(!o.ok){let n=await o.text();throw new Error(`Bridge returned ${o.status}: ${n}`)}return o.json()}async function oo(t=sn){var e;try{let o=await fetch(`${t}/model`);return o.ok&&(e=(await o.json()).model)!=null?e:null}catch(o){return null}}async function Es(t,e,o=sn,n,r,i,a){let s;if(a&&a.length>0){let c=new FormData,l=new Blob([new Uint8Array([137,80,78,71,13,10,26,10,0,0,0,13,73,72,68,82,0,0,0,1,0,0,0,1,8,6,0,0,0,31,21,196,137,0,0,0,10,73,68,65,84,120,156,98,0,0,0,2,0,1,229,39,222,252,0,0,0,0,73,69,78,68,174,66,96,130])],{type:"image/png"});c.append("screenshot",l,"screenshot.png"),c.append("feedback",JSON.stringify({threadId:t,reply:e,color:n,provider:r,model:i}));for(let d=0;d<a.length;d++)c.append(`image-reply-${d}`,a[d],`reply-image-${d}.png`);s=await fetch(`${o}/reply`,{method:"POST",body:c})}else s=await fetch(`${o}/reply`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({threadId:t,reply:e,color:n,provider:r,model:i})});if(!s.ok){let c=await s.text();throw new Error(`Bridge returned ${s.status}: ${c}`)}return s.json()}function Ms(t="http://localhost:1111"){let[e,o]=bl({isConnected:!1,status:"disconnected",jobResponses:{},jobThinking:{},activeJobIds:[],currentResponse:"",currentThinking:"",events:[],activeJobId:null,lastCompletedJobId:null,lastResponseText:null,lastThreadId:null,pendingQuestions:[],pendingPlans:[],planReviews:[],incrementalResolutions:[]}),n=Ts(null),r=Ts(null),i=Vo(()=>{n.current&&(n.current.close(),n.current=null);let l=new EventSource(`${t}/events`);n.current=l,l.addEventListener("connected",()=>{Go(t).then(d=>{var f;let p=(f=d==null?void 0:d.activeJobs)!=null?f:d!=null&&d.activeJob?[d.activeJob]:[],u=p.length>0;o(g=>b(m({},g),{isConnected:!0,status:u?"streaming":"idle",activeJobId:u?p[p.length-1].id:g.activeJobId,activeJobIds:p.map(h=>h.id)}))})}),l.addEventListener("job_started",d=>{let p=JSON.parse(d.data),u=p.jobId;o(f=>b(m({},f),{status:"streaming",activeJobId:u,activeJobIds:[...f.activeJobIds,u],jobResponses:b(m({},f.jobResponses),{[u]:""}),jobThinking:b(m({},f.jobThinking),{[u]:""}),currentResponse:"",currentThinking:"",lastResponseText:null,lastThreadId:null,events:[...f.events,{type:"job_started",data:p,timestamp:Date.now()}]}))}),l.addEventListener("delta",d=>{let p=JSON.parse(d.data),u=p.jobId,f=p.text||"";o(g=>b(m({},g),{jobResponses:u?b(m({},g.jobResponses),{[u]:(g.jobResponses[u]||"")+f}):g.jobResponses,currentResponse:!u||u===g.activeJobId?g.currentResponse+f:g.currentResponse}))}),l.addEventListener("thinking",d=>{let p=JSON.parse(d.data),u=p.jobId,f=p.text||"";o(g=>b(m({},g),{jobThinking:u?b(m({},g.jobThinking),{[u]:(g.jobThinking[u]||"")+f}):g.jobThinking,currentThinking:!u||u===g.activeJobId?g.currentThinking+f:g.currentThinking}))}),l.addEventListener("tool_use",d=>{let p=JSON.parse(d.data);o(u=>b(m({},u),{events:[...u.events,{type:"tool_use",data:p,timestamp:Date.now()}]}))}),l.addEventListener("done",d=>{let p=JSON.parse(d.data),u=p.jobId;o(f=>{var R;let g=u?f.activeJobIds.filter(A=>A!==u):f.activeJobIds,h=m({},f.jobResponses),S=m({},f.jobThinking),x=u?h[u]:void 0;u&&(delete h[u],delete S[u]);let L=u===f.activeJobId?g.length>0?g[g.length-1]:null:f.activeJobId;return b(m(b(m({},f),{activeJobIds:g,activeJobId:L,jobResponses:h,jobThinking:S,lastCompletedJobId:u!=null?u:f.activeJobId,lastResponseText:x||f.currentResponse||p.responseText||null,lastThreadId:(R=p.threadId)!=null?R:null}),u===f.activeJobId?{currentResponse:L&&h[L]||"",currentThinking:L&&S[L]||""}:{}),{events:[...f.events,{type:"done",data:p,timestamp:Date.now()}]})})}),l.addEventListener("question",d=>{let p=JSON.parse(d.data);o(u=>b(m({},u),{pendingQuestions:[...u.pendingQuestions,{jobId:p.jobId,threadId:p.threadId,question:p.question,annotationIds:p.annotationIds,timestamp:Date.now()}],events:[...u.events,{type:"question",data:p,timestamp:Date.now()}]}))}),l.addEventListener("plan_ready",d=>{let p=JSON.parse(d.data);o(u=>b(m({},u),{pendingPlans:[...u.pendingPlans,{jobId:p.jobId,planId:p.planId,tasks:p.tasks,threadId:p.threadId,timestamp:Date.now()}],events:[...u.events,{type:"plan_ready",data:p,timestamp:Date.now()}]}))}),l.addEventListener("plan_review",d=>{let p=JSON.parse(d.data);o(u=>b(m({},u),{planReviews:[...u.planReviews,{planId:p.planId,verdict:p.verdict,summary:p.summary,issues:p.issues,timestamp:Date.now()}],events:[...u.events,{type:"plan_review",data:p,timestamp:Date.now()}]}))}),l.addEventListener("task_resolved",d=>{var f;let p=JSON.parse(d.data),u=(f=p.resolutions)!=null?f:[];o(g=>b(m({},g),{incrementalResolutions:[...g.incrementalResolutions,...u],events:[...g.events,{type:"task_resolved",data:p,timestamp:Date.now()}]}))}),l.addEventListener("queue_drained",()=>{o(d=>b(m({},d),{status:d.status==="error"?"error":"idle",activeJobId:null,activeJobIds:[],currentResponse:"",currentThinking:"",jobResponses:{},jobThinking:{},incrementalResolutions:[]}))}),l.addEventListener("error",d=>{var p;if(l.readyState===EventSource.CLOSED)o(u=>b(m({},u),{isConnected:!1,status:"disconnected"})),r.current=setTimeout(()=>{Go(t).then(u=>{u&&i()})},5e3);else if(d instanceof MessageEvent){let u=JSON.parse(d.data),f=(p=u.jobId)!=null?p:null;o(g=>{let h=f?g.activeJobIds.filter(x=>x!==f):g.activeJobIds,S=h.length>0?g.status:"error";return b(m({},g),{status:S,activeJobIds:h,lastCompletedJobId:f!=null?f:g.activeJobId,events:[...g.events,{type:"error",data:u,timestamp:Date.now()}]})})}}),l.onerror=()=>{l.readyState===EventSource.CLOSED&&o(d=>b(m({},d),{isConnected:!1,status:"disconnected"}))}},[t]);yl(()=>(Go(t).then(l=>{l&&i()}),()=>{n.current&&(n.current.close(),n.current=null),r.current&&clearTimeout(r.current)}),[t,i]);let a=Vo(()=>{o(l=>b(m({},l),{events:[],currentResponse:"",currentThinking:"",jobResponses:{},jobThinking:{},lastResponseText:null,lastThreadId:null,incrementalResolutions:[]}))},[]),s=Vo(l=>{o(d=>b(m({},d),{pendingQuestions:d.pendingQuestions.filter(p=>p.threadId!==l)}))},[]),c=Vo(l=>{o(d=>b(m({},d),{pendingPlans:d.pendingPlans.filter(p=>p.planId!==l)}))},[]);return b(m({},e),{clearEvents:a,dismissQuestion:s,dismissPlan:c})}import{useEffect as xl,useReducer as vl}from"react";var Sl={isAnnotating:!1,activeTool:"inspector",activeColor:"#ff0000",strokeWidth:3,annotations:[],undoStack:[],redoStack:[],currentPath:[],selectedAnnotationIds:[],lastSelectedId:null,inspectedElement:null,styleModifications:[],spacingTokenChanges:[],spacingTokenMods:[]};function ro(){return Math.random().toString(36).substring(2,9)}function Is(t){return t.status?t:t.captured?b(m({},t),{status:"in_flight"}):b(m({},t),{status:"pending"})}function qe(t){return b(m({},t),{undoStack:[...t.undoStack,{annotations:t.annotations,styleModifications:t.styleModifications,spacingTokenMods:t.spacingTokenMods}],redoStack:[]})}function wl(t,e){return b(m({},t),{isAnnotating:e})}function kl(t,e){return b(m({},t),{activeTool:e,inspectedElement:null})}function Cl(t,e){return b(m({},t),{activeColor:e})}function El(t,e){return b(m({},t),{strokeWidth:e})}function Tl(t,e){return b(m({},t),{currentPath:[e]})}function Ml(t,e){return b(m({},t),{currentPath:[...t.currentPath,e]})}function Il(t){return b(m({},t),{currentPath:[]})}function Ll(t,e){if(t.currentPath.length<2&&t.activeTool!=="text")return b(m({},t),{currentPath:[]});let o={id:ro(),type:t.activeTool,points:t.currentPath,color:t.activeColor,strokeWidth:t.strokeWidth,timestamp:Date.now(),status:"pending",groupId:e==null?void 0:e.groupId,elements:e==null?void 0:e.elements},n=qe(t);return b(m({},n),{annotations:[...t.annotations,o],currentPath:[]})}function Rl(t,e){var r;let o=m({id:(r=e.id)!=null?r:ro(),type:"text",points:[e.point],text:e.text,fontSize:e.fontSize||12,color:t.activeColor,strokeWidth:t.strokeWidth,timestamp:Date.now(),status:"pending",groupId:e.groupId,linkedSelector:e.linkedSelector,linkedAnchor:e.linkedAnchor,elements:e.elements},e.imageCount?{imageCount:e.imageCount}:{}),n=e.groupId?t:qe(t);return b(m({},n),{annotations:[...t.annotations,o]})}function Al(t,e){let o=qe(t);return b(m({},o),{annotations:t.annotations.map(n=>n.id===e.id?m(b(m({},n),{text:e.text}),e.imageCount!=null?{imageCount:e.imageCount}:{}):n)})}function Pl(t,e){return b(m({},t),{annotations:t.annotations.map(o=>o.id===e.id?b(m({},o),{fontSize:Math.max(12,Math.min(72,e.fontSize))}):o)})}function Nl(t,e){let o=qe(t),n=t.annotations.find(i=>i.id===e.id),r=n==null?void 0:n.groupId;return b(m({},o),{annotations:t.annotations.filter(i=>i.id!==e.id&&!(r&&i.groupId===r))})}function Bl(t,e){let o=e.saveUndo?qe(t):t,n=t.annotations.find(i=>i.id===e.id),r=n==null?void 0:n.groupId;return b(m({},o),{annotations:t.annotations.map(i=>{if(!(i.id===e.id||r&&i.groupId===r))return i;let s=e.delta.x,c=e.delta.y;return b(m({},i),{points:i.points.map(l=>({x:l.x+s,y:l.y+c}))})})})}function Dl(t,e){let o=e.saveUndo?qe(t):t,n=t.annotations.find(a=>a.id===e.id);if(!n||n.type==="text"||n.points.length<2)return t;let r=0,i=0;if(n.type==="rectangle"&&n.groupId){let a=e.points,s=Math.min(a[0].x,a[1].x),c=Math.max(a[0].y,a[1].y),l=n.points[0],d=n.points[n.points.length-1],p=Math.min(l.x,d.x),u=Math.max(l.y,d.y);r=s-p,i=c-u}return b(m({},o),{annotations:t.annotations.map(a=>a.id===e.id?b(m({},a),{points:e.points}):n.groupId&&a.groupId===n.groupId&&a.type==="text"?b(m({},a),{points:a.points.map(s=>({x:s.x+r,y:s.y+i}))}):a)})}function Fl(t,e){let o=qe(t);return b(m({},o),{annotations:[...t.annotations,...e.annotations.map(Is)]})}function Ol(t,e){let o=new Set,n=[];for(let r of e.annotations)o.has(r.id)||(o.add(r.id),n.push(Is(r)));return b(m({},t),{annotations:n})}function Hl(t){if(t.undoStack.length===0)return t;let e=t.undoStack[t.undoStack.length-1];return b(m({},t),{annotations:(e==null?void 0:e.annotations)||[],styleModifications:(e==null?void 0:e.styleModifications)||[],spacingTokenMods:(e==null?void 0:e.spacingTokenMods)||[],undoStack:t.undoStack.slice(0,-1),redoStack:[...t.redoStack,{annotations:t.annotations,styleModifications:t.styleModifications,spacingTokenMods:t.spacingTokenMods}]})}function zl(t){if(t.redoStack.length===0)return t;let e=t.redoStack[t.redoStack.length-1];return b(m({},t),{annotations:(e==null?void 0:e.annotations)||[],styleModifications:(e==null?void 0:e.styleModifications)||[],spacingTokenMods:(e==null?void 0:e.spacingTokenMods)||[],redoStack:t.redoStack.slice(0,-1),undoStack:[...t.undoStack,{annotations:t.annotations,styleModifications:t.styleModifications,spacingTokenMods:t.spacingTokenMods}]})}function _l(t,e){let{id:o,addToSelection:n}=e;if(o===null)return b(m({},t),{selectedAnnotationIds:[],lastSelectedId:null});if(n)if(t.selectedAnnotationIds.includes(o)){let i=t.selectedAnnotationIds.filter(a=>a!==o);return b(m({},t),{selectedAnnotationIds:i,lastSelectedId:i.length>0?i[i.length-1]:null})}else return b(m({},t),{selectedAnnotationIds:[...t.selectedAnnotationIds,o],lastSelectedId:o});return b(m({},t),{selectedAnnotationIds:[o],lastSelectedId:o})}function $l(t,e){let o=new Set;for(let n of t.selectedAnnotationIds){let r=t.annotations.find(i=>i.id===n);r!=null&&r.groupId&&o.add(r.groupId)}return b(m({},t),{annotations:t.annotations.map(n=>{let r=t.selectedAnnotationIds.includes(n.id),i=n.groupId&&o.has(n.groupId);return!r&&!i?n:b(m({},n),{color:e.color})})})}function Wl(t){return b(m({},t),{annotations:t.annotations.map(e=>b(m({},e),{captured:!0,status:e.status==="pending"||!e.status?"in_flight":e.status})),styleModifications:t.styleModifications.map(e=>b(m({},e),{captured:!0})),spacingTokenChanges:t.spacingTokenChanges.map(e=>b(m({},e),{captured:!0}))})}function Yl(t){return b(m({},t),{annotations:[],undoStack:[],redoStack:[],currentPath:[],selectedAnnotationIds:[],lastSelectedId:null,spacingTokenChanges:[],spacingTokenMods:[]})}function jl(t,e){return b(m({},t),{inspectedElement:e})}function Gl(t,e){let{selector:o,element:n,property:r,original:i,modified:a}=e,s=t.styleModifications.findIndex(c=>c.selector===o);if(i===a&&s<0)return t;if(s>=0){let c=t.styleModifications[s];if(c.captured){let f=qe(t),g=f.styleModifications.map((h,S)=>S===s?b(m({},h),{changes:[{property:r,original:i,modified:a}],captured:!1}):h);return b(m({},f),{styleModifications:g})}let l=c.changes.findIndex(f=>f.property===r),d,p=t;if(l>=0){let f=c.changes[l];a===f.original?d=c.changes.filter((g,h)=>h!==l):d=c.changes.map((g,h)=>h===l?b(m({},g),{modified:a}):g)}else{if(i===a)return t;p=qe(t),d=[...c.changes,{property:r,original:i,modified:a}]}if(d.length===0)return b(m({},p),{styleModifications:p.styleModifications.filter((f,g)=>g!==s)});let u=p.styleModifications.map((f,g)=>g===s?b(m({},f),{changes:d}):f);return b(m({},p),{styleModifications:u})}else{let c=qe(t),l={selector:o,element:n,changes:[{property:r,original:i,modified:a}]};return b(m({},c),{styleModifications:[...c.styleModifications,l]})}}function Vl(t,e){let{selector:o,durableSelector:n,element:r,changes:i}=e,a=i.filter(l=>l.original!==l.modified);if(a.length===0)return t;let s=qe(t),c=s.styleModifications.findIndex(l=>l.selector===o);if(c>=0){let l=s.styleModifications[c],d=l.captured?[]:[...l.changes];for(let p of a){let u=d.findIndex(f=>f.property===p.property);u>=0?p.modified===d[u].original?d=d.filter((f,g)=>g!==u):d=d.map((f,g)=>g===u?b(m({},f),{modified:p.modified}):f):d.push(p)}return d.length===0?b(m({},s),{styleModifications:s.styleModifications.filter((p,u)=>u!==c)}):b(m({},s),{styleModifications:s.styleModifications.map((p,u)=>u===c?b(m({},p),{changes:d,captured:!1}):p)})}else return b(m({},s),{styleModifications:[...s.styleModifications,{selector:o,durableSelector:n,element:r,changes:a}]})}function Xl(t,e){let{selector:o,property:n}=e,r=qe(t),i=r.styleModifications.map(a=>a.selector!==o?a:b(m({},a),{changes:a.changes.filter(s=>s.property!==n)})).filter(a=>a.changes.length>0);return b(m({},r),{styleModifications:i})}function Jl(t){if(t.styleModifications.length===0)return b(m({},t),{inspectedElement:null});let e=qe(t);return b(m({},e),{styleModifications:[],inspectedElement:null})}function Kl(t,e){return b(m({},t),{styleModifications:e})}function Ul(t,e){let{updates:o}=e,n=new Map(o.map(r=>[r.id,r]));return b(m({},t),{annotations:t.annotations.map(r=>{let i=n.get(r.id);return i?m(b(m({},r),{points:[i.point,...r.points.slice(1)]}),i.linkedAnchor?{linkedAnchor:i.linkedAnchor}:{}):r})})}function Zl(t,e){let o=new Set(e.ids);return b(m({},t),{annotations:t.annotations.map(n=>o.has(n.id)?b(m({},n),{status:e.status}):n)})}function ql(t,e){let o=new Set(e.ids),n=new Set;for(let r of t.annotations)o.has(r.id)&&r.groupId&&n.add(r.groupId);return b(m({},t),{annotations:t.annotations.map(r=>o.has(r.id)||r.groupId&&n.has(r.groupId)?b(m({},r),{threadId:e.threadId}):r)})}function Ql(t,e){let o=new Set(e.ids),n=new Set;for(let r of t.annotations)o.has(r.id)&&r.groupId&&n.add(r.groupId);return b(m({},t),{annotations:t.annotations.map(r=>o.has(r.id)||r.groupId&&n.has(r.groupId)?b(m({},r),{status:"waiting_input",question:e.question,threadId:e.threadId}):r)})}function tc(t,e){let o=new Map(e.resolutions.map(r=>[r.annotationId,r])),n=new Map;for(let r of t.annotations){let i=o.get(r.id);i&&r.groupId&&n.set(r.groupId,i)}return b(m({},t),{annotations:t.annotations.map(r=>{var a,s,c;let i=o.get(r.id)||(r.groupId?n.get(r.groupId):void 0);return i?b(m({},r),{status:i.status,resolutionSummary:i.summary,scope:(s=(a=i.finalScope)!=null?a:i.inferredScope)!=null?s:null,replyCount:((c=r.replyCount)!=null?c:0)+1,question:void 0,threadId:r.threadId||e.threadId}):r})})}function ec(t,e){let{groupId:o,planId:n,planTaskId:r,instruction:i,region:a,color:s,linkedSelector:c,elements:l}=e,d=i.length>60?i.slice(0,60).replace(/\s+\S*$/,"")+"\u2026":i,p={id:ro(),type:"rectangle",points:[{x:a.x,y:a.y},{x:a.x+a.width,y:a.y+a.height}],color:s,strokeWidth:2,timestamp:Date.now(),groupId:o,linkedSelector:c,elements:l,planId:n,planTaskId:r,status:"pending"},u={id:ro(),type:"text",points:[{x:a.x,y:a.y+a.height+4}],text:d,fontSize:12,color:s,strokeWidth:2,timestamp:Date.now(),status:"pending",groupId:o,linkedSelector:c,elements:l,planId:n,planTaskId:r};return b(m({},t),{annotations:[...t.annotations,p,u]})}function nc(t,e){let{linkedSelectors:o,styleSelectors:n}=e,r=new Set(o),i=new Set(n),a=new Set,s=new Set;for(let u of t.annotations)u.linkedSelector&&r.has(u.linkedSelector)&&(a.add(u.id),u.groupId&&s.add(u.groupId));for(let u of t.annotations)u.groupId&&s.has(u.groupId)&&a.add(u.id);let c=t.annotations.filter(u=>!a.has(u.id)),l=t.styleModifications.filter(u=>!i.has(u.selector));if(c.length===t.annotations.length&&l.length===t.styleModifications.length)return t;let d=t.selectedAnnotationIds.filter(u=>!a.has(u)),p=t.inspectedElement&&i.has(t.inspectedElement.info.selector)?null:t.inspectedElement;return b(m({},t),{annotations:c,styleModifications:l,selectedAnnotationIds:d,lastSelectedId:d.length>0?d[d.length-1]:null,inspectedElement:p})}function oc(t,e){let o=t.spacingTokenChanges.findIndex(n=>n.tokenPath===e.tokenPath);return o>=0?b(m({},t),{spacingTokenChanges:t.spacingTokenChanges.map((n,r)=>r===o?e:n)}):b(m({},t),{spacingTokenChanges:[...t.spacingTokenChanges,e]})}function rc(t,e){return b(m({},t),{spacingTokenChanges:e})}function ic(t,e){let o=qe(t),n=t.spacingTokenMods.findIndex(i=>i.tokenPath===e.tokenPath),r;if(n>=0){let i=t.spacingTokenMods[n],a=b(m({},e),{originalValue:i.originalValue,originalPx:i.originalPx});r=t.spacingTokenMods.map((s,c)=>c===n?a:s)}else r=[...t.spacingTokenMods,e];return b(m({},o),{spacingTokenMods:r})}function sc(t,e){let o=qe(t),n=t.spacingTokenMods.findIndex(c=>c.tokenPath===e.tokenPath),r=n>=0?t.spacingTokenMods[n].originalValue:e.originalValue,i=n>=0?t.spacingTokenMods[n].originalPx:parseFloat(e.originalValue)||0,a={tokenPath:e.tokenPath,originalValue:r,currentValue:"__deleted__",targets:n>=0?t.spacingTokenMods[n].targets:[],originalPx:i,currentPx:0},s;return n>=0?s=t.spacingTokenMods.map((c,l)=>l===n?a:c):s=[...t.spacingTokenMods,a],b(m({},o),{spacingTokenMods:s})}var ac={SET_ANNOTATING:wl,SET_TOOL:kl,SET_COLOR:Cl,SET_STROKE_WIDTH:El,START_PATH:Tl,CONTINUE_PATH:Ml,CANCEL_PATH:Il,FINISH_PATH:Ll,ADD_TEXT:Rl,UPDATE_TEXT:Al,UPDATE_TEXT_SIZE:Pl,DELETE_ANNOTATION:Nl,MOVE_ANNOTATION:Bl,RESIZE_ANNOTATION:Dl,PASTE_ANNOTATIONS:Fl,RESTORE_ANNOTATIONS:Ol,UNDO:Hl,REDO:zl,SELECT_ANNOTATION:_l,UPDATE_ANNOTATION_COLOR:$l,MARK_CAPTURED:Wl,CLEAR:Yl,SELECT_ELEMENT:jl,MODIFY_STYLE:Gl,MODIFY_STYLES_BATCH:Vl,CLEAR_STYLE:Xl,CLEAR_ALL_STYLES:Jl,RESTORE_STYLE_MODIFICATIONS:Kl,UPDATE_LINKED_POSITIONS:Ul,CLEANUP_ORPHANED:nc,SET_ANNOTATION_STATUS:Zl,SET_ANNOTATION_THREAD:ql,SET_ANNOTATION_QUESTION:Ql,APPLY_RESOLUTIONS:tc,ADD_PLAN_ANNOTATION:ec,ADD_SPACING_TOKEN_CHANGE:oc,RESTORE_SPACING_TOKEN_CHANGES:rc,MODIFY_SPACING_TOKEN:ic,DELETE_SPACING_TOKEN:sc};function lc(t,e){let o=ac[e.type];return o?o(t,e.payload):t}function Ls(){let[t,e]=vl(lc,Sl);return xl(()=>{let o=n=>{(n.metaKey||n.ctrlKey)&&n.key==="z"&&(n.preventDefault(),n.shiftKey?e({type:"REDO"}):e({type:"UNDO"}))};return window.addEventListener("keydown",o),()=>window.removeEventListener("keydown",o)},[]),[t,e]}function jn(t){let e=Object.keys(t).find(r=>r.startsWith("__reactFiber$")||r.startsWith("__reactInternalInstance$"));if(!e)return null;let o=t[e],n=[];for(;o;){let r=o.type,i=(r==null?void 0:r.displayName)||(r==null?void 0:r.name);i&&typeof i=="string"&&/^[A-Z]/.test(i)&&!i.startsWith("_")&&i!=="Fragment"&&n.unshift(i),o=o.return}return n.length>0?{name:n[n.length-1],path:n}:null}function wr(t){let e=Object.keys(t).find(r=>r.startsWith("__reactFiber$")||r.startsWith("__reactInternalInstance$"));if(!e)return[];let o=t[e],n=[];for(;o;){let r=o.type,i=typeof r=="function"||typeof r=="object"?(r==null?void 0:r.displayName)||(r==null?void 0:r.name):null;i&&typeof i=="string"&&/^[A-Z]/.test(i)&&!i.startsWith("_")&&i!=="Fragment"&&n.push({name:i,fiber:o}),o=o.return}return n.reverse(),n}function Xo(t){let e=t,o=new Set;for(;e&&!o.has(e);){if(o.add(e),e.stateNode instanceof Element)return e.stateNode;e.child?e=e.child:e=null}return null}function Rs(t){if(t.id)return`#${t.id}`;let e=t.tagName.toLowerCase(),o=Array.from(t.classList).slice(0,3).join(".");return o?`${e}.${o}`:e}function cn(t){if(t.id&&!t.id.startsWith("radix-")&&!t.id.startsWith(":"))return`#${CSS.escape(t.id)}`;let e=[],o=t;for(;o&&o!==document.documentElement;){let n=o.tagName.toLowerCase();if(o.id&&!o.id.startsWith("radix-")&&!o.id.startsWith(":")){e.unshift(`#${CSS.escape(o.id)}`);break}let r=Array.from(o.classList).filter(a=>!a.startsWith("_")&&a.length<30).slice(0,2);r.length>0&&(n+="."+r.map(a=>CSS.escape(a)).join("."));let i=o.parentElement;if(i){let a=Array.from(i.children).filter(s=>s.tagName===o.tagName);if(a.length>1){let s=a.indexOf(o)+1;n+=`:nth-of-type(${s})`}}e.unshift(n),o=i}return e.join(" > ")}function Ve(t){try{return document.querySelector(t)}catch(e){return null}}function Jo(t,e=0){var c;let o=wr(t);if(o.length===0)return null;let n=o.map(l=>l.name),r=o.length-1,i=Math.max(0,Math.min(o.length-1,r-e)),a=o[i],s=(c=Xo(a.fiber))!=null?c:t;return{name:a.name,path:n,depthIndex:i,rootElement:s}}function As(t,e){var i,a;let o=wr(t),n=e.toLowerCase(),r=-1;for(let s=o.length-1;s>=0;s--){let c=o[s].name;if(c===e){let l=(i=Xo(o[s].fiber))!=null?i:t;return{name:e,path:o.map(d=>d.name),depthIndex:s,rootElement:l}}if(r===-1){let l=c.toLowerCase();(l.length>=4&&n.includes(l)||n.length>=4&&l.includes(n))&&(r=s)}}if(r>=0){let s=(a=Xo(o[r].fiber))!=null?a:t;return{name:e,path:o.map(c=>c.name),depthIndex:r,rootElement:s}}return null}function io(t){let e=so(),o=[],n=new Set,r=e.currentNode;for(;r=e.nextNode();){let i=As(r,t);i&&!n.has(i.rootElement)&&(n.add(i.rootElement),o.push(i))}return o}function kr(t){let e=new Map;if(t.size===0)return e;let o=new Set(t),n=so(),r=new Set,i=n.currentNode;for(;(i=n.nextNode())&&o.size>0;)for(let a of o){let s=As(i,a);if(!s||r.has(s.rootElement))continue;r.add(s.rootElement);let c=s.rootElement.getBoundingClientRect();e.set(a,c.top+window.scrollY),o.delete(a);break}for(let a of o)e.set(a,1/0);return e}function so(){return document.createTreeWalker(document.body,NodeFilter.SHOW_ELEMENT,{acceptNode(t){return t.closest("#devtools-toolbar, #devtools-canvas, #devtools-scrim, [data-popmelt-panel]")?NodeFilter.FILTER_REJECT:NodeFilter.FILTER_ACCEPT}})}function Xe(t){let e={selector:Rs(t),tagName:t.tagName.toLowerCase()};t.id&&(e.id=t.id),t.classList.length>0&&(e.className=Array.from(t.classList).join(" "));let o=To(t);o&&o.length>0&&o.length<200&&(e.textContent=o);let n={};for(let a of t.attributes)a.name.startsWith("data-")&&(n[a.name]=a.value);Object.keys(n).length>0&&(e.dataAttributes=n);let r=jn(t);r&&(e.reactComponent=r.name);let i=cc(t);return i&&(e.context=i),e}function To(t){let e="";for(let o of t.childNodes)o.nodeType===Node.TEXT_NODE&&(e+=o.textContent||"");return e.trim()}function On(t,e){let o=document.elementsFromPoint(t,e);for(let n of o)if(n instanceof HTMLElement&&!(n.id==="devtools-canvas"||n.id==="devtools-toolbar"||n.id==="devtools-scrim")&&!n.closest("#devtools-toolbar")&&!(n.dataset.devtools||n.closest("[data-devtools]"))&&!["html","body"].includes(n.tagName.toLowerCase()))return n;return null}function cc(t){let e=t.parentElement,o=["section","article","nav","aside","header","footer","main"];for(;e&&e!==document.body;){let n=e.tagName.toLowerCase();if(o.includes(n)&&e.id)return`${n}#${e.id}`;if(e.id&&!e.id.startsWith("radix-")&&!e.id.startsWith(":"))return`${n}#${e.id}`;e=e.parentElement}return null}function Ps(t){let e=new Set,o=[],n=window.scrollX,r=window.scrollY,i=[{x:(t.minX+t.maxX)/2,y:(t.minY+t.maxY)/2},{x:t.minX,y:t.minY},{x:t.maxX,y:t.minY},{x:t.minX,y:t.maxY},{x:t.maxX,y:t.maxY}];for(let a of i){let s=a.x-n,c=a.y-r;if(s<0||c<0||s>window.innerWidth||c>window.innerHeight)continue;let l=On(s,c);l&&!e.has(l)&&(e.add(l),o.push(Xe(l)))}return o.slice(0,3)}function Cr(t){if(t.length===0)return[];let e=t.map(n=>n.x),o=t.map(n=>n.y);return Ps({minX:Math.min(...e),minY:Math.min(...o),maxX:Math.max(...e),maxY:Math.max(...o)})}function Er(t){let e=t.x+t.width/2,o=t.y+t.height/2,n=e-window.scrollX,r=o-window.scrollY,i=On(n,r);if(!i||!(i instanceof HTMLElement))return null;if(!i.hasAttribute("data-pm")){let d=Math.random().toString(36).substring(2,9);i.setAttribute("data-pm",d)}let s=`[data-pm="${i.getAttribute("data-pm")}"]`,c=Xe(i),l=i.getBoundingClientRect();return{selector:s,info:c,rect:l}}function Re(t,e){return t.style.getPropertyValue(e)!==""}function dc(t,e=30){if(t<=0)return[];let o=[],n=so(),r=.5,i=n.currentNode;for(;(i=n.nextNode())&&o.length<e;){let a=i,s=a.getBoundingClientRect();if(s.bottom<-50||s.top>window.innerHeight+50||s.right<-50||s.left>window.innerWidth+50||s.width<1||s.height<1)continue;let c=getComputedStyle(a);!Re(a,"padding-top")&&Math.abs((parseFloat(c.paddingTop)||0)-t)<r&&o.push({element:a,property:"padding-top"}),!Re(a,"padding-bottom")&&Math.abs((parseFloat(c.paddingBottom)||0)-t)<r&&o.length<e&&o.push({element:a,property:"padding-bottom"}),!Re(a,"padding-left")&&Math.abs((parseFloat(c.paddingLeft)||0)-t)<r&&o.length<e&&o.push({element:a,property:"padding-left"}),!Re(a,"padding-right")&&Math.abs((parseFloat(c.paddingRight)||0)-t)<r&&o.length<e&&o.push({element:a,property:"padding-right"}),!Re(a,"margin-top")&&Math.abs((parseFloat(c.marginTop)||0)-t)<r&&o.length<e&&o.push({element:a,property:"margin-top"}),!Re(a,"margin-bottom")&&Math.abs((parseFloat(c.marginBottom)||0)-t)<r&&o.length<e&&o.push({element:a,property:"margin-bottom"}),!Re(a,"margin-left")&&Math.abs((parseFloat(c.marginLeft)||0)-t)<r&&o.length<e&&o.push({element:a,property:"margin-left"}),!Re(a,"margin-right")&&Math.abs((parseFloat(c.marginRight)||0)-t)<r&&o.length<e&&o.push({element:a,property:"margin-right"});let l=c.display;if((l.includes("flex")||l.includes("grid"))&&o.length<e){let d=Re(a,"gap"),p=parseFloat(c.gap)||0,u=parseFloat(c.rowGap)||0,f=parseFloat(c.columnGap)||0;!d&&Math.abs(p-t)<r?o.push({element:a,property:"gap"}):!Re(a,"row-gap")&&Math.abs(u-t)<r?o.push({element:a,property:"row-gap"}):!Re(a,"column-gap")&&Math.abs(f-t)<r&&o.push({element:a,property:"column-gap"})}}return o}function Tr(t,e=30){if(t<=0)return[];let o=[],n=so(),r=.5,i=n.currentNode;for(;(i=n.nextNode())&&o.length<e;){let a=i,s=a.getBoundingClientRect();if(s.bottom<-50||s.top>window.innerHeight+50||s.right<-50||s.left>window.innerWidth+50||s.width<1||s.height<1)continue;let c=getComputedStyle(a),l=parseFloat(c.borderTopWidth)||0,d=parseFloat(c.borderRightWidth)||0,p=parseFloat(c.borderBottomWidth)||0,u=parseFloat(c.borderLeftWidth)||0,f=a.clientWidth,g=a.clientHeight,h=parseFloat(c.paddingTop)||0;!Re(a,"padding-top")&&Math.abs(h-t)<r&&o.push({x:s.left+u,y:s.top+l,width:f,height:t,direction:"vertical",property:"padding-top"});let S=parseFloat(c.paddingBottom)||0;!Re(a,"padding-bottom")&&Math.abs(S-t)<r&&o.length<e&&o.push({x:s.left+u,y:s.top+l+g-t,width:f,height:t,direction:"vertical",property:"padding-bottom"});let x=parseFloat(c.paddingLeft)||0;!Re(a,"padding-left")&&Math.abs(x-t)<r&&o.length<e&&o.push({x:s.left+u,y:s.top+l,width:t,height:g,direction:"horizontal",property:"padding-left"});let L=parseFloat(c.paddingRight)||0;!Re(a,"padding-right")&&Math.abs(L-t)<r&&o.length<e&&o.push({x:s.left+u+f-t,y:s.top+l,width:t,height:g,direction:"horizontal",property:"padding-right"});let R=parseFloat(c.marginTop)||0;!Re(a,"margin-top")&&Math.abs(R-t)<r&&o.length<e&&o.push({x:s.left,y:s.top-t,width:s.width,height:t,direction:"vertical",property:"margin-top"});let A=parseFloat(c.marginBottom)||0;!Re(a,"margin-bottom")&&Math.abs(A-t)<r&&o.length<e&&o.push({x:s.left,y:s.bottom,width:s.width,height:t,direction:"vertical",property:"margin-bottom"});let T=parseFloat(c.marginLeft)||0;!Re(a,"margin-left")&&Math.abs(T-t)<r&&o.length<e&&o.push({x:s.left-t,y:s.top,width:t,height:s.height,direction:"horizontal",property:"margin-left"});let C=parseFloat(c.marginRight)||0;!Re(a,"margin-right")&&Math.abs(C-t)<r&&o.length<e&&o.push({x:s.right,y:s.top,width:t,height:s.height,direction:"horizontal",property:"margin-right"});let Z=c.display;if((Z.includes("flex")||Z.includes("grid"))&&o.length<e&&!Re(a,"gap")){let q=Array.from(a.children).filter(tt=>{let B=getComputedStyle(tt);return B.display!=="none"&&B.position!=="absolute"&&B.position!=="fixed"});if(q.length>=2)for(let tt=0;tt<q.length-1&&o.length<e;tt++){let B=q[tt].getBoundingClientRect(),V=q[tt+1].getBoundingClientRect(),Q=V.top-B.bottom;Math.abs(Q-t)<r&&Q>.5&&o.push({x:Math.min(B.left,V.left),y:B.bottom,width:Math.max(B.right,V.right)-Math.min(B.left,V.left),height:Q,direction:"vertical",property:"gap"});let Mt=V.left-B.right;Math.abs(Mt-t)<r&&Mt>.5&&o.push({x:B.right,y:Math.min(B.top,V.top),width:Mt,height:Math.max(B.bottom,V.bottom)-Math.min(B.top,V.top),direction:"horizontal",property:"gap"})}}}return o}function Ko(t){return typeof t=="string"?{value:t}:t}var Bs={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 Ns(t,e){let o=Bs[e];return o?o.includes(t):!1}function uc(t,e){let o=t.split(/\s+/);for(let n of o){if(n===e)return!0;let r=n.lastIndexOf(":");if(r>=0&&n.slice(r+1)===e)return!0}return!1}function pc(t){var s,c;let e=t.lastIndexOf(":"),o=e>=0?t.slice(e+1):t,n=o.indexOf("-");if(n<0)return null;let r=o.slice(0,n),i={gap:"gap","gap-x":"column-gap","gap-y":"row-gap",p:"padding",pt:"padding-top",pb:"padding-bottom",pl:"padding-left",pr:"padding-right",px:"padding-left",py:"padding-top",m:"margin",mt:"margin-top",mb:"margin-bottom",ml:"margin-left",mr:"margin-right",mx:"margin-left",my:"margin-top"},a=o.slice(0,o.indexOf("-",n+1)>0?o.indexOf("-",n+1):n);return(c=(s=i[a])!=null?s:i[r])!=null?c:null}function Mr(t,e=30){let o=parseFloat(t.value);if(isNaN(o)||o<=0)return[];if(t.bindings&&t.bindings.length>0){let r=[],i=so(),a=i.currentNode;for(;(a=i.nextNode())&&r.length<e;){let s=a,c=s.getBoundingClientRect();if(c.bottom<-50||c.top>window.innerHeight+50||c.right<-50||c.left>window.innerWidth+50||c.width<1||c.height<1)continue;let l=s.className;if(typeof l=="string")for(let d of t.bindings){if(!uc(l,d))continue;let p=pc(d);if(p&&!(t.property&&!Ns(p,t.property))){r.push({element:s,property:p});break}}}return r}let n=dc(o,e*2);return t.property?n.filter(r=>Ns(r.property,t.property)).slice(0,e):n.slice(0,e)}function Ir(t,e=30){let o=Mr(t,e),n=[];for(let r of o){let i=r.element,a=i.getBoundingClientRect(),s=getComputedStyle(i),c=parseFloat(s.borderTopWidth)||0,l=parseFloat(s.borderRightWidth)||0,d=parseFloat(s.borderLeftWidth)||0,p=i.clientWidth,u=i.clientHeight;switch(r.property){case"padding-top":{let f=parseFloat(s.paddingTop)||0;n.push({x:a.left+d,y:a.top+c,width:p,height:f,direction:"vertical",property:r.property});break}case"padding-bottom":{let f=parseFloat(s.paddingBottom)||0;n.push({x:a.left+d,y:a.top+c+u-f,width:p,height:f,direction:"vertical",property:r.property});break}case"padding-left":{let f=parseFloat(s.paddingLeft)||0;n.push({x:a.left+d,y:a.top+c,width:f,height:u,direction:"horizontal",property:r.property});break}case"padding-right":{let f=parseFloat(s.paddingRight)||0;n.push({x:a.left+d+p-f,y:a.top+c,width:f,height:u,direction:"horizontal",property:r.property});break}case"margin-top":{let f=parseFloat(s.marginTop)||0;n.push({x:a.left,y:a.top-f,width:a.width,height:f,direction:"vertical",property:r.property});break}case"margin-bottom":{let f=parseFloat(s.marginBottom)||0;n.push({x:a.left,y:a.bottom,width:a.width,height:f,direction:"vertical",property:r.property});break}case"margin-left":{let f=parseFloat(s.marginLeft)||0;n.push({x:a.left-f,y:a.top,width:f,height:a.height,direction:"horizontal",property:r.property});break}case"margin-right":{let f=parseFloat(s.marginRight)||0;n.push({x:a.right,y:a.top,width:f,height:a.height,direction:"horizontal",property:r.property});break}case"gap":case"row-gap":case"column-gap":{let f=Array.from(i.children).filter(g=>{let h=getComputedStyle(g);return h.display!=="none"&&h.position!=="absolute"&&h.position!=="fixed"});for(let g=0;g<f.length-1&&n.length<e;g++){let h=f[g].getBoundingClientRect(),S=f[g+1].getBoundingClientRect(),x=S.top-h.bottom;x>.5&&n.push({x:Math.min(h.left,S.left),y:h.bottom,width:Math.max(h.right,S.right)-Math.min(h.left,S.left),height:x,direction:"vertical",property:"gap"});let L=S.left-h.right;L>.5&&n.push({x:h.right,y:Math.min(h.top,S.top),width:L,height:Math.max(h.bottom,S.bottom)-Math.min(h.top,S.top),direction:"horizontal",property:"gap"})}break}}}return n}function Ds(t,e){let o=new Set,n=Mo(e);for(let r of t){let i=Os[r.property];if(!i)continue;let a=r.element.className;if(typeof a=="string")for(let s of i){let c=`${s}-${n}`;for(let l of a.split(/\s+/)){let d=l.lastIndexOf(":"),p=d>=0?l.slice(d+1):l;if(p===c){o.add(p);break}}}}return[...o]}function Fs(t){let e=new Set;for(let o of t)for(let[n,r]of Object.entries(Bs))if(r.includes(o.property)){e.add(n);break}if(e.size===1)return[...e][0]}function Lr(t,e,o){if(e===o)return t;let n=Mo(e),r=Mo(o);return t.map(i=>{let a=i.lastIndexOf("-");if(a<0)return i;let s=i.slice(0,a),c=i.slice(a+1);return c===n||c===`[${e}px]`?`${s}-${r}`:i})}var fc={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 Mo(t){var e;return(e=fc[t])!=null?e:`[${t}px]`}var Os={"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 gc(t,e,o,n){let r=Os[e];if(!r)return null;let i=Mo(o);for(let a of r){let s=new RegExp("(?:^|\\s)((?:[\\w-]+:)*"+a+"-(?:"+mc(i)+"|\\["+o+"px\\]))(?:\\s|$)"),c=t.match(s);if(c!=null&&c[1]){let l=Mo(n),d=c[1].lastIndexOf(":"),p=d>=0?c[1].slice(0,d+1):"";return{matched:c[1],suggested:`${p}${a}-${l}`}}}return null}function mc(t){return t.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function Hs(t,e,o){let n=new Set,r=[];for(let i of t){let a=cn(i.element),s=`${a}::${i.property}`;if(n.has(s))continue;n.add(s);let c=jn(i.element),l=i.element.className||"",d=gc(l,i.property,e,o);r.push({selector:a,reactComponent:c==null?void 0:c.name,className:l,property:i.property,matchedClass:d==null?void 0:d.matched,suggestedClass:d==null?void 0:d.suggested})}return r}function Io(t,e){return window.getComputedStyle(t).getPropertyValue(e)}function Rr(t,e){if(t instanceof HTMLElement){let n=t.style.getPropertyValue(e);if(n)return n}let o=hc(t,e);return o&&o.includes("var(")?o:Io(t,e)}function hc(t,e){let o=e.replace(/-([a-z])/g,(n,r)=>r.toUpperCase());try{for(let n of document.styleSheets)try{let r=n.cssRules||n.rules;for(let i of r)if(i instanceof CSSStyleRule&&t.matches(i.selectorText)){let a=i.style.getPropertyValue(e);if(a&&a.includes("var("))return a;let s=i.style[o];if(s&&s.includes("var("))return s}}catch(r){}}catch(n){}return null}function Uo(t,e){if(t instanceof HTMLElement){let n=t.style.getPropertyValue(e);if(n)return n}let o=e.replace(/-([a-z])/g,(n,r)=>r.toUpperCase());try{for(let n of document.styleSheets)try{let r=n.cssRules||n.rules;for(let i of r)if(i instanceof CSSStyleRule&&t.matches(i.selectorText)){let a=i.style.getPropertyValue(e);if(a)return a;let s=i.style[o];if(s)return s}}catch(r){}}catch(n){}return null}function Zo(t){let e=window.getComputedStyle(t).display;return e==="flex"||e==="inline-flex"||e==="grid"||e==="inline-grid"}function Lo(t){let e=window.getComputedStyle(t);return{row:parseFloat(e.rowGap)||0,column:parseFloat(e.columnGap)||0}}function yc(t){let e=[];for(let o of t){let n=e.find(r=>r.axis!==o.axis?!1:o.axis==="row"?Math.abs(r.y-o.y)<2&&Math.abs(r.h-o.h)<2:Math.abs(r.x-o.x)<2&&Math.abs(r.w-o.w)<2);if(n)if(o.axis==="row"){let r=Math.min(n.x,o.x),i=Math.max(n.x+n.w,o.x+o.w);n.x=r,n.w=i-r}else{let r=Math.min(n.y,o.y),i=Math.max(n.y+n.h,o.y+o.h);n.y=r,n.h=i-r}else e.push(m({},o))}return e}function Gn(t){let e=Array.from(t.children).filter(c=>{if(!(c instanceof HTMLElement))return!1;let l=window.getComputedStyle(c);return l.display!=="none"&&l.position!=="absolute"&&l.position!=="fixed"});if(e.length<2)return[];let o=[],n=t.getBoundingClientRect(),i=window.getComputedStyle(t).flexDirection,a=i==="column"||i==="column-reverse",s=6;for(let c=0;c<e.length-1;c++){let l=e[c].getBoundingClientRect(),d=e[c+1].getBoundingClientRect();if(d.left>l.right+.5&&o.push({axis:"column",x:l.right,y:n.top,w:d.left-l.right,h:n.height}),d.top>l.bottom+.5&&o.push({axis:"row",x:n.left,y:l.bottom,w:n.width,h:d.top-l.bottom}),!(d.left>l.right+.5)&&!(d.top>l.bottom+.5))if(a){let p=(l.bottom+d.top)/2;o.push({axis:"row",x:n.left,y:p-s/2,w:n.width,h:s})}else{let p=(l.right+d.left)/2;o.push({axis:"column",x:p-s/2,y:n.top,w:s,h:n.height})}}return yc(o)}function Ar(t,e){let o=window.getComputedStyle(t),n=o.display;if(n!=="flex"&&n!=="inline-flex")return!1;let r=o.justifyContent;if(r!=="space-between"&&r!=="space-around"&&r!=="space-evenly"&&r!=="stretch")return!1;let i=o.flexDirection;return!(e!==(i==="column"||i==="column-reverse"?"row":"column")||parseFloat(e==="row"?o.rowGap:o.columnGap)>0)}function ao(t){let e=window.getComputedStyle(t);return{top:parseFloat(e.paddingTop)||0,right:parseFloat(e.paddingRight)||0,bottom:parseFloat(e.paddingBottom)||0,left:parseFloat(e.paddingLeft)||0}}function Vn(t){let e=window.getComputedStyle(t);return{"top-left":parseFloat(e.borderTopLeftRadius)||0,"top-right":parseFloat(e.borderTopRightRadius)||0,"bottom-right":parseFloat(e.borderBottomRightRadius)||0,"bottom-left":parseFloat(e.borderBottomLeftRadius)||0}}function Pr(t){for(let e of t.childNodes)if(e.nodeType===Node.TEXT_NODE&&(e.textContent||"").trim().length>0)return!0;return!1}function lo(t){var d,p;let e=document.createRange(),o=!1;for(let u of t.childNodes)u.nodeType===Node.TEXT_NODE&&(u.textContent||"").trim().length>0&&(o||(e.setStart(u,0),o=!0),e.setEnd(u,(p=(d=u.textContent)==null?void 0:d.length)!=null?p:0));if(!o)return null;let n=e.getBoundingClientRect(),r=window.getComputedStyle(t),i=parseFloat(r.fontSize)||16,a=parseFloat(r.lineHeight);isNaN(a)&&(a=i*1.2);let s=Math.max(1,e.getClientRects().length),c=Math.max(n.height,s*a),l=(c-n.height)/2;return new DOMRect(n.x,n.y-l,n.width,c)}function Ro(t){let e=window.getComputedStyle(t),o=parseFloat(e.fontSize)||16,n=parseFloat(e.lineHeight);return isNaN(n)&&(n=o*1.2),{fontSize:o,lineHeight:n}}function Yt(t,e,o){t instanceof HTMLElement&&t.style.setProperty(e,o,"important")}function Nr(t,e,o){t instanceof HTMLElement&&t.style.removeProperty(e)}function qo(t){var e;for(let o of t){let n=Ve(o.selector);if(!n&&o.durableSelector&&(n=Ve(o.durableSelector),n)){let r=(e=o.selector.match(/\[data-pm="([^"]+)"\]/))==null?void 0:e[1];r&&n.setAttribute("data-pm",r)}if(n)for(let r of o.changes)Yt(n,r.property,r.modified)}}function Br(t,e){let o=Ve(t);if(!o)return;let n=e.find(r=>r.selector===t);if(n)for(let r of n.changes)Nr(o,r.property,r.original)}function Qo(t){for(let e of t){let o=Ve(e.selector);if(o)for(let n of e.changes)Nr(o,n.property,n.original)}}function _s(t,e,o,n){if(t)for(let r of t){if(r instanceof CSSGroupingRule){_s(r.cssRules,e,o,n);continue}if(r instanceof CSSStyleRule){let i=r.selectorText.toLowerCase();(i===":root"||i==="html"||i==="*"||i.includes(":root"))&&bc(r.style,e,o,n)}}}function bc(t,e,o,n){for(let r=0;r<t.length;r++){let i=t[r];if(i!=null&&i.startsWith("--")){if(o.has(i))continue;o.add(i);let a=e.getPropertyValue(i).trim();$s(a)&&n.push({name:i,value:a,usage:`var(${i})`})}}}var tr=null,xc=5e3;function Dr(){if(tr&&Date.now()-tr.timestamp<xc)return tr.variables;let t=[],e=new Set,o=getComputedStyle(document.documentElement);try{for(let i of document.styleSheets)try{_s(i.cssRules||i.rules,o,e,t)}catch(a){}}catch(i){}let n=document.documentElement.style;for(let i=0;i<n.length;i++){let a=n[i];if(a!=null&&a.startsWith("--")&&!e.has(a)){e.add(a);let s=o.getPropertyValue(a).trim();$s(s)&&t.push({name:a,value:s,usage:`var(${a})`})}}let r=t.sort((i,a)=>i.name.localeCompare(a.name));return tr={variables:r,timestamp:Date.now()},r}function $s(t){if(!t)return!1;let e=t.toLowerCase().trim();return!!(/^#([0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(e)||e.startsWith("rgb")||e.startsWith("hsl")||e.startsWith("oklch")||e.startsWith("oklab")||e.startsWith("lch")||e.startsWith("lab")||["transparent","currentcolor","inherit","white","black","red","green","blue","yellow","orange","purple","pink","gray","grey"].includes(e))}function Ao(t,e){let o=e.match(/var\((--[^,)]+)(?:,\s*([^)]+))?\)/);if(o){let n=o[1],r=o[2];return getComputedStyle(document.documentElement).getPropertyValue(n).trim()||r||e}return e}function Po(t,e){if(!t)return null;let o=zs(t);if(!o)return null;for(let n of e){let r=zs(n.value);if(r&&o===r)return n}return null}function zs(t){if(!t)return null;let e=t.trim().toLowerCase();if(e.startsWith("oklch(")){let o=e.match(/oklch\(\s*([\d.]+%?)\s+([\d.]+%?)\s+([\d.]+)/);if(o){let n=o[1].endsWith("%")?parseFloat(o[1])/100:parseFloat(o[1]),r=o[2].endsWith("%")?parseFloat(o[2])/100:parseFloat(o[2]),i=parseFloat(o[3]);n=Math.round(n*100)/100,r=Math.round(r*1e3)/1e3;let a=Math.round(i);return`oklch(${n} ${r} ${a})`}}if(e.startsWith("rgb")){let o=e.match(/rgba?\(\s*(\d+)[,\s]+(\d+)[,\s]+(\d+)/);if(o)return`rgb(${o[1]},${o[2]},${o[3]})`}return e.startsWith("#")?e.length===4?`#${e[1]}${e[1]}${e[2]}${e[2]}${e[3]}${e[3]}`:e.slice(0,7):e}var vc=new Set(["button","a","input","select","textarea"]),Sc=new Set(["button","link"]),wc=new Set(["h1","h2","h3","h4","h5","h6","nav","main","header","footer","section","article","aside"]),kc=["fontSize","fontWeight","fontFamily","lineHeight","letterSpacing","color","backgroundColor","padding","gap","borderRadius","boxShadow"];var Fr=150;function Cc(t){let e=0,o=t.parentElement;for(;o&&o!==document.body;)e++,o=o.parentElement;return e}function Ec(t){return!(t.startsWith("_")||t.startsWith("css-")||t.length>30)}function Tc(t){let e=Array.from(t.classList).filter(Ec).slice(0,3);return e.length>0?e.join(" "):void 0}function Mc(t,e){let o=window.getComputedStyle(t),n=e?window.getComputedStyle(e):null,r={};for(let i of kc){let a=o.getPropertyValue(i.replace(/[A-Z]/g,s=>`-${s.toLowerCase()}`));if(a&&!(i==="backgroundColor"&&(a==="rgba(0, 0, 0, 0)"||a==="transparent"))&&!(i==="boxShadow"&&a==="none")){if(i==="boxShadow"&&(a="yes"),i==="fontFamily"&&(a=a.split(",")[0].trim().replace(/['"]/g,"")),n){let s=n.getPropertyValue(i.replace(/[A-Z]/g,c=>`-${c.toLowerCase()}`));if(a===s)continue}r[i]=a}}return Object.keys(r).length>0?r:void 0}function Ic(t){if(!(t instanceof HTMLElement))return!1;let e=window.getComputedStyle(t);if(e.display==="none"||e.visibility==="hidden")return!1;if(t.offsetParent===null){let o=t.tagName.toLowerCase();if(o==="body"||o==="html")return!0;let n=e.position;return n==="fixed"||n==="sticky"}return!0}function Lc(t){return!!(t instanceof HTMLElement&&t.dataset.devtools||t.closest("[data-devtools]")||t.id==="devtools-canvas"||t.id==="devtools-toolbar"||t.id==="devtools-scrim")}function Rc(t){let e=t.tagName.toLowerCase(),o=To(t);if(o&&o.length>0||vc.has(e))return!0;let n=t.getAttribute("role");return!!(n&&Sc.has(n)||wc.has(e)||(e==="img"||e==="svg")&&(t.getAttribute("alt")||t.getAttribute("aria-label")))}function Ws(){var l,d,p,u,f;let t=[],e=document.createTreeWalker(document.body,NodeFilter.SHOW_ELEMENT),o=e.nextNode();for(;o;){let g=o;if(o=e.nextNode(),Lc(g)||!Ic(g))continue;let h=g.getBoundingClientRect();if(h.width<1||h.height<1||!Rc(g))continue;let S=g.tagName.toLowerCase(),x=To(g),L=Cc(g),R=g.getAttribute("role")||void 0,A=S==="a"&&g.getAttribute("href")||void 0,T=S==="img"&&g.getAttribute("alt")||void 0,C=(l=jn(g))==null?void 0:l.name,Z=Tc(g),Y=Mc(g,g.parentElement),q={tag:S,rect:{x:Math.round(h.left+window.scrollX),y:Math.round(h.top+window.scrollY),w:Math.round(h.width),h:Math.round(h.height)},depth:L};x&&(q.text=x.length>80?x.slice(0,80)+"...":x),C&&(q.component=C),Z&&(q.classes=Z),Y&&(q.styles=Y),R&&(q.role=R),A&&(q.href=A),T&&(q.alt=T),t.push({el:g,entry:q})}t.sort((g,h)=>h.entry.depth-g.entry.depth);let n=new Set;for(let g=0;g<t.length;g++){let h=t[g];if(n.has(h.el))continue;let S=h.el.parentElement;if(!S||!t.find(A=>A.el===S))continue;let L=(d=h.el.textContent)==null?void 0:d.trim(),R=(p=S.textContent)==null?void 0:p.trim();L&&R&&L===R&&n.add(h.el)}let r=t.filter(g=>!n.has(g.el)),i=new Map;for(let g of r){let h=g.el.parentElement,S=[h?Array.from(h.classList).join("."):"",g.entry.tag,(u=g.entry.component)!=null?u:"",g.entry.styles?JSON.stringify(g.entry.styles):""].join("|"),x=(f=i.get(S))!=null?f:[];x.push(g),i.set(S,x)}let a=[],s=new Set;for(let[,g]of i)if(g.length>3){a.push(g[0].entry,g[1].entry),s.add(g[0].el),s.add(g[1].el);let h=1/0,S=1/0,x=-1/0,L=-1/0;for(let R=2;R<g.length;R++){let A=g[R].entry.rect;h=Math.min(h,A.x),S=Math.min(S,A.y),x=Math.max(x,A.x+A.w),L=Math.max(L,A.y+A.h)}a.push({tag:g[0].entry.tag,text:`(+${g.length-2} similar items)`,rect:{x:Math.round(h),y:Math.round(S),w:Math.round(x-h),h:Math.round(L-S)},depth:g[0].entry.depth});for(let R of g)s.add(R.el)}for(let g of r)s.has(g.el)||a.push(g.entry);let c=Math.max(document.documentElement.scrollHeight,1);if(a.sort((g,h)=>{let S=g.rect.w*g.rect.h,x=h.rect.w*h.rect.h,L=S*(1+.5*(1-g.rect.y/c));return x*(1+.5*(1-h.rect.y/c))-L}),a.length>Fr){let g=a.slice(0,Fr);return g.push({tag:"truncated",text:`${a.length-Fr} additional elements omitted`,rect:{x:0,y:0,w:0,h:0},depth:0}),g}return a}import{domToCanvas as Ac}from"modern-screenshot";function Hr(t){let e=document.createElement("canvas").getContext("2d");return e?(e.fillStyle=t,e.fillStyle):"#888888"}function er(t,e=[],o,n){let r=new Map,i=[];for(let s of t)if(s.groupId){let c=r.get(s.groupId)||[];c.push(s),r.set(s.groupId,c)}else i.push(s);let a=[];for(let[s,c]of r){let l=c.find(p=>p.type!=="text"),d=c.find(p=>p.type==="text");if(l){let p=l.linkedSelector||(d==null?void 0:d.linkedSelector),u=(d==null?void 0:d.imageCount)||l.imageCount;a.push(m(b(m({id:l.id,type:l.type,instruction:d==null?void 0:d.text},p?{linkedSelector:p}:{}),{elements:l.elements||[]}),u?{imageCount:u}:{}))}}for(let s of i)a.push(m(b(m({id:s.id,type:s.type,instruction:s.type==="text"?s.text:void 0},s.linkedSelector?{linkedSelector:s.linkedSelector}:{}),{elements:s.elements||[]}),s.imageCount?{imageCount:s.imageCount}:{}));return m(m({timestamp:new Date().toISOString(),url:window.location.href,viewport:{width:window.innerWidth,height:window.innerHeight},scrollPosition:{x:window.scrollX,y:window.scrollY},annotations:a,styleModifications:e},o?{inspectedElement:o}:{}),n&&n.length>0?{spacingTokenChanges:n}:{})}function Ys(t){if(!t.points||t.points.length===0)return null;let e=t.points.map(n=>n.x),o=t.points.map(n=>n.y);return{minX:Math.min(...e),minY:Math.min(...o),maxX:Math.max(...e),maxY:Math.max(...o)}}function Pc(t,e){if(t.length===0)return[];let o=t.map(d=>({annotation:d,bounds:Ys(d)})).filter(d=>d.bounds!==null);if(o.length===0)return[];o.sort((d,p)=>d.bounds.minY-p.bounds.minY);let n=Math.min(...o.map(d=>d.bounds.minY)),r=Math.max(...o.map(d=>d.bounds.maxY));if(r-n<=e){let d=(n+r)/2,p=Math.max(0,d-e/2);return[{top:p,bottom:p+e,annotations:t}]}let i=[],a=50,s=Math.max(0,n-a),c=[],l=s;for(let{annotation:d,bounds:p}of o){let u=p.maxY+a;if(u-s<=e)c.push(d),l=Math.max(l,u);else{if(c.length>0){let f=(s+l)/2,g=Math.max(0,f-e/2);i.push({top:g,bottom:g+e,annotations:c})}s=Math.max(0,p.minY-a),c=[d],l=p.maxY+a}}if(c.length>0){let d=(s+l)/2,p=Math.max(0,d-e/2);i.push({top:p,bottom:p+e,annotations:c})}return i}function Nc(t,e,o,n){t.save(),t.scale(n,n);for(let r of e){let i=r.points.map(a=>({x:a.x,y:a.y-o}));switch(t.strokeStyle=r.color,t.fillStyle=r.color,t.lineWidth=r.strokeWidth,t.lineCap="round",t.lineJoin="round",r.type){case"freehand":if(i.length<2)break;t.beginPath(),t.moveTo(i[0].x,i[0].y);for(let a=1;a<i.length;a++)t.lineTo(i[a].x,i[a].y);t.stroke();break;case"line":if(i.length<2)break;t.beginPath(),t.moveTo(i[0].x,i[0].y),t.lineTo(i[i.length-1].x,i[i.length-1].y),t.stroke();break;case"rectangle":{if(i.length<2)break;let a=i[0],s=i[i.length-1],c=Math.min(a.x,s.x),l=Math.min(a.y,s.y),d=Math.abs(s.x-a.x),p=Math.abs(s.y-a.y);t.strokeRect(c,l,d,p);break}case"circle":{if(i.length<2)break;let a=i[0],s=i[i.length-1],c=(a.x+s.x)/2,l=(a.y+s.y)/2,d=Math.abs(s.x-a.x)/2,p=Math.abs(s.y-a.y)/2;t.beginPath(),t.ellipse(c,l,d,p,0,0,Math.PI*2),t.stroke();break}case"text":{if(!r.text||i.length<1)break;let a=i[0],s=r.fontSize||16;t.font=`${s}px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`,t.fillStyle=r.color;let l=(r.imageCount&&r.imageCount>0?`[${r.imageCount} image${r.imageCount>1?"s":""}] ${r.text}`:r.text).split(`
|
|
3
|
+
`),d=s*1.2,p=4,u=0;for(let f of l)u=Math.max(u,t.measureText(f).width);t.fillRect(a.x-p,a.y-p,u+p*2,l.length*d+p*2),t.fillStyle="#ffffff",l.forEach((f,g)=>{t.fillText(f,a.x,a.y+s+g*d)});break}}}t.restore()}async function zr(t,e,o=[]){try{let n=window.devicePixelRatio||1,r=window.innerWidth,i=window.innerHeight,a=o.filter(l=>{var d;return((d=l.status)!=null?d:"pending")==="pending"});console.log("[Screenshot] Starting capture with",a.length,"active annotations (filtered",o.length-a.length,"captured)");let s=Pc(a,i);if(s.length===0){let l=await Or(t,[],window.scrollY,r,i,n);return l?[l]:[]}let c=[];for(let l=0;l<s.length;l++){let d=s[l],p=await Or(t,d.annotations,d.top,r,i,n);p?c.push(p):console.warn(`[Screenshot] Region ${l+1} failed to capture`)}return console.log("[Screenshot] Capture complete"),c}catch(n){return console.error("[Screenshot] Capture failed:",n),[]}}async function Or(t,e,o,n,r,i){try{let a=await Ac(t,{filter:l=>!(l instanceof HTMLElement&&(l.id==="devtools-canvas"||l.id==="devtools-toolbar"||l.id==="devtools-scrim"||l.dataset.devtools||l.closest("[data-devtools]"))),scale:i,backgroundColor:"#ffffff",width:n,height:r,style:{transform:`translate(${-window.scrollX}px, ${-o}px)`}}),s=document.createElement("canvas");s.width=n*i,s.height=r*i;let c=s.getContext("2d");return c?(c.drawImage(a,0,0,n*i,r*i,0,0,n*i,r*i),Nc(c,e,o,i),new Promise(l=>{s.toBlob(d=>l(d),"image/png")})):null}catch(a){return console.error("Region capture failed:",a),null}}async function nr(t){if(t.length===0)return null;if(t.length===1)return t[0];let e=await Promise.all(t.map(s=>new Promise((c,l)=>{let d=new Image;d.onload=()=>c(d),d.onerror=l,d.src=URL.createObjectURL(s)}))),o=e[0].width,n=e.reduce((s,c)=>s+c.height,0),r=document.createElement("canvas");r.width=o,r.height=n;let i=r.getContext("2d");if(!i)return null;let a=0;for(let s of e)i.drawImage(s,0,a),a+=s.height,URL.revokeObjectURL(s.src);return new Promise(s=>{r.toBlob(c=>s(c),"image/png")})}async function or(t,e=[]){let n=window.innerWidth,r=window.innerHeight,i=Math.max(document.body.scrollHeight,document.documentElement.scrollHeight),a=window.scrollX,s=window.scrollY,c=[];try{let l=Math.ceil(i/r);for(let d=0;d<l;d++){let p=d*r;window.scrollTo(a,p),await new Promise(S=>requestAnimationFrame(()=>requestAnimationFrame(()=>S())));let u=p,f=p+r,g=e.filter(S=>{let x=Ys(S);return x?x.maxY>=u&&x.minY<=f:!1}),h=await Or(t,g,p,n,Math.min(r,i-p),1);h&&c.push(h)}}finally{window.scrollTo(a,s)}return nr(c)}async function js(t,e,o){try{let n=Array.isArray(t)?t:[t];if(n.length===0)return!1;let r=await nr(n);if(!r)return!1;let i={"image/png":r},a=e&&e.length>0,s=o&&o.length>0;if(a||s){let c=e?e.filter(l=>{var d;return((d=l.status)!=null?d:"pending")==="pending"}):[];if(c.length>0||s){let l=er(c,o||[]),d=new Blob([JSON.stringify(l,null,2)],{type:"text/plain"});i["text/plain"]=d}}return await navigator.clipboard.write([new ClipboardItem(i)]),!0}catch(n){return console.warn("Clipboard write failed:",n),!1}}import{useCallback as Oe,useEffect as Ye,useMemo as vi,useRef as Ee,useState as le}from"react";import{useCallback as co,useRef as Bc}from"react";function _r(t,e,o,n){if(e.length<2)return;let r=e[0],i=e[e.length-1];if(!r||!i)return;let a=(r.x+i.x)/2,s=(r.y+i.y)/2,c=Math.abs(i.x-r.x)/2,l=Math.abs(i.y-r.y)/2;t.beginPath(),t.strokeStyle=o,t.lineWidth=n,t.ellipse(a,s,c,l,0,0,Math.PI*2),t.stroke()}function $r(t,e,o,n){if(e.length<2)return;let r=e[0],i=e[e.length-1];if(!(!r||!i)){t.beginPath(),t.strokeStyle=o,t.lineWidth=n,t.lineCap="round",t.lineJoin="round",t.moveTo(r.x,r.y);for(let a=1;a<e.length-1;a++){let s=e[a],c=e[a+1];if(!s||!c)continue;let l=(s.x+c.x)/2,d=(s.y+c.y)/2;t.quadraticCurveTo(s.x,s.y,l,d)}t.lineTo(i.x,i.y),t.stroke()}}function Wr(t,e,o,n){if(e.length<2)return;let r=e[0],i=e[e.length-1];!r||!i||(t.beginPath(),t.strokeStyle=o,t.lineWidth=n,t.lineCap="round",t.moveTo(r.x,r.y),t.lineTo(i.x,i.y),t.stroke())}function Yr(t,e,o,n){if(e.length<2)return;let r=e[0],i=e[e.length-1];if(!r||!i)return;let a=Math.min(r.x,i.x),s=Math.min(r.y,i.y),c=Math.abs(i.x-r.x),l=Math.abs(i.y-r.y);t.beginPath(),t.strokeStyle=o,t.lineWidth=n,t.lineCap="round",t.lineJoin="round",t.strokeRect(a,s,c,l)}var Se='"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace';function Gs(t,e,o,n,r=12,i){if(!o)return;let a=r*1.4,s=o.split(`
|
|
4
|
+
`),c=i!==void 0?[i+". "+(s[0]||""),...s.slice(1)]:s;t.font=`${r}px ${Se}`,t.textBaseline="middle";let l=c.map(f=>t.measureText(f).width),d=Math.min(400,Math.max(...l)),p=c.length*a,u=c.map((f,g)=>{if(l[g]<=400)return f;let h=0,S=f.length;for(;h<S;){let x=h+S+1>>1;t.measureText(f.slice(0,x)+"\u2026").width<=400?h=x:S=x-1}return f.slice(0,h)+"\u2026"});t.fillStyle=n,t.fillRect(e.x-4,e.y-4,d+8,p+8),t.fillStyle="#ffffff",u.forEach((f,g)=>{t.fillText(f,e.x,e.y+g*a+a/2)})}var Vs=11,jr=4,Dc=`600 ${Vs}px system-ui, -apple-system, sans-serif`;function Gr(t,e,o){return t.map(n=>({x:n.x-e,y:n.y-o}))}function Fc(t,e,o,n,r,i){let a=String(n);t.font=Dc;let c=t.measureText(a).width+jr*2,l=Vs+jr*2,d=e-c/2,p=o+i/2+2;t.fillStyle=r,t.fillRect(d,p,c,l),t.fillStyle="#ffffff",t.textBaseline="middle",t.fillText(a,d+jr,p+l/2)}function Oc(t,e){if(t.points.length<2&&t.type!=="text")return null;switch(t.type){case"rectangle":case"freehand":{let o,n;if(t.type==="freehand")o=Math.min(...t.points.map(r=>r.x)),n=Math.max(...t.points.map(r=>r.y));else{let r=t.points[0],i=t.points[t.points.length-1];o=Math.min(r.x,i.x),n=Math.max(r.y,i.y)}return{x:o,y:n}}case"circle":{let o=t.points[0],n=t.points[t.points.length-1],r=Math.min(o.x,n.x),i=(Math.min(o.y,n.y)+Math.max(o.y,n.y))/2;return{x:r,y:i}}case"line":{let o=t.points[0],n=t.points[t.points.length-1],r=o.y>n.y?o:n;return{x:r.x,y:r.y}}default:return null}}function Xs(){let t=Bc(null),e=co(()=>{let s=t.current;if(!s)return;let c=s.getContext("2d");c&&c.clearRect(0,0,s.width,s.height)},[]),o=co((s,c)=>{var f;let l=t.current;if(!l)return;let d=l.getContext("2d");if(!d)return;let u=((f=s.status)!=null?f:s.captured?"in_flight":"pending")==="pending"?s.color:"#999999";switch(s.type){case"freehand":$r(d,s.points,u,s.strokeWidth);break;case"line":Wr(d,s.points,u,s.strokeWidth);break;case"rectangle":Yr(d,s.points,u,s.strokeWidth);break;case"circle":_r(d,s.points,u,s.strokeWidth);break;case"text":s.text&&s.points[0]&&Gs(d,s.points[0],s.text,u,s.fontSize,c);break}},[]),n=co((s,c,l,d)=>{let p=t.current;if(!p||s.length<2)return;let u=p.getContext("2d");if(u)switch(c){case"freehand":$r(u,s,l,d);break;case"line":Wr(u,s,l,d);break;case"rectangle":Yr(u,s,l,d);break;case"circle":_r(u,s,l,d);break}},[]),r=co((s,c)=>{let l=t.current;if(!l||s.points.length<2)return;let d=l.getContext("2d");if(d){if(d.fillStyle="#ffffff",d.strokeStyle=s.color,d.lineWidth=1.5,s.type==="line"){let p=s.points[0],u=s.points[s.points.length-1];[p,u].forEach(f=>{d.beginPath(),d.arc(f.x,f.y,c/2,0,Math.PI*2),d.fill(),d.stroke()});return}if(s.type==="circle"){let p=s.points[0],u=s.points[s.points.length-1],f=Math.min(p.x,u.x),g=Math.max(p.x,u.x),h=Math.min(p.y,u.y),S=Math.max(p.y,u.y),x=(f+g)/2,L=(h+S)/2;[{x,y:h},{x,y:S},{x:f,y:L},{x:g,y:L}].forEach(A=>{d.beginPath(),d.rect(A.x-c/2,A.y-c/2,c,c),d.fill(),d.stroke()});return}if(s.type==="rectangle"||s.type==="freehand"){let p,u,f,g;if(s.type==="freehand")p=Math.min(...s.points.map(S=>S.x)),u=Math.max(...s.points.map(S=>S.x)),f=Math.min(...s.points.map(S=>S.y)),g=Math.max(...s.points.map(S=>S.y));else{let S=s.points[0],x=s.points[s.points.length-1];p=Math.min(S.x,x.x),u=Math.max(S.x,x.x),f=Math.min(S.y,x.y),g=Math.max(S.y,x.y)}[{x:p,y:f},{x:u,y:f},{x:p,y:g},{x:u,y:g}].forEach(S=>{d.beginPath(),d.rect(S.x-c/2,S.y-c/2,c,c),d.fill(),d.stroke()})}}},[]),i=co((s,c,l,d,p,u,f,g=0,h=0,S)=>{var x;if(e(),s.forEach(L=>{let R=b(m({},L),{points:Gr(L.points,g,h)}),A=S==null?void 0:S.get(L.id);o(R,A)}),c.length>0){let L=Gr(c,g,h);n(L,l,d,p)}if(u&&u.length>0&&f){let L=t.current,R=L==null?void 0:L.getContext("2d");for(let A of u){let T=s.find(C=>C.id===A);if(T){let C=b(m({},T),{points:Gr(T.points,g,h)});if(r(C,f),R&&T.type!=="text"&&S&&!(T.groupId&&s.some(Y=>Y.groupId===T.groupId&&Y.type==="text"))){let Y=S.get(T.id);if(Y!==void 0){let q=Oc(C,f);if(q){let B=((x=T.status)!=null?x:T.captured?"in_flight":"pending")==="pending"?T.color:"#999999";Fc(R,q.x,q.y,Y,B,f)}}}}}}},[e,o,n,r]),a=co(()=>{let s=t.current;if(!s)return;let c=window.devicePixelRatio||1;s.width=window.innerWidth*c,s.height=window.innerHeight*c;let l=s.getContext("2d");l&&l.scale(c,c)},[]);return{canvasRef:t,clearCanvas:e,drawAnnotation:o,drawCurrentPath:n,redrawAll:i,resizeCanvas:a}}import{useEffect as Hc,useRef as zc}from"react";function Js(){let t=zc({shift:!1,cmd:!1});return Hc(()=>{let e=r=>{r.key==="Shift"&&(t.current.shift=!0),(r.key==="Meta"||r.key==="Control")&&(t.current.cmd=!0)},o=r=>{r.key==="Shift"&&(t.current.shift=!1),(r.key==="Meta"||r.key==="Control")&&(t.current.cmd=!1)},n=()=>{t.current={shift:!1,cmd:!1}};return window.addEventListener("keydown",e,!0),window.addEventListener("keyup",o,!0),window.addEventListener("blur",n),()=>{window.removeEventListener("keydown",e,!0),window.removeEventListener("keyup",o,!0),window.removeEventListener("blur",n)}},[]),t}import{useEffect as _c}from"react";function Ks(t,e,o,n,r){_c(()=>{let i=a=>{if(t){if(t.linkedSelector)return;a.preventDefault(),a.stopPropagation();let c=a.deltaY>0?-2:2;e(l=>l?b(m({},l),{fontSize:Math.max(12,Math.min(72,l.fontSize+c))}):null);return}if(!o)return;a.preventDefault();let s=n.find(c=>c.id===o);if(s&&s.type==="text"&&!s.linkedSelector){let c=s.fontSize||12,l=a.deltaY>0?-2:2;r({type:"UPDATE_TEXT_SIZE",payload:{id:o,fontSize:c+l}})}};return window.addEventListener("wheel",i,{passive:!1}),()=>{window.removeEventListener("wheel",i)}},[o,t,n,r,e])}import{useCallback as Us,useEffect as No,useRef as Zs,useState as Xn}from"react";import{Fragment as Sn,jsx as At,jsxs as De}from"react/jsx-runtime";var uo=22,wn=12,qs=3,Qs=250,Vr=["reviewing","considering","thinking","zhuzhing","iterating","tweaking","reflecting","noodling","pondering","finessing","polishing","riffing"],ta=3e3,Xr=["planning","strategizing","scheming","mapping","scoping","drafting","outlining","architecting"];function Kr(i){var a=i,{left:t,top:e,style:o,children:n}=a,r=Fn(a,["left","top","style","children"]);return At("div",b(m({"data-devtools":"badge-hit-area"},r),{style:m({position:"fixed",left:`max(0px, ${t}px)`,top:`max(0px, ${e}px)`,padding:wn,transform:`translate(min(0px, calc(100vw - max(0px, ${t}px) - 100%)), min(0px, calc(100vh - max(0px, ${e}px) - 100%)))`},o),children:n}))}function ea({annotations:t,supersededAnnotations:e,inFlightIds:o,scrollX:n,scrollY:r,annotationGroupMap:i,onViewThread:a,onSelectAnnotation:s}){var h,S;let[c,l]=Xn(0),[d,p]=Xn(()=>Math.floor(Math.random()*Vr.length)),u=!!(o&&o.size>0);No(()=>{if(!u)return;let x=setInterval(()=>{l(R=>(R+1)%qs)},Qs),L=setInterval(()=>{p(R=>(R+1)%Vr.length)},ta);return()=>{clearInterval(x),clearInterval(L)}},[u]);let f=[];for(let x of t){if(x.type!=="text"||!x.text||!x.points[0]||e.has(x))continue;let L=x.groupId?t.filter(j=>j.groupId===x.groupId):[x],R=!!(o&&(o.has(x.id)||L.some(j=>o.has(j.id)))),A=(h=x.status)!=null?h:"pending",T=L.some(j=>j.status==="resolved"||j.status==="needs_review"),C=L.some(j=>j.threadId);if(!R&&A!=="resolved"&&A!=="needs_review"&&!T&&!C)continue;let Z=x.threadId||((S=L.find(j=>j.threadId))==null?void 0:S.threadId),Y=A==="needs_review"||L.some(j=>j.status==="needs_review"),q=L.reduce((j,It)=>{var Pt;return j+((Pt=It.replyCount)!=null?Pt:0)},0)||1,tt=x.points[0],B=x.fontSize||12,V=B*1.4,Q=x.text.split(`
|
|
5
|
+
`),Mt=i.get(x.id),dt=Mt!==void 0?[Mt+". "+(Q[0]||""),...Q.slice(1)]:Q,Dt=document.createElement("canvas").getContext("2d");if(!Dt)continue;Dt.font=`${B}px ${Se}`;let Ht=Math.min(400,Math.max(...dt.map(j=>Dt.measureText(j).width))),Rt=dt.length*V;f.push({id:x.id,threadId:Z,x:tt.x+Ht+4,y:tt.y-4,size:Rt+8,color:x.color,isInFlight:R,isNeedsReview:Y,replyCount:q})}if(f.length===0)return null;let g=!!a;return At(Sn,{children:f.map(x=>At(Kr,{left:x.x-n-wn,top:x.y-r-wn,onClick:g&&x.threadId?()=>{s==null||s(x.id),a(x.threadId)}:void 0,style:{pointerEvents:g?"auto":"none",cursor:g&&x.threadId?"pointer":void 0,zIndex:9999},children:At("div",{"data-devtools":"annotation-badge",style:{height:x.size,display:"flex",alignItems:"center",backgroundColor:x.color,fontFamily:Se,fontSize:12,color:"#ffffff",userSelect:"none",padding:`0 ${4}px`,gap:4,whiteSpace:"nowrap"},children:x.isInFlight?De(Sn,{children:[At("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:"currentColor",style:{verticalAlign:"middle"},children:c===1?De(Sn,{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"})]}):De(Sn,{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:Vr[d]})]}):De(Sn,{children:[x.isNeedsReview?At("span",{style:{fontWeight:700},children:"?"}):De("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"})]}),De("span",{style:{opacity:.7},children:[x.replyCount," ",x.replyCount===1?"reply":"replies"]})]})})},x.id))})}function na({annotations:t,supersededAnnotations:e,scrollX:o,scrollY:n,annotationGroupMap:r,planThreadId:i,taskCount:a,planStatus:s,onViewThread:c,onSelectAnnotation:l}){var u;let d=[];for(let f of t){if(f.type!=="text"||!f.text||!f.points[0]||e.has(f))continue;let g=(u=f.status)!=null?u:"pending",h=f.groupId?t.filter(Q=>Q.groupId===f.groupId):[f],S=h.some(Q=>Q.threadId===i),x=!S&&!f.planId&&(g==="in_flight"||g==="pending"||f.captured)&&!h.some(Q=>Q.status==="resolved"||Q.status==="needs_review");if(!S&&!x||g==="resolved"||g==="needs_review")continue;let L=f.points[0],R=f.fontSize||12,A=R*1.4,T=f.text.split(`
|
|
6
|
+
`),C=r.get(f.id),Z=C!==void 0?[C+". "+(T[0]||""),...T.slice(1)]:T,q=document.createElement("canvas").getContext("2d");if(!q)continue;q.font=`${R}px ${Se}`;let tt=Math.min(400,Math.max(...Z.map(Q=>q.measureText(Q).width))),V=Z.length*A+8;d.push({annotation:f,x:L.x+tt+4,y:L.y-4,size:V,groupNumber:C})}if(d.length===0)return null;let p=s==="planning";return At(Sn,{children:d.map(({annotation:f,x:g,y:h,size:S})=>p?At($c,{x:g-o,y:h-n,size:S,color:f.color,onClick:()=>{l==null||l(f.id),c(i)}},`plan-thinking-${f.id}`):At(Kr,{left:g-o-wn,top:h-n-wn,onClick:()=>{l==null||l(f.id),c(i)},style:{cursor:"pointer",zIndex:9999,pointerEvents:"auto"},children:De("div",{"data-devtools":"plan-waiting-badge",style:{height:S,display:"flex",alignItems:"center",backgroundColor:f.color,fontFamily:Se,fontSize:12,color:"#ffffff",userSelect:"none",padding:`0 ${4}px`,gap:4,whiteSpace:"nowrap"},children:[De("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[At("circle",{cx:"12",cy:"12",r:"10"}),At("path",{d:"M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3"}),At("line",{x1:"12",y1:"17",x2:"12.01",y2:"17"})]}),De("span",{style:{opacity:.7},children:[a," task",a!==1?"s":""," \u2014 approve?"]})]})},`plan-waiting-${f.id}`))})}function $c({x:t,y:e,size:o,color:n,onClick:r}){let[i,a]=Xn(0),[s,c]=Xn(()=>Math.floor(Math.random()*Xr.length));return No(()=>{let l=setInterval(()=>{a(p=>(p+1)%qs)},Qs),d=setInterval(()=>{c(p=>(p+1)%Xr.length)},ta);return()=>{clearInterval(l),clearInterval(d)}},[]),At(Kr,{left:t-wn,top:e-wn,onClick:r,style:{pointerEvents:r?"auto":"none",cursor:r?"pointer":void 0,zIndex:9999},children:De("div",{"data-devtools":"plan-thinking-badge",style:{height:o,display:"flex",alignItems:"center",backgroundColor:n,fontFamily:Se,fontSize:12,color:"#ffffff",userSelect:"none",padding:`0 ${4}px`,gap:4,whiteSpace:"nowrap"},children:[At("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:"currentColor",style:{verticalAlign:"middle"},children:i===1?De(Sn,{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"})]}):De(Sn,{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:Xr[s]})]})})}function Ur({inFlightSelectorColors:t,animated:e=!0}){let[o,n]=Xn([]);if(No(()=>{if(t.size===0){n([]);return}let i=null,a=()=>{let l=[];for(let[d,p]of t){let u=Ve(d);if(!u)continue;let f=u.getBoundingClientRect();l.push({selector:d,top:f.top,left:f.left,width:f.width,height:f.height,color:p})}n(l)},s=()=>{i&&cancelAnimationFrame(i),i=requestAnimationFrame(a)};a(),window.addEventListener("scroll",s,!0),window.addEventListener("resize",s,!0);let c=new MutationObserver(s);return c.observe(document.body,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["style","class"]}),()=>{window.removeEventListener("scroll",s,!0),window.removeEventListener("resize",s,!0),c.disconnect(),i&&cancelAnimationFrame(i)}},[t]),o.length===0)return null;let r={position:"absolute",width:2,height:2,pointerEvents:"none"};return De(Sn,{children:[e&&At("style",{children:"@keyframes popmelt-march { to { stroke-dashoffset: -6; } }"}),o.map(i=>De("div",{"data-devtools":"marching-ants",style:{position:"fixed",top:i.top,left:i.left,width:i.width,height:i.height,pointerEvents:"none",zIndex:9995,overflow:"visible"},children:[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,i.width-1),height:Math.max(0,i.height-1),fill:"none",stroke:i.color,strokeWidth:"1",strokeDasharray:"2 4",style:e?{animation:"popmelt-march 0.5s steps(2) infinite"}:void 0})}),At("div",{style:b(m({},r),{top:-1,left:-1,backgroundColor:i.color})}),At("div",{style:b(m({},r),{top:-1,right:-1,backgroundColor:i.color})}),At("div",{style:b(m({},r),{bottom:-1,left:-1,backgroundColor:i.color})}),At("div",{style:b(m({},r),{bottom:-1,right:-1,backgroundColor:i.color})})]},i.selector))]})}function oa({annotations:t,supersededAnnotations:e,scrollX:o,scrollY:n,onReply:r,annotationGroupMap:i}){let a=t.filter(l=>e.has(l)?!1:l.status==="waiting_input"&&l.question&&l.threadId);if(a.length===0)return null;let s=new Set,c=[];for(let l of a){if(!l.threadId||s.has(l.threadId))continue;s.add(l.threadId);let d=l.type==="text"?l:t.find(p=>p.groupId&&p.groupId===l.groupId&&p.type==="text")||l;if(d.type==="text"&&d.text&&d.points[0]){let p=d.points[0],u=d.fontSize||12,f=u*1.4,g=d.text.split(`
|
|
7
|
+
`),h=i.get(d.id),S=h!==void 0?[h+". "+(g[0]||""),...g.slice(1)]:g,L=document.createElement("canvas").getContext("2d");if(!L)continue;L.font=`${u}px ${Se}`;let R=Math.min(400,Math.max(...S.map(C=>L.measureText(C).width))),T=S.length*f+8;c.push({annotation:l,x:p.x+R+4,y:p.y-4,size:T})}}return c.length===0?null:At(Sn,{children:c.map(({annotation:l,x:d,y:p,size:u})=>At(Wc,{annotation:l,x:d-o,y:p-n,size:u,onReply:r},`question-${l.threadId}`))})}function Wc({annotation:t,x:e,y:o,size:n,onReply:r}){let[i,a]=Xn(!1),[s,c]=Xn(""),l=Zs(null),d=Zs(null);No(()=>{i&&l.current&&l.current.focus()},[i]),No(()=>{if(!i)return;let h=x=>{d.current&&!d.current.contains(x.target)&&a(!1)},S=x=>{x.key==="Escape"&&a(!1)};return document.addEventListener("mousedown",h),document.addEventListener("keydown",S),()=>{document.removeEventListener("mousedown",h),document.removeEventListener("keydown",S)}},[i]);let p=Us(()=>{!s.trim()||!t.threadId||(r(t.threadId,s.trim()),c(""),a(!1))},[s,t.threadId,r]),u=Us(h=>{h.key==="Enter"&&(h.metaKey||h.ctrlKey)&&(h.preventDefault(),p())},[p]),f=i?e:e-wn,g=i?o:o-wn;return De("div",{ref:d,"data-devtools":"question-badge",style:{position:"fixed",left:`max(0px, ${f}px)`,top:`max(0px, ${g}px)`,padding:i?0:wn,transform:`translate(min(0px, calc(100vw - max(0px, ${f}px) - 100%)), min(0px, calc(100vh - max(0px, ${g}px) - 100%)))`,zIndex:i?10002:9999,pointerEvents:"auto",cursor:i?void 0:"pointer"},children:[!i&&De("div",{onClick:()=>a(!0),style:{height:n,display:"flex",alignItems:"center",backgroundColor:t.color,padding:`0 ${4}px`,gap:4,fontFamily:Se,fontSize:12,color:"#ffffff",whiteSpace:"nowrap"},children:[De("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?"})]}),i&&De("div",{style:{minWidth:260,maxWidth:360,backgroundColor:"#ffffff",fontFamily:Se,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:t.question}),De("div",{style:{padding:`0 ${4}px ${4}px`},children:[At("textarea",{ref:l,value:s,onChange:h=>c(h.target.value),onKeyDown:u,placeholder:"Type your reply...",style:{width:"100%",minHeight:40,padding:4,fontSize:12,fontFamily:Se,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:p,disabled:!s.trim(),style:{padding:"4px 12px",fontSize:11,fontFamily:Se,fontWeight:600,backgroundColor:s.trim()?t.color:"rgba(0,0,0,0.1)",color:s.trim()?"#ffffff":"rgba(0,0,0,0.3)",border:"none",cursor:s.trim()?"pointer":"default"},children:"Send \u2318\u23CE"})})]})]})]})}function rr(t){var i;let e=new Set,o=new Map;for(let a of t){if(!a.linkedSelector)continue;let s=o.get(a.linkedSelector)||[];s.push(a),o.set(a.linkedSelector,s)}let n=new Set,r=new Set;for(let a of o.values()){if(a.length<=1){(i=a[0])!=null&&i.groupId&&r.add(a[0].groupId);continue}a.sort((c,l)=>l.timestamp-c.timestamp);let s=a[0];s.groupId&&r.add(s.groupId);for(let c=1;c<a.length;c++){let l=a[c];e.add(l),l.groupId&&n.add(l.groupId)}}for(let a of t)a.groupId&&n.has(a.groupId)&&!r.has(a.groupId)&&e.add(a);return e}import{useEffect as ra,useLayoutEffect as Yc,useState as ia}from"react";import{jsx as Zr,jsxs as aa}from"react/jsx-runtime";function jc(t,e){let o=t.match(/^oklch\(([^)]+)\)$/i);return o?`oklch(${o[1]} / ${e})`:`color-mix(in srgb, ${t} ${Math.round(e*100)}%, transparent)`}var sa=["top-left","top-right","bottom-right","bottom-left"];function la({element:t,radius:e,accentColor:o,hoveredCorner:n,draggingCorner:r,cursorViewport:i}){let[a,s]=ia(null),[c,l]=ia(!1);if(ra(()=>{let x=A=>{(A.key==="Meta"||A.key==="Control")&&l(!0)},L=A=>{(A.key==="Meta"||A.key==="Control")&&l(!1)},R=()=>l(!1);return window.addEventListener("keydown",x,!0),window.addEventListener("keyup",L,!0),window.addEventListener("blur",R),()=>{window.removeEventListener("keydown",x,!0),window.removeEventListener("keyup",L,!0),window.removeEventListener("blur",R)}},[]),ra(()=>{if(!t){s(null);return}let x=()=>{s(t.getBoundingClientRect())};return x(),window.addEventListener("scroll",x,{passive:!0}),window.addEventListener("resize",x,{passive:!0}),()=>{window.removeEventListener("scroll",x),window.removeEventListener("resize",x)}},[t]),Yc(()=>{t&&s(t.getBoundingClientRect())},[t,e["top-left"],e["top-right"],e["bottom-right"],e["bottom-left"]]),!a)return null;let d=a.width,p=a.height,u=jc(o,.2),f={"top-left":{x:0,y:e["top-left"]},"top-right":{x:d,y:e["top-right"]},"bottom-right":{x:d,y:p-e["bottom-right"]},"bottom-left":{x:0,y:p-e["bottom-left"]}},g=new Set,h=r!=null?r:n;if(h)if(c)g.add(h);else for(let x of sa)g.add(x);let S={position:"fixed",top:a.top,left:a.left,width:d,height:p,pointerEvents:"none",zIndex:9996,overflow:"visible"};return aa("div",{"data-devtools":"border-radius-handles",style:S,children:[aa("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${d} ${p}`,children:[Zr("rect",{x:"0.5",y:"0.5",width:Math.max(0,d-1),height:Math.max(0,p-1),fill:"none",stroke:u,strokeWidth:"1"}),sa.map(x=>{let L=f[x],R=g.has(x);return Zr("circle",{cx:L.x,cy:L.y,r:x===(r!=null?r:n)?3:2.5,fill:o,stroke:"#ffffff",strokeWidth:x===(r!=null?r:n)?4:2,paintOrder:"stroke"},x)})]}),i&&h&&(()=>{let x=Math.round(e[h]);return Zr("div",{style:{position:"fixed",left:i.x+8,top:i.y-28,background:o,color:"#fff",fontSize:11,fontWeight:600,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',lineHeight:1,padding:"4px 4px",borderRadius:0,whiteSpace:"nowrap",pointerEvents:"none",zIndex:9997},children:x})})()]})}import{useEffect as Gc,useState as Vc}from"react";function Jn(t,e){let o=t.match(/^oklch\(([^)]+)\)$/i);if(o)return`oklch(${o[1]} / ${e})`;let n=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);if(n){let r=parseInt(n[1],16),i=parseInt(n[2],16),a=parseInt(n[3],16);return`rgba(${r}, ${i}, ${a}, ${e})`}return`color-mix(in srgb, ${t} ${Math.round(e*100)}%, transparent)`}import{Fragment as Xc,jsx as Kn,jsxs as Bo}from"react/jsx-runtime";function po({element:t,isSelected:e=!1,elementInfo:o,color:n="#3b82f6",annotationNumber:r,changeCount:i,hideTooltip:a=!1}){let[s,c]=Vc(null);if(Gc(()=>{if(!t){c(null);return}let C=()=>{let Z=t.getBoundingClientRect();c(Z)};return C(),window.addEventListener("scroll",C,{passive:!0}),window.addEventListener("resize",C,{passive:!0}),()=>{window.removeEventListener("scroll",C),window.removeEventListener("resize",C)}},[t]),!s||!t)return null;let l={position:"fixed",top:s.top,left:s.left,width:s.width,height:s.height,pointerEvents:"none",zIndex:9996,backgroundColor:e?Jn(n,.1):Jn(n,.05),overflow:"visible"},d={position:"absolute",width:2,height:2,backgroundColor:n,pointerEvents:"none"},p=t.tagName.toLowerCase(),u=t.id?`#${t.id}`:"",f=t.classList.length>0?"."+Array.from(t.classList).slice(0,2).join("."):"",g=o==null?void 0:o.reactComponent,h=g?`<${g}> ${p}${u}${f}`:`${p}${u}${f}`,S=22,x=s.height>=window.innerHeight,L=x?0:s.top>=S?s.top-S:s.bottom,R=x?{position:"absolute",top:8,left:8,zIndex:9997,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,pointerEvents:"none",whiteSpace:"nowrap",maxWidth:400}:{position:"fixed",top:L,left:s.left,zIndex:9997,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,pointerEvents:"none",whiteSpace:"nowrap",maxWidth:400},T=!a&&Bo("div",{"data-devtools":"tooltip",style:R,children:[r!==void 0&&Bo("span",{children:[r,"."]}),Kn("span",{style:{overflow:"hidden",textOverflow:"ellipsis",flex:1,minWidth:0},children:h}),i!==void 0&&i>0&&Bo("span",{style:{opacity:.8},children:["(",i," ",i===1?"change":"changes",")"]})]});return Bo(Xc,{children:[Bo("div",{"data-devtools":"highlight",style:l,children:[Kn("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},children:Kn("rect",m({x:"0.5",y:"0.5",width:Math.max(0,s.width-1),height:Math.max(0,s.height-1),fill:"none",stroke:n,strokeWidth:"1"},!e&&{strokeDasharray:"2 4"}))}),Kn("div",{style:b(m({},d),{top:-1,left:-1})}),Kn("div",{style:b(m({},d),{top:-1,right:-1})}),Kn("div",{style:b(m({},d),{bottom:-1,left:-1})}),Kn("div",{style:b(m({},d),{bottom:-1,right:-1})}),x&&T]}),!x&&T]})}import{useEffect as ca,useLayoutEffect as Jc,useState as qr}from"react";import{jsx as Rn,jsxs as ti}from"react/jsx-runtime";function Qr(t,e){let o=t.match(/^oklch\(([^)]+)\)$/i);return o?`oklch(${o[1]} / ${e})`:`color-mix(in srgb, ${t} ${Math.round(e*100)}%, transparent)`}function ei({element:t,gap:e,accentColor:o,hoveredAxis:n,draggingAxis:r,cursorViewport:i,isAutoGap:a=!1,refreshKey:s=0}){let[c,l]=qr(null),[d,p]=qr([]),[u,f]=qr(!1);if(ca(()=>{let Y=B=>{(B.key==="Meta"||B.key==="Control")&&f(!0)},q=B=>{(B.key==="Meta"||B.key==="Control")&&f(!1)},tt=()=>f(!1);return window.addEventListener("keydown",Y,!0),window.addEventListener("keyup",q,!0),window.addEventListener("blur",tt),()=>{window.removeEventListener("keydown",Y,!0),window.removeEventListener("keyup",q,!0),window.removeEventListener("blur",tt)}},[]),ca(()=>{if(!t){l(null),p([]);return}let Y=()=>{l(t.getBoundingClientRect()),p(Gn(t))};return Y(),window.addEventListener("scroll",Y,{passive:!0}),window.addEventListener("resize",Y,{passive:!0}),()=>{window.removeEventListener("scroll",Y),window.removeEventListener("resize",Y)}},[t]),Jc(()=>{t&&(l(t.getBoundingClientRect()),p(Gn(t)))},[t,e.row,e.column,s]),!c||d.length===0)return null;let g=c.width,h=c.height,S="pm-gap-stripe-pattern",x=Qr(o,.25),L=Qr(o,.1),R=Qr(o,.2),A=8,T=2,C={position:"fixed",top:c.top,left:c.left,width:g,height:h,pointerEvents:"none",zIndex:9996,overflow:"visible"},Z=r!=null?r:n;return ti("div",{"data-devtools":"gap-handles",style:C,children:[ti("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${g} ${h}`,children:[Rn("defs",{children:Rn("pattern",{id:S,patternUnits:"userSpaceOnUse",width:"4",height:"4",patternTransform:"rotate(45)",children:Rn("line",{x1:"0",y1:"0",x2:"0",y2:"4",stroke:x,strokeWidth:"1.5"})})}),Rn("rect",{x:"0.5",y:"0.5",width:Math.max(0,g-1),height:Math.max(0,h-1),fill:"none",stroke:R,strokeWidth:"1"}),d.map((Y,q)=>{let tt=Y.x-c.left,B=Y.y-c.top,V=Y.w,Q=Y.h,Mt=u?Y.axis===Z:!0;return(Y.axis==="row"?e.row:e.column)===0?null:ti("g",{opacity:Mt?1:.6,children:[Rn("rect",{x:tt,y:B,width:V,height:Q,fill:L}),Rn("rect",{x:tt,y:B,width:V,height:Q,fill:`url(#${S})`})]},q)}),Z&&(()=>{let Y=d.filter(It=>It.axis===Z);if(Y.length===0)return null;let q=Y[0];if(i&&Y.length>1){let It=1/0;for(let Pt of Y){let Xt=Pt.x+Pt.w/2,oe=Pt.y+Pt.h/2,ct=Math.abs(i.x-Xt)+Math.abs(i.y-oe);ct<It&&(It=ct,q=Pt)}}let tt=q.x-c.left,B=q.y-c.top,V=q.w,Q=q.h,Mt=tt+V/2,dt=B+Q/2;if(a)return Rn("circle",{cx:Mt,cy:dt,r:1.5,fill:o,stroke:"#ffffff",strokeWidth:4,paintOrder:"stroke"});let vt=Z==="column",Dt=vt?T:A,Ht=vt?A:T,Rt=Mt-Dt/2,j=dt-Ht/2;return Rn("rect",{x:Rt,y:j,width:Dt,height:Ht,fill:o,stroke:"#ffffff",strokeWidth:4,paintOrder:"stroke"})})()]}),i&&Z&&(()=>{let Y=a?"auto":String(Math.round(Z==="row"?e.row:e.column));return Rn("div",{style:{position:"fixed",left:i.x+8,top:i.y-28,background:o,color:"#fff",fontSize:11,fontWeight:600,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',lineHeight:1,padding:"4px 4px",borderRadius:0,whiteSpace:"nowrap",pointerEvents:"none",zIndex:9997},children:Y})})()]})}import{useCallback as Qc,useEffect as td,useState as ed}from"react";import{useEffect as Kc,useState as da}from"react";var Uc=3,Zc=250,ni=["reviewing","considering","thinking","zhuzhing","iterating","tweaking","reflecting","noodling","pondering","finessing","polishing","riffing"],qc=3e3;function ir(t){let[e,o]=da(0),[n,r]=da(()=>Math.floor(Math.random()*ni.length));return Kc(()=>{if(!t)return;let i=setInterval(()=>o(s=>(s+1)%Uc),Zc),a=setInterval(()=>r(s=>(s+1)%ni.length),qc);return()=>{clearInterval(i),clearInterval(a)}},[t]),{charIndex:e,word:ni[n]}}import{Fragment as oi,jsx as dn,jsxs as fo}from"react/jsx-runtime";function nd(t){let{element:e}=t,o=e.tagName,n=e.id?`#${e.id}`:"",r=e.className?"."+e.className.split(" ").slice(0,2).join("."):"",i=e.reactComponent;return i?`<${i}> ${o}${n}${r}`:`${o}${n}${r}`}var ua=22,ri=12;function od(i){var a=i,{left:t,top:e,style:o,children:n}=a,r=Fn(a,["left","top","style","children"]);return dn("div",b(m({"data-devtools":"badge-hit-area"},r),{style:m({position:"fixed",left:`max(0px, ${t}px)`,top:`max(0px, ${e}px)`,padding:ri,transform:`translate(min(0px, calc(100vw - max(0px, ${t}px) - 100%)), min(0px, calc(100vh - max(0px, ${e}px) - 100%)))`},o),children:n}))}function pa({styleModifications:t,isInspecting:e,accentColor:o,annotationGroupCount:n,dispatch:r,inFlightSelectors:i}){let[a,s]=ed([]),c=i&&i.size>0,{charIndex:l,word:d}=ir(!!c);td(()=>{if(e){s([]);return}let g=null,h=()=>{let L=[];t.forEach((R,A)=>{let T=Ve(R.selector);if(!T)return;let C=T.getBoundingClientRect();L.push({selector:R.selector,modIndex:A,top:C.top>=ua?C.top-ua:C.bottom,left:C.left,label:nd(R),changeCount:R.changes.length,annotationNumber:n+A+1})}),s(L)},S=()=>{g&&cancelAnimationFrame(g),g=requestAnimationFrame(h)};h(),window.addEventListener("scroll",S,!0),window.addEventListener("resize",S,!0);let x=new MutationObserver(S);return x.observe(document.body,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["style","class"]}),window.addEventListener("load",S),document.fonts.ready.then(S),()=>{window.removeEventListener("scroll",S,!0),window.removeEventListener("resize",S,!0),window.removeEventListener("load",S),x.disconnect(),g&&cancelAnimationFrame(g)}},[t,e,n]);let p=Qc(g=>{let h=t[g];if(!h)return;let S=Ve(h.selector);S&&(r({type:"SELECT_ANNOTATION",payload:{id:null}}),r({type:"SET_TOOL",payload:"inspector"}),r({type:"SELECT_ELEMENT",payload:{el:S,info:h.element}}))},[t,r]);if(a.length===0)return null;let u={display:"flex",alignItems:"center",gap:6,backgroundColor:o,color:"#fff",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',padding:"4px 8px",borderRadius:0,whiteSpace:"nowrap",maxWidth:400},f={overflow:"hidden",textOverflow:"ellipsis",flex:1,minWidth:0};return dn(oi,{children:a.map(g=>{let h=i==null?void 0:i.has(g.selector);return dn(od,{left:g.left-ri,top:g.top-ri,onClick:()=>p(g.modIndex),style:{zIndex:1e4,cursor:"pointer",pointerEvents:"auto"},children:fo("div",{"data-devtools":"badge",style:b(m({},u),{backgroundColor:h?"#999999":o}),children:[fo("span",{children:[g.annotationNumber,"."]}),dn("span",{style:f,children:g.label}),fo("span",{style:{opacity:.8},children:["(",g.changeCount," ",g.changeCount===1?"change":"changes",")"]}),h&&fo("span",{style:{opacity:.8,marginLeft:4,display:"inline-flex",alignItems:"center",gap:4},children:[dn("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:"currentColor",style:{verticalAlign:"middle"},children:l===1?fo(oi,{children:[dn("circle",{cx:"7",cy:"7",r:"2"}),dn("circle",{cx:"17",cy:"7",r:"2"}),dn("circle",{cx:"7",cy:"17",r:"2"}),dn("circle",{cx:"17",cy:"17",r:"2"})]}):fo(oi,{children:[dn("circle",{cx:"12",cy:"6",r:"2"}),dn("circle",{cx:"6",cy:"12",r:"2"}),dn("circle",{cx:"18",cy:"12",r:"2"}),dn("circle",{cx:"12",cy:"18",r:"2"})]})}),d]})]})},g.selector)})})}import{useEffect as rd,useState as id}from"react";import{Fragment as ad,jsx as fa}from"react/jsx-runtime";function sd(t,e){let o=t.match(/^oklch\(([^)]+)\)$/i);return o?`oklch(${o[1]} / ${e})`:`color-mix(in srgb, ${t} ${Math.round(e*100)}%, transparent)`}function ga({styleModifications:t,accentColor:e}){let[o,n]=id([]);if(rd(()=>{let i=null,a=()=>{let l=[];for(let d of t){let p=Ve(d.selector);if(!p)continue;let u=p.getBoundingClientRect();if(u.width===0&&u.height===0)continue;let f=Vn(p);l.push({selector:d.selector,top:u.top,left:u.left,width:u.width,height:u.height,borderRadius:`${f["top-left"]}px ${f["top-right"]}px ${f["bottom-right"]}px ${f["bottom-left"]}px`})}n(l)},s=()=>{i&&cancelAnimationFrame(i),i=requestAnimationFrame(a)};a(),window.addEventListener("scroll",s,{passive:!0}),window.addEventListener("resize",s,{passive:!0});let c=new MutationObserver(s);return c.observe(document.body,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["style","class"]}),()=>{window.removeEventListener("scroll",s),window.removeEventListener("resize",s),c.disconnect(),i&&cancelAnimationFrame(i)}},[t]),o.length===0)return null;let r=sd(e,.2);return fa(ad,{children:o.map(i=>{let a={position:"fixed",top:i.top,left:i.left,width:i.width,height:i.height,pointerEvents:"none",zIndex:9995,border:`1px solid ${r}`,borderRadius:i.borderRadius,boxSizing:"border-box"};return fa("div",{"data-devtools":"mod-border",style:a},i.selector)})})}import{useEffect as ma,useLayoutEffect as ld,useState as ha}from"react";import{jsx as Hn,jsxs as si}from"react/jsx-runtime";function ii(t,e){let o=t.match(/^oklch\(([^)]+)\)$/i);return o?`oklch(${o[1]} / ${e})`:`color-mix(in srgb, ${t} ${Math.round(e*100)}%, transparent)`}var cd={top:"bottom",bottom:"top",left:"right",right:"left"};function ai({element:t,padding:e,accentColor:o,hoveredSide:n,draggingSide:r,cursorViewport:i,refreshKey:a}){let[s,c]=ha(null),[l,d]=ha(!1);if(ma(()=>{let V=dt=>{(dt.key==="Meta"||dt.key==="Control")&&d(!0)},Q=dt=>{(dt.key==="Meta"||dt.key==="Control")&&d(!1)},Mt=()=>d(!1);return window.addEventListener("keydown",V,!0),window.addEventListener("keyup",Q,!0),window.addEventListener("blur",Mt),()=>{window.removeEventListener("keydown",V,!0),window.removeEventListener("keyup",Q,!0),window.removeEventListener("blur",Mt)}},[]),ma(()=>{if(!t){c(null);return}let V=()=>{c(t.getBoundingClientRect())};return V(),window.addEventListener("scroll",V,{passive:!0}),window.addEventListener("resize",V,{passive:!0}),()=>{window.removeEventListener("scroll",V),window.removeEventListener("resize",V)}},[t]),ld(()=>{t&&c(t.getBoundingClientRect())},[t,e.top,e.right,e.bottom,e.left,a]),!s)return null;let p=s.width,u=s.height,{top:f,right:g,bottom:h,left:S}=e,x="pm-stripe-pattern",L=ii(o,.25),R=ii(o,.1),A=ii(o,.2),T=8,C=2,Z={position:"fixed",top:s.top,left:s.left,width:p,height:u,pointerEvents:"none",zIndex:9996,overflow:"visible"},Y=["top","right","bottom","left"],q={top:`0,0 ${p},0 ${p-g},${f} ${S},${f}`,right:`${p},0 ${p},${u} ${p-g},${u-h} ${p-g},${f}`,bottom:`0,${u} ${S},${u-h} ${p-g},${u-h} ${p},${u}`,left:`0,0 ${S},${f} ${S},${u-h} 0,${u}`},tt={top:{x:p/2-T/2,y:f/2-C/2,w:T,h:C},bottom:{x:p/2-T/2,y:u-h/2-C/2,w:T,h:C},left:{x:S/2-C/2,y:u/2-T/2,w:C,h:T},right:{x:p-g/2-C/2,y:u/2-T/2,w:C,h:T}},B=new Set;return r?B.add(r):n&&(B.add(n),l||B.add(cd[n])),si("div",{"data-devtools":"padding-handles",style:Z,children:[si("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${p} ${u}`,children:[Hn("defs",{children:Hn("pattern",{id:x,patternUnits:"userSpaceOnUse",width:"4",height:"4",patternTransform:"rotate(45)",children:Hn("line",{x1:"0",y1:"0",x2:"0",y2:"4",stroke:L,strokeWidth:"1.5"})})}),Hn("rect",{x:"0.5",y:"0.5",width:Math.max(0,p-1),height:Math.max(0,u-1),fill:"none",stroke:A,strokeWidth:"1"}),Y.map(V=>{if(e[V]<=0)return null;let Mt=B.has(V);return si("g",{opacity:Mt?1:.6,children:[Hn("polygon",{points:q[V],fill:R}),Hn("polygon",{points:q[V],fill:`url(#${x})`})]},V)}),Y.map(V=>{let Q=tt[V],Mt=B.has(V);return Hn("rect",{x:Q.x,y:Q.y,width:Q.w,height:Q.h,fill:o,stroke:"#ffffff",strokeWidth:Mt?4:2,paintOrder:"stroke"},`handle-${V}`)})]}),i&&(n||r)&&(()=>{let V=r!=null?r:n,Q=Math.round(e[V]);return Hn("div",{style:{position:"fixed",left:i.x+8,top:i.y-28,background:o,color:"#fff",fontSize:11,fontWeight:600,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',lineHeight:1,padding:"4px 4px",borderRadius:0,whiteSpace:"nowrap",pointerEvents:"none",zIndex:9997},children:Q})})()]})}import{useCallback as Cn,useEffect as gn,useMemo as pr,useRef as ln,useState as ze}from"react";import{Check as ur,ChevronDown as mi,MoveHorizontal as Ia,RotateCcw as Bd,Shrink as Dd,X as Fd}from"lucide-react";var dd="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMicgaGVpZ2h0PScxMic+PGRlZnM+PHBhdHRlcm4gaWQ9J2QnIHdpZHRoPSc0JyBoZWlnaHQ9JzQnIHBhdHRlcm5Vbml0cz0ndXNlclNwYWNlT25Vc2UnPjxwYXRoIGQ9J00tMSwxIGwyLC0yIE0wLDQgbDQsLTQgTTMsNSBsMiwtMicgc3Ryb2tlPSdibGFjaycgc3Ryb2tlLXdpZHRoPScuNScvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9JzEyJyBoZWlnaHQ9JzEyJyBmaWxsPSd1cmwoI2QpJy8+PC9zdmc+",hn={borderWidth:3,borderStyle:"solid",borderImage:`url("${dd}") 4 / 1.9 / 0 round`};var sr={"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(t){var e,o;return(o=(e=sr[t])==null?void 0:e[0])!=null?o:"px"}function zn(t){let e=t.match(/^([\d.-]+)(.*)$/);return e?{num:parseFloat(e[1]),unit:e[2]||""}:{num:0,unit:""}}function ar(t,e,o,n){let r=t.trim();if(!r)return"";let i=r.match(/^(-?[\d.]+)\s*(rem|em|px|%)$/i);if(i)return`${parseFloat(i[1])}${i[2].toLowerCase()}`;let a=parseFloat(r);if(!isNaN(a)){if(n){let{unit:s}=zn(o);return`${a}${s||go(e)}`}return`${a}${go(e)}`}return r}function li(t,e){if(!e||e==="px")return t;if(e==="rem"){let o=parseFloat(getComputedStyle(document.documentElement).fontSize)||16;return Math.round(t/o*1e3)/1e3}return t}import{useCallback as ud,useEffect as pd,useRef as ya,useState as fd}from"react";import{Plus as ba,X as gd}from"lucide-react";import{jsx as an,jsxs as Un}from"react/jsx-runtime";var lr=[{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 md(t){if(!t||t==="none")return[];let e=[],o=/([\w-]+)\(([^)]+)\)/g,n;for(;(n=o.exec(t))!==null;){let r=n[1],i=n[2],a=parseFloat(i);isNaN(a)||e.push({name:r,value:a})}return e}function ci(t){return t.length===0?"none":t.map(e=>{var r;let o=lr.find(i=>i.name===e.name),n=(r=o==null?void 0:o.unit)!=null?r:"";return`${e.name}(${e.value}${n})`}).join(" ")}function xa({value:t,onChange:e,accentColor:o,modified:n,panelContentRef:r}){let i=md(t),[a,s]=fd(!1),c=ya(null),l=ya(null);pd(()=>{if(!a)return;let R=A=>{c.current&&!c.current.contains(A.target)&&s(!1)};return document.addEventListener("mousedown",R,!0),()=>document.removeEventListener("mousedown",R,!0)},[a]);let d=lr.filter(R=>!i.some(A=>A.name===R.name)),p=R=>{let A=[...i,{name:R.name,value:R.defaultValue}];e(ci(A)),s(!1)},u=R=>{let A=i.filter((T,C)=>C!==R);e(ci(A))},f=(R,A)=>{let T=i.map((C,Z)=>Z===R?b(m({},C),{value:A}):C);e(ci(T))},g={width:"100%",padding:"4px 8px",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',border:"none",borderRadius:2,outline:"none",backgroundColor:"transparent"},h=ud(R=>{var B;if(!l.current)return{position:"fixed",top:0,left:0};let A=l.current.getBoundingClientRect(),T=l.current.closest('[data-devtools="panel"]'),C=T?T.getBoundingClientRect():{top:0,left:0,bottom:9999},Z=(B=r==null?void 0:r.current)==null?void 0:B.getBoundingClientRect(),Y=R*24+8,tt=C.bottom-A.bottom<Y;return b(m({position:"fixed"},tt?{bottom:C.bottom-A.top+2-C.top}:{top:A.bottom+2-C.top}),{left:Z?Z.left+4-C.left:A.left-C.left,width:Z?Z.width-8:140,zIndex:10001})},[r]),S={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)"},x={display:"block",width:"100%",padding:"4px 10px",border:"none",backgroundColor:"transparent",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#334155",cursor:"pointer",textAlign:"left"},L=R=>an("div",{ref:c,style:m(m({},h(R.length)),S),children:R.map(A=>an("button",{type:"button",onClick:()=>p(A),style:x,onMouseEnter:T=>{T.currentTarget.style.backgroundColor="rgba(0,0,0,0.05)"},onMouseLeave:T=>{T.currentTarget.style.backgroundColor="transparent"},children:A.label},A.name))});return i.length===0?Un("div",{children:[Un("div",{style:{display:"flex",alignItems:"center",gap:4},children:[an(An,{modified:!1,children:an("input",{type:"text",value:"",placeholder:"\u2014",readOnly:!0,style:b(m({},g),{color:"#999",cursor:"default"})})}),an("button",{ref:l,type:"button",onClick:()=>s(!a),style:{display:"flex",alignItems:"center",justifyContent:"center",width:20,height:20,padding:0,border:"none",borderRadius:2,backgroundColor:"transparent",color:"#94a3b8",cursor:"pointer",flexShrink:0},children:an(ba,{size:12})})]}),a&&L(lr)]}):Un("div",{style:{display:"flex",flexDirection:"column",gap:4,position:"relative"},children:[i.map((R,A)=>{let T=lr.find(C=>C.name===R.name);return T?Un("div",{style:{display:"flex",alignItems:"center",gap:4},children:[an("span",{style:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:n?o:"#94a3b8",fontWeight:n?600:400,width:56,flexShrink:0,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},children:T.label}),an(An,{modified:n,children:Un("div",{style:{display:"flex",alignItems:"center",gap:4,padding:"0 4px"},children:[an("input",{type:"range",min:T.min,max:T.max,step:T.step,value:R.value,onChange:C=>f(A,parseFloat(C.target.value)),style:{flex:1,height:2,appearance:"none",WebkitAppearance:"none",background:`linear-gradient(to right, ${o} ${(R.value-T.min)/(T.max-T.min)*100}%, rgba(0,0,0,0.1) ${(R.value-T.min)/(T.max-T.min)*100}%)`,borderRadius:1,outline:"none",cursor:"pointer"}}),an("input",{type:"number",min:T.min,max:T.max,step:T.step,value:T.unit==="px"||T.unit==="deg"?Math.round(R.value):Math.round(R.value*100)/100,onChange:C=>f(A,parseFloat(C.target.value)||0),style:b(m({},g),{width:44,padding:"2px 4px",textAlign:"right",flexShrink:0})}),T.unit&&an("span",{style:{fontSize:9,color:"#94a3b8",fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',flexShrink:0,width:16},children:T.unit})]})}),an("button",{type:"button",onClick:()=>u(A),style:{display:"flex",alignItems:"center",justifyContent:"center",width:16,height:16,padding:0,border:"none",borderRadius:2,backgroundColor:"transparent",color:"#94a3b8",cursor:"pointer",flexShrink:0},children:an(gd,{size:10})})]},R.name):null}),d.length>0&&Un("div",{children:[Un("button",{ref:l,type:"button",onClick:()=>s(!a),style:{display:"flex",alignItems:"center",gap:4,padding:"2px 4px",border:"none",borderRadius:2,backgroundColor:"transparent",fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#94a3b8",cursor:"pointer"},children:[an(ba,{size:10}),"Add filter"]}),a&&L(d)]})]})}import{useCallback as ho,useEffect as xd,useRef as cr,useState as va}from"react";import{AlignHorizontalSpaceAround as vd,AlignVerticalSpaceAround as Sd,Columns3 as wd,Grid2x2 as kd,RectangleHorizontal as Cd,Rows3 as Ed,UnfoldHorizontal as Sa,UnfoldVertical as wa}from"lucide-react";import{useCallback as hd,useEffect as yd,useRef as Do}from"react";import{jsx as bd}from"react/jsx-runtime";var di=[0,1,2,4,8,12,16,20,24,28,32];function mo({value:t,onChange:e,onPreview:o,onScrubEnd:n,onReset:r,isModified:i,accentColor:a,defaultUnit:s="rem",snapSteps:c,color:l,style:d,children:p}){let u=Do(null),f=Do(null),g=Do(r),h=Do(i),S=Do(!1);g.current=r,h.current=i,yd(()=>{let L=A=>{let T=f.current;if(!T)return;T.hasMoved=!0,S.current=A.shiftKey;let C=T.unit==="rem"||T.unit==="em"?.1:1;T.accum+=A.movementX*C;let Z=Math.max(0,Math.round((T.startValue+T.accum)*10)/10);if(A.shiftKey&&c){let Y=T.unit==="rem"||T.unit==="em"?parseFloat(getComputedStyle(document.documentElement).fontSize)||16:1,q=T.unit==="rem"||T.unit==="em"?Z*Y:Z,tt=c[c.length-1];for(let B=0;B<c.length-1;B++){let V=c[B],Q=c[B+1];if(q<=(V+Q)/2){tt=V;break}if(q<Q){tt=Q;break}}q>c[c.length-1]&&(tt=Math.round(q/8)*8),Z=T.unit==="rem"||T.unit==="em"?Math.round(tt/Y*1e3)/1e3:tt}o==null||o(`${Z}${T.unit}`)},R=()=>{let A=f.current;if(!A)return;let T=Math.max(0,Math.round((A.startValue+A.accum)*10)/10);if(S.current&&c){let Z=A.unit==="rem"||A.unit==="em"?parseFloat(getComputedStyle(document.documentElement).fontSize)||16:1,Y=A.unit==="rem"||A.unit==="em"?T*Z:T,q=c[c.length-1];for(let tt=0;tt<c.length-1;tt++){let B=c[tt],V=c[tt+1];if(Y<=(B+V)/2){q=B;break}if(Y<V){q=V;break}}Y>c[c.length-1]&&(q=Math.round(Y/8)*8),T=A.unit==="rem"||A.unit==="em"?Math.round(q/Z*1e3)/1e3:q}let C=A.hasMoved&&T!==A.startValue;f.current=null,document.exitPointerLock(),C?e(`${T}${A.unit}`):A.hasMoved?o==null||o(`${A.startValue}${A.unit}`):h.current&&g.current&&g.current(),n==null||n()};return document.addEventListener("mousemove",L),document.addEventListener("mouseup",R),()=>{document.removeEventListener("mousemove",L),document.removeEventListener("mouseup",R)}},[e,o,n]);let x=hd(L=>{var T;if(L.button!==0)return;L.preventDefault();let R=zn(t),A=R.unit&&R.unit!=="px"?R.unit:s;f.current={startValue:R.num,unit:A,accum:0,hasMoved:!1},(T=u.current)==null||T.requestPointerLock()},[t,s]);return bd("span",{ref:u,onMouseDown:x,title:i?"Click to reset \xB7 Drag to scrub":"Drag to scrub",style:m({color:i?a||"#3b82f6":l||"#999",padding:"0 4px",display:"flex",alignItems:"center",cursor:"ew-resize"},d),children:p})}import{Fragment as ui,jsx as Lt,jsxs as Fe}from"react/jsx-runtime";function Td({gridCols:t,gridRows:e,gridModified:o,accentColor:n,onColsChange:r,onRowsChange:i}){return Lt(un,{style:{width:100},children:Fe("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",padding:"8px 4px"},children:[Lt("input",{type:"number",min:1,max:12,value:t,onChange:a=>r(parseInt(a.target.value)||1),style:b(m({},He),{width:32,textAlign:"center",padding:2})}),Lt("span",{style:{fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:o?n:"#999",fontWeight:o?600:400,fontSize:11,margin:"0 4px"},children:"\xD7"}),Lt("input",{type:"number",min:1,max:12,value:e,onChange:a=>i(parseInt(a.target.value)||1),style:b(m({},He),{width:32,textAlign:"center",padding:2})})]})})}function ka({element:t,getValue:e,getOriginalValue:o,handleChange:n,isModified:r,onResetProperty:i,isCollapsed:a,onToggle:s,sectionHeaderStyle:c,activeDropdown:l,onDropdownChange:d,panelContentRef:p,accentColor:u,onFieldHover:f,preferredUnit:g,onUnitCycle:h}){let S=d,x=e("display"),L=e("flex-direction"),R=Ca(x,L),A=x==="flex"||x==="inline-flex",T=x==="grid",C=A||T,Z=e("width"),Y=e("height"),q=r("width")?Z:Uo(t,"width"),tt=r("height")?Y:Uo(t,"height"),B=pi(Z,q),V=pi(Y,tt),Q=e("min-width"),Mt=e("max-width"),dt=e("min-height"),vt=e("max-height"),Dt=yo(e("padding")),Ht=e("gap"),Rt=e("row-gap"),j=e("column-gap"),It=e("grid-template-columns"),Pt=e("grid-template-rows"),Xt=e("overflow"),oe=It.split(/\s+/).filter(K=>K&&K!=="none").length||1,ct=Pt.split(/\s+/).filter(K=>K&&K!=="none").length||1,[ge,N]=va(!1),rt=l!==null,Ft=rt||ge,ut=rt?.3:ge?.65:1,jt=({mode:K,icon:wt,active:qt})=>Lt("button",{type:"button",onClick:()=>Ea(K,n),style:{flex:1,display:"flex",alignItems:"center",justifyContent:"center",padding:"6px 8px",border:"none",borderRadius:2,backgroundColor:qt?Jn(u,.15):"transparent",color:qt?u:"#64748b",cursor:"pointer",fontSize:14},children:wt}),kt=(K,wt,qt)=>{qt==="fixed"?n(K,wt):n(K,dr(qt,wt))},z=K=>{let wt=yo(e("padding")),qt=K||"0";n("padding",`${wt.top} ${qt} ${wt.bottom} ${qt}`)},ot=K=>{let wt=yo(e("padding")),qt=K||"0";n("padding",`${qt} ${wt.right} ${qt} ${wt.left}`)},[it,yt]=va({}),Nt=ho((K,wt)=>qt=>{wt(qt),yt(ye=>b(m({},ye),{[K]:qt}))},[]),Ct=ho(K=>{yt(wt=>{let qt=m({},wt);return delete qt[K],qt})},[]),bt=ho(K=>{let wt=yo(e("padding"));Yt(t,"padding",`${wt.top} ${K} ${wt.bottom} ${K}`)},[t,e]),pe=ho(K=>{let wt=yo(e("padding"));Yt(t,"padding",`${K} ${wt.right} ${K} ${wt.left}`)},[t,e]),Gt=ho(K=>wt=>{Yt(t,K,wt)},[t]),ie=L==="column"||L==="column-reverse",Ie=K=>K==="center"?1:K==="flex-end"||K==="end"?2:0,ee=Ie(e("justify-content")),_e=Ie(e("align-items")),Ut=ie?_e:ee,me=ie?ee:_e,je=cr(null),he=cr({x:0,y:0}),Ke=cr({col:Ut,row:me});Ke.current={col:Ut,row:me};let Ge=ho((K,wt)=>{let qt=["flex-start","center","flex-end"];ie?(n("justify-content",qt[wt]),n("align-items",qt[K])):(n("justify-content",qt[K]),n("align-items",qt[wt]))},[ie,n]),$e=cr(Ge);$e.current=Ge,xd(()=>{let wt=qt=>{let ye=je.current;if(!ye||!ye.contains(qt.target))return;qt.preventDefault(),qt.stopPropagation(),he.current.x+=qt.deltaX,he.current.y+=qt.deltaY;let{col:Ce,row:de}=Ke.current,te=!1;Math.abs(he.current.x)>=30&&(Ce=Math.max(0,Math.min(2,Ce+(he.current.x>0?1:-1))),he.current.x=0,he.current.y=0,te=!0),!te&&Math.abs(he.current.y)>=30&&(de=Math.max(0,Math.min(2,de+(he.current.y>0?1:-1))),he.current.x=0,he.current.y=0,te=!0),te&&(Ce!==Ke.current.col||de!==Ke.current.row)&&$e.current(Ce,de)};return document.addEventListener("wheel",wt,{passive:!1,capture:!0}),()=>document.removeEventListener("wheel",wt,{capture:!0})},[]);let en=()=>Lt("div",{ref:je,onMouseEnter:()=>{N(!0),p.current&&(p.current.style.overflowY="hidden")},onMouseLeave:()=>{N(!1),p.current&&(p.current.style.overflowY="auto")},style:{width:56,height:56,backgroundColor:bn,borderRadius:2,display:"grid",gridTemplateColumns:"repeat(3, 1fr)",gridTemplateRows:"repeat(3, 1fr)",padding:6,gap:2,touchAction:"none"},children:[0,1,2].map(K=>[0,1,2].map(wt=>Lt("button",{type:"button",onClick:()=>Ge(wt,K),style:{width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center",border:"none",backgroundColor:"transparent",cursor:"pointer",padding:0},children:wt===Ut&&K===me?Lt("svg",{width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",style:{flexShrink:0},children:wt===0?Fe(ui,{children:[Lt("rect",{x:"1",y:"1.5",width:"8",height:"1.2",rx:"0.5",fill:u}),Lt("rect",{x:"1",y:"4.4",width:"5",height:"1.2",rx:"0.5",fill:u}),Lt("rect",{x:"1",y:"7.3",width:"7",height:"1.2",rx:"0.5",fill:u})]}):wt===1?Fe(ui,{children:[Lt("rect",{x:"1",y:"1.5",width:"8",height:"1.2",rx:"0.5",fill:u}),Lt("rect",{x:"2.5",y:"4.4",width:"5",height:"1.2",rx:"0.5",fill:u}),Lt("rect",{x:"1.5",y:"7.3",width:"7",height:"1.2",rx:"0.5",fill:u})]}):Fe(ui,{children:[Lt("rect",{x:"1",y:"1.5",width:"8",height:"1.2",rx:"0.5",fill:u}),Lt("rect",{x:"4",y:"4.4",width:"5",height:"1.2",rx:"0.5",fill:u}),Lt("rect",{x:"2",y:"7.3",width:"7",height:"1.2",rx:"0.5",fill:u})]})}):Lt("div",{style:{width:5,height:5,borderRadius:"50%",backgroundColor:"#aaa"}})},`${K}-${wt}`)))}),We=r("grid-template-columns")||r("grid-template-rows");return Fe("div",{style:{borderBottom:"1px solid rgba(0,0,0,0.08)"},children:[Lt("div",{style:c,children:Lt("span",{children:C?"Auto layout":"Layout"})}),Fe("div",{style:{padding:"8px 12px"},children:[Fe("div",{style:{display:"flex",gap:2,marginBottom:8,backgroundColor:bn,borderRadius:2,padding:2,opacity:ut,transition:"opacity 150ms ease"},children:[Lt(jt,{mode:"block",icon:Lt(Cd,{size:16}),active:R==="block"}),Lt(jt,{mode:"flex-col",icon:Lt(Ed,{size:16}),active:R==="flex-col"}),Lt(jt,{mode:"flex-row",icon:Lt(wd,{size:16}),active:R==="flex-row"}),Lt(jt,{mode:"grid",icon:Lt(kd,{size:16}),active:R==="grid"})]}),Fe("div",{style:{display:"flex",gap:4,marginBottom:8},children:[Lt(fi,{label:"W",property:"width",cssValue:B==="fixed"?Z:`${Math.round(t.getBoundingClientRect().width)}px`,mode:B,onValueChange:K=>n("width",K),onModeChange:K=>{if(K==="fixed"){let wt=t.getBoundingClientRect();n("width",`${Math.round(wt.width)}px`)}else n("width",dr(K,Z))},modified:r("width"),dimmed:rt&&l!=="width",dropdownOpen:l==="width",onDropdownChange:K=>S(K?"width":null),panelContentRef:p,accentColor:u,onReset:()=>i("width"),minValue:Q!=="none"&&Q!=="0px"&&Q!=="auto"?Q:"",maxValue:Mt!=="none"&&Mt!=="auto"?Mt:"",onMinChange:K=>n("min-width",K||"0"),onMaxChange:K=>n("max-width",K||"none"),onMinReset:()=>i("min-width"),onMaxReset:()=>i("max-width"),minModified:r("min-width"),maxModified:r("max-width")}),Lt(fi,{label:"H",property:"height",cssValue:V==="fixed"?Y:`${Math.round(t.getBoundingClientRect().height)}px`,mode:V,onValueChange:K=>n("height",K),onModeChange:K=>{if(K==="fixed"){let wt=t.getBoundingClientRect();n("height",`${Math.round(wt.height)}px`)}else n("height",dr(K,Y))},modified:r("height"),dimmed:rt&&l!=="height",dropdownOpen:l==="height",onDropdownChange:K=>S(K?"height":null),panelContentRef:p,minValue:dt!=="none"&&dt!=="0px"&&dt!=="auto"?dt:"",maxValue:vt!=="none"&&vt!=="auto"?vt:"",onMinChange:K=>n("min-height",K||"0"),onMaxChange:K=>n("max-height",K||"none"),onMinReset:()=>i("min-height"),onMaxReset:()=>i("max-height"),minModified:r("min-height"),maxModified:r("max-height"),accentColor:u,onReset:()=>i("height")})]}),A&&Fe("div",{onMouseEnter:()=>f==null?void 0:f("gap"),onMouseLeave:()=>f==null?void 0:f("element"),style:{display:"flex",gap:8,marginBottom:8},children:[Lt("div",{style:{opacity:rt?.3:1,transition:"opacity 150ms ease"},children:en()}),Fe("div",{style:{flex:1,opacity:ut,transition:"opacity 150ms ease"},children:[Lt("div",{onClick:r("gap")?()=>i("gap"):void 0,title:r("gap")?"Click to reset":void 0,style:{fontSize:9,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:r("gap")?u:"#999",fontWeight:r("gap")?600:400,marginBottom:2,cursor:r("gap")?"pointer":"default"},children:"Gap"}),Lt(un,{dimmed:rt,children:Fe("div",{style:{display:"flex",alignItems:"center"},children:[Lt(mo,{value:Ht,onChange:K=>{Ct("gap"),n("gap",K)},onPreview:Nt("gap",Gt("gap")),onScrubEnd:()=>Ct("gap"),onReset:()=>i("gap"),isModified:r("gap"),accentColor:u,defaultUnit:g,children:L==="column"||L==="column-reverse"?Lt(wa,{size:12,strokeWidth:r("gap")?2.5:1.5}):Lt(Sa,{size:12,strokeWidth:r("gap")?2.5:1.5})}),Lt(yn,{property:"gap",value:it.gap||Ht,onChange:K=>n("gap",K),isModified:r("gap")||"gap"in it,style:b(m({},He),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:g,onUnitCycle:h})]})})]})]}),T&&Fe("div",{onMouseEnter:()=>f==null?void 0:f("gap"),onMouseLeave:()=>f==null?void 0:f("element"),style:{display:"flex",gap:8,marginBottom:8,opacity:ut,transition:"opacity 150ms ease"},children:[Lt(Td,{gridCols:oe,gridRows:ct,gridModified:We,accentColor:u,onColsChange:K=>n("grid-template-columns",`repeat(${K}, 1fr)`),onRowsChange:K=>n("grid-template-rows",`repeat(${K}, 1fr)`)}),Fe("div",{style:{flex:1,display:"flex",flexDirection:"column",gap:4},children:[Lt(un,{dimmed:rt,children:Fe("div",{style:{display:"flex",alignItems:"center"},children:[Lt(mo,{value:j||Ht,onChange:K=>{Ct("column-gap"),n("column-gap",K)},onPreview:Nt("column-gap",Gt("column-gap")),onScrubEnd:()=>Ct("column-gap"),onReset:()=>i("column-gap"),isModified:r("column-gap"),accentColor:u,defaultUnit:g,children:Lt(Sa,{size:12,strokeWidth:r("column-gap")?2.5:1.5})}),Lt(yn,{property:"column-gap",value:it["column-gap"]||j||Ht,onChange:K=>n("column-gap",K),isModified:r("column-gap")||"column-gap"in it,placeholder:"col",style:b(m({},He),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:g,onUnitCycle:h})]})}),Lt(un,{dimmed:rt,children:Fe("div",{style:{display:"flex",alignItems:"center"},children:[Lt(mo,{value:Rt||Ht,onChange:K=>{Ct("row-gap"),n("row-gap",K)},onPreview:Nt("row-gap",Gt("row-gap")),onScrubEnd:()=>Ct("row-gap"),onReset:()=>i("row-gap"),isModified:r("row-gap"),accentColor:u,defaultUnit:g,children:Lt(wa,{size:12,strokeWidth:r("row-gap")?2.5:1.5})}),Lt(yn,{property:"row-gap",value:it["row-gap"]||Rt||Ht,onChange:K=>n("row-gap",K),isModified:r("row-gap")||"row-gap"in it,placeholder:"row",style:b(m({},He),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:g,onUnitCycle:h})]})})]})]}),C&&Fe("div",{onMouseEnter:()=>f==null?void 0:f("padding"),onMouseLeave:()=>f==null?void 0:f("element"),style:{display:"flex",gap:4,marginBottom:8,opacity:ut,transition:"opacity 150ms ease"},children:[Lt(un,{style:{flex:1},dimmed:rt,children:Fe("div",{style:{display:"flex",alignItems:"center"},children:[Lt(mo,{value:Dt.left,onChange:K=>{Ct("padding-h"),z(K)},onPreview:Nt("padding-h",bt),onScrubEnd:()=>Ct("padding-h"),onReset:()=>i("padding"),isModified:r("padding"),accentColor:u,defaultUnit:g,snapSteps:di,children:Lt(vd,{size:12,strokeWidth:r("padding")?2.5:1.5})}),Lt(yn,{property:"padding",value:it["padding-h"]||Dt.left,onChange:K=>z(K),isModified:r("padding")||"padding-h"in it,placeholder:"H pad",style:b(m({},He),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:g,onUnitCycle:h})]})}),Lt(un,{style:{flex:1},dimmed:rt,children:Fe("div",{style:{display:"flex",alignItems:"center"},children:[Lt(mo,{value:Dt.top,onChange:K=>{Ct("padding-v"),ot(K)},onPreview:Nt("padding-v",pe),onScrubEnd:()=>Ct("padding-v"),onReset:()=>i("padding"),isModified:r("padding"),accentColor:u,defaultUnit:g,snapSteps:di,children:Lt(Sd,{size:12,strokeWidth:r("padding")?2.5:1.5})}),Lt(yn,{property:"padding",value:it["padding-v"]||Dt.top,onChange:K=>ot(K),isModified:r("padding")||"padding-v"in it,placeholder:"V pad",style:b(m({},He),{flex:1,minWidth:0}),unitStyle:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",padding:"0 8px"},preferredUnit:g,onUnitCycle:h})]})})]}),Fe("label",{style:{display:"flex",alignItems:"center",gap:8,cursor:"pointer",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#64748b",opacity:ut,transition:"opacity 150ms ease"},children:[Lt("input",{type:"checkbox",checked:Xt==="hidden",onChange:K=>n("overflow",K.target.checked?"hidden":"visible"),style:{margin:0,accentColor:u}}),"Clip content"]})]})]})}import{AlignCenter as Md,AlignJustify as Id,AlignLeft as Ld,AlignRight as Rd,Baseline as Ad,ChevronDown as Pd,WholeWord as Nd}from"lucide-react";import{jsx as ue,jsxs as Pn}from"react/jsx-runtime";var Ta={100:"Thin",200:"Extra Light",300:"Light",400:"Regular",500:"Medium",600:"Semi Bold",700:"Bold",800:"Extra Bold",900:"Black"};function Ma({element:t,getValue:e,handleChange:o,isModified:n,onResetProperty:r,isCollapsed:i,onToggle:a,sectionHeaderStyle:s,accentColor:c,colorVariables:l,activeColorDropdown:d,onColorDropdownChange:p,panelContentRef:u,preferredUnit:f,onUnitCycle:g}){var V;let h=e("font-family"),S=e("font-size"),x=e("font-weight"),L=e("line-height"),R=e("letter-spacing"),A=e("text-align"),T=e("color"),C=String(x),Z=Ta[C]||C,Y=Ao(t,T),q=T.includes("var(")?null:Po(Y,l),tt=({align:Q,icon:Mt})=>{let dt=A===Q;return ue("button",{type:"button",onClick:()=>o("text-align",Q),style:{flex:1,display:"flex",alignItems:"center",justifyContent:"center",padding:"6px 8px",border:"none",borderRadius:2,backgroundColor:dt?Jn(c,.15):"transparent",color:dt?c:"#64748b",cursor:"pointer"},children:Mt})},B=((V=h.split(",")[0])==null?void 0:V.trim().replace(/^["']|["']$/g,""))||"System";return Pn("div",{style:{borderBottom:"1px solid rgba(0,0,0,0.08)"},children:[ue("div",{style:s,children:ue("span",{children:"Typography"})}),Pn("div",{style:{padding:"8px 12px",display:"flex",flexDirection:"column",gap:4},children:[ue(un,{children:Pn("div",{style:{display:"flex",alignItems:"center",padding:"6px 8px"},children:[ue("input",{type:"text",value:h,onChange:Q=>o("font-family",Q.target.value),style:b(m({},He),{flex:1,minWidth:0,padding:0,fontWeight:n("font-family")?600:400,color:n("font-family")?c:"inherit"}),title:h}),ue(Pd,{size:12,style:{color:"#999",flexShrink:0,marginLeft:4}})]})}),Pn("div",{style:{display:"flex",gap:4},children:[ue(un,{style:{flex:1},children:ue("select",{value:C,onChange:Q=>o("font-weight",Q.target.value),style:b(m({},He),{padding:"6px 8px",paddingLeft:4,paddingRight:20,cursor:"pointer",fontWeight:n("font-weight")?600:400,color:n("font-weight")?c:"inherit"}),children:Object.entries(Ta).map(([Q,Mt])=>ue("option",{value:Q,children:Mt},Q))})}),ue(un,{style:{flex:1},children:ue("div",{style:{display:"flex",alignItems:"center",position:"relative"},children:ue(yn,{property:"font-size",value:S,onChange:Q=>o("font-size",Q),isModified:n("font-size"),min:1,max:999,style:b(m({},He),{padding:"6px 8px",paddingRight:24,fontWeight:n("font-size")?600:400,color:n("font-size")?c:"inherit"}),unitStyle:{position:"absolute",right:8,top:"50%",transform:"translateY(-50%)",fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999"},preferredUnit:f,onUnitCycle:g})})})]}),Pn("div",{style:{display:"flex",gap:4},children:[ue(un,{style:{flex:1},children:Pn("div",{style:{display:"flex",alignItems:"center",padding:"6px 8px",gap:4},children:[ue(Ad,{size:12,style:{color:n("line-height")?c:"#999",flexShrink:0}}),ue(yn,{property:"line-height",value:L,onChange:Q=>o("line-height",Q),isModified:n("line-height"),step:.1,min:0,placeholder:"Auto",style:b(m({},He),{flex:1,minWidth:0,padding:0,fontWeight:n("line-height")?600:400,color:n("line-height")?c:"inherit"}),showUnit:!1})]})}),ue(un,{style:{flex:1},children:Pn("div",{style:{display:"flex",alignItems:"center",padding:"6px 8px",gap:4},children:[ue(Nd,{size:12,style:{color:n("letter-spacing")?c:"#999",flexShrink:0}}),ue(yn,{property:"letter-spacing",value:R,onChange:Q=>o("letter-spacing",Q),isModified:n("letter-spacing"),step:.1,placeholder:"\u2014",style:b(m({},He),{flex:1,minWidth:0,padding:0,fontWeight:n("letter-spacing")?600:400,color:n("letter-spacing")?c:"inherit"}),showUnit:!1})]})})]}),Pn("div",{style:{display:"flex",gap:2,backgroundColor:bn,borderRadius:2,padding:2},children:[ue(tt,{align:"left",icon:ue(Ld,{size:14})}),ue(tt,{align:"center",icon:ue(Md,{size:14})}),ue(tt,{align:"right",icon:ue(Rd,{size:14})}),ue(tt,{align:"justify",icon:ue(Id,{size:14})})]}),Pn("div",{style:{display:"flex",alignItems:"center",gap:8,padding:"4px 0"},children:[ue("span",{onClick:n("color")?()=>r("color"):void 0,title:n("color")?"Click to reset":void 0,style:{fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:n("color")?c:"#64748b",fontWeight:n("color")?600:400,cursor:n("color")?"pointer":"default",width:40,flexShrink:0},children:"Color"}),ue("div",{style:{flex:1,minWidth:0},children:ue(gi,{value:T,resolvedValue:Y,colorVariables:l,matchingVariable:q,onChange:Q=>o("color",Q),accentColor:c,modified:n("color"),panelContentRef:u,isDropdownOpen:d==="color",onDropdownChange:Q=>p(Q?"color":null)})})]})]})]})}import{Fragment as Hd,jsx as gt,jsxs as xe}from"react/jsx-runtime";var La=[{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 Od(t,e){let o=e.trim().toLowerCase();switch(t){case"opacity":return o==="1";case"border-width":return o==="0px"||o==="0"||o==="medium";case"border-radius":return o==="0px"||o==="0";case"border-style":return o==="none";case"box-shadow":return o==="none";case"backdrop-filter":return o==="none"||o==="";case"letter-spacing":return o==="normal"||o==="0px"||o==="0";case"background-color":return o==="rgba(0, 0, 0, 0)"||o==="transparent";default:return!1}}function pi(t,e){return!e||t==="auto"||t==="fit-content"||t==="max-content"||t==="min-content"?"hug":t==="100%"||e==="100%"?"fill":"fixed"}function dr(t,e){switch(t){case"hug":return"fit-content";case"fill":return"100%";case"fixed":{let o=zn(e);if(typeof o.num=="number"&&!isNaN(o.num)){let n=o.unit==="%"?"px":o.unit||"px";return`${o.num}${n}`}return"auto"}}}function yo(t){let e=t.split(/\s+/).filter(Boolean);return e.length===1?{top:e[0],right:e[0],bottom:e[0],left:e[0]}:e.length===2?{top:e[0],right:e[1],bottom:e[0],left:e[1]}:e.length===3?{top:e[0],right:e[1],bottom:e[2],left:e[1]}:e.length>=4?{top:e[0],right:e[1],bottom:e[2],left:e[3]}:{top:"0px",right:"0px",bottom:"0px",left:"0px"}}function Ca(t,e){return t==="grid"?"grid":t==="flex"||t==="inline-flex"?e==="column"||e==="column-reverse"?"flex-col":"flex-row":"block"}function Ea(t,e){switch(t){case"block":e("display","block");break;case"flex-row":e("display","flex"),e("flex-direction","row");break;case"flex-col":e("display","flex"),e("flex-direction","column");break;case"grid":e("display","grid");break}}var bn="rgba(0, 0, 0, 0.04)",He={width:"100%",padding:"4px 8px",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',border:"none",borderRadius:2,outline:"none",backgroundColor:"transparent"};function fi({label:t,property:e,cssValue:o,mode:n,onValueChange:r,onModeChange:i,modified:a,dimmed:s,dropdownOpen:c,onDropdownChange:l,panelContentRef:d,accentColor:p="#3b82f6",onReset:u,minValue:f,maxValue:g,onMinChange:h,onMaxChange:S,onMinReset:x,onMaxReset:L,minModified:R,maxModified:A}){let T=zn(o),C=a?T.unit||go(e):go(e),Z=!a&&T.unit&&T.unit!==C?li(T.num,C):T.num,[Y,q]=ze(!1),[tt,B]=ze(String(Z)),[V,Q]=ze(!1),Mt=ln(null),dt=ln(null),vt=ln(null),Dt=ln(!1);gn(()=>{Y||B(String(Z))},[Z,Y]),gn(()=>{if(!c)return;let ct=N=>{dt.current&&!dt.current.contains(N.target)&&vt.current&&!vt.current.contains(N.target)&&(l==null||l(!1))},ge=N=>{N.key==="Escape"&&(l==null||l(!1))};return document.addEventListener("mousedown",ct),document.addEventListener("keydown",ge),()=>{document.removeEventListener("mousedown",ct),document.removeEventListener("keydown",ge)}},[c,l]),gn(()=>{Y&&Mt.current&&(Mt.current.focus(),Mt.current.select())},[Y]);let Ht=()=>{let ct=ar(tt,e,o,a);r(ct||`${Math.max(0,parseFloat(tt)||0)}${C}`),q(!1)},Rt=()=>{if(Dt.current){Dt.current=!1;return}Ht()},j=ct=>{if(ct.key==="Enter"){Ht();return}if(ct.key==="Escape"){Dt.current=!0,B(String(Z)),q(!1);return}if(ct.key==="ArrowUp"||ct.key==="ArrowDown"){ct.preventDefault();let ge=ct.key==="ArrowUp"?1:-1,N=ct.shiftKey?8:ct.altKey?.1:1,rt=parseFloat(tt)||0,Ft=Math.round(Math.max(0,rt+ge*N)*1e3)/1e3;B(String(Ft)),r(`${Ft}${C}`)}},It={fixed:"Fixed",hug:"Hug",fill:"Fill"},Pt={fixed:gt(Ia,{size:12}),hug:gt(Dd,{size:12}),fill:gt(Ia,{size:12})},Xt=()=>{l==null||l(!c)},oe=()=>{if(!vt.current||!(d!=null&&d.current))return{position:"absolute",top:"100%",left:-4,right:-4,width:"calc(100% + 8px)",marginTop:4};let ct=vt.current.getBoundingClientRect(),ge=d.current.getBoundingClientRect(),N=d.current.closest('[data-devtools="panel"]'),rt=N?N.getBoundingClientRect():{top:0,left:0};return{position:"fixed",top:ct.bottom+4-rt.top,left:ge.left+4-rt.left,width:ge.width-8}};return xe("div",{ref:vt,onMouseEnter:()=>Q(!0),onMouseLeave:()=>Q(!1),style:{flex:1,display:"flex",alignItems:"center",position:"relative",borderRadius:2,border:"1px solid",borderColor:Y?p:V?"rgba(0,0,0,0.15)":"transparent",backgroundColor:bn,transition:"border-color 100ms ease, opacity 150ms ease",opacity:s?.3:1},children:[gt("span",{onClick:a&&u?u:void 0,title:a?"Click to reset":void 0,style:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:a?p:"#999",fontWeight:a?600:400,padding:"0 8px",flexShrink:0,cursor:a?"pointer":"default"},children:t}),n==="fixed"?Y?gt("input",{ref:Mt,type:"text",inputMode:"numeric",value:tt,onChange:ct=>B(ct.target.value),onKeyDown:j,onBlur:Rt,style:b(m({},He),{flex:1,minWidth:0,padding:"4px 2px"})}):gt("span",{onClick:()=>q(!0),style:{flex:1,padding:"4px 2px",fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',cursor:"text"},children:Z}):gt("span",{style:{flex:1}}),xe("button",{type:"button",onClick:Xt,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:[It[n],gt(mi,{size:12})]}),c&&xe("div",{ref:dt,style:b(m({},oe()),{backgroundColor:"#ffffff",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:[xe("button",{type:"button",onClick:()=>{i("fixed"),l==null||l(!1)},style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"10px 12px",border:"none",outline:"none",backgroundColor:n==="fixed"?"#f1f5f9":"transparent",color:"#1e293b",fontWeight:n==="fixed"?600:400,cursor:"pointer",textAlign:"left"},children:[Pt.fixed,xe("span",{children:["Fixed ",e," (",o,")"]}),n==="fixed"&>(ur,{size:14,style:{marginLeft:"auto"}})]}),xe("button",{type:"button",onClick:()=>{i("hug"),l==null||l(!1)},style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"10px 12px",border:"none",outline:"none",backgroundColor:n==="hug"?"#f1f5f9":"transparent",color:"#1e293b",fontWeight:n==="hug"?600:400,cursor:"pointer",textAlign:"left"},children:[Pt.hug,gt("span",{children:"Hug contents"}),n==="hug"&>(ur,{size:14,style:{marginLeft:"auto"}})]}),xe("button",{type:"button",onClick:()=>{i("fill"),l==null||l(!1)},style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"10px 12px",border:"none",outline:"none",backgroundColor:n==="fill"?"#f1f5f9":"transparent",color:"#1e293b",fontWeight:n==="fill"?600:400,cursor:"pointer",textAlign:"left"},children:[Pt.fill,gt("span",{children:"Fill container"}),n==="fill"&>(ur,{size:14,style:{marginLeft:"auto"}})]}),gt("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",margin:"4px 0"}}),xe("div",{style:{padding:"8px 12px",display:"flex",flexDirection:"column",gap:4},children:[xe("div",{style:{display:"flex",alignItems:"center",backgroundColor:bn,borderRadius:2,padding:"4px 8px"},children:[gt("span",{onClick:R?ct=>{ct.stopPropagation(),x==null||x()}:void 0,title:R?"Click to reset":void 0,style:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:R?p:"#999",fontWeight:R?600:400,marginRight:8,flexShrink:0,cursor:R?"pointer":"default"},children:"Min"}),gt("input",{type:"text",value:f||"",placeholder:"\u2014",onChange:ct=>h==null?void 0:h(ct.target.value),onClick:ct=>ct.stopPropagation(),style:b(m({},He),{flex:1,minWidth:0,padding:0,textAlign:"right",color:R?p:"inherit",fontWeight:R?600:400})})]}),xe("div",{style:{display:"flex",alignItems:"center",backgroundColor:bn,borderRadius:2,padding:"4px 8px"},children:[gt("span",{onClick:A?ct=>{ct.stopPropagation(),L==null||L()}:void 0,title:A?"Click to reset":void 0,style:{fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:A?p:"#999",fontWeight:A?600:400,marginRight:8,flexShrink:0,cursor:A?"pointer":"default"},children:"Max"}),gt("input",{type:"text",value:g||"",placeholder:"\u2014",onChange:ct=>S==null?void 0:S(ct.target.value),onClick:ct=>ct.stopPropagation(),style:b(m({},He),{flex:1,minWidth:0,padding:0,textAlign:"right",color:A?p:"inherit",fontWeight:A?600:400})})]})]})]})]})}function un({children:t,style:e,dimmed:o}){let[n,r]=ze(!1);return gt("div",{onMouseEnter:()=>r(!0),onMouseLeave:()=>r(!1),style:m({position:"relative",borderRadius:2,border:"1px solid",borderColor:n?"rgba(0,0,0,0.15)":"transparent",backgroundColor:bn,transition:"border-color 100ms ease, opacity 150ms ease",opacity:o?.3:1},e),children:t})}function An({children:t}){let[e,o]=ze(!1);return gt("div",{onMouseEnter:()=>o(!0),onMouseLeave:()=>o(!1),style:{position:"relative",borderRadius:2,border:"1px solid",borderColor:e?"rgba(0,0,0,0.15)":"transparent",backgroundColor:bn,transition:"border-color 100ms ease"},children:t})}function yn({property:t,value:e,onChange:o,isModified:n=!1,step:r=1,min:i,max:a,style:s,placeholder:c,showUnit:l=!0,unitStyle:d,preferredUnit:p,onUnitCycle:u}){let f=zn(e),g=go(t),h=sr[t],x=p&&h&&h.includes(p)?p:g,L=n&&f.unit||x,R=!n&&f.unit&&f.unit!==L?li(f.num,L):f.num,[A,T]=ze(!1),[C,Z]=ze(""),Y=Rt=>{T(!0),Z(String(R||"")),requestAnimationFrame(()=>Rt.target.select())},q=()=>{if(T(!1),C.trim()){let Rt=ar(C,t,e,n);Rt&&o(Rt)}},tt=Rt=>{let j=Rt.target.value;Z(j);let It=j.trim(),Pt=It.match(/^(-?[\d.]+)\s*(rem|em|px|%)$/i),Xt=It.match(/^(-?[\d.]+)$/);if(Pt){let oe=parseFloat(Pt[1]);isNaN(oe)||o(`${oe}${Pt[2].toLowerCase()}`)}else if(Xt){let oe=parseFloat(Xt[1]);isNaN(oe)||o(`${oe}${L}`)}},B=Rt=>{if(Rt.key==="Enter"){if(C.trim()){let j=ar(C,t,e,n);j&&o(j)}Rt.target.blur();return}if(Rt.key==="ArrowUp"||Rt.key==="ArrowDown"){Rt.preventDefault();let j=Rt.shiftKey?10:Rt.altKey?.1:1,It=(Rt.key==="ArrowUp"?1:-1)*r*j,Pt=parseFloat(C)||R||0,Xt=Math.round((Pt+It)*1e3)/1e3;i!==void 0&&(Xt=Math.max(i,Xt)),a!==void 0&&(Xt=Math.min(a,Xt)),Z(String(Xt)),o(`${Xt}${L}`)}},V=/^-?[\d.]/.test(e.trim()),Q=A?C:V?String(R):"",dt=A&&/\s*(rem|em|px|%)\s*$/i.test(C)?"":L,vt=u&&(dt==="rem"||dt==="px"),Dt={fontSize:10,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#999",pointerEvents:"none"},Ht=b(m({},d!=null?d:Dt),{pointerEvents:"auto",cursor:"pointer"});return xe(Hd,{children:[gt("input",{type:"text",inputMode:"decimal",value:Q,onFocus:Y,onBlur:q,onChange:tt,onKeyDown:B,placeholder:c,style:s}),l&&dt&>("span",{style:vt?Ht:d!=null?d:Dt,onClick:vt?u:void 0,title:vt?"Click to switch units":void 0,children:dt})]})}function gi({value:t,resolvedValue:e,colorVariables:o,matchingVariable:n,onChange:r,accentColor:i="#3b82f6",modified:a,panelContentRef:s,isDropdownOpen:c,onDropdownChange:l}){let[d,p]=ze(!1),u=!t.includes("var(")&&n?n.usage:t,[f,g]=ze(u),[h,S]=ze(!1),[x,L]=ze(!1),[R,A]=ze(!1),T=ln(null),C=ln(null),Z=ln(null),Y=c!==void 0?c:h,q=l||S,tt=Cn(()=>{if(!Z.current)return{position:"fixed",top:0,left:0,width:200};let j=Z.current.getBoundingClientRect(),It=Z.current.closest('[data-devtools="panel"]'),Pt=It?It.getBoundingClientRect():{top:0,left:0};if(s!=null&&s.current){let Xt=s.current.getBoundingClientRect();return{position:"fixed",top:j.bottom+4-Pt.top,left:Xt.left+4-Pt.left,width:Xt.width-8}}return{position:"fixed",top:j.bottom+4-Pt.top,left:j.left-Pt.left,width:j.width}},[s]);gn(()=>{if(!d){let j=!t.includes("var(")&&n?n.usage:t;g(j)}},[t,d,n]),gn(()=>{if(!Y&&!x)return;let j=Pt=>{Z.current&&!Z.current.contains(Pt.target)&&(q(!1),L(!1))},It=Pt=>{Pt.key==="Escape"&&(q(!1),L(!1))};return document.addEventListener("mousedown",j),document.addEventListener("keydown",It),()=>{document.removeEventListener("mousedown",j),document.removeEventListener("keydown",It)}},[Y,x]),gn(()=>{d&&T.current&&(T.current.focus(),T.current.select())},[d]);let B=pr(()=>{if(!f||f.startsWith("#")||f.startsWith("rgb")||f.startsWith("hsl")||f.startsWith("oklch"))return[];let j=f.toLowerCase();return o.filter(It=>It.name.toLowerCase().includes(j)||It.usage.toLowerCase().includes(j)).slice(0,8)},[f,o]),V=()=>{r(f),p(!1),L(!1)},Q=j=>{g(j),j.includes("var")||j.includes("--")||j.length>0&&!j.startsWith("#")?L(!0):L(!1)},Mt=j=>{g(j.usage),r(j.usage),q(!1),L(!1),p(!1)},dt=()=>{setTimeout(()=>{!Y&&!x&&V()},150)},vt=j=>{j.key==="Enter"?V():j.key==="Escape"&&(g(t),p(!1),L(!1))},Dt=pr(()=>{let j=e.trim().toLowerCase();if(j.startsWith("#"))return j.length===4?`#${j[1]}${j[1]}${j[2]}${j[2]}${j[3]}${j[3]}`:j.slice(0,7);let It=j.match(/rgba?\((\d+),?\s*(\d+),?\s*(\d+)/);if(It){let Xt=parseInt(It[1],10).toString(16).padStart(2,"0"),oe=parseInt(It[2],10).toString(16).padStart(2,"0"),ct=parseInt(It[3],10).toString(16).padStart(2,"0");return`#${Xt}${oe}${ct}`}let Pt=j.match(/oklch\(\s*([\d.]+)/);if(Pt){let Xt=Math.max(0,Math.min(1,parseFloat(Pt[1]))),oe=Math.round(Xt*255).toString(16).padStart(2,"0");return`#${oe}${oe}${oe}`}return"#000000"},[e]),Ht=j=>{let It=j.target.value;g(It),r(It)},Rt=t.includes("var(");return xe("div",{ref:Z,onMouseEnter:()=>A(!0),onMouseLeave:()=>A(!1),style:{position:"relative",borderRadius:2,border:"1px solid",borderColor:d?i:R?"rgba(0,0,0,0.15)":"transparent",backgroundColor:bn,transition:"border-color 100ms ease",overflow:"hidden"},children:[xe("div",{style:{display:"flex",alignItems:"center",minWidth:0},children:[xe("div",{style:{position:"relative",marginLeft:8,flexShrink:0},children:[gt("input",{type:"color",value:Dt,onChange:Ht,style:{width:12,height:12,padding:0,border:"none",cursor:"pointer",opacity:0,position:"absolute",top:0,left:0}}),gt("div",{style:{width:12,height:12,borderRadius:2,backgroundColor:e,border:"1px solid rgba(0,0,0,0.1)",pointerEvents:"none"}})]}),d?gt("input",{ref:T,type:"text",value:f,onChange:j=>Q(j.target.value),onKeyDown:vt,onBlur:dt,style:b(m({},He),{flex:1,minWidth:0})}):gt("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:a?i:"inherit"},title:u,children:u}),o.length>0&>("button",{type:"button",onClick:()=>q(!Y),style:{display:"flex",alignItems:"center",justifyContent:"center",width:20,height:24,border:"none",background:"none",cursor:"pointer",color:"#999",flexShrink:0},children:gt(mi,{size:12})})]}),x&&B.length>0&>("div",{style:b(m({},tt()),{backgroundColor:"#ffffff",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:B.map(j=>xe("button",{type:"button",onClick:()=>Mt(j),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:[gt("div",{style:{width:14,height:14,borderRadius:2,backgroundColor:j.value,border:"1px solid rgba(0,0,0,0.1)",flexShrink:0}}),gt("span",{style:{flex:1,overflow:"hidden",textOverflow:"ellipsis"},children:j.name})]},j.name))}),Y&>("div",{ref:C,style:b(m({},tt()),{backgroundColor:"#ffffff",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:o.map(j=>xe("button",{type:"button",onClick:()=>Mt(j),style:{width:"100%",display:"flex",alignItems:"center",gap:8,padding:"10px 12px",border:"none",backgroundColor:u===j.usage||t===j.usage?"#f1f5f9":"transparent",color:"#1e293b",fontWeight:u===j.usage||t===j.usage?600:400,cursor:"pointer",textAlign:"left",fontSize:12},children:[gt("div",{style:{width:14,height:14,borderRadius:2,backgroundColor:j.value,border:"1px solid rgba(0,0,0,0.1)",flexShrink:0}}),gt("span",{style:{flex:1,overflow:"hidden",textOverflow:"ellipsis"},children:j.name}),(u===j.usage||t===j.usage)&>(ur,{size:14,style:{marginLeft:"auto",flexShrink:0}})]},j.name))})]})}function Ra({element:t,elementInfo:e,selector:o,styleModifications:n,dispatch:r,onClose:i,onHover:a,accentColor:s="#3b82f6"}){var jt,kt;let c=ln(null),l=ln(null),[d,p]=ze(()=>{try{return!!localStorage.getItem("devtools-panel-position")}catch(z){return!1}});gn(()=>{if(d)return;let z=setTimeout(()=>p(!0),50);return()=>clearTimeout(z)},[d]);let[u,f]=ze(null),[g,h]=ze(null),S=u!==null||g!==null,[x,L]=ze("rem"),R=Cn(()=>{L(z=>z==="rem"?"px":"rem")},[]),A=ln(new Map),[T,C]=ze(""),Z=pr(()=>Dr(),[]);gn(()=>{let z=ot=>{var yt;if(ot.key!=="Escape")return;let it=document.activeElement;it&&((yt=c.current)!=null&&yt.contains(it))||i()};return window.addEventListener("keydown",z),()=>window.removeEventListener("keydown",z)},[i]);let Y=ln({top:0,left:0,maxHeight:400}),[,q]=ze(0),tt="devtools-panel-position",B=ln({x:0,y:0}),V=ln(null),Q=ln(!1);gn(()=>{try{let z=localStorage.getItem(tt);if(z){let ot=JSON.parse(z);typeof ot.top=="number"&&typeof ot.left=="number"&&(Q.current=!0,Y.current=b(m({},Y.current),{top:ot.top,left:ot.left}))}}catch(z){}},[]),gn(()=>{let z=it=>{let yt=V.current;if(!yt)return;let Nt=yt.startOffsetX+(it.clientX-yt.startX),Ct=yt.startOffsetY+(it.clientY-yt.startY),bt=280,pe=16,Gt=Math.max(pe,Math.min(window.innerWidth-bt-pe,Y.current.left+Nt)),ie=Math.max(pe,Y.current.top+Ct);B.current={x:Gt-Y.current.left,y:ie-Y.current.top};let Ie=c.current,ee=Ie==null?void 0:Ie.parentElement;if(!ee)return;ee.style.top=`${ie}px`,ee.style.left=`${Gt}px`;let _e=document.getElementById("devtools-toolbar"),Ut=_e==null?void 0:_e.getBoundingClientRect(),me=window.innerHeight-16;Ut&&Gt+bt>Ut.left&&(me=Ut.top-8);let je=Math.max(0,ie),he=Math.max(200,me-je);Ie&&(Ie.style.maxHeight=`${he}px`)},ot=()=>{if(!V.current)return;let it=Y.current.top+B.current.y,yt=Y.current.left+B.current.x;Y.current=b(m({},Y.current),{top:it,left:yt}),B.current={x:0,y:0},Q.current=!0;try{localStorage.setItem(tt,JSON.stringify({top:it,left:yt}))}catch(Nt){}V.current=null};return window.addEventListener("mousemove",z),window.addEventListener("mouseup",ot),()=>{window.removeEventListener("mousemove",z),window.removeEventListener("mouseup",ot)}},[]);let Mt=Cn(z=>{z.button!==0||z.target.closest("button")||(z.preventDefault(),V.current={startX:z.clientX,startY:z.clientY,startOffsetX:B.current.x,startOffsetY:B.current.y})},[]);gn(()=>{B.current={x:0,y:0};let z=(yt=!1)=>{let Nt=c.current,Ct=280,bt=8,pe,Gt;if(Q.current)pe=Y.current.top,Gt=Y.current.left;else{let me=t.getBoundingClientRect();Gt=me.right+bt,pe=me.top,Gt+Ct>window.innerWidth-bt&&(Gt=me.left-Ct-bt),Gt<bt&&(Gt=Math.max(bt,(window.innerWidth-Ct)/2))}let ie=document.getElementById("devtools-toolbar"),Ie=ie==null?void 0:ie.getBoundingClientRect(),ee=window.innerHeight-16;Ie&&Gt+Ct>Ie.left&&(ee=Ie.top-bt);let _e=Math.max(0,pe),Ut=Math.max(200,ee-_e);if(Y.current={top:pe,left:Gt,maxHeight:Ut},yt&&Nt){let me=Nt.parentElement;me&&!Q.current&&(me.style.top=`${pe+B.current.y}px`,me.style.left=`${Gt+B.current.x}px`),Nt.style.maxHeight=`${Ut}px`}else q(me=>me+1)};z(!1);let ot=()=>z(!0),it=()=>z(!1);return window.addEventListener("scroll",ot,{passive:!0}),window.addEventListener("resize",it,{passive:!0}),()=>{window.removeEventListener("scroll",ot),window.removeEventListener("resize",it)}},[t]),gn(()=>{let z=c.current;if(!z)return;let ot=it=>{let yt=l.current;if(!yt){it.preventDefault();return}let{scrollTop:Nt,scrollHeight:Ct,clientHeight:bt}=yt,pe=Nt<=0&&it.deltaY<0,Gt=Nt+bt>=Ct&&it.deltaY>0;(pe||Gt)&&it.preventDefault()};return z.addEventListener("wheel",ot,{passive:!1}),()=>z.removeEventListener("wheel",ot)},[]);let dt=pr(()=>n.find(z=>z.selector===o),[n,o]),vt=Cn(z=>{let ot=dt==null?void 0:dt.changes.find(it=>it.property===z);if(ot)return ot.modified;if(z.includes("color")){let it=Rr(t,z);if(it&&it.includes("var("))return it}return Io(t,z)},[t,dt]),Dt=Cn(z=>{if(A.current.has(z))return A.current.get(z);let ot=dt==null?void 0:dt.changes.find(yt=>yt.property===z);if(ot)return ot.original;let it=Io(t,z);return A.current.set(z,it),it},[t,dt]),Ht=Cn((z,ot)=>{let it=Dt(z);Yt(t,z,ot),z==="backdrop-filter"&&Yt(t,"-webkit-backdrop-filter",ot),r({type:"MODIFY_STYLE",payload:{selector:o,element:e,property:z,original:it,modified:ot}})},[t,o,e,r,Dt]),Rt=Cn(()=>{Br(o,n);let z=n.find(ot=>ot.selector===o);if(z)for(let ot of z.changes)r({type:"CLEAR_STYLE",payload:{selector:o,property:ot.property}});A.current.clear()},[o,n,r]),j=Cn(z=>{let ot=n.find(yt=>yt.selector===o);ot!=null&&ot.changes.find(yt=>yt.property===z)&&t instanceof HTMLElement&&(t.style.removeProperty(z),r({type:"CLEAR_STYLE",payload:{selector:o,property:z}}),A.current.delete(z))},[t,o,n,r]),It=Cn(()=>{let z=T.split(";").map(ot=>ot.trim()).filter(ot=>ot);for(let ot of z){let it=ot.indexOf(":");if(it>0){let yt=ot.slice(0,it).trim(),Nt=ot.slice(it+1).trim();yt&&Nt&&Ht(yt,Nt)}}C("")},[T,Ht]),Pt=Cn(z=>{var ot;return(ot=dt==null?void 0:dt.changes.some(it=>it.property===z))!=null?ot:!1},[dt]),Xt=z=>{var Ct;let ot=vt(z.property),it=Pt(z.property),yt=!it&&Od(z.property,ot),Nt={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(yt&&z.type!=="backdrop-filter")return gt(An,{modified:!1,children:gt("input",{type:"text",value:"",placeholder:"\u2014",onFocus:()=>{},onChange:bt=>Ht(z.property,bt.target.value),style:b(m({},Nt),{color:"#999"})})});switch(z.type){case"color":{let bt=Ao(t,ot),pe=ot.includes("var(")?null:Po(bt,Z);return gt(gi,{value:ot,resolvedValue:bt,colorVariables:Z,matchingVariable:pe,onChange:Gt=>Ht(z.property,Gt),accentColor:s,modified:it,panelContentRef:l,isDropdownOpen:g===z.property,onDropdownChange:Gt=>h(Gt?z.property:null)})}case"number":{if(!!sr[z.property])return gt(An,{modified:it,children:gt(yn,{property:z.property,value:ot,onChange:Gt=>Ht(z.property,Gt),isModified:it,min:z.min,max:z.max,step:z.step||1,style:b(m({},Nt),{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:x,onUnitCycle:R})});let{num:pe}=zn(ot);return gt(An,{modified:it,children:gt("input",{type:"number",value:pe,min:z.min,max:z.max,step:z.step||1,onChange:Gt=>Ht(z.property,Gt.target.value),style:Nt})})}case"select":return gt(An,{modified:it,children:xe("div",{style:{position:"relative",display:"flex",alignItems:"center"},children:[gt("select",{value:ot,onChange:bt=>Ht(z.property,bt.target.value),style:b(m({},Nt),{cursor:"pointer",paddingLeft:4,paddingRight:24,appearance:"none",WebkitAppearance:"none"}),children:(Ct=z.options)==null?void 0:Ct.map(bt=>gt("option",{value:bt,children:bt},bt))}),gt("div",{style:{position:"absolute",right:4,top:"50%",transform:"translateY(-50%)",pointerEvents:"none",color:"#999",display:"flex",alignItems:"center"},children:gt(mi,{size:12})})]})});case"spacing":return gt(An,{modified:it,children:gt("input",{type:"text",value:ot,onChange:bt=>Ht(z.property,bt.target.value),placeholder:"e.g., 10px or 10px 20px",style:Nt})});case"backdrop-filter":return gt(xa,{value:ot,onChange:bt=>Ht(z.property,bt),accentColor:s,modified:it,panelContentRef:l});default:return gt(An,{modified:it,children:gt("input",{type:"text",value:ot,onChange:bt=>Ht(z.property,bt.target.value),style:Nt})})}},oe=(jt=dt==null?void 0:dt.changes.length)!=null?jt:0,ct=(kt=dt==null?void 0:dt.captured)!=null?kt:!1,ge=b(m({position:"fixed",top:Y.current.top,left:Y.current.left,width:280,maxHeight:Y.current.maxHeight,backgroundColor:"rgba(255, 255, 255, 0.85)",backdropFilter:"blur(32px)",WebkitBackdropFilter:"blur(32px)"},hn),{zIndex:1e4,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',fontSize:12,overflow:"hidden",display:"flex",flexDirection:"column",opacity:d?1:0,transition:"opacity 150ms ease"}),N={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:V.current?"grabbing":"grab"},rt={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"},Ft={display:"flex",alignItems:"center",padding:"4px 12px",gap:8},ut={width:80,fontSize:11,fontFamily:'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',color:"#64748b",flexShrink:0};return gt("div",{"data-devtools":"panel-wrapper",style:{position:"fixed",top:Y.current.top+B.current.y,left:Y.current.left+B.current.x,zIndex:1e4,pointerEvents:"none"},children:xe("div",{ref:c,"data-devtools":"panel",style:b(m({},ge),{position:"relative",top:0,left:0,zIndex:0,pointerEvents:"auto"}),onMouseEnter:()=>a==null?void 0:a("element"),onMouseLeave:()=>a==null?void 0:a(null),children:[xe("div",{style:N,onMouseDown:Mt,children:[xe("div",{style:{display:"flex",alignItems:"center",gap:8,overflow:"hidden"},children:[gt("span",{style:{fontWeight:600,fontSize:11,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:e.tagName}),oe>0&>("span",{style:{backgroundColor:ct?"#999999":s,color:"#fff",fontSize:9,padding:"1px 4px",borderRadius:2},children:oe})]}),xe("div",{style:{display:"flex",gap:4},children:[oe>0&>("button",{type:"button",onClick:Rt,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:gt(Bd,{size:14})}),gt("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:gt(Fd,{size:14})})]})]}),xe("div",{ref:l,style:{flex:1,overflowY:"auto",margin:"0 3px 3px"},children:[gt("div",{style:{opacity:g?.3:1,transition:"opacity 150ms ease"},children:gt(ka,{element:t,getValue:vt,getOriginalValue:Dt,handleChange:Ht,isModified:Pt,onResetProperty:j,isCollapsed:!1,onToggle:()=>{},sectionHeaderStyle:rt,activeDropdown:u,onDropdownChange:f,panelContentRef:l,accentColor:s,onFieldHover:a,preferredUnit:x,onUnitCycle:R})}),gt("div",{style:{opacity:u?.3:1,transition:"opacity 150ms ease"},children:gt(Ma,{element:t,getValue:vt,handleChange:Ht,isModified:Pt,onResetProperty:j,isCollapsed:!1,onToggle:()=>{},sectionHeaderStyle:rt,accentColor:s,colorVariables:Z,activeColorDropdown:g,onColorDropdownChange:h,panelContentRef:l,preferredUnit:x,onUnitCycle:R})}),La.map((z,ot)=>{let it=ot===La.length-1,yt=g&&z.properties.some(Ct=>Ct.property===g);return xe("div",{style:{borderBottom:it?"none":"1px solid rgba(0,0,0,0.08)",opacity:S&&!yt?.3:1,transition:"opacity 150ms ease"},children:[gt("div",{style:rt,children:gt("span",{children:z.name})}),gt("div",{style:{padding:"4px 0"},children:z.properties.map(Ct=>{let bt=Pt(Ct.property),pe=yt&&Ct.property!==g;return xe("div",{style:b(m({},Ft),{opacity:pe?.3:1,transition:"opacity 150ms ease"}),children:[gt("span",{onClick:bt?()=>j(Ct.property):void 0,title:bt?"Click to reset":void 0,style:b(m({},ut),{color:bt?s:"#64748b",fontWeight:bt?600:400,cursor:bt?"pointer":"default"}),children:Ct.label}),gt("div",{style:{flex:1,minWidth:0,overflow:"hidden"},children:Xt(Ct)})]},Ct.property)})})]},z.name)}),xe("div",{style:{opacity:S?.3:1,transition:"opacity 150ms ease"},children:[gt("div",{style:rt,children:gt("span",{children:"Raw CSS"})}),xe("div",{style:{padding:"8px 12px"},children:[gt("textarea",{value:T,onChange:z=>C(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"}}),T.trim()&>("button",{type:"button",onClick:It,style:{marginTop:4,padding:"4px 8px",width:"100%",fontSize:11,border:"none",borderRadius:2,backgroundColor:s,color:"#fff",cursor:"pointer",opacity:T.trim()?1:.5},children:"Apply"})]})]})]})]})})}import{useEffect as zd,useLayoutEffect as _d,useState as $d}from"react";import{Fragment as Gd,jsx as Zn,jsxs as jd}from"react/jsx-runtime";var hi=["flex-start","center","flex-end"],yi=["flex-start","center","flex-end"];function Wd(t){return t==="normal"||t==="flex-start"||t==="start"?"flex-start":t==="flex-end"||t==="end"?"flex-end":t==="center"?"center":null}function Yd(t){return t==="normal"||t==="stretch"||t==="flex-start"||t==="start"?"flex-start":t==="flex-end"||t==="end"?"flex-end":t==="center"?"center":null}function Aa(t){let e=Array.from(t.children);if(e.length===0)return null;let o=1/0,n=1/0,r=-1/0,i=-1/0;for(let a of e){let s=a.getBoundingClientRect();s.width===0&&s.height===0||(s.top<o&&(o=s.top),s.left<n&&(n=s.left),s.bottom>r&&(r=s.bottom),s.right>i&&(i=s.right))}return o===1/0?null:new DOMRect(n,o,i-n,r-o)}function Pa({element:t,modifier:e,accentColor:o,refreshKey:n=0}){let[r,i]=$d(null);if(zd(()=>{if(!t){i(null);return}let h=()=>i(Aa(t));return h(),window.addEventListener("scroll",h,{passive:!0}),window.addEventListener("resize",h,{passive:!0}),()=>{window.removeEventListener("scroll",h),window.removeEventListener("resize",h)}},[t]),_d(()=>{t&&i(Aa(t))},[t,n]),!r)return null;let a=r,s=window.getComputedStyle(t),c=s.display;if(c!=="flex"&&c!=="inline-flex")return null;let l=s.flexDirection,d=l==="column"||l==="column-reverse"?"vertical":"horizontal",p=d==="horizontal"?"vertical":"horizontal",u=[];if(e==="shift"){let h=Wd(s.justifyContent);if(h){let S=hi.indexOf(h);d==="horizontal"?(S>0&&u.push("left"),S<hi.length-1&&u.push("right")):(S>0&&u.push("up"),S<hi.length-1&&u.push("down"))}}else{let h=Yd(s.alignItems);if(h){let S=yi.indexOf(h);p==="horizontal"?(S>0&&u.push("left"),S<yi.length-1&&u.push("right")):(S>0&&u.push("up"),S<yi.length-1&&u.push("down"))}}if(u.length===0)return null;let f=14,g=7;return Zn(Gd,{children:u.map(h=>{let S,x;switch(h){case"right":S=a.right+f,x=a.top+a.height/2;break;case"left":S=a.left-f,x=a.top+a.height/2;break;case"down":S=a.left+a.width/2,x=a.bottom+f;break;case"up":S=a.left+a.width/2,x=a.top-f;break}let L=h==="right"?0:h==="left"?180:h==="down"?90:-90,R={position:"fixed",left:S-g,top:x-g,width:g*2,height:g*2,pointerEvents:"none",zIndex:9997};return Zn("div",{"data-devtools":"swipe-hint",style:R,children:Zn("svg",{width:g*2,height:g*2,viewBox:"-7 -7 14 14",style:{overflow:"visible"},children:jd("g",{transform:`rotate(${L})`,children:[Zn("line",{x1:"-5",y1:"0",x2:"3",y2:"0",stroke:"#fff",strokeWidth:"4",strokeLinecap:"round"}),Zn("polyline",{points:"0,-4 5,0 0,4",fill:"none",stroke:"#fff",strokeWidth:"4",strokeLinecap:"round",strokeLinejoin:"round"}),Zn("line",{x1:"-5",y1:"0",x2:"3",y2:"0",stroke:o,strokeWidth:"1.5",strokeLinecap:"round"}),Zn("polyline",{points:"0,-4 5,0 0,4",fill:"none",stroke:o,strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]})})},h)})})}import{useEffect as Vd,useLayoutEffect as Xd,useState as Jd}from"react";import{jsx as bi,jsxs as xi}from"react/jsx-runtime";function Kd(t,e){let o=t.match(/^oklch\(([^)]+)\)$/i);return o?`oklch(${o[1]} / ${e})`:`color-mix(in srgb, ${t} ${Math.round(e*100)}%, transparent)`}function Na({element:t,fontSize:e,lineHeight:o,accentColor:n,hoveredProperty:r,draggingProperty:i,cursorViewport:a}){let[s,c]=Jd(null);if(Vd(()=>{if(!t){c(null);return}let x=()=>{c(lo(t))};return x(),window.addEventListener("scroll",x,{passive:!0}),window.addEventListener("resize",x,{passive:!0}),()=>{window.removeEventListener("scroll",x),window.removeEventListener("resize",x)}},[t]),Xd(()=>{t&&c(lo(t))},[t,e,o]),!s)return null;let l=s.width,d=s.height,p=Kd(n,.2),u=i!=null?i:r,f=8,g=2,h={position:"fixed",top:s.top,left:s.left,width:l,height:d,pointerEvents:"none",zIndex:9996,overflow:"visible"},S=x=>x==="font-size"?`${Math.round(e)}`:(e>0?o/e:1.2).toFixed(2).replace(/\.?0+$/,"");return xi("div",{"data-devtools":"text-handles",style:h,children:[xi("svg",{style:{position:"absolute",inset:0,width:"100%",height:"100%",overflow:"visible",pointerEvents:"none"},viewBox:`0 0 ${l} ${d}`,children:[bi("rect",{x:"0.5",y:"0.5",width:Math.max(0,l-1),height:Math.max(0,d-1),fill:"none",stroke:p,strokeWidth:"1"}),(u==="font-size"||!u)&&bi("rect",{x:l-g/2,y:d/2-f/2,width:g,height:f,fill:n,stroke:"#ffffff",strokeWidth:u==="font-size"?4:2,paintOrder:"stroke"}),(u==="line-height"||!u)&&bi("rect",{x:l/2-f/2,y:d-g/2,width:f,height:g,fill:n,stroke:"#ffffff",strokeWidth:u==="line-height"?4:2,paintOrder:"stroke"})]}),a&&u&&(()=>{let x=u==="font-size"?"Aa":"Lh",L=S(u);return xi("div",{style:{position:"fixed",left:a.x+8,top:a.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," ",L]})})()]})}import{Fragment as xo,jsx as re,jsxs as bo}from"react/jsx-runtime";var Ba=8,Si=[0,1,2,4,8,12,16,20,24,28,32],wi="devtools-active-text";function Da(t,e,o=0){let n=t.left+window.scrollX+4,r=e==="top-left"?t.top+window.scrollY-uo-o*uo+4:t.bottom+window.scrollY+4-1+o*uo;return{x:n,y:r}}function Fa({state:t,dispatch:e,onScreenshot:o,inFlightAnnotationIds:n,inFlightStyleSelectors:r,inFlightSelectorColors:i,onAttachImages:a,onReply:s,onViewThread:c,activePlan:l,onModelComponentsAdd:d,onModelComponentFocus:p,onModelComponentHover:u,modelComponentNames:f,modelPanelHoveredComponent:g,modelSpacingTokenHover:h}){var es,ns,os,rs,is,ss,as,ls,cs,ds,us;let{canvasRef:S,redrawAll:x,resizeCanvas:L}=Xs(),R=Ee(!1);Ye(()=>{let v=S.current;if(!v)return;let k=()=>{R.current&&(R.current=!1,v.style.pointerEvents="")},U=M=>{M.button===0&&R.current&&k()};return window.addEventListener("mousedown",U),()=>window.removeEventListener("mousedown",U)},[S]);let[A,T]=le(!1),[C,Z]=le(()=>{if(typeof window=="undefined")return null;try{let v=localStorage.getItem(wi);return v?JSON.parse(v):null}catch(v){return null}}),[Y,q]=le(null),[tt,B]=le(null),[V,Q]=le(null),Mt=Ee(null),dt=Ee(null),vt=Ee({x:0,y:0}),Dt=Ee([]),Ht=Ee(0),[Rt,j]=le(null),[It,Pt]=le(new Map),Xt=Ee(0),oe=Ee(null),[ct,ge]=le(null),[N,rt]=le(null),Ft=Ee({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}),[ut,jt]=le(null),[kt,z]=le(null),[ot,it]=le(null),[yt,Nt]=le(null),Ct=Ee({x:0,y:0}),[bt,pe]=le({x:0,y:0}),Gt=Ee({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}),[ie,Ie]=le(null),[ee,_e]=le(null),[Ut,me]=le(null),[je,he]=le(!1),[Ke,Ge]=le(0),[$e,en]=le(null),We=Ee({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}),[ke,K]=le(null),[wt,qt]=le(null),[ye,Ce]=le(null),de=Ee({isDragging:!1,property:null,startX:0,startY:0,originalFontSize:0,originalLineHeight:0,originalRatio:1.2,element:null,elementInfo:null,selector:null,durableSelector:null}),[te,nn]=le(null),[on,En]=le(null),[ne,G]=le(null),et=Js(),ht=Ee(i);ht.current=i;let St=Oe(v=>{let k=ht.current;if(!k||k.size===0)return!1;for(let U of k.keys())try{if(v.matches(U))return!0}catch(M){}return!1},[]),y=Ee(t);y.current=t;let E=Ee(C);E.current=C;let W=Ee([]),xt=Ee(o);xt.current=o;let[lt,Ot]=le(null),st=t.selectedAnnotationIds;W.current=st;let _t=Oe((v,k=!1)=>{e({type:"SELECT_ANNOTATION",payload:{id:v,addToSelection:k}})},[e]),mt=Oe(()=>{e({type:"SELECT_ANNOTATION",payload:{id:null}})},[e]),[Bt,ce]=le(null),[Vt,Ue]=le({x:window.scrollX,y:window.scrollY});Ye(()=>(L(),window.addEventListener("resize",L),()=>window.removeEventListener("resize",L)),[L]),Ye(()=>{let v=()=>{Ue({x:window.scrollX,y:window.scrollY})};return window.addEventListener("scroll",v,{passive:!0}),()=>window.removeEventListener("scroll",v)},[]),Ye(()=>{C?localStorage.setItem(wi,JSON.stringify(C)):localStorage.removeItem(wi)},[C]),Ks(C,Z,Y,t.annotations,e);let rn=Ee(Rt);rn.current=Rt,Ye(()=>{if(t.activeTool!=="model"||!t.isAnnotating)return;let v=k=>{if(!k.altKey||!rn.current)return;k.preventDefault();let U=k.deltaY>0?-1:1;Xt.current=Math.max(0,Xt.current+U);let M=oe.current;if(M){let D=Jo(M,Xt.current);j(D)}};return window.addEventListener("wheel",v,{passive:!1}),()=>window.removeEventListener("wheel",v)},[t.activeTool,t.isAnnotating]),Ye(()=>{t.activeTool!=="model"&&(j(null),Pt(new Map),Xt.current=0,oe.current=null)},[t.activeTool]),Ye(()=>{var U;let v=(U=Rt==null?void 0:Rt.name)!=null?U:null,k=v&&(f!=null&&f.has(v))?v:null;u==null||u(k)},[Rt,f,u]);let[fn,$n]=le(null);Ye(()=>{var U;if(!g){$n(null);return}let v=io(g.name),k=g.instanceIndex;$n((U=v[k%v.length])!=null?U:null)},[g]);let[Ze,Tn]=le([]);Ye(()=>{var v,k;if(!h){Tn([]);return}(k=(v=h.token)==null?void 0:v.bindings)!=null&&k.length?Tn(Ir(h.token)):Tn(Tr(h.px))},[h]);let ol=Ee(null),rl=Ee(null);ol.current=ie,rl.current=ee,Ye(()=>{let v=["flex-start","center","flex-end"],k=["flex-start","center","flex-end"],M=null,D=!1,H=null,at=null,F=(ft,Tt)=>{let Kt=On(ft,Tt);for(;Kt&&Kt!==document.documentElement;){let ae=window.getComputedStyle(Kt).display;if(ae==="flex"||ae==="inline-flex")return Kt;Kt=Kt.parentElement}return null},J=ft=>{let Tt=window.getComputedStyle(ft).flexDirection;return Tt==="column"||Tt==="column-reverse"?"vertical":"horizontal"},w=ft=>{let Tt=ft.getAttribute("data-pm");return Tt||(Tt=Math.random().toString(36).substring(2,8),ft.setAttribute("data-pm",Tt)),{selector:`[data-pm="${Tt}"]`,durableSelector:cn(ft)}},I=()=>{D=!0,M&&clearTimeout(M),M=setTimeout(()=>{D=!1,M=null},300)},X=(ft,Tt,Zt)=>{let Kt=J(ft);if(Tt===Kt){let $t=window.getComputedStyle(ft).justifyContent,be=$t==="normal"||$t==="flex-start"||$t==="start"?"flex-start":$t==="flex-end"||$t==="end"?"flex-end":$t==="center"?"center":null;if(!be)return;let Be=v.indexOf(be)+Zt;if(Be<0||Be>=v.length)return;let Ln=v[Be],{selector:Yn,durableSelector:vr}=w(ft);Yt(ft,"justify-content",Ln),e({type:"MODIFY_STYLES_BATCH",payload:{selector:Yn,durableSelector:vr,element:Xe(ft),changes:[{property:"justify-content",original:$t,modified:Ln}]}})}else{let $t=window.getComputedStyle(ft).flexDirection,be=Kt==="horizontal"?"column":"row",{selector:mn,durableSelector:Be}=w(ft);Yt(ft,"flex-direction",be),e({type:"MODIFY_STYLES_BATCH",payload:{selector:mn,durableSelector:Be,element:Xe(ft),changes:[{property:"flex-direction",original:$t,modified:be}]}})}Ge(ae=>ae+1)},P=(ft,Tt,Zt)=>{let ae=J(ft)==="horizontal"?"vertical":"horizontal";if(Tt!==ae)return;let be=window.getComputedStyle(ft).alignItems,mn=be==="normal"||be==="stretch"||be==="flex-start"||be==="start"?"flex-start":be==="flex-end"||be==="end"?"flex-end":be==="center"?"center":null;if(!mn)return;let Ln=k.indexOf(mn)+Zt;if(Ln<0||Ln>=k.length)return;let Yn=k[Ln],{selector:vr,durableSelector:pl}=w(ft);Yt(ft,"align-items",Yn),e({type:"MODIFY_STYLES_BATCH",payload:{selector:vr,durableSelector:pl,element:Xe(ft),changes:[{property:"align-items",original:be,modified:Yn}]}}),Ge(fl=>fl+1)},O=20,$=null,_=null,pt=0,Et=(ft,Tt,Zt)=>{let Kt=F(Tt,Zt);en(Kt?{modifier:ft,target:Kt}:null)},se=ft=>{if(!(t.activeTool!=="hand"||!t.isAnnotating)){if(ft.key==="Shift"&&!ft.altKey){let Tt=Ct.current;Et("shift",Tt.x,Tt.y)}else if(ft.key==="Alt"&&!ft.shiftKey){let Tt=Ct.current;Et("alt",Tt.x,Tt.y)}}},Jt=ft=>{if(t.activeTool!=="hand"||!t.isAnnotating)return;let Tt=ft.shiftKey&&!ft.altKey,Zt=ft.altKey&&!ft.shiftKey;if(!Tt&&!Zt||ft.buttons!==0){$=null,_=null,pt=0,H=null,at=null,en(null);return}if(H===null&&(H=ft.clientX,at=ft.clientY,Et(Tt?"shift":"alt",ft.clientX,ft.clientY)),D)return;$===null&&($=ft.clientX,_=ft.clientY,pt=0);let Kt=ft.clientX-$,ae=ft.clientY-_,$t=Math.abs(Kt)>=Math.abs(ae)?Kt:ae;if(Math.abs($t)>3){let Yn=$t>0?1:-1;if(pt!==0&&Yn!==pt){$=ft.clientX,_=ft.clientY,pt=0;return}pt=Yn}if(Math.abs(Kt)<O&&Math.abs(ae)<O)return;let be=F(H,at);if(!be)return;let mn=Math.abs(Kt)>=Math.abs(ae)?"horizontal":"vertical",Ln=(mn==="horizontal"?Kt:ae)>0?1:-1;$=null,_=null,pt=0,Tt?X(be,mn,Ln):P(be,mn,Ln),I()},Le=ft=>{(ft.key==="Shift"||ft.key==="Alt")&&(H=null,at=null,$=null,_=null,pt=0,en(null))},fe=()=>{en(null),$=null,_=null,pt=0};return window.addEventListener("keydown",se),window.addEventListener("mousemove",Jt),window.addEventListener("mousedown",fe),window.addEventListener("keyup",Le),()=>{window.removeEventListener("keydown",se),window.removeEventListener("mousemove",Jt),window.removeEventListener("mousedown",fe),window.removeEventListener("keyup",Le),M&&clearTimeout(M)}},[t.activeTool,t.isAnnotating,e]),Ye(()=>{let v=k=>{var D,H,at;if(k.key==="Escape"){if(E.current)return;if(t.activeTool==="model"&&It.size>0){k.preventDefault(),Pt(new Map);return}if(W.current.length>0){k.preventDefault(),mt();return}}if(k.key==="Enter"&&t.activeTool==="model"&&It.size>0&&d){k.preventDefault();let F=[...It.keys()].filter(J=>!(f!=null&&f.has(J)));F.length>0&&d(F),Pt(new Map);return}if((k.metaKey||k.ctrlKey)&&k.key==="v"&&Dt.current.length>0&&!E.current){k.preventDefault(),Ht.current++;let F=Ht.current*20,w=((D=Dt.current[0])==null?void 0:D.groupId)?Math.random().toString(36).substring(2,9):void 0,I=Dt.current.map(P=>b(m({},P),{id:Math.random().toString(36).substring(2,9),groupId:P.groupId?w:void 0,timestamp:Date.now(),points:P.points.map(O=>({x:O.x+F,y:O.y+F}))}));e({type:"PASTE_ANNOTATIONS",payload:{annotations:I}});let X=I.find(P=>P.type!=="text")||I[0];X&&_t(X.id);return}let U=W.current;if(U.length===0||E.current)return;let M=(H=k.target)==null?void 0:H.tagName;if(!(M==="INPUT"||M==="TEXTAREA"||(at=k.target)!=null&&at.isContentEditable)&&(k.key==="Delete"||k.key==="Backspace")){k.preventDefault();for(let F of U)e({type:"DELETE_ANNOTATION",payload:{id:F}});mt()}};return window.addEventListener("keydown",v),()=>window.removeEventListener("keydown",v)},[e,mt,_t,t.activeTool,It,f,d]);let Mn=vi(()=>rr(t.annotations),[t.annotations]),Eo=vi(()=>{let v=new Map,k=new Set,U=1;for(let M of t.annotations)if(!Mn.has(M))if(M.groupId){if(!k.has(M.groupId)){k.add(M.groupId);let D=t.annotations.filter(H=>H.groupId===M.groupId);for(let H of D)v.set(H.id,U);U++}}else v.set(M.id,U),U++;return v},[t.annotations,Mn]),Ji=vi(()=>{if(st.length===0)return null;let v=new Map;for(let k of st){let U=t.annotations.find(D=>D.id===k);if(!U)continue;let M=U.groupId?t.annotations.filter(D=>D.groupId===U.groupId):[U];for(let D of M)if(D.linkedSelector&&!(i!=null&&i.has(D.linkedSelector))){let H=D.color||t.activeColor;v.set(D.linkedSelector,H)}}return v.size>0?v:null},[st,t.annotations,t.activeColor,i]);Ye(()=>{let v=t.annotations.filter(k=>!(Mn.has(k)||C&&!C.isNew&&k.id===C.id));x(v,t.currentPath,t.activeTool,t.activeColor,t.strokeWidth,st,Ba,Vt.x,Vt.y,Eo)},[t.annotations,t.currentPath,t.activeTool,t.activeColor,t.strokeWidth,x,C,st,Vt,Eo,Mn]),Ye(()=>{if(tt){let v=Math.random().toString(36).substring(2,9);Z({id:v,point:tt.point,text:"",fontSize:12,isNew:!0,groupId:tt.groupId}),B(null)}},[tt]),Ye(()=>{V&&(Z({id:Math.random().toString(36).substring(2,9),point:V.point,text:"",fontSize:12,isNew:!0,linkedSelector:V.linkedSelector,linkedAnchor:V.linkedAnchor,elements:V.elements}),Q(null))},[V]);let _o=Ee(null),$o=(es=C==null?void 0:C.id)!=null?es:null;Ye(()=>{$o&&Mt.current?requestAnimationFrame(()=>{var U;let v=Mt.current;if(!v||(v.focus(),dt.current===$o))return;dt.current=$o;let k=E.current;if(k){if(_o.current!==null){let M=Math.min(_o.current,v.value.length);v.setSelectionRange(M,M);return}if(!k.isNew&&k.clickPoint){let M=S.current;if(!M)return;let D=M.getContext("2d");if(!D)return;D.font=`${k.fontSize}px ${Se}`;let H=k.fontSize*1.4,at=k.text.split(`
|
|
8
|
+
`),F=k.clickPoint.y-k.point.y,J=Math.max(0,Math.min(at.length-1,Math.floor(F/H))),w=k.clickPoint.x-k.point.x,I=at[J]||"",X=0;for(let O=0;O<=I.length;O++){let $=D.measureText(I.substring(0,O)).width;if($>w){let _=O>0?D.measureText(I.substring(0,O-1)).width:0;X=w-_<$-w?O-1:O;break}X=O}let P=X;for(let O=0;O<J;O++)P+=(((U=at[O])==null?void 0:U.length)||0)+1;v.setSelectionRange(P,P)}}}):(dt.current=null,_o.current=null)},[$o,S]);let eo=Oe(v=>{let k=S.current;if(!k)return{x:0,y:0};let U=k.getBoundingClientRect(),M,D;if("touches"in v&&v.touches[0])M=v.touches[0].clientX,D=v.touches[0].clientY;else if("clientX"in v)M=v.clientX,D=v.clientY;else return{x:0,y:0};return{x:M-U.left+window.scrollX,y:D-U.top+window.scrollY}},[S]),Wn=Oe((v,k,U,M)=>{let D=U.x-k.x,H=U.y-k.y,at=D*D+H*H;if(at===0)return Math.sqrt((v.x-k.x)**2+(v.y-k.y)**2)<=M;let F=Math.max(0,Math.min(1,((v.x-k.x)*D+(v.y-k.y)*H)/at)),J=k.x+F*D,w=k.y+F*H;return Math.sqrt((v.x-J)**2+(v.y-w)**2)<=M},[]),Wo=Oe(v=>{for(let U=t.annotations.length-1;U>=0;U--){let M=t.annotations[U];if(!M||Mn.has(M))continue;let D=(M.strokeWidth||3)+4;switch(M.type){case"text":{if(!M.points[0]||!M.text)continue;let H=M.points[0],at=M.fontSize||12,F=S.current;if(F){let J=F.getContext("2d");if(J){J.font=`${at}px ${Se}`;let w=M.text.split(`
|
|
9
|
+
`),I=Math.max(...w.map(P=>J.measureText(P).width)),X=w.length*(at*1.4);if(v.x>=H.x-4-4&&v.x<=H.x+I+4+4&&v.y>=H.y-4-4&&v.y<=H.y+X+4+4)return M}}break}case"rectangle":{if(M.points.length<2)continue;let H=M.points[0],at=M.points[M.points.length-1],F=Math.min(H.x,at.x),J=Math.max(H.x,at.x),w=Math.min(H.y,at.y),I=Math.max(H.y,at.y),X=Wn(v,{x:F,y:w},{x:J,y:w},D),P=Wn(v,{x:F,y:I},{x:J,y:I},D),O=Wn(v,{x:F,y:w},{x:F,y:I},D),$=Wn(v,{x:J,y:w},{x:J,y:I},D);if(X||P||O||$)return M;break}case"circle":{if(M.points.length<2)continue;let H=M.points[0],at=M.points[M.points.length-1],F=(H.x+at.x)/2,J=(H.y+at.y)/2,w=Math.abs(at.x-H.x)/2,I=Math.abs(at.y-H.y)/2,X=v.x-F,P=v.y-J,O=Math.sqrt((X/w)**2+(P/I)**2);if(Math.abs(O-1)*Math.max(w,I)<=D)return M;break}case"line":{if(M.points.length<2)continue;let H=M.points[0],at=M.points[M.points.length-1];if(Wn(v,H,at,D))return M;break}case"freehand":{if(M.points.length<2)continue;for(let H=0;H<M.points.length-1;H++){let at=M.points[H],F=M.points[H+1];if(Wn(v,at,F,D))return M}break}}}return null},[t.annotations,S,Wn,Mn]),Ki=Oe(v=>{let k=Wo(v);return(k==null?void 0:k.type)==="text"?k:null},[Wo]),Ui=Oe(v=>{if(st.length===0)return null;let k=Ba/2+4;for(let U of st){let M=t.annotations.find(D=>D.id===U);if(!(!M||M.points.length<2)){if(M.type==="line"){let D=M.points[0],H=M.points[M.points.length-1];if(Math.sqrt((v.x-D.x)**2+(v.y-D.y)**2)<=k)return{handle:"start",annotationId:U};if(Math.sqrt((v.x-H.x)**2+(v.y-H.y)**2)<=k)return{handle:"end",annotationId:U};continue}if(M.type==="circle"){let D=M.points[0],H=M.points[M.points.length-1],at=Math.min(D.x,H.x),F=Math.max(D.x,H.x),J=Math.min(D.y,H.y),w=Math.max(D.y,H.y),I=(at+F)/2,X=(J+w)/2,P=[{handle:"top",x:I,y:J},{handle:"bottom",x:I,y:w},{handle:"left",x:at,y:X},{handle:"right",x:F,y:X}];for(let{handle:O,x:$,y:_}of P)if(Math.sqrt((v.x-$)**2+(v.y-_)**2)<=k)return{handle:O,annotationId:U};continue}if(M.type==="rectangle"||M.type==="freehand"){let D=M.points[0],H=M.points[M.points.length-1],at,F,J,w;M.type==="freehand"?(at=Math.min(...M.points.map(X=>X.x)),F=Math.max(...M.points.map(X=>X.x)),J=Math.min(...M.points.map(X=>X.y)),w=Math.max(...M.points.map(X=>X.y))):(at=Math.min(D.x,H.x),F=Math.max(D.x,H.x),J=Math.min(D.y,H.y),w=Math.max(D.y,H.y));let I=[{corner:"topLeft",x:at,y:J},{corner:"topRight",x:F,y:J},{corner:"bottomLeft",x:at,y:w},{corner:"bottomRight",x:F,y:w}];for(let{corner:X,x:P,y:O}of I)if(Math.sqrt((v.x-P)**2+(v.y-O)**2)<=k)return{handle:X,annotationId:U}}}}return null},[st,t.annotations]);Ye(()=>{let v=k=>{if(vt.current={x:k.clientX+window.scrollX,y:k.clientY+window.scrollY},!C){let U=Ki(vt.current);q((U==null?void 0:U.id)||null)}};return window.addEventListener("mousemove",v),()=>window.removeEventListener("mousemove",v)},[C,Ki]);let no=Oe(()=>{var k;if(!C)return;let v=((k=C.images)==null?void 0:k.length)||0;if(C.text.trim()||v>0)if(C.isNew){let U=ro();e({type:"ADD_TEXT",payload:m({point:C.point,text:C.text||(v>0?`[${v} image${v>1?"s":""}]`:""),fontSize:C.fontSize,id:U,groupId:C.groupId,linkedSelector:C.linkedSelector,linkedAnchor:C.linkedAnchor,elements:C.elements},v>0?{imageCount:v}:{})}),v>0&&C.images&&a&&a(U,C.images)}else e({type:"UPDATE_TEXT",payload:m({id:C.id,text:C.text||(v>0?`[${v} image${v>1?"s":""}]`:"")},v>0?{imageCount:v}:{})}),v>0&&C.images&&a&&a(C.id,C.images);else C.isNew||e({type:"DELETE_ANNOTATION",payload:{id:C.id}});Z(null)},[C,e,a]),In=Oe(v=>{for(let k=0;k<Si.length-1;k++){let U=Si[k],M=Si[k+1];if(v<=(U+M)/2)return U;if(v<M)return M}return Math.round(v/8)*8},[]),Zi=Oe((v,k,U,M)=>{let D=U.top+Math.max(M.top,4),H=U.bottom-Math.max(M.bottom,4),at=U.left+Math.max(M.left,4),F=U.right-Math.max(M.right,4);if(v<U.left||v>U.right||k<U.top||k>U.bottom)return null;let J=k<D,w=k>H,I=v<at,X=v>F;return J&&I?M.top>=M.left?"top":"left":J&&X?M.top>=M.right?"top":"right":w&&I?M.bottom>=M.left?"bottom":"left":w&&X?M.bottom>=M.right?"bottom":"right":J?"top":w?"bottom":I?"left":X?"right":null},[]),qi=Oe(v=>{var H,at;if(!t.isAnnotating)return;if(t.inspectedElement&&t.activeTool==="hand"&&!("button"in v&&v.button===2)){v.preventDefault(),v.stopPropagation(),e({type:"SELECT_ELEMENT",payload:null});return}let k=eo(v),U="shiftKey"in v&&v.shiftKey;if(t.activeTool==="inspector"){if("button"in v&&v.button===2)return;if(ct&&!St(ct)){let F=Xe(ct),J=cn(ct),w=ct.getBoundingClientRect(),I=ct.getAttribute("data-pm");I||(I=Math.random().toString(36).substring(2,8),ct.setAttribute("data-pm",I));let X=`[data-pm="${I}"]`,P=t.styleModifications.some(Et=>{try{return ct.matches(Et.selector)}catch(se){return!1}}),O=t.annotations.filter(Et=>{if(!Et.linkedSelector)return!1;try{return ct.matches(Et.linkedSelector)}catch(se){return!1}}).length,$=(P?1:0)+O,_=w.top>=uo*(1+$)?"top-left":"bottom-left",pt=Da(w,_,$);Q({point:pt,linkedSelector:X,linkedAnchor:_,elements:[b(m({},F),{selector:J})]})}return}if(t.activeTool==="model"){if("button"in v&&v.button===2)return;if(Rt){let F=Rt.name;if(f!=null&&f.has(F)){p==null||p(F);return}"shiftKey"in v&&v.shiftKey?Pt(w=>{let I=new Map(w);return I.has(F)?I.delete(F):I.set(F,Rt),I}):It.size===1&&It.has(F)?(d&&d([F]),Pt(new Map)):Pt(new Map([[F,Rt]]))}return}if(t.activeTool==="hand"&&ie&&ee){let F=ie,J=F.getAttribute("data-pm");J||(J=Math.random().toString(36).substring(2,8),F.setAttribute("data-pm",J));let w=cn(F),I=`[data-pm="${J}"]`,X=Xe(F),P=Lo(F),O=k.x-window.scrollX,$=k.y-window.scrollY,_=je,pt=window.getComputedStyle(F).justifyContent,Et=0;if(_){let Jt=Gn(F).find(Le=>Le.axis===ee);Et=Jt?ee==="column"?Jt.w:Jt.h:0}Yt(F,"transition","none"),Gt.current={isDragging:!0,hasMoved:!1,axis:ee,startX:O,startY:$,originalRow:_?Et:P.row,originalColumn:_?Et:P.column,element:F,elementInfo:b(m({},X),{selector:I}),selector:I,durableSelector:w,isAuto:_,originalJustifyContent:pt,visualGap:Et},me({axis:ee,row:_?Et:P.row,column:_?Et:P.column});return}if(t.activeTool==="hand"&&te&&on){let F=te,J=F.getAttribute("data-pm");J||(J=Math.random().toString(36).substring(2,8),F.setAttribute("data-pm",J));let w=`[data-pm="${J}"]`,I=Xe(F),{fontSize:X,lineHeight:P}=Ro(F),O=X>0?P/X:1.2,$=k.x-window.scrollX,_=k.y-window.scrollY;Yt(F,"transition","none");let pt=cn(F);de.current={isDragging:!0,property:on,startX:$,startY:_,originalFontSize:X,originalLineHeight:P,originalRatio:O,element:F,elementInfo:b(m({},I),{selector:w}),selector:w,durableSelector:pt},G({property:on,fontSize:X,lineHeight:P});return}if(t.activeTool==="hand"&&ke&&wt){let F=ke,J=F.getAttribute("data-pm");J||(J=Math.random().toString(36).substring(2,8),F.setAttribute("data-pm",J));let w=`[data-pm="${J}"]`,I=cn(F),X=Xe(F),P=Vn(F),O=F.getBoundingClientRect(),$=Math.floor(O.height/2),_=k.y-window.scrollY;Yt(F,"transition","none"),We.current={isDragging:!0,corner:wt,startY:_,original:P,maxRadius:$,element:F,elementInfo:b(m({},X),{selector:w}),selector:w,durableSelector:I},Ce({corner:wt,radius:m({},P)});return}if(t.activeTool==="hand"&&ut&&kt){let F=ut,J=F.getAttribute("data-pm");J||(J=Math.random().toString(36).substring(2,8),F.setAttribute("data-pm",J));let w=`[data-pm="${J}"]`,I=cn(F),X=Xe(F),P=ao(F),O=k.x-window.scrollX,$=k.y-window.scrollY;Yt(F,"transition","none"),Ft.current={isDragging:!0,side:kt,startX:O,startY:$,original:P,element:F,elementInfo:b(m({},X),{selector:w}),selector:w,durableSelector:I},Nt({side:kt,padding:m({},P)});return}let M=Ui(k);if(M){let F=t.annotations.find(J=>J.id===M.annotationId);if(F&&F.type!=="text"&&((H=F.status)!=null?H:"pending")==="pending"){ce({annotationId:M.annotationId,handle:M.handle,startPoint:k,originalPoints:[...F.points],hasMoved:!1});return}}let D=Wo(k);if(D&&D.points[0]){if(C&&no(),D.type!=="text"){if(_t(D.id,U),D.color&&e({type:"SET_COLOR",payload:D.color}),c){let F=D.threadId||(D.groupId?(at=t.annotations.find(J=>J.groupId===D.groupId&&J.threadId))==null?void 0:at.threadId:void 0);F&&c(F)}}else U||mt();Ot({annotation:D,startPoint:k,hasMoved:!1});return}if(U||mt(),t.activeTool==="text"){C&&no();let F=Math.random().toString(36).substring(2,9);Z({id:F,point:k,text:"",fontSize:12,isNew:!0});return}T(!0),e({type:"START_PATH",payload:k})},[t.isAnnotating,t.activeTool,t.inspectedElement,t.annotations,C,st,ct,ut,kt,ke,wt,ie,ee,je,te,on,Rt,It,f,d,p,c,eo,Wo,Ui,e,_t,mt,no]),Qi=Oe(v=>{var U,M;let k=eo(v);if(t.activeTool==="inspector"&&t.isAnnotating){let D=k.x-window.scrollX,H=k.y-window.scrollY,at=On(D,H),F=at&&St(at)?null:at;F!==ct&&(ge(F),rt(F?Xe(F):null));return}if(t.activeTool==="model"&&t.isAnnotating){let D=k.x-window.scrollX,H=k.y-window.scrollY,at=On(D,H);if(at!==oe.current&&(oe.current=at,Xt.current=0),at){let F=Jo(at,Xt.current);j(F)}else j(null);return}if(t.activeTool==="hand"&&t.isAnnotating){let D=k.x-window.scrollX,H=k.y-window.scrollY;Ct.current={x:D,y:H},pe({x:D,y:H});let at=et.current.cmd,F=et.current.shift;if(Gt.current.isDragging){let w=Gt.current,I=w.element;if(!I)return;if(!w.hasMoved){let $=Math.abs(D-w.startX),_=Math.abs(H-w.startY);if($<=2&&_<=2)return;w.hasMoved=!0,w.isAuto&&(Yt(I,"justify-content","normal"),Yt(I,"row-gap",`${w.visualGap}px`),Yt(I,"column-gap",`${w.visualGap}px`),he(!1))}let X=w.axis,P=w.originalRow,O=w.originalColumn;if(X==="column"){let $=D-w.startX;O=w.originalColumn+$,at||(P=w.originalRow+$)}else{let $=H-w.startY;P=w.originalRow+$,at||(O=w.originalColumn+$)}P=Math.max(0,P),O=Math.max(0,O),F&&(P=In(P),O=In(O)),P=Math.round(P),O=Math.round(O),Yt(I,"row-gap",`${P}px`),Yt(I,"column-gap",`${O}px`),me({axis:X,row:P,column:O});return}if(We.current.isDragging){let w=We.current,I=w.element;if(!I)return;let X=H-w.startY,P=w.corner,O=w.original,$=m({},O);if(at){let _=O[P]+X;_=Math.max(0,Math.min(w.maxRadius,_)),F&&(_=In(_)),_=Math.round(_),$[P]=_}else{let _=O[P]+X;_=Math.max(0,Math.min(w.maxRadius,_)),F&&(_=In(_)),_=Math.round(_),$={"top-left":_,"top-right":_,"bottom-right":_,"bottom-left":_}}Yt(I,"border-top-left-radius",`${$["top-left"]}px`),Yt(I,"border-top-right-radius",`${$["top-right"]}px`),Yt(I,"border-bottom-right-radius",`${$["bottom-right"]}px`),Yt(I,"border-bottom-left-radius",`${$["bottom-left"]}px`),Ce({corner:P,radius:$});return}if(de.current.isDragging){let w=de.current,I=w.element;if(!I)return;let X=w.property,P=w.originalFontSize,O=w.originalLineHeight,$=[8,10,11,12,13,14,16,18,20,22,24,28,32,36,40,48,56,64,72,80,96];if(X==="font-size"){let pt=D-w.startX;P=w.originalFontSize+pt,P=Math.max(1,P)}else{let pt=H-w.startY;O=w.originalLineHeight+pt,O=Math.max(P,O)}if(F)if(X==="font-size"){let pt=$[0],Et=Math.abs(P-pt);for(let se of $){let Jt=Math.abs(P-se);Jt<Et&&(pt=se,Et=Jt)}P=pt}else{let pt=P>0?O/P:1.2,Et=Math.round(pt*2)/2;O=P*Math.max(1,Et)}P=Math.round(P),O=Math.round(O*10)/10,Yt(I,"font-size",`${P}px`);let _=P>0?Math.round(O/P*1e3)/1e3:1.2;Yt(I,"line-height",`${_}`),G({property:X,fontSize:P,lineHeight:O});return}if(Ft.current.isDragging){let w=Ft.current,I=w.element;if(!I)return;let X=w.side,P=w.original,O=P.top,$=P.right,_=P.bottom,pt=P.left;if(X==="top"){let Et=w.startY-H;O=P.top+Et,at||(_=P.bottom+Et)}else if(X==="bottom"){let Et=H-w.startY;_=P.bottom+Et,at||(O=P.top+Et)}else if(X==="left"){let Et=w.startX-D;pt=P.left+Et,at||($=P.right+Et)}else if(X==="right"){let Et=D-w.startX;$=P.right+Et,at||(pt=P.left+Et)}O=Math.max(0,O),$=Math.max(0,$),_=Math.max(0,_),pt=Math.max(0,pt),F&&(O=In(O),$=In($),_=In(_),pt=In(pt)),O=Math.round(O),$=Math.round($),_=Math.round(_),pt=Math.round(pt),Yt(I,"padding",`${O}px ${$}px ${_}px ${pt}px`),Nt({side:X,padding:{top:O,right:$,bottom:_,left:pt}});return}let J=On(D,H);for(;J&&J.tagName==="A";)J=J.parentElement;{let I=[];J&&I.push(J),ke&&ke!==J&&I.push(ke);let X=null,P=16,O=null;for(let $ of I){let _=$.getBoundingClientRect(),pt=Vn($),Et=[["top-left",_.left,_.top+pt["top-left"]],["top-right",_.right,_.top+pt["top-right"]],["bottom-right",_.right,_.bottom-pt["bottom-right"]],["bottom-left",_.left,_.bottom-pt["bottom-left"]]];for(let[se,Jt,Le]of Et){let fe=Math.hypot(D-Jt,H-Le);fe<P&&(P=fe,X=se,O=$)}}if(X&&O){K(O),qt(X),ut&&jt(null),kt&&z(null),ie&&Ie(null),ee&&_e(null),he(!1),te&&nn(null),on&&En(null);return}}ke&&K(null),wt&&qt(null);{let w=[];J&&Zo(J)&&w.push(J);let I=(U=J==null?void 0:J.parentElement)!=null?U:null;for(;I&&I!==document.body&&w.length<3;)Zo(I)&&w.push(I),I=I.parentElement;for(let X of w){let O=Gn(X).find($=>D>=$.x&&D<=$.x+$.w&&H>=$.y&&H<=$.y+$.h);if(O){Ie(X),_e(O.axis),he(Ar(X,O.axis)),ut&&jt(null),kt&&z(null),te&&nn(null),on&&En(null);return}}}ie&&Ie(null),ee&&_e(null),he(!1);{let I=[];J&&I.push(J),te&&te!==J&&I.push(te);let X=null,P=1/0,O=null;for(let $ of I){if(!Pr($))continue;let _=lo($);if(!_)continue;let pt=D>=_.left&&D<=_.right&&H>=_.top&&H<=_.bottom,Et=[["font-size",_.right,_.top+_.height/2],["line-height",_.left+_.width/2,_.bottom]];for(let[se,Jt,Le]of Et){let fe=Math.hypot(D-Jt,H-Le);(pt||fe<12)&&fe<P&&(P=fe,X=se,O=$)}}X&&O?(nn(O),En(X)):(te&&nn(null),on&&En(null))}if(J!==ut&&jt(J),J){let w=ao(J),I=J.getBoundingClientRect(),X=Zi(D,H,I,w);z(X)}else z(null);return}if(Bt){let{handle:D,originalPoints:H,hasMoved:at}=Bt,F=t.annotations.find(P=>P.id===Bt.annotationId);if(!F)return;let J="metaKey"in v,w=J&&(v.metaKey||v.ctrlKey),I=J&&v.shiftKey,X;if(F.type==="line"){let P=H[0],O=H[H.length-1];D==="start"?X=[k,O]:X=[P,k]}else if(F.type==="freehand"){let P=Math.min(...H.map($t=>$t.x)),O=Math.max(...H.map($t=>$t.x)),$=Math.min(...H.map($t=>$t.y)),_=Math.max(...H.map($t=>$t.y)),pt=(P+O)/2,Et=($+_)/2,se=O-P||1,Jt=_-$||1,Le=se/Jt,fe=P,ft=O,Tt=$,Zt=_;switch(D){case"topLeft":fe=k.x,Tt=k.y;break;case"topRight":ft=k.x,Tt=k.y;break;case"bottomLeft":fe=k.x,Zt=k.y;break;case"bottomRight":ft=k.x,Zt=k.y;break}if(w)switch(D){case"topLeft":ft=O+(P-fe),Zt=_+($-Tt);break;case"topRight":fe=P-(ft-O),Zt=_+($-Tt);break;case"bottomLeft":ft=O+(P-fe),Tt=$-(Zt-_);break;case"bottomRight":fe=P-(ft-O),Tt=$-(Zt-_);break}if(I){let $t=ft-fe,be=Zt-Tt;if(Math.abs($t/be)>Le){let Be=Math.abs(be)*Le*Math.sign($t);D==="topLeft"||D==="bottomLeft"?fe=ft-Be:ft=fe+Be}else{let Be=Math.abs($t)/Le*Math.sign(be);D==="topLeft"||D==="topRight"?Tt=Zt-Be:Zt=Tt+Be}}let Kt=ft-fe||1,ae=Zt-Tt||1;X=H.map($t=>({x:fe+($t.x-P)/se*Kt,y:Tt+($t.y-$)/Jt*ae}))}else if(F.type==="circle"){let P=H[0],O=H[H.length-1],$=Math.min(P.x,O.x),_=Math.max(P.x,O.x),pt=Math.min(P.y,O.y),Et=Math.max(P.y,O.y),se=($+_)/2,Jt=(pt+Et)/2,Le=_-$,fe=Et-pt,ft=$,Tt=_,Zt=pt,Kt=Et;switch(D){case"top":if(Zt=k.y,w&&(Kt=Jt+(Jt-k.y)),I){let $t=(Kt-Zt)*(Le/fe)/2;ft=se-$t,Tt=se+$t}break;case"bottom":if(Kt=k.y,w&&(Zt=Jt-(k.y-Jt)),I){let $t=(Kt-Zt)*(Le/fe)/2;ft=se-$t,Tt=se+$t}break;case"left":if(ft=k.x,w&&(Tt=se+(se-k.x)),I){let $t=(Tt-ft)*(fe/Le)/2;Zt=Jt-$t,Kt=Jt+$t}break;case"right":if(Tt=k.x,w&&(ft=se-(k.x-se)),I){let $t=(Tt-ft)*(fe/Le)/2;Zt=Jt-$t,Kt=Jt+$t}break}X=[{x:ft,y:Zt},{x:Tt,y:Kt}]}else{let P=H[0],O=H[H.length-1],$=Math.min(P.x,O.x),_=Math.max(P.x,O.x),pt=Math.min(P.y,O.y),Et=Math.max(P.y,O.y),se=($+_)/2,Jt=(pt+Et)/2,Le=_-$||1,fe=Et-pt||1,ft=Le/fe,Tt=$,Zt=_,Kt=pt,ae=Et;switch(D){case"topLeft":Tt=k.x,Kt=k.y;break;case"topRight":Zt=k.x,Kt=k.y;break;case"bottomLeft":Tt=k.x,ae=k.y;break;case"bottomRight":Zt=k.x,ae=k.y;break}if(w)switch(D){case"topLeft":Zt=_+($-Tt),ae=Et+(pt-Kt);break;case"topRight":Tt=$-(Zt-_),ae=Et+(pt-Kt);break;case"bottomLeft":Zt=_+($-Tt),Kt=pt-(ae-Et);break;case"bottomRight":Tt=$-(Zt-_),Kt=pt-(ae-Et);break}if(I){let $t=Zt-Tt,be=ae-Kt;if(Math.abs($t/be)>ft){let Be=Math.abs(be)*ft*Math.sign($t);D==="topLeft"||D==="bottomLeft"?Tt=Zt-Be:Zt=Tt+Be}else{let Be=Math.abs($t)/ft*Math.sign(be);D==="topLeft"||D==="topRight"?Kt=ae-Be:ae=Kt+Be}}X=[{x:Tt,y:Kt},{x:Zt,y:ae}]}e({type:"RESIZE_ANNOTATION",payload:{id:Bt.annotationId,points:X,saveUndo:!at}}),at||ce(b(m({},Bt),{hasMoved:!0}));return}if(lt&&((M=lt.annotation.status)!=null?M:"pending")==="pending"){let D=k.x-lt.startPoint.x,H=k.y-lt.startPoint.y;if((Math.abs(D)>2||Math.abs(H)>2)&&!lt.hasMoved)Ot(b(m({},lt),{hasMoved:!0,startPoint:k})),e({type:"MOVE_ANNOTATION",payload:{id:lt.annotation.id,delta:{x:D,y:H},saveUndo:!0}});else if(lt.hasMoved){let F=k.x-lt.startPoint.x,J=k.y-lt.startPoint.y;Ot(b(m({},lt),{startPoint:k})),e({type:"MOVE_ANNOTATION",payload:{id:lt.annotation.id,delta:{x:F,y:J}}})}return}!A||!t.isAnnotating||e({type:"CONTINUE_PATH",payload:k})},[A,t.isAnnotating,t.activeTool,lt,Bt,ct,ut,kt,ke,wt,ie,ee,te,on,eo,e,In,Zi]),xr=Oe(v=>{var M,D,H,at,F,J;if(de.current.isDragging){let w=de.current,I=w.element;if(I&&w.selector&&w.elementInfo&&ne){I instanceof HTMLElement&&(I.style.removeProperty("font-size"),I.style.removeProperty("line-height"),I.style.removeProperty("transition"));let X=[];if(w.originalFontSize!==ne.fontSize&&(Yt(I,"font-size",`${ne.fontSize}px`),X.push({property:"font-size",original:`${w.originalFontSize}px`,modified:`${ne.fontSize}px`})),w.originalLineHeight!==ne.lineHeight){let P=w.originalFontSize>0?Math.round(w.originalLineHeight/w.originalFontSize*1e3)/1e3:1.2,O=ne.fontSize>0?Math.round(ne.lineHeight/ne.fontSize*1e3)/1e3:1.2;Yt(I,"line-height",`${O}`),X.push({property:"line-height",original:`${P}`,modified:`${O}`})}X.length>0&&e({type:"MODIFY_STYLES_BATCH",payload:{selector:w.selector,durableSelector:(M=w.durableSelector)!=null?M:void 0,element:w.elementInfo,changes:X}})}de.current={isDragging:!1,property:null,startX:0,startY:0,originalFontSize:0,originalLineHeight:0,originalRatio:1.2,element:null,elementInfo:null,selector:null,durableSelector:null},G(null);return}if(Gt.current.isDragging){let w=Gt.current,I=w.element,X="button"in v&&v.button===2;if(!w.hasMoved&&!X&&I&&w.selector&&w.elementInfo){I instanceof HTMLElement&&I.style.removeProperty("transition");let P=["space-between","space-around","stretch","normal"],O=w.originalJustifyContent||"normal",$=P.indexOf(O),_=P[($+1)%P.length],pt=[];_==="normal"?(Yt(I,"justify-content","normal"),pt.push({property:"justify-content",original:w.originalJustifyContent,modified:"normal"})):_==="stretch"?(Yt(I,"justify-content",_),Yt(I,"row-gap","8px"),Yt(I,"column-gap","8px"),pt.push({property:"justify-content",original:w.originalJustifyContent||"normal",modified:_}),w.originalRow!==8&&pt.push({property:"row-gap",original:`${w.originalRow}px`,modified:"8px"}),w.originalColumn!==8&&pt.push({property:"column-gap",original:`${w.originalColumn}px`,modified:"8px"})):(I instanceof HTMLElement&&(I.style.removeProperty("row-gap"),I.style.removeProperty("column-gap")),Yt(I,"justify-content",_),pt.push({property:"justify-content",original:w.originalJustifyContent||"normal",modified:_}),w.originalRow>0&&pt.push({property:"row-gap",original:`${w.originalRow}px`,modified:"0px"}),w.originalColumn>0&&pt.push({property:"column-gap",original:`${w.originalColumn}px`,modified:"0px"})),pt.length>0&&e({type:"MODIFY_STYLES_BATCH",payload:{selector:w.selector,durableSelector:(D=w.durableSelector)!=null?D:void 0,element:w.elementInfo,changes:pt}})}else if(w.hasMoved&&I&&w.selector&&w.elementInfo&&Ut){I instanceof HTMLElement&&(I.style.removeProperty("row-gap"),I.style.removeProperty("column-gap"),I.style.removeProperty("transition"));let P=[];w.isAuto?(I instanceof HTMLElement&&I.style.removeProperty("justify-content"),Yt(I,"justify-content","normal"),Yt(I,"row-gap",`${Ut.row}px`),Yt(I,"column-gap",`${Ut.column}px`),P.push({property:"justify-content",original:w.originalJustifyContent,modified:"normal"}),P.push({property:"row-gap",original:"0px",modified:`${Ut.row}px`}),P.push({property:"column-gap",original:"0px",modified:`${Ut.column}px`})):(w.originalRow!==Ut.row&&(Yt(I,"row-gap",`${Ut.row}px`),P.push({property:"row-gap",original:`${w.originalRow}px`,modified:`${Ut.row}px`})),w.originalColumn!==Ut.column&&(Yt(I,"column-gap",`${Ut.column}px`),P.push({property:"column-gap",original:`${w.originalColumn}px`,modified:`${Ut.column}px`}))),P.length>0&&e({type:"MODIFY_STYLES_BATCH",payload:{selector:w.selector,durableSelector:(H=w.durableSelector)!=null?H:void 0,element:w.elementInfo,changes:P}})}Gt.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},me(null);return}if(We.current.isDragging){let w=We.current,I=w.element;if(I&&w.selector&&w.elementInfo&&ye){I instanceof HTMLElement&&(I.style.removeProperty("border-top-left-radius"),I.style.removeProperty("border-top-right-radius"),I.style.removeProperty("border-bottom-right-radius"),I.style.removeProperty("border-bottom-left-radius"),I.style.removeProperty("transition"));let X=["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"},O=[];for(let $ of X)w.original[$]!==ye.radius[$]&&(Yt(I,P[$],`${ye.radius[$]}px`),O.push({property:P[$],original:`${w.original[$]}px`,modified:`${ye.radius[$]}px`}));O.length>0&&e({type:"MODIFY_STYLES_BATCH",payload:{selector:w.selector,durableSelector:(at=w.durableSelector)!=null?at:void 0,element:w.elementInfo,changes:O}})}We.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},Ce(null);return}if(Ft.current.isDragging){let w=Ft.current,I=w.element,X=w.selector,P=w.elementInfo;if(I&&X&&P&&yt){let O=w.original,$=yt.padding;I instanceof HTMLElement&&(I.style.removeProperty("padding"),I.style.removeProperty("transition"));let _=[],pt=[{prop:"padding-top",origVal:O.top,newVal:$.top},{prop:"padding-right",origVal:O.right,newVal:$.right},{prop:"padding-bottom",origVal:O.bottom,newVal:$.bottom},{prop:"padding-left",origVal:O.left,newVal:$.left}];for(let{prop:Et,origVal:se,newVal:Jt}of pt)se!==Jt&&(Yt(I,Et,`${Jt}px`),_.push({property:Et,original:`${se}px`,modified:`${Jt}px`}));_.length>0&&e({type:"MODIFY_STYLES_BATCH",payload:{selector:X,durableSelector:(F=w.durableSelector)!=null?F:void 0,element:P,changes:_}})}Ft.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},Nt(null);return}if(Bt){ce(null);return}if(lt){if(!lt.hasMoved&<.annotation.type==="text"&&((J=lt.annotation.status)!=null?J:"pending")==="pending"){let w=eo(v);Z({id:lt.annotation.id,point:lt.annotation.points[0],text:lt.annotation.text||"",fontSize:lt.annotation.fontSize||12,isNew:!1,clickPoint:w,groupId:lt.annotation.groupId})}Ot(null);return}if(!A)return;let k=5;if(t.currentPath.length>=2){let w=t.currentPath[0],I=t.currentPath[t.currentPath.length-1],X=Math.abs(I.x-w.x),P=Math.abs(I.y-w.y);if((t.activeTool==="line"?Math.sqrt(X*X+P*P)<k:X<k&&P<k)&&["rectangle","circle","line"].includes(t.activeTool)){T(!1),e({type:"CANCEL_PATH"});return}}let U=Cr(t.currentPath);if(t.activeTool==="rectangle"&&t.currentPath.length>=2){let w=t.currentPath[0],I=t.currentPath[t.currentPath.length-1],X=Math.min(w.x,I.x),P=Math.max(w.y,I.y),O=t.strokeWidth/2,$=Math.random().toString(36).substring(2,9);B({point:{x:X-O+4,y:P+O+4},groupId:$}),T(!1),e({type:"FINISH_PATH",payload:{groupId:$,elements:U}});return}T(!1),e({type:"FINISH_PATH",payload:{elements:U}})},[A,lt,Bt,yt,ye,Ut,ne,eo,e,t.activeTool,t.currentPath,t.strokeWidth]),il=Oe(v=>{let k=v.target.value;_o.current=v.target.selectionStart,Z(U=>U&&b(m({},U),{text:k}))},[]),sl=Oe(v=>{v.key==="Escape"?Z(null):v.key==="Enter"&&!v.shiftKey&&(v.preventDefault(),no())},[no]),al=Oe(v=>{if(!C)return;let k=v.clipboardData.items,U=[];for(let M=0;M<k.length;M++){let D=k[M];if(D.type.startsWith("image/")){let H=D.getAsFile();H&&U.push(H)}}U.length>0&&(v.preventDefault(),Z(M=>M?b(m({},M),{images:[...M.images||[],...U]}):null))},[C]),ll=Oe(v=>{if(!t.isAnnotating)return;if(t.activeTool==="hand"){v.preventDefault();let U=ut||ie||ke||te;if(U&&!St(U)){let M=Xe(U),D=cn(U);e({type:"SELECT_ELEMENT",payload:{el:U,info:b(m({},M),{selector:D})}})}return}v.preventDefault();let k=S.current;k&&(R.current=!0,k.style.pointerEvents="none",setTimeout(()=>{R.current&&(R.current=!1,k.style.pointerEvents="")},4e3))},[t.activeTool,t.isAnnotating,ut,ie,ke,te,e,St,S]);Ye(()=>{let v=t.annotations.filter(H=>H.linkedSelector);if(v.length===0)return;let k=null,U=()=>{var at,F,J;let H=[];for(let w of v){let I=document.querySelector(w.linkedSelector);if(!I&&((F=(at=w.elements)==null?void 0:at[0])!=null&&F.selector)&&w.linkedSelector.startsWith("[data-pm=")){try{I=document.querySelector(w.elements[0].selector)}catch(Jt){}if(I){let Jt=(J=w.linkedSelector.match(/data-pm="([^"]+)"/))==null?void 0:J[1];Jt&&I.setAttribute("data-pm",Jt)}}if(!I)continue;let X=I.getBoundingClientRect(),P=t.styleModifications.some(Jt=>{try{return I.matches(Jt.selector)}catch(Le){return!1}}),O=v.filter(Jt=>Jt.id!==w.id&&Jt.timestamp<w.timestamp&&Jt.linkedSelector===w.linkedSelector).length,$=(P?1:0)+O,_=X.top>=uo*(1+$)?"top-left":"bottom-left",pt=Da(X,_,$),Et=w.points[0],se=_!==w.linkedAnchor;Et&&(se||Math.abs(pt.x-Et.x)>1||Math.abs(pt.y-Et.y)>1)&&H.push({id:w.id,point:pt,linkedAnchor:se?_:void 0})}H.length>0&&e({type:"UPDATE_LINKED_POSITIONS",payload:{updates:H}})},M=()=>{k&&cancelAnimationFrame(k),k=requestAnimationFrame(U)};U(),window.addEventListener("scroll",M,!0),window.addEventListener("resize",M,!0),window.addEventListener("load",M),document.fonts.ready.then(M);let D=new MutationObserver(M);return D.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),D.disconnect(),k&&cancelAnimationFrame(k)}},[t.annotations,e]);let cl=()=>{var v,k,U;if(!t.isAnnotating)return"default";if(Bt){let{handle:M}=Bt;return M==="start"||M==="end"?"move":M==="top"||M==="bottom"?"ns-resize":M==="left"||M==="right"?"ew-resize":M==="topLeft"||M==="bottomRight"?"nwse-resize":"nesw-resize"}if(t.activeTool==="text")return"text";if(t.activeTool==="hand"){let M=(v=Ut==null?void 0:Ut.axis)!=null?v:ee;if(M==="row")return"ns-resize";if(M==="column")return"ew-resize";if(ye||wt)return"ns-resize";let D=(k=ne==null?void 0:ne.property)!=null?k:on;if(D==="font-size")return"ew-resize";if(D==="line-height")return"ns-resize";let H=(U=yt==null?void 0:yt.side)!=null?U:kt;return H==="top"||H==="bottom"?"ns-resize":H==="left"||H==="right"?"ew-resize":"default"}return"crosshair"},dl={position:"fixed",top:0,left:0,width:"100vw",height:"100vh",zIndex:9998,pointerEvents:t.isAnnotating?"auto":"none",visibility:t.isAnnotating?"visible":"hidden",cursor:cl()},ts=Oe(()=>{let v=S.current;if(!v||!C)return{width:100,height:12*1.4};let k=v.getContext("2d");if(!k)return{width:100,height:C.fontSize*1.4};k.font=`${C.fontSize}px ${Se}`;let M=k.measureText("Type here...").width,D=C.text.split(`
|
|
10
|
+
`),H=D.length>0?Math.max(M,...D.map(F=>k.measureText(F||" ").width)):M,at=Math.max(1,D.length)*C.fontSize*1.4;return{width:H,height:at}},[C,S])(),ul=C?{position:"fixed",left:C.point.x-4-Vt.x,top:C.point.y-4-Vt.y,zIndex:9999,width:ts.width+8,height:ts.height+8,padding:4,fontSize:C.fontSize,fontFamily:Se,color:"#ffffff",backgroundColor:t.activeColor,border:"none",borderRadius:0,outline:"none",boxShadow:"none",lineHeight:1.4,resize:"none",overflow:"hidden",whiteSpace:"pre"}:{};return bo(xo,{children:[re("canvas",{ref:S,id:"devtools-canvas",style:dl,onMouseDown:qi,onMouseMove:Qi,onMouseUp:v=>xr(v),onMouseLeave:v=>xr(v),onTouchStart:qi,onTouchMove:Qi,onTouchEnd:v=>xr(v),onContextMenu:ll}),C&&bo(xo,{children:[re("style",{children:"#devtools-text-input::placeholder { color: rgba(255, 255, 255, 0.5); }"}),re("textarea",{id:"devtools-text-input",ref:Mt,value:C.text,onChange:il,onKeyDown:sl,onPaste:al,onBlur:no,placeholder:"Type here...",style:ul}),C.images&&C.images.length>0&&bo("div",{"data-devtools":!0,style:{position:"fixed",left:C.point.x-4-Vt.x,top:C.point.y-4-Vt.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"]})]}),t.isAnnotating&&t.activeTool!=="hand"&&t.styleModifications.length>0&&re(pa,{styleModifications:t.styleModifications,isInspecting:!!t.inspectedElement,accentColor:t.activeColor,annotationGroupCount:new Set(t.annotations.map(v=>v.groupId||v.id)).size,dispatch:e,inFlightSelectors:r}),t.activeTool==="hand"&&t.isAnnotating&&t.styleModifications.length>0&&re(ga,{styleModifications:t.styleModifications,accentColor:t.activeColor}),t.isAnnotating&&re(ea,{annotations:t.annotations,supersededAnnotations:Mn,inFlightIds:n,scrollX:Vt.x,scrollY:Vt.y,annotationGroupMap:Eo,onViewThread:c,onSelectAnnotation:_t}),t.isAnnotating&&((l==null?void 0:l.status)==="awaiting_approval"||(l==null?void 0:l.status)==="planning")&&l.threadId&&c&&re(na,{annotations:t.annotations,supersededAnnotations:Mn,scrollX:Vt.x,scrollY:Vt.y,annotationGroupMap:Eo,planThreadId:l.threadId,taskCount:(os=(ns=l.tasks)==null?void 0:ns.length)!=null?os:0,planStatus:l.status,onViewThread:c,onSelectAnnotation:_t}),t.isAnnotating&&s&&re(oa,{annotations:t.annotations,supersededAnnotations:Mn,scrollX:Vt.x,scrollY:Vt.y,onReply:s,annotationGroupMap:Eo}),t.isAnnotating&&i&&i.size>0&&re(Ur,{inFlightSelectorColors:i}),t.isAnnotating&&Ji&&re(Ur,{inFlightSelectorColors:Ji,animated:!1}),t.activeTool==="hand"&&t.isAnnotating&&(Ut?Gt.current.element:ie)&&re(ei,{element:Ut?Gt.current.element:ie,gap:Ut?{row:Ut.row,column:Ut.column}:Lo(ie),accentColor:t.activeColor,hoveredAxis:ee,draggingAxis:(rs=Ut==null?void 0:Ut.axis)!=null?rs:null,cursorViewport:bt,isAutoGap:je,refreshKey:Ke}),t.activeTool==="hand"&&t.isAnnotating&&$e&&re(Pa,{element:$e.target,modifier:$e.modifier,accentColor:t.activeColor,refreshKey:Ke}),t.activeTool==="hand"&&t.isAnnotating&&!$e&&(ye?We.current.element:ke)&&re(la,{element:ye?We.current.element:ke,radius:(is=ye==null?void 0:ye.radius)!=null?is:Vn(ke),accentColor:t.activeColor,hoveredCorner:wt,draggingCorner:(ss=ye==null?void 0:ye.corner)!=null?ss:null,cursorViewport:bt}),t.activeTool==="hand"&&t.isAnnotating&&!$e&&(ne?de.current.element:te)&&re(Na,{element:ne?de.current.element:te,fontSize:(as=ne==null?void 0:ne.fontSize)!=null?as:Ro(te).fontSize,lineHeight:(ls=ne==null?void 0:ne.lineHeight)!=null?ls:Ro(te).lineHeight,accentColor:t.activeColor,hoveredProperty:on,draggingProperty:(cs=ne==null?void 0:ne.property)!=null?cs:null,cursorViewport:bt}),t.activeTool==="hand"&&t.isAnnotating&&!$e&&(yt?Ft.current.element:ut)&&re(ai,{element:yt?Ft.current.element:ut,padding:(ds=yt==null?void 0:yt.padding)!=null?ds:ao(ut),accentColor:t.activeColor,hoveredSide:kt,draggingSide:(us=yt==null?void 0:yt.side)!=null?us:null,cursorViewport:bt,refreshKey:ne?ne.fontSize+ne.lineHeight*1e3:0}),t.activeTool==="inspector"&&t.isAnnotating&&re(xo,{children:ct&&!t.inspectedElement&&(()=>{let v=!!V||!!(C!=null&&C.linkedSelector)||t.annotations.some(k=>{if(!k.linkedSelector)return!1;try{return ct.matches(k.linkedSelector)}catch(U){return!1}});return re(po,{element:ct,isSelected:!1,elementInfo:N,color:t.activeColor,hideTooltip:v})})()}),t.activeTool==="model"&&t.isAnnotating&&It.size>0&&[...It.entries()].map(([v,k])=>re(po,{element:k.rootElement,isSelected:!0,elementInfo:{selector:"",tagName:k.rootElement.tagName.toLowerCase(),reactComponent:v},color:"#8b5cf6"},v)),t.activeTool==="model"&&t.isAnnotating&&fn&&re(po,{element:fn.rootElement,isSelected:!0,elementInfo:{selector:"",tagName:fn.rootElement.tagName.toLowerCase(),reactComponent:fn.name},color:"#22c55e"}),t.activeTool==="model"&&t.isAnnotating&&Ze.length>0&&Ze.map((v,k)=>re("div",{style:{position:"absolute",left:v.x,top:v.y,width:v.width,height:v.height,backgroundColor:"rgba(255, 0, 0, 0.08)",pointerEvents:"none",zIndex:9998},children:v.direction==="vertical"?bo(xo,{children:[re("div",{style:{position:"absolute",left:"50%",top:0,width:6,height:1,backgroundColor:"#FF0000",transform:"translateX(-50%)"}}),re("div",{style:{position:"absolute",left:"50%",top:0,bottom:0,width:1,backgroundColor:"#FF0000",transform:"translateX(-50%)"}}),re("div",{style:{position:"absolute",left:"50%",bottom:0,width:6,height:1,backgroundColor:"#FF0000",transform:"translateX(-50%)"}}),re("div",{style:{position:"absolute",left:"calc(50% + 6px)",top:v.height<16?-6:"50%",transform:v.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(v.height)})]}):bo(xo,{children:[re("div",{style:{position:"absolute",left:0,top:"50%",width:1,height:6,backgroundColor:"#FF0000",transform:"translateY(-50%)"}}),re("div",{style:{position:"absolute",left:0,right:0,top:"50%",height:1,backgroundColor:"#FF0000",transform:"translateY(-50%)"}}),re("div",{style:{position:"absolute",right:0,top:"50%",width:1,height:6,backgroundColor:"#FF0000",transform:"translateY(-50%)"}}),re("div",{style:{position:"absolute",left:v.width<30?0:"50%",top:(v.width<30,void 0),bottom:"calc(50% + 4px)",transform:v.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(v.width)})]})},k)),t.activeTool==="model"&&t.isAnnotating&&Rt&&re(po,{element:Rt.rootElement,isSelected:!1,elementInfo:{selector:"",tagName:Rt.rootElement.tagName.toLowerCase(),reactComponent:Rt.name},color:f!=null&&f.has(Rt.name)?"#22c55e":"#8b5cf6"}),t.activeTool==="hand"&&t.isAnnotating&&t.inspectedElement&&bo(xo,{children:[ot&&ot!=="padding"&&ot!=="gap"&&(()=>{var F;let v=new Set(t.annotations.map(J=>J.groupId||J.id)).size,k=t.inspectedElement.info.selector,U=t.styleModifications.findIndex(J=>J.selector===k),M=U>=0?v+U+1:v+t.styleModifications.length+1,D=t.styleModifications.find(J=>J.selector===k),H=(F=D==null?void 0:D.changes.length)!=null?F:0,at=!!(D!=null&&D.captured);return re(po,{element:t.inspectedElement.el,isSelected:!0,elementInfo:t.inspectedElement.info,color:at?"#999999":t.activeColor,annotationNumber:M,changeCount:H})})(),ot==="padding"&&re(ai,{element:t.inspectedElement.el,padding:ao(t.inspectedElement.el),accentColor:t.activeColor,hoveredSide:null,draggingSide:null}),ot==="gap"&&re(ei,{element:t.inspectedElement.el,gap:Lo(t.inspectedElement.el),accentColor:t.activeColor,hoveredAxis:null,draggingAxis:null}),re(Ra,{element:t.inspectedElement.el,elementInfo:t.inspectedElement.info,selector:t.inspectedElement.info.selector,styleModifications:t.styleModifications,dispatch:e,onClose:()=>e({type:"SELECT_ELEMENT",payload:null}),onHover:it,accentColor:t.activeColor})]})]})}import{useCallback as pn,useEffect as vn,useMemo as Mi,useRef as Ae,useState as Fo}from"react";import{Circle as Su,Component as wu,Hand as ku,MessageCircle as Cu,Pen as Eu,Slash as Tu,Square as Mu,Trash2 as Iu,Type as Lu}from"lucide-react";import{useEffect as Ud,useRef as Zd}from"react";function Oa(t,e,o,n,r){let i=Zd(0);Ud(()=>{if(!o.current||(localStorage.setItem(r.expanded,String(t)),!t))return;let a=e.annotations.length;(a>=i.current||a===0||!n)&&(localStorage.setItem(r.annotations,JSON.stringify(e.annotations)),i.current=a),localStorage.setItem(r.styleMods,JSON.stringify(e.styleModifications)),localStorage.setItem(r.spacingChanges,JSON.stringify(e.spacingTokenChanges)),localStorage.setItem(r.tool,e.activeTool),localStorage.setItem(r.color,e.activeColor),localStorage.setItem(r.stroke,String(e.strokeWidth)),e.inspectedElement?localStorage.setItem(r.inspected,JSON.stringify({selector:e.inspectedElement.info.selector,info:e.inspectedElement.info})):localStorage.removeItem(r.inspected)},[t,e.annotations,e.styleModifications,e.spacingTokenChanges,e.activeTool,e.activeColor,e.strokeWidth,e.inspectedElement,n,o,r])}import{Component as qd,createElement as Qd,useCallback as gr,useEffect as So,useRef as vo,useState as xn}from"react";import{Fragment as wo,jsx as Wt,jsxs as Qe}from"react/jsx-runtime";var Ha="popmelt-library-tab",tu=/^#[0-9a-fA-F]{3,8}$/,eu=/^(?:rgba?|hsla?|oklch)\([^)]+\)$/,nu=new Set(["black","white","red","blue","green","yellow","orange","purple","pink","gray","grey","cyan","magenta","brown","navy","teal","maroon","olive","silver","aqua","fuchsia","lime"]),ou=/^-?\d+(\.\d+)?(px|rem|em|%)$/;function za(t){let e=t.trim();return tu.test(e)||eu.test(e)||nu.has(e.toLowerCase())}function ru(t){return ou.test(t.trim())}function iu(t){let e=t.trim().match(/^(-?\d+(?:\.\d+)?)px$/);return e?parseFloat(e[1]):null}function Ci(t,e=""){if(t==null)return[];if(typeof t!="object")return[[e,String(t)]];if(Array.isArray(t))return[[e,t.map(String).join(", ")]];let o=[];for(let[n,r]of Object.entries(t)){let i=e?`${e}.${n}`:n;if(r!==null&&typeof r=="object"&&!Array.isArray(r)){let a=r;typeof a.value=="string"?o.push([i,a.value]):o.push(...Ci(r,i))}else o.push([i,Array.isArray(r)?r.map(String).join(", "):String(r!=null?r:"")])}return o}function su(t){return t.length===0?"generic":t.filter(([,n])=>za(n)).length>t.length/2?"colors":t.filter(([,n])=>ru(n)).length>t.length/2?"spacing":"generic"}var au=b(m({position:"fixed",top:16,right:16,bottom:80,width:300,backgroundColor:"#ffffff"},hn),{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"}),_a={border:"none",background:"none",cursor:"pointer",fontFamily:"inherit",fontSize:11,fontWeight:600,padding:"2px 0",color:"#9ca3af"},lu=b(m({},_a),{color:"#1f2937",borderBottom:"1.5px solid #1f2937"});function cu({entries:t}){let e=[],o=[];for(let n of t)za(n[1])?e.push(n):o.push(n);return Qe(wo,{children:[e.length>0&&Wt("div",{style:{display:"flex",flexWrap:"wrap",gap:2,marginBottom:o.length>0?6:0},children:e.map(([n,r])=>Wt("div",{title:`${n.split(".").pop()}: ${r}`,style:{width:28,height:28,backgroundColor:r,outline:"1px solid rgba(0,0,0,0.08)",outlineOffset:-1}},n))}),o.length>0&&Wt(Ei,{entries:o})]})}var fr=[0,1,2,4,8,12,16,20,24,28,32];function du(t){if(t<=32){let e=fr[0],o=Math.abs(t-e);for(let n=1;n<fr.length;n++){let r=Math.abs(t-fr[n]);r<o&&(e=fr[n],o=r)}return e}return Math.round(t/8)*8}function uu({label:t,value:e,px:o,tokenPath:n,rawToken:r,onHover:i,onModify:a,onDelete:s}){let[c,l]=xn(!1),[d,p]=xn(null),u=vo(!1),f=vo(0),g=vo(0),h=vo([]),S=d!==null?d:o,x=d!==null?`${d}px`:e,L=d!==null,R=gr(T=>{T.preventDefault(),u.current=!0,f.current=T.clientX,g.current=o;let C=Ko(r);h.current=Mr(C);let Z=q=>{let tt=q.clientX-f.current,B=Math.max(0,Math.round(g.current+tt));q.shiftKey&&(B=du(B));for(let V of h.current)V.element.style.setProperty(V.property,B+"px","important");p(B),i==null||i({name:t,px:B,token:C})},Y=()=>{window.removeEventListener("mousemove",Z),window.removeEventListener("mouseup",Y),document.body.style.cursor="",u.current=!1,p(q=>{if(q!==null&&q!==o&&a){let tt=Ko(r),B=tt.bindings&&tt.bindings.length>0,V;if(B){let vt=Lr(tt.bindings,g.current,q);V=JSON.stringify(b(m({},tt),{value:`${q}px`,bindings:vt}))}else{let vt=Ds(h.current,g.current),Dt=Fs(h.current);if(vt.length>0){let Ht=Lr(vt,g.current,q);V=JSON.stringify({value:`${q}px`,property:Dt,bindings:Ht})}else V=`${q}px`}let Q=typeof r=="string"?r:JSON.stringify(r),Mt=h.current.map(vt=>({selector:cn(vt.element),property:vt.property})),dt=Hs(h.current,g.current,q);a({tokenPath:n,originalValue:Q,currentValue:V,targets:Mt,originalPx:g.current,currentPx:q},{id:Math.random().toString(36).substring(2,9),tokenPath:n,tokenName:t,originalPx:g.current,newPx:q,affectedElements:dt})}return q})};document.body.style.cursor="ew-resize",window.addEventListener("mousemove",Z),window.addEventListener("mouseup",Y)},[o,t,n,r,i,a]),A=Ko(r);return Qe("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",fontSize:11,padding:"1px 0",cursor:"ew-resize",userSelect:"none"},onMouseEnter:()=>{u.current||(l(!0),i==null||i({name:t,px:S,token:A}))},onMouseLeave:()=>{u.current||(l(!1),i==null||i(null))},onMouseDown:R,children:[Wt("span",{style:{color:c||L?"#FF0000":"#9ca3af"},children:t}),Qe("span",{style:{display:"flex",alignItems:"center",gap:4},children:[Wt("span",{style:{color:c||L?"#FF0000":"#6b7280",fontWeight:600},children:x}),s&&c&&!L&&Wt("button",{type:"button",title:"Remove token",onMouseDown:T=>{T.stopPropagation();let C=typeof r=="string"?r:JSON.stringify(r);s(n,C)},style:{border:"none",background:"none",cursor:"pointer",padding:0,fontSize:10,lineHeight:1,color:"#9ca3af"},onMouseEnter:T=>{T.currentTarget.style.color="#FF0000"},onMouseLeave:T=>{T.currentTarget.style.color="#9ca3af"},children:"\u2715"})]})]})}function pu({entries:t,categoryKey:e,rawTokens:o,onHover:n,onModify:r,onDelete:i}){let a=[],s=[];for(let c of t){let l=iu(c[1]);l!==null?a.push([c[0],c[1],l]):s.push(c)}return Qe(wo,{children:[a.length>0&&Wt("div",{style:{display:"flex",flexDirection:"column",gap:2},children:a.map(([c,l,d])=>{let p=c.split(".").pop(),u=o?fu(o,c):l,f=u&&typeof u=="object"&&"value"in u?u:l;return Wt(uu,{label:p,value:l,px:d,tokenPath:`tokens.${e}.${c}`,rawToken:f,onHover:n,onModify:r,onDelete:i},c)})}),s.length>0&&Wt(Ei,{entries:s})]})}function fu(t,e){let o=e.split("."),n=t;for(let r of o){if(n==null||typeof n!="object")return;n=n[r]}return n}function Ei({entries:t}){return Wt("div",{style:{display:"flex",flexDirection:"column",gap:3},children:t.map(([e,o])=>Qe("div",{style:{fontSize:11},children:[Wt("div",{style:{color:"#9ca3af",fontSize:10,marginBottom:1},children:e}),Wt("div",{style:{color:"#1f2937",lineHeight:1.4,paddingLeft:8},children:o})]},e))})}function $a({entries:t,categoryKey:e,rawTokens:o,onSpacingHover:n,onModifyToken:r,onDeleteToken:i}){let a=su(t);return a==="colors"?Wt(cu,{entries:t}):a==="spacing"?Wt(pu,{entries:t,categoryKey:e,rawTokens:o,onHover:n,onModify:r,onDelete:i}):Wt(Ei,{entries:t})}function gu(t){let e=t.toLowerCase(),o=null,n=document.createTreeWalker(document.body,NodeFilter.SHOW_ELEMENT,{acceptNode(i){return i.closest("#devtools-toolbar, #devtools-canvas, #devtools-scrim, [data-popmelt-panel]")?NodeFilter.FILTER_REJECT:NodeFilter.FILTER_ACCEPT}}),r=n.currentNode;for(;r=n.nextNode();){let i=r,a=Object.keys(i).find(c=>c.startsWith("__reactFiber$")||c.startsWith("__reactInternalInstance$"));if(!a)continue;let s=i[a];for(;s;){let c=s.type,l=typeof c=="function"||typeof c=="object"?(c==null?void 0:c.displayName)||(c==null?void 0:c.name):null;if(typeof l=="string"){let d=l.toLowerCase();if(d===e){let p=m({},s.memoizedProps);return delete p.ref,{type:c,props:p}}if(!o){if(d.length>=4&&e.includes(d)){let p=m({},s.memoizedProps);delete p.ref,o={type:c,props:p}}else if(e.length>=4&&d.includes(e)){let p=m({},s.memoizedProps);delete p.ref,o={type:c,props:p}}}}s=s.return}}return o}var ki=class extends qd{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}};function mu({children:t}){return Wt("div",{style:{fontWeight:700,fontSize:11,color:"#6b7280",letterSpacing:"0.05em",marginBottom:6},children:t})}function hu({tokens:t,onSpacingTokenHover:e,onModifyToken:o,onDeleteToken:n}){return!t||Object.keys(t).length===0?Wt("div",{style:{color:"#9ca3af",fontSize:11},children:"No tokens defined yet."}):Wt(wo,{children:Object.entries(t).map(([r,i])=>Qe("div",{style:{marginBottom:14},children:[Wt(mu,{children:r}),Wt($a,{entries:Ci(i),categoryKey:r,rawTokens:i,onSpacingHover:e,onModifyToken:o,onDeleteToken:n})]},r))})}function yu({rules:t}){return!t||t.length===0?Wt("div",{style:{color:"#9ca3af",fontSize:11},children:"No rules defined yet."}):Wt(wo,{children:t.map((e,o)=>Qe("div",{style:{display:"flex",gap:6,marginBottom:4,lineHeight:1.4,fontSize:11},children:[Qe("span",{style:{color:"#9ca3af",flexShrink:0},children:[o+1,"."]}),Wt("span",{children:e})]},o))})}function bu({name:t,value:e,selected:o,highlighted:n,onRemove:r,onHover:i}){var q;let[a,s]=xn(!1),[c,l]=xn(!1),d=vo(null),p=vo(0),[u,f]=xn(0),[g,h]=xn(0),S=Ci(e),x=(q=S.find(([tt])=>tt==="description"))==null?void 0:q[1];So(()=>{if(!c&&!n){f(0),h(0),p.current=0;return}let tt=io(t);f(tt.length)},[c,n,t]),So(()=>{o&&d.current&&d.current.scrollIntoView({behavior:"smooth",block:"nearest"})},[o]);let L=o||n||c,R=o?"139,92,246":"34,197,94",A=o?"#8b5cf6":"#22c55e",T=L?`rgba(${R},0.06)`:void 0,C=L?`inset 0 0 0 1.5px rgba(${R},0.35)`:void 0,Z=n||c,Y=gr(()=>{let tt=io(t);if(tt.length===0)return;let B=p.current%tt.length;tt[B].rootElement.scrollIntoView({behavior:"smooth",block:"center"}),h(B),p.current=B+1,i==null||i({name:t,instanceIndex:B})},[t,i]);return Qe("div",{ref:d,onClick:Y,onMouseEnter:()=>{l(!0),i==null||i({name:t,instanceIndex:0})},onMouseLeave:()=>{l(!1),i==null||i(null)},style:{marginBottom:8,background:T,padding:6,boxShadow:C,cursor:"pointer"},children:[Qe("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between"},children:[Qe("div",{style:{display:"flex",alignItems:"center",gap:6,marginBottom:6},children:[Wt("div",{style:{fontWeight:700,fontSize:11,letterSpacing:"0.05em",padding:"2px 6px",backgroundColor:Z?A:"transparent",color:Z?"#fff":"#6b7280"},children:t}),Z&&u>1&&Qe("span",{style:{fontSize:10,fontWeight:600,color:"#9ca3af"},children:[g+1,"/",u]})]}),r&&c&&Wt("button",{type:"button",title:"Remove from model",onClick:tt=>{tt.stopPropagation(),r(t)},style:{border:"none",background:"none",cursor:"pointer",padding:"0 2px",fontSize:14,lineHeight:1,color:"#9ca3af",marginTop:-4},onMouseEnter:tt=>{tt.currentTarget.style.color="#FF0000"},onMouseLeave:tt=>{tt.currentTarget.style.color="#9ca3af"},children:"\u2715"})]}),x&&Wt("div",{style:{fontSize:11,color:Z?"#1f2937":"#9ca3af",marginBottom:6,lineHeight:1.4},children:x}),a?Wt($a,{entries:S.filter(([tt])=>tt!=="description"),categoryKey:""}):Wt(xu,{name:t,onNotFound:()=>s(!0),entries:S})]})}function xu({name:t,onNotFound:e}){let[o,n]=xn(null),[r,i]=xn(!1);return So(()=>{let a=gu(t);a||e(),n(a),i(!0)},[t,e]),!r||!o?null:Wt(ki,{onError:e,children:Wt("div",{"data-popmelt-panel":!0,onClick:a=>{a.preventDefault(),a.stopPropagation()},style:{width:"100%",overflowY:"auto",overflowX:"hidden",maxHeight:150,padding:"1rem",outline:"1px solid rgba(0,0,0,0.06)",backgroundColor:"rgb(250,250,250)",boxSizing:"border-box",marginBottom:4,display:"flex",flexDirection:"column",justifyContent:"stretch",alignItems:"center"},children:Wt("div",{style:{zoom:.5},children:Qd(o.type,o.props)})})})}function vu({components:t,selectedComponent:e,hoveredComponent:o,onRemove:n,onHover:r}){if(!t||Object.keys(t).length===0)return Wt("div",{style:{color:"#9ca3af",fontSize:11},children:"No component patterns defined yet."});let i=new Set(Object.keys(t)),a=kr(i),s=Object.entries(t).sort(([c],[l])=>{var d,p;return((d=a.get(c))!=null?d:1/0)-((p=a.get(l))!=null?p:1/0)});return Wt(wo,{children:s.map(([c,l])=>Wt(bu,{name:c,value:l,selected:e===c,highlighted:o===c,onRemove:n,onHover:r},c))})}function Wa({bridgeUrl:t,modelRefreshKey:e,onMouseEnter:o,onMouseLeave:n,selectedComponent:r,hoveredComponent:i,onComponentHover:a,onSpacingTokenHover:s,onModifySpacingToken:c,onDeleteSpacingToken:l,onComponentAdded:d,onComponentRemoved:p}){let[u,f]=xn(void 0),[g,h]=xn(!0),[S,x]=xn(()=>{try{let B=localStorage.getItem(Ha);if(B==="tokens"||B==="components"||B==="rules")return B}catch(B){}return"components"});So(()=>{oo(t).then(B=>{f(B),h(!1)})},[t,e]),So(()=>{try{localStorage.setItem(Ha,S)}catch(B){}},[S]),So(()=>{r&&(x("components"),oo(t).then(B=>{B&&f(B)}))},[r,t]);let L=gr((B,V)=>{f(Q=>{if(!(Q!=null&&Q.tokens))return Q;let Mt=JSON.parse(JSON.stringify(Q.tokens)),dt=B.split("."),vt=Mt;for(let Dt=1;Dt<dt.length-1;Dt++)if(vt=vt[dt[Dt]],!vt)return Q;return delete vt[dt[dt.length-1]],b(m({},Q),{tokens:Mt})}),l==null||l(B,V)},[l]),R=gr(B=>{f(V=>{if(!(V!=null&&V.components))return V;let dt=V.components,{[B]:Q}=dt,Mt=Fn(dt,[jo(B)]);return b(m({},V),{components:Mt})}),p==null||p(B)},[p]),A=u==null?void 0:u.tokens,T=u==null?void 0:u.components,C=u==null?void 0:u.rules,Z=A&&Object.keys(A).length>0,Y=T&&Object.keys(T).length>0,q=C&&C.length>0,tt=!u||!Z&&!Y&&!q;return Qe("div",{style:au,onMouseEnter:o,onMouseLeave:n,children:[Qe("div",{style:{display:"flex",alignItems:"center",gap:6,fontWeight:700,fontSize:13,marginBottom:6},children:[Wt("span",{children:"Model"}),Wt("code",{style:{fontSize:10,fontWeight:500,backgroundColor:"rgba(0,0,0,0.06)",padding:"1px 4px",color:"#6b7280"},children:"M"})]}),Wt("div",{style:{display:"flex",gap:12,marginBottom:10,borderBottom:"1px solid rgba(0,0,0,0.08)",paddingBottom:6},children:["components","rules"].map(B=>Wt("button",{type:"button",style:S===B?lu:_a,onClick:()=>x(B),children:B.charAt(0).toUpperCase()+B.slice(1)},B))}),Wt("div",{style:{flex:1,overflowY:"auto",minHeight:0},children:g?Wt("div",{style:{color:"#9ca3af",fontSize:11},children:"Loading..."}):tt?Wt("div",{style:{color:"#9ca3af",lineHeight:1.5},children:"No design model yet. Pattern-scoped annotations will build one automatically."}):Qe(wo,{children:[S==="components"&&Wt(vu,{components:T,selectedComponent:r,hoveredComponent:i,onRemove:R,onHover:a}),S==="tokens"&&Wt(hu,{tokens:A,onSpacingTokenHover:s,onModifyToken:c,onDeleteToken:l?L:void 0}),S==="rules"&&Wt(yu,{rules:C})]})})]})}import{jsx as Ya}from"react/jsx-runtime";var Nn={iconDefault:"#1f2937",iconActive:"#1f2937",bgActive:"#f3f4f6",bgHover:"#f9fafb",separator:"#e5e7eb"};function Bn({children:t,active:e,siblingActive:o,disabled:n,onClick:r,title:i}){let a=()=>n?.4:o&&!e?.5:1,s={position:"relative",display:"flex",alignItems:"center",justifyContent:"center",width:32,height:32,borderRadius:0,border:"none",cursor:n?"default":"pointer",transition:"background-color 150ms ease, color 150ms ease, transform 100ms ease, opacity 150ms ease",backgroundColor:e?Nn.bgActive:"transparent",color:e?Nn.iconActive:Nn.iconDefault,opacity:a()};return Ya("button",{type:"button",onClick:n?void 0:r,title:i,disabled:n,style:s,onMouseEnter:c=>{n||(c.currentTarget.style.opacity="1",e||(c.currentTarget.style.backgroundColor=Nn.bgHover))},onMouseLeave:c=>{n||(c.currentTarget.style.opacity=String(a()),e||(c.currentTarget.style.backgroundColor="transparent"))},onMouseDown:c=>{n||(c.currentTarget.style.transform="scale(0.95)")},onMouseUp:c=>{n||(c.currentTarget.style.transform="scale(1)")},children:t})}function Ti(){return Ya("div",{style:{width:1,height:20,backgroundColor:"rgba(0, 0, 0, 0.05)",margin:"0 8px"}})}import{Fragment as qn,jsx as nt,jsxs as ve}from"react/jsx-runtime";var Qn=[{type:"rectangle",icon:Mu,label:"Rectangle",shortcut:"R"},{type:"circle",icon:Su,label:"Oval",shortcut:"O"},{type:"line",icon:Tu,label:"Line",shortcut:"L"},{type:"freehand",icon:Eu,label:"Pen",shortcut:"P"}],Ru=new Set(Qn.map(t=>t.type));function Au(t,e,o,n,r,i,a,s){let c=(t-r)*(n-i)-(o-r)*(e-i),l=(t-a)*(i-s)-(r-a)*(e-s),d=(t-o)*(s-n)-(a-o)*(e-n),p=c<0||l<0||d<0,u=c>0||l>0||d>0;return!(p&&u)}function Pu(){let t=window.innerWidth-16,e=t-326,o=window.innerHeight-80;return{left:e,right:t,y:o}}var Nu=[{type:"text",icon:Lu,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.
|
|
11
11
|
|
|
12
|
-
Your AI gets the visual and technical context it needs to act.`,usage:[],keys:[{key:"\u2318\u2318",desc:"Toggle toolbar"}]}},Qd=x(m({position:"fixed",bottom:16,right:16,zIndex:9999,display:"flex",alignItems:"center",backgroundColor:"#ffffff"},un),{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)"}),nr="devtools-toolbar-expanded",or="devtools-annotations",ir="devtools-style-modifications",rr="devtools-active-tool",ga="devtools-active-color",ma="devtools-stroke-width",ha="devtools-inspected-element",sr="devtools-spacing-changes",tu={expanded:nr,annotations:or,styleMods:ir,spacingChanges:sr,tool:rr,color:ga,stroke:ma,inspected:ha};function eu(){return it("svg",{width:"16",height:"16",viewBox:"0 0 1200 1200",fill:"currentColor",stroke:"none",children:it("path",{d:"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"})})}function nu(){return it("svg",{width:"16",height:"16",viewBox:"0 0 158.7128 157.296",fill:"currentColor",stroke:"none",children:it("path",{d:"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 ya({state:t,dispatch:e,onScreenshot:o,onSendToClaude:n,onPlanGoal:i,hasActiveJobs:r,activeJobColor:a,onCrosshairHover:s,onClear:l,provider:c="claude",onProviderChange:d,availableProviders:u,modelIndex:p=0,modelCount:f=2,modelLabel:g="Opus 4.6",onModelChange:b,onViewThread:C,isThreadPanelOpen:w,activePlan:L,mcpStatus:A,onInstallMcp:R,mcpJustInstalled:h,bridgeUrl:$,modelSelectedComponent:nt,modelCanvasHoveredComponent:Y,onModelComponentHover:K,onSpacingTokenHover:q,onModifySpacingToken:B,onDeleteSpacingToken:Q,modelRefreshKey:U,onModelComponentAdded:It,onModelComponentRemoved:ht}){let[St,Z]=ho(()=>typeof window=="undefined"?!1:localStorage.getItem(nr)==="true"),[st,wt]=ho(0),O=Be(0),xt=Be(0),vt=Be(t.isAnnotating),jt=Be(!1),Ot=Be(typeof window!="undefined"?localStorage.getItem(rr):null),yt=Be(typeof window!="undefined"?localStorage.getItem(ga):null),le=Be(typeof window!="undefined"?localStorage.getItem(ma):null),{charIndex:lt}=Wo(!!r),[Tt,ne]=ho(null),Yt=Be(!1),te=Be(null),fe=Be(null),G=Be({x:0,y:0}),mt=Be(null),at=Be(null),Pt=Be(null),Ht=rn(()=>{mt.current=null,at.current=null,Pt.current&&(clearTimeout(Pt.current),Pt.current=null)},[]),Nt=rn(V=>{fe.current&&(clearTimeout(fe.current),fe.current=null),Yt.current?(mt.current=V,at.current=m({},G.current),Pt.current&&clearTimeout(Pt.current),Pt.current=setTimeout(()=>{mt.current&&(ne(mt.current),Ht())},300)):(te.current&&clearTimeout(te.current),te.current=setTimeout(()=>{Yt.current=!0,ne(V),te.current=null},500))},[Ht]),Lt=rn(()=>{Ht(),te.current&&(clearTimeout(te.current),te.current=null),fe.current=setTimeout(()=>{Yt.current=!1,ne(null)},150)},[Ht]),ee=rn(V=>{if(G.current={x:V.clientX,y:V.clientY},mt.current&&at.current){let et=at.current,ft=Zd();Ud(V.clientX,V.clientY,et.x,et.y,ft.left,ft.y,ft.right,ft.y)||(ne(mt.current),Ht())}},[Ht]),Ft=er(()=>{let V=(u!=null?u:[]).map(et=>et==="claude"?"Claude":et==="codex"?"Codex":et);return{name:"AI Model",desc:V.length>1?`${V.join(" and ")} are available.`:V.length===1?`Connected to ${V[0]}.`:"No AI providers detected.",usage:V.length>1?["Click the logo to switch between providers","Click the model name to switch tiers"]:["Click the model name to switch tiers"],keys:V.length>1?[{key:"Click",desc:"Switch"},{key:"\u2318 Enter",desc:"Hand off to your AI",accent:!0}]:[{key:"\u2318 Enter",desc:"Hand off to your AI",accent:!0}]}},[u]);sa(St,t,jt,!!r,tu),gn(()=>{if(localStorage.getItem(nr)==="true"&&!t.isAnnotating){if(St||Z(!0),e({type:"SET_TOOL",payload:Ot.current||"inspector"}),e({type:"SET_ANNOTATING",payload:!0}),yt.current&&e({type:"SET_COLOR",payload:yt.current}),le.current){let T=parseFloat(le.current);isNaN(T)||e({type:"SET_STROKE_WIDTH",payload:T})}let et=localStorage.getItem(or);if(et)try{let T=JSON.parse(et);Array.isArray(T)&&T.length>0&&e({type:"RESTORE_ANNOTATIONS",payload:{annotations:T}})}catch(T){}let ft=localStorage.getItem(ir);if(ft)try{let T=JSON.parse(ft);Array.isArray(T)&&T.length>0&&(e({type:"RESTORE_STYLE_MODIFICATIONS",payload:T}),No(T))}catch(T){}let Mt=localStorage.getItem(sr);if(Mt)try{let T=JSON.parse(Mt);Array.isArray(T)&&T.length>0&&e({type:"RESTORE_SPACING_TOKEN_CHANGES",payload:T})}catch(T){}let y=localStorage.getItem(ha);if(y)try{let{selector:T,info:W}=JSON.parse(y);if(T){let rt=Je(T);if(rt){let kt=W||x(m({},Ve(rt)),{selector:T});e({type:"SELECT_ELEMENT",payload:{el:rt,info:kt}})}}}catch(T){}}return jt.current=!0,()=>{jt.current=!1}},[]);let we=Be(t.styleModifications);gn(()=>{let V=we.current,et=t.styleModifications;V!==et&&(Bo(V),No(et),we.current=et)},[t.styleModifications]),gn(()=>{let V=vt.current;vt.current=t.isAnnotating,V&&!t.isAnnotating&&St&&Z(!1)},[t.isAnnotating,St]);let se=Be(St);se.current=St,gn(()=>{let V=ft=>{if(ft.key==="Meta"||ft.key==="Control"){let Mt=Date.now();if(Mt-O.current<300){if(xt.current++,xt.current>=2){if(se.current)e({type:"SET_ANNOTATING",payload:!1}),Z(!1);else{let W=localStorage.getItem(rr);e({type:"SET_TOOL",payload:W||"inspector"}),e({type:"SET_ANNOTATING",payload:!0}),Z(!0)}xt.current=0}}else xt.current=1;O.current=Mt}else xt.current=0},et=ft=>{ft.key!=="Meta"&&ft.key!=="Control"&&(xt.current=0)};return window.addEventListener("keydown",V),window.addEventListener("keyup",et),()=>{window.removeEventListener("keydown",V),window.removeEventListener("keyup",et)}},[e]);let ge=rn(V=>{Ht(),e({type:"SET_TOOL",payload:V}),t.isAnnotating||e({type:"SET_ANNOTATING",payload:!0}),Yt.current=!1,ne(null),te.current&&(clearTimeout(te.current),te.current=null),fe.current&&(clearTimeout(fe.current),fe.current=null)},[e,t.isAnnotating,Ht]),Zt=rn(async()=>{window.focus(),await o()},[o]),De=rn(async()=>{let V=t.annotations.filter(Mt=>{var y;return((y=Mt.status)!=null?y:"pending")==="pending"}),et=t.styleModifications.filter(Mt=>!Mt.captured),ft=V.some(Mt=>Mt.type!=="text");if(i){let Mt=V.filter(T=>T.type==="text"&&T.text),y=Mt.find(T=>T.text.toLowerCase().startsWith("/plan "));if(y){let T=y.text.replace(/^\/plan\s+/i,""),W=Mt.filter(kt=>kt!==y&&kt.text).map(kt=>kt.text),rt=[T,...W].join(". ");await i(rt);return}}n&&await n()},[n,i,t.annotations,t.styleModifications,t.spacingTokenChanges]),de=rn(()=>{e({type:"SET_ANNOTATING",payload:!1}),Z(!1)},[e]),_e=rn(()=>{Bo(t.styleModifications),document.querySelectorAll("[data-pm]").forEach(V=>V.removeAttribute("data-pm")),e({type:"CLEAR"}),e({type:"CLEAR_ALL_STYLES"}),localStorage.removeItem(or),localStorage.removeItem(ir),localStorage.removeItem(sr),xe(null),l==null||l()},[e,t.styleModifications,l]),[me,Ze]=ho(29),Re=Be(null),We=Be(null),$e=Be(!1),ke=rn(V=>{let et=V.match(/oklch\([^)]*\s+([\d.]+)\s*\)/);return et&&et[1]?parseFloat(et[1]):null},[]);gn(()=>{$e.current=!0;let V=`oklch(0.628 0.258 ${me})`;e({type:"SET_COLOR",payload:V}),requestAnimationFrame(()=>{$e.current=!1})},[me,e]),gn(()=>{if($e.current)return;let V=ke(t.activeColor);V!==null&&Math.abs(V-me)>.5&&Ze(V)},[t.activeColor,ke,me]);let mn=t.annotations.length>0;gn(()=>{let V=We.current;if(!V||!mn)return;let et=ft=>{ft.preventDefault(),ft.stopPropagation();let Mt=ft.deltaY>0?-1:1,y=((me+Mt)%360+360)%360,T=`oklch(0.628 0.258 ${y})`;Ze(y),t.selectedAnnotationIds.length>0&&e({type:"UPDATE_ANNOTATION_COLOR",payload:{id:t.lastSelectedId||t.selectedAnnotationIds[0],color:T}})};return V.addEventListener("wheel",et,{passive:!1}),()=>V.removeEventListener("wheel",et)},[mn,t.selectedAnnotationIds,t.lastSelectedId,me,e]);let j=Be(!1),At=rn(()=>{j.current=!1,Re.current=setTimeout(()=>{j.current=!0,Ze(29)},500)},[]),Bt=rn(()=>{Re.current&&(clearTimeout(Re.current),Re.current=null)},[]);gn(()=>()=>{Re.current&&clearTimeout(Re.current),Pt.current&&clearTimeout(Pt.current)},[]);let qe=er(()=>$o(t.annotations),[t.annotations]),ue=er(()=>{let V=[],et=new Set;for(let ft of t.annotations)if(!qe.has(ft))if(ft.groupId){if(!et.has(ft.groupId)){et.add(ft.groupId);let Mt=t.annotations.filter(T=>T.groupId===ft.groupId&&!qe.has(T)),y=Mt.find(T=>T.type!=="text")||Mt[0];V.push({id:y.id,annotations:Mt})}}else V.push({id:ft.id,annotations:[ft]});return V},[t.annotations,qe]),[qt,xe]=ho(null),Ae=ue.length+t.styleModifications.length;gn(()=>{(Ae===0||qt!==null&&qt>=Ae)&&xe(null)},[Ae,qt]),gn(()=>{if(t.selectedAnnotationIds.length===0&&!t.inspectedElement){xe(null);return}if(t.selectedAnnotationIds.length>0){let V=t.selectedAnnotationIds[0],et=ue.findIndex(ft=>ft.id===V||ft.annotations.some(Mt=>Mt.id===V));et>=0&&et!==qt&&xe(et)}},[t.selectedAnnotationIds,t.inspectedElement,ue]);let Tn=rn(()=>{var et;if(Ae===0)return;let V;if(qt===null?V=0:V=(qt+1)%Ae,xe(V),V<ue.length){let ft=ue[V];if(!ft)return;e({type:"SELECT_ELEMENT",payload:null}),e({type:"SELECT_ANNOTATION",payload:{id:ft.id}});let Mt=ft.annotations.find(ct=>ct.type!=="text")||ft.annotations[0];if(ft.annotations.some(ct=>ct.linkedSelector))e({type:"SET_TOOL",payload:"inspector"});else if(Mt!=null&&Mt.type&&Mt.type!=="text"&&Mt.type!=="inspector"){e({type:"SET_TOOL",payload:Mt.type});let ct=zn.findIndex(_t=>_t.type===Mt.type);ct>=0&&wt(ct)}if(Mt!=null&&Mt.color){e({type:"SET_COLOR",payload:Mt.color});let ct=ke(Mt.color);ct!==null&&Ze(ct)}let T=ft.annotations.flatMap(ct=>ct.points);if(T.length===0)return;let W=Math.min(...T.map(ct=>ct.x)),rt=Math.max(...T.map(ct=>ct.x)),kt=Math.min(...T.map(ct=>ct.y)),Rt=Math.max(...T.map(ct=>ct.y)),ut=(W+rt)/2,zt=(kt+Rt)/2;if(window.scrollTo({left:ut-window.innerWidth/2,top:zt-window.innerHeight/2,behavior:"smooth"}),w&&C){let ct=(et=ft.annotations.find(_t=>_t.threadId))==null?void 0:et.threadId;ct&&C(ct)}}else{let ft=V-ue.length,Mt=t.styleModifications[ft];if(!Mt)return;let y=Je(Mt.selector);if(!y)return;e({type:"SELECT_ANNOTATION",payload:{id:null}}),e({type:"SET_TOOL",payload:"inspector"}),e({type:"SELECT_ELEMENT",payload:{el:y,info:Mt.element}});let T=y.getBoundingClientRect(),W=T.left+T.width/2+window.scrollX,rt=T.top+T.height/2+window.scrollY;window.scrollTo({left:W-window.innerWidth/2,top:rt-window.innerHeight/2,behavior:"smooth"})}},[ue,t.styleModifications,Ae,qt,e,ke,w,C]);gn(()=>{if(!St)return;let V=et=>{let ft=document.activeElement;if((ft==null?void 0:ft.tagName)==="INPUT"||(ft==null?void 0:ft.tagName)==="TEXTAREA")return;if((et.metaKey||et.ctrlKey)&&et.key==="Enter"){(n||i)&&(t.annotations.length>0||t.styleModifications.length>0||t.spacingTokenChanges.filter(T=>!T.captured).length>0)&&(et.preventDefault(),De());return}if((et.metaKey||et.ctrlKey)&&(et.key==="c"||et.key==="C"||et.code==="KeyC")){(t.annotations.length>0||t.styleModifications.length>0)&&(et.preventDefault(),window.focus(),Zt());return}if((et.metaKey||et.ctrlKey)&&(et.key==="Backspace"||et.key==="Delete")){et.preventDefault(),_e();return}if(et.metaKey||et.ctrlKey||et.altKey)return;let Mt={p:"freehand",l:"line",r:"rectangle",o:"circle",t:"text",c:"inspector",h:"hand"};if(et.key.toLowerCase()==="m"){et.preventDefault(),ge("model");return}let y=Mt[et.key.toLowerCase()];if(y){et.preventDefault();let T=zn.findIndex(W=>W.type===y);T>=0&&wt(T),ge(y)}};return window.addEventListener("keydown",V),()=>window.removeEventListener("keydown",V)},[St,ge,Zt,De,n,i,_e,t.annotations.length,t.styleModifications.length,t.spacingTokenChanges,Tt]);let oe=x(m({},Qd),{borderRadius:0,padding:St?"0 8px":"0",width:St?"auto":48,height:48,gap:0,justifyContent:St?"flex-start":"center"}),cn=r&&a?a:Cn.iconActive;return St?be(Hn,{children:[it("style",{children:`
|
|
12
|
+
Your AI gets the visual and technical context it needs to act.`,usage:[],keys:[{key:"\u2318\u2318",desc:"Toggle toolbar"}]}},Bu=b(m({position:"fixed",bottom:16,right:16,zIndex:9999,display:"flex",alignItems:"center",backgroundColor:"#ffffff"},hn),{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)"}),Ii="devtools-toolbar-expanded",Li="devtools-annotations",Ri="devtools-style-modifications",Ai="devtools-active-tool",Ga="devtools-active-color",Va="devtools-stroke-width",Xa="devtools-inspected-element",Pi="devtools-spacing-changes",Du={expanded:Ii,annotations:Li,styleMods:Ri,spacingChanges:Pi,tool:Ai,color:Ga,stroke:Va,inspected:Xa};function Fu(){return nt("svg",{width:"16",height:"16",viewBox:"0 0 1200 1200",fill:"currentColor",stroke:"none",children:nt("path",{d:"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"})})}function Ou(){return nt("svg",{width:"16",height:"16",viewBox:"0 0 158.7128 157.296",fill:"currentColor",stroke:"none",children:nt("path",{d:"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 Ja({state:t,dispatch:e,onScreenshot:o,onSendToClaude:n,onPlanGoal:r,hasActiveJobs:i,activeJobColor:a,onCrosshairHover:s,onClear:c,provider:l="claude",onProviderChange:d,availableProviders:p,modelIndex:u=0,modelCount:f=2,modelLabel:g="Opus 4.6",onModelChange:h,onViewThread:S,isThreadPanelOpen:x,activePlan:L,mcpStatus:R,onInstallMcp:A,mcpJustInstalled:T,bridgeUrl:C,modelSelectedComponent:Z,modelCanvasHoveredComponent:Y,onModelComponentHover:q,onSpacingTokenHover:tt,onModifySpacingToken:B,onDeleteSpacingToken:V,modelRefreshKey:Q,onModelComponentAdded:Mt,onModelComponentRemoved:dt}){let[vt,Dt]=Fo(()=>typeof window=="undefined"?!1:localStorage.getItem(Ii)==="true"),[Ht,Rt]=Fo(0),j=Ae(0),It=Ae(0),Pt=Ae(t.isAnnotating),Xt=Ae(!1),oe=Ae(typeof window!="undefined"?localStorage.getItem(Ai):null),ct=Ae(typeof window!="undefined"?localStorage.getItem(Ga):null),ge=Ae(typeof window!="undefined"?localStorage.getItem(Va):null),{charIndex:N}=ir(!!i),[rt,Ft]=Fo(null),ut=Ae(!1),jt=Ae(null),kt=Ae(null),z=Ae({x:0,y:0}),ot=Ae(null),it=Ae(null),yt=Ae(null),Nt=pn(()=>{ot.current=null,it.current=null,yt.current&&(clearTimeout(yt.current),yt.current=null)},[]),Ct=pn(G=>{kt.current&&(clearTimeout(kt.current),kt.current=null),ut.current?(ot.current=G,it.current=m({},z.current),yt.current&&clearTimeout(yt.current),yt.current=setTimeout(()=>{ot.current&&(Ft(ot.current),Nt())},300)):(jt.current&&clearTimeout(jt.current),jt.current=setTimeout(()=>{ut.current=!0,Ft(G),jt.current=null},500))},[Nt]),bt=pn(()=>{Nt(),jt.current&&(clearTimeout(jt.current),jt.current=null),kt.current=setTimeout(()=>{ut.current=!1,Ft(null)},150)},[Nt]),pe=pn(G=>{if(z.current={x:G.clientX,y:G.clientY},ot.current&&it.current){let et=it.current,ht=Pu();Au(G.clientX,G.clientY,et.x,et.y,ht.left,ht.y,ht.right,ht.y)||(Ft(ot.current),Nt())}},[Nt]),Gt=Mi(()=>{let G=(p!=null?p:[]).map(et=>et==="claude"?"Claude":et==="codex"?"Codex":et);return{name:"AI Model",desc:G.length>1?`${G.join(" and ")} are available.`:G.length===1?`Connected to ${G[0]}.`:"No AI providers detected.",usage:G.length>1?["Click the logo to switch between providers","Click the model name to switch tiers"]:["Click the model name to switch tiers"],keys:G.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}]}},[p]);Oa(vt,t,Xt,!!i,Du),vn(()=>{if(localStorage.getItem(Ii)==="true"&&!t.isAnnotating){if(vt||Dt(!0),e({type:"SET_TOOL",payload:oe.current||"inspector"}),e({type:"SET_ANNOTATING",payload:!0}),ct.current&&e({type:"SET_COLOR",payload:ct.current}),ge.current){let E=parseFloat(ge.current);isNaN(E)||e({type:"SET_STROKE_WIDTH",payload:E})}let et=localStorage.getItem(Li);if(et)try{let E=JSON.parse(et);Array.isArray(E)&&E.length>0&&e({type:"RESTORE_ANNOTATIONS",payload:{annotations:E}})}catch(E){}let ht=localStorage.getItem(Ri);if(ht)try{let E=JSON.parse(ht);Array.isArray(E)&&E.length>0&&(e({type:"RESTORE_STYLE_MODIFICATIONS",payload:E}),qo(E))}catch(E){}let St=localStorage.getItem(Pi);if(St)try{let E=JSON.parse(St);Array.isArray(E)&&E.length>0&&e({type:"RESTORE_SPACING_TOKEN_CHANGES",payload:E})}catch(E){}let y=localStorage.getItem(Xa);if(y)try{let{selector:E,info:W}=JSON.parse(y);if(E){let xt=Ve(E);if(xt){let lt=W||b(m({},Xe(xt)),{selector:E});e({type:"SELECT_ELEMENT",payload:{el:xt,info:lt}})}}}catch(E){}}return Xt.current=!0,()=>{Xt.current=!1}},[]);let ie=Ae(t.styleModifications);vn(()=>{let G=ie.current,et=t.styleModifications;G!==et&&(Qo(G),qo(et),ie.current=et)},[t.styleModifications]),vn(()=>{let G=Pt.current;Pt.current=t.isAnnotating,G&&!t.isAnnotating&&vt&&Dt(!1)},[t.isAnnotating,vt]);let Ie=Ae(vt);Ie.current=vt,vn(()=>{let G=ht=>{if(ht.key==="Meta"||ht.key==="Control"){let St=Date.now();if(St-j.current<300){if(It.current++,It.current>=2){if(Ie.current)e({type:"SET_ANNOTATING",payload:!1}),Dt(!1);else{let W=localStorage.getItem(Ai);e({type:"SET_TOOL",payload:W||"inspector"}),e({type:"SET_ANNOTATING",payload:!0}),Dt(!0)}It.current=0}}else It.current=1;j.current=St}else It.current=0},et=ht=>{ht.key!=="Meta"&&ht.key!=="Control"&&(It.current=0)};return window.addEventListener("keydown",G),window.addEventListener("keyup",et),()=>{window.removeEventListener("keydown",G),window.removeEventListener("keyup",et)}},[e]);let ee=pn(G=>{Nt(),e({type:"SET_TOOL",payload:G}),t.isAnnotating||e({type:"SET_ANNOTATING",payload:!0}),ut.current=!1,Ft(null),jt.current&&(clearTimeout(jt.current),jt.current=null),kt.current&&(clearTimeout(kt.current),kt.current=null)},[e,t.isAnnotating,Nt]),_e=pn(async()=>{window.focus(),await o()},[o]),Ut=pn(async()=>{let G=t.annotations.filter(St=>{var y;return((y=St.status)!=null?y:"pending")==="pending"}),et=t.styleModifications.filter(St=>!St.captured),ht=G.some(St=>St.type!=="text");if(r){let St=G.filter(E=>E.type==="text"&&E.text),y=St.find(E=>E.text.toLowerCase().startsWith("/plan "));if(y){let E=y.text.replace(/^\/plan\s+/i,""),W=St.filter(lt=>lt!==y&<.text).map(lt=>lt.text),xt=[E,...W].join(". ");await r(xt);return}}n&&await n()},[n,r,t.annotations,t.styleModifications,t.spacingTokenChanges]),me=pn(()=>{e({type:"SET_ANNOTATING",payload:!1}),Dt(!1)},[e]),je=pn(()=>{Qo(t.styleModifications),document.querySelectorAll("[data-pm]").forEach(G=>G.removeAttribute("data-pm")),e({type:"CLEAR"}),e({type:"CLEAR_ALL_STYLES"}),localStorage.removeItem(Li),localStorage.removeItem(Ri),localStorage.removeItem(Pi),te(null),c==null||c()},[e,t.styleModifications,c]),[he,Ke]=Fo(29),Ge=Ae(null),$e=Ae(null),en=Ae(!1),We=pn(G=>{let et=G.match(/oklch\([^)]*\s+([\d.]+)\s*\)/);return et&&et[1]?parseFloat(et[1]):null},[]);vn(()=>{en.current=!0;let G=`oklch(0.628 0.258 ${he})`;e({type:"SET_COLOR",payload:G}),requestAnimationFrame(()=>{en.current=!1})},[he,e]),vn(()=>{if(en.current)return;let G=We(t.activeColor);G!==null&&Math.abs(G-he)>.5&&Ke(G)},[t.activeColor,We,he]);let ke=t.annotations.length>0;vn(()=>{let G=$e.current;if(!G||!ke)return;let et=ht=>{ht.preventDefault(),ht.stopPropagation();let St=ht.deltaY>0?-1:1,y=((he+St)%360+360)%360,E=`oklch(0.628 0.258 ${y})`;Ke(y),t.selectedAnnotationIds.length>0&&e({type:"UPDATE_ANNOTATION_COLOR",payload:{id:t.lastSelectedId||t.selectedAnnotationIds[0],color:E}})};return G.addEventListener("wheel",et,{passive:!1}),()=>G.removeEventListener("wheel",et)},[ke,t.selectedAnnotationIds,t.lastSelectedId,he,e]);let K=Ae(!1),wt=pn(()=>{K.current=!1,Ge.current=setTimeout(()=>{K.current=!0,Ke(29)},500)},[]),qt=pn(()=>{Ge.current&&(clearTimeout(Ge.current),Ge.current=null)},[]);vn(()=>()=>{Ge.current&&clearTimeout(Ge.current),yt.current&&clearTimeout(yt.current)},[]);let ye=Mi(()=>rr(t.annotations),[t.annotations]),Ce=Mi(()=>{let G=[],et=new Set;for(let ht of t.annotations)if(!ye.has(ht))if(ht.groupId){if(!et.has(ht.groupId)){et.add(ht.groupId);let St=t.annotations.filter(E=>E.groupId===ht.groupId&&!ye.has(E)),y=St.find(E=>E.type!=="text")||St[0];G.push({id:y.id,annotations:St})}}else G.push({id:ht.id,annotations:[ht]});return G},[t.annotations,ye]),[de,te]=Fo(null),nn=Ce.length+t.styleModifications.length;vn(()=>{(nn===0||de!==null&&de>=nn)&&te(null)},[nn,de]),vn(()=>{if(t.selectedAnnotationIds.length===0&&!t.inspectedElement){te(null);return}if(t.selectedAnnotationIds.length>0){let G=t.selectedAnnotationIds[0],et=Ce.findIndex(ht=>ht.id===G||ht.annotations.some(St=>St.id===G));et>=0&&et!==de&&te(et)}},[t.selectedAnnotationIds,t.inspectedElement,Ce]);let on=pn(()=>{var et;if(nn===0)return;let G;if(de===null?G=0:G=(de+1)%nn,te(G),G<Ce.length){let ht=Ce[G];if(!ht)return;e({type:"SELECT_ELEMENT",payload:null}),e({type:"SELECT_ANNOTATION",payload:{id:ht.id}});let St=ht.annotations.find(mt=>mt.type!=="text")||ht.annotations[0];if(ht.annotations.some(mt=>mt.linkedSelector))e({type:"SET_TOOL",payload:"inspector"});else if(St!=null&&St.type&&St.type!=="text"&&St.type!=="inspector"){e({type:"SET_TOOL",payload:St.type});let mt=Qn.findIndex(Bt=>Bt.type===St.type);mt>=0&&Rt(mt)}if(St!=null&&St.color){e({type:"SET_COLOR",payload:St.color});let mt=We(St.color);mt!==null&&Ke(mt)}let E=ht.annotations.flatMap(mt=>mt.points);if(E.length===0)return;let W=Math.min(...E.map(mt=>mt.x)),xt=Math.max(...E.map(mt=>mt.x)),lt=Math.min(...E.map(mt=>mt.y)),Ot=Math.max(...E.map(mt=>mt.y)),st=(W+xt)/2,_t=(lt+Ot)/2;if(window.scrollTo({left:st-window.innerWidth/2,top:_t-window.innerHeight/2,behavior:"smooth"}),x&&S){let mt=(et=ht.annotations.find(Bt=>Bt.threadId))==null?void 0:et.threadId;mt&&S(mt)}}else{let ht=G-Ce.length,St=t.styleModifications[ht];if(!St)return;let y=Ve(St.selector);if(!y)return;e({type:"SELECT_ANNOTATION",payload:{id:null}}),e({type:"SET_TOOL",payload:"inspector"}),e({type:"SELECT_ELEMENT",payload:{el:y,info:St.element}});let E=y.getBoundingClientRect(),W=E.left+E.width/2+window.scrollX,xt=E.top+E.height/2+window.scrollY;window.scrollTo({left:W-window.innerWidth/2,top:xt-window.innerHeight/2,behavior:"smooth"})}},[Ce,t.styleModifications,nn,de,e,We,x,S]);vn(()=>{if(!vt)return;let G=et=>{let ht=document.activeElement;if((ht==null?void 0:ht.tagName)==="INPUT"||(ht==null?void 0:ht.tagName)==="TEXTAREA")return;if((et.metaKey||et.ctrlKey)&&et.key==="Enter"){(n||r)&&(t.annotations.length>0||t.styleModifications.length>0||t.spacingTokenChanges.filter(E=>!E.captured).length>0)&&(et.preventDefault(),Ut());return}if((et.metaKey||et.ctrlKey)&&(et.key==="c"||et.key==="C"||et.code==="KeyC")){(t.annotations.length>0||t.styleModifications.length>0)&&(et.preventDefault(),window.focus(),_e());return}if((et.metaKey||et.ctrlKey)&&(et.key==="Backspace"||et.key==="Delete")){et.preventDefault(),je();return}if(et.metaKey||et.ctrlKey||et.altKey)return;let St={p:"freehand",l:"line",r:"rectangle",o:"circle",t:"text",c:"inspector",h:"hand"};if(et.key.toLowerCase()==="m"){et.preventDefault(),ee("model");return}let y=St[et.key.toLowerCase()];if(y){et.preventDefault();let E=Qn.findIndex(W=>W.type===y);E>=0&&Rt(E),ee(y)}};return window.addEventListener("keydown",G),()=>window.removeEventListener("keydown",G)},[vt,ee,_e,Ut,n,r,je,t.annotations.length,t.styleModifications.length,t.spacingTokenChanges,rt]);let En=b(m({},Bu),{borderRadius:0,padding:vt?"0 8px":"0",width:vt?"auto":48,height:48,gap:0,justifyContent:vt?"flex-start":"center"}),ne=i&&a?a:Nn.iconActive;return vt?ve(qn,{children:[nt("style",{children:`
|
|
13
13
|
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
|
|
14
|
-
`}),
|
|
14
|
+
`}),nt("div",{id:"devtools-scrim",style:{position:"fixed",inset:0,backgroundColor:"rgba(0, 0, 0, 0.06)",zIndex:9997,pointerEvents:"none"}}),!x&&(rt==="model"||t.activeTool==="model")&&nt(Wa,{bridgeUrl:C,selectedComponent:Z,hoveredComponent:Y,onComponentHover:q,onSpacingTokenHover:tt,onModifySpacingToken:B,onDeleteSpacingToken:V,modelRefreshKey:Q,onComponentAdded:Mt,onComponentRemoved:dt,onMouseEnter:()=>{Nt(),kt.current&&(clearTimeout(kt.current),kt.current=null)},onMouseLeave:t.activeTool==="model"?void 0:bt}),rt&&rt!=="model"&&(rt==="provider"||ja[rt])&&(()=>{let G=rt==="provider"?Gt:ja[rt];return ve("div",{onMouseEnter:rt==="collapse"?()=>{Nt(),kt.current&&(clearTimeout(kt.current),kt.current=null)}:void 0,onMouseLeave:rt==="collapse"?bt:void 0,style:m(b(m({position:"fixed",bottom:80,right:16,width:300,backgroundColor:"#ffffff"},hn),{boxSizing:"content-box",zIndex:10001,fontFamily:"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",fontSize:12,color:"#1f2937",padding:12}),rt!=="collapse"?{pointerEvents:"none"}:{}),children:[rt==="collapse"&&nt("div",{style:{marginBottom:10},children:nt("svg",{width:"48",height:"48",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:nt("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"})})}),ve("div",{style:{display:"flex",alignItems:"center",gap:6,fontWeight:700,fontSize:13,marginBottom:6},children:[nt("span",{children:G.name}),G.keys[0]&&nt("code",{style:{fontSize:10,fontWeight:500,backgroundColor:"rgba(0,0,0,0.06)",padding:"1px 4px",color:"#6b7280"},children:G.keys[0].key})]}),nt("div",{style:{color:"#6b7280",lineHeight:1.5,marginBottom:rt==="collapse"?0:10},children:G.desc.split(`
|
|
15
15
|
|
|
16
|
-
`).map((et,ft)=>it("p",{style:{margin:0,marginTop:ft>0?8:0},children:et},ft))}),V.usage.map((et,ft)=>be("div",{style:{display:"flex",gap:6,marginBottom:3,lineHeight:1.4},children:[it("span",{style:{color:"#9ca3af",flexShrink:0},children:"\u2013"}),it("span",{children:et})]},ft)),Tt==="collapse"&&A&&Object.keys(A).length>0&&(()=>{let et=Object.entries(A).filter(([,y])=>y.found&&!y.disabled).map(([y])=>y.charAt(0).toUpperCase()+y.slice(1)),ft=Object.entries(A).filter(([,y])=>!y.found).map(([y])=>y);if(et.length===0&&ft.length===0)return null;let Mt=ft.map(y=>y.charAt(0).toUpperCase()+y.slice(1));return be("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",marginTop:10,paddingTop:8,display:"flex",alignItems:"center",gap:6,fontSize:11},children:[it("span",{style:{width:6,height:6,borderRadius:"50%",backgroundColor:et.length>0?"#22c55e":"rgba(0,0,0,0.2)",flexShrink:0}}),et.length>0?be("span",{style:{color:"#6b7280",display:"flex",alignItems:"center",gap:6},children:[be("span",{children:["Taste library ready in ",et.join(", "),h&&" \u2014 restart CLI to activate"]}),ft.length>0&&R&&!h&&be("button",{type:"button",onClick:y=>{y.stopPropagation(),R()},style:{border:"none",background:"transparent",color:"#3b82f6",fontSize:10,fontWeight:500,fontFamily:"inherit",padding:0,cursor:"pointer",pointerEvents:"auto",textDecoration:"underline",textUnderlineOffset:2},children:["+ ",Mt.join(", ")]})]}):ft.length>0&&R?be("span",{style:{color:"#6b7280",display:"flex",alignItems:"center",gap:6},children:[it("span",{children:"Connect Popmelt MCP"}),it("button",{type:"button",onClick:y=>{y.stopPropagation(),R()},style:{border:"none",background:"#1f2937",color:"#fff",fontSize:10,fontWeight:600,fontFamily:"inherit",padding:"2px 8px",cursor:"pointer",pointerEvents:"auto"},children:"Connect"})]}):null]})})(),V.keys.length>1&&it("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",marginTop:8,paddingTop:8,display:"flex",flexDirection:"column",gap:4},children:V.keys.slice(1).map((et,ft)=>be("div",{style:{display:"flex",alignItems:"center",gap:8,fontSize:11,color:et.accent?"#fff":"#6b7280"},children:[it("code",{style:{fontSize:10,backgroundColor:et.accent?t.activeColor:"rgba(0,0,0,0.06)",color:et.accent?"#fff":void 0,padding:"1px 4px",whiteSpace:"nowrap"},children:et.key}),it("span",{style:{color:et.accent?t.activeColor:void 0,fontWeight:et.accent?600:void 0},children:et.desc})]},ft))})]})})(),be("div",{id:"devtools-toolbar",style:oe,onMouseMove:ee,children:[(t.annotations.length>0||t.styleModifications.length>0)&&be(Hn,{children:[it("span",{onMouseEnter:()=>Nt("clear"),onMouseLeave:Lt,children:it(En,{onClick:_e,title:"Clear all (\u2318\u232B)",children:it(Jd,{size:17,strokeWidth:1.5})})}),it(tr,{})]}),be("div",{style:{display:"flex",flexDirection:"row",gap:4,alignItems:"center"},children:[it("span",{onMouseEnter:()=>Nt("inspector"),onMouseLeave:Lt,children:it(En,{active:t.isAnnotating&&t.activeTool==="inspector",siblingActive:t.isAnnotating,onClick:()=>ge("inspector"),children:it(Yd,{size:20,strokeWidth:1.5})})}),it("span",{onMouseEnter:()=>Nt("hand"),onMouseLeave:Lt,children:it(En,{active:t.isAnnotating&&t.activeTool==="hand",siblingActive:t.isAnnotating,onClick:()=>ge("hand"),children:be("div",{style:{position:"relative",display:"flex",alignItems:"center",justifyContent:"center"},children:[it(Wd,{size:20,strokeWidth:1.5}),t.styleModifications.filter(V=>!V.captured).length>0&&it("div",{style:{position:"absolute",top:-7,right:-9,minWidth:14,height:14,borderRadius:0,backgroundColor:t.activeColor,color:"#fff",fontSize:9,fontWeight:700,display:"flex",alignItems:"center",justifyContent:"center",padding:"0 2px",lineHeight:1},children:t.styleModifications.filter(V=>!V.captured).length})]})})}),(()=>{let V=zn[st],et=V.icon,ft=t.isAnnotating&&Kd.has(t.activeTool);return it("span",{onMouseEnter:()=>Nt(V.type),onMouseLeave:Lt,children:be("div",{style:{display:"flex",alignItems:"center",gap:0},children:[it(En,{active:ft,siblingActive:t.isAnnotating,onClick:()=>ge(V.type),children:it(et,{size:20,strokeWidth:1.5})}),it("button",{type:"button",onClick:()=>{let Mt=(st+1)%zn.length;wt(Mt),ge(zn[Mt].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:t.isAnnotating&&!ft?.5:1,transition:"opacity 150ms ease"},children:zn.map((Mt,y)=>it("div",{style:{width:3,height:3,borderRadius:"50%",backgroundColor:y===st?Cn.iconDefault:"rgba(0,0,0,0.2)",transition:"background-color 150ms ease"}},y))})]})})})(),qd.map(({type:V,icon:et,label:ft,shortcut:Mt})=>it("span",{onMouseEnter:()=>Nt(V),onMouseLeave:Lt,children:it(En,{active:t.isAnnotating&&t.activeTool===V,siblingActive:t.isAnnotating,onClick:()=>ge(V),children:it(et,{size:20,strokeWidth:1.5})})},V)),it("span",{onMouseEnter:()=>Nt("model"),onMouseLeave:Lt,children:it(En,{active:t.isAnnotating&&t.activeTool==="model",siblingActive:t.isAnnotating,onClick:()=>ge("model"),children:it($d,{size:17,strokeWidth:1.5})})})]}),it(tr,{}),be("div",{style:{display:"flex",flexDirection:"row",gap:4,alignItems:"center"},children:[(ue.length>0||t.styleModifications.length>0||t.spacingTokenChanges.filter(V=>!V.captured).length>0)&&(()=>{var y;let V=qt!==null&&qt<ue.length?ue[qt]:null,et=t.annotations.length>0&&t.annotations.every(T=>T.status&&T.status!=="pending"),ft=qt!==null?(y=V==null?void 0:V.annotations.some(T=>T.status&&T.status!=="pending"))!=null?y:!1:et,Mt=`oklch(0.628 0.258 ${me})`;return it("span",{onMouseEnter:()=>Nt("counter"),onMouseLeave:Lt,children:it("button",{ref:We,type:"button",onClick:()=>{if(j.current){j.current=!1;return}Tn()},onMouseDown:At,onMouseUp:Bt,onMouseLeave:Bt,title:"Cycle through annotations \u2022 Scroll to change color \u2022 Long press to reset",style:{display:"flex",alignItems:"center",justifyContent:"center",width:20,height:20,padding:0,marginRight:4,border:"none",borderRadius:0,background:ft?"#999999":Mt,cursor:"pointer",fontFamily:"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",fontSize:11,fontWeight:600,color:"#ffffff",transition:"background 150ms ease"},children:qt!==null?qt+1:ue.length+t.styleModifications.length+t.spacingTokenChanges.filter(T=>!T.captured).length})})})(),d&&it("span",{onMouseEnter:()=>Nt("provider"),onMouseLeave:Lt,style:{display:"contents"},children:be("div",{style:{display:"flex",alignItems:"center",gap:0},children:[it(En,{onClick:()=>d(c==="claude"?"codex":"claude"),children:c==="claude"?it(eu,{}):it(nu,{})}),be("button",{type:"button",onClick:()=>{let V=(p+1)%f;b==null||b(V)},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:Cn.iconDefault,whiteSpace:"nowrap"},children:[it("span",{children:g}),it("span",{style:{display:"flex",flexDirection:"column",gap:2},children:Array.from({length:f},(V,et)=>it("div",{style:{width:3,height:3,borderRadius:"50%",backgroundColor:et===p?Cn.iconDefault:"rgba(0,0,0,0.2)",transition:"background-color 150ms ease"}},et))})]})]})}),it("div",{onMouseEnter:V=>{s==null||s(!0),V.currentTarget.style.opacity="1",Nt("collapse")},onMouseLeave:V=>{s==null||s(!1),V.currentTarget.style.opacity=r?"1":"0.3",Lt()},style:{display:"inline-flex",opacity:r?1:.3,transition:"opacity 150ms ease"},children:it(En,{onClick:de,title:"Collapse (\u2318\u2318)",children:r?it("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:cn,children:lt===1?be(Hn,{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"})]}):be(Hn,{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"})]})}):be("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:cn,strokeWidth:"1.5",strokeLinecap:"round",style:{transform:"rotate(45deg)"},children:[it("line",{x1:"12",y1:"3",x2:"12",y2:"9"}),it("line",{x1:"12",y1:"15",x2:"12",y2:"21"}),it("line",{x1:"3",y1:"12",x2:"9",y2:"12"}),it("line",{x1:"15",y1:"12",x2:"21",y2:"12"})]})})})]})]})]}):be(Hn,{children:[it("style",{children:"@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }"}),it("div",{id:"devtools-toolbar",style:x(m({},oe),{overflow:"visible",opacity:.5,transition:"opacity 150ms ease"}),onMouseEnter:V=>V.currentTarget.style.opacity="1",onMouseLeave:V=>V.currentTarget.style.opacity="0.5",children:it("button",{type:"button",style:{display:"flex",alignItems:"center",justifyContent:"center",width:48,height:48,border:"none",background:"none",cursor:"pointer",padding:0},onClick:()=>{Z(!0),e({type:"SET_TOOL",payload:"inspector"}),e({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:r?it("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:cn,children:lt===1?be(Hn,{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"})]}):be(Hn,{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"})]})}):be("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:cn,strokeWidth:"1.5",strokeLinecap:"round",children:[it("line",{x1:"12",y1:"3",x2:"12",y2:"9"}),it("line",{x1:"12",y1:"15",x2:"12",y2:"21"}),it("line",{x1:"3",y1:"12",x2:"9",y2:"12"}),it("line",{x1:"15",y1:"12",x2:"21",y2:"12"})]})})})]})}import{useCallback as ar,useEffect as yo,useRef as lr,useState as Uo}from"react";import{Fragment as ba,jsx as Oe,jsxs as cr}from"react/jsx-runtime";var ou={position:"fixed",bottom:70,right:16,zIndex:9999,display:"flex",flexDirection:"column",gap:10},iu=x(m({display:"flex",alignItems:"center",gap:6,padding:"4px 10px",backgroundColor:"rgba(255, 255, 255, 0.85)"},un),{backdropFilter:"blur(32px)",fontFamily:"ui-monospace, SFMono-Regular, Menlo, monospace",fontSize:11,color:"#1f2937",whiteSpace:"nowrap",transition:"transform 200ms ease, opacity 200ms ease"});function ru(t){var a;let e=t.filter(s=>s.type==="tool_use");if(e.length===0)return"Starting\u2026";let o=e[e.length-1],n=String(o.data.tool||""),i=o.data.file?String(o.data.file):null,r=i?(a=i.split("/").pop())!=null?a:i:null;switch(n){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";default:return n?`Using ${n}`:"Working\u2026"}}function su(t,e){if(t.some(i=>i.type==="question"&&i.data.jobId===e))return"Has a question";let n=t.find(i=>i.type==="done"&&i.data.jobId===e);if(n){let i=n.data.resolutions;if(Array.isArray(i)&&i.length>0)return"Applied changes"}return"Replied"}function au({color:t}){let[e,o]=Uo(0);return yo(()=>{let n=setInterval(()=>{o(i=>(i+1)%2)},250);return()=>clearInterval(n)},[]),Oe("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:t,style:{verticalAlign:"middle",flexShrink:0},children:e===1?cr(ba,{children:[Oe("circle",{cx:"7",cy:"7",r:"2"}),Oe("circle",{cx:"17",cy:"7",r:"2"}),Oe("circle",{cx:"7",cy:"17",r:"2"}),Oe("circle",{cx:"17",cy:"17",r:"2"})]}):cr(ba,{children:[Oe("circle",{cx:"12",cy:"6",r:"2"}),Oe("circle",{cx:"6",cy:"12",r:"2"}),Oe("circle",{cx:"18",cy:"12",r:"2"}),Oe("circle",{cx:"12",cy:"18",r:"2"})]})})}function lu({color:t}){return Oe("span",{style:{display:"inline-block",width:8,height:8,backgroundColor:t,opacity:.6}})}function cu({color:t}){return Oe("span",{style:{color:t,fontSize:12,lineHeight:1,width:10,display:"inline-block"},children:"\u2713"})}function du(){return Oe("span",{style:{display:"inline-block",width:8,height:8,borderRadius:"50%",backgroundColor:"#ef4444"}})}function uu({onDismiss:t,children:e}){let o=lr(null),n=lr(null),[i,r]=Uo(0),[a,s]=Uo(!1),l=60,c=ar(p=>{var f;n.current={startX:p.clientX,startY:p.clientY,locked:!1},(f=o.current)==null||f.setPointerCapture(p.pointerId)},[]),d=ar(p=>{let f=n.current;if(!f)return;let g=p.clientX-f.startX,b=p.clientY-f.startY;if(!f.locked){if(Math.abs(g)<4&&Math.abs(b)<4)return;if(f.locked=!0,Math.abs(b)>Math.abs(g)){n.current=null;return}}r(Math.max(0,g))},[]),u=ar(()=>{n.current&&(n.current=null,i>=l?(s(!0),setTimeout(t,200)):r(0))},[i,t]);return Oe("div",{ref:o,onPointerDown:c,onPointerMove:d,onPointerUp:u,onPointerCancel:u,style:{transform:a?"translateX(120%)":`translateX(${i}px)`,opacity:a?0:1-i/(l*3),transition:n.current?"none":"transform 200ms ease, opacity 200ms ease",touchAction:"pan-y"},children:e})}function xa({bridge:t,inFlightJobs:e,isVisible:o,onHover:n,clearSignal:i}){let[r,a]=Uo([]);yo(()=>{i>0&&a([])},[i]),yo(()=>{a(l=>{let c=new Set(l.map(u=>u.jobId)),d=[...l];for(let[u,p]of Object.entries(e))c.has(u)||d.push({jobId:u,color:p.color,status:"queued"});for(let u of t.activeJobIds)!c.has(u)&&!e[u]&&d.push({jobId:u,color:"#888",status:"working"});return d.length!==l.length?d:l})},[e,t.activeJobIds]),yo(()=>{if(t.activeJobIds.length===0)return;let l=new Set(t.activeJobIds);a(c=>c.map(d=>l.has(d.jobId)&&d.status!=="done"&&d.status!=="error"?x(m({},d),{status:"working"}):d))},[t.activeJobIds]);let s=lr(null);return yo(()=>{let l=t.lastCompletedJobId;if(!l||l===s.current)return;s.current=l;let c=t.events.some(u=>u.type==="error"&&(u.data.jobId===l||t.status==="error")),d=c?void 0:su(t.events,l);a(u=>u.map(p=>p.jobId===l?x(m({},p),{status:c?"error":"done",doneLabel:d}):p))},[t.lastCompletedJobId,t.events,t.status]),!o||r.length===0?null:Oe("div",{style:ou,"data-devtools":!0,onMouseEnter:()=>n(!0),onMouseLeave:()=>n(!1),children:r.map(l=>{let c=l.status==="working"?ru(t.events.filter(d=>d.data.jobId===l.jobId)):l.status==="queued"?"Queued":l.status==="done"?l.doneLabel||"Done":"Error";return Oe(uu,{onDismiss:()=>a(d=>d.filter(u=>u.jobId!==l.jobId)),children:cr("div",{style:iu,children:[l.status==="working"&&Oe(au,{color:l.color}),l.status==="queued"&&Oe(lu,{color:l.color}),l.status==="done"&&Oe(cu,{color:l.color}),l.status==="error"&&Oe(du,{}),Oe("span",{style:{color:l.status==="queued"?"#9ca3af":"#1f2937"},children:c})]})},l.jobId)})})}import{useCallback as qo,useEffect as xo,useRef as ur,useState as to}from"react";import{Fragment as hu,jsx as Se}from"react/jsx-runtime";var va="ui-monospace, SFMono-Regular, Menlo, monospace",pu=/^#[0-9a-fA-F]{3,8}$/,fu=/^(?:rgba?|hsla?|oklch)\([^)]+\)$/,gu=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 mu(t){let e=t.trim();return pu.test(e)||fu.test(e)||gu.has(e.toLowerCase())}function dr(t,e){return Se("span",{style:{display:"inline-block",width:10,height:10,backgroundColor:t,border:"1px solid rgba(0,0,0,0.15)",borderRadius:2,verticalAlign:"middle",marginRight:3}},e)}function bo(t){let e=[],o=/(`[^`]+`)|(\*\*\*(.+?)\*\*\*)|(\*\*(.+?)\*\*)|(\*(.+?)\*)|(_([^_]+?)_)|(\[([^\]]+)\]\(([^)]+)\))|(#[0-9a-fA-F]{3,8})(?![0-9a-fA-F])|((?:rgba?|hsla?|oklch)\([^)]+\))/g,n=0,i;for(;(i=o.exec(t))!==null;){if(i.index>n&&e.push(t.slice(n,i.index)),i[1]){let r=i[1].slice(1,-1);mu(r)&&e.push(dr(r,`sw-${i.index}`)),e.push(Se("code",{style:{fontFamily:va,fontSize:"0.9em",backgroundColor:"rgba(0,0,0,0.06)",padding:"1px 4px",borderRadius:2},children:r},i.index))}else i[3]!==void 0?e.push(Se("strong",{children:Se("em",{children:i[3]})},i.index)):i[5]!==void 0?e.push(Se("strong",{children:i[5]},i.index)):i[7]!==void 0?e.push(Se("em",{children:i[7]},i.index)):i[9]!==void 0?e.push(Se("em",{children:i[9]},i.index)):i[11]!==void 0&&i[12]!==void 0?e.push(Se("a",{href:i[12],target:"_blank",rel:"noopener noreferrer",style:{color:"inherit",textDecoration:"underline"},children:i[11]},i.index)):i[13]!==void 0?(e.push(dr(i[13],`sw-${i.index}`)),e.push(i[13])):i[14]!==void 0&&(e.push(dr(i[14],`sw-${i.index}`)),e.push(i[14]));n=i.index+i[0].length}return n<t.length&&e.push(t.slice(n)),e}function Zo(t){var i;let e=t.split(`
|
|
17
|
-
`),o=[],n=0;for(;n<e.length;){let
|
|
18
|
-
`)},o.length));continue}if(/^(-{3,}|\*{3,}|_{3,})\s*$/.test(
|
|
16
|
+
`).map((et,ht)=>nt("p",{style:{margin:0,marginTop:ht>0?8:0},children:et},ht))}),G.usage.map((et,ht)=>ve("div",{style:{display:"flex",gap:6,marginBottom:3,lineHeight:1.4},children:[nt("span",{style:{color:"#9ca3af",flexShrink:0},children:"\u2013"}),nt("span",{children:et})]},ht)),rt==="collapse"&&R&&Object.keys(R).length>0&&(()=>{let et=Object.entries(R).filter(([,y])=>y.found&&!y.disabled).map(([y])=>y.charAt(0).toUpperCase()+y.slice(1)),ht=Object.entries(R).filter(([,y])=>!y.found).map(([y])=>y);if(et.length===0&&ht.length===0)return null;let St=ht.map(y=>y.charAt(0).toUpperCase()+y.slice(1));return ve("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",marginTop:10,paddingTop:8,display:"flex",alignItems:"center",gap:6,fontSize:11},children:[nt("span",{style:{width:6,height:6,borderRadius:"50%",backgroundColor:et.length>0?"#22c55e":"rgba(0,0,0,0.2)",flexShrink:0}}),et.length>0?ve("span",{style:{color:"#6b7280",display:"flex",alignItems:"center",gap:6},children:[ve("span",{children:["Taste library ready in ",et.join(", "),T&&" \u2014 restart CLI to activate"]}),ht.length>0&&A&&!T&&ve("button",{type:"button",onClick:y=>{y.stopPropagation(),A()},style:{border:"none",background:"transparent",color:"#3b82f6",fontSize:10,fontWeight:500,fontFamily:"inherit",padding:0,cursor:"pointer",pointerEvents:"auto",textDecoration:"underline",textUnderlineOffset:2},children:["+ ",St.join(", ")]})]}):ht.length>0&&A?ve("span",{style:{color:"#6b7280",display:"flex",alignItems:"center",gap:6},children:[nt("span",{children:"Connect Popmelt MCP"}),nt("button",{type:"button",onClick:y=>{y.stopPropagation(),A()},style:{border:"none",background:"#1f2937",color:"#fff",fontSize:10,fontWeight:600,fontFamily:"inherit",padding:"2px 8px",cursor:"pointer",pointerEvents:"auto"},children:"Connect"})]}):null]})})(),G.keys.length>1&&nt("div",{style:{borderTop:"1px solid rgba(0,0,0,0.08)",marginTop:8,paddingTop:8,display:"flex",flexDirection:"column",gap:4},children:G.keys.slice(1).map((et,ht)=>ve("div",{style:{display:"flex",alignItems:"center",gap:8,fontSize:11,color:et.accent?"#fff":"#6b7280"},children:[nt("code",{style:{fontSize:10,backgroundColor:et.accent?t.activeColor:"rgba(0,0,0,0.06)",color:et.accent?"#fff":void 0,padding:"1px 4px",whiteSpace:"nowrap"},children:et.key}),nt("span",{style:{color:et.accent?t.activeColor:void 0,fontWeight:et.accent?600:void 0},children:et.desc})]},ht))})]})})(),ve("div",{id:"devtools-toolbar",style:En,onMouseMove:pe,children:[(t.annotations.length>0||t.styleModifications.length>0)&&ve(qn,{children:[nt("span",{onMouseEnter:()=>Ct("clear"),onMouseLeave:bt,children:nt(Bn,{onClick:je,title:"Clear all (\u2318\u232B)",children:nt(Iu,{size:17,strokeWidth:1.5})})}),nt(Ti,{})]}),ve("div",{style:{display:"flex",flexDirection:"row",gap:4,alignItems:"center"},children:[nt("span",{onMouseEnter:()=>Ct("inspector"),onMouseLeave:bt,children:nt(Bn,{active:t.isAnnotating&&t.activeTool==="inspector",siblingActive:t.isAnnotating,onClick:()=>ee("inspector"),children:nt(Cu,{size:20,strokeWidth:1.5})})}),nt("span",{onMouseEnter:()=>Ct("hand"),onMouseLeave:bt,children:nt(Bn,{active:t.isAnnotating&&t.activeTool==="hand",siblingActive:t.isAnnotating,onClick:()=>ee("hand"),children:ve("div",{style:{position:"relative",display:"flex",alignItems:"center",justifyContent:"center"},children:[nt(ku,{size:20,strokeWidth:1.5}),t.styleModifications.filter(G=>!G.captured).length>0&&nt("div",{style:{position:"absolute",top:-7,right:-9,minWidth:14,height:14,borderRadius:0,backgroundColor:t.activeColor,color:"#fff",fontSize:9,fontWeight:700,display:"flex",alignItems:"center",justifyContent:"center",padding:"0 2px",lineHeight:1},children:t.styleModifications.filter(G=>!G.captured).length})]})})}),(()=>{let G=Qn[Ht],et=G.icon,ht=t.isAnnotating&&Ru.has(t.activeTool);return nt("span",{onMouseEnter:()=>Ct(G.type),onMouseLeave:bt,children:ve("div",{style:{display:"flex",alignItems:"center",gap:0},children:[nt(Bn,{active:ht,siblingActive:t.isAnnotating,onClick:()=>ee(G.type),children:nt(et,{size:20,strokeWidth:1.5})}),nt("button",{type:"button",onClick:()=>{let St=(Ht+1)%Qn.length;Rt(St),ee(Qn[St].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:t.isAnnotating&&!ht?.5:1,transition:"opacity 150ms ease"},children:Qn.map((St,y)=>nt("div",{style:{width:3,height:3,borderRadius:"50%",backgroundColor:y===Ht?Nn.iconDefault:"rgba(0,0,0,0.2)",transition:"background-color 150ms ease"}},y))})]})})})(),Nu.map(({type:G,icon:et,label:ht,shortcut:St})=>nt("span",{onMouseEnter:()=>Ct(G),onMouseLeave:bt,children:nt(Bn,{active:t.isAnnotating&&t.activeTool===G,siblingActive:t.isAnnotating,onClick:()=>ee(G),children:nt(et,{size:20,strokeWidth:1.5})})},G)),nt("span",{onMouseEnter:()=>Ct("model"),onMouseLeave:bt,children:nt(Bn,{active:t.isAnnotating&&t.activeTool==="model",siblingActive:t.isAnnotating,onClick:()=>ee("model"),children:nt(wu,{size:17,strokeWidth:1.5})})})]}),nt(Ti,{}),ve("div",{style:{display:"flex",flexDirection:"row",gap:4,alignItems:"center"},children:[(Ce.length>0||t.styleModifications.length>0||t.spacingTokenChanges.filter(G=>!G.captured).length>0)&&(()=>{var y;let G=de!==null&&de<Ce.length?Ce[de]:null,et=t.annotations.length>0&&t.annotations.every(E=>E.status&&E.status!=="pending"),ht=de!==null?(y=G==null?void 0:G.annotations.some(E=>E.status&&E.status!=="pending"))!=null?y:!1:et,St=`oklch(0.628 0.258 ${he})`;return nt("span",{onMouseEnter:()=>Ct("counter"),onMouseLeave:bt,children:nt("button",{ref:$e,type:"button",onClick:()=>{if(K.current){K.current=!1;return}on()},onMouseDown:wt,onMouseUp:qt,onMouseLeave:qt,title:"Cycle through annotations \u2022 Scroll to change color \u2022 Long press to reset",style:{display:"flex",alignItems:"center",justifyContent:"center",width:20,height:20,padding:0,marginRight:4,border:"none",borderRadius:0,background:ht?"#999999":St,cursor:"pointer",fontFamily:"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",fontSize:11,fontWeight:600,color:"#ffffff",transition:"background 150ms ease"},children:de!==null?de+1:Ce.length+t.styleModifications.length+t.spacingTokenChanges.filter(E=>!E.captured).length})})})(),d&&nt("span",{onMouseEnter:()=>Ct("provider"),onMouseLeave:bt,style:{display:"contents"},children:ve("div",{style:{display:"flex",alignItems:"center",gap:0},children:[nt(Bn,{onClick:()=>d(l==="claude"?"codex":"claude"),children:l==="claude"?nt(Fu,{}):nt(Ou,{})}),ve("button",{type:"button",onClick:()=>{let G=(u+1)%f;h==null||h(G)},style:{display:"flex",alignItems:"center",gap:6,height:32,border:"none",background:"none",cursor:"pointer",padding:"0 4px 0 0",fontFamily:"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",fontSize:10,fontWeight:500,color:Nn.iconDefault,whiteSpace:"nowrap"},children:[nt("span",{children:g}),nt("span",{style:{display:"flex",flexDirection:"column",gap:2},children:Array.from({length:f},(G,et)=>nt("div",{style:{width:3,height:3,borderRadius:"50%",backgroundColor:et===u?Nn.iconDefault:"rgba(0,0,0,0.2)",transition:"background-color 150ms ease"}},et))})]})]})}),nt("div",{onMouseEnter:G=>{s==null||s(!0),G.currentTarget.style.opacity="1",Ct("collapse")},onMouseLeave:G=>{s==null||s(!1),G.currentTarget.style.opacity=i?"1":"0.3",bt()},style:{display:"inline-flex",opacity:i?1:.3,transition:"opacity 150ms ease"},children:nt(Bn,{onClick:me,title:"Collapse (\u2318\u2318)",children:i?nt("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:ne,children:N===1?ve(qn,{children:[nt("circle",{cx:"7",cy:"7",r:"2"}),nt("circle",{cx:"17",cy:"7",r:"2"}),nt("circle",{cx:"7",cy:"17",r:"2"}),nt("circle",{cx:"17",cy:"17",r:"2"})]}):ve(qn,{children:[nt("circle",{cx:"12",cy:"6",r:"2"}),nt("circle",{cx:"6",cy:"12",r:"2"}),nt("circle",{cx:"18",cy:"12",r:"2"}),nt("circle",{cx:"12",cy:"18",r:"2"})]})}):ve("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:ne,strokeWidth:"1.5",strokeLinecap:"round",style:{transform:"rotate(45deg)"},children:[nt("line",{x1:"12",y1:"3",x2:"12",y2:"9"}),nt("line",{x1:"12",y1:"15",x2:"12",y2:"21"}),nt("line",{x1:"3",y1:"12",x2:"9",y2:"12"}),nt("line",{x1:"15",y1:"12",x2:"21",y2:"12"})]})})})]})]})]}):ve(qn,{children:[nt("style",{children:"@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }"}),nt("div",{id:"devtools-toolbar",style:b(m({},En),{overflow:"visible",opacity:.5,transition:"opacity 150ms ease"}),onMouseEnter:G=>G.currentTarget.style.opacity="1",onMouseLeave:G=>G.currentTarget.style.opacity="0.5",children:nt("button",{type:"button",style:{display:"flex",alignItems:"center",justifyContent:"center",width:48,height:48,border:"none",background:"none",cursor:"pointer",padding:0},onClick:()=>{Dt(!0),e({type:"SET_TOOL",payload:"inspector"}),e({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:i?nt("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:ne,children:N===1?ve(qn,{children:[nt("circle",{cx:"7",cy:"7",r:"2"}),nt("circle",{cx:"17",cy:"7",r:"2"}),nt("circle",{cx:"7",cy:"17",r:"2"}),nt("circle",{cx:"17",cy:"17",r:"2"})]}):ve(qn,{children:[nt("circle",{cx:"12",cy:"6",r:"2"}),nt("circle",{cx:"6",cy:"12",r:"2"}),nt("circle",{cx:"18",cy:"12",r:"2"}),nt("circle",{cx:"12",cy:"18",r:"2"})]})}):ve("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:ne,strokeWidth:"1.5",strokeLinecap:"round",children:[nt("line",{x1:"12",y1:"3",x2:"12",y2:"9"}),nt("line",{x1:"12",y1:"15",x2:"12",y2:"21"}),nt("line",{x1:"3",y1:"12",x2:"9",y2:"12"}),nt("line",{x1:"15",y1:"12",x2:"21",y2:"12"})]})})})]})}import{useCallback as Ni,useEffect as Oo,useRef as Bi,useState as mr}from"react";import{Fragment as Ka,jsx as Pe,jsxs as Di}from"react/jsx-runtime";var Hu={position:"fixed",bottom:70,right:16,zIndex:9999,display:"flex",flexDirection:"column",gap:10},zu=b(m({display:"flex",alignItems:"center",gap:6,padding:"4px 10px",backgroundColor:"rgba(255, 255, 255, 0.85)"},hn),{backdropFilter:"blur(32px)",fontFamily:"ui-monospace, SFMono-Regular, Menlo, monospace",fontSize:11,color:"#1f2937",whiteSpace:"nowrap",transition:"transform 200ms ease, opacity 200ms ease"});function _u(t){var a;let e=t.filter(s=>s.type==="tool_use");if(e.length===0)return"Starting\u2026";let o=e[e.length-1],n=String(o.data.tool||""),r=o.data.file?String(o.data.file):null,i=r?(a=r.split("/").pop())!=null?a:r:null;switch(n){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 n?`Using ${n}`:"Working\u2026"}}function $u(t,e){if(t.some(r=>r.type==="question"&&r.data.jobId===e))return"Has a question";let n=t.find(r=>r.type==="done"&&r.data.jobId===e);if(n){let r=n.data.resolutions;if(Array.isArray(r)&&r.length>0)return"Applied changes"}return"Replied"}function Wu({color:t}){let[e,o]=mr(0);return Oo(()=>{let n=setInterval(()=>{o(r=>(r+1)%2)},250);return()=>clearInterval(n)},[]),Pe("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:t,style:{verticalAlign:"middle",flexShrink:0},children:e===1?Di(Ka,{children:[Pe("circle",{cx:"7",cy:"7",r:"2"}),Pe("circle",{cx:"17",cy:"7",r:"2"}),Pe("circle",{cx:"7",cy:"17",r:"2"}),Pe("circle",{cx:"17",cy:"17",r:"2"})]}):Di(Ka,{children:[Pe("circle",{cx:"12",cy:"6",r:"2"}),Pe("circle",{cx:"6",cy:"12",r:"2"}),Pe("circle",{cx:"18",cy:"12",r:"2"}),Pe("circle",{cx:"12",cy:"18",r:"2"})]})})}function Yu({color:t}){return Pe("span",{style:{display:"inline-block",width:8,height:8,backgroundColor:t,opacity:.6}})}function ju({color:t}){return Pe("span",{style:{color:t,fontSize:12,lineHeight:1,width:10,display:"inline-block"},children:"\u2713"})}function Gu(){return Pe("span",{style:{display:"inline-block",width:8,height:8,borderRadius:"50%",backgroundColor:"#ef4444"}})}function Vu({onDismiss:t,children:e}){let o=Bi(null),n=Bi(null),[r,i]=mr(0),[a,s]=mr(!1),c=60,l=Ni(u=>{var f;n.current={startX:u.clientX,startY:u.clientY,locked:!1},(f=o.current)==null||f.setPointerCapture(u.pointerId)},[]),d=Ni(u=>{let f=n.current;if(!f)return;let g=u.clientX-f.startX,h=u.clientY-f.startY;if(!f.locked){if(Math.abs(g)<4&&Math.abs(h)<4)return;if(f.locked=!0,Math.abs(h)>Math.abs(g)){n.current=null;return}}i(Math.max(0,g))},[]),p=Ni(()=>{n.current&&(n.current=null,r>=c?(s(!0),setTimeout(t,200)):i(0))},[r,t]);return Pe("div",{ref:o,onPointerDown:l,onPointerMove:d,onPointerUp:p,onPointerCancel:p,style:{transform:a?"translateX(120%)":`translateX(${r}px)`,opacity:a?0:1-r/(c*3),transition:n.current?"none":"transform 200ms ease, opacity 200ms ease",touchAction:"pan-y"},children:e})}function Ua({bridge:t,inFlightJobs:e,isVisible:o,onHover:n,clearSignal:r,onViewThread:i}){let[a,s]=mr([]);Oo(()=>{r>0&&s([])},[r]),Oo(()=>{s(l=>{let d=new Set(l.map(u=>u.jobId)),p=[...l];for(let[u,f]of Object.entries(e))d.has(u)||p.push({jobId:u,color:f.color,status:"queued",threadId:f.threadId});for(let u of t.activeJobIds)!d.has(u)&&!e[u]&&p.push({jobId:u,color:"#888",status:"working"});return p.length!==l.length?p:l})},[e,t.activeJobIds]),Oo(()=>{if(t.activeJobIds.length===0)return;let l=new Set(t.activeJobIds);s(d=>d.map(p=>l.has(p.jobId)&&p.status!=="done"&&p.status!=="error"?b(m({},p),{status:"working"}):p))},[t.activeJobIds]);let c=Bi(null);return Oo(()=>{let l=t.lastCompletedJobId;if(!l||l===c.current)return;c.current=l;let d=t.events.some(u=>u.type==="error"&&(u.data.jobId===l||t.status==="error")),p=d?void 0:$u(t.events,l);s(u=>u.map(f=>f.jobId===l?b(m({},f),{status:d?"error":"done",doneLabel:p}):f))},[t.lastCompletedJobId,t.events,t.status]),!o||a.length===0?null:Pe("div",{style:Hu,"data-devtools":!0,onMouseEnter:()=>n(!0),onMouseLeave:()=>n(!1),children:a.map(l=>{let d=l.status==="working"?_u(t.events.filter(p=>p.data.jobId===l.jobId)):l.status==="queued"?"Queued":l.status==="done"?l.doneLabel||"Done":"Error";return Pe(Vu,{onDismiss:()=>s(p=>p.filter(u=>u.jobId!==l.jobId)),children:Di("div",{style:b(m({},zu),{cursor:l.threadId&&i?"pointer":void 0}),onClick:l.threadId&&i?()=>i(l.threadId):void 0,children:[l.status==="working"&&Pe(Wu,{color:l.color}),l.status==="queued"&&Pe(Yu,{color:l.color}),l.status==="done"&&Pe(ju,{color:l.color}),l.status==="error"&&Pe(Gu,{}),Pe("span",{style:{color:l.status==="queued"?"#9ca3af":"#1f2937"},children:d})]})},l.jobId)})})}import{useCallback as yr,useEffect as _n,useRef as Dn,useState as to}from"react";import{Fragment as Zu,jsx as we}from"react/jsx-runtime";var Za="ui-monospace, SFMono-Regular, Menlo, monospace",Xu=/^#[0-9a-fA-F]{3,8}$/,Ju=/^(?:rgba?|hsla?|oklch)\([^)]+\)$/,Ku=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 Uu(t){let e=t.trim();return Xu.test(e)||Ju.test(e)||Ku.has(e.toLowerCase())}function Fi(t,e){return we("span",{style:{display:"inline-block",width:10,height:10,backgroundColor:t,border:"1px solid rgba(0,0,0,0.15)",borderRadius:2,verticalAlign:"middle",marginRight:3}},e)}function Ho(t){let e=[],o=/(`[^`]+`)|(\*\*\*(.+?)\*\*\*)|(\*\*(.+?)\*\*)|(\*(.+?)\*)|(_([^_]+?)_)|(\[([^\]]+)\]\(([^)]+)\))|(#[0-9a-fA-F]{3,8})(?![0-9a-fA-F])|((?:rgba?|hsla?|oklch)\([^)]+\))/g,n=0,r;for(;(r=o.exec(t))!==null;){if(r.index>n&&e.push(t.slice(n,r.index)),r[1]){let i=r[1].slice(1,-1);Uu(i)&&e.push(Fi(i,`sw-${r.index}`)),e.push(we("code",{style:{fontFamily:Za,fontSize:"0.9em",backgroundColor:"rgba(0,0,0,0.06)",padding:"1px 4px",borderRadius:2},children:i},r.index))}else r[3]!==void 0?e.push(we("strong",{children:we("em",{children:r[3]})},r.index)):r[5]!==void 0?e.push(we("strong",{children:r[5]},r.index)):r[7]!==void 0?e.push(we("em",{children:r[7]},r.index)):r[9]!==void 0?e.push(we("em",{children:r[9]},r.index)):r[11]!==void 0&&r[12]!==void 0?e.push(we("a",{href:r[12],target:"_blank",rel:"noopener noreferrer",style:{color:"inherit",textDecoration:"underline"},children:r[11]},r.index)):r[13]!==void 0?(e.push(Fi(r[13],`sw-${r.index}`)),e.push(r[13])):r[14]!==void 0&&(e.push(Fi(r[14],`sw-${r.index}`)),e.push(r[14]));n=r.index+r[0].length}return n<t.length&&e.push(t.slice(n)),e}function hr(t){var r;let e=t.split(`
|
|
17
|
+
`),o=[],n=0;for(;n<e.length;){let i=e[n];if(i.trimStart().startsWith("```")){let l=[];for(n++;n<e.length&&!e[n].trimStart().startsWith("```");)l.push(e[n]),n++;n++,o.push(we("pre",{style:{fontFamily:Za,fontSize:"0.9em",lineHeight:1.4,backgroundColor:"rgba(0,0,0,0.04)",padding:"6px 8px",margin:"4px 0",overflowX:"auto",whiteSpace:"pre"},children:l.join(`
|
|
18
|
+
`)},o.length));continue}if(/^(-{3,}|\*{3,}|_{3,})\s*$/.test(i)){o.push(we("hr",{style:{border:"none",borderTop:"1px solid rgba(0,0,0,0.1)",margin:"6px 0"}},o.length)),n++;continue}let a=i.match(/^(#{1,4})\s+(.+)/);if(a){let l=a[1].length,d={1:16,2:14,3:13,4:12};o.push(we("div",{style:{fontWeight:700,fontSize:(r=d[l])!=null?r:12,margin:"8px 0 2px"},children:Ho(a[2])},o.length)),n++;continue}if(i.trimStart().startsWith("|")&&i.trimEnd().endsWith("|")){let l=[];for(;n<e.length&&e[n].trimStart().startsWith("|")&&e[n].trimEnd().endsWith("|");)l.push(e[n]),n++;let d=x=>/^\|[\s\-:|]+\|$/.test(x),p=l.filter(x=>!d(x)),u=x=>x.split("|").slice(1,-1).map(L=>L.trim()),f=x=>/^\*\*.+\*\*$/.test(x)||/^__.+__$/.test(x),g=p.map(u),h=g.length>1&&g.slice(1).every(x=>x[0]&&f(x[0])),S=g.length>0&&g[0].every(x=>f(x));o.push(we("div",{style:{overflowX:"auto",margin:"4px 0",paddingBottom:4},children:we("table",{style:{borderCollapse:"separate",borderSpacing:0,fontSize:"0.95em",width:"max-content",minWidth:"100%"},children:we("tbody",{children:p.map((x,L)=>we("tr",{children:u(x).map((R,A)=>we(L===0?"th":"td",{style:m({border:"1px solid rgba(0,0,0,0.1)",padding:"3px 6px",textAlign:"left",fontWeight:L===0?600:400,minWidth:60,whiteSpace:"nowrap"},A===0&&h||L===0&&S?b(m(m({position:"sticky"},A===0&&h?{left:0}:{}),L===0&&S?{top:0}:{}),{background:"#fff",zIndex:A===0&&h&&L===0&&S?2:1}):{}),children:Ho(R)},A))},L))})})},o.length));continue}if(i.match(/^(\s*)([-*])\s+(.+)/)){let l=[];for(;n<e.length&&/^\s*[-*]\s+/.test(e[n]);){let d=e[n].match(/^\s*[-*]\s+(.+)/);d&&l.push(we("li",{children:Ho(d[1])},l.length)),n++}o.push(we("ul",{style:{margin:"2px 0",paddingLeft:20},children:l},o.length));continue}if(i.match(/^(\s*)\d+\.\s+(.+)/)){let l=[];for(;n<e.length&&/^\s*\d+\.\s+/.test(e[n]);){let d=e[n].match(/^\s*\d+\.\s+(.+)/);d&&l.push(we("li",{children:Ho(d[1])},l.length)),n++}o.push(we("ol",{style:{margin:"2px 0",paddingLeft:20},children:l},o.length));continue}if(i.trim()===""){o.push(we("div",{style:{height:4}},o.length)),n++;continue}o.push(we("div",{style:{margin:"2px 0"},children:Ho(i)},o.length)),n++}return we(Zu,{children:o})}import{Fragment as _i,jsx as zt,jsxs as Te}from"react/jsx-runtime";var br=400,ko=16,$i=3,qu=16,Oi="devtools-thread-panel-position";function Hi(){return{top:ko,left:window.innerWidth-br-2*$i-ko}}function qa(t,e){let o=document.getElementById("devtools-toolbar"),n=o==null?void 0:o.getBoundingClientRect(),r=window.innerHeight-ko;return n&&e+br+2*$i>n.left&&(r=n.top-qu),Math.max(200,r-Math.max(0,t))}var Qu=b(m({width:br,backgroundColor:"#ffffff"},hn),{boxSizing:"content-box",display:"flex",flexDirection:"column",overflow:"hidden",fontFamily:Se,fontSize:12,color:"#1f2937",pointerEvents:"auto"}),tp={display:"flex",alignItems:"center",justifyContent:"space-between",padding:"4px 5px 4px 10px",margin:"3px 3px 0",fontWeight:600,fontSize:12},ep={flex:1,overflowY:"auto",padding:"8px 0",scrollbarWidth:"none"},np=`
|
|
19
19
|
[data-devtools="thread-panel-messages"]:hover {
|
|
20
20
|
scrollbar-width: thin !important;
|
|
21
21
|
}
|
|
@@ -29,4 +29,4 @@ Your AI gets the visual and technical context it needs to act.`,usage:[],keys:[{
|
|
|
29
29
|
background: rgba(0,0,0,0.15);
|
|
30
30
|
border-radius: 3px;
|
|
31
31
|
}
|
|
32
|
-
`,vu={borderTop:"1px solid rgba(0, 0, 0, 0.08)",padding:12};function wa(t){return t.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 Su(t){return new Date(t).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"})}var pr=["reviewing","considering","thinking","zhuzhing","iterating","tweaking","reflecting","noodling","pondering","finessing","polishing","riffing"],wu=3e3,ku=250;function ka({size:t=14}){return Dt("svg",{width:t,height:t,viewBox:"0 0 1200 1200",fill:"#6b7280",stroke:"none",style:{flexShrink:0},children:Dt("path",{d:"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"})})}function Cu({color:t}){let[e,o]=to(0),[n,i]=to(()=>Math.floor(Math.random()*pr.length));return xo(()=>{let r=setInterval(()=>o(s=>(s+1)%2),ku),a=setInterval(()=>i(s=>(s+1)%pr.length),wu);return()=>{clearInterval(r),clearInterval(a)}},[]),Ee("span",{style:{display:"inline-flex",alignItems:"center",gap:4},children:[Dt("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:t,style:{verticalAlign:"middle",flexShrink:0},children:e===1?Ee(fr,{children:[Dt("circle",{cx:"7",cy:"7",r:"2"}),Dt("circle",{cx:"17",cy:"7",r:"2"}),Dt("circle",{cx:"7",cy:"17",r:"2"}),Dt("circle",{cx:"17",cy:"17",r:"2"})]}):Ee(fr,{children:[Dt("circle",{cx:"12",cy:"6",r:"2"}),Dt("circle",{cx:"6",cy:"12",r:"2"}),Dt("circle",{cx:"18",cy:"12",r:"2"}),Dt("circle",{cx:"12",cy:"18",r:"2"})]})}),Dt("span",{style:{fontSize:11,color:"#9ca3af",fontStyle:"italic"},children:pr[n]})]})}function Eu(t){var i;let e=String(t.data.tool||""),o=t.data.file?String(t.data.file):null,n=o?(i=o.split("/").pop())!=null?i:o:null;switch(e){case"Read":return n?`Reading ${n}`:"Reading file";case"Edit":return n?`Editing ${n}`:"Editing file";case"Write":return n?`Writing ${n}`:"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 e?`Using ${e}`:null}}function Tu(t){let e=[];for(let o of t)if(o.type==="tool_use"){let n=Eu(o);n&&e.push({kind:"tool",label:n})}else if(o.type==="delta"){let n=String(o.data.text||"");if(!n)continue;let i=e[e.length-1];i&&i.kind==="text"?i.text+=n:e.push({kind:"text",text:n})}else if(o.type==="thinking"){let n=String(o.data.text||"");if(!n)continue;let i=e[e.length-1];i&&i.kind==="thinking"?i.text+=n:e.push({kind:"thinking",text:n})}return e}function Ca({threadId:t,bridgeUrl:e,accentColor:o,isStreaming:n,streamingResponse:i,streamingThinking:r,streamingEvents:a,onClose:s,onReply:l,activePlan:c,planAnnotations:d,inFlightJobs:u,onViewThread:p,onApprovePlan:f,onDismissPlan:g}){var ht,St;let[b,C]=to([]),[w,L]=to(!0),[A,R]=to(""),[h,$]=to([]),nt=ur(null),Y=ur(null),K=ur(n),q=qo(()=>{fetch(`${e}/thread/${t}`).then(Z=>Z.json()).then(Z=>{var st;C((st=Z.messages)!=null?st:[]),L(!1)}).catch(()=>L(!1))},[e,t]);xo(()=>{L(!0),q()},[q]),xo(()=>{K.current&&!n&&q(),K.current=n},[n,q]);let B=a?Tu(a):[];xo(()=>{nt.current&&(nt.current.scrollTop=nt.current.scrollHeight)},[b,B.length,n]),xo(()=>{let Z=st=>{st.key==="Escape"&&(st.stopPropagation(),s())};return document.addEventListener("keydown",Z),()=>document.removeEventListener("keydown",Z)},[s]);let Q=qo(()=>{if(!A.trim()||!l)return;let Z=A.trim(),st=h.length>0?h:void 0;C(wt=>[...wt,{role:"human",timestamp:Date.now(),jobId:"pending",replyToQuestion:st?`${Z} [${st.length} image${st.length>1?"s":""}]`:Z}]),l(t,Z,st),R(""),$([])},[A,h,t,l]),U=qo(Z=>{let st=Z.clipboardData.items,wt=[];for(let O=0;O<st.length;O++){let xt=st[O];if(xt.type.startsWith("image/")){let vt=xt.getAsFile();vt&&wt.push(vt)}}wt.length>0&&(Z.preventDefault(),$(O=>[...O,...wt]))},[]),It=qo(Z=>{Z.key==="Enter"&&(Z.metaKey||Z.ctrlKey)&&(Z.preventDefault(),Q())},[Q]);return Ee(fr,{children:[Dt("div",{"data-devtools":"thread-panel-backdrop",onMouseDown:s,style:{position:"fixed",inset:0,zIndex:Sa.zIndex-1}}),Ee("div",{ref:Y,style:Sa,"data-devtools":"thread-panel",children:[Ee("div",{style:x(m({},yu),{backgroundColor:o,color:"#ffffff"}),children:[Dt("span",{children:"Conversation"}),Dt("button",{onClick:s,style:{background:"none",border:"none",cursor:"pointer",fontSize:16,color:"#ffffff",padding:"0 4px",lineHeight:1},children:"\xD7"})]}),Dt("style",{dangerouslySetInnerHTML:{__html:xu}}),Ee("div",{ref:nt,style:bu,"data-devtools":"thread-panel-messages",children:[w&&Dt("div",{style:{padding:16,color:"#9ca3af",textAlign:"center"},children:"Loading..."}),!w&&b.length===0&&!n&&Dt("div",{style:{padding:16,color:"#9ca3af",textAlign:"center"},children:"No messages yet."}),b.map((Z,st)=>{let wt=Z.role==="human",O=wt?Z.replyToQuestion||Z.feedbackSummary||"(annotation)":wa(Z.responseText||""),xt=wt?void 0:Z.question,vt=!wt&&Z.resolutions&&Z.resolutions.length>0,jt=!wt&&Z.toolsUsed&&Z.toolsUsed.length>0;if(!O&&!xt&&!vt)return null;let Ot=st===b.length-1;return Ee("div",{style:{padding:"8px 16px",borderBottom:"1px solid rgba(0, 0, 0, 0.04)",opacity:Ot?1:.5},children:[Ee("div",{style:{display:"flex",alignItems:"center",gap:4,marginBottom:4},children:[!wt&&Dt(ka,{size:11}),Dt("span",{style:{fontWeight:600,fontSize:11,color:wt?o:"#6b7280"},children:wt?"You":"Claude Code"}),Dt("span",{style:{fontSize:10,color:"#9ca3af",marginLeft:"auto"},children:Su(Z.timestamp)})]}),O&&Dt("div",{style:{lineHeight:1.5,wordBreak:"break-word"},children:wt?O:Zo(O)}),xt&&Dt("div",{style:{marginTop:O?4:0,lineHeight:1.5,wordBreak:"break-word"},children:Zo(xt)}),(jt||vt)&&Ee("div",{style:{marginTop:O||xt?6:0,padding:"4px 8px",backgroundColor:"rgba(0, 0, 0, 0.03)",fontSize:11,lineHeight:1.5,color:"#6b7280"},children:[jt&&Dt("div",{style:{fontFamily:"ui-monospace, SFMono-Regular, Menlo, monospace",fontSize:10},children:Z.toolsUsed.map((yt,le)=>Dt("div",{children:yt},le))}),vt&&Z.resolutions.map((yt,le)=>{var ne;let lt=(ne=yt.finalScope)!=null?ne:yt.inferredScope,Tt=lt?`${lt.breadth} \xB7 ${lt.target}`:null;return Ee("div",{style:{marginTop:jt?4:0},children:[Dt("span",{style:{color:yt.status==="resolved"?"#10b981":"#f59e0b"},children:yt.status==="resolved"?"Done":"Needs review"}),Tt&&Dt("span",{style:{marginLeft:6,padding:"1px 5px",backgroundColor:"rgba(0, 0, 0, 0.06)",fontSize:10,fontFamily:"ui-monospace, SFMono-Regular, Menlo, monospace"},children:Tt}),yt.summary?` \u2014 ${yt.summary}`:""]},le)})]})]},`${Z.jobId}-${st}`)}),c&&d&&d.length>0&&Ee("div",{style:{padding:"8px 16px",borderBottom:"1px solid rgba(0, 0, 0, 0.04)"},children:[Dt("div",{style:{fontWeight:600,fontSize:11,color:"#6b7280",marginBottom:6},children:"Plan Tasks"}),d.map(Z=>{var vt,jt;let st=(vt=c.tasks)==null?void 0:vt.find(Ot=>Ot.id===Z.planTaskId),O=u&&Object.values(u).some(Ot=>Ot.annotationIds.includes(Z.id))?"running":(jt=Z.status)!=null?jt:"pending",xt=O==="resolved"?"#10b981":O==="running"?Z.color:O==="needs_review"?"#f59e0b":"#9ca3af";return Ee("div",{style:{display:"flex",alignItems:"flex-start",gap:8,padding:"4px 0",cursor:Z.threadId&&p?"pointer":"default"},onClick:()=>{Z.threadId&&p&&p(Z.threadId)},children:[Dt("div",{style:{width:6,height:6,borderRadius:"50%",backgroundColor:xt,marginTop:4,flexShrink:0}}),Ee("div",{style:{flex:1,fontSize:11,lineHeight:1.4},children:[Dt("div",{children:(st==null?void 0:st.instruction)||Z.text||Z.planTaskId}),Dt("div",{style:{color:"#9ca3af",fontSize:10},children:O})]})]},Z.id)})]}),(c==null?void 0:c.status)==="awaiting_approval"&&f&&g&&Ee("div",{style:{padding:"8px 16px",borderBottom:"1px solid rgba(0, 0, 0, 0.04)"},children:[Ee("div",{style:{fontWeight:600,fontSize:12},children:[(ht=d==null?void 0:d.length)!=null?ht:0," task",((St=d==null?void 0:d.length)!=null?St:0)!==1?"s":""," planned"]}),Dt("div",{style:{color:"#6b7280",fontSize:11,marginTop:2,marginBottom:8},children:"Review annotations, then approve to start workers"}),Ee("div",{style:{display:"flex",gap:8},children:[Dt("button",{onClick:f,style:{padding:"5px 14px",fontSize:11,fontWeight:600,fontFamily:Ce,backgroundColor:"#1f2937",color:"#ffffff",border:"none",cursor:"pointer"},children:"Approve"}),Dt("button",{onClick:g,style:{padding:"5px 14px",fontSize:11,fontWeight:600,fontFamily:Ce,backgroundColor:"transparent",color:"#6b7280",border:"1px solid rgba(0, 0, 0, 0.1)",cursor:"pointer"},children:"Dismiss"})]})]}),n&&Ee("div",{style:{padding:"8px 16px",borderBottom:"1px solid rgba(0, 0, 0, 0.04)"},children:[Ee("div",{style:{display:"flex",alignItems:"center",gap:4,marginBottom:4},children:[Dt(ka,{size:11}),Dt("span",{style:{fontWeight:600,fontSize:11,color:"#6b7280"},children:"Claude Code"}),Dt("span",{style:{marginLeft:"auto"},children:Dt(Cu,{color:o})})]}),B.map((Z,st)=>{if(Z.kind==="tool")return Dt("div",{style:{paddingLeft:12,fontSize:11,color:"#9ca3af",fontFamily:"ui-monospace, SFMono-Regular, Menlo, monospace",lineHeight:1.6},children:Z.label},st);if(Z.kind==="thinking")return Dt("div",{style:{paddingLeft:12,marginTop:2,marginBottom:2,fontSize:11,color:"#9ca3af",fontStyle:"italic",lineHeight:1.4,whiteSpace:"pre-wrap",wordBreak:"break-word",maxHeight:80,overflowY:"auto"},children:Z.text},st);let wt=wa(Z.text);return wt?Dt("div",{style:{paddingLeft:12,marginTop:2,marginBottom:2,lineHeight:1.5,wordBreak:"break-word"},children:Zo(wt)},st):null})]})]}),l&&Ee("div",{style:vu,children:[h.length>0&&Ee("div",{style:{fontSize:11,color:"#6b7280",marginBottom:4,display:"flex",alignItems:"center",gap:4},children:[Ee("span",{children:[h.length," image",h.length>1?"s":""," attached"]}),Dt("button",{onClick:()=>$([]),style:{background:"none",border:"none",cursor:"pointer",fontSize:11,color:"#9ca3af",padding:"0 2px"},children:"\xD7"})]}),Dt("textarea",{value:A,onChange:Z=>R(Z.target.value),onKeyDown:It,onPaste:U,placeholder:"Reply... (Cmd+Enter to send)",style:{width:"100%",minHeight:60,padding:4,fontSize:12,fontFamily:Ce,backgroundColor:"rgba(0, 0, 0, 0.03)",color:"#1f2937",border:"1px solid rgba(0, 0, 0, 0.1)",borderRadius:0,outline:"none",resize:"vertical",lineHeight:1.4,boxSizing:"border-box"}}),Dt("div",{style:{display:"flex",justifyContent:"flex-end",marginTop:6},children:Dt("button",{onClick:Q,disabled:!A.trim(),style:{padding:"5px 14px",fontSize:11,fontFamily:Ce,fontWeight:600,backgroundColor:A.trim()?o:"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"})})]})]})]})}import{Fragment as Nu,jsx as vo,jsxs as Bu}from"react/jsx-runtime";var Ea=Mu(null),Lu="http://localhost:1111",gr="devtools-provider",mr="devtools-model",hr="devtools-open-thread-id",yr="devtools-active-plan",br=[{id:"claude-opus-4-6",label:"Opus 4.6"},{id:"claude-sonnet-4-6",label:"Sonn 4.6"}],xr=[{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"}];function Ru(t,e,o){let n=t==="codex"?xr:br;return Math.min(o,(e==="codex"?xr:br).length-1)}function Au({children:t,enabled:e=process.env.NODE_ENV==="development",bridgeUrl:o=Lu}){var cn,V,et,ft,Mt;let[n,i]=es(),r=Qr(o),a=nn(new Map),[s,l]=Ue(()=>typeof window=="undefined"?"claude":localStorage.getItem(gr)||"claude"),[c,d]=Ue(()=>{if(typeof window=="undefined")return 0;let y=localStorage.getItem(mr);return y&&parseInt(y,10)||0}),[u,p]=Ue(["claude","codex"]),[f,g]=Ue({}),[b,C]=Ue(!1);Te(()=>{r.isConnected&&$r(o).then(y=>{if(!y)return;let T=Object.entries(y.providers).filter(([,kt])=>kt.available).map(([kt])=>kt);T.length>0&&p(T);let W={};for(let[kt,Rt]of Object.entries(y.providers))Rt.mcp&&(W[kt]=Rt.mcp);g(W),Object.values(W).every(kt=>kt.found)&&C(!1)})},[r.isConnected,o]),Te(()=>{if(u.length>0&&!u.includes(s)){let y=u[0];l(y),localStorage.setItem(gr,y)}},[u,s]);let w=s==="codex"?xr:br,L=(cn=w[c])!=null?cn:w[0],A=Fe(y=>{let T=s;l(y),localStorage.setItem(gr,y);let W=Ru(T,y,c);d(W),localStorage.setItem(mr,String(W))},[s,c]),R=Fe(y=>{d(y),localStorage.setItem(mr,String(y))},[]),h=Fe(async()=>{let y=await Jr(o);if(!y)return;let T={};for(let[W,rt]of Object.entries(y.capabilities.providers))rt.mcp&&(T[W]=rt.mcp);g(T),y.results.some(W=>W.installed)&&C(!0)},[o]),[$,nt]=Ue(new Set),[Y,K]=Ue(null),[q,B]=Ue(null),[Q,U]=Ue(null),[It,ht]=Ue(null);Te(()=>{r.isConnected&&Wn(o).then(y=>{y!=null&&y.components&&nt(new Set(Object.keys(y.components)))})},[r.isConnected,o]);let St=Fe(async y=>{let T=[];for(let W of y)try{(await Xr(W,o)).added&&T.push(W)}catch(rt){console.error("[Popmelt] Failed to add component to model:",W,rt)}T.length>0&&(nt(W=>{let rt=new Set(W);for(let kt of T)rt.add(kt);return rt}),K(T[T.length-1]))},[o]),Z=Fe(y=>{K(y)},[]),st=Fe(()=>{Wn(o).then(y=>{y!=null&&y.components&&nt(new Set(Object.keys(y.components)))})},[o]),wt=Fe(async y=>{try{(await Kr(y,o)).removed&&nt(W=>{let rt=new Set(W);return rt.delete(y),rt})}catch(T){console.error("[Popmelt] Failed to remove component from model:",T)}},[o]),O=Fe((y,T)=>{i({type:"MODIFY_SPACING_TOKEN",payload:y}),i({type:"ADD_SPACING_TOKEN_CHANGE",payload:T})},[i]),xt=Fe((y,T)=>{i({type:"DELETE_SPACING_TOKEN",payload:{tokenPath:y,originalValue:T}})},[i]),[vt,jt]=Ue(0),Ot=nn([]);Te(()=>{let y=Ot.current,T=n.spacingTokenMods;Ot.current=T;let W=new Map(y.map(Rt=>[Rt.tokenPath,Rt])),rt=new Map(T.map(Rt=>[Rt.tokenPath,Rt])),kt=!1;for(let[Rt,ut]of rt){let zt=W.get(Rt);if(!(zt&&zt.currentValue===ut.currentValue)){kt=!0,ut.currentValue==="__deleted__"?Ur(Rt,o).catch(ct=>console.error("[Popmelt] Failed to sync token delete:",ct)):ei(Rt,ut.currentValue,o).catch(ct=>console.error("[Popmelt] Failed to sync token update:",ct));for(let ct of ut.targets){let _t=document.querySelector(ct.selector);if(_t)if(ut.currentValue==="__deleted__")_t.style.removeProperty(ct.property);else{let Vt=ut.currentPx;Vt>0&&_t.style.setProperty(ct.property,`${Vt}px`,"important")}}}}for(let[Rt,ut]of W)if(!rt.has(Rt)){kt=!0,ei(Rt,ut.originalValue,o).catch(zt=>console.error("[Popmelt] Failed to restore token on undo:",zt));for(let zt of ut.targets){let ct=document.querySelector(zt.selector);ct&&ct.style.removeProperty(zt.property)}}kt&&jt(Rt=>Rt+1)},[n.spacingTokenMods,o]);let[yt,le]=Ue(()=>typeof window=="undefined"?null:localStorage.getItem(hr)||null),[lt,Tt]=Ue(()=>{if(typeof window=="undefined")return null;try{let y=localStorage.getItem(yr);return y?JSON.parse(y):null}catch(y){return null}});Te(()=>{yt?localStorage.setItem(hr,yt):localStorage.removeItem(hr)},[yt]),Te(()=>{lt?localStorage.setItem(yr,JSON.stringify(lt)):localStorage.removeItem(yr)},[lt]);let ne="popmelt-in-flight-jobs",[Yt,te]=Ue(()=>{try{let y=sessionStorage.getItem(ne);return y?JSON.parse(y):{}}catch(y){return{}}});Te(()=>{try{Object.keys(Yt).length>0?sessionStorage.setItem(ne,JSON.stringify(Yt)):sessionStorage.removeItem(ne)}catch(y){}},[Yt]);let fe=nn(!1);Te(()=>{if(fe.current||n.annotations.length===0)return;fe.current=!0;let y=new Set;for(let W of Object.values(Yt))for(let rt of W.annotationIds)y.add(rt);let T=n.annotations.filter(W=>y.has(W.id)?!1:!!(W.status==="in_flight"||(W.status==="pending"||!W.status)&&(W.captured||W.threadId))).map(W=>W.id);T.length>0&&i({type:"SET_ANNOTATION_STATUS",payload:{ids:T,status:"dismissed"}}),lt&&(lt.status==="planning"||lt.status==="executing"||lt.status==="reviewing")&&Object.keys(Yt).length===0&&Tt(null)},[n.annotations,Yt,i,lt]);let G=eo(()=>{let y=new Set;for(let T of Object.values(Yt))for(let W of T.annotationIds)y.add(W);return y},[Yt]),mt=eo(()=>{let y=new Set;for(let T of Object.values(Yt))for(let W of T.styleSelectors)y.add(W);return y},[Yt]),at=eo(()=>{let y=new Map;for(let T of Object.values(Yt)){for(let W of T.styleSelectors)y.set(W,T.color);for(let W of T.annotationIds){let rt=n.annotations.find(kt=>kt.id===W);if(rt&&(rt.linkedSelector&&y.set(rt.linkedSelector,T.color),rt.groupId))for(let kt of n.annotations)kt.groupId===rt.groupId&&kt.linkedSelector&&y.set(kt.linkedSelector,T.color)}}return y},[Yt,n.annotations]),Pt=nn(n.annotations);Pt.current=n.annotations;let Ht=nn(n.styleModifications);Ht.current=n.styleModifications;let Nt=nn(Yt);Nt.current=Yt,Te(()=>{let y=null,T=()=>{var zt,ct;if(Object.keys(Nt.current).length>0)return;let rt=Pt.current,kt=Ht.current,Rt=[],ut=[];for(let _t of rt){if(!_t.linkedSelector||!_t.linkedSelector.startsWith("[data-pm=")||_t.captured||_t.status&&_t.status!=="pending")continue;let Vt=document.querySelector(_t.linkedSelector);!Vt&&((ct=(zt=_t.elements)==null?void 0:zt[0])!=null&&ct.selector)&&(Vt=document.querySelector(_t.elements[0].selector)),Vt||Rt.push(_t.linkedSelector)}for(let _t of kt)document.querySelector(_t.selector)||ut.push(_t.selector);(Rt.length>0||ut.length>0)&&i({type:"CLEANUP_ORPHANED",payload:{linkedSelectors:Rt,styleSelectors:ut}})},W=new MutationObserver(rt=>{rt.some(kt=>kt.removedNodes.length>0)&&(y&&clearTimeout(y),y=setTimeout(T,3e3))});return W.observe(document.body,{childList:!0,subtree:!0}),()=>{W.disconnect(),y&&clearTimeout(y)}},[i]),Te(()=>{r.lastCompletedJobId&&r.lastCompletedJobId in Yt&&te(y=>{var rt;let kt=y,{[rt=r.lastCompletedJobId]:T}=kt;return To(kt,[Eo(rt)])})},[r.lastCompletedJobId]);let Lt=nn(new Set);Te(()=>{let y=r.events.filter(T=>T.type==="done"&&T.data.resolutions);for(let T of y){let W=T.data.jobId;Lt.current.has(W)||(Lt.current.add(W),Array.isArray(T.data.resolutions)&&i({type:"APPLY_RESOLUTIONS",payload:{resolutions:T.data.resolutions,threadId:T.data.threadId}}))}},[r.events,i]);let ee=nn(0);Te(()=>{let y=r.incrementalResolutions;if(y.length<=ee.current)return;let T=y.slice(ee.current);ee.current=y.length,i({type:"APPLY_RESOLUTIONS",payload:{resolutions:T}})},[r.incrementalResolutions,i]),Te(()=>{r.incrementalResolutions.length===0&&(ee.current=0)},[r.incrementalResolutions.length]);let Ft=nn(r.status);Te(()=>{let y=Ft.current;Ft.current=r.status,y==="disconnected"&&r.status==="idle"&&te({})},[r.status]);let we=Fe(async()=>{let y=document.getElementById("devtools-canvas");if(!y)return!1;let T=await xi(document.body,y,n.annotations);if(T.length===0)return!1;let W=await hs(T,n.annotations,n.styleModifications);return W&&i({type:"MARK_CAPTURED"}),W},[n.annotations,n.styleModifications,i]),se=Fe(async y=>{var T;try{let W=n.annotations.filter(ae=>{var Ye;return((Ye=ae.status)!=null?Ye:"pending")==="pending"}),rt=await _o(document.body,W);if(!rt)return!1;let kt=gs(),Rt=n.styleModifications.filter(ae=>!ae.captured),ut=(T=n.inspectedElement)==null?void 0:T.info,ct=W.length>0||Rt.length>0||!!ut?JSON.stringify(Ho(W,Rt,ut)):void 0,{planId:_t,threadId:Vt}=await Yr(rt,y,o,s,L.id,window.location.href,{width:window.innerWidth,height:window.innerHeight},kt,ct);if(Tt({planId:_t,threadId:Vt,goal:y,status:"planning"}),Vt){let ae=n.annotations.filter(Ye=>{var je;return Ye.type==="text"&&((je=Ye.status)!=null?je:"pending")==="pending"}).map(Ye=>Ye.id);ae.length>0&&i({type:"SET_ANNOTATION_THREAD",payload:{ids:ae,threadId:Vt}})}return i({type:"MARK_CAPTURED"}),Vt&&le(Vt),!0}catch(W){return console.error("[Pare] Failed to send plan:",W),!1}},[o,s,L.id,n.annotations,n.styleModifications,n.inspectedElement,i]),ge=Fe(async y=>{let T=lt==null?void 0:lt.planId;if(!T)return;let W=n.activeColor.match(/oklch\([^)]*\s+([\d.]+)\s*\)/),rt=W!=null&&W[1]?parseFloat(W[1]):29,kt=y.length>1?360/y.length:0;for(let Rt=0;Rt<y.length;Rt++){let ut=y[Rt],zt=(rt+Rt*kt)%360,ct=`oklch(0.628 0.258 ${Math.round(zt)})`,_t=ut.region.y+ut.region.height/2,Vt=window.innerHeight;(_t<window.scrollY||_t>window.scrollY+Vt)&&(window.scrollTo({top:Math.max(0,_t-Vt/2),behavior:"instant"}),await new Promise(hn=>requestAnimationFrame(()=>requestAnimationFrame(()=>hn()))));let ae=ci(ut.region),Ye=Math.random().toString(36).substring(2,9),je=ae?{x:ae.rect.left+window.scrollX,y:ae.rect.top+window.scrollY,width:ae.rect.width,height:ae.rect.height}:ut.region;i({type:"ADD_PLAN_ANNOTATION",payload:{groupId:Ye,planId:T,planTaskId:ut.id,instruction:ut.instruction,region:je,color:ct,linkedSelector:ae==null?void 0:ae.selector,elements:ae?[ae.info]:void 0}}),Rt<y.length-1&&await new Promise(hn=>setTimeout(hn,200))}},[lt==null?void 0:lt.planId,n.activeColor,i]),Zt=Fe((y,T)=>{let W=a.current.get(y)||[];a.current.set(y,[...W,...T])},[]),De=Fe(async()=>{let y=document.getElementById("devtools-canvas");if(!y)return!1;let T=n.annotations.filter(ct=>{var _t;return((_t=ct.status)!=null?_t:"pending")==="pending"}),W=n.spacingTokenChanges.filter(ct=>!ct.captured);if(T.length===0&&n.styleModifications.filter(ct=>!ct.captured).length===0&&W.length===0)return!1;let rt=await xi(document.body,y,n.annotations);if(rt.length===0)return!1;let kt=await zo(rt);if(!kt)return!1;let Rt=Ho(T,n.styleModifications,void 0,W.length>0?W:void 0),ut=JSON.stringify(Rt),zt=new Map;for(let ct of T){let _t=a.current.get(ct.id);if(_t&&_t.length>0&&zt.set(ct.id,_t),ct.groupId){for(let Vt of T)if(Vt.groupId===ct.groupId&&Vt.id!==ct.id){let ae=a.current.get(Vt.id);ae&&ae.length>0&&zt.set(Vt.id,ae)}}}try{let ct=bi(n.activeColor),{jobId:_t,threadId:Vt}=await Wr(kt,ut,o,ct,s,L.id,zt.size>0?zt:void 0);for(let Ge of zt.keys())a.current.delete(Ge);let ae=T.map(Ge=>Ge.id),Ye=n.styleModifications.filter(Ge=>!Ge.captured).map(Ge=>Ge.selector);te(Ge=>x(m({},Ge),{[_t]:{annotationIds:ae,styleSelectors:Ye,color:n.activeColor,threadId:Vt}})),i({type:"MARK_CAPTURED"}),Vt&&ae.length>0&&i({type:"SET_ANNOTATION_THREAD",payload:{ids:ae,threadId:Vt}});let je=n.activeColor.match(/oklch\([^)]*\s+([\d.]+)\s*\)/),Rn=((je!=null&&je[1]?parseFloat(je[1]):29)+60)%360;return i({type:"SET_COLOR",payload:`oklch(0.628 0.258 ${Rn})`}),!0}catch(ct){return console.error("[Pare] Failed to send to bridge:",ct),!1}},[n.annotations,n.styleModifications,n.spacingTokenChanges,n.activeColor,i,o,s,L.id]),de=Fe(async(y,T,W)=>{try{let rt=bi(n.activeColor),{jobId:kt}=await Zr(y,T,o,rt,s,L.id,W);te(ut=>x(m({},ut),{[kt]:{annotationIds:[],styleSelectors:[],color:n.activeColor,threadId:y}}));let Rt=n.annotations.filter(ut=>ut.threadId===y&&(ut.status==="waiting_input"||ut.status==="resolved"||ut.status==="needs_review"));Rt.length>0&&(i({type:"SET_ANNOTATION_STATUS",payload:{ids:Rt.map(ut=>ut.id),status:"in_flight"}}),te(ut=>{let zt=ut[kt];return zt?x(m({},ut),{[kt]:x(m({},zt),{annotationIds:[...zt.annotationIds,...Rt.map(ct=>ct.id)]})}):ut})),r.dismissQuestion(y)}catch(rt){console.error("[Pare] Failed to send reply:",rt)}},[n.activeColor,n.annotations,o,r.dismissQuestion,i,s,L.id]),_e=Fe(async()=>{if(!(!lt||!lt.planId))try{await jr(lt.planId,o),Tt(ut=>ut?x(m({},ut),{status:"executing"}):null);let y=await _o(document.body);if(!y)return;let T=n.annotations.filter(ut=>{var zt;return ut.planId===lt.planId&&ut.type!=="text"&&((zt=ut.status)!=null?zt:"pending")==="pending"}),W=T.map(ut=>{var hn,Rn,Ge;let zt=ut.groupId?n.annotations.find(An=>An.groupId===ut.groupId&&An.type==="text"):void 0,ct=(hn=ut.points[0])!=null?hn:{x:0,y:0},_t=(Rn=ut.points[1])!=null?Rn:ct,Vt=Math.min(ct.x,_t.x),ae=Math.min(ct.y,_t.y),Ye=Math.abs(_t.x-ct.x)||100,je=Math.abs(_t.y-ct.y)||100;return{planTaskId:ut.planTaskId||ut.id,annotationId:ut.id,instruction:(zt==null?void 0:zt.text)||ut.text||"No instruction",region:{x:Vt,y:ae,width:Ye,height:je},linkedSelector:ut.linkedSelector,elements:(Ge=ut.elements)==null?void 0:Ge.map(An=>({selector:An.selector,reactComponent:An.reactComponent}))}});if(W.length===0)return;let{jobId:rt}=await Vr(y,lt.planId,W,o,s,L.id),kt=[],Rt=new Set;for(let ut of T)if(Rt.has(ut.id)||(Rt.add(ut.id),kt.push(ut.id)),ut.groupId)for(let zt of n.annotations)zt.groupId===ut.groupId&&!Rt.has(zt.id)&&(Rt.add(zt.id),kt.push(zt.id));te(ut=>x(m({},ut),{[rt]:{annotationIds:kt,styleSelectors:[],color:n.activeColor,planId:lt.planId}})),i({type:"SET_ANNOTATION_STATUS",payload:{ids:kt,status:"in_flight"}}),i({type:"MARK_CAPTURED"})}catch(y){console.error("[Pare] Failed to approve plan:",y)}},[lt,n.annotations,n.activeColor,o,s,L.id,i]),me=Fe(()=>{if(Tt(null),lt!=null&<.planId){let y=n.annotations.filter(T=>T.planId===lt.planId);for(let T of y)i({type:"DELETE_ANNOTATION",payload:{id:T.id}})}},[lt,n.annotations,i]),Ze=nn(new Set);Te(()=>{for(let y of r.pendingQuestions){if(Ze.current.has(y.jobId))continue;Ze.current.add(y.jobId);let T=y.annotationIds&&y.annotationIds.length>0?y.annotationIds:void 0;!T&&y.threadId&&(T=n.annotations.filter(W=>W.threadId===y.threadId).map(W=>W.id)),T&&T.length>0&&i({type:"SET_ANNOTATION_QUESTION",payload:{ids:T,question:y.question,threadId:y.threadId}})}},[r.pendingQuestions,i,n.annotations]);let Re=nn(new Set),We=nn(null);Te(()=>{for(let y of r.pendingPlans){if(Re.current.has(y.planId))continue;Re.current.add(y.planId);let T=y.tasks.length===1;Tt(W=>(W==null?void 0:W.planId)!==y.planId?W:x(m({},W),{tasks:y.tasks,threadId:y.threadId,status:T?"executing":"awaiting_approval"})),ge(y.tasks).then(()=>{T&&(We.current=y.planId)}),r.dismissPlan(y.planId)}},[r.pendingPlans]),Te(()=>{!We.current||!lt||lt.planId!==We.current||n.annotations.filter(T=>T.planId===lt.planId&&T.type!=="text").length===0||(We.current=null,_e())},[lt,n.annotations,_e]),Te(()=>{for(let y of r.planReviews)!lt||lt.planId!==y.planId||y.verdict==="pass"&&Tt(T=>T?x(m({},T),{status:"done"}):null)},[r.planReviews,lt]);let $e=nn(new Set);Te(()=>{!lt||lt.status!=="executing"||$e.current.has(lt.planId)||Object.entries(Yt).filter(([W,rt])=>rt.planId===lt.planId).length>0||n.annotations.filter(W=>W.planId===lt.planId&&(W.status==="resolved"||W.status==="needs_review")).length===0||($e.current.add(lt.planId),(async()=>{try{Tt(rt=>rt?x(m({},rt),{status:"reviewing"}):null);let W=await _o(document.body);if(!W)return;await Gr(lt.planId,W,o,s,L.id)}catch(W){console.error("[Pare] Failed to trigger review:",W)}})())},[lt,Yt,n.annotations,o,s,L.id]);let ke=eo(()=>{if(r.activeJobId&&r.activeJobId in Yt)return Yt[r.activeJobId].color;let y=Object.values(Yt);return y.length>0?y[y.length-1].color:void 0},[r.activeJobId,Yt]),mn=Fe(y=>{le(y)},[]);Te(()=>{n.activeTool==="model"&&yt&&le(null)},[n.activeTool]);let j=nn(null);Te(()=>{n.isAnnotating?j.current&&(le(j.current),j.current=null):yt&&(j.current=yt,le(null))},[n.isAnnotating]);let At=eo(()=>{if(!yt)return null;for(let[y,T]of Object.entries(Yt))if(T.threadId===yt)return y;return null},[yt,Yt]),[Bt,qe]=Ue(!1),[ue,qt]=Ue(0),xe=nn(null),Ae=Fe(y=>{y?(xe.current&&(clearTimeout(xe.current),xe.current=null),qe(!0)):xe.current=setTimeout(()=>{qe(!1),xe.current=null},150)},[]),Tn=Fe(()=>{qt(y=>y+1),r.clearEvents()},[r.clearEvents]);Te(()=>()=>{xe.current&&clearTimeout(xe.current)},[]);let oe=eo(()=>({isEnabled:e}),[e]);return e?Bu(Ea.Provider,{value:oe,children:[t,vo(na,{state:n,dispatch:i,onScreenshot:we,inFlightAnnotationIds:G,inFlightStyleSelectors:mt,inFlightSelectorColors:at,onAttachImages:Zt,onReply:r.isConnected?de:void 0,onViewThread:r.isConnected?mn:void 0,activePlan:lt,onModelComponentsAdd:r.isConnected?St:void 0,onModelComponentFocus:r.isConnected?Z:void 0,onModelComponentHover:B,modelComponentNames:$,modelPanelHoveredComponent:Q,modelSpacingTokenHover:It}),vo(ya,{state:n,dispatch:i,onScreenshot:we,onSendToClaude:r.isConnected?De:void 0,onPlanGoal:r.isConnected?se:void 0,hasActiveJobs:Object.keys(Yt).length>0||r.activeJobIds.length>0,activeJobColor:ke,onCrosshairHover:Ae,onClear:Tn,provider:s,onProviderChange:r.isConnected&&u.length>1?A:void 0,availableProviders:u,modelIndex:c,modelCount:w.length,modelLabel:L.label,onModelChange:r.isConnected?R:void 0,onViewThread:r.isConnected?mn:void 0,isThreadPanelOpen:yt!==null,activePlan:lt,mcpStatus:f,onInstallMcp:r.isConnected?h:void 0,mcpJustInstalled:b,bridgeUrl:o,modelSelectedComponent:Y,modelCanvasHoveredComponent:q,onModelComponentHover:U,onSpacingTokenHover:ht,onModifySpacingToken:r.isConnected?O:void 0,onDeleteSpacingToken:r.isConnected?xt:void 0,modelRefreshKey:vt,onModelComponentAdded:st,onModelComponentRemoved:wt}),yt&&r.isConnected&&vo(Ca,{threadId:yt,bridgeUrl:o,accentColor:(et=(V=n.annotations.find(y=>y.threadId===yt))==null?void 0:V.color)!=null?et:n.activeColor,isStreaming:At!==null,streamingResponse:At&&(ft=r.jobResponses[At])!=null?ft:"",streamingThinking:At&&(Mt=r.jobThinking[At])!=null?Mt:"",streamingEvents:At?r.events.filter(y=>y.data.jobId===At):[],onClose:()=>le(null),onReply:de,activePlan:lt,planAnnotations:lt?n.annotations.filter(y=>y.planId===lt.planId&&y.type!=="text"):void 0,inFlightJobs:Yt,onViewThread:mn,onApprovePlan:(lt==null?void 0:lt.status)==="awaiting_approval"?_e:void 0,onDismissPlan:(lt==null?void 0:lt.status)==="awaiting_approval"?me:void 0}),r.isConnected&&vo(xa,{bridge:r,bridgeUrl:o,inFlightJobs:Yt,isVisible:Bt||r.lastResponseText!==null||r.activeJobIds.length>0,onHover:Ae,clearSignal:ue,onReply:de})]}):vo(Nu,{children:t})}function Pu(){let t=Iu(Ea);if(!t)throw new Error("usePopmelt must be used within PopmeltProvider");return t}export{Au as PopmeltProvider,Pu as usePopmelt};
|
|
32
|
+
`,op={borderTop:"1px solid rgba(0, 0, 0, 0.08)",padding:12};function Qa(t){return t.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 rp(t){return new Date(t).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"})}var zi=["reviewing","considering","thinking","zhuzhing","iterating","tweaking","reflecting","noodling","pondering","finessing","polishing","riffing"],ip=3e3,sp=250;function tl({size:t=14}){return zt("svg",{width:t,height:t,viewBox:"0 0 1200 1200",fill:"#6b7280",stroke:"none",style:{flexShrink:0},children:zt("path",{d:"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"})})}function ap({color:t}){let[e,o]=to(0),[n,r]=to(()=>Math.floor(Math.random()*zi.length));return _n(()=>{let i=setInterval(()=>o(s=>(s+1)%2),sp),a=setInterval(()=>r(s=>(s+1)%zi.length),ip);return()=>{clearInterval(i),clearInterval(a)}},[]),Te("span",{style:{display:"inline-flex",alignItems:"center",gap:4},children:[zt("svg",{width:"11",height:"11",viewBox:"0 0 24 24",fill:t,style:{verticalAlign:"middle",flexShrink:0},children:e===1?Te(_i,{children:[zt("circle",{cx:"7",cy:"7",r:"2"}),zt("circle",{cx:"17",cy:"7",r:"2"}),zt("circle",{cx:"7",cy:"17",r:"2"}),zt("circle",{cx:"17",cy:"17",r:"2"})]}):Te(_i,{children:[zt("circle",{cx:"12",cy:"6",r:"2"}),zt("circle",{cx:"6",cy:"12",r:"2"}),zt("circle",{cx:"18",cy:"12",r:"2"}),zt("circle",{cx:"12",cy:"18",r:"2"})]})}),zt("span",{style:{fontSize:11,color:"#9ca3af",fontStyle:"italic"},children:zi[n]})]})}function lp(t){var r;let e=String(t.data.tool||""),o=t.data.file?String(t.data.file):null,n=o?(r=o.split("/").pop())!=null?r:o:null;switch(e){case"Read":return n?`Reading ${n}`:"Reading file";case"Edit":return n?`Editing ${n}`:"Editing file";case"Write":return n?`Writing ${n}`:"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 e?`Using ${e}`:null}}function cp(t){let e=[];for(let o of t)if(o.type==="tool_use"){let n=lp(o);n&&e.push({kind:"tool",label:n})}else if(o.type==="delta"){let n=String(o.data.text||"");if(!n)continue;let r=e[e.length-1];r&&r.kind==="text"?r.text+=n:e.push({kind:"text",text:n})}else if(o.type==="thinking"){let n=String(o.data.text||"");if(!n)continue;let r=e[e.length-1];r&&r.kind==="thinking"?r.text+=n:e.push({kind:"thinking",text:n})}return e}function el({threadId:t,bridgeUrl:e,accentColor:o,isStreaming:n,streamingResponse:r,streamingThinking:i,streamingEvents:a,onClose:s,onReply:c,activePlan:l,planAnnotations:d,inFlightJobs:p,onViewThread:u,onApprovePlan:f,onDismissPlan:g}){var ct,ge;let[h,S]=to([]),[x,L]=to(!0),[R,A]=to(""),[T,C]=to([]),Z=Dn(null),Y=Dn(null),q=Dn(null),tt=Dn(n),B=Dn(Hi()),V=Dn({x:0,y:0}),Q=Dn(!1),Mt=Dn({x:0,y:0,offsetX:0,offsetY:0}),dt=Dn(!1),[,vt]=to(0);_n(()=>{try{let N=localStorage.getItem(Oi);if(N){let rt=JSON.parse(N);typeof rt.top=="number"&&typeof rt.left=="number"&&(dt.current=!0,B.current={top:rt.top,left:rt.left},vt(Ft=>Ft+1))}}catch(N){}},[]),_n(()=>{let N=()=>{dt.current||(B.current=Hi()),vt(rt=>rt+1)};return window.addEventListener("resize",N,{passive:!0}),()=>window.removeEventListener("resize",N)},[]),_n(()=>{let N=q.current;if(!N)return;let rt=kt=>{kt.button!==0||kt.target.closest("button")||(kt.preventDefault(),kt.stopPropagation(),Q.current=!0,Mt.current={x:kt.clientX,y:kt.clientY,offsetX:V.current.x,offsetY:V.current.y})},Ft=kt=>{if(!Q.current)return;let z=Mt.current,ot=z.offsetX+(kt.clientX-z.x),it=z.offsetY+(kt.clientY-z.y),yt=Math.max(ko,Math.min(window.innerWidth-br-2*$i-ko,B.current.left+ot)),Nt=Math.max(ko,B.current.top+it);V.current={x:yt-B.current.left,y:Nt-B.current.top};let Ct=Y.current;Ct&&(Ct.style.top=`${Nt}px`,Ct.style.left=`${yt}px`,Ct.style.height=`${qa(Nt,yt)}px`)},ut=()=>{if(!Q.current)return;let kt=B.current.top+V.current.y,z=B.current.left+V.current.x;B.current={top:kt,left:z},V.current={x:0,y:0},dt.current=!0;try{localStorage.setItem(Oi,JSON.stringify({top:kt,left:z}))}catch(ot){}Q.current=!1},jt=()=>{B.current=Hi(),V.current={x:0,y:0},dt.current=!1;try{localStorage.removeItem(Oi)}catch(kt){}vt(kt=>kt+1)};return N.addEventListener("mousedown",rt),window.addEventListener("mousemove",Ft),window.addEventListener("mouseup",ut),N.addEventListener("dblclick",jt),()=>{N.removeEventListener("mousedown",rt),window.removeEventListener("mousemove",Ft),window.removeEventListener("mouseup",ut),N.removeEventListener("dblclick",jt)}},[]);let Dt=yr(()=>{fetch(`${e}/thread/${t}`).then(N=>N.json()).then(N=>{var rt;S((rt=N.messages)!=null?rt:[]),L(!1)}).catch(()=>L(!1))},[e,t]);_n(()=>{L(!0),Dt()},[Dt]),_n(()=>{tt.current&&!n&&Dt(),tt.current=n},[n,Dt]);let Ht=a?cp(a):[];_n(()=>{Z.current&&(Z.current.scrollTop=Z.current.scrollHeight)},[h,Ht.length,n]),_n(()=>{let N=rt=>{rt.key==="Escape"&&(rt.stopPropagation(),s())};return document.addEventListener("keydown",N),()=>document.removeEventListener("keydown",N)},[s]);let Rt=yr(()=>{if(!R.trim()||!c)return;let N=R.trim(),rt=T.length>0?T:void 0;S(Ft=>[...Ft,{role:"human",timestamp:Date.now(),jobId:"pending",replyToQuestion:rt?`${N} [${rt.length} image${rt.length>1?"s":""}]`:N}]),c(t,N,rt),A(""),C([])},[R,T,t,c]),j=yr(N=>{let rt=N.clipboardData.items,Ft=[];for(let ut=0;ut<rt.length;ut++){let jt=rt[ut];if(jt.type.startsWith("image/")){let kt=jt.getAsFile();kt&&Ft.push(kt)}}Ft.length>0&&(N.preventDefault(),C(ut=>[...ut,...Ft]))},[]),It=yr(N=>{N.key==="Enter"&&(N.metaKey||N.ctrlKey)&&(N.preventDefault(),Rt())},[Rt]),Pt=B.current.top+V.current.y,Xt=B.current.left+V.current.x,oe=qa(Pt,Xt);return Te(_i,{children:[zt("div",{"data-devtools":"thread-panel-backdrop",onMouseDown:N=>{N.target===N.currentTarget&&s()},style:{position:"fixed",inset:0,zIndex:9999}}),Te("div",{ref:Y,style:b(m({},Qu),{height:oe,position:"fixed",top:Pt,left:Xt,zIndex:1e4}),"data-devtools":"thread-panel",children:[Te("div",{ref:q,style:b(m({},tp),{backgroundColor:o,color:"#ffffff",cursor:"grab",userSelect:"none",WebkitUserSelect:"none"}),children:[zt("span",{children:"Conversation"}),zt("button",{onClick:s,style:{background:"none",border:"none",cursor:"pointer",fontSize:16,color:"#ffffff",padding:"0 4px",lineHeight:1},children:"\xD7"})]}),zt("style",{dangerouslySetInnerHTML:{__html:np}}),Te("div",{ref:Z,style:ep,"data-devtools":"thread-panel-messages",children:[x&&zt("div",{style:{padding:16,color:"#9ca3af",textAlign:"center"},children:"Loading..."}),!x&&h.length===0&&!n&&zt("div",{style:{padding:16,color:"#9ca3af",textAlign:"center"},children:"No messages yet."}),h.map((N,rt)=>{let Ft=N.role==="human",ut=Ft?N.replyToQuestion||N.feedbackSummary||"(annotation)":Qa(N.responseText||""),jt=Ft?void 0:N.question,kt=!Ft&&N.resolutions&&N.resolutions.length>0,z=!Ft&&N.toolsUsed&&N.toolsUsed.length>0;if(!ut&&!jt&&!kt)return null;let ot=rt===h.length-1;return Te("div",{style:{padding:"8px 16px",borderBottom:"1px solid rgba(0, 0, 0, 0.04)",opacity:ot?1:.5},children:[Te("div",{style:{display:"flex",alignItems:"center",gap:4,marginBottom:4},children:[!Ft&&zt(tl,{size:11}),zt("span",{style:{fontWeight:600,fontSize:11,color:Ft?o:"#6b7280"},children:Ft?"You":"Claude Code"}),zt("span",{style:{fontSize:10,color:"#9ca3af",marginLeft:"auto"},children:rp(N.timestamp)})]}),ut&&zt("div",{style:{lineHeight:1.5,wordBreak:"break-word"},children:Ft?ut:hr(ut)}),jt&&zt("div",{style:{marginTop:ut?4:0,lineHeight:1.5,wordBreak:"break-word"},children:hr(jt)}),(z||kt)&&Te("div",{style:{marginTop:ut||jt?6:0,padding:"4px 8px",backgroundColor:"rgba(0, 0, 0, 0.03)",fontSize:11,lineHeight:1.5,color:"#6b7280"},children:[z&&zt("div",{style:{fontFamily:"ui-monospace, SFMono-Regular, Menlo, monospace",fontSize:10},children:N.toolsUsed.map((it,yt)=>zt("div",{children:it},yt))}),kt&&N.resolutions.map((it,yt)=>{var bt;let Nt=(bt=it.finalScope)!=null?bt:it.inferredScope,Ct=Nt?`${Nt.breadth} \xB7 ${Nt.target}`:null;return Te("div",{style:{marginTop:z?4:0},children:[zt("span",{style:{color:it.status==="resolved"?"#10b981":"#f59e0b"},children:it.status==="resolved"?"Done":"Needs review"}),Ct&&zt("span",{style:{marginLeft:6,padding:"1px 5px",backgroundColor:"rgba(0, 0, 0, 0.06)",fontSize:10,fontFamily:"ui-monospace, SFMono-Regular, Menlo, monospace"},children:Ct}),it.summary?` \u2014 ${it.summary}`:""]},yt)})]})]},`${N.jobId}-${rt}`)}),l&&d&&d.length>0&&Te("div",{style:{padding:"8px 16px",borderBottom:"1px solid rgba(0, 0, 0, 0.04)"},children:[zt("div",{style:{fontWeight:600,fontSize:11,color:"#6b7280",marginBottom:6},children:"Plan Tasks"}),d.map(N=>{var kt,z;let rt=(kt=l.tasks)==null?void 0:kt.find(ot=>ot.id===N.planTaskId),ut=p&&Object.values(p).some(ot=>ot.annotationIds.includes(N.id))?"running":(z=N.status)!=null?z:"pending",jt=ut==="resolved"?"#10b981":ut==="running"?N.color:ut==="needs_review"?"#f59e0b":"#9ca3af";return Te("div",{style:{display:"flex",alignItems:"flex-start",gap:8,padding:"4px 0",cursor:N.threadId&&u?"pointer":"default"},onClick:()=>{N.threadId&&u&&u(N.threadId)},children:[zt("div",{style:{width:6,height:6,borderRadius:"50%",backgroundColor:jt,marginTop:4,flexShrink:0}}),Te("div",{style:{flex:1,fontSize:11,lineHeight:1.4},children:[zt("div",{children:(rt==null?void 0:rt.instruction)||N.text||N.planTaskId}),zt("div",{style:{color:"#9ca3af",fontSize:10},children:ut})]})]},N.id)})]}),(l==null?void 0:l.status)==="awaiting_approval"&&f&&g&&Te("div",{style:{padding:"8px 16px",borderBottom:"1px solid rgba(0, 0, 0, 0.04)"},children:[Te("div",{style:{fontWeight:600,fontSize:12},children:[(ct=d==null?void 0:d.length)!=null?ct:0," task",((ge=d==null?void 0:d.length)!=null?ge:0)!==1?"s":""," planned"]}),zt("div",{style:{color:"#6b7280",fontSize:11,marginTop:2,marginBottom:8},children:"Review annotations, then approve to start workers"}),Te("div",{style:{display:"flex",gap:8},children:[zt("button",{onClick:f,style:{padding:"5px 14px",fontSize:11,fontWeight:600,fontFamily:Se,backgroundColor:"#1f2937",color:"#ffffff",border:"none",cursor:"pointer"},children:"Approve"}),zt("button",{onClick:g,style:{padding:"5px 14px",fontSize:11,fontWeight:600,fontFamily:Se,backgroundColor:"transparent",color:"#6b7280",border:"1px solid rgba(0, 0, 0, 0.1)",cursor:"pointer"},children:"Dismiss"})]})]}),n&&Te("div",{style:{padding:"8px 16px",borderBottom:"1px solid rgba(0, 0, 0, 0.04)"},children:[Te("div",{style:{display:"flex",alignItems:"center",gap:4,marginBottom:4},children:[zt(tl,{size:11}),zt("span",{style:{fontWeight:600,fontSize:11,color:"#6b7280"},children:"Claude Code"}),zt("span",{style:{marginLeft:"auto"},children:zt(ap,{color:o})})]}),Ht.map((N,rt)=>{if(N.kind==="tool")return zt("div",{style:{paddingLeft:12,fontSize:11,color:"#9ca3af",fontFamily:"ui-monospace, SFMono-Regular, Menlo, monospace",lineHeight:1.6},children:N.label},rt);if(N.kind==="thinking")return zt("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:N.text},rt);let Ft=Qa(N.text);return Ft?zt("div",{style:{paddingLeft:12,marginTop:2,marginBottom:2,lineHeight:1.5,wordBreak:"break-word"},children:hr(Ft)},rt):null})]})]}),c&&Te("div",{style:op,children:[T.length>0&&Te("div",{style:{fontSize:11,color:"#6b7280",marginBottom:4,display:"flex",alignItems:"center",gap:4},children:[Te("span",{children:[T.length," image",T.length>1?"s":""," attached"]}),zt("button",{onClick:()=>C([]),style:{background:"none",border:"none",cursor:"pointer",fontSize:11,color:"#9ca3af",padding:"0 2px"},children:"\xD7"})]}),zt("textarea",{value:R,onChange:N=>A(N.target.value),onKeyDown:It,onPaste:j,placeholder:"Reply... (Cmd+Enter to send)",style:{width:"100%",minHeight:60,padding:4,fontSize:12,fontFamily:Se,backgroundColor:"rgba(0, 0, 0, 0.03)",color:"#1f2937",border:"1px solid rgba(0, 0, 0, 0.1)",borderRadius:0,outline:"none",resize:"vertical",lineHeight:1.4,boxSizing:"border-box"}}),zt("div",{style:{display:"flex",justifyContent:"flex-end",marginTop:6},children:zt("button",{onClick:Rt,disabled:!R.trim(),style:{padding:"5px 14px",fontSize:11,fontFamily:Se,fontWeight:600,backgroundColor:R.trim()?o:"rgba(0,0,0,0.1)",color:R.trim()?"#ffffff":"rgba(0,0,0,0.3)",border:"none",cursor:R.trim()?"pointer":"default"},children:"Send \u2318\u23CE"})})]})]})]})}import{Fragment as hp,jsx as zo,jsxs as yp}from"react/jsx-runtime";var nl=dp(null),pp="http://localhost:1111",Wi="devtools-provider",Yi="devtools-model",ji="devtools-open-thread-id",Gi="devtools-active-plan",Vi=[{id:"claude-opus-4-6",label:"Opus 4.6"},{id:"claude-sonnet-4-6",label:"Sonn 4.6"}],Xi=[{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"}];function fp(t,e,o){let n=t==="codex"?Xi:Vi;return Math.min(o,(e==="codex"?Xi:Vi).length-1)}function gp({children:t,enabled:e=process.env.NODE_ENV==="development",bridgeUrl:o=pp}){var ne,G,et,ht,St;let[n,r]=Ls(),i=Ms(o),a=tn(new Map),[s,c]=Je(()=>typeof window=="undefined"?"claude":localStorage.getItem(Wi)||"claude"),[l,d]=Je(()=>{if(typeof window=="undefined")return 0;let y=localStorage.getItem(Yi);return y&&parseInt(y,10)||0}),[p,u]=Je(["claude","codex"]),[f,g]=Je({}),[h,S]=Je(!1);Me(()=>{i.isConnected&&ms(o).then(y=>{if(!y)return;let E=Object.entries(y.providers).filter(([,lt])=>lt.available).map(([lt])=>lt);E.length>0&&u(E);let W={};for(let[lt,Ot]of Object.entries(y.providers))Ot.mcp&&(W[lt]=Ot.mcp);g(W),Object.values(W).every(lt=>lt.found)&&S(!1)})},[i.isConnected,o]),Me(()=>{if(p.length>0&&!p.includes(s)){let y=p[0];c(y),localStorage.setItem(Wi,y)}},[p,s]);let x=s==="codex"?Xi:Vi,L=(ne=x[l])!=null?ne:x[0],R=Ne(y=>{let E=s;c(y),localStorage.setItem(Wi,y);let W=fp(E,y,l);d(W),localStorage.setItem(Yi,String(W))},[s,l]),A=Ne(y=>{d(y),localStorage.setItem(Yi,String(y))},[]),T=Ne(async()=>{let y=await Ss(o);if(!y)return;let E={};for(let[W,xt]of Object.entries(y.capabilities.providers))xt.mcp&&(E[W]=xt.mcp);g(E),y.results.some(W=>W.installed)&&S(!0)},[o]),[C,Z]=Je(new Set),[Y,q]=Je(null),[tt,B]=Je(null),[V,Q]=Je(null),[Mt,dt]=Je(null);Me(()=>{i.isConnected&&oo(o).then(y=>{y!=null&&y.components&&Z(new Set(Object.keys(y.components)))})},[i.isConnected,o]);let vt=Ne(async y=>{let E=[];for(let W of y)try{(await ws(W,o)).added&&E.push(W)}catch(xt){console.error("[Popmelt] Failed to add component to model:",W,xt)}E.length>0&&(Z(W=>{let xt=new Set(W);for(let lt of E)xt.add(lt);return xt}),q(E[E.length-1]))},[o]),Dt=Ne(y=>{q(y)},[]),Ht=Ne(()=>{oo(o).then(y=>{y!=null&&y.components&&Z(new Set(Object.keys(y.components)))})},[o]),Rt=Ne(async y=>{try{(await ks(y,o)).removed&&Z(W=>{let xt=new Set(W);return xt.delete(y),xt})}catch(E){console.error("[Popmelt] Failed to remove component from model:",E)}},[o]),j=Ne((y,E)=>{r({type:"MODIFY_SPACING_TOKEN",payload:y}),r({type:"ADD_SPACING_TOKEN_CHANGE",payload:E})},[r]),It=Ne((y,E)=>{r({type:"DELETE_SPACING_TOKEN",payload:{tokenPath:y,originalValue:E}})},[r]),[Pt,Xt]=Je(0),oe=tn([]);Me(()=>{let y=oe.current,E=n.spacingTokenMods;oe.current=E;let W=new Map(y.map(Ot=>[Ot.tokenPath,Ot])),xt=new Map(E.map(Ot=>[Ot.tokenPath,Ot])),lt=!1;for(let[Ot,st]of xt){let _t=W.get(Ot);if(!(_t&&_t.currentValue===st.currentValue)){lt=!0,st.currentValue==="__deleted__"?Cs(Ot,o).catch(mt=>console.error("[Popmelt] Failed to sync token delete:",mt)):Sr(Ot,st.currentValue,o).catch(mt=>console.error("[Popmelt] Failed to sync token update:",mt));for(let mt of st.targets){let Bt=document.querySelector(mt.selector);if(Bt)if(st.currentValue==="__deleted__")Bt.style.removeProperty(mt.property);else{let ce=st.currentPx;ce>0&&Bt.style.setProperty(mt.property,`${ce}px`,"important")}}}}for(let[Ot,st]of W)if(!xt.has(Ot)){lt=!0,Sr(Ot,st.originalValue,o).catch(_t=>console.error("[Popmelt] Failed to restore token on undo:",_t));for(let _t of st.targets){let mt=document.querySelector(_t.selector);mt&&mt.style.removeProperty(_t.property)}}lt&&Xt(Ot=>Ot+1)},[n.spacingTokenMods,o]);let[ct,ge]=Je(()=>typeof window=="undefined"?null:localStorage.getItem(ji)||null),[N,rt]=Je(()=>{if(typeof window=="undefined")return null;try{let y=localStorage.getItem(Gi);return y?JSON.parse(y):null}catch(y){return null}});Me(()=>{ct?localStorage.setItem(ji,ct):localStorage.removeItem(ji)},[ct]),Me(()=>{N?localStorage.setItem(Gi,JSON.stringify(N)):localStorage.removeItem(Gi)},[N]);let Ft="popmelt-in-flight-jobs",[ut,jt]=Je(()=>{try{let y=sessionStorage.getItem(Ft);return y?JSON.parse(y):{}}catch(y){return{}}});Me(()=>{try{Object.keys(ut).length>0?sessionStorage.setItem(Ft,JSON.stringify(ut)):sessionStorage.removeItem(Ft)}catch(y){}},[ut]);let kt=tn(!1);Me(()=>{if(kt.current||n.annotations.length===0)return;kt.current=!0;let y=new Set;for(let W of Object.values(ut))for(let xt of W.annotationIds)y.add(xt);let E=n.annotations.filter(W=>y.has(W.id)?!1:!!(W.status==="in_flight"||(W.status==="pending"||!W.status)&&(W.captured||W.threadId))).map(W=>W.id);E.length>0&&r({type:"SET_ANNOTATION_STATUS",payload:{ids:E,status:"dismissed"}}),N&&(N.status==="planning"||N.status==="executing"||N.status==="reviewing")&&Object.keys(ut).length===0&&rt(null)},[n.annotations,ut,r,N]);let z=Co(()=>{let y=new Set;for(let E of Object.values(ut))for(let W of E.annotationIds)y.add(W);return y},[ut]),ot=Co(()=>{let y=new Set;for(let E of Object.values(ut))for(let W of E.styleSelectors)y.add(W);return y},[ut]),it=Co(()=>{let y=new Map;for(let E of Object.values(ut)){for(let W of E.styleSelectors)y.set(W,E.color);for(let W of E.annotationIds){let xt=n.annotations.find(lt=>lt.id===W);if(xt&&(xt.linkedSelector&&y.set(xt.linkedSelector,E.color),xt.groupId))for(let lt of n.annotations)lt.groupId===xt.groupId&<.linkedSelector&&y.set(lt.linkedSelector,E.color)}}return y},[ut,n.annotations]),yt=tn(n.annotations);yt.current=n.annotations;let Nt=tn(n.styleModifications);Nt.current=n.styleModifications;let Ct=tn(ut);Ct.current=ut,Me(()=>{let y=null,E=()=>{var _t,mt;if(Object.keys(Ct.current).length>0)return;let xt=yt.current,lt=Nt.current,Ot=[],st=[];for(let Bt of xt){if(!Bt.linkedSelector||!Bt.linkedSelector.startsWith("[data-pm=")||Bt.captured||Bt.status&&Bt.status!=="pending")continue;let ce=document.querySelector(Bt.linkedSelector);!ce&&((mt=(_t=Bt.elements)==null?void 0:_t[0])!=null&&mt.selector)&&(ce=document.querySelector(Bt.elements[0].selector)),ce||Ot.push(Bt.linkedSelector)}for(let Bt of lt)document.querySelector(Bt.selector)||st.push(Bt.selector);(Ot.length>0||st.length>0)&&r({type:"CLEANUP_ORPHANED",payload:{linkedSelectors:Ot,styleSelectors:st}})},W=new MutationObserver(xt=>{xt.some(lt=>lt.removedNodes.length>0)&&(y&&clearTimeout(y),y=setTimeout(E,3e3))});return W.observe(document.body,{childList:!0,subtree:!0}),()=>{W.disconnect(),y&&clearTimeout(y)}},[r]),Me(()=>{i.lastCompletedJobId&&i.lastCompletedJobId in ut&&jt(y=>{var xt;let lt=y,{[xt=i.lastCompletedJobId]:E}=lt;return Fn(lt,[jo(xt)])})},[i.lastCompletedJobId]);let bt=tn(new Set);Me(()=>{let y=i.events.filter(E=>E.type==="done"&&E.data.resolutions);for(let E of y){let W=E.data.jobId;bt.current.has(W)||(bt.current.add(W),Array.isArray(E.data.resolutions)&&r({type:"APPLY_RESOLUTIONS",payload:{resolutions:E.data.resolutions,threadId:E.data.threadId}}))}},[i.events,r]);let pe=tn(0);Me(()=>{let y=i.incrementalResolutions;if(y.length<=pe.current)return;let E=y.slice(pe.current);pe.current=y.length,r({type:"APPLY_RESOLUTIONS",payload:{resolutions:E}})},[i.incrementalResolutions,r]),Me(()=>{i.incrementalResolutions.length===0&&(pe.current=0)},[i.incrementalResolutions.length]);let Gt=tn(i.status);Me(()=>{let y=Gt.current;Gt.current=i.status,y==="disconnected"&&i.status==="idle"&&jt({})},[i.status]);let ie=Ne(async()=>{let y=document.getElementById("devtools-canvas");if(!y)return!1;let E=await zr(document.body,y,n.annotations);if(E.length===0)return!1;let W=await js(E,n.annotations,n.styleModifications);return W&&r({type:"MARK_CAPTURED"}),W},[n.annotations,n.styleModifications,r]),Ie=Ne(async y=>{var E;try{let W=n.annotations.filter(Vt=>{var Ue;return((Ue=Vt.status)!=null?Ue:"pending")==="pending"}),xt=await or(document.body,W);if(!xt)return!1;let lt=Ws(),Ot=n.styleModifications.filter(Vt=>!Vt.captured),st=(E=n.inspectedElement)==null?void 0:E.info,mt=W.length>0||Ot.length>0||!!st?JSON.stringify(er(W,Ot,st)):void 0,{planId:Bt,threadId:ce}=await ys(xt,y,o,s,L.id,window.location.href,{width:window.innerWidth,height:window.innerHeight},lt,mt);if(rt({planId:Bt,threadId:ce,goal:y,status:"planning"}),ce){let Vt=n.annotations.filter(Ue=>{var rn;return Ue.type==="text"&&((rn=Ue.status)!=null?rn:"pending")==="pending"}).map(Ue=>Ue.id);Vt.length>0&&r({type:"SET_ANNOTATION_THREAD",payload:{ids:Vt,threadId:ce}})}return r({type:"MARK_CAPTURED"}),ce&&ge(ce),!0}catch(W){return console.error("[Pare] Failed to send plan:",W),!1}},[o,s,L.id,n.annotations,n.styleModifications,n.inspectedElement,r]),ee=Ne(async y=>{let E=N==null?void 0:N.planId;if(!E)return;let W=n.activeColor.match(/oklch\([^)]*\s+([\d.]+)\s*\)/),xt=W!=null&&W[1]?parseFloat(W[1]):29,lt=y.length>1?360/y.length:0;for(let Ot=0;Ot<y.length;Ot++){let st=y[Ot],_t=(xt+Ot*lt)%360,mt=`oklch(0.628 0.258 ${Math.round(_t)})`,Bt=st.region.y+st.region.height/2,ce=window.innerHeight;(Bt<window.scrollY||Bt>window.scrollY+ce)&&(window.scrollTo({top:Math.max(0,Bt-ce/2),behavior:"instant"}),await new Promise(fn=>requestAnimationFrame(()=>requestAnimationFrame(()=>fn()))));let Vt=Er(st.region),Ue=Math.random().toString(36).substring(2,9),rn=Vt?{x:Vt.rect.left+window.scrollX,y:Vt.rect.top+window.scrollY,width:Vt.rect.width,height:Vt.rect.height}:st.region;r({type:"ADD_PLAN_ANNOTATION",payload:{groupId:Ue,planId:E,planTaskId:st.id,instruction:st.instruction,region:rn,color:mt,linkedSelector:Vt==null?void 0:Vt.selector,elements:Vt?[Vt.info]:void 0}}),Ot<y.length-1&&await new Promise(fn=>setTimeout(fn,200))}},[N==null?void 0:N.planId,n.activeColor,r]),_e=Ne((y,E)=>{let W=a.current.get(y)||[];a.current.set(y,[...W,...E])},[]),Ut=Ne(async()=>{let y=document.getElementById("devtools-canvas");if(!y)return!1;let E=n.annotations.filter(mt=>{var Bt;return((Bt=mt.status)!=null?Bt:"pending")==="pending"}),W=n.spacingTokenChanges.filter(mt=>!mt.captured);if(E.length===0&&n.styleModifications.filter(mt=>!mt.captured).length===0&&W.length===0)return!1;let xt=await zr(document.body,y,n.annotations);if(xt.length===0)return!1;let lt=await nr(xt);if(!lt)return!1;let Ot=er(E,n.styleModifications,void 0,W.length>0?W:void 0),st=JSON.stringify(Ot),_t=new Map;for(let mt of E){let Bt=a.current.get(mt.id);if(Bt&&Bt.length>0&&_t.set(mt.id,Bt),mt.groupId){for(let ce of E)if(ce.groupId===mt.groupId&&ce.id!==mt.id){let Vt=a.current.get(ce.id);Vt&&Vt.length>0&&_t.set(ce.id,Vt)}}}try{let mt=Hr(n.activeColor),{jobId:Bt,threadId:ce}=await hs(lt,st,o,mt,s,L.id,_t.size>0?_t:void 0);for(let Ze of _t.keys())a.current.delete(Ze);let Vt=E.map(Ze=>Ze.id),Ue=n.styleModifications.filter(Ze=>!Ze.captured).map(Ze=>Ze.selector);jt(Ze=>b(m({},Ze),{[Bt]:{annotationIds:Vt,styleSelectors:Ue,color:n.activeColor,threadId:ce}})),r({type:"MARK_CAPTURED"}),ce&&Vt.length>0&&r({type:"SET_ANNOTATION_THREAD",payload:{ids:Vt,threadId:ce}});let rn=n.activeColor.match(/oklch\([^)]*\s+([\d.]+)\s*\)/),$n=((rn!=null&&rn[1]?parseFloat(rn[1]):29)+60)%360;return r({type:"SET_COLOR",payload:`oklch(0.628 0.258 ${$n})`}),!0}catch(mt){return console.error("[Pare] Failed to send to bridge:",mt),!1}},[n.annotations,n.styleModifications,n.spacingTokenChanges,n.activeColor,r,o,s,L.id]),me=Ne(async(y,E,W)=>{try{let xt=Hr(n.activeColor),{jobId:lt}=await Es(y,E,o,xt,s,L.id,W);jt(st=>b(m({},st),{[lt]:{annotationIds:[],styleSelectors:[],color:n.activeColor,threadId:y}}));let Ot=n.annotations.filter(st=>st.threadId===y&&(st.status==="waiting_input"||st.status==="resolved"||st.status==="needs_review"));Ot.length>0&&(r({type:"SET_ANNOTATION_STATUS",payload:{ids:Ot.map(st=>st.id),status:"in_flight"}}),jt(st=>{let _t=st[lt];return _t?b(m({},st),{[lt]:b(m({},_t),{annotationIds:[..._t.annotationIds,...Ot.map(mt=>mt.id)]})}):st})),i.dismissQuestion(y)}catch(xt){console.error("[Pare] Failed to send reply:",xt)}},[n.activeColor,n.annotations,o,i.dismissQuestion,r,s,L.id]),je=Ne(async()=>{if(!(!N||!N.planId))try{await bs(N.planId,o),rt(st=>st?b(m({},st),{status:"executing"}):null);let y=await or(document.body);if(!y)return;let E=n.annotations.filter(st=>{var _t;return st.planId===N.planId&&st.type!=="text"&&((_t=st.status)!=null?_t:"pending")==="pending"}),W=E.map(st=>{var fn,$n,Ze;let _t=st.groupId?n.annotations.find(Tn=>Tn.groupId===st.groupId&&Tn.type==="text"):void 0,mt=(fn=st.points[0])!=null?fn:{x:0,y:0},Bt=($n=st.points[1])!=null?$n:mt,ce=Math.min(mt.x,Bt.x),Vt=Math.min(mt.y,Bt.y),Ue=Math.abs(Bt.x-mt.x)||100,rn=Math.abs(Bt.y-mt.y)||100;return{planTaskId:st.planTaskId||st.id,annotationId:st.id,instruction:(_t==null?void 0:_t.text)||st.text||"No instruction",region:{x:ce,y:Vt,width:Ue,height:rn},linkedSelector:st.linkedSelector,elements:(Ze=st.elements)==null?void 0:Ze.map(Tn=>({selector:Tn.selector,reactComponent:Tn.reactComponent}))}});if(W.length===0)return;let{jobId:xt}=await vs(y,N.planId,W,o,s,L.id),lt=[],Ot=new Set;for(let st of E)if(Ot.has(st.id)||(Ot.add(st.id),lt.push(st.id)),st.groupId)for(let _t of n.annotations)_t.groupId===st.groupId&&!Ot.has(_t.id)&&(Ot.add(_t.id),lt.push(_t.id));jt(st=>b(m({},st),{[xt]:{annotationIds:lt,styleSelectors:[],color:n.activeColor,planId:N.planId}})),r({type:"SET_ANNOTATION_STATUS",payload:{ids:lt,status:"in_flight"}}),r({type:"MARK_CAPTURED"})}catch(y){console.error("[Pare] Failed to approve plan:",y)}},[N,n.annotations,n.activeColor,o,s,L.id,r]),he=Ne(()=>{if(rt(null),N!=null&&N.planId){let y=n.annotations.filter(E=>E.planId===N.planId);for(let E of y)r({type:"DELETE_ANNOTATION",payload:{id:E.id}})}},[N,n.annotations,r]),Ke=tn(new Set);Me(()=>{for(let y of i.pendingQuestions){if(Ke.current.has(y.jobId))continue;Ke.current.add(y.jobId);let E=y.annotationIds&&y.annotationIds.length>0?y.annotationIds:void 0;!E&&y.threadId&&(E=n.annotations.filter(W=>W.threadId===y.threadId).map(W=>W.id)),E&&E.length>0&&r({type:"SET_ANNOTATION_QUESTION",payload:{ids:E,question:y.question,threadId:y.threadId}})}},[i.pendingQuestions,r,n.annotations]);let Ge=tn(new Set),$e=tn(null);Me(()=>{for(let y of i.pendingPlans){if(Ge.current.has(y.planId))continue;Ge.current.add(y.planId);let E=y.tasks.length===1;rt(W=>(W==null?void 0:W.planId)!==y.planId?W:b(m({},W),{tasks:y.tasks,threadId:y.threadId,status:E?"executing":"awaiting_approval"})),ee(y.tasks).then(()=>{E&&($e.current=y.planId)}),i.dismissPlan(y.planId)}},[i.pendingPlans]),Me(()=>{!$e.current||!N||N.planId!==$e.current||n.annotations.filter(E=>E.planId===N.planId&&E.type!=="text").length===0||($e.current=null,je())},[N,n.annotations,je]),Me(()=>{for(let y of i.planReviews)!N||N.planId!==y.planId||y.verdict==="pass"&&rt(E=>E?b(m({},E),{status:"done"}):null)},[i.planReviews,N]);let en=tn(new Set);Me(()=>{!N||N.status!=="executing"||en.current.has(N.planId)||Object.entries(ut).filter(([W,xt])=>xt.planId===N.planId).length>0||n.annotations.filter(W=>W.planId===N.planId&&(W.status==="resolved"||W.status==="needs_review")).length===0||(en.current.add(N.planId),(async()=>{try{rt(xt=>xt?b(m({},xt),{status:"reviewing"}):null);let W=await or(document.body);if(!W)return;await xs(N.planId,W,o,s,L.id)}catch(W){console.error("[Pare] Failed to trigger review:",W)}})())},[N,ut,n.annotations,o,s,L.id]);let We=Co(()=>{if(i.activeJobId&&i.activeJobId in ut)return ut[i.activeJobId].color;let y=Object.values(ut);return y.length>0?y[y.length-1].color:void 0},[i.activeJobId,ut]),ke=Ne(y=>{ge(y)},[]);Me(()=>{n.activeTool==="model"&&ct&&ge(null)},[n.activeTool]);let K=tn(null);Me(()=>{n.isAnnotating?K.current&&(ge(K.current),K.current=null):ct&&(K.current=ct,ge(null))},[n.isAnnotating]);let wt=Co(()=>{if(!ct)return null;for(let[y,E]of Object.entries(ut))if(E.threadId===ct)return y;return null},[ct,ut]),[qt,ye]=Je(!1),[Ce,de]=Je(0),te=tn(null),nn=Ne(y=>{y?(te.current&&(clearTimeout(te.current),te.current=null),ye(!0)):te.current=setTimeout(()=>{ye(!1),te.current=null},150)},[]),on=Ne(()=>{de(y=>y+1),i.clearEvents()},[i.clearEvents]);Me(()=>()=>{te.current&&clearTimeout(te.current)},[]);let En=Co(()=>({isEnabled:e}),[e]);return e?yp(nl.Provider,{value:En,children:[t,zo(Fa,{state:n,dispatch:r,onScreenshot:ie,inFlightAnnotationIds:z,inFlightStyleSelectors:ot,inFlightSelectorColors:it,onAttachImages:_e,onReply:i.isConnected?me:void 0,onViewThread:i.isConnected?ke:void 0,activePlan:N,onModelComponentsAdd:i.isConnected?vt:void 0,onModelComponentFocus:i.isConnected?Dt:void 0,onModelComponentHover:B,modelComponentNames:C,modelPanelHoveredComponent:V,modelSpacingTokenHover:Mt}),zo(Ja,{state:n,dispatch:r,onScreenshot:ie,onSendToClaude:i.isConnected?Ut:void 0,onPlanGoal:i.isConnected?Ie:void 0,hasActiveJobs:Object.keys(ut).length>0||i.activeJobIds.length>0,activeJobColor:We,onCrosshairHover:nn,onClear:on,provider:s,onProviderChange:i.isConnected&&p.length>1?R:void 0,availableProviders:p,modelIndex:l,modelCount:x.length,modelLabel:L.label,onModelChange:i.isConnected?A:void 0,onViewThread:i.isConnected?ke:void 0,isThreadPanelOpen:ct!==null,activePlan:N,mcpStatus:f,onInstallMcp:i.isConnected?T:void 0,mcpJustInstalled:h,bridgeUrl:o,modelSelectedComponent:Y,modelCanvasHoveredComponent:tt,onModelComponentHover:Q,onSpacingTokenHover:dt,onModifySpacingToken:i.isConnected?j:void 0,onDeleteSpacingToken:i.isConnected?It:void 0,modelRefreshKey:Pt,onModelComponentAdded:Ht,onModelComponentRemoved:Rt}),ct&&i.isConnected&&zo(el,{threadId:ct,bridgeUrl:o,accentColor:(et=(G=n.annotations.find(y=>y.threadId===ct))==null?void 0:G.color)!=null?et:n.activeColor,isStreaming:wt!==null,streamingResponse:wt&&(ht=i.jobResponses[wt])!=null?ht:"",streamingThinking:wt&&(St=i.jobThinking[wt])!=null?St:"",streamingEvents:wt?i.events.filter(y=>y.data.jobId===wt):[],onClose:()=>ge(null),onReply:me,activePlan:N,planAnnotations:N?n.annotations.filter(y=>y.planId===N.planId&&y.type!=="text"):void 0,inFlightJobs:ut,onViewThread:ke,onApprovePlan:(N==null?void 0:N.status)==="awaiting_approval"?je:void 0,onDismissPlan:(N==null?void 0:N.status)==="awaiting_approval"?he:void 0}),i.isConnected&&zo(Ua,{bridge:i,bridgeUrl:o,inFlightJobs:ut,isVisible:qt||i.lastResponseText!==null||i.activeJobIds.length>0,onHover:nn,clearSignal:Ce,onReply:me,onViewThread:ke})]}):zo(hp,{children:t})}function mp(){let t=up(nl);if(!t)throw new Error("usePopmelt must be used within PopmeltProvider");return t}export{gp as PopmeltProvider,mp as usePopmelt};
|