@akanjs/cli 0.9.32 → 0.9.34

package/cjs/index.js

@@ -717,6 +717,44 @@ import config from "./akan.config";
 export default getNextConfig(config, appInfo);
 `;
 
+// pkgs/@akanjs/config/src/types.ts
+var archs = ["amd64", "arm64"];
+var getDefaultFileScan = () => ({
+  constants: {
+    databases: [],
+    scalars: []
+  },
+  dictionary: {
+    databases: [],
+    services: [],
+    scalars: []
+  },
+  documents: {
+    databases: [],
+    scalars: []
+  },
+  services: {
+    databases: [],
+    services: [],
+    scalars: []
+  },
+  signal: {
+    databases: [],
+    services: [],
+    scalars: []
+  },
+  store: {
+    databases: [],
+    services: [],
+    scalars: []
+  },
+  components: {
+    databases: [],
+    services: [],
+    scalars: []
+  }
+});
+
 // pkgs/@akanjs/config/src/akanConfig.ts
 var makeAppConfig = (config, props) => {
   const { name, repoName, serveDomain, env, command = "build" } = props;
@@ -840,7 +878,7 @@ WORKDIR /workspace
 COPY ./package.json ./package.json
 RUN npx pnpm i --prod
 COPY . .
-ENV PORT 4200
+ENV PORT=4200
 ENV NODE_OPTIONS=--max_old_space_size=8192
 ENV NEXT_PUBLIC_REPO_NAME=${repoName}
 ENV NEXT_PUBLIC_SERVE_DOMAIN=${serveDomain}
@@ -859,44 +897,6 @@ CMD [${command.map((c) => `"${c}"`).join(",")}]`;
   }
 };
 
-// pkgs/@akanjs/config/src/types.ts
-var archs = ["amd64", "arm64"];
-var getDefaultFileScan = () => ({
-  constants: {
-    databases: [],
-    scalars: []
-  },
-  dictionary: {
-    databases: [],
-    services: [],
-    scalars: []
-  },
-  documents: {
-    databases: [],
-    scalars: []
-  },
-  services: {
-    databases: [],
-    services: [],
-    scalars: []
-  },
-  signal: {
-    databases: [],
-    services: [],
-    scalars: []
-  },
-  store: {
-    databases: [],
-    services: [],
-    scalars: []
-  },
-  components: {
-    databases: [],
-    services: [],
-    scalars: []
-  }
-});
-
 // pkgs/@akanjs/devkit/src/executors.ts
 var import_chalk3 = __toESM(require("chalk"));
 var import_child_process = require("child_process");
@@ -1790,10 +1790,11 @@ var WorkspaceExecutor = class _WorkspaceExecutor extends Executor {
     const serveDomain = process.env.NEXT_PUBLIC_SERVE_DOMAIN ?? envFile.NEXT_PUBLIC_SERVE_DOMAIN;
     if (!serveDomain)
       throw new Error("NEXT_PUBLIC_SERVE_DOMAIN is not set");
+    const portOffset = parseInt(process.env.PORT_OFFSET ?? envFile.PORT_OFFSET ?? "0");
     const env = process.env.NEXT_PUBLIC_ENV ?? envFile.NEXT_PUBLIC_ENV ?? "debug";
     if (!env)
       throw new Error("NEXT_PUBLIC_ENV is not set");
-    return { ...appName ? { name: appName } : {}, repoName, serveDomain, env };
+    return { ...appName ? { name: appName } : {}, repoName, serveDomain, env, portOffset };
   }
   async scan() {
     const [appNames, libNames, pkgNames] = await Promise.all([this.getApps(), this.getLibs(), this.getPkgs()]);
@@ -3412,9 +3413,9 @@ var import_dotenv2 = __toESM(require("dotenv"), 1);
 var LibraryRunner = class {
   async createLibrary(libName, workspace) {
     await workspace.exec(`mkdir -p libs/${libName}`);
-    const lib = LibExecutor.from(workspace, libName);
-    await lib.applyTemplate({ basePath: ".", template: "libRoot", dict: { libName } });
+    await workspace.applyTemplate({ basePath: `libs/${libName}`, template: "libRoot", dict: { libName } });
     workspace.setTsPaths("lib", libName);
+    const lib = LibExecutor.from(workspace, libName);
     return lib;
   }
   async removeLibrary(lib) {
@@ -3909,17 +3910,23 @@ var ApplicationRunner = class {
     });
     await app.spawn("node", [`scripts/${filename}.js`], {
       stdio: "inherit",
-      env: this.#getEnv(app)
+      env: this.#getEnv(app, "backend")
     });
   }
-  #getEnv(app, env = {}) {
+  #getEnv(app, target, env = {}) {
     const rootEnv = import_dotenv3.default.parse(app.workspace.readFile(".env"));
+    const basePort = target === "backend" ? 8080 : target === "frontend" ? 4200 : target === "csr" ? 4201 : void 0;
+    const portOffset = app.workspace.getBaseDevEnv().portOffset;
+    const PORT = basePort ? (basePort + portOffset).toString() : void 0;
+    const NEXT_PUBLIC_SERVER_PORT = portOffset ? (8080 + portOffset).toString() : void 0;
     return {
       ...process.env,
       ...rootEnv,
       NEXT_PUBLIC_APP_NAME: app.name,
       AKAN_WORKSPACE_ROOT: app.workspace.workspaceRoot,
       NODE_NO_WARNINGS: "1",
+      ...PORT ? { PORT, NEXT_PUBLIC_CLIENT_PORT: PORT } : {},
+      ...NEXT_PUBLIC_SERVER_PORT ? { NEXT_PUBLIC_SERVER_PORT } : {},
       ...env
     };
   }
@@ -3933,7 +3940,7 @@ var ApplicationRunner = class {
       await app.workspace.exec("rm -rf node_modules/.vite");
     else if (target === "backend")
       await app.cp("assets", import_path4.default.join(app.dist.cwdPath, "backend", "assets"));
-    return { env: this.#getEnv(app, { AKAN_COMMAND_TYPE: type }) };
+    return { env: this.#getEnv(app, target, { AKAN_COMMAND_TYPE: type }) };
   }
   async buildBackend(app) {
     await this.#prepareCommand(app, "start", "backend");
@@ -4026,15 +4033,16 @@ var ApplicationRunner = class {
   } = {}) {
     const { env } = await this.#prepareCommand(app, "start", "frontend");
     if (open2)
-      setTimeout(() => (0, import_open.default)("http://localhost:4200"), 3e3);
+      setTimeout(() => (0, import_open.default)(`http://localhost:${env.PORT ?? 4200}`), 3e3);
     onStart?.();
-    return app.spawnSync("npx", ["next", "dev", "-p", "4200", ...turbo ? ["--turbo"] : []], {
+    return app.spawnSync("npx", ["next", "dev", ...env.PORT ? ["-p", env.PORT] : [], ...turbo ? ["--turbo"] : []], {
       env,
       stdio: withInk ? ["ignore", "pipe", "pipe"] : "inherit"
     });
   }
   async #getViteConfig(app, command, viteConfig = {}) {
     const { env } = await this.#prepareCommand(app, command, "csr");
+    const { NODE_ENV, NODE_NO_WARNINGS, ...applyEnvs } = env;
     const tsconfig = app.workspace.getTsConfig();
     const akanConfig = await app.getConfig();
     const basePaths = akanConfig.frontend.routes ? [...new Set(akanConfig.frontend.routes.map(({ basePath: basePath2 }) => basePath2))].join(",") : void 0;
@@ -4094,13 +4102,13 @@ var ApplicationRunner = class {
       },
       define: {
         "process.env": {
+          ...applyEnvs,
           AKAN_COMMAND_TYPE: "start",
           NEXT_PUBLIC_REPO_NAME: app.workspace.repoName,
           NEXT_PUBLIC_SERVE_DOMAIN: processEnv.NEXT_PUBLIC_SERVE_DOMAIN ?? "localhost",
           NEXT_PUBLIC_ENV: processEnv.NEXT_PUBLIC_ENV ?? "debug",
           NEXT_PUBLIC_OPERATION_MODE: processEnv.NEXT_PUBLIC_OPERATION_MODE ?? "local",
           NEXT_PUBLIC_LOG_LEVEL: processEnv.NEXT_PUBLIC_LOG_LEVEL ?? "log",
-          NEXT_PUBLIC_APP_NAME: app.name,
           APP_OPERATION_MODE: processEnv.APP_OPERATION_MODE ?? "local",
           AKAN_WORKSPACE_ROOT: app.workspace.workspaceRoot,
           AKAN_APP_ROOT: app.cwdPath,
@@ -4149,7 +4157,7 @@ var ApplicationRunner = class {
       } : {}
     );
     const server = await vite.createServer(config);
-    await server.listen(4201);
+    await server.listen(4201 + app.workspace.getBaseDevEnv().portOffset);
     onStart?.();
     if (open2)
       setTimeout(() => (0, import_open.default)("http://localhost:4201"), 3e3);
@@ -4399,7 +4407,7 @@ var ApplicationRunner = class {
       ["node_modules/jest/bin/jest.js", `apps/${app.name}`, "-c", `apps/${app.name}/jest.config.ts`],
       {
         env: {
-          ...this.#getEnv(app),
+          ...this.#getEnv(app, "backend"),
           NEXT_PUBLIC_ENV: "testing",
           NEXT_PUBLIC_OPERATION_MODE: "local",
           NEXT_PUBLIC_APP_NAME: app.name,
@@ -5218,6 +5226,25 @@ LibraryCommand = __decorateClass([
 // pkgs/@akanjs/cli/src/module/module.script.ts
 var import_fs11 = __toESM(require("fs"), 1);
 
+// pkgs/@akanjs/cli/src/page/page.runner.ts
+var PageRunner = class {
+  async createCrudPage(module2, { app, basePath: basePath2, single = false }) {
+    await app.applyTemplate({
+      basePath: basePath2 ?? `app/[lang]/(${app.name})/(public)/${module2.name}`,
+      template: single ? "crudSinglePage" : "crudPages",
+      dict: { model: module2.name, appName: module2.sys.name }
+    });
+  }
+};
+
+// pkgs/@akanjs/cli/src/page/page.script.ts
+var PageScript = class {
+  #runner = new PageRunner();
+  async createCrudPage(module2, { app, basePath: basePath2, single = false }) {
+    await this.#runner.createCrudPage(module2, { app, basePath: basePath2, single });
+  }
+};
+
 // pkgs/@akanjs/cli/src/module/module.prompt.ts
 var componentDefaultDescription = ({
   modelName,
@@ -5592,10 +5619,13 @@ var ModuleRunner = class {
 
 // pkgs/@akanjs/cli/src/module/module.script.ts
 var ModuleScript = class {
+  pageScript = new PageScript();
   #runner = new ModuleRunner();
-  async createModuleTemplate(sys3, name) {
-    const executor = ModuleExecutor.from(sys3, name);
-    await this.#runner.createModuleTemplate(executor);
+  async createModuleTemplate(sys3, name, { page = false } = {}) {
+    const mod = ModuleExecutor.from(sys3, name);
+    await this.#runner.createModuleTemplate(mod);
+    if (page && sys3.type === "app")
+      await this.pageScript.createCrudPage(mod, { app: sys3, basePath: null, single: false });
     const akanConfig = await sys3.getConfig();
     await sys3.scan({ akanConfig });
   }
@@ -5646,25 +5676,25 @@ var ModuleScript = class {
     await this.createTemplate(executor);
     sys3.log(`Module ${name} created in ${sys3.type}s/${sys3.name}/lib/${name}`);
   }
-  removeModule(module2) {
-    this.#runner.removeModule(module2);
+  removeModule(mod) {
+    this.#runner.removeModule(mod);
   }
   async createService(workspace, name) {
   }
   async createTest(workspace, name) {
   }
-  async createTemplate(module2) {
-    const { component: template } = await this.#runner.createComponentTemplate(module2, "template");
-    const templateExampleFiles = (await module2.sys.getTemplatesSourceCode()).filter(
-      (f) => !f.filePath.includes(`${module2.name}.Template.tsx`)
+  async createTemplate(mod) {
+    const { component: template } = await this.#runner.createComponentTemplate(mod, "template");
+    const templateExampleFiles = (await mod.sys.getTemplatesSourceCode()).filter(
+      (f) => !f.filePath.includes(`${mod.name}.Template.tsx`)
     );
-    const Name = capitalize(module2.name);
-    const relatedCnsts = getRelatedCnsts(`${module2.sys.cwdPath}/lib/${module2.name}/${module2.name}.constant.ts`);
-    const constant = import_fs11.default.readFileSync(`${module2.sys.cwdPath}/lib/${module2.name}/${module2.name}.constant.ts`, "utf-8");
-    const session = new AiSession("createTemplate", { workspace: module2.sys.workspace, cacheKey: module2.name });
+    const Name = capitalize(mod.name);
+    const relatedCnsts = getRelatedCnsts(`${mod.sys.cwdPath}/lib/${mod.name}/${mod.name}.constant.ts`);
+    const constant = import_fs11.default.readFileSync(`${mod.sys.cwdPath}/lib/${mod.name}/${mod.name}.constant.ts`, "utf-8");
+    const session = new AiSession("createTemplate", { workspace: mod.sys.workspace, cacheKey: mod.name });
     const promptRst = requestTemplate({
-      sysName: module2.sys.name,
-      modelName: module2.name,
+      sysName: mod.sys.name,
+      modelName: mod.name,
       ModelName: Name,
       constant,
       boilerplate: template.content,
@@ -5672,20 +5702,20 @@ var ModuleScript = class {
       exampleFiles: randomPicks(templateExampleFiles, Math.min(20, templateExampleFiles.length))
     });
     const content = await session.editTypescript(promptRst);
-    module2.writeFile(`${Name}.Template.tsx`, content);
+    mod.writeFile(`${Name}.Template.tsx`, content);
   }
-  async createUnit(module2) {
-    const { component: unit } = await this.#runner.createComponentTemplate(module2, "unit");
-    const Name = capitalize(module2.name);
-    const unitExampleFiles = (await module2.sys.getUnitsSourceCode()).filter(
-      (f) => !f.filePath.includes(`${module2.name}.Unit.tsx`)
+  async createUnit(mod) {
+    const { component: unit } = await this.#runner.createComponentTemplate(mod, "unit");
+    const Name = capitalize(mod.name);
+    const unitExampleFiles = (await mod.sys.getUnitsSourceCode()).filter(
+      (f) => !f.filePath.includes(`${mod.name}.Unit.tsx`)
     );
-    const relatedCnsts = getRelatedCnsts(`${module2.sys.cwdPath}/lib/${module2.name}/${module2.name}.constant.ts`);
-    const constant = import_fs11.default.readFileSync(`${module2.sys.cwdPath}/lib/${module2.name}/${module2.name}.constant.ts`, "utf-8");
-    const session = new AiSession("createUnit", { workspace: module2.sys.workspace, cacheKey: module2.name });
+    const relatedCnsts = getRelatedCnsts(`${mod.sys.cwdPath}/lib/${mod.name}/${mod.name}.constant.ts`);
+    const constant = import_fs11.default.readFileSync(`${mod.sys.cwdPath}/lib/${mod.name}/${mod.name}.constant.ts`, "utf-8");
+    const session = new AiSession("createUnit", { workspace: mod.sys.workspace, cacheKey: mod.name });
     const promptRst = requestUnit({
-      sysName: module2.sys.name,
-      modelName: module2.name,
+      sysName: mod.sys.name,
+      modelName: mod.name,
       ModelName: Name,
       constant,
       properties: relatedCnsts.map((r) => ({ key: r.key, source: r.source })),
@@ -5693,20 +5723,20 @@ var ModuleScript = class {
       boilerplate: unit.content
     });
     const content = await session.editTypescript(promptRst);
-    module2.writeFile(`${Name}.Unit.tsx`, content);
+    mod.writeFile(`${Name}.Unit.tsx`, content);
   }
-  async createView(module2) {
-    const { component: view } = await this.#runner.createComponentTemplate(module2, "view");
-    const viewExampleFiles = (await module2.sys.getViewsSourceCode()).filter(
-      (f) => !f.filePath.includes(`${module2.name}.View.tsx`)
+  async createView(mod) {
+    const { component: view } = await this.#runner.createComponentTemplate(mod, "view");
+    const viewExampleFiles = (await mod.sys.getViewsSourceCode()).filter(
+      (f) => !f.filePath.includes(`${mod.name}.View.tsx`)
     );
-    const Name = capitalize(module2.name);
-    const relatedCnsts = getRelatedCnsts(`${module2.sys.cwdPath}/lib/${module2.name}/${module2.name}.constant.ts`);
-    const constant = import_fs11.default.readFileSync(`${module2.sys.cwdPath}/lib/${module2.name}/${module2.name}.constant.ts`, "utf-8");
-    const session = new AiSession("createView", { workspace: module2.sys.workspace, cacheKey: module2.name });
+    const Name = capitalize(mod.name);
+    const relatedCnsts = getRelatedCnsts(`${mod.sys.cwdPath}/lib/${mod.name}/${mod.name}.constant.ts`);
+    const constant = import_fs11.default.readFileSync(`${mod.sys.cwdPath}/lib/${mod.name}/${mod.name}.constant.ts`, "utf-8");
+    const session = new AiSession("createView", { workspace: mod.sys.workspace, cacheKey: mod.name });
     const promptRst = requestView({
-      sysName: module2.sys.name,
-      modelName: module2.name,
+      sysName: mod.sys.name,
+      modelName: mod.name,
       ModelName: Name,
       constant,
       boilerplate: view.content,
@@ -5714,16 +5744,16 @@ var ModuleScript = class {
       exampleFiles: randomPicks(viewExampleFiles, Math.min(20, viewExampleFiles.length))
     });
     const content = await session.editTypescript(promptRst);
-    module2.writeFile(`${Name}.View.tsx`, content);
+    mod.writeFile(`${Name}.View.tsx`, content);
   }
 };
 
 // pkgs/@akanjs/cli/src/module/module.command.ts
 var ModuleCommand = class {
   moduleScript = new ModuleScript();
-  async createModule(moduleName, sys3) {
+  async createModule(moduleName, sys3, page) {
     const name = lowerlize(moduleName.replace(/ /g, ""));
-    await this.moduleScript.createModuleTemplate(sys3, name);
+    await this.moduleScript.createModuleTemplate(sys3, name, { page });
   }
   removeModule(module2) {
     this.moduleScript.removeModule(module2);
@@ -5741,7 +5771,8 @@ var ModuleCommand = class {
 __decorateClass([
   Target.Public(),
   __decorateParam(0, Argument("moduleName", { desc: "name of module" })),
-  __decorateParam(1, Sys())
+  __decorateParam(1, Sys()),
+  __decorateParam(2, Option("page", { type: "boolean", desc: "create page", default: false }))
 ], ModuleCommand.prototype, "createModule", 1);
 __decorateClass([
   Target.Public(),
@@ -5807,31 +5838,20 @@ PackageCommand = __decorateClass([
   Commands()
 ], PackageCommand);
 
-// pkgs/@akanjs/cli/src/page/page.runner.ts
-var PageRunner = class {
-  async createPage(app, name) {
-  }
-};
-
-// pkgs/@akanjs/cli/src/page/page.script.ts
-var PageScript = class {
-  #runner = new PageRunner();
-  async createPage(app, name) {
-    await this.#runner.createPage(app, name);
-  }
-};
-
 // pkgs/@akanjs/cli/src/page/page.command.ts
 var PageCommand = class {
   pageScript = new PageScript();
-  async createPage(app, name) {
+  async createCrudPage(app, module2, basePath2, single) {
+    await this.pageScript.createCrudPage(module2, { app, basePath: basePath2, single });
   }
 };
 __decorateClass([
   Target.Public(),
   __decorateParam(0, App()),
-  __decorateParam(1, Option("name", { desc: "name of page" }))
-], PageCommand.prototype, "createPage", 1);
+  __decorateParam(1, Module()),
+  __decorateParam(2, Option("basePath", { desc: "base path", nullable: true })),
+  __decorateParam(3, Option("single", { desc: "single page", default: false }))
+], PageCommand.prototype, "createCrudPage", 1);
 PageCommand = __decorateClass([
   Commands()
 ], PageCommand);

package/cjs/src/templates/app/app/[lang]/{(__appName__)/layout.js → layout.js}

@@ -16,7 +16,7 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// pkgs/@akanjs/cli/src/templates/app/app/[lang]/(__appName__)/layout.tsx
+// pkgs/@akanjs/cli/src/templates/app/app/[lang]/layout.tsx
 var layout_exports = {};
 __export(layout_exports, {
   default: () => getContent

package/cjs/src/templates/app/app/[lang]/{(__appName__)/(public)/page.js → page.js}

@@ -16,7 +16,7 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// pkgs/@akanjs/cli/src/templates/app/app/[lang]/(__appName__)/(public)/page.tsx
+// pkgs/@akanjs/cli/src/templates/app/app/[lang]/page.tsx
 var page_exports = {};
 __export(page_exports, {
   default: () => getContent

package/cjs/src/templates/app/app/[lang]/{(__appName__)/(public)/unknown → unknown}/page.js

@@ -16,7 +16,7 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// pkgs/@akanjs/cli/src/templates/app/app/[lang]/(__appName__)/(public)/unknown/page.tsx
+// pkgs/@akanjs/cli/src/templates/app/app/[lang]/unknown/page.tsx
 var page_exports = {};
 __export(page_exports, {
   default: () => getContent

package/cjs/src/templates/crudPages/[__model__Id]/edit/page.js

@@ -59,7 +59,7 @@ export default function Page({ params }: PageProps) {
             onCancel="back"
             onSubmit="/${dict.model}"
           >
-            ${dict.Model}.Template.General
+            <${dict.Model}.Template.General />
           </Load.Edit>
         </div>
       )}

package/cjs/src/templates/crudPages/[__model__Id]/page.js

@@ -27,8 +27,7 @@ function getContent(scanResult, dict) {
     filename: "page.tsx",
     content: `
 import { ${dict.Model}, fetch, usePage } from "${dict.appName}/client";
-import { Link } from "@akanjs/ui";
-import { Load } from "@akanjs/ui";
+import { Link, Load } from "@akanjs/ui";
 import type { CsrConfig } from "@akanjs/client";
 
 interface PageProps {
@@ -61,7 +60,7 @@ export default function Page({ params }: PageProps) {
       render={({ ${dict.model}, ${dict.model}View }) => (
         <div className="container flex flex-col gap-4">
           <div className="flex gap-4 font-bold text-lg items-center">
-            ${dict.Model}.Zone.View view={${dict.model}View} />
+            <${dict.Model}.Zone.View view={${dict.model}View} />
             <Link href={\`/${dict.model}/\${${dict.model}.id}/edit\`}>
               <button className="btn">
                 {l("shared.updateModel", { model: l("${dict.model}.modelName") })}

package/cjs/src/templates/crudPages/new/page.js

@@ -27,7 +27,7 @@ function getContent(scanResult, dict) {
     filename: "page.tsx",
     content: `
 import { Load } from "@akanjs/ui";
-import { cnst, fetch, usePage, ${dict.Model} } from "${dict.appName}/client";
+import { cnst, fetch, usePage, ${dict.Model} } from "@${dict.appName}/client";
 import type { CsrConfig } from "@akanjs/client";
 
 export default function Page() {
@@ -54,7 +54,7 @@ export default function Page() {
             onCancel="back"
             onSubmit="/${dict.model}"
           >
-            ${dict.Model}.Template.General
+            <${dict.Model}.Template.General />
           </Load.Edit>
         </div>
       )}

package/cjs/src/templates/crudPages/page.js

@@ -26,7 +26,7 @@ function getContent(scanResult, dict) {
   return {
     filename: "page.tsx",
     content: `
-import { ${dict.Model}, fetch, usePage } from "${dict.appName}/client";
+import { ${dict.Model}, fetch, usePage } from "@${dict.appName}/client";
 import { Link, Load } from "@akanjs/ui";
 import type { CsrConfig } from "@akanjs/client";
 
@@ -51,7 +51,7 @@ export default function Page() {
             </div>
             <div>{l("${dict.model}.modelDesc")}</div>
             <div className="flex px-6 mt-3 gap-4">
-              ${dict.Model}.Zone.Card
+              <${dict.Model}.Zone.Card
                 className="animate-fadeIn grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 justify-center gap-4 w-full"
                 init={${dict.model}InitInPublic}
               />

package/cjs/src/templates/module/__Model__.View.js

@@ -27,19 +27,18 @@ function getContent(scanResult, dict) {
     filename: `${dict.Model}.View.tsx`,
     content: `
 import { clsx } from "@akanjs/client";
-import { cnst } from "@${dict.sysName}/client";
-import { Image } from "@akanjs/ui";
+import { cnst, usePage } from "@${dict.sysName}/client";
 
 interface ${dict.Model}ViewProps {
   className?: string;
   ${dict.model}: cnst.${dict.Model};
-  self?: { id?: string } | null;
 }
 
-export const General = ({ className, ${dict.model}, self }: ${dict.Model}ViewProps) => {
+export const General = ({ className, ${dict.model} }: ${dict.Model}ViewProps) => {
+  const { l } = usePage();
   return (
-    <div className={clsx(className, "animate-fadeIn w-full")}>
-      <div>{${dict.model}.id}</div>
+    <div className={clsx("w-full", className)}>
+      <div>{l("${dict.model}.id")}: {${dict.model}.id}</div>
     </div>
   );
 };

package/esm/index.js

@@ -697,6 +697,44 @@ import config from "./akan.config";
 export default getNextConfig(config, appInfo);
 `;
 
+// pkgs/@akanjs/config/src/types.ts
+var archs = ["amd64", "arm64"];
+var getDefaultFileScan = () => ({
+  constants: {
+    databases: [],
+    scalars: []
+  },
+  dictionary: {
+    databases: [],
+    services: [],
+    scalars: []
+  },
+  documents: {
+    databases: [],
+    scalars: []
+  },
+  services: {
+    databases: [],
+    services: [],
+    scalars: []
+  },
+  signal: {
+    databases: [],
+    services: [],
+    scalars: []
+  },
+  store: {
+    databases: [],
+    services: [],
+    scalars: []
+  },
+  components: {
+    databases: [],
+    services: [],
+    scalars: []
+  }
+});
+
 // pkgs/@akanjs/config/src/akanConfig.ts
 var makeAppConfig = (config, props) => {
   const { name, repoName, serveDomain, env, command = "build" } = props;
@@ -820,7 +858,7 @@ WORKDIR /workspace
 COPY ./package.json ./package.json
 RUN npx pnpm i --prod
 COPY . .
-ENV PORT 4200
+ENV PORT=4200
 ENV NODE_OPTIONS=--max_old_space_size=8192
 ENV NEXT_PUBLIC_REPO_NAME=${repoName}
 ENV NEXT_PUBLIC_SERVE_DOMAIN=${serveDomain}
@@ -839,44 +877,6 @@ CMD [${command.map((c) => `"${c}"`).join(",")}]`;
   }
 };
 
-// pkgs/@akanjs/config/src/types.ts
-var archs = ["amd64", "arm64"];
-var getDefaultFileScan = () => ({
-  constants: {
-    databases: [],
-    scalars: []
-  },
-  dictionary: {
-    databases: [],
-    services: [],
-    scalars: []
-  },
-  documents: {
-    databases: [],
-    scalars: []
-  },
-  services: {
-    databases: [],
-    services: [],
-    scalars: []
-  },
-  signal: {
-    databases: [],
-    services: [],
-    scalars: []
-  },
-  store: {
-    databases: [],
-    services: [],
-    scalars: []
-  },
-  components: {
-    databases: [],
-    services: [],
-    scalars: []
-  }
-});
-
 // pkgs/@akanjs/devkit/src/executors.ts
 import chalk3 from "chalk";
 import { exec, fork, spawn } from "child_process";
@@ -1769,10 +1769,11 @@ var WorkspaceExecutor = class _WorkspaceExecutor extends Executor {
     const serveDomain = process.env.NEXT_PUBLIC_SERVE_DOMAIN ?? envFile.NEXT_PUBLIC_SERVE_DOMAIN;
     if (!serveDomain)
       throw new Error("NEXT_PUBLIC_SERVE_DOMAIN is not set");
+    const portOffset = parseInt(process.env.PORT_OFFSET ?? envFile.PORT_OFFSET ?? "0");
     const env = process.env.NEXT_PUBLIC_ENV ?? envFile.NEXT_PUBLIC_ENV ?? "debug";
     if (!env)
       throw new Error("NEXT_PUBLIC_ENV is not set");
-    return { ...appName ? { name: appName } : {}, repoName, serveDomain, env };
+    return { ...appName ? { name: appName } : {}, repoName, serveDomain, env, portOffset };
   }
   async scan() {
     const [appNames, libNames, pkgNames] = await Promise.all([this.getApps(), this.getLibs(), this.getPkgs()]);
@@ -3394,9 +3395,9 @@ import dotenv2 from "dotenv";
 var LibraryRunner = class {
   async createLibrary(libName, workspace) {
     await workspace.exec(`mkdir -p libs/${libName}`);
-    const lib = LibExecutor.from(workspace, libName);
-    await lib.applyTemplate({ basePath: ".", template: "libRoot", dict: { libName } });
+    await workspace.applyTemplate({ basePath: `libs/${libName}`, template: "libRoot", dict: { libName } });
     workspace.setTsPaths("lib", libName);
+    const lib = LibExecutor.from(workspace, libName);
     return lib;
   }
   async removeLibrary(lib) {
@@ -3891,17 +3892,23 @@ var ApplicationRunner = class {
     });
     await app.spawn("node", [`scripts/${filename}.js`], {
       stdio: "inherit",
-      env: this.#getEnv(app)
+      env: this.#getEnv(app, "backend")
     });
   }
-  #getEnv(app, env = {}) {
+  #getEnv(app, target, env = {}) {
     const rootEnv = dotenv3.parse(app.workspace.readFile(".env"));
+    const basePort = target === "backend" ? 8080 : target === "frontend" ? 4200 : target === "csr" ? 4201 : void 0;
+    const portOffset = app.workspace.getBaseDevEnv().portOffset;
+    const PORT = basePort ? (basePort + portOffset).toString() : void 0;
+    const NEXT_PUBLIC_SERVER_PORT = portOffset ? (8080 + portOffset).toString() : void 0;
     return {
       ...process.env,
       ...rootEnv,
       NEXT_PUBLIC_APP_NAME: app.name,
       AKAN_WORKSPACE_ROOT: app.workspace.workspaceRoot,
       NODE_NO_WARNINGS: "1",
+      ...PORT ? { PORT, NEXT_PUBLIC_CLIENT_PORT: PORT } : {},
+      ...NEXT_PUBLIC_SERVER_PORT ? { NEXT_PUBLIC_SERVER_PORT } : {},
       ...env
     };
   }
@@ -3915,7 +3922,7 @@ var ApplicationRunner = class {
       await app.workspace.exec("rm -rf node_modules/.vite");
     else if (target === "backend")
       await app.cp("assets", path7.join(app.dist.cwdPath, "backend", "assets"));
-    return { env: this.#getEnv(app, { AKAN_COMMAND_TYPE: type }) };
+    return { env: this.#getEnv(app, target, { AKAN_COMMAND_TYPE: type }) };
   }
   async buildBackend(app) {
     await this.#prepareCommand(app, "start", "backend");
@@ -4008,15 +4015,16 @@ var ApplicationRunner = class {
   } = {}) {
     const { env } = await this.#prepareCommand(app, "start", "frontend");
     if (open2)
-      setTimeout(() => openBrowser("http://localhost:4200"), 3e3);
+      setTimeout(() => openBrowser(`http://localhost:${env.PORT ?? 4200}`), 3e3);
     onStart?.();
-    return app.spawnSync("npx", ["next", "dev", "-p", "4200", ...turbo ? ["--turbo"] : []], {
+    return app.spawnSync("npx", ["next", "dev", ...env.PORT ? ["-p", env.PORT] : [], ...turbo ? ["--turbo"] : []], {
       env,
       stdio: withInk ? ["ignore", "pipe", "pipe"] : "inherit"
     });
   }
   async #getViteConfig(app, command, viteConfig = {}) {
     const { env } = await this.#prepareCommand(app, command, "csr");
+    const { NODE_ENV, NODE_NO_WARNINGS, ...applyEnvs } = env;
     const tsconfig = app.workspace.getTsConfig();
     const akanConfig = await app.getConfig();
     const basePaths = akanConfig.frontend.routes ? [...new Set(akanConfig.frontend.routes.map(({ basePath: basePath2 }) => basePath2))].join(",") : void 0;
@@ -4076,13 +4084,13 @@ var ApplicationRunner = class {
       },
       define: {
         "process.env": {
+          ...applyEnvs,
           AKAN_COMMAND_TYPE: "start",
           NEXT_PUBLIC_REPO_NAME: app.workspace.repoName,
           NEXT_PUBLIC_SERVE_DOMAIN: processEnv.NEXT_PUBLIC_SERVE_DOMAIN ?? "localhost",
           NEXT_PUBLIC_ENV: processEnv.NEXT_PUBLIC_ENV ?? "debug",
           NEXT_PUBLIC_OPERATION_MODE: processEnv.NEXT_PUBLIC_OPERATION_MODE ?? "local",
           NEXT_PUBLIC_LOG_LEVEL: processEnv.NEXT_PUBLIC_LOG_LEVEL ?? "log",
-          NEXT_PUBLIC_APP_NAME: app.name,
           APP_OPERATION_MODE: processEnv.APP_OPERATION_MODE ?? "local",
           AKAN_WORKSPACE_ROOT: app.workspace.workspaceRoot,
           AKAN_APP_ROOT: app.cwdPath,
@@ -4131,7 +4139,7 @@ var ApplicationRunner = class {
       } : {}
     );
     const server = await vite.createServer(config);
-    await server.listen(4201);
+    await server.listen(4201 + app.workspace.getBaseDevEnv().portOffset);
     onStart?.();
     if (open2)
       setTimeout(() => openBrowser("http://localhost:4201"), 3e3);
@@ -4381,7 +4389,7 @@ var ApplicationRunner = class {
       ["node_modules/jest/bin/jest.js", `apps/${app.name}`, "-c", `apps/${app.name}/jest.config.ts`],
       {
         env: {
-          ...this.#getEnv(app),
+          ...this.#getEnv(app, "backend"),
           NEXT_PUBLIC_ENV: "testing",
           NEXT_PUBLIC_OPERATION_MODE: "local",
           NEXT_PUBLIC_APP_NAME: app.name,
@@ -5200,6 +5208,25 @@ LibraryCommand = __decorateClass([
 // pkgs/@akanjs/cli/src/module/module.script.ts
 import fs15 from "fs";
 
+// pkgs/@akanjs/cli/src/page/page.runner.ts
+var PageRunner = class {
+  async createCrudPage(module, { app, basePath: basePath2, single = false }) {
+    await app.applyTemplate({
+      basePath: basePath2 ?? `app/[lang]/(${app.name})/(public)/${module.name}`,
+      template: single ? "crudSinglePage" : "crudPages",
+      dict: { model: module.name, appName: module.sys.name }
+    });
+  }
+};
+
+// pkgs/@akanjs/cli/src/page/page.script.ts
+var PageScript = class {
+  #runner = new PageRunner();
+  async createCrudPage(module, { app, basePath: basePath2, single = false }) {
+    await this.#runner.createCrudPage(module, { app, basePath: basePath2, single });
+  }
+};
+
 // pkgs/@akanjs/cli/src/module/module.prompt.ts
 var componentDefaultDescription = ({
   modelName,
@@ -5574,10 +5601,13 @@ var ModuleRunner = class {
 
 // pkgs/@akanjs/cli/src/module/module.script.ts
 var ModuleScript = class {
+  pageScript = new PageScript();
   #runner = new ModuleRunner();
-  async createModuleTemplate(sys3, name) {
-    const executor = ModuleExecutor.from(sys3, name);
-    await this.#runner.createModuleTemplate(executor);
+  async createModuleTemplate(sys3, name, { page = false } = {}) {
+    const mod = ModuleExecutor.from(sys3, name);
+    await this.#runner.createModuleTemplate(mod);
+    if (page && sys3.type === "app")
+      await this.pageScript.createCrudPage(mod, { app: sys3, basePath: null, single: false });
     const akanConfig = await sys3.getConfig();
     await sys3.scan({ akanConfig });
   }
@@ -5628,25 +5658,25 @@ var ModuleScript = class {
     await this.createTemplate(executor);
     sys3.log(`Module ${name} created in ${sys3.type}s/${sys3.name}/lib/${name}`);
   }
-  removeModule(module) {
-    this.#runner.removeModule(module);
+  removeModule(mod) {
+    this.#runner.removeModule(mod);
   }
   async createService(workspace, name) {
   }
   async createTest(workspace, name) {
   }
-  async createTemplate(module) {
-    const { component: template } = await this.#runner.createComponentTemplate(module, "template");
-    const templateExampleFiles = (await module.sys.getTemplatesSourceCode()).filter(
-      (f) => !f.filePath.includes(`${module.name}.Template.tsx`)
+  async createTemplate(mod) {
+    const { component: template } = await this.#runner.createComponentTemplate(mod, "template");
+    const templateExampleFiles = (await mod.sys.getTemplatesSourceCode()).filter(
+      (f) => !f.filePath.includes(`${mod.name}.Template.tsx`)
     );
-    const Name = capitalize(module.name);
-    const relatedCnsts = getRelatedCnsts(`${module.sys.cwdPath}/lib/${module.name}/${module.name}.constant.ts`);
-    const constant = fs15.readFileSync(`${module.sys.cwdPath}/lib/${module.name}/${module.name}.constant.ts`, "utf-8");
-    const session = new AiSession("createTemplate", { workspace: module.sys.workspace, cacheKey: module.name });
+    const Name = capitalize(mod.name);
+    const relatedCnsts = getRelatedCnsts(`${mod.sys.cwdPath}/lib/${mod.name}/${mod.name}.constant.ts`);
+    const constant = fs15.readFileSync(`${mod.sys.cwdPath}/lib/${mod.name}/${mod.name}.constant.ts`, "utf-8");
+    const session = new AiSession("createTemplate", { workspace: mod.sys.workspace, cacheKey: mod.name });
     const promptRst = requestTemplate({
-      sysName: module.sys.name,
-      modelName: module.name,
+      sysName: mod.sys.name,
+      modelName: mod.name,
       ModelName: Name,
       constant,
       boilerplate: template.content,
@@ -5654,20 +5684,20 @@ var ModuleScript = class {
       exampleFiles: randomPicks(templateExampleFiles, Math.min(20, templateExampleFiles.length))
     });
     const content = await session.editTypescript(promptRst);
-    module.writeFile(`${Name}.Template.tsx`, content);
+    mod.writeFile(`${Name}.Template.tsx`, content);
   }
-  async createUnit(module) {
-    const { component: unit } = await this.#runner.createComponentTemplate(module, "unit");
-    const Name = capitalize(module.name);
-    const unitExampleFiles = (await module.sys.getUnitsSourceCode()).filter(
-      (f) => !f.filePath.includes(`${module.name}.Unit.tsx`)
+  async createUnit(mod) {
+    const { component: unit } = await this.#runner.createComponentTemplate(mod, "unit");
+    const Name = capitalize(mod.name);
+    const unitExampleFiles = (await mod.sys.getUnitsSourceCode()).filter(
+      (f) => !f.filePath.includes(`${mod.name}.Unit.tsx`)
     );
-    const relatedCnsts = getRelatedCnsts(`${module.sys.cwdPath}/lib/${module.name}/${module.name}.constant.ts`);
-    const constant = fs15.readFileSync(`${module.sys.cwdPath}/lib/${module.name}/${module.name}.constant.ts`, "utf-8");
-    const session = new AiSession("createUnit", { workspace: module.sys.workspace, cacheKey: module.name });
+    const relatedCnsts = getRelatedCnsts(`${mod.sys.cwdPath}/lib/${mod.name}/${mod.name}.constant.ts`);
+    const constant = fs15.readFileSync(`${mod.sys.cwdPath}/lib/${mod.name}/${mod.name}.constant.ts`, "utf-8");
+    const session = new AiSession("createUnit", { workspace: mod.sys.workspace, cacheKey: mod.name });
     const promptRst = requestUnit({
-      sysName: module.sys.name,
-      modelName: module.name,
+      sysName: mod.sys.name,
+      modelName: mod.name,
       ModelName: Name,
       constant,
       properties: relatedCnsts.map((r) => ({ key: r.key, source: r.source })),
@@ -5675,20 +5705,20 @@ var ModuleScript = class {
       boilerplate: unit.content
     });
     const content = await session.editTypescript(promptRst);
-    module.writeFile(`${Name}.Unit.tsx`, content);
+    mod.writeFile(`${Name}.Unit.tsx`, content);
   }
-  async createView(module) {
-    const { component: view } = await this.#runner.createComponentTemplate(module, "view");
-    const viewExampleFiles = (await module.sys.getViewsSourceCode()).filter(
-      (f) => !f.filePath.includes(`${module.name}.View.tsx`)
+  async createView(mod) {
+    const { component: view } = await this.#runner.createComponentTemplate(mod, "view");
+    const viewExampleFiles = (await mod.sys.getViewsSourceCode()).filter(
+      (f) => !f.filePath.includes(`${mod.name}.View.tsx`)
     );
-    const Name = capitalize(module.name);
-    const relatedCnsts = getRelatedCnsts(`${module.sys.cwdPath}/lib/${module.name}/${module.name}.constant.ts`);
-    const constant = fs15.readFileSync(`${module.sys.cwdPath}/lib/${module.name}/${module.name}.constant.ts`, "utf-8");
-    const session = new AiSession("createView", { workspace: module.sys.workspace, cacheKey: module.name });
+    const Name = capitalize(mod.name);
+    const relatedCnsts = getRelatedCnsts(`${mod.sys.cwdPath}/lib/${mod.name}/${mod.name}.constant.ts`);
+    const constant = fs15.readFileSync(`${mod.sys.cwdPath}/lib/${mod.name}/${mod.name}.constant.ts`, "utf-8");
+    const session = new AiSession("createView", { workspace: mod.sys.workspace, cacheKey: mod.name });
     const promptRst = requestView({
-      sysName: module.sys.name,
-      modelName: module.name,
+      sysName: mod.sys.name,
+      modelName: mod.name,
       ModelName: Name,
       constant,
       boilerplate: view.content,
@@ -5696,16 +5726,16 @@ var ModuleScript = class {
       exampleFiles: randomPicks(viewExampleFiles, Math.min(20, viewExampleFiles.length))
     });
     const content = await session.editTypescript(promptRst);
-    module.writeFile(`${Name}.View.tsx`, content);
+    mod.writeFile(`${Name}.View.tsx`, content);
   }
 };
 
 // pkgs/@akanjs/cli/src/module/module.command.ts
 var ModuleCommand = class {
   moduleScript = new ModuleScript();
-  async createModule(moduleName, sys3) {
+  async createModule(moduleName, sys3, page) {
     const name = lowerlize(moduleName.replace(/ /g, ""));
-    await this.moduleScript.createModuleTemplate(sys3, name);
+    await this.moduleScript.createModuleTemplate(sys3, name, { page });
   }
   removeModule(module) {
     this.moduleScript.removeModule(module);
@@ -5723,7 +5753,8 @@ var ModuleCommand = class {
 __decorateClass([
   Target.Public(),
   __decorateParam(0, Argument("moduleName", { desc: "name of module" })),
-  __decorateParam(1, Sys())
+  __decorateParam(1, Sys()),
+  __decorateParam(2, Option("page", { type: "boolean", desc: "create page", default: false }))
 ], ModuleCommand.prototype, "createModule", 1);
 __decorateClass([
   Target.Public(),
@@ -5789,31 +5820,20 @@ PackageCommand = __decorateClass([
   Commands()
 ], PackageCommand);
 
-// pkgs/@akanjs/cli/src/page/page.runner.ts
-var PageRunner = class {
-  async createPage(app, name) {
-  }
-};
-
-// pkgs/@akanjs/cli/src/page/page.script.ts
-var PageScript = class {
-  #runner = new PageRunner();
-  async createPage(app, name) {
-    await this.#runner.createPage(app, name);
-  }
-};
-
 // pkgs/@akanjs/cli/src/page/page.command.ts
 var PageCommand = class {
   pageScript = new PageScript();
-  async createPage(app, name) {
+  async createCrudPage(app, module, basePath2, single) {
+    await this.pageScript.createCrudPage(module, { app, basePath: basePath2, single });
   }
 };
 __decorateClass([
   Target.Public(),
   __decorateParam(0, App()),
-  __decorateParam(1, Option("name", { desc: "name of page" }))
-], PageCommand.prototype, "createPage", 1);
+  __decorateParam(1, Module()),
+  __decorateParam(2, Option("basePath", { desc: "base path", nullable: true })),
+  __decorateParam(3, Option("single", { desc: "single page", default: false }))
+], PageCommand.prototype, "createCrudPage", 1);
 PageCommand = __decorateClass([
   Commands()
 ], PageCommand);

package/esm/src/templates/app/app/[lang]/{(__appName__)/layout.js → layout.js}

@@ -1,4 +1,4 @@
-// pkgs/@akanjs/cli/src/templates/app/app/[lang]/(__appName__)/layout.tsx
+// pkgs/@akanjs/cli/src/templates/app/app/[lang]/layout.tsx
 function getContent(scanResult, dict) {
   return {
     filename: "layout.tsx",

package/esm/src/templates/app/app/[lang]/{(__appName__)/(public)/page.js → page.js}

@@ -1,4 +1,4 @@
-// pkgs/@akanjs/cli/src/templates/app/app/[lang]/(__appName__)/(public)/page.tsx
+// pkgs/@akanjs/cli/src/templates/app/app/[lang]/page.tsx
 function getContent(scanResult, dict) {
   return {
     filename: "page.tsx",

package/esm/src/templates/app/app/[lang]/{(__appName__)/(public)/unknown → unknown}/page.js

@@ -1,4 +1,4 @@
-// pkgs/@akanjs/cli/src/templates/app/app/[lang]/(__appName__)/(public)/unknown/page.tsx
+// pkgs/@akanjs/cli/src/templates/app/app/[lang]/unknown/page.tsx
 function getContent(scanResult, dict) {
   return {
     filename: "page.tsx",

package/esm/src/templates/crudPages/[__model__Id]/edit/page.js

@@ -36,7 +36,7 @@ export default function Page({ params }: PageProps) {
             onCancel="back"
             onSubmit="/${dict.model}"
           >
-            ${dict.Model}.Template.General
+            <${dict.Model}.Template.General />
           </Load.Edit>
         </div>
       )}

package/esm/src/templates/crudPages/[__model__Id]/page.js

@@ -4,8 +4,7 @@ function getContent(scanResult, dict) {
     filename: "page.tsx",
     content: `
 import { ${dict.Model}, fetch, usePage } from "${dict.appName}/client";
-import { Link } from "@akanjs/ui";
-import { Load } from "@akanjs/ui";
+import { Link, Load } from "@akanjs/ui";
 import type { CsrConfig } from "@akanjs/client";
 
 interface PageProps {
@@ -38,7 +37,7 @@ export default function Page({ params }: PageProps) {
       render={({ ${dict.model}, ${dict.model}View }) => (
         <div className="container flex flex-col gap-4">
           <div className="flex gap-4 font-bold text-lg items-center">
-            ${dict.Model}.Zone.View view={${dict.model}View} />
+            <${dict.Model}.Zone.View view={${dict.model}View} />
             <Link href={\`/${dict.model}/\${${dict.model}.id}/edit\`}>
               <button className="btn">
                 {l("shared.updateModel", { model: l("${dict.model}.modelName") })}

package/esm/src/templates/crudPages/new/page.js

@@ -4,7 +4,7 @@ function getContent(scanResult, dict) {
     filename: "page.tsx",
     content: `
 import { Load } from "@akanjs/ui";
-import { cnst, fetch, usePage, ${dict.Model} } from "${dict.appName}/client";
+import { cnst, fetch, usePage, ${dict.Model} } from "@${dict.appName}/client";
 import type { CsrConfig } from "@akanjs/client";
 
 export default function Page() {
@@ -31,7 +31,7 @@ export default function Page() {
             onCancel="back"
             onSubmit="/${dict.model}"
           >
-            ${dict.Model}.Template.General
+            <${dict.Model}.Template.General />
           </Load.Edit>
         </div>
       )}

package/esm/src/templates/crudPages/page.js

@@ -3,7 +3,7 @@ function getContent(scanResult, dict) {
   return {
     filename: "page.tsx",
     content: `
-import { ${dict.Model}, fetch, usePage } from "${dict.appName}/client";
+import { ${dict.Model}, fetch, usePage } from "@${dict.appName}/client";
 import { Link, Load } from "@akanjs/ui";
 import type { CsrConfig } from "@akanjs/client";
 
@@ -28,7 +28,7 @@ export default function Page() {
             </div>
             <div>{l("${dict.model}.modelDesc")}</div>
             <div className="flex px-6 mt-3 gap-4">
-              ${dict.Model}.Zone.Card
+              <${dict.Model}.Zone.Card
                 className="animate-fadeIn grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 justify-center gap-4 w-full"
                 init={${dict.model}InitInPublic}
               />

package/esm/src/templates/module/__Model__.View.js

@@ -4,19 +4,18 @@ function getContent(scanResult, dict) {
     filename: `${dict.Model}.View.tsx`,
     content: `
 import { clsx } from "@akanjs/client";
-import { cnst } from "@${dict.sysName}/client";
-import { Image } from "@akanjs/ui";
+import { cnst, usePage } from "@${dict.sysName}/client";
 
 interface ${dict.Model}ViewProps {
   className?: string;
   ${dict.model}: cnst.${dict.Model};
-  self?: { id?: string } | null;
 }
 
-export const General = ({ className, ${dict.model}, self }: ${dict.Model}ViewProps) => {
+export const General = ({ className, ${dict.model} }: ${dict.Model}ViewProps) => {
+  const { l } = usePage();
   return (
-    <div className={clsx(className, "animate-fadeIn w-full")}>
-      <div>{${dict.model}.id}</div>
+    <div className={clsx("w-full", className)}>
+      <div>{l("${dict.model}.id")}: {${dict.model}.id}</div>
     </div>
   );
 };

package/package.json

@@ -2,7 +2,7 @@
   "type": "module",
   "sourceType": "module",
   "name": "@akanjs/cli",
-  "version": "0.9.32",
+  "version": "0.9.34",
   "bin": {
     "akan": "esm/index.js"
   },

package/src/module/module.command.d.ts

@@ -2,7 +2,7 @@ import { Module, Sys } from "@akanjs/devkit";
 import { ModuleScript } from "./module.script";
 export declare class ModuleCommand {
     moduleScript: ModuleScript;
-    createModule(moduleName: string, sys: Sys): Promise<void>;
+    createModule(moduleName: string, sys: Sys, page: boolean): Promise<void>;
     removeModule(module: Module): void;
     createView(module: Module): Promise<void>;
     createUnit(module: Module): Promise<void>;

package/src/module/module.script.d.ts

@@ -1,13 +1,17 @@
 import { type Module, type Sys, Workspace } from "@akanjs/devkit";
+import { PageScript } from "../page/page.script";
 export declare class ModuleScript {
     #private;
-    createModuleTemplate(sys: Sys, name: string): Promise<void>;
+    pageScript: PageScript;
+    createModuleTemplate(sys: Sys, name: string, { page }?: {
+        page?: boolean;
+    }): Promise<void>;
     createModule(sys: Sys, name: string, description?: string, schemaDescription?: string): Promise<void>;
     createModule_(sys: Sys, name: string, description: string, schemaDescription: string): Promise<void>;
-    removeModule(module: Module): void;
+    removeModule(mod: Module): void;
     createService(workspace: Workspace, name: string): Promise<void>;
     createTest(workspace: Workspace, name: string): Promise<void>;
-    createTemplate(module: Module): Promise<void>;
-    createUnit(module: Module): Promise<void>;
-    createView(module: Module): Promise<void>;
+    createTemplate(mod: Module): Promise<void>;
+    createUnit(mod: Module): Promise<void>;
+    createView(mod: Module): Promise<void>;
 }

package/src/page/page.command.d.ts

@@ -1,6 +1,6 @@
-import { App } from "@akanjs/devkit";
+import { App, Module } from "@akanjs/devkit";
 import { PageScript } from "./page.script";
 export declare class PageCommand {
     pageScript: PageScript;
-    createPage(app: App, name: string): Promise<void>;
+    createCrudPage(app: App, module: Module, basePath: string | null, single: boolean): Promise<void>;
 }

package/src/page/page.runner.d.ts

@@ -1,4 +1,8 @@
-import { App } from "@akanjs/devkit";
+import { App, Module } from "@akanjs/devkit";
 export declare class PageRunner {
-    createPage(app: App, name: string): Promise<void>;
+    createCrudPage(module: Module, { app, basePath, single }: {
+        app: App;
+        basePath: string | null;
+        single: boolean;
+    }): Promise<void>;
 }

package/src/page/page.script.d.ts

@@ -1,5 +1,9 @@
-import { App } from "@akanjs/devkit";
+import { App, Module } from "@akanjs/devkit";
 export declare class PageScript {
     #private;
-    createPage(app: App, name: string): Promise<void>;
+    createCrudPage(module: Module, { app, basePath, single }: {
+        app: App;
+        basePath: string | null;
+        single: boolean;
+    }): Promise<void>;
 }

package/cjs/src/templates/app/app/[lang]/admin/layout.js

@@ -1,54 +0,0 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// pkgs/@akanjs/cli/src/templates/app/app/[lang]/admin/layout.tsx
-var layout_exports = {};
-__export(layout_exports, {
-  default: () => getContent
-});
-module.exports = __toCommonJS(layout_exports);
-function getContent(scanResult, dict) {
-  return {
-    filename: "layout.tsx",
-    content: `
-import "../(${dict.appName})/styles.css";
-import { System } from "@akanjs/ui";
-import { env } from "@${dict.appName}/env/env.client";
-import { fetch } from "@${dict.appName}/client";
-import type { RootLayoutProps } from "@akanjs/client";
-
-export const metadata = { title: "${dict.appName}" };
-
-export default function Layout({ children, params }: RootLayoutProps) {
-  return (
-    <System.Provider
-      of={Layout}
-      appName="${dict.appName}"
-      params={params}
-      head={<link rel="icon" href="/favicon.ico" />}
-      // className="bg-base-100"
-      env={env}
-      fetch={fetch}
-    >
-      {children}
-    </System.Provider>
-  );
-}
-  `
-  };
-}

package/esm/src/templates/app/app/[lang]/admin/layout.js

@@ -1,34 +0,0 @@
-// pkgs/@akanjs/cli/src/templates/app/app/[lang]/admin/layout.tsx
-function getContent(scanResult, dict) {
-  return {
-    filename: "layout.tsx",
-    content: `
-import "../(${dict.appName})/styles.css";
-import { System } from "@akanjs/ui";
-import { env } from "@${dict.appName}/env/env.client";
-import { fetch } from "@${dict.appName}/client";
-import type { RootLayoutProps } from "@akanjs/client";
-
-export const metadata = { title: "${dict.appName}" };
-
-export default function Layout({ children, params }: RootLayoutProps) {
-  return (
-    <System.Provider
-      of={Layout}
-      appName="${dict.appName}"
-      params={params}
-      head={<link rel="icon" href="/favicon.ico" />}
-      // className="bg-base-100"
-      env={env}
-      fetch={fetch}
-    >
-      {children}
-    </System.Provider>
-  );
-}
-  `
-  };
-}
-export {
-  getContent as default
-};

package/src/templates/app/app/[lang]/admin/layout.d.ts

@@ -1,9 +0,0 @@
-import type { AppScanResult, LibScanResult } from "@akanjs/config";
-interface Dict {
-    appName: string;
-}
-export default function getContent(scanResult: AppScanResult | LibScanResult | null, dict: Dict): {
-    filename: string;
-    content: string;
-};
-export {};