create-murasaki 0.0.1 → 0.0.2

package/index.mjs

@@ -1,5 +1,12 @@
 #!/usr/bin/env node
 // create-murasaki — Scaffolder for Murasaki apps.
+// Usage: npm create murasaki@latest my-app
+
+import { cp, mkdir, readFile, writeFile, stat } from 'node:fs/promises'
+import { existsSync } from 'node:fs'
+import { dirname, join, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { createInterface } from 'node:readline/promises'
 
 // ── ANSI truecolor (Oomurasaki palette) ────────────────────────────────
 const BRIGHT = '\x1b[38;2;168;85;247m'
@@ -7,10 +14,11 @@ const DEEP   = '\x1b[38;2;91;33;182m'
 const CREAM  = '\x1b[38;2;250;245;232m'
 const DARK   = '\x1b[38;2;59;7;100m'
 const DIM    = '\x1b[38;2;136;136;153m'
+const GREEN  = '\x1b[38;2;76;175;80m'
+const RED    = '\x1b[38;2;239;68;68m'
 const BOLD   = '\x1b[1m'
 const RESET  = '\x1b[0m'
 
-// Background versions for half-block compositing
 const BG_BRIGHT = '\x1b[48;2;168;85;247m'
 const BG_DEEP   = '\x1b[48;2;91;33;182m'
 const BG_CREAM  = '\x1b[48;2;250;245;232m'
@@ -19,7 +27,7 @@ const BG_DARK   = '\x1b[48;2;59;7;100m'
 const noColor = process.env.NO_COLOR || !process.stdout.isTTY
 const c = (code) => (noColor ? '' : code)
 
-// ── H4 butterfly grid (19 col × 12 row) — ichi's revised Figma version ─
+// ── H4 butterfly grid (19 col × 12 row) ────────────────────────────────
 const GRID = [
   '.....b.......b.....',
   '......b.....b......',
@@ -34,13 +42,10 @@ const GRID = [
   '....ddddd.ddddd....',
   '.....dddd.dddd.....',
 ]
-
 const FG_OF = { b: BRIGHT, d: DEEP, c: CREAM, k: DARK }
 const BG_OF = { b: BG_BRIGHT, d: BG_DEEP, c: BG_CREAM, k: BG_DARK }
 const GRID_WIDTH = GRID[0].length
 
-// Compress 2 grid rows into 1 terminal row using half-block ▀
-// (top half = fg color, bottom half = bg color)
 function renderButterflyLines() {
   const out = []
   for (let r = 0; r < GRID.length; r += 2) {
@@ -52,28 +57,17 @@ function renderButterflyLines() {
       const bCh = bot[col]
       const tFg = FG_OF[tCh]
       const bFg = FG_OF[bCh]
-
-      if (!tFg && !bFg) {
-        line += ' '
-      } else if (tFg && !bFg) {
-        line += c(tFg) + '▀' + c(RESET)
-      } else if (!tFg && bFg) {
-        line += c(bFg) + '▄' + c(RESET)
-      } else {
-        // Both halves filled
-        if (tCh === bCh) {
-          line += c(tFg) + '█' + c(RESET)
-        } else {
-          line += c(tFg) + c(BG_OF[bCh]) + '▀' + c(RESET)
-        }
-      }
+      if (!tFg && !bFg) line += ' '
+      else if (tFg && !bFg) line += c(tFg) + '▀' + c(RESET)
+      else if (!tFg && bFg) line += c(bFg) + '▄' + c(RESET)
+      else if (tCh === bCh) line += c(tFg) + '█' + c(RESET)
+      else line += c(tFg) + c(BG_OF[bCh]) + '▀' + c(RESET)
     }
     out.push(line)
   }
   return out
 }
 
-// ── figlet "Standard" wordmark ─────────────────────────────────────────
 const WORDMARK_LINES = [
   '                                      _    _ ',
   ' _ __ ___  _   _ _ __ __ _ ___  __ _ | | _(_)',
@@ -83,20 +77,16 @@ const WORDMARK_LINES = [
 ]
 
 function colorize(line, color, opts = {}) {
-  const prefix = (opts.bold ? c(BOLD) : '') + c(color)
-  return prefix + line + c(RESET)
+  return (opts.bold ? c(BOLD) : '') + c(color) + line + c(RESET)
 }
 
-// ── Render banner: butterfly LEFT, wordmark RIGHT, vertically centered ─
 function renderBanner() {
-  const bf = renderButterflyLines()  // now 6 lines
+  const bf = renderButterflyLines()
   const wm = WORDMARK_LINES.map((l) => colorize(l, BRIGHT, { bold: true }))
   const gap = '   '
-
   const total = Math.max(bf.length, wm.length)
   const wmOffset = Math.max(0, Math.floor((bf.length - wm.length) / 2))
   const blankBf = ' '.repeat(GRID_WIDTH)
-
   const lines = []
   for (let i = 0; i < total; i++) {
     const bfLine = bf[i] !== undefined ? bf[i] : blankBf
@@ -107,16 +97,76 @@ function renderBanner() {
   return lines.join('\n')
 }
 
-// ── Output ─────────────────────────────────────────────────────────────
-process.stdout.write('\n' + renderBanner() + '\n')
-process.stdout.write(`
-  ${c(DIM)}desktop apps for Next.js developers${c(RESET)}
+// ── Output helpers ─────────────────────────────────────────────────────
+const log = (s) => process.stdout.write(s + '\n')
 
-  ${c(DEEP)}docs${c(RESET)}  ${c(DIM)}https://github.com/murasakijs/murasaki${c(RESET)}
+// ── Validation ─────────────────────────────────────────────────────────
+function isValidPackageName(name) {
+  // Basic npm package name rules
+  return /^[a-z0-9][a-z0-9._-]*$/.test(name)
+}
+
+async function promptForName() {
+  const rl = createInterface({ input: process.stdin, output: process.stdout })
+  const answer = await rl.question(`  ${c(DEEP)}?${c(RESET)} ${c(BOLD)}Project name${c(RESET)} ${c(DIM)}(my-app):${c(RESET)} `)
+  rl.close()
+  return answer.trim() || 'my-app'
+}
 
-  ${c(DIM)}🌱 Pre-alpha — scaffolder not implemented yet.${c(RESET)}
-  ${c(DIM)}Follow progress on GitHub or watch this space.${c(RESET)}
+// ── Scaffold ───────────────────────────────────────────────────────────
+async function scaffold(projectName) {
+  const __dirname = dirname(fileURLToPath(import.meta.url))
+  const templateDir = join(__dirname, 'templates', 'default')
+  const targetDir = resolve(process.cwd(), projectName)
+
+  // Validate
+  if (!isValidPackageName(projectName)) {
+    log(`\n  ${c(RED)}✗${c(RESET)} Invalid project name: ${c(BOLD)}${projectName}${c(RESET)}`)
+    log(`  ${c(DIM)}must match: ${c(RESET)}${c(DIM)}/^[a-z0-9][a-z0-9._-]*$/${c(RESET)}\n`)
+    process.exit(1)
+  }
+  if (existsSync(targetDir)) {
+    log(`\n  ${c(RED)}✗${c(RESET)} Target directory already exists: ${c(BOLD)}${targetDir}${c(RESET)}\n`)
+    process.exit(1)
+  }
 
+  // Copy template
+  log(`\n  ${c(DIM)}○${c(RESET)} Creating ${c(BOLD)}${projectName}/${c(RESET)} from template...`)
+  await mkdir(targetDir, { recursive: true })
+  await cp(templateDir, targetDir, { recursive: true })
+
+  // Patch package.json name
+  const pkgPath = join(targetDir, 'package.json')
+  const pkgRaw = await readFile(pkgPath, 'utf8')
+  const pkgPatched = pkgRaw.replace(/"__PROJECT_NAME__"/, JSON.stringify(projectName))
+  await writeFile(pkgPath, pkgPatched)
+
+  log(`  ${c(GREEN)}${c(BOLD)}✓${c(RESET)} Created ${c(BOLD)}${projectName}/${c(RESET)}`)
+
+  // Next steps
+  log(`
+  ${c(DIM)}Next:${c(RESET)}
+    ${c(BRIGHT)}cd${c(RESET)} ${projectName}
+    ${c(BRIGHT)}npm install${c(RESET)}     ${c(DIM)}# or pnpm install${c(RESET)}
+    ${c(BRIGHT)}npm run dev${c(RESET)}     ${c(DIM)}# starts the desktop window with HMR${c(RESET)}
+
+  ${c(DIM)}docs${c(RESET)}  ${c(DIM)}https://github.com/murasakijs/murasaki${c(RESET)}
 `)
+}
+
+// ── Main ──────────────────────────────────────────────────────────────
+const banner = renderBanner()
+process.stdout.write('\n' + banner + '\n\n')
+process.stdout.write(`  ${c(DIM)}desktop apps for Next.js developers${c(RESET)}\n`)
+
+const argName = process.argv[2]
+const projectName = argName || (await promptForName())
+
+try {
+  await scaffold(projectName)
+} catch (err) {
+  log(`\n  ${c(RED)}✗${c(RESET)} Scaffold failed: ${err.message}\n`)
+  process.exit(1)
+}
 
 process.exit(0)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-murasaki",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Scaffolder for Murasaki apps. Run with `npm create murasaki@latest`.",
   "keywords": [
     "murasaki",

package/templates/default/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "__PROJECT_NAME__",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "murasaki dev"
+  },
+  "dependencies": {
+    "murasaki": "^0.0.1",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3"
+  }
+}

package/templates/default/src/app.tsx

@@ -0,0 +1,11 @@
+// src/app.tsx — your app. Edit me and the window reloads in place.
+
+export default function App() {
+  return (
+    <main>
+      <h1>Hello, Murasaki 🦋</h1>
+      <p>This view lives in <code>src/app.tsx</code>.</p>
+      <p className="hint">Edit the file and the window reloads instantly.</p>
+    </main>
+  )
+}

package/templates/default/src/layout.tsx

@@ -0,0 +1,54 @@
+// src/layout.tsx — wraps your app. Edit me to change the global shell.
+
+import type { ReactNode } from 'react'
+
+export default function Layout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <title>Murasaki App</title>
+        <style>{`
+          :root { color-scheme: light dark; }
+          * { box-sizing: border-box; }
+          body {
+            margin: 0;
+            min-height: 100vh;
+            display: grid;
+            place-items: center;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+            background: linear-gradient(135deg, #faf8ff 0%, #f3eafe 100%);
+            color: #1a0a33;
+          }
+          @media (prefers-color-scheme: dark) {
+            body {
+              background: linear-gradient(135deg, #0a0612 0%, #1a0a33 100%);
+              color: #faf8ff;
+            }
+          }
+          main { text-align: center; padding: 40px; }
+          h1 {
+            font-size: 96px;
+            margin: 0;
+            background: linear-gradient(135deg, #5B21B6 0%, #A855F7 100%);
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+            font-weight: 800;
+            letter-spacing: -0.04em;
+          }
+          p { margin-top: 16px; font-size: 18px; opacity: 0.7; }
+          .hint { opacity: 0.45; font-size: 14px; }
+          code {
+            font-family: 'SF Mono', Menlo, monospace;
+            background: rgba(168, 85, 247, 0.12);
+            padding: 2px 8px;
+            border-radius: 4px;
+            font-size: 0.9em;
+          }
+        `}</style>
+      </head>
+      <body>{children}</body>
+    </html>
+  )
+}