@akanjs/cli 0.0.149 → 0.0.151

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

@@ -0,0 +1,83 @@
+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/module/__Model__.Zone.tsx
+var Model_Zone_exports = {};
+__export(Model_Zone_exports, {
+  default: () => getContent
+});
+module.exports = __toCommonJS(Model_Zone_exports);
+function getContent(scanResult, dict) {
+  return {
+    filename: `${dict.Model}.Zone.tsx`,
+    content: `
+"use client";
+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";
+
+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"]}
+    />
+  );
+};
+
+interface CardProps {
+  className?: string;
+  init: ClientInit<"${dict.model}", cnst.Light${dict.Model}>;
+}
+export const Card = ({ className, init }: CardProps) => {
+  return (
+    <Load.Units
+      className={className}
+      init={init}
+      renderItem={(${dict.model}: cnst.Light${dict.Model}) => (
+        <${dict.Model}.Unit.Card key={${dict.model}.id} href={\`/${dict.model}/\${${dict.model}.id}\`} ${dict.model}={${dict.model}} />
+      )}
+    />
+  );
+};
+
+interface ViewProps {
+  className?: string;
+  view: ClientView<"${dict.model}", cnst.${dict.Model}>;
+}
+export const View = ({ view }: ViewProps) => {
+  return <Load.View view={view} renderView={(${dict.model}) => <${dict.Model}.View.General ${dict.model}={${dict.model}} />} />;
+};
+`
+  };
+}

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

@@ -0,0 +1,61 @@
+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/module/index.tsx
+var module_exports = {};
+__export(module_exports, {
+  default: () => getContent
+});
+module.exports = __toCommonJS(module_exports);
+function getContent(scanResult, dict) {
+  return {
+    filename: "index.tsx",
+    content: `
+import { Signal } from "@akanjs/ui";
+import { AiOutlineDatabase } from "react-icons/ai";
+
+import * as Template from "./${dict.Model}.Template";
+import * as Unit from "./${dict.Model}.Unit";
+import * as Util from "./${dict.Model}.Util";
+import * as View from "./${dict.Model}.View";
+import * as Zone from "./${dict.Model}.Zone";
+
+export const ${dict.Model} = {
+  Menu: {
+    Admin: {
+      key: "${dict.model}",
+      label: "${dict.Model}",
+      icon: <AiOutlineDatabase />,
+      render: () => <Zone.Admin />,
+    },
+    Doc: {
+      key: "${dict.model}",
+      label: "${dict.Model}",
+      icon: <AiOutlineDatabase />,
+      render: () => <Signal.Doc.Zone refName="${dict.model}" />,
+    },
+  },
+  Template,
+  Unit,
+  Util,
+  View,
+  Zone,
+};
+`
+  };
+}

package/esm/index.js

@@ -589,7 +589,7 @@ var withBase = (appName, config, libs, routes = []) => {
     eslint: { ...config.eslint, ignoreDuringBuilds: true },
     env: {
       ...config.env,
-      basePaths: routes.map(({ basePath: basePath2 }) => basePath2).join(",")
+      basePaths: [...new Set(routes.map(({ basePath: basePath2 }) => basePath2))].join(",")
     },
     transpilePackages: ["swiper", "ssr-window", "dom7"],
     reactStrictMode: commandType === "start" ? false : true,
@@ -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: {
@@ -755,6 +756,7 @@ CMD ["npm", "start"]`,
         config.libs ?? [],
         config.frontend?.routes
       ),
+      routes: config.frontend?.routes,
       explicitDependencies: config.frontend?.explicitDependencies ?? []
     },
     mobile: {
@@ -1620,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] : [];
@@ -3169,6 +3172,8 @@ ${fileCheck.lintResult.message}`
 import * as esbuild from "esbuild";
 import { dtsPlugin } from "esbuild-plugin-d.ts";
 import fs13 from "fs";
+var assetExtensions = [".css", ".md", ".js", ".png", ".ico", ".svg", ".json", ".template"];
+var assetLoader = Object.fromEntries(assetExtensions.map((ext) => [ext, "copy"]));
 var Builder = class {
   #executor;
   #distExecutor;
@@ -3193,7 +3198,7 @@ var Builder = class {
       format,
       outdir: `${this.#distExecutor.cwdPath}/${format}`,
       logLevel: "error",
-      loader: { ".template": "copy", ".md": "copy" }
+      loader: assetLoader
     };
   }
   #getAssetBuildOptions() {
@@ -3207,7 +3212,7 @@ var Builder = class {
       ],
       outdir: this.#distExecutor.cwdPath,
       logLevel: "error",
-      loader: { ".css": "copy", ".md": "copy", ".js": "copy" }
+      loader: assetLoader
     };
   }
   async build(options = {}) {
@@ -3606,6 +3611,8 @@ var ApplicationRunner = class {
   async #getViteConfig(app, command) {
     const { env } = await this.#prepareCommand(app, command, "csr");
     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;
     const processEnv = env;
     const akanjsPrefix = process.env.USE_AKANJS_PKGS === "true" ? `${app.workspace.workspaceRoot}/pkgs/` : "";
     const config = vite.defineConfig({
@@ -3669,7 +3676,8 @@ var ApplicationRunner = class {
           APP_OPERATION_MODE: processEnv.APP_OPERATION_MODE ?? "local",
           AKAN_WORKSPACE_ROOT: app.workspace.workspaceRoot,
           AKAN_APP_ROOT: app.cwdPath,
-          RENDER_ENV: "csr"
+          RENDER_ENV: "csr",
+          basePaths
         },
         "process.platform": JSON.stringify("browser"),
         "process.version": JSON.stringify(process.version)
@@ -3984,7 +3992,11 @@ var ApplicationScript = class {
     await this.syncApplication(app);
     if (app.workspace.getBaseDevEnv().env === "local")
       await this.dbup(app.workspace);
-    await Promise.all([this.startBackend(app, { open: open2, sync: false }), this.startFrontend(app, { open: open2, sync: false })]);
+    await Promise.all([
+      this.startBackend(app, { open: open2, sync: false }),
+      this.startFrontend(app, { open: open2, sync: false }),
+      this.startCsr(app, { open: open2, sync: false })
+    ]);
   }
   async buildBackend(app, { sync = true } = {}) {
     if (sync)
@@ -4381,11 +4393,7 @@ var PackageRunner = class {
     if (pkg.name === "@akanjs/cli")
       await builder.build({
         bundle: true,
-        additionalEntryPoints: [
-          `${pkg.cwdPath}/src/templates/**/*.ts`,
-          `${pkg.cwdPath}/src/templates/**/*.template`,
-          `${pkg.cwdPath}/src/guidelines/**/*.md`
-        ]
+        additionalEntryPoints: [`${pkg.cwdPath}/src/templates/**/*`, `${pkg.cwdPath}/src/guidelines/**/*`]
       });
     else
       await builder.build();
@@ -4842,7 +4850,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
@@ -4900,7 +4908,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
@@ -4961,7 +4969,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
@@ -5007,7 +5015,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 {
@@ -5503,7 +5511,7 @@ var WorkspaceCommand = class {
 __decorateClass([
   Target.Public(),
   __decorateParam(0, Argument("workspaceName", { desc: "what is the name of your organization?" })),
-  __decorateParam(1, Option("app", { desc: "describe your first application to create " })),
+  __decorateParam(1, Option("app", { desc: "what is the codename of your first application? (e.g. myapp)" })),
   __decorateParam(2, Option("dir", { desc: "directory of workspace", default: process.env.USE_AKANJS_PKGS === "true" ? "local" : "." }))
 ], WorkspaceCommand.prototype, "createWorkspace", 1);
 __decorateClass([

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

@@ -0,0 +1,131 @@
+{
+  "title": "Component Rule",
+  "description": "Comprehensive guidelines for creating React components in the Akan.js framework",
+  "scans": [
+    {
+      "type": "source",
+      "description": "Cookie management utilities for web and mobile",
+      "path": "pkgs/@akanjs/client/src/cookie.ts"
+    },
+    {
+      "type": "source",
+      "description": "Storage utilities for persistent data",
+      "path": "pkgs/@akanjs/client/src/storage.ts"
+    },
+    {
+      "type": "source",
+      "description": "Device capabilities and platform detection",
+      "path": "pkgs/@akanjs/client/src/device.ts"
+    },
+    {
+      "type": "source",
+      "description": "Navigation and routing utilities",
+      "path": "pkgs/@akanjs/client/src/router.ts"
+    },
+    {
+      "type": "source",
+      "description": "Type utilities including clsx for class management",
+      "path": "pkgs/@akanjs/client/src/types.ts"
+    },
+    {
+      "type": "example",
+      "description": "Unit components (list items/cards)",
+      "path": "{apps,libs}/*/lib/*/*.Unit.tsx",
+      "sample": 3
+    },
+    {
+      "type": "example",
+      "description": "View components (detailed displays)",
+      "path": "{apps,libs}/*/lib/*/*.View.tsx",
+      "sample": 3
+    },
+    {
+      "type": "example",
+      "description": "Template components (forms/edit screens)",
+      "path": "{apps,libs}/*/lib/*/*.Template.tsx",
+      "sample": 3
+    },
+    {
+      "type": "example",
+      "description": "Utility components (toolbars/helpers)",
+      "path": "{apps,libs}/*/lib/*/*.Util.tsx",
+      "sample": 3
+    },
+    {
+      "type": "example",
+      "description": "Zone components (data containers)",
+      "path": "{apps,libs}/*/lib/*/*.Zone.tsx",
+      "sample": 3
+    },
+    {
+      "type": "example",
+      "description": "Reusable UI components",
+      "path": "{libs,apps}/*/ui/**/*.tsx",
+      "sample": 5
+    },
+    {
+      "type": "usage",
+      "description": "Component composition patterns",
+      "path": "{apps,libs}/*/lib/*/*.Zone.tsx",
+      "filterText": "renderItem",
+      "sample": 3
+    },
+    {
+      "type": "usage",
+      "description": "Form state management with stores",
+      "path": "{apps,libs}/*/lib/*/*.Template.tsx",
+      "filterText": "st.use",
+      "sample": 3
+    },
+    {
+      "type": "usage",
+      "description": "Conditional rendering with TailwindCSS",
+      "path": "{apps,libs}/*/lib/*/*.tsx",
+      "filterText": "clsx",
+      "sample": 3
+    },
+    {
+      "type": "usage",
+      "description": "Data fetching with Load components",
+      "path": "{apps,libs}/*/lib/*/*.Zone.tsx",
+      "filterText": "<Load.",
+      "sample": 3
+    },
+    {
+      "type": "usage",
+      "description": "Responsive design patterns",
+      "path": "{apps,libs}/*/lib/*/*.tsx",
+      "filterText": "md:",
+      "sample": 3
+    }
+  ],
+  "update": {
+    "filePath": "./componentRule.instruction.md",
+    "contents": [
+      "Component Architecture - Core structure and organization",
+      "Component Types - Purpose and responsibility of each component type",
+      "File Naming Conventions - Standardized naming patterns",
+      "Utility Functions - Core framework utilities",
+      "Best Practices - Guidelines for components",
+      "State Management - Integration with Zustand store and signals",
+      "Responsive Design - Mobile-first approach",
+      "Accessibility - Core principles",
+      "Performance Optimization - Memoization and lazy loading",
+      "Data Fetching - Using Load components",
+      "Composition Patterns - Component rendering methods",
+      "Complete Examples - Full implementation examples"
+    ],
+    "rules": [
+      "Component types (.Unit, .View, .Template, .Util, .Zone) should follow standard patterns and responsibilities",
+      "Every component file should maintain a consistent organization pattern with logical sections",
+      "Responsive design should use Tailwind's mobile-first approach with sm:, md:, lg: prefixes",
+      "Form components should use the framework state management pattern with st.use and st.do",
+      "Data containers should follow the Load.Units/Load.View pattern for consistent data fetching",
+      "Component files should export named components rather than default exports",
+      "Props should use explicit TypeScript interfaces with proper JSDoc comments where helpful",
+      "Separate business logic from presentation components",
+      "Follow Akan.js project structure and module organization"
+    ]
+  },
+  "page": "/[lang]/akanjs/(docs)/docs/codebase/component/page.tsx"
+}

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

@@ -0,0 +1,93 @@
+{
+  "title": "CSS Rule with TailwindCSS and DaisyUI",
+  "description": "Comprehensive guidelines for creating CSS with TailwindCSS and DaisyUI in the Akan.js framework",
+  "scans": [
+    {
+      "type": "source",
+      "description": "clsx utility for class name management",
+      "path": "pkgs/@akanjs/client/src/types.ts"
+    },
+    {
+      "type": "example",
+      "description": "Unit components (list items/cards)",
+      "path": "{apps,libs}/*/lib/*/*.Unit.tsx",
+      "sample": 3
+    },
+    {
+      "type": "example",
+      "description": "View components (detailed displays)",
+      "path": "{apps,libs}/*/lib/*/*.View.tsx",
+      "sample": 3
+    },
+    {
+      "type": "example",
+      "description": "Edit components (forms for data creation/editing)",
+      "path": "{apps,libs}/*/lib/*/*.Edit.tsx",
+      "sample": 2
+    },
+    {
+      "type": "example",
+      "description": "Util components (special function components)",
+      "path": "{apps,libs}/*/lib/*/*.Util.tsx",
+      "sample": 2
+    },
+    {
+      "type": "example",
+      "description": "Zone components (container components)",
+      "path": "{apps,libs}/*/lib/*/*.Zone.tsx",
+      "sample": 2
+    },
+    {
+      "type": "example",
+      "description": "Reusable UI components",
+      "path": "{libs,apps}/*/ui/**/*.tsx",
+      "sample": 3
+    },
+    {
+      "type": "usage",
+      "description": "Conditional rendering with clsx",
+      "path": "{apps,libs}/*/lib/*/*.tsx",
+      "filterText": "clsx",
+      "sample": 3
+    },
+    {
+      "type": "usage",
+      "description": "DaisyUI color usage",
+      "path": "{apps,libs}/*/lib/*/*.tsx",
+      "filterText": "bg-primary|bg-secondary|bg-accent|bg-info|bg-success|bg-warning|bg-error",
+      "sample": 3
+    },
+    {
+      "type": "usage",
+      "description": "Responsive design patterns",
+      "path": "{apps,libs}/*/lib/*/*.tsx",
+      "filterText": "sm:|md:|lg:|xl:|2xl:",
+      "sample": 3
+    }
+  ],
+  "update": {
+    "filePath": "./cssRule.instruction.md",
+    "contents": [
+      "Core Principles - Fundamental styling concepts",
+      "Class Management with clsx - How to handle conditional class names",
+      "Component Structure Best Practices - Consistent component styling",
+      "Component Types in Akan.js - Styling patterns for different component types",
+      "Common UI Patterns - Reusable design patterns",
+      "Best Practices - Guidelines for maintainable CSS",
+      "Common Mistakes to Avoid - What not to do",
+      "Troubleshooting - Fixing common issues"
+    ],
+    "rules": [
+      "clsx should be used for conditional class names and className composition",
+      "Every component should accept and properly handle className prop for composition",
+      "Color system of DaisyUI should be used for colors (primary, secondary, accent, etc.) - hardcoded colors should be avoided",
+      "Components should follow responsive design principles with mobile-first approach",
+      "Use Tailwind's spacing scale consistently for margins and padding",
+      "Group related classes together for better readability",
+      "DaisyUI components should be used for common UI elements when available",
+      "Apply proper focus, hover, and active states for interactive elements",
+      "Respect the naming conventions for component types (Unit, View, Edit, Util, Zone)"
+    ]
+  },
+  "page": "/[lang]/akanjs/(docs)/docs/codebase/css/page.tsx"
+}

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

@@ -0,0 +1,51 @@
+{
+  "title": "Database Module",
+  "description": "Structure of database module",
+  "scans": [
+    {
+      "type": "source",
+      "description": "core database module source code",
+      "path": "pkgs/@akanjs/server/src/module.ts"
+    },
+    {
+      "type": "source",
+      "description": "how to boot modules in Nest.js server",
+      "path": "pkgs/@akanjs/server/src/boot.ts"
+    },
+    {
+      "type": "source",
+      "description": "constant model decorators, database schema decorators, signal decorators reference",
+      "path": "pkgs/@akanjs/constant/src/decorator.ts"
+    },
+    {
+      "type": "example",
+      "description": "example database module of admin",
+      "path": "libs/shared/lib/admin/*"
+    }
+  ],
+  "update": {
+    "filePath": "./databaseModule.instruction.md",
+    "contents": [
+      "Purpose of database modules in Akan.js",
+      "File structure and location conventions",
+      "How to create database modules",
+      "How to use database modules in Nest.js server",
+      "How to use components, stores, and signals in client side",
+      "Real-time features with websockets and subscriptions",
+      "Best practices for data modeling and schema design",
+      "Authentication and authorization patterns",
+      "Performance optimization techniques",
+      "Error handling strategies"
+    ],
+    "rules": [
+      "Database module is a domain specific module to manage business logic of database",
+      "Follow consistent naming conventions with PascalCase for classes and camelCase for files",
+      "Keep business logic in service files, not in signals or documents",
+      "Use field validation in constant models to ensure data integrity",
+      "Create proper indexes in middleware for performance optimization",
+      "Apply appropriate authorization guards to protect sensitive operations",
+      "Use dictionary files for all UI text to support internationalization"
+    ]
+  },
+  "page": "/[lang]/akanjs/(docs)/docs/module/overview/page.tsx"
+}

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";