@enbox/create-dapp 0.0.2 → 0.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enbox/create-dapp",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "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      # features, wallet identity, and one application owner
+    App.tsx             # connection shell and feature composition
+  features/tasks/
+    protocol.ts         # typed encrypted records and validation
+    store.ts            # shared observations, commands, and domain defaults
+    components/         # task board and its styles
+  shared/components/
+    ProfileCard.tsx
+  main.tsx
+  sw.ts
+```
+
+`createApplication` derives the protocol manifest from registered stores and
+constructs the browser connection with the configured wallet identity.
+`getApplication()` keeps one headless runtime for the browser lifetime.
+`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,55 @@ 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)`. Its `activeTasks` observation keeps
+  the chosen project's query live through `activeTasks.select`; parent metadata and
+  rows arrive together. Fixed and selected observations use the same SDK
+  implementation. Creation and rename helpers reuse each collection's commands and their
+  shared pending/error state; observed state includes pagination progress.
+- `components/TaskBoard.tsx` resolves the feature with `useFeature(TaskBoardStore)`
+  and reads observed data 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 task-detail selection remain in React.
+  Awaited handlers check command authorization before applying their UI result.
+  Reopened task details also use selection identity to reject an older panel’s
+  completion.
+- `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.
+`activeTasks` owns its selected query until another project, null, or session
+retirement. Other features can declare observations with changing inputs through
+`observe({ source: (parent: string) => tasks.within(parent) })`;
+commands remain on canonical `tasks.within(parentContextId)` handles.
+
+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.84",
+    "@enbox/react": "0.0.9",
     "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,18 @@
+import { createApplication, type BrowserApplicationOptions } from '@enbox/browser';
+
+import app from '../app.json' with { type: 'json' };
+import { TaskBoardStore } from '../features/tasks/store.js';
+
+export const applicationOptions = {
+  stores: { tasks: TaskBoardStore },
+  wallet: { appName: app.name, applicationId: app.id },
+} satisfies BrowserApplicationOptions;
+
+let application: ReturnType<typeof createApplication> | undefined;
+
+/** One browser-lifetime owner shared by React and application controllers. */
+export function getApplication() {
+  return application ??= createApplication(applicationOptions);
+}
+
+if (import.meta.hot) import.meta.hot.dispose(() => { void application?.dispose(); });

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

@@ -0,0 +1,169 @@
+import type { StoreInstance } from '@enbox/browser';
+import { useFeature, useStore } from '@enbox/react';
+import { useState } from 'react';
+import type { FormEvent } from 'react';
+
+import { TaskBoardStore } from '../store.js';
+import './tasks.css';
+
+type TaskState = ReturnType<StoreInstance<typeof TaskBoardStore>['activeTasks']['getSnapshot']>;
+
+export function TaskBoard({ disabled = false }: { disabled?: boolean }) {
+  const board = useFeature(TaskBoardStore);
+  const projects = useStore(board.projects);
+  const activeTasks = useStore(board.activeTasks);
+  const creation = useStore(board.projects.create);
+  const projectContextId = activeTasks.selection;
+  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(name);
+      if (board.projects.create.isCurrent()) {
+        setName('');
+        await board.activeTasks.select(record.contextId);
+      }
+    } 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.projects.retry().catch(() => {}); }}>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={() => { void board.activeTasks.select(record.contextId).catch(() => {}); }}>{value.name}</button>)}
+      </div>
+      {projects.hasMore && <button type="button" disabled={disabled || projects.isLoadingMore}
+        onClick={() => { void board.projects.loadMore().catch(() => {}); }}>More projects</button>}
+      {projectContextId !== null
+        ? <ProjectTasks key={projectContextId} within={projectContextId} tasks={activeTasks} disabled={disabled} />
+        : <p role="status">{prompt}</p>}
+    </section>
+  );
+}
+
+function ProjectTasks({ within, tasks, disabled }: {
+  within: string; tasks: TaskState; disabled: boolean;
+}) {
+  const board = useFeature(TaskBoardStore);
+  const taskCollection = board.tasks.within(within);
+  const creation = useStore(taskCollection.create);
+  const updates = useStore(taskCollection.patch);
+  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 (taskCollection.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 taskCollection.retry().catch(() => {}); }}>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.pendingInputs.some((input) => input.id === record.id)}
+          onChange={(event) => { void taskCollection.patch.run({ id: record.id, patch: { completed: event.currentTarget.checked } }).catch(() => {}); }} />
+        <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 || tasks.isLoadingMore}
+      onClick={() => { void taskCollection.loadMore().catch(() => {}); }}>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 taskCollection = board.tasks.within(within);
+  const list = useStore(taskCollection);
+  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 lookup = needsLookup ? board.taskById(within, recordId) : null;
+  const details = useStore(lookup, { fallback: list });
+  const task = details.records.find((row) => row.record.id === recordId);
+  const status = details.status;
+  const updates = useStore(taskCollection.patch);
+  const deletion = useStore(taskCollection.delete);
+  const [draft, setDraft] = useState<string>();
+  const pending = updates.pendingInputs.some((input) => input.id === recordId) || deletion.pendingInputs.includes(recordId);
+  async function saveTitle(event: FormEvent) {
+    event.preventDefault();
+    if (draft === undefined) return;
+    try {
+      await board.renameTask({ within, id: recordId, title: draft });
+      if (taskCollection.patch.isCurrent()) setDraft(undefined);
+    } catch { /* The scoped patch command exposes the error below. */ }
+  }
+  async function deleteTask() {
+    try {
+      await taskCollection.delete.run(recordId);
+      if (taskCollection.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={() => {
+        void (lookup ?? taskCollection).retry().catch(() => {});
+      }}>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,28 @@
+import { DateSort, defineStore } from '@enbox/browser';
+
+import { TaskBoardProtocol } from './protocol.js';
+
+/** Protocol observations and domain defaults are shared with every consumer. */
+export const TaskBoardStore = defineStore({
+  protocols: { board: TaskBoardProtocol },
+  create({ protocols, observe }) {
+    const projects = protocols.board.collection('project', { dateSort: DateSort.CreatedDescending });
+    const tasks = protocols.board.collection('project/task');
+    const activeTasks = observe({ source: (parent: string) => tasks.within(parent) });
+    const taskById = (within: string, recordId: string) => protocols.board.collection('project/task', {
+      filter: { recordId }, pagination: { limit: 1 },
+    }).within(within);
+
+    return {
+      projects,
+      tasks,
+      activeTasks,
+      taskById,
+      createProject: (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() } }),
+    };
+  },
+});

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/application.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 });
-}