sh-ui-cli 0.74.0 → 0.75.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.75.0",
+      "date": "2026-05-11",
+      "title": "minor — 슬롯 패턴 `render` 로 통일 (asChild 제거)",
+      "type": "minor",
+      "highlights": [
+        "**모든 슬롯 패턴이 `render` prop 으로 통일** — Base UI 가 표준으로 사용하는 패턴. 이전엔 Base UI 기반 컴포넌트(Dialog/Popover/Select/DropdownMenu/Accordion/Combobox/Tabs)는 `render`, sh-ui 자체 컴포넌트(Sidebar/Breadcrumb)는 `asChild` 로 혼재. 이번에 후자도 `render` 로 통일해 사용자 mental model 단순화.",
+        "**BreadcrumbLink 에 `render` prop 신규 추가** — 이전엔 슬롯 패턴 자체가 없어 Next Link 와 결합하려면 className 만 수동 복사해야 했음. 이제 `<BreadcrumbLink render={<Link href='/projects'>Projects</Link>} />` 정석.",
+        "**SidebarMenuButton·SidebarMenuSubButton 의 `asChild` 제거 → `render` 로 마이그레이션** — children 으로 자식 element 넘기던 패턴 대신 `render` prop. cloneElement 로 props/className/ref 자동 머지 동작은 동일. apps/docs 의 app-sidebar / sidebar-toc demo / sidebar API 문서까지 일괄 마이그.",
+        "**summary + JSDoc 갱신** — sidebar / breadcrumb summary 에 render prop 사용 패턴 명시. MCP `sh_ui_list_components` 와 `sh_ui_get_component` 둘 다 일관."
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.75.0"
+    },
+    {
+      "version": "0.74.1",
+      "date": "2026-05-11",
+      "title": "patch — apps/* templates 에 `@workspace/ui-core` 의존성/paths 누락 수정",
+      "type": "patch",
+      "highlights": [
+        "**templates 의 apps/* 가 ui-core 를 의존성으로 들고 있지 않던 회귀 수정** — v0.65 에서 컴포넌트 SoT 가 `ui-core` 로 이동했지만 `nextjs-app/package.json` 과 `_arch/{fsd,flat}/tsconfig.json`, `vitest.config.ts` 가 `@workspace/ui-app-name` 만 가리키고 `@workspace/ui-core` 는 박혀 있지 않았음. 결과: 사용자가 ui-core 컴포넌트(`@workspace/ui-core/components/sidebar` 등)를 import 하려면 매번 손으로 deps + tsconfig paths 추가해야 했음.",
+        "**fix 후 신규 스캐폴드/`sh_ui_add_app` 의 새 앱이 자동으로 ui-core dep + paths 보유** — `pnpm install` 하자마자 `@workspace/ui-core/components/*` import 동작.",
+        "**smoke scenario 2 회귀 가드** — `appPkg.dependencies['@workspace/ui-core']` 와 `tsconfig.compilerOptions.paths['@workspace/ui-core/*']` 단언 추가.",
+        "**`pretest` 훅으로 stale bundled data 자동 갱신** — `packages/cli/data/` 는 gitignored 라 개발자 머신에서 stale 일 수 있고, 그 상태에서 `pnpm test` 돌리면 `tokens-validate.test.js` 1건이 `tokens-used.json` 누락으로 false-fail 했음. `pretest` 가 `copy-data.mjs` 를 자동 실행해 회귀 차단."
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.74.1"
+    },
     {
       "version": "0.74.0",
       "date": "2026-05-10",

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

@@ -59,17 +59,42 @@ export const BreadcrumbItem = React.forwardRef<
 
 /* ───────── Link ───────── */
 
-/** 상위 단계로 이동하는 링크. 라우터 사용 시 `asChild` 패턴 대신 직접 `<a>` 속성으로 전달. */
+export interface BreadcrumbLinkProps
+  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  /**
+   * 다른 anchor 컴포넌트(예: Next.js `Link`)로 대체. sh-ui 의 모든 슬롯
+   * 패턴은 `render` 로 통일 (Base UI 표준).
+   *
+   *   <BreadcrumbLink render={<Link href='/projects'>Projects</Link>} />
+   */
+  render?: React.ReactElement;
+}
+
+/** 상위 단계로 이동하는 링크. `render` prop 으로 다른 엘리먼트 슬롯 가능. */
 export const BreadcrumbLink = React.forwardRef<
   HTMLAnchorElement,
-  React.AnchorHTMLAttributes<HTMLAnchorElement>
->(function BreadcrumbLink({ className, ...props }, ref) {
+  BreadcrumbLinkProps
+>(function BreadcrumbLink({ className, render, children, ...props }, ref) {
+  const mergedClass = cn(styles.breadcrumb__link, className);
+  if (render && React.isValidElement(render)) {
+    const child = render as React.ReactElement<{
+      className?: string;
+      children?: React.ReactNode;
+    }>;
+    return React.cloneElement(
+      child,
+      {
+        ref,
+        className: cn(child.props.className, mergedClass),
+        ...props,
+      } as Record<string, unknown>,
+      children ?? child.props.children,
+    );
+  }
   return (
-    <a
-      ref={ref}
-      className={cn(styles.breadcrumb__link, className)}
-      {...props}
-    />
+    <a ref={ref} className={mergedClass} {...props}>
+      {children}
+    </a>
   );
 });
 

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

@@ -45,19 +45,44 @@ export const BreadcrumbItem = React.forwardRef<
   );
 });
 
+export interface BreadcrumbLinkProps
+  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  /**
+   * 다른 anchor 컴포넌트(예: Next.js `Link`)로 대체. anchor 중첩 방지 + 라우터
+   * 결합용. sh-ui 의 모든 슬롯 패턴은 `render` 로 통일 (Base UI 표준).
+   *
+   *   <BreadcrumbLink render={<Link href='/projects'>Projects</Link>} />
+   */
+  render?: React.ReactElement;
+}
+
 export const BreadcrumbLink = React.forwardRef<
   HTMLAnchorElement,
-  React.AnchorHTMLAttributes<HTMLAnchorElement>
->(function BreadcrumbLink({ className, ...props }, ref) {
+  BreadcrumbLinkProps
+>(function BreadcrumbLink({ className, render, children, ...props }, ref) {
+  const mergedClass = cn(
+    "text-foreground-muted no-underline rounded-[calc(var(--radius)-2px)] px-0.5 transition-colors duration-[var(--duration-fast)] hover:text-foreground hover:underline hover:underline-offset-[3px] focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:outline-offset-2 motion-reduce:transition-none",
+    className,
+  );
+  if (render && React.isValidElement(render)) {
+    const child = render as React.ReactElement<{
+      className?: string;
+      children?: React.ReactNode;
+    }>;
+    return React.cloneElement(
+      child,
+      {
+        ref,
+        className: cn(child.props.className, mergedClass),
+        ...props,
+      } as Record<string, unknown>,
+      children ?? child.props.children,
+    );
+  }
   return (
-    <a
-      ref={ref}
-      className={cn(
-        "text-foreground-muted no-underline rounded-[calc(var(--radius)-2px)] px-0.5 transition-colors duration-[var(--duration-fast)] hover:text-foreground hover:underline hover:underline-offset-[3px] focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:outline-offset-2 motion-reduce:transition-none",
-        className,
-      )}
-      {...props}
-    />
+    <a ref={ref} className={mergedClass} {...props}>
+      {children}
+    </a>
   );
 });
 

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

@@ -59,17 +59,45 @@ export const BreadcrumbItem = React.forwardRef<
 
 /* ───────── Link ───────── */
 
-/** 상위 단계로 이동하는 링크. 라우터 사용 시 `asChild` 패턴 대신 직접 `<a>` 속성으로 전달. */
+export interface BreadcrumbLinkProps
+  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  /**
+   * 다른 anchor 컴포넌트(예: Next.js `Link`)로 대체. 자체로 `<a>` 를 렌더
+   * 하므로 자식으로 또 다른 `<a>` 를 넣으면 anchor 중첩(invalid HTML). 정석은
+   * Base UI 패턴과 동일한 `render` prop:
+   *
+   *   <BreadcrumbLink render={<Link href='/projects'>Projects</Link>} />
+   *
+   * sh-ui 의 모든 슬롯 패턴은 `render` 로 통일 (Base UI 표준 따름).
+   */
+  render?: React.ReactElement;
+}
+
+/** 상위 단계로 이동하는 링크. `render` prop 으로 다른 엘리먼트(Next Link 등) 슬롯 가능. */
 export const BreadcrumbLink = React.forwardRef<
   HTMLAnchorElement,
-  React.AnchorHTMLAttributes<HTMLAnchorElement>
->(function BreadcrumbLink({ className, ...props }, ref) {
+  BreadcrumbLinkProps
+>(function BreadcrumbLink({ className, render, children, ...props }, ref) {
+  const mergedClass = cn("sh-ui-breadcrumb__link", className);
+  if (render && React.isValidElement(render)) {
+    const child = render as React.ReactElement<{
+      className?: string;
+      children?: React.ReactNode;
+    }>;
+    return React.cloneElement(
+      child,
+      {
+        ref,
+        className: cn(child.props.className, mergedClass),
+        ...props,
+      } as Record<string, unknown>,
+      children ?? child.props.children,
+    );
+  }
   return (
-    <a
-      ref={ref}
-      className={cn("sh-ui-breadcrumb__link", className)}
-      {...props}
-    />
+    <a ref={ref} className={mergedClass} {...props}>
+      {children}
+    </a>
   );
 });
 

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

@@ -591,12 +591,13 @@ export interface SidebarMenuButtonProps extends React.ButtonHTMLAttributes<HTMLB
    */
   size?: "sm" | "md" | "lg";
   /**
-   * Radix asChild 패턴. children에 `<a>` 등 다른 요소를 넘겨 button 스타일만 입힐 때 사용.
-   * Next.js Link와 결합 시 유용 (`<SidebarMenuButton asChild><Link href=...>`).
+   * 다른 엘리먼트(예: Next.js `Link`)로 대체. 자체로 `<button>` 을 렌더하므로
+   * 자식으로 또 다른 button/anchor 를 넣지 말 것. sh-ui 의 모든 슬롯 패턴은
+   * `render` 로 통일 (Base UI 표준).
    *
-   * @default false
+   *   <SidebarMenuButton render={<Link href='/'>홈</Link>} />
    */
-  asChild?: boolean;
+  render?: React.ReactElement;
   /**
    * `SidebarTOC` 안에서 활성 섹션 id를 자동 동기화. 이 값과 TOC active id가 일치하면
    * `isActive`가 자동으로 `true`가 된다.
@@ -610,12 +611,13 @@ export interface SidebarMenuButtonProps extends React.ButtonHTMLAttributes<HTMLB
 }
 
 /**
- * 메뉴 한 줄을 누를 수 있는 버튼. `asChild`로 `<a>` 등 다른 요소에 스타일만 입힐 수 있고,
- * `sectionId`(SidebarTOC 활성 동기화) / `panelId`(SidebarPanel 토글)를 지정해 활성 상태를 자동 결정한다.
+ * 메뉴 한 줄을 누를 수 있는 버튼. `render` prop 으로 `<a>` 등 다른 엘리먼트로
+ * 슬롯 가능. `sectionId`(SidebarTOC 활성 동기화) / `panelId`(SidebarPanel 토글)를
+ * 지정해 활성 상태를 자동 결정한다.
  */
 export const SidebarMenuButton = React.forwardRef<HTMLButtonElement, SidebarMenuButtonProps>(
   function SidebarMenuButton(
-    { className, isActive, size = "md", asChild, sectionId, panelId, onClick, children, ...props },
+    { className, isActive, size = "md", render, sectionId, panelId, onClick, children, ...props },
     ref
   ) {
     const tocActive = useTOCActiveId();
@@ -640,15 +642,19 @@ export const SidebarMenuButton = React.forwardRef<HTMLButtonElement, SidebarMenu
       styles[`sidebar__menu-button--${size}`],
       className);
 
-    if (asChild && React.isValidElement(children)) {
-      const child = children as React.ReactElement<Record<string, unknown>>;
-      const merged: Record<string, unknown> = {
-        ...props,
-        onClick: handleClick,
-        className: cn((child.props.className as string) || "", cls),
-        "data-active": resolvedIsActive || undefined,
-      };
-      return React.cloneElement(child, merged);
+    if (render && React.isValidElement(render)) {
+      const child = render as React.ReactElement<{ className?: string; children?: React.ReactNode }>;
+      return React.cloneElement(
+        child,
+        {
+          ref,
+          ...props,
+          onClick: handleClick,
+          className: cn(child.props.className, cls),
+          "data-active": resolvedIsActive || undefined,
+        } as Record<string, unknown>,
+        children ?? child.props.children,
+      );
     }
 
     return (
@@ -697,18 +703,17 @@ export interface SidebarMenuSubButtonProps extends React.AnchorHTMLAttributes<HT
    */
   size?: "sm" | "md";
   /**
-   * Radix asChild 패턴. children에 다른 anchor 컴포넌트(예: Next.js Link)를 넘길 때 사용.
-   * @default false
+   * 다른 anchor 컴포넌트(예: Next.js `Link`)로 대체. sh-ui 의 슬롯 패턴은 `render` 로 통일.
    */
-  asChild?: boolean;
+  render?: React.ReactElement;
   /** `SidebarTOC`의 활성 섹션 id 자동 동기화. 일치하면 `isActive`가 자동으로 `true`. */
   sectionId?: string;
 }
 
-/** 서브 메뉴 항목 내부의 링크(`<a>`). `sectionId`로 SidebarTOC 활성 상태와 연동. */
+/** 서브 메뉴 항목 내부의 링크. `render` prop 으로 다른 엘리먼트 슬롯 가능. `sectionId`로 TOC 활성 연동. */
 export const SidebarMenuSubButton = React.forwardRef<HTMLAnchorElement, SidebarMenuSubButtonProps>(
   function SidebarMenuSubButton(
-    { className, isActive, size = "md", asChild, sectionId, children, ...props },
+    { className, isActive, size = "md", render, sectionId, children, ...props },
     ref
   ) {
     const tocActive = useTOCActiveId();
@@ -718,14 +723,18 @@ export const SidebarMenuSubButton = React.forwardRef<HTMLAnchorElement, SidebarM
       styles[`sidebar__menu-sub-button--${size}`],
       className);
 
-    if (asChild && React.isValidElement(children)) {
-      const child = children as React.ReactElement<Record<string, unknown>>;
-      const merged: Record<string, unknown> = {
-        ...props,
-        className: cn((child.props.className as string) || "", cls),
-        "data-active": resolvedIsActive || undefined,
-      };
-      return React.cloneElement(child, merged);
+    if (render && React.isValidElement(render)) {
+      const child = render as React.ReactElement<{ className?: string; children?: React.ReactNode }>;
+      return React.cloneElement(
+        child,
+        {
+          ref,
+          ...props,
+          className: cn(child.props.className, cls),
+          "data-active": resolvedIsActive || undefined,
+        } as Record<string, unknown>,
+        children ?? child.props.children,
+      );
     }
 
     return (
@@ -930,9 +939,7 @@ export function SidebarCollapsibleContent({ children }: { children: React.ReactN
  *   <SidebarTOC sectionIds={["intro", "install", "usage"]}>
  *     <SidebarMenu>
  *       <SidebarMenuItem>
- *         <SidebarMenuButton sectionId="intro" asChild>
- *           <a href="#intro">Intro</a>
- *         </SidebarMenuButton>
+ *         <SidebarMenuButton sectionId="intro" render={<a href="#intro">Intro</a>} />
  *       </SidebarMenuItem>
  *       ...
  *     </SidebarMenu>

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

@@ -350,7 +350,12 @@ export function SidebarMenuItem({ className, ...props }: React.HTMLAttributes<HT
 export interface SidebarMenuButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   isActive?: boolean;
   size?: "sm" | "md" | "lg";
-  asChild?: boolean;
+  /**
+   * 다른 엘리먼트(예: Next.js `Link`)로 대체. sh-ui 의 슬롯 패턴은 `render` 로 통일.
+   *
+   *   <SidebarMenuButton render={<Link href='/'>홈</Link>} />
+   */
+  render?: React.ReactElement;
   sectionId?: string;
   panelId?: string;
 }
@@ -365,7 +370,7 @@ const menuButtonSize = {
 };
 
 export const SidebarMenuButton = React.forwardRef<HTMLButtonElement, SidebarMenuButtonProps>(
-  function SidebarMenuButton({ className, isActive, size = "md", asChild, sectionId, panelId, onClick, children, ...props }, ref) {
+  function SidebarMenuButton({ className, isActive, size = "md", render, sectionId, panelId, onClick, children, ...props }, ref) {
     const tocActive = useTOCActiveId();
     const ctx = React.useContext(SidebarContext);
     const panelActive = panelId != null && ctx?.activePanel === panelId;
@@ -378,15 +383,19 @@ export const SidebarMenuButton = React.forwardRef<HTMLButtonElement, SidebarMenu
 
     const cls = cn(menuButtonBase, menuButtonSize[size], className);
 
-    if (asChild && React.isValidElement(children)) {
-      const child = children as React.ReactElement<Record<string, unknown>>;
-      const merged: Record<string, unknown> = {
-        ...props,
-        onClick: handleClick,
-        className: cn((child.props.className as string) || "", cls),
-        "data-active": resolvedIsActive || undefined,
-      };
-      return React.cloneElement(child, merged);
+    if (render && React.isValidElement(render)) {
+      const child = render as React.ReactElement<{ className?: string; children?: React.ReactNode }>;
+      return React.cloneElement(
+        child,
+        {
+          ref,
+          ...props,
+          onClick: handleClick,
+          className: cn(child.props.className, cls),
+          "data-active": resolvedIsActive || undefined,
+        } as Record<string, unknown>,
+        children ?? child.props.children,
+      );
     }
 
     return (
@@ -414,7 +423,10 @@ export function SidebarMenuSubItem({ className, ...props }: React.HTMLAttributes
 export interface SidebarMenuSubButtonProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   isActive?: boolean;
   size?: "sm" | "md";
-  asChild?: boolean;
+  /**
+   * 다른 anchor 컴포넌트(예: Next.js `Link`)로 대체. sh-ui 의 슬롯 패턴은 `render` 로 통일.
+   */
+  render?: React.ReactElement;
   sectionId?: string;
 }
 
@@ -422,19 +434,23 @@ 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", asChild, sectionId, children, ...props }, ref) {
+  function SidebarMenuSubButton({ className, isActive, size = "md", 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);
 
-    if (asChild && React.isValidElement(children)) {
-      const child = children as React.ReactElement<Record<string, unknown>>;
-      const merged: Record<string, unknown> = {
-        ...props,
-        className: cn((child.props.className as string) || "", cls),
-        "data-active": resolvedIsActive || undefined,
-      };
-      return React.cloneElement(child, merged);
+    if (render && React.isValidElement(render)) {
+      const child = render as React.ReactElement<{ className?: string; children?: React.ReactNode }>;
+      return React.cloneElement(
+        child,
+        {
+          ref,
+          ...props,
+          className: cn(child.props.className, cls),
+          "data-active": resolvedIsActive || undefined,
+        } as Record<string, unknown>,
+        children ?? child.props.children,
+      );
     }
 
     return <a ref={ref} className={cls} data-active={resolvedIsActive || undefined} {...props}>{children}</a>;

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

@@ -591,12 +591,13 @@ export interface SidebarMenuButtonProps extends React.ButtonHTMLAttributes<HTMLB
    */
   size?: "sm" | "md" | "lg";
   /**
-   * Radix asChild 패턴. children에 `<a>` 등 다른 요소를 넘겨 button 스타일만 입힐 때 사용.
-   * Next.js Link와 결합 시 유용 (`<SidebarMenuButton asChild><Link href=...>`).
+   * 다른 엘리먼트(예: Next.js `Link`)로 대체. 자체로 `<button>` 을 렌더하므로
+   * 자식으로 또 다른 button/anchor 를 넣지 말 것. sh-ui 의 모든 슬롯 패턴은
+   * `render` 로 통일 (Base UI 표준).
    *
-   * @default false
+   *   <SidebarMenuButton render={<Link href='/'>홈</Link>} />
    */
-  asChild?: boolean;
+  render?: React.ReactElement;
   /**
    * `SidebarTOC` 안에서 활성 섹션 id를 자동 동기화. 이 값과 TOC active id가 일치하면
    * `isActive`가 자동으로 `true`가 된다.
@@ -610,12 +611,14 @@ export interface SidebarMenuButtonProps extends React.ButtonHTMLAttributes<HTMLB
 }
 
 /**
- * 메뉴 한 줄을 누를 수 있는 버튼. `asChild`로 `<a>` 등 다른 요소에 스타일만 입힐 수 있고,
- * `sectionId`(SidebarTOC 활성 동기화) / `panelId`(SidebarPanel 토글)를 지정해 활성 상태를 자동 결정한다.
+ * 메뉴 한 줄을 누를 수 있는 버튼. `render` prop 으로 `<a>` 등 다른 엘리먼트로
+ * 슬롯 가능 (Next.js Link 결합). `sectionId`/`panelId` 로 활성 상태 자동 결정.
+ *
+ *   <SidebarMenuButton render={<Link href='/projects'>All projects</Link>} />
  */
 export const SidebarMenuButton = React.forwardRef<HTMLButtonElement, SidebarMenuButtonProps>(
   function SidebarMenuButton(
-    { className, isActive, size = "md", asChild, sectionId, panelId, onClick, children, ...props },
+    { className, isActive, size = "md", render, sectionId, panelId, onClick, children, ...props },
     ref
   ) {
     const tocActive = useTOCActiveId();
@@ -640,15 +643,22 @@ export const SidebarMenuButton = React.forwardRef<HTMLButtonElement, SidebarMenu
       `sh-ui-sidebar__menu-button--${size}`,
       className);
 
-    if (asChild && React.isValidElement(children)) {
-      const child = children as React.ReactElement<Record<string, unknown>>;
-      const merged: Record<string, unknown> = {
-        ...props,
-        onClick: handleClick,
-        className: cn((child.props.className as string) || "", cls),
-        "data-active": resolvedIsActive || undefined,
-      };
-      return React.cloneElement(child, merged);
+    if (render && React.isValidElement(render)) {
+      const child = render as React.ReactElement<{
+        className?: string;
+        children?: React.ReactNode;
+      }>;
+      return React.cloneElement(
+        child,
+        {
+          ref,
+          ...props,
+          onClick: handleClick,
+          className: cn(child.props.className, cls),
+          "data-active": resolvedIsActive || undefined,
+        } as Record<string, unknown>,
+        children ?? child.props.children,
+      );
     }
 
     return (
@@ -697,18 +707,20 @@ export interface SidebarMenuSubButtonProps extends React.AnchorHTMLAttributes<HT
    */
   size?: "sm" | "md";
   /**
-   * Radix asChild 패턴. children에 다른 anchor 컴포넌트(예: Next.js Link)를 넘길 때 사용.
-   * @default false
+   * 다른 anchor 컴포넌트(예: Next.js `Link`)로 대체. sh-ui 의 모든 슬롯
+   * 패턴은 `render` 로 통일 (Base UI 표준).
+   *
+   *   <SidebarMenuSubButton render={<Link href='/...'>서브</Link>} />
    */
-  asChild?: boolean;
+  render?: React.ReactElement;
   /** `SidebarTOC`의 활성 섹션 id 자동 동기화. 일치하면 `isActive`가 자동으로 `true`. */
   sectionId?: string;
 }
 
-/** 서브 메뉴 항목 내부의 링크(`<a>`). `sectionId`로 SidebarTOC 활성 상태와 연동. */
+/** 서브 메뉴 항목 내부의 링크. `render` prop 으로 다른 엘리먼트 슬롯 가능. `sectionId`로 TOC 활성 연동. */
 export const SidebarMenuSubButton = React.forwardRef<HTMLAnchorElement, SidebarMenuSubButtonProps>(
   function SidebarMenuSubButton(
-    { className, isActive, size = "md", asChild, sectionId, children, ...props },
+    { className, isActive, size = "md", render, sectionId, children, ...props },
     ref
   ) {
     const tocActive = useTOCActiveId();
@@ -718,14 +730,21 @@ export const SidebarMenuSubButton = React.forwardRef<HTMLAnchorElement, SidebarM
       `sh-ui-sidebar__menu-sub-button--${size}`,
       className);
 
-    if (asChild && React.isValidElement(children)) {
-      const child = children as React.ReactElement<Record<string, unknown>>;
-      const merged: Record<string, unknown> = {
-        ...props,
-        className: cn((child.props.className as string) || "", cls),
-        "data-active": resolvedIsActive || undefined,
-      };
-      return React.cloneElement(child, merged);
+    if (render && React.isValidElement(render)) {
+      const child = render as React.ReactElement<{
+        className?: string;
+        children?: React.ReactNode;
+      }>;
+      return React.cloneElement(
+        child,
+        {
+          ref,
+          ...props,
+          className: cn(child.props.className, cls),
+          "data-active": resolvedIsActive || undefined,
+        } as Record<string, unknown>,
+        children ?? child.props.children,
+      );
     }
 
     return (
@@ -935,9 +954,7 @@ export function SidebarCollapsibleContent({ children }: { children: React.ReactN
  *   <SidebarTOC sectionIds={["intro", "install", "usage"]}>
  *     <SidebarMenu>
  *       <SidebarMenuItem>
- *         <SidebarMenuButton sectionId="intro" asChild>
- *           <a href="#intro">Intro</a>
- *         </SidebarMenuButton>
+ *         <SidebarMenuButton sectionId="intro" render={<a href="#intro">Intro</a>} />
  *       </SidebarMenuItem>
  *       ...
  *     </SidebarMenu>

package/data/summaries/react.json

@@ -27,9 +27,9 @@
     "tabs": "탭 — separate exports: Tabs / TabsList / TabsTrigger / TabsContent / TabsIndicator (Base UI). dot syntax(`Tabs.List`) 아님.",
     "accordion": "펼침/접힘 아코디언 — separate exports: Accordion / AccordionItem / AccordionTrigger / AccordionContent (Base UI). single/multiple 모드. AccordionTrigger 는 자체로 `<button>` — 다른 엘리먼트로 슬롯하려면 `render` prop 사용.",
     "carousel": "슬라이드 캐러셀 — Embla 기반, autoplay/autoscroll.",
-    "sidebar": "앱 사이드바 — collapsible, SidebarMenu/SidebarGroup 조합.",
+    "sidebar": "앱 사이드바 — SidebarProvider / Sidebar / SidebarInset / SidebarTrigger / SidebarHeader/Content/Footer / SidebarGroup·GroupLabel·GroupContent / SidebarMenu·MenuItem·MenuButton / SidebarMenuSub·SubItem·SubButton / SidebarCollapsible 등. SidebarMenuButton·SidebarMenuSubButton 은 자체 button/anchor — Next Link 등 다른 엘리먼트로 슬롯하려면 `render` prop 사용 (`<SidebarMenuButton render={<Link href='/'>홈</Link>} />`). asChild 는 v0.75 에서 제거됨.",
     "header": "앱 헤더 — 로고/네비/액션 compound, 데스크탑 inline / 모바일 drawer 자동 전환. drawer focus trap·ESC·focus restore. HeaderNav value(controlled) / defaultValue+onValueChange(uncontrolled) 로 자식 HeaderItem active 자동 매칭 (aria-current 자동, match 커스터마이즈). HeaderMenu(서브메뉴, 데스크탑 portal dropdown / drawer collapsible) · HeaderNavGroup(섹션 라벨) · HeaderDesktopOnly/HeaderMobileOnly(가시성 토글, drawer 이동 없음). variant(solid/transparent/blur) · stickyHide(prefers-reduced-motion 존중, 컨테이너 스크롤 자동 감지) 정식 지원. backdrop-filter @supports 폴백.",
-    "breadcrumb": "경로 내비게이션 — separate exports: Breadcrumb / BreadcrumbList / BreadcrumbItem / BreadcrumbLink / BreadcrumbPage / BreadcrumbSeparator / BreadcrumbEllipsis. dot syntax 아님. aria-current 자동.",
+    "breadcrumb": "경로 내비게이션 — separate exports: Breadcrumb / BreadcrumbList / BreadcrumbItem / BreadcrumbLink / BreadcrumbPage / BreadcrumbSeparator / BreadcrumbEllipsis. BreadcrumbLink 는 자체 `<a>` — Next Link 등 다른 엘리먼트로 슬롯하려면 `render` prop 사용 (`<BreadcrumbLink render={<Link href='/...'>Projects</Link>} />`). aria-current 자동.",
     "pagination": "페이지 단위 내비게이션 — separate exports: Pagination / PaginationContent / PaginationItem / PaginationLink / PaginationPrevious / PaginationNext / PaginationEllipsis. getPaginationRange 유틸 동봉. aria-current 자동.",
     "avatar": "프로필 아바타 — 이미지 fallback → initials (Base UI).",
     "badge": "상태 뱃지 — variant, size.",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sh-ui-cli",
-  "version": "0.74.0",
+  "version": "0.75.0",
   "description": "sh-ui CLI — 프로젝트 스캐폴드(create) + 컴포넌트 추가(add/list/remove) + IDE-내 AI용 MCP 서버",
   "license": "MIT",
   "repository": {
@@ -48,6 +48,7 @@
   },
   "scripts": {
     "bundle-data": "node scripts/copy-data.mjs",
+    "pretest": "node scripts/copy-data.mjs",
     "test": "vitest run",
     "prepublishOnly": "node scripts/copy-data.mjs && node --check bin/sh-ui.mjs"
   },

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

@@ -5,7 +5,8 @@
     "paths": {
       "@/lib/*": ["./lib/*"],
       "@/components/*": ["./components/*"],
-      "@workspace/ui-app-name/*": ["../../packages/ui/ui-apps/ui-app-name/src/*"]
+      "@workspace/ui-app-name/*": ["../../packages/ui/ui-apps/ui-app-name/src/*"],
+      "@workspace/ui-core/*": ["../../packages/ui/ui-core/src/*"]
     },
     "plugins": [
       {

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

@@ -4,7 +4,8 @@
     "baseUrl": ".",
     "paths": {
       "@/*": ["./*"],
-      "@workspace/ui-app-name/*": ["../../packages/ui/ui-apps/ui-app-name/src/*"]
+      "@workspace/ui-app-name/*": ["../../packages/ui/ui-apps/ui-app-name/src/*"],
+      "@workspace/ui-core/*": ["../../packages/ui/ui-core/src/*"]
     },
     "plugins": [
       {

package/templates/nextjs-app/package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "@tanstack/react-query": "^5.90.21",
     "@workspace/ui-app-name": "workspace:*",
+    "@workspace/ui-core": "workspace:*",
     "lucide-react": "^0.563.0",
     "next": "16.1.6",
     "next-themes": "^0.4.6",

package/templates/nextjs-app/vitest.config.ts

@@ -9,6 +9,10 @@ export default defineConfig({
         __dirname,
         '../../packages/ui/ui-apps/ui-app-name/src',
       ),
+      '@workspace/ui-core': path.resolve(
+        __dirname,
+        '../../packages/ui/ui-core/src',
+      ),
     },
   },
   test: {