@enbox/create-dapp 0.0.1 → 0.0.3

package/README.md

@@ -8,17 +8,22 @@ Requires Node.js 22.12.0 or newer. Create an app with either command:
 ```sh
 npm create @enbox/dapp@latest my-app
 # or
-npx @enbox/create-dapp@latest my-app
+bun create @enbox/dapp@latest my-app
 ```
 
 Then run:
 
 ```sh
 cd my-app
-npm ci
+npm install
 npm run dev
 ```
 
+The CLI detects npm or Bun from the invoking package manager and prints its
+commands. Use `--package-manager npm` or `--package-manager bun` to override
+that choice. The template includes no lockfile: your first install creates one
+for your package manager. Commit it and use frozen installs thereafter.
+
 The generator copies its bundled template into a new or empty directory. It
 does not install packages, run Git, or make network requests. It refuses
 nonempty destinations and symbolic-link targets; there is no force option.
@@ -27,7 +32,7 @@ interactive terminal; scripts must provide it explicitly.
 
 The directory's basename becomes the display name in `src/app.json`. Its
 normalized lowercase npm name becomes both the package name and the stable
-`app.json` ID, and the bundled lockfile is updated to match. The ID identifies
+`app.json` ID. The ID identifies
 the app to the wallet and defines its private demo protocol namespace. Keep
 the ID when changing the display name so saved data remains in the same
 namespace. Source code is copied unchanged. Run `--help` for usage or

package/bin/create-dapp.mjs

@@ -11,17 +11,20 @@ const manifest = JSON.parse(fs.readFileSync(join(packageRoot, 'package.json'), '
 const excluded = new Set([
   'node_modules', 'dist', 'build', '.git', '.artifacts', '.vite', '.cache',
   'coverage', 'test-results', 'playwright-report', '.DS_Store',
+  'package-lock.json', 'bun.lock', 'bun.lockb', 'npm-shrinkwrap.json', 'yarn.lock', 'pnpm-lock.yaml',
 ]);
 
 const usage = `Create a minimal Enbox React application.
 
 Usage:
   npm create @enbox/dapp@latest [directory]
+  bun create @enbox/dapp@latest [directory]
   npx @enbox/create-dapp@latest [directory]
 
 Options:
   -h, --help     Show this help
   -v, --version  Show the generator version
+  --package-manager <npm|bun>  Override the invoking package manager
 
 The destination must be empty. No dependencies are installed and no Git
 repository is created. Use "." to create an app in the current empty directory.
@@ -78,11 +81,6 @@ function createProject(destination) {
     value.id = name;
     value.name = displayName;
   });
-  customizeJson(files, 'package-lock.json', (value) => {
-    if (value.packages?.[''] === undefined) throw new Error('root package metadata is missing');
-    value.name = name;
-    value.packages[''].name = name;
-  });
 
   const createdFiles = [];
   const createdDirectories = [];
@@ -128,11 +126,16 @@ function quoteDirectory(directory) {
 
 async function main() {
   const { values, positionals } = parseArgs({
-    options: { help: { type: 'boolean', short: 'h' }, version: { type: 'boolean', short: 'v' } },
+    options: {
+      help: { type: 'boolean', short: 'h' }, version: { type: 'boolean', short: 'v' },
+      'package-manager': { type: 'string' },
+    },
     allowPositionals: true,
   });
   if (values.help) { console.log(usage); return; }
   if (values.version) { console.log(manifest.version); return; }
+  const manager = values['package-manager'] ?? (process.env.npm_config_user_agent?.startsWith('bun/') ? 'bun' : 'npm');
+  if (manager !== 'npm' && manager !== 'bun') throw new Error('The package manager must be npm or bun.');
   if (positionals.length > 1) throw new Error('Provide one target directory. Run with --help for usage.');
   let directory = positionals[0];
   if (directory === undefined) {
@@ -149,7 +152,7 @@ async function main() {
   const destination = resolve(directory);
   createProject(destination);
   const changeDirectory = process.platform === 'win32' ? 'Set-Location -LiteralPath' : 'cd';
-  console.log(`Created ${basename(destination)}.\n\n${process.platform === 'win32' ? 'In PowerShell' : 'Next'}:\n  ${changeDirectory} ${quoteDirectory(destination)}\n  npm ci\n  npm run dev`);
+  console.log(`Created ${basename(destination)}.\n\n${process.platform === 'win32' ? 'In PowerShell' : 'Next'}:\n  ${changeDirectory} ${quoteDirectory(destination)}\n  ${manager} install\n  ${manager} run dev`);
 }
 
 main().catch((cause) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enbox/create-dapp",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "Create a minimal Enbox React application",
   "type": "module",
   "license": "Apache-2.0",
@@ -17,7 +17,6 @@
     "template/src",
     "template/index.html",
     "template/package.json",
-    "template/package-lock.json",
     "template/tsconfig.json",
     "template/vite.config.ts",
     "template/README.md",

package/template/README.md

@@ -1,20 +1,22 @@
 # Hello, Enbox
 
-A small React app with a wallet connection, a read-only public profile, and one
-private choice saved through Enbox. No application server is required.
+A small React app with a wallet connection, a read-only public profile, and
+a private task board with projects and tasks. No application server is required.
 
 ## Run it
 
 Use Node 22.12 or newer:
 
 ```sh
-npm ci
+npm install
 npm run dev
 ```
 
 Open the local URL and choose **Connect wallet**. Enbox handles wallet selection
-and approval. Once connected, choose an emoji. The displayed choice comes from
-the live record view and is restored when this profile returns.
+and approval. Create a project, add tasks, and check them off as you finish.
+Select a task to edit its title or delete it. Completed tasks can be reopened.
+Switching projects selects that project’s own tasks. Saved values come from native
+live record views and are restored when this profile returns.
 
 ```sh
 npm run typecheck
@@ -28,17 +30,41 @@ toolchain. Production builds precache the app shell for
 later offline visits; `npm run preview` serves that built app locally. Deploy
 the generated `dist` directory on an HTTPS origin with service worker support.
 
-Direct dependencies use exact versions; `npm ci` installs the committed
-dependency tree. Update the manifest and lockfile together when accepting
-dependency or security fixes.
+You can also use `bun install` and `bun run dev`. No lockfile is generated
+until your first install. Commit the resulting `package-lock.json` or `bun.lock`;
+then use `npm ci` or `bun install --frozen-lockfile` in CI. Direct dependencies
+use exact versions. Update the manifest and your lockfile together when
+accepting dependency or security fixes.
 
 ## Make it yours
 
 `src/app.json` contains the display name used in the page, browser title, and
 wallet approval screen, plus a stable app ID. Changing the display name leaves
-the app ID and demo data namespace intact. `src/application.ts` defines the application manifest
-and wallet configuration. `src/main.tsx` mounts the SDK provider; `src/App.tsx`
-contains the app shell without owning authentication state.
+the app ID and task-board data namespace intact.
+
+The application follows the same feature-store structure as notesd:
+
+```text
+src/
+  app/
+    application.ts      # feature registration and wallet identity
+    runtime.ts          # one browser-lifetime application owner
+    App.tsx             # connection shell and feature composition
+  features/tasks/
+    protocol.ts         # typed encrypted records and validation
+    store.ts            # shared resources, commands, and domain defaults
+    components/         # task board and its styles
+  shared/components/
+    ProfileCard.tsx
+  main.tsx
+  sw.ts
+```
+
+`defineApplication` derives the protocol manifest from registered stores.
+`getApplication()` creates one headless runtime over a native connection.
+`main.tsx` waits for worker control before passing that runtime to
+`EnboxProvider application={...}`. The provider initializes the borrowed runtime;
+the application owns its lifetime. Development module replacement disposes it.
 
 The profile card reads published profile information through `useProfile`.
 Names, images, settlement state, and image URL lifetimes belong to the SDK.
@@ -46,25 +72,49 @@ Missing profiles and unavailable images have local display fallbacks.
 The wallet's profile label is used when a public display name is unavailable;
 the expanded details still show which name is publicly published.
 
-The removable demo lives entirely in `src/demo`:
+The replaceable task feature lives in `src/features/tasks`:
+
+- `protocol.ts` declares encrypted `project` and `project/task` records with
+  payload validators. Tasks store a title and completion state.
+- `store.ts` declares one shared project collection and a task collection scoped
+  with `tasks.within(projectContextId)`. Creation and rename defaults live here.
+  Native resource commands share pending/error state across consumers.
+- `components/TaskBoard.tsx` resolves the feature with `useFeature(TaskBoardStore)`
+  and reads resources or commands with `useStore`. Task details reuse loaded list
+  rows and acquire a bounded single-record observation for a selection outside
+  the retained window. Input drafts and UI selection remain in React.
+  Awaited handlers check command authorization before applying their UI result.
+- `components/tasks.css` styles the task feature. Shared app and profile styles
+  live in `src/style.css`.
+
+Application controllers use the same store instance as React:
+
+```ts
+const board = getApplication().store(TaskBoardStore);
+const release = board.projects.retain();
+try {
+  const state = await board.projects.ready();
+  // Use state.records in a controller or indexer.
+} finally {
+  release();
+}
+```
 
-- `protocol.ts` declares an encrypted singleton record and validates its emoji.
-- `Demo.tsx` reads through `useRecords` and writes absolute choices through
-  `useEnboxMutation` and the typed `records.set` API.
-- `demo.css` styles the demo. Shared app and profile styles live in `src/style.css`.
+Handles belong to their authorization session. Resolve a fresh feature when
+that session changes. React's `useFeature` handles that replacement automatically.
 
-To replace the demo, register your own typed application protocol in
-`application.ts` in place of `DemoProtocol`. Then delete `src/demo` and remove
-the `Demo` import and component from `App.tsx`. Enbox requires at least one
-application protocol, so keep your replacement registered. The profile card,
-connection shell, and service worker remain the base for your app.
+To replace the task feature, register your own store in `app/application.ts`,
+delete `src/features/tasks`, and change the feature rendered by `app/App.tsx`.
+Enbox requires at least one application protocol, so keep your replacement
+registered. The profile card, connection shell, and service worker remain the
+base for your app.
 
 The demo's default protocol URI is
-`https://example.com/<encoded app ID>/demo/v1`. Replace the URI expression in
-`src/demo/protocol.ts` with a stable URI
+`https://example.com/<encoded app ID>/demo/v2`. Replace the URI expression in
+`src/features/tasks/protocol.ts` with a stable URI
 you control before publishing. This URI identifies saved records and wallet
 grants: changing it creates a different data namespace. Once deployed, keep
 that identifier fixed when changing the app's display name.
 
-Public profile information and the encrypted demo choice are separate. Choosing
-an emoji updates this app's private record; it does not edit the public profile.
+Public profile information and the encrypted task board are separate. Task
+updates change this app’s private records; they do not edit the public profile.

package/template/package.json

@@ -6,12 +6,12 @@
   "scripts": {
     "dev": "vite",
     "typecheck": "tsc --noEmit",
-    "build": "npm run typecheck && vite build",
+    "build": "tsc --noEmit && vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@enbox/browser": "0.3.82",
-    "@enbox/react": "0.0.6",
+    "@enbox/browser": "0.3.83",
+    "@enbox/react": "0.0.8",
     "react": "19.3.0",
     "react-dom": "19.3.0"
   },

package/template/src/{App.tsx → app/App.tsx}

@@ -1,9 +1,9 @@
 import { useEnboxConnection } from '@enbox/react';
 import { useEffect } from 'react';
 
-import app from './app.json' with { type: 'json' };
-import { Demo } from './demo/Demo.js';
-import { ProfileCard } from './ProfileCard.js';
+import app from '../app.json' with { type: 'json' };
+import { TaskBoard } from '../features/tasks/components/TaskBoard.js';
+import { ProfileCard } from '../shared/components/ProfileCard.js';
 
 export function App() {
   const connection = useEnboxConnection();
@@ -53,7 +53,7 @@ export function App() {
         {connection.isConnected && connection.did ? (
           <div className="connected-content">
             <ProfileCard enbox={connection.enbox} did={connection.did} identityName={connection.identityName} />
-            <Demo disabled={busy || connection.walletRepair !== undefined} />
+            <TaskBoard disabled={busy || connection.walletRepair !== undefined} />
           </div>
         ) : (
           <section className="panel connect-panel" aria-labelledby="connect-title">

package/template/src/app/application.ts

@@ -0,0 +1,7 @@
+import { defineApplication } from '@enbox/browser';
+
+import app from '../app.json' with { type: 'json' };
+import { TaskBoardStore } from '../features/tasks/store.js';
+
+export const applicationDefinition = defineApplication({ stores: { tasks: TaskBoardStore } });
+export const wallet = { appName: app.name, applicationId: app.id };

package/template/src/app/runtime.ts

@@ -0,0 +1,17 @@
+import { BrowserConnectHandler, createApplication, createConnectionStore } from '@enbox/browser';
+
+import { applicationDefinition, wallet } from './application.js';
+
+let runtime: ReturnType<typeof createApplication> | undefined;
+
+/** One browser-lifetime owner shared by React and application controllers. */
+export function getApplication() {
+  return runtime ??= createApplication(applicationDefinition, {
+    connection: createConnectionStore({
+      application: applicationDefinition.manifest,
+      connectHandler: BrowserConnectHandler(wallet),
+    }),
+  });
+}
+
+if (import.meta.hot) import.meta.hot.dispose(() => { void runtime?.dispose(); });

package/template/src/features/tasks/components/TaskBoard.tsx

@@ -0,0 +1,163 @@
+import { useFeature, useStore } from '@enbox/react';
+import { useState } from 'react';
+import type { FormEvent } from 'react';
+
+import { TaskBoardStore } from '../store.js';
+import './tasks.css';
+
+export function TaskBoard({ disabled = false }: { disabled?: boolean }) {
+  const board = useFeature(TaskBoardStore);
+  const projects = useStore(board.projects);
+  const creation = useStore(board.createProject);
+  const paging = useStore(board.moreProjects);
+  const [projectContextId, setProjectContextId] = useState<string>();
+  const [name, setName] = useState('');
+  const creating = creation.pendingCount > 0;
+  const prompt = projects.status === 'loading' ? 'Loading projects…'
+    : projects.status === 'ready' && projects.records.length === 0 ? 'Create your first project to get started.'
+      : 'Select a project to see its tasks.';
+  async function addProject(event: FormEvent) {
+    event.preventDefault();
+    try {
+      const record = await board.createProject.run(name);
+      if (board.createProject.isCurrent()) { setProjectContextId(record.contextId); setName(''); }
+    } catch { /* The command exposes the error below. */ }
+  }
+  return (
+    <section className="panel demo" aria-labelledby="demo-title">
+      <h2 id="demo-title">Your projects</h2>
+      <p>A private task board. Create a project, add tasks, and make a little progress.</p>
+      <form className="demo-form" onSubmit={addProject}>
+        <label htmlFor="project-name">Project name</label>
+        <input id="project-name" value={name} maxLength={60} required
+          disabled={disabled || creating} onChange={(event) => setName(event.target.value)} />
+        <button className="button button-secondary" disabled={disabled || creating || !name.trim()}>
+          {creating ? 'Creating…' : 'Create project'}
+        </button>
+      </form>
+      {creation.error && <p role="alert">Couldn’t create the project: {creation.error.message}</p>}
+      {projects.status === 'error' && <div role="alert">
+        <p>Couldn’t load projects: {projects.error.message}</p>
+        <button type="button" disabled={disabled} onClick={() => { void board.retryProjects.run(); }}>Try again</button>
+      </div>}
+      <div className="project-picker" role="group" aria-label="Projects">
+        {projects.records.map(({ record, value }) => <button type="button" className="button button-quiet" key={record.id} disabled={disabled}
+          aria-pressed={record.contextId === projectContextId} onClick={() => setProjectContextId(record.contextId)}>{value.name}</button>)}
+      </div>
+      {projects.hasMore && <button type="button" disabled={disabled || paging.pendingCount > 0}
+        onClick={() => { void board.moreProjects.run(); }}>More projects</button>}
+      {projectContextId !== undefined
+        ? <ProjectTasks key={projectContextId} within={projectContextId} disabled={disabled} />
+        : <p role="status">{prompt}</p>}
+    </section>
+  );
+}
+
+function ProjectTasks({ within, disabled }: { within: string; disabled: boolean }) {
+  const board = useFeature(TaskBoardStore);
+  const resource = board.tasks.within(within);
+  const tasks = useStore(resource);
+  const creation = useStore(resource.create);
+  const updates = useStore(resource.patch);
+  const paging = useStore(board.moreTasks);
+  const [title, setTitle] = useState('');
+  // Reopening the same record creates a new UI target for completion guards.
+  const [selection, setSelection] = useState<{ id: string }>();
+  const creating = creation.pendingCount > 0;
+  async function addTask(event: FormEvent) {
+    event.preventDefault();
+    try {
+      const record = await board.createTask({ within, title });
+      if (resource.create.isCurrent()) { setSelection({ id: record.id }); setTitle(''); }
+    } catch { /* The scoped create command exposes the error below. */ }
+  }
+  return <div className="project-content">
+    <h3>Tasks</h3>
+    <form className="demo-form" onSubmit={addTask}>
+      <label htmlFor="task-title">New task</label>
+      <input id="task-title" value={title} maxLength={120} required
+        disabled={disabled || creating} onChange={(event) => setTitle(event.target.value)} />
+      <button className="button button-secondary" disabled={disabled || creating || !title.trim()}>Add task</button>
+    </form>
+    {creation.error && <p role="alert">Couldn’t add the task: {creation.error.message}</p>}
+    {updates.error && <p role="alert">Couldn’t update the task: {updates.error.message}</p>}
+    {tasks.status === 'error' && <p role="alert">Couldn’t load tasks. <button type="button"
+      disabled={disabled} onClick={() => { void board.retryTasks.run(within); }}>Retry tasks</button></p>}
+    <ul className="task-list">
+      {tasks.records.map(({ record, value }) => <li key={record.id} data-completed={value.completed}>
+        <input type="checkbox" aria-label={`Complete ${value.title}`} checked={value.completed}
+          disabled={disabled || updates.pendingVariables.some((input) => input.id === record.id)}
+          onChange={(event) => { void resource.patch.run({ id: record.id, patch: { completed: event.currentTarget.checked } }); }} />
+        <button type="button" className="button button-quiet" aria-label={`Open task ${value.title}`}
+          disabled={disabled} aria-pressed={record.id === selection?.id} onClick={() => setSelection({ id: record.id })}>{value.title}</button>
+      </li>)}
+    </ul>
+    {tasks.hasMore && <button type="button" disabled={disabled || paging.pendingVariables.includes(within)}
+      onClick={() => { void board.moreTasks.run(within); }}>More tasks</button>}
+    {selection !== undefined
+      ? <TaskDetails key={selection.id} within={within} recordId={selection.id} disabled={disabled}
+        onClose={() => setSelection((current) => current === selection ? undefined : current)} />
+      : <p role="status">Select a task to see its details.</p>}
+  </div>;
+}
+
+function TaskDetails({ within, recordId, disabled, onClose }: {
+  within: string; recordId: string; disabled: boolean; onClose: () => void;
+}) {
+  const board = useFeature(TaskBoardStore);
+  const resource = board.tasks.within(within);
+  const list = useStore(resource);
+  const listed = list.records.some((row) => row.record.id === recordId);
+  // A bounded window cannot prove an unlisted record is missing. Reuse loaded
+  // rows, and acquire a single-record view only while that proof is unavailable.
+  const needsLookup = !listed && (list.status !== 'ready' || list.hasMore);
+  const selection = useStore(needsLookup ? board.taskById(within, recordId) : resource);
+  const task = selection.records.find((row) => row.record.id === recordId);
+  const status = selection.status;
+  const updates = useStore(resource.patch);
+  const deletion = useStore(resource.delete);
+  const [draft, setDraft] = useState<string>();
+  const pending = updates.pendingVariables.some((input) => input.id === recordId) || deletion.pendingVariables.includes(recordId);
+  async function saveTitle(event: FormEvent) {
+    event.preventDefault();
+    if (draft === undefined) return;
+    try {
+      await board.renameTask({ within, id: recordId, title: draft });
+      if (resource.patch.isCurrent()) setDraft(undefined);
+    } catch { /* The scoped patch command exposes the error below. */ }
+  }
+  async function deleteTask() {
+    try {
+      await resource.delete.run(recordId);
+      if (resource.delete.isCurrent()) onClose();
+    } catch { /* The scoped delete command exposes the error below. */ }
+  }
+  const data = task?.value;
+  return <section className="task-details" aria-label="Task details">
+    <h3>Task details</h3>
+    {status === 'error' && <p role="alert">Couldn’t load the task. <button type="button"
+      disabled={disabled} onClick={() => {
+        if (needsLookup) void board.retryTask.run({ within, recordId });
+        else void board.retryTasks.run(within);
+      }}>Retry task</button></p>}
+    {data === undefined && status === 'loading' && <p role="status">Loading task…</p>}
+    {data === undefined && status === 'ready' && <p role="status">This task is no longer available.</p>}
+    {data !== undefined && <>
+      <p>{data.title} · {data.completed ? 'Completed' : 'To do'}</p>
+      {draft === undefined
+        ? <button type="button" className="button button-quiet" disabled={disabled || pending}
+          onClick={() => setDraft(data.title)}>Edit title</button>
+        : <form className="demo-form" onSubmit={saveTitle}>
+          <label htmlFor="edit-task-title">Task title</label>
+          <input id="edit-task-title" value={draft} maxLength={120} required disabled={disabled || pending}
+            onChange={(event) => setDraft(event.target.value)} />
+          <button className="button button-secondary" disabled={disabled || pending || !draft.trim()}>Save title</button>
+          <button type="button" className="button button-quiet" disabled={disabled || pending} onClick={() => setDraft(undefined)}>Cancel</button>
+        </form>}
+      <button type="button" className="button button-quiet" disabled={disabled || pending} onClick={deleteTask}>Delete task</button>
+    </>}
+    {updates.error && <p role="alert">Couldn’t update the task: {updates.error.message}</p>}
+    {deletion.error && <p role="alert">Couldn’t delete the task: {deletion.error.message}</p>}
+    <button type="button" className="button button-quiet" onClick={onClose}>Close details</button>
+  </section>;
+}

package/template/src/features/tasks/components/tasks.css

@@ -0,0 +1,15 @@
+.demo { padding: 30px; }
+.demo > p { margin-top: 12px; color: var(--muted); font-size: .85rem; }
+.demo [role="alert"] { color: #7d4533; }
+.demo-form { display: grid; gap: .5rem; margin: 1rem 0; }
+.demo-form input { padding: .65rem; border: 1px solid var(--border); border-radius: .5rem; font: inherit; background: transparent; color: inherit; }
+.project-picker { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
+.project-picker button[aria-pressed="true"], .task-list button[aria-pressed="true"] { background: #edf3e7; border-color: #709865; color: var(--accent); }
+.project-content, .task-details { border-top: 1px solid var(--border); padding-top: 1rem; margin-top: 1rem; }
+.task-list { padding: 0; list-style: none; }
+.task-list li { display: flex; align-items: center; gap: .5rem; padding: .5rem 0; }
+.task-list li[data-completed="true"] button { text-decoration: line-through; color: var(--muted); }
+.task-list button { text-align: left; overflow-wrap: anywhere; }
+@media (max-width: 600px) {
+  .demo { padding: 26px 20px; }
+}

package/template/src/features/tasks/protocol.ts

@@ -0,0 +1,26 @@
+import { defineProtocol, recordCodecs } from '@enbox/browser';
+
+import app from '../../app.json' with { type: 'json' };
+
+export type Project = { name: string };
+export type Task = { title: string; completed: boolean };
+
+// Replace this example URI with one you own before publishing your app.
+// Keep it stable after launch: it identifies the app's saved data and grants.
+export const TaskBoardProtocol = defineProtocol({
+  protocol: `https://example.com/${encodeURIComponent(app.id)}/demo/v2`,
+  published: false,
+  types: {
+    project: { dataFormats: ['application/json'], encryptionRequired: true },
+    task: { dataFormats: ['application/json'], encryptionRequired: true },
+  },
+  structure: { project: { task: {} } },
+} as const, {
+  project: recordCodecs.json<Project>({ validator: (value: unknown) =>
+    value !== null && typeof value === 'object' && !Array.isArray(value) && 'name' in value
+    && typeof value.name === 'string' && value.name.trim().length > 0 && value.name.length <= 60 }),
+  task: recordCodecs.json<Task>({ validator: (value: unknown) =>
+    value !== null && typeof value === 'object' && !Array.isArray(value) && 'title' in value && 'completed' in value
+    && typeof value.title === 'string' && value.title.trim().length > 0 && value.title.length <= 120
+    && typeof value.completed === 'boolean' }),
+});

package/template/src/features/tasks/store.ts

@@ -0,0 +1,31 @@
+import { DateSort, defineStore } from '@enbox/browser';
+
+import { TaskBoardProtocol } from './protocol.js';
+
+/** Protocol resources and domain defaults are shared with every consumer. */
+export const TaskBoardStore = defineStore({
+  protocols: { board: TaskBoardProtocol },
+  create({ protocols, command }) {
+    const projects = protocols.board.collection('project', { dateSort: DateSort.CreatedDescending });
+    const tasks = protocols.board.collection('project/task');
+    const taskById = (within: string, recordId: string) => protocols.board.collection('project/task', {
+      filter: { recordId }, pagination: { limit: 1 },
+    }).within(within);
+
+    return {
+      projects,
+      tasks,
+      taskById,
+      createProject: command((name: string) => projects.create.run({ name: name.trim() })),
+      createTask: ({ within, title }: { within: string; title: string }) =>
+        tasks.within(within).create.run({ title: title.trim(), completed: false }),
+      renameTask: ({ within, id, title }: { within: string; id: string; title: string }) =>
+        tasks.within(within).patch.run({ id, patch: { title: title.trim() } }),
+      moreProjects: command(() => projects.loadMore()),
+      moreTasks: command((within: string) => tasks.within(within).loadMore()),
+      retryProjects: command(() => projects.retry()),
+      retryTasks: command((within: string) => tasks.within(within).retry()),
+      retryTask: command(({ within, recordId }: { within: string; recordId: string }) => taskById(within, recordId).retry()),
+    };
+  },
+});

package/template/src/main.tsx

@@ -1,51 +1,17 @@
-import { activatePolyfills } from '@enbox/browser';
+import { prepareBrowser } from '@enbox/browser';
 import { EnboxProvider } from '@enbox/react';
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import { App } from './App.js';
-import { config } from './application.js';
+import { App } from './app/App.js';
+import { getApplication } from './app/runtime.js';
 import workerPath from './sw.ts?worker&url';
 import './style.css';
 
-/** Wait for this app's worker to control the page before initializing Enbox. */
-async function prepareBrowser(): Promise<void> {
-  if (!('serviceWorker' in navigator)) throw new Error('This browser needs service worker support.');
-  const workerUrl = new URL(workerPath, window.location.href).href;
-  let timer: ReturnType<typeof setTimeout> | undefined;
-  let finished = false;
-  let stopListening = (): void => {};
-  try {
-    await Promise.race([
-      (async () => {
-        await navigator.serviceWorker.register(workerUrl, { type: 'module', scope: import.meta.env.BASE_URL });
-        if (finished) throw new Error('Service worker startup wait ended.');
-        await navigator.serviceWorker.ready;
-        if (finished) throw new Error('Service worker startup wait ended.');
-        // A ready registration does not guarantee that our worker controls this page.
-        await new Promise<void>((resolve) => {
-          const resolveWhenControlled = (): void => {
-            if (navigator.serviceWorker.controller?.scriptURL === workerUrl) resolve();
-          };
-          navigator.serviceWorker.addEventListener('controllerchange', resolveWhenControlled);
-          stopListening = () => navigator.serviceWorker.removeEventListener('controllerchange', resolveWhenControlled);
-          resolveWhenControlled();
-        });
-      })(),
-      new Promise<never>((_resolve, reject) => {
-        timer = setTimeout(() => reject(new Error('The app service worker did not become ready. Reload to try again.')), 20_000);
-      }),
-    ]);
-    activatePolyfills({ serviceWorker: false });
-  } finally {
-    finished = true;
-    clearTimeout(timer);
-    stopListening();
-  }
-}
-
-void prepareBrowser().then(() => {
-  createRoot(document.getElementById('root')!).render(<StrictMode><EnboxProvider config={config}><App /></EnboxProvider></StrictMode>);
+void prepareBrowser(workerPath, {
+  registrationOptions: { type: 'module', scope: import.meta.env.BASE_URL },
+}).then(() => {
+  createRoot(document.getElementById('root')!).render(<StrictMode><EnboxProvider application={getApplication()}><App /></EnboxProvider></StrictMode>);
 }).catch((cause: unknown) => {
   const root = document.getElementById('root')!;
   root.textContent = cause instanceof Error ? cause.message : 'Could not open the app.';