@akanjs/devkit 3.1.0-rc.9 → 3.1.1-rc.0

package/frontendBuild/csrArtifactBuilder.test.ts

@@ -61,4 +61,44 @@ console.info(await result.outputs[0].text());
     expect(firstOutput).toBe(secondOutput);
     expect(firstOutput).not.toContain(path.basename(first));
   });
+
+  //? The shape of `@lexical/code-prism` under a `lazy()` editor, which threw in every view and CSR shell carrying it.
+  test("runs a lazily imported module's CommonJS side-effect import before the imports after it", async () => {
+    const root = await makeTempRoot();
+    const app = { getPublicEnv: () => ({ AKAN_PUBLIC_ENV: "main" }) };
+    await writeText(path.join(root, "node_modules/core/package.json"), '{ "name": "core", "main": "index.js" }\n');
+    await writeText(
+      path.join(root, "node_modules/core/index.js"),
+      "var Core = { langs: [] };\nglobalThis.Core = Core;\nmodule.exports = Core;\n",
+    );
+    await writeText(path.join(root, "node_modules/core/components/a.js"), 'Core.langs.push("a");\n');
+    await writeText(
+      path.join(root, "node_modules/highlight/package.json"),
+      '{ "name": "highlight", "type": "module", "main": "index.js" }\n',
+    );
+    await writeText(
+      path.join(root, "node_modules/highlight/index.js"),
+      'import "core";\nimport "core/components/a.js";\nexport const langs = () => globalThis.Core.langs;\n',
+    );
+    await writeText(
+      path.join(root, "entry.ts"),
+      'import("highlight").then(({ langs }) => console.info(langs().join()));\n',
+    );
+    const result = await Bun.build({
+      ...CsrArtifactBuilder.bundleOptions(app as never, "build"),
+      entrypoints: [path.join(root, "entry.ts")],
+    });
+    expect(result.success).toBe(true);
+    await Bun.write(path.join(root, "out.js"), (await result.outputs[0]?.text()) ?? "");
+
+    const proc = Bun.spawn([process.execPath, "out.js"], { cwd: root, stdout: "pipe", stderr: "pipe" });
+    const [stdout, stderr] = await Promise.all([
+      new Response(proc.stdout).text(),
+      new Response(proc.stderr).text(),
+      proc.exited,
+    ]);
+
+    expect(stderr).toBe("");
+    expect(stdout.trim()).toBe("a");
+  });
 });

package/frontendBuild/csrArtifactBuilder.ts

@@ -4,8 +4,10 @@ import type { BaseBuildArtifact } from "akanjs/server";
 import { type PageEntry, resolveSsrPageEntriesForApp } from "../artifact/implicitRootLayout";
 import type { App } from "../commandDecorators";
 import { createBrowserDirnamePlugin } from "../transforms/browserDirnamePlugin";
+import { SideEffectImportOrder } from "../transforms/sideEffectImportOrder";
 import { bundleDefine } from "./bundleDefine";
 import { CsrEntryFiles } from "./csrEntryFiles";
+import { type McpAppView, McpAppViewBuilder } from "./mcpAppViewBuilder";
 import { PagesBundleBuilder } from "./pagesBundleBuilder";
 import { PagesEntrySourceGenerator } from "./pagesEntrySourceGenerator";
 
@@ -77,11 +79,32 @@ export class CsrArtifactBuilder {
     }
 
     await this.#inlineCsrArtifacts(cssAssets);
+    await this.#buildMcpAppViews(pageEntries, { basePaths, cssAssets, options });
     if (this.#command === "build") await CsrArtifactBuilder.writePublicEnv(this.#app, options.define);
     this.#app.verbose(`[csr-build] output -> ${this.#outputDir}`);
     return { outputDir: this.#outputDir };
   }
 
+  /** The MCP App views alone: a dev server under the CSR registry reads them, with no `csr/` to build beside them. */
+  async buildMcpAppViews(): Promise<McpAppView[]> {
+    const pageKeys = await this.#app.getPageKeys();
+    if (pageKeys.length === 0) return [];
+    const pageEntries = await resolveSsrPageEntriesForApp(this.#app, pageKeys);
+    const akanConfig = await this.#app.getConfig();
+    return await this.#buildMcpAppViews(pageEntries, {
+      basePaths: [...akanConfig.basePaths],
+      cssAssets: await this.#loadCssAssets(),
+      options: CsrArtifactBuilder.bundleOptions(this.#app, this.#command, akanConfig.optimizeImports),
+    });
+  }
+
+  async #buildMcpAppViews(pageEntries: PageEntry[], option: Parameters<McpAppViewBuilder["build"]>[1]) {
+    const views = await new McpAppViewBuilder(this.#app, this.#command).build(pageEntries, option);
+    if (views.length)
+      this.#app.verbose(`[csr-build] ${views.length} MCP App view(s): ${views.map((view) => view.name).join(", ")}`);
+    return views;
+  }
+
   //? No `env` option: Bun inlines the `.env` it read at process start over `define`, so a native build's `--env` lost.
   static bundleOptions(app: App, command: "build" | "start", optimizeImports: string[] = []) {
     return {
@@ -91,7 +114,7 @@ export class CsrArtifactBuilder {
       define: bundleDefine(app, command, "csr"),
       optimizeImports,
       // A raw `.css` in the route graph is Tailwind source; the base artifact's compiled sheet is the only stylesheet.
-      plugins: [PagesBundleBuilder.createCssStubPlugin(), createBrowserDirnamePlugin()],
+      plugins: [PagesBundleBuilder.createCssStubPlugin(), createBrowserDirnamePlugin(), SideEffectImportOrder.plugin()],
     };
   }
 

package/frontendBuild/cssCandidateCache.test.ts

@@ -23,6 +23,22 @@ describe("CssCandidateCache token extraction", () => {
     expect(candidates).not.toContain("_td");
   });
 
+  test("keeps a bracket nested one level inside another whole, rather than cutting it at the inner `]`", async () => {
+    const candidates = await scan(
+      `const c = "hidden [[data-theme=light]_&]:block has-[[aria-expanded=true]]:opacity-100 [&_[data-x]]:p-2 [&:has([data-state=open])]:p-1";`,
+    );
+    expect(candidates).toEqual(
+      expect.arrayContaining([
+        "[[data-theme=light]_&]:block",
+        "has-[[aria-expanded=true]]:opacity-100",
+        "[&_[data-x]]:p-2",
+        "[&:has([data-state=open])]:p-1",
+      ]),
+    );
+    expect(candidates).not.toContain("[[data-theme=light]_");
+    expect(candidates).not.toContain("[&_[data-x]");
+  });
+
   test("keeps Tailwind v4's variable shorthand whole, and leaves a call's argument its own candidate", async () => {
     const candidates = await scan(
       `const c = "max-md:top-(--keyboard-top) min-h-(--x) bg-(color:--brand)/50"; cn("flex"); fn(value);`,

package/frontendBuild/cssCandidateCache.ts

@@ -1,10 +1,12 @@
 import { stat } from "node:fs/promises";
 
-// The leading `[` alternation keeps arbitrary variants (`[&_td]:px-3`) whole. Brackets hold no whitespace: a labelled
-// tuple type scanned as a class compiles to a rule lightningcss cannot parse, and it then drops every variant rule.
-// Parentheses pass only as Tailwind v4's variable shorthand, `(--x)` or `(length:--x)`, so `cn("flex")` still yields
-// `flex` on its own.
-const CANDIDATE_RE = /-?(?:[\w@]|\[[^\]\s]+\])[\w:/.-]*(?:(?:\[[^\]\s]+\]|\((?:[a-z-]+:)?--[^)\s]+\))[\w:/.-]*)*/g;
+// The leading `[` alternation keeps arbitrary variants (`[&_td]:px-3`) whole, and a bracket may hold one nested
+// bracket (`[&_[data-slot=x]]:p-2`, `has-[[aria-expanded=true]]:x`), or the candidate is cut at the inner `]` and the
+// rule silently never compiles. Brackets hold no whitespace: a labelled tuple type scanned as a class compiles to a
+// rule lightningcss cannot parse, and it then drops every variant rule. Parentheses pass only as Tailwind v4's
+// variable shorthand, `(--x)` or `(length:--x)`, so `cn("flex")` still yields `flex` on its own.
+const CANDIDATE_RE =
+  /-?(?:[\w@]|\[(?:[^[\]\s]|\[[^[\]\s]+\])+\])[\w:/.-]*(?:(?:\[(?:[^[\]\s]|\[[^[\]\s]+\])+\]|\((?:[a-z-]+:)?--[^)\s]+\))[\w:/.-]*)*/g;
 
 interface CachedFile {
   mtimeMs: number;
@@ -20,7 +22,7 @@ interface CacheFile {
 /** Tailwind candidates per source file, on disk: the batch worker that compiles CSS exits before the next save. */
 export class CssCandidateCache {
   // Bump when the token regex or the entry shape changes, so stale extractions are not reused.
-  static readonly #version = 4;
+  static readonly #version = 5;
   readonly #path: string;
   readonly #entries = new Map<string, CachedFile>();
   #dirty = false;

package/frontendBuild/dictionaryAssetBuilder.test.ts

@@ -0,0 +1,77 @@
+import { describe, expect, test } from "bun:test";
+import { mkdir, readdir, writeFile } from "node:fs/promises";
+import path from "node:path";
+import type { App } from "../commandDecorators";
+import { tempDirs } from "../testHelpers";
+import { DictionaryAssetBuilder } from "./dictionaryAssetBuilder";
+
+const tempRoot = tempDirs("akan-devkit-dict-asset-");
+
+const allDictionary = {
+  en: { app: { title: { t: "Title" }, partial: { t: "Partial" } }, libOnly: { signin: { t: "Sign In" } } },
+  ko: { app: { title: { t: "제목" } } },
+};
+
+const makeApp = async (dictSource?: string) => {
+  const root = await tempRoot();
+  const cwdPath = path.join(root, "apps/demo");
+  await mkdir(path.join(cwdPath, "lib"), { recursive: true });
+  if (dictSource) await writeFile(path.join(cwdPath, "lib/dict.ts"), dictSource);
+  const app = { cwdPath, verbose: () => undefined } as unknown as App;
+  return { app, artifactDir: path.join(root, "artifact") };
+};
+
+const dictSourceOf = (dictionary: object) => `export const getAllDictionary = () => (${JSON.stringify(dictionary)});\n`;
+
+describe("DictionaryAssetBuilder", () => {
+  test("writes one module per locale, the default locale's text filled into the gaps", async () => {
+    const { app, artifactDir } = await makeApp(dictSourceOf(allDictionary));
+    const assets = await new DictionaryAssetBuilder(app, artifactDir).build({
+      defaultLocale: "en",
+      locales: ["en", "ko"],
+    });
+
+    expect(Object.keys(assets)).toEqual(["en", "ko"]);
+    expect(assets.ko.url).toMatch(/^\/_akan\/dict\/ko-[a-z0-9]+\.js$/);
+    expect(assets.ko.url).toBe(`/_akan/${assets.ko.relPath}`);
+    const ko = (await import(path.join(artifactDir, assets.ko.relPath))) as { lang: string; default: object };
+    expect(ko.lang).toBe("ko");
+    expect(ko.default).toEqual({
+      app: { title: { t: "제목" }, partial: { t: "Partial" } },
+      libOnly: { signin: { t: "Sign In" } },
+    });
+    const en = (await import(path.join(artifactDir, assets.en.relPath))) as { default: object };
+    expect(en.default).toEqual(allDictionary.en);
+  });
+
+  test("takes the default locale from the config it is handed", async () => {
+    const { app, artifactDir } = await makeApp(dictSourceOf(allDictionary));
+    const assets = await new DictionaryAssetBuilder(app, artifactDir).build({
+      defaultLocale: "ko",
+      locales: ["en", "ko"],
+    });
+    const en = (await import(path.join(artifactDir, assets.en.relPath))) as { default: object };
+    expect(en.default).toEqual(allDictionary.en);
+    const ko = (await import(path.join(artifactDir, assets.ko.relPath))) as { default: object };
+    expect(ko.default).toEqual(allDictionary.ko);
+  });
+
+  test("names a module by its content, so a rebuild of the same dictionary keeps the URL", async () => {
+    const { app, artifactDir } = await makeApp(dictSourceOf(allDictionary));
+    const i18n = { defaultLocale: "en", locales: ["en", "ko"] };
+    const first = await new DictionaryAssetBuilder(app, artifactDir).build(i18n);
+    const second = await new DictionaryAssetBuilder(app, artifactDir).build(i18n);
+    expect(second).toEqual(first);
+    expect((await readdir(path.join(artifactDir, "dict"))).length).toBe(2);
+    expect(DictionaryAssetBuilder.source("en", { a: { t: "A" } })).not.toBe(
+      DictionaryAssetBuilder.source("en", { a: { t: "B" } }),
+    );
+  });
+
+  test("writes nothing for an app without a dictionary", async () => {
+    const { app, artifactDir } = await makeApp();
+    expect(await new DictionaryAssetBuilder(app, artifactDir).build({ defaultLocale: "en", locales: ["en"] })).toEqual(
+      {},
+    );
+  });
+});

package/frontendBuild/dictionaryAssetBuilder.ts

@@ -0,0 +1,49 @@
+import path from "node:path";
+import { type AllDictionary, Translator } from "akanjs/client";
+import type { AkanI18nConfig } from "akanjs/common";
+import type { DictAsset } from "akanjs/server";
+import type { App } from "../commandDecorators";
+
+export class DictionaryAssetBuilder {
+  static readonly urlPrefix = "/_akan/dict";
+  readonly #app: App;
+  readonly #absArtifactDir: string;
+
+  constructor(app: App, absArtifactDir: string) {
+    this.#app = app;
+    this.#absArtifactDir = absArtifactDir;
+  }
+
+  async build(i18n: AkanI18nConfig): Promise<Record<string, DictAsset>> {
+    const allDictionary = await this.#loadAllDictionary();
+    if (!allDictionary) return {};
+    const assets = await Promise.all(
+      i18n.locales.map((lang) =>
+        this.#write(lang, Translator.fillFromDefault(allDictionary, lang, i18n.defaultLocale)),
+      ),
+    );
+    this.#app.verbose(`[base-artifact] dictionaries -> ${assets.map(([, asset]) => asset.relPath).join(", ")}`);
+    return Object.fromEntries(assets);
+  }
+
+  //? The same module the root layout's macro evaluates in this process, so the asset and the RSC worker's copy agree.
+  async #loadAllDictionary(): Promise<AllDictionary | null> {
+    const dictPath = path.resolve(this.#app.cwdPath, "lib", "dict.ts");
+    if (!(await Bun.file(dictPath).exists())) return null;
+    const { getAllDictionary } = (await import(dictPath)) as { getAllDictionary?: () => AllDictionary };
+    return getAllDictionary ? getAllDictionary() : null;
+  }
+
+  async #write(lang: string, dictionary: object): Promise<readonly [string, DictAsset]> {
+    const source = DictionaryAssetBuilder.source(lang, dictionary);
+    const name = `${lang}-${Bun.hash(source).toString(36)}.js`;
+    const relPath = `dict/${name}`;
+    await Bun.write(path.join(this.#absArtifactDir, relPath), source);
+    return [lang, { url: `${DictionaryAssetBuilder.urlPrefix}/${name}`, relPath }] as const;
+  }
+
+  //? A string for JSON.parse, not an object literal: engines parse the JSON grammar faster than a JS expression.
+  static source(lang: string, dictionary: object): string {
+    return `export const lang = ${JSON.stringify(lang)};\nexport default JSON.parse(${JSON.stringify(JSON.stringify(dictionary))});\n`;
+  }
+}

package/frontendBuild/fontPruner.ts

@@ -103,6 +103,7 @@ export class FontPruner {
       { dir: path.join(this.#artifactRoot, "client-ssr"), label: ".akan/artifact/client-ssr", needles: bundled },
       { dir: path.join(this.#artifactRoot, "server"), label: ".akan/artifact/server", needles: bundled },
       { dir: path.join(this.#app.dist.cwdPath, "csr"), label: "csr", needles: bundled },
+      { dir: path.join(this.#app.dist.cwdPath, "mcp-apps"), label: "mcp-apps", needles: bundled },
     ];
     for (const root of roots) {
       const pending = root.needles.filter((candidate) => !referrers.has(candidate.rel));

package/frontendBuild/mcpAppViewBuilder.test.ts

@@ -0,0 +1,170 @@
+import { describe, expect, test } from "bun:test";
+import path from "node:path";
+import { tempDirs, writeText as write } from "../testHelpers";
+import { McpAppViewBuilder } from "./mcpAppViewBuilder";
+
+const makeTempRoot = tempDirs("akan-mcp-app-views-");
+
+const memoPage = [
+  'import { page } from "akanjs/client";',
+  "export default page()",
+  '  .param("memoId", ID)',
+  '  .app("showMemo", "Show one memo.", ({ memoId }) => null)',
+  '  .app("showMemoImages", "Show its images.", ({ memoId }) => null)',
+  "  .render(() => null);",
+].join("\n");
+
+describe("McpAppViewBuilder.discover", () => {
+  test("finds each app of each page, under the root layout that renders the system provider", async () => {
+    const appRoot = await makeTempRoot();
+    const file = (rel: string) => path.join(appRoot, rel);
+    await write(file("generated/__root_layout.tsx"), "export function McpAppRoot() {}\n");
+    await write(file("generated/(home)/__root_layout.tsx"), "export const guard = userLayout.guard;\n");
+    await write(file("page/(home)/memo/[memoId].tsx"), memoPage);
+    await write(
+      file("page/admin/report.tsx"),
+      'export default page().app("showReport", "Show the report.", () => null).render(() => null);',
+    );
+    await write(file("page/plain.tsx"), "export default page().render(() => null);");
+    const entries = [
+      { key: "./__root_layout.tsx", moduleAbsPath: file("generated/__root_layout.tsx") },
+      { key: "./(home)/__root_layout.tsx", moduleAbsPath: file("generated/(home)/__root_layout.tsx") },
+      { key: "./(home)/memo/[memoId].tsx", moduleAbsPath: file("page/(home)/memo/[memoId].tsx") },
+      { key: "./admin/report.tsx", moduleAbsPath: file("page/admin/report.tsx") },
+      { key: "./plain.tsx", moduleAbsPath: file("page/plain.tsx") },
+    ];
+    const views = await McpAppViewBuilder.discover(entries, ["admin"]);
+    expect(views.map(({ name, page, root, basePath }) => [name, page.key, root?.key, basePath])).toEqual([
+      ["showMemo", "./(home)/memo/[memoId].tsx", "./__root_layout.tsx", ""],
+      ["showMemoImages", "./(home)/memo/[memoId].tsx", "./__root_layout.tsx", ""],
+      ["showReport", "./admin/report.tsx", "./__root_layout.tsx", "admin"],
+    ]);
+  });
+
+  test("takes the overrides over each page by route, outermost first, and none from a sibling group", async () => {
+    const appRoot = await makeTempRoot();
+    const file = (rel: string) => path.join(appRoot, rel);
+    await write(file("page/(home)/memo.tsx"), memoPage);
+    const entries = [
+      { key: "./(home)/memo.tsx", moduleAbsPath: file("page/(home)/memo.tsx") },
+      { key: "./(home)/memo/_overrides.tsx", moduleAbsPath: file("generated/memo_overrides.tsx") },
+      { key: "./_overrides.tsx", moduleAbsPath: file("generated/_overrides.tsx") },
+      { key: "./(home)/_overrides.tsx", moduleAbsPath: file("generated/home_overrides.tsx") },
+      { key: "./(tab)/_overrides.tsx", moduleAbsPath: file("generated/tab_overrides.tsx") },
+    ];
+    const [view] = await McpAppViewBuilder.discover(entries, []);
+    expect(view?.rootOverrides).toEqual([]);
+    expect(view?.overrides.map((entry) => entry.key)).toEqual([
+      "./_overrides.tsx",
+      "./(home)/_overrides.tsx",
+      "./(home)/memo/_overrides.tsx",
+    ]);
+  });
+
+  test("puts the overrides on the root layout's node and above it outside that layout, as the route tree does", async () => {
+    const appRoot = await makeTempRoot();
+    const file = (rel: string) => path.join(appRoot, rel);
+    await write(file("generated/(home)/__root_layout.tsx"), "export function McpAppRoot() {}\n");
+    await write(file("page/(home)/memo.tsx"), memoPage);
+    const entries = [
+      { key: "./(home)/__root_layout.tsx", moduleAbsPath: file("generated/(home)/__root_layout.tsx") },
+      { key: "./(home)/memo.tsx", moduleAbsPath: file("page/(home)/memo.tsx") },
+      { key: "./(home)/memo/_overrides.tsx", moduleAbsPath: file("generated/memo_overrides.tsx") },
+      { key: "./(home)/_overrides.tsx", moduleAbsPath: file("generated/home_overrides.tsx") },
+      { key: "./_overrides.tsx", moduleAbsPath: file("generated/_overrides.tsx") },
+    ];
+    const [view] = await McpAppViewBuilder.discover(entries, []);
+    expect(view?.root?.key).toBe("./(home)/__root_layout.tsx");
+    expect(view?.rootOverrides.map((entry) => entry.key)).toEqual(["./_overrides.tsx", "./(home)/_overrides.tsx"]);
+    expect(view?.overrides.map((entry) => entry.key)).toEqual(["./(home)/memo/_overrides.tsx"]);
+  });
+
+  test("keeps an override inside the root layout when its folder holds a layout above the root's", async () => {
+    const appRoot = await makeTempRoot();
+    const file = (rel: string) => path.join(appRoot, rel);
+    await write(file("generated/oauth/__root_layout.tsx"), "export function McpAppRoot() {}\n");
+    await write(file("page/(libs)/(shared)/oauth/consent.tsx"), memoPage);
+    const entries = [
+      { key: "./(libs)/(shared)/oauth/__root_layout.tsx", moduleAbsPath: file("generated/oauth/__root_layout.tsx") },
+      { key: "./(libs)/(shared)/_layout.tsx", moduleAbsPath: file("page/(libs)/(shared)/_layout.tsx") },
+      { key: "./(libs)/(shared)/oauth/consent.tsx", moduleAbsPath: file("page/(libs)/(shared)/oauth/consent.tsx") },
+      { key: "./(libs)/(shared)/oauth/_overrides.tsx", moduleAbsPath: file("generated/oauth_overrides.tsx") },
+      { key: "./(libs)/(shared)/_overrides.tsx", moduleAbsPath: file("generated/shared_overrides.tsx") },
+      { key: "./_overrides.tsx", moduleAbsPath: file("generated/_overrides.tsx") },
+    ];
+    const [view] = await McpAppViewBuilder.discover(entries, []);
+    expect(view?.rootOverrides.map((entry) => entry.key)).toEqual([
+      "./_overrides.tsx",
+      "./(libs)/(shared)/oauth/_overrides.tsx",
+    ]);
+    expect(view?.overrides.map((entry) => entry.key)).toEqual(["./(libs)/(shared)/_overrides.tsx"]);
+  });
+
+  test("names two pages that claim one app, and a page with no root layout to provide for it", async () => {
+    const appRoot = await makeTempRoot();
+    const file = (rel: string) => path.join(appRoot, rel);
+    await write(file("page/a.tsx"), memoPage);
+    await write(file("page/b.tsx"), memoPage);
+    const entries = [
+      { key: "./a.tsx", moduleAbsPath: file("page/a.tsx") },
+      { key: "./b.tsx", moduleAbsPath: file("page/b.tsx") },
+    ];
+    await expect(McpAppViewBuilder.discover(entries, [])).rejects.toThrow(
+      'app "showMemo" is declared by both ./a.tsx and ./b.tsx',
+    );
+    const [view] = await McpAppViewBuilder.discover(entries.slice(0, 1), []);
+    expect(view?.root).toBeNull();
+  });
+
+  test("refuses a name MCP would not list, and two that differ only in case", async () => {
+    const appRoot = await makeTempRoot();
+    const file = (rel: string) => path.join(appRoot, rel);
+    await write(file("page/a.tsx"), memoPage);
+    await write(file("page/b.tsx"), memoPage.replace('"showMemo"', '"ShowMemo"'));
+    await write(file("page/c.tsx"), memoPage.replace('"showMemo"', '"../showMemo"'));
+    const entryOf = (name: string) => ({ key: `./${name}.tsx`, moduleAbsPath: file(`page/${name}.tsx`) });
+    await expect(McpAppViewBuilder.discover([entryOf("a"), entryOf("b")], [])).rejects.toThrow(
+      'apps "showMemo" (./a.tsx) and "ShowMemo" (./b.tsx) differ only in case',
+    );
+    await expect(McpAppViewBuilder.discover([entryOf("c")], [])).rejects.toThrow(
+      'app name "../showMemo" in ./c.tsx must match',
+    );
+  });
+});
+
+describe("McpAppViewBuilder.entryOf", () => {
+  test("boots the one app with its page, the root layout and overrides it sits under, by relative path", () => {
+    const view = {
+      name: "showMemo",
+      page: { key: "./memo/[memoId].tsx", moduleAbsPath: "/app/page/memo/[memoId].tsx" },
+      root: { key: "./__root_layout.tsx", moduleAbsPath: "/app/.akan/generated/root-layouts/__root_layout.tsx" },
+      rootOverrides: [{ key: "./_overrides.tsx", moduleAbsPath: "/app/.akan/generated/overrides/_overrides.tsx" }],
+      overrides: [{ key: "./memo/_overrides.tsx", moduleAbsPath: "/app/.akan/generated/overrides/memo.tsx" }],
+      basePath: "admin",
+    };
+    expect(McpAppViewBuilder.entryOf(view, "/app/.akan/generated/mcp-apps")).toBe(
+      [
+        'import { McpAppBoot } from "akanjs/webkit";',
+        'import * as page from "../../../page/memo/[memoId].tsx";',
+        'import * as root from "../root-layouts/__root_layout.tsx";',
+        'import rootOverride0 from "../overrides/_overrides.tsx";',
+        'import override0 from "../overrides/memo.tsx";',
+        "void McpAppBoot.run({",
+        '  app: "showMemo",',
+        "  page,",
+        "  root,",
+        "  rootOverrides: [rootOverride0],",
+        "  overrides: [override0],",
+        '  basePath: "admin",',
+        "});",
+        "",
+      ].join("\n"),
+    );
+    expect(
+      McpAppViewBuilder.entryOf(
+        { ...view, root: null, rootOverrides: [], overrides: [] },
+        "/app/.akan/generated/mcp-apps",
+      ),
+    ).toContain("const root = {};\nvoid McpAppBoot.run({");
+  });
+});