twombly 0.4.4 → 0.4.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +38 -0
- package/dist/cli.js +30 -11
- package/dist/ui/assets/{Landing-CrWkZ8qH.css → Landing-C6mswfqx.css} +1 -1
- package/dist/ui/assets/Landing-DfEOi8dC.js +111 -0
- package/dist/ui/assets/{LandingStage-DlOW_YOx.js → LandingStage-IBFG9NPs.js} +1 -1
- package/dist/ui/assets/agentPrompt-Dxy3aH2W.js +1 -0
- package/dist/ui/assets/{index-CJ7B-FU8.css → index-BkX_x_hA.css} +1 -1
- package/dist/ui/assets/{index-DgaQcoTH.js → index-Cv7isICi.js} +3 -3
- package/dist/ui/index.html +23 -7
- package/dist/ui/llms.txt +23 -0
- package/package.json +5 -2
- package/dist/ui/assets/Landing-CMSAED8E.js +0 -111
- package/dist/ui/assets/agentPrompt-Va8atsXW.js +0 -1
package/README.md
ADDED
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
# Twombly
|
|
2
|
+
|
|
3
|
+
A canvas for your agent's design explorations. Your coding agent builds each version of a design as a live frame on one infinite canvas. Click Share and your team gets a link with live cursors, following, comments and voice huddles.
|
|
4
|
+
|
|
5
|
+
Works with Claude Code, Codex, Cursor and any agent that can run a command, in any framework and any repo.
|
|
6
|
+
|
|
7
|
+
## Use it
|
|
8
|
+
|
|
9
|
+
Tell your agent:
|
|
10
|
+
|
|
11
|
+
> 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.
|
|
12
|
+
|
|
13
|
+
Or run the guide yourself and hand it to your agent:
|
|
14
|
+
|
|
15
|
+
```sh
|
|
16
|
+
npx -y twombly@latest guide
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## What the agent does
|
|
20
|
+
|
|
21
|
+
```sh
|
|
22
|
+
twombly init --name "Notification Explorations" # start a canvas on localhost
|
|
23
|
+
twombly add ./dist --title "V1" --width 1280 --height 800 # add a version as a live frame
|
|
24
|
+
twombly context # what the person is looking at
|
|
25
|
+
twombly comments # feedback left on the frames
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
- **A frame is a folder of static files.** A Vite, Next.js, SvelteKit or Astro build, a single component bundled with mock data, a frozen capture of a running page, or a picture.
|
|
29
|
+
- **Nothing goes online until someone clicks Share.** Gates check every frame for secrets, outside requests and server code before it's placed, locally and again in the cloud.
|
|
30
|
+
- **Several agents can share one canvas,** and a folder can hold any number of named canvases.
|
|
31
|
+
|
|
32
|
+
Output is JSON. `twombly help` lists every command.
|
|
33
|
+
|
|
34
|
+
## Links
|
|
35
|
+
|
|
36
|
+
- [twombly.app](https://twombly.app)
|
|
37
|
+
- [Agent guide](https://twombly.app/skill.md)
|
|
38
|
+
- [Privacy](https://twombly.app/privacy) and [terms](https://twombly.app/terms)
|
package/dist/cli.js
CHANGED
|
@@ -662,7 +662,7 @@ var checkedAt = 0;
|
|
|
662
662
|
function interfaceFolders() {
|
|
663
663
|
if (OVERRIDE) return [OVERRIDE];
|
|
664
664
|
const folder = (released) => join5(STORE, String(released));
|
|
665
|
-
return [...saved.filter((released) => released >
|
|
665
|
+
return [...saved.filter((released) => released > 1793988892752).map(folder), BUNDLED, ...saved.filter((released) => released <= 1793988892752).map(folder)];
|
|
666
666
|
}
|
|
667
667
|
function unpack(body) {
|
|
668
668
|
const { payload, signature } = JSON.parse(body);
|
|
@@ -696,7 +696,7 @@ async function check() {
|
|
|
696
696
|
const release = unpack(body);
|
|
697
697
|
if (!release) return;
|
|
698
698
|
etag = response.headers.get("etag") || "";
|
|
699
|
-
if (release.released > Math.max(saved[0] ?? 0,
|
|
699
|
+
if (release.released > Math.max(saved[0] ?? 0, 1793988892752)) await install(release.released, release.files);
|
|
700
700
|
}
|
|
701
701
|
function startCheck() {
|
|
702
702
|
if (checking) return;
|
|
@@ -890,13 +890,17 @@ var FILE2 = join8(HOME, "usage.json");
|
|
|
890
890
|
var OFF = join8(HOME, "usage-off");
|
|
891
891
|
var CHECK_MS2 = 36e5;
|
|
892
892
|
var ERRORS_PER_RUN = 20;
|
|
893
|
+
var FIRSTS = ["run", "canvas", "frame", "share"];
|
|
894
|
+
var FIRST_OF = { canvasesCreated: "canvas", framesAdded: "frame", shares: "share" };
|
|
893
895
|
var state = null;
|
|
894
896
|
var saving = null;
|
|
895
897
|
var errorsSent = 0;
|
|
896
898
|
var usageOn = () => process.env.TWOMBLY_NO_USAGE !== "1" && !existsSync(OFF);
|
|
897
899
|
var scrub = (text2, max) => text2.split(homedir2()).join("~").slice(0, max);
|
|
898
900
|
var today = () => (/* @__PURE__ */ new Date()).toISOString().slice(0, 10);
|
|
899
|
-
var post = (path, body) => fetch(ENDPOINT + path, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify(body), signal: AbortSignal.timeout(
|
|
901
|
+
var post = (path, body, ms = 1e4) => fetch(ENDPOINT + path, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify(body), signal: AbortSignal.timeout(ms) });
|
|
902
|
+
var sendFirst = (install3, first, command2) => post("/api/usage", { install: install3, first, command: command2, version: "0.4.6", platform: process.platform }, 3e3).catch(() => {
|
|
903
|
+
});
|
|
900
904
|
async function setUsage(on) {
|
|
901
905
|
await mkdir6(HOME, { recursive: true });
|
|
902
906
|
if (on) await rm5(OFF, { force: true });
|
|
@@ -905,7 +909,8 @@ async function setUsage(on) {
|
|
|
905
909
|
async function load() {
|
|
906
910
|
const saved2 = await readFile5(FILE2, "utf8").then(JSON.parse).catch(() => null);
|
|
907
911
|
const install3 = typeof saved2?.install === "string" && /^[a-z0-9]{16,40}$/.test(saved2.install) ? saved2.install : randomBytes(12).toString("hex");
|
|
908
|
-
|
|
912
|
+
const sent = Array.isArray(saved2?.sent) ? saved2.sent : saved2 ? FIRSTS : [];
|
|
913
|
+
return { install: install3, day: typeof saved2?.day === "string" ? saved2.day : today(), counts: saved2?.counts && typeof saved2.counts === "object" ? saved2.counts : {}, sent };
|
|
909
914
|
}
|
|
910
915
|
function save() {
|
|
911
916
|
if (saving) return;
|
|
@@ -922,8 +927,20 @@ function save() {
|
|
|
922
927
|
function tally(key, by = 1) {
|
|
923
928
|
if (!state || !usageOn()) return;
|
|
924
929
|
state.counts[key] = (state.counts[key] || 0) + by;
|
|
930
|
+
const first = FIRST_OF[key];
|
|
931
|
+
if (first && !state.sent.includes(first)) {
|
|
932
|
+
state.sent.push(first);
|
|
933
|
+
sendFirst(state.install, first);
|
|
934
|
+
}
|
|
925
935
|
save();
|
|
926
936
|
}
|
|
937
|
+
async function noteFirstRun(command2) {
|
|
938
|
+
if (!usageOn() || existsSync(FILE2)) return;
|
|
939
|
+
const fresh = { ...await load(), sent: ["run"] };
|
|
940
|
+
await mkdir6(HOME, { recursive: true });
|
|
941
|
+
await writeFile6(FILE2, JSON.stringify(fresh));
|
|
942
|
+
await sendFirst(fresh.install, "run", command2);
|
|
943
|
+
}
|
|
927
944
|
async function flush() {
|
|
928
945
|
if (!state || state.day === today()) return;
|
|
929
946
|
const { day, counts } = state;
|
|
@@ -932,7 +949,7 @@ async function flush() {
|
|
|
932
949
|
save();
|
|
933
950
|
if (!usageOn() || !Object.values(counts).some(Boolean)) return;
|
|
934
951
|
const canvases2 = Object.keys(await readRegistry()).length;
|
|
935
|
-
await post("/api/usage", { install: state.install, day, version: "0.4.
|
|
952
|
+
await post("/api/usage", { install: state.install, day, version: "0.4.6", platform: process.platform, counts: { ...counts, canvases: canvases2 } }).catch(() => {
|
|
936
953
|
});
|
|
937
954
|
}
|
|
938
955
|
async function startUsage() {
|
|
@@ -950,7 +967,7 @@ function reportError(error, source = "tool") {
|
|
|
950
967
|
source,
|
|
951
968
|
mode: "local",
|
|
952
969
|
install: state?.install,
|
|
953
|
-
version: "0.4.
|
|
970
|
+
version: "0.4.6",
|
|
954
971
|
type: String(error.type || "Error").slice(0, 80),
|
|
955
972
|
message: scrub(String(error.message), 500),
|
|
956
973
|
stack: scrub(String(error.stack || ""), 4e3)
|
|
@@ -1806,7 +1823,7 @@ async function servePreview(response, canvasId, frameId) {
|
|
|
1806
1823
|
async function route(request, response) {
|
|
1807
1824
|
const url = new URL(request.url || "/", DAEMON_ORIGIN);
|
|
1808
1825
|
const path = url.pathname, method = request.method || "GET";
|
|
1809
|
-
if (path === "/health") return reply(response, 200, { ok: true, build: "0.4.
|
|
1826
|
+
if (path === "/health") return reply(response, 200, { ok: true, build: "0.4.6+1793988892752", api: TOOL_API, pid: process.pid });
|
|
1810
1827
|
if (path.startsWith("/cli/") && method === "POST") return reply(response, 200, await command(path.slice(5), await readBody(request)));
|
|
1811
1828
|
if (path === "/auth/callback" && method === "GET") {
|
|
1812
1829
|
const code = url.searchParams.get("code"), state2 = url.searchParams.get("state");
|
|
@@ -2137,7 +2154,7 @@ async function runGates(folder, options) {
|
|
|
2137
2154
|
}
|
|
2138
2155
|
|
|
2139
2156
|
// src/cli.ts
|
|
2140
|
-
var HELP = `twombly ${"0.4.
|
|
2157
|
+
var HELP = `twombly ${"0.4.6"}: put design explorations on a shared canvas.
|
|
2141
2158
|
|
|
2142
2159
|
init [--name "Name"] [--no-open] create or join this folder's canvas
|
|
2143
2160
|
init --canvas "Name" [--no-open] create or join a separate named canvas in this folder
|
|
@@ -2239,12 +2256,12 @@ async function health() {
|
|
|
2239
2256
|
var builtAt = (build) => Number(build.split("+")[1]) || 0;
|
|
2240
2257
|
var sleep = (ms) => new Promise((done) => setTimeout(done, ms));
|
|
2241
2258
|
var IDLE_WAIT_MS = 6e4;
|
|
2242
|
-
var usable = (running) => !!running && (running.build === "0.4.
|
|
2259
|
+
var usable = (running) => !!running && (running.build === "0.4.6+1793988892752" || running.api === TOOL_API && builtAt(running.build) > builtAt("0.4.6+1793988892752"));
|
|
2243
2260
|
async function ensureDaemon() {
|
|
2244
2261
|
const running = await health();
|
|
2245
2262
|
if (usable(running)) return;
|
|
2246
2263
|
if (running) {
|
|
2247
|
-
if (builtAt(running.build) > builtAt("0.4.
|
|
2264
|
+
if (builtAt(running.build) > builtAt("0.4.6+1793988892752")) fail("A newer twombly is running on this machine. Run this with twombly@latest.");
|
|
2248
2265
|
let stopped = false;
|
|
2249
2266
|
for (const end = Date.now() + IDLE_WAIT_MS; !stopped && Date.now() < end; ) {
|
|
2250
2267
|
const answer = await fetch(`${DAEMON_ORIGIN}/cli/stop`, { method: "POST", body: '{"ifIdle":true}' }).then((response) => response.json()).catch(() => ({ stopped: true }));
|
|
@@ -2454,6 +2471,8 @@ async function main() {
|
|
|
2454
2471
|
if (typeof flags.canvas !== "string" || !flags.canvas.trim()) fail("--canvas needs a name.");
|
|
2455
2472
|
chosenCanvas = flags.canvas.trim();
|
|
2456
2473
|
}
|
|
2474
|
+
if (name && name !== "__daemon") await noteFirstRun(name).catch(() => {
|
|
2475
|
+
});
|
|
2457
2476
|
switch (name) {
|
|
2458
2477
|
case "__daemon":
|
|
2459
2478
|
return runDaemon();
|
|
@@ -2465,7 +2484,7 @@ async function main() {
|
|
|
2465
2484
|
return;
|
|
2466
2485
|
case "--version":
|
|
2467
2486
|
case "version":
|
|
2468
|
-
process.stdout.write("0.4.
|
|
2487
|
+
process.stdout.write("0.4.6\n");
|
|
2469
2488
|
return;
|
|
2470
2489
|
case "guide":
|
|
2471
2490
|
process.stdout.write(SKILL_default);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
body:has(.landing){text-wrap:balance;overflow:auto}.landing{isolation:isolate;min-height:100%;color:var(--text);--text:oklch(0% 0 0);--muted:oklch(0% 0 0/.6);--solid:oklch(0% 0 0);--on-solid:oklch(100% 0 0);--surface-2:oklch(100% 0 0/.45);--surface-pressed:oklch(100% 0 0/.7);--signal:#06f;flex-direction:column;font-size:15px;line-height:1.4;display:flex;position:relative;overflow-x:clip}.landing[data-dark]{--text:oklch(98.5% 0 0);--muted:oklch(98.5% 0 0/.72);--solid:oklch(100% 0 0);--on-solid:oklch(0% 0 0);--surface-2:oklch(100% 0 0/.12);--surface-pressed:oklch(100% 0 0/.2)}.window-light{z-index:-1;background:linear-gradient(90deg, var(--lit), var(--shade));pointer-events:none;width:100vw;height:100lvh;position:fixed;top:0;left:0}.landing a:not(.wordmark){text-decoration:none}@property --text{syntax:"<color>";inherits:true;initial-value:#0000}@property --muted{syntax:"<color>";inherits:true;initial-value:#0000}@property --solid{syntax:"<color>";inherits:true;initial-value:#0000}@property --on-solid{syntax:"<color>";inherits:true;initial-value:#0000}@property --surface{syntax:"<color>";inherits:true;initial-value:#0000}@property --surface-2{syntax:"<color>";inherits:true;initial-value:#0000}@property --surface-hover{syntax:"<color>";inherits:true;initial-value:#0000}@property --surface-pressed{syntax:"<color>";inherits:true;initial-value:#0000}@property --secondary{syntax:"<color>";inherits:true;initial-value:#0000}@property --canvas{syntax:"<color>";inherits:true;initial-value:#0000}@property --line{syntax:"<color>";inherits:true;initial-value:#0000}@property --line-subtle{syntax:"<color>";inherits:true;initial-value:#0000}@property --signal-soft{syntax:"<color>";inherits:true;initial-value:#0000}@property --shadow-near{syntax:"<color>";inherits:true;initial-value:#0000}@property --shadow-far{syntax:"<color>";inherits:true;initial-value:#0000}@property --live{syntax:"<color>";inherits:true;initial-value:#0000}@property --lit{syntax:"<color>";inherits:true;initial-value:#0000}@property --shade{syntax:"<color>";inherits:true;initial-value:#0000}@property --ls-bar{syntax:"<color>";inherits:true;initial-value:#0000}@property --ls-chat{syntax:"<color>";inherits:true;initial-value:#0000}@property --ls-control{syntax:"<color>";inherits:true;initial-value:#0000}@property --ls-composer{syntax:"<color>";inherits:true;initial-value:#0000}@property --ls-ink{syntax:"<color>";inherits:true;initial-value:#0000}@property --ls-ink-2{syntax:"<color>";inherits:true;initial-value:#0000}@property --ls-ink-3{syntax:"<color>";inherits:true;initial-value:#0000}@property --icon-muted{syntax:"<number>";inherits:true;initial-value:1}@property --icon-secondary{syntax:"<number>";inherits:true;initial-value:1}.landing{--shift:var(--shift-ms) var(--shift-ease);transition:--text var(--shift), --muted var(--shift), --solid var(--shift), --on-solid var(--shift), --surface-2 var(--shift), --surface-pressed var(--shift)}.landing[data-glide]{transition:--text var(--shift), --muted var(--shift), --solid var(--shift), --on-solid var(--shift), --surface-2 var(--shift), --surface-pressed var(--shift), --lit var(--shift), --shade var(--shift)}.landing[data-shifting] :is(.landing-sign-in,.tool,.canvas-name){transition-duration:0s}.landing[data-shifting] .landing-button{transition-duration:.16s,0s,0s}.landing-nav{justify-content:space-between;align-items:center;width:100%;max-width:1248px;margin:0 auto;padding:20px 24px;display:flex}.landing-nav .wordmark svg{height:18px}.landing-nav-end{align-items:center;gap:8px;display:flex}.landing-sign-in{border-radius:var(--pill);background:var(--surface-2);align-items:center;height:40px;padding:0 16px;font-weight:500;transition:background-color .2s;display:inline-flex}.landing-sign-in:hover{background:var(--surface-pressed)}.landing-hero{text-align:center;flex-direction:column;flex:1;align-items:center;width:100%;max-width:1248px;margin:0 auto;padding:72px 24px 0;display:flex}.landing-title{perspective:1200px;letter-spacing:-.02em;margin:0;font-size:clamp(40px,6.6vw,76px);font-weight:700;line-height:.95}.landing-word{animation:landing-word var(--word-ms) var(--word-ease) var(--delay) both;display:inline-block}.landing-actions{animation:landing-rise var(--rise-ms) var(--rise-ease) .55s both;justify-content:center;margin-top:32px;display:flex}.landing-slot{transform-origin:50% 0;animation:landing-window var(--rise-ms) var(--rise-ease) .65s both}.landing-magnet{flex:none;display:inline-flex}.landing-cta{border-radius:var(--pill);will-change:transform;flex:none}.landing-button{border-radius:var(--pill);background:var(--solid);height:52px;color:var(--on-solid);white-space:nowrap;cursor:pointer;justify-content:center;align-items:center;padding:0 26px;font-size:15px;font-weight:500;transition:transform .16s ease-out;display:inline-flex}.landing-button:active{transform:scale(.97)}.landing-swap{justify-items:center;display:inline-grid}.landing-swap>span{grid-area:1/1;transition:opacity .15s}.landing-swap>[data-shown=false]{opacity:0}.landing-foot{width:100%;max-width:1248px;color:var(--muted);justify-content:space-between;gap:24px;margin:0 auto;padding:48px 24px 32px;font-size:13px;display:flex}.landing-foot nav{gap:24px;display:flex}.landing-foot a:hover{color:var(--text)}.ld-shell{background:var(--canvas);text-align:left;text-wrap:initial;flex:none;width:100%;margin-top:64px;font-size:13px;line-height:18px;animation:2.6s cubic-bezier(.22,1,.36,1) both ld-settle,1.6s ease-out both ld-focus,.9s .5s both ld-fill;position:relative;overflow:hidden;box-shadow:0 40px 100px -40px #00000024,0 12px 32px -16px #0000000f}.ld-draw{z-index:2;pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.ld-draw path{fill:none;stroke:var(--line);stroke-width:1px;stroke-dasharray:1;stroke-dashoffset:1px;animation:1.4s cubic-bezier(.65,0,.35,1) both ld-trace}.ld-stage{transform-origin:0 0;position:absolute;top:0;left:0;overflow:hidden}.ld-scene{position:absolute;inset:0}.ld-rise{animation:.9s cubic-bezier(.2,.8,.2,1) 1.1s both ld-rise}.ld-stage .shell{position:absolute}.ld-stage .top-left{max-width:none;padding-left:3px;top:6px;left:6px}.ld-stage .top-right{top:6px;right:6px}.ld-stage .toolbar{top:6px;left:50%;transform:translate(-50%)}.ld-stage .toolbar-clip{width:auto}.ld-stage .zoom{bottom:6px;right:6px}.ld-stage .canvas-name{line-height:32px}.ld-stage .zoom-value{justify-content:center;align-items:center;display:inline-flex}.ld-stage .tool-slider{top:0}.ld-stage .tool[aria-pressed=true]{color:var(--signal);position:relative}.ld-stage .tool[aria-pressed=true] svg{opacity:1}.ld-stage .face-button{transform-origin:50%;display:inline-flex}.ld-copied{align-items:center;gap:4px;display:inline-flex}.share-split[data-copied] .ld-copy,.share-split:not([data-copied]) .ld-copied{display:none}.ld-strokes{pointer-events:none;position:absolute;inset:0}.ld-pin{z-index:3;transform-origin:0 100%}.ld-cursors{pointer-events:none;z-index:6;position:absolute;inset:0}.ld-cursor{opacity:0;will-change:transform;transition:none;top:-4px;left:-3px}.ld-cursor svg{transform-origin:3px 4px}.ld-frame{transform-origin:50%}.ld-design{color:#111;background:#f3f2ef;flex-direction:column;gap:10px;height:100%;padding:22px;font:13px/18px -apple-system,system-ui,sans-serif;display:flex;overflow:hidden}.ld-design h1{margin:0 0 2px;font-size:14px;font-weight:600;line-height:20px}.ld-n{background:#fff;border-radius:12px;flex:none;align-items:flex-start;gap:12px;padding:11px 12px;display:flex;box-shadow:0 1px 2px #00000014}.ld-av{color:#fff;border-radius:50%;flex:none;place-items:center;width:32px;height:32px;font-size:11px;font-weight:600;display:grid}.ld-t{font-weight:600}.ld-d{color:#666}.ld-w{color:#999;flex:none;margin-left:auto;font-size:11px}.ld-design[data-v="2"]{color:#eee;background:#101114}.ld-design[data-v="2"] .ld-n{box-shadow:none;background:#1b1d22}.ld-design[data-v="2"] .ld-d{color:#9aa}.ld-design[data-v="3"]{background:#fff;gap:0}.ld-design[data-v="3"] .ld-n{box-shadow:none;background:0 0;border-bottom:1px solid #ddd;border-radius:0;padding:11px 0}.ld-design[data-v="4"]{gap:6px;padding:16px}.ld-design[data-v="4"] .ld-n{border-radius:8px;align-items:center;padding:10px}.ld-design[data-v="4"] .ld-av{width:22px;height:22px;font-size:9px}.ld-design[data-v="4"] .ld-d{display:none}.ld-design[data-v="5"]{background:linear-gradient(160deg,#ffe8d6,#f6d6ff)}.ld-design[data-v="5"] .ld-n{box-shadow:none;background:#fff9;border-radius:18px}.ld-design[data-v="6"]{background:#fffbe9}.ld-design[data-v="6"] .ld-n{border:1.5px solid #111;border-radius:6px;box-shadow:3px 3px #111}.ld-design[data-v="6"] .ld-av{color:#111;border:1.5px solid #111;border-radius:6px;background:0 0!important}@keyframes landing-word{0%{opacity:0;transform:translateY(45%)rotateX(-40deg)}}@keyframes landing-window{0%{opacity:0;transform:translateY(48px)scale(.96)}}@keyframes landing-rise{0%{opacity:0;filter:blur(12px);transform:translateY(10px)}}@keyframes ld-settle{0%{transform:translateY(40px) scale(var(--ld-from,1.3))}}@keyframes ld-focus{0%{filter:blur(6px);opacity:0}40%{opacity:1}}@keyframes ld-fill{0%{background-color:#0000;box-shadow:0 40px 100px -40px #0000,0 12px 32px -16px #0000}}@keyframes ld-trace{to{stroke-dashoffset:0}}@keyframes ld-rise{0%{opacity:0}}@media (width<=640px){.landing-nav{padding:12px 16px}.landing-hero{padding:40px 16px 0}.landing-foot{padding-inline:16px}.landing-title br{display:none}.ld-shell{margin-top:40px}}@media (prefers-reduced-motion:reduce){.landing{--shift:0s}.landing-word,.landing-actions,.landing-slot,.ld-shell,.ld-rise{animation:none}.ld-draw path{stroke-dashoffset:0;animation: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}}.landing-body{max-width:560px;color:var(--muted);animation:landing-rise var(--rise-ms) var(--rise-ease) .5s both;margin:24px 0 0;font-size:18px;line-height:1.45}@media (width<=640px){.landing-body{margin-top:16px;font-size:16px}}.landing-body{text-wrap:balance}@media (prefers-reduced-motion:reduce){.landing-body{animation:none}}.landing .landing-button{transition:transform .16s ease-out,background-color .2s ease-out,color .2s ease-out}.landing .landing-button[data-copied]{color:#fff;background:#06f}@media (width>=769px){.landing{--h:max(100svh, 850px);height:var(--h)}.landing-nav{padding-block:clamp(10px, calc(var(--h) * .022), 20px);flex:none}.landing-hero{min-height:0;padding-top:clamp(4px, calc(var(--h) * .024), 72px);justify-content:center}.landing-title{font-size:clamp(40px, min(6.6vw, calc(var(--h) * .062)), 76px)}.landing-body{margin-top:clamp(10px, calc(var(--h) * .02), 24px)}.landing-actions{margin-top:clamp(14px, calc(var(--h) * .024), 32px)}.landing-foot{padding-block:clamp(6px, calc(var(--h) * .011), 32px);flex:none}.landing-slot{width:100%;min-height:456px;max-height:760px;margin-top:clamp(8px, calc(var(--h) * .018), 40px);flex:1 1 0;justify-content:center;display:flex;container-type:size}.landing-slot .ls{flex:none;width:min(100cqw,157.895cqh);margin:0}}@media (width<=768px){.landing-nav{padding-block:12px}.landing-hero{padding-top:48px}.landing-body{margin-top:16px}.landing-actions{margin-top:28px}.landing-slot{width:100%;margin-top:48px}.landing-slot .ls{margin:0}.landing-foot{padding-block:48px 32px}}.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}}
|
|
1
|
+
body:has(.landing){text-wrap:balance;overflow:auto}.landing{isolation:isolate;min-height:100%;color:var(--text);--text:oklch(0% 0 0);--muted:oklch(0% 0 0/.6);--solid:oklch(0% 0 0);--on-solid:oklch(100% 0 0);--surface-2:oklch(100% 0 0/.45);--surface-pressed:oklch(100% 0 0/.7);--signal:#06f;flex-direction:column;font-size:15px;line-height:1.4;display:flex;position:relative;overflow-x:clip}.landing[data-dark]{--text:oklch(98.5% 0 0);--muted:oklch(98.5% 0 0/.72);--solid:oklch(100% 0 0);--on-solid:oklch(0% 0 0);--surface-2:oklch(100% 0 0/.12);--surface-pressed:oklch(100% 0 0/.2)}.window-light{z-index:-1;background:linear-gradient(90deg, var(--lit), var(--shade));pointer-events:none;width:100vw;height:100lvh;position:fixed;top:0;left:0}.landing a:not(.wordmark){text-decoration:none}@property --text{syntax:"<color>";inherits:true;initial-value:#0000}@property --muted{syntax:"<color>";inherits:true;initial-value:#0000}@property --solid{syntax:"<color>";inherits:true;initial-value:#0000}@property --on-solid{syntax:"<color>";inherits:true;initial-value:#0000}@property --surface{syntax:"<color>";inherits:true;initial-value:#0000}@property --surface-2{syntax:"<color>";inherits:true;initial-value:#0000}@property --surface-hover{syntax:"<color>";inherits:true;initial-value:#0000}@property --surface-pressed{syntax:"<color>";inherits:true;initial-value:#0000}@property --secondary{syntax:"<color>";inherits:true;initial-value:#0000}@property --canvas{syntax:"<color>";inherits:true;initial-value:#0000}@property --line{syntax:"<color>";inherits:true;initial-value:#0000}@property --line-subtle{syntax:"<color>";inherits:true;initial-value:#0000}@property --signal-soft{syntax:"<color>";inherits:true;initial-value:#0000}@property --shadow-near{syntax:"<color>";inherits:true;initial-value:#0000}@property --shadow-far{syntax:"<color>";inherits:true;initial-value:#0000}@property --live{syntax:"<color>";inherits:true;initial-value:#0000}@property --lit{syntax:"<color>";inherits:true;initial-value:#0000}@property --shade{syntax:"<color>";inherits:true;initial-value:#0000}@property --ls-bar{syntax:"<color>";inherits:true;initial-value:#0000}@property --ls-chat{syntax:"<color>";inherits:true;initial-value:#0000}@property --ls-control{syntax:"<color>";inherits:true;initial-value:#0000}@property --ls-composer{syntax:"<color>";inherits:true;initial-value:#0000}@property --ls-ink{syntax:"<color>";inherits:true;initial-value:#0000}@property --ls-ink-2{syntax:"<color>";inherits:true;initial-value:#0000}@property --ls-ink-3{syntax:"<color>";inherits:true;initial-value:#0000}@property --icon-muted{syntax:"<number>";inherits:true;initial-value:1}@property --icon-secondary{syntax:"<number>";inherits:true;initial-value:1}.landing{--shift:var(--shift-ms) var(--shift-ease);transition:--text var(--shift), --muted var(--shift), --solid var(--shift), --on-solid var(--shift), --surface-2 var(--shift), --surface-pressed var(--shift)}.landing[data-glide]{transition:--text var(--shift), --muted var(--shift), --solid var(--shift), --on-solid var(--shift), --surface-2 var(--shift), --surface-pressed var(--shift), --lit var(--shift), --shade var(--shift)}.landing[data-shifting] :is(.landing-sign-in,.tool,.canvas-name){transition-duration:0s}.landing[data-shifting] .landing-button{transition-duration:.16s,0s,0s}.landing-nav{justify-content:space-between;align-items:center;width:100%;max-width:1248px;margin:0 auto;padding:20px 24px;display:flex}.landing-nav .wordmark svg{height:18px}.landing-nav-end{align-items:center;gap:8px;display:flex}.landing-sign-in{border-radius:var(--pill);background:var(--surface-2);align-items:center;height:40px;padding:0 16px;font-weight:500;transition:background-color .2s;display:inline-flex}.landing-sign-in:hover{background:var(--surface-pressed)}.landing-hero{text-align:center;flex-direction:column;flex:1;align-items:center;width:100%;max-width:1248px;margin:0 auto;padding:72px 24px 0;display:flex}.landing-title{perspective:1200px;letter-spacing:-.02em;margin:0;font-size:clamp(40px,6.6vw,76px);font-weight:700;line-height:.95}.landing-word{animation:landing-word var(--word-ms) var(--word-ease) var(--delay) both;display:inline-block}.landing-actions{animation:landing-rise var(--rise-ms) var(--rise-ease) .55s both;justify-content:center;margin-top:32px;display:flex}.landing-slot{transform-origin:50% 0;animation:landing-window var(--rise-ms) var(--rise-ease) .65s both}.landing-magnet{flex:none;display:inline-flex}.landing-cta{border-radius:var(--pill);will-change:transform;flex:none}.landing-button{border-radius:var(--pill);background:var(--solid);height:52px;color:var(--on-solid);white-space:nowrap;cursor:pointer;justify-content:center;align-items:center;padding:0 26px;font-size:15px;font-weight:500;transition:transform .16s ease-out;display:inline-flex}.landing-button:active{transform:scale(.97)}.landing-swap{justify-items:center;display:inline-grid}.landing-swap>span{grid-area:1/1;transition:opacity .15s}.landing-swap>[data-shown=false]{opacity:0}.landing-foot{width:100%;max-width:1248px;color:var(--muted);justify-content:space-between;gap:24px;margin:0 auto;padding:48px 24px 32px;font-size:13px;display:flex}.landing-foot nav{gap:24px;display:flex}.landing-foot a:hover{color:var(--text)}.ld-shell{background:var(--canvas);text-align:left;text-wrap:initial;flex:none;width:100%;margin-top:64px;font-size:13px;line-height:18px;animation:2.6s cubic-bezier(.22,1,.36,1) both ld-settle,1.6s ease-out both ld-focus,.9s .5s both ld-fill;position:relative;overflow:hidden;box-shadow:0 40px 100px -40px #00000024,0 12px 32px -16px #0000000f}.ld-draw{z-index:2;pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.ld-draw path{fill:none;stroke:var(--line);stroke-width:1px;stroke-dasharray:1;stroke-dashoffset:1px;animation:1.4s cubic-bezier(.65,0,.35,1) both ld-trace}.ld-stage{transform-origin:0 0;position:absolute;top:0;left:0;overflow:hidden}.ld-scene{position:absolute;inset:0}.ld-rise{animation:.9s cubic-bezier(.2,.8,.2,1) 1.1s both ld-rise}.ld-stage .shell{position:absolute}.ld-stage .top-left{max-width:none;padding-left:3px;top:6px;left:6px}.ld-stage .top-right{top:6px;right:6px}.ld-stage .toolbar{top:6px;left:50%;transform:translate(-50%)}.ld-stage .toolbar-clip{width:auto}.ld-stage .zoom{bottom:6px;right:6px}.ld-stage .canvas-name{line-height:32px}.ld-stage .zoom-value{justify-content:center;align-items:center;display:inline-flex}.ld-stage .tool-slider{top:0}.ld-stage .tool[aria-pressed=true]{color:var(--signal);position:relative}.ld-stage .tool[aria-pressed=true] svg{opacity:1}.ld-stage .face-button{transform-origin:50%;display:inline-flex}.ld-copied{align-items:center;gap:4px;display:inline-flex}.share-split[data-copied] .ld-copy,.share-split:not([data-copied]) .ld-copied{display:none}.ld-strokes{pointer-events:none;position:absolute;inset:0}.ld-pin{z-index:3;transform-origin:0 100%}.ld-cursors{pointer-events:none;z-index:6;position:absolute;inset:0}.ld-cursor{opacity:0;will-change:transform;transition:none;top:-4px;left:-3px}.ld-cursor svg{transform-origin:3px 4px}.ld-frame{transform-origin:50%}.ld-design{color:#111;background:#f3f2ef;flex-direction:column;gap:10px;height:100%;padding:22px;font:13px/18px -apple-system,system-ui,sans-serif;display:flex;overflow:hidden}.ld-design h1{margin:0 0 2px;font-size:14px;font-weight:600;line-height:20px}.ld-n{background:#fff;border-radius:12px;flex:none;align-items:flex-start;gap:12px;padding:11px 12px;display:flex;box-shadow:0 1px 2px #00000014}.ld-av{color:#fff;border-radius:50%;flex:none;place-items:center;width:32px;height:32px;font-size:11px;font-weight:600;display:grid}.ld-t{font-weight:600}.ld-d{color:#666}.ld-w{color:#999;flex:none;margin-left:auto;font-size:11px}.ld-design[data-v="2"]{color:#eee;background:#101114}.ld-design[data-v="2"] .ld-n{box-shadow:none;background:#1b1d22}.ld-design[data-v="2"] .ld-d{color:#9aa}.ld-design[data-v="3"]{background:#fff;gap:0}.ld-design[data-v="3"] .ld-n{box-shadow:none;background:0 0;border-bottom:1px solid #ddd;border-radius:0;padding:11px 0}.ld-design[data-v="4"]{gap:6px;padding:16px}.ld-design[data-v="4"] .ld-n{border-radius:8px;align-items:center;padding:10px}.ld-design[data-v="4"] .ld-av{width:22px;height:22px;font-size:9px}.ld-design[data-v="4"] .ld-d{display:none}.ld-design[data-v="5"]{background:linear-gradient(160deg,#ffe8d6,#f6d6ff)}.ld-design[data-v="5"] .ld-n{box-shadow:none;background:#fff9;border-radius:18px}.ld-design[data-v="6"]{background:#fffbe9}.ld-design[data-v="6"] .ld-n{border:1.5px solid #111;border-radius:6px;box-shadow:3px 3px #111}.ld-design[data-v="6"] .ld-av{color:#111;border:1.5px solid #111;border-radius:6px;background:0 0!important}@keyframes landing-word{0%{opacity:0;transform:translateY(45%)rotateX(-40deg)}}@keyframes landing-window{0%{opacity:0;transform:translateY(48px)scale(.96)}}@keyframes landing-rise{0%{opacity:0;filter:blur(12px);transform:translateY(10px)}}@keyframes ld-settle{0%{transform:translateY(40px) scale(var(--ld-from,1.3))}}@keyframes ld-focus{0%{filter:blur(6px);opacity:0}40%{opacity:1}}@keyframes ld-fill{0%{background-color:#0000;box-shadow:0 40px 100px -40px #0000,0 12px 32px -16px #0000}}@keyframes ld-trace{to{stroke-dashoffset:0}}@keyframes ld-rise{0%{opacity:0}}@media (width<=640px){.landing-nav{padding:12px 16px}.landing-hero{padding:40px 16px 0}.landing-foot{padding-inline:16px}.landing-title br{display:none}.ld-shell{margin-top:40px}}@media (prefers-reduced-motion:reduce){.landing{--shift:0s}.landing-word,.landing-actions,.landing-slot,.ld-shell,.ld-rise{animation:none}.ld-draw path{stroke-dashoffset:0;animation: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}}.landing-body{max-width:560px;color:var(--muted);animation:landing-rise var(--rise-ms) var(--rise-ease) .5s both;margin:24px 0 0;font-size:18px;line-height:1.45}@media (width<=640px){.landing-body{margin-top:16px;font-size:16px}}.landing-body{text-wrap:balance}@media (prefers-reduced-motion:reduce){.landing-body{animation:none}}.landing .landing-button{transition:transform .16s ease-out,background-color .2s ease-out,color .2s ease-out}.landing .landing-button[data-copied]{color:#fff;background:#06f}@media (width>=769px){.landing{--h:max(100svh, 850px);height:var(--h)}.landing-nav{padding-block:clamp(10px, calc(var(--h) * .022), 20px);flex:none}.landing-hero{min-height:0;padding-top:clamp(4px, calc(var(--h) * .024), 72px);justify-content:center}.landing-title{font-size:clamp(40px, min(6.6vw, calc(var(--h) * .062)), 76px)}.landing-body{margin-top:clamp(10px, calc(var(--h) * .02), 24px)}.landing-actions{margin-top:clamp(14px, calc(var(--h) * .024), 32px)}.landing-foot{padding-block:clamp(6px, calc(var(--h) * .011), 32px);flex:none}.landing-slot{width:100%;min-height:456px;max-height:760px;margin-top:clamp(8px, calc(var(--h) * .018), 40px);flex:1 1 0;justify-content:center;display:flex;container-type:size}.landing-slot .ls{flex:none;width:min(100cqw,157.895cqh);margin:0}}@media (width<=768px){.landing-nav{padding-block:12px}.landing-hero{padding-top:48px}.landing-body{margin-top:16px}.landing-actions{margin-top:28px}.landing-slot{width:100%;margin-top:48px}.landing-slot .ls{margin:0}.landing-foot{padding-block:48px 32px}}
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/LandingStage-IBFG9NPs.js","assets/rolldown-runtime-WkwZ5CU-.js","assets/agentPrompt-Dxy3aH2W.js","assets/index-Cv7isICi.js","assets/index-BkX_x_hA.css","assets/LandingStage-BcivO6Eh.css"])))=>i.map(i=>d[i]);
|
|
2
|
+
import{n as e}from"./rolldown-runtime-WkwZ5CU-.js";import{Ct as t,D as n,E as r,N as i,Rt as a,S as o,T as s,i as c,j as l,o as u,p as d,s as f,t as p,u as m,w as h,wt as g,zt as _}from"./agentPrompt-Dxy3aH2W.js";import{i as v,n as y,r as ee,t as b}from"./index-Cv7isICi.js";var x=e(_(),1),S=i();function C(){return(0,S.jsxs)(`span`,{className:`landing-marks`,"aria-hidden":`true`,children:[(0,S.jsx)(`svg`,{viewBox:`0 0 24 24`,fill:`currentColor`,children:(0,S.jsx)(`path`,{d:`m4.7144 15.9555 4.7174-2.6471.079-.2307-.079-.1275h-.2307l-.7893-.0486-2.6956-.0729-2.3375-.0971-2.2646-.1214-.5707-.1215-.5343-.7042.0546-.3522.4797-.3218.686.0608 1.5179.1032 2.2767.1578 1.6514.0972 2.4468.255h.3886l.0546-.1579-.1336-.0971-.1032-.0972L6.973 9.8356l-2.55-1.6879-1.3356-.9714-.7225-.4918-.3643-.4614-.1578-1.0078.6557-.7225.8803.0607.2246.0607.8925.686 1.9064 1.4754 2.4893 1.8336.3643.3035.1457-.1032.0182-.0728-.164-.2733-1.3539-2.4467-1.445-2.4893-.6435-1.032-.17-.6194c-.0607-.255-.1032-.4674-.1032-.7285L6.287.1335 6.6997 0l.9957.1336.419.3642.6192 1.4147 1.0018 2.2282 1.5543 3.0296.4553.8985.2429.8318.091.255h.1579v-.1457l.1275-1.706.2368-2.0947.2307-2.6957.0789-.7589.3764-.9107.7468-.4918.5828.2793.4797.686-.0668.4433-.2853 1.8517-.5586 2.9021-.3643 1.9429h.2125l.2429-.2429.9835-1.3053 1.6514-2.0643.7286-.8196.85-.9046.5464-.4311h1.0321l.759 1.1293-.34 1.1657-1.0625 1.3478-.8804 1.1414-1.2628 1.7-.7893 1.36.0729.1093.1882-.0183 2.8535-.607 1.5421-.2794 1.8396-.3157.8318.3886.091.3946-.3278.8075-1.967.4857-2.3072.4614-3.4364.8136-.0425.0304.0486.0607 1.5482.1457.6618.0364h1.621l3.0175.2247.7892.522.4736.6376-.079.4857-1.2142.6193-1.6393-.3886-3.825-.9107-1.3113-.3279h-.1822v.1093l1.0929 1.0686 2.0035 1.8092 2.5075 2.3314.1275.5768-.3218.4554-.34-.0486-2.2039-1.6575-.85-.7468-1.9246-1.621h-.1275v.17l.4432.6496 2.3436 3.5214.1214 1.0807-.17.3521-.6071.2125-.6679-.1214-1.3721-1.9246L14.38 17.959l-1.1414-1.9428-.1397.079-.674 7.2552-.3156.3703-.7286.2793-.6071-.4614-.3218-.7468.3218-1.4753.3886-1.9246.3157-1.53.2853-1.9004.17-.6314-.0121-.0425-.1397.0182-1.4328 1.9672-2.1796 2.9446-1.7243 1.8456-.4128.164-.7164-.3704.0667-.6618.4008-.5889 2.386-3.0357 1.4389-1.882.929-1.0868-.0062-.1579h-.0546l-6.3385 4.1164-1.1293.1457-.4857-.4554.0608-.7467.2307-.2429 1.9064-1.3114Z`})}),(0,S.jsx)(`svg`,{viewBox:`0 0 24 24`,fill:`currentColor`,children:(0,S.jsx)(`path`,{d:`M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z`})})]})}var w=`twombly:show-copied`,T=.41960295031576633,E=.15,D=.2765523188064277,O=.5783555327868779,k=-44*Math.PI/180,A={x:Math.sin(k),y:-Math.cos(k)},j=(e,t=0,n=1)=>Math.min(n,Math.max(t,e)),M=(e,t,n)=>({x:e.x+t.x*n,y:e.y+t.y*n}),N=e=>Math.hypot(e.x,e.y),P=e=>{let t=N(e);return t<.001?{x:1,y:0}:{x:e.x/t,y:e.y/t}},F=(e,t,n,r)=>({start:e,outgoing:t,incoming:n,end:r});function I(e,t){let n=1-t;return{x:n**3*e.start.x+3*n*n*t*e.outgoing.x+3*n*t*t*e.incoming.x+t**3*e.end.x,y:n**3*e.start.y+3*n*n*t*e.outgoing.y+3*n*t*t*e.incoming.y+t**3*e.end.y}}function L(e,t){let n=j(t),r=Math.min(e.curves.length-1,Math.floor(n*e.curves.length)),i=n===1?1:n*e.curves.length-r,a=e.curves[r],o=1-i,s={x:3*(o*o*(a.outgoing.x-a.start.x)+2*o*i*(a.incoming.x-a.outgoing.x)+i*i*(a.end.x-a.incoming.x))*e.curves.length,y:3*(o*o*(a.outgoing.y-a.start.y)+2*o*i*(a.incoming.y-a.outgoing.y)+i*i*(a.end.y-a.incoming.y))*e.curves.length},c=P(s),l=1-(1-j((n-.99)/.01))**3,u=P({x:c.x*(1-l)+A.x*l,y:c.y*(1-l)+A.y*l});return{point:I(a,i),derivative:s,heading:u}}function R(e,t){let n=e=>!t||e.x>=t.x+20&&e.x<t.x+t.width-20&&e.y>=t.y+20&&e.y<t.y+t.height-20,r=e[0].start,i,a=0,o=0,s=0,c=0,l=n(r);for(let t of e)for(let e=1;e<=24;e++){let u=I(t,e/24),d=u.x-r.x,f=u.y-r.y,p=Math.hypot(d,f);if(a+=p,l&&=n(u),p>.01){let e=Math.atan2(f,d);if(i!==void 0){let t=Math.atan2(Math.sin(e-i),Math.cos(e-i));o+=t*t,s+=Math.abs(t),c=Math.max(c,Math.abs(t))}i=e}r=u}return{length:a,turnEnergy:o,totalTurn:s,sharpestTurn:c,inBounds:l}}function te(e,t,n){let r={x:t.x-e.x,y:t.y-e.y},i=N(r),a=P(r),o=[];if(i<=10)o.push([F(e,M(e,r,1/3),M(e,r,2/3),t)]);else{let n=Math.min(i*T,i*.9,640),r=Math.min(i*E,i*.9,640),s=M(e,A,n),c=M(t,A,-r);o.push([F(e,s,c,t)]),o.push([F(e,M(e,A,n*.65),M(t,A,-r*.65),t)]);let l=A.x*a.y-A.y*a.x<0?-1:1,u={x:a.y*l,y:-a.x*l},d=M({x:(e.x+t.x)/2,y:(e.y+t.y)/2},A,n*.16),f=Math.min(i*D,520),p=Math.min(i*O,440);for(let n of[.55,.8,1.05])for(let r of[.65,1,1.35])for(let i of[1,-1]){let l=M(d,u,f*n*i);o.push([F(e,s,M(l,a,-p*r),l),F(l,M(l,a,p*r),c,t)])}}let s=j((-.08-A.x*a.x-A.y*a.y)/.92);return o.map(e=>{let t=R(e,n),r=Math.max(0,t.length/Math.max(1,i)-1),a=e.length>1,o=t.length+320*r+140*t.turnEnergy+180*t.sharpestTurn+18*t.totalTurn+(a?45:0)+90*s,c=j(.42*j(r/.55)+.38*j(t.totalTurn/(1.4*Math.PI))+.2*j(t.turnEnergy/1.25))*.12,l=j((a?.9:1)*.9*((a?.04:0)+.28*s+.22*j((t.length-180)/760)+.42+c),.12,2.2);return{curves:e,...t,score:o,response:l}})}function ne(e,t,n){let r=te(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}),re=Math.atan2(A.y,A.x)*180/Math.PI,B=1600;function V(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 H(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=ne(i(this.position),i(e),{x:-t.x,y:-t.y,width:t.width,height:t.height});let{derivative:a}=L(this.path,0),o=a.x**2+a.y**2,s=o?(this.velocity.x*a.x+this.velocity.y*a.y)*this.pathScale/o:0;this.progress={value:0,velocity:j(s,0,5/this.path.response)}}jumpTo(e){Object.assign(this.position,e),this.target={...e},this.velocity.x=this.velocity.y=0,this.horizontal=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`)V(this.horizontal,this.target.x,.24,.84,e),V(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){V(this.progress,1,this.path.response,.9,e);let{point:t,derivative:n,heading:r}=L(this.path,this.progress.value);this.position.x=t.x/this.pathScale,this.position.y=t.y/this.pathScale;let i=this.progress.value>=1?0:this.progress.velocity/this.pathScale;this.velocity.x=n.x*i,this.velocity.y=n.y*i,this.heading=H(this.heading,Math.atan2(r.y,r.x)*180/Math.PI-re)}let n=Math.hypot(this.velocity.x,this.velocity.y)*t,r=this.kind===`scoot`?j(n/B):0,i=n>12?Math.atan2(this.velocity.y,this.velocity.x)*180/Math.PI:this.axis.value;V(this.axis,H(this.axis.value,i),.07,.82,e),V(this.baseRotation,this.kind===`curve`?this.heading:H(this.baseRotation.value,0),.09,.86,e),V(this.stretch,r,.095,.72,e);let a=n>12?j(this.velocity.x*t/n*76*r,-76,76):0;return V(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=H(0,this.baseRotation.value);return Math.abs(e)<.01&&Math.abs(this.baseRotation.velocity)<.1&&Math.abs(this.lean.value)<.01&&Math.abs(this.lean.velocity)<.1&&Math.abs(this.stretch.value)<1e-4&&Math.abs(this.stretch.velocity)<.001}get bodyTransform(){let e=j(this.stretch.value,0,1);return`rotate(${this.baseRotation.value+this.lean.value}deg) rotate(${this.axis.value}deg) scale(${1+.38*e}, ${1-.18*e}) rotate(${-this.axis.value}deg)`}},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=g(.45,.28),ue=g(1.1,0),de=g(.3,0),fe=(e,t)=>({x:e%t*496,y:Math.floor(e/t)*412});function pe(e,t,n){let r=.5,i=e-.5,a=t-.5;return`M ${r+n} ${r} H ${i-n} A ${n} ${n} 0 0 1 ${i} ${r+n} V ${a-n} A ${n} ${n} 0 0 1 ${i-n} ${a} H ${r+n} A ${n} ${n} 0 0 1 ${r} ${a-n} V ${r+n} A ${n} ${n} 0 0 1 ${r+n} ${r} Z`}function me({version:e,rows:t=4}){return(0,S.jsxs)(`div`,{className:`ld-design`,"data-v":e,children:[(0,S.jsx)(`h1`,{children:`Notifications`}),oe.slice(0,t).map(([e,t,n,r,i])=>(0,S.jsxs)(`div`,{className:`ld-n`,children:[(0,S.jsx)(`span`,{className:`ld-av`,style:{background:t},children:e}),(0,S.jsxs)(`div`,{children:[(0,S.jsx)(`div`,{className:`ld-t`,children:n}),(0,S.jsx)(`div`,{className:`ld-d`,children:r})]}),(0,S.jsx)(`span`,{className:`ld-w`,children:i})]},n))]})}function J({color:e,name:t,id:n}){return(0,S.jsxs)(`div`,{className:`cursor ld-cursor`,"data-cursor":n,style:{color:e},children:[(0,S.jsx)(`svg`,{width:`22`,height:`22`,viewBox:`0 0 24 24`,children:(0,S.jsx)(`path`,{d:c,fill:`currentColor`,stroke:`#fff`,strokeWidth:`1.5`,strokeLinejoin:`round`})}),t&&(0,S.jsx)(`span`,{className:`cursor-label`,style:{background:e},children:t})]})}function he({id:e,person:t,text:n}){let{name:r,color:i}=q[t];return(0,S.jsxs)(`div`,{className:`comment-pin ld-pin`,"data-pin":e,children:[(0,S.jsx)(l,{name:r,picture:null,color:i}),(0,S.jsxs)(`span`,{className:`comment-pin-preview`,children:[(0,S.jsxs)(`span`,{className:`comment-pin-head`,children:[(0,S.jsx)(`b`,{children:r}),` `,(0,S.jsx)(`span`,{className:`muted`,children:`now`})]}),(0,S.jsx)(`span`,{className:`comment-pin-text`,children:n})]})]})}function ge(e,t){let n=ae[t],r=t=>e.querySelector(t),i=r(`.ld-world`),a=r(`[data-zoom]`),o=r(`.ld-scene`),s=r(`.faces`),c=r(`.share-button`),l=r(`.share-sharing`),u=r(`.share-sharing i`),d=r(`.share-split`),f=r(`.ld-strokes path`),p=[...e.querySelectorAll(`.ld-frame`)],m=[...s.children],h={a:r(`[data-pin="a"]`),b:r(`[data-pin="b"]`)},_={width:n.width,height:n.height,x:0,y:0,z:1},v=new Set,y=0,b=0,x=!1,S=e=>{y=requestAnimationFrame(S);let t=Math.min(50,e-b);b=e;for(let e of v)e(t)||v.delete(e)},C=e=>{e!==x&&(x=e,cancelAnimationFrame(y),e&&(b=performance.now(),y=requestAnimationFrame(S)))},w=e=>new Promise(t=>{let n=e;v.add(e=>(n-=e,n>0||(t(),!1)))}),T=(e,t)=>new Promise(n=>{let r=0;v.add(i=>(r+=i,r<e.ms?(t(e.at(r)),!0):(t(1),n(),!1)))}),E=(e,t)=>T({ms:e,at:t=>t/e,css:``},t),D={x:0,y:0,z:1},O=e=>{D=e,i.style.transform=`translate(${e.x}px, ${e.y}px) scale(${e.z})`,i.style.setProperty(`--inv`,String(1/e.z)),i.style.setProperty(`--zoom`,String(e.z)),a.textContent=`${Math.round(e.z*100)}%`},k=e=>{let t=K.slice(0,e).map((e,t)=>fe(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}},A=e=>{let t=D;return T(ue,n=>O({x:t.x+(e.x-t.x)*n,y:t.y+(e.y-t.y)*n,z:t.z+(e.z-t.z)*n}))},j=(e,t,r,i=k(K.length))=>{let a=fe(e-1,n.columns);return{x:i.x+(a.x+U*t)*i.z,y:i.y+(a.y+W*r)*i.z}},M=e=>{let t=r(`[data-cursor="${e}"]`),n=t.querySelector(`svg`),i=new ie({x:0,y:0}),a=()=>{t.style.transform=`translate3d(${i.position.x}px, ${i.position.y}px, 0)`,n.style.transform=i.bodyTransform};return v.add(e=>(i.advance(e/1e3,1),a(),!0)),{el:t,place(e){i.jumpTo(e),t.style.opacity=`1`,a()},hide(){t.style.opacity=`0`},move(e){return i.moveTo(e,_),new Promise(e=>v.add(()=>i.kind!==`idle`||(e(),!1)))}}},N=M(`you`),P=[M(`0`),M(`1`),M(`2`)],F=e=>T(le,t=>{e.style.opacity=String(Math.min(1,t*1.6)),e.style.scale=String(.6+.4*t)}),I=async e=>{await E(90,t=>{e.style.scale=String(1-.05*t)}),await E(120,t=>{e.style.scale=String(.95+.05*t)})},L=e=>(s.style.display=``,e.style.display=``,F(e)),R=(e,t)=>{e.style.left=`${t.x}px`,e.style.top=`${t.y}px`},te=()=>{let e=j(3,.5,.5),t=k(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]})},ne=()=>{for(let e of p)e.style.opacity=`0`,e.style.scale=`0.6`;for(let e of m)e.style.opacity=`0`,e.style.scale=`0.6`,e.style.display=`none`;s.style.display=`none`;for(let e of Object.values(h))e.style.opacity=`0`,e.style.scale=`0.6`,e.classList.remove(`expanded`);for(let e of[N,...P])e.hide();c.style.display=``,l.style.display=`none`,d.style.display=`none`,f.setAttribute(`d`,``),o.style.opacity=`1`,s.style.opacity=`1`,O(k(1))},z=()=>{for(let e of[...p,...m,...Object.values(h)])e.style.opacity=`1`,e.style.scale=`1`;for(let e of m)e.style.display=``;s.style.display=``,R(h.a,j(2,.72,.34)),R(h.b,j(5,.3,.36)),h.b.classList.add(`expanded`),O(k(K.length)),f.setAttribute(`d`,ee({points:te(),size:ce})),P[0].place(j(2,.34,.8)),P[1].place(j(5,.86,.7)),P[2].place(j(3,.92,.9))},re=async()=>{let t=1500;for(;;){ne(),await w(t),t=500;for(let e=0;e<p.length;e++)F(p[e]),e&&A(k(e+1)),await w(e?720:1e3);await w(700),N.place({x:n.width*.74,y:n.height+30});let r=e.getBoundingClientRect(),i=r.width/n.width;await N.move((e=>{let t=e.getBoundingClientRect();return{x:(t.left+t.width/2-r.left)/i,y:(t.top+t.height/2-r.top)/i}})(c)),await I(c),c.style.display=`none`,l.style.display=``,u.style.width=`6%`,await T(g(1,0),e=>{u.style.width=`${6+94*e}%`}),l.style.display=`none`,d.style.display=``,d.dataset.copied=``,N.move(j(1,.8,1.08)),await w(1e3),delete d.dataset.copied,P[0].place({x:-30,y:n.height*.42}),L(m[2]),await P[0].move(j(2,.72,.34)),P[1].place({x:n.width*.3,y:n.height+30}),L(m[1]),R(h.a,j(2,.72,.34)),F(h.a),P[0].move(j(2,.34,.8)),await P[1].move(j(5,.3,.36)),R(h.b,j(5,.3,.36)),await F(h.b),await w(250),h.b.classList.add(`expanded`),P[1].move(j(5,.86,.7));let a=te();P[2].place({x:n.width+30,y:n.height*.3}),L(m[0]),await P[2].move({x:a[0][0],y:a[0][1]}),await E(1500,e=>{let t=Math.max(2,Math.ceil(e*a.length));f.setAttribute(`d`,ee({points:a.slice(0,t),size:ce}));let[n,r]=a[t-1];P[2].place({x:n,y:r})}),await w(400),P[2].move(j(3,.92,.9)),await w(1400),P[0].move(j(1,.5,.42)),await w(1100),P[1].move(j(4,.72,.62)),await w(2200),await E(420,e=>{o.style.opacity=String(1-e),s.style.opacity=String(1-e)}),await T(de,()=>{})}};if(matchMedia(`(prefers-reduced-motion: reduce)`).matches)return ne(),z(),()=>{};re();let B=new IntersectionObserver(([e])=>C(e.isIntersecting));return B.observe(e),()=>{B.disconnect(),C(!1),v.clear()}}function _e(){let e=(0,x.useRef)(null),t=(0,x.useRef)(null),[i,a]=(0,x.useState)(0),c=i&&i<720?`narrow`:`wide`,p=ae[c];(0,x.useLayoutEffect)(()=>{let t=new ResizeObserver(([e])=>a(e.contentRect.width));return t.observe(e.current),()=>t.disconnect()},[]),(0,x.useEffect)(()=>{if(i)return ge(t.current,c)},[c,i>0]);let g=i/p.width,_=25*g,[v]=(0,x.useState)(()=>window.innerWidth*1.15/Math.min(1200,window.innerWidth-32)),y=(0,x.useMemo)(()=>K.map((e,t)=>fe(t,p.columns)),[p.columns]);return(0,S.jsxs)(`div`,{ref:e,className:`ld-shell`,style:{height:i?p.height*g:void 0,borderRadius:_,"--ld-from":v},"aria-hidden":`true`,children:[i>0&&(0,S.jsx)(`svg`,{className:`ld-draw`,children:(0,S.jsx)(`path`,{d:pe(i,p.height*g,_-.5),pathLength:`1`})}),i>0&&(0,S.jsxs)(`div`,{ref:t,className:`ld-stage ld-${c}`,style:{width:p.width,height:p.height,transform:`scale(${g})`},children:[(0,S.jsxs)(`div`,{className:`ld-scene`,children:[(0,S.jsx)(`div`,{className:`world ld-world`,children:K.map((e,t)=>(0,S.jsxs)(`div`,{className:`frame ld-frame`,style:{left:y[t].x,top:y[t].y,width:U,height:W},children:[(0,S.jsx)(`div`,{className:`frame-title`,children:(0,S.jsxs)(`span`,{children:[`V`,e]})}),(0,S.jsx)(`div`,{className:`frame-surface`,children:(0,S.jsx)(me,{version:e})})]},e))}),(0,S.jsx)(`svg`,{className:`ld-strokes`,width:p.width,height:p.height,children:(0,S.jsx)(`path`,{fill:se})}),(0,S.jsx)(he,{id:`a`,person:0,text:``}),(0,S.jsx)(he,{id:`b`,person:1,text:`Can we try this one darker?`})]}),(0,S.jsx)(`div`,{className:`chrome shell top-left ld-rise`,children:(0,S.jsx)(`span`,{className:`canvas-name`,children:`Notification Explorations`})}),(0,S.jsx)(`div`,{className:`chrome shell toolbar ld-rise`,children:(0,S.jsx)(`div`,{className:`toolbar-clip`,children:(0,S.jsxs)(`div`,{className:`toolbar-row`,children:[(0,S.jsx)(`span`,{className:`tool-slider`,style:{width:50}}),(0,S.jsx)(`span`,{className:`tool`,"aria-pressed":`true`,children:(0,S.jsx)(h,{size:18})}),(0,S.jsx)(`span`,{className:`tool`,children:(0,S.jsx)(d,{size:18})}),(0,S.jsx)(`span`,{className:`tool`,children:(0,S.jsx)(m,{size:18})}),(0,S.jsx)(`span`,{className:`shell-divider`}),(0,S.jsx)(`span`,{className:`tool`,children:(0,S.jsx)(s,{size:18})})]})})}),(0,S.jsxs)(`div`,{className:`chrome shell top-right ld-rise`,children:[(0,S.jsx)(`div`,{className:`faces`,children:[2,1,0].map(e=>(0,S.jsx)(`span`,{className:`face-button`,children:(0,S.jsx)(l,{name:q[e].name,picture:null,color:q[e].color})},e))}),(0,S.jsx)(`span`,{className:`primary-button share-button`,children:`Share`}),(0,S.jsxs)(`span`,{className:`primary-button share-sharing`,style:{display:`none`},children:[(0,S.jsx)(`i`,{}),(0,S.jsx)(`span`,{children:`Share`})]}),(0,S.jsxs)(`span`,{className:`share-split`,style:{display:`none`},children:[(0,S.jsxs)(`span`,{className:`primary-button`,children:[(0,S.jsxs)(`span`,{className:`ld-copied`,children:[(0,S.jsx)(u,{size:14}),`Copied`]}),(0,S.jsx)(`span`,{className:`ld-copy`,children:`Copy link`})]}),(0,S.jsx)(`span`,{className:`primary-button`,children:(0,S.jsx)(f,{size:14})})]})]}),(0,S.jsxs)(`div`,{className:`chrome shell zoom ld-rise`,children:[(0,S.jsx)(`span`,{className:`icon-button`,children:(0,S.jsx)(n,{})}),(0,S.jsx)(`span`,{className:`shell-divider`}),(0,S.jsx)(`span`,{className:`icon-button`,children:(0,S.jsx)(o,{})}),(0,S.jsx)(`span`,{className:`zoom-value`,"data-zoom":!0,children:`100%`}),(0,S.jsx)(`span`,{className:`icon-button`,children:(0,S.jsx)(r,{})})]}),(0,S.jsxs)(`div`,{className:`ld-cursors`,children:[(0,S.jsx)(J,{id:`0`,color:q[0].color,name:q[0].name}),(0,S.jsx)(J,{id:`1`,color:q[1].color,name:q[1].name}),(0,S.jsx)(J,{id:`2`,color:q[2].color,name:q[2].name}),(0,S.jsx)(J,{id:`you`,color:`#000`})]})]},c)]})}var Y={ms:800,ease:[.45,0,.55,1]},ve=t(...Y.ease),X=[[0,`#1f283c`,`#0f1421`,`#2a3755`,`#0c1220`],[4.5,`#1a2132`,`#0d111d`,`#25304c`,`#0a0f1b`],[5.5,`#555b7c`,`#2c3149`,`#8f91b4`,`#3a4252`],[6.5,`#efc4ae`,`#8a7a84`,`#ffe1c9`,`#a79a78`],[7.5,`#f8e2c8`,`#a89c94`,`#fff5e4`,`#b9c39a`],[10,`#fcfaf4`,`#adaca6`,`#ffffff`,`#c9d8bb`],[13,`#ffffff`,`#acadac`,`#ffffff`,`#d3e0c8`],[16,`#faf2e3`,`#aaa193`,`#fffbf1`,`#c7d0a7`],[18,`#e9bd95`,`#a07f62`,`#ffdcb2`,`#a89a62`],[19,`#da9570`,`#7a5a50`,`#ffb78c`,`#6d5f4b`],[19.75,`#84678a`,`#4a4262`,`#b78fa8`,`#3b3550`],[20.75,`#2f3756`,`#1a1f33`,`#3f4a70`,`#141a2c`],[24,`#1f283c`,`#0f1421`,`#2a3755`,`#0c1220`]],ye=e=>[1,3,5].map(t=>(parseInt(e.slice(t,t+2),16)/255)**2.2),be=e=>`#${e.map(e=>Math.round(e**(1/2.2)*255).toString(16).padStart(2,`0`)).join(``)}`,xe=new URLSearchParams(location.search).get(`hour`),Se=()=>{if(xe!==null)return Number(xe);let e=new Date;return e.getHours()+e.getMinutes()/60};function Ce(){let[e,t]=(0,x.useState)(Se);return(0,x.useEffect)(()=>{let e=()=>t(Se()),n=window.setInterval(e,3e4);return document.addEventListener(`visibilitychange`,e),()=>{window.clearInterval(n),document.removeEventListener(`visibilitychange`,e)}},[]),e}function we(e){let{lit:t,shade:n}=Te(e),[r,i,a]=t.map((e,t)=>n[t]+(e-n[t])*.6);return{lit:be(t),shade:be(n),dark:.2126*r+.7152*i+.0722*a<.18}}function Te(e){let t=Math.max(1,X.findIndex(([t])=>t>=e)),[n,...r]=X[t-1],[i,...a]=X[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,x.useRef)(null),r=(0,x.useRef)(e),i=(0,x.useRef)(e),a=(0,x.useRef)(null),o=(0,x.useRef)(null);return(0,x.useEffect)(()=>{a.current=t?{from:i.current,at:performance.now()}:null,r.current=e,o.current?.()},[e]),(0,x.useEffect)(()=>{let e=n.current,t=e.getContext(`webgl2`,{antialias:!1,alpha:!1});if(!t)return;let s=t.createProgram();for(let[e,n]of[[t.VERTEX_SHADER,Ee],[t.FRAGMENT_SHADER,De]]){let r=t.createShader(e);t.shaderSource(r,n),t.compileShader(r),t.attachShader(s,r)}t.bindAttribLocation(s,0,`a`),t.linkProgram(s),t.useProgram(s),t.bindBuffer(t.ARRAY_BUFFER,t.createBuffer()),t.bufferData(t.ARRAY_BUFFER,new Float32Array([-1,-1,3,-1,-1,3]),t.STATIC_DRAW),t.enableVertexAttribArray(0),t.vertexAttribPointer(0,2,t.FLOAT,!1,0,0),t.bindTexture(t.TEXTURE_2D,t.createTexture()),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,t.RGBA,t.UNSIGNED_BYTE,Oe()),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.REPEAT),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.REPEAT);let c=e=>t.getUniformLocation(s,e),l=(n,r)=>{let{clientWidth:i,clientHeight:a}=e;(e.width!==i||e.height!==a)&&(e.width=i,e.height=a,t.viewport(0,0,i,a));let o=Te(r);t.uniform2f(c(`uRes`),i,a),t.uniform1f(c(`uTime`),n),t.uniform1f(c(`uGust`),Z.gust),t.uniform1f(c(`uFlutter`),Z.flutter),t.uniform1f(c(`uLeafSize`),Z.leafSize),t.uniform1f(c(`uShadow`),Z.shadow),t.uniform1f(c(`uSoft`),Z.softness),t.uniform1f(c(`uSunStrength`),Z.sun),t.uniform1f(c(`uSkyLeaves`),Z.skyLeaves),t.uniform3fv(c(`uSun`),o.sun),t.uniform3fv(c(`uLit`),o.lit),t.uniform3fv(c(`uShade`),o.shade),t.uniform3fv(c(`uSky`),o.sky),t.uniform3fv(c(`uLeaf`),o.leaf),t.drawArrays(t.TRIANGLES,0,3)};if(matchMedia(`(prefers-reduced-motion: reduce)`).matches){o.current=()=>l(0,r.current);let t=new ResizeObserver(()=>l(0,r.current));return t.observe(e),()=>{o.current=null,t.disconnect()}}let u=performance.now(),d=u/1e3,f=requestAnimationFrame(function e(t){let n=a.current;if(n){let e=Math.min(1,Math.max(0,(t-n.at)/Y.ms));i.current=n.from+(r.current-n.from)*ve(e),e===1&&(a.current=null)}else i.current+=(r.current-i.current)*(1-Math.exp((u-t)*.002));d+=(t-u)/1e3*Z.wind,u=t,l(d,i.current),f=requestAnimationFrame(e)});return()=>cancelAnimationFrame(f)},[]),(0,S.jsx)(`canvas`,{ref:n,className:`window-light`,"aria-hidden":`true`})}var je=new URLSearchParams(location.search).get(`hero`)!==`1`,Me=(0,x.lazy)(()=>b(()=>import(`./LandingStage-IBFG9NPs.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=g(.8,0),Re=g(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={})=>a(`/api/events`,{event:e,visit:We,headline:Ie,...t});function Ke(){let e=(0,x.useRef)(null),t=(0,x.useRef)(null);return(0,x.useEffect)(()=>{if(matchMedia(`(prefers-reduced-motion: reduce)`).matches)return;let n=[0,0,0,0],r=[0,0,0,0],i=0,a=!1,o=()=>{let e=!0;r.forEach((t,i)=>{r[i]=t+(n[i]-t)*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,x.useState)(!1),n=(0,x.useRef)(0);(0,x.useEffect)(()=>()=>window.clearTimeout(n.current),[]);let r=()=>{t(!0),window.clearTimeout(n.current),n.current=window.setTimeout(()=>t(!1),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,x.useEffect)(()=>(window.addEventListener(w,n),()=>window.removeEventListener(w,n)),[]),(0,S.jsx)(`span`,{ref:r,className:`landing-magnet`,children:(0,S.jsx)(`div`,{ref:i,className:`landing-cta`,children:(0,S.jsxs)(`button`,{type:`button`,className:`landing-button`,"data-copied":e||void 0,onClick:()=>t(p),children:[(0,S.jsxs)(`span`,{className:`landing-states`,children:[(0,S.jsxs)(`span`,{className:`landing-state`,children:[(0,S.jsx)(C,{}),(0,S.jsx)(`span`,{className:`landing-label`,children:`Copy agent prompt`})]}),(0,S.jsxs)(`span`,{className:`landing-state`,"aria-hidden":`true`,children:[(0,S.jsx)(`svg`,{className:`landing-check`,viewBox:`0 0 18 18`,children:(0,S.jsx)(`path`,{d:`M3.5 9.5 7.25 13.25 14.5 5`,pathLength:`1`})}),(0,S.jsx)(`span`,{className:`landing-done`,children:`Copied`})]})]}),(0,S.jsx)(`span`,{className:`landing-sr`,"aria-live":`polite`,children:e?`Copied`:``})]})})})}function Ye(){let e=0;return(0,S.jsx)(`h1`,{className:`landing-title`,children:Ne[Ie].map((t,n)=>(0,S.jsxs)(x.Fragment,{children:[n>0&&(0,S.jsx)(`br`,{}),t.map((t,n)=>(0,S.jsxs)(x.Fragment,{children:[(0,S.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,x.useEffect)(()=>{Ge(`landing_viewed`,{url:location.href,referrer:document.referrer})},[]);let t=Ce(),[n,r]=(0,x.useState)(null),[i,a]=(0,x.useState)(!1),o=(e,t=!1)=>{r(e),a(t)},s=n??t,{lit:c,shade:l,dark:u}=we(s),[d,f]=(0,x.useState)(!1),p=(0,x.useRef)(u);return(0,x.useEffect)(()=>{if(p.current===u)return;p.current=u,f(!0);let e=window.setTimeout(()=>f(!1),Y.ms);return()=>window.clearTimeout(e)},[u]),(0,x.useEffect)(()=>{document.body.style.background=c,document.body.style.colorScheme=u?`dark`:`light`},[c,u]),(0,S.jsxs)(`div`,{className:`landing`,"data-dark":u||void 0,"data-shifting":d||void 0,"data-glide":i||void 0,style:{"--lit":c,"--shade":l,"--shift-ms":`${Y.ms}ms`,"--shift-ease":`cubic-bezier(${Y.ease.join(`, `)})`,"--word-ease":Le.css,"--word-ms":`${Le.ms}ms`,"--rise-ease":Re.css,"--rise-ms":`${Re.ms}ms`},children:[(0,S.jsx)(Ae,{hour:s,glide:i}),(0,S.jsxs)(`nav`,{className:`landing-nav`,"aria-label":`Main`,children:[(0,S.jsx)(`a`,{className:`wordmark`,href:`/`,children:(0,S.jsx)(y,{})}),(0,S.jsxs)(`div`,{className:`landing-nav-end`,children:[(0,S.jsx)(v,{hour:s,onHour:o}),(0,S.jsx)(`a`,{className:`landing-sign-in`,href:`/auth/google/start?next=/`,onClick:()=>Ge(`sign_in_clicked`),children:`Sign in`})]})]}),(0,S.jsxs)(`main`,{className:`landing-hero`,children:[(0,S.jsx)(Ye,{}),(0,S.jsx)(`p`,{className:`landing-body`,children:`Get feedback, huddle, and iterate with your team on a canvas beside your agent.`}),(0,S.jsx)(`div`,{className:`landing-actions`,children:(0,S.jsx)(Je,{})}),je?(0,S.jsx)(`div`,{className:`landing-slot`,children:(0,S.jsx)(x.Suspense,{fallback:null,children:(0,S.jsx)(Me,{dark:u})})}):(0,S.jsx)(_e,{})]}),(0,S.jsxs)(`footer`,{className:`landing-foot`,children:[(0,S.jsxs)(`span`,{children:[`© Materic, Inc. `,new Date().getFullYear()]}),(0,S.jsxs)(`nav`,{children:[(0,S.jsx)(`a`,{href:`/privacy`,children:`Privacy`}),(0,S.jsx)(`a`,{href:`/terms`,children:`Terms`})]})]})]})}export{Xe as Landing,w as t};
|