akanjs 2.0.0-rc.5 → 2.0.0-rc.7

package/cli/index.js

@@ -9346,6 +9346,7 @@ import {
   fork,
   spawn
 } from "child_process";
+import { readFileSync as readFileSync3 } from "fs";
 import { mkdir as mkdir2, readdir as readDirEntries, stat as stat2 } from "fs/promises";
 import path7 from "path";
 import chalk4 from "chalk";
@@ -9579,7 +9580,7 @@ CMD [${command.map((c) => `"${c}"`).join(",")}]`;
   static async from(app) {
     const [configImp, baseDevEnv, libs, rootPackageJson] = await Promise.all([
       import(`${app.cwdPath}/akan.config.ts`).then((mod) => mod.default),
-      WorkspaceExecutor.getBaseDevEnv(),
+      WorkspaceExecutor.getBaseDevEnv(path.join(app.workspace.workspaceRoot, ".env")),
       app.workspace.getLibs(),
       app.workspace.getPackageJson()
     ]);
@@ -10225,7 +10226,7 @@ class ScanInfo {
       name: exec.name,
       type: exec.type,
       repoName: exec.workspace.repoName,
-      serveDomain: WorkspaceExecutor.getBaseDevEnv().serveDomain,
+      serveDomain: WorkspaceExecutor.getBaseDevEnv(path5.join(exec.workspace.workspaceRoot, ".env")).serveDomain,
       akanConfig: akanConfig2,
       files,
       libDeps,
@@ -10695,6 +10696,32 @@ var execEmoji = {
   module: "\u2699\uFE0F",
   default: "\u2708\uFE0F"
 };
+var parseEnvFile = (envPath) => {
+  const env = {};
+  const content = (() => {
+    try {
+      return readFileSync3(envPath, "utf8");
+    } catch {
+      return "";
+    }
+  })();
+  for (const line of content.split(/\r?\n/)) {
+    const trimmed = line.trim();
+    if (!trimmed || trimmed.startsWith("#"))
+      continue;
+    const normalized = trimmed.startsWith("export ") ? trimmed.slice("export ".length).trim() : trimmed;
+    const separatorIndex = normalized.indexOf("=");
+    if (separatorIndex <= 0)
+      continue;
+    const key = normalized.slice(0, separatorIndex).trim();
+    let value = normalized.slice(separatorIndex + 1).trim();
+    if (value.startsWith('"') && value.endsWith('"') || value.startsWith("'") && value.endsWith("'")) {
+      value = value.slice(1, -1);
+    }
+    env[key] = value;
+  }
+  return env;
+};
 var PAGE_ROUTE_EXPORTS = new Set(["default", "pageConfig", "head", "generateHead", "Loading"]);
 var ROOT_LAYOUT_EXPORTS = new Set([
   "default",
@@ -11151,17 +11178,18 @@ class WorkspaceExecutor extends Executor {
   } = {}) {
     return WorkspaceExecutor.#execs.get(repoName) ?? new WorkspaceExecutor({ workspaceRoot, repoName });
   }
-  static getBaseDevEnv() {
-    const appName = process.env.AKAN_PUBLIC_APP_NAME;
-    const workspaceRoot = process.env.AKAN_WORKSPACE_ROOT;
-    const repoName = process.env.AKAN_PUBLIC_REPO_NAME;
+  static getBaseDevEnv(envPath) {
+    const sourceEnv = envPath ? { ...process.env, ...parseEnvFile(envPath) } : process.env;
+    const appName = sourceEnv.AKAN_PUBLIC_APP_NAME;
+    const workspaceRoot = sourceEnv.AKAN_WORKSPACE_ROOT;
+    const repoName = sourceEnv.AKAN_PUBLIC_REPO_NAME;
     if (!repoName)
       throw new Error("AKAN_PUBLIC_REPO_NAME is not set");
-    const serveDomain = process.env.AKAN_PUBLIC_SERVE_DOMAIN;
+    const serveDomain = sourceEnv.AKAN_PUBLIC_SERVE_DOMAIN;
     if (!serveDomain)
       throw new Error("AKAN_PUBLIC_SERVE_DOMAIN is not set");
-    const portOffset = parseInt(process.env.PORT_OFFSET ?? "0");
-    const env = process.env.AKAN_PUBLIC_ENV ?? "debug";
+    const portOffset = parseInt(sourceEnv.PORT_OFFSET ?? "0");
+    const env = sourceEnv.AKAN_PUBLIC_ENV ?? "debug";
     if (!env)
       throw new Error("AKAN_PUBLIC_ENV is not set");
     return { ...appName ? { appName } : {}, workspaceRoot, repoName, serveDomain, env, portOffset };
@@ -17344,7 +17372,7 @@ var NODE_NATIVE_MODULE_SET = new Set([
 
 import yaml from "js-yaml";
 
-import { readFileSync as readFileSync3, realpathSync } from "fs";
+import { readFileSync as readFileSync4, realpathSync } from "fs";
 import ora2 from "ora";
 import * as ts5 from "typescript";
 var tsTranspiler = new Bun.Transpiler({ loader: "ts" });
@@ -17393,7 +17421,7 @@ var collectImportedFiles = (constantFilePath, parsedConfig) => {
     if (analyzedFiles.has(filePath))
       return;
     analyzedFiles.add(filePath);
-    const source = readFileSync3(filePath, "utf-8");
+    const source = readFileSync4(filePath, "utf-8");
     for (const importPath of scanModuleSpecifiers(source, filePath, false)) {
       if (!importPath.startsWith("."))
         continue;
@@ -17473,7 +17501,7 @@ var analyzeProperties = (filesToAnalyze, program2, checker) => {
                 isLibModule: true,
                 isImport: false,
                 libName: left.text,
-                source: readFileSync3(symbolFilePath, "utf-8"),
+                source: readFileSync4(symbolFilePath, "utf-8"),
                 isScalar
               });
             } else {
@@ -17483,7 +17511,7 @@ var analyzeProperties = (filesToAnalyze, program2, checker) => {
                 isImport: false,
                 libName: left.text,
                 isScalar,
-                source: readFileSync3(symbolFilePath, "utf-8")
+                source: readFileSync4(symbolFilePath, "utf-8")
               });
             }
           }
@@ -17501,7 +17529,7 @@ var analyzeProperties = (filesToAnalyze, program2, checker) => {
               isLibModule: false,
               isImport: true,
               isScalar,
-              source: readFileSync3(resolved, "utf-8")
+              source: readFileSync4(resolved, "utf-8")
             });
           }
         }

package/cli/templates/app/page/_index.tsx

@@ -8,82 +8,167 @@ export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: Dic
     filename: "_index.tsx",
     content: `
 import { Link } from "akanjs/ui";
-import { FaBolt, FaBook, FaExternalLinkAlt, FaGraduationCap, FaHeart, FaShieldAlt } from "react-icons/fa";
+import {
+  FaBolt,
+  FaBookOpen,
+  FaBoxOpen,
+  FaCheckCircle,
+  FaCodeBranch,
+  FaExternalLinkAlt,
+  FaLayerGroup,
+  FaRocket,
+  FaShieldAlt,
+  FaTerminal,
+} from "react-icons/fa";
 
 export const head = <title>Akan.js</title>;
 
 export default function Page() {
+  const appName = ${JSON.stringify(dict.appName)};
+
+  const highlights = [
+    {
+      icon: <FaLayerGroup />,
+      title: "One Codebase",
+      description: "Design pages, services, server contracts, and deployment surfaces in one Akan workspace.",
+    },
+    {
+      icon: <FaShieldAlt />,
+      title: "Type-Safe Flow",
+      description: "Keep application contracts close to the business logic they protect.",
+    },
+    {
+      icon: <FaRocket />,
+      title: "Ready To Ship",
+      description: "Start locally, build production artifacts, and grow without changing the app shape.",
+    },
+  ];
+
   return (
-    <div className="bg-base-100 flex min-h-screen items-center justify-center">
-      <div className="container mx-auto px-4 py-16">
-        <div className="mb-16 text-center">
-          <h1 className="mb-6 text-6xl font-bold">Akan.js</h1>
-          <p className="mx-auto max-w-2xl text-lg">A typescript full-stack framework designed for solo developers</p>
-          <p className="mx-auto max-w-2xl text-lg">that enables building servers, web, and apps all at once</p>
-          <p className="mx-auto max-w-2xl text-lg">making in-house development with minimal resources.</p>
-          <div className="my-8 flex flex-wrap justify-center gap-4">
-            <div className="badge badge-lg text-base-100 bg-primary border-none">
-              <FaBolt className="" />
-              All-in-One
-            </div>
-            <div className="badge badge-lg text-base-100 bg-secondary border-none">
-              <FaShieldAlt className="" />
-              Type-Safe
+    <main className="relative min-h-screen overflow-hidden bg-base-100 text-base-content">
+      <div className="absolute -left-48 -top-48 h-96 w-96 rounded-full bg-primary/25 blur-3xl" />
+      <div className="absolute -bottom-56 -right-40 h-112 w-md rounded-full bg-accent/20 blur-3xl" />
+      <div className="absolute inset-x-0 top-0 h-px bg-linear-to-r from-transparent via-primary/60 to-transparent" />
+
+      <section className="relative mx-auto flex min-h-screen w-full max-w-7xl flex-col px-6 py-8 lg:px-8">
+        <nav className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-primary text-base-100 shadow-lg shadow-primary/20">
+              <FaBolt />
             </div>
-            <div className="badge badge-lg text-base-100 bg-success border-none">
-              <FaHeart className="" />
-              Minimal-Code
+            <div>
+              <p className="text-sm font-semibold uppercase tracking-[0.3em] text-primary">Akan.js</p>
+              <p className="text-xs text-base-content/60">Full-stack TypeScript framework</p>
             </div>
           </div>
-        </div>
-        <div className="mb-16 rounded-lg bg-slate-800 p-8">
-          <h2 className="mb-6 text-center text-2xl font-bold text-gray-200">Quick Start</h2>
-          <div className="mockup-code">
-            <pre data-prefix="$">
-              <code className="text-success">bunx create-akan-workspace</code>
-            </pre>
-            <pre data-prefix="$">
-              <code className="text-success">cd my-workspace</code>
-            </pre>
-            <pre data-prefix="$">
-              <code className="text-success">akan start my-app</code>
-            </pre>
-          </div>
-        </div>
-        <div className="mb-16 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
-          <div className="card bg-slate-800">
-            <div className="card-body p-6 text-center">
-              <FaGraduationCap className="mx-auto mb-4 text-4xl text-blue-400" />
-              <h3 className="mb-2 text-lg font-semibold text-gray-200">Learn</h3>
-              <p className="mb-4 text-sm text-gray-400">Step-by-step learning guides</p>
+          <Link href="https://akanjs.com" target="_blank">
+            <button className="btn btn-sm border-base-content/10 bg-base-content/10 text-base-content hover:border-primary hover:bg-primary hover:text-base-100">
+              Official Site
+              <FaExternalLinkAlt />
+            </button>
+          </Link>
+        </nav>
+
+        <div className="grid flex-1 items-center gap-10 py-16 lg:grid-cols-[1.04fr_0.96fr] lg:py-10">
+          <div>
+            <div className="badge mb-6 border-primary/20 bg-primary/10 px-4 py-3 text-primary">
+              <FaCheckCircle />
+              Your app is running
+            </div>
+            <h1 className="max-w-4xl text-5xl font-black tracking-tight text-base-content sm:text-6xl lg:text-7xl">
+              Build your business app as one connected system.
+            </h1>
+            <p className="mt-6 max-w-2xl text-lg leading-8 text-base-content/70">
+              Akan.js helps solo developers and small teams create web, server, database, and deployment-ready
+              surfaces from a single TypeScript workspace.
+            </p>
+
+            <div className="mt-8 flex flex-wrap gap-3">
+              <span className="badge badge-lg border-base-content/10 bg-base-content/10 text-base-content">All-in-one</span>
+              <span className="badge badge-lg border-base-content/10 bg-base-content/10 text-base-content">Type-safe</span>
+              <span className="badge badge-lg border-base-content/10 bg-base-content/10 text-base-content">Minimal code</span>
+              <span className="badge badge-lg border-base-content/10 bg-base-content/10 text-base-content">Bun-first</span>
+            </div>
+
+            <div className="mt-10 flex flex-col gap-3 sm:flex-row">
+              <Link href="https://akanjs.com/docs/intro/quickstart" target="_blank">
+                <button className="btn border-none bg-primary text-base-100 hover:bg-primary/80">
+                  Read Quick Start
+                  <FaBookOpen />
+                </button>
+              </Link>
               <Link href="https://akanjs.com/docs/intro/practice" target="_blank">
-                <button className="btn btn-sm w-full">Learn</button>
+                <button className="btn border-base-content/10 bg-base-content/10 text-base-content hover:border-base-content/20 hover:bg-base-content/15">
+                  Learn By Building
+                  <FaCodeBranch />
+                </button>
               </Link>
             </div>
           </div>
-          <div className="card bg-slate-800">
-            <div className="card-body p-6 text-center">
-              <FaBook className="mx-auto mb-4 text-4xl text-purple-400" />
-              <h3 className="mb-2 text-lg font-semibold text-gray-200">Documentation</h3>
-              <p className="mb-4 text-sm text-gray-400">Complete API guides and tutorials</p>
-              <Link href="https://akanjs.com/docs/systemArch/overview" target="_blank">
-                <button className="btn btn-sm w-full">Read Documentation</button>
-              </Link>
+
+          <div className="relative">
+            <div className="absolute inset-0 rotate-3 rounded-4xl bg-primary/20 blur-2xl" />
+            <div className="relative overflow-hidden rounded-4xl border border-base-content/10 bg-base-content/6 p-5 shadow-2xl backdrop-blur">
+              <div className="mb-5 flex items-center justify-between rounded-2xl border border-base-content/10 bg-base-100/70 px-4 py-3">
+                <div>
+                  <p className="text-xs uppercase tracking-[0.24em] text-base-content/40">Current App</p>
+                  <p className="text-lg font-semibold text-base-content">{appName}</p>
+                </div>
+                <div className="rounded-xl bg-primary/10 px-3 py-2 text-sm font-medium text-primary">Live</div>
+              </div>
+
+              <div className="mockup-code border border-base-content/10 bg-base-100 text-sm shadow-none">
+                <pre data-prefix="$">
+                  <code className="text-primary">bun run akan start {appName}</code>
+                </pre>
+                <pre data-prefix="✓">
+                  <code className="text-accent">server, web, and app surfaces ready</code>
+                </pre>
+                <pre data-prefix="→">
+                  <code className="text-base-content/70">edit page/_index.tsx to begin</code>
+                </pre>
+              </div>
+
+              <div className="mt-5 grid gap-3 sm:grid-cols-3">
+                {[
+                  ["Pages", "UI routes"],
+                  ["Services", "Typed APIs"],
+                  ["Deploy", "Artifacts"],
+                ].map(([title, description]) => (
+                  <div key={title} className="rounded-2xl border border-base-content/10 bg-base-content/4 p-4">
+                    <p className="text-sm font-semibold text-base-content">{title}</p>
+                    <p className="mt-1 text-xs text-base-content/60">{description}</p>
+                  </div>
+                ))}
+              </div>
             </div>
           </div>
-          <div className="card bg-slate-800">
-            <div className="card-body p-6 text-center">
-              <FaExternalLinkAlt className="mx-auto mb-4 text-4xl text-yellow-400" />
-              <h3 className="mb-2 text-lg font-semibold text-gray-200">Official Site</h3>
-              <p className="mb-4 text-sm text-gray-400">Visit our official website</p>
-              <Link href="https://akanjs.com" target="_blank">
-                <button className="btn btn-sm w-full">Go to akanjs.com</button>
-              </Link>
+        </div>
+
+        <div className="grid gap-4 pb-8 md:grid-cols-3">
+          {highlights.map((item) => (
+            <div key={item.title} className="rounded-3xl border border-base-content/10 bg-base-content/4 p-6 backdrop-blur">
+              <div className="mb-5 flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/10 text-xl text-primary">
+                {item.icon}
+              </div>
+              <h2 className="text-lg font-bold text-base-content">{item.title}</h2>
+              <p className="mt-2 text-sm leading-6 text-base-content/60">{item.description}</p>
             </div>
+          ))}
+        </div>
+
+        <div className="flex flex-col items-start justify-between gap-4 rounded-3xl border border-base-content/10 bg-base-content/4 p-5 text-sm text-base-content/70 md:flex-row md:items-center">
+          <div className="flex items-center gap-3">
+            <FaTerminal className="text-primary" />
+            <span>Next: open your workspace and start shaping the product around your business model.</span>
+          </div>
+          <div className="flex items-center gap-2 text-base-content/40">
+            <FaBoxOpen />
+            <span>Akan.js template</span>
           </div>
         </div>
-      </div>
-    </div>
+      </section>
+    </main>
   );
 }`,
   };

package/cli/templates/app/page/styles.css.template

@@ -8,8 +8,46 @@
 
 @plugin "daisyui/theme" {
   name: "light";
+  --color-primary: #c33c32;
+  --color-secondary: #2b2e33;
+  --color-accent: #e67e22;
+  --color-accent-content: #ffffff;
+  --color-base-content: #2c3e50;
+  --color-base-100: #fafafa;
+  --color-base-200: #f5f5f5;
+  --color-info: #f1fdff;
+  --color-info-content: #2c3e50;
+  --color-neutral: #292c32;
+  --color-neutral-content: #fafafa;
+  --color-success: #2ecc71;
+  --color-success-content: #fafafa;
+  --color-warning: #f39c12;
+  --color-warning-content: #fafafa;
+  --color-error: #e74c3c;
+  --color-error-content: #fafafa;
+  --color-open: #27ae60;
+  --color-open-content: #fafafa;
 }
 
 @plugin "daisyui/theme" {
   name: "dark";
+  default: true;
+  --color-primary: #ff493b;
+  --color-secondary: #2b2e33;
+  --color-accent: #d1a23b;
+  --color-accent-content: #ffffff;
+  --color-base-content: #ffffff;
+  --color-base-100: #1a1a1a;
+  --color-base-200: #2a2a2a;
+  --color-info: #173b78;
+  --color-info-content: #ffffff;
+  --color-neutral: #3ed13b;
+  --color-neutral-content: #ffffff;
+  --color-success: #255fc3;
+  --color-success-content: #ffffff;
+  --color-warning: #ffcc00;
+  --color-warning-content: #ffffff;
+  --color-error: #f02020;
+  --color-error-content: #ffffff;
+  --color-open: #10fc00;
 }

package/cli/templates/workspaceRoot/package.json.template

@@ -2,6 +2,10 @@
   "name": "<%= repoName %>",
   "description": "<%= repoName %> workspace",
   "version": "0.0.1",
-  "dependencies": {},
+  "dependencies": {
+    "daisyui": "^5.5.20",
+    "tailwind-scrollbar": "^4.0.2",
+    "tailwindcss-radix": "^4.0.2"
+  },
   "devDependencies": {}
 }

package/devkit/akanConfig/akanConfig.ts

@@ -256,7 +256,7 @@ CMD [${command.map((c) => `"${c}"`).join(",")}]`;
   static async from(app: App) {
     const [configImp, baseDevEnv, libs, rootPackageJson] = await Promise.all([
       import(`${app.cwdPath}/akan.config.ts`).then((mod) => mod.default),
-      WorkspaceExecutor.getBaseDevEnv(),
+      WorkspaceExecutor.getBaseDevEnv(path.join(app.workspace.workspaceRoot, ".env")),
       app.workspace.getLibs(),
       app.workspace.getPackageJson(),
     ]);

package/devkit/executors.ts

@@ -7,6 +7,7 @@ import {
   type SpawnOptions,
   spawn,
 } from "node:child_process";
+import { readFileSync } from "node:fs";
 import { mkdir, readdir as readDirEntries, stat } from "node:fs/promises";
 import path from "node:path";
 import {
@@ -40,6 +41,34 @@ export const execEmoji = {
   default: "✈️", // for sys executor
 };
 
+const parseEnvFile = (envPath: string): Record<string, string> => {
+  const env: Record<string, string> = {};
+  const content = (() => {
+    try {
+      return readFileSync(envPath, "utf8");
+    } catch {
+      return "";
+    }
+  })();
+  for (const line of content.split(/\r?\n/)) {
+    const trimmed = line.trim();
+    if (!trimmed || trimmed.startsWith("#")) continue;
+    const normalized = trimmed.startsWith("export ") ? trimmed.slice("export ".length).trim() : trimmed;
+    const separatorIndex = normalized.indexOf("=");
+    if (separatorIndex <= 0) continue;
+    const key = normalized.slice(0, separatorIndex).trim();
+    let value = normalized.slice(separatorIndex + 1).trim();
+    if (
+      (value.startsWith('"') && value.endsWith('"')) ||
+      (value.startsWith("'") && value.endsWith("'"))
+    ) {
+      value = value.slice(1, -1);
+    }
+    env[key] = value;
+  }
+  return env;
+};
+
 const PAGE_ROUTE_EXPORTS = new Set(["default", "pageConfig", "head", "generateHead", "Loading"]);
 const ROOT_LAYOUT_EXPORTS = new Set([
   "default",
@@ -563,20 +592,22 @@ export class WorkspaceExecutor extends Executor {
   } = {}) {
     return WorkspaceExecutor.#execs.get(repoName) ?? new WorkspaceExecutor({ workspaceRoot, repoName });
   }
-  static getBaseDevEnv() {
+  static getBaseDevEnv(envPath?: string) {
     
-    const appName = process.env.AKAN_PUBLIC_APP_NAME;
-    const workspaceRoot = process.env.AKAN_WORKSPACE_ROOT;
+    const sourceEnv = envPath ? { ...process.env, ...parseEnvFile(envPath) } : process.env;
+
+    const appName = sourceEnv.AKAN_PUBLIC_APP_NAME;
+    const workspaceRoot = sourceEnv.AKAN_WORKSPACE_ROOT;
 
-    const repoName = process.env.AKAN_PUBLIC_REPO_NAME;
+    const repoName = sourceEnv.AKAN_PUBLIC_REPO_NAME;
     if (!repoName) throw new Error("AKAN_PUBLIC_REPO_NAME is not set");
 
-    const serveDomain = process.env.AKAN_PUBLIC_SERVE_DOMAIN;
+    const serveDomain = sourceEnv.AKAN_PUBLIC_SERVE_DOMAIN;
     if (!serveDomain) throw new Error("AKAN_PUBLIC_SERVE_DOMAIN is not set");
 
-    const portOffset = parseInt(process.env.PORT_OFFSET ?? "0");
+    const portOffset = parseInt(sourceEnv.PORT_OFFSET ?? "0");
 
-    const env = (process.env.AKAN_PUBLIC_ENV ?? "debug") as
+    const env = (sourceEnv.AKAN_PUBLIC_ENV ?? "debug") as
       | "testing"
       | "debug"
       | "develop"

package/devkit/scanInfo.ts

@@ -284,12 +284,12 @@ class ScanInfo {
         });
       }),
     ]);
-    const routes = exec.type === "lib" ? [] : await exec.getPageKeys();
+    const routes = exec.type === "lib" ? [] : await (exec as AppExecutor).getPageKeys();
     const scanResult: AppScanResult | LibScanResult = {
       name: exec.name,
       type: exec.type,
       repoName: exec.workspace.repoName,
-      serveDomain: WorkspaceExecutor.getBaseDevEnv().serveDomain,
+      serveDomain: WorkspaceExecutor.getBaseDevEnv(path.join(exec.workspace.workspaceRoot, ".env")).serveDomain,
       akanConfig,
       files,
       libDeps,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "akanjs",
-  "version": "2.0.0-rc.5",
+  "version": "2.0.0-rc.7",
   "sourceType": "module",
   "type": "module",
   "bin": {

package/ui/styles.css

@@ -1,5 +1,4 @@
 @source "./**/*";
-@plugin "tailwindcss-animation-delay";
 @plugin "tailwind-scrollbar";
 @plugin "tailwindcss-radix";