toiljs 0.0.55 → 0.0.56

package/src/cli/doctor.ts

@@ -10,7 +10,12 @@ import { createRequire } from 'node:module';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 
-import { loadConfig, type ResolvedToilConfig, scanRoutes, TOIL_SERVER_ENV_DTS } from 'toiljs/compiler';
+import {
+    loadConfig,
+    type ResolvedToilConfig,
+    scanRoutes,
+    TOIL_SERVER_ENV_DTS,
+} from 'toiljs/compiler';
 
 import {
     type Check,
@@ -41,8 +46,8 @@ import {
     findRelativeAssets,
     hasFailures,
     type RestFacts,
-    type RpcFacts,
     RPC_TOILSCRIPT_MIN,
+    type RpcFacts,
     satisfiesMin,
     type SourceFile,
     summarize,
@@ -353,7 +358,9 @@ function applyRpcFix(root: string): RpcFixResult {
     const serverToilconfig = readJsonObject(path.join(root, 'toilconfig.json'));
     if (serverToilconfig !== null) {
         const entries = Array.isArray(serverToilconfig.entries)
-            ? (serverToilconfig.entries as unknown[]).filter((e): e is string => typeof e === 'string')
+            ? (serverToilconfig.entries as unknown[]).filter(
+                  (e): e is string => typeof e === 'string',
+              )
             : [];
         const dirs = new Set<string>();
         for (const e of entries) dirs.add(path.dirname(path.resolve(root, e)));

package/src/cli/notify.ts

@@ -13,12 +13,7 @@ import { fileURLToPath } from 'node:url';
 
 import { detectPackageManager } from './update.js';
 import { accent, bold, box, dim, version as cliVersion, warn } from './ui.js';
-import {
-    findOutdated,
-    isCacheFresh,
-    type OutdatedRow,
-    parseCheckCache,
-} from './version-check.js';
+import { findOutdated, isCacheFresh, type OutdatedRow, parseCheckCache } from './version-check.js';
 
 const REGISTRY_URL = 'https://registry.npmjs.org/toiljs/latest';
 const FETCH_TIMEOUT_MS = 2000;

package/src/cli/ui.ts

@@ -118,9 +118,7 @@ function visibleWidth(s: string): number {
 export function box(lines: readonly string[], paint: (s: string) => string = (s) => s): string {
     const width = lines.reduce((w, l) => Math.max(w, visibleWidth(l)), 0);
     const side = paint('│');
-    const body = lines.map(
-        (l) => `  ${side}  ${l}${' '.repeat(width - visibleWidth(l))}  ${side}`,
-    );
+    const body = lines.map((l) => `  ${side}  ${l}${' '.repeat(width - visibleWidth(l))}  ${side}`);
     return [
         '  ' + paint(`╭${'─'.repeat(width + 4)}╮`),
         ...body,
@@ -167,3 +165,5 @@ export function banner(): void {
     const ver = `${dim('  v')}${brand(version())}`;
     process.stdout.write('\n' + lines.join('\n') + '\n\n  ' + tagline() + '   ' + ver + '\n\n');
 }
+
+

package/src/cli/version-check.ts

@@ -29,7 +29,11 @@ export function parseCheckCache(raw: string): CheckCache | null {
 }
 
 /** True when the cached answer is still trustworthy (also stale if the clock went backwards). */
-export function isCacheFresh(cache: CheckCache, now: number, ttlMs: number = CHECK_TTL_MS): boolean {
+export function isCacheFresh(
+    cache: CheckCache,
+    now: number,
+    ttlMs: number = CHECK_TTL_MS,
+): boolean {
     return cache.checkedAt <= now && now - cache.checkedAt < ttlMs;
 }
 

package/src/client/auth.ts

@@ -11,7 +11,7 @@
  * JSON, byte-identical to the server's `AuthService.buildLoginMessage`.
  */
 
-import { argon2id, createSHA256, createHMAC } from 'hash-wasm';
+import { argon2id, createHMAC, createSHA256 } from 'hash-wasm';
 import { ml_dsa44 } from '@dacely/noble-post-quantum/ml-dsa.js';
 import { ml_kem768 } from '@dacely/noble-post-quantum/ml-kem.js';
 import { ristretto255_oprf } from '@noble/curves/ed25519.js';
@@ -45,7 +45,9 @@ function fromHex(hex: string): Uint8Array {
  * decapsulate, so a valid confirmation tag authenticates the server. This is
  * the demo dev key; a real deployment pins its own (and rotates it).
  */
-export const SERVER_KEM_PUBLIC_KEY = fromHex('29d765e8083182891302569b3712a856e564fdd484b0706b0c68568d5ab7edc742cf74459d64595455a60f267973aa55e43c5be61925a3822eafcca445e36dc4655636e31e6fc9bec338b253f94290008ef7f40dbddb49c15c690f6755a23a1b3c85cfd5207e71a607086a6fc6d74a05080f43276901a19cafdb8de7771d58ea07f0f1056b905127b22223d08e75173199f13ab13c5dcd3b51ac784f84e520484a262b845a897c41cf27324ab6ba545c78c9ccab361051e0bba53498af26240fa0d566d1572684f4b42e253e6d052c848650915063c35641e1121ef8d9cfd17b667b351103c56d195007c9376d0c08aa268396814490eab4c364175a94533267a1933862cc4c33bcf0a13d1fa2b9d6c5082eeca1480672f2526cbe013beff14dc908a386e0b633c8761023cbed760deac6709bc328d865ac82e12307b673d96711dbb27a4d939230d25b53d594169a318be0200fa33550e9418e2a3b30e9719edc09d5fc4306f1abfd021eab14637a8a72c5931d25dc9b56db0e6ab677522b10f25307dbb804a6774ce05b87b0976a4b227bfe6caf20a79e64004fbd27b1eea018b3ab8ffa629f2dc87f19278f95168e94e44660a3370c537795678eb2f056260609769740583b51b291862927a1938737c6a37f40b78f00671cccbcb88ac3427b37915ed58782998f84051647707d48995472baad3f64a7cca54e1c0734db08751c614a34f28b84f2c1b5a6817355ab61957c486b7acffbc092bc8a7b46387f33b53ed372f7168d31a71cd008539928b0cdf91e835aa97f6a2be6d327b87a6ae478701d75a59a25179cb14997bb2552853014724170a1c49b82c2bcebc3279024e1fa44c53c7afdc43f0bd22116490f3b74c90e7296be58b9a91168f2fa0c3d378a3bcac959f357825c9976a8c9ee944f29b45e96d7345d9b478431a20cf1c5d3a3227c717fd204619777636c0cb140db5c50d2a3302334461030bee34e4eb1a6f02b733f9ccda4290fa168bc039568373241542728d00030d1f251e83737cb215adbdc1de75978675a0cd0d75b12748abdda7a9852629c63697d145af2c69854b06e03f37c4b064e4c9a4c03f2ad4d081e70180e9547247921918118086b62b4f7727f46b24e3e79ba3f28209f32b5102035bf935856232f83642268c0292ec6bf8e9462382163d30a20b4bcb7b4439310ec9d0a148193907fc07697342967cf1a16c6b3c71558951fa915400736cf699262b54b723abb2ecc27b74b68ee494287595ef818388adb49e883c67bfa5c226c0eef037a0851a29d34675912c1ea1068310b6dfcd017c809c8fbfc2c3ae78dfef07299960eeefba182662a90fa422c1790f356a2ea909012b15623a9b9e450a282cb530589a68368b3583159d9010ac3e52cc974753c342e58279516339dfb691df94b13a223ad97eb6a09c21dafe6304a3642d6d2067b5238497661fe88ad1227ca3557be2a576b6e17c5a7f997ea07929e76407e376aba74c44cd8504804776f39bbb8327624188a63501e83b404d9438cade0b11dc3ac61856447fb072b91761c228878f01b2eb6b4b21ba664c2c75882431603b25a449ffeb8410b910558581777562aa9b2181fd9c04713ad9326462d3e842121c4997f9aa932417c67851625816de66e0d65637434629f39');
+export const SERVER_KEM_PUBLIC_KEY = fromHex(
+    '29d765e8083182891302569b3712a856e564fdd484b0706b0c68568d5ab7edc742cf74459d64595455a60f267973aa55e43c5be61925a3822eafcca445e36dc4655636e31e6fc9bec338b253f94290008ef7f40dbddb49c15c690f6755a23a1b3c85cfd5207e71a607086a6fc6d74a05080f43276901a19cafdb8de7771d58ea07f0f1056b905127b22223d08e75173199f13ab13c5dcd3b51ac784f84e520484a262b845a897c41cf27324ab6ba545c78c9ccab361051e0bba53498af26240fa0d566d1572684f4b42e253e6d052c848650915063c35641e1121ef8d9cfd17b667b351103c56d195007c9376d0c08aa268396814490eab4c364175a94533267a1933862cc4c33bcf0a13d1fa2b9d6c5082eeca1480672f2526cbe013beff14dc908a386e0b633c8761023cbed760deac6709bc328d865ac82e12307b673d96711dbb27a4d939230d25b53d594169a318be0200fa33550e9418e2a3b30e9719edc09d5fc4306f1abfd021eab14637a8a72c5931d25dc9b56db0e6ab677522b10f25307dbb804a6774ce05b87b0976a4b227bfe6caf20a79e64004fbd27b1eea018b3ab8ffa629f2dc87f19278f95168e94e44660a3370c537795678eb2f056260609769740583b51b291862927a1938737c6a37f40b78f00671cccbcb88ac3427b37915ed58782998f84051647707d48995472baad3f64a7cca54e1c0734db08751c614a34f28b84f2c1b5a6817355ab61957c486b7acffbc092bc8a7b46387f33b53ed372f7168d31a71cd008539928b0cdf91e835aa97f6a2be6d327b87a6ae478701d75a59a25179cb14997bb2552853014724170a1c49b82c2bcebc3279024e1fa44c53c7afdc43f0bd22116490f3b74c90e7296be58b9a91168f2fa0c3d378a3bcac959f357825c9976a8c9ee944f29b45e96d7345d9b478431a20cf1c5d3a3227c717fd204619777636c0cb140db5c50d2a3302334461030bee34e4eb1a6f02b733f9ccda4290fa168bc039568373241542728d00030d1f251e83737cb215adbdc1de75978675a0cd0d75b12748abdda7a9852629c63697d145af2c69854b06e03f37c4b064e4c9a4c03f2ad4d081e70180e9547247921918118086b62b4f7727f46b24e3e79ba3f28209f32b5102035bf935856232f83642268c0292ec6bf8e9462382163d30a20b4bcb7b4439310ec9d0a148193907fc07697342967cf1a16c6b3c71558951fa915400736cf699262b54b723abb2ecc27b74b68ee494287595ef818388adb49e883c67bfa5c226c0eef037a0851a29d34675912c1ea1068310b6dfcd017c809c8fbfc2c3ae78dfef07299960eeefba182662a90fa422c1790f356a2ea909012b15623a9b9e450a282cb530589a68368b3583159d9010ac3e52cc974753c342e58279516339dfb691df94b13a223ad97eb6a09c21dafe6304a3642d6d2067b5238497661fe88ad1227ca3557be2a576b6e17c5a7f997ea07929e76407e376aba74c44cd8504804776f39bbb8327624188a63501e83b404d9438cade0b11dc3ac61856447fb072b91761c228878f01b2eb6b4b21ba664c2c75882431603b25a449ffeb8410b910558581777562aa9b2181fd9c04713ad9326462d3e842121c4997f9aa932417c67851625816de66e0d65637434629f39',
+);
 
 export const PUBLIC_KEY_LEN = 1312;
 export const SECRET_KEY_LEN = 2560;
@@ -171,7 +173,6 @@ export function buildRegisterMessage(username: string, publicKey: Uint8Array): U
     return new DataWriter().writeU8(1).writeString(username).writeBytes(publicKey).toBytes();
 }
 
-
 function decodeKdf(r: DataReader): KdfParams {
     return {
         memKiB: r.readU32(),
@@ -181,7 +182,6 @@ function decodeKdf(r: DataReader): KdfParams {
     };
 }
 
-
 async function postBinary(baseUrl: string, path: string, body: Uint8Array): Promise<DataReader> {
     const res = await fetch(baseUrl + path, {
         method: 'POST',
@@ -204,7 +204,11 @@ export interface AuthOptions {
  * stretched with Argon2id into an ML-DSA-44 keypair, and ONLY the public key
  * (plus a proof-of-possession signature) is submitted. Throws on failure.
  */
-export async function register(username: string, password: string, opts: AuthOptions = {}): Promise<void> {
+export async function register(
+    username: string,
+    password: string,
+    opts: AuthOptions = {},
+): Promise<void> {
     const baseUrl = opts.baseUrl ?? '/auth';
     const oprf = ristretto255_oprf.oprf;
     const pw = utf8(password.normalize('NFKC'));
@@ -268,7 +272,11 @@ export async function register(username: string, password: string, opts: AuthOpt
  * The secret key, seed, and shared secret are wiped as soon as they are used.
  * Returns the opaque session token. Throws (one generic message) on any failure.
  */
-export async function login(username: string, password: string, opts: AuthOptions = {}): Promise<Uint8Array> {
+export async function login(
+    username: string,
+    password: string,
+    opts: AuthOptions = {},
+): Promise<Uint8Array> {
     const baseUrl = opts.baseUrl ?? '/auth';
     const oprf = ristretto255_oprf.oprf;
     const pw = utf8(password.normalize('NFKC'));
@@ -299,8 +307,17 @@ export async function login(username: string, password: string, opts: AuthOption
     const { cipherText, sharedSecret } = ml_kem768.encapsulate(SERVER_KEM_PUBLIC_KEY);
     const serverKemKeyId = await sha256Bytes(SERVER_KEM_PUBLIC_KEY);
     const message = buildLoginMessage(
-        username, aud, cid, nonce, iat, exp,
-        cipherText, kdf.memKiB, kdf.iterations, kdf.parallelism, serverKemKeyId,
+        username,
+        aud,
+        cid,
+        nonce,
+        iat,
+        exp,
+        cipherText,
+        kdf.memKiB,
+        kdf.iterations,
+        kdf.parallelism,
+        serverKemKeyId,
     );
     let signature: Uint8Array;
     try {
@@ -333,9 +350,15 @@ export async function login(username: string, password: string, opts: AuthOption
     //    decapsulated correctly derives the same K, so a valid tag proves its
     //    identity. Verify before returning the session.
     const transcriptHash = await sha256Bytes(message);
-    const sessionKey = await hmacSha256(sharedSecret, concatBytes(utf8(SESSION_KEY_LABEL), transcriptHash));
+    const sessionKey = await hmacSha256(
+        sharedSecret,
+        concatBytes(utf8(SESSION_KEY_LABEL), transcriptHash),
+    );
     wipe(sharedSecret);
-    const expected = await hmacSha256(sessionKey, concatBytes(utf8(SERVER_CONFIRM_LABEL), transcriptHash));
+    const expected = await hmacSha256(
+        sessionKey,
+        concatBytes(utf8(SERVER_CONFIRM_LABEL), transcriptHash),
+    );
     if (!bytesEqual(expected, serverConfirm)) throw new Error('auth: server authentication failed');
 
     return session; // session token

package/src/client/components/Form.tsx

@@ -1,6 +1,6 @@
-import { useRef, type ReactNode, type SyntheticEvent } from 'react';
+import { type ReactNode, type SyntheticEvent, useRef } from 'react';
 
-import { useAction, type ActionState, type RevalidateTarget } from '../routing/action.js';
+import { type ActionState, type RevalidateTarget, useAction } from '../routing/action.js';
 
 /** Props for {@link Form}. */
 export interface FormProps {

package/src/client/components/Image.tsx

@@ -1,4 +1,4 @@
-import { useState, type CSSProperties, type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type ComponentPropsWithRef, type CSSProperties, type ReactNode, useState } from 'react';
 
 /**
  * Props for {@link Image}: every standard `<img>` attribute, plus toil's layout/loading controls.

package/src/client/components/Script.tsx

@@ -1,4 +1,4 @@
-import { useEffect, type ReactNode } from 'react';
+import { type ReactNode, useEffect } from 'react';
 
 /**
  * When a {@link Script} is injected, relative to the app becoming interactive:

package/src/client/components/Slot.tsx

@@ -1,4 +1,4 @@
-import { useContext, type ReactNode } from 'react';
+import { type ReactNode, useContext } from 'react';
 
 import { SlotContext } from '../routing/slot-context.js';
 

package/src/client/dev/devtools.tsx

@@ -7,7 +7,7 @@
  * It stays decoupled from the Router (it computes the current match itself via `matchRoute`) so it
  * renders even when the app tree has crashed.
  */
-import { useEffect, useState, useSyncExternalStore, type ReactNode } from 'react';
+import { type ReactNode, useEffect, useState, useSyncExternalStore } from 'react';
 
 import { type DevError, getErrorLog, subscribeErrors } from './error-overlay.js';
 import {
@@ -21,10 +21,10 @@ import {
 import {
     clearLoaderData,
     inspectLoaderCache,
+    type LoaderCacheSnapshot,
     loaderKey,
     revalidate,
     subscribeLoaderCache,
-    type LoaderCacheSnapshot,
 } from '../routing/loader.js';
 import { matchRoute } from '../routing/match.js';
 import { getPages } from '../search/search.js';
@@ -52,10 +52,22 @@ function ToilLogo({ size = 16 }: { size?: number }): ReactNode {
                     x2="467.12"
                     y2="467.12"
                     gradientUnits="userSpaceOnUse">
-                    <stop offset="0" stopColor="#6990ff" />
-                    <stop offset=".28" stopColor="#521be0" />
-                    <stop offset=".66" stopColor="#6900f4" />
-                    <stop offset="1" stopColor="#7f00f6" />
+                    <stop
+                        offset="0"
+                        stopColor="#6990ff"
+                    />
+                    <stop
+                        offset=".28"
+                        stopColor="#521be0"
+                    />
+                    <stop
+                        offset=".66"
+                        stopColor="#6900f4"
+                    />
+                    <stop
+                        offset="1"
+                        stopColor="#7f00f6"
+                    />
                 </linearGradient>
                 <linearGradient
                     id="toilDtB"
@@ -64,12 +76,28 @@ function ToilLogo({ size = 16 }: { size?: number }): ReactNode {
                     x2="149.99"
                     y2="0"
                     gradientUnits="userSpaceOnUse">
-                    <stop offset=".15" stopColor="#6990ff" stopOpacity=".6" />
-                    <stop offset=".55" stopColor="#531ae1" />
+                    <stop
+                        offset=".15"
+                        stopColor="#6990ff"
+                        stopOpacity=".6"
+                    />
+                    <stop
+                        offset=".55"
+                        stopColor="#531ae1"
+                    />
                 </linearGradient>
             </defs>
-            <rect width="500" height="500" rx="130" ry="130" fill="url(#toilDtA)" />
-            <path d="M299.98,0L0,355.49v-225.49C0,58.2,58.2,0,130,0h169.98Z" fill="url(#toilDtB)" />
+            <rect
+                width="500"
+                height="500"
+                rx="130"
+                ry="130"
+                fill="url(#toilDtA)"
+            />
+            <path
+                d="M299.98,0L0,355.49v-225.49C0,58.2,58.2,0,130,0h169.98Z"
+                fill="url(#toilDtB)"
+            />
             <path
                 d="M106.17,111.11h285.24c9.9,0,16.7,9.96,13.09,19.18l-17.98,45.96c-2.11,5.39-7.31,8.94-13.09,8.94h-74.65c-7.76,0-14.06,6.29-14.06,14.06v214.94c0,7.76-6.29,14.06-14.06,14.06h-45.96c-7.76,0-14.06-6.29-14.06-14.06v-217.25c0-7.76-6.29-14.06-14.06-14.06h-73.66c-5.82,0-11.04-3.59-13.12-9.02l-16.76-43.64c-3.54-9.21,3.26-19.1,13.12-19.1Z"
                 fill="#fff"
@@ -194,7 +222,10 @@ function safeJson(value: unknown): string {
 }
 
 /** Reads the current document head's meta + link tags (live). */
-function readHead(): { metas: { name: string; content: string }[]; links: { rel: string; href: string }[] } {
+function readHead(): {
+    metas: { name: string; content: string }[];
+    links: { rel: string; href: string }[];
+} {
     const metas: { name: string; content: string }[] = [];
     const links: { rel: string; href: string }[] = [];
     if (typeof document === 'undefined') return { metas, links };
@@ -346,7 +377,9 @@ function RouteTab({
             <Row k="slots">{activeSlots.length ? activeSlots.join(', ') : 'none'}</Row>
             <Row k="navigating">{pending ? 'yes' : 'no'}</Row>
 
-            <p className="toil-dt-sec" style={{ marginTop: 12 }}>
+            <p
+                className="toil-dt-sec"
+                style={{ marginTop: 12 }}>
                 Routes ({routes.length})
             </p>
             {routes.map((r) => {
@@ -474,7 +507,9 @@ function HeadTab(): ReactNode {
         <div className="toil-dt-body">
             <Row k="title">{title || '(none)'}</Row>
 
-            <p className="toil-dt-sec" style={{ marginTop: 10 }}>
+            <p
+                className="toil-dt-sec"
+                style={{ marginTop: 10 }}>
                 OpenGraph preview
             </p>
             <div className="toil-dt-og">
@@ -491,23 +526,41 @@ function HeadTab(): ReactNode {
                 </div>
             </div>
 
-            <p className="toil-dt-sec" style={{ marginTop: 10 }}>
+            <p
+                className="toil-dt-sec"
+                style={{ marginTop: 10 }}>
                 SEO checklist
             </p>
-            <Check ok={Boolean(title)} label="Has a title" />
-            <Check ok={meta('description') !== undefined} label="Has a meta description" />
-            <Check ok={og.image !== undefined} label="Has an og:image" />
-            <Check ok={links.some((l) => l.rel === 'canonical')} label="Has a canonical link" />
+            <Check
+                ok={Boolean(title)}
+                label="Has a title"
+            />
+            <Check
+                ok={meta('description') !== undefined}
+                label="Has a meta description"
+            />
+            <Check
+                ok={og.image !== undefined}
+                label="Has an og:image"
+            />
+            <Check
+                ok={links.some((l) => l.rel === 'canonical')}
+                label="Has a canonical link"
+            />
             <Check
                 ok={pages.length === 0 || described === pages.length}
                 label={`Pages with a description: ${String(described)}/${String(pages.length)}`}
             />
 
-            <p className="toil-dt-sec" style={{ marginTop: 10 }}>
+            <p
+                className="toil-dt-sec"
+                style={{ marginTop: 10 }}>
                 Meta ({metas.length})
             </p>
             {metas.map((m, i) => (
-                <Row k={m.name} key={`${m.name}:${String(i)}`}>
+                <Row
+                    k={m.name}
+                    key={`${m.name}:${String(i)}`}>
                     {m.content}
                 </Row>
             ))}
@@ -546,7 +599,8 @@ function BuildTab({ info }: { info: DevInfo | null }): ReactNode {
 
 function ErrorsTab(): ReactNode {
     const errors = useErrors();
-    if (errors.length === 0) return <p className="toil-dt-empty toil-dt-body">No errors captured.</p>;
+    if (errors.length === 0)
+        return <p className="toil-dt-empty toil-dt-body">No errors captured.</p>;
     return (
         <div className="toil-dt-body">
             {[...errors].reverse().map((e, i) => (
@@ -974,45 +1028,58 @@ export function DevToolbar({
 
     return (
         <>
-        <div className={`toil-dt ${p.side}`}>
-            <div className="toil-dt-panel">
-                <div className="toil-dt-head">
-                    <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-                        <ToilLogo size={14} />
-                        <span className="toil-dt-logo">toiljs</span> devtools
-                        <span className={`toil-dt-dot ${dotClass}`} />
-                    </span>
-                    <button
-                        className="toil-dt-x"
-                        onClick={() => {
-                            setPrefs({ open: false });
-                        }}>
-                        ✕
-                    </button>
-                </div>
-                <div className="toil-dt-tabs">
-                    {TABS.map((t) => (
+            <div className={`toil-dt ${p.side}`}>
+                <div className="toil-dt-panel">
+                    <div className="toil-dt-head">
+                        <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+                            <ToilLogo size={14} />
+                            <span className="toil-dt-logo">toiljs</span> devtools
+                            <span className={`toil-dt-dot ${dotClass}`} />
+                        </span>
                         <button
-                            key={t.id}
-                            className={`toil-dt-tab ${p.tab === t.id ? 'active' : ''}`}
+                            className="toil-dt-x"
                             onClick={() => {
-                                setPrefs({ tab: t.id });
+                                setPrefs({ open: false });
                             }}>
-                            {t.label}
-                            {t.id === 'errors' && errors.length > 0 ? ` (${String(errors.length)})` : ''}
+                            ✕
                         </button>
-                    ))}
+                    </div>
+                    <div className="toil-dt-tabs">
+                        {TABS.map((t) => (
+                            <button
+                                key={t.id}
+                                className={`toil-dt-tab ${p.tab === t.id ? 'active' : ''}`}
+                                onClick={() => {
+                                    setPrefs({ tab: t.id });
+                                }}>
+                                {t.label}
+                                {t.id === 'errors' && errors.length > 0
+                                    ? ` (${String(errors.length)})`
+                                    : ''}
+                            </button>
+                        ))}
+                    </div>
+                    {p.tab === 'route' && (
+                        <RouteTab
+                            routes={routes}
+                            slots={slots}
+                            info={info}
+                        />
+                    )}
+                    {p.tab === 'data' && <DataTab />}
+                    {p.tab === 'head' && <HeadTab />}
+                    {p.tab === 'build' && <BuildTab info={info} />}
+                    {p.tab === 'errors' && <ErrorsTab />}
+                    {p.tab === 'ai' && (
+                        <AiTab
+                            info={info}
+                            routes={routes}
+                        />
+                    )}
+                    {p.tab === 'prefs' && <PrefsTab />}
                 </div>
-                {p.tab === 'route' && <RouteTab routes={routes} slots={slots} info={info} />}
-                {p.tab === 'data' && <DataTab />}
-                {p.tab === 'head' && <HeadTab />}
-                {p.tab === 'build' && <BuildTab info={info} />}
-                {p.tab === 'errors' && <ErrorsTab />}
-                {p.tab === 'ai' && <AiTab info={info} routes={routes} />}
-                {p.tab === 'prefs' && <PrefsTab />}
             </div>
-        </div>
-        {pal}
+            {pal}
         </>
     );
 }

package/src/client/dev/error-overlay.tsx

@@ -4,7 +4,13 @@
  * plus `window` `error` / `unhandledrejection` events. Shows the message, stack, and (for render
  * errors) the React component stack, with Dismiss / Reload. Inert in production builds.
  */
-import { Component, type CSSProperties, type ErrorInfo, type ReactNode, useSyncExternalStore, } from 'react';
+import {
+    Component,
+    type CSSProperties,
+    type ErrorInfo,
+    type ReactNode,
+    useSyncExternalStore,
+} from 'react';
 
 /** A captured dev error. */
 export interface DevError {

package/src/client/head/metadata.ts

@@ -4,7 +4,7 @@
  * data); the compiler-driven loader resolves it to a {@link HeadSpec} that the router applies as the
  * route's baseline head (component-level `useHead`/`<Head>` still compose on top and can override).
  */
-import { useHead, type HeadSpec, type LinkTag, type MetaTag } from './head.js';
+import { type HeadSpec, type LinkTag, type MetaTag, useHead } from './head.js';
 import type { RouteParams } from '../routing/match.js';
 
 /** OpenGraph fields, expanded to `og:*` meta tags. */

package/src/client/index.ts

@@ -10,7 +10,13 @@
 
 export { mount } from './routing/mount.js';
 export { Router } from './routing/Router.js';
-export { Auth, register as authRegister, login as authLogin, buildLoginMessage, LOGIN_CONTEXT } from './auth.js';
+export {
+    Auth,
+    register as authRegister,
+    login as authLogin,
+    buildLoginMessage,
+    LOGIN_CONTEXT,
+} from './auth.js';
 export type { KdfParams, AuthOptions } from './auth.js';
 export { Link } from './navigation/Link.js';
 export type { LinkProps } from './navigation/Link.js';
@@ -36,7 +42,12 @@ export {
     useNavigationPending,
 } from './routing/hooks.js';
 export type { RouterInstance } from './routing/hooks.js';
-export { useLoaderData, revalidate, invalidateLoaderData, LoaderDataContext } from './routing/loader.js';
+export {
+    useLoaderData,
+    revalidate,
+    invalidateLoaderData,
+    LoaderDataContext,
+} from './routing/loader.js';
 export type {
     LoaderArgs,
     LoaderFunction,

package/src/client/routing/Router.tsx

@@ -1,4 +1,4 @@
-import { createElement, Suspense, useLayoutEffect, type ReactNode } from 'react';
+import { createElement, type ReactNode, Suspense, useLayoutEffect } from 'react';
 
 import { ErrorBoundary } from './error-boundary.js';
 import { useLocation } from './hooks.js';
@@ -9,7 +9,7 @@ import {
     resolveLayout,
     resolveNotFound,
 } from './lazy.js';
-import { loaderKey, LoaderDataContext, readRouteData } from './loader.js';
+import { LoaderDataContext, loaderKey, readRouteData } from './loader.js';
 import { matchRoute, type RouteParams } from './match.js';
 import { useRouteHead } from '../head/head.js';
 import { ParamsContext } from './params-context.js';

package/src/client/routing/error-boundary.tsx

@@ -1,4 +1,4 @@
-import { Component, Suspense, type ComponentType, type ReactNode } from 'react';
+import { Component, type ComponentType, type ReactNode, Suspense } from 'react';
 
 import type { RouteErrorProps } from '../types.js';
 

package/src/client/routing/loader.ts

@@ -10,10 +10,10 @@
  * a number keeps data fresh for that many seconds; `false` caches until manual invalidation.
  * `revalidate()` / `router.refresh()` bust the cache to force a refetch.
  */
-import { createContext, useContext, type ComponentType } from 'react';
+import { type ComponentType, createContext, useContext } from 'react';
 
 import type { HeadSpec } from '../head/head.js';
-import { resolveMetadata, type GenerateMetadata, type Metadata } from '../head/metadata.js';
+import { type GenerateMetadata, type Metadata, resolveMetadata } from '../head/metadata.js';
 import { navigationEpoch, refresh as rerender } from '../navigation/navigation.js';
 import type { RouteDef } from '../types.js';
 import type { RouteParams } from './match.js';

package/src/client/routing/mount.tsx

@@ -1,11 +1,7 @@
 import { createRoot, hydrateRoot } from 'react-dom/client';
 
 import { DevToolbar } from '../dev/devtools.js';
-import {
-    DevErrorBoundary,
-    DevErrorOverlay,
-    initDevErrorOverlay,
-} from '../dev/error-overlay.js';
+import { DevErrorBoundary, DevErrorOverlay, initDevErrorOverlay } from '../dev/error-overlay.js';
 import { initNavigation } from '../navigation/navigation.js';
 import { startPrefetcher } from '../navigation/prefetch.js';
 import { hydrateLoaderData } from './loader.js';
@@ -73,7 +69,10 @@ export function mount(
             <>
                 <DevErrorBoundary>{app}</DevErrorBoundary>
                 <DevErrorOverlay />
-                <DevToolbar routes={routes} slots={slots} />
+                <DevToolbar
+                    routes={routes}
+                    slots={slots}
+                />
             </>,
         );
     } else if (isSsrDocument()) {

package/src/compiler/docs.ts

@@ -346,7 +346,7 @@ export const TOIL_DOCS: Record<string, string> = {
         '  an `<Island>`. A route that cannot render this way is skipped at build (with a warning) and',
         '  simply falls back to normal client rendering.',
         '- Hole values are HTML-escaped exactly as React escapes them, so hydration is byte-for-byte',
-        '  clean. Keep a repeat row\'s structure the same across items (only the leaf hole values vary).',
+        "  clean. Keep a repeat row's structure the same across items (only the leaf hole values vary).",
         '- Build output for an SSR route lands in `build/client/_ssr/` (the template + its manifest)',
         '  alongside the generated `Slot` module; routes without `ssr = true` are unaffected.',
     ]),

package/src/compiler/email-preview.ts

@@ -13,7 +13,7 @@ import path from 'node:path';
 import type { ViteDevServer } from 'vite';
 
 import type { ResolvedToilConfig } from './config.js';
-import { renderEmailFile, toPascal, type RenderedEmail } from './emails.js';
+import { type RenderedEmail, renderEmailFile, toPascal } from './emails.js';
 
 /** One discoverable email: its generated `Emails.<name>` and its absolute file. */
 export interface EmailListItem {

package/src/compiler/generate.ts

@@ -4,7 +4,7 @@ import path from 'node:path';
 import { type ResolvedToilConfig } from './config.js';
 import { writeDocs } from './docs.js';
 import { buildPageIndex, pagesModuleSource } from './pages.js';
-import { scanRoutes, type ScannedRoute } from './routes.js';
+import { type ScannedRoute, scanRoutes } from './routes.js';
 import { llmsTxt, robotsTxt, sitemapXml } from './seo.js';
 
 /**

package/src/compiler/seo.ts

@@ -407,9 +407,7 @@ export function llmsTxt(
             const title = escapeMarkdownInline(page.title);
             const url = escapeMarkdownUrl(page.url);
             const desc =
-                page.description !== undefined
-                    ? `: ${escapeMarkdownInline(page.description)}`
-                    : '';
+                page.description !== undefined ? `: ${escapeMarkdownInline(page.description)}` : '';
             out.push(`- [${title}](${url})${desc}`);
         }
     }