@pithy-sh/ui-react 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Pithy
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@pithy-sh/ui-react",
+  "version": "0.1.0",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pithy-sh/pithy.git",
+    "directory": "packages/ui-react"
+  },
+  "files": [
+    "src",
+    "templates",
+    "!src/**/*.test.*"
+  ],
+  "type": "module",
+  "engines": {
+    "node": ">=22"
+  },
+  "exports": {
+    "./src/*": "./src/*.ts"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json --noEmit false --outDir dist",
+    "typecheck": "tsc -p tsconfig.json && tsc -p tsconfig.templates.json",
+    "test": "vitest run",
+    "test:node": "vitest run --project=node --project=dom",
+    "clean": "rm -rf dist .turbo",
+    "reset": "bun run clean && rm -rf node_modules"
+  },
+  "devDependencies": {
+    "@pithy-sh/auth": "workspace:*",
+    "@pithy-sh/core": "workspace:*",
+    "@pithy-sh/i18n": "workspace:*",
+    "@pithy-sh/payments": "workspace:*",
+    "@pithy-sh/tsconfig": "workspace:*",
+    "@types/node": "^22.15.0",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@vitest/coverage-v8": "^4.1.0",
+    "happy-dom": "^20.11.1",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "typescript": "^7.0.2",
+    "vite": "^8.0.16",
+    "vitest": "^4.1.0"
+  }
+}

package/src/templates.ts

@@ -0,0 +1,147 @@
+// SPDX-FileCopyrightText: 2026 Pithy
+// SPDX-License-Identifier: MIT
+
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+/**
+ * The React 19 front-end templates `pithy ui add react` copies into a Worker.
+ *
+ * This is a template library, not a runtime library: it ships text, has no dependencies of its own,
+ * and nothing imports it at runtime except the CLI's scaffolder. It is a real package rather than a
+ * folder inside `@pithy-sh/cli` for one reason that only gets truer with time — **a framework's
+ * templates need that framework's toolchain to be checked.** React needs `react`, `@types/react` and
+ * a `jsx: react-jsx` program; Svelte would need an entirely different set. Folding them into the CLI
+ * makes the CLI accumulate every framework's devDependencies and every framework's tsconfig, to
+ * typecheck files it only ever copies.
+ *
+ * The tree mirrors the scaffolded layout exactly. That is what lets a screen's `../../router` import
+ * resolve in the template as well as in the Worker it lands in, so the whole library typechecks in
+ * place instead of only after it has been written somewhere.
+ *
+ * **Grouping is the manifest's job, not the directory's.** The tree is one layout; which files a
+ * given invocation writes is chosen by {@link TEMPLATE_GROUPS}. That is why the auth screens sit in
+ * their final `src/routes/pithy/` home rather than an `auth/` subtree, and it is how a later screen
+ * set — payments, say — joins: add its files to the tree, name them in a new group, and no path,
+ * import, or contract moves.
+ */
+
+/** Absolute path to the template tree. Resolved from this module, so it holds in a workspace and once published. */
+export const TEMPLATE_DIR: string = join(dirname(fileURLToPath(import.meta.url)), "..", "templates");
+
+/**
+ * The named file groups this library offers, each keyed by path within {@link TEMPLATE_DIR}.
+ *
+ * `base` is every template, always. Every other group is a screen set that rides on a capability
+ * being composed — `auth` and `payments` today, and whatever follows is an additive entry here with
+ * nothing about the CLI's stub contract having to change to admit it.
+ *
+ * **`src/pithy-config.tsx` is base, not auth.** It is the one module that imports the
+ * `virtual:pithy/*` modules and narrows each on `enabled`, for *every* capability — `docs/UI.md` says
+ * so in as many words, and a payments-only scaffold would otherwise never get the file its screens
+ * read. It compiles with nothing composed: each projection is then `{ enabled: false }` and the
+ * narrowing falls to the defaults it declares.
+ *
+ * ## Adding a file here is agreeing to one rule
+ *
+ * > **Every seeded file whose invariant an adopter can break silently ships with the gate that
+ * > notices.**
+ *
+ * `docs/CONVENTIONS.md` § *Seeded files* is the whole statement, with the three properties a seeded
+ * gate must meet and the two questions to answer before writing one. `seededGates.test.ts` beside this
+ * file is what makes the question due: a path added below is red until the ledger there says which gate
+ * holds it, or why none does. The reason is the deliverable either way — a decline with an argument is
+ * an answer, and this list growing quietly is not.
+ */
+export const TEMPLATE_GROUPS = {
+  base: [
+    "index.html",
+    "vite.config.ts",
+    "tsconfig.client.json",
+    "tsconfig.node.json",
+    "client-env.d.ts",
+    "src/client.tsx",
+    // **The gate travels with the file it protects (#383, #391).** `src/client.tsx` used to find its
+    // mount node by an id declared in `index.html`, and renaming that div rendered an empty page with
+    // no error at all (#394). The node is created in code now, and this is what keeps it that way in a
+    // repository Pithy will never see again.
+    "src/client.test.tsx",
+    "src/pithy-config.tsx",
+    // **The language the document declares and the language the page renders are one value, and this
+    // file is where it is resolved.** `client.tsx` used to negotiate a locale, put it on `<html lang>`,
+    // and mount no translator at all — so a project composing i18n served `lang="es"` over a page of
+    // English, which a screen reader believes and mispronounces. Base rather than an i18n group, for
+    // `pithy-config.tsx`'s reason: it compiles with nothing composed, where it renders its children
+    // untouched and no catalog is ever fetched.
+    "src/pithy-locale.tsx",
+    // The gate travels with it: the two halves are asserted from one mount, which is the only way to
+    // state the invariant at all.
+    "src/pithy-locale.test.tsx",
+    "src/router.tsx",
+    // The router's half of #393: a guard's destination is the path the screen declares, and this is
+    // what keeps it so once `router.tsx` is a file in somebody else's repository.
+    "src/router.test.tsx",
+    "src/styles.css",
+    // **`src/pithy-screens.css` is base, and it is base for the same reason `pithy-config.tsx` is.**
+    // It carries every class name a Pithy screen renders, and it is written whenever it is absent —
+    // which is what makes a *backfill* (`--auth` on a project scaffolded `--no-auth`) produce screens
+    // that render styled. Putting it in the `auth` group instead would leave a payments-only scaffold
+    // unstyled, and duplicating it across both groups would name one file twice.
+    //
+    // The adopter's `src/styles.css` is correctly skipped on that backfill — it is theirs. Before this
+    // file existed, the classes lived in it, so the run wrote a sign-in screen whose `stack`, `divider`
+    // and `secondary` nothing defined and reported it as created.
+    // The palette these two files share is #391's item I, and its gate is the one that could NOT be
+    // seeded: the invariant is CSS text, and a scaffolded project's runner stubs CSS modules to the
+    // empty string, so a seeded gate would sweep nothing and pass. It is kept in `palette.test.ts`,
+    // with that reason at the site — see `seededGates.test.ts`, which records it rather than letting
+    // the ledger look complete.
+    "src/pithy-screens.css",
+  ],
+  auth: [
+    "src/session.tsx",
+    "src/turnstile.tsx",
+    // **The gate travels with the file it protects (#383).** `src/turnstile.tsx` is the adopter's the
+    // moment it lands, and its whole risk is that the action label can be retyped into it — a drift
+    // no environment before production can see, because the test keys dev and staging run answer with
+    // no action to compare (#374). The kit keeping the only gate for that leaves the adopter most
+    // likely to hit it with nothing that goes red. So this one is seeded, not kept.
+    "src/turnstile.test.tsx",
+    "src/routes/pithy/sign-in.tsx",
+    // The magic link's `callbackURL` and `callback.tsx`'s `path` are one statement, and this is the
+    // gate that keeps them one after the screens are yours (#393). Seeded for the same reason the
+    // widget's is: the round trip it protects is the one flow nobody already signed in can test.
+    "src/routes/pithy/sign-in.test.tsx",
+    "src/routes/pithy/otp.tsx",
+    "src/routes/pithy/callback.tsx",
+  ],
+  payments: [
+    "src/payments.tsx",
+    "src/routes/pithy/paywall.tsx",
+    // The pricing screen ships even for a project with no Paddle rail, and renders its own empty state
+    // there. The argument against shipping one at all is that a pricing page is the most brand-specific
+    // screen there is — which is true of the paywall too, and did not stop that one. What settles it is
+    // that the alternative is every adopter writing the same PricePreview plumbing by hand, getting the
+    // tax convention wrong in one direction or the other, and freezing it into their own repository.
+    "src/routes/pithy/pricing.tsx",
+    "src/routes/pithy/subscription.tsx",
+  ],
+} as const satisfies Record<string, readonly string[]>;
+
+/** A group name this library offers. */
+export type TemplateGroup = keyof typeof TEMPLATE_GROUPS;
+
+/**
+ * The adopter's own home screen, which exists in two variants because it is the one file that
+ * differs between templates: the auth one carries the signed-in guard, the bare one does one typed
+ * `fetch`. Both live in the tree so both compile against the router and the session hook; exactly
+ * one is ever written, and always to the same place.
+ */
+export const HOME_SCREEN = {
+  target: "src/routes/app/home.tsx",
+  auth: "src/routes/app/home.tsx",
+  bare: "src/routes/app/home.bare.tsx",
+} as const;
+
+/** The token every template uses where the Worker's name belongs. */
+export const WORKER_TOKEN = "__PITHY_WORKER__";

package/src/testing/virtualAuth.ts

@@ -0,0 +1,12 @@
+// SPDX-FileCopyrightText: 2026 Pithy
+// SPDX-License-Identifier: MIT
+
+/**
+ * What `virtual:pithy/auth` resolves to under vitest.
+ *
+ * `{ enabled: false }` and nothing else — the exact shape `@pithy-sh/vite` serves for a capability the
+ * Worker does not compose. A screen under test takes its projection as a prop, so this value is never
+ * the one asserted against; it exists so importing a template module does not have to resolve a module
+ * that only a Vite build can produce.
+ */
+export default { enabled: false as const };

package/src/testing/virtualI18n.ts

@@ -0,0 +1,16 @@
+// SPDX-FileCopyrightText: 2026 Pithy
+// SPDX-License-Identifier: MIT
+
+/**
+ * What `virtual:pithy/i18n` resolves to under vitest.
+ *
+ * `{ enabled: false }` and nothing else — the exact shape `@pithy-sh/vite` serves for a capability the
+ * Worker does not compose, and the shape every screen has to render correctly under, because a project
+ * that never composes `i18n` is the common case.
+ *
+ * **Every `dom` test in this package needs it, whether or not it is about language.** They all import a
+ * screen, every screen imports `src/pithy-config.tsx`, and that module imports all five virtual modules
+ * to narrow them in one place. Without this alias the whole project fails to resolve, on tests that
+ * have nothing to do with locale.
+ */
+export default { enabled: false as const };

package/src/testing/virtualPayments.ts

@@ -0,0 +1,5 @@
+// SPDX-FileCopyrightText: 2026 Pithy
+// SPDX-License-Identifier: MIT
+
+/** What `virtual:pithy/payments` resolves to under vitest. See `virtualAuth.ts`. */
+export default { enabled: false as const };

package/src/testing/virtualTurnstile.ts

@@ -0,0 +1,5 @@
+// SPDX-FileCopyrightText: 2026 Pithy
+// SPDX-License-Identifier: MIT
+
+/** What `virtual:pithy/turnstile` resolves to under vitest. See `virtualAuth.ts`. */
+export default { enabled: false as const };

package/templates/client-env.d.ts

@@ -0,0 +1,299 @@
+/// <reference types="vite/client" />
+
+// The client-safe projection of this worker's composed capabilities, served by @pithy-sh/vite.
+//
+// Each module is a DEFAULT export whose type is a union discriminated on `enabled`. That shape is
+// deliberate. A capability that is not composed projects `{ enabled: false }` and nothing else, so a
+// NAMED import of any other key would be a missing export and the build would fail — on exactly the
+// case this mechanism exists to make survivable. Importing the default and narrowing cannot fail:
+//
+//   import turnstile from "virtual:pithy/turnstile";
+//   if (!turnstile.enabled) return null;   // narrowed: sitekey, mode and token exist below this line
+//
+// The `virtual:pithy/*` modules are never written to disk. These declarations describe modules the
+// Vite plugin serves, built from the Worker's own pithy.config.ts.
+//
+// **Generated, and copied here as it was emitted (#398).** Each declaration below is a capability's
+// declared client projection — `src/client/projection.ts` in @pithy-sh/auth, @pithy-sh/payments,
+// @pithy-sh/support and @pithy-sh/turnstile — written out by @pithy-sh/vite's
+// `src/clientEnvDeclaration.ts` at kit build time. In the kit that is one statement of each shape and
+// nothing to keep in step: a field a projection stops emitting is a compile error where it is
+// projected, and this file moves in the same commit.
+//
+// In your repository it is yours, like every other seeded file. Editing it changes what your compiler
+// believes and nothing about what the plugin serves.
+
+declare module "virtual:pithy/auth" {
+  /**
+   * Whether this capability is composed and serving on this worker. Also the union's discriminant.
+   *
+   * The only named export, deliberately. Every other key is reached through the default export and a
+   * narrowing — see the note at the top of this file.
+   */
+  export const enabled: boolean;
+
+  const config:
+    | {
+        /** Auth is not composed on this worker. A screen branches rather than rendering a sign-in form. */
+        enabled: false;
+      }
+    | {
+        /** Auth is composed on this worker. */
+        enabled: true;
+        /** The path the auth handler mounts under, e.g. `/auth`. */
+        basePath: string;
+        /**
+         * Which social providers are switched on in pithy.config.ts. Credentials never reach the client —
+         * they are not in the config this projection can see, they are in the secrets store.
+         *
+         * Nested, so a screen iterates the set rather than naming four booleans. A fifth provider is one
+         * key here — and until it is written here, projecting it is a compile error, not a surprise in
+         * somebody's bundle.
+         */
+        providers: {
+          /** Whether Sign in with Google is offered. */
+          google: boolean;
+          /** Whether Sign in with Apple is offered. */
+          apple: boolean;
+          /** Whether Sign in with Facebook is offered. */
+          facebook: boolean;
+          /** Whether Sign in with GitHub is offered. */
+          github: boolean;
+        };
+        /** How many digits an email OTP carries. */
+        otpLength: number;
+        /** Whether signing in may provision a new user. Drives the sign-up copy. */
+        signUpEnabled: boolean;
+      };
+  export default config;
+}
+
+declare module "virtual:pithy/i18n" {
+  /**
+   * Whether this capability is composed and serving on this worker. Also the union's discriminant.
+   *
+   * The only named export, deliberately. Every other key is reached through the default export and a
+   * narrowing — see the note at the top of this file.
+   */
+  export const enabled: boolean;
+
+  const config:
+    | {
+        /**
+         * The i18n capability is not composed. Every screen renders the English it was scaffolded with,
+         * byte for byte as it did before any of this landed — which is what makes the capability optional.
+         */
+        enabled: false;
+      }
+    | {
+        /** The i18n capability is composed, and these are the languages this project serves. */
+        enabled: true;
+        /** Every locale this project serves, as BCP-47 tags. The browser negotiates within this set. */
+        supportedLocales: string[];
+        /** The locale served when nothing in the browser chain answers. Always in `supportedLocales`. */
+        defaultLocale: string;
+        /** The query parameter an explicit choice arrives on — `?lang=es`. */
+        queryParam: string;
+        /** The `localStorage` key this device's remembered locale is written under. */
+        storageKey: string;
+        /**
+         * The browser chain, in the order it is asked: `query`, `account`, `storage`, `server`, `default`.
+         * Projected so the front end resolves in the order the project configured, not one it assumed.
+         */
+        browserResolvers: string[];
+        /**
+         * Language ranges the matcher cannot derive, as range → supported locale. Usually empty; it
+         * carries the historical pairs (`nb` meaning `no`) that no truncation of a tag would reach.
+         */
+        exceptions: Record<string, string>;
+      };
+  export default config;
+}
+
+declare module "virtual:pithy/payments" {
+  /**
+   * Whether this capability is composed and serving on this worker. Also the union's discriminant.
+   *
+   * The only named export, deliberately. Every other key is reached through the default export and a
+   * narrowing — see the note at the top of this file.
+   */
+  export const enabled: boolean;
+
+  const config:
+    | {
+        /**
+         * Payments is not composed, or has no catalog this environment can render. Both read the same on
+         * purpose: "composed with nothing to sell" is a paywall with nothing on it, exactly like "not
+         * composed", and a screen branches on one value rather than guarding.
+         */
+        enabled: false;
+      }
+    | {
+        /** Payments is composed AND has a catalog this environment can render. */
+        enabled: true;
+        /** The environment this bundle was built for. */
+        environment: string;
+        /**
+         * Which rails this project sells through. Apple and Google are display-only on the web — a
+         * paywall shows such a product as owned-elsewhere rather than offering a buy button nothing on
+         * the web can honor.
+         */
+        rails: {
+          /** Whether the App Store rail is on. Display-only in a browser. */
+          apple: boolean;
+          /** Whether the Play Store rail is on. Display-only in a browser. */
+          google: boolean;
+          /** Whether the Stripe rail is on. */
+          stripe: boolean;
+          /** Whether the Lemon Squeezy rail is on. */
+          lemonSqueezy: boolean;
+          /** Whether the Paddle rail is on. */
+          paddle: boolean;
+        };
+        /**
+         * What Paddle.js needs to initialize, or null when the rail is off. The client token is
+         * publishable by design — it is what a browser opens a checkout with — and the API key and the
+         * webhook signing secret are neither here nor expressible here.
+         */
+        paddle: {
+          /** The publishable client token Paddle.js initializes with. */
+          clientToken: string;
+          /** Which Paddle account the token belongs to. */
+          environment: "sandbox" | "production";
+          /**
+           * How checkout is presented: `overlay` opens Paddle.js over your own page, `inline` renders it
+           * into a container the screen provides, `hosted` redirects to Paddle's own page.
+           *
+           * The union is stated, not `string`. A screen switches on this to decide whether to render a
+           * container at all, and the exhaustiveness is the point. It was the one field the hand-written
+           * `templates/client-env.d.ts` widened, and generating that file from here is what closed it.
+           */
+          checkout: "overlay" | "inline" | "hosted";
+        } | null;
+        /** Where the payments routes mount, e.g. `/payments`. */
+        basePath: string;
+        /**
+         * The catalog, browser-safe, in the order the adopter wrote it. A web rail's price id is
+         * publishable by design — a checkout names one. Apple's and Google's SKUs, and anything a
+         * purchase fulfills beyond its entitlements, stay server-side.
+         */
+        products: {
+          /** The logical product id — what `/payments/checkout` is asked for. */
+          id: string;
+          /** What kind of product it is. */
+          type: "consumable" | "non_consumable" | "subscription";
+          /** The entitlement keys it grants. Gating code names these, never the product. */
+          entitlements: string[];
+          /** The display name a paywall renders. */
+          name: string;
+          /**
+           * This product's SKU on each web rail, or null where it is not sold. Keyed by rail rather than one
+           * field per rail, so a screen asks `skus[rail]` and a new rail cannot leave a `purchasable()` check
+           * silently out of date. Every id here is publishable by design — each is what a checkout names.
+           *
+           * Apple's and Google's product ids are deliberately absent: a browser cannot open either store.
+           */
+          skus: {
+            /** The Stripe price id. */
+            stripe: string | null;
+            /** The Lemon Squeezy variant id. */
+            lemonSqueezy: string | null;
+            /** The Paddle price id. */
+            paddle: string | null;
+          };
+        }[];
+      };
+  export default config;
+}
+
+declare module "virtual:pithy/support" {
+  /**
+   * Whether this capability is composed and serving on this worker. Also the union's discriminant.
+   *
+   * The only named export, deliberately. Every other key is reached through the default export and a
+   * narrowing — see the note at the top of this file.
+   */
+  export const enabled: boolean;
+
+  const config:
+    | {
+        /**
+         * Support is not composed, or is not serving the in-app submission routes — the only ones a
+         * browser calls. A screen branches rather than rendering a compose form nothing will accept.
+         */
+        enabled: false;
+      }
+    | {
+        /** Support is composed AND serving the in-app submission routes. */
+        enabled: true;
+        /** Where the support routes mount, e.g. `/support`. `POST {basePath}/feedback` writes in. */
+        basePath: string;
+        /**
+         * What one submission may carry. Hold a compose form to these so the handler does not have to
+         * refuse after somebody pressed Send. The taxonomy is not here: a category's text is the
+         * instruction a classifier reads, not copy for a chooser.
+         */
+        submission: {
+          /** The longest subject accepted. It becomes the thread's name in the inbox. */
+          maxSubjectChars: number;
+          /** The longest report body accepted. */
+          maxBodyChars: number;
+          /**
+           * What an upload control may offer, or null when attachments are off and it renders none.
+           * Null rather than absent: the projection is inlined with `JSON.stringify`, which drops an
+           * undefined value and leaves a screen reading a key that is simply gone.
+           */
+          attachments: {
+            /** How many files one submission may carry. */
+            maxCount: number;
+            /** The largest single file, measured on the decoded bytes. */
+            maxBytes: number;
+            /** The exact MIME types accepted — an allowlist, and the `accept` a file input wants. */
+            allowedContentTypes: string[];
+          } | null;
+        };
+      };
+  export default config;
+}
+
+declare module "virtual:pithy/turnstile" {
+  /**
+   * Whether this capability is composed and serving on this worker. Also the union's discriminant.
+   *
+   * The only named export, deliberately. Every other key is reached through the default export and a
+   * narrowing — see the note at the top of this file.
+   */
+  export const enabled: boolean;
+
+  const config:
+    | {
+        /**
+         * Turnstile is not composed, or has no renderable login widget for this environment. A screen
+         * branches rather than mounting a widget that cannot solve.
+         */
+        enabled: false;
+      }
+    | {
+        /** Turnstile is composed AND has a renderable login widget for this environment. */
+        enabled: true;
+        /** The public sitekey for the build's environment. The widget secret stays in the secrets store. */
+        sitekey: string;
+        /** The widget mode `protect.login` names. */
+        mode: "visible" | "invisible";
+        /**
+         * The action label the widget must be solved for. Render it, never retype it: the sign-in route
+         * asserts this exact string against the token, and dev and staging cannot notice a copy that has
+         * drifted — Cloudflare's test keys answer with no action at all, so the first environment that
+         * can tell is the one where a mismatch refuses every sign-in. #377.
+         */
+        action: string;
+        /** Where the response token goes: a body field, or a header when one is configured. */
+        token: {
+          /** The body field the middleware reads the token from. */
+          field: string;
+          /** The header it reads instead, or null when none is configured. */
+          header: string | null;
+        };
+      };
+  export default config;
+}

package/templates/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>__PITHY_WORKER__</title>
+  </head>
+  <!-- No mount node here, on purpose. `src/client.tsx` creates the one it renders into, so there is no
+       id in this file for a rename to break silently (#394). Anything you add below is left alone; the
+       app mounts after it. -->
+  <body>
+    <script type="module" src="/src/client.tsx"></script>
+  </body>
+</html>