@gaonjs/cli 0.15.0 → 0.18.0

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

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+// UI 킷 · CardContent (결정 75). 카드 본문. 헤더가 있으면 상단 패딩을 뺀다.
+</script>
+
+<template>
+  <div class="p-6 pt-0">
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+// UI 킷 · CardDescription (결정 75). 카드 부제·설명.
+</script>
+
+<template>
+  <p class="text-sm text-muted-foreground">
+    <slot />
+  </p>
+</template>

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

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+// UI 킷 · CardFooter (결정 75). 카드 하단 액션 영역.
+</script>
+
+<template>
+  <div class="flex items-center p-6 pt-0">
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+// UI 킷 · CardHeader (결정 75). CardTitle·CardDescription 을 감싼다.
+</script>
+
+<template>
+  <div class="flex flex-col space-y-1.5 p-6">
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+// UI 킷 · CardTitle (결정 75). 카드 제목.
+</script>
+
+<template>
+  <h3 class="text-lg font-semibold leading-none tracking-tight">
+    <slot />
+  </h3>
+</template>

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

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+// UI 킷 · Dialog (결정 75). v-model:open 으로 여닫는 모달. reka-ui 등 헤드리스
+// 라이브러리를 끌어오지 않고 Teleport + Transition 으로 자작한다 — 백드롭 클릭·
+// Escape 로 닫히고 role=dialog·aria-modal 로 접근성 기본을 지킨다.
+import { watch, onBeforeUnmount } from 'vue'
+
+const props = defineProps<{ open: boolean }>()
+const emit = defineEmits<{ 'update:open': [value: boolean] }>()
+
+function close(): void {
+  emit('update:open', false)
+}
+function onKey(e: KeyboardEvent): void {
+  if (e.key === 'Escape') close()
+}
+
+// 열려 있는 동안만 전역 Escape 를 듣는다(문서 어디에 포커스가 있든 닫히게).
+watch(
+  () => props.open,
+  (isOpen) => {
+    if (typeof window === 'undefined') return
+    if (isOpen) window.addEventListener('keydown', onKey)
+    else window.removeEventListener('keydown', onKey)
+  },
+)
+onBeforeUnmount(() => {
+  if (typeof window !== 'undefined') window.removeEventListener('keydown', onKey)
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition
+      enter-active-class="transition-opacity duration-200 ease-out"
+      enter-from-class="opacity-0"
+      leave-active-class="transition-opacity duration-200 ease-in"
+      leave-to-class="opacity-0"
+    >
+      <div v-if="open" class="fixed inset-0 z-50 flex items-center justify-center p-4">
+        <div class="absolute inset-0 bg-black/80" @click="close" />
+        <Transition
+          appear
+          enter-active-class="transition-all duration-200 ease-out"
+          enter-from-class="opacity-0 scale-95"
+          leave-active-class="transition-all duration-200 ease-in"
+          leave-to-class="opacity-0 scale-95"
+        >
+          <div
+            v-if="open"
+            role="dialog"
+            aria-modal="true"
+            class="relative z-50 w-full max-w-lg rounded-lg border bg-background p-6 shadow-lg"
+          >
+            <slot />
+            <button
+              type="button"
+              aria-label="닫기"
+              class="absolute right-4 top-4 rounded-sm text-muted-foreground opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              @click="close"
+            >
+              ✕
+            </button>
+          </div>
+        </Transition>
+      </div>
+    </Transition>
+  </Teleport>
+</template>

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

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+// UI 킷 · Form (결정 75 · 결정 64). gaonjs 의 useForm 과 짝을 이루는 얇은 <form>
+// 래퍼다. 제출은 @submit 이벤트로 넘겨 useForm 의 post/put/delete 를 호출한다 —
+// fetch() 로 폼을 만들지 않는다(결정 64). vee-validate 등 외부 폼 라이브러리를
+// 끌어오지 않는다(검증·상태는 useForm 이 갖는다).
+const emit = defineEmits<{ submit: [] }>()
+</script>
+
+<template>
+  <form class="space-y-4" @submit.prevent="emit('submit')">
+    <slot />
+  </form>
+</template>

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

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+// UI 킷 · FormField (결정 75). 라벨 + 컨트롤(슬롯) + 검증 메시지를 묶는 그룹.
+// label/error 는 문자열로 받는다 — useForm 의 form.errors.<field> 를 :error 로 넘긴다.
+import Label from './Label.vue'
+import FormMessage from './FormMessage.vue'
+
+defineProps<{ label?: string; error?: string }>()
+</script>
+
+<template>
+  <div class="space-y-1.5">
+    <Label v-if="label">{{ label }}</Label>
+    <slot />
+    <FormMessage :message="error" />
+  </div>
+</template>

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

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+// UI 킷 · FormMessage (결정 75). 필드 검증 메시지. message 가 있을 때만 그린다.
+// useForm 의 form.errors.<field> 를 그대로 넘기면 된다.
+defineProps<{ message?: string }>()
+</script>
+
+<template>
+  <p v-if="message" class="text-sm font-medium text-destructive">{{ message }}</p>
+</template>

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

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+// UI 킷 · Input (결정 75). v-model 지원. type·placeholder 등은 폴스루로 전달된다.
+defineProps<{ modelValue?: string | number }>()
+const emit = defineEmits<{ 'update:modelValue': [value: string] }>()
+
+function onInput(e: Event): void {
+  emit('update:modelValue', (e.target as HTMLInputElement).value)
+}
+</script>
+
+<template>
+  <input
+    :value="modelValue"
+    :class="[
+      'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm',
+      'ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none',
+      'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+      'disabled:cursor-not-allowed disabled:opacity-50',
+    ]"
+    @input="onInput"
+  />
+</template>

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

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+// UI 킷 · Label (결정 75). for 속성은 폴스루로 전달한다(<Label for="email">).
+</script>
+
+<template>
+  <label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+    <slot />
+  </label>
+</template>

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

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+// UI 킷 · Sheet (결정 75). 화면 가장자리에서 미끄러져 나오는 패널(모바일 메뉴·
+// 필터 등). Dialog 와 같은 자작 방식 — Teleport + Transition, 백드롭/Escape 로 닫힘.
+import { watch, onBeforeUnmount, computed } from 'vue'
+
+const props = withDefaults(defineProps<{ open: boolean; side?: 'left' | 'right' }>(), {
+  side: 'right',
+})
+const emit = defineEmits<{ 'update:open': [value: boolean] }>()
+
+function close(): void {
+  emit('update:open', false)
+}
+function onKey(e: KeyboardEvent): void {
+  if (e.key === 'Escape') close()
+}
+watch(
+  () => props.open,
+  (isOpen) => {
+    if (typeof window === 'undefined') return
+    if (isOpen) window.addEventListener('keydown', onKey)
+    else window.removeEventListener('keydown', onKey)
+  },
+)
+onBeforeUnmount(() => {
+  if (typeof window !== 'undefined') window.removeEventListener('keydown', onKey)
+})
+
+const sideClass = computed(() => (props.side === 'left' ? 'left-0' : 'right-0'))
+const hiddenClass = computed(() => (props.side === 'left' ? '-translate-x-full' : 'translate-x-full'))
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition
+      enter-active-class="transition-opacity duration-300 ease-out"
+      enter-from-class="opacity-0"
+      leave-active-class="transition-opacity duration-300 ease-in"
+      leave-to-class="opacity-0"
+    >
+      <div v-if="open" class="fixed inset-0 z-50">
+        <div class="absolute inset-0 bg-black/80" @click="close" />
+        <Transition
+          appear
+          enter-active-class="transition-transform duration-300 ease-out"
+          :enter-from-class="hiddenClass"
+          leave-active-class="transition-transform duration-300 ease-in"
+          :leave-to-class="hiddenClass"
+        >
+          <div
+            v-if="open"
+            role="dialog"
+            aria-modal="true"
+            :class="[
+              'absolute top-0 z-50 h-full w-3/4 max-w-sm border bg-background p-6 shadow-lg',
+              sideClass,
+            ]"
+          >
+            <slot />
+            <button
+              type="button"
+              aria-label="닫기"
+              class="absolute right-4 top-4 rounded-sm text-muted-foreground opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              @click="close"
+            >
+              ✕
+            </button>
+          </div>
+        </Transition>
+      </div>
+    </Transition>
+  </Teleport>
+</template>

package/dist/templates/ui-kit/utils.ts.tpl

@@ -0,0 +1,26 @@
+// apps/<app>/lib/utils.ts — UI 킷 공용 헬퍼 (결정 75 · shadcn 참조 · 복사-소유).
+//
+// UI 킷은 외부 런타임 의존 없이 자기완결이다(gaon g ui-kit 로 프로젝트에
+// 복사된 뒤엔 이 파일도 여러분 코드다 — 자유롭게 고친다).
+
+export type ClassValue = string | false | null | undefined | ClassValue[]
+
+/**
+ * 조건부 클래스 병합. `cn('base', active && 'on', extra)` 처럼 falsy 를 걸러
+ * 공백으로 잇는다. clsx/tailwind-merge 를 끌어오지 않는 자작 최소 구현 —
+ * 충돌 클래스 자동 해소(p-2 vs p-4)는 하지 않는다. 오버라이드가 자주 필요하면
+ * tailwind-merge 를 설치해 이 함수만 교체한다.
+ */
+export function cn(...inputs: ClassValue[]): string {
+  const out: string[] = []
+  const walk = (v: ClassValue): void => {
+    if (v === false || v == null || v === '') return
+    if (Array.isArray(v)) {
+      for (const x of v) walk(x)
+      return
+    }
+    out.push(v)
+  }
+  for (const i of inputs) walk(i)
+  return out.join(' ').replace(/\s+/g, ' ').trim()
+}

package/dist/uikit.d.ts

@@ -0,0 +1,28 @@
+export interface UiKitScaffoldOptions {
+    /** 대상 앱(apps/<app>). 기본 'web'. */
+    readonly app?: string;
+}
+/** 생성할 파일 하나 — 경로는 프로젝트 루트 기준. */
+export interface UiKitScaffoldFile {
+    readonly path: string;
+    readonly contents: string;
+}
+export interface UiKitScaffoldResult {
+    readonly created: string[];
+    readonly skipped: string[];
+}
+/** UI 킷 전체가 생성하는 파일 목록. */
+export declare function uiKitScaffoldFiles(opts?: UiKitScaffoldOptions): UiKitScaffoldFile[];
+/** `gaon g auth` 가 필요로 하는 UI 킷 최소 세트 파일 목록. */
+export declare function authUiKitFiles(app?: string): UiKitScaffoldFile[];
+/** 파일 목록을 디스크에 쓴다. 기존 파일은 덮어쓰지 않고 skip(멱등 · 복사-소유). */
+export declare function writeUiKitFiles(cwd: string, files: readonly UiKitScaffoldFile[]): UiKitScaffoldResult;
+/** `gaon g ui-kit` — UI 킷 전체를 쓴다. */
+export declare function writeUiKitScaffold(cwd: string, opts?: UiKitScaffoldOptions): UiKitScaffoldResult;
+export interface GenerateUiKitOptions {
+    readonly cwd?: string;
+    readonly app?: string;
+    readonly json?: boolean;
+}
+/** `gaon g ui-kit` 진입점. exitCode 반환(항상 0 — 멱등 스킵은 실패가 아니다). */
+export declare function runGenerateUiKitCommand(opts?: GenerateUiKitOptions): number;

package/dist/uikit.js

@@ -0,0 +1,138 @@
+/**
+ * @gaonjs/cli · `gaon g ui-kit` — shadcn 식 UI 킷 제너레이터 (결정 75)
+ *
+ * shadcn 을 참조해 Vue 3 로 새로 쓴 UI 컴포넌트를 프로젝트에 **복사**한다
+ * (복사-소유 — 생성된 뒤엔 사용자 코드다). npm 의존이 아니라 파일로 심으므로
+ * 자유롭게 고칠 수 있고, 외부 런타임 의존이 전혀 없다(cn 은 자작 · reka-ui·
+ * clsx·cva 미도입 · 결정 75). Tailwind(결정 74)를 전제로 한다.
+ *
+ * 배치:
+ *   apps/<app>/lib/utils.ts        — cn() 헬퍼
+ *   apps/<app>/components/ui/*.vue  — Button·Input·Card·Form·Dialog … (앱 전용 순수 UI)
+ *
+ * 앱 전용에 두는 이유: 컴포넌트에서 lib/utils 로 가는 import 를 얕게 유지해
+ * (`../../lib/utils.js`) AI·사람 모두 실수 없이 참조하게 하고, `gaon g auth`
+ * 처럼 앱 단위(--app)로 생성한다. 여러 앱이 각자 소유한다(복사-소유 관례).
+ */
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs';
+import { dirname, join, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { appWiringFiles, readProjectName } from './scaffold/app-wiring.js';
+const TEMPLATE_DIR = join(dirname(fileURLToPath(import.meta.url)), 'templates', 'ui-kit');
+/** UI 킷 컴포넌트 전체(파일명 stem = 컴포넌트명). */
+const COMPONENTS = [
+    'Button',
+    'Input',
+    'Label',
+    'Badge',
+    'Card',
+    'CardHeader',
+    'CardTitle',
+    'CardDescription',
+    'CardContent',
+    'CardFooter',
+    'Alert',
+    'AlertTitle',
+    'AlertDescription',
+    'Form',
+    'FormField',
+    'FormMessage',
+    'Dialog',
+    'Sheet',
+];
+/** `gaon g auth` 가 스캐폴드하는 로그인·가입·대시보드 페이지가 쓰는 최소 세트.
+ *  auth 생성 시 이 컴포넌트가 없으면 페이지가 컴파일되지 않으므로 함께 보장한다. */
+const AUTH_SUBSET = [
+    'Button',
+    'Input',
+    'Label',
+    'Card',
+    'CardHeader',
+    'CardTitle',
+    'CardDescription',
+    'CardContent',
+    'CardFooter',
+    'Alert',
+    'AlertDescription',
+    'Form',
+    'FormField',
+    'FormMessage',
+];
+/** 템플릿을 읽는다. UI 킷 템플릿엔 치환 토큰이 없다(경로만 앱별). */
+function read(name) {
+    return readFileSync(join(TEMPLATE_DIR, name), 'utf8');
+}
+/** 컴포넌트명 목록 → 생성 파일 목록(utils 포함). */
+function filesFor(components, app) {
+    const files = [
+        { path: `apps/${app}/lib/utils.ts`, contents: read('utils.ts.tpl') },
+    ];
+    for (const name of components) {
+        files.push({
+            path: `apps/${app}/components/ui/${name}.vue`,
+            contents: read(`${name}.vue.tpl`),
+        });
+    }
+    return files;
+}
+/** UI 킷 전체가 생성하는 파일 목록. */
+export function uiKitScaffoldFiles(opts = {}) {
+    return filesFor(COMPONENTS, opts.app ?? 'web');
+}
+/** `gaon g auth` 가 필요로 하는 UI 킷 최소 세트 파일 목록. */
+export function authUiKitFiles(app = 'web') {
+    return filesFor(AUTH_SUBSET, app);
+}
+/** 파일 목록을 디스크에 쓴다. 기존 파일은 덮어쓰지 않고 skip(멱등 · 복사-소유). */
+export function writeUiKitFiles(cwd, files) {
+    const root = resolve(cwd);
+    const created = [];
+    const skipped = [];
+    for (const file of files) {
+        const abs = join(root, file.path);
+        if (existsSync(abs)) {
+            skipped.push(file.path);
+            continue;
+        }
+        mkdirSync(dirname(abs), { recursive: true });
+        writeFileSync(abs, file.contents, 'utf8');
+        created.push(file.path);
+    }
+    return { created: created.sort(), skipped: skipped.sort() };
+}
+/** `gaon g ui-kit` — UI 킷 전체를 쓴다. */
+export function writeUiKitScaffold(cwd, opts = {}) {
+    return writeUiKitFiles(cwd, uiKitScaffoldFiles(opts));
+}
+/** `gaon g ui-kit` 진입점. exitCode 반환(항상 0 — 멱등 스킵은 실패가 아니다). */
+export function runGenerateUiKitCommand(opts = {}) {
+    const cwd = opts.cwd ?? process.cwd();
+    const app = opts.app ?? 'web';
+    // 대상 앱의 Tailwind 배선(style.css·main.ts·index.html)을 먼저 멱등 보정한다
+    // — 없으면 UI 킷이 유틸 클래스를 못 받는다(결정 76). web 은 gaon new 가 이미
+    // 심었으므로 스킵된다. 그다음 UI 킷 컴포넌트를 심는다.
+    const wiring = writeUiKitFiles(cwd, appWiringFiles(app, readProjectName(cwd)));
+    const kit = writeUiKitScaffold(cwd, { app });
+    const result = {
+        created: [...wiring.created, ...kit.created].sort(),
+        skipped: [...wiring.skipped, ...kit.skipped].sort(),
+    };
+    if (opts.json) {
+        process.stdout.write(JSON.stringify({ command: 'g ui-kit', app, ...result }, null, 2) + '\n');
+        return 0;
+    }
+    const lines = [''];
+    lines.push(`  gaon g ui-kit — UI 킷 (${app} 앱 · shadcn 참조 · 복사-소유)`);
+    lines.push('');
+    for (const f of result.created)
+        lines.push(`   + ${f}`);
+    for (const f of result.skipped)
+        lines.push(`   · ${f} (이미 있음 — 건너뜀)`);
+    lines.push('');
+    lines.push('  Tailwind 배선(tailwind.config.ts·postcss.config.js·apps/' + app + '/style.css)이 함께 보정됩니다.');
+    lines.push('  컴포넌트는 이제 여러분 코드입니다 — apps/' + app + '/components/ui/ 에서 자유롭게 고치세요.');
+    lines.push('  예) import Button from \'../../components/ui/Button.vue\'');
+    lines.push('');
+    process.stdout.write(lines.join('\n') + '\n');
+    return 0;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gaonjs/cli",
-  "version": "0.15.0",
+  "version": "0.18.0",
   "description": "Gaon CLI 구현: 제너레이터·스캐폴딩·로드맵 출력 (M1 스텁)",
   "type": "module",
   "license": "MIT",
@@ -27,12 +27,12 @@
     "@modelcontextprotocol/sdk": "^1.29.0",
     "typescript": "^5.9.0",
     "vite": "^7.0.0",
-    "@gaonjs/async": "0.4.0",
-    "@gaonjs/web": "0.6.1",
-    "@gaonjs/config": "0.4.1",
+    "@gaonjs/async": "0.5.0",
     "@gaonjs/core": "0.2.0",
-    "@gaonjs/data": "0.8.4",
-    "@gaonjs/mail": "0.1.1"
+    "@gaonjs/config": "0.4.1",
+    "@gaonjs/web": "0.6.1",
+    "@gaonjs/mail": "0.1.1",
+    "@gaonjs/data": "0.8.4"
   },
   "scripts": {
     "build": "node ../../node_modules/typescript/bin/tsc -p tsconfig.json && node -e \"require('fs').cpSync('src/templates','dist/templates',{recursive:true})\""