@emseepea/create-react-ui-server 0.0.2 → 0.0.4

package/README.md

@@ -1,25 +1,62 @@
 # `@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).
+This directory is both the maintained example and its public npm initializer.
 
-## Create the Project
+## Use This Template
 
-This initializer is queued for the next pre-alpha release and will work after
-npm publication.
+Use this template for an accessible form in an application that already uses
+React. Choose the [HTML UI server](../html-ui-server/README.md) when native HTML
+is enough and you want fewer front-end dependencies. [Compare all eight templates](https://emseepea.github.io/emseepea/examples/).
+
+## Create a Project
 
 ```sh
-npm init @emseepea/react-ui-server@next -- my-server
+npm init @emseepea/react-ui-server -- my-server
 ```
 
+<!-- generated-project-readme -->
+
+## 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
-cd my-server
 npm install
-npm test
-npm run lint
+npm run build
 npm start
 ```
 
-The ordinary tests include browser, keyboard, React hydration, and
-accessibility checks.
+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 a sample pea planting plan 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 → initializer-dist}/template/README.md

@@ -21,7 +21,7 @@ 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.
+The page previews a sample pea planting plan only. It does not send or store a report.
 
 ## Check This Example
 

package/{dist → initializer-dist}/template/eval/meaning.test.mjs

@@ -3,18 +3,18 @@ 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 " +
+    "Summarize the snap-pea planting-plan preview. Was a report sent or stored, and did this " +
     "operation change anything?",
   criticalFacts: [
-    "Forest Ember",
-    "Sample Range",
+    "Highland Snap",
+    "Meadow Sweet",
     "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 " +
+    "The answer identifies Highland Snap and Meadow Sweet as the two snap-pea " +
+    "matches. 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"],
+  expectedTools: ["preview-planting-plan"],
 });

package/{dist → initializer-dist}/template/package.json

@@ -1,7 +1,7 @@
 {
   "name": "emseepea-starter",
   "version": "0.0.0",
-  "private": true,
+  "description": "Create an Em See Pea server with an accessible React form.",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -13,17 +13,10 @@
     "test:llm:built": "emseepea-test eval",
     "lint": "oxlint src test eval test-support"
   },
-  "dependencies": {
-    "@emseepea/react": "0.0.2",
-    "@emseepea/server": "0.1.0",
-    "@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",
+    "@emseepea/testing": "0.2.2",
     "@types/node": "24.13.3",
     "@types/react": "19.2.18",
     "@types/react-dom": "19.2.5",
@@ -33,5 +26,13 @@
   },
   "engines": {
     "node": ">=22"
+  },
+  "private": true,
+  "dependencies": {
+    "@emseepea/react": "0.0.5",
+    "@emseepea/server": "0.2.2",
+    "@emseepea/tailwind": "0.0.2",
+    "react": "19.2.8",
+    "react-dom": "19.2.8"
   }
 }

package/initializer-dist/template/src/capabilities/tool.preview-planting-plan.ts

@@ -0,0 +1,4 @@
+import { createPreviewPlantingPlanTool } from "../ui-shared.js";
+import type { CapabilityModuleFactory } from "@emseepea/server";
+
+export default (() => createPreviewPlantingPlanTool()) satisfies CapabilityModuleFactory;

package/{dist → initializer-dist}/template/src/server.tsx

@@ -12,9 +12,9 @@ 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",
+  name: "emseepea-react-ui-server",
   version: "0.0.0",
-  instructions: "Use preview-bean-report to preview sample report content. It sends and stores nothing.",
+  instructions: "Use preview-planting-plan to preview a sample pea planting plan. It sends and stores nothing.",
   ...await discoverCapabilities(new URL("./capabilities/", import.meta.url)),
 });
 
@@ -56,7 +56,7 @@ function page(view: ElicitationView, theme: "light" | "dark", styled: boolean):
   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">' : ""}` +
+    `<title>Pea planting plan 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>` +

package/{dist → initializer-dist}/template/src/ui-shared.tsx

@@ -1,68 +1,68 @@
 import { defineElicitationView, defineTool, type ElicitationView } from "@emseepea/server";
 import { z } from "zod";
 
-const roastSchema = z.enum(["all", "light", "medium", "dark"]);
+const peaTypeSchema = z.enum(["all", "shelling", "snap"]);
 const previewInputSchema = z.strictObject({
   title: z.string().trim().min(1).max(80),
-  roast: roastSchema,
-  includeNotes: z.boolean(),
+  peaType: peaTypeSchema,
+  includeTips: 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({
+  varieties: z.array(z.strictObject({
     name: z.string(),
-    origin: z.string(),
-    roast: z.enum(["light", "medium", "dark"]),
-    notes: z.array(z.string()).optional(),
+    growthHabit: z.enum(["bush", "climbing"]),
+    peaType: z.enum(["shelling", "snap"]),
+    tips: 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"] },
+const varieties = [
+  { name: "Harbour Gem", growthHabit: "bush" as const, peaType: "shelling" as const, tips: ["compact", "harvest when pods feel full"] },
+  { name: "Highland Snap", growthHabit: "climbing" as const, peaType: "snap" as const, tips: ["provide support", "pick pods young"] },
+  { name: "Meadow Sweet", growthHabit: "bush" as const, peaType: "snap" as const, tips: ["suits containers", "keep soil moist"] },
 ];
 
-export function previewBeanReport(input: z.output<typeof previewInputSchema>) {
-  const matching = beans.filter((bean) => input.roast === "all" || bean.roast === input.roast);
+export function previewPlantingPlan(input: z.output<typeof previewInputSchema>) {
+  const matching = varieties.filter((variety) => input.peaType === "all" || variety.peaType === input.peaType);
   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),
+    varieties: matching.map(({ tips, ...variety }) => input.includeTips ? { ...variety, tips } : variety),
     notice: "No report was sent or stored." as const,
   };
 }
 
-export function createPreviewBeanReportTool() {
+export function createPreviewPlantingPlanTool() {
   return defineTool({
-    name: "preview-bean-report",
+    name: "preview-planting-plan",
     access: "public",
-    title: "Preview a Bean Report",
-    description: "Preview a sample bean report without sending, storing, or changing anything.",
+    title: "Preview a Pea Planting Plan",
+    description: "Preview a sample pea planting plan without sending, storing, or changing anything.",
     inputSchema: previewInputSchema,
     outputSchema: previewOutputSchema,
     handler(input) {
-      const data = previewBeanReport(input);
+      const data = previewPlantingPlan(input);
       return {
-        text: `${data.title} contains ${data.matchingCount} matching sample beans. ${data.notice}`,
+        text: `${data.title} contains ${data.matchingCount} matching pea varieties. ${data.notice}`,
         data,
       };
     },
   });
 }
 
-const fields = (values: { title: string; roast: z.output<typeof roastSchema>; includeNotes: boolean }, titleErrors?: string[]) => [
+const fields = (values: { title: string; peaType: z.output<typeof peaTypeSchema>; includeTips: boolean }, titleErrors?: string[]) => [
   {
     kind: "text" as const,
     id: "report-title",
     name: "title",
-    label: "Report title",
+    label: "Plan title",
     description: "Name this preview so its purpose is clear.",
     required: true,
     minLength: 1,
@@ -72,50 +72,49 @@ const fields = (values: { title: string; roast: z.output<typeof roastSchema>; in
   },
   {
     kind: "select" as const,
-    id: "roast",
-    name: "roast",
-    label: "Roast",
-    description: "Choose which sample beans the preview includes.",
+    id: "pea-type",
+    name: "peaType",
+    label: "Pea type",
+    description: "Choose which sample pea varieties the preview includes.",
     required: true,
-    placeholder: "Choose a roast",
-    value: values.roast,
+    placeholder: "Choose a pea type",
+    value: values.peaType,
     options: [
-      { value: "all", label: "All roasts" },
-      { value: "light", label: "Light" },
-      { value: "medium", label: "Medium" },
-      { value: "dark", label: "Dark" },
+      { value: "all", label: "All pea types" },
+      { value: "shelling", label: "Shelling" },
+      { value: "snap", label: "Snap" },
     ],
   },
   {
     kind: "checkbox" as const,
-    id: "include-notes",
-    name: "includeNotes",
-    label: "Include tasting notes",
-    description: "Add sample tasting notes to the preview.",
-    checked: values.includeNotes,
+    id: "include-tips",
+    name: "includeTips",
+    label: "Include growing tips",
+    description: "Add sample growing tips to the preview.",
+    checked: values.includeTips,
   },
 ];
 
 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",
+  id: "pea-planting-plan-preview",
+  heading: "Preview a pea planting plan",
+  intro: "Review a sample planting plan. This preview sends and stores nothing.",
+  legend: "Planting plan options",
   submitLabel: "Create preview",
 } as const;
-const defaults = { title: "Roast overview", roast: "all" as const, includeNotes: true };
+const defaults = { title: "Autumn pea plan", peaType: "all" as const, includeTips: 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."]),
+    fields: fields({ ...defaults, title: "" }, ["Enter a plan title."]),
     state: {
       kind: "invalid",
       focusTarget: "error-summary",
       summary: {
-        heading: "Fix the report options",
-        items: [{ fieldId: "report-title", message: "Enter a report title." }],
+        heading: "Fix the planting plan options",
+        items: [{ fieldId: "report-title", message: "Enter a plan title." }],
       },
     },
   }),
@@ -125,7 +124,7 @@ export const elicitationFixtures = {
     state: {
       kind: "busy",
       focusTarget: "status",
-      status: "Preparing a sample preview. No report is being sent or stored.",
+      status: "Preparing a sample planting-plan preview. No report is being sent or stored.",
     },
   }),
   terminal: defineElicitationView({
@@ -135,7 +134,7 @@ export const elicitationFixtures = {
       kind: "terminal",
       focusTarget: "terminal",
       heading: "Preview ready",
-      message: "Three sample beans match. No report was sent or stored.",
+      message: "Three sample pea varieties match. No report was sent or stored.",
     },
   }),
 } satisfies Readonly<Record<"ready" | "invalid" | "busy" | "terminal", ElicitationView>>;
@@ -149,27 +148,27 @@ export function fixtureForState(value: unknown): ElicitationView {
 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 peaType = peaTypeSchema.safeParse(firstString(record.peaType));
   const input = {
     title,
-    roast: roast.success ? roast.data : "all" as const,
-    includeNotes: firstString(record.includeNotes) === "true",
+    peaType: peaType.success ? peaType.data : "all" as const,
+    includeTips: firstString(record.includeTips) === "true",
   };
   if (!title) {
     return defineElicitationView({
       ...base,
-      fields: fields(input, ["Enter a report title."]),
+    fields: fields(input, ["Enter a plan title."]),
       state: {
         kind: "invalid",
         focusTarget: "error-summary",
         summary: {
-          heading: "Fix the report options",
-          items: [{ fieldId: "report-title", message: "Enter a report title." }],
+          heading: "Fix the planting plan options",
+          items: [{ fieldId: "report-title", message: "Enter a plan title." }],
         },
       },
     });
   }
-  const data = previewBeanReport(input);
+  const data = previewPlantingPlan(input);
   return defineElicitationView({
     ...base,
     fields: fields(input),
@@ -177,7 +176,7 @@ export function viewFromSubmission(value: unknown): ElicitationView {
       kind: "terminal",
       focusTarget: "terminal",
       heading: "Preview ready",
-      message: `${data.matchingCount} sample ${data.matchingCount === 1 ? "bean matches" : "beans match"}. ${data.notice}`,
+      message: `${data.matchingCount} sample pea ${data.matchingCount === 1 ? "variety matches" : "varieties match"}. ${data.notice}`,
     },
   });
 }

package/{dist → initializer-dist}/template/test/ui-shared.test.mjs

@@ -5,7 +5,7 @@ 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" });
+  const result = viewFromSubmission({ title: "Autumn peas", peaType: "snap", includeTips: "true" });
   assert.equal(result.state.kind, "terminal");
   assert.match(result.state.message, /No report was sent or stored/);
 });

package/{dist → initializer-dist}/template/test-support/browser-contract.mjs

@@ -37,7 +37,7 @@ export function testUiExample(example) {
           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.title(), "Pea planting plan 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) => ({
@@ -46,8 +46,8 @@ export function testUiExample(example) {
             }))),
             [
               { level: 1, text: example.h1 },
-              { level: 2, text: "Preview a bean report" },
-              ...(state === "invalid" ? [{ level: 3, text: "Fix the report options" }] : []),
+              { level: 2, text: "Preview a pea planting plan" },
+              ...(state === "invalid" ? [{ level: 3, text: "Fix the planting plan options" }] : []),
               ...(state === "terminal" ? [{ level: 3, text: "Preview ready" }] : []),
             ],
           );
@@ -66,29 +66,29 @@ export function testUiExample(example) {
       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");
+      await page.waitForFunction(() => document.activeElement?.id === "pea-planting-plan-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.",
+        "Plan title: Enter a plan 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",
+        "pea-planting-plan-preview--field--report-title--description pea-planting-plan-preview--field--report-title--error",
       );
 
       await page.goto(`${running.origin}/?state=busy`);
-      await page.waitForFunction(() => document.activeElement?.id === "bean-report-preview--status");
+      await page.waitForFunction(() => document.activeElement?.id === "pea-planting-plan-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 page.waitForFunction(() => document.activeElement?.id === "pea-planting-plan-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("label[for='pea-planting-plan-preview--field--report-title']").count(), 1);
       assert.equal(await page.locator("form").count(), 1);
 
       await page.goto(`${running.origin}/?state=ready`);

package/package.json

@@ -1,23 +1,46 @@
 {
   "name": "@emseepea/create-react-ui-server",
-  "version": "0.0.2",
-  "private": false,
+  "version": "0.0.4",
   "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": true, "tag": "next" },
   "type": "module",
-  "bin": { "create-react-ui-server": "./dist/create.mjs" },
-  "files": ["dist"],
+  "starterDependencies": ["@emseepea/react", "@emseepea/server", "@emseepea/tailwind", "react", "react-dom"],
   "scripts": {
-    "build": "node ../../scripts/build-initializer.mjs",
-    "prepack": "npm run build"
+    "build": "npm run build:example && npm run build:initializer",
+    "build:example": "tsc -p tsconfig.json && esbuild src/client.tsx --bundle --minify --format=esm --platform=browser --outfile=dist/client.js",
+    "build:initializer": "node ../../scripts/build-initializer.mjs",
+    "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",
+    "prepack": "npm run build:initializer"
+  },
+  "devDependencies": {
+    "@emseepea/react": "0.0.5",
+    "@emseepea/server": "0.2.2",
+    "@emseepea/tailwind": "0.0.2",
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
+    "@emseepea/example-ui-shared": "0.0.0",
+    "playwright": "1.62.1",
+    "axe-core": "4.13.0",
+    "@emseepea/testing": "0.2.2",
+    "@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" }
+  "engines": {
+    "node": ">=22"
+  },
+  "repository": { "type": "git", "url": "git+https://github.com/emseepea/emseepea.git", "directory": "examples/react-ui-server" },
+  "homepage": "https://emseepea.github.io/emseepea/examples/",
+  "bugs": "https://github.com/emseepea/emseepea/issues",
+  "publishConfig": { "access": "public", "provenance": true },
+  "bin": { "create-react-ui-server": "./initializer-dist/create.mjs" },
+  "files": ["initializer-dist"]
 }

package/dist/template/src/capabilities/tool.preview-bean-report.ts

@@ -1,4 +0,0 @@
-import { createPreviewBeanReportTool } from "../ui-shared.js";
-import type { CapabilityModuleFactory } from "@emseepea/server";
-
-export default (() => createPreviewBeanReportTool()) satisfies CapabilityModuleFactory;