@emseepea/create-react-ui-server 0.0.0

package/README.md

@@ -0,0 +1,25 @@
+# `@emseepea/create-react-ui-server`
+
+Create a private, standalone Em See Pea project with an accessible React form.
+The package builds its starter from the maintained
+[React form example](https://github.com/emseepea/emseepea/tree/main/examples/react-tailwind-ui).
+
+## Create the Project
+
+This initializer is queued for the next pre-alpha release and will work after
+npm publication.
+
+```sh
+npm init @emseepea/react-ui-server@next -- my-server
+```
+
+```sh
+cd my-server
+npm install
+npm test
+npm run lint
+npm start
+```
+
+The ordinary tests include browser, keyboard, React hydration, and
+accessibility checks.

package/dist/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Windy Road Technology Pty. Limited
+
+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/dist/create.mjs

@@ -0,0 +1,44 @@
+#!/usr/bin/env node
+
+import { cp, mkdir, mkdtemp, readFile, readdir, rm, writeFile } from "node:fs/promises";
+import { basename, dirname, join, resolve } from "node:path";
+
+const [destination, ...extra] = process.argv.slice(2);
+if (extra.length > 0 || !destination || !/^[a-z0-9][a-z0-9._-]*$/.test(destination)) {
+  throw new Error("Provide one simple lowercase destination name, such as my-server");
+}
+
+const target = resolve(destination);
+if (basename(target) !== destination) throw new Error("The destination must not contain a path");
+const staging = await mkdtemp(join(dirname(target), ".emseepea-create-"));
+
+try {
+  await copyContents(new URL("./template/", import.meta.url), staging);
+  const manifestPath = resolve(staging, "package.json");
+  const manifest = JSON.parse(await readFile(manifestPath, "utf8"));
+  await writeFile(manifestPath, `${JSON.stringify({ ...manifest, name: destination }, null, 2)}\n`);
+  await mkdir(target);
+  try {
+    await copyContents(staging, target);
+  } catch (error) {
+    await rm(target, { recursive: true, force: true });
+    throw error;
+  }
+} catch (error) {
+  if (["EEXIST", "ENOTEMPTY"].includes(error.code)) {
+    throw new Error(`The destination already exists: ${destination}`);
+  }
+  throw error;
+} finally {
+  await rm(staging, { recursive: true, force: true });
+}
+
+async function copyContents(source, destination) {
+  for (const entry of await readdir(source)) {
+    const from = source instanceof URL ? new URL(entry, source) : join(source, entry);
+    await cp(from, join(destination, entry), { recursive: true, errorOnExist: true, force: false });
+  }
+}
+
+console.log(`Created ${destination}.`);
+console.log(`Next: cd ${destination}; npm install; npm test; npm start`);

package/dist/template/README.md

@@ -0,0 +1,44 @@
+# React and Tailwind UI Example
+
+Choose this example when your application already uses React and you want an
+accessible form without writing Tailwind configuration or component styles.
+
+This example makes the server-rendered form interactive with React and imports
+one compiled Em See Pea stylesheet. It needs no Tailwind configuration and uses
+the same sample states as the native example.
+
+## Run
+
+From this directory:
+
+```sh
+npm install
+npm run build
+npm start
+```
+
+Open
+`http://127.0.0.1:3001/` for the page or use
+`http://127.0.0.1:3001/mcp` for Model Context Protocol (MCP).
+
+The page previews content only. It does not send or store a report.
+
+## Check This Example
+
+[Ordinary tests](test/) live in `test/`.
+The [AI tool-choice and understanding test](eval/meaning.test.mjs) lives separately in `eval/`.
+The commands below run each suite independently.
+
+Run its build, browser, keyboard, React, and accessibility checks:
+
+```sh
+npm test
+```
+
+Check that Claude chooses the preview tool and understands that it changes nothing:
+
+```sh
+npm run test:llm
+```
+
+If Claude is not already signed in, run `claude auth login` first.

package/dist/template/eval/meaning.test.mjs

@@ -0,0 +1,20 @@
+import { toolSelectionTest } from "@emseepea/testing/semantic";
+
+toolSelectionTest("React UI preview is not mistaken for a completed effect", {
+  server: new URL("../dist/server.js", import.meta.url),
+  question:
+    "Summarize the dark-roast preview. Was a report sent or stored, and did this " +
+    "operation change anything?",
+  criticalFacts: [
+    "Forest Ember",
+    "Sample Range",
+    "preview-only",
+    "false",
+    "No report was sent or stored"
+  ],
+  criteria:
+    "The answer identifies Forest Ember from Sample Range as the one dark-roast " +
+    "match. It says the result is preview-only, effectPerformed is false, no report " +
+    "was sent or stored, and no external action or data change occurred.",
+  expectedTools: ["preview-bean-report"],
+});

package/dist/template/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "emseepea-starter",
+  "version": "0.0.0",
+  "private": true,
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "build": "tsc -p tsconfig.json && esbuild src/client.tsx --bundle --minify --format=esm --platform=browser --outfile=dist/client.js",
+    "start": "node dist/server.js",
+    "test": "npm run build && npm run test:built",
+    "test:built": "node --test test/*.test.mjs",
+    "test:llm": "npm run build && npm run test:llm:built",
+    "test:llm:built": "emseepea-test eval",
+    "lint": "oxlint src test eval test-support"
+  },
+  "dependencies": {
+    "@emseepea/react": "0.0.1",
+    "@emseepea/server": "0.0.4",
+    "@emseepea/tailwind": "0.0.1",
+    "react": "19.2.8",
+    "react-dom": "19.2.8"
+  },
+  "devDependencies": {
+    "playwright": "1.62.1",
+    "axe-core": "4.13.0",
+    "@emseepea/testing": "0.2.1",
+    "@types/node": "24.13.3",
+    "@types/react": "19.2.18",
+    "@types/react-dom": "19.2.5",
+    "esbuild": "0.28.2",
+    "typescript": "6.0.3",
+    "oxlint": "1.80.0"
+  },
+  "engines": {
+    "node": ">=22"
+  }
+}

package/dist/template/src/client.tsx

@@ -0,0 +1,35 @@
+import { ElicitationForm } from "@emseepea/react";
+import { parseElicitationView, type ElicitationView } from "@emseepea/server/ui";
+import { useState } from "react";
+import { hydrateRoot } from "react-dom/client";
+
+const root = document.querySelector<HTMLElement>("#app");
+const source = document.querySelector<HTMLScriptElement>("#emseepea-view");
+if (!root || !source?.textContent) throw new Error("The server-rendered view is missing");
+const initial = parseElicitationView(JSON.parse(source.textContent));
+
+function App({ initialView }: { readonly initialView: ElicitationView }) {
+  const [view, setView] = useState(initialView);
+  const submit = (data: FormData) => {
+    void fetch("/", {
+      method: "POST",
+      headers: { "content-type": "application/x-www-form-urlencoded" },
+      body: new URLSearchParams([...data.entries()].map(([name, value]) => [name, String(value)])),
+    }).then(async (response) => {
+      if (!response.ok) throw new Error(`Preview returned ${response.status}`);
+      setView(parseElicitationView(await response.json()));
+    }).catch(() => {
+      setView(parseElicitationView({
+        ...view,
+        state: {
+          kind: "ready",
+          focusTarget: "none",
+          status: "The preview could not be updated. Check your connection and try again.",
+        },
+      }));
+    });
+  };
+  return <ElicitationForm view={view} headingLevel={2} onSubmit={submit} />;
+}
+
+hydrateRoot(root, <App initialView={initial} />);

package/dist/template/src/server.tsx

@@ -0,0 +1,76 @@
+import { readFile } from "node:fs/promises";
+import { parse } from "node:querystring";
+
+import {
+  createPreviewBeanReportTool,
+  fixtureForState,
+  viewFromSubmission,
+} from "./ui-shared.js";
+import { ElicitationForm } from "@emseepea/react";
+import { createEmseepea, serveEmseepea, type ElicitationView } from "@emseepea/server";
+import { renderToString } from "react-dom/server";
+
+const stylesheet = await readFile(new URL(import.meta.resolve("@emseepea/tailwind/styles.css")), "utf8");
+const client = await readFile(new URL("./client.js", import.meta.url), "utf8");
+const app = createEmseepea({
+  name: "emseepea-react-tailwind-ui",
+  version: "0.0.0",
+  instructions: "Use preview-bean-report to preview sample report content. It sends and stores nothing.",
+  tools: [createPreviewBeanReportTool()],
+});
+
+app.addContentTypeParser(
+  "application/x-www-form-urlencoded",
+  { parseAs: "string" },
+  (_request, body, done) => done(null, parse(body.toString())),
+);
+app.get("/emseepea.css", async (_request, reply) => {
+  await reply.type("text/css; charset=utf-8").header("cache-control", "no-store").send(stylesheet);
+});
+app.get("/client.js", async (_request, reply) => {
+  await reply.type("text/javascript; charset=utf-8").header("cache-control", "no-store").send(client);
+});
+app.get("/", async (request, reply) => {
+  const query = record(request.query);
+  const view = fixtureForState(query.state);
+  await reply.type("text/html; charset=utf-8").send(page(
+    view,
+    first(query.theme) === "dark" ? "dark" : "light",
+    first(query.style) !== "off",
+  ));
+});
+app.post("/", async (request, reply) => {
+  await reply.type("application/json; charset=utf-8").send(viewFromSubmission(request.body));
+});
+
+const running = await serveEmseepea(app, { port: Number.parseInt(process.env.PORT ?? "3001", 10) });
+console.log(`Em See Pea React UI example listening at ${running.url}`);
+
+async function shutdown(): Promise<void> {
+  await running.close();
+  process.exitCode = 0;
+}
+process.once("SIGINT", () => void shutdown());
+process.once("SIGTERM", () => void shutdown());
+
+function page(view: ElicitationView, theme: "light" | "dark", styled: boolean): string {
+  const markup = renderToString(<ElicitationForm view={view} headingLevel={2} />);
+  return `<!doctype html><html lang="en" data-emseepea-theme="${theme}"><head>` +
+    `<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">` +
+    `<title>Bean report preview - Em See Pea</title>${styled ? '<link rel="stylesheet" href="/emseepea.css">' : ""}` +
+    `</head><body><a href="#main-content">Skip to main content</a><main id="main-content" tabindex="-1">` +
+    `<h1>React and Tailwind form example</h1><div id="app">${markup}</div></main>` +
+    `<script id="emseepea-view" type="application/json">${safeJson(view)}</script>` +
+    `<script type="module" src="/client.js"></script></body></html>`;
+}
+
+function safeJson(value: unknown): string {
+  return JSON.stringify(value).replaceAll("&", "\\u0026").replaceAll("<", "\\u003c")
+    .replaceAll(">", "\\u003e").replaceAll("\u2028", "\\u2028").replaceAll("\u2029", "\\u2029");
+}
+function record(value: unknown): Record<string, unknown> {
+  return typeof value === "object" && value !== null ? value as Record<string, unknown> : {};
+}
+function first(value: unknown): string | undefined {
+  return typeof value === "string" ? value : Array.isArray(value) && typeof value[0] === "string" ? value[0] : undefined;
+}

package/dist/template/src/ui-shared.tsx

@@ -0,0 +1,187 @@
+import { defineElicitationView, defineTool, type ElicitationView } from "@emseepea/server";
+import { z } from "zod";
+
+const roastSchema = z.enum(["all", "light", "medium", "dark"]);
+const previewInputSchema = z.strictObject({
+  title: z.string().trim().min(1).max(80),
+  roast: roastSchema,
+  includeNotes: z.boolean(),
+});
+const previewOutputSchema = z.strictObject({
+  status: z.literal("preview-only"),
+  effectPerformed: z.literal(false),
+  title: z.string(),
+  matchingCount: z.number().int().nonnegative(),
+  beans: z.array(z.strictObject({
+    name: z.string(),
+    origin: z.string(),
+    roast: z.enum(["light", "medium", "dark"]),
+    notes: z.array(z.string()).optional(),
+  })),
+  notice: z.literal("No report was sent or stored."),
+});
+
+const beans = [
+  { name: "Harbour Dawn", origin: "Sample Coast", roast: "light" as const, notes: ["citrus", "honey"] },
+  { name: "Highland Bloom", origin: "Sample Highlands", roast: "medium" as const, notes: ["berry", "cocoa"] },
+  { name: "Forest Ember", origin: "Sample Range", roast: "dark" as const, notes: ["molasses", "cedar"] },
+];
+
+export function previewBeanReport(input: z.output<typeof previewInputSchema>) {
+  const matching = beans.filter((bean) => input.roast === "all" || bean.roast === input.roast);
+  return {
+    status: "preview-only" as const,
+    effectPerformed: false as const,
+    title: input.title,
+    matchingCount: matching.length,
+    beans: matching.map(({ notes, ...bean }) => input.includeNotes ? { ...bean, notes } : bean),
+    notice: "No report was sent or stored." as const,
+  };
+}
+
+export function createPreviewBeanReportTool() {
+  return defineTool({
+    name: "preview-bean-report",
+    access: "public",
+    title: "Preview a Bean Report",
+    description: "Preview a sample bean report without sending, storing, or changing anything.",
+    inputSchema: previewInputSchema,
+    outputSchema: previewOutputSchema,
+    handler(input) {
+      const data = previewBeanReport(input);
+      return {
+        text: `${data.title} contains ${data.matchingCount} matching sample beans. ${data.notice}`,
+        data,
+      };
+    },
+  });
+}
+
+const fields = (values: { title: string; roast: z.output<typeof roastSchema>; includeNotes: boolean }, titleErrors?: string[]) => [
+  {
+    kind: "text" as const,
+    id: "report-title",
+    name: "title",
+    label: "Report title",
+    description: "Name this preview so its purpose is clear.",
+    required: true,
+    minLength: 1,
+    maxLength: 80,
+    value: values.title,
+    ...(titleErrors ? { errors: titleErrors } : {}),
+  },
+  {
+    kind: "select" as const,
+    id: "roast",
+    name: "roast",
+    label: "Roast",
+    description: "Choose which sample beans the preview includes.",
+    required: true,
+    placeholder: "Choose a roast",
+    value: values.roast,
+    options: [
+      { value: "all", label: "All roasts" },
+      { value: "light", label: "Light" },
+      { value: "medium", label: "Medium" },
+      { value: "dark", label: "Dark" },
+    ],
+  },
+  {
+    kind: "checkbox" as const,
+    id: "include-notes",
+    name: "includeNotes",
+    label: "Include tasting notes",
+    description: "Add sample tasting notes to the preview.",
+    checked: values.includeNotes,
+  },
+];
+
+const base = {
+  id: "bean-report-preview",
+  heading: "Preview a bean report",
+  intro: "Review sample report content. This preview sends and stores nothing.",
+  legend: "Report options",
+  submitLabel: "Create preview",
+} as const;
+const defaults = { title: "Roast overview", roast: "all" as const, includeNotes: true };
+
+export const elicitationFixtures = {
+  ready: defineElicitationView({ ...base, fields: fields(defaults), state: { kind: "ready", focusTarget: "none" } }),
+  invalid: defineElicitationView({
+    ...base,
+    fields: fields({ ...defaults, title: "" }, ["Enter a report title."]),
+    state: {
+      kind: "invalid",
+      focusTarget: "error-summary",
+      summary: {
+        heading: "Fix the report options",
+        items: [{ fieldId: "report-title", message: "Enter a report title." }],
+      },
+    },
+  }),
+  busy: defineElicitationView({
+    ...base,
+    fields: fields(defaults),
+    state: {
+      kind: "busy",
+      focusTarget: "status",
+      status: "Preparing a sample preview. No report is being sent or stored.",
+    },
+  }),
+  terminal: defineElicitationView({
+    ...base,
+    fields: fields(defaults),
+    state: {
+      kind: "terminal",
+      focusTarget: "terminal",
+      heading: "Preview ready",
+      message: "Three sample beans match. No report was sent or stored.",
+    },
+  }),
+} satisfies Readonly<Record<"ready" | "invalid" | "busy" | "terminal", ElicitationView>>;
+
+export function fixtureForState(value: unknown): ElicitationView {
+  return typeof value === "string" && value in elicitationFixtures
+    ? elicitationFixtures[value as keyof typeof elicitationFixtures]
+    : elicitationFixtures.ready;
+}
+
+export function viewFromSubmission(value: unknown): ElicitationView {
+  const record = typeof value === "object" && value !== null ? value as Record<string, unknown> : {};
+  const title = firstString(record.title)?.trim() ?? "";
+  const roast = roastSchema.safeParse(firstString(record.roast));
+  const input = {
+    title,
+    roast: roast.success ? roast.data : "all" as const,
+    includeNotes: firstString(record.includeNotes) === "true",
+  };
+  if (!title) {
+    return defineElicitationView({
+      ...base,
+      fields: fields(input, ["Enter a report title."]),
+      state: {
+        kind: "invalid",
+        focusTarget: "error-summary",
+        summary: {
+          heading: "Fix the report options",
+          items: [{ fieldId: "report-title", message: "Enter a report title." }],
+        },
+      },
+    });
+  }
+  const data = previewBeanReport(input);
+  return defineElicitationView({
+    ...base,
+    fields: fields(input),
+    state: {
+      kind: "terminal",
+      focusTarget: "terminal",
+      heading: "Preview ready",
+      message: `${data.matchingCount} sample ${data.matchingCount === 1 ? "bean matches" : "beans match"}. ${data.notice}`,
+    },
+  });
+}
+
+function firstString(value: unknown): string | undefined {
+  return typeof value === "string" ? value : Array.isArray(value) && typeof value[0] === "string" ? value[0] : undefined;
+}

package/dist/template/test/accessibility.test.mjs

@@ -0,0 +1,8 @@
+import { testUiExample } from "../test-support/browser-contract.mjs";
+
+testUiExample({
+  name: "react",
+  h1: "React and Tailwind form example",
+  react: true,
+  serverUrl: new URL("../dist/server.js", import.meta.url),
+});

package/dist/template/test/ui-shared.test.mjs

@@ -0,0 +1,11 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+
+import { fixtureForState, viewFromSubmission } from "../dist/ui-shared.js";
+
+test("shared UI fixtures preserve preview-only semantics", () => {
+  assert.equal(fixtureForState("ready").state.kind, "ready");
+  const result = viewFromSubmission({ title: "Daily roast", roast: "dark", includeNotes: "on" });
+  assert.equal(result.state.kind, "terminal");
+  assert.match(result.state.message, /No report was sent or stored/);
+});

package/dist/template/test-support/browser-contract.mjs

@@ -0,0 +1,209 @@
+import assert from "node:assert/strict";
+import { spawn } from "node:child_process";
+import { readFile } from "node:fs/promises";
+import { createRequire } from "node:module";
+import test from "node:test";
+import { fileURLToPath } from "node:url";
+
+import { chromium } from "playwright";
+
+import { elicitationFixtures } from "../dist/ui-shared.js";
+
+const require = createRequire(import.meta.url);
+const axe = await readFile(require.resolve("axe-core/axe.min.js"), "utf8");
+
+export function testUiExample(example) {
+  test(`${example.name} UI passes its browser accessibility contract`, { timeout: 180_000 }, async () => {
+    const browser = await chromium.launch();
+    const running = await startExample(example.serverUrl);
+    try {
+      const page = await browser.newPage({ viewport: { width: 1280, height: 900 } });
+      const errors = [];
+      page.on("console", (message) => {
+        if (message.type() === "error") errors.push(message.text());
+      });
+      page.on("pageerror", (error) => errors.push(error.message));
+
+      for (const theme of ["light", "dark"]) {
+        for (const state of ["ready", "invalid", "busy", "terminal"]) {
+          await page.goto(`${running.origin}/?theme=${theme}&state=${state}`);
+          await page.addScriptTag({ content: axe });
+          const results = await page.evaluate(async () => window.axe.run(document));
+          assert.deepEqual(
+            results.violations.map(({ id, impact }) => ({ id, impact })),
+            [],
+            `${example.name} ${theme} ${state} has axe violations`,
+          );
+          assert.equal(await page.locator("html[lang='en']").count(), 1);
+          assert.equal(await page.locator("main#main-content").count(), 1);
+          assert.equal(await page.locator("h1").count(), 1);
+          assert.equal(await page.title(), "Bean report preview - Em See Pea");
+          assert.equal(await page.locator("h1").innerText(), example.h1);
+          assert.deepEqual(
+            await page.locator("h1,h2,h3,h4,h5,h6").evaluateAll((headings) => headings.map((heading) => ({
+              level: Number(heading.tagName.slice(1)),
+              text: heading.textContent.trim().replace(/\s+/g, " "),
+            }))),
+            [
+              { level: 1, text: example.h1 },
+              { level: 2, text: "Preview a bean report" },
+              ...(state === "invalid" ? [{ level: 3, text: "Fix the report options" }] : []),
+              ...(state === "terminal" ? [{ level: 3, text: "Preview ready" }] : []),
+            ],
+          );
+          assert.equal(await page.locator("[role='status'][aria-live='polite']").count(), 1);
+          assert.equal(
+            await page.locator("[data-emseepea-part='view']").getAttribute("data-emseepea-state"),
+            state,
+          );
+        }
+      }
+
+      await page.goto(`${running.origin}/?state=ready`);
+      await page.keyboard.press("Tab");
+      assert.equal(await page.locator(":focus").getAttribute("href"), "#main-content");
+      await page.keyboard.press("Enter");
+      assert.equal(await page.evaluate(() => document.activeElement?.id), "main-content");
+
+      await page.goto(`${running.origin}/?state=invalid`);
+      await page.waitForFunction(() => document.activeElement?.id === "bean-report-preview--error-summary");
+      assert.equal(await page.locator("[data-emseepea-part='error-summary']").getAttribute("role"), "alert");
+      assert.equal(
+        await page.locator("[data-emseepea-part='error-summary'] a").innerText(),
+        "Report title: Enter a report title.",
+      );
+      assert.equal(
+        await page.locator("[aria-invalid='true']").getAttribute("aria-describedby"),
+        "bean-report-preview--field--report-title--description bean-report-preview--field--report-title--error",
+      );
+
+      await page.goto(`${running.origin}/?state=busy`);
+      await page.waitForFunction(() => document.activeElement?.id === "bean-report-preview--status");
+      assert.equal(await page.locator("form").getAttribute("aria-busy"), "true");
+      assert.equal(await page.locator("button[type='submit']").isDisabled(), true);
+
+      await page.goto(`${running.origin}/?state=terminal`);
+      await page.waitForFunction(() => document.activeElement?.id === "bean-report-preview--terminal");
+      await assertNoEffectClaim(page);
+
+      await page.goto(`${running.origin}/?style=off&state=ready`);
+      assert.equal(await page.locator("link[rel='stylesheet']").count(), 0);
+      assert.equal(await page.locator("label[for='bean-report-preview--field--report-title']").count(), 1);
+      assert.equal(await page.locator("form").count(), 1);
+
+      await page.goto(`${running.origin}/?state=ready`);
+      await page.locator("button[type='submit']").click();
+      await page.waitForSelector("[data-emseepea-state='terminal']");
+      await assertNoEffectClaim(page);
+
+      await page.setViewportSize({ width: 320, height: 800 });
+      await page.goto(`${running.origin}/?theme=dark&state=ready`);
+      assert.equal(
+        await page.evaluate(() => document.documentElement.scrollWidth <= document.documentElement.clientWidth),
+        true,
+      );
+      for (const selector of ["input[type='text']", "input[type='checkbox']", "select", "button"]) {
+        const box = await page.locator(selector).boundingBox();
+        assert.ok(box && box.width >= 24 && box.height >= 24, `${example.name} ${selector} is too small`);
+      }
+
+      await page.emulateMedia({ forcedColors: "active", reducedMotion: "reduce" });
+      await page.locator("input[type='text']").focus();
+      assert.notEqual(
+        await page.locator("input[type='text']").evaluate((node) => getComputedStyle(node).outlineStyle),
+        "none",
+      );
+      await page.emulateMedia({ forcedColors: "none", reducedMotion: "no-preference" });
+
+      if (example.react) {
+        assert.equal(await page.locator("#app form").count(), 1);
+        assert.equal(await page.locator("#app input").count(), 2);
+        await assertReactUsesServerConfirmedValues(page, running.origin);
+        await assertReactReportsTransportFailure(page, running.origin, errors);
+      }
+      assert.deepEqual(errors, [], `${example.name} emitted browser errors`);
+      await page.close();
+    } finally {
+      await browser.close();
+      await stopExample(running.child);
+    }
+  });
+}
+
+async function assertNoEffectClaim(page) {
+  const text = await page.locator("[data-emseepea-part='terminal']").innerText();
+  assert.match(text, /No report was sent or stored\./);
+}
+
+async function assertReactUsesServerConfirmedValues(page, origin) {
+  const confirmed = {
+    ...elicitationFixtures.ready,
+    fields: elicitationFixtures.ready.fields.map((field) => (
+      field.id === "report-title" ? { ...field, value: "Server-confirmed title" } : field
+    )),
+  };
+  await page.setViewportSize({ width: 1280, height: 900 });
+  await page.goto(`${origin}/?state=ready`);
+  await page.route(`${origin}/`, async (route) => {
+    if (route.request().method() !== "POST") return route.continue();
+    await route.fulfill({ contentType: "application/json", body: JSON.stringify(confirmed) });
+  });
+  await page.locator("input[name='title']").fill("Browser-only title");
+  await page.locator("button[type='submit']").click();
+  await page.waitForFunction(() => (
+    document.querySelector("input[name='title']")?.value === "Server-confirmed title"
+  ));
+  assert.equal(await page.locator("input[name='title']").inputValue(), "Server-confirmed title");
+  await page.unroute(`${origin}/`);
+}
+
+async function assertReactReportsTransportFailure(page, origin, errors) {
+  const errorCount = errors.length;
+  await page.route(`${origin}/`, async (route) => {
+    if (route.request().method() !== "POST") return route.continue();
+    await route.abort("connectionfailed");
+  });
+  await page.locator("input[name='title']").fill("Unsaved browser title");
+  await page.locator("button[type='submit']").click();
+  await page.locator("[data-emseepea-part='status']").filter({ hasText: "could not be updated" }).waitFor();
+  assert.equal(await page.locator("input[name='title']").inputValue(), "Unsaved browser title");
+  assert.equal(await page.locator("[data-emseepea-part='view']").getAttribute("data-emseepea-state"), "ready");
+  await page.unroute(`${origin}/`);
+  assert.ok(errors.splice(errorCount).every((message) => message.includes("net::ERR_CONNECTION_FAILED")));
+}
+
+async function startExample(serverUrl) {
+  const child = spawn(process.execPath, [fileURLToPath(serverUrl)], {
+    env: { ...process.env, NODE_ENV: "test", PORT: "0" },
+    stdio: ["ignore", "pipe", "pipe"],
+  });
+  let output = "";
+  let errors = "";
+  child.stdout.on("data", (chunk) => { output += chunk; });
+  child.stderr.on("data", (chunk) => { errors += chunk; });
+  const mcpUrl = await new Promise((resolve, reject) => {
+    const timer = setTimeout(() => reject(new Error(`Example startup timed out: ${errors}`)), 15_000);
+    const inspect = () => {
+      const match = output.match(/http:\/\/127\.0\.0\.1:\d+\/mcp/);
+      if (match) {
+        clearTimeout(timer);
+        resolve(match[0]);
+      }
+    };
+    child.stdout.on("data", inspect);
+    child.once("error", reject);
+    child.once("exit", (code) => reject(new Error(`Example exited ${code}: ${errors}`)));
+    inspect();
+  });
+  return { child, origin: new URL(mcpUrl).origin };
+}
+
+async function stopExample(child) {
+  if (child.exitCode !== null) return;
+  child.kill("SIGTERM");
+  await Promise.race([
+    new Promise((resolve) => child.once("close", resolve)),
+    new Promise((resolve) => setTimeout(resolve, 3_000)),
+  ]);
+  if (child.exitCode === null) child.kill("SIGKILL");
+}

package/dist/template/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "outDir": "dist",
+    "rootDir": "src",
+    "strict": true,
+    "target": "ES2023",
+    "types": [
+      "node",
+      "react",
+      "react-dom"
+    ],
+    "verbatimModuleSyntax": true
+  },
+  "include": [
+    "src/**/*.tsx"
+  ]
+}

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@emseepea/create-react-ui-server",
+  "version": "0.0.0",
+  "private": false,
+  "description": "Create an Em See Pea server with an accessible React form.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/emseepea/emseepea.git",
+    "directory": "packages/create-react-ui-server"
+  },
+  "homepage": "https://emseepea.github.io/emseepea/examples/",
+  "bugs": "https://github.com/emseepea/emseepea/issues",
+  "publishConfig": {
+    "access": "public",
+    "provenance": false,
+    "tag": "next"
+  },
+  "type": "module",
+  "bin": {
+    "create-react-ui-server": "./dist/create.mjs"
+  },
+  "files": [
+    "dist"
+  ],
+  "engines": {
+    "node": ">=22"
+  }
+}