feat(www): automate edge bundle-size benchmark with segmented toggle

.github/workflows/test.yml

@@ -87,6 +87,8 @@ jobs:
           bun-version: 1.4.0
       - run: pnpm install
       - run: pnpm run build
+      - name: Verify benchmark artifact has no uncommitted drift
+        run: git diff --exit-code apps/www/lib/benchmark/benchmark.json
 
   test-vite-compatibility:
     runs-on: ubuntu-latest

apps/www/app/(home)/aurora.css

@@ -1700,6 +1700,84 @@
 	margin-left: auto;
 }
 
+/* Telemetry section header: h2+subtitle on left, toggle pill on right */
+.home-aurora__telemetry-heading-row {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: 1rem;
+	flex-wrap: wrap;
+}
+
+/* Telemetry view mode toggle pill */
+.home-aurora__telemetry-toggle {
+	display: flex;
+	align-items: center;
+	gap: 0.125rem;
+	padding: 0.1875rem;
+	background: var(--color-paper-2);
+	border: var(--rule-hair) solid var(--color-rule);
+	border-radius: var(--radius-control, 0.375rem);
+	margin: 0;
+	margin-left: auto;
+	min-inline-size: 0;
+}
+
+.home-aurora__telemetry-toggle-btn {
+	padding: 0.1875rem 0.625rem;
+	border: none;
+	border-radius: calc(var(--radius-control, 0.375rem) - 0.125rem);
+	background: transparent;
+	color: var(--color-ink-2);
+	font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif);
+	font-size: 0.6875rem;
+	font-weight: 500;
+	line-height: 1.35;
+	cursor: pointer;
+	transition:
+		color var(--dur-micro) var(--ease-out),
+		background var(--dur-micro) var(--ease-out);
+}
+
+.home-aurora__telemetry-toggle-btn[aria-pressed="true"] {
+	background: var(--color-paper-3);
+	color: var(--color-ink);
+	border-bottom: 1px solid var(--color-accent);
+}
+
+/* Benchmark receipt footnote */
+.home-aurora__telemetry-footer {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 0.25rem;
+	padding: 0.5rem 0.85rem 0.65rem;
+	border-top: var(--rule-hair) solid var(--color-rule);
+	color: var(--color-ink-2);
+	font-size: 0.6875rem;
+	line-height: 1.4;
+}
+
+.home-aurora__telemetry .home-aurora__telemetry-footer a {
+	color: var(--color-ink-2);
+	text-decoration: none;
+	transition: color var(--dur-micro) var(--ease-out);
+}
+
+.home-aurora__telemetry .home-aurora__telemetry-footer a:hover {
+	color: var(--color-ink);
+	text-decoration: underline;
+	text-underline-offset: 2px;
+}
+
+/* Metric subtitle under pitch heading */
+.home-aurora__telemetry-subtitle {
+	font-size: 0.75rem;
+	color: var(--color-ink-2);
+	line-height: 1.45;
+	margin-top: 0.125rem;
+}
+
 /* 05 · Automatic coercion — hub-and-spoke node graph animation */
 /* 05 · Automatic coercion — Payload Pipeline */
 .home-aurora__stream-widget {
@@ -3049,8 +3127,8 @@
 	--color-fd-popover: var(--color-paper-2);
 	--color-fd-popover-foreground: var(--color-ink);
 	--color-fd-border: var(--color-rule);
-	/* Zod's 8-line window — Valibot nests PORT and scrolls inside this cap. */
-	--mvp-lines: 8;
+	/* Window sized for Zod (8 lines) with comfortable breathing room — Valibot (16 lines) scrolls inside this cap. */
+	--mvp-lines: 8.5;
 	--mvp-lh: 1.55;
 	--mvp-body-size: calc(var(--mvp-lines) * var(--mvp-lh) * var(--text-code) + 2 * var(--space-sm));
 	display: grid;

apps/www/components/page/hero-mvp-example-view.tsx

@@ -31,13 +31,13 @@ type ScrollEdgeFades = {
 };
 
 function readScrollEdgeFades(scroll: HTMLElement): ScrollEdgeFades {
-	const canScroll = scroll.scrollHeight > scroll.clientHeight + 1;
+	const canScroll = scroll.scrollHeight - scroll.clientHeight > 6;
 	if (!canScroll) {
 		return { overflow: false, fadeTop: false, fadeBottom: false };
 	}
-	const atTop = scroll.scrollTop <= 1;
+	const atTop = scroll.scrollTop <= 2;
 	const atBottom =
-		scroll.scrollTop + scroll.clientHeight >= scroll.scrollHeight - 1;
+		scroll.scrollTop + scroll.clientHeight >= scroll.scrollHeight - 2;
 	return {
 		overflow: true,
 		fadeTop: !atTop,

apps/www/components/page/runtime-bloat-showcase.test.tsx

@@ -1,47 +1,131 @@
 import { render, screen } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { beforeEach, describe, expect, it } from "vitest";
 import { RuntimeBloatShowcase } from "./runtime-bloat-showcase";
 
 describe("RuntimeBloatShowcase", () => {
-	it("renders the Optimized for the edge heading and comparison copy", () => {
+	// Prevent window.location.search leaking between tests via replaceState.
+	beforeEach(() => {
+		window.history.replaceState(null, "", "/");
+	});
+
+	it("renders the heading and metric subtitle", () => {
 		render(<RuntimeBloatShowcase />);
 
 		expect(
 			screen.getByRole("heading", { name: "Optimized for the edge" }),
 		).toBeInTheDocument();
 
+		expect(screen.getByText(/Minified, uncompressed JS/i)).toBeInTheDocument();
+	});
+
+	it("renders the toggle with two buttons", () => {
+		render(<RuntimeBloatShowcase />);
+
+		const group = screen.getByRole("group", { name: /Benchmark view/i });
+		expect(group).toBeInTheDocument();
+
 		expect(
-			screen.getByText(/50% smaller core than T3 Env/i),
+			screen.getByRole("button", { name: /Adapter only/i }),
 		).toBeInTheDocument();
 		expect(
-			screen.getByText(/All engines under 10 kB for strict edge deployments/i),
+			screen.getByRole("button", { name: /Full edge payload/i }),
 		).toBeInTheDocument();
+	});
+
+	it("defaults to adapter view showing standalone adapter sizes and varlock", () => {
+		render(<RuntimeBloatShowcase />);
 
 		const figure = screen.getByRole("figure", {
 			name: /production runtime bundle size comparison/i,
 		});
+
+		// Adapter view (default): standalone wrapper entries + varlock
 		expect(figure).toHaveTextContent("@arkenv/standard");
-		expect(figure).toHaveTextContent("1.5 kB");
+		expect(figure).toHaveTextContent("10.0 kB");
 		expect(figure).toHaveTextContent("@arkenv/core");
-		expect(figure).toHaveTextContent("7.4 kB");
+		expect(figure).toHaveTextContent("6.3 kB");
 		expect(figure).toHaveTextContent("@t3-oss/env-core");
 		expect(figure).toHaveTextContent("14.2 kB");
 		expect(figure).toHaveTextContent("varlock");
 		expect(figure).toHaveTextContent("28.4 kB");
 
-		// Check npmx links
+		// Should NOT show full-payload combined names in default adapter view
+		expect(figure).not.toHaveTextContent("+ ArkType");
+		expect(figure).not.toHaveTextContent("+ Zod");
+	});
+
+	it("switches to full-payload view when toggle is clicked and syncs URL", async () => {
+		render(<RuntimeBloatShowcase />);
+
+		const fullBtn = screen.getByRole("button", {
+			name: /Full edge payload/i,
+		});
+		await userEvent.click(fullBtn);
+
+		expect(window.location.search).toBe("?view=full");
+
+		const figure = screen.getByRole("figure", {
+			name: /production runtime bundle size comparison/i,
+		});
+		expect(figure).toHaveTextContent("@arkenv/standard + Valibot");
+		expect(figure).toHaveTextContent("23.3 kB");
+		expect(figure).toHaveTextContent("@arkenv/core + ArkType");
+		expect(figure).toHaveTextContent("156.0 kB");
+		expect(figure).toHaveTextContent("@t3-oss/env-core + Zod");
+		expect(figure).toHaveTextContent("325.0 kB");
+		expect(figure).toHaveTextContent("varlock");
+		expect(figure).toHaveTextContent("28.4 kB");
+
+		// Switching back updates URL query string to empty
+		const adapterBtn = screen.getByRole("button", {
+			name: /Adapter only/i,
+		});
+		await userEvent.click(adapterBtn);
+		expect(window.location.search).toBe("");
+	});
+
+	it("initializes to full view when ?view=full is preset in URL", () => {
+		window.history.replaceState(null, "", "/?view=full");
+		render(<RuntimeBloatShowcase />);
+
+		const figure = screen.getByRole("figure", {
+			name: /production runtime bundle size comparison/i,
+		});
+		expect(figure).toHaveTextContent("@arkenv/standard + Valibot");
+		expect(figure).toHaveTextContent("23.3 kB");
+		expect(figure).toHaveTextContent("@arkenv/core + ArkType");
+		expect(figure).toHaveTextContent("156.0 kB");
+	});
+
+	it("renders npmx link for the package base name", () => {
+		render(<RuntimeBloatShowcase />);
+
 		const links = screen.getAllByRole("link");
 		expect(
 			links.some(
-				(l) => l.getAttribute("href") === "https://npmx.dev/package/varlock",
+				(l) =>
+					l.getAttribute("href") ===
+					"https://npmx.dev/package/@arkenv/standard",
 			),
 		).toBe(true);
 		expect(
 			links.some(
-				(l) =>
-					l.getAttribute("href") ===
-					"https://npmx.dev/package/@arkenv/standard",
+				(l) => l.getAttribute("href") === "https://npmx.dev/package/varlock",
 			),
 		).toBe(true);
 	});
+
+	it("renders the benchmark receipts link", () => {
+		render(<RuntimeBloatShowcase />);
+
+		const receipts = screen.getByRole("link", {
+			name: /View benchmark script/i,
+		});
+		expect(receipts).toBeInTheDocument();
+		expect(receipts).toHaveAttribute(
+			"href",
+			"https://github.com/yamcodes/arkenv/blob/v1/scripts/benchmark-bundle-size.ts",
+		);
+	});
 });