@enbox/create-dapp 0.0.2 → 0.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enbox/create-dapp",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Create a minimal Enbox React application",
   "type": "module",
   "license": "Apache-2.0",

package/template/README.md

@@ -40,9 +40,31 @@ accepting dependency or security fixes.
 
 `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.
@@ -50,27 +72,46 @@ 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.
-- `use-task-board.ts` defines `useProjects`, `useTasks`, and `useTask` with
-  `useEnboxRecords` and `useEnboxRecord`. A child selection takes its direct
-  parent context ID; task details also select an exact record ID.
-- `TaskBoard.tsx` renders the board and calls typed create, patch, and delete commands.
-  Simple event handlers use `mutate`. Forms await `mutateAsync` and check
-  `isCurrent()` before clearing drafts or closing details. Native observation updates the displayed data.
-- `demo.css` styles the demo. Shared app and profile styles live in `src/style.css`.
-
-To replace the demo, register your own typed application protocol in
-`application.ts` in place of `TaskBoardProtocol`. Then delete `src/demo` and remove
-the `TaskBoard` 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.
+- `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();
+}
+```
+
+Handles belong to their authorization session. Resolve a fresh feature when
+that session changes. React's `useFeature` handles that replacement automatically.
+
+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/v2`. Replace the URI expression in
-`src/demo/protocol.ts` with a stable URI
+`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.

package/template/package.json

@@ -10,8 +10,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@enbox/browser": "0.3.82",
-    "@enbox/react": "0.0.7",
+    "@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 { TaskBoard } from './demo/TaskBoard.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();

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/{demo → features/tasks}/protocol.ts

@@ -1,6 +1,6 @@
-import { defineProtocol, recordCodecs } from '@enbox/react/config';
+import { defineProtocol, recordCodecs } from '@enbox/browser';
 
-import app from '../app.json' with { type: 'json' };
+import app from '../../app.json' with { type: 'json' };
 
 export type Project = { name: string };
 export type Task = { title: string; 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

@@ -3,15 +3,15 @@ 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';
 
 void prepareBrowser(workerPath, {
   registrationOptions: { type: 'module', scope: import.meta.env.BASE_URL },
 }).then(() => {
-  createRoot(document.getElementById('root')!).render(<StrictMode><EnboxProvider config={config}><App /></EnboxProvider></StrictMode>);
+  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.';

package/template/src/application.ts

@@ -1,10 +0,0 @@
-import { defineApplicationManifest } from '@enbox/react/config';
-import type { CreateEnboxClientOptions } from '@enbox/react/config';
-
-import app from './app.json' with { type: 'json' };
-import { TaskBoardProtocol } from './demo/protocol.js';
-
-export const config = {
-  application: defineApplicationManifest({ protocols: [TaskBoardProtocol] }),
-  wallet: { appName: app.name, applicationId: app.id },
-} satisfies CreateEnboxClientOptions;

package/template/src/demo/TaskBoard.tsx

@@ -1,136 +0,0 @@
-import { useState } from 'react';
-import type { FormEvent } from 'react';
-
-import { useProjects, useTask, useTasks } from './use-task-board.js';
-import './demo.css';
-
-export function TaskBoard({ disabled = false }: { disabled?: boolean }) {
-  const projects = useProjects();
-  const [projectContextId, setProjectContextId] = useState<string>();
-  const [name, setName] = useState('');
-  const prompt = projects.isLoading ? 'Loading projects…'
-    : projects.isReady && 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 projects.create.mutateAsync({ name: name.trim() });
-      if (projects.create.isCurrent()) { setProjectContextId(record.contextId); setName(''); }
-    } catch { /* The mutation error is rendered 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 || projects.create.isPending} onChange={(event) => setName(event.target.value)} />
-        <button className="button button-secondary" disabled={disabled || projects.create.isPending || !name.trim()}>
-          {projects.create.isPending ? 'Creating…' : 'Create project'}
-        </button>
-      </form>
-      {projects.create.error && <p role="alert">Couldn’t create the project: {projects.create.error.message}</p>}
-      {projects.status === 'error' && <div role="alert">
-        <p>Couldn’t load projects: {projects.error.message}</p>
-        <button type="button" disabled={disabled} onClick={() => projects.retry()}>Try again</button>
-      </div>}
-      <div className="project-picker" role="group" aria-label="Projects">
-        {projects.records.map((project) => <button type="button" className="button button-quiet" key={project.id} disabled={disabled}
-          aria-pressed={project.contextId === projectContextId} onClick={() => setProjectContextId(project.contextId)}>{project.data.name}</button>)}
-      </div>
-      {projects.hasMore && <button type="button" disabled={disabled || projects.isLoadingMore}
-        onClick={() => projects.loadMore()}>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 tasks = useTasks(within);
-  const [title, setTitle] = useState('');
-  const [selectedId, setSelectedId] = useState<string>();
-  async function addTask(event: FormEvent) {
-    event.preventDefault();
-    try {
-      const record = await tasks.create.mutateAsync({ title: title.trim(), completed: false });
-      if (tasks.create.isCurrent()) { setSelectedId(record.id); setTitle(''); }
-    } catch { /* The mutation error is rendered 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 || tasks.create.isPending} onChange={(event) => setTitle(event.target.value)} />
-      <button className="button button-secondary" disabled={disabled || tasks.create.isPending || !title.trim()}>Add task</button>
-    </form>
-    {tasks.create.error && <p role="alert">Couldn’t add the task: {tasks.create.error.message}</p>}
-    {tasks.patch.error && <p role="alert">Couldn’t update the task: {tasks.patch.error.message}</p>}
-    {tasks.status === 'error' && <p role="alert">Couldn’t load tasks. <button type="button"
-      disabled={disabled} onClick={() => tasks.retry()}>Retry tasks</button></p>}
-    <ul className="task-list">
-      {tasks.records.map((task) => <li key={task.id} data-completed={task.data.completed}>
-        <input type="checkbox" aria-label={`Complete ${task.data.title}`} checked={task.data.completed}
-          disabled={disabled || tasks.patch.isPendingFor(task.id)}
-          onChange={(event) => tasks.patch.mutate({ id: task.id, patch: { completed: event.currentTarget.checked } })} />
-        <button type="button" className="button button-quiet" aria-label={`Open task ${task.data.title}`}
-          disabled={disabled} aria-pressed={task.id === selectedId} onClick={() => setSelectedId(task.id)}>{task.data.title}</button>
-      </li>)}
-    </ul>
-    {tasks.hasMore && <button type="button" disabled={disabled || tasks.isLoadingMore}
-      onClick={() => tasks.loadMore()}>More tasks</button>}
-    {selectedId !== undefined
-      ? <TaskDetails key={selectedId} within={within} recordId={selectedId} disabled={disabled} onClose={() => setSelectedId(undefined)} />
-      : <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 task = useTask(within, recordId);
-  const [draft, setDraft] = useState<string>();
-  const pending = task.patch.isPending || task.delete.isPending;
-  async function saveTitle(event: FormEvent) {
-    event.preventDefault();
-    if (draft === undefined) return;
-    try {
-      await task.patch.mutateAsync({ title: draft.trim() });
-      if (task.patch.isCurrent()) setDraft(undefined);
-    } catch { /* The mutation error is rendered below. */ }
-  }
-  async function deleteTask() {
-    try {
-      await task.delete.mutateAsync();
-      if (task.delete.isCurrent()) onClose();
-    } catch { /* The mutation error is rendered below. */ }
-  }
-  const data = task.data;
-  return <section className="task-details" aria-label="Task details">
-    <h3>Task details</h3>
-    {task.status === 'error' && <p role="alert">Couldn’t load the task. <button type="button"
-      disabled={disabled} onClick={() => task.retry()}>Retry task</button></p>}
-    {data === undefined && task.isLoading && <p role="status">Loading task…</p>}
-    {data === undefined && task.isReady && <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>
-    </>}
-    {task.patch.error && <p role="alert">Couldn’t update the task: {task.patch.error.message}</p>}
-    {task.delete.error && <p role="alert">Couldn’t delete the task: {task.delete.error.message}</p>}
-    <button type="button" className="button button-quiet" onClick={onClose}>Close details</button>
-  </section>;
-}

package/template/src/demo/use-task-board.ts

@@ -1,16 +0,0 @@
-import { useEnboxRecord, useEnboxRecords } from '@enbox/react';
-import { DateSort } from '@enbox/react/config';
-
-import { TaskBoardProtocol } from './protocol.js';
-
-export function useProjects() {
-  return useEnboxRecords(TaskBoardProtocol, 'project', { dateSort: DateSort.CreatedDescending });
-}
-
-export function useTasks(within: string) {
-  return useEnboxRecords(TaskBoardProtocol, 'project/task', { within });
-}
-
-export function useTask(within: string, recordId: string) {
-  return useEnboxRecord(TaskBoardProtocol, 'project/task', { within, recordId });
-}