twombly 0.4.4 → 0.4.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +38 -0
- package/dist/cli.js +9 -9
- package/dist/ui/assets/Landing-BHVJ-k0j.js +111 -0
- package/dist/ui/assets/{Landing-CrWkZ8qH.css → Landing-C6mswfqx.css} +1 -1
- package/dist/ui/assets/{LandingStage-DlOW_YOx.js → LandingStage-CZwtv1du.js} +1 -1
- package/dist/ui/assets/agentPrompt-Dxy3aH2W.js +1 -0
- package/dist/ui/assets/{index-CJ7B-FU8.css → index-BkX_x_hA.css} +1 -1
- package/dist/ui/assets/{index-DgaQcoTH.js → index-BsjjBUS_.js} +3 -3
- package/dist/ui/index.html +21 -5
- package/dist/ui/llms.txt +23 -0
- package/package.json +5 -2
- package/dist/ui/assets/Landing-CMSAED8E.js +0 -111
- package/dist/ui/assets/agentPrompt-Va8atsXW.js +0 -1
package/dist/ui/index.html
CHANGED
|
@@ -17,14 +17,30 @@
|
|
|
17
17
|
<meta property="og:image:width" content="1200" />
|
|
18
18
|
<meta property="og:image:height" content="630" />
|
|
19
19
|
<meta name="twitter:card" content="summary_large_image" />
|
|
20
|
-
<
|
|
20
|
+
<link rel="alternate" type="text/plain" title="Twombly for agents" href="/llms.txt" />
|
|
21
|
+
<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>
|
|
21
22
|
<script src="/theme.js"></script>
|
|
22
|
-
<script type="module" crossorigin src="/assets/index-
|
|
23
|
+
<script type="module" crossorigin src="/assets/index-BsjjBUS_.js"></script>
|
|
23
24
|
<link rel="modulepreload" crossorigin href="/assets/rolldown-runtime-WkwZ5CU-.js">
|
|
24
|
-
<link rel="modulepreload" crossorigin href="/assets/agentPrompt-
|
|
25
|
-
<link rel="stylesheet" crossorigin href="/assets/index-
|
|
25
|
+
<link rel="modulepreload" crossorigin href="/assets/agentPrompt-Dxy3aH2W.js">
|
|
26
|
+
<link rel="stylesheet" crossorigin href="/assets/index-BkX_x_hA.css">
|
|
26
27
|
</head>
|
|
27
28
|
<body>
|
|
28
|
-
|
|
29
|
+
<!-- For agents and search engines that don't run scripts. The app replaces it on its first render. -->
|
|
30
|
+
<div id="root"><main id="about" style="opacity:0">
|
|
31
|
+
<h1>Twombly: a canvas for your agent’s explorations</h1>
|
|
32
|
+
<p>Your coding agent puts each design exploration on one canvas as a live frame. Then share, comment, and huddle with one link.</p>
|
|
33
|
+
<h2>Get started</h2>
|
|
34
|
+
<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>
|
|
35
|
+
<h2>How it works</h2>
|
|
36
|
+
<ul>
|
|
37
|
+
<li>Works with Claude Code, Codex, Cursor and any agent that can run a command, in any framework and any repo.</li>
|
|
38
|
+
<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>
|
|
39
|
+
<li>The canvas opens on localhost. Nothing goes online until someone clicks Share.</li>
|
|
40
|
+
<li>Shared canvases have live cursors, following, comments on the frames and voice huddles.</li>
|
|
41
|
+
<li>The agent reads what you’re looking at and the comments you leave, then updates the frames.</li>
|
|
42
|
+
</ul>
|
|
43
|
+
<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>
|
|
44
|
+
</main></div>
|
|
29
45
|
</body>
|
|
30
46
|
</html>
|
package/dist/ui/llms.txt
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
# Twombly
|
|
2
|
+
|
|
3
|
+
> 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.
|
|
4
|
+
|
|
5
|
+
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.
|
|
6
|
+
|
|
7
|
+
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.
|
|
8
|
+
|
|
9
|
+
- 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.
|
|
10
|
+
- Gates check every frame for secrets, outside requests and server code, locally and again in the cloud.
|
|
11
|
+
- Nothing goes online until the person clicks Share. The agent never shares unless asked.
|
|
12
|
+
- `twombly context` returns what the person is looking at; `twombly comments` returns their feedback.
|
|
13
|
+
|
|
14
|
+
## Docs
|
|
15
|
+
|
|
16
|
+
- [Agent skill](https://twombly.app/skill.md): the short skill to install
|
|
17
|
+
- [Skill on GitHub](https://github.com/materic-inc/twombly-skill): install with `npx skills add materic-inc/twombly-skill`
|
|
18
|
+
- [npm package](https://www.npmjs.com/package/twombly): install, commands and README
|
|
19
|
+
|
|
20
|
+
## Optional
|
|
21
|
+
|
|
22
|
+
- [Privacy](https://twombly.app/privacy)
|
|
23
|
+
- [Terms](https://twombly.app/terms)
|
package/package.json
CHANGED
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "twombly",
|
|
3
|
-
"version": "0.4.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "0.4.5",
|
|
4
|
+
"description": "A canvas for your coding agent's design explorations. Each version becomes a live frame; share one link for cursors, comments and huddles.",
|
|
5
|
+
"keywords": ["agent", "ai-agent", "coding-agent", "claude-code", "codex", "cursor", "agent-skill", "design", "design-exploration", "prototype", "canvas", "infinite-canvas", "collaboration", "variations", "cli"],
|
|
6
|
+
"homepage": "https://twombly.app",
|
|
7
|
+
"author": "Materic, Inc.",
|
|
5
8
|
"type": "module",
|
|
6
9
|
"bin": { "twombly": "dist/cli.js" },
|
|
7
10
|
"publishConfig": { "access": "public" },
|
|
@@ -1,111 +0,0 @@
|
|
|
1
|
-
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/LandingStage-DlOW_YOx.js","assets/rolldown-runtime-WkwZ5CU-.js","assets/agentPrompt-Va8atsXW.js","assets/index-DgaQcoTH.js","assets/index-CJ7B-FU8.css","assets/LandingStage-BcivO6Eh.css"])))=>i.map(i=>d[i]);
|
|
2
|
-
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-DgaQcoTH.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
|
|
3
|
-
in vec2 a;
|
|
4
|
-
void main() { gl_Position = vec4(a, 0., 1.); }`,Le=`#version 300 es
|
|
5
|
-
precision highp float;
|
|
6
|
-
out vec4 fragColor;
|
|
7
|
-
uniform vec2 uRes;
|
|
8
|
-
uniform float uTime;
|
|
9
|
-
uniform vec3 uSun, uLit, uShade, uSky, uLeaf;
|
|
10
|
-
uniform sampler2D uLeaves;
|
|
11
|
-
// Tuning, from LIGHT below.
|
|
12
|
-
uniform float uGust, uFlutter, uLeafSize, uShadow, uSoft, uSunStrength, uSkyLeaves;
|
|
13
|
-
|
|
14
|
-
// How far the corners melt. Lower is softer.
|
|
15
|
-
const float CORNER = 5.5;
|
|
16
|
-
// Half the height of the box, and how much of the screen its far wall fills.
|
|
17
|
-
const float HALF = 3.;
|
|
18
|
-
const float FAR_WALL = .5;
|
|
19
|
-
|
|
20
|
-
float dither(vec2 p) {
|
|
21
|
-
vec3 h = fract(p.xyx * .1031);
|
|
22
|
-
h += dot(h, h.yzx + 33.33);
|
|
23
|
-
return fract((h.x + h.y) * h.z);
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
float band(float x, float a, float b, float soft) {
|
|
27
|
-
return smoothstep(a - soft, a + soft, x) * (1. - smoothstep(b - soft, b + soft, x));
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
// Wind moving through the trees: gusts travel along the canopy, leaning the branches as they pass,
|
|
31
|
-
// stirring the leaves and opening small gaps that let more light through.
|
|
32
|
-
float foliage(vec2 zy) {
|
|
33
|
-
float t = uTime;
|
|
34
|
-
float gust = sin(t * .42 - zy.x * .3) + .6 * sin(t * .67 - zy.x * .5 + zy.y * .2 + 1.3);
|
|
35
|
-
float stir = (.12 + .2 * abs(gust)) * uFlutter;
|
|
36
|
-
vec2 lean = .6 * gust * uGust * vec2(1., .3);
|
|
37
|
-
vec2 flutter = stir * vec2(sin(t * 1.3 + zy.y * 1.7), cos(t * 1.1 + zy.x * 1.5));
|
|
38
|
-
float near = texture(uLeaves, (zy + lean + flutter) * .21 / uLeafSize + vec2(.17, .31)).r;
|
|
39
|
-
float far = texture(uLeaves, (zy + lean * .4 + flutter * .3) * .09 / uLeafSize + vec2(.61, .09)).r;
|
|
40
|
-
float gap = .03 * gust;
|
|
41
|
-
return max(smoothstep(.1 + gap, .42 + gap, near), .75 * smoothstep(.1, .4, far));
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
// Sun reaching a point through a tall opening down the left side, then through the leaves.
|
|
45
|
-
// The further the light has travelled from the opening, the wider its edges.
|
|
46
|
-
float sunlight(vec3 p, float wall) {
|
|
47
|
-
vec3 hit = p + uSun * ((-wall - p.x) / uSun.x);
|
|
48
|
-
float soft = (.25 + .07 * length(hit - p)) * uSoft;
|
|
49
|
-
float open = band(hit.y, -HALF + .3, HALF - .3, soft) * band(hit.z, -30., 60., soft);
|
|
50
|
-
float bar = mod(hit.z, 4.) - 2.;
|
|
51
|
-
open *= 1. - min(1., .22 / soft) * exp(-bar * bar / (soft * soft));
|
|
52
|
-
vec3 leaf = p + uSun * ((-wall - 3. - p.x) / uSun.x);
|
|
53
|
-
return open * (1. - uShadow * foliage(leaf.zy));
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
void main() {
|
|
57
|
-
float aspect = uRes.x / uRes.y;
|
|
58
|
-
vec2 p = (gl_FragCoord.xy - uRes * .5) / uRes.y;
|
|
59
|
-
|
|
60
|
-
// The far wall has the same shape as the screen, so the corners run straight to the screen's corners.
|
|
61
|
-
vec2 back = vec2(aspect, 1.) * .5 * FAR_WALL;
|
|
62
|
-
float wall = HALF * aspect;
|
|
63
|
-
float depth = HALF / back.y;
|
|
64
|
-
|
|
65
|
-
// How far past the far wall's outline this pixel is, and how much it belongs to each face.
|
|
66
|
-
vec2 reach = abs(p) / back;
|
|
67
|
-
vec3 weights = exp(CORNER * vec3(reach, 1.));
|
|
68
|
-
weights /= weights.x + weights.y + weights.z;
|
|
69
|
-
float besides = weights.x;
|
|
70
|
-
float above = weights.y;
|
|
71
|
-
float ahead = weights.z;
|
|
72
|
-
|
|
73
|
-
float leftFace = besides * (1. - smoothstep(-.1, .1, p.x / back.x));
|
|
74
|
-
float rightFace = besides - leftFace;
|
|
75
|
-
float floorFace = above * (1. - smoothstep(-.1, .1, p.y / back.y));
|
|
76
|
-
float ceilingFace = above - floorFace;
|
|
77
|
-
|
|
78
|
-
// Points on each face, for the sun.
|
|
79
|
-
float tWall = min(wall / max(abs(p.x), .01), depth);
|
|
80
|
-
float tFlat = min(HALF / max(abs(p.y), .01), depth);
|
|
81
|
-
vec3 onRight = vec3(wall, p.y * tWall, tWall);
|
|
82
|
-
vec3 onLeft = vec3(-wall, p.y * tWall, tWall);
|
|
83
|
-
vec3 onFloor = vec3(p.x * tFlat, -HALF, tFlat);
|
|
84
|
-
vec3 onBack = vec3(p.x * depth, p.y * depth, depth);
|
|
85
|
-
|
|
86
|
-
// Daylight fills the box from the left, thinning toward the right.
|
|
87
|
-
float x = p.x / (back.x * 2.);
|
|
88
|
-
float fill = 1. - .55 * smoothstep(-1.2, 1.5, x);
|
|
89
|
-
fill *= leftFace + floorFace + ahead * .9 + ceilingFace * .74 + rightFace * .8;
|
|
90
|
-
|
|
91
|
-
// The corners are only a slight gathering of shade where two faces meet.
|
|
92
|
-
float crease = 1. - max(besides, max(above, ahead));
|
|
93
|
-
fill *= 1. - crease * .3;
|
|
94
|
-
vec3 color = mix(uShade, uLit, fill);
|
|
95
|
-
|
|
96
|
-
// Sun.
|
|
97
|
-
vec3 s = uSun;
|
|
98
|
-
float sun = 0.;
|
|
99
|
-
if (floorFace > .02) sun += floorFace * sunlight(onFloor, wall) * min(1., s.y * 3.);
|
|
100
|
-
if (ahead > .02) sun += ahead * sunlight(onBack, wall) * min(1., max(-s.z, 0.) * 2.5);
|
|
101
|
-
if (rightFace > .02) sun += rightFace * sunlight(onRight, wall) * min(1., -s.x * 2.);
|
|
102
|
-
color += uLit * sun * uSunStrength;
|
|
103
|
-
|
|
104
|
-
// The left side is the light itself: bright sky with trees far out of focus.
|
|
105
|
-
color = mix(color, mix(uSky, uLeaf, foliage(onLeft.zy) * uSkyLeaves), leftFace);
|
|
106
|
-
|
|
107
|
-
color = pow(min(color, vec3(1.)), vec3(1. / 2.2));
|
|
108
|
-
// A single level of 8-bit noise: invisible, but it stops the gradients from banding.
|
|
109
|
-
color += (dither(gl_FragCoord.xy + 17.) - .5) / 255.;
|
|
110
|
-
fragColor = vec4(color, 1.);
|
|
111
|
-
}`;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-DlOW_YOx.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};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
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};
|