sh-ui-cli 0.61.4 → 0.63.0

package/data/changelog/versions.json

@@ -2,6 +2,30 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$description": "sh-ui 릴리즈 노트 단일 소스. docs(React)와 showcase(Flutter)가 함께 읽는다. 새 릴리즈마다 맨 앞에 추가.",
   "versions": [
+    {
+      "version": "0.63.0",
+      "date": "2026-05-08",
+      "title": "minor — `theme` 컴포넌트 제거, 사용자가 next-themes 직접 사용",
+      "type": "minor",
+      "highlights": [
+        "**`sh-ui add theme` 제거** — registry/react/components/theme 폴더와 registry.json 의 theme 항목 삭제. v0.62.0 의 어댑터는 결국 next-themes 의 얇은 wrapper 였고, 이중 layer 가 외부 deps 안내 누락 같은 잔버그를 부르던 구조. 사용자는 templates RootLayout 에 깔린 next-themes 의 ThemeProvider 위에서 `useTheme` 를 직접 import 해 쓴다.",
+        "**마이그레이션 (v0.62.0 사용자)** — `import { useTheme } from '@workspace/ui-web/components/theme'` → `import { useTheme } from 'next-themes'`. 시그니처 차이: sh-ui 의 `theme` 은 light/dark 만, next-themes 는 `resolvedTheme` 사용 (`'system'` 가능). 토글은 `setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')` 패턴.",
+        "**docs 자체도 next-themes 직접 사용으로 마이그레이션** — `apps/docs/components/dark-mode-toggle.tsx`, `apps/docs/app/[locale]/layout.tsx` 가 더 이상 sh-ui registry 의 theme 에 의존하지 않음. 컴포넌트 문서 페이지·examples(theme-dashboard, theme-login) 도 함께 정리."
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.63.0"
+    },
+    {
+      "version": "0.62.0",
+      "date": "2026-05-08",
+      "title": "minor — `theme` 컴포넌트가 next-themes 어댑터로 통합 (RootLayout 자동 wiring)",
+      "type": "minor",
+      "highlights": [
+        "**`sh-ui add theme` 의 `useTheme` / `ThemeProvider` 가 next-themes 위에서 동작** — 템플릿이 RootLayout 에 이미 깔아둔 next-themes ThemeProvider 와 동일한 컨텍스트를 공유. 사용자가 add 후 어디서든 `useTheme` 호출 시 throw 없이 즉시 동작. 이전엔 templates 의 next-themes 와 sh-ui 자체 cookie ThemeProvider 두 시스템이 분리돼 있어 혼선.",
+        "**시그니처는 보존, 내부 영속화는 cookie → next-themes localStorage 로 이전** — `{ theme, setTheme, toggleTheme }` 와 `light`/`dark` 두 값만 노출하는 정책 그대로. 사용자 코드는 변경 불필요. 다만 기존 `sh-ui-theme` cookie 값은 새 키로 자동 마이그레이션되지 않음(첫 방문 시 defaultTheme 으로 초기화).",
+        "**registry.json `theme.dependencies` 에 `next-themes` 추가** — `sh-ui add theme` 시 외부 패키지 자동 설치 안내에 포함. peer-versions.json 에 `^0.4.6` 핀."
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.62.0"
+    },
     {
       "version": "0.61.4",
       "date": "2026-05-08",

package/data/registry/react/registry.json

@@ -1768,18 +1768,6 @@
         "utils"
       ]
     },
-    "theme": {
-      "name": "theme",
-      "type": "component",
-      "files": [
-        {
-          "src": "components/theme/index.tsx",
-          "dest": "{components}/theme/index.tsx"
-        }
-      ],
-      "dependencies": [],
-      "registryDependencies": []
-    },
     "checkbox": {
       "name": "checkbox",
       "type": "component",

package/data/summaries/react.json

@@ -37,7 +37,6 @@
     "spinner": "로딩 스피너 — size.",
     "separator": "구분선 — orientation(horizontal/vertical).",
     "skeleton": "스켈레톤 로딩 플레이스홀더.",
-    "theme": "테마 프로바이더 + useTheme 훅 — light/dark/system.",
     "code-panel": "Shiki 기반 코드 하이라이트 패널 — 복사 버튼 포함.",
     "code-tabs": "여러 코드 뷰(예: React/Flutter, 강조/전체)를 탭으로 전환 — Tabs + CodePanel 합성, 각 탭 내용은 CodePanelProps 그대로.",
     "page-toc": "페이지 자동 목차 — 헤딩 스캔 · slugify · IntersectionObserver active 추적 · smooth scroll. routeKey 로 라우트 변경 자동 재스캔, levels/excludeSelector 커스터마이즈.",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sh-ui-cli",
-  "version": "0.61.4",
+  "version": "0.63.0",
   "description": "sh-ui CLI — 프로젝트 스캐폴드(create) + 컴포넌트 추가(add/list/remove) + IDE-내 AI용 MCP 서버",
   "license": "MIT",
   "repository": {

package/data/registry/react/components/theme/index.tsx

@@ -1,108 +0,0 @@
-"use client";
-
-import * as React from "react";
-
-type Theme = "light" | "dark";
-
-const THEME_COOKIE_NAME = "sh-ui-theme";
-const THEME_COOKIE_MAX_AGE = 60 * 60 * 24 * 365;
-
-/* ───────────── Context ───────────── */
-
-type ThemeContextValue = {
-  theme: Theme;
-  setTheme: (theme: Theme) => void;
-  toggleTheme: () => void;
-};
-
-const ThemeContext = React.createContext<ThemeContextValue | null>(null);
-
-/** 현재 테마와 setter를 반환한다. ThemeProvider 안에서만 호출 가능. */
-export function useTheme() {
-  const ctx = React.useContext(ThemeContext);
-  if (!ctx) throw new Error("useTheme must be used within a ThemeProvider.");
-  return ctx;
-}
-
-/* ───────────── Provider ───────────── */
-
-export interface ThemeProviderProps {
-  /**
-   * SSR 시 쿠키에서 읽은 초기 테마. 클라이언트 첫 렌더와 SSR 마크업이 일치하도록
-   * 서버에서 쿠키를 읽어 주입해야 hydration mismatch가 없다.
-   *
-   * @default "light"
-   * @example
-   * // Next.js App Router
-   * const t = (await cookies()).get("sh-ui-theme")?.value;
-   * <ThemeProvider defaultTheme={t === "dark" ? "dark" : "light"}>
-   */
-  defaultTheme?: Theme;
-  /**
-   * 외부에서 테마를 제어할 때 사용. 지정하면 내부 state 대신 이 값이 우선한다.
-   * 보통 `defaultTheme` 비제어 모드로 충분.
-   */
-  theme?: Theme;
-  /** 테마 변경 콜백. 제어 모드에서는 이 콜백 안에서 외부 상태를 업데이트해야 한다. */
-  onThemeChange?: (theme: Theme) => void;
-  children: React.ReactNode;
-}
-
-/**
- * 다크/라이트 테마 컨텍스트와 `<html class="dark">` 토글, 쿠키 영속화를 담당하는 Provider.
- * SSR 하이드레이션 시프트를 피하려면 서버에서 쿠키를 읽어 `defaultTheme`로 주입할 것.
- */
-export function ThemeProvider({
-  defaultTheme = "light",
-  theme: themeProp,
-  onThemeChange,
-  children,
-}: ThemeProviderProps) {
-  const [_theme, _setTheme] = React.useState<Theme>(defaultTheme);
-  const theme = themeProp ?? _theme;
-
-  // SSR 폴백 보정 — force-static 페이지에서는 cookies() 가 throw 해 defaultTheme 이
-  // 항상 "light" 로 들어온다. mount 시 cookie 를 직접 읽어 React state 와 documentElement
-  // 클래스를 사용자가 마지막에 고른 값으로 동기화. 비제어 모드에서만.
-  React.useEffect(() => {
-    if (themeProp !== undefined) return;
-    if (typeof document === "undefined") return;
-    const m = document.cookie.match(/(?:^|; )sh-ui-theme=(dark|light)/);
-    if (!m) return;
-    const fromCookie = m[1] as Theme;
-    _setTheme(fromCookie);
-    const root = document.documentElement.classList;
-    root.toggle("dark", fromCookie === "dark");
-    root.toggle("light", fromCookie === "light");
-  }, [themeProp]);
-
-  const setTheme = React.useCallback(
-    (next: Theme) => {
-      if (onThemeChange) onThemeChange(next);
-      else _setTheme(next);
-
-      if (typeof document !== "undefined") {
-        const root = document.documentElement.classList;
-        root.toggle("dark", next === "dark");
-        root.toggle("light", next === "light");
-        document.cookie = `${THEME_COOKIE_NAME}=${next}; path=/; max-age=${THEME_COOKIE_MAX_AGE}`;
-      }
-    },
-    [onThemeChange],
-  );
-
-  const toggleTheme = React.useCallback(() => {
-    setTheme(theme === "dark" ? "light" : "dark");
-  }, [theme, setTheme]);
-
-  const value = React.useMemo<ThemeContextValue>(
-    () => ({ theme, setTheme, toggleTheme }),
-    [theme, setTheme, toggleTheme],
-  );
-
-  return (
-    <ThemeContext.Provider value={value}>
-      {children}
-    </ThemeContext.Provider>
-  );
-}