@akanjs/cli 0.9.42 → 0.9.43

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

@@ -27,36 +27,9 @@ function getContent(scanInfo, dict) {
     filename: "User.Zone.tsx",
     content: `
 "use client";
-import { ModelsProps } from "@akanjs/client";
-import { DefaultOf } from "@akanjs/signal";
-import { cnst, st, User } from "@${dict.libName}/client";
-import { Data, Model } from "@akanjs/ui";
+import { st, User } from "@${dict.libName}/client";
+import { Model } from "@akanjs/ui";
 
-export const Admin = ({ sliceName = "user", init, query }: ModelsProps<cnst.User>) => {
-  return (
-    <Data.ListContainer
-      init={init}
-      query={query}
-      sliceName={sliceName}
-      renderItem={User.Unit.Card}
-      renderDashboard={User.Util.Stat}
-      renderInsight={User.Util.Insight}
-      renderTemplate={User.Template.General}
-      renderTitle={(user: DefaultOf<cnst.User>) => \`\${user.nickname}\`}
-      renderView={(user: cnst.User) => <User.View.General user={user} />}
-      type="list"
-      columns={["nickname", "status", "lastLoginAt", "createdAt"]}
-      actions={(user: cnst.LightUser, idx) => [
-        "remove",
-        "edit",
-        "view",
-        user.status === "active"
-          ? { type: "restrict", render: () => <User.Util.Restrict id={user.id} /> }
-          : { type: "release", render: () => <User.Util.Release id={user.id} /> },
-      ]}
-    />
-  );
-};
 
 interface SelfProps {
   className?: string;

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

@@ -36,13 +36,7 @@ export class UserInput extends by(rootUser.Input, cnst.UserInput) {}
 export class User extends by(rootUser.Doc, cnst.User) {}
 
 @Database.Model(() => cnst.User)
-export class UserModel extends into(User, cnst.userCnst) {
-  async getSummary(): Promise<cnst.UserSummary> {
-    return {
-      ...(await this.getDefaultSummary()),
-    };
-  }
-}
+export class UserModel extends into(User, cnst.userCnst) {}
 
 @Database.Middleware(() => cnst.User)
 export class UserMiddleware extends beyond(UserModel, User) {

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

@@ -31,12 +31,6 @@ import { cnst } from "../cnst";
 import * as db from "../db";
 
 @Service("UserService")
-export class UserService extends ExtendedUserService(db.userDb, LibUserService) {
-  async summarize${dict.LibName}(): Promise<cnst.${dict.LibName}UserSummary> {
-    return {
-      ...(await this.userModel.getSummary()),
-    };
-  }
-}
-  `;
+export class UserService extends ExtendedUserService(db.userDb, LibUserService) {}
+`;
 }

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

@@ -27,43 +27,13 @@ function getContent(scanInfo, dict) {
     filename: `${dict.Model}.Util.tsx`,
     content: `
 "use client";
-import { ModelDashboardProps, ModelInsightProps } from "@akanjs/client";
-import { getQueryMap } from "@akanjs/constant";
-import { cnst } from "@${dict.sysName}/client";
-import { Data } from "@akanjs/ui";
+import { Model } from "@akanjs/ui";
 
-export const Stat = ({
-  className,
-  summary,
-  sliceName = "${dict.model}",
-  queryMap = getQueryMap(cnst.${dict.Model}Summary),
-  hidePresents,
-}: ModelDashboardProps<cnst.Summary>) => {
-  return (
-    <Data.Dashboard
-      className={className}
-      summary={summary}
-      sliceName={sliceName}
-      queryMap={queryMap}
-      columns={["total${dict.Model}"]}
-      hidePresents={hidePresents}
-    />
-  );
-};
-
-export const Insight = ({
-  className,
-  insight,
-  sliceName = "${dict.model}",
-}: ModelInsightProps<cnst.${dict.Model}Insight>) => {
-  return (
-    <Data.Insight
-      className={className}
-      insight={insight}
-      sliceName={sliceName}
-      columns={["count"]}
-    />
-  );
+interface RemoveProps {
+  ${dict.model}Id: string;
+}
+export const Remove = ({ ${dict.model}Id }: RemoveProps) => {
+  return <Model.Remove modelId={${dict.model}Id} sliceName="${dict.model}" />;
 };
 `
   };

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

@@ -27,33 +27,9 @@ function getContent(scanInfo, dict) {
     filename: `${dict.Model}.Zone.tsx`,
     content: `
 "use client";
-import { Data, Load } from "@akanjs/ui";
-import { ModelsProps } from "@akanjs/client";
+import { Load } from "@akanjs/ui";
 import { cnst, ${dict.Model} } from "@${dict.sysName}/client";
-import { ClientInit, ClientView, DefaultOf } from "@akanjs/signal";
-
-export const Admin = ({ sliceName = "${dict.model}", init, query }: ModelsProps<cnst.${dict.Model}>) => {
-  return (
-    <Data.ListContainer
-      init={init}
-      query={query}
-      sliceName={sliceName}
-      renderItem={${dict.Model}.Unit.Card}
-      renderDashboard={${dict.Model}.Util.Stat}
-      renderInsight={${dict.Model}.Util.Insight}
-      renderTemplate={${dict.Model}.Template.General}
-      renderTitle={(${dict.model}: DefaultOf<cnst.${dict.Model}>) => \`${dict.Model} - \${${dict.model}.id ? ${dict.model}.id : "New"}\`}
-      renderView={(${dict.model}: cnst.${dict.Model}) => <${dict.Model}.View.General ${dict.model}={${dict.model}} />}
-      columns={[
-        "id",
-        "status",
-        "createdAt",
-        "updatedAt",
-      ]}
-      actions={(${dict.model}: cnst.Light${dict.Model}, idx) => ["remove", "edit", "view"]}
-    />
-  );
-};
+import { ClientInit, ClientView } from "@akanjs/signal";
 
 interface CardProps {
   className?: string;

package/cjs/src/templates/module/__model__.document.js

@@ -35,13 +35,7 @@ export class ${dict.Model}Input extends by(cnst.${dict.Model}Input) {}
 export class ${dict.Model} extends by(cnst.${dict.Model}) {}
 
 @Database.Model(() => cnst.${dict.Model})
-export class ${dict.Model}Model extends into(${dict.Model}, cnst.${dict.model}Cnst) {
-  async getSummary(): Promise<cnst.${dict.Model}Summary> {
-    return {
-      ...(await this.getDefaultSummary()),
-    };
-  }
-}
+export class ${dict.Model}Model extends into(${dict.Model}, cnst.${dict.model}Cnst) {}
 
 @Database.Middleware(() => cnst.${dict.Model})
 export class ${dict.Model}Middleware extends beyond(${dict.Model}Model, ${dict.Model}) {

package/cjs/src/templates/module/__model__.service.js

@@ -30,12 +30,6 @@ import { cnst } from "../cnst";
 import * as db from "../db";
 
 @Service("${dict.Model}Service")
-export class ${dict.Model}Service extends DbService(db.${dict.model}Db) {
-  async summarize(): Promise<cnst.${dict.Model}Summary> {
-    return {
-      ...(await this.${dict.model}Model.getSummary()),
-    };
-  }
-}
+export class ${dict.Model}Service extends DbService(db.${dict.model}Db) {}
 `;
 }

package/cjs/src/templates/workspaceRoot/.vscode/settings.json.template

@@ -2,7 +2,6 @@
   "testing.saveBeforeTest": false,
   "jest.autoRun": "false",
   "jestTestExplorer.flattenExplorer": false,
-  "eslint.validate": ["json"],
   "prettier.configPath": ".prettierrc.json",
   "tailwindCSS.classAttributes": ["class", "className", ".*Class", ".*ClassName"],
   "colorize.languages": ["typescript", "javascript", "css", "scss"],

package/esm/index.js

@@ -3941,6 +3941,7 @@ var MultiScrollList = ({ logList, maxLength = 100 }) => {
   const [boxHeight, setBoxHeight] = useState2(
     height - HEADER_HEIGHT - OUTER_BORDER_HEIGHT - FOOTER_HEIGHT - BORDER_HEIGHT
   );
+  const [boxWidth, setBoxWidth] = useState2(width - 28);
   const getLimitedLogs = (logs) => {
     return logs.length > maxLength ? logs.slice(logs.length - maxLength) : logs;
   };
@@ -3992,6 +3993,15 @@ var MultiScrollList = ({ logList, maxLength = 100 }) => {
   useEffect2(() => {
     const getLogsToRender = (logs, index) => {
       const limitedLogs = getLimitedLogs(logs);
+      const logWidth = limitedLogs.reduce((acc, log) => acc + log.content.length, 0);
+      if (logWidth > boxWidth) {
+        return limitedLogs.map((log) => {
+          return {
+            type: log.type,
+            content: log.content.slice(0, boxWidth)
+          };
+        });
+      }
       if (scrollPos > 0 && tabIndex === index) {
         return limitedLogs.slice(limitedLogs.length - boxHeight - scrollPos, limitedLogs.length - scrollPos);
       } else if (limitedLogs.length > boxHeight) {
@@ -4032,9 +4042,9 @@ var MultiScrollList = ({ logList, maxLength = 100 }) => {
       height: "100%"
     },
     scrollPos > 0 ? /* @__PURE__ */ React.createElement(React.Fragment, null, focusLog.slice(0, focusLog.length - 1).map((log, index) => {
-      return /* @__PURE__ */ React.createElement(Text, { key: index }, log);
+      return /* @__PURE__ */ React.createElement(Text, { color: log.type === "error" ? "red" : "white", key: index }, log.content);
     }), /* @__PURE__ */ React.createElement(Text, { backgroundColor: "green" }, "Scrolling... +", scrollPos)) : focusLog.map((log, index) => {
-      return /* @__PURE__ */ React.createElement(Text, { key: index }, log);
+      return /* @__PURE__ */ React.createElement(Text, { color: log.type === "error" ? "red" : "white", key: index }, log.content);
     })
   ))), /* @__PURE__ */ React.createElement(Box, { width: "100%", height: FOOTER_HEIGHT }, /* @__PURE__ */ React.createElement(Text, { dimColor: true }, /* @__PURE__ */ React.createElement(Text, null, "You can use the following shortcuts:"), /* @__PURE__ */ React.createElement(Newline, null), "* ", /* @__PURE__ */ React.createElement(Text, { backgroundColor: "green" }, "tab"), " to switch tab.", /* @__PURE__ */ React.createElement(Newline, null), "* ", /* @__PURE__ */ React.createElement(Text, { backgroundColor: "green" }, "up"), " and ", /* @__PURE__ */ React.createElement(Text, { backgroundColor: "green" }, "down"), " to scroll.", " ", /* @__PURE__ */ React.createElement(Text, { backgroundColor: "green" }, "shift"), " to scroll faster. (x10)", /* @__PURE__ */ React.createElement(Newline, null), "* ", /* @__PURE__ */ React.createElement(Text, { backgroundColor: "green" }, "space"), " to scroll.", /* @__PURE__ */ React.createElement(Newline, null), "* ", /* @__PURE__ */ React.createElement(Text, { backgroundColor: "green" }, "escape"), " to stop scrolling.")));
 };
@@ -4157,17 +4167,17 @@ var Start = ({ appName, bcp, fcp, csr, maxLength = 100 }) => {
       logList: [
         {
           title: `${appName} frontend`,
-          logs: frontendLogs.map((log) => log.content),
+          logs: frontendLogs,
           color: "#ff493b"
         },
         {
           title: `${appName} backend`,
-          logs: backendLogs.map((log) => log.content),
+          logs: backendLogs,
           color: "#e535ab"
         },
         {
           title: `${appName} react`,
-          logs: csrLogs.map((log) => log.content),
+          logs: csrLogs,
           color: "#7cc5d9"
         }
       ],
@@ -6281,7 +6291,7 @@ var WorkspaceRunner = class {
         ...Object.fromEntries(devDependencies.map((dependency) => [dependency, latestPublishedVersionOfBase]))
       }
     };
-    workspace.writeFile("package.json", packageJson);
+    workspace.setPackageJson(packageJson);
     const installSpinner = workspace.spinning("Installing dependencies with pnpm...");
     await workspace.spawn("pnpm", ["install", "--reporter=silent"]);
     installSpinner.succeed("Dependencies installed with pnpm");

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/modelService/modelService.generate.json

@@ -52,34 +52,6 @@
       "filterText": "@Sig",
       "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",
-      "sample": 1
-    },
     {
       "type": "example",
       "description": "DbService _preCreate examples",
@@ -143,8 +115,6 @@
       "Purpose and role of model.service.ts files",
       "Service structure and inheritance (DbService, LogService, MixSrvs)",
       "Core decorators (@Service, @Srv, @Use, @Db, @Sig)",
-      "Lifecycle methods (onModuleInit, onModuleDestroy)",
-      "Scheduled tasks (@Cron, @Interval)",
       "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/templates/app/lib/___appName__/__appName__.dictionary.js

@@ -1,9 +1,14 @@
 // pkgs/@akanjs/cli/src/templates/app/lib/___appName__/__appName__.dictionary.ts
 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

@@ -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/summary/Summary.Zone.js

@@ -4,29 +4,9 @@ function getContent(scanInfo, dict) {
     filename: "Summary.Zone.tsx",
     content: `
 "use client";
-import { ModelsProps } from "@akanjs/client";
-import { DefaultOf } from "@akanjs/signal";
-import { cnst, st, Summary } from "@${dict.appName}/client";
-import { Data } from "@akanjs/ui";
+import { st, Summary } from "@${dict.appName}/client";
 import { Loading } from "@akanjs/ui";
 
-export const Admin = ({ sliceName = "summary", init, query }: ModelsProps<cnst.Summary>) => {
-  return (
-    <Data.ListContainer
-      init={init}
-      query={query}
-      sliceName={sliceName}
-      renderItem={Summary.Unit.Card}
-      renderTemplate={Summary.Template.General}
-      renderTitle={(summary: DefaultOf<cnst.Summary>) => \`\${summary.at}\`}
-      renderView={(summary: cnst.Summary) => <Summary.View.General summary={summary} />}
-      type="list"
-      columns={["type", "status", "createdAt"]}
-      actions={(summary: cnst.LightSummary, idx) => ["remove", "edit"]}
-    />
-  );
-};
-
 export const Dashboard = () => {
   const summary = st.use.summary();
   if (!summary) return <Loading.Skeleton active />;

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

@@ -4,34 +4,9 @@ function getContent(scanInfo, dict) {
     filename: "User.Util.tsx",
     content: `
 "use client";
-import { clsx, ModelDashboardProps, ModelInsightProps } from "@akanjs/client";
-import { getQueryMap } from "@akanjs/constant";
-import { cnst, st } from "@${dict.appName}/client";
-import { Data } from "@akanjs/ui";
+import { clsx, st } from "@${dict.appName}/client";
 import { AiOutlineEdit, AiOutlineLock, AiOutlineUnlock } from "react-icons/ai";
 
-export const Stat = ({
-  className,
-  summary,
-  sliceName = "user",
-  queryMap = getQueryMap(cnst.UserSummary),
-  hidePresents,
-}: ModelDashboardProps<cnst.Summary>) => {
-  return (
-    <Data.Dashboard
-      className={clsx("", className)}
-      summary={summary}
-      sliceName={sliceName}
-      queryMap={queryMap}
-      columns={["totalUser", "dau"]}
-      hidePresents={hidePresents}
-    />
-  );
-};
-export const Insight = ({ className, insight, sliceName = "user" }: ModelInsightProps<cnst.UserInsight>) => {
-  return <Data.Insight className={clsx("", className)} insight={insight} sliceName={sliceName} columns={["count"]} />;
-};
-
 interface EditSelfProps {
   className?: string;
 }

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

@@ -4,36 +4,8 @@ function getContent(scanInfo, dict) {
     filename: "User.Zone.tsx",
     content: `
 "use client";
-import { ModelsProps } from "@akanjs/client";
-import { DefaultOf } from "@akanjs/signal";
-import { cnst, st, User } from "@${dict.appName}/client";
-import { Data, Model } from "@akanjs/ui";
-
-export const Admin = ({ sliceName = "user", init, query }: ModelsProps<cnst.User>) => {
-  return (
-    <Data.ListContainer
-      init={init}
-      query={query}
-      sliceName={sliceName}
-      renderItem={User.Unit.Card}
-      renderDashboard={User.Util.Stat}
-      renderInsight={User.Util.Insight}
-      renderTemplate={User.Template.General}
-      renderTitle={(user: DefaultOf<cnst.User>) => \`\${user.nickname}\`}
-      renderView={(user: cnst.User) => <User.View.General user={user} />}
-      type="list"
-      columns={["nickname", "status", "lastLoginAt", "createdAt"]}
-      actions={(user: cnst.LightUser, idx) => [
-        "remove",
-        "edit",
-        "view",
-        user.status === "active"
-          ? { type: "restrict", render: () => <User.Util.Restrict id={user.id} /> }
-          : { type: "release", render: () => <User.Util.Release id={user.id} /> },
-      ]}
-    />
-  );
-};
+import { st, User } from "@${dict.appName}/client";
+import { Model } from "@akanjs/ui";
 
 interface SelfProps {
   className?: string;