twombly 0.4.3 → 0.4.5

package/dist/ui/index.html

@@ -17,14 +17,30 @@
     <meta property="og:image:width" content="1200" />
     <meta property="og:image:height" content="630" />
     <meta name="twitter:card" content="summary_large_image" />
-    <script type="application/ld+json">{"@context":"https://schema.org","@type":"SoftwareApplication","name":"Twombly","url":"https://twombly.app/","applicationCategory":"DesignApplication","operatingSystem":"macOS, Windows, Linux","description":"Your agent puts each design exploration on one canvas as a live frame. Then share, comment, and huddle with one link.","publisher":{"@type":"Organization","name":"Materic, Inc."}}</script>
+    <link rel="alternate" type="text/plain" title="Twombly for agents" href="/llms.txt" />
+    <script type="application/ld+json">{"@context":"https://schema.org","@type":"SoftwareApplication","name":"Twombly","url":"https://twombly.app/","applicationCategory":"DesignApplication","applicationSubCategory":"Design collaboration for coding agents","operatingSystem":"macOS, Windows, Linux","description":"Your agent puts each design exploration on one canvas as a live frame. Then share, comment, and huddle with one link.","installUrl":"https://www.npmjs.com/package/twombly","softwareHelp":{"@type":"CreativeWork","url":"https://twombly.app/skill.md"},"sameAs":["https://www.npmjs.com/package/twombly"],"publisher":{"@type":"Organization","name":"Materic, Inc."}}</script>
     <script src="/theme.js"></script>
-    <script type="module" crossorigin src="/assets/index-DONn84Ys.js"></script>
+    <script type="module" crossorigin src="/assets/index-BsjjBUS_.js"></script>
     <link rel="modulepreload" crossorigin href="/assets/rolldown-runtime-WkwZ5CU-.js">
-    <link rel="modulepreload" crossorigin href="/assets/agentPrompt-Va8atsXW.js">
-    <link rel="stylesheet" crossorigin href="/assets/index-CADUZOuJ.css">
+    <link rel="modulepreload" crossorigin href="/assets/agentPrompt-Dxy3aH2W.js">
+    <link rel="stylesheet" crossorigin href="/assets/index-BkX_x_hA.css">
   </head>
   <body>
-    <div id="root"></div>
+    <!-- For agents and search engines that don't run scripts. The app replaces it on its first render. -->
+    <div id="root"><main id="about" style="opacity:0">
+      <h1>Twombly: a canvas for your agent’s explorations</h1>
+      <p>Your coding agent puts each design exploration on one canvas as a live frame. Then share, comment, and huddle with one link.</p>
+      <h2>Get started</h2>
+      <p>Tell your agent: “Run npx skills add materic-inc/twombly-skill -g -y, then use the Twombly skill to put this project’s main screens on a canvas.” Or run <code>npx -y twombly@latest guide</code>.</p>
+      <h2>How it works</h2>
+      <ul>
+        <li>Works with Claude Code, Codex, Cursor and any agent that can run a command, in any framework and any repo.</li>
+        <li>Each version is a folder of static files: a real build, one component with mock data, a capture of a running page, or a picture.</li>
+        <li>The canvas opens on localhost. Nothing goes online until someone clicks Share.</li>
+        <li>Shared canvases have live cursors, following, comments on the frames and voice huddles.</li>
+        <li>The agent reads what you’re looking at and the comments you leave, then updates the frames.</li>
+      </ul>
+      <p><a href="/skill.md">Agent guide</a> · <a href="/llms.txt">llms.txt</a> · <a href="https://www.npmjs.com/package/twombly">npm</a> · <a href="/privacy">Privacy</a> · <a href="/terms">Terms</a></p>
+    </main></div>
   </body>
 </html>

package/dist/ui/llms.txt

@@ -0,0 +1,23 @@
+# Twombly
+
+> A canvas for your coding agent's design explorations. The agent builds each version of a design as a live frame on one infinite canvas, on localhost. Clicking Share gives the team one link with live cursors, following, comments on the frames and voice huddles.
+
+Works with Claude Code, Codex, Cursor and any agent that can run a command, in any framework and any repo. The tool is the `twombly` package on npm. Its output is JSON.
+
+To use it, install the skill with `npx skills add materic-inc/twombly-skill` or from https://twombly.app/skill.md, or run `npx -y twombly@latest guide` and follow it.
+
+- A frame is a folder of static files that runs with no server and no network: a real build, one component bundled with mock data, a frozen capture of a running page, or a picture.
+- Gates check every frame for secrets, outside requests and server code, locally and again in the cloud.
+- Nothing goes online until the person clicks Share. The agent never shares unless asked.
+- `twombly context` returns what the person is looking at; `twombly comments` returns their feedback.
+
+## Docs
+
+- [Agent skill](https://twombly.app/skill.md): the short skill to install
+- [Skill on GitHub](https://github.com/materic-inc/twombly-skill): install with `npx skills add materic-inc/twombly-skill`
+- [npm package](https://www.npmjs.com/package/twombly): install, commands and README
+
+## Optional
+
+- [Privacy](https://twombly.app/privacy)
+- [Terms](https://twombly.app/terms)

package/dist/ui/terms.html

@@ -15,10 +15,10 @@
 <nav><a class="wordmark" href="/" aria-label="Twombly"></a></nav>
 <main>
 <h1>Terms</h1>
-<p class="updated">Updated November 4, 2026</p>
-<p>These terms are between you and Materic, Inc. Using Twombly means you agree to them.</p>
+<p class="updated">Updated November 6, 2026</p>
+<p>These terms are between you and Materic, Inc. Using Twombly means you agree to them. You must be at least 13 to use Twombly.</p>
 <h2>What you share</h2>
-<p>Your work stays yours. You give us permission to store it and show it to anyone with its link, only so the service can work. You're responsible for what you share, including having the rights to any code, images, fonts and data in it.</p>
+<p>Your work stays yours. You give us permission to store it and show it to anyone with its link, only so the service can work. You're responsible for what you share, including having the rights to any code, images, fonts and data in it. If someone makes a claim against us because of what you shared or how you used Twombly, you'll cover our resulting costs, including reasonable legal fees.</p>
 <h2>What you can't do</h2>
 <ul>
 <li>Share anything illegal, or that infringes someone's rights.</li>
@@ -30,6 +30,8 @@
 <p>We may take down a canvas or close an account that breaks these rules. We may do this without notice if it's urgent.</p>
 <h2>The service</h2>
 <p>Twombly is early. It may change, have limits added, or stop. We provide it as is, without warranties, and aren't liable for lost work, lost profits or indirect damages, to the fullest extent the law allows. Keep your own copies of anything that matters.</p>
+<h2>Law</h2>
+<p>Delaware law governs these terms, and any dispute will be heard in the state or federal courts in Delaware. This doesn't take away rights your local law gives you that can't be waived.</p>
 <h2>Changes</h2>
 <p>We may update these terms. If a change matters, we'll tell you here before it takes effect. Continuing to use the service means you accept the new terms.</p>
 <h2>Contact</h2>

package/package.json

@@ -1,7 +1,10 @@
 {
   "name": "twombly",
-  "version": "0.4.3",
-  "description": "Put design explorations on a shared canvas. Built for agents.",
+  "version": "0.4.5",
+  "description": "A canvas for your coding agent's design explorations. Each version becomes a live frame; share one link for cursors, comments and huddles.",
+  "keywords": ["agent", "ai-agent", "coding-agent", "claude-code", "codex", "cursor", "agent-skill", "design", "design-exploration", "prototype", "canvas", "infinite-canvas", "collaboration", "variations", "cli"],
+  "homepage": "https://twombly.app",
+  "author": "Materic, Inc.",
   "type": "module",
   "bin": { "twombly": "dist/cli.js" },
   "publishConfig": { "access": "public" },

package/dist/ui/assets/Landing-BcTSCNtU.js

@@ -1,111 +0,0 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/LandingStage-B6nZEQJ5.js","assets/rolldown-runtime-WkwZ5CU-.js","assets/agentPrompt-Va8atsXW.js","assets/index-DONn84Ys.js","assets/index-CADUZOuJ.css","assets/LandingStage-BcivO6Eh.css"])))=>i.map(i=>d[i]);
-import{n as e}from"./rolldown-runtime-WkwZ5CU-.js";import{Ct as t,D as n,E as r,N as i,Rt as a,S as o,T as s,i as c,j as l,o as u,p as d,s as f,t as p,u as m,w as h,wt as g,zt as _}from"./agentPrompt-Va8atsXW.js";import{n as v,r as y,t as b}from"./index-DONn84Ys.js";var x=e(_(),1),S=i();function ee(){return(0,S.jsxs)(`span`,{className:`landing-marks`,"aria-hidden":`true`,children:[(0,S.jsx)(`svg`,{viewBox:`0 0 24 24`,fill:`currentColor`,children:(0,S.jsx)(`path`,{d:`m4.7144 15.9555 4.7174-2.6471.079-.2307-.079-.1275h-.2307l-.7893-.0486-2.6956-.0729-2.3375-.0971-2.2646-.1214-.5707-.1215-.5343-.7042.0546-.3522.4797-.3218.686.0608 1.5179.1032 2.2767.1578 1.6514.0972 2.4468.255h.3886l.0546-.1579-.1336-.0971-.1032-.0972L6.973 9.8356l-2.55-1.6879-1.3356-.9714-.7225-.4918-.3643-.4614-.1578-1.0078.6557-.7225.8803.0607.2246.0607.8925.686 1.9064 1.4754 2.4893 1.8336.3643.3035.1457-.1032.0182-.0728-.164-.2733-1.3539-2.4467-1.445-2.4893-.6435-1.032-.17-.6194c-.0607-.255-.1032-.4674-.1032-.7285L6.287.1335 6.6997 0l.9957.1336.419.3642.6192 1.4147 1.0018 2.2282 1.5543 3.0296.4553.8985.2429.8318.091.255h.1579v-.1457l.1275-1.706.2368-2.0947.2307-2.6957.0789-.7589.3764-.9107.7468-.4918.5828.2793.4797.686-.0668.4433-.2853 1.8517-.5586 2.9021-.3643 1.9429h.2125l.2429-.2429.9835-1.3053 1.6514-2.0643.7286-.8196.85-.9046.5464-.4311h1.0321l.759 1.1293-.34 1.1657-1.0625 1.3478-.8804 1.1414-1.2628 1.7-.7893 1.36.0729.1093.1882-.0183 2.8535-.607 1.5421-.2794 1.8396-.3157.8318.3886.091.3946-.3278.8075-1.967.4857-2.3072.4614-3.4364.8136-.0425.0304.0486.0607 1.5482.1457.6618.0364h1.621l3.0175.2247.7892.522.4736.6376-.079.4857-1.2142.6193-1.6393-.3886-3.825-.9107-1.3113-.3279h-.1822v.1093l1.0929 1.0686 2.0035 1.8092 2.5075 2.3314.1275.5768-.3218.4554-.34-.0486-2.2039-1.6575-.85-.7468-1.9246-1.621h-.1275v.17l.4432.6496 2.3436 3.5214.1214 1.0807-.17.3521-.6071.2125-.6679-.1214-1.3721-1.9246L14.38 17.959l-1.1414-1.9428-.1397.079-.674 7.2552-.3156.3703-.7286.2793-.6071-.4614-.3218-.7468.3218-1.4753.3886-1.9246.3157-1.53.2853-1.9004.17-.6314-.0121-.0425-.1397.0182-1.4328 1.9672-2.1796 2.9446-1.7243 1.8456-.4128.164-.7164-.3704.0667-.6618.4008-.5889 2.386-3.0357 1.4389-1.882.929-1.0868-.0062-.1579h-.0546l-6.3385 4.1164-1.1293.1457-.4857-.4554.0608-.7467.2307-.2429 1.9064-1.3114Z`})}),(0,S.jsx)(`svg`,{viewBox:`0 0 24 24`,fill:`currentColor`,children:(0,S.jsx)(`path`,{d:`M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z`})})]})}var C=`twombly:show-copied`,w=.41960295031576633,T=.15,E=.2765523188064277,D=.5783555327868779,O=-44*Math.PI/180,k={x:Math.sin(O),y:-Math.cos(O)},A=(e,t=0,n=1)=>Math.min(n,Math.max(t,e)),j=(e,t,n)=>({x:e.x+t.x*n,y:e.y+t.y*n}),M=e=>Math.hypot(e.x,e.y),N=e=>{let t=M(e);return t<.001?{x:1,y:0}:{x:e.x/t,y:e.y/t}},P=(e,t,n,r)=>({start:e,outgoing:t,incoming:n,end:r});function F(e,t){let n=1-t;return{x:n**3*e.start.x+3*n*n*t*e.outgoing.x+3*n*t*t*e.incoming.x+t**3*e.end.x,y:n**3*e.start.y+3*n*n*t*e.outgoing.y+3*n*t*t*e.incoming.y+t**3*e.end.y}}function te(e,t){let n=A(t),r=Math.min(e.curves.length-1,Math.floor(n*e.curves.length)),i=n===1?1:n*e.curves.length-r,a=e.curves[r],o=1-i,s={x:3*(o*o*(a.outgoing.x-a.start.x)+2*o*i*(a.incoming.x-a.outgoing.x)+i*i*(a.end.x-a.incoming.x))*e.curves.length,y:3*(o*o*(a.outgoing.y-a.start.y)+2*o*i*(a.incoming.y-a.outgoing.y)+i*i*(a.end.y-a.incoming.y))*e.curves.length},c=N(s),l=1-(1-A((n-.99)/.01))**3,u=N({x:c.x*(1-l)+k.x*l,y:c.y*(1-l)+k.y*l});return{point:F(a,i),derivative:s,heading:u}}function I(e,t){let n=e=>!t||e.x>=t.x+20&&e.x<t.x+t.width-20&&e.y>=t.y+20&&e.y<t.y+t.height-20,r=e[0].start,i,a=0,o=0,s=0,c=0,l=n(r);for(let t of e)for(let e=1;e<=24;e++){let u=F(t,e/24),d=u.x-r.x,f=u.y-r.y,p=Math.hypot(d,f);if(a+=p,l&&=n(u),p>.01){let e=Math.atan2(f,d);if(i!==void 0){let t=Math.atan2(Math.sin(e-i),Math.cos(e-i));o+=t*t,s+=Math.abs(t),c=Math.max(c,Math.abs(t))}i=e}r=u}return{length:a,turnEnergy:o,totalTurn:s,sharpestTurn:c,inBounds:l}}function L(e,t,n){let r={x:t.x-e.x,y:t.y-e.y},i=M(r),a=N(r),o=[];if(i<=10)o.push([P(e,j(e,r,1/3),j(e,r,2/3),t)]);else{let n=Math.min(i*w,i*.9,640),r=Math.min(i*T,i*.9,640),s=j(e,k,n),c=j(t,k,-r);o.push([P(e,s,c,t)]),o.push([P(e,j(e,k,n*.65),j(t,k,-r*.65),t)]);let l=k.x*a.y-k.y*a.x<0?-1:1,u={x:a.y*l,y:-a.x*l},d=j({x:(e.x+t.x)/2,y:(e.y+t.y)/2},k,n*.16),f=Math.min(i*E,520),p=Math.min(i*D,440);for(let n of[.55,.8,1.05])for(let r of[.65,1,1.35])for(let i of[1,-1]){let l=j(d,u,f*n*i);o.push([P(e,s,j(l,a,-p*r),l),P(l,j(l,a,p*r),c,t)])}}let s=A((-.08-k.x*a.x-k.y*a.y)/.92);return o.map(e=>{let t=I(e,n),r=Math.max(0,t.length/Math.max(1,i)-1),a=e.length>1,o=t.length+320*r+140*t.turnEnergy+180*t.sharpestTurn+18*t.totalTurn+(a?45:0)+90*s,c=A(.42*A(r/.55)+.38*A(t.totalTurn/(1.4*Math.PI))+.2*A(t.turnEnergy/1.25))*.12,l=A((a?.9:1)*.9*((a?.04:0)+.28*s+.22*A((t.length-180)/760)+.42+c),.12,2.2);return{curves:e,...t,score:o,response:l}})}function ne(e,t,n){let r=L(e,t,n),i=r.filter(e=>e.inBounds);return(i.length?i:r).reduce((e,t)=>t.score<e.score?t:e)}var R=(e=0)=>({value:e,velocity:0}),re=Math.atan2(k.y,k.x)*180/Math.PI,ie=1600;function z(e,t,n,r,i){let a=2*Math.PI/n,o=r*a,s=a*Math.sqrt(1-r*r),c=e.value-t,l=(e.velocity+o*c)/s,u=Math.cos(s*i),d=Math.sin(s*i),f=Math.exp(-o*i);e.value=t+f*(c*u+l*d),e.velocity=f*(-o*(c*u+l*d)+s*(-c*d+l*u))}function B(e,t){return e+Math.atan2(Math.sin((t-e)*Math.PI/180),Math.cos((t-e)*Math.PI/180))*180/Math.PI}var ae=class{position;velocity={x:0,y:0};kind=`idle`;target;path;pathScale=1;progress=R();horizontal;vertical;axis=R();baseRotation=R();lean=R();stretch=R();heading=0;constructor(e){this.position={...e},this.target={...e},this.horizontal=R(e.x),this.vertical=R(e.y)}moveTo(e,t,n=!1){if(!Number.isFinite(e.x)||!Number.isFinite(e.y))return;if(this.target={...e},n){this.jumpTo(e);return}this.pathScale=Math.max(.001,t.z);let r=Math.hypot(e.x-this.position.x,e.y-this.position.y)*this.pathScale;if(r<.01&&Math.hypot(this.velocity.x,this.velocity.y)*this.pathScale<12){this.jumpTo(e);return}if(this.horizontal={value:this.position.x,velocity:this.velocity.x},this.vertical={value:this.position.y,velocity:this.velocity.y},this.kind=r<=196?`scoot`:`curve`,this.kind===`scoot`){this.path=void 0;return}let i=e=>({x:e.x*this.pathScale,y:e.y*this.pathScale});this.path=ne(i(this.position),i(e),{x:-t.x,y:-t.y,width:t.width,height:t.height});let{derivative:a}=te(this.path,0),o=a.x**2+a.y**2,s=o?(this.velocity.x*a.x+this.velocity.y*a.y)*this.pathScale/o:0;this.progress={value:0,velocity:A(s,0,5/this.path.response)}}jumpTo(e){Object.assign(this.position,e),this.target={...e},this.velocity.x=this.velocity.y=0,this.horizontal=R(e.x),this.vertical=R(e.y),this.axis=R(),this.baseRotation=R(),this.lean=R(),this.stretch=R(),this.progress=R(),this.path=void 0,this.heading=0,this.kind=`idle`}translateBy(e,t){if(Number.isFinite(e)&&Number.isFinite(t)&&(e||t)&&(this.position.x+=e,this.position.y+=t,this.target.x+=e,this.target.y+=t,this.horizontal.value+=e,this.vertical.value+=t,this.path)){let n=n=>({x:n.x+e*this.pathScale,y:n.y+t*this.pathScale});this.path.curves=this.path.curves.map(e=>({start:n(e.start),outgoing:n(e.outgoing),incoming:n(e.incoming),end:n(e.end)}))}}advance(e,t=this.pathScale){if(!(e>0)||!Number.isFinite(e)||this.kind===`idle`&&this.deformationSettled())return!1;if(this.kind===`scoot`)z(this.horizontal,this.target.x,.24,.84,e),z(this.vertical,this.target.y,.24,.84,e),this.position.x=this.horizontal.value,this.position.y=this.vertical.value,this.velocity.x=this.horizontal.velocity,this.velocity.y=this.vertical.velocity;else if(this.kind===`curve`&&this.path){z(this.progress,1,this.path.response,.9,e);let{point:t,derivative:n,heading:r}=te(this.path,this.progress.value);this.position.x=t.x/this.pathScale,this.position.y=t.y/this.pathScale;let i=this.progress.value>=1?0:this.progress.velocity/this.pathScale;this.velocity.x=n.x*i,this.velocity.y=n.y*i,this.heading=B(this.heading,Math.atan2(r.y,r.x)*180/Math.PI-re)}let n=Math.hypot(this.velocity.x,this.velocity.y)*t,r=this.kind===`scoot`?A(n/ie):0,i=n>12?Math.atan2(this.velocity.y,this.velocity.x)*180/Math.PI:this.axis.value;z(this.axis,B(this.axis.value,i),.07,.82,e),z(this.baseRotation,this.kind===`curve`?this.heading:B(this.baseRotation.value,0),.09,.86,e),z(this.stretch,r,.095,.72,e);let a=n>12?A(this.velocity.x*t/n*76*r,-76,76):0;return z(this.lean,a,.055,.76,e),Math.hypot(this.target.x-this.position.x,this.target.y-this.position.y)*t<.05&&n<12&&(this.kind!==`curve`||Math.abs(this.progress.value-1)<.001)&&(Object.assign(this.position,this.target),this.velocity.x=this.velocity.y=0,this.kind=`idle`,this.path=void 0),this.kind===`idle`&&this.deformationSettled()&&(this.baseRotation=R(),this.lean=R(),this.stretch=R()),!0}deformationSettled(){let e=B(0,this.baseRotation.value);return Math.abs(e)<.01&&Math.abs(this.baseRotation.velocity)<.1&&Math.abs(this.lean.value)<.01&&Math.abs(this.lean.velocity)<.1&&Math.abs(this.stretch.value)<1e-4&&Math.abs(this.stretch.velocity)<.001}get bodyTransform(){let e=A(this.stretch.value,0,1);return`rotate(${this.baseRotation.value+this.lean.value}deg) rotate(${this.axis.value}deg) scale(${1+.38*e}, ${1-.18*e}) rotate(${-this.axis.value}deg)`}},oe={wide:{width:1280,height:720,columns:3},narrow:{width:640,height:760,columns:2}},V=440,H=340,U={top:84,right:64,bottom:64,left:64},W=[1,2,3,4,5,6],G=[{name:`Avery Kim`,color:`#3b82f6`},{name:`Mo Rivera`,color:`#10b981`},{name:`Jules Sato`,color:`#f59e0b`}],se=[[`AK`,`#3b82f6`,`Avery Kim`,`commented on Checkout redesign`,`2m`],[`MR`,`#10b981`,`Mo Rivera`,`approved your pull request`,`14m`],[`JS`,`#f59e0b`,`Jules Sato`,`shared Q4 roadmap with you`,`1h`],[`TN`,`#ef4444`,`Tess Novak`,`mentioned you in Launch plan`,`3h`],[`RO`,`#8b5cf6`,`Rae Okafor`,`invited you to Brand review`,`5h`],[`LB`,`#0ea5e9`,`Lee Brandt`,`resolved your comment`,`1d`],[`NH`,`#ec4899`,`Noor Haddad`,`added you to Onboarding`,`2d`],[`IC`,`#14b8a6`,`Ines Costa`,`replied to your comment`,`2d`],[`DV`,`#f97316`,`Dev Varma`,`shared Pricing page with you`,`3d`]],ce=`#e5484d`,le=5,ue=g(.45,.28),de=g(1.1,0),fe=g(.3,0),K=(e,t)=>({x:e%t*496,y:Math.floor(e/t)*412});function pe(e,t,n){let r=.5,i=e-.5,a=t-.5;return`M ${r+n} ${r} H ${i-n} A ${n} ${n} 0 0 1 ${i} ${r+n} V ${a-n} A ${n} ${n} 0 0 1 ${i-n} ${a} H ${r+n} A ${n} ${n} 0 0 1 ${r} ${a-n} V ${r+n} A ${n} ${n} 0 0 1 ${r+n} ${r} Z`}function me({version:e,rows:t=4}){return(0,S.jsxs)(`div`,{className:`ld-design`,"data-v":e,children:[(0,S.jsx)(`h1`,{children:`Notifications`}),se.slice(0,t).map(([e,t,n,r,i])=>(0,S.jsxs)(`div`,{className:`ld-n`,children:[(0,S.jsx)(`span`,{className:`ld-av`,style:{background:t},children:e}),(0,S.jsxs)(`div`,{children:[(0,S.jsx)(`div`,{className:`ld-t`,children:n}),(0,S.jsx)(`div`,{className:`ld-d`,children:r})]}),(0,S.jsx)(`span`,{className:`ld-w`,children:i})]},n))]})}function q({color:e,name:t,id:n}){return(0,S.jsxs)(`div`,{className:`cursor ld-cursor`,"data-cursor":n,style:{color:e},children:[(0,S.jsx)(`svg`,{width:`22`,height:`22`,viewBox:`0 0 24 24`,children:(0,S.jsx)(`path`,{d:c,fill:`currentColor`,stroke:`#fff`,strokeWidth:`1.5`,strokeLinejoin:`round`})}),t&&(0,S.jsx)(`span`,{className:`cursor-label`,style:{background:e},children:t})]})}function he({id:e,person:t,text:n}){let{name:r,color:i}=G[t];return(0,S.jsxs)(`div`,{className:`comment-pin ld-pin`,"data-pin":e,children:[(0,S.jsx)(l,{name:r,picture:null,color:i}),(0,S.jsxs)(`span`,{className:`comment-pin-preview`,children:[(0,S.jsxs)(`span`,{className:`comment-pin-head`,children:[(0,S.jsx)(`b`,{children:r}),` `,(0,S.jsx)(`span`,{className:`muted`,children:`now`})]}),(0,S.jsx)(`span`,{className:`comment-pin-text`,children:n})]})]})}function ge(e,t){let n=oe[t],r=t=>e.querySelector(t),i=r(`.ld-world`),a=r(`[data-zoom]`),o=r(`.ld-scene`),s=r(`.faces`),c=r(`.share-button`),l=r(`.share-sharing`),u=r(`.share-sharing i`),d=r(`.share-split`),f=r(`.ld-strokes path`),p=[...e.querySelectorAll(`.ld-frame`)],m=[...s.children],h={a:r(`[data-pin="a"]`),b:r(`[data-pin="b"]`)},_={width:n.width,height:n.height,x:0,y:0,z:1},v=new Set,b=0,x=0,S=!1,ee=e=>{b=requestAnimationFrame(ee);let t=Math.min(50,e-x);x=e;for(let e of v)e(t)||v.delete(e)},C=e=>{e!==S&&(S=e,cancelAnimationFrame(b),e&&(x=performance.now(),b=requestAnimationFrame(ee)))},w=e=>new Promise(t=>{let n=e;v.add(e=>(n-=e,n>0||(t(),!1)))}),T=(e,t)=>new Promise(n=>{let r=0;v.add(i=>(r+=i,r<e.ms?(t(e.at(r)),!0):(t(1),n(),!1)))}),E=(e,t)=>T({ms:e,at:t=>t/e,css:``},t),D={x:0,y:0,z:1},O=e=>{D=e,i.style.transform=`translate(${e.x}px, ${e.y}px) scale(${e.z})`,i.style.setProperty(`--inv`,String(1/e.z)),i.style.setProperty(`--zoom`,String(e.z)),a.textContent=`${Math.round(e.z*100)}%`},k=e=>{let t=W.slice(0,e).map((e,t)=>K(t,n.columns)),r=Math.max(...t.map(e=>e.x))+V,i=Math.max(...t.map(e=>e.y))+H,a={width:n.width-U.left-U.right,height:n.height-U.top-U.bottom},o=Math.min(1,a.width/r,a.height/i);return{z:o,x:U.left+(a.width-r*o)/2,y:U.top+(a.height-i*o)/2}},A=e=>{let t=D;return T(de,n=>O({x:t.x+(e.x-t.x)*n,y:t.y+(e.y-t.y)*n,z:t.z+(e.z-t.z)*n}))},j=(e,t,r,i=k(W.length))=>{let a=K(e-1,n.columns);return{x:i.x+(a.x+V*t)*i.z,y:i.y+(a.y+H*r)*i.z}},M=e=>{let t=r(`[data-cursor="${e}"]`),n=t.querySelector(`svg`),i=new ae({x:0,y:0}),a=()=>{t.style.transform=`translate3d(${i.position.x}px, ${i.position.y}px, 0)`,n.style.transform=i.bodyTransform};return v.add(e=>(i.advance(e/1e3,1),a(),!0)),{el:t,place(e){i.jumpTo(e),t.style.opacity=`1`,a()},hide(){t.style.opacity=`0`},move(e){return i.moveTo(e,_),new Promise(e=>v.add(()=>i.kind!==`idle`||(e(),!1)))}}},N=M(`you`),P=[M(`0`),M(`1`),M(`2`)],F=e=>T(ue,t=>{e.style.opacity=String(Math.min(1,t*1.6)),e.style.scale=String(.6+.4*t)}),te=async e=>{await E(90,t=>{e.style.scale=String(1-.05*t)}),await E(120,t=>{e.style.scale=String(.95+.05*t)})},I=e=>(s.style.display=``,e.style.display=``,F(e)),L=(e,t)=>{e.style.left=`${t.x}px`,e.style.top=`${t.y}px`},ne=()=>{let e=j(3,.5,.5),t=k(W.length),n=V*t.z*.56,r=H*t.z*.58;return Array.from({length:110},(t,i)=>{let a=i/109,o=-2.4+a*1.85*Math.PI*2,s=1+.06*Math.sin(a*9)+a*.05;return[e.x+Math.cos(o)*n*s+a*8,e.y+Math.sin(o)*r*s-a*6,.5]})},R=()=>{for(let e of p)e.style.opacity=`0`,e.style.scale=`0.6`;for(let e of m)e.style.opacity=`0`,e.style.scale=`0.6`,e.style.display=`none`;s.style.display=`none`;for(let e of Object.values(h))e.style.opacity=`0`,e.style.scale=`0.6`,e.classList.remove(`expanded`);for(let e of[N,...P])e.hide();c.style.display=``,l.style.display=`none`,d.style.display=`none`,f.setAttribute(`d`,``),o.style.opacity=`1`,s.style.opacity=`1`,O(k(1))},re=()=>{for(let e of[...p,...m,...Object.values(h)])e.style.opacity=`1`,e.style.scale=`1`;for(let e of m)e.style.display=``;s.style.display=``,L(h.a,j(2,.72,.34)),L(h.b,j(5,.3,.36)),h.b.classList.add(`expanded`),O(k(W.length)),f.setAttribute(`d`,y({points:ne(),size:le})),P[0].place(j(2,.34,.8)),P[1].place(j(5,.86,.7)),P[2].place(j(3,.92,.9))},ie=async()=>{let t=1500;for(;;){R(),await w(t),t=500;for(let e=0;e<p.length;e++)F(p[e]),e&&A(k(e+1)),await w(e?720:1e3);await w(700),N.place({x:n.width*.74,y:n.height+30});let r=e.getBoundingClientRect(),i=r.width/n.width;await N.move((e=>{let t=e.getBoundingClientRect();return{x:(t.left+t.width/2-r.left)/i,y:(t.top+t.height/2-r.top)/i}})(c)),await te(c),c.style.display=`none`,l.style.display=``,u.style.width=`6%`,await T(g(1,0),e=>{u.style.width=`${6+94*e}%`}),l.style.display=`none`,d.style.display=``,d.dataset.copied=``,N.move(j(1,.8,1.08)),await w(1e3),delete d.dataset.copied,P[0].place({x:-30,y:n.height*.42}),I(m[2]),await P[0].move(j(2,.72,.34)),P[1].place({x:n.width*.3,y:n.height+30}),I(m[1]),L(h.a,j(2,.72,.34)),F(h.a),P[0].move(j(2,.34,.8)),await P[1].move(j(5,.3,.36)),L(h.b,j(5,.3,.36)),await F(h.b),await w(250),h.b.classList.add(`expanded`),P[1].move(j(5,.86,.7));let a=ne();P[2].place({x:n.width+30,y:n.height*.3}),I(m[0]),await P[2].move({x:a[0][0],y:a[0][1]}),await E(1500,e=>{let t=Math.max(2,Math.ceil(e*a.length));f.setAttribute(`d`,y({points:a.slice(0,t),size:le}));let[n,r]=a[t-1];P[2].place({x:n,y:r})}),await w(400),P[2].move(j(3,.92,.9)),await w(1400),P[0].move(j(1,.5,.42)),await w(1100),P[1].move(j(4,.72,.62)),await w(2200),await E(420,e=>{o.style.opacity=String(1-e),s.style.opacity=String(1-e)}),await T(fe,()=>{})}};if(matchMedia(`(prefers-reduced-motion: reduce)`).matches)return R(),re(),()=>{};ie();let z=new IntersectionObserver(([e])=>C(e.isIntersecting));return z.observe(e),()=>{z.disconnect(),C(!1),v.clear()}}function _e(){let e=(0,x.useRef)(null),t=(0,x.useRef)(null),[i,a]=(0,x.useState)(0),c=i&&i<720?`narrow`:`wide`,p=oe[c];(0,x.useLayoutEffect)(()=>{let t=new ResizeObserver(([e])=>a(e.contentRect.width));return t.observe(e.current),()=>t.disconnect()},[]),(0,x.useEffect)(()=>{if(i)return ge(t.current,c)},[c,i>0]);let g=i/p.width,_=25*g,[v]=(0,x.useState)(()=>window.innerWidth*1.15/Math.min(1200,window.innerWidth-32)),y=(0,x.useMemo)(()=>W.map((e,t)=>K(t,p.columns)),[p.columns]);return(0,S.jsxs)(`div`,{ref:e,className:`ld-shell`,style:{height:i?p.height*g:void 0,borderRadius:_,"--ld-from":v},"aria-hidden":`true`,children:[i>0&&(0,S.jsx)(`svg`,{className:`ld-draw`,children:(0,S.jsx)(`path`,{d:pe(i,p.height*g,_-.5),pathLength:`1`})}),i>0&&(0,S.jsxs)(`div`,{ref:t,className:`ld-stage ld-${c}`,style:{width:p.width,height:p.height,transform:`scale(${g})`},children:[(0,S.jsxs)(`div`,{className:`ld-scene`,children:[(0,S.jsx)(`div`,{className:`world ld-world`,children:W.map((e,t)=>(0,S.jsxs)(`div`,{className:`frame ld-frame`,style:{left:y[t].x,top:y[t].y,width:V,height:H},children:[(0,S.jsx)(`div`,{className:`frame-title`,children:(0,S.jsxs)(`span`,{children:[`V`,e]})}),(0,S.jsx)(`div`,{className:`frame-surface`,children:(0,S.jsx)(me,{version:e})})]},e))}),(0,S.jsx)(`svg`,{className:`ld-strokes`,width:p.width,height:p.height,children:(0,S.jsx)(`path`,{fill:ce})}),(0,S.jsx)(he,{id:`a`,person:0,text:``}),(0,S.jsx)(he,{id:`b`,person:1,text:`Can we try this one darker?`})]}),(0,S.jsx)(`div`,{className:`chrome shell top-left ld-rise`,children:(0,S.jsx)(`span`,{className:`canvas-name`,children:`Notification Explorations`})}),(0,S.jsx)(`div`,{className:`chrome shell toolbar ld-rise`,children:(0,S.jsx)(`div`,{className:`toolbar-clip`,children:(0,S.jsxs)(`div`,{className:`toolbar-row`,children:[(0,S.jsx)(`span`,{className:`tool-slider`,style:{width:50}}),(0,S.jsx)(`span`,{className:`tool`,"aria-pressed":`true`,children:(0,S.jsx)(h,{size:18})}),(0,S.jsx)(`span`,{className:`tool`,children:(0,S.jsx)(d,{size:18})}),(0,S.jsx)(`span`,{className:`tool`,children:(0,S.jsx)(m,{size:18})}),(0,S.jsx)(`span`,{className:`shell-divider`}),(0,S.jsx)(`span`,{className:`tool`,children:(0,S.jsx)(s,{size:18})})]})})}),(0,S.jsxs)(`div`,{className:`chrome shell top-right ld-rise`,children:[(0,S.jsx)(`div`,{className:`faces`,children:[2,1,0].map(e=>(0,S.jsx)(`span`,{className:`face-button`,children:(0,S.jsx)(l,{name:G[e].name,picture:null,color:G[e].color})},e))}),(0,S.jsx)(`span`,{className:`primary-button share-button`,children:`Share`}),(0,S.jsxs)(`span`,{className:`primary-button share-sharing`,style:{display:`none`},children:[(0,S.jsx)(`i`,{}),(0,S.jsx)(`span`,{children:`Share`})]}),(0,S.jsxs)(`span`,{className:`share-split`,style:{display:`none`},children:[(0,S.jsxs)(`span`,{className:`primary-button`,children:[(0,S.jsxs)(`span`,{className:`ld-copied`,children:[(0,S.jsx)(u,{size:14}),`Copied`]}),(0,S.jsx)(`span`,{className:`ld-copy`,children:`Copy link`})]}),(0,S.jsx)(`span`,{className:`primary-button`,children:(0,S.jsx)(f,{size:14})})]})]}),(0,S.jsxs)(`div`,{className:`chrome shell zoom ld-rise`,children:[(0,S.jsx)(`span`,{className:`icon-button`,children:(0,S.jsx)(n,{})}),(0,S.jsx)(`span`,{className:`shell-divider`}),(0,S.jsx)(`span`,{className:`icon-button`,children:(0,S.jsx)(o,{})}),(0,S.jsx)(`span`,{className:`zoom-value`,"data-zoom":!0,children:`100%`}),(0,S.jsx)(`span`,{className:`icon-button`,children:(0,S.jsx)(r,{})})]}),(0,S.jsxs)(`div`,{className:`ld-cursors`,children:[(0,S.jsx)(q,{id:`0`,color:G[0].color,name:G[0].name}),(0,S.jsx)(q,{id:`1`,color:G[1].color,name:G[1].name}),(0,S.jsx)(q,{id:`2`,color:G[2].color,name:G[2].name}),(0,S.jsx)(q,{id:`you`,color:`#000`})]})]},c)]})}var J=[[0,6],[.4,13],[.75,19],[.88,20.2],[1,22]],ve=J[1][0],ye=e=>Math.min(1,Math.max(0,e)),be=e=>{let t=Math.max(1,J.findIndex(([t])=>t>=e)),[n,r]=J[t-1],[i,a]=J[t];return r+(e-n)/(i-n)*(a-r)},xe=e=>{if(e<J[0][1]||e>=J[J.length-1][1])return 1;let t=J.findIndex(([,t])=>t>=e);if(t<=0)return 0;let[n,r]=J[t-1],[i,a]=J[t];return n+(e-r)/(a-r)*(i-n)},Se=[[0,0],[.12,.5],[.28,1],[.58,.5],[.72,0],[.84,null]],Ce=e=>[...Se].reverse().find(([t])=>e>=t)[1],we=Array.from({length:8},(e,t)=>{let n=t*Math.PI/4,r=e=>`${(12+Math.cos(n)*e).toFixed(2)} ${(12+Math.sin(n)*e).toFixed(2)}`;return`M${r(8.2)}L${r(10.6)}`}).join(``);function Te({rays:e}){let t=(0,x.useId)(),n=e===null;return(0,S.jsxs)(`svg`,{className:`light-glyph`,viewBox:`0 0 24 24`,"aria-hidden":`true`,children:[(0,S.jsxs)(`mask`,{id:t,children:[(0,S.jsx)(`rect`,{x:`-4`,y:`-4`,width:`32`,height:`32`,fill:`#fff`}),(0,S.jsx)(`circle`,{className:`light-cut`,cx:`6.5`,cy:`17.5`,r:`8`,fill:`#000`,style:{transform:n?`none`:`translate(-9px, 9px)`}})]}),(0,S.jsxs)(`g`,{className:`light-turn`,style:{transform:`rotate(${n?180:0}deg)`},children:[(0,S.jsx)(`circle`,{className:`light-core`,cx:`12`,cy:`12`,r:`9`,fill:`currentColor`,mask:`url(#${t})`,style:{transform:`scale(${n?1:.56})`,opacity:n?1:.7+.3*e}}),(0,S.jsx)(`path`,{className:`light-rays`,d:we,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,style:{transform:n?`rotate(-90deg) scale(0.5)`:`scale(${.74+.26*e})`,opacity:n?0:.55+.45*e}})]})]})}function Ee({hour:e,onHour:t}){let[n,r]=(0,x.useState)(!1),[i,a]=(0,x.useState)(!1),[o,s]=(0,x.useState)(!1),c=(0,x.useRef)(null),l=n||i||o,u=xe(e),d=e=>{let n=c.current.getBoundingClientRect();t(be(ye((e.clientX-n.left)/n.width)))},f=e=>{e.currentTarget.setPointerCapture(e.pointerId),s(!0),d(e)},p=e=>{let n={ArrowLeft:-.05,ArrowDown:-.05,ArrowRight:.05,ArrowUp:.05}[e.key];n!==void 0&&(e.preventDefault(),t(be(ye(u+n))))},m=u>.85;return(0,S.jsx)(`div`,{className:`light-switch`,"data-open":l||void 0,"data-dragging":o||void 0,style:{"--x":u},onPointerEnter:e=>e.pointerType===`mouse`&&r(!0),onPointerLeave:e=>e.pointerType===`mouse`&&r(!1),onFocus:e=>e.target.matches(`:focus-visible`)&&a(!0),onBlur:()=>a(!1),children:(0,S.jsxs)(`div`,{className:`light-pill`,children:[(0,S.jsx)(`div`,{ref:c,className:`light-track`,role:`slider`,"aria-label":`Time of day`,"aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":Math.round(u*100),"aria-valuetext":m?`Night`:u<ve?`Morning`:`Evening`,tabIndex:0,onPointerDown:f,onPointerMove:e=>o&&d(e),onPointerUp:()=>s(!1),onPointerCancel:()=>s(!1),onKeyDown:p,children:(0,S.jsx)(`span`,{className:`light-dot`})}),(0,S.jsx)(`button`,{type:`button`,className:`light-toggle`,"aria-label":m?`Switch to day`:`Switch to night`,onClick:()=>t(be(m?ve:1),!0),children:(0,S.jsx)(Te,{rays:Ce(u)})})]})})}var Y={ms:800,ease:[.45,0,.55,1]},De=t(...Y.ease),Oe=[[0,`#1f283c`,`#0f1421`,`#2a3755`,`#0c1220`],[4.5,`#1a2132`,`#0d111d`,`#25304c`,`#0a0f1b`],[5.5,`#555b7c`,`#2c3149`,`#8f91b4`,`#3a4252`],[6.5,`#efc4ae`,`#8a7a84`,`#ffe1c9`,`#a79a78`],[7.5,`#f8e2c8`,`#a89c94`,`#fff5e4`,`#b9c39a`],[10,`#fcfaf4`,`#adaca6`,`#ffffff`,`#c9d8bb`],[13,`#ffffff`,`#acadac`,`#ffffff`,`#d3e0c8`],[16,`#faf2e3`,`#aaa193`,`#fffbf1`,`#c7d0a7`],[18,`#e9bd95`,`#a07f62`,`#ffdcb2`,`#a89a62`],[19,`#da9570`,`#7a5a50`,`#ffb78c`,`#6d5f4b`],[19.75,`#84678a`,`#4a4262`,`#b78fa8`,`#3b3550`],[20.75,`#2f3756`,`#1a1f33`,`#3f4a70`,`#141a2c`],[24,`#1f283c`,`#0f1421`,`#2a3755`,`#0c1220`]],ke=e=>[1,3,5].map(t=>(parseInt(e.slice(t,t+2),16)/255)**2.2),Ae=e=>`#${e.map(e=>Math.round(e**(1/2.2)*255).toString(16).padStart(2,`0`)).join(``)}`,je=new URLSearchParams(location.search).get(`hour`),Me=()=>{if(je!==null)return Number(je);let e=new Date;return e.getHours()+e.getMinutes()/60};function Ne(){let[e,t]=(0,x.useState)(Me);return(0,x.useEffect)(()=>{let e=()=>t(Me()),n=window.setInterval(e,3e4);return document.addEventListener(`visibilitychange`,e),()=>{window.clearInterval(n),document.removeEventListener(`visibilitychange`,e)}},[]),e}function Pe(e){let{lit:t,shade:n}=Fe(e),[r,i,a]=t.map((e,t)=>n[t]+(e-n[t])*.6);return{lit:Ae(t),shade:Ae(n),dark:.2126*r+.7152*i+.0722*a<.18}}function Fe(e){let t=Math.max(1,Oe.findIndex(([t])=>t>=e)),[n,...r]=Oe[t-1],[i,...a]=Oe[t],o=(e-n)/(i-n),s=o*o*(3-2*o),[c,l,u,d]=r.map((e,t)=>{let n=ke(a[t]);return ke(e).map((e,t)=>e+(n[t]-e)*s)}),f=2*Math.PI*(e-12.5)/24,p=(9+36*Math.abs(Math.cos(f)))*Math.PI/180,m=Math.sin(f)*52*Math.PI/180;return{lit:c,shade:l,sky:u,leaf:d,sun:[-Math.cos(p)*Math.cos(m),Math.sin(p),Math.cos(p)*Math.sin(m)]}}var X={wind:1.1,gust:1,flutter:1.65,leafSize:1,shadow:.55,softness:1,sun:.61,skyLeaves:.29},Ie=`#version 300 es
-in vec2 a;
-void main() { gl_Position = vec4(a, 0., 1.); }`,Le=`#version 300 es
-precision highp float;
-out vec4 fragColor;
-uniform vec2 uRes;
-uniform float uTime;
-uniform vec3 uSun, uLit, uShade, uSky, uLeaf;
-uniform sampler2D uLeaves;
-// Tuning, from LIGHT below.
-uniform float uGust, uFlutter, uLeafSize, uShadow, uSoft, uSunStrength, uSkyLeaves;
-
-// How far the corners melt. Lower is softer.
-const float CORNER = 5.5;
-// Half the height of the box, and how much of the screen its far wall fills.
-const float HALF = 3.;
-const float FAR_WALL = .5;
-
-float dither(vec2 p) {
-  vec3 h = fract(p.xyx * .1031);
-  h += dot(h, h.yzx + 33.33);
-  return fract((h.x + h.y) * h.z);
-}
-
-float band(float x, float a, float b, float soft) {
-  return smoothstep(a - soft, a + soft, x) * (1. - smoothstep(b - soft, b + soft, x));
-}
-
-// Wind moving through the trees: gusts travel along the canopy, leaning the branches as they pass,
-// stirring the leaves and opening small gaps that let more light through.
-float foliage(vec2 zy) {
-  float t = uTime;
-  float gust = sin(t * .42 - zy.x * .3) + .6 * sin(t * .67 - zy.x * .5 + zy.y * .2 + 1.3);
-  float stir = (.12 + .2 * abs(gust)) * uFlutter;
-  vec2 lean = .6 * gust * uGust * vec2(1., .3);
-  vec2 flutter = stir * vec2(sin(t * 1.3 + zy.y * 1.7), cos(t * 1.1 + zy.x * 1.5));
-  float near = texture(uLeaves, (zy + lean + flutter) * .21 / uLeafSize + vec2(.17, .31)).r;
-  float far = texture(uLeaves, (zy + lean * .4 + flutter * .3) * .09 / uLeafSize + vec2(.61, .09)).r;
-  float gap = .03 * gust;
-  return max(smoothstep(.1 + gap, .42 + gap, near), .75 * smoothstep(.1, .4, far));
-}
-
-// Sun reaching a point through a tall opening down the left side, then through the leaves.
-// The further the light has travelled from the opening, the wider its edges.
-float sunlight(vec3 p, float wall) {
-  vec3 hit = p + uSun * ((-wall - p.x) / uSun.x);
-  float soft = (.25 + .07 * length(hit - p)) * uSoft;
-  float open = band(hit.y, -HALF + .3, HALF - .3, soft) * band(hit.z, -30., 60., soft);
-  float bar = mod(hit.z, 4.) - 2.;
-  open *= 1. - min(1., .22 / soft) * exp(-bar * bar / (soft * soft));
-  vec3 leaf = p + uSun * ((-wall - 3. - p.x) / uSun.x);
-  return open * (1. - uShadow * foliage(leaf.zy));
-}
-
-void main() {
-  float aspect = uRes.x / uRes.y;
-  vec2 p = (gl_FragCoord.xy - uRes * .5) / uRes.y;
-
-  // The far wall has the same shape as the screen, so the corners run straight to the screen's corners.
-  vec2 back = vec2(aspect, 1.) * .5 * FAR_WALL;
-  float wall = HALF * aspect;
-  float depth = HALF / back.y;
-
-  // How far past the far wall's outline this pixel is, and how much it belongs to each face.
-  vec2 reach = abs(p) / back;
-  vec3 weights = exp(CORNER * vec3(reach, 1.));
-  weights /= weights.x + weights.y + weights.z;
-  float besides = weights.x;
-  float above = weights.y;
-  float ahead = weights.z;
-
-  float leftFace = besides * (1. - smoothstep(-.1, .1, p.x / back.x));
-  float rightFace = besides - leftFace;
-  float floorFace = above * (1. - smoothstep(-.1, .1, p.y / back.y));
-  float ceilingFace = above - floorFace;
-
-  // Points on each face, for the sun.
-  float tWall = min(wall / max(abs(p.x), .01), depth);
-  float tFlat = min(HALF / max(abs(p.y), .01), depth);
-  vec3 onRight = vec3(wall, p.y * tWall, tWall);
-  vec3 onLeft = vec3(-wall, p.y * tWall, tWall);
-  vec3 onFloor = vec3(p.x * tFlat, -HALF, tFlat);
-  vec3 onBack = vec3(p.x * depth, p.y * depth, depth);
-
-  // Daylight fills the box from the left, thinning toward the right.
-  float x = p.x / (back.x * 2.);
-  float fill = 1. - .55 * smoothstep(-1.2, 1.5, x);
-  fill *= leftFace + floorFace + ahead * .9 + ceilingFace * .74 + rightFace * .8;
-
-  // The corners are only a slight gathering of shade where two faces meet.
-  float crease = 1. - max(besides, max(above, ahead));
-  fill *= 1. - crease * .3;
-  vec3 color = mix(uShade, uLit, fill);
-
-  // Sun.
-  vec3 s = uSun;
-  float sun = 0.;
-  if (floorFace > .02) sun += floorFace * sunlight(onFloor, wall) * min(1., s.y * 3.);
-  if (ahead > .02) sun += ahead * sunlight(onBack, wall) * min(1., max(-s.z, 0.) * 2.5);
-  if (rightFace > .02) sun += rightFace * sunlight(onRight, wall) * min(1., -s.x * 2.);
-  color += uLit * sun * uSunStrength;
-
-  // The left side is the light itself: bright sky with trees far out of focus.
-  color = mix(color, mix(uSky, uLeaf, foliage(onLeft.zy) * uSkyLeaves), leftFace);
-
-  color = pow(min(color, vec3(1.)), vec3(1. / 2.2));
-  // A single level of 8-bit noise: invisible, but it stops the gradients from banding.
-  color += (dither(gl_FragCoord.xy + 17.) - .5) / 255.;
-  fragColor = vec4(color, 1.);
-}`;function Re(){let e=1024,t=document.createElement(`canvas`);t.width=t.height=e;let n=t.getContext(`2d`),r=606,i=()=>(r=r*16807%2147483647)/2147483647;n.fillStyle=`#000`,n.fillRect(0,0,e,e),n.fillStyle=n.strokeStyle=`#fff`,n.lineCap=`round`;for(let t=0;t<22;t++){let t=i()*e,r=i()*e,a=i()*Math.PI*2,o=260+i()*460;for(let e=0;e<o;e+=14){a+=(i()-.5)*.3;let s=t+Math.cos(a)*14,c=r+Math.sin(a)*14;if(n.lineWidth=Math.max(1.5,6*(1-e/o)),n.beginPath(),n.moveTo(t,r),n.lineTo(s,c),n.stroke(),t=s,r=c,!(i()>.42))for(let e of[-1,1]){if(i()>.8)continue;let o=a+e*(.5+i()*.7),s=34+i()*40;n.save(),n.translate(t+Math.cos(o)*s*.55,r+Math.sin(o)*s*.55),n.rotate(o),n.beginPath(),n.ellipse(0,0,s*.55,s*.2,0,0,Math.PI*2),n.fill(),n.restore()}}}return ze(t)}function ze(e){let t=document.createElement(`canvas`);t.width=t.height=128;let n=t.getContext(`2d`,{willReadFrequently:!0});n.drawImage(e,0,0,128,128);let r=n.getImageData(0,0,128,128),i=Float32Array.from({length:16384},(e,t)=>r.data[t*4]);for(let e=0;e<6;e++){let t=new Float32Array(16384);for(let n=0;n<128;n++)for(let r=0;r<128;r++){let a=0;for(let t=-13;t<=13;t++){let o=e%2?(n+t+128)%128*128+r:n*128+(r+t+128)%128;a+=i[o]}t[n*128+r]=a/27}i=t}return i.forEach((e,t)=>{r.data[t*4]=r.data[t*4+1]=r.data[t*4+2]=e}),n.putImageData(r,0,0),t}function Be({hour:e,glide:t}){let n=(0,x.useRef)(null),r=(0,x.useRef)(e),i=(0,x.useRef)(e),a=(0,x.useRef)(null),o=(0,x.useRef)(null);return(0,x.useEffect)(()=>{a.current=t?{from:i.current,at:performance.now()}:null,r.current=e,o.current?.()},[e]),(0,x.useEffect)(()=>{let e=n.current,t=e.getContext(`webgl2`,{antialias:!1,alpha:!1});if(!t)return;let s=t.createProgram();for(let[e,n]of[[t.VERTEX_SHADER,Ie],[t.FRAGMENT_SHADER,Le]]){let r=t.createShader(e);t.shaderSource(r,n),t.compileShader(r),t.attachShader(s,r)}t.bindAttribLocation(s,0,`a`),t.linkProgram(s),t.useProgram(s),t.bindBuffer(t.ARRAY_BUFFER,t.createBuffer()),t.bufferData(t.ARRAY_BUFFER,new Float32Array([-1,-1,3,-1,-1,3]),t.STATIC_DRAW),t.enableVertexAttribArray(0),t.vertexAttribPointer(0,2,t.FLOAT,!1,0,0),t.bindTexture(t.TEXTURE_2D,t.createTexture()),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,t.RGBA,t.UNSIGNED_BYTE,Re()),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.REPEAT),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.REPEAT);let c=e=>t.getUniformLocation(s,e),l=(n,r)=>{let{clientWidth:i,clientHeight:a}=e;(e.width!==i||e.height!==a)&&(e.width=i,e.height=a,t.viewport(0,0,i,a));let o=Fe(r);t.uniform2f(c(`uRes`),i,a),t.uniform1f(c(`uTime`),n),t.uniform1f(c(`uGust`),X.gust),t.uniform1f(c(`uFlutter`),X.flutter),t.uniform1f(c(`uLeafSize`),X.leafSize),t.uniform1f(c(`uShadow`),X.shadow),t.uniform1f(c(`uSoft`),X.softness),t.uniform1f(c(`uSunStrength`),X.sun),t.uniform1f(c(`uSkyLeaves`),X.skyLeaves),t.uniform3fv(c(`uSun`),o.sun),t.uniform3fv(c(`uLit`),o.lit),t.uniform3fv(c(`uShade`),o.shade),t.uniform3fv(c(`uSky`),o.sky),t.uniform3fv(c(`uLeaf`),o.leaf),t.drawArrays(t.TRIANGLES,0,3)};if(matchMedia(`(prefers-reduced-motion: reduce)`).matches){o.current=()=>l(0,r.current);let t=new ResizeObserver(()=>l(0,r.current));return t.observe(e),()=>{o.current=null,t.disconnect()}}let u=performance.now(),d=u/1e3,f=requestAnimationFrame(function e(t){let n=a.current;if(n){let e=Math.min(1,Math.max(0,(t-n.at)/Y.ms));i.current=n.from+(r.current-n.from)*De(e),e===1&&(a.current=null)}else i.current+=(r.current-i.current)*(1-Math.exp((u-t)*.002));d+=(t-u)/1e3*X.wind,u=t,l(d,i.current),f=requestAnimationFrame(e)});return()=>cancelAnimationFrame(f)},[]),(0,S.jsx)(`canvas`,{ref:n,className:`window-light`,"aria-hidden":`true`})}var Ve=new URLSearchParams(location.search).get(`hero`)!==`1`,He=(0,x.lazy)(()=>b(()=>import(`./LandingStage-B6nZEQJ5.js`),__vite__mapDeps([0,1,2,3,4,5]))),Ue=[[`A`,`canvas`,`for`,`your`],[`agent’s`,`explorations`]],We=g(.8,0),Ge=g(1.1,0),Ke=.1,qe=3,Je=.14,Z=8,Ye=500,Q=32,Xe=1500,Ze=(()=>{let e=crypto.getRandomValues(new Uint8Array(16)),t=Date.now();for(let n=5;n>=0;n--)e[n]=t%256,t=Math.floor(t/256);e[6]=e[6]&15|112,e[8]=e[8]&63|128;let n=Array.from(e,e=>e.toString(16).padStart(2,`0`)).join(``);return`${n.slice(0,8)}-${n.slice(8,12)}-${n.slice(12,16)}-${n.slice(16,20)}-${n.slice(20)}`})(),$=(e,t={})=>a(`/api/events`,{event:e,visit:Ze,...t});function Qe(){let e=(0,x.useRef)(null),t=(0,x.useRef)(null);return(0,x.useEffect)(()=>{if(matchMedia(`(prefers-reduced-motion: reduce)`).matches)return;let n=[0,0,0,0],r=[0,0,0,0],i=0,a=!1,o=()=>{let e=!0;r.forEach((t,i)=>{r[i]=t+(n[i]-t)*Je,Math.abs(n[i]-r[i])>.01&&(e=!1)}),e&&r.splice(0,4,...n);let[a,s,c,l]=r.map(e=>e.toFixed(2));t.current&&(t.current.style.transform=r.some(Boolean)?`perspective(${Ye}px) translate(${a}px, ${s}px) rotateX(${c}deg) rotateY(${l}deg)`:``),i=e?0:requestAnimationFrame(o)},s=()=>{i||=requestAnimationFrame(o)},c=(e,t)=>Math.max(-t,Math.min(t,e)),l=()=>{a&&(a=!1,n.fill(0),s())},u=t=>{if(t.pointerType!==`mouse`||!e.current)return;let r=e.current.getBoundingClientRect();if(t.clientX<=r.left-Q||t.clientX>=r.right+Q||t.clientY<=r.top-Q||t.clientY>=r.bottom+Q)return l();a=!0;let i=t.clientX-r.left-r.width/2,o=t.clientY-r.top-r.height/2;n[0]=c(i*Ke,qe),n[1]=c(o*Ke,qe),n[2]=c(-o/(r.height/2)*Z,Z),n[3]=c(i/(r.width/2)*Z,Z),s()};return window.addEventListener(`pointermove`,u),document.documentElement.addEventListener(`pointerleave`,l),()=>{cancelAnimationFrame(i),window.removeEventListener(`pointermove`,u),document.documentElement.removeEventListener(`pointerleave`,l)}},[]),[e,t]}function $e(){let[e,t]=(0,x.useState)(!1),n=(0,x.useRef)(0);(0,x.useEffect)(()=>()=>window.clearTimeout(n.current),[]);let r=()=>{t(!0),window.clearTimeout(n.current),n.current=window.setTimeout(()=>t(!1),Xe)};return[e,e=>{navigator.clipboard?.writeText(e).then(()=>{$(`prompt_copied`),r()}).catch(()=>{})},r]}function et(){let[e,t,n]=$e(),[r,i]=Qe();return(0,x.useEffect)(()=>(window.addEventListener(C,n),()=>window.removeEventListener(C,n)),[]),(0,S.jsx)(`span`,{ref:r,className:`landing-magnet`,children:(0,S.jsx)(`div`,{ref:i,className:`landing-cta`,children:(0,S.jsxs)(`button`,{type:`button`,className:`landing-button`,"data-copied":e||void 0,onClick:()=>t(p),children:[(0,S.jsxs)(`span`,{className:`landing-states`,children:[(0,S.jsxs)(`span`,{className:`landing-state`,children:[(0,S.jsx)(ee,{}),(0,S.jsx)(`span`,{className:`landing-label`,children:`Copy agent prompt`})]}),(0,S.jsxs)(`span`,{className:`landing-state`,"aria-hidden":`true`,children:[(0,S.jsx)(`svg`,{className:`landing-check`,viewBox:`0 0 18 18`,children:(0,S.jsx)(`path`,{d:`M3.5 9.5 7.25 13.25 14.5 5`,pathLength:`1`})}),(0,S.jsx)(`span`,{className:`landing-done`,children:`Copied`})]})]}),(0,S.jsx)(`span`,{className:`landing-sr`,"aria-live":`polite`,children:e?`Copied`:``})]})})})}function tt(){let e=0;return(0,S.jsx)(`h1`,{className:`landing-title`,children:Ue.map((t,n)=>(0,S.jsxs)(x.Fragment,{children:[n>0&&(0,S.jsx)(`br`,{}),t.map(t=>(0,S.jsxs)(x.Fragment,{children:[(0,S.jsx)(`span`,{className:`landing-word`,style:{"--delay":`${100+e++*80}ms`},children:t}),` `]},t))]},n))})}function nt(){(0,x.useEffect)(()=>{$(`landing_viewed`,{url:location.href,referrer:document.referrer})},[]);let e=Ne(),[t,n]=(0,x.useState)(null),[r,i]=(0,x.useState)(!1),a=(e,t=!1)=>{n(e),i(t)},o=t??e,{lit:s,shade:c,dark:l}=Pe(o),[u,d]=(0,x.useState)(!1),f=(0,x.useRef)(l);return(0,x.useEffect)(()=>{if(f.current===l)return;f.current=l,d(!0);let e=window.setTimeout(()=>d(!1),Y.ms);return()=>window.clearTimeout(e)},[l]),(0,x.useEffect)(()=>{document.body.style.background=s,document.body.style.colorScheme=l?`dark`:`light`},[s,l]),(0,S.jsxs)(`div`,{className:`landing`,"data-dark":l||void 0,"data-shifting":u||void 0,"data-glide":r||void 0,style:{"--lit":s,"--shade":c,"--shift-ms":`${Y.ms}ms`,"--shift-ease":`cubic-bezier(${Y.ease.join(`, `)})`,"--word-ease":We.css,"--word-ms":`${We.ms}ms`,"--rise-ease":Ge.css,"--rise-ms":`${Ge.ms}ms`},children:[(0,S.jsx)(Be,{hour:o,glide:r}),(0,S.jsxs)(`nav`,{className:`landing-nav`,"aria-label":`Main`,children:[(0,S.jsx)(`a`,{className:`wordmark`,href:`/`,children:(0,S.jsx)(v,{})}),(0,S.jsxs)(`div`,{className:`landing-nav-end`,children:[(0,S.jsx)(Ee,{hour:o,onHour:a}),(0,S.jsx)(`a`,{className:`landing-sign-in`,href:`/auth/google/start?next=/`,onClick:()=>$(`sign_in_clicked`),children:`Sign in`})]})]}),(0,S.jsxs)(`main`,{className:`landing-hero`,children:[(0,S.jsx)(tt,{}),(0,S.jsx)(`p`,{className:`landing-body`,children:`Then share, comment, and huddle with one link.`}),(0,S.jsx)(`div`,{className:`landing-actions`,children:(0,S.jsx)(et,{})}),Ve?(0,S.jsx)(`div`,{className:`landing-slot`,children:(0,S.jsx)(x.Suspense,{fallback:null,children:(0,S.jsx)(He,{dark:l})})}):(0,S.jsx)(_e,{})]}),(0,S.jsxs)(`footer`,{className:`landing-foot`,children:[(0,S.jsxs)(`span`,{children:[`© Materic, Inc. `,new Date().getFullYear()]}),(0,S.jsxs)(`nav`,{children:[(0,S.jsx)(`a`,{href:`/privacy`,children:`Privacy`}),(0,S.jsx)(`a`,{href:`/terms`,children:`Terms`})]})]})]})}export{nt as Landing,C as t};

package/dist/ui/assets/agentPrompt-Va8atsXW.js

@@ -1 +0,0 @@
-import{n as e,t}from"./rolldown-runtime-WkwZ5CU-.js";var n=t((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`),ee=Symbol.for(`react.lazy`),d=Symbol.for(`react.activity`),te=Symbol.for(`react.view_transition`),ne=Symbol.iterator;function re(e){return typeof e!=`object`||!e?null:(e=ne&&e[ne]||e[`@@iterator`],typeof e==`function`?e:null)}var f={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},p=Object.assign,m={};function h(e,t,n){this.props=e,this.context=t,this.refs=m,this.updater=n||f}h.prototype.isReactComponent={},h.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`)},h.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,`forceUpdate`)};function ie(){}ie.prototype=h.prototype;function g(e,t,n){this.props=e,this.context=t,this.refs=m,this.updater=n||f}var _=g.prototype=new ie;_.constructor=g,p(_,h.prototype),_.isPureReactComponent=!0;var ae=Array.isArray;function v(){}var y={H:null,A:null,T:null,S:null},b=Object.prototype.hasOwnProperty;function x(e,n,r){var i=r.ref;return{$$typeof:t,type:e,key:n,ref:i===void 0?null:i,props:r}}function oe(e,t){return x(e.type,t,e.props)}function S(e){return typeof e==`object`&&!!e&&e.$$typeof===t}function C(e){var t={"=":`=0`,":":`=2`};return`$`+e.replace(/[=:]/g,function(e){return t[e]})}var w=/\/+/g;function T(e,t){return typeof e==`object`&&e&&e.key!=null?C(``+e.key):t.toString(36)}function se(e){switch(e.status){case`fulfilled`:return e.value;case`rejected`:throw e.reason;default:switch(typeof e.status==`string`?e.then(v,v):(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 E(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 ee:return c=e._init,E(c(e._payload),r,i,a,o)}}if(c)return o=o(e),c=a===``?`.`+T(e,0):a,ae(o)?(i=``,c!=null&&(i=c.replace(w,`$&/`)+`/`),E(o,r,i,``,function(e){return e})):o!=null&&(S(o)&&(o=oe(o,i+(o.key==null||e&&e.key===o.key?``:(``+o.key).replace(w,`$&/`)+`/`)+c)),r.push(o)),1;c=0;var l=a===``?`.`:a+`:`;if(ae(e))for(var u=0;u<e.length;u++)a=e[u],s=l+T(a,u),c+=E(a,r,i,s,o);else if(u=re(e),typeof u==`function`)for(e=u.call(e),u=0;!(a=e.next()).done;)a=a.value,s=l+T(a,u++),c+=E(a,r,i,s,o);else if(s===`object`){if(typeof e.then==`function`)return E(se(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 D(e,t,n){if(e==null)return e;var r=[],i=0;return E(e,r,``,``,function(e){return t.call(n,e,i++)}),r}function O(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 k=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 A(e){var t=y.T,n={};n.types=t===null?null:t.types,y.T=n;try{var r=e(),i=y.S;i!==null&&i(n,r),typeof r==`object`&&r&&typeof r.then==`function`&&r.then(v,k)}catch(e){k(e)}finally{t!==null&&n.types!==null&&(t.types=n.types),y.T=t}}function j(e){var t=y.T;if(t!==null){var n=t.types;n===null?t.types=[e]:n.indexOf(e)===-1&&n.push(e)}else A(j.bind(null,e))}var M={map:D,forEach:function(e,t,n){D(e,function(){t.apply(this,arguments)},n)},count:function(e){var t=0;return D(e,function(){t++}),t},toArray:function(e){return D(e,function(e){return e})||[]},only:function(e){if(!S(e))throw Error(`React.Children.only expected to receive a single React element child.`);return e}};e.Activity=d,e.Children=M,e.Component=h,e.Fragment=r,e.Profiler=a,e.PureComponent=g,e.StrictMode=i,e.Suspense=l,e.ViewTransition=te,e.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE=y,e.__COMPILER_RUNTIME={__proto__:null,c:function(e){return y.H.useMemoCache(e)}},e.addTransitionType=j,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=p({},e.props),i=e.key;if(t!=null)for(a in t.key!==void 0&&(i=``+t.key),t)!b.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 x(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)b.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 x(e,a,i)},e.createRef=function(){return{current:null}},e.forwardRef=function(e){return{$$typeof:c,render:e}},e.isValidElement=S,e.lazy=function(e){return{$$typeof:ee,_payload:{_status:-1,_result:e},_init:O}},e.memo=function(e,t){return{$$typeof:u,type:e,compare:t===void 0?null:t}},e.startTransition=A,e.unstable_useCacheRefresh=function(){return y.H.useCacheRefresh()},e.use=function(e){return y.H.use(e)},e.useActionState=function(e,t,n){return y.H.useActionState(e,t,n)},e.useCallback=function(e,t){return y.H.useCallback(e,t)},e.useContext=function(e){return y.H.useContext(e)},e.useDebugValue=function(){},e.useDeferredValue=function(e,t){return y.H.useDeferredValue(e,t)},e.useEffect=function(e,t){return y.H.useEffect(e,t)},e.useEffectEvent=function(e){return y.H.useEffectEvent(e)},e.useId=function(){return y.H.useId()},e.useImperativeHandle=function(e,t,n){return y.H.useImperativeHandle(e,t,n)},e.useInsertionEffect=function(e,t){return y.H.useInsertionEffect(e,t)},e.useLayoutEffect=function(e,t){return y.H.useLayoutEffect(e,t)},e.useMemo=function(e,t){return y.H.useMemo(e,t)},e.useOptimistic=function(e,t){return y.H.useOptimistic(e,t)},e.useReducer=function(e,t,n){return y.H.useReducer(e,t,n)},e.useRef=function(e){return y.H.useRef(e)},e.useState=function(e){return y.H.useState(e)},e.useSyncExternalStore=function(e,t,n){return y.H.useSyncExternalStore(e,t,n)},e.useTransition=function(){return y.H.useTransition()},e.version=`19.3.1`})),r=t(((e,t)=>{t.exports=n()})),i=e(r(),1);async function a(e,t){let n=await fetch(e,{credentials:`same-origin`,...t,headers:{...t?.body?{"content-type":`application/json`}:{},...t?.headers}}),r=await n.json().catch(()=>({}));if(!n.ok)throw Object.assign(Error(r.error||`Failed (${n.status})`),{status:n.status});return r}function o(e,t){fetch(e,{method:`POST`,credentials:`same-origin`,keepalive:!0,headers:{"content-type":`application/json`},body:JSON.stringify(t)}).catch(()=>{})}var s={bootstrap:e=>a(`/api/bootstrap${e?`?canvas=${encodeURIComponent(e)}`:``}`),ticket:(e,t)=>a(`/api/canvases/${e}/ticket`,{method:`POST`,body:JSON.stringify({name:t})}),share:e=>a(`/api/canvases/${e}/share`,{method:`POST`,body:`{}`}),unshare:e=>a(`/api/canvases/${e}/unshare`,{method:`POST`,body:`{}`}),list:()=>a(`/api/canvases`),doc:e=>a(`/api/canvases/${e}`),update:(e,t)=>a(`/api/canvases/${e}`,{method:`PATCH`,body:JSON.stringify(t)}),remove:e=>a(`/api/canvases/${e}`,{method:`DELETE`}),login:()=>a(`/api/login`,{method:`POST`,body:`{}`}),saveSettings:e=>a(`/api/settings`,{method:`POST`,body:JSON.stringify(e)}),signOut:()=>a(`/auth/signout`,{method:`POST`,body:`{}`})},c=5e3;function l(e){return typeof e==`string`?e.replace(/[\u0000-\u001f\u007f]+/g,` `).slice(0,52):null}var u=`abcdefghijkmnpqrstuvwxyz23456789`;function ee(e=12){let t=crypto.getRandomValues(new Uint8Array(e)),n=``;for(let e of t)n+=u[e%32];return n}var d=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},te=(e=>e?d(e):d),ne=e=>e;function re(e,t=ne){let n=i.useSyncExternalStore(e.subscribe,i.useCallback(()=>t(e.getState()),[e,t]),()=>t(e.getInitialState()));return i.useDebugValue(n),n}var f=e=>{let t=te(e),n=e=>re(t,e);return Object.assign(n,t),n},p=(e=>e?f(e):f),m=.05,h=e=>Math.min(8,Math.max(m,e)),ie=(e,t)=>({x:(e.x-t.x)/t.z,y:(e.y-t.y)/t.z}),g=(e,t)=>({x:t.x+e.x*t.z,y:t.y+e.y*t.z}),_=(e,t,n)=>({...e,x:e.x+t,y:e.y+n});function ae(e,t,n){let r=h(e.z*t),i=r/e.z;return{z:r,x:n.x-(n.x-e.x)*i,y:n.y-(n.y-e.y)*i}}function v(e,t){return{x:Math.min(e.x,t.x),y:Math.min(e.y,t.y),w:Math.abs(t.x-e.x),h:Math.abs(t.y-e.y)}}var y=(e,t)=>e.x<t.x+t.w&&e.x+e.w>t.x&&e.y<t.y+t.h&&e.y+e.h>t.y;function b(e){if(!e.length)return null;let t=Math.min(...e.map(e=>e.x)),n=Math.min(...e.map(e=>e.y));return{x:t,y:n,w:Math.max(...e.map(e=>e.x+e.w))-t,h:Math.max(...e.map(e=>e.y+e.h))-n}}function x(e,t,n=null,r={x:0,y:0}){let i=t.width<700?16:48,a=h(n===null?Math.min(2,(t.width-i*2)/Math.max(1,e.w),(t.height-i*2)/Math.max(1,e.h)):n),o=(e,t,n)=>{let r=t>n?(t-n)/2+48:0;return Math.max(-r,Math.min(r,e))};return{z:a,x:(t.width-e.w*a)/2-e.x*a+o(r.x,e.w*a,t.width),y:(t.height-e.h*a)/2-e.y*a+o(r.y,e.h*a,t.height)}}function oe(e,t,n){let r=t<640?24:96,i=h(Math.min(1,(t-r*2)/Math.max(1,e.w),(n-r*2)/Math.max(1,e.h)));return{z:i,x:t/2-(e.x+e.w/2)*i,y:n/2-(e.y+e.h/2)*i}}var S=e=>[e.x,e.x+e.w/2,e.x+e.w],C=e=>[e.y,e.y+e.h/2,e.y+e.h];function w(e,t,n){let r=null;for(let i of t)for(let t of e){let e=i-t;Math.abs(e)<=n&&(r===null||Math.abs(e)<Math.abs(r))&&(r=e)}return r}function T(e,t,n){let r=w(S(e),t.flatMap(S),n)??0,i=w(C(e),t.flatMap(C),n)??0,a={...e,x:e.x+r,y:e.y+i},o=[];for(let e of t){for(let t of S(a))S(e).some(e=>Math.abs(e-t)<.5)&&o.push({axis:`x`,pos:t,start:Math.min(a.y,e.y),end:Math.max(a.y+a.h,e.y+e.h)});for(let t of C(a))C(e).some(e=>Math.abs(e-t)<.5)&&o.push({axis:`y`,pos:t,start:Math.min(a.x,e.x),end:Math.max(a.x+a.w,e.x+e.w)})}return{dx:r,dy:i,guides:o}}var se=class{ticket;onMessage;onState;socket=null;closed=!1;attempts=0;pingTimer=0;retryTimer=0;nextRpc=1;calls=new Map;constructor(e,t,n){this.ticket=e,this.onMessage=t,this.onState=n,this.connect()}async connect(){if(this.closed)return;let e;try{e=await this.ticket()}catch{return this.retry()}if(this.closed)return;let t=new WebSocket(e);this.socket=t,t.onopen=()=>{this.attempts=0,this.onState(!0),window.clearInterval(this.pingTimer),this.pingTimer=window.setInterval(()=>this.send({t:`ping`}),25e3)},t.onmessage=e=>{let t;try{t=JSON.parse(e.data)}catch{return}if(t.t===`rpc`){let e=this.calls.get(t.id);if(!e)return;this.calls.delete(t.id),t.error?e.reject(Error(t.error)):e.resolve(t.result)}else this.onMessage(t)},t.onclose=e=>{if(this.socket===t){window.clearInterval(this.pingTimer),this.onState(!1);for(let e of this.calls.values())e.reject(Error(`Disconnected`));this.calls.clear(),e.code!==4004&&this.retry()}}}retry(){if(this.closed)return;let e=Math.min(8e3,400*2**this.attempts++)+Math.random()*200;window.clearTimeout(this.retryTimer),this.retryTimer=window.setTimeout(()=>this.connect(),e)}send(e){this.socket?.readyState===WebSocket.OPEN&&this.socket.send(JSON.stringify(e))}rpc(e,t){return new Promise((n,r)=>{if(this.socket?.readyState!==WebSocket.OPEN)return r(Error(`Disconnected`));let i=this.nextRpc++;this.calls.set(i,{resolve:n,reject:r}),this.send({t:`rpc`,id:i,op:e,body:t})})}close(){this.closed=!0,window.clearInterval(this.pingTimer),window.clearTimeout(this.retryTimer),this.socket?.close()}};function E(e,t,n,r){let i=(e,t,n)=>3*e*(1-n)**2*n+3*t*(1-n)*n**2+n**3;return a=>{let o=0,s=1;for(let t=0;t<20;t++){let t=(o+s)/2;i(e,n,t)<a?o=t:s=t}return i(t,r,(o+s)/2)}}function D(e,t){let n=2*Math.PI/(e*1.2),r=Math.min(1,Math.max(.05,1-t)),i=e=>{let t=e/1e3;if(t<=0)return 0;if(r>=1)return 1-Math.exp(-n*t)*(1+n*t);let i=n*Math.sqrt(1-r*r);return 1-Math.exp(-r*n*t)*(Math.cos(i*t)+r*n/i*Math.sin(i*t))},a=10;for(;a<6e3&&!(Math.abs(1-i(a))<.001&&Math.abs(i(a)-i(a-10))<5e-4);)a+=10;let o=Array.from({length:61},(e,t)=>t===60?1:Number(i(a*t/60).toFixed(4)));return{ms:a,at:i,css:`linear(${o.join(`, `)})`}}var O=p(()=>({boot:null,canvasId:``,name:``,link:null,connected:!1,ready:!1,gone:!1,role:`guest`,self:``,capabilities:{comments:!1,huddle:!1},peers:[],frames:{},threads:{},camera:{x:0,y:0,z:1},tool:`move`,pencil:{color:matchMedia(`(prefers-color-scheme: dark)`).matches?`#ffffff`:`#1a1a1a`,size:6},strokes:{},liveStroke:null,selectedStroke:null,selection:[],interacting:null,focusId:null,focusReturning:!1,following:null,activeThread:null,draft:null,showResolved:!1,guides:[],marquee:null,spacePanning:!1,awaitingSignIn:!1,shareCopied:!1,sharing:null,namePrompt:null,notice:null,noticeFailed:!1,size:{width:window.innerWidth,height:window.innerHeight},working:!1,invertScroll:!1,dark:!1,chatting:!1,chats:{}})),k=O.setState,A=O.getState,j=new Map,M=new Map,ce=new Set,le={x:window.innerWidth/2,y:window.innerHeight/2},ue=new Set,de=e=>(ue.add(e),()=>{ue.delete(e)}),N=null,P=null,fe=!1,pe,F=!0;function me(){R&&A().focusId||(F=!1,A().following&&k({following:null}))}function he(){F?Ae():A().focusId&&L(A().camera)}var I=e=>N?.send(e),ge=()=>N;function L(e){let{focusId:t,frames:n,size:r}=A(),i=t?n[t]:null;if(R){if(i)return;B(),ye()}if(i){let t=x(i,r,e.z);k({camera:x(i,r,e.z,{x:e.x-t.x,y:e.y-t.y})})}else k({camera:{...e,z:h(e.z)}});De()}var _e=360,ve=E(.22,1,.36,1),R=0,z=null;function B(){cancelAnimationFrame(R),R=0}function ye(){z=null,k({focusReturning:!1})}function be(e,t,n){if(B(),!t||matchMedia(`(prefers-reduced-motion: reduce)`).matches)return k({camera:e}),De(),n?.();let r=A().camera,i=performance.now(),a=t=>{let o=Math.min(1,Math.max(0,t-i)/_e),s=ve(o);k({camera:{x:r.x+(e.x-r.x)*s,y:r.y+(e.y-r.y)*s,z:r.z+(e.z-r.z)*s}}),De(),o<1?R=requestAnimationFrame(a):(R=0,n?.())};R=requestAnimationFrame(a)}function xe(e,t=null){let{frames:n,size:r,camera:i,role:a}=A(),o=n[e];o&&(z??={camera:i,autoFit:F},F=!0,k({focusId:e,focusReturning:!1,following:t,interacting:null,selection:a===`owner`?[e]:[],selectedStroke:null,activeThread:null,draft:null}),be(x(o,r),!0))}function V(e=!0){let{focusId:t,frames:n,role:r,size:i}=A();if(!t||!z)return;F=z.autoFit;let a=b(Oe()),o=F&&a?oe(a,i.width,i.height):z.camera;k({focusId:null,focusReturning:!0,selection:r===`owner`&&n[t]?[t]:[],activeThread:null,draft:null}),be(o,e,ye)}function Se(e){let{focusId:t,frames:n,following:r}=A();if(e!==t){if(e&&n[e])return xe(e,r);t&&(B(),z&&(F=z.autoFit),z=null,k({focusId:null,focusReturning:!1,selection:[],activeThread:null,draft:null}))}}var Ce=8,we=8,Te=e=>e*Math.min(we,Math.max(1,A().peers.length/Ce)),Ee=0;function De(){Ee||=window.setTimeout(()=>{Ee=0,H()},Te(66))}function H(){let{camera:e,size:t,peers:n,focusId:r}=A();n.length<2||I({t:`view`,v:{x:(t.width/2-e.x)/e.z,y:(t.height/2-e.y)/e.z,z:e.z,w:t.width,h:t.height,f:r??void 0}})}var Oe=()=>Object.values(A().frames),ke=e=>Object.values(e).sort((e,t)=>e.z-t.z||e.id.localeCompare(t.id));function Ae(){let e={width:window.innerWidth,height:window.innerHeight},{focusId:t,frames:n}=A();if(t&&n[t])return L(x(n[t],e));let r=b(Oe());r&&e.width>0&&e.height>0&&L(oe(r,e.width,e.height))}function je(){k({size:{width:window.innerWidth,height:window.innerHeight}}),he()}function Me(){F=!0,A().following&&k({following:null}),Ae()}function Ne(e,t){if(!e.frameId)return{x:e.x,y:e.y};let n=t[e.frameId];return n?{x:n.x+e.x*n.w,y:n.y+e.y*n.h}:null}function Pe(e,t=!1){t&&A().focusId&&A().threads[e]&&A().threads[e].frameId!==A().focusId&&V(!1);let{threads:n,frames:r,camera:i,size:a}=A(),o=n[e];if(!o||(Le(o),k({activeThread:e,draft:null,showResolved:o.resolved?!0:A().showResolved}),!t))return;F=!1;let s=Ne(o,r);s&&L({...i,x:a.width/2-180-s.x*i.z,y:a.height/2+60-s.y*i.z})}var Fe=()=>`oc:read:${A().canvasId}`,U=null;function Ie(){if(U)return U;try{U=JSON.parse(localStorage.getItem(Fe())||`{}`)}catch{U={}}return U}function Le(e){let t=e.comments[e.comments.length-1]?.createdAt||0;Ie()[e.id]=t;try{localStorage.setItem(Fe(),JSON.stringify(U))}catch{}}function Re(e,t){let n=e.comments[e.comments.length-1];return!!n&&n.author.id!==t&&n.createdAt>(Ie()[e.id]||0)}var ze=`oc:name`;function W(){try{return localStorage.getItem(ze)||``}catch{return``}}function Be(){return!A().peers.find(e=>e.id===A().self)?.guest||W()?Promise.resolve(!0):new Promise(e=>{k({namePrompt:t=>{k({namePrompt:null});let n=t?.trim();if(!n)return e(!1);try{localStorage.setItem(ze,n)}catch{}I({t:`name`,name:n}),e(!0)}})})}var Ve=`twombly:invert-scroll`;function He(){try{return localStorage.getItem(Ve)===`1`}catch{return!1}}var Ue=()=>A().boot?.mode===`local`||!!A().boot?.me;function We(){let e=!A().invertScroll;if(k({invertScroll:e}),Ue())s.saveSettings({invertScroll:e}).catch(()=>X(`Could not save that`));else try{localStorage.setItem(Ve,e?`1`:`0`)}catch{}}var Ge=`twombly:theme`,Ke=matchMedia(`(prefers-color-scheme: dark)`),G=null;try{let e=localStorage.getItem(Ge);(e===`light`||e===`dark`)&&(G=e)}catch{}function K(){let e=G?G===`dark`:Ke.matches;document.documentElement.dataset.colorScheme=e?`dark`:`light`;let{pencil:t}=A(),[n,r]=e?[`#1a1a1a`,`#ffffff`]:[`#ffffff`,`#1a1a1a`];k({dark:e,pencil:t.color===n?{...t,color:r}:t})}Ke.addEventListener(`change`,K),K();function qe(e){G=e;try{localStorage.setItem(Ge,e)}catch{}K()}function Je(){G=null,K()}function Ye(){let e=A().dark?`light`:`dark`;qe(e),Ue()&&s.saveSettings({theme:e}).catch(()=>X(`Could not save that`))}var Xe=0;function Ze(e){window.clearTimeout(Xe),k({working:e>0}),e>0&&(Xe=window.setTimeout(()=>k({working:!1}),e))}var q=[],Qe=[];function J(e){q.push(e),q.length>50&&q.shift(),Qe.length=0}function $e(e){let{frames:t}=A();if(e.kind===`stroke-added`)return A().strokes[e.stroke.id]?(st(e.stroke.id),{kind:`stroke-removed`,stroke:e.stroke}):null;if(e.kind===`stroke-removed`)return ot(e.stroke),{kind:`stroke-added`,stroke:e.stroke};if(e.kind===`remove`){for(let t of e.frames)I({t:`frame.restore`,frame:t});return{kind:`restore`,frames:e.frames}}if(e.kind===`restore`){for(let t of e.frames)I({t:`frame.remove`,id:t.id});return{kind:`remove`,frames:e.frames.map(e=>t[e.id]??e)}}let n=e.frames.filter(({id:e})=>t[e]);if(!n.length)return null;let r=n.map(({id:e,before:n})=>({id:e,before:Object.fromEntries(Object.keys(n).map(n=>[n,t[e][n]]))}));for(let{id:e,before:t}of n)rt(e,t);return{kind:`patch`,frames:r}}function et(e,t){for(;e.length;){let n=$e(e.pop());if(n){t.push(n);return}}}function tt(){et(q,Qe)}function nt(){et(Qe,q)}function rt(e,t){let{frames:n}=A();n[e]&&(k({frames:{...n,[e]:{...n[e],...t}}}),I({t:`frame.patch`,id:e,patch:t}))}function it(e){pt();let t=e===`pencil`||e===`comment`?{selection:[]}:{};k({tool:e,draft:null,selectedStroke:null,...e===`move`?{}:{interacting:null},...t})}function at(e){k({pencil:{...A().pencil,...e}})}function ot(e){k({strokes:{...A().strokes,[e.id]:e}}),I({t:`stroke.add`,stroke:e})}function st(e){let{[e]:t,...n}=A().strokes;k({strokes:n,selectedStroke:A().selectedStroke===e?null:A().selectedStroke}),I({t:`stroke.remove`,id:e})}function ct(e){ot(e),J({kind:`stroke-added`,stroke:e})}function lt(){let{selection:e,frames:t,role:n,selectedStroke:r,strokes:i}=A();if(r&&i[r])return J({kind:`stroke-removed`,stroke:i[r]}),st(r);if(n!==`owner`||!e.length||A().focusId)return;let a=e.map(e=>t[e]).filter(Boolean);J({kind:`remove`,frames:a});for(let e of a)I({t:`frame.remove`,id:e.id});k({selection:[]})}var ut=300,Y=new Map;function dt(e,t){window.clearTimeout(Y.get(e));let n=A().chats[e],r=()=>{let{[e]:t,...n}=A().chats;k({chats:n}),Y.delete(e)},i=()=>{let t=A().chats[e];if(!t)return r();k({chats:{...A().chats,[e]:{...t,live:!1}}}),Y.set(e,window.setTimeout(r,ut))};t?(k({chats:{...A().chats,[e]:{text:t,live:!0}}}),Y.set(e,window.setTimeout(i,c))):n&&i()}function ft(){k({chatting:!0})}function pt(){A().chatting&&(k({chatting:!1}),I({t:`chat`,text:null}))}function mt(e){let t=A();switch(e.t){case`hello`:{let n={};for(let t of e.doc.frames)n[t.id]=t;let r={};for(let t of e.threads)r[t.id]=t;let i={};for(let t of e.doc.strokes??[])i[t.id]=t;k({self:e.self,role:e.role,frames:n,threads:r,strokes:i,peers:e.peers,capabilities:e.capabilities,name:e.doc.name,ready:!0}),t.focusId&&!n[t.focusId]&&V(),Ze(e.working),document.title=`${e.doc.name} – Twombly`,he();let a=new URLSearchParams(location.search).get(`comment`);a&&r[a]&&(Pe(a,!0),history.replaceState(null,``,location.pathname));let o=W(),s=e.peers.find(t=>t.id===e.self);s?.guest&&o&&s.name!==o&&I({t:`name`,name:o}),setTimeout(H,100);break}case`peers`:{for(let t of j.keys())e.peers.some(e=>e.id===t)||(j.delete(t),M.delete(t));for(let n of Object.keys(t.chats))e.peers.some(e=>e.id===n)||dt(n,null);let n=t.following&&e.peers.some(e=>e.id===t.following)?t.following:null;k({peers:e.peers,following:n}),e.peers.length>t.peers.length&&setTimeout(H,50);break}case`pointer`:j.set(e.from,e.p);break;case`chat`:dt(e.from,l(e.text));break;case`view`:M.set(e.from,{...e.v,at:performance.now()});break;case`frame.upsert`:{let n=ce.has(e.frame.id)?t.frames[e.frame.id]:null,r=n?{...e.frame,x:n.x,y:n.y,w:n.w,h:n.h}:e.frame;k({frames:{...A().frames,[r.id]:r}}),n||he();break}case`frame.remove`:{let{[e.id]:n,...r}=A().frames;k({frames:r,selection:t.selection.filter(t=>t!==e.id),interacting:t.interacting===e.id?null:t.interacting}),t.focusId===e.id&&V();break}case`strokes`:{let t={...A().strokes};for(let n of e.strokes)t[n.id]=n;k({strokes:t});break}case`stroke.remove`:{let{[e.id]:n,...r}=A().strokes;k({strokes:r,selectedStroke:t.selectedStroke===e.id?null:t.selectedStroke});break}case`canvas`:k({name:e.name}),document.title=`${e.name} – Twombly`;break;case`working`:Ze(e.ms);break;case`thread`:k({threads:{...A().threads,[e.thread.id]:e.thread}}),t.activeThread===e.thread.id&&Le(e.thread);break;case`thread.remove`:{let{[e.id]:n,...r}=A().threads;k({threads:r,activeThread:t.activeThread===e.id?null:t.activeThread});break}case`deleted`:ht();break;case`error`:X(e.message)}for(let t of ue)t(e)}async function ht(){let{boot:e}=A();if(e?.mode===`local`)return k({link:null,awaitingSignIn:!1}),await s.bootstrap(A().canvasId).catch(()=>null),Z();N?.close(),k({gone:!0})}var gt=0;function X(e,t=!1){k({notice:e,noticeFailed:t}),window.clearTimeout(gt),gt=window.setTimeout(()=>k({notice:null}),t?5e3:2600)}function Z(){N?.close();let e=A().canvasId;N=new se(()=>s.ticket(e,W()||void 0).then(e=>e.url),mt,e=>k({connected:e}))}var _t=``;function vt(){let{focusId:e,interacting:t,selection:n,activeThread:r}=A();return e?{via:`fullscreen`,frames:[e],thread:r}:t?{via:`interacting`,frames:[t],thread:r}:{via:n.length?`selected`:null,frames:n,thread:r}}function yt(e=!1){let t=vt(),n=JSON.stringify(t);n===_t&&!e||P?.readyState!==WebSocket.OPEN||(_t=n,P.send(JSON.stringify({t:`context`,context:t})))}function bt(e){O.subscribe((e,t)=>{(e.focusId!==t.focusId||e.interacting!==t.interacting||e.selection!==t.selection||e.activeThread!==t.activeThread)&&yt()});let t=()=>{let n=new WebSocket(`${location.origin.replace(/^http/,`ws`)}/local/${e}?events=1`);P=n,n.onopen=()=>yt(!0),n.onmessage=e=>{let t;try{t=JSON.parse(e.data)}catch{return}if(t.t===`auth`){let e=A().boot;k({boot:e&&{...e,me:t.me}}),t.me&&fe?(fe=!1,xt()):t.me&&A().link&&Z()}else t.t===`settings`?(k({invertScroll:t.settings.invertScroll}),t.settings.theme&&qe(t.settings.theme)):t.t===`share-progress`?k({sharing:{done:t.done,total:t.total}}):t.t===`shared`&&(k({link:t.url,sharing:null}),Z())},n.onclose=()=>{P===n&&setTimeout(t,1500)}};t()}async function xt(){let{canvasId:e,link:t}=A();if(!t){k({awaitingSignIn:!1,sharing:{done:0,total:Oe().length}});try{let{url:t}=await s.share(e);k({link:t,sharing:null}),wt(t)}catch(e){k({sharing:null}),X(e instanceof Error?e.message:`Could not share`,!0)}}}function St(){let{boot:e,link:t}=A();e?.mode===`local`&&!e.me?(fe=!t,k({awaitingSignIn:!t,sharing:null}),s.login().catch(()=>{k({awaitingSignIn:!1}),X(`Could not open sign-in`,!0)})):e?.mode!==`hosted`&&xt()}function Ct(e){navigator.clipboard?.writeText(e).then(()=>X(`Link copied`)).catch(()=>{})}function wt(e){navigator.clipboard?.writeText(e).then(()=>{k({shareCopied:!0}),clearTimeout(pe),pe=setTimeout(()=>k({shareCopied:!1}),1400)}).catch(()=>{})}async function Tt(){let{boot:e,canvasId:t}=A();e?.mode===`local`?(await s.unshare(t),k({link:null,awaitingSignIn:!1})):(await s.remove(t),location.href=`/`)}function Et(e){let t=e.canvas;k({boot:e,canvasId:t.id,name:t.name,link:t.url,invertScroll:e.settings?.invertScroll??He()}),e.mode===`hosted`&&e.me&&!e.settings&&(He()||G)&&s.saveSettings({invertScroll:He(),...G&&{theme:G}}).catch(()=>{}),e.mode===`local`&&bt(t.id),Z()}var Dt=t((e=>{var t=Symbol.for(`react.transitional.element`),n=Symbol.for(`react.fragment`);function r(e,n,r){var i=null;if(r!==void 0&&(i=``+r),n.key!==void 0&&(i=``+n.key),`key`in n)for(var a in r={},n)a!==`key`&&(r[a]=n[a]);else r=n;return n=r.ref,{$$typeof:t,type:e,key:i,ref:n===void 0?null:n,props:r}}e.Fragment=n,e.jsx=r,e.jsxs=r})),Ot=t(((e,t)=>{t.exports=Dt()})),Q=Ot();function kt({name:e,picture:t,color:n,size:r=24,style:i}){return(0,Q.jsx)(`span`,{className:`face`,style:{width:r,height:r,background:n,fontSize:Math.round(r*.46),...i},children:t?(0,Q.jsx)(`img`,{src:t,alt:``,referrerPolicy:`no-referrer`}):(e||`?`)[0].toUpperCase()})}function At(){let e=O(e=>e.peers),t=O(e=>e.self),n=O(e=>e.following),r=e.find(e=>e.id===t),i=new Set(r?[r.userId]:[]),a=e.filter(e=>!i.has(e.userId)&&(i.add(e.userId),!0)),o=a.slice(0,5),s=a.length-o.length;return a.length?(0,Q.jsxs)(`div`,{className:`faces`,children:[s>0&&(0,Q.jsxs)(`span`,{className:`face more`,children:[`+`,s]}),o.map(e=>(0,Q.jsx)(`button`,{className:`face-button`+(n===e.id?` following`:``),style:{"--peer":e.color},title:n===e.id?`Stop following ${e.name}`:`Follow ${e.name}`,"aria-label":n===e.id?`Stop following ${e.name}`:`Follow ${e.name}`,onClick:()=>O.setState({following:n===e.id?null:e.id,interacting:null}),children:(0,Q.jsx)(kt,{name:e.name,picture:e.picture,color:e.color})},e.id))]}):null}var $=(e,t=`0 0 24 24`)=>({size:n=16})=>(0,Q.jsx)(`svg`,{width:n,height:n,viewBox:t,fill:`none`,stroke:`currentColor`,strokeWidth:`1.5`,strokeLinecap:`round`,strokeLinejoin:`round`,"aria-hidden":`true`,children:e}),jt=`M9.80282 4.62973L15.8364 6.99069C19.3164 8.35243 21.0564 9.03329 20.9987 10.1133C20.941 11.1934 19.1251 11.6886 15.4933 12.6791C14.412 12.974 13.8713 13.1215 13.4964 13.4963C13.1215 13.8712 12.9741 14.4119 12.6791 15.4933C11.6887 19.125 11.1934 20.9409 10.1134 20.9986C9.03335 21.0563 8.35249 19.3163 6.99075 15.8363L4.62979 9.80276C3.20411 6.15934 2.49127 4.33764 3.41448 3.41442C4.3377 2.49121 6.15941 3.20405 9.80282 4.62973Z`,Mt=$((0,Q.jsx)(`path`,{d:jt})),Nt=$((0,Q.jsxs)(Q.Fragment,{children:[(0,Q.jsx)(`path`,{d:`M18.5 11.5V8.75C18.5 7.7835 19.2835 7 20.25 7C21.2165 7 22 7.7835 22 8.75V14.8C22 18.7765 18.7764 22 14.8 22H12.0588M8 14L5.61507 11.2176C5.22468 10.7621 4.65476 10.5 4.05489 10.5H3.91898C2.85916 10.5 2 11.3592 2 12.419C2 12.7978 2.11214 13.1682 2.32229 13.4834L5.7812 18.6718C7.16738 20.7511 9.50102 22 12 22`}),(0,Q.jsx)(`path`,{d:`M18.5 8.5V5.75C18.5 4.7835 17.7165 4 16.75 4C15.7835 4 15 4.7835 15 5.75V10.5`}),(0,Q.jsx)(`path`,{d:`M15 10.5V3.75C15 2.7835 14.2165 2 13.25 2C12.2835 2 11.5 2.7835 11.5 3.75V10`}),(0,Q.jsx)(`path`,{d:`M11.5 10V5.75C11.5 4.7835 10.7165 4 9.75 4C8.7835 4 8 4.7835 8 5.75V14`})]})),Pt=$((0,Q.jsxs)(Q.Fragment,{children:[(0,Q.jsx)(`path`,{d:`M3.78181 16.3092L3 21L7.69086 20.2182C8.50544 20.0825 9.25725 19.6956 9.84119 19.1116L20.4198 8.53288C21.1934 7.75922 21.1934 6.5049 20.4197 5.73126L18.2687 3.58024C17.495 2.80658 16.2406 2.80659 15.4669 3.58027L4.88841 14.159C4.30447 14.7429 3.91757 15.4947 3.78181 16.3092Z`}),(0,Q.jsx)(`path`,{d:`M14 6L18 10`})]})),Ft=$((0,Q.jsx)(`path`,{d:`M18 9.00005C18 9.00005 13.5811 15 12 15C10.4188 15 6 9 6 9`})),It=$((0,Q.jsx)(`path`,{d:`M5 13.2592L7.58583 15.9568C8.2525 16.6523 8.58583 17 9.00004 17C9.41425 17 9.74759 16.6523 10.4143 15.9568L19 7`})),Lt=$((0,Q.jsx)(`path`,{d:`M12 3.5a8.5 8.5 0 0 1 0 17H3.5V12A8.5 8.5 0 0 1 12 3.5Z`})),Rt=$((0,Q.jsxs)(Q.Fragment,{children:[(0,Q.jsx)(`path`,{d:`M4 15v-3a8 8 0 0 1 16 0v3`}),(0,Q.jsx)(`rect`,{x:`3`,y:`14`,width:`4.5`,height:`6.5`,rx:`1.5`}),(0,Q.jsx)(`rect`,{x:`16.5`,y:`14`,width:`4.5`,height:`6.5`,rx:`1.5`})]})),zt=$((0,Q.jsxs)(Q.Fragment,{children:[(0,Q.jsx)(`rect`,{x:`9`,y:`3`,width:`6`,height:`11`,rx:`3`}),(0,Q.jsx)(`path`,{d:`M5.5 11.5a6.5 6.5 0 0 0 13 0M12 18v3`})]})),Bt=$((0,Q.jsx)(Q.Fragment,{children:(0,Q.jsx)(`path`,{d:`m3.5 3.5 17 17M9 9v2a3 3 0 0 0 4.9 2.3M15 10.5V6a3 3 0 0 0-5.7-1.3M5.5 11.5a6.5 6.5 0 0 0 10.2 5.3M18.5 11.5c0 .7-.1 1.3-.3 1.9M12 18v3`})})),Vt=$((0,Q.jsxs)(Q.Fragment,{children:[(0,Q.jsx)(`path`,{d:`M10 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h4`}),(0,Q.jsx)(`path`,{d:`m15 8 4 4-4 4M19 12H9`})]})),Ht=$((0,Q.jsxs)(Q.Fragment,{children:[(0,Q.jsx)(`circle`,{cx:`12`,cy:`12`,r:`8.5`}),(0,Q.jsx)(`path`,{d:`m8.5 12.2 2.4 2.4 4.6-5`})]})),Ut=$((0,Q.jsx)(`path`,{d:`m6.5 6.5 11 11m0-11-11 11`})),Wt=({size:e=16})=>(0,Q.jsxs)(`svg`,{width:e,height:e,viewBox:`0 0 24 24`,fill:`currentColor`,"aria-hidden":`true`,children:[(0,Q.jsx)(`circle`,{cx:`5`,cy:`12`,r:`1.8`}),(0,Q.jsx)(`circle`,{cx:`12`,cy:`12`,r:`1.8`}),(0,Q.jsx)(`circle`,{cx:`19`,cy:`12`,r:`1.8`})]}),Gt=`M12 20.5s-8.5-5-8.5-11A4.75 4.75 0 0 1 12 6.6a4.75 4.75 0 0 1 8.5 2.9c0 6-8.5 11-8.5 11Z`,Kt=$((0,Q.jsx)(`path`,{fill:`currentColor`,d:Gt})),qt=$((0,Q.jsx)(`path`,{d:Gt})),Jt=$((0,Q.jsx)(`path`,{d:`M4.5 6.5h15M9.5 6.5V5a1.5 1.5 0 0 1 1.5-1.5h2A1.5 1.5 0 0 1 14.5 5v1.5m3.5 0-.7 12a2 2 0 0 1-2 2H8.7a2 2 0 0 1-2-2L6 6.5`})),Yt=$((0,Q.jsxs)(Q.Fragment,{children:[(0,Q.jsx)(`circle`,{cx:`12`,cy:`12`,r:`3`}),(0,Q.jsx)(`path`,{d:`M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z`})]})),Xt=$((0,Q.jsx)(`path`,{d:`M12 19V5m-6.5 6.5L12 5l6.5 6.5`})),Zt=$((0,Q.jsxs)(Q.Fragment,{children:[(0,Q.jsx)(`circle`,{cx:`12`,cy:`12`,r:`8.5`}),(0,Q.jsx)(`path`,{d:`M8.5 14.5a4.5 4.5 0 0 0 7 0`}),(0,Q.jsx)(`path`,{d:`M9 9.5v.01M15 9.5v.01`,strokeWidth:`2`})]})),Qt=$((0,Q.jsx)(`path`,{d:`M12 5.5v13m-6.5-6.5h13`})),$t=$((0,Q.jsx)(`path`,{d:`M5.5 12h13`})),en=$((0,Q.jsx)(`path`,{d:`M10 14a4 4 0 0 0 5.7 0l3-3A4 4 0 0 0 13 5.3l-1 1M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1`})),tn=$((0,Q.jsxs)(Q.Fragment,{children:[(0,Q.jsx)(`path`,{d:`M4.5 6h15`,strokeWidth:`1.25`}),(0,Q.jsx)(`path`,{d:`M4.5 12h15`,strokeWidth:`2.25`}),(0,Q.jsx)(`path`,{d:`M4.5 18h15`,strokeWidth:`3.5`})]})),nn=$((0,Q.jsx)(`path`,{d:`M3 12v2.5c0 3.3 0 4.95 1.03 5.97C5.05 21.5 6.7 21.5 10 21.5h4c3.3 0 4.95 0 5.97-1.03C21 19.45 21 17.8 21 14.5V12c0-1.68 0-2.52-.36-3.25-.35-.73-1.02-1.24-2.34-2.28l-2-1.56C14.23 3.3 13.2 2.5 12 2.5s-2.23.8-4.3 2.41l-2 1.56C4.38 7.5 3.71 8.01 3.36 8.74 3 9.47 3 10.31 3 12Z`})),rn=$((0,Q.jsx)(`path`,{d:`M19 12V9c0-1.89 0-2.83-.59-3.41C17.83 5 16.89 5 15 5h-3M5 12v3c0 1.89 0 2.83.59 3.41C6.17 19 7.11 19 9 19h3`})),an=$((0,Q.jsx)(`path`,{d:`M13 4v3c0 1.89 0 2.83.59 3.41.58.59 1.52.59 3.41.59h3M11 20v-3c0-1.89 0-2.83-.59-3.41C9.83 13 8.89 13 7 13H4`})),on=$((0,Q.jsx)(`path`,{d:`M8 19V5M3.5 9.5 8 5l4.5 4.5M16 5v14m4.5-4.5L16 19l-4.5-4.5`})),sn=`url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'28'%20height%3D'28'%20viewBox%3D'0%200%2028%2028'%3E%3Cpath%20d%3D'M14%203.5a10.5%2010.5%200%200%201%200%2021H3.5V14A10.5%2010.5%200%200%201%2014%203.5Z'%20fill%3D'%23fff'%20stroke%3D'%23000'%20stroke-width%3D'1.5'%2F%3E%3C%2Fsvg%3E") 3 25, crosshair`,cn=`Save https://twombly.app/skill.md as your Twombly skill, then use it to put this project's main screens on a canvas.`;export{le as $,Jt as A,ie as At,wt as B,Wt as C,E as Ct,on as D,y as Dt,Qt as E,h as Et,me as F,l as Ft,X as G,xe as H,qe as I,ee as It,ke as J,Se as K,St as L,s as Lt,At as M,ae as Mt,Ot as N,p as Nt,Yt as O,v as Ot,ct as P,c as Pt,Le as Q,pt as R,o as Rt,$t as S,M as St,Pt as T,g as Tt,V as U,Be as V,Me as W,Re as X,ce as Y,Te as Z,nn as _,Ne as _t,Ht as a,J as at,zt as b,tt as bt,Ut as c,je as ct,Zt as d,H as dt,de as et,rn as f,L as ft,qt as g,Tt as gt,Kt as h,Et as ht,jt as i,j as it,kt as j,T as jt,tn as k,_ as kt,an as l,ge as lt,Rt as m,it as mt,Xt as n,Pe as nt,It as o,nt as ot,Nt as p,at as pt,Je as q,sn as r,rt,Ft as s,lt as st,cn as t,ft as tt,Lt as u,I as ut,Vt as v,We as vt,Mt as w,D as wt,Bt as x,O as xt,en as y,Ye as yt,Ct as z,r as zt};

package/dist/ui/assets/index-CADUZOuJ.css

@@ -1 +0,0 @@
-:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--canvas:oklch(97% 0 0);--surface:oklch(100% 0 0);--surface-2:oklch(95.5% 0 0);--surface-hover:oklch(0% 0 0/.05);--surface-pressed:oklch(0% 0 0/.09);--solid:oklch(0% 0 0);--on-solid:oklch(100% 0 0);--island:oklch(0% 0 0);--island-line:transparent;--island-hover:oklch(100% 0 0/.11);--text:oklch(0% 0 0);--secondary:oklch(42% 0 0);--muted:oklch(53% 0 0);--line:oklch(0% 0 0/.09);--line-subtle:oklch(0% 0 0/.06);--icon-muted:.58;--icon-secondary:.72;--frame-bg:oklch(100% 0 0);--accent:#06f;--selection:#0066ff1f;--guide:#06f9;--signal:#06f;--signal-soft:#0066ff21;--signal-soft-hover:#06f3;--danger:oklch(56% .21 27);--danger-soft:oklch(96% .025 25);--live:oklch(50% .14 150);--live-soft:oklch(96% .03 150);--backdrop:oklch(0% 0 0/.24);--shadow:0 0 0 .5px var(--line), 0 4px 8px -2px oklch(0% 0 0/.1), 0 14px 32px -8px oklch(0% 0 0/.3);--shadow-sm:0 0 0 1px var(--line);--pill:999px;--radius-menu:18px;--font:-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif}:root[data-color-scheme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--canvas:oklch(17.8% 0 0);--surface:oklch(16% 0 0);--surface-2:oklch(22% 0 0);--surface-hover:oklch(100% 0 0/.07);--surface-pressed:oklch(100% 0 0/.11);--solid:oklch(100% 0 0);--on-solid:oklch(0% 0 0);--island-line:oklch(100% 0 0/.13);--text:oklch(98.5% 0 0);--secondary:oklch(80% 0 0);--muted:oklch(66% 0 0);--line:oklch(100% 0 0/.09);--line-subtle:oklch(100% 0 0/.06);--icon-muted:.6;--icon-secondary:.74;--accent:#06f;--selection:#0066ff2e;--guide:#0066ffa6;--signal:#06f;--signal-soft:#06f3;--signal-soft-hover:#0066ff47;--danger:oklch(72% .18 25);--danger-soft:oklch(28% .06 25);--live:oklch(80% .15 150);--live-soft:oklch(28% .05 150);--backdrop:oklch(0% 0 0/.6);--shadow:0 0 0 .5px var(--line), 0 4px 8px -2px oklch(0% 0 0/.3), 0 14px 32px -8px oklch(0% 0 0/.5)}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--canvas);color:var(--text);font:400 13px/18px var(--font);-webkit-font-smoothing:antialiased;overflow:hidden}button,input,textarea{font:inherit;color:inherit}button{cursor:default;background:0 0;border:0;padding:0}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}a{color:inherit}.muted{color:var(--muted)}.spacer{flex:1}.full-message{height:100%;color:var(--muted);place-items:center;display:grid}.stage{background:var(--canvas);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;position:fixed;inset:0;overflow:clip}.world{transform-origin:0 0;--inv:1;--zoom:1;width:0;height:0;position:absolute;top:0;left:0}.world[data-moving]{will-change:transform}.empty-canvas{color:var(--muted);pointer-events:none;place-items:center;display:grid;position:absolute;inset:0}.frame{transition:opacity .12s ease-out;position:absolute;top:0;left:0}.frame-surface{box-shadow:0 0 0 calc(1px * var(--inv)) var(--line);position:absolute;inset:0;overflow:hidden}.frame-surface:before{content:"";inset:calc(1px * var(--inv));background:var(--frame-bg);position:absolute}.frame iframe{border:0;width:100%;height:100%;display:block;position:absolute;inset:0}[data-dragging] .frame iframe{pointer-events:none!important}.world[data-moving]:not(:has(.frame.focused)) .frame iframe{pointer-events:none!important}.frame-poster{object-fit:cover;object-position:top left;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;width:100%;height:100%;position:absolute;inset:0}.frame-shield{cursor:var(--stage-cursor,default);position:absolute;inset:0}.stage[data-role=guest][data-tool=move] .frame-shield{cursor:pointer}.frame.selected .frame-surface,.frame.interacting .frame-surface{box-shadow:0 0 0 calc(1.5px * var(--inv)) var(--accent)}.frame-title{width:calc(100% * var(--zoom));height:26px;transform:scale(var(--inv));transform-origin:0 100%;color:var(--muted);white-space:nowrap;align-items:flex-end;padding-bottom:6px;font-size:12px;line-height:16px;display:flex;position:absolute;bottom:100%;left:0}.frame-title span{text-overflow:ellipsis;overflow:hidden}.frame.selected .frame-title,.frame.interacting .frame-title{color:var(--accent)}.frame-title input{border-radius:var(--pill);background:var(--surface-2);width:100%;max-width:280px;height:20px;color:var(--text);-webkit-user-select:text;user-select:text;border:0;outline:0;margin-left:-4px;padding:0 4px;font-size:12px}.frame-actions{z-index:1;transform:scale(var(--inv)) translate(var(--step-x,0), var(--step-y,0));transform-origin:100% 100%;opacity:0;pointer-events:none;padding-bottom:10px;transition:opacity .12s ease-out;display:flex;position:absolute;bottom:100%;right:0}.frame-actions[data-visible]{opacity:1;pointer-events:auto}.frame-actions:has(:focus-visible){opacity:1;pointer-events:auto}@media (hover:hover){.frame:hover>.frame-actions{opacity:1;pointer-events:auto}}.frame-focus{border-radius:var(--pill);background:var(--surface);width:28px;height:28px;box-shadow:var(--shadow-sm);color:var(--text);cursor:default;justify-content:center;align-items:center;transition:background-color .1s;display:flex}.frame-focus svg{opacity:var(--icon-muted);transition:opacity .1s}.frame-focus:hover{background:linear-gradient(var(--surface-hover) 0 0), var(--surface)}.frame-focus:hover svg{opacity:var(--icon-secondary)}.frame-focus:active{background:linear-gradient(var(--surface-pressed) 0 0), var(--surface)}.frame:hover>.frame-title,.frame.selected>.frame-title{padding-right:34px}.stage[data-tool=pencil] .frame:not(.focused) .frame-actions{display:none}.stage[data-focus] .frame:not(.focused){opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s ease-out,visibility 0s .12s}.stage[data-focus] .frame-surface{box-shadow:none}.frame-title{transition:opacity .12s ease-out}.stage[data-focus] .frame-title{opacity:0;pointer-events:none}.stage[data-returning] .frame,.stage[data-returning] .frame *{pointer-events:none!important}@media (prefers-reduced-motion:reduce){.frame,.stage[data-focus] .frame:not(.focused),.frame-actions{transition:none}}.guide{background:var(--guide);pointer-events:none;z-index:1000000;position:absolute}.marquee{background:var(--selection);box-shadow:0 0 0 calc(1px * var(--inv)) var(--accent);pointer-events:none;z-index:1000000;position:absolute}.cursors{pointer-events:none;z-index:40;position:absolute;inset:0;overflow:hidden}.cursor{will-change:transform;transition:opacity .18s ease-out;position:absolute;top:-4px;left:-3px}.cursor svg{filter:drop-shadow(0 1px 2px #00000040);display:block}.cursor-label{border-radius:var(--pill);color:#fff;white-space:nowrap;text-overflow:ellipsis;max-width:180px;padding:3px 7px;font-size:12px;font-weight:500;line-height:16px;position:absolute;top:18px;left:16px;overflow:hidden;box-shadow:0 1px 3px #0003}.chat-anchor{z-index:41;will-change:transform;position:fixed;top:0;left:0}.chat-bubble{color:#fff;white-space:pre;border-radius:4px 16px 16px;padding:7px 12px;font-size:13px;font-weight:500;line-height:18px;transition:opacity .3s ease-out;position:absolute;top:14px;left:13px;box-shadow:0 1px 3px #0003}.cursor .chat-bubble{animation:.12s ease-out chat-in;top:18px;left:16px}.chat-bubble.fading{opacity:0}.chat-anchor .chat-bubble.fading{opacity:1}.chat-anchor .chat-bubble.fading :is(.chat-line,.chat-previous){opacity:0;transition:opacity .3s ease-out}.chat-previous{opacity:.7}.chat-line{align-items:center;display:flex}.chat-caret{background:#fff;flex:none;width:1.5px;height:16px;margin-left:1px;animation:1s step-end infinite chat-caret}.chat-placeholder{color:#ffffffb3}@keyframes chat-caret{50%{opacity:0}}@keyframes chat-in{0%{opacity:0;transform-origin:0 0;transform:scale(.96)}}.follow-ring{pointer-events:none;z-index:60;position:fixed;inset:0}.follow-tab{border-radius:var(--pill);color:#fff;white-space:nowrap;z-index:61;align-items:center;gap:6px;height:28px;padding:0 10px;font-size:12px;font-weight:500;display:flex;position:fixed;top:50px;left:50%;transform:translate(-50%)}.face{color:#fff;border-radius:50%;flex:none;justify-content:center;align-items:center;font-weight:500;line-height:1;display:inline-flex;position:relative;overflow:hidden}.face img{object-fit:cover;width:100%;height:100%;display:block}.face.more{background:var(--surface-2);width:24px;height:24px;color:var(--text);font-size:10px}.faces{flex-direction:row-reverse;align-items:center;padding:0 6px 0 10px;display:flex}.face-button{box-shadow:0 0 0 2px var(--surface);border-radius:50%;margin-left:-6px;transition:transform .1s ease-out;position:relative}.face-button:hover{z-index:2;transform:translateY(-1px)}.face-button.following{box-shadow:0 0 0 2px var(--surface), 0 0 0 3.5px var(--peer);z-index:2}.face-button .face{display:flex}.chrome{z-index:50;-webkit-user-select:none;user-select:none;cursor:default}.shell{border-radius:var(--pill);background:var(--surface);height:38px;box-shadow:var(--shadow-sm);align-items:center;gap:2px;padding:3px;display:flex;position:fixed}:root[data-color-scheme=dark] .stage :is(.shell,.frame-focus){--surface:oklch(25% 0 0);box-shadow:none}.shell-divider{background:var(--line);flex:none;width:1px;height:20px;margin:0 4px}.top-left,.top-right,.toolbar{top:calc(6px + env(safe-area-inset-top))}.top-left{max-width:calc(50vw - 48px);left:6px}.top-right{right:6px}.wordmark{color:var(--text);flex:none;padding-right:2px;display:inline-flex}.wordmark svg{width:auto;height:14px;display:block}.canvas-name{border-radius:var(--pill);text-overflow:ellipsis;white-space:nowrap;min-width:0;height:32px;color:var(--muted);text-align:left;padding:0 8px;line-height:32px;transition:background-color .1s,color .1s;display:block;overflow:hidden}button.canvas-name:hover{background:var(--surface-hover);color:var(--text)}.canvas-name-field{border-radius:var(--pill);background:var(--surface-hover);flex:0 auto;grid-template-columns:minmax(0,max-content);min-width:48px;height:32px;display:inline-grid}.canvas-name-field:after{content:attr(data-value) " ";visibility:hidden;white-space:pre;grid-area:1/1;height:0;padding:0 8px;overflow:hidden}.canvas-name-input{-webkit-user-select:text;user-select:text;background:0 0;border:0;grid-area:1/1;width:0;min-width:100%;height:32px;padding:0 8px}.canvas-name-input:focus-visible,.frame-title input:focus-visible,.canvas-card-rename:focus-visible{outline:0}.canvas-name-input::selection{background:color-mix(in oklch, var(--accent) 32%, transparent)}.frame-title input::selection{background:color-mix(in oklch, var(--accent) 32%, transparent)}.canvas-card-rename::selection{background:color-mix(in oklch, var(--accent) 32%, transparent)}.primary-button{border-radius:var(--pill);background:var(--solid);height:32px;color:var(--on-solid);flex:none;justify-content:center;align-items:center;padding:0 12px;font-weight:500;transition:opacity .1s;display:inline-flex}.primary-button:hover{opacity:.85}.primary-button:disabled{opacity:.4}.sign-in{border-radius:var(--pill);height:32px;color:var(--secondary);align-items:center;padding:0 10px;font-weight:500;text-decoration:none;transition:background-color .1s;display:inline-flex}.sign-in:hover{background:var(--surface-hover)}.icon-button{border-radius:var(--pill);width:28px;height:28px;color:var(--text);flex:none;justify-content:center;align-items:center;transition:background-color .1s;display:inline-flex}.icon-button svg,.tool svg{opacity:var(--icon-muted);transition:opacity .1s}.icon-button:hover{background:var(--surface-hover)}.icon-button:hover svg,.tool:hover svg{opacity:var(--icon-secondary)}.icon-button:active:not(:disabled),.tool:active{background:var(--surface-pressed)}.icon-button:disabled{opacity:.4}.icon-button.small{border-radius:var(--pill);width:24px;height:24px}.icon-button.on,.icon-button.danger-text{background:0 0}.icon-button.on{color:var(--signal)}.icon-button.danger-text{color:var(--danger)}.icon-button.on svg,.icon-button.danger-text svg{opacity:1}.shell .icon-button{border-radius:var(--pill);width:32px;height:32px}.link-button{font-size:12px;font-weight:500;text-decoration:none}.link-button:hover{text-decoration:underline}.link-button.quiet{color:var(--muted)}.link-button.danger{color:var(--danger)}.toolbar{left:50%;transform:translate(-50%)}.tool{border-radius:var(--pill);width:32px;height:32px;color:var(--text);justify-content:center;align-items:center;transition:background-color .1s,color .1s;display:flex}.tool:hover{background:var(--surface-hover)}.tool.on,.shell .icon-button.on{background:var(--signal-soft);color:var(--signal)}.tool.on:hover,.shell .icon-button.on:hover{background:var(--signal-soft-hover)}.tool.on svg,.tool.on:hover svg{opacity:1}.zoom{right:6px;bottom:calc(6px + env(safe-area-inset-bottom))}.zoom-value{border-radius:var(--pill);min-width:44px;height:32px;color:var(--secondary);text-align:center;font-variant-numeric:tabular-nums;font-size:12px;transition:background-color .1s}.zoom-value:hover{background:var(--surface-hover)}.notice{border-radius:var(--pill);background:var(--island);color:#fff;height:32px;box-shadow:inset 0 0 0 1px var(--island-line);white-space:nowrap;align-items:center;gap:6px;max-width:min(560px,100vw - 24px);padding:0 12px;display:flex;position:fixed;bottom:12px;left:50%;transform:translate(-50%)}.notice span{text-overflow:ellipsis;overflow:hidden}.working-bubble{left:50%;bottom:calc(6px + env(safe-area-inset-bottom));color:var(--secondary);white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;gap:8px;padding:0 14px 0 12px;font-size:12px;transition:opacity .15s ease-out,transform .15s ease-out,visibility .15s;transform:translate(-50%)translateY(8px)scale(.97)}.working-bubble[data-show]{opacity:1;visibility:visible;transition:opacity .2s cubic-bezier(.22,1,.36,1),transform .2s cubic-bezier(.22,1,.36,1),visibility;transform:translate(-50%)}.working-scribble{flex:none}.working-scribble path{fill:none;stroke:var(--signal);stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;animation:1.8s cubic-bezier(.65,0,.35,1) infinite paused scribble}.working-bubble[data-show] .working-scribble path{animation-play-state:running}@keyframes scribble{0%{stroke-dashoffset:1px}55%{stroke-dashoffset:0}to{stroke-dashoffset:-1px}}.reconnecting{border-radius:var(--pill);background:var(--surface);height:28px;box-shadow:var(--shadow-sm);color:var(--muted);padding:5px 10px;font-size:12px;position:fixed;top:50px;left:50%;transform:translate(-50%)}.share-group{align-items:center;gap:6px;display:flex;position:fixed}.share-group .shell{position:static}.share-group .shell:empty{display:none}.share-group .primary-button{height:38px}.share-split{flex:none;gap:1px;display:inline-flex}.share-split .primary-button:first-child{border-radius:var(--pill) 6px 6px var(--pill);gap:4px;min-width:84px;padding:0 10px 0 12px}.share-split .primary-button:not(:first-child){border-radius:6px var(--pill) var(--pill) 6px;width:28px;padding:0 3px 0 0}.share-sharing,.share-sharing:hover{background:var(--surface-2);color:var(--muted);opacity:1;position:relative;overflow:hidden}.share-sharing i{background:var(--surface-pressed);transition:width .2s ease-out;position:absolute;inset:0 auto 0 0}.share-sharing span{position:relative}.share-uploading,.share-uploading:hover{background:linear-gradient(var(--signal-soft) 0 0), var(--surface);min-width:120px;color:var(--signal);opacity:1;position:relative;overflow:hidden}.share-uploading i{background:var(--signal-soft-hover);transition:width .2s ease-out;position:absolute;inset:0 auto 0 0}.share-uploading span{position:relative}.share-note{max-width:240px;color:var(--muted);text-overflow:ellipsis;white-space:nowrap;padding:0 8px;font-size:12px;line-height:32px;overflow:hidden}.share-menu{width:212px}.share-menu .canvas-menu-item{padding:0 12px}.share-menu-link{color:oklch(100% 0 0/.6);text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:text;user-select:text;padding:6px 12px;font-size:12px;overflow:hidden}.modal-backdrop{background:var(--backdrop);z-index:70;place-items:center;display:grid;position:fixed;inset:0}.name-prompt{border-radius:var(--radius-menu);background:var(--surface);width:320px;max-width:calc(100vw - 32px);box-shadow:var(--shadow);gap:6px;padding:8px;display:flex}.name-prompt input{border-radius:var(--pill);background:var(--surface-2);-webkit-user-select:text;user-select:text;border:0;flex:1;min-width:0;height:32px;padding:0 10px}.name-prompt .primary-button{border-radius:var(--pill)}.huddle-faces{align-items:center;display:inline-flex}.huddle-bar{align-items:center;gap:2px;padding-left:7px;display:inline-flex}.huddle-bar .huddle-faces{padding-right:5px}.huddle-face{--level:0;box-shadow:0 0 0 2px var(--surface), 0 0 0 calc(2px + var(--level) * 2px) color-mix(in oklab, var(--live) calc(min(1, var(--level) * 10) * 100%), transparent);border-radius:50%;margin-left:-5px;transition:box-shadow .1s ease-out;display:inline-flex;position:relative}.huddle-faces .huddle-face:first-child{margin-left:0}.huddle-face.muted{box-shadow:0 0 0 2px var(--surface)}.huddle-face.muted:after{content:"";width:12px;height:12px;box-shadow:0 0 0 1.5px var(--surface);background:var(--danger) no-repeat center / 8px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M3 3l18 18'/%3E%3Cpath d='M8 8v3.5a4 4 0 0 0 6.5 3.1M16 11.5V6.5a4 4 0 0 0-7.6-1.7'/%3E%3C/svg%3E");border-radius:50%;position:absolute;bottom:-3px;right:-3px}.huddle-bar.joining .huddle-face{opacity:.55}.shell .huddle-leave,.shell .huddle-leave:hover{background:var(--danger-soft);color:var(--danger)}.huddle-leave svg,.huddle-leave:hover svg{opacity:1}.huddle-button.live{border-radius:var(--pill);height:32px;color:var(--live);align-items:center;gap:6px;padding:0 6px 0 8px;transition:background-color .1s;display:inline-flex}.huddle-button.live:hover{background:var(--surface-hover)}.huddle-button.live .huddle-faces .face{box-shadow:0 0 0 2px var(--surface);margin-left:-5px}.huddle-button.live .huddle-faces .face:first-child{margin-left:0}.huddle-notice{white-space:nowrap;align-items:center;gap:8px;height:32px;padding:0 0 0 6px;display:inline-flex}.huddle-notice b{font-weight:500}.huddle-notice .join{border-radius:var(--pill);background:var(--live-soft);height:32px;color:var(--live);align-items:center;padding:0 10px;font-weight:500;display:inline-flex}.huddle-error{height:32px;color:var(--muted);white-space:nowrap;align-items:center;padding:0 8px;display:inline-flex}.comments-layer{pointer-events:none;z-index:30;position:absolute;inset:0;overflow:hidden}.comments-layer>*{pointer-events:auto}.comment-pin{background:var(--surface);width:32px;max-width:32px;height:32px;max-height:32px;box-shadow:var(--shadow);text-align:left;touch-action:none;border-radius:16px 16px 16px 0;align-items:flex-start;gap:8px;padding:4px;transition:max-width .1s ease-in-out,max-height .1s ease-in-out,padding .1s ease-in-out;display:flex;position:absolute;overflow:hidden;transform:translateY(-100%)}.comment-pin.new{background:var(--accent)}.comment-pin.active,.comment-pin.unread{box-shadow:0 0 0 2px var(--accent), var(--shadow)}.comment-pin.resolved .face{opacity:.45}.comment-pin-preview{opacity:0;flex-direction:column;gap:0;min-width:0;font-size:11px;line-height:16px;transition:opacity .1s ease-in-out;display:flex}.comment-pin-preview b{font-weight:500}.comment-pin-head{white-space:nowrap}.comment-pin-text{-webkit-line-clamp:2;word-break:break-word;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.comment-pin.expanded{z-index:5;width:240px;max-width:240px;height:auto;max-height:112px;padding:12px}.comment-pin.expanded .face{width:26px!important;height:26px!important}.comment-pin.expanded .comment-pin-preview{opacity:1;flex:1}.composer{background:var(--surface);box-shadow:0 0 0 1px var(--accent), var(--shadow);-webkit-user-select:text;user-select:text;cursor:auto;border-radius:13px;flex-direction:column;display:flex;position:absolute}.composer-input{align-items:flex-start;gap:8px;padding:8px 16px;display:flex}.composer-input textarea{flex:1;min-width:0}.composer textarea,.thread-reply textarea{resize:none;-webkit-user-select:text;user-select:text;background:0 0;border:0;outline:0;width:100%;padding:0;font-size:13px;line-height:24px;display:block;overflow-y:auto}.composer textarea::placeholder,.thread-reply textarea::placeholder{color:var(--muted)}.composer-actions{border-top:1px solid var(--line);align-items:center;height:40px;padding:4px 8px;display:none}.composer.has-text .composer-actions{display:flex}.composer:not(.has-text) .composer-input{padding-right:8px}.send-button{background:var(--solid);width:24px;height:24px;color:var(--on-solid);border-radius:50%;flex:none;justify-content:center;align-items:center;display:inline-flex}.send-button:disabled{background:var(--surface-2);color:var(--muted)}.emoji-wrap{display:inline-flex;position:relative}.emoji-menu{border-radius:var(--radius-menu);background:var(--surface);box-shadow:var(--shadow);z-index:5;grid-template-columns:repeat(6,28px);gap:2px;padding:4px;display:grid;position:absolute;top:calc(100% + 6px);left:0}.emoji-menu button{border-radius:var(--pill);width:28px;height:28px;font-size:16px}.emoji-menu button:hover{background:var(--surface-hover)}.comment-card{background:var(--surface);max-height:min(520px,100vh - 72px);box-shadow:var(--shadow);cursor:auto;border-radius:13px;flex-direction:column;font-size:11px;line-height:16px;display:flex;position:absolute}.thread-header{border-bottom:1px solid var(--line);flex:none;align-items:center;height:42px;padding:4px 8px 4px 16px;display:flex}.thread-title{flex:1;font-weight:550}.thread-actions{align-items:center;gap:4px;display:flex}.menu-wrap{display:inline-flex;position:relative}.menu{border-radius:var(--radius-menu);background:var(--island);min-width:140px;box-shadow:inset 0 0 0 1px var(--island-line), var(--shadow);z-index:6;padding:4px;position:absolute;top:calc(100% + 4px);right:0}.menu button{border-radius:var(--pill);color:#fff;text-align:left;white-space:nowrap;width:100%;height:28px;padding:0 8px;font-size:12px;display:block}.menu button:hover{background:var(--island-hover)}.thread-list{-webkit-user-select:text;user-select:text;flex:1;min-height:0;padding:8px 0 0;overflow-y:auto}.thread-comment{padding:4px 16px 8px;position:relative}.thread-comment-head{align-items:center;gap:8px;height:32px;display:flex}.thread-comment-name{font-size:13px;font-weight:500;line-height:24px}.thread-comment-time{font-size:13px;line-height:24px}.thread-comment-more{opacity:0;margin-left:auto;position:relative}.thread-comment:hover .thread-comment-more,.thread-comment-more:focus-within{opacity:1}.thread-comment-text{white-space:pre-wrap;word-break:break-word;padding-left:32px;font-size:13px;line-height:24px}.thread-reply{flex:none;align-items:flex-start;gap:8px;padding:8px 16px 16px;display:flex}.thread-reply>.face{margin-top:8px}.thread-reply-field{background:var(--surface-2);border-radius:8px;flex:1;align-items:flex-start;gap:8px;min-width:0;padding:8px 8px 8px 12px;display:flex;position:relative;box-shadow:inset 0 0 0 1px #0000}.thread-reply-field:focus-within{box-shadow:inset 0 0 0 1px var(--accent)}.thread-reply-field textarea{flex:1;min-width:0}.comments-panel{border-radius:var(--radius-menu);background:var(--surface);width:248px;box-shadow:var(--shadow-sm);flex-direction:column;display:flex;position:fixed;top:50px;bottom:50px;right:6px}.comments-panel-head{border-bottom:1px solid var(--line-subtle);flex:none;justify-content:space-between;align-items:center;height:42px;padding:0 12px 0 16px;font-size:12px;font-weight:500;display:flex}.resolved-toggle{color:var(--muted);align-items:center;gap:4px;font-weight:400;display:flex}.resolved-toggle input{accent-color:var(--accent);margin:0}.comments-panel-list{flex:1;min-height:0;padding:6px;overflow-y:auto}.comments-empty{margin:0;padding:10px;font-size:12px}.comments-panel-item{text-align:left;border-radius:8px;width:100%;padding:8px 10px;font-size:12px;line-height:16px;display:block}.comments-panel-item:hover{background:var(--surface-hover)}.comments-panel-item.active{background:var(--selection)}.comments-panel-item>span{display:block}.comments-panel-item b{font-weight:500}.comments-panel-face{width:24px;margin-bottom:4px;position:relative}.comments-panel-face .face{display:flex}.unread-dot{background:var(--accent);width:8px;height:8px;box-shadow:0 0 0 1.5px var(--surface);border-radius:50%;position:absolute;top:-1px;right:-3px}.comments-panel-text{-webkit-line-clamp:3;word-break:break-word;-webkit-box-orient:vertical;overflow:hidden;display:-webkit-box!important}body:has(.home){overflow:auto}.home{flex-direction:column;min-height:100%;display:flex}.home-top .wordmark svg{height:18px}.home-top{justify-content:space-between;align-items:center;height:56px;padding:0 20px;display:flex}.home-me{border-radius:50%;transition:box-shadow .1s;display:flex}.home-me:hover,.home-me[data-popup-open]{box-shadow:0 0 0 3px var(--surface-hover)}.home-main{flex:1;width:100%;max-width:1360px;margin:0 auto;padding:24px 20px}.install{text-align:center;flex-direction:column;align-items:center;gap:20px;padding-top:22vh;display:flex}.install h1{letter-spacing:-.028em;margin:0;font-size:24px;font-weight:500;line-height:32px}.canvas-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 24px;margin:0;padding:0;list-style:none;display:grid}.canvas-card{min-width:0;display:block;position:relative}.canvas-card-link{z-index:1;border-radius:var(--radius-menu);outline:0;position:absolute;inset:0}.canvas-card-meta{font-size:12px;display:block}.canvas-card-name{text-overflow:ellipsis;white-space:nowrap;margin-top:10px;font-weight:500;display:block;overflow:hidden}.canvas-card-rename{z-index:2;border-radius:var(--pill);background:var(--surface-2);width:calc(100% + 8px);height:24px;color:var(--text);font:inherit;-webkit-user-select:text;user-select:text;border:0;outline:0;margin:7px 0 -3px -8px;padding:0 8px;font-weight:500;display:block;position:relative}.canvas-thumb{aspect-ratio:16/10;border-radius:var(--radius-menu);background:var(--surface-2);box-shadow:var(--shadow-sm);transition:box-shadow .18s cubic-bezier(.22,1,.36,1);overflow:hidden}.canvas-card:hover .canvas-thumb,.canvas-card[data-popup-open] .canvas-thumb{box-shadow:var(--shadow)}.canvas-card:has(.canvas-card-more[data-popup-open]) .canvas-thumb{box-shadow:var(--shadow)}.canvas-card-link:focus-visible~.canvas-thumb{box-shadow:0 0 0 2px var(--accent)}.canvas-thumb img{object-fit:contain;opacity:0;width:100%;height:100%;transition:opacity .2s;display:block}.canvas-thumb img.loaded{opacity:1}.canvas-card-more,.canvas-card-heart{z-index:2;border-radius:var(--pill);background:var(--surface);width:28px;height:28px;box-shadow:var(--shadow-sm);place-items:center;display:grid;position:absolute;top:8px}.canvas-card-more{color:var(--secondary);opacity:0;transition:opacity .1s,transform .18s cubic-bezier(.22,1,.36,1),color .1s;right:8px;transform:scale(.8)}.canvas-card-more:hover,.canvas-card-more[data-popup-open]{color:var(--text)}.canvas-card:hover .canvas-card-more,.canvas-card-more[data-popup-open],.canvas-card-more:focus-visible{opacity:1;transform:none}.canvas-card:hover .canvas-card-more:active{transform:scale(.92)}.canvas-card-heart{color:oklch(58% .22 12);pointer-events:none;animation:.18s cubic-bezier(.22,1,.36,1) tool-pop;left:8px}@media (hover:none){.canvas-card-more{opacity:1;transform:none}}@media (width<=900px){.canvas-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=560px){.canvas-grid{grid-template-columns:minmax(0,1fr)}}.canvas-menu-positioner{z-index:60}.canvas-menu{border-radius:var(--radius-menu);background:var(--island);min-width:160px;box-shadow:inset 0 0 0 1px var(--island-line), var(--shadow);transform-origin:var(--transform-origin);outline:0;padding:4px;transition:opacity .1s,transform .18s cubic-bezier(.22,1,.36,1)}.canvas-menu[data-starting-style],.canvas-menu[data-ending-style]{opacity:0;transform:scale(.96)}.canvas-menu-item{border-radius:var(--pill);color:#fff;white-space:nowrap;cursor:default;-webkit-user-select:none;user-select:none;outline:0;align-items:center;gap:8px;height:32px;padding:0 12px 0 7px;display:flex}.canvas-menu-item svg{stroke-width:2px;flex:none}.canvas-menu-item[data-highlighted]{background:var(--island-hover)}.canvas-menu-item.danger{color:oklch(72% .19 27)}.canvas-menu-item.danger[data-highlighted]{background:oklch(72% .19 27/.18)}.canvas-menu-separator{background:oklch(100% 0 0/.13);height:1px;margin:4px 8px}.canvas-menu-check{flex:none;display:flex}.canvas-menu-check[data-unchecked]{visibility:hidden}.shell .icon-button[data-popup-open]{background:var(--surface-pressed)}.shell .icon-button[data-popup-open] svg{opacity:1}.canvas-delete{z-index:71;border-radius:var(--radius-menu);background:var(--surface);width:320px;max-width:calc(100vw - 32px);box-shadow:var(--shadow);outline:0;flex-direction:column;gap:16px;padding:16px;transition:opacity .1s,transform .18s cubic-bezier(.22,1,.36,1);display:flex;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}.canvas-delete[data-starting-style],.canvas-delete[data-ending-style]{opacity:0;transform:translate(-50%,-50%)scale(.96)}.canvas-delete-backdrop{transition:opacity .15s}.canvas-delete-backdrop[data-starting-style],.canvas-delete-backdrop[data-ending-style]{opacity:0}.canvas-delete-title{overflow-wrap:anywhere;margin:0;font-size:13px;font-weight:500;line-height:18px}.canvas-delete-error{color:var(--danger);margin:-8px 0 0;font-size:12px}.canvas-delete-actions{justify-content:flex-end;align-items:center;gap:4px;display:flex}.canvas-delete-cancel{border-radius:var(--pill);height:32px;color:var(--secondary);padding:0 12px;font-weight:500;transition:background-color .1s}.canvas-delete-cancel:hover{background:var(--surface-hover)}.primary-button.canvas-delete-confirm{background:var(--danger);color:#fff}.home-foot{color:var(--muted);justify-content:center;gap:16px;padding:16px;font-size:12px;display:flex}.home-foot a{text-decoration:none;transition:color .1s}.home-foot a:hover{color:var(--text)}@media (width<=700px){.toolbar{top:calc(50px + env(safe-area-inset-top));left:6px;transform:none}.top-left{max-width:calc(100vw - 150px)}.follow-tab,.reconnecting,.comments-panel{top:94px}}@media (width<=640px){.working-bubble{bottom:calc(50px + env(safe-area-inset-bottom))}.comments-panel{display:none}.comment-card,.composer{width:calc(100vw - 16px)!important;left:8px!important}.faces .face-button:nth-child(n+4){display:none}}.toolbar{transition:width .24s cubic-bezier(.22,1,.36,1)}.toolbar-clip{border-radius:var(--pill);width:100%;height:32px;overflow:hidden}.toolbar-row{align-items:center;gap:2px;width:max-content;height:32px;display:flex;position:relative}.tool-slider{border-radius:var(--pill);background:var(--signal-soft);pointer-events:none;height:32px;transition:transform .24s cubic-bezier(.22,1,.36,1),width .24s cubic-bezier(.22,1,.36,1);position:absolute;top:0;left:0}.tool-slider[data-hidden]{opacity:0}.toolbar .tool{flex:none;position:relative}.toolbar .tool svg{stroke-width:2px}.toolbar .tool[aria-pressed=true]{color:var(--signal)}.toolbar .tool[aria-pressed=true] svg{opacity:1}.toolbar .tool.held{background:var(--signal-soft)}.toolbar .shell-divider{margin:0 4px}.pencil-tray{align-items:center;gap:6px;margin:0 6px 0 4px;display:flex}.swatch{width:20px;height:20px;box-shadow:inset 0 0 0 1px var(--line);animation:.18s cubic-bezier(.22,1,.36,1) backwards tool-pop;animation-delay:calc(var(--i,0) * 25ms);border-radius:50%;flex:none;transition:transform .1s}.swatch:hover{transform:scale(1.12)}.swatch:active{transform:scale(.9)}.swatch.closed{width:24px;height:24px}.swatch.current{box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--signal)}.size-choice{border-radius:var(--pill);width:28px;height:28px;color:var(--secondary);animation:.18s cubic-bezier(.22,1,.36,1) backwards tool-pop;animation-delay:calc(var(--i,0) * 25ms);flex:none;justify-content:center;align-items:center;transition:background-color .1s;display:flex}.size-choice:hover{background:var(--surface-hover)}.size-choice.current{background:var(--surface-hover);color:var(--signal)}.size-choice.closed{width:24px;height:24px}@keyframes tool-pop{0%{opacity:0;transform:scale(.8)}}.strokes{pointer-events:none;z-index:1000000;position:absolute;top:0;left:0;overflow:visible}.stroke-selection{fill:none;stroke:var(--accent);stroke-width:1.5px;vector-effect:non-scaling-stroke}.stage[data-tool=move] .stroke-mine{pointer-events:auto;cursor:pointer}@media (prefers-reduced-motion:reduce){.toolbar,.tool-slider,.canvas-menu,.canvas-delete,.canvas-delete-backdrop,.canvas-card-more{transition:none}.canvas-card-heart,.swatch,.size-choice{animation:none}.working-bubble,.working-bubble[data-show]{transition:opacity .2s ease-out,visibility .2s;transform:translate(-50%)}.working-scribble path{stroke-dashoffset:0;animation:none}}