@conscience-technology/ctds 0.0.0-stage → 0.1.1

package/assets/components/Onboarding/PresetsGallery.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { useTheme } from "../ThemeController";
+import { Button } from "../Button";
+import { themePresets } from "../_data";
+import styles from "./Onboarding.module.css";
+
+export function PresetsGallery() {
+  const { applyPreset, palette, hue, shape, density, motionMode } = useTheme();
+
+  return (
+    <div className={styles.cardGrid}>
+      {themePresets.map((p) => {
+        const active =
+          palette === p.values.palette &&
+          hue === p.values.hue &&
+          shape === p.values.shape &&
+          density === p.values.density &&
+          motionMode === p.values.motion;
+
+        return (
+          <div
+            key={p.id}
+            className={styles.card}
+            data-active={active || undefined}
+          >
+            <div className={styles.cardHead}>
+              <span className={styles.cardTitle}>{p.label}</span>
+              <div className={styles.cardSwatches} aria-hidden>
+                <span
+                  className={styles.cardSwatch}
+                  style={{
+                    background: `oklch(0.55 0.14 ${p.values.hue})`,
+                  }}
+                />
+                {p.values.accentHue != null && (
+                  <span
+                    className={styles.cardSwatch}
+                    style={{
+                      background: `oklch(0.55 0.14 ${p.values.accentHue})`,
+                    }}
+                  />
+                )}
+              </div>
+            </div>
+            <p className={styles.cardDesc}>{p.desc}</p>
+            <p className={styles.cardDesc}>
+              {p.values.palette} · {p.values.shape} · {p.values.density} ·{" "}
+              {p.values.motion}
+            </p>
+            <div className={styles.cardFoot}>
+              <Button
+                variant={active ? "primary" : "ghost"}
+                size="sm"
+                onClick={() => applyPreset(p.values)}
+              >
+                {active ? "적용됨" : "적용"}
+              </Button>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/assets/components/Onboarding/actions.ts

@@ -0,0 +1,250 @@
+"use server";
+
+/**
+ * 온보딩 완료 시 플젝 파일에 선택을 영구 반영하는 server action.
+ *
+ * CTDS는 "사용자가 자기 플젝에 복사해서 쓰는" 모델. `npx ctds init`으로 설치하면
+ * 이 서버 액션이 사용자 플젝의 /ctds 라우트에 심어지고, "적용" 버튼이 눌리면
+ * 사용자 플젝 루트에 두 파일이 쓰인다:
+ *
+ *   1) ctds.config.json  — 축 값 JSON. 머신 리더블 소스.
+ *                           ThemeController가 import해서 SSR 초기값으로 사용.
+ *                           AI 에이전트(Claude Code 등)도 이걸 읽어서 축 참조.
+ *   2) DESIGN.md         — 축 값 + 테마 산문 요약. 사람·AI 모두 읽는 설명.
+ *
+ * layout.tsx 자동 패치는 하지 않음 — 사용자 플젝마다 구조가 달라 정규식 치환이
+ * 깨지기 쉬움. ThemeController가 ctds.config.json을 initialConfig prop으로
+ * 받으면 됨.
+ *
+ * 로컬 dev 환경에서만 돌아간다는 가정. 프로덕션 서버리스에서는 FS 쓰기 거부.
+ */
+
+import { writeFile, access, readFile } from "node:fs/promises";
+import { join, dirname, parse } from "node:path";
+import type {
+  DensityValue,
+  IconFamily,
+  LangValue,
+  MotionValue,
+  PaletteValue,
+  ShapeValue,
+  VoiceValue,
+} from "../_data";
+
+export type AppliedConfig = {
+  theme: "none" | "pure" | "spare" | "expressive";
+  mode: "light" | "dark";
+  palette: PaletteValue;
+  hue: number;
+  accentHue?: number | null;
+  shape: ShapeValue;
+  density: DensityValue;
+  motion: MotionValue;
+  iconFamily: IconFamily;
+  voice: VoiceValue;
+  lang: LangValue;
+  focusRing: "on" | "off";
+  /** 참고용 메타. */
+  appliedAt: string;
+};
+
+export type ApplyResult =
+  | { ok: true; files: string[] }
+  | { ok: false; error: string; files: string[] };
+
+const TARGET_FILES = ["ctds.config.json", "DESIGN.md"] as const;
+
+/**
+ * 사용자 플젝 루트 결정. Next.js dev server의 process.cwd()가 꼭 플젝 루트가 아님:
+ * - 모노레포에서 `web/`에 Next.js 있으면 cwd가 web/이 됨 (CTDS 레포 자체가 그런 경우)
+ * - pnpm/yarn workspaces에서도 비슷
+ * - 사용자가 자기 플젝 루트에 CTDS를 설치해 /ctds를 심은 경우 cwd=플젝루트가 맞음
+ *
+ * 로직:
+ * 1) cwd에서 시작해 위로 올라가며 모든 package.json 수집
+ * 2) 가장 바깥쪽 package.json 디렉토리를 "진짜 프로젝트 루트"로 선택
+ *    - 보통 사용자 플젝: 바로 cwd에 package.json 하나뿐 → cwd 선택 (OK)
+ *    - 모노레포/workspaces: 바깥에 workspace root package.json 발견 → 그걸 선택
+ *    - CTDS 자기 레포: web/package.json과 루트 package.json 둘 다 → 루트 선택
+ * 3) 아무것도 못 찾으면 cwd 폴백
+ */
+async function findProjectRoot(startDir: string): Promise<string> {
+  const { root: fsRoot } = parse(startDir);
+  const pkgDirs: string[] = [];
+  let dir = startDir;
+  while (true) {
+    const pkgPath = join(dir, "package.json");
+    try {
+      await readFile(pkgPath, "utf8");
+      pkgDirs.push(dir);
+    } catch {
+      // package.json 없거나 파싱 실패 — 그냥 넘어감
+    }
+    if (dir === fsRoot) break;
+    const parent = dirname(dir);
+    if (parent === dir) break;
+    dir = parent;
+  }
+  // pkgDirs는 cwd → 상위 순이라 마지막이 가장 바깥.
+  return pkgDirs.length > 0 ? pkgDirs[pkgDirs.length - 1] : startDir;
+}
+
+const PROJECT_ROOT = () => findProjectRoot(process.cwd());
+
+async function fileExists(path: string): Promise<boolean> {
+  try {
+    await access(path);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/** 적용 전에 호출해서 기존에 어떤 파일이 있는지 확인. 다이얼로그에서 "덮어쓸래?" 묻는 용. */
+export async function checkExistingFiles(): Promise<{ existing: string[] }> {
+  const root = await PROJECT_ROOT();
+  const existing: string[] = [];
+  for (const f of TARGET_FILES) {
+    if (await fileExists(join(root, f))) existing.push(f);
+  }
+  return { existing };
+}
+
+/** 두 아티팩트를 쓴다. 하나라도 실패하면 그 지점에서 중단하고 어디까지 썼는지 리턴.
+ *  overwrite=false(기본값)에서 기존 파일 있으면 거부. 호출자가 명시적으로 덮어쓰기 승인하면 true. */
+export async function applyOnboarding(
+  config: AppliedConfig,
+  options: { overwrite?: boolean } = {}
+): Promise<ApplyResult> {
+  // 프로덕션 서버리스에서 /ctds가 실수로 노출됐을 때 FS 쓰기 거부.
+  if (process.env.NODE_ENV === "production") {
+    return {
+      ok: false,
+      error:
+        "/ctds 는 로컬 개발 환경 전용이에요. 프로덕션 빌드에선 파일을 쓸 수 없습니다. 로컬에서 `npm run dev` 로 돌려주세요.",
+      files: [],
+    };
+  }
+
+  if (!options.overwrite) {
+    const { existing } = await checkExistingFiles();
+    if (existing.length > 0) {
+      return {
+        ok: false,
+        error: `이미 존재: ${existing.join(", ")}. 덮어쓰려면 확인 후 다시 적용해주세요.`,
+        files: [],
+      };
+    }
+  }
+
+  const root = await PROJECT_ROOT();
+  const written: string[] = [];
+  try {
+    const configPath = join(root, "ctds.config.json");
+    await writeFile(configPath, JSON.stringify(config, null, 2) + "\n", "utf8");
+    written.push("ctds.config.json");
+
+    const designPath = join(root, "DESIGN.md");
+    await writeFile(designPath, renderDesignMd(config), "utf8");
+    written.push("DESIGN.md");
+
+    return { ok: true, files: written };
+  } catch (e) {
+    return {
+      ok: false,
+      error: e instanceof Error ? e.message : String(e),
+      files: written,
+    };
+  }
+}
+
+/** DESIGN.md 생성. 테마가 "none"이면 커스텀 조합 설명, 그 외엔 테마 프롬프트 기반. */
+function renderDesignMd(c: AppliedConfig): string {
+  const date = c.appliedAt.slice(0, 10);
+  const themeLine =
+    c.theme === "none"
+      ? "**직접 조합** — 테마 preset 없이 사용자가 각 축을 직접 선택했습니다."
+      : `**${c.theme}** 테마 기반. 자세한 원칙·Do/Don't는 [prompts/themes/${c.theme}.md](prompts/themes/${c.theme}.md) 참조.`;
+
+  const hex =
+    c.accentHue != null
+      ? `· 보조 hue=${c.accentHue}°`
+      : "";
+
+  return `# 디자인 결정
+
+> 생성일: ${date} · 온보딩 적용 결과
+> 머신 리더블 소스는 [ctds.config.json](ctds.config.json)에.
+
+${themeLine}
+
+## 축 값
+
+| Axis | Value | 설명 |
+|---|---|---|
+| Mode | \`${c.mode}\` | ${c.mode === "light" ? "밝은 배경" : "어두운 배경"} |
+| Palette | \`${c.palette}\` | ${paletteDesc(c.palette)} |
+| Hue | \`${c.hue}°\` ${hex} | 브랜드 색상 축 |
+| Shape | \`${c.shape}\` | ${shapeDesc(c.shape)} |
+| Density | \`${c.density}\` | ${densityDesc(c.density)} |
+| Motion | \`${c.motion}\` | ${motionDesc(c.motion)} |
+| Icon Family | \`${c.iconFamily}\` | 아이콘 세트 |
+| Voice | \`${c.voice}\` | ${voiceDesc(c.voice)} |
+| Lang | \`${c.lang}\` | UI 언어 |
+| Focus Ring | \`${c.focusRing}\` | 포커스 링 ${c.focusRing === "on" ? "표시" : "숨김"} |
+
+## AI 에이전트에게
+
+이 프로젝트는 위 축 값으로 고정됐습니다. 컴포넌트·페이지를 생성할 때:
+
+- **하드코딩 금지** — 색/간격/radius/shadow/motion은 전부 CTDS 토큰 경유.
+- 축 값은 [ctds.config.json](ctds.config.json)이 소스 오브 트루스.
+  런타임엔 \`ThemeController\`가 관리하며, 사용자가 축을 바꿀 때마다 \`<html data-*>\` 속성이 갱신됩니다.
+- 토큰·축의 상세 규칙은 [prompts/](prompts/) 하위 문서들을 참조하세요.
+${
+  c.theme === "none"
+    ? ""
+    : `- 이 프로젝트의 "성격"은 [prompts/themes/${c.theme}.md](prompts/themes/${c.theme}.md)의 Do/Don't·Signature·Negative에 정의돼 있습니다.`
+}
+
+## 변경 이력
+
+- ${date}: 온보딩 적용
+`;
+}
+
+function paletteDesc(v: PaletteValue): string {
+  return {
+    mono: "채도 0 · 무채색 지배 · primary는 소수 지점만",
+    vivid: "원본 hue · 진한 채도",
+    standard: "원본 hue · 중간 채도 (기본)",
+    calm: "warm shift · 낮은 채도",
+    pastel: "cool shift · 매우 밝은 명도",
+  }[v];
+}
+function shapeDesc(v: ShapeValue): string {
+  return { soft: "말랑, 캐주얼", standard: "표준", crisp: "딱딱, 전문" }[v];
+}
+function densityDesc(v: DensityValue): string {
+  return {
+    compact: "높은 밀도 (85%)",
+    default: "표준 (100%)",
+    comfortable: "낮은 밀도 (106%)",
+  }[v];
+}
+function motionDesc(v: MotionValue): string {
+  return {
+    bouncy: "쫀득한 오버슛",
+    standard: "짧고 매끈",
+    calm: "차분",
+    none: "애니 없음",
+  }[v];
+}
+function voiceDesc(v: VoiceValue): string {
+  return {
+    formal: "격식체 (입니다)",
+    neutral: "표준 존대",
+    casual: "친근체",
+  }[v];
+}
+

package/assets/components/Onboarding/index.ts

@@ -0,0 +1,8 @@
+/**
+ * CTDS 온보딩 패키지 — 사용자 플젝의 /ctds 라우트에서 쓰는 UI.
+ *
+ * 사용 예 (사용자 플젝의 app/ctds/page.tsx):
+ *   import { OnboardingPage } from "@/components/ctds/Onboarding";
+ *   export default function Page() { return <OnboardingPage />; }
+ */
+export { OnboardingPage } from "./OnboardingPage";

package/assets/components/Onboarding/palette.css

@@ -0,0 +1,40 @@
+/* Onboarding 페이지 전용 팔레트.
+   축(hue/palette) 시스템과 독립된 고정 브랜드 컬러. 온보딩은 웜 아이보리 배경 +
+   차분한 wine·brown rail 조합으로 톤을 고정. 사용자가 "Cloud Dancer + 세련된 브라운
+   + 와인" 요청. 축 값 변경 영향 안 받음. */
+
+:root {
+  /* 아주 옅은 웜 오프화이트 — 거의 순백 (Cloud Dancer보다 밝게) */
+  --onb-bg: #F8F6F2;
+
+  /* Rail — 웜 차콜(거의 뉴트럴, warm undertone).
+     Wine·brown은 강조 없이 아주 미세하게만 배어남. */
+  --onb-rail: #2C2825;
+  --onb-rail-deep: #201D1A;
+
+  /* Accent — 정말 필요할 때만. Active state 강조에 subtle하게. */
+  --onb-accent: #6B4F4C;
+
+  /* Rail 위 텍스트/보조 */
+  --onb-rail-fg: #EEE9E2;
+  --onb-rail-fg-muted: #A69B94;
+  --onb-rail-fg-subtle: #6D6560;
+  --onb-rail-surface: rgba(238, 233, 226, 0.10);
+  --onb-rail-line: rgba(238, 233, 226, 0.14);
+  --onb-rail-dot-idle: rgba(238, 233, 226, 0.22);
+  --onb-rail-progress-dot: rgba(238, 233, 226, 0.28);
+
+  /* 콘텐츠 (우측) */
+  --onb-card-bg: #FFFFFF;
+  --onb-back-btn: #E8E4DD;
+  --onb-back-btn-hover: #DED8CE;
+  --onb-fg: #2A2622;
+  --onb-fg-muted: #6E655F;
+  --onb-border: rgba(42, 38, 34, 0.08);
+  --onb-border-strong: rgba(42, 38, 34, 0.14);
+
+  /* Mode preview swatch — 모드 축 미리보기용 고정 색. 현재 테마와 무관하게
+     light/dark 두 비주얼을 동시에 보여주기 위함. */
+  --onb-mode-light: #FFFFFF;
+  --onb-mode-dark: #1A1A1A;
+}

package/assets/components/Onboarding/wizardData.ts

@@ -0,0 +1,265 @@
+import type {
+  DensityValue,
+  IconFamily,
+  MotionValue,
+  PaletteValue,
+  ShapeValue,
+  ThemePreset,
+} from "../_data";
+
+export type ThemeId = "none" | "pure" | "spare" | "expressive";
+export type VibeId = "balanced" | "playful" | "serious";
+export type DensityChoiceId = DensityValue;
+export type LayoutId = "sidebar-only" | "topbar-sidebar" | "dual-sidebar";
+
+// ── 디자인 스타일(테마) ─────────────────────────────────
+// 테마를 고르면 뒤의 축(vibe/density 등) 디폴트가 묶여서 결정됩니다.
+// 사용자는 뒤 단계에서 override 가능. "none"은 축을 하나씩 직접 고르는 흐름.
+// 테마 정의 원본: prompts/themes/<slug>.md (pure / spare / expressive)
+
+export type ThemeBadgeStatus = "success" | "warning" | "destructive" | "info";
+
+export type ThemeChoice = {
+  id: ThemeId;
+  title: string;
+  /** 영어 접두. 뱃지로 title 앞에 노출. "none"은 뱃지 없음. */
+  badge?: string;
+  /** Badge status — soft variant에서 색이 결정됨. */
+  badgeStatus?: ThemeBadgeStatus;
+  hint: string;
+  examples: string;
+};
+
+export const THEME_CHOICES: ThemeChoice[] = [
+  {
+    id: "none",
+    title: "직접 원하는 스타일로 만들기",
+    hint: "분위기 · 컬러 · 밀도 · 레이아웃을 단계별로 직접 설정합니다. CTDS 기본값에서 시작.",
+    examples: "자체 디자인 가이드가 있거나, 축을 세밀하게 조정하고 싶은 경우",
+  },
+  {
+    id: "spare",
+    title: "차분하고 정돈된",
+    badge: "Spare",
+    badgeStatus: "info",
+    hint: "정해둔 격자 안에서만 움직여요. 매일 열어도 피로하지 않게, 꼭 필요한 것만 담아요.",
+    examples: "Vercel · Supabase · Raycast · Linear 같은 앱 · 대시보드 · 설정 · 문서",
+  },
+  {
+    id: "pure",
+    title: "덜어냄으로 세련된",
+    badge: "Pure",
+    badgeStatus: "success",
+    hint: "선 · 카드 · 그림자처럼 가두는 장치를 빼요. 톤 차이와 여백만으로 자연스럽게 흐르게.",
+    examples: "Stripe · Framer · Linear 랜딩. 첫인상이 중요한 소개 페이지",
+  },
+  {
+    id: "expressive",
+    title: "밝고 통통 튀는",
+    badge: "Expressive",
+    badgeStatus: "warning",
+    hint: "파스텔 색으로 분류하고, 카드가 살짝 떠 있어요. 매일 열고 싶은 생기 있는 UI.",
+    examples: "Notion Calendar · Superhuman · Arc 같은 스케줄 · 메일 · 메시지 앱",
+  },
+];
+
+export type VibeChoice = {
+  id: VibeId;
+  title: string;
+  hint: string;
+  examples: string;
+  values: {
+    shape: ShapeValue;
+    motion: MotionValue;
+    /** 선택된 vibe의 "serious" variant가 palette=mono를 승계하는 데 쓰임. */
+    palette?: PaletteValue;
+  };
+};
+
+export const VIBE_CHOICES: VibeChoice[] = [
+  {
+    id: "balanced",
+    title: "무난한 표준",
+    hint: "SaaS 기본. 코너·모션 모두 중간값. 튀지도 심심하지도 않게.",
+    examples: "일반 SaaS, 사내 도구, 이커머스 관리",
+    values: { shape: "standard", motion: "standard" },
+  },
+  {
+    id: "playful",
+    title: "활력 있고 통통 튀는",
+    hint: "코너는 둥글고, 모션은 쫀득하게, 색은 보조색까지. 브랜드가 기억되어야 하는 화면.",
+    examples: "스타트업 프로덕트, 마케팅 사이트, 온보딩·튜토리얼",
+    values: { shape: "soft", motion: "bouncy" },
+  },
+  {
+    id: "serious",
+    title: "격식있는 프로 도구",
+    hint: "모노톤. 색은 최소 지점에만. 코너는 각지고 모션은 조용히.",
+    examples: "관리자 대시보드, 분석 도구, 인프라 콘솔, 공공기관, 금융",
+    values: { shape: "crisp", motion: "calm", palette: "mono" },
+  },
+];
+
+// ── 컬러 & 톤 ─────────────────────────────────────────
+
+export type PaletteChoice = {
+  id: PaletteValue;
+  title: string;
+  hint: string;
+  examples: string;
+};
+
+export const PALETTE_CHOICES: PaletteChoice[] = [
+  {
+    id: "vivid",
+    title: "선명하게",
+    hint: "진하고 또렷한 색",
+    examples: "스타트업, 마케팅, 캠페인 페이지",
+  },
+  {
+    id: "standard",
+    title: "표준",
+    hint: "무난한 기본 채도",
+    examples: "일반 웹앱, 관리 도구",
+  },
+  {
+    id: "calm",
+    title: "차분하게",
+    hint: "탁한 웜 톤",
+    examples: "공공기관, 금융, 신중한 브랜드",
+  },
+  {
+    id: "pastel",
+    title: "밝고 파스텔",
+    hint: "연하고 밝은 톤",
+    examples: "교육, 콘텐츠, 웰니스, 어린이 프로덕트",
+  },
+];
+
+export type HuePreset = {
+  id: string;
+  label: string;
+  hue: number;
+  desc: string;
+};
+
+export const HUE_PRESET_CHOICES: HuePreset[] = [
+  { id: "ocean", label: "Ocean", hue: 210, desc: "신뢰 · 금융/공공" },
+  { id: "forest", label: "Forest", hue: 145, desc: "안정 · 헬스케어" },
+  { id: "sunset", label: "Sunset", hue: 25, desc: "활력 · 스타트업" },
+  { id: "lavender", label: "Lavender", hue: 280, desc: "창의 · 교육" },
+  { id: "crimson", label: "Crimson", hue: 355, desc: "강조 · 프로모션" },
+  { id: "slate", label: "Slate", hue: 220, desc: "무채색 · 관리 도구" },
+];
+
+export type DensityChoice = {
+  id: DensityChoiceId;
+  title: string;
+  hint: string;
+  examples: string;
+};
+
+export const DENSITY_CHOICES: DensityChoice[] = [
+  {
+    id: "compact",
+    title: "데이터가 많음",
+    hint: "한 화면에 최대한 많은 행·열이 보여야 함. 클릭 대상이 작아도 괜찮음.",
+    examples: "관리자 테이블, 엑셀 대체 도구, 데이터 그리드",
+  },
+  {
+    id: "default",
+    title: "표준 밀도",
+    hint: "일반 웹앱 기본값. 정보와 여백이 균형 있게.",
+    examples: "일반 SaaS, 대부분의 페이지",
+  },
+  {
+    id: "comfortable",
+    title: "여유롭게",
+    hint: "터치 대상이 넉넉해야 하거나, 콘텐츠에 집중하게 하고 싶을 때.",
+    examples: "태블릿·모바일 앱, 콘텐츠 리더, 랜딩 페이지",
+  },
+];
+
+export type LayoutChoice = {
+  id: LayoutId;
+  title: string;
+  hint: string;
+  examples: string;
+  sidebar: "left" | "right" | "dual" | "none";
+  topbar: boolean;
+};
+
+export const LAYOUT_CHOICES: LayoutChoice[] = [
+  {
+    id: "dual-sidebar",
+    title: "옵션이 많은 정교한 편집 도구",
+    hint: "왼쪽은 파일·레이어 트리, 오른쪽은 속성 패널. 도구 자체가 UI의 주인공.",
+    examples: "Figma, Framer, VS Code, Blender",
+    sidebar: "dual",
+    topbar: true,
+  },
+  {
+    id: "topbar-sidebar",
+    title: "탐색 경로가 중요한 문서·앱",
+    hint: "상단에 워크스페이스/브래드크럼, 왼쪽에 섹션 트리. 어디에 있는지가 늘 명확해야 함.",
+    examples: "Notion, GitHub, Linear (프로젝트 뷰), Confluence",
+    sidebar: "left",
+    topbar: true,
+  },
+  {
+    id: "sidebar-only",
+    title: "메뉴는 짧고 콘텐츠가 주인공",
+    hint: "네비게이션은 왼쪽에 최소한으로. 상단 바 없이 콘텐츠에 몰입.",
+    examples: "Linear (이슈 뷰), Vercel Dashboard, Slack",
+    sidebar: "left",
+    topbar: false,
+  },
+];
+
+/**
+ * 각 테마가 묶는 축 preset. prompts/themes/<slug>.md 의 Preset 표 그대로.
+ * Theme이 안 담는 축(palette/hue)은 중립 기본값.
+ * applyPreset에 넘기면 6개 축이 한 번에 스왑됨.
+ */
+export const THEME_PRESETS: Record<Exclude<ThemeId, "none">, ThemePreset> = {
+  spare: {
+    mode: "light",
+    palette: "standard",
+    hue: 210,
+    shape: "crisp",
+    density: "default",
+    motion: "calm",
+    iconFamily: "phosphor" as IconFamily,
+    lang: "ko",
+  },
+  pure: {
+    mode: "light",
+    palette: "standard",
+    hue: 210,
+    shape: "soft",
+    density: "comfortable",
+    motion: "calm",
+    iconFamily: "phosphor" as IconFamily,
+    lang: "ko",
+  },
+  expressive: {
+    mode: "light",
+    palette: "pastel",
+    hue: 280,
+    shape: "soft",
+    density: "default",
+    motion: "bouncy",
+    iconFamily: "phosphor" as IconFamily,
+    lang: "ko",
+  },
+};
+
+/**
+ * 테마가 vibe 축(shape/motion/icon/accent 묶음)을 커버하므로, 테마 선택 시
+ * vibe step을 건너뛰고 요약에만 노출. 각 테마의 축 조합과 가장 가까운 vibe 매핑.
+ */
+export const THEME_VIBE_FALLBACK: Record<Exclude<ThemeId, "none">, VibeId> = {
+  spare: "serious",     // crisp · calm · regular — serious와 가장 가까움
+  pure: "serious",      // soft · calm — motion/weight 공유, shape만 다름
+  expressive: "playful", // soft · bouncy · colorful — playful과 거의 일치
+};