@akanjs/cli 2.3.1-rc.2 → 2.3.1-rc.4

package/templates/appSample/lib/task/Task.View.tsx

@@ -0,0 +1,94 @@
+import type { AppInfo, LibInfo } from "akanjs";
+
+export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: { appName: string }) {
+  return {
+    filename: "Task.View.tsx",
+    content: `import { clsx } from "akanjs/client";
+
+import * as cnst from "@apps/${dict.appName}/lib/cnst";
+import { usePage } from "@apps/${dict.appName}/client";
+
+// ===== Task.View.tsx =====
+// Convention: lib/<module>/ — PascalCase .tsx, View suffix = detail display component.
+// View receives the Full Model (cnst.Task) as props — gives access to all defined fields.
+// Uses usePage().l() for i18n — the framework convention for dictionary-based translations.
+// Invoked by Akan's data-loading zone chain: Task.Zone → Load.View → Task.View.
+
+interface GeneralProps {
+  className?: string;
+  task: cnst.Task;
+}
+
+export const General = ({ className, task }: GeneralProps) => {
+  const { l } = usePage();
+  const statusColor = {
+    todo: "text-base-content/50",
+    inProgress: "text-primary",
+    completed: "text-success",
+  }[task.status];
+
+  return (
+    <div className={clsx("flex w-full flex-col gap-4", className)}>
+      <div>
+        <h1 className="font-bold text-2xl text-base-content">{task.title}</h1>
+        <div className={clsx("mt-1 font-medium text-sm", statusColor)}>
+          {l(\`taskStatus.\${task.status}\`)}
+        </div>
+      </div>
+
+      {task.content && (
+        <div className="rounded-lg border border-base-content/10 bg-base-100 p-4">
+          <p className="whitespace-pre-wrap text-base-content/80 text-sm">
+            {task.content}
+          </p>
+        </div>
+      )}
+
+      <div className="flex items-center gap-4 text-base-content/60 text-sm">
+        <div>
+          <span className="font-medium">
+            {l("task.taskDueLabel")}{" "}
+          </span>
+          {task.due
+            ? task.due.toDate().toLocaleDateString()
+            : l("task.taskNoDue")}
+        </div>
+      </div>
+
+      {task.workHistory && task.workHistory.length > 0 && (
+        <div className="mt-2 border-t border-base-content/10 pt-4">
+          <h3 className="font-semibold text-base-content text-sm mb-3">{l("task.taskWorkHistoryTitle")}</h3>
+          <ul className="space-y-2">
+            {task.workHistory.map((entry, i) => (
+              <li key={i} className="flex items-start gap-3 text-sm">
+                <span className={clsx("badge badge-xs mt-0.5 shrink-0", {
+                  "badge-ghost": entry.action === "created",
+                  "badge-primary": entry.action === "started",
+                  "badge-success": entry.action === "completed",
+                })}>
+                  {l(\`workHistoryAction.\${entry.action}\`)}
+                </span>
+                <div>
+                  <span className="text-base-content/60">{entry.at.toDate().toLocaleString()}</span>
+                  {entry.note && <span className="text-base-content/50 ml-2">{entry.note}</span>}
+                </div>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+};
+
+// ---- Expandable additional fields: ----
+// Compact: for narrow spaces like sidebars or modals
+// export const Compact = ({ className, task }: CompactProps) => (
+//   <div className={clsx("text-sm", className)}>
+//     <span className="font-medium">{task.title}</span>
+//     {task.due && <span className="text-base-content/50 ml-2">Due: {new Date(task.due).toLocaleDateString()}</span>}
+//   </div>
+// );
+`,
+  };
+}

package/templates/appSample/lib/task/Task.Zone.tsx

@@ -0,0 +1,66 @@
+import type { AppInfo, LibInfo } from "akanjs";
+
+export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: { appName: string }) {
+  return {
+    filename: "Task.Zone.tsx",
+    content: `"use client";
+
+import { fetch, Task, usePage } from "@apps/${dict.appName}/client";
+import { Load } from "akanjs/ui";
+import type { ClientInit, ClientView } from "akanjs/fetch";
+
+import * as cnst from "../cnst";
+
+// ===== Task.Zone.tsx =====
+// Convention: lib/<module>/ — PascalCase .tsx, Zone suffix = composition layer between pages and UI.
+// Zone components use Load.Units / Load.View from akanjs/ui — the framework convention for data-bound zones.
+// Takes ClientInit / ClientView props from page loader — data is fetched server-side.
+// Uses usePage().l() for i18n — the framework convention for dictionary-based translations.
+// Invoked directly from page components: <Task.Zone.Card init={...} />, <Task.Zone.View view={...} />.
+
+interface CardProps {
+  className?: string;
+  init: ClientInit<"task", cnst.LightTask>;
+}
+
+export const Card = ({ className, init }: CardProps) => {
+  const { l } = usePage();
+  return (
+    <Load.Units
+      className={className}
+      init={init}
+      renderEmpty={() => (
+        <div className="flex flex-col items-center gap-4 py-16 text-center">
+          <div className="text-base-content/40 text-lg">{l("task.taskNoTasks")}</div>
+          <button className="btn btn-primary btn-sm">{l("task.taskCreateFirst")}</button>
+        </div>
+      )}
+      renderItem={(task) => (
+        <Task.Unit.Card
+          key={task.id}
+          task={task}
+          href={\`/task/\${task.id}\`}
+        />
+      )}
+    />
+  );
+};
+
+interface ViewProps {
+  className?: string;
+  view: ClientView<"task", cnst.Task>;
+}
+
+export const View = ({ className, view }: ViewProps) => {
+  return (
+    <Load.View
+      className={className}
+      view={view}
+      renderView={(task) => <Task.View.General task={task} />}
+    />
+  );
+};
+
+`,
+  };
+}

package/templates/appSample/lib/task/task.abstract.ts

@@ -0,0 +1,40 @@
+import type { AppInfo, LibInfo } from "akanjs";
+
+export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: { appName: string }) {
+  return {
+    filename: "task.abstract.md",
+    content: `# Task Abstract
+
+## Akan.js Module Pattern
+
+Task is a **database-backed domain module** — the standard Akan.js pattern for persisted entities.
+This module demonstrates the full Akan.js module lifecycle:
+constant -> document -> service -> signal -> store -> UI.
+
+Every database module in Akan.js follows this layered architecture:
+- task.constant.ts — data shape (enum, Input, Object, Light, Full layers via via())
+- task.document.ts — DB queries, filters, sorts, indexes, Document chain methods
+- task.dictionary.ts — i18n labels, error messages, UI translations
+- task.service.ts — business logic orchestration bound to DB via serve(db.task, ...)
+- task.signal.ts — API surface (query, mutation, pubsub endpoints bound via endpoint(srv.task, ...))
+- task.store.ts — client state management bound to signal via store(sig.task, ...)
+- Task.*.tsx — UI components (Zone -> Load -> Unit / View / Template / Util)
+
+## Convention: lib/<module>/ directory naming
+
+- Database modules live under lib/<module>/ (no underscore prefix)
+- Files follow <module>.<layer>.ts naming — e.g., task.constant.ts, task.service.ts
+- UI files use PascalCase with explicit suffix: Task.Zone.tsx, Task.Unit.tsx, Task.View.tsx
+
+## Convention: scan-registered barrels
+
+akan scan auto-discovers each file and registers it in the corresponding barrel:
+cnst.ts, db.ts, dict.ts, srv.ts, sig.ts, st.ts
+
+## Related Modules
+
+- lib/__scalar/workHistory/ — standard scalar modules with double-underscore prefix (reusable field sets)
+- lib/_noti/ — pure service module (compare structure differences: no constant/document, serve without DB binding)
+`,
+  };
+}

package/templates/appSample/lib/task/task.constant.ts

@@ -0,0 +1,54 @@
+import type { AppInfo, LibInfo } from "akanjs";
+
+export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: { appName: string }) {
+  return {
+    filename: "task.constant.ts",
+    content: `import { enumOf } from "akanjs/base";
+import { via } from "akanjs/constant";
+
+import { WorkHistoryEntry } from "../__scalar/workHistory/workHistory.constant";
+
+// ===== task.constant.ts =====
+// Convention: <module>.constant.ts — the data shape layer of an Akan.js database module.
+// Import scalar primitives from akanjs/base; define model layers with via() from akanjs/constant.
+// Scalars are embedded via field([ScalarType], ...) — see WorkHistoryEntry embedding below.
+// Layer order: enum → Input → Object → Light → Full.
+//   Input = user-provided fields; Object = Input + system fields + embedded scalars; Light = subset for list views; Full = Object + Light.
+// Registered by akan scan into cnst.ts barrel.
+
+export class TaskStatus extends enumOf("taskStatus", [
+  "todo",
+  "inProgress",
+  "completed",
+] as const) {}
+
+export class TaskInput extends via((field) => ({
+  title: field(String),
+  content: field(String, { default: "" }),
+})) {}
+
+// TaskObject embeds WorkHistoryEntry as a list field — the scalar embedding pattern.
+// field([WorkHistoryEntry], { default: [] }) stores a list of scalar objects in the parent document.
+// Each status change (create, start, complete) pushes a new entry into this list.
+export class TaskObject extends via(TaskInput, (field) => ({
+  status: field(TaskStatus, { default: "todo" }),
+  due: field(Date).optional(),
+  workHistory: field([WorkHistoryEntry], { default: [] }),
+})) {}
+
+export class LightTask extends via(TaskObject, ["title", "status", "due"] as const, (resolve) => ({})) {}
+
+export class Task extends via(TaskObject, LightTask, (resolve) => ({})) {}
+
+// ---- Expandable additional fields: ----
+// ===== Add to TaskInput =====
+//  - priority: field(TaskPriority, { default: "medium" })
+//  - tags: field(String).list().optional()
+// ===== Add to TaskObject =====
+//  - assignee: field(ID).optional()
+//  - completedAt: field(Date).optional()
+// ===== Add to Task =====
+//  isOverdue(): boolean { return this.due && this.due < new Date() }
+`,
+  };
+}

package/templates/appSample/lib/task/task.dictionary.ts

@@ -0,0 +1,85 @@
+import type { AppInfo, LibInfo } from "akanjs";
+
+export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: { appName: string }) {
+  return {
+    filename: "task.dictionary.ts",
+    content: `import { modelDictionary } from "akanjs/dictionary";
+
+import type { Task, LightTask } from "./task.constant";
+import type { TaskFilter } from "./task.document";
+
+// ===== task.dictionary.ts =====
+// Convention: <module>.dictionary.ts — i18n labels and messages for a database module.
+// Uses modelDictionary(["en", "ko"]) from akanjs/dictionary — the framework convention for bilingual module dictionaries.
+// Sections: .of() module name, .model() field labels, .lightModel() list-view labels, .query() filter labels,
+// .sort() labels, .enum() value labels, .error() messages (thrown via Err()), .translate() UI messages (used in store via msg.xxx).
+// Registered by akan scan into dict.ts barrel.
+
+export const dictionary = modelDictionary(["en", "ko"])
+  .of((t) =>
+    t(["Task", "할 일"])
+      .desc(["A unit of work to be completed", "완료해야 할 작업 단위"]),
+  )
+  .model<Task>((t) => ({
+    title: t(["Title", "제목"]).desc(["Task title", "할 일 제목"]),
+    content: t(["Content", "내용"]).desc(["Detailed task description", "상세 작업 설명"]),
+    status: t(["Status", "상태"]).desc(["Current task status", "현재 작업 상태"]),
+    due: t(["Due Date", "마감일"]).desc(["Deadline for completion", "완료 마감일"]),
+    workHistory: t(["Work History", "작업 이력"]).desc(["Status change log", "상태 변경 기록"]),
+  }))
+  .lightModel<LightTask>((t) => ({
+    title: t(["Title", "제목"]),
+    status: t(["Status", "상태"]),
+    due: t(["Due", "마감"]),
+  }))
+  .query<TaskFilter>((fn) => ({
+    byStatus: fn(["By Status", "상태별"]).arg((t) => ({
+      status: t(["Status", "상태"]),
+    })),
+    dueBefore: fn(["Due Before", "이전 마감"]).arg((t) => ({
+      before: t(["Before Date", "기준일"]),
+    })),
+  }))
+  .sort<TaskFilter>((t) => ({
+    byDue: t(["By Due Date", "마감일순"]),
+    newest: t(["Newest First", "최신순"]),
+  }))
+  .enum<TaskStatus>("taskStatus", (t) => ({
+    todo: t(["To Do", "할 일"]),
+    inProgress: t(["In Progress", "진행 중"]),
+    completed: t(["Completed", "완료"]),
+  }))
+  .error({
+    cannotStartFromNonTodo: [
+      "Task can only start from todo status",
+      "할 일 상태에서만 시작할 수 있습니다",
+    ],
+    cannotCompleteFromNonInProgress: [
+      "Task can only complete from in-progress status",
+      "진행 중 상태에서만 완료할 수 있습니다",
+    ],
+  })
+  .translate({
+    createTaskLoading: ["Creating task…", "할 일 생성 중…"],
+    createTaskSuccess: ["Task created", "할 일이 생성되었습니다"],
+    startTaskLoading: ["Starting task…", "작업 시작 중…"],
+    startTaskSuccess: ["Task started", "작업이 시작되었습니다"],
+    completeTaskLoading: ["Completing task…", "작업 완료 중…"],
+    completeTaskSuccess: ["Task completed", "작업이 완료되었습니다"],
+    removeTaskLoading: ["Removing task…", "할 일 삭제 중…"],
+    removeTaskSuccess: ["Task removed", "할 일이 삭제되었습니다"],
+    taskDueLabel: ["Due:", "마감:"],
+    taskNoDue: ["No deadline", "마감 없음"],
+    taskWorkHistoryTitle: ["Work History", "작업 이력"],
+    taskStart: ["Start", "시작"],
+    taskComplete: ["Complete", "완료"],
+    taskRemove: ["Remove", "삭제"],
+    taskNoTasks: ["No tasks yet", "할 일이 없습니다"],
+    taskCreateFirst: ["+ Create your first task", "+ 첫 할 일 만들기"],
+    taskBackToTasks: ["← Back to Tasks", "← 할 일 목록으로"],
+    taskEdit: ["Edit", "수정"],
+    taskNew: ["+ New Task", "+ 새 할 일"],
+  });
+`,
+  };
+}

package/templates/appSample/lib/task/task.document.ts

@@ -0,0 +1,54 @@
+import type { AppInfo, LibInfo } from "akanjs";
+
+export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: { appName: string }) {
+  return {
+    filename: "task.document.ts",
+    content: `import { dayjs } from "akanjs/base";
+import { by, from, into } from "akanjs/document";
+
+import { Err } from "../dict";
+import * as cnst from "../cnst";
+
+// ===== task.document.ts =====
+// Convention: <module>.document.ts — the database query and persistence layer.
+// Import from/into/by from akanjs/document — the framework convention for Filter, Document, and Model classes.
+// Filter defines query/sort conditions (auto-generates List/Find/Pick/Exists/Count methods via akan scan).
+// Document defines chainable per-document methods (e.g., task.start().save()).
+// Model = into(Document, Filter, cnst.module, ...) — collection-level operations, schema hooks.
+// Registered by akan scan into db.ts barrel.
+
+export class TaskFilter extends from(cnst.Task, (filter) => ({
+  query: {
+    byStatus: filter()
+      .arg("status", cnst.TaskStatus)
+      .query((status) => ({ status })),
+    dueBefore: filter()
+      .arg("before", Date)
+      .query((before, q) => ({ due: q.lte(before) })),
+  },
+  sort: {
+    byDue: { due: 1 },
+    newest: { createdAt: -1 },
+  },
+})) {}
+
+export class TaskDocument extends by(cnst.Task) {
+  start() {
+    if (this.status !== "todo") throw new Err("task.error.cannotStartFromNonTodo");
+    this.status = "inProgress";
+    this.workHistory.push({ action: cnst.WorkHistoryAction.started, at: dayjs() } as cnst.WorkHistoryEntry);
+    return this;
+  }
+
+  complete() {
+    if (this.status !== "inProgress") throw new Err("task.error.cannotCompleteFromNonInProgress");
+    this.status = "completed";
+    this.workHistory.push({ action: cnst.WorkHistoryAction.completed, at: dayjs() } as cnst.WorkHistoryEntry);
+    return this;
+  }
+}
+
+export class TaskModel extends into(TaskDocument, TaskFilter, cnst.task, () => ({})) {}
+`,
+  };
+}

package/templates/appSample/lib/task/task.service.ts

@@ -0,0 +1,48 @@
+import type { AppInfo, LibInfo } from "akanjs";
+
+export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: { appName: string }) {
+  return {
+    filename: "task.service.ts",
+    content: `import { dayjs } from "akanjs/base";
+import { serve } from "akanjs/service";
+
+import * as cnst from "../cnst";
+import * as db from "../db";
+
+// ===== task.service.ts =====
+// Convention: <module>.service.ts — business logic orchestration for a database module.
+// Extends serve(db.<module>, depsCallback) from akanjs/service — binds to the DB model, receives DI deps.
+// Auto-generated by akan scan (do not write manually):
+//   getTask(id), createModel(data), updateModel(id, data), removeModel(id),
+//   listByStatus(status), searchDocs(text), and all filter+query methods from document.ts.
+// Manual below: lifecycle hooks, custom business logic methods.
+// Registered by akan scan into srv.ts barrel.
+
+export class TaskService extends serve(db.task, () => ({})) {
+  // Lifecycle hook: runs before every document creation.
+  // Auto-injects the initial workHistory entry for the scalar embedding pattern.
+  _preCreate(data: cnst.TaskInput): cnst.TaskInput {
+    return {
+      ...data,
+      workHistory: [{ action: cnst.WorkHistoryAction.created, at: dayjs(), note: "" } as cnst.WorkHistoryEntry],
+    };
+  }
+
+  async startTask(taskId: string) {
+    const task = await this.getTask(taskId);
+    return task.start().save();
+  }
+
+  async completeTask(taskId: string) {
+    const task = await this.getTask(taskId);
+    return task.complete().save();
+  }
+}
+
+// ---- Expandable additional fields: ----
+// export class TaskService extends serve(db.task, ({ service, use, signal, plug, env, memory }) => ({
+//   notiService: service<srv.NotiService>(),
+// })) {
+`,
+  };
+}

package/templates/appSample/lib/task/task.signal.ts

@@ -0,0 +1,49 @@
+import type { AppInfo, LibInfo } from "akanjs";
+
+export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: { appName: string }) {
+  return {
+    filename: "task.signal.ts",
+    content: `import { endpoint } from "akanjs/signal";
+
+import * as cnst from "../cnst";
+import * as srv from "../srv";
+
+// ===== task.signal.ts =====
+// Convention: <module>.signal.ts — the API surface for a database module.
+// Extends endpoint(srv.<module>, ...) from akanjs/signal — binds to the service to define query/mutation/pubsub.
+// endpoint() receives: { query, mutation, pubsub, message } — each typed with the model's return type.
+// .param() = URL path parameter, .body() = request body, .search() = query string.
+//
+// Auto-generated by akan scan (do not write manually):
+//   viewTask(id) — fetch single task for detail view
+//   editTask(id) — fetch task for edit view
+//   mergeTask(id, data) — create/update task
+// Manual endpoints below: only define endpoints that need custom business logic.
+// Registered by akan scan into sig.ts barrel.
+
+export class TaskEndpoint extends endpoint(srv.task, ({ mutation }) => ({
+  startTask: mutation(cnst.Task)
+    .param("taskId", String)
+    .exec(async function (taskId) {
+      return await this.taskService.startTask(taskId);
+    }),
+
+  completeTask: mutation(cnst.Task)
+    .param("taskId", String)
+    .exec(async function (taskId) {
+      return await this.taskService.completeTask(taskId);
+    }),
+})) {}
+
+// ---- Expandable additional fields: ----
+//   // message: server→client real-time message (WebSocket)
+//   taskCreated: message(cnst.Task).room("taskId", String).exec(...),
+//   // pubsub: publish-subscribe pattern
+//   taskEvent: pubsub(cnst.Task).exec(...),
+//   // search: search parameters (optional, URL query string)
+//   searchTask: query(cnst.LightTask).search("keyword", String).exec(...),
+//   // guards: authentication/authorization guards
+//   // export class TaskEndpoint extends endpoint(srv.task, { guards: { root: SignedIn } }, ({ query, mutation }) => ({})) {}
+`,
+  };
+}

package/templates/appSample/lib/task/task.store.ts

@@ -0,0 +1,45 @@
+import type { AppInfo, LibInfo } from "akanjs";
+
+export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: { appName: string }) {
+  return {
+    filename: "task.store.ts",
+    content: `import { store } from "akanjs/store";
+
+import { fetch, sig, msg } from "../useClient";
+
+// ===== task.store.ts =====
+// Convention: <module>.store.ts — client-side state management for a database module.
+// Extends store(sig.<module>, ...) from akanjs/store — binds to the signal to auto-generate model states/actions.
+// Auto-generated by akan scan (do not write manually):
+//   taskForm — form state bound to model fields (create + edit)
+//   setTitleOnTask, setContentOnTask, setDueOnTask — auto-setters for form fields
+//   createTask(data), updateTask(id, data), removeTask(id) — CRUD actions
+//   task (cached model), taskLoading, taskModal — model display states
+// Manual below: custom actions wrapping auto-generated fetch with toast feedback.
+// Registered by akan scan into st.ts barrel.
+
+export class TaskStore extends store(sig.task, () => ({})) {
+  async startTask(taskId: string) {
+    msg.loading("task.startTaskLoading", { key: "startTask" });
+    const task = await fetch.startTask(taskId);
+    msg.success("task.startTaskSuccess", { key: "startTask" });
+    this.setTask(task);
+  }
+
+  async completeTask(taskId: string) {
+    msg.loading("task.completeTaskLoading", { key: "completeTask" });
+    const task = await fetch.completeTask(taskId);
+    msg.success("task.completeTaskSuccess", { key: "completeTask" });
+    this.setTask(task);
+  }
+}
+
+// ---- Expandable additional fields: ----
+// Custom state (if needed):
+//   export class TaskStore extends store(sig.task, () => ({
+//     filterKeyword: "",
+//   })) { ... }
+// The auto-generated taskForm handles title, content, due states automatically.
+`,
+  };
+}

package/templates/appSample/page/task/[taskId]/_index.tsx

@@ -0,0 +1,39 @@
+import type { AppInfo, LibInfo } from "akanjs";
+
+export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: { appName: string }) {
+  return {
+    filename: "_index.tsx",
+    content: `
+import { fetch, usePage } from "@apps/${dict.appName}/client";
+import { Task } from "@apps/${dict.appName}/lib/task";
+import { Link } from "akanjs/ui";
+
+// ===== page/task/[taskId]/_index.tsx =====
+// Convention: Akan.js file-based routing with dynamic segments.
+// [taskId] folder = URL path parameter extracted via useParams() from akanjs/client.
+// Uses usePage().l() for i18n — the framework convention for dictionary-based translations.
+
+interface PageProps {
+  params: { taskId: string };
+}
+export default async function Page({ params: { taskId } }: PageProps) {
+  const { l } = usePage();
+  const { taskView } = await fetch.viewTask(taskId);
+  return (
+    <main className="mx-auto max-w-4xl px-6 py-8">
+      <div className="mb-6 flex items-center justify-between">
+        <a href="/task" className="btn btn-ghost btn-sm">
+          {l("task.taskBackToTasks")}
+        </a>
+        <Link href={\`/task/\${taskId}/edit\`} className="btn btn-primary btn-sm">
+          {l("task.taskEdit")}
+        </Link>
+      </div>
+
+      <Task.Zone.View className="max-w-2xl" view={taskView} />
+    </main>
+  );
+}
+`,
+  };
+}

package/templates/appSample/page/task/[taskId]/edit.tsx

@@ -0,0 +1,34 @@
+import type { AppInfo, LibInfo } from "akanjs";
+
+export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: { appName: string }) {
+  return {
+    filename: "edit.tsx",
+    content: `import { fetch, Task } from "@apps/${dict.appName}/client";
+import { Load } from "akanjs/ui";
+
+// ===== page/task/[taskId]/edit.tsx =====
+// Convention: Server-side edit form page using Load.Edit from akanjs/ui.
+// async Page() — fetches model data on the server via fetch.editTask(params.taskId).
+// The same Template (Task.Template.General) is reused here — no separate edit template needed.
+// Load.Edit with type="form" provides the submit/cancel wrapper with the pre-loaded model.
+
+interface PageProps {
+  params: { taskId: string };
+}
+export default async function Page({ params: { taskId } }: PageProps) {
+  const taskEdit = await fetch.editTask(taskId);
+
+  return (
+    <Load.Edit
+      slice={fetch.slice.task}
+      edit={taskEdit}
+      type="form"
+      onSubmit={\`/task/\${params.taskId}\`}
+    >
+      <Task.Template.General />
+    </Load.Edit>
+  );
+}
+`,
+  };
+}

package/templates/appSample/page/task/_index.tsx

@@ -0,0 +1,38 @@
+import type { AppInfo, LibInfo } from "akanjs";
+
+export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: { appName: string }) {
+  return {
+    filename: "_index.tsx",
+    content: `"use client";
+
+import { fetch, Task, usePage } from "@apps/${dict.appName}/client";
+import { Link } from "akanjs/ui";
+
+// ===== page/task/_index.tsx =====
+// Convention: Akan.js file-based routing — _index.tsx is the index page for /task.
+// Server-side data loading via loader() at the page level; passes init/view props to Zone components.
+// Uses usePage().l() for i18n — the framework convention for dictionary-based translations.
+
+export default function Page() {
+  const { l } = usePage();
+  return (
+    <main className="mx-auto max-w-4xl px-6 py-8">
+      <div className="mb-6 flex items-center justify-between">
+        <div>
+          <h1 className="font-extrabold text-3xl text-base-content">{l("task.modelName")}</h1>
+          <p className="mt-1 text-base-content/60 text-sm">
+            {l("task.modelDesc")}
+          </p>
+        </div>
+        <Link href="/task/new" className="btn btn-primary btn-sm">
+          {l("task.taskNew")}
+        </Link>
+      </div>
+
+      <Task.Zone.Card className="flex flex-col gap-3" init={fetch.slice.task} />
+    </main>
+  );
+}
+`,
+  };
+}