sh-ui-cli 0.80.1 → 0.82.0

package/data/changelog/versions.json

@@ -2,6 +2,36 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$description": "sh-ui 릴리즈 노트 단일 소스. docs(React)와 showcase(Flutter)가 함께 읽는다. 새 릴리즈마다 맨 앞에 추가.",
   "versions": [
+    {
+      "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",
+      "title": "atlas P0/P1 일괄 — monorepo create_project · registry · 디자인 톤",
+      "type": "minor",
+      "highlights": [
+        "**monorepo `create_project` 자동완성 흐름** — (1) ui-core `sh-ui.config.json` 의 `cssFramework` 가 항상 `plain` 으로 emit 되던 결함 수정 (호출 시점 인자가 ui-core/ui-app 양쪽에 반영), (2) ui-app `globals.css` 의 `@source` 에 ui-core 경로 누락 수정 (`../../../../ui-core/src/**/*.{ts,tsx}` 자동 박힘), (3) utility CSS 5종 (`base · focus-ring · animations · breakpoints · z-index`) 을 스캐폴드 시점에 ui-core 에 자동 emit + ui-app `globals.css` 에 sentinel-bounded `@import` 자동 박기. `create → dev` 가 매뉴얼 보정 없이 굴러감.",
+        "**registry `.tsx` cross-import 잔존 6건 일괄 제거** — v0.80.1 에서 sidebar/plain 한 개만 고쳤던 누락 후속. sidebar `tailwind/module` + markdown-editor `plain/tailwind/module` + docs 듀얼카피 markdown-editor 의 `../code-editor/index.tsx` / `../popover/index.tsx` 를 확장자 없는 형태로 통일. Next.js + TS 디폴트(`allowImportingTsExtensions: false`) 에서 빌드 깨지던 결함 해소.",
+        "**DropdownMenu / Select / Combobox / ContextMenu z-index `--z-dropdown` (200) → `--z-popover` (500)** — Sidebar offcanvas drawer 의 `--z-overlay` (300) 아래로 깔려 안 보이던 결함 수정. 드로어 안에 있는 메뉴/콤보가 정상 위로 뜸. 듀얼 카피본까지 일괄.",
+        "**DropdownMenuLabel free-standing 자동 self-wrap** — Base UI 의 `Menu.GroupLabel` 이 `Menu.Group` 부재 시 \"MenuGroupRootContext is missing\" 으로 런타임 throw 하던 마이그레이션 함정 해소. 자체 Context 로 부모 Group 감지, 없으면 Label 이 스스로 `Menu.Group` 으로 wrap. 명시적 Group 안에 두면 중첩 없이 그대로 동작 — shadcn 코드 그대로 옮겨와도 OK.",
+        "**디폴트 control 사이즈 다운 (40 → 36)** — `--control-md` 가 데스크탑 SaaS/대시보드 톤에 비해 통통하다는 atlas 측정(`size='sm'` 24건, `size='lg'` 0건) 반영. `--control-sm/md/lg` 를 `2rem / 2.25rem / 2.5rem` (32/36/40) 로. 모바일 터치 점프(44) 는 그대로. 기존 프로젝트의 `tokens.css` 는 미변경 — 신규 프로젝트만 새 디폴트.",
+        "**Button `white-space: nowrap`** — 좁은 컨테이너에서 한글 라벨이 줄바꿈되며 버튼 높이 60px+ 로 부풀던 결함 수정. 4 변종 (plain/tailwind/module/vanilla-extract) + 듀얼카피 일괄.",
+        "**`noUncheckedIndexedAccess` 디폴트 off** — 스캐폴드의 `typescript-config/base.json` + nextjs-standalone 3 arch 의 tsconfig 에서 제거. registry 컴포넌트들이 index access 결과를 narrowing 없이 쓰는 패턴이라 신규 사용자가 첫 `typecheck` 부터 실패하던 결함 해소.",
+        "**`add tokens` 가 ui-core 에 대해 던지는 에러 메시지에 가이드 추가** — `paths.tokens 가 설정에 없습니다` 만 던지던 것을 v0.65 layout 설명 + `cwd` 를 `packages/ui/ui-apps/ui-<name>` 로 바꾸라는 한 줄 안내로 보강."
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.81.0"
+    },
     {
       "version": "0.80.1",
       "date": "2026-05-12",

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

@@ -3,7 +3,7 @@ import { cn } from "@SH_UI_UTILS@";
 import { cva, type VariantProps } from "class-variance-authority";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-[var(--space-2)] border border-transparent rounded-[var(--radius)] font-medium leading-none cursor-pointer select-none transition-[background-color,color,border-color] duration-[var(--duration-fast)] disabled:opacity-[var(--opacity-disabled)] disabled:pointer-events-none focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-2 active:scale-[0.97]",
+  "inline-flex items-center justify-center gap-[var(--space-2)] border border-transparent rounded-[var(--radius)] font-medium leading-none whitespace-nowrap cursor-pointer select-none transition-[background-color,color,border-color] duration-[var(--duration-fast)] disabled:opacity-[var(--opacity-disabled)] disabled:pointer-events-none focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-2 active:scale-[0.97]",
   {
     variants: {
       variant: {

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

@@ -7,6 +7,7 @@
   border-radius: var(--radius);
   font-weight: var(--weight-medium);
   line-height: 1;
+  white-space: nowrap;
   cursor: pointer;
   transition: background-color var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast),
     transform 80ms ease-out, filter 80ms;

package/data/registry/react/components/button/styles.css.ts

@@ -9,6 +9,7 @@ export const button = style({
   borderRadius: "var(--radius)",
   fontWeight: "var(--weight-medium)",
   lineHeight: 1,
+  whiteSpace: "nowrap",
   cursor: "pointer",
   transition:
     "background-color var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast), transform 80ms ease-out, filter 80ms",

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

@@ -7,6 +7,7 @@
   border-radius: var(--radius);
   font-weight: var(--weight-medium);
   line-height: 1;
+  white-space: nowrap;
   cursor: pointer;
   transition: background-color var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast),
     transform 80ms ease-out, filter 80ms;

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/combobox/index.tailwind.tsx

@@ -53,7 +53,7 @@ export const ComboboxContent = React.forwardRef<
   return (
     <BaseCombobox.Portal container={container}>
       <BaseCombobox.Positioner
-        className="z-[var(--z-dropdown)] outline-none w-[var(--anchor-width)]"
+        className="z-[var(--z-popover)] outline-none w-[var(--anchor-width)]"
         sideOffset={sideOffset}
         align="start"
       >

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

@@ -31,7 +31,7 @@
 
 /* ───── Popup ───── */
 .sh-ui-combobox__positioner {
-  z-index: var(--z-dropdown);
+  z-index: var(--z-popover);
   outline: none;
   width: var(--anchor-width);
 }

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

@@ -31,7 +31,7 @@
 
 /* ───── Popup ───── */
 .combobox__positioner {
-  z-index: var(--z-dropdown);
+  z-index: var(--z-popover);
   outline: none;
   width: var(--anchor-width);
 }

package/data/registry/react/components/context-menu/index.tailwind.tsx

@@ -29,7 +29,7 @@ export const ContextMenuContent = React.forwardRef<HTMLDivElement, ContextMenuCo
   function ContextMenuContent({ className, children, container, ...props }, ref) {
     return (
       <BaseContextMenu.Portal container={container}>
-        <BaseContextMenu.Positioner className="outline-none z-[var(--z-dropdown)]">
+        <BaseContextMenu.Positioner className="outline-none z-[var(--z-popover)]">
           <BaseContextMenu.Popup ref={ref} className={cn(contentClasses, className)} {...props}>
             {children}
           </BaseContextMenu.Popup>

package/data/registry/react/components/context-menu/styles.css

@@ -10,7 +10,7 @@
 
 .sh-ui-cm__positioner {
   outline: none;
-  z-index: var(--z-dropdown);
+  z-index: var(--z-popover);
 }
 
 .sh-ui-cm__content {

package/data/registry/react/components/context-menu/styles.module.css

@@ -10,7 +10,7 @@
 
 .cm__positioner {
   outline: none;
-  z-index: var(--z-dropdown);
+  z-index: var(--z-popover);
 }
 
 .cm__content {

package/data/registry/react/components/dropdown-menu/index.module.tsx

@@ -149,18 +149,26 @@ export const DropdownMenuRadioItem = React.forwardRef<
   );
 });
 
-/* ───────── Group / Label ───────── */
+/* ───────── Group / Label ─────────
+ *
+ * Base UI Menu.GroupLabel 은 Menu.Group 안에서만 동작 — free-standing 시 throw.
+ * DropdownMenuLabel 이 부모 Group 부재 시 자체 Group 으로 self-wrap.
+ */
+
+const InDmGroupContext = React.createContext(false);
 
 export const DropdownMenuGroup = React.forwardRef<
   HTMLDivElement,
   WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseMenu.Group>>
 >(function DropdownMenuGroup({ className, ...props }, ref) {
   return (
-    <BaseMenu.Group
-      ref={ref}
-      className={cn(styles.dm__group, className)}
-      {...props}
-    />
+    <InDmGroupContext.Provider value={true}>
+      <BaseMenu.Group
+        ref={ref}
+        className={cn(styles.dm__group, className)}
+        {...props}
+      />
+    </InDmGroupContext.Provider>
   );
 });
 
@@ -168,13 +176,20 @@ export const DropdownMenuLabel = React.forwardRef<
   HTMLDivElement,
   WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseMenu.GroupLabel>>
 >(function DropdownMenuLabel({ className, ...props }, ref) {
-  return (
+  const inGroup = React.useContext(InDmGroupContext);
+  const label = (
     <BaseMenu.GroupLabel
       ref={ref}
       className={cn(styles.dm__label, className)}
       {...props}
     />
   );
+  if (inGroup) return label;
+  return (
+    <InDmGroupContext.Provider value={true}>
+      <BaseMenu.Group>{label}</BaseMenu.Group>
+    </InDmGroupContext.Provider>
+  );
 });
 
 /* ───────── Separator ─────────

package/data/registry/react/components/dropdown-menu/index.tailwind.tsx

@@ -52,7 +52,7 @@ export const DropdownMenuContent = React.forwardRef<HTMLDivElement, DropdownMenu
     return (
       <BaseMenu.Portal container={container}>
         <BaseMenu.Positioner
-          className="outline-none z-[var(--z-dropdown)]"
+          className="outline-none z-[var(--z-popover)]"
           side={side}
           align={align}
           sideOffset={sideOffset}
@@ -120,18 +120,27 @@ export const DropdownMenuRadioItem = React.forwardRef<
   );
 });
 
+// Base UI Menu.GroupLabel 은 Menu.Group 안에 있어야만 동작 — free-standing 시 throw.
+// DropdownMenuLabel 이 부모 Group 부재 시 자체 Group 으로 self-wrap 하도록 Context 로 감지.
+const InDmGroupContext = React.createContext(false);
+
 export const DropdownMenuGroup = React.forwardRef<
   HTMLDivElement,
   WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseMenu.Group>>
 >(function DropdownMenuGroup({ className, ...props }, ref) {
-  return <BaseMenu.Group ref={ref} className={cn("p-0", className)} {...props} />;
+  return (
+    <InDmGroupContext.Provider value={true}>
+      <BaseMenu.Group ref={ref} className={cn("p-0", className)} {...props} />
+    </InDmGroupContext.Provider>
+  );
 });
 
 export const DropdownMenuLabel = React.forwardRef<
   HTMLDivElement,
   WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseMenu.GroupLabel>>
 >(function DropdownMenuLabel({ className, ...props }, ref) {
-  return (
+  const inGroup = React.useContext(InDmGroupContext);
+  const label = (
     <BaseMenu.GroupLabel
       ref={ref}
       className={cn(
@@ -141,6 +150,12 @@ export const DropdownMenuLabel = React.forwardRef<
       {...props}
     />
   );
+  if (inGroup) return label;
+  return (
+    <InDmGroupContext.Provider value={true}>
+      <BaseMenu.Group>{label}</BaseMenu.Group>
+    </InDmGroupContext.Provider>
+  );
 });
 
 export const DropdownMenuSeparator = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(

package/data/registry/react/components/dropdown-menu/index.tsx

@@ -149,18 +149,28 @@ export const DropdownMenuRadioItem = React.forwardRef<
   );
 });
 
-/* ───────── Group / Label ───────── */
+/* ───────── Group / Label ─────────
+ *
+ * Base UI Menu.GroupLabel 은 Menu.Group 안에 있어야만 동작 (없으면 런타임 throw —
+ * "MenuGroupRootContext is missing"). shadcn 등에선 Label 이 free-standing 으로도
+ * 쓰여서 마이그레이션 시 사용자가 잘 찔린다. DropdownMenuLabel 이 부모 Group 부재 시
+ * 자체로 Group 으로 self-wrap 하도록 Context 로 감지.
+ */
+
+const InDmGroupContext = React.createContext(false);
 
 export const DropdownMenuGroup = React.forwardRef<
   HTMLDivElement,
   WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseMenu.Group>>
 >(function DropdownMenuGroup({ className, ...props }, ref) {
   return (
-    <BaseMenu.Group
-      ref={ref}
-      className={cn("sh-ui-dm__group", className)}
-      {...props}
-    />
+    <InDmGroupContext.Provider value={true}>
+      <BaseMenu.Group
+        ref={ref}
+        className={cn("sh-ui-dm__group", className)}
+        {...props}
+      />
+    </InDmGroupContext.Provider>
   );
 });
 
@@ -168,13 +178,20 @@ export const DropdownMenuLabel = React.forwardRef<
   HTMLDivElement,
   WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseMenu.GroupLabel>>
 >(function DropdownMenuLabel({ className, ...props }, ref) {
-  return (
+  const inGroup = React.useContext(InDmGroupContext);
+  const label = (
     <BaseMenu.GroupLabel
       ref={ref}
       className={cn("sh-ui-dm__label", className)}
       {...props}
     />
   );
+  if (inGroup) return label;
+  return (
+    <InDmGroupContext.Provider value={true}>
+      <BaseMenu.Group>{label}</BaseMenu.Group>
+    </InDmGroupContext.Provider>
+  );
 });
 
 /* ───────── Separator ─────────

package/data/registry/react/components/dropdown-menu/styles.css

@@ -17,7 +17,7 @@
 
 .sh-ui-dm__positioner {
   outline: none;
-  z-index: var(--z-dropdown);
+  z-index: var(--z-popover);
 }
 
 .sh-ui-dm__content {

package/data/registry/react/components/dropdown-menu/styles.module.css

@@ -17,7 +17,7 @@
 
 .dm__positioner {
   outline: none;
-  z-index: var(--z-dropdown);
+  z-index: var(--z-popover);
 }
 
 .dm__content {

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

@@ -3,7 +3,7 @@
 import { useState } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
-import { CodeEditor } from "../code-editor/index.tsx";
+import { CodeEditor } from "../code-editor";
 import styles from "./styles.module.css";
 
 import { cn } from "@SH_UI_UTILS@";

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

@@ -3,7 +3,7 @@
 import { useState } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
-import { CodeEditor } from "../code-editor/index.tsx";
+import { CodeEditor } from "../code-editor";
 
 import { cn } from "@SH_UI_UTILS@";
 export interface MarkdownEditorProps {

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

@@ -3,7 +3,7 @@
 import { useState } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
-import { CodeEditor } from "../code-editor/index.tsx";
+import { CodeEditor } from "../code-editor";
 import "./styles.css";
 
 import { cn } from "@SH_UI_UTILS@";

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

@@ -76,7 +76,7 @@ export const SelectContent = React.forwardRef<
   }
 >(({ className, children, container, ...props }, ref) => (
   <BaseSelect.Portal container={container}>
-    <BaseSelect.Positioner className="outline-none z-[var(--z-dropdown)]" sideOffset={4} align="start">
+    <BaseSelect.Positioner className="outline-none z-[var(--z-popover)]" sideOffset={4} align="start">
       <BaseSelect.Popup
         ref={ref}
         className={cn(

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

@@ -64,7 +64,7 @@
 /* 팝업 */
 .sh-ui-select__positioner {
   outline: none;
-  z-index: var(--z-dropdown);
+  z-index: var(--z-popover);
 }
 
 .sh-ui-select__content {

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

@@ -64,7 +64,7 @@
 /* 팝업 */
 .select__positioner {
   outline: none;
-  z-index: var(--z-dropdown);
+  z-index: var(--z-popover);
 }
 
 .select__content {

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

@@ -3,7 +3,7 @@
 import * as React from "react";
 import { cn } from "@SH_UI_UTILS@";
 import { ChevronRightIcon, PanelLeftIcon } from "lucide-react";
-import { Popover, PopoverContent, PopoverTrigger } from "../popover/index.tsx";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover";
 import styles from "./styles.module.css";
 
 const SIDEBAR_COOKIE_NAME = "sidebar_state";
@@ -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

@@ -3,7 +3,7 @@
 import * as React from "react";
 import { cn } from "@SH_UI_UTILS@";
 import { ChevronRightIcon, PanelLeftIcon } from "lucide-react";
-import { Popover, PopoverContent, PopoverTrigger } from "../popover/index.tsx";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover";
 
 const SIDEBAR_COOKIE_NAME = "sidebar_state";
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
@@ -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/data/registry/react/tokens-used.json

@@ -1,6 +1,6 @@
 {
   "$description": "컴포넌트별 토큰 의존성 (var(--*) 추출). build-registry-tokens.mjs 가 자동 생성.",
-  "$generated": "2026-05-11T07:02:18.245Z",
+  "$generated": "2026-05-12T23:53:11.079Z",
   "components": {
     "button": {
       "plain": [
@@ -600,7 +600,7 @@
         "--text-sm",
         "--text-xs",
         "--weight-semibold",
-        "--z-dropdown"
+        "--z-popover"
       ],
       "tailwind": [
         "--border-width-strong",
@@ -614,7 +614,7 @@
         "--space-3",
         "--text-sm",
         "--text-xs",
-        "--z-dropdown"
+        "--z-popover"
       ],
       "css-modules": [
         "--background",
@@ -636,7 +636,7 @@
         "--text-sm",
         "--text-xs",
         "--weight-semibold",
-        "--z-dropdown"
+        "--z-popover"
       ],
       "vanilla-extract": []
     },
@@ -1034,7 +1034,7 @@
         "--text-xs",
         "--weight-medium",
         "--weight-semibold",
-        "--z-dropdown"
+        "--z-popover"
       ],
       "tailwind": [
         "--border-width-strong",
@@ -1048,7 +1048,7 @@
         "--space-3",
         "--text-sm",
         "--text-xs",
-        "--z-dropdown"
+        "--z-popover"
       ],
       "css-modules": [
         "--background",
@@ -1072,7 +1072,7 @@
         "--text-xs",
         "--weight-medium",
         "--weight-semibold",
-        "--z-dropdown"
+        "--z-popover"
       ],
       "vanilla-extract": []
     },
@@ -1202,7 +1202,7 @@
         "--text-sm",
         "--text-xs",
         "--weight-semibold",
-        "--z-dropdown"
+        "--z-popover"
       ],
       "tailwind": [
         "--border-width-strong",
@@ -1213,7 +1213,7 @@
         "--space-2",
         "--text-sm",
         "--text-xs",
-        "--z-dropdown"
+        "--z-popover"
       ],
       "css-modules": [
         "--background",
@@ -1230,7 +1230,7 @@
         "--text-sm",
         "--text-xs",
         "--weight-semibold",
-        "--z-dropdown"
+        "--z-popover"
       ],
       "vanilla-extract": []
     },
@@ -1248,7 +1248,7 @@
         "--text-sm",
         "--text-xs",
         "--weight-semibold",
-        "--z-dropdown"
+        "--z-popover"
       ],
       "tailwind": [
         "--opacity-disabled",
@@ -1258,7 +1258,7 @@
         "--space-2",
         "--text-sm",
         "--text-xs",
-        "--z-dropdown"
+        "--z-popover"
       ],
       "css-modules": [
         "--background",
@@ -1273,7 +1273,7 @@
         "--text-sm",
         "--text-xs",
         "--weight-semibold",
-        "--z-dropdown"
+        "--z-popover"
       ],
       "vanilla-extract": []
     },

package/data/tokens/src/primitives.json

@@ -113,9 +113,9 @@
   },
 
   "controlHeight": {
-    "sm": { "$value": "2rem",   "$type": "dimension" },
-    "md": { "$value": "2.5rem", "$type": "dimension" },
-    "lg": { "$value": "3rem",   "$type": "dimension" }
+    "sm": { "$value": "2rem",    "$type": "dimension" },
+    "md": { "$value": "2.25rem", "$type": "dimension" },
+    "lg": { "$value": "2.5rem",  "$type": "dimension" }
   },
 
   "borderWidth": {

package/package.json

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

package/src/add.mjs

@@ -180,7 +180,19 @@ async function writeOrDiff({ dest, content, cwd, diffMode, summary, conflictReso
 /** 특수 컴포넌트: 설정으로 토큰 파일 생성 */
 async function addTokens(config, cwd, diffMode, summary, conflictResolver) {
   const destRel = config.paths?.tokens;
-  if (!destRel) throw new Error("paths.tokens 가 설정에 없습니다.");
+  if (!destRel) {
+    // v0.65+ monorepo: ui-core 는 tokens-only 마커가 아니라 컴포넌트-only.
+    // tokens 는 ui-apps/ui-<name>/ 의 역할. cwd 가 ui-core 면 안내를 명확히.
+    const cwdLower = cwd.replace(/\\/g, '/').toLowerCase();
+    if (cwdLower.endsWith('/packages/ui/ui-core')) {
+      throw new Error(
+        "paths.tokens 가 설정에 없습니다.\n" +
+        "  ui-core 는 컴포넌트 단일 SoT 라 tokens 를 보관하지 않습니다 (v0.65+ layout).\n" +
+        "  tokens 는 ui-app 의 역할 — cwd 를 packages/ui/ui-apps/ui-<name>/ 로 바꾸세요.",
+      );
+    }
+    throw new Error("paths.tokens 가 설정에 없습니다.");
+  }
   const dest = resolve(cwd, destRel);
 
   // theme.base === 'custom' 이면 토큰 빌더가 color.custom.X 스케일을 못 찾아 throw 한다 —

package/src/create/generator.js

@@ -104,7 +104,7 @@ import {
   buildDartEasesBlock,
   buildDartGradientsBlock,
 } from './theme/inject.js';
-import { getTemplatesRoot } from '../paths.mjs';
+import { getTemplatesRoot, getRegistryRoot } from '../paths.mjs';
 import {
   CSS_FRAMEWORK_DEFAULT,
   CSS_FRAMEWORKS_SUPPORTED,
@@ -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');
+  }
 }
 
 /**
@@ -714,6 +726,39 @@ async function generateMonorepo(targetDir, projectName, plugins, { yes = false,
   const uiAppDir = path.join(targetDir, 'packages', 'ui', 'ui-apps', `ui-${appName}`);
   await injectCssTheme(uiAppDir, theme);
   await patchShUiConfig(path.join(uiAppDir, 'sh-ui.config.json'), css, themeBase);
+
+  // ui-core sh-ui.config.json 의 cssFramework 도 동일하게 맞춘다 (v0.81.0+).
+  // 안 그러면 후속 add_component 호출이 plain 변종으로 fallback.
+  const uiCoreConfigPath = path.join(targetDir, 'packages', 'ui', 'ui-core', 'sh-ui.config.json');
+  await patchShUiConfig(uiCoreConfigPath, css, themeBase);
+
+  // ui-core 에 utility CSS 5종 자동 설치 (v0.81.0+).
+  // ui-app/globals.css 가 이 5개 파일을 @import 하므로 안 깔리면 빌드 깨짐.
+  // create → dev 사이에 사용자가 매뉴얼 `add base focus-ring …` 호출 안 해도 굴러가게 함.
+  await prefetchUiCoreUtilityCss(path.join(targetDir, 'packages', 'ui', 'ui-core'));
+}
+
+/**
+ * v0.81.0+ — monorepo create_project 직후 ui-core 에 베이스 유틸 CSS 를 자동 emit.
+ *
+ * ui-app-template/src/styles/globals.css 가 `@workspace/ui-core/styles/{base,focus-ring,
+ * animations,breakpoints,z-index}.css` 를 sentinel 블록 안에서 @import 하므로 이 파일들이
+ * 존재해야 Tailwind v4 빌드가 깨지지 않는다. 외부 의존성 없는 5개 CSS 파일이라 registry
+ * 라우팅 거치지 않고 직접 카피 — add.mjs 의 framework 매칭 / placeholder 치환 로직이
+ * 필요 없다 (모두 plain CSS, 토큰 변수만 참조).
+ */
+async function prefetchUiCoreUtilityCss(uiCoreDir) {
+  const stylesDir = path.join(uiCoreDir, 'src', 'styles');
+  await fs.ensureDir(stylesDir);
+  const registryRoot = getRegistryRoot('react');
+  const names = ['base', 'focus-ring', 'animations', 'breakpoints', 'z-index'];
+  for (const name of names) {
+    const src = path.join(registryRoot, 'components', name, `${name}.css`);
+    const dest = path.join(stylesDir, `${name}.css`);
+    if (await fs.pathExists(src) && !(await fs.pathExists(dest))) {
+      await fs.copy(src, dest);
+    }
+  }
 }
 
 async function generateApp(targetDir, appName, port, plugins, arch, css = 'tailwind') {

package/templates/monorepo/packages/typescript-config/base.json

@@ -11,7 +11,6 @@
     "module": "NodeNext",
     "moduleDetection": "force",
     "moduleResolution": "NodeNext",
-    "noUncheckedIndexedAccess": true,
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "strict": true,

package/templates/nextjs-standalone/_arch/flat/lib/styles/tokens.css

@@ -145,8 +145,8 @@
   /* sh-ui:theme-ease-end */
   /* sh-ui:theme-control-start */
   --control-sm: 2rem;
-  --control-md: 2.5rem;
-  --control-lg: 3rem;
+  --control-md: 2.25rem;
+  --control-lg: 2.5rem;
   /* sh-ui:theme-control-end */
   /* sh-ui:theme-border-width-start */
   --border-width: 1px;

package/templates/nextjs-standalone/_arch/flat/tsconfig.json

@@ -13,7 +13,6 @@
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "strict": true,
-    "noUncheckedIndexedAccess": true,
     "allowJs": true,
     "jsx": "preserve",
     "noEmit": true,

package/templates/nextjs-standalone/_arch/fsd/src/shared/styles/tokens.css

@@ -145,8 +145,8 @@
   /* sh-ui:theme-ease-end */
   /* sh-ui:theme-control-start */
   --control-sm: 2rem;
-  --control-md: 2.5rem;
-  --control-lg: 3rem;
+  --control-md: 2.25rem;
+  --control-lg: 2.5rem;
   /* sh-ui:theme-control-end */
   /* sh-ui:theme-border-width-start */
   --border-width: 1px;

package/templates/nextjs-standalone/_arch/fsd/tsconfig.json

@@ -13,7 +13,6 @@
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "strict": true,
-    "noUncheckedIndexedAccess": true,
     "allowJs": true,
     "jsx": "preserve",
     "noEmit": true,

package/templates/nextjs-standalone/_arch/mes/src/lib/styles/tokens.css

@@ -112,8 +112,8 @@
   /* sh-ui:theme-ease-end */
   /* sh-ui:theme-control-start */
   --control-sm: 2rem;
-  --control-md: 2.5rem;
-  --control-lg: 3rem;
+  --control-md: 2.25rem;
+  --control-lg: 2.5rem;
   /* sh-ui:theme-control-end */
   /* sh-ui:theme-border-width-start */
   --border-width: 1px;

package/templates/nextjs-standalone/_arch/mes/tsconfig.json

@@ -13,7 +13,6 @@
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "strict": true,
-    "noUncheckedIndexedAccess": true,
     "allowJs": true,
     "jsx": "preserve",
     "noEmit": true,

package/templates/ui-app-template/src/styles/globals.css

@@ -1,10 +1,20 @@
 @import 'tailwindcss';
 
 @source "../../../../../../apps/**/*.{ts,tsx}";
+@source "../../../../ui-core/src/**/*.{ts,tsx}";
 @source "../**/*.{ts,tsx}";
 
 @import './tokens.css';
 
+/* sh-ui:utility-imports-start — v0.81+ create_project 가 자동 설치하는 베이스 유틸 CSS.
+ * 이 블록 안의 줄들은 add_component 가 멱등하게 관리. 직접 편집은 가능하지만 sentinel 은 유지. */
+@import '@workspace/ui-core/styles/base.css';
+@import '@workspace/ui-core/styles/focus-ring.css';
+@import '@workspace/ui-core/styles/animations.css';
+@import '@workspace/ui-core/styles/breakpoints.css';
+@import '@workspace/ui-core/styles/z-index.css';
+/* sh-ui:utility-imports-end */
+
 @custom-variant dark (&:is(.dark *));
 
 /* Tailwind v4 — 토큰 CSS 변수를 utility 클래스로 노출.

package/templates/ui-app-template/src/styles/tokens.css

@@ -145,8 +145,8 @@
   /* sh-ui:theme-ease-end */
   /* sh-ui:theme-control-start */
   --control-sm: 2rem;
-  --control-md: 2.5rem;
-  --control-lg: 3rem;
+  --control-md: 2.25rem;
+  --control-lg: 2.5rem;
   /* sh-ui:theme-control-end */
   /* sh-ui:theme-border-width-start */
   --border-width: 1px;