sh-ui-cli 0.81.0 → 0.82.1

package/data/changelog/versions.json

@@ -2,6 +2,31 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$description": "sh-ui 릴리즈 노트 단일 소스. docs(React)와 showcase(Flutter)가 함께 읽는다. 새 릴리즈마다 맨 앞에 추가.",
   "versions": [
+    {
+      "version": "0.82.1",
+      "date": "2026-05-13",
+      "title": "Sidebar / Header tailwind 변종의 결합 data 셀렉터 → Tailwind v4 호환 체이닝 수정",
+      "type": "patch",
+      "highlights": [
+        "**Sidebar tailwind 변종의 결합 data 셀렉터가 Tailwind v4 에서 미emit 되던 결함 수정** — `data-[state=collapsed][data-collapsible=offcanvas]:w-0` 류 형식이 Tailwind v4 파서에서 해석 안 되어 `<SidebarTrigger>` 클릭으로 `data-state` 가 토글돼도 width 가 그대로 유지되어 시각적으로 안 닫히던 결함. v4 호환 syntax (variant 체이닝) `data-[state=collapsed]:data-[collapsible=offcanvas]:w-0` 로 일괄 변환. offcanvas (w-0/border-r-0/border-l-0/overflow-hidden) + icon collapsible (w-[var(--sidebar-width-icon)]) 5개 selector 모두 적용.",
+        "**Header tailwind 변종의 동일 안티패턴 수정** — `data-[sticky-hide][data-hidden]:-translate-y-full` → `data-[sticky-hide]:data-[hidden]:-translate-y-full`. sticky-hide 모드의 스크롤-숨김 transform 이 적용 안 되던 결함 해소.",
+        "plain CSS / module CSS 변종은 영향 없음 — 처음부터 CSS attribute selector(`.sh-ui-sidebar[data-state=\"collapsed\"][data-collapsible=\"offcanvas\"]`) 라 정상 동작."
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.82.1"
+    },
+    {
+      "version": "0.82.0",
+      "date": "2026-05-13",
+      "title": "atlas P2 잔여 — Sidebar topbar 정렬 + 메뉴 사이즈 디폴트 다운 + DX 정리",
+      "type": "minor",
+      "highlights": [
+        "**`SidebarHeader` 에 `align=\"topbar\"` + `divider` prop 신설 (B8)** — admin/dashboard 의 좌 Sidebar 헤더와 우 Topbar 구분선이 4~5px 어긋나던 정렬 hack (`!h-14 !p-0 !flex-row` + SidebarSeparator 제거 + `border-b` 직접 박는 류) 영구 해결. `align=\"topbar\"` 가 56px(`3.5rem`) 가로 행 + 가로 패딩만 적용, `divider` 가 `border-bottom: 1px solid var(--sidebar-border)` 박는다. 두 옵션 조합 시 우 Topbar 의 border-bottom 과 픽셀 정렬.",
+        "**`SidebarMenuButton` / `SidebarMenuSubButton` / `SidebarCollapsibleTrigger` 의 size 디폴트 `md` → `sm` (D3)** — 일반 사이드바 패턴(28~32px) 톤에 맞춤. v0.81.0 의 `--control-md` 40→36px 다운과 결합돼 사이드바가 데스크탑 정보 밀집 화면에서 후하게 느껴지던 회귀 차단. atlas 실측에서 size 명시 24건 전부 `sm` 이었던 신호 반영.",
+        "**`create_project` 직후 출력에 베이스 컴포넌트 추가 힌트 1줄 (B6)** — 기존엔 `cd / pnpm install / pnpm dev` 3줄만 출력. monorepo 는 `cd .../packages/ui/ui-core` + `npx sh-ui-cli add button card input dialog`, standalone 은 `npx sh-ui-cli add ...` 만. MCP 사용자에게는 `sh_ui_add_component` 한 줄도 같이.",
+        "**`CodeEditor` 의 `language` 타입 `\"text\"` / `\"plaintext\"` 중복 단일화 (B3)** — 의미상 동일한 두 값이 공존해 사용자가 어느 쪽을 쓸지 모호하던 결함. `\"plaintext\"` 제거, `\"text\"` 만 유지. `language=\"plaintext\"` 사용처는 `\"text\"` 로 교체."
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.82.0"
+    },
     {
       "version": "0.81.0",
       "date": "2026-05-13",

package/data/registry/react/components/code-editor/index.module.tsx

@@ -15,7 +15,6 @@ import styles from "./styles.module.css";
 import { cn } from "@SH_UI_UTILS@";
 export type CodeEditorLanguage =
   | "text"
-  | "plaintext"
   | "javascript"
   | "typescript"
   | "jsx"
@@ -85,7 +84,6 @@ function languageExtension(language: CodeEditorLanguage): Extension {
     case "yaml":
       return yaml();
     case "text":
-    case "plaintext":
     default:
       return [];
   }

package/data/registry/react/components/code-editor/index.tailwind.tsx

@@ -13,7 +13,7 @@ import { yaml } from "@codemirror/lang-yaml";
 
 import { cn } from "@SH_UI_UTILS@";
 export type CodeEditorLanguage =
-  | "text" | "plaintext" | "javascript" | "typescript" | "jsx" | "tsx"
+  | "text" | "javascript" | "typescript" | "jsx" | "tsx"
   | "json" | "css" | "html" | "markdown" | "yaml";
 
 export interface CodeEditorProps {
@@ -45,7 +45,6 @@ function languageExtension(language: CodeEditorLanguage): Extension {
     case "markdown": return markdown();
     case "yaml": return yaml();
     case "text":
-    case "plaintext":
     default: return [];
   }
 }

package/data/registry/react/components/code-editor/index.tsx

@@ -15,7 +15,6 @@ import "./styles.css";
 import { cn } from "@SH_UI_UTILS@";
 export type CodeEditorLanguage =
   | "text"
-  | "plaintext"
   | "javascript"
   | "typescript"
   | "jsx"
@@ -85,7 +84,6 @@ function languageExtension(language: CodeEditorLanguage): Extension {
     case "yaml":
       return yaml();
     case "text":
-    case "plaintext":
     default:
       return [];
   }

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

@@ -150,7 +150,7 @@ export const Header = React.forwardRef<HTMLElement, HeaderProps>(function Header
       <header
         ref={setRefs}
         className={cn(
-          "relative flex items-center gap-[var(--space-4)] h-[var(--control-md)] px-[var(--space-3)] border-b border-border transition-[transform,background-color] duration-[var(--duration-base)] [--sh-ui-header-hover-bg:var(--background-muted)] [--sh-ui-header-blur-opacity:85%] [--sh-ui-header-blur-radius:16px] motion-reduce:transition-none max-md:gap-[var(--space-2)] data-[sticky-hide][data-hidden]:-translate-y-full",
+          "relative flex items-center gap-[var(--space-4)] h-[var(--control-md)] px-[var(--space-3)] border-b border-border transition-[transform,background-color] duration-[var(--duration-base)] [--sh-ui-header-hover-bg:var(--background-muted)] [--sh-ui-header-blur-opacity:85%] [--sh-ui-header-blur-radius:16px] motion-reduce:transition-none max-md:gap-[var(--space-2)] data-[sticky-hide]:data-[hidden]:-translate-y-full",
           variantClasses[variant],
           className,
         )}

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

@@ -482,10 +482,19 @@ export function SidebarInset({ className, ...props }: React.HTMLAttributes<HTMLE
 
 /* ───────────── Header / Footer / Content / Separator ───────────── */
 
-/** Sidebar 상단 영역. 보통 로고/검색을 둔다. */
-export function SidebarHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+export interface SidebarHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** @default "stack" */
+  align?: "stack" | "topbar";
+  /** @default false */
+  divider?: boolean;
+}
+
+/** Sidebar 상단 영역. 로고/검색/topbar-align 모드 지원. */
+export function SidebarHeader({ className, align = "stack", divider = false, ...props }: SidebarHeaderProps) {
   return (
     <div
+      data-align={align}
+      data-divider={divider ? "true" : undefined}
       className={cn(styles.sidebar__header, className)}
       {...props}
     />
@@ -587,7 +596,7 @@ export interface SidebarMenuButtonProps extends React.ButtonHTMLAttributes<HTMLB
    * - `md` — 일반 (기본)
    * - `lg` — 강조 메뉴
    *
-   * @default "md"
+   * @default "sm"
    */
   size?: "sm" | "md" | "lg";
   /**
@@ -617,7 +626,7 @@ export interface SidebarMenuButtonProps extends React.ButtonHTMLAttributes<HTMLB
  */
 export const SidebarMenuButton = React.forwardRef<HTMLButtonElement, SidebarMenuButtonProps>(
   function SidebarMenuButton(
-    { className, isActive, size = "md", render, sectionId, panelId, onClick, children, ...props },
+    { className, isActive, size = "sm", render, sectionId, panelId, onClick, children, ...props },
     ref
   ) {
     const tocActive = useTOCActiveId();
@@ -701,7 +710,7 @@ export interface SidebarMenuSubButtonProps extends React.AnchorHTMLAttributes<HT
   isActive?: boolean;
   /**
    * 크기.
-   * @default "md"
+   * @default "sm"
    */
   size?: "sm" | "md";
   /**
@@ -715,7 +724,7 @@ export interface SidebarMenuSubButtonProps extends React.AnchorHTMLAttributes<HT
 /** 서브 메뉴 항목 내부의 링크. `render` prop 으로 다른 엘리먼트 슬롯 가능. `sectionId`로 TOC 활성 연동. */
 export const SidebarMenuSubButton = React.forwardRef<HTMLAnchorElement, SidebarMenuSubButtonProps>(
   function SidebarMenuSubButton(
-    { className, isActive, size = "md", render, sectionId, children, ...props },
+    { className, isActive, size = "sm", render, sectionId, children, ...props },
     ref
   ) {
     const tocActive = useTOCActiveId();
@@ -844,7 +853,7 @@ export function SidebarCollapsible({
 export interface SidebarCollapsibleTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   /**
    * 크기. 부모 메뉴와 시각 위계를 맞춘다.
-   * @default "md"
+   * @default "sm"
    */
   size?: "sm" | "md" | "lg";
 }
@@ -852,7 +861,7 @@ export interface SidebarCollapsibleTriggerProps extends React.ButtonHTMLAttribut
 /** Collapsible을 토글하는 메뉴 버튼. flyout 모드면 Popover Trigger로 자동 위임된다. */
 export function SidebarCollapsibleTrigger({
   className,
-  size = "md",
+  size = "sm",
   children,
   onClick,
   ...props

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

@@ -149,7 +149,7 @@ export interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 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-[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";
 
 export function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas", className, children, ...props }: SidebarProps) {
   const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
@@ -305,8 +305,23 @@ export function SidebarInset({ className, ...props }: React.HTMLAttributes<HTMLE
   return <main className={cn("flex-1 min-w-0 bg-background flex flex-col", className)} {...props} />;
 }
 
-export function SidebarHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return <div className={cn("flex flex-col gap-[var(--space-2)] p-[var(--space-2)] overflow-hidden", className)} {...props} />;
+export interface SidebarHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** @default "stack" */
+  align?: "stack" | "topbar";
+  /** @default false */
+  divider?: boolean;
+}
+
+export function SidebarHeader({ className, align = "stack", divider = false, ...props }: SidebarHeaderProps) {
+  const base = align === "topbar"
+    ? "flex flex-row items-center gap-[var(--space-2)] h-14 px-[var(--space-3)] overflow-hidden"
+    : "flex flex-col gap-[var(--space-2)] p-[var(--space-2)] overflow-hidden";
+  return (
+    <div
+      className={cn(base, divider && "border-b border-[var(--sidebar-border)]", className)}
+      {...props}
+    />
+  );
 }
 
 export function SidebarFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
@@ -370,7 +385,7 @@ const menuButtonSize = {
 };
 
 export const SidebarMenuButton = React.forwardRef<HTMLButtonElement, SidebarMenuButtonProps>(
-  function SidebarMenuButton({ className, isActive, size = "md", render, sectionId, panelId, onClick, children, ...props }, ref) {
+  function SidebarMenuButton({ className, isActive, size = "sm", render, sectionId, panelId, onClick, children, ...props }, ref) {
     const tocActive = useTOCActiveId();
     const ctx = React.useContext(SidebarContext);
     const panelActive = panelId != null && ctx?.activePanel === panelId;
@@ -436,7 +451,7 @@ const menuSubButtonBase =
   "flex items-center gap-[var(--space-2)] h-7 px-[var(--space-2)] rounded-[calc(var(--radius)-2px)] text-[0.8125rem] text-[var(--sidebar-fg)] no-underline transition-[background-color,color] duration-[var(--duration-fast)] min-w-0 [&>span]:flex-1 [&>span]:min-w-0 [&>span]:overflow-hidden [&>span]:[text-overflow:ellipsis] [&>span]:whitespace-nowrap hover:bg-[var(--sidebar-accent)] hover:text-[var(--sidebar-accent-fg)] data-[active]:bg-primary data-[active]:text-primary-foreground data-[active]:font-semibold data-[active]:hover:bg-primary-hover motion-reduce:transition-none";
 
 export const SidebarMenuSubButton = React.forwardRef<HTMLAnchorElement, SidebarMenuSubButtonProps>(
-  function SidebarMenuSubButton({ className, isActive, size = "md", render, sectionId, children, ...props }, ref) {
+  function SidebarMenuSubButton({ className, isActive, size = "sm", render, sectionId, children, ...props }, ref) {
     const tocActive = useTOCActiveId();
     const resolvedIsActive = isActive ?? (sectionId != null ? tocActive === sectionId : undefined);
     const cls = cn(menuSubButtonBase, size === "sm" && "text-[length:var(--text-xs)]", className);
@@ -510,7 +525,7 @@ export interface SidebarCollapsibleTriggerProps extends React.ButtonHTMLAttribut
   size?: "sm" | "md" | "lg";
 }
 
-export function SidebarCollapsibleTrigger({ className, size = "md", children, onClick, ...props }: SidebarCollapsibleTriggerProps) {
+export function SidebarCollapsibleTrigger({ className, size = "sm", children, onClick, ...props }: SidebarCollapsibleTriggerProps) {
   const { open, toggle, flyoutMode, flyoutOpen } = useCollapsible();
   const cls = cn(menuButtonBase, menuButtonSize[size], className);
   const isOpen = flyoutMode ? flyoutOpen : open;

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

@@ -482,10 +482,29 @@ export function SidebarInset({ className, ...props }: React.HTMLAttributes<HTMLE
 
 /* ───────────── Header / Footer / Content / Separator ───────────── */
 
-/** Sidebar 상단 영역. 보통 로고/검색을 둔다. */
-export function SidebarHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+export interface SidebarHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * 헤더 레이아웃 모드.
+   * - `stack` (기본) — 세로 쌓기. 로고 + 검색 등을 위아래로.
+   * - `topbar` — 우측 Topbar 와 같은 56px 가로 행. admin/dashboard 에서 좌 Sidebar 헤더와
+   *   우 Topbar 의 구분선을 한 줄로 정렬할 때 사용.
+   * @default "stack"
+   */
+  align?: "stack" | "topbar";
+  /**
+   * 헤더 하단에 1px 구분선. 별도 `SidebarSeparator` 없이 헤더-콘텐츠 경계를 그릴 때.
+   * `align="topbar"` 와 조합하면 우측 Topbar 의 border-bottom 과 정확히 정렬된다.
+   * @default false
+   */
+  divider?: boolean;
+}
+
+/** Sidebar 상단 영역. 로고/검색/topbar-align 모드 지원. */
+export function SidebarHeader({ className, align = "stack", divider = false, ...props }: SidebarHeaderProps) {
   return (
     <div
+      data-align={align}
+      data-divider={divider ? "true" : undefined}
       className={cn("sh-ui-sidebar__header", className)}
       {...props}
     />
@@ -587,7 +606,7 @@ export interface SidebarMenuButtonProps extends React.ButtonHTMLAttributes<HTMLB
    * - `md` — 일반 (기본)
    * - `lg` — 강조 메뉴
    *
-   * @default "md"
+   * @default "sm"
    */
   size?: "sm" | "md" | "lg";
   /**
@@ -618,7 +637,7 @@ export interface SidebarMenuButtonProps extends React.ButtonHTMLAttributes<HTMLB
  */
 export const SidebarMenuButton = React.forwardRef<HTMLButtonElement, SidebarMenuButtonProps>(
   function SidebarMenuButton(
-    { className, isActive, size = "md", render, sectionId, panelId, onClick, children, ...props },
+    { className, isActive, size = "sm", render, sectionId, panelId, onClick, children, ...props },
     ref
   ) {
     const tocActive = useTOCActiveId();
@@ -712,7 +731,7 @@ export interface SidebarMenuSubButtonProps extends React.AnchorHTMLAttributes<HT
   isActive?: boolean;
   /**
    * 크기.
-   * @default "md"
+   * @default "sm"
    */
   size?: "sm" | "md";
   /**
@@ -729,7 +748,7 @@ export interface SidebarMenuSubButtonProps extends React.AnchorHTMLAttributes<HT
 /** 서브 메뉴 항목 내부의 링크. `render` prop 으로 다른 엘리먼트 슬롯 가능. `sectionId`로 TOC 활성 연동. */
 export const SidebarMenuSubButton = React.forwardRef<HTMLAnchorElement, SidebarMenuSubButtonProps>(
   function SidebarMenuSubButton(
-    { className, isActive, size = "md", render, sectionId, children, ...props },
+    { className, isActive, size = "sm", render, sectionId, children, ...props },
     ref
   ) {
     const tocActive = useTOCActiveId();
@@ -866,7 +885,7 @@ export function SidebarCollapsible({
 export interface SidebarCollapsibleTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   /**
    * 크기. 부모 메뉴와 시각 위계를 맞춘다.
-   * @default "md"
+   * @default "sm"
    */
   size?: "sm" | "md" | "lg";
 }
@@ -874,7 +893,7 @@ export interface SidebarCollapsibleTriggerProps extends React.ButtonHTMLAttribut
 /** Collapsible을 토글하는 메뉴 버튼. flyout 모드면 Popover Trigger로 자동 위임된다. */
 export function SidebarCollapsibleTrigger({
   className,
-  size = "md",
+  size = "sm",
   children,
   onClick,
   ...props

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

@@ -273,6 +273,21 @@
   overflow: hidden;
 }
 
+/* align=topbar — Topbar 와 동일한 56px 행. 좌측 Sidebar 헤더 구분선이 우측 Topbar
+ * 구분선과 한 줄로 만난다. admin/dashboard 의 가장 흔한 정렬 패턴. */
+.sh-ui-sidebar__header[data-align="topbar"] {
+  flex-direction: row;
+  align-items: center;
+  gap: var(--space-2);
+  height: 3.5rem;
+  padding: 0 var(--space-3);
+}
+
+/* divider — 헤더 하단 1px 라인. topbar 모드와 조합 시 우측 Topbar 의 border-bottom 과 픽셀 정렬. */
+.sh-ui-sidebar__header[data-divider="true"] {
+  border-bottom: 1px solid var(--sidebar-border);
+}
+
 .sh-ui-sidebar__content {
   display: flex;
   flex-direction: column;

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

@@ -273,6 +273,18 @@
   overflow: hidden;
 }
 
+.sidebar__header[data-align="topbar"] {
+  flex-direction: row;
+  align-items: center;
+  gap: var(--space-2);
+  height: 3.5rem;
+  padding: 0 var(--space-3);
+}
+
+.sidebar__header[data-divider="true"] {
+  border-bottom: 1px solid var(--sidebar-border);
+}
+
 .sidebar__content {
   display: flex;
   flex-direction: column;

package/package.json

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

package/src/create/generator.js

@@ -356,6 +356,18 @@ export async function createProject(options = {}) {
   console.log(`\n  cd ${projectName}`);
   console.log('  pnpm install');
   console.log('  pnpm dev\n');
+
+  // v0.82.0+ — 다음 액션이 막막한 첫-사용 경험 보강. baseline 컴포넌트를 어디서/어떻게
+  // 추가할지 1줄 가이드. monorepo 는 ui-core 가 SoT, standalone 은 cwd 자체.
+  if (projectType === 'monorepo') {
+    console.log('다음 단계 — 베이스 컴포넌트 추가 (예시):');
+    console.log(`  cd ${projectName}/packages/ui/ui-core`);
+    console.log('  npx sh-ui-cli add button card input dialog\n');
+    console.log('또는 MCP: sh_ui_add_component({ names: ["button", "card", "input", "dialog"] })\n');
+  } else {
+    console.log('다음 단계 — 베이스 컴포넌트 추가 (예시):');
+    console.log('  npx sh-ui-cli add button card input dialog\n');
+  }
 }
 
 /**