sh-ui-cli 0.113.0 → 0.115.0

package/data/registry/react/components/rich-text-editor/styles.css

@@ -1,3 +1,25 @@
+/* 본문 텍스트 색 팔레트 — 라이트/다크 추종 (RTE Color 확장이 var() 로 저장) */
+:root {
+  --sh-ui-rte-c-moss: #2f5d4f;
+  --sh-ui-rte-c-red: #c0392b;
+  --sh-ui-rte-c-orange: #c2410c;
+  --sh-ui-rte-c-blue: #1d4ed8;
+}
+.dark {
+  --sh-ui-rte-c-moss: #5ba886;
+  --sh-ui-rte-c-red: #f1736a;
+  --sh-ui-rte-c-orange: #f0935a;
+  --sh-ui-rte-c-blue: #6ba2f2;
+}
+@media (prefers-color-scheme: dark) {
+  :root:not(.light):not(.dark) {
+    --sh-ui-rte-c-moss: #5ba886;
+    --sh-ui-rte-c-red: #f1736a;
+    --sh-ui-rte-c-orange: #f0935a;
+    --sh-ui-rte-c-blue: #6ba2f2;
+  }
+}
+
 .sh-ui-rte {
   display: flex;
   flex-direction: column;
@@ -18,13 +40,15 @@
 
 /* ─── Toolbar ─── */
 .sh-ui-rte__toolbar {
+  background: var(--background-muted);
+  border-bottom: 1px solid var(--border);
+}
+.sh-ui-rte__toolbar-row {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 0.125rem;
   padding: var(--space-1) var(--space-2);
-  background: var(--background-muted);
-  border-bottom: 1px solid var(--border);
 }
 .sh-ui-rte__btn {
   display: inline-flex;
@@ -70,6 +94,64 @@
   background: var(--border);
 }
 
+/* ─── Secondary panel (color · link) ─── */
+.sh-ui-rte__panel {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+  padding: var(--space-1) var(--space-2);
+  border-top: 1px solid var(--border);
+}
+.sh-ui-rte__panel--swatches {
+  flex-wrap: wrap;
+}
+.sh-ui-rte__swatch {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 9999px;
+  border: 1px solid var(--border);
+  cursor: pointer;
+  transition: border-color var(--duration-fast);
+  -webkit-tap-highlight-color: transparent;
+}
+.sh-ui-rte__swatch:hover {
+  border-color: var(--border-strong);
+}
+.sh-ui-rte__swatch:focus-visible {
+  outline: var(--border-width-strong) solid var(--ring);
+  outline-offset: 1px;
+}
+.sh-ui-rte__swatch.is-active {
+  border-color: var(--foreground);
+}
+.sh-ui-rte__swatch-a {
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--foreground-muted);
+}
+.sh-ui-rte__link-input {
+  flex: 1;
+  min-width: 0;
+  height: 1.75rem;
+  padding: 0 var(--space-2);
+  font-size: 0.875rem;
+  background: var(--background);
+  color: var(--foreground);
+  border: 1px solid var(--border);
+  border-radius: calc(var(--radius) - 2px);
+  outline: none;
+}
+.sh-ui-rte__link-input:focus {
+  border-color: var(--foreground);
+}
+.sh-ui-rte__link-input:focus-visible {
+  outline: var(--border-width-strong) solid var(--ring);
+  outline-offset: 1px;
+}
+
 /* ─── Content ─── */
 .sh-ui-rte__viewport {
   display: flex;
@@ -108,15 +190,27 @@
   font-weight: 600;
   line-height: 1.3;
 }
-.sh-ui-rte__content h1 { font-size: 1.5rem; }
-.sh-ui-rte__content h2 { font-size: 1.25rem; }
-.sh-ui-rte__content h3 { font-size: 1.125rem; }
+.sh-ui-rte__content h1 {
+  font-size: 1.5rem;
+}
+.sh-ui-rte__content h2 {
+  font-size: 1.25rem;
+}
+.sh-ui-rte__content h3 {
+  font-size: 1.125rem;
+}
 
 .sh-ui-rte__content ul,
 .sh-ui-rte__content ol {
   margin: 0 0 var(--space-3);
   padding-inline-start: var(--space-5);
 }
+.sh-ui-rte__content ul {
+  list-style: disc;
+}
+.sh-ui-rte__content ol {
+  list-style: decimal;
+}
 .sh-ui-rte__content li {
   margin-bottom: var(--space-1);
 }
@@ -174,6 +268,10 @@
 .sh-ui-rte__content a:hover {
   text-decoration-thickness: 2px;
 }
+.sh-ui-rte__content u {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
 
 /* Placeholder (Tiptap extension) */
 .sh-ui-rte__content p.is-editor-empty:first-child::before,

package/data/registry/react/components/rich-text-editor/styles.module.css

@@ -1,3 +1,25 @@
+/* 본문 텍스트 색 팔레트 — 라이트/다크 추종 (RTE Color 확장이 var() 로 저장) */
+:root {
+  --sh-ui-rte-c-moss: #2f5d4f;
+  --sh-ui-rte-c-red: #c0392b;
+  --sh-ui-rte-c-orange: #c2410c;
+  --sh-ui-rte-c-blue: #1d4ed8;
+}
+.dark {
+  --sh-ui-rte-c-moss: #5ba886;
+  --sh-ui-rte-c-red: #f1736a;
+  --sh-ui-rte-c-orange: #f0935a;
+  --sh-ui-rte-c-blue: #6ba2f2;
+}
+@media (prefers-color-scheme: dark) {
+  :root:not(.light):not(.dark) {
+    --sh-ui-rte-c-moss: #5ba886;
+    --sh-ui-rte-c-red: #f1736a;
+    --sh-ui-rte-c-orange: #f0935a;
+    --sh-ui-rte-c-blue: #6ba2f2;
+  }
+}
+
 .rte {
   display: flex;
   flex-direction: column;
@@ -18,13 +40,15 @@
 
 /* ─── Toolbar ─── */
 .rte__toolbar {
+  background: var(--background-muted);
+  border-bottom: 1px solid var(--border);
+}
+.rte__toolbar-row {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 0.125rem;
   padding: var(--space-1) var(--space-2);
-  background: var(--background-muted);
-  border-bottom: 1px solid var(--border);
 }
 .rte__btn {
   display: inline-flex;
@@ -70,6 +94,64 @@
   background: var(--border);
 }
 
+/* ─── Secondary panel (color · link) ─── */
+.rte__panel {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+  padding: var(--space-1) var(--space-2);
+  border-top: 1px solid var(--border);
+}
+.rte__panel--swatches {
+  flex-wrap: wrap;
+}
+.rte__swatch {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 9999px;
+  border: 1px solid var(--border);
+  cursor: pointer;
+  transition: border-color var(--duration-fast);
+  -webkit-tap-highlight-color: transparent;
+}
+.rte__swatch:hover {
+  border-color: var(--border-strong);
+}
+.rte__swatch:focus-visible {
+  outline: var(--border-width-strong) solid var(--ring);
+  outline-offset: 1px;
+}
+.rte__swatch.is-active {
+  border-color: var(--foreground);
+}
+.rte__swatch-a {
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--foreground-muted);
+}
+.rte__link-input {
+  flex: 1;
+  min-width: 0;
+  height: 1.75rem;
+  padding: 0 var(--space-2);
+  font-size: 0.875rem;
+  background: var(--background);
+  color: var(--foreground);
+  border: 1px solid var(--border);
+  border-radius: calc(var(--radius) - 2px);
+  outline: none;
+}
+.rte__link-input:focus {
+  border-color: var(--foreground);
+}
+.rte__link-input:focus-visible {
+  outline: var(--border-width-strong) solid var(--ring);
+  outline-offset: 1px;
+}
+
 /* ─── Content ─── */
 .rte__viewport {
   display: flex;
@@ -108,15 +190,27 @@
   font-weight: 600;
   line-height: 1.3;
 }
-.rte__content h1 { font-size: 1.5rem; }
-.rte__content h2 { font-size: 1.25rem; }
-.rte__content h3 { font-size: 1.125rem; }
+.rte__content h1 {
+  font-size: 1.5rem;
+}
+.rte__content h2 {
+  font-size: 1.25rem;
+}
+.rte__content h3 {
+  font-size: 1.125rem;
+}
 
 .rte__content ul,
 .rte__content ol {
   margin: 0 0 var(--space-3);
   padding-inline-start: var(--space-5);
 }
+.rte__content ul {
+  list-style: disc;
+}
+.rte__content ol {
+  list-style: decimal;
+}
 .rte__content li {
   margin-bottom: var(--space-1);
 }
@@ -174,6 +268,10 @@
 .rte__content a:hover {
   text-decoration-thickness: 2px;
 }
+.rte__content u {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
 
 /* Placeholder (Tiptap extension) */
 .rte__content p.is-editor-empty:first-child::before,

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 안에 둔다. */

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

@@ -433,6 +433,15 @@
   margin: 0;
 }
 
+/* trailing 슬롯(badge/action)이 있으면 내부 button/anchor 에 우측 패딩을 확보해
+ * 라벨이 trailing 요소 밑으로 들어가지 않게 한다. */
+.sh-ui-sidebar__menu-item:has(.sh-ui-sidebar__menu-badge) > a,
+.sh-ui-sidebar__menu-item:has(.sh-ui-sidebar__menu-badge) > button,
+.sh-ui-sidebar__menu-item:has(.sh-ui-sidebar__menu-action) > a,
+.sh-ui-sidebar__menu-item:has(.sh-ui-sidebar__menu-action) > button {
+  padding-inline-end: 2rem;
+}
+
 .sh-ui-sidebar__menu-button {
   display: flex;
   width: 100%;
@@ -499,6 +508,73 @@
   font-size: 0.9375rem;
 }
 
+/* ───────────── Menu trailing slots (badge / action) ───────────── */
+.sh-ui-sidebar__menu-badge {
+  position: absolute;
+  right: var(--space-2);
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 1.25rem;
+  min-width: 1.25rem;
+  padding: 0 0.25rem;
+  font-size: var(--text-xs);
+  font-weight: var(--weight-medium);
+  font-variant-numeric: tabular-nums;
+  color: var(--sidebar-fg);
+  pointer-events: none;
+  user-select: none;
+}
+
+.sh-ui-sidebar__menu-action {
+  position: absolute;
+  right: var(--space-1);
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  border: none;
+  border-radius: calc(var(--radius) - 2px);
+  background: transparent;
+  color: var(--foreground-muted);
+  cursor: pointer;
+  transition: background-color var(--duration-fast), color var(--duration-fast), opacity var(--duration-fast);
+}
+.sh-ui-sidebar__menu-action > svg {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+}
+.sh-ui-sidebar__menu-action:hover {
+  background: var(--sidebar-accent);
+  color: var(--sidebar-accent-fg);
+}
+.sh-ui-sidebar__menu-action:focus-visible {
+  outline: var(--border-width-strong) solid var(--ring);
+}
+
+/* showOnHover — 행 hover/포커스 시에만 노출. 부모 menu-item hover/focus-within 셀렉터. */
+.sh-ui-sidebar__menu-action--hover {
+  opacity: 0;
+}
+.sh-ui-sidebar__menu-item:hover .sh-ui-sidebar__menu-action--hover,
+.sh-ui-sidebar__menu-item:focus-within .sh-ui-sidebar__menu-action--hover,
+.sh-ui-sidebar__menu-action--hover:focus-visible,
+.sh-ui-sidebar__menu-action--hover[data-active] {
+  opacity: 1;
+}
+
+/* collapsed=icon 모드에서는 trailing 슬롯 숨김 (라벨도 숨겨지므로) */
+.sh-ui-sidebar[data-state="collapsed"][data-collapsible="icon"] .sh-ui-sidebar__menu-badge,
+.sh-ui-sidebar[data-state="collapsed"][data-collapsible="icon"] .sh-ui-sidebar__menu-action {
+  display: none;
+}
+
 /* ───────────── Sub menu ───────────── */
 .sh-ui-sidebar__menu-sub {
   list-style: none;
@@ -607,6 +683,7 @@
   .sh-ui-sidebar__trigger,
   .sh-ui-sidebar__menu-button,
   .sh-ui-sidebar__menu-sub-button,
+  .sh-ui-sidebar__menu-action,
   .sh-ui-sidebar__panel-close,
   .sh-ui-sidebar__chevron,
   .sh-ui-sidebar__collapsible-content {

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

@@ -412,6 +412,15 @@
   margin: 0;
 }
 
+/* trailing 슬롯(badge/action)이 있으면 내부 button/anchor 에 우측 패딩을 확보해
+ * 라벨이 trailing 요소 밑으로 들어가지 않게 한다. */
+.sidebar__menu-item:has(.sidebar__menu-badge) > a,
+.sidebar__menu-item:has(.sidebar__menu-badge) > button,
+.sidebar__menu-item:has(.sidebar__menu-action) > a,
+.sidebar__menu-item:has(.sidebar__menu-action) > button {
+  padding-inline-end: 2rem;
+}
+
 .sidebar__menu-button {
   display: flex;
   width: 100%;
@@ -478,6 +487,73 @@
   font-size: 0.9375rem;
 }
 
+/* ───────────── Menu trailing slots (badge / action) ───────────── */
+.sidebar__menu-badge {
+  position: absolute;
+  right: var(--space-2);
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 1.25rem;
+  min-width: 1.25rem;
+  padding: 0 0.25rem;
+  font-size: var(--text-xs);
+  font-weight: var(--weight-medium);
+  font-variant-numeric: tabular-nums;
+  color: var(--sidebar-fg);
+  pointer-events: none;
+  user-select: none;
+}
+
+.sidebar__menu-action {
+  position: absolute;
+  right: var(--space-1);
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  border: none;
+  border-radius: calc(var(--radius) - 2px);
+  background: transparent;
+  color: var(--foreground-muted);
+  cursor: pointer;
+  transition: background-color var(--duration-fast), color var(--duration-fast), opacity var(--duration-fast);
+}
+.sidebar__menu-action > svg {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+}
+.sidebar__menu-action:hover {
+  background: var(--sidebar-accent);
+  color: var(--sidebar-accent-fg);
+}
+.sidebar__menu-action:focus-visible {
+  outline: var(--border-width-strong) solid var(--ring);
+}
+
+/* showOnHover — 행 hover/포커스 시에만 노출. 부모 menu-item hover/focus-within 셀렉터. */
+.sidebar__menu-action--hover {
+  opacity: 0;
+}
+.sidebar__menu-item:hover .sidebar__menu-action--hover,
+.sidebar__menu-item:focus-within .sidebar__menu-action--hover,
+.sidebar__menu-action--hover:focus-visible,
+.sidebar__menu-action--hover[data-active] {
+  opacity: 1;
+}
+
+/* collapsed=icon 모드에서는 trailing 슬롯 숨김 (라벨도 숨겨지므로) */
+.sidebar[data-state="collapsed"][data-collapsible="icon"] .sidebar__menu-badge,
+.sidebar[data-state="collapsed"][data-collapsible="icon"] .sidebar__menu-action {
+  display: none;
+}
+
 /* ───────────── Sub menu ───────────── */
 .sidebar__menu-sub {
   list-style: none;
@@ -575,6 +651,7 @@
   .sidebar__trigger,
   .sidebar__menu-button,
   .sidebar__menu-sub-button,
+  .sidebar__menu-action,
   .sidebar__panel-close,
   .sidebar__chevron {
     transition: none;