sh-ui-cli 0.80.1 → 0.81.0

package/data/changelog/versions.json

@@ -2,6 +2,23 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$description": "sh-ui 릴리즈 노트 단일 소스. docs(React)와 showcase(Flutter)가 함께 읽는다. 새 릴리즈마다 맨 앞에 추가.",
   "versions": [
+    {
+      "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/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";

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;

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.81.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,
@@ -714,6 +714,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;