@brust/create-app 2.0.0-alpha.3 → 2.0.0-alpha.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brust/create-app",
-  "version": "2.0.0-alpha.3",
+  "version": "2.0.0-alpha.4",
   "description": "Scaffold a brust v2 app — bun create @brust/app <name>",
   "license": "MIT",
   "repository": {

package/src/args.ts

@@ -5,7 +5,7 @@ import { isAbsolute, resolve } from 'node:path'
 const NAME_RE = /^[a-z0-9][a-z0-9_-]*$/
 const MAX_NAME_LEN = 50
 
-export const USAGE = 'usage: bun create @brust/app <name> [--template blank|pokedex] [--dir <path>] [--yes] [--brust-dep <spec>]'
+export const USAGE = 'usage: bun create @brust/app <name> [--template blank|pokedex] [--tailwind] [--dir <path>] [--yes] [--brust-dep <spec>]'
 
 export interface ParsedArgs {
   projectName: string
@@ -13,6 +13,8 @@ export interface ParsedArgs {
   template?: string
   yes: boolean
   brustDep?: string
+  /** `--tailwind` (L21): accepted and ignored since L28: the blank template uses Tailwind CSS v4 by default. */
+  tailwind: boolean
   help: boolean
 }
 
@@ -22,6 +24,7 @@ export function parseArgs(args: string[]): ParsedArgs {
   let template: string | undefined
   let brustDep: string | undefined
   let yes = false
+  let tailwind = false
   let help = false
   const need = (flag: string, v: string | undefined): string => {
     if (!v) throw new Error(`create-app: ${flag} requires a value`)
@@ -39,12 +42,13 @@ export function parseArgs(args: string[]): ParsedArgs {
     else if (a === '--brust-dep') brustDep = need('--brust-dep', args[++i])
     else if (a.startsWith('--brust-dep=')) brustDep = need('--brust-dep', a.slice('--brust-dep='.length))
     else if (a === '--yes' || a === '-y') yes = true
+    else if (a === '--tailwind') tailwind = true
     else if (a.startsWith('-')) throw new Error(`create-app: unknown flag "${a}"`)
     else if (name === undefined) name = a
     else throw new Error(`create-app: unexpected positional argument "${a}"`)
   }
 
-  if (help) return { projectName: name ?? '', targetDir: '', template, yes, brustDep, help }
+  if (help) return { projectName: name ?? '', targetDir: '', template, yes, brustDep, tailwind, help }
   if (!name) throw new Error(`create-app: missing project name. ${USAGE}`)
   if (name.length > MAX_NAME_LEN) throw new Error(`create-app: project name too long (max ${MAX_NAME_LEN} chars)`)
   if (!NAME_RE.test(name)) {
@@ -52,5 +56,5 @@ export function parseArgs(args: string[]): ParsedArgs {
   }
   const cwd = process.cwd()
   const targetDir = dir ? (isAbsolute(dir) ? dir : resolve(cwd, dir)) : resolve(cwd, name)
-  return { projectName: name, targetDir, template, yes, brustDep, help }
+  return { projectName: name, targetDir, template, yes, brustDep, tailwind, help }
 }

package/src/cli.ts

@@ -4,6 +4,7 @@ import { readdir, rm } from 'node:fs/promises'
 import { copyTemplate } from './copy.ts'
 import { parseArgs, USAGE } from './args.ts'
 import { applyOverrides, monorepoRoot, resolveBrustDep } from './dep.ts'
+import { TAILWIND_DEFAULT_NOTE } from './tailwind.ts'
 import { selectTemplate } from './templates.ts'
 
 const fail = (msg: string): never => {
@@ -26,6 +27,8 @@ export async function main(argv: string[]): Promise<void> {
 
   let tmpl: ReturnType<typeof selectTemplate>
   try { tmpl = selectTemplate({ explicit: parsed.template, yes: parsed.yes, isTTY: Boolean(process.stdin.isTTY) }) } catch (e) { return fail(msg(e)) }
+  // L28 R29.1: Tailwind is the blank template's default; the flag stays accepted so older instructions still work.
+  if (parsed.tailwind) console.log(TAILWIND_DEFAULT_NOTE)
   const dep = resolveBrustDep({ explicit: parsed.brustDep, targetDir })
 
   try {

package/src/tailwind.ts

@@ -0,0 +1,9 @@
+// Tailwind CSS v4 in the blank template (gaps round L21, made the default by L28 R29.1): the template ships `app.css`
+// (`@import "tailwindcss"` + `@theme` tokens), the layout imports it (brust builds it and links it in <head>, L19), and
+// the two pinned dev dependencies below are in its package.json (R21.1: the app's own). `--tailwind` no longer changes
+// anything; it prints TAILWIND_DEFAULT_NOTE.
+
+/** The exact versions brust's own tests build with (the blank template's package.json pins the same). */
+export const TAILWIND_DEV_DEPS = { 'bun-plugin-tailwind': '0.1.2', tailwindcss: '4.3.3' }
+
+export const TAILWIND_DEFAULT_NOTE = 'create-app: Tailwind CSS v4 is the default; the --tailwind flag does nothing'

package/templates/blank/README.md.tmpl

@@ -6,7 +6,7 @@ A [brust](https://github.com/AssetsArt/brust) app: React components compiled ahe
 
 ```bash
 bun install
-bun run dev        # brust build routes.tsx && brust start  ->  http://127.0.0.1:1337
+bun run dev        # brust dev routes.tsx (hot reload)  ->  http://127.0.0.1:1337
 ```
 
 Scripts: `dev` (build then start), `build`, `start`, `typecheck`, `dev:cf` (build for Cloudflare Workers and run `wrangler dev`), `deploy:cf` (build and `wrangler deploy`).

package/templates/blank/_gitignore

@@ -1,3 +1,4 @@
 node_modules/
 dist/
+.brust/
 .wrangler/

package/templates/blank/app.css

@@ -0,0 +1,32 @@
+@import "tailwindcss";
+
+/* Tailwind CSS v4, CSS-first: no tailwind.config. The tokens below are the brust docs palette; each one becomes a
+   utility (bg-paper, text-ink, border-rule, ...). A *.module.css that uses @apply starts with
+   @reference "../app.css"; (see brust docs/css.md). */
+@theme {
+  --color-paper: oklch(94% 0.035 78);
+  --color-sheet: oklch(97% 0.02 82);
+  --color-ink: oklch(18% 0.035 82);
+  --color-ink-2: oklch(36% 0.045 80);
+  --color-rule: oklch(76% 0.05 77);
+  --color-amber: oklch(68% 0.145 74);
+  --color-amber-ink: oklch(46% 0.12 62);
+  --font-sans: ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
+}
+
+/* Dark mode follows the system: the same tokens, darker values, so every utility switches with them. */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-paper: oklch(20% 0.028 185);
+    --color-sheet: oklch(24% 0.032 182);
+    --color-ink: oklch(91% 0.02 82);
+    --color-ink-2: oklch(77% 0.03 82);
+    --color-rule: oklch(36% 0.032 180);
+    --color-amber: oklch(74% 0.12 78);
+    --color-amber-ink: oklch(81% 0.11 80);
+  }
+}
+
+:root {
+  color-scheme: light dark;
+}

package/templates/blank/components/Counter.tsx

@@ -4,7 +4,11 @@ import { useState } from 'react'
 export default function Counter() {
   const [count, setCount] = useState(0)
   return (
-    <button type="button" onClick={() => setCount(count + 1)}>
+    <button
+      type="button"
+      className="cursor-pointer rounded-[0.6rem] border border-amber-ink bg-amber px-[1.1rem] py-2 font-semibold text-[oklch(18%_0.035_82)] hover:brightness-106 focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-amber-ink"
+      onClick={() => setCount(count + 1)}
+    >
       count is {count}
     </button>
   )

package/templates/blank/components/Layout.tsx

@@ -1,5 +1,7 @@
-// The document root: a plain <html> with <Outlet/> for the page. Static files are served from /public.
+// The document root: a plain <html> with <Outlet/> for the page. app.css (Tailwind CSS v4) is imported here; brust
+// builds it into one hashed file and links it in <head>. Static files are served from /public.
 import { Outlet } from '@brust/core/routes'
+import '../app.css'
 
 export default function Layout() {
   return (
@@ -9,10 +11,9 @@ export default function Layout() {
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <title>brust app</title>
         <link rel="icon" href="/public/favicon.svg" />
-        <link rel="stylesheet" href="/public/app.css" />
       </head>
-      <body>
-        <main>
+      <body className="bg-paper font-sans text-ink leading-[1.55]">
+        <main className="mx-auto box-border max-w-2xl px-4 py-16">
           <Outlet />
         </main>
       </body>

package/templates/blank/package.json.tmpl

@@ -4,7 +4,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "brust build routes.tsx && brust start",
+    "dev": "brust dev routes.tsx",
     "build": "brust build routes.tsx",
     "start": "brust start",
     "typecheck": "bun check",
@@ -21,6 +21,8 @@
   "devDependencies": {
     "@types/bun": "^1.4.0",
     "@types/react": "^19.2.0",
+    "bun-plugin-tailwind": "0.1.2",
+    "tailwindcss": "4.3.3",
     "typescript": "^7.0.2",
     "wrangler": "^4.149.0"
   }

package/templates/blank/pages/HomePage.tsx

@@ -1,11 +1,35 @@
 import Counter from '../components/Counter'
 
+const link = 'font-semibold text-amber-ink underline underline-offset-[0.2em] hover:decoration-2 focus-visible:rounded focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-amber-ink'
+
 export default function HomePage() {
   return (
-    <section>
-      <h1>Hello from brust</h1>
-      <p>Edit pages/HomePage.tsx, then run bun run dev again.</p>
-      <Counter />
-    </section>
+    <>
+      <header className="flex items-center gap-[0.9rem]">
+        <svg className="flex-none" viewBox="0 0 32 32" width="44" height="44" aria-hidden="true">
+          <rect width="32" height="32" rx="8" fill="#062323" />
+          <path d="M7 19a9 9 0 0 1 18 0z" fill="#f2a516" />
+          <rect x="5" y="20.5" width="22" height="2.2" rx="1.1" fill="#f2a516" />
+          <rect x="10" y="24.6" width="12" height="2" rx="1" fill="#f2a516" opacity=".55" />
+        </svg>
+        <h1 className="m-0 text-4xl leading-[1.1] font-bold tracking-[-0.01em]">brust app</h1>
+      </header>
+      <p className="mt-4 mb-8 text-lg text-ink-2">Edit pages/HomePage.tsx and save. The page reloads.</p>
+      <section className="rounded-2xl border border-rule bg-sheet p-6">
+        <Counter />
+        <p className="mt-4 mb-0 text-[0.9375rem] text-ink-2">useState only, so this button is native: a signal in the browser, no React shipped.</p>
+      </section>
+      <nav className="mt-8 flex flex-wrap gap-x-6 gap-y-2" aria-label="Learn more">
+        <a className={link} href="https://brust.dev">
+          Docs
+        </a>
+        <a className={link} href="https://brust.dev/docs/routing">
+          Routes
+        </a>
+        <a className={link} href="https://brust.dev/docs/actions">
+          Actions
+        </a>
+      </nav>
+    </>
   )
 }

package/templates/blank/public/favicon.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><circle cx="16" cy="16" r="15" fill="#ef4444"/><rect x="1" y="14" width="30" height="4" fill="#111"/><circle cx="16" cy="16" r="5" fill="#fff" stroke="#111" stroke-width="2"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="8" fill="#062323"/><path d="M7 19a9 9 0 0 1 18 0z" fill="#f2a516"/><rect x="5" y="20.5" width="22" height="2.2" rx="1.1" fill="#f2a516"/><rect x="10" y="24.6" width="12" height="2" rx="1" fill="#f2a516" opacity=".55"/></svg>

package/templates/pokedex/README.md.tmpl

@@ -7,7 +7,7 @@ React islands, and a persistent team built with Elysia actions + SQLite and one
 
 ```bash
 bun install
-bun run dev        # brust build routes.tsx && brust start  ->  http://127.0.0.1:1337
+bun run dev        # brust dev routes.tsx (hot reload)  ->  http://127.0.0.1:1337
 ```
 
 Scripts: `dev` (build then start), `build`, `start`, `typecheck`, `snapshot` (needs network; rewrites `data/pokedex.json`).

package/templates/pokedex/package.json.tmpl

@@ -4,7 +4,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "brust build routes.tsx && brust start",
+    "dev": "brust dev routes.tsx",
     "build": "brust build routes.tsx",
     "dev:cf": "wrangler d1 migrations apply TEAM_DB --local --persist-to .wrangler/state && brust dev routes.tsx --target cloudflare",
     "deploy:cf": "brust build routes.tsx --target cloudflare && wrangler deploy -c dist/cf/wrangler.jsonc",

package/templates/blank/public/app.css

@@ -1,14 +0,0 @@
-:root { color-scheme: light dark; font-family: system-ui, sans-serif; }
-body { margin: 0; }
-main { max-width: 40rem; margin: 4rem auto; padding: 0 1.5rem; line-height: 1.5; }
-h1 { font-size: 2rem; margin: 0 0 0.5rem; }
-button {
-  cursor: pointer;
-  font: inherit;
-  padding: 0.5rem 1rem;
-  border: 1px solid currentColor;
-  border-radius: 0.5rem;
-  background: transparent;
-  color: inherit;
-}
-button:hover { opacity: 0.8; }