@terpjs/contract 0.8.0 → 0.10.0

package/openapi.json

@@ -104,6 +104,14 @@
             "title": "Id",
             "type": "string"
           },
+          "permissions": {
+            "default": [],
+            "items": {
+              "type": "string"
+            },
+            "title": "Permissions",
+            "type": "array"
+          },
           "role_name": {
             "title": "Role Name",
             "type": "string"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@terpjs/contract",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "type": "module",
   "description": "Terp frontend contract \u2014 the OpenAPI-generated TypeScript client, design tokens, and the stack-agnostic module/route/nav + auth types.",
   "exports": {

package/scripts/build-tokens.mjs

@@ -31,6 +31,23 @@ const buildDir = mkdtempSync(join(tmpdir(), "terp-tokens-"));
 
 const read = (name) => JSON.parse(readFileSync(join(packageRoot, name), "utf8"));
 
+/**
+ * WCAG 2.1 AA for normal-size text — the floor every theme is held to unless `themes.json`
+ * raises it. Declared here because the manifest publishes an effective floor per theme and
+ * the contrast gate reads it back; the constant has one home, on the writing side.
+ */
+const AA_NORMAL_TEXT = 4.5;
+
+/**
+ * WCAG 2.1 SC 1.4.11, non-text contrast: the bar for a control's visual boundary and for a
+ * state or focus indicator. Published once at the top level rather than per theme, and that is
+ * the claim: it is FLAT across every theme, including the one that raises its text floor to
+ * AAA, because WCAG defines no AAA tier for non-text contrast. A consumer holding the
+ * `nonTextPairs` section to a theme's raised text floor would be enforcing a standard nobody
+ * wrote; one holding it to nothing would read the section as decorative.
+ */
+const UI_COMPONENT = 3;
+
 const registry = read("themes.json");
 const themes = registry.themes;
 const base = themes.find((theme) => theme.name === registry.base);
@@ -94,6 +111,34 @@ for (const theme of themes) {
 }
 rmSync(buildDir, { recursive: true, force: true });
 
+/**
+ * The appearance switch: the one theme fact CSS can consume but cannot select on.
+ *
+ * `color-scheme` already records whether a theme reads light or dark, and it is the right
+ * answer for native chrome — but there is no selector for it, so nothing in a stylesheet can
+ * branch on it. Anything that must render one way under a light theme and another under a dark
+ * one therefore needs the same fact in custom-property form. Its first consumer is `AppShell`'s
+ * brand mark: the bundled icons all stroke in `currentColor`, but a company logo usually cannot,
+ * and a dark-ink one is invisible on three of the five shipped themes.
+ *
+ * Derived rather than declared per theme, and that is the whole reason it lives here. A
+ * stylesheet enumerating which themes are dark is a list that rots the first time one is added,
+ * silently — the wrong mark, on the new theme only. `appearance` is required by `themes.json`,
+ * validated above, and named in the registry's own comment as one of the four things a theme
+ * file cannot imply. So a sixth theme cannot forget to answer.
+ *
+ * Values are `block` / `none` rather than any particular layout keyword: a consumer centres
+ * from the BOX around the thing it is showing, so a theme never has to know what layout that
+ * consumer uses.
+ *
+ * Deliberately NOT in the token manifest, and the two gates that had to be widened for it say
+ * why in their own files: it is a mechanism, not a design knob, and a theme editor offering
+ * `block` / `none` as an editable pair offers a way to break the switch.
+ */
+const appearanceSwitch = (appearance) =>
+  `  --appearance-show-light: ${appearance === "light" ? "block" : "none"};
+  --appearance-show-dark: ${appearance === "dark" ? "block" : "none"};`;
+
 const themeBlocks = overlays
   .map(
     (theme) => `
@@ -101,6 +146,7 @@ const themeBlocks = overlays
    ${theme.description} */
 [data-theme='${theme.name}'] {
   color-scheme: ${theme.appearance};
+${appearanceSwitch(theme.appearance)}
 ${compiled.get(theme.name)}
 }
 `,
@@ -118,6 +164,9 @@ const output = `/**
      text-field carets) into the ${base.appearance} palette so it never renders as foreign
      OS-${base.appearance === "light" ? "dark" : "light"} chrome. Each theme block below sets its own. */
   color-scheme: ${base.appearance};
+  /* The appearance as something a stylesheet can branch on — see appearanceSwitch above.
+     color-scheme records the same fact and no selector can read it. */
+${appearanceSwitch(base.appearance)}
 ${compiled.get(base.name)}
 }
 ${themeBlocks}
@@ -125,6 +174,7 @@ ${themeBlocks}
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
     color-scheme: ${systemDark.appearance};
+${appearanceSwitch(systemDark.appearance).replace(/^ {2}/gm, "    ")}
 ${compiled.get(systemDark.name).replace(/^ {2}/gm, "    ")}
   }
 }
@@ -183,11 +233,18 @@ const manifest = {
   // alone rather than hard-coding the list it happens to know about.
   base: registry.base,
   systemDark: registry.systemDark,
-  themes: themes.map(({ name, label, appearance, description }) => ({
+  themes: themes.map(({ name, label, appearance, description, minimumContrast }) => ({
     name,
     label,
     appearance,
     description,
+    // The ratio this theme's declared text pairings must reach, published as a NUMBER on every
+    // theme rather than only on the one that raises it. A consumer that saw the field only on
+    // `contrast` would have to know WCAG's AA constant to interpret its absence, and would then
+    // be free to interpret it differently from the gate — which is the one thing this file
+    // exists to prevent. `tokens.contrast.test.js` reads this value instead of re-deriving it,
+    // so the published floor IS the enforced floor.
+    minimumContrast: minimumContrast ?? AA_NORMAL_TEXT,
   })),
   tokens: [...baseTokens.entries()].map(([name, token]) => ({
     name,
@@ -204,6 +261,9 @@ const manifest = {
     ),
     themeable: overlays.some((theme) => sources.get(theme.name).has(name)),
   })),
+  // The floor for the `nonTextPairs` section below — flat across themes, unlike the per-theme
+  // text floor above. Named at the top level so the two sections cannot be read as sharing a bar.
+  nonTextMinimumContrast: UI_COMPONENT,
   textPairs: pairs.textPairs,
   // Both sections, because a consumer that can only see the text pairings would read the
   // absence of a boundary pairing as "no requirement" rather than "held elsewhere".

package/src/appearance-mechanism.js

@@ -0,0 +1,19 @@
+/**
+ * Per-theme custom properties that are NOT design tokens, as an exact list.
+ *
+ * Two gates are stated over "non-colour" tokens and mean it: geometry is theme-invariant
+ * (`tokens.themes.test.js`), and the manifest names every token the base root declares
+ * (`tokens.manifest.test.js`). This pair is neither — it is the theme's own `appearance` in
+ * the one form a stylesheet can branch on, because `color-scheme` records the same fact and no
+ * selector can read it. The values are `block` / `none`, so it varies per theme by
+ * construction and belongs in no theme editor.
+ *
+ * Hand-written rather than imported from the generator that emits it, and that is the point:
+ * a third such property appearing in `tokens.css` fails both gates until someone adds it here
+ * with a reason. Importing the generator's own list would make every future addition
+ * self-approving.
+ */
+export const APPEARANCE_MECHANISM_TOKENS = [
+  "--appearance-show-light",
+  "--appearance-show-dark",
+];

package/src/icons.ts

@@ -0,0 +1,98 @@
+/**
+ * The bundled icon names, as data the contract publishes.
+ *
+ * Contract cannot import react-core — the dependency runs the other way — so the glyphs
+ * themselves stay in react-core and only their NAMES live here. That split is what lets
+ * `NavItem.icon` be a checked name on a manifest that knows nothing about React: an app naming
+ * an icon this set does not contain gets a typecheck error where it used to get a silent letter
+ * tile, and a future non-React adapter reads the same list.
+ *
+ * `as const` is load-bearing rather than stylistic. Without it the array widens to `string[]`,
+ * {@link IconName} becomes `string`, and every check built on it still compiles while asserting
+ * nothing at all — the whole change would ship and do nothing. That is what the
+ * `@ts-expect-error` guard beside the glyph table in react-core exists to catch: remove the
+ * `as const` here and the directive there becomes unused, which is itself an error.
+ *
+ * Kept in the glyph table's declaration order rather than sorted, so the two read as one list.
+ * react-core holds the table to this set exhaustively in both directions with `satisfies`, so a
+ * glyph added without a name here, or a name added without a glyph, is a compile error at the
+ * table rather than a runtime blank.
+ */
+export const ICON_NAMES = [
+  "home",
+  "list",
+  "folder",
+  "users",
+  "shield",
+  "settings",
+  "sun",
+  "moon",
+  "monitor",
+  "moon-stars",
+  "sunset",
+  "contrast",
+  "document",
+  "chart",
+  "calendar",
+  "inbox",
+  "audit",
+  "hub",
+  "plus",
+  "edit",
+  "trash",
+  "search",
+  "check",
+  "x",
+  "chevron-down",
+  "chevron-right",
+  "chevron-left",
+  "arrow-left",
+  "external",
+  "logout",
+  "user",
+  "bell",
+  "key",
+  "globe",
+  "lock",
+  "tag",
+  "mail",
+  "refresh",
+  "filter",
+  "download",
+  "upload",
+  "star",
+  "heart",
+  "database",
+  "code",
+  "truck",
+  "cart",
+  "wallet",
+  "map-pin",
+  "clock",
+  "link",
+  "grid",
+  "book",
+  "briefcase",
+  "building",
+  "clipboard",
+  "layers",
+  "send",
+  "phone",
+  "image",
+  "video",
+  "music",
+  "wrench",
+  "zap",
+  "eye",
+  "eye-off",
+] as const;
+
+/**
+ * A name {@link ICON_NAMES} contains — the type `NavItem.icon` and `Icon` accept.
+ *
+ * Deliberately NOT the type of `NavIcon.name`, which stays `string`. `NavIcon` falls back to the
+ * label's initial in a tile, so an unknown name there is a designed, visible behaviour with a
+ * specimen of its own; `Icon` renders nothing at all, which is silence, and silence is the thing
+ * this type exists to make impossible.
+ */
+export type IconName = (typeof ICON_NAMES)[number];

package/src/index.ts

@@ -5,5 +5,7 @@ export type { components, operations, paths } from "./schema";
 
 // Stack-agnostic UI contract: the module/route/nav manifest and the auth/session shape.
 export { defineModuleManifest } from "./manifest";
-export type { ModuleManifest, ModuleRoute, NavItem, RoleName } from "./manifest";
+export { ICON_NAMES } from "./icons";
+export type { IconName } from "./icons";
+export type { ModuleManifest, ModuleRoute, NavGroup, NavItem, RoleName } from "./manifest";
 export type { AccessToken, Action, AuthSession, Credentials, CurrentUser } from "./auth";

package/src/manifest.ts

@@ -10,6 +10,8 @@
  */
 
 /** A role name as understood by the app's backend (e.g. "viewer" | "editor" | "admin"). */
+import type { IconName } from "./icons";
+
 export type RoleName = string;
 
 export interface ModuleRoute {
@@ -26,6 +28,39 @@ export interface ModuleRoute {
   view: string;
   /** Minimum role required to see the route; omitted = any authenticated user. */
   role?: RoleName;
+  /**
+   * Also require this named permission grant — the caller must hold it in
+   * `CurrentUser.permissions`.
+   *
+   * **ANDed with `role`**, and that is deliberately what the server does: a `Policy` carrying a
+   * `Permission` enforces the permission's role floor *and* the grant, so a client checking
+   * only one would disagree with the endpoint in one direction or the other. The same reasoning
+   * the `Authorized` component's `permission` prop already records.
+   *
+   * Deliberately not a combinator. The server's own declaration is one ref per read and one per
+   * write (`AuthzRef = Role | Permission | Roles`), so an any-of here could express a gate no
+   * `Policy` can declare — and a client gate that cannot correspond to a server gate can only
+   * drift from the endpoint it mirrors.
+   *
+   * A *display* and *routing* gate only; the server re-checks every request. Fails closed:
+   * unknown or misspelled names are simply absent from the grant list, and an app that mounts
+   * no grant capability has an empty list, which correctly hides everything that names one.
+   */
+  permission?: string;
+  /**
+   * Query-string keys this route reads, e.g. `["status", "page"]`.
+   *
+   * Declared for the same reason params are: the router is realised at runtime, so
+   * nothing checks a search key either — and a list screen's filters live in the query
+   * string, which is why *most* screens were the ones bypassing the typed navigation
+   * seam entirely. `terp routes` emits these into the generated table, so navigating
+   * with an undeclared key (or reading one) is a typecheck error.
+   *
+   * Values are `string | undefined` and nothing more: a query parameter is text, and
+   * every key is absent until someone sets it. Parsing `page` into a number is the
+   * screen's business — declaring the key is what stops it being a typo.
+   */
+  search?: string[];
 }
 
 export interface NavItem {
@@ -33,10 +68,101 @@ export interface NavItem {
   label: string;
   /** Destination path; should match a {@link ModuleRoute.path}. */
   to: string;
-  /** Icon identifier the stack maps to its own icon set. */
-  icon?: string;
+  /**
+   * Which bundled glyph the item shows, by name.
+   *
+   * A **checked** name ({@link IconName}), which is the one deliberately breaking part of the
+   * navigation model: a misspelled icon used to render the label's first letter in a tile, which
+   * looks like a considered fallback rather than like a typo, so it survived review and shipped.
+   * It is now a typecheck error at the manifest. Runtime behaviour is unchanged — the fallback
+   * still exists and still handles the honest case of an item with no icon at all.
+   */
+  icon?: IconName;
   /** Minimum role required to show the nav item. */
   role?: RoleName;
+  /**
+   * Also require this named permission grant — the caller must hold it in
+   * `CurrentUser.permissions`.
+   *
+   * **ANDed with `role`**, and that is deliberately what the server does: a `Policy` carrying a
+   * `Permission` enforces the permission's role floor *and* the grant, so a client checking
+   * only one would disagree with the endpoint in one direction or the other. The same reasoning
+   * the `Authorized` component's `permission` prop already records.
+   *
+   * Deliberately not a combinator. The server's own declaration is one ref per read and one per
+   * write (`AuthzRef = Role | Permission | Roles`), so an any-of here could express a gate no
+   * `Policy` can declare — and a client gate that cannot correspond to a server gate can only
+   * drift from the endpoint it mirrors.
+   *
+   * A *display* and *routing* gate only; the server re-checks every request. Fails closed:
+   * unknown or misspelled names are simply absent from the grant list, and an app that mounts
+   * no grant capability has an empty list, which correctly hides everything that names one.
+   */
+  permission?: string;
+  /**
+   * Match the URL exactly rather than as a segment-aligned prefix.
+   *
+   * The default is the prefix, and that is the useful behaviour: a detail page under a section
+   * keeps the section's tab lit, so `/records/123` leaves "Records" current. Set this where a
+   * destination should own only itself — typically a landing page that also has children in the
+   * nav, where the parent would otherwise stay lit on every child.
+   *
+   * It does not decide WHICH item is current when several match; that is a property of the set,
+   * and the adapter resolves it by longest match. This only says whether this item is a
+   * candidate at all.
+   */
+  exact?: boolean;
+  /**
+   * The {@link NavGroup} this item belongs to, by id.
+   *
+   * An item naming a group the app has not declared falls into the default headerless group
+   * rather than disappearing, and that is the deliberate direction to fail. A group is declared
+   * once by the **app**; the item is declared by a **module** that ships on its own schedule, so
+   * an id with no declaration yet is the normal first-run state of a module the app has not
+   * finished adopting. Silently dropping the link would hide a working screen and report nothing.
+   */
+  group?: string;
+  /**
+   * Sort key against the item's siblings inside its group.
+   *
+   * Absent is 0, so a positive number sorts below every unordered sibling and a negative one
+   * above — CSS `order` semantics, which is the vocabulary this framework already speaks.
+   * The sort is stable, so items that tie keep their declaration order and a manifest that
+   * declares no order anywhere renders exactly as it does today.
+   */
+  order?: number;
+}
+
+/**
+ * A named section of the primary navigation, declared once by the **app**.
+ *
+ * A group spans modules — a "Sales" group holds items contributed by several of them — so no
+ * module can own its label or its position, and it is the one part of the navigation model that
+ * cannot live on a module manifest. Items reference it by {@link NavItem.group}.
+ *
+ * Declaring groups is optional and additive: an app that declares none renders one flat,
+ * unlabelled list, which is what every app renders today.
+ */
+export interface NavGroup {
+  /** Referenced by {@link NavItem.group}. */
+  id: string;
+  /**
+   * Rendered above the group's list.
+   *
+   * `null` renders **no label element at all** — a positioning-only group, which is how an app
+   * places its otherwise-ungrouped items somewhere other than the end without inventing a
+   * heading for them. Required rather than optional so that "no label" is a decision the
+   * declaration states, not an omission.
+   */
+  label: string | null;
+  /**
+   * Sort key against sibling groups.
+   *
+   * Absent is 0 and the sort is stable, so groups that tie keep declaration order. The default
+   * headerless group is **not** part of this sort: it is always emitted last. See
+   * `groupNav` in `@terpjs/react-core` for why.
+   */
+  order?: number;
 }
 
 export interface ModuleManifest {

package/src/routes-codegen.js

@@ -35,9 +35,10 @@ import ts from "typescript";
 const HEADER = [
   "// Generated by `terp routes` from this app's module manifests. Do not edit.",
   "//",
-  "// Maps every route path the manifests declare to that route's params, so",
-  "// useRouteParams / useRouteParam / useTerpNavigate check paths and param names at",
-  "// compile time (ADR 0092). Regenerate after changing a manifest route — `terp verify`",
+  "// Maps every route path the manifests declare to that route's params and its declared",
+  "// query-string keys, so useRouteParams / useRouteParam / useRouteSearch /",
+  "// useTerpNavigate check paths, param names and search keys at compile time",
+  "// (ADR 0092, ADR 0096). Regenerate after changing a manifest route — `terp verify`",
   "// fails on a stale copy. Routes mounted by a packaged area (the admin area) are not",
   "// keyed here: this file is a pure function of this app's own manifests.",
   "",
@@ -57,15 +58,29 @@ export function canonicalPath(routePath) {
   return routePath.replace(/(^|\/)\$([A-Za-z_][A-Za-z0-9_]*)/g, "$1:$2");
 }
 
+/** Find a property assignment by name on an object literal, or undefined. */
+function propertyNamed(element, name) {
+  return element.properties.find(
+    (property) =>
+      ts.isPropertyAssignment(property) &&
+      (ts.isIdentifier(property.name) || ts.isStringLiteral(property.name)) &&
+      property.name.text === name,
+  );
+}
+
 /**
- * Every route path a source file's `defineModuleManifest(...)` calls declare.
+ * Every route a source file's `defineModuleManifest(...)` calls declare.
  *
- * Returns `{ paths, problems }`. A shape that cannot be read statically lands in
- * `problems` (with file:line) rather than being skipped — the caller refuses on any.
+ * Returns `{ routes, problems }`, where a route is `{ path, search }`. A shape that
+ * cannot be read statically lands in `problems` (with file:line) rather than being
+ * skipped — the caller refuses on any. `search` is held to the same standard as `path`:
+ * a computed key list is refused rather than silently dropped, because a missing search
+ * key turns a real navigation into a type error, which is the failure mode that teaches
+ * authors to distrust the check.
  */
-export function extractRoutePaths(sourceText, label) {
+export function extractRoutes(sourceText, label) {
   const source = ts.createSourceFile(label, sourceText, ts.ScriptTarget.Latest, true, ts.ScriptKind.TSX);
-  const paths = [];
+  const routes = [];
   const problems = [];
   let manifests = 0;
 
@@ -90,12 +105,7 @@ export function extractRoutePaths(sourceText, label) {
         );
         continue;
       }
-      const pathProperty = element.properties.find(
-        (property) =>
-          ts.isPropertyAssignment(property) &&
-          (ts.isIdentifier(property.name) || ts.isStringLiteral(property.name)) &&
-          property.name.text === "path",
-      );
+      const pathProperty = propertyNamed(element, "path");
       if (pathProperty === undefined) {
         problems.push(`${at(element)}: a route declares no \`path\`.`);
         continue;
@@ -108,8 +118,48 @@ export function extractRoutePaths(sourceText, label) {
         );
         continue;
       }
-      paths.push(value.text);
+      const search = readSearchKeys(element);
+      if (search === null) {
+        continue;
+      }
+      routes.push({ path: value.text, search });
+    }
+  };
+
+  /** A route's declared query-string keys, `[]` when it declares none, `null` on refusal. */
+  const readSearchKeys = (element) => {
+    const searchProperty = propertyNamed(element, "search");
+    if (searchProperty === undefined) {
+      return [];
+    }
+    const value = searchProperty.initializer;
+    if (!ts.isArrayLiteralExpression(value)) {
+      problems.push(
+        `${at(value)}: a route \`search\` is not an array literal, so its keys cannot be read ` +
+          'statically. Write them inline (e.g. search: ["status", "page"]).',
+      );
+      return null;
+    }
+    const keys = [];
+    for (const key of value.elements) {
+      if (!ts.isStringLiteral(key)) {
+        problems.push(
+          `${at(key)}: a route \`search\` key is not a plain string literal, so it cannot be ` +
+            'read statically. Write each key inline (e.g. search: ["status", "page"]).',
+        );
+        return null;
+      }
+      if (!/^[A-Za-z_][A-Za-z0-9_]*$/.test(key.text)) {
+        problems.push(
+          `${at(key)}: search key ${JSON.stringify(key.text)} is not a plain identifier, so it ` +
+            "cannot be emitted as a typed property. Rename it to letters, digits and " +
+            "underscores.",
+        );
+        return null;
+      }
+      keys.push(key.text);
     }
+    return keys;
   };
 
   const visit = (node) => {
@@ -127,16 +177,11 @@ export function extractRoutePaths(sourceText, label) {
             "cannot be read statically.",
         );
       } else {
-        const routes = argument.properties.find(
-          (property) =>
-            ts.isPropertyAssignment(property) &&
-            (ts.isIdentifier(property.name) || ts.isStringLiteral(property.name)) &&
-            property.name.text === "routes",
-        );
-        if (routes === undefined) {
+        const declared = propertyNamed(argument, "routes");
+        if (declared === undefined) {
           problems.push(`${at(argument)}: the manifest declares no \`routes\`.`);
         } else {
-          readRoutesArray(routes.initializer);
+          readRoutesArray(declared.initializer);
         }
       }
     }
@@ -150,7 +195,7 @@ export function extractRoutePaths(sourceText, label) {
         "a module whose manifest is built elsewhere cannot be extracted.",
     );
   }
-  return { paths, problems };
+  return { routes, problems };
 }
 
 /** The module files to scan: `<modulesDir>/<name>/module.tsx` (or `.ts`), sorted. */
@@ -174,9 +219,18 @@ export function moduleFiles(modulesDir) {
   return found;
 }
 
-/** Render the declaration file for *paths* — deterministic: deduped, sorted, LF. */
-export function renderRouteTable(paths) {
-  const unique = [...new Set(paths.map(canonicalPath))].sort();
+/** Render the declaration file for *routes* — deterministic: deduped, sorted, LF. */
+export function renderRouteTable(routes) {
+  // Two manifests may mount the same path; their declared search keys are unioned, which
+  // is the honest reading of "this route reads these keys".
+  const searchByPath = new Map();
+  for (const route of routes) {
+    const key = canonicalPath(route.path);
+    const merged = searchByPath.get(key) ?? [];
+    searchByPath.set(key, [...merged, ...(route.search ?? [])]);
+  }
+  const unique = [...searchByPath.keys()].sort();
+
   const lines = [...HEADER];
   for (const routePath of unique) {
     const params = paramNamesOf(routePath);
@@ -186,7 +240,21 @@ export function renderRouteTable(paths) {
         : `{ ${params.map((name) => `${name}: string`).join("; ")} }`;
     lines.push(`    ${JSON.stringify(routePath)}: ${shape};`);
   }
-  lines.push("  }", "}", "");
+  lines.push("  }");
+
+  // Only emitted when some route declares keys: an app that declares none gets exactly
+  // the file it had before, and no empty interface for its own linter to complain about.
+  const withSearch = unique.filter((routePath) => searchByPath.get(routePath).length > 0);
+  if (withSearch.length > 0) {
+    lines.push("  interface TerpRouteSearchTable {");
+    for (const routePath of withSearch) {
+      const keys = [...new Set(searchByPath.get(routePath))].sort();
+      const shape = keys.map((name) => `${name}?: string`).join("; ");
+      lines.push(`    ${JSON.stringify(routePath)}: { ${shape} };`);
+    }
+    lines.push("  }");
+  }
+  lines.push("}", "");
   return lines.join("\n");
 }
 
@@ -202,11 +270,11 @@ export function generateRouteTable(modulesDir) {
         "src/modules/<name>/module.tsx; pass --modules-dir if this app keeps them elsewhere.",
     );
   }
-  const paths = [];
+  const routes = [];
   const problems = [];
   for (const file of files) {
-    const result = extractRoutePaths(fs.readFileSync(file, "utf8"), path.relative(process.cwd(), file).split(path.sep).join("/"));
-    paths.push(...result.paths);
+    const result = extractRoutes(fs.readFileSync(file, "utf8"), path.relative(process.cwd(), file).split(path.sep).join("/"));
+    routes.push(...result.routes);
     problems.push(...result.problems);
   }
   if (problems.length > 0) {
@@ -216,7 +284,7 @@ export function generateRouteTable(modulesDir) {
         problems.map((problem) => `  - ${problem}`).join("\n"),
     );
   }
-  return renderRouteTable(paths);
+  return renderRouteTable(routes);
 }
 
 /** Parse `--flag value` / `--flag` argv into a plain object. */