@gaonjs/cli 0.13.2 → 0.15.0

package/dist/templates/project/agents/frontend.md.tpl

@@ -151,6 +151,24 @@ Nuxt 식 자동 import 는 넣지 않는다. 모든 컴포넌트·컴포저블
 import 한다. `gaon doctor` 의 **no-auto-import** 검사가 자동 import
 설정을 잡는다.
 
+### 7. 랜딩·라이브 헬스 (결정 69 · 70)
+
+`gaon new` 첫 화면(`apps/web/pages/Home/Index.vue`)은 라이브 상태 랜딩이다 — 다크
+헤더 레이아웃(`layouts/Default.vue`) + 실 상태 카드(WEB·DATABASE·HUB·DOCTOR) + 동적
+다음 단계 + 실 `routes.ts` 코드 블록. 상태는 **하드코딩하지 않는다** — dev 전용
+엔드포인트 `/_gaon/health` 를 컴포저블(`composables/useGaonHealth.ts`)로 읽어 바인딩한다.
+이 엔드포인트는 `gaon dev` 에서만 등록되고(운영 빌드엔 없음), 404 면 컴포저블이
+`available=false` 로 우아하게 degrade 한다.
+
+- **스타일은 SFC `<style scoped>` + CSS 변수** — 스캐폴드에 Tailwind 를 넣지
+  않는다(의존성 경량 · 결정 69). 유틸 클래스 대신 scoped CSS 로 캡슐화.
+- **auth 링크는 수동(결정 70)** — `gaon g auth` 는 auth 페이지·라우트만 신설하고
+  랜딩·레이아웃 nav 를 편집하지 않는다. 헤더에 로그인 링크를 두려면 `Default.vue`
+  의 nav 에 `<a href="/session/new">로그인</a>` 을 직접 추가한다(Rails 관례).
+- **auth 페이지 경로 = `pages/Auth/`(PascalCase)** — `gaon g auth` 는 `Auth/Login.vue`
+  ·`Auth/Signup.vue` 를 내고 컨트롤러는 `this.render('Auth/Login')` 로 부른다.
+  소문자 `auth/` 는 doctor page-filename 이 잡는다(결정 32·46).
+
 ## 정본 예시
 
 ```vue
@@ -203,4 +221,6 @@ async function runSearch(q: string) {
 | 결정 25 (E-5) | 컴포저블·레이아웃 관례 · 프론트 로직 배치 3규칙 · 자동 import 금지 |
 | 결정 37 | bigint PK 컨트롤러 `String()` 정규화 |
 | 결정 46 | doctor page-filename(페이지 PascalCase)·model/column 검사 3종 |
+| 결정 69 | 랜딩 정본(라이브 헬스 카드 · 다크 헤더 레이아웃 · Tailwind 미편입 · scoped CSS) |
+| 결정 70 | auth 통합 = 수동(`gaon g auth` 는 랜딩·nav 를 안 건드림 · Rails 관례) |
 | E-3 §C | 타입드 `api()` 클라이언트 (routes.d.ts 브리지 재사용) |

package/dist/templates/project/apps/web/composables/useGaonHealth.ts.tpl

@@ -0,0 +1,79 @@
+// useGaonHealth — 앱 전용 컴포저블(errata E-5 §2.1).
+// gaon dev 가 띄운 서버의 dev 전용 진단 엔드포인트(/_gaon/health)를 읽어
+// 랜딩(Home/Index.vue)의 라이브 상태 카드에 바인딩한다.
+//
+// dev-only: 이 엔드포인트는 gaon dev(= gaon serve --dev)에서만 등록된다.
+// 운영 빌드에는 없다 — 404 면 available=false 로 우아하게 degrade하고(카드가
+// "개발 서버에서만" 로 표시), 에러를 던지지 않는다.
+import { ref, onMounted } from 'vue'
+
+// 서버 응답(GaonHealth) 의 앱 쪽 미러. 서버 타입을 import 하지 않고(앱은 프레임웍
+// 내부 타입에 의존하지 않는다) 랜딩이 쓰는 필드만 선언한다.
+export interface HealthWeb {
+  host: string
+  port: number
+  node: string
+  gaonjs: string
+  apps: { name: string; prefix: string }[]
+}
+export interface HealthDatabase {
+  configured: boolean
+  connected?: boolean
+  adapter?: string
+  tables?: number
+  tableNames?: string[]
+  migrations?: number
+  error?: string
+}
+export interface HealthHub {
+  configured: boolean
+  connected?: boolean
+  streams?: { stream: string; waiting: number | null }[]
+  error?: string
+}
+export interface HealthDoctor {
+  checks: number
+  passed: number
+  warnings: number
+  errors: number
+  level: 'pass' | 'warn' | 'error'
+  fatal?: string
+}
+export interface GaonHealth {
+  ok: boolean
+  env: string
+  web: HealthWeb
+  database: HealthDatabase
+  hub: HealthHub
+  doctor: HealthDoctor
+  routes: { path: string; source: string } | null
+}
+
+export function useGaonHealth() {
+  const health = ref<GaonHealth | null>(null)
+  const loading = ref(true)
+  // 엔드포인트가 있는가(= dev 서버인가). 운영 빌드에선 false 로 남는다.
+  const available = ref(false)
+
+  async function load(): Promise<void> {
+    loading.value = true
+    try {
+      const res = await fetch('/_gaon/health', { headers: { Accept: 'application/json' } })
+      if (!res.ok) {
+        available.value = false
+        return
+      }
+      health.value = (await res.json()) as GaonHealth
+      available.value = true
+    } catch {
+      // 네트워크·파싱 실패 = 진단 불가. 랜딩은 정적 안내로 degrade.
+      available.value = false
+    } finally {
+      loading.value = false
+    }
+  }
+
+  onMounted(load)
+
+  return { health, loading, available, reload: load }
+}

package/dist/templates/project/apps/web/layouts/Default.vue.tpl

@@ -5,39 +5,115 @@
 //
 // 레이아웃은 shared 에 두지 않는다(E-5 §2.3) — 앱마다 레이아웃이 다른 것이
 // 정상이고, 공용 조각(로고·푸터 등) 만 shared/components 로 뽑는다.
+//
+// 다크 헤더 + 라이트 본문(결정 69). 버전은 스캐폴드 시점 gaonjs 버전이 박힌다.
+//
+// 결정 70(auth = 수동): gaon g auth 는 이 nav 를 건드리지 않는다. 로그인 링크를
+// 헤더에 두려면 아래 nav 에 <a href="/session/new">로그인</a> 을 직접 추가한다.
+
+// package.json 의 gaonjs 의존 범위(예: ^0.9.2)에서 캐럿·틸드를 벗겨 표기.
+const version = '{{GAONJS_VERSION}}'.replace(/^[\^~]/, '')
 </script>
 
 <template>
-  <div class="layout">
-    <header class="layout-header">
-      <strong>{{PROJECT_NAME}}</strong>
+  <div class="gaon-layout">
+    <header class="gaon-header">
+      <a class="gaon-brand" href="/">
+        <span class="gaon-brand-mark">가온</span>
+        <span class="gaon-brand-word">GAONJS</span>
+        <span class="gaon-brand-ver">v{{ version }}</span>
+      </a>
+      <nav class="gaon-nav">
+        <a href="https://gaonjs.dev" target="_blank" rel="noreferrer">문서</a>
+        <a href="https://github.com/gaonjs" target="_blank" rel="noreferrer">GitHub</a>
+      </nav>
     </header>
-    <slot />
-    <footer class="layout-footer">
-      <small>Powered by <a href="https://gaonjs.dev" target="_blank">Gaon</a></small>
+
+    <main class="gaon-main">
+      <slot />
+    </main>
+
+    <footer class="gaon-footer">
+      <small>{{PROJECT_NAME}} · Powered by
+        <a href="https://gaonjs.dev" target="_blank" rel="noreferrer">Gaon</a></small>
     </footer>
   </div>
 </template>
 
 <style scoped>
-.layout {
+.gaon-layout {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
+  background: #ffffff;
+  color: #1b1f24;
+  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
+}
+
+/* 다크 헤더 — 본문 테마와 무관하게 브랜드 바는 어둡게. */
+.gaon-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.85rem 1.5rem;
+  background: #0d1117;
+  color: #e6edf3;
+  border-bottom: 1px solid #21262d;
+}
+.gaon-brand {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 0.55rem;
+  text-decoration: none;
+  color: inherit;
 }
-.layout-header,
-.layout-footer {
-  padding: 1rem;
-  background: #f6f8fa;
-  border-color: #e1e4e8;
+.gaon-brand-mark {
+  display: inline-block;
+  padding: 0.15rem 0.45rem;
+  border-radius: 6px;
+  background: linear-gradient(135deg, #4f8cff, #7c5cff);
+  color: #fff;
+  font-weight: 700;
+  font-size: 0.8rem;
+  letter-spacing: 0.02em;
 }
-.layout-header {
-  border-bottom: 1px solid #e1e4e8;
+.gaon-brand-word {
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  font-size: 0.95rem;
 }
-.layout-footer {
-  border-top: 1px solid #e1e4e8;
-  margin-top: auto;
+.gaon-brand-ver {
+  font-size: 0.72rem;
+  color: #8b949e;
+  font-variant-numeric: tabular-nums;
+}
+.gaon-nav {
+  display: flex;
+  gap: 1.1rem;
+  font-size: 0.85rem;
+}
+.gaon-nav a {
+  color: #c9d1d9;
+  text-decoration: none;
+}
+.gaon-nav a:hover {
+  color: #fff;
+}
+
+.gaon-main {
+  flex: 1;
+  width: 100%;
+}
+
+.gaon-footer {
+  padding: 1.25rem 1.5rem;
   text-align: center;
   color: #6a737d;
+  border-top: 1px solid #eaecef;
+}
+.gaon-footer a {
+  color: #4f8cff;
+  text-decoration: none;
 }
 </style>

package/dist/templates/project/apps/web/pages/Home/Index.vue.tpl

@@ -1,36 +1,419 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import { pageProps } from 'gaonjs/vue'
+import { useGaonHealth, type HealthDoctor } from '../../composables/useGaonHealth.js'
 
 // home#index 의 render props — Serialized<> 로 넘어온다(§6.2).
 // 라우트 키는 .gaon/routes.d.ts 가 유효한 값을 알려준다.
 const props = pageProps<'web:home#index'>()
+
+// 라이브 상태(dev 전용 /_gaon/health). 운영 빌드에선 available=false 로 degrade.
+const { health, loading, available } = useGaonHealth()
+
+type CardStatus = 'ok' | 'warn' | 'error' | 'idle'
+interface Card {
+  readonly key: string
+  readonly title: string
+  readonly status: CardStatus
+  readonly headline: string
+  readonly lines: readonly string[]
+}
+
+function doctorNote(d: HealthDoctor | undefined): string {
+  if (!d) return '—'
+  if (d.fatal) return `검사 불가 (${d.fatal})`
+  return `${d.passed} 통과 · ${d.warnings} 경고 · ${d.errors} 오류`
+}
+
+const cards = computed<Card[]>(() => {
+  const h = health.value
+  const web = h?.web
+  const db = h?.database
+  const hub = h?.hub
+  const doc = h?.doctor
+
+  const webCard: Card = {
+    key: 'web',
+    title: 'WEB',
+    status: available.value ? 'ok' : 'idle',
+    headline: web ? `:${web.port}` : '대기',
+    lines: web
+      ? [`Node ${web.node}`, `gaonjs v${web.gaonjs}`, `앱 ${web.apps.map((a) => a.name).join(', ')}`]
+      : ['개발 서버에서만'],
+  }
+
+  const dbCard: Card = {
+    key: 'database',
+    title: 'DATABASE',
+    status: !db || !db.configured ? 'idle' : db.connected ? 'ok' : 'error',
+    headline: !db || !db.configured ? '미설정' : db.connected ? '연결됨' : '미연결',
+    lines:
+      db && db.configured
+        ? db.connected
+          ? [`${db.adapter ?? 'postgres'}`, `테이블 ${db.tables ?? 0}개`, `마이그레이션 ${db.migrations ?? 0}건`]
+          : [db.error ?? '연결 실패', '.env DATABASE_URL 확인']
+        : ['.env 에 DATABASE_URL', 'gaon.config.ts 에서 켜기'],
+  }
+
+  const hubCard: Card = {
+    key: 'hub',
+    title: 'HUB',
+    status: !hub || !hub.configured ? 'idle' : hub.connected ? 'ok' : 'error',
+    headline: !hub || !hub.configured ? '미설정' : hub.connected ? '연결됨' : '미연결',
+    lines:
+      hub && hub.configured
+        ? hub.connected
+          ? (hub.streams ?? []).map((s) => `${s.stream}: ${s.waiting === null ? '대기 없음' : `${s.waiting} 대기`}`)
+          : [hub.error ?? 'NATS 미연결']
+        : ['.env 에 NATS_URL', '실시간·비동기 백본'],
+  }
+
+  const doctorCard: Card = {
+    key: 'doctor',
+    title: 'DOCTOR',
+    status: !doc ? 'idle' : doc.level === 'pass' ? 'ok' : doc.level === 'warn' ? 'warn' : 'error',
+    headline: !doc
+      ? '대기'
+      : doc.fatal
+        ? '검사 불가'
+        : doc.errors > 0
+          ? `오류 ${doc.errors}`
+          : doc.warnings > 0
+            ? `경고 ${doc.warnings}`
+            : '통과',
+    lines: [doctorNote(doc), 'gaon check 로 재실행'],
+  }
+
+  return [webCard, dbCard, hubCard, doctorCard]
+})
+
+// 다음 단계 — 라이브 상태에서 완료 여부를 파생한다.
+interface Step {
+  readonly label: string
+  readonly cmd: string
+  readonly done: boolean
+  readonly note: string
+}
+const steps = computed<Step[]>(() => {
+  const h = health.value
+  const db = h?.database
+  const configured = !!(db && db.configured)
+  const connected = !!(db && db.configured && db.connected)
+  const tables = configured ? db!.tables ?? 0 : 0
+  return [
+    {
+      label: '개발 스택 부팅',
+      cmd: 'gaon dev',
+      done: available.value,
+      note: 'Docker · .gaon 타입 브리지 · 서버 · watch',
+    },
+    {
+      label: '데이터베이스 연결',
+      cmd: configured ? 'gaon db migrate' : '.env: DATABASE_URL',
+      done: connected,
+      note: configured ? (connected ? '연결됨' : '설정됨 · 미연결') : '미설정',
+    },
+    {
+      label: '첫 모델 만들기',
+      cmd: 'gaon g model Post',
+      done: tables > 0,
+      note: tables > 0 ? `테이블 ${tables}개` : '스키마 + 모델 (E-4)',
+    },
+    {
+      label: '인증 배터리',
+      cmd: 'gaon g auth',
+      done: false,
+      note: '가입 · 로그인 · 세션 (수동 통합 · 결정 70)',
+    },
+    {
+      label: '검사 통과',
+      cmd: 'gaon check',
+      done: h?.doctor.level === 'pass',
+      note: doctorNote(h?.doctor),
+    },
+  ]
+})
+
+// routes.ts 코드 블록 — 라이브 원문을 줄 단위로 나누고 주석만 가볍게 색을 준다.
+// v-html 없이(텍스트 보간만) 안전하게 그린다. 의존성 없는 최소 하이라이트.
+interface CodeLine {
+  readonly code: string
+  readonly comment: string
+}
+function splitComment(line: string): CodeLine {
+  const m = line.match(/\s\/\/.*$/)
+  if (m && m.index !== undefined) return { code: line.slice(0, m.index), comment: line.slice(m.index) }
+  if (line.trimStart().startsWith('//')) return { code: '', comment: line }
+  return { code: line, comment: '' }
+}
+const routesPath = computed(() => health.value?.routes?.path ?? 'apps/web/routes.ts')
+const routeLines = computed<CodeLine[]>(() => {
+  const src = health.value?.routes?.source
+  if (!src) return []
+  return src.replace(/\n+$/, '').split('\n').map(splitComment)
+})
 </script>
 
 <template>
-  <main class="home">
-    <h1>{{ props.title }}</h1>
-    <p>Gaon 프레임웍이 방금 이 앱을 만들었습니다.</p>
-    <p>
-      문서: <a :href="props.docs" target="_blank">{{ props.docs }}</a>
+  <div class="landing">
+    <section class="hero">
+      <p class="eyebrow">{{ props.title }}</p>
+      <h1>가온에 올라탔습니다.</h1>
+      <p class="lede">
+        이 화면은 <code>apps/web/pages/Home/Index.vue</code> 입니다.
+        <code>routes.ts</code> 의 <code>r.get('/', 'home#index')</code> 가 여기로 연결했습니다.
+      </p>
+      <p class="lede sub">
+        아래 카드는 지금 이 서버의 <strong>실제 상태</strong>입니다 —
+        하드코딩이 아니라 <code>/_gaon/health</code> 를 읽어 그립니다.
+        <a :href="props.docs" target="_blank" rel="noreferrer">{{ props.docs }}</a>
+      </p>
+    </section>
+
+    <section class="cards" aria-label="프레임웍 상태">
+      <article v-for="c in cards" :key="c.key" class="card" :class="`is-${c.status}`">
+        <header class="card-top">
+          <span class="dot" :class="`dot-${c.status}`" aria-hidden="true"></span>
+          <span class="card-title">{{ c.title }}</span>
+        </header>
+        <p class="card-headline">{{ c.headline }}</p>
+        <ul class="card-lines">
+          <li v-for="(ln, i) in c.lines" :key="i">{{ ln }}</li>
+        </ul>
+      </article>
+    </section>
+
+    <p v-if="loading" class="hint">상태 확인 중…</p>
+    <p v-else-if="!available" class="hint">
+      라이브 상태는 <code>gaon dev</code> 개발 서버에서만 보입니다(운영 빌드엔 진단 엔드포인트가 없습니다).
     </p>
-    <hr />
-    <h2>다음 단계</h2>
-    <ol>
-      <li><code>gaon g auth</code> — 인증 스캐폴드 생성 (회원가입·로그인·세션)</li>
-      <li><code>gaon g model Post</code> — 모델 스캐폴드 (스키마 + 모델 · E-4)</li>
-      <li><code>gaon g controller posts</code> — 컨트롤러 스캐폴드</li>
-      <li><code>gaon g page Posts/Index</code> — Vue 페이지 (Inertia SPA)</li>
-      <li><code>gaon dev</code> — Docker 자동 기동 · 타입 브리지 · watch</li>
-    </ol>
-  </main>
+
+    <section class="next">
+      <h2>다음 단계</h2>
+      <ul class="steps">
+        <li v-for="s in steps" :key="s.label" :class="{ done: s.done }">
+          <span class="check" aria-hidden="true">{{ s.done ? '✓' : '○' }}</span>
+          <div class="step-body">
+            <div class="step-head">
+              <span class="step-label">{{ s.label }}</span>
+              <code class="step-cmd">{{ s.cmd }}</code>
+            </div>
+            <span class="step-note">{{ s.note }}</span>
+          </div>
+        </li>
+      </ul>
+    </section>
+
+    <section v-if="routeLines.length" class="code">
+      <div class="code-head">{{ routesPath }}</div>
+      <pre class="code-body"><code><span v-for="(ln, i) in routeLines" :key="i" class="code-line"><span class="c-code">{{ ln.code }}</span><span class="c-comment">{{ ln.comment }}</span>{{ '\n' }}</span></code></pre>
+    </section>
+  </div>
 </template>
 
 <style scoped>
-.home {
-  max-width: 640px;
-  margin: 4rem auto;
-  padding: 0 1rem;
-  font-family: system-ui, -apple-system, sans-serif;
+.landing {
+  max-width: 880px;
+  margin: 0 auto;
+  padding: 3rem 1.25rem 4rem;
+  color: #1b1f24;
   line-height: 1.6;
 }
+
+.hero {
+  margin-bottom: 2.5rem;
+}
+.eyebrow {
+  margin: 0 0 0.4rem;
+  font-size: 0.8rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #7c5cff;
+}
+.hero h1 {
+  margin: 0 0 0.9rem;
+  font-size: clamp(2rem, 5vw, 2.9rem);
+  line-height: 1.15;
+  letter-spacing: -0.02em;
+}
+.lede {
+  margin: 0.35rem 0;
+  color: #3a424c;
+  font-size: 1.02rem;
+}
+.lede.sub {
+  color: #57606a;
+  font-size: 0.95rem;
+}
+.lede a {
+  color: #4f8cff;
+}
+code {
+  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
+  font-size: 0.86em;
+  background: #f2f4f7;
+  padding: 0.1rem 0.35rem;
+  border-radius: 5px;
+}
+
+.cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+.card {
+  border: 1px solid #e4e7eb;
+  border-radius: 12px;
+  padding: 1.1rem 1.15rem;
+  background: #fff;
+  box-shadow: 0 1px 2px rgba(16, 22, 26, 0.04);
+}
+.card-top {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.6rem;
+}
+.card-title {
+  font-size: 0.74rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  color: #6a737d;
+}
+.dot {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  background: #c2c8cf;
+}
+.dot-ok {
+  background: #2da44e;
+  box-shadow: 0 0 0 3px rgba(45, 164, 78, 0.15);
+}
+.dot-warn {
+  background: #d4a72c;
+  box-shadow: 0 0 0 3px rgba(212, 167, 44, 0.15);
+}
+.dot-error {
+  background: #cf222e;
+  box-shadow: 0 0 0 3px rgba(207, 34, 46, 0.15);
+}
+.card-headline {
+  margin: 0 0 0.5rem;
+  font-size: 1.35rem;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  font-variant-numeric: tabular-nums;
+}
+.card-lines {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-size: 0.82rem;
+  color: #57606a;
+}
+.card-lines li {
+  padding: 0.08rem 0;
+  overflow-wrap: anywhere;
+}
+
+.hint {
+  margin: 0.25rem 0 1.5rem;
+  font-size: 0.85rem;
+  color: #6a737d;
+}
+
+.next {
+  margin: 2.5rem 0;
+}
+.next h2 {
+  font-size: 1.15rem;
+  margin: 0 0 1rem;
+}
+.steps {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+.steps li {
+  display: flex;
+  gap: 0.75rem;
+  align-items: flex-start;
+  padding: 0.65rem 0.85rem;
+  border: 1px solid #eaecef;
+  border-radius: 10px;
+  background: #fbfcfd;
+}
+.steps li.done {
+  border-color: #cbe7d3;
+  background: #f3faf5;
+}
+.check {
+  color: #b0b7bf;
+  font-weight: 700;
+  line-height: 1.5;
+}
+.steps li.done .check {
+  color: #2da44e;
+}
+.step-body {
+  flex: 1;
+  min-width: 0;
+}
+.step-head {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  flex-wrap: wrap;
+}
+.step-label {
+  font-weight: 600;
+}
+.step-cmd {
+  background: #0d1117;
+  color: #e6edf3;
+}
+.step-note {
+  display: block;
+  font-size: 0.8rem;
+  color: #6a737d;
+  margin-top: 0.15rem;
+}
+
+.code {
+  border: 1px solid #e4e7eb;
+  border-radius: 12px;
+  overflow: hidden;
+}
+.code-head {
+  padding: 0.55rem 1rem;
+  background: #f6f8fa;
+  border-bottom: 1px solid #e4e7eb;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.78rem;
+  color: #57606a;
+}
+.code-body {
+  margin: 0;
+  padding: 1rem 1.15rem;
+  overflow-x: auto;
+  background: #0d1117;
+  color: #c9d1d9;
+  font-size: 0.82rem;
+  line-height: 1.65;
+}
+.code-body code {
+  background: none;
+  padding: 0;
+  font-size: inherit;
+  color: inherit;
+}
+.c-comment {
+  color: #8b949e;
+}
 </style>

package/dist/templates/project/package.json.tpl

@@ -8,6 +8,7 @@
   },
   "scripts": {
     "dev": "gaon dev",
+    "build": "vite build",
     "serve": "gaon serve",
     "work": "gaon work",
     "hub": "gaon hub",