twombly 0.4.7 → 0.4.9
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/dist/cli.js +171 -60
- package/dist/ui/assets/CopyMarks-DRo3-xP6.js +1 -0
- package/dist/ui/assets/Landing-DGRAtYOs.js +111 -0
- package/dist/ui/assets/{LandingStage-PXUGvPUq.js → LandingStage-CJL8RTJG.js} +1 -1
- package/dist/ui/assets/index-DZsgnE_5.css +1 -0
- package/dist/ui/assets/index-TpepII8R.js +10 -0
- package/dist/ui/index.html +7 -3
- package/dist/ui/og.mp4 +0 -0
- package/dist/ui/og.png +0 -0
- package/package.json +1 -1
- package/dist/ui/assets/CopyMarks-D-0Rp6ax.js +0 -1
- package/dist/ui/assets/Landing-DpBLfbxU.js +0 -111
- package/dist/ui/assets/index-ByqIlLL0.css +0 -1
- package/dist/ui/assets/index-DEhmNTRu.js +0 -10
package/dist/ui/index.html
CHANGED
|
@@ -16,14 +16,18 @@
|
|
|
16
16
|
<meta property="og:image" content="https://twombly.app/og.png" />
|
|
17
17
|
<meta property="og:image:width" content="1200" />
|
|
18
18
|
<meta property="og:image:height" content="630" />
|
|
19
|
+
<meta property="og:video" content="https://twombly.app/og.mp4" />
|
|
20
|
+
<meta property="og:video:type" content="video/mp4" />
|
|
21
|
+
<meta property="og:video:width" content="1200" />
|
|
22
|
+
<meta property="og:video:height" content="630" />
|
|
19
23
|
<meta name="twitter:card" content="summary_large_image" />
|
|
20
24
|
<link rel="alternate" type="text/plain" title="Twombly for agents" href="/llms.txt" />
|
|
21
25
|
<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>
|
|
22
26
|
<script src="/theme.js"></script>
|
|
23
|
-
<script type="module" crossorigin src="/assets/index-
|
|
27
|
+
<script type="module" crossorigin src="/assets/index-TpepII8R.js"></script>
|
|
24
28
|
<link rel="modulepreload" crossorigin href="/assets/rolldown-runtime-WkwZ5CU-.js">
|
|
25
|
-
<link rel="modulepreload" crossorigin href="/assets/CopyMarks-
|
|
26
|
-
<link rel="stylesheet" crossorigin href="/assets/index-
|
|
29
|
+
<link rel="modulepreload" crossorigin href="/assets/CopyMarks-DRo3-xP6.js">
|
|
30
|
+
<link rel="stylesheet" crossorigin href="/assets/index-DZsgnE_5.css">
|
|
27
31
|
</head>
|
|
28
32
|
<body>
|
|
29
33
|
<!-- For agents and search engines that don't run scripts. The app replaces it on its first render. -->
|
package/dist/ui/og.mp4
ADDED
|
Binary file
|
package/dist/ui/og.png
CHANGED
|
Binary file
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "twombly",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.9",
|
|
4
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
5
|
"keywords": ["agent", "ai-agent", "coding-agent", "claude-code", "codex", "cursor", "agent-skill", "design", "design-exploration", "prototype", "canvas", "infinite-canvas", "collaboration", "variations", "cli"],
|
|
6
6
|
"homepage": "https://twombly.app",
|
|
@@ -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`),d=Symbol.for(`react.lazy`),ee=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,ie={};function m(e,t,n){this.props=e,this.context=t,this.refs=ie,this.updater=n||f}m.prototype.isReactComponent={},m.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`)},m.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,`forceUpdate`)};function h(){}h.prototype=m.prototype;function g(e,t,n){this.props=e,this.context=t,this.refs=ie,this.updater=n||f}var _=g.prototype=new h;_.constructor=g,p(_,m.prototype),_.isPureReactComponent=!0;var v=Array.isArray;function y(){}var b={H:null,A:null,T:null,S:null},ae=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 se(e){var t={"=":`=0`,":":`=2`};return`$`+e.replace(/[=:]/g,function(e){return t[e]})}var C=/\/+/g;function w(e,t){return typeof e==`object`&&e&&e.key!=null?se(``+e.key):t.toString(36)}function T(e){switch(e.status){case`fulfilled`:return e.value;case`rejected`:throw e.reason;default:switch(typeof e.status==`string`?e.then(y,y):(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 d:return c=e._init,E(c(e._payload),r,i,a,o)}}if(c)return o=o(e),c=a===``?`.`+w(e,0):a,v(o)?(i=``,c!=null&&(i=c.replace(C,`$&/`)+`/`),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(C,`$&/`)+`/`)+c)),r.push(o)),1;c=0;var l=a===``?`.`:a+`:`;if(v(e))for(var u=0;u<e.length;u++)a=e[u],s=l+w(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+w(a,u++),c+=E(a,r,i,s,o);else if(s===`object`){if(typeof e.then==`function`)return E(T(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 ce(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 le=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 O(e){var t=b.T,n={};n.types=t===null?null:t.types,b.T=n;try{var r=e(),i=b.S;i!==null&&i(n,r),typeof r==`object`&&r&&typeof r.then==`function`&&r.then(y,le)}catch(e){le(e)}finally{t!==null&&n.types!==null&&(t.types=n.types),b.T=t}}function ue(e){var t=b.T;if(t!==null){var n=t.types;n===null?t.types=[e]:n.indexOf(e)===-1&&n.push(e)}else O(ue.bind(null,e))}var k={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=ee,e.Children=k,e.Component=m,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=b,e.__COMPILER_RUNTIME={__proto__:null,c:function(e){return b.H.useMemoCache(e)}},e.addTransitionType=ue,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)!ae.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)ae.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:d,_payload:{_status:-1,_result:e},_init:ce}},e.memo=function(e,t){return{$$typeof:u,type:e,compare:t===void 0?null:t}},e.startTransition=O,e.unstable_useCacheRefresh=function(){return b.H.useCacheRefresh()},e.use=function(e){return b.H.use(e)},e.useActionState=function(e,t,n){return b.H.useActionState(e,t,n)},e.useCallback=function(e,t){return b.H.useCallback(e,t)},e.useContext=function(e){return b.H.useContext(e)},e.useDebugValue=function(){},e.useDeferredValue=function(e,t){return b.H.useDeferredValue(e,t)},e.useEffect=function(e,t){return b.H.useEffect(e,t)},e.useEffectEvent=function(e){return b.H.useEffectEvent(e)},e.useId=function(){return b.H.useId()},e.useImperativeHandle=function(e,t,n){return b.H.useImperativeHandle(e,t,n)},e.useInsertionEffect=function(e,t){return b.H.useInsertionEffect(e,t)},e.useLayoutEffect=function(e,t){return b.H.useLayoutEffect(e,t)},e.useMemo=function(e,t){return b.H.useMemo(e,t)},e.useOptimistic=function(e,t){return b.H.useOptimistic(e,t)},e.useReducer=function(e,t,n){return b.H.useReducer(e,t,n)},e.useRef=function(e){return b.H.useRef(e)},e.useState=function(e){return b.H.useState(e)},e.useSyncExternalStore=function(e,t,n){return b.H.useSyncExternalStore(e,t,n)},e.useTransition=function(){return b.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})}),hostedAccess:(e,t)=>a(`/api/canvases/${e}`,{method:`PATCH`,body:JSON.stringify({access:t})}),access:(e,t)=>a(`/api/canvases/${e}/access`,{method:`POST`,body:JSON.stringify({access:t})}),list:()=>a(`/api/canvases`),forget:e=>a(`/api/shared/${e}`,{method:`DELETE`}),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`}),members:e=>a(`/api/canvases/${e}/members`),invite:(e,t,n)=>a(`/api/canvases/${e}/members`,{method:`POST`,body:JSON.stringify({email:t,role:n})}),uninvite:(e,t)=>a(`/api/canvases/${e}/members/${encodeURIComponent(t)}`,{method:`DELETE`}),contacts:()=>a(`/api/contacts`),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=e=>e===`owner`||e===`editor`,d=/^[^\s@<>"]{1,64}@[^\s@<>"]{1,190}\.[a-z]{2,}$/i,ee=[`#F24822`,`#FF7A00`,`#14AE5C`,`#0D99FF`,`#9747FF`,`#E5277B`,`#00B5B8`,`#7B61FF`];function te(e){let t=0;for(let n of String(e))t=t*31+n.charCodeAt(0)>>>0;return ee[t%ee.length]}var ne=`abcdefghijkmnpqrstuvwxyz23456789`;function re(e=12){let t=crypto.getRandomValues(new Uint8Array(e)),n=``;for(let e of t)n+=ne[e%32];return n}var f=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},p=(e=>e?f(e):f),ie=e=>e;function m(e,t=ie){let n=i.useSyncExternalStore(e.subscribe,i.useCallback(()=>t(e.getState()),[e,t]),()=>t(e.getInitialState()));return i.useDebugValue(n),n}var h=e=>{let t=p(e),n=e=>m(t,e);return Object.assign(n,t),n},g=(e=>e?h(e):h),_=.05,v=e=>Math.min(8,Math.max(_,e)),y=(e,t)=>({x:(e.x-t.x)/t.z,y:(e.y-t.y)/t.z}),b=(e,t)=>({x:t.x+e.x*t.z,y:t.y+e.y*t.z}),ae=(e,t,n)=>({...e,x:e.x+t,y:e.y+n});function x(e,t,n){let r=v(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 oe(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 S=(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 se(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 C(e,t,n=null,r={x:0,y:0}){let i=t.width<700?16:48,a=v(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 w(e,t,n){let r=t<640?24:96,i=v(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 T=e=>[e.x,e.x+e.w/2,e.x+e.w],E=e=>[e.y,e.y+e.h/2,e.y+e.h];function D(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 ce(e,t,n){let r=D(T(e),t.flatMap(T),n)??0,i=D(E(e),t.flatMap(E),n)??0,a={...e,x:e.x+r,y:e.y+i},o=[];for(let e of t){for(let t of T(a))T(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 E(a))E(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 le=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 O(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 ue(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 k=g(()=>({boot:null,canvasId:``,name:``,link:null,connected:!1,ready:!1,gone:!1,closed:!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,shareOpen:!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:{}})),A=k.setState,j=k.getState,M=new Map,de=new Map,fe=new Set,pe={x:window.innerWidth/2,y:window.innerHeight/2},me=new Set,he=e=>(me.add(e),()=>{me.delete(e)}),N=null,P=null,ge=!1,_e,F=!0;function ve(){z&&j().focusId||(F=!1,j().following&&A({following:null}))}function I(){F?Pe():j().focusId&&R(j().camera)}var L=e=>N?.send(e),ye=()=>N;function R(e){let{focusId:t,frames:n,size:r}=j(),i=t?n[t]:null;if(z){if(i)return;Se(),Ce()}if(i){let t=C(i,r,e.z);A({camera:C(i,r,e.z,{x:e.x-t.x,y:e.y-t.y})})}else A({camera:{...e,z:v(e.z)}});je()}var be=360,xe=O(.22,1,.36,1),z=0,B=null;function Se(){cancelAnimationFrame(z),z=0}function Ce(){B=null,A({focusReturning:!1})}function we(e,t,n){if(Se(),!t||matchMedia(`(prefers-reduced-motion: reduce)`).matches)return A({camera:e}),je(),n?.();let r=j().camera,i=performance.now(),a=t=>{let o=Math.min(1,Math.max(0,t-i)/be),s=xe(o);A({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}}),je(),o<1?z=requestAnimationFrame(a):(z=0,n?.())};z=requestAnimationFrame(a)}function Te(e,t=null){let{frames:n,size:r,camera:i,role:a}=j(),o=n[e];o&&(B??={camera:i,autoFit:F},F=!0,A({focusId:e,focusReturning:!1,following:t,interacting:null,selection:u(a)?[e]:[],selectedStroke:null,activeThread:null,draft:null}),we(C(o,r),!0))}function V(e=!0){let{focusId:t,frames:n,role:r,size:i}=j();if(!t||!B)return;F=B.autoFit;let a=se(Me()),o=F&&a?w(a,i.width,i.height):B.camera;A({focusId:null,focusReturning:!0,selection:u(r)&&n[t]?[t]:[],activeThread:null,draft:null}),we(o,e,Ce)}function Ee(e){let{focusId:t,frames:n,following:r}=j();if(e!==t){if(e&&n[e])return Te(e,r);t&&(Se(),B&&(F=B.autoFit),B=null,A({focusId:null,focusReturning:!1,selection:[],activeThread:null,draft:null}))}}var De=8,Oe=8,ke=e=>e*Math.min(Oe,Math.max(1,j().peers.length/De)),Ae=0;function je(){Ae||=window.setTimeout(()=>{Ae=0,H()},ke(66))}function H(){let{camera:e,size:t,peers:n,focusId:r}=j();n.length<2||L({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 Me=()=>Object.values(j().frames),Ne=e=>Object.values(e).sort((e,t)=>e.z-t.z||e.id.localeCompare(t.id));function Pe(){let e={width:window.innerWidth,height:window.innerHeight},{focusId:t,frames:n}=j();if(t&&n[t])return R(C(n[t],e));let r=se(Me());r&&e.width>0&&e.height>0&&R(w(r,e.width,e.height))}function Fe(){A({size:{width:window.innerWidth,height:window.innerHeight}}),I()}function Ie(){F=!0,j().following&&A({following:null}),Pe()}function Le(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 Re(e,t=!1){t&&j().focusId&&j().threads[e]&&j().threads[e].frameId!==j().focusId&&V(!1);let{threads:n,frames:r,camera:i,size:a}=j(),o=n[e];if(!o||(Ve(o),A({activeThread:e,draft:null,showResolved:o.resolved?!0:j().showResolved}),!t))return;F=!1;let s=Le(o,r);s&&R({...i,x:a.width/2-180-s.x*i.z,y:a.height/2+60-s.y*i.z})}var ze=()=>`oc:read:${j().canvasId}`,U=null;function Be(){if(U)return U;try{U=JSON.parse(localStorage.getItem(ze())||`{}`)}catch{U={}}return U}function Ve(e){let t=e.comments[e.comments.length-1]?.createdAt||0;Be()[e.id]=t;try{localStorage.setItem(ze(),JSON.stringify(U))}catch{}}function He(e,t){let n=e.comments[e.comments.length-1];return!!n&&n.author.id!==t&&n.createdAt>(Be()[e.id]||0)}var Ue=`oc:name`;function W(){try{return localStorage.getItem(Ue)||``}catch{return``}}function We(){return!j().peers.find(e=>e.id===j().self)?.guest||W()?Promise.resolve(!0):new Promise(e=>{A({namePrompt:t=>{A({namePrompt:null});let n=t?.trim();if(!n)return e(!1);try{localStorage.setItem(Ue,n)}catch{}L({t:`name`,name:n}),e(!0)}})})}var Ge=`twombly:invert-scroll`;function Ke(){try{return localStorage.getItem(Ge)===`1`}catch{return!1}}var qe=()=>j().boot?.mode===`local`||!!j().boot?.me;function Je(){let e=!j().invertScroll;if(A({invertScroll:e}),qe())s.saveSettings({invertScroll:e}).catch(()=>X(`Could not save that`));else try{localStorage.setItem(Ge,e?`1`:`0`)}catch{}}var Ye=`twombly:theme`,Xe=matchMedia(`(prefers-color-scheme: dark)`),G=null;try{let e=localStorage.getItem(Ye);(e===`light`||e===`dark`)&&(G=e)}catch{}function K(){let e=G?G===`dark`:Xe.matches;document.documentElement.dataset.colorScheme=e?`dark`:`light`;let{pencil:t}=j(),[n,r]=e?[`#1a1a1a`,`#ffffff`]:[`#ffffff`,`#1a1a1a`];A({dark:e,pencil:t.color===n?{...t,color:r}:t})}Xe.addEventListener(`change`,K),K();function Ze(e){G=e;try{localStorage.setItem(Ye,e)}catch{}K()}function Qe(){G=null,K()}function $e(){let e=j().dark?`light`:`dark`;Ze(e),qe()&&s.saveSettings({theme:e}).catch(()=>X(`Could not save that`))}var et=0;function tt(e){window.clearTimeout(et),A({working:e>0}),e>0&&(et=window.setTimeout(()=>A({working:!1}),e))}var q=[],nt=[];function J(e){q.push(e),q.length>50&&q.shift(),nt.length=0}function rt(e){let{frames:t}=j();if(e.kind===`stroke-added`)return j().strokes[e.stroke.id]?(dt(e.stroke.id),{kind:`stroke-removed`,stroke:e.stroke}):null;if(e.kind===`stroke-removed`)return ut(e.stroke),{kind:`stroke-added`,stroke:e.stroke};if(e.kind===`remove`){for(let t of e.frames)L({t:`frame.restore`,frame:t});return{kind:`restore`,frames:e.frames}}if(e.kind===`restore`){for(let t of e.frames)L({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)st(e,t);return{kind:`patch`,frames:r}}function it(e,t){for(;e.length;){let n=rt(e.pop());if(n){t.push(n);return}}}function at(){it(q,nt)}function ot(){it(nt,q)}function st(e,t){let{frames:n}=j();n[e]&&(A({frames:{...n,[e]:{...n[e],...t}}}),L({t:`frame.patch`,id:e,patch:t}))}function ct(e){_t();let t=e===`pencil`||e===`comment`?{selection:[]}:{};A({tool:e,draft:null,selectedStroke:null,...e===`move`?{}:{interacting:null},...t})}function lt(e){A({pencil:{...j().pencil,...e}})}function ut(e){A({strokes:{...j().strokes,[e.id]:e}}),L({t:`stroke.add`,stroke:e})}function dt(e){let{[e]:t,...n}=j().strokes;A({strokes:n,selectedStroke:j().selectedStroke===e?null:j().selectedStroke}),L({t:`stroke.remove`,id:e})}function ft(e){ut(e),J({kind:`stroke-added`,stroke:e})}function pt(){let{selection:e,frames:t,role:n,selectedStroke:r,strokes:i}=j();if(r&&i[r])return J({kind:`stroke-removed`,stroke:i[r]}),dt(r);if(!u(n)||!e.length||j().focusId)return;let a=e.map(e=>t[e]).filter(Boolean);J({kind:`remove`,frames:a});for(let e of a)L({t:`frame.remove`,id:e.id});A({selection:[]})}var mt=300,Y=new Map;function ht(e,t){window.clearTimeout(Y.get(e));let n=j().chats[e],r=()=>{let{[e]:t,...n}=j().chats;A({chats:n}),Y.delete(e)},i=()=>{let t=j().chats[e];if(!t)return r();A({chats:{...j().chats,[e]:{...t,live:!1}}}),Y.set(e,window.setTimeout(r,mt))};t?(A({chats:{...j().chats,[e]:{text:t,live:!0}}}),Y.set(e,window.setTimeout(i,c))):n&&i()}function gt(){A({chatting:!0})}function _t(){j().chatting&&(A({chatting:!1}),L({t:`chat`,text:null}))}function vt(e){let t=j();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;A({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(),tt(e.working),document.title=`${e.doc.name} – Twombly`,I();let a=new URLSearchParams(location.search).get(`comment`);a&&r[a]&&(Re(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&&L({t:`name`,name:o}),setTimeout(H,100);break}case`peers`:{for(let t of M.keys())e.peers.some(e=>e.id===t)||(M.delete(t),de.delete(t));for(let n of Object.keys(t.chats))e.peers.some(e=>e.id===n)||ht(n,null);let n=t.following&&e.peers.some(e=>e.id===t.following)?t.following:null;A({peers:e.peers,following:n}),e.peers.length>t.peers.length&&setTimeout(H,50);break}case`pointer`:M.set(e.from,e.p);break;case`chat`:ht(e.from,l(e.text));break;case`view`:de.set(e.from,{...e.v,at:performance.now()});break;case`frame.upsert`:{let n=fe.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;A({frames:{...j().frames,[r.id]:r}}),n||I();break}case`frame.remove`:{let{[e.id]:n,...r}=j().frames;A({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={...j().strokes};for(let n of e.strokes)t[n.id]=n;A({strokes:t});break}case`stroke.remove`:{let{[e.id]:n,...r}=j().strokes;A({strokes:r,selectedStroke:t.selectedStroke===e.id?null:t.selectedStroke});break}case`canvas`:A({name:e.name}),document.title=`${e.name} – Twombly`;break;case`working`:tt(e.ms);break;case`thread`:A({threads:{...j().threads,[e.thread.id]:e.thread}}),t.activeThread===e.thread.id&&Ve(e.thread);break;case`thread.remove`:{let{[e.id]:n,...r}=j().threads;A({threads:r,activeThread:t.activeThread===e.id?null:t.activeThread});break}case`deleted`:yt();break;case`private`:bt();break;case`error`:X(e.message);break;case`role`:A(t=>({role:e.role,selection:u(e.role)?t.selection:[]}))}for(let t of me)t(e)}async function yt(){let{boot:e}=j();if(e?.mode===`local`)return A({link:null,awaitingSignIn:!1}),await s.bootstrap(j().canvasId).catch(()=>null),Z();N?.close(),A({gone:!0})}function bt(){N?.close(),A({closed:!0,shareOpen:!1})}var xt=0;function X(e,t=!1){A({notice:e,noticeFailed:t}),window.clearTimeout(xt),xt=window.setTimeout(()=>A({notice:null}),t?5e3:2600)}function Z(){N?.close();let e=j().canvasId;N=new le(()=>s.ticket(e,W()||void 0).then(e=>e.url,e=>{throw e?.status===403&&bt(),e}),vt,e=>A({connected:e}))}var St=``;function Ct(){let{focusId:e,interacting:t,selection:n,activeThread:r}=j();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 wt(e=!1){let t=Ct(),n=JSON.stringify(t);n===St&&!e||P?.readyState!==WebSocket.OPEN||(St=n,P.send(JSON.stringify({t:`context`,context:t})))}function Tt(e){k.subscribe((e,t)=>{(e.focusId!==t.focusId||e.interacting!==t.interacting||e.selection!==t.selection||e.activeThread!==t.activeThread)&&wt()});let t=()=>{let n=new WebSocket(`${location.origin.replace(/^http/,`ws`)}/local/${e}?events=1`);P=n,n.onopen=()=>wt(!0),n.onmessage=e=>{let t;try{t=JSON.parse(e.data)}catch{return}if(t.t===`auth`){let e=j().boot;A({boot:e&&{...e,me:t.me}}),t.me&&ge?(ge=!1,A({awaitingSignIn:!1,shareOpen:!0})):t.me&&j().link&&Z()}else t.t===`settings`?(A({invertScroll:t.settings.invertScroll}),t.settings.theme&&Ze(t.settings.theme)):t.t===`share-progress`?A({sharing:{done:t.done,total:t.total}}):t.t===`shared`&&(A({link:t.url,sharing:null}),Z())},n.onclose=()=>{P===n&&setTimeout(t,1500)}};t()}function Et(){let{boot:e}=j();e?.mode===`local`&&!e.me?(ge=!0,A({awaitingSignIn:!0,sharing:null}),s.login().catch(()=>{A({awaitingSignIn:!1}),X(`Could not open sign-in`,!0)})):A({shareOpen:!0})}async function Dt(e){let{boot:t,canvasId:n,link:r}=j();if(t?.mode===`hosted`)return s.hostedAccess(n,e);e===`link`&&!r&&A({sharing:{done:0,total:Me().length}});try{let{members:t,url:r}=await s.access(n,e);return e===`link`&&r&&(A({link:r}),kt(r)),t}finally{A({sharing:null})}}function Ot(e){navigator.clipboard?.writeText(e).then(()=>X(`Link copied`)).catch(()=>{})}function kt(e){navigator.clipboard?.writeText(e).then(()=>{A({shareCopied:!0}),clearTimeout(_e),_e=setTimeout(()=>A({shareCopied:!1}),1400)}).catch(()=>{})}function At(e){let t=e.canvas;A({boot:e,canvasId:t.id,name:t.name,link:t.url,invertScroll:e.settings?.invertScroll??Ke()}),e.mode===`hosted`&&e.me&&!e.settings&&(Ke()||G)&&s.saveSettings({invertScroll:Ke(),...G&&{theme:G}}).catch(()=>{}),e.mode===`local`&&Tt(t.id),Z()}var jt=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})),Mt=t(((e,t)=>{t.exports=jt()})),Q=Mt();function Nt({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 Pt(){let e=k(e=>e.peers),t=k(e=>e.self),n=k(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:()=>k.setState({following:n===e.id?null:e.id,interacting:null}),children:(0,Q.jsx)(Nt,{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}),Ft=`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`,It=$((0,Q.jsx)(`path`,{d:Ft})),Lt=$((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`})]})),Rt=$((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`})]})),zt=$((0,Q.jsx)(`path`,{d:`M18 9.00005C18 9.00005 13.5811 15 12 15C10.4188 15 6 9 6 9`})),Bt=$((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`})),Vt=$((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`})),Ht=$((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`})]})),Ut=$((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`})]})),Wt=$((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`})})),Gt=$((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`})]})),Kt=$((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`})]})),qt=$((0,Q.jsx)(`path`,{d:`m6.5 6.5 11 11m0-11-11 11`})),Jt=({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`})]}),Yt=`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`,Xt=$((0,Q.jsx)(`path`,{fill:`currentColor`,d:Yt})),Zt=$((0,Q.jsx)(`path`,{d:Yt})),Qt=$((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`})),$t=$((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`})]})),en=$((0,Q.jsx)(`path`,{d:`M12 19V5m-6.5 6.5L12 5l6.5 6.5`})),tn=$((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`})]})),nn=$((0,Q.jsx)(`path`,{d:`M12 5.5v13m-6.5-6.5h13`})),rn=$((0,Q.jsx)(`path`,{d:`M5.5 12h13`})),an=$((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`})),on=$((0,Q.jsxs)(Q.Fragment,{children:[(0,Q.jsx)(`rect`,{x:`5`,y:`10.5`,width:`14`,height:`10`,rx:`2.5`}),(0,Q.jsx)(`path`,{d:`M8.5 10.5V8a3.5 3.5 0 0 1 7 0v2.5`})]})),sn=$((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`})]})),cn=$((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`})),ln=$((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`})),un=$((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`})),dn=$((0,Q.jsx)(`path`,{d:`M8 19V5M3.5 9.5 8 5l4.5 4.5M16 5v14m4.5-4.5L16 19l-4.5-4.5`})),fn=`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`,pn=`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.`,mn=e=>`Read ${e}.md and join this Twombly canvas with me.`;function hn(){return(0,Q.jsxs)(`span`,{className:`landing-marks`,"aria-hidden":`true`,children:[(0,Q.jsx)(`svg`,{viewBox:`0 0 24 24`,fill:`currentColor`,children:(0,Q.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,Q.jsx)(`svg`,{viewBox:`0 0 24 24`,fill:`currentColor`,children:(0,Q.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 gn=`twombly:show-copied`;export{fe as $,nn as A,v as At,Ze as B,u as Bt,on as C,$e as Ct,Jt as D,O as Dt,rn as E,de as Et,Nt as F,ce as Ft,We as G,o as Gt,_t as H,te as Ht,Pt as I,x as It,Ie as J,Te as K,r as Kt,Mt as L,g as Lt,$t as M,oe as Mt,sn as N,ae as Nt,It as O,ue as Ot,Qt as P,y as Pt,Ne as Q,ft as R,c as Rt,an as S,Je as St,Wt as T,k as Tt,Ot as U,re as Ut,Et as V,l as Vt,kt as W,s as Wt,Ee as X,X as Y,Qe as Z,Ht as _,R as _t,en as a,gt as at,cn as b,At as bt,Kt as c,M as ct,qt as d,pt as dt,He as et,un as f,Fe as ft,Lt as g,Dt as gt,ln as h,H as ht,mn as i,he as it,dn as j,S as jt,Rt as k,b as kt,Bt as l,J as lt,tn as m,L as mt,gn as n,Ve as nt,fn as o,Re as ot,Vt as p,ye as pt,V as q,pn as r,pe as rt,Ft as s,st,hn as t,ke as tt,zt as u,ot as ut,Xt as v,lt as vt,Ut as w,at as wt,Gt as x,Le as xt,Zt as y,ct as yt,ve as z,d as zt};
|
|
@@ -1,111 +0,0 @@
|
|
|
1
|
-
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/LandingStage-PXUGvPUq.js","assets/rolldown-runtime-WkwZ5CU-.js","assets/CopyMarks-D-0Rp6ax.js","assets/index-DEhmNTRu.js","assets/index-ByqIlLL0.css","assets/LandingStage-BcivO6Eh.css"])))=>i.map(i=>d[i]);
|
|
2
|
-
import{n as e}from"./rolldown-runtime-WkwZ5CU-.js";import{i as t,n,r,t as i}from"./index-DEhmNTRu.js";import{A as a,Dt as o,E as s,F as c,Gt as l,Kt as u,L as d,O as f,Ot as p,g as m,j as h,k as g,l as _,n as ee,p as v,r as y,s as b,t as x,u as S}from"./CopyMarks-D-0Rp6ax.js";var C=e(u(),1),w=.41960295031576633,T=.15,E=.2765523188064277,te=.5783555327868779,D=-44*Math.PI/180,O={x:Math.sin(D),y:-Math.cos(D)},k=(e,t=0,n=1)=>Math.min(n,Math.max(t,e)),A=(e,t,n)=>({x:e.x+t.x*n,y:e.y+t.y*n}),j=e=>Math.hypot(e.x,e.y),M=e=>{let t=j(e);return t<.001?{x:1,y:0}:{x:e.x/t,y:e.y/t}},N=(e,t,n,r)=>({start:e,outgoing:t,incoming:n,end:r});function P(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 F(e,t){let n=k(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=M(s),l=1-(1-k((n-.99)/.01))**3,u=M({x:c.x*(1-l)+O.x*l,y:c.y*(1-l)+O.y*l});return{point:P(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=P(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=j(r),a=M(r),o=[];if(i<=10)o.push([N(e,A(e,r,1/3),A(e,r,2/3),t)]);else{let n=Math.min(i*w,i*.9,640),r=Math.min(i*T,i*.9,640),s=A(e,O,n),c=A(t,O,-r);o.push([N(e,s,c,t)]),o.push([N(e,A(e,O,n*.65),A(t,O,-r*.65),t)]);let l=O.x*a.y-O.y*a.x<0?-1:1,u={x:a.y*l,y:-a.x*l},d=A({x:(e.x+t.x)/2,y:(e.y+t.y)/2},O,n*.16),f=Math.min(i*E,520),p=Math.min(i*te,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=A(d,u,f*n*i);o.push([N(e,s,A(l,a,-p*r),l),N(l,A(l,a,p*r),c,t)])}}let s=k((-.08-O.x*a.x-O.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=k(.42*k(r/.55)+.38*k(t.totalTurn/(1.4*Math.PI))+.2*k(t.turnEnergy/1.25))*.12,l=k((a?.9:1)*.9*((a?.04:0)+.28*s+.22*k((t.length-180)/760)+.42+c),.12,2.2);return{curves:e,...t,score:o,response:l}})}function R(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 z=(e=0)=>({value:e,velocity:0}),ne=Math.atan2(O.y,O.x)*180/Math.PI,re=1600;function B(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 V(e,t){return e+Math.atan2(Math.sin((t-e)*Math.PI/180),Math.cos((t-e)*Math.PI/180))*180/Math.PI}var ie=class{position;velocity={x:0,y:0};kind=`idle`;target;path;pathScale=1;progress=z();horizontal;vertical;axis=z();baseRotation=z();lean=z();stretch=z();heading=0;constructor(e){this.position={...e},this.target={...e},this.horizontal=z(e.x),this.vertical=z(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=R(i(this.position),i(e),{x:-t.x,y:-t.y,width:t.width,height:t.height});let{derivative:a}=F(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:k(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=z(e.x),this.vertical=z(e.y),this.axis=z(),this.baseRotation=z(),this.lean=z(),this.stretch=z(),this.progress=z(),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`)B(this.horizontal,this.target.x,.24,.84,e),B(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){B(this.progress,1,this.path.response,.9,e);let{point:t,derivative:n,heading:r}=F(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=V(this.heading,Math.atan2(r.y,r.x)*180/Math.PI-ne)}let n=Math.hypot(this.velocity.x,this.velocity.y)*t,r=this.kind===`scoot`?k(n/re):0,i=n>12?Math.atan2(this.velocity.y,this.velocity.x)*180/Math.PI:this.axis.value;B(this.axis,V(this.axis.value,i),.07,.82,e),B(this.baseRotation,this.kind===`curve`?this.heading:V(this.baseRotation.value,0),.09,.86,e),B(this.stretch,r,.095,.72,e);let a=n>12?k(this.velocity.x*t/n*76*r,-76,76):0;return B(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=z(),this.lean=z(),this.stretch=z()),!0}deformationSettled(){let e=V(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=k(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)`}},H=d(),ae={wide:{width:1280,height:720,columns:3},narrow:{width:640,height:760,columns:2}},U=440,W=340,G={top:84,right:64,bottom:64,left:64},K=[1,2,3,4,5,6],q=[{name:`Avery Kim`,color:`#3b82f6`},{name:`Mo Rivera`,color:`#10b981`},{name:`Jules Sato`,color:`#f59e0b`}],oe=[[`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`]],se=`#e5484d`,ce=5,le=p(.45,.28),ue=p(1.1,0),de=p(.3,0),J=(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,H.jsxs)(`div`,{className:`ld-design`,"data-v":e,children:[(0,H.jsx)(`h1`,{children:`Notifications`}),oe.slice(0,t).map(([e,t,n,r,i])=>(0,H.jsxs)(`div`,{className:`ld-n`,children:[(0,H.jsx)(`span`,{className:`ld-av`,style:{background:t},children:e}),(0,H.jsxs)(`div`,{children:[(0,H.jsx)(`div`,{className:`ld-t`,children:n}),(0,H.jsx)(`div`,{className:`ld-d`,children:r})]}),(0,H.jsx)(`span`,{className:`ld-w`,children:i})]},n))]})}function Y({color:e,name:t,id:n}){return(0,H.jsxs)(`div`,{className:`cursor ld-cursor`,"data-cursor":n,style:{color:e},children:[(0,H.jsx)(`svg`,{width:`22`,height:`22`,viewBox:`0 0 24 24`,children:(0,H.jsx)(`path`,{d:b,fill:`currentColor`,stroke:`#fff`,strokeWidth:`1.5`,strokeLinejoin:`round`})}),t&&(0,H.jsx)(`span`,{className:`cursor-label`,style:{background:e},children:t})]})}function me({id:e,person:t,text:n}){let{name:r,color:i}=q[t];return(0,H.jsxs)(`div`,{className:`comment-pin ld-pin`,"data-pin":e,children:[(0,H.jsx)(c,{name:r,picture:null,color:i}),(0,H.jsxs)(`span`,{className:`comment-pin-preview`,children:[(0,H.jsxs)(`span`,{className:`comment-pin-head`,children:[(0,H.jsx)(`b`,{children:r}),` `,(0,H.jsx)(`span`,{className:`muted`,children:`now`})]}),(0,H.jsx)(`span`,{className:`comment-pin-text`,children:n})]})]})}function he(e,t){let n=ae[t],i=t=>e.querySelector(t),a=i(`.ld-world`),o=i(`[data-zoom]`),s=i(`.ld-scene`),c=i(`.faces`),l=i(`.share-button`),u=i(`.share-sharing`),d=i(`.share-sharing i`),f=i(`.share-split`),m=i(`.ld-strokes path`),h=[...e.querySelectorAll(`.ld-frame`)],g=[...c.children],_={a:i(`[data-pin="a"]`),b:i(`[data-pin="b"]`)},ee={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),te={x:0,y:0,z:1},D=e=>{te=e,a.style.transform=`translate(${e.x}px, ${e.y}px) scale(${e.z})`,a.style.setProperty(`--inv`,String(1/e.z)),a.style.setProperty(`--zoom`,String(e.z)),o.textContent=`${Math.round(e.z*100)}%`},O=e=>{let t=K.slice(0,e).map((e,t)=>J(t,n.columns)),r=Math.max(...t.map(e=>e.x))+U,i=Math.max(...t.map(e=>e.y))+W,a={width:n.width-G.left-G.right,height:n.height-G.top-G.bottom},o=Math.min(1,a.width/r,a.height/i);return{z:o,x:G.left+(a.width-r*o)/2,y:G.top+(a.height-i*o)/2}},k=e=>{let t=te;return T(ue,n=>D({x:t.x+(e.x-t.x)*n,y:t.y+(e.y-t.y)*n,z:t.z+(e.z-t.z)*n}))},A=(e,t,r,i=O(K.length))=>{let a=J(e-1,n.columns);return{x:i.x+(a.x+U*t)*i.z,y:i.y+(a.y+W*r)*i.z}},j=e=>{let t=i(`[data-cursor="${e}"]`),n=t.querySelector(`svg`),r=new ie({x:0,y:0}),a=()=>{t.style.transform=`translate3d(${r.position.x}px, ${r.position.y}px, 0)`,n.style.transform=r.bodyTransform};return v.add(e=>(r.advance(e/1e3,1),a(),!0)),{el:t,place(e){r.jumpTo(e),t.style.opacity=`1`,a()},hide(){t.style.opacity=`0`},move(e){return r.moveTo(e,ee),new Promise(e=>v.add(()=>r.kind!==`idle`||(e(),!1)))}}},M=j(`you`),N=[j(`0`),j(`1`),j(`2`)],P=e=>T(le,t=>{e.style.opacity=String(Math.min(1,t*1.6)),e.style.scale=String(.6+.4*t)}),F=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=>(c.style.display=``,e.style.display=``,P(e)),L=(e,t)=>{e.style.left=`${t.x}px`,e.style.top=`${t.y}px`},R=()=>{let e=A(3,.5,.5),t=O(K.length),n=U*t.z*.56,r=W*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]})},z=()=>{for(let e of h)e.style.opacity=`0`,e.style.scale=`0.6`;for(let e of g)e.style.opacity=`0`,e.style.scale=`0.6`,e.style.display=`none`;c.style.display=`none`;for(let e of Object.values(_))e.style.opacity=`0`,e.style.scale=`0.6`,e.classList.remove(`expanded`);for(let e of[M,...N])e.hide();l.style.display=``,u.style.display=`none`,f.style.display=`none`,m.setAttribute(`d`,``),s.style.opacity=`1`,c.style.opacity=`1`,D(O(1))},ne=()=>{for(let e of[...h,...g,...Object.values(_)])e.style.opacity=`1`,e.style.scale=`1`;for(let e of g)e.style.display=``;c.style.display=``,L(_.a,A(2,.72,.34)),L(_.b,A(5,.3,.36)),_.b.classList.add(`expanded`),D(O(K.length)),m.setAttribute(`d`,r({points:R(),size:ce})),N[0].place(A(2,.34,.8)),N[1].place(A(5,.86,.7)),N[2].place(A(3,.92,.9))},re=async()=>{let t=1500;for(;;){z(),await w(t),t=500;for(let e=0;e<h.length;e++)P(h[e]),e&&k(O(e+1)),await w(e?720:1e3);await w(700),M.place({x:n.width*.74,y:n.height+30});let i=e.getBoundingClientRect(),a=i.width/n.width;await M.move((e=>{let t=e.getBoundingClientRect();return{x:(t.left+t.width/2-i.left)/a,y:(t.top+t.height/2-i.top)/a}})(l)),await F(l),l.style.display=`none`,u.style.display=``,d.style.width=`6%`,await T(p(1,0),e=>{d.style.width=`${6+94*e}%`}),u.style.display=`none`,f.style.display=``,f.dataset.copied=``,M.move(A(1,.8,1.08)),await w(1e3),delete f.dataset.copied,N[0].place({x:-30,y:n.height*.42}),I(g[2]),await N[0].move(A(2,.72,.34)),N[1].place({x:n.width*.3,y:n.height+30}),I(g[1]),L(_.a,A(2,.72,.34)),P(_.a),N[0].move(A(2,.34,.8)),await N[1].move(A(5,.3,.36)),L(_.b,A(5,.3,.36)),await P(_.b),await w(250),_.b.classList.add(`expanded`),N[1].move(A(5,.86,.7));let o=R();N[2].place({x:n.width+30,y:n.height*.3}),I(g[0]),await N[2].move({x:o[0][0],y:o[0][1]}),await E(1500,e=>{let t=Math.max(2,Math.ceil(e*o.length));m.setAttribute(`d`,r({points:o.slice(0,t),size:ce}));let[n,i]=o[t-1];N[2].place({x:n,y:i})}),await w(400),N[2].move(A(3,.92,.9)),await w(1400),N[0].move(A(1,.5,.42)),await w(1100),N[1].move(A(4,.72,.62)),await w(2200),await E(420,e=>{s.style.opacity=String(1-e),c.style.opacity=String(1-e)}),await T(de,()=>{})}};if(matchMedia(`(prefers-reduced-motion: reduce)`).matches)return z(),ne(),()=>{};re();let B=new IntersectionObserver(([e])=>C(e.isIntersecting));return B.observe(e),()=>{B.disconnect(),C(!1),v.clear()}}function ge(){let e=(0,C.useRef)(null),t=(0,C.useRef)(null),[n,r]=(0,C.useState)(0),i=n&&n<720?`narrow`:`wide`,o=ae[i];(0,C.useLayoutEffect)(()=>{let t=new ResizeObserver(([e])=>r(e.contentRect.width));return t.observe(e.current),()=>t.disconnect()},[]),(0,C.useEffect)(()=>{if(n)return he(t.current,i)},[i,n>0]);let l=n/o.width,u=25*l,[d]=(0,C.useState)(()=>window.innerWidth*1.15/Math.min(1200,window.innerWidth-32)),p=(0,C.useMemo)(()=>K.map((e,t)=>J(t,o.columns)),[o.columns]);return(0,H.jsxs)(`div`,{ref:e,className:`ld-shell`,style:{height:n?o.height*l:void 0,borderRadius:u,"--ld-from":d},"aria-hidden":`true`,children:[n>0&&(0,H.jsx)(`svg`,{className:`ld-draw`,children:(0,H.jsx)(`path`,{d:fe(n,o.height*l,u-.5),pathLength:`1`})}),n>0&&(0,H.jsxs)(`div`,{ref:t,className:`ld-stage ld-${i}`,style:{width:o.width,height:o.height,transform:`scale(${l})`},children:[(0,H.jsxs)(`div`,{className:`ld-scene`,children:[(0,H.jsx)(`div`,{className:`world ld-world`,children:K.map((e,t)=>(0,H.jsxs)(`div`,{className:`frame ld-frame`,style:{left:p[t].x,top:p[t].y,width:U,height:W},children:[(0,H.jsx)(`div`,{className:`frame-title`,children:(0,H.jsxs)(`span`,{children:[`V`,e]})}),(0,H.jsx)(`div`,{className:`frame-surface`,children:(0,H.jsx)(pe,{version:e})})]},e))}),(0,H.jsx)(`svg`,{className:`ld-strokes`,width:o.width,height:o.height,children:(0,H.jsx)(`path`,{fill:se})}),(0,H.jsx)(me,{id:`a`,person:0,text:``}),(0,H.jsx)(me,{id:`b`,person:1,text:`Can we try this one darker?`})]}),(0,H.jsx)(`div`,{className:`chrome shell top-left ld-rise`,children:(0,H.jsx)(`span`,{className:`canvas-name`,children:`Notification Explorations`})}),(0,H.jsx)(`div`,{className:`chrome shell toolbar ld-rise`,children:(0,H.jsx)(`div`,{className:`toolbar-clip`,children:(0,H.jsxs)(`div`,{className:`toolbar-row`,children:[(0,H.jsx)(`span`,{className:`tool-slider`,style:{width:50}}),(0,H.jsx)(`span`,{className:`tool`,"aria-pressed":`true`,children:(0,H.jsx)(f,{size:18})}),(0,H.jsx)(`span`,{className:`tool`,children:(0,H.jsx)(m,{size:18})}),(0,H.jsx)(`span`,{className:`tool`,children:(0,H.jsx)(v,{size:18})}),(0,H.jsx)(`span`,{className:`shell-divider`}),(0,H.jsx)(`span`,{className:`tool`,children:(0,H.jsx)(g,{size:18})})]})})}),(0,H.jsxs)(`div`,{className:`chrome shell top-right ld-rise`,children:[(0,H.jsx)(`div`,{className:`faces`,children:[2,1,0].map(e=>(0,H.jsx)(`span`,{className:`face-button`,children:(0,H.jsx)(c,{name:q[e].name,picture:null,color:q[e].color})},e))}),(0,H.jsx)(`span`,{className:`primary-button share-button`,children:`Share`}),(0,H.jsxs)(`span`,{className:`primary-button share-sharing`,style:{display:`none`},children:[(0,H.jsx)(`i`,{}),(0,H.jsx)(`span`,{children:`Share`})]}),(0,H.jsxs)(`span`,{className:`share-split`,style:{display:`none`},children:[(0,H.jsxs)(`span`,{className:`primary-button`,children:[(0,H.jsxs)(`span`,{className:`ld-copied`,children:[(0,H.jsx)(_,{size:14}),`Copied`]}),(0,H.jsx)(`span`,{className:`ld-copy`,children:`Copy link`})]}),(0,H.jsx)(`span`,{className:`primary-button`,children:(0,H.jsx)(S,{size:14})})]})]}),(0,H.jsxs)(`div`,{className:`chrome shell zoom ld-rise`,children:[(0,H.jsx)(`span`,{className:`icon-button`,children:(0,H.jsx)(h,{})}),(0,H.jsx)(`span`,{className:`shell-divider`}),(0,H.jsx)(`span`,{className:`icon-button`,children:(0,H.jsx)(s,{})}),(0,H.jsx)(`span`,{className:`zoom-value`,"data-zoom":!0,children:`100%`}),(0,H.jsx)(`span`,{className:`icon-button`,children:(0,H.jsx)(a,{})})]}),(0,H.jsxs)(`div`,{className:`ld-cursors`,children:[(0,H.jsx)(Y,{id:`0`,color:q[0].color,name:q[0].name}),(0,H.jsx)(Y,{id:`1`,color:q[1].color,name:q[1].name}),(0,H.jsx)(Y,{id:`2`,color:q[2].color,name:q[2].name}),(0,H.jsx)(Y,{id:`you`,color:`#000`})]})]},i)]})}var X={ms:800,ease:[.45,0,.55,1]},_e=o(...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,C.useState)(Se);return(0,C.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
|
|
3
|
-
in vec2 a;
|
|
4
|
-
void main() { gl_Position = vec4(a, 0., 1.); }`,De=`#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 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,C.useRef)(null),r=(0,C.useRef)(e),i=(0,C.useRef)(e),a=(0,C.useRef)(null),o=(0,C.useRef)(null);return(0,C.useEffect)(()=>{a.current=t?{from:i.current,at:performance.now()}:null,r.current=e,o.current?.()},[e]),(0,C.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,H.jsx)(`canvas`,{ref:n,className:`window-light`,"aria-hidden":`true`})}var je=new URLSearchParams(location.search).get(`hero`)!==`1`,Me=(0,C.lazy)(()=>i(()=>import(`./LandingStage-PXUGvPUq.js`),__vite__mapDeps([0,1,2,3,4,5]))),Ne={a:[[`A`,`canvas`,`for`,`your`],[`agent’s`,`explorations`]],b:[[`A`,`shareable`,`canvas`],[`for`,`your`,`agent`]],c:[[`Bring`,`your`,`team`,`into`],[`your`,`agent’s`,`work`]],d:[[`Agents`,`shouldn’t`,`mean`],[`designing`,`alone`]]},Pe=e=>typeof e==`string`&&e in Ne,Fe=new URLSearchParams(location.search).get(`headline`),Ie=`a`,Le=p(.8,0),Re=p(1.1,0),ze=.1,Be=3,Ve=.14,Q=8,He=500,$=32,Ue=1500,We=(()=>{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)}`})(),Ge=(e,t={})=>l(`/api/events`,{event:e,visit:We,headline:Ie,...t});function Ke(){let e=(0,C.useRef)(null),t=(0,C.useRef)(null);return(0,C.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)*Ve,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(${He}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*ze,Be),n[1]=c(o*ze,Be),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 qe(){let[e,t]=(0,C.useState)(!1),n=(0,C.useRef)(0);(0,C.useEffect)(()=>()=>window.clearTimeout(n.current),[]);let r=()=>{t(!0),window.clearTimeout(n.current),n.current=window.setTimeout(()=>t(!1),Ue)};return[e,e=>{navigator.clipboard?.writeText(e).then(()=>{Ge(`prompt_copied`),r()}).catch(()=>{})},r]}function Je(){let[e,t,n]=qe(),[r,i]=Ke();return(0,C.useEffect)(()=>(window.addEventListener(ee,n),()=>window.removeEventListener(ee,n)),[]),(0,H.jsx)(`span`,{ref:r,className:`landing-magnet`,children:(0,H.jsx)(`div`,{ref:i,className:`landing-cta`,children:(0,H.jsxs)(`button`,{type:`button`,className:`landing-button`,"data-copied":e||void 0,onClick:()=>t(y),children:[(0,H.jsxs)(`span`,{className:`landing-states`,children:[(0,H.jsxs)(`span`,{className:`landing-state`,children:[(0,H.jsx)(x,{}),(0,H.jsx)(`span`,{className:`landing-label`,children:`Copy agent prompt`})]}),(0,H.jsxs)(`span`,{className:`landing-state`,"aria-hidden":`true`,children:[(0,H.jsx)(`svg`,{className:`landing-check`,viewBox:`0 0 18 18`,children:(0,H.jsx)(`path`,{d:`M3.5 9.5 7.25 13.25 14.5 5`,pathLength:`1`})}),(0,H.jsx)(`span`,{className:`landing-done`,children:`Copied`})]})]}),(0,H.jsx)(`span`,{className:`landing-sr`,"aria-live":`polite`,children:e?`Copied`:``})]})})})}function Ye(){let e=0;return(0,H.jsx)(`h1`,{className:`landing-title`,children:Ne[Ie].map((t,n)=>(0,H.jsxs)(C.Fragment,{children:[n>0&&(0,H.jsx)(`br`,{}),t.map((t,n)=>(0,H.jsxs)(C.Fragment,{children:[(0,H.jsx)(`span`,{className:`landing-word`,style:{"--delay":`${100+e++*80}ms`},children:t}),` `]},n))]},n))})}function Xe({headline:e}){Ie=Pe(Fe)?Fe:Pe(e)?e:`a`,(0,C.useEffect)(()=>{Ge(`landing_viewed`,{url:location.href,referrer:document.referrer})},[]);let r=Ce(),[i,a]=(0,C.useState)(null),[o,s]=(0,C.useState)(!1),c=(e,t=!1)=>{a(e),s(t)},l=i??r,{lit:u,shade:d,dark:f}=we(l),[p,m]=(0,C.useState)(!1),h=(0,C.useRef)(f);return(0,C.useEffect)(()=>{if(h.current===f)return;h.current=f,m(!0);let e=window.setTimeout(()=>m(!1),X.ms);return()=>window.clearTimeout(e)},[f]),(0,C.useEffect)(()=>{document.body.style.background=u,document.body.style.colorScheme=f?`dark`:`light`},[u,f]),(0,H.jsxs)(`div`,{className:`landing`,"data-dark":f||void 0,"data-shifting":p||void 0,"data-glide":o||void 0,style:{"--lit":u,"--shade":d,"--shift-ms":`${X.ms}ms`,"--shift-ease":`cubic-bezier(${X.ease.join(`, `)})`,"--word-ease":Le.css,"--word-ms":`${Le.ms}ms`,"--rise-ease":Re.css,"--rise-ms":`${Re.ms}ms`},children:[(0,H.jsx)(Ae,{hour:l,glide:o}),(0,H.jsxs)(`nav`,{className:`landing-nav`,"aria-label":`Main`,children:[(0,H.jsx)(`a`,{className:`wordmark`,href:`/`,children:(0,H.jsx)(n,{})}),(0,H.jsxs)(`div`,{className:`landing-nav-end`,children:[(0,H.jsx)(t,{hour:l,onHour:c}),(0,H.jsx)(`a`,{className:`landing-sign-in`,href:`/auth/google/start?next=/`,onClick:()=>Ge(`sign_in_clicked`),children:`Sign in`})]})]}),(0,H.jsxs)(`main`,{className:`landing-hero`,children:[(0,H.jsx)(Ye,{}),(0,H.jsx)(`p`,{className:`landing-body`,children:`Get feedback, huddle, and iterate with your team on a canvas beside your agent.`}),(0,H.jsx)(`div`,{className:`landing-actions`,children:(0,H.jsx)(Je,{})}),je?(0,H.jsx)(`div`,{className:`landing-slot`,children:(0,H.jsx)(C.Suspense,{fallback:null,children:(0,H.jsx)(Me,{dark:f})})}):(0,H.jsx)(ge,{})]}),(0,H.jsxs)(`footer`,{className:`landing-foot`,children:[(0,H.jsxs)(`span`,{children:[`© Materic, Inc. `,new Date().getFullYear()]}),(0,H.jsxs)(`nav`,{children:[(0,H.jsx)(`a`,{href:`/privacy`,children:`Privacy`}),(0,H.jsx)(`a`,{href:`/terms`,children:`Terms`})]})]})]})}export{Xe as Landing};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--canvas:oklch(97% 0 0);--surface:oklch(100% 0 0);--surface-2:oklch(95.5% 0 0);--surface-hover:oklch(0% 0 0/.05);--surface-pressed:oklch(0% 0 0/.09);--solid:oklch(0% 0 0);--on-solid:oklch(100% 0 0);--island:oklch(0% 0 0);--island-line:transparent;--island-hover:oklch(100% 0 0/.11);--text:oklch(0% 0 0);--secondary:oklch(42% 0 0);--muted:oklch(53% 0 0);--line:oklch(0% 0 0/.09);--line-subtle:oklch(0% 0 0/.06);--icon-muted:.58;--icon-secondary:.72;--frame-bg:oklch(100% 0 0);--accent:#06f;--selection:#0066ff1f;--guide:#06f9;--signal:#06f;--signal-soft:#0066ff21;--signal-soft-hover:#06f3;--danger:oklch(56% .21 27);--danger-soft:oklch(96% .025 25);--live:oklch(50% .14 150);--live-soft:oklch(96% .03 150);--backdrop:oklch(0% 0 0/.24);--shadow:0 0 0 .5px var(--line), 0 4px 8px -2px oklch(0% 0 0/.1), 0 14px 32px -8px oklch(0% 0 0/.3);--shadow-sm:0 0 0 1px var(--line);--pill:999px;--radius-menu:18px;--font:-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif}:root[data-color-scheme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--canvas:oklch(17.8% 0 0);--surface:oklch(16% 0 0);--surface-2:oklch(22% 0 0);--surface-hover:oklch(100% 0 0/.07);--surface-pressed:oklch(100% 0 0/.11);--solid:oklch(100% 0 0);--on-solid:oklch(0% 0 0);--island-line:oklch(100% 0 0/.13);--text:oklch(98.5% 0 0);--secondary:oklch(80% 0 0);--muted:oklch(66% 0 0);--line:oklch(100% 0 0/.09);--line-subtle:oklch(100% 0 0/.06);--icon-muted:.6;--icon-secondary:.74;--accent:#06f;--selection:#0066ff2e;--guide:#0066ffa6;--signal:#06f;--signal-soft:#06f3;--signal-soft-hover:#0066ff47;--danger:oklch(72% .18 25);--danger-soft:oklch(28% .06 25);--live:oklch(80% .15 150);--live-soft:oklch(28% .05 150);--backdrop:oklch(0% 0 0/.6);--shadow:0 0 0 .5px var(--line), 0 4px 8px -2px oklch(0% 0 0/.3), 0 14px 32px -8px oklch(0% 0 0/.5)}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--canvas);color:var(--text);font:400 13px/18px var(--font);-webkit-font-smoothing:antialiased;overflow:hidden}button,input,textarea{font:inherit;color:inherit}button{cursor:default;background:0 0;border:0;padding:0}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}a{color:inherit}.muted{color:var(--muted)}.spacer{flex:1}.full-message{height:100%;color:var(--muted);place-items:center;display:grid}.private-message{text-align:center;justify-items:center;gap:12px;display:grid}.private-message h1{color:var(--text);margin:0;font-size:15px;font-weight:600}.private-message p{margin:0}.private-message .primary-button{align-items:center;height:36px;padding:0 16px;text-decoration:none;display:inline-flex}.stage{background:var(--canvas);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;position:fixed;inset:0;overflow:clip}.world{transform-origin:0 0;--inv:1;--zoom:1;width:0;height:0;position:absolute;top:0;left:0}.world[data-moving]{will-change:transform}.empty-canvas{color:var(--muted);pointer-events:none;place-items:center;display:grid;position:absolute;inset:0}.frame{transition:opacity .12s ease-out;position:absolute;top:0;left:0}.frame-surface{box-shadow:0 0 0 calc(1px * var(--inv)) var(--line);position:absolute;inset:0;overflow:hidden}.frame-surface:before{content:"";inset:calc(1px * var(--inv));background:var(--frame-bg);position:absolute}.frame iframe{border:0;width:100%;height:100%;display:block;position:absolute;inset:0}[data-dragging] .frame iframe{pointer-events:none!important}.world[data-moving]:not(:has(.frame.focused)) .frame iframe{pointer-events:none!important}.frame-poster{object-fit:cover;object-position:top left;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;width:100%;height:100%;position:absolute;inset:0}.frame-shield{cursor:var(--stage-cursor,default);position:absolute;inset:0}.stage:is([data-role=guest],[data-role=viewer])[data-tool=move] .frame-shield{cursor:pointer}.frame.selected .frame-surface,.frame.interacting .frame-surface{box-shadow:0 0 0 calc(1.5px * var(--inv)) var(--accent)}.frame-title{width:calc(100% * var(--zoom));height:26px;transform:scale(var(--inv));transform-origin:0 100%;color:var(--muted);white-space:nowrap;align-items:flex-end;padding-bottom:6px;font-size:12px;line-height:16px;display:flex;position:absolute;bottom:100%;left:0}.frame-title span{text-overflow:ellipsis;overflow:hidden}.frame.selected .frame-title,.frame.interacting .frame-title{color:var(--accent)}.frame-title input{border-radius:var(--pill);background:var(--surface-2);width:100%;max-width:280px;height:20px;color:var(--text);-webkit-user-select:text;user-select:text;border:0;outline:0;margin-left:-4px;padding:0 4px;font-size:12px}.frame-actions{z-index:1;transform:scale(var(--inv)) translate(var(--step-x,0), var(--step-y,0));transform-origin:100% 100%;opacity:0;pointer-events:none;padding-bottom:10px;transition:opacity .12s ease-out;display:flex;position:absolute;bottom:100%;right:0}.frame-actions[data-visible]{opacity:1;pointer-events:auto}.frame-actions:has(:focus-visible){opacity:1;pointer-events:auto}@media (hover:hover){.frame:hover>.frame-actions{opacity:1;pointer-events:auto}}.frame-focus{border-radius:var(--pill);background:var(--surface);width:28px;height:28px;box-shadow:var(--shadow-sm);color:var(--text);cursor:default;justify-content:center;align-items:center;transition:background-color .1s;display:flex}.frame-focus svg{opacity:var(--icon-muted);transition:opacity .1s}.frame-focus:hover{background:linear-gradient(var(--surface-hover) 0 0), var(--surface)}.frame-focus:hover svg{opacity:var(--icon-secondary)}.frame-focus:active{background:linear-gradient(var(--surface-pressed) 0 0), var(--surface)}.frame:hover>.frame-title,.frame.selected>.frame-title{padding-right:34px}.stage[data-tool=pencil] .frame:not(.focused) .frame-actions{display:none}.stage[data-focus] .frame:not(.focused){opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s ease-out,visibility 0s .12s}.stage[data-focus] .frame-surface{box-shadow:none}.frame-title{transition:opacity .12s ease-out}.stage[data-focus] .frame-title{opacity:0;pointer-events:none}.stage[data-returning] .frame,.stage[data-returning] .frame *{pointer-events:none!important}@media (prefers-reduced-motion:reduce){.frame,.stage[data-focus] .frame:not(.focused),.frame-actions{transition:none}}.guide{background:var(--guide);pointer-events:none;z-index:1000000;position:absolute}.marquee{background:var(--selection);box-shadow:0 0 0 calc(1px * var(--inv)) var(--accent);pointer-events:none;z-index:1000000;position:absolute}.cursors{pointer-events:none;z-index:40;position:absolute;inset:0;overflow:hidden}.cursor{will-change:transform;transition:opacity .18s ease-out;position:absolute;top:-4px;left:-3px}.cursor svg{filter:drop-shadow(0 1px 2px #00000040);display:block}.cursor-label{border-radius:var(--pill);color:#fff;white-space:nowrap;text-overflow:ellipsis;max-width:180px;padding:3px 7px;font-size:12px;font-weight:500;line-height:16px;position:absolute;top:18px;left:16px;overflow:hidden;box-shadow:0 1px 3px #0003}.chat-anchor{z-index:41;will-change:transform;position:fixed;top:0;left:0}.chat-bubble{color:#fff;white-space:pre;border-radius:4px 16px 16px;padding:7px 12px;font-size:13px;font-weight:500;line-height:18px;transition:opacity .3s ease-out;position:absolute;top:14px;left:13px;box-shadow:0 1px 3px #0003}.cursor .chat-bubble{animation:.12s ease-out chat-in;top:18px;left:16px}.chat-bubble.fading{opacity:0}.chat-anchor .chat-bubble.fading{opacity:1}.chat-anchor .chat-bubble.fading :is(.chat-line,.chat-previous){opacity:0;transition:opacity .3s ease-out}.chat-previous{opacity:.7}.chat-line{align-items:center;display:flex}.chat-caret{background:#fff;flex:none;width:1.5px;height:16px;margin-left:1px;animation:1s step-end infinite chat-caret}.chat-placeholder{color:#ffffffb3}@keyframes chat-caret{50%{opacity:0}}@keyframes chat-in{0%{opacity:0;transform-origin:0 0;transform:scale(.96)}}.follow-ring{pointer-events:none;z-index:60;position:fixed;inset:0}.follow-tab{border-radius:var(--pill);color:#fff;white-space:nowrap;z-index:61;align-items:center;gap:6px;height:28px;padding:0 10px;font-size:12px;font-weight:500;display:flex;position:fixed;top:50px;left:50%;transform:translate(-50%)}.face{color:#fff;border-radius:50%;flex:none;justify-content:center;align-items:center;font-weight:500;line-height:1;display:inline-flex;position:relative;overflow:hidden}.face img{object-fit:cover;width:100%;height:100%;display:block}.face.more{background:var(--surface-2);width:24px;height:24px;color:var(--text);font-size:10px}.faces{flex-direction:row-reverse;align-items:center;padding:0 6px 0 10px;display:flex}.face-button{box-shadow:0 0 0 2px var(--surface);border-radius:50%;margin-left:-6px;transition:transform .1s ease-out;position:relative}.face-button:hover{z-index:2;transform:translateY(-1px)}.face-button.following{box-shadow:0 0 0 2px var(--surface), 0 0 0 3.5px var(--peer);z-index:2}.face-button .face{display:flex}.chrome{z-index:50;-webkit-user-select:none;user-select:none;cursor:default}.shell{border-radius:var(--pill);background:var(--surface);height:38px;box-shadow:var(--shadow-sm);align-items:center;gap:2px;padding:3px;display:flex;position:fixed}:root[data-color-scheme=dark] .stage :is(.shell,.frame-focus){--surface:oklch(25% 0 0);box-shadow:none}.shell-divider{background:var(--line);flex:none;width:1px;height:20px;margin:0 4px}.top-left,.top-right,.toolbar{top:calc(6px + env(safe-area-inset-top))}.top-left{max-width:calc(50vw - 48px);left:6px}.top-right{right:6px}.wordmark{color:var(--text);flex:none;padding-right:2px;display:inline-flex}.wordmark svg{width:auto;height:14px;display:block}.canvas-name{border-radius:var(--pill);text-overflow:ellipsis;white-space:nowrap;min-width:0;height:32px;color:var(--muted);text-align:left;padding:0 8px;line-height:32px;transition:background-color .1s,color .1s;display:block;overflow:hidden}button.canvas-name:hover{background:var(--surface-hover);color:var(--text)}.canvas-name-field{border-radius:var(--pill);background:var(--surface-hover);flex:0 auto;grid-template-columns:minmax(0,max-content);min-width:48px;height:32px;display:inline-grid}.canvas-name-field:after{content:attr(data-value) " ";visibility:hidden;white-space:pre;grid-area:1/1;height:0;padding:0 8px;overflow:hidden}.canvas-name-input{-webkit-user-select:text;user-select:text;background:0 0;border:0;grid-area:1/1;width:0;min-width:100%;height:32px;padding:0 8px}.canvas-name-input:focus-visible,.frame-title input:focus-visible,.canvas-card-rename:focus-visible{outline:0}.canvas-name-input::selection{background:color-mix(in oklch, var(--accent) 32%, transparent)}.frame-title input::selection{background:color-mix(in oklch, var(--accent) 32%, transparent)}.canvas-card-rename::selection{background:color-mix(in oklch, var(--accent) 32%, transparent)}.primary-button{border-radius:var(--pill);background:var(--solid);height:32px;color:var(--on-solid);flex:none;justify-content:center;align-items:center;padding:0 12px;font-weight:500;transition:opacity .1s;display:inline-flex}.primary-button:hover{opacity:.85}.primary-button:disabled{opacity:.4}.sign-in{border-radius:var(--pill);height:32px;color:var(--secondary);align-items:center;padding:0 10px;font-weight:500;text-decoration:none;transition:background-color .1s;display:inline-flex}.sign-in:hover{background:var(--surface-hover)}.icon-button{border-radius:var(--pill);width:28px;height:28px;color:var(--text);flex:none;justify-content:center;align-items:center;transition:background-color .1s;display:inline-flex}.icon-button svg,.tool svg{opacity:var(--icon-muted);transition:opacity .1s}.icon-button:hover{background:var(--surface-hover)}.icon-button:hover svg,.tool:hover svg{opacity:var(--icon-secondary)}.icon-button:active:not(:disabled),.tool:active{background:var(--surface-pressed)}.icon-button:disabled{opacity:.4}.icon-button.small{border-radius:var(--pill);width:24px;height:24px}.icon-button.on,.icon-button.danger-text{background:0 0}.icon-button.on{color:var(--signal)}.icon-button.danger-text{color:var(--danger)}.icon-button.on svg,.icon-button.danger-text svg{opacity:1}.shell .icon-button{border-radius:var(--pill);width:32px;height:32px}.link-button{font-size:12px;font-weight:500;text-decoration:none}.link-button:hover{text-decoration:underline}.link-button.quiet{color:var(--muted)}.link-button.danger{color:var(--danger)}.toolbar{left:50%;transform:translate(-50%)}.tool{border-radius:var(--pill);width:32px;height:32px;color:var(--text);justify-content:center;align-items:center;transition:background-color .1s,color .1s;display:flex}.tool:hover{background:var(--surface-hover)}.tool.on,.shell .icon-button.on{background:var(--signal-soft);color:var(--signal)}.tool.on:hover,.shell .icon-button.on:hover{background:var(--signal-soft-hover)}.tool.on svg,.tool.on:hover svg{opacity:1}.zoom{right:6px;bottom:calc(6px + env(safe-area-inset-bottom))}.zoom-value{border-radius:var(--pill);min-width:44px;height:32px;color:var(--secondary);text-align:center;font-variant-numeric:tabular-nums;font-size:12px;transition:background-color .1s}.zoom-value:hover{background:var(--surface-hover)}.notice{border-radius:var(--pill);background:var(--island);color:#fff;height:32px;box-shadow:inset 0 0 0 1px var(--island-line);white-space:nowrap;align-items:center;gap:6px;max-width:min(560px,100vw - 24px);padding:0 12px;display:flex;position:fixed;bottom:12px;left:50%;transform:translate(-50%)}.notice span{text-overflow:ellipsis;overflow:hidden}.working-bubble{left:50%;bottom:calc(6px + env(safe-area-inset-bottom));color:var(--secondary);white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;gap:8px;padding:0 14px 0 12px;font-size:12px;transition:opacity .15s ease-out,transform .15s ease-out,visibility .15s;transform:translate(-50%)translateY(8px)scale(.97)}.working-bubble[data-show]{opacity:1;visibility:visible;transition:opacity .2s cubic-bezier(.22,1,.36,1),transform .2s cubic-bezier(.22,1,.36,1),visibility;transform:translate(-50%)}.working-scribble{flex:none}.working-scribble path{fill:none;stroke:var(--signal);stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1.2;animation:1.8s cubic-bezier(.65,0,.35,1) infinite paused scribble}.working-bubble[data-show] .working-scribble path{animation-play-state:running}@keyframes scribble{0%{stroke-dashoffset:1.1px}55%{stroke-dashoffset:0}to{stroke-dashoffset:-1.1px}}.reconnecting{border-radius:var(--pill);background:var(--surface);height:28px;box-shadow:var(--shadow-sm);color:var(--muted);padding:5px 10px;font-size:12px;position:fixed;top:50px;left:50%;transform:translate(-50%)}.share-group{align-items:center;gap:6px;display:flex;position:fixed}.share-group .shell{position:static}.share-group .shell:empty{display:none}.share-group .primary-button{height:38px}.share-split{flex:none;gap:1px;display:inline-flex}.share-split .primary-button:first-child{border-radius:var(--pill) 6px 6px var(--pill);gap:4px;min-width:84px;padding:0 10px 0 12px}.share-split .primary-button:not(:first-child){border-radius:6px var(--pill) var(--pill) 6px;width:28px;padding:0 3px 0 0}.share-sharing,.share-sharing:hover{background:var(--surface-2);color:var(--muted);opacity:1;position:relative;overflow:hidden}.share-sharing i{background:var(--surface-pressed);transition:width .2s ease-out;position:absolute;inset:0 auto 0 0}.share-sharing span{position:relative}.share-uploading,.share-uploading:hover{background:linear-gradient(var(--signal-soft) 0 0), var(--surface);min-width:120px;color:var(--signal);opacity:1;position:relative;overflow:hidden}.share-uploading i{background:var(--signal-soft-hover);transition:width .2s ease-out;position:absolute;inset:0 auto 0 0}.share-uploading span{position:relative}.share-note{max-width:240px;color:var(--muted);text-overflow:ellipsis;white-space:nowrap;padding:0 8px;font-size:12px;line-height:32px;overflow:hidden}.share-menu{width:212px}.share-menu .canvas-menu-item{padding:0 12px}.share-menu-link{color:oklch(100% 0 0/.6);text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:text;user-select:text;padding:6px 12px;font-size:12px;overflow:hidden}.share-backdrop{background:var(--backdrop);z-index:70;transition:opacity .16s ease-out;position:fixed;inset:0}.share-backdrop[data-starting-style],.share-backdrop[data-ending-style]{opacity:0}.share-dialog{z-index:71;background:var(--surface);width:420px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);box-shadow:var(--shadow);border-radius:22px;outline:0;flex-direction:column;gap:12px;padding:12px 16px;transition:opacity .16s ease-out,scale .24s cubic-bezier(.22,1,.36,1);display:flex;position:fixed;top:50%;left:50%;overflow:auto;translate:-50% -50%}.share-dialog[data-starting-style],.share-dialog[data-ending-style]{opacity:0;scale:.96}.share-header{justify-content:space-between;align-items:center;margin-right:-6px;display:flex}.share-title{margin:0;font-size:15px;font-weight:600;line-height:28px}.share-invite{position:relative}.share-invite-row{gap:6px;display:flex}.share-field{border-radius:var(--pill);background:var(--surface-2);flex:1;align-items:center;min-width:0;padding-right:4px;transition:box-shadow .1s;display:flex}.share-field:focus-within{box-shadow:inset 0 0 0 1.5px var(--accent)}.share-field .share-role{height:28px}.share-input{min-width:0;height:36px;color:var(--text);font:inherit;-webkit-user-select:text;user-select:text;background:0 0;border:0;outline:0;flex:1;padding:0 4px 0 14px}.share-input:focus-visible{outline:0}.share-input::placeholder{color:var(--muted)}.share-invite .primary-button{height:36px;padding:0 16px}.share-error{color:var(--danger);margin:6px 14px 0;font-size:12px}.share-suggestions{z-index:2;background:var(--surface);box-shadow:var(--shadow);border-radius:16px;margin:0;padding:4px;list-style:none;position:absolute;top:42px;left:0;right:0}.share-suggestion{cursor:default;border-radius:12px;align-items:center;gap:10px;height:44px;padding:0 8px;display:flex}.share-suggestion[aria-selected=true]{background:var(--surface-hover)}.share-people{flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.share-people[aria-busy=true]{min-height:48px}.share-person,.share-link{align-items:center;gap:10px;min-height:48px;display:flex}.share-person-text{flex-direction:column;flex:1;min-width:0;display:flex}.share-person-name,.share-person-email{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.share-person-email{color:var(--muted);font-size:12px;line-height:16px}.share-role{border-radius:var(--pill);height:28px;color:var(--muted);flex:none;align-items:center;gap:4px;padding:0 8px;display:inline-flex}.share-role-menu{padding-right:6px;transition:background-color .1s,color .1s}.share-role-menu:hover,.share-role-menu[data-popup-open]{background:var(--surface-hover);color:var(--text)}.share-access{border-radius:var(--pill);height:22px;color:var(--text);align-self:flex-start;align-items:center;gap:4px;margin-left:-6px;padding:0 6px;transition:background-color .1s;display:inline-flex}.share-access:hover,.share-access[data-popup-open]{background:var(--surface-hover)}.share-access+.share-person-email{margin-top:-1px}.share-layer{position:absolute}.share-menu-positioner{z-index:72}.share-menu-popup{background:var(--surface);min-width:148px;box-shadow:var(--shadow);transform-origin:var(--transform-origin);border-radius:14px;outline:0;padding:4px;transition:opacity .1s,transform .16s cubic-bezier(.22,1,.36,1)}.share-menu-popup[data-starting-style],.share-menu-popup[data-ending-style]{opacity:0;transform:scale(.96)}.share-menu-item{height:30px;color:var(--text);white-space:nowrap;cursor:default;-webkit-user-select:none;user-select:none;border-radius:10px;outline:0;align-items:center;gap:6px;padding:0 10px 0 8px;display:flex}.share-menu-item[data-disabled]{color:var(--text)}.share-menu-item[data-highlighted]{background:var(--surface-hover)}.share-menu-item.danger,.share-menu-item.indent{padding-left:28px}.share-menu-item.danger{color:var(--danger)}.share-menu-item.danger[data-highlighted]{background:var(--danger-soft)}.share-menu-separator{background:var(--line-subtle);height:1px;margin:4px 6px}.share-link{border-top:1px solid var(--line-subtle)}.share-link-icon{border-radius:var(--pill);background:var(--surface-2);flex:none;place-items:center;width:28px;height:28px;display:grid}.share-copy{border-radius:var(--pill);background:var(--surface-2);min-width:88px;height:32px;color:var(--text);flex:none;justify-content:center;align-items:center;gap:4px;padding:0 12px;font-weight:500;transition:background-color .1s;display:inline-flex}.share-copy:hover{background:var(--surface-pressed)}.agent-button{border-radius:var(--pill);background:var(--solid);height:40px;color:var(--on-solid);justify-content:center;align-items:center;padding:0 16px;font-weight:500;transition:background-color .2s ease-out,color .2s ease-out;display:inline-flex}.agent-button[data-copied]{background:var(--accent);color:#fff}.agent-button[style] .landing-states{width:var(--rest);grid-template-columns:minmax(0,1fr);transition:width .38s cubic-bezier(.34,1.3,.64,1) 60ms}.agent-button[data-copied][style] .landing-states{width:var(--done);transition-delay:40ms}@media (prefers-reduced-motion:reduce){.agent-button[style] .landing-states{transition:none}}.agent-corner{left:6px;bottom:calc(6px + env(safe-area-inset-bottom));position:fixed}.agent-button-compact{background:var(--surface);height:38px;color:var(--text);box-shadow:var(--shadow-sm);padding:0 14px}.agent-button-compact .landing-state{gap:8px}@media (width<=640px){.agent-corner{display:none}}.modal-backdrop{background:var(--backdrop);z-index:70;place-items:center;display:grid;position:fixed;inset:0}.name-prompt{border-radius:var(--radius-menu);background:var(--surface);width:320px;max-width:calc(100vw - 32px);box-shadow:var(--shadow);gap:6px;padding:8px;display:flex}.name-prompt input{border-radius:var(--pill);background:var(--surface-2);-webkit-user-select:text;user-select:text;border:0;flex:1;min-width:0;height:32px;padding:0 10px}.name-prompt .primary-button{border-radius:var(--pill)}.huddle-faces{align-items:center;display:inline-flex}.huddle-bar{align-items:center;gap:2px;padding-left:7px;display:inline-flex}.huddle-bar .huddle-faces{padding-right:5px}.huddle-face{--level:0;box-shadow:0 0 0 2px var(--surface), 0 0 0 calc(2px + var(--level) * 2px) color-mix(in oklab, var(--live) calc(min(1, var(--level) * 10) * 100%), transparent);border-radius:50%;margin-left:-5px;transition:box-shadow .1s ease-out;display:inline-flex;position:relative}.huddle-faces .huddle-face:first-child{margin-left:0}.huddle-face.muted{box-shadow:0 0 0 2px var(--surface)}.huddle-face.muted:after{content:"";width:12px;height:12px;box-shadow:0 0 0 1.5px var(--surface);background:var(--danger) no-repeat center / 8px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M3 3l18 18'/%3E%3Cpath d='M8 8v3.5a4 4 0 0 0 6.5 3.1M16 11.5V6.5a4 4 0 0 0-7.6-1.7'/%3E%3C/svg%3E");border-radius:50%;position:absolute;bottom:-3px;right:-3px}.huddle-bar.joining .huddle-face{opacity:.55}.shell .huddle-leave,.shell .huddle-leave:hover{background:var(--danger-soft);color:var(--danger)}.huddle-leave svg,.huddle-leave:hover svg{opacity:1}.huddle-button.live{border-radius:var(--pill);height:32px;color:var(--live);align-items:center;gap:6px;padding:0 6px 0 8px;transition:background-color .1s;display:inline-flex}.huddle-button.live:hover{background:var(--surface-hover)}.huddle-button.live .huddle-faces .face{box-shadow:0 0 0 2px var(--surface);margin-left:-5px}.huddle-button.live .huddle-faces .face:first-child{margin-left:0}.huddle-notice{white-space:nowrap;align-items:center;gap:8px;height:32px;padding:0 0 0 6px;display:inline-flex}.huddle-notice b{font-weight:500}.huddle-notice .join{border-radius:var(--pill);background:var(--live-soft);height:32px;color:var(--live);align-items:center;padding:0 10px;font-weight:500;display:inline-flex}.huddle-error{height:32px;color:var(--muted);white-space:nowrap;align-items:center;padding:0 8px;display:inline-flex}.comments-layer{pointer-events:none;z-index:30;position:absolute;inset:0;overflow:hidden}.comments-layer>*{pointer-events:auto}.comment-pin{background:var(--surface);width:32px;max-width:32px;height:32px;max-height:32px;box-shadow:var(--shadow);text-align:left;touch-action:none;border-radius:16px 16px 16px 0;align-items:flex-start;gap:8px;padding:4px;transition:max-width .1s ease-in-out,max-height .1s ease-in-out,padding .1s ease-in-out;display:flex;position:absolute;overflow:hidden;transform:translateY(-100%)}.comment-pin.new{background:var(--accent)}.comment-pin.active,.comment-pin.unread{box-shadow:0 0 0 2px var(--accent), var(--shadow)}.comment-pin.resolved .face{opacity:.45}.comment-pin-preview{opacity:0;flex-direction:column;gap:0;min-width:0;font-size:11px;line-height:16px;transition:opacity .1s ease-in-out;display:flex}.comment-pin-preview b{font-weight:500}.comment-pin-head{white-space:nowrap}.comment-pin-text{-webkit-line-clamp:2;word-break:break-word;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.comment-pin.expanded{z-index:5;width:240px;max-width:240px;height:auto;max-height:112px;padding:12px}.comment-pin.expanded .face{width:26px!important;height:26px!important}.comment-pin.expanded .comment-pin-preview{opacity:1;flex:1}.composer{background:var(--surface);box-shadow:0 0 0 1px var(--accent), var(--shadow);-webkit-user-select:text;user-select:text;cursor:auto;border-radius:13px;flex-direction:column;display:flex;position:absolute}.composer-input{align-items:flex-start;gap:8px;padding:8px 16px;display:flex}.composer-input textarea{flex:1;min-width:0}.composer textarea,.thread-reply textarea{resize:none;padding:0;-webkit-user-select:text;user-select:text;background:0 0;border:0;outline:0;width:100%;padding-block:calc(12px - .675em);font-size:13px;line-height:1.35;display:block;overflow-y:auto}.composer textarea::placeholder,.thread-reply textarea::placeholder{color:var(--muted)}.composer-actions{border-top:1px solid var(--line);align-items:center;height:40px;padding:4px 8px;display:none}.composer.has-text .composer-actions{display:flex}.composer:not(.has-text) .composer-input{padding-right:8px}.send-button{background:var(--solid);width:24px;height:24px;color:var(--on-solid);border-radius:50%;flex:none;justify-content:center;align-items:center;display:inline-flex}.send-button:disabled{background:var(--surface-2);color:var(--muted)}.emoji-wrap{display:inline-flex;position:relative}.emoji-menu{border-radius:var(--radius-menu);background:var(--surface);box-shadow:var(--shadow);z-index:5;grid-template-columns:repeat(6,28px);gap:2px;padding:4px;display:grid;position:absolute;top:calc(100% + 6px);left:0}.emoji-menu button{border-radius:var(--pill);width:28px;height:28px;font-size:16px}.emoji-menu button:hover{background:var(--surface-hover)}.comment-card{background:var(--surface);max-height:min(520px,100vh - 72px);box-shadow:var(--shadow);cursor:auto;border-radius:13px;flex-direction:column;font-size:11px;line-height:16px;display:flex;position:absolute}.thread-header{border-bottom:1px solid var(--line);flex:none;align-items:center;height:42px;padding:4px 8px 4px 16px;display:flex}.thread-title{flex:1;font-weight:550}.thread-actions{align-items:center;gap:4px;display:flex}.menu-wrap{display:inline-flex;position:relative}.menu{border-radius:var(--radius-menu);background:var(--island);min-width:140px;box-shadow:inset 0 0 0 1px var(--island-line), var(--shadow);z-index:6;padding:4px;position:absolute;top:calc(100% + 4px);right:0}.menu button{border-radius:var(--pill);color:#fff;text-align:left;white-space:nowrap;width:100%;height:28px;padding:0 8px;font-size:12px;display:block}.menu button:hover{background:var(--island-hover)}.thread-list{-webkit-user-select:text;user-select:text;flex:1;min-height:0;padding:8px 0 0;overflow-y:auto}.thread-comment{padding:4px 16px 8px;position:relative}.thread-comment-head{align-items:center;gap:8px;height:32px;display:flex}.thread-comment-name{font-size:13px;font-weight:500;line-height:24px}.thread-comment-time{font-size:13px;line-height:24px}.thread-comment-more{opacity:0;margin-left:auto;position:relative}.thread-comment:hover .thread-comment-more,.thread-comment-more:focus-within{opacity:1}.thread-comment-text{white-space:pre-wrap;word-break:break-word;padding-left:32px;font-size:13px;line-height:24px}.thread-reply{flex:none;align-items:flex-start;gap:8px;padding:8px 16px 16px;display:flex}.thread-reply>.face{margin-top:8px}.thread-reply-field{background:var(--surface-2);border-radius:8px;flex:1;align-items:flex-start;gap:8px;min-width:0;padding:8px 8px 8px 12px;display:flex;position:relative;box-shadow:inset 0 0 0 1px #0000}.thread-reply-field:focus-within{box-shadow:inset 0 0 0 1px var(--accent)}.thread-reply-field textarea{flex:1;min-width:0}.comments-panel{border-radius:var(--radius-menu);background:var(--surface);width:248px;box-shadow:var(--shadow-sm);flex-direction:column;display:flex;position:fixed;top:50px;bottom:50px;right:6px}.comments-panel-head{border-bottom:1px solid var(--line-subtle);flex:none;justify-content:space-between;align-items:center;height:42px;padding:0 12px 0 16px;font-size:12px;font-weight:500;display:flex}.resolved-toggle{color:var(--muted);align-items:center;gap:4px;font-weight:400;display:flex}.resolved-toggle input{accent-color:var(--accent);margin:0}.comments-panel-list{flex:1;min-height:0;padding:6px;overflow-y:auto}.comments-empty{margin:0;padding:10px;font-size:12px}.comments-panel-item{text-align:left;border-radius:8px;width:100%;padding:8px 10px;font-size:12px;line-height:16px;display:block}.comments-panel-item:hover{background:var(--surface-hover)}.comments-panel-item.active{background:var(--selection)}.comments-panel-item>span{display:block}.comments-panel-item b{font-weight:500}.comments-panel-face{width:24px;margin-bottom:4px;position:relative}.comments-panel-face .face{display:flex}.unread-dot{background:var(--accent);width:8px;height:8px;box-shadow:0 0 0 1.5px var(--surface);border-radius:50%;position:absolute;top:-1px;right:-3px}.comments-panel-text{-webkit-line-clamp:3;word-break:break-word;-webkit-box-orient:vertical;overflow:hidden;display:-webkit-box!important}body:has(.home){overflow:auto}.home{flex-direction:column;min-height:100%;display:flex}.home-top .wordmark svg{height:18px}.home-top{justify-content:space-between;align-items:center;height:56px;padding:0 20px;display:flex}.home-me{border-radius:50%;transition:box-shadow .1s;display:flex}.home-me:hover,.home-me[data-popup-open]{box-shadow:0 0 0 3px var(--surface-hover)}.home-main{flex:1;width:100%;max-width:1360px;margin:0 auto;padding:24px 20px}.install{text-align:center;flex-direction:column;align-items:center;gap:20px;padding-top:22vh;display:flex}.install h1{letter-spacing:-.028em;margin:0;font-size:24px;font-weight:500;line-height:32px}.home-shared{margin-top:48px}.home-section-title{color:var(--secondary);margin:0 0 16px;font-size:13px;font-weight:500;line-height:20px}.canvas-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 24px;margin:0;padding:0;list-style:none;display:grid}.canvas-card{min-width:0;display:block;position:relative}.canvas-card-link{z-index:1;border-radius:var(--radius-menu);outline:0;position:absolute;inset:0}.canvas-card-meta{font-size:12px;display:block}.canvas-card-name{text-overflow:ellipsis;white-space:nowrap;margin-top:10px;font-weight:500;display:block;overflow:hidden}.canvas-card-rename{z-index:2;border-radius:var(--pill);background:var(--surface-2);width:calc(100% + 8px);height:24px;color:var(--text);font:inherit;-webkit-user-select:text;user-select:text;border:0;outline:0;margin:7px 0 -3px -8px;padding:0 8px;font-weight:500;display:block;position:relative}.canvas-thumb{aspect-ratio:16/10;border-radius:var(--radius-menu);background:var(--surface-2);box-shadow:var(--shadow-sm);transition:box-shadow .18s cubic-bezier(.22,1,.36,1);overflow:hidden}.canvas-card:hover .canvas-thumb,.canvas-card[data-popup-open] .canvas-thumb{box-shadow:var(--shadow)}.canvas-card:has(.canvas-card-more[data-popup-open]) .canvas-thumb{box-shadow:var(--shadow)}.canvas-card-link:focus-visible~.canvas-thumb{box-shadow:0 0 0 2px var(--accent)}.canvas-thumb img{object-fit:contain;opacity:0;width:100%;height:100%;transition:opacity .2s;display:block}.canvas-thumb img.loaded{opacity:1}.canvas-card-more,.canvas-card-heart{z-index:2;border-radius:var(--pill);background:var(--surface);width:28px;height:28px;box-shadow:var(--shadow-sm);place-items:center;display:grid;position:absolute;top:8px}.canvas-card-more{color:var(--secondary);opacity:0;transition:opacity .1s,transform .18s cubic-bezier(.22,1,.36,1),color .1s;right:8px;transform:scale(.8)}.canvas-card-more:hover,.canvas-card-more[data-popup-open]{color:var(--text)}.canvas-card:hover .canvas-card-more,.canvas-card-more[data-popup-open],.canvas-card-more:focus-visible{opacity:1;transform:none}.canvas-card:hover .canvas-card-more:active{transform:scale(.92)}.canvas-card-heart{color:oklch(58% .22 12);pointer-events:none;animation:.18s cubic-bezier(.22,1,.36,1) tool-pop;left:8px}@media (hover:none){.canvas-card-more{opacity:1;transform:none}}@media (width<=900px){.canvas-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=560px){.canvas-grid{grid-template-columns:minmax(0,1fr)}}.canvas-menu-positioner{z-index:60}.canvas-menu{border-radius:var(--radius-menu);background:var(--island);min-width:160px;box-shadow:inset 0 0 0 1px var(--island-line), var(--shadow);transform-origin:var(--transform-origin);outline:0;padding:4px;transition:opacity .1s,transform .18s cubic-bezier(.22,1,.36,1)}.canvas-menu[data-starting-style],.canvas-menu[data-ending-style]{opacity:0;transform:scale(.96)}.canvas-menu-item{border-radius:var(--pill);color:#fff;white-space:nowrap;cursor:default;-webkit-user-select:none;user-select:none;outline:0;align-items:center;gap:8px;height:32px;padding:0 12px 0 7px;display:flex}.canvas-menu-item svg{stroke-width:2px;flex:none}.canvas-menu-item[data-highlighted]{background:var(--island-hover)}.canvas-menu-item.danger{color:oklch(72% .19 27)}.canvas-menu-item.danger[data-highlighted]{background:oklch(72% .19 27/.18)}.canvas-menu-separator{background:oklch(100% 0 0/.13);height:1px;margin:4px 8px}.canvas-menu-check{flex:none;display:flex}.canvas-menu-check[data-unchecked]{visibility:hidden}.canvas-menu-item.check-after{justify-content:space-between;gap:16px;padding:0 9px 0 12px}.theme-toggle{--shift:.56s cubic-bezier(.2, .8, .2, 1)}.theme-toggle .light-glyph{width:16px;height:16px}.shell .icon-button[data-popup-open]{background:var(--surface-pressed)}.shell .icon-button[data-popup-open] svg{opacity:1}.canvas-delete{z-index:71;border-radius:var(--radius-menu);background:var(--surface);width:320px;max-width:calc(100vw - 32px);box-shadow:var(--shadow);outline:0;flex-direction:column;gap:16px;padding:16px;transition:opacity .1s,transform .18s cubic-bezier(.22,1,.36,1);display:flex;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}.canvas-delete[data-starting-style],.canvas-delete[data-ending-style]{opacity:0;transform:translate(-50%,-50%)scale(.96)}.canvas-delete-backdrop{transition:opacity .15s}.canvas-delete-backdrop[data-starting-style],.canvas-delete-backdrop[data-ending-style]{opacity:0}.canvas-delete-title{overflow-wrap:anywhere;margin:0;font-size:13px;font-weight:500;line-height:18px}.canvas-delete-error{color:var(--danger);margin:-8px 0 0;font-size:12px}.canvas-delete-actions{justify-content:flex-end;align-items:center;gap:4px;display:flex}.canvas-delete-cancel{border-radius:var(--pill);height:32px;color:var(--secondary);padding:0 12px;font-weight:500;transition:background-color .1s}.canvas-delete-cancel:hover{background:var(--surface-hover)}.primary-button.canvas-delete-confirm{background:var(--danger);color:#fff}.home-foot{color:var(--muted);justify-content:center;gap:16px;padding:16px;font-size:12px;display:flex}.home-foot a{text-decoration:none;transition:color .1s}.home-foot a:hover{color:var(--text)}@media (width<=700px){.stage .toolbar{top:auto;bottom:calc(6px + env(safe-area-inset-bottom));left:6px;transform:none}.stage .top-left{max-width:max(72px, calc(100vw - var(--top-right-width,144px) - 18px))}}@media (width<=640px){.working-bubble,.notice{bottom:calc(50px + env(safe-area-inset-bottom))}.stage[data-tool=pencil] .zoom,.comments-panel{display:none}.comment-card,.composer{width:calc(100vw - 16px)!important;left:8px!important}.faces .face-button:nth-child(n+4){display:none}}.toolbar{transition:width .24s cubic-bezier(.22,1,.36,1)}.toolbar-clip{border-radius:var(--pill);width:100%;height:32px;overflow:hidden}.toolbar-row{align-items:center;gap:2px;width:max-content;height:32px;display:flex;position:relative}.tool-slider{border-radius:var(--pill);background:var(--signal-soft);pointer-events:none;height:32px;transition:transform .24s cubic-bezier(.22,1,.36,1),width .24s cubic-bezier(.22,1,.36,1);position:absolute;top:0;left:0}.tool-slider[data-hidden]{opacity:0}.toolbar .tool{flex:none;position:relative}.toolbar .tool svg{stroke-width:2px}.toolbar .tool[aria-pressed=true]{color:var(--signal)}.toolbar .tool[aria-pressed=true] svg{opacity:1}.toolbar .tool.held{background:var(--signal-soft)}.toolbar .shell-divider{margin:0 4px}.pencil-tray{align-items:center;gap:6px;margin:0 6px 0 4px;display:flex}.swatch{width:20px;height:20px;box-shadow:inset 0 0 0 1px var(--line);animation:.18s cubic-bezier(.22,1,.36,1) backwards tool-pop;animation-delay:calc(var(--i,0) * 25ms);border-radius:50%;flex:none;transition:transform .1s}.swatch:hover{transform:scale(1.12)}.swatch:active{transform:scale(.9)}.swatch.closed{width:24px;height:24px}.swatch.current{box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--signal)}.size-choice{border-radius:var(--pill);width:28px;height:28px;color:var(--secondary);animation:.18s cubic-bezier(.22,1,.36,1) backwards tool-pop;animation-delay:calc(var(--i,0) * 25ms);flex:none;justify-content:center;align-items:center;transition:background-color .1s;display:flex}.size-choice:hover{background:var(--surface-hover)}.size-choice.current{background:var(--surface-hover);color:var(--signal)}.size-choice.closed{width:24px;height:24px}@keyframes tool-pop{0%{opacity:0;transform:scale(.8)}}.strokes{pointer-events:none;z-index:1000000;position:absolute;top:0;left:0;overflow:visible}.stroke-selection{fill:none;stroke:var(--accent);stroke-width:1.5px;vector-effect:non-scaling-stroke}.stage[data-tool=move] .stroke-mine{pointer-events:auto;cursor:pointer}@media (prefers-reduced-motion:reduce){.toolbar,.tool-slider,.canvas-menu,.canvas-delete,.canvas-delete-backdrop,.canvas-card-more{transition:none}.canvas-card-heart,.swatch,.size-choice{animation:none}.working-bubble,.working-bubble[data-show]{transition:opacity .2s ease-out,visibility .2s;transform:translate(-50%)}.working-scribble path{stroke-dashoffset:0;animation:none}}.light-switch{--open:196px;--end:40px;flex:none;width:40px;height:40px;position:relative}.light-pill{border-radius:var(--pill);background:var(--surface-2);align-items:center;width:40px;height:40px;transition:width .32s cubic-bezier(.2,.8,.2,1);display:flex;position:absolute;top:0;right:0;overflow:hidden}.light-switch[data-open] .light-pill{width:var(--open)}.light-toggle{width:var(--end);border-radius:var(--pill);height:40px;color:var(--text);cursor:pointer;background:0 0;border:0;place-items:center;padding:0;display:grid;position:absolute;right:0}.light-toggle:focus-visible,.light-track:focus-visible{outline:2px solid var(--signal);outline-offset:-2px}.light-track{left:18px;right:var(--end);cursor:pointer;touch-action:none;opacity:0;transition:opacity .16s ease-out;position:absolute;top:0;bottom:0}.light-switch[data-open] .light-track{opacity:1;transition-delay:.1s}.light-track:before{content:"";background:linear-gradient(90deg,#f6c7a8,#fff 40%,#fbe3c4 62%,#e9a27c 75%,#8f7fa6 85%,#2a3755);border-radius:2px;height:4px;margin-top:-2px;position:absolute;top:50%;left:0;right:0;box-shadow:inset 0 0 0 .5px #00000024}.light-dot{top:50%;left:calc(var(--x) * 100%);background:var(--text);width:14px;height:14px;box-shadow:0 0 0 2px var(--lit), 0 1px 4px #0003;border-radius:50%;margin:-7px 0 0 -7px;transition:left .3s cubic-bezier(.2,.8,.2,1);position:absolute}.light-switch[data-dragging] .light-dot{transition:none}.light-switch[data-dragging] .light-track{cursor:grabbing}.light-glyph{width:18px;height:18px;overflow:visible}.light-glyph g,.light-glyph circle,.light-glyph path{transform-box:view-box;transform-origin:12px 12px;transition:transform var(--shift), opacity var(--shift)}@media (prefers-reduced-motion:reduce){.light-pill,.light-dot,.light-glyph *{transition:none}}.landing .landing-button{position:relative}.landing-states{place-items:center;display:grid}.landing-state{white-space:nowrap;grid-area:1/1;align-items:center;gap:10px;display:inline-flex}.landing-marks{align-items:center;gap:6px;display:inline-flex}.landing-marks svg{width:16px;height:16px;display:block}.landing-sr{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.landing-marks svg,.landing-label,.landing-check,.landing-done{transition:opacity .18s ease-out,translate .32s cubic-bezier(.34,1.56,.64,1),scale .32s cubic-bezier(.34,1.56,.64,1),filter .18s ease-out}.landing-marks svg:nth-child(2){transition-delay:45ms}.landing-label{transition-delay:70ms;transition-timing-function:ease-out,cubic-bezier(.22,1,.36,1),ease-out,ease-out}.landing-button[data-copied] .landing-marks svg,.landing-button[data-copied] .landing-label{opacity:0;filter:blur(3px);transition:opacity .12s ease-in,translate .16s ease-in,scale .16s ease-in,filter .12s ease-in;translate:0 -10px;scale:.8}.landing-button[data-copied] .landing-marks svg:first-child{transition-delay:40ms}.landing-button[data-copied] .landing-label{translate:0 -8px;scale:1}.landing-check,.landing-done{opacity:0;filter:blur(3px);transition-duration:.12s;translate:0 10px}.landing-button[data-copied] .landing-check,.landing-button[data-copied] .landing-done{opacity:1;filter:blur();transition:opacity .18s ease-out 70ms,translate .36s cubic-bezier(.34,1.56,.64,1) 70ms,filter .18s ease-out 70ms;translate:0}.landing-check{fill:none;stroke:currentColor;stroke-width:2.25px;stroke-linecap:round;stroke-linejoin:round;width:18px;height:18px;display:block}.landing-check path{stroke-dasharray:1;stroke-dashoffset:1px;transition:stroke-dashoffset .1s ease-in}.landing-button[data-copied] .landing-check path{stroke-dashoffset:0;transition:stroke-dashoffset .3s cubic-bezier(.65,0,.35,1) .12s}.landing-button[data-copied]{animation:.48s cubic-bezier(.22,1,.36,1) landing-copied}@keyframes landing-copied{0%{scale:.97}45%{scale:1.035}to{scale:1}}@media (prefers-reduced-motion:reduce){.landing-marks svg,.landing-label,.landing-check,.landing-done,.landing-button[data-copied] .landing-marks svg,.landing-button[data-copied] .landing-label,.landing-button[data-copied] .landing-check,.landing-button[data-copied] .landing-done{filter:none;transition:opacity .15s;translate:none;scale:none}.landing-check path,.landing-button[data-copied] .landing-check path{stroke-dashoffset:0;transition:none}.landing-button[data-copied]{animation:none}}
|