@gaonjs/cli 0.14.0 → 0.18.0

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

@@ -0,0 +1,81 @@
+// 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
+  // jobs: JetStream 스트림 대기 수 · channels: 채널별 실 접속자 수(결정 71).
+  streams?: { stream: string; waiting: number | null }[]
+  channels?: { channel: string; members: 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,40 @@
 //
 // 레이아웃은 shared 에 두지 않는다(E-5 §2.3) — 앱마다 레이아웃이 다른 것이
 // 정상이고, 공용 조각(로고·푸터 등) 만 shared/components 로 뽑는다.
+//
+// 다크 헤더 + 라이트 본문(결정 69). 스타일은 Tailwind 유틸(결정 74) — 다크
+// 헤더는 본문 테마와 무관하게 항상 어둡게 두려고 브랜드 색을 명시값으로 박는다.
+// 버전은 스캐폴드 시점 gaonjs 버전이 박힌다.
+
+// 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="flex min-h-screen flex-col bg-background text-foreground">
+    <header
+      class="flex items-center justify-between gap-4 border-b border-[#21262d] bg-[#0d1117] px-6 py-3.5 text-[#e6edf3]"
+    >
+      <a href="/" class="inline-flex items-baseline gap-2.5 text-inherit no-underline">
+        <span
+          class="inline-block rounded-md bg-gradient-to-br from-[#4f8cff] to-[#7c5cff] px-1.5 py-0.5 text-xs font-bold tracking-wide text-white"
+        >가온</span>
+        <span class="text-[0.95rem] font-bold tracking-[0.08em]">GAONJS</span>
+        <span class="text-xs tabular-nums text-[#8b949e]">v{{ version }}</span>
+      </a>
+      <nav class="flex gap-[1.1rem] text-sm">
+        <a href="https://gaonjs.dev" target="_blank" rel="noreferrer" class="text-[#c9d1d9] no-underline hover:text-white">문서</a>
+        <a href="https://github.com/gaonjs" target="_blank" rel="noreferrer" class="text-[#c9d1d9] no-underline hover:text-white">GitHub</a>
+      </nav>
     </header>
-    <slot />
-    <footer class="layout-footer">
-      <small>Powered by <a href="https://gaonjs.dev" target="_blank">Gaon</a></small>
+
+    <main class="w-full flex-1">
+      <slot />
+    </main>
+
+    <footer class="border-t border-border px-6 py-5 text-center text-muted-foreground">
+      <small>{{PROJECT_NAME}} · Powered by
+        <a href="https://gaonjs.dev" target="_blank" rel="noreferrer" class="text-[#4f8cff] no-underline">Gaon</a></small>
     </footer>
   </div>
 </template>
-
-<style scoped>
-.layout {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-}
-.layout-header,
-.layout-footer {
-  padding: 1rem;
-  background: #f6f8fa;
-  border-color: #e1e4e8;
-}
-.layout-header {
-  border-bottom: 1px solid #e1e4e8;
-}
-.layout-footer {
-  border-top: 1px solid #e1e4e8;
-  margin-top: auto;
-  text-align: center;
-  color: #6a737d;
-}
-</style>

package/dist/templates/project/apps/web/main.ts.tpl

@@ -9,6 +9,10 @@
 // import.meta.glob 으로 만든다. 심볼 출처가 코드에 그대로 보인다.
 import { createGaonApp } from 'gaonjs/vue'
 
+// 전역 스타일 — Tailwind 레이어 + 디자인 토큰(결정 74). 부수효과 import 라
+// 번들에 CSS 가 실린다. 앱마다 하나(관례 = 배치).
+import './style.css'
+
 // 페이지는 지연 로드(코드 스플리팅) — 큰 앱에서도 첫 페이지 로딩이 빠르다.
 // eager 로 바꿔도 되지만, One Way 의 기본은 지연 로드다.
 const pages = import.meta.glob('./pages/**/*.vue')

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

@@ -1,36 +1,236 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import { pageProps } from 'gaonjs/vue'
+import { useGaonHealth, type HealthDoctor } from '../../composables/useGaonHealth.js'
+import Card from '../../components/ui/Card.vue'
+import Badge from '../../components/ui/Badge.vue'
 
 // 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 StatusCard {
+  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<StatusCard[]>(() => {
+  const h = health.value
+  const web = h?.web
+  const db = h?.database
+  const hub = h?.hub
+  const doc = h?.doctor
+
+  const webCard: StatusCard = {
+    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: StatusCard = {
+    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: StatusCard = {
+    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
+          ? [
+              // jobs = 스트림 대기 수 · channels = 프레즌스 실 접속자 수(결정 71).
+              ...(hub.streams ?? []).map((s) => `${s.stream}: ${s.waiting === null ? '대기 없음' : `${s.waiting} 대기`}`),
+              `채널 접속 ${(hub.channels ?? []).reduce((n, c) => n + c.members, 0)}명`,
+            ]
+          : [hub.error ?? 'NATS 미연결']
+        : ['.env 에 NATS_URL', '실시간·비동기 백본'],
+  }
+
+  const doctorCard: StatusCard = {
+    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]
+})
+
+// 상태 → 점 색(Tailwind). idle 은 은은하게, 나머지는 신호색.
+const DOT: Record<CardStatus, string> = {
+  ok: 'bg-green-500',
+  warn: 'bg-yellow-500',
+  error: 'bg-red-500',
+  idle: 'bg-muted-foreground/40',
+}
+
+// 다음 단계 — 라이브 상태에서 완료 여부를 파생한다.
+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="mx-auto max-w-[880px] px-5 pb-16 pt-12 leading-relaxed">
+    <section class="mb-10">
+      <p class="mb-1.5 text-xs font-semibold uppercase tracking-[0.08em] text-[#7c5cff]">{{ props.title }}</p>
+      <h1 class="mb-3.5 text-[clamp(2rem,5vw,2.9rem)] font-bold leading-[1.15] tracking-tight">가온에 올라탔습니다.</h1>
+      <p class="my-1.5 text-[1.02rem] text-foreground/80">
+        이 화면은 <code class="rounded bg-muted px-1.5 py-0.5 font-mono text-[0.86em]">apps/web/pages/Home/Index.vue</code> 입니다.
+        <code class="rounded bg-muted px-1.5 py-0.5 font-mono text-[0.86em]">routes.ts</code> 의 <code class="rounded bg-muted px-1.5 py-0.5 font-mono text-[0.86em]">r.get('/', 'home#index')</code> 가 여기로 연결했습니다.
+      </p>
+      <p class="my-1.5 text-[0.95rem] text-muted-foreground">
+        아래 카드는 지금 이 서버의 <strong class="font-semibold text-foreground">실제 상태</strong>입니다 —
+        하드코딩이 아니라 <code class="rounded bg-muted px-1.5 py-0.5 font-mono text-[0.86em]">/_gaon/health</code> 를 읽어 그립니다.
+        <a :href="props.docs" target="_blank" rel="noreferrer" class="text-[#4f8cff] hover:underline">{{ props.docs }}</a>
+      </p>
+    </section>
+
+    <section class="mb-4 grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-4" aria-label="프레임웍 상태">
+      <Card v-for="c in cards" :key="c.key" class="card p-[1.15rem]">
+        <div class="mb-2.5 flex items-center gap-2">
+          <span class="h-2.5 w-2.5 rounded-full" :class="DOT[c.status]" aria-hidden="true"></span>
+          <span class="text-[0.74rem] font-bold tracking-[0.08em] text-muted-foreground">{{ c.title }}</span>
+        </div>
+        <p class="mb-2 text-[1.35rem] font-bold tabular-nums tracking-tight">{{ c.headline }}</p>
+        <ul class="m-0 list-none p-0 text-[0.82rem] text-muted-foreground">
+          <li v-for="(ln, i) in c.lines" :key="i" class="break-words py-[0.08rem]">{{ ln }}</li>
+        </ul>
+      </Card>
+    </section>
+
+    <p v-if="loading" class="my-1 mb-6 text-sm text-muted-foreground">상태 확인 중…</p>
+    <p v-else-if="!available" class="my-1 mb-6 text-sm text-muted-foreground">
+      라이브 상태는 <code class="rounded bg-muted px-1.5 py-0.5 font-mono text-[0.86em]">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>
-</template>
 
-<style scoped>
-.home {
-  max-width: 640px;
-  margin: 4rem auto;
-  padding: 0 1rem;
-  font-family: system-ui, -apple-system, sans-serif;
-  line-height: 1.6;
-}
-</style>
+    <section class="my-10">
+      <h2 class="mb-4 text-[1.15rem] font-semibold">다음 단계</h2>
+      <ul class="flex list-none flex-col gap-1.5 p-0">
+        <li
+          v-for="s in steps"
+          :key="s.label"
+          class="flex items-start gap-3 rounded-[10px] border px-3.5 py-2.5"
+          :class="s.done ? 'border-green-200 bg-green-50 dark:border-green-900 dark:bg-green-950/30' : 'border-border bg-muted/30'"
+        >
+          <span class="font-bold leading-6" :class="s.done ? 'text-green-600' : 'text-muted-foreground/60'" aria-hidden="true">{{ s.done ? '✓' : '○' }}</span>
+          <div class="min-w-0 flex-1">
+            <div class="flex flex-wrap items-center gap-2.5">
+              <span class="font-semibold">{{ s.label }}</span>
+              <code class="rounded bg-[#0d1117] px-1.5 py-0.5 font-mono text-[0.86em] text-[#e6edf3]">{{ s.cmd }}</code>
+            </div>
+            <span class="mt-0.5 block text-xs text-muted-foreground">{{ s.note }}</span>
+          </div>
+        </li>
+      </ul>
+    </section>
+
+    <section v-if="routeLines.length" class="overflow-hidden rounded-xl border">
+      <div class="border-b bg-muted px-4 py-2 font-mono text-xs text-muted-foreground">{{ routesPath }}</div>
+      <pre class="m-0 overflow-x-auto bg-[#0d1117] px-[1.15rem] py-4 text-[0.82rem] leading-[1.65] text-[#c9d1d9]"><code><span v-for="(ln, i) in routeLines" :key="i" class="block"><span>{{ ln.code }}</span><span class="text-[#8b949e]">{{ ln.comment }}</span>{{ '\n' }}</span></code></pre>
+    </section>
+
+    <p class="mt-8 text-center text-xs text-muted-foreground">
+      <Badge variant="secondary">UI 킷</Badge>
+      이 화면·카드·다음 단계는 gaon g ui-kit 로 심은 컴포넌트로 그렸습니다 — apps/web/components/ui/ 에서 소유·수정하세요.
+    </p>
+  </div>
+</template>

package/dist/templates/project/apps/web/style.css.tpl

@@ -0,0 +1,66 @@
+/* apps/web/style.css — 앱 전역 스타일 (결정 74).
+ *
+ * main.ts 가 이 파일을 import 해 번들에 싣는다. @tailwind 3줄이 Tailwind 의
+ * base/components/utilities 레이어를 펼친다(PostCSS · postcss.config.js).
+ *
+ * :root/.dark 의 CSS 변수 = 디자인 토큰(shadcn 관례). UI 킷 컴포넌트는 이
+ * 토큰(bg-primary·text-muted-foreground …)만 참조하므로, 브랜드 색을 바꾸려면
+ * 여기 한 곳만 고친다. hsl 채널 값으로 두는 이유는 tailwind.config.ts 가
+ * hsl(var(--token)) 로 감싸 투명도 유틸(bg-primary/50)까지 동작하게 하기 위함이다. */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 5.9% 10%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+  }
+
+  * {
+    border-color: hsl(var(--border));
+  }
+
+  body {
+    background-color: hsl(var(--background));
+    color: hsl(var(--foreground));
+    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
+    -webkit-font-smoothing: antialiased;
+  }
+}

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

@@ -24,6 +24,9 @@
   "devDependencies": {
     "@types/node": "^22.0.0",
     "@vitejs/plugin-vue": "^6.0.0",
+    "autoprefixer": "^10.4.0",
+    "postcss": "^8.4.0",
+    "tailwindcss": "^3.4.0",
     "typescript": "^5.9.0",
     "vite": "^7.0.0",
     "vue-tsc": "^3.3.0",

package/dist/templates/project/postcss.config.js.tpl

@@ -0,0 +1,15 @@
+// postcss.config.js — Vite 가 CSS 를 처리할 때 타는 PostCSS 파이프라인 (결정 74).
+//
+// Vite 는 프로젝트 루트에서 이 파일을 자동으로 찾아 style.css 의 @tailwind
+// 지시문을 실 유틸 클래스로 펼치고(tailwindcss), 벤더 프리픽스를 붙인다
+// (autoprefixer). gaon dev(Vite 미들웨어)·vite build 가 같은 설정을 공유한다.
+//
+// PostCSS 설정은 .js 가 표준이다 — Vite 의 postcss-load-config 가 .ts 를 바로
+// 로드하지 못한다. 프레임웍의 "TS 전용" 관례는 앱/도메인 소스에 대한 것이고,
+// 툴 설정 파일은 각 도구가 요구하는 형식을 따른다.
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/dist/templates/project/tailwind.config.ts.tpl

@@ -0,0 +1,56 @@
+// tailwind.config.ts — Tailwind CSS 설정 (결정 74).
+//
+// content 는 유틸 클래스가 등장하는 모든 소스를 가리킨다. 앱 페이지·컴포넌트와
+// shared UI 를 훑는다(자동 import 금지 관례와 무관 — 여기선 클래스 문자열 스캔).
+// darkMode: 'class' — <html class="dark"> 로 다크 테마를 켠다(토큰은 style.css).
+//
+// 색 토큰은 style.css 의 CSS 변수(hsl 채널)를 가리킨다(shadcn 관례). 컴포넌트는
+// bg-primary·text-muted-foreground 처럼 의미 토큰만 쓰고, 실제 색은 style.css 의
+// :root/.dark 한 곳에서 바꾼다 — 라이트/다크가 한 지점에서 갈린다.
+import type { Config } from 'tailwindcss'
+
+export default {
+  darkMode: 'class',
+  content: ['./apps/**/*.{vue,ts}', './shared/**/*.{vue,ts}', './apps/**/index.html'],
+  theme: {
+    extend: {
+      colors: {
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+    },
+  },
+  plugins: [],
+} satisfies Config

package/dist/templates/ui-kit/Alert.vue.tpl

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+// UI 킷 · Alert (결정 75). 인라인 알림. variant='destructive' 로 오류 톤.
+import { computed } from 'vue'
+import { cn } from '../../lib/utils.js'
+
+type Variant = 'default' | 'destructive'
+
+const props = withDefaults(defineProps<{ variant?: Variant }>(), { variant: 'default' })
+
+const VARIANTS: Record<Variant, string> = {
+  default: 'bg-background text-foreground',
+  destructive: 'border-destructive/50 text-destructive',
+}
+const classes = computed(() =>
+  cn('relative w-full rounded-lg border p-4', VARIANTS[props.variant]),
+)
+</script>
+
+<template>
+  <div role="alert" :class="classes">
+    <slot />
+  </div>
+</template>

package/dist/templates/ui-kit/AlertDescription.vue.tpl

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+// UI 킷 · AlertDescription (결정 75). 알림 본문.
+</script>
+
+<template>
+  <div class="text-sm [&_p]:leading-relaxed">
+    <slot />
+  </div>
+</template>

package/dist/templates/ui-kit/AlertTitle.vue.tpl

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+// UI 킷 · AlertTitle (결정 75). 알림 제목.
+</script>
+
+<template>
+  <h5 class="mb-1 font-medium leading-none tracking-tight">
+    <slot />
+  </h5>
+</template>

package/dist/templates/ui-kit/Badge.vue.tpl

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+// UI 킷 · Badge (결정 75). 작은 상태 라벨. variant 로 색을 고른다.
+import { computed } from 'vue'
+import { cn } from '../../lib/utils.js'
+
+type Variant = 'default' | 'secondary' | 'destructive' | 'outline'
+
+const props = withDefaults(defineProps<{ variant?: Variant }>(), { variant: 'default' })
+
+const VARIANTS: Record<Variant, string> = {
+  default: 'border-transparent bg-primary text-primary-foreground',
+  secondary: 'border-transparent bg-secondary text-secondary-foreground',
+  destructive: 'border-transparent bg-destructive text-destructive-foreground',
+  outline: 'text-foreground',
+}
+const BASE =
+  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold ' +
+  'transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2'
+
+const classes = computed(() => cn(BASE, VARIANTS[props.variant]))
+</script>
+
+<template>
+  <span :class="classes"><slot /></span>
+</template>