@mh-gg/templates 0.1.1-alpha.20260708T105530106Z

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Matterhorn contributors
+
+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/README.md

@@ -0,0 +1,5 @@
+# @mh-gg/templates
+
+Published Matterhorn app templates consumed by `@mh-gg/cli`.
+
+The package is data-only: `matterhorn create` and `create-matterhorn` own the command flow, while this package owns template files.

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@mh-gg/templates",
+  "version": "0.1.1-alpha.20260708T105530106Z",
+  "description": "Matterhorn app templates used by the Matterhorn CLI create flow.",
+  "type": "commonjs",
+  "exports": {
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "LICENSE",
+    "templates/minimal/_gitignore",
+    "templates/minimal/package.json",
+    "templates/minimal/README.md",
+    "templates/minimal/scripts",
+    "templates/minimal/src",
+    "templates/minimal/test",
+    "templates/react/_gitignore",
+    "templates/react/app.cjs",
+    "templates/react/index.html",
+    "templates/react/package.json",
+    "templates/react/README.md",
+    "templates/react/scripts",
+    "templates/react/src",
+    "templates/react/test",
+    "templates/react/types",
+    "templates/react/tsconfig.json",
+    "templates/react/vite.config.js",
+    "README.md",
+    "package.json"
+  ],
+  "license": "MIT"
+}

package/templates/minimal/README.md

@@ -0,0 +1,11 @@
+# __APP_NAME__
+
+A Matterhorn app scaffolded with `create-matterhorn`.
+
+```bash
+npm install
+npm test
+npm run dev
+```
+
+The app definition in `src/app.js` uses only the public `matterhorn-sdk` API. Tests use `matterhorn-sdk/testing` so you can iterate without starting a relay or browser host.

package/templates/minimal/_gitignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+.env
+.DS_Store

package/templates/minimal/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "__APP_NAME__",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "matterhorn dev ./src/app.js __APP_NAME__",
+    "build": "node scripts/build.js",
+    "typecheck": "node scripts/typecheck.js",
+    "test": "node --test test/*.test.js"
+  },
+  "dependencies": {
+    "@mh-gg/cli": "__CLI_SPECIFIER__",
+    "matterhorn-sdk": "__SDK_SPECIFIER__"
+  },
+  "engines": {
+    "node": ">=22.12"
+  }
+}

package/templates/minimal/scripts/build.js

@@ -0,0 +1,4 @@
+import app from "../src/app.js";
+
+if (!app || typeof app.toMatterhornBundle !== "function") throw new Error("Matterhorn app export is invalid.");
+console.log(`Built ${app.id}`);

package/templates/minimal/scripts/typecheck.js

@@ -0,0 +1,5 @@
+import app from "../src/app.js";
+
+const composition = app.toJSON();
+if (!Array.isArray(composition.actions) || composition.actions.length === 0) throw new Error("Matterhorn app actions are invalid.");
+console.log("Typecheck placeholder passed. Add TypeScript when your app needs static types.");

package/templates/minimal/src/app.js

@@ -0,0 +1,143 @@
+import { action, defineApp, defineModel, p, query } from "matterhorn-sdk";
+
+const model = defineModel({
+  state: {
+    initial: {
+      todos: {},
+      activity: {}
+    }
+  }
+});
+
+const { todos, activity } = model.collections;
+
+const app = defineApp({
+  id: "com.example.__APP_NAME__",
+  name: "__APP_NAME__",
+  model: model.withOperations({
+    "todo.add": action({
+      authorize: { roles: ["member"] },
+      payload: {
+        text: p.string({ min: 1, max: 300 })
+      }
+    }, ({ ref, fx }) => ({
+      effects: [
+        fx.create(todos, {
+          id: ref.newId("todo"),
+          fields: {
+            text: ref.payload("text"),
+            done: false,
+            authorId: ref.actor("memberId"),
+            createdAt: ref.now(),
+            completedAt: null,
+            archivedAt: null
+          }
+        }),
+        fx.create(activity, {
+          id: ref.newId("activity"),
+          fields: {
+            type: "created",
+            todoText: ref.payload("text"),
+            todoId: null,
+            actorId: ref.actor("memberId"),
+            createdAt: ref.now()
+          }
+        })
+      ]
+    })),
+    "todo.complete": action({
+      authorize: { roles: ["member"] },
+      payload: {
+        id: p.string()
+      }
+    }, ({ ref, fx }) => ({
+      effects: [
+        fx.update(todos, {
+          id: ref.payload("id"),
+          set: {
+            done: true,
+            completedAt: ref.now()
+          }
+        }),
+        fx.create(activity, {
+          id: ref.newId("activity"),
+          fields: {
+            type: "completed",
+            todoText: "",
+            todoId: ref.payload("id"),
+            actorId: ref.actor("memberId"),
+            createdAt: ref.now()
+          }
+        })
+      ]
+    })),
+    "todo.reopen": action({
+      authorize: { roles: ["member"] },
+      payload: {
+        id: p.string()
+      }
+    }, ({ ref, fx }) => ({
+      effects: [
+        fx.update(todos, {
+          id: ref.payload("id"),
+          set: {
+            done: false,
+            completedAt: null
+          }
+        }),
+        fx.create(activity, {
+          id: ref.newId("activity"),
+          fields: {
+            type: "reopened",
+            todoText: "",
+            todoId: ref.payload("id"),
+            actorId: ref.actor("memberId"),
+            createdAt: ref.now()
+          }
+        })
+      ]
+    })),
+    "todo.archive": action({
+      authorize: { roles: ["member"] },
+      payload: {
+        id: p.string()
+      }
+    }, ({ ref, fx }) => ({
+      effects: [
+        fx.update(todos, {
+          id: ref.payload("id"),
+          set: {
+            archivedAt: ref.now()
+          }
+        }),
+        fx.create(activity, {
+          id: ref.newId("activity"),
+          fields: {
+            type: "deleted",
+            todoText: "",
+            todoId: ref.payload("id"),
+            actorId: ref.actor("memberId"),
+            createdAt: ref.now()
+          }
+        })
+      ]
+    }))
+  }),
+  actions: {
+    addTodo: { plugin: "primary", type: "todo.add" },
+    completeTodo: { plugin: "primary", type: "todo.complete" },
+    reopenTodo: { plugin: "primary", type: "todo.reopen" },
+    deleteTodo: { plugin: "primary", type: "todo.archive" }
+  },
+  queries: {
+    todos: query.collection(todos),
+    activity: query.collection(activity)
+  }
+});
+
+export default app;
+
+if (import.meta.url === `file://${process.argv[1]}`) {
+  console.log(`${app.toJSON().app.name} (${app.toJSON().app.id}) is ready.`);
+  console.log("Run npm test to exercise it with matterhorn-sdk/testing.");
+}

package/templates/minimal/test/app.test.js

@@ -0,0 +1,37 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { createTestRoom, testActor } from "matterhorn-sdk/testing";
+import app from "../src/app.js";
+
+test("shares todo lifecycle and ledger entries", async () => {
+  const room = createTestRoom(app, { now: () => 1000 });
+  const alice = testActor("alice");
+  const guest = testActor("guest", { role: "none" });
+
+  await assert.rejects(
+    () => room.as(guest).actions.addTodo({ text: "Sneak in" }),
+    /requires member role/
+  );
+
+  await room.as(alice).actions.addTodo({ text: "Ship Matterhorn" });
+  const [todo] = await room.queries.todos();
+  assert.equal(todo.text, "Ship Matterhorn");
+  assert.equal(todo.authorId, "alice");
+  assert.equal(todo.completedAt, null);
+
+  await room.as(alice).actions.completeTodo({ id: todo.id });
+  const [updated] = await room.queries.todos();
+  assert.equal(updated.done, true);
+  assert.equal(updated.completedAt, 1000);
+
+  await room.as(alice).actions.reopenTodo({ id: todo.id });
+  const [reopened] = await room.queries.todos();
+  assert.equal(reopened.done, false);
+  assert.equal(reopened.completedAt, null);
+
+  await room.as(alice).actions.deleteTodo({ id: todo.id });
+  assert.deepEqual(await room.queries.todos(), []);
+
+  const activity = await room.queries.activity();
+  assert.deepEqual(activity.map((item) => item.type), ["created", "completed", "reopened", "deleted"]);
+});

package/templates/react/README.md

@@ -0,0 +1,11 @@
+# __APP_NAME__
+
+A React Matterhorn app scaffolded with `create-matterhorn`.
+
+```bash
+npm run dev
+```
+
+The dev script runs `matterhorn dev` through the local project dependency. It performs the local preflight, installs missing project dependencies when needed, emits generated Matterhorn artifacts, runs app diagnostics, starts the Matterhorn runtime, and serves the React frontend through the real Matterhorn client path.
+
+The source-of-truth app definition is `app.cjs`. The React shell in `src/main.tsx` uses `matterhorn-sdk/react` with generated app types from `types/matterhorn.types.d.ts`. Fast app-author tests can still use the in-memory harness in `test/app.test.js`.

package/templates/react/_gitignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+.env
+.DS_Store

package/templates/react/app.cjs

@@ -0,0 +1,169 @@
+const { action, defineApp, defineModel, p, query } = require("matterhorn-sdk");
+const path = require("node:path");
+
+const packageRoot = __dirname;
+const viteCommand = path.join(packageRoot, "node_modules", ".bin", process.platform === "win32" ? "vite.cmd" : "vite");
+
+const model = defineModel({
+  state: {
+    initial: {
+      todos: {},
+      activity: {}
+    }
+  }
+});
+
+const { todos, activity } = model.collections;
+
+const app = defineApp({
+  id: "com.example.__APP_NAME__",
+  name: "__APP_NAME__",
+  version: "0.1.0",
+  namespace: "TodoApp",
+  pluginId: "com.example.__APP_NAME__.plugin",
+  slug: "__APP_NAME__",
+  packageName: "__APP_NAME__",
+  packageRoot,
+  frontend: {
+    root: packageRoot,
+    port: 42737,
+    devEntry: "src/main.tsx",
+    builtEntry: "matterhorn-__APP_NAME__.js",
+    dist: "dist",
+    locations: [{ type: "local-path", ref: ".", label: "__APP_NAME__ frontend" }],
+    dev: {
+      command: viteCommand,
+      args: ["--host", "127.0.0.1", "--port", "${bundlePort}", "--strictPort"]
+    },
+    build: {
+      command: viteCommand,
+      args: ["build"]
+    }
+  },
+  model: model.withOperations({
+    "todo.add": action({
+      authorize: { roles: ["member"] },
+      payload: {
+        text: p.string({ min: 1, max: 300 })
+      }
+    }, ({ ref, fx }) => ({
+      effects: [
+        fx.create(todos, {
+          id: ref.newId("todo"),
+          fields: {
+            text: ref.payload("text"),
+            done: false,
+            authorId: ref.actor("memberId"),
+            createdAt: ref.now(),
+            completedAt: null,
+            archivedAt: null
+          }
+        }),
+        fx.create(activity, {
+          id: ref.newId("activity"),
+          fields: {
+            type: "created",
+            todoText: ref.payload("text"),
+            todoId: null,
+            actorId: ref.actor("memberId"),
+            createdAt: ref.now()
+          }
+        })
+      ]
+    })),
+    "todo.complete": action({
+      authorize: { roles: ["member"] },
+      payload: {
+        id: p.string()
+      }
+    }, ({ ref, fx }) => ({
+      effects: [
+        fx.update(todos, {
+          id: ref.payload("id"),
+          set: {
+            done: true,
+            completedAt: ref.now()
+          }
+        }),
+        fx.create(activity, {
+          id: ref.newId("activity"),
+          fields: {
+            type: "completed",
+            todoText: "",
+            todoId: ref.payload("id"),
+            actorId: ref.actor("memberId"),
+            createdAt: ref.now()
+          }
+        })
+      ]
+    })),
+    "todo.reopen": action({
+      authorize: { roles: ["member"] },
+      payload: {
+        id: p.string()
+      }
+    }, ({ ref, fx }) => ({
+      effects: [
+        fx.update(todos, {
+          id: ref.payload("id"),
+          set: {
+            done: false,
+            completedAt: null
+          }
+        }),
+        fx.create(activity, {
+          id: ref.newId("activity"),
+          fields: {
+            type: "reopened",
+            todoText: "",
+            todoId: ref.payload("id"),
+            actorId: ref.actor("memberId"),
+            createdAt: ref.now()
+          }
+        })
+      ]
+    })),
+    "todo.archive": action({
+      authorize: { roles: ["member"] },
+      payload: {
+        id: p.string()
+      }
+    }, ({ ref, fx }) => ({
+      effects: [
+        fx.update(todos, {
+          id: ref.payload("id"),
+          set: {
+            archivedAt: ref.now()
+          }
+        }),
+        fx.create(activity, {
+          id: ref.newId("activity"),
+          fields: {
+            type: "deleted",
+            todoText: "",
+            todoId: ref.payload("id"),
+            actorId: ref.actor("memberId"),
+            createdAt: ref.now()
+          }
+        })
+      ]
+    }))
+  }),
+  actions: {
+    addTodo: { plugin: "primary", type: "todo.add" },
+    completeTodo: { plugin: "primary", type: "todo.complete" },
+    reopenTodo: { plugin: "primary", type: "todo.reopen" },
+    deleteTodo: { plugin: "primary", type: "todo.archive" }
+  },
+  queries: {
+    todos: query.collection(todos),
+    activity: query.collection(activity)
+  }
+});
+
+module.exports = app;
+
+if (require.main === module) {
+  console.log(`${app.name} (${app.id}) is ready.`);
+  console.log("Run your package manager's dev script to start the Matterhorn runtime and frontend.");
+}

package/templates/react/index.html

@@ -0,0 +1,5 @@
+<!doctype html>
+<html lang="en">
+  <head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link rel="stylesheet" href="/src/styles.css" /><title>__APP_NAME__</title></head>
+  <body><div id="root"></div><script type="module" src="/src/main.tsx"></script></body>
+</html>

package/templates/react/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "__APP_NAME__",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "matterhorn dev ./app.cjs __APP_NAME__",
+    "dev:frontend": "vite --host 127.0.0.1",
+    "build:frontend": "vite build",
+    "emit": "matterhorn app emit ./app.cjs --types types/matterhorn.types.d.ts",
+    "doctor": "matterhorn app doctor ./app.cjs",
+    "build": "matterhorn app emit ./app.cjs --types types/matterhorn.types.d.ts && vite build && node scripts/build.js",
+    "typecheck": "tsc --noEmit && node scripts/typecheck.js",
+    "test": "node --test test/*.test.js"
+  },
+  "dependencies": {
+    "@mh-gg/cli": "__CLI_SPECIFIER__",
+    "matterhorn-sdk": "__SDK_SPECIFIER__",
+    "@vitejs/plugin-react": "^6.0.2",
+    "vite": "^8.0.16",
+    "typescript": "^5.6.3",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7"
+  },
+  "engines": {
+    "node": ">=22.12"
+  },
+  "matterhorn-sdk": {
+    "app": "./app.cjs"
+  }
+}

package/templates/react/scripts/build.js

@@ -0,0 +1,4 @@
+import app from "../app.cjs";
+
+if (!app || typeof app.toMatterhornBundle !== "function") throw new Error("Matterhorn app export is invalid.");
+console.log(`Built ${app.id}`);

package/templates/react/scripts/typecheck.js

@@ -0,0 +1,6 @@
+import app from "../app.cjs";
+
+const composition = app.toJSON();
+if (!Array.isArray(composition.actions) || composition.actions.length === 0) throw new Error("Matterhorn app actions are invalid.");
+if (!Array.isArray(composition.views) || !composition.views.some((view) => view.name === "todos")) throw new Error("Matterhorn app todos query is invalid.");
+console.log("Typecheck placeholder passed. Add TypeScript when your app needs static types.");

package/templates/react/src/main.tsx

@@ -0,0 +1,190 @@
+import React, { useMemo, useState } from "react";
+import { createRoot } from "react-dom/client";
+import { useRoom, useRoomQuery } from "matterhorn-sdk/react";
+import type { MatterhornRoom } from "matterhorn-sdk/client";
+import type { TodoApp } from "../types/matterhorn.types";
+
+const appName = "__APP_NAME__";
+const EMPTY_TODOS: TodoApp.Todo[] = [];
+const EMPTY_ACTIVITY: TodoApp.Activity[] = [];
+
+function displayTime(value?: number | null) {
+  if (!value) return "Not yet";
+  return new Intl.DateTimeFormat(undefined, {
+    hour: "numeric",
+    minute: "2-digit",
+    month: "short",
+    day: "numeric"
+  }).format(new Date(value));
+}
+
+function activityLabel(item: TodoApp.Activity, todosById: Map<string, TodoApp.Todo>) {
+  const todo = item.todoId ? todosById.get(item.todoId) : undefined;
+  const name = item.todoText || todo?.text || "a task";
+  return { name, verb: item.type };
+}
+
+function useTodos(room: MatterhornRoom<TodoApp>) {
+  const todos = useRoomQuery(room, "todos", EMPTY_TODOS);
+
+  return useMemo(() => {
+    const todosById = new Map(todos.map((todo) => [todo.id, todo]));
+    const openTodos = todos.filter((todo) => !todo.done);
+    const doneTodos = todos.filter((todo) => todo.done);
+    const completionRate = todos.length ? Math.round((doneTodos.length / todos.length) * 100) : 0;
+
+    return { todosById, openTodos, doneTodos, completionRate };
+  }, [todos]);
+}
+
+function useActivity(room: MatterhornRoom<TodoApp>) {
+  const activity = useRoomQuery(room, "activity", EMPTY_ACTIVITY);
+
+  return useMemo(() => ({
+    recentActivity: [...activity].sort((a, b) => (b.createdAt || 0) - (a.createdAt || 0)).slice(0, 8)
+  }), [activity]);
+}
+
+function TodoRow({
+  todo,
+  author,
+  onToggle,
+  onDelete
+}: {
+  todo: TodoApp.Todo;
+  author: string;
+  onToggle: (todo: TodoApp.Todo) => void | Promise<void>;
+  onDelete: (todo: TodoApp.Todo) => void | Promise<void>;
+}) {
+  return <li className={todo.done ? "todo-row todo-row-done" : "todo-row"}>
+    <label className="todo-check">
+      <input type="checkbox" checked={Boolean(todo.done)} onChange={() => void onToggle(todo)} />
+    </label>
+    <div className="todo-main">
+      <strong>{todo.text}</strong>
+      <small>
+        Added by {author} at {displayTime(todo.createdAt)}
+        {todo.completedAt ? `, completed ${displayTime(todo.completedAt)}` : ""}
+      </small>
+    </div>
+    <button className="icon-button" type="button" onClick={() => void onDelete(todo)} aria-label={`Delete ${todo.text}`}>
+      Delete
+    </button>
+  </li>;
+}
+
+function App() {
+  const room = useRoom<TodoApp>();
+  const [text, setText] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [isAdding, setIsAdding] = useState(false);
+  const { todosById, openTodos, doneTodos, completionRate } = useTodos(room);
+  const { recentActivity } = useActivity(room);
+  const actorLabel = room.displayName();
+
+  async function addTodo(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    const nextText = text.trim();
+    if (!nextText) return;
+
+    setIsAdding(true);
+    setError(null);
+    try {
+      await room.actions.addTodo({ text: nextText });
+      setText("");
+    } catch {
+      setError("Could not add the task. Try again.");
+    } finally {
+      setIsAdding(false);
+    }
+  }
+
+  async function toggleTodo(todo: TodoApp.Todo) {
+    if (todo.done) await room.actions.reopenTodo({ id: todo.id });
+    else await room.actions.completeTodo({ id: todo.id });
+  }
+
+  async function deleteTodo(todo: TodoApp.Todo) {
+    await room.actions.deleteTodo({ id: todo.id });
+  }
+
+  return <main className="app-shell">
+    <div className="app-wrap">
+      <section className="workspace-panel">
+        <header className="workspace-header">
+          <div>
+            <p className="eyebrow">Shared Matterhorn Room</p>
+            <h1>{appName}</h1>
+          </div>
+          <div className="actor-pill"><span></span>{actorLabel}</div>
+        </header>
+
+        <form className="composer" onSubmit={addTodo}>
+          <input value={text} onChange={(event) => setText(event.target.value)} placeholder="Add a task for the room" />
+          <button type="submit" disabled={isAdding}>{isAdding ? "Adding..." : "Add task"}</button>
+        </form>
+        {error ? <p role="alert" className="error-message">{error}</p> : null}
+
+        <div className="stats-strip" aria-label="Todo summary">
+          <div><strong>{openTodos.length}</strong><span>Open</span></div>
+          <div><strong>{doneTodos.length}</strong><span>Done</span></div>
+          <div><strong>{completionRate}%</strong><span>Complete</span></div>
+        </div>
+
+        <section className="task-section">
+          <div className="section-heading">
+            <h2>Open tasks</h2>
+            <span>{openTodos.length}</span>
+          </div>
+          {openTodos.length === 0
+            ? <p className="empty-state">Nothing open. Add a task or reopen one from Done.</p>
+            : <ul className="todo-list">{openTodos.map((todo) => (
+              <TodoRow
+                key={todo.id}
+                todo={todo}
+                author={room.displayName(todo.authorId)}
+                onToggle={toggleTodo}
+                onDelete={deleteTodo}
+              />
+            ))}</ul>}
+        </section>
+
+        <section className="task-section">
+          <div className="section-heading">
+            <h2>Done</h2>
+            <span>{doneTodos.length}</span>
+          </div>
+          {doneTodos.length === 0
+            ? <p className="empty-state">Completed tasks land here with timestamps.</p>
+            : <ul className="todo-list">{doneTodos.map((todo) => (
+              <TodoRow
+                key={todo.id}
+                todo={todo}
+                author={room.displayName(todo.authorId)}
+                onToggle={toggleTodo}
+                onDelete={deleteTodo}
+              />
+            ))}</ul>}
+        </section>
+      </section>
+
+      <aside className="ledger-panel">
+        <div className="ledger-heading">
+          <h2>Room ledger</h2>
+          <span>{recentActivity.length}</span>
+        </div>
+        {recentActivity.length === 0
+          ? <p className="empty-state">Every shared change will appear here.</p>
+          : <ol className="ledger-list">{recentActivity.map((item) => {
+            const label = activityLabel(item, todosById);
+            return <li key={item.id}>
+              <p><span>{room.displayName(item.actorId)}</span> {label.verb} <q>{label.name}</q></p>
+              <time>{displayTime(item.createdAt)}</time>
+            </li>;
+          })}</ol>}
+      </aside>
+    </div>
+  </main>;
+}
+
+createRoot(document.getElementById("root")!).render(<App />);

package/templates/react/src/styles.css

@@ -0,0 +1,472 @@
+@import url("https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600;6..72,700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");
+
+:root {
+  --paper: #f3efe6;
+  --paper2: #ece6d9;
+  --sheet: #fbf9f4;
+  --ink: #2b2722;
+  --ink2: #6f685d;
+  --ink3: #9a9183;
+  --line: #e0d8c8;
+  --line2: #d4cab7;
+  --accent: #9c3b2e;
+  --accent-soft: #f0e3df;
+  --seal: #4f6a52;
+  --seal-soft: #e6ede4;
+  color: var(--ink);
+  background: var(--paper);
+  font-family: "Newsreader", ui-serif, Georgia, serif;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  min-height: 100vh;
+  background: var(--paper);
+}
+
+button,
+input {
+  font: inherit;
+}
+
+button {
+  cursor: pointer;
+}
+
+button:disabled {
+  cursor: not-allowed;
+  opacity: 0.65;
+}
+
+h1,
+h2,
+p {
+  margin: 0;
+}
+
+.app-shell {
+  min-height: 100vh;
+  padding: 38px 34px 60px;
+  background-color: var(--paper);
+  background-image:
+    linear-gradient(180deg, #f6f2ea, var(--paper) 220px),
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
+}
+
+.app-wrap {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 332px;
+  gap: 26px;
+  align-items: start;
+  max-width: 1180px;
+  margin: 0 auto;
+}
+
+.workspace-panel,
+.ledger-panel {
+  position: relative;
+  background: var(--sheet);
+  border: 1px solid var(--line);
+  border-radius: 3px;
+  box-shadow:
+    0 1px 0 #fefbf5 inset,
+    0 18px 40px -22px rgba(43, 39, 34, 0.32),
+    0 2px 6px -3px rgba(43, 39, 34, 0.18);
+}
+
+.workspace-panel::before,
+.ledger-panel::before {
+  content: "";
+  position: absolute;
+  inset: 5px;
+  border: 1px solid var(--line);
+  border-radius: 2px;
+  pointer-events: none;
+  opacity: 0.55;
+}
+
+.workspace-panel {
+  padding: 30px 32px 34px;
+}
+
+.ledger-panel {
+  align-self: start;
+  padding: 24px 24px 26px;
+}
+
+.workspace-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 18px;
+  padding-bottom: 18px;
+  border-bottom: 1px solid var(--line);
+}
+
+.eyebrow {
+  margin: 0 0 7px;
+  color: var(--accent);
+  font-family: "IBM Plex Mono", ui-monospace, monospace;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+}
+
+h1 {
+  font-size: 40px;
+  font-weight: 600;
+  letter-spacing: 0;
+  line-height: 1;
+}
+
+h2 {
+  font-size: 16px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+}
+
+.actor-pill {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 7px;
+  max-width: 260px;
+  overflow: hidden;
+  border: 1px solid #c7d6c9;
+  border-radius: 2px;
+  padding: 7px 12px;
+  color: var(--seal);
+  background: var(--seal-soft);
+  font-family: "IBM Plex Mono", ui-monospace, monospace;
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.actor-pill span {
+  width: 6px;
+  height: 6px;
+  flex: 0 0 auto;
+  border-radius: 50%;
+  background: var(--seal);
+}
+
+.composer {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 12px;
+  margin-top: 22px;
+}
+
+.composer input {
+  min-width: 0;
+  border: none;
+  border-bottom: 1.5px solid var(--line2);
+  padding: 11px 4px;
+  color: var(--ink);
+  background: transparent;
+  font-size: 17px;
+  transition: border-color 0.2s;
+}
+
+.composer input::placeholder {
+  color: var(--ink3);
+  font-style: italic;
+}
+
+.composer input:focus {
+  border-color: var(--accent);
+  outline: none;
+}
+
+.composer button {
+  border: 1px solid var(--ink);
+  border-radius: 2px;
+  padding: 0 20px;
+  color: var(--sheet);
+  background: var(--ink);
+  font-family: "IBM Plex Mono", ui-monospace, monospace;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  transition:
+    background 0.15s,
+    transform 0.05s;
+}
+
+.composer button:hover {
+  background: #3c372f;
+}
+
+.composer button:active {
+  transform: translateY(1px);
+}
+
+.error-message {
+  margin-top: 12px;
+  color: var(--accent);
+  font-family: "IBM Plex Mono", ui-monospace, monospace;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.stats-strip {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  margin: 26px 0 6px;
+  border-top: 1px solid var(--line);
+  border-bottom: 1px solid var(--line);
+}
+
+.stats-strip div {
+  padding: 16px 4px 16px 18px;
+}
+
+.stats-strip div + div {
+  border-left: 1px solid var(--line);
+}
+
+.stats-strip strong {
+  display: block;
+  font-size: 30px;
+  font-weight: 600;
+  letter-spacing: 0;
+  line-height: 1;
+}
+
+.stats-strip span,
+.section-heading span,
+.todo-main small,
+.ledger-list time,
+.empty-state {
+  color: var(--ink2);
+  font-family: "IBM Plex Mono", ui-monospace, monospace;
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+}
+
+.stats-strip span,
+.section-heading span {
+  font-size: 10px;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+}
+
+.task-section {
+  margin-top: 28px;
+}
+
+.section-heading,
+.ledger-heading {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 12px;
+}
+
+.ledger-heading {
+  padding-bottom: 14px;
+  border-bottom: 1px solid var(--line);
+}
+
+.ledger-heading h2 {
+  font-size: 17px;
+}
+
+.todo-list,
+.ledger-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.todo-row {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 16px;
+  padding: 15px 4px;
+  border-top: 1px solid var(--line);
+}
+
+.todo-row:last-child {
+  border-bottom: 1px solid var(--line);
+}
+
+.todo-check {
+  flex: 0 0 auto;
+  cursor: pointer;
+}
+
+.todo-check input {
+  width: 18px;
+  height: 18px;
+  margin: 0;
+  cursor: pointer;
+}
+
+.todo-main {
+  min-width: 0;
+}
+
+.todo-main strong {
+  display: block;
+  overflow-wrap: anywhere;
+  font-size: 18px;
+  font-weight: 600;
+  letter-spacing: 0;
+}
+
+.todo-main small {
+  display: block;
+  margin-top: 3px;
+  overflow-wrap: anywhere;
+  color: var(--ink2);
+}
+
+.todo-row-done {
+  animation: slideIntoDone 0.42s cubic-bezier(0.22, 0.61, 0.36, 1) both;
+}
+
+.todo-row-done .todo-main strong {
+  color: var(--ink3);
+  text-decoration: line-through;
+  text-decoration-color: var(--line2);
+}
+
+@keyframes slideIntoDone {
+  0% {
+    opacity: 0;
+    transform: translateX(-26px);
+  }
+
+  60% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.icon-button {
+  border: none;
+  padding: 6px 4px;
+  color: var(--accent);
+  background: transparent;
+  font-family: "IBM Plex Mono", ui-monospace, monospace;
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  opacity: 0.65;
+  transition: opacity 0.15s;
+}
+
+.icon-button:hover {
+  opacity: 1;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.empty-state {
+  padding: 16px 2px;
+  color: var(--ink3);
+  font-size: 12px;
+  font-style: normal;
+}
+
+.ledger-list li {
+  position: relative;
+  padding: 13px 0 13px 18px;
+  border-bottom: 1px solid var(--line);
+}
+
+.ledger-list li::before {
+  content: "";
+  position: absolute;
+  left: 2px;
+  top: 18px;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: var(--line2);
+}
+
+.ledger-list li:last-child {
+  border-bottom: none;
+}
+
+.ledger-list p {
+  color: var(--ink);
+  font-size: 15px;
+  line-height: 1.35;
+}
+
+.ledger-list p span {
+  font-weight: 600;
+}
+
+.ledger-list q {
+  color: var(--accent);
+  font-style: italic;
+}
+
+.ledger-list time {
+  display: block;
+  margin-top: 3px;
+  color: var(--ink3);
+  font-size: 10.5px;
+}
+
+@media (max-width: 880px) {
+  .app-shell {
+    padding: 38px 14px 60px;
+  }
+
+  .app-wrap {
+    grid-template-columns: 1fr;
+  }
+
+  .workspace-panel {
+    padding: 24px 22px;
+  }
+
+  h1 {
+    font-size: 32px;
+  }
+}
+
+@media (max-width: 560px) {
+  .workspace-header,
+  .composer,
+  .todo-row {
+    grid-template-columns: 1fr;
+  }
+
+  .workspace-header {
+    display: grid;
+  }
+
+  .actor-pill {
+    max-width: 100%;
+  }
+}

package/templates/react/src/vite-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="vite/client" />
+
+declare module "*.css?inline" {
+  const css: string;
+  export default css;
+}

package/templates/react/test/app.test.js

@@ -0,0 +1,37 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { createTestRoom, testActor } from "matterhorn-sdk/testing";
+import app from "../app.cjs";
+
+test("shares todo lifecycle and ledger entries", async () => {
+  const room = createTestRoom(app, { now: () => 1000 });
+  const alice = testActor("alice");
+  const guest = testActor("guest", { role: "none" });
+
+  await assert.rejects(
+    () => room.as(guest).actions.addTodo({ text: "Sneak in" }),
+    /requires member role/
+  );
+
+  await room.as(alice).actions.addTodo({ text: "Ship Matterhorn" });
+  const [todo] = await room.queries.todos();
+  assert.equal(todo.text, "Ship Matterhorn");
+  assert.equal(todo.authorId, "alice");
+  assert.equal(todo.completedAt, null);
+
+  await room.as(alice).actions.completeTodo({ id: todo.id });
+  const [updated] = await room.queries.todos();
+  assert.equal(updated.done, true);
+  assert.equal(updated.completedAt, 1000);
+
+  await room.as(alice).actions.reopenTodo({ id: todo.id });
+  const [reopened] = await room.queries.todos();
+  assert.equal(reopened.done, false);
+  assert.equal(reopened.completedAt, null);
+
+  await room.as(alice).actions.deleteTodo({ id: todo.id });
+  assert.deepEqual(await room.queries.todos(), []);
+
+  const activity = await room.queries.activity();
+  assert.deepEqual(activity.map((item) => item.type), ["created", "completed", "reopened", "deleted"]);
+});

package/templates/react/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "jsx": "react-jsx",
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "noEmit": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "target": "ES2022"
+  },
+  "include": ["src", "types"]
+}

package/templates/react/types/.gitkeep

@@ -0,0 +1 @@
+

package/templates/react/vite.config.js

@@ -0,0 +1,21 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import { matterhorn } from "matterhorn-sdk/vite";
+
+export default defineConfig({
+  base: process.env.MATTERHORN_BUNDLE_BASE || "/",
+  plugins: [matterhorn({ typesFile: "types/matterhorn.types.d.ts" }), react()],
+  define: {
+    "process.env.NODE_ENV": JSON.stringify("production"),
+    "process.env": "{}"
+  },
+  build: {
+    rollupOptions: {
+      output: {
+        entryFileNames: "matterhorn-__APP_NAME__.js",
+        chunkFileNames: "matterhorn-__APP_NAME__-[hash].js",
+        assetFileNames: "matterhorn-__APP_NAME__-[name][extname]"
+      }
+    }
+  }
+});