@akanjs/cli 3.0.0-alpha.103 → 3.0.0-alpha.104

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

@@ -4,39 +4,34 @@ export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: { a
   return {
     filename: "edit.tsx",
     content: `import { fetch, Task } from "@apps/${dict.appName}/client";
+import { ID } from "akanjs/base";
+import { page } from "akanjs/client";
 import { Load, Link, buttonRecipe } 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.
+export default page()
+  .param("taskId", ID)
+  .render(async ({ taskId }) => {
+    const { taskEdit } = await fetch.editTask(taskId);
 
-interface PageProps {
-  params: { taskId: string };
-}
-export default async function Page({ params: { taskId } }: PageProps) {
-  const { taskEdit } = await fetch.editTask(taskId);
-
-  return (
-    <main className="mx-auto max-w-2xl px-6 py-8">
-      <div className="mb-6">
-        <Link href={\`/task/\${taskId}\`} className={buttonRecipe({ variant: "ghost", size: "sm" })}>
-          ← Back to Task
-        </Link>
-      </div>
-      <div className="mb-6">
-        <h1 className="font-extrabold text-3xl text-foreground">Edit Task</h1>
-        <p className="mt-1 text-foreground/60 text-sm">Update the task details</p>
-      </div>
-      <div className="rounded-xl border border-foreground/10 bg-background p-6 shadow-sm">
-        <Load.Edit slice={fetch.slice.taskInPublic} edit={taskEdit} type="form" onSubmit={\`/task/\${taskId}\`}>
-          <Task.Template.General />
-        </Load.Edit>
-      </div>
-    </main>
-  );
-}
+    return (
+      <main className="mx-auto max-w-2xl px-6 py-8">
+        <div className="mb-6">
+          <Link href={\`/task/\${taskId}\`} className={buttonRecipe({ variant: "ghost", size: "sm" })}>
+            ← Back to Task
+          </Link>
+        </div>
+        <div className="mb-6">
+          <h1 className="font-extrabold text-3xl text-foreground">Edit Task</h1>
+          <p className="mt-1 text-foreground/60 text-sm">Update the task details</p>
+        </div>
+        <div className="rounded-xl border border-foreground/10 bg-background p-6 shadow-sm">
+          <Load.Edit slice={fetch.slice.taskInPublic} edit={taskEdit} type="form" onSubmit={\`/task/\${taskId}\`}>
+            <Task.Template.General />
+          </Load.Edit>
+        </div>
+      </main>
+    );
+  });
 `,
   };
 }

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

@@ -4,14 +4,10 @@ export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: { a
   return {
     filename: "_index.tsx",
     content: `import { fetch, Task, usePage } from "@apps/${dict.appName}/client";
+import { page } from "akanjs/client";
 import { Link, buttonRecipe } 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 async function Page() {
+export default page().render(async () => {
   const { l } = usePage();
   const { taskInitInPublic } = await fetch.initTaskInPublic();
   return (
@@ -29,6 +25,6 @@ export default async function Page() {
       <Task.Zone.Card className="flex flex-col gap-3" init={taskInitInPublic} />
     </main>
   );
-}`,
+});`,
   };
 }

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

@@ -3,22 +3,11 @@ import type { AppInfo, LibInfo } from "akanjs";
 export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: { appName: string }) {
   return {
     filename: "_layout.tsx",
-    content: `
-// ===== page/task/_layout.tsx =====
-// Convention: Akan.js file-based routing — _layout.tsx wraps every sub-page under /task/*.
-// The underscores mark it as a routing file; children = sub-page component from nested routes.
-// Rendered by Akan's router: URL → _layout.tsx → children (e.g., _index.tsx or [taskId]/_index.tsx).
+    content: `import { layout } from "akanjs/client";
 
-interface LayoutProps {
-  children: React.ReactNode;
-}
-export default function Layout({ children }: LayoutProps) {
-  return (
-    <div className="min-h-screen bg-muted">
-      {children}
-    </div>
-  );
-}
+export default layout().render(({ children }) => {
+  return <div className="min-h-screen bg-muted">{children}</div>;
+});
 `,
   };
 }

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

@@ -3,17 +3,11 @@ import type { AppInfo, LibInfo } from "akanjs";
 export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: { appName: string }) {
   return {
     filename: "new.tsx",
-    content: `import { type cnst, fetch, Task, usePage } from "@apps/${dict.appName}/client";
+    content: `import { type cnst, fetch, Task } from "@apps/${dict.appName}/client";
+import { page } from "akanjs/client";
 import { Load, Link, buttonRecipe } from "akanjs/ui";
 
-// ===== page/task/new.tsx =====
-// Convention: Server-side form page using Load.Edit from akanjs/ui.
-// async Page() — server-side component that pre-initializes form data before rendering.
-// Load.Edit with type="form" renders the Template inside a form wrapper with submit/cancel actions.
-// onCancel="back" navigates to the previous page; onSubmit specifies the redirect after success.
-// Template is reused — same Task.Template.General used for create, edit, and client-side modals.
-
-export default async function Page() {
+export default page().render(() => {
   const taskForm: Partial<cnst.Task> = { status: "todo" };
 
   return (
@@ -34,6 +28,6 @@ export default async function Page() {
       </div>
     </main>
   );
-}`,
+});`,
   };
 }

package/templates/crudPages/[__model__Id]/edit/page.tsx

@@ -10,38 +10,36 @@ export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: Dic
     filename: "_index.tsx",
     content: `
 import { ${dict.Model}, fetch, usePage } from "@apps/${dict.appName}/client";
-import type { PageConfig } from "akanjs/client";
+import { ID } from "akanjs/base";
+import { page } from "akanjs/client";
 import { Load } from "akanjs/ui";
 
-interface PageProps {
-  params: { ${dict.model}Id: string };
-}
-
-export default async function Page({ params }: PageProps) {
-  const { l } = usePage();
-  const { ${dict.model}Id } = params;
-  const [{ ${dict.model}Edit }] = await Promise.all([fetch.edit${dict.Model}(${dict.model}Id)]);
-  return (
-    <div className="container">
-      <div className="m-4 mt-8 flex justify-between">
-        <div className="flex items-center gap-2 text-primary text-xl">
-          {l("base.updateModel", { model: l("${dict.model}.modelName") })}
+export default page()
+  .param("${dict.model}Id", ID)
+  .config({ transition: "none" })
+  .render(async ({ ${dict.model}Id }) => {
+    const { l } = usePage();
+    const [{ ${dict.model}Edit }] = await Promise.all([fetch.edit${dict.Model}(${dict.model}Id)]);
+    return (
+      <div className="container">
+        <div className="m-4 mt-8 flex justify-between">
+          <div className="flex items-center gap-2 text-primary text-xl">
+            {l("base.updateModel", { model: l("${dict.model}.modelName") })}
+          </div>
         </div>
+        <Load.Edit
+          className="flex flex-col items-center"
+          slice={fetch.slice.${dict.model}InPublic}
+          edit={${dict.model}Edit}
+          type="form"
+          onCancel="back"
+          onSubmit="/${dict.model}"
+        >
+          <${dict.Model}.Template.General />
+        </Load.Edit>
       </div>
-      <Load.Edit
-        className="flex flex-col items-center"
-        slice={fetch.slice.${dict.model}InPublic}
-        edit={${dict.model}Edit}
-        type="form"
-        onCancel="back"
-        onSubmit="/${dict.model}"
-      >
-        <${dict.Model}.Template.General />
-      </Load.Edit>
-    </div>
-  );
-}
-export const pageConfig = { transition: "none" } satisfies PageConfig;
+    );
+  });
 `,
   };
 }

package/templates/crudPages/[__model__Id]/page.tsx

@@ -10,40 +10,35 @@ export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: Dic
     filename: "_index.tsx",
     content: `
 import { ${dict.Model}, fetch, usePage } from "@apps/${dict.appName}/client";
-import type { PageConfig } from "akanjs/client";
+import { ID } from "akanjs/base";
+import { page } from "akanjs/client";
 import { buttonRecipe, Link } from "akanjs/ui";
 
-interface PageProps {
-  params: { ${dict.model}Id: string };
-}
-
-export function generateHead({ params }: PageProps) {
-  const { ${dict.model}Id } = params;
-  return (
+export default page()
+  .param("${dict.model}Id", ID)
+  .config({ transition: "none" })
+  .head(({ ${dict.model}Id }) => (
     <>
       <title>{${dict.model}Id}</title>
       <meta name="description" content={${dict.model}Id} />
       <meta property="og:title" content={${dict.model}Id} />
       <meta property="og:description" content={${dict.model}Id} />
     </>
-  );
-}
-export default async function Page({ params }: PageProps) {
-  const { l } = usePage();
-  const { ${dict.model}Id } = params;
-  const [{ ${dict.model}, ${dict.model}View }] = await Promise.all([fetch.view${dict.Model}(${dict.model}Id)]);
-  return (
-    <div className="container flex flex-col gap-4">
-      <div className="flex items-center gap-4 font-bold text-lg">
-        <${dict.Model}.Zone.View view={${dict.model}View} />
-        <Link className={buttonRecipe()} href={\`/${dict.model}/\${${dict.model}.id}/edit\`}>
-          {l("base.updateModel", { model: l("${dict.model}.modelName") })}
-        </Link>
+  ))
+  .render(async ({ ${dict.model}Id }) => {
+    const { l } = usePage();
+    const [{ ${dict.model}, ${dict.model}View }] = await Promise.all([fetch.view${dict.Model}(${dict.model}Id)]);
+    return (
+      <div className="container flex flex-col gap-4">
+        <div className="flex items-center gap-4 font-bold text-lg">
+          <${dict.Model}.Zone.View view={${dict.model}View} />
+          <Link className={buttonRecipe()} href={\`/${dict.model}/\${${dict.model}.id}/edit\`}>
+            {l("base.updateModel", { model: l("${dict.model}.modelName") })}
+          </Link>
+        </div>
       </div>
-    </div>
-  );
-}
-export const pageConfig = { transition: "none" } satisfies PageConfig;
+    );
+  });
 `,
   };
 }

package/templates/crudPages/new/page.tsx

@@ -10,33 +10,34 @@ export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: Dic
     filename: "_index.tsx",
     content: `
 import { type cnst, fetch, usePage, ${dict.Model} } from "@apps/${dict.appName}/client";
-import type { PageConfig } from "akanjs/client";
+import { page } from "akanjs/client";
 import { Load } from "akanjs/ui";
 
-export default function Page() {
-  const { l } = usePage();
-  const ${dict.model}Form: Partial<cnst.${dict.Model}> = {};
-  return (
-    <div className="container">
-      <div className="m-4 mt-8 flex justify-between">
-        <div className="flex items-center gap-2 text-primary text-xl">
-          + {l("base.createModel", { model: l("${dict.model}.modelName") })}
+export default page()
+  .config({ transition: "none" })
+  .render(() => {
+    const { l } = usePage();
+    const ${dict.model}Form: Partial<cnst.${dict.Model}> = {};
+    return (
+      <div className="container">
+        <div className="m-4 mt-8 flex justify-between">
+          <div className="flex items-center gap-2 text-primary text-xl">
+            + {l("base.createModel", { model: l("${dict.model}.modelName") })}
+          </div>
         </div>
+        <Load.Edit
+          className="flex flex-col items-center"
+          slice={fetch.slice.${dict.model}InPublic}
+          edit={${dict.model}Form}
+          type="form"
+          onCancel="back"
+          onSubmit="/${dict.model}"
+        >
+          <${dict.Model}.Template.General />
+        </Load.Edit>
       </div>
-      <Load.Edit
-        className="flex flex-col items-center"
-        slice={fetch.slice.${dict.model}InPublic}
-        edit={${dict.model}Form}
-        type="form"
-        onCancel="back"
-        onSubmit="/${dict.model}"
-      >
-        <${dict.Model}.Template.General />
-      </Load.Edit>
-    </div>
-  );
-}
-export const pageConfig = { transition: "none" } satisfies PageConfig;
+    );
+  });
 `,
   };
 }

package/templates/crudPages/page.tsx

@@ -10,34 +10,35 @@ export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: Dic
     filename: "_index.tsx",
     content: `
 import { ${dict.Model}, fetch, usePage } from "@apps/${dict.appName}/client";
-import type { PageConfig } from "akanjs/client";
+import { page } from "akanjs/client";
 import { buttonRecipe, Link } from "akanjs/ui";
 
-export default async function Page() {
-  const { l } = usePage();
-  const [{ ${dict.model}InitInPublic }] = await Promise.all([fetch.init${dict.Model}InPublic()]);
-  return (
-    <div className="container flex flex-col gap-4">
-      <div className="mt-5 h-full w-full px-5">
-        <div>{l("${dict.model}.modelName")}</div>
-        <div className="flex animate-fadeIn items-center gap-4 px-4 pt-4">
-          <div className="font-bold text-lg md:text-4xl">${dict.Model}s</div>
-          <Link className={buttonRecipe()} href="/${dict.model}/new">
-            + {l("base.createModel", { model: l("${dict.model}.modelName") })}
-          </Link>
-        </div>
-        <div>{l("${dict.model}.modelDesc")}</div>
-        <div className="mt-3 flex gap-4 px-6">
-          <${dict.Model}.Zone.Card
-            className="grid w-full animate-fadeIn grid-cols-1 justify-center gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5"
-            init={${dict.model}InitInPublic}
-          />
+export default page()
+  .config({ transition: "none" })
+  .render(async () => {
+    const { l } = usePage();
+    const [{ ${dict.model}InitInPublic }] = await Promise.all([fetch.init${dict.Model}InPublic()]);
+    return (
+      <div className="container flex flex-col gap-4">
+        <div className="mt-5 h-full w-full px-5">
+          <div>{l("${dict.model}.modelName")}</div>
+          <div className="flex animate-fadeIn items-center gap-4 px-4 pt-4">
+            <div className="font-bold text-lg md:text-4xl">${dict.Model}s</div>
+            <Link className={buttonRecipe()} href="/${dict.model}/new">
+              + {l("base.createModel", { model: l("${dict.model}.modelName") })}
+            </Link>
+          </div>
+          <div>{l("${dict.model}.modelDesc")}</div>
+          <div className="mt-3 flex gap-4 px-6">
+            <${dict.Model}.Zone.Card
+              className="grid w-full animate-fadeIn grid-cols-1 justify-center gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5"
+              init={${dict.model}InitInPublic}
+            />
+          </div>
         </div>
       </div>
-    </div>
-  );
-}
-export const pageConfig = { transition: "none" } satisfies PageConfig;
+    );
+  });
 `,
   };
 }

package/templates/crudSinglePage/page.tsx

@@ -10,32 +10,33 @@ export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: Dic
     filename: "_index.tsx",
     content: `
 import { ${dict.Model}, fetch, usePage } from "@apps/${dict.appName}/client";
-import type { PageConfig } from "akanjs/client";
+import { page } from "akanjs/client";
 import { buttonRecipe, Model } from "akanjs/ui";
 
-export default async function Page() {
-  const { l } = usePage();
-  const [{ ${dict.model}InitInPublic }] = await Promise.all([fetch.init${dict.Model}InPublic()]);
-  return (
-    <>
-      <div className="flex animate-fadeIn items-center gap-4 px-4 pt-4">
-        <div className="font-bold text-lg md:text-4xl">{l("${dict.model}.modelName")}</div>
-        <Model.New
-          className={buttonRecipe({ size: "sm", variant: "ghost" })}
-          slice={fetch.slice.${dict.model}InPublic}
-          renderTitle="id"
-        >
-          <${dict.Model}.Template.General />
-        </Model.New>
-      </div>
-      <${dict.Model}.Zone.Card
-        className="mt-2 grid w-full animate-fadeIn grid-cols-1 justify-center gap-4 md:grid-cols-2 xl:grid-cols-3"
-        init={${dict.model}InitInPublic}
-      />
-    </>
-  );
-}
-export const pageConfig = { transition: "none" } satisfies PageConfig;
+export default page()
+  .config({ transition: "none" })
+  .render(async () => {
+    const { l } = usePage();
+    const [{ ${dict.model}InitInPublic }] = await Promise.all([fetch.init${dict.Model}InPublic()]);
+    return (
+      <>
+        <div className="flex animate-fadeIn items-center gap-4 px-4 pt-4">
+          <div className="font-bold text-lg md:text-4xl">{l("${dict.model}.modelName")}</div>
+          <Model.New
+            className={buttonRecipe({ size: "sm", variant: "ghost" })}
+            slice={fetch.slice.${dict.model}InPublic}
+            renderTitle="id"
+          >
+            <${dict.Model}.Template.General />
+          </Model.New>
+        </div>
+        <${dict.Model}.Zone.Card
+          className="mt-2 grid w-full animate-fadeIn grid-cols-1 justify-center gap-4 md:grid-cols-2 xl:grid-cols-3"
+          init={${dict.model}InitInPublic}
+        />
+      </>
+    );
+  });
 `,
   };
 }

package/{workflow.command-kphbr7eh.js → workflow.command-nwpcdc8p.js}

@@ -3,30 +3,30 @@ import {
   Workspace,
   script,
   command
-} from "./index-znynzt5w.js";
+} from "./index-mak3cd28.js";
 import"./index-q0y2jq9j.js";
-import"./index-qsq3q8fy.js";
+import"./index-2tv3fdx4.js";
 import"./index-6wwzs1bc.js";
 import {
   createWorkflowStepRegistry
-} from "./index-fc1bh0a7.js";
-import"./index-c69j78kk.js";
+} from "./index-gyd220p2.js";
+import"./index-kn1h7p1x.js";
 import {
   ModuleScript
-} from "./index-zmjppp25.js";
-import"./index-hyywke0f.js";
+} from "./index-8pm30m73.js";
+import"./index-pnqbkf5p.js";
 import"./index-h7yw2z9n.js";
 import {
   PrimitiveScript
-} from "./index-qkk27bk6.js";
+} from "./index-4edzf1gr.js";
 import {
   ScalarScript
-} from "./index-8p8p0cf8.js";
+} from "./index-rwg2aa4f.js";
 import"./index-by5gpp8x.js";
-import"./index-gtmz74tj.js";
+import"./index-ktb5njgy.js";
 import {
   WorkflowRunner
-} from "./index-srdssqj7.js";
+} from "./index-7737gxcp.js";
 
 // pkgs/@akanjs/cli/workflow/workflow.script.ts
 import { Logger } from "akanjs/common";

package/{workspace.command-j1gatz3d.js → workspace.command-kah5jgg5.js}

@@ -4,14 +4,14 @@ import {
 } from "./index-q0y2jq9j.js";
 import {
   GlobalConfig
-} from "./index-c69j78kk.js";
+} from "./index-kn1h7p1x.js";
 import {
   Exec,
   Workspace,
   runner,
   script,
   command
-} from "./index-znynzt5w.js";
+} from "./index-mak3cd28.js";
 import {
   extractAgentBlock,
   collectScopeRecipeSources,
@@ -21,7 +21,7 @@ import {
   AppExecutor,
   LibExecutor,
   PkgExecutor
-} from "./index-qsq3q8fy.js";
+} from "./index-2tv3fdx4.js";
 import"./index-6wwzs1bc.js";
 import {
   countBlocking,
@@ -32,41 +32,41 @@ import {
   collectRecipeSources2,
   scanRecipes2
 } from "./index-by5gpp8x.js";
-import"./index-fc1bh0a7.js";
-import"./index-gtmz74tj.js";
+import"./index-gyd220p2.js";
+import"./index-ktb5njgy.js";
 import"./index-h7yw2z9n.js";
 import {
   AgentScript
-} from "./index-29sxqfaw.js";
+} from "./index-ne2qy0nk.js";
 import {
   ApplicationScript
-} from "./index-zz5jyd94.js";
+} from "./index-yecdrt9a.js";
 import {
   LibraryScript
-} from "./index-gq44bqjt.js";
+} from "./index-259dsnz3.js";
 import"./index-hwkygn9s.js";
 import"./index-kcxmv48c.js";
 import {
   PackageScript
-} from "./index-7d6vny25.js";
+} from "./index-ws5e0j51.js";
 import {
   getNpmRegistryUrl,
   getLatestPackageVersion
-} from "./index-zxgr3s8s.js";
+} from "./index-yw4xj7pa.js";
 import {
   CloudScript
-} from "./index-yks023mb.js";
+} from "./index-4c9ykbfq.js";
 import {
   ContextScript
-} from "./index-yza7zkpt.js";
-import"./index-1yxtbmbj.js";
-import"./index-0amdxycf.js";
-import"./index-srdssqj7.js";
-import"./index-zmjppp25.js";
-import"./index-hyywke0f.js";
-import"./index-qkk27bk6.js";
-import"./index-8p8p0cf8.js";
-import"./index-5svjba73.js";
+} from "./index-600zhnve.js";
+import"./index-wt7qrtd4.js";
+import"./index-fz5q3gd7.js";
+import"./index-7737gxcp.js";
+import"./index-8pm30m73.js";
+import"./index-pnqbkf5p.js";
+import"./index-4edzf1gr.js";
+import"./index-rwg2aa4f.js";
+import"./index-j9yhg404.js";
 
 // pkgs/@akanjs/cli/workspace/workspace.runner.ts
 import path from "path";