create-zenbu-app 0.0.3 → 0.0.6

package/dist/index.mjs

@@ -7,10 +7,67 @@ import { spawnSync } from "node:child_process";
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const TEMPLATE_DIR = path.resolve(__dirname, "..", "template");
 const argv = process.argv.slice(2);
-const flags = new Set(argv.filter((a) => a.startsWith("-")));
+const flagsSet = new Set(argv.filter((a) => a.startsWith("-")));
 const positional = argv.filter((a) => !a.startsWith("-"));
-const yes = flags.has("--yes") || flags.has("-y");
+const yes = flagsSet.has("--yes") || flagsSet.has("-y");
+const noInstall = flagsSet.has("--no-install");
 const ZENBU_LOCAL_CORE = process.env.ZENBU_LOCAL_CORE;
+/**
+* Detect the PM that invoked `create-zenbu-app`. Order:
+*   1. `process.versions.bun` → bun (covers `bunx create-zenbu-app`).
+*   2. `npm_config_user_agent` → "<pm>/<version> ..." (set by all of npm,
+*      pnpm, yarn classic, yarn berry).
+*   3. Shell out to `<detected-name> --version` if user_agent only carries
+*      the bare name without a parseable version.
+*   4. Fallback to pnpm with a hardcoded sane default.
+*/
+function detectPackageManager() {
+	if (process.versions.bun) return {
+		type: "bun",
+		version: process.versions.bun,
+		fallback: false
+	};
+	const ua = process.env.npm_config_user_agent;
+	if (ua) {
+		const first = ua.split(" ")[0];
+		if (first) {
+			const slash = first.indexOf("/");
+			const name = (slash >= 0 ? first.slice(0, slash) : first).toLowerCase();
+			const version = slash >= 0 ? first.slice(slash + 1) : "";
+			if (name === "pnpm" || name === "npm" || name === "yarn" || name === "bun") {
+				if (version && /^\d/.test(version)) return {
+					type: name,
+					version,
+					fallback: false
+				};
+				const probed = probeVersion(name);
+				if (probed) return {
+					type: name,
+					version: probed,
+					fallback: false
+				};
+			}
+		}
+	}
+	return {
+		type: "pnpm",
+		version: "10.33.0",
+		fallback: true
+	};
+}
+function probeVersion(pm) {
+	const res = spawnSync(pm, ["--version"], {
+		encoding: "utf8",
+		stdio: [
+			"ignore",
+			"pipe",
+			"ignore"
+		]
+	});
+	if (res.status !== 0) return null;
+	const match = (res.stdout ?? "").trim().match(/\d+\.\d+\.\d+(?:[-+][\w.]+)?/);
+	return match ? match[0] : null;
+}
 function renderTemplate(value, projectName) {
 	return value.replace(/\{\{projectName\}\}/g, projectName);
 }
@@ -27,6 +84,19 @@ function copyDirSync(src, dest, projectName) {
 		}
 	}
 }
+/**
+* Replace the `// {{packageManager}}` marker in the scaffolded
+* `zenbu.config.ts` with a real `packageManager: { ... }` line. Idempotent
+* — running this twice yields the same file.
+*/
+function seedPackageManager(projectDir, pm) {
+	const configPath = path.join(projectDir, "zenbu.config.ts");
+	if (!fs.existsSync(configPath)) return;
+	const original = fs.readFileSync(configPath, "utf8");
+	const literal = `packageManager: { type: "${pm.type}", version: "${pm.version}" },`;
+	const replaced = original.replace(/\/\/\s*\{\{packageManager\}\}/, literal);
+	if (replaced !== original) fs.writeFileSync(configPath, replaced);
+}
 function rewireToLocalCore(projectDir, corePath) {
 	const pkgPath = path.join(projectDir, "package.json");
 	const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf8"));
@@ -63,6 +133,19 @@ function gitInitWithInitialCommit(projectDir) {
 		}
 	});
 }
+/**
+* Run `<pm> install` in the freshly-scaffolded project so the user can go
+* straight to `pnpm dev`/`bun dev`/etc. without the extra step. We run with
+* the user's globally-installed PM (which is what they used to invoke us in
+* the first place), so this won't hit the bundled toolchain — that only
+* matters at the .app's first launch on the consumer's machine.
+*/
+function runInstall(projectDir, pm) {
+	return spawnSync(pm.type, ["install"], {
+		cwd: projectDir,
+		stdio: "inherit"
+	}).status === 0;
+}
 function main() {
 	const projectName = positional[0] ?? ".";
 	if (projectName === "." && !yes) {
@@ -70,7 +153,7 @@ function main() {
 		process.exit(1);
 	}
 	const projectDir = path.resolve(process.cwd(), projectName);
-	const displayName = projectName === "." ? path.basename(projectDir) : projectName;
+	const displayName = path.basename(projectDir);
 	if (fs.existsSync(projectDir)) {
 		const entries = fs.readdirSync(projectDir).filter((e) => e !== ".git");
 		const allowedExisting = projectName === "." && fs.existsSync(path.join(projectDir, "package.json"));
@@ -79,19 +162,30 @@ function main() {
 			process.exit(1);
 		}
 	}
-	console.log(`\nScaffolding Zenbu app in "${displayName}"...\n`);
+	const pm = detectPackageManager();
+	console.log(`\nScaffolding Zenbu app in "${displayName}"...`);
+	if (pm.fallback) console.log(`  → couldn't detect invoking package manager; defaulting to ${pm.type}@${pm.version}.`);
+	else console.log(`  → detected ${pm.type}@${pm.version} as the invoking package manager`);
+	console.log("");
 	copyDirSync(TEMPLATE_DIR, projectDir, displayName);
 	const gi = path.join(projectDir, "_gitignore");
 	if (fs.existsSync(gi)) fs.renameSync(gi, path.join(projectDir, ".gitignore"));
+	seedPackageManager(projectDir, pm);
 	if (ZENBU_LOCAL_CORE) {
 		const corePath = path.resolve(ZENBU_LOCAL_CORE);
 		rewireToLocalCore(projectDir, corePath);
 		console.log(`  → linked @zenbujs/core -> ${corePath}`);
 	}
+	let installed = false;
+	if (!noInstall) {
+		console.log(`  → running ${pm.type} install\n`);
+		installed = runInstall(projectDir, pm);
+		if (!installed) console.warn(`  → ${pm.type} install failed; you can retry manually after the scaffold completes.\n`);
+	}
 	if (!fs.existsSync(path.join(projectDir, ".git"))) gitInitWithInitialCommit(projectDir);
 	const cdHint = projectName === "." ? "" : `cd ${displayName} && `;
-	console.log(`Done. Next:\n\n  ${cdHint}pnpm install\n  pnpm dev\n`);
-	console.log(`Note: Zenbu currently requires pnpm 10+.\n`);
+	if (installed) console.log(`Done. Next:\n\n  ${cdHint}${pm.type} dev\n`);
+	else console.log(`Done. Next:\n\n  ${cdHint}${pm.type} install\n  ${pm.type} dev\n`);
 }
 try {
 	main();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-zenbu-app",
-  "version": "0.0.3",
+  "version": "0.0.6",
   "description": "Scaffold a new Zenbu app",
   "type": "module",
   "publishConfig": {

package/template/_gitignore

@@ -3,3 +3,6 @@ dist/
 .zenbu/
 node_modules/.zenbujs/
 tsconfig.local.json
+.env
+.env.*
+!.env.example

package/template/package.json

@@ -12,10 +12,12 @@
     "db:generate": "zen db generate"
   },
   "dependencies": {
-    "@zenbujs/core": "0.0.5",
+    "@zenbujs/core": "^0.0.9",
+    "@tailwindcss/vite": "^4.2.0",
     "@vitejs/plugin-react": "^5.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "tailwindcss": "^4.2.0",
     "vite": "^6.0.0",
     "zod": "^4.0.0"
   },

package/template/src/main/schema.ts.tmpl

@@ -0,0 +1,16 @@
+import { createSchema, InferRoot, InferSchema, z } from "@zenbujs/core/db"
+
+export const schema = createSchema({
+  issues: z
+    .array(
+      z.object({
+        id: z.string(),
+        title: z.string(),
+        createdAt: z.number(),
+      }),
+    )
+    .default([]),
+})
+
+export type AppSchema = InferSchema<typeof schema>
+export type SchemaRoot = InferRoot<AppSchema>

package/template/src/main/services/app.ts.tmpl

@@ -1,14 +1,11 @@
-import { runtime, serviceWithDeps } from "@zenbujs/core/runtime"
+import { Service } from "@zenbujs/core/runtime"
 import { WindowService } from "@zenbujs/core/services"
 
-export class AppService extends serviceWithDeps({
-  window: WindowService,
+export class AppService extends Service.create({
+  key: "app",
+  deps: { window: WindowService },
 }) {
-  static key = "app"
-
   async evaluate() {
-    await this.ctx.window.openView({ scope: "app" })
+    await this.ctx.window.openView({ type: "app" })
   }
 }
-
-runtime.register(AppService, import.meta)

package/template/src/main/services/repo.ts.tmpl

@@ -0,0 +1,11 @@
+import { Service } from "@zenbujs/core/runtime"
+
+/**
+ * Sample RPC service. Methods on the class are callable from the renderer
+ * via `useRpc()` — see `src/renderer/App.tsx`.
+ */
+export class Repo extends Service.create({ key: "repo" }) {
+  async getCwd() {
+    return process.cwd()
+  }
+}

package/template/src/renderer/App.tsx.tmpl

@@ -1,43 +1,102 @@
+import { ZenbuProvider, useDb, useDbClient, useRpc } from "@zenbujs/core/react"
+import { useState } from "react"
+
 function Titlebar() {
   return (
     <div
-      style={{
-        height: 40,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "flex-end",
-        padding: "0 12px 0 72px",
-        // @ts-expect-error webkit property
-        WebkitAppRegion: "drag",
-        flexShrink: 0,
-      }}
+      className="h-10 flex items-center justify-end px-3 pl-[72px] shrink-0"
+      // @ts-expect-error webkit property
+      style={{ WebkitAppRegion: "drag" }}
     />
   )
 }
 
 function Home() {
+  const db = useDb()
+  const client = useDbClient()
+  const rpc = useRpc()
+  const [cwd, setCwd] = useState<string | null>(null)
+
+  const issues = db.plugin.app.issues
+
   return (
-    <main
-      style={{
-        flex: 1,
-        padding: "0 32px 32px",
-        fontFamily: "system-ui, -apple-system, sans-serif",
-        color: "var(--foreground, #e5e5e5)",
-      }}
-    >
-      <h1>Welcome to Zenbu</h1>
-      <p style={{ color: "var(--muted-foreground, #999)", marginTop: 8 }}>
+    <main className="flex-1 px-8 pb-8 font-sans text-[#e5e5e5]">
+      <h1 className="text-2xl font-bold mb-2">Welcome to Zenbu</h1>
+      <p className="text-[#888] mb-6">
         Edit <code>src/renderer/App.tsx</code> to get started.
       </p>
+
+      <form
+        className="flex flex-col gap-3 bg-[#18181b] rounded-xl p-4 max-w-md mb-6"
+        onSubmit={(e) => {
+          e.preventDefault()
+          const form = e.currentTarget
+          const title = (form.elements.namedItem("title") as HTMLInputElement).value
+          if (!title.trim()) return
+          client.update((db) => {
+            db.plugin.app.issues.push({
+              id: crypto.randomUUID(),
+              title,
+              createdAt: Date.now(),
+            })
+          })
+          form.reset()
+        }}
+      >
+        <input
+          name="title"
+          placeholder="New issue title"
+          autoComplete="off"
+          className="px-3 py-2 rounded bg-[#222] border border-[#333] outline-none focus:border-indigo-500"
+        />
+        <button
+          type="submit"
+          className="bg-indigo-600 hover:bg-indigo-700 transition text-white font-semibold px-4 py-2 rounded"
+        >
+          + add
+        </button>
+      </form>
+
+      <div className="max-w-md mb-6">
+        {issues.length === 0 ? (
+          <div className="text-[#888] italic">No issues yet — try adding one.</div>
+        ) : (
+          issues.map((issue) => (
+            <div
+              key={issue.id}
+              className="mb-2 p-3 rounded-lg bg-[#222] border border-[#2a2a2a] flex items-center justify-between"
+            >
+              <span>{issue.title}</span>
+              <span className="text-xs text-[#666]">
+                {new Date(issue.createdAt).toLocaleTimeString()}
+              </span>
+            </div>
+          ))
+        )}
+      </div>
+
+      <button
+        className="bg-zinc-800 hover:bg-zinc-700 px-4 py-2 rounded text-sm"
+        onClick={async () => setCwd(await rpc.repo.getCwd())}
+      >
+        rpc → main process cwd
+      </button>
+      {cwd && (
+        <div className="mt-2 p-2 rounded bg-[#232328] text-[#b0b0b0] w-fit text-xs">
+          {cwd}
+        </div>
+      )}
     </main>
   )
 }
 
 export function App() {
   return (
-    <div style={{ display: "flex", flexDirection: "column", minHeight: "100vh" }}>
-      <Titlebar />
-      <Home />
-    </div>
+    <ZenbuProvider>
+      <div className="flex flex-col min-h-screen">
+        <Titlebar />
+        <Home />
+      </div>
+    </ZenbuProvider>
   )
 }

package/template/src/renderer/app.css

@@ -1,3 +1,5 @@
+@import "tailwindcss";
+
 * {
   box-sizing: border-box;
 }
@@ -5,4 +7,5 @@
 body {
   margin: 0;
   background: #111;
+  color: #e5e5e5;
 }

package/template/src/renderer/installing.html

@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="zenbu-bg" content="#111">
+<title>Installing</title>
+<style>
+  html, body {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    background: #111;
+    color: #ddd;
+    font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+    -webkit-app-region: drag;
+    user-select: none;
+  }
+  body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 18px;
+    padding: 32px;
+    box-sizing: border-box;
+  }
+  .label {
+    font-size: 14px;
+    color: #f0f0f0;
+    letter-spacing: 0.2px;
+    min-height: 1.4em;
+    text-align: center;
+  }
+  .bar {
+    width: min(360px, 70%);
+    height: 4px;
+    background: #2a2a2a;
+    border-radius: 2px;
+    overflow: hidden;
+    position: relative;
+  }
+  .bar-fill {
+    position: absolute;
+    inset: 0 auto 0 0;
+    width: 0%;
+    background: #f0f0f0;
+    transition: width 180ms ease-out;
+  }
+  .bar.indeterminate .bar-fill {
+    width: 30%;
+    animation: slide 1.2s ease-in-out infinite;
+  }
+  @keyframes slide {
+    0%   { transform: translateX(-100%); }
+    100% { transform: translateX(366%); }
+  }
+  .message {
+    font-size: 11px;
+    color: #888;
+    font-family: "SF Mono", Menlo, Consolas, monospace;
+    max-width: min(420px, 90%);
+    text-align: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-height: 1.4em;
+  }
+</style>
+</head>
+<body>
+  <div class="label" id="label">Starting&hellip;</div>
+  <div class="bar indeterminate" id="bar"><div class="bar-fill" id="fill"></div></div>
+  <div class="message" id="message"></div>
+  <script>
+    // The framework's built-in preload exposes `window.zenbuInstall` with
+    // `.on(event, cb)` returning an unsubscribe function. Events:
+    //   step:     { id: "clone" | "fetch" | "install" | "handoff", label }
+    //   message:  { text }
+    //   progress: { phase?, loaded?, total?, ratio? }
+    //   done:     { id }
+    //   error:    { id?, message }
+    const api = window.zenbuInstall;
+    const labelEl = document.getElementById("label");
+    const messageEl = document.getElementById("message");
+    const barEl = document.getElementById("bar");
+    const fillEl = document.getElementById("fill");
+    if (api) {
+      api.on("step", (p) => {
+        if (p && p.label) labelEl.textContent = p.label;
+        barEl.classList.add("indeterminate");
+        fillEl.style.width = "";
+      });
+      api.on("message", (p) => {
+        if (p && p.text) messageEl.textContent = p.text;
+      });
+      api.on("progress", (p) => {
+        const ratio = p && typeof p.ratio === "number" ? p.ratio : null;
+        if (ratio != null && ratio >= 0) {
+          barEl.classList.remove("indeterminate");
+          fillEl.style.width = Math.max(2, Math.min(100, ratio * 100)) + "%";
+        } else {
+          barEl.classList.add("indeterminate");
+        }
+      });
+      api.on("done", () => {
+        messageEl.textContent = "";
+      });
+      api.on("error", (p) => {
+        labelEl.textContent = "Failed";
+        if (p && p.message) messageEl.textContent = p.message;
+        barEl.classList.remove("indeterminate");
+        fillEl.style.width = "100%";
+        fillEl.style.background = "#d04444";
+      });
+    }
+  </script>
+</body>
+</html>

package/template/src/renderer/splash.html

@@ -2,50 +2,21 @@
 <html>
 <head>
 <meta charset="utf-8">
-<meta name="zenbu-bg" content="#F4F4F4">
+<meta name="zenbu-bg" content="#111">
 <style>
-  * { margin: 0; padding: 0; box-sizing: border-box; }
-  html, body { height: 100%; overflow: hidden; }
-  body {
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-    background: #F4F4F4;
-    -webkit-app-region: drag;
-    user-select: none;
-    padding: 52px 48px 32px;
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
+  html, body {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    background: #111;
   }
   @media (prefers-color-scheme: dark) {
-    body { background: #1a1a1a; }
-    .skeleton { background: #2a2a2a; }
-    .skeleton::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.03), transparent); }
+    html, body {
+      background: #111;
+    }
   }
-  .skeleton {
-    background: #e5e5e5;
-    border-radius: 6px;
-    position: relative;
-    overflow: hidden;
-  }
-  .skeleton::after {
-    content: "";
-    position: absolute;
-    inset: 0;
-    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
-    animation: shimmer 1.5s infinite;
-  }
-  @keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
-  .title { height: 28px; width: 35%; }
-  .line { height: 14px; }
-  .line:nth-child(2) { width: 90%; }
-  .line:nth-child(3) { width: 70%; }
-  .line:nth-child(4) { width: 80%; }
 </style>
 </head>
 <body>
-  <div class="skeleton title"></div>
-  <div class="skeleton line"></div>
-  <div class="skeleton line"></div>
-  <div class="skeleton line"></div>
 </body>
 </html>

package/template/vite.config.ts.tmpl

@@ -2,12 +2,13 @@ import path from "node:path"
 import { fileURLToPath } from "node:url"
 import { defineConfig } from "vite"
 import react from "@vitejs/plugin-react"
+import tailwindcss from "@tailwindcss/vite"
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url))
 
 export default defineConfig({
   root: path.resolve(__dirname, "src", "renderer"),
-  plugins: [react()],
+  plugins: [react(), tailwindcss()],
   resolve: {
     alias: {
       "@": path.resolve(__dirname, "src", "renderer"),

package/template/zenbu.config.ts.tmpl

@@ -2,9 +2,7 @@ import {
   defineConfig,
   definePlugin,
   defineBuildConfig,
-  stripIfDisabled,
-  dropFiles,
-} from "@zenbujs/core/config";
+} from "@zenbujs/core/config"
 
 export default defineConfig({
   // Where the kyju database lives (relative to this file).
@@ -19,6 +17,7 @@ export default defineConfig({
     definePlugin({
       name: "app",
       services: ["./src/main/services/*.ts"],
+      schema: "./src/main/schema.ts",
     }),
   ],
 
@@ -26,10 +25,18 @@ export default defineConfig({
   // `zen build:electron` (signed .app via electron-builder). Set
   // `mirror.target` to "<owner>/<repo>" before shipping.
   build: defineBuildConfig({
+    // {{packageManager}}
+    // The .app's "host version" — bump every time you ship a new
+    // .app build. Each commit's `package.json#zenbu.host` semver range
+    // is checked against this value at launch (and from
+    // `UpdaterService.update()`); incompatible commits are skipped, so
+    // older .apps stay pinned to source they can actually run.
+    hostVersion: "0.0.1",
     source: ".",
     out: ".zenbu/build/source",
     include: [
       "src/**/*",
+      ".gitignore",
       "package.json",
       "pnpm-lock.yaml",
       "tsconfig.json",
@@ -43,10 +50,6 @@ export default defineConfig({
       "src/**/*.spec.tsx",
       "src/dev-only/**",
     ],
-    transforms: [
-      stripIfDisabled({ FLAG_BETA: false }),
-      dropFiles(/\.stories\.tsx?$/),
-    ],
     // mirror: { target: "{{owner}}/{{repo}}", branch: "main" },
   }),
-});
+})