@mangtre/cli 0.1.0

package/src/lib/api.ts

@@ -0,0 +1,61 @@
+/**
+ * Thin fetch wrapper for the platform API: prefixes the base URL, attaches a Bearer token, parses
+ * JSON, and throws a typed `ApiError` (status + server message) on a non-2xx response.
+ */
+
+export class ApiError extends Error {
+  constructor(
+    public readonly status: number,
+    message: string,
+  ) {
+    super(message);
+    this.name = "ApiError";
+  }
+}
+
+export interface ApiOptions {
+  base: string;
+  token?: string;
+  method?: string;
+  /** JSON body (object) OR a FormData (multipart upload — Content-Type left to fetch). */
+  body?: unknown;
+}
+
+/** Call `path` on the API; returns parsed JSON (or `{}` for empty bodies). Throws `ApiError` on failure. */
+export async function apiFetch<T = unknown>(path: string, opts: ApiOptions): Promise<T> {
+  const headers: Record<string, string> = {};
+  if (opts.token) headers.Authorization = `Bearer ${opts.token}`;
+
+  let body: BodyInit | undefined;
+  if (opts.body instanceof FormData) {
+    body = opts.body; // fetch sets the multipart boundary
+  } else if (opts.body !== undefined) {
+    headers["Content-Type"] = "application/json";
+    body = JSON.stringify(opts.body);
+  }
+
+  const res = await fetch(`${opts.base}${path}`, {
+    method: opts.method ?? (body ? "POST" : "GET"),
+    headers,
+    body,
+  });
+
+  const text = await res.text();
+  const data = text ? safeJson(text) : {};
+  if (!res.ok) {
+    let message = `HTTP ${res.status}`;
+    if (data && typeof data === "object" && "error" in data) {
+      message = String((data as { error: unknown }).error);
+    }
+    throw new ApiError(res.status, message);
+  }
+  return data as T;
+}
+
+function safeJson(text: string): unknown {
+  try {
+    return JSON.parse(text);
+  } catch {
+    return { raw: text };
+  }
+}

package/src/lib/auth-store.ts

@@ -0,0 +1,42 @@
+/**
+ * Local credential store (`~/.mang/auth.json`). Holds the opaque Bearer token + the API base it was
+ * minted against. Written `0600` (owner-only) — it's a real credential, treat it like an SSH key.
+ */
+
+import { existsSync, mkdirSync, readFileSync, rmSync, writeFileSync } from "node:fs";
+import { dirname } from "node:path";
+import { authFilePath } from "./config";
+
+export interface StoredAuth {
+  token: string;
+  api: string;
+  handle?: string;
+}
+
+/** Load the stored credential, or null if absent/unreadable. */
+export function loadAuth(): StoredAuth | null {
+  const path = authFilePath();
+  if (!existsSync(path)) return null;
+  try {
+    const parsed = JSON.parse(readFileSync(path, "utf8"));
+    if (parsed && typeof parsed.token === "string" && typeof parsed.api === "string") {
+      return parsed as StoredAuth;
+    }
+  } catch {
+    // fall through
+  }
+  return null;
+}
+
+/** Persist the credential with owner-only permissions. */
+export function saveAuth(auth: StoredAuth): void {
+  const path = authFilePath();
+  mkdirSync(dirname(path), { recursive: true, mode: 0o700 });
+  writeFileSync(path, `${JSON.stringify(auth, null, 2)}\n`, { mode: 0o600 });
+}
+
+/** Remove the stored credential (logout). */
+export function clearAuth(): void {
+  const path = authFilePath();
+  if (existsSync(path)) rmSync(path);
+}

package/src/lib/check.test.ts

@@ -0,0 +1,57 @@
+import { describe, expect, it } from "vitest";
+import { checkBundle } from "./check";
+import { MANIFEST_COMMENT_PREFIX } from "./manifest-comment";
+
+const NOW = 1_700_000_000_000;
+
+const goodManifest = {
+  id: "demo-moc",
+  name: "Demo Mọc",
+  icon: "🌱",
+  version: "1.0.0",
+  permissions: ["storage", "theme"],
+  flow: [{ id: "home", title: { vi: "Trang chính", en: "Home" }, checkpoint: "home" }],
+};
+
+function bundle(manifest: unknown, body = "export const mount = () => () => {};"): string {
+  return `${MANIFEST_COMMENT_PREFIX}${JSON.stringify(manifest)}\n${body}`;
+}
+
+describe("checkBundle", () => {
+  it("passes a valid bundle (manifest from the comment, safe body, declared flow)", () => {
+    const result = checkBundle({ source: bundle(goodManifest), now: NOW });
+    expect(result.manifestFound).toBe(true);
+    expect(result.passed).toBe(true);
+    expect(result.findings.some((f) => f.severity === "fail")).toBe(false);
+  });
+
+  it("fails on a malformed manifest (bad slug) with the server's exact check id", () => {
+    const result = checkBundle({ source: bundle({ ...goodManifest, id: "X" }), now: NOW });
+    expect(result.passed).toBe(false);
+    expect(
+      result.findings.some((f) => f.check === "manifest.schema" && f.severity === "fail"),
+    ).toBe(true);
+  });
+
+  it("fails on a banned API in the body (safety scan)", () => {
+    const result = checkBundle({
+      source: bundle(goodManifest, "const x = eval('1+1');"),
+      now: NOW,
+    });
+    expect(result.passed).toBe(false);
+    expect(result.findings.some((f) => f.check === "safety.eval")).toBe(true);
+  });
+
+  it("reports manifestFound=false when there is no manifest comment", () => {
+    const result = checkBundle({ source: "export const mount = () => () => {};", now: NOW });
+    expect(result.manifestFound).toBe(false);
+    expect(result.passed).toBe(false); // empty manifest fails schema
+  });
+
+  it("flags an ownership mismatch when --app differs from manifest.id", () => {
+    const result = checkBundle({ source: bundle(goodManifest), appId: "other-app", now: NOW });
+    expect(result.findings.some((f) => f.check === "manifest.slug" && f.severity === "fail")).toBe(
+      true,
+    );
+  });
+});

package/src/lib/check.ts

@@ -0,0 +1,49 @@
+/**
+ * Offline preflight — the local mirror of the server's "chuẩn Măng" gate. Runs the EXACT same
+ * `@mangtre/standard.validateBundle` the Worker Queue runs, so a creator (or their coding agent) sees
+ * the same fail/warn findings BEFORE uploading — "đừng đợi server". The server stays authoritative;
+ * this is the fast feedback loop.
+ */
+
+import { type ValidationReport, validateBundle } from "@mangtre/standard";
+import { extractManifestComment } from "./manifest-comment";
+
+export interface CheckOptions {
+  /** The built bundle's full source text. */
+  source: string;
+  /** The manifest object; if omitted, read from the bundle's `// mang-manifest:` comment. */
+  manifest?: unknown;
+  /** The app id the upload would claim; defaults to `manifest.id` (override to test ownership). */
+  appId?: string;
+  /** Epoch ms (injectable for tests). */
+  now?: number;
+}
+
+/** Result of a local check: the standard's report plus whether a manifest was found at all. */
+export interface CheckResult extends ValidationReport {
+  /** False when no manifest was supplied or extractable from the bundle comment. */
+  manifestFound: boolean;
+}
+
+function manifestId(manifest: unknown): string | undefined {
+  if (typeof manifest === "object" && manifest !== null && !Array.isArray(manifest)) {
+    const id = (manifest as Record<string, unknown>).id;
+    if (typeof id === "string") return id;
+  }
+  return undefined;
+}
+
+/** Run the shared validator over a built bundle. Never throws. */
+export function checkBundle(opts: CheckOptions): CheckResult {
+  const manifest = opts.manifest ?? extractManifestComment(opts.source);
+  const manifestFound = manifest !== undefined;
+  const appId = opts.appId ?? manifestId(manifest) ?? "";
+  const report = validateBundle({
+    source: opts.source,
+    bytes: Buffer.byteLength(opts.source, "utf8"),
+    appId,
+    manifest: manifest ?? {},
+    now: opts.now ?? Date.now(),
+  });
+  return { ...report, manifestFound };
+}

package/src/lib/config.ts

@@ -0,0 +1,27 @@
+/**
+ * CLI config: where the platform API lives + where the local auth token is stored.
+ * API base resolution order: `--api <url>` flag → `MANG_API` env → production default.
+ */
+
+import { homedir } from "node:os";
+import { join } from "node:path";
+import { getFlag } from "../commands/args";
+
+export const DEFAULT_API_BASE = "https://api.mang.rumitx.com";
+
+/** Normalize a user-supplied base: trim, drop trailing slash, and add `https://` if no scheme is
+ *  given (so `--api api-dev.mang.rumitx.com` works, not just `--api https://…`). */
+export function normalizeApiBase(raw: string): string {
+  const trimmed = raw.trim().replace(/\/+$/, "");
+  return /^https?:\/\//i.test(trimmed) ? trimmed : `https://${trimmed}`;
+}
+
+/** Resolve the platform API base URL from argv/env. */
+export function resolveApiBase(argv: string[]): string {
+  return normalizeApiBase(getFlag(argv, "api") ?? process.env.MANG_API ?? DEFAULT_API_BASE);
+}
+
+/** Path to the stored credential (`~/.mang/auth.json`). */
+export function authFilePath(): string {
+  return join(homedir(), ".mang", "auth.json");
+}

package/src/lib/index.ts

@@ -0,0 +1,12 @@
+/**
+ * `@mangtre/cli/lib` — the reusable core of the Mọc CLI (no process/argv/console), so other harnesses —
+ * the `@mangtre/mcp` server, future adapters — drive the SAME logic the `mang` binary does. The CLI
+ * commands (`src/commands/*`) are thin presentation wrappers over these.
+ */
+
+export { ApiError, type ApiOptions, apiFetch } from "./api";
+export { type StoredAuth, clearAuth, loadAuth, saveAuth } from "./auth-store";
+export { type CheckOptions, type CheckResult, checkBundle } from "./check";
+export { DEFAULT_API_BASE, authFilePath } from "./config";
+export { MANIFEST_COMMENT_PREFIX, extractManifestComment } from "./manifest-comment";
+export { type ScaffoldOptions, scaffoldApp } from "./scaffold";

package/src/lib/manifest-comment.ts

@@ -0,0 +1,23 @@
+/**
+ * The `// mang-manifest:<json>` first-line comment a Mọc-built bundle carries — the convention the
+ * creator dashboard reads to pre-fill a publish, and the CLI reads to preflight a built bundle
+ * offline. Emitted by `mangLibConfig` (`../vite.ts`) as a rollup output banner.
+ */
+
+/** Prefix the build emits on line 1 of the bundle, followed by the manifest JSON. */
+export const MANIFEST_COMMENT_PREFIX = "// mang-manifest:";
+
+/**
+ * Pull the manifest object out of a built bundle's first-line comment, or `undefined` if absent /
+ * unparseable. Only inspects the first line — the banner always sits at the very top.
+ */
+export function extractManifestComment(source: string): unknown | undefined {
+  const firstLine = source.split("\n", 1)[0] ?? "";
+  const match = firstLine.match(/^\/\/\s*mang-manifest:\s*(\{.*\})\s*$/);
+  if (!match?.[1]) return undefined;
+  try {
+    return JSON.parse(match[1]);
+  } catch {
+    return undefined;
+  }
+}

package/src/lib/scaffold.ts

@@ -0,0 +1,56 @@
+/**
+ * Scaffolding: copy the `templates/app` tree into a target dir, replacing `__SLUG__`/`__NAME__`/
+ * `__ICON__` placeholders and stripping the `.tmpl` suffix. Pure-ish (fs side effects only).
+ */
+
+import { existsSync } from "node:fs";
+import { mkdir, readFile, readdir, writeFile } from "node:fs/promises";
+import { join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+/** Absolute path to the bundled `templates/app` dir (resolved relative to the built bin in dist/). */
+function templateRoot(): string {
+  return fileURLToPath(new URL("../templates/app", import.meta.url));
+}
+
+export interface ScaffoldOptions {
+  slug: string;
+  name: string;
+  icon: string;
+  /** Target directory to create (must not already exist). */
+  targetDir: string;
+}
+
+function applyPlaceholders(text: string, opts: ScaffoldOptions): string {
+  return text
+    .replaceAll("__SLUG__", opts.slug)
+    .replaceAll("__NAME__", opts.name)
+    .replaceAll("__ICON__", opts.icon);
+}
+
+/** Recursively copy + template every file under `dir` into `dest`. */
+async function copyTree(srcDir: string, destDir: string, opts: ScaffoldOptions): Promise<string[]> {
+  await mkdir(destDir, { recursive: true });
+  const written: string[] = [];
+  for (const entry of await readdir(srcDir, { withFileTypes: true })) {
+    const srcPath = join(srcDir, entry.name);
+    const outName = entry.name.endsWith(".tmpl") ? entry.name.slice(0, -5) : entry.name;
+    const destPath = join(destDir, outName);
+    if (entry.isDirectory()) {
+      written.push(...(await copyTree(srcPath, destPath, opts)));
+    } else {
+      const raw = await readFile(srcPath, "utf8");
+      await writeFile(destPath, applyPlaceholders(raw, opts), "utf8");
+      written.push(destPath);
+    }
+  }
+  return written;
+}
+
+/** Create a new standard-compliant mini-app from the template. Returns the files written. */
+export async function scaffoldApp(opts: ScaffoldOptions): Promise<string[]> {
+  if (existsSync(opts.targetDir)) {
+    throw new Error(`Thư mục đã tồn tại: ${opts.targetDir}`);
+  }
+  return copyTree(templateRoot(), opts.targetDir, opts);
+}

package/src/vite.ts

@@ -0,0 +1,73 @@
+/**
+ * `@mangtre/cli/vite` — the Vite library-mode preset a scaffolded mini-app imports in its `vite.config`.
+ * It produces the ONE self-contained ESM file the platform expects (`{ manifest, mount }`) and stamps
+ * the `// mang-manifest:<json>` first-line comment the dashboard + `mang check` read. This is the
+ * "how do I build to a single bundle" piece creators otherwise hand-roll.
+ *
+ * Returns a plain config object (no runtime Vite dependency here); the app merges it with its React
+ * plugin via Vite's `mergeConfig`. The manifest comment is injected by a small `generateBundle` plugin
+ * (more reliable than a rollup `banner`, which lib mode + other plugins can clobber).
+ */
+
+import { MANIFEST_COMMENT_PREFIX } from "./lib/manifest-comment";
+
+export interface MangLibConfigOptions {
+  /** The app's manifest (import it from `./src/manifest`); only `id` is required for the banner. */
+  manifest: { id: string; [key: string]: unknown };
+  /** Entry module; defaults to `src/index.tsx`. */
+  entry?: string;
+}
+
+/** Minimal structural view of a rollup output chunk (avoids a Vite/rollup type dependency here). */
+interface OutputChunk {
+  type: string;
+  isEntry?: boolean;
+  code?: string;
+}
+
+/** A minimal structural subset of a Vite config — enough for `mergeConfig` to accept it. */
+export interface MangLibConfig {
+  build: {
+    target: string;
+    emptyOutDir: boolean;
+    lib: { entry: string; formats: ["es"]; fileName: () => string };
+  };
+  /** Compile-time replacements. CRITICAL: Vite library mode does NOT replace `process.env.NODE_ENV`,
+   *  so React's `process.env.NODE_ENV` reference reaches the browser sandbox (no `process` global) and
+   *  throws "process is not defined". Replacing it at build time fixes that for every Mọc app. */
+  define: Record<string, string>;
+  plugins: unknown[];
+}
+
+/** Build the lib-mode config for a Mọc mini-app. */
+export function mangLibConfig(opts: MangLibConfigOptions): MangLibConfig {
+  const entry = opts.entry ?? "src/index.tsx";
+  const banner = `${MANIFEST_COMMENT_PREFIX}${JSON.stringify(opts.manifest)}`;
+
+  // Prepend the manifest comment to the entry chunk so it's always line 1 — the platform indexes it
+  // without executing the bundle.
+  const manifestBannerPlugin = {
+    name: "mang:manifest-banner",
+    generateBundle(_options: unknown, bundle: Record<string, OutputChunk>) {
+      for (const file of Object.values(bundle)) {
+        if (file.type === "chunk" && file.isEntry && typeof file.code === "string") {
+          file.code = `${banner}\n${file.code}`;
+        }
+      }
+    },
+  };
+
+  return {
+    build: {
+      target: "es2022",
+      emptyOutDir: true,
+      lib: { entry, formats: ["es"], fileName: () => "app.js" },
+    },
+    // The mini-app runs in a browser sandbox with no `process`; bake the prod NODE_ENV in so React
+    // (and other libs that branch on it) don't reference a missing `process` global at runtime.
+    define: {
+      "process.env.NODE_ENV": JSON.stringify("production"),
+    },
+    plugins: [manifestBannerPlugin],
+  };
+}

package/templates/app/README.md.tmpl

@@ -0,0 +1,28 @@
+# __ICON__ __NAME__
+
+A Măng mini-app, scaffolded with **Mọc** (`mang new`).
+
+## Develop
+
+```bash
+pnpm install
+mang build        # build → dist/app.js, then preflight against "chuẩn Măng"
+mang check        # re-run the offline preflight on the built bundle
+```
+
+## What's here
+
+- `src/manifest.ts` — your app's manifest (id, permissions, **commands**, **flow/luồng chính**).
+  The platform indexes this without loading your code.
+- `src/index.tsx` — the `mount(root, sdk) => unmount` entry. Talk to the outside world ONLY via
+  `sdk.*` (storage, theme, …) — that's the golden rule.
+- `src/App.tsx` — your UI. Renders `data-mang-checkpoint="home"` so the platform can walk your main
+  flow + capture real screenshots. Built with `@mangtre/ui` (auto light/dark + brand thread).
+- `vite.config.ts` — builds the single self-contained ESM bundle (`mangLibConfig`).
+
+## Rules the preflight enforces ("chuẩn Măng")
+
+- ≤ 2 MB bundle · valid manifest · a declared **flow** · desktop-responsive (verify at 1440px + 390px).
+- No `eval` / `new Function` / remote `import()` / `WebSocket`. Reach the network/storage only via `sdk.*`.
+
+See the creator guide (`?guide=1`) for the full standard.

package/templates/app/package.json.tmpl

@@ -0,0 +1,30 @@
+{
+  "name": "@mangtre/__SLUG__",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "main": "./src/index.tsx",
+  "types": "./src/index.tsx",
+  "exports": {
+    ".": "./src/index.tsx",
+    "./manifest": "./src/manifest.ts"
+  },
+  "scripts": {
+    "build": "mang build",
+    "check": "mang check",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@mangtre/core": "^0.1.0",
+    "@mangtre/ui": "^0.1.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@mangtre/cli": "^0.1.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "vite": "^6.0.0"
+  }
+}

package/templates/app/src/App.tsx.tmpl

@@ -0,0 +1,48 @@
+import type { ScopedStorage } from "@mangtre/core";
+import { Button, Card, Heading, Stack, Text } from "@mangtre/ui";
+import { useEffect, useState } from "react";
+import { COUNT_KEY } from "./sample";
+
+/**
+ * The app's single screen. Renders `data-mang-checkpoint="home"` so the platform's main-flow walk
+ * can find it. Layout caps its width + centres on desktop (Design System §9: fill the card, no dead
+ * mobile column) — verify at 1440px AND 390px.
+ */
+export function App({ storage }: { storage: ScopedStorage }) {
+  const [count, setCount] = useState(0);
+
+  useEffect(() => {
+    storage.get<number>(COUNT_KEY).then((v) => setCount(v ?? 0));
+  }, [storage]);
+
+  const bump = async () => {
+    const next = count + 1;
+    setCount(next); // optimistic
+    await storage.set(COUNT_KEY, next);
+  };
+
+  return (
+    <div
+      data-mang-checkpoint="home"
+      style={{ maxWidth: 1040, margin: "0 auto", padding: "clamp(1rem, 3vw, 2rem)" }}
+    >
+      <Stack gap={5}>
+        <Heading level={1}>__ICON__ __NAME__</Heading>
+        <Text tone="muted">
+          Mini-app khởi tạo bằng Mọc. Sửa <code>src/App.tsx</code> để bắt đầu. Dữ liệu lưu qua{" "}
+          <code>sdk.storage</code> (cục bộ, theo máy).
+        </Text>
+        <Card style={{ padding: "1.25rem" }}>
+          <Stack gap={4}>
+            <Text>
+              Đã bấm <strong>{count}</strong> lần.
+            </Text>
+            <div>
+              <Button onClick={bump}>Bấm +1</Button>
+            </div>
+          </Stack>
+        </Card>
+      </Stack>
+    </div>
+  );
+}

package/templates/app/src/index.tsx.tmpl

@@ -0,0 +1,40 @@
+/**
+ * __NAME__ — a Măng mini-app.
+ *
+ * The contract is `Mount = (root, sdk) => Unmount`: spin up a React root inside `root`, talk to the
+ * outside world ONLY through `sdk.*` (storage/theme/…), and tear down on unmount. `@mangtre/ui`'s
+ * `MangApp` wires the theme (light/dark) + locale for you.
+ */
+
+import type { Mount, PrepareDemo } from "@mangtre/core";
+import { MangApp } from "@mangtre/ui";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./App";
+import { seedSample } from "./sample";
+
+// Re-export the data-only manifest so this module satisfies the MiniAppModule contract.
+export { manifest } from "./manifest";
+
+export const prepareDemo: PrepareDemo = async (sdk) => {
+  await seedSample(sdk.storage);
+};
+
+export const mount: Mount = (root, sdk) => {
+  const container = document.createElement("div");
+  root.appendChild(container);
+
+  const reactRoot = createRoot(container);
+  reactRoot.render(
+    <StrictMode>
+      <MangApp locale={sdk.locale} sdkTheme={sdk.theme}>
+        <App storage={sdk.storage} />
+      </MangApp>
+    </StrictMode>,
+  );
+
+  return () => {
+    reactRoot.unmount();
+    container.remove();
+  };
+};

package/templates/app/src/manifest.ts.tmpl

@@ -0,0 +1,21 @@
+import type { MangManifest } from "@mangtre/core";
+
+// Data-only manifest — the platform indexes this WITHOUT loading your app's runtime.
+// `flow` is the "luồng chính" the platform walks to prove your screens render + capture the gallery;
+// each step's `checkpoint` must match a `data-mang-checkpoint="…"` element you render.
+export const manifest: MangManifest = {
+  id: "__SLUG__",
+  name: "__NAME__",
+  icon: "__ICON__",
+  version: "1.0.0",
+  permissions: ["storage", "theme"],
+  commands: [{ id: "home", title: { vi: "Trang chính", en: "Home" }, icon: "__ICON__" }],
+  flow: [
+    {
+      id: "home",
+      title: { vi: "Trang chính", en: "Home" },
+      checkpoint: "home",
+      caption: { vi: "Màn hình chính của app", en: "The app's main screen" },
+    },
+  ],
+};

package/templates/app/src/sample.ts.tmpl

@@ -0,0 +1,12 @@
+import type { ScopedStorage } from "@mangtre/core";
+
+export const COUNT_KEY = "count";
+
+/**
+ * Seed demo state so the platform's main-flow walk captures a populated screen (not an empty one).
+ * Idempotent — runs once via `prepareDemo`, leaves existing data untouched.
+ */
+export async function seedSample(storage: ScopedStorage): Promise<void> {
+  const existing = await storage.get<number>(COUNT_KEY);
+  if (existing == null) await storage.set(COUNT_KEY, 3);
+}

package/templates/app/tsconfig.json.tmpl

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src", "vite.config.ts"]
+}

package/templates/app/vite.config.ts.tmpl

@@ -0,0 +1,11 @@
+import { mangLibConfig } from "@mangtre/cli/vite";
+import react from "@vitejs/plugin-react";
+import { defineConfig, mergeConfig } from "vite";
+import { manifest } from "./src/manifest";
+
+// `mangLibConfig` produces the single-ESM lib build + the `// mang-manifest:` banner the platform
+// reads. We merge in the React plugin. The output is `dist/app.js`.
+export default mergeConfig(
+  mangLibConfig({ manifest }),
+  defineConfig({ plugins: [react()] }),
+);