sh-ui-cli 0.14.0 → 0.21.0

package/data/summaries/flutter.json

@@ -0,0 +1,42 @@
+{
+  "$description": "Flutter 위젯 summary — llms.txt 생성용. key는 registry.json의 name과 동일.",
+  "summaries": {
+    "tokens": "ShUiTheme (ThemeExtension) — 색상/간격/타이포/반경/지속시간 토큰. Theme.of(ctx).extension<ShUiTheme>()로 접근.",
+    "button": "ShUiButton — variant(primary/secondary/ghost/danger/link) + size(sm/md/lg).",
+    "card": "ShUiCard — header/body/footer named slot.",
+    "input": "ShUiInput — TextField 래퍼 + sh-ui 토큰 스타일.",
+    "textarea": "ShUiTextarea — 다중 행 입력.",
+    "label": "ShUiLabel — 폼 레이블.",
+    "checkbox": "ShUiCheckbox — tristate 지원.",
+    "radio": "ShUiRadio / ShUiRadioGroup — 단일 선택.",
+    "switch": "ShUiSwitch — 토글 스위치.",
+    "toggle": "ShUiToggle — 프레스 상태 유지 버튼.",
+    "slider": "ShUiSlider — 단일 값, step.",
+    "select": "ShUiSelect — 네이티브 대체 드롭다운 셀렉트.",
+    "combobox": "ShUiCombobox — 검색 가능 셀렉트.",
+    "date-picker": "ShUiDatePicker — 캘린더 팝업.",
+    "color-picker": "ShUiColorPicker — 색상 선택.",
+    "file-upload": "ShUiFileUpload — 파일 선택/드롭.",
+    "dialog": "ShUiDialog — header/body/footer named slot, showDialog로 호출.",
+    "popover": "ShUiPopover — 트리거 기준 오버레이.",
+    "tooltip": "ShUiTooltip — long-press / hover 힌트.",
+    "toast": "ShUiToast — ShUiToastOverlay로 스택 관리.",
+    "dropdown-menu": "ShUiDropdownMenu — 트리거 기준 메뉴.",
+    "context-menu": "ShUiContextMenu — 길게 누르기/우클릭 메뉴.",
+    "menubar": "ShUiMenubar — 수평 메뉴바.",
+    "tabs": "ShUiTabs / ShUiTabsController — 탭 내비.",
+    "accordion": "ShUiAccordion — 펼침/접힘. single/multiple.",
+    "carousel": "ShUiCarousel — PageView 기반, autoplay/dots.",
+    "sidebar": "ShUiSidebar — 접이식 사이드바.",
+    "app-shell": "ShUiAppShell — 사이드바 + 상단 바 + 본문 레이아웃.",
+    "header": "ShUiHeader — 로고/네비/액션 영역.",
+    "breadcrumb": "ShUiBreadcrumb(items: [...]) — items 기반 경로 내비.",
+    "pagination": "ShUiPagination(page:, pageCount:, siblingCount:, onPageChanged:) — 페이지 범위 계산 내장.",
+    "avatar": "ShUiAvatar — 이미지/initials fallback.",
+    "badge": "ShUiBadge — 상태 뱃지.",
+    "progress": "ShUiProgress — 선형 진행률, indeterminate.",
+    "spinner": "ShUiSpinner — 원형 로딩.",
+    "separator": "ShUiSeparator — 구분선 (horizontal/vertical).",
+    "skeleton": "ShUiSkeleton — 로딩 플레이스홀더."
+  }
+}

package/data/summaries/react.json

@@ -0,0 +1,50 @@
+{
+  "$description": "React 컴포넌트 summary — llms.txt 생성용. key는 registry.json의 name과 동일.",
+  "summaries": {
+    "button": "기본 버튼 — variant(primary/secondary/ghost/danger/link) + size(sm/md/lg).",
+    "card": "카드 컨테이너 — compound (Card.Header / Card.Body / Card.Footer / Card.Title / Card.Description).",
+    "input": "단일 행 텍스트 입력 — hasError 지원.",
+    "textarea": "여러 행 텍스트 입력 — rows, autoResize.",
+    "label": "폼 레이블 — htmlFor로 입력과 연결.",
+    "checkbox": "체크박스 — indeterminate 지원 (Base UI).",
+    "radio": "라디오 그룹 — RadioGroup + RadioGroupItem (Base UI).",
+    "switch": "토글 스위치 — controlled/uncontrolled 모두 지원 (Base UI).",
+    "toggle": "단일 토글 / 토글 그룹 — pressed 상태 (Base UI).",
+    "slider": "수평 슬라이더 — 단일/범위 값, step.",
+    "select": "네이티브 대체 셀렉트 — compound (Select.Trigger / Select.Content / Select.Item) (Base UI).",
+    "combobox": "검색 가능 셀렉트 — 자동 필터링, 키보드 내비 (Base UI).",
+    "color-picker": "색상 선택 — hex/rgb, 프리셋 팔레트.",
+    "date-picker": "날짜 선택 — 캘린더 팝업 (Base UI).",
+    "file-upload": "파일 업로드 — 드롭존, 다중 파일, 진행률.",
+    "dialog": "모달 다이얼로그 — compound (Dialog.Trigger / Dialog.Content / Dialog.Title / Dialog.Description) + 포커스 트랩 (Base UI).",
+    "popover": "floating 팝오버 — 트리거 기준 위치 (Base UI).",
+    "tooltip": "짧은 힌트 — hover/focus 표시, delay/closeDelay (Base UI).",
+    "toast": "임시 알림 — useToast 훅 + ToastProvider. aria-live 자동.",
+    "dropdown-menu": "드롭다운 메뉴 — compound, sub-menu 지원 (Base UI).",
+    "context-menu": "우클릭 컨텍스트 메뉴 — DropdownMenu와 같은 구조 (Base UI).",
+    "menubar": "수평 메뉴바 — dropdown-menu 위에 구성 (Base UI).",
+    "tabs": "탭 — compound (Tabs.List / Tabs.Trigger / Tabs.Content) (Base UI).",
+    "accordion": "펼침/접힘 아코디언 — single/multiple (Base UI).",
+    "carousel": "슬라이드 캐러셀 — Embla 기반, autoplay/autoscroll.",
+    "sidebar": "앱 사이드바 — collapsible, SidebarMenu/SidebarGroup 조합.",
+    "header": "앱 헤더 — 로고/네비/액션 compound.",
+    "breadcrumb": "경로 내비게이션 — compound (Breadcrumb.List/Item/Link/Page/Separator/Ellipsis). aria-current 자동.",
+    "pagination": "페이지 단위 내비게이션 — compound (PaginationContent/Item/Link/Previous/Next/Ellipsis). getPaginationRange 유틸 동봉. aria-current 자동.",
+    "avatar": "프로필 아바타 — 이미지 fallback → initials (Base UI).",
+    "badge": "상태 뱃지 — variant, size.",
+    "progress": "선형 진행률 — value 0~100, indeterminate.",
+    "spinner": "로딩 스피너 — size.",
+    "separator": "구분선 — orientation(horizontal/vertical).",
+    "skeleton": "스켈레톤 로딩 플레이스홀더.",
+    "theme": "테마 프로바이더 + useTheme 훅 — light/dark/system.",
+    "code-panel": "Shiki 기반 코드 하이라이트 패널 — 복사 버튼 포함.",
+    "base": "CSS 리셋 — base.css.",
+    "breakpoints": "반응형 미디어 쿼리 토큰 — breakpoints.css.",
+    "focus-ring": "공용 포커스 링 스타일 — focus-ring.css.",
+    "z-index": "z-index 레이어 토큰 — z-index.css.",
+    "animations": "공용 애니메이션 키프레임 — animations.css.",
+    "cn": "className 머지 유틸 (tailwind-merge 미사용, 순수 concat).",
+    "use-media-query": "미디어 쿼리 매칭 훅.",
+    "use-active-section": "스크롤 위치로 현재 섹션 감지 훅."
+  }
+}

package/data/tokens/build.mjs

@@ -0,0 +1,553 @@
+#!/usr/bin/env node
+/**
+ * @sh-ui/tokens 빌드 스크립트
+ *
+ * primitives.json + semantic.json + sh-ui.config.json
+ *   → tokens.css  (React / 웹)
+ *   → tokens.dart (Flutter)
+ *
+ * 처리: {base}·{radius} 치환 → 프리미티브 참조 해석 → 타입별 플랫폼 포맷 출력.
+ */
+
+import { readFile, writeFile, mkdir } from "node:fs/promises";
+import { fileURLToPath } from "node:url";
+import { dirname, resolve } from "node:path";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const REPO_ROOT = resolve(__dirname, "../..");
+
+function getPath(obj, path) {
+  return path.split(".").reduce((acc, key) => (acc == null ? acc : acc[key]), obj);
+}
+
+function resolveString(str, primitives, context, depth = 0) {
+  if (depth > 10) throw new Error(`순환 참조 의심: ${str}`);
+  let out = str.replace(/\{([a-zA-Z_][a-zA-Z0-9_]*)\}/g, (m, k) =>
+    k in context ? context[k] : m,
+  );
+  out = out.replace(/\{([a-zA-Z0-9_.]+)\}/g, (m, path) => {
+    const node = getPath(primitives, path);
+    if (node && typeof node === "object" && "$value" in node) return String(node.$value);
+    if (typeof node === "string" || typeof node === "number") return String(node);
+    throw new Error(`해석 실패: ${m}`);
+  });
+  if (/\{[^}]+\}/.test(out)) return resolveString(out, primitives, context, depth + 1);
+  return out;
+}
+
+/** $value 참조를 해석한 뒤 { value, type } 항목 맵으로 펼친다. */
+function flatten(obj, primitives, context, prefix = []) {
+  const result = {};
+  for (const [key, node] of Object.entries(obj)) {
+    if (key.startsWith("$")) continue;
+    if (node && typeof node === "object" && "$value" in node) {
+      result[[...prefix, key].join(".")] = {
+        value: resolveString(String(node.$value), primitives, context),
+        type: node.$type || "string",
+      };
+    } else if (node && typeof node === "object") {
+      Object.assign(result, flatten(node, primitives, context, [...prefix, key]));
+    }
+  }
+  return result;
+}
+
+/** 설정으로 semantic을 해석해 카테고리별 평탄 맵을 반환 */
+async function resolveTokens(config) {
+  const primitives = JSON.parse(
+    await readFile(resolve(__dirname, "src/primitives.json"), "utf8"),
+  );
+  const semantic = JSON.parse(
+    await readFile(resolve(__dirname, "src/semantic.json"), "utf8"),
+  );
+  const ctx = { base: config.theme.base, radius: config.theme.radius };
+
+  const result = {};
+  for (const [cat, value] of Object.entries(semantic)) {
+    if (cat.startsWith("$")) continue;
+    const prefix = cat === "light" || cat === "dark" ? [] : [cat];
+    result[cat] = flatten(value, primitives, ctx, prefix);
+  }
+  return result;
+}
+
+/* ───────── CSS ───────── */
+
+/** "border-width.default" → "--border-width", "space.1" → "--space-1" */
+function toCssVar(path) {
+  const parts = path.split(".");
+  if (parts[parts.length - 1] === "default") parts.pop();
+  return `--${parts.join("-")}`;
+}
+
+function toCssValue(entry) {
+  // 모든 타입은 저장 시 이미 CSS-호환 문자열로 직렬화돼있다(dimension=rem/px, duration=ms, easing=cubic-bezier, shadow=css 단축, color=hex, number=숫자, fontWeight=숫자).
+  return entry.value;
+}
+
+function emitCssBlock(selector, entries) {
+  const lines = Object.entries(entries)
+    .map(([p, entry]) => `  ${toCssVar(p)}: ${toCssValue(entry)};`)
+    .join("\n");
+  return `${selector} {\n${lines}\n}`;
+}
+
+/** 테마 독립 카테고리(light/dark 제외) 전체를 하나의 맵으로 병합 */
+function mergeThemeIndependent(tokens) {
+  const out = {};
+  for (const [cat, map] of Object.entries(tokens)) {
+    if (cat === "light" || cat === "dark") continue;
+    Object.assign(out, map);
+  }
+  return out;
+}
+
+export async function buildTokensCss(config) {
+  const tokens = await resolveTokens(config);
+  const mode = config.theme.mode;
+  const themeIndep = mergeThemeIndependent(tokens);
+  const blocks = [];
+  if (mode === "light" || mode === "light-dark") {
+    blocks.push(emitCssBlock(":root", { ...tokens.light, ...themeIndep }));
+  }
+  if (mode === "dark") {
+    blocks.push(emitCssBlock(":root", { ...tokens.dark, ...themeIndep }));
+  }
+  if (mode === "light-dark") {
+    blocks.push(emitCssBlock(".dark", tokens.dark));
+  }
+  const header = `/* Generated by @sh-ui/tokens — do not edit directly */\n/* base=${config.theme.base} radius=${config.theme.radius} mode=${config.theme.mode} */\n`;
+  return header + "\n" + blocks.join("\n\n") + "\n";
+}
+
+/* ───────── Dart 변환기 ───────── */
+
+/** "#RRGGBB" → "Color(0xFFRRGGBB)", "#RRGGBBAA" → "Color(0xAARRGGBB)" */
+function hexToDartColor(hex) {
+  const m = /^#([0-9a-fA-F]{6})([0-9a-fA-F]{2})?$/.exec(hex);
+  if (!m) throw new Error(`지원하지 않는 색상 포맷: ${hex}`);
+  const rgb = m[1].toUpperCase();
+  const a = (m[2] || "FF").toUpperCase();
+  return `Color(0x${a}${rgb})`;
+}
+
+/** rgba()/hex CSS 색 → Color(0xAARRGGBB) */
+function cssColorToDart(css) {
+  css = css.trim();
+  if (css.startsWith("#")) return hexToDartColor(css);
+  const rgba = /^rgba?\(([^)]+)\)$/i.exec(css);
+  if (rgba) {
+    const parts = rgba[1].split(",").map((s) => s.trim());
+    const r = parseInt(parts[0], 10);
+    const g = parseInt(parts[1], 10);
+    const b = parseInt(parts[2], 10);
+    const a = parts[3] !== undefined ? parseFloat(parts[3]) : 1;
+    const toHex = (n) => n.toString(16).padStart(2, "0").toUpperCase();
+    const alpha = toHex(Math.round(a * 255));
+    return `Color(0x${alpha}${toHex(r)}${toHex(g)}${toHex(b)})`;
+  }
+  throw new Error(`지원하지 않는 CSS 색상: ${css}`);
+}
+
+/** "0.5rem" → 8.0, "16px" → 16.0 */
+function dimensionToDart(value) {
+  const rem = /^(-?\d*\.?\d+)rem$/.exec(value);
+  if (rem) return (parseFloat(rem[1]) * 16).toFixed(1);
+  const px = /^(-?\d*\.?\d+)px$/.exec(value);
+  if (px) return parseFloat(px[1]).toFixed(1);
+  throw new Error(`지원하지 않는 치수 포맷: ${value}`);
+}
+
+/** "120ms" → "Duration(milliseconds: 120)" */
+function durationToDart(value) {
+  const m = /^(\d+)ms$/.exec(value);
+  if (!m) throw new Error(`지원하지 않는 duration: ${value}`);
+  return `Duration(milliseconds: ${m[1]})`;
+}
+
+/** "cubic-bezier(a,b,c,d)" → "Cubic(a, b, c, d)" */
+function easingToDart(value) {
+  const m = /^cubic-bezier\s*\(\s*([-\d.]+)\s*,\s*([-\d.]+)\s*,\s*([-\d.]+)\s*,\s*([-\d.]+)\s*\)$/i.exec(
+    value,
+  );
+  if (m) return `Cubic(${m[1]}, ${m[2]}, ${m[3]}, ${m[4]})`;
+  const named = { linear: "Curves.linear", ease: "Curves.ease" };
+  if (value in named) return named[value];
+  throw new Error(`지원하지 않는 easing: ${value}`);
+}
+
+/** 괄호 그룹을 보존하며 최상위 공백으로 토큰화 */
+function splitByTopLevelSpaces(str) {
+  const out = [];
+  let cur = "";
+  let depth = 0;
+  for (const ch of str) {
+    if (ch === "(") depth++;
+    if (ch === ")") depth--;
+    if (ch === " " && depth === 0) {
+      if (cur) out.push(cur);
+      cur = "";
+    } else {
+      cur += ch;
+    }
+  }
+  if (cur) out.push(cur);
+  return out;
+}
+
+/** "0 8px 24px rgba(0,0,0,0.08)" → "BoxShadow(...)" 리터럴 1개 */
+function shadowLayerToDart(css) {
+  const tokens = splitByTopLevelSpaces(css.trim());
+  const color = tokens[tokens.length - 1];
+  const dims = tokens.slice(0, -1);
+  const [x, y, blur, spread] = dims;
+  const withUnit = (v) => (v.endsWith("px") || v.endsWith("rem") ? v : `${v}px`);
+  return `BoxShadow(offset: Offset(${dimensionToDart(withUnit(x))}, ${dimensionToDart(
+    withUnit(y),
+  )}), blurRadius: ${dimensionToDart(withUnit(blur))}, spreadRadius: ${dimensionToDart(
+    withUnit(spread || "0"),
+  )}, color: ${cssColorToDart(color)})`;
+}
+
+function shadowToDart(value) {
+  return `<BoxShadow>[${shadowLayerToDart(value)}]`;
+}
+
+function fontWeightToDart(value) {
+  const n = typeof value === "number" ? value : parseInt(value, 10);
+  return `FontWeight.w${n}`;
+}
+
+function numberToDart(value) {
+  const n = typeof value === "number" ? value : parseFloat(value);
+  return Number.isInteger(n) ? `${n}.0` : `${n}`;
+}
+
+function toDartLiteral(entry) {
+  switch (entry.type) {
+    case "color":
+      return hexToDartColor(entry.value);
+    case "dimension":
+      return dimensionToDart(entry.value);
+    case "duration":
+      return durationToDart(entry.value);
+    case "easing":
+      return easingToDart(entry.value);
+    case "shadow":
+      return shadowToDart(entry.value);
+    case "number":
+      return numberToDart(entry.value);
+    case "fontWeight":
+      return fontWeightToDart(entry.value);
+    default:
+      throw new Error(`지원하지 않는 타입: ${entry.type}`);
+  }
+}
+
+function toDartType(type) {
+  switch (type) {
+    case "color":
+      return "Color";
+    case "dimension":
+      return "double";
+    case "duration":
+      return "Duration";
+    case "easing":
+      return "Curve";
+    case "shadow":
+      return "List<BoxShadow>";
+    case "number":
+      return "double";
+    case "fontWeight":
+      return "FontWeight";
+    default:
+      throw new Error(`지원하지 않는 타입: ${type}`);
+  }
+}
+
+/* ───────── Dart 필드명 규칙 ───────── */
+
+/** path 끝에 있는 카테고리 prefix를 제거. "space.1" → "1", "radius.default" → "default" */
+function stripCategoryPrefix(path) {
+  const i = path.indexOf(".");
+  return i < 0 ? path : path.slice(i + 1);
+}
+
+/** Dart 식별자로 변환. 숫자로 시작/특수문자 등 처리. */
+function toIdentifier(name, category) {
+  // "default" 키는 카테고리명 + "Default" 또는 별칭으로 대체
+  if (name === "default") {
+    if (category === "radius") return "defaultRadius";
+    if (category === "border-width") return "normal";
+    return "defaultValue";
+  }
+  // "2xl", "3xl" 등 숫자 시작
+  if (/^\d/.test(name)) {
+    return name.replace(/^(\d+)(.*)$/, (_, d, rest) => `${rest || "n"}${d}`);
+  }
+  // 하이픈 케밥 → 카멜
+  return name.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+}
+
+/** space.1 → s1, space.16 → s16 (숫자만 카테고리는 짧은 약어 사용) */
+function toShortNumericField(name) {
+  if (/^\d+$/.test(name)) return `s${name}`;
+  return toIdentifier(name);
+}
+
+/* ───────── Dart 카테고리별 클래스 생성 ───────── */
+
+const CATEGORY_META = {
+  spacing: {
+    // semantic "space" → 클래스 ShUiSpacingTokens, 필드 s0..s16
+    semanticKey: "space",
+    className: "ShUiSpacingTokens",
+    themeField: "spacing",
+    fieldNameFn: toShortNumericField,
+  },
+  text: {
+    semanticKey: "text",
+    className: "ShUiTextTokens",
+    themeField: "text",
+    fieldNameFn: (n) => toIdentifier(n, "text"),
+  },
+  weight: {
+    semanticKey: "weight",
+    className: "ShUiWeightTokens",
+    themeField: "weight",
+    fieldNameFn: (n) => toIdentifier(n, "weight"),
+  },
+  shadow: {
+    semanticKey: "shadow",
+    className: "ShUiShadowTokens",
+    themeField: "shadow",
+    fieldNameFn: (n) => toIdentifier(n, "shadow"),
+  },
+  duration: {
+    semanticKey: "duration",
+    className: "ShUiDurationTokens",
+    themeField: "duration",
+    fieldNameFn: (n) => toIdentifier(n, "duration"),
+  },
+  ease: {
+    semanticKey: "ease",
+    className: "ShUiEaseTokens",
+    themeField: "ease",
+    fieldNameFn: (n) => toIdentifier(n, "ease"),
+  },
+  control: {
+    semanticKey: "control",
+    className: "ShUiControlTokens",
+    themeField: "control",
+    fieldNameFn: (n) => toIdentifier(n, "control"),
+  },
+  borderWidth: {
+    semanticKey: "border-width",
+    className: "ShUiBorderWidthTokens",
+    themeField: "borderWidth",
+    fieldNameFn: (n) => toIdentifier(n, "border-width"),
+  },
+  opacity: {
+    semanticKey: "opacity",
+    className: "ShUiOpacityTokens",
+    themeField: "opacity",
+    fieldNameFn: (n) => toIdentifier(n, "opacity"),
+  },
+  breakpoint: {
+    semanticKey: "bp",
+    className: "ShUiBreakpointTokens",
+    themeField: "breakpoint",
+    fieldNameFn: (n) => toIdentifier(n, "bp"),
+  },
+};
+
+function emitCategoryClass(map, meta) {
+  // map: { "space.1": {value, type}, ... }
+  const entries = Object.entries(map).map(([path, entry]) => {
+    const name = stripCategoryPrefix(path);
+    const field = meta.fieldNameFn(name);
+    return { field, entry };
+  });
+  const fieldDecls = entries
+    .map(({ field, entry }) => `  final ${toDartType(entry.type)} ${field};`)
+    .join("\n");
+  const ctorArgs = entries.map(({ field }) => `    required this.${field},`).join("\n");
+  const staticFields = entries
+    .map(({ field, entry }) => `    ${field}: ${toDartLiteral(entry)},`)
+    .join("\n");
+  return `@immutable
+class ${meta.className} {
+${fieldDecls}
+
+  const ${meta.className}({
+${ctorArgs}
+  });
+
+  static const tokens = ${meta.className}(
+${staticFields}
+  );
+}`;
+}
+
+function emitColorClass(lightMap, darkMap) {
+  const fields = Object.keys(lightMap).map((path) =>
+    stripCategoryPrefix(path) === path
+      ? toIdentifier(path, "color")
+      : toIdentifier(stripCategoryPrefix(path), "color"),
+  );
+  // 기존 규칙 유지: "primary.foreground" → "primaryForeground", "background.default" → "background"
+  const toColorField = (path) => {
+    const parts = path.split(".");
+    if (parts[parts.length - 1] === "default") parts.pop();
+    return parts
+      .map((p, i) => (i === 0 ? p : p[0].toUpperCase() + p.slice(1)))
+      .join("");
+  };
+  const colorFields = Object.keys(lightMap).map(toColorField);
+  const decl = colorFields.map((f) => `  final Color ${f};`).join("\n");
+  const ctor = colorFields.map((f) => `    required this.${f},`).join("\n");
+  const lightVals = Object.entries(lightMap)
+    .map(([path, entry]) => `    ${toColorField(path)}: ${hexToDartColor(entry.value)},`)
+    .join("\n");
+  const darkVals = Object.entries(darkMap)
+    .map(([path, entry]) => `    ${toColorField(path)}: ${hexToDartColor(entry.value)},`)
+    .join("\n");
+  return `@immutable
+class ShUiColorTokens {
+${decl}
+
+  const ShUiColorTokens({
+${ctor}
+  });
+
+  static const light = ShUiColorTokens(
+${lightVals}
+  );
+
+  static const dark = ShUiColorTokens(
+${darkVals}
+  );
+}`;
+}
+
+function emitRadiusClass(radiusMap) {
+  // 기존 규칙: "radius.default" → defaultRadius
+  const fields = Object.keys(radiusMap).map((p) => {
+    const name = stripCategoryPrefix(p);
+    return name === "default" ? "defaultRadius" : toIdentifier(name, "radius");
+  });
+  const decl = fields.map((f) => `  final double ${f};`).join("\n");
+  const ctor = fields.map((f) => `    required this.${f},`).join("\n");
+  const staticFields = Object.entries(radiusMap)
+    .map(([p, entry]) => {
+      const name = stripCategoryPrefix(p);
+      const field = name === "default" ? "defaultRadius" : toIdentifier(name, "radius");
+      return `    ${field}: ${toDartLiteral(entry)},`;
+    })
+    .join("\n");
+  return `@immutable
+class ShUiRadiusTokens {
+${decl}
+
+  const ShUiRadiusTokens({
+${ctor}
+  });
+
+  static const tokens = ShUiRadiusTokens(
+${staticFields}
+  );
+}`;
+}
+
+export async function buildTokensDart(config) {
+  const tokens = await resolveTokens(config);
+
+  const classes = [];
+  classes.push(emitColorClass(tokens.light, tokens.dark));
+  classes.push(emitRadiusClass(tokens.radius));
+
+  for (const [, meta] of Object.entries(CATEGORY_META)) {
+    const map = tokens[meta.semanticKey];
+    if (!map) continue;
+    classes.push(emitCategoryClass(map, meta));
+  }
+
+  // ShUiTheme 확장 클래스
+  const themeFields = [
+    ["colors", "ShUiColorTokens"],
+    ["radius", "ShUiRadiusTokens"],
+  ];
+  for (const [, meta] of Object.entries(CATEGORY_META)) {
+    if (!tokens[meta.semanticKey]) continue;
+    themeFields.push([meta.themeField, meta.className]);
+  }
+
+  const themeDecls = themeFields.map(([f, t]) => `  final ${t} ${f};`).join("\n");
+  const themeCtor = themeFields.map(([f]) => `    required this.${f},`).join("\n");
+  const themeLight = themeFields
+    .map(([f, t]) => {
+      const src = f === "colors" ? "ShUiColorTokens.light" : `${t}.tokens`;
+      return `    ${f}: ${src},`;
+    })
+    .join("\n");
+  const themeDark = themeFields
+    .map(([f, t]) => {
+      const src = f === "colors" ? "ShUiColorTokens.dark" : `${t}.tokens`;
+      return `    ${f}: ${src},`;
+    })
+    .join("\n");
+  const copyParams = themeFields.map(([f, t]) => `${t}? ${f}`).join(", ");
+  const copyBody = themeFields.map(([f]) => `${f}: ${f} ?? this.${f}`).join(", ");
+
+  const themeClass = `class ShUiTheme extends ThemeExtension<ShUiTheme> {
+${themeDecls}
+
+  const ShUiTheme({
+${themeCtor}
+  });
+
+  static const light = ShUiTheme(
+${themeLight}
+  );
+  static const dark = ShUiTheme(
+${themeDark}
+  );
+
+  @override
+  ShUiTheme copyWith({${copyParams}}) =>
+      ShUiTheme(${copyBody});
+
+  @override
+  ShUiTheme lerp(ThemeExtension<ShUiTheme>? other, double t) {
+    if (other is! ShUiTheme) return this;
+    return t < 0.5 ? this : other;
+  }
+}`;
+
+  const header = `// Generated by @sh-ui/tokens — do not edit directly
+// base=${config.theme.base} radius=${config.theme.radius} mode=${config.theme.mode}
+
+import 'package:flutter/material.dart';
+`;
+
+  return `${header}\n${classes.join("\n\n")}\n\n${themeClass}\n`;
+}
+
+/* ───────── CLI ───────── */
+
+if (import.meta.url === `file://${process.argv[1]}`) {
+  const configPath = resolve(REPO_ROOT, "sh-ui.config.example.json");
+  const config = JSON.parse(await readFile(configPath, "utf8"));
+  const outDir = resolve(__dirname, "dist");
+  await mkdir(outDir, { recursive: true });
+
+  const css = await buildTokensCss(config);
+  const cssPath = resolve(outDir, "tokens.css");
+  await writeFile(cssPath, css, "utf8");
+  console.log(`✓ ${cssPath}`);
+
+  const dart = await buildTokensDart(config);
+  const dartPath = resolve(outDir, "sh_ui_tokens.dart");
+  await writeFile(dartPath, dart, "utf8");
+  console.log(`✓ ${dartPath}`);
+}