@atelic-action/ui 0.10.0 → 0.12.0

package/src/gate/verify.ts

@@ -0,0 +1,59 @@
+/**
+ * Access gate: verify a sign in link and start a session.
+ *
+ * Validates the signed token from the emailed link, sets the signed session
+ * cookie (plus a readable email cookie for the watermark), and redirects
+ * into the site. A site's `api/auth/verify.ts` re exports `GET` from here.
+ *
+ * Env (set on the Vercel project):
+ * - GATE_SESSION_SECRET    signing secret; also the gate's on and off switch
+ * - GATE_ALLOWLIST         the link's address must still be on it
+ * - GATE_SESSION_DAYS      session lifetime in days (optional, default 7)
+ * - GATE_WATERMARK_MODE    "pill" (default) or "tiled"
+ */
+import { isAllowed, positive } from "./config.js";
+import { safeNext } from "./next.js";
+import { signToken, verifyToken } from "./tokens.js";
+
+function cookie(name: string, value: string, maxAge: number, httpOnly: boolean): string {
+	const flags = ["Path=/", "Secure", "SameSite=Lax", `Max-Age=${maxAge}`];
+	if (httpOnly) flags.unshift("HttpOnly");
+	return `${name}=${encodeURIComponent(value)}; ${flags.join("; ")}`;
+}
+
+function redirect(location: string, headers?: Headers): Response {
+	const merged = headers ?? new Headers();
+	merged.set("Location", location);
+	// The request carried a token in its URL and the answer may carry cookies:
+	// nothing keeps a copy, and the next page learns nothing of the link.
+	merged.set("Cache-Control", "no-store");
+	merged.set("Referrer-Policy", "no-referrer");
+	return new Response(null, { status: 302, headers: merged });
+}
+
+export async function GET(request: Request): Promise<Response> {
+	const secret = process.env.GATE_SESSION_SECRET;
+	if (!secret) return redirect("/login?e=expired");
+
+	const token = new URL(request.url).searchParams.get("token");
+	const claims = await verifyToken(token, secret);
+	// An address taken off the allowlist after its link went out gets no session.
+	if (claims?.p !== "link" || !isAllowed(claims.e, process.env.GATE_ALLOWLIST)) {
+		return redirect("/login?e=expired");
+	}
+
+	const days = positive(process.env.GATE_SESSION_DAYS, 7);
+	// Whole seconds: a browser ignores a Max-Age that is not an integer.
+	const maxAge = Math.max(1, Math.round(days * 24 * 60 * 60));
+	const session = await signToken(
+		{ e: claims.e, x: Math.floor(Date.now() / 1000) + maxAge, p: "session" },
+		secret,
+	);
+	const mode = process.env.GATE_WATERMARK_MODE || "pill";
+
+	const headers = new Headers();
+	headers.append("Set-Cookie", cookie("gate_session", session, maxAge, true));
+	headers.append("Set-Cookie", cookie("gate_email", claims.e, maxAge, false));
+	headers.append("Set-Cookie", cookie("gate_wm", mode, maxAge, false));
+	return redirect(safeNext(claims.n), headers);
+}

package/src/gate/wall.ts

@@ -0,0 +1,74 @@
+/**
+ * What the access wall holds back. With the wall armed, every request needs
+ * a session except what the login page itself needs to render: the practice's
+ * FOOTPRINT.md says anything carrying a private signal is never hosted
+ * publicly, and on a private artifact that includes the owner's screenshots
+ * under /images/, the printed PDF, and the built chunks a document's content
+ * compiles into.
+ *
+ * The open paths are read from what the built /login page actually loads:
+ * its hashed CSS and JS under /assets/, the fonts its stylesheet declares,
+ * the favicon in its head, and the brand marks the header draws, which every
+ * prerendered page preloads because the router's pending page carries the
+ * header (each site's e2e/wall.spec.ts fails when the login page asks for
+ * anything else); plus the two sign in functions under /api/auth/, the login page itself,
+ * robots.txt, and the uptime monitor's health.json. /assets/doc/ is the one
+ * part of /assets/ held back: the build writes every chunk carrying a
+ * private content module there (the private chunks build plugin), so a document's
+ * copy and numbers never sit in a file the login page can load.
+ *
+ * A logo is a brand mark and is not private; a screenshot is evidence and
+ * may be. So brand marks, the sender's and the recipient's, live under
+ * public/brand/ and stay open, so the header and the login page can draw
+ * them, and the owner's screens live under public/images/ and are held. The
+ * sender's mark at /logo.svg and the favicon stay open where they are,
+ * because every cut already points at them there.
+ *
+ * The business's website build, when one is previewed, is proxied under
+ * /proto by a rewrite in the host's vercel.json. It is a public thing by design and carries no private reading, so
+ * it stays open on a private host too: a prospect reads the prototype
+ * without a sign in while the documents beside it stay behind the wall.
+ *
+ * Pure and dependency free, so the middleware imports it and the tests call
+ * it directly.
+ */
+
+const OPEN_EXACT = new Set([
+	"/login",
+	"/login/",
+	"/favicon.svg",
+	"/logo.svg",
+	"/robots.txt",
+	"/health.json",
+	"/proto",
+]);
+
+const OPEN_PREFIXES = ["/api/auth/", "/assets/", "/brand/", "/fonts/", "/proto/"];
+
+/** The one corner of an open prefix that stays behind the wall. */
+const HELD_PREFIXES = ["/assets/doc/"];
+
+/**
+ * Whether a request for this path needs a session when the wall is armed.
+ * The path is read the way a file server would read it (decoded, repeated
+ * slashes collapsed) so an encoded or doubled slash cannot walk a held file
+ * out through an open prefix; anything that will not decode, or still climbs
+ * a directory once decoded, is held. Case is folded for the held corner
+ * alone, so no spelling of it slips out, while an open path opens only as
+ * written: the host serves files by exact case, and a path that merely looks
+ * like an open one names some other file.
+ */
+export function needsSession(pathname: string): boolean {
+	let path: string;
+	try {
+		path = decodeURIComponent(pathname);
+	} catch {
+		return true;
+	}
+	path = path.replace(/\/{2,}/g, "/");
+	if (path.includes("..") || path.includes("\\")) return true;
+	const folded = path.toLowerCase();
+	if (HELD_PREFIXES.some((prefix) => folded.startsWith(prefix))) return true;
+	if (OPEN_EXACT.has(path)) return false;
+	return !OPEN_PREFIXES.some((prefix) => path.startsWith(prefix));
+}

package/src/styles/components.css

@@ -148,6 +148,114 @@
 		margin-top: 4px;
 	}
 
+	:is(.mkt, .atelic-ui) .stat-unit {
+		margin-left: 0.2em;
+		font-size: 0.4em;
+		font-weight: 500;
+		letter-spacing: 0;
+		color: var(--neutral-500);
+	}
+
+	/* ---- StatRow, quiet: a glance row for a working page. A light figure in
+	   the text color over a small capitalized label, the stats divided by a
+	   hairline. `--stat-size` sets the figure. ---- */
+	:is(.mkt, .atelic-ui) .stat-row.is-quiet {
+		display: flex;
+		gap: 0;
+	}
+	:is(.mkt, .atelic-ui) .stat-row.is-quiet .stat {
+		flex: 1;
+		min-width: 64px;
+		padding-right: 16px;
+	}
+	:is(.mkt, .atelic-ui) .stat-row.is-quiet .stat + .stat {
+		padding-left: 16px;
+		border-left: 1px solid var(--neutral-200);
+	}
+	:is(.mkt, .atelic-ui) .stat-row.is-quiet .stat .num {
+		align-items: baseline;
+		gap: 4px;
+		font: 300 var(--stat-size, 28px) / 1 var(--font-sans);
+		/* After the shorthand, which would otherwise reset it. */
+		font-variant-numeric: tabular-nums;
+		letter-spacing: -0.02em;
+		color: var(--tone, var(--ink));
+	}
+	:is(.mkt, .atelic-ui) .stat-row.is-quiet .stat-unit {
+		margin-left: 0;
+		font: 500 12px / 1 var(--font-mono);
+	}
+	:is(.mkt, .atelic-ui) .stat-row.is-quiet .stat .lbl {
+		margin-top: 7px;
+		font: 500 10px / 1.2 var(--font-sans);
+		letter-spacing: 0.1em;
+		text-transform: uppercase;
+		color: var(--neutral-500);
+	}
+
+	/* ---- Disclosure: a section the page opens and closes. The toggle's
+	   ::after covers the whole header row, so the meta and the chevron fold
+	   it too while staying out of its name. ---- */
+	:is(.mkt, .atelic-ui) .disclosure {
+		border: 1px solid var(--neutral-200);
+		border-radius: 16px;
+		background: var(--ui-card, var(--card));
+		overflow: hidden;
+	}
+	:is(.mkt, .atelic-ui) .disclosure-head {
+		position: relative;
+		display: flex;
+		align-items: center;
+		gap: 10px;
+		padding: 14px 18px;
+	}
+	:is(.mkt, .atelic-ui) .disclosure-title {
+		display: flex;
+		min-width: 0;
+		margin: 0;
+		font: inherit;
+	}
+	:is(.mkt, .atelic-ui) .disclosure-toggle {
+		border: none;
+		background: transparent;
+		padding: 0;
+		text-align: left;
+		font: 500 17px / 1 var(--font-sans);
+		letter-spacing: -0.01em;
+		color: var(--ink);
+		cursor: pointer;
+	}
+	:is(.mkt, .atelic-ui) .disclosure-toggle::after {
+		content: "";
+		position: absolute;
+		inset: 0;
+	}
+	:is(.mkt, .atelic-ui) .disclosure-toggle:focus-visible {
+		outline: none;
+	}
+	:is(.mkt, .atelic-ui) .disclosure-toggle:focus-visible::after {
+		outline: 2px solid var(--disclosure-focus, var(--ink));
+		outline-offset: -2px;
+		border-radius: 15px;
+	}
+	:is(.mkt, .atelic-ui) .disclosure-meta {
+		display: inline-flex;
+		align-items: center;
+		color: var(--neutral-500);
+	}
+	:is(.mkt, .atelic-ui) .disclosure-chevron {
+		margin-left: auto;
+		flex-shrink: 0;
+		color: var(--neutral-500);
+		transition: transform 200ms ease;
+	}
+	:is(.mkt, .atelic-ui) .disclosure.is-open .disclosure-chevron {
+		transform: rotate(180deg);
+	}
+	:is(.mkt, .atelic-ui) .disclosure-body {
+		border-top: 1px solid var(--neutral-200);
+	}
+
 	/* ---- Collapsible: a labeled line that opens to the detail behind it ---- */
 	:is(.mkt, .atelic-ui) .collapsible > summary {
 		display: flex;