twombly 0.4.0 → 0.4.1
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 +42 -16
- package/dist/ui/assets/Landing-CrWkZ8qH.css +1 -0
- package/dist/ui/assets/Landing-J2K0EUo5.js +111 -0
- package/dist/ui/assets/LandingStage-BcivO6Eh.css +1 -0
- package/dist/ui/assets/{LandingStage-cWuvBaKD.js → LandingStage-u99Kd45d.js} +1 -1
- package/dist/ui/assets/agentPrompt-osLcSdHt.js +1 -0
- package/dist/ui/assets/index-DHQst-JO.css +1 -0
- package/dist/ui/assets/index-Dk5KUFe_.js +10 -0
- package/dist/ui/index.html +11 -4
- package/dist/ui/privacy.html +3 -0
- package/dist/ui/sitemap.xml +6 -0
- package/dist/ui/terms.html +2 -0
- package/package.json +1 -1
- package/dist/ui/assets/Landing-D4-acwRF.js +0 -111
- package/dist/ui/assets/Landing-Da4YRp2T.css +0 -1
- package/dist/ui/assets/LandingStage-CqdIuQDE.css +0 -1
- package/dist/ui/assets/agentPrompt-Bg7-ijHJ.js +0 -1
- package/dist/ui/assets/index-COkd0b_O.js +0 -10
- package/dist/ui/assets/index-DBaMyh-f.css +0 -1
package/dist/cli.js
CHANGED
|
@@ -33,6 +33,7 @@ var FORBIDDEN = [
|
|
|
33
33
|
{ test: /\.map$/i, code: "SOURCE_MAP", what: "a source map", fix: "Source maps publish original source code. Turn them off in the build or delete the .map files." },
|
|
34
34
|
{ test: /(^|\/)\.next\/(server|cache)(\/|$)/, code: "SERVER_CODE", what: "server output from Next.js", fix: 'Use a static export (output: "export") and add its output folder.' },
|
|
35
35
|
{ test: /\.(php|rb|py|go|rs|java|cs|sh|bash|zsh|exe|dll|so|dylib)$/i, code: "SERVER_CODE", what: "server or native code" },
|
|
36
|
+
{ test: /\.(zip|7z|rar|tar|tgz|dmg|pkg|mpkg|msi|msix|appx|apk|aab|ipa|jar|deb|rpm|appimage|iso|bat|cmd|ps1|vbs|scr|xpi|crx)$/i, code: "DOWNLOAD_FILE", what: "an installer or archive", fix: "Frames show a design; they don't hand out files. Delete it from the folder." },
|
|
36
37
|
{ test: /(^|\/)(package(-lock)?\.json|pnpm-lock\.yaml|yarn\.lock|bun\.lockb?|tsconfig\.json|wrangler\.(toml|jsonc?)|dockerfile|docker-compose\.ya?ml)$/i, code: "PROJECT_FILE", what: "a project file", fix: "That looks like a project folder. Build first and add the output folder only." }
|
|
37
38
|
];
|
|
38
39
|
function checkPath(path) {
|
|
@@ -198,7 +199,7 @@ function frameCsp(ancestors) {
|
|
|
198
199
|
`frame-ancestors ${ancestors.join(" ")}`
|
|
199
200
|
].join("; ");
|
|
200
201
|
}
|
|
201
|
-
var FRAME_SANDBOX = "allow-scripts allow-same-origin allow-forms allow-modals allow-pointer-lock
|
|
202
|
+
var FRAME_SANDBOX = "allow-scripts allow-same-origin allow-forms allow-modals allow-pointer-lock";
|
|
202
203
|
var FRAME_BRIDGE_PATH = "/__twombly/bridge.js";
|
|
203
204
|
var FRAME_POSTER_PATH = "/__twombly/poster.png";
|
|
204
205
|
var FRAME_BRIDGE_JS = `(() => {
|
|
@@ -244,6 +245,9 @@ function cleanStroke(input) {
|
|
|
244
245
|
}
|
|
245
246
|
var WORKING_MS = 3 * 6e4;
|
|
246
247
|
var WORKING_TAIL_MS = 3e4;
|
|
248
|
+
function cleanSettings(value) {
|
|
249
|
+
return { invertScroll: value?.invertScroll === true, theme: value?.theme === "light" || value?.theme === "dark" ? value.theme : void 0 };
|
|
250
|
+
}
|
|
247
251
|
var COLORS = ["#F24822", "#FF7A00", "#14AE5C", "#0D99FF", "#9747FF", "#E5277B", "#00B5B8", "#7B61FF"];
|
|
248
252
|
function colorOf(id) {
|
|
249
253
|
let h = 0;
|
|
@@ -593,7 +597,7 @@ var checkedAt = 0;
|
|
|
593
597
|
function interfaceFolders() {
|
|
594
598
|
if (OVERRIDE) return [OVERRIDE];
|
|
595
599
|
const folder = (released) => join5(STORE, String(released));
|
|
596
|
-
return [...saved.filter((released) => released >
|
|
600
|
+
return [...saved.filter((released) => released > 1793935262296).map(folder), BUNDLED, ...saved.filter((released) => released <= 1793935262296).map(folder)];
|
|
597
601
|
}
|
|
598
602
|
function unpack(body) {
|
|
599
603
|
const { payload, signature } = JSON.parse(body);
|
|
@@ -627,7 +631,7 @@ async function check() {
|
|
|
627
631
|
const release = unpack(body);
|
|
628
632
|
if (!release) return;
|
|
629
633
|
etag = response.headers.get("etag") || "";
|
|
630
|
-
if (release.released > Math.max(saved[0] ?? 0,
|
|
634
|
+
if (release.released > Math.max(saved[0] ?? 0, 1793935262296)) await install(release.released, release.files);
|
|
631
635
|
}
|
|
632
636
|
function startCheck() {
|
|
633
637
|
if (checking) return;
|
|
@@ -783,8 +787,7 @@ import { mkdir as mkdir5, readFile as readFile4, rename as rename3, writeFile as
|
|
|
783
787
|
import { join as join7 } from "node:path";
|
|
784
788
|
var FILE = join7(HOME, "settings.json");
|
|
785
789
|
async function readSettings() {
|
|
786
|
-
|
|
787
|
-
return { invertScroll: saved2?.invertScroll === true, theme: saved2?.theme === "light" || saved2?.theme === "dark" ? saved2.theme : void 0 };
|
|
790
|
+
return cleanSettings(await readFile4(FILE, "utf8").then(JSON.parse).catch(() => null));
|
|
788
791
|
}
|
|
789
792
|
async function writeSettings(settings2) {
|
|
790
793
|
await mkdir5(HOME, { recursive: true });
|
|
@@ -845,7 +848,7 @@ async function flush() {
|
|
|
845
848
|
save();
|
|
846
849
|
if (!usageOn() || !Object.values(counts).some(Boolean)) return;
|
|
847
850
|
const canvases2 = Object.keys(await readRegistry()).length;
|
|
848
|
-
await post("/api/usage", { install: state.install, day, version: "0.4.
|
|
851
|
+
await post("/api/usage", { install: state.install, day, version: "0.4.1", platform: process.platform, counts: { ...counts, canvases: canvases2 } }).catch(() => {
|
|
849
852
|
});
|
|
850
853
|
}
|
|
851
854
|
async function startUsage() {
|
|
@@ -863,7 +866,7 @@ function reportError(error, source = "tool") {
|
|
|
863
866
|
source,
|
|
864
867
|
mode: "local",
|
|
865
868
|
install: state?.install,
|
|
866
|
-
version: "0.4.
|
|
869
|
+
version: "0.4.1",
|
|
867
870
|
type: String(error.type || "Error").slice(0, 80),
|
|
868
871
|
message: scrub(String(error.message), 500),
|
|
869
872
|
stack: scrub(String(error.stack || ""), 4e3)
|
|
@@ -898,6 +901,7 @@ function loginUrl() {
|
|
|
898
901
|
function setCredential(next) {
|
|
899
902
|
credential = next;
|
|
900
903
|
for (const canvas of canvases.values()) canvas.event({ t: "auth", me: next?.me || null });
|
|
904
|
+
if (next) syncSettings();
|
|
901
905
|
}
|
|
902
906
|
async function edge(path, init = {}) {
|
|
903
907
|
if (!credential) throw new Failure(401, "Sign in first");
|
|
@@ -914,6 +918,23 @@ async function edge(path, init = {}) {
|
|
|
914
918
|
if (!response.ok) throw new Failure(response.status, data.error || `The server answered ${response.status}`, data.problems ? { problems: data.problems } : void 0);
|
|
915
919
|
return data;
|
|
916
920
|
}
|
|
921
|
+
async function useSettings(next) {
|
|
922
|
+
if (JSON.stringify(next) === JSON.stringify(settings)) return;
|
|
923
|
+
settings = next;
|
|
924
|
+
await writeSettings(settings);
|
|
925
|
+
for (const canvas of canvases.values()) canvas.event({ t: "settings", settings });
|
|
926
|
+
}
|
|
927
|
+
var settingsChosen = 0;
|
|
928
|
+
function syncSettings() {
|
|
929
|
+
if (!credential) return;
|
|
930
|
+
const chosen = settingsChosen;
|
|
931
|
+
edge("/api/settings").then(({ settings: account }) => {
|
|
932
|
+
if (chosen !== settingsChosen) return;
|
|
933
|
+
if (account) return useSettings(account);
|
|
934
|
+
if (settings.invertScroll || settings.theme) return edge("/api/settings", { method: "POST", body: JSON.stringify(settings) });
|
|
935
|
+
}).catch(() => {
|
|
936
|
+
});
|
|
937
|
+
}
|
|
917
938
|
var STROKE_UPLOAD = 40;
|
|
918
939
|
var THREAD_UPLOAD_CHARS = 5e5;
|
|
919
940
|
var THREAD_ID = /^[a-z0-9]{8,32}$/;
|
|
@@ -1674,7 +1695,7 @@ async function servePreview(response, canvasId, frameId) {
|
|
|
1674
1695
|
async function route(request, response) {
|
|
1675
1696
|
const url = new URL(request.url || "/", DAEMON_ORIGIN);
|
|
1676
1697
|
const path = url.pathname, method = request.method || "GET";
|
|
1677
|
-
if (path === "/health") return reply(response, 200, { ok: true, build: "0.4.
|
|
1698
|
+
if (path === "/health") return reply(response, 200, { ok: true, build: "0.4.1+1793935262296", api: TOOL_API, pid: process.pid });
|
|
1678
1699
|
if (path.startsWith("/cli/") && method === "POST") return reply(response, 200, await command(path.slice(5), await readBody(request)));
|
|
1679
1700
|
if (path === "/auth/callback" && method === "GET") {
|
|
1680
1701
|
const code = url.searchParams.get("code"), state2 = url.searchParams.get("state");
|
|
@@ -1696,6 +1717,7 @@ async function route(request, response) {
|
|
|
1696
1717
|
const canvas = id ? await canvasById(id).catch(() => null) : null;
|
|
1697
1718
|
if (canvas?.data.remote) await canvas.pull().catch(() => {
|
|
1698
1719
|
});
|
|
1720
|
+
syncSettings();
|
|
1699
1721
|
const body = {
|
|
1700
1722
|
mode: "local",
|
|
1701
1723
|
me: credential?.me || null,
|
|
@@ -1707,10 +1729,13 @@ async function route(request, response) {
|
|
|
1707
1729
|
if (path === "/api/login" && method === "POST") return reply(response, 200, await command("login", {}));
|
|
1708
1730
|
if (path === "/api/settings" && method === "POST") {
|
|
1709
1731
|
const { invertScroll, theme } = await readBody(request);
|
|
1710
|
-
|
|
1711
|
-
|
|
1712
|
-
|
|
1713
|
-
|
|
1732
|
+
let next = settings;
|
|
1733
|
+
settingsChosen++;
|
|
1734
|
+
if (typeof invertScroll === "boolean") next = { ...next, invertScroll };
|
|
1735
|
+
if (theme === "light" || theme === "dark") next = { ...next, theme };
|
|
1736
|
+
await useSettings(next);
|
|
1737
|
+
if (credential) await edge("/api/settings", { method: "POST", body: JSON.stringify(next) }).catch(() => {
|
|
1738
|
+
});
|
|
1714
1739
|
return reply(response, 200, settings);
|
|
1715
1740
|
}
|
|
1716
1741
|
const match = path.match(/^\/api\/canvases\/([a-z0-9]+)\/(ticket|share|unshare)$/);
|
|
@@ -1752,6 +1777,7 @@ function touch() {
|
|
|
1752
1777
|
async function runDaemon() {
|
|
1753
1778
|
credential = await readCredential();
|
|
1754
1779
|
settings = await readSettings();
|
|
1780
|
+
syncSettings();
|
|
1755
1781
|
const server = createServer2(async (request, response) => {
|
|
1756
1782
|
if (!trusted(request)) {
|
|
1757
1783
|
response.writeHead(403, JSON_HEADERS);
|
|
@@ -2000,7 +2026,7 @@ async function runGates(folder, options) {
|
|
|
2000
2026
|
}
|
|
2001
2027
|
|
|
2002
2028
|
// src/cli.ts
|
|
2003
|
-
var HELP = `twombly ${"0.4.
|
|
2029
|
+
var HELP = `twombly ${"0.4.1"}: put design explorations on a shared canvas.
|
|
2004
2030
|
|
|
2005
2031
|
init [--name "Name"] [--no-open] create or join this folder's canvas
|
|
2006
2032
|
init --canvas "Name" [--no-open] create or join a separate named canvas in this folder
|
|
@@ -2102,12 +2128,12 @@ async function health() {
|
|
|
2102
2128
|
var builtAt = (build) => Number(build.split("+")[1]) || 0;
|
|
2103
2129
|
var sleep = (ms) => new Promise((done) => setTimeout(done, ms));
|
|
2104
2130
|
var IDLE_WAIT_MS = 6e4;
|
|
2105
|
-
var usable = (running) => !!running && (running.build === "0.4.
|
|
2131
|
+
var usable = (running) => !!running && (running.build === "0.4.1+1793935262296" || running.api === TOOL_API && builtAt(running.build) > builtAt("0.4.1+1793935262296"));
|
|
2106
2132
|
async function ensureDaemon() {
|
|
2107
2133
|
const running = await health();
|
|
2108
2134
|
if (usable(running)) return;
|
|
2109
2135
|
if (running) {
|
|
2110
|
-
if (builtAt(running.build) > builtAt("0.4.
|
|
2136
|
+
if (builtAt(running.build) > builtAt("0.4.1+1793935262296")) fail("A newer twombly is running on this machine. Run this with twombly@latest.");
|
|
2111
2137
|
let stopped = false;
|
|
2112
2138
|
for (const end = Date.now() + IDLE_WAIT_MS; !stopped && Date.now() < end; ) {
|
|
2113
2139
|
const answer = await fetch(`${DAEMON_ORIGIN}/cli/stop`, { method: "POST", body: '{"ifIdle":true}' }).then((response) => response.json()).catch(() => ({ stopped: true }));
|
|
@@ -2328,7 +2354,7 @@ async function main() {
|
|
|
2328
2354
|
return;
|
|
2329
2355
|
case "--version":
|
|
2330
2356
|
case "version":
|
|
2331
|
-
process.stdout.write("0.4.
|
|
2357
|
+
process.stdout.write("0.4.1\n");
|
|
2332
2358
|
return;
|
|
2333
2359
|
case "guide":
|
|
2334
2360
|
process.stdout.write(SKILL_default);
|
|
@@ -0,0 +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}}
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/LandingStage-u99Kd45d.js","assets/rolldown-runtime-WkwZ5CU-.js","assets/agentPrompt-osLcSdHt.js","assets/index-Dk5KUFe_.js","assets/index-DHQst-JO.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,Lt as i,N as a,Rt as o,S as s,St as c,T as l,i as u,j as d,o as f,p,s as m,t as h,u as g,w as ee}from"./agentPrompt-osLcSdHt.js";import{n as _,r as v,t as y}from"./index-Dk5KUFe_.js";var b=e(o(),1),x=a();function te(){return(0,x.jsxs)(`span`,{className:`landing-marks`,"aria-hidden":`true`,children:[(0,x.jsx)(`svg`,{viewBox:`0 0 24 24`,fill:`currentColor`,children:(0,x.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,x.jsx)(`svg`,{viewBox:`0 0 24 24`,fill:`currentColor`,children:(0,x.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 S=`twombly:show-copied`,C=.41960295031576633,w=.15,T=.2765523188064277,E=.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*C,i*.9,640),r=Math.min(i*w,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*T,520),p=Math.min(i*E,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 ne(e,t,n){let r=L(e,t,n),i=r.filter(e=>e.inBounds);return(i.length?i:r).reduce((e,t)=>t.score<e.score?t:e)}var R=(e=0)=>({value:e,velocity:0}),re=Math.atan2(O.y,O.x)*180/Math.PI,ie=1600;function z(e,t,n,r,i){let a=2*Math.PI/n,o=r*a,s=a*Math.sqrt(1-r*r),c=e.value-t,l=(e.velocity+o*c)/s,u=Math.cos(s*i),d=Math.sin(s*i),f=Math.exp(-o*i);e.value=t+f*(c*u+l*d),e.velocity=f*(-o*(c*u+l*d)+s*(-c*d+l*u))}function B(e,t){return e+Math.atan2(Math.sin((t-e)*Math.PI/180),Math.cos((t-e)*Math.PI/180))*180/Math.PI}var ae=class{position;velocity={x:0,y:0};kind=`idle`;target;path;pathScale=1;progress=R();horizontal;vertical;axis=R();baseRotation=R();lean=R();stretch=R();heading=0;constructor(e){this.position={...e},this.target={...e},this.horizontal=R(e.x),this.vertical=R(e.y)}moveTo(e,t,n=!1){if(!Number.isFinite(e.x)||!Number.isFinite(e.y))return;if(this.target={...e},n){this.jumpTo(e);return}this.pathScale=Math.max(.001,t.z);let r=Math.hypot(e.x-this.position.x,e.y-this.position.y)*this.pathScale;if(r<.01&&Math.hypot(this.velocity.x,this.velocity.y)*this.pathScale<12){this.jumpTo(e);return}if(this.horizontal={value:this.position.x,velocity:this.velocity.x},this.vertical={value:this.position.y,velocity:this.velocity.y},this.kind=r<=196?`scoot`:`curve`,this.kind===`scoot`){this.path=void 0;return}let i=e=>({x:e.x*this.pathScale,y:e.y*this.pathScale});this.path=ne(i(this.position),i(e),{x:-t.x,y:-t.y,width:t.width,height:t.height});let{derivative:a}=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=R(e.x),this.vertical=R(e.y),this.axis=R(),this.baseRotation=R(),this.lean=R(),this.stretch=R(),this.progress=R(),this.path=void 0,this.heading=0,this.kind=`idle`}translateBy(e,t){if(Number.isFinite(e)&&Number.isFinite(t)&&(e||t)&&(this.position.x+=e,this.position.y+=t,this.target.x+=e,this.target.y+=t,this.horizontal.value+=e,this.vertical.value+=t,this.path)){let n=n=>({x:n.x+e*this.pathScale,y:n.y+t*this.pathScale});this.path.curves=this.path.curves.map(e=>({start:n(e.start),outgoing:n(e.outgoing),incoming:n(e.incoming),end:n(e.end)}))}}advance(e,t=this.pathScale){if(!(e>0)||!Number.isFinite(e)||this.kind===`idle`&&this.deformationSettled())return!1;if(this.kind===`scoot`)z(this.horizontal,this.target.x,.24,.84,e),z(this.vertical,this.target.y,.24,.84,e),this.position.x=this.horizontal.value,this.position.y=this.vertical.value,this.velocity.x=this.horizontal.velocity,this.velocity.y=this.vertical.velocity;else if(this.kind===`curve`&&this.path){z(this.progress,1,this.path.response,.9,e);let{point:t,derivative:n,heading:r}=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=B(this.heading,Math.atan2(r.y,r.x)*180/Math.PI-re)}let n=Math.hypot(this.velocity.x,this.velocity.y)*t,r=this.kind===`scoot`?k(n/ie):0,i=n>12?Math.atan2(this.velocity.y,this.velocity.x)*180/Math.PI:this.axis.value;z(this.axis,B(this.axis.value,i),.07,.82,e),z(this.baseRotation,this.kind===`curve`?this.heading:B(this.baseRotation.value,0),.09,.86,e),z(this.stretch,r,.095,.72,e);let a=n>12?k(this.velocity.x*t/n*76*r,-76,76):0;return z(this.lean,a,.055,.76,e),Math.hypot(this.target.x-this.position.x,this.target.y-this.position.y)*t<.05&&n<12&&(this.kind!==`curve`||Math.abs(this.progress.value-1)<.001)&&(Object.assign(this.position,this.target),this.velocity.x=this.velocity.y=0,this.kind=`idle`,this.path=void 0),this.kind===`idle`&&this.deformationSettled()&&(this.baseRotation=R(),this.lean=R(),this.stretch=R()),!0}deformationSettled(){let e=B(0,this.baseRotation.value);return Math.abs(e)<.01&&Math.abs(this.baseRotation.velocity)<.1&&Math.abs(this.lean.value)<.01&&Math.abs(this.lean.velocity)<.1&&Math.abs(this.stretch.value)<1e-4&&Math.abs(this.stretch.velocity)<.001}get bodyTransform(){let e=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)`}},oe={wide:{width:1280,height:720,columns:3},narrow:{width:640,height:760,columns:2}},V=440,H=340,U={top:84,right:64,bottom:64,left:64},W=[1,2,3,4,5,6],G=[{name:`Avery Kim`,color:`#3b82f6`},{name:`Mo Rivera`,color:`#10b981`},{name:`Jules Sato`,color:`#f59e0b`}],se=[[`AK`,`#3b82f6`,`Avery Kim`,`commented on Checkout redesign`,`2m`],[`MR`,`#10b981`,`Mo Rivera`,`approved your pull request`,`14m`],[`JS`,`#f59e0b`,`Jules Sato`,`shared Q4 roadmap with you`,`1h`],[`TN`,`#ef4444`,`Tess Novak`,`mentioned you in Launch plan`,`3h`],[`RO`,`#8b5cf6`,`Rae Okafor`,`invited you to Brand review`,`5h`],[`LB`,`#0ea5e9`,`Lee Brandt`,`resolved your comment`,`1d`],[`NH`,`#ec4899`,`Noor Haddad`,`added you to Onboarding`,`2d`],[`IC`,`#14b8a6`,`Ines Costa`,`replied to your comment`,`2d`],[`DV`,`#f97316`,`Dev Varma`,`shared Pricing page with you`,`3d`]],ce=`#e5484d`,le=5,ue=t(.45,.28),de=t(1.1,0),fe=t(.3,0),K=(e,t)=>({x:e%t*496,y:Math.floor(e/t)*412});function pe(e,t,n){let r=.5,i=e-.5,a=t-.5;return`M ${r+n} ${r} H ${i-n} A ${n} ${n} 0 0 1 ${i} ${r+n} V ${a-n} A ${n} ${n} 0 0 1 ${i-n} ${a} H ${r+n} A ${n} ${n} 0 0 1 ${r} ${a-n} V ${r+n} A ${n} ${n} 0 0 1 ${r+n} ${r} Z`}function me({version:e,rows:t=4}){return(0,x.jsxs)(`div`,{className:`ld-design`,"data-v":e,children:[(0,x.jsx)(`h1`,{children:`Notifications`}),se.slice(0,t).map(([e,t,n,r,i])=>(0,x.jsxs)(`div`,{className:`ld-n`,children:[(0,x.jsx)(`span`,{className:`ld-av`,style:{background:t},children:e}),(0,x.jsxs)(`div`,{children:[(0,x.jsx)(`div`,{className:`ld-t`,children:n}),(0,x.jsx)(`div`,{className:`ld-d`,children:r})]}),(0,x.jsx)(`span`,{className:`ld-w`,children:i})]},n))]})}function q({color:e,name:t,id:n}){return(0,x.jsxs)(`div`,{className:`cursor ld-cursor`,"data-cursor":n,style:{color:e},children:[(0,x.jsx)(`svg`,{width:`22`,height:`22`,viewBox:`0 0 24 24`,children:(0,x.jsx)(`path`,{d:u,fill:`currentColor`,stroke:`#fff`,strokeWidth:`1.5`,strokeLinejoin:`round`})}),t&&(0,x.jsx)(`span`,{className:`cursor-label`,style:{background:e},children:t})]})}function he({id:e,person:t,text:n}){let{name:r,color:i}=G[t];return(0,x.jsxs)(`div`,{className:`comment-pin ld-pin`,"data-pin":e,children:[(0,x.jsx)(d,{name:r,picture:null,color:i}),(0,x.jsxs)(`span`,{className:`comment-pin-preview`,children:[(0,x.jsxs)(`span`,{className:`comment-pin-head`,children:[(0,x.jsx)(`b`,{children:r}),` `,(0,x.jsx)(`span`,{className:`muted`,children:`now`})]}),(0,x.jsx)(`span`,{className:`comment-pin-text`,children:n})]})]})}function ge(e,n){let r=oe[n],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`),p=i(`.ld-strokes path`),m=[...e.querySelectorAll(`.ld-frame`)],h=[...c.children],g={a:i(`[data-pin="a"]`),b:i(`[data-pin="b"]`)},ee={width:r.width,height:r.height,x:0,y:0,z:1},_=new Set,y=0,b=0,x=!1,te=e=>{y=requestAnimationFrame(te);let t=Math.min(50,e-b);b=e;for(let e of _)e(t)||_.delete(e)},S=e=>{e!==x&&(x=e,cancelAnimationFrame(y),e&&(b=performance.now(),y=requestAnimationFrame(te)))},C=e=>new Promise(t=>{let n=e;_.add(e=>(n-=e,n>0||(t(),!1)))}),w=(e,t)=>new Promise(n=>{let r=0;_.add(i=>(r+=i,r<e.ms?(t(e.at(r)),!0):(t(1),n(),!1)))}),T=(e,t)=>w({ms:e,at:t=>t/e,css:``},t),E={x:0,y:0,z:1},D=e=>{E=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=W.slice(0,e).map((e,t)=>K(t,r.columns)),n=Math.max(...t.map(e=>e.x))+V,i=Math.max(...t.map(e=>e.y))+H,a={width:r.width-U.left-U.right,height:r.height-U.top-U.bottom},o=Math.min(1,a.width/n,a.height/i);return{z:o,x:U.left+(a.width-n*o)/2,y:U.top+(a.height-i*o)/2}},k=e=>{let t=E;return w(de,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,n,i=O(W.length))=>{let a=K(e-1,r.columns);return{x:i.x+(a.x+V*t)*i.z,y:i.y+(a.y+H*n)*i.z}},j=e=>{let t=i(`[data-cursor="${e}"]`),n=t.querySelector(`svg`),r=new ae({x:0,y:0}),a=()=>{t.style.transform=`translate3d(${r.position.x}px, ${r.position.y}px, 0)`,n.style.transform=r.bodyTransform};return _.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=>_.add(()=>r.kind!==`idle`||(e(),!1)))}}},M=j(`you`),N=[j(`0`),j(`1`),j(`2`)],P=e=>w(ue,t=>{e.style.opacity=String(Math.min(1,t*1.6)),e.style.scale=String(.6+.4*t)}),F=async e=>{await T(90,t=>{e.style.scale=String(1-.05*t)}),await T(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`},ne=()=>{let e=A(3,.5,.5),t=O(W.length),n=V*t.z*.56,r=H*t.z*.58;return Array.from({length:110},(t,i)=>{let a=i/109,o=-2.4+a*1.85*Math.PI*2,s=1+.06*Math.sin(a*9)+a*.05;return[e.x+Math.cos(o)*n*s+a*8,e.y+Math.sin(o)*r*s-a*6,.5]})},R=()=>{for(let e of m)e.style.opacity=`0`,e.style.scale=`0.6`;for(let e of h)e.style.opacity=`0`,e.style.scale=`0.6`,e.style.display=`none`;c.style.display=`none`;for(let e of Object.values(g))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`,p.setAttribute(`d`,``),s.style.opacity=`1`,c.style.opacity=`1`,D(O(1))},re=()=>{for(let e of[...m,...h,...Object.values(g)])e.style.opacity=`1`,e.style.scale=`1`;for(let e of h)e.style.display=``;c.style.display=``,L(g.a,A(2,.72,.34)),L(g.b,A(5,.3,.36)),g.b.classList.add(`expanded`),D(O(W.length)),p.setAttribute(`d`,v({points:ne(),size:le})),N[0].place(A(2,.34,.8)),N[1].place(A(5,.86,.7)),N[2].place(A(3,.92,.9))},ie=async()=>{let n=1500;for(;;){R(),await C(n),n=500;for(let e=0;e<m.length;e++)P(m[e]),e&&k(O(e+1)),await C(e?720:1e3);await C(700),M.place({x:r.width*.74,y:r.height+30});let i=e.getBoundingClientRect(),a=i.width/r.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 w(t(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 C(1e3),delete f.dataset.copied,N[0].place({x:-30,y:r.height*.42}),I(h[2]),await N[0].move(A(2,.72,.34)),N[1].place({x:r.width*.3,y:r.height+30}),I(h[1]),L(g.a,A(2,.72,.34)),P(g.a),N[0].move(A(2,.34,.8)),await N[1].move(A(5,.3,.36)),L(g.b,A(5,.3,.36)),await P(g.b),await C(250),g.b.classList.add(`expanded`),N[1].move(A(5,.86,.7));let o=ne();N[2].place({x:r.width+30,y:r.height*.3}),I(h[0]),await N[2].move({x:o[0][0],y:o[0][1]}),await T(1500,e=>{let t=Math.max(2,Math.ceil(e*o.length));p.setAttribute(`d`,v({points:o.slice(0,t),size:le}));let[n,r]=o[t-1];N[2].place({x:n,y:r})}),await C(400),N[2].move(A(3,.92,.9)),await C(1400),N[0].move(A(1,.5,.42)),await C(1100),N[1].move(A(4,.72,.62)),await C(2200),await T(420,e=>{s.style.opacity=String(1-e),c.style.opacity=String(1-e)}),await w(fe,()=>{})}};if(matchMedia(`(prefers-reduced-motion: reduce)`).matches)return R(),re(),()=>{};ie();let z=new IntersectionObserver(([e])=>S(e.isIntersecting));return z.observe(e),()=>{z.disconnect(),S(!1),_.clear()}}function _e(){let e=(0,b.useRef)(null),t=(0,b.useRef)(null),[i,a]=(0,b.useState)(0),o=i&&i<720?`narrow`:`wide`,c=oe[o];(0,b.useLayoutEffect)(()=>{let t=new ResizeObserver(([e])=>a(e.contentRect.width));return t.observe(e.current),()=>t.disconnect()},[]),(0,b.useEffect)(()=>{if(i)return ge(t.current,o)},[o,i>0]);let u=i/c.width,h=25*u,[_]=(0,b.useState)(()=>window.innerWidth*1.15/Math.min(1200,window.innerWidth-32)),v=(0,b.useMemo)(()=>W.map((e,t)=>K(t,c.columns)),[c.columns]);return(0,x.jsxs)(`div`,{ref:e,className:`ld-shell`,style:{height:i?c.height*u:void 0,borderRadius:h,"--ld-from":_},"aria-hidden":`true`,children:[i>0&&(0,x.jsx)(`svg`,{className:`ld-draw`,children:(0,x.jsx)(`path`,{d:pe(i,c.height*u,h-.5),pathLength:`1`})}),i>0&&(0,x.jsxs)(`div`,{ref:t,className:`ld-stage ld-${o}`,style:{width:c.width,height:c.height,transform:`scale(${u})`},children:[(0,x.jsxs)(`div`,{className:`ld-scene`,children:[(0,x.jsx)(`div`,{className:`world ld-world`,children:W.map((e,t)=>(0,x.jsxs)(`div`,{className:`frame ld-frame`,style:{left:v[t].x,top:v[t].y,width:V,height:H},children:[(0,x.jsx)(`div`,{className:`frame-title`,children:(0,x.jsxs)(`span`,{children:[`V`,e]})}),(0,x.jsx)(`div`,{className:`frame-surface`,children:(0,x.jsx)(me,{version:e})})]},e))}),(0,x.jsx)(`svg`,{className:`ld-strokes`,width:c.width,height:c.height,children:(0,x.jsx)(`path`,{fill:ce})}),(0,x.jsx)(he,{id:`a`,person:0,text:``}),(0,x.jsx)(he,{id:`b`,person:1,text:`Can we try this one darker?`})]}),(0,x.jsx)(`div`,{className:`chrome shell top-left ld-rise`,children:(0,x.jsx)(`span`,{className:`canvas-name`,children:`Notification Explorations`})}),(0,x.jsx)(`div`,{className:`chrome shell toolbar ld-rise`,children:(0,x.jsx)(`div`,{className:`toolbar-clip`,children:(0,x.jsxs)(`div`,{className:`toolbar-row`,children:[(0,x.jsx)(`span`,{className:`tool-slider`,style:{width:50}}),(0,x.jsx)(`span`,{className:`tool`,"aria-pressed":`true`,children:(0,x.jsx)(ee,{size:18})}),(0,x.jsx)(`span`,{className:`tool`,children:(0,x.jsx)(p,{size:18})}),(0,x.jsx)(`span`,{className:`tool`,children:(0,x.jsx)(g,{size:18})}),(0,x.jsx)(`span`,{className:`shell-divider`}),(0,x.jsx)(`span`,{className:`tool`,children:(0,x.jsx)(l,{size:18})})]})})}),(0,x.jsxs)(`div`,{className:`chrome shell top-right ld-rise`,children:[(0,x.jsx)(`div`,{className:`faces`,children:[2,1,0].map(e=>(0,x.jsx)(`span`,{className:`face-button`,children:(0,x.jsx)(d,{name:G[e].name,picture:null,color:G[e].color})},e))}),(0,x.jsx)(`span`,{className:`primary-button share-button`,children:`Share`}),(0,x.jsxs)(`span`,{className:`primary-button share-sharing`,style:{display:`none`},children:[(0,x.jsx)(`i`,{}),(0,x.jsx)(`span`,{children:`Share`})]}),(0,x.jsxs)(`span`,{className:`share-split`,style:{display:`none`},children:[(0,x.jsxs)(`span`,{className:`primary-button`,children:[(0,x.jsxs)(`span`,{className:`ld-copied`,children:[(0,x.jsx)(f,{size:14}),`Copied`]}),(0,x.jsx)(`span`,{className:`ld-copy`,children:`Copy link`})]}),(0,x.jsx)(`span`,{className:`primary-button`,children:(0,x.jsx)(m,{size:14})})]})]}),(0,x.jsxs)(`div`,{className:`chrome shell zoom ld-rise`,children:[(0,x.jsx)(`span`,{className:`icon-button`,children:(0,x.jsx)(n,{})}),(0,x.jsx)(`span`,{className:`shell-divider`}),(0,x.jsx)(`span`,{className:`icon-button`,children:(0,x.jsx)(s,{})}),(0,x.jsx)(`span`,{className:`zoom-value`,"data-zoom":!0,children:`100%`}),(0,x.jsx)(`span`,{className:`icon-button`,children:(0,x.jsx)(r,{})})]}),(0,x.jsxs)(`div`,{className:`ld-cursors`,children:[(0,x.jsx)(q,{id:`0`,color:G[0].color,name:G[0].name}),(0,x.jsx)(q,{id:`1`,color:G[1].color,name:G[1].name}),(0,x.jsx)(q,{id:`2`,color:G[2].color,name:G[2].name}),(0,x.jsx)(q,{id:`you`,color:`#000`})]})]},o)]})}var J=[[0,6],[.4,13],[.75,19],[.88,20.2],[1,22]],ve=J[1][0],ye=e=>Math.min(1,Math.max(0,e)),be=e=>{let t=Math.max(1,J.findIndex(([t])=>t>=e)),[n,r]=J[t-1],[i,a]=J[t];return r+(e-n)/(i-n)*(a-r)},xe=e=>{if(e<J[0][1]||e>=J[J.length-1][1])return 1;let t=J.findIndex(([,t])=>t>=e);if(t<=0)return 0;let[n,r]=J[t-1],[i,a]=J[t];return n+(e-r)/(a-r)*(i-n)},Se=[[0,0],[.12,.5],[.28,1],[.58,.5],[.72,0],[.84,null]],Ce=e=>[...Se].reverse().find(([t])=>e>=t)[1],we=Array.from({length:8},(e,t)=>{let n=t*Math.PI/4,r=e=>`${(12+Math.cos(n)*e).toFixed(2)} ${(12+Math.sin(n)*e).toFixed(2)}`;return`M${r(8.2)}L${r(10.6)}`}).join(``);function Te({rays:e}){let t=(0,b.useId)(),n=e===null;return(0,x.jsxs)(`svg`,{className:`light-glyph`,viewBox:`0 0 24 24`,"aria-hidden":`true`,children:[(0,x.jsxs)(`mask`,{id:t,children:[(0,x.jsx)(`rect`,{x:`-4`,y:`-4`,width:`32`,height:`32`,fill:`#fff`}),(0,x.jsx)(`circle`,{className:`light-cut`,cx:`6.5`,cy:`17.5`,r:`8`,fill:`#000`,style:{transform:n?`none`:`translate(-9px, 9px)`}})]}),(0,x.jsxs)(`g`,{className:`light-turn`,style:{transform:`rotate(${n?180:0}deg)`},children:[(0,x.jsx)(`circle`,{className:`light-core`,cx:`12`,cy:`12`,r:`9`,fill:`currentColor`,mask:`url(#${t})`,style:{transform:`scale(${n?1:.56})`,opacity:n?1:.7+.3*e}}),(0,x.jsx)(`path`,{className:`light-rays`,d:we,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,style:{transform:n?`rotate(-90deg) scale(0.5)`:`scale(${.74+.26*e})`,opacity:n?0:.55+.45*e}})]})]})}function Ee({hour:e,onHour:t}){let[n,r]=(0,b.useState)(!1),[i,a]=(0,b.useState)(!1),[o,s]=(0,b.useState)(!1),c=(0,b.useRef)(null),l=n||i||o,u=xe(e),d=e=>{let n=c.current.getBoundingClientRect();t(be(ye((e.clientX-n.left)/n.width)))},f=e=>{e.currentTarget.setPointerCapture(e.pointerId),s(!0),d(e)},p=e=>{let n={ArrowLeft:-.05,ArrowDown:-.05,ArrowRight:.05,ArrowUp:.05}[e.key];n!==void 0&&(e.preventDefault(),t(be(ye(u+n))))},m=u>.85;return(0,x.jsx)(`div`,{className:`light-switch`,"data-open":l||void 0,"data-dragging":o||void 0,style:{"--x":u},onPointerEnter:e=>e.pointerType===`mouse`&&r(!0),onPointerLeave:e=>e.pointerType===`mouse`&&r(!1),onFocus:e=>e.target.matches(`:focus-visible`)&&a(!0),onBlur:()=>a(!1),children:(0,x.jsxs)(`div`,{className:`light-pill`,children:[(0,x.jsx)(`div`,{ref:c,className:`light-track`,role:`slider`,"aria-label":`Time of day`,"aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":Math.round(u*100),"aria-valuetext":m?`Night`:u<ve?`Morning`:`Evening`,tabIndex:0,onPointerDown:f,onPointerMove:e=>o&&d(e),onPointerUp:()=>s(!1),onPointerCancel:()=>s(!1),onKeyDown:p,children:(0,x.jsx)(`span`,{className:`light-dot`})}),(0,x.jsx)(`button`,{type:`button`,className:`light-toggle`,"aria-label":m?`Switch to day`:`Switch to night`,onClick:()=>t(be(m?ve:1),!0),children:(0,x.jsx)(Te,{rays:Ce(u)})})]})})}var Y={ms:800,ease:[.45,0,.55,1]},De=c(...Y.ease),Oe=[[0,`#1f283c`,`#0f1421`,`#2a3755`,`#0c1220`],[4.5,`#1a2132`,`#0d111d`,`#25304c`,`#0a0f1b`],[5.5,`#555b7c`,`#2c3149`,`#8f91b4`,`#3a4252`],[6.5,`#efc4ae`,`#8a7a84`,`#ffe1c9`,`#a79a78`],[7.5,`#f8e2c8`,`#a89c94`,`#fff5e4`,`#b9c39a`],[10,`#fcfaf4`,`#adaca6`,`#ffffff`,`#c9d8bb`],[13,`#ffffff`,`#acadac`,`#ffffff`,`#d3e0c8`],[16,`#faf2e3`,`#aaa193`,`#fffbf1`,`#c7d0a7`],[18,`#e9bd95`,`#a07f62`,`#ffdcb2`,`#a89a62`],[19,`#da9570`,`#7a5a50`,`#ffb78c`,`#6d5f4b`],[19.75,`#84678a`,`#4a4262`,`#b78fa8`,`#3b3550`],[20.75,`#2f3756`,`#1a1f33`,`#3f4a70`,`#141a2c`],[24,`#1f283c`,`#0f1421`,`#2a3755`,`#0c1220`]],ke=e=>[1,3,5].map(t=>(parseInt(e.slice(t,t+2),16)/255)**2.2),Ae=e=>`#${e.map(e=>Math.round(e**(1/2.2)*255).toString(16).padStart(2,`0`)).join(``)}`,je=new URLSearchParams(location.search).get(`hour`),Me=()=>{if(je!==null)return Number(je);let e=new Date;return e.getHours()+e.getMinutes()/60};function Ne(){let[e,t]=(0,b.useState)(Me);return(0,b.useEffect)(()=>{let e=()=>t(Me()),n=window.setInterval(e,3e4);return document.addEventListener(`visibilitychange`,e),()=>{window.clearInterval(n),document.removeEventListener(`visibilitychange`,e)}},[]),e}function Pe(e){let{lit:t,shade:n}=Fe(e),[r,i,a]=t.map((e,t)=>n[t]+(e-n[t])*.6);return{lit:Ae(t),shade:Ae(n),dark:.2126*r+.7152*i+.0722*a<.18}}function Fe(e){let t=Math.max(1,Oe.findIndex(([t])=>t>=e)),[n,...r]=Oe[t-1],[i,...a]=Oe[t],o=(e-n)/(i-n),s=o*o*(3-2*o),[c,l,u,d]=r.map((e,t)=>{let n=ke(a[t]);return ke(e).map((e,t)=>e+(n[t]-e)*s)}),f=2*Math.PI*(e-12.5)/24,p=(9+36*Math.abs(Math.cos(f)))*Math.PI/180,m=Math.sin(f)*52*Math.PI/180;return{lit:c,shade:l,sky:u,leaf:d,sun:[-Math.cos(p)*Math.cos(m),Math.sin(p),Math.cos(p)*Math.sin(m)]}}var X={wind:1.1,gust:1,flutter:1.65,leafSize:1,shadow:.55,softness:1,sun:.61,skyLeaves:.29},Ie=`#version 300 es
|
|
3
|
+
in vec2 a;
|
|
4
|
+
void main() { gl_Position = vec4(a, 0., 1.); }`,Le=`#version 300 es
|
|
5
|
+
precision highp float;
|
|
6
|
+
out vec4 fragColor;
|
|
7
|
+
uniform vec2 uRes;
|
|
8
|
+
uniform float uTime;
|
|
9
|
+
uniform vec3 uSun, uLit, uShade, uSky, uLeaf;
|
|
10
|
+
uniform sampler2D uLeaves;
|
|
11
|
+
// Tuning, from LIGHT below.
|
|
12
|
+
uniform float uGust, uFlutter, uLeafSize, uShadow, uSoft, uSunStrength, uSkyLeaves;
|
|
13
|
+
|
|
14
|
+
// How far the corners melt. Lower is softer.
|
|
15
|
+
const float CORNER = 5.5;
|
|
16
|
+
// Half the height of the box, and how much of the screen its far wall fills.
|
|
17
|
+
const float HALF = 3.;
|
|
18
|
+
const float FAR_WALL = .5;
|
|
19
|
+
|
|
20
|
+
float dither(vec2 p) {
|
|
21
|
+
vec3 h = fract(p.xyx * .1031);
|
|
22
|
+
h += dot(h, h.yzx + 33.33);
|
|
23
|
+
return fract((h.x + h.y) * h.z);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
float band(float x, float a, float b, float soft) {
|
|
27
|
+
return smoothstep(a - soft, a + soft, x) * (1. - smoothstep(b - soft, b + soft, x));
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
// Wind moving through the trees: gusts travel along the canopy, leaning the branches as they pass,
|
|
31
|
+
// stirring the leaves and opening small gaps that let more light through.
|
|
32
|
+
float foliage(vec2 zy) {
|
|
33
|
+
float t = uTime;
|
|
34
|
+
float gust = sin(t * .42 - zy.x * .3) + .6 * sin(t * .67 - zy.x * .5 + zy.y * .2 + 1.3);
|
|
35
|
+
float stir = (.12 + .2 * abs(gust)) * uFlutter;
|
|
36
|
+
vec2 lean = .6 * gust * uGust * vec2(1., .3);
|
|
37
|
+
vec2 flutter = stir * vec2(sin(t * 1.3 + zy.y * 1.7), cos(t * 1.1 + zy.x * 1.5));
|
|
38
|
+
float near = texture(uLeaves, (zy + lean + flutter) * .21 / uLeafSize + vec2(.17, .31)).r;
|
|
39
|
+
float far = texture(uLeaves, (zy + lean * .4 + flutter * .3) * .09 / uLeafSize + vec2(.61, .09)).r;
|
|
40
|
+
float gap = .03 * gust;
|
|
41
|
+
return max(smoothstep(.1 + gap, .42 + gap, near), .75 * smoothstep(.1, .4, far));
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
// Sun reaching a point through a tall opening down the left side, then through the leaves.
|
|
45
|
+
// The further the light has travelled from the opening, the wider its edges.
|
|
46
|
+
float sunlight(vec3 p, float wall) {
|
|
47
|
+
vec3 hit = p + uSun * ((-wall - p.x) / uSun.x);
|
|
48
|
+
float soft = (.25 + .07 * length(hit - p)) * uSoft;
|
|
49
|
+
float open = band(hit.y, -HALF + .3, HALF - .3, soft) * band(hit.z, -30., 60., soft);
|
|
50
|
+
float bar = mod(hit.z, 4.) - 2.;
|
|
51
|
+
open *= 1. - min(1., .22 / soft) * exp(-bar * bar / (soft * soft));
|
|
52
|
+
vec3 leaf = p + uSun * ((-wall - 3. - p.x) / uSun.x);
|
|
53
|
+
return open * (1. - uShadow * foliage(leaf.zy));
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
void main() {
|
|
57
|
+
float aspect = uRes.x / uRes.y;
|
|
58
|
+
vec2 p = (gl_FragCoord.xy - uRes * .5) / uRes.y;
|
|
59
|
+
|
|
60
|
+
// The far wall has the same shape as the screen, so the corners run straight to the screen's corners.
|
|
61
|
+
vec2 back = vec2(aspect, 1.) * .5 * FAR_WALL;
|
|
62
|
+
float wall = HALF * aspect;
|
|
63
|
+
float depth = HALF / back.y;
|
|
64
|
+
|
|
65
|
+
// How far past the far wall's outline this pixel is, and how much it belongs to each face.
|
|
66
|
+
vec2 reach = abs(p) / back;
|
|
67
|
+
vec3 weights = exp(CORNER * vec3(reach, 1.));
|
|
68
|
+
weights /= weights.x + weights.y + weights.z;
|
|
69
|
+
float besides = weights.x;
|
|
70
|
+
float above = weights.y;
|
|
71
|
+
float ahead = weights.z;
|
|
72
|
+
|
|
73
|
+
float leftFace = besides * (1. - smoothstep(-.1, .1, p.x / back.x));
|
|
74
|
+
float rightFace = besides - leftFace;
|
|
75
|
+
float floorFace = above * (1. - smoothstep(-.1, .1, p.y / back.y));
|
|
76
|
+
float ceilingFace = above - floorFace;
|
|
77
|
+
|
|
78
|
+
// Points on each face, for the sun.
|
|
79
|
+
float tWall = min(wall / max(abs(p.x), .01), depth);
|
|
80
|
+
float tFlat = min(HALF / max(abs(p.y), .01), depth);
|
|
81
|
+
vec3 onRight = vec3(wall, p.y * tWall, tWall);
|
|
82
|
+
vec3 onLeft = vec3(-wall, p.y * tWall, tWall);
|
|
83
|
+
vec3 onFloor = vec3(p.x * tFlat, -HALF, tFlat);
|
|
84
|
+
vec3 onBack = vec3(p.x * depth, p.y * depth, depth);
|
|
85
|
+
|
|
86
|
+
// Daylight fills the box from the left, thinning toward the right.
|
|
87
|
+
float x = p.x / (back.x * 2.);
|
|
88
|
+
float fill = 1. - .55 * smoothstep(-1.2, 1.5, x);
|
|
89
|
+
fill *= leftFace + floorFace + ahead * .9 + ceilingFace * .74 + rightFace * .8;
|
|
90
|
+
|
|
91
|
+
// The corners are only a slight gathering of shade where two faces meet.
|
|
92
|
+
float crease = 1. - max(besides, max(above, ahead));
|
|
93
|
+
fill *= 1. - crease * .3;
|
|
94
|
+
vec3 color = mix(uShade, uLit, fill);
|
|
95
|
+
|
|
96
|
+
// Sun.
|
|
97
|
+
vec3 s = uSun;
|
|
98
|
+
float sun = 0.;
|
|
99
|
+
if (floorFace > .02) sun += floorFace * sunlight(onFloor, wall) * min(1., s.y * 3.);
|
|
100
|
+
if (ahead > .02) sun += ahead * sunlight(onBack, wall) * min(1., max(-s.z, 0.) * 2.5);
|
|
101
|
+
if (rightFace > .02) sun += rightFace * sunlight(onRight, wall) * min(1., -s.x * 2.);
|
|
102
|
+
color += uLit * sun * uSunStrength;
|
|
103
|
+
|
|
104
|
+
// The left side is the light itself: bright sky with trees far out of focus.
|
|
105
|
+
color = mix(color, mix(uSky, uLeaf, foliage(onLeft.zy) * uSkyLeaves), leftFace);
|
|
106
|
+
|
|
107
|
+
color = pow(min(color, vec3(1.)), vec3(1. / 2.2));
|
|
108
|
+
// A single level of 8-bit noise: invisible, but it stops the gradients from banding.
|
|
109
|
+
color += (dither(gl_FragCoord.xy + 17.) - .5) / 255.;
|
|
110
|
+
fragColor = vec4(color, 1.);
|
|
111
|
+
}`;function Re(){let e=1024,t=document.createElement(`canvas`);t.width=t.height=e;let n=t.getContext(`2d`),r=606,i=()=>(r=r*16807%2147483647)/2147483647;n.fillStyle=`#000`,n.fillRect(0,0,e,e),n.fillStyle=n.strokeStyle=`#fff`,n.lineCap=`round`;for(let t=0;t<22;t++){let t=i()*e,r=i()*e,a=i()*Math.PI*2,o=260+i()*460;for(let e=0;e<o;e+=14){a+=(i()-.5)*.3;let s=t+Math.cos(a)*14,c=r+Math.sin(a)*14;if(n.lineWidth=Math.max(1.5,6*(1-e/o)),n.beginPath(),n.moveTo(t,r),n.lineTo(s,c),n.stroke(),t=s,r=c,!(i()>.42))for(let e of[-1,1]){if(i()>.8)continue;let o=a+e*(.5+i()*.7),s=34+i()*40;n.save(),n.translate(t+Math.cos(o)*s*.55,r+Math.sin(o)*s*.55),n.rotate(o),n.beginPath(),n.ellipse(0,0,s*.55,s*.2,0,0,Math.PI*2),n.fill(),n.restore()}}}return ze(t)}function ze(e){let t=document.createElement(`canvas`);t.width=t.height=128;let n=t.getContext(`2d`,{willReadFrequently:!0});n.drawImage(e,0,0,128,128);let r=n.getImageData(0,0,128,128),i=Float32Array.from({length:16384},(e,t)=>r.data[t*4]);for(let e=0;e<6;e++){let t=new Float32Array(16384);for(let n=0;n<128;n++)for(let r=0;r<128;r++){let a=0;for(let t=-13;t<=13;t++){let o=e%2?(n+t+128)%128*128+r:n*128+(r+t+128)%128;a+=i[o]}t[n*128+r]=a/27}i=t}return i.forEach((e,t)=>{r.data[t*4]=r.data[t*4+1]=r.data[t*4+2]=e}),n.putImageData(r,0,0),t}function Be({hour:e,glide:t}){let n=(0,b.useRef)(null),r=(0,b.useRef)(e),i=(0,b.useRef)(e),a=(0,b.useRef)(null),o=(0,b.useRef)(null);return(0,b.useEffect)(()=>{a.current=t?{from:i.current,at:performance.now()}:null,r.current=e,o.current?.()},[e]),(0,b.useEffect)(()=>{let e=n.current,t=e.getContext(`webgl2`,{antialias:!1,alpha:!1});if(!t)return;let s=t.createProgram();for(let[e,n]of[[t.VERTEX_SHADER,Ie],[t.FRAGMENT_SHADER,Le]]){let r=t.createShader(e);t.shaderSource(r,n),t.compileShader(r),t.attachShader(s,r)}t.bindAttribLocation(s,0,`a`),t.linkProgram(s),t.useProgram(s),t.bindBuffer(t.ARRAY_BUFFER,t.createBuffer()),t.bufferData(t.ARRAY_BUFFER,new Float32Array([-1,-1,3,-1,-1,3]),t.STATIC_DRAW),t.enableVertexAttribArray(0),t.vertexAttribPointer(0,2,t.FLOAT,!1,0,0),t.bindTexture(t.TEXTURE_2D,t.createTexture()),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,t.RGBA,t.UNSIGNED_BYTE,Re()),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.REPEAT),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.REPEAT);let c=e=>t.getUniformLocation(s,e),l=(n,r)=>{let{clientWidth:i,clientHeight:a}=e;(e.width!==i||e.height!==a)&&(e.width=i,e.height=a,t.viewport(0,0,i,a));let o=Fe(r);t.uniform2f(c(`uRes`),i,a),t.uniform1f(c(`uTime`),n),t.uniform1f(c(`uGust`),X.gust),t.uniform1f(c(`uFlutter`),X.flutter),t.uniform1f(c(`uLeafSize`),X.leafSize),t.uniform1f(c(`uShadow`),X.shadow),t.uniform1f(c(`uSoft`),X.softness),t.uniform1f(c(`uSunStrength`),X.sun),t.uniform1f(c(`uSkyLeaves`),X.skyLeaves),t.uniform3fv(c(`uSun`),o.sun),t.uniform3fv(c(`uLit`),o.lit),t.uniform3fv(c(`uShade`),o.shade),t.uniform3fv(c(`uSky`),o.sky),t.uniform3fv(c(`uLeaf`),o.leaf),t.drawArrays(t.TRIANGLES,0,3)};if(matchMedia(`(prefers-reduced-motion: reduce)`).matches){o.current=()=>l(0,r.current);let t=new ResizeObserver(()=>l(0,r.current));return t.observe(e),()=>{o.current=null,t.disconnect()}}let u=performance.now(),d=u/1e3,f=requestAnimationFrame(function e(t){let n=a.current;if(n){let e=Math.min(1,Math.max(0,(t-n.at)/Y.ms));i.current=n.from+(r.current-n.from)*De(e),e===1&&(a.current=null)}else i.current+=(r.current-i.current)*(1-Math.exp((u-t)*.002));d+=(t-u)/1e3*X.wind,u=t,l(d,i.current),f=requestAnimationFrame(e)});return()=>cancelAnimationFrame(f)},[]),(0,x.jsx)(`canvas`,{ref:n,className:`window-light`,"aria-hidden":`true`})}var Ve=new URLSearchParams(location.search).get(`hero`)!==`1`,He=(0,b.lazy)(()=>y(()=>import(`./LandingStage-u99Kd45d.js`),__vite__mapDeps([0,1,2,3,4,5]))),Ue=[[`A`,`canvas`,`for`,`your`],[`agent’s`,`explorations`]],We=t(.8,0),Ge=t(1.1,0),Ke=.1,qe=3,Je=.14,Z=8,Ye=500,Q=32,Xe=1500,Ze=(()=>{let e=crypto.getRandomValues(new Uint8Array(16)),t=Date.now();for(let n=5;n>=0;n--)e[n]=t%256,t=Math.floor(t/256);e[6]=e[6]&15|112,e[8]=e[8]&63|128;let n=Array.from(e,e=>e.toString(16).padStart(2,`0`)).join(``);return`${n.slice(0,8)}-${n.slice(8,12)}-${n.slice(12,16)}-${n.slice(16,20)}-${n.slice(20)}`})(),$=(e,t={})=>i(`/api/events`,{event:e,visit:Ze,...t});function Qe(){let e=(0,b.useRef)(null),t=(0,b.useRef)(null);return(0,b.useEffect)(()=>{if(matchMedia(`(prefers-reduced-motion: reduce)`).matches)return;let n=[0,0,0,0],r=[0,0,0,0],i=0,a=!1,o=()=>{let e=!0;r.forEach((t,i)=>{r[i]=t+(n[i]-t)*Je,Math.abs(n[i]-r[i])>.01&&(e=!1)}),e&&r.splice(0,4,...n);let[a,s,c,l]=r.map(e=>e.toFixed(2));t.current&&(t.current.style.transform=r.some(Boolean)?`perspective(${Ye}px) translate(${a}px, ${s}px) rotateX(${c}deg) rotateY(${l}deg)`:``),i=e?0:requestAnimationFrame(o)},s=()=>{i||=requestAnimationFrame(o)},c=(e,t)=>Math.max(-t,Math.min(t,e)),l=()=>{a&&(a=!1,n.fill(0),s())},u=t=>{if(t.pointerType!==`mouse`||!e.current)return;let r=e.current.getBoundingClientRect();if(t.clientX<=r.left-Q||t.clientX>=r.right+Q||t.clientY<=r.top-Q||t.clientY>=r.bottom+Q)return l();a=!0;let i=t.clientX-r.left-r.width/2,o=t.clientY-r.top-r.height/2;n[0]=c(i*Ke,qe),n[1]=c(o*Ke,qe),n[2]=c(-o/(r.height/2)*Z,Z),n[3]=c(i/(r.width/2)*Z,Z),s()};return window.addEventListener(`pointermove`,u),document.documentElement.addEventListener(`pointerleave`,l),()=>{cancelAnimationFrame(i),window.removeEventListener(`pointermove`,u),document.documentElement.removeEventListener(`pointerleave`,l)}},[]),[e,t]}function $e(){let[e,t]=(0,b.useState)(!1),n=(0,b.useRef)(0);(0,b.useEffect)(()=>()=>window.clearTimeout(n.current),[]);let r=()=>{t(!0),window.clearTimeout(n.current),n.current=window.setTimeout(()=>t(!1),Xe)};return[e,e=>{navigator.clipboard?.writeText(e).then(()=>{$(`prompt_copied`),r()}).catch(()=>{})},r]}function et(){let[e,t,n]=$e(),[r,i]=Qe();return(0,b.useEffect)(()=>(window.addEventListener(S,n),()=>window.removeEventListener(S,n)),[]),(0,x.jsx)(`span`,{ref:r,className:`landing-magnet`,children:(0,x.jsx)(`div`,{ref:i,className:`landing-cta`,children:(0,x.jsxs)(`button`,{type:`button`,className:`landing-button`,"data-copied":e||void 0,onClick:()=>t(h),children:[(0,x.jsxs)(`span`,{className:`landing-states`,children:[(0,x.jsxs)(`span`,{className:`landing-state`,children:[(0,x.jsx)(te,{}),(0,x.jsx)(`span`,{className:`landing-label`,children:`Copy agent prompt`})]}),(0,x.jsxs)(`span`,{className:`landing-state`,"aria-hidden":`true`,children:[(0,x.jsx)(`svg`,{className:`landing-check`,viewBox:`0 0 18 18`,children:(0,x.jsx)(`path`,{d:`M3.5 9.5 7.25 13.25 14.5 5`,pathLength:`1`})}),(0,x.jsx)(`span`,{className:`landing-done`,children:`Copied`})]})]}),(0,x.jsx)(`span`,{className:`landing-sr`,"aria-live":`polite`,children:e?`Copied`:``})]})})})}function tt(){let e=0;return(0,x.jsx)(`h1`,{className:`landing-title`,children:Ue.map((t,n)=>(0,x.jsxs)(b.Fragment,{children:[n>0&&(0,x.jsx)(`br`,{}),t.map(t=>(0,x.jsxs)(b.Fragment,{children:[(0,x.jsx)(`span`,{className:`landing-word`,style:{"--delay":`${100+e++*80}ms`},children:t}),` `]},t))]},n))})}function nt(){(0,b.useEffect)(()=>{$(`landing_viewed`,{url:location.href,referrer:document.referrer})},[]);let e=Ne(),[t,n]=(0,b.useState)(null),[r,i]=(0,b.useState)(!1),a=(e,t=!1)=>{n(e),i(t)},o=t??e,{lit:s,shade:c,dark:l}=Pe(o),[u,d]=(0,b.useState)(!1),f=(0,b.useRef)(l);return(0,b.useEffect)(()=>{if(f.current===l)return;f.current=l,d(!0);let e=window.setTimeout(()=>d(!1),Y.ms);return()=>window.clearTimeout(e)},[l]),(0,b.useEffect)(()=>{document.body.style.background=s,document.body.style.colorScheme=l?`dark`:`light`},[s,l]),(0,x.jsxs)(`div`,{className:`landing`,"data-dark":l||void 0,"data-shifting":u||void 0,"data-glide":r||void 0,style:{"--lit":s,"--shade":c,"--shift-ms":`${Y.ms}ms`,"--shift-ease":`cubic-bezier(${Y.ease.join(`, `)})`,"--word-ease":We.css,"--word-ms":`${We.ms}ms`,"--rise-ease":Ge.css,"--rise-ms":`${Ge.ms}ms`},children:[(0,x.jsx)(Be,{hour:o,glide:r}),(0,x.jsxs)(`nav`,{className:`landing-nav`,"aria-label":`Main`,children:[(0,x.jsx)(`a`,{className:`wordmark`,href:`/`,children:(0,x.jsx)(_,{})}),(0,x.jsxs)(`div`,{className:`landing-nav-end`,children:[(0,x.jsx)(Ee,{hour:o,onHour:a}),(0,x.jsx)(`a`,{className:`landing-sign-in`,href:`/auth/google/start?next=/`,onClick:()=>$(`sign_in_clicked`),children:`Sign in`})]})]}),(0,x.jsxs)(`main`,{className:`landing-hero`,children:[(0,x.jsx)(tt,{}),(0,x.jsx)(`p`,{className:`landing-body`,children:`Then share, comment, and huddle with one link.`}),(0,x.jsx)(`div`,{className:`landing-actions`,children:(0,x.jsx)(et,{})}),Ve?(0,x.jsx)(`div`,{className:`landing-slot`,children:(0,x.jsx)(b.Suspense,{fallback:null,children:(0,x.jsx)(He,{dark:l})})}):(0,x.jsx)(_e,{})]}),(0,x.jsxs)(`footer`,{className:`landing-foot`,children:[(0,x.jsxs)(`span`,{children:[`© Materic, Inc. `,new Date().getFullYear()]}),(0,x.jsxs)(`nav`,{children:[(0,x.jsx)(`a`,{href:`/privacy`,children:`Privacy`}),(0,x.jsx)(`a`,{href:`/terms`,children:`Terms`})]})]})]})}export{nt as Landing,S as t};
|