truecanvas 0.1.0

package/dist/editor/assets/hub-C4_700Hv.js

@@ -0,0 +1,2 @@
+import{i as e,t}from"./react-DB-4Zxce.js";import{D as n,E as r,O as i,S as a,_ as o,b as s,d as c,f as l,g as u,h as d,m as f,p,v as m,w as h,x as g,y as _}from"./controls-BYFjuGCq.js";var v={name:`cloud-download`,size:24,node:[[`path`,{d:`M12 13v8l-4-4`,key:`1f5nwf`}],[`path`,{d:`m12 21 4-4`,key:`1lfcce`}],[`path`,{d:`M4.393 15.269A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.436 8.284`,key:`ui1hmy`}]],aliases:[`download-cloud`]};v.node;var y=r(v),b={name:`cpu`,size:24,node:[[`path`,{d:`M12 20v2`,key:`1lh1kg`}],[`path`,{d:`M12 2v2`,key:`tus03m`}],[`path`,{d:`M17 20v2`,key:`1rnc9c`}],[`path`,{d:`M17 2v2`,key:`11trls`}],[`path`,{d:`M2 12h2`,key:`1t8f8n`}],[`path`,{d:`M2 17h2`,key:`7oei6x`}],[`path`,{d:`M2 7h2`,key:`asdhe0`}],[`path`,{d:`M20 12h2`,key:`1q8mjw`}],[`path`,{d:`M20 17h2`,key:`1fpfkl`}],[`path`,{d:`M20 7h2`,key:`1o8tra`}],[`path`,{d:`M7 20v2`,key:`4gnj0m`}],[`path`,{d:`M7 2v2`,key:`1i4yhu`}],[`rect`,{x:`4`,y:`4`,width:`16`,height:`16`,rx:`2`,key:`1vbyd7`}],[`rect`,{x:`8`,y:`8`,width:`8`,height:`8`,rx:`1`,key:`z9xiuo`}]]};b.node;var x=r(b),S={name:`folder-open`,size:24,node:[[`path`,{d:`m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2`,key:`usdka0`}]]};S.node;var C=r(S),w={name:`folder-plus`,size:24,node:[[`path`,{d:`M12 10v6`,key:`1bos4e`}],[`path`,{d:`M9 13h6`,key:`1uhe8q`}],[`path`,{d:`M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z`,key:`1kt360`}]]};w.node;var T=r(w),E={name:`folder`,size:24,node:[[`path`,{d:`M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z`,key:`1kt360`}]]};E.node;var D=r(E),O={name:`power`,size:24,node:[[`path`,{d:`M12 2v10`,key:`mnfbl`}],[`path`,{d:`M18.4 6.6a9 9 0 1 1-12.77.04`,key:`obofu9`}]]};O.node;var k=r(O),A={name:`triangle-alert`,size:24,node:[[`path`,{d:`m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3`,key:`wmoenq`}],[`path`,{d:`M12 9v4`,key:`juzpu7`}],[`path`,{d:`M12 17h.01`,key:`p32p05`}]],aliases:[`alert-triangle`]};A.node;var j=r(A),M={name:`wand-sparkles`,size:24,node:[[`path`,{d:`m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72`,key:`ul74o6`}],[`path`,{d:`m14 7 3 3`,key:`1r5n42`}],[`path`,{d:`M5 6v4`,key:`ilb8ba`}],[`path`,{d:`M19 14v4`,key:`blhpug`}],[`path`,{d:`M10 2v2`,key:`7u0qdc`}],[`path`,{d:`M7 8H3`,key:`zfb6yr`}],[`path`,{d:`M21 16h-4`,key:`1cnmox`}],[`path`,{d:`M11 3H9`,key:`1obp7u`}]],aliases:[`wand-2`]};M.node;var N=r(M),P=n(),F=e(t(),1),I=i(),L=p();async function R(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 z=e=>e.replace(/^\/home\/[^/]+/,`~`);function B(){let e=(()=>{try{return JSON.parse(localStorage.getItem(`tc:uiTheme`)??`"system"`)}catch{return`system`}})(),t=e===`dark`||e===`system`&&window.matchMedia(`(prefers-color-scheme: dark)`).matches;document.documentElement.dataset.ui=t?`dark`:`light`}function V(){let[e,t]=(0,F.useState)(null),[n,r]=(0,F.useState)(()=>localStorage.getItem(`tc:hubTab`)??`dashboard`),[i,a]=(0,F.useState)(null),[o,l]=(0,F.useState)(!0),u=(0,F.useCallback)(()=>{R(`/api/hub/state`).then(t).catch(()=>{})},[]);(0,F.useEffect)(()=>{B(),window.matchMedia(`(prefers-color-scheme: dark)`).addEventListener(`change`,B),u();let e=new EventSource(`/api/hub/events`);e.onmessage=()=>u(),e.onopen=()=>{l(!0),u()},e.onerror=()=>l(!1);let t=setInterval(u,5e3);return()=>{e.close(),clearInterval(t)}},[u]);let d=(0,F.useMemo)(()=>(e?.projects??[]).filter(e=>e.running),[e]);(0,F.useEffect)(()=>{e&&n!==`dashboard`&&!d.some(e=>e.path===n)&&r(`dashboard`)},[e,d,n]),(0,F.useEffect)(()=>{localStorage.setItem(`tc:hubTab`,n),R(`/api/hub/active`,{path:n===`dashboard`?``:n}).catch(()=>{})},[n]);let p=(0,F.useRef)(Date.now());(0,F.useEffect)(()=>{let t=e?.focus;!t||t.at<=p.current||!d.some(e=>e.path===t.path)||(p.current=t.at,r(t.path))},[e,d]);let m=d.find(e=>e.path===n)?.name;(0,F.useEffect)(()=>{document.title=m?`${m} · Truecanvas`:`Truecanvas`},[m]);let h=async e=>{r(e.path);try{await R(`/api/hub/open`,{path:e.path})}catch(e){a(e.message)}u()},g=async e=>{let t=d.findIndex(t=>t.path===e.path);n===e.path&&r(d[t+1]?.path??d[t-1]?.path??`dashboard`),await R(`/api/hub/close`,{path:e.path}),u()};(0,F.useEffect)(()=>{let e=e=>{if(!e.ctrlKey)return;let t=[`dashboard`,...d.map(e=>e.path)];if(e.key===`Tab`){e.preventDefault();let i=t.indexOf(n);r(t[(i+(e.shiftKey?-1:1)+t.length)%t.length])}};return window.addEventListener(`keydown`,e),()=>window.removeEventListener(`keydown`,e)},[d,n]);let v=d.reduce((e,t)=>e+(t.running?.memory??0),0),[y,b]=(0,F.useState)(!1),[S,C]=(0,F.useState)(!1),w=async()=>{b(!1),await fetch(`/api/hub/quit`,{method:`POST`}).catch(()=>{}),C(!0),setTimeout(()=>window.close(),300)};return(0,F.useEffect)(()=>{let e=e=>{e.ctrlKey&&(e.key===`q`||e.key===`Q`)&&(e.preventDefault(),d.length?b(!0):w())};return window.addEventListener(`keydown`,e),()=>window.removeEventListener(`keydown`,e)}),S?(0,L.jsxs)(`div`,{className:`hub-center`,style:{height:`100%`},children:[(0,L.jsx)(`img`,{src:`/favicon.svg`,width:44,height:44,alt:``}),(0,L.jsx)(`div`,{style:{fontWeight:600,marginTop:6},children:`Truecanvas has quit`}),(0,L.jsx)(`div`,{className:`muted`,children:"You can close this window. Open it again from your app launcher or with `truecanvas`."})]}):(0,L.jsxs)(`div`,{className:`hub`,children:[(0,L.jsxs)(`header`,{className:`tabbar`,role:`tablist`,children:[(0,L.jsxs)(`button`,{role:`tab`,"aria-selected":n===`dashboard`,className:`hub-tab home-tab${n===`dashboard`?` on`:``}`,onClick:()=>r(`dashboard`),children:[(0,L.jsx)(s,{size:14}),(0,L.jsx)(`span`,{children:`Dashboard`})]}),(0,L.jsx)(`span`,{className:`tab-sep`}),(0,L.jsx)(`div`,{className:`tab-strip`,children:d.map(e=>(0,L.jsxs)(`div`,{role:`tab`,tabIndex:0,"aria-selected":n===e.path,className:`hub-tab${n===e.path?` on`:``}`,onClick:()=>r(e.path),onAuxClick:t=>t.button===1&&void g(e),title:z(e.path),children:[e.running?.status===`starting`?(0,L.jsx)(_,{size:14,className:`spin-working`}):e.running?.status===`failed`?(0,L.jsx)(j,{size:14,className:`warn`}):(0,L.jsx)(H,{path:e.path}),(0,L.jsx)(`span`,{className:`label`,children:e.name}),(0,L.jsx)(`button`,{className:`tab-close`,"aria-label":`Close ${e.name}`,onClick:t=>{t.stopPropagation(),g(e)},children:(0,L.jsx)(f,{size:12})})]},e.path))}),(0,L.jsxs)(`div`,{className:`tabbar-right`,children:[v>0&&(0,L.jsx)(c,{label:`Memory used by open projects (app + Truecanvas)`,side:`bottom`,children:(0,L.jsxs)(`span`,{className:`mem-chip`,children:[(0,L.jsx)(x,{size:12}),` `,v>=1024?`${(v/1024).toFixed(1)} GB`:`${v} MB`]})}),(0,L.jsx)(U,{onQuit:()=>b(!0)})]})]}),y&&(0,L.jsx)(W,{running:d.map(e=>e.name),onCancel:()=>b(!1),onQuit:()=>void w()}),(0,L.jsxs)(`main`,{className:`hub-body`,children:[n===`dashboard`&&e&&(0,L.jsx)(q,{state:e,onOpen:h,refresh:u}),d.map(e=>(0,L.jsx)(G,{project:e,visible:n===e.path,onRetry:()=>void h(e)},e.path)),!o&&(0,L.jsxs)(`div`,{className:`banner`,role:`status`,style:{top:12},children:[(0,L.jsx)(_,{size:14,className:`spin-working`}),(0,L.jsx)(`div`,{className:`muted`,children:`Lost connection to Truecanvas. Reconnecting…`})]}),i&&(0,L.jsxs)(`div`,{className:`banner`,role:`alert`,style:{top:12},children:[(0,L.jsx)(`span`,{className:`dot`}),(0,L.jsx)(`div`,{children:i}),(0,L.jsx)(`button`,{className:`icon-btn`,"aria-label":`Dismiss`,onClick:()=>a(null),children:(0,L.jsx)(f,{size:14})})]})]})]})}function H({path:e,size:t=14}){let[n,r]=(0,F.useState)(!1);return n?(0,L.jsx)(D,{size:t,className:`folder-icon`}):(0,L.jsx)(`img`,{className:`project-favicon`,src:`/api/hub/icon?path=${encodeURIComponent(e)}`,width:t,height:t,alt:``,onError:()=>r(!0)})}function U({onQuit:e}){let[t,n]=(0,F.useState)(null);return(0,L.jsxs)(L.Fragment,{children:[(0,L.jsx)(c,{label:`Truecanvas`,side:`bottom`,children:(0,L.jsx)(`button`,{className:`icon-btn app-menu-btn`,"aria-label":`Truecanvas menu`,onClick:e=>{let t=e.currentTarget.getBoundingClientRect();n({x:t.right-220,y:t.bottom+6})},children:(0,L.jsx)(a,{size:16})})}),t&&(0,L.jsx)(l,{x:t.x,y:t.y,onClose:()=>n(null),items:[{label:`Reload window`,icon:(0,L.jsx)(u,{size:14}),kbd:`Ctrl+R`,onSelect:()=>location.reload()},`sep`,{label:`Quit Truecanvas`,icon:(0,L.jsx)(k,{size:14}),kbd:`Ctrl+Q`,danger:!0,onSelect:e}]})]})}function W({running:e,onCancel:t,onQuit:n}){return(0,F.useEffect)(()=>{let e=e=>{e.key===`Escape`&&t(),e.key===`Enter`&&n()};return window.addEventListener(`keydown`,e),()=>window.removeEventListener(`keydown`,e)},[t,n]),(0,I.createPortal)((0,L.jsx)(`div`,{className:`modal-backdrop`,onPointerDown:t,children:(0,L.jsxs)(`div`,{className:`modal`,onPointerDown:e=>e.stopPropagation(),children:[(0,L.jsx)(`div`,{className:`modal-title`,children:`Quit Truecanvas?`}),(0,L.jsx)(`p`,{className:`muted`,children:e.length?`This also stops ${e.length===1?`the app`:`the apps`} it started: ${e.join(`, `)}. Your files are saved as you edit.`:`Your files are saved as you edit.`}),(0,L.jsxs)(`div`,{className:`modal-actions`,children:[(0,L.jsx)(`button`,{className:`btn outline`,onClick:t,children:`Cancel`}),(0,L.jsx)(`button`,{className:`btn danger-solid`,autoFocus:!0,onClick:n,children:`Quit`})]})]})}),document.body)}function G({project:e,visible:t,onRetry:n}){let r=e.running;return(0,L.jsxs)(`div`,{className:`project-view`,style:{display:t?`block`:`none`},children:[r.status===`ready`&&(0,L.jsx)(`iframe`,{title:e.name,src:`${r.editor}/`,allow:`clipboard-read; clipboard-write`}),r.status===`starting`&&(0,L.jsxs)(`div`,{className:`hub-center`,children:[(0,L.jsx)(_,{size:22,className:`spin-working`}),(0,L.jsxs)(`div`,{className:`muted`,children:[`Starting `,e.name,`…`]}),(0,L.jsx)(`div`,{className:`faint`,children:`Your app and its Truecanvas editor are booting.`})]}),r.status===`failed`&&(0,L.jsxs)(`div`,{className:`hub-center`,children:[(0,L.jsx)(j,{size:22,className:`warn`}),(0,L.jsxs)(`div`,{style:{fontWeight:600},children:[e.name,` didn’t start`]}),(0,L.jsx)(`pre`,{className:`job-log`,style:{maxWidth:640},children:r.error}),(0,L.jsxs)(`button`,{className:`btn primary`,onClick:n,children:[(0,L.jsx)(u,{size:13}),` Try again`]})]})]})}function K(e){let t=(Date.now()-e)/1e3;return t<60?`just now`:t<3600?`${Math.floor(t/60)} min ago`:t<86400?`${Math.floor(t/3600)} h ago`:`${Math.floor(t/86400)} d ago`}function q({state:e,onOpen:t,refresh:n}){let[r,i]=(0,F.useState)(null),[s,c]=(0,F.useState)(null),[u,p]=(0,F.useState)(null),[m,_]=(0,F.useState)(null),[v,b]=(0,F.useState)(``),[x,S]=(0,F.useState)(null);(0,F.useEffect)(()=>{R(`/api/hub/discover`).then(e=>i(e.found)).catch(()=>i([]))},[e.projects.length]);let w=async(e,t)=>{let n=await R(e,t);_(n)},E=e.projects.filter(e=>!v||`${e.name} ${e.path}`.toLowerCase().includes(v.toLowerCase()));return(0,L.jsxs)(`div`,{className:`dashboard scroll`,children:[(0,L.jsxs)(`div`,{className:`dash-inner`,children:[(0,L.jsxs)(`div`,{className:`dash-head`,children:[(0,L.jsxs)(`div`,{children:[(0,L.jsx)(`h1`,{children:`Projects`}),(0,L.jsx)(`p`,{className:`muted`,children:`Each project is a Next.js app. Its canvases are .tsx files in the repo.`})]}),(0,L.jsxs)(`div`,{className:`dash-actions`,children:[(0,L.jsxs)(`div`,{className:`field`,style:{width:200},children:[(0,L.jsx)(`span`,{className:`prefix`,children:(0,L.jsx)(d,{size:13})}),(0,L.jsx)(`input`,{value:v,placeholder:`Search projects`,onChange:e=>b(e.target.value)})]}),(0,L.jsxs)(`button`,{className:`btn outline`,onClick:()=>c(`open`),children:[(0,L.jsx)(C,{size:14}),` Open folder`]}),(0,L.jsxs)(`button`,{className:`btn outline`,onClick:()=>c(`clone`),children:[(0,L.jsx)(y,{size:14}),` Clone from GitHub`]}),(0,L.jsxs)(`button`,{className:`btn primary`,onClick:()=>c(`new`),children:[(0,L.jsx)(o,{size:14}),` New project`]})]})]}),E.length===0&&!v&&(0,L.jsxs)(`div`,{className:`dash-empty`,children:[(0,L.jsx)(T,{size:28}),(0,L.jsx)(`div`,{style:{fontWeight:600,marginTop:10},children:`No projects yet`}),(0,L.jsx)(`div`,{className:`muted`,children:`Open a Next.js app from your computer, clone one from GitHub, or create a new one.`})]}),(0,L.jsx)(`div`,{className:`project-grid`,children:E.map(e=>(0,L.jsxs)(`div`,{className:`project-card${e.running?` live`:``}${e.exists?``:` missing`}`,role:`button`,tabIndex:0,onClick:()=>e.ready&&e.exists&&t(e),onKeyDown:n=>n.key===`Enter`&&e.ready&&t(e),onContextMenu:t=>{t.preventDefault(),S({x:t.clientX,y:t.clientY,p:e})},children:[(0,L.jsxs)(`div`,{className:`card-top`,children:[(0,L.jsx)(`span`,{className:`card-icon`,children:(0,L.jsx)(H,{path:e.path,size:22})}),(0,L.jsx)(`button`,{className:`icon-btn sm`,"aria-label":`Options for ${e.name}`,onClick:t=>{t.stopPropagation();let n=t.currentTarget.getBoundingClientRect();S({x:n.left,y:n.bottom+4,p:e})},children:(0,L.jsx)(a,{size:14})})]}),(0,L.jsx)(`div`,{className:`card-name`,children:e.name}),(0,L.jsx)(`div`,{className:`card-path faint`,children:z(e.path)}),(0,L.jsx)(`div`,{className:`card-meta`,children:e.exists?e.ready?(0,L.jsxs)(L.Fragment,{children:[(0,L.jsxs)(`span`,{className:`faint`,children:[e.canvases,` `,e.canvases===1?`page`:`pages`,` · `,K(e.lastOpened)]}),e.running&&(0,L.jsxs)(`span`,{className:`live-tag`,children:[(0,L.jsx)(`span`,{className:`live-dot`}),` `,e.running.memory?`${e.running.memory} MB`:`open`]})]}):(0,L.jsxs)(`button`,{className:`btn primary sm-btn`,onClick:t=>{t.stopPropagation(),w(`/api/hub/setup`,{path:e.path})},children:[(0,L.jsx)(N,{size:13}),` Set up Truecanvas`]}):(0,L.jsx)(`span`,{className:`chip`,children:`Folder missing`})})]},e.path))}),r&&r.length>0&&(0,L.jsxs)(L.Fragment,{children:[(0,L.jsx)(`h2`,{children:`Found on this computer`}),(0,L.jsx)(`div`,{className:`found-list`,children:r.map(e=>(0,L.jsxs)(`div`,{className:`found-row`,children:[(0,L.jsx)(H,{path:e.path,size:16}),(0,L.jsx)(`span`,{className:`name`,children:e.name}),(0,L.jsx)(`span`,{className:`faint path`,children:z(e.path)}),(0,L.jsx)(`button`,{className:`btn outline`,onClick:async()=>{await R(`/api/hub/add`,{path:e.path}),n()},children:`Add`})]},e.path))})]})]}),x&&(0,L.jsx)(l,{x:x.x,y:x.y,onClose:()=>S(null),items:[...x.p.ready?[{label:`Open`,icon:(0,L.jsx)(h,{size:14}),onSelect:()=>t(x.p)}]:[],...x.p.ready?[]:[{label:`Set up Truecanvas`,icon:(0,L.jsx)(N,{size:14}),onSelect:()=>void w(`/api/hub/setup`,{path:x.p.path})}],...x.p.ready?[{label:`Pull requests…`,icon:(0,L.jsx)(g,{size:14}),onSelect:()=>p(x.p)}]:[],...x.p.running?[{label:`Stop app`,icon:(0,L.jsx)(k,{size:14}),onSelect:()=>void R(`/api/hub/close`,{path:x.p.path}).then(n)}]:[],`sep`,{label:`Remove from list`,icon:(0,L.jsx)(f,{size:14}),danger:!0,onSelect:()=>void R(`/api/hub/forget`,{path:x.p.path}).then(n)}]}),s===`open`&&(0,L.jsx)(Y,{onClose:()=>c(null),onPick:async e=>{c(null),await R(`/api/hub/add`,{path:e}),n()}}),s===`clone`&&(0,L.jsx)(X,{onClose:()=>c(null),onClone:async(e,t)=>{c(null),await w(`/api/hub/clone`,{repo:e,parent:t})}}),u&&(0,L.jsx)(Z,{project:u,onClose:()=>p(null),onOpened:()=>{let e=u;p(null),t(e)}}),s===`new`&&(0,L.jsx)(Q,{onClose:()=>c(null),onCreate:async(e,t)=>{c(null),await w(`/api/hub/create`,{name:e,parent:t})}}),m&&(0,L.jsx)($,{job:m,onClose:e=>{_(null),n(),e&&t({path:e})}})]})}function J({title:e,children:t,onClose:n,width:r=460}){return(0,F.useEffect)(()=>{let e=e=>e.key===`Escape`&&n();return window.addEventListener(`keydown`,e),()=>window.removeEventListener(`keydown`,e)},[n]),(0,I.createPortal)((0,L.jsx)(`div`,{className:`modal-backdrop`,onPointerDown:n,children:(0,L.jsxs)(`div`,{className:`modal`,style:{width:r},onPointerDown:e=>e.stopPropagation(),children:[(0,L.jsx)(`div`,{className:`modal-title`,children:e}),t]})}),document.body)}function Y({onClose:e,onPick:t}){let[n,r]=(0,F.useState)(`~/Github`),[i,a]=(0,F.useState)(null),[o,s]=(0,F.useState)(null);return(0,F.useEffect)(()=>{let e=setTimeout(()=>{R(`/api/hub/ls?path=${encodeURIComponent(n)}`).then(e=>{a(e),s(null)}).catch(e=>s(e.message))},150);return()=>clearTimeout(e)},[n]),(0,L.jsxs)(J,{title:`Open a project folder`,onClose:e,width:520,children:[(0,L.jsx)(`p`,{className:`muted`,children:`Pick the root of a Next.js app (the folder with its package.json).`}),(0,L.jsxs)(`div`,{className:`field`,children:[(0,L.jsx)(`span`,{className:`prefix`,children:(0,L.jsx)(D,{size:13})}),(0,L.jsx)(`input`,{autoFocus:!0,value:n,onChange:e=>r(e.target.value),onKeyDown:e=>e.key===`Enter`&&t(i?.path??n),spellCheck:!1})]}),(0,L.jsxs)(`div`,{className:`dir-list`,children:[i&&(0,L.jsxs)(`button`,{className:`dir-row`,onClick:()=>r(i.path.split(`/`).slice(0,-1).join(`/`)||`/`),children:[(0,L.jsx)(D,{size:14,className:`faint`}),` ..`]}),i?.dirs.map(e=>(0,L.jsxs)(`button`,{className:`dir-row`,onClick:()=>r(`${i.path}/${e.name}`),onDoubleClick:()=>e.next&&t(`${i.path}/${e.name}`),children:[(0,L.jsx)(D,{size:14,className:e.next?``:`faint`}),(0,L.jsx)(`span`,{children:e.name}),e.next&&(0,L.jsx)(`span`,{className:`chip accent`,children:`Next.js`})]},e.name)),o&&(0,L.jsx)(`div`,{className:`faint`,style:{padding:8},children:o})]}),(0,L.jsxs)(`div`,{className:`modal-actions`,children:[(0,L.jsx)(`button`,{className:`btn outline`,onClick:e,children:`Cancel`}),(0,L.jsxs)(`button`,{className:`btn primary`,onClick:()=>t(i?.path??n),children:[`Open `,i?z(i.path).split(`/`).pop():``]})]})]})}function X({onClose:e,onClone:t}){let[n,r]=(0,F.useState)(null),[i,a]=(0,F.useState)(``),[o,s]=(0,F.useState)(`~/Github`);(0,F.useEffect)(()=>{R(`/api/hub/github/repos`).then(r).catch(e=>r({gh:!1,error:e.message,repos:[]}))},[]);let c=/^(https?:|git@|ssh:|file:)/.test(i.trim())||/^[\w.-]+\/[\w.-]+$/.test(i.trim()),l=(n?.repos??[]).filter(e=>!i||`${e.nameWithOwner} ${e.description??``}`.toLowerCase().includes(i.toLowerCase()));return(0,L.jsxs)(J,{title:`Clone from GitHub`,onClose:e,width:560,children:[(0,L.jsx)(`p`,{className:`muted`,children:`Clones the repo, installs its dependencies and sets up Truecanvas if it isn't there yet. Then it's one click to open.`}),(0,L.jsxs)(`div`,{className:`field`,children:[(0,L.jsx)(`span`,{className:`prefix`,children:(0,L.jsx)(d,{size:13})}),(0,L.jsx)(`input`,{autoFocus:!0,value:i,placeholder:`Search your repositories, or paste owner/name or a git URL`,onChange:e=>a(e.target.value),onKeyDown:e=>e.key===`Enter`&&c&&t(i.trim(),o),spellCheck:!1})]}),(0,L.jsxs)(`div`,{className:`dir-list`,style:{height:260},children:[n===null&&(0,L.jsx)(`div`,{className:`faint`,style:{padding:10},children:`Loading your repositories…`}),n&&!n.gh&&(0,L.jsxs)(`div`,{className:`faint`,style:{padding:10,lineHeight:1.5},children:[`The GitHub CLI isn't signed in, so your repositories can't be listed. Paste a git URL above, or run `,(0,L.jsx)(`span`,{className:`mono`,children:`gh auth login`}),` in a terminal.`]}),c&&!l.some(e=>e.nameWithOwner===i.trim())&&(0,L.jsxs)(`button`,{className:`dir-row`,onClick:()=>t(i.trim(),o),children:[(0,L.jsx)(y,{size:14}),(0,L.jsxs)(`span`,{children:[`Clone `,(0,L.jsx)(`strong`,{children:i.trim()})]})]}),l.map(e=>(0,L.jsxs)(`button`,{className:`dir-row repo-row`,onClick:()=>t(e.nameWithOwner,o),title:e.description??``,children:[e.isPrivate?(0,L.jsx)(m,{size:13,className:`faint`}):(0,L.jsx)(y,{size:13,className:`faint`}),(0,L.jsx)(`span`,{style:{fontWeight:500},children:e.nameWithOwner}),(0,L.jsx)(`span`,{className:`faint`,style:{marginLeft:`auto`,whiteSpace:`nowrap`},children:K(Date.parse(e.updatedAt))})]},e.nameWithOwner))]}),(0,L.jsxs)(`div`,{className:`field`,style:{marginTop:10},children:[(0,L.jsx)(`span`,{className:`prefix`,children:(0,L.jsx)(D,{size:13})}),(0,L.jsx)(`input`,{value:o,onChange:e=>s(e.target.value),"aria-label":`Clone into`,spellCheck:!1})]}),(0,L.jsx)(`div`,{className:`modal-actions`,style:{marginTop:12},children:(0,L.jsx)(`button`,{className:`btn outline`,onClick:e,children:`Cancel`})})]})}function Z({project:e,onClose:t,onOpened:n}){let[r,i]=(0,F.useState)(null),[a,o]=(0,F.useState)(null),[s,c]=(0,F.useState)(null);(0,F.useEffect)(()=>{R(`/api/hub/prs?path=${encodeURIComponent(e.path)}`).then(i).catch(e=>i({error:e.message,prs:[]}))},[e.path]);let l=async t=>{o(t),c(null);try{await R(`/api/hub/pr-checkout`,{path:e.path,number:String(t)}),n()}catch(e){c(e.message)}finally{o(null)}};return(0,L.jsxs)(J,{title:`Pull requests · ${e.name}`,onClose:t,width:560,children:[(0,L.jsx)(`p`,{className:`muted`,children:`Open a pull request to see its design in Truecanvas: its branch is checked out and the canvases show that version.`}),(0,L.jsxs)(`div`,{className:`dir-list`,style:{height:280},children:[r===null&&(0,L.jsx)(`div`,{className:`faint`,style:{padding:10},children:`Loading…`}),r?.error&&(0,L.jsx)(`div`,{className:`faint`,style:{padding:10},children:r.error}),r&&!r.error&&r.prs.length===0&&(0,L.jsx)(`div`,{className:`faint`,style:{padding:10},children:`No open pull requests.`}),r?.prs.map(e=>(0,L.jsxs)(`button`,{className:`dir-row repo-row`,disabled:a!==null,onClick:()=>void l(e.number),children:[a===e.number?(0,L.jsx)(_,{size:14,className:`spin-working`}):(0,L.jsx)(g,{size:14,className:e.isDraft?`faint`:`pr-open`}),(0,L.jsxs)(`span`,{style:{fontWeight:500,overflow:`hidden`,textOverflow:`ellipsis`,whiteSpace:`nowrap`},children:[`#`,e.number,` `,e.title]}),(0,L.jsxs)(`span`,{className:`faint`,style:{marginLeft:`auto`,whiteSpace:`nowrap`},children:[e.author?.login,` · `,K(Date.parse(e.updatedAt))]})]},e.number))]}),s&&(0,L.jsx)(`div`,{className:`hub-error`,children:s}),(0,L.jsx)(`div`,{className:`modal-actions`,style:{marginTop:12},children:(0,L.jsx)(`button`,{className:`btn outline`,onClick:t,children:`Close`})})]})}function Q({onClose:e,onCreate:t}){let[n,r]=(0,F.useState)(``),[i,a]=(0,F.useState)(`~/Github`),o=n.trim().toLowerCase().replace(/[^a-z0-9-_]+/g,`-`).replace(/^-+|-+$/g,``);return(0,L.jsxs)(J,{title:`New project`,onClose:e,children:[(0,L.jsx)(`p`,{className:`muted`,children:`Creates a Next.js app with TypeScript and Tailwind, then sets up Truecanvas in it.`}),(0,L.jsxs)(`div`,{style:{display:`grid`,gap:8},children:[(0,L.jsxs)(`div`,{className:`field`,children:[(0,L.jsx)(`span`,{className:`prefix`,children:`Name`}),(0,L.jsx)(`input`,{autoFocus:!0,value:n,placeholder:`my-app`,onChange:e=>r(e.target.value),onKeyDown:e=>e.key===`Enter`&&o&&t(o,i)})]}),(0,L.jsxs)(`div`,{className:`field`,children:[(0,L.jsx)(`span`,{className:`prefix`,children:`In`}),(0,L.jsx)(`input`,{value:i,onChange:e=>a(e.target.value),spellCheck:!1})]}),o&&(0,L.jsx)(`div`,{className:`faint mono`,children:`${i.replace(/\/$/,``)}/${o}`})]}),(0,L.jsxs)(`div`,{className:`modal-actions`,style:{marginTop:16},children:[(0,L.jsx)(`button`,{className:`btn outline`,onClick:e,children:`Cancel`}),(0,L.jsx)(`button`,{className:`btn primary`,disabled:!o,onClick:()=>t(o,i),children:`Create project`})]})]})}function $({job:e,onClose:t}){let[n,r]=(0,F.useState)(e),i=(0,F.useRef)(null);return(0,F.useEffect)(()=>{if(n.status!==`running`)return;let e=setInterval(()=>void R(`/api/hub/jobs/${n.id}`).then(r),700);return()=>clearInterval(e)},[n.id,n.status]),(0,F.useEffect)(()=>{i.current?.scrollTo({top:i.current.scrollHeight})},[n.log.length]),(0,L.jsxs)(J,{title:n.title,onClose:()=>n.status!==`running`&&t(),width:600,children:[(0,L.jsxs)(`div`,{className:`job-status`,children:[n.status===`running`?(0,L.jsx)(_,{size:16,className:`spin-working`}):n.status===`done`?(0,L.jsx)(`span`,{className:`live-dot`}):(0,L.jsx)(j,{size:16,className:`warn`}),(0,L.jsx)(`span`,{children:n.status===`running`?`Working… this can take a minute.`:n.status===`done`?`Done.`:`Something went wrong.`})]}),(0,L.jsx)(`pre`,{className:`job-log`,ref:i,children:n.log.slice(-120).join(`
+`)}),(0,L.jsx)(`div`,{className:`modal-actions`,children:n.status===`done`&&n.result?(0,L.jsx)(`button`,{className:`btn primary`,onClick:()=>t(n.result),children:`Open project`}):(0,L.jsx)(`button`,{className:`btn outline`,disabled:n.status===`running`,onClick:()=>t(),children:`Close`})})]})}(0,P.createRoot)(document.getElementById(`root`)).render((0,L.jsx)(V,{}));

package/dist/editor/assets/main-CfAJbDf1.js

@@ -0,0 +1,25 @@
+import{i as e,r as t,t as n}from"./react-DB-4Zxce.js";import{C as r,D as i,E as a,O as o,S as s,T as c,_ as l,a as u,b as d,c as f,d as p,f as m,g as h,h as g,i as _,l as v,m as y,n as b,o as x,p as S,r as C,s as w,t as T,u as E,v as D,w as ee,x as te,y as O}from"./controls-BYFjuGCq.js";var ne={name:`arrow-down`,size:24,node:[[`path`,{d:`M12 5v14`,key:`s699le`}],[`path`,{d:`m19 12-7 7-7-7`,key:`1idqje`}]]};ne.node;var re=a(ne),ie={name:`arrow-right`,size:24,node:[[`path`,{d:`M5 12h14`,key:`1ays0h`}],[`path`,{d:`m12 5 7 7-7 7`,key:`xquz4c`}]]};ie.node;var ae=a(ie),k={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`}]]};k.node;var A=a(k),j={name:`arrow-up`,size:24,node:[[`path`,{d:`m5 12 7-7 7 7`,key:`hav0vg`}],[`path`,{d:`M12 19V5`,key:`x0mq9r`}]]};j.node;var oe=a(j),M={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`}]]};M.node;var N=a(M),P={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`]};P.node;var se=a(P),ce={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`}]]};ce.node;var le=a(ce),ue={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`]};ue.node;var de=a(ue),fe={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`]};fe.node;var pe=a(fe),me={name:`circle-dot`,size:24,node:[[`circle`,{cx:`12`,cy:`12`,r:`1`,key:`41hilf`}],[`circle`,{cx:`12`,cy:`12`,r:`10`,key:`1mglay`}]]};me.node;var he=a(me),ge={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`]};ge.node;var _e=a(ge),ve={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`]};ve.node;var ye=a(ve),be={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`]};be.node;var xe=a(be),Se={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`}]]};Se.node;var F=a(Se),Ce={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`}]]};Ce.node;var we=a(Ce),Te={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`}]]};Te.node;var Ee=a(Te),De={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`}]]};De.node;var Oe=a(De),ke={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`}]]};ke.node;var Ae=a(ke),je={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`}]]};je.node;var Me=a(je),Ne={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`}]]};Ne.node;var Pe=a(Ne),Fe={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`]};Fe.node;var Ie=a(Fe),Le={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`}]]};Le.node;var Re=a(Le),ze={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`}]]};ze.node;var Be=a(ze),Ve={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`}]]};Ve.node;var I=a(Ve),He={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`]};He.node;var Ue=a(He),We={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`}]]};We.node;var Ge=a(We),Ke={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`}]]};Ke.node;var qe=a(Ke),Je={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`]};Je.node;var Ye=a(Je),Xe={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`}]]};Xe.node;var Ze=a(Xe),Qe={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`}]]};Qe.node;var $e=a(Qe),et={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`}]]};et.node;var tt=a(et),nt={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`}]]};nt.node;var rt=a(nt),it={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`}]]};it.node;var at=a(it),ot={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`}]]};ot.node;var st=a(ot),ct={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`}]]};ct.node;var lt=a(ct),ut={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`}]]};ut.node;var dt=a(ut),ft={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`}]]};ft.node;var pt=a(ft),mt={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`}]]};mt.node;var ht=a(mt),gt={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`]};gt.node;var _t=a(gt),vt={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`}]]};vt.node;var yt=a(vt),bt={name:`minus`,size:24,node:[[`path`,{d:`M5 12h14`,key:`1ays0h`}]]};bt.node;var xt=a(bt),St={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`}]]};St.node;var Ct=a(St),wt={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`}]]};wt.node;var Tt=a(wt),Et={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`}]]};Et.node;var Dt=a(Et),Ot={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`}]]};Ot.node;var kt=a(Ot),At={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`}]]};At.node;var jt=a(At),Mt={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`}]]};Mt.node;var Nt=a(Mt),Pt={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`}]]};Pt.node;var Ft=a(Pt),It={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`}]]};It.node;var Lt=a(It),Rt={name:`rectangle-horizontal`,size:24,node:[[`rect`,{width:`20`,height:`12`,x:`2`,y:`6`,rx:`2`,key:`9lu3g6`}]]};Rt.node;var zt=a(Rt),Bt={name:`rectangle-vertical`,size:24,node:[[`rect`,{width:`12`,height:`20`,x:`6`,y:`2`,rx:`2`,key:`1oxtiu`}]]};Bt.node;var Vt=a(Bt),Ht={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`}]]};Ht.node;var Ut=a(Ht),Wt={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`}]]};Wt.node;var Gt=a(Wt),Kt={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`}]]};Kt.node;var qt=a(Kt),Jt={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`]};Jt.node;var Yt=a(Jt),Xt={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`}]]};Xt.node;var Zt=a(Xt),Qt={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`}]]};Qt.node;var $t=a(Qt),en={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`]};en.node;var tn=a(en),nn={name:`square`,size:24,node:[[`rect`,{width:`18`,height:`18`,x:`3`,y:`3`,rx:`2`,key:`afitv7`}]]};nn.node;var rn=a(nn),an={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`}]]};an.node;var on=a(an),sn={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`}]]};sn.node;var cn=a(sn),ln={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`]};ln.node;var un=a(ln),dn={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`]};dn.node;var fn=a(dn),pn={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`]};pn.node;var mn=a(pn),hn={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`}]]};hn.node;var gn=a(hn),_n={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`]};_n.node;var vn=a(_n),yn={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`]};yn.node;var bn=a(yn),xn={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`}]]};xn.node;var Sn=a(xn),Cn={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`}]]};Cn.node;var wn=a(Cn),Tn={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`]};Tn.node;var En=a(Tn),L=e(n(),1),Dn=i(),On=[{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 kn(e){return e?On.find(t=>t.id===e):void 0}async function R(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 z={state:()=>R(`/api/state`),canvas:e=>R(`/api/canvas?name=${encodeURIComponent(e)}`),components:()=>R(`/api/components`),command:e=>R(`/api/command`,e),undo:e=>R(`/api/undo`,{canvas:e}),redo:e=>R(`/api/redo`,{canvas:e}),selection:(e,t)=>R(`/api/selection`,{canvas:e,ids:t}),createCanvas:e=>R(`/api/canvases`,{name:e}),pages:()=>R(`/api/canvases`),renameCanvas:(e,t)=>R(`/api/canvases/rename`,{from:e,to:t}),duplicateCanvas:e=>R(`/api/canvases/duplicate`,{name:e}),deleteCanvas:e=>R(`/api/canvases/delete`,{name:e}),restoreCanvas:e=>R(`/api/canvases/restore`,{name:e}),open:(e,t)=>R(`/api/open`,{canvas:e,id:t}),openFile:e=>R(`/api/open-file`,{file:e}),tokens:()=>R(`/api/tokens`),routes:()=>R(`/api/routes`),gitStatus:()=>R(`/api/git/status`),gitBranches:()=>R(`/api/git/branches`),gitLog:e=>R(`/api/git/log${e?`?canvas=${encodeURIComponent(e)}`:``}`),gitFetch:()=>R(`/api/git/fetch`,{}),gitCommit:(e,t)=>R(`/api/git/commit`,{message:e,scope:t}),gitPush:()=>R(`/api/git/push`,{}),gitPull:()=>R(`/api/git/pull`,{}),gitSwitch:(e,t=!1)=>R(`/api/git/switch`,{branch:e,create:t}),gitChanges:()=>R(`/api/git/changes`),gitDiff:e=>R(`/api/git/diff?canvas=${encodeURIComponent(e)}`),gitPr:(e=!1)=>R(`/api/git/pr${e?`?fresh=1`:``}`),gitCreatePr:e=>R(`/api/git/pr`,e),gitPublish:(e,t=!0)=>R(`/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)=>R(`/api/compare`,{canvas:e,ref:t}),clearCompare:e=>R(`/api/compare/clear`,{canvas:e}),comments:e=>R(`/api/comments?canvas=${encodeURIComponent(e)}`),addComment:e=>R(`/api/comments`,e),replyComment:(e,t,n)=>R(`/api/comments/reply`,{canvas:e,id:t,text:n}),resolveComment:(e,t,n)=>R(`/api/comments/resolve`,{canvas:e,id:t,resolved:n}),deleteComment:(e,t)=>R(`/api/comments/delete`,{canvas:e,id:t}),source:(e,t)=>R(`/api/source`,{canvas:e,id:t})};function An(e,t){let n=null,r=!1,i=()=>{n=new EventSource(`/api/events`),n.onopen=()=>t(!0),n.onmessage=t=>e(JSON.parse(t.data)),n.onerror=()=>{t(!1),n?.close(),r||setTimeout(i,1500)}};return i(),()=>{r=!0,n?.close()}}var jn=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},Mn=(e=>e?jn(e):jn),Nn=e=>e;function Pn(e,t=Nn){let n=L.useSyncExternalStore(e.subscribe,L.useCallback(()=>t(e.getState()),[e,t]),L.useCallback(()=>t(e.getInitialState()),[e,t]));return L.useDebugValue(n),n}var Fn=e=>{let t=Mn(e),n=e=>Pn(t,e);return Object.assign(n,t),n},In=(e=>e?Fn(e):Fn),B=`|`,V=e=>{let t=e.indexOf(B);return t<0?e:e.slice(0,t)};function Ln(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}${B}${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 Rn(e,t,n){return t&&e.has(`${n}${B}${t}`)?`${n}${B}${t}`:n}function zn(e,t,n){if(e.has(t))return t;if(n&&e.has(`${t}${B}${n}`))return`${t}${B}${n}`;for(let n of e.keys())if(n.startsWith(`${t}${B}`))return n;return t}function Bn(e){let t={...e};for(let e of[`id`,`parent`,`from`])typeof t[e]==`string`&&(t[e]=V(t[e]));return Array.isArray(t.ids)&&(t.ids=[...new Set(t.ids.map(V))]),t}var Vn={"claude-code":`#d97757`,claude:`#d97757`,"claude-ai":`#d97757`,cursor:`#7c6cf2`,"codex-mcp-client":`#10a37f`,codex:`#10a37f`},Hn=[`#e5484d`,`#f76b15`,`#ffc53d`,`#30a46c`,`#0090ff`,`#8e4ec6`,`#d6409f`];function Un(e){if(Vn[e])return Vn[e];let t=0;for(let n of e)t=t*31+n.charCodeAt(0)|0;return Hn[Math.abs(t)%Hn.length]}var Wn=(e,t)=>{try{let n=localStorage.getItem(e);return n?JSON.parse(n):t}catch{return t}};function Gn(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 Kn=0,H=In((e,t)=>({ready:!1,connected:!1,appUrl:``,projectName:``,componentsDir:`components`,componentDialog: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:Wn(`tc:canvasTheme`,`system`),uiTheme:Wn(`tc:uiTheme`,`system`),motionPaused:Wn(`tc:motionPaused`,!1),playing:null,deviceChrome:Wn(`tc:deviceChrome`,!0),leftTab:`layers`,rightTab:`design`,expanded:new Set,toasts:[],flashes:[],presence:{},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`,editingText:null,busy:0,set:t=>e(t),setDoc:n=>{let r=t();if(n.error&&r.doc&&!r.doc.error&&r.doc.name===n.name){e({docError:n.error});return}let i=Ln(n);r.docError&&e({docError:null});let a=Gn(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 z.command(Bn(n));t().setDoc(i.doc);let a=t().index,o=i.ids.map(t=>zn(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 z.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 z.redo(e);t().setDoc(n.doc)}catch(e){t().toast(e.message,`info`)}},toast:(n,r=`error`,i)=>{let a=++Kn;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=Yn(r),a=new Set(t()[n]);a.has(i)?a.delete(i):a.add(i),e({[n]:a});let o=t().canvas;o&&qn(`tc:${n}:${o}`,[...a])}})),qn=(e,t)=>{try{localStorage.setItem(e,JSON.stringify(t))}catch{}};function Jn(e,t){return e.theme??t}function Yn(e){return`${e.path.join(`.`)}:${e.name}`}function Xn(e){H.setState({hidden:new Set(Wn(`tc:hidden:${e}`,[])),locked:new Set(Wn(`tc:locked:${e}`,[]))})}function Zn(e){let t=H.getState(),n=t.index.get(e);for(;n;){if(t.locked.has(Yn(n.node)))return!0;n=n.parent?t.index.get(n.parent.id):void 0}return!1}function U(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 Qn=new Map,$n=new Map,er=0,tr=null,nr=null;function rr(e,t){t?Qn.set(e,t):Qn.delete(e)}function ir(e){tr=e}function ar(e){nr=e}function or(e){for(let[t,n]of Qn)if(n.contentWindow===e)return t;return null}function sr(e){let t=Qn.get(e),n=H.getState().appUrl;return t?.contentWindow?{win:t.contentWindow,origin:new URL(n).origin,el:t}:null}function cr(e,t,n=1500){let r=sr(e);if(!r)return Promise.resolve(null);let i=++er;return new Promise(e=>{let a=setTimeout(()=>{$n.delete(i),e(null)},n);$n.set(i,t=>{clearTimeout(a),e(t)}),r.win.postMessage({...t,req:i},r.origin)})}function lr(e,t){let n=sr(e);n?.win.postMessage(t,n.origin)}var ur=e=>H.getState().doc?.frames.find(t=>t.frameName===e)?.id;async function dr(e,t,n){let r=await cr(e,{type:`tc:hit`,x:t,y:n});if(!r)return r;let i=H.getState().index,a=ur(e),o={};for(let[e,t]of Object.entries(r.rects))o[Rn(i,a,e)]=t;return{chain:r.chain.map(e=>Rn(i,a,e)),rects:o}}async function fr(e,t){if(!t.length)return{};let n=await cr(e,{type:`tc:rects`,ids:[...new Set(t.map(V))]}),r={};for(let e of t)r[e]=n?.rects?.[V(e)]??null;return r}async function W(e){let t=H.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])=>fr(e,t))),a=Object.assign({},...i);Object.keys(a).length&&H.setState({rects:{...H.getState().rects,...a}})}var pr=!1;function mr(){if(pr)return;pr=!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:`))return;let i=or(n.source);if(!i)return;let a=H.getState();switch(r.type){case`tc:hit:res`:case`tc:rects:res`:{let e=$n.get(r.req);e&&($n.delete(r.req),e(r));break}case`tc:ready`:H.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&&H.setState({frameHeights:{...H.getState().frameHeights,[i]:n}}),r.ready&&!a.frameReady[i]&&H.setState({frameReady:{...H.getState().frameReady,[i]:!0}}),e.add(i),t||=requestAnimationFrame(()=>{t=0;let n=e;e=new Set,W(n),H.setState({layoutTick:H.getState().layoutTick+1})});break}case`tc:error`:(a.frameErrors[i]??null)!==(r.message??null)&&H.setState({frameErrors:{...a.frameErrors,[i]:r.message??null}});break;case`tc:wheel`:{let e=Qn.get(i);if(!e||!tr)break;let t=e.getBoundingClientRect(),n=a.camera.zoom;tr({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`:nr?.(r)}})}var hr=t({acceptsChildren:()=>Ur,applyToPage:()=>Br,applyUiTheme:()=>Kr,copySelectionCode:()=>Lr,createFrameAt:()=>Gr,deleteSelection:()=>Mr,duplicateSelection:()=>jr,exploreCopy:()=>zr,fitBounds:()=>wr,frameContainer:()=>Hr,frameHeight:()=>G,framesBounds:()=>Tr,insertComponent:()=>Wr,insertionPoint:()=>Vr,kbd:()=>_r,openInEditor:()=>Rr,playFrame:()=>xr,playHeight:()=>br,reorderSelection:()=>Pr,replayFrame:()=>Sr,selectChild:()=>Ir,selectParent:()=>Fr,setCamera:()=>Cr,setViewportSize:()=>yr,viewportSize:()=>vr,wrapSelection:()=>Nr,zoomBy:()=>Or,zoomTo:()=>kr,zoomToFit:()=>Er,zoomToSelection:()=>Dr}),gr=navigator.platform.includes(`Mac`)?`⌘`:`Ctrl+`,_r={mod:gr,dup:`${gr}D`,undo:`${gr}Z`,redo:navigator.platform.includes(`Mac`)?`⇧⌘Z`:`Ctrl+Shift+Z`,copy:`${gr}C`},vr={width:1200,height:800};function yr(e,t){vr={width:e,height:t}}function G(e){let t=H.getState();return t.playing===e.frameName?br(e):e.height??t.frameHeights[e.frameName]??360}function br(e){return e.height??kn(e.device)?.height??900}function xr(e){let t=H.getState();if(e){let n=t.selection.filter(n=>t.index.get(n)?.frame.frameName!==e);H.setState({playing:e,selection:n,hover:null})}else H.setState({playing:null})}function Sr(e){lr(e,{type:`tc:replay`})}function Cr(e){H.setState({camera:e});let t=H.getState().canvas;t&&qn(`tc:camera:${t}`,e)}function wr(e,t=1,n=72){let{width:r,height:i}=vr,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);Cr({zoom:o,x:r/2-(e.x+e.width/2)*o,y:(i-40)/2-(e.y+e.height/2)*o})}function Tr(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}}function Er(){let e=H.getState().doc;e&&wr(Tr(e.frames))}function Dr(){let e=H.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 Er();let n=Math.min(...t.map(e=>e.x)),r=Math.min(...t.map(e=>e.y));wr({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 Or(e,t){let{camera:n}=H.getState(),r=t??{x:vr.width/2,y:vr.height/2},i=Math.min(8,Math.max(.05,n.zoom*e)),a=i/n.zoom;Cr({zoom:i,x:r.x-(r.x-n.x)*a,y:r.y-(r.y-n.y)*a})}function kr(e){Or(e/H.getState().camera.zoom)}var Ar=()=>H.getState().canvas,jr=()=>{let e=H.getState().selection;e.length&&H.getState().run({op:`duplicate`,canvas:Ar(),ids:e})},Mr=()=>{let e=H.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:Ar(),ids:e.selection},{select:!1}).then(e=>{e&&H.getState().select(t.slice(0,1).filter(e=>H.getState().index.has(e)))})},Nr=()=>{let e=H.getState(),t=e.selection.filter(t=>e.index.get(t)?.parent);t.length&&e.run({op:`wrap`,canvas:Ar(),ids:t})},Pr=e=>{let t=H.getState();if(t.selection.length!==1)return;let n=t.index.get(t.selection[0]);n?.parent&&t.run({op:`reorder`,canvas:Ar(),id:n.node.id,delta:e})},Fr=()=>{let e=H.getState(),t=e.selection[0];if(!t)return;let n=e.index.get(t)?.parent;e.select(n?[n.id]:[])},Ir=()=>{let e=H.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 Lr(){let e=H.getState();if(!e.canvas||!e.selection.length)return;let t=await Promise.all(e.selection.map(t=>z.source(e.canvas,V(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 Rr(e){let t=H.getState();t.canvas&&z.open(t.canvas,e&&V(e)).catch(e=>t.toast(e.message))}async function zr(e){let t=H.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(Dr,400))}async function Br(e){let t=H.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 ${_r.undo} if it's not right.`,`info`)}function Vr(){let e=H.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:Hr(e)};if(Ur(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:Hr(r)}:null}function Hr(e){let t=e.children.filter(e=>e.kind!==`text`);return t.length===1&&t[0].kind===`element`&&Ur(t[0])?t[0].id:e.id}function Ur(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=H.getState().components.find(t=>t.name===e.name);return t?t.acceptsChildren:!e.selfClosing}return e.kind===`fragment`}async function Wr(e,t,n){let r=H.getState(),i=t??Vr();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 Gr(e,t,n=800,r=null){let i=H.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 Kr(){let e=H.getState().uiTheme,t=e===`dark`||e===`system`&&window.matchMedia(`(prefers-color-scheme: dark)`).matches;document.documentElement.dataset.ui=t?`dark`:`light`}var qr=/^(-?)(gap|p|px|py|pt|pr|pb|pl)-(\d+(?:\.\d+)?|px|\[(\d+(?:\.\d+)?)px\])$/;function Jr(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 Yr(e){return e.split(/\s+/).filter(Boolean)}function Xr(e){let t=Yr(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=qr.exec(e);if(!t)continue;let r=Jr(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 K(e,t){let n=t/4;return Number.isInteger(n*2)?`${e}-${n}`:`${e}-[${t}px]`}function q(e,t,n){let r=Yr(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 Zr(e,t,n=`col`){return t?q(e,e=>e===`block`||e===`grid`,n===`col`?[`flex`,`flex-col`,`gap-2`]:[`flex`,`gap-2`]):q(e,e=>[`flex`,`inline-flex`,`flex-col`,`flex-row`,`flex-wrap`].includes(e)||e.startsWith(`gap-`)||e.startsWith(`items-`)||e.startsWith(`justify-`),[])}function Qr(e,t,n){let r=e=>{let n=qr.exec(e);return!n||e.includes(`:`)?!1:t===`gap`?n[2]===`gap`:n[2]===t||n[2]===`p`},i=e,a=Yr(e).find(e=>/^p-/.test(e));if(a&&t!==`gap`){let n=Jr(qr.exec(a)[3]);i=q(e,e=>e===a,n===null?[]:[K(t===`px`?`py`:`px`,n)])}return q(i,r,n===null||Number.isNaN(n)?[]:[K(t,Math.max(0,n))])}function $r(e,t){return q(e,e=>e===`flex-wrap`||e===`flex-nowrap`,t?[`flex-wrap`]:[])}function ei(e,t,n){let r=q(e,e=>e.startsWith(`items-`),t&&t!==`stretch`?[`items-${t}`]:[]);return r=q(r,e=>e.startsWith(`justify-`)&&!e.startsWith(`justify-items`)&&!e.startsWith(`justify-self`),n&&n!==`start`?[`justify-${n}`]:[]),r}function ti(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 ri(e){if(!e)return null;let t=Xr(e);return t.display===`grid`?`Grid`:t.display===`flex`||t.display===`inline-flex`?t.direction===`col`?`Stack`:`Row`:null}var ii=/^text-(xs|sm|base|lg|xl|[2-9]xl|\[\d+(\.\d+)?(px|rem)\])$/,ai=/^text-(left|center|right|justify|start|end)$/,oi=/^text-(wrap|nowrap|balance|pretty|ellipsis|clip|shadow.*)$/,si=/^border(-(0|2|4|8|\[\d+(\.\d+)?px\]))?$/,ci=/^border-(solid|dashed|dotted|double|none|hidden|collapse|separate|spacing.*|[trblxyse](-.+)?)$/,li=/^bg-(gradient|linear|radial|conic|none|cover|contain|auto|center|top|bottom|left|right|no-repeat|repeat.*|fixed|local|scroll|clip.*|origin.*|blend.*|\[url.*)/,ui={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)&&!li.test(e),borderWidth:e=>si.test(e),borderColor:e=>/^border-/.test(e)&&!si.test(e)&&!ci.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=>ii.test(e),textAlign:e=>ai.test(e),textColor:e=>/^text-/.test(e)&&!ii.test(e)&&!ai.test(e)&&!oi.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)},di=e=>Yr(e).filter(e=>!e.includes(`:`));function J(e,t){return di(e).find(ui[t])??null}function Y(e,t,n){return q(e,e=>!e.includes(`:`)&&ui[t](e),n?[n]:[])}function X(e,t){return e&&e.startsWith(t)?e.slice(t.length):null}function fi(e,t){let n=J(e,t===`w`?`width`:`height`),r=X(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:Jr(r),raw:n}:{mode:`auto`,px:null,raw:null}}function pi(e,t,n,r){let i=t===`w`?`width`:`height`;return n===`auto`?Y(e,i,null):n===`fill`?Y(e,i,`${t}-full`):n===`hug`?Y(e,i,`${t}-fit`):Y(e,i,K(t,Math.max(0,Math.round(r??100))))}function mi(e){let t={t:null,r:null,b:null,l:null};for(let n of di(e)){let e=qr.exec(n);if(!e||e[2]===`gap`)continue;let r=Jr(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 hi(e,t){let n=e=>{let t=qr.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(K(`p`,a)):(c!==null&&c===o?r.push(K(`px`,c)):(c!==null&&r.push(K(`pl`,c)),o!==null&&r.push(K(`pr`,o))),a!==null&&a===s?r.push(K(`py`,a)):(a!==null&&r.push(K(`pt`,a)),s!==null&&r.push(K(`pb`,s)))),q(e,n,r)}var gi={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},_i={none:0,xs:2,sm:4,md:6,lg:8,xl:12,"2xl":16,"3xl":24,"4xl":32},vi=[`thin`,`extralight`,`light`,`normal`,`medium`,`semibold`,`bold`,`extrabold`,`black`],yi={thin:100,extralight:200,light:300,normal:400,medium:500,semibold:600,bold:700,extrabold:800,black:900},bi=[`none`,`tight`,`snug`,`normal`,`relaxed`,`loose`],xi=[`tighter`,`tight`,`normal`,`wide`,`wider`,`widest`];function Si(e,t){let n=new Set([`flex`,`inline-flex`,`grid`,`inline-grid`,`flex-col`,`flex-row`,`flex-wrap`]),r=Yr(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 Ci=[{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 wi(e){let t=H.getState(),n=Vr();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 W(),H.getState().rects[r]){H.setState({editingText:r});return}}}async function Ti(e){let t=H.getState();try{let n=await z.command({op:`add_component_frame`,canvas:`components`,component:e}),r=()=>{H.getState().select(n.ids),W().then(()=>Dr())};t.canvas===`components`?(t.setDoc(n.doc),r()):(H.setState({canvas:`components`}),setTimeout(r,700))}catch(e){t.toast(e.message)}}var Z=o(),Q=S(),Ei=e=>e.split(/[^A-Za-z0-9]+/).filter(Boolean).map(e=>e[0].toUpperCase()+e.slice(1)).join(``),Di=e=>e.replace(/([a-z0-9])([A-Z])/g,`$1-$2`).toLowerCase().replace(/[^a-z0-9]+/g,`-`).replace(/^-|-$/g,``);function Oi(e){let t=H.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}H.setState({componentDialog:{from:n?.node.id??null}})}function ki(){let e=H(e=>e.componentDialog),t=H(t=>e?.from?t.index.get(e.from):null),n=H(e=>e.componentsDir);return e?(0,Q.jsx)(ji,{from:e.from,suggestion:t?Ai(t.node):``,dir:n},e.from??`new`):null}function Ai(e){let t=U(e),n=/^[a-z]/.test(t)&&t.length<=8?``:Ei(t);return/^[A-Z]/.test(n)?n:``}function ji({from:e,suggestion:t,dir:n}){let[r,i]=(0,L.useState)(t),[a,o]=(0,L.useState)(!1),s=()=>H.setState({componentDialog:null}),c=Ei(r),l=/^[A-Z][A-Za-z0-9]*$/.test(c),u=async()=>{if(!l||a)return;let t=H.getState();if(!t.canvas)return;o(!0);let n=e?null:Vr(),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 Ti(c)}))};return(0,Z.createPortal)((0,Q.jsx)(`div`,{className:`modal-backdrop`,onPointerDown:()=>!a&&s(),children:(0,Q.jsxs)(`div`,{className:`modal`,style:{width:420},onPointerDown:e=>e.stopPropagation(),onKeyDown:e=>(e.stopPropagation(),e.key===`Escape`&&!a&&s()),children:[(0,Q.jsx)(`div`,{className:`modal-title`,children:e?`Create component`:`New component`}),(0,Q.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,Q.jsxs)(`div`,{className:`field`,style:{marginBottom:6},children:[(0,Q.jsx)(`span`,{className:`prefix`,children:(0,Q.jsx)(F,{size:13})}),(0,Q.jsx)(`input`,{autoFocus:!0,value:r,placeholder:`PricingCard`,onChange:e=>i(e.target.value),onKeyDown:e=>e.key===`Enter`&&void u(),"aria-label":`Component name`,spellCheck:!1})]}),(0,Q.jsx)(`div`,{className:`faint git-note`,style:{marginBottom:14},children:l?(0,Q.jsxs)(Q.Fragment,{children:[(0,Q.jsxs)(`span`,{className:`mono`,children:[n,`/`,Di(c),`.tsx`]}),` `,`exports `,(0,Q.jsx)(`span`,{className:`mono`,children:c})]}):`Letters and digits, starting with a letter.`}),(0,Q.jsxs)(`div`,{className:`modal-actions`,children:[(0,Q.jsx)(`button`,{className:`btn outline`,disabled:a,onClick:s,children:`Cancel`}),(0,Q.jsxs)(`button`,{className:`btn primary`,disabled:!l||a,onClick:()=>void u(),children:[a&&(0,Q.jsx)(O,{size:13,className:`spin-working`}),` `,e?`Create component`:`Create`]})]})]})}),document.body)}var Mi={text:(0,Q.jsx)(Sn,{size:14}),h1:(0,Q.jsx)($e,{size:14}),h2:(0,Q.jsx)(tt,{size:14}),h3:(0,Q.jsx)(rt,{size:14}),link:(0,Q.jsx)(pt,{size:14}),button:(0,Q.jsx)(zt,{size:14}),list:(0,Q.jsx)(ht,{size:14}),stack:(0,Q.jsx)(Yt,{size:14}),row:(0,Q.jsx)(xe,{size:14}),grid:(0,Q.jsx)(d,{size:14}),box:(0,Q.jsx)(rn,{size:14}),section:(0,Q.jsx)(kt,{size:14}),divider:(0,Q.jsx)(xt,{size:14}),image:(0,Q.jsx)(at,{size:14}),input:(0,Q.jsx)(gn,{size:14})};function Ni(){let e=[],t=``;for(let n of Ci)t&&n.group!==t&&e.push(`sep`),t=n.group,e.push({label:n.label,icon:Mi[n.key],kbd:n.kbd,onSelect:()=>void wi(n)});return e.push(`sep`),e.push({label:`Component…`,icon:(0,Q.jsx)(F,{size:14}),onSelect:()=>H.setState({leftTab:`components`})}),e.push({label:`New component…`,icon:(0,Q.jsx)(l,{size:14}),onSelect:()=>Oi(!1)}),e}var Pi=[{tool:`select`,label:`Select`,kbd:`V`,icon:(0,Q.jsx)(Dt,{size:16})},{tool:`frame`,label:`Frame`,kbd:`F`,icon:(0,Q.jsx)(Be,{size:16})},{tool:`hand`,label:`Hand`,kbd:`H`,icon:(0,Q.jsx)(Ze,{size:16})},{tool:`interact`,label:`Interact with the app`,kbd:`P`,icon:(0,Q.jsx)(Lt,{size:16})},{tool:`comment`,label:`Comment`,kbd:`C`,icon:(0,Q.jsx)(yt,{size:16})}],Fi={system:`light`,light:`dark`,dark:`system`};function Ii(){let e=H(e=>e.tool),t=H(e=>e.camera.zoom),n=H(e=>e.canvasTheme),r=H(e=>e.motionPaused),[i,a]=(0,L.useState)(null),[o,s]=(0,L.useState)(null),c=n===`system`?(0,Q.jsx)(Ct,{size:16}):n===`light`?(0,Q.jsx)(on,{size:16}):(0,Q.jsx)(Tt,{size:16});return(0,Q.jsxs)(`div`,{className:`toolbar`,onPointerDown:e=>e.stopPropagation(),children:[Pi.map(t=>(0,Q.jsx)(p,{label:t.label,kbd:t.kbd,children:(0,Q.jsx)(`button`,{className:`icon-btn${e===t.tool?` on`:``}`,"aria-label":t.label,"aria-pressed":e===t.tool,onClick:()=>H.setState({tool:t.tool,hover:null,...t.tool===`comment`?{rightTab:`comments`}:{}}),children:t.icon})},t.tool)),(0,Q.jsx)(p,{label:`Insert`,kbd:`T text`,children:(0,Q.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,Q.jsx)(l,{size:17})})}),o&&(0,Q.jsx)(m,{x:o.x,y:o.y,anchor:`above`,items:Ni(),onClose:()=>s(null)}),(0,Q.jsx)(`span`,{className:`sep`}),(0,Q.jsx)(p,{label:`Canvas theme: ${n}`,children:(0,Q.jsx)(`button`,{className:`icon-btn`,"aria-label":`Canvas theme: ${n}`,onClick:()=>{let e=Fi[n];H.setState({canvasTheme:e}),qn(`tc:canvasTheme`,e)},children:c})}),(0,Q.jsx)(p,{label:r?`Play animations`:`Pause animations`,kbd:`⇧P`,children:(0,Q.jsx)(`button`,{className:`icon-btn${r?` on`:``}`,"aria-label":r?`Play animations`:`Pause animations`,"aria-pressed":r,onClick:Li,children:r?(0,Q.jsx)(Ft,{size:15}):(0,Q.jsx)(jt,{size:15})})}),(0,Q.jsx)(`span`,{className:`sep`}),(0,Q.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,Q.jsx)(m,{x:i.x,y:i.y,onClose:()=>a(null),items:[{label:`Zoom in`,kbd:`⌘+`,onSelect:()=>Or(1.25)},{label:`Zoom out`,kbd:`⌘−`,onSelect:()=>Or(.8)},`sep`,{label:`Zoom to fit`,kbd:`⇧1`,onSelect:Er},{label:`Zoom to selection`,kbd:`⇧2`,onSelect:Dr},{label:`Zoom to 100%`,kbd:`⇧0`,onSelect:()=>kr(1)}]})]})}function Li(){let e=!H.getState().motionPaused;H.setState({motionPaused:e}),qn(`tc:motionPaused`,e)}var Ri=`modulepreload`,zi=function(e){return`/`+e},Bi={},Vi=function(e){return e.pathname.endsWith(`.css`)},Hi=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=zi(t,n);let r=s(t);if(r.href in Bi)return;Bi[r.href]=!0;let i=Vi(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`:Ri,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)})},Ui=[[`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 Wi(e){let t=H.getState(),n=e.meta||e.ctrl,r=e.key.length===1?e.key.toLowerCase():e.key;if(n){if(e.alt&&r===`k`)return Oi(!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 jr(),!0;if(r===`c`&&!e.shift)return!window.getSelection()?.toString()&&(Lr(),!0);if(r===`=`||r===`+`)return Or(1.25),!0;if(r===`-`)return Or(.8),!0;if(r===`0`)return kr(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 Er(),!0;if(e.shift&&e.code===`Digit2`)return Dr(),!0;if(e.shift&&e.code===`Digit0`)return kr(1),!0;if(e.shift&&r===`a`)return Nr(),!0;if(e.shift&&r===`Enter`)return Fr(),!0;if(e.shift&&r===`p`)return Li(),!0;switch(r){case`t`:return wi(Ci[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 Hi(()=>Promise.resolve().then(()=>uo).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):(Ir(),!0)}case`Delete`:case`Backspace`:return Mr(),!0;case`ArrowUp`:case`ArrowLeft`:return Pr(-1),!0;case`ArrowDown`:case`ArrowRight`:return Pr(1),!0}return!1}var Gi=[{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`}],Ki=[{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`}],qi=e=>e.children.filter(e=>!(e.kind===`text`&&!e.text?.trim())),Ji=e=>e.kind===`text`||e.children.some(Ji);function Yi(e,t){return e?.kind===`number`?e.value:t}function Xi(e,t){return e?.kind===`string`?e.value:t}function Zi({node:e}){let t=H(t=>t.index.get(e.id)),n=H(e=>e.canvas),r=H(e=>e.run),[i,a]=(0,L.useState)(`fade-up`),[o,s]=(0,L.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,d=e.name===`Reveal`?e:c?.name===`Reveal`&&qi(c).length===1?c:null,m=qi(e),h=e.name===`TextAnimate`?e:m.length===1&&m[0].name===`TextAnimate`?m[0]:c?.name===`TextAnimate`?c:null,g=!!h||Ji(e),_=e=>void e.then(()=>setTimeout(()=>Sr(l),700)),b=(e,t,i)=>_(r({op:`set_props`,canvas:n,id:e.id,props:{[t]:i}},{select:!1})),x=(t,i)=>_(r({op:`add_animation`,canvas:n,id:e.id,kind:t,effect:i})),S=t=>void r({op:`remove_animation`,canvas:n,id:e.id,kind:t});return(0,Q.jsxs)(u,{title:(0,Q.jsxs)(`span`,{className:`node-head`,children:[(0,Q.jsx)(tn,{size:14,className:`faint`}),` Motion`]}),actions:(0,Q.jsxs)(Q.Fragment,{children:[(0,Q.jsx)(p,{label:`Replay animations`,children:(0,Q.jsx)(`button`,{className:`icon-btn sm`,"aria-label":`Replay animations`,onClick:()=>Sr(l),children:(0,Q.jsx)(qt,{size:13})})}),(0,Q.jsx)(p,{label:`Play: scroll inside the frame`,children:(0,Q.jsx)(`button`,{className:`icon-btn sm`,"aria-label":`Play frame`,onClick:()=>xr(l),children:(0,Q.jsx)(Ft,{size:13})})})]}),children:[(0,Q.jsxs)(`div`,{className:`motion-block`,children:[(0,Q.jsxs)(`div`,{className:`motion-head`,children:[(0,Q.jsx)(`span`,{children:`Reveal on scroll`}),d&&(0,Q.jsx)(p,{label:`Remove reveal`,children:(0,Q.jsx)(`button`,{className:`icon-btn sm`,"aria-label":`Remove reveal`,onClick:()=>S(`reveal`),children:(0,Q.jsx)(y,{size:13})})})]}),d?(0,Q.jsxs)(Q.Fragment,{children:[(0,Q.jsx)(w,{value:Xi(d.props.effect,`fade-up`),options:Gi,onChange:e=>b(d,`effect`,e),ariaLabel:`Reveal effect`}),(0,Q.jsxs)(`label`,{className:`motion-row`,children:[(0,Q.jsx)(`span`,{children:`Delay`}),(0,Q.jsx)(f,{value:Yi(d.props.delay,0),min:0,max:2,onCommit:e=>b(d,`delay`,e),ariaLabel:`Reveal delay`})]}),(0,Q.jsxs)(`label`,{className:`motion-row`,children:[(0,Q.jsx)(`span`,{children:`Duration`}),(0,Q.jsx)(f,{value:Yi(d.props.duration,.6),min:.1,max:2,onCommit:e=>b(d,`duration`,e),ariaLabel:`Reveal duration`})]}),(0,Q.jsxs)(`div`,{className:`motion-row`,children:[(0,Q.jsx)(`span`,{children:`Only once`}),(0,Q.jsx)(v,{on:d.props.once?.kind!==`boolean`||d.props.once.value,onChange:e=>b(d,`once`,e?null:!1),ariaLabel:`Reveal only once`})]})]}):(0,Q.jsxs)(`div`,{className:`grid2`,style:{gridTemplateColumns:`1fr auto`},children:[(0,Q.jsx)(w,{value:i,options:Gi,onChange:a,ariaLabel:`Reveal effect`}),(0,Q.jsx)(`button`,{className:`btn primary`,onClick:()=>x(`reveal`,i),children:`Add`})]})]}),g&&(0,Q.jsxs)(`div`,{className:`motion-block`,children:[(0,Q.jsxs)(`div`,{className:`motion-head`,children:[(0,Q.jsx)(`span`,{children:`Text animation`}),h&&(0,Q.jsx)(p,{label:`Remove text animation`,children:(0,Q.jsx)(`button`,{className:`icon-btn sm`,"aria-label":`Remove text animation`,onClick:()=>S(`text`),children:(0,Q.jsx)(y,{size:13})})})]}),h?(0,Q.jsxs)(Q.Fragment,{children:[(0,Q.jsx)(w,{value:Xi(h.props.effect,`words`),options:Ki,onChange:e=>b(h,`effect`,e),ariaLabel:`Text effect`}),(0,Q.jsxs)(`label`,{className:`motion-row`,children:[(0,Q.jsx)(`span`,{children:`Stagger`}),(0,Q.jsx)(f,{value:Yi(h.props.stagger,.06),min:0,max:.3,onCommit:e=>b(h,`stagger`,e),ariaLabel:`Text stagger`})]}),(0,Q.jsxs)(`label`,{className:`motion-row`,children:[(0,Q.jsx)(`span`,{children:`Delay`}),(0,Q.jsx)(f,{value:Yi(h.props.delay,0),min:0,max:2,onCommit:e=>b(h,`delay`,e),ariaLabel:`Text delay`})]})]}):(0,Q.jsxs)(`div`,{className:`grid2`,style:{gridTemplateColumns:`1fr auto`},children:[(0,Q.jsx)(w,{value:o,options:Ki,onChange:s,ariaLabel:`Text effect`}),(0,Q.jsx)(`button`,{className:`btn primary`,onClick:()=>x(`text`,o),children:`Add`})]})]}),!g&&e.kind===`component`&&e.name!==`Reveal`&&(0,Q.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 Qi=/^(h[1-6]|p|span|a|label|button|li|strong|em|small|blockquote|code|figcaption|dt|dd|th|td)$/;function $i({node:e,component:t}){let n=H(e=>e.canvas),r=H(e=>e.run),i=H(e=>e.tokens),a=e.props.className,o=a?.kind===`string`?a.value:``;if(a?.kind===`expression`)return(0,Q.jsxs)(u,{title:`Styles`,children:[(0,Q.jsx)(`div`,{className:`field readonly`,children:`{${a.code}}`}),(0,Q.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=>t.trim()!==o.trim()&&r({op:`set_class`,canvas:n,id:e.id,className:t},{select:!1}),c=e.kind===`element`&&(Qi.test(e.name)||e.children.some(e=>e.kind===`text`)),l={className:o,write:s,tokens:i};return(0,Q.jsxs)(Q.Fragment,{children:[(0,Q.jsx)(na,{...l,component:t}),(0,Q.jsx)(ra,{...l}),(0,Q.jsx)(ia,{...l}),(0,Q.jsx)(aa,{...l}),(0,Q.jsx)(oa,{...l}),(c||J(o,`textSize`)||J(o,`textColor`))&&(0,Q.jsx)(sa,{...l}),(0,Q.jsx)(u,{title:`Classes`,children:(0,Q.jsx)(E,{mono:!0,multiline:!0,value:o,placeholder:`Tailwind classes`,onCommit:s,ariaLabel:`Classes`})})]})}var ea=e=>e.replace(/-/g,` `).replace(/^./,e=>e.toUpperCase());function ta({axis:e,className:t,write:n}){let r=fi(t,e);return(0,Q.jsxs)(`div`,{className:`size-row`,children:[(0,Q.jsx)(_,{prefix:e.toUpperCase(),value:r.mode===`fixed`?r.px:null,placeholder:r.mode===`fixed`?``:ea(r.mode),min:0,onCommit:r=>n(r===null?pi(t,e,`auto`):pi(t,e,`fixed`,r)),ariaLabel:e===`w`?`Width`:`Height`}),(0,Q.jsx)(w,{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(pi(t,e,i,r.px??240)),ariaLabel:`${e===`w`?`Width`:`Height`} mode`})]})}function na({className:e,write:t,component:n}){let r=(0,L.useMemo)(()=>Xr(e),[e]),i=r.display===`flex`||r.display===`inline-flex`,a=r.display===`grid`,o=mi(e),[s,c]=(0,L.useState)(()=>o.t!==o.b||o.l!==o.r),d=J(e,`overflow`),f=X(J(e,`gridCols`),`grid-cols-`),m=ni(r);return(0,Q.jsxs)(u,{title:`Layout`,actions:(0,Q.jsx)(p,{label:i?`Remove auto layout`:`Add auto layout`,kbd:i?void 0:`⇧A`,children:(0,Q.jsx)(`button`,{className:`icon-btn sm`,onClick:()=>t(Zr(e,!i)),"aria-label":`Toggle auto layout`,children:i?(0,Q.jsx)(xt,{size:13}):(0,Q.jsx)(l,{size:13})})}),children:[(0,Q.jsxs)(`div`,{className:`grid2`,children:[(0,Q.jsx)(ta,{axis:`w`,className:e,write:t}),(0,Q.jsx)(ta,{axis:`h`,className:e,write:t})]}),(i||a)&&(0,Q.jsxs)(`div`,{className:`row`,style:{alignItems:`flex-start`,marginTop:10},children:[(0,Q.jsxs)(`div`,{style:{flex:1,display:`grid`,gap:6,minWidth:0},children:[(0,Q.jsx)(x,{value:a?`grid`:r.direction,options:[{value:`col`,icon:(0,Q.jsx)(re,{size:13}),title:`Vertical`},{value:`row`,icon:(0,Q.jsx)(ae,{size:13}),title:`Horizontal`},{value:`grid`,icon:(0,Q.jsx)(Ye,{size:13}),title:`Grid`}],onChange:n=>t(Si(e,n))}),(0,Q.jsx)(_,{prefix:(0,Q.jsx)(p,{label:`Gap between items`,children:(0,Q.jsx)(`span`,{children:`Gap`})}),value:r.gap,placeholder:`0`,min:0,onCommit:n=>t(Qr(e,`gap`,n)),ariaLabel:`Gap`}),a?(0,Q.jsx)(_,{prefix:`Cols`,value:f&&Number(f)||null,placeholder:`1`,min:1,onCommit:n=>t(Y(e,`gridCols`,n?`grid-cols-${Math.round(n)}`:null)),ariaLabel:`Grid columns`}):(0,Q.jsxs)(`div`,{className:`row`,style:{gap:6},children:[(0,Q.jsx)(p,{label:`Wrap`,children:(0,Q.jsx)(`button`,{className:`icon-btn${r.wrap?` on`:``}`,onClick:()=>t($r(e,!r.wrap)),"aria-label":`Wrap`,children:(0,Q.jsx)(vn,{size:14})})}),(0,Q.jsx)(`span`,{className:`faint`,children:`Wrap`})]})]}),i&&(0,Q.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,Q.jsx)(`button`,{className:m.col===i&&m.row===n?`on`:``,"aria-label":`Align ${n}-${i}`,onClick:()=>{let a=ti(r.direction,i,n);t(ei(e,a.items,a.justify))}},`${n}${i}`)))})]}),(0,Q.jsxs)(`div`,{className:`sub-label`,children:[(0,Q.jsx)(`span`,{children:`Padding`}),(0,Q.jsx)(p,{label:s?`Same padding per axis`:`Padding per side`,children:(0,Q.jsx)(`button`,{className:`icon-btn sm${s?` on`:``}`,onClick:()=>c(!s),"aria-label":`Padding per side`,children:(0,Q.jsx)(Zt,{size:12})})})]}),s?(0,Q.jsx)(`div`,{className:`grid4`,children:[`t`,`r`,`b`,`l`].map(n=>(0,Q.jsx)(_,{prefix:{t:`T`,r:`R`,b:`B`,l:`L`}[n],value:o[n],placeholder:`0`,min:0,onCommit:r=>t(hi(e,{...o,[n]:r})),ariaLabel:`Padding ${n}`},n))}):(0,Q.jsxs)(`div`,{className:`grid2`,children:[(0,Q.jsx)(_,{prefix:`↔`,value:o.l===o.r?o.l:null,placeholder:o.l===o.r?`0`:`Mixed`,min:0,onCommit:n=>t(hi(e,{...o,l:n,r:n})),ariaLabel:`Horizontal padding`}),(0,Q.jsx)(_,{prefix:`↕`,value:o.t===o.b?o.t:null,placeholder:o.t===o.b?`0`:`Mixed`,min:0,onCommit:n=>t(hi(e,{...o,t:n,b:n})),ariaLabel:`Vertical padding`})]}),!n&&(0,Q.jsxs)(`label`,{className:`check-row`,children:[(0,Q.jsx)(`input`,{type:`checkbox`,checked:d===`overflow-hidden`||d===`overflow-clip`,onChange:n=>t(Y(e,`overflow`,n.target.checked?`overflow-hidden`:null))}),`Clip content`]})]})}function ra({className:e,write:t,tokens:n}){let r=X(J(e,`opacity`),`opacity-`),i=r===null?100:Number(r.replace(/[[\]%]/g,``))||0,a=J(e,`radius`),o=a===null?``:a===`rounded`?`sm`:a.replace(/^rounded-/,``),s=/^\[(\d+(?:\.\d+)?)px\]$/.exec(o),c=n?.radius??Object.keys(_i).filter(e=>e!==`none`);return(0,Q.jsxs)(u,{title:`Appearance`,children:[(0,Q.jsxs)(`div`,{className:`prop`,children:[(0,Q.jsx)(`label`,{children:`Opacity`}),(0,Q.jsx)(f,{value:i,min:0,max:100,onCommit:n=>t(Y(e,`opacity`,n>=100?null:`opacity-${Math.round(n)}`)),ariaLabel:`Opacity`}),(0,Q.jsx)(`span`,{})]}),(0,Q.jsxs)(`div`,{className:`prop`,children:[(0,Q.jsx)(`label`,{children:`Radius`}),(0,Q.jsx)(w,{value:s?`custom`:o,placeholder:`None`,options:[{value:``,label:`None`},...c.map(e=>({value:e,label:e.toUpperCase(),hint:_i[e]===void 0?void 0:`${_i[e]}px`})),{value:`full`,label:`Full`,hint:`pill`},{value:`custom`,label:`Custom…`}],onChange:n=>t(Y(e,`radius`,n===``?null:n===`custom`?`rounded-[10px]`:`rounded-${n}`)),ariaLabel:`Corner radius`}),(0,Q.jsx)(`span`,{})]}),s&&(0,Q.jsxs)(`div`,{className:`prop`,children:[(0,Q.jsx)(`label`,{}),(0,Q.jsx)(_,{value:Number(s[1]),min:0,onCommit:n=>t(Y(e,`radius`,n===null?null:`rounded-[${n}px]`)),ariaLabel:`Radius in px`}),(0,Q.jsx)(`span`,{})]})]})}function ia({className:e,write:t,tokens:n}){let r=X(J(e,`bg`),`bg-`);return(0,Q.jsx)(u,{title:`Fill`,actions:(0,Q.jsx)(`button`,{className:`icon-btn sm`,"aria-label":r?`Remove fill`:`Add fill`,onClick:()=>t(Y(e,`bg`,r?null:`bg-${n?.colors.find(e=>/surface|background|muted/.test(e.name))?.name??`white`}`)),children:r?(0,Q.jsx)(xt,{size:13}):(0,Q.jsx)(l,{size:13})}),children:r?(0,Q.jsx)(la,{value:r,tokens:n,onChange:n=>t(Y(e,`bg`,n?`bg-${n}`:null)),ariaLabel:`Fill color`}):(0,Q.jsx)(`p`,{className:`faint`,style:{margin:0},children:`No fill.`})})}function aa({className:e,write:t,tokens:n}){let r=J(e,`borderWidth`),i=X(J(e,`borderColor`),`border-`),a=r!==null||i!==null,o=r===null||r===`border`?1:Number(r.replace(/^border-/,``).replace(/[[\]px]/g,``));return(0,Q.jsx)(u,{title:`Stroke`,actions:(0,Q.jsx)(`button`,{className:`icon-btn sm`,"aria-label":a?`Remove stroke`:`Add stroke`,onClick:()=>t(a?Y(Y(e,`borderWidth`,null),`borderColor`,null):Y(Y(e,`borderWidth`,`border`),`borderColor`,`border-${n?.colors.find(e=>e.name===`border`)?.name??`black/10`}`)),children:a?(0,Q.jsx)(xt,{size:13}):(0,Q.jsx)(l,{size:13})}),children:a?(0,Q.jsxs)(`div`,{className:`stroke-row`,children:[(0,Q.jsx)(la,{value:i,tokens:n,placeholder:`Current color`,onChange:n=>t(Y(e,`borderColor`,n?`border-${n}`:null)),ariaLabel:`Stroke color`}),(0,Q.jsx)(w,{value:String(o),options:[`0`,`1`,`2`,`4`,`8`].map(e=>({value:e,label:`${e}px`})),onChange:n=>t(Y(e,`borderWidth`,n===`1`?`border`:`border-${n}`)),ariaLabel:`Stroke width`})]}):(0,Q.jsx)(`p`,{className:`faint`,style:{margin:0},children:`No stroke.`})})}function oa({className:e,write:t,tokens:n}){let r=J(e,`shadow`),i=J(e,`blur`),a=J(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,Q.jsx)(u,{title:`Effects`,actions:(0,Q.jsx)(`button`,{className:`icon-btn sm`,"aria-label":o?`Remove effects`:`Add shadow`,onClick:()=>t(o?Y(Y(Y(e,`shadow`,null),`blur`,null),`backdropBlur`,null):Y(e,`shadow`,`shadow-md`)),children:o?(0,Q.jsx)(xt,{size:13}):(0,Q.jsx)(l,{size:13})}),children:o?(0,Q.jsxs)(Q.Fragment,{children:[(0,Q.jsxs)(`div`,{className:`prop`,children:[(0,Q.jsx)(`label`,{children:`Shadow`}),(0,Q.jsx)(w,{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(Y(e,`shadow`,n?`shadow-${n}`:null)),ariaLabel:`Shadow`}),(0,Q.jsx)(`span`,{})]}),(0,Q.jsxs)(`div`,{className:`prop`,children:[(0,Q.jsx)(`label`,{children:`Layer blur`}),(0,Q.jsx)(w,{value:s(i,`blur`),options:c,onChange:n=>t(Y(e,`blur`,n?`blur-${n}`:null)),ariaLabel:`Layer blur`}),(0,Q.jsx)(`span`,{})]}),(0,Q.jsxs)(`div`,{className:`prop`,children:[(0,Q.jsx)(`label`,{children:`Backdrop`}),(0,Q.jsx)(w,{value:s(a,`backdrop-blur`),options:c,onChange:n=>t(Y(e,`backdropBlur`,n?`backdrop-blur-${n}`:null)),ariaLabel:`Background blur`}),(0,Q.jsx)(`span`,{})]})]}):(0,Q.jsx)(`p`,{className:`faint`,style:{margin:0},children:`No effects.`})})}function sa({className:e,write:t,tokens:n}){let r=X(J(e,`textSize`),`text-`),i=X(J(e,`weight`),`font-`),a=X(J(e,`leading`),`leading-`),o=X(J(e,`tracking`),`tracking-`),s=X(J(e,`textAlign`),`text-`),c=X(J(e,`textColor`),`text-`),l=n?.textSizes??Object.keys(gi);return(0,Q.jsxs)(u,{title:`Text`,children:[(0,Q.jsxs)(`div`,{className:`grid2`,children:[(0,Q.jsx)(w,{value:r??``,placeholder:`Size`,options:[{value:``,label:`Inherit`},...l.map(e=>({value:e,label:e,hint:gi[e]?`${gi[e]}px`:void 0}))],onChange:n=>t(Y(e,`textSize`,n?`text-${n}`:null)),ariaLabel:`Font size`}),(0,Q.jsx)(w,{value:i??``,placeholder:`Weight`,options:[{value:``,label:`Inherit`},...vi.map(e=>({value:e,label:ea(e),hint:String(yi[e])}))],onChange:n=>t(Y(e,`weight`,n?`font-${n}`:null)),ariaLabel:`Font weight`})]}),(0,Q.jsxs)(`div`,{className:`grid2`,children:[(0,Q.jsx)(w,{value:a??``,placeholder:`Line height`,options:[{value:``,label:`Auto`},...bi.map(e=>({value:e,label:ea(e)}))],onChange:n=>t(Y(e,`leading`,n?`leading-${n}`:null)),ariaLabel:`Line height`}),(0,Q.jsx)(w,{value:o??``,placeholder:`Letter spacing`,options:[{value:``,label:`Normal`},...xi.filter(e=>e!==`normal`).map(e=>({value:e,label:ea(e)}))],onChange:n=>t(Y(e,`tracking`,n?`tracking-${n}`:null)),ariaLabel:`Letter spacing`})]}),(0,Q.jsxs)(`div`,{className:`grid2`,children:[(0,Q.jsx)(x,{value:s??`inherit`,options:[{value:`left`,icon:(0,Q.jsx)(mn,{size:13}),title:`Left`},{value:`center`,icon:(0,Q.jsx)(un,{size:13}),title:`Center`},{value:`right`,icon:(0,Q.jsx)(fn,{size:13}),title:`Right`}],onChange:n=>t(Y(e,`textAlign`,n===s?null:`text-${n}`))}),(0,Q.jsx)(la,{value:c,tokens:n,placeholder:`Inherit`,onChange:n=>t(Y(e,`textColor`,n?`text-${n}`:null)),ariaLabel:`Text color`})]})]})}function ca(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 la({value:e,tokens:t,onChange:n,placeholder:r,ariaLabel:i}){let[a,o]=(0,L.useState)(!1),[s,c]=(0,L.useState)(null),l=(0,L.useRef)(null),u=(0,L.useRef)(null),[d,m]=(e??``).split(`/`),[h,g]=(0,L.useState)(/^\[#/.test(d)?d.slice(1,-1):``);(0,L.useEffect)(()=>g(/^\[#/.test(d)?d.slice(1,-1):``),[d]),(0,L.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 _=(e,t=m)=>n(t&&t!==`100`?`${e}/${t}`:e),v=e?/^\[/.test(d)?d.slice(1,-1):d:r??`None`,y=ca(e,t);return(0,Q.jsxs)(Q.Fragment,{children:[(0,Q.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,Q.jsx)(`span`,{className:`swatch`,style:{background:y??void 0},children:!y&&e&&(0,Q.jsx)(rn,{size:10,className:`faint`})}),(0,Q.jsx)(`span`,{className:`label${e?``:` placeholder`}`,children:v}),m&&(0,Q.jsxs)(`span`,{className:`faint`,children:[m,`%`]})]}),a&&s&&(0,Z.createPortal)((0,Q.jsxs)(`div`,{ref:u,className:`color-pop`,style:{left:s.left,top:s.top},onKeyDown:e=>e.stopPropagation(),children:[(0,Q.jsx)(`div`,{className:`pop-title`,children:`Design tokens`}),(0,Q.jsx)(`div`,{className:`token-grid`,children:[...t?.colors??[],{name:`white`,light:`#fff`,dark:null},{name:`black`,light:`#000`,dark:null}].map(e=>(0,Q.jsx)(p,{label:e.name,children:(0,Q.jsx)(`button`,{className:`token-swatch${d===e.name?` on`:``}`,style:{background:e.light},"aria-label":e.name,onClick:()=>_(e.name)})},e.name))}),(0,Q.jsx)(`div`,{className:`pop-title`,children:`Custom`}),(0,Q.jsxs)(`div`,{className:`row`,style:{gap:6},children:[(0,Q.jsx)(`label`,{className:`swatch big`,style:{background:h||`#ffffff`},children:(0,Q.jsx)(`input`,{type:`color`,value:/^#[0-9a-f]{6}$/i.test(h)?h:`#ffffff`,onChange:e=>g(e.target.value),onBlur:()=>h&&_(`[${h}]`)})}),(0,Q.jsx)(`div`,{className:`field`,style:{flex:1},children:(0,Q.jsx)(`input`,{className:`mono-input`,value:h,placeholder:`#hex`,onChange:e=>g(e.target.value),onKeyDown:e=>e.key===`Enter`&&/^#[0-9a-f]{3,8}$/i.test(h)&&_(`[${h}]`)})})]}),(0,Q.jsxs)(`div`,{className:`row`,style:{marginTop:8,gap:6},children:[(0,Q.jsx)(`span`,{className:`muted`,style:{width:52},children:`Opacity`}),(0,Q.jsx)(`div`,{style:{flex:1},children:(0,Q.jsx)(f,{value:Number(m??100),min:0,max:100,onCommit:t=>e&&_(d,String(Math.round(t))),ariaLabel:`Color opacity`})})]}),e&&(0,Q.jsx)(`button`,{className:`btn block`,style:{marginTop:8},onClick:()=>(n(null),o(!1)),children:`Remove`})]}),document.body)]})}var ua=0,da=``,fa=!0;function pa(){fa=!0}function $(e=600){clearTimeout(ua),ua=window.setTimeout(()=>{z.gitStatus().then(e=>{H.setState({git:e});let t=JSON.stringify(e.files)+e.branch;e.repo&&(fa||t!==da)&&(da=t,fa=!1,z.gitChanges().then(({pages:e})=>H.setState({review:e})).catch(()=>{})),e.repo||H.setState({review:[]})}).catch(()=>{})},e)}var ma=0;function ha(e=!1){clearTimeout(ma),ma=window.setTimeout(()=>{z.gitPr(e).then(e=>H.setState({pr:e})).catch(()=>{})},50)}function ga(){let e=H.getState().canvas;e&&z.comments(e).then(({threads:t})=>H.getState().canvas===e&&H.setState({threads:t})).catch(()=>{})}function _a(e){let t=(Date.now()-e)/1e3;return t<60?`now`:t<3600?`${Math.floor(t/60)}m`:t<86400?`${Math.floor(t/3600)}h`:`${Math.floor(t/86400)}d`}function va({author:e,size:t=22}){let n=e.kind===`agent`;return(0,Q.jsx)(`span`,{className:`c-avatar${n?` agent`:``}`,style:{width:t,height:t,background:n?Un(e.name):void 0,fontSize:t*.45},children:n?(0,Q.jsx)(N,{size:t*.55}):e.name.slice(0,1).toUpperCase()})}var ya=e=>e.kind===`agent`?Ya(e.name):e.name;function ba({camera:e,framePos:t}){let n=H(e=>e.threads),r=H(e=>e.doc),i=H(e=>e.openThread),a=H(e=>e.draftComment),o=H(e=>e.showResolved),s=H(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,Q.jsxs)(Q.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,Q.jsxs)(`div`,{className:`c-pin-wrap`,style:t,children:[(0,Q.jsxs)(`button`,{className:`c-pin${e.id===i?` open`:``}${e.resolved?` resolved`:``}${s===`comment`?``:` quiet`}`,"aria-label":`Comment by ${ya(n.author)}`,onPointerDown:e=>e.stopPropagation(),onClick:()=>H.setState({openThread:e.id===i?null:e.id,draftComment:null}),children:[(0,Q.jsx)(va,{author:n.author,size:22}),e.messages.length>1&&(0,Q.jsx)(`span`,{className:`c-count`,children:e.messages.length})]}),e.id===i&&(0,Q.jsx)(Ca,{thread:e})]},e.id)}),a&&(()=>{let e=c(a.frame,a.x,a.y);return e?(0,Q.jsxs)(`div`,{className:`c-pin-wrap`,style:e,children:[(0,Q.jsx)(`span`,{className:`c-pin open draft`,children:(0,Q.jsx)(yt,{size:13})}),(0,Q.jsx)(Sa,{})]}):null})()]})}function xa({placeholder:e,onSubmit:t,autoFocus:n=!0}){let[r,i]=(0,L.useState)(``),[a,o]=(0,L.useState)(!1),s=(0,L.useRef)(null);(0,L.useEffect)(()=>{n&&s.current?.focus()},[n]);let c=async()=>{if(r.trim()&&!a){o(!0);try{await t(r.trim()),i(``)}catch(e){H.getState().toast(e.message)}finally{o(!1)}}};return(0,Q.jsxs)(`div`,{className:`c-composer`,children:[(0,Q.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`&&H.setState({draftComment:null,openThread:null})}}),(0,Q.jsx)(`button`,{className:`icon-btn sm send`,disabled:!r.trim()||a,"aria-label":`Send`,onClick:()=>void c(),children:(0,Q.jsx)(Ee,{size:13})})]})}function Sa(){let e=H(e=>e.draftComment),t=H(e=>e.canvas);return(0,Q.jsxs)(`div`,{className:`c-card`,onPointerDown:e=>e.stopPropagation(),children:[(0,Q.jsx)(xa,{placeholder:e.node?`Comment on ${e.node.name}…`:`Add a comment…`,onSubmit:async n=>{let{thread:r}=await z.addComment({canvas:t,...e,text:n});H.setState({draftComment:null,openThread:r.id}),ga()}}),(0,Q.jsx)(`div`,{className:`c-hint faint`,children:`Enter to post · your agent can read it with list_comments`})]})}function Ca({thread:e}){let t=H(e=>e.canvas),n=(0,L.useRef)(null);(0,L.useEffect)(()=>{n.current?.scrollTo({top:n.current.scrollHeight})},[e.messages.length]);let r=async e=>{try{await e(),ga()}catch(e){H.getState().toast(e.message)}};return(0,Q.jsxs)(`div`,{className:`c-card`,onPointerDown:e=>e.stopPropagation(),onKeyDown:e=>e.stopPropagation(),children:[(0,Q.jsxs)(`div`,{className:`c-card-head`,children:[(0,Q.jsxs)(`span`,{className:`faint`,children:[e.frame,e.node?` · ${e.node.name}`:``]}),(0,Q.jsxs)(`span`,{className:`actions`,children:[(0,Q.jsx)(p,{label:e.resolved?`Reopen`:`Resolve`,children:(0,Q.jsx)(`button`,{className:`icon-btn sm${e.resolved?``:` resolve`}`,"aria-label":e.resolved?`Reopen`:`Resolve`,onClick:()=>void r(()=>z.resolveComment(t,e.id,!e.resolved)),children:e.resolved?(0,Q.jsx)(wn,{size:13}):(0,Q.jsx)(c,{size:14})})}),(0,Q.jsx)(p,{label:`Delete thread`,children:(0,Q.jsx)(`button`,{className:`icon-btn sm`,"aria-label":`Delete thread`,onClick:()=>void r(async()=>{await z.deleteComment(t,e.id),H.setState({openThread:null})}),children:(0,Q.jsx)(bn,{size:13})})})]})]}),(0,Q.jsxs)(`div`,{className:`c-messages`,ref:n,children:[e.messages.map(e=>(0,Q.jsxs)(`div`,{className:`c-msg`,children:[(0,Q.jsx)(va,{author:e.author,size:20}),(0,Q.jsxs)(`div`,{className:`c-body`,children:[(0,Q.jsxs)(`div`,{className:`c-meta`,children:[(0,Q.jsx)(`strong`,{children:ya(e.author)}),` `,(0,Q.jsx)(`span`,{className:`faint`,children:_a(e.at)})]}),(0,Q.jsx)(`div`,{className:`c-text`,children:e.text})]})]},e.id)),e.resolved&&(0,Q.jsxs)(`div`,{className:`c-resolved faint`,children:[(0,Q.jsx)(pe,{size:13}),` Resolved`,e.resolvedBy?` by ${ya(e.resolvedBy)}`:``]})]}),(0,Q.jsx)(xa,{placeholder:`Reply…`,autoFocus:!1,onSubmit:n=>z.replyComment(t,e.id,n).then(ga)})]})}function wa(){let e=H(e=>e.threads),t=H(e=>e.showResolved),n=H(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=H.getState().doc?.frames.find(t=>t.frameName===e.frame);H.setState({openThread:e.id,draftComment:null}),t&&wr({x:t.x+e.x-260,y:t.y+e.y-160,width:520,height:320},1.2)};return(0,Q.jsxs)(`div`,{children:[(0,Q.jsxs)(`div`,{className:`section`,style:{paddingBottom:10},children:[(0,Q.jsx)(`div`,{className:`row`,style:{justifyContent:`space-between`},children:(0,Q.jsxs)(`span`,{className:`muted`,children:[`Press `,(0,Q.jsx)(`span`,{className:`kbd-chip`,children:`C`}),` and click a frame to comment.`]})}),(0,Q.jsxs)(`label`,{className:`check-row`,style:{marginTop:8},children:[(0,Q.jsx)(`input`,{type:`checkbox`,checked:t,onChange:e=>H.setState({showResolved:e.target.checked})}),`Show resolved (`,i,`)`]})]}),!r.length&&(0,Q.jsxs)(`div`,{className:`empty`,children:[(0,Q.jsx)(yt,{size:20}),(0,Q.jsx)(`br`,{}),`No `,t?``:`open `,`comments on this page.`,(0,Q.jsx)(`br`,{}),`Comments are saved in the repo next to the page, so teammates and agents see them.`]}),(0,Q.jsx)(`div`,{className:`c-list`,children:r.map(e=>{let t=e.messages[0],r=e.messages[e.messages.length-1];return(0,Q.jsxs)(`button`,{className:`c-item${e.id===n?` on`:``}${e.resolved?` resolved`:``}`,onClick:()=>a(e),children:[(0,Q.jsx)(va,{author:t.author,size:22}),(0,Q.jsxs)(`div`,{className:`c-body`,children:[(0,Q.jsxs)(`div`,{className:`c-meta`,children:[(0,Q.jsx)(`strong`,{children:ya(t.author)}),(0,Q.jsxs)(`span`,{className:`faint`,children:[e.frame,` · `,_a(r.at)]})]}),(0,Q.jsx)(`div`,{className:`c-text clamp`,children:t.text}),e.messages.length>1&&(0,Q.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 ${ya(r.author)}`:``]})]}),e.resolved&&(0,Q.jsx)(pe,{size:14,className:`faint`})]},e.id)})})]})}function Ta(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}function Ea(){let e=H(e=>e.rightTab),t=H(e=>e.agents),n=Da(),r=H(e=>e.threads.filter(e=>!e.resolved).length);return(0,Q.jsxs)(`aside`,{className:`panel right`,children:[(0,Q.jsx)(`div`,{className:`panel-head`,style:{paddingLeft:10},children:(0,Q.jsxs)(`div`,{className:`tabs`,role:`tablist`,style:{flex:1},children:[(0,Q.jsx)(`button`,{role:`tab`,"aria-selected":e===`design`,className:`tab${e===`design`?` on`:``}`,onClick:()=>H.setState({rightTab:`design`}),children:`Design`}),(0,Q.jsxs)(`button`,{role:`tab`,"aria-selected":e===`comments`,className:`tab${e===`comments`?` on`:``}`,onClick:()=>H.setState({rightTab:`comments`}),children:[`Comments`,r>0&&(0,Q.jsx)(`span`,{className:`count neutral`,children:r})]}),(0,Q.jsxs)(`button`,{role:`tab`,"aria-selected":e===`agent`,className:`tab${e===`agent`?` on`:``}`,onClick:()=>H.setState({rightTab:`agent`}),children:[t.length?(0,Q.jsx)(`span`,{className:`live-dot`}):(0,Q.jsx)(N,{size:13}),`Agent`,n>0&&e!==`agent`&&(0,Q.jsx)(`span`,{className:`count`,children:n})]})]})}),(0,Q.jsx)(`div`,{className:`scroll`,children:e===`design`?(0,Q.jsx)(ka,{}):e===`comments`?(0,Q.jsx)(wa,{}):(0,Q.jsx)(Ka,{})})]})}function Da(){let e=H(e=>e.feed),t=H(e=>e.rightTab),[n,r]=(0,L.useState)(0),i=e.filter(e=>e.actor.kind===`agent`).length;return(0,L.useEffect)(()=>{t===`agent`&&r(i)},[t,i]),Math.max(0,i-n)}function Oa(){let e=H(e=>e.canvas),t=H(e=>e.run),n=[[`Phone`,(0,Q.jsx)($t,{size:13},`p`),On.filter(e=>e.kind===`phone`)],[`Tablet`,(0,Q.jsx)(cn,{size:13},`t`),On.filter(e=>e.kind===`tablet`)],[`Desktop`,(0,Q.jsx)(st,{size:13},`d`),On.filter(e=>e.kind===`desktop`)]];return(0,Q.jsxs)(u,{title:`Frame presets`,children:[(0,Q.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,Q.jsxs)(`div`,{style:{marginBottom:10},children:[(0,Q.jsxs)(`div`,{className:`muted`,style:{display:`flex`,gap:6,alignItems:`center`,marginBottom:2},children:[r,` `,n]}),i.map(n=>(0,Q.jsxs)(`button`,{className:`btn preset-row`,onClick:async()=>{await t({op:`create_frame`,canvas:e,device:n.id}),H.setState({tool:`select`})},children:[(0,Q.jsx)(`span`,{children:n.name}),(0,Q.jsxs)(`span`,{className:`faint`,children:[n.width,`×`,n.height]})]},n.id))]},n))]})}function ka(){let e=H(e=>e.tool),t=H(e=>e.selection),n=H(e=>e.index),r=t.map(e=>n.get(e)).filter(Boolean);if(e===`frame`)return(0,Q.jsx)(Oa,{});if(!r.length)return(0,Q.jsx)(ja,{});if(r.length>1)return(0,Q.jsx)(Ma,{count:r.length});let i=r[0];return i.node.id===i.frame.id?(0,Q.jsx)(Na,{frame:i.frame}):(0,Q.jsx)(Pa,{node:i.node},i.node.id)}var Aa=e=>[e?{value:`inherit`,label:`Inherit`}:{value:`system`,icon:(0,Q.jsx)(Ct,{size:13}),label:`System`},{value:`light`,icon:(0,Q.jsx)(on,{size:13}),title:`Light`,label:e?void 0:`Light`},{value:`dark`,icon:(0,Q.jsx)(Tt,{size:13}),title:`Dark`,label:e?void 0:`Dark`}];function ja(){let e=H(e=>e.canvasTheme),t=H(e=>e.uiTheme),n=H(e=>e.deviceChrome),r=H(e=>e.doc);return(0,Q.jsxs)(Q.Fragment,{children:[(0,Q.jsxs)(u,{title:`Canvas`,children:[(0,Q.jsx)(`div`,{className:`muted`,style:{marginBottom:6},children:`Frame theme`}),(0,Q.jsx)(`div`,{children:(0,Q.jsx)(`div`,{children:(0,Q.jsx)(x,{value:e,options:Aa(!1),onChange:e=>{H.setState({canvasTheme:e}),qn(`tc:canvasTheme`,e)}})})}),(0,Q.jsx)(`div`,{className:`muted`,style:{margin:`12px 0 6px`},children:`Interface`}),(0,Q.jsx)(`div`,{children:(0,Q.jsx)(`div`,{children:(0,Q.jsx)(x,{value:t,options:Aa(!1),onChange:e=>{H.setState({uiTheme:e}),qn(`tc:uiTheme`,e),Kr()}})})}),(0,Q.jsxs)(`div`,{className:`row`,style:{marginTop:12,justifyContent:`space-between`},children:[(0,Q.jsx)(`span`,{className:`muted`,children:`Device chrome on mobile frames`}),(0,Q.jsx)(v,{on:n,onChange:e=>{H.setState({deviceChrome:e}),qn(`tc:deviceChrome`,e)},ariaLabel:`Device chrome`})]}),r&&(0,Q.jsxs)(`div`,{className:`row muted`,style:{marginTop:10,justifyContent:`space-between`},children:[(0,Q.jsxs)(`button`,{className:`link`,onClick:()=>Rr(),children:[(0,Q.jsx)(Ie,{size:13}),(0,Q.jsx)(`span`,{children:r.file})]}),(0,Q.jsxs)(`span`,{className:`faint`,children:[r.frames.length,` `,r.frames.length===1?`frame`:`frames`]})]})]}),(0,Q.jsx)(u,{title:`Shortcuts`,children:(0,Q.jsx)(`div`,{className:`shortcut-list`,children:Ui.map(([e,t])=>(0,Q.jsxs)(`div`,{children:[(0,Q.jsx)(`span`,{children:e}),(0,Q.jsx)(`span`,{className:`kbd`,children:t})]},e))})})]})}function Ma({count:e}){return(0,Q.jsxs)(u,{title:`${e} layers`,children:[(0,Q.jsxs)(`div`,{className:`grid2`,children:[(0,Q.jsxs)(`button`,{className:`btn outline`,onClick:Nr,children:[(0,Q.jsx)(lt,{size:14}),` Auto layout`]}),(0,Q.jsxs)(`button`,{className:`btn outline`,onClick:jr,children:[(0,Q.jsx)(we,{size:14}),` Duplicate`]})]}),(0,Q.jsxs)(`div`,{className:`grid2`,children:[(0,Q.jsxs)(`button`,{className:`btn outline`,onClick:()=>void Lr(),children:[(0,Q.jsx)(ye,{size:14}),` Copy JSX`]}),(0,Q.jsxs)(`button`,{className:`btn danger outline`,onClick:Mr,children:[(0,Q.jsx)(bn,{size:14}),` Delete`]})]})]})}function Na({frame:e}){let t=H(e=>e.canvas),n=H(e=>e.run),r=H(t=>t.frameHeights[e.frameName]),i=r=>n({op:`update_frame`,canvas:t,frame:e.frameName,...r});return(0,Q.jsxs)(Q.Fragment,{children:[(0,Q.jsxs)(u,{title:(0,Q.jsxs)(`span`,{className:`node-head`,children:[(0,Q.jsx)(Be,{size:14,className:`faint`}),(0,Q.jsx)(`span`,{className:`title`,children:`Frame`})]}),actions:(0,Q.jsx)(p,{label:`Zoom to frame`,kbd:`⇧2`,children:(0,Q.jsx)(`button`,{className:`icon-btn sm`,onClick:Dr,children:(0,Q.jsx)(ae,{size:13,style:{transform:`rotate(-45deg)`}})})}),children:[(0,Q.jsx)(E,{value:e.frameName,onCommit:e=>e.trim()&&i({name:e.trim()}),ariaLabel:`Frame name`}),(0,Q.jsxs)(`div`,{className:`grid2`,style:{marginTop:6,gridTemplateColumns:`1fr auto`},children:[(0,Q.jsx)(w,{value:e.device??``,placeholder:`Custom size`,options:[{value:``,label:`Custom size`,icon:(0,Q.jsx)(Vt,{size:13})},...[`phone`,`tablet`,`desktop`].flatMap(e=>[{value:`h-${e}`,label:e===`phone`?`Phones`:e===`tablet`?`Tablets`:`Desktop`,heading:!0},...On.filter(t=>t.kind===e).map(t=>({value:t.id,label:t.name,hint:`${t.width}×${t.height}`,icon:e===`phone`?(0,Q.jsx)($t,{size:13}):e===`tablet`?(0,Q.jsx)(cn,{size:13}):(0,Q.jsx)(st,{size:13})}))])],onChange:e=>i({device:e||null}),ariaLabel:`Device`}),(0,Q.jsx)(p,{label:`Rotate`,children:(0,Q.jsx)(`button`,{className:`icon-btn`,"aria-label":`Rotate frame`,onClick:()=>i({width:e.height??r??e.width,height:e.width}),children:(0,Q.jsx)(Gt,{size:14})})})]}),(0,Q.jsxs)(`div`,{className:`grid2`,style:{marginTop:6},children:[(0,Q.jsx)(_,{prefix:`X`,value:e.x,onCommit:e=>e!==null&&i({x:e}),ariaLabel:`X`}),(0,Q.jsx)(_,{prefix:`Y`,value:e.y,onCommit:e=>e!==null&&i({y:e}),ariaLabel:`Y`})]}),(0,Q.jsxs)(`div`,{className:`grid2`,children:[(0,Q.jsx)(_,{prefix:`W`,value:e.width,min:120,onCommit:e=>e!==null&&i({width:e}),ariaLabel:`Width`}),(0,Q.jsx)(_,{prefix:`H`,value:e.height,placeholder:r?String(r):`Hug`,min:80,onCommit:e=>i({height:e}),ariaLabel:`Height`})]}),(0,Q.jsx)(`div`,{style:{marginTop:6},children:(0,Q.jsx)(x,{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,Q.jsxs)(u,{title:`Theme`,children:[(0,Q.jsx)(x,{value:e.theme??`inherit`,options:Aa(!0),onChange:e=>i({theme:e===`inherit`?null:e})}),(0,Q.jsx)(`p`,{className:`faint`,style:{margin:`8px 0 0`},children:e.theme?`Always rendered ${e.theme}.`:`Follows the canvas theme.`})]}),(0,Q.jsx)(Ua,{parentId:e.id}),(0,Q.jsx)(Wa,{id:e.id})]})}function Pa({node:e}){let t=H(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,Q.jsxs)(Q.Fragment,{children:[(0,Q.jsx)(u,{title:(0,Q.jsxs)(`span`,{className:`node-head`,children:[e.kind===`component`?(0,Q.jsx)(F,{size:14,style:{color:`var(--component)`}}):(0,Q.jsx)(`span`,{className:`chip mono`,children:`<${e.name}>`}),e.kind===`component`&&(0,Q.jsx)(`span`,{className:`title`,style:{color:`var(--component)`},children:U(e)})]}),actions:(0,Q.jsx)(Q.Fragment,{children:(0,Q.jsx)(p,{label:`Open in editor`,children:(0,Q.jsx)(`button`,{className:`icon-btn sm`,onClick:()=>Rr(e.id),"aria-label":`Open in editor`,children:(0,Q.jsx)(Ae,{size:13})})})}),children:n?(0,Q.jsxs)(Q.Fragment,{children:[n.description&&(0,Q.jsx)(`p`,{className:`muted`,style:{margin:`-4px 0 8px`},children:n.description}),(0,Q.jsxs)(`button`,{className:`link`,onClick:()=>Xo(n.name),children:[(0,Q.jsx)(Ie,{size:13}),(0,Q.jsx)(`span`,{children:n.file})]})]}):e.kind===`component`?(0,Q.jsx)(`p`,{className:`faint`,style:{margin:0},children:`Not in the component catalog. Props are shown as written.`}):null}),e.kind===`component`&&(0,Q.jsx)(La,{node:e,spec:n}),e.kind===`element`&&(0,Q.jsx)(Va,{node:e}),(o||n?.acceptsChildren&&e.children.length===0)&&(0,Q.jsx)(Ha,{node:e}),(0,Q.jsx)(Zi,{node:e}),i&&(0,Q.jsx)($i,{node:e,component:a}),e.kind===`element`&&(0,Q.jsx)(Ua,{parentId:e.id}),(0,Q.jsx)(Wa,{id:e.id})]})}function Fa(e){if(e)return e.kind===`expression`?void 0:e.value}var Ia=(e,t)=>JSON.stringify(e)===JSON.stringify(t);function La({node:e,spec:t}){let n=H(e=>e.canvas),r=H(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])=>Ia(Fa(e.props[t])??a.find(e=>e.name===t)?.default,n)));return(0,Q.jsxs)(u,{title:`Props`,children:[s.length>0&&(0,Q.jsxs)(`div`,{className:`prop`,style:{marginBottom:6},children:[(0,Q.jsx)(`label`,{children:`Preset`}),(0,Q.jsx)(w,{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,Q.jsx)(`span`,{style:{width:22}})]}),a.filter(e=>!e.advanced).map(t=>(0,Q.jsx)(Ba,{spec:t,value:e.props[t.name],onChange:e=>i(t.name,e)},t.name)),a.some(e=>e.advanced)&&(0,Q.jsxs)(`details`,{className:`advanced`,open:a.some(t=>t.advanced&&e.props[t.name]!==void 0),children:[(0,Q.jsx)(`summary`,{children:`Advanced`}),a.filter(e=>e.advanced).map(t=>(0,Q.jsx)(Ba,{spec:t,value:e.props[t.name],onChange:e=>i(t.name,e)},t.name))]}),o.map(t=>(0,Q.jsx)(Ba,{spec:{name:t,type:Ra(e.props[t]),optional:!0,typeText:``},value:e.props[t],onChange:e=>i(t,e)},t)),e.spreads>0&&(0,Q.jsx)(`p`,{className:`faint`,style:{margin:`8px 0 0`},children:`Has spread props, so some values come from code.`})]})}function Ra(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 za=e=>e.replace(/([a-z])([A-Z])/g,`$1 $2`).replace(/^./,e=>e.toUpperCase());function Ba({spec:e,value:t,onChange:n}){let r=t!==void 0,i=Fa(t),a=za(e.name),o=r?(0,Q.jsx)(p,{label:`Reset to default`,children:(0,Q.jsx)(`button`,{className:`icon-btn sm reset`,onClick:()=>n(null),"aria-label":`Reset ${e.name}`,children:(0,Q.jsx)(qt,{size:12})})}):(0,Q.jsx)(`span`,{style:{width:22}}),s;if(t?.kind===`expression`)s=(0,Q.jsx)(p,{label:t.code,children:(0,Q.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,Q.jsx)(`div`,{className:`row`,style:{justifyContent:`flex-end`},children:(0,Q.jsx)(v,{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,Q.jsx)(w,{value:t,placeholder:`Not set`,options:e.options.map(e=>({value:e,label:za(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,Q.jsx)(f,{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,Q.jsx)(_,{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,Q.jsx)(T,{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,Q.jsx)(b,{value:t,onCommit:t=>n(Ia(t,e.default)?null:t)})}else s=e.type===`string`?(0,Q.jsx)(E,{value:typeof i==`string`?i:``,placeholder:e.default===void 0?``:String(e.default),onCommit:e=>n(e===``?null:e),ariaLabel:a}):(0,Q.jsx)(`div`,{className:`field readonly`,title:e.typeText,children:e.type===`function`?`ƒ function`:e.typeText||`unknown`});return e.type===`colors`?(0,Q.jsxs)(`div`,{className:`prop wide-control${r?` set`:``}`,title:e.description,children:[(0,Q.jsx)(`label`,{children:a}),o,(0,Q.jsx)(`div`,{style:{gridColumn:`1 / -1`},children:s})]}):(0,Q.jsxs)(`div`,{className:`prop${r?` set`:``}`,title:e.description,children:[(0,Q.jsx)(`label`,{children:a}),s,o]})}function Va({node:e}){let t=H(e=>e.canvas),n=H(e=>e.run),r=Object.keys(e.props).filter(e=>e!==`className`&&e!==`data-name`);return r.length?(0,Q.jsx)(u,{title:`Attributes`,children:r.map(r=>(0,Q.jsx)(Ba,{spec:{name:r,type:Ra(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 Ha({node:e}){let t=H(e=>e.canvas),n=H(e=>e.run),r=e.children.map(e=>e.text??``).join(` `);return(0,Q.jsx)(u,{title:`Content`,children:(0,Q.jsx)(E,{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 Ua({parentId:e}){let t=H(e=>e.canvas),n=H(e=>e.run),r=H(e=>e.components).filter(e=>e.library&&e.acceptsClassName&&e.presets?.length),[i,a]=(0,L.useState)(``);if(!r.length)return null;let o=r.find(e=>e.name===i);return(0,Q.jsxs)(u,{title:(0,Q.jsxs)(`span`,{className:`node-head`,children:[(0,Q.jsx)(En,{size:14,className:`faint`}),` Shader background`]}),children:[(0,Q.jsxs)(`div`,{className:`grid2`,style:{gridTemplateColumns:`1fr auto`},children:[(0,Q.jsx)(w,{value:i,placeholder:`Choose a shader`,options:r.map(e=>({value:e.name,label:za(e.name),hint:`${e.presets.length} presets`,icon:(0,Q.jsx)(En,{size:13})})),onChange:a,ariaLabel:`Shader`}),(0,Q.jsx)(`button`,{className:`btn primary`,disabled:!o,onClick:()=>o&&n({op:`add_background`,canvas:t,parent:e,component:o.name}),children:`Add`})]}),(0,Q.jsx)(`p`,{className:`faint`,style:{margin:`8px 0 0`},children:`Fills the layer behind its content. Pick a preset in its props after.`})]})}function Wa({id:e}){let t=H(e=>e.canvas),n=H(t=>t.index.get(e));return n?(0,Q.jsxs)(u,{title:`Code`,actions:(0,Q.jsxs)(Q.Fragment,{children:[(0,Q.jsx)(C,{label:`Copy JSX`,text:()=>z.source(t,V(e)).then(e=>e.code)}),(0,Q.jsx)(p,{label:`Open in editor`,children:(0,Q.jsx)(`button`,{className:`icon-btn sm`,onClick:()=>Rr(e),"aria-label":`Open in editor`,children:(0,Q.jsx)(Ae,{size:13})})})]}),children:[(0,Q.jsx)(`button`,{className:`link mono`,onClick:()=>Rr(e),children:(0,Q.jsxs)(`span`,{children:[/[jt]sx?#/.test(e)?e.slice(0,e.lastIndexOf(`#`)):H.getState().doc?.file,`:`,n.node.line]})}),(0,Q.jsxs)(`div`,{className:`grid2`,style:{marginTop:10},children:[(0,Q.jsxs)(`button`,{className:`btn outline`,onClick:jr,children:[(0,Q.jsx)(we,{size:14}),` Duplicate`]}),(0,Q.jsxs)(`button`,{className:`btn danger outline`,onClick:Mr,children:[(0,Q.jsx)(bn,{size:14}),` Delete`]})]})]}):null}var Ga=[`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 Ka(){let e=H(e=>e.agents),t=H(e=>e.mcpUrl),n=H(e=>e.feed),r=H(e=>e.history),i=H(e=>e.selection),a=H(e=>e.index),[o,s]=(0,L.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`},d=i.map(e=>a.get(e)?.node).filter(Boolean);return(0,Q.jsxs)(Q.Fragment,{children:[(0,Q.jsx)(u,{title:e.length?`Connected`:`Connect an agent`,children:e.length?(0,Q.jsxs)(`div`,{children:[e.map(e=>(0,Q.jsxs)(`div`,{className:`agent-row`,children:[(0,Q.jsx)(`span`,{className:`live-dot`}),(0,Q.jsx)(`span`,{style:{fontWeight:500},children:Ya(e.name)}),(0,Q.jsxs)(`span`,{className:`faint`,style:{marginLeft:`auto`},children:[`active `,(0,Q.jsx)(Xa,{at:e.lastSeen})]})]},e.session)),(0,Q.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,Q.jsxs)(Q.Fragment,{children:[(0,Q.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,Q.jsx)(x,{value:o,options:[{value:`claude`,label:`Claude`},{value:`cursor`,label:`Cursor`},{value:`codex`,label:`Codex`},{value:`url`,label:`URL`}],onChange:s}),(0,Q.jsxs)(`div`,{className:`code-block`,style:{marginTop:8},children:[c[o],(0,Q.jsx)(C,{text:c[o]})]}),(0,Q.jsx)(`p`,{className:`faint`,style:{margin:`6px 0 0`},children:l[o]})]})}),(0,Q.jsxs)(u,{title:`Shared selection`,children:[d.length?(0,Q.jsx)(`div`,{className:`row`,style:{flexWrap:`wrap`,gap:4},children:d.map(e=>(0,Q.jsx)(`span`,{className:`chip${e.kind===`component`?` component`:``}`,children:U(e)},e.id))}):(0,Q.jsx)(`p`,{className:`faint`,style:{margin:0},children:`Select something and agents can read it with get_selection.`}),(0,Q.jsx)(`div`,{style:{marginTop:10,display:`grid`,gap:4},children:Ga.map(e=>(0,Q.jsx)(qa,{text:e},e))})]}),(0,Q.jsxs)(`div`,{className:`section`,style:{padding:`12px 0 0`},children:[(0,Q.jsxs)(`div`,{className:`section-title`,style:{padding:`0 12px`},children:[(0,Q.jsx)(`span`,{children:`Activity`}),(0,Q.jsxs)(`span`,{className:`actions`,style:{marginRight:6},children:[(0,Q.jsx)(p,{label:`Undo`,kbd:`⌘Z`,children:(0,Q.jsx)(`button`,{className:`icon-btn sm`,disabled:!r.undo,onClick:()=>void H.getState().undo(),"aria-label":`Undo`,children:(0,Q.jsx)(wn,{size:13})})}),(0,Q.jsx)(p,{label:`Redo`,kbd:`⇧⌘Z`,children:(0,Q.jsx)(`button`,{className:`icon-btn sm`,disabled:!r.redo,onClick:()=>void H.getState().redo(),"aria-label":`Redo`,children:(0,Q.jsx)(Ut,{size:13})})})]})]}),(0,Q.jsx)(Ja,{entries:n})]})]})}function qa({text:e}){let[t,n]=(0,L.useState)(!1);return(0,Q.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,Q.jsx)(tn,{size:13,style:{flex:`none`,color:`var(--agent)`}}),(0,Q.jsx)(`span`,{children:t?`Copied. Paste it to your agent.`:e})]})}function Ja({entries:e}){let t=H(e=>e.canvas),n=[...e].reverse().slice(0,60);return n.length?(0,Q.jsx)(`div`,{className:`feed`,children:n.map((e,n)=>{let r=e.actor.kind===`user`?`You`:e.actor.kind===`agent`?Ya(e.actor.name):`Code editor`;return(0,Q.jsxs)(`div`,{className:`feed-item${n===0&&Date.now()-e.at<2e3?` new`:``}`,onClick:()=>{e.canvas===t?e.ids.length&&H.getState().select(e.ids.filter(e=>H.getState().index.has(e))):H.setState({canvas:e.canvas})},children:[(0,Q.jsx)(`span`,{className:`avatar ${e.actor.kind}`,children:e.actor.kind===`agent`?(0,Q.jsx)(N,{size:11}):e.actor.kind===`file`?(0,Q.jsx)(ye,{size:11}):`Y`}),(0,Q.jsxs)(`div`,{style:{minWidth:0},children:[(0,Q.jsxs)(`div`,{children:[(0,Q.jsx)(`span`,{className:`who`,children:r}),` `,(0,Q.jsx)(`span`,{className:`muted`,children:e.label.replace(/^./,e=>e.toLowerCase())})]}),(0,Q.jsxs)(`div`,{className:`when`,children:[(0,Q.jsx)(Xa,{at:e.at}),e.canvas!==t&&` · ${e.canvas}`]})]})]},e.id)})}):(0,Q.jsx)(`div`,{className:`empty`,children:`No changes yet. Edits from you, your agent and your code editor show up here.`})}function Ya(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 Xa({at:e}){let[,t]=(0,L.useState)(0);(0,L.useEffect)(()=>{let e=setInterval(()=>t(e=>e+1),15e3);return()=>clearInterval(e)},[]);let n=Math.round((Date.now()-e)/1e3),r=n<10?`just now`:n<60?`${n}s ago`:n<3600?`${Math.floor(n/60)}m ago`:`${Math.floor(n/3600)}h ago`;return(0,Q.jsx)(Q.Fragment,{children:r})}var Za=12e3,Qa=2800;function $a(e,t){let n=H.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];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}}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 eo({camera:e,framePos:t}){let n=H(e=>e.presence);H(e=>e.rects),H(e=>e.index);let[,r]=(0,L.useState)(0);(0,L.useEffect)(()=>{if(!Object.keys(n).length)return;let e=setInterval(()=>r(e=>e+1),500);return()=>clearInterval(e)},[n]);let i=Date.now(),a=Object.values(n).filter(e=>i-e.at<Za);return(0,Q.jsx)(Q.Fragment,{children:a.map(n=>{let r=$a(n,t),a=r?.frame&&n.action===`editing`&&i-n.at<Qa;return(0,Q.jsxs)(`div`,{children:[a&&r.frame&&(0,Q.jsx)(to,{frame:r.frame,framePos:t,camera:e,color:Un(n.name)}),r&&(0,Q.jsx)(no,{presence:n,target:r,camera:e,fading:i-n.at>10500})]},n.session)})})}function to({frame:e,framePos:t,camera:n,color:r}){let i=t(e),a=i.height??G(e);return(0,Q.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 no({presence:e,target:t,camera:n,fading:r}){let i=Un(e.name),a=(0,L.useRef)(null),o=(0,L.useRef)({x:0,y:0}),[,s]=(0,L.useState)(0);(0,L.useEffect)(()=>{a.current||={x:t.x-60,y:t.y-40};let e=0,n=()=>{let r=a.current,i=t.x-r.x,c=t.y-r.y;o.current.x=o.current.x*.72+i*.09,o.current.y=o.current.y*.72+c*.09,r.x+=o.current.x,r.y+=o.current.y,s(e=>e+1),Math.abs(i)+Math.abs(c)>.3||Math.abs(o.current.x)+Math.abs(o.current.y)>.3?e=requestAnimationFrame(n):(r.x=t.x,r.y=t.y)};return e=requestAnimationFrame(n),()=>cancelAnimationFrame(e)},[t.x,t.y]);let c=a.current??t,l=e.action===`editing`&&Date.now()-e.at<Qa;return(0,Q.jsxs)(`div`,{className:`agent-cursor${r?` fading`:``}`,style:{transform:`translate(${n.x+c.x*n.zoom}px, ${n.y+c.y*n.zoom}px)`,"--c":i},"aria-hidden":!0,children:[(0,Q.jsx)(`svg`,{width:`22`,height:`22`,viewBox:`0 0 22 22`,className:`arrow`,children:(0,Q.jsx)(`path`,{d:`M3.6 2.3 18.4 12.6c.6.4.4 1.3-.3 1.4l-6.1 1-3.4 5.3c-.4.6-1.3.5-1.5-.2L2.4 3.4c-.2-.8.6-1.4 1.2-1.1Z`,fill:i,stroke:`#fff`,strokeWidth:`1.4`,strokeLinejoin:`round`})}),(0,Q.jsxs)(`div`,{className:`agent-pill`,children:[l&&(0,Q.jsx)(`span`,{className:`busy-dot`}),(0,Q.jsx)(`span`,{className:`who`,children:Ya(e.name)}),(0,Q.jsx)(`span`,{className:`what`,children:e.label})]})]})}var ro=e=>/^[A-Z][a-z]/.test(e)?e[0].toLowerCase()+e.slice(1):e;function io(e){let t=[];for(let n of e)!t.includes(n.label)&&!/^(Undid|Redid) /.test(n.label)&&t.push(n.label);return t}function ao(e){let t=e.flatMap(e=>e.frames.map(t=>({page:e.canvas,...t,labels:io(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(ro).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)}`:oo(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 oo=e=>e[0].toUpperCase()+e.slice(1),so=e=>e.normalize(`NFD`).replace(/[\u0300-\u036f]/g,``).toLowerCase().replace(/[^a-z0-9]+/g,`-`).replace(/^-|-$/g,``);function co(e,t){let n=e.find(e=>e.canvas===t)??e[0],r=(n?.frames??[]).slice(0,2).map(e=>so(e.name));return`design/${[so(n?.canvas??t??``),...r].filter((e,t,n)=>e&&n.indexOf(e)===t).join(`-`).slice(0,40).replace(/-$/,``)||`changes`}`}var lo=e=>e.split(`
+`)[0].trim(),uo=t({BranchPill:()=>xo,ReviewSheet:()=>ko,startCompare:()=>po,stopCompare:()=>mo});function fo(e){let t=(Date.now()-e)/1e3;return t<60?`just now`:t<3600?`${Math.floor(t/60)}m`:t<86400?`${Math.floor(t/3600)}h`:`${Math.floor(t/86400)}d`}async function po(e,t=e){let n=H.getState();if(n.canvas)try{let r=await z.compare(n.canvas,e);H.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=[...(H.getState().doc?.frames??[]).map(e=>({x:e.x,y:e.y,width:e.width,height:G(e)})),...r.doc.frames.map(e=>Fo(e))];if(!e.length)return;let t=Math.min(...e.map(e=>e.x)),n=Math.min(...e.map(e=>e.y));wr({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 mo(){H.setState({compare:null}),await z.clearCompare().catch(()=>{})}function ho(e,t,n){return e.startsWith(`${t}/`)||!!n?.includes(e)}var go=e=>e.reduce((e,t)=>e+t.frames.length,0);function _o(){let e=H(e=>e.review),t=H(e=>e.commitMessage);return[H(e=>e.commitTouched)?t:ao(e),e=>H.setState({commitMessage:e,commitTouched:!0})]}async function vo(e,t){let{hash:n}=await z.gitCommit(e,t);return H.setState({commitMessage:``,commitTouched:!1}),pa(),$(0),n}async function yo(e,t){try{let n=await e();return t&&H.getState().toast(t,`info`),n}catch(e){return H.getState().toast(e.message),null}}function bo(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 xo(){let e=H(e=>e.git),t=H(e=>e.pr?.pr??null),n=H(e=>e.doc?.file.split(`/`).slice(0,-1).join(`/`)??`canvas`),[r,i]=(0,L.useState)(!1),a=(0,L.useRef)(null);if(!e)return null;let o=e.files.filter(t=>ho(t.path,n,e.linked)).length;return(0,Q.jsxs)(Q.Fragment,{children:[(0,Q.jsx)(p,{label:e.repo?`Branch ${e.branch??`(detached)`}${o?`, ${o} changed design files`:``}${t?`, PR #${t.number}: ${bo(t).text}`:``}`:`Not a git repository`,side:`bottom`,children:(0,Q.jsxs)(`button`,{ref:a,className:`branch-pill${r?` on`:``}`,onClick:()=>i(!r),"aria-label":`Git`,children:[(0,Q.jsx)(I,{size:12}),(0,Q.jsx)(`span`,{className:`name`,children:e.repo?e.branch??`detached`:`no git`}),o>0&&(0,Q.jsx)(`span`,{className:`dot-count`,children:o}),t&&(0,Q.jsx)(`span`,{className:`pr-dot ${bo(t).tone}`}),e.behind>0&&(0,Q.jsxs)(`span`,{className:`ab`,children:[(0,Q.jsx)(re,{size:10}),e.behind]}),e.ahead>0&&(0,Q.jsxs)(`span`,{className:`ab`,children:[(0,Q.jsx)(oe,{size:10}),e.ahead]})]})}),r&&(0,Q.jsx)(So,{anchor:a.current,onClose:()=>i(!1)})]})}function So({anchor:e,onClose:t}){let n=H(e=>e.git),r=H(e=>e.review),i=H(e=>e.pr?.pr??null),a=H(e=>!!e.pr?.github),o=H(e=>e.canvas),s=H(e=>e.doc?.file.split(`/`).slice(0,-1).join(`/`)??`canvas`),c=(0,L.useRef)(null),[u,d]=(0,L.useState)(null),[f,m]=(0,L.useState)([]),[g,_]=_o(),[v,y]=(0,L.useState)(`canvas`),[b,x]=(0,L.useState)(null),[S,C]=(0,L.useState)(null),[T,E]=(0,L.useState)(!1),[D,ne]=(0,L.useState)(!1),[ie,ae]=(0,L.useState)(!1),k=e.getBoundingClientRect(),A=()=>{z.gitBranches().then(d).catch(()=>{}),z.gitLog().then(({commits:e})=>m(e)).catch(()=>{}),pa(),$(0),ha(!0)};(0,L.useEffect)(()=>{A(),z.gitFetch().then(e=>H.setState({git:e})).catch(()=>{});let n=n=>{let r=n.target;!c.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 j=async(e,t,n)=>{x(e),await yo(t,n),x(null),A()},M=n.files.filter(e=>ho(e.path,s,n.linked)),N=n.files.length-M.length,P=v===`canvas`?M.length:n.files.length,se=!!n.branch&&n.branch===n.defaultBranch,ce=n.repo&&a&&!!n.branch&&!se&&!i&&!n.unborn,le=(e,t)=>H.setState({reviewing:{canvas:e,frame:t}});return(0,Z.createPortal)((0,Q.jsxs)(`div`,{ref:c,className:`git-pop`,style:{left:k.left,top:k.bottom+6},onKeyDown:e=>e.stopPropagation(),children:[n.repo?(0,Q.jsxs)(Q.Fragment,{children:[(0,Q.jsxs)(`div`,{className:`git-row`,children:[(0,Q.jsx)(`div`,{style:{flex:1},children:S===null?(0,Q.jsx)(w,{value:n.branch??``,placeholder:`Detached HEAD`,options:[...(u?.local??[]).map(e=>({value:e,label:e,icon:(0,Q.jsx)(I,{size:13}),hint:e===n.defaultBranch?`default`:void 0})),{value:`__new`,label:`New branch…`,icon:(0,Q.jsx)(l,{size:13})}],onChange:e=>e===`__new`?C(co(r,o)):void j(`switch`,()=>z.gitSwitch(e),`Switched to ${e}`),ariaLabel:`Branch`}):(0,Q.jsx)(wo,{value:S,onChange:C,onCancel:()=>C(null),onSubmit:e=>{C(null),j(`switch`,()=>z.gitSwitch(e,!0),`Created ${e}. Your changes came with you.`)}})}),(0,Q.jsx)(p,{label:n.behind?`Pull ${n.behind} commit${n.behind===1?``:`s`}`:`Pull`,children:(0,Q.jsxs)(`button`,{className:`btn outline`,disabled:!!b||!n.remote,onClick:()=>void j(`pull`,()=>z.gitPull(),`Pulled`),children:[b===`pull`?(0,Q.jsx)(O,{size:13,className:`spin-working`}):(0,Q.jsx)(re,{size:13}),n.behind||``]})}),(0,Q.jsx)(p,{label:n.upstream?`Push ${n.ahead} commit${n.ahead===1?``:`s`}`:`Push and track on origin`,children:(0,Q.jsxs)(`button`,{className:`btn outline`,disabled:!!b||!n.remote||!!n.upstream&&!n.ahead,onClick:()=>void j(`push`,()=>z.gitPush(),`Pushed`),children:[b===`push`?(0,Q.jsx)(O,{size:13,className:`spin-working`}):(0,Q.jsx)(oe,{size:13}),n.ahead||``]})})]}),se&&r.length>0&&S===null&&(0,Q.jsxs)(`div`,{className:`git-banner`,children:[(0,Q.jsx)(I,{size:14}),(0,Q.jsxs)(`div`,{className:`text`,children:[(0,Q.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,Q.jsx)(`button`,{className:`btn primary small`,onClick:()=>C(co(r,o)),children:`Start a branch`})]}),!n.remote&&!n.unborn&&(0,Q.jsxs)(`div`,{className:`git-banner muted`,children:[(0,Q.jsx)(_e,{size:14}),(0,Q.jsxs)(`div`,{className:`text`,children:[(0,Q.jsx)(`strong`,{children:`Not on GitHub yet.`}),` Publish the project to push branches and open pull requests.`]}),(0,Q.jsx)(`button`,{className:`btn outline small`,onClick:()=>ae(!0),children:`Publish`})]}),i&&(0,Q.jsx)(Eo,{pr:i,ahead:n.ahead}),(0,Q.jsxs)(`div`,{className:`git-section-title`,children:[(0,Q.jsx)(`span`,{children:`Changes`}),(0,Q.jsxs)(`span`,{className:`actions`,children:[r.length>0&&(0,Q.jsxs)(`button`,{className:`link`,onClick:()=>le(r.find(e=>e.canvas===o)?.canvas??r[0].canvas,null),children:[`Review `,go(r),` frame`,go(r)===1?``:`s`,(0,Q.jsx)(ee,{size:12})]}),(0,Q.jsx)(`button`,{className:`icon-btn sm`,"aria-label":`Refresh`,onClick:A,children:(0,Q.jsx)(h,{size:12})})]})]}),r.length===0&&(0,Q.jsxs)(`div`,{className:`faint git-note`,children:[`No design changes since the last commit`,N?`, ${N} other file${N===1?``:`s`} changed`:``,`.`]}),(0,Q.jsx)(`div`,{className:`git-changes`,children:r.map(e=>e.frames.map(t=>(0,Q.jsxs)(`button`,{className:`git-change`,onClick:()=>le(e.canvas,t.name),children:[(0,Q.jsx)(`span`,{className:`change-mark ${t.status}`}),(0,Q.jsxs)(`span`,{className:`what`,children:[(0,Q.jsxs)(`span`,{className:`frame-name`,children:[t.name,r.length>1||e.canvas!==o?(0,Q.jsxs)(`span`,{className:`faint`,children:[` · `,e.canvas]}):null]}),(0,Q.jsx)(`span`,{className:`faint labels`,children:Co(t)})]}),(0,Q.jsx)(ee,{size:13,className:`faint`})]},`${e.canvas}/${t.name}`)))}),N>0&&r.length>0&&(0,Q.jsxs)(`div`,{className:`faint git-note`,children:[`+ `,N,` other changed file`,N===1?``:`s`,` in the project`]}),(0,Q.jsx)(To,{message:g,setMessage:_,scope:v,setScope:y,toCommit:P,pageCount:M.length,allCount:n.files.length,busy:b,setBusy:x,after:A,unborn:n.unborn}),ce&&(0,Q.jsxs)(`button`,{className:`btn outline pr-btn`,disabled:!!b||M.length>0,title:M.length?`Commit your design changes first`:void 0,onClick:()=>ne(!0),children:[(0,Q.jsx)(te,{size:13}),` Open pull request`]}),(0,Q.jsx)(`button`,{className:`git-section-title toggle`,onClick:()=>E(!T),children:(0,Q.jsxs)(`span`,{children:[(0,Q.jsx)(ee,{size:12,className:T?`rot`:``}),` History & compare`]})}),T&&(0,Q.jsxs)(Q.Fragment,{children:[(0,Q.jsx)(`div`,{className:`git-row`,children:(0,Q.jsx)(`div`,{style:{flex:1},children:(0,Q.jsx)(w,{value:``,placeholder:`Compare this page with…`,options:[...n.unborn?[]:[{value:`HEAD`,label:`Last commit`,hint:`HEAD`,icon:(0,Q.jsx)(Ue,{size:13})}],...(u?.local??[]).filter(e=>e!==n.branch).map(e=>({value:e,label:e,icon:(0,Q.jsx)(I,{size:13})})),...(u?.remote??[]).map(e=>({value:e,label:e,icon:(0,Q.jsx)(I,{size:13})}))],onChange:e=>{t(),po(e,e===`HEAD`?`last commit`:e)},ariaLabel:`Compare with`})})}),(0,Q.jsxs)(`div`,{className:`git-log`,children:[f.length===0&&(0,Q.jsx)(`div`,{className:`faint git-note`,children:`No commits yet.`}),f.slice(0,12).map(e=>(0,Q.jsxs)(`div`,{className:`git-commit`,children:[(0,Q.jsx)(Ue,{size:13,className:`faint`}),(0,Q.jsxs)(`div`,{className:`msg`,children:[(0,Q.jsx)(`div`,{className:`subject`,children:e.subject}),(0,Q.jsxs)(`div`,{className:`faint`,children:[e.author,` · `,fo(e.at),` · `,(0,Q.jsx)(`span`,{className:`mono`,children:e.short})]})]}),(0,Q.jsx)(p,{label:`Compare with this version`,children:(0,Q.jsx)(`button`,{className:`icon-btn sm`,"aria-label":`Compare with ${e.short}`,onClick:()=>{t(),po(e.hash,e.short)},children:(0,Q.jsx)(Ge,{size:13})})})]},e.hash))]})]})]}):(0,Q.jsxs)(`div`,{className:`empty`,style:{padding:18},children:[`This project isn’t a git repository yet.`,(0,Q.jsx)(`br`,{}),`Run `,(0,Q.jsx)(`span`,{className:`mono`,children:`git init`}),` in it to version your canvases.`]}),D&&(0,Q.jsx)(Do,{defaultTitle:f[0]?.subject??``,onClose:()=>ne(!1)}),ie&&(0,Q.jsx)(Oo,{onClose:()=>ae(!1)})]}),document.body)}function Co(e){if(e.status===`added`)return`New frame`;if(e.status===`removed`)return`Removed`;let t=io(e.changes);return t.length?t.slice(0,2).join(` · `)+(t.length>2?` · +${t.length-2}`:``):`Edited`}function wo({value:e,onChange:t,onSubmit:n,onCancel:r}){return(0,Q.jsxs)(`div`,{className:`field`,children:[(0,Q.jsx)(`span`,{className:`prefix`,children:(0,Q.jsx)(I,{size:13})}),(0,Q.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 To(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 yo(()=>vo(t,r),`Committed`),e.setBusy(null),e.after())};return(0,Q.jsxs)(`div`,{className:`commit-box`,children:[(0,Q.jsx)(`div`,{className:`field area`,children:(0,Q.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,Q.jsxs)(`div`,{className:`git-row`,style:{marginTop:6},children:[(0,Q.jsx)(`div`,{style:{flex:1},children:(0,Q.jsx)(w,{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,Q.jsx)(p,{label:`Commit`,kbd:`Ctrl+Enter`,children:(0,Q.jsxs)(`button`,{className:`btn primary`,disabled:!!o||!t.trim()||!a,onClick:()=>void s(),children:[o===`commit`?(0,Q.jsx)(O,{size:13,className:`spin-working`}):(0,Q.jsx)(c,{size:13}),` Commit`]})})]})]})}function Eo({pr:e,ahead:t}){let n=bo(e);return(0,Q.jsxs)(`a`,{className:`pr-card ${n.tone}`,href:e.url,target:`_blank`,rel:`noreferrer`,children:[e.state===`MERGED`?(0,Q.jsx)(qe,{size:15}):(0,Q.jsx)(te,{size:15}),(0,Q.jsxs)(`span`,{className:`what`,children:[(0,Q.jsxs)(`span`,{className:`title`,children:[`#`,e.number,` `,e.title]}),(0,Q.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,Q.jsx)(Ae,{size:13,className:`faint`})]})}function Do({defaultTitle:e,onClose:t}){let n=H(e=>e.git),[r,i]=(0,L.useState)(e),[a,o]=(0,L.useState)(``),[s,c]=(0,L.useState)(!0),[l,u]=(0,L.useState)(!1),[d,f]=(0,L.useState)(!1),[p,m]=(0,L.useState)(null),h=async()=>{f(!0);let e=await yo(()=>z.gitCreatePr({title:r,body:a,screenshots:s,draft:l}));f(!1),e&&(m(e.url),ha(!0),$(0))};return(0,Z.createPortal)((0,Q.jsx)(`div`,{className:`modal-backdrop`,onPointerDown:()=>!d&&t(),children:(0,Q.jsx)(`div`,{className:`modal`,style:{width:460},onPointerDown:e=>e.stopPropagation(),onKeyDown:e=>(e.stopPropagation(),e.key===`Escape`&&!d&&t()),children:p?(0,Q.jsxs)(Q.Fragment,{children:[(0,Q.jsx)(`div`,{className:`modal-title`,children:`Pull request opened`}),(0,Q.jsxs)(`p`,{className:`muted`,children:[`Reviewers see the design changes frame by frame`,s?`, with before and after images`:``,`.`]}),(0,Q.jsxs)(`div`,{className:`modal-actions`,children:[(0,Q.jsx)(`button`,{className:`btn outline`,onClick:t,children:`Close`}),(0,Q.jsxs)(`a`,{className:`btn primary`,href:p,target:`_blank`,rel:`noreferrer`,onClick:t,children:[(0,Q.jsx)(Ae,{size:13}),` Open on GitHub`]})]})]}):(0,Q.jsxs)(Q.Fragment,{children:[(0,Q.jsx)(`div`,{className:`modal-title`,children:`Open a pull request`}),(0,Q.jsxs)(`p`,{className:`muted`,children:[(0,Q.jsx)(`span`,{className:`mono`,children:n.branch}),` into `,(0,Q.jsx)(`span`,{className:`mono`,children:n.defaultBranch??`main`}),`. The description lists what changed in each frame.`]}),(0,Q.jsx)(`div`,{className:`field`,style:{marginBottom:8},children:(0,Q.jsx)(`input`,{autoFocus:!0,value:r,placeholder:`Title`,onChange:e=>i(e.target.value)})}),(0,Q.jsx)(`div`,{className:`field area`,style:{marginBottom:10},children:(0,Q.jsx)(`textarea`,{rows:4,value:a,placeholder:`What's this for? (optional)`,onChange:e=>o(e.target.value)})}),(0,Q.jsxs)(`label`,{className:`check-row`,children:[(0,Q.jsx)(`input`,{type:`checkbox`,checked:s,onChange:e=>c(e.target.checked)}),(0,Q.jsx)(at,{size:13}),` Before / after images of changed frames`]}),s&&(0,Q.jsxs)(`div`,{className:`faint git-note`,style:{margin:`2px 0 6px 22px`},children:[`Stored on a `,(0,Q.jsx)(`span`,{className:`mono`,children:`truecanvas-previews`}),` branch of the repo, so they stay as private as the repo.`]}),(0,Q.jsxs)(`label`,{className:`check-row`,style:{marginBottom:14},children:[(0,Q.jsx)(`input`,{type:`checkbox`,checked:l,onChange:e=>u(e.target.checked)}),(0,Q.jsx)(he,{size:13}),` Draft`]}),(0,Q.jsxs)(`div`,{className:`modal-actions`,children:[(0,Q.jsx)(`button`,{className:`btn outline`,disabled:d,onClick:t,children:`Cancel`}),(0,Q.jsxs)(`button`,{className:`btn primary`,disabled:d||!r.trim(),onClick:()=>void h(),children:[d?(0,Q.jsx)(O,{size:13,className:`spin-working`}):(0,Q.jsx)(te,{size:13}),d?s?`Pushing and rendering…`:`Pushing…`:`Open pull request`]})]})]})})}),document.body)}function Oo({onClose:e}){let t=H(e=>e.projectName||`project`),[n,r]=(0,L.useState)(t.replace(/[^\w.-]+/g,`-`)),[i,a]=(0,L.useState)(!0),[o,s]=(0,L.useState)(!1),c=async()=>{s(!0);let t=await yo(()=>z.gitPublish(n,i),`Published to GitHub`);s(!1),t&&($(0),ha(!0),e())};return(0,Z.createPortal)((0,Q.jsx)(`div`,{className:`modal-backdrop`,onPointerDown:()=>!o&&e(),children:(0,Q.jsxs)(`div`,{className:`modal`,style:{width:400},onPointerDown:e=>e.stopPropagation(),onKeyDown:t=>(t.stopPropagation(),t.key===`Escape`&&!o&&e()),children:[(0,Q.jsx)(`div`,{className:`modal-title`,children:`Publish to GitHub`}),(0,Q.jsx)(`p`,{className:`muted`,children:`Creates a repository on your GitHub account (with the GitHub CLI) and pushes this project to it.`}),(0,Q.jsxs)(`div`,{className:`field`,style:{marginBottom:10},children:[(0,Q.jsx)(`span`,{className:`prefix`,children:(0,Q.jsx)(I,{size:13})}),(0,Q.jsx)(`input`,{autoFocus:!0,value:n,onChange:e=>r(e.target.value),"aria-label":`Repository name`})]}),(0,Q.jsxs)(`label`,{className:`check-row`,style:{marginBottom:14},children:[(0,Q.jsx)(`input`,{type:`checkbox`,checked:i,onChange:e=>a(e.target.checked)}),` Private repository`]}),(0,Q.jsxs)(`div`,{className:`modal-actions`,children:[(0,Q.jsx)(`button`,{className:`btn outline`,disabled:o,onClick:e,children:`Cancel`}),(0,Q.jsxs)(`button`,{className:`btn primary`,disabled:o||!/^[\w.-]+$/.test(n),onClick:()=>void c(),children:[o?(0,Q.jsx)(O,{size:13,className:`spin-working`}):(0,Q.jsx)(_e,{size:13}),` Publish`]})]})]})}),document.body)}function ko(){let e=H(e=>e.reviewing),t=H(e=>e.review),n=H(e=>e.git),r=H(e=>e.doc?.file.split(`/`).slice(0,-1).join(`/`)??`canvas`),[i,a]=(0,L.useState)(`visual`),[o,s]=_o(),[l,u]=(0,L.useState)(!1),d=()=>H.setState({reviewing:null});if((0,L.useEffect)(()=>{if(!e)return;let t=e=>{e.key===`Escape`&&!document.querySelector(`.modal-backdrop`)&&(e.stopPropagation(),d())};return window.addEventListener(`keydown`,t,!0),()=>window.removeEventListener(`keydown`,t,!0)},[e]),!e||!n)return null;let f=t.find(t=>t.canvas===e.canvas)??t[0],p=f?.frames.find(t=>t.name===e.frame)??f?.frames[0],m=(e,t)=>H.setState({reviewing:{canvas:e,frame:t}}),h=n.files.filter(e=>ho(e.path,r,n.linked)).length;return(0,Z.createPortal)((0,Q.jsxs)(`div`,{className:`review-sheet`,onKeyDown:e=>e.stopPropagation(),children:[(0,Q.jsxs)(`div`,{className:`review-head`,children:[(0,Q.jsxs)(`div`,{className:`title`,children:[`Review changes`,(0,Q.jsxs)(`span`,{className:`faint`,children:[` `,`· `,go(t),` frame`,go(t)===1?``:`s`,` on `,(0,Q.jsx)(`span`,{className:`mono`,children:n.branch}),` since the last commit`]})]}),(0,Q.jsxs)(`div`,{className:`seg`,children:[(0,Q.jsxs)(`button`,{className:i===`visual`?`on`:``,onClick:()=>a(`visual`),children:[(0,Q.jsx)(at,{size:13}),` Before / after`]}),(0,Q.jsxs)(`button`,{className:i===`code`?`on`:``,onClick:()=>a(`code`),children:[(0,Q.jsx)(ye,{size:13}),` Code`]})]}),(0,Q.jsx)(`button`,{className:`icon-btn`,"aria-label":`Close`,onClick:d,children:(0,Q.jsx)(y,{size:15})})]}),!f||!p?(0,Q.jsx)(`div`,{className:`empty`,style:{padding:40,flex:1},children:`Nothing to review: no design changes since the last commit.`}):(0,Q.jsxs)(`div`,{className:`review-body`,children:[(0,Q.jsx)(`div`,{className:`review-list`,children:t.map(e=>(0,Q.jsxs)(`div`,{children:[(0,Q.jsx)(`div`,{className:`review-page`,children:e.canvas}),e.frames.map(t=>(0,Q.jsxs)(`button`,{className:`git-change${e.canvas===f.canvas&&t.name===p.name?` on`:``}`,onClick:()=>m(e.canvas,t.name),children:[(0,Q.jsx)(`span`,{className:`change-mark ${t.status}`}),(0,Q.jsxs)(`span`,{className:`what`,children:[(0,Q.jsx)(`span`,{className:`frame-name`,children:t.name}),(0,Q.jsx)(`span`,{className:`faint labels`,children:Co(t)})]})]},t.name))]},e.canvas))}),(0,Q.jsx)(`div`,{className:`review-main`,children:i===`visual`?(0,Q.jsx)(Ao,{page:f,frameName:p.name}):(0,Q.jsx)(No,{canvas:f.canvas})})]}),(0,Q.jsxs)(`div`,{className:`review-foot`,children:[(0,Q.jsx)(`div`,{className:`field area`,style:{flex:1},children:(0,Q.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,Q.jsxs)(`button`,{className:`btn primary`,disabled:l||!o.trim()||!h,onClick:async()=>{u(!0);let e=await yo(()=>vo(o,`canvas`),`Committed: ${lo(o)}`);u(!1),e&&d()},children:[l?(0,Q.jsx)(O,{size:13,className:`spin-working`}):(0,Q.jsx)(c,{size:13}),` Commit design changes`]})]})]}),document.body)}function Ao({page:e,frameName:t}){let n=e.frames.find(e=>e.name===t),r=io(n.changes),i=`${n.changes.length}:${n.changes.at(-1)?.at??0}:${e.files.join(`,`)}`,a=(0,L.useRef)(null),o=(0,L.useRef)(null),s=(0,L.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,Q.jsxs)(`div`,{className:`visual-diff`,children:[(0,Q.jsxs)(`div`,{className:`change-chips`,children:[n.status===`added`&&(0,Q.jsx)(`span`,{className:`chip added`,children:`New frame`}),n.status===`removed`&&(0,Q.jsx)(`span`,{className:`chip removed`,children:`Frame removed`}),r.map(e=>(0,Q.jsx)(`span`,{className:`chip`,children:e},e)),n.status===`changed`&&!r.length&&(0,Q.jsx)(`span`,{className:`chip faint`,children:`Edited outside this session (see Code)`})]}),(0,Q.jsxs)(`div`,{className:`sides`,children:[(0,Q.jsx)(jo,{title:`Last commit`,scrollRef:a,onScroll:()=>c(a.current,o.current),children:n.status===`added`?(0,Q.jsx)(`div`,{className:`side-empty`,children:`Not in the last commit`}):(0,Q.jsx)(Mo,{src:z.previewUrl(e.canvas,t,`before`,i)})}),(0,Q.jsx)(jo,{title:`Now`,scrollRef:o,onScroll:()=>c(o.current,a.current),children:n.status===`removed`?(0,Q.jsx)(`div`,{className:`side-empty`,children:`Removed`}):(0,Q.jsx)(Mo,{src:z.previewUrl(e.canvas,t,`after`,i)})})]})]})}function jo({title:e,scrollRef:t,onScroll:n,children:r}){return(0,Q.jsxs)(`div`,{className:`side`,children:[(0,Q.jsx)(`div`,{className:`side-title`,children:e}),(0,Q.jsx)(`div`,{className:`side-scroll`,ref:t,onScroll:n,children:r})]})}function Mo({src:e}){let[t,n]=(0,L.useState)(`loading`);return(0,L.useEffect)(()=>n(`loading`),[e]),(0,Q.jsxs)(Q.Fragment,{children:[t===`loading`&&(0,Q.jsxs)(`div`,{className:`side-empty`,children:[(0,Q.jsx)(O,{size:16,className:`spin-working`}),` Rendering…`]}),t===`error`&&(0,Q.jsx)(`div`,{className:`side-empty`,children:`Couldn’t render this version.`}),(0,Q.jsx)(`img`,{src:e,alt:``,style:{display:t===`ok`?`block`:`none`},onLoad:()=>n(`ok`),onError:()=>n(`error`)})]})}function No({canvas:e}){let[t,n]=(0,L.useState)(null),r=H(e=>e.review);return(0,L.useEffect)(()=>{n(null),z.gitDiff(e).then(e=>n(e.diff)).catch(()=>n(``))},[e,r]),t===null?(0,Q.jsx)(`div`,{className:`side-empty`,children:(0,Q.jsx)(O,{size:16,className:`spin-working`})}):t.trim()?(0,Q.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,Q.jsx)(`div`,{className:n,children:n===`file`?e.replace(/^diff --git a\/(\S+) b\/.*$/,`$1`):e||` `},t)})}):(0,Q.jsx)(`div`,{className:`side-empty`,children:`No code changes.`})}function Po(){let e=H.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 Fo(e){let t=H.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+Po(),y:e.y,width:e.width,height:i,overlay:!1}}function Io(){let e=H(e=>e.compare);return H(e=>e.frameHeights),H(e=>e.doc),e?(0,Q.jsx)(Q.Fragment,{children:e.doc.frames.filter(t=>e.mode===`side`||e.changes[t.frameName]!==`removed`).map(t=>(0,Q.jsx)(Lo,{frame:t},`${e.name}:${t.frameName}`))}):null}var Lo=(0,L.memo)(function({frame:e}){let t=H(e=>e.appUrl),n=H(e=>e.compare),r=H(e=>e.canvasTheme),i=Fo(e),a=Jn(e,r),o=(0,L.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,Q.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,Q.jsx)(`iframe`,{ref:t=>rr(`cmp:${e.frameName}`,t),title:`${e.frameName} (${n.label})`,src:o,style:{pointerEvents:`none`}})})});function Ro(){let e=H(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,Q.jsxs)(`div`,{className:`compare-bar`,role:`region`,"aria-label":`Compare`,children:[(0,Q.jsx)(Ge,{size:14}),(0,Q.jsxs)(`span`,{children:[`Comparing with `,(0,Q.jsx)(`strong`,{children:e.label})]}),(0,Q.jsx)(`span`,{className:`faint`,children:n}),(0,Q.jsx)(`span`,{className:`sep`}),(0,Q.jsx)(`div`,{style:{width:180},children:(0,Q.jsx)(x,{value:e.mode,options:[{value:`side`,label:`Side by side`},{value:`overlay`,label:`Overlay`}],onChange:t=>H.setState({compare:{...e,mode:t}})})}),e.mode===`overlay`&&(0,Q.jsx)(`div`,{style:{width:150},children:(0,Q.jsx)(f,{value:Math.round(e.opacity*100),min:0,max:100,onCommit:t=>H.setState({compare:{...e,opacity:t/100}}),ariaLabel:`Overlay opacity`})}),(0,Q.jsx)(`button`,{className:`icon-btn`,"aria-label":`Stop comparing`,onClick:()=>void mo(),children:(0,Q.jsx)(y,{size:14})})]})}function zo(e){let t=H.getState().compare?.changes[e];return t===`changed`?{text:`Changed`,tone:`changed`}:t===`added`?{text:`New`,tone:`added`}:null}function Bo(){let e=H(e=>e.doc),t=H(e=>e.camera),n=H(e=>e.tool),r=(0,L.useRef)(null),[i,a]=(0,L.useState)({width:0,height:0}),[o,s]=(0,L.useState)(null),c=(0,L.useRef)(null),[l,u]=(0,L.useState)({}),[d,f]=(0,L.useState)(!1),[p,m]=(0,L.useState)(null),[h,g]=(0,L.useState)(null),_=(0,L.useRef)(0),[v,y]=(0,L.useState)(!1),b=(0,L.useRef)(0);(0,L.useEffect)(()=>{y(!0),clearTimeout(b.current),b.current=window.setTimeout(()=>y(!1),160)},[t]);let x=(0,L.useRef)({x:0,y:0});(0,L.useEffect)(()=>mr(),[]),(0,L.useEffect)(()=>{let e=r.current,t=new ResizeObserver(()=>{let t=e.getBoundingClientRect();a({width:t.width,height:t.height}),yr(t.width,t.height)});return t.observe(e),()=>t.disconnect()},[]);let S=(0,L.useCallback)((e,t)=>{let n=r.current.getBoundingClientRect(),i=H.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}},[]),C=(0,L.useCallback)(e=>l[e.frameName]??{x:e.x,y:e.y,width:e.width,height:e.height},[l]),w=(0,L.useCallback)((e,t)=>{let n=H.getState().doc?.frames??[];for(let r=n.length-1;r>=0;r--){let i=n[r],a=C(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},[C]),T=(0,L.useCallback)(async(e,t)=>{let{x:n,y:r}=S(e,t),i=w(n,r),a=++_.current;if(!i)return H.getState().hover!==null&&H.setState({hover:null}),null;let o=C(i),s=await dr(i.frameName,n-o.x,r-o.y);if(a!==_.current)return null;let c=H.getState(),l=(s?.chain??[]).filter(e=>c.index.has(e)).find(e=>!Zn(e))??i.id,u=s?{...c.rects,...s.rects}:c.rects;return(c.hover!==l||s)&&H.setState({hover:l,rects:u}),{id:l,frame:i,chain:(s?.chain??[]).filter(e=>c.index.has(e))}},[w,C,S]),E=(0,L.useCallback)(e=>{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));Or(Math.exp(-r*.0085),{x:e.clientX-t.left,y:e.clientY-t.top})}else{let t=H.getState().camera;Cr({...t,x:t.x-e.dx*n,y:t.y-e.dy*n})}},[]);(0,L.useEffect)(()=>{let e=r.current,t=e=>{e.preventDefault(),E({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}),ir(E),()=>e.removeEventListener(`wheel`,t)},[E]),(0,L.useEffect)(()=>{let e=()=>{let e=document.activeElement;return!!e&&(e.isContentEditable||/^(INPUT|TEXTAREA|SELECT)$/.test(e.tagName))},t=t=>{if(!e()){if(t.code===`Space`&&!t.repeat){f(!0),t.preventDefault();return}Wi({key:t.key,code:t.code,meta:t.metaKey,ctrl:t.ctrlKey,shift:t.shiftKey,alt:t.altKey})&&t.preventDefault()}},n=e=>{e.code===`Space`&&f(!1)};return window.addEventListener(`keydown`,t),window.addEventListener(`keyup`,n),ar(e=>Wi(e)),()=>{window.removeEventListener(`keydown`,t),window.removeEventListener(`keyup`,n)}},[]);let D=e=>{c.current=e,s(e)},ee=async e=>{if(p)return;r.current.focus({preventScroll:!0}),e.target.setPointerCapture?.(e.pointerId);let t=H.getState(),n=t.camera;if(e.button===1||d||t.tool===`hand`)return D({kind:`pan`,startX:e.clientX,startY:e.clientY,camX:n.x,camY:n.y});if(e.button!==0)return;let{x:i,y:a}=S(e.clientX,e.clientY);if(t.tool===`frame`)return D({kind:`draw`,startX:i,startY:a,x:i,y:a});if(t.tool===`comment`){let n=Ta(t.doc?.frames??[],C,i,a);if(!n)return H.setState({draftComment:null,openThread:null});let r=await T(e.clientX,e.clientY),o=r&&r.id!==n.frame.id?H.getState().index.get(r.id):null;H.setState({draftComment:{frame:n.frame.frameName,x:n.x,y:n.y,node:o?{path:o.node.path.join(`.`),name:U(o.node)}:null},openThread:null});return}if(t.tool===`interact`)return;let o=w(i,a);if(!o)return e.shiftKey||t.select([]),D({kind:`marquee`,startX:i,startY:a,x:i,y:a,additive:e.shiftKey});let s=await T(e.clientX,e.clientY)??{id:o.id,frame:o};if(s.id===o.id)return e.shiftKey||t.select([o.id]),D({kind:`frame-move`,frame:o,startX:e.clientX,startY:e.clientY,moved:!1});if(D({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])},te=e=>{x.current={x:e.clientX,y:e.clientY};let t=c.current,n=H.getState().camera;if(!t){let t=H.getState().tool;(t===`select`||t===`comment`)&&!d&&T(e.clientX,e.clientY);return}switch(t.kind){case`pan`:Cr({...n,x:t.camX+e.clientX-t.startX,y:t.camY+e.clientY-t.startY});break;case`frame-move`:{let r=(e.clientX-t.startX)/n.zoom,i=(e.clientY-t.startY)/n.zoom;if(!t.moved&&Math.hypot(e.clientX-t.startX,e.clientY-t.startY)<3)break;t.moved=!0,u(e=>({...e,[t.frame.frameName]:{x:Math.round(t.frame.x+r),y:Math.round(t.frame.y+i),width:t.frame.width,height:t.frame.height}}));break}case`frame-resize`:{let r=(e.clientX-t.startX)/n.zoom,i=(e.clientY-t.startY)/n.zoom,a=t.frame,o=a.height??G(a),s={x:a.x,y:a.y,width:a.width,height:a.height};(t.edge===`e`||t.edge===`se`)&&(s.width=Math.max(120,Math.round(a.width+r))),t.edge===`w`&&(s.width=Math.max(120,Math.round(a.width-r)),s.x=Math.round(a.x+a.width-s.width)),(t.edge===`s`||t.edge===`se`)&&(s.height=Math.max(80,Math.round(o+i))),u(e=>({...e,[a.frameName]:s}));break}case`draw`:case`marquee`:{let{x:n,y:r}=S(e.clientX,e.clientY),i={...t,x:n,y:r};c.current=i,s(i);break}case`click`:{if(Math.hypot(e.clientX-t.startX,e.clientY-t.startY)<5)break;let n=H.getState().index.get(t.id);if(!n?.parent||H.getState().selection.length!==1)break;let r={kind:`node-drag`,id:t.id,frame:n.frame,target:null};c.current=r,s(r);break}case`node-drag`:O(t,e.clientX,e.clientY).then(e=>{let n=c.current;if(n?.kind!==`node-drag`||n.id!==t.id)return;let r={...n,target:e};c.current=r,s(r)})}},O=async(e,t,n)=>{let r=H.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 fr(e.frame.frameName,a.map(e=>e.id)),{x:s,y:c}=S(t,n),l=C(e.frame),u=s-l.x,d=c-l.y,f=Xr(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},ne=async e=>{let t=c.current;if(c.current=null,s(null),!t)return;let n=H.getState();if(t.kind===`frame-move`&&t.moved){let e=l[t.frame.frameName];e&&await n.run({op:`update_frame`,canvas:n.canvas,frame:t.frame.frameName,x:e.x,y:e.y}),re(t.frame.frameName)}else if(t.kind===`frame-resize`){let e=l[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})}re(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 Gr(t.startX,t.startY,1024,720):await Gr(e,n,r,i),H.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])},re=e=>u(({[e]:t,...n})=>n),ie=async e=>{let t=H.getState();if(t.tool!==`select`)return;let n=await T(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]),Vo(r)&&H.setState({editingText:n.id}))},ae=async e=>{e.preventDefault();let t=H.getState(),n=await T(e.clientX,e.clientY);n&&!t.selection.includes(n.id)&&t.select([n.id]),H.getState().selection.length&&m({x:e.clientX,y:e.clientY})},k=(0,L.useRef)(!1),A=async(e,t)=>{let{x:n,y:r}=S(e,t);if(!w(n,r))return null;let i=await T(e,t);if(!i)return`stale`;let a=H.getState(),o=a.index.get(i.id),s=C(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:Hr(i.frame),label:i.frame.frameName};let c=a.rects[i.id];if(!c)return null;if(Ur(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}`}},j=async e=>{if(!e.dataTransfer.types.includes(`application/x-truecanvas-component`))return;e.preventDefault(),e.dataTransfer.dropEffect=`copy`,k.current=!0;let t=await A(e.clientX,e.clientY);t!==`stale`&&k.current&&g(t)},oe=async e=>{let t=e.dataTransfer.getData(`application/x-truecanvas-component`);if(!t)return;e.preventDefault(),k.current=!1,g(null);let n=await A(e.clientX,e.clientY);if(n===`stale`&&(n=await A(e.clientX,e.clientY)),!n||n===`stale`)return;let r=JSON.parse(t),i=H.getState();await i.run({op:`insert_component`,canvas:i.canvas,component:r.name,parent:n.parent,index:n.index,props:r.insertProps})},M=e?.frames??[],N=(0,L.useMemo)(()=>{let e=new Set;for(let n of M){let r=C(n),a=r.height??G(n),o=t.x+r.x*t.zoom,s=t.y+r.y*t.zoom;o+r.width*t.zoom>-400&&o<i.width+400&&s+a*t.zoom>-400&&s<i.height+400&&e.add(n.frameName)}return e},[M,t,i,C]),P=(0,L.useRef)(new Set);for(let e of N)P.current.add(e);if(P.current.size>12)for(let e of[...P.current])N.has(e)||P.current.delete(e);let se=o?.kind===`pan`?`grabbing`:d||n===`hand`?`grab`:void 0;return(0,Q.jsxs)(`div`,{ref:r,className:`viewport tool-${n}${d?` panning`:``}`,tabIndex:-1,style:{cursor:se,backgroundSize:`${Math.max(8,20*t.zoom)}px ${Math.max(8,20*t.zoom)}px`,backgroundPosition:`${t.x}px ${t.y}px`},onPointerDown:ee,onPointerMove:te,onPointerUp:ne,onPointerLeave:()=>!c.current&&H.getState().hover&&H.setState({hover:null}),onDoubleClick:ie,onContextMenu:ae,onDragOver:j,onDragLeave:e=>{e.currentTarget.contains(e.relatedTarget)||(k.current=!1,g(null))},onDrop:oe,children:[(0,Q.jsxs)(`div`,{className:`world${v?` moving`:``}`,style:{transform:`translate(${t.x}px, ${t.y}px) scale(${t.zoom})`},children:[M.map(e=>(0,Q.jsx)(Ho,{frame:e,pos:C(e),mounted:P.current.has(e.frameName),interactive:n===`interact`},e.frameName)),(0,Q.jsx)(Io,{})]}),(0,Q.jsx)(Wo,{framePos:C,drag:o,drop:h,onResizeStart:(e,t,n)=>D({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=H.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]),D({kind:`frame-move`,frame:e,startX:t.clientX,startY:t.clientY,moved:!1})}}),e&&!e.error&&e.frames.length===0&&(0,Q.jsxs)(`div`,{className:`empty-canvas`,children:[(0,Q.jsx)(`div`,{style:{fontWeight:600,color:`var(--text)`},children:`An empty canvas`}),(0,Q.jsxs)(`div`,{children:[`Press `,(0,Q.jsx)(`span`,{className:`kbd-chip`,children:`F`}),` and drag to draw a frame, or ask your agent to build a screen.`]})]}),p&&(0,Q.jsx)(Yo,{x:p.x,y:p.y,onClose:()=>m(null)})]})}function Vo(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}var Ho=(0,L.memo)(function({frame:e,pos:t,mounted:n,interactive:r}){let i=H(e=>e.appUrl),a=H(e=>e.canvas),o=H(e=>e.canvasTheme),s=H(t=>t.frameHeights[e.frameName]),c=H(t=>t.frameReady[e.frameName]),l=H(t=>t.frameErrors[e.frameName]),u=H(e=>e.appStatus),d=Jn(e,o),f=(0,L.useRef)(null),p=(0,L.useRef)(d),m=(0,L.useMemo)(()=>`${i}/truecanvas/${encodeURIComponent(a??``)}?frame=${encodeURIComponent(e.frameName)}&theme=${p.current}&editor=${encodeURIComponent(location.origin)}`,[i,a,e.frameName]),h=H(e=>e.motionPaused),g=H(e=>e.deviceChrome),_=H(t=>t.playing===e.frameName),v=(0,L.useRef)(!1);(0,L.useEffect)(()=>{c&&v.current!==_&&(v.current=_,lr(e.frameName,{type:`tc:play`,on:_}))},[_,c,e.frameName]),(0,L.useEffect)(()=>{c&&lr(e.frameName,{type:`tc:theme`,theme:d})},[d,c,e.frameName]),(0,L.useEffect)(()=>{c&&lr(e.frameName,{type:`tc:motion`,paused:h})},[h,c,e.frameName]);let y=H(e=>e.hidden),b=H(e=>e.index),x=(0,L.useMemo)(()=>{let t=[];for(let[n,r]of b)r.frame.frameName===e.frameName&&n!==r.frame.id&&y.has(Yn(r.node))&&t.push(n);return t.sort().join(`,`)},[y,b,e.frameName]);(0,L.useEffect)(()=>{c&&lr(e.frameName,{type:`tc:hidden`,ids:x?x.split(`,`).map(V):[]})},[x,c,e.frameName]);let S=kn(e.device),C=g&&S&&S.kind!==`desktop`?S:null,w=t.height??(_?br(e):s??360),T=d===`dark`||d===`system`&&window.matchMedia(`(prefers-color-scheme: dark)`).matches;return(0,Q.jsxs)(`div`,{className:`frame-box${T?` dark`:``}${C?` device`:``}${_?` playing`:``}`,style:{left:t.x,top:t.y,width:t.width,height:w,borderRadius:C?C.radius:void 0},children:[n&&u!==`down`&&(0,Q.jsx)(`iframe`,{ref:t=>{f.current=t,rr(e.frameName,t)},title:e.frameName,src:m,style:{pointerEvents:r||_?`auto`:`none`},onLoad:()=>setTimeout(()=>void W(new Set([e.frameName])),50)}),C&&(0,Q.jsx)(Uo,{device:C,dark:T}),(!c||!n)&&(0,Q.jsx)(`div`,{className:`placeholder`,children:u===`down`?`Waiting for the app…`:``}),l&&(0,Q.jsxs)(`div`,{className:`frame-error`,children:[(0,Q.jsx)(`strong`,{children:`Render error · `}),l]})]})});function Uo({device:e,dark:t}){let n=t?`#fff`:`#000`;return(0,Q.jsxs)(`div`,{className:`device-chrome`,"aria-hidden":!0,children:[e.statusBar>0&&(0,Q.jsxs)(`div`,{className:`status-bar`,style:{height:e.statusBar,color:n,padding:e.island?`0 32px 0 46px`:`0 20px`},children:[(0,Q.jsx)(`span`,{className:`time`,children:`9:41`}),e.island&&(0,Q.jsx)(`span`,{className:`island`}),(0,Q.jsxs)(`span`,{className:`icons`,children:[(0,Q.jsxs)(`svg`,{width:`18`,height:`11`,viewBox:`0 0 18 11`,fill:n,children:[(0,Q.jsx)(`rect`,{x:`0`,y:`7`,width:`3`,height:`4`,rx:`1`}),(0,Q.jsx)(`rect`,{x:`5`,y:`5`,width:`3`,height:`6`,rx:`1`}),(0,Q.jsx)(`rect`,{x:`10`,y:`2.5`,width:`3`,height:`8.5`,rx:`1`}),(0,Q.jsx)(`rect`,{x:`15`,y:`0`,width:`3`,height:`11`,rx:`1`})]}),(0,Q.jsx)(`svg`,{width:`16`,height:`11`,viewBox:`0 0 16 11`,fill:n,children:(0,Q.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,Q.jsxs)(`svg`,{width:`26`,height:`12`,viewBox:`0 0 26 12`,fill:`none`,children:[(0,Q.jsx)(`rect`,{x:`.5`,y:`.5`,width:`22`,height:`11`,rx:`3.5`,stroke:n,strokeOpacity:`.4`}),(0,Q.jsx)(`rect`,{x:`2`,y:`2`,width:`19`,height:`8`,rx:`2`,fill:n}),(0,Q.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,Q.jsx)(`div`,{className:`home-indicator`,style:{height:e.homeIndicator},children:(0,Q.jsx)(`span`,{style:{background:n,width:e.kind===`tablet`?300:134}})})]})}function Wo({framePos:e,drag:t,drop:n,onResizeStart:r,onLabelDown:i}){let a=H(e=>e.doc),o=H(e=>e.camera),s=H(e=>e.selection),c=H(e=>e.hover),l=H(e=>e.rects),u=H(e=>e.index),d=H(e=>e.tool),f=H(e=>e.review),p=H(e=>e.flashes),m=H(e=>e.editingText),h=H(e=>e.compare);H(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,Q.jsxs)(`div`,{className:`overlay`,children:[a.frames.map(e=>{let t=v(e),n=s.includes(e.id);return(0,Q.jsxs)(`div`,{className:`frame-label${n?` selected`:``}`,style:{left:t.left,top:t.top-20,maxWidth:Math.max(40,t.width)},onPointerDown:t=>i(e,t),children:[(0,Q.jsx)(`span`,{style:{overflow:`hidden`,textOverflow:`ellipsis`},children:e.frameName}),e.theme&&(0,Q.jsx)(`span`,{className:`theme-tag`,children:e.theme===`dark`?(0,Q.jsx)(Tt,{size:11}):(0,Q.jsx)(on,{size:11})}),e.device&&(0,Q.jsx)(`span`,{className:`theme-tag`,children:kn(e.device)?.name}),b.has(e.frameName)&&(0,Q.jsx)(`span`,{className:`change-dot`,title:`Changed since the last commit`}),(0,Q.jsx)(Jo,{frame:e,compact:t.width<220}),(0,Q.jsx)(qo,{frame:e,compact:t.width<260}),(()=>{let t=zo(e.frameName);return t&&(0,Q.jsx)(`span`,{className:`change-badge ${t.tone}`,children:t.text})})()]},e.id)}),h&&h.doc.frames.filter(()=>h.mode===`side`).map(e=>{let t=Fo(e);return(0,Q.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,Q.jsx)(`span`,{style:{overflow:`hidden`,textOverflow:`ellipsis`},children:e.frameName}),(0,Q.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,Q.jsx)(`div`,{className:`box hover`,style:e})}let e=l[x.node.id];return e?(0,Q.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,Q.jsx)(`div`,{className:`box frame-select`,style:r,children:s.length===1&&(0,Q.jsxs)(Q.Fragment,{children:[(0,Q.jsx)(`div`,{className:`edge`,style:{right:-4,top:0,bottom:0,width:8,cursor:`ew-resize`},onPointerDown:e=>S(e,n.frame,`e`)}),(0,Q.jsx)(`div`,{className:`edge`,style:{left:-4,top:0,bottom:0,width:8,cursor:`ew-resize`},onPointerDown:e=>S(e,n.frame,`w`)}),(0,Q.jsx)(`div`,{className:`edge`,style:{bottom:-4,left:0,right:0,height:8,cursor:`ns-resize`},onPointerDown:e=>S(e,n.frame,`s`)}),(0,Q.jsx)(`div`,{className:`handle`,style:{right:-5,bottom:-5,cursor:`nwse-resize`},onPointerDown:e=>S(e,n.frame,`se`)}),(0,Q.jsx)(`div`,{className:`handle`,style:{right:-5,top:-5}}),(0,Q.jsx)(`div`,{className:`handle`,style:{left:-5,bottom:-5}}),(0,Q.jsx)(`div`,{className:`handle`,style:{left:-5,top:-5}}),(0,Q.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,Q.jsx)(`div`,{className:`box select${a?` component`:``}`,style:i,children:s.length===1&&m!==t&&(0,Q.jsxs)(Q.Fragment,{children:[(0,Q.jsx)(`div`,{className:`name-tag${a?` component`:``}`,style:{left:-.75,top:-1},children:U(n.node)}),(0,Q.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,Q.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,Q.jsx)(`div`,{className:`drop-target`,style:_(e,n.rect)}):null})(),t?.kind===`node-drag`&&t.target&&(0,Q.jsx)(`div`,{className:`drop-line`,style:_(t.frame,t.target.line)}),(t?.kind===`draw`||t?.kind===`marquee`)&&(0,Q.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,Q.jsx)(Go,{id:m,toScreen:_}),(0,Q.jsx)(ba,{camera:o,framePos:e}),(0,Q.jsx)(eo,{camera:o,framePos:e})]});function S(e,t,n){e.stopPropagation(),e.target.setPointerCapture(e.pointerId),r(t,n,e)}}function Go({id:e,toScreen:t}){let n=H(t=>t.index.get(e)),r=H(t=>t.rects[e]),i=n?Vo(n.node):null,[a,o]=(0,L.useState)(i?.value??``),s=(0,L.useRef)(null);if((0,L.useEffect)(()=>{s.current?.focus(),s.current?.select()},[]),!n||!r||!i)return null;let c=t(n.frame,r),l=()=>H.setState({editingText:null}),u=async()=>{if(l(),a===i.value)return;let t=H.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,Q.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,Q.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()}})})}var Ko=e=>e.split(`/`).pop()??e;function qo({frame:e,compact:t}){let n=H(t=>t.playing===e.frameName),r=e=>e.stopPropagation();return n?(0,Q.jsxs)(`span`,{className:`play-controls`,onPointerDown:r,children:[(0,Q.jsxs)(`span`,{className:`playing-tag`,children:[(0,Q.jsx)(`span`,{className:`live-dot`}),t?``:`Playing · scroll inside`]}),(0,Q.jsx)(`button`,{className:`label-btn`,title:`Replay entrance animations`,"aria-label":`Replay`,onClick:()=>Sr(e.frameName),children:(0,Q.jsx)(qt,{size:10})}),(0,Q.jsx)(`button`,{className:`label-btn`,title:`Stop (Esc)`,"aria-label":`Stop playing`,onClick:()=>xr(null),children:(0,Q.jsx)(rn,{size:9,fill:`currentColor`})})]}):(0,Q.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:()=>xr(e.frameName),children:(0,Q.jsx)(Ft,{size:10})})}function Jo({frame:e,compact:t}){if(e.link?.kind===`component`)return(0,Q.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,Q.jsx)(F,{size:10}),!t&&`Main component · ${Ko(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,Q.jsxs)(`span`,{className:`link-tag${e.link.editable?``:` view`}${t?` compact`:``}`,title:n,children:[e.link.editable?(0,Q.jsx)(`span`,{className:`live-dot`}):(0,Q.jsx)(Pe,{size:10}),!t&&`${e.link.editable?`Live`:`View only`} · ${Ko(e.link.page)}`]})}return e.from?(0,Q.jsxs)(`span`,{className:`link-tag draft${t?` compact`:``}`,title:`Copy of ${e.from}. Right-click → Apply to page to write it back.`,children:[(0,Q.jsx)(Re,{size:10}),!t&&`Exploration`]}):null}function Yo({x:e,y:t,onClose:n,extra:i=[]}){let a=H.getState(),o=a.selection.length===1?a.index.get(a.selection[0]):null,s=o&&o.node.id===o.frame.id,c=o?.frame,l=[...c?.link?[{label:`Explore a copy`,icon:(0,Q.jsx)(Re,{size:14}),onSelect:()=>void zr(c.id)},{label:`Open ${Ko(c.link.page)}`,icon:(0,Q.jsx)(Ie,{size:14}),onSelect:()=>void z.openFile(c.link.page).catch(e=>a.toast(e.message))},`sep`]:[],...c?[{label:`Play ${c.frameName}`,icon:(0,Q.jsx)(Ft,{size:14}),onSelect:()=>xr(c.frameName)},{label:`Replay animations`,icon:(0,Q.jsx)(qt,{size:14}),onSelect:()=>Sr(c.frameName)},`sep`]:[],...c?.from&&s?[{label:`Apply to ${Ko(c.from)}`,icon:(0,Q.jsx)(A,{size:14}),onSelect:()=>void Br(c.id)},`sep`]:[],{label:`Duplicate`,icon:(0,Q.jsx)(we,{size:14}),kbd:_r.dup,onSelect:jr},...s?[]:[{label:`Wrap in auto layout`,icon:(0,Q.jsx)(lt,{size:14}),kbd:`⇧A`,onSelect:Nr}],...o?.parent?[{label:`Select parent`,icon:(0,Q.jsx)(Oe,{size:14}),kbd:`⇧Enter`,onSelect:Fr}]:[],`sep`,{label:`Copy as JSX`,icon:(0,Q.jsx)(r,{size:14}),kbd:_r.copy,onSelect:()=>void Lr()},{label:`Show this layer in code`,icon:(0,Q.jsx)(Ae,{size:14}),onSelect:()=>Rr(o?.node.id)},...o&&o.node.kind===`component`&&a.components.some(e=>e.name===o.node.name&&!e.library)?[{label:`Edit ${o.node.name} (main component)`,icon:(0,Q.jsx)(F,{size:14}),onSelect:()=>void Ti(o.node.name)},{label:`Open ${o.node.name} in code editor`,icon:(0,Q.jsx)(ye,{size:14}),onSelect:()=>Xo(o.node.name)}]:[],...o&&!s&&(o.node.kind===`element`||o.node.kind===`component`||o.node.kind===`fragment`)?[{label:`Create component`,icon:(0,Q.jsx)(F,{size:14}),kbd:`${_r.mod}⌥K`,onSelect:()=>Oi(!0)}]:[],`sep`,{label:`Delete`,icon:(0,Q.jsx)(bn,{size:14}),kbd:`Del`,danger:!0,onSelect:Mr}];return(0,Q.jsx)(m,{x:e,y:t,items:i.length?[...i,`sep`,...l]:l,onClose:n})}function Xo(e){let t=H.getState(),n=t.components.find(t=>t.name===e);n&&z.openFile(n.file).catch(e=>t.toast(e.message))}function Zo(){let e=H(e=>e.leftTab),t=H(e=>e.components),n=H(e=>e.projectName);return(0,Q.jsxs)(`aside`,{className:`panel left`,children:[(0,Q.jsxs)(`div`,{className:`panel-head`,children:[(0,Q.jsx)(`svg`,{className:`logo`,viewBox:`0 0 64 64`,"aria-hidden":!0,children:(0,Q.jsx)(`path`,{fill:`#f2774a`,fillRule:`evenodd`,d:`M4 5h56v18H4z M22 14h20v46H22z`})}),(0,Q.jsx)(`span`,{className:`project-name`,title:n,children:n}),(0,Q.jsx)(`span`,{style:{marginLeft:`auto`}}),(0,Q.jsx)(xo,{})]}),(0,Q.jsx)($o,{}),(0,Q.jsx)(`div`,{style:{padding:`8px 10px`},children:(0,Q.jsxs)(`div`,{className:`tabs`,role:`tablist`,children:[(0,Q.jsx)(`button`,{role:`tab`,"aria-selected":e===`layers`,className:`tab${e===`layers`?` on`:``}`,onClick:()=>H.setState({leftTab:`layers`}),children:`Layers`}),(0,Q.jsxs)(`button`,{role:`tab`,"aria-selected":e===`components`,className:`tab${e===`components`?` on`:``}`,onClick:()=>H.setState({leftTab:`components`}),children:[`Assets `,(0,Q.jsx)(`span`,{className:`faint`,children:t.length||``})]})]})}),e===`layers`?(0,Q.jsx)(is,{}):(0,Q.jsx)(ds,{})]})}var Qo=e=>e.trim().toLowerCase().replace(/[^a-z0-9_-]+/g,`-`).replace(/^-+|-+$/g,``);function $o(){let e=H(e=>e.pages),[t,n]=(0,L.useState)(()=>localStorage.getItem(`tc:pagesCollapsed`)===`1`),[r,i]=(0,L.useState)(()=>Number(localStorage.getItem(`tc:pagesHeight`))||null),[a,o]=(0,L.useState)(!1),[s,c]=(0,L.useState)(null),[u,d]=(0,L.useState)(!1);return(0,Q.jsxs)(`section`,{className:`pages`,children:[(0,Q.jsxs)(`div`,{className:`section-bar`,children:[(0,Q.jsxs)(`button`,{className:`section-toggle`,onClick:()=>{n(!t),localStorage.setItem(`tc:pagesCollapsed`,t?`0`:`1`)},"aria-expanded":!t,children:[(0,Q.jsx)(ee,{size:12,className:t?``:`open`}),`Pages`]}),(0,Q.jsx)(p,{label:`New page`,children:(0,Q.jsx)(`button`,{className:`icon-btn sm`,"aria-label":`New page`,onClick:e=>{let t=e.currentTarget.getBoundingClientRect();c({x:t.left-180,y:t.bottom+4})},children:(0,Q.jsx)(l,{size:13})})}),s&&(0,Q.jsx)(m,{x:s.x,y:s.y,onClose:()=>c(null),items:[{label:`New empty page`,icon:(0,Q.jsx)(l,{size:14}),onSelect:()=>(n(!1),o(!0))},{label:`Import a page from your app…`,icon:(0,Q.jsx)(Ie,{size:14}),onSelect:()=>d(!0)}]}),u&&(0,Q.jsx)(es,{onClose:()=>d(!1)})]}),!t&&(0,Q.jsxs)(Q.Fragment,{children:[(0,Q.jsxs)(`div`,{className:`pages-list scroll`,style:r?{height:r}:{maxHeight:200,flex:`none`},children:[e.map(e=>(0,Q.jsx)(ts,{page:e},e.name)),a&&(0,Q.jsx)(ns,{initial:``,placeholder:`page-name`,onDone:async e=>{o(!1);let t=Qo(e);if(t)try{await z.createCanvas(t),H.setState({canvas:t})}catch(e){H.getState().toast(e.message)}}})]}),(0,Q.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 es({onClose:e}){let[t,n]=(0,L.useState)(null),[r,i]=(0,L.useState)(!1);(0,L.useEffect)(()=>{z.routes().then(e=>n(e.routes)).catch(()=>n([]))},[]);let a=async t=>{e();let n=H.getState();n.canvas&&(await n.run({op:`import_route`,canvas:n.canvas,route:t,copy:r}))?.length&&setTimeout(()=>void Hi(()=>Promise.resolve().then(()=>hr).then(e=>e.zoomToSelection()),void 0),400)};return(0,Z.createPortal)((0,Q.jsx)(`div`,{className:`modal-backdrop`,onPointerDown:e,children:(0,Q.jsxs)(`div`,{className:`modal`,style:{width:460},onPointerDown:e=>e.stopPropagation(),onKeyDown:t=>(t.stopPropagation(),t.key===`Escape`&&e()),children:[(0,Q.jsx)(`div`,{className:`modal-title`,children:`Add a page from your app`}),(0,Q.jsxs)(`div`,{className:`seg-choice`,role:`radiogroup`,"aria-label":`How to add the page`,children:[(0,Q.jsxs)(`button`,{role:`radio`,"aria-checked":!r,className:r?``:`on`,onClick:()=>i(!1),children:[(0,Q.jsxs)(`strong`,{children:[(0,Q.jsx)(dt,{size:13}),` Linked`]}),(0,Q.jsx)(`span`,{children:`The frame is your page. Editing its layers edits page.tsx, tracked by git.`})]}),(0,Q.jsxs)(`button`,{role:`radio`,"aria-checked":r,className:r?`on`:``,onClick:()=>i(!0),children:[(0,Q.jsxs)(`strong`,{children:[(0,Q.jsx)(Re,{size:13}),` Copy`]}),(0,Q.jsx)(`span`,{children:`A free copy in the canvas, for explorations. Your page stays untouched.`})]})]}),(0,Q.jsxs)(`div`,{className:`dir-list`,style:{height:240},children:[t===null&&(0,Q.jsx)(`div`,{className:`faint`,style:{padding:10},children:`Looking for pages…`}),t?.length===0&&(0,Q.jsx)(`div`,{className:`faint`,style:{padding:10},children:`No App Router pages found.`}),t?.map(e=>(0,Q.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,Q.jsx)(Ie,{size:14,className:`faint`}),(0,Q.jsx)(`span`,{style:{fontWeight:500},children:e.route}),(0,Q.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,Q.jsx)(`div`,{className:`modal-actions`,children:(0,Q.jsx)(`button`,{className:`btn outline`,onClick:e,children:`Cancel`})})]})}),document.body)}function ts({page:e}){let t=H(t=>t.canvas===e.name),n=H(t=>Object.values(t.presence).some(t=>t.canvas===e.name&&Date.now()-t.at<12e3)),[r,i]=(0,L.useState)(!1),[a,o]=(0,L.useState)(null),[l,u]=(0,L.useState)(!1),d=H.getState,f=async t=>{i(!1);let n=Qo(t);if(n&&n!==e.name)try{await z.renameCanvas(e.name,n)}catch(e){d().toast(e.message)}},p=async()=>{try{let{name:t}=await z.duplicateCanvas(e.name);H.setState({canvas:t})}catch(e){d().toast(e.message)}},h=async()=>{u(!1);try{await z.deleteCanvas(e.name),d().toast(`Deleted ${e.name}`,`info`,{label:`Undo`,run:()=>void z.restoreCanvas(e.name).then(({name:e})=>H.setState({canvas:e}))})}catch(e){d().toast(e.message)}};return r?(0,Q.jsx)(ns,{initial:e.name,onDone:f}):(0,Q.jsxs)(Q.Fragment,{children:[(0,Q.jsxs)(`div`,{className:`page-row${t?` current`:``}`,role:`button`,tabIndex:0,onClick:()=>!t&&H.setState({canvas:e.name}),onDoubleClick:()=>i(!0),onKeyDown:t=>t.key===`Enter`&&H.setState({canvas:e.name}),onContextMenu:e=>{e.preventDefault(),o({x:e.clientX,y:e.clientY})},children:[(0,Q.jsx)(`span`,{className:`check`,children:t&&(0,Q.jsx)(c,{size:13})}),(0,Q.jsx)(`span`,{className:`name`,children:e.name}),n&&(0,Q.jsx)(`span`,{className:`flash-dot`,title:`An agent is working here`}),(0,Q.jsx)(`span`,{className:`count`,children:e.frames}),(0,Q.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,Q.jsx)(s,{size:14})})]}),a&&(0,Q.jsx)(m,{x:a.x,y:a.y,onClose:()=>o(null),items:[{label:`Rename`,icon:(0,Q.jsx)(Nt,{size:14}),onSelect:()=>i(!0)},{label:`Duplicate`,icon:(0,Q.jsx)(we,{size:14}),onSelect:()=>void p()},{label:`Open file in editor`,icon:(0,Q.jsx)(Ie,{size:14}),onSelect:()=>void z.openFile(`${H.getState().doc?.file.split(`/`).slice(0,-1).join(`/`)||`canvas`}/${e.name}.canvas.tsx`)},`sep`,{label:`Delete page`,icon:(0,Q.jsx)(bn,{size:14}),danger:!0,onSelect:()=>u(!0)}]}),l&&(0,Q.jsx)(rs,{title:`Delete “${e.name}”?`,body:`This removes ${e.name}.canvas.tsx from your project. You can undo it right after.`,confirm:`Delete page`,onCancel:()=>u(!1),onConfirm:()=>void h()})]})}function ns({initial:e,placeholder:t,onDone:n}){let[r,i]=(0,L.useState)(e),a=(0,L.useRef)(!1),o=e=>{a.current||(a.current=!0,n(e))};return(0,Q.jsx)(`div`,{className:`inline-name`,children:(0,Q.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 rs({title:e,body:t,confirm:n,onConfirm:r,onCancel:i}){return(0,L.useEffect)(()=>{let e=e=>{e.stopPropagation(),e.key===`Escape`&&i(),e.key===`Enter`&&r()};return window.addEventListener(`keydown`,e,!0),()=>window.removeEventListener(`keydown`,e,!0)},[i,r]),(0,Z.createPortal)((0,Q.jsx)(`div`,{className:`modal-backdrop`,onPointerDown:i,children:(0,Q.jsxs)(`div`,{className:`modal`,role:`alertdialog`,"aria-labelledby":`confirm-title`,onPointerDown:e=>e.stopPropagation(),children:[(0,Q.jsx)(`div`,{id:`confirm-title`,className:`modal-title`,children:e}),(0,Q.jsx)(`p`,{className:`muted`,children:t}),(0,Q.jsxs)(`div`,{className:`modal-actions`,children:[(0,Q.jsx)(`button`,{className:`btn outline`,onClick:i,children:`Cancel`}),(0,Q.jsx)(`button`,{className:`btn danger-solid`,autoFocus:!0,onClick:r,children:n})]})]})}),document.body)}function is(){let e=H(e=>e.doc),t=H(e=>e.layerQuery),n=ss(),[r,i]=(0,L.useState)(null),a=(0,L.useRef)(null);if(!e)return(0,Q.jsx)(`div`,{className:`empty`,children:`Loading…`});if(e.error)return(0,Q.jsxs)(`div`,{className:`empty`,children:[`The canvas file has a syntax error:`,(0,Q.jsx)(`br`,{}),e.error]});if(!e.frames.length)return(0,Q.jsxs)(`div`,{className:`empty`,children:[`No frames yet.`,(0,Q.jsx)(`br`,{}),`Press F and drag on the canvas.`]});let o=async()=>{let e=H.getState(),t=a.current,n=r;if(a.current=null,i(null),!t||!n||t===n.id)return;let o=e.index.get(n.id);if(o){if(n.where===`inside`)await e.run({op:`move`,canvas:e.canvas,id:t,parent:n.id});else if(o.parent){let r=o.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:o.parent.id,index:r})}}};return(0,Q.jsxs)(Q.Fragment,{children:[(0,Q.jsx)(as,{}),(0,Q.jsxs)(`div`,{className:`scroll tree`,role:`tree`,onDragEnd:()=>i(null),children:[e.frames.map(e=>(0,Q.jsx)(cs,{node:e,depth:0,isFrame:!0,dragId:a,dropPos:r,setDropPos:i,onDrop:o},e.id)),n&&n.size===0&&(0,Q.jsxs)(`div`,{className:`empty`,children:[`No layers match “`,t,`”.`]})]})]})}function as(){let e=H(e=>e.layerQuery);return(0,Q.jsx)(`div`,{className:`layer-search`,children:(0,Q.jsxs)(`div`,{className:`field`,children:[(0,Q.jsx)(`span`,{className:`prefix`,children:(0,Q.jsx)(g,{size:13})}),(0,Q.jsx)(`input`,{value:e,placeholder:`Search layers`,"aria-label":`Search layers`,onChange:e=>H.setState({layerQuery:e.target.value}),onKeyDown:e=>{e.stopPropagation(),e.key===`Escape`&&H.setState({layerQuery:``})}}),e&&(0,Q.jsx)(`button`,{className:`icon-btn sm`,"aria-label":`Clear search`,onClick:()=>H.setState({layerQuery:``}),children:(0,Q.jsx)(y,{size:12})})]})})}function os(e){let t=[e.name,U(e),e.text??``];for(let n of Object.values(e.props))n.kind===`string`&&t.push(n.value);return t.join(` `).toLowerCase()}function ss(){let e=H(e=>e.layerQuery.trim().toLowerCase()),t=H(e=>e.index);return(0,L.useMemo)(()=>{if(!e)return null;let n=new Set;for(let[r,i]of t){if(!os(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 cs=(0,L.memo)(function e({node:t,depth:n,isFrame:r,dragId:i,dropPos:a,setDropPos:o,onDrop:s}){let c=H(e=>e.selection.includes(t.id)),l=H(e=>e.hover===t.id),u=ss(),d=u!==null,f=H(e=>e.expanded.has(t.id))||d,p=Yn(t),m=H(e=>e.hidden.has(p)),h=H(e=>e.locked.has(p)),g=H(e=>e.renamingLayer===t.id),_=H(e=>e.flashes.some(e=>e.id===t.id)),[v,y]=(0,L.useState)(null),b=(0,L.useRef)(null),x=t.children.filter(e=>(e.kind!==`text`||t.children.length>1)&&(!u||u.has(e.id))),S=x.length>0,C=d&&os(t).includes(H.getState().layerQuery.trim().toLowerCase());(0,L.useEffect)(()=>{c&&b.current?.scrollIntoView({block:`nearest`})},[c]);let w=e=>{e.stopPropagation();let n=new Set(H.getState().expanded);n.has(t.id)?n.delete(t.id):n.add(t.id),H.setState({expanded:n})},T=e=>{let n=H.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(u&&!u.has(t.id))return null;let{icon:E,hint:te}=ls(t,!!r),O=[`layer`,r?`frame`:t.kind,c?`selected`:``,l?`hovered`:``,m?`is-hidden`:``,h?`is-locked`:``,C?`match`:``],ne=t.kind===`component`||t.kind===`element`,re=e=>{H.setState({renamingLayer:null});let n=H.getState(),i=e.trim();r?i&&i!==U(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})};a?.id===t.id&&O.push(`drop-${a.where}`);let ie=!r&&t.kind!==`text`;return(0,Q.jsxs)(Q.Fragment,{children:[(0,Q.jsxs)(`div`,{ref:b,role:`treeitem`,"aria-selected":c,"aria-expanded":S?f:void 0,className:O.join(` `),style:{paddingLeft:6+n*14},onClick:T,onContextMenu:e=>{e.preventDefault(),e.stopPropagation();let n=H.getState();n.selection.includes(t.id)||n.select([t.id],{reveal:!1}),y({x:e.clientX,y:e.clientY})},onDoubleClick:()=>(r||ne)&&H.setState({renamingLayer:t.id}),onPointerEnter:()=>H.setState({hover:t.id}),onPointerLeave:()=>H.getState().hover===t.id&&H.setState({hover:null}),draggable:ie,onDragStart:e=>{i.current=t.id,e.dataTransfer.effectAllowed=`move`,e.dataTransfer.setData(`text/plain`,t.id)},onDragOver:e=>{if(!i.current||i.current===t.id)return;e.preventDefault();let n=e.currentTarget.getBoundingClientRect(),s=(e.clientY-n.top)/n.height,c=r||Ur(t),l=r||c&&s>.3&&s<.7?`inside`:s<.5?`before`:`after`;(a?.id!==t.id||a.where!==l)&&o({id:t.id,where:l})},onDrop:e=>{e.preventDefault(),s()},children:[(0,Q.jsx)(`span`,{className:`twisty${f?` open`:``}`,onClick:S?w:void 0,style:{visibility:S?`visible`:`hidden`},children:(0,Q.jsx)(ee,{size:12})}),(0,Q.jsx)(`span`,{className:`icon`,children:E}),g?(0,Q.jsx)(`input`,{className:`layer-rename`,autoFocus:!0,defaultValue:U(t),onFocus:e=>e.target.select(),onClick:e=>e.stopPropagation(),onBlur:e=>re(e.target.value),onKeyDown:e=>{e.stopPropagation(),e.key===`Enter`&&e.target.blur(),e.key===`Escape`&&H.setState({renamingLayer:null})}}):(0,Q.jsxs)(Q.Fragment,{children:[(0,Q.jsx)(`span`,{className:`name`,children:U(t)}),te&&(0,Q.jsx)(`span`,{className:`hint`,children:te})]}),_&&(0,Q.jsx)(`span`,{className:`flash-dot`,title:`Changed by an agent`}),t.kind!==`text`&&!g&&(0,Q.jsxs)(`span`,{className:`layer-flags`,children:[(0,Q.jsx)(`button`,{className:`flag${h?` on`:``}`,"aria-label":h?`Unlock layer`:`Lock layer`,title:h?`Unlock`:`Lock (can't be clicked on the canvas)`,onClick:e=>{e.stopPropagation(),H.getState().toggleLayerFlag(`locked`,t)},children:h?(0,Q.jsx)(D,{size:12}):(0,Q.jsx)(_t,{size:12})}),(0,Q.jsx)(`button`,{className:`flag${m?` on`:``}`,"aria-label":m?`Show layer`:`Hide layer`,title:m?`Show`:`Hide in the editor (your code is unchanged)`,onClick:e=>{e.stopPropagation(),H.getState().toggleLayerFlag(`hidden`,t)},children:m?(0,Q.jsx)(Me,{size:12}):(0,Q.jsx)(Pe,{size:12})})]})]}),v&&(0,Q.jsx)(Yo,{x:v.x,y:v.y,onClose:()=>y(null),extra:[...r||ne?[{label:`Rename`,icon:(0,Q.jsx)(Nt,{size:14}),onSelect:()=>H.setState({renamingLayer:t.id})}]:[],...t.kind===`text`?[]:[{label:m?`Show`:`Hide`,icon:m?(0,Q.jsx)(Pe,{size:14}):(0,Q.jsx)(Me,{size:14}),kbd:``,onSelect:()=>H.getState().toggleLayerFlag(`hidden`,t)},{label:h?`Unlock`:`Lock`,icon:h?(0,Q.jsx)(_t,{size:14}):(0,Q.jsx)(D,{size:14}),onSelect:()=>H.getState().toggleLayerFlag(`locked`,t)}]]}),f&&S&&x.map(t=>(0,Q.jsx)(e,{node:t,depth:n+1,dragId:i,dropPos:a,setDropPos:o,onDrop:s},t.id))]})});function ls(e,t){if(t)return{icon:(0,Q.jsx)(Be,{size:13}),hint:null};if(e.kind===`component`){let t=e.props.title??e.props.label??e.props.name;return{icon:(0,Q.jsx)(F,{size:13}),hint:t?.kind===`string`?t.value:null}}if(e.kind===`text`)return{icon:(0,Q.jsx)(Sn,{size:13}),hint:null};if(e.kind===`expression`)return{icon:(0,Q.jsx)(se,{size:13}),hint:null};if(e.kind===`fragment`)return{icon:(0,Q.jsx)(le,{size:13}),hint:null};let n=ri(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,Q.jsx)(xe,{size:13}):n===`Stack`?(0,Q.jsx)(Yt,{size:13}):n===`Grid`?(0,Q.jsx)(d,{size:13}):r?(0,Q.jsx)(Sn,{size:13}):(0,Q.jsx)(rn,{size:13}),hint:r?e.children[0].text??null:n}}function us({q:e}){let t=Ci.filter(t=>!e||t.label.toLowerCase().includes(e.toLowerCase()));return t.length?(0,Q.jsxs)(Q.Fragment,{children:[(0,Q.jsx)(`div`,{className:`group-title`,children:`Basics`}),(0,Q.jsx)(`div`,{className:`basics-grid`,children:t.map(e=>(0,Q.jsxs)(`button`,{className:`basic`,title:`Insert ${e.label.toLowerCase()}${e.kbd?` (${e.kbd})`:``}`,onClick:()=>void wi(e),children:[Mi[e.key],(0,Q.jsx)(`span`,{children:e.label})]},e.key))})]}):null}function ds(){let e=H(e=>e.components),t=H(e=>e.componentsDir),[n,r]=(0,L.useState)(``),[i,a]=(0,L.useState)(null),o=(0,L.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?hs(e.library):e.file.split(`/`).slice(0,-1).join(`/`)||`.`;r.set(t,[...r.get(t)??[],e])}return[...r]},[e,n]);return(0,Q.jsxs)(Q.Fragment,{children:[(0,Q.jsx)(`div`,{className:`search`,children:(0,Q.jsxs)(`div`,{className:`field`,children:[(0,Q.jsx)(`span`,{className:`prefix`,children:(0,Q.jsx)(g,{size:13})}),(0,Q.jsx)(`input`,{value:n,placeholder:`Search assets`,onChange:e=>r(e.target.value),onKeyDown:e=>e.stopPropagation()})]})}),(0,Q.jsxs)(`div`,{className:`scroll`,style:{paddingBottom:24},children:[(0,Q.jsx)(us,{q:n}),(0,Q.jsxs)(`div`,{className:`group-title with-action`,children:[(0,Q.jsx)(`span`,{children:`Components`}),(0,Q.jsx)(`button`,{className:`icon-btn sm`,"aria-label":`New component`,title:`New component`,onClick:()=>Oi(!1),children:(0,Q.jsx)(l,{size:13})})]}),!e.length&&(0,Q.jsxs)(`div`,{className:`assets-empty`,children:[(0,Q.jsx)(F,{size:18}),(0,Q.jsx)(`div`,{className:`title`,children:`No components yet`}),(0,Q.jsxs)(`div`,{className:`faint`,children:[`Components are `,(0,Q.jsx)(`span`,{className:`mono`,children:`.tsx`}),` files in `,(0,Q.jsxs)(`span`,{className:`mono`,children:[t,`/`]}),`. Make one here, or select layers and press `,(0,Q.jsxs)(`span`,{className:`kbd-chip`,children:[_r.mod,`⌥K`]}),` to turn them into a component.`]}),(0,Q.jsxs)(`button`,{className:`btn outline small`,onClick:()=>Oi(!1),children:[(0,Q.jsx)(l,{size:13}),` New component`]})]}),o.map(([e,t])=>(0,Q.jsxs)(`div`,{children:[(0,Q.jsx)(`div`,{className:`group-title`,children:e}),(0,Q.jsx)(`div`,{className:`asset-grid`,children:t.map(e=>(0,Q.jsx)(ms,{spec:e,expanded:i===e.name,onTogglePresets:()=>a(i===e.name?null:e.name)},e.name))})]},e))]})]})}function fs(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 ps({spec:e,preset:t}){let[n,r]=(0,L.useState)(`loading`),i=`/api/thumb?component=${encodeURIComponent(e.name)}${t?`&preset=${encodeURIComponent(t)}`:``}`;return(0,Q.jsx)(`span`,{className:`thumb ${n}`,children:n===`error`?e.library?(0,Q.jsx)(En,{size:16}):(0,Q.jsx)(F,{size:16}):(0,Q.jsx)(`img`,{src:i,alt:``,loading:`lazy`,draggable:!1,onLoad:()=>r(`ok`),onError:()=>r(`error`)})})}function ms({spec:e,expanded:t,onTogglePresets:n}){let[r,i]=(0,L.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,Q.jsxs)(Q.Fragment,{children:[r&&(0,Q.jsx)(m,{x:r.x,y:r.y,onClose:()=>i(null),items:[{label:`Insert`,icon:(0,Q.jsx)(l,{size:14}),onSelect:()=>void Wr(e)},...e.library?[]:[{label:`Edit main component`,icon:(0,Q.jsx)(Nt,{size:14}),onSelect:()=>void Ti(e.name)}],{label:`Open in code editor`,icon:(0,Q.jsx)(Ie,{size:14}),onSelect:()=>Xo(e.name)}]}),(0,Q.jsxs)(`div`,{className:`asset`,draggable:!0,onDragStart:a(),onClick:()=>void Wr(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,Q.jsx)(ps,{spec:e}),(0,Q.jsxs)(`span`,{className:`asset-name`,children:[(0,Q.jsx)(`span`,{children:e.name}),o.length>0&&(0,Q.jsxs)(`button`,{className:`asset-presets${t?` on`:``}`,"aria-label":`${o.length} presets`,onClick:e=>{e.stopPropagation(),n()},children:[o.length,(0,Q.jsx)(ee,{size:11})]})]})]}),t&&(0,Q.jsx)(`div`,{className:`preset-strip`,children:o.map(t=>(0,Q.jsxs)(`div`,{className:`asset small`,draggable:!0,onDragStart:a(fs(e,t.name)),onClick:()=>void Wr(e,void 0,fs(e,t.name)),children:[(0,Q.jsx)(ps,{spec:e,preset:t.name}),(0,Q.jsx)(`span`,{className:`asset-name`,children:(0,Q.jsx)(`span`,{children:t.name})})]},t.name))})]})}function hs(e){return e===`@paper-design/shaders-react`?`Paper Shaders`:e}var gs=0;function _s(){let e=H(e=>e.ready),t=H(e=>e.canvas),n=H(e=>e.toasts),r=H(e=>e.appStatus),i=H(e=>e.appUrl),a=H(e=>e.connected),o=H(e=>e.docError);return(0,L.useEffect)(()=>{Kr();let e=window.matchMedia(`(prefers-color-scheme: dark)`);e.addEventListener(`change`,Kr),(async()=>{let e=await z.state(),t=new URLSearchParams(location.search).get(`canvas`)??localStorage.getItem(`tc:canvas`),n=e.canvases.includes(t??``)?t:e.canvases[0]??null;H.setState({ready:!0,appUrl:e.appUrl,projectName:e.projectName,componentsDir:e.componentsDir??`components`,mcpUrl:e.mcpUrl,darkMode:e.darkMode,canvases:e.canvases,agents:e.agents,feed:e.feed,canvas:n}),ys(),vs(),$(0),ha()})();let t=setInterval(()=>$(0),15e3),n=setInterval(()=>ha(),6e4),r=()=>$(0);window.addEventListener(`focus`,r);let i=An(bs,e=>H.setState({connected:e}));return()=>{i(),e.removeEventListener(`change`,Kr),clearInterval(t),clearInterval(n),window.removeEventListener(`focus`,r)}},[]),(0,L.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),H.getState().compare&&z.clearCompare().catch(()=>{}),H.setState({selection:[],hover:null,rects:{},frameReady:{},frameErrors:{},frameHeights:{},layerQuery:``,compare:null,threads:[],openThread:null,draftComment:null}),Xn(t),ga(),z.canvas(t).then(({doc:e,history:n})=>{H.getState().setDoc(e),H.setState({history:n,expanded:new Set(e.frames.map(e=>e.id))});let r=localStorage.getItem(`tc:camera:${t}`);r?Cr(JSON.parse(r)):requestAnimationFrame(Er)})},[t]),(0,L.useEffect)(()=>{if(!i)return;let e=!1,t=async()=>{try{await fetch(i,{mode:`no-cors`,cache:`no-store`}),H.getState().appStatus!==`up`&&H.setState({appStatus:`up`})}catch{H.setState({appStatus:`down`})}e||setTimeout(t,H.getState().appStatus===`up`?15e3:2500)};return t(),()=>{e=!0}},[i]),(0,L.useEffect)(()=>H.subscribe((e,t)=>{e.selection!==t.selection||e.canvas!==t.canvas?(z.selection(e.canvas,e.selection).catch(()=>{}),W()):e.hover!==t.hover&&e.hover&&!(e.hover in e.rects)&&W()}),[]),e?(0,Q.jsxs)(`div`,{className:`app`,children:[(0,Q.jsx)(Zo,{}),(0,Q.jsxs)(`main`,{style:{position:`relative`,minWidth:0,display:`grid`},children:[(0,Q.jsx)(Bo,{}),(0,Q.jsx)(Ro,{}),(0,Q.jsx)(ko,{}),(0,Q.jsx)(ki,{}),(0,Q.jsx)(Ii,{}),r===`down`&&(0,Q.jsxs)(`div`,{className:`banner`,role:`status`,children:[(0,Q.jsx)(`span`,{className:`dot`}),(0,Q.jsxs)(`div`,{children:[(0,Q.jsx)(`div`,{style:{fontWeight:600},children:`Your app isn’t running`}),(0,Q.jsxs)(`div`,{className:`muted`,children:[`Start `,(0,Q.jsx)(`span`,{className:`mono`,children:`next dev`}),`. Frames render from `,(0,Q.jsx)(`span`,{className:`mono`,children:i})]})]}),(0,Q.jsxs)(`button`,{className:`btn outline`,onClick:()=>H.setState({appStatus:`checking`}),children:[(0,Q.jsx)(h,{size:13}),` Retry`]})]}),o&&(0,Q.jsxs)(`div`,{className:`banner`,style:{top:r===`down`?76:12},role:`alert`,children:[(0,Q.jsx)(`span`,{className:`dot`}),(0,Q.jsxs)(`div`,{children:[(0,Q.jsx)(`div`,{style:{fontWeight:600},children:`The canvas file has a syntax error`}),(0,Q.jsx)(`div`,{className:`muted mono`,style:{maxWidth:520,overflow:`hidden`,textOverflow:`ellipsis`,whiteSpace:`nowrap`},children:o})]})]}),!a&&(0,Q.jsxs)(`div`,{className:`banner`,style:{top:r===`down`?76:12},role:`status`,children:[(0,Q.jsx)(O,{size:14,className:`spin-working`}),(0,Q.jsx)(`div`,{className:`muted`,children:`Lost connection to Truecanvas. Reconnecting…`})]}),(0,Q.jsx)(`div`,{className:`toasts`,children:n.map(e=>(0,Q.jsxs)(`div`,{className:`toast ${e.tone}`,children:[e.tone===`error`&&(0,Q.jsx)(de,{size:14}),(0,Q.jsx)(`span`,{children:e.text}),e.action&&(0,Q.jsx)(`button`,{className:`toast-action`,onClick:()=>{e.action.run(),H.setState({toasts:H.getState().toasts.filter(t=>t.id!==e.id)})},children:e.action.label})]},e.id))})]}),(0,Q.jsx)(Ea,{})]}):(0,Q.jsx)(`div`,{style:{display:`grid`,placeItems:`center`,height:`100%`},className:`faint`,children:(0,Q.jsx)(O,{size:18,className:`spin-working`})})}function vs(){z.pages().then(({canvases:e})=>H.setState({pages:e})).catch(()=>{})}function ys(){z.components().then(({components:e})=>H.setState({components:e})).catch(()=>{}),z.tokens().then(e=>H.setState({tokens:e})).catch(()=>{})}function bs(e){let t=H.getState();switch(e.type){case`comments`:e.canvas===t.canvas&&ga();break;case`git`:pa(),$(0),ha(!0),vs();break;case`doc`:pa(),$(1500),e.canvas===t.canvas&&t.setDoc(e.doc),t.pages.some(t=>t.name===e.canvas&&t.frames!==e.doc.frames.length)&&H.setState({pages:t.pages.map(t=>t.name===e.canvas?{...t,frames:e.doc.frames.length}:t)});break;case`canvases`:H.setState({canvases:e.canvases,canvas:t.canvas&&e.canvases.includes(t.canvas)?t.canvas:e.canvases[0]??null}),vs();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)}H.setState({canvas:e.to})}vs();break;case`catalog`:ys();break;case`history`:e.canvas===t.canvas&&H.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)));H.setState({agents:e.agents,presence:r});break}case`presence`:H.setState({presence:{...t.presence,[e.presence.session]:{...e.presence,ids:e.presence.ids.map(e=>zn(t.index,e))}}}),W(),setTimeout(()=>void W(),400);break;case`change`:if(H.setState({feed:[...t.feed,e.entry].slice(-300)}),e.entry.actor.kind===`agent`&&e.entry.canvas===t.canvas&&e.ids.length){let n=Ya(e.entry.actor.name),r=Date.now(),i=Un(e.entry.actor.name),a=e.ids.map(e=>({key:++gs,id:zn(t.index,e),frame:``,actor:n,color:i,at:r}));H.setState({flashes:[...H.getState().flashes,...a]}),setTimeout(()=>void W(),350),setTimeout(()=>void W(),900),setTimeout(()=>H.setState({flashes:H.getState().flashes.filter(e=>!a.includes(e))}),2800)}break;case`motion`:if(e.canvas!==t.canvas)break;Hi(()=>Promise.resolve().then(()=>hr).then(t=>e.action===`replay`?t.replayFrame(e.frame):t.playFrame(e.action===`play`?e.frame:null)),void 0);break;case`focus`:e.canvas!==t.canvas&&H.setState({canvas:e.canvas}),setTimeout(()=>{let t=H.getState().index;H.getState().select(e.ids.map(e=>zn(t,e))),W().then(()=>Dr())},e.canvas===t.canvas?0:600)}}(0,Dn.createRoot)(document.getElementById(`root`)).render((0,Q.jsx)(_s,{}));

package/dist/editor/assets/react-DB-4Zxce.js

@@ -0,0 +1 @@
+var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,t)=>()=>(t||(e((t={exports:{}}).exports,t),e=null),t.exports),s=(e,n)=>{let r={};for(var i in e)t(r,i,{get:e[i],enumerable:!0});return n||t(r,Symbol.toStringTag,{value:`Module`}),r},c=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},l=(n,r,o)=>(o=n==null?{}:e(i(n)),c(r||!n||!n.__esModule||!a.call(n,`default`)?t(o,`default`,{value:n,enumerable:!0}):o,n)),u=o((e=>{var t=Symbol.for(`react.transitional.element`),n=Symbol.for(`react.portal`),r=Symbol.for(`react.fragment`),i=Symbol.for(`react.strict_mode`),a=Symbol.for(`react.profiler`),o=Symbol.for(`react.consumer`),s=Symbol.for(`react.context`),c=Symbol.for(`react.forward_ref`),l=Symbol.for(`react.suspense`),u=Symbol.for(`react.memo`),d=Symbol.for(`react.lazy`),f=Symbol.for(`react.activity`),p=Symbol.for(`react.view_transition`),m=Symbol.iterator;function h(e){return typeof e!=`object`||!e?null:(e=m&&e[m]||e[`@@iterator`],typeof e==`function`?e:null)}var g={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},_=Object.assign,v={};function y(e,t,n){this.props=e,this.context=t,this.refs=v,this.updater=n||g}y.prototype.isReactComponent={},y.prototype.setState=function(e,t){if(typeof e!=`object`&&typeof e!=`function`&&e!=null)throw Error(`takes an object of state variables to update or a function which returns an object of state variables.`);this.updater.enqueueSetState(this,e,t,`setState`)},y.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,`forceUpdate`)};function b(){}b.prototype=y.prototype;function x(e,t,n){this.props=e,this.context=t,this.refs=v,this.updater=n||g}var S=x.prototype=new b;S.constructor=x,_(S,y.prototype),S.isPureReactComponent=!0;var C=Array.isArray;function w(){}var T={H:null,A:null,T:null,S:null},E=Object.prototype.hasOwnProperty;function D(e,n,r){var i=r.ref;return{$$typeof:t,type:e,key:n,ref:i===void 0?null:i,props:r}}function O(e,t){return D(e.type,t,e.props)}function k(e){return typeof e==`object`&&!!e&&e.$$typeof===t}function A(e){var t={"=":`=0`,":":`=2`};return`$`+e.replace(/[=:]/g,function(e){return t[e]})}var j=/\/+/g;function M(e,t){return typeof e==`object`&&e&&e.key!=null?A(``+e.key):t.toString(36)}function N(e){switch(e.status){case`fulfilled`:return e.value;case`rejected`:throw e.reason;default:switch(typeof e.status==`string`?e.then(w,w):(e.status=`pending`,e.then(function(t){e.status===`pending`&&(e.status=`fulfilled`,e.value=t)},function(t){e.status===`pending`&&(e.status=`rejected`,e.reason=t)})),e.status){case`fulfilled`:return e.value;case`rejected`:throw e.reason}}throw e}function P(e,r,i,a,o){var s=typeof e;(s===`undefined`||s===`boolean`)&&(e=null);var c=!1;if(e===null)c=!0;else switch(s){case`bigint`:case`string`:case`number`:c=!0;break;case`object`:switch(e.$$typeof){case t:case n:c=!0;break;case d:return c=e._init,P(c(e._payload),r,i,a,o)}}if(c)return o=o(e),c=a===``?`.`+M(e,0):a,C(o)?(i=``,c!=null&&(i=c.replace(j,`$&/`)+`/`),P(o,r,i,``,function(e){return e})):o!=null&&(k(o)&&(o=O(o,i+(o.key==null||e&&e.key===o.key?``:(``+o.key).replace(j,`$&/`)+`/`)+c)),r.push(o)),1;c=0;var l=a===``?`.`:a+`:`;if(C(e))for(var u=0;u<e.length;u++)a=e[u],s=l+M(a,u),c+=P(a,r,i,s,o);else if(u=h(e),typeof u==`function`)for(e=u.call(e),u=0;!(a=e.next()).done;)a=a.value,s=l+M(a,u++),c+=P(a,r,i,s,o);else if(s===`object`){if(typeof e.then==`function`)return P(N(e),r,i,a,o);throw r=String(e),Error(`Objects are not valid as a React child (found: `+(r===`[object Object]`?`object with keys {`+Object.keys(e).join(`, `)+`}`:r)+`). If you meant to render a collection of children, use an array instead.`)}return c}function F(e,t,n){if(e==null)return e;var r=[],i=0;return P(e,r,``,``,function(e){return t.call(n,e,i++)}),r}function I(e){if(e._status===-1){var t=e._result,n=t();n.then(function(t){(e._status===0||e._status===-1)&&(e._status=1,e._result=t,n.status===void 0&&(n.status=`fulfilled`,n.value=t))},function(t){(e._status===0||e._status===-1)&&(e._status=2,e._result=t,n.status===void 0&&(n.status=`rejected`,n.reason=t))}),e._status===-1&&(e._status=0,e._result=n)}if(e._status===1)return e._result.default;throw e._result}var L=typeof reportError==`function`?reportError:function(e){if(typeof window==`object`&&typeof window.ErrorEvent==`function`){var t=new window.ErrorEvent(`error`,{bubbles:!0,cancelable:!0,message:typeof e==`object`&&e&&typeof e.message==`string`?String(e.message):String(e),error:e});if(!window.dispatchEvent(t))return}else if(typeof process==`object`&&typeof process.emit==`function`){process.emit(`uncaughtException`,e);return}console.error(e)};function R(e){var t=T.T,n={};n.types=t===null?null:t.types,T.T=n;try{var r=e(),i=T.S;i!==null&&i(n,r),typeof r==`object`&&r&&typeof r.then==`function`&&r.then(w,L)}catch(e){L(e)}finally{t!==null&&n.types!==null&&(t.types=n.types),T.T=t}}function z(e){var t=T.T;if(t!==null){var n=t.types;n===null?t.types=[e]:n.indexOf(e)===-1&&n.push(e)}else R(z.bind(null,e))}var B={map:F,forEach:function(e,t,n){F(e,function(){t.apply(this,arguments)},n)},count:function(e){var t=0;return F(e,function(){t++}),t},toArray:function(e){return F(e,function(e){return e})||[]},only:function(e){if(!k(e))throw Error(`React.Children.only expected to receive a single React element child.`);return e}};e.Activity=f,e.Children=B,e.Component=y,e.Fragment=r,e.Profiler=a,e.PureComponent=x,e.StrictMode=i,e.Suspense=l,e.ViewTransition=p,e.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE=T,e.__COMPILER_RUNTIME={__proto__:null,c:function(e){return T.H.useMemoCache(e)}},e.addTransitionType=z,e.cache=function(e){return function(){return e.apply(null,arguments)}},e.cacheSignal=function(){return null},e.cloneElement=function(e,t,n){if(e==null)throw Error(`The argument must be a React element, but you passed `+e+`.`);var r=_({},e.props),i=e.key;if(t!=null)for(a in t.key!==void 0&&(i=``+t.key),t)!E.call(t,a)||a===`key`||a===`__self`||a===`__source`||a===`ref`&&t.ref===void 0||(r[a]=t[a]);var a=arguments.length-2;if(a===1)r.children=n;else if(1<a){for(var o=Array(a),s=0;s<a;s++)o[s]=arguments[s+2];r.children=o}return D(e.type,i,r)},e.createContext=function(e){return e={$$typeof:s,_currentValue:e,_currentValue2:e,_threadCount:0,Provider:null,Consumer:null},e.Provider=e,e.Consumer={$$typeof:o,_context:e},e},e.createElement=function(e,t,n){var r,i={},a=null;if(t!=null)for(r in t.key!==void 0&&(a=``+t.key),t)E.call(t,r)&&r!==`key`&&r!==`__self`&&r!==`__source`&&(i[r]=t[r]);var o=arguments.length-2;if(o===1)i.children=n;else if(1<o){for(var s=Array(o),c=0;c<o;c++)s[c]=arguments[c+2];i.children=s}if(e&&e.defaultProps)for(r in o=e.defaultProps,o)i[r]===void 0&&(i[r]=o[r]);return D(e,a,i)},e.createRef=function(){return{current:null}},e.forwardRef=function(e){return{$$typeof:c,render:e}},e.isValidElement=k,e.lazy=function(e){return{$$typeof:d,_payload:{_status:-1,_result:e},_init:I}},e.memo=function(e,t){return{$$typeof:u,type:e,compare:t===void 0?null:t}},e.startTransition=R,e.unstable_useCacheRefresh=function(){return T.H.useCacheRefresh()},e.use=function(e){return T.H.use(e)},e.useActionState=function(e,t,n){return T.H.useActionState(e,t,n)},e.useCallback=function(e,t){return T.H.useCallback(e,t)},e.useContext=function(e){return T.H.useContext(e)},e.useDebugValue=function(){},e.useDeferredValue=function(e,t){return T.H.useDeferredValue(e,t)},e.useEffect=function(e,t){return T.H.useEffect(e,t)},e.useEffectEvent=function(e){return T.H.useEffectEvent(e)},e.useId=function(){return T.H.useId()},e.useImperativeHandle=function(e,t,n){return T.H.useImperativeHandle(e,t,n)},e.useInsertionEffect=function(e,t){return T.H.useInsertionEffect(e,t)},e.useLayoutEffect=function(e,t){return T.H.useLayoutEffect(e,t)},e.useMemo=function(e,t){return T.H.useMemo(e,t)},e.useOptimistic=function(e,t){return T.H.useOptimistic(e,t)},e.useReducer=function(e,t,n){return T.H.useReducer(e,t,n)},e.useRef=function(e){return T.H.useRef(e)},e.useState=function(e){return T.H.useState(e)},e.useSyncExternalStore=function(e,t,n){return T.H.useSyncExternalStore(e,t,n)},e.useTransition=function(){return T.H.useTransition()},e.version=`19.3.0`})),d=o(((e,t)=>{t.exports=u()}));export{l as i,o as n,s as r,d as t};

package/dist/editor/favicon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <path fill="#f2774a" fill-rule="evenodd" d="M4 5h56v18H4z M22 14h20v46H22z"/>
+</svg>

package/dist/editor/hub.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <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-C4_700Hv.js"></script>
+    <link rel="modulepreload" crossorigin href="/assets/react-DB-4Zxce.js">
+    <link rel="modulepreload" crossorigin href="/assets/controls-BYFjuGCq.js">
+    <link rel="stylesheet" crossorigin href="/assets/controls-BQYSgX53.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>