create-zenbu-app 0.0.20 → 0.0.22

package/README.md

@@ -8,53 +8,3 @@ cd my-app
 pnpm dev
 ```
 
-## Interactive mode
-
-Run with no arguments to be prompted for a project name and config options:
-
-```bash
-pnpm create zenbu-app
-```
-
-You'll be asked for:
-
-- **Project name** — defaults to `my-zenbu-app` (just press enter to accept).
-- **Use Tailwind CSS?** — defaults to `yes`.
-
-Each prompt's default is selected when you press enter, so a default scaffold
-is just `enter, enter, enter`.
-
-## Flags
-
-| Flag | Description |
-|---|---|
-| `--yes`, `-y` | Skip every prompt and take each option's default. With no project name, scaffolds into the current directory. |
-| `--no-install` | Skip the post-copy `<pm> install` step. |
-
-A few common invocations:
-
-```bash
-pnpm create zenbu-app                  # interactive, then scaffolds ./my-zenbu-app
-pnpm create zenbu-app my-app           # interactive options, scaffolds ./my-app
-pnpm create zenbu-app .                # interactive options, scaffolds into cwd
-pnpm create zenbu-app --yes            # all defaults, scaffolds into cwd
-pnpm create zenbu-app my-app --yes     # all defaults, scaffolds ./my-app
-```
-
-## Templates
-
-The CLI ships full per-config copies of the project under `templates/<slug>/`
-— there are no in-template conditionals. Today:
-
-- `templates/tailwind/` — Tailwind CSS v4 wired up via `@tailwindcss/vite`.
-- `templates/vanilla/` — plain CSS, no utility framework.
-
-The selected slug is computed from the answered config options (Tailwind
-contributes `tailwind`; the empty set falls back to `vanilla`).
-
-## Package manager support
-
-The detected invoking package manager is recorded in `zenbu.config.ts` and
-used for the post-copy install. pnpm, npm, yarn, and bun are all supported,
-but the bundled `.app` re-installs from the project's lockfile at first
-launch — so currently the lockfile must be a pnpm one.

package/package.json

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

package/templates/tailwind/package.json

@@ -8,7 +8,8 @@
     "build:source": "zen build:source",
     "build:electron": "zen build:electron",
     "publish:source": "zen publish:source",
-    "link": "zen link"
+    "link": "zen link",
+    "db:generate": "zen db generate"
   },
   "dependencies": {
     "@zenbujs/core": "^0.0.20",

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

@@ -0,0 +1,7 @@
+import { Service } from "@zenbujs/core/runtime"
+
+export class CwdService extends Service.create({ key: "cwd" }) {
+  async get() {
+    return process.cwd()
+  }
+}

package/templates/tailwind/src/renderer/components/app.tsx.tmpl

@@ -0,0 +1,11 @@
+import { Titlebar } from "./titlebar"
+import { Home } from "./home"
+
+export function App() {
+  return (
+    <div className="flex flex-col min-h-screen">
+      <Titlebar />
+      <Home />
+    </div>
+  )
+}

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

@@ -1,33 +1,23 @@
 import { useRpc } from "@zenbujs/core/react"
 import { useState } from "react"
 
-function Titlebar() {
-  return (
-    <div
-      className="h-10 shrink-0 border-b border-[#222]"
-      // @ts-expect-error webkit property
-      style={{ WebkitAppRegion: "drag" }}
-    />
-  )
-}
-
-function Home() {
+export function Home() {
   const rpc = useRpc()
   const [cwd, setCwd] = useState<string | null>(null)
   const [copied, setCopied] = useState(false)
 
   return (
-    <main className="flex-1 px-8 pt-6 pb-8 font-sans text-[#e5e5e5]">
+    <main className="flex-1 px-8 pt-6 pb-8 font-sans text-zinc-900 dark:text-zinc-100">
       <h1 className="text-2xl font-bold mb-2">Welcome to Zenbu.js</h1>
-      <p className="text-[#888] mb-6">
-        Edit <code>src/renderer/App.tsx</code> to get started.
+      <p className="text-zinc-500 dark:text-zinc-400 mb-6">
+        Edit <code>src/renderer/components/home.tsx</code> to get started.
       </p>
 
       <button
         className="bg-indigo-600 hover:bg-indigo-700 transition text-white font-semibold px-4 py-2 rounded text-sm"
         onClick={async () => {
           setCopied(false)
-          setCwd(await rpc.app.repo.getCwd())
+          setCwd(await rpc.app.cwd.get())
         }}
       >
         Get cwd
@@ -35,11 +25,11 @@ function Home() {
 
       {cwd && (
         <div className="mt-3 flex items-center gap-2 max-w-md">
-          <code className="flex-1 p-2 rounded bg-[#232328] text-[#b0b0b0] text-xs truncate">
+          <code className="flex-1 p-2 rounded bg-zinc-100 dark:bg-zinc-900 text-zinc-700 dark:text-zinc-300 text-xs truncate">
             {cwd}
           </code>
           <button
-            className="bg-zinc-800 hover:bg-zinc-700 px-3 py-2 rounded text-xs"
+            className="bg-zinc-200 hover:bg-zinc-300 dark:bg-zinc-800 dark:hover:bg-zinc-700 text-zinc-900 dark:text-zinc-100 px-3 py-2 rounded text-xs"
             onClick={async () => {
               await navigator.clipboard.writeText(cwd)
               setCopied(true)
@@ -53,12 +43,3 @@ function Home() {
     </main>
   )
 }
-
-export function App() {
-  return (
-    <div className="flex flex-col min-h-screen">
-      <Titlebar />
-      <Home />
-    </div>
-  )
-}

package/templates/tailwind/src/renderer/components/titlebar.tsx.tmpl

@@ -0,0 +1,9 @@
+export function Titlebar() {
+  return (
+    <div
+      className="h-10 shrink-0 border-b border-zinc-200 dark:border-zinc-800"
+      // @ts-expect-error webkit property
+      style={{ WebkitAppRegion: "drag" }}
+    />
+  )
+}

package/templates/tailwind/src/renderer/main.css

@@ -0,0 +1,21 @@
+@import "tailwindcss";
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  height: 100%;
+  background: #fafafa;
+  color: #18181b;
+}
+
+@media (prefers-color-scheme: dark) {
+  html,
+  body {
+    background: #09090b;
+    color: #f4f4f5;
+  }
+}

package/templates/tailwind/src/renderer/main.tsx.tmpl

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

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

@@ -2,21 +2,26 @@
 <html>
 <head>
 <meta charset="utf-8">
-<meta name="zenbu-bg" content="#111">
+<!--
+  Per-theme BaseWindow background colors. Zenbu's main process picks the
+  matching tag based on `nativeTheme.shouldUseDarkColors`, so the pre-paint
+  window flash matches the splash body.
+-->
+<meta name="zenbu-bg" content="#fafafa" media="(prefers-color-scheme: light)">
+<meta name="zenbu-bg" content="#09090b" media="(prefers-color-scheme: dark)">
 <style>
   html, body {
     height: 100%;
     margin: 0;
     padding: 0;
-    background: #111;
+    background: #fafafa;
   }
   @media (prefers-color-scheme: dark) {
     html, body {
-      background: #111;
+      background: #09090b;
     }
   }
 </style>
 </head>
-<body>
-</body>
+<body></body>
 </html>

package/templates/vanilla/package.json

@@ -8,7 +8,8 @@
     "build:source": "zen build:source",
     "build:electron": "zen build:electron",
     "publish:source": "zen publish:source",
-    "link": "zen link"
+    "link": "zen link",
+    "db:generate": "zen db generate"
   },
   "dependencies": {
     "@zenbujs/core": "^0.0.20",

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

@@ -0,0 +1,7 @@
+import { Service } from "@zenbujs/core/runtime"
+
+export class CwdService extends Service.create({ key: "cwd" }) {
+  async get() {
+    return process.cwd()
+  }
+}

package/templates/vanilla/src/renderer/components/app.tsx.tmpl

@@ -0,0 +1,11 @@
+import { Titlebar } from "./titlebar"
+import { Home } from "./home"
+
+export function App() {
+  return (
+    <div className="app">
+      <Titlebar />
+      <Home />
+    </div>
+  )
+}

package/templates/vanilla/src/renderer/{App.tsx.tmpl → components/home.tsx.tmpl}

@@ -1,17 +1,7 @@
 import { 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() {
+export function Home() {
   const rpc = useRpc()
   const [cwd, setCwd] = useState<string | null>(null)
   const [copied, setCopied] = useState(false)
@@ -20,14 +10,14 @@ function Home() {
     <main className="home">
       <h1>Welcome to Zenbu.js</h1>
       <p className="lede">
-        Edit <code>src/renderer/App.tsx</code> to get started.
+        Edit <code>src/renderer/components/home.tsx</code> to get started.
       </p>
 
       <button
         className="primary-button"
         onClick={async () => {
           setCopied(false)
-          setCwd(await rpc.app.repo.getCwd())
+          setCwd(await rpc.app.cwd.get())
         }}
       >
         Get cwd
@@ -51,12 +41,3 @@ function Home() {
     </main>
   )
 }
-
-export function App() {
-  return (
-    <div className="app">
-      <Titlebar />
-      <Home />
-    </div>
-  )
-}

package/templates/vanilla/src/renderer/components/titlebar.tsx.tmpl

@@ -0,0 +1,9 @@
+export function Titlebar() {
+  return (
+    <div
+      className="titlebar"
+      // @ts-expect-error webkit property
+      style={{ WebkitAppRegion: "drag" }}
+    />
+  )
+}

package/templates/vanilla/src/renderer/{app.css → main.css}

@@ -2,10 +2,12 @@
   box-sizing: border-box;
 }
 
+html,
 body {
   margin: 0;
-  background: #111;
-  color: #e5e5e5;
+  height: 100%;
+  background: #fafafa;
+  color: #18181b;
   font-family:
     ui-sans-serif,
     system-ui,
@@ -15,6 +17,14 @@ body {
     sans-serif;
 }
 
+@media (prefers-color-scheme: dark) {
+  html,
+  body {
+    background: #09090b;
+    color: #f4f4f5;
+  }
+}
+
 .app {
   display: flex;
   flex-direction: column;
@@ -24,13 +34,18 @@ body {
 .titlebar {
   height: 40px;
   flex-shrink: 0;
-  border-bottom: 1px solid #222;
+  border-bottom: 1px solid #e4e4e7;
+}
+
+@media (prefers-color-scheme: dark) {
+  .titlebar {
+    border-bottom-color: #27272a;
+  }
 }
 
 .home {
   flex: 1;
   padding: 24px 32px 32px;
-  color: #e5e5e5;
 }
 
 .home h1 {
@@ -40,7 +55,7 @@ body {
 }
 
 .home .lede {
-  color: #888;
+  color: #71717a;
   margin: 0 0 24px;
 }
 
@@ -76,8 +91,8 @@ body {
   flex: 1;
   padding: 8px;
   border-radius: 4px;
-  background: #232328;
-  color: #b0b0b0;
+  background: #f4f4f5;
+  color: #3f3f46;
   font-size: 12px;
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   overflow: hidden;
@@ -85,9 +100,16 @@ body {
   white-space: nowrap;
 }
 
+@media (prefers-color-scheme: dark) {
+  .cwd-value {
+    background: #18181b;
+    color: #d4d4d8;
+  }
+}
+
 .copy-button {
-  background: #27272a;
-  color: inherit;
+  background: #e4e4e7;
+  color: #18181b;
   border: 0;
   padding: 8px 12px;
   border-radius: 4px;
@@ -97,5 +119,15 @@ body {
 }
 
 .copy-button:hover {
-  background: #3f3f46;
+  background: #d4d4d8;
+}
+
+@media (prefers-color-scheme: dark) {
+  .copy-button {
+    background: #27272a;
+    color: #f4f4f5;
+  }
+  .copy-button:hover {
+    background: #3f3f46;
+  }
 }

package/templates/vanilla/src/renderer/main.tsx.tmpl

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

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

@@ -2,21 +2,26 @@
 <html>
 <head>
 <meta charset="utf-8">
-<meta name="zenbu-bg" content="#111">
+<!--
+  Per-theme BaseWindow background colors. Zenbu's main process picks the
+  matching tag based on `nativeTheme.shouldUseDarkColors`, so the pre-paint
+  window flash matches the splash body.
+-->
+<meta name="zenbu-bg" content="#fafafa" media="(prefers-color-scheme: light)">
+<meta name="zenbu-bg" content="#09090b" media="(prefers-color-scheme: dark)">
 <style>
   html, body {
     height: 100%;
     margin: 0;
     padding: 0;
-    background: #111;
+    background: #fafafa;
   }
   @media (prefers-color-scheme: dark) {
     html, body {
-      background: #111;
+      background: #09090b;
     }
   }
 </style>
 </head>
-<body>
-</body>
+<body></body>
 </html>

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

@@ -1,11 +0,0 @@
-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.css

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

package/templates/tailwind/src/renderer/installing.html

@@ -1,118 +0,0 @@
-<!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/main/services/repo.ts.tmpl

@@ -1,11 +0,0 @@
-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/installing.html

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