@camox/cli 0.41.1 → 0.43.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camox/cli",
-  "version": "0.41.1",
+  "version": "0.43.0",
   "license": "MIT",
   "bin": {
     "camox": "./dist/index.mjs"
@@ -31,7 +31,7 @@
     "@types/node": "^24.12.4",
     "@typescript/native-preview": "7.0.0-dev.20260412.1",
     "vite-plus": "^0.1.21",
-    "@camox/api-contract": "0.41.1"
+    "@camox/api-contract": "0.43.0"
   },
   "nx": {
     "tags": [
@@ -42,6 +42,7 @@
     "build": "node scripts/sync-templates.mjs && vp pack",
     "dev": "node scripts/sync-templates.mjs --watch --build",
     "lint": "vp lint",
+    "test": "vp pack && node --test test/*.test.mjs",
     "check": "tsgo --noEmit && vp lint --fix"
   }
 }

package/templates/default/package.json

@@ -8,6 +8,7 @@
     "dev": "vp dev --port 7400",
     "start": "node .output/server/index.mjs",
     "build": "vp build",
+    "test:production": "node scripts/production-smoke.mjs",
     "release": "camox release",
     "serve": "vp preview",
     "lint": "vp lint",

package/templates/default/scripts/README.md

@@ -0,0 +1,35 @@
+# Production runtime smoke test
+
+From the repository root:
+
+```sh
+pnpm exec nx run camox:build
+pnpm --filter @camox/template-default test:production
+```
+
+The test builds a temporary copy of the starter using Nitro's Node middleware
+preset, moves only `.output` into an isolated deployment, removes build-time
+`node_modules` links, and serves a real HTTP request. It asserts that React/Base UI
+can render HTML and Camox's OG renderer can produce a PNG. No Camox API, real auth,
+application-level dependency tracing overrides, or direct Takumi dependency is
+needed. A temporary home directory supplies fake build authentication without
+modifying the developer's credentials. CI runs this test after building the SDK.
+
+## Issue #106 investigation
+
+- **Takumi:** the original `createRequire(import.meta.url).resolve(...)` survives
+  bundling, but the WASM package/asset is absent from the deployment. The isolated
+  smoke test reproduced `Cannot find module '@takumi-rs/wasm/takumi_wasm_bg.wasm'`
+  before the fix. Camox now uses a static module import so Nitro's WASM loader
+  owns asset inclusion, including when dependencies are fully bundled. The
+  server-only guard in `createLayout` prevents this import reaching client builds.
+- **tslib:** a package containing only `package.json` and `tslib.es6.mjs`, as
+  reported, reproduces Node's missing `tslib/modules/index.js` error: Node selects
+  that entry from the package exports. The complete upstream package is valid;
+  the partial traced copy is not. The current starter build did not independently
+  reproduce that partial copy. Camox now adds `tslib` to Nitro's `noExternals`,
+  keeping its existing ESM alias and removing reliance on partial package tracing.
+  Plugin tests cover preservation of user options, including `noExternals: true`.
+
+These are SDK integration fixes, not starter workarounds. Applications should not
+need to add Takumi as a direct dependency or configure `traceDeps`/`noExternals`.

package/templates/default/scripts/production-smoke.mjs

@@ -0,0 +1,124 @@
+import assert from "node:assert/strict";
+import { spawnSync } from "node:child_process";
+import { cp, mkdir, mkdtemp, readFile, rm, symlink, writeFile } from "node:fs/promises";
+import { createRequire } from "node:module";
+import { tmpdir } from "node:os";
+import { dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const appRoot = resolve(dirname(fileURLToPath(import.meta.url)), "..");
+const temp = await mkdtemp(join(tmpdir(), "camox-production-"));
+
+try {
+  const root = join(temp, "app");
+  const home = join(temp, "home");
+  await mkdir(join(home, ".camox"), { recursive: true });
+  await writeFile(
+    join(home, ".camox/auth.json"),
+    JSON.stringify({
+      "http://localhost:3274": { token: "smoke", name: "Smoke", email: "smoke@example.com" },
+    }),
+  );
+  await mkdir(root);
+  await mkdir(join(temp, "node_modules"));
+  // Nitro resolves its builder from the project root. Match Vite+'s own Vite
+  // dependency without relying on workspace hoisting in this temporary app.
+  const vitePackage = createRequire(import.meta.resolve("vite-plus")).resolve("vite/package.json");
+  await symlink(dirname(vitePackage), join(temp, "node_modules/vite"), "dir");
+  for (const file of ["src", "vite.config.ts", "tsconfig.json", "package.json"]) {
+    await cp(join(appRoot, file), join(root, file), { recursive: true });
+  }
+  await symlink(join(appRoot, "node_modules"), join(root, "node_modules"), "dir");
+  const configPath = join(root, "vite.config.ts");
+  await writeFile(
+    configPath,
+    (await readFile(configPath, "utf8")).replace(
+      "nitro()",
+      'nitro({ routes: { "/smoke": "./routes/smoke.ts" } })',
+    ),
+  );
+  await mkdir(join(root, "routes"), { recursive: true });
+  await writeFile(
+    join(root, "routes/smoke.ts"),
+    `import { Dialog } from "@base-ui/react/dialog";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { ImageResponse } from "camox/_internal/imageResponse";
+
+export default async () => {
+  const element = createElement("div", { style: { color: "black", background: "white" } }, "Production smoke");
+  const image = new ImageResponse(element, { width: 320, height: 160 });
+  const bytes = new Uint8Array(await image.arrayBuffer());
+  const html = renderToStaticMarkup(createElement(Dialog.Root, null,
+    createElement(Dialog.Trigger, null, "Production smoke")));
+  return Response.json({ html, png: Array.from(bytes.slice(0, 8)) });
+};
+`,
+  );
+  const build = spawnSync(
+    process.execPath,
+    [
+      "--input-type=module",
+      "-e",
+      `
+    const { createBuilder } = await import(${JSON.stringify(import.meta.resolve("vite-plus"))});
+    const builder = await createBuilder({ root: ${JSON.stringify(root)} });
+    await builder.buildApp();
+  `,
+    ],
+    {
+      cwd: root,
+      env: {
+        ...process.env,
+        HOME: home,
+        CAMOX_INTERNAL_RELEASE: "0",
+        NITRO_PRESET: "node-middleware",
+      },
+      encoding: "utf8",
+      timeout: 180_000,
+      killSignal: "SIGKILL",
+    },
+  );
+  assert.equal(build.status, 0, `${build.stdout}\n${build.stderr}`);
+
+  // Move only the deployment artifact away from all workspace node_modules.
+  const deployment = join(temp, "deployment");
+  await cp(join(root, ".output"), deployment, { recursive: true });
+  await rm(root, { recursive: true, force: true });
+  await rm(join(temp, "node_modules"), { recursive: true, force: true });
+  const runtime = spawnSync(
+    process.execPath,
+    [
+      "--input-type=module",
+      "-e",
+      `
+    import assert from "node:assert/strict";
+    import { createServer } from "node:http";
+    const { middleware } = await import("./server/index.mjs");
+    const server = createServer(middleware);
+    await new Promise(resolve => server.listen(0, "127.0.0.1", resolve));
+    try {
+      const response = await fetch("http://127.0.0.1:" + server.address().port + "/smoke");
+      assert.equal(response.status, 200, await response.clone().text());
+      const result = await response.json();
+      assert.match(result.html, /Production smoke/);
+      assert.deepEqual(result.png, [137, 80, 78, 71, 13, 10, 26, 10]);
+    } finally {
+      server.closeAllConnections();
+      server.close();
+    }
+  `,
+    ],
+    {
+      cwd: deployment,
+      env: { ...process.env, NODE_PATH: "", NODE_ENV: "production" },
+      encoding: "utf8",
+      timeout: 30_000,
+      killSignal: "SIGKILL",
+    },
+  );
+  assert.equal(runtime.status, 0, `${runtime.stdout}\n${runtime.stderr}`);
+  console.log("Production server rendered HTML and a Takumi PNG from an isolated deployment.");
+} finally {
+  await rm(temp, { recursive: true, force: true });
+}

package/templates/default/src/blocks/faq.tsx

@@ -16,12 +16,12 @@ const faq = createBlock({
     items: Type.Repeater({
       content: {
         question: Type.String({
-          default: "What is your refund policy?",
+          default: "How do I make this website my own?",
           title: "Question",
         }),
         answer: Type.String({
           default:
-            "We offer a 30-day money-back guarantee. If you're not satisfied, contact support and we'll process your refund right away.",
+            "Tell your coding agent what you're building, who it's for, and the style you want. Your agent has access to the Camox skill and will use it to create your own blocks, update your content, and manage your pages.",
           title: "Answer",
         }),
       },

package/templates/default/src/blocks/hero.tsx

@@ -15,7 +15,7 @@ const hero = createBlock({
       title: "Title",
     }),
     description: Type.String({
-      default: "Press ⌘+Enter to access Camox Studio and edit content.",
+      default: "Press ⌘+Enter to edit this page.",
       maxLength: 280,
       title: "Description",
     }),

package/templates/default/src/layouts/default.tsx

@@ -4,8 +4,6 @@ import { block as faqBlock } from "../blocks/faq";
 import { block as footerBlock } from "../blocks/footer";
 import { block as heroBlock } from "../blocks/hero";
 import { block as navbarBlock } from "../blocks/navbar";
-import { block as statisticsBlock } from "../blocks/statistics";
-import { block as testimonialBlock } from "../blocks/testimonial";
 
 const defaultLayout = createLayout({
   id: "default",
@@ -14,7 +12,7 @@ const defaultLayout = createLayout({
   blocks: {
     before: [navbarBlock],
     after: [footerBlock],
-    initial: [heroBlock, testimonialBlock, statisticsBlock, faqBlock],
+    initial: [heroBlock, faqBlock],
   },
   component: DefaultLayout,
   buildMetaTitle: ({ pageMetaTitle, projectName }) => `${pageMetaTitle} | ${projectName}`,

package/templates/default/src/blocks/statistics.tsx

@@ -1,98 +0,0 @@
-import { Type, createBlock } from "camox/createBlock";
-
-const statistics = createBlock({
-  id: "statistics",
-  title: "Statistics",
-  description:
-    "Showcase key metrics, achievements, or performance indicators. Ideal for displaying platform statistics or company milestones.",
-  content: {
-    title: Type.String({
-      default: "By the numbers",
-      maxLength: 30,
-      title: "Title",
-    }),
-    subtitle: Type.String({
-      default: "Trusted by teams worldwide",
-      title: "Subtitle",
-    }),
-    description: Type.String({
-      default:
-        "Our platform empowers teams to build and ship faster. Here are some numbers we're proud of.",
-      title: "Description",
-    }),
-    statistics: Type.Repeater({
-      content: {
-        number: Type.String({
-          default: "100+",
-          maxLength: 7,
-          title: "Number",
-        }),
-        label: Type.String({
-          default: "projects launched",
-          title: "Label",
-        }),
-      },
-      minItems: 3,
-      maxItems: 8,
-      title: "Statistics",
-      toMarkdown: (c) => [`**${c.number}** — ${c.label}`],
-    }),
-  },
-  component: StatisticsComponent,
-  toMarkdown: (c) => [`## ${c.subtitle}`, c.description, c.statistics],
-});
-
-function StatisticsComponent() {
-  return (
-    <section className="dark bg-background py-12 sm:py-16 md:py-20">
-      <div className="container mx-auto">
-        <div className="mb-16">
-          <statistics.Field name="title">
-            {(props) => (
-              <div
-                {...props}
-                className="text-accent-foreground mb-4 text-sm font-semibold tracking-wider uppercase"
-              />
-            )}
-          </statistics.Field>
-          <statistics.Field name="subtitle">
-            {(props) => (
-              <h2 {...props} className="text-foreground mb-6 text-3xl font-bold sm:text-5xl" />
-            )}
-          </statistics.Field>
-          <statistics.Field name="description">
-            {(props) => (
-              <p {...props} className="text-muted-foreground max-w-3xl text-lg leading-relaxed" />
-            )}
-          </statistics.Field>
-        </div>
-        <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-4">
-          <statistics.Repeater name="statistics">
-            {(stat) => (
-              <div className="flex gap-3">
-                <div className="from-chart-1 to-chart-2 w-0.5 bg-linear-to-b" />
-                <div className="flex flex-col">
-                  <stat.Field name="number">
-                    {(props) => (
-                      <div
-                        {...props}
-                        className="text-foreground mb-2 text-3xl font-bold sm:text-4xl"
-                      />
-                    )}
-                  </stat.Field>
-                  <stat.Field name="label">
-                    {(props) => (
-                      <p {...props} className="text-muted-foreground text-sm leading-relaxed" />
-                    )}
-                  </stat.Field>
-                </div>
-              </div>
-            )}
-          </statistics.Repeater>
-        </div>
-      </div>
-    </section>
-  );
-}
-
-export { statistics as block };

package/templates/default/src/blocks/testimonial.tsx

@@ -1,55 +0,0 @@
-import { Type, createBlock } from "camox/createBlock";
-
-const testimonial = createBlock({
-  id: "testimonial",
-  title: "Testimonial",
-  description:
-    "Display a customer testimonial or user review. Ideal for building trust and social proof.",
-  content: {
-    quote: Type.String({
-      default:
-        "This platform has transformed how we build and manage our website. The developer experience is exceptional.",
-      title: "Quote",
-    }),
-    author: Type.String({ default: "Kai Doe", title: "Author" }),
-    title: Type.String({ default: "Senior Developer", title: "Title" }),
-    company: Type.String({ default: "E Corp", title: "Company" }),
-  },
-  component: TestimonialComponent,
-  toMarkdown: (c) => [`> ${c.quote}`, `— ${c.author}, ${c.title}, ${c.company}`],
-});
-
-function TestimonialComponent() {
-  return (
-    <section className="bg-background py-12 sm:py-16 md:py-24">
-      <div className="container mx-auto px-4">
-        <div className="mx-auto max-w-4xl text-center">
-          <testimonial.Field name="quote">
-            {(props) => (
-              <blockquote
-                {...props}
-                className="text-foreground mb-8 text-xl leading-relaxed font-medium sm:text-3xl"
-              >
-                "{props.children}"
-              </blockquote>
-            )}
-          </testimonial.Field>
-          <div className="flex flex-col items-center">
-            <testimonial.Field name="author">
-              {(props) => (
-                <cite {...props} className="text-foreground text-lg font-semibold not-italic" />
-              )}
-            </testimonial.Field>
-            <div className="text-muted-foreground flex flex-col sm:flex-row sm:items-center sm:gap-2">
-              <testimonial.Field name="title">{(props) => <span {...props} />}</testimonial.Field>
-              <span className="hidden sm:inline">&bull;</span>
-              <testimonial.Field name="company">{(props) => <span {...props} />}</testimonial.Field>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}
-
-export { testimonial as block };