create-zenbu-app 0.0.6 → 0.0.9

package/{template → templates/tailwind}/src/renderer/App.tsx.tmpl

@@ -1,4 +1,4 @@
-import { ZenbuProvider, useDb, useDbClient, useRpc } from "@zenbujs/core/react"
+import { useDb, useDbClient, useRpc } from "@zenbujs/core/react"
 import { useState } from "react"
 
 function Titlebar() {
@@ -17,7 +17,7 @@ function Home() {
   const rpc = useRpc()
   const [cwd, setCwd] = useState<string | null>(null)
 
-  const issues = db.plugin.app.issues
+  const issues = db.app.issues
 
   return (
     <main className="flex-1 px-8 pb-8 font-sans text-[#e5e5e5]">
@@ -34,7 +34,7 @@ function Home() {
           const title = (form.elements.namedItem("title") as HTMLInputElement).value
           if (!title.trim()) return
           client.update((db) => {
-            db.plugin.app.issues.push({
+            db.app.issues.push({
               id: crypto.randomUUID(),
               title,
               createdAt: Date.now(),
@@ -92,11 +92,9 @@ function Home() {
 
 export function App() {
   return (
-    <ZenbuProvider>
-      <div className="flex flex-col min-h-screen">
-        <Titlebar />
-        <Home />
-      </div>
-    </ZenbuProvider>
+    <div className="flex flex-col min-h-screen">
+      <Titlebar />
+      <Home />
+    </div>
   )
 }

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/{template → templates/tailwind}/zenbu.config.ts.tmpl

@@ -26,12 +26,13 @@ export default defineConfig({
   // `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",
+    // 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: [

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/templates/vanilla/package.json

@@ -0,0 +1,45 @@
+{
+  "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.13",
+    "@vitejs/plugin-react": "^5.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.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/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>
+  )
+}

package/templates/vanilla/src/renderer/app.css

@@ -0,0 +1,143 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  background: #111;
+  color: #e5e5e5;
+  font-family:
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    "Segoe UI",
+    Roboto,
+    sans-serif;
+}
+
+.app {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.titlebar {
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 0 12px 0 72px;
+  flex-shrink: 0;
+}
+
+.home {
+  flex: 1;
+  padding: 0 32px 32px;
+  color: #e5e5e5;
+}
+
+.home h1 {
+  font-size: 24px;
+  font-weight: 700;
+  margin: 0 0 8px;
+}
+
+.home .lede {
+  color: #888;
+  margin: 0 0 24px;
+}
+
+.home code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
+.add-form {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  background: #18181b;
+  border-radius: 12px;
+  padding: 16px;
+  max-width: 28rem;
+  margin-bottom: 24px;
+}
+
+.add-form input {
+  padding: 8px 12px;
+  border-radius: 4px;
+  background: #222;
+  border: 1px solid #333;
+  color: inherit;
+  outline: none;
+  font: inherit;
+}
+
+.add-form input:focus {
+  border-color: #6366f1;
+}
+
+.add-form button {
+  background: #4f46e5;
+  color: white;
+  font-weight: 600;
+  padding: 8px 16px;
+  border-radius: 4px;
+  border: 0;
+  cursor: pointer;
+  transition: background 120ms ease;
+}
+
+.add-form button:hover {
+  background: #4338ca;
+}
+
+.issues {
+  max-width: 28rem;
+  margin-bottom: 24px;
+}
+
+.issues-empty {
+  color: #888;
+  font-style: italic;
+}
+
+.issue {
+  margin-bottom: 8px;
+  padding: 12px;
+  border-radius: 8px;
+  background: #222;
+  border: 1px solid #2a2a2a;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.issue-time {
+  font-size: 12px;
+  color: #666;
+}
+
+.rpc-button {
+  background: #27272a;
+  color: inherit;
+  border: 0;
+  padding: 8px 16px;
+  border-radius: 4px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: background 120ms ease;
+}
+
+.rpc-button:hover {
+  background: #3f3f46;
+}
+
+.rpc-result {
+  margin-top: 8px;
+  padding: 8px;
+  border-radius: 4px;
+  background: #232328;
+  color: #b0b0b0;
+  width: fit-content;
+  font-size: 12px;
+}

package/templates/vanilla/src/renderer/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Zenbu App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>

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

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

package/templates/vanilla/src/renderer/splash.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="zenbu-bg" content="#111">
+<style>
+  html, body {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    background: #111;
+  }
+  @media (prefers-color-scheme: dark) {
+    html, body {
+      background: #111;
+    }
+  }
+</style>
+</head>
+<body>
+</body>
+</html>

package/templates/vanilla/tsconfig.json.tmpl

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "outDir": "dist",
+    "rootDir": ".",
+    "paths": {
+      "@/*": ["./src/renderer/*"],
+      "#registry/*": ["./types/*"]
+    }
+  },
+  "include": ["src", "types"]
+}

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

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

package/templates/vanilla/zenbu.config.ts.tmpl

@@ -0,0 +1,56 @@
+import {
+  defineConfig,
+  definePlugin,
+  defineBuildConfig,
+} from "@zenbujs/core/config"
+
+export default defineConfig({
+  // Where the kyju database lives (relative to this file).
+  db: "./.zenbu/db",
+
+  // Boot-window HTML. The single ui entrypoint for the whole app.
+  uiEntrypoint: "./src/renderer",
+
+  // Plugins are pure main-process: services + optional schema/preload/events.
+  // The "host plugin" is just the first entry by convention.
+  plugins: [
+    definePlugin({
+      name: "app",
+      services: ["./src/main/services/*.ts"],
+      schema: "./src/main/schema.ts",
+    }),
+  ],
+
+  // Build pipeline for `zen build:source` (mirror staging) and
+  // `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",
+      "zenbu.config.ts",
+      "vite.config.ts",
+    ],
+    ignore: [
+      "src/**/*.test.ts",
+      "src/**/*.test.tsx",
+      "src/**/*.spec.ts",
+      "src/**/*.spec.tsx",
+      "src/dev-only/**",
+    ],
+    // mirror: { target: "{{owner}}/{{repo}}", branch: "main" },
+  }),
+})

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

@@ -1,16 +0,0 @@
-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>