sh-ui-cli 0.82.2 → 0.83.0

package/data/changelog/versions.json

@@ -2,6 +2,28 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$description": "sh-ui 릴리즈 노트 단일 소스. docs(React)와 showcase(Flutter)가 함께 읽는다. 새 릴리즈마다 맨 앞에 추가.",
   "versions": [
+    {
+      "version": "0.83.0",
+      "date": "2026-05-13",
+      "title": "Sidebar — data-when-collapsed 컨벤션 (custom JSX 의 collapsed/icon 자동 적응)",
+      "type": "minor",
+      "highlights": [
+        "**`<SidebarHeader>` / `<SidebarFooter>` 안 사용자 custom JSX 가 `collapsible=\"icon\"` 모드 전환 시 `useSidebar()` 훅 + 조건부 렌더 ceremony 없이 attribute 한 줄로 자동 적응** — 새 export 0개, 발견성 좋은 plain CSS 컨벤션. 값 (공백 구분 다중 토큰, `~=` 매처): `hide` (display:none) · `center` (가운데 정렬 + 좌우 padding 제거) · `strip-chrome` (border / background 투명). 워크스페이스 스위처 · 브랜드 카드 · 유저 프로필 등 admin/dashboard sidebar 의 흔한 패턴에 매번 박던 수동 처리 일소.",
+        "예시 — `<button data-when-collapsed=\"center strip-chrome\">  <Avatar />  <div data-when-collapsed=\"hide\">{name}</div>  <ChevronsUpDown data-when-collapsed=\"hide\" /></button>` — collapsed 모드에선 Avatar 만 가운데 정렬돼 보이고 카드 chrome 사라짐.",
+        "**3 변종 모두 지원** — plain `styles.css` / module `styles.module.css` 에 직접 룰. tailwind 변종은 CSS import 없어 `SidebarProvider` mount 시 1회 head 에 `<style id=\"sh-ui-sidebar-helpers\">` inject (모듈 레벨 dedup). 사용자 코드는 변종 무관 동일 attribute 만 박으면 됨."
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.83.0"
+    },
+    {
+      "version": "0.82.3",
+      "date": "2026-05-13",
+      "title": "스캐폴드 dependencies 에서 미사용 zustand 제거",
+      "type": "patch",
+      "highlights": [
+        "**`nextjs-app` / `nextjs-standalone` 템플릿의 `dependencies` 에서 `zustand@^5.0.11` 제거** — 두 템플릿에 박혀 있었지만 어디서도 import / store 정의 없이 dep 만 설치되던 노이즈. 필요할 때 사용자가 `pnpm add zustand` 한 줄로 추가. 번들 영향은 처음부터 없었지만 (tree-shaken) `pnpm install` 시간 / lockfile / dep 표면적이 줄어듦."
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.82.3"
+    },
     {
       "version": "0.82.2",
       "date": "2026-05-13",

package/data/registry/react/components/sidebar/index.tailwind.tsx

@@ -10,6 +10,29 @@ const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 const SIDEBAR_KEYBOARD_SHORTCUT = "b";
 const MOBILE_BREAKPOINT = 768;
 
+/**
+ * v0.83.0+ — `data-when-collapsed` 컨벤션을 위한 CSS 룰 inject.
+ *
+ * plain/module 변종은 styles.css/.module.css 가 import 되며 자동으로 룰이 깔리는데,
+ * tailwind 변종은 별도 CSS import 가 없으므로 SidebarProvider mount 시 한 번만 head
+ * 에 <style> 박는다. id="sh-ui-sidebar-helpers" 로 중복 inject 방지.
+ *
+ * 토큰: hide(display:none) · center(가운데 정렬 + 좌우 padding 0) · strip-chrome
+ * (border/bg 투명). `~=` 매처로 공백 구분 다중 토큰 지원.
+ */
+const SIDEBAR_HELPER_STYLE_ID = "sh-ui-sidebar-helpers";
+const SIDEBAR_HELPER_CSS = `[data-state="collapsed"][data-collapsible="icon"] [data-when-collapsed~="hide"]{display:none}[data-state="collapsed"][data-collapsible="icon"] [data-when-collapsed~="center"]{justify-content:center;padding-left:0;padding-right:0}[data-state="collapsed"][data-collapsible="icon"] [data-when-collapsed~="strip-chrome"]{border-color:transparent;background-color:transparent}`;
+function useSidebarHelperStyles() {
+  React.useEffect(() => {
+    if (typeof document === "undefined") return;
+    if (document.getElementById(SIDEBAR_HELPER_STYLE_ID)) return;
+    const style = document.createElement("style");
+    style.id = SIDEBAR_HELPER_STYLE_ID;
+    style.textContent = SIDEBAR_HELPER_CSS;
+    document.head.appendChild(style);
+  }, []);
+}
+
 const FOCUSABLE_SELECTOR =
   'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
 
@@ -77,6 +100,7 @@ export interface SidebarProviderProps extends React.HTMLAttributes<HTMLDivElemen
 export function SidebarProvider({
   defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children, embedded, ...props
 }: SidebarProviderProps) {
+  useSidebarHelperStyles();
   const isMobile = useIsMobile();
   const [openMobile, setOpenMobile] = React.useState(false);
   const [_open, _setOpen] = React.useState(defaultOpen);

package/data/registry/react/components/sidebar/styles.css

@@ -288,6 +288,36 @@
   border-bottom: 1px solid var(--sidebar-border);
 }
 
+/* ───────────── data-when-collapsed 컨벤션 (v0.83.0+) ─────────────
+ * SidebarHeader / SidebarFooter 안의 사용자 custom JSX (WorkspaceSwitcher,
+ * 브랜드 카드, 유저 프로필 등) 가 collapsible="icon" 모드 전환 시 자동
+ * 적응하도록 일반 attribute 컨벤션 제공. 사용자가 useSidebar() 훅 + 조건부
+ * 렌더 ceremony 없이 attribute 한 줄로 처리.
+ *
+ * 사용:
+ *   <button data-when-collapsed="center strip-chrome">
+ *     <Avatar />
+ *     <div data-when-collapsed="hide">{name}</div>
+ *     <ChevronsUpDown data-when-collapsed="hide" />
+ *   </button>
+ *
+ * 값(공백 구분 토큰 — `~=` 매처):
+ *   hide          — collapsed/icon 모드에서 display:none
+ *   center        — 가로 가운데 정렬 + 좌우 padding 제거
+ *   strip-chrome  — border / background 투명화 (카드 chrome 제거) */
+.sh-ui-sidebar[data-state="collapsed"][data-collapsible="icon"] [data-when-collapsed~="hide"] {
+  display: none;
+}
+.sh-ui-sidebar[data-state="collapsed"][data-collapsible="icon"] [data-when-collapsed~="center"] {
+  justify-content: center;
+  padding-left: 0;
+  padding-right: 0;
+}
+.sh-ui-sidebar[data-state="collapsed"][data-collapsible="icon"] [data-when-collapsed~="strip-chrome"] {
+  border-color: transparent;
+  background-color: transparent;
+}
+
 .sh-ui-sidebar__content {
   display: flex;
   flex-direction: column;

package/data/registry/react/components/sidebar/styles.module.css

@@ -285,6 +285,22 @@
   border-bottom: 1px solid var(--sidebar-border);
 }
 
+/* data-when-collapsed 컨벤션 (v0.83.0+) — 사용자 custom JSX (WorkspaceSwitcher 등) 가
+ * collapsible="icon" 모드 전환 시 자동 적응. 값: hide / center / strip-chrome.
+ * 자세한 설명은 plain 변종 styles.css 참고. */
+.sidebar[data-state="collapsed"][data-collapsible="icon"] [data-when-collapsed~="hide"] {
+  display: none;
+}
+.sidebar[data-state="collapsed"][data-collapsible="icon"] [data-when-collapsed~="center"] {
+  justify-content: center;
+  padding-left: 0;
+  padding-right: 0;
+}
+.sidebar[data-state="collapsed"][data-collapsible="icon"] [data-when-collapsed~="strip-chrome"] {
+  border-color: transparent;
+  background-color: transparent;
+}
+
 .sidebar__content {
   display: flex;
   flex-direction: column;

package/package.json

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

package/templates/nextjs-app/package.json

@@ -24,8 +24,7 @@
     "react-dom": "^19.2.4",
     "server-only": "^0.0.1",
     "sonner": "^2.0.7",
-    "zod": "^4.3.6",
-    "zustand": "^5.0.11"
+    "zod": "^4.3.6"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.18",

package/templates/nextjs-standalone/package.json

@@ -26,8 +26,7 @@
     "react-dom": "^19.2.4",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.5.0",
-    "zod": "^4.3.6",
-    "zustand": "^5.0.11"
+    "zod": "^4.3.6"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.2",