create-zenbu-app 0.0.4 → 0.0.8

package/templates/tailwind/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "{{projectName}}",
+  "private": true,
+  "type": "module",
+  "main": "node_modules/@zenbujs/core/dist/setup-gate.mjs",
+  "scripts": {
+    "dev": "zen dev",
+    "build:source": "zen build:source",
+    "build:electron": "zen build:electron",
+    "publish:source": "zen publish:source",
+    "link": "zen link",
+    "db:generate": "zen db generate"
+  },
+  "dependencies": {
+    "@zenbujs/core": "^0.0.12",
+    "@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"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "electron": "^42.0.0",
+    "electron-builder": "^26.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": ""
+  },
+  "zenbu": {
+    "host": ">=0.0.0 <0.1.0"
+  },
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "@parcel/watcher",
+      "dugite",
+      "electron",
+      "electron-winstaller",
+      "esbuild"
+    ]
+  }
+}

package/templates/tailwind/src/main/schema.ts.tmpl

@@ -0,0 +1,13 @@
+import { createSchema, z } from "@zenbujs/core/db"
+
+export default createSchema({
+  issues: z
+    .array(
+      z.object({
+        id: z.string(),
+        title: z.string(),
+        createdAt: z.number(),
+      }),
+    )
+    .default([]),
+})

package/templates/tailwind/src/main/services/init.ts.tmpl

@@ -0,0 +1,11 @@
+import { Service } from "@zenbujs/core/runtime"
+import { WindowService } from "@zenbujs/core/services"
+
+export class InitService extends Service.create({
+  key: "init",
+  deps: { window: WindowService },
+}) {
+  async evaluate() {
+    await this.ctx.window.openView({ type: "entrypoint" })
+  }
+}

package/templates/tailwind/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/templates/tailwind/src/renderer/App.tsx.tmpl

@@ -0,0 +1,100 @@
+import { useDb, useDbClient, useRpc } from "@zenbujs/core/react"
+import { useState } from "react"
+
+function Titlebar() {
+  return (
+    <div
+      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.app.issues
+
+  return (
+    <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.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 className="flex flex-col min-h-screen">
+      <Titlebar />
+      <Home />
+    </div>
+  )
+}

package/{template → templates/tailwind}/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/templates/tailwind/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 → templates/tailwind}/src/renderer/main.tsx.tmpl

@@ -1,10 +1,10 @@
-import { StrictMode } from "react"
 import { createRoot } from "react-dom/client"
+import { ZenbuProvider } from "@zenbujs/core/react"
 import { App } from "./App"
 import "./app.css"
 
 createRoot(document.getElementById("root")!).render(
-  <StrictMode>
+  <ZenbuProvider>
     <App />
-  </StrictMode>,
+  </ZenbuProvider>,
 )

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

@@ -0,0 +1,17 @@
+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(), tailwindcss()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "src", "renderer"),
+    },
+  },
+})

package/{template → templates/tailwind}/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,19 @@ 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" comes from `package.json#version` —
+    // read at build time and baked into <bundle>/host.json. Bump
+    // `package.json#version` every time you ship a new .app build.
+    // Each commit's `package.json#zenbu.host` semver range is checked
+    // against that value at launch (and from `UpdaterService.update()`);
+    // incompatible commits are skipped, so older .apps stay pinned to
+    // source they can actually run.
     source: ".",
     out: ".zenbu/build/source",
     include: [
       "src/**/*",
+      ".gitignore",
       "package.json",
       "pnpm-lock.yaml",
       "tsconfig.json",
@@ -43,10 +51,6 @@ export default defineConfig({
       "src/**/*.spec.tsx",
       "src/dev-only/**",
     ],
-    transforms: [
-      stripIfDisabled({ FLAG_BETA: false }),
-      dropFiles(/\.stories\.tsx?$/),
-    ],
     // mirror: { target: "{{owner}}/{{repo}}", branch: "main" },
   }),
-});
+})

package/templates/vanilla/_gitignore

@@ -0,0 +1,8 @@
+node_modules/
+dist/
+.zenbu/
+node_modules/.zenbujs/
+tsconfig.local.json
+.env
+.env.*
+!.env.example

package/templates/vanilla/electron-builder.json

@@ -0,0 +1,12 @@
+{
+  "appId": "dev.zenbu.{{projectName}}",
+  "productName": "{{projectName}}",
+  "asar": false,
+  "directories": {
+    "output": "dist"
+  },
+  "mac": {
+    "category": "public.app-category.developer-tools",
+    "target": ["zip"]
+  }
+}

package/{template → templates/vanilla}/package.json

@@ -12,7 +12,7 @@
     "db:generate": "zen db generate"
   },
   "dependencies": {
-    "@zenbujs/core": "0.0.5",
+    "@zenbujs/core": "^0.0.12",
     "@vitejs/plugin-react": "^5.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

package/templates/vanilla/src/main/schema.ts.tmpl

@@ -0,0 +1,13 @@
+import { createSchema, z } from "@zenbujs/core/db"
+
+export default createSchema({
+  issues: z
+    .array(
+      z.object({
+        id: z.string(),
+        title: z.string(),
+        createdAt: z.number(),
+      }),
+    )
+    .default([]),
+})

package/templates/vanilla/src/main/services/init.ts.tmpl

@@ -0,0 +1,11 @@
+import { Service } from "@zenbujs/core/runtime"
+import { WindowService } from "@zenbujs/core/services"
+
+export class InitService extends Service.create({
+  key: "init",
+  deps: { window: WindowService },
+}) {
+  async evaluate() {
+    await this.ctx.window.openView({ type: "entrypoint" })
+  }
+}

package/templates/vanilla/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/templates/vanilla/src/renderer/App.tsx.tmpl

@@ -0,0 +1,83 @@
+import { useDb, useDbClient, useRpc } from "@zenbujs/core/react"
+import { useState } from "react"
+
+function Titlebar() {
+  return (
+    <div
+      className="titlebar"
+      // @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.app.issues
+
+  return (
+    <main className="home">
+      <h1>Welcome to Zenbu</h1>
+      <p className="lede">
+        Edit <code>src/renderer/App.tsx</code> to get started.
+      </p>
+
+      <form
+        className="add-form"
+        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.app.issues.push({
+              id: crypto.randomUUID(),
+              title,
+              createdAt: Date.now(),
+            })
+          })
+          form.reset()
+        }}
+      >
+        <input name="title" placeholder="New issue title" autoComplete="off" />
+        <button type="submit">+ add</button>
+      </form>
+
+      <div className="issues">
+        {issues.length === 0 ? (
+          <div className="issues-empty">No issues yet — try adding one.</div>
+        ) : (
+          issues.map((issue) => (
+            <div key={issue.id} className="issue">
+              <span>{issue.title}</span>
+              <span className="issue-time">
+                {new Date(issue.createdAt).toLocaleTimeString()}
+              </span>
+            </div>
+          ))
+        )}
+      </div>
+
+      <button
+        className="rpc-button"
+        onClick={async () => setCwd(await rpc.repo.getCwd())}
+      >
+        rpc → main process cwd
+      </button>
+      {cwd && <div className="rpc-result">{cwd}</div>}
+    </main>
+  )
+}
+
+export function App() {
+  return (
+    <div className="app">
+      <Titlebar />
+      <Home />
+    </div>
+  )
+}