@akanjs/cli 0.9.41 → 0.9.43

package/esm/src/guidelines/___library/sharedUiStructureDescription.en.md

@@ -733,7 +733,6 @@ SlateContent
 Purpose: Metadata-driven property editing
 
 - prop: string - Property name
-- slice: StoreOf<any, any> - Store slice
 - renderTemplate?: (form: any) => ReactNode - Custom edit renderer
 - renderView?: (model: any) => ReactNode - Custom view renderer
 - modelPath?: string - Model path in store

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

@@ -22,7 +22,6 @@ libs/shared/lib/[module-name]/
 ├── [ModuleName].Util.tsx          // Utility components (dashboard, insights)
 ├── [ModuleName].View.tsx          // Single item view components
 ├── [ModuleName].Zone.tsx          // Main zone layout and routing
-├── _server.ts                     // Module registration
 ├── [module-name].constant.ts      // Model definitions
 ├── [module-name].dictionary.ts    // Translations
 ├── [module-name].document.ts      // Database schema
@@ -347,34 +346,7 @@ export const userDict = {
 };
 ```
 
-### 7. Register Module (`_server.ts`)
-
-Create module registration for the server:
-
-```typescript
-import { databaseModuleOf } from "@akanjs/server";
-
-import { cnst } from "../cnst";
-import * as db from "../db";
-import type { ModulesOptions } from "../option";
-import { allSrvs } from "../srv";
-import { UserService } from "./user.service";
-import { UserSignal } from "./user.signal";
-
-export const registerUserModule = (option: ModulesOptions) =>
-  databaseModuleOf(
-    {
-      constant: cnst.userCnst,
-      database: db.userDb,
-      signal: UserSignal,
-      service: UserService,
-      uses: { securityConfig: option.securityConfig },
-    },
-    allSrvs
-  );
-```
-
-### 8. Create UI Components
+### 7. Create UI Components
 
 #### Template Component (`[ModuleName].Template.tsx`)
 
@@ -494,21 +466,8 @@ In your server bootstrap file:
 
 ```typescript
 import { createNestApp } from "@akanjs/server";
-import { registerUserModule } from "./user/_server";
-import { registerAdminModule } from "./admin/_server";
-
-const startServer = async () => {
-  const app = await createNestApp({
-    env: serverEnv,
-    registerModules: (options) => [
-      registerUserModule(options),
-      registerAdminModule(options),
-      // Register other modules...
-    ],
-  });
-
-  return app;
-};
+
+====== outdated, ned to be rewrited ======
 ```
 
 ### 2. Using Services in Controllers or Other Services
@@ -625,36 +584,30 @@ export const Layout = () => (
 ## Best Practices
 
 1. **Naming Conventions**
-
    - Use PascalCase for classes and components (e.g., `UserService`, `User.Unit.tsx`)
    - Use camelCase for files (e.g., `user.service.ts`, `user.document.ts`)
 
 2. **Security**
-
    - Use `@Field.Secret` for sensitive data like passwords
    - Apply proper permission guards to queries and mutations (`@Query.Admin`, `@Mutation.Public`)
    - Validate input data using the `validate` option in `@Field.Prop`
 
 3. **Code Organization**
-
    - Keep business logic in service files
    - Use signals for API calls only, not for business logic
    - Define reusable utility methods in document models
 
 4. **Performance**
-
    - Use dataloader pattern (`@Loader.ByField`) for efficient database access
    - Create proper indexes in the middleware
    - Use projections to limit returned fields when appropriate
 
 5. **Testing**
-
    - Create signal tests for each API endpoint
    - Mock services for unit testing signals
    - Use integration tests for testing complex workflows
 
 6. **UI Components**
-
    - Follow the separation between Template, Unit, View, and Zone components
    - Make components reusable across different parts of the application
    - Use dictionary files for all UI text to support internationalization

package/esm/src/guidelines/modelService/modelService.generate.json

@@ -47,44 +47,9 @@
     },
     {
       "type": "example",
-      "description": "@Queue decorator examples",
+      "description": "@Sig decorator examples",
       "path": "{apps,libs}/*/lib/*/*.service.ts",
-      "filterText": "@Queue",
-      "sample": 1
-    },
-    {
-      "type": "example",
-      "description": "@Websocket decorator examples",
-      "path": "{apps,libs}/*/lib/*/*.service.ts",
-      "filterText": "@Websocket",
-      "sample": 1
-    },
-    {
-      "type": "example",
-      "description": "onModuleInit method examples",
-      "path": "{apps,libs}/*/lib/*/*.service.ts",
-      "filterText": "onModuleInit",
-      "sample": 2
-    },
-    {
-      "type": "example",
-      "description": "onModuleDestroy method examples",
-      "path": "{apps,libs}/*/lib/*/*.service.ts",
-      "filterText": "onModuleDestroy",
-      "sample": 1
-    },
-    {
-      "type": "example",
-      "description": "@Cron decorator examples",
-      "path": "{apps,libs}/*/lib/*/*.service.ts",
-      "filterText": "@Cron",
-      "sample": 2
-    },
-    {
-      "type": "example",
-      "description": "@Interval decorator examples",
-      "path": "{apps,libs}/*/lib/*/*.service.ts",
-      "filterText": "@Interval",
+      "filterText": "@Sig",
       "sample": 1
     },
     {
@@ -149,9 +114,7 @@
     "contents": [
       "Purpose and role of model.service.ts files",
       "Service structure and inheritance (DbService, LogService, MixSrvs)",
-      "Core decorators (@Service, @Srv, @Use, @Db, @Queue, @Websocket)",
-      "Lifecycle methods (onModuleInit, onModuleDestroy)",
-      "Scheduled tasks (@Cron, @Interval)",
+      "Core decorators (@Service, @Srv, @Use, @Db, @Sig)",
       "Database operations (CRUD, queries, search)",
       "Customizing database operations (_preCreate, _postCreate, _preUpdate, _postUpdate, _preRemove, _postRemove)",
       "Working with other services (dependency injection patterns)",

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

@@ -136,97 +136,6 @@ Injects a websocket server instance for real-time communication:
 protected readonly websocket: Websocket<ChatSignal>;
 ```
 
-## Lifecycle Methods
-
-Akan.js services can implement lifecycle hooks that are called by the NestJS framework.
-
-### onModuleInit()
-
-Called once the module has been initialized by NestJS. Use this for setup operations:
-
-```typescript
-async onModuleInit() {
-  // Initialize service resources
-  await this.loadInitialData();
-  this.setupEventListeners();
-  this.logger.log('Service initialized successfully');
-}
-```
-
-Common use cases:
-
-- Initializing in-memory cache
-- Setting up event listeners
-- Loading configuration data
-- Establishing connections to external services
-
-### onModuleDestroy()
-
-Called just before the application shuts down. Use this for cleanup operations:
-
-```typescript
-async onModuleDestroy() {
-  // Clean up resources
-  await Promise.all(this.connections.map(conn => conn.close()));
-  this.clearTimers();
-  this.logger.log('Service resources released');
-}
-```
-
-Common use cases:
-
-- Closing database connections
-- Releasing external resources
-- Clearing timers and intervals
-- Unregistering event listeners
-
-## Scheduled Tasks
-
-Akan.js provides decorators for scheduling recurring tasks.
-
-### @Cron Decorator
-
-Executes methods on a cron schedule:
-
-```typescript
-@Cron("0 0 * * *")  // Run at midnight every day
-async dailyCleanup() {
-  await this.cleanupExpiredRecords();
-  this.logger.log('Daily cleanup completed');
-}
-
-@Cron("*/5 * * * *", { serverMode: "batch" })  // Run every 5 minutes, only in batch mode
-async periodicSync() {
-  await this.syncExternalData();
-}
-```
-
-The first parameter uses standard cron syntax:
-
-- `* * * * *` = minute hour day-of-month month day-of-week
-- Special patterns like `@daily`, `@hourly` are also supported
-
-Options include:
-
-- `serverMode`: Restrict to a specific server mode (e.g., "batch")
-- `name`: Assign a name to the scheduled job
-- `timeZone`: Specify the timezone for the schedule
-
-### @Interval Decorator
-
-Executes methods at fixed time intervals in milliseconds:
-
-```typescript
-@Interval(60000)  // Run every minute (60,000 ms)
-async checkStatus() {
-  await this.monitorSystemHealth();
-}
-```
-
-Options:
-
-- `name`: Assign a name to the interval
-
 ## Database Operations
 
 When extending `DbService`, your service automatically inherits numerous methods for working with the database model.
@@ -606,34 +515,6 @@ class PaymentService extends DbService(db.paymentDb) {
 }
 ```
 
-### 3. Proper Resource Management
-
-Clean up resources in lifecycle hooks:
-
-```typescript
-@Service("ExternalApiService")
-class ExternalApiService extends LogService("ExternalApiService") {
-  private client: ApiClient;
-  private timers: NodeJS.Timeout[] = [];
-
-  async onModuleInit() {
-    this.client = new ApiClient();
-    await this.client.connect();
-
-    this.timers.push(setInterval(() => this.refreshToken(), 3600000));
-  }
-
-  async onModuleDestroy() {
-    // Clean up resources
-    await this.client.disconnect();
-
-    for (const timer of this.timers) {
-      clearInterval(timer);
-    }
-  }
-}
-```
-
 ### 4. Transaction Safety
 
 Use hooks for validating operations:
@@ -818,25 +699,6 @@ export class OrderService extends DbService(db.orderDb) {
 
     return data;
   }
-
-  // Scheduled task
-  @Cron("0 0 * * *", { serverMode: "batch" })
-  async cleanupAbandonedOrders() {
-    const cutoffDate = dayjs().subtract(7, "days");
-    const orders = await this.listPendingOrders(cutoffDate);
-
-    for (const order of orders) {
-      await this.cancelOrder(order.id);
-      this.logger.log(`Cancelled abandoned order: ${order.id}`);
-    }
-  }
-
-  // Summary method
-  async summarize(): Promise<cnst.OrderSummary> {
-    return {
-      ...(await this.orderModel.getSummary()),
-    };
-  }
 }
 ```
 
@@ -894,32 +756,6 @@ If a service isn't being injected correctly:
    }
    ```
 
-### Scheduled Tasks Not Running
-
-1. Verify cron syntax:
-
-   ```typescript
-   // Correct syntax
-   @Cron("0 * * * *")  // Every hour at minute 0
-
-   // Incorrect syntax
-   @Cron("0 * * *")  // Missing day-of-week field
-   ```
-
-2. Check server mode restrictions:
-
-   ```typescript
-   // Only runs in batch mode
-   @Cron("0 * * * *", { serverMode: "batch" })
-   ```
-
-3. Ensure the service is properly initialized:
-   ```typescript
-   onModuleInit() {
-     this.logger.log('Service initialized');  // Is this being logged?
-   }
-   ```
-
 ## Summary
 
 Model services in Akan.js are powerful components that encapsulate business logic and data operations. By following the patterns and best practices outlined in this guide, you can create maintainable, scalable services that effectively implement your application's domain logic while maintaining clean separation of concerns.

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

@@ -22,7 +22,6 @@ Scalar modules provide reusable value objects for:
 ```
 {domain}/lib/
 └── __scalar/                  // Special scalar directory
-    ├── _server.ts             // Module registration
     └── [scalarName]/          // camelCase scalar name
         ├── [name].constant.ts   // Schema definition
         ├── [name].dictionary.ts // I18n translations
@@ -54,7 +53,6 @@ Scalar modules provide reusable value objects for:
 1. **Constant File**: Schema definition with typed fields and validation
 2. **Dictionary File**: I18n translations for model metadata, fields and enums
 3. **Document File**: Optional method extensions for data transformations
-4. **Server Registration**: Aggregate and expose scalars through `_server.ts`
 
 ## Key Rules
 
@@ -62,7 +60,6 @@ Scalar modules provide reusable value objects for:
 2. All fields require decorators (`@Field.Prop`, `@Field.Hidden`, etc.)
 3. Dictionary must include all fields/enums with `modelName`/`modelDesc`
 4. Use `satisfies ModelDictionary<Type>` for dictionary type safety
-5. Register all scalars in `_server.ts` with `scalarModulesOf()`
 
 ## Best Practices
 

package/esm/src/templates/__scalar/__model__/__model__.constant.js

@@ -1,5 +1,5 @@
 // pkgs/@akanjs/cli/src/templates/__scalar/__model__/__model__.constant.ts
-function getContent(scanResult, dict) {
+function getContent(scanInfo, dict) {
   return `
 import { Field, Model } from "@akanjs/constant";
 

package/esm/src/templates/__scalar/__model__/__model__.dictionary.js

@@ -1,5 +1,5 @@
 // pkgs/@akanjs/cli/src/templates/__scalar/__model__/__model__.dictionary.ts
-function getContent(scanResult, dict) {
+function getContent(scanInfo, dict) {
   return `
 import { ModelDictionary } from "@akanjs/dictionary";
 

package/esm/src/templates/__scalar/__model__/__model__.document.js

@@ -1,5 +1,5 @@
 // pkgs/@akanjs/cli/src/templates/__scalar/__model__/__model__.document.ts
-function getContent(scanResult, dict) {
+function getContent(scanInfo, dict) {
   return `
 import { by } from "@akanjs/document";
 

package/esm/src/templates/app/akan.config.js

@@ -1,5 +1,5 @@
 // pkgs/@akanjs/cli/src/templates/app/akan.config.ts
-function getContent(scanResult, dict) {
+function getContent(scanInfo, dict) {
   return `
 import type { AppConfig } from "@akanjs/config";
 

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

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

package/esm/src/templates/app/app/[lang]/page.js

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

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

@@ -1,5 +1,5 @@
 // pkgs/@akanjs/cli/src/templates/app/app/csr.tsx
-function getContent(scanResult, dict) {
+function getContent(scanInfo, dict) {
   return {
     filename: "csr.tsx",
     content: `

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

@@ -1,5 +1,5 @@
 // pkgs/@akanjs/cli/src/templates/app/app/layout.tsx
-function getContent(scanResult, dict) {
+function getContent(scanInfo, dict) {
   return {
     filename: "layout.tsx",
     content: `

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

@@ -1,5 +1,5 @@
 // pkgs/@akanjs/cli/src/templates/app/app/robots.ts
-function getContent(scanResult, dict) {
+function getContent(scanInfo, dict) {
   return `
 import { MetadataRoute } from "next";
 import { env } from "@${dict.appName}/env/env.client";

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

@@ -1,5 +1,5 @@
 // pkgs/@akanjs/cli/src/templates/app/app/sitemap.ts
-function getContent(scanResult, dict) {
+function getContent(scanInfo, dict) {
   return `
 import { MetadataRoute } from "next";
 import { env } from "@${dict.appName}/env/env.client";

package/esm/src/templates/app/base/baseLogic.js

@@ -1,5 +1,5 @@
 // pkgs/@akanjs/cli/src/templates/app/base/baseLogic.ts
-function getContent(scanResult, dict) {
+function getContent(scanInfo, dict) {
   return `
 // \uD604 \uB514\uB809\uD1A0\uB9AC\uC5D0\uC11C\uB294 \uD504\uB85C\uC81D\uD2B8 \uB0B4 \uC804\uCCB4\uC801\uC73C\uB85C \uC0AC\uC6A9\uB418\uB294 \uB85C\uC9C1\uC744 \uAD6C\uD604\uD558\uBA70, \uB530\uB77C\uC11C \uBC31/\uD504\uB860\uD2B8 \uBE44\uC758\uC874\uC801\uC778 pure js \uCF54\uB4DC\uB9CC \uAD6C\uD604 \uAC00\uB2A5\uD569\uB2C8\uB2E4.
 // common\uD3F4\uB354\uC640 \uB2E4\uB978\uC810\uC740, base \uCF54\uB4DC\uB294 \uC2DC\uC2A4\uD15C \uC804\uCCB4\uC5D0\uC11C import\uB418\uC5B4 \uC0AC\uC6A9\uB418\uBBC0\uB85C, \uAC00\uC7A5 \uD575\uC2EC\uC801\uC778 \uB85C\uC9C1\uACFC \uCD94\uC0C1\uD654\uB41C \uAE30\uB2A5\uB9CC \uAD6C\uD604\uD574\uC57C\uD569\uB2C8\uB2E4.

package/esm/src/templates/app/base/index.js

@@ -1,5 +1,5 @@
 // pkgs/@akanjs/cli/src/templates/app/base/index.ts
-function getContent(scanResult, dict = {}) {
+function getContent(scanInfo, dict = {}) {
   return `
 export * from "./baseLogic";
   `;

package/esm/src/templates/app/common/commonLogic.js

@@ -1,5 +1,5 @@
 // pkgs/@akanjs/cli/src/templates/app/common/commonLogic.ts
-function getContent(scanResult, dict) {
+function getContent(scanInfo, dict) {
   return `
 // \uD604 \uB514\uB809\uD1A0\uB9AC\uC5D0\uC11C\uB294 \uD504\uB85C\uC81D\uD2B8 \uB0B4 \uC804\uCCB4\uC801\uC73C\uB85C \uC0AC\uC6A9\uB418\uB294 \uC138\uBD80\uC801\uC778 \uB85C\uC9C1\uC744 \uAD6C\uD604\uD558\uBA70, \uB530\uB77C\uC11C \uBC31/\uD504\uB860\uD2B8 \uBE44\uC758\uC874\uC801\uC778 pure js \uCF54\uB4DC\uB9CC \uAD6C\uD604 \uAC00\uB2A5\uD569\uB2C8\uB2E4.
 // base\uD3F4\uB354\uC640 \uB2E4\uB978\uC810\uC740, common \uCF54\uB4DC\uB294 \uC0AC\uC6A9\uD558\uB294 \uD30C\uC77C\uC5D0\uC11C\uB9CC import\uB418\uAE30 \uB54C\uBB38\uC5D0, \uC678\uBD80\uB77C\uC774\uBE0C\uB7EC\uB9AC\uB97C import\uD574\uC11C \uC0AC\uC6A9\uD558\uAC70\uB098 \uC0C1\uC138\uD55C \uB85C\uC9C1\uC744 \uAD6C\uD604\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.

package/esm/src/templates/app/common/index.js

@@ -1,5 +1,5 @@
 // pkgs/@akanjs/cli/src/templates/app/common/index.ts
-function getContent(scanResult, dict = {}) {
+function getContent(scanInfo, dict = {}) {
   return `
 export * from "./commonLogic";
   `;

package/esm/src/templates/app/env/env.client.js

@@ -1,5 +1,5 @@
 // pkgs/@akanjs/cli/src/templates/app/env/env.client.ts
-function getContent(scanResult, dict = {}) {
+function getContent(scanInfo, dict = {}) {
   return `
 import { env as debug } from "./env.client.debug";
 import { env as develop } from "./env.client.develop";

package/esm/src/templates/app/env/env.client.type.js

@@ -1,5 +1,5 @@
 // pkgs/@akanjs/cli/src/templates/app/env/env.client.type.ts
-function getContent(scanResult, dict = {}) {
+function getContent(scanInfo, dict = {}) {
   return `
 import type { BaseClientEnv } from "@akanjs/base";
 

package/esm/src/templates/app/env/env.server.js

@@ -1,5 +1,5 @@
 // pkgs/@akanjs/cli/src/templates/app/env/env.server.ts
-function getContent(scanResult, dict = {}) {
+function getContent(scanInfo, dict = {}) {
   return `
 import { env as debug } from "./env.server.debug";
 import { env as develop } from "./env.server.develop";

package/esm/src/templates/app/jest.config.js

@@ -1,5 +1,5 @@
 // pkgs/@akanjs/cli/src/templates/app/jest.config.ts
-function getContent(scanResult, dict) {
+function getContent(scanInfo, dict) {
   return `
 //! will be replaced with akan.config.ts
 import "tsconfig-paths/register";

package/esm/src/templates/app/lib/___appName__/__appName__.dictionary.js

@@ -1,9 +1,14 @@
 // pkgs/@akanjs/cli/src/templates/app/lib/___appName__/__appName__.dictionary.ts
-function getContent(scanResult, dict) {
+function getContent(scanInfo, dict) {
   return `
+import type { SignalDictionary } from "@akanjs/dictionary";
+import type { ${dict.AppName}Signal } from "./${dict.appName}.signal";
+
 const dictionary = {} as const;
 
-export const ${dict.appName}Dictionary = dictionary;
+const signalDictionary = {} satisfies SignalDictionary<${dict.AppName}Signal>;
+
+export const ${dict.appName}Dictionary = { ...dictionary, ...signalDictionary };
   `;
 }
 export {

package/esm/src/templates/app/lib/___appName__/__appName__.service.js

@@ -1,5 +1,5 @@
 // pkgs/@akanjs/cli/src/templates/app/lib/___appName__/__appName__.service.ts
-function getContent(scanResult, dict) {
+function getContent(scanInfo, dict) {
   return `
 import { Cron } from "@akanjs/nest";
 import { LogService, Service, Srv } from "@akanjs/service";
@@ -7,14 +7,7 @@ import { LogService, Service, Srv } from "@akanjs/service";
 import type * as srv from "../srv";
 
 @Service("${dict.appName}Service", { serverMode: "batch" })
-export class ${dict.AppName}Service extends LogService("${dict.appName}Service") {
-  @Srv() protected readonly summaryService: srv.SummaryService;
-
-  @Cron("0 * * * *")
-  async takePeriodicSnapshot() {
-    await this.summaryService.makeSummary();
-  }
-}
+export class ${dict.AppName}Service extends LogService("${dict.appName}Service") {}
   `;
 }
 export {

package/esm/src/templates/app/lib/___appName__/__appName__.signal.js

@@ -0,0 +1,14 @@
+// pkgs/@akanjs/cli/src/templates/app/lib/___appName__/__appName__.signal.ts
+function getContent(scanInfo, dict) {
+  return `
+import { LogSignal, Signal } from "@akanjs/signal";
+
+import { Srvs } from "../cnst";
+
+@Signal({ name: "${dict.AppName}" })
+export class ${dict.AppName}Signal extends LogSignal(Srvs) {}
+  `;
+}
+export {
+  getContent as default
+};

package/esm/src/templates/app/lib/___appName__/__appName__.store.js

@@ -1,5 +1,5 @@
 // pkgs/@akanjs/cli/src/templates/app/lib/___appName__/__appName__.store.ts
-function getContent(scanResult, dict) {
+function getContent(scanInfo, dict) {
   return `
 import { scalarStateOf, Store } from "@akanjs/store";
 

package/esm/src/templates/app/lib/option.js

@@ -1,5 +1,5 @@
 // pkgs/@akanjs/cli/src/templates/app/lib/option.ts
-function getContent(scanResult, dict = {}) {
+function getContent(scanInfo, dict = {}) {
   return `
 import { useGlobals } from "@akanjs/server";
 

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

@@ -1,35 +1,22 @@
 // pkgs/@akanjs/cli/src/templates/app/lib/setting/Setting.Template.tsx
-function getContent(scanResult, dict) {
+function getContent(scanInfo, dict) {
   return {
     filename: "Setting.Template.tsx",
     content: `
 "use client";
+import { clsx } from "@akanjs/client";
 import { st, usePage } from "@${dict.appName}/client";
 
 interface GeneralProps {
-  settingId?: string | null;
+  className?: string;
 }
 
-export const General = ({ settingId = undefined }: GeneralProps) => {
+export const General = ({ className }: GeneralProps) => {
   const settingForm = st.use.settingForm();
   const { l } = usePage();
-  return (
-    <div className="mb-4 flex items-center">
-      <div className="flex items-center gap-2">
-        <div className="w-32">{l("setting.resignupDays")}</div>
-        <input
-          type="number"
-          className="input"
-          value={settingForm.resignupDays}
-          onChange={(e) => {
-            st.do.setResignupDaysOnSetting(e.target.valueAsNumber);
-          }}
-        />
-      </div>
-    </div>
-  );
+  return <div className={clsx("", className)}></div>; // update your UI here
 };
-  `
+`
   };
 }
 export {

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

@@ -1,14 +1,14 @@
 // pkgs/@akanjs/cli/src/templates/app/lib/setting/Setting.Unit.tsx
-function getContent(scanResult, dict = {}) {
+function getContent(scanInfo, dict = {}) {
   return {
     filename: "Setting.Unit.tsx",
     content: `
-import { ModelProps } from "@akanjs/client";
+import { clsx, ModelProps } from "@akanjs/client";
 
 import { cnst } from "../cnst";
 
 export const Card = ({ className, setting }: ModelProps<"setting", cnst.LightSetting>) => {
-  return <div>{setting.id}</div>;
+  return <div className={clsx("", className)}>{setting.id}</div>; // update your UI here
 };
   `
   };