@popmelt.com/core 0.5.12 → 0.5.13

package/README.md

@@ -52,19 +52,51 @@ export default function App() {
 
 ### Backend
 
-Start the bridge server so Popmelt can talk to Claude/Codex. In Next.js, `instrumentation.ts` is the cleanest place:
+Start the bridge server so Popmelt can talk to Claude/Codex. Use the plugin for your framework:
+
+**Next.js** — wrap your config:
 
 ```ts
-// instrumentation.ts (Next.js)
-export async function register() {
-  if (process.env.NODE_ENV === 'development' && process.env.NEXT_RUNTIME === 'nodejs') {
-    const { startPopmelt } = await import('@popmelt.com/core/server');
-    await startPopmelt({ port: 1111 });
-  }
-}
+// next.config.ts
+import { withPopmelt } from '@popmelt.com/core/next';
+export default withPopmelt(nextConfig);
+```
+
+**Vite**:
+
+```ts
+// vite.config.ts
+import { popmelt } from '@popmelt.com/core/vite';
+export default defineConfig({ plugins: [popmelt()] });
+```
+
+**Astro**:
+
+```ts
+// astro.config.mjs
+import { popmelt } from '@popmelt.com/core/astro';
+export default defineConfig({ integrations: [popmelt()] });
+```
+
+**Other frameworks** — call `startPopmelt()` in your dev server startup:
+
+```ts
+import { startPopmelt } from '@popmelt.com/core/server';
+await startPopmelt();
 ```
 
-For other frameworks, call `startPopmelt()` anywhere in your dev server startup.
+### CLI
+
+Run the bridge standalone if you prefer not to integrate it into your dev server:
+
+```bash
+# standalone bridge server
+npx @popmelt.com/core bridge
+
+# bridge + dev server together
+npx @popmelt.com/core wrap -- next dev
+npx @popmelt.com/core wrap -- vite
+```
 
 ### That's it
 
@@ -102,21 +134,18 @@ Switch to the Handle tool (`H`) and hover any element to see draggable handles f
 
 All changes apply as inline styles instantly. Hold Cmd/Alt and swipe on a flex container to cycle `justify-content` or `flex-direction`; hold Shift and swipe to cycle `align-items`. Cmd+Z / Cmd+Shift+Z to undo/redo any change.
 
+Right-click any element in Handle mode to open the **style panel** for full control over layout (flex/grid direction, alignment, gap, sizing), typography (size, weight, line-height, letter-spacing, color), backgrounds, borders, and effects. Every modification is tracked and included in the feedback sent to your AI.
+
 <p align="center">
   <img src="src/assets/bar - handle.png" alt="Handle tool guidance" width="360" style="border-radius: 12px;" />
 </p>
 
-### Style panel
-
-Right-click any element with the Comment tool to open the style panel. Edit layout (flex/grid direction, alignment, gap, sizing), typography (size, weight, line-height, letter-spacing, color), backgrounds, borders, and effects. Every modification is tracked and included in the feedback sent to your AI.
-
 ### AI Collaboration
 
-Cmd+Enter captures a full-page screenshot with your annotations baked in, bundles it with structured feedback (element selectors, style diffs, annotation text), and sends it to Claude or Codex via a local bridge server. Your AI reads the screenshot, sees exactly what you marked up, and edits your code. Cmd+C copies the screenshot to your clipboard instead.
+Cmd+Enter captures an annotated screenshot with your annotations baked in, bundles it with structured feedback (element selectors, style diffs, annotation text), and sends it to Claude or Codex via a local bridge server. Your AI reads the screenshot, sees exactly what you marked up, and edits your code. Cmd+C copies the screenshot to your clipboard instead.
 
 - **Threaded conversations** — follow-up annotations on the same element continue the existing thread. Your AI sees prior context without re-explaining.
 - **Questions** — if your AI needs clarification, it asks. A badge appears on the annotation; reply inline and the conversation continues.
-- **Multi-task plans** — prefix your annotation with `/plan` and your AI decomposes the work into spatial tasks, each pinned to a region of the UI. Approve and they execute in sequence.
 - **Provider switching** — toggle between Claude (Opus/Sonnet) and Codex at any time. Popmelt handles both.
 
 <p align="center">
@@ -144,14 +173,17 @@ Thread history persists to `.popmelt/threads.json` in your project root for cros
 
 ```ts
 await startPopmelt({
-  port: 1111,            // bridge server port (default: 1111)
+  port: 1111,            // bridge server port (default: 1111, auto-selects 1111–1119 if occupied)
   projectRoot: '.',      // working directory for your AI
   claudePath: 'claude',  // path to Claude CLI binary
-  maxTurns: 10,          // max turns per job
+  provider: 'claude',    // 'claude' | 'codex'
+  maxTurns: 40,          // max turns per job
+  maxBudgetUsd: 1.0,     // spending cap per job
+  timeoutMs: undefined,  // optional job timeout
 });
 ```
 
-Returns `{ port: number, close: () => Promise<void> }`.
+Returns `{ port: number, projectId: string, close: () => Promise<void> }`.
 
 ### `usePopmelt()`
 

package/dist/index.mjs

@@ -7,7 +7,7 @@ var ba=Object.defineProperty,xa=Object.defineProperties;var va=Object.getOwnProp
 `),z=S.clickPoint.y-S.point.y,Y=Math.max(0,Math.min(ie.length-1,Math.floor(z/H))),y=S.clickPoint.x-S.point.x,T=ie[Y]||"",G=0;for(let O=0;O<=T.length;O++){let _=P.measureText(T.substring(0,O)).width;if(_>y){let $=O>0?P.measureText(T.substring(0,O-1)).width:0;G=y-$<_-y?O-1:O;break}G=O}let R=G;for(let O=0;O<Y;O++)R+=(((X=ie[O])==null?void 0:X.length)||0)+1;b.setSelectionRange(R,R)}}}):(he.current=null,Vo.current=null)},[Uo,w]);let eo=Pt(b=>{let S=w.current;if(!S)return{x:0,y:0};let X=S.getBoundingClientRect(),I,P;if("touches"in b&&b.touches[0])I=b.touches[0].clientX,P=b.touches[0].clientY;else if("clientX"in b)I=b.clientX,P=b.clientY;else return{x:0,y:0};return{x:I-X.left+window.scrollX,y:P-X.top+window.scrollY}},[w]),Hn=Pt((b,S,X,I)=>{let P=X.x-S.x,H=X.y-S.y,ie=P*P+H*H;if(ie===0)return Math.sqrt((b.x-S.x)**2+(b.y-S.y)**2)<=I;let z=Math.max(0,Math.min(1,((b.x-S.x)*P+(b.y-S.y)*H)/ie)),Y=S.x+z*P,y=S.y+z*H;return Math.sqrt((b.x-Y)**2+(b.y-y)**2)<=I},[]),Jo=Pt(b=>{for(let X=e.annotations.length-1;X>=0;X--){let I=e.annotations[X];if(!I||Pn.has(I))continue;let P=(I.strokeWidth||3)+4;switch(I.type){case"text":{if(!I.points[0]||!I.text)continue;let H=I.points[0],ie=I.fontSize||12,z=w.current;if(z){let Y=z.getContext("2d");if(Y){Y.font=`${ie}px ${Ft}`;let y=I.text.split(`
 `),T=H.x-St.x,G=so(T),R=G!==void 0?Math.min(400,G):void 0,O=R?$n(Y,y,R):y,_=R?Math.min(R,Math.max(...O.map(Ze=>Y.measureText(Ze).width))):Math.max(...y.map(Ze=>Y.measureText(Ze).width)),$=O.length*(ie*1.4),se=y.length*(ie*1.4),be=$-se;if(b.x>=H.x-4-4&&b.x<=H.x+_+4+4&&b.y>=H.y-4-4-be&&b.y<=H.y+se+4+4)return I}}break}case"rectangle":{if(I.points.length<2)continue;let H=I.points[0],ie=I.points[I.points.length-1],z=Math.min(H.x,ie.x),Y=Math.max(H.x,ie.x),y=Math.min(H.y,ie.y),T=Math.max(H.y,ie.y),G=Hn(b,{x:z,y},{x:Y,y},P),R=Hn(b,{x:z,y:T},{x:Y,y:T},P),O=Hn(b,{x:z,y},{x:z,y:T},P),_=Hn(b,{x:Y,y},{x:Y,y:T},P);if(G||R||O||_)return I;break}case"circle":{if(I.points.length<2)continue;let H=I.points[0],ie=I.points[I.points.length-1],z=(H.x+ie.x)/2,Y=(H.y+ie.y)/2,y=Math.abs(ie.x-H.x)/2,T=Math.abs(ie.y-H.y)/2,G=b.x-z,R=b.y-Y,O=Math.sqrt((G/y)**2+(R/T)**2);if(Math.abs(O-1)*Math.max(y,T)<=P)return I;break}case"line":{if(I.points.length<2)continue;let H=I.points[0],ie=I.points[I.points.length-1];if(Hn(b,H,ie,P))return I;break}case"freehand":{if(I.points.length<2)continue;for(let H=0;H<I.points.length-1;H++){let ie=I.points[H],z=I.points[H+1];if(Hn(b,ie,z,P))return I}break}}}return null},[e.annotations,w,Hn,Pn,St.x]),Zi=Pt(b=>{let S=Jo(b);return(S==null?void 0:S.type)==="text"?S:null},[Jo]),qi=Pt(b=>{if(je.length===0)return null;let S=Ol/2+4;for(let X of je){let I=e.annotations.find(P=>P.id===X);if(!(!I||I.points.length<2)){if(I.type==="line"){let P=I.points[0],H=I.points[I.points.length-1];if(Math.sqrt((b.x-P.x)**2+(b.y-P.y)**2)<=S)return{handle:"start",annotationId:X};if(Math.sqrt((b.x-H.x)**2+(b.y-H.y)**2)<=S)return{handle:"end",annotationId:X};continue}if(I.type==="circle"){let P=I.points[0],H=I.points[I.points.length-1],ie=Math.min(P.x,H.x),z=Math.max(P.x,H.x),Y=Math.min(P.y,H.y),y=Math.max(P.y,H.y),T=(ie+z)/2,G=(Y+y)/2,R=[{handle:"top",x:T,y:Y},{handle:"bottom",x:T,y},{handle:"left",x:ie,y:G},{handle:"right",x:z,y:G}];for(let{handle:O,x:_,y:$}of R)if(Math.sqrt((b.x-_)**2+(b.y-$)**2)<=S)return{handle:O,annotationId:X};continue}if(I.type==="rectangle"||I.type==="freehand"){let P=I.points[0],H=I.points[I.points.length-1],ie,z,Y,y;I.type==="freehand"?(ie=Math.min(...I.points.map(G=>G.x)),z=Math.max(...I.points.map(G=>G.x)),Y=Math.min(...I.points.map(G=>G.y)),y=Math.max(...I.points.map(G=>G.y))):(ie=Math.min(P.x,H.x),z=Math.max(P.x,H.x),Y=Math.min(P.y,H.y),y=Math.max(P.y,H.y));let T=[{corner:"topLeft",x:ie,y:Y},{corner:"topRight",x:z,y:Y},{corner:"bottomLeft",x:ie,y},{corner:"bottomRight",x:z,y}];for(let{corner:G,x:R,y:O}of T)if(Math.sqrt((b.x-R)**2+(b.y-O)**2)<=S)return{handle:G,annotationId:X}}}}return null},[je,e.annotations]);_t(()=>{let b=S=>{if(Fe.current={x:S.clientX+window.scrollX,y:S.clientY+window.scrollY},!k){let X=Zi(Fe.current);Z((X==null?void 0:X.id)||null)}};return window.addEventListener("mousemove",b),()=>window.removeEventListener("mousemove",b)},[k,Zi]);let to=Pt(()=>{var S;if(!k)return;let b=((S=k.images)==null?void 0:S.length)||0;if(k.text.trim()||b>0)if(k.isNew){let X=Qo();t({type:"ADD_TEXT",payload:f({point:k.point,text:k.text||(b>0?`[${b} image${b>1?"s":""}]`:""),fontSize:k.fontSize,id:X,groupId:k.groupId,linkedSelector:k.linkedSelector,linkedAnchor:k.linkedAnchor,elements:k.elements},b>0?{imageCount:b}:{})}),b>0&&k.images&&s&&s(X,k.images)}else t({type:"UPDATE_TEXT",payload:f({id:k.id,text:k.text||(b>0?`[${b} image${b>1?"s":""}]`:"")},b>0?{imageCount:b}:{})}),b>0&&k.images&&s&&s(k.id,k.images);else k.isNew||t({type:"DELETE_ANNOTATION",payload:{id:k.id}});W(null)},[k,t,s]),kn=Pt(b=>{for(let S=0;S<Mi.length-1;S++){let X=Mi[S],I=Mi[S+1];if(b<=(X+I)/2)return X;if(b<I)return I}return Math.round(b/8)*8},[]),Qi=Pt((b,S,X,I)=>{let P=X.top+Math.max(I.top,4),H=X.bottom-Math.max(I.bottom,4),ie=X.left+Math.max(I.left,4),z=X.right-Math.max(I.right,4);if(b<X.left||b>X.right||S<X.top||S>X.bottom)return null;let Y=S<P,y=S>H,T=b<ie,G=b>z;return Y&&T?I.top>=I.left?"top":"left":Y&&G?I.top>=I.right?"top":"right":y&&T?I.bottom>=I.left?"bottom":"left":y&&G?I.bottom>=I.right?"bottom":"right":Y?"top":y?"bottom":T?"left":G?"right":null},[]),es=Pt(b=>{var H,ie;if(!e.isAnnotating)return;if(e.inspectedElement&&e.activeTool==="hand"&&!("button"in b&&b.button===2)){b.preventDefault(),b.stopPropagation(),t({type:"SELECT_ELEMENT",payload:null});return}let S=eo(b),X="shiftKey"in b&&b.shiftKey;if(e.activeTool==="inspector"){if("button"in b&&b.button===2)return;if(ue&&!Te(ue)){let z=Jt(ue),Y=on(ue),y=ue.getBoundingClientRect(),T=ue.getAttribute("data-pm");T||(T=Math.random().toString(36).substring(2,8),ue.setAttribute("data-pm",T));let G=`[data-pm="${T}"]`,R=e.styleModifications.some(be=>{try{return ue.matches(be.selector)}catch(Ze){return!1}}),O=e.annotations.filter(be=>{if(!be.linkedSelector)return!1;try{return ue.matches(be.linkedSelector)}catch(Ze){return!1}}).length,_=(R?1:0)+O,$=y.top>=Vn*(1+_)?"top-left":"bottom-left",se=Dl(y,$,_);we({point:se,linkedSelector:G,linkedAnchor:$,elements:[m(f({},z),{selector:Y})]})}return}if(e.activeTool==="model"){if("button"in b&&b.button===2)return;if(J){let z=J.name;if(g!=null&&g.has(z)){p==null||p(z);return}"shiftKey"in b&&b.shiftKey?fe(y=>{let T=new Map(y);return T.has(z)?T.delete(z):T.set(z,J),T}):te.size===1&&te.has(z)?(d&&d([z]),fe(new Map)):fe(new Map([[z,J]]))}return}if(e.activeTool==="hand"&&rt&&ct){let z=rt,Y=z.getAttribute("data-pm");Y||(Y=Math.random().toString(36).substring(2,8),z.setAttribute("data-pm",Y));let y=on(z),T=`[data-pm="${Y}"]`,G=Jt(z),R=Bo(z),O=S.x-window.scrollX,_=S.y-window.scrollY,$=mt,se=window.getComputedStyle(z).justifyContent,be=0;if($){let Ge=Yn(z).find(Mt=>Mt.axis===ct);be=Ge?ct==="column"?Ge.w:Ge.h:0}ze(z,"transition","none"),ft.current={isDragging:!0,hasMoved:!1,axis:ct,startX:O,startY:_,originalRow:$?be:R.row,originalColumn:$?be:R.column,element:z,elementInfo:m(f({},G),{selector:T}),selector:T,durableSelector:y,isAuto:$,originalJustifyContent:se,visualGap:be},Kt({axis:ct,row:$?be:R.row,column:$?be:R.column});return}if(e.activeTool==="hand"&&ht&&Vt){let z=ht,Y=z.getAttribute("data-pm");Y||(Y=Math.random().toString(36).substring(2,8),z.setAttribute("data-pm",Y));let y=`[data-pm="${Y}"]`,T=Jt(z),{fontSize:G,lineHeight:R}=Oo(z),O=G>0?R/G:1.2,_=S.x-window.scrollX,$=S.y-window.scrollY;ze(z,"transition","none");let se=on(z);ut.current={isDragging:!0,property:Vt,startX:_,startY:$,originalFontSize:G,originalLineHeight:R,originalRatio:O,element:z,elementInfo:m(f({},T),{selector:y}),selector:y,durableSelector:se},Q({property:Vt,fontSize:G,lineHeight:R});return}if(e.activeTool==="hand"&&j&&He){let z=j,Y=z.getAttribute("data-pm");Y||(Y=Math.random().toString(36).substring(2,8),z.setAttribute("data-pm",Y));let y=`[data-pm="${Y}"]`,T=on(z),G=Jt(z),R=jn(z),O=z.getBoundingClientRect(),_=Math.floor(O.height/2),$=S.y-window.scrollY;ze(z,"transition","none"),Gt.current={isDragging:!0,corner:He,startY:$,original:R,maxRadius:_,element:z,elementInfo:m(f({},G),{selector:y}),selector:y,durableSelector:T},vt({corner:He,radius:f({},R)});return}if(e.activeTool==="hand"&&Ne&&A){let z=Ne,Y=z.getAttribute("data-pm");Y||(Y=Math.random().toString(36).substring(2,8),z.setAttribute("data-pm",Y));let y=`[data-pm="${Y}"]`,T=on(z),G=Jt(z),R=uo(z),O=S.x-window.scrollX,_=S.y-window.scrollY;ze(z,"transition","none"),qe.current={isDragging:!0,side:A,startX:O,startY:_,original:R,element:z,elementInfo:m(f({},G),{selector:y}),selector:y,durableSelector:T},Re({side:A,padding:f({},R)});return}let I=qi(S);if(I){let z=e.annotations.find(Y=>Y.id===I.annotationId);if(z&&z.type!=="text"&&((H=z.status)!=null?H:"pending")==="pending"){Lt({annotationId:I.annotationId,handle:I.handle,startPoint:S,originalPoints:[...z.points],hasMoved:!1});return}}let P=Jo(S);if(P&&P.points[0]){if(k&&to(),P.type!=="text"?(Me(P.id,X),P.color&&t({type:"SET_COLOR",payload:P.color})):X||Ye(),a){let z=P.threadId||(P.groupId?(ie=e.annotations.find(Y=>Y.groupId===P.groupId&&Y.threadId))==null?void 0:ie.threadId:void 0);z&&a(z)}et({annotation:P,startPoint:S,hasMoved:!1});return}if(X||Ye(),e.activeTool==="text"){k&&to();let z=Math.random().toString(36).substring(2,9);W({id:z,point:S,text:"",fontSize:12,isNew:!0});return}L(!0),t({type:"START_PATH",payload:S})},[e.isAnnotating,e.activeTool,e.inspectedElement,e.annotations,k,je,ue,Ne,A,j,He,rt,ct,mt,ht,Vt,J,te,g,d,p,a,eo,Jo,qi,t,Me,Ye,to]),ts=Pt(b=>{var X,I;let S=eo(b);if(e.activeTool==="inspector"&&e.isAnnotating){let P=S.x-window.scrollX,H=S.y-window.scrollY,ie=Wn(P,H),z=ie&&Te(ie)?null:ie;z!==ue&&(We(z),lt(z?Jt(z):null));return}if(e.activeTool==="model"&&e.isAnnotating){let P=S.x-window.scrollX,H=S.y-window.scrollY,ie=Wn(P,H);if(ie!==ge.current&&(ge.current=ie,Ce.current=0),ie){let z=nr(ie,Ce.current);V(z)}else V(null);return}if(e.activeTool==="hand"&&e.isAnnotating){let P=S.x-window.scrollX,H=S.y-window.scrollY;ve.current={x:P,y:H},Qe({x:P,y:H});let ie=pe.current.cmd,z=pe.current.shift;if(ft.current.isDragging){let y=ft.current,T=y.element;if(!T)return;if(!y.hasMoved){let _=Math.abs(P-y.startX),$=Math.abs(H-y.startY);if(_<=2&&$<=2)return;y.hasMoved=!0,y.isAuto&&(ze(T,"justify-content","normal"),ze(T,"row-gap",`${y.visualGap}px`),ze(T,"column-gap",`${y.visualGap}px`),Dt(!1))}let G=y.axis,R=y.originalRow,O=y.originalColumn;if(G==="column"){let _=P-y.startX;O=y.originalColumn+_,ie||(R=y.originalRow+_)}else{let _=H-y.startY;R=y.originalRow+_,ie||(O=y.originalColumn+_)}R=Math.max(0,R),O=Math.max(0,O),z&&(R=kn(R),O=kn(O)),R=Math.round(R),O=Math.round(O),ze(T,"row-gap",`${R}px`),ze(T,"column-gap",`${O}px`),Kt({axis:G,row:R,column:O});return}if(Gt.current.isDragging){let y=Gt.current,T=y.element;if(!T)return;let G=H-y.startY,R=y.corner,O=y.original,_=f({},O);if(ie){let $=O[R]+G;$=Math.max(0,Math.min(y.maxRadius,$)),z&&($=kn($)),$=Math.round($),_[R]=$}else{let $=O[R]+G;$=Math.max(0,Math.min(y.maxRadius,$)),z&&($=kn($)),$=Math.round($),_={"top-left":$,"top-right":$,"bottom-right":$,"bottom-left":$}}ze(T,"border-top-left-radius",`${_["top-left"]}px`),ze(T,"border-top-right-radius",`${_["top-right"]}px`),ze(T,"border-bottom-right-radius",`${_["bottom-right"]}px`),ze(T,"border-bottom-left-radius",`${_["bottom-left"]}px`),vt({corner:R,radius:_});return}if(ut.current.isDragging){let y=ut.current,T=y.element;if(!T)return;let G=y.property,R=y.originalFontSize,O=y.originalLineHeight,_=[8,10,11,12,13,14,16,18,20,22,24,28,32,36,40,48,56,64,72,80,96];if(G==="font-size"){let se=P-y.startX;R=y.originalFontSize+se,R=Math.max(1,R)}else{let se=H-y.startY;O=y.originalLineHeight+se,O=Math.max(R,O)}if(z)if(G==="font-size"){let se=_[0],be=Math.abs(R-se);for(let Ze of _){let Ge=Math.abs(R-Ze);Ge<be&&(se=Ze,be=Ge)}R=se}else{let se=R>0?O/R:1.2,be=Math.round(se*2)/2;O=R*Math.max(1,be)}R=Math.round(R),O=Math.round(O*10)/10,ze(T,"font-size",`${R}px`);let $=R>0?Math.round(O/R*1e3)/1e3:1.2;ze(T,"line-height",`${$}`),Q({property:G,fontSize:R,lineHeight:O});return}if(qe.current.isDragging){let y=qe.current,T=y.element;if(!T)return;let G=y.side,R=y.original,O=R.top,_=R.right,$=R.bottom,se=R.left;if(G==="top"){let be=y.startY-H;O=R.top+be,ie||($=R.bottom+be)}else if(G==="bottom"){let be=H-y.startY;$=R.bottom+be,ie||(O=R.top+be)}else if(G==="left"){let be=y.startX-P;se=R.left+be,ie||(_=R.right+be)}else if(G==="right"){let be=P-y.startX;_=R.right+be,ie||(se=R.left+be)}O=Math.max(0,O),_=Math.max(0,_),$=Math.max(0,$),se=Math.max(0,se),z&&(O=kn(O),_=kn(_),$=kn($),se=kn(se)),O=Math.round(O),_=Math.round(_),$=Math.round($),se=Math.round(se),ze(T,"padding",`${O}px ${_}px ${$}px ${se}px`),Re({side:G,padding:{top:O,right:_,bottom:$,left:se}});return}let Y=Wn(P,H);for(;Y&&Y.tagName==="A";)Y=Y.parentElement;{let T=[];Y&&T.push(Y),j&&j!==Y&&T.push(j);let G=null,R=16,O=null;for(let _ of T){let $=_.getBoundingClientRect(),se=jn(_),be=[["top-left",$.left,$.top+se["top-left"]],["top-right",$.right,$.top+se["top-right"]],["bottom-right",$.right,$.bottom-se["bottom-right"]],["bottom-left",$.left,$.bottom-se["bottom-left"]]];for(let[Ze,Ge,Mt]of be){let pt=Math.hypot(P-Ge,H-Mt);pt<R&&(R=pt,G=Ze,O=_)}}if(G&&O){Ee(O),qt(G),Ne&&tt(null),A&&re(null),rt&&gt(null),ct&&Ct(null),Dt(!1),ht&&An(null),Vt&&an(null);return}}j&&Ee(null),He&&qt(null);{let y=[];Y&&ir(Y)&&y.push(Y);let T=(X=Y==null?void 0:Y.parentElement)!=null?X:null;for(;T&&T!==document.body&&y.length<3;)ir(T)&&y.push(T),T=T.parentElement;for(let G of y){let O=Yn(G).find(_=>P>=_.x&&P<=_.x+_.w&&H>=_.y&&H<=_.y+_.h);if(O){gt(G),Ct(O.axis),Dt(Xr(G,O.axis)),Ne&&tt(null),A&&re(null),ht&&An(null),Vt&&an(null);return}}}rt&&gt(null),ct&&Ct(null),Dt(!1);{let T=[];Y&&T.push(Y),ht&&ht!==Y&&T.push(ht);let G=null,R=1/0,O=null;for(let _ of T){if(!Kr(_))continue;let $=po(_);if(!$)continue;let se=P>=$.left&&P<=$.right&&H>=$.top&&H<=$.bottom,be=[["font-size",$.right,$.top+$.height/2],["line-height",$.left+$.width/2,$.bottom]];for(let[Ze,Ge,Mt]of be){let pt=Math.hypot(P-Ge,H-Mt);(se||pt<12)&&pt<R&&(R=pt,G=Ze,O=_)}}G&&O?(An(O),an(G)):(ht&&An(null),Vt&&an(null))}if(Y!==Ne&&tt(Y),Y){let y=uo(Y),T=Y.getBoundingClientRect(),G=Qi(P,H,T,y);re(G)}else re(null);return}if(Ke){let{handle:P,originalPoints:H,hasMoved:ie}=Ke,z=e.annotations.find(R=>R.id===Ke.annotationId);if(!z)return;let Y="metaKey"in b,y=Y&&(b.metaKey||b.ctrlKey),T=Y&&b.shiftKey,G;if(z.type==="line"){let R=H[0],O=H[H.length-1];P==="start"?G=[S,O]:G=[R,S]}else if(z.type==="freehand"){let R=Math.min(...H.map(Oe=>Oe.x)),O=Math.max(...H.map(Oe=>Oe.x)),_=Math.min(...H.map(Oe=>Oe.y)),$=Math.max(...H.map(Oe=>Oe.y)),se=(R+O)/2,be=(_+$)/2,Ze=O-R||1,Ge=$-_||1,Mt=Ze/Ge,pt=R,ae=O,xe=_,Ue=$;switch(P){case"topLeft":pt=S.x,xe=S.y;break;case"topRight":ae=S.x,xe=S.y;break;case"bottomLeft":pt=S.x,Ue=S.y;break;case"bottomRight":ae=S.x,Ue=S.y;break}if(y)switch(P){case"topLeft":ae=O+(R-pt),Ue=$+(_-xe);break;case"topRight":pt=R-(ae-O),Ue=$+(_-xe);break;case"bottomLeft":ae=O+(R-pt),xe=_-(Ue-$);break;case"bottomRight":pt=R-(ae-O),xe=_-(Ue-$);break}if(T){let Oe=ae-pt,yt=Ue-xe;if(Math.abs(Oe/yt)>Mt){let Rt=Math.abs(yt)*Mt*Math.sign(Oe);P==="topLeft"||P==="bottomLeft"?pt=ae-Rt:ae=pt+Rt}else{let Rt=Math.abs(Oe)/Mt*Math.sign(yt);P==="topLeft"||P==="topRight"?xe=Ue-Rt:Ue=xe+Rt}}let Ve=ae-pt||1,it=Ue-xe||1;G=H.map(Oe=>({x:pt+(Oe.x-R)/Ze*Ve,y:xe+(Oe.y-_)/Ge*it}))}else if(z.type==="circle"){let R=H[0],O=H[H.length-1],_=Math.min(R.x,O.x),$=Math.max(R.x,O.x),se=Math.min(R.y,O.y),be=Math.max(R.y,O.y),Ze=(_+$)/2,Ge=(se+be)/2,Mt=$-_,pt=be-se,ae=_,xe=$,Ue=se,Ve=be;switch(P){case"top":if(Ue=S.y,y&&(Ve=Ge+(Ge-S.y)),T){let Oe=(Ve-Ue)*(Mt/pt)/2;ae=Ze-Oe,xe=Ze+Oe}break;case"bottom":if(Ve=S.y,y&&(Ue=Ge-(S.y-Ge)),T){let Oe=(Ve-Ue)*(Mt/pt)/2;ae=Ze-Oe,xe=Ze+Oe}break;case"left":if(ae=S.x,y&&(xe=Ze+(Ze-S.x)),T){let Oe=(xe-ae)*(pt/Mt)/2;Ue=Ge-Oe,Ve=Ge+Oe}break;case"right":if(xe=S.x,y&&(ae=Ze-(S.x-Ze)),T){let Oe=(xe-ae)*(pt/Mt)/2;Ue=Ge-Oe,Ve=Ge+Oe}break}G=[{x:ae,y:Ue},{x:xe,y:Ve}]}else{let R=H[0],O=H[H.length-1],_=Math.min(R.x,O.x),$=Math.max(R.x,O.x),se=Math.min(R.y,O.y),be=Math.max(R.y,O.y),Ze=(_+$)/2,Ge=(se+be)/2,Mt=$-_||1,pt=be-se||1,ae=Mt/pt,xe=_,Ue=$,Ve=se,it=be;switch(P){case"topLeft":xe=S.x,Ve=S.y;break;case"topRight":Ue=S.x,Ve=S.y;break;case"bottomLeft":xe=S.x,it=S.y;break;case"bottomRight":Ue=S.x,it=S.y;break}if(y)switch(P){case"topLeft":Ue=$+(_-xe),it=be+(se-Ve);break;case"topRight":xe=_-(Ue-$),it=be+(se-Ve);break;case"bottomLeft":Ue=$+(_-xe),Ve=se-(it-be);break;case"bottomRight":xe=_-(Ue-$),Ve=se-(it-be);break}if(T){let Oe=Ue-xe,yt=it-Ve;if(Math.abs(Oe/yt)>ae){let Rt=Math.abs(yt)*ae*Math.sign(Oe);P==="topLeft"||P==="bottomLeft"?xe=Ue-Rt:Ue=xe+Rt}else{let Rt=Math.abs(Oe)/ae*Math.sign(yt);P==="topLeft"||P==="topRight"?Ve=it-Rt:it=Ve+Rt}}G=[{x:xe,y:Ve},{x:Ue,y:it}]}t({type:"RESIZE_ANNOTATION",payload:{id:Ke.annotationId,points:G,saveUndo:!ie}}),ie||Lt(m(f({},Ke),{hasMoved:!0}));return}if(ye&&((I=ye.annotation.status)!=null?I:"pending")==="pending"){let P=S.x-ye.startPoint.x,H=S.y-ye.startPoint.y;if((Math.abs(P)>2||Math.abs(H)>2)&&!ye.hasMoved)et(m(f({},ye),{hasMoved:!0,startPoint:S})),t({type:"MOVE_ANNOTATION",payload:{id:ye.annotation.id,delta:{x:P,y:H},saveUndo:!0}});else if(ye.hasMoved){let z=S.x-ye.startPoint.x,Y=S.y-ye.startPoint.y;et(m(f({},ye),{startPoint:S})),t({type:"MOVE_ANNOTATION",payload:{id:ye.annotation.id,delta:{x:z,y:Y}}})}return}!C||!e.isAnnotating||t({type:"CONTINUE_PATH",payload:S})},[C,e.isAnnotating,e.activeTool,ye,Ke,ue,Ne,A,j,He,rt,ct,ht,Vt,eo,t,kn,Qi]),Mr=Pt(b=>{var I,P,H,ie,z,Y;if(ut.current.isDragging){let y=ut.current,T=y.element;if(T&&y.selector&&y.elementInfo&&N){T instanceof HTMLElement&&(T.style.removeProperty("font-size"),T.style.removeProperty("line-height"),T.style.removeProperty("transition"));let G=[];if(y.originalFontSize!==N.fontSize&&(ze(T,"font-size",`${N.fontSize}px`),G.push({property:"font-size",original:`${y.originalFontSize}px`,modified:`${N.fontSize}px`})),y.originalLineHeight!==N.lineHeight){let R=y.originalFontSize>0?Math.round(y.originalLineHeight/y.originalFontSize*1e3)/1e3:1.2,O=N.fontSize>0?Math.round(N.lineHeight/N.fontSize*1e3)/1e3:1.2;ze(T,"line-height",`${O}`),G.push({property:"line-height",original:`${R}`,modified:`${O}`})}G.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:y.selector,durableSelector:(I=y.durableSelector)!=null?I:void 0,element:y.elementInfo,changes:G}})}ut.current={isDragging:!1,property:null,startX:0,startY:0,originalFontSize:0,originalLineHeight:0,originalRatio:1.2,element:null,elementInfo:null,selector:null,durableSelector:null},Q(null);return}if(ft.current.isDragging){let y=ft.current,T=y.element,G="button"in b&&b.button===2;if(!y.hasMoved&&!G&&T&&y.selector&&y.elementInfo){T instanceof HTMLElement&&T.style.removeProperty("transition");let R=["space-between","space-around","stretch","normal"],O=y.originalJustifyContent||"normal",_=R.indexOf(O),$=R[(_+1)%R.length],se=[];$==="normal"?(ze(T,"justify-content","normal"),se.push({property:"justify-content",original:y.originalJustifyContent,modified:"normal"})):$==="stretch"?(ze(T,"justify-content",$),ze(T,"row-gap","8px"),ze(T,"column-gap","8px"),se.push({property:"justify-content",original:y.originalJustifyContent||"normal",modified:$}),y.originalRow!==8&&se.push({property:"row-gap",original:`${y.originalRow}px`,modified:"8px"}),y.originalColumn!==8&&se.push({property:"column-gap",original:`${y.originalColumn}px`,modified:"8px"})):(T instanceof HTMLElement&&(T.style.removeProperty("row-gap"),T.style.removeProperty("column-gap")),ze(T,"justify-content",$),se.push({property:"justify-content",original:y.originalJustifyContent||"normal",modified:$}),y.originalRow>0&&se.push({property:"row-gap",original:`${y.originalRow}px`,modified:"0px"}),y.originalColumn>0&&se.push({property:"column-gap",original:`${y.originalColumn}px`,modified:"0px"})),se.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:y.selector,durableSelector:(P=y.durableSelector)!=null?P:void 0,element:y.elementInfo,changes:se}})}else if(y.hasMoved&&T&&y.selector&&y.elementInfo&&Pe){T instanceof HTMLElement&&(T.style.removeProperty("row-gap"),T.style.removeProperty("column-gap"),T.style.removeProperty("transition"));let R=[];y.isAuto?(T instanceof HTMLElement&&T.style.removeProperty("justify-content"),ze(T,"justify-content","normal"),ze(T,"row-gap",`${Pe.row}px`),ze(T,"column-gap",`${Pe.column}px`),R.push({property:"justify-content",original:y.originalJustifyContent,modified:"normal"}),R.push({property:"row-gap",original:"0px",modified:`${Pe.row}px`}),R.push({property:"column-gap",original:"0px",modified:`${Pe.column}px`})):(y.originalRow!==Pe.row&&(ze(T,"row-gap",`${Pe.row}px`),R.push({property:"row-gap",original:`${y.originalRow}px`,modified:`${Pe.row}px`})),y.originalColumn!==Pe.column&&(ze(T,"column-gap",`${Pe.column}px`),R.push({property:"column-gap",original:`${y.originalColumn}px`,modified:`${Pe.column}px`}))),R.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:y.selector,durableSelector:(H=y.durableSelector)!=null?H:void 0,element:y.elementInfo,changes:R}})}ft.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},Kt(null);return}if(Gt.current.isDragging){let y=Gt.current,T=y.element;if(T&&y.selector&&y.elementInfo&&nt){T instanceof HTMLElement&&(T.style.removeProperty("border-top-left-radius"),T.style.removeProperty("border-top-right-radius"),T.style.removeProperty("border-bottom-right-radius"),T.style.removeProperty("border-bottom-left-radius"),T.style.removeProperty("transition"));let G=["top-left","top-right","bottom-right","bottom-left"],R={"top-left":"border-top-left-radius","top-right":"border-top-right-radius","bottom-right":"border-bottom-right-radius","bottom-left":"border-bottom-left-radius"},O=[];for(let _ of G)y.original[_]!==nt.radius[_]&&(ze(T,R[_],`${nt.radius[_]}px`),O.push({property:R[_],original:`${y.original[_]}px`,modified:`${nt.radius[_]}px`}));O.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:y.selector,durableSelector:(ie=y.durableSelector)!=null?ie:void 0,element:y.elementInfo,changes:O}})}Gt.current={isDragging:!1,corner:null,startY:0,original:{"top-left":0,"top-right":0,"bottom-right":0,"bottom-left":0},maxRadius:0,element:null,elementInfo:null,selector:null,durableSelector:null},vt(null);return}if(qe.current.isDragging){let y=qe.current,T=y.element,G=y.selector,R=y.elementInfo;if(T&&G&&R&&ke){let O=y.original,_=ke.padding;T instanceof HTMLElement&&(T.style.removeProperty("padding"),T.style.removeProperty("transition"));let $=[],se=[{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:be,origVal:Ze,newVal:Ge}of se)Ze!==Ge&&(ze(T,be,`${Ge}px`),$.push({property:be,original:`${Ze}px`,modified:`${Ge}px`}));$.length>0&&t({type:"MODIFY_STYLES_BATCH",payload:{selector:G,durableSelector:(z=y.durableSelector)!=null?z:void 0,element:R,changes:$}})}qe.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},Re(null);return}if(Ke){Lt(null);return}if(ye){if(!ye.hasMoved&&ye.annotation.type==="text"&&((Y=ye.annotation.status)!=null?Y:"pending")==="pending"){let y=eo(b);W({id:ye.annotation.id,point:ye.annotation.points[0],text:ye.annotation.text||"",fontSize:ye.annotation.fontSize||12,isNew:!1,clickPoint:y,groupId:ye.annotation.groupId})}et(null);return}if(!C)return;let S=5;if(e.currentPath.length>=2){let y=e.currentPath[0],T=e.currentPath[e.currentPath.length-1],G=Math.abs(T.x-y.x),R=Math.abs(T.y-y.y);if((e.activeTool==="line"?Math.sqrt(G*G+R*R)<S:G<S&&R<S)&&["rectangle","circle","line"].includes(e.activeTool)){L(!1),t({type:"CANCEL_PATH"});return}}let X=Yr(e.currentPath);if(e.activeTool==="rectangle"&&e.currentPath.length>=2){let y=e.currentPath[0],T=e.currentPath[e.currentPath.length-1],G=Math.min(y.x,T.x),R=Math.max(y.y,T.y),O=e.strokeWidth/2,_=Math.random().toString(36).substring(2,9);K({point:{x:G-O+4,y:R+O+4},groupId:_}),L(!1),t({type:"FINISH_PATH",payload:{groupId:_,elements:X}});return}L(!1),t({type:"FINISH_PATH",payload:{elements:X}})},[C,ye,Ke,ke,nt,Pe,N,eo,t,e.activeTool,e.currentPath,e.strokeWidth]),la=Pt(b=>{let S=b.target.value;Vo.current=b.target.selectionStart,W(X=>X&&m(f({},X),{text:S}))},[]),aa=Pt(b=>{b.key==="Escape"?W(null):b.key==="Enter"&&!b.shiftKey&&(b.preventDefault(),to())},[to]),ca=Pt(b=>{if(!k)return;let S=b.clipboardData.items,X=[];for(let I=0;I<S.length;I++){let P=S[I];if(P.type.startsWith("image/")){let H=P.getAsFile();H&&X.push(H)}}X.length>0&&(b.preventDefault(),W(I=>I?m(f({},I),{images:[...I.images||[],...X]}):null))},[k]),da=Pt(b=>{if(!e.isAnnotating)return;if(e.activeTool==="hand"){b.preventDefault();let X=Ne||rt||j||ht;if(X&&!Te(X)){let I=Jt(X),P=on(X);t({type:"SELECT_ELEMENT",payload:{el:X,info:m(f({},I),{selector:P})}})}return}b.preventDefault();let S=w.current;S&&(M.current=!0,S.style.pointerEvents="none",setTimeout(()=>{M.current&&(M.current=!1,S.style.pointerEvents="")},4e3))},[e.activeTool,e.isAnnotating,Ne,rt,j,ht,t,Te,w]);_t(()=>{let b=e.annotations.filter(H=>H.linkedSelector);if(b.length===0)return;let S=null,X=()=>{var ie,z,Y;let H=[];for(let y of b){let T=document.querySelector(y.linkedSelector);if(!T&&((z=(ie=y.elements)==null?void 0:ie[0])!=null&&z.selector)&&y.linkedSelector.startsWith("[data-pm=")){try{T=document.querySelector(y.elements[0].selector)}catch(Ge){}if(T){let Ge=(Y=y.linkedSelector.match(/data-pm="([^"]+)"/))==null?void 0:Y[1];Ge&&T.setAttribute("data-pm",Ge)}}if(!T)continue;let G=T.getBoundingClientRect(),R=e.styleModifications.some(Ge=>{try{return T.matches(Ge.selector)}catch(Mt){return!1}}),O=b.filter(Ge=>Ge.id!==y.id&&Ge.timestamp<y.timestamp&&Ge.linkedSelector===y.linkedSelector).length,_=(R?1:0)+O,$=G.top>=Vn*(1+_)?"top-left":"bottom-left",se=Dl(G,$,_),be=y.points[0],Ze=$!==y.linkedAnchor;be&&(Ze||Math.abs(se.x-be.x)>1||Math.abs(se.y-be.y)>1)&&H.push({id:y.id,point:se,linkedAnchor:Ze?$:void 0})}H.length>0&&t({type:"UPDATE_LINKED_POSITIONS",payload:{updates:H}})},I=()=>{S&&cancelAnimationFrame(S),S=requestAnimationFrame(X)};X(),window.addEventListener("scroll",I,!0),window.addEventListener("resize",I,!0),window.addEventListener("load",I),document.fonts.ready.then(I);let P=new MutationObserver(I);return P.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),P.disconnect(),S&&cancelAnimationFrame(S)}},[e.annotations,t]);let ua=()=>{var b,S,X;if(!e.isAnnotating)return"default";if(Ke){let{handle:I}=Ke;return I==="start"||I==="end"?"move":I==="top"||I==="bottom"?"ns-resize":I==="left"||I==="right"?"ew-resize":I==="topLeft"||I==="bottomRight"?"nwse-resize":"nesw-resize"}if(e.activeTool==="text")return"text";if(e.activeTool==="hand"){let I=(b=Pe==null?void 0:Pe.axis)!=null?b:ct;if(I==="row")return"ns-resize";if(I==="column")return"ew-resize";if(nt||He)return"ns-resize";let P=(S=N==null?void 0:N.property)!=null?S:Vt;if(P==="font-size")return"ew-resize";if(P==="line-height")return"ns-resize";let H=(X=ke==null?void 0:ke.side)!=null?X:A;return H==="top"||H==="bottom"?"ns-resize":H==="left"||H==="right"?"ew-resize":"default"}return"crosshair"},pa={position:"fixed",top:0,left:0,width:"100vw",height:"100vh",zIndex:9998,pointerEvents:e.isAnnotating?"auto":"none",visibility:e.isAnnotating?"visible":"hidden",cursor:ua()},Ro=Pt(()=>{let b=w.current;if(!b||!k)return{width:100,height:12*1.4,isWrapped:!1};let S=b.getContext("2d");if(!S)return{width:100,height:k.fontSize*1.4,isWrapped:!1};S.font=`${k.fontSize}px ${Ft}`;let I=S.measureText("Type here...").width,P=k.text.split(`
 `),H=P.length>0?Math.max(I,...P.map(T=>S.measureText(T||" ").width)):I,ie=k.point.x-St.x,z=so(ie);if(z!==void 0&&H>z){let T=$n(S,P,z),G=Math.min(z,Math.max(I,...T.map(O=>S.measureText(O).width))),R=Math.max(1,T.length)*k.fontSize*1.4;return{width:G,height:R,isWrapped:!0}}let y=Math.max(1,P.length)*k.fontSize*1.4;return{width:H,height:y,isWrapped:!1}},[k,w,St.x])(),fa=k?Math.max(1,k.text.split(`
-`).length)*k.fontSize*1.4+8:0,ns=Ro.height+8,ga=Ro.isWrapped?ns-fa:0,ma=k?{position:"fixed",left:k.point.x-4-St.x,top:k.point.y-4-St.y-ga,zIndex:9999,width:Ro.width+8,height:ns,padding:4,fontSize:k.fontSize,fontFamily:Ft,color:"#ffffff",backgroundColor:e.activeColor,border:"none",borderRadius:0,outline:"none",boxShadow:"none",lineHeight:1.4,resize:"none",overflow:"hidden",whiteSpace:Ro.isWrapped?"pre-wrap":"pre",wordBreak:Ro.isWrapped?"break-word":void 0}:{};return So(wo,{children:[ot("canvas",{ref:w,id:"devtools-canvas",style:pa,onMouseDown:es,onMouseMove:ts,onMouseUp:b=>Mr(b),onMouseLeave:b=>{Mr(b),We(null),lt(null)},onTouchStart:es,onTouchMove:ts,onTouchEnd:b=>Mr(b),onContextMenu:da}),k&&So(wo,{children:[ot("style",{children:"#devtools-text-input::placeholder { color: rgba(255, 255, 255, 0.5); }"}),ot("textarea",{id:"devtools-text-input",ref:le,value:k.text,onChange:la,onKeyDown:aa,onPaste:ca,onBlur:to,placeholder:"Type here...",style:ma}),k.images&&k.images.length>0&&So("div",{"data-devtools":!0,style:{position:"fixed",left:k.point.x-4-St.x,top:k.point.y-4-St.y-20,zIndex:1e4,fontSize:11,fontFamily:"system-ui, sans-serif",color:"#fff",backgroundColor:"rgba(0,0,0,0.7)",padding:"2px 6px",borderRadius:3,whiteSpace:"nowrap"},children:[k.images.length," image",k.images.length>1?"s":""," attached"]})]}),e.isAnnotating&&e.activeTool!=="hand"&&e.styleModifications.length>0&&ot(pl,{styleModifications:e.styleModifications,isInspecting:!!e.inspectedElement,accentColor:e.activeColor,annotationGroupCount:new Set(e.annotations.map(b=>b.groupId||b.id)).size,dispatch:t,inFlightSelectors:r}),e.activeTool==="hand"&&e.isAnnotating&&e.styleModifications.length>0&&ot(gl,{styleModifications:e.styleModifications,accentColor:e.activeColor}),e.isAnnotating&&ot(nl,{annotations:e.annotations,supersededAnnotations:Pn,inFlightIds:n,scrollX:St.x,scrollY:St.y,annotationGroupMap:Go,onViewThread:a,onSelectAnnotation:Me,canvasRef:w}),e.isAnnotating&&l&&ot(ol,{annotations:e.annotations,supersededAnnotations:Pn,scrollX:St.x,scrollY:St.y,onReply:l,annotationGroupMap:Go,canvasRef:w}),e.isAnnotating&&i&&i.size>0&&ot(ti,{inFlightSelectorColors:i}),e.isAnnotating&&Ki&&ot(ti,{inFlightSelectorColors:Ki,animated:!1}),e.activeTool==="hand"&&e.isAnnotating&&(Pe?ft.current.element:rt)&&ot(si,{element:Pe?ft.current.element:rt,gap:Pe?{row:Pe.row,column:Pe.column}:Bo(rt),accentColor:e.activeColor,hoveredAxis:ct,draggingAxis:(rs=Pe==null?void 0:Pe.axis)!=null?rs:null,cursorViewport:at,isAutoGap:mt,refreshKey:Wt}),e.activeTool==="hand"&&e.isAnnotating&&Yt&&ot(Pl,{element:Yt.target,modifier:Yt.modifier,accentColor:e.activeColor,refreshKey:Wt}),e.activeTool==="hand"&&e.isAnnotating&&!Yt&&(nt?Gt.current.element:j)&&ot(al,{element:nt?Gt.current.element:j,radius:(is=nt==null?void 0:nt.radius)!=null?is:jn(j),accentColor:e.activeColor,hoveredCorner:He,draggingCorner:(ss=nt==null?void 0:nt.corner)!=null?ss:null,cursorViewport:at}),e.activeTool==="hand"&&e.isAnnotating&&!Yt&&(N?ut.current.element:ht)&&ot(Bl,{element:N?ut.current.element:ht,fontSize:(ls=N==null?void 0:N.fontSize)!=null?ls:Oo(ht).fontSize,lineHeight:(as=N==null?void 0:N.lineHeight)!=null?as:Oo(ht).lineHeight,accentColor:e.activeColor,hoveredProperty:Vt,draggingProperty:(cs=N==null?void 0:N.property)!=null?cs:null,cursorViewport:at}),e.activeTool==="hand"&&e.isAnnotating&&!Yt&&(ke?qe.current.element:Ne)&&ot(pi,{element:ke?qe.current.element:Ne,padding:(ds=ke==null?void 0:ke.padding)!=null?ds:uo(Ne),accentColor:e.activeColor,hoveredSide:A,draggingSide:(us=ke==null?void 0:ke.side)!=null?us:null,cursorViewport:at,refreshKey:N?N.fontSize+N.lineHeight*1e3:0}),e.activeTool==="inspector"&&e.isAnnotating&&ot(wo,{children:ue&&!e.inspectedElement&&(()=>{let b=!!q||!!(k!=null&&k.linkedSelector)||e.annotations.some(S=>{if(!S.linkedSelector)return!1;try{return ue.matches(S.linkedSelector)}catch(X){return!1}});return ot(mo,{element:ue,isSelected:!1,elementInfo:me,color:e.activeColor,hideTooltip:b})})()}),e.activeTool==="model"&&e.isAnnotating&&te.size>0&&[...te.entries()].map(([b,S])=>ot(mo,{element:S.rootElement,isSelected:!0,elementInfo:{selector:"",tagName:S.rootElement.tagName.toLowerCase(),reactComponent:b},color:"#8b5cf6"},b)),e.activeTool==="model"&&e.isAnnotating&&Lo&&ot(mo,{element:Lo.rootElement,isSelected:!0,elementInfo:{selector:"",tagName:Lo.rootElement.tagName.toLowerCase(),reactComponent:Lo.name},color:"#22c55e"}),e.activeTool==="model"&&e.isAnnotating&&cn.length>0&&cn.map((b,S)=>ot("div",{style:{position:"absolute",left:b.x,top:b.y,width:b.width,height:b.height,backgroundColor:"rgba(255, 0, 0, 0.08)",pointerEvents:"none",zIndex:9998},children:b.direction==="vertical"?So(wo,{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:b.height<16?-6:"50%",transform:b.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(b.height)})]}):So(wo,{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:b.width<30?0:"50%",top:(b.width<30,void 0),bottom:"calc(50% + 4px)",transform:b.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(b.width)})]})},S)),e.activeTool==="model"&&e.isAnnotating&&J&&ot(mo,{element:J.rootElement,isSelected:!1,elementInfo:{selector:"",tagName:J.rootElement.tagName.toLowerCase(),reactComponent:J.name},color:g!=null&&g.has(J.name)?"#22c55e":"#8b5cf6"}),e.activeTool==="hand"&&e.isAnnotating&&e.inspectedElement&&So(wo,{children:[de&&de!=="padding"&&de!=="gap"&&(()=>{var z;let b=new Set(e.annotations.map(Y=>Y.groupId||Y.id)).size,S=e.inspectedElement.info.selector,X=e.styleModifications.findIndex(Y=>Y.selector===S),I=X>=0?b+X+1:b+e.styleModifications.length+1,P=e.styleModifications.find(Y=>Y.selector===S),H=(z=P==null?void 0:P.changes.length)!=null?z:0,ie=!!(P!=null&&P.captured);return ot(mo,{element:e.inspectedElement.el,isSelected:!0,elementInfo:e.inspectedElement.info,color:ie?"#999999":e.activeColor,annotationNumber:I,changeCount:H})})(),de==="padding"&&ot(pi,{element:e.inspectedElement.el,padding:uo(e.inspectedElement.el),accentColor:e.activeColor,hoveredSide:null,draggingSide:null}),de==="gap"&&ot(si,{element:e.inspectedElement.el,gap:Bo(e.inspectedElement.el),accentColor:e.activeColor,hoveredAxis:null,draggingAxis:null}),ot(Rl,{element:e.inspectedElement.el,elementInfo:e.inspectedElement.info,selector:e.inspectedElement.info.selector,styleModifications:e.styleModifications,dispatch:t,onClose:()=>t({type:"SELECT_ELEMENT",payload:null}),onHover:Le,accentColor:e.activeColor})]})]})}import{useCallback as ln,useEffect as bn,useMemo as Pi,useRef as It,useState as _o}from"react";import{Circle as Su,Component as wu,Hand as ku,MessageCircle as Eu,Pen as Cu,Slash as Mu,Square as Tu,Trash2 as Iu,Type as Lu}from"lucide-react";import{useEffect as Kd,useRef as Zd}from"react";function Nl(e,t,o,n,r){let i=Zd(0);Kd(()=>{if(!o.current||(localStorage.setItem(r.expanded,String(e)),!e))return;let s=t.annotations.length;(s>=i.current||s===0||!n)&&(localStorage.setItem(r.annotations,JSON.stringify(t.annotations)),i.current=s),localStorage.setItem(r.styleMods,JSON.stringify(t.styleModifications)),localStorage.setItem(r.spacingChanges,JSON.stringify(t.spacingTokenChanges)),localStorage.setItem(r.tool,t.activeTool),localStorage.setItem(r.color,t.activeColor),localStorage.setItem(r.stroke,String(t.strokeWidth)),t.inspectedElement?localStorage.setItem(r.inspected,JSON.stringify({selector:t.inspectedElement.info.selector,info:t.inspectedElement.info})):localStorage.removeItem(r.inspected)},[e,t.annotations,t.styleModifications,t.spacingTokenChanges,t.activeTool,t.activeColor,t.strokeWidth,t.inspectedElement,n,o,r])}import{Component as qd,createElement as Qd,useCallback as vr,useEffect as Eo,useRef as ko,useState as yn}from"react";import{Fragment as Co,jsx as De,jsxs as Xt}from"react/jsx-runtime";var Hl="popmelt-library-tab",eu=/^#[0-9a-fA-F]{3,8}$/,tu=/^(?: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 zl(e){let t=e.trim();return eu.test(t)||tu.test(t)||nu.has(t.toLowerCase())}function ru(e){return ou.test(e.trim())}function iu(e){let t=e.trim().match(/^(-?\d+(?:\.\d+)?)px$/);return t?parseFloat(t[1]):null}function Li(e,t=""){if(e==null)return[];if(typeof e!="object")return[[t,String(e)]];if(Array.isArray(e))return[[t,e.map(String).join(", ")]];let o=[];for(let[n,r]of Object.entries(e)){let i=t?`${t}.${n}`:n;if(r!==null&&typeof r=="object"&&!Array.isArray(r)){let s=r;typeof s.value=="string"?o.push([i,s.value]):o.push(...Li(r,i))}else o.push([i,Array.isArray(r)?r.map(String).join(", "):String(r!=null?r:"")])}return o}function su(e){return e.length===0?"generic":e.filter(([,n])=>zl(n)).length>e.length/2?"colors":e.filter(([,n])=>ru(n)).length>e.length/2?"spacing":"generic"}var lu=m(f({position:"fixed",top:16,right:16,bottom:80,width:300,backgroundColor:"#ffffff"},gn),{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"}),_l={border:"none",background:"none",cursor:"pointer",fontFamily:"inherit",fontSize:11,fontWeight:600,padding:"2px 0",color:"#9ca3af"},au=m(f({},_l),{color:"#1f2937",borderBottom:"1.5px solid #1f2937"});function cu({entries:e}){let t=[],o=[];for(let n of e)zl(n[1])?t.push(n):o.push(n);return Xt(Co,{children:[t.length>0&&De("div",{style:{display:"flex",flexWrap:"wrap",gap:2,marginBottom:o.length>0?6:0},children:t.map(([n,r])=>De("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&&De(Ri,{entries:o})]})}var xr=[0,1,2,4,8,12,16,20,24,28,32];function du(e){if(e<=32){let t=xr[0],o=Math.abs(e-t);for(let n=1;n<xr.length;n++){let r=Math.abs(e-xr[n]);r<o&&(t=xr[n],o=r)}return t}return Math.round(e/8)*8}function uu({label:e,value:t,px:o,tokenPath:n,rawToken:r,onHover:i,onModify:s,onDelete:l}){let[a,c]=yn(!1),[d,p]=yn(null),u=ko(!1),g=ko(0),x=ko(0),E=ko([]),h=d!==null?d:o,w=d!==null?`${d}px`:t,D=d!==null,B=vr(C=>{C.preventDefault(),u.current=!0,g.current=C.clientX,x.current=o;let L=or(r);E.current=Gr(L);let k=ee=>{let Z=ee.clientX-g.current,F=Math.max(0,Math.round(x.current+Z));ee.shiftKey&&(F=du(F));for(let K of E.current)K.element.style.setProperty(K.property,F+"px","important");p(F),i==null||i({name:e,px:F,token:L})},W=()=>{window.removeEventListener("mousemove",k),window.removeEventListener("mouseup",W),document.body.style.cursor="",u.current=!1,p(ee=>{if(ee!==null&&ee!==o&&s){let Z=or(r),F=Z.bindings&&Z.bindings.length>0,K;if(F){let he=Ur(Z.bindings,x.current,ee);K=JSON.stringify(m(f({},Z),{value:`${ee}px`,bindings:he}))}else{let he=Us(E.current,x.current),Fe=Js(E.current);if(he.length>0){let Ie=Ur(he,x.current,ee);K=JSON.stringify({value:`${ee}px`,property:Fe,bindings:Ie})}else K=`${ee}px`}let q=typeof r=="string"?r:JSON.stringify(r),we=E.current.map(he=>({selector:on(he.element),property:he.property})),le=Ks(E.current,x.current,ee);s({tokenPath:n,originalValue:q,currentValue:K,targets:we,originalPx:x.current,currentPx:ee},{id:Math.random().toString(36).substring(2,9),tokenPath:n,tokenName:e,originalPx:x.current,newPx:ee,affectedElements:le})}return ee})};document.body.style.cursor="ew-resize",window.addEventListener("mousemove",k),window.addEventListener("mouseup",W)},[o,e,n,r,i,s]),M=or(r);return Xt("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",fontSize:11,padding:"1px 0",cursor:"ew-resize",userSelect:"none"},onMouseEnter:()=>{u.current||(c(!0),i==null||i({name:e,px:h,token:M}))},onMouseLeave:()=>{u.current||(c(!1),i==null||i(null))},onMouseDown:B,children:[De("span",{style:{color:a||D?"#FF0000":"#9ca3af"},children:e}),Xt("span",{style:{display:"flex",alignItems:"center",gap:4},children:[De("span",{style:{color:a||D?"#FF0000":"#6b7280",fontWeight:600},children:w}),l&&a&&!D&&De("button",{type:"button",title:"Remove token",onMouseDown:C=>{C.stopPropagation();let L=typeof r=="string"?r:JSON.stringify(r);l(n,L)},style:{border:"none",background:"none",cursor:"pointer",padding:0,fontSize:10,lineHeight:1,color:"#9ca3af"},onMouseEnter:C=>{C.currentTarget.style.color="#FF0000"},onMouseLeave:C=>{C.currentTarget.style.color="#9ca3af"},children:"\u2715"})]})]})}function pu({entries:e,categoryKey:t,rawTokens:o,onHover:n,onModify:r,onDelete:i}){let s=[],l=[];for(let a of e){let c=iu(a[1]);c!==null?s.push([a[0],a[1],c]):l.push(a)}return Xt(Co,{children:[s.length>0&&De("div",{style:{display:"flex",flexDirection:"column",gap:2},children:s.map(([a,c,d])=>{let p=a.split(".").pop(),u=o?fu(o,a):c,g=u&&typeof u=="object"&&"value"in u?u:c;return De(uu,{label:p,value:c,px:d,tokenPath:`tokens.${t}.${a}`,rawToken:g,onHover:n,onModify:r,onDelete:i},a)})}),l.length>0&&De(Ri,{entries:l})]})}function fu(e,t){let o=t.split("."),n=e;for(let r of o){if(n==null||typeof n!="object")return;n=n[r]}return n}function Ri({entries:e}){return De("div",{style:{display:"flex",flexDirection:"column",gap:3},children:e.map(([t,o])=>Xt("div",{style:{fontSize:11},children:[De("div",{style:{color:"#9ca3af",fontSize:10,marginBottom:1},children:t}),De("div",{style:{color:"#1f2937",lineHeight:1.4,paddingLeft:8},children:o})]},t))})}function $l({entries:e,categoryKey:t,rawTokens:o,onSpacingHover:n,onModifyToken:r,onDeleteToken:i}){let s=su(e);return s==="colors"?De(cu,{entries:e}):s==="spacing"?De(pu,{entries:e,categoryKey:t,rawTokens:o,onHover:n,onModify:r,onDelete:i}):De(Ri,{entries:e})}function gu(e){let t=e.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,s=Object.keys(i).find(a=>a.startsWith("__reactFiber$")||a.startsWith("__reactInternalInstance$"));if(!s)continue;let l=i[s];for(;l;){let a=l.type,c=typeof a=="function"||typeof a=="object"?(a==null?void 0:a.displayName)||(a==null?void 0:a.name):null;if(typeof c=="string"){let d=c.toLowerCase();if(d===t){let p=f({},l.memoizedProps);return delete p.ref,{type:a,props:p}}if(!o){if(d.length>=4&&t.includes(d)){let p=f({},l.memoizedProps);delete p.ref,o={type:a,props:p}}else if(t.length>=4&&d.includes(t)){let p=f({},l.memoizedProps);delete p.ref,o={type:a,props:p}}}}l=l.return}}return o}var Ii=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:e}){return De("div",{style:{fontWeight:700,fontSize:11,color:"#6b7280",letterSpacing:"0.05em",marginBottom:6},children:e})}function hu({tokens:e,onSpacingTokenHover:t,onModifyToken:o,onDeleteToken:n}){return!e||Object.keys(e).length===0?De("div",{style:{color:"#9ca3af",fontSize:11},children:"No tokens defined yet."}):De(Co,{children:Object.entries(e).map(([r,i])=>Xt("div",{style:{marginBottom:14},children:[De(mu,{children:r}),De($l,{entries:Li(i),categoryKey:r,rawTokens:i,onSpacingHover:t,onModifyToken:o,onDeleteToken:n})]},r))})}function yu({rules:e}){return!e||e.length===0?De("div",{style:{color:"#9ca3af",fontSize:11},children:"No rules defined yet."}):De(Co,{children:e.map((t,o)=>Xt("div",{style:{display:"flex",gap:6,marginBottom:4,lineHeight:1.4,fontSize:11},children:[Xt("span",{style:{color:"#9ca3af",flexShrink:0},children:[o+1,"."]}),De("span",{children:t})]},o))})}function bu({name:e,value:t,selected:o,highlighted:n,onRemove:r,onHover:i}){var ee;let[s,l]=yn(!1),[a,c]=yn(!1),d=ko(null),p=ko(0),[u,g]=yn(0),[x,E]=yn(0),h=Li(t),w=(ee=h.find(([Z])=>Z==="description"))==null?void 0:ee[1];Eo(()=>{if(!a&&!n){g(0),E(0),p.current=0;return}let Z=ao(e);g(Z.length)},[a,n,e]),Eo(()=>{o&&d.current&&d.current.scrollIntoView({behavior:"smooth",block:"nearest"})},[o]);let D=o||n||a,B=o?"139,92,246":"34,197,94",M=o?"#8b5cf6":"#22c55e",C=D?`rgba(${B},0.06)`:void 0,L=D?`inset 0 0 0 1.5px rgba(${B},0.35)`:void 0,k=n||a,W=vr(()=>{let Z=ao(e);if(Z.length===0)return;let F=p.current%Z.length;Z[F].rootElement.scrollIntoView({behavior:"smooth",block:"center"}),E(F),p.current=F+1,i==null||i({name:e,instanceIndex:F})},[e,i]);return Xt("div",{ref:d,onClick:W,onMouseEnter:()=>{c(!0),i==null||i({name:e,instanceIndex:0})},onMouseLeave:()=>{c(!1),i==null||i(null)},style:{marginBottom:8,background:C,padding:6,boxShadow:L,cursor:"pointer"},children:[Xt("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between"},children:[Xt("div",{style:{display:"flex",alignItems:"center",gap:6,marginBottom:6},children:[De("div",{style:{fontWeight:700,fontSize:11,letterSpacing:"0.05em",padding:"2px 6px",backgroundColor:k?M:"transparent",color:k?"#fff":"#6b7280"},children:e}),k&&u>1&&Xt("span",{style:{fontSize:10,fontWeight:600,color:"#9ca3af"},children:[x+1,"/",u]})]}),r&&a&&De("button",{type:"button",title:"Remove from model",onClick:Z=>{Z.stopPropagation(),r(e)},style:{border:"none",background:"none",cursor:"pointer",padding:"0 2px",fontSize:14,lineHeight:1,color:"#9ca3af",marginTop:-4},onMouseEnter:Z=>{Z.currentTarget.style.color="#FF0000"},onMouseLeave:Z=>{Z.currentTarget.style.color="#9ca3af"},children:"\u2715"})]}),w&&De("div",{style:{fontSize:11,color:k?"#1f2937":"#9ca3af",marginBottom:6,lineHeight:1.4},children:w}),s?De($l,{entries:h.filter(([Z])=>Z!=="description"),categoryKey:""}):De(xu,{name:e,onNotFound:()=>l(!0),entries:h})]})}function xu({name:e,onNotFound:t}){let[o,n]=yn(null),[r,i]=yn(!1);return Eo(()=>{let s=gu(e);s||t(),n(s),i(!0)},[e,t]),!r||!o?null:De(Ii,{onError:t,children:De("div",{"data-popmelt-panel":!0,onClick:s=>{s.preventDefault(),s.stopPropagation()},style:{width:"100%",overflowY:"auto",overflowX:"hidden",maxHeight:150,padding:"1rem",outline:"1px solid rgba(0,0,0,0.06)",backgroundColor:"rgb(250,250,250)",boxSizing:"border-box",marginBottom:4,display:"flex",flexDirection:"column",justifyContent:"stretch",alignItems:"center"},children:De("div",{style:{zoom:.5},children:Qd(o.type,o.props)})})})}function vu({components:e,selectedComponent:t,hoveredComponent:o,onRemove:n,onHover:r}){if(!e||Object.keys(e).length===0)return De("div",{style:{color:"#9ca3af",fontSize:11},children:"No component patterns defined yet."});let i=new Set(Object.keys(e)),s=Wr(i),l=Object.entries(e).sort(([a],[c])=>{var d,p;return((d=s.get(a))!=null?d:1/0)-((p=s.get(c))!=null?p:1/0)});return De(Co,{children:l.map(([a,c])=>De(bu,{name:a,value:c,selected:t===a,highlighted:o===a,onRemove:n,onHover:r},a))})}function Wl({bridgeUrl:e,modelRefreshKey:t,onMouseEnter:o,onMouseLeave:n,selectedComponent:r,hoveredComponent:i,onComponentHover:s,onSpacingTokenHover:l,onModifySpacingToken:a,onDeleteSpacingToken:c,onComponentAdded:d,onComponentRemoved:p}){let[u,g]=yn(void 0),[x,E]=yn(!0),[h,w]=yn(()=>{try{let F=localStorage.getItem(Hl);if(F==="tokens"||F==="components"||F==="rules")return F}catch(F){}return"components"});Eo(()=>{no(e).then(F=>{g(F),E(!1)})},[e,t]),Eo(()=>{try{localStorage.setItem(Hl,h)}catch(F){}},[h]),Eo(()=>{r&&(w("components"),no(e).then(F=>{F&&g(F)}))},[r,e]);let D=vr((F,K)=>{g(q=>{if(!(q!=null&&q.tokens))return q;let we=JSON.parse(JSON.stringify(q.tokens)),le=F.split("."),he=we;for(let Fe=1;Fe<le.length-1;Fe++)if(he=he[le[Fe]],!he)return q;return delete he[le[le.length-1]],m(f({},q),{tokens:we})}),c==null||c(F,K)},[c]),B=vr(F=>{g(K=>{if(!(K!=null&&K.components))return K;let le=K.components,{[F]:q}=le,we=Bn(le,[Ko(F)]);return m(f({},K),{components:we})}),p==null||p(F)},[p]),M=u==null?void 0:u.tokens,C=u==null?void 0:u.components,L=u==null?void 0:u.rules,k=M&&Object.keys(M).length>0,W=C&&Object.keys(C).length>0,ee=L&&L.length>0,Z=!u||!k&&!W&&!ee;return Xt("div",{style:lu,onMouseEnter:o,onMouseLeave:n,children:[Xt("div",{style:{display:"flex",alignItems:"center",gap:6,fontWeight:700,fontSize:13,marginBottom:6},children:[De("span",{children:"Model"}),De("code",{style:{fontSize:10,fontWeight:500,backgroundColor:"rgba(0,0,0,0.06)",padding:"1px 4px",color:"#6b7280"},children:"M"})]}),De("div",{style:{display:"flex",gap:12,marginBottom:10,borderBottom:"1px solid rgba(0,0,0,0.08)",paddingBottom:6},children:["components","rules"].map(F=>De("button",{type:"button",style:h===F?au:_l,onClick:()=>w(F),children:F.charAt(0).toUpperCase()+F.slice(1)},F))}),De("div",{style:{flex:1,overflowY:"auto",minHeight:0},children:x?De("div",{style:{color:"#9ca3af",fontSize:11},children:"Loading..."}):Z?De("div",{style:{color:"#9ca3af",lineHeight:1.5},children:"No design model yet. Pattern-scoped annotations will build one automatically."}):Xt(Co,{children:[h==="components"&&De(vu,{components:C,selectedComponent:r,hoveredComponent:i,onRemove:B,onHover:s}),h==="tokens"&&De(hu,{tokens:M,onSpacingTokenHover:l,onModifyToken:a,onDeleteToken:c?D:void 0}),h==="rules"&&De(yu,{rules:L})]})})]})}import{jsx as Yl}from"react/jsx-runtime";var In={iconDefault:"#1f2937",iconActive:"#1f2937",bgActive:"#f3f4f6",bgHover:"#f9fafb",separator:"#e5e7eb"};function Ln({children:e,active:t,siblingActive:o,disabled:n,onClick:r,title:i}){let s=()=>n?.4:o&&!t?.5:1,l={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:t?In.bgActive:"transparent",color:t?In.iconActive:In.iconDefault,opacity:s()};return Yl("button",{type:"button",onClick:n?void 0:r,title:i,disabled:n,style:l,onMouseEnter:a=>{n||(a.currentTarget.style.opacity="1",t||(a.currentTarget.style.backgroundColor=In.bgHover))},onMouseLeave:a=>{n||(a.currentTarget.style.opacity=String(s()),t||(a.currentTarget.style.backgroundColor="transparent"))},onMouseDown:a=>{n||(a.currentTarget.style.transform="scale(0.95)")},onMouseUp:a=>{n||(a.currentTarget.style.transform="scale(1)")},children:e})}function Ai(){return Yl("div",{style:{width:1,height:20,backgroundColor:"rgba(0, 0, 0, 0.05)",margin:"0 8px"}})}import{Fragment as Zn,jsx as ne,jsxs as xt}from"react/jsx-runtime";var qn=[{type:"rectangle",icon:Tu,label:"Rectangle",shortcut:"R"},{type:"circle",icon:Su,label:"Oval",shortcut:"O"},{type:"line",icon:Mu,label:"Line",shortcut:"L"},{type:"freehand",icon:Cu,label:"Pen",shortcut:"P"}],Ru=new Set(qn.map(e=>e.type));function Au(e,t,o,n,r,i,s,l){let a=(e-r)*(n-i)-(o-r)*(t-i),c=(e-s)*(i-l)-(r-s)*(t-l),d=(e-o)*(l-n)-(s-o)*(t-n),p=a<0||c<0||d<0,u=a>0||c>0||d>0;return!(p&&u)}function Pu(){let e=window.innerWidth-16,t=e-326,o=window.innerHeight-80;return{left:t,right:e,y:o}}var Bu=[{type:"text",icon:Lu,label:"Text",shortcut:"T"}],jl={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.
+`).length)*k.fontSize*1.4+8:0,ns=Ro.height+8,ga=Ro.isWrapped?ns-fa:0,ma=k?{position:"fixed",left:k.point.x-4-St.x,top:k.point.y-4-St.y-ga,zIndex:9999,width:Ro.width+8,height:ns,padding:4,fontSize:k.fontSize,fontFamily:Ft,color:"#ffffff",backgroundColor:e.activeColor,border:"none",borderRadius:0,outline:"none",boxShadow:"none",lineHeight:1.4,resize:"none",overflow:"hidden",whiteSpace:Ro.isWrapped?"pre-wrap":"pre",wordBreak:Ro.isWrapped?"break-word":void 0}:{};return So(wo,{children:[ot("canvas",{ref:w,id:"devtools-canvas",style:pa,onMouseDown:es,onMouseMove:ts,onMouseUp:b=>Mr(b),onMouseLeave:b=>{Mr(b),We(null),lt(null)},onTouchStart:es,onTouchMove:ts,onTouchEnd:b=>Mr(b),onContextMenu:da}),k&&So(wo,{children:[ot("style",{children:"#devtools-text-input::placeholder { color: rgba(255, 255, 255, 0.5); }"}),ot("textarea",{id:"devtools-text-input",ref:le,value:k.text,onChange:la,onKeyDown:aa,onPaste:ca,onBlur:to,placeholder:"Type here...",style:ma}),k.images&&k.images.length>0&&So("div",{"data-devtools":!0,style:{position:"fixed",left:k.point.x-4-St.x,top:k.point.y-4-St.y-20,zIndex:1e4,fontSize:11,fontFamily:"system-ui, sans-serif",color:"#fff",backgroundColor:"rgba(0,0,0,0.7)",padding:"2px 6px",borderRadius:3,whiteSpace:"nowrap"},children:[k.images.length," image",k.images.length>1?"s":""," attached"]})]}),e.isAnnotating&&e.activeTool!=="hand"&&e.styleModifications.length>0&&ot(pl,{styleModifications:e.styleModifications,isInspecting:!!e.inspectedElement,accentColor:e.activeColor,annotationGroupCount:new Set(e.annotations.map(b=>b.groupId||b.id)).size,dispatch:t,inFlightSelectors:r}),e.activeTool==="hand"&&e.isAnnotating&&e.styleModifications.length>0&&ot(gl,{styleModifications:e.styleModifications,accentColor:e.activeColor}),e.isAnnotating&&ot(nl,{annotations:e.annotations,supersededAnnotations:Pn,inFlightIds:n,scrollX:St.x,scrollY:St.y,annotationGroupMap:Go,onViewThread:a,onSelectAnnotation:Me,canvasRef:w}),e.isAnnotating&&l&&ot(ol,{annotations:e.annotations,supersededAnnotations:Pn,scrollX:St.x,scrollY:St.y,onReply:l,annotationGroupMap:Go,canvasRef:w}),e.isAnnotating&&i&&i.size>0&&ot(ti,{inFlightSelectorColors:i}),e.isAnnotating&&Ki&&ot(ti,{inFlightSelectorColors:Ki,animated:!1}),e.activeTool==="hand"&&e.isAnnotating&&(Pe?ft.current.element:rt)&&ot(si,{element:Pe?ft.current.element:rt,gap:Pe?{row:Pe.row,column:Pe.column}:Bo(rt),accentColor:e.activeColor,hoveredAxis:ct,draggingAxis:(rs=Pe==null?void 0:Pe.axis)!=null?rs:null,cursorViewport:at,isAutoGap:mt,refreshKey:Wt}),e.activeTool==="hand"&&e.isAnnotating&&Yt&&ot(Pl,{element:Yt.target,modifier:Yt.modifier,accentColor:e.activeColor,refreshKey:Wt}),e.activeTool==="hand"&&e.isAnnotating&&!Yt&&(nt?Gt.current.element:j)&&ot(al,{element:nt?Gt.current.element:j,radius:(is=nt==null?void 0:nt.radius)!=null?is:jn(j),accentColor:e.activeColor,hoveredCorner:He,draggingCorner:(ss=nt==null?void 0:nt.corner)!=null?ss:null,cursorViewport:at}),e.activeTool==="hand"&&e.isAnnotating&&!Yt&&(N?ut.current.element:ht)&&ot(Bl,{element:N?ut.current.element:ht,fontSize:(ls=N==null?void 0:N.fontSize)!=null?ls:Oo(ht).fontSize,lineHeight:(as=N==null?void 0:N.lineHeight)!=null?as:Oo(ht).lineHeight,accentColor:e.activeColor,hoveredProperty:Vt,draggingProperty:(cs=N==null?void 0:N.property)!=null?cs:null,cursorViewport:at}),e.activeTool==="hand"&&e.isAnnotating&&!Yt&&(ke?qe.current.element:Ne)&&ot(pi,{element:ke?qe.current.element:Ne,padding:(ds=ke==null?void 0:ke.padding)!=null?ds:uo(Ne),accentColor:e.activeColor,hoveredSide:A,draggingSide:(us=ke==null?void 0:ke.side)!=null?us:null,cursorViewport:at,refreshKey:N?N.fontSize+N.lineHeight*1e3:0}),e.activeTool==="inspector"&&e.isAnnotating&&ot(wo,{children:ue&&!e.inspectedElement&&(()=>{let b=!!q||!!(k!=null&&k.linkedSelector)||e.annotations.some(S=>{if(!S.linkedSelector)return!1;try{return ue.matches(S.linkedSelector)}catch(X){return!1}});return ot(mo,{element:ue,isSelected:!1,elementInfo:me,color:e.activeColor,hideTooltip:b})})()}),e.activeTool==="model"&&e.isAnnotating&&te.size>0&&[...te.entries()].map(([b,S])=>ot(mo,{element:S.rootElement,isSelected:!0,elementInfo:{selector:"",tagName:S.rootElement.tagName.toLowerCase(),reactComponent:b},color:"#8b5cf6"},b)),e.activeTool==="model"&&e.isAnnotating&&Lo&&ot(mo,{element:Lo.rootElement,isSelected:!0,elementInfo:{selector:"",tagName:Lo.rootElement.tagName.toLowerCase(),reactComponent:Lo.name},color:"#22c55e"}),e.activeTool==="model"&&e.isAnnotating&&cn.length>0&&cn.map((b,S)=>ot("div",{style:{position:"absolute",left:b.x,top:b.y,width:b.width,height:b.height,backgroundColor:"rgba(255, 0, 0, 0.08)",pointerEvents:"none",zIndex:9998},children:b.direction==="vertical"?So(wo,{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:b.height<16?-6:"50%",transform:b.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(b.height)})]}):So(wo,{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:b.width<30?0:"50%",top:(b.width<30,void 0),bottom:"calc(50% + 4px)",transform:b.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(b.width)})]})},S)),e.activeTool==="model"&&e.isAnnotating&&J&&ot(mo,{element:J.rootElement,isSelected:!1,elementInfo:{selector:"",tagName:J.rootElement.tagName.toLowerCase(),reactComponent:J.name},color:g!=null&&g.has(J.name)?"#22c55e":"#8b5cf6"}),e.activeTool==="hand"&&e.isAnnotating&&e.inspectedElement&&So(wo,{children:[de&&de!=="padding"&&de!=="gap"&&(()=>{var z;let b=new Set(e.annotations.map(Y=>Y.groupId||Y.id)).size,S=e.inspectedElement.info.selector,X=e.styleModifications.findIndex(Y=>Y.selector===S),I=X>=0?b+X+1:b+e.styleModifications.length+1,P=e.styleModifications.find(Y=>Y.selector===S),H=(z=P==null?void 0:P.changes.length)!=null?z:0,ie=!!(P!=null&&P.captured);return ot(mo,{element:e.inspectedElement.el,isSelected:!0,elementInfo:e.inspectedElement.info,color:ie?"#999999":e.activeColor,annotationNumber:I,changeCount:H})})(),de==="padding"&&ot(pi,{element:e.inspectedElement.el,padding:uo(e.inspectedElement.el),accentColor:e.activeColor,hoveredSide:null,draggingSide:null}),de==="gap"&&ot(si,{element:e.inspectedElement.el,gap:Bo(e.inspectedElement.el),accentColor:e.activeColor,hoveredAxis:null,draggingAxis:null}),ot(Rl,{element:e.inspectedElement.el,elementInfo:e.inspectedElement.info,selector:e.inspectedElement.info.selector,styleModifications:e.styleModifications,dispatch:t,onClose:()=>t({type:"SELECT_ELEMENT",payload:null}),onHover:Le,accentColor:e.activeColor})]})]})}import{useCallback as ln,useEffect as bn,useMemo as Pi,useRef as It,useState as _o}from"react";import{Circle as Su,Component as wu,Hand as ku,MessageCircle as Eu,Pen as Cu,Slash as Mu,Square as Tu,Trash2 as Iu,Type as Lu}from"lucide-react";import{useEffect as Kd,useRef as Zd}from"react";function Nl(e,t,o,n,r){let i=Zd(0);Kd(()=>{if(!o.current||(localStorage.setItem(r.expanded,String(e)),!e))return;let s=t.annotations.length;(s>=i.current||s===0||!n)&&(localStorage.setItem(r.annotations,JSON.stringify(t.annotations)),i.current=s),localStorage.setItem(r.styleMods,JSON.stringify(t.styleModifications)),localStorage.setItem(r.spacingChanges,JSON.stringify(t.spacingTokenChanges)),localStorage.setItem(r.tool,t.activeTool),localStorage.setItem(r.color,t.activeColor),localStorage.setItem(r.stroke,String(t.strokeWidth)),t.inspectedElement?localStorage.setItem(r.inspected,JSON.stringify({selector:t.inspectedElement.info.selector,info:t.inspectedElement.info})):localStorage.removeItem(r.inspected)},[e,t.annotations,t.styleModifications,t.spacingTokenChanges,t.activeTool,t.activeColor,t.strokeWidth,t.inspectedElement,n,o,r])}import{Component as qd,createElement as Qd,useCallback as vr,useEffect as Eo,useRef as ko,useState as yn}from"react";import{Fragment as Co,jsx as De,jsxs as Xt}from"react/jsx-runtime";var Hl="popmelt-library-tab",eu=/^#[0-9a-fA-F]{3,8}$/,tu=/^(?: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 zl(e){let t=e.trim();return eu.test(t)||tu.test(t)||nu.has(t.toLowerCase())}function ru(e){return ou.test(e.trim())}function iu(e){let t=e.trim().match(/^(-?\d+(?:\.\d+)?)px$/);return t?parseFloat(t[1]):null}function Li(e,t=""){if(e==null)return[];if(typeof e!="object")return[[t,String(e)]];if(Array.isArray(e))return[[t,e.map(String).join(", ")]];let o=[];for(let[n,r]of Object.entries(e)){let i=t?`${t}.${n}`:n;if(r!==null&&typeof r=="object"&&!Array.isArray(r)){let s=r;typeof s.value=="string"?o.push([i,s.value]):o.push(...Li(r,i))}else o.push([i,Array.isArray(r)?r.map(String).join(", "):String(r!=null?r:"")])}return o}function su(e){return e.length===0?"generic":e.filter(([,n])=>zl(n)).length>e.length/2?"colors":e.filter(([,n])=>ru(n)).length>e.length/2?"spacing":"generic"}var lu=m(f({position:"fixed",top:16,right:16,bottom:80,width:300,backgroundColor:"#ffffff"},gn),{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"}),_l={border:"none",background:"none",cursor:"pointer",fontFamily:"inherit",fontSize:11,fontWeight:600,padding:"2px 0",color:"#9ca3af"},au=m(f({},_l),{color:"#1f2937",borderBottom:"1.5px solid #1f2937"});function cu({entries:e}){let t=[],o=[];for(let n of e)zl(n[1])?t.push(n):o.push(n);return Xt(Co,{children:[t.length>0&&De("div",{style:{display:"flex",flexWrap:"wrap",gap:2,marginBottom:o.length>0?6:0},children:t.map(([n,r])=>De("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&&De(Ri,{entries:o})]})}var xr=[0,1,2,4,8,12,16,20,24,28,32];function du(e){if(e<=32){let t=xr[0],o=Math.abs(e-t);for(let n=1;n<xr.length;n++){let r=Math.abs(e-xr[n]);r<o&&(t=xr[n],o=r)}return t}return Math.round(e/8)*8}function uu({label:e,value:t,px:o,tokenPath:n,rawToken:r,onHover:i,onModify:s,onDelete:l}){let[a,c]=yn(!1),[d,p]=yn(null),u=ko(!1),g=ko(0),x=ko(0),E=ko([]),h=d!==null?d:o,w=d!==null?`${d}px`:t,D=d!==null,B=vr(C=>{C.preventDefault(),u.current=!0,g.current=C.clientX,x.current=o;let L=or(r);E.current=Gr(L);let k=ee=>{let Z=ee.clientX-g.current,F=Math.max(0,Math.round(x.current+Z));ee.shiftKey&&(F=du(F));for(let K of E.current)K.element.style.setProperty(K.property,F+"px","important");p(F),i==null||i({name:e,px:F,token:L})},W=()=>{window.removeEventListener("mousemove",k),window.removeEventListener("mouseup",W),document.body.style.cursor="",u.current=!1,p(ee=>{if(ee!==null&&ee!==o&&s){let Z=or(r),F=Z.bindings&&Z.bindings.length>0,K;if(F){let he=Ur(Z.bindings,x.current,ee);K=JSON.stringify(m(f({},Z),{value:`${ee}px`,bindings:he}))}else{let he=Us(E.current,x.current),Fe=Js(E.current);if(he.length>0){let Ie=Ur(he,x.current,ee);K=JSON.stringify({value:`${ee}px`,property:Fe,bindings:Ie})}else K=`${ee}px`}let q=typeof r=="string"?r:JSON.stringify(r),we=E.current.map(he=>({selector:on(he.element),property:he.property})),le=Ks(E.current,x.current,ee);s({tokenPath:n,originalValue:q,currentValue:K,targets:we,originalPx:x.current,currentPx:ee},{id:Math.random().toString(36).substring(2,9),tokenPath:n,tokenName:e,originalPx:x.current,newPx:ee,affectedElements:le})}return ee})};document.body.style.cursor="ew-resize",window.addEventListener("mousemove",k),window.addEventListener("mouseup",W)},[o,e,n,r,i,s]),M=or(r);return Xt("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",fontSize:11,padding:"1px 0",cursor:"ew-resize",userSelect:"none"},onMouseEnter:()=>{u.current||(c(!0),i==null||i({name:e,px:h,token:M}))},onMouseLeave:()=>{u.current||(c(!1),i==null||i(null))},onMouseDown:B,children:[De("span",{style:{color:a||D?"#FF0000":"#9ca3af"},children:e}),Xt("span",{style:{display:"flex",alignItems:"center",gap:4},children:[De("span",{style:{color:a||D?"#FF0000":"#6b7280",fontWeight:600},children:w}),l&&a&&!D&&De("button",{type:"button",title:"Remove token",onMouseDown:C=>{C.stopPropagation();let L=typeof r=="string"?r:JSON.stringify(r);l(n,L)},style:{border:"none",background:"none",cursor:"pointer",padding:0,fontSize:10,lineHeight:1,color:"#9ca3af"},onMouseEnter:C=>{C.currentTarget.style.color="#FF0000"},onMouseLeave:C=>{C.currentTarget.style.color="#9ca3af"},children:"\u2715"})]})]})}function pu({entries:e,categoryKey:t,rawTokens:o,onHover:n,onModify:r,onDelete:i}){let s=[],l=[];for(let a of e){let c=iu(a[1]);c!==null?s.push([a[0],a[1],c]):l.push(a)}return Xt(Co,{children:[s.length>0&&De("div",{style:{display:"flex",flexDirection:"column",gap:2},children:s.map(([a,c,d])=>{let p=a.split(".").pop(),u=o?fu(o,a):c,g=u&&typeof u=="object"&&"value"in u?u:c;return De(uu,{label:p,value:c,px:d,tokenPath:`tokens.${t}.${a}`,rawToken:g,onHover:n,onModify:r,onDelete:i},a)})}),l.length>0&&De(Ri,{entries:l})]})}function fu(e,t){let o=t.split("."),n=e;for(let r of o){if(n==null||typeof n!="object")return;n=n[r]}return n}function Ri({entries:e}){return De("div",{style:{display:"flex",flexDirection:"column",gap:3},children:e.map(([t,o])=>Xt("div",{style:{fontSize:11},children:[De("div",{style:{color:"#9ca3af",fontSize:10,marginBottom:1},children:t}),De("div",{style:{color:"#1f2937",lineHeight:1.4,paddingLeft:8},children:o})]},t))})}function $l({entries:e,categoryKey:t,rawTokens:o,onSpacingHover:n,onModifyToken:r,onDeleteToken:i}){let s=su(e);return s==="colors"?De(cu,{entries:e}):s==="spacing"?De(pu,{entries:e,categoryKey:t,rawTokens:o,onHover:n,onModify:r,onDelete:i}):De(Ri,{entries:e})}function gu(e){let t=e.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,s=Object.keys(i).find(a=>a.startsWith("__reactFiber$")||a.startsWith("__reactInternalInstance$"));if(!s)continue;let l=i[s];for(;l;){let a=l.type,c=typeof a=="function"||typeof a=="object"?(a==null?void 0:a.displayName)||(a==null?void 0:a.name):null;if(typeof c=="string"){let d=c.toLowerCase();if(d===t){let p=f({},l.memoizedProps);return delete p.ref,{type:a,props:p}}if(!o){if(d.length>=4&&t.includes(d)){let p=f({},l.memoizedProps);delete p.ref,o={type:a,props:p}}else if(t.length>=4&&d.includes(t)){let p=f({},l.memoizedProps);delete p.ref,o={type:a,props:p}}}}l=l.return}}return o}var Ii=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:e}){return De("div",{style:{fontWeight:700,fontSize:11,color:"#6b7280",letterSpacing:"0.05em",marginBottom:6},children:e})}function hu({tokens:e,onSpacingTokenHover:t,onModifyToken:o,onDeleteToken:n}){return!e||Object.keys(e).length===0?De("div",{style:{color:"#9ca3af",fontSize:11},children:"No tokens defined yet."}):De(Co,{children:Object.entries(e).map(([r,i])=>Xt("div",{style:{marginBottom:14},children:[De(mu,{children:r}),De($l,{entries:Li(i),categoryKey:r,rawTokens:i,onSpacingHover:t,onModifyToken:o,onDeleteToken:n})]},r))})}function yu({rules:e}){return!e||e.length===0?De("div",{style:{color:"#9ca3af",fontSize:11},children:"No rules defined yet."}):De(Co,{children:e.map((t,o)=>Xt("div",{style:{display:"flex",gap:6,marginBottom:4,lineHeight:1.4,fontSize:11},children:[Xt("span",{style:{color:"#9ca3af",flexShrink:0},children:[o+1,"."]}),De("span",{children:t})]},o))})}function bu({name:e,value:t,selected:o,highlighted:n,onRemove:r,onHover:i}){var ee;let[s,l]=yn(!1),[a,c]=yn(!1),d=ko(null),p=ko(0),[u,g]=yn(0),[x,E]=yn(0),h=Li(t),w=(ee=h.find(([Z])=>Z==="description"))==null?void 0:ee[1];Eo(()=>{if(!a&&!n){g(0),E(0),p.current=0;return}let Z=ao(e);g(Z.length)},[a,n,e]),Eo(()=>{o&&d.current&&d.current.scrollIntoView({behavior:"smooth",block:"nearest"})},[o]);let D=o||n||a,B=o?"139,92,246":"34,197,94",M=o?"#8b5cf6":"#22c55e",C=D?`rgba(${B},0.06)`:void 0,L=D?`inset 0 0 0 1.5px rgba(${B},0.35)`:void 0,k=n||a,W=vr(()=>{let Z=ao(e);if(Z.length===0)return;let F=p.current%Z.length;Z[F].rootElement.scrollIntoView({behavior:"smooth",block:"center"}),E(F),p.current=F+1,i==null||i({name:e,instanceIndex:F})},[e,i]);return Xt("div",{ref:d,onClick:W,onMouseEnter:()=>{c(!0),i==null||i({name:e,instanceIndex:0})},onMouseLeave:()=>{c(!1),i==null||i(null)},style:{marginBottom:8,background:C,padding:6,boxShadow:L,cursor:"pointer"},children:[Xt("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between"},children:[Xt("div",{style:{display:"flex",alignItems:"center",gap:6,marginBottom:6},children:[De("div",{style:{fontWeight:700,fontSize:11,letterSpacing:"0.05em",padding:"2px 6px",backgroundColor:k?M:"transparent",color:k?"#fff":"#6b7280"},children:e}),k&&u>1&&Xt("span",{style:{fontSize:10,fontWeight:600,color:"#9ca3af"},children:[x+1,"/",u]})]}),r&&a&&De("button",{type:"button",title:"Remove from model",onClick:Z=>{Z.stopPropagation(),r(e)},style:{border:"none",background:"none",cursor:"pointer",padding:"0 2px",fontSize:14,lineHeight:1,color:"#9ca3af",marginTop:-4},onMouseEnter:Z=>{Z.currentTarget.style.color="#FF0000"},onMouseLeave:Z=>{Z.currentTarget.style.color="#9ca3af"},children:"\u2715"})]}),w&&De("div",{style:{fontSize:11,color:k?"#1f2937":"#9ca3af",marginBottom:6,lineHeight:1.4},children:w}),s?De($l,{entries:h.filter(([Z])=>Z!=="description"),categoryKey:""}):De(xu,{name:e,onNotFound:()=>l(!0),entries:h})]})}function xu({name:e,onNotFound:t}){let[o,n]=yn(null),[r,i]=yn(!1);return Eo(()=>{let s=gu(e);s||t(),n(s),i(!0)},[e,t]),!r||!o?null:De(Ii,{onError:t,children:De("div",{"data-popmelt-panel":!0,onClick:s=>{s.preventDefault(),s.stopPropagation()},style:{width:"100%",overflowY:"auto",overflowX:"hidden",maxHeight:150,padding:"1rem",outline:"1px solid rgba(0,0,0,0.06)",backgroundColor:"rgb(250,250,250)",boxSizing:"border-box",marginBottom:4,display:"flex",flexDirection:"column",justifyContent:"stretch",alignItems:"center",contain:"layout paint",position:"relative",isolation:"isolate"},children:De("div",{style:{zoom:.5,pointerEvents:"none"},children:Qd(o.type,o.props)})})})}function vu({components:e,selectedComponent:t,hoveredComponent:o,onRemove:n,onHover:r}){if(!e||Object.keys(e).length===0)return De("div",{style:{color:"#9ca3af",fontSize:11},children:"No component patterns defined yet."});let i=new Set(Object.keys(e)),s=Wr(i),l=Object.entries(e).sort(([a],[c])=>{var d,p;return((d=s.get(a))!=null?d:1/0)-((p=s.get(c))!=null?p:1/0)});return De(Co,{children:l.map(([a,c])=>De(bu,{name:a,value:c,selected:t===a,highlighted:o===a,onRemove:n,onHover:r},a))})}function Wl({bridgeUrl:e,modelRefreshKey:t,onMouseEnter:o,onMouseLeave:n,selectedComponent:r,hoveredComponent:i,onComponentHover:s,onSpacingTokenHover:l,onModifySpacingToken:a,onDeleteSpacingToken:c,onComponentAdded:d,onComponentRemoved:p}){let[u,g]=yn(void 0),[x,E]=yn(!0),[h,w]=yn(()=>{try{let F=localStorage.getItem(Hl);if(F==="tokens"||F==="components"||F==="rules")return F}catch(F){}return"components"});Eo(()=>{no(e).then(F=>{g(F),E(!1)})},[e,t]),Eo(()=>{try{localStorage.setItem(Hl,h)}catch(F){}},[h]),Eo(()=>{r&&(w("components"),no(e).then(F=>{F&&g(F)}))},[r,e]);let D=vr((F,K)=>{g(q=>{if(!(q!=null&&q.tokens))return q;let we=JSON.parse(JSON.stringify(q.tokens)),le=F.split("."),he=we;for(let Fe=1;Fe<le.length-1;Fe++)if(he=he[le[Fe]],!he)return q;return delete he[le[le.length-1]],m(f({},q),{tokens:we})}),c==null||c(F,K)},[c]),B=vr(F=>{g(K=>{if(!(K!=null&&K.components))return K;let le=K.components,{[F]:q}=le,we=Bn(le,[Ko(F)]);return m(f({},K),{components:we})}),p==null||p(F)},[p]),M=u==null?void 0:u.tokens,C=u==null?void 0:u.components,L=u==null?void 0:u.rules,k=M&&Object.keys(M).length>0,W=C&&Object.keys(C).length>0,ee=L&&L.length>0,Z=!u||!k&&!W&&!ee;return Xt("div",{style:lu,onMouseEnter:o,onMouseLeave:n,children:[Xt("div",{style:{display:"flex",alignItems:"center",gap:6,fontWeight:700,fontSize:13,marginBottom:6},children:[De("span",{children:"Model"}),De("code",{style:{fontSize:10,fontWeight:500,backgroundColor:"rgba(0,0,0,0.06)",padding:"1px 4px",color:"#6b7280"},children:"M"})]}),De("div",{style:{display:"flex",gap:12,marginBottom:10,borderBottom:"1px solid rgba(0,0,0,0.08)",paddingBottom:6},children:["components","rules"].map(F=>De("button",{type:"button",style:h===F?au:_l,onClick:()=>w(F),children:F.charAt(0).toUpperCase()+F.slice(1)},F))}),De("div",{style:{flex:1,overflowY:"auto",minHeight:0},children:x?De("div",{style:{color:"#9ca3af",fontSize:11},children:"Loading..."}):Z?De("div",{style:{color:"#9ca3af",lineHeight:1.5},children:"No design model yet. Pattern-scoped annotations will build one automatically."}):Xt(Co,{children:[h==="components"&&De(vu,{components:C,selectedComponent:r,hoveredComponent:i,onRemove:B,onHover:s}),h==="tokens"&&De(hu,{tokens:M,onSpacingTokenHover:l,onModifyToken:a,onDeleteToken:c?D:void 0}),h==="rules"&&De(yu,{rules:L})]})})]})}import{jsx as Yl}from"react/jsx-runtime";var In={iconDefault:"#1f2937",iconActive:"#1f2937",bgActive:"#f3f4f6",bgHover:"#f9fafb",separator:"#e5e7eb"};function Ln({children:e,active:t,siblingActive:o,disabled:n,onClick:r,title:i}){let s=()=>n?.4:o&&!t?.5:1,l={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:t?In.bgActive:"transparent",color:t?In.iconActive:In.iconDefault,opacity:s()};return Yl("button",{type:"button",onClick:n?void 0:r,title:i,disabled:n,style:l,onMouseEnter:a=>{n||(a.currentTarget.style.opacity="1",t||(a.currentTarget.style.backgroundColor=In.bgHover))},onMouseLeave:a=>{n||(a.currentTarget.style.opacity=String(s()),t||(a.currentTarget.style.backgroundColor="transparent"))},onMouseDown:a=>{n||(a.currentTarget.style.transform="scale(0.95)")},onMouseUp:a=>{n||(a.currentTarget.style.transform="scale(1)")},children:e})}function Ai(){return Yl("div",{style:{width:1,height:20,backgroundColor:"rgba(0, 0, 0, 0.05)",margin:"0 8px"}})}import{Fragment as Zn,jsx as ne,jsxs as xt}from"react/jsx-runtime";var qn=[{type:"rectangle",icon:Tu,label:"Rectangle",shortcut:"R"},{type:"circle",icon:Su,label:"Oval",shortcut:"O"},{type:"line",icon:Mu,label:"Line",shortcut:"L"},{type:"freehand",icon:Cu,label:"Pen",shortcut:"P"}],Ru=new Set(qn.map(e=>e.type));function Au(e,t,o,n,r,i,s,l){let a=(e-r)*(n-i)-(o-r)*(t-i),c=(e-s)*(i-l)-(r-s)*(t-l),d=(e-o)*(l-n)-(s-o)*(t-n),p=a<0||c<0||d<0,u=a>0||c>0||d>0;return!(p&&u)}function Pu(){let e=window.innerWidth-16,t=e-326,o=window.innerHeight-80;return{left:t,right:e,y:o}}var Bu=[{type:"text",icon:Lu,label:"Text",shortcut:"T"}],jl={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.
 
 Your AI gets the visual and technical context it needs to act.`,usage:[],keys:[{key:"\u2318\u2318",desc:"Toggle toolbar"}]}},Ou=m(f({position:"fixed",bottom:16,right:16,zIndex:9999,display:"flex",alignItems:"center",backgroundColor:"#ffffff"},gn),{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)"}),Bi="devtools-toolbar-expanded",Oi="devtools-annotations",Di="devtools-style-modifications",Fi="devtools-active-tool",Gl="devtools-active-color",Vl="devtools-stroke-width",Ul="devtools-inspected-element",Ni="devtools-spacing-changes",Du={expanded:Bi,annotations:Oi,styleMods:Di,spacingChanges:Ni,tool:Fi,color:Gl,stroke:Vl,inspected:Ul};function Fu(){return ne("svg",{width:"16",height:"16",viewBox:"0 0 1200 1200",fill:"currentColor",stroke:"none",children:ne("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 ne("svg",{width:"16",height:"16",viewBox:"0 0 158.7128 157.296",fill:"currentColor",stroke:"none",children:ne("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 Jl({state:e,dispatch:t,onScreenshot:o,onSendToClaude:n,hasActiveJobs:r,activeJobColor:i,onCrosshairHover:s,onClear:l,provider:a="claude",onProviderChange:c,availableProviders:d,modelIndex:p=0,modelCount:u=2,modelLabel:g="Opus 4.6",onModelChange:x,onViewThread:E,isThreadPanelOpen:h,mcpStatus:w,onInstallMcp:D,mcpJustInstalled:B,bridgeUrl:M,isBridgeConnected:C,modelSelectedComponent:L,modelCanvasHoveredComponent:k,onModelComponentHover:W,onSpacingTokenHover:ee,onModifySpacingToken:Z,onDeleteSpacingToken:F,modelRefreshKey:K,onModelComponentAdded:q,onModelComponentRemoved:we,onMouseEnter:le}){let[he,Fe]=_o(()=>typeof window=="undefined"?!1:localStorage.getItem(Bi)==="true"),[Ie,$e]=_o(0),J=It(0),V=It(0),te=It(e.isAnnotating),fe=It(!1),Ce=It(typeof window!="undefined"?localStorage.getItem(Fi):null),ge=It(typeof window!="undefined"?localStorage.getItem(Gl):null),ue=It(typeof window!="undefined"?localStorage.getItem(Vl):null),{charIndex:We}=ur(!!r),[me,lt]=_o(null),qe=It(!1),Ne=It(null),tt=It(null),A=It({x:0,y:0}),re=It(null),de=It(null),Le=It(null),ke=ln(()=>{re.current=null,de.current=null,Le.current&&(clearTimeout(Le.current),Le.current=null)},[]),Re=ln(N=>{tt.current&&(clearTimeout(tt.current),tt.current=null),qe.current?(re.current=N,de.current=f({},A.current),Le.current&&clearTimeout(Le.current),Le.current=setTimeout(()=>{re.current&&(lt(re.current),ke())},300)):(Ne.current&&clearTimeout(Ne.current),Ne.current=setTimeout(()=>{qe.current=!0,lt(N),Ne.current=null},500))},[ke]),ve=ln(()=>{ke(),Ne.current&&(clearTimeout(Ne.current),Ne.current=null),tt.current=setTimeout(()=>{qe.current=!1,lt(null)},150)},[ke]),at=ln(N=>{if(A.current={x:N.clientX,y:N.clientY},re.current&&de.current){let Q=de.current,pe=Pu();Au(N.clientX,N.clientY,Q.x,Q.y,pe.left,pe.y,pe.right,pe.y)||(lt(re.current),ke())}},[ke]),Qe=Pi(()=>{let N=(d!=null?d:[]).map(Q=>Q==="claude"?"Claude":Q==="codex"?"Codex":Q);return{name:"AI Model",desc:N.length>1?`${N.join(" and ")} are available.`:N.length===1?`Connected to ${N[0]}.`:"No AI providers detected.",usage:N.length>1?["Click the logo to switch between providers","Click the model name to switch tiers"]:["Click the model name to switch tiers"],keys:N.length>1?[{key:"Click",desc:"Switch"},{key:"\u2318 Enter",desc:"Hand off to your AI",accent:!0}]:[{key:"\u2318 Enter",desc:"Hand off to your AI",accent:!0}]}},[d]);Nl(he,e,fe,!!r,Du),bn(()=>{if(localStorage.getItem(Bi)==="true"&&!e.isAnnotating){if(he||Fe(!0),t({type:"SET_TOOL",payload:Ce.current||"inspector"}),t({type:"SET_ANNOTATING",payload:!0}),ge.current&&t({type:"SET_COLOR",payload:ge.current}),ue.current){let v=parseFloat(ue.current);isNaN(v)||t({type:"SET_STROKE_WIDTH",payload:v})}let Q=localStorage.getItem(Oi);if(Q)try{let v=JSON.parse(Q);Array.isArray(v)&&v.length>0&&t({type:"RESTORE_ANNOTATIONS",payload:{annotations:v}})}catch(v){}let pe=localStorage.getItem(Di);if(pe)try{let v=JSON.parse(pe);Array.isArray(v)&&v.length>0&&(t({type:"RESTORE_STYLE_MODIFICATIONS",payload:v}),sr(v))}catch(v){}let Ae=localStorage.getItem(Ni);if(Ae)try{let v=JSON.parse(Ae);Array.isArray(v)&&v.length>0&&t({type:"RESTORE_SPACING_TOKEN_CHANGES",payload:v})}catch(v){}let Te=localStorage.getItem(Ul);if(Te)try{let{selector:v,info:U}=JSON.parse(Te);if(v){let oe=jt(v);if(oe){let Be=U||m(f({},Jt(oe)),{selector:v});t({type:"SELECT_ELEMENT",payload:{el:oe,info:Be}})}}}catch(v){}}return fe.current=!0,()=>{fe.current=!1}},[]);let ft=It(e.styleModifications);bn(()=>{let N=ft.current,Q=e.styleModifications;N!==Q&&(lr(N),sr(Q),ft.current=Q)},[e.styleModifications]),bn(()=>{let N=te.current;te.current=e.isAnnotating,N&&!e.isAnnotating&&he&&Fe(!1)},[e.isAnnotating,he]);let rt=It(he);rt.current=he,bn(()=>{let N=pe=>{if(pe.key==="Meta"||pe.key==="Control"){let Ae=Date.now();if(Ae-J.current<300){if(V.current++,V.current>=2){if(rt.current)t({type:"SET_ANNOTATING",payload:!1}),Fe(!1);else{let U=localStorage.getItem(Fi);t({type:"SET_TOOL",payload:U||"inspector"}),t({type:"SET_ANNOTATING",payload:!0}),Fe(!0)}V.current=0}}else V.current=1;J.current=Ae}else V.current=0},Q=pe=>{pe.key!=="Meta"&&pe.key!=="Control"&&(V.current=0)};return window.addEventListener("keydown",N),window.addEventListener("keyup",Q),()=>{window.removeEventListener("keydown",N),window.removeEventListener("keyup",Q)}},[t]);let gt=ln(N=>{ke(),t({type:"SET_TOOL",payload:N}),e.isAnnotating||t({type:"SET_ANNOTATING",payload:!0}),qe.current=!1,lt(null),Ne.current&&(clearTimeout(Ne.current),Ne.current=null),tt.current&&(clearTimeout(tt.current),tt.current=null)},[t,e.isAnnotating,ke]),ct=ln(async()=>{window.focus(),await o()},[o]),Ct=ln(async()=>{n&&await n()},[n]),Pe=ln(()=>{t({type:"SET_ANNOTATING",payload:!1}),Fe(!1)},[t]),Kt=ln(()=>{lr(e.styleModifications),document.querySelectorAll("[data-pm]").forEach(N=>N.removeAttribute("data-pm")),t({type:"CLEAR"}),t({type:"CLEAR_ALL_STYLES"}),localStorage.removeItem(Oi),localStorage.removeItem(Di),localStorage.removeItem(Ni),ut(null),l==null||l()},[t,e.styleModifications,l]),[mt,Dt]=_o(29),Wt=It(null),xn=It(null),Yt=It(!1),Zt=ln(N=>{let Q=N.match(/oklch\([^)]*\s+([\d.]+)\s*\)/);return Q&&Q[1]?parseFloat(Q[1]):null},[]);bn(()=>{Yt.current=!0;let N=`oklch(0.628 0.258 ${mt})`;t({type:"SET_COLOR",payload:N}),requestAnimationFrame(()=>{Yt.current=!1})},[mt,t]),bn(()=>{if(Yt.current)return;let N=Zt(e.activeColor);N!==null&&Math.abs(N-mt)>.5&&Dt(N)},[e.activeColor,Zt,mt]);let Gt=e.annotations.length>0;bn(()=>{let N=xn.current;if(!N||!Gt)return;let Q=pe=>{pe.preventDefault(),pe.stopPropagation();let Ae=pe.deltaY>0?-1:1,Te=((mt+Ae)%360+360)%360,v=`oklch(0.628 0.258 ${Te})`;Dt(Te),e.selectedAnnotationIds.length>0&&t({type:"UPDATE_ANNOTATION_COLOR",payload:{id:e.lastSelectedId||e.selectedAnnotationIds[0],color:v}})};return N.addEventListener("wheel",Q,{passive:!1}),()=>N.removeEventListener("wheel",Q)},[Gt,e.selectedAnnotationIds,e.lastSelectedId,mt,t]);let j=It(!1),Ee=ln(()=>{j.current=!1,Wt.current=setTimeout(()=>{j.current=!0,Dt(29)},500)},[]),He=ln(()=>{Wt.current&&(clearTimeout(Wt.current),Wt.current=null)},[]);bn(()=>()=>{Wt.current&&clearTimeout(Wt.current),Le.current&&clearTimeout(Le.current)},[]);let qt=Pi(()=>dr(e.annotations),[e.annotations]),nt=Pi(()=>{let N=[],Q=new Set;for(let pe of e.annotations)if(!qt.has(pe))if(pe.groupId){if(!Q.has(pe.groupId)){Q.add(pe.groupId);let Ae=e.annotations.filter(v=>v.groupId===pe.groupId&&!qt.has(v)),Te=Ae.find(v=>v.type!=="text")||Ae[0];N.push({id:Te.id,annotations:Ae})}}else N.push({id:pe.id,annotations:[pe]});return N},[e.annotations,qt]),[vt,ut]=_o(null),ht=nt.length+e.styleModifications.length;bn(()=>{(ht===0||vt!==null&&vt>=ht)&&ut(null)},[ht,vt]),bn(()=>{if(e.selectedAnnotationIds.length===0&&!e.inspectedElement){ut(null);return}if(e.selectedAnnotationIds.length>0){let N=e.selectedAnnotationIds[0],Q=nt.findIndex(pe=>pe.id===N||pe.annotations.some(Ae=>Ae.id===N));Q>=0&&Q!==vt&&ut(Q)}},[e.selectedAnnotationIds,e.inspectedElement,nt]);let An=ln(()=>{var Q;if(ht===0)return;let N;if(vt===null?N=0:N=(vt+1)%ht,ut(N),N<nt.length){let pe=nt[N];if(!pe)return;t({type:"SELECT_ELEMENT",payload:null}),t({type:"SELECT_ANNOTATION",payload:{id:pe.id}});let Ae=pe.annotations.find(Me=>Me.type!=="text")||pe.annotations[0];if(pe.annotations.some(Me=>Me.linkedSelector))t({type:"SET_TOOL",payload:"inspector"});else if(Ae!=null&&Ae.type&&Ae.type!=="text"&&Ae.type!=="inspector"){t({type:"SET_TOOL",payload:Ae.type});let Me=qn.findIndex(Ye=>Ye.type===Ae.type);Me>=0&&$e(Me)}if(Ae!=null&&Ae.color){t({type:"SET_COLOR",payload:Ae.color});let Me=Zt(Ae.color);Me!==null&&Dt(Me)}let v=pe.annotations.flatMap(Me=>Me.points);if(v.length===0)return;let U=Math.min(...v.map(Me=>Me.x)),oe=Math.max(...v.map(Me=>Me.x)),Be=Math.min(...v.map(Me=>Me.y)),ye=Math.max(...v.map(Me=>Me.y)),et=(U+oe)/2,je=(Be+ye)/2;if(window.scrollTo({left:et-window.innerWidth/2,top:je-window.innerHeight/2,behavior:"smooth"}),h&&E){let Me=(Q=pe.annotations.find(Ye=>Ye.threadId))==null?void 0:Q.threadId;Me&&E(Me)}}else{let pe=N-nt.length,Ae=e.styleModifications[pe];if(!Ae)return;let Te=jt(Ae.selector);if(!Te)return;t({type:"SELECT_ANNOTATION",payload:{id:null}}),t({type:"SET_TOOL",payload:"inspector"}),t({type:"SELECT_ELEMENT",payload:{el:Te,info:Ae.element}});let v=Te.getBoundingClientRect(),U=v.left+v.width/2+window.scrollX,oe=v.top+v.height/2+window.scrollY;window.scrollTo({left:U-window.innerWidth/2,top:oe-window.innerHeight/2,behavior:"smooth"})}},[nt,e.styleModifications,ht,vt,t,Zt,h,E]);bn(()=>{if(!he)return;let N=Q=>{let pe=document.activeElement;if((pe==null?void 0:pe.tagName)==="INPUT"||(pe==null?void 0:pe.tagName)==="TEXTAREA")return;if((Q.metaKey||Q.ctrlKey)&&Q.key==="Enter"){n&&(e.annotations.length>0||e.styleModifications.length>0||e.spacingTokenChanges.filter(v=>!v.captured).length>0)&&(Q.preventDefault(),Ct());return}if((Q.metaKey||Q.ctrlKey)&&(Q.key==="c"||Q.key==="C"||Q.code==="KeyC")){(e.annotations.length>0||e.styleModifications.length>0)&&(Q.preventDefault(),window.focus(),ct());return}if((Q.metaKey||Q.ctrlKey)&&(Q.key==="Backspace"||Q.key==="Delete")){Q.preventDefault(),Kt();return}if(Q.metaKey||Q.ctrlKey||Q.altKey)return;let Ae={p:"freehand",l:"line",r:"rectangle",o:"circle",t:"text",c:"inspector",h:"hand"};if(Q.key.toLowerCase()==="m"){Q.preventDefault(),gt("model");return}let Te=Ae[Q.key.toLowerCase()];if(Te){Q.preventDefault();let v=qn.findIndex(U=>U.type===Te);v>=0&&$e(v),gt(Te)}};return window.addEventListener("keydown",N),()=>window.removeEventListener("keydown",N)},[he,gt,ct,Ct,n,Kt,e.annotations.length,e.styleModifications.length,e.spacingTokenChanges,me]);let Vt=m(f({},Ou),{borderRadius:0,padding:he?"0 8px":"0",width:he?"auto":48,height:48,gap:0,justifyContent:he?"flex-start":"center"}),an=C===!1?"rgba(239, 68, 68, 0.4)":r&&i?i:In.iconActive;return he?xt(Zn,{children:[ne("style",{children:`
         @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@popmelt.com/core",
-  "version": "0.5.12",
+  "version": "0.5.13",
   "description": "The design collaboration layer for AI coding agents",
   "license": "PolyForm-Shield-1.0.0",
   "author": "Popmelt <hello@popmelt.com> (https://popmelt.com)",