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(opt-in,預設 false;見 sidebar.spec.md「Sidebar 全域 prefix 對齊」)時掛
          // 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",
    // 2026-05-31 M24:SidebarMenuButton 主要為 icon+label(currentColor 可改寫)→ 用 semantic
    // text-fg-disabled 對齊 MenuItem primitive(menu-item.tsx:198/221/248 + item-anatomy.tsx:374),
    // 非 opacity-disabled(opacity 保留給圖片/avatar/Switch 等無法改寫內部色者,per color.spec.md:103/118/701)。
    "disabled:pointer-events-none disabled:text-fg-disabled",
    "aria-disabled:pointer-events-none aria-disabled:text-fg-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 isDisabled = !!props.disabled || props["aria-disabled"] === true || props["aria-disabled"] === "true";
    const hasActions = !isDisabled && (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
