toiljs 0.0.34 → 0.0.36

package/docs/ssr.md

@@ -0,0 +1,184 @@
+# SSR templates
+
+toiljs renders pages with a split that keeps the wasm guest tiny and the output
+coherent with the client bundle: the **template** (the HTML shell, with named
+holes) is precompiled and held by the edge, and the guest's `render` entrypoint
+returns only the **hole values** — text, attributes, repeated rows, headers,
+status. The edge splices the values into the template. A 32-byte template hash
+travels with the values so the edge can reject a guest/template skew.
+
+This is for server-rendered HTML. JSON/binary API endpoints use
+[Routing](./routing.md) instead.
+
+## Authoring a route
+
+Opt a route in with `export const ssr = true`. toiljs renders it ONCE at build
+into the template (the static HTML shell, holes removed) and generates its typed
+`Slot` module; at request time the server fills only the holes and the browser
+hydrates the result in place, so an SSR route is served about as fast as a static
+file while still delivering real first-paint HTML and SEO.
+
+Mark the dynamic bits of the page with the hole markers from `toiljs/client`.
+They are transparent in the browser (they just render their children), so the
+same component is your normal client UI; only the build and the server treat them
+specially.
+
+- `<Hole id="name">{value}</Hole>`, a text hole (HTML-escaped for you).
+- `<RawHtml id="bio" html={s} />`, a raw-HTML block (you own sanitisation, like
+  `dangerouslySetInnerHTML`).
+- `<Repeat id="rows" each={items}>{(item) => <li>...</li>}</Repeat>`, a repeated
+  region; the row markup is captured once and stamped per item.
+- `<Island>{...}</Island>`, a client-only escape hatch: empty in the server HTML,
+  rendered after hydration (no first paint or SEO). Put router-hook-driven or
+  otherwise non-server-safe content here.
+
+```tsx
+import { Hole, Repeat, RawHtml, useLoaderData } from 'toiljs/client';
+
+export const ssr = true;
+export const loader = ({ params }: Toil.LoaderArgs) => loadProfile(params.name);
+
+export default function Profile() {
+  const d = useLoaderData<typeof loader>();
+  return (
+    <main>
+      <h1>@<Hole id="username">{d.username}</Hole></h1>
+      <RawHtml id="bio" html={d.bioHtml} />
+      <ul>
+        <Repeat id="posts" each={d.posts}>
+          {(p) => <li><Hole id="title">{p.title}</Hole></li>}
+        </Repeat>
+      </ul>
+    </main>
+  );
+}
+```
+
+The build derives each hole's `Slot` id and the template `HASH` from this render,
+emits the template manifest the edge serves, and the matching `Slot` module you
+import in the server `render` below.
+
+## The `render` entrypoint
+
+`render(req_ofs, req_len) -> i64` is a wasm export (re-exported by your `main.ts`
+via `export * from 'toiljs/server/runtime/exports'`). It decodes the request,
+runs the SSR router to find a matching `render` function, serializes that
+function's `SlotValues` into the values envelope, and returns it packed as
+`(ptr << 32) | len`.
+
+You register render functions with the `Ssr` router (the compiler injects the
+registration for auto-discovered routes):
+
+```ts
+import { Ssr, SlotValues, HtmlBuilder } from 'toiljs/server/runtime';
+import { Slot, HASH } from './greeting.slots';
+
+function renderGreeting(req: Request): SlotValues | null {
+  if (req.path != '/hello') return null;     // not my route
+  const v = new SlotValues(HASH);
+  v.setText(Slot.greeting, 'world & <friends>'); // React-escaped
+  return v;
+}
+
+Ssr.register(renderGreeting);
+```
+
+A render function returns `SlotValues` for a page it owns, or `null` to let the
+next registered renderer try.
+
+## Slots
+
+A route's template defines its holes as a small typed module: a `Slot` enum of
+stable numeric ids and a 32-byte `HASH` that pins the values to a specific
+compiled template.
+
+```ts
+// greeting.slots.ts
+export enum Slot { greeting = 0, count = 1 }
+export const HASH: StaticArray<u8> = /* 32 bytes, generated from the template */;
+```
+
+These are generated by the compiler from your rendered template, and are
+hand-writable through the typed API.
+
+## `SlotValues`
+
+The object a render function fills. Each setter targets a slot id; the kind
+determines how the edge escapes and splices it.
+
+| Method | Signature | Use |
+| --- | --- | --- |
+| `setText` | `setText(slotId, value: string)` | Text content. React-escaped (safe by default). |
+| `setRaw` | `setRaw(slotId, html: string)` | Raw HTML. You are responsible for sanitizing it. |
+| `setAttr` | `setAttr(slotId, value: string)` | An attribute value (attribute-escaped). |
+| `setRepeat` | `setRepeat(slotId, rows: HtmlBuilder)` | A repeated region, pre-stamped row by row. |
+| `setHeader` | `setHeader(name, value)` | A response header. |
+| `setStatus` | `setStatus(code)` | The HTTP status. |
+
+Construct it with the route's template hash: `new SlotValues(HASH)`.
+
+## `HtmlBuilder`
+
+Assembles a repeat region (or any HTML fragment) with the same escaping
+guarantees, chaining `raw` (verbatim markup) and `text` (escaped content):
+
+```ts
+const rows = new HtmlBuilder();
+for (let i = 0; i < items.length; i++) {
+  rows.raw('<li>').text(items[i]).raw('</li>'); // items[i] is escaped
+}
+v.setRepeat(Slot.count, rows);
+```
+
+## Escaping
+
+`setText`, `setAttr`, and `HtmlBuilder.text` escape exactly as React does, so
+server-rendered markup and client hydration agree:
+
+```
+"  →  &quot;       &  →  &amp;       '  →  &#x27;
+<  →  &lt;         >  →  &gt;
+```
+
+(`'` becomes `&#x27;` — React's exact choice — not `&#39;`.) Use `setRaw` /
+`HtmlBuilder.raw` only for markup you have produced or sanitized yourself.
+
+## Hydration and SSR-safe routes
+
+The browser hydrates the server HTML in place rather than re-rendering it: the
+markup the edge splices is byte-for-byte what React would produce for the same
+data (the holes are escaped exactly as React escapes them, above), so
+`hydrateRoot` matches with no flash and no client re-render.
+
+For that to hold, an SSR route and the layouts above it must render under static
+markup: use the hole markers and `useLoaderData`, and move anything that needs
+router hooks or browser-only APIs into an `<Island>`. A route that cannot render
+this way is skipped at build (with a warning) and falls back to normal client
+rendering, so opting in is always safe.
+
+Build output for an SSR route lands in `build/client/_ssr/` (the template and its
+binary manifest) alongside the generated `Slot` module; routes without
+`ssr = true` are untouched.
+
+## The values envelope
+
+For reference, the guest serializes `SlotValues` to this little-endian layout
+(the edge decodes it and splices against the template):
+
+```
+u16  status
+[32] template_hash
+u16  n_headers      ; then for each: u16 name_len, u16 val_len, name, val
+u16  n_slots        ; then for each: u16 slot_id, u8 kind, u32 value_len, value
+```
+
+If a value cannot be represented (an overflow), the guest emits a fail-safe 500
+rather than a corrupt page. The `template_hash` lets the edge detect and reject a
+mismatch between the guest's idea of the template and the deployed one.
+
+## Dev server
+
+The dev server provides the same `render` path as the edge: `WasmServerModule`
+has a `dispatchRender` that runs a fresh instance through the `render` export and
+returns the raw values envelope, mirroring the edge contract, so SSR behaves the
+same locally.

package/docs/time.md

@@ -0,0 +1,43 @@
+# Time
+
+`Time` is the guest's wall-clock. It is the toiljs-blessed way to read the
+current time, backed by the host's `Date.now()` binding (`env.Date.now`). Both
+the edge and the dev server provide that binding, so time behaves identically in
+`toiljs dev` and in production.
+
+It is available as an ambient global (`@global`, no import) and is also exported
+from `toiljs/server/runtime`.
+
+```ts
+import { Time } from 'toiljs/server/runtime'; // optional; Time is also a global
+
+const ms = Time.nowMillis();   // i64 milliseconds since the Unix epoch
+const s  = Time.nowSeconds();  // u64 whole seconds since the Unix epoch
+```
+
+## API
+
+| Member | Signature | Description |
+| --- | --- | --- |
+| `Time.nowMillis()` | `static nowMillis(): i64` | Milliseconds since the Unix epoch (the raw host `Date.now()` value). |
+| `Time.nowSeconds()` | `static nowSeconds(): u64` | Whole seconds since the epoch (`nowMillis() / 1000`). The unit used by sessions and login challenges. |
+
+## Semantics
+
+`Time` is **wall-clock, not monotonic** — exactly like browser `Date.now()`. It
+tracks the system clock and can step backward across an NTP correction.
+
+- Use it to stamp and compare absolute instants: session `iat`/`exp`, login
+  challenge expiry, cache ages.
+- Do **not** use it to measure elapsed time or as a high-resolution timer; a
+  backward step would produce a negative or zero interval.
+
+## Relationship to `Date.now()`
+
+ToilScript's `Date.now()` lowers to the same `env.Date.now` host import, so you
+*can* call it directly. Prefer `Time`: it makes the host boundary (and the
+single millisecond unit) explicit and easy to find, and it gives you
+`nowSeconds()` without an open-coded `/ 1000` cast at every call site.
+
+`AuthService` uses `Time.nowSeconds()` internally for session `iat`/`exp`, so
+session timing and any timing you do in a handler share one clock.

package/examples/basic/client/routes/auth.tsx

@@ -0,0 +1,198 @@
+// Auth / session demo. Drives the server's `@user` / `@auth` / `AuthService`
+// surface (server/routes/Session.ts): a dev login mints an HMAC-signed
+// `__Host-toil_sess` cookie (+ a readable `__Secure-toil_user` companion), the
+// guarded `/session/me` route returns the verified user, and logout clears both.
+//
+// Two views of "who am I": `getUser()` reads the readable companion cookie with
+// no round-trip (instant, but UNTRUSTED, a client can forge it), while
+// `GET /session/me` is the server re-verifying the signed session (trusted).
+// The full post-quantum register/login (ML-DSA-44) needs an account store and is
+// stubbed in server/routes/Auth.ts; see docs/auth.md.
+import { useCallback, useEffect, useState } from 'react';
+
+import { Account } from 'shared/server';
+
+/** Read one cookie value from `document.cookie`, or null. */
+function readCookie(name: string): string | null {
+    const pairs = (document.cookie || '').split('; ');
+    for (const p of pairs) {
+        const eq = p.indexOf('=');
+        if (eq > 0 && p.slice(0, eq) === name) return p.slice(eq + 1);
+    }
+    return null;
+}
+
+function b64urlDecode(s: string): Uint8Array | null {
+    try {
+        let b = s.replace(/-/g, '+').replace(/_/g, '/');
+        while (b.length % 4) b += '=';
+        const bin = atob(b);
+        const out = new Uint8Array(bin.length);
+        for (let i = 0; i < bin.length; i++) out[i] = bin.charCodeAt(i);
+        return out;
+    } catch {
+        return null;
+    }
+}
+
+/** Decode the readable companion cookie under either name (HTTP `toil_user` or
+ * HTTPS `__Secure-toil_user`). UNTRUSTED, display-only, like the generated
+ * `getUser()` (which only knows the HTTPS name). */
+function readCompanion(): Account | null {
+    const raw = readCookie('toil_user') ?? readCookie('__Secure-toil_user');
+    if (raw === null) return null;
+    const bytes = b64urlDecode(raw);
+    if (bytes === null) return null;
+    try {
+        return Account.decode(bytes);
+    } catch {
+        return null;
+    }
+}
+
+export const metadata: Toil.Metadata = {
+    title: 'Auth',
+    description:
+        'Sessions and the @user / @auth surface: a dev login mints a signed session cookie, the guarded /session/me returns the verified user, and getUser() reads the readable companion.',
+};
+
+/** Encode a bare string the way the server reads it (`DataReader.readString`). */
+function encodeString(s: string): Uint8Array {
+    return new DataWriter().writeString(s).toBytes();
+}
+
+/** The server-verified user from `GET /session/me` (binary: string, bool, u64). */
+interface VerifiedUser {
+    username: string;
+    admin: boolean;
+    score: string;
+}
+
+export default function Auth(): React.JSX.Element {
+    const [username, setUsername] = useState('ada');
+    const [companion, setCompanion] = useState<Account | null>(null);
+    const [verified, setVerified] = useState<VerifiedUser | null | 'none'>(null);
+    const [busy, setBusy] = useState(false);
+    const [log, setLog] = useState<string>('');
+
+    const refreshCompanion = useCallback(() => setCompanion(readCompanion()), []);
+    useEffect(refreshCompanion, [refreshCompanion]);
+
+    const devLogin = useCallback(async () => {
+        setBusy(true);
+        try {
+            const res = await fetch('/session/dev-login', { method: 'POST', credentials: 'same-origin', body: encodeString(username) as BodyInit });
+            setLog(`POST /session/dev-login -> ${res.status} ${(await res.text()).trim()}`);
+            refreshCompanion();
+            setVerified(null);
+        } finally {
+            setBusy(false);
+        }
+    }, [username, refreshCompanion]);
+
+    const checkSession = useCallback(async () => {
+        setBusy(true);
+        try {
+            const res = await fetch('/session/me', { credentials: 'same-origin' });
+            if (res.status === 401) {
+                setVerified('none');
+                setLog('GET /session/me -> 401 (no valid session)');
+                return;
+            }
+            const r = new DataReader(new Uint8Array(await res.arrayBuffer()));
+            setVerified({ username: r.readString(), admin: r.readBool(), score: r.readU64().toString() });
+            setLog('GET /session/me -> 200 (server-verified session)');
+        } finally {
+            setBusy(false);
+        }
+    }, []);
+
+    const logout = useCallback(async () => {
+        setBusy(true);
+        try {
+            const res = await fetch('/session/logout', { method: 'POST', credentials: 'same-origin' });
+            setLog(`POST /session/logout -> ${res.status} ${(await res.text()).trim()}`);
+            refreshCompanion();
+            setVerified(null);
+        } finally {
+            setBusy(false);
+        }
+    }, [refreshCompanion]);
+
+    return (
+        <main style={{ maxWidth: 640, margin: '0 auto', padding: '2rem 1rem', lineHeight: 1.5 }}>
+            <h1>Auth and sessions</h1>
+            <p>
+                A dev login mints an HMAC-signed <code>__Host-toil_sess</code> session cookie plus a
+                readable <code>__Secure-toil_user</code> companion. The guarded <code>/session/me</code>{' '}
+                route ( <code>@auth</code> ) re-verifies the signed session; <code>getUser()</code> reads
+                only the companion (display-only, untrusted). Needs the server running.
+            </p>
+
+            <section style={{ display: 'flex', gap: '0.5rem', alignItems: 'center', flexWrap: 'wrap' }}>
+                <label>
+                    user{' '}
+                    <input
+                        value={username}
+                        onChange={(e) => setUsername(e.target.value)}
+                        style={{ padding: '0.3rem 0.5rem' }}
+                    />
+                </label>
+                <button onClick={devLogin} disabled={busy || username.length === 0}>
+                    Dev login
+                </button>
+                <button onClick={checkSession} disabled={busy}>
+                    Check /session/me
+                </button>
+                <button onClick={logout} disabled={busy}>
+                    Logout
+                </button>
+            </section>
+
+            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem', marginTop: '1.5rem' }}>
+                <div style={{ border: '1px solid #2563ff55', borderRadius: 8, padding: '0.75rem 1rem' }}>
+                    <h3 style={{ marginTop: 0 }}>getUser(), client</h3>
+                    <p style={{ fontSize: '0.85em', opacity: 0.7, marginTop: 0 }}>
+                        reads the readable companion cookie, untrusted, instant
+                    </p>
+                    {companion ? (
+                        <pre>
+                            {JSON.stringify(
+                                { username: companion.username, admin: companion.admin, score: String(companion.score) },
+                                null,
+                                2,
+                            )}
+                        </pre>
+                    ) : (
+                        <p>no companion cookie</p>
+                    )}
+                </div>
+
+                <div style={{ border: '1px solid #7c3aed55', borderRadius: 8, padding: '0.75rem 1rem' }}>
+                    <h3 style={{ marginTop: 0 }}>/session/me, server</h3>
+                    <p style={{ fontSize: '0.85em', opacity: 0.7, marginTop: 0 }}>
+                        the server re-verifies the signed session, trusted
+                    </p>
+                    {verified === null ? (
+                        <p>not checked yet</p>
+                    ) : verified === 'none' ? (
+                        <p>401, no valid session</p>
+                    ) : (
+                        <pre>{JSON.stringify(verified, null, 2)}</pre>
+                    )}
+                </div>
+            </div>
+
+            {log ? (
+                <pre style={{ marginTop: '1rem', background: '#0e152099', padding: '0.5rem 0.75rem', borderRadius: 6 }}>
+                    {log}
+                </pre>
+            ) : null}
+
+            <p style={{ marginTop: '1.5rem', fontSize: '0.85em', opacity: 0.7 }}>
+                The full post-quantum register/login (ML-DSA-44, password-derived) needs an account
+                store and is stubbed in <code>server/routes/Auth.ts</code>. See <code>docs/auth.md</code>.
+            </p>
+        </main>
+    );
+}

package/examples/basic/client/routes/cookies.tsx

@@ -0,0 +1,199 @@
+// Demo of the server-side cookie library. In the toilscript server, `Cookie`,
+// `Cookies`, and `SecureCookies` are globals (no import), the full RFC 6265bis
+// surface plus HMAC signing and AES-256-GCM encryption, running in the server wasm.
+// These controls call the `/api/cookies/*` routes in `server/core/AppHandler.ts`.
+// Needs the server running to respond.
+import { useEffect, useState, type CSSProperties } from 'react';
+
+export const metadata: Toil.Metadata = {
+    title: 'Cookies',
+    description:
+        'Server-side cookies as a global: the Cookie builder, parsing, HMAC signing, and AES-256-GCM encryption, running in the server wasm.',
+};
+
+interface SetResp {
+    visits: number;
+    emitted: string[];
+}
+interface InspectResp {
+    raw: string;
+    count: number;
+    cookies: Record<string, string>;
+    session: string | null;
+    secret: string | null;
+}
+interface SealResp {
+    value: string;
+    signed: string;
+    unsigned: string | null;
+    encrypted: string;
+    decrypted: string | null;
+    tamperVerifies: boolean;
+}
+
+const mono: CSSProperties = { fontFamily: 'monospace', fontSize: '0.82rem', wordBreak: 'break-all' };
+const card: CSSProperties = {
+    border: '1px solid #1d2530',
+    borderRadius: 8,
+    padding: '12px 16px',
+    margin: '12px 0',
+    background: '#0c1218',
+};
+const label: CSSProperties = { opacity: 0.7, fontSize: '0.8rem', marginTop: 6 };
+
+export default function CookiesDemo() {
+    const [gallery, setGallery] = useState<Record<string, string> | null>(null);
+    const [setResp, setSetResp] = useState<SetResp | null>(null);
+    const [inspect, setInspect] = useState<InspectResp | null>(null);
+    const [cleared, setCleared] = useState<string[] | null>(null);
+    const [seal, setSeal] = useState<SealResp | null>(null);
+    const [sealInput, setSealInput] = useState('hello toiljs');
+    const [jsCookies, setJsCookies] = useState('');
+    const [err, setErr] = useState('');
+
+    const readJs = (): void => setJsCookies(document.cookie || '(nothing visible to JS)');
+    useEffect(readJs, []);
+
+    const guard = async (fn: () => Promise<void>): Promise<void> => {
+        setErr('');
+        try {
+            await fn();
+        } catch (e) {
+            setErr(String(e));
+        }
+    };
+    const getJSON = async <T,>(url: string): Promise<T> => {
+        const res = await fetch(url);
+        if (!res.ok) throw new Error(`${url} -> ${String(res.status)}`);
+        return (await res.json()) as T;
+    };
+
+    const showGallery = (): Promise<void> =>
+        guard(async () => setGallery(await getJSON<Record<string, string>>('/api/cookies/gallery')));
+    const doSet = (): Promise<void> =>
+        guard(async () => {
+            setSetResp(await getJSON<SetResp>('/api/cookies/set'));
+            readJs();
+        });
+    const doInspect = (): Promise<void> =>
+        guard(async () => setInspect(await getJSON<InspectResp>('/api/cookies/inspect')));
+    const doClear = (): Promise<void> =>
+        guard(async () => {
+            const r = await getJSON<{ cleared: string[] }>('/api/cookies/clear');
+            setCleared(r.cleared);
+            setInspect(null);
+            setSetResp(null);
+            readJs();
+        });
+    const doSeal = (): Promise<void> =>
+        guard(async () =>
+            setSeal(await getJSON<SealResp>('/api/cookies/seal?v=' + encodeURIComponent(sealInput))),
+        );
+
+    return (
+        <main style={{ maxWidth: 760 }}>
+            <h1>Cookies</h1>
+            <p>
+                <code>Cookie</code>, <code>Cookies</code>, and <code>SecureCookies</code> are globals in
+                the server (no import), exactly like <code>crypto</code>: the full RFC 6265bis surface
+                plus HMAC signing and AES-256-GCM encryption, running in the server wasm. See{' '}
+                <code>server/core/AppHandler.ts</code>. Needs the server running (<code>toiljs dev</code>).
+            </p>
+
+            {err ? <p style={{ color: '#ff6b6b', ...mono }}>{err}</p> : null}
+
+            <h2>1. Everything you can do</h2>
+            <p>Every attribute and cookie type, with the exact `Set-Cookie` string it serializes to.</p>
+            <button onClick={showGallery}>Show the gallery</button>
+            {gallery ? (
+                <div style={card}>
+                    {Object.keys(gallery).map((k) => (
+                        <div key={k}>
+                            <div style={label}>{k}</div>
+                            <div style={mono}>{gallery[k]}</div>
+                        </div>
+                    ))}
+                </div>
+            ) : null}
+
+            <h2>2. Set cookies</h2>
+            <p>
+                Stores three real cookies: a plain <code>visits</code> counter, an HMAC-signed{' '}
+                <code>__Host-session</code>, and an AES-GCM-encrypted <code>secret</code>. The last two
+                are <code>HttpOnly</code>, so JavaScript cannot read them, only the server can.
+            </p>
+            <button onClick={doSet}>Set cookies</button>
+            {setResp ? (
+                <div style={card}>
+                    <div>visit #{setResp.visits}</div>
+                    {setResp.emitted.map((c, i) => (
+                        <div key={i} style={mono}>
+                            {c}
+                        </div>
+                    ))}
+                </div>
+            ) : null}
+
+            <h2>3. What JS sees vs what the server sees</h2>
+            <p>
+                <code>document.cookie</code> only exposes non-<code>HttpOnly</code> cookies, so the
+                signed session and encrypted secret are hidden from it. The server parses all of them
+                and verifies/decrypts the protected ones.
+            </p>
+            <button onClick={readJs}>Read document.cookie</button>{' '}
+            <button onClick={doInspect}>Ask the server (/inspect)</button>
+            <div style={card}>
+                <div style={label}>document.cookie (browser / JS)</div>
+                <div style={mono}>{jsCookies}</div>
+            </div>
+            {inspect ? (
+                <div style={card}>
+                    <div style={label}>server view (/api/cookies/inspect)</div>
+                    <div style={mono}>raw: {inspect.raw || '(none)'}</div>
+                    <div style={mono}>parsed: {JSON.stringify(inspect.cookies)}</div>
+                    <div style={mono}>session (HMAC-verified): {inspect.session ?? 'null (missing or tampered)'}</div>
+                    <div style={mono}>secret (AES-GCM-decrypted): {inspect.secret ?? 'null (missing or tampered)'}</div>
+                </div>
+            ) : null}
+
+            <h2>4. Clear</h2>
+            <button onClick={doClear}>Clear the demo cookies</button>
+            {cleared ? (
+                <div style={card}>
+                    {cleared.map((c, i) => (
+                        <div key={i} style={mono}>
+                            {c}
+                        </div>
+                    ))}
+                </div>
+            ) : null}
+
+            <h2>5. Sign &amp; encrypt a value</h2>
+            <p>
+                <code>SecureCookies.signed(key)</code> (HMAC-SHA256, readable but tamper-proof) and{' '}
+                <code>SecureCookies.encrypted(key)</code> (AES-256-GCM, confidential). Both bind the
+                value to the cookie name, and a tampered signature fails to verify.
+            </p>
+            <input
+                value={sealInput}
+                onChange={(e) => setSealInput(e.target.value)}
+                style={{ padding: 6, marginRight: 8, minWidth: 220 }}
+            />
+            <button onClick={doSeal}>Seal it</button>
+            {seal ? (
+                <div style={card}>
+                    <div style={mono}>value: {seal.value}</div>
+                    <div style={mono}>signed: {seal.signed}</div>
+                    <div style={mono}>unsigned: {seal.unsigned ?? 'null'}</div>
+                    <div style={mono}>encrypted: {seal.encrypted}</div>
+                    <div style={mono}>decrypted: {seal.decrypted ?? 'null'}</div>
+                    <div style={mono}>tampered signature verifies? {String(seal.tamperVerifies)}</div>
+                </div>
+            ) : null}
+
+            <p style={{ marginTop: 24 }}>
+                <Toil.Link href="/features">Back to features</Toil.Link>
+            </p>
+        </main>
+    );
+}