npm - twombly - Versions diffs - 0.4.5 → 0.4.7 - Mend

twombly 0.4.5 → 0.4.7

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.

Files changed (14) hide show

package/dist/cli.js +152 -41
package/dist/ui/assets/CopyMarks-D-0Rp6ax.js +1 -0
package/dist/ui/assets/{Landing-C6mswfqx.css → Landing-B1W8Ojoi.css} +1 -1
package/dist/ui/assets/Landing-DpBLfbxU.js +111 -0
package/dist/ui/assets/LandingStage-PXUGvPUq.js +1 -0
package/dist/ui/assets/index-ByqIlLL0.css +1 -0
package/dist/ui/assets/index-DEhmNTRu.js +10 -0
package/dist/ui/index.html +7 -7
package/package.json +1 -1
package/dist/ui/assets/Landing-BHVJ-k0j.js +0 -111
package/dist/ui/assets/LandingStage-CZwtv1du.js +0 -1
package/dist/ui/assets/agentPrompt-Dxy3aH2W.js +0 -1
package/dist/ui/assets/index-BkX_x_hA.css +0 -1
package/dist/ui/assets/index-BsjjBUS_.js +0 -10

package/dist/ui/index.html CHANGED Viewed

@@ -5,31 +5,31 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
     <meta name="color-scheme" content="light dark" />
     <title>Twombly – A canvas for your agent’s explorations</title>
-    <meta name="description" content="Your agent puts each design exploration on one canvas as a live frame. Then share, comment, and huddle with one link." />
+    <meta name="description" content="Your agent puts each design exploration on one canvas as a live frame. Get feedback, huddle, and iterate with your team." />
     <link rel="canonical" href="https://twombly.app/" />
     <link rel="icon" type="image/png" href="/favicon.png" />
     <meta property="og:type" content="website" />
     <meta property="og:site_name" content="Twombly" />
     <meta property="og:url" content="https://twombly.app/" />
     <meta property="og:title" content="Twombly" />
-    <meta property="og:description" content="A canvas for your agent’s explorations. Then share, comment, and huddle with one link." />
+    <meta property="og:description" content="A canvas for your agent’s explorations. Get feedback, huddle, and iterate with your team." />
     <meta property="og:image" content="https://twombly.app/og.png" />
     <meta property="og:image:width" content="1200" />
     <meta property="og:image:height" content="630" />
     <meta name="twitter:card" content="summary_large_image" />
     <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 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. Get feedback, huddle, and iterate with your team.","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-BsjjBUS_.js"></script>
+    <script type="module" crossorigin src="/assets/index-DEhmNTRu.js"></script>
     <link rel="modulepreload" crossorigin href="/assets/rolldown-runtime-WkwZ5CU-.js">
-    <link rel="modulepreload" crossorigin href="/assets/agentPrompt-Dxy3aH2W.js">
-    <link rel="stylesheet" crossorigin href="/assets/index-BkX_x_hA.css">
+    <link rel="modulepreload" crossorigin href="/assets/CopyMarks-D-0Rp6ax.js">
+    <link rel="stylesheet" crossorigin href="/assets/index-ByqIlLL0.css">
   </head>
   <body>
     <!-- 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>
+      <p>Your coding agent puts each design exploration on one canvas as a live frame. Get feedback, huddle, and iterate with your team.</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>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "twombly",
-  "version": "0.4.5",
+  "version": "0.4.7",
   "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",

package/dist/ui/assets/Landing-BHVJ-k0j.js DELETED Viewed

@@ -1,111 +0,0 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/LandingStage-CZwtv1du.js","assets/rolldown-runtime-WkwZ5CU-.js","assets/agentPrompt-Dxy3aH2W.js","assets/index-BsjjBUS_.js","assets/index-BkX_x_hA.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-Dxy3aH2W.js";import{i as v,n as y,r as ee,t as b}from"./index-BsjjBUS_.js";var x=e(_(),1),S=i();function C(){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 w=`twombly:show-copied`,T=.41960295031576633,E=.15,D=.2765523188064277,O=.5783555327868779,k=-44*Math.PI/180,A={x:Math.sin(k),y:-Math.cos(k)},j=(e,t=0,n=1)=>Math.min(n,Math.max(t,e)),M=(e,t,n)=>({x:e.x+t.x*n,y:e.y+t.y*n}),N=e=>Math.hypot(e.x,e.y),P=e=>{let t=N(e);return t<.001?{x:1,y:0}:{x:e.x/t,y:e.y/t}},F=(e,t,n,r)=>({start:e,outgoing:t,incoming:n,end:r});function I(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 L(e,t){let n=j(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=P(s),l=1-(1-j((n-.99)/.01))**3,u=P({x:c.x*(1-l)+A.x*l,y:c.y*(1-l)+A.y*l});return{point:I(a,i),derivative:s,heading:u}}function R(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=I(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 z(e,t,n){let r={x:t.x-e.x,y:t.y-e.y},i=N(r),a=P(r),o=[];if(i<=10)o.push([F(e,M(e,r,1/3),M(e,r,2/3),t)]);else{let n=Math.min(i*T,i*.9,640),r=Math.min(i*E,i*.9,640),s=M(e,A,n),c=M(t,A,-r);o.push([F(e,s,c,t)]),o.push([F(e,M(e,A,n*.65),M(t,A,-r*.65),t)]);let l=A.x*a.y-A.y*a.x<0?-1:1,u={x:a.y*l,y:-a.x*l},d=M({x:(e.x+t.x)/2,y:(e.y+t.y)/2},A,n*.16),f=Math.min(i*D,520),p=Math.min(i*O,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=M(d,u,f*n*i);o.push([F(e,s,M(l,a,-p*r),l),F(l,M(l,a,p*r),c,t)])}}let s=j((-.08-A.x*a.x-A.y*a.y)/.92);return o.map(e=>{let t=R(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=j(.42*j(r/.55)+.38*j(t.totalTurn/(1.4*Math.PI))+.2*j(t.turnEnergy/1.25))*.12,l=j((a?.9:1)*.9*((a?.04:0)+.28*s+.22*j((t.length-180)/760)+.42+c),.12,2.2);return{curves:e,...t,score:o,response:l}})}function B(e,t,n){let r=z(e,t,n),i=r.filter(e=>e.inBounds);return(i.length?i:r).reduce((e,t)=>t.score<e.score?t:e)}var V=(e=0)=>({value:e,velocity:0}),te=Math.atan2(A.y,A.x)*180/Math.PI,ne=1600;function H(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 U(e,t){return e+Math.atan2(Math.sin((t-e)*Math.PI/180),Math.cos((t-e)*Math.PI/180))*180/Math.PI}var re=class{position;velocity={x:0,y:0};kind=`idle`;target;path;pathScale=1;progress=V();horizontal;vertical;axis=V();baseRotation=V();lean=V();stretch=V();heading=0;constructor(e){this.position={...e},this.target={...e},this.horizontal=V(e.x),this.vertical=V(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=B(i(this.position),i(e),{x:-t.x,y:-t.y,width:t.width,height:t.height});let{derivative:a}=L(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:j(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=V(e.x),this.vertical=V(e.y),this.axis=V(),this.baseRotation=V(),this.lean=V(),this.stretch=V(),this.progress=V(),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`)H(this.horizontal,this.target.x,.24,.84,e),H(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){H(this.progress,1,this.path.response,.9,e);let{point:t,derivative:n,heading:r}=L(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=U(this.heading,Math.atan2(r.y,r.x)*180/Math.PI-te)}let n=Math.hypot(this.velocity.x,this.velocity.y)*t,r=this.kind===`scoot`?j(n/ne):0,i=n>12?Math.atan2(this.velocity.y,this.velocity.x)*180/Math.PI:this.axis.value;H(this.axis,U(this.axis.value,i),.07,.82,e),H(this.baseRotation,this.kind===`curve`?this.heading:U(this.baseRotation.value,0),.09,.86,e),H(this.stretch,r,.095,.72,e);let a=n>12?j(this.velocity.x*t/n*76*r,-76,76):0;return H(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=V(),this.lean=V(),this.stretch=V()),!0}deformationSettled(){let e=U(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=j(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)`}},ie={wide:{width:1280,height:720,columns:3},narrow:{width:640,height:760,columns:2}},W=440,G=340,K={top:84,right:64,bottom:64,left:64},q=[1,2,3,4,5,6],J=[{name:`Avery Kim`,color:`#3b82f6`},{name:`Mo Rivera`,color:`#10b981`},{name:`Jules Sato`,color:`#f59e0b`}],ae=[[`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`]],oe=`#e5484d`,se=5,ce=g(.45,.28),le=g(1.1,0),ue=g(.3,0),de=(e,t)=>({x:e%t*496,y:Math.floor(e/t)*412});function fe(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 pe({version:e,rows:t=4}){return(0,S.jsxs)(`div`,{className:`ld-design`,"data-v":e,children:[(0,S.jsx)(`h1`,{children:`Notifications`}),ae.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 Y({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 me({id:e,person:t,text:n}){let{name:r,color:i}=J[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 he(e,t){let n=ie[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,y=0,b=0,x=!1,S=e=>{y=requestAnimationFrame(S);let t=Math.min(50,e-b);b=e;for(let e of v)e(t)||v.delete(e)},C=e=>{e!==x&&(x=e,cancelAnimationFrame(y),e&&(b=performance.now(),y=requestAnimationFrame(S)))},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=q.slice(0,e).map((e,t)=>de(t,n.columns)),r=Math.max(...t.map(e=>e.x))+W,i=Math.max(...t.map(e=>e.y))+G,a={width:n.width-K.left-K.right,height:n.height-K.top-K.bottom},o=Math.min(1,a.width/r,a.height/i);return{z:o,x:K.left+(a.width-r*o)/2,y:K.top+(a.height-i*o)/2}},A=e=>{let t=D;return T(le,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(q.length))=>{let a=de(e-1,n.columns);return{x:i.x+(a.x+W*t)*i.z,y:i.y+(a.y+G*r)*i.z}},M=e=>{let t=r(`[data-cursor="${e}"]`),n=t.querySelector(`svg`),i=new re({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(ce,t=>{e.style.opacity=String(Math.min(1,t*1.6)),e.style.scale=String(.6+.4*t)}),I=async e=>{await E(90,t=>{e.style.scale=String(1-.05*t)}),await E(120,t=>{e.style.scale=String(.95+.05*t)})},L=e=>(s.style.display=``,e.style.display=``,F(e)),R=(e,t)=>{e.style.left=`${t.x}px`,e.style.top=`${t.y}px`},z=()=>{let e=j(3,.5,.5),t=k(q.length),n=W*t.z*.56,r=G*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]})},B=()=>{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))},V=()=>{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=``,R(h.a,j(2,.72,.34)),R(h.b,j(5,.3,.36)),h.b.classList.add(`expanded`),O(k(q.length)),f.setAttribute(`d`,ee({points:z(),size:se})),P[0].place(j(2,.34,.8)),P[1].place(j(5,.86,.7)),P[2].place(j(3,.92,.9))},te=async()=>{let t=1500;for(;;){B(),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 I(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}),L(m[2]),await P[0].move(j(2,.72,.34)),P[1].place({x:n.width*.3,y:n.height+30}),L(m[1]),R(h.a,j(2,.72,.34)),F(h.a),P[0].move(j(2,.34,.8)),await P[1].move(j(5,.3,.36)),R(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=z();P[2].place({x:n.width+30,y:n.height*.3}),L(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`,ee({points:a.slice(0,t),size:se}));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(ue,()=>{})}};if(matchMedia(`(prefers-reduced-motion: reduce)`).matches)return B(),V(),()=>{};te();let ne=new IntersectionObserver(([e])=>C(e.isIntersecting));return ne.observe(e),()=>{ne.disconnect(),C(!1),v.clear()}}function ge(){let e=(0,x.useRef)(null),t=(0,x.useRef)(null),[i,a]=(0,x.useState)(0),c=i&&i<720?`narrow`:`wide`,p=ie[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 he(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)(()=>q.map((e,t)=>de(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:fe(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:q.map((e,t)=>(0,S.jsxs)(`div`,{className:`frame ld-frame`,style:{left:y[t].x,top:y[t].y,width:W,height:G},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)(pe,{version:e})})]},e))}),(0,S.jsx)(`svg`,{className:`ld-strokes`,width:p.width,height:p.height,children:(0,S.jsx)(`path`,{fill:oe})}),(0,S.jsx)(me,{id:`a`,person:0,text:``}),(0,S.jsx)(me,{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:J[e].name,picture:null,color:J[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)(Y,{id:`0`,color:J[0].color,name:J[0].name}),(0,S.jsx)(Y,{id:`1`,color:J[1].color,name:J[1].name}),(0,S.jsx)(Y,{id:`2`,color:J[2].color,name:J[2].name}),(0,S.jsx)(Y,{id:`you`,color:`#000`})]})]},c)]})}var X={ms:800,ease:[.45,0,.55,1]},_e=t(...X.ease),ve=[[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`]],ye=e=>[1,3,5].map(t=>(parseInt(e.slice(t,t+2),16)/255)**2.2),be=e=>`#${e.map(e=>Math.round(e**(1/2.2)*255).toString(16).padStart(2,`0`)).join(``)}`,xe=new URLSearchParams(location.search).get(`hour`),Se=()=>{if(xe!==null)return Number(xe);let e=new Date;return e.getHours()+e.getMinutes()/60};function Ce(){let[e,t]=(0,x.useState)(Se);return(0,x.useEffect)(()=>{let e=()=>t(Se()),n=window.setInterval(e,3e4);return document.addEventListener(`visibilitychange`,e),()=>{window.clearInterval(n),document.removeEventListener(`visibilitychange`,e)}},[]),e}function we(e){let{lit:t,shade:n}=Te(e),[r,i,a]=t.map((e,t)=>n[t]+(e-n[t])*.6);return{lit:be(t),shade:be(n),dark:.2126*r+.7152*i+.0722*a<.18}}function Te(e){let t=Math.max(1,ve.findIndex(([t])=>t>=e)),[n,...r]=ve[t-1],[i,...a]=ve[t],o=(e-n)/(i-n),s=o*o*(3-2*o),[c,l,u,d]=r.map((e,t)=>{let n=ye(a[t]);return ye(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 Z={wind:1.1,gust:1,flutter:1.65,leafSize:1,shadow:.55,softness:1,sun:.61,skyLeaves:.29},Ee=`#version 300 es
-in vec2 a;
-void main() { gl_Position = vec4(a, 0., 1.); }`,De=`#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 Oe(){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 ke(t)}function ke(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 Ae({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,Ee],[t.FRAGMENT_SHADER,De]]){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,Oe()),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=Te(r);t.uniform2f(c(`uRes`),i,a),t.uniform1f(c(`uTime`),n),t.uniform1f(c(`uGust`),Z.gust),t.uniform1f(c(`uFlutter`),Z.flutter),t.uniform1f(c(`uLeafSize`),Z.leafSize),t.uniform1f(c(`uShadow`),Z.shadow),t.uniform1f(c(`uSoft`),Z.softness),t.uniform1f(c(`uSunStrength`),Z.sun),t.uniform1f(c(`uSkyLeaves`),Z.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)/X.ms));i.current=n.from+(r.current-n.from)*_e(e),e===1&&(a.current=null)}else i.current+=(r.current-i.current)*(1-Math.exp((u-t)*.002));d+=(t-u)/1e3*Z.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 je=new URLSearchParams(location.search).get(`hero`)!==`1`,Me=(0,x.lazy)(()=>b(()=>import(`./LandingStage-CZwtv1du.js`),__vite__mapDeps([0,1,2,3,4,5]))),Ne=[[`A`,`canvas`,`for`,`your`],[`agent’s`,`explorations`]],Pe=g(.8,0),Fe=g(1.1,0),Ie=.1,Le=3,Re=.14,Q=8,ze=500,$=32,Be=1500,Ve=(()=>{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)}`})(),He=(e,t={})=>a(`/api/events`,{event:e,visit:Ve,...t});function Ue(){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)*Re,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(${ze}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-$||t.clientX>=r.right+$||t.clientY<=r.top-$||t.clientY>=r.bottom+$)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*Ie,Le),n[1]=c(o*Ie,Le),n[2]=c(-o/(r.height/2)*Q,Q),n[3]=c(i/(r.width/2)*Q,Q),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 We(){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),Be)};return[e,e=>{navigator.clipboard?.writeText(e).then(()=>{He(`prompt_copied`),r()}).catch(()=>{})},r]}function Ge(){let[e,t,n]=We(),[r,i]=Ue();return(0,x.useEffect)(()=>(window.addEventListener(w,n),()=>window.removeEventListener(w,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)(C,{}),(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 Ke(){let e=0;return(0,S.jsx)(`h1`,{className:`landing-title`,children:Ne.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 qe(){(0,x.useEffect)(()=>{He(`landing_viewed`,{url:location.href,referrer:document.referrer})},[]);let e=Ce(),[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}=we(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),X.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":`${X.ms}ms`,"--shift-ease":`cubic-bezier(${X.ease.join(`, `)})`,"--word-ease":Pe.css,"--word-ms":`${Pe.ms}ms`,"--rise-ease":Fe.css,"--rise-ms":`${Fe.ms}ms`},children:[(0,S.jsx)(Ae,{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)(y,{})}),(0,S.jsxs)(`div`,{className:`landing-nav-end`,children:[(0,S.jsx)(v,{hour:o,onHour:a}),(0,S.jsx)(`a`,{className:`landing-sign-in`,href:`/auth/google/start?next=/`,onClick:()=>He(`sign_in_clicked`),children:`Sign in`})]})]}),(0,S.jsxs)(`main`,{className:`landing-hero`,children:[(0,S.jsx)(Ke,{}),(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)(Ge,{})}),je?(0,S.jsx)(`div`,{className:`landing-slot`,children:(0,S.jsx)(x.Suspense,{fallback:null,children:(0,S.jsx)(Me,{dark:l})})}):(0,S.jsx)(ge,{})]}),(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{qe as Landing,w as t};