@akanjs/cli 0.0.150 → 0.0.152

package/cjs/src/templates/libRoot/lib/summary/Summary.Zone.js

@@ -30,8 +30,8 @@ function getContent(scanResult, dict) {
 import { ModelsProps } from "@akanjs/client";
 import { DefaultOf } from "@akanjs/signal";
 import { st, Summary } from "@${dict.libName}/client";
-import { Data } from "@shared/ui";
-import { Loading } from "@util/ui";
+import { Data } from "@akanjs/ui";
+import { Loading } from "@akanjs/ui";
 
 import { cnst } from "../cnst";
 

package/cjs/src/templates/libRoot/lib/summary/index.js

@@ -26,7 +26,7 @@ function getContent(scanResult, dict = {}) {
   return {
     filename: "index.tsx",
     content: `
-import { Signal } from "@util/ui";
+import { Signal } from "@akanjs/ui";
 import { AiOutlineLineChart } from "react-icons/ai";
 
 import * as Template from "./Summary.Template";

package/cjs/src/templates/libRoot/lib/user/User.Template.js

@@ -29,7 +29,7 @@ function getContent(scanResult, dict) {
 "use client";
 import { clsx } from "@akanjs/client";
 import { Field } from "@shared/ui";
-import { Layout } from "@util/ui";
+import { Layout } from "@akanjs/ui";
 import { st, usePage } from "@${dict.libName}/client";
 
 interface UserEditProps {

package/cjs/src/templates/libRoot/lib/user/User.Util.js

@@ -30,7 +30,7 @@ function getContent(scanResult, dict) {
 import { ModelDashboardProps, ModelInsightProps } from "@akanjs/client";
 import { getQueryMap } from "@akanjs/constant";
 import { cnst, st } from "@${dict.libName}/client";
-import { Data } from "@shared/ui";
+import { Data } from "@akanjs/ui";
 import { AiOutlineEdit, AiOutlineLock, AiOutlineUnlock } from "react-icons/ai";
 
 export const Stat = ({

package/cjs/src/templates/libRoot/lib/user/User.Zone.js

@@ -30,7 +30,7 @@ function getContent(scanResult, dict) {
 import { ModelsProps } from "@akanjs/client";
 import { DefaultOf } from "@akanjs/signal";
 import { cnst, st, User } from "@${dict.libName}/client";
-import { Data, Model } from "@shared/ui";
+import { Data, Model } from "@akanjs/ui";
 
 export const Admin = ({ sliceName = "user", init, query }: ModelsProps<cnst.User>) => {
   return (

package/cjs/src/templates/libRoot/lib/user/index.js

@@ -26,7 +26,7 @@ function getContent(scanResult, dict = {}) {
   return {
     filename: "index.tsx",
     content: `
-import { Signal } from "@util/ui";
+import { Signal } from "@akanjs/ui";
 import { AiOutlineUser } from "react-icons/ai";
 
 import * as Template from "./User.Template";

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

@@ -29,7 +29,7 @@ function getContent(scanResult, dict) {
 "use client";
 import { cnst, st, usePage } from "@${dict.sysName}/client";
 import { Field } from "@shared/ui";
-import { Layout } from "@util/ui";
+import { Layout } from "@akanjs/ui";
 
 interface ${dict.Model}EditProps {
   ${dict.model}Id?: string | null;

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

@@ -28,7 +28,7 @@ function getContent(scanResult, dict) {
     content: `
 import { ModelProps } from "@akanjs/client";
 import { cnst, ${dict.Model} } from "@${dict.sysName}/client";
-import { Link } from "@util/ui";
+import { Link } from "@akanjs/ui";
 
 export const Card = ({ ${dict.model}, href }: ModelProps<"${dict.model}", cnst.Light${dict.Model}>) => {
   return (

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

@@ -30,7 +30,7 @@ function getContent(scanResult, dict) {
 import { ModelDashboardProps, ModelInsightProps } from "@akanjs/client";
 import { getQueryMap } from "@akanjs/constant";
 import { cnst } from "@${dict.sysName}/client";
-import { Data } from "@shared/ui";
+import { Data } from "@akanjs/ui";
 
 export const Stat = ({
   className,

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

@@ -28,7 +28,7 @@ function getContent(scanResult, dict) {
     content: `
 import { clsx } from "@akanjs/client";
 import { cnst } from "@${dict.sysName}/client";
-import { Image } from "@util/ui";
+import { Image } from "@akanjs/ui";
 
 interface ${dict.Model}ViewProps {
   className?: string;

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

@@ -27,7 +27,7 @@ function getContent(scanResult, dict) {
     filename: `${dict.Model}.Zone.tsx`,
     content: `
 "use client";
-import { Data, Load } from "@shared/ui";
+import { Data, Load } from "@akanjs/ui";
 import { ModelsProps } from "@akanjs/client";
 import { cnst, ${dict.Model} } from "@${dict.sysName}/client";
 import { ClientInit, ClientView, DefaultOf } from "@akanjs/signal";

package/cjs/src/templates/module/index.js

@@ -26,7 +26,7 @@ function getContent(scanResult, dict) {
   return {
     filename: "index.tsx",
     content: `
-import { Signal } from "@util/ui";
+import { Signal } from "@akanjs/ui";
 import { AiOutlineDatabase } from "react-icons/ai";
 
 import * as Template from "./${dict.Model}.Template";

package/esm/index.js

@@ -599,7 +599,8 @@ var withBase = (appName, config, libs, routes = []) => {
         ...[appName, ...libs].map((lib) => [`@${lib}/ui`, `@${lib}/next`, `@${lib}/common`, `@${lib}/client`]).flat(),
         "@contract",
         "@akanjs/next",
-        "@akanjs/common"
+        "@akanjs/common",
+        "@akanjs/ui"
       ]
     },
     // modularizeImports: {
@@ -1422,19 +1423,19 @@ var Executor = class _Executor {
       ...options
     });
     let stdout = "";
+    let stderr = "";
     proc.stdout?.on("data", (data) => {
       stdout += data;
-    });
-    proc.stdout?.on("data", (data) => {
       this.#stdout(data);
     });
     proc.stderr?.on("data", (data) => {
+      stderr += data;
       this.#stdout(data);
     });
     return new Promise((resolve, reject) => {
       proc.on("exit", (code, signal) => {
         if (!!code || signal)
-          reject({ code, signal, stdout });
+          reject({ code, signal, stdout, stderr });
         else
           resolve(stdout);
       });
@@ -1621,11 +1622,12 @@ var Executor = class _Executor {
     dict = {},
     overwrite = true
   }) {
-    const templatePath = `${__dirname}/src/templates${template ? `/${template}` : ""}`.replace(".ts", ".js");
-    if (fs8.statSync(templatePath).isFile()) {
-      const filename = path6.basename(templatePath);
+    const templatePath = `${__dirname}/src/templates${template ? `/${template}` : ""}`;
+    const prefixTemplatePath = templatePath.endsWith(".tsx") ? templatePath : templatePath.replace(".ts", ".js");
+    if (fs8.statSync(prefixTemplatePath).isFile()) {
+      const filename = path6.basename(prefixTemplatePath);
       const fileContent = await this.#applyTemplateFile(
-        { templatePath, targetPath: path6.join(basePath2, filename), scanResult, overwrite },
+        { templatePath: prefixTemplatePath, targetPath: path6.join(basePath2, filename), scanResult, overwrite },
         dict
       );
       return fileContent ? [fileContent] : [];
@@ -2880,7 +2882,6 @@ var runCommands = async (...commands) => {
           } catch (e) {
             const errMsg = e instanceof Error ? e.message : typeof e === "string" ? e : JSON.stringify(e);
             Logger.error(`Command Error: ${chalk4.red(errMsg)}`);
-            console.error(e);
             throw e;
           }
         });
@@ -3196,6 +3197,7 @@ var Builder = class {
       format,
       outdir: `${this.#distExecutor.cwdPath}/${format}`,
       logLevel: "error",
+      // external: ["react", "react-dom"],
       loader: assetLoader
     };
   }
@@ -3516,7 +3518,8 @@ var ApplicationRunner = class {
     if (target === "frontend") {
       await app.exec("rm -rf .next");
       app.writeFile("next.config.ts", defaultNextConfigFile);
-    }
+    } else if (target === "csr")
+      await app.workspace.exec("rm -rf node_modules/.vite");
     return { env: this.#getEnv(app, { AKAN_COMMAND_TYPE: type }) };
   }
   async buildBackend(app) {
@@ -3604,7 +3607,7 @@ var ApplicationRunner = class {
     if (open2)
       setTimeout(() => openBrowser("http://localhost:4200"), 3e3);
     onStart?.();
-    await app.spawn("npx", ["next", "dev", "-p", "4200", ...turbo ? ["--turbo"] : []], { env });
+    await app.spawn("npx", ["next", "dev", "-p", "4200", ...turbo ? ["--turbo"] : []], { env, stdio: "inherit" });
   }
   async #getViteConfig(app, command) {
     const { env } = await this.#prepareCommand(app, command, "csr");
@@ -4848,7 +4851,7 @@ var requestTemplate = ({
 	 \uCF54\uB529 \uADDC\uCE59
 		 - \uB77C\uC774\uBE0C\uB7EC\uB9AC \uC0AC\uC6A9
 		 - \uC544\uC774\uCF58: react-icons \uB77C\uC774\uBE0C\uB7EC\uB9AC \uC0AC\uC6A9
-		 - CSS: tailwind, DaisyUI(btn, input, badge \uAC19\uC740 \uAE30\uBCF8 \uC694\uC18C\uB9CC \uC0AC\uC6A9 \uAC00\uB2A5, card/hero \uAC19\uC740 \uBCF5\uC7A1\uD55C \uCEF4\uD3EC\uB10C\uD2B8 \uC0AC\uC6A9 X) \uC0AC\uC6A9
+		 - CSS: tailwind, DaisyUI(card/hero \uAC19\uC740 \uBCF5\uC7A1\uD55C \uCEF4\uD3EC\uB10C\uD2B8 \uC0AC\uC6A9 X) \uC0AC\uC6A9
 		 - Ui Component: @util/ui \uB77C\uC774\uBE0C\uB7EC\uB9AC \uC0AC\uC6A9
 		 - \uC870\uAC74\uBD80 \uD074\uB798\uC2A4: clsx \uB77C\uC774\uBE0C\uB7EC\uB9AC \uC0AC\uC6A9
 	 \uCF54\uB4DC \uC2A4\uD0C0\uC77C
@@ -4906,7 +4909,7 @@ var requestView = ({
 	 \uCF54\uB529 \uADDC\uCE59
 		 - \uB77C\uC774\uBE0C\uB7EC\uB9AC \uC0AC\uC6A9
 		 - \uC544\uC774\uCF58: react-icons \uB77C\uC774\uBE0C\uB7EC\uB9AC \uC0AC\uC6A9
-		 - CSS: tailwind, DaisyUI(btn, input, badge \uAC19\uC740 \uAE30\uBCF8 \uC694\uC18C\uB9CC \uC0AC\uC6A9 \uAC00\uB2A5, card/hero \uAC19\uC740 \uBCF5\uC7A1\uD55C \uCEF4\uD3EC\uB10C\uD2B8 \uC0AC\uC6A9 X) \uC0AC\uC6A9
+		 - CSS: tailwind, DaisyUI(card/hero \uAC19\uC740 \uBCF5\uC7A1\uD55C \uCEF4\uD3EC\uB10C\uD2B8 \uC0AC\uC6A9 X) \uC0AC\uC6A9
 		 - Ui Component: @util/ui \uB77C\uC774\uBE0C\uB7EC\uB9AC \uC0AC\uC6A9
 		 - \uC870\uAC74\uBD80 \uD074\uB798\uC2A4: clsx \uB77C\uC774\uBE0C\uB7EC\uB9AC \uC0AC\uC6A9
 	 \uCF54\uB4DC \uC2A4\uD0C0\uC77C
@@ -4967,7 +4970,7 @@ var requestUnit = ({
 	 \uCF54\uB529 \uADDC\uCE59
 		 - \uB77C\uC774\uBE0C\uB7EC\uB9AC \uC0AC\uC6A9
 		 - \uC544\uC774\uCF58: react-icons \uB77C\uC774\uBE0C\uB7EC\uB9AC \uC0AC\uC6A9
-		 - CSS: tailwind, DaisyUI(btn, input, badge \uAC19\uC740 \uAE30\uBCF8 \uC694\uC18C\uB9CC \uC0AC\uC6A9 \uAC00\uB2A5, card/hero \uAC19\uC740 \uBCF5\uC7A1\uD55C \uCEF4\uD3EC\uB10C\uD2B8 \uC0AC\uC6A9 X) \uC0AC\uC6A9
+		 - CSS: tailwind, DaisyUI(card/hero \uAC19\uC740 \uBCF5\uC7A1\uD55C \uCEF4\uD3EC\uB10C\uD2B8 \uC0AC\uC6A9 X) \uC0AC\uC6A9
 		 - Ui Component: @util/ui \uB77C\uC774\uBE0C\uB7EC\uB9AC \uC0AC\uC6A9
 		 - \uC870\uAC74\uBD80 \uD074\uB798\uC2A4: clsx \uB77C\uC774\uBE0C\uB7EC\uB9AC \uC0AC\uC6A9
 	 \uCF54\uB4DC \uC2A4\uD0C0\uC77C
@@ -5013,7 +5016,7 @@ var ModuleRunner = class {
   async createComponentTemplate(module, type) {
     await module.sys.applyTemplate({
       basePath: `./lib/${module.name}`,
-      template: `module/__model__.${capitalize(type)}.ts`,
+      template: `module/__Model__.${capitalize(type)}.tsx`,
       dict: { model: module.name, appName: module.sys.name }
     });
     return {

package/esm/src/guidelines/componentRule/componentRule.instruction.md

@@ -374,7 +374,7 @@ Here's a complete example of components for a "Product" feature:
 ```tsx
 import { clsx, ModelProps } from "@akanjs/client";
 import { cnst } from "@app/client";
-import { Image, Link } from "@util/ui";
+import { Image, Link } from "@akanjs/ui";
 
 export const Card = ({ product, href }: ModelProps<"product", cnst.Product>) => {
   return (
@@ -395,7 +395,7 @@ export const Card = ({ product, href }: ModelProps<"product", cnst.Product>) =>
 ```tsx
 import { clsx } from "@akanjs/client";
 import { cnst } from "@app/client";
-import { Button, Image } from "@util/ui";
+import { Button, Image } from "@akanjs/ui";
 
 interface ProductViewProps {
   className?: string;
@@ -445,7 +445,8 @@ export const General = ({ className, product }: ProductViewProps) => {
 "use client";
 import { clsx } from "@akanjs/client";
 import { st } from "@app/client";
-import { Button, Input, Upload } from "@util/ui";
+import { Button, Input } from "@akanjs/ui";
+import { Upload } from "@util/ui";
 import { AiOutlinePlus } from "react-icons/ai";
 
 export const General = () => {
@@ -520,8 +521,8 @@ export const General = () => {
 import { ModelDashboardProps } from "@akanjs/client";
 import { getQueryMap } from "@akanjs/constant";
 import { cnst, st } from "@app/client";
-import { Data } from "@shared/ui";
-import { Button } from "@util/ui";
+import { Data } from "@akanjs/ui";
+import { Button } from "@akanjs/ui";
 
 export const Stat = ({
   className,
@@ -591,7 +592,7 @@ export const PriceFilter = ({
 import { ModelsProps } from "@akanjs/client";
 import { ClientInit, ClientView } from "@akanjs/signal";
 import { cnst, Product } from "@app/client";
-import { Data, Load } from "@shared/ui";
+import { Data, Load } from "@akanjs/ui";
 
 export const Admin = ({ sliceName = "product", init, query }: ModelsProps<cnst.Product>) => {
   return (

package/esm/src/guidelines/databaseModule/databaseModule.instruction.md

@@ -379,29 +379,16 @@ export const registerUserModule = (option: ModulesOptions) =>
 #### Template Component (`[ModuleName].Template.tsx`)
 
 ```tsx
-import { Button, Form } from "@util/ui";
+import { Button } from "@akanjs/ui";
 
 import { dict } from "../dict";
 import { st } from "../st";
 
 export const General = () => {
-  const { userForm } = st.use.user();
-  const { signin, setUserForm } = st.do.user();
+  const { userForm } = st.use.userForm();
 
   return (
-    <Form onSubmit={signin}>
-      <Form.Item label={dict.user.email}>
-        <Form.Input type="email" value={userForm.email} onChange={(e) => setUserForm({ email: e.target.value })} />
-      </Form.Item>
-      <Form.Item label={dict.user.password}>
-        <Form.Input
-          type="password"
-          value={userForm.password || ""}
-          onChange={(e) => setUserForm({ password: e.target.value })}
-        />
-      </Form.Item>
-      <Button type="submit">{dict.user.signin}</Button>
-    </Form>
+    // WIP
   );
 };
 ```
@@ -473,7 +460,7 @@ export const User = () => (
 #### Client Exports (`index.tsx`)
 
 ```tsx
-import { Signal } from "@util/ui";
+import { Signal } from "@akanjs/ui";
 import { FaUser } from "react-icons/fa";
 
 import * as Template from "./User.Template";

package/esm/src/guidelines/modelConstant/modelConstant.instruction.md

@@ -340,7 +340,7 @@ const drones = await this.listByName("myDrone", { sort: "alphabetical" });
 | `maxlength`  | `number`             | -       | Maximum string length                  | `@Field.Prop(()=> String, { maxlength: 30 }) title: string;`           |
 | `query`      | `object`             | -       | Query value for Summary fields         | `@Field.Prop(() => Int, { query: { status: { $ne: 'inactive' } })`     |
 | `accumulate` | `object`             | -       | Aggregation value for Insight fields   | `@Field.Prop(() => Int, { accumulate: { $sum: 1 } }) count: number;`   |
-| `example`    | `any`                | -       | Example value for API docs             | `@Field.Prop(()=> String, { example: "hello@akanjs.com" }) email;`     |
+| `example`    | `any`                | -       | Example value for API docs             | `@Field.Prop(()=> String, { example: "contact@akanjs.com" }) email;`   |
 | `of`         | `any`                | -       | Value type for Map fields              | `@Field.Prop(()=> Map, { of: Date }) readAts: Map<string, Dayjs>;`     |
 | `validate`   | `(value) => boolean` | -       | Custom validation function             | `@Field.Prop(()=> String, { validate: (v)=> v.includes("@") }) email;` |
 

package/esm/src/guidelines/modelUnit/modelUnit.instruction.md

@@ -39,7 +39,7 @@ A typical Model.Unit.tsx file exports multiple component variations:
 ```tsx
 import { clsx } from "clsx";
 import { cnst } from "@your-lib/client";
-import { Image, Link } from "@util/ui";
+import { Image, Link } from "@akanjs/ui";
 
 // Compact representation (minimal details)
 export const Abstract = ({
@@ -253,7 +253,7 @@ export const Card = ({ user, className }: { user: cnst.LightUser; className?: st
 Always use the optimized `Image` component from `@util/ui` with proper attributes:
 
 ```tsx
-import { Image } from "@util/ui";
+import { Image } from "@akanjs/ui";
 
 export const Card = ({ product }: { product: cnst.LightProduct }) => (
   <div className="card">

package/esm/src/guidelines/modelView/modelView.instruction.md

@@ -748,7 +748,7 @@ export const Product = ({ product }: ProductViewProps) => (
 ### 1. Optimize Images and Media
 
 ```tsx
-import { Image } from "@util/ui"; // Optimized image component
+import { Image } from "@akanjs/ui"; // Optimized image component
 
 export const General = ({ product }: ProductViewProps) => (
   <div className="product-view">

package/esm/src/guidelines/modelZone/modelZone.instruction.md

@@ -33,7 +33,7 @@ Example: `apps/angelo/lib/bizAccount/bizAccount.Zone.tsx`
 ```tsx
 "use client";
 
-import { Load, Data } from "@shared/ui";
+import { Load, Data } from "@akanjs/ui";
 import { ModelsProps } from "@akanjs/client";
 import { ClientInit, ClientView } from "@akanjs/signal";
 import { Model } from "./index";
@@ -275,7 +275,7 @@ Zone components are typically used within page.tsx files using the Load.Page pat
 
 ```tsx
 // app/[lang]/(app)/model/page.tsx
-import { Load } from "@shared/ui";
+import { Load } from "@akanjs/ui";
 import { fetch } from "@akanjs/signal";
 import { Model } from "@app/lib";
 
@@ -465,7 +465,7 @@ export const Dashboard = ({ className }: { className?: string }) => {
 "use client";
 
 import { useEffect } from "react";
-import { Load } from "@shared/ui";
+import { Load } from "@akanjs/ui";
 import { fetch, subscriptions } from "@akanjs/signal";
 
 export const LiveFeed = ({ className, init }: { className?: string; init: ClientInit<"model", cnst.LightModel> }) => {

package/esm/src/guidelines/sharedUiUsage/sharedUiUsage.instruction.md

@@ -19,22 +19,17 @@ The `@shared/ui` library in the Akan.js framework provides a comprehensive set o
 
 ### Importing Components
 
-All UI components are available as named exports from the `@shared/ui` package:
+UI components are available as named exports from the `@shared/ui` package:
 
 ```tsx
-import { Field, Data, Load, Model, System, Only, Editor, Property } from "@shared/ui";
+import { Field, Only, Editor } from "@shared/ui";
 ```
 
 Each namespace contains specialized components for specific use cases:
 
 - **Field**: Form inputs and data entry components
-- **Data**: Data visualization and management interfaces
-- **Load**: Data loading patterns with SSR/CSR support
-- **Model**: CRUD operations with modal and inline editing
-- **System**: Application-level providers and utilities
 - **Only**: Conditional rendering based on user state and device
 - **Editor**: Rich text editing capabilities
-- **Property**: Metadata-driven property editing
 
 ### Component Organization in Your Module
 
@@ -106,7 +101,7 @@ const MyComponent = () => {
 Data components are used to display and manage collections of data:
 
 ```tsx
-import { Data, Model } from "@shared/ui";
+import { Data, Model } from "@akanjs/ui";
 
 export const MyFeatureAdmin = ({ sliceName = "myFeature" }) => {
   return (
@@ -128,7 +123,7 @@ export const MyFeatureAdmin = ({ sliceName = "myFeature" }) => {
 Load components handle data fetching and state management:
 
 ```tsx
-import { Load } from "@shared/ui";
+import { Load } from "@akanjs/ui";
 
 export const MyFeatureView = ({ id }) => {
   return (
@@ -161,7 +156,7 @@ export const MyFeatureList = () => {
 Model components handle create, read, update and delete operations:
 
 ```tsx
-import { Model } from "@shared/ui";
+import { Model } from "@akanjs/ui";
 
 export const CreateMyFeature = () => {
   return (

package/esm/src/guidelines/utilUiUsage/utilUiUsage.instruction.md

@@ -14,7 +14,7 @@ import { Button } from "@util/ui";
 import { Button, Input, Link, Image } from "@util/ui";
 
 // Namespace component import
-import { Dialog } from "@util/ui";
+import { Dialog } from "@akanjs/ui";
 ```
 
 ## Component Organization and Usage

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

@@ -3,7 +3,7 @@ function getContent(scanResult, dict = {}) {
   return {
     filename: "page.tsx",
     content: `
-import { Image, Link } from "@util/ui";
+import { Image, Link } from "@akanjs/ui";
 import { User } from "@shared/client";
 
 export default function Page() {

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

@@ -3,7 +3,7 @@ function getContent(scanResult, dict) {
   return {
     filename: "page.tsx",
     content: `
-import { Image } from "@util/ui";
+import { Image } from "@akanjs/ui";
 import { User } from "@shared/client";
 import { getSelf, router } from "@akanjs/client";
 

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

@@ -3,11 +3,11 @@ function getContent(scanResult, dict) {
   return {
     filename: "page.tsx",
     content: `
-import { Load, System } from "@shared/ui";
+import { Load, System } from "@akanjs/ui";
 
 interface PageProps {
   searchParams: Promise<{
-    p?: string;
+    p: string;
   }>;
 }
 
@@ -19,7 +19,7 @@ export default function Page({ searchParams }: PageProps) {
         const { p } = await searchParams;
         return { p } as const;
       }}
-      render={({ p }) => <System.Reconnect dev={true} />}
+      render={({ p }) => <System.Reconnect path={p} dev={true} />}
     />
   );
 }

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

@@ -5,7 +5,7 @@ function getContent(scanResult, dict) {
     content: `
 import "./styles.css";
 import { RootLayoutProps } from "@akanjs/client";
-import { System } from "@shared/ui";
+import { System } from "@akanjs/ui";
 import { env } from "@${dict.appName}/env/env.client";
 import { fetch } from "@${dict.appName}/client";
 

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

@@ -4,7 +4,7 @@ function getContent(scanResult, dict) {
     filename: "layout.tsx",
     content: `
 import "../(${dict.appName})/styles.css";
-import { System } from "@shared/ui";
+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";

package/esm/src/templates/app/app/layout.js

@@ -5,7 +5,7 @@ function getContent(scanResult, dict) {
     content: `
 "use client";
 import { st } from "@${dict.appName}/client";
-import { System } from "@shared/ui";
+import { System } from "@akanjs/ui";
 
 export default function Layout({ children }) {
   return <System.Root st={st}>{children}</System.Root>;

package/esm/src/templates/app/lib/setting/Setting.Zone.js

@@ -6,8 +6,8 @@ function getContent(scanResult, dict) {
 "use client";
 import { ModelsProps } from "@akanjs/client";
 import { Setting, st, usePage } from "@${dict.appName}/client";
-import { Model } from "@shared/ui";
-import { Loading } from "@util/ui";
+import { Model } from "@akanjs/ui";
+import { Loading } from "@akanjs/ui";
 import { useEffect } from "react";
 import { AiOutlineEdit } from "react-icons/ai";
 

package/esm/src/templates/app/lib/setting/index.js

@@ -3,7 +3,7 @@ function getContent(scanResult, dict = {}) {
   return {
     filename: "index.tsx",
     content: `
-import { Signal } from "@util/ui";
+import { Signal } from "@akanjs/ui";
 import { AiOutlineSetting } from "react-icons/ai";
 
 import * as Template from "./Setting.Template";

package/esm/src/templates/app/lib/summary/Summary.Zone.js

@@ -7,8 +7,8 @@ function getContent(scanResult, dict) {
 import { ModelsProps } from "@akanjs/client";
 import { DefaultOf } from "@akanjs/signal";
 import { st, Summary } from "@${dict.appName}/client";
-import { Data } from "@shared/ui";
-import { Loading } from "@util/ui";
+import { Data } from "@akanjs/ui";
+import { Loading } from "@akanjs/ui";
 
 import { cnst } from "../cnst";
 

package/esm/src/templates/app/lib/summary/index.js

@@ -3,7 +3,7 @@ function getContent(scanResult, dict = {}) {
   return {
     filename: "index.tsx",
     content: `
-import { Signal } from "@util/ui";
+import { Signal } from "@akanjs/ui";
 import { AiOutlineLineChart } from "react-icons/ai";
 
 import * as Template from "./Summary.Template";

package/esm/src/templates/app/lib/user/User.Template.js

@@ -6,7 +6,7 @@ function getContent(scanResult, dict) {
 "use client";
 import { clsx } from "@akanjs/client";
 import { Field } from "@shared/ui";
-import { Layout } from "@util/ui";
+import { Layout } from "@akanjs/ui";
 import { st, usePage } from "@${dict.appName}/client";
 
 interface UserEditProps {

package/esm/src/templates/app/lib/user/User.Util.js

@@ -7,7 +7,7 @@ function getContent(scanResult, dict) {
 import { ModelDashboardProps, ModelInsightProps } from "@akanjs/client";
 import { getQueryMap } from "@akanjs/constant";
 import { cnst, st } from "@${dict.appName}/client";
-import { Data } from "@shared/ui";
+import { Data } from "@akanjs/ui";
 import { AiOutlineEdit, AiOutlineLock, AiOutlineUnlock } from "react-icons/ai";
 
 export const Stat = ({

package/esm/src/templates/app/lib/user/User.Zone.js

@@ -7,7 +7,7 @@ function getContent(scanResult, dict) {
 import { ModelsProps } from "@akanjs/client";
 import { DefaultOf } from "@akanjs/signal";
 import { cnst, st, User } from "@${dict.appName}/client";
-import { Data, Model } from "@shared/ui";
+import { Data, Model } from "@akanjs/ui";
 
 export const Admin = ({ sliceName = "user", init, query }: ModelsProps<cnst.User>) => {
   return (

package/esm/src/templates/app/lib/user/index.js

@@ -3,7 +3,7 @@ function getContent(scanResult, dict = {}) {
   return {
     filename: "index.tsx",
     content: `
-import { Signal } from "@util/ui";
+import { Signal } from "@akanjs/ui";
 import { AiOutlineUser } from "react-icons/ai";
 
 import * as Template from "./User.Template";

package/esm/src/templates/app/main.js

@@ -9,8 +9,7 @@ import { registerModules } from "./server";
 const bootstrap = async () => {
   const serverMode = process.env.SERVER_MODE as "federation" | "batch" | "all" | null;
   if (!serverMode) throw new Error("SERVER_MODE environment variable is not defined");
-  const app = await createNestApp({ registerModules, serverMode, env });
-  return () => app.close();
+  await createNestApp({ registerModules, serverMode, env });
 };
 void bootstrap();
   `;