@qijenchen/design-system 0.1.0-beta.3 → 0.1.0-beta.32

package/dist/components/Sidebar/sidebar.js

@@ -0,0 +1,826 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+import { cva } from "class-variance-authority";
+import { ChevronDown, PanelLeft } from "lucide-react";
+import { useIsNarrowViewport } from "../../hooks/use-is-narrow-viewport.js";
+import { cn } from "../../lib/utils.js";
+import { Badge } from "../Badge/badge.js";
+import { Button } from "../Button/button.js";
+import { Input } from "../Input/input.js";
+import { ScrollArea } from "../ScrollArea/scroll-area.js";
+import { Separator } from "../Separator/separator.js";
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription } from "../Sheet/sheet.js";
+import { Skeleton } from "../Skeleton/skeleton.js";
+import { ChromeHeader } from "../../patterns/header-canonical/chrome-header.js";
+import { Tooltip, TooltipTrigger, TooltipContent } from "../Tooltip/tooltip.js";
+import { ItemInlineActionButton, ICON_SIZE, ItemInlineAction, getUniformPrefixSlotStyle, AVATAR_SIZE, RowSizeProvider, ROW_PADDING_BY_SIZE, ItemIcon, ItemLabel } from "../../patterns/element-anatomy/item-anatomy.js";
+const SIDEBAR_COOKIE_NAME = "sidebar_state";
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+const SidebarContext = React.createContext(null);
+function useSidebar() {
+  const context = React.useContext(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.");
+  }
+  return context;
+}
+const SidebarProvider = React.forwardRef(
+  // code-quality-allow: long-function — SidebarProvider 整合 dual-state(open + activeId)+ mobile sync + keyboard handler + context memo + style binding。拆 sub-fn 會打斷 React state binding chain + Context provider 順序語意(M21 prop variant test:拆分降低可讀性,單 fn 內 state lifecycle 一目了然)。當前 97 < cap 200。
+  ({
+    defaultOpen = true,
+    open: openProp,
+    onOpenChange: setOpenProp,
+    size = "md",
+    activeId: activeIdProp,
+    defaultActiveId,
+    onActiveChange,
+    uniformPrefix = false,
+    className,
+    style,
+    children,
+    ...props
+  }, ref) => {
+    const [_activeId, _setActiveId] = React.useState(defaultActiveId);
+    const activeId = activeIdProp ?? _activeId;
+    const setActiveId = React.useCallback(
+      (id) => {
+        if (activeIdProp === void 0) _setActiveId(id);
+        onActiveChange == null ? void 0 : onActiveChange(id);
+      },
+      [activeIdProp, onActiveChange]
+    );
+    const isMobile = useIsNarrowViewport();
+    const [openMobile, setOpenMobile] = React.useState(false);
+    const [_open, _setOpen] = React.useState(defaultOpen);
+    const open = openProp ?? _open;
+    const setOpen = React.useCallback(
+      (value) => {
+        const openState = typeof value === "function" ? value(open) : value;
+        if (setOpenProp) {
+          setOpenProp(openState);
+        } else {
+          _setOpen(openState);
+        }
+        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+      },
+      [setOpenProp, open]
+    );
+    const toggleSidebar = React.useCallback(() => {
+      return isMobile ? setOpenMobile((o) => !o) : setOpen((o) => !o);
+    }, [isMobile, setOpen, setOpenMobile]);
+    React.useEffect(() => {
+      const handleKeyDown = (event) => {
+        if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+          event.preventDefault();
+          toggleSidebar();
+        }
+      };
+      window.addEventListener("keydown", handleKeyDown);
+      return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [toggleSidebar]);
+    const state = open ? "expanded" : "collapsed";
+    const contextValue = React.useMemo(
+      () => ({
+        state,
+        open,
+        setOpen,
+        isMobile,
+        openMobile,
+        setOpenMobile,
+        toggleSidebar,
+        size,
+        activeId,
+        setActiveId
+      }),
+      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar, size, activeId, setActiveId]
+    );
+    const slotStyle = getUniformPrefixSlotStyle(size);
+    const slotValue = slotStyle["--item-prefix-slot"];
+    const wrapperStyle = React.useMemo(
+      () => ({
+        "--item-icon-size": `${ICON_SIZE[size]}px`,
+        "--item-avatar-size": `${AVATAR_SIZE.inline[size]}px`,
+        ...uniformPrefix ? { "--mixed-prefix-slot": slotValue } : {},
+        ...style
+      }),
+      [size, uniformPrefix, slotValue, style]
+    );
+    return /* @__PURE__ */ jsx(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(RowSizeProvider, { value: size, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: wrapperStyle,
+        className: cn(
+          "group/sidebar-wrapper flex min-h-svh w-full",
+          // CSS :has() 偵測 — 只在 uniformPrefix=true(預設)時掛
+          // mixing detected → 同時把 --item-icon-size cascade 到 slot 寬(`!` important 蓋
+          // 過 wrapperStyle inline,讓 collapsed pl 公式知道「ItemPrefix wrapper 被撐到
+          // 24,effective prefix width = 24 非 16」)。
+          uniformPrefix && "has-[[data-prefix-type=icon]]:has-[[data-prefix-type=avatar]]:[--item-prefix-slot:var(--mixed-prefix-slot)] has-[[data-prefix-type=icon]]:has-[[data-prefix-type=avatar]]:![--item-icon-size:var(--mixed-prefix-slot)]",
+          className
+        ),
+        ref,
+        ...props,
+        children
+      }
+    ) }) });
+  }
+);
+SidebarProvider.displayName = "SidebarProvider";
+const Sidebar = React.forwardRef(
+  ({
+    side = "left",
+    collapsible = "offcanvas",
+    viewportInsetTop,
+    className,
+    children,
+    ...props
+  }, ref) => {
+    const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+    const insetStyle = viewportInsetTop ? { top: viewportInsetTop, height: `calc(100svh - ${viewportInsetTop})` } : void 0;
+    if (collapsible === "none") {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "flex h-full w-[var(--sidebar-width)] flex-col bg-surface text-foreground",
+            className
+          ),
+          ref,
+          ...props,
+          children
+        }
+      );
+    }
+    if (isMobile) {
+      return /* @__PURE__ */ jsx(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ jsxs(
+        SheetContent,
+        {
+          "data-sidebar": "sidebar",
+          "data-mobile": "true",
+          className: "w-[var(--sidebar-width)] bg-surface p-0 text-foreground [&>button]:hidden",
+          style: {
+            "--sidebar-width": "var(--sidebar-width-mobile)"
+          },
+          side,
+          children: [
+            /* @__PURE__ */ jsxs(SheetHeader, { className: "sr-only", children: [
+              /* @__PURE__ */ jsx(SheetTitle, { children: "Sidebar" }),
+              /* @__PURE__ */ jsx(SheetDescription, { children: "Displays the mobile sidebar." })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "flex h-full w-full flex-col", children })
+          ]
+        }
+      ) });
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: "group peer hidden shrink-0 text-foreground md:block",
+        "data-state": state,
+        "data-collapsible": state === "collapsed" ? collapsible : "",
+        "data-side": side,
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "relative w-[var(--sidebar-width)] min-w-[var(--sidebar-width-min)] bg-transparent transition-[width,min-width] duration-200 ease-linear motion-reduce:duration-0",
+                "group-data-[collapsible=offcanvas]:!w-0 group-data-[collapsible=offcanvas]:!min-w-0",
+                "group-data-[side=right]:rotate-180",
+                "group-data-[collapsible=icon]:!w-[var(--sidebar-width-icon)] group-data-[collapsible=icon]:!min-w-0"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: insetStyle,
+              className: cn(
+                // 2026-05-20 v3:`inset-y-0 h-svh` → 可被 viewportInsetTop prop override(per AppShell primary-header)
+                !viewportInsetTop && "inset-y-0 h-svh",
+                // 2026-05-21 v9 fix(per user 「右側分隔線跑去哪 + sidebar 寬度沒正確變化」):
+                // 補 `overflow-x-hidden` — C* refactor 主機制(outer narrows to sidebar-width-icon
+                // 時 clip inner 272px overflow,visual right border 顯示,主內容不被遮)。原 C*
+                // commit 漏加 className 只 comment 提及。
+                "overflow-x-hidden",
+                "fixed z-10 hidden w-[var(--sidebar-width)] min-w-[var(--sidebar-width-min)] transition-[left,right,width,min-width] duration-200 ease-linear motion-reduce:duration-0 md:flex",
+                "group-data-[collapsible=icon]:!min-w-0",
+                side === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+                "group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)]",
+                "group-data-[side=left]:border-r group-data-[side=left]:border-divider",
+                "group-data-[side=right]:border-l group-data-[side=right]:border-divider",
+                className
+              ),
+              ...props,
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "data-sidebar": "sidebar",
+                  style: { width: "var(--sidebar-width)", minWidth: "var(--sidebar-width)" },
+                  className: "flex h-full shrink-0 flex-col bg-surface",
+                  children
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Sidebar.displayName = "Sidebar";
+const SidebarTrigger = React.forwardRef(({ className, onClick, ...props }, ref) => {
+  const { toggleSidebar } = useSidebar();
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ref,
+      "data-sidebar": "trigger",
+      variant: "text",
+      size: "sm",
+      iconOnly: true,
+      startIcon: PanelLeft,
+      "aria-label": "Toggle Sidebar",
+      className,
+      onClick: (event) => {
+        onClick == null ? void 0 : onClick(event);
+        toggleSidebar();
+      },
+      ...props
+    }
+  );
+});
+SidebarTrigger.displayName = "SidebarTrigger";
+const SidebarInput = React.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      ref,
+      "data-sidebar": "input",
+      className: cn("w-full", className),
+      ...props
+    }
+  );
+});
+SidebarInput.displayName = "SidebarInput";
+const SidebarHeader = React.forwardRef(({ className, withTabs, tabsSlot, ...props }, ref) => {
+  return (
+    // 2026-05-21 v9 — restore main behavior(per user「不應該調整原本的樣式,只有說收起來的時候
+    // 要調整 header logo 的位置使其與其下 icon 水平置中」):
+    //   - Expanded mode:ChromeHeader default `px-loose`(16px L+R),avatar 跟 menu icon 對齊
+    //   - Collapsed mode:`!px-0 !justify-center` 拿掉 padding + 內容置中,WorkspaceBrand text
+    //     已 `group-data-[collapsible=icon]:hidden`,collapsed 只剩 avatar 24px,centered in 48px
+    //     square → avatar.center = 24 = menu icon center.x ✓
+    // 完全 match main 行為(v7 leadingRail / v8 -ml-1 surgical 全撤回)。
+    /* @__PURE__ */ jsx(
+      ChromeHeader,
+      {
+        ref,
+        withTabs,
+        tabsSlot,
+        "data-sidebar": "header",
+        className: cn(
+          // 2026-05-21 v14 — rail-derived collapsed padding,full SSOT cascade(per user directive
+          // 「avatar尺寸、menu item padding、menu icon尺寸任一變動都要正確連動」+ codex Layer B
+          // 比稿共識):
+          //
+          // 公式 derivation(rail-centered geometric identity):
+          //   avatar.cx = pl + avatar/2 = (sidebar-width-icon - avatar)/2 + avatar/2 = sidebar-width-icon/2
+          //   menu icon.cx = loose + icon-size/2
+          //   sidebar-width-icon = 2*loose + icon-size  →  sidebar-width-icon/2 = loose + icon-size/2 ✓
+          //
+          // → 任何 avatar / loose / icon-size 改值,公式自動對齊 menu icon 中心(rail 幾何恆等)。
+          //
+          // SSOT 連動鏈:
+          //   --layout-space-loose (density token) ─┐
+          //   --sidebar-menu-icon-size              ├→ --sidebar-width-icon (calc cascade)
+          //                                          └→ 公式自動跟 ✓
+          //   --chrome-header-avatar-size (header-canonical.css local token):公式 var 引用,
+          //                                JS 端透過 WorkspaceBrand RowSizeProvider value="md"
+          //                                + AVATAR_SIZE.inline.md spec-coupled 共識 sync。
+          //
+          // Numerical equivalence to v13 `loose-4` 公式(verified):
+          //   md density: (48-24)/2 = 12 = loose-4 = 12 ✓ identical
+          //   lg density: (64-24)/2 = 20 = loose-4 = 20 ✓ identical
+          // → v14 upgrade 純 SSOT chain robustness,0 視覺改變。
+          "group-data-[collapsible=icon]:!pl-[calc((var(--sidebar-width-icon)-var(--chrome-header-avatar-size))/2)]",
+          "group-data-[collapsible=icon]:!pr-0",
+          "transition-[padding] duration-200 ease-linear motion-reduce:duration-0",
+          className
+        ),
+        ...props
+      }
+    )
+  );
+});
+SidebarHeader.displayName = "SidebarHeader";
+const SidebarFooter = React.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-sidebar": "footer",
+      className: cn(
+        "flex shrink-0 flex-col py-2 border-t border-divider",
+        className
+      ),
+      ...props
+    }
+  );
+});
+SidebarFooter.displayName = "SidebarFooter";
+const SidebarSeparator = React.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    Separator,
+    {
+      ref,
+      "data-sidebar": "separator",
+      className: cn(
+        "mx-[var(--layout-space-loose)] w-auto bg-divider",
+        className
+      ),
+      ...props
+    }
+  );
+});
+SidebarSeparator.displayName = "SidebarSeparator";
+const SidebarContent = React.forwardRef(({ className, children, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-sidebar": "content",
+      className: cn(
+        "flex min-h-0 flex-1 flex-col",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col", children }) })
+    }
+  );
+});
+SidebarContent.displayName = "SidebarContent";
+const SidebarGroupContext = React.createContext(null);
+function useSidebarGroup() {
+  return React.useContext(SidebarGroupContext);
+}
+const SidebarGroup = React.forwardRef(({ className, collapsible = false, defaultOpen = true, open, onOpenChange, children, ...props }, ref) => {
+  const contextValue = React.useMemo(
+    () => ({ collapsible }),
+    [collapsible]
+  );
+  const baseClass = cn(
+    "relative flex w-full min-w-0 flex-col py-2",
+    "[&+&]:before:absolute [&+&]:before:top-0 [&+&]:before:left-[var(--layout-space-loose)] [&+&]:before:right-[var(--layout-space-loose)] [&+&]:before:h-px [&+&]:before:bg-divider [&+&]:before:content-['']",
+    className
+  );
+  if (!collapsible) {
+    return /* @__PURE__ */ jsx(SidebarGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { ref, "data-sidebar": "group", className: baseClass, ...props, children }) });
+  }
+  return /* @__PURE__ */ jsx(SidebarGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    CollapsiblePrimitive.Root,
+    {
+      ref,
+      "data-sidebar": "group",
+      defaultOpen,
+      open,
+      onOpenChange,
+      className: baseClass,
+      ...props,
+      children
+    }
+  ) });
+});
+SidebarGroup.displayName = "SidebarGroup";
+const SidebarGroupContent = React.forwardRef(({ className, ...props }, ref) => {
+  const group = useSidebarGroup();
+  if (group == null ? void 0 : group.collapsible) {
+    return /* @__PURE__ */ jsx(
+      CollapsiblePrimitive.Content,
+      {
+        "data-sidebar": "group-content",
+        className: cn("w-full overflow-hidden", className),
+        ...props,
+        children: /* @__PURE__ */ jsx("div", { ref, children: props.children })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-sidebar": "group-content",
+      className: cn("w-full", className),
+      ...props
+    }
+  );
+});
+SidebarGroupContent.displayName = "SidebarGroupContent";
+const sidebarGroupLabelVariants = cva(
+  [
+    // items-start 對齊 item-layout 規則(跟 SidebarMenuButton / TreeItem / MenuItem 一致)
+    "flex w-full items-start gap-2",
+    "px-[var(--layout-space-loose)]",
+    "font-medium text-fg-muted",
+    "cursor-default select-none pointer-events-none outline-none",
+    // icon 模式:display:none 硬隱藏(跟 SidebarMenuButton label span 一致的策略)
+    "group-data-[collapsible=icon]:hidden"
+  ],
+  {
+    variants: {
+      // 消費 ROW_PADDING_BY_SIZE SSOT(跟 SidebarMenuButton / MenuItem / TreeItem 一致)
+      size: ROW_PADDING_BY_SIZE
+    },
+    defaultVariants: { size: "md" }
+  }
+);
+const SidebarGroupLabel = React.forwardRef(({ className, asChild = false, size: sizeProp, children, toggleAriaLabel = "展開或收合", ...props }, ref) => {
+  const { size: contextSize } = useSidebar();
+  const size = sizeProp ?? contextSize;
+  const group = useSidebarGroup();
+  if (group == null ? void 0 : group.collapsible) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        "data-sidebar": "group-label",
+        role: "presentation",
+        className: cn(
+          sidebarGroupLabelVariants({ size }),
+          // Single-line group header:改用 items-center 讓 chevron button(16×16)跟 text 垂直精確置中。
+          // cva base 的 `items-start` 是 multi-line safety,單行 header 用不到,明確覆寫成 center。
+          "!items-center",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children }),
+          /* @__PURE__ */ jsx(CollapsiblePrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            ItemInlineActionButton,
+            {
+              icon: ChevronDown,
+              "aria-label": toggleAriaLabel,
+              className: "pointer-events-auto ml-auto",
+              iconClassName: "transition-transform duration-150 motion-reduce:duration-0 [[data-state=open]_&]:rotate-180"
+            }
+          ) })
+        ]
+      }
+    );
+  }
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ref,
+      "data-sidebar": "group-label",
+      role: "presentation",
+      className: cn(sidebarGroupLabelVariants({ size }), className),
+      ...props,
+      children
+    }
+  );
+});
+SidebarGroupLabel.displayName = "SidebarGroupLabel";
+const SidebarGroupAction = React.forwardRef(({ className, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ref,
+      "data-sidebar": "group-action",
+      className: cn(
+        "absolute right-[var(--layout-space-loose)] top-2 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-fg-muted outline-none ring-ring transition-colors hover:bg-neutral-hover hover:text-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "after:absolute after:-inset-2 after:md:hidden",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      ),
+      ...props
+    }
+  );
+});
+SidebarGroupAction.displayName = "SidebarGroupAction";
+const SidebarMenu = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "ul",
+  {
+    ref,
+    "data-sidebar": "menu",
+    className: cn("flex w-full min-w-0 flex-col", className),
+    ...props
+  }
+));
+SidebarMenu.displayName = "SidebarMenu";
+const SidebarMenuItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "li",
+  {
+    ref,
+    "data-sidebar": "menu-item",
+    className: cn("group/menu-item relative", className),
+    ...props
+  }
+));
+SidebarMenuItem.displayName = "SidebarMenuItem";
+const sidebarMenuButtonVariants = cva(
+  [
+    "peer/menu-button group/menu-button",
+    // items-start(跟 TreeItem / MenuItem 一致的 item-layout 規則):
+    // 多行 label 時 prefix 留在第一行不飄移。
+    // 單行 label 時(我們的預設情境,truncate = line-clamp-1),效果跟 items-center 完全相同,
+    // 因為 prefix 被包在 `h-[1lh] flex items-center` 容器,強制對齊第一行文字中線。
+    "flex w-full items-start gap-2 text-left overflow-hidden",
+    "px-[var(--layout-space-loose)]",
+    "font-medium text-fg-secondary",
+    "cursor-pointer select-none outline-none",
+    // 2026-05-21 v4 C* refactor(per codex M31 Layer C 比稿 final architecture):
+    //   撤回所有 `group-data-[collapsible=icon]:*` overrides。Sidebar outer overflow-x:hidden
+    //   自動 clip menu button 右側 label / badge / action,左側 icon 自然顯示在 sidebar-width-icon
+    //   range 內。Row geometry 永遠 stable(px-loose + items-start + gap-2 + height auto),
+    //   無 discrete property switch → 無 fly / 無 flutter / 無 jitter。
+    //
+    //   Label/badge/action 自然存在 DOM(a11y screen reader 仍讀到),只是 outer clip 視覺消失。
+    //   Tooltip 仍在 collapsed state 顯示(per L1043-1055 既有 hidden 條件)。
+    //
+    //   對齊 MUI MiniDrawer + shadcn canonical(width morph + overflow clip + row geometry 不變)。
+    "transition-[background-color,color] duration-200 ease-linear motion-reduce:duration-0",
+    "hover:bg-neutral-hover hover:text-foreground",
+    "focus-visible:bg-neutral-hover focus-visible:text-foreground",
+    "disabled:pointer-events-none disabled:opacity-disabled",
+    "aria-disabled:pointer-events-none aria-disabled:opacity-disabled",
+    "data-[active=true]:bg-neutral-selected data-[active=true]:text-foreground",
+    "group-has-[[data-sidebar=menu-action]]/menu-item:pr-8",
+    // 2026-05-21 v5 restore label display:none(user 抓「label 沒消失」):
+    // C* outer overflow-x:hidden 理論 clip,但 label.x=40 在 sidebar-width-icon=48 內 → 首字
+    // 部分可見。display:none 是 instant 切換非 main animation,跟 C* 「不用 display:none 做主
+    // 動畫」不衝突(label 不參與 width 動畫,純 final state)。對齊 shadcn canonical。
+    "group-data-[collapsible=icon]:[&_[data-sidebar=menu-label]]:hidden",
+    // 2026-05-22 Approach 9 — 收合時所有 prefix center 鎖回 rail center
+    // (--sidebar-width-icon/2 = GlobalHeader toggle geometry SSOT)。
+    // 公式: pl = (rail - prefix-width) / 2,prefix-width 由 SidebarProvider 注入的
+    // --item-icon-size / --item-avatar-size CSS var(JS const mirror)提供。
+    // 任何 row size(sm/md/lg)× density(md/lg)× prefix type(icon/avatar)6 cell 全對齊。
+    "group-data-[collapsible=icon]:has-[[data-prefix-type=icon]]:!pl-[calc((var(--sidebar-width-icon)-var(--item-icon-size))/2)]",
+    "group-data-[collapsible=icon]:has-[[data-prefix-type=avatar]]:!pl-[calc((var(--sidebar-width-icon)-var(--item-avatar-size))/2)]"
+  ],
+  {
+    variants: {
+      // size:消費 ROW_PADDING_BY_SIZE SSOT(item-anatomy.tsx)+ Sidebar-specific collapsed height
+      // 前為 3 cva(menu / sidebar / tree)重複同一 py 公式,drift risk 已知。
+      // 改用 shared SSOT 後 formula 改一處全同步。
+      size: {
+        // 2026-05-21 v4 C*:撤回 `group-data-[collapsible=icon]:!h-[...]` height lock
+        // (per codex Layer C — row height 永遠 stable,collapsed 只 outer clip 視覺)
+        sm: ROW_PADDING_BY_SIZE.sm,
+        md: ROW_PADDING_BY_SIZE.md,
+        lg: ROW_PADDING_BY_SIZE.lg
+      },
+      variant: {
+        /** 預設 — 導覽 item,參與 single-selection */
+        default: "",
+        /**
+         * Meta 命令 row(例:「查看更多」「載入更多」「Show all」「+ 新增專案」)。
+         *
+         * 語意上**不是導覽目的地**,是 section 底部的命令。規格:
+         * - 文字從 `text-fg-secondary` 退到 `text-fg-muted`(視覺重量下沉,hover 才升到 foreground)
+         * - **不該參與 single-selection**:不傳 `id`,TS 階段提醒;執行階段傳了也不會 active
+         * - `font-medium` 降為 `font-normal`(更輕,signal「這不是 primary 導覽」)
+         * - 世界級對照:Linear "Show N more"、Notion "Show N more"、Slack "Show more"、
+         *   Gmail Labels "More"
+         */
+        meta: [
+          "font-normal text-fg-muted",
+          // meta variant 不該有 active 態;即使誤傳 isActive 也不啟動
+          "data-[active=true]:bg-transparent data-[active=true]:text-fg-muted"
+        ]
+      }
+    },
+    defaultVariants: { size: "md", variant: "default" }
+  }
+);
+const SidebarMenuButton = React.forwardRef(
+  ({
+    asChild = false,
+    id,
+    isActive: isActiveProp,
+    size: sizeProp,
+    variant = "default",
+    startIcon: StartIcon,
+    tooltip,
+    inlineActions,
+    inlineActionsSlot,
+    actionsReveal = false,
+    className,
+    children,
+    onClick,
+    ...props
+  }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    const { isMobile, state, size: contextSize, activeId, setActiveId } = useSidebar();
+    const size = sizeProp ?? contextSize;
+    const isMeta = variant === "meta";
+    const isActive = isMeta ? false : isActiveProp ?? (id !== void 0 && activeId === id);
+    const handleClick = React.useCallback(
+      (e) => {
+        if (!isMeta && id !== void 0) setActiveId(id);
+        onClick == null ? void 0 : onClick(e);
+      },
+      [isMeta, id, setActiveId, onClick]
+    );
+    const content = asChild ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+      StartIcon && /* @__PURE__ */ jsx(ItemIcon, { icon: StartIcon }),
+      /* @__PURE__ */ jsx(ItemLabel, { children })
+    ] });
+    const hasSlot = !!inlineActionsSlot;
+    const hasActions = hasSlot || !!inlineActions && inlineActions.length > 0;
+    const iconSz = ICON_SIZE[size ?? "md"];
+    const n = hasSlot ? 1 : (inlineActions == null ? void 0 : inlineActions.length) ?? 0;
+    const suffixContentWidth = n > 0 ? n * iconSz + (n - 1) * 8 : 0;
+    const buttonPaddingRight = hasActions ? `calc(var(--layout-space-loose) + ${suffixContentWidth}px + 0.5rem)` : void 0;
+    const button = /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref,
+        "data-sidebar": "menu-button",
+        "data-active": isActive,
+        className: cn(sidebarMenuButtonVariants({ size, variant }), className),
+        style: hasActions ? { paddingRight: buttonPaddingRight } : void 0,
+        onClick: handleClick,
+        ...props,
+        children: content
+      }
+    );
+    const suffixNode = hasActions ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        "data-sidebar": "menu-inline-actions",
+        className: cn(
+          "absolute top-1/2 -translate-y-1/2 flex items-center gap-2",
+          "right-[var(--layout-space-loose)]",
+          // Icon 模式隱藏(跟 SidebarMenuBadge / SidebarMenuAction 一致)
+          "group-data-[collapsible=icon]:hidden",
+          // hover-reveal:滑鼠 hover 或鍵盤 focus(但不是 mouse click 的 focus)時顯示。
+          // 用 `:has(:focus-visible)` 而非 `:focus-within`——focus-within 會被
+          // mouse click 觸發,導致 click 之後 actions 永久顯示直到焦點移走;
+          // focus-visible 只在鍵盤 tab 時啟動,mouse click 不會觸發,符合使用者直覺。
+          actionsReveal === "hover" && "opacity-0 group-hover/menu-item:opacity-100 group-has-[:focus-visible]/menu-item:opacity-100 transition-opacity duration-150"
+        ),
+        children: hasSlot ? inlineActionsSlot : inlineActions.map((action, i) => /* @__PURE__ */ jsx(ItemInlineAction, { action }, action.label + i))
+      }
+    ) : null;
+    const buttonWithTooltip = tooltip ? (() => {
+      const tooltipProps = typeof tooltip === "string" ? { children: tooltip } : tooltip;
+      return /* @__PURE__ */ jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: button }),
+        /* @__PURE__ */ jsx(
+          TooltipContent,
+          {
+            side: "right",
+            align: "center",
+            hidden: state !== "collapsed" || isMobile,
+            ...tooltipProps
+          }
+        )
+      ] });
+    })() : button;
+    if (!suffixNode) return buttonWithTooltip;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      buttonWithTooltip,
+      suffixNode
+    ] });
+  }
+);
+SidebarMenuButton.displayName = "SidebarMenuButton";
+const SidebarMenuAction = React.forwardRef(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ref,
+      "data-sidebar": "menu-action",
+      className: cn(
+        "absolute right-[var(--layout-space-loose)] top-1/2 -translate-y-1/2 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-fg-muted outline-none ring-ring transition-colors hover:bg-neutral-hover hover:text-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "after:absolute after:-inset-2 after:md:hidden",
+        "group-data-[collapsible=icon]:hidden",
+        showOnHover && "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-foreground md:opacity-0",
+        className
+      ),
+      ...props
+    }
+  );
+});
+SidebarMenuAction.displayName = "SidebarMenuAction";
+const SidebarMenuBadge = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Badge,
+  {
+    ref,
+    "data-sidebar": "menu-badge",
+    className: cn(
+      "pointer-events-none absolute right-[var(--layout-space-loose)] top-1/2 -translate-y-1/2",
+      "group-data-[collapsible=icon]:hidden",
+      className
+    ),
+    ...props
+  }
+));
+SidebarMenuBadge.displayName = "SidebarMenuBadge";
+const sidebarMenuSkeletonVariants = cva(
+  [
+    "flex items-start gap-2",
+    "px-[var(--layout-space-loose)]"
+  ],
+  {
+    variants: {
+      // 消費 ROW_PADDING_BY_SIZE SSOT + skeleton-icon size modifier(Sidebar-specific)
+      // 注:skeleton 無文字,typography class 雖被帶入但無害,保持公式一處同步
+      size: {
+        sm: [ROW_PADDING_BY_SIZE.sm, "[&>[data-sidebar=menu-skeleton-icon]]:size-4"],
+        md: [ROW_PADDING_BY_SIZE.md, "[&>[data-sidebar=menu-skeleton-icon]]:size-4"],
+        lg: [ROW_PADDING_BY_SIZE.lg, "[&>[data-sidebar=menu-skeleton-icon]]:size-5"]
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+);
+const SidebarMenuSkeleton = React.forwardRef(({ className, showIcon = false, size: sizeProp, ...props }, ref) => {
+  const { size: contextSize } = useSidebar();
+  const size = sizeProp ?? contextSize;
+  const width = React.useMemo(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`;
+  }, []);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      "data-sidebar": "menu-skeleton",
+      className: cn(sidebarMenuSkeletonVariants({ size }), className),
+      ...props,
+      children: [
+        showIcon && /* @__PURE__ */ jsx(
+          Skeleton,
+          {
+            className: "rounded-md shrink-0",
+            "data-sidebar": "menu-skeleton-icon"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Skeleton,
+          {
+            className: "h-4 max-w-[var(--skeleton-width)] flex-1",
+            "data-sidebar": "menu-skeleton-text",
+            style: {
+              "--skeleton-width": width
+            }
+          }
+        )
+      ]
+    }
+  );
+});
+SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
+const sidebarMeta = {
+  component: "Sidebar",
+  family: null,
+  // non-family composite / overlay / layout
+  variants: {
+    default: { when: "標準導覽 row,參與 single-selection" },
+    meta: { when: "Section 底部命令 row(Show more / 新增),不參與 selection" }
+  },
+  sizes: {
+    sm: { px: 28, when: "次導覽 / 設定頁 / 緊湊空間" },
+    md: { px: 32, when: "預設 — 應用程式主導覽" },
+    lg: { px: 36, when: "重要主導覽 / icon-prominent workspace switcher" }
+  },
+  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  tokens: {
+    bg: ["bg-neutral-hover", "bg-surface", "bg-transparent"],
+    fg: ["text-fg-muted", "text-fg-secondary", "text-foreground"],
+    ring: ["ring-ring"]
+  },
+  defaultSize: "md"
+};
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarProvider,
+  SidebarSeparator,
+  SidebarTrigger,
+  sidebarMeta,
+  useSidebar
+};
+//# sourceMappingURL=sidebar.js.map