truecanvas 0.6.5 → 0.6.6

package/dist/editor/assets/main-NN-va8GV.js

@@ -0,0 +1,27 @@
+import{i as e,r as t,t as n}from"./react-DB-4Zxce.js";import{A as r,C as i,D as a,E as o,M as s,O as c,S as l,T as u,_ as d,a as f,b as p,c as m,d as h,f as g,g as _,h as v,i as y,j as b,k as x,l as S,m as C,n as w,o as T,p as E,r as D,s as O,t as k,u as A,v as j,w as M,x as N,y as P}from"./Menu-BCzLjvGk.js";var F={name:`arrow-down`,size:24,node:[[`path`,{d:`M12 5v14`,key:`s699le`}],[`path`,{d:`m19 12-7 7-7-7`,key:`1idqje`}]]};F.node;var ee=r(F),I={name:`arrow-right`,size:24,node:[[`path`,{d:`M5 12h14`,key:`1ays0h`}],[`path`,{d:`m12 5 7 7-7 7`,key:`xquz4c`}]]};I.node;var te=r(I),L={name:`arrow-up-from-line`,size:24,node:[[`path`,{d:`m18 9-6-6-6 6`,key:`kcunyi`}],[`path`,{d:`M12 3v14`,key:`7cf3v8`}],[`path`,{d:`M5 21h14`,key:`11awu3`}]]};L.node;var R=r(L),ne={name:`arrow-up`,size:24,node:[[`path`,{d:`m5 12 7-7 7 7`,key:`hav0vg`}],[`path`,{d:`M12 19V5`,key:`x0mq9r`}]]};ne.node;var re=r(ne),ie={name:`blocks`,size:24,node:[[`path`,{d:`M10 22V7a1 1 0 0 0-1-1H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-5a1 1 0 0 0-1-1H2`,key:`1ah6g2`}],[`rect`,{x:`14`,y:`2`,width:`8`,height:`8`,rx:`1`,key:`88lufb`}]]};ie.node;var ae=r(ie),oe={name:`bot`,size:24,node:[[`path`,{d:`M12 8V4H8`,key:`hb8ula`}],[`rect`,{width:`16`,height:`12`,x:`4`,y:`8`,rx:`2`,key:`enze0r`}],[`path`,{d:`M2 14h2`,key:`vft8re`}],[`path`,{d:`M20 14h2`,key:`4cs60a`}],[`path`,{d:`M15 13v2`,key:`1xurst`}],[`path`,{d:`M9 13v2`,key:`rq6x2g`}]]};oe.node;var se=r(oe),ce={name:`braces`,size:24,node:[[`path`,{d:`M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1`,key:`ezmyqa`}],[`path`,{d:`M16 21h1a2 2 0 0 0 2-2v-5c0-1.1.9-2 2-2a2 2 0 0 1-2-2V5a2 2 0 0 0-2-2h-1`,key:`e1hn23`}]],aliases:[`curly-braces`]};ce.node;var le=r(ce),ue={name:`brackets`,size:24,node:[[`path`,{d:`M16 3h3a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1h-3`,key:`1kt8lf`}],[`path`,{d:`M8 21H5a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h3`,key:`gduv9`}]]};ue.node;var de=r(ue),fe={name:`circle-alert`,size:24,node:[[`circle`,{cx:`12`,cy:`12`,r:`10`,key:`1mglay`}],[`line`,{x1:`12`,x2:`12`,y1:`8`,y2:`12`,key:`1pkeuh`}],[`line`,{x1:`12`,x2:`12.01`,y1:`16`,y2:`16`,key:`4dfq90`}]],aliases:[`alert-circle`]};fe.node;var pe=r(fe),me={name:`circle-check`,size:24,node:[[`circle`,{cx:`12`,cy:`12`,r:`10`,key:`1mglay`}],[`path`,{d:`m16 9-5.5 5.5L8 12`,key:`xofnsj`}]],aliases:[`check-circle-2`]};me.node;var he=r(me),ge={name:`circle-dot`,size:24,node:[[`circle`,{cx:`12`,cy:`12`,r:`1`,key:`41hilf`}],[`circle`,{cx:`12`,cy:`12`,r:`10`,key:`1mglay`}]]};ge.node;var _e=r(ge),ve={name:`cloud-upload`,size:24,node:[[`path`,{d:`M12 13v8`,key:`1l5pq0`}],[`path`,{d:`M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242`,key:`1pljnt`}],[`path`,{d:`m8 17 4-4 4 4`,key:`1quai1`}]],aliases:[`upload-cloud`]};ve.node;var ye=r(ve),be={name:`code-xml`,size:24,node:[[`path`,{d:`m18 16 4-4-4-4`,key:`1inbqp`}],[`path`,{d:`m6 8-4 4 4 4`,key:`15zrgr`}],[`path`,{d:`m14.5 4-5 16`,key:`e7oirm`}]],aliases:[`code-2`]};be.node;var xe=r(be),Se={name:`columns-3`,size:24,node:[[`rect`,{width:`18`,height:`18`,x:`3`,y:`3`,rx:`2`,key:`afitv7`}],[`path`,{d:`M9 3v18`,key:`fh3hqa`}],[`path`,{d:`M15 3v18`,key:`14nvp0`}]],aliases:[`panels-left-right`]};Se.node;var Ce=r(Se),we={name:`component`,size:24,node:[[`path`,{d:`M15.536 11.293a1 1 0 0 0 0 1.414l2.376 2.377a1 1 0 0 0 1.414 0l2.377-2.377a1 1 0 0 0 0-1.414l-2.377-2.377a1 1 0 0 0-1.414 0z`,key:`1uwlt4`}],[`path`,{d:`M2.297 11.293a1 1 0 0 0 0 1.414l2.377 2.377a1 1 0 0 0 1.414 0l2.377-2.377a1 1 0 0 0 0-1.414L6.088 8.916a1 1 0 0 0-1.414 0z`,key:`10291m`}],[`path`,{d:`M8.916 17.912a1 1 0 0 0 0 1.415l2.377 2.376a1 1 0 0 0 1.414 0l2.377-2.376a1 1 0 0 0 0-1.415l-2.377-2.376a1 1 0 0 0-1.414 0z`,key:`1tqoq1`}],[`path`,{d:`M8.916 4.674a1 1 0 0 0 0 1.414l2.377 2.376a1 1 0 0 0 1.414 0l2.377-2.376a1 1 0 0 0 0-1.414l-2.377-2.377a1 1 0 0 0-1.414 0z`,key:`1x6lto`}]]};we.node;var z=r(we),Te={name:`copy-plus`,size:24,node:[[`line`,{x1:`15`,x2:`15`,y1:`12`,y2:`18`,key:`1p7wdc`}],[`line`,{x1:`12`,x2:`18`,y1:`15`,y2:`15`,key:`1nscbv`}],[`rect`,{width:`14`,height:`14`,x:`8`,y:`8`,rx:`2`,ry:`2`,key:`17jyea`}],[`path`,{d:`M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2`,key:`zix9uf`}]]};Te.node;var Ee=r(Te),De={name:`corner-down-left`,size:24,node:[[`path`,{d:`M20 4v7a4 4 0 0 1-4 4H4`,key:`6o5b7l`}],[`path`,{d:`m9 10-5 5 5 5`,key:`1kshq7`}]]};De.node;var Oe=r(De),ke={name:`corner-left-up`,size:24,node:[[`path`,{d:`M14 9 9 4 4 9`,key:`1af5af`}],[`path`,{d:`M20 20h-7a4 4 0 0 1-4-4V4`,key:`1blwi3`}]]};ke.node;var Ae=r(ke),je={name:`external-link`,size:24,node:[[`path`,{d:`M15 3h6v6`,key:`1q9fwt`}],[`path`,{d:`M10 14 21 3`,key:`gplh6r`}],[`path`,{d:`M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6`,key:`a6xqqp`}]]};je.node;var Me=r(je),Ne={name:`eye-off`,size:24,node:[[`path`,{d:`M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49`,key:`ct8e1f`}],[`path`,{d:`M14.084 14.158a3 3 0 0 1-4.242-4.242`,key:`151rxh`}],[`path`,{d:`M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143`,key:`13bj9a`}],[`path`,{d:`m2 2 20 20`,key:`1ooewy`}]]};Ne.node;var Pe=r(Ne),Fe={name:`eye`,size:24,node:[[`path`,{d:`M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0`,key:`1nclc0`}],[`circle`,{cx:`12`,cy:`12`,r:`3`,key:`1v7zrd`}]]};Fe.node;var Ie=r(Fe),Le={name:`face-slightly-smiling`,size:24,node:[[`path`,{d:`M15 10V9`,key:`4dkmfx`}],[`path`,{d:`M16.472 15a6 6 0 01-8.943 0`,key:`7qomzy`}],[`path`,{d:`M9 10V9`,key:`1lazqi`}],[`circle`,{cx:`12`,cy:`12`,r:`10`,key:`1mglay`}]],aliases:[`smile`]};Le.node;var Re=r(Le),ze={name:`file-code-corner`,size:24,node:[[`path`,{d:`M4 12.15V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.706.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2h-3.35`,key:`1wthlu`}],[`path`,{d:`M14 2v5a1 1 0 0 0 1 1h5`,key:`wfsgrz`}],[`path`,{d:`m5 16-3 3 3 3`,key:`331omg`}],[`path`,{d:`m9 22 3-3-3-3`,key:`lsp7cz`}]],aliases:[`file-code-2`]};ze.node;var Be=r(ze),Ve={name:`flask-conical`,size:24,node:[[`path`,{d:`M14 2v6a2 2 0 0 0 .245.96l5.51 10.08A2 2 0 0 1 18 22H6a2 2 0 0 1-1.755-2.96l5.51-10.08A2 2 0 0 0 10 8V2`,key:`18mbvz`}],[`path`,{d:`M6.453 15h11.094`,key:`3shlmq`}],[`path`,{d:`M8.5 2h7`,key:`csnxdl`}]]};Ve.node;var He=r(Ve),Ue={name:`frame`,size:24,node:[[`line`,{x1:`22`,x2:`2`,y1:`6`,y2:`6`,key:`15w7dq`}],[`line`,{x1:`22`,x2:`2`,y1:`18`,y2:`18`,key:`1ip48p`}],[`line`,{x1:`6`,x2:`6`,y1:`2`,y2:`22`,key:`a2lnyx`}],[`line`,{x1:`18`,x2:`18`,y1:`2`,y2:`22`,key:`8vb6jd`}]]};Ue.node;var We=r(Ue),Ge={name:`git-branch`,size:24,node:[[`path`,{d:`M15 6a9 9 0 0 0-9 9V3`,key:`1cii5b`}],[`circle`,{cx:`18`,cy:`6`,r:`3`,key:`1h7g24`}],[`circle`,{cx:`6`,cy:`18`,r:`3`,key:`fqmcym`}]]};Ge.node;var Ke=r(Ge),qe={name:`git-commit-horizontal`,size:24,node:[[`circle`,{cx:`12`,cy:`12`,r:`3`,key:`1v7zrd`}],[`line`,{x1:`3`,x2:`9`,y1:`12`,y2:`12`,key:`1dyftd`}],[`line`,{x1:`15`,x2:`21`,y1:`12`,y2:`12`,key:`oup4p8`}]],aliases:[`git-commit`]};qe.node;var Je=r(qe),Ye={name:`git-compare`,size:24,node:[[`circle`,{cx:`18`,cy:`18`,r:`3`,key:`1xkwt0`}],[`circle`,{cx:`6`,cy:`6`,r:`3`,key:`1lh9wr`}],[`path`,{d:`M13 6h3a2 2 0 0 1 2 2v7`,key:`1yeb86`}],[`path`,{d:`M11 18H8a2 2 0 0 1-2-2V9`,key:`19pyzm`}]]};Ye.node;var Xe=r(Ye),Ze={name:`git-merge`,size:24,node:[[`circle`,{cx:`18`,cy:`18`,r:`3`,key:`1xkwt0`}],[`circle`,{cx:`6`,cy:`6`,r:`3`,key:`1lh9wr`}],[`path`,{d:`M6 21V9a9 9 0 0 0 9 9`,key:`7kw0sc`}]]};Ze.node;var Qe=r(Ze),$e={name:`globe`,size:24,node:[[`circle`,{cx:`12`,cy:`12`,r:`10`,key:`1mglay`}],[`path`,{d:`M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20`,key:`13o1zl`}],[`path`,{d:`M2 12h20`,key:`9i4pu4`}]]};$e.node;var et=r($e),tt={name:`grid-2x2`,size:24,node:[[`path`,{d:`M12 3v18`,key:`108xh3`}],[`path`,{d:`M3 12h18`,key:`1i2n21`}],[`rect`,{x:`3`,y:`3`,width:`18`,height:`18`,rx:`2`,key:`h1oib`}]],aliases:[`grid-2-x-2`]};tt.node;var nt=r(tt),rt={name:`hand`,size:24,node:[[`path`,{d:`M18 11V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2`,key:`1fvzgz`}],[`path`,{d:`M14 10V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v2`,key:`1kc0my`}],[`path`,{d:`M10 10.5V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2v8`,key:`10h0bg`}],[`path`,{d:`M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15`,key:`1s1gnw`}]]};rt.node;var it=r(rt),at={name:`heading-1`,size:24,node:[[`path`,{d:`M4 12h8`,key:`17cfdx`}],[`path`,{d:`M4 18V6`,key:`1rz3zl`}],[`path`,{d:`M12 18V6`,key:`zqpxq5`}],[`path`,{d:`m17 12 3-2v8`,key:`1hhhft`}]]};at.node;var ot=r(at),st={name:`heading-2`,size:24,node:[[`path`,{d:`M4 12h8`,key:`17cfdx`}],[`path`,{d:`M4 18V6`,key:`1rz3zl`}],[`path`,{d:`M12 18V6`,key:`zqpxq5`}],[`path`,{d:`M21 18h-4c0-4 4-3 4-6 0-1.5-2-2.5-4-1`,key:`9jr5yi`}]]};st.node;var ct=r(st),lt={name:`heading-3`,size:24,node:[[`path`,{d:`M4 12h8`,key:`17cfdx`}],[`path`,{d:`M4 18V6`,key:`1rz3zl`}],[`path`,{d:`M12 18V6`,key:`zqpxq5`}],[`path`,{d:`M17.5 10.5c1.7-1 3.5 0 3.5 1.5a2 2 0 0 1-2 2`,key:`68ncm8`}],[`path`,{d:`M17 17.5c2 1.5 4 .3 4-1.5a2 2 0 0 0-2-2`,key:`1ejuhz`}]]};lt.node;var ut=r(lt),dt={name:`image`,size:24,node:[[`rect`,{width:`18`,height:`18`,x:`3`,y:`3`,rx:`2`,ry:`2`,key:`1m3agn`}],[`circle`,{cx:`9`,cy:`9`,r:`2`,key:`af1f0g`}],[`path`,{d:`m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21`,key:`1xmnt7`}]]};dt.node;var ft=r(dt),pt={name:`laptop`,size:24,node:[[`path`,{d:`M18 5a2 2 0 0 1 2 2v8.526a2 2 0 0 0 .212.897l1.068 2.127a1 1 0 0 1-.9 1.45H3.62a1 1 0 0 1-.9-1.45l1.068-2.127A2 2 0 0 0 4 15.526V7a2 2 0 0 1 2-2z`,key:`1pdavp`}],[`path`,{d:`M20.054 15.987H3.946`,key:`14rxg9`}]]};pt.node;var mt=r(pt),ht={name:`layout-list`,size:24,node:[[`rect`,{width:`7`,height:`7`,x:`3`,y:`3`,rx:`1`,key:`1g98yp`}],[`rect`,{width:`7`,height:`7`,x:`3`,y:`14`,rx:`1`,key:`1bb6yr`}],[`path`,{d:`M14 4h7`,key:`3xa0d5`}],[`path`,{d:`M14 9h7`,key:`1icrd9`}],[`path`,{d:`M14 15h7`,key:`1mj8o2`}],[`path`,{d:`M14 20h7`,key:`11slyb`}]]};ht.node;var gt=r(ht),_t={name:`link-2`,size:24,node:[[`path`,{d:`M9 17H7A5 5 0 0 1 7 7h2`,key:`8i5ue5`}],[`path`,{d:`M15 7h2a5 5 0 1 1 0 10h-2`,key:`1b9ql8`}],[`line`,{x1:`8`,x2:`16`,y1:`12`,y2:`12`,key:`1jonct`}]]};_t.node;var vt=r(_t),yt={name:`link`,size:24,node:[[`path`,{d:`M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71`,key:`1cjeqo`}],[`path`,{d:`M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71`,key:`19qd67`}]]};yt.node;var bt=r(yt),xt={name:`list`,size:24,node:[[`path`,{d:`M3 5h.01`,key:`18ugdj`}],[`path`,{d:`M3 12h.01`,key:`nlz23k`}],[`path`,{d:`M3 19h.01`,key:`noohij`}],[`path`,{d:`M8 5h13`,key:`1pao27`}],[`path`,{d:`M8 12h13`,key:`1za7za`}],[`path`,{d:`M8 19h13`,key:`m83p4d`}]]};xt.node;var St=r(xt),Ct={name:`lock-open`,size:24,node:[[`rect`,{width:`18`,height:`11`,x:`3`,y:`11`,rx:`2`,ry:`2`,key:`1w4ew1`}],[`path`,{d:`M7 11V7a5 5 0 0 1 9.9-1`,key:`1mm8w8`}]],aliases:[`unlock`]};Ct.node;var wt=r(Ct),Tt={name:`mail`,size:24,node:[[`path`,{d:`m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7`,key:`132q7q`}],[`rect`,{x:`2`,y:`4`,width:`20`,height:`16`,rx:`2`,key:`izxlao`}]]};Tt.node;var Et=r(Tt),Dt={name:`message-circle`,size:24,node:[[`path`,{d:`M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719`,key:`1sd12s`}]]};Dt.node;var Ot=r(Dt),kt={name:`minus`,size:24,node:[[`path`,{d:`M5 12h14`,key:`1ays0h`}]]};kt.node;var At=r(kt),jt={name:`monitor-play`,size:24,node:[[`path`,{d:`M15.033 9.44a.647.647 0 0 1 0 1.12l-4.065 2.352a.645.645 0 0 1-.968-.56V7.648a.645.645 0 0 1 .967-.56z`,key:`vbtd3f`}],[`path`,{d:`M12 17v4`,key:`1riwvh`}],[`path`,{d:`M8 21h8`,key:`1ev6f3`}],[`rect`,{x:`2`,y:`3`,width:`20`,height:`14`,rx:`2`,key:`x3v2xh`}]]};jt.node;var Mt=r(jt),Nt={name:`monitor`,size:24,node:[[`rect`,{width:`20`,height:`14`,x:`2`,y:`3`,rx:`2`,key:`48i651`}],[`line`,{x1:`8`,x2:`16`,y1:`21`,y2:`21`,key:`1svkeh`}],[`line`,{x1:`12`,x2:`12`,y1:`17`,y2:`21`,key:`vw1qmm`}]]};Nt.node;var Pt=r(Nt),Ft={name:`moon`,size:24,node:[[`path`,{d:`M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401`,key:`kfwtm`}]]};Ft.node;var It=r(Ft),Lt={name:`mouse-pointer-2`,size:24,node:[[`path`,{d:`M4.037 4.688a.495.495 0 0 1 .651-.651l16 6.5a.5.5 0 0 1-.063.947l-6.124 1.58a2 2 0 0 0-1.438 1.435l-1.579 6.126a.5.5 0 0 1-.947.063z`,key:`edeuup`}]]};Lt.node;var Rt=r(Lt),zt={name:`panel-top`,size:24,node:[[`rect`,{width:`18`,height:`18`,x:`3`,y:`3`,rx:`2`,key:`afitv7`}],[`path`,{d:`M3 9h18`,key:`1pudct`}]]};zt.node;var Bt=r(zt),Vt={name:`pause`,size:24,node:[[`rect`,{x:`14`,y:`3`,width:`5`,height:`18`,rx:`1`,key:`kaeet6`}],[`rect`,{x:`5`,y:`3`,width:`5`,height:`18`,rx:`1`,key:`1wsw3u`}]]};Vt.node;var Ht=r(Vt),Ut={name:`pencil`,size:24,node:[[`path`,{d:`M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z`,key:`1a8usu`}],[`path`,{d:`m15 5 4 4`,key:`1mk7zo`}]]};Ut.node;var Wt=r(Ut),Gt={name:`play`,size:24,node:[[`path`,{d:`M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z`,key:`10ikf1`}]]};Gt.node;var Kt=r(Gt),qt={name:`pointer`,size:24,node:[[`path`,{d:`M22 14a8 8 0 0 1-8 8`,key:`56vcr3`}],[`path`,{d:`M18 11v-1a2 2 0 0 0-2-2a2 2 0 0 0-2 2`,key:`1agjmk`}],[`path`,{d:`M14 10V9a2 2 0 0 0-2-2a2 2 0 0 0-2 2v1`,key:`wdbh2u`}],[`path`,{d:`M10 9.5V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v10`,key:`1ibuk9`}],[`path`,{d:`M18 11a2 2 0 1 1 4 0v3a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15`,key:`g6ys72`}]]};qt.node;var Jt=r(qt),Yt={name:`radio`,size:24,node:[[`path`,{d:`M16.247 7.761a6 6 0 0 1 0 8.478`,key:`1fwjs5`}],[`path`,{d:`M19.075 4.933a10 10 0 0 1 0 14.134`,key:`ehdyv1`}],[`path`,{d:`M4.925 19.067a10 10 0 0 1 0-14.134`,key:`1q22gi`}],[`path`,{d:`M7.753 16.239a6 6 0 0 1 0-8.478`,key:`r2q7qm`}],[`circle`,{cx:`12`,cy:`12`,r:`2`,key:`1c9p78`}]]};Yt.node;var Xt=r(Yt),Zt={name:`rectangle-horizontal`,size:24,node:[[`rect`,{width:`20`,height:`12`,x:`2`,y:`6`,rx:`2`,key:`9lu3g6`}]]};Zt.node;var Qt=r(Zt),$t={name:`rectangle-vertical`,size:24,node:[[`rect`,{width:`12`,height:`20`,x:`6`,y:`2`,rx:`2`,key:`1oxtiu`}]]};$t.node;var en=r($t),tn={name:`redo-2`,size:24,node:[[`path`,{d:`m15 14 5-5-5-5`,key:`12vg1m`}],[`path`,{d:`M20 9H9.5A5.5 5.5 0 0 0 4 14.5A5.5 5.5 0 0 0 9.5 20H13`,key:`6uklza`}]]};tn.node;var nn=r(tn),rn={name:`refresh-ccw`,size:24,node:[[`path`,{d:`M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8`,key:`14sxne`}],[`path`,{d:`M3 3v5h5`,key:`1xhq8a`}],[`path`,{d:`M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16`,key:`1hlbsb`}],[`path`,{d:`M16 16h5v5`,key:`ccwih5`}]]};rn.node;var an=r(rn),on={name:`rotate-ccw`,size:24,node:[[`path`,{d:`M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8`,key:`1357e3`}],[`path`,{d:`M3 3v5h5`,key:`1xhq8a`}]]};on.node;var sn=r(on),cn={name:`rows-3`,size:24,node:[[`rect`,{width:`18`,height:`18`,x:`3`,y:`3`,rx:`2`,key:`afitv7`}],[`path`,{d:`M21 9H3`,key:`1338ky`}],[`path`,{d:`M21 15H3`,key:`9uk58r`}]],aliases:[`panels-top-bottom`]};cn.node;var ln=r(cn),un={name:`scan`,size:24,node:[[`path`,{d:`M3 7V5a2 2 0 0 1 2-2h2`,key:`aa7l1z`}],[`path`,{d:`M17 3h2a2 2 0 0 1 2 2v2`,key:`4qcy5o`}],[`path`,{d:`M21 17v2a2 2 0 0 1-2 2h-2`,key:`6vwrx8`}],[`path`,{d:`M7 21H5a2 2 0 0 1-2-2v-2`,key:`ioqczr`}]]};un.node;var dn=r(un),fn={name:`smartphone`,size:24,node:[[`rect`,{width:`14`,height:`20`,x:`5`,y:`2`,rx:`2`,ry:`2`,key:`1yt0o3`}],[`path`,{d:`M12 18h.01`,key:`mhygvu`}]]};fn.node;var pn=r(fn),mn={name:`sparkles`,size:24,node:[[`path`,{d:`M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z`,key:`1s2grr`}],[`path`,{d:`M20 2v4`,key:`1rf3ol`}],[`path`,{d:`M22 4h-4`,key:`gwowj6`}],[`circle`,{cx:`4`,cy:`20`,r:`2`,key:`6kqj1y`}]],aliases:[`stars`]};mn.node;var hn=r(mn),gn={name:`square`,size:24,node:[[`rect`,{width:`18`,height:`18`,x:`3`,y:`3`,rx:`2`,key:`afitv7`}]]};gn.node;var _n=r(gn),vn={name:`sun`,size:24,node:[[`circle`,{cx:`12`,cy:`12`,r:`4`,key:`4exip2`}],[`path`,{d:`M12 2v2`,key:`tus03m`}],[`path`,{d:`M12 20v2`,key:`1lh1kg`}],[`path`,{d:`m4.93 4.93 1.41 1.41`,key:`149t6j`}],[`path`,{d:`m17.66 17.66 1.41 1.41`,key:`ptbguv`}],[`path`,{d:`M2 12h2`,key:`1t8f8n`}],[`path`,{d:`M20 12h2`,key:`1q8mjw`}],[`path`,{d:`m6.34 17.66-1.41 1.41`,key:`1m8zz5`}],[`path`,{d:`m19.07 4.93-1.41 1.41`,key:`1shlcs`}]]};vn.node;var yn=r(vn),bn={name:`tablet`,size:24,node:[[`rect`,{width:`16`,height:`20`,x:`4`,y:`2`,rx:`2`,ry:`2`,key:`76otgf`}],[`line`,{x1:`12`,x2:`12.01`,y1:`18`,y2:`18`,key:`1dp563`}]]};bn.node;var xn=r(bn),Sn={name:`text-align-center`,size:24,node:[[`path`,{d:`M21 5H3`,key:`1fi0y6`}],[`path`,{d:`M17 12H7`,key:`16if0g`}],[`path`,{d:`M19 19H5`,key:`vjpgq2`}]],aliases:[`align-center`]};Sn.node;var Cn=r(Sn),wn={name:`text-align-end`,size:24,node:[[`path`,{d:`M21 5H3`,key:`1fi0y6`}],[`path`,{d:`M21 12H9`,key:`dn1m92`}],[`path`,{d:`M21 19H7`,key:`4cu937`}]],aliases:[`align-right`]};wn.node;var Tn=r(wn),En={name:`text-align-start`,size:24,node:[[`path`,{d:`M21 5H3`,key:`1fi0y6`}],[`path`,{d:`M15 12H3`,key:`6jk70r`}],[`path`,{d:`M17 19H3`,key:`z6ezky`}]],aliases:[`text`,`align-left`]};En.node;var Dn=r(En),On={name:`text-cursor-input`,size:24,node:[[`path`,{d:`M12 20h-1a2 2 0 0 1-2-2 2 2 0 0 1-2 2H6`,key:`1528k5`}],[`path`,{d:`M13 8h7a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-7`,key:`13ksps`}],[`path`,{d:`M5 16H4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h1`,key:`1n9rhb`}],[`path`,{d:`M6 4h1a2 2 0 0 1 2 2 2 2 0 0 1 2-2h1`,key:`1mj8rg`}],[`path`,{d:`M9 6v12`,key:`velyjx`}]]};On.node;var kn=r(On),An={name:`text-wrap`,size:24,node:[[`path`,{d:`m16 16-3 3 3 3`,key:`117b85`}],[`path`,{d:`M3 12h14.5a1 1 0 0 1 0 7H13`,key:`18xa6z`}],[`path`,{d:`M3 19h6`,key:`1ygdsz`}],[`path`,{d:`M3 5h18`,key:`1u36vt`}]],aliases:[`wrap-text`]};An.node;var jn=r(An),Mn={name:`trash`,size:24,node:[[`path`,{d:`M10 11v6`,key:`nco0om`}],[`path`,{d:`M14 11v6`,key:`outv1u`}],[`path`,{d:`M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6`,key:`miytrc`}],[`path`,{d:`M3 6h18`,key:`d0wm0j`}],[`path`,{d:`M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2`,key:`e791ji`}]],aliases:[`trash-2`]};Mn.node;var Nn=r(Mn),Pn={name:`type`,size:24,node:[[`path`,{d:`M12 4v16`,key:`1654pz`}],[`path`,{d:`M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2`,key:`e0r10z`}],[`path`,{d:`M9 20h6`,key:`s66wpe`}]]};Pn.node;var Fn=r(Pn),In={name:`undo-2`,size:24,node:[[`path`,{d:`M9 14 4 9l5-5`,key:`102s5s`}],[`path`,{d:`M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11`,key:`f3b9sd`}]]};In.node;var Ln=r(In),Rn={name:`users`,size:24,node:[[`path`,{d:`M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2`,key:`1yyitq`}],[`path`,{d:`M16 3.128a4 4 0 0 1 0 7.744`,key:`16gr8j`}],[`path`,{d:`M22 21v-2a4 4 0 0 0-3-3.87`,key:`kshegd`}],[`circle`,{cx:`9`,cy:`7`,r:`4`,key:`nufk8`}]]};Rn.node;var zn=r(Rn),Bn={name:`waves-horizontal`,size:24,node:[[`path`,{d:`M2 12q2.5 2 5 0t5 0 5 0 5 0`,key:`8ddzzs`}],[`path`,{d:`M2 19q2.5 2 5 0t5 0 5 0 5 0`,key:`1wj4st`}],[`path`,{d:`M2 5q2.5 2 5 0t5 0 5 0 5 0`,key:`69x50u`}]],aliases:[`waves`]};Bn.node;var Vn=r(Bn),B=e(n(),1),Hn=b(),Un=[{id:`iphone-16`,name:`iPhone 16`,kind:`phone`,width:393,height:852,dpr:3,statusBar:54,homeIndicator:34,radius:55,island:!0},{id:`iphone-16-pro-max`,name:`iPhone 16 Pro Max`,kind:`phone`,width:440,height:956,dpr:3,statusBar:54,homeIndicator:34,radius:62,island:!0},{id:`iphone-se`,name:`iPhone SE`,kind:`phone`,width:375,height:667,dpr:2,statusBar:20,homeIndicator:0,radius:0},{id:`pixel-9`,name:`Pixel 9`,kind:`phone`,width:412,height:923,dpr:2.625,statusBar:36,homeIndicator:24,radius:48},{id:`galaxy-s24`,name:`Galaxy S24`,kind:`phone`,width:360,height:780,dpr:3,statusBar:32,homeIndicator:24,radius:44},{id:`ipad-mini`,name:`iPad mini`,kind:`tablet`,width:744,height:1133,dpr:2,statusBar:24,homeIndicator:20,radius:22},{id:`ipad-pro-11`,name:`iPad Pro 11″`,kind:`tablet`,width:834,height:1210,dpr:2,statusBar:24,homeIndicator:20,radius:18},{id:`laptop`,name:`Laptop`,kind:`desktop`,width:1280,height:800,dpr:2,statusBar:0,homeIndicator:0,radius:0},{id:`desktop`,name:`Desktop`,kind:`desktop`,width:1440,height:900,dpr:1,statusBar:0,homeIndicator:0,radius:0},{id:`desktop-hd`,name:`Desktop HD`,kind:`desktop`,width:1920,height:1080,dpr:1,statusBar:0,homeIndicator:0,radius:0}];function Wn(e){return e?Un.find(t=>t.id===e):void 0}async function V(e,t){let n=await fetch(e,t===void 0?void 0:{method:`POST`,headers:{"content-type":`application/json`},body:JSON.stringify(t)}),r=await n.json();if(!n.ok)throw Error(r.error??`Request failed (${n.status})`);return r}var H={state:()=>V(`/api/state`),canvas:e=>V(`/api/canvas?name=${encodeURIComponent(e)}`),components:()=>V(`/api/components`),libraries:()=>V(`/api/libraries`),shareStatus:()=>V(`/api/share/status`),shareLink:e=>V(`/api/share/link?canvas=${encodeURIComponent(e)}`),shareProgress:()=>V(`/api/share/progress`),sessions:()=>V(`/api/session`),startSession:e=>V(`/api/session/start`,{canvas:e}),stopSession:e=>V(`/api/session/stop`,{canvas:e}),sessionCursor:(e,t,n)=>V(`/api/session/cursor`,{canvas:e,x:t,y:n}),share:e=>V(`/api/share/snapshot`,e),shadcnRegistry:()=>V(`/api/libraries/shadcn`),icons:(e,t,n=240)=>V(`/api/icons?library=${encodeURIComponent(e)}&q=${encodeURIComponent(t)}&limit=${n}`),installIcons:e=>V(`/api/libraries/icons`,{id:e}),addShadcn:e=>V(`/api/libraries/shadcn`,{names:e}),command:e=>V(`/api/command`,e),undo:e=>V(`/api/undo`,{canvas:e}),redo:e=>V(`/api/redo`,{canvas:e}),selection:(e,t)=>V(`/api/selection`,{canvas:e,ids:t}),createCanvas:e=>V(`/api/canvases`,{name:e}),pages:()=>V(`/api/canvases`),renameCanvas:(e,t)=>V(`/api/canvases/rename`,{from:e,to:t}),duplicateCanvas:e=>V(`/api/canvases/duplicate`,{name:e}),deleteCanvas:e=>V(`/api/canvases/delete`,{name:e}),restoreCanvas:e=>V(`/api/canvases/restore`,{name:e}),open:(e,t)=>V(`/api/open`,{canvas:e,id:t}),openFile:e=>V(`/api/open-file`,{file:e}),tokens:()=>V(`/api/tokens`),routes:()=>V(`/api/routes`),gitStatus:()=>V(`/api/git/status`),gitBranches:()=>V(`/api/git/branches`),gitLog:e=>V(`/api/git/log${e?`?canvas=${encodeURIComponent(e)}`:``}`),gitFetch:()=>V(`/api/git/fetch`,{}),gitCommit:(e,t)=>V(`/api/git/commit`,{message:e,scope:t}),gitPush:()=>V(`/api/git/push`,{}),gitPull:()=>V(`/api/git/pull`,{}),gitSwitch:(e,t=!1)=>V(`/api/git/switch`,{branch:e,create:t}),gitChanges:()=>V(`/api/git/changes`),gitDiff:e=>V(`/api/git/diff?canvas=${encodeURIComponent(e)}`),gitPr:(e=!1)=>V(`/api/git/pr${e?`?fresh=1`:``}`),gitCreatePr:e=>V(`/api/git/pr`,e),gitPublish:(e,t=!0)=>V(`/api/git/publish`,{name:e,private:t}),previewUrl:(e,t,n,r)=>`/api/git/preview?canvas=${encodeURIComponent(e)}&frame=${encodeURIComponent(t)}&side=${n}&v=${encodeURIComponent(r)}`,compare:(e,t)=>V(`/api/compare`,{canvas:e,ref:t}),clearCompare:e=>V(`/api/compare/clear`,{canvas:e}),comments:e=>V(`/api/comments?canvas=${encodeURIComponent(e)}`),addComment:e=>V(`/api/comments`,e),replyComment:(e,t,n)=>V(`/api/comments/reply`,{canvas:e,id:t,text:n}),resolveComment:(e,t,n)=>V(`/api/comments/resolve`,{canvas:e,id:t,resolved:n}),deleteComment:(e,t)=>V(`/api/comments/delete`,{canvas:e,id:t}),source:(e,t)=>V(`/api/source`,{canvas:e,id:t})};function Gn(e,t,n=()=>{}){let r=null,i=!1,a=0,o=!1,s=()=>{i||(r=new EventSource(`/api/events`),r.onopen=()=>{t(!0),o&&n(),o=!1},r.onmessage=t=>e(JSON.parse(t.data)),r.onerror=()=>{t(!1),o=!0,r?.close(),clearTimeout(a),i||(a=window.setTimeout(s,1500))})};return s(),()=>{i=!0,clearTimeout(a),r?.close()}}var Kn=e=>{let t,n=new Set,r=(e,r)=>{let i=typeof e==`function`?e(t):e;if(!Object.is(i,t)){let e=t;t=r??(typeof i!=`object`||!i)?i:Object.assign({},t,i),n.forEach(n=>n(t,e))}},i=()=>t,a={setState:r,getState:i,getInitialState:()=>o,subscribe:e=>(n.add(e),()=>n.delete(e))},o=t=e(r,i,a);return a},qn=(e=>e?Kn(e):Kn),Jn=e=>e;function Yn(e,t=Jn){let n=B.useSyncExternalStore(e.subscribe,B.useCallback(()=>t(e.getState()),[e,t]),B.useCallback(()=>t(e.getInitialState()),[e,t]));return B.useDebugValue(n),n}var Xn=e=>{let t=qn(e),n=e=>Yn(t,e);return Object.assign(n,t),n},Zn=(e=>e?Xn(e):Xn),Qn=`|`,$n=e=>{let t=e.indexOf(Qn);return t<0?e:e.slice(0,t)};function er(e){let t=new Map,n=e=>{t.set(e.id,(t.get(e.id)??0)+1),e.children.forEach(n)};for(let t of e.frames)t.children.forEach(n);if(![...t.values()].some(e=>e>1))return e;let r=(e,n)=>({...e,id:(t.get(e.id)??0)>1?`${e.id}${Qn}${n}`:e.id,children:e.children.map(e=>r(e,n))});return{...e,frames:e.frames.map(e=>({...e,children:e.children.map(t=>r(t,e.id))}))}}function tr(e,t,n){return t&&e.has(`${n}${Qn}${t}`)?`${n}${Qn}${t}`:n}function nr(e,t,n){if(e.has(t))return t;if(n&&e.has(`${t}${Qn}${n}`))return`${t}${Qn}${n}`;for(let n of e.keys())if(n.startsWith(`${t}${Qn}`))return n;return t}function rr(e){let t={...e};for(let e of[`id`,`parent`,`from`])typeof t[e]==`string`&&(t[e]=$n(t[e]));return Array.isArray(t.ids)&&(t.ids=[...new Set(t.ids.map($n))]),t}var ir={"claude-code":`#d97757`,claude:`#d97757`,"claude-ai":`#d97757`,cursor:`#7c6cf2`,"codex-mcp-client":`#10a37f`,codex:`#10a37f`},ar=[`#e5484d`,`#f76b15`,`#ffc53d`,`#30a46c`,`#0090ff`,`#8e4ec6`,`#d6409f`];function or(e){return{"claude-code":`Claude Code`,cursor:`Cursor`,"codex-mcp-client":`Codex`,codex:`Codex`,"claude-ai":`Claude`}[e]??e.replace(/[-_]/g,` `).replace(/^./,e=>e.toUpperCase())}function sr(e){if(ir[e])return ir[e];let t=0;for(let n of e)t=t*31+n.charCodeAt(0)|0;return ar[Math.abs(t)%ar.length]}var cr=(e,t)=>{try{let n=localStorage.getItem(e);return n?JSON.parse(n):t}catch{return t}};function lr(e){let t=new Map;if(!e)return t;for(let n of e.frames){t.set(n.id,{node:n,parent:null,frame:n,depth:0});let e=(r,i,a)=>{t.set(r.id,{node:r,parent:i,frame:n,depth:a});for(let t of r.children)e(t,r,a+1)};for(let t of n.children)e(t,n,1)}return t}var ur=0,U=Zn((e,t)=>({ready:!1,connected:!1,appUrl:``,framework:`next`,projectName:``,componentsDir:`components`,componentDialog:null,libraryDialog:null,shareDialog:!1,layerDrop:null,mcpUrl:``,darkMode:{strategy:`class`,value:`dark`},canvases:[],canvas:null,doc:null,docError:null,index:new Map,history:{undo:0,redo:0},components:[],tokens:null,feed:[],agents:[],selection:[],hover:null,rects:{},frameHeights:{},frameErrors:{},frameReady:{},layoutTick:0,tool:`select`,camera:{x:0,y:0,zoom:1},canvasTheme:cr(`tc:canvasTheme`,`system`),uiTheme:cr(`tc:uiTheme`,`system`),motionPaused:cr(`tc:motionPaused`,!1),playing:null,deviceChrome:cr(`tc:deviceChrome`,!0),leftTab:`layers`,rightTab:`design`,expanded:new Set,toasts:[],flashes:[],presence:{},sessions:{},roomPeople:{},pages:[],hidden:new Set,locked:new Set,layerQuery:``,renamingLayer:null,git:null,review:[],pr:null,reviewing:null,commitMessage:``,commitTouched:!1,compare:null,threads:[],openThread:null,draftComment:null,showResolved:!1,appStatus:`checking`,appLog:[],editingText:null,busy:0,set:t=>e(t),setDoc:n=>{let r=t();if(r.doc&&r.doc.name===n.name&&n.rev!==void 0&&r.doc.rev!==void 0&&n.rev<r.doc.rev)return;if(n.error&&r.doc&&!r.doc.error&&r.doc.name===n.name){e({docError:n.error});return}let i=er(n);r.docError&&e({docError:null});let a=lr(i),o=r.index;e({doc:i,index:a,selection:r.selection.map(e=>{if(a.has(e))return e;let t=o.get(e);if(!t)return null;for(let[e,n]of a)if(n.node.path.join(`.`)===t.node.path.join(`.`)&&n.node.name===t.node.name)return e;return null}).filter(Boolean),hover:r.hover&&a.has(r.hover)?r.hover:null})},select:(n,r)=>{let{index:i,expanded:a}=t(),o=a;if(r?.reveal!==!1&&n.length){o=new Set(a);for(let e of n){let t=i.get(e);if(!t)continue;o.add(t.frame.id);let n=t.node.path.slice(0,-1);for(;n.length>1;){for(let[e,t]of i)t.node.path.join(`.`)===n.join(`.`)&&o.add(e);n=n.slice(0,-1)}}}e({selection:n,expanded:o,editingText:null})},frameOf:e=>t().index.get(e)?.frame??null,run:async(n,r)=>{e({busy:t().busy+1});try{let e=t().index.get(t().selection[0]??``)?.frame.id??null,i=await H.command(rr(n));t().setDoc(i.doc);let a=t().index,o=i.ids.map(t=>nr(a,t,e));return r?.select!==!1&&o.length&&t().select(o),o}catch(e){return t().toast(e.message,`error`),null}finally{e({busy:t().busy-1})}},undo:async()=>{let{canvas:e}=t();if(e)try{let n=await H.undo(e);t().setDoc(n.doc)}catch(e){t().toast(e.message,`info`)}},redo:async()=>{let{canvas:e}=t();if(e)try{let n=await H.redo(e);t().setDoc(n.doc)}catch(e){t().toast(e.message,`info`)}},toast:(n,r=`error`,i)=>{let a=++ur;e({toasts:[...t().toasts,{id:a,text:n,tone:r,action:i}]}),setTimeout(()=>e({toasts:t().toasts.filter(e=>e.id!==a)}),i?8e3:r===`error`?5e3:2600)},toggleLayerFlag:(n,r)=>{let i=pr(r),a=new Set(t()[n]);a.has(i)?a.delete(i):a.add(i),e({[n]:a});let o=t().canvas;o&&dr(`tc:${n}:${o}`,[...a])}})),dr=(e,t)=>{try{localStorage.setItem(e,JSON.stringify(t))}catch{}};function fr(e,t){return e.theme??t}function pr(e){return`${e.path.join(`.`)}:${e.name}`}function mr(e){U.setState({hidden:new Set(cr(`tc:hidden:${e}`,[])),locked:new Set(cr(`tc:locked:${e}`,[]))})}function hr(e){let t=U.getState(),n=t.index.get(e);for(;n;){if(t.locked.has(pr(n.node)))return!0;n=n.parent?t.index.get(n.parent.id):void 0}return!1}function W(e){if(`frameName`in e)return e.frameName;let t=e.props[`data-name`];return t?.kind===`string`&&t.value?t.value:e.kind===`text`?e.text??``:e.kind===`expression`?`{${e.name}}`:e.kind===`fragment`?`Fragment`:e.name}var gr=t({acceptsChildren:()=>ei,applyToPage:()=>Zr,applyUiTheme:()=>ri,cachedHeights:()=>kr,cameraShowsFrames:()=>Mr,copySelectionCode:()=>Jr,createFrameAt:()=>ni,deleteSelection:()=>Ur,duplicateSelection:()=>Hr,exploreCopy:()=>Xr,fitBounds:()=>Er,frameContainer:()=>$r,frameHeight:()=>G,framesBounds:()=>Dr,insertComponent:()=>ti,insertionPoint:()=>Qr,kbd:()=>vr,openInEditor:()=>Yr,playFrame:()=>Sr,playHeight:()=>xr,refitIfAuto:()=>Ir,rememberHeights:()=>jr,reorderSelection:()=>Gr,replayFrame:()=>Cr,revealOnCanvas:()=>ii,selectChild:()=>qr,selectParent:()=>Kr,setCamera:()=>Tr,setViewportSize:()=>br,startAutoFit:()=>Pr,stopAutoFit:()=>Fr,viewportSize:()=>yr,wrapSelection:()=>Wr,zoomBy:()=>zr,zoomTo:()=>Br,zoomToFit:()=>Lr,zoomToSelection:()=>Rr}),_r=navigator.platform.includes(`Mac`)?`⌘`:`Ctrl+`,vr={mod:_r,dup:`${_r}D`,undo:`${_r}Z`,redo:navigator.platform.includes(`Mac`)?`⇧⌘Z`:`Ctrl+Shift+Z`,copy:`${_r}C`},yr={width:1200,height:800};function br(e,t){yr={width:e,height:t}}function G(e){let t=U.getState();return t.playing===e.frameName?xr(e):e.height??t.frameHeights[e.frameName]??360}function xr(e){return e.height??Wn(e.device)?.height??900}function Sr(e){let t=U.getState();if(e){let n=t.selection.filter(n=>t.index.get(n)?.frame.frameName!==e);U.setState({playing:e,selection:n,hover:null})}else U.setState({playing:null})}function Cr(e){vi(e,{type:`tc:replay`})}var wr=0;function Tr(e){U.setState({camera:e});let t=U.getState().canvas;t&&(clearTimeout(wr),wr=window.setTimeout(()=>dr(`tc:camera:${t}`,e),300))}function Er(e,t=1,n=72){let{width:r,height:i}=yr,a=Math.min(t,(r-n*2)/Math.max(1,e.width),(i-n*2-40)/Math.max(1,e.height)),o=Math.max(.05,a);Tr({zoom:o,x:r/2-(e.x+e.width/2)*o,y:(i-40)/2-(e.y+e.height/2)*o})}function Dr(e){if(!e.length)return{x:0,y:0,width:800,height:600};let t=e.map(e=>e.x),n=e.map(e=>e.y),r=e.map(e=>e.x+e.width),i=e.map(e=>e.y+G(e)),a=Math.min(...t),o=Math.min(...n);return{x:a,y:o,width:Math.max(...r)-a,height:Math.max(...i)-o}}var Or=e=>`tc:heights:${e}`;function kr(e){try{return JSON.parse(localStorage.getItem(Or(e))??`{}`)}catch{return{}}}var Ar=0;function jr(){let{canvas:e,frameHeights:t}=U.getState();e&&(clearTimeout(Ar),Ar=window.setTimeout(()=>dr(Or(e),t),500))}function Mr(e,t){let{width:n,height:r}=yr;return t.some(t=>{let i=e.x+t.x*e.zoom,a=e.y+t.y*e.zoom;return i+t.width*e.zoom>0&&i<n&&a+G(t)*e.zoom>0&&a<r})}var Nr=!1;function Pr(){Nr=!0,Lr(),setTimeout(()=>Nr=!1,6e3)}function Fr(){Nr=!1}function Ir(){Nr&&Lr()}function Lr(){let e=U.getState().doc;e&&Er(Dr(e.frames))}function Rr(){let e=U.getState(),t=[];for(let n of e.selection){let r=e.index.get(n);if(r){if(r.node.id===r.frame.id)t.push({x:r.frame.x,y:r.frame.y,width:r.frame.width,height:G(r.frame)});else{let i=e.rects[n];i&&t.push({x:r.frame.x+i.x,y:r.frame.y+i.y,width:i.width,height:i.height})}}}if(!t.length)return Lr();let n=Math.min(...t.map(e=>e.x)),r=Math.min(...t.map(e=>e.y));Er({x:n,y:r,width:Math.max(...t.map(e=>e.x+e.width))-n,height:Math.max(...t.map(e=>e.y+e.height))-r},2,96)}function zr(e,t){let{camera:n}=U.getState(),r=t??{x:yr.width/2,y:yr.height/2},i=Math.min(8,Math.max(.05,n.zoom*e)),a=i/n.zoom;Tr({zoom:i,x:r.x-(r.x-n.x)*a,y:r.y-(r.y-n.y)*a})}function Br(e){zr(e/U.getState().camera.zoom)}var Vr=()=>U.getState().canvas,Hr=()=>{let e=U.getState().selection;e.length&&U.getState().run({op:`duplicate`,canvas:Vr(),ids:e})},Ur=()=>{let e=U.getState();if(!e.selection.length)return;let t=e.selection.map(t=>e.index.get(t)?.parent?.id).filter(Boolean);e.run({op:`delete`,canvas:Vr(),ids:e.selection},{select:!1}).then(e=>{e&&U.getState().select(t.slice(0,1).filter(e=>U.getState().index.has(e)))})},Wr=()=>{let e=U.getState(),t=e.selection.filter(t=>e.index.get(t)?.parent);t.length&&e.run({op:`wrap`,canvas:Vr(),ids:t})},Gr=e=>{let t=U.getState();if(t.selection.length!==1)return;let n=t.index.get(t.selection[0]);n?.parent&&t.run({op:`reorder`,canvas:Vr(),id:n.node.id,delta:e})},Kr=()=>{let e=U.getState(),t=e.selection[0];if(!t)return;let n=e.index.get(t)?.parent;e.select(n?[n.id]:[])},qr=()=>{let e=U.getState(),t=(e.index.get(e.selection[0])?.node)?.children.find(e=>e.kind===`component`||e.kind===`element`);t&&e.select([t.id])};async function Jr(){let e=U.getState();if(!e.canvas||!e.selection.length)return;let t=await Promise.all(e.selection.map(t=>H.source(e.canvas,$n(t)).then(e=>e.code)));await navigator.clipboard.writeText(t.join(`
+`)),e.toast(`Copied JSX of ${t.length===1?`1 layer`:`${t.length} layers`}`,`info`)}function Yr(e){let t=U.getState();t.canvas&&H.open(t.canvas,e&&$n(e)).catch(e=>t.toast(e.message))}async function Xr(e){let t=U.getState();t.canvas&&(await t.run({op:`explore_copy`,canvas:t.canvas,frame:e}))?.length&&(t.toast(`Exploration created. Edits here stay in the canvas until you apply them to the page.`,`info`),setTimeout(Rr,400))}async function Zr(e){let t=U.getState();if(!t.canvas)return;let n=t.doc?.frames.find(t=>t.id===e);await t.run({op:`apply_to_page`,canvas:t.canvas,frame:e})&&t.toast(`Applied to ${n?.from??`the page`}. Undo with ${vr.undo} if it's not right.`,`info`)}function Qr(){let e=U.getState(),t=e.doc;if(!t)return null;let n=e.index.get(e.selection[0]);if(n){let e=n.node;if(e.id===n.frame.id)return{parent:$r(e)};if(ei(e)&&e.children.some(e=>e.kind===`component`||e.kind===`element`))return{parent:e.id};if(n.parent)return{parent:n.parent.id,index:n.parent.children.findIndex(t=>t.id===e.id)+1}}let r=t.frames[0];return r?{parent:$r(r)}:null}function $r(e){let t=e.children.filter(e=>e.kind!==`text`);return t.length===1&&t[0].kind===`element`&&ei(t[0])?t[0].id:e.id}function ei(e){if(e.kind===`element`)return!/^(img|input|br|hr|textarea|select)$/.test(e.name);if(e.kind===`component`){if(e.name===`Frame`)return!0;let t=U.getState().components.find(t=>t.name===e.name);return t?t.acceptsChildren:!e.selfClosing}return e.kind===`fragment`}async function ti(e,t,n){let r=U.getState(),i=t??Qr();if(!i||!r.canvas)return r.toast(`Create a frame first (F).`,`info`);await r.run({op:`insert_component`,canvas:r.canvas,component:e.name,parent:i.parent,index:i.index,props:n})}async function ni(e,t,n=800,r=null){let i=U.getState();i.canvas&&await i.run({op:`create_frame`,canvas:i.canvas,x:Math.round(e),y:Math.round(t),width:Math.round(n),height:r===null?null:Math.round(r)})}function ri(){let e=U.getState().uiTheme,t=e===`dark`||e===`system`&&window.matchMedia(`(prefers-color-scheme: dark)`).matches;document.documentElement.dataset.ui=t?`dark`:`light`}function ii(e,t,n={}){let r=()=>{let e=U.getState(),r=t.map(t=>nr(e.index,t)).filter(t=>e.index.has(t));r.length&&(e.select(r),n.zoom!==!1&&K().then(()=>Rr()))},i=U.getState();if(i.canvas===e&&i.doc?.name===e)return r();i.canvas!==e&&U.setState({canvas:e});let a=U.subscribe(t=>{t.doc?.name===e&&(a(),clearTimeout(o),r())}),o=setTimeout(a,1e4)}var ai=new Map,oi=new Map,si=0,ci=null,li=null;function ui(e,t){t?ai.set(e,t):ai.delete(e)}function di(e){let{frameReady:t}=U.getState();if(!t[e])return;let{[e]:n,...r}=t;U.setState({frameReady:r})}function fi(e){ci=e}function pi(e){li=e}function mi(e){for(let[t,n]of ai)if(n.contentWindow===e)return t;return null}function hi(){try{return new URL(U.getState().appUrl).origin}catch{return null}}function gi(e){let t=ai.get(e),n=hi();return t?.contentWindow&&n?{win:t.contentWindow,origin:n,el:t}:null}function _i(e,t,n=1500){let r=gi(e);if(!r)return Promise.resolve(null);let i=++si;return new Promise(e=>{let a=setTimeout(()=>{oi.delete(i),e(null)},n);oi.set(i,t=>{clearTimeout(a),e(t)}),r.win.postMessage({...t,req:i},r.origin)})}function vi(e,t){let n=gi(e);n?.win.postMessage(t,n.origin)}var yi=e=>U.getState().doc?.frames.find(t=>t.frameName===e)?.id;async function bi(e,t,n){let r=await _i(e,{type:`tc:hit`,x:t,y:n});if(!r)return r;let i=U.getState().index,a=yi(e),o={};for(let[e,t]of Object.entries(r.rects))o[tr(i,a,e)]=t;return{chain:r.chain.map(e=>tr(i,a,e)),rects:o}}async function xi(e,t){if(!t.length)return{};let n=await _i(e,{type:`tc:rects`,ids:[...new Set(t.map($n))]}),r={};for(let e of t)r[e]=n?.rects?.[$n(e)]??null;return r}async function K(e){let t=U.getState(),n=new Set([...t.selection,...t.hover?[t.hover]:[],...t.flashes.map(e=>e.id),...Object.values(t.presence).flatMap(e=>e.ids)]),r=new Map;for(let i of n){let n=t.index.get(i);if(!n||n.node.id===n.frame.id)continue;let a=n.frame.frameName;(!e||e.has(a))&&r.set(a,[...r.get(a)??[],i])}let i=await Promise.all([...r].map(([e,t])=>xi(e,t))),a=Object.assign({},...i);Object.keys(a).length&&U.setState({rects:{...U.getState().rects,...a}})}var Si=!1;function Ci(){if(Si)return;Si=!0;let e=new Set,t=0;window.addEventListener(`message`,n=>{let r=n.data;if(!r||typeof r.type!=`string`||!r.type.startsWith(`tc:`)||n.origin!==hi())return;let i=mi(n.source);if(!i)return;let a=U.getState();switch(r.type){case`tc:hit:res`:case`tc:rects:res`:{let e=oi.get(r.req);e&&(oi.delete(r.req),e(r));break}case`tc:ready`:U.setState({frameReady:{...a.frameReady,[i]:!0},frameErrors:{...a.frameErrors,[i]:null}});break;case`tc:layout`:{let n=r.height;r.ready&&n&&a.frameHeights[i]!==n&&(U.setState({frameHeights:{...U.getState().frameHeights,[i]:n}}),jr(),Ir()),r.ready&&!a.frameReady[i]&&U.setState({frameReady:{...U.getState().frameReady,[i]:!0}}),e.add(i),t||=requestAnimationFrame(()=>{t=0;let n=e;e=new Set,K(n),U.setState({layoutTick:U.getState().layoutTick+1})});break}case`tc:error`:(a.frameErrors[i]??null)!==(r.message??null)&&U.setState({frameErrors:{...a.frameErrors,[i]:r.message??null}});break;case`tc:wheel`:{let e=ai.get(i);if(!e||!ci)break;let t=e.getBoundingClientRect(),n=a.camera.zoom;ci({dx:r.dx,dy:r.dy,ctrl:!!r.ctrl,mode:r.mode,clientX:t.left+r.x*n,clientY:t.top+r.y*n});break}case`tc:key`:li?.(r)}})}var wi=/^(-?)(gap|p|px|py|pt|pr|pb|pl)-(\d+(?:\.\d+)?|px|\[(\d+(?:\.\d+)?)px\])$/;function Ti(e){if(e===`px`)return 1;let t=/^\[(\d+(?:\.\d+)?)px\]$/.exec(e);if(t)return Number(t[1]);let n=Number(e);return Number.isFinite(n)?n*4:null}function Ei(e){return e.split(/\s+/).filter(Boolean)}function Di(e){let t=Ei(e).filter(e=>!e.includes(`:`)),n={display:`other`,direction:`row`,wrap:!1,gap:null,padX:null,padY:null,items:null,justify:null};for(let e of t)if(e===`flex`||e===`grid`||e===`block`||e===`inline-flex`)n.display=e;else if(e===`flex-col`)n.direction=`col`;else if(e===`flex-row`)n.direction=`row`;else if(e===`flex-wrap`)n.wrap=!0;else if(e.startsWith(`items-`))n.items=e.slice(6);else if(e.startsWith(`justify-`))n.justify=e.slice(8);else{let t=wi.exec(e);if(!t)continue;let r=Ti(t[3]);t[2]===`gap`?n.gap=r:t[2]===`p`?n.padX=n.padY=r:t[2]===`px`?n.padX=r:t[2]===`py`&&(n.padY=r)}return n}function q(e,t){let n=t/4;return Number.isInteger(n*2)?`${e}-${n}`:`${e}-[${t}px]`}function J(e,t,n){let r=Ei(e),i=[],a=!1;for(let e of r){if(t(e)){a||=(i.push(...n),!0);continue}i.push(e)}return a||i.push(...n),[...new Set(i)].join(` `)}function Oi(e,t,n=`col`){return t?J(e,e=>e===`block`||e===`grid`,n===`col`?[`flex`,`flex-col`,`gap-2`]:[`flex`,`gap-2`]):J(e,e=>[`flex`,`inline-flex`,`flex-col`,`flex-row`,`flex-wrap`].includes(e)||e.startsWith(`gap-`)||e.startsWith(`items-`)||e.startsWith(`justify-`),[])}function ki(e,t,n){let r=e=>{let n=wi.exec(e);return!n||e.includes(`:`)?!1:t===`gap`?n[2]===`gap`:n[2]===t||n[2]===`p`},i=e,a=Ei(e).find(e=>/^p-/.test(e));if(a&&t!==`gap`){let n=Ti(wi.exec(a)[3]);i=J(e,e=>e===a,n===null?[]:[q(t===`px`?`py`:`px`,n)])}return J(i,r,n===null||Number.isNaN(n)?[]:[q(t,Math.max(0,n))])}function Ai(e,t){return J(e,e=>e===`flex-wrap`||e===`flex-nowrap`,t?[`flex-wrap`]:[])}function ji(e,t,n){let r=J(e,e=>e.startsWith(`items-`),t&&t!==`stretch`?[`items-${t}`]:[]);return r=J(r,e=>e.startsWith(`justify-`)&&!e.startsWith(`justify-items`)&&!e.startsWith(`justify-self`),n&&n!==`start`?[`justify-${n}`]:[]),r}function Mi(e,t,n){let r=[`start`,`center`,`end`];return e===`row`?{justify:r[t],items:r[n]}:{items:r[t],justify:r[n]}}function Ni(e){let t=e=>e===`center`?1:e===`end`?2:0;return e.direction===`row`?{col:t(e.justify),row:t(e.items)}:{col:t(e.items),row:t(e.justify)}}function Pi(e){if(!e)return null;let t=Di(e);return t.display===`grid`?`Grid`:t.display===`flex`||t.display===`inline-flex`?t.direction===`col`?`Stack`:`Row`:null}var Fi=/^text-(xs|sm|base|lg|xl|[2-9]xl|\[\d+(\.\d+)?(px|rem)\])$/,Ii=/^text-(left|center|right|justify|start|end)$/,Li=/^text-(wrap|nowrap|balance|pretty|ellipsis|clip|shadow.*)$/,Ri=/^border(-(0|2|4|8|\[\d+(\.\d+)?px\]))?$/,zi=/^border-(solid|dashed|dotted|double|none|hidden|collapse|separate|spacing.*|[trblxyse](-.+)?)$/,Bi=/^bg-(gradient|linear|radial|conic|none|cover|contain|auto|center|top|bottom|left|right|no-repeat|repeat.*|fixed|local|scroll|clip.*|origin.*|blend.*|\[url.*)/,Vi={width:e=>/^w-/.test(e),height:e=>/^h-/.test(e),opacity:e=>/^opacity-/.test(e),radius:e=>/^rounded(-(none|xs|sm|md|lg|xl|[2-4]xl|full|\[[^\]]+\]))?$/.test(e),overflow:e=>/^overflow-(hidden|clip|visible|auto|scroll)$/.test(e),bg:e=>/^bg-/.test(e)&&!Bi.test(e),borderWidth:e=>Ri.test(e),borderColor:e=>/^border-/.test(e)&&!Ri.test(e)&&!zi.test(e),shadow:e=>/^shadow(-(2xs|xs|sm|md|lg|xl|2xl|none|inner|\[.+\]))?$/.test(e),blur:e=>/^blur(-(none|xs|sm|md|lg|xl|[23]xl|\[.+\]))?$/.test(e),backdropBlur:e=>/^backdrop-blur(-(none|xs|sm|md|lg|xl|[23]xl|\[.+\]))?$/.test(e),textSize:e=>Fi.test(e),textAlign:e=>Ii.test(e),textColor:e=>/^text-/.test(e)&&!Fi.test(e)&&!Ii.test(e)&&!Li.test(e),weight:e=>/^font-(thin|extralight|light|normal|medium|semibold|bold|extrabold|black)$/.test(e),leading:e=>/^leading-/.test(e),tracking:e=>/^tracking-/.test(e),gridCols:e=>/^grid-cols-/.test(e)},Hi=e=>Ei(e).filter(e=>!e.includes(`:`));function Y(e,t){return Hi(e).find(Vi[t])??null}function X(e,t,n){return J(e,e=>!e.includes(`:`)&&Vi[t](e),n?[n]:[])}function Z(e,t){return e&&e.startsWith(t)?e.slice(t.length):null}function Ui(e,t){let n=Y(e,t===`w`?`width`:`height`),r=Z(n,`${t}-`);return r?r===`full`||r===`screen`||r===`dvh`||r===`svh`?{mode:`fill`,px:null,raw:n}:r===`fit`||r===`max`||r===`min`?{mode:`hug`,px:null,raw:n}:r===`auto`?{mode:`auto`,px:null,raw:n}:{mode:`fixed`,px:Ti(r),raw:n}:{mode:`auto`,px:null,raw:null}}function Wi(e,t,n,r){let i=t===`w`?`width`:`height`;return n===`auto`?X(e,i,null):n===`fill`?X(e,i,`${t}-full`):n===`hug`?X(e,i,`${t}-fit`):X(e,i,q(t,Math.max(0,Math.round(r??100))))}function Gi(e){let t={t:null,r:null,b:null,l:null};for(let n of Hi(e)){let e=wi.exec(n);if(!e||e[2]===`gap`)continue;let r=Ti(e[3]),i=e[2];i===`p`&&(t.t=t.r=t.b=t.l=r),i===`px`&&(t.l=t.r=r),i===`py`&&(t.t=t.b=r),i===`pt`&&(t.t=r),i===`pr`&&(t.r=r),i===`pb`&&(t.b=r),i===`pl`&&(t.l=r)}return t}function Ki(e,t){let n=e=>{let t=wi.exec(e);return!!t&&!e.includes(`:`)&&t[2]!==`gap`},r=[],i=e=>e===null?null:Math.max(0,e),[a,o,s,c]=[i(t.t),i(t.r),i(t.b),i(t.l)];return a!==null&&a===o&&o===s&&s===c?r.push(q(`p`,a)):(c!==null&&c===o?r.push(q(`px`,c)):(c!==null&&r.push(q(`pl`,c)),o!==null&&r.push(q(`pr`,o))),a!==null&&a===s?r.push(q(`py`,a)):(a!==null&&r.push(q(`pt`,a)),s!==null&&r.push(q(`pb`,s)))),J(e,n,r)}var qi={xs:12,sm:14,base:16,lg:18,xl:20,"2xl":24,"3xl":30,"4xl":36,"5xl":48,"6xl":60,"7xl":72,"8xl":96,"9xl":128},Ji={none:0,xs:2,sm:4,md:6,lg:8,xl:12,"2xl":16,"3xl":24,"4xl":32},Yi=[`thin`,`extralight`,`light`,`normal`,`medium`,`semibold`,`bold`,`extrabold`,`black`],Xi={thin:100,extralight:200,light:300,normal:400,medium:500,semibold:600,bold:700,extrabold:800,black:900},Zi=[`none`,`tight`,`snug`,`normal`,`relaxed`,`loose`],Qi=[`tighter`,`tight`,`normal`,`wide`,`wider`,`widest`];function $i(e,t){let n=new Set([`flex`,`inline-flex`,`grid`,`inline-grid`,`flex-col`,`flex-row`,`flex-wrap`]),r=Ei(e).filter(e=>e.includes(`:`)||!n.has(e)&&!/^grid-cols-/.test(e)),i=/\bgrid-cols-(\S+)/.exec(e)?.[1]??`2`;return[...t===`grid`?[`grid`,`grid-cols-${i}`]:t===`col`?[`flex`,`flex-col`]:[`flex`],...r].join(` `)}var ea=s(),ta=0,na=``,ra=!0;function ia(){ra=!0}function Q(e=600){clearTimeout(ta),ta=window.setTimeout(()=>{H.gitStatus().then(e=>{U.setState({git:e});let t=JSON.stringify(e.files)+e.branch;e.repo&&(ra||t!==na)&&(na=t,ra=!1,H.gitChanges().then(({pages:e})=>U.setState({review:e})).catch(()=>{})),e.repo||U.setState({review:[]})}).catch(()=>{})},e)}var aa=0;function oa(e=!1){clearTimeout(aa),aa=window.setTimeout(()=>{H.gitPr(e).then(e=>U.setState({pr:e})).catch(()=>{})},50)}function sa(){let e=U.getState().canvas;e&&H.comments(e).then(({threads:t})=>U.getState().canvas===e&&U.setState({threads:t})).catch(()=>{})}var ca=e=>/^[A-Z][a-z]/.test(e)?e[0].toLowerCase()+e.slice(1):e;function la(e){let t=[];for(let n of e)!t.includes(n.label)&&!/^(Undid|Redid) /.test(n.label)&&t.push(n.label);return t}function ua(e){let t=e.flatMap(e=>e.frames.map(t=>({page:e.canvas,...t,labels:la(t.changes)})));if(!t.length)return``;let n=e=>{if(e.status===`added`)return`add ${e.name}`;if(e.status===`removed`)return`remove ${e.name}`;if(!e.labels.length)return`update ${e.name}`;let t=e.labels.slice(0,3).map(ca).join(`, `);return e.labels.length>3?`${t} and ${e.labels.length-3} more`:t};if(t.length===1){let e=t[0];return e.status===`changed`?`${e.name}: ${n(e)}`:da(n(e))}return`${`Update ${[...new Set(t.map(e=>e.name))].slice(0,3).join(`, `)}${t.length>3?` and ${t.length-3} more`:``}`}\n\n${t.map(e=>`- ${e.name}: ${n(e)}`).join(`
+`)}`}var da=e=>e[0].toUpperCase()+e.slice(1),fa=e=>e.normalize(`NFD`).replace(/[\u0300-\u036f]/g,``).toLowerCase().replace(/[^a-z0-9]+/g,`-`).replace(/^-|-$/g,``);function pa(e,t){let n=e.find(e=>e.canvas===t)??e[0],r=(n?.frames??[]).slice(0,2).map(e=>fa(e.name));return`design/${[fa(n?.canvas??t??``),...r].filter((e,t,n)=>e&&n.indexOf(e)===t).join(`-`).slice(0,40).replace(/-$/,``)||`changes`}`}var ma=e=>e.split(`
+`)[0].trim(),ha=t({BranchPill:()=>wa,ReviewSheet:()=>Ma,startCompare:()=>ga,stopCompare:()=>_a}),$=_();async function ga(e,t=e){let n=U.getState();if(n.canvas)try{let r=await H.compare(n.canvas,e);U.setState({compare:{ref:e,label:t,name:r.name,doc:r.doc,changes:r.changes,mode:n.compare?.mode??`side`,opacity:n.compare?.opacity??.5},selection:[]}),requestAnimationFrame(()=>{let e=[...(U.getState().doc?.frames??[]).map(e=>({x:e.x,y:e.y,width:e.width,height:G(e)})),...r.doc.frames.map(e=>Ra(e))];if(!e.length)return;let t=Math.min(...e.map(e=>e.x)),n=Math.min(...e.map(e=>e.y));Er({x:t,y:n,width:Math.max(...e.map(e=>e.x+e.width))-t,height:Math.max(...e.map(e=>e.y+e.height))-n})})}catch(e){n.toast(e.message,`info`)}}async function _a(){U.setState({compare:null}),await H.clearCompare().catch(()=>{})}function va(e,t,n){return e.startsWith(`${t}/`)||!!n?.includes(e)}var ya=e=>e.reduce((e,t)=>e+t.frames.length,0);function ba(){let e=U(e=>e.review),t=U(e=>e.commitMessage);return[U(e=>e.commitTouched)?t:ua(e),e=>U.setState({commitMessage:e,commitTouched:!0})]}async function xa(e,t){let{hash:n}=await H.gitCommit(e,t);return U.setState({commitMessage:``,commitTouched:!1}),ia(),Q(0),n}async function Sa(e,t){try{let n=await e();return t&&U.getState().toast(t,`info`),n}catch(e){return U.getState().toast(e.message),null}}function Ca(e){return e.state===`MERGED`?{text:`Merged`,tone:`merged`}:e.state===`CLOSED`?{text:`Closed`,tone:`closed`}:e.checks.failed?{text:`${e.checks.failed} check${e.checks.failed===1?``:`s`} failing`,tone:`failing`}:e.review===`CHANGES_REQUESTED`?{text:`Changes requested`,tone:`failing`}:e.checks.pending?{text:`Checks running`,tone:`pending`}:e.review===`APPROVED`?{text:`Approved`,tone:`open`}:{text:e.draft?`Draft`:`Open`,tone:e.draft?`pending`:`open`}}function wa(){let e=U(e=>e.git),t=U(e=>e.pr?.pr??null),n=U(e=>e.doc?.file.split(`/`).slice(0,-1).join(`/`)??`canvas`),[r,i]=(0,B.useState)(!1),a=(0,B.useRef)(null);if(!e)return null;let o=e.files.filter(t=>va(t.path,n,e.linked)).length;return(0,$.jsxs)($.Fragment,{children:[(0,$.jsx)(v,{label:e.repo?`Branch ${e.branch??`(detached)`}${o?`, ${o} changed design files`:``}${t?`, PR #${t.number}: ${Ca(t).text}`:``}`:`Not a git repository`,side:`bottom`,children:(0,$.jsxs)(`button`,{ref:a,className:`branch-pill${r?` on`:``}`,onClick:()=>i(!r),"aria-label":`Git`,children:[(0,$.jsx)(Ke,{size:12}),(0,$.jsx)(`span`,{className:`name`,children:e.repo?e.branch??`detached`:`no git`}),o>0&&(0,$.jsx)(`span`,{className:`dot-count`,children:o}),t&&(0,$.jsx)(`span`,{className:`pr-dot ${Ca(t).tone}`}),e.behind>0&&(0,$.jsxs)(`span`,{className:`ab`,children:[(0,$.jsx)(ee,{size:10}),e.behind]}),e.ahead>0&&(0,$.jsxs)(`span`,{className:`ab`,children:[(0,$.jsx)(re,{size:10}),e.ahead]})]})}),r&&(0,$.jsx)(Ta,{anchor:a.current,onClose:()=>i(!1)})]})}function Ta({anchor:e,onClose:t}){let n=U(e=>e.git),r=U(e=>e.review),i=U(e=>e.pr?.pr??null),a=U(e=>!!e.pr?.github),o=U(e=>e.canvas),s=U(e=>e.doc?.file.split(`/`).slice(0,-1).join(`/`)??`canvas`),u=(0,B.useRef)(null),[d,f]=(0,B.useState)(null),[m,g]=(0,B.useState)([]),[_,y]=ba(),[b,x]=(0,B.useState)(`canvas`),[S,C]=(0,B.useState)(null),[T,E]=(0,B.useState)(null),[D,O]=(0,B.useState)(!1),[k,A]=(0,B.useState)(!1),[j,N]=(0,B.useState)(!1),F=e.getBoundingClientRect(),I=()=>{H.gitBranches().then(f).catch(()=>{}),H.gitLog().then(({commits:e})=>g(e)).catch(()=>{}),ia(),Q(0),oa(!0)};(0,B.useEffect)(()=>{I(),H.gitFetch().then(e=>U.setState({git:e})).catch(()=>{});let n=n=>{let r=n.target;!u.current?.contains(r)&&!e.contains(r)&&!r.closest?.(`.listbox, .modal-backdrop, .review-sheet`)&&t()},r=e=>{e.key===`Escape`&&!document.querySelector(`.modal-backdrop, .review-sheet`)&&(e.stopPropagation(),t())};return window.addEventListener(`pointerdown`,n,!0),window.addEventListener(`keydown`,r,!0),()=>{window.removeEventListener(`pointerdown`,n,!0),window.removeEventListener(`keydown`,r,!0)}},[o]);let te=async(e,t,n)=>{C(e),await Sa(t,n),C(null),I()},L=n.files.filter(e=>va(e.path,s,n.linked)),R=n.files.length-L.length,ne=b===`canvas`?L.length:n.files.length,ie=!!n.branch&&n.branch===n.defaultBranch,ae=n.repo&&a&&!!n.branch&&!ie&&!i&&!n.unborn,oe=(e,t)=>U.setState({reviewing:{canvas:e,frame:t}});return(0,ea.createPortal)((0,$.jsxs)(`div`,{ref:u,className:`git-pop`,style:{left:F.left,top:F.bottom+6},onKeyDown:e=>e.stopPropagation(),children:[n.repo?(0,$.jsxs)($.Fragment,{children:[(0,$.jsxs)(`div`,{className:`git-row`,children:[(0,$.jsx)(`div`,{style:{flex:1},children:T===null?(0,$.jsx)(h,{value:n.branch??``,placeholder:`Detached HEAD`,options:[...(d?.local??[]).map(e=>({value:e,label:e,icon:(0,$.jsx)(Ke,{size:13}),hint:e===n.defaultBranch?`default`:void 0})),{value:`__new`,label:`New branch…`,icon:(0,$.jsx)(p,{size:13})}],onChange:e=>e===`__new`?E(pa(r,o)):void te(`switch`,()=>H.gitSwitch(e),`Switched to ${e}`),ariaLabel:`Branch`}):(0,$.jsx)(Da,{value:T,onChange:E,onCancel:()=>E(null),onSubmit:e=>{E(null),te(`switch`,()=>H.gitSwitch(e,!0),`Created ${e}. Your changes came with you.`)}})}),(0,$.jsx)(v,{label:n.behind?`Pull ${n.behind} commit${n.behind===1?``:`s`}`:`Pull`,children:(0,$.jsxs)(`button`,{className:`btn outline`,disabled:!!S||!n.remote,onClick:()=>void te(`pull`,()=>H.gitPull(),`Pulled`),children:[S===`pull`?(0,$.jsx)(l,{size:13,className:`spin-working`}):(0,$.jsx)(ee,{size:13}),n.behind||``]})}),(0,$.jsx)(v,{label:n.upstream?`Push ${n.ahead} commit${n.ahead===1?``:`s`}`:`Push and track on origin`,children:(0,$.jsxs)(`button`,{className:`btn outline`,disabled:!!S||!n.remote||!!n.upstream&&!n.ahead,onClick:()=>void te(`push`,()=>H.gitPush(),`Pushed`),children:[S===`push`?(0,$.jsx)(l,{size:13,className:`spin-working`}):(0,$.jsx)(re,{size:13}),n.ahead||``]})})]}),ie&&r.length>0&&T===null&&(0,$.jsxs)(`div`,{className:`git-banner`,children:[(0,$.jsx)(Ke,{size:14}),(0,$.jsxs)(`div`,{className:`text`,children:[(0,$.jsxs)(`strong`,{children:[`You’re on `,n.branch,`.`]}),` Start a branch so these changes can be reviewed in a pull request. Your edits come with you.`]}),(0,$.jsx)(`button`,{className:`btn primary small`,onClick:()=>E(pa(r,o)),children:`Start a branch`})]}),!n.remote&&!n.unborn&&(0,$.jsxs)(`div`,{className:`git-banner muted`,children:[(0,$.jsx)(ye,{size:14}),(0,$.jsxs)(`div`,{className:`text`,children:[(0,$.jsx)(`strong`,{children:`Not on GitHub yet.`}),` Publish the project to push branches and open pull requests.`]}),(0,$.jsx)(`button`,{className:`btn outline small`,onClick:()=>N(!0),children:`Publish`})]}),i&&(0,$.jsx)(ka,{pr:i,ahead:n.ahead}),(0,$.jsxs)(`div`,{className:`git-section-title`,children:[(0,$.jsx)(`span`,{children:`Changes`}),(0,$.jsxs)(`span`,{className:`actions`,children:[r.length>0&&(0,$.jsxs)(`button`,{className:`link`,onClick:()=>oe(r.find(e=>e.canvas===o)?.canvas??r[0].canvas,null),children:[`Review `,ya(r),` frame`,ya(r)===1?``:`s`,(0,$.jsx)(c,{size:12})]}),(0,$.jsx)(`button`,{className:`icon-btn sm`,"aria-label":`Refresh`,onClick:I,children:(0,$.jsx)(P,{size:12})})]})]}),r.length===0&&(0,$.jsxs)(`div`,{className:`faint git-note`,children:[`No design changes since the last commit`,R?`, ${R} other file${R===1?``:`s`} changed`:``,`.`]}),(0,$.jsx)(`div`,{className:`git-changes`,children:r.map(e=>e.frames.map(t=>(0,$.jsxs)(`button`,{className:`git-change`,onClick:()=>oe(e.canvas,t.name),children:[(0,$.jsx)(`span`,{className:`change-mark ${t.status}`}),(0,$.jsxs)(`span`,{className:`what`,children:[(0,$.jsxs)(`span`,{className:`frame-name`,children:[t.name,r.length>1||e.canvas!==o?(0,$.jsxs)(`span`,{className:`faint`,children:[` · `,e.canvas]}):null]}),(0,$.jsx)(`span`,{className:`faint labels`,children:Ea(t)})]}),(0,$.jsx)(c,{size:13,className:`faint`})]},`${e.canvas}/${t.name}`)))}),R>0&&r.length>0&&(0,$.jsxs)(`div`,{className:`faint git-note`,children:[`+ `,R,` other changed file`,R===1?``:`s`,` in the project`]}),(0,$.jsx)(Oa,{message:_,setMessage:y,scope:b,setScope:x,toCommit:ne,pageCount:L.length,allCount:n.files.length,busy:S,setBusy:C,after:I,unborn:n.unborn}),ae&&(0,$.jsxs)(`button`,{className:`btn outline pr-btn`,disabled:!!S||L.length>0,title:L.length?`Commit your design changes first`:void 0,onClick:()=>A(!0),children:[(0,$.jsx)(M,{size:13}),` Open pull request`]}),(0,$.jsx)(`button`,{className:`git-section-title toggle`,onClick:()=>O(!D),children:(0,$.jsxs)(`span`,{children:[(0,$.jsx)(c,{size:12,className:D?`rot`:``}),` History & compare`]})}),D&&(0,$.jsxs)($.Fragment,{children:[(0,$.jsx)(`div`,{className:`git-row`,children:(0,$.jsx)(`div`,{style:{flex:1},children:(0,$.jsx)(h,{value:``,placeholder:`Compare this page with…`,options:[...n.unborn?[]:[{value:`HEAD`,label:`Last commit`,hint:`HEAD`,icon:(0,$.jsx)(Je,{size:13})}],...(d?.local??[]).filter(e=>e!==n.branch).map(e=>({value:e,label:e,icon:(0,$.jsx)(Ke,{size:13})})),...(d?.remote??[]).map(e=>({value:e,label:e,icon:(0,$.jsx)(Ke,{size:13})}))],onChange:e=>{t(),ga(e,e===`HEAD`?`last commit`:e)},ariaLabel:`Compare with`})})}),(0,$.jsxs)(`div`,{className:`git-log`,children:[m.length===0&&(0,$.jsx)(`div`,{className:`faint git-note`,children:`No commits yet.`}),m.slice(0,12).map(e=>(0,$.jsxs)(`div`,{className:`git-commit`,children:[(0,$.jsx)(Je,{size:13,className:`faint`}),(0,$.jsxs)(`div`,{className:`msg`,children:[(0,$.jsx)(`div`,{className:`subject`,children:e.subject}),(0,$.jsxs)(`div`,{className:`faint`,children:[e.author,` · `,w(e.at),` · `,(0,$.jsx)(`span`,{className:`mono`,children:e.short})]})]}),(0,$.jsx)(v,{label:`Compare with this version`,children:(0,$.jsx)(`button`,{className:`icon-btn sm`,"aria-label":`Compare with ${e.short}`,onClick:()=>{t(),ga(e.hash,e.short)},children:(0,$.jsx)(Xe,{size:13})})})]},e.hash))]})]})]}):(0,$.jsxs)(`div`,{className:`empty`,style:{padding:18},children:[`This project isn’t a git repository yet.`,(0,$.jsx)(`br`,{}),`Run `,(0,$.jsx)(`span`,{className:`mono`,children:`git init`}),` in it to version your canvases.`]}),k&&(0,$.jsx)(Aa,{defaultTitle:m[0]?.subject??``,onClose:()=>A(!1)}),j&&(0,$.jsx)(ja,{onClose:()=>N(!1)})]}),document.body)}function Ea(e){if(e.status===`added`)return`New frame`;if(e.status===`removed`)return`Removed`;let t=la(e.changes);return t.length?t.slice(0,2).join(` · `)+(t.length>2?` · +${t.length-2}`:``):`Edited`}function Da({value:e,onChange:t,onSubmit:n,onCancel:r}){return(0,$.jsxs)(`div`,{className:`field`,children:[(0,$.jsx)(`span`,{className:`prefix`,children:(0,$.jsx)(Ke,{size:13})}),(0,$.jsx)(`input`,{autoFocus:!0,value:e,placeholder:`design/new-onboarding`,onFocus:e=>e.target.select(),onChange:e=>t(e.target.value),onKeyDown:t=>{t.key===`Enter`&&e.trim()&&n(e.trim()),t.key===`Escape`&&(t.stopPropagation(),r())},onBlur:()=>!e&&r()})]})}function Oa(e){let{message:t,setMessage:n,scope:r,setScope:i,toCommit:a,busy:o}=e,s=async()=>{t.trim()&&a&&!o&&(e.setBusy(`commit`),await Sa(()=>xa(t,r),`Committed`),e.setBusy(null),e.after())};return(0,$.jsxs)(`div`,{className:`commit-box`,children:[(0,$.jsx)(`div`,{className:`field area`,children:(0,$.jsx)(`textarea`,{rows:Math.min(6,Math.max(2,t.split(`
+`).length)),value:t,placeholder:`Describe the change${e.unborn?` (first commit)`:``}`,onChange:e=>n(e.target.value),onKeyDown:e=>{e.key===`Enter`&&(e.metaKey||e.ctrlKey)&&s()}})}),(0,$.jsxs)(`div`,{className:`git-row`,style:{marginTop:6},children:[(0,$.jsx)(`div`,{style:{flex:1},children:(0,$.jsx)(h,{value:r,options:[{value:`canvas`,label:`Design changes`,hint:String(e.pageCount)},{value:`all`,label:`All changes`,hint:String(e.allCount)}],onChange:e=>i(e),ariaLabel:`What to commit`})}),(0,$.jsx)(v,{label:`Commit`,kbd:`Ctrl+Enter`,children:(0,$.jsxs)(`button`,{className:`btn primary`,disabled:!!o||!t.trim()||!a,onClick:()=>void s(),children:[o===`commit`?(0,$.jsx)(l,{size:13,className:`spin-working`}):(0,$.jsx)(x,{size:13}),` Commit`]})})]})]})}function ka({pr:e,ahead:t}){let n=Ca(e);return(0,$.jsxs)(`a`,{className:`pr-card ${n.tone}`,href:e.url,target:`_blank`,rel:`noreferrer`,children:[e.state===`MERGED`?(0,$.jsx)(Qe,{size:15}):(0,$.jsx)(M,{size:15}),(0,$.jsxs)(`span`,{className:`what`,children:[(0,$.jsxs)(`span`,{className:`title`,children:[`#`,e.number,` `,e.title]}),(0,$.jsxs)(`span`,{className:`faint`,children:[n.text,e.checks.passed&&!e.checks.failed&&!e.checks.pending?` · ${e.checks.passed} checks passed`:``,t>0&&e.state===`OPEN`?` · ${t} new commit${t===1?``:`s`} to push`:``]})]}),(0,$.jsx)(Me,{size:13,className:`faint`})]})}function Aa({defaultTitle:e,onClose:t}){let n=U(e=>e.git),[r,i]=(0,B.useState)(e),[a,o]=(0,B.useState)(``),[s,c]=(0,B.useState)(!0),[u,d]=(0,B.useState)(!1),[f,p]=(0,B.useState)(!1),[m,h]=(0,B.useState)(null),g=async()=>{p(!0);let e=await Sa(()=>H.gitCreatePr({title:r,body:a,screenshots:s,draft:u}));p(!1),e&&(h(e.url),oa(!0),Q(0))};return(0,$.jsx)(y,{title:m?`Pull request opened`:`Open a pull request`,width:460,busy:f,onClose:t,children:m?(0,$.jsxs)($.Fragment,{children:[(0,$.jsxs)(`p`,{className:`muted`,children:[`Reviewers see the design changes frame by frame`,s?`, with before and after images`:``,`.`]}),(0,$.jsxs)(`div`,{className:`modal-actions`,children:[(0,$.jsx)(`button`,{className:`btn outline`,onClick:t,children:`Close`}),(0,$.jsxs)(`a`,{className:`btn primary`,href:m,target:`_blank`,rel:`noreferrer`,onClick:t,children:[(0,$.jsx)(Me,{size:13}),` Open on GitHub`]})]})]}):(0,$.jsxs)($.Fragment,{children:[(0,$.jsxs)(`p`,{className:`muted`,children:[(0,$.jsx)(`span`,{className:`mono`,children:n.branch}),` into `,(0,$.jsx)(`span`,{className:`mono`,children:n.defaultBranch??`main`}),`. The description lists what changed in each frame.`]}),(0,$.jsx)(`div`,{className:`field`,style:{marginBottom:8},children:(0,$.jsx)(`input`,{autoFocus:!0,value:r,placeholder:`Title`,onChange:e=>i(e.target.value)})}),(0,$.jsx)(`div`,{className:`field area`,style:{marginBottom:10},children:(0,$.jsx)(`textarea`,{rows:4,value:a,placeholder:`What's this for? (optional)`,onChange:e=>o(e.target.value)})}),(0,$.jsxs)(`label`,{className:`check-row`,children:[(0,$.jsx)(`input`,{type:`checkbox`,checked:s,onChange:e=>c(e.target.checked)}),(0,$.jsx)(ft,{size:13}),` Before / after images of changed frames`]}),s&&(0,$.jsxs)(`div`,{className:`faint git-note`,style:{margin:`2px 0 6px 22px`},children:[`Stored on a `,(0,$.jsx)(`span`,{className:`mono`,children:`truecanvas-previews`}),` branch of the repo, so they stay as private as the repo.`]}),(0,$.jsxs)(`label`,{className:`check-row`,style:{marginBottom:14},children:[(0,$.jsx)(`input`,{type:`checkbox`,checked:u,onChange:e=>d(e.target.checked)}),(0,$.jsx)(_e,{size:13}),` Draft`]}),(0,$.jsxs)(`div`,{className:`modal-actions`,children:[(0,$.jsx)(`button`,{className:`btn outline`,disabled:f,onClick:t,children:`Cancel`}),(0,$.jsxs)(`button`,{className:`btn primary`,disabled:f||!r.trim(),onClick:()=>void g(),children:[f?(0,$.jsx)(l,{size:13,className:`spin-working`}):(0,$.jsx)(M,{size:13}),f?s?`Pushing and rendering…`:`Pushing…`:`Open pull request`]})]})]})})}function ja({onClose:e}){let t=U(e=>e.projectName||`project`),[n,r]=(0,B.useState)(t.replace(/[^\w.-]+/g,`-`)),[i,a]=(0,B.useState)(!0),[o,s]=(0,B.useState)(!1),c=async()=>{s(!0);let t=await Sa(()=>H.gitPublish(n,i),`Published to GitHub`);s(!1),t&&(Q(0),oa(!0),e())};return(0,$.jsxs)(y,{title:`Publish to GitHub`,width:400,busy:o,onClose:e,children:[(0,$.jsx)(`p`,{className:`muted`,children:`Creates a repository on your GitHub account (with the GitHub CLI) and pushes this project to it.`}),(0,$.jsxs)(`div`,{className:`field`,style:{marginBottom:10},children:[(0,$.jsx)(`span`,{className:`prefix`,children:(0,$.jsx)(Ke,{size:13})}),(0,$.jsx)(`input`,{autoFocus:!0,value:n,onChange:e=>r(e.target.value),"aria-label":`Repository name`})]}),(0,$.jsxs)(`label`,{className:`check-row`,style:{marginBottom:14},children:[(0,$.jsx)(`input`,{type:`checkbox`,checked:i,onChange:e=>a(e.target.checked)}),` Private repository`]}),(0,$.jsxs)(`div`,{className:`modal-actions`,children:[(0,$.jsx)(`button`,{className:`btn outline`,disabled:o,onClick:e,children:`Cancel`}),(0,$.jsxs)(`button`,{className:`btn primary`,disabled:o||!/^[\w.-]+$/.test(n),onClick:()=>void c(),children:[o?(0,$.jsx)(l,{size:13,className:`spin-working`}):(0,$.jsx)(ye,{size:13}),` Publish`]})]})]})}function Ma(){let e=U(e=>e.reviewing),t=U(e=>e.review),n=U(e=>e.git),r=U(e=>e.doc?.file.split(`/`).slice(0,-1).join(`/`)??`canvas`),[i,a]=(0,B.useState)(`visual`),[o,s]=ba(),[c,u]=(0,B.useState)(!1),f=()=>U.setState({reviewing:null});if((0,B.useEffect)(()=>{if(!e)return;let t=e=>{e.key===`Escape`&&!document.querySelector(`.modal-backdrop`)&&(e.stopPropagation(),f())};return window.addEventListener(`keydown`,t,!0),()=>window.removeEventListener(`keydown`,t,!0)},[e]),!e||!n)return null;let p=t.find(t=>t.canvas===e.canvas)??t[0],m=p?.frames.find(t=>t.name===e.frame)??p?.frames[0],h=(e,t)=>U.setState({reviewing:{canvas:e,frame:t}}),g=n.files.filter(e=>va(e.path,r,n.linked)).length;return(0,ea.createPortal)((0,$.jsxs)(`div`,{className:`review-sheet`,onKeyDown:e=>e.stopPropagation(),children:[(0,$.jsxs)(`div`,{className:`review-head`,children:[(0,$.jsxs)(`div`,{className:`title`,children:[`Review changes`,(0,$.jsxs)(`span`,{className:`faint`,children:[` `,`· `,ya(t),` frame`,ya(t)===1?``:`s`,` on `,(0,$.jsx)(`span`,{className:`mono`,children:n.branch}),` since the last commit`]})]}),(0,$.jsxs)(`div`,{className:`seg`,children:[(0,$.jsxs)(`button`,{className:i===`visual`?`on`:``,onClick:()=>a(`visual`),children:[(0,$.jsx)(ft,{size:13}),` Before / after`]}),(0,$.jsxs)(`button`,{className:i===`code`?`on`:``,onClick:()=>a(`code`),children:[(0,$.jsx)(xe,{size:13}),` Code`]})]}),(0,$.jsx)(`button`,{className:`icon-btn`,"aria-label":`Close`,onClick:f,children:(0,$.jsx)(d,{size:15})})]}),!p||!m?(0,$.jsx)(`div`,{className:`empty`,style:{padding:40,flex:1},children:`Nothing to review: no design changes since the last commit.`}):(0,$.jsxs)(`div`,{className:`review-body`,children:[(0,$.jsx)(`div`,{className:`review-list`,children:t.map(e=>(0,$.jsxs)(`div`,{children:[(0,$.jsx)(`div`,{className:`review-page`,children:e.canvas}),e.frames.map(t=>(0,$.jsxs)(`button`,{className:`git-change${e.canvas===p.canvas&&t.name===m.name?` on`:``}`,onClick:()=>h(e.canvas,t.name),children:[(0,$.jsx)(`span`,{className:`change-mark ${t.status}`}),(0,$.jsxs)(`span`,{className:`what`,children:[(0,$.jsx)(`span`,{className:`frame-name`,children:t.name}),(0,$.jsx)(`span`,{className:`faint labels`,children:Ea(t)})]})]},t.name))]},e.canvas))}),(0,$.jsx)(`div`,{className:`review-main`,children:i===`visual`?(0,$.jsx)(Na,{page:p,frameName:m.name}):(0,$.jsx)(Ia,{canvas:p.canvas})})]}),(0,$.jsxs)(`div`,{className:`review-foot`,children:[(0,$.jsx)(`div`,{className:`field area`,style:{flex:1},children:(0,$.jsx)(`textarea`,{rows:Math.min(4,Math.max(1,o.split(`
+`).length)),value:o,placeholder:`Describe the change`,onChange:e=>s(e.target.value)})}),(0,$.jsxs)(`button`,{className:`btn primary`,disabled:c||!o.trim()||!g,onClick:async()=>{u(!0);let e=await Sa(()=>xa(o,`canvas`),`Committed: ${ma(o)}`);u(!1),e&&f()},children:[c?(0,$.jsx)(l,{size:13,className:`spin-working`}):(0,$.jsx)(x,{size:13}),` Commit design changes`]})]})]}),document.body)}function Na({page:e,frameName:t}){let n=e.frames.find(e=>e.name===t),r=la(n.changes),i=`${n.changes.length}:${n.changes.at(-1)?.at??0}:${e.files.join(`,`)}`,a=(0,B.useRef)(null),o=(0,B.useRef)(null),s=(0,B.useRef)(null),c=(e,t)=>{!e||!t||s.current&&s.current!==e||(s.current=e,t.scrollTop=e.scrollTop/Math.max(1,e.scrollHeight-e.clientHeight)*(t.scrollHeight-t.clientHeight),requestAnimationFrame(()=>s.current=null))};return(0,$.jsxs)(`div`,{className:`visual-diff`,children:[(0,$.jsxs)(`div`,{className:`change-chips`,children:[n.status===`added`&&(0,$.jsx)(`span`,{className:`chip added`,children:`New frame`}),n.status===`removed`&&(0,$.jsx)(`span`,{className:`chip removed`,children:`Frame removed`}),r.map(e=>(0,$.jsx)(`span`,{className:`chip`,children:e},e)),n.status===`changed`&&!r.length&&(0,$.jsx)(`span`,{className:`chip faint`,children:`Edited outside this session (see Code)`})]}),(0,$.jsxs)(`div`,{className:`sides`,children:[(0,$.jsx)(Pa,{title:`Last commit`,scrollRef:a,onScroll:()=>c(a.current,o.current),children:n.status===`added`?(0,$.jsx)(`div`,{className:`side-empty`,children:`Not in the last commit`}):(0,$.jsx)(Fa,{src:H.previewUrl(e.canvas,t,`before`,i)})}),(0,$.jsx)(Pa,{title:`Now`,scrollRef:o,onScroll:()=>c(o.current,a.current),children:n.status===`removed`?(0,$.jsx)(`div`,{className:`side-empty`,children:`Removed`}):(0,$.jsx)(Fa,{src:H.previewUrl(e.canvas,t,`after`,i)})})]})]})}function Pa({title:e,scrollRef:t,onScroll:n,children:r}){return(0,$.jsxs)(`div`,{className:`side`,children:[(0,$.jsx)(`div`,{className:`side-title`,children:e}),(0,$.jsx)(`div`,{className:`side-scroll`,ref:t,onScroll:n,children:r})]})}function Fa({src:e}){let[t,n]=(0,B.useState)(`loading`);return(0,B.useEffect)(()=>n(`loading`),[e]),(0,$.jsxs)($.Fragment,{children:[t===`loading`&&(0,$.jsxs)(`div`,{className:`side-empty`,children:[(0,$.jsx)(l,{size:16,className:`spin-working`}),` Rendering…`]}),t===`error`&&(0,$.jsx)(`div`,{className:`side-empty`,children:`Couldn’t render this version.`}),(0,$.jsx)(`img`,{src:e,alt:``,style:{display:t===`ok`?`block`:`none`},onLoad:()=>n(`ok`),onError:()=>n(`error`)})]})}function Ia({canvas:e}){let[t,n]=(0,B.useState)(null),r=U(e=>e.review);return(0,B.useEffect)(()=>{let t=!1;return n(null),H.gitDiff(e).then(e=>!t&&n(e.diff)).catch(()=>!t&&n(``)),()=>{t=!0}},[e,r]),t===null?(0,$.jsx)(`div`,{className:`side-empty`,children:(0,$.jsx)(l,{size:16,className:`spin-working`})}):t.trim()?(0,$.jsx)(`pre`,{className:`code-diff`,children:t.split(`
+`).map((e,t)=>{let n=e.startsWith(`diff --git`)?`file`:e.startsWith(`@@`)?`hunk`:e.startsWith(`+`)&&!e.startsWith(`+++`)?`add`:e.startsWith(`-`)&&!e.startsWith(`---`)?`del`:/^(index|---|\+\+\+|new file|deleted file|similarity|rename)/.test(e)?`meta`:``;return n===`meta`?null:(0,$.jsx)(`div`,{className:n,children:n===`file`?e.replace(/^diff --git a\/(\S+) b\/.*$/,`$1`):e||` `},t)})}):(0,$.jsx)(`div`,{className:`side-empty`,children:`No code changes.`})}function La(){let e=U.getState(),t=e.doc?.frames??[],n=e.compare?.doc.frames??[];return n.length?(t.length?Math.max(...t.map(e=>e.x+e.width)):0)-Math.min(...n.map(e=>e.x))+320:0}function Ra(e){let t=U.getState(),n=t.compare,r=t.doc?.frames.find(t=>t.frameName===e.frameName),i=e.height??t.frameHeights[`cmp:${e.frameName}`]??360;return n.mode===`overlay`&&r?{x:r.x,y:r.y,width:e.width,height:i,overlay:!0}:{x:e.x+La(),y:e.y,width:e.width,height:i,overlay:!1}}function za(){let e=U(e=>e.compare);return U(e=>e.frameHeights),U(e=>e.doc),e?(0,$.jsx)($.Fragment,{children:e.doc.frames.filter(t=>e.mode===`side`||e.changes[t.frameName]!==`removed`).map(t=>(0,$.jsx)(Ba,{frame:t},`${e.name}:${t.frameName}`))}):null}var Ba=(0,B.memo)(function({frame:e}){let t=U(e=>e.appUrl),n=U(e=>e.compare),r=U(e=>e.canvasTheme),i=Ra(e),a=fr(e,r),o=(0,B.useMemo)(()=>`${t}/truecanvas/${encodeURIComponent(n.name)}?frame=${encodeURIComponent(e.frameName)}&theme=${a}&editor=${encodeURIComponent(location.origin)}`,[t,n.name,n.ref,e.frameName]);return(0,$.jsx)(`div`,{className:`frame-box compare${i.overlay?` overlay`:``}${n.changes[e.frameName]===`same`&&!i.overlay?` same`:``}`,style:{left:i.x,top:i.y,width:i.width,height:i.height,opacity:i.overlay?n.opacity:void 0},children:(0,$.jsx)(`iframe`,{ref:t=>ui(`cmp:${e.frameName}`,t),title:`${e.frameName} (${n.label})`,src:o,style:{pointerEvents:`none`}})})});function Va(){let e=U(e=>e.compare);if(!e)return null;let t=Object.values(e.changes).reduce((e,t)=>(e[t]=(e[t]??0)+1,e),{}),n=[t.changed&&`${t.changed} changed`,t.added&&`${t.added} new`,t.removed&&`${t.removed} removed`].filter(Boolean).join(` · `)||`No frame changes`;return(0,$.jsxs)(`div`,{className:`compare-bar`,role:`region`,"aria-label":`Compare`,children:[(0,$.jsx)(Xe,{size:14}),(0,$.jsxs)(`span`,{children:[`Comparing with `,(0,$.jsx)(`strong`,{children:e.label})]}),(0,$.jsx)(`span`,{className:`faint`,children:n}),(0,$.jsx)(`span`,{className:`sep`}),(0,$.jsx)(`div`,{style:{width:180},children:(0,$.jsx)(A,{value:e.mode,options:[{value:`side`,label:`Side by side`},{value:`overlay`,label:`Overlay`}],onChange:t=>U.setState({compare:{...e,mode:t}})})}),e.mode===`overlay`&&(0,$.jsx)(`div`,{style:{width:150},children:(0,$.jsx)(g,{value:Math.round(e.opacity*100),min:0,max:100,onCommit:t=>U.setState({compare:{...e,opacity:t/100}}),ariaLabel:`Overlay opacity`})}),(0,$.jsx)(`button`,{className:`icon-btn`,"aria-label":`Stop comparing`,onClick:()=>void _a(),children:(0,$.jsx)(d,{size:14})})]})}function Ha(e){let t=U.getState().compare?.changes[e];return t===`changed`?{text:`Changed`,tone:`changed`}:t===`added`?{text:`New`,tone:`added`}:null}function Ua({author:e,size:t=22}){let n=e.kind===`agent`;return(0,$.jsx)(`span`,{className:`c-avatar${n?` agent`:``}${e.kind===`client`?` client`:``}`,style:{width:t,height:t,background:n?sr(e.name):void 0,fontSize:t*.45},children:n?(0,$.jsx)(se,{size:t*.55}):e.name.slice(0,1).toUpperCase()})}var Wa=e=>e.kind===`agent`?or(e.name):e.name,Ga=({author:e})=>e.kind===`client`?(0,$.jsx)(`span`,{className:`c-client`,children:`Client`}):null;function Ka({camera:e,framePos:t}){let n=U(e=>e.threads),r=U(e=>e.doc),i=U(e=>e.openThread),a=U(e=>e.draftComment),o=U(e=>e.showResolved),s=U(e=>e.tool);if(!r)return null;let c=(n,i,a)=>{let o=r.frames.find(e=>e.frameName===n);if(!o)return null;let s=t(o);return{left:e.x+(s.x+i)*e.zoom,top:e.y+(s.y+a)*e.zoom}},l=n.filter(e=>!e.resolved||o||e.id===i);return(0,$.jsxs)($.Fragment,{children:[l.map(e=>{let t=c(e.frame,e.x,e.y);if(!t)return null;let n=e.messages[0];return(0,$.jsxs)(`div`,{className:`c-pin-wrap`,style:t,children:[(0,$.jsxs)(`button`,{className:`c-pin${e.id===i?` open`:``}${e.resolved?` resolved`:``}${s===`comment`?``:` quiet`}`,"aria-label":`Comment by ${Wa(n.author)}`,onPointerDown:e=>e.stopPropagation(),onClick:()=>U.setState({openThread:e.id===i?null:e.id,draftComment:null}),children:[(0,$.jsx)(Ua,{author:n.author,size:22}),e.messages.length>1&&(0,$.jsx)(`span`,{className:`c-count`,children:e.messages.length})]}),e.id===i&&(0,$.jsx)(Ya,{thread:e})]},e.id)}),a&&(()=>{let e=c(a.frame,a.x,a.y);return e?(0,$.jsxs)(`div`,{className:`c-pin-wrap`,style:e,children:[(0,$.jsx)(`span`,{className:`c-pin open draft`,children:(0,$.jsx)(Ot,{size:13})}),(0,$.jsx)(Ja,{})]}):null})()]})}function qa({placeholder:e,onSubmit:t,autoFocus:n=!0}){let[r,i]=(0,B.useState)(``),[a,o]=(0,B.useState)(!1),s=(0,B.useRef)(null);(0,B.useEffect)(()=>{n&&s.current?.focus()},[n]);let c=async()=>{if(r.trim()&&!a){o(!0);try{await t(r.trim()),i(``)}catch(e){U.getState().toast(e.message)}finally{o(!1)}}};return(0,$.jsxs)(`div`,{className:`c-composer`,children:[(0,$.jsx)(`textarea`,{ref:s,rows:Math.min(5,Math.max(1,r.split(`
+`).length)),value:r,placeholder:e,onChange:e=>i(e.target.value),onKeyDown:e=>{e.stopPropagation(),e.key===`Enter`&&!e.shiftKey&&(e.preventDefault(),c()),e.key===`Escape`&&U.setState({draftComment:null,openThread:null})}}),(0,$.jsx)(`button`,{className:`icon-btn sm send`,disabled:!r.trim()||a,"aria-label":`Send`,onClick:()=>void c(),children:(0,$.jsx)(Oe,{size:13})})]})}function Ja(){let e=U(e=>e.draftComment),t=U(e=>e.canvas);return(0,$.jsxs)(`div`,{className:`c-card`,onPointerDown:e=>e.stopPropagation(),children:[(0,$.jsx)(qa,{placeholder:e.node?`Comment on ${e.node.name}…`:`Add a comment…`,onSubmit:async n=>{let{thread:r}=await H.addComment({canvas:t,...e,text:n});U.setState({draftComment:null,openThread:r.id}),sa()}}),(0,$.jsx)(`div`,{className:`c-hint faint`,children:`Enter to post · your agent can read it with list_comments`})]})}function Ya({thread:e}){let t=U(e=>e.canvas),n=(0,B.useRef)(null);(0,B.useEffect)(()=>{n.current?.scrollTo({top:n.current.scrollHeight})},[e.messages.length]);let r=async e=>{try{await e(),sa()}catch(e){U.getState().toast(e.message)}};return(0,$.jsxs)(`div`,{className:`c-card`,onPointerDown:e=>e.stopPropagation(),onKeyDown:e=>e.stopPropagation(),children:[(0,$.jsxs)(`div`,{className:`c-card-head`,children:[(0,$.jsxs)(`span`,{className:`faint`,children:[e.frame,e.node?` · ${e.node.name}`:``]}),(0,$.jsxs)(`span`,{className:`actions`,children:[(0,$.jsx)(v,{label:e.resolved?`Reopen`:`Resolve`,children:(0,$.jsx)(`button`,{className:`icon-btn sm${e.resolved?``:` resolve`}`,"aria-label":e.resolved?`Reopen`:`Resolve`,onClick:()=>void r(()=>H.resolveComment(t,e.id,!e.resolved)),children:e.resolved?(0,$.jsx)(Ln,{size:13}):(0,$.jsx)(x,{size:14})})}),(0,$.jsx)(v,{label:`Delete thread`,children:(0,$.jsx)(`button`,{className:`icon-btn sm`,"aria-label":`Delete thread`,onClick:()=>void r(async()=>{await H.deleteComment(t,e.id),U.setState({openThread:null})}),children:(0,$.jsx)(Nn,{size:13})})})]})]}),(0,$.jsxs)(`div`,{className:`c-messages`,ref:n,children:[e.messages.map(e=>(0,$.jsxs)(`div`,{className:`c-msg`,children:[(0,$.jsx)(Ua,{author:e.author,size:20}),(0,$.jsxs)(`div`,{className:`c-body`,children:[(0,$.jsxs)(`div`,{className:`c-meta`,children:[(0,$.jsx)(`strong`,{children:Wa(e.author)}),` `,(0,$.jsx)(Ga,{author:e.author}),` `,(0,$.jsx)(`span`,{className:`faint`,children:w(e.at)})]}),(0,$.jsx)(`div`,{className:`c-text`,children:e.text})]})]},e.id)),e.resolved&&(0,$.jsxs)(`div`,{className:`c-resolved faint`,children:[(0,$.jsx)(he,{size:13}),` Resolved`,e.resolvedBy?` by ${Wa(e.resolvedBy)}`:``]})]}),e.share&&(0,$.jsx)(`div`,{className:`c-shared faint`,children:`On the share link: your reply goes to the client.`}),(0,$.jsx)(qa,{placeholder:e.share?`Reply to the client…`:`Reply…`,autoFocus:!1,onSubmit:n=>H.replyComment(t,e.id,n).then(sa)})]})}function Xa(){let e=U(e=>e.threads),t=U(e=>e.showResolved),n=U(e=>e.openThread),r=e.filter(e=>t||!e.resolved).sort((e,t)=>(t.messages.at(-1)?.at??0)-(e.messages.at(-1)?.at??0)),i=e.filter(e=>e.resolved).length,a=e=>{let t=U.getState().doc?.frames.find(t=>t.frameName===e.frame);U.setState({openThread:e.id,draftComment:null}),t&&Er({x:t.x+e.x-260,y:t.y+e.y-160,width:520,height:320},1.2)};return(0,$.jsxs)(`div`,{children:[(0,$.jsxs)(`div`,{className:`section`,style:{paddingBottom:10},children:[(0,$.jsx)(`div`,{className:`row`,style:{justifyContent:`space-between`},children:(0,$.jsxs)(`span`,{className:`muted`,children:[`Press `,(0,$.jsx)(`span`,{className:`kbd-chip`,children:`C`}),` and click a frame to comment.`]})}),(0,$.jsxs)(`label`,{className:`check-row`,style:{marginTop:8},children:[(0,$.jsx)(`input`,{type:`checkbox`,checked:t,onChange:e=>U.setState({showResolved:e.target.checked})}),`Show resolved (`,i,`)`]})]}),!r.length&&(0,$.jsxs)(`div`,{className:`empty`,children:[(0,$.jsx)(Ot,{size:20}),(0,$.jsx)(`br`,{}),`No `,t?``:`open `,`comments on this page.`,(0,$.jsx)(`br`,{}),`Comments are saved in the repo next to the page, so teammates and agents see them.`]}),(0,$.jsx)(`div`,{className:`c-list`,children:r.map(e=>{let t=e.messages[0],r=e.messages[e.messages.length-1];return(0,$.jsxs)(`button`,{className:`c-item${e.id===n?` on`:``}${e.resolved?` resolved`:``}`,onClick:()=>a(e),children:[(0,$.jsx)(Ua,{author:t.author,size:22}),(0,$.jsxs)(`div`,{className:`c-body`,children:[(0,$.jsxs)(`div`,{className:`c-meta`,children:[(0,$.jsx)(`strong`,{children:Wa(t.author)}),(0,$.jsx)(Ga,{author:t.author}),(0,$.jsxs)(`span`,{className:`faint`,children:[e.frame,` · `,w(r.at)]})]}),(0,$.jsx)(`div`,{className:`c-text clamp`,children:t.text}),e.messages.length>1&&(0,$.jsxs)(`div`,{className:`faint`,style:{fontSize:11,marginTop:2},children:[e.messages.length-1,` `,e.messages.length===2?`reply`:`replies`,r.author.kind===`agent`?` · last from ${Wa(r.author)}`:``]})]}),e.resolved&&(0,$.jsx)(he,{size:14,className:`faint`})]},e.id)})})]})}function Za(e,t,n,r){for(let i=e.length-1;i>=0;i--){let a=e[i],o=t(a),s=o.height??G(a);if(n>=o.x&&n<=o.x+o.width&&r>=o.y&&r<=o.y+s)return{frame:a,x:n-o.x,y:r-o.y}}return null}var Qa=(0,B.memo)(function({frame:e,x:t,y:n,width:r,height:i,mounted:a,interactive:o}){let s={x:t,y:n,width:r,height:i},c=U(e=>e.appUrl),l=U(e=>e.canvas),u=U(e=>e.canvasTheme),d=U(t=>t.frameHeights[e.frameName]),f=U(t=>t.frameReady[e.frameName]),p=U(t=>t.frameErrors[e.frameName]),m=U(e=>e.appStatus),h=fr(e,u),g=(0,B.useRef)(null),_=(0,B.useCallback)(t=>{g.current=t,ui(e.frameName,t)},[e.frameName]),v=a&&m!==`down`&&m!==`starting`;(0,B.useEffect)(()=>{if(v)return()=>di(e.frameName)},[v,e.frameName]);let y=(0,B.useRef)(h),b=(0,B.useMemo)(()=>`${c}/truecanvas/${encodeURIComponent(l??``)}?frame=${encodeURIComponent(e.frameName)}&theme=${y.current}&editor=${encodeURIComponent(location.origin)}`,[c,l,e.frameName]),x=U(e=>e.motionPaused),S=U(e=>e.deviceChrome),C=U(t=>t.playing===e.frameName),w=(0,B.useRef)(!1);(0,B.useEffect)(()=>{f&&w.current!==C&&(w.current=C,vi(e.frameName,{type:`tc:play`,on:C}))},[C,f,e.frameName]),(0,B.useEffect)(()=>{f&&vi(e.frameName,{type:`tc:theme`,theme:h})},[h,f,e.frameName]),(0,B.useEffect)(()=>{f&&vi(e.frameName,{type:`tc:motion`,paused:x})},[x,f,e.frameName]);let T=U(e=>e.hidden),E=U(e=>e.index),D=(0,B.useMemo)(()=>{let t=[];for(let[n,r]of E)r.frame.frameName===e.frameName&&n!==r.frame.id&&T.has(pr(r.node))&&t.push(n);return t.sort().join(`,`)},[T,E,e.frameName]);(0,B.useEffect)(()=>{f&&vi(e.frameName,{type:`tc:hidden`,ids:D?D.split(`,`).map($n):[]})},[D,f,e.frameName]);let O=Wn(e.device),k=S&&O&&O.kind!==`desktop`?O:null,A=s.height??(C?xr(e):d??360),[j,M]=(0,B.useState)(!1);(0,B.useEffect)(()=>{if(M(!1),!f)return;let e=setTimeout(()=>M(!0),2e3);return()=>clearTimeout(e)},[f]);let N=a&&f&&(e.height!==null||d!==void 0||!!p||j),P=h===`dark`||h===`system`&&window.matchMedia(`(prefers-color-scheme: dark)`).matches;return(0,$.jsxs)(`div`,{className:`frame-box${P?` dark`:``}${k?` device`:``}${C?` playing`:``}`,style:{left:s.x,top:s.y,width:s.width,height:A,borderRadius:k?k.radius:void 0},children:[v&&(0,$.jsx)(`iframe`,{ref:_,title:e.frameName,src:b,style:{pointerEvents:o||C?`auto`:`none`,opacity:+!!N,transition:`opacity 0.25s ease`},onLoad:()=>setTimeout(()=>void K(new Set([e.frameName])),50)}),k&&(0,$.jsx)($a,{device:k,dark:P}),(0,$.jsx)(`div`,{className:`placeholder${N?` gone`:``}`,"aria-hidden":!0,children:m===`starting`?`Starting the app…`:m===`down`?`Waiting for the app…`:``}),p&&(0,$.jsxs)(`div`,{className:`frame-error`,children:[(0,$.jsx)(`strong`,{children:`Render error · `}),p]})]})});function $a({device:e,dark:t}){let n=t?`#fff`:`#000`;return(0,$.jsxs)(`div`,{className:`device-chrome`,"aria-hidden":!0,children:[e.statusBar>0&&(0,$.jsxs)(`div`,{className:`status-bar`,style:{height:e.statusBar,color:n,padding:e.island?`0 32px 0 46px`:`0 20px`},children:[(0,$.jsx)(`span`,{className:`time`,children:`9:41`}),e.island&&(0,$.jsx)(`span`,{className:`island`}),(0,$.jsxs)(`span`,{className:`icons`,children:[(0,$.jsxs)(`svg`,{width:`18`,height:`11`,viewBox:`0 0 18 11`,fill:n,children:[(0,$.jsx)(`rect`,{x:`0`,y:`7`,width:`3`,height:`4`,rx:`1`}),(0,$.jsx)(`rect`,{x:`5`,y:`5`,width:`3`,height:`6`,rx:`1`}),(0,$.jsx)(`rect`,{x:`10`,y:`2.5`,width:`3`,height:`8.5`,rx:`1`}),(0,$.jsx)(`rect`,{x:`15`,y:`0`,width:`3`,height:`11`,rx:`1`})]}),(0,$.jsx)(`svg`,{width:`16`,height:`11`,viewBox:`0 0 16 11`,fill:n,children:(0,$.jsx)(`path`,{d:`M8 2.2c2.3 0 4.4.9 6 2.4l1.1-1.2A10.2 10.2 0 0 0 8 .5C5.3.5 2.8 1.5.9 3.4L2 4.6a8.6 8.6 0 0 1 6-2.4zm0 3.3c1.4 0 2.6.5 3.6 1.4l1.1-1.2A7 7 0 0 0 8 3.8a7 7 0 0 0-4.7 1.9l1.1 1.2c1-.9 2.2-1.4 3.6-1.4zm0 3.3c.5 0 1 .2 1.3.5L8 10.8 6.7 9.3c.3-.3.8-.5 1.3-.5z`})}),(0,$.jsxs)(`svg`,{width:`26`,height:`12`,viewBox:`0 0 26 12`,fill:`none`,children:[(0,$.jsx)(`rect`,{x:`.5`,y:`.5`,width:`22`,height:`11`,rx:`3.5`,stroke:n,strokeOpacity:`.4`}),(0,$.jsx)(`rect`,{x:`2`,y:`2`,width:`19`,height:`8`,rx:`2`,fill:n}),(0,$.jsx)(`path`,{d:`M24 4v4c.8-.3 1.3-1.1 1.3-2S24.8 4.3 24 4z`,fill:n,fillOpacity:`.5`})]})]})]}),e.homeIndicator>0&&(0,$.jsx)(`div`,{className:`home-indicator`,style:{height:e.homeIndicator},children:(0,$.jsx)(`span`,{style:{background:n,width:e.kind===`tablet`?300:134}})})]})}var eo=[{key:`text`,label:`Text`,group:`Text`,kbd:`T`,edit:!0,jsx:`<p className="text-base text-neutral-700">Text</p>`},{key:`h1`,label:`Heading 1`,group:`Text`,edit:!0,jsx:`<h1 className="text-5xl font-semibold tracking-tight">Heading</h1>`},{key:`h2`,label:`Heading 2`,group:`Text`,edit:!0,jsx:`<h2 className="text-3xl font-semibold tracking-tight">Heading</h2>`},{key:`h3`,label:`Heading 3`,group:`Text`,edit:!0,jsx:`<h3 className="text-xl font-semibold">Heading</h3>`},{key:`link`,label:`Link`,group:`Text`,edit:!0,jsx:`<a href="#" className="font-medium underline underline-offset-4">Link</a>`},{key:`button`,label:`Button`,group:`Text`,edit:!0,jsx:`<button className="rounded-lg bg-neutral-900 px-4 py-2 text-sm font-medium text-white">Button</button>`},{key:`list`,label:`List`,group:`Text`,jsx:`<ul className="list-disc space-y-1 pl-6">
+  <li>First item</li>
+  <li>Second item</li>
+</ul>`},{key:`stack`,label:`Stack`,group:`Layout`,jsx:`<div className="flex flex-col gap-4">
+  <p>Item</p>
+  <p>Item</p>
+</div>`},{key:`row`,label:`Row`,group:`Layout`,jsx:`<div className="flex items-center gap-4">
+  <p>Item</p>
+  <p>Item</p>
+</div>`},{key:`grid`,label:`Grid`,group:`Layout`,jsx:`<div className="grid grid-cols-3 gap-4">
+  <div className="rounded-lg bg-neutral-100 p-6">1</div>
+  <div className="rounded-lg bg-neutral-100 p-6">2</div>
+  <div className="rounded-lg bg-neutral-100 p-6">3</div>
+</div>`},{key:`box`,label:`Box`,group:`Layout`,jsx:`<div className="rounded-xl border border-neutral-200 p-6">
+  <p>Box</p>
+</div>`},{key:`section`,label:`Section`,group:`Layout`,jsx:`<section className="mx-auto max-w-5xl px-6 py-16">
+  <h2 className="text-3xl font-semibold tracking-tight">Section</h2>
+</section>`},{key:`divider`,label:`Divider`,group:`Layout`,jsx:`<hr className="border-neutral-200" />`},{key:`image`,label:`Image`,group:`Media & forms`,jsx:`<img src="https://placehold.co/800x500" alt="" className="h-auto w-full rounded-xl" />`},{key:`input`,label:`Input`,group:`Media & forms`,jsx:`<input placeholder="Type here" className="rounded-lg border border-neutral-300 px-3 py-2 text-sm" />`}];async function to(e){let t=U.getState(),n=Qr();if(!t.canvas||!n){t.toast(`Add a frame first: press F and drag on the canvas.`,`info`);return}let r=(await t.run({op:`insert_jsx`,canvas:t.canvas,parent:n.parent,index:n.index,jsx:e.jsx}))?.[0];if(r&&e.edit){for(let e=0;e<20;e++)if(await new Promise(e=>setTimeout(e,150)),await K(),U.getState().rects[r]){U.setState({editingText:r});return}}}async function no(e){let t=U.getState();try{let n=await H.command({op:`add_component_frame`,canvas:`components`,component:e});t.canvas===`components`&&t.setDoc(n.doc),ii(`components`,n.ids)}catch(e){t.toast(e.message)}}var ro=e=>e.split(/[^A-Za-z0-9]+/).filter(Boolean).map(e=>e[0].toUpperCase()+e.slice(1)).join(``),io=e=>e.replace(/([a-z0-9])([A-Z])/g,`$1-$2`).toLowerCase().replace(/[^a-z0-9]+/g,`-`).replace(/^-|-$/g,``);function ao(e){let t=U.getState(),n=e&&t.selection.length===1?t.index.get(t.selection[0]):null;if(e&&(!n||n.node.id===n.frame.id||n.node.kind===`text`||n.node.kind===`expression`)){t.toast(`Select one layer inside a frame (an element or a group) to turn it into a component.`,`info`);return}U.setState({componentDialog:{from:n?.node.id??null}})}function oo(){let e=U(e=>e.componentDialog),t=U(t=>e?.from?t.index.get(e.from):null),n=U(e=>e.componentsDir);return e?(0,$.jsx)(co,{from:e.from,suggestion:t?so(t.node):``,dir:n},e.from??`new`):null}function so(e){let t=W(e),n=/^[a-z]/.test(t)&&t.length<=8?``:ro(t);return/^[A-Z]/.test(n)?n:``}function co({from:e,suggestion:t,dir:n}){let[r,i]=(0,B.useState)(t),[a,o]=(0,B.useState)(!1),s=()=>U.setState({componentDialog:null}),c=ro(r),u=/^[A-Z][A-Za-z0-9]*$/.test(c),d=async()=>{if(!u||a)return;let t=U.getState();if(!t.canvas)return;o(!0);let n=e?null:Qr(),r=await t.run({op:`create_component`,canvas:t.canvas,name:c,...e?{from:e}:n?{parent:n.parent,index:n.index}:{}});o(!1),r&&(s(),t.toast(e?`${c} is a component now. Its instance replaced the layers.`:`Created ${c}.`,`info`,{label:`Edit main component`,run:()=>void no(c)}))};return(0,$.jsxs)(y,{title:e?`Create component`:`New component`,width:420,busy:a,onClose:s,children:[(0,$.jsx)(`p`,{className:`muted`,children:e?`The selected layers move into a new component file and are replaced by an instance of it. Their imports come along.`:`A new component file with a starter design. Edit it on the canvas, or ask your agent.`}),(0,$.jsxs)(`div`,{className:`field`,style:{marginBottom:6},children:[(0,$.jsx)(`span`,{className:`prefix`,children:(0,$.jsx)(z,{size:13})}),(0,$.jsx)(`input`,{autoFocus:!0,value:r,placeholder:`PricingCard`,onChange:e=>i(e.target.value),onKeyDown:e=>e.key===`Enter`&&void d(),"aria-label":`Component name`,spellCheck:!1})]}),(0,$.jsx)(`div`,{className:`faint git-note`,style:{marginBottom:14},children:u?(0,$.jsxs)($.Fragment,{children:[(0,$.jsxs)(`span`,{className:`mono`,children:[n,`/`,io(c),`.tsx`]}),` `,`exports `,(0,$.jsx)(`span`,{className:`mono`,children:c})]}):`Letters and digits, starting with a letter.`}),(0,$.jsxs)(`div`,{className:`modal-actions`,children:[(0,$.jsx)(`button`,{className:`btn outline`,disabled:a,onClick:s,children:`Cancel`}),(0,$.jsxs)(`button`,{className:`btn primary`,disabled:!u||a,onClick:()=>void d(),children:[a&&(0,$.jsx)(l,{size:13,className:`spin-working`}),` `,e?`Create component`:`Create`]})]})]})}function lo(e=`icons`){U.setState({libraryDialog:{tab:e}})}function uo(){let e=U(e=>e.libraryDialog);return e?(0,$.jsx)(fo,{initialTab:e.tab}):null}function fo({initialTab:e}){let[t,n]=(0,B.useState)(e),[r,i]=(0,B.useState)(null),[a,o]=(0,B.useState)(null),s=()=>U.setState({libraryDialog:null});return(0,B.useEffect)(()=>{let e=!1;return H.libraries().then(t=>!e&&i(t)).catch(e=>U.getState().toast(e.message)),()=>{e=!0}},[]),(0,$.jsxs)(y,{title:`Libraries`,width:620,busy:!!a,onClose:s,children:[(0,$.jsxs)(`div`,{className:`tabs lib-tabs`,role:`tablist`,children:[(0,$.jsx)(`button`,{role:`tab`,"aria-selected":t===`icons`,className:`tab ${t===`icons`?`on`:``}`,onClick:()=>n(`icons`),children:`Icons`}),(0,$.jsx)(`button`,{role:`tab`,"aria-selected":t===`shadcn`,className:`tab ${t===`shadcn`?`on`:``}`,onClick:()=>n(`shadcn`),children:`shadcn/ui`})]}),r?t===`icons`?(0,$.jsx)(po,{state:r,setState:i,busy:a,setBusy:o,onInserted:s}):(0,$.jsx)(_o,{state:r,setState:i,busy:a,setBusy:o}):(0,$.jsx)(`div`,{className:`lib-loading`,children:(0,$.jsx)(l,{size:16,className:`spin-working`})})]})}function po({state:e,setState:t,busy:n,setBusy:r,onInserted:i}){let a=e.icons.filter(e=>e.version),[s,c]=(0,B.useState)(a[0]?.id??null),[l,u]=(0,B.useState)(!a.length),d=async n=>{let i=e.icons.find(e=>e.id===n);r(`Installing ${i.package} with ${e.packageManager}…`);try{let e=await H.installIcons(n);if(t(e.state),!e.ok)return U.getState().toast(`Couldn't install ${i.package}. ${yo(e.out)}`);c(n),u(!1)}catch(e){U.getState().toast(e.message)}finally{r(null)}};return n?(0,$.jsx)(vo,{text:n}):l||!s?(0,$.jsxs)(`div`,{className:`lib-list`,children:[(0,$.jsxs)(`p`,{className:`muted`,children:[`Pick an icon set. It's added to your project with `,e.packageManager,`, then you can search and insert icons.`]}),e.icons.map(e=>(0,$.jsxs)(`div`,{className:`lib-row`,children:[(0,$.jsxs)(`div`,{className:`lib-row-text`,children:[(0,$.jsx)(`span`,{className:`lib-name`,children:e.label}),(0,$.jsx)(`span`,{className:`faint mono`,children:e.package})]}),(0,$.jsx)(`a`,{className:`icon-btn`,href:e.homepage,target:`_blank`,rel:`noreferrer`,"aria-label":`${e.label} website`,title:`Website`,children:(0,$.jsx)(Me,{size:13})}),e.version?(0,$.jsxs)(`button`,{className:`btn outline`,onClick:()=>{c(e.id),u(!1)},children:[(0,$.jsx)(x,{size:13}),` Use`]}):(0,$.jsxs)(`button`,{className:`btn outline`,onClick:()=>void d(e.id),children:[(0,$.jsx)(o,{size:13}),` Install`]})]},e.id))]}):(0,$.jsx)(mo,{library:s,libraries:a,onLibrary:c,onMore:()=>u(!0),onInserted:i})}function mo({library:e,libraries:t,onLibrary:n,onMore:r,onInserted:i}){let[a,o]=(0,B.useState)(``),[s,c]=(0,B.useState)(null),[l,u]=(0,B.useState)(null);(0,B.useEffect)(()=>{let t=!1,n=setTimeout(()=>H.icons(e,a).then(e=>!t&&(c(e),u(null))).catch(e=>!t&&u(e.message)),a?120:0);return()=>{t=!0,clearTimeout(n)}},[e,a]);let d=async t=>{let n=U.getState(),r=Qr();if(!n.canvas||!r)return n.toast(`Add a frame first: press F and drag on the canvas.`,`info`);await n.run({op:`insert_icon`,canvas:n.canvas,parent:r.parent,index:r.index,library:e,name:t})&&i()};return(0,$.jsxs)(`div`,{className:`icon-picker`,children:[(0,$.jsxs)(`div`,{className:`icon-picker-bar`,children:[(0,$.jsxs)(`div`,{className:`field search-field`,children:[(0,$.jsx)(`span`,{className:`prefix`,children:(0,$.jsx)(j,{size:13})}),(0,$.jsx)(`input`,{autoFocus:!0,value:a,onChange:e=>o(e.target.value),placeholder:`Search icons`,"aria-label":`Search icons`,spellCheck:!1})]}),(0,$.jsxs)(`select`,{className:`lib-select`,value:e,onChange:e=>e.target.value===`__more`?r():n(e.target.value),"aria-label":`Icon library`,children:[t.map(e=>(0,$.jsx)(`option`,{value:e.id,children:e.label},e.id)),(0,$.jsx)(`option`,{value:`__more`,children:`More libraries…`})]})]}),l?(0,$.jsx)(`div`,{className:`lib-empty`,children:l}):s?s.icons.length?(0,$.jsxs)($.Fragment,{children:[(0,$.jsx)(`div`,{className:`icon-grid`,children:s.icons.map(e=>(0,$.jsx)(`button`,{className:`icon-cell`,title:e.name,"aria-label":`Insert ${e.name}`,onClick:()=>void d(e.name),children:(0,$.jsx)(ho,{svg:e.svg})},e.name))}),(0,$.jsxs)(`div`,{className:`faint lib-foot`,children:[s.total>s.icons.length?`Showing ${s.icons.length} of ${s.total}. Search to narrow down.`:`${s.total} icons`,` · Inserted after the selection, with its import.`]})]}):(0,$.jsxs)(`div`,{className:`lib-empty`,children:[`No icons match “`,a,`”.`]}):(0,$.jsx)(vo,{text:`Loading icons…`})]})}function ho({svg:e}){let t=(0,B.useMemo)(()=>go(e),[e]);return(0,$.jsx)(`span`,{className:`icon-svg`,dangerouslySetInnerHTML:{__html:t}})}function go(e){let t=new DOMParser().parseFromString(e,`image/svg+xml`).documentElement;if(t.nodeName!==`svg`)return``;for(let e of[...t.querySelectorAll(`script, foreignObject, iframe, object, embed`)])e.remove();for(let e of[t,...t.querySelectorAll(`*`)])for(let t of[...e.attributes])(/^on/i.test(t.name)||/href$/i.test(t.name)&&/^\s*javascript:/i.test(t.value))&&e.removeAttribute(t.name);return new XMLSerializer().serializeToString(t)}function _o({state:e,setState:t,busy:n,setBusy:r}){let[i,a]=(0,B.useState)(null),[o,s]=(0,B.useState)(new Set),[c,l]=(0,B.useState)(``);(0,B.useEffect)(()=>{let e=!1;return H.shadcnRegistry().then(t=>!e&&a(t)).catch(e=>U.getState().toast(e.message)),()=>{e=!0}},[]);let u=new Set(e.shadcn.installed),d=(i?.names??[]).filter(e=>e.includes(c.trim().toLowerCase())),f=e=>{let t=new Set(o);t.has(e)?t.delete(e):t.add(e),s(t)},p=async()=>{let n=[...o];r(`${e.shadcn.initialized?`Adding`:`Setting up shadcn/ui and adding`} ${n.join(`, `)}…`);try{let e=await H.addShadcn(n);if(t(e.state),!e.ok)return U.getState().toast(`shadcn couldn't add them. ${yo(e.out)}`);s(new Set),U.getState().toast(e.added.length?`Added ${e.added.join(`, `)}. They're in Assets now.`:`Those components were already in your project.`,`info`)}catch(e){U.getState().toast(e.message)}finally{r(null)}};return n?(0,$.jsx)(vo,{text:n}):(0,$.jsxs)(`div`,{className:`shadcn-tab`,children:[(0,$.jsx)(`p`,{className:`muted`,children:e.shadcn.initialized?(0,$.jsxs)($.Fragment,{children:[`Components are copied into `,(0,$.jsx)(`span`,{className:`mono`,children:e.shadcn.uiDir}),` as code you own, then show up in Assets.`]}):(0,$.jsx)($.Fragment,{children:`The first add sets shadcn/ui up: components.json, lib/utils and theme variables in your global CSS. Components are copied into your project as code you own.`})}),(0,$.jsxs)(`div`,{className:`field search-field`,children:[(0,$.jsx)(`span`,{className:`prefix`,children:(0,$.jsx)(j,{size:13})}),(0,$.jsx)(`input`,{autoFocus:!0,value:c,onChange:e=>l(e.target.value),placeholder:`Search components`,"aria-label":`Search components`,spellCheck:!1})]}),i?(0,$.jsx)(`div`,{className:`shadcn-grid`,children:d.map(e=>{let t=u.has(e);return(0,$.jsxs)(`button`,{className:`shadcn-item ${o.has(e)?`on`:``}`,disabled:t,"aria-pressed":o.has(e),onClick:()=>f(e),children:[(0,$.jsx)(`span`,{className:`shadcn-check`,children:(t||o.has(e))&&(0,$.jsx)(x,{size:11})}),e,t&&(0,$.jsx)(`span`,{className:`faint`,children:`added`})]},e)})}):(0,$.jsx)(vo,{text:`Loading the registry…`}),(0,$.jsxs)(`div`,{className:`modal-actions lib-actions`,children:[i?.offline&&(0,$.jsx)(`span`,{className:`faint`,children:`Offline: showing the usual components.`}),(0,$.jsx)(`button`,{className:`btn primary`,disabled:!o.size,onClick:()=>void p(),children:o.size?`Add ${o.size} component${o.size===1?``:`s`}`:`Pick components`})]})]})}function vo({text:e}){return(0,$.jsxs)(`div`,{className:`lib-loading`,role:`status`,children:[(0,$.jsx)(l,{size:16,className:`spin-working`}),` `,(0,$.jsx)(`span`,{className:`muted`,children:e})]})}var yo=e=>e.trim().split(`
+`).filter(Boolean).slice(-2).join(` `),bo={text:(0,$.jsx)(Fn,{size:14}),h1:(0,$.jsx)(ot,{size:14}),h2:(0,$.jsx)(ct,{size:14}),h3:(0,$.jsx)(ut,{size:14}),link:(0,$.jsx)(bt,{size:14}),button:(0,$.jsx)(Qt,{size:14}),list:(0,$.jsx)(St,{size:14}),stack:(0,$.jsx)(ln,{size:14}),row:(0,$.jsx)(Ce,{size:14}),grid:(0,$.jsx)(i,{size:14}),box:(0,$.jsx)(_n,{size:14}),section:(0,$.jsx)(Bt,{size:14}),divider:(0,$.jsx)(At,{size:14}),image:(0,$.jsx)(ft,{size:14}),input:(0,$.jsx)(kn,{size:14})};function xo(){let e=[],t=``;for(let n of eo)t&&n.group!==t&&e.push(`sep`),t=n.group,e.push({label:n.label,icon:bo[n.key],kbd:n.kbd,onSelect:()=>void to(n)});return e.push(`sep`),e.push({label:`Icon…`,icon:(0,$.jsx)(Re,{size:14}),onSelect:()=>lo(`icons`)}),e.push({label:`Component…`,icon:(0,$.jsx)(z,{size:14}),onSelect:()=>U.setState({leftTab:`components`})}),e.push({label:`shadcn/ui component…`,icon:(0,$.jsx)(ae,{size:14}),onSelect:()=>lo(`shadcn`)}),e.push({label:`New component…`,icon:(0,$.jsx)(p,{size:14}),onSelect:()=>ao(!1)}),e}var So=[{tool:`select`,label:`Select`,kbd:`V`,icon:(0,$.jsx)(Rt,{size:16})},{tool:`frame`,label:`Frame`,kbd:`F`,icon:(0,$.jsx)(We,{size:16})},{tool:`hand`,label:`Hand`,kbd:`H`,icon:(0,$.jsx)(it,{size:16})},{tool:`interact`,label:`Interact with the app`,kbd:`P`,icon:(0,$.jsx)(Jt,{size:16})},{tool:`comment`,label:`Comment`,kbd:`C`,icon:(0,$.jsx)(Ot,{size:16})}],Co={system:`light`,light:`dark`,dark:`system`};function wo(){let e=U(e=>e.tool),t=U(e=>e.camera.zoom),n=U(e=>e.canvasTheme),r=U(e=>e.motionPaused),[i,a]=(0,B.useState)(null),[o,s]=(0,B.useState)(null),c=n===`system`?(0,$.jsx)(Pt,{size:16}):n===`light`?(0,$.jsx)(yn,{size:16}):(0,$.jsx)(It,{size:16});return(0,$.jsxs)(`div`,{className:`toolbar`,onPointerDown:e=>e.stopPropagation(),children:[So.map(t=>(0,$.jsx)(v,{label:t.label,kbd:t.kbd,children:(0,$.jsx)(`button`,{className:`icon-btn${e===t.tool?` on`:``}`,"aria-label":t.label,"aria-pressed":e===t.tool,onClick:()=>U.setState({tool:t.tool,hover:null,...t.tool===`comment`?{rightTab:`comments`}:{}}),children:t.icon})},t.tool)),(0,$.jsx)(v,{label:`Insert`,kbd:`T text`,children:(0,$.jsx)(`button`,{className:`icon-btn${o?` on`:``}`,"aria-label":`Insert`,onClick:e=>{let t=e.currentTarget.getBoundingClientRect();s({x:t.left-8,y:t.top-8})},children:(0,$.jsx)(p,{size:17})})}),o&&(0,$.jsx)(k,{x:o.x,y:o.y,anchor:`above`,items:xo(),onClose:()=>s(null)}),(0,$.jsx)(`span`,{className:`sep`}),(0,$.jsx)(v,{label:`Canvas theme: ${n}`,children:(0,$.jsx)(`button`,{className:`icon-btn`,"aria-label":`Canvas theme: ${n}`,onClick:()=>{let e=Co[n];U.setState({canvasTheme:e}),dr(`tc:canvasTheme`,e)},children:c})}),(0,$.jsx)(v,{label:r?`Play animations`:`Pause animations`,kbd:`⇧P`,children:(0,$.jsx)(`button`,{className:`icon-btn${r?` on`:``}`,"aria-label":r?`Play animations`:`Pause animations`,"aria-pressed":r,onClick:To,children:r?(0,$.jsx)(Kt,{size:15}):(0,$.jsx)(Ht,{size:15})})}),(0,$.jsx)(`span`,{className:`sep`}),(0,$.jsxs)(`button`,{className:`btn zoom`,onClick:e=>{let t=e.currentTarget.getBoundingClientRect();a({x:t.left-60,y:t.top-196})},children:[Math.round(t*100),`%`]}),i&&(0,$.jsx)(k,{x:i.x,y:i.y,onClose:()=>a(null),items:[{label:`Zoom in`,kbd:`⌘+`,onSelect:()=>zr(1.25)},{label:`Zoom out`,kbd:`⌘−`,onSelect:()=>zr(.8)},`sep`,{label:`Zoom to fit`,kbd:`⇧1`,onSelect:Lr},{label:`Zoom to selection`,kbd:`⇧2`,onSelect:Rr},{label:`Zoom to 100%`,kbd:`⇧0`,onSelect:()=>Br(1)}]})]})}function To(){let e=!U.getState().motionPaused;U.setState({motionPaused:e}),dr(`tc:motionPaused`,e)}var Eo=`modulepreload`,Do=function(e){return`/`+e},Oo={},ko=function(e){return e.pathname.endsWith(`.css`)},Ao=function(e,t,n){let r=Promise.resolve();if(t&&t.length>0){let e,i=document.querySelector(`meta[property=csp-nonce]`),a=i?.nonce||i?.getAttribute(`nonce`);function o(e){return Promise.all(e.map(e=>Promise.resolve(e).then(e=>({status:`fulfilled`,value:e}),e=>({status:`rejected`,reason:e}))))}function s(e){return import.meta.resolve?new URL(import.meta.resolve(e)):new URL(e,import.meta.url)}r=o(t.map(t=>{t=Do(t,n);let r=s(t);if(r.href in Oo)return;Oo[r.href]=!0;let i=ko(r);if(e===void 0){e={all:new Set,styles:new Set};let t=document.getElementsByTagName(`link`);for(let n=t.length-1;n>=0;n--){let r=t[n];e.all.add(r.href),r.rel===`stylesheet`&&e.styles.add(r.href)}}if((i?e.styles:e.all).has(r.href))return;let o=document.createElement(`link`);if(o.rel=i?`stylesheet`:Eo,i||(o.as=`script`),o.crossOrigin=``,o.href=r.href,a&&o.setAttribute(`nonce`,a),document.head.appendChild(o),i)return new Promise((e,t)=>{o.addEventListener(`load`,e),o.addEventListener(`error`,()=>t(Error(`Unable to preload CSS for ${r}`)))})}).filter(e=>e!==void 0))}function i(e){let t=new Event(`vite:preloadError`,{cancelable:!0});if(t.payload=e,window.dispatchEvent(t),!t.defaultPrevented)throw e}return r.then(t=>{for(let e of t||[])e.status===`rejected`&&i(e.reason);return e().catch(i)})},jo=[[`Select`,`V`],[`Frame`,`F`],[`Hand`,`H`],[`Interact`,`P`],[`Comment`,`C`],[`Insert text`,`T`],[`Create component`,`⌘⌥K`],[`Pause animations`,`⇧P`],[`Duplicate`,`⌘D`],[`Wrap in auto layout`,`⇧A`],[`Move up / down`,`↑ ↓`],[`Select parent / child`,`⇧↵ / ↵`],[`Copy as JSX`,`⌘C`],[`Zoom to fit`,`⇧1`],[`Zoom to selection`,`⇧2`],[`Actual size`,`⇧0`],[`Undo / Redo`,`⌘Z / ⇧⌘Z`]];function Mo(e){let t=U.getState(),n=e.meta||e.ctrl,r=e.key.length===1?e.key.toLowerCase():e.key;if(n){if(e.alt&&r===`k`)return ao(!0),!0;if(r===`z`&&!e.shift)return t.undo(),!0;if(r===`z`&&e.shift||r===`y`)return t.redo(),!0;if(r===`d`)return Hr(),!0;if(r===`c`&&!e.shift)return!window.getSelection()?.toString()&&(Jr(),!0);if(r===`=`||r===`+`)return zr(1.25),!0;if(r===`-`)return zr(.8),!0;if(r===`0`)return Br(1),!0;if(r===`a`){let e=t.doc?.frames.map(e=>e.id)??[];return t.select(e),!0}return!1}if(e.shift&&e.code===`Digit1`)return Lr(),!0;if(e.shift&&e.code===`Digit2`)return Rr(),!0;if(e.shift&&e.code===`Digit0`)return Br(1),!0;if(e.shift&&r===`a`)return Wr(),!0;if(e.shift&&r===`Enter`)return Kr(),!0;if(e.shift&&r===`p`)return To(),!0;switch(r){case`t`:return to(eo[0]),!0;case`v`:return t.set({tool:`select`}),!0;case`f`:return t.set({tool:`frame`}),!0;case`h`:return t.set({tool:`hand`}),!0;case`c`:return t.set({tool:t.tool===`comment`?`select`:`comment`,hover:null}),!0;case`p`:return t.set({tool:t.tool===`interact`?`select`:`interact`,hover:null}),!0;case`Escape`:if(t.editingText)return t.set({editingText:null}),!0;if(t.playing)return t.set({playing:null}),!0;if(t.draftComment||t.openThread)return t.set({draftComment:null,openThread:null}),!0;if(t.compare)return Ao(()=>Promise.resolve().then(()=>ha).then(e=>e.stopCompare()),void 0),!0;if(t.tool!==`select`)return t.set({tool:`select`}),!0;if(t.selection.length){let e=t.index.get(t.selection[0])?.parent;t.select(e?[e.id]:[])}return!0;case`Enter`:{let e=t.index.get(t.selection[0])?.node;return e&&t.selection.length===1&&e.children.every(e=>e.kind===`text`)&&e.children.length?(t.set({editingText:e.id}),!0):(qr(),!0)}case`Delete`:case`Backspace`:return Ur(),!0;case`ArrowUp`:case`ArrowLeft`:return Gr(-1),!0;case`ArrowDown`:case`ArrowRight`:return Gr(1),!0}return!1}function No(e){(0,B.useEffect)(()=>{let t=()=>{let e=document.activeElement;return!!e&&(e.isContentEditable||/^(INPUT|TEXTAREA|SELECT)$/.test(e.tagName))},n=()=>!!document.querySelector(`[aria-modal="true"], .modal-backdrop, .review-sheet`),r=()=>{let e=document.activeElement;return!e||e===document.body?!1:/^(BUTTON|A|SUMMARY)$/.test(e.tagName)||/^(button|switch|tab|menuitem|option|radio|checkbox|slider|treeitem)$/.test(e.getAttribute(`role`)??``)},i=new Set([`Enter`,` `,`ArrowUp`,`ArrowDown`,`ArrowLeft`,`ArrowRight`,`Delete`,`Backspace`]),a=a=>{if(!(t()||n())&&(a.metaKey||a.ctrlKey||a.altKey||!r()||!i.has(a.key)&&a.code!==`Space`)){if(a.code===`Space`&&!a.repeat){e(!0),a.preventDefault();return}Mo({key:a.key,code:a.code,meta:a.metaKey,ctrl:a.ctrlKey,shift:a.shiftKey,alt:a.altKey})&&a.preventDefault()}},o=t=>{t.code===`Space`&&e(!1)},s=()=>e(!1);return window.addEventListener(`keydown`,a),window.addEventListener(`keyup`,o),window.addEventListener(`blur`,s),pi(e=>!n()&&Mo(e)),()=>{window.removeEventListener(`blur`,s),window.removeEventListener(`keydown`,a),window.removeEventListener(`keyup`,o)}},[e])}var Po=12e3,Fo=2800;function Io(e,t){let n=U.getState(),r=n.doc;if(!r||e.canvas!==n.canvas)return null;for(let r of e.ids){let e=n.index.get(r);if(!e)continue;let i=t(e.frame);if(e.node.id===e.frame.id)return{x:i.x+28,y:i.y+22,frame:e.frame};let a=n.rects[r];for(let t=e.parent;a===void 0&&t&&t.id!==e.frame.id;t=n.index.get(t.id)?.parent??null)a=n.rects[t.id];return a?{x:i.x+a.x+Math.min(30,a.width*.3),y:i.y+a.y+Math.min(20,a.height*.6),frame:e.frame}:{x:i.x+28,y:i.y+22,frame:e.frame,pending:a===void 0}}let i=e.frame?r.frames.find(t=>t.frameName===e.frame||t.id===e.frame):null;if(i){let e=t(i);return{x:e.x+e.width*.5,y:e.y+Math.min(60,(e.height??G(i))*.3),frame:i}}return null}function Lo({camera:e,framePos:t}){let n=U(e=>e.presence);U(e=>e.rects),U(e=>e.index);let[,r]=(0,B.useState)(0);(0,B.useEffect)(()=>{let e=()=>Object.values(n).some(e=>Date.now()-e.at<Po);if(!e())return;let t=setInterval(()=>{r(e=>e+1),e()||clearInterval(t)},500);return()=>clearInterval(t)},[n]);let i=(0,B.useRef)(new Map),a=Date.now(),o=Object.values(n).filter(e=>a-e.at<Po);return(0,$.jsx)($.Fragment,{children:o.map(n=>{let r=Io(n,t);r&&i.current.set(n.session,r);let o=r??(n.canvas===U.getState().canvas?i.current.get(n.session)??null:null),s=o?.frame&&n.action===`editing`&&a-n.at<Fo;return(0,$.jsxs)(`div`,{children:[s&&o.frame&&(0,$.jsx)(Ro,{frame:o.frame,framePos:t,camera:e,color:sr(n.name)}),o&&(0,$.jsx)(zo,{presence:n,target:o,camera:e,fading:a-n.at>10500})]},n.session)})})}function Ro({frame:e,framePos:t,camera:n,color:r}){let i=t(e),a=i.height??G(e);return(0,$.jsx)(`div`,{className:`frame-glow`,style:{left:n.x+i.x*n.zoom,top:n.y+i.y*n.zoom,width:i.width*n.zoom,height:a*n.zoom,"--c":r}})}function zo({presence:e,target:t,camera:n,fading:r}){let i=sr(e.name),a=(0,B.useRef)(null),o=(0,B.useRef)(null),s=()=>{let e=o.current;e&&a.current&&(a.current.style.transform=`translate3d(${e.cam.x+e.x*e.cam.zoom}px, ${e.cam.y+e.y*e.cam.zoom}px, 0)`)},c=()=>{let e=o.current;if(!e||e.raf)return;e.last=performance.now();let t=n=>{let r=Math.min(.05,(n-e.last)/1e3);e.last=n;let i=-484*(e.x-e.tx)-44*e.vx,a=-484*(e.y-e.ty)-44*e.vy;e.vx+=i*r,e.vy+=a*r,e.x+=e.vx*r,e.y+=e.vy*r;let o=Math.hypot(e.x-e.tx,e.y-e.ty)<.25&&Math.hypot(e.vx,e.vy)<2;o&&(e.x=e.tx,e.y=e.ty,e.vx=e.vy=0),s(),e.raf=o?0:requestAnimationFrame(t)};e.raf=requestAnimationFrame(t)};(0,B.useEffect)(()=>{let e=o.current;if(!e){o.current={x:t.x-48,y:t.y-32,vx:0,vy:0,tx:t.x,ty:t.y,cam:n,raf:0,last:0},s(),c();return}let r=()=>{e.tx=t.x,e.ty=t.y,c()};if(!t.pending)return r();let i=setTimeout(r,350);return()=>clearTimeout(i)},[t.x,t.y,t.pending]),(0,B.useEffect)(()=>{o.current&&(o.current.cam=n,s())},[n]),(0,B.useEffect)(()=>()=>cancelAnimationFrame(o.current?.raf??0),[]);let l=e.action===`editing`&&Date.now()-e.at<Fo;return(0,$.jsxs)(`div`,{ref:a,className:`agent-cursor${r?` fading`:``}`,style:{"--c":i},"aria-hidden":!0,children:[(0,$.jsx)(`svg`,{width:`18`,height:`18`,viewBox:`0 0 18 18`,className:`arrow`,children:(0,$.jsx)(`path`,{d:`M2.2 1.6 15.1 8.3c.7.4.6 1.4-.2 1.6l-5.3 1.3-2.6 4.8c-.4.7-1.4.6-1.6-.2L1.1 2.7c-.2-.8.5-1.4 1.1-1.1Z`,fill:i,stroke:`#fff`,strokeWidth:`1.5`,strokeLinejoin:`round`})}),(0,$.jsxs)(`div`,{className:`agent-chip${l?` busy`:``}`,children:[(0,$.jsx)(`span`,{className:`who`,children:or(e.name)}),e.label&&(0,$.jsx)(`span`,{className:`what`,children:e.label},e.label)]})]})}var Bo=e=>e.split(` `).filter(Boolean).slice(0,2).map(e=>e[0].toUpperCase()).join(``)||`?`,Vo={};function Ho(e){let t=Math.max(0,Math.floor((Date.now()-e)/1e3)),n=Math.floor(t/60);return n>=60?`${Math.floor(n/60)}:${String(n%60).padStart(2,`0`)}:${String(t%60).padStart(2,`0`)}`:`${n}:${String(t%60).padStart(2,`0`)}`}function Uo(){let e=U(e=>e.canvas),t=U(e=>e.canvas?e.sessions[e.canvas]:void 0),n=U(e=>e.roomPeople),r=Object.values(n).filter(t=>t.canvas===e),[i,o]=(0,B.useState)(!1),[s,c]=(0,B.useState)(!1),[,u]=(0,B.useState)(0),d=(0,B.useRef)(null),f=!!t&&t.status!==`stopped`;if(e&&f&&!Vo[e]&&(Vo[e]=Date.now()),e&&!f&&delete Vo[e],(0,B.useEffect)(()=>{if(!f)return;let e=setInterval(()=>u(e=>e+1),1e3);return()=>clearInterval(e)},[f]),!e)return null;let p=async()=>{o(!0);try{let{session:t}=await H.startSession(e);U.setState(n=>({sessions:{...n.sessions,[e]:t}})),c(!1),U.getState().toast(`You're live: people with access to the link follow this canvas as you edit it.`,`info`)}catch(e){U.getState().toast(e.message)}finally{o(!1)}},m=async()=>{o(!0);try{await H.stopSession(e),c(!1)}catch(e){U.getState().toast(e.message)}finally{o(!1)}},h=f&&t.status!==`live`;return(0,$.jsxs)(`div`,{className:`session`,children:[f&&r.length>0&&(0,$.jsxs)(`div`,{className:`session-faces`,"aria-label":`${r.map(e=>e.name).join(`, `)} here`,children:[r.slice(0,3).map(e=>(0,$.jsx)(`span`,{className:`session-face`,style:{background:e.color},title:e.name,children:Bo(e.name)},e.id)),r.length>3&&(0,$.jsxs)(`span`,{className:`session-face more`,children:[`+`,r.length-3]})]}),(0,$.jsxs)(`button`,{ref:d,className:`btn session-btn${f?` on`:``}${h?` waiting`:``}`,onClick:()=>c(e=>!e),"aria-expanded":s,"aria-haspopup":`dialog`,title:f?`Live session`:`Start a live session`,children:[f?(0,$.jsx)(`span`,{className:`session-dot`,"aria-hidden":!0}):(0,$.jsx)(Xt,{size:13,"aria-hidden":!0}),f&&h?`Connecting`:`Live`,f&&!h&&(0,$.jsx)(`span`,{className:`session-time`,children:Ho(Vo[e])})]}),s&&d.current&&(0,$.jsx)(Wo,{anchor:d.current,onClose:()=>c(!1),children:f?(0,$.jsxs)($.Fragment,{children:[(0,$.jsxs)(`div`,{className:`session-pop-title live`,children:[(0,$.jsx)(`span`,{className:`session-dot`,"aria-hidden":!0}),` `,h?`Connecting…`:`Live`,!h&&(0,$.jsx)(`span`,{className:`session-time`,children:Ho(Vo[e])})]}),(0,$.jsxs)(`div`,{className:`session-pop-link`,children:[(0,$.jsx)(`span`,{className:`mono`,title:t.url,children:t.url.replace(/^https?:\/\//,``)}),(0,$.jsxs)(`button`,{className:`btn small`,onClick:()=>{navigator.clipboard.writeText(t.url),U.getState().toast(`Link copied`,`info`)},children:[(0,$.jsx)(a,{size:12}),` Copy`]})]}),(0,$.jsx)(`div`,{className:`session-pop-people`,children:r.length?r.map(e=>(0,$.jsxs)(`div`,{className:`session-pop-person`,children:[(0,$.jsx)(`span`,{className:`session-face`,style:{background:e.color},children:Bo(e.name)}),e.name]},e.id)):(0,$.jsx)(`span`,{className:`muted`,children:`Nobody else here yet. Send them the link.`})}),(0,$.jsx)(`div`,{className:`session-pop-actions`,children:(0,$.jsx)(`button`,{className:`btn danger`,onClick:()=>void m(),disabled:i,children:`End session`})})]}):(0,$.jsxs)($.Fragment,{children:[(0,$.jsxs)(`div`,{className:`session-pop-title`,children:[(0,$.jsx)(Xt,{size:14,"aria-hidden":!0}),` Start a live session`]}),(0,$.jsxs)(`p`,{className:`session-pop-text`,children:[`The people who can open `,(0,$.jsx)(`b`,{children:e}),`’s share link see your real components update as you edit, with your cursor and theirs. Their comments arrive instantly.`]}),(0,$.jsxs)(`ul`,{className:`session-pop-points`,children:[(0,$.jsx)(`li`,{children:`Only people with access to the link: the ones you invited, and your studio.`}),(0,$.jsx)(`li`,{children:`No link yet? It’s created when you start, for invited people only.`}),(0,$.jsx)(`li`,{children:`It runs until you end it or close Truecanvas. Otherwise they see the last published version.`})]}),(0,$.jsxs)(`div`,{className:`session-pop-actions`,children:[(0,$.jsx)(`button`,{className:`btn`,onClick:()=>c(!1),children:`Cancel`}),(0,$.jsxs)(`button`,{className:`btn primary`,onClick:()=>void p(),disabled:i,children:[i?(0,$.jsx)(l,{size:13,className:`spin-working`}):null,`Start`]})]})]})})]})}function Wo({anchor:e,onClose:t,children:n}){let r=(0,B.useRef)(null),i=e.getBoundingClientRect();return(0,B.useEffect)(()=>{let n=n=>{let i=n.target;!r.current?.contains(i)&&!e.contains(i)&&t()},i=e=>{e.key===`Escape`&&(e.stopPropagation(),t())};return window.addEventListener(`pointerdown`,n,!0),window.addEventListener(`keydown`,i,!0),()=>{window.removeEventListener(`pointerdown`,n,!0),window.removeEventListener(`keydown`,i,!0)}},[e,t]),(0,ea.createPortal)((0,$.jsx)(`div`,{ref:r,role:`dialog`,"aria-label":`Live session`,className:`session-pop`,style:{left:Math.max(8,i.right-300),top:i.bottom+6},onKeyDown:e=>e.stopPropagation(),children:n}),document.body)}function Go({camera:e}){let t=U(e=>e.canvas),n=U(e=>e.roomPeople),r=Object.values(n).filter(e=>e.canvas===t&&e.x!==null&&e.y!==null);return(0,$.jsx)($.Fragment,{children:r.map(t=>(0,$.jsxs)(`div`,{className:`agent-cursor room-cursor`,style:{"--c":t.color,transform:`translate3d(${e.x+t.x*e.zoom}px, ${e.y+t.y*e.zoom}px, 0)`},"aria-hidden":!0,children:[(0,$.jsx)(`svg`,{width:`18`,height:`18`,viewBox:`0 0 18 18`,className:`arrow`,children:(0,$.jsx)(`path`,{d:`M2.2 1.6 15.1 8.3c.7.4.6 1.4-.2 1.6l-5.3 1.3-2.6 4.8c-.4.7-1.4.6-1.6-.2L1.1 2.7c-.2-.8.5-1.4 1.1-1.1Z`,fill:t.color,stroke:`#fff`,strokeWidth:`1.5`,strokeLinejoin:`round`})}),(0,$.jsx)(`div`,{className:`agent-chip`,children:(0,$.jsx)(`span`,{className:`who`,children:t.name})})]},t.id))})}var Ko=null,qo=0,Jo=0;function Yo(e,t){let n=U.getState(),r=n.canvas;r&&n.sessions[r]?.status===`live`&&(Ko={canvas:r,x:e,y:t},!qo&&(qo=window.setTimeout(()=>{qo=0,Jo=Date.now();let e=Ko;Ko=null,e&&H.sessionCursor(e.canvas,e.x,e.y).catch(()=>{})},Math.max(0,50-(Date.now()-Jo)))))}var Xo=e=>e.split(`/`).pop()??e;function Zo(e){if(e.kind===`text`)return{kind:`text`,value:e.text??``};if(e.kind!==`component`&&e.kind!==`element`)return null;if(e.children.length&&e.children.every(e=>e.kind===`text`))return{kind:`text`,value:e.children.map(e=>e.text).join(` `)};for(let t of[`title`,`label`,`text`,`name`,`placeholder`]){let n=e.props[t];if(n?.kind===`string`)return{kind:`prop`,prop:t,value:n.value}}return null}function Qo({framePos:e,drag:t,drop:n,onResizeStart:r,onLabelDown:i}){let a=U(e=>e.doc),o=U(e=>e.camera),s=U(e=>e.selection),c=U(e=>e.hover),l=U(e=>e.rects),u=U(e=>e.index),d=U(e=>e.tool),f=U(e=>e.review),p=U(e=>e.flashes),m=U(e=>e.editingText),h=U(e=>e.compare);U(e=>e.frameHeights);let g=o.zoom,_=(t,n)=>{let r=e(t);return{left:o.x+(r.x+n.x)*g,top:o.y+(r.y+n.y)*g,width:n.width*g,height:n.height*g}},v=t=>{let n=e(t),r=n.height??G(t);return{left:o.x+n.x*g,top:o.y+n.y*g,width:n.width*g,height:r*g}};if(!a)return null;let y=d!==`interact`,b=new Set(f.find(e=>e.canvas===a.name)?.frames.filter(e=>e.status!==`removed`).map(e=>e.name)??[]),x=c?u.get(c):null;return(0,$.jsxs)(`div`,{className:`overlay`,children:[a.frames.map(e=>{let t=v(e),n=s.includes(e.id);return(0,$.jsxs)(`div`,{className:`frame-label${n?` selected`:``}`,style:{left:t.left,top:t.top-20,maxWidth:Math.max(40,t.width)},title:e.device?`${e.frameName} · ${Wn(e.device)?.name??e.device}`:e.frameName,onPointerDown:t=>i(e,t),children:[(0,$.jsx)(`span`,{style:{overflow:`hidden`,textOverflow:`ellipsis`,minWidth:24},children:e.frameName}),e.theme&&(0,$.jsx)(`span`,{className:`theme-tag`,children:e.theme===`dark`?(0,$.jsx)(It,{size:11}):(0,$.jsx)(yn,{size:11})}),e.device&&t.width>=70+e.frameName.length*7&&(0,$.jsx)(`span`,{className:`theme-tag`,children:Wn(e.device)?.name}),b.has(e.frameName)&&(0,$.jsx)(`span`,{className:`change-dot`,title:`Changed since the last commit`}),(0,$.jsx)(ts,{frame:e,compact:t.width<220}),(0,$.jsx)(es,{frame:e,compact:t.width<260}),(()=>{let t=Ha(e.frameName);return t&&(0,$.jsx)(`span`,{className:`change-badge ${t.tone}`,children:t.text})})()]},e.id)}),h&&h.doc.frames.filter(()=>h.mode===`side`).map(e=>{let t=Ra(e);return(0,$.jsxs)(`div`,{className:`frame-label compare-label`,style:{left:o.x+t.x*g,top:o.y+t.y*g-20,maxWidth:Math.max(40,t.width*g)},children:[(0,$.jsx)(`span`,{style:{overflow:`hidden`,textOverflow:`ellipsis`},children:e.frameName}),(0,$.jsx)(`span`,{className:`change-badge ${h.changes[e.frameName]===`removed`?`removed`:`before`}`,children:h.changes[e.frameName]===`removed`?`Removed · ${h.label}`:h.changes[e.frameName]===`same`?`${h.label} · same`:h.label})]},`cmp-${e.frameName}`)}),y&&x&&!s.includes(x.node.id)&&(()=>{if(x.node.id===x.frame.id){let e=v(x.frame);return(0,$.jsx)(`div`,{className:`box hover`,style:e})}let e=l[x.node.id];return e?(0,$.jsx)(`div`,{className:`box hover`,style:_(x.frame,e)}):null})(),y&&s.map(t=>{let n=u.get(t);if(!n)return null;if(n.node.id===n.frame.id){let r=v(n.frame),i=e(n.frame);return(0,$.jsx)(`div`,{className:`box frame-select`,style:r,children:s.length===1&&(0,$.jsxs)($.Fragment,{children:[(0,$.jsx)(`div`,{className:`edge`,style:{right:-4,top:0,bottom:0,width:8,cursor:`ew-resize`},onPointerDown:e=>S(e,n.frame,`e`)}),(0,$.jsx)(`div`,{className:`edge`,style:{left:-4,top:0,bottom:0,width:8,cursor:`ew-resize`},onPointerDown:e=>S(e,n.frame,`w`)}),(0,$.jsx)(`div`,{className:`edge`,style:{bottom:-4,left:0,right:0,height:8,cursor:`ns-resize`},onPointerDown:e=>S(e,n.frame,`s`)}),(0,$.jsx)(`div`,{className:`handle`,style:{right:-5,bottom:-5,cursor:`nwse-resize`},onPointerDown:e=>S(e,n.frame,`se`)}),(0,$.jsx)(`div`,{className:`handle`,style:{right:-5,top:-5}}),(0,$.jsx)(`div`,{className:`handle`,style:{left:-5,bottom:-5}}),(0,$.jsx)(`div`,{className:`handle`,style:{left:-5,top:-5}}),(0,$.jsxs)(`div`,{className:`size-badge`,style:{left:`50%`,top:r.height+8},children:[Math.round(i.width),` × `,Math.round(i.height??G(n.frame)),i.height===null?` Hug`:``]})]})},t)}let r=l[t];if(!r)return null;let i=_(n.frame,r),a=n.node.kind===`component`;return(0,$.jsx)(`div`,{className:`box select${a?` component`:``}`,style:i,children:s.length===1&&m!==t&&(0,$.jsxs)($.Fragment,{children:[(0,$.jsx)(`div`,{className:`name-tag${a?` component`:``}`,style:{left:-.75,top:-1},children:W(n.node)}),(0,$.jsxs)(`div`,{className:`size-badge${a?` component`:``}`,style:{left:`50%`,top:i.height+6},children:[Math.round(r.width),` × `,Math.round(r.height)]})]})},t)}),p.map(e=>{let t=u.get(e.id),n=t&&(t.node.id===t.frame.id?{x:0,y:0,width:t.frame.width,height:G(t.frame)}:l[e.id]);if(!t||!n)return null;let r=_(t.frame,n);return(0,$.jsx)(`div`,{className:`box flash`,style:{...r,"--c":e.color}},e.key)}),n&&(()=>{let e=a.frames.find(e=>e.frameName===n.frame);return e?(0,$.jsx)(`div`,{className:`drop-target`,style:_(e,n.rect)}):null})(),t?.kind===`node-drag`&&t.target&&(0,$.jsx)(`div`,{className:`drop-line`,style:_(t.frame,t.target.line)}),(t?.kind===`draw`||t?.kind===`marquee`)&&(0,$.jsx)(`div`,{className:`marquee`,style:{left:o.x+Math.min(t.startX,t.x)*g,top:o.y+Math.min(t.startY,t.y)*g,width:Math.abs(t.x-t.startX)*g,height:Math.abs(t.y-t.startY)*g}}),m&&(0,$.jsx)($o,{id:m,toScreen:_}),(0,$.jsx)(Ka,{camera:o,framePos:e}),(0,$.jsx)(Lo,{camera:o,framePos:e}),(0,$.jsx)(Go,{camera:o})]});function S(e,t,n){e.stopPropagation(),e.target.setPointerCapture(e.pointerId),r(t,n,e)}}function $o({id:e,toScreen:t}){let n=U(t=>t.index.get(e)),r=U(t=>t.rects[e]),i=n?Zo(n.node):null,[a,o]=(0,B.useState)(i?.value??``),s=(0,B.useRef)(null);if((0,B.useEffect)(()=>{s.current?.focus(),s.current?.select()},[]),!n||!r||!i)return null;let c=t(n.frame,r),l=()=>U.setState({editingText:null}),u=async()=>{if(l(),a===i.value)return;let t=U.getState();i.kind===`text`?await t.run({op:`set_text`,canvas:t.canvas,id:e,text:a}):await t.run({op:`set_props`,canvas:t.canvas,id:e,props:{[i.prop]:a}})};return(0,$.jsx)(`div`,{className:`inline-edit`,style:{left:c.left-4,top:c.top-4,width:Math.max(220,c.width+8)},onPointerDown:e=>e.stopPropagation(),children:(0,$.jsx)(`textarea`,{ref:s,value:a,rows:Math.min(5,Math.max(1,Math.ceil(a.length/40))),onChange:e=>o(e.target.value),onBlur:u,onKeyDown:e=>{e.stopPropagation(),e.key===`Enter`&&!e.shiftKey&&(e.preventDefault(),u()),e.key===`Escape`&&l()}})})}function es({frame:e,compact:t}){let n=U(t=>t.playing===e.frameName),r=e=>e.stopPropagation();return n?(0,$.jsxs)(`span`,{className:`play-controls`,onPointerDown:r,children:[(0,$.jsxs)(`span`,{className:`playing-tag`,children:[(0,$.jsx)(`span`,{className:`live-dot`}),t?``:`Playing · scroll inside`]}),(0,$.jsx)(`button`,{className:`label-btn`,title:`Replay entrance animations`,"aria-label":`Replay`,onClick:()=>Cr(e.frameName),children:(0,$.jsx)(sn,{size:10})}),(0,$.jsx)(`button`,{className:`label-btn`,title:`Stop (Esc)`,"aria-label":`Stop playing`,onClick:()=>Sr(null),children:(0,$.jsx)(_n,{size:9,fill:`currentColor`})})]}):(0,$.jsx)(`button`,{className:`label-btn play-btn`,title:`Play: scroll inside the frame to run scroll animations`,"aria-label":`Play ${e.frameName}`,onPointerDown:r,onClick:()=>Sr(e.frameName),children:(0,$.jsx)(Kt,{size:10})})}function ts({frame:e,compact:t}){if(e.link?.kind===`component`)return(0,$.jsxs)(`span`,{className:`link-tag component${e.link.editable?``:` view`}`,title:e.link.editable?`Main component ${e.link.route} in ${e.link.page}. Edits change every instance.`:e.link.reason??``,children:[(0,$.jsx)(z,{size:10}),!t&&`Main component · ${Xo(e.link.page)}`]});if(e.link){let n=e.link.editable?`Linked to ${e.link.files.join(` and `)}. Editing its layers edits the code.`:`View only: ${e.link.reason??``}`;return(0,$.jsxs)(`span`,{className:`link-tag${e.link.editable?``:` view`}${t?` compact`:``}`,title:n,children:[e.link.editable?(0,$.jsx)(`span`,{className:`live-dot`}):(0,$.jsx)(Ie,{size:10}),!t&&`${e.link.editable?`Live`:`View only`} · ${Xo(e.link.page)}`]})}return e.from?(0,$.jsxs)(`span`,{className:`link-tag draft${t?` compact`:``}`,title:`Copy of ${e.from}. Right-click → Apply to page to write it back.`,children:[(0,$.jsx)(He,{size:10}),!t&&`Exploration`]}):null}function ns({x:e,y:t,onClose:n,extra:r=[]}){let i=U.getState(),o=i.selection.length===1?i.index.get(i.selection[0]):null,s=o&&o.node.id===o.frame.id,c=o?.frame,l=[...c?.link?[{label:`Explore a copy`,icon:(0,$.jsx)(He,{size:14}),onSelect:()=>void Xr(c.id)},{label:`Open ${Xo(c.link.page)}`,icon:(0,$.jsx)(Be,{size:14}),onSelect:()=>void H.openFile(c.link.page).catch(e=>i.toast(e.message))},`sep`]:[],...c?[{label:`Play ${c.frameName}`,icon:(0,$.jsx)(Kt,{size:14}),onSelect:()=>Sr(c.frameName)},{label:`Replay animations`,icon:(0,$.jsx)(sn,{size:14}),onSelect:()=>Cr(c.frameName)},`sep`]:[],...c?.from&&s?[{label:`Apply to ${Xo(c.from)}`,icon:(0,$.jsx)(R,{size:14}),onSelect:()=>void Zr(c.id)},`sep`]:[],{label:`Duplicate`,icon:(0,$.jsx)(Ee,{size:14}),kbd:vr.dup,onSelect:Hr},...s?[]:[{label:`Wrap in auto layout`,icon:(0,$.jsx)(gt,{size:14}),kbd:`⇧A`,onSelect:Wr}],...o?.parent?[{label:`Select parent`,icon:(0,$.jsx)(Ae,{size:14}),kbd:`⇧Enter`,onSelect:Kr}]:[],`sep`,{label:`Copy as JSX`,icon:(0,$.jsx)(a,{size:14}),kbd:vr.copy,onSelect:()=>void Jr()},{label:`Show this layer in code`,icon:(0,$.jsx)(Me,{size:14}),onSelect:()=>Yr(o?.node.id)},...o&&o.node.kind===`component`&&i.components.some(e=>e.name===o.node.name&&!e.library)?[{label:`Edit ${o.node.name} (main component)`,icon:(0,$.jsx)(z,{size:14}),onSelect:()=>void no(o.node.name)},{label:`Open ${o.node.name} in code editor`,icon:(0,$.jsx)(xe,{size:14}),onSelect:()=>rs(o.node.name)}]:[],...o&&!s&&(o.node.kind===`element`||o.node.kind===`component`||o.node.kind===`fragment`)?[{label:`Create component`,icon:(0,$.jsx)(z,{size:14}),kbd:`${vr.mod}⌥K`,onSelect:()=>ao(!0)}]:[],`sep`,{label:`Delete`,icon:(0,$.jsx)(Nn,{size:14}),kbd:`Del`,danger:!0,onSelect:Ur}];return(0,$.jsx)(k,{x:e,y:t,items:r.length?[...r,`sep`,...l]:l,onClose:n})}function rs(e){let t=U.getState(),n=t.components.find(t=>t.name===e);n&&H.openFile(n.file).catch(e=>t.toast(e.message))}function is(){let e=U(e=>e.doc),t=U(e=>e.camera),n=U(e=>e.tool),r=(0,B.useRef)(null),[i,a]=(0,B.useState)({width:0,height:0}),[o,s]=(0,B.useState)(null),c=(0,B.useRef)(null),[l,u]=(0,B.useState)({}),d=(0,B.useRef)(l),f=e=>u(t=>{let n=e(t);return d.current=n,n}),p=(0,B.useRef)(!1),[m,h]=(0,B.useState)(!1),[g,_]=(0,B.useState)(null),[v,y]=(0,B.useState)(null),b=(0,B.useRef)(0),[x,S]=(0,B.useState)(!1),C=(0,B.useRef)(0);(0,B.useEffect)(()=>{S(!0),clearTimeout(C.current),C.current=window.setTimeout(()=>S(!1),160)},[t]);let w=(0,B.useRef)({x:0,y:0});(0,B.useEffect)(()=>Ci(),[]),(0,B.useEffect)(()=>{let e=r.current,t=new ResizeObserver(()=>{let t=e.getBoundingClientRect();a({width:t.width,height:t.height}),br(t.width,t.height)});return t.observe(e),()=>t.disconnect()},[]);let T=(0,B.useCallback)((e,t)=>{let n=r.current.getBoundingClientRect(),i=U.getState().camera;return{x:(e-n.left-i.x)/i.zoom,y:(t-n.top-i.y)/i.zoom,sx:e-n.left,sy:t-n.top}},[]),E=(0,B.useCallback)(e=>l[e.frameName]??{x:e.x,y:e.y,width:e.width,height:e.height},[l]),D=(0,B.useCallback)((e,t)=>{let n=U.getState().doc?.frames??[];for(let r=n.length-1;r>=0;r--){let i=n[r],a=E(i),o=a.height??G(i);if(e>=a.x&&e<=a.x+a.width&&t>=a.y&&t<=a.y+o)return i}return null},[E]),O=(0,B.useRef)(0),k=(0,B.useRef)(null);(0,B.useEffect)(()=>()=>cancelAnimationFrame(O.current),[]);let A=(0,B.useCallback)(async(e,t)=>{let{x:n,y:r}=T(e,t),i=D(n,r),a=++b.current;if(!i)return U.getState().hover!==null&&U.setState({hover:null}),null;let o=E(i),s=await bi(i.frameName,n-o.x,r-o.y);if(a!==b.current)return null;let c=U.getState(),l=(s?.chain??[]).filter(e=>c.index.has(e)).find(e=>!hr(e))??i.id,u=s?Object.entries(s.rects).filter(([e,t])=>!as(c.rects[e],t)):[];return u.length?U.setState({hover:l,rects:{...c.rects,...Object.fromEntries(u)}}):c.hover!==l&&U.setState({hover:l}),{id:l,frame:i,chain:(s?.chain??[]).filter(e=>c.index.has(e))}},[D,E,T]),j=(0,B.useCallback)(e=>{Fr();let t=r.current.getBoundingClientRect(),n=e.mode===1?16:1;if(e.ctrl){let r=Math.max(-30,Math.min(30,e.dy*n));zr(Math.exp(-r*.0085),{x:e.clientX-t.left,y:e.clientY-t.top})}else{let t=U.getState().camera;Tr({...t,x:t.x-e.dx*n,y:t.y-e.dy*n})}},[]);(0,B.useEffect)(()=>{let e=r.current,t=e=>{e.preventDefault(),j({dx:e.shiftKey&&!e.deltaX?e.deltaY:e.deltaX,dy:e.shiftKey&&!e.deltaX?0:e.deltaY,ctrl:e.ctrlKey||e.metaKey,clientX:e.clientX,clientY:e.clientY,mode:e.deltaMode})};return e.addEventListener(`wheel`,t,{passive:!1}),fi(j),()=>e.removeEventListener(`wheel`,t)},[j]),No(h);let M=e=>{c.current=e,s(e)},N=async e=>{if(g)return;Fr(),p.current=!0,r.current.focus({preventScroll:!0}),e.target.setPointerCapture?.(e.pointerId);let t=U.getState(),n=t.camera;if(e.button===1||m||t.tool===`hand`)return M({kind:`pan`,startX:e.clientX,startY:e.clientY,camX:n.x,camY:n.y});if(e.button!==0)return;let{x:i,y:a}=T(e.clientX,e.clientY);if(t.tool===`frame`)return M({kind:`draw`,startX:i,startY:a,x:i,y:a});if(t.tool===`comment`){let n=Za(t.doc?.frames??[],E,i,a);if(!n)return U.setState({draftComment:null,openThread:null});let r=await A(e.clientX,e.clientY),o=r&&r.id!==n.frame.id?U.getState().index.get(r.id):null;U.setState({draftComment:{frame:n.frame.frameName,x:n.x,y:n.y,node:o?{path:o.node.path.join(`.`),name:W(o.node)}:null},openThread:null});return}if(t.tool===`interact`)return;let o=D(i,a);if(!o)return e.shiftKey||t.select([]),M({kind:`marquee`,startX:i,startY:a,x:i,y:a,additive:e.shiftKey});let s=await A(e.clientX,e.clientY)??{id:o.id,frame:o},c=p.current;if(s.id===o.id){e.shiftKey||t.select([o.id]),c&&M({kind:`frame-move`,frame:o,startX:e.clientX,startY:e.clientY,moved:!1});return}if(c&&M({kind:`click`,id:s.id,startX:e.clientX,startY:e.clientY,additive:e.shiftKey}),e.shiftKey){let e=t.selection.includes(s.id)?t.selection.filter(e=>e!==s.id):[...t.selection,s.id];t.select(e)}else t.selection.includes(s.id)||t.select([s.id])},P=e=>{w.current={x:e.clientX,y:e.clientY};let t=T(e.clientX,e.clientY);Yo(t.x,t.y);let n=c.current,r=U.getState().camera;if(!n){let t=U.getState().tool;(t===`select`||t===`comment`)&&!m&&(k.current={x:e.clientX,y:e.clientY},O.current||=requestAnimationFrame(()=>{O.current=0;let e=k.current;e&&A(e.x,e.y)}));return}switch(n.kind){case`pan`:Tr({...r,x:n.camX+e.clientX-n.startX,y:n.camY+e.clientY-n.startY});break;case`frame-move`:{let t=(e.clientX-n.startX)/r.zoom,i=(e.clientY-n.startY)/r.zoom;if(!n.moved&&Math.hypot(e.clientX-n.startX,e.clientY-n.startY)<3)break;n.moved=!0,f(e=>({...e,[n.frame.frameName]:{x:Math.round(n.frame.x+t),y:Math.round(n.frame.y+i),width:n.frame.width,height:n.frame.height}}));break}case`frame-resize`:{let t=(e.clientX-n.startX)/r.zoom,i=(e.clientY-n.startY)/r.zoom,a=n.frame,o=a.height??G(a),s={x:a.x,y:a.y,width:a.width,height:a.height};(n.edge===`e`||n.edge===`se`)&&(s.width=Math.max(120,Math.round(a.width+t))),n.edge===`w`&&(s.width=Math.max(120,Math.round(a.width-t)),s.x=Math.round(a.x+a.width-s.width)),(n.edge===`s`||n.edge===`se`)&&(s.height=Math.max(80,Math.round(o+i))),f(e=>({...e,[a.frameName]:s}));break}case`draw`:case`marquee`:{let{x:t,y:r}=T(e.clientX,e.clientY),i={...n,x:t,y:r};c.current=i,s(i);break}case`click`:{if(Math.hypot(e.clientX-n.startX,e.clientY-n.startY)<5)break;let t=U.getState().index.get(n.id);if(!t?.parent||U.getState().selection.length!==1)break;let r={kind:`node-drag`,id:n.id,frame:t.frame,target:null};c.current=r,s(r);break}case`node-drag`:F(n,e.clientX,e.clientY).then(e=>{let t=c.current;if(t?.kind!==`node-drag`||t.id!==n.id)return;let r={...t,target:e};c.current=r,s(r)})}},F=async(e,t,n)=>{let r=U.getState().index.get(e.id);if(!r?.parent)return null;let i=r.parent,a=i.children.filter(e=>e.kind===`component`||e.kind===`element`),o=await xi(e.frame.frameName,a.map(e=>e.id)),{x:s,y:c}=T(t,n),l=E(e.frame),u=s-l.x,d=c-l.y,f=Di(i.props.className?.kind===`string`?i.props.className.value:``),p=(f.display===`flex`||f.display===`inline-flex`)&&f.direction===`row`,m=null,h=1/0;return a.forEach((e,t)=>{let n=o[e.id];if(!n)return;let r=p?[{at:n.x,index:t,line:{x:n.x-1,y:n.y,width:2,height:n.height}},{at:n.x+n.width,index:t+1,line:{x:n.x+n.width-1,y:n.y,width:2,height:n.height}}]:[{at:n.y,index:t,line:{x:n.x,y:n.y-1,width:n.width,height:2}},{at:n.y+n.height,index:t+1,line:{x:n.x,y:n.y+n.height-1,width:n.width,height:2}}];for(let e of r){let t=Math.abs((p?u:d)-e.at);if(t<h){h=t;let n=a[e.index];m={parent:i.id,index:n?i.children.indexOf(n):i.children.length,line:e.line}}}}),m},ee=async e=>{p.current=!1;let t=c.current;if(c.current=null,s(null),!t)return;let n=U.getState();if(t.kind===`frame-move`&&t.moved){let e=d.current[t.frame.frameName];e&&await n.run({op:`update_frame`,canvas:n.canvas,frame:t.frame.frameName,x:e.x,y:e.y}),I(t.frame.frameName)}else if(t.kind===`frame-resize`){let e=d.current[t.frame.frameName];if(e){let r={};e.width!==t.frame.width&&(r.width=e.width),e.x!==t.frame.x&&(r.x=e.x),e.height!==t.frame.height&&(t.edge===`s`||t.edge===`se`)&&(r.height=e.height),Object.keys(r).length&&await n.run({op:`update_frame`,canvas:n.canvas,frame:t.frame.frameName,...r})}I(t.frame.frameName)}else if(t.kind===`draw`){let e=Math.min(t.startX,t.x),n=Math.min(t.startY,t.y),r=Math.abs(t.x-t.startX),i=Math.abs(t.y-t.startY);r<16||i<16?await ni(t.startX,t.startY,1024,720):await ni(e,n,r,i),U.setState({tool:`select`})}else if(t.kind===`marquee`){let e=Math.min(t.startX,t.x),r=Math.max(t.startX,t.x),i=Math.min(t.startY,t.y),a=Math.max(t.startY,t.y);if(r-e>4||a-i>4){let o=(n.doc?.frames??[]).filter(t=>t.x<r&&t.x+t.width>e&&t.y<a&&t.y+G(t)>i).map(e=>e.id);n.select(t.additive?[...new Set([...n.selection,...o])]:o)}}else if(t.kind===`node-drag`&&t.target){let e=n.index.get(t.id);if(e?.parent){let r=e.parent.children.indexOf(e.node),i=t.target.index>r?t.target.index-1:t.target.index;i!==r&&await n.run({op:`move`,canvas:n.canvas,id:t.id,parent:t.target.parent,index:i})}}else t.kind===`click`&&!(Math.hypot(e.clientX-t.startX,e.clientY-t.startY)>3)&&!t.additive&&n.selection.length>1&&n.select([t.id])},I=e=>f(({[e]:t,...n})=>n),te=async e=>{let t=U.getState();if(t.tool!==`select`)return;let n=await A(e.clientX,e.clientY);if(!n)return;let r=t.index.get(n.id)?.node;r&&r.id!==n.frame.id&&(t.select([n.id]),Zo(r)&&U.setState({editingText:n.id}))},L=async e=>{e.preventDefault();let t=U.getState(),n=await A(e.clientX,e.clientY);n&&!t.selection.includes(n.id)&&t.select([n.id]),U.getState().selection.length&&_({x:e.clientX,y:e.clientY})},R=(0,B.useRef)(!1),ne=async(e,t)=>{let{x:n,y:r}=T(e,t);if(!D(n,r))return null;let i=await A(e,t);if(!i)return`stale`;let a=U.getState(),o=a.index.get(i.id),s=E(i.frame);if(!o||o.node.id===i.frame.id)return{frame:i.frame.frameName,rect:{x:0,y:0,width:s.width,height:s.height??G(i.frame)},parent:$r(i.frame),label:i.frame.frameName};let c=a.rects[i.id];if(!c)return null;if(ei(o.node)&&o.node.kind===`element`||!o.parent)return{frame:i.frame.frameName,rect:c,parent:i.id,label:o.node.name};let l=o.parent.children.findIndex(e=>e.id===i.id)+1;return{frame:i.frame.frameName,rect:{x:c.x,y:c.y+c.height-1,width:c.width,height:2},parent:o.parent.id,index:l,label:`after ${o.node.name}`}},re=async e=>{if(!e.dataTransfer.types.includes(`application/x-truecanvas-component`))return;e.preventDefault(),e.dataTransfer.dropEffect=`copy`,R.current=!0;let t=await ne(e.clientX,e.clientY);t!==`stale`&&R.current&&y(t)},ie=async e=>{let t=e.dataTransfer.getData(`application/x-truecanvas-component`);if(!t)return;e.preventDefault(),R.current=!1,y(null);let n=await ne(e.clientX,e.clientY);if(n===`stale`&&(n=await ne(e.clientX,e.clientY)),!n||n===`stale`)return;let r=JSON.parse(t),i=U.getState();await i.run({op:`insert_component`,canvas:i.canvas,component:r.name,parent:n.parent,index:n.index,props:r.insertProps})},ae=e?.frames??[],oe=(0,B.useMemo)(()=>{let e=new Set,n=U.getState().frameHeights;for(let r of ae){let a=E(r),o=a.height===null&&r.height===null&&n[r.frameName]===void 0?2e4:a.height??G(r),s=t.x+a.x*t.zoom,c=t.y+a.y*t.zoom;s+a.width*t.zoom>-400&&s<i.width+400&&c+o*t.zoom>-400&&c<i.height+400&&e.add(r.frameName)}return e},[ae,t,i,E]),se=(0,B.useRef)(new Set);for(let e of oe)se.current.add(e);if(se.current.size>12)for(let e of[...se.current])oe.has(e)||se.current.delete(e);let ce=o?.kind===`pan`?`grabbing`:m||n===`hand`?`grab`:void 0;return(0,$.jsxs)(`div`,{ref:r,className:`viewport tool-${n}${m?` panning`:``}`,tabIndex:-1,style:{cursor:ce,backgroundSize:`${Math.max(8,20*t.zoom)}px ${Math.max(8,20*t.zoom)}px`,backgroundPosition:`${t.x}px ${t.y}px`},onPointerDown:N,onPointerMove:P,onPointerUp:ee,onPointerLeave:()=>{Yo(null,null),!c.current&&U.getState().hover&&U.setState({hover:null})},onDoubleClick:te,onContextMenu:L,onDragOver:re,onDragLeave:e=>{e.currentTarget.contains(e.relatedTarget)||(R.current=!1,y(null))},onDrop:ie,children:[(0,$.jsxs)(`div`,{className:`world${x?` moving`:``}`,style:{transform:`translate(${t.x}px, ${t.y}px) scale(${t.zoom})`},children:[ae.map(e=>(0,$.jsx)(Qa,{frame:e,...E(e),mounted:se.current.has(e.frameName),interactive:n===`interact`},e.frameName)),(0,$.jsx)(za,{})]}),(0,$.jsx)(Qo,{framePos:E,drag:o,drop:v,onResizeStart:(e,t,n)=>M({kind:`frame-resize`,frame:e,edge:t,startX:n.clientX,startY:n.clientY}),onLabelDown:(e,t)=>{if(t.stopPropagation(),t.button!==0)return;t.target.setPointerCapture(t.pointerId);let n=U.getState();t.shiftKey?n.select(n.selection.includes(e.id)?n.selection.filter(t=>t!==e.id):[...n.selection,e.id]):n.select([e.id]),M({kind:`frame-move`,frame:e,startX:t.clientX,startY:t.clientY,moved:!1})}}),e&&!e.error&&e.frames.length===0&&(0,$.jsxs)(`div`,{className:`empty-canvas`,children:[(0,$.jsx)(`div`,{style:{fontWeight:600,color:`var(--text)`},children:`An empty canvas`}),(0,$.jsxs)(`div`,{children:[`Press `,(0,$.jsx)(`span`,{className:`kbd-chip`,children:`F`}),` and drag to draw a frame, or ask your agent to build a screen.`]})]}),g&&(0,$.jsx)(ns,{x:g.x,y:g.y,onClose:()=>_(null)})]})}function as(e,t){return!e||!t?e===t:e.x===t.x&&e.y===t.y&&e.width===t.width&&e.height===t.height}var os=e=>e.trim().toLowerCase().replace(/[^a-z0-9_-]+/g,`-`).replace(/^-+|-+$/g,``);function ss(){let e=U(e=>e.pages),[t,n]=(0,B.useState)(()=>localStorage.getItem(`tc:pagesCollapsed`)===`1`),[r,i]=(0,B.useState)(()=>Number(localStorage.getItem(`tc:pagesHeight`))||null),[a,o]=(0,B.useState)(!1),[s,l]=(0,B.useState)(null),[u,d]=(0,B.useState)(!1);return(0,$.jsxs)(`section`,{className:`pages`,children:[(0,$.jsxs)(`div`,{className:`section-bar`,children:[(0,$.jsxs)(`button`,{className:`section-toggle`,onClick:()=>{n(!t),localStorage.setItem(`tc:pagesCollapsed`,t?`0`:`1`)},"aria-expanded":!t,children:[(0,$.jsx)(c,{size:12,className:t?``:`open`}),`Pages`]}),(0,$.jsx)(v,{label:`New page`,children:(0,$.jsx)(`button`,{className:`icon-btn sm`,"aria-label":`New page`,onClick:e=>{let t=e.currentTarget.getBoundingClientRect();l({x:t.left-180,y:t.bottom+4})},children:(0,$.jsx)(p,{size:13})})}),s&&(0,$.jsx)(k,{x:s.x,y:s.y,onClose:()=>l(null),items:[{label:`New empty page`,icon:(0,$.jsx)(p,{size:14}),onSelect:()=>(n(!1),o(!0))},{label:`Import a page from your app…`,icon:(0,$.jsx)(Be,{size:14}),onSelect:()=>d(!0)}]}),u&&(0,$.jsx)(cs,{onClose:()=>d(!1)})]}),!t&&(0,$.jsxs)($.Fragment,{children:[(0,$.jsxs)(`div`,{className:`pages-list scroll`,style:r?{height:r}:{maxHeight:200,flex:`none`},children:[e.map(e=>(0,$.jsx)(ls,{page:e},e.name)),a&&(0,$.jsx)(us,{initial:``,placeholder:`page-name`,onDone:async e=>{o(!1);let t=os(e);if(t)try{await H.createCanvas(t),U.setState({canvas:t})}catch(e){U.getState().toast(e.message)}}})]}),(0,$.jsx)(`div`,{className:`resize-bar`,onPointerDown:e=>{let t=e.clientY,n=e.currentTarget.previousElementSibling,a=r??n?.offsetHeight??120,o=a;e.target.setPointerCapture(e.pointerId);let s=e=>{o=Math.max(56,Math.min(420,a+e.clientY-t)),i(o)},c=()=>{window.removeEventListener(`pointermove`,s),window.removeEventListener(`pointerup`,c),localStorage.setItem(`tc:pagesHeight`,String(o))};window.addEventListener(`pointermove`,s),window.addEventListener(`pointerup`,c)},role:`separator`,"aria-orientation":`horizontal`,"aria-label":`Resize pages`})]})]})}function cs({onClose:e}){let[t,n]=(0,B.useState)(null),[r,i]=(0,B.useState)(!1);(0,B.useEffect)(()=>{H.routes().then(e=>n(e.routes)).catch(()=>n([]))},[]);let a=async t=>{e();let n=U.getState();n.canvas&&(await n.run({op:`import_route`,canvas:n.canvas,route:t,copy:r}))?.length&&setTimeout(()=>void Ao(()=>Promise.resolve().then(()=>gr).then(e=>e.zoomToSelection()),void 0),400)};return(0,$.jsxs)(y,{title:`Add a page from your app`,width:460,onClose:e,children:[(0,$.jsxs)(`div`,{className:`seg-choice`,role:`radiogroup`,"aria-label":`How to add the page`,children:[(0,$.jsxs)(`button`,{role:`radio`,"aria-checked":!r,className:r?``:`on`,onClick:()=>i(!1),children:[(0,$.jsxs)(`strong`,{children:[(0,$.jsx)(vt,{size:13}),` Linked`]}),(0,$.jsx)(`span`,{children:`The frame is your page. Editing its layers edits page.tsx, tracked by git.`})]}),(0,$.jsxs)(`button`,{role:`radio`,"aria-checked":r,className:r?`on`:``,onClick:()=>i(!0),children:[(0,$.jsxs)(`strong`,{children:[(0,$.jsx)(He,{size:13}),` Copy`]}),(0,$.jsx)(`span`,{children:`A free copy in the canvas, for explorations. Your page stays untouched.`})]})]}),(0,$.jsxs)(`div`,{className:`dir-list`,style:{height:240},children:[t===null&&(0,$.jsx)(`div`,{className:`faint`,style:{padding:10},children:`Looking for pages…`}),t?.length===0&&(0,$.jsx)(`div`,{className:`faint`,style:{padding:10},children:`No App Router pages found.`}),t?.map(e=>(0,$.jsxs)(`button`,{className:`dir-row`,onClick:()=>void a(e.route),disabled:e.dynamic,title:e.dynamic?`Pages with [params] need sample values: not supported yet`:e.file,children:[(0,$.jsx)(Be,{size:14,className:`faint`}),(0,$.jsx)(`span`,{style:{fontWeight:500},children:e.route}),(0,$.jsx)(`span`,{className:`faint`,style:{marginLeft:`auto`,overflow:`hidden`,textOverflow:`ellipsis`,whiteSpace:`nowrap`,maxWidth:220},children:e.dynamic?`dynamic route`:e.file})]},e.file))]}),(0,$.jsx)(`div`,{className:`modal-actions`,children:(0,$.jsx)(`button`,{className:`btn outline`,onClick:e,children:`Cancel`})})]})}function ls({page:e}){let t=U(t=>t.canvas===e.name),n=U(t=>Object.values(t.presence).some(t=>t.canvas===e.name&&Date.now()-t.at<12e3)),[r,i]=(0,B.useState)(!1),[a,o]=(0,B.useState)(null),[s,c]=(0,B.useState)(!1),l=U.getState,d=async t=>{i(!1);let n=os(t);if(n&&n!==e.name)try{await H.renameCanvas(e.name,n)}catch(e){l().toast(e.message)}},f=async()=>{try{let{name:t}=await H.duplicateCanvas(e.name);U.setState({canvas:t})}catch(e){l().toast(e.message)}},p=async()=>{c(!1);try{await H.deleteCanvas(e.name),l().toast(`Deleted ${e.name}`,`info`,{label:`Undo`,run:()=>void H.restoreCanvas(e.name).then(({name:e})=>U.setState({canvas:e}))})}catch(e){l().toast(e.message)}};return r?(0,$.jsx)(us,{initial:e.name,onDone:d}):(0,$.jsxs)($.Fragment,{children:[(0,$.jsxs)(`div`,{className:`page-row${t?` current`:``}`,onDoubleClick:()=>i(!0),onContextMenu:e=>{e.preventDefault(),o({x:e.clientX,y:e.clientY})},children:[(0,$.jsxs)(`button`,{className:`page-open`,"aria-current":t?`page`:void 0,onClick:()=>!t&&U.setState({canvas:e.name}),children:[(0,$.jsx)(`span`,{className:`check`,children:t&&(0,$.jsx)(x,{size:13})}),(0,$.jsx)(`span`,{className:`name`,children:e.name}),n&&(0,$.jsx)(`span`,{className:`flash-dot`,title:`An agent is working here`}),(0,$.jsx)(`span`,{className:`count`,children:e.frames})]}),(0,$.jsx)(`button`,{className:`icon-btn sm more`,"aria-label":`Page options for ${e.name}`,onClick:e=>{e.stopPropagation();let t=e.currentTarget.getBoundingClientRect();o({x:t.left,y:t.bottom+4})},children:(0,$.jsx)(u,{size:14})})]}),a&&(0,$.jsx)(k,{x:a.x,y:a.y,onClose:()=>o(null),items:[{label:`Rename`,icon:(0,$.jsx)(Wt,{size:14}),onSelect:()=>i(!0)},{label:`Duplicate`,icon:(0,$.jsx)(Ee,{size:14}),onSelect:()=>void f()},{label:`Open file in editor`,icon:(0,$.jsx)(Be,{size:14}),onSelect:()=>void H.openFile(`${U.getState().doc?.file.split(`/`).slice(0,-1).join(`/`)||`canvas`}/${e.name}.canvas.tsx`)},`sep`,{label:`Delete page`,icon:(0,$.jsx)(Nn,{size:14}),danger:!0,onSelect:()=>c(!0)}]}),s&&(0,$.jsx)(ds,{title:`Delete “${e.name}”?`,body:`This removes ${e.name}.canvas.tsx from your project. You can undo it right after.`,confirm:`Delete page`,onCancel:()=>c(!1),onConfirm:()=>void p()})]})}function us({initial:e,placeholder:t,onDone:n}){let[r,i]=(0,B.useState)(e),a=(0,B.useRef)(!1),o=e=>{a.current||(a.current=!0,n(e))};return(0,$.jsx)(`div`,{className:`inline-name`,children:(0,$.jsx)(`input`,{autoFocus:!0,value:r,placeholder:t,onFocus:e=>e.target.select(),onChange:e=>i(e.target.value),onBlur:()=>o(r),onKeyDown:t=>{t.stopPropagation(),t.key===`Enter`&&o(r),t.key===`Escape`&&o(e)}})})}function ds({title:e,body:t,confirm:n,onConfirm:r,onCancel:i}){return(0,$.jsxs)(y,{title:e,width:360,role:`alertdialog`,onClose:i,children:[(0,$.jsx)(`p`,{className:`muted`,children:t}),(0,$.jsxs)(`div`,{className:`modal-actions`,children:[(0,$.jsx)(`button`,{className:`btn outline`,onClick:i,children:`Cancel`}),(0,$.jsx)(`button`,{className:`btn danger-solid`,autoFocus:!0,onClick:r,children:n})]})]})}function fs({q:e}){let t=eo.filter(t=>!e||t.label.toLowerCase().includes(e.toLowerCase()));return t.length?(0,$.jsxs)($.Fragment,{children:[(0,$.jsx)(`div`,{className:`group-title`,children:`Basics`}),(0,$.jsx)(`div`,{className:`basics-grid`,children:t.map(e=>(0,$.jsxs)(`button`,{className:`basic`,title:`Insert ${e.label.toLowerCase()}${e.kbd?` (${e.kbd})`:``}`,onClick:()=>void to(e),children:[bo[e.key],(0,$.jsx)(`span`,{children:e.label})]},e.key))})]}):null}function ps(){let e=U(e=>e.components),t=U(e=>e.componentsDir),[n,r]=(0,B.useState)(``),[i,a]=(0,B.useState)(null),o=(0,B.useMemo)(()=>{let t=e.filter(e=>!n||e.name.toLowerCase().includes(n.toLowerCase())||e.file.toLowerCase().includes(n.toLowerCase())),r=new Map;for(let e of t){let t=e.library?_s(e.library):e.file.split(`/`).slice(0,-1).join(`/`)||`.`;r.set(t,[...r.get(t)??[],e])}return[...r]},[e,n]);return(0,$.jsxs)($.Fragment,{children:[(0,$.jsx)(`div`,{className:`search`,children:(0,$.jsxs)(`div`,{className:`field`,children:[(0,$.jsx)(`span`,{className:`prefix`,children:(0,$.jsx)(j,{size:13})}),(0,$.jsx)(`input`,{value:n,placeholder:`Search assets`,onChange:e=>r(e.target.value),onKeyDown:e=>e.stopPropagation()})]})}),(0,$.jsxs)(`div`,{className:`scroll`,style:{paddingBottom:24},children:[(0,$.jsx)(fs,{q:n}),(0,$.jsxs)(`div`,{className:`group-title with-action`,children:[(0,$.jsx)(`span`,{children:`Components`}),(0,$.jsx)(`button`,{className:`icon-btn sm`,"aria-label":`New component`,title:`New component`,onClick:()=>ao(!1),children:(0,$.jsx)(p,{size:13})})]}),!e.length&&(0,$.jsxs)(`div`,{className:`assets-empty`,children:[(0,$.jsx)(z,{size:18}),(0,$.jsx)(`div`,{className:`title`,children:`No components yet`}),(0,$.jsxs)(`div`,{className:`faint`,children:[`Components are `,(0,$.jsx)(`span`,{className:`mono`,children:`.tsx`}),` files in `,(0,$.jsxs)(`span`,{className:`mono`,children:[t,`/`]}),`. Make one here, or select layers and press `,(0,$.jsxs)(`span`,{className:`kbd-chip`,children:[vr.mod,`⌥K`]}),` to turn them into a component.`]}),(0,$.jsxs)(`div`,{className:`assets-empty-actions`,children:[(0,$.jsxs)(`button`,{className:`btn outline small`,onClick:()=>ao(!1),children:[(0,$.jsx)(p,{size:13}),` New component`]}),(0,$.jsxs)(`button`,{className:`btn outline small`,onClick:()=>lo(`shadcn`),children:[(0,$.jsx)(ae,{size:13}),` Add shadcn/ui`]})]})]}),o.map(([e,t])=>(0,$.jsxs)(`div`,{children:[(0,$.jsx)(`div`,{className:`group-title`,children:e}),(0,$.jsx)(`div`,{className:`asset-grid`,children:t.map(e=>(0,$.jsx)(gs,{spec:e,expanded:i===e.name,onTogglePresets:()=>a(i===e.name?null:e.name)},e.name))})]},e)),(0,$.jsx)(`div`,{className:`group-title`,children:`Libraries`}),(0,$.jsxs)(`button`,{className:`library-link`,onClick:()=>lo(`icons`),children:[(0,$.jsx)(Re,{size:14}),(0,$.jsxs)(`span`,{children:[`Icons`,(0,$.jsx)(`span`,{className:`faint`,children:`Lucide, Tabler, Phosphor, Heroicons, Radix`})]})]}),(0,$.jsxs)(`button`,{className:`library-link`,onClick:()=>lo(`shadcn`),children:[(0,$.jsx)(ae,{size:14}),(0,$.jsxs)(`span`,{children:[`shadcn/ui`,(0,$.jsx)(`span`,{className:`faint`,children:`Buttons, dialogs, forms… copied into your project`})]})]})]})]})}function ms(e,t){let n=e.presets?.find(e=>e.name===t);if(!n)return{};let r={};for(let[t,i]of Object.entries(n.props)){let n=e.props.find(e=>e.name===t)?.default;JSON.stringify(n)!==JSON.stringify(i)&&(r[t]=i)}return r}function hs({spec:e,preset:t}){let[n,r]=(0,B.useState)(`loading`),i=`/api/thumb?component=${encodeURIComponent(e.name)}${t?`&preset=${encodeURIComponent(t)}`:``}`;return(0,$.jsx)(`span`,{className:`thumb ${n}`,children:n===`error`?e.library?(0,$.jsx)(Vn,{size:16}):(0,$.jsx)(z,{size:16}):(0,$.jsx)(`img`,{src:i,alt:``,loading:`lazy`,draggable:!1,onLoad:()=>r(`ok`),onError:()=>r(`error`)})})}function gs({spec:e,expanded:t,onTogglePresets:n}){let[r,i]=(0,B.useState)(null),a=t=>n=>{n.dataTransfer.effectAllowed=`copy`,n.dataTransfer.setData(`application/x-truecanvas-component`,JSON.stringify({...e,insertProps:t}))},o=e.presets??[];return(0,$.jsxs)($.Fragment,{children:[r&&(0,$.jsx)(k,{x:r.x,y:r.y,onClose:()=>i(null),items:[{label:`Insert`,icon:(0,$.jsx)(p,{size:14}),onSelect:()=>void ti(e)},...e.library?[]:[{label:`Edit main component`,icon:(0,$.jsx)(Wt,{size:14}),onSelect:()=>void no(e.name)}],{label:`Open in code editor`,icon:(0,$.jsx)(Be,{size:14}),onSelect:()=>rs(e.name)}]}),(0,$.jsxs)(`div`,{className:`asset`,role:`button`,tabIndex:0,"aria-label":`Insert ${e.name}`,draggable:!0,onDragStart:a(),onClick:()=>void ti(e),onKeyDown:t=>{t.target!==t.currentTarget||t.key!==`Enter`&&t.key!==` `||(t.preventDefault(),ti(e))},onContextMenu:e=>{e.preventDefault(),i({x:e.clientX,y:e.clientY})},title:e.description??(e.library?`Drag onto the canvas, or click to insert`:`Click to insert · right-click to edit its main component`),children:[(0,$.jsx)(hs,{spec:e}),(0,$.jsxs)(`span`,{className:`asset-name`,children:[(0,$.jsx)(`span`,{children:e.name}),o.length>0&&(0,$.jsxs)(`button`,{className:`asset-presets${t?` on`:``}`,"aria-label":`${o.length} presets`,onClick:e=>{e.stopPropagation(),n()},children:[o.length,(0,$.jsx)(c,{size:11})]})]})]}),t&&(0,$.jsx)(`div`,{className:`preset-strip`,children:o.map(t=>(0,$.jsxs)(`div`,{className:`asset small`,draggable:!0,onDragStart:a(ms(e,t.name)),onClick:()=>void ti(e,void 0,ms(e,t.name)),children:[(0,$.jsx)(hs,{spec:e,preset:t.name}),(0,$.jsx)(`span`,{className:`asset-name`,children:(0,$.jsx)(`span`,{children:t.name})})]},t.name))})]})}function _s(e){return e===`@paper-design/shaders-react`?`Paper Shaders`:e}function vs(){let e=U(e=>e.leftTab),t=U(e=>e.components),n=U(e=>e.projectName);return(0,$.jsxs)(`aside`,{className:`panel left`,children:[(0,$.jsxs)(`div`,{className:`panel-head`,children:[(0,$.jsx)(`svg`,{className:`logo`,viewBox:`0 0 64 64`,"aria-hidden":!0,children:(0,$.jsx)(`path`,{fill:`#f2774a`,fillRule:`evenodd`,d:`M4 5h56v18H4z M22 14h20v46H22z`})}),(0,$.jsx)(`span`,{className:`project-name`,title:n,children:n}),(0,$.jsx)(`span`,{style:{marginLeft:`auto`}}),(0,$.jsx)(wa,{})]}),(0,$.jsx)(ss,{}),(0,$.jsx)(`div`,{style:{padding:`8px 10px`},children:(0,$.jsxs)(`div`,{className:`tabs`,role:`tablist`,children:[(0,$.jsx)(`button`,{role:`tab`,"aria-selected":e===`layers`,className:`tab${e===`layers`?` on`:``}`,onClick:()=>U.setState({leftTab:`layers`}),children:`Layers`}),(0,$.jsxs)(`button`,{role:`tab`,"aria-selected":e===`components`,className:`tab${e===`components`?` on`:``}`,onClick:()=>U.setState({leftTab:`components`}),children:[`Assets `,(0,$.jsx)(`span`,{className:`faint`,children:t.length||``})]})]})}),e===`layers`?(0,$.jsx)(Ss,{}):(0,$.jsx)(ps,{})]})}var ys=null,bs=(0,B.createContext)(null);async function xs(){let e=U.getState(),t=ys,n=e.layerDrop;if(ys=null,U.setState({layerDrop:null}),!t||!n||t===n.id)return;let r=e.index.get(n.id);if(r){if(n.where===`inside`)await e.run({op:`move`,canvas:e.canvas,id:t,parent:n.id});else if(r.parent){let i=r.parent.children.filter(e=>e.id!==t).findIndex(e=>e.id===n.id)+ +(n.where===`after`);await e.run({op:`move`,canvas:e.canvas,id:t,parent:r.parent.id,index:i})}}}function Ss(){let e=U(e=>e.doc),t=U(e=>e.layerQuery),n=Ts();return e?e.error?(0,$.jsxs)(`div`,{className:`empty`,children:[`The canvas file has a syntax error:`,(0,$.jsx)(`br`,{}),e.error]}):e.frames.length?(0,$.jsxs)($.Fragment,{children:[(0,$.jsx)(Cs,{}),(0,$.jsx)(bs.Provider,{value:n,children:(0,$.jsxs)(`div`,{className:`scroll tree`,role:`tree`,onDragEnd:()=>U.setState({layerDrop:null}),children:[e.frames.map(e=>(0,$.jsx)(Es,{node:e,depth:0,isFrame:!0},e.id)),n&&n.size===0&&(0,$.jsxs)(`div`,{className:`empty`,children:[`No layers match “`,t,`”.`]})]})})]}):(0,$.jsxs)(`div`,{className:`empty`,children:[`No frames yet.`,(0,$.jsx)(`br`,{}),`Press F and drag on the canvas.`]}):(0,$.jsx)(`div`,{className:`empty`,children:`Loading…`})}function Cs(){let e=U(e=>e.layerQuery);return(0,$.jsx)(`div`,{className:`layer-search`,children:(0,$.jsxs)(`div`,{className:`field`,children:[(0,$.jsx)(`span`,{className:`prefix`,children:(0,$.jsx)(j,{size:13})}),(0,$.jsx)(`input`,{value:e,placeholder:`Search layers`,"aria-label":`Search layers`,onChange:e=>U.setState({layerQuery:e.target.value}),onKeyDown:e=>{e.stopPropagation(),e.key===`Escape`&&U.setState({layerQuery:``})}}),e&&(0,$.jsx)(`button`,{className:`icon-btn sm`,"aria-label":`Clear search`,onClick:()=>U.setState({layerQuery:``}),children:(0,$.jsx)(d,{size:12})})]})})}function ws(e){let t=[e.name,W(e),e.text??``];for(let n of Object.values(e.props))n.kind===`string`&&t.push(n.value);return t.join(` `).toLowerCase()}function Ts(){let e=U(e=>e.layerQuery.trim().toLowerCase()),t=U(e=>e.index);return(0,B.useMemo)(()=>{if(!e)return null;let n=new Set;for(let[r,i]of t){if(!ws(i.node).includes(e))continue;n.add(r);let a=i.parent;for(;a;)n.add(a.id),a=t.get(a.id)?.parent??null;n.add(i.frame.id)}return n},[e,t])}var Es=(0,B.memo)(function e({node:t,depth:n,isFrame:r}){let i=U(e=>e.selection.includes(t.id)),a=U(e=>e.hover===t.id),o=(0,B.useContext)(bs),s=o!==null,l=U(e=>e.layerDrop?.id===t.id?e.layerDrop.where:null),u=U(e=>e.expanded.has(t.id))||s,d=pr(t),f=U(e=>e.hidden.has(d)),p=U(e=>e.locked.has(d)),m=U(e=>e.renamingLayer===t.id),h=U(e=>e.flashes.some(e=>e.id===t.id)),[g,_]=(0,B.useState)(null),v=(0,B.useRef)(null),y=t.children.filter(e=>(e.kind!==`text`||t.children.length>1)&&(!o||o.has(e.id))),b=y.length>0,x=s&&ws(t).includes(U.getState().layerQuery.trim().toLowerCase());(0,B.useEffect)(()=>{i&&v.current?.scrollIntoView({block:`nearest`})},[i]);let S=e=>{e.stopPropagation();let n=new Set(U.getState().expanded);n.has(t.id)?n.delete(t.id):n.add(t.id),U.setState({expanded:n})},C=e=>{let n=U.getState();e.shiftKey||e.metaKey||e.ctrlKey?n.select(n.selection.includes(t.id)?n.selection.filter(e=>e!==t.id):[...n.selection,t.id],{reveal:!1}):n.select([t.id],{reveal:!1})};if(o&&!o.has(t.id))return null;let{icon:w,hint:T}=Ds(t,!!r),E=[`layer`,r?`frame`:t.kind,i?`selected`:``,a?`hovered`:``,f?`is-hidden`:``,p?`is-locked`:``,x?`match`:``],D=t.kind===`component`||t.kind===`element`,O=e=>{U.setState({renamingLayer:null});let n=U.getState(),i=e.trim();r?i&&i!==W(t)&&n.run({op:`update_frame`,canvas:n.canvas,frame:t.frameName,name:i},{select:!1}):i!==(t.props[`data-name`]?.kind===`string`?t.props[`data-name`].value:``)&&n.run({op:`set_props`,canvas:n.canvas,id:t.id,props:{"data-name":i||null}},{select:!1})};l&&E.push(`drop-${l}`);let k=!r&&t.kind!==`text`;return(0,$.jsxs)($.Fragment,{children:[(0,$.jsxs)(`div`,{ref:v,role:`treeitem`,"aria-selected":i,"aria-expanded":b?u:void 0,className:E.join(` `),style:{paddingLeft:6+n*14},onClick:C,onContextMenu:e=>{e.preventDefault(),e.stopPropagation();let n=U.getState();n.selection.includes(t.id)||n.select([t.id],{reveal:!1}),_({x:e.clientX,y:e.clientY})},onDoubleClick:()=>(r||D)&&U.setState({renamingLayer:t.id}),onPointerEnter:()=>U.setState({hover:t.id}),onPointerLeave:()=>U.getState().hover===t.id&&U.setState({hover:null}),draggable:k,onDragStart:e=>{ys=t.id,e.dataTransfer.effectAllowed=`move`,e.dataTransfer.setData(`text/plain`,t.id)},onDragOver:e=>{if(!ys||ys===t.id)return;e.preventDefault();let n=e.currentTarget.getBoundingClientRect(),i=(e.clientY-n.top)/n.height,a=r||ei(t),o=r||a&&i>.3&&i<.7?`inside`:i<.5?`before`:`after`;l!==o&&U.setState({layerDrop:{id:t.id,where:o}})},onDrop:e=>{e.preventDefault(),xs()},children:[(0,$.jsx)(`span`,{"aria-hidden":!0,className:`twisty${u?` open`:``}`,onClick:b?S:void 0,style:{visibility:b?`visible`:`hidden`},children:(0,$.jsx)(c,{size:12})}),(0,$.jsx)(`span`,{className:`icon`,children:w}),m?(0,$.jsx)(`input`,{className:`layer-rename`,autoFocus:!0,defaultValue:W(t),onFocus:e=>e.target.select(),onClick:e=>e.stopPropagation(),onBlur:e=>O(e.target.value),onKeyDown:e=>{e.stopPropagation(),e.key===`Enter`&&e.target.blur(),e.key===`Escape`&&U.setState({renamingLayer:null})}}):(0,$.jsxs)($.Fragment,{children:[(0,$.jsx)(`span`,{className:`name`,children:W(t)}),T&&(0,$.jsx)(`span`,{className:`hint`,children:T})]}),h&&(0,$.jsx)(`span`,{className:`flash-dot`,title:`Changed by an agent`}),t.kind!==`text`&&!m&&(0,$.jsxs)(`span`,{className:`layer-flags`,children:[(0,$.jsx)(`button`,{className:`flag${p?` on`:``}`,"aria-label":p?`Unlock layer`:`Lock layer`,title:p?`Unlock`:`Lock (can't be clicked on the canvas)`,onClick:e=>{e.stopPropagation(),U.getState().toggleLayerFlag(`locked`,t)},children:p?(0,$.jsx)(N,{size:12}):(0,$.jsx)(wt,{size:12})}),(0,$.jsx)(`button`,{className:`flag${f?` on`:``}`,"aria-label":f?`Show layer`:`Hide layer`,title:f?`Show`:`Hide in the editor (your code is unchanged)`,onClick:e=>{e.stopPropagation(),U.getState().toggleLayerFlag(`hidden`,t)},children:f?(0,$.jsx)(Pe,{size:12}):(0,$.jsx)(Ie,{size:12})})]})]}),g&&(0,$.jsx)(ns,{x:g.x,y:g.y,onClose:()=>_(null),extra:[...r||D?[{label:`Rename`,icon:(0,$.jsx)(Wt,{size:14}),onSelect:()=>U.setState({renamingLayer:t.id})}]:[],...t.kind===`text`?[]:[{label:f?`Show`:`Hide`,icon:f?(0,$.jsx)(Ie,{size:14}):(0,$.jsx)(Pe,{size:14}),kbd:``,onSelect:()=>U.getState().toggleLayerFlag(`hidden`,t)},{label:p?`Unlock`:`Lock`,icon:p?(0,$.jsx)(wt,{size:14}):(0,$.jsx)(N,{size:14}),onSelect:()=>U.getState().toggleLayerFlag(`locked`,t)}]]}),u&&b&&y.map(t=>(0,$.jsx)(e,{node:t,depth:n+1},t.id))]})});function Ds(e,t){if(t)return{icon:(0,$.jsx)(We,{size:13}),hint:null};if(e.kind===`component`){let t=e.props.title??e.props.label??e.props.name;return{icon:(0,$.jsx)(z,{size:13}),hint:t?.kind===`string`?t.value:null}}if(e.kind===`text`)return{icon:(0,$.jsx)(Fn,{size:13}),hint:null};if(e.kind===`expression`)return{icon:(0,$.jsx)(le,{size:13}),hint:null};if(e.kind===`fragment`)return{icon:(0,$.jsx)(de,{size:13}),hint:null};let n=Pi(e.props.className?.kind===`string`?e.props.className.value:void 0),r=e.children.length>0&&e.children.every(e=>e.kind===`text`);return{icon:n===`Row`?(0,$.jsx)(Ce,{size:13}):n===`Stack`?(0,$.jsx)(ln,{size:13}):n===`Grid`?(0,$.jsx)(i,{size:13}):r?(0,$.jsx)(Fn,{size:13}):(0,$.jsx)(_n,{size:13}),hint:r?e.children[0].text??null:n}}var Os=[{value:`fade-up`,label:`Fade up`},{value:`fade-down`,label:`Fade down`},{value:`fade-in`,label:`Fade in`},{value:`blur-in`,label:`Blur in`},{value:`scale-in`,label:`Scale in`},{value:`slide-left`,label:`Slide from right`},{value:`slide-right`,label:`Slide from left`}],ks=[{value:`words`,label:`Word by word`},{value:`letters`,label:`Letter by letter`},{value:`blur-in`,label:`Blur in`},{value:`slide-up`,label:`Slide up`},{value:`typewriter`,label:`Typewriter`}],As=e=>e.children.filter(e=>!(e.kind===`text`&&!e.text?.trim())),js=e=>e.kind===`text`||e.children.some(js);function Ms(e,t){return e?.kind===`number`?e.value:t}function Ns(e,t){return e?.kind===`string`?e.value:t}function Ps({node:e}){let t=U(t=>t.index.get(e.id)),n=U(e=>e.canvas),r=U(e=>e.run),[i,a]=(0,B.useState)(`fade-up`),[o,s]=(0,B.useState)(`words`);if(!t||t.node.id===t.frame.id||t.frame.link?.editable===!1)return null;let c=t.parent,l=t.frame.frameName,u=e.name===`Reveal`?e:c?.name===`Reveal`&&As(c).length===1?c:null,f=As(e),p=e.name===`TextAnimate`?e:f.length===1&&f[0].name===`TextAnimate`?f[0]:c?.name===`TextAnimate`?c:null,m=!!p||js(e),_=e=>void e.then(()=>setTimeout(()=>Cr(l),700)),y=(e,t,i)=>_(r({op:`set_props`,canvas:n,id:e.id,props:{[t]:i}},{select:!1})),b=(t,i)=>_(r({op:`add_animation`,canvas:n,id:e.id,kind:t,effect:i})),x=t=>void r({op:`remove_animation`,canvas:n,id:e.id,kind:t});return(0,$.jsxs)(S,{title:(0,$.jsxs)(`span`,{className:`node-head`,children:[(0,$.jsx)(hn,{size:14,className:`faint`}),` Motion`]}),actions:(0,$.jsxs)($.Fragment,{children:[(0,$.jsx)(v,{label:`Replay animations`,children:(0,$.jsx)(`button`,{className:`icon-btn sm`,"aria-label":`Replay animations`,onClick:()=>Cr(l),children:(0,$.jsx)(sn,{size:13})})}),(0,$.jsx)(v,{label:`Play: scroll inside the frame`,children:(0,$.jsx)(`button`,{className:`icon-btn sm`,"aria-label":`Play frame`,onClick:()=>Sr(l),children:(0,$.jsx)(Kt,{size:13})})})]}),children:[(0,$.jsxs)(`div`,{className:`motion-block`,children:[(0,$.jsxs)(`div`,{className:`motion-head`,children:[(0,$.jsx)(`span`,{children:`Reveal on scroll`}),u&&(0,$.jsx)(v,{label:`Remove reveal`,children:(0,$.jsx)(`button`,{className:`icon-btn sm`,"aria-label":`Remove reveal`,onClick:()=>x(`reveal`),children:(0,$.jsx)(d,{size:13})})})]}),u?(0,$.jsxs)($.Fragment,{children:[(0,$.jsx)(h,{value:Ns(u.props.effect,`fade-up`),options:Os,onChange:e=>y(u,`effect`,e),ariaLabel:`Reveal effect`}),(0,$.jsxs)(`label`,{className:`motion-row`,children:[(0,$.jsx)(`span`,{children:`Delay`}),(0,$.jsx)(g,{value:Ms(u.props.delay,0),min:0,max:2,onCommit:e=>y(u,`delay`,e),ariaLabel:`Reveal delay`})]}),(0,$.jsxs)(`label`,{className:`motion-row`,children:[(0,$.jsx)(`span`,{children:`Duration`}),(0,$.jsx)(g,{value:Ms(u.props.duration,.6),min:.1,max:2,onCommit:e=>y(u,`duration`,e),ariaLabel:`Reveal duration`})]}),(0,$.jsxs)(`div`,{className:`motion-row`,children:[(0,$.jsx)(`span`,{children:`Only once`}),(0,$.jsx)(E,{on:u.props.once?.kind!==`boolean`||u.props.once.value,onChange:e=>y(u,`once`,e?null:!1),ariaLabel:`Reveal only once`})]})]}):(0,$.jsxs)(`div`,{className:`grid2`,style:{gridTemplateColumns:`1fr auto`},children:[(0,$.jsx)(h,{value:i,options:Os,onChange:a,ariaLabel:`Reveal effect`}),(0,$.jsx)(`button`,{className:`btn primary`,onClick:()=>b(`reveal`,i),children:`Add`})]})]}),m&&(0,$.jsxs)(`div`,{className:`motion-block`,children:[(0,$.jsxs)(`div`,{className:`motion-head`,children:[(0,$.jsx)(`span`,{children:`Text animation`}),p&&(0,$.jsx)(v,{label:`Remove text animation`,children:(0,$.jsx)(`button`,{className:`icon-btn sm`,"aria-label":`Remove text animation`,onClick:()=>x(`text`),children:(0,$.jsx)(d,{size:13})})})]}),p?(0,$.jsxs)($.Fragment,{children:[(0,$.jsx)(h,{value:Ns(p.props.effect,`words`),options:ks,onChange:e=>y(p,`effect`,e),ariaLabel:`Text effect`}),(0,$.jsxs)(`label`,{className:`motion-row`,children:[(0,$.jsx)(`span`,{children:`Stagger`}),(0,$.jsx)(g,{value:Ms(p.props.stagger,.06),min:0,max:.3,onCommit:e=>y(p,`stagger`,e),ariaLabel:`Text stagger`})]}),(0,$.jsxs)(`label`,{className:`motion-row`,children:[(0,$.jsx)(`span`,{children:`Delay`}),(0,$.jsx)(g,{value:Ms(p.props.delay,0),min:0,max:2,onCommit:e=>y(p,`delay`,e),ariaLabel:`Text delay`})]})]}):(0,$.jsxs)(`div`,{className:`grid2`,style:{gridTemplateColumns:`1fr auto`},children:[(0,$.jsx)(h,{value:o,options:ks,onChange:s,ariaLabel:`Text effect`}),(0,$.jsx)(`button`,{className:`btn primary`,onClick:()=>b(`text`,o),children:`Add`})]})]}),!m&&e.kind===`component`&&e.name!==`Reveal`&&(0,$.jsxs)(`p`,{className:`faint`,style:{margin:`8px 0 0`},children:[`Text inside `,`<${e.name} />`,` lives in its own file; animate text where it's written.`]})]})}var Fs=e=>e.split(/\s+/).filter(Boolean),Is=Promise.resolve();function Ls(e,t,n,r,i){let a=Fs(r),o=Fs(i),s=new Set(a.filter(e=>!o.includes(e))),c=o.filter(e=>!a.includes(e));(s.size||c.length)&&(Is=Is.then(async()=>{let r=U.getState(),i=(r.index.get(n)??r.index.get(r.selection[0]))?.node,a=i?.props.className,o=a?.kind===`string`?Fs(a.value):a?null:[];if(!i||o===null)return;let l=[...o.filter(e=>!s.has(e)),...c.filter(e=>!o.includes(e))].join(` `);l!==o.join(` `)&&await e({op:`set_class`,canvas:t,id:i.id,className:l},{select:!1})}).catch(()=>{}))}var Rs=/^(h[1-6]|p|span|a|label|button|li|strong|em|small|blockquote|code|figcaption|dt|dd|th|td)$/;function zs({node:e,component:t}){let n=U(e=>e.canvas),r=U(e=>e.run),i=U(e=>e.tokens),a=e.props.className,o=a?.kind===`string`?a.value:``;if(a?.kind===`expression`)return(0,$.jsxs)(S,{title:`Styles`,children:[(0,$.jsx)(`div`,{className:`field readonly`,children:`{${a.code}}`}),(0,$.jsx)(`p`,{className:`faint`,style:{margin:`8px 0 0`},children:`The class name is computed in code, so it can't be edited here.`})]});let s=t=>Ls(r,n,e.id,o,t),c=e.kind===`element`&&(Rs.test(e.name)||e.children.some(e=>e.kind===`text`)),l={className:o,write:s,tokens:i};return(0,$.jsxs)($.Fragment,{children:[(0,$.jsx)(Hs,{...l,component:t}),(0,$.jsx)(Us,{...l}),(0,$.jsx)(Ws,{...l}),(0,$.jsx)(Gs,{...l}),(0,$.jsx)(Ks,{...l}),(c||Y(o,`textSize`)||Y(o,`textColor`))&&(0,$.jsx)(qs,{...l}),(0,$.jsx)(S,{title:`Classes`,children:(0,$.jsx)(C,{mono:!0,multiline:!0,value:o,placeholder:`Tailwind classes`,onCommit:s,ariaLabel:`Classes`})})]})}var Bs=e=>e.replace(/-/g,` `).replace(/^./,e=>e.toUpperCase());function Vs({axis:e,className:t,write:n}){let r=Ui(t,e);return(0,$.jsxs)(`div`,{className:`size-row`,children:[(0,$.jsx)(m,{prefix:e.toUpperCase(),value:r.mode===`fixed`?r.px:null,placeholder:r.mode===`fixed`?``:Bs(r.mode),min:0,onCommit:r=>n(r===null?Wi(t,e,`auto`):Wi(t,e,`fixed`,r)),ariaLabel:e===`w`?`Width`:`Height`}),(0,$.jsx)(h,{value:r.mode,options:[{value:`fixed`,label:`Fixed`},{value:`hug`,label:`Hug`,hint:`${e}-fit`},{value:`fill`,label:`Fill`,hint:`${e}-full`},{value:`auto`,label:`Auto`}],onChange:i=>n(Wi(t,e,i,r.px??240)),ariaLabel:`${e===`w`?`Width`:`Height`} mode`})]})}function Hs({className:e,write:t,component:n}){let r=(0,B.useMemo)(()=>Di(e),[e]),i=r.display===`flex`||r.display===`inline-flex`,a=r.display===`grid`,o=Gi(e),[s,c]=(0,B.useState)(()=>o.t!==o.b||o.l!==o.r),l=Y(e,`overflow`),u=Z(Y(e,`gridCols`),`grid-cols-`),d=Ni(r);return(0,$.jsxs)(S,{title:`Layout`,actions:(0,$.jsx)(v,{label:i?`Remove auto layout`:`Add auto layout`,kbd:i?void 0:`⇧A`,children:(0,$.jsx)(`button`,{className:`icon-btn sm`,onClick:()=>t(Oi(e,!i)),"aria-label":`Toggle auto layout`,children:i?(0,$.jsx)(At,{size:13}):(0,$.jsx)(p,{size:13})})}),children:[(0,$.jsxs)(`div`,{className:`grid2`,children:[(0,$.jsx)(Vs,{axis:`w`,className:e,write:t}),(0,$.jsx)(Vs,{axis:`h`,className:e,write:t})]}),(i||a)&&(0,$.jsxs)(`div`,{className:`row`,style:{alignItems:`flex-start`,marginTop:10},children:[(0,$.jsxs)(`div`,{style:{flex:1,display:`grid`,gap:6,minWidth:0},children:[(0,$.jsx)(A,{value:a?`grid`:r.direction,options:[{value:`col`,icon:(0,$.jsx)(ee,{size:13}),title:`Vertical`},{value:`row`,icon:(0,$.jsx)(te,{size:13}),title:`Horizontal`},{value:`grid`,icon:(0,$.jsx)(nt,{size:13}),title:`Grid`}],onChange:n=>t($i(e,n))}),(0,$.jsx)(m,{prefix:(0,$.jsx)(v,{label:`Gap between items`,children:(0,$.jsx)(`span`,{children:`Gap`})}),value:r.gap,placeholder:`0`,min:0,onCommit:n=>t(ki(e,`gap`,n)),ariaLabel:`Gap`}),a?(0,$.jsx)(m,{prefix:`Cols`,value:u&&Number(u)||null,placeholder:`1`,min:1,onCommit:n=>t(X(e,`gridCols`,n?`grid-cols-${Math.round(n)}`:null)),ariaLabel:`Grid columns`}):(0,$.jsxs)(`div`,{className:`row`,style:{gap:6},children:[(0,$.jsx)(v,{label:`Wrap`,children:(0,$.jsx)(`button`,{className:`icon-btn${r.wrap?` on`:``}`,onClick:()=>t(Ai(e,!r.wrap)),"aria-label":`Wrap`,children:(0,$.jsx)(jn,{size:14})})}),(0,$.jsx)(`span`,{className:`faint`,children:`Wrap`})]})]}),i&&(0,$.jsx)(`div`,{className:`align-grid${r.direction===`col`?` col`:``}`,role:`group`,"aria-label":`Alignment`,children:[0,1,2].map(n=>[0,1,2].map(i=>(0,$.jsx)(`button`,{className:d.col===i&&d.row===n?`on`:``,"aria-label":`Align ${n}-${i}`,onClick:()=>{let a=Mi(r.direction,i,n);t(ji(e,a.items,a.justify))}},`${n}${i}`)))})]}),(0,$.jsxs)(`div`,{className:`sub-label`,children:[(0,$.jsx)(`span`,{children:`Padding`}),(0,$.jsx)(v,{label:s?`Same padding per axis`:`Padding per side`,children:(0,$.jsx)(`button`,{className:`icon-btn sm${s?` on`:``}`,onClick:()=>c(!s),"aria-label":`Padding per side`,children:(0,$.jsx)(dn,{size:12})})})]}),s?(0,$.jsx)(`div`,{className:`grid4`,children:[`t`,`r`,`b`,`l`].map(n=>(0,$.jsx)(m,{prefix:{t:`T`,r:`R`,b:`B`,l:`L`}[n],value:o[n],placeholder:`0`,min:0,onCommit:r=>t(Ki(e,{...o,[n]:r})),ariaLabel:`Padding ${n}`},n))}):(0,$.jsxs)(`div`,{className:`grid2`,children:[(0,$.jsx)(m,{prefix:`↔`,value:o.l===o.r?o.l:null,placeholder:o.l===o.r?`0`:`Mixed`,min:0,onCommit:n=>t(Ki(e,{...o,l:n,r:n})),ariaLabel:`Horizontal padding`}),(0,$.jsx)(m,{prefix:`↕`,value:o.t===o.b?o.t:null,placeholder:o.t===o.b?`0`:`Mixed`,min:0,onCommit:n=>t(Ki(e,{...o,t:n,b:n})),ariaLabel:`Vertical padding`})]}),!n&&(0,$.jsxs)(`label`,{className:`check-row`,children:[(0,$.jsx)(`input`,{type:`checkbox`,checked:l===`overflow-hidden`||l===`overflow-clip`,onChange:n=>t(X(e,`overflow`,n.target.checked?`overflow-hidden`:null))}),`Clip content`]})]})}function Us({className:e,write:t,tokens:n}){let r=Z(Y(e,`opacity`),`opacity-`),i=r===null?100:Number(r.replace(/[[\]%]/g,``))||0,a=Y(e,`radius`),o=a===null?``:a===`rounded`?`sm`:a.replace(/^rounded-/,``),s=/^\[(\d+(?:\.\d+)?)px\]$/.exec(o),c=n?.radius??Object.keys(Ji).filter(e=>e!==`none`);return(0,$.jsxs)(S,{title:`Appearance`,children:[(0,$.jsxs)(`div`,{className:`prop`,children:[(0,$.jsx)(`label`,{children:`Opacity`}),(0,$.jsx)(g,{value:i,min:0,max:100,onCommit:n=>t(X(e,`opacity`,n>=100?null:`opacity-${Math.round(n)}`)),ariaLabel:`Opacity`}),(0,$.jsx)(`span`,{})]}),(0,$.jsxs)(`div`,{className:`prop`,children:[(0,$.jsx)(`label`,{children:`Radius`}),(0,$.jsx)(h,{value:s?`custom`:o,placeholder:`None`,options:[{value:``,label:`None`},...c.map(e=>({value:e,label:e.toUpperCase(),hint:Ji[e]===void 0?void 0:`${Ji[e]}px`})),{value:`full`,label:`Full`,hint:`pill`},{value:`custom`,label:`Custom…`}],onChange:n=>t(X(e,`radius`,n===``?null:n===`custom`?`rounded-[10px]`:`rounded-${n}`)),ariaLabel:`Corner radius`}),(0,$.jsx)(`span`,{})]}),s&&(0,$.jsxs)(`div`,{className:`prop`,children:[(0,$.jsx)(`label`,{}),(0,$.jsx)(m,{value:Number(s[1]),min:0,onCommit:n=>t(X(e,`radius`,n===null?null:`rounded-[${n}px]`)),ariaLabel:`Radius in px`}),(0,$.jsx)(`span`,{})]})]})}function Ws({className:e,write:t,tokens:n}){let r=Z(Y(e,`bg`),`bg-`);return(0,$.jsx)(S,{title:`Fill`,actions:(0,$.jsx)(`button`,{className:`icon-btn sm`,"aria-label":r?`Remove fill`:`Add fill`,onClick:()=>t(X(e,`bg`,r?null:`bg-${n?.colors.find(e=>/surface|background|muted/.test(e.name))?.name??`white`}`)),children:r?(0,$.jsx)(At,{size:13}):(0,$.jsx)(p,{size:13})}),children:r?(0,$.jsx)(Ys,{value:r,tokens:n,onChange:n=>t(X(e,`bg`,n?`bg-${n}`:null)),ariaLabel:`Fill color`}):(0,$.jsx)(`p`,{className:`faint`,style:{margin:0},children:`No fill.`})})}function Gs({className:e,write:t,tokens:n}){let r=Y(e,`borderWidth`),i=Z(Y(e,`borderColor`),`border-`),a=r!==null||i!==null,o=r===null||r===`border`?1:Number(r.replace(/^border-/,``).replace(/[[\]px]/g,``));return(0,$.jsx)(S,{title:`Stroke`,actions:(0,$.jsx)(`button`,{className:`icon-btn sm`,"aria-label":a?`Remove stroke`:`Add stroke`,onClick:()=>t(a?X(X(e,`borderWidth`,null),`borderColor`,null):X(X(e,`borderWidth`,`border`),`borderColor`,`border-${n?.colors.find(e=>e.name===`border`)?.name??`black/10`}`)),children:a?(0,$.jsx)(At,{size:13}):(0,$.jsx)(p,{size:13})}),children:a?(0,$.jsxs)(`div`,{className:`stroke-row`,children:[(0,$.jsx)(Ys,{value:i,tokens:n,placeholder:`Current color`,onChange:n=>t(X(e,`borderColor`,n?`border-${n}`:null)),ariaLabel:`Stroke color`}),(0,$.jsx)(h,{value:String(o),options:[`0`,`1`,`2`,`4`,`8`].map(e=>({value:e,label:`${e}px`})),onChange:n=>t(X(e,`borderWidth`,n===`1`?`border`:`border-${n}`)),ariaLabel:`Stroke width`})]}):(0,$.jsx)(`p`,{className:`faint`,style:{margin:0},children:`No stroke.`})})}function Ks({className:e,write:t,tokens:n}){let r=Y(e,`shadow`),i=Y(e,`blur`),a=Y(e,`backdropBlur`),o=r||i||a,s=(e,t)=>e===null?``:e===t?`default`:e.slice(t.length+1),c=[{value:``,label:`None`},...[`xs`,`sm`,`md`,`lg`,`xl`,`2xl`,`3xl`].map(e=>({value:e,label:e.toUpperCase()}))];return(0,$.jsx)(S,{title:`Effects`,actions:(0,$.jsx)(`button`,{className:`icon-btn sm`,"aria-label":o?`Remove effects`:`Add shadow`,onClick:()=>t(o?X(X(X(e,`shadow`,null),`blur`,null),`backdropBlur`,null):X(e,`shadow`,`shadow-md`)),children:o?(0,$.jsx)(At,{size:13}):(0,$.jsx)(p,{size:13})}),children:o?(0,$.jsxs)($.Fragment,{children:[(0,$.jsxs)(`div`,{className:`prop`,children:[(0,$.jsx)(`label`,{children:`Shadow`}),(0,$.jsx)(h,{value:s(r,`shadow`),options:[{value:``,label:`None`},...(n?.shadows??[`2xs`,`xs`,`sm`,`md`,`lg`,`xl`,`2xl`]).map(e=>({value:e,label:e.toUpperCase()})),{value:`inner`,label:`Inner`}],onChange:n=>t(X(e,`shadow`,n?`shadow-${n}`:null)),ariaLabel:`Shadow`}),(0,$.jsx)(`span`,{})]}),(0,$.jsxs)(`div`,{className:`prop`,children:[(0,$.jsx)(`label`,{children:`Layer blur`}),(0,$.jsx)(h,{value:s(i,`blur`),options:c,onChange:n=>t(X(e,`blur`,n?`blur-${n}`:null)),ariaLabel:`Layer blur`}),(0,$.jsx)(`span`,{})]}),(0,$.jsxs)(`div`,{className:`prop`,children:[(0,$.jsx)(`label`,{children:`Backdrop`}),(0,$.jsx)(h,{value:s(a,`backdrop-blur`),options:c,onChange:n=>t(X(e,`backdropBlur`,n?`backdrop-blur-${n}`:null)),ariaLabel:`Background blur`}),(0,$.jsx)(`span`,{})]})]}):(0,$.jsx)(`p`,{className:`faint`,style:{margin:0},children:`No effects.`})})}function qs({className:e,write:t,tokens:n}){let r=Z(Y(e,`textSize`),`text-`),i=Z(Y(e,`weight`),`font-`),a=Z(Y(e,`leading`),`leading-`),o=Z(Y(e,`tracking`),`tracking-`),s=Z(Y(e,`textAlign`),`text-`),c=Z(Y(e,`textColor`),`text-`),l=n?.textSizes??Object.keys(qi);return(0,$.jsxs)(S,{title:`Text`,children:[(0,$.jsxs)(`div`,{className:`grid2`,children:[(0,$.jsx)(h,{value:r??``,placeholder:`Size`,options:[{value:``,label:`Inherit`},...l.map(e=>({value:e,label:e,hint:qi[e]?`${qi[e]}px`:void 0}))],onChange:n=>t(X(e,`textSize`,n?`text-${n}`:null)),ariaLabel:`Font size`}),(0,$.jsx)(h,{value:i??``,placeholder:`Weight`,options:[{value:``,label:`Inherit`},...Yi.map(e=>({value:e,label:Bs(e),hint:String(Xi[e])}))],onChange:n=>t(X(e,`weight`,n?`font-${n}`:null)),ariaLabel:`Font weight`})]}),(0,$.jsxs)(`div`,{className:`grid2`,children:[(0,$.jsx)(h,{value:a??``,placeholder:`Line height`,options:[{value:``,label:`Auto`},...Zi.map(e=>({value:e,label:Bs(e)}))],onChange:n=>t(X(e,`leading`,n?`leading-${n}`:null)),ariaLabel:`Line height`}),(0,$.jsx)(h,{value:o??``,placeholder:`Letter spacing`,options:[{value:``,label:`Normal`},...Qi.filter(e=>e!==`normal`).map(e=>({value:e,label:Bs(e)}))],onChange:n=>t(X(e,`tracking`,n?`tracking-${n}`:null)),ariaLabel:`Letter spacing`})]}),(0,$.jsxs)(`div`,{className:`grid2`,children:[(0,$.jsx)(A,{value:s??`inherit`,options:[{value:`left`,icon:(0,$.jsx)(Dn,{size:13}),title:`Left`},{value:`center`,icon:(0,$.jsx)(Cn,{size:13}),title:`Center`},{value:`right`,icon:(0,$.jsx)(Tn,{size:13}),title:`Right`}],onChange:n=>t(X(e,`textAlign`,n===s?null:`text-${n}`))}),(0,$.jsx)(Ys,{value:c,tokens:n,placeholder:`Inherit`,onChange:n=>t(X(e,`textColor`,n?`text-${n}`:null)),ariaLabel:`Text color`})]})]})}function Js(e,t){if(!e)return null;let[n,r]=e.split(`/`),i=null;return i=/^\[.+\]$/.test(n)?n.slice(1,-1).replace(/_/g,` `):n===`white`?`#fff`:n===`black`?`#000`:n===`transparent`?`transparent`:t?.colors.find(e=>e.name===n)?.light??null,i?r?`color-mix(in srgb, ${i} ${r.replace(/[[\]%]/g,``)}%, transparent)`:i:null}function Ys({value:e,tokens:t,onChange:n,placeholder:r,ariaLabel:i}){let[a,o]=(0,B.useState)(!1),[s,c]=(0,B.useState)(null),l=(0,B.useRef)(null),u=(0,B.useRef)(null),[d,f]=(e??``).split(`/`),[p,m]=(0,B.useState)(/^\[#/.test(d)?d.slice(1,-1):``);(0,B.useEffect)(()=>m(/^\[#/.test(d)?d.slice(1,-1):``),[d]),(0,B.useEffect)(()=>{if(!a)return;let e=e=>{!u.current?.contains(e.target)&&!l.current?.contains(e.target)&&o(!1)},t=e=>{e.key===`Escape`&&(e.stopPropagation(),o(!1))};return window.addEventListener(`pointerdown`,e,!0),window.addEventListener(`keydown`,t,!0),()=>{window.removeEventListener(`pointerdown`,e,!0),window.removeEventListener(`keydown`,t,!0)}},[a]);let h=(e,t=f)=>n(t&&t!==`100`?`${e}/${t}`:e),_=e?/^\[/.test(d)?d.slice(1,-1):d:r??`None`,y=Js(e,t);return(0,$.jsxs)($.Fragment,{children:[(0,$.jsxs)(`button`,{ref:l,type:`button`,className:`color-trigger`,"aria-label":i,onClick:()=>{let e=l.current.getBoundingClientRect();c({left:Math.min(e.left,window.innerWidth-268),top:Math.min(e.bottom+4,window.innerHeight-330)}),o(!a)},children:[(0,$.jsx)(`span`,{className:`swatch`,style:{background:y??void 0},children:!y&&e&&(0,$.jsx)(_n,{size:10,className:`faint`})}),(0,$.jsx)(`span`,{className:`label${e?``:` placeholder`}`,children:_}),f&&(0,$.jsxs)(`span`,{className:`faint`,children:[f,`%`]})]}),a&&s&&(0,ea.createPortal)((0,$.jsxs)(`div`,{ref:u,className:`color-pop`,style:{left:s.left,top:s.top},onKeyDown:e=>e.stopPropagation(),children:[(0,$.jsx)(`div`,{className:`pop-title`,children:`Design tokens`}),(0,$.jsx)(`div`,{className:`token-grid`,children:[...t?.colors??[],{name:`white`,light:`#fff`,dark:null},{name:`black`,light:`#000`,dark:null}].map(e=>(0,$.jsx)(v,{label:e.name,children:(0,$.jsx)(`button`,{className:`token-swatch${d===e.name?` on`:``}`,style:{background:e.light},"aria-label":e.name,onClick:()=>h(e.name)})},e.name))}),(0,$.jsx)(`div`,{className:`pop-title`,children:`Custom`}),(0,$.jsxs)(`div`,{className:`row`,style:{gap:6},children:[(0,$.jsx)(`label`,{className:`swatch big`,style:{background:p||`#ffffff`},children:(0,$.jsx)(`input`,{type:`color`,value:/^#[0-9a-f]{6}$/i.test(p)?p:`#ffffff`,onChange:e=>m(e.target.value),onBlur:()=>p&&h(`[${p}]`)})}),(0,$.jsx)(`div`,{className:`field`,style:{flex:1},children:(0,$.jsx)(`input`,{className:`mono-input`,value:p,placeholder:`#hex`,onChange:e=>m(e.target.value),onKeyDown:e=>e.key===`Enter`&&/^#[0-9a-f]{3,8}$/i.test(p)&&h(`[${p}]`)})})]}),(0,$.jsxs)(`div`,{className:`row`,style:{marginTop:8,gap:6},children:[(0,$.jsx)(`span`,{className:`muted`,style:{width:52},children:`Opacity`}),(0,$.jsx)(`div`,{style:{flex:1},children:(0,$.jsx)(g,{value:Number(f??100),min:0,max:100,onCommit:t=>e&&h(d,String(Math.round(t))),ariaLabel:`Color opacity`})})]}),e&&(0,$.jsx)(`button`,{className:`btn block`,style:{marginTop:8},onClick:()=>(n(null),o(!1)),children:`Remove`})]}),document.body)]})}var Xs=[`Look at my selection in Truecanvas and make it denser.`,`Create a dark-theme copy of the Chat frame and check it with a screenshot.`,`Show every status of SessionRow in a new variants frame.`,`Build an empty state for the sessions sidebar using our components.`,`Add a soft mesh gradient shader behind the Settings frame.`,`Make an iPhone 16 version of the Chat screen.`];function Zs(){let e=U(e=>e.agents),t=U(e=>e.mcpUrl),n=U(e=>e.feed),r=U(e=>e.history),i=U(e=>e.selection),a=U(e=>e.index),[o,s]=(0,B.useState)(`claude`),c={claude:`claude mcp add --scope user --transport http truecanvas ${t}`,cursor:JSON.stringify({mcpServers:{truecanvas:{url:t}}},null,2),codex:`[mcp_servers.truecanvas]\nurl = "${t}"`,url:t},l={claude:`Run once. Works in every project.`,cursor:`Add to .cursor/mcp.json`,codex:`Add to ~/.codex/config.toml`,url:`Streamable HTTP endpoint`},u=i.map(e=>a.get(e)?.node).filter(Boolean);return(0,$.jsxs)($.Fragment,{children:[(0,$.jsx)(S,{title:e.length?`Connected`:`Connect an agent`,children:e.length?(0,$.jsxs)(`div`,{children:[e.map(e=>(0,$.jsxs)(`div`,{className:`agent-row`,children:[(0,$.jsx)(`span`,{className:`live-dot`}),(0,$.jsx)(`span`,{style:{fontWeight:500},children:or(e.name)}),(0,$.jsxs)(`span`,{className:`faint`,style:{marginLeft:`auto`},children:[`active `,(0,$.jsx)(ec,{at:e.lastSeen})]})]},e.session)),(0,$.jsx)(`p`,{className:`faint`,style:{margin:`8px 0 0`},children:`Agents edit the canvas file over MCP. Every change lands below and can be undone.`})]}):(0,$.jsxs)($.Fragment,{children:[(0,$.jsx)(`p`,{className:`muted`,style:{margin:`-2px 0 10px`,lineHeight:`17px`},children:`Truecanvas has no built-in AI. Bring your own agent: it gets tools to read your components, edit frames and take screenshots.`}),(0,$.jsx)(A,{value:o,options:[{value:`claude`,label:`Claude`},{value:`cursor`,label:`Cursor`},{value:`codex`,label:`Codex`},{value:`url`,label:`URL`}],onChange:s}),(0,$.jsxs)(`div`,{className:`code-block`,style:{marginTop:8},children:[c[o],(0,$.jsx)(O,{text:c[o]})]}),(0,$.jsx)(`p`,{className:`faint`,style:{margin:`6px 0 0`},children:l[o]})]})}),(0,$.jsxs)(S,{title:`Shared selection`,children:[u.length?(0,$.jsx)(`div`,{className:`row`,style:{flexWrap:`wrap`,gap:4},children:u.map(e=>(0,$.jsx)(`span`,{className:`chip${e.kind===`component`?` component`:``}`,children:W(e)},e.id))}):(0,$.jsx)(`p`,{className:`faint`,style:{margin:0},children:`Select something and agents can read it with get_selection.`}),(0,$.jsx)(`div`,{style:{marginTop:10,display:`grid`,gap:4},children:Xs.map(e=>(0,$.jsx)(Qs,{text:e},e))})]}),(0,$.jsxs)(`div`,{className:`section`,style:{padding:`12px 0 0`},children:[(0,$.jsxs)(`div`,{className:`section-title`,style:{padding:`0 12px`},children:[(0,$.jsx)(`span`,{children:`Activity`}),(0,$.jsxs)(`span`,{className:`actions`,style:{marginRight:6},children:[(0,$.jsx)(v,{label:`Undo`,kbd:`⌘Z`,children:(0,$.jsx)(`button`,{className:`icon-btn sm`,disabled:!r.undo,onClick:()=>void U.getState().undo(),"aria-label":`Undo`,children:(0,$.jsx)(Ln,{size:13})})}),(0,$.jsx)(v,{label:`Redo`,kbd:`⇧⌘Z`,children:(0,$.jsx)(`button`,{className:`icon-btn sm`,disabled:!r.redo,onClick:()=>void U.getState().redo(),"aria-label":`Redo`,children:(0,$.jsx)(nn,{size:13})})})]})]}),(0,$.jsx)($s,{entries:n})]})]})}function Qs({text:e}){let[t,n]=(0,B.useState)(!1);return(0,$.jsxs)(`button`,{className:`btn`,style:{justifyContent:`flex-start`,height:`auto`,padding:`6px 8px`,whiteSpace:`normal`,textAlign:`left`,color:`var(--text-2)`,lineHeight:`16px`},onClick:async()=>{await navigator.clipboard.writeText(e),n(!0),setTimeout(()=>n(!1),1200)},children:[(0,$.jsx)(hn,{size:13,style:{flex:`none`,color:`var(--agent)`}}),(0,$.jsx)(`span`,{children:t?`Copied. Paste it to your agent.`:e})]})}function $s({entries:e}){let t=U(e=>e.canvas),n=[...e].reverse().slice(0,60);return n.length?(0,$.jsx)(`div`,{className:`feed`,children:n.map((e,n)=>{let r=e=>e.ids.length?ii(e.canvas,e.ids,{zoom:!1}):e.canvas!==t&&U.setState({canvas:e.canvas}),i=e.actor.kind===`user`?`You`:e.actor.kind===`agent`?or(e.actor.name):`Code editor`;return(0,$.jsxs)(`div`,{className:`feed-item${n===0&&Date.now()-e.at<2e3?` new`:``}`,role:`button`,tabIndex:0,onClick:()=>r(e),onKeyDown:t=>{(t.key===`Enter`||t.key===` `)&&(t.preventDefault(),r(e))},children:[(0,$.jsx)(`span`,{className:`avatar ${e.actor.kind}`,children:e.actor.kind===`agent`?(0,$.jsx)(se,{size:11}):e.actor.kind===`file`?(0,$.jsx)(xe,{size:11}):`Y`}),(0,$.jsxs)(`div`,{style:{minWidth:0},children:[(0,$.jsxs)(`div`,{children:[(0,$.jsx)(`span`,{className:`who`,children:i}),` `,(0,$.jsx)(`span`,{className:`muted`,children:e.label.replace(/^./,e=>e.toLowerCase())})]}),(0,$.jsxs)(`div`,{className:`when`,children:[(0,$.jsx)(ec,{at:e.at}),e.canvas!==t&&` · ${e.canvas}`]})]})]},e.id)})}):(0,$.jsx)(`div`,{className:`empty`,children:`No changes yet. Edits from you, your agent and your code editor show up here.`})}function ec({at:e}){return D(),(0,$.jsx)($.Fragment,{children:w(e,`long`)})}var tc=[{value:`invited`,label:`Invited people`},{value:`password`,label:`Anyone with the password`},{value:`public`,label:`Anyone with the link`}],nc={invited:`Invited people and your studio`,password:`Anyone with the password`,public:`Anyone with the link`},rc={invited:zn,password:N,public:et},ic=`truecanvas.share.realSite`;function ac(){U.setState({shareDialog:!0})}function oc(){let e=U(e=>e.shareDialog),t=U(e=>e.canvas);return!e||!t?null:(0,$.jsx)(cc,{canvas:t})}function sc(){try{return localStorage.getItem(ic)!==`0`}catch{return!0}}function cc({canvas:e}){let[t,n]=(0,B.useState)(void 0),[r,i]=(0,B.useState)(!1),[a,o]=(0,B.useState)(!1),[s,c]=(0,B.useState)(sc),[u,d]=(0,B.useState)(void 0),[f,p]=(0,B.useState)(``),[m,g]=(0,B.useState)(!1),[_,v]=(0,B.useState)(``),[b,x]=(0,B.useState)(null),[S,C]=(0,B.useState)(``),[T,D]=(0,B.useState)(!1),[O,k]=(0,B.useState)(null),[A,j]=(0,B.useState)(null),M=()=>U.setState({shareDialog:!1});(0,B.useEffect)(()=>{H.shareStatus().then(t=>{n(t.site),i(t.features?.includes(`invites`)??!1),o(!!t.realSite),t.site?H.shareLink(e).then(e=>d(e.link)).catch(()=>d(null)):d(null)}).catch(()=>n(null))},[e]),(0,B.useEffect)(()=>{if(!T)return;let e=setInterval(()=>{H.shareProgress().then(e=>e.step&&k(e.step)).catch(()=>{})},600);return()=>clearInterval(e)},[T]);let N=u?.access??(u?.password?`password`:u?`public`:`invited`),P=b??N,F=r?P===`password`&&!(u?.password&&N===`password`):m,ee=S.split(/[\s,;]+/).map(e=>e.trim()).filter(Boolean),I=async(t=!1)=>{D(!0),k(null);try{let n=await H.share({canvas:e,local:t,realSite:a&&s,...f.trim()?{title:f.trim()}:{},..._&&(F||P===`password`)?{password:_}:{},...!t&&r&&b&&b!==N?{access:b}:{},...!t&&r&&ee.length?{invite:ee}:{}});j(n);let i=n.published?.url;i&&navigator.clipboard?.writeText(i).catch(()=>{})}catch(e){U.getState().toast(e.message)}finally{D(!1)}},te=e=>{c(e);try{localStorage.setItem(ic,e?`1`:`0`)}catch{}};if(T)return(0,$.jsx)(y,{title:`Sharing ${e}`,busy:!0,onClose:M,children:(0,$.jsx)(fc,{step:O,realSite:a&&s})});if(A){let e=A.manifest,t=A.published,n=t?.url??A.preview;return(0,$.jsxs)(y,{title:t?`Version ${t.versions} is live`:`Preview ready`,width:460,onClose:M,children:[(0,$.jsx)(`p`,{className:`muted`,children:t?`${e.frames.length} frame${e.frames.length===1?``:`s`}${t.live?`, with the real site`:``}. The link is copied: send it to your client.`:`A local preview of what clients would see. Connect a review site to send links.`}),(0,$.jsx)(uc,{url:n,copiedAtFirst:!!t}),t?.access&&(0,$.jsxs)(`p`,{className:`faint share-note`,children:[(0,$.jsx)(lc,{access:t.access}),` Who can open it: `,nc[t.access].toLowerCase()]}),t?.invited.map(e=>e.error?(0,$.jsxs)(`p`,{className:`share-warn`,children:[`Couldn't email `,e.email,`: `,e.error]},e.email):(0,$.jsxs)(`p`,{className:`faint share-note`,children:[(0,$.jsx)(Et,{size:11}),` Invited `,e.email,`: they got an email to open it`]},e.email)),A.realSiteError&&(0,$.jsxs)(`details`,{className:`share-warn-box`,children:[(0,$.jsx)(`summary`,{children:`The real site couldn't be built, so this version has frozen frames only.`}),(0,$.jsx)(`pre`,{className:`mono`,children:A.realSiteError})]}),e.external.length>0&&(0,$.jsxs)(`p`,{className:`share-warn`,children:[`While rendering, the app called `,e.external.join(`, `),`. Whatever it showed is in the snapshot: use sample data for clients.`]}),e.missing.length>0&&(0,$.jsxs)(`p`,{className:`share-warn`,children:[e.missing.length,` image or font file`,e.missing.length===1?``:`s`,` couldn't be fetched.`]}),(t?.skipped.length??0)>0&&(0,$.jsxs)(`p`,{className:`share-warn`,children:[`Left out, over the 4.4 MB upload limit: `,t.skipped.join(`, `)]}),(0,$.jsx)(`div`,{className:`modal-actions`,children:(0,$.jsx)(`button`,{className:`btn primary`,onClick:M,children:`Done`})})]})}if(t===void 0||t&&u===void 0)return(0,$.jsx)(y,{title:`Share ${e}`,width:460,onClose:M,children:(0,$.jsx)(`div`,{className:`share-busy`,children:(0,$.jsx)(l,{size:16,className:`spin-working`})})});if(t===null)return(0,$.jsxs)(y,{title:`Share ${e}`,width:460,onClose:M,children:[(0,$.jsxs)(`p`,{className:`muted`,children:[`Client links live on your own review site. Deploy it once (`,(0,$.jsx)(`span`,{className:`mono`,children:`packages/review-worker`}),`, free on Cloudflare), then connect it:`]}),(0,$.jsx)(`div`,{className:`share-cmd mono`,children:`npx truecanvas share setup`}),(0,$.jsxs)(`div`,{className:`modal-actions`,children:[(0,$.jsx)(`button`,{className:`btn outline`,onClick:M,children:`Close`}),(0,$.jsx)(`button`,{className:`btn primary`,onClick:()=>void I(!0),children:`Preview locally`})]})]});let L=t.replace(/^https?:\/\//,``);return(0,$.jsxs)(y,{title:`Share ${e}`,width:460,onClose:M,children:[u?(0,$.jsxs)(`div`,{className:`share-current`,children:[(0,$.jsx)(uc,{url:u.url}),(0,$.jsxs)(`p`,{className:`faint share-note`,children:[(0,$.jsx)(lc,{access:N}),` `,nc[N],` · `,u.versions,` version`,u.versions===1?``:`s`,u.updatedAt?`, latest ${w(u.updatedAt,`long`)}`:``]})]}):(0,$.jsxs)(`p`,{className:`muted`,children:[`This page has no link yet. Publishing creates one on `,(0,$.jsx)(`span`,{className:`nowrap`,children:L}),`.`]}),a&&(0,$.jsxs)(`label`,{className:`share-option`,children:[(0,$.jsx)(Mt,{size:15,className:`share-option-icon`}),(0,$.jsxs)(`span`,{children:[(0,$.jsx)(`b`,{children:`Real site`}),(0,$.jsx)(`span`,{className:`faint`,children:`Clients scroll and click your actual pages, animations included. Builds your app first (a few seconds to a minute).`})]}),(0,$.jsx)(E,{on:s,onChange:te,ariaLabel:`Include the real site`})]}),(0,$.jsxs)(`div`,{className:`share-fields`,children:[r?(0,$.jsxs)($.Fragment,{children:[(0,$.jsxs)(`div`,{children:[(0,$.jsxs)(`label`,{className:`share-label`,htmlFor:`share-invite`,children:[`Invite by email `,(0,$.jsx)(`span`,{className:`faint`,children:`(optional)`})]}),(0,$.jsx)(`div`,{className:`field`,children:(0,$.jsx)(`input`,{id:`share-invite`,autoFocus:!0,value:S,onChange:e=>C(e.target.value),placeholder:`client@company.com, another@company.com`,autoComplete:`off`})})]}),(0,$.jsxs)(`div`,{children:[(0,$.jsx)(`span`,{className:`share-label`,children:`Who can open it`}),(0,$.jsx)(h,{value:P,options:tc,onChange:e=>x(e),ariaLabel:`Who can open it`})]})]}):(0,$.jsxs)(`label`,{className:`share-check`,children:[(0,$.jsx)(`input`,{type:`checkbox`,checked:m,onChange:e=>g(e.target.checked)}),` Require a password`]}),(F||r&&P===`password`)&&(0,$.jsx)(`div`,{className:`field`,children:(0,$.jsx)(`input`,{type:`text`,value:_,onChange:e=>v(e.target.value),placeholder:F?`Password to give your client`:`New password (optional: keeps the current one)`,"aria-label":`Password`,autoComplete:`off`})}),(0,$.jsxs)(`div`,{children:[(0,$.jsxs)(`label`,{className:`share-label`,htmlFor:`share-title`,children:[`Title clients see `,(0,$.jsx)(`span`,{className:`faint`,children:`(optional)`})]}),(0,$.jsx)(`div`,{className:`field`,children:(0,$.jsx)(`input`,{id:`share-title`,value:f,onChange:e=>p(e.target.value),placeholder:u?.title??e})})]})]}),(0,$.jsxs)(`div`,{className:`modal-actions share-actions`,children:[(0,$.jsx)(`button`,{className:`btn`,onClick:()=>void I(!0),children:`Preview locally`}),(0,$.jsx)(`button`,{className:`btn primary`,disabled:F&&!_,onClick:()=>void I(),children:u?`Publish version ${u.versions+1}`:`Create link`})]})]})}function lc({access:e}){let t=rc[e];return(0,$.jsx)(t,{size:11})}function uc({url:e,copiedAtFirst:t=!1}){let[n,r]=(0,B.useState)(t),i=(0,B.useRef)(void 0);return(0,B.useEffect)(()=>(t&&(i.current=setTimeout(()=>r(!1),2e3)),()=>clearTimeout(i.current)),[t]),(0,$.jsxs)(`div`,{className:`share-link`,children:[(0,$.jsx)(`div`,{className:`field`,children:(0,$.jsx)(`input`,{readOnly:!0,value:e,"aria-label":`Link`,onFocus:e=>e.currentTarget.select()})}),(0,$.jsxs)(`button`,{className:`btn outline`,onClick:()=>{navigator.clipboard.writeText(e),r(!0),clearTimeout(i.current),i.current=setTimeout(()=>r(!1),1400)},"aria-label":`Copy link`,children:[n?(0,$.jsx)(x,{size:13}):(0,$.jsx)(a,{size:13}),` `,n?`Copied`:`Copy`]}),(0,$.jsx)(`a`,{className:`btn outline`,href:e,target:`_blank`,rel:`noreferrer`,"aria-label":`Open link`,title:`Open link`,children:(0,$.jsx)(Me,{size:13})})]})}var dc=[`Rendering every frame through your app`,`Building the real site`,`Uploading`];function fc({step:e,realSite:t}){let n=t?dc:dc.filter(e=>e!==`Building the real site`),r=e?n.findIndex(t=>e.startsWith(t)):0,[i,a]=(0,B.useState)(0);return(0,B.useEffect)(()=>{a(0);let e=setInterval(()=>a(e=>e+1),1e3);return()=>clearInterval(e)},[r]),(0,$.jsx)(`div`,{className:`share-steps`,role:`status`,"aria-live":`polite`,children:n.map((t,n)=>(0,$.jsxs)(`div`,{className:`share-step${n<r?` done`:n===r?` now`:``}`,children:[n<r?(0,$.jsx)(x,{size:13}):n===r?(0,$.jsx)(l,{size:13,className:`spin-working`}):(0,$.jsx)(`span`,{className:`share-step-dot`}),(0,$.jsx)(`span`,{children:n===r&&e?e:t}),n===r&&i>2&&(0,$.jsxs)(`span`,{className:`faint share-step-time`,children:[i,`s`]})]},t))})}function pc(){let e=U(e=>e.rightTab),t=U(e=>e.agents),n=mc(),r=U(e=>e.threads.filter(e=>!e.resolved).length);return(0,$.jsxs)(`aside`,{className:`panel right`,children:[(0,$.jsxs)(`div`,{className:`panel-actions`,children:[(0,$.jsx)(Uo,{}),(0,$.jsx)(`button`,{className:`btn primary share-btn`,onClick:ac,title:`Share a link with clients`,children:`Share`})]}),(0,$.jsx)(`div`,{className:`panel-head`,style:{paddingLeft:10},children:(0,$.jsxs)(`div`,{className:`tabs`,role:`tablist`,style:{flex:1},children:[(0,$.jsx)(`button`,{role:`tab`,"aria-selected":e===`design`,className:`tab${e===`design`?` on`:``}`,onClick:()=>U.setState({rightTab:`design`}),children:`Design`}),(0,$.jsxs)(`button`,{role:`tab`,"aria-selected":e===`comments`,className:`tab${e===`comments`?` on`:``}`,onClick:()=>U.setState({rightTab:`comments`}),children:[`Comments`,r>0&&(0,$.jsx)(`span`,{className:`count neutral`,children:r})]}),(0,$.jsxs)(`button`,{role:`tab`,"aria-selected":e===`agent`,className:`tab${e===`agent`?` on`:``}`,onClick:()=>U.setState({rightTab:`agent`}),children:[t.length?(0,$.jsx)(`span`,{className:`live-dot`}):(0,$.jsx)(se,{size:13}),`Agent`,n>0&&e!==`agent`&&(0,$.jsx)(`span`,{className:`count`,children:n})]})]})}),(0,$.jsx)(`div`,{className:`scroll`,children:e===`design`?(0,$.jsx)(gc,{}):e===`comments`?(0,$.jsx)(Xa,{}):(0,$.jsx)(Zs,{})})]})}function mc(){let e=U(e=>e.feed),t=U(e=>e.rightTab),[n,r]=(0,B.useState)(0),i=e.length?e[e.length-1].id:0;return(0,B.useEffect)(()=>{t===`agent`&&r(i)},[t,i]),e.filter(e=>e.actor.kind===`agent`&&e.id>n).length}function hc(){let e=U(e=>e.canvas),t=U(e=>e.run),n=[[`Phone`,(0,$.jsx)(pn,{size:13},`p`),Un.filter(e=>e.kind===`phone`)],[`Tablet`,(0,$.jsx)(xn,{size:13},`t`),Un.filter(e=>e.kind===`tablet`)],[`Desktop`,(0,$.jsx)(mt,{size:13},`d`),Un.filter(e=>e.kind===`desktop`)]];return(0,$.jsxs)(S,{title:`Frame presets`,children:[(0,$.jsx)(`p`,{className:`faint`,style:{margin:`-4px 0 10px`},children:`Drag on the canvas for a custom size, or pick a device.`}),n.map(([n,r,i])=>(0,$.jsxs)(`div`,{style:{marginBottom:10},children:[(0,$.jsxs)(`div`,{className:`muted`,style:{display:`flex`,gap:6,alignItems:`center`,marginBottom:2},children:[r,` `,n]}),i.map(n=>(0,$.jsxs)(`button`,{className:`btn preset-row`,onClick:async()=>{await t({op:`create_frame`,canvas:e,device:n.id}),U.setState({tool:`select`})},children:[(0,$.jsx)(`span`,{children:n.name}),(0,$.jsxs)(`span`,{className:`faint`,children:[n.width,`×`,n.height]})]},n.id))]},n))]})}function gc(){let e=U(e=>e.tool),t=U(e=>e.selection),n=U(e=>e.index),r=t.map(e=>n.get(e)).filter(Boolean);if(e===`frame`)return(0,$.jsx)(hc,{});if(!r.length)return(0,$.jsx)(vc,{});if(r.length>1)return(0,$.jsx)(yc,{count:r.length});let i=r[0];return i.node.id===i.frame.id?(0,$.jsx)(bc,{frame:i.frame}):(0,$.jsx)(xc,{node:i.node},i.node.id)}var _c=e=>[e?{value:`inherit`,label:`Inherit`}:{value:`system`,icon:(0,$.jsx)(Pt,{size:13}),label:`System`},{value:`light`,icon:(0,$.jsx)(yn,{size:13}),title:`Light`,label:e?void 0:`Light`},{value:`dark`,icon:(0,$.jsx)(It,{size:13}),title:`Dark`,label:e?void 0:`Dark`}];function vc(){let e=U(e=>e.canvasTheme),t=U(e=>e.uiTheme),n=U(e=>e.deviceChrome),r=U(e=>e.doc);return(0,$.jsxs)($.Fragment,{children:[(0,$.jsxs)(S,{title:`Canvas`,children:[(0,$.jsx)(`div`,{className:`muted`,style:{marginBottom:6},children:`Frame theme`}),(0,$.jsx)(`div`,{children:(0,$.jsx)(`div`,{children:(0,$.jsx)(A,{value:e,options:_c(!1),onChange:e=>{U.setState({canvasTheme:e}),dr(`tc:canvasTheme`,e)}})})}),(0,$.jsx)(`div`,{className:`muted`,style:{margin:`12px 0 6px`},children:`Interface`}),(0,$.jsx)(`div`,{children:(0,$.jsx)(`div`,{children:(0,$.jsx)(A,{value:t,options:_c(!1),onChange:e=>{U.setState({uiTheme:e}),dr(`tc:uiTheme`,e),ri()}})})}),(0,$.jsxs)(`div`,{className:`row`,style:{marginTop:12,justifyContent:`space-between`},children:[(0,$.jsx)(`span`,{className:`muted`,children:`Device chrome on mobile frames`}),(0,$.jsx)(E,{on:n,onChange:e=>{U.setState({deviceChrome:e}),dr(`tc:deviceChrome`,e)},ariaLabel:`Device chrome`})]}),r&&(0,$.jsxs)(`div`,{className:`row muted`,style:{marginTop:10,justifyContent:`space-between`},children:[(0,$.jsxs)(`button`,{className:`link`,onClick:()=>Yr(),children:[(0,$.jsx)(Be,{size:13}),(0,$.jsx)(`span`,{children:r.file})]}),(0,$.jsxs)(`span`,{className:`faint`,children:[r.frames.length,` `,r.frames.length===1?`frame`:`frames`]})]})]}),(0,$.jsx)(S,{title:`Shortcuts`,children:(0,$.jsx)(`div`,{className:`shortcut-list`,children:jo.map(([e,t])=>(0,$.jsxs)(`div`,{children:[(0,$.jsx)(`span`,{children:e}),(0,$.jsx)(`span`,{className:`kbd`,children:t})]},e))})})]})}function yc({count:e}){return(0,$.jsxs)(S,{title:`${e} layers`,children:[(0,$.jsxs)(`div`,{className:`grid2`,children:[(0,$.jsxs)(`button`,{className:`btn outline`,onClick:Wr,children:[(0,$.jsx)(gt,{size:14}),` Auto layout`]}),(0,$.jsxs)(`button`,{className:`btn outline`,onClick:Hr,children:[(0,$.jsx)(Ee,{size:14}),` Duplicate`]})]}),(0,$.jsxs)(`div`,{className:`grid2`,children:[(0,$.jsxs)(`button`,{className:`btn outline`,onClick:()=>void Jr(),children:[(0,$.jsx)(xe,{size:14}),` Copy JSX`]}),(0,$.jsxs)(`button`,{className:`btn danger outline`,onClick:Ur,children:[(0,$.jsx)(Nn,{size:14}),` Delete`]})]})]})}function bc({frame:e}){let t=U(e=>e.canvas),n=U(e=>e.run),r=U(t=>t.frameHeights[e.frameName]),i=r=>n({op:`update_frame`,canvas:t,frame:e.frameName,...r});return(0,$.jsxs)($.Fragment,{children:[(0,$.jsxs)(S,{title:(0,$.jsxs)(`span`,{className:`node-head`,children:[(0,$.jsx)(We,{size:14,className:`faint`}),(0,$.jsx)(`span`,{className:`title`,children:`Frame`})]}),actions:(0,$.jsx)(v,{label:`Zoom to frame`,kbd:`⇧2`,children:(0,$.jsx)(`button`,{className:`icon-btn sm`,"aria-label":`Zoom to frame`,onClick:Rr,children:(0,$.jsx)(te,{size:13,style:{transform:`rotate(-45deg)`}})})}),children:[(0,$.jsx)(C,{value:e.frameName,onCommit:e=>e.trim()&&i({name:e.trim()}),ariaLabel:`Frame name`}),(0,$.jsxs)(`div`,{className:`grid2`,style:{marginTop:6,gridTemplateColumns:`1fr auto`},children:[(0,$.jsx)(h,{value:e.device??``,placeholder:`Custom size`,options:[{value:``,label:`Custom size`,icon:(0,$.jsx)(en,{size:13})},...[`phone`,`tablet`,`desktop`].flatMap(e=>[{value:`h-${e}`,label:e===`phone`?`Phones`:e===`tablet`?`Tablets`:`Desktop`,heading:!0},...Un.filter(t=>t.kind===e).map(t=>({value:t.id,label:t.name,hint:`${t.width}×${t.height}`,icon:e===`phone`?(0,$.jsx)(pn,{size:13}):e===`tablet`?(0,$.jsx)(xn,{size:13}):(0,$.jsx)(mt,{size:13})}))])],onChange:e=>i({device:e||null}),ariaLabel:`Device`}),(0,$.jsx)(v,{label:`Rotate`,children:(0,$.jsx)(`button`,{className:`icon-btn`,"aria-label":`Rotate frame`,onClick:()=>i({width:e.height??r??e.width,height:e.width}),children:(0,$.jsx)(an,{size:14})})})]}),(0,$.jsxs)(`div`,{className:`grid2`,style:{marginTop:6},children:[(0,$.jsx)(m,{prefix:`X`,value:e.x,onCommit:e=>e!==null&&i({x:e}),ariaLabel:`X`}),(0,$.jsx)(m,{prefix:`Y`,value:e.y,onCommit:e=>e!==null&&i({y:e}),ariaLabel:`Y`})]}),(0,$.jsxs)(`div`,{className:`grid2`,children:[(0,$.jsx)(m,{prefix:`W`,value:e.width,min:120,onCommit:e=>e!==null&&i({width:e}),ariaLabel:`Width`}),(0,$.jsx)(m,{prefix:`H`,value:e.height,placeholder:r?String(r):`Hug`,min:80,onCommit:e=>i({height:e}),ariaLabel:`Height`})]}),(0,$.jsx)(`div`,{style:{marginTop:6},children:(0,$.jsx)(A,{value:e.height===null?`hug`:`fixed`,options:[{value:`fixed`,label:`Fixed height`},{value:`hug`,label:`Hug contents`}],onChange:e=>i({height:e===`hug`?null:r??720})})})]}),(0,$.jsxs)(S,{title:`Theme`,children:[(0,$.jsx)(A,{value:e.theme??`inherit`,options:_c(!0),onChange:e=>i({theme:e===`inherit`?null:e})}),(0,$.jsx)(`p`,{className:`faint`,style:{margin:`8px 0 0`},children:e.theme?`Always rendered ${e.theme}.`:`Follows the canvas theme.`})]}),(0,$.jsx)(Ac,{parentId:e.id}),(0,$.jsx)(jc,{id:e.id})]})}function xc({node:e}){let t=U(e=>e.components),n=e.kind===`component`?t.find(t=>t.name===e.name):void 0,r=e.props.className,i=e.kind===`element`||!!n?.acceptsClassName||r!==void 0,a=e.kind===`component`,o=e.children.length>0&&e.children.every(e=>e.kind===`text`);return(0,$.jsxs)($.Fragment,{children:[(0,$.jsx)(S,{title:(0,$.jsxs)(`span`,{className:`node-head`,children:[e.kind===`component`?(0,$.jsx)(z,{size:14,style:{color:`var(--component)`}}):(0,$.jsx)(`span`,{className:`chip mono`,children:`<${e.name}>`}),e.kind===`component`&&(0,$.jsx)(`span`,{className:`title`,style:{color:`var(--component)`},children:W(e)})]}),actions:(0,$.jsx)($.Fragment,{children:(0,$.jsx)(v,{label:`Open in editor`,children:(0,$.jsx)(`button`,{className:`icon-btn sm`,onClick:()=>Yr(e.id),"aria-label":`Open in editor`,children:(0,$.jsx)(Me,{size:13})})})}),children:n?(0,$.jsxs)($.Fragment,{children:[n.description&&(0,$.jsx)(`p`,{className:`muted`,style:{margin:`-4px 0 8px`},children:n.description}),(0,$.jsxs)(`button`,{className:`link`,onClick:()=>rs(n.name),children:[(0,$.jsx)(Be,{size:13}),(0,$.jsx)(`span`,{children:n.file})]})]}):e.kind===`component`?(0,$.jsx)(`p`,{className:`faint`,style:{margin:0},children:`Not in the component catalog. Props are shown as written.`}):null}),e.kind===`component`&&(0,$.jsx)(wc,{node:e,spec:n}),e.kind===`element`&&(0,$.jsx)(Oc,{node:e}),(o||n?.acceptsChildren&&e.children.length===0)&&(0,$.jsx)(kc,{node:e}),(0,$.jsx)(Ps,{node:e}),i&&(0,$.jsx)(zs,{node:e,component:a}),e.kind===`element`&&(0,$.jsx)(Ac,{parentId:e.id}),(0,$.jsx)(jc,{id:e.id})]})}function Sc(e){if(e)return e.kind===`expression`?void 0:e.value}var Cc=(e,t)=>JSON.stringify(e)===JSON.stringify(t);function wc({node:e,spec:t}){let n=U(e=>e.canvas),r=U(e=>e.run),i=(t,i)=>r({op:`set_props`,canvas:n,id:e.id,props:{[t]:i}},{select:!1}),a=(t?.props??[]).filter(e=>e.name!==`className`&&e.name!==`children`),o=Object.keys(e.props).filter(e=>e!==`className`&&e!==`children`&&e!==`data-name`&&!a.some(t=>t.name===e));if(!a.length&&!o.length)return null;let s=t?.presets??[],c=s.find(t=>Object.entries(t.props).every(([t,n])=>Cc(Sc(e.props[t])??a.find(e=>e.name===t)?.default,n)));return(0,$.jsxs)(S,{title:`Props`,children:[s.length>0&&(0,$.jsxs)(`div`,{className:`prop`,style:{marginBottom:6},children:[(0,$.jsx)(`label`,{children:`Preset`}),(0,$.jsx)(h,{value:c?.name??``,placeholder:`Custom`,options:s.map(e=>({value:e.name,label:e.name})),onChange:t=>t&&r({op:`apply_preset`,canvas:n,id:e.id,preset:t},{select:!1}),ariaLabel:`Preset`}),(0,$.jsx)(`span`,{style:{width:22}})]}),a.filter(e=>!e.advanced).map(t=>(0,$.jsx)(Dc,{spec:t,value:e.props[t.name],onChange:e=>i(t.name,e)},t.name)),a.some(e=>e.advanced)&&(0,$.jsxs)(`details`,{className:`advanced`,open:a.some(t=>t.advanced&&e.props[t.name]!==void 0),children:[(0,$.jsx)(`summary`,{children:`Advanced`}),a.filter(e=>e.advanced).map(t=>(0,$.jsx)(Dc,{spec:t,value:e.props[t.name],onChange:e=>i(t.name,e)},t.name))]}),o.map(t=>(0,$.jsx)(Dc,{spec:{name:t,type:Tc(e.props[t]),optional:!0,typeText:``},value:e.props[t],onChange:e=>i(t,e)},t)),e.spreads>0&&(0,$.jsx)(`p`,{className:`faint`,style:{margin:`8px 0 0`},children:`Has spread props, so some values come from code.`})]})}function Tc(e){return e?e.kind===`array`?e.value.every(e=>typeof e==`string`&&/^#|^rgb|^hsl|^oklch/.test(e))?`colors`:`other`:e.kind===`boolean`?`boolean`:e.kind===`number`?`number`:e.kind===`string`?`string`:`other`:`string`}var Ec=e=>e.replace(/([a-z])([A-Z])/g,`$1 $2`).replace(/^./,e=>e.toUpperCase());function Dc({spec:e,value:t,onChange:n}){let r=t!==void 0,i=Sc(t),a=Ec(e.name),o=r?(0,$.jsx)(v,{label:`Reset to default`,children:(0,$.jsx)(`button`,{className:`icon-btn sm reset`,onClick:()=>n(null),"aria-label":`Reset ${e.name}`,children:(0,$.jsx)(sn,{size:12})})}):(0,$.jsx)(`span`,{style:{width:22}}),s;if(t?.kind===`expression`)s=(0,$.jsx)(v,{label:t.code,children:(0,$.jsx)(`div`,{className:`field readonly`,children:`{${t.code}}`})});else if(e.type===`boolean`){let t=i===!0||i===void 0&&e.default===!0;s=(0,$.jsx)(`div`,{className:`row`,style:{justifyContent:`flex-end`},children:(0,$.jsx)(E,{on:t,onChange:t=>n(e.optional&&t===(e.default??!1)?null:t),ariaLabel:a})})}else if(e.type===`enum`){let t=typeof i==`string`?i:typeof e.default==`string`?e.default:``;s=(0,$.jsx)(h,{value:t,placeholder:`Not set`,options:e.options.map(e=>({value:e,label:Ec(e)})),onChange:t=>n(t===e.default?null:t),ariaLabel:a})}else if(e.type===`number`&&e.min!==void 0&&e.max!==void 0){let t=typeof i==`number`?i:typeof e.default==`number`?e.default:e.min;s=(0,$.jsx)(g,{value:t,min:e.min,max:e.max,onCommit:t=>n(t===e.default?null:t),ariaLabel:a})}else if(e.type===`number`)s=(0,$.jsx)(m,{value:typeof i==`number`?i:null,placeholder:e.default===void 0?``:String(e.default),onCommit:e=>n(e),ariaLabel:a});else if(e.type===`color`)s=(0,$.jsx)(f,{value:typeof i==`string`?i:``,placeholder:typeof e.default==`string`?e.default:``,onCommit:t=>n(t===null||t===e.default?null:t),ariaLabel:a});else if(e.type===`colors`){let t=Array.isArray(i)?i:Array.isArray(e.default)?e.default:[`#ffffff`];s=(0,$.jsx)(T,{value:t,onCommit:t=>n(Cc(t,e.default)?null:t)})}else s=e.type===`string`?(0,$.jsx)(C,{value:typeof i==`string`?i:``,placeholder:e.default===void 0?``:String(e.default),onCommit:e=>n(e===``?null:e),ariaLabel:a}):(0,$.jsx)(`div`,{className:`field readonly`,title:e.typeText,children:e.type===`function`?`ƒ function`:e.typeText||`unknown`});return e.type===`colors`?(0,$.jsxs)(`div`,{className:`prop wide-control${r?` set`:``}`,title:e.description,children:[(0,$.jsx)(`label`,{children:a}),o,(0,$.jsx)(`div`,{style:{gridColumn:`1 / -1`},children:s})]}):(0,$.jsxs)(`div`,{className:`prop${r?` set`:``}`,title:e.description,children:[(0,$.jsx)(`label`,{children:a}),s,o]})}function Oc({node:e}){let t=U(e=>e.canvas),n=U(e=>e.run),r=Object.keys(e.props).filter(e=>e!==`className`&&e!==`data-name`);return r.length?(0,$.jsx)(S,{title:`Attributes`,children:r.map(r=>(0,$.jsx)(Dc,{spec:{name:r,type:Tc(e.props[r]),optional:!0,typeText:``},value:e.props[r],onChange:i=>n({op:`set_props`,canvas:t,id:e.id,props:{[r]:i}},{select:!1})},r))}):null}function kc({node:e}){let t=U(e=>e.canvas),n=U(e=>e.run),r=e.children.map(e=>e.text??``).join(` `);return(0,$.jsx)(S,{title:`Content`,children:(0,$.jsx)(C,{multiline:!0,value:r,placeholder:`Text`,onCommit:r=>n({op:`set_text`,canvas:t,id:e.id,text:r},{select:!1}),ariaLabel:`Text content`})})}function Ac({parentId:e}){let t=U(e=>e.canvas),n=U(e=>e.run),r=U(e=>e.components).filter(e=>e.library&&e.acceptsClassName&&e.presets?.length),[i,a]=(0,B.useState)(``);if(!r.length)return null;let o=r.find(e=>e.name===i);return(0,$.jsxs)(S,{title:(0,$.jsxs)(`span`,{className:`node-head`,children:[(0,$.jsx)(Vn,{size:14,className:`faint`}),` Shader background`]}),children:[(0,$.jsxs)(`div`,{className:`grid2`,style:{gridTemplateColumns:`1fr auto`},children:[(0,$.jsx)(h,{value:i,placeholder:`Choose a shader`,options:r.map(e=>({value:e.name,label:Ec(e.name),hint:`${e.presets.length} presets`,icon:(0,$.jsx)(Vn,{size:13})})),onChange:a,ariaLabel:`Shader`}),(0,$.jsx)(`button`,{className:`btn primary`,disabled:!o,onClick:()=>o&&n({op:`add_background`,canvas:t,parent:e,component:o.name}),children:`Add`})]}),(0,$.jsx)(`p`,{className:`faint`,style:{margin:`8px 0 0`},children:`Fills the layer behind its content. Pick a preset in its props after.`})]})}function jc({id:e}){let t=U(e=>e.canvas),n=U(t=>t.index.get(e));return n?(0,$.jsxs)(S,{title:`Code`,actions:(0,$.jsxs)($.Fragment,{children:[(0,$.jsx)(O,{label:`Copy JSX`,text:()=>H.source(t,$n(e)).then(e=>e.code)}),(0,$.jsx)(v,{label:`Open in editor`,children:(0,$.jsx)(`button`,{className:`icon-btn sm`,onClick:()=>Yr(e),"aria-label":`Open in editor`,children:(0,$.jsx)(Me,{size:13})})})]}),children:[(0,$.jsx)(`button`,{className:`link mono`,onClick:()=>Yr(e),children:(0,$.jsxs)(`span`,{children:[/[jt]sx?#/.test(e)?e.slice(0,e.lastIndexOf(`#`)):U.getState().doc?.file,`:`,n.node.line]})}),(0,$.jsxs)(`div`,{className:`grid2`,style:{marginTop:10},children:[(0,$.jsxs)(`button`,{className:`btn outline`,onClick:Hr,children:[(0,$.jsx)(Ee,{size:14}),` Duplicate`]}),(0,$.jsxs)(`button`,{className:`btn danger outline`,onClick:Ur,children:[(0,$.jsx)(Nn,{size:14}),` Delete`]})]})]}):null}var Mc=0;function Nc(){let e=U(e=>e.ready),t=U(e=>e.canvas),n=U(e=>e.toasts),r=U(e=>e.appStatus),i=U(e=>e.appLog),a=U(e=>e.appUrl),o=U(e=>e.framework),s=U(e=>e.connected),c=U(e=>e.docError);return(0,B.useEffect)(()=>{ri();let e=window.matchMedia(`(prefers-color-scheme: dark)`);e.addEventListener(`change`,ri),(async()=>{let e=await H.state(),t=new URLSearchParams(location.search).get(`canvas`)??localStorage.getItem(`tc:canvas`),n=e.canvases.includes(t??``)?t:e.canvases[0]??null;U.setState({ready:!0,appUrl:e.appUrl,framework:e.framework??`next`,projectName:e.projectName,componentsDir:e.componentsDir??`components`,mcpUrl:e.mcpUrl,darkMode:e.darkMode,canvases:e.canvases,agents:e.agents,feed:e.feed,canvas:n}),Fc(),Pc(),Q(0),oa()})();let t=setInterval(()=>Q(0),15e3),n=setInterval(()=>oa(),6e4),r=()=>Q(0);window.addEventListener(`focus`,r),Lc();let i=Gn(zc,e=>U.setState({connected:e}),()=>void Ic());return()=>{i(),e.removeEventListener(`change`,ri),clearInterval(t),clearInterval(n),window.removeEventListener(`focus`,r)}},[]),(0,B.useEffect)(()=>{if(!t)return;localStorage.setItem(`tc:canvas`,t),document.title=`${t} · Truecanvas`;let e=new URL(location.href);e.searchParams.set(`canvas`,t),history.replaceState(null,``,e),U.getState().compare&&H.clearCompare().catch(()=>{}),U.setState({selection:[],hover:null,rects:{},frameReady:{},frameErrors:{},frameHeights:kr(t),layerQuery:``,compare:null,threads:[],openThread:null,draftComment:null}),mr(t),sa();let n=!1;return H.canvas(t).then(({doc:e,history:r})=>{if(n)return;U.getState().setDoc(e),U.setState({history:r,expanded:new Set(e.frames.map(e=>e.id))});let i=null;try{i=JSON.parse(localStorage.getItem(`tc:camera:${t}`)??`null`)}catch{i=null}i&&Mr(i,e.frames)?Tr(i):requestAnimationFrame(Pr)}).catch(e=>!n&&U.getState().toast(e.message)),()=>{n=!0}},[t]),(0,B.useEffect)(()=>{if(!a)return;let e=!1,t=async()=>{try{await fetch(a,{mode:`no-cors`,cache:`no-store`}),U.getState().appStatus!==`up`&&U.setState({appStatus:`up`})}catch{let e=await fetch(`/api/app`,{cache:`no-store`}).then(e=>e.ok?e.json():null).catch(()=>null);U.setState(e?.state===`starting`?{appStatus:`starting`}:{appStatus:`down`,appLog:e?.state===`failed`?e.log.slice(-6):[]})}e||setTimeout(t,U.getState().appStatus===`up`?15e3:2500)};return t(),()=>{e=!0}},[a]),(0,B.useEffect)(()=>U.subscribe((e,t)=>{e.selection!==t.selection||e.canvas!==t.canvas?(H.selection(e.canvas,e.selection).catch(()=>{}),K()):e.hover!==t.hover&&e.hover&&!(e.hover in e.rects)&&K()}),[]),e?(0,$.jsxs)(`div`,{className:`app`,children:[(0,$.jsx)(vs,{}),(0,$.jsxs)(`main`,{style:{position:`relative`,minWidth:0,display:`grid`},children:[(0,$.jsx)(is,{}),(0,$.jsx)(Va,{}),(0,$.jsx)(Ma,{}),(0,$.jsx)(oo,{}),(0,$.jsx)(uo,{}),(0,$.jsx)(oc,{}),(0,$.jsx)(wo,{}),r===`starting`&&(0,$.jsxs)(`div`,{className:`banner`,role:`status`,children:[(0,$.jsx)(l,{size:14,className:`spin-working`}),(0,$.jsxs)(`div`,{children:[(0,$.jsx)(`div`,{style:{fontWeight:600},children:`Starting your app…`}),(0,$.jsxs)(`div`,{className:`muted`,children:[(0,$.jsx)(`span`,{className:`mono`,children:o===`vite`?`vite`:`next dev`}),` is compiling. Frames appear as soon as it answers.`]})]})]}),r===`down`&&(0,$.jsxs)(`div`,{className:`banner`,role:`status`,children:[(0,$.jsx)(`span`,{className:`dot`}),(0,$.jsxs)(`div`,{children:[(0,$.jsx)(`div`,{style:{fontWeight:600},children:`Your app isn’t running`}),(0,$.jsxs)(`div`,{className:`muted`,children:[`Start `,(0,$.jsx)(`span`,{className:`mono`,children:o===`vite`?`vite`:`next dev`}),`. Frames render from `,(0,$.jsx)(`span`,{className:`mono`,children:a})]}),i.length>0&&(0,$.jsx)(`pre`,{className:`mono app-log`,children:i.join(`
+`)})]}),(0,$.jsxs)(`button`,{className:`btn outline`,onClick:()=>U.setState({appStatus:`checking`}),children:[(0,$.jsx)(P,{size:13}),` Retry`]})]}),c&&(0,$.jsxs)(`div`,{className:`banner`,style:{top:r===`down`||r===`starting`?76:12},role:`alert`,children:[(0,$.jsx)(`span`,{className:`dot`}),(0,$.jsxs)(`div`,{children:[(0,$.jsx)(`div`,{style:{fontWeight:600},children:`The canvas file has a syntax error`}),(0,$.jsx)(`div`,{className:`muted mono`,style:{maxWidth:520,overflow:`hidden`,textOverflow:`ellipsis`,whiteSpace:`nowrap`},children:c})]})]}),!s&&(0,$.jsxs)(`div`,{className:`banner`,style:{top:r===`down`||r===`starting`?76:12},role:`status`,children:[(0,$.jsx)(l,{size:14,className:`spin-working`}),(0,$.jsx)(`div`,{className:`muted`,children:`Lost connection to Truecanvas. Reconnecting…`})]}),(0,$.jsx)(`div`,{className:`toasts`,children:n.map(e=>(0,$.jsxs)(`div`,{className:`toast ${e.tone}`,children:[e.tone===`error`&&(0,$.jsx)(pe,{size:14}),(0,$.jsx)(`span`,{children:e.text}),e.action&&(0,$.jsx)(`button`,{className:`toast-action`,onClick:()=>{e.action.run(),U.setState({toasts:U.getState().toasts.filter(t=>t.id!==e.id)})},children:e.action.label})]},e.id))})]}),(0,$.jsx)(pc,{})]}):(0,$.jsx)(`div`,{style:{display:`grid`,placeItems:`center`,height:`100%`},className:`faint`,children:(0,$.jsx)(l,{size:18,className:`spin-working`})})}function Pc(){H.pages().then(({canvases:e})=>U.setState({pages:e})).catch(()=>{})}function Fc(){H.components().then(({components:e})=>U.setState({components:e})).catch(()=>{}),H.tokens().then(e=>U.setState({tokens:e})).catch(()=>{})}async function Ic(){let e=U.getState();try{let t=await H.state();if(U.setState({canvases:t.canvases,agents:t.agents,feed:t.feed}),e.canvas&&t.canvases.includes(e.canvas)){let{doc:t,history:n}=await H.canvas(e.canvas);U.getState().setDoc(t),U.setState({history:n})}}catch{return}Fc(),Pc(),sa(),Q(0),Lc()}function Lc(){H.sessions().then(({sessions:e})=>U.setState({sessions:Object.fromEntries(e.filter(e=>e.status!==`stopped`).map(e=>[e.canvas,e]))})).catch(()=>{})}function Rc(e,t){let n={...U.getState().roomPeople},r=U.getState().sessions[e]?.you;if(t.t===`hello`){for(let[t,r]of Object.entries(n))r.canvas===e&&delete n[t];for(let r of t.people)r.id!==t.you.id&&(n[r.id]={...r,canvas:e,x:null,y:null})}else if(t.t===`join`)t.person.id!==r&&(n[t.person.id]={...t.person,canvas:e,x:null,y:null});else if(t.t===`leave`)delete n[t.id];else if(t.t===`cursor`){let e=n[t.id];if(!e)return;n[t.id]={...e,x:t.x,y:t.y}}else return;U.setState({roomPeople:n})}function zc(e){let t=U.getState();switch(e.type){case`session`:{let n={...t.sessions};if(e.session.status===`stopped`){delete n[e.session.canvas];let r=Object.fromEntries(Object.entries(t.roomPeople).filter(([,t])=>t.canvas!==e.session.canvas));U.setState({sessions:n,roomPeople:r}),e.session.error&&t.toast(e.session.error)}else U.setState({sessions:{...n,[e.session.canvas]:e.session}});break}case`room`:Rc(e.canvas,e.event);break;case`comments`:e.canvas===t.canvas&&sa();break;case`client-comment`:{let n=e.text.length>90?`${e.text.slice(0,90)}…`:e.text;t.toast(`${e.name} commented on ${e.canvas}: “${n}”`,`info`,{label:`View`,run:()=>U.setState({canvas:e.canvas,rightTab:`comments`})});break}case`git`:ia(),Q(0),oa(!0),Pc();break;case`doc`:ia(),Q(1500),e.canvas===t.canvas&&t.setDoc(e.doc),t.pages.some(t=>t.name===e.canvas&&t.frames!==e.doc.frames.length)&&U.setState({pages:t.pages.map(t=>t.name===e.canvas?{...t,frames:e.doc.frames.length}:t)});break;case`canvases`:U.setState({canvases:e.canvases,canvas:t.canvas&&e.canvases.includes(t.canvas)?t.canvas:e.canvases[0]??null}),Pc();break;case`canvas-renamed`:if(t.canvas===e.from){for(let t of[`camera`,`hidden`,`locked`]){let n=localStorage.getItem(`tc:${t}:${e.from}`);n&&localStorage.setItem(`tc:${t}:${e.to}`,n)}U.setState({canvas:e.to})}Pc();break;case`catalog`:Fc();break;case`history`:e.canvas===t.canvas&&U.setState({history:{undo:e.undo,redo:e.redo}});break;case`agents`:{let n=new Set(e.agents.map(e=>e.session)),r=Object.fromEntries(Object.entries(t.presence).filter(([e])=>n.has(e)));U.setState({agents:e.agents,presence:r});break}case`presence`:{let n=e=>{let n=t.index.get(e);return n&&n.node.kind===`text`&&n.parent?n.parent.id:e};U.setState({presence:{...t.presence,[e.presence.session]:{...e.presence,ids:e.presence.ids.map(e=>n(nr(t.index,e)))}}}),K(),setTimeout(()=>void K(),400);break}case`change`:if(U.setState({feed:[...t.feed,e.entry].slice(-300)}),e.entry.actor.kind===`agent`&&e.entry.canvas===t.canvas&&e.ids.length){let n=or(e.entry.actor.name),r=Date.now(),i=sr(e.entry.actor.name),a=e.ids.map(e=>({key:++Mc,id:nr(t.index,e),frame:``,actor:n,color:i,at:r}));U.setState({flashes:[...U.getState().flashes,...a]}),setTimeout(()=>void K(),350),setTimeout(()=>void K(),900),setTimeout(()=>U.setState({flashes:U.getState().flashes.filter(e=>!a.includes(e))}),2800)}break;case`motion`:if(e.canvas!==t.canvas)break;Ao(()=>Promise.resolve().then(()=>gr).then(t=>e.action===`replay`?t.replayFrame(e.frame):t.playFrame(e.action===`play`?e.frame:null)),void 0);break;case`focus`:ii(e.canvas,e.ids)}}(0,Hn.createRoot)(document.getElementById(`root`)).render((0,$.jsx)(Nc,{}));

package/dist/editor/hub.html

@@ -5,10 +5,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Truecanvas</title>
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <script type="module" crossorigin src="/assets/hub-C_YkICvy.js"></script>
+    <script type="module" crossorigin src="/assets/hub-JHnH5D_d.js"></script>
     <link rel="modulepreload" crossorigin href="/assets/react-DB-4Zxce.js">
-    <link rel="modulepreload" crossorigin href="/assets/Menu-TTrH9CSM.js">
-    <link rel="stylesheet" crossorigin href="/assets/Menu-ikkNcA3s.css">
+    <link rel="modulepreload" crossorigin href="/assets/Menu-BCzLjvGk.js">
+    <link rel="stylesheet" crossorigin href="/assets/Menu-1oiiMScp.css">
   </head>
   <body>
     <div id="root"></div>

package/dist/editor/index.html

@@ -5,10 +5,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Truecanvas</title>
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <script type="module" crossorigin src="/assets/main-Dx3BpXRE.js"></script>
+    <script type="module" crossorigin src="/assets/main-NN-va8GV.js"></script>
     <link rel="modulepreload" crossorigin href="/assets/react-DB-4Zxce.js">
-    <link rel="modulepreload" crossorigin href="/assets/Menu-TTrH9CSM.js">
-    <link rel="stylesheet" crossorigin href="/assets/Menu-ikkNcA3s.css">
+    <link rel="modulepreload" crossorigin href="/assets/Menu-BCzLjvGk.js">
+    <link rel="stylesheet" crossorigin href="/assets/Menu-1oiiMScp.css">
   </head>
   <body>
     <div id="root"></div>

package/dist/hub.d.ts

@@ -62,6 +62,7 @@ declare function startHub(opts: HubOptions): Promise<{
             next: boolean;
             ready: boolean;
             canvases: number;
+            clientComments: number;
             exists: boolean;
             path: string;
             name: string;

package/dist/hub.js

@@ -2,7 +2,7 @@ import {
   HUB_PORT,
   hubPort,
   startHub
-} from "./chunk-FJO64PGM.js";
+} from "./chunk-S5PJFVUC.js";
 import {
   useNodeRuntime
 } from "./chunk-D565QDII.js";