From e3786c3809dc8ecbf86f13ae2507785381f13678 Mon Sep 17 00:00:00 2001
From: Mikhail Kotelnikov <mikhail.kotelnikov@gmail.com>
Date: Wed, 5 Aug 2026 19:17:22 +0200
Subject: [PATCH] feat(notes-demo): React UI, validating no-bundle React +
 Tailwind + F2/F3 in-browser
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Switches the demo UI back to React (react/react-dom served from npm, CJS→ESM on
the fly) now that no-bundle React works. Verified in a real browser: React
renders + is interactive (createRoot/hooks/state), Tailwind + @theme bg-brand,
F2 runtime @import (.note-card #c7d2fe from palette.css via the injected
<style>), F3 url() asset (logo.svg), FilesApi note store (?mem for tests).

Requires webrun-modules: resolveRelativeId project-ext (merged), JSX prod/dev
consistency, and NODE_ENV dead-code elimination.
---
 apps/notes-demo/README.md                 |  15 ++-
 apps/notes-demo/package.json              |   8 +-
 apps/notes-demo/src/app.ts                |  96 -----------------
 apps/notes-demo/src/app.tsx               | 122 ++++++++++++++++++++++
 apps/notes-demo/src/{main.ts => main.tsx} |  21 ++--
 apps/notes-demo/tsconfig.json             |   1 +
 6 files changed, 152 insertions(+), 111 deletions(-)
 delete mode 100644 apps/notes-demo/src/app.ts
 create mode 100644 apps/notes-demo/src/app.tsx
 rename apps/notes-demo/src/{main.ts => main.tsx} (72%)

diff --git a/apps/notes-demo/README.md b/apps/notes-demo/README.md
index 9ebbaaf..f02fd9f 100644
--- a/apps/notes-demo/README.md
+++ b/apps/notes-demo/README.md
@@ -4,12 +4,19 @@ A browser note-taking app served **with no bundler** — it dogfoods the
 [`@statewalker/webrun-modules-build`](../../../webrun-files/packages/webrun-modules-build)
 no-bundle pipeline end to end, and validates its Phase-3 CSS features in a real browser.
 
-`newProjectBuild({ project, cache })` scans the TS + CSS sources under `src/` and
-emits a **static `.js` tree** into `dist/` (ext-map: `main.ts` → `/~/main.js`,
+`newProjectBuild({ project, cache })` scans the TS/TSX + CSS sources under `src/`
+and emits a **static `.js` tree** into `dist/` (ext-map: `main.tsx` → `/~/main.js`,
 `styles.css` → `/~/styles.js` `<style>`-injector, npm deps → transformed files at
 the tree root). The browser loads `/~/main.js` as a plain ES module — **no bundler,
-no CDN, no import map**. The UI is plain DOM/TypeScript (no framework), so the demo
-showcases the pipeline and its CSS handling, not a UI library.
+no CDN, no import map**. The UI is **React** (`react`/`react-dom` served from npm,
+transformed CJS→ESM on the fly), so the demo also exercises no-bundle React
+end-to-end (createRoot, hooks, state).
+
+> No-bundle React needs two webrun-modules transform behaviours the CSS-only demo
+> didn't: the JSX runtime must match the globals' `NODE_ENV` (browser → production
+> `jsx`), and React's `process.env.NODE_ENV`-gated package entry must be dead-code-
+> eliminated to a **single** react instance (else react-dom's `ReactSharedInternals`
+> is undefined and it crashes at render). Both landed in webrun-modules.
 
 ## What it proves (Phase-3 features, verified in-browser)
 
diff --git a/apps/notes-demo/package.json b/apps/notes-demo/package.json
index 5e240f0..bd82bd1 100644
--- a/apps/notes-demo/package.json
+++ b/apps/notes-demo/package.json
@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "private": true,
   "type": "module",
-  "description": "Browser note-taking demo served no-bundle through @statewalker/webrun-modules-build: Tailwind (v4) styling, a plain @import CSS chain (F2 runtime) + url() asset (F3), and a swappable FilesApi store (persistent by default, in-memory via ?mem for tests).",
+  "description": "Browser React note-taking demo served no-bundle through @statewalker/webrun-modules-build: Tailwind (v4) styling, a plain @import CSS chain (F2 runtime) + url() asset (F3), React served from npm, and a swappable FilesApi store (persistent by default, in-memory via ?mem for tests).",
   "license": "MIT",
   "scripts": {
     "build": "tsx build.ts",
@@ -15,10 +15,14 @@
     "@statewalker/webrun-files": "catalog:",
     "@statewalker/webrun-files-node": "catalog:",
     "@statewalker/webrun-modules": "catalog:",
-    "@statewalker/webrun-modules-build": "catalog:"
+    "@statewalker/webrun-modules-build": "catalog:",
+    "react": "catalog:",
+    "react-dom": "catalog:"
   },
   "devDependencies": {
     "@statewalker/webrun-files-mem": "catalog:",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
     "tsx": "catalog:",
     "typescript": "catalog:",
     "vitest": "catalog:"
diff --git a/apps/notes-demo/src/app.ts b/apps/notes-demo/src/app.ts
deleted file mode 100644
index 8f43fe2..0000000
--- a/apps/notes-demo/src/app.ts
+++ /dev/null
@@ -1,96 +0,0 @@
-import type { Note, NoteStore } from "./store.js";
-
-/** Stable id for a fresh note (no crypto dependency needed). */
-const newId = () => `n-${Date.now().toString(36)}`;
-
-const h = (tag: string, cls: string, text?: string): HTMLElement => {
-  const el = document.createElement(tag);
-  el.className = cls;
-  if (text !== undefined) el.textContent = text;
-  return el;
-};
-
-/**
- * A vanilla-DOM note-taking UI (no framework — the demo showcases the no-bundle
- * webrun-modules pipeline + its CSS features, not a UI library). Tailwind utility
- * classes come from the Tailwind entry (styles.css); `.note-card` comes from the
- * plain `@import` chain (theme.css → palette.css, F2 runtime); `.logo` (a url()
- * asset, F3) comes from tokens.css.
- */
-export function mountApp(root: HTMLElement, store: NoteStore, onChange?: () => void): void {
-  let notes: Note[] = [];
-  let selected: string | null = null;
-
-  root.className = "flex h-screen bg-slate-50 text-slate-800";
-  const aside = h("aside", "w-64 shrink-0 border-r border-slate-200 bg-white flex flex-col");
-  const main = h("main", "flex-1 flex flex-col");
-  root.replaceChildren(aside, main);
-
-  async function refresh() {
-    notes = await store.listNotes();
-    renderList();
-    renderEditor();
-    onChange?.();
-  }
-
-  function renderList() {
-    const head = h("div", "flex items-center gap-2 p-4 border-b border-slate-200");
-    head.append(h("span", "logo w-6 h-6 rounded bg-brand"), h("h1", "font-semibold", "Notes"));
-    const add = h("button", "ml-auto rounded bg-brand px-2 py-1 text-sm text-white", "+ New");
-    add.onclick = async () => {
-      const note: Note = { id: newId(), title: "Untitled", body: "" };
-      await store.saveNote(note);
-      selected = note.id;
-      await refresh();
-    };
-    head.append(add);
-
-    const list = h("ul", "flex-1 overflow-y-auto p-2 flex flex-col gap-2");
-    for (const n of notes) {
-      const item = h("li", `note-card cursor-pointer rounded p-3 ${n.id === selected ? "bg-brand/10" : "bg-white hover:bg-slate-100"}`);
-      item.append(h("div", "font-medium truncate", n.title || "Untitled"));
-      item.append(h("div", "text-xs text-slate-500 truncate", n.body || "No content"));
-      item.onclick = () => {
-        selected = n.id;
-        renderList();
-        renderEditor();
-      };
-      list.append(item);
-    }
-    aside.replaceChildren(head, list);
-  }
-
-  function renderEditor() {
-    const note = notes.find((n) => n.id === selected);
-    if (!note) {
-      main.replaceChildren(h("div", "m-auto text-slate-400", "Select or create a note"));
-      return;
-    }
-    const bar = h("div", "flex items-center gap-2 p-4 border-b border-slate-200");
-    const title = h("input", "flex-1 text-lg font-semibold outline-none") as HTMLInputElement;
-    title.value = note.title;
-    const del = h("button", "rounded border border-slate-300 px-2 py-1 text-sm text-red-600", "Delete");
-    del.onclick = async () => {
-      await store.deleteNote(note.id);
-      selected = null;
-      await refresh();
-    };
-    bar.append(title, del);
-
-    const body = h("textarea", "flex-1 resize-none p-4 outline-none") as HTMLTextAreaElement;
-    body.value = note.body;
-    const save = async () => {
-      note.title = title.value;
-      note.body = body.value;
-      await store.saveNote(note);
-      renderList();
-      onChange?.();
-    };
-    title.onblur = save;
-    body.onblur = save;
-
-    main.replaceChildren(bar, body);
-  }
-
-  void refresh();
-}
diff --git a/apps/notes-demo/src/app.tsx b/apps/notes-demo/src/app.tsx
new file mode 100644
index 0000000..be8cab1
--- /dev/null
+++ b/apps/notes-demo/src/app.tsx
@@ -0,0 +1,122 @@
+import { useCallback, useEffect, useState } from "react";
+import type { NoteStore, Note } from "./store.js";
+
+/** Stable id for a fresh note (no crypto dependency needed). */
+const newId = () => `n-${Date.now().toString(36)}`;
+
+export function App({ store, onChange }: { store: NoteStore; onChange?: () => void }) {
+  const [notes, setNotes] = useState<Note[]>([]);
+  const [id, setId] = useState<string | null>(null);
+  const [title, setTitle] = useState("");
+  const [body, setBody] = useState("");
+
+  const reload = useCallback(async () => {
+    setNotes(await store.listNotes());
+  }, [store]);
+
+  useEffect(() => {
+    void reload();
+  }, [reload]);
+
+  const edit = (note: Note) => {
+    setId(note.id);
+    setTitle(note.title);
+    setBody(note.body);
+  };
+
+  const blank = () => {
+    setId(null);
+    setTitle("");
+    setBody("");
+  };
+
+  const save = async () => {
+    const note: Note = { id: id ?? newId(), title: title.trim() || "Untitled", body };
+    await store.saveNote(note);
+    blank();
+    await reload();
+    onChange?.();
+  };
+
+  const remove = async (target: string) => {
+    await store.deleteNote(target);
+    if (target === id) blank();
+    await reload();
+    onChange?.();
+  };
+
+  return (
+    <div className="flex h-screen gap-4 p-4 text-slate-800">
+      <aside className="flex w-64 flex-col gap-2">
+        <header className="flex items-center gap-2">
+          <span className="logo" aria-hidden="true" />
+          <h1 className="text-lg font-semibold text-brand">Notes</h1>
+        </header>
+        <button
+          type="button"
+          onClick={blank}
+          className="rounded bg-brand px-3 py-2 text-left text-sm font-medium text-white hover:opacity-90"
+        >
+          + New note
+        </button>
+        <ul className="flex flex-col gap-1 overflow-y-auto">
+          {notes.map((note) => (
+            <li key={note.id} className="note-card flex items-center gap-2 rounded">
+              <button
+                type="button"
+                onClick={() => edit(note)}
+                className={`flex-1 truncate rounded px-2 py-1 text-left text-sm hover:bg-slate-100 ${
+                  note.id === id ? "bg-slate-100 font-medium" : ""
+                }`}
+              >
+                {note.title}
+              </button>
+              <button
+                type="button"
+                onClick={() => remove(note.id)}
+                aria-label={`Delete ${note.title}`}
+                className="rounded px-2 py-1 text-sm text-slate-400 hover:text-red-600"
+              >
+                ×
+              </button>
+            </li>
+          ))}
+          {notes.length === 0 && (
+            <li className="px-2 py-1 text-sm text-slate-400">No notes yet.</li>
+          )}
+        </ul>
+      </aside>
+
+      <section className="flex flex-1 flex-col gap-3 rounded border border-slate-200 p-4">
+        <input
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+          placeholder="Title"
+          className="rounded border border-slate-200 px-3 py-2 text-lg font-medium outline-none focus:border-brand"
+        />
+        <textarea
+          value={body}
+          onChange={(e) => setBody(e.target.value)}
+          placeholder="Write something…"
+          className="flex-1 resize-none rounded border border-slate-200 p-3 outline-none focus:border-brand"
+        />
+        <div className="flex gap-2">
+          <button
+            type="button"
+            onClick={save}
+            className="rounded bg-brand px-4 py-2 text-sm font-medium text-white hover:opacity-90"
+          >
+            {id ? "Update" : "Save"}
+          </button>
+          <button
+            type="button"
+            onClick={blank}
+            className="rounded border border-slate-200 px-4 py-2 text-sm hover:bg-slate-100"
+          >
+            Clear
+          </button>
+        </div>
+      </section>
+    </div>
+  );
+}
diff --git a/apps/notes-demo/src/main.ts b/apps/notes-demo/src/main.tsx
similarity index 72%
rename from apps/notes-demo/src/main.ts
rename to apps/notes-demo/src/main.tsx
index 6540b98..dac0aaf 100644
--- a/apps/notes-demo/src/main.ts
+++ b/apps/notes-demo/src/main.tsx
@@ -1,15 +1,16 @@
+import { createRoot } from "react-dom/client";
 import type { FilesApi } from "@statewalker/webrun-files";
 import { readText, writeText } from "@statewalker/webrun-files";
 import { MemFilesApi } from "@statewalker/webrun-files-mem";
-import { mountApp } from "./app.js";
+import { App } from "./app.js";
 import { makeStore } from "./store.js";
 // The Tailwind entry (/~/styles.js <style> injector). Its `@import "./tokens.css"`
 // is INLINED by the Tailwind transform (D1 source-honoring), and the inlined
 // `url("./logo.svg")` (F3) resolves against the document base — see <base href="/~/">.
 import "./styles.css";
 // A PLAIN CSS @import chain (theme.css → @import "./palette.css"). A plain @import
-// is KEPT in the injector, so this is the case that exercises F2 at RUNTIME: the
-// injected `@import "./palette.css"` resolves against the document base to the real
+// is KEPT in the injector, so this exercises F2 at RUNTIME: the injected
+// `@import "./palette.css"` resolves against the document base to the real
 // /~/palette.css the build emits.
 import "./theme.css";
 
@@ -17,14 +18,16 @@ const KEY = "notes-demo/snapshot";
 
 /**
  * Pick the store's FilesApi from the URL:
- *   default → a MemFilesApi hydrated from (and snapshotted back to) localStorage —
- *             a real, swappable persistent store using only the mem impl.
- *   ?mem    → a fresh in-memory MemFilesApi (no persistence) so the app is
- *             auto-testable from a clean slate.
+ *   default   → a MemFilesApi hydrated from (and snapshotted back to) localStorage
+ *               — a real, swappable persistent store using only the mem impl.
+ *   ?mem      → a fresh in-memory MemFilesApi (no persistence) so the app is
+ *               auto-testable from a clean slate.
  * Any other FilesApi (BrowserFilesApi/OPFS, NodeFilesApi) drops in unchanged.
  */
 async function pickFiles(): Promise<{ files: FilesApi; onChange?: () => void }> {
-  if (new URLSearchParams(location.search).has("mem")) return { files: new MemFilesApi() };
+  if (new URLSearchParams(location.search).has("mem")) {
+    return { files: new MemFilesApi() };
+  }
   const files = new MemFilesApi();
   await hydrate(files);
   return { files, onChange: () => void snapshot(files) };
@@ -51,4 +54,4 @@ async function snapshot(files: FilesApi): Promise<void> {
 const root = document.getElementById("root");
 if (!root) throw new Error("missing #root");
 const { files, onChange } = await pickFiles();
-mountApp(root, makeStore(files), onChange);
+createRoot(root).render(<App store={makeStore(files)} onChange={onChange} />);
diff --git a/apps/notes-demo/tsconfig.json b/apps/notes-demo/tsconfig.json
index 57aa5c9..633dfee 100644
--- a/apps/notes-demo/tsconfig.json
+++ b/apps/notes-demo/tsconfig.json
@@ -5,6 +5,7 @@
     "module": "ESNext",
     "moduleResolution": "Bundler",
     "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
     "strict": true,
     "skipLibCheck": true,
     "verbatimModuleSyntax": true,