sh-ui-cli 0.112.0 → 0.114.0

package/data/registry/react/components/form-rhf/rhf.test.tsx

@@ -6,7 +6,7 @@ import { useForm } from "react-hook-form";
 import { Form } from "../form";
 import { Field } from "../form/field";
 import { FormControl, FormError } from "../form/field";
-import { adaptReactHookForm } from "./index";
+import { adaptReactHookForm, useReactHookFormAdapter } from "./index";
 
 function TestForm() {
   const rhf = useForm({ defaultValues: { email: "" }, mode: "onBlur" });
@@ -40,3 +40,55 @@ describe("adaptReactHookForm", () => {
     await screen.findByText("bad");
   });
 });
+
+// ─────────────────────────────────────────────
+// useReactHookFormAdapter — v0.114+ (안정화 hook)
+// ─────────────────────────────────────────────
+describe("useReactHookFormAdapter", () => {
+  it("returns same store instance across re-renders", () => {
+    const stores: any[] = [];
+    function Probe() {
+      const rhf = useForm({ defaultValues: { x: "" } });
+      const form = useReactHookFormAdapter(rhf);
+      stores.push(form);
+      const [, force] = React.useReducer((s: number) => s + 1, 0);
+      return <button onClick={force as any} data-testid="rerender">rerender</button>;
+    }
+    const { getByTestId } = render(<Probe />);
+    // 강제 re-render 3회
+    for (let i = 0; i < 3; i++) {
+      getByTestId("rerender").click();
+    }
+    // 최초 + re-render 들 모두 같은 인스턴스
+    expect(stores.length).toBeGreaterThanOrEqual(2);
+    for (const s of stores) {
+      expect(s).toBe(stores[0]);
+    }
+  });
+
+  it("works with render prop and propagates value through RHF", async () => {
+    const user = userEvent.setup();
+    function HookForm() {
+      const rhf = useForm({ defaultValues: { email: "" }, mode: "onBlur" });
+      const form = useReactHookFormAdapter(rhf);
+      return (
+        <Form form={form}>
+          <Field name="email">
+            {(field) => (
+              <input
+                data-testid="i"
+                value={(field.value as string) ?? ""}
+                onChange={(e) => field.handleChange(e.target.value)}
+                onBlur={field.handleBlur}
+              />
+            )}
+          </Field>
+        </Form>
+      );
+    }
+    render(<HookForm />);
+    const input = screen.getByTestId("i") as HTMLInputElement;
+    await user.type(input, "kim@studio");
+    expect(input.value).toBe("kim@studio");
+  });
+});

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

@@ -17,7 +17,11 @@ export const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
     <label
       ref={ref}
       className={cn(
-        "flex flex-col gap-0.5 text-[length:var(--text-sm)] font-medium leading-snug text-foreground cursor-pointer select-none not-has-[[data-sh-ui-label-part]]:block",
+        // 기본 — typography + 인터랙션만. display 는 label 의 native(inline) 유지.
+        // sub-part(LabelTitle/Subtitle/Description/Caption) 가 자식에 있을 때만
+        // 자동으로 flex-col stack — 사용자가 가로 정렬(inline-flex items-center)
+        // 을 명시할 수 있도록 기본 display 를 강제하지 않는다.
+        "text-[length:var(--text-sm)] font-medium leading-snug text-foreground cursor-pointer select-none has-[[data-sh-ui-label-part]]:flex has-[[data-sh-ui-label-part]]:flex-col has-[[data-sh-ui-label-part]]:gap-0.5",
         // 필수 표시 — title 이 있으면 title 뒤, 없으면 label 뒤에 * 부착
         isRequired &&
           "has-[[data-sh-ui-label-part='title']]:[&>[data-sh-ui-label-part='title']]:after:content-['_*'] has-[[data-sh-ui-label-part='title']]:[&>[data-sh-ui-label-part='title']]:after:text-danger has-[[data-sh-ui-label-part='title']]:[&>[data-sh-ui-label-part='title']]:after:font-semibold not-has-[[data-sh-ui-label-part='title']]:after:content-['_*'] not-has-[[data-sh-ui-label-part='title']]:after:text-danger not-has-[[data-sh-ui-label-part='title']]:after:font-semibold",

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

@@ -1,7 +1,6 @@
+/* 기본 — typography + 인터랙션만. display 는 label 의 native (inline) 유지.
+   사용자가 `inline-flex items-center gap-2` 같이 가로 정렬을 명시할 수 있다. */
 .sh-ui-label {
-  display: flex;
-  flex-direction: column;
-  gap: 0.125rem;
   font-size: var(--text-sm);
   font-weight: var(--weight-medium);
   line-height: 1.4;
@@ -10,8 +9,13 @@
   user-select: none;
 }
 
-.sh-ui-label:not(:has(.sh-ui-label__title, .sh-ui-label__subtitle, .sh-ui-label__description, .sh-ui-label__caption)) {
-  display: block;
+/* sub-part (Title/Subtitle/Description/Caption) 가 자식에 있을 때만 세로 stack.
+   사용자가 `<Label><LabelTitle .../><LabelDescription .../></Label>` 형태로
+   쓸 때 자동으로 정렬. */
+.sh-ui-label:has(.sh-ui-label__title, .sh-ui-label__subtitle, .sh-ui-label__description, .sh-ui-label__caption) {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
 }
 
 /* ───── 텍스트 계층 ───── */

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

@@ -1,7 +1,6 @@
+/* 기본 — typography + 인터랙션만. display 는 label 의 native (inline) 유지.
+   사용자가 `inline-flex items-center gap-2` 같이 가로 정렬을 명시할 수 있다. */
 .label {
-  display: flex;
-  flex-direction: column;
-  gap: 0.125rem;
   font-size: var(--text-sm);
   font-weight: var(--weight-medium);
   line-height: 1.4;
@@ -10,8 +9,11 @@
   user-select: none;
 }
 
-.label:not(:has(.label__title, .label__subtitle, .label__description, .label__caption)) {
-  display: block;
+/* sub-part (Title/Subtitle/Description/Caption) 가 자식에 있을 때만 세로 stack. */
+.label:has(.label__title, .label__subtitle, .label__description, .label__caption) {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
 }
 
 /* ───── 텍스트 계층 ───── */

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

@@ -4,42 +4,74 @@ import styles from "./styles.module.css";
 
 import { cn } from "@SH_UI_UTILS@";
 export type SeparatorOrientation = "horizontal" | "vertical";
+export type SeparatorAlign = "start" | "center" | "end";
 
 export interface SeparatorProps
   extends Omit<React.HTMLAttributes<HTMLDivElement>, "role"> {
   orientation?: SeparatorOrientation;
+  /**
+   * 라벨 정렬 — children 이 있을 때만 의미를 가진다. 기본 center.
+   */
+  align?: SeparatorAlign;
   /**
    * 의미 없는 시각적 구분선인지 여부. 기본 true(aria-hidden).
-   * 스크린리더에도 섹션 구분을 알려야 하면 false.
    */
   decorative?: boolean;
 }
 
 /**
- * 시각적 구분선. 가로(height=1px) / 세로(width=1px).
- *
- * 의미 있는 구분에는 `decorative={false}`로 role=separator가 붙고, 그렇지 않으면
- * aria-hidden 처리되어 보조 기술에 노출되지 않는다.
+ * 시각적 구분선 (CSS Modules 변종). 두 변종을 한 컴포넌트로:
+ *   - children 없음: 가로/세로 1px
+ *   - children 있음: 가운데 라벨이 있는 "──── label ────" 형식
  */
 export const Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(
   function Separator(
-    { className, orientation = "horizontal", decorative = true, ...props },
+    {
+      className,
+      orientation = "horizontal",
+      align = "center",
+      decorative = true,
+      children,
+      ...props
+    },
     ref,
   ) {
+    const hasLabel = children != null && children !== false;
+    if (!hasLabel) {
+      return (
+        <div
+          ref={ref}
+          role={decorative ? undefined : "separator"}
+          aria-orientation={decorative ? undefined : orientation}
+          aria-hidden={decorative || undefined}
+          data-orientation={orientation}
+          className={cn(
+            styles.separator,
+            styles[`separator--${orientation}`],
+            className,
+          )}
+          {...props}
+        />
+      );
+    }
     return (
       <div
         ref={ref}
         role={decorative ? undefined : "separator"}
-        aria-orientation={decorative ? undefined : orientation}
-        aria-hidden={decorative || undefined}
-        data-orientation={orientation}
-        className={cn(
-          styles.separator,
-          styles[`separator--${orientation}`],
-          className,
-        )}
+        aria-orientation={decorative ? undefined : "horizontal"}
+        data-orientation="horizontal"
+        data-align={align}
+        className={cn(styles.separator__labeled, className)}
         {...props}
-      />
+      >
+        {align !== "start" ? (
+          <span aria-hidden className={styles.separator__line} />
+        ) : null}
+        <span className={styles.separator__label}>{children}</span>
+        {align !== "end" ? (
+          <span aria-hidden className={styles.separator__line} />
+        ) : null}
+      </div>
     );
   },
 );

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

@@ -3,37 +3,79 @@ import * as React from "react";
 
 import { cn } from "@SH_UI_UTILS@";
 export type SeparatorOrientation = "horizontal" | "vertical";
+export type SeparatorAlign = "start" | "center" | "end";
 
 export interface SeparatorProps
   extends Omit<React.HTMLAttributes<HTMLDivElement>, "role"> {
   orientation?: SeparatorOrientation;
+  /**
+   * 라벨 정렬 — children 이 있을 때만 의미를 가진다. 기본 center.
+   */
+  align?: SeparatorAlign;
   /**
    * 의미 없는 시각적 구분선인지 여부. 기본 true(aria-hidden).
-   * 스크린리더에도 섹션 구분을 알려야 하면 false.
    */
   decorative?: boolean;
 }
 
 /**
- * 시각적 구분선 (Tailwind utility 변종). 가로(height=1px) / 세로(width=1px).
+ * 시각적 구분선 (Tailwind utility 변종). 두 변종을 한 컴포넌트로:
+ *   - children 없음: 가로(height=1px) / 세로(width=1px)
+ *   - children 있음: 가운데에 라벨이 있는 "──── label ────" 형식
  */
 export const Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(
   function Separator(
-    { className, orientation = "horizontal", decorative = true, ...props },
+    {
+      className,
+      orientation = "horizontal",
+      align = "center",
+      decorative = true,
+      children,
+      ...props
+    },
     ref,
   ) {
-    const sizing =
-      orientation === "horizontal" ? "w-full h-px" : "w-px h-full self-stretch";
+    const hasLabel = children != null && children !== false;
+    if (!hasLabel) {
+      const sizing =
+        orientation === "horizontal"
+          ? "w-full h-px"
+          : "w-px h-full self-stretch";
+      return (
+        <div
+          ref={ref}
+          role={decorative ? undefined : "separator"}
+          aria-orientation={decorative ? undefined : orientation}
+          aria-hidden={decorative || undefined}
+          data-orientation={orientation}
+          className={cn("bg-border shrink-0", sizing, className)}
+          {...props}
+        />
+      );
+    }
     return (
       <div
         ref={ref}
         role={decorative ? undefined : "separator"}
-        aria-orientation={decorative ? undefined : orientation}
-        aria-hidden={decorative || undefined}
-        data-orientation={orientation}
-        className={cn("bg-border shrink-0", sizing, className)}
+        aria-orientation={decorative ? undefined : "horizontal"}
+        data-orientation="horizontal"
+        data-align={align}
+        className={cn(
+          "flex w-full shrink-0 items-center gap-[var(--space-3,0.75rem)]",
+          className,
+        )}
         {...props}
-      />
+      >
+        {align !== "start" ? (
+          <span aria-hidden className="h-px flex-1 bg-border" />
+        ) : null}
+        <span className="text-[length:var(--text-xs,0.75rem)] font-semibold uppercase tracking-[0.04em] text-foreground-subtle">
+          {children}
+        </span>
+        {align !== "end" ? (
+          <span aria-hidden className="h-px flex-1 bg-border" />
+        ) : null}
+      </div>
     );
   },
 );

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

@@ -4,10 +4,16 @@ import "./styles.css";
 
 import { cn } from "@SH_UI_UTILS@";
 export type SeparatorOrientation = "horizontal" | "vertical";
+export type SeparatorAlign = "start" | "center" | "end";
 
 export interface SeparatorProps
   extends Omit<React.HTMLAttributes<HTMLDivElement>, "role"> {
   orientation?: SeparatorOrientation;
+  /**
+   * 라벨 정렬 — children 이 있을 때만 의미를 가진다. 기본 center.
+   * `start` 면 라벨이 왼쪽에 붙고 오른쪽으로만 선이 뻗는다 (반대도 마찬가지).
+   */
+  align?: SeparatorAlign;
   /**
    * 의미 없는 시각적 구분선인지 여부. 기본 true(aria-hidden).
    * 스크린리더에도 섹션 구분을 알려야 하면 false.
@@ -16,30 +22,62 @@ export interface SeparatorProps
 }
 
 /**
- * 시각적 구분선. 가로(height=1px) / 세로(width=1px).
+ * 시각적 구분선. 두 변종을 한 컴포넌트로:
+ *   - children 없음: 가로/세로 1px 선 (orientation 으로 선택)
+ *   - children 있음: 가운데에 라벨이 있는 "──── label ────" 형식
+ *     (horizontal 강제, align 으로 라벨 위치 지정)
  *
- * 의미 있는 구분에는 `decorative={false}`로 role=separator가 붙고, 그렇지 않으면
- * aria-hidden 처리되어 보조 기술에 노출되지 않는다.
+ * 의미 있는 구분에는 `decorative={false}` 로 role=separator 가 붙고,
+ * 그렇지 않으면 aria-hidden 처리되어 보조 기술에 노출되지 않는다.
  */
 export const Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(
   function Separator(
-    { className, orientation = "horizontal", decorative = true, ...props },
+    {
+      className,
+      orientation = "horizontal",
+      align = "center",
+      decorative = true,
+      children,
+      ...props
+    },
     ref,
   ) {
+    const hasLabel = children != null && children !== false;
+    if (!hasLabel) {
+      return (
+        <div
+          ref={ref}
+          role={decorative ? undefined : "separator"}
+          aria-orientation={decorative ? undefined : orientation}
+          aria-hidden={decorative || undefined}
+          data-orientation={orientation}
+          className={cn(
+            "sh-ui-separator",
+            `sh-ui-separator--${orientation}`,
+            className,
+          )}
+          {...props}
+        />
+      );
+    }
     return (
       <div
         ref={ref}
         role={decorative ? undefined : "separator"}
-        aria-orientation={decorative ? undefined : orientation}
-        aria-hidden={decorative || undefined}
-        data-orientation={orientation}
-        className={cn(
-          "sh-ui-separator",
-          `sh-ui-separator--${orientation}`,
-          className,
-        )}
+        aria-orientation={decorative ? undefined : "horizontal"}
+        data-orientation="horizontal"
+        data-align={align}
+        className={cn("sh-ui-separator--labeled", className)}
         {...props}
-      />
+      >
+        {align !== "start" ? (
+          <span aria-hidden className="sh-ui-separator__line" />
+        ) : null}
+        <span className="sh-ui-separator__label">{children}</span>
+        {align !== "end" ? (
+          <span aria-hidden className="sh-ui-separator__line" />
+        ) : null}
+      </div>
     );
   },
 );

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

@@ -13,3 +13,24 @@
   height: 100%;
   align-self: stretch;
 }
+
+/* labeled — children 있을 때 적용. 컨테이너 자체에는 배경 없음 (내부 .line 만 1px). */
+.sh-ui-separator--labeled {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3, 0.75rem);
+  width: 100%;
+  flex-shrink: 0;
+}
+.sh-ui-separator__line {
+  flex: 1;
+  height: 1px;
+  background: var(--border);
+}
+.sh-ui-separator__label {
+  font-size: var(--text-xs, 0.75rem);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--foreground-subtle);
+}

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

@@ -13,3 +13,23 @@
   height: 100%;
   align-self: stretch;
 }
+
+.separator__labeled {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3, 0.75rem);
+  width: 100%;
+  flex-shrink: 0;
+}
+.separator__line {
+  flex: 1;
+  height: 1px;
+  background: var(--border);
+}
+.separator__label {
+  font-size: var(--text-xs, 0.75rem);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--foreground-subtle);
+}

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

@@ -743,6 +743,63 @@ export const SidebarMenuButton = React.forwardRef<HTMLButtonElement, SidebarMenu
   }
 );
 
+/* ───────────── Menu trailing slots (badge / action) ─────────────
+ * SidebarMenuButton 의 `> span { flex: 1 }` 흐름 밖(absolute)에 위치해 라벨을
+ * 밀어내지 않는다. SidebarMenuItem 이 trailing 슬롯 존재를 :has() 로 감지해
+ * 내부 button/anchor 에 우측 패딩을 확보한다 (styles.module.css 참고). */
+
+/**
+ * SidebarMenuItem 의 우측 trailing 배지 (안 읽음 수 등). SidebarMenuButton 의
+ * 형제로 둔다 — absolute 라 라벨을 밀어내지 않고, pointer-events:none 으로 클릭은
+ * 행 전체 button 으로 통과한다.
+ *
+ *   <SidebarMenuItem>
+ *     <SidebarMenuButton render={<Link href='/x'>채팅</Link>} />
+ *     <SidebarMenuBadge>8</SidebarMenuBadge>
+ *   </SidebarMenuItem>
+ */
+export function SidebarMenuBadge({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-sidebar="menu-badge"
+      className={cn(styles["sidebar__menu-badge"], className)}
+      {...props}
+    />
+  );
+}
+
+export interface SidebarMenuActionProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /** 행 hover/포커스 시에만 노출. 기본은 항상 표시. */
+  showOnHover?: boolean;
+}
+
+/**
+ * SidebarMenuItem 의 우측 trailing 액션 버튼 (… 메뉴, 추가 등). badge 와 달리
+ * 클릭 가능. `showOnHover` 면 행 hover/포커스 시에만 노출 (CSS 부모 hover 셀렉터).
+ *
+ *   <SidebarMenuItem>
+ *     <SidebarMenuButton render={<Link href='/x'>채널</Link>} />
+ *     <SidebarMenuAction showOnHover aria-label='채널 설정'><MoreIcon /></SidebarMenuAction>
+ *   </SidebarMenuItem>
+ */
+export const SidebarMenuAction = React.forwardRef<HTMLButtonElement, SidebarMenuActionProps>(
+  function SidebarMenuAction({ className, showOnHover, ...props }, ref) {
+    return (
+      <button
+        ref={ref}
+        type="button"
+        data-sidebar="menu-action"
+        className={cn(
+          styles["sidebar__menu-action"],
+          showOnHover && styles["sidebar__menu-action--hover"],
+          className,
+        )}
+        {...props}
+      />
+    );
+  }
+);
+
 /* ───────────── Sub menu ───────────── */
 
 /** 메뉴 항목 내부의 서브 메뉴 리스트. SidebarMenuItem 안에 둔다. */

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

@@ -445,7 +445,18 @@ export function SidebarMenu({ className, ...props }: React.HTMLAttributes<HTMLUL
 }
 
 export function SidebarMenuItem({ className, ...props }: React.HTMLAttributes<HTMLLIElement>) {
-  return <li className={cn("relative m-0", className)} {...props} />;
+  return (
+    <li
+      className={cn(
+        // group/menu-item — SidebarMenuAction 의 showOnHover hover 타겟.
+        // trailing slot(badge/action)이 있으면 내부 button/anchor 에 우측 패딩을
+        // 확보해 라벨이 trailing 요소 밑으로 들어가지 않게 한다.
+        "group/menu-item relative m-0 has-[[data-sidebar=menu-badge]]:[&>a]:pr-8 has-[[data-sidebar=menu-badge]]:[&>button]:pr-8 has-[[data-sidebar=menu-action]]:[&>a]:pr-8 has-[[data-sidebar=menu-action]]:[&>button]:pr-8",
+        className,
+      )}
+      {...props}
+    />
+  );
 }
 
 export interface SidebarMenuButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -509,6 +520,62 @@ export const SidebarMenuButton = React.forwardRef<HTMLButtonElement, SidebarMenu
   }
 );
 
+/**
+ * SidebarMenuItem 의 우측 trailing 배지 (안 읽음 수 등). SidebarMenuButton 의
+ * 형제로 둔다 — button 의 `[&>span]:flex-1` 흐름 밖(absolute)이라 라벨을 밀어내지
+ * 않는다. 클릭 통과(pointer-events-none) — 행 전체 클릭이 button 으로 간다.
+ *
+ *   <SidebarMenuItem>
+ *     <SidebarMenuButton render={<Link href='/x'>채팅</Link>} />
+ *     <SidebarMenuBadge>8</SidebarMenuBadge>
+ *   </SidebarMenuItem>
+ */
+export function SidebarMenuBadge({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-sidebar="menu-badge"
+      className={cn(
+        "pointer-events-none absolute right-[var(--space-2)] top-1/2 flex h-5 min-w-5 -translate-y-1/2 select-none items-center justify-center px-1 text-[length:var(--text-xs)] font-medium tabular-nums text-[var(--sidebar-fg)] [[data-state=collapsed][data-collapsible=icon]_&]:hidden",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/**
+ * SidebarMenuItem 의 우측 trailing 액션 버튼 (… 메뉴, 추가 등). badge 와 달리
+ * 클릭 가능. `showOnHover` 면 행 hover/포커스 시에만 노출.
+ *
+ *   <SidebarMenuItem>
+ *     <SidebarMenuButton render={<Link href='/x'>채널</Link>} />
+ *     <SidebarMenuAction showOnHover aria-label='채널 설정'><MoreIcon /></SidebarMenuAction>
+ *   </SidebarMenuItem>
+ */
+export interface SidebarMenuActionProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  showOnHover?: boolean;
+}
+
+export const SidebarMenuAction = React.forwardRef<HTMLButtonElement, SidebarMenuActionProps>(
+  function SidebarMenuAction({ className, showOnHover, ...props }, ref) {
+    return (
+      <button
+        ref={ref}
+        type="button"
+        data-sidebar="menu-action"
+        className={cn(
+          "absolute right-[var(--space-1)] top-1/2 flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-[calc(var(--radius)-2px)] border-none bg-transparent text-[var(--foreground-muted)] cursor-pointer transition-[background-color,color] duration-[var(--duration-fast)] hover:bg-[var(--sidebar-accent)] hover:text-[var(--sidebar-accent-fg)] focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring [&>svg]:h-4 [&>svg]:w-4 [&>svg]:shrink-0 [[data-state=collapsed][data-collapsible=icon]_&]:hidden motion-reduce:transition-none",
+          showOnHover &&
+            "opacity-0 focus-visible:opacity-100 group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[active]:opacity-100",
+          className,
+        )}
+        {...props}
+      />
+    );
+  }
+);
+
 export function SidebarMenuSub({ className, ...props }: React.HTMLAttributes<HTMLUListElement>) {
   return (
     <ul

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

@@ -790,6 +790,63 @@ export const SidebarMenuButton = React.forwardRef<HTMLButtonElement, SidebarMenu
   }
 );
 
+/* ───────────── Menu trailing slots (badge / action) ─────────────
+ * SidebarMenuButton 의 `> span { flex: 1 }` 흐름 밖(absolute)에 위치해 라벨을
+ * 밀어내지 않는다. SidebarMenuItem 이 trailing 슬롯 존재를 :has() 로 감지해
+ * 내부 button/anchor 에 우측 패딩을 확보한다 (styles.css 참고). */
+
+/**
+ * SidebarMenuItem 의 우측 trailing 배지 (안 읽음 수 등). SidebarMenuButton 의
+ * 형제로 둔다 — absolute 라 라벨을 밀어내지 않고, pointer-events:none 으로 클릭은
+ * 행 전체 button 으로 통과한다.
+ *
+ *   <SidebarMenuItem>
+ *     <SidebarMenuButton render={<Link href='/x'>채팅</Link>} />
+ *     <SidebarMenuBadge>8</SidebarMenuBadge>
+ *   </SidebarMenuItem>
+ */
+export function SidebarMenuBadge({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-sidebar="menu-badge"
+      className={cn("sh-ui-sidebar__menu-badge", className)}
+      {...props}
+    />
+  );
+}
+
+export interface SidebarMenuActionProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /** 행 hover/포커스 시에만 노출. 기본은 항상 표시. */
+  showOnHover?: boolean;
+}
+
+/**
+ * SidebarMenuItem 의 우측 trailing 액션 버튼 (… 메뉴, 추가 등). badge 와 달리
+ * 클릭 가능. `showOnHover` 면 행 hover/포커스 시에만 노출 (CSS 부모 hover 셀렉터).
+ *
+ *   <SidebarMenuItem>
+ *     <SidebarMenuButton render={<Link href='/x'>채널</Link>} />
+ *     <SidebarMenuAction showOnHover aria-label='채널 설정'><MoreIcon /></SidebarMenuAction>
+ *   </SidebarMenuItem>
+ */
+export const SidebarMenuAction = React.forwardRef<HTMLButtonElement, SidebarMenuActionProps>(
+  function SidebarMenuAction({ className, showOnHover, ...props }, ref) {
+    return (
+      <button
+        ref={ref}
+        type="button"
+        data-sidebar="menu-action"
+        className={cn(
+          "sh-ui-sidebar__menu-action",
+          showOnHover && "sh-ui-sidebar__menu-action--hover",
+          className,
+        )}
+        {...props}
+      />
+    );
+  }
+);
+
 /* ───────────── Sub menu ───────────── */
 
 /** 메뉴 항목 내부의 서브 메뉴 리스트. SidebarMenuItem 안에 둔다. */