@akanjs/cli 3.0.0-alpha.99 → 3.0.0-beta.0

package/{routeSourceValidator-ze6x894c.js → routeSourceValidator-apyqw7wk.js}

@@ -2,6 +2,7 @@
 // pkgs/@akanjs/devkit/routeSourceValidator.ts
 import { getRouteExports } from "akanjs/common";
 import ts from "typescript";
+var chainRoots = new Set(["page", "layout", "rootLayout"]);
 
 class RouteSourceValidator {
   static validateRouteSourceExports(source, filePath, kind, options = {}) {
@@ -62,7 +63,74 @@ class RouteSourceValidator {
     if (exported.has("metadata") && exported.has("generateMetadata")) {
       throw new Error(`[route-convention] metadata and generateMetadata cannot both be exported in ${filePath}`);
     }
-    return { devOnly: RouteSourceValidator.#readDevOnly(sourceFile, filePath) };
+    const chain = RouteSourceValidator.#readChain(sourceFile, filePath);
+    if (!chain)
+      return { devOnly: RouteSourceValidator.#readDevOnly(sourceFile, filePath) };
+    const named = [...exported].filter((name) => name !== "default");
+    if (named.length)
+      throw new Error(`[route-convention] ${filePath} exports ${named.join(", ")} beside its ${chain.kind}() chain \u2014 every route setting is a stage of the chain`);
+    if (kind === "page" && chain.kind !== "page")
+      throw new Error(`[route-convention] ${filePath} is a page file but exports ${chain.kind}()`);
+    if (kind === "layout" && chain.kind === "page")
+      throw new Error(`[route-convention] ${filePath} is a layout file but exports page()`);
+    if (options.pattern)
+      RouteSourceValidator.#assertChainParams(chain, options.pattern, filePath);
+    return {
+      devOnly: chain.devOnly,
+      chain: { kind: chain.kind, params: chain.params, ...chain.prompt ? { prompt: chain.prompt } : {} }
+    };
+  }
+  static #readChain(sourceFile, filePath) {
+    for (const statement of sourceFile.statements) {
+      if (!ts.isExportAssignment(statement) || statement.isExportEquals)
+        continue;
+      let node = RouteSourceValidator.#unwrapExpression(statement.expression);
+      const stages = [];
+      while (node && ts.isCallExpression(node)) {
+        const callee = node.expression;
+        if (ts.isPropertyAccessExpression(callee)) {
+          stages.unshift({ name: callee.name.text, args: node.arguments });
+          node = callee.expression;
+          continue;
+        }
+        if (ts.isIdentifier(callee) && chainRoots.has(callee.text))
+          return RouteSourceValidator.#chainOf(callee.text, stages, filePath);
+        return null;
+      }
+      return null;
+    }
+    return null;
+  }
+  static #chainOf(kind, stages, filePath) {
+    const params = [];
+    let prompt;
+    let devOnly = false;
+    const literal = (stage) => {
+      const first = stage.args[0];
+      if (!first || !ts.isStringLiteralLike(first))
+        throw new Error(`[route-convention] .${stage.name}() takes a string literal first in ${filePath} \u2014 the build reads it without evaluating the module`);
+      return first.text;
+    };
+    for (const stage of stages) {
+      if (stage.name === "param")
+        params.push(literal(stage));
+      else if (stage.name === "prompt")
+        prompt = literal(stage);
+      else if (stage.name === "config")
+        devOnly = RouteSourceValidator.#devOnlyOf(RouteSourceValidator.#unwrapExpression(stage.args[0]), filePath);
+    }
+    return { kind, params, prompt, devOnly };
+  }
+  static #assertChainParams(chain, pattern, filePath) {
+    const inPath = pattern.split("/").filter((part) => part.startsWith(":")).map((part) => part.slice(1)).filter((name) => name !== "lang");
+    if (chain.params.includes("lang"))
+      throw new Error(`[route-convention] ${filePath} declares .param("lang"), which every route receives undeclared`);
+    const unknown = chain.params.find((name) => !inPath.includes(name));
+    if (unknown)
+      throw new Error(`[route-convention] ${filePath} declares .param("${unknown}") but no [${unknown}] segment is in its path`);
+    const undeclared = inPath.find((name) => !chain.params.includes(name));
+    if (chain.kind === "page" && undeclared)
+      throw new Error(`[route-convention] ${filePath} sits under [${undeclared}] but declares no .param("${undeclared}") \u2014 a page reads only what it declares`);
   }
   static #readDevOnly(sourceFile, filePath) {
     for (const statement of sourceFile.statements) {
@@ -75,26 +143,31 @@ class RouteSourceValidator {
         if (!ts.isIdentifier(declaration.name) || declaration.name.text !== "pageConfig")
           continue;
         const initializer = RouteSourceValidator.#unwrapExpression(declaration.initializer);
-        if (!initializer || !ts.isObjectLiteralExpression(initializer))
-          continue;
-        for (const property of initializer.properties) {
-          if (!ts.isPropertyAssignment(property))
-            continue;
-          const name = property.name;
-          const key = ts.isIdentifier(name) ? name.text : ts.isStringLiteral(name) ? name.text : null;
-          if (key !== "devOnly")
-            continue;
-          const value = RouteSourceValidator.#unwrapExpression(property.initializer);
-          if (value?.kind === ts.SyntaxKind.TrueKeyword)
-            return true;
-          if (value?.kind === ts.SyntaxKind.FalseKeyword)
-            return false;
-          throw new Error(`[route-convention] pageConfig.devOnly must be a literal true or false in ${filePath} \u2014 the build reads it without evaluating the module`);
-        }
+        if (initializer && ts.isObjectLiteralExpression(initializer))
+          return RouteSourceValidator.#devOnlyOf(initializer, filePath);
       }
     }
     return false;
   }
+  static #devOnlyOf(config, filePath) {
+    if (!config || !ts.isObjectLiteralExpression(config))
+      return false;
+    for (const property of config.properties) {
+      if (!ts.isPropertyAssignment(property))
+        continue;
+      const name = property.name;
+      const key = ts.isIdentifier(name) ? name.text : ts.isStringLiteral(name) ? name.text : null;
+      if (key !== "devOnly")
+        continue;
+      const value = RouteSourceValidator.#unwrapExpression(property.initializer);
+      if (value?.kind === ts.SyntaxKind.TrueKeyword)
+        return true;
+      if (value?.kind === ts.SyntaxKind.FalseKeyword)
+        return false;
+      throw new Error(`[route-convention] devOnly must be a literal true or false in ${filePath} \u2014 the build reads it without evaluating the module`);
+    }
+    return false;
+  }
   static #unwrapExpression(expression) {
     let current = expression;
     while (current && (ts.isAsExpression(current) || ts.isSatisfiesExpression(current) || ts.isParenthesizedExpression(current))) {

package/{scalar.command-0epwcr5k.js → scalar.command-6k1vhe9s.js}

@@ -2,18 +2,18 @@
 import {
   Sys,
   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 {
   renderPrimitiveReport
-} from "./index-fc1bh0a7.js";
-import"./index-c69j78kk.js";
+} from "./index-gyd220p2.js";
+import"./index-kn1h7p1x.js";
 import"./index-h7yw2z9n.js";
 import {
   ScalarScript
-} from "./index-8p8p0cf8.js";
+} from "./index-rwg2aa4f.js";
 
 // pkgs/@akanjs/cli/scalar/scalar.command.ts
 import { Logger, lowerlize } from "akanjs/common";

package/{subspace.command-e2t36xb2.js → subspace.command-fwjfcts7.js}

@@ -4,7 +4,7 @@ import {
   runner,
   script,
   command
-} from "./index-znynzt5w.js";
+} from "./index-mak3cd28.js";
 import {
   FileSys
 } from "./index-q0y2jq9j.js";
@@ -12,11 +12,11 @@ import {
   Executor,
   WorkspaceExecutor,
   AppExecutor
-} from "./index-qsq3q8fy.js";
+} from "./index-2tv3fdx4.js";
 import"./index-6wwzs1bc.js";
 import {
   SlicePlanner
-} from "./index-5svjba73.js";
+} from "./index-j9yhg404.js";
 import {
   LibSource
 } from "./index-3d9y066c.js";
@@ -147,7 +147,7 @@ class Subspace {
     }
     const clone = new Executor(`subspace-${this.name}`, this.#clonePath);
     await clone.spawn("git", ["fetch", "--quiet", "origin", branch]);
-    await clone.spawn("git", ["checkout", "--quiet", "-B", branch, `origin/${branch}`]);
+    await clone.spawn("git", ["checkout", "--quiet", "-f", "-B", branch, `origin/${branch}`]);
     await clone.spawn("git", ["clean", "-qfd"]);
     return clone;
   }
@@ -324,7 +324,9 @@ class Subspace {
       "--",
       `libs/${lib}`
     ]);
-    const files = listed.split("\x00").filter((file) => !!file && !this.#isSubspaceOwned(file)).sort();
+    const candidates = listed.split("\x00").filter((file) => !!file && !this.#isSubspaceOwned(file)).sort();
+    const present = await Promise.all(candidates.map(async (file) => await FileSys.entryExists(path.join(this.#clonePath, file))));
+    const files = candidates.filter((_, index) => present[index]);
     const hasher = new Bun.CryptoHasher("sha256");
     for (const file of files) {
       const content = await FileSys.readText(path.join(this.#clonePath, file));

package/templates/app/page/_index.tsx

@@ -8,7 +8,7 @@ export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: Dic
     filename: "_index.tsx",
     content: `
 import { getEnv } from "akanjs/base";
-import { usePage } from "akanjs/client";
+import { page, usePage } from "akanjs/client";
 import { Link, System } from "akanjs/ui";
 import {
   FaBookOpen,
@@ -22,7 +22,7 @@ import {
   FaTerminal,
 } from "react-icons/fa";
 
-export default function Page() {
+export default page().render(() => {
   const appName = getEnv().appName;
   const { l } = usePage();
   return (
@@ -294,6 +294,6 @@ export default function Page() {
       </section>
     </main>
   );
-}`,
+});`,
   };
 }

package/templates/app/page/_layout.tsx

@@ -9,41 +9,40 @@ export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: Dic
     filename: "_layout.tsx",
     content: `
 import "./styles.css";
-import type { Font, LayoutProps } from "akanjs/client";
+import { rootLayout } from "akanjs/client";
 ${isUsingShared ? "import { Auth } from '@shared/ui';" : ""}
 
-export const fonts: Font[] = [
-  {
-    name: "pretendard",
-    default: true,
-    paths: [
-      { src: "/fonts/Pretendard-Thin.woff2", weight: 100 },
-      { src: "/fonts/Pretendard-ExtraLight.woff2", weight: 200 },
-      { src: "/fonts/Pretendard-Light.woff2", weight: 300 },
-      { src: "/fonts/Pretendard-Regular.woff2", weight: 400 },
-      { src: "/fonts/Pretendard-Medium.woff2", weight: 500 },
-      { src: "/fonts/Pretendard-SemiBold.woff2", weight: 600 },
-      { src: "/fonts/Pretendard-Bold.woff2", weight: 700 },
-      { src: "/fonts/Pretendard-ExtraBold.woff2", weight: 800 },
-      { src: "/fonts/Pretendard-Black.woff2", weight: 900 },
-    ],
-  },
-];
-
-export const head = (
-  <>
-    <title>${dict.appName}</title>
-    <link rel="icon" href="/favicon.ico" />
-  </>
-);
-
-export default function Layout({ children }: LayoutProps) {
-  return (
+export default rootLayout()
+  .fonts([
+    {
+      name: "pretendard",
+      default: true,
+      paths: [
+        { src: "/fonts/Pretendard-Thin.woff2", weight: 100 },
+        { src: "/fonts/Pretendard-ExtraLight.woff2", weight: 200 },
+        { src: "/fonts/Pretendard-Light.woff2", weight: 300 },
+        { src: "/fonts/Pretendard-Regular.woff2", weight: 400 },
+        { src: "/fonts/Pretendard-Medium.woff2", weight: 500 },
+        { src: "/fonts/Pretendard-SemiBold.woff2", weight: 600 },
+        { src: "/fonts/Pretendard-Bold.woff2", weight: 700 },
+        { src: "/fonts/Pretendard-ExtraBold.woff2", weight: 800 },
+        { src: "/fonts/Pretendard-Black.woff2", weight: 900 },
+      ],
+    },
+  ])
+  .head(
     <>
-      {children}${isUsingShared ? "\n      <Auth.User />\n      <Auth.Admin />" : ""}
-    </>
-  );
-}
+      <title>${dict.appName}</title>
+      <link rel="icon" href="/favicon.ico" />
+    </>,
+  )
+  .render(({ children }) => {
+    return (
+      <>
+        {children}${isUsingShared ? "\n        <Auth.User />\n        <Auth.Admin />" : ""}
+      </>
+    );
+  });
   `,
   };
 }

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

@@ -3,37 +3,32 @@ 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";
+    content: `import { fetch, usePage } from "@apps/${dict.appName}/client";
 import { Task } from "@apps/${dict.appName}/lib/task";
+import { ID } from "akanjs/base";
+import { page } from "akanjs/client";
 import { Link, buttonRecipe } 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.
+export default page()
+  .param("taskId", ID)
+  .render(async ({ taskId }) => {
+    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={buttonRecipe({ variant: "ghost", size: "sm" })}>
+            {l("task.taskBackToTasks")}
+          </a>
+          <Link href={\`/task/\${taskId}/edit\`} className={buttonRecipe({ variant: "primary", size: "sm" })}>
+            {l("task.taskEdit")}
+          </Link>
+        </div>
 
-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={buttonRecipe({ variant: "ghost", size: "sm" })}>
-          {l("task.taskBackToTasks")}
-        </a>
-        <Link href={\`/task/\${taskId}/edit\`} className={buttonRecipe({ variant: "primary", size: "sm" })}>
-          {l("task.taskEdit")}
-        </Link>
-      </div>
-
-      <Task.Zone.View className="max-w-2xl" view={taskView} />
-    </main>
-  );
-}
+        <Task.Zone.View className="max-w-2xl" view={taskView} />
+      </main>
+    );
+  });
 `,
   };
 }

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;
+    );
+  });
 `,
   };
 }