sh-ui-cli 0.83.0 → 0.85.0

package/data/changelog/versions.json

@@ -2,6 +2,32 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$description": "sh-ui 릴리즈 노트 단일 소스. docs(React)와 showcase(Flutter)가 함께 읽는다. 새 릴리즈마다 맨 앞에 추가.",
   "versions": [
+    {
+      "version": "0.85.0",
+      "date": "2026-05-13",
+      "title": "Sidebar floating variant — --sidebar-floating-padding 토큰 + icon collapsed 폭 자동 보정",
+      "type": "minor",
+      "highlights": [
+        "**`--sidebar-floating-padding` 토큰 신설 (DX 3)** — floating variant 의 outer 카드 가장자리 spacing 이 `var(--space-2)` 하드코딩이라 사용자가 키우려고 outer padding override 시 inner 카드 height calc 가 추종 안 돼 하단이 잘리던 결함. outer padding · inner height(`100svh - 2 * floating-padding`) · inner top 모두 같은 변수 참조. `<SidebarProvider style={{ ['--sidebar-floating-padding']: '0.75rem' }}>` 으로 한 번에 조정.",
+        "**floating + icon collapsed 폭 자동 보정 (DX 2)** — outer aside 48px 에서 floating padding 16px 빼면 inner 카드가 32px 로 옹색해지던 결함. `[data-variant=\"floating\"][data-collapsible=\"icon\"]` 조합 시 outer width = `--sidebar-width-icon + 2 * --sidebar-floating-padding` 으로 자동 보정. inner usable 폭이 non-floating 의 48px 와 동일. 사용자가 매번 `--sidebar-width-icon` 을 inline style 로 보정하던 atlas 워크어라운드 일소.",
+        "**v0.82.2 changelog 정정** — 이전 \"알려진 이슈\" 로 기록한 `@base-ui/react@1.4.1` id mismatch 는 Base UI 결함이 **아니었음**. atlas 측 `zustand + persist` 미들웨어 (`useSyncExternalStore` 통합) 가 Next.js 16 streaming SSR 의 트리 일관성을 어긋나게 만들어 React `useId()` 가 인코딩하는 트리 path 가 server/client 에서 달라진 것. atlas 가 zustand 를 React Query (server state) + cookie-backed hook (client state) 로 대체하니 모든 hydration mismatch 즉시 해소. Base UI 1.4.1 그대로 사용 안전. v0.82.2 entry 의 알려진 이슈 줄 제거.",
+        "3 변종 모두 적용 — plain `styles.css` / module `styles.module.css` 의 floating 블록 + tailwind `sidebarRoot` 의 padding · innerWrap height/top. 모두 토큰의 fallback `var(--space-2)` 를 그대로 유지해 기존 동작 동일."
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.85.0"
+    },
+    {
+      "version": "0.84.0",
+      "date": "2026-05-13",
+      "title": "Sidebar — Brand 컴파운드 primitive (브랜드 카드 · 워크스페이스 스위처 · 유저 프로필)",
+      "type": "minor",
+      "highlights": [
+        "**`SidebarBrand` 컴파운드 primitive 신설 — 브랜드 카드 / 워크스페이스 스위처 / 유저 프로필 의 90% 를 커버** — `<SidebarHeader>` / `<SidebarFooter>` 안에서 매번 박던 패턴 (icon + title + subtitle + trailing chevron) 을 단일 합성으로. Card/Dialog 와 동일한 separate-exports 컨벤션.",
+        "**Exports (6개)**: `SidebarBrand` (행 wrapper, 내부 `data-when-collapsed=\"center\"` 자동 적용) · `SidebarBrandIcon` (항상 visible, collapsed 시 sole 요소) · `SidebarBrandText` (`data-when-collapsed=\"hide\"`) · `SidebarBrandTitle` (단일 줄 본문, truncate 내장) · `SidebarBrandSubtitle` (보조 줄, foreground-muted) · `SidebarBrandAction` (`data-when-collapsed=\"hide\"`, ml-auto trailing icon).",
+        "**v0.83.0 의 `data-when-collapsed` 컨벤션 내장** — 사용자가 attribute 박지 않아도 collapsible=\"icon\" 모드 전환 시 자동 적응. 인터랙티브 케이스는 `<DropdownMenuTrigger render={<button data-when-collapsed=\"strip-chrome\" />}>` 로 wrap.",
+        "**3 변종 모두 지원** — plain `styles.css` / module `styles.module.css` 에 룰 직접, tailwind 변종은 utility 클래스로 동등 스타일. 듀얼카피 (apps/docs) 동기화."
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.84.0"
+    },
     {
       "version": "0.83.0",
       "date": "2026-05-13",
@@ -30,8 +56,7 @@
       "title": "RootLayout themeInitScript 가 'system' 케이스 누락하던 FOUC 결함 수정",
       "type": "patch",
       "highlights": [
-        "**RootLayout 의 FOUC 차단 inline script 가 `theme === 'system'` 케이스를 처리 안 해 새로고침 시 light → dark 깜빡임이 남던 결함 수정** — 기존 스크립트는 `t === 'dark'` 또는 `!t && system pref dark` 만 처리, `t === 'system'` 일 땐 next-themes 가 resolve 한 후에야 `.dark` 가 박혀 한 frame 흰 깜빡임. next-themes 의 `setTheme('system')` 호출 직후 localStorage 에 `'system'` 문자열이 들어가는데 이 케이스가 누락. matrix 정정: `'dark'` → `.dark`, `'light'` → none, `'system'`/unset → system pref 따라감. 6개 RootLayout 템플릿 (nextjs-app · nextjs-standalone × flat/mes/fsd) 일괄 수정.",
-        "**알려진 이슈 (이번 릴리즈 미반영)** — `@base-ui/react` 1.4.1 의 id 생성기가 Dialog/DropdownMenu/Popover Trigger 에서 server/client id 불일치로 hydration mismatch console error 발생. upstream 이슈 — 1.4.1 이 npm 최신이라 dep bump 로 해결 불가. 기능 영향은 없고 console error 만 뜸. 향후 Base UI 픽스 버전 나오면 peerDep 갱신."
+        "**RootLayout 의 FOUC 차단 inline script 가 `theme === 'system'` 케이스를 처리 안 해 새로고침 시 light → dark 깜빡임이 남던 결함 수정** — 기존 스크립트는 `t === 'dark'` 또는 `!t && system pref dark` 만 처리, `t === 'system'` 일 땐 next-themes 가 resolve 한 후에야 `.dark` 가 박혀 한 frame 흰 깜빡임. next-themes 의 `setTheme('system')` 호출 직후 localStorage 에 `'system'` 문자열이 들어가는데 이 케이스가 누락. matrix 정정: `'dark'` → `.dark`, `'light'` → none, `'system'`/unset → system pref 따라감. 6개 RootLayout 템플릿 (nextjs-app · nextjs-standalone × flat/mes/fsd) 일괄 수정."
       ],
       "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.82.2"
     },

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

@@ -511,6 +511,66 @@ export function SidebarFooter({ className, ...props }: React.HTMLAttributes<HTML
   );
 }
 
+/* ───────────── Brand (compound primitive, v0.84.0+) ─────────────
+ * data-when-collapsed 컨벤션 내장. plain 변종 주석 참고. */
+
+export function SidebarBrand({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-when-collapsed="center"
+      className={cn(styles.sidebar__brand, className)}
+      {...props}
+    />
+  );
+}
+
+export function SidebarBrandIcon({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(styles.sidebar__brand_icon, className)}
+      {...props}
+    />
+  );
+}
+
+export function SidebarBrandText({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-when-collapsed="hide"
+      className={cn(styles.sidebar__brand_text, className)}
+      {...props}
+    />
+  );
+}
+
+export function SidebarBrandTitle({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(styles.sidebar__brand_title, className)}
+      {...props}
+    />
+  );
+}
+
+export function SidebarBrandSubtitle({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(styles.sidebar__brand_subtitle, className)}
+      {...props}
+    />
+  );
+}
+
+export function SidebarBrandAction({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-when-collapsed="hide"
+      className={cn(styles.sidebar__brand_action, className)}
+      {...props}
+    />
+  );
+}
+
 /** Sidebar의 스크롤 영역. 메뉴/그룹 목록을 둔다. */
 export function SidebarContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
   return (

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

@@ -172,8 +172,10 @@ export interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
   collapsible?: "offcanvas" | "icon" | "none";
 }
 
+// v0.85.0+ — floating variant 의 outer padding + inner h/top 이 모두 --sidebar-floating-padding
+// 토큰 (default var(--space-2)) 을 추종. DX 2: floating+icon collapsed 시 outer width 자동 보정.
 const sidebarRoot =
-  "flex flex-col w-[var(--sidebar-width)] shrink-0 bg-[var(--sidebar-bg)] text-[var(--sidebar-fg)] border-r border-[var(--sidebar-border)] transition-[width] duration-[var(--duration-slow)] relative z-[5] data-[side=right]:border-r-0 data-[side=right]:border-l data-[side=right]:order-1 data-[state=collapsed]:data-[collapsible=offcanvas]:w-0 data-[state=collapsed]:data-[collapsible=offcanvas]:border-r-0 data-[state=collapsed]:data-[collapsible=offcanvas]:border-l-0 data-[state=collapsed]:data-[collapsible=offcanvas]:overflow-hidden data-[state=collapsed]:data-[collapsible=icon]:w-[var(--sidebar-width-icon)] data-[variant=floating]:border-none data-[variant=floating]:p-[var(--space-2)] data-[variant=floating]:bg-transparent data-[variant=inset]:bg-transparent data-[variant=inset]:border-none motion-reduce:transition-none";
+  "flex flex-col w-[var(--sidebar-width)] shrink-0 bg-[var(--sidebar-bg)] text-[var(--sidebar-fg)] border-r border-[var(--sidebar-border)] transition-[width] duration-[var(--duration-slow)] relative z-[5] data-[side=right]:border-r-0 data-[side=right]:border-l data-[side=right]:order-1 data-[state=collapsed]:data-[collapsible=offcanvas]:w-0 data-[state=collapsed]:data-[collapsible=offcanvas]:border-r-0 data-[state=collapsed]:data-[collapsible=offcanvas]:border-l-0 data-[state=collapsed]:data-[collapsible=offcanvas]:overflow-hidden data-[state=collapsed]:data-[collapsible=icon]:w-[var(--sidebar-width-icon)] data-[state=collapsed]:data-[collapsible=icon]:data-[variant=floating]:w-[calc(var(--sidebar-width-icon)+2*var(--sidebar-floating-padding,var(--space-2)))] data-[variant=floating]:border-none data-[variant=floating]:p-[var(--sidebar-floating-padding,var(--space-2))] data-[variant=floating]:bg-transparent data-[variant=inset]:bg-transparent data-[variant=inset]:border-none motion-reduce:transition-none";
 
 export function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas", className, children, ...props }: SidebarProps) {
   const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
@@ -198,7 +200,7 @@ export function Sidebar({ side = "left", variant = "sidebar", collapsible = "off
 
   const innerWrap =
     variant === "floating"
-      ? "flex flex-col h-[calc(100svh-1rem)] sticky top-[var(--space-2)] overflow-hidden border border-[var(--sidebar-border)] rounded-[var(--radius)] bg-[var(--sidebar-bg)]"
+      ? "flex flex-col h-[calc(100svh-2*var(--sidebar-floating-padding,var(--space-2)))] sticky top-[var(--sidebar-floating-padding,var(--space-2))] overflow-hidden border border-[var(--sidebar-border)] rounded-[var(--radius)] bg-[var(--sidebar-bg)]"
       : "flex flex-col h-[100svh] sticky top-0 overflow-hidden";
 
   return wrap(
@@ -352,6 +354,66 @@ export function SidebarFooter({ className, ...props }: React.HTMLAttributes<HTML
   return <div className={cn("flex flex-col gap-[var(--space-2)] p-[var(--space-2)] overflow-hidden", className)} {...props} />;
 }
 
+/* ───────────── Brand (compound primitive, v0.84.0+) ─────────────
+ * data-when-collapsed 컨벤션 내장. plain 변종 주석 참고. */
+
+export function SidebarBrand({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-when-collapsed="center"
+      className={cn("flex flex-row items-center gap-[var(--space-2)] px-[var(--space-2)] py-[var(--space-2)] rounded-[var(--radius)] min-w-0", className)}
+      {...props}
+    />
+  );
+}
+
+export function SidebarBrandIcon({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("flex items-center justify-center shrink-0 size-8 rounded-[calc(var(--radius)-2px)]", className)}
+      {...props}
+    />
+  );
+}
+
+export function SidebarBrandText({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-when-collapsed="hide"
+      className={cn("flex flex-col flex-1 min-w-0 gap-0", className)}
+      {...props}
+    />
+  );
+}
+
+export function SidebarBrandTitle({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("text-[length:var(--text-sm)] font-[var(--weight-medium)] leading-tight truncate text-[color:var(--sidebar-fg)]", className)}
+      {...props}
+    />
+  );
+}
+
+export function SidebarBrandSubtitle({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("text-[length:var(--text-xs)] leading-tight truncate text-[color:var(--foreground-muted)]", className)}
+      {...props}
+    />
+  );
+}
+
+export function SidebarBrandAction({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-when-collapsed="hide"
+      className={cn("ml-auto shrink-0 flex items-center justify-center", className)}
+      {...props}
+    />
+  );
+}
+
 export function SidebarContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
   return <div className={cn("flex flex-col flex-1 min-h-0 overflow-y-auto gap-0", className)} {...props} />;
 }

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

@@ -521,6 +521,92 @@ export function SidebarFooter({ className, ...props }: React.HTMLAttributes<HTML
   );
 }
 
+/* ───────────── Brand (compound primitive, v0.84.0+) ─────────────
+ * SidebarHeader / SidebarFooter 의 흔한 패턴 (브랜드 카드 · 워크스페이스 스위처 ·
+ * 유저 프로필) 의 90% 를 커버. data-when-collapsed 컨벤션을 내장해 사용자가
+ * attribute 박지 않아도 collapsed/icon 모드 자동 적응.
+ *
+ * 정적 예시:
+ *   <SidebarBrand>
+ *     <SidebarBrandIcon><Logo /></SidebarBrandIcon>
+ *     <SidebarBrandText>
+ *       <SidebarBrandTitle>Atlas</SidebarBrandTitle>
+ *       <SidebarBrandSubtitle>workspace</SidebarBrandSubtitle>
+ *     </SidebarBrandText>
+ *   </SidebarBrand>
+ *
+ * 인터랙티브 (워크스페이스 스위처):
+ *   <DropdownMenu>
+ *     <DropdownMenuTrigger render={<button data-when-collapsed='strip-chrome' />}>
+ *       <SidebarBrand>...</SidebarBrand>
+ *     </DropdownMenuTrigger>
+ *     ...
+ *   </DropdownMenu>
+ */
+
+/** 브랜드 행 wrapper. collapsed 일 땐 가운데 정렬 + 좌우 padding 0 (data-when-collapsed=center 내장). */
+export function SidebarBrand({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-when-collapsed="center"
+      className={cn("sh-ui-sidebar__brand", className)}
+      {...props}
+    />
+  );
+}
+
+/** 항상 visible 한 아이콘 슬롯. collapsed 일 땐 SidebarBrand 의 유일한 요소. */
+export function SidebarBrandIcon({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("sh-ui-sidebar__brand-icon", className)}
+      {...props}
+    />
+  );
+}
+
+/** 텍스트 컨테이너. collapsed 일 땐 hidden (data-when-collapsed=hide 내장). */
+export function SidebarBrandText({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-when-collapsed="hide"
+      className={cn("sh-ui-sidebar__brand-text", className)}
+      {...props}
+    />
+  );
+}
+
+/** 단일 줄 본문 (편의) — sh-ui-sidebar__brand-title 클래스만 박는다. */
+export function SidebarBrandTitle({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("sh-ui-sidebar__brand-title", className)}
+      {...props}
+    />
+  );
+}
+
+/** 보조 줄 — sh-ui-sidebar__brand-subtitle. text-foreground-muted + text-xs. */
+export function SidebarBrandSubtitle({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("sh-ui-sidebar__brand-subtitle", className)}
+      {...props}
+    />
+  );
+}
+
+/** Trailing icon (드롭다운 chevron 등). collapsed 일 땐 hidden. */
+export function SidebarBrandAction({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-when-collapsed="hide"
+      className={cn("sh-ui-sidebar__brand-action", className)}
+      {...props}
+    />
+  );
+}
+
 /** Sidebar의 스크롤 영역. 메뉴/그룹 목록을 둔다. */
 export function SidebarContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
   return (

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

@@ -83,18 +83,26 @@
   padding: var(--space-2);
 }
 
-/* variant: floating */
+/* variant: floating
+ * --sidebar-floating-padding (v0.85.0+) — 카드 가장자리 spacing. SidebarProvider 에
+ *   inline style 로 덮어쓰면 outer padding + inner height/top 자동 추종.
+ *   기본 var(--space-2). */
 .sh-ui-sidebar[data-variant="floating"] {
   border: none;
-  padding: var(--space-2);
+  padding: var(--sidebar-floating-padding, var(--space-2));
   background: transparent;
 }
 .sh-ui-sidebar[data-variant="floating"] .sh-ui-sidebar__inner {
   border: 1px solid var(--sidebar-border);
   border-radius: var(--radius);
   background: var(--sidebar-bg);
-  height: calc(100svh - 1rem);
-  top: var(--space-2);
+  height: calc(100svh - 2 * var(--sidebar-floating-padding, var(--space-2)));
+  top: var(--sidebar-floating-padding, var(--space-2));
+}
+/* DX 2 (v0.85.0+) — floating + icon collapsed 조합 시 outer width 자동 보정.
+ * outer = icon + 2 * floating-padding 으로 키워 inner usable 폭을 non-floating 과 동일하게 유지. */
+.sh-ui-sidebar[data-state="collapsed"][data-collapsible="icon"][data-variant="floating"] {
+  width: calc(var(--sidebar-width-icon) + 2 * var(--sidebar-floating-padding, var(--space-2)));
 }
 
 /* variant: inset (메인 영역이 카드 형태) */
@@ -318,6 +326,57 @@
   background-color: transparent;
 }
 
+/* ───────────── Brand (compound primitive, v0.84.0+) ───────────── */
+.sh-ui-sidebar__brand {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2);
+  border-radius: var(--radius);
+  min-width: 0;
+}
+.sh-ui-sidebar__brand-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 2rem;
+  height: 2rem;
+  border-radius: calc(var(--radius) - 2px);
+}
+.sh-ui-sidebar__brand-text {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 0%;
+  min-width: 0;
+  gap: 0;
+}
+.sh-ui-sidebar__brand-title {
+  font-size: var(--text-sm);
+  font-weight: var(--weight-medium);
+  line-height: 1.25;
+  color: var(--sidebar-fg);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.sh-ui-sidebar__brand-subtitle {
+  font-size: var(--text-xs);
+  line-height: 1.25;
+  color: var(--foreground-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.sh-ui-sidebar__brand-action {
+  margin-left: auto;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .sh-ui-sidebar__content {
   display: flex;
   flex-direction: column;

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

@@ -83,18 +83,22 @@
   padding: var(--space-2);
 }
 
-/* variant: floating */
+/* variant: floating — --sidebar-floating-padding (v0.85.0+) cascaded variable */
 .sidebar[data-variant="floating"] {
   border: none;
-  padding: var(--space-2);
+  padding: var(--sidebar-floating-padding, var(--space-2));
   background: transparent;
 }
 .sidebar[data-variant="floating"] .sidebar__inner {
   border: 1px solid var(--sidebar-border);
   border-radius: var(--radius);
   background: var(--sidebar-bg);
-  height: calc(100svh - 1rem);
-  top: var(--space-2);
+  height: calc(100svh - 2 * var(--sidebar-floating-padding, var(--space-2)));
+  top: var(--sidebar-floating-padding, var(--space-2));
+}
+/* DX 2 (v0.85.0+) — floating + icon outer width 자동 보정 */
+.sidebar[data-state="collapsed"][data-collapsible="icon"][data-variant="floating"] {
+  width: calc(var(--sidebar-width-icon) + 2 * var(--sidebar-floating-padding, var(--space-2)));
 }
 
 /* variant: inset (메인 영역이 카드 형태) */
@@ -301,6 +305,57 @@
   background-color: transparent;
 }
 
+/* ───────────── Brand (compound primitive, v0.84.0+) ───────────── */
+.sidebar__brand {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2);
+  border-radius: var(--radius);
+  min-width: 0;
+}
+.sidebar__brand_icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 2rem;
+  height: 2rem;
+  border-radius: calc(var(--radius) - 2px);
+}
+.sidebar__brand_text {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 0%;
+  min-width: 0;
+  gap: 0;
+}
+.sidebar__brand_title {
+  font-size: var(--text-sm);
+  font-weight: var(--weight-medium);
+  line-height: 1.25;
+  color: var(--sidebar-fg);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.sidebar__brand_subtitle {
+  font-size: var(--text-xs);
+  line-height: 1.25;
+  color: var(--foreground-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.sidebar__brand_action {
+  margin-left: auto;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .sidebar__content {
   display: flex;
   flex-direction: column;

package/data/registry/react/tokens-used.json

@@ -1,6 +1,6 @@
 {
   "$description": "컴포넌트별 토큰 의존성 (var(--*) 추출). build-registry-tokens.mjs 가 자동 생성.",
-  "$generated": "2026-05-12T23:53:11.079Z",
+  "$generated": "2026-05-13T03:22:30.348Z",
   "components": {
     "button": {
       "plain": [
@@ -678,6 +678,7 @@
         "--duration-fast",
         "--duration-slow",
         "--foreground",
+        "--foreground-muted",
         "--opacity-disabled",
         "--radius",
         "--shadow-xl",
@@ -688,6 +689,7 @@
         "--text-lg",
         "--text-sm",
         "--text-xs",
+        "--weight-medium",
         "--z-modal",
         "--z-overlay"
       ],

package/package.json

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