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

package/index.js

@@ -10761,7 +10761,7 @@ class ApplicationRunner extends runner("application") {
     await workspace.applyTemplate({
       basePath: `apps/${appName}`,
       template: "app",
-      dict: { appName, companyName: workspace.repoName, startDomain: "localhost" },
+      dict: { appName },
       options: { libs }
     });
     return AppExecutor.from(workspace, appName);
@@ -13996,6 +13996,12 @@ class WorkspaceScript extends script("workspace", [
       await this.libraryScript.installLibrary(workspace, "shared");
     }
     await this.applicationScript.createApplication(appName, workspace, { libs: installLibs ? ["util", "shared"] : [] });
+    await workspace.applyTemplate({
+      basePath: `apps/${appName}`,
+      template: "appSample",
+      dict: { appName },
+      options: { libs: installLibs ? ["util", "shared"] : [] }
+    });
     const gitSpinner = workspace.spinning("Initializing git repository and commit...");
     try {
       await workspace.commit("Initial commit", { init: true });
@@ -14063,7 +14069,8 @@ class WorkspaceCommand extends command("workspace", [WorkspaceScript], ({ public
         label: "Yes, I want to accelerate development by installing shared and util libraries (for akanjs experts)",
         value: true
       }
-    ]
+    ],
+    default: false
   }).option("init", Boolean, {
     desc: "Do you want to initialize the workspace? (Recommended)",
     default: true

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akanjs/cli",
-  "version": "2.3.1-rc.2",
+  "version": "2.3.1-rc.4",
   "sourceType": "module",
   "type": "module",
   "publishConfig": {
@@ -35,7 +35,7 @@
     "@langchain/openai": "^1.4.6",
     "@tailwindcss/node": "^4.3.0",
     "@trapezedev/project": "^7.1.4",
-    "akanjs": "2.3.1-rc.2",
+    "akanjs": "2.3.1-rc.4",
     "chalk": "^5.6.2",
     "commander": "^14.0.3",
     "daisyui": "^5.5.20",

package/templates/appSample/common/formatters.ts

@@ -0,0 +1,32 @@
+import type { AppInfo, LibInfo } from "akanjs";
+
+export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: { appName: string }) {
+  return {
+    filename: "formatters.ts",
+    content: `// ===== formatters.ts =====
+// Convention: common/ folder — only pure functions that run on both server and client.
+// Cannot import window, Bun, process.env, or any runtime-specific API.
+// Naming: camelCase .ts, file name = primary export name.
+// Scanned by akan scan into common/index.ts barrel automatically.
+
+export function trimString(str: string, maxLength = 50, suffix = "...") {
+  if (str.length <= maxLength) return str;
+  return str.slice(0, maxLength - suffix.length) + suffix;
+}
+
+export function formatKebabToPascal(str: string) {
+  return str
+    .split("-")
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join("");
+}
+
+// ---- Expandable additional fields: ----
+// File size formatter: 1024 → "1 KB"
+// export function formatBytes(bytes: number, decimals = 2) { ... }
+//
+// Relative date time: "3 hours ago", "just now"
+// export function formatRelativeTime(date: Date) { ... }
+`,
+  };
+}

package/templates/appSample/common/validators.ts

@@ -0,0 +1,32 @@
+import type { AppInfo, LibInfo } from "akanjs";
+
+export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: { appName: string }) {
+  return {
+    filename: "validators.ts",
+    content: `// ===== validators.ts =====
+// Convention: common/ folder — only pure functions that run on both server and client.
+// Cannot import window, Bun, process.env, or any runtime-specific API.
+// Naming: camelCase .ts, file name = primary export name.
+// Scanned by akan scan into common/index.ts barrel automatically.
+
+export function isValidEmail(email: string): boolean {
+  const emailRegex = /^[^s@]+@[^s@]+.[^s@]+$/;
+  return emailRegex.test(email);
+}
+
+export function isValidTaskTitle(title: string): boolean {
+  return title.trim().length > 0;
+}
+
+// ---- Expandable additional fields: ----
+// URL validation
+// export function isValidUrl(url: string) { try { new URL(url); return true; } catch { return false; } }
+//
+// Password strength check (8+ chars, special character)
+// export function isStrongPassword(password: string) { ... }
+//
+// Phone number format validation
+// export function isValidPhone(phone: string, locale = "KR") { ... }
+`,
+  };
+}

package/templates/appSample/lib/__scalar/workHistory/workHistory.abstract.ts

@@ -0,0 +1,47 @@
+import type { AppInfo, LibInfo } from "akanjs";
+
+export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: { appName: string }) {
+  return {
+    filename: "workHistory.abstract.md",
+    content: `# WorkHistory Scalar Abstract
+
+## Akan.js Module Pattern
+
+WorkHistory is a **scalar module** — a reusable value type under lib/__scalar/.
+Scalar modules are embedded into models via field([ScalarType]), not stored independently.
+They live under the double-underscore prefix to distinguish them from database models.
+
+Standard scalar layers:
+- workHistory.constant.ts — enum (WorkHistoryAction) + entry class (WorkHistoryEntry) defined via via() + enumOf()
+- workHistory.dictionary.ts — i18n via scalarDictionary() (fewer layers than modelDictionary)
+- workHistory.abstract.md — embedding rules and intent
+
+## Convention: lib/__scalar/<type>/ directory naming
+
+- Scalar modules use double-underscore prefix: lib/__scalar/workHistory/
+- Files drop the underscores: workHistory.constant.ts, not __workHistory.constant.ts
+- Models embed scalars via field([WorkHistoryEntry], { default: [] }) — list-of-scalar embedding
+
+## Embedding Example (in task.constant.ts)
+
+TaskObject embeds a list of WorkHistoryEntry:
+  import { WorkHistoryEntry } from "../../__scalar/workHistory/workHistory.constant";
+  export class TaskObject extends via(TaskInput, (field) => ({
+    workHistory: field([WorkHistoryEntry], { default: [] }),
+  }))
+
+Each status change (create, start, complete) pushes a new entry.
+
+## Agent Notes
+
+- Read this abstract before modifying the WorkHistory scalar.
+- Update when new action types or fields are added.
+- Do not duplicate workHistory fields in individual models; always reuse this scalar.
+
+## Related Modules
+
+- lib/task/ — database module embedding workHistory as a list field
+- lib/_noti/ — pure service module (different module type, no scalar usage)
+`,
+  };
+}

package/templates/appSample/lib/__scalar/workHistory/workHistory.constant.ts

@@ -0,0 +1,38 @@
+import type { AppInfo, LibInfo } from "akanjs";
+
+export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: { appName: string }) {
+  return {
+    filename: "workHistory.constant.ts",
+    content: `import { dayjs, enumOf } from "akanjs/base";
+import { via } from "akanjs/constant";
+
+// ===== workHistory.constant.ts =====
+// Convention: lib/__scalar/<type>/ — scalar modules use double-underscore prefix.
+// Scalars are embedded value shapes, reused across models via field([ScalarType], { default: [] }).
+// Define enums with enumOf() and entry classes with via() from akanjs/constant.
+
+// ---- Enum ----
+// WorkHistoryAction: the type of change recorded in a work history entry
+// Scalar enums follow the same enumOf() convention as model enums
+export class WorkHistoryAction extends enumOf("workHistoryAction", [
+  "created",
+  "started",
+  "completed",
+] as const) {}
+
+// ---- Scalar Entry ----
+// WorkHistoryEntry: a single entry in a model's workHistory list
+// Each status change in the owning model pushes a new entry into the list
+// field([WorkHistoryEntry], { default: [] }) in the parent model's Object layer
+export class WorkHistoryEntry extends via((field) => ({
+  action: field(WorkHistoryAction),
+  at: field(Date, { default: () => dayjs() }),
+  note: field(String, { default: "" }),
+})) {}
+
+// ---- Expandable additional fields: ----
+//  - actor: field(String).optional() — who performed the action
+//  - previousStatus: field(TaskStatus).optional() — status before the change
+`,
+  };
+}

package/templates/appSample/lib/__scalar/workHistory/workHistory.dictionary.ts

@@ -0,0 +1,28 @@
+import type { AppInfo, LibInfo } from "akanjs";
+
+export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: { appName: string }) {
+  return {
+    filename: "workHistory.dictionary.ts",
+    content: `import { scalarDictionary } from "akanjs/dictionary";
+
+import type { WorkHistoryAction, WorkHistoryEntry } from "./workHistory.constant";
+
+// ===== workHistory.dictionary.ts =====
+// Convention: scalarDictionary() for scalar module i18n — fewer layers than modelDictionary().
+// Scalar dictionaries define field labels and enum value labels only; no model/insight/query/sort layers.
+
+export const dictionary = scalarDictionary(["en", "ko"])
+  .model<WorkHistoryEntry>((t) => ({
+    action: t(["Action", "작업"]).desc(["Type of work history event", "작업 이력 이벤트 유형"]),
+    at: t(["At", "시간"]).desc(["When the event occurred", "이벤트 발생 시간"]),
+    note: t(["Note", "메모"]).desc(["Optional note about the event", "이벤트에 대한 선택적 메모"]),
+  }))
+  .enum<WorkHistoryAction>("workHistoryAction", (t) => ({
+    created: t(["Created", "생성됨"]).desc(["Task was created", "할 일이 생성됨"]),
+    started: t(["Started", "시작됨"]).desc(["Task was started", "할 일이 시작됨"]),
+    completed: t(["Completed", "완료됨"]).desc(["Task was completed", "할 일이 완료됨"]),
+  }))
+  .translate({});
+`,
+  };
+}

package/templates/appSample/lib/_noti/noti.abstract.ts

@@ -0,0 +1,38 @@
+import type { AppInfo, LibInfo } from "akanjs";
+
+export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: { appName: string }) {
+  return {
+    filename: "noti.abstract.md",
+    content: `# Noti Abstract
+
+## Akan.js Module Pattern
+
+Noti is a **pure service module** — not a database module. It demonstrates the Akan.js convention
+for modules that orchestrate behavior without owning a persistent document model.
+
+Both module types follow the same layer pattern, but service modules have fewer layers:
+no constant.ts (no data shape), no document.ts (no DB queries), no UI components.
+
+- noti.service.ts — business logic via serve("noti" as const, ...) (named service, no DB binding)
+- noti.signal.ts — real-time pubsub endpoint bound via endpoint(srv.noti, ...)
+- noti.store.ts — client state via store("noti" as const, ...) (named store, no signal binding)
+- noti.dictionary.ts — i18n via serviceDictionary() (no model field labels)
+
+## Convention: lib/_<service>/ directory naming
+
+- Service modules live under lib/_<service>/ — the underscore prefix signals "this is a service, not a database model."
+- Files drop the underscore: lib/_noti/noti.service.ts, not lib/_noti/_noti.service.ts.
+- Scan registers into the same barrel files: srv.ts, sig.ts, st.ts, dict.ts.
+
+## Convention: named serve/store (no DB binding)
+
+- serve("noti" as const, ...) — service name passed as string, no db.<module> binding.
+- store("noti" as const, ...) — store name passed as string, no sig.<module> binding.
+
+## Related Modules
+
+- lib/task/ — database module reference (compare structure differences)
+- lib/__scalar/workHistory/ — reusable scalar field modules (double-underscore prefix, embedded in models)
+`,
+  };
+}

package/templates/appSample/lib/_noti/noti.dictionary.ts

@@ -0,0 +1,25 @@
+import type { AppInfo, LibInfo } from "akanjs";
+
+export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: { appName: string }) {
+  return {
+    filename: "noti.dictionary.ts",
+    content: `import { serviceDictionary } from "akanjs/dictionary";
+
+// ===== noti.dictionary.ts =====
+// Convention: <module>.dictionary.ts for a pure service module.
+// Uses serviceDictionary(["en", "ko"]) from akanjs/dictionary — the framework convention for service dictionaries.
+// Unlike modelDictionary, no model/lightModel/query/sort/enum sections (service modules have no DB model).
+// Sections: .endpoint() for signal endpoint names, .translate() for UI messages.
+// Registered by akan scan into dict.ts barrel.
+
+export const dictionary = serviceDictionary(["en", "ko"])
+  .endpoint<typeof import("./noti.signal").NotiEndpoint>((fn) => ({
+    send: fn(["Send Notification", "알림 보내기"]),
+  }))
+  .translate({
+    notiReceived: ["New notification", "새 알림이 도착했습니다"],
+    notiMarkAllRead: ["Mark all as read", "모두 읽음으로 표시"],
+  });
+`,
+  };
+}

package/templates/appSample/lib/_noti/noti.service.ts

@@ -0,0 +1,31 @@
+import type { AppInfo, LibInfo } from "akanjs";
+
+export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: { appName: string }) {
+  return {
+    filename: "noti.service.ts",
+    content: `import { serve } from "akanjs/service";
+import { dayjs } from "akanjs/base";
+
+// ===== noti.service.ts =====
+// Convention: <module>.service.ts for a pure service module.
+// Extends serve("noti" as const, ...) — named service (string literal), no DB model binding.
+// DB modules use serve(db.<module>, ...); service modules use serve("<name>" as const, ...).
+// DI deps available: { service, use, signal, plug, env, memory }.
+// Registered by akan scan into srv.ts barrel.
+
+export class NotiService extends serve("noti" as const, () => ({})) {}
+
+// ---- Expandable additional fields: ----
+// export class NotiService extends serve("noti" as const, ({ plug, env, service }) => ({
+//   pushApi: plug(PushApi),
+//   fcmKey: env((options) => options.fcmKey),
+//   taskService: service<srv.TaskService>(),
+// })) {
+//   async sendPush(userId: string, title: string, body: string) {
+//     const token = await this.getDeviceToken(userId);
+//     return this.pushApi.send({ token, title, body });
+//   }
+// }
+`,
+  };
+}

package/templates/appSample/lib/_noti/noti.signal.ts

@@ -0,0 +1,30 @@
+import type { AppInfo, LibInfo } from "akanjs";
+
+export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: { appName: string }) {
+  return {
+    filename: "noti.signal.ts",
+    content: `import { dayjs } from "akanjs/base";
+import { endpoint } from "akanjs/signal";
+
+import * as srv from "../srv";
+
+// ===== noti.signal.ts =====
+// Convention: <module>.signal.ts for a pure service module.
+// Extends endpoint(srv.<module>, ...) — pubsub endpoint for real-time server→client communication.
+// pubsub() is the Akan.js convention for publish-subscribe: server publishes, all connected clients receive.
+// Client subscribes via fetch.subscribeSend((data) => { ... }).
+// Registered by akan scan into sig.ts barrel.
+
+export class NotiEndpoint extends endpoint(srv.noti, ({ pubsub }) => ({
+
+})) {}
+
+// ---- Expandable additional fields: ----
+//   history: query(NotiHistory)
+//     .param("userId", String)
+//     .exec(async function (userId) {
+//       return await this.notiService.getHistory(userId);
+//     }),
+`,
+  };
+}

package/templates/appSample/lib/_noti/noti.store.ts

@@ -0,0 +1,38 @@
+import type { AppInfo, LibInfo } from "akanjs";
+
+export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: { appName: string }) {
+  return {
+    filename: "noti.store.ts",
+    content: `import { dayjs } from "akanjs/base";
+import { store } from "akanjs/store";
+
+// ===== noti.store.ts =====
+// Convention: <module>.store.ts for a pure service module.
+// Extends store("noti" as const, ...) — named store (string literal), no signal binding.
+// DB modules use store(sig.<module>, ...); service modules use store("<name>" as const, ...).
+// State definitions use direct property assignment. Actions use this.set() / this.get().
+// Registered by akan scan into st.ts barrel.
+
+export class NotiStore extends store("noti" as const, () => ({
+  notiList: [] as { id: string; type: string; message: string; sentAt: dayjs.Dayjs }[],
+  unreadCount: 0,
+})) {
+  addNoti(noti: { type: string; message: string; sentAt: dayjs.Dayjs }) {
+    const id = Math.random().toString(36).slice(2);
+    this.set({
+      notiList: [...(this.get().notiList ?? []), { ...noti, id }],
+      unreadCount: (this.get().unreadCount ?? 0) + 1,
+    });
+  }
+  markAllRead() {
+    this.set({ unreadCount: 0 });
+  }
+  removeNoti(id: string) {
+    this.set({
+      notiList: (this.get().notiList ?? []).filter((n) => n.id !== id),
+    });
+  }
+}
+`,
+  };
+}

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

@@ -0,0 +1,49 @@
+import type { AppInfo, LibInfo } from "akanjs";
+
+export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: { appName: string }) {
+  return {
+    filename: "Task.Template.tsx",
+    content: `"use client";
+
+import { clsx } from "akanjs/client";
+import { Field, Layout } from "akanjs/ui";
+
+import { st, usePage } from "@apps/${dict.appName}/client";
+
+// ===== Task.Template.tsx =====
+// Convention: lib/<module>/ — PascalCase .tsx, Template suffix = form/edit template component.
+// Uses akanjs/ui Field and Layout components: the framework convention for controlled form UIs.
+// "use client" directive required — form events (onChange) are client-side only.
+// Uses st.use.taskForm() — auto-generated form state bound to the model (handles create + edit).
+// Auto-generated setters: st.do.setTitleOnTask, st.do.setContentOnTask, st.do.setDueOnTask.
+// Invoked by Akan's data-loading zone chain: Task.Zone → Load.Edit → Task.Template.
+
+interface TaskEditProps {
+  className?: string;
+}
+
+export const General = ({ className }: TaskEditProps) => {
+  const taskForm = st.use.taskForm();
+  const { l } = usePage();
+
+  return (
+    <Layout.Template className={clsx("flex flex-col gap-4", className)}>
+      <Field.Text
+        label={l("task.title")}
+        desc={l("task.title.desc")}
+        value={taskForm.title}
+        onChange={st.do.setTitleOnTask}
+      />
+      <Field.Text
+        label={l("task.content")}
+        desc={l("task.content.desc")}
+        value={taskForm.content}
+        onChange={st.do.setContentOnTask}
+        multiline
+      />
+    </Layout.Template>
+  );
+};
+`,
+  };
+}

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

@@ -0,0 +1,70 @@
+import type { AppInfo, LibInfo } from "akanjs";
+
+export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: { appName: string }) {
+  return {
+    filename: "Task.Unit.tsx",
+    content: `import { type ModelProps, clsx } from "akanjs/client";
+import { Layout } from "akanjs/ui";
+
+import * as cnst from "@apps/${dict.appName}/lib/cnst";
+import { usePage } from "@apps/${dict.appName}/client";
+
+// ===== Task.Unit.tsx =====
+// Convention: lib/<module>/ — PascalCase .tsx, Unit suffix = card/list-item component.
+// Unit receives LightModel as props via the ModelProps<modelName, LightModelType> generic from akanjs/client.
+// Wraps content in Layout.Unit — Akan.js convention for navigable cards in a list.
+// Uses usePage().l() for i18n — the framework convention for dictionary-based translations.
+// Enum values are accessed via l("taskStatus.todo") — dotted path to dictionary enum keys.
+// Invoked by Akan's data-loading zone chain: Task.Zone → Load.Units → Task.Unit.
+
+interface CardProps extends ModelProps<"task", cnst.LightTask> {
+  className?: string;
+}
+
+export const Card = ({ task, className, href }: CardProps) => {
+  const { l } = usePage();
+  const statusBadge = {
+    todo: "badge-ghost",
+    inProgress: "badge-primary",
+    completed: "badge-success",
+  }[task.status];
+
+  return (
+    <Layout.Unit
+      className={clsx(
+        "rounded-lg border border-base-content/10 bg-base-100 p-4 transition-shadow hover:shadow-md",
+        className,
+      )}
+      href={href}
+    >
+      <div className="flex items-start justify-between gap-2">
+        <span className="font-semibold text-base-content">{task.title}</span>
+        <span className={clsx("badge badge-sm shrink-0", statusBadge)}>
+          {l(\`taskStatus.\${task.status}\`)}
+        </span>
+      </div>
+      {task.due && (
+        <div className="mt-2 text-base-content/60 text-xs">
+          {l("task.taskDueLabel")} {task.due.toDate().toLocaleDateString()}
+        </div>
+      )}
+    </Layout.Unit>
+  );
+};
+
+// ---- Expandable additional fields: ----
+// Mini: smaller inline display (tag, chip style)
+// export const Mini = ({ task }: MiniProps) => (
+//   <span className="inline-flex items-center gap-1 text-sm">
+//     <span className={clsx("badge badge-xs", statusBadge)}>{task.status}</span>
+//     {task.title}
+//   </span>
+// );
+//
+// Abstract: abstracted summary display (search results, previews)
+// export const Abstract = ({ task }: AbstractProps) => (
+//   <div className="text-sm">{task.title} — {l("taskStatus", task.status)}</div>
+// );
+`,
+  };
+}

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

@@ -0,0 +1,103 @@
+import type { AppInfo, LibInfo } from "akanjs";
+
+export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: { appName: string }) {
+  return {
+    filename: "Task.Util.tsx",
+    content: `"use client";
+
+import { st, usePage } from "@apps/${dict.appName}/client";
+import { Model } from "akanjs/ui";
+
+// ===== Task.Util.tsx =====
+// Convention: lib/<module>/ — PascalCase .tsx, Util suffix = action buttons/utility components.
+// "use client" directive required for onClick handlers.
+// Dispatches to store actions via st.do.xxx() — the Akan.js convention for invoking client-side operations.
+// Uses usePage().l() for i18n — the framework convention for dictionary-based translations.
+// Wraps destructive actions in Model.Remove from akanjs/ui — the framework convention for confirmation dialogs.
+
+interface StartProps {
+  taskId: string;
+}
+
+export const Start = ({ taskId }: StartProps) => (
+  <button
+    className="btn btn-xs border-primary/20 bg-primary/10 text-primary hover:bg-primary hover:text-primary-content"
+    onClick={() => st.do.startTask(taskId)}
+  >
+    {usePage().l("task.taskStart")}
+  </button>
+);
+
+interface CompleteProps {
+  taskId: string;
+}
+
+export const Complete = ({ taskId }: CompleteProps) => (
+  <button
+    className="btn btn-xs border-success/20 bg-success/10 text-success hover:bg-success hover:text-success-content"
+    onClick={() => st.do.completeTask(taskId)}
+  >
+    {usePage().l("task.taskComplete")}
+  </button>
+);
+
+interface RemoveProps {
+  taskId: string;
+}
+
+export const Remove = ({ taskId }: RemoveProps) => (
+  <Model.Remove modelId={taskId}>
+    <button className="btn btn-xs btn-ghost text-error">{usePage().l("task.taskRemove")}</button>
+  </Model.Remove>
+);
+
+interface ToolboxProps {
+  taskId: string;
+  status: string;
+}
+
+export const Toolbox = ({ taskId, status }: ToolboxProps) => {
+  const { l } = usePage();
+  return (
+    <div className="dropdown dropdown-end">
+      <button tabIndex={0} className="btn btn-xs btn-ghost">
+        ···
+      </button>
+      <ul tabIndex={0} className="dropdown-content menu rounded-box z-[1] w-40 border border-base-content/10 bg-base-100 p-2 shadow">
+        {status === "todo" && (
+          <li>
+            <button onClick={() => st.do.startTask(taskId)}>{l("task.taskStart")}</button>
+          </li>
+        )}
+        {status === "inProgress" && (
+          <li>
+            <button onClick={() => st.do.completeTask(taskId)}>{l("task.taskComplete")}</button>
+          </li>
+        )}
+        <li>
+          <button className="text-error" onClick={() => st.do.removeTask(taskId)}>
+            {l("task.taskRemove")}
+          </button>
+        </li>
+      </ul>
+    </div>
+  );
+};
+
+// ---- Expandable additional fields: ----
+// Edit Button: Model.Edit wrapper — triggers modal edit form
+// export const Edit = ({ taskId }: EditProps) => (
+//   <Model.Edit renderTitle="title" modelId={taskId}>
+//     <Task.Template.General />
+//   </Model.Edit>
+// );
+//
+// New Task Button: Model.NewWrapper — triggers new Task creation form
+// export const NewTask = () => (
+//   <Model.NewWrapper partial={{}}>
+//     <button className="btn btn-primary btn-sm">+ New Task</button>
+//   </Model.NewWrapper>
+// );
+`,
+  };
+}