banhaten 0.5.0 → 0.6.0

package/registry/components/sidebar.tsx

@@ -1,1433 +1,1535 @@
-"use client"
-
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import {
-  Building2Icon,
-  ChevronDownIcon,
-  ChevronRightIcon,
-  ChevronsUpDownIcon,
-  FolderIcon,
-  MoreHorizontalIcon,
-  PanelLeftIcon,
-  SearchIcon,
-  SparklesIcon,
-  UserIcon,
-} from "lucide-react"
-
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip"
-import { cn } from "@/lib/utils"
-
-type SidebarContextValue = {
-  collapsed: boolean
-  dir?: "ltr" | "rtl"
-  setCollapsed: (collapsed: boolean) => void
-  toggle: () => void
-}
-
-type SidebarProviderProps = React.ComponentProps<"div"> & {
-  collapsed?: boolean
-  defaultCollapsed?: boolean
-  dir?: "ltr" | "rtl"
-  onCollapsedChange?: (collapsed: boolean) => void
-}
-type SidebarProps = React.ComponentProps<"aside"> & {
-  side?: "start" | "end"
-}
-type SidebarSectionProps = React.ComponentProps<"div">
-type SidebarHeaderActionProps = React.ComponentProps<"button"> & {
-  label?: string
-}
-type SidebarHeaderBrandProps = React.ComponentProps<"div"> & {
-  brand?: React.ReactNode
-  collapseAction?: React.ReactNode | false
-  logo?: React.ReactNode
-  onSearchClick?: React.MouseEventHandler<HTMLButtonElement>
-  searchAction?: React.ReactNode | false
-  searchLabel?: string
-}
-type SidebarWorkspaceVariant = "actions" | "card"
-type SidebarHeaderWorkspaceSwitchProps = React.ComponentProps<"div"> & {
-  collapseAction?: React.ReactNode | false
-  image?: React.ReactNode
-  label?: React.ReactNode
-  onSearchClick?: React.MouseEventHandler<HTMLButtonElement>
-  onWorkspaceClick?: React.MouseEventHandler<HTMLButtonElement>
-  searchAction?: React.ReactNode | false
-  searchLabel?: string
-  supportText?: React.ReactNode
-  variant?: SidebarWorkspaceVariant
-  workspaceLabel?: string
-}
-type SidebarFooterUserProps = React.ComponentProps<"button"> & {
-  avatar?: React.ReactNode
-  name?: React.ReactNode
-  showIdentityPreview?: boolean
-  supportText?: React.ReactNode
-  trailingIcon?: React.ReactNode
-  variant?: "default" | "supporting-text"
-}
-type SidebarGroupLabelProps = React.ComponentProps<"div"> & {
-  actions?: React.ReactNode
-  expandIcon?: React.ReactNode
-  expandable?: boolean
-}
-type SidebarGroupActionProps = React.ComponentProps<"button"> & {
-  label?: string
-}
-type SidebarMenuProps = React.ComponentProps<"ul">
-type SidebarMenuItemProps = React.ComponentProps<"li">
-type SidebarInteractionState = "default" | "hover" | "active" | "focus"
-type SidebarMenuButtonVariant =
-  | "default"
-  | "avatar"
-  | "level2"
-  | "level2-line"
-type SidebarMenuButtonProps = React.ComponentProps<"button"> & {
-  active?: boolean
-  asChild?: boolean
-  badge?: React.ReactNode
-  icon?: React.ReactNode
-  state?: SidebarInteractionState
-  supportText?: React.ReactNode
-  tooltip?: React.ReactNode
-  trailingIcon?: React.ReactNode
-  variant?: SidebarMenuButtonVariant
-}
-type SidebarMenuBadgeProps = React.ComponentProps<"span">
-type SidebarMenuSubProps = React.ComponentProps<"ul">
-type SidebarMenuSubButtonProps = Omit<SidebarMenuButtonProps, "variant"> & {
-  showLine?: boolean
-}
-type SidebarMenuTreeItemProps = React.ComponentProps<"button"> & {
-  active?: boolean
-  asChild?: boolean
-  expanded?: boolean
-  icon?: React.ReactNode
-  level?: 1 | 2 | 3 | 4
-  showChevron?: boolean
-  state?: SidebarInteractionState
-}
-type SidebarTreeGroupProps = SidebarSectionProps & {
-  actions?: React.ReactNode
-  expandable?: boolean
-  expandIcon?: React.ReactNode
-  label?: React.ReactNode
-}
-type SidebarToggleProps = React.ComponentProps<"button">
-type SidebarTriggerProps = SidebarToggleProps
-type SidebarRailProps = React.ComponentProps<"button">
-type SidebarInsetProps = React.ComponentProps<"div"> & {
-  asChild?: boolean
-}
-
-const SidebarContext = React.createContext<SidebarContextValue | null>(null)
-
-/** Owns the controlled or uncontrolled collapsed state for a sidebar composition. */
-function SidebarProvider({
-  children,
-  className,
-  collapsed,
-  defaultCollapsed = false,
-  dir,
-  onCollapsedChange,
-  ...props
-}: SidebarProviderProps) {
-  const [uncontrolledCollapsed, setUncontrolledCollapsed] =
-    React.useState(defaultCollapsed)
-  const isControlled = collapsed !== undefined
-  const resolvedCollapsed = collapsed ?? uncontrolledCollapsed
-
-  const setCollapsed = React.useCallback(
-    (nextCollapsed: boolean) => {
-      if (!isControlled) {
-        setUncontrolledCollapsed(nextCollapsed)
-      }
-      onCollapsedChange?.(nextCollapsed)
-    },
-    [isControlled, onCollapsedChange]
-  )
-
-  const context = React.useMemo<SidebarContextValue>(
-    () => ({
-      collapsed: resolvedCollapsed,
-      dir,
-      setCollapsed,
-      toggle: () => setCollapsed(!resolvedCollapsed),
-    }),
-    [dir, resolvedCollapsed, setCollapsed]
-  )
-
-  return (
-    <SidebarContext.Provider value={context}>
-      <TooltipProvider delayDuration={0}>
-        <div
-          data-collapsed={resolvedCollapsed ? "true" : "false"}
-          data-slot="sidebar-provider"
-          dir={dir}
-          className={cn("relative min-w-0", className)}
-          {...props}
-        >
-          {children}
-        </div>
-      </TooltipProvider>
-    </SidebarContext.Provider>
-  )
-}
-
-/** The 280px navigation surface with a 900px minimum height that contracts to the Figma 48px icon rail. */
-const Sidebar = React.forwardRef<HTMLElement, SidebarProps>(function Sidebar(
-  { className, onTransitionEnd, side = "start", ...props },
-  ref
-) {
-  const context = React.useContext(SidebarContext)
-  const collapsed = context?.collapsed ?? false
-  const dir = context?.dir
-  const [overflowVisible, setOverflowVisible] = React.useState(collapsed)
-  const previousCollapsed = React.useRef(collapsed)
-
-  React.useEffect(() => {
-    if (previousCollapsed.current === collapsed) return
-    previousCollapsed.current = collapsed
-
-    if (!collapsed) {
-      setOverflowVisible(false)
-      return
-    }
-
-    const prefersReducedMotion =
-      typeof window !== "undefined" &&
-      typeof window.matchMedia === "function" &&
-      window.matchMedia("(prefers-reduced-motion: reduce)").matches
-
-    setOverflowVisible(prefersReducedMotion)
-  }, [collapsed])
-
-  return (
-    <aside
-      data-collapsed={collapsed ? "true" : "false"}
-      data-overflow-visible={overflowVisible ? "true" : "false"}
-      data-side={side}
-      data-slot="sidebar"
-      dir={dir}
-      ref={ref}
-      className={cn(
-        "group/sidebar flex h-full min-h-[var(--bh-sidebar-min-height)] w-[var(--bh-sidebar-width)] max-w-full shrink-0 flex-col overflow-hidden bg-[var(--bh-sidebar-bg)] text-[var(--bh-content-default)] transition-[width,background-color] duration-[var(--bh-sidebar-motion-duration)] ease-[var(--bh-sidebar-motion-easing)] will-change-[width] motion-reduce:transition-none",
-        "border-e border-[var(--bh-sidebar-border)]",
-        "data-[collapsed=true]:w-[var(--bh-sidebar-width-collapsed)] data-[collapsed=true]:bg-[var(--bh-sidebar-bg-collapsed)]",
-        collapsed && overflowVisible && "overflow-visible",
-        side === "end" && "ms-auto border-e-0 border-s",
-        className
-      )}
-      onTransitionEnd={(event) => {
-        onTransitionEnd?.(event)
-        if (
-          !event.defaultPrevented &&
-          event.currentTarget === event.target &&
-          event.propertyName === "width"
-        ) {
-          setOverflowVisible(collapsed)
-        }
-      }}
-      {...props}
-    />
-  )
-})
-
-/** Header slot with the Figma 10px expanded and 4px/8px collapsed insets. */
-function SidebarHeader({ className, ...props }: SidebarSectionProps) {
-  return (
-    <div
-      data-slot="sidebar-header"
-      className={cn(
-        "flex shrink-0 flex-col items-center gap-[var(--bh-space-lg-10)] overflow-hidden bg-[var(--bh-sidebar-bg)] p-[var(--bh-sidebar-padding)] transition-[padding] duration-[var(--bh-sidebar-motion-duration)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
-        "group-data-[collapsed=true]/sidebar:px-[var(--bh-space-xs-4)] group-data-[collapsed=true]/sidebar:py-[var(--bh-space-md-8)]",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-/** Compact 28px ghost action used by Figma sidebar headers. */
-const SidebarHeaderAction = React.forwardRef<
-  HTMLButtonElement,
-  SidebarHeaderActionProps
->(function SidebarHeaderAction(
-  { "aria-label": ariaLabel, children, className, label, type = "button", ...props },
-  ref
-) {
-  return (
-    <button
-      aria-label={ariaLabel ?? label ?? "Sidebar action"}
-      data-slot="sidebar-header-action"
-      ref={ref}
-      type={type}
-      className={cn(
-        "inline-flex size-[var(--bh-sidebar-header-action-size)] shrink-0 items-center justify-center rounded-[var(--bh-radius-full)] border border-transparent bg-[var(--bh-interactive-ghost-default)] text-[var(--bh-content-default)] outline-none transition-[background-color,border-color,box-shadow,color]",
-        "hover:bg-[var(--bh-interactive-ghost-hover)] focus-visible:border-[var(--bh-border-focus)] focus-visible:shadow-[var(--elevation-button-focus)]",
-        className
-      )}
-      {...props}
-    >
-      <span
-        aria-hidden="true"
-        data-slot="sidebar-header-action-icon"
-        className="inline-flex size-[var(--bh-sidebar-icon-slot-size)] items-center justify-center [&_svg]:size-[var(--bh-sidebar-icon-size)] [&_svg]:shrink-0"
-      >
-        {children}
-      </span>
-    </button>
-  )
-})
-
-/** Brand header with optional search and collapse actions; actions disappear on the icon rail. */
-function SidebarHeaderBrand({
-  brand = "Banhaten",
-  className,
-  collapseAction,
-  logo,
-  onSearchClick,
-  searchAction,
-  searchLabel = "Search",
-  ...props
-}: SidebarHeaderBrandProps) {
-  const { collapsed } = useSidebarContext()
-  const hasCollapseAction = collapseAction !== false
-
-  return (
-    <div
-      data-collapsed={collapsed ? "true" : "false"}
-      data-slot="sidebar-header-brand"
-      className={cn(
-        "relative h-[var(--bh-sidebar-brand-height)] w-full transition-[width,height] duration-[var(--bh-sidebar-motion-duration)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
-        collapsed && hasCollapseAction &&
-          "h-[calc(var(--bh-sidebar-header-action-size)+var(--bh-space-sm-6)+var(--bh-sidebar-header-action-size))] w-[var(--bh-sidebar-compact-control-size)]",
-        collapsed && !hasCollapseAction &&
-          "h-[var(--bh-sidebar-header-action-size)] w-[var(--bh-sidebar-compact-control-size)]",
-        className
-      )}
-      {...props}
-    >
-      <span
-        data-slot="sidebar-brand-content"
-        className={cn(
-          "absolute start-[var(--bh-space-sm-6)] top-[var(--bh-space-xs-4)] flex min-w-0 items-center gap-[var(--bh-space-md-8)] transition-[inset-inline-start,top,gap] duration-[var(--bh-sidebar-motion-duration)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
-          collapsed && "start-[var(--bh-space-xs-4)] top-0 gap-0"
-        )}
-      >
-        <span
-          data-slot="sidebar-brand-logo"
-          className="inline-flex size-[var(--bh-sidebar-header-action-size)] shrink-0 items-center justify-center overflow-hidden rounded-[var(--bh-radius-full)] [&>*]:size-full"
-        >
-          {logo ?? (
-            <span className="inline-flex size-full items-center justify-center bg-[var(--bh-bg-brand-default)] text-[var(--bh-content-on-brand)]">
-              <SparklesIcon
-                aria-hidden="true"
-                className="size-[var(--bh-sidebar-icon-size)]"
-              />
-            </span>
-          )}
-        </span>
-        <span
-          aria-hidden={collapsed || undefined}
-          data-slot="sidebar-brand-name"
-          dir="auto"
-          className={cn(
-            "max-w-[calc(var(--bh-sidebar-width)-var(--bh-space-10xl-80))] truncate opacity-[var(--bh-opacity-100)] transition-[max-width,opacity] [transition-duration:0ms,var(--bh-sidebar-motion-duration-content)] [transition-delay:0ms,var(--bh-sidebar-motion-delay-content)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
-            "text-[length:var(--bh-text-body-xl-semibold-font-size)] font-[var(--bh-text-body-xl-semibold-font-weight)] leading-[var(--bh-text-body-xl-semibold-line-height)] tracking-[var(--bh-text-body-xl-semibold-letter-spacing)]",
-            collapsed &&
-              "pointer-events-none max-w-0 opacity-[var(--bh-opacity-0)] [transition-delay:var(--bh-sidebar-motion-duration-content),0ms]"
-          )}
-        >
-          {brand}
-        </span>
-      </span>
-
-      {searchAction !== false || hasCollapseAction ? (
-        <span
-          data-slot="sidebar-brand-actions"
-          className={cn(
-            "absolute end-[var(--bh-space-xs-4)] top-[calc((var(--bh-sidebar-brand-height)-var(--bh-sidebar-header-action-size))/2)] flex shrink-0 items-center gap-[var(--bh-space-sm-6)] transition-[top,inset-inline-end,gap] duration-[var(--bh-sidebar-motion-duration)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
-            collapsed && hasCollapseAction &&
-              "end-[var(--bh-space-xs-4)] top-[calc(var(--bh-sidebar-header-action-size)+var(--bh-space-sm-6))] gap-0"
-          )}
-        >
-          {searchAction === false ? null : (
-            <span
-              aria-hidden={collapsed || undefined}
-              data-slot="sidebar-brand-search-action"
-              inert={collapsed ? true : undefined}
-              className={cn(
-                "inline-flex max-w-[var(--bh-sidebar-header-action-size)] overflow-hidden opacity-[var(--bh-opacity-100)] transition-[max-width,opacity] duration-[var(--bh-sidebar-motion-duration-content)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
-                collapsed &&
-                  "pointer-events-none max-w-0 opacity-[var(--bh-opacity-0)]"
-              )}
-            >
-              {searchAction ?? (
-                <SidebarHeaderAction label={searchLabel} onClick={onSearchClick}>
-                  <SearchIcon aria-hidden="true" />
-                </SidebarHeaderAction>
-              )}
-            </span>
-          )}
-          {hasCollapseAction ? collapseAction ?? <SidebarTrigger /> : null}
-        </span>
-      ) : null}
-    </div>
-  )
-}
-
-/** Workspace switcher in either the header-actions or bordered card treatment. */
-function SidebarHeaderWorkspaceSwitch({
-  className,
-  collapseAction,
-  image,
-  label = "Acme Inc",
-  onSearchClick,
-  onWorkspaceClick,
-  searchAction,
-  searchLabel = "Search",
-  supportText = "Pro plan",
-  variant = "actions",
-  workspaceLabel = "Switch workspace",
-  ...props
-}: SidebarHeaderWorkspaceSwitchProps) {
-  const { collapsed } = useSidebarContext()
-  const card = variant === "card"
-  const hasCollapseAction = collapseAction !== false
-
-  const workspaceButton = (
-    <button
-      aria-label={workspaceLabel}
-      data-slot="sidebar-workspace-trigger"
-      onClick={onWorkspaceClick}
-      type="button"
-      className={cn(
-        "group/workspace absolute start-0 top-0 flex min-w-0 items-center overflow-hidden text-start outline-none transition-[width,height,gap,padding,border-radius,background-color,border-color,box-shadow] duration-[var(--bh-sidebar-motion-duration)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
-        card
-          ? "h-[var(--bh-sidebar-workspace-card-height)] w-full gap-[var(--bh-space-md-8)] overflow-hidden rounded-[var(--bh-radius-lg-8)] border border-[var(--bh-border-subtle)] bg-[var(--bh-bg-default)] p-[var(--bh-space-sm-6)] hover:bg-[var(--bh-bg-default-hover)] focus-visible:border-[length:var(--bh-border-width-strong)] focus-visible:border-[var(--bh-border-focus)]"
-          : "h-[var(--bh-sidebar-compact-control-size)] w-[var(--bh-sidebar-workspace-trigger-width)] max-w-[var(--bh-sidebar-workspace-trigger-max-width)] gap-[var(--bh-space-md-8)] rounded-[var(--bh-radius-md-6)] p-[var(--bh-space-sm-6)] hover:bg-[var(--bh-interactive-ghost-hover)] focus-visible:border-[length:var(--bh-border-width-strong)] focus-visible:border-[var(--bh-border-focus)]",
-        collapsed && card &&
-          "size-[var(--bh-sidebar-compact-control-size)] gap-0 px-[var(--bh-space-xxs-2)] py-0",
-        collapsed && !card &&
-          "size-[var(--bh-sidebar-item-height-collapsed)] max-w-[var(--bh-sidebar-item-height-collapsed)] gap-0 px-[var(--bh-space-sm-6)] py-0"
-      )}
-    >
-      <span
-        data-slot="sidebar-workspace-image"
-        className={cn(
-          "inline-flex shrink-0 items-center justify-center overflow-hidden transition-[width,height,border-radius] duration-[var(--bh-sidebar-motion-duration)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none [&>*]:size-full",
-          card
-            ? "size-[var(--bh-space-6xl-32)] rounded-[var(--bh-radius-md-6)]"
-            : "size-[var(--bh-space-5xl-24)] rounded-[var(--bh-radius-lg-8)]",
-          collapsed && !card &&
-            "size-[var(--bh-sidebar-header-action-size)] rounded-[var(--bh-radius-full)]"
-        )}
-      >
-        {image ?? (
-          <Building2Icon
-            aria-hidden="true"
-            className="size-[var(--bh-sidebar-icon-size)]"
-          />
-        )}
-      </span>
-
-      {card ? (
-        <span
-          aria-hidden={collapsed || undefined}
-          className={cn(
-            "flex min-w-0 max-w-[var(--bh-sidebar-width)] flex-1 flex-col items-start justify-center overflow-hidden opacity-[var(--bh-opacity-100)] transition-[max-width,opacity] [transition-duration:0ms,var(--bh-sidebar-motion-duration-content)] [transition-delay:0ms,var(--bh-sidebar-motion-delay-content)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
-            collapsed &&
-              "pointer-events-none max-w-0 opacity-[var(--bh-opacity-0)] [transition-delay:var(--bh-sidebar-motion-duration-content),0ms]"
-          )}
-        >
-          <span
-            data-slot="sidebar-workspace-label"
-            dir="auto"
-            className="w-full truncate text-[length:var(--bh-text-body-sm-medium-font-size)] font-[var(--bh-text-body-sm-medium-font-weight)] leading-[var(--bh-text-body-sm-medium-line-height)] tracking-[var(--bh-text-body-sm-medium-letter-spacing)]"
-          >
-            {label}
-          </span>
-          <span
-            data-slot="sidebar-workspace-support"
-            dir="auto"
-            className="w-full truncate text-[length:var(--bh-text-body-2xs-regular-font-size)] font-[var(--bh-text-body-2xs-regular-font-weight)] leading-[var(--bh-text-body-2xs-regular-line-height)] tracking-[var(--bh-text-body-2xs-regular-letter-spacing)] text-[var(--bh-content-subtle)]"
-          >
-            {supportText}
-          </span>
-        </span>
-      ) : (
-        <span
-          aria-hidden={collapsed || undefined}
-          className={cn(
-            "flex min-w-0 max-w-[var(--bh-sidebar-width)] items-center gap-[var(--bh-space-xxs-2)] overflow-hidden opacity-[var(--bh-opacity-100)] transition-[max-width,opacity] [transition-duration:0ms,var(--bh-sidebar-motion-duration-content)] [transition-delay:0ms,var(--bh-sidebar-motion-delay-content)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
-            collapsed &&
-              "pointer-events-none max-w-0 gap-0 opacity-[var(--bh-opacity-0)] [transition-delay:var(--bh-sidebar-motion-duration-content),0ms]"
-          )}
-        >
-          <span
-            data-slot="sidebar-workspace-label"
-            dir="auto"
-            className="truncate text-[length:var(--bh-text-body-sm-medium-font-size)] font-[var(--bh-text-body-sm-medium-font-weight)] leading-[var(--bh-text-body-sm-medium-line-height)] tracking-[var(--bh-text-body-sm-medium-letter-spacing)]"
-          >
-            {label}
-          </span>
-          <ChevronDownIcon
-            aria-hidden="true"
-            className="size-[var(--bh-space-3xl-16)] shrink-0"
-            data-rtl-flip="true"
-          />
-        </span>
-      )}
-
-      {!card ? (
-        <span
-          aria-hidden="true"
-          data-slot="sidebar-workspace-caret"
-          className={cn(
-            "pointer-events-none absolute end-0 top-1/2 inline-flex size-[var(--bh-space-3xl-16)] -translate-y-1/2 items-center justify-center rounded-[var(--bh-radius-full)] border border-[var(--bh-border-subtle)] bg-[var(--bh-bg-default)] opacity-[var(--bh-opacity-0)] transition-opacity duration-[var(--bh-sidebar-motion-duration-content)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
-            collapsed &&
-              "opacity-[var(--bh-opacity-100)] delay-[var(--bh-sidebar-motion-delay-content)]"
-          )}
-        >
-          <ChevronDownIcon className="size-[var(--bh-space-xl-12)]" />
-        </span>
-      ) : null}
-
-      {card ? (
-        <ChevronsUpDownIcon
-          aria-hidden="true"
-          className={cn(
-            "size-[var(--bh-space-3xl-16)] shrink-0 text-[var(--bh-content-muted)] opacity-[var(--bh-opacity-100)] transition-opacity duration-[var(--bh-sidebar-motion-duration-content)] delay-[var(--bh-sidebar-motion-delay-content)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
-            collapsed && "opacity-[var(--bh-opacity-0)] delay-0"
-          )}
-        />
-      ) : null}
-    </button>
-  )
-
-  return (
-    <div
-      data-collapsed={collapsed ? "true" : "false"}
-      data-slot="sidebar-header-workspace-switch"
-      data-variant={variant}
-      className={cn(
-        "relative w-full transition-[width,height] duration-[var(--bh-sidebar-motion-duration)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
-        card
-          ? "h-[var(--bh-sidebar-workspace-card-height)]"
-          : "h-[var(--bh-sidebar-compact-control-size)]",
-        collapsed && card && hasCollapseAction &&
-          "h-[calc(var(--bh-sidebar-compact-control-size)+var(--bh-space-sm-6)+var(--bh-sidebar-header-action-size))] w-[var(--bh-sidebar-compact-control-size)]",
-        collapsed && card && !hasCollapseAction &&
-          "h-[var(--bh-sidebar-compact-control-size)] w-[var(--bh-sidebar-compact-control-size)]",
-        collapsed && !card && hasCollapseAction &&
-          "h-[calc(var(--bh-sidebar-item-height-collapsed)+var(--bh-space-sm-6)+var(--bh-sidebar-header-action-size))] w-[var(--bh-sidebar-item-height-collapsed)]",
-        collapsed && !card && !hasCollapseAction &&
-          "h-[var(--bh-sidebar-item-height-collapsed)] w-[var(--bh-sidebar-item-height-collapsed)]",
-        className
-      )}
-      {...props}
-    >
-      {workspaceButton}
-      {(!card && searchAction !== false) || hasCollapseAction ? (
-        <span
-          aria-hidden={(card && !collapsed) || undefined}
-          data-slot="sidebar-workspace-actions"
-          inert={card && !collapsed ? true : undefined}
-          className={cn(
-            "absolute flex shrink-0 items-center gap-[var(--bh-space-sm-6)] transition-[top,inset-inline-end,gap,opacity] duration-[var(--bh-sidebar-motion-duration)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
-            card
-              ? "pointer-events-none end-[var(--bh-space-xs-4)] top-[calc((var(--bh-sidebar-workspace-card-height)-var(--bh-sidebar-header-action-size))/2)] opacity-[var(--bh-opacity-0)]"
-              : "end-[var(--bh-space-md-8)] top-[calc((var(--bh-sidebar-compact-control-size)-var(--bh-sidebar-header-action-size))/2)] opacity-[var(--bh-opacity-100)]",
-            collapsed && card &&
-              "pointer-events-auto end-[var(--bh-space-xs-4)] top-[calc(var(--bh-sidebar-compact-control-size)+var(--bh-space-sm-6))] gap-0 opacity-[var(--bh-opacity-100)]",
-            collapsed && !card &&
-              "end-[var(--bh-space-sm-6)] top-[calc(var(--bh-sidebar-item-height-collapsed)+var(--bh-space-sm-6))] gap-0"
-          )}
-        >
-          {!card && searchAction !== false ? (
-            <span
-              aria-hidden={collapsed || undefined}
-              data-slot="sidebar-workspace-search-action"
-              inert={collapsed ? true : undefined}
-              className={cn(
-                "inline-flex max-w-[var(--bh-sidebar-header-action-size)] overflow-hidden opacity-[var(--bh-opacity-100)] transition-[max-width,opacity] duration-[var(--bh-sidebar-motion-duration-content)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
-                collapsed &&
-                  "pointer-events-none max-w-0 opacity-[var(--bh-opacity-0)]"
-              )}
-            >
-              {searchAction ?? (
-                <SidebarHeaderAction label={searchLabel} onClick={onSearchClick}>
-                  <SearchIcon aria-hidden="true" />
-                </SidebarHeaderAction>
-              )}
-            </span>
-          ) : null}
-          {hasCollapseAction ? collapseAction ?? <SidebarTrigger /> : null}
-        </span>
-      ) : null}
-    </div>
-  )
-}
-
-/** Scrollable content region with Figma's expanded and rail insets. */
-function SidebarBody({ className, ...props }: SidebarSectionProps) {
-  return (
-    <div
-      data-slot="sidebar-body"
-      className={cn(
-        "min-h-0 flex-1 overflow-auto px-[var(--bh-space-xl-12)] py-0 transition-[padding] duration-[var(--bh-sidebar-motion-duration)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
-        "group-data-[collapsed=true]/sidebar:px-0",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-/** Bottom-pinned footer with the matching expanded and collapsed padding. */
-function SidebarFooter({ className, ...props }: SidebarSectionProps) {
-  return (
-    <div
-      data-slot="sidebar-footer"
-      className={cn(
-        "mt-auto shrink-0 border-t border-[var(--bh-sidebar-border)] bg-[var(--bh-sidebar-bg)] px-[var(--bh-sidebar-padding)] py-[var(--bh-space-md-8)] transition-[padding] duration-[var(--bh-sidebar-motion-duration)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
-        "group-data-[collapsed=true]/sidebar:p-[var(--bh-space-xs-4)]",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-/** User switcher used in the footer, with 48px supporting and 40px compact rows. */
-const SidebarFooterUser = React.forwardRef<
-  HTMLButtonElement,
-  SidebarFooterUserProps
->(function SidebarFooterUser(
-  {
-    "aria-label": ariaLabel,
-    avatar,
-    className,
-    name = "Username",
-    showIdentityPreview = true,
-    supportText = "user@example.com",
-    trailingIcon,
-    type = "button",
-    variant = "supporting-text",
-    ...props
-  },
-  ref
-) {
-  const { collapsed } = useSidebarContext()
-  const supporting = variant === "supporting-text"
-  const resolvedLabel =
-    ariaLabel ?? (typeof name === "string" ? name : "Open user menu")
-
-  return (
-    <button
-      aria-label={resolvedLabel}
-      data-collapsed={collapsed ? "true" : "false"}
-      data-slot="sidebar-footer-user"
-      data-variant={variant}
-      ref={ref}
-      type={type}
-      className={cn(
-        "group/footer-user relative flex w-full items-center rounded-[var(--bh-radius-lg-8)] text-start outline-none transition-[width,height,gap,padding,border-radius,background-color,border-color,box-shadow] duration-[var(--bh-sidebar-motion-duration)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
-        supporting
-          ? "h-[var(--bh-space-8xl-48)] gap-[var(--bh-space-xs-4)] p-[var(--bh-space-sm-6)] hover:bg-[var(--bh-interactive-ghost-hover)]"
-          : "h-[var(--bh-sidebar-item-height-collapsed)] gap-[var(--bh-space-xs-4)] border border-[var(--bh-border-subtle)] bg-[var(--bh-bg-default)] px-[var(--bh-space-sm-6)] py-[var(--bh-space-md-8)] hover:bg-[var(--bh-bg-default-hover)]",
-        "focus-visible:border-[length:var(--bh-border-width-strong)] focus-visible:border-[var(--bh-border-focus)] focus-visible:shadow-[var(--elevation-button-focus)]",
-        collapsed &&
-          "mx-auto size-[var(--bh-sidebar-compact-control-size)] justify-center gap-0 rounded-[var(--bh-radius-full)] border-0 p-0 hover:bg-[var(--bh-interactive-ghost-hover)]",
-        className
-      )}
-      {...props}
-    >
-      <span
-        data-slot="sidebar-footer-user-content"
-        className={cn(
-          "flex min-w-0 flex-1 items-center gap-[var(--bh-space-md-8)] overflow-hidden px-[var(--bh-space-xxs-2)] transition-[width,height,gap,padding] duration-[var(--bh-sidebar-motion-duration)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
-          collapsed && "gap-0 p-0"
-        )}
-      >
-        <span
-          data-slot="sidebar-footer-user-avatar"
-          className={cn(
-            "inline-flex shrink-0 items-center justify-center overflow-hidden rounded-[var(--bh-radius-full)] transition-[width,height,border-radius] duration-[var(--bh-sidebar-motion-duration)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none [&>*]:size-full",
-            supporting ? "size-[var(--bh-space-6xl-32)]" : "size-[var(--bh-space-5xl-24)]",
-            collapsed && "size-[var(--bh-sidebar-compact-control-size)]"
-          )}
-        >
-          {avatar ?? (
-            <UserIcon
-              aria-hidden="true"
-              className="size-[var(--bh-sidebar-icon-size)]"
-            />
-          )}
-        </span>
-        <span
-          aria-hidden={collapsed || undefined}
-          data-slot="sidebar-footer-user-text"
-          className={cn(
-            "flex min-w-0 max-w-[var(--bh-sidebar-width)] flex-1 flex-col items-start justify-center overflow-hidden opacity-[var(--bh-opacity-100)] transition-[max-width,opacity] [transition-duration:0ms,var(--bh-sidebar-motion-duration-content)] [transition-delay:0ms,var(--bh-sidebar-motion-delay-content)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none rtl:items-end rtl:text-right",
-            collapsed &&
-              "pointer-events-none max-w-0 opacity-[var(--bh-opacity-0)] [transition-delay:var(--bh-sidebar-motion-duration-content),0ms]"
-          )}
-        >
-          <span
-            data-slot="sidebar-footer-user-name"
-            dir="auto"
-            className="w-full truncate text-[length:var(--bh-text-body-sm-medium-font-size)] font-[var(--bh-text-body-sm-medium-font-weight)] leading-[var(--bh-text-body-sm-medium-line-height)] tracking-[var(--bh-text-body-sm-medium-letter-spacing)]"
-          >
-            {name}
-          </span>
-          {supporting ? (
-            <span
-              data-slot="sidebar-footer-user-support"
-              dir="auto"
-              className="w-full truncate text-[length:var(--bh-text-body-2xs-regular-font-size)] font-[var(--bh-text-body-2xs-regular-font-weight)] leading-[var(--bh-text-body-2xs-regular-line-height)] tracking-[var(--bh-text-body-2xs-regular-letter-spacing)] text-[var(--bh-content-subtle)]"
-            >
-              {supportText}
-            </span>
-          ) : null}
-        </span>
-      </span>
-      <span
-        aria-hidden="true"
-        data-slot="sidebar-footer-user-trailing"
-        className={cn(
-          "inline-flex size-[var(--bh-space-4xl-20)] max-w-[var(--bh-space-4xl-20)] shrink-0 items-center justify-center overflow-hidden text-[var(--bh-content-muted)] opacity-[var(--bh-opacity-100)] transition-[max-width,opacity] [transition-duration:0ms,var(--bh-sidebar-motion-duration-content)] [transition-delay:0ms,var(--bh-sidebar-motion-delay-content)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none [&_svg]:size-[var(--bh-space-3xl-16)]",
-          collapsed &&
-            "pointer-events-none max-w-0 opacity-[var(--bh-opacity-0)] [transition-delay:var(--bh-sidebar-motion-duration-content),0ms]"
-        )}
-      >
-        {trailingIcon ?? <ChevronsUpDownIcon />}
-      </span>
-      {collapsed && showIdentityPreview ? (
-        <span
-          aria-hidden="true"
-          data-slot="sidebar-footer-user-preview"
-          className={cn(
-            "pointer-events-none invisible absolute bottom-0 start-[calc(100%+var(--bh-sidebar-user-preview-gap))] z-[var(--bh-z-overlay)] flex h-[var(--bh-sidebar-user-preview-height)] w-[var(--bh-sidebar-user-preview-width)] items-center gap-[var(--bh-space-md-8)] rounded-[var(--bh-radius-xl-10)] border border-[var(--bh-border-subtle)] bg-[var(--bh-bg-raised)] px-[var(--bh-space-xl-12)] py-[var(--bh-space-md-8)] opacity-[var(--bh-opacity-0)] shadow-[var(--elevation-component-default)] transition-[opacity,visibility]",
-            "group-hover/footer-user:visible group-hover/footer-user:opacity-[var(--bh-opacity-100)] group-focus-visible/footer-user:visible group-focus-visible/footer-user:opacity-[var(--bh-opacity-100)] group-data-[state=open]/footer-user:hidden",
-            "group-data-[side=end]/sidebar:start-auto group-data-[side=end]/sidebar:end-[calc(100%+var(--bh-sidebar-user-preview-gap))]"
-          )}
-        >
-          <span className="flex min-w-0 flex-1 flex-col items-start justify-center">
-            <span
-              dir="auto"
-              className="w-full truncate text-[length:var(--bh-text-body-sm-medium-font-size)] font-[var(--bh-text-body-sm-medium-font-weight)] leading-[var(--bh-text-body-sm-medium-line-height)] tracking-[var(--bh-text-body-sm-medium-letter-spacing)] text-[var(--bh-content-default)]"
-            >
-              {name}
-            </span>
-            <span
-              dir="auto"
-              className="w-full truncate text-[length:var(--bh-text-body-xs-regular-font-size)] font-[var(--bh-text-body-xs-regular-font-weight)] leading-[var(--bh-text-body-xs-regular-line-height)] tracking-[var(--bh-text-body-xs-regular-letter-spacing)] text-[var(--bh-content-subtle)]"
-            >
-              {supportText}
-            </span>
-          </span>
-          <span className="inline-flex size-[var(--bh-space-4xl-20)] shrink-0 items-center justify-center text-[var(--bh-content-muted)] [&_svg]:size-[var(--bh-space-3xl-16)]">
-            {trailingIcon ?? <MoreHorizontalIcon />}
-          </span>
-        </span>
-      ) : null}
-    </button>
-  )
-})
-
-/** A Figma sidebar group: 12px top padding, 6px bottom padding, and no menu gap. */
-function SidebarGroup({ className, ...props }: SidebarSectionProps) {
-  return (
-    <div
-      data-slot="sidebar-group"
-      className={cn(
-        "flex w-full flex-col items-start pb-[var(--bh-space-sm-6)] pt-[var(--bh-space-xl-12)]",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-/** Group label that reveals its disclosure and actions on hover or keyboard focus. */
-function SidebarGroupLabel({
-  actions,
-  children,
-  className,
-  expandIcon,
-  expandable = false,
-  ...props
-}: SidebarGroupLabelProps) {
-  const { collapsed } = useSidebarContext()
-
-  return (
-    <div
-      aria-hidden={collapsed || undefined}
-      data-slot="sidebar-group-label-motion"
-      inert={collapsed ? true : undefined}
-      className={cn(
-        "grid w-full grid-rows-[1fr] opacity-[var(--bh-opacity-100)] transition-[grid-template-rows,opacity] duration-[var(--bh-sidebar-motion-duration-content)] delay-[var(--bh-sidebar-motion-delay-content)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
-        collapsed &&
-          "pointer-events-none grid-rows-[0fr] opacity-[var(--bh-opacity-0)] delay-0"
-      )}
-    >
-      <div
-        data-slot="sidebar-group-label"
-        className={cn(
-          "group/label flex min-h-0 h-[var(--bh-space-5xl-24)] w-full items-center gap-[var(--bh-space-xs-4)] overflow-hidden rounded-[var(--bh-radius-lg-8)] px-[var(--bh-space-sm-6)] pb-[var(--bh-space-xs-4)]",
-          className
-        )}
-        {...props}
-      >
-        <span
-          data-slot="sidebar-group-label-content"
-          className="flex min-w-0 flex-1 items-center gap-[var(--bh-space-xxxs-1)]"
-        >
-          <span
-            data-slot="sidebar-group-label-text"
-            dir="auto"
-            className="truncate text-[length:var(--bh-text-body-sm-medium-font-size)] font-[var(--bh-text-body-sm-medium-font-weight)] leading-[var(--bh-text-body-sm-medium-line-height)] tracking-[var(--bh-text-body-sm-medium-letter-spacing)] text-[var(--bh-content-muted)]"
-          >
-            {children}
-          </span>
-          {expandable ? (
-            <span
-              aria-hidden="true"
-              data-slot="sidebar-group-label-expand"
-              className="inline-flex size-[var(--bh-space-3xl-16)] shrink-0 items-center justify-center opacity-[var(--bh-opacity-0)] transition-opacity group-hover/label:opacity-[var(--bh-opacity-100)] group-focus-within/label:opacity-[var(--bh-opacity-100)] [&_svg]:size-full"
-            >
-              {expandIcon ?? <ChevronRightIcon data-rtl-flip="true" />}
-            </span>
-          ) : null}
-        </span>
-        {actions ? (
-          <span
-            data-slot="sidebar-group-label-actions"
-            className="flex shrink-0 items-center gap-[var(--bh-space-xs-4)] opacity-[var(--bh-opacity-0)] transition-opacity group-hover/label:opacity-[var(--bh-opacity-100)] group-focus-within/label:opacity-[var(--bh-opacity-100)]"
-          >
-            {actions}
-          </span>
-        ) : null}
-      </div>
-    </div>
-  )
-}
-
-/** 20px group-label icon slot matching the Default, Hover, and Focus variants. */
-const SidebarGroupAction = React.forwardRef<
-  HTMLButtonElement,
-  SidebarGroupActionProps
->(function SidebarGroupAction(
-  { "aria-label": ariaLabel, children, className, label, type = "button", ...props },
-  ref
-) {
-  return (
-    <button
-      aria-label={ariaLabel ?? label ?? "Group action"}
-      data-slot="sidebar-group-action"
-      ref={ref}
-      type={type}
-      className={cn(
-        "inline-flex size-[var(--bh-sidebar-icon-slot-size)] items-center justify-center rounded-[var(--bh-control-sm)] border border-transparent bg-[var(--bh-interactive-ghost-default)] text-[var(--bh-content-muted)] outline-none transition-[background-color,border-color,color]",
-        "hover:bg-[var(--bh-interactive-ghost-hover)] hover:text-[var(--bh-content-default)] focus-visible:border-[var(--bh-border-focus)]",
-        "[&_svg]:size-[var(--bh-sidebar-icon-size)] [&_svg]:shrink-0",
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </button>
-  )
-})
-
-/** List wrapper for contiguous 32px sidebar menu rows. */
-function SidebarMenu({ className, ...props }: SidebarMenuProps) {
-  return (
-    <ul
-      data-slot="sidebar-menu"
-      className={cn("m-0 flex w-full list-none flex-col p-0", className)}
-      {...props}
-    />
-  )
-}
-
-/** Semantic list item wrapper. */
-function SidebarMenuItem({ className, ...props }: SidebarMenuItemProps) {
-  return (
-    <li
-      data-slot="sidebar-menu-item"
-      className={cn("min-w-0", className)}
-      {...props}
-    />
-  )
-}
-
-/** Native 24px neutral count badge for sidebar rows. */
-function SidebarMenuBadge({ children, className, ...props }: SidebarMenuBadgeProps) {
-  return (
-    <span
-      data-slot="sidebar-menu-badge"
-      className={cn(
-        "inline-flex h-[var(--bh-space-5xl-24)] min-w-[var(--bh-space-5xl-24)] shrink-0 items-center justify-center rounded-[var(--bh-radius-full)] bg-[var(--bh-bg-neutral-subtle)] px-[var(--bh-space-xs-4)] text-center text-[length:var(--bh-text-body-3xs-semibold-font-size)] font-[var(--bh-text-body-3xs-semibold-font-weight)] leading-[var(--bh-text-body-3xs-semibold-line-height)] tracking-[var(--bh-text-body-3xs-semibold-letter-spacing)] text-[var(--bh-content-default)]",
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </span>
-  )
-}
-
-/** Default, avatar, Level 2, and Level 2 line menu variants from the Figma set. */
-const SidebarMenuButton = React.forwardRef<
-  HTMLButtonElement,
-  SidebarMenuButtonProps
->(function SidebarMenuButton(
-  {
-    "aria-label": ariaLabel,
-    active = false,
-    asChild = false,
-    badge,
-    children,
-    className,
-    icon,
-    state = "default",
-    supportText,
-    tooltip,
-    trailingIcon,
-    type = "button",
-    variant = "default",
-    ...props
-  },
-  ref
-) {
-  const { collapsed, dir } = useSidebarContext()
-  const isLevel2 = variant === "level2" || variant === "level2-line"
-  const label = getSlottableLabel(children, asChild)
-  const resolvedLabel =
-    ariaLabel ?? (typeof label === "string" ? label : undefined)
-
-  const content = (
-    <>
-      {isLevel2 ? (
-        <span
-          aria-hidden="true"
-          data-slot="sidebar-menu-indent"
-          className="relative h-full w-[var(--bh-sidebar-level-2-indent-width)] shrink-0"
-        >
-          {variant === "level2-line" ? (
-            <span
-              data-slot="sidebar-menu-guide"
-              className={cn(
-                "absolute start-[var(--bh-space-md-8)]",
-                active
-                  ? "top-1/2 h-[var(--bh-sidebar-active-guide-height)] -translate-y-1/2 border-e-[length:var(--bh-border-width-strong)] border-[var(--bh-bg-brand-default)]"
-                  : "inset-y-0 border-e-[length:var(--bh-border-width-default)] border-[var(--bh-border-subtle)]"
-              )}
-            />
-          ) : null}
-        </span>
-      ) : null}
-
-      {icon ? (
-        <span
-          aria-hidden="true"
-          data-slot="sidebar-menu-icon"
-          className={cn(
-            "inline-flex shrink-0 items-center justify-center overflow-hidden [&>*]:size-full [&_svg]:shrink-0",
-            variant === "avatar"
-              ? "size-[var(--bh-space-4xl-20)] rounded-[var(--bh-radius-md-6)]"
-              : "size-[var(--bh-sidebar-icon-slot-size)] [&_svg]:size-[var(--bh-sidebar-icon-size)]",
-            collapsed && variant === "avatar" &&
-              "size-[var(--bh-space-5xl-24)] rounded-[var(--bh-radius-lg-8)]",
-            collapsed && variant === "default" &&
-              "[&_svg]:size-[var(--bh-sidebar-icon-size-collapsed)]"
-          )}
-        >
-          {icon}
-        </span>
-      ) : null}
-
-      <span
-        aria-hidden={collapsed || undefined}
-        data-slot="sidebar-menu-label"
-        dir="auto"
-        className={cn(
-          "min-w-0 max-w-[var(--bh-sidebar-width)] flex-1 truncate ps-[var(--bh-space-xs-4)] opacity-[var(--bh-opacity-100)] transition-[max-width,opacity,padding] [transition-duration:0ms,var(--bh-sidebar-motion-duration-content),0ms] [transition-delay:0ms,var(--bh-sidebar-motion-delay-content),0ms] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
-          collapsed &&
-            "pointer-events-none max-w-0 p-0 opacity-[var(--bh-opacity-0)] [transition-delay:var(--bh-sidebar-motion-duration-content),0ms,var(--bh-sidebar-motion-duration-content)]"
-        )}
-      >
-        {label}
-      </span>
-
-      {supportText ? (
-        <span
-          aria-hidden={collapsed || undefined}
-          data-slot="sidebar-menu-support"
-          dir="auto"
-          className={cn(
-            "max-w-[var(--bh-sidebar-width)] shrink-0 overflow-hidden whitespace-nowrap text-[length:var(--bh-text-body-xs-regular-font-size)] font-[var(--bh-text-body-xs-regular-font-weight)] leading-[var(--bh-text-body-xs-regular-line-height)] tracking-[var(--bh-text-body-xs-regular-letter-spacing)] text-[var(--bh-content-muted)] opacity-[var(--bh-opacity-100)] transition-[max-width,opacity] [transition-duration:0ms,var(--bh-sidebar-motion-duration-content)] [transition-delay:0ms,var(--bh-sidebar-motion-delay-content)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
-            collapsed &&
-              "pointer-events-none max-w-0 opacity-[var(--bh-opacity-0)] [transition-delay:var(--bh-sidebar-motion-duration-content),0ms]"
-          )}
-        >
-          {supportText}
-        </span>
-      ) : null}
-
-      {badge ? (
-        <span
-          aria-hidden={collapsed || undefined}
-          data-slot="sidebar-menu-badge-slot"
-          className={cn(
-            "inline-flex max-w-[var(--bh-sidebar-width)] shrink-0 overflow-hidden opacity-[var(--bh-opacity-100)] transition-[max-width,opacity] [transition-duration:0ms,var(--bh-sidebar-motion-duration-content)] [transition-delay:0ms,var(--bh-sidebar-motion-delay-content)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
-            collapsed &&
-              "pointer-events-none max-w-0 opacity-[var(--bh-opacity-0)] [transition-delay:var(--bh-sidebar-motion-duration-content),0ms]"
-          )}
-        >
-          {badge}
-        </span>
-      ) : null}
-
-      {trailingIcon ? (
-        <span
-          aria-hidden="true"
-          data-slot="sidebar-menu-trailing"
-          className={cn(
-            "inline-flex size-[var(--bh-sidebar-icon-slot-size)] max-w-[var(--bh-sidebar-icon-slot-size)] shrink-0 items-center justify-center overflow-hidden text-[var(--bh-content-muted)] opacity-[var(--bh-opacity-100)] transition-[max-width,opacity] [transition-duration:0ms,var(--bh-sidebar-motion-duration-content)] [transition-delay:0ms,var(--bh-sidebar-motion-delay-content)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none [&_svg]:size-[var(--bh-sidebar-icon-size)] [&_svg]:shrink-0",
-            collapsed &&
-              "pointer-events-none max-w-0 opacity-[var(--bh-opacity-0)] [transition-delay:var(--bh-sidebar-motion-duration-content),0ms]"
-          )}
-        >
-          {trailingIcon}
-        </span>
-      ) : null}
-    </>
-  )
-
-  const buttonClassName = cn(
-    "group/menu-button relative flex w-full min-w-0 items-center gap-[var(--bh-space-sm-6)] overflow-hidden rounded-[var(--bh-radius-lg-8)] border-[length:var(--bh-border-width-strong)] border-transparent px-[var(--bh-sidebar-item-padding-x)] text-start text-[length:var(--bh-text-body-sm-regular-font-size)] font-[var(--bh-text-body-sm-regular-font-weight)] leading-[var(--bh-text-body-sm-regular-line-height)] tracking-[var(--bh-text-body-sm-regular-letter-spacing)] text-[var(--bh-sidebar-item-content)] opacity-[var(--bh-opacity-100)] outline-none transition-[width,height,gap,padding,margin,opacity,background-color,border-color,color] duration-[var(--bh-sidebar-motion-duration)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
-    "hover:rounded-[var(--bh-radius-md-6)] hover:bg-[var(--bh-sidebar-item-bg-hover)]",
-    "focus-visible:rounded-[var(--bh-radius-md-6)] focus-visible:border-[var(--bh-border-focus)]",
-    "data-[state=hover]:rounded-[var(--bh-radius-md-6)] data-[state=hover]:bg-[var(--bh-sidebar-item-bg-hover)]",
-    "data-[state=focus]:rounded-[var(--bh-radius-md-6)] data-[state=focus]:border-[var(--bh-border-focus)]",
-    "disabled:pointer-events-none disabled:text-[var(--bh-content-disabled)]",
-    variant === "avatar"
-      ? "h-[var(--bh-sidebar-compact-control-size)]"
-      : "h-[var(--bh-sidebar-item-height)]",
-    (active || state === "active") &&
-      "rounded-[var(--bh-radius-md-6)] bg-[var(--bh-sidebar-item-bg-active)] font-[var(--bh-text-body-sm-medium-font-weight)] text-[var(--bh-sidebar-item-content-active)]",
-    collapsed && !isLevel2 &&
-      "ms-[var(--bh-space-xs-4)] size-[var(--bh-sidebar-item-height-collapsed)] gap-0 rounded-[var(--bh-radius-lg-8)] px-[var(--bh-space-md-8)] py-0",
-    collapsed && !isLevel2 && variant === "avatar" &&
-      "px-[var(--bh-space-sm-6)]",
-    collapsed && isLevel2 &&
-      "pointer-events-none h-0 w-full gap-0 border-0 p-0 opacity-[var(--bh-opacity-0)]",
-    className
-  )
-
-  const commonProps = {
-    "aria-current": active ? ("page" as const) : undefined,
-    "aria-hidden": collapsed && isLevel2 ? true : undefined,
-    "aria-label": resolvedLabel,
-    "data-active": active ? "true" : "false",
-    "data-collapsed": collapsed ? "true" : "false",
-    "data-slot": "sidebar-menu-button",
-    "data-state": state,
-    "data-variant": variant,
-    inert: collapsed && isLevel2 ? true : undefined,
-    className: buttonClassName,
-  }
-
-  const button = asChild ? (
-    <Slot {...commonProps} ref={ref} {...props}>
-      {cloneSlottableChild(children, content)}
-    </Slot>
-  ) : (
-    <button {...commonProps} ref={ref} type={type} {...props}>
-      {content}
-    </button>
-  )
-
-  const resolvedTooltip = tooltip ?? resolvedLabel
-  if (!resolvedTooltip || isLevel2) return button
-
-  return (
-    <Tooltip>
-      <TooltipTrigger asChild>{button}</TooltipTrigger>
-      {collapsed ? (
-        <TooltipContent
-          pointerPosition={dir === "rtl" ? "center-right" : "center-left"}
-          showShortcut={false}
-          side={dir === "rtl" ? "left" : "right"}
-        >
-          {resolvedTooltip}
-        </TooltipContent>
-      ) : null}
-    </Tooltip>
-  )
-})
-
-/** Nested menu list that contracts before the icon rail settles. */
-function SidebarMenuSub({ className, ...props }: SidebarMenuSubProps) {
-  const { collapsed } = useSidebarContext()
-
-  return (
-    <div
-      aria-hidden={collapsed || undefined}
-      data-slot="sidebar-menu-sub-motion"
-      inert={collapsed ? true : undefined}
-      className={cn(
-        "grid w-full grid-rows-[1fr] opacity-[var(--bh-opacity-100)] transition-[grid-template-rows,opacity] duration-[var(--bh-sidebar-motion-duration)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
-        collapsed &&
-          "pointer-events-none grid-rows-[0fr] opacity-[var(--bh-opacity-0)]"
-      )}
-    >
-      <ul
-        data-slot="sidebar-menu-sub"
-        className={cn(
-          "m-0 flex min-h-0 w-full list-none flex-col overflow-hidden p-0",
-          className
-        )}
-        {...props}
-      />
-    </div>
-  )
-}
-
-/** Level 2 menu row with an optional vertical guide. */
-const SidebarMenuSubButton = React.forwardRef<
-  HTMLButtonElement,
-  SidebarMenuSubButtonProps
->(function SidebarMenuSubButton({ showLine = false, ...props }, ref) {
-  return (
-    <SidebarMenuButton
-      ref={ref}
-      variant={showLine ? "level2-line" : "level2"}
-      {...props}
-    />
-  )
-})
-
-const treeLevelClasses: Record<NonNullable<SidebarMenuTreeItemProps["level"]>, string> = {
-  1: "ps-[var(--bh-space-sm-6)]",
-  2: "ps-[calc(var(--bh-space-sm-6)+var(--bh-sidebar-tree-indent-step))]",
-  3: "ps-[calc(var(--bh-space-sm-6)+var(--bh-sidebar-tree-indent-step)+var(--bh-sidebar-tree-indent-step))]",
-  4: "ps-[calc(var(--bh-space-sm-6)+var(--bh-sidebar-tree-indent-step)+var(--bh-sidebar-tree-indent-step)+var(--bh-sidebar-tree-indent-step))]",
-}
-
-/** 28px file-tree row with four Figma indentation levels. */
-const SidebarMenuTreeItem = React.forwardRef<
-  HTMLButtonElement,
-  SidebarMenuTreeItemProps
->(function SidebarMenuTreeItem(
-  {
-    "aria-label": ariaLabel,
-    active = false,
-    asChild = false,
-    children,
-    className,
-    expanded = false,
-    icon,
-    level = 1,
-    showChevron = true,
-    state = "default",
-    type = "button",
-    ...props
-  },
-  ref
-) {
-  const { collapsed } = useSidebarContext()
-
-  const label = getSlottableLabel(children, asChild)
-  const resolvedLabel =
-    ariaLabel ?? (typeof label === "string" ? label : undefined)
-  const content = (
-    <>
-      {showChevron ? (
-        <span
-          aria-hidden="true"
-          data-slot="sidebar-tree-chevron"
-          className="inline-flex size-[var(--bh-space-3xl-16)] shrink-0 items-center justify-center [&_svg]:size-full"
-        >
-          {expanded ? (
-            <ChevronDownIcon />
-          ) : (
-            <ChevronRightIcon data-rtl-flip="true" />
-          )}
-        </span>
-      ) : null}
-      <span
-        aria-hidden="true"
-        data-slot="sidebar-tree-icon"
-        className="inline-flex size-[var(--bh-space-3xl-16)] shrink-0 items-center justify-center [&_svg]:size-full"
-      >
-        {icon ?? <FolderIcon />}
-      </span>
-      <span
-        data-slot="sidebar-tree-label"
-        dir="auto"
-        className="min-w-0 flex-1 truncate"
-      >
-        {label}
-      </span>
-    </>
-  )
-
-  const commonProps = {
-    "aria-current": active ? ("page" as const) : undefined,
-    "aria-expanded": showChevron ? expanded : undefined,
-    "aria-hidden": collapsed || undefined,
-    "aria-label": resolvedLabel,
-    "data-active": active ? "true" : "false",
-    "data-collapsed": collapsed ? "true" : "false",
-    "data-level": String(level),
-    "data-slot": "sidebar-menu-tree-item",
-    "data-state": state,
-    inert: collapsed ? true : undefined,
-    className: cn(
-      "flex h-[var(--bh-sidebar-tree-item-height)] w-full min-w-0 items-center gap-[var(--bh-space-sm-6)] overflow-hidden rounded-[var(--bh-radius-lg-8)] border-[length:var(--bh-border-width-strong)] border-transparent pe-[var(--bh-space-sm-6)] text-start text-[length:var(--bh-text-body-xs-regular-font-size)] font-[var(--bh-text-body-xs-regular-font-weight)] leading-[var(--bh-text-body-xs-regular-line-height)] tracking-[var(--bh-text-body-xs-regular-letter-spacing)] text-[var(--bh-content-subtle)] opacity-[var(--bh-opacity-100)] outline-none transition-[height,gap,padding,opacity,background-color,border-color,color] duration-[var(--bh-sidebar-motion-duration-content)] delay-[var(--bh-sidebar-motion-delay-content)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
-      "hover:rounded-[var(--bh-radius-md-6)] hover:bg-[var(--bh-interactive-ghost-hover)] focus-visible:rounded-[var(--bh-radius-md-6)] focus-visible:border-[var(--bh-border-focus)]",
-      "data-[state=hover]:rounded-[var(--bh-radius-md-6)] data-[state=hover]:bg-[var(--bh-interactive-ghost-hover)] data-[state=focus]:rounded-[var(--bh-radius-md-6)] data-[state=focus]:border-[var(--bh-border-focus)]",
-      (active || state === "active") &&
-        "rounded-[var(--bh-radius-md-6)] bg-[var(--bh-interactive-ghost-active)] font-[var(--bh-text-body-xs-semibold-font-weight)] text-[var(--bh-content-default)]",
-      treeLevelClasses[level],
-      collapsed &&
-        "pointer-events-none h-0 gap-0 border-0 p-0 opacity-[var(--bh-opacity-0)] delay-0",
-      className
-    ),
-  }
-
-  return asChild ? (
-    <Slot {...commonProps} ref={ref} {...props}>
-      {cloneSlottableChild(children, content)}
-    </Slot>
-  ) : (
-    <button {...commonProps} ref={ref} type={type} {...props}>
-      {content}
-    </button>
-  )
-})
-
-/** Labeled tree group used for file-browser and hierarchy sidebars. */
-function SidebarTreeGroup({
-  actions,
-  children,
-  className,
-  expandable = false,
-  expandIcon,
-  label,
-  ...props
-}: SidebarTreeGroupProps) {
-  const { collapsed } = useSidebarContext()
-
-  return (
-    <div
-      aria-hidden={collapsed || undefined}
-      data-slot="sidebar-tree-group-motion"
-      inert={collapsed ? true : undefined}
-      className={cn(
-        "grid w-full grid-rows-[1fr] opacity-[var(--bh-opacity-100)] transition-[grid-template-rows,opacity] duration-[var(--bh-sidebar-motion-duration)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
-        collapsed &&
-          "pointer-events-none grid-rows-[0fr] opacity-[var(--bh-opacity-0)]"
-      )}
-    >
-      <div
-        data-slot="sidebar-tree-group"
-        className={cn(
-          "flex min-h-0 w-full flex-col items-start gap-[var(--bh-space-sm-6)] overflow-hidden pb-[var(--bh-space-sm-6)] pt-[var(--bh-space-xl-12)]",
-          className
-        )}
-        {...props}
-      >
-        {label ? (
-          <SidebarGroupLabel
-            actions={actions}
-            className={cn(
-              expandable &&
-                "[&_[data-slot=sidebar-group-label-expand]]:opacity-[var(--bh-opacity-100)]"
-            )}
-            expandable={expandable}
-            expandIcon={expandIcon ?? (expandable ? <ChevronDownIcon /> : undefined)}
-          >
-            {label}
-          </SidebarGroupLabel>
-        ) : null}
-        <div data-slot="sidebar-tree-menu" className="flex w-full flex-col">
-          {children}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-/** 28px collapse control with accessible pressed state. */
-const SidebarToggle = React.forwardRef<HTMLButtonElement, SidebarToggleProps>(
-  function SidebarToggle(
-    { children, className, onClick, type = "button", ...props },
-    ref
-  ) {
-    const { collapsed, toggle } = useSidebarContext()
-
-    return (
-      <button
-        aria-label={collapsed ? "Expand sidebar" : "Collapse sidebar"}
-        aria-pressed={collapsed}
-        data-slot="sidebar-toggle"
-        ref={ref}
-        type={type}
-        className={cn(
-          "inline-flex size-[var(--bh-sidebar-header-action-size)] shrink-0 items-center justify-center rounded-[var(--bh-radius-full)] border border-transparent bg-[var(--bh-interactive-ghost-default)] text-[var(--bh-content-default)] outline-none transition-[background-color,border-color,box-shadow,color]",
-          "hover:bg-[var(--bh-interactive-ghost-hover)] focus-visible:border-[var(--bh-border-focus)] focus-visible:shadow-[var(--elevation-button-focus)]",
-          className
-        )}
-        onClick={(event) => {
-          onClick?.(event)
-          if (!event.defaultPrevented) toggle()
-        }}
-        {...props}
-      >
-        <span
-          aria-hidden="true"
-          data-slot="sidebar-toggle-icon"
-          className="inline-flex size-[var(--bh-sidebar-icon-slot-size)] items-center justify-center [&_svg]:size-[var(--bh-sidebar-icon-size)]"
-        >
-          {children ?? (
-            <PanelLeftIcon
-              className="rtl:-scale-x-100"
-              strokeWidth="var(--bh-icon-stroke-200)"
-            />
-          )}
-        </span>
-      </button>
-    )
-  }
-)
-
-const SidebarTrigger = SidebarToggle
-
-/** Edge-hugging pointer target for toggling the sidebar from its border. */
-const SidebarRail = React.forwardRef<HTMLButtonElement, SidebarRailProps>(
-  function SidebarRail({ className, onClick, type = "button", ...props }, ref) {
-    const { toggle } = useSidebarContext()
-
-    return (
-      <button
-        aria-label="Toggle sidebar"
-        data-slot="sidebar-rail"
-        ref={ref}
-        type={type}
-        className={cn(
-          "absolute inset-y-0 end-[calc(var(--bh-sidebar-rail-width)*-1)] hidden w-[var(--bh-sidebar-rail-width)] cursor-ew-resize bg-transparent outline-none lg:block",
-          className
-        )}
-        onClick={(event) => {
-          onClick?.(event)
-          if (!event.defaultPrevented) toggle()
-        }}
-        {...props}
-      />
-    )
-  }
-)
-
-/** Main-content wrapper paired with a sidebar shell. */
-const SidebarInset = React.forwardRef<HTMLDivElement, SidebarInsetProps>(
-  function SidebarInset({ asChild = false, className, ...props }, ref) {
-    const Comp = asChild ? Slot : "div"
-
-    return (
-      <Comp
-        data-slot="sidebar-inset"
-        ref={ref}
-        className={cn("min-w-0 flex-1", className)}
-        {...props}
-      />
-    )
-  }
-)
-
-function getSlottableLabel(children: React.ReactNode, asChild: boolean) {
-  if (!asChild || !React.isValidElement<{ children?: React.ReactNode }>(children)) {
-    return children
-  }
-  return children.props.children
-}
-
-function cloneSlottableChild(children: React.ReactNode, content: React.ReactNode) {
-  if (!React.isValidElement<{ children?: React.ReactNode }>(children)) {
-    throw new Error("Sidebar asChild expects one valid React element")
-  }
-  return React.cloneElement(children, undefined, content)
-}
-
-function useSidebarContext() {
-  const context = React.useContext(SidebarContext)
-  if (!context) {
-    throw new Error("Sidebar components must be used within SidebarProvider")
-  }
-
-  return context
-}
-
-export {
-  Sidebar,
-  SidebarBody,
-  SidebarFooter,
-  SidebarFooterUser,
-  SidebarGroup,
-  SidebarGroupAction,
-  SidebarGroupLabel,
-  SidebarHeader,
-  SidebarHeaderAction,
-  SidebarHeaderBrand,
-  SidebarHeaderWorkspaceSwitch,
-  SidebarInset,
-  SidebarMenu,
-  SidebarMenuBadge,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarMenuSub,
-  SidebarMenuSubButton,
-  SidebarMenuTreeItem,
-  SidebarProvider,
-  SidebarRail,
-  SidebarToggle,
-  SidebarTreeGroup,
-  SidebarTrigger,
-}
-export type {
-  SidebarFooterUserProps,
-  SidebarGroupActionProps,
-  SidebarGroupLabelProps,
-  SidebarHeaderActionProps,
-  SidebarHeaderBrandProps,
-  SidebarHeaderWorkspaceSwitchProps,
-  SidebarInsetProps,
-  SidebarInteractionState,
-  SidebarMenuBadgeProps,
-  SidebarMenuButtonProps,
-  SidebarMenuButtonVariant,
-  SidebarMenuItemProps,
-  SidebarMenuProps,
-  SidebarMenuSubButtonProps,
-  SidebarMenuSubProps,
-  SidebarMenuTreeItemProps,
-  SidebarProps,
-  SidebarProviderProps,
-  SidebarRailProps,
-  SidebarSectionProps,
-  SidebarToggleProps,
-  SidebarTreeGroupProps,
-  SidebarTriggerProps,
-  SidebarWorkspaceVariant,
-}
+"use client"
+
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import {
+  Building2Icon,
+  ChevronDownIcon,
+  ChevronRightIcon,
+  ChevronsUpDownIcon,
+  FolderIcon,
+  MoreHorizontalIcon,
+  PanelLeftIcon,
+  SearchIcon,
+  SparklesIcon,
+  UserIcon,
+} from "lucide-react"
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { cn } from "@/lib/utils"
+
+type SidebarSize = "default" | "comfortable"
+
+type SidebarContextValue = {
+  collapsed: boolean
+  dir?: "ltr" | "rtl"
+  setCollapsed: (collapsed: boolean) => void
+  size: SidebarSize
+  toggle: () => void
+}
+
+type SidebarProviderProps = React.ComponentProps<"div"> & {
+  collapsed?: boolean
+  defaultCollapsed?: boolean
+  dir?: "ltr" | "rtl"
+  onCollapsedChange?: (collapsed: boolean) => void
+  size?: SidebarSize
+}
+type SidebarProps = React.ComponentProps<"aside"> & {
+  side?: "start" | "end"
+}
+type SidebarSectionProps = React.ComponentProps<"div">
+type SidebarHeaderActionProps = React.ComponentProps<"button"> & {
+  label?: string
+}
+type SidebarHeaderBrandProps = React.ComponentProps<"div"> & {
+  brand?: React.ReactNode
+  collapseAction?: React.ReactNode | false
+  logo?: React.ReactNode | false
+  onSearchClick?: React.MouseEventHandler<HTMLButtonElement>
+  searchAction?: React.ReactNode | false
+  searchLabel?: string
+  subtitle?: React.ReactNode
+}
+type SidebarWorkspaceVariant = "actions" | "card"
+type SidebarHeaderWorkspaceSwitchProps = React.ComponentProps<"div"> & {
+  collapseAction?: React.ReactNode | false
+  image?: React.ReactNode
+  label?: React.ReactNode
+  onSearchClick?: React.MouseEventHandler<HTMLButtonElement>
+  onWorkspaceClick?: React.MouseEventHandler<HTMLButtonElement>
+  searchAction?: React.ReactNode | false
+  searchLabel?: string
+  supportText?: React.ReactNode
+  variant?: SidebarWorkspaceVariant
+  workspaceLabel?: string
+}
+type SidebarFooterProps = SidebarSectionProps & {
+  divider?: boolean
+}
+type SidebarFooterUserProps = React.ComponentProps<"button"> & {
+  avatar?: React.ReactNode | false
+  name?: React.ReactNode
+  showIdentityPreview?: boolean
+  supportText?: React.ReactNode
+  trailingIcon?: React.ReactNode | false
+  variant?: "default" | "supporting-text" | "card"
+}
+type SidebarGroupLabelProps = React.ComponentProps<"div"> & {
+  actions?: React.ReactNode
+  expandIcon?: React.ReactNode
+  expandable?: boolean
+}
+type SidebarGroupActionProps = React.ComponentProps<"button"> & {
+  label?: string
+}
+type SidebarMenuProps = React.ComponentProps<"ul">
+type SidebarMenuItemProps = React.ComponentProps<"li">
+type SidebarInteractionState = "default" | "hover" | "active" | "focus"
+type SidebarMenuButtonVariant =
+  | "default"
+  | "avatar"
+  | "level2"
+  | "level2-line"
+type SidebarMenuButtonProps = React.ComponentProps<"button"> & {
+  active?: boolean
+  asChild?: boolean
+  badge?: React.ReactNode
+  icon?: React.ReactNode
+  state?: SidebarInteractionState
+  supportText?: React.ReactNode
+  tooltip?: React.ReactNode
+  trailingIcon?: React.ReactNode
+  variant?: SidebarMenuButtonVariant
+}
+type SidebarMenuBadgeProps = React.ComponentProps<"span">
+type SidebarMenuSubProps = React.ComponentProps<"ul">
+type SidebarMenuSubButtonProps = Omit<SidebarMenuButtonProps, "variant"> & {
+  showLine?: boolean
+}
+type SidebarMenuTreeItemProps = React.ComponentProps<"button"> & {
+  active?: boolean
+  asChild?: boolean
+  expanded?: boolean
+  icon?: React.ReactNode
+  level?: 1 | 2 | 3 | 4
+  showChevron?: boolean
+  state?: SidebarInteractionState
+}
+type SidebarTreeGroupProps = SidebarSectionProps & {
+  actions?: React.ReactNode
+  expandable?: boolean
+  expandIcon?: React.ReactNode
+  label?: React.ReactNode
+}
+type SidebarToggleProps = React.ComponentProps<"button">
+type SidebarTriggerProps = SidebarToggleProps
+type SidebarRailProps = React.ComponentProps<"button">
+type SidebarInsetProps = React.ComponentProps<"div"> & {
+  asChild?: boolean
+}
+
+const SidebarContext = React.createContext<SidebarContextValue | null>(null)
+
+/** Owns the controlled or uncontrolled collapsed state for a sidebar composition. */
+function SidebarProvider({
+  children,
+  className,
+  collapsed,
+  defaultCollapsed = false,
+  dir,
+  onCollapsedChange,
+  size = "default",
+  ...props
+}: SidebarProviderProps) {
+  const [uncontrolledCollapsed, setUncontrolledCollapsed] =
+    React.useState(defaultCollapsed)
+  const isControlled = collapsed !== undefined
+  const resolvedCollapsed = collapsed ?? uncontrolledCollapsed
+
+  const setCollapsed = React.useCallback(
+    (nextCollapsed: boolean) => {
+      if (!isControlled) {
+        setUncontrolledCollapsed(nextCollapsed)
+      }
+      onCollapsedChange?.(nextCollapsed)
+    },
+    [isControlled, onCollapsedChange]
+  )
+
+  const context = React.useMemo<SidebarContextValue>(
+    () => ({
+      collapsed: resolvedCollapsed,
+      dir,
+      setCollapsed,
+      size,
+      toggle: () => setCollapsed(!resolvedCollapsed),
+    }),
+    [dir, resolvedCollapsed, setCollapsed, size]
+  )
+
+  return (
+    <SidebarContext.Provider value={context}>
+      <TooltipProvider delayDuration={0}>
+        <div
+          data-collapsed={resolvedCollapsed ? "true" : "false"}
+          data-size={size}
+          data-slot="sidebar-provider"
+          dir={dir}
+          className={cn("relative min-w-0", className)}
+          {...props}
+        >
+          {children}
+        </div>
+      </TooltipProvider>
+    </SidebarContext.Provider>
+  )
+}
+
+/** The 280px navigation surface with a 900px minimum height that contracts to the Figma 48px icon rail. */
+const Sidebar = React.forwardRef<HTMLElement, SidebarProps>(function Sidebar(
+  { className, onTransitionEnd, side = "start", ...props },
+  ref
+) {
+  const context = React.useContext(SidebarContext)
+  const collapsed = context?.collapsed ?? false
+  const dir = context?.dir
+  const size = context?.size ?? "default"
+  const [overflowVisible, setOverflowVisible] = React.useState(collapsed)
+  const previousCollapsed = React.useRef(collapsed)
+
+  React.useEffect(() => {
+    if (previousCollapsed.current === collapsed) return
+    previousCollapsed.current = collapsed
+
+    if (!collapsed) {
+      setOverflowVisible(false)
+      return
+    }
+
+    const prefersReducedMotion =
+      typeof window !== "undefined" &&
+      typeof window.matchMedia === "function" &&
+      window.matchMedia("(prefers-reduced-motion: reduce)").matches
+
+    setOverflowVisible(prefersReducedMotion)
+  }, [collapsed])
+
+  return (
+    <aside
+      data-collapsed={collapsed ? "true" : "false"}
+      data-overflow-visible={overflowVisible ? "true" : "false"}
+      data-side={side}
+      data-size={size}
+      data-slot="sidebar"
+      dir={dir}
+      ref={ref}
+      className={cn(
+        "group/sidebar flex h-full min-h-[var(--bh-sidebar-min-height)] w-[var(--bh-sidebar-width)] max-w-full shrink-0 flex-col overflow-hidden bg-[var(--bh-sidebar-bg)] text-[var(--bh-content-default)] transition-[width,background-color] duration-[var(--bh-sidebar-motion-duration)] ease-[var(--bh-sidebar-motion-easing)] will-change-[width] motion-reduce:transition-none",
+        "border-e border-[var(--bh-sidebar-border)]",
+        "data-[collapsed=true]:w-[var(--bh-sidebar-width-collapsed)] data-[collapsed=true]:bg-[var(--bh-sidebar-bg-collapsed)]",
+        collapsed && overflowVisible && "overflow-visible",
+        side === "end" && "ms-auto border-e-0 border-s",
+        // Comfortable, expanded: the ATS360 shell rail's 1px inside stroke on all four sides, an outline inset by its own
+        // width so it takes no width and draws above the header and footer fills.
+        size === "comfortable" &&
+          "data-[collapsed=false]:border-0 data-[collapsed=false]:[outline:var(--bh-border-width-default)_solid_var(--bh-sidebar-border)] data-[collapsed=false]:[outline-offset:calc(var(--bh-border-width-default)*-1)]",
+        className
+      )}
+      onTransitionEnd={(event) => {
+        onTransitionEnd?.(event)
+        if (
+          !event.defaultPrevented &&
+          event.currentTarget === event.target &&
+          event.propertyName === "width"
+        ) {
+          setOverflowVisible(collapsed)
+        }
+      }}
+      {...props}
+    />
+  )
+})
+
+/** Header slot with the Figma 10px expanded and 4px/8px collapsed insets. */
+function SidebarHeader({ className, ...props }: SidebarSectionProps) {
+  return (
+    <div
+      data-slot="sidebar-header"
+      className={cn(
+        "flex shrink-0 flex-col items-center gap-[var(--bh-space-lg-10)] overflow-hidden bg-[var(--bh-sidebar-bg)] p-[var(--bh-sidebar-padding)] transition-[padding] duration-[var(--bh-sidebar-motion-duration)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
+        "group-data-[collapsed=true]/sidebar:px-[var(--bh-space-xs-4)] group-data-[collapsed=true]/sidebar:py-[var(--bh-space-md-8)]",
+        "group-data-[size=comfortable]/sidebar:group-data-[collapsed=false]/sidebar:px-[var(--bh-sidebar-comfortable-padding)] group-data-[size=comfortable]/sidebar:group-data-[collapsed=false]/sidebar:pb-[var(--bh-space-none)] group-data-[size=comfortable]/sidebar:group-data-[collapsed=false]/sidebar:pt-[var(--bh-sidebar-comfortable-padding)]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/** Compact 28px ghost action used by Figma sidebar headers. */
+const SidebarHeaderAction = React.forwardRef<
+  HTMLButtonElement,
+  SidebarHeaderActionProps
+>(function SidebarHeaderAction(
+  { "aria-label": ariaLabel, children, className, label, type = "button", ...props },
+  ref
+) {
+  return (
+    <button
+      aria-label={ariaLabel ?? label ?? "Sidebar action"}
+      data-slot="sidebar-header-action"
+      ref={ref}
+      type={type}
+      className={cn(
+        "inline-flex size-[var(--bh-sidebar-header-action-size)] shrink-0 items-center justify-center rounded-[var(--bh-radius-full)] border border-transparent bg-[var(--bh-interactive-ghost-default)] text-[var(--bh-content-default)] outline-none transition-[background-color,border-color,box-shadow,color]",
+        "hover:bg-[var(--bh-interactive-ghost-hover)] focus-visible:border-[var(--bh-border-focus)] focus-visible:shadow-[var(--elevation-button-focus)]",
+        className
+      )}
+      {...props}
+    >
+      <span
+        aria-hidden="true"
+        data-slot="sidebar-header-action-icon"
+        className="inline-flex size-[var(--bh-sidebar-icon-slot-size)] items-center justify-center [&_svg]:size-[var(--bh-sidebar-icon-size)] [&_svg]:shrink-0"
+      >
+        {children}
+      </span>
+    </button>
+  )
+})
+
+/**
+ * Brand header with optional search and collapse actions; actions disappear on the icon rail.
+ * Pass logo={false} for a text-only brand and subtitle for a stacked product or module line.
+ */
+function SidebarHeaderBrand({
+  brand = "Banhaten",
+  className,
+  collapseAction,
+  logo,
+  onSearchClick,
+  searchAction,
+  searchLabel = "Search",
+  subtitle,
+  ...props
+}: SidebarHeaderBrandProps) {
+  const { collapsed } = useSidebarContext()
+  const hasCollapseAction = collapseAction !== false
+  const showLogo = logo !== false
+  const stacked = subtitle !== undefined && subtitle !== null && subtitle !== false
+
+  const name = (
+    <span
+      aria-hidden={collapsed || undefined}
+      data-slot="sidebar-brand-name"
+      dir="auto"
+      className={cn(
+        "max-w-[calc(var(--bh-sidebar-width)-var(--bh-space-10xl-80))] truncate opacity-[var(--bh-opacity-100)] transition-[max-width,opacity] [transition-duration:0ms,var(--bh-sidebar-motion-duration-content)] [transition-delay:0ms,var(--bh-sidebar-motion-delay-content)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
+        "text-[length:var(--bh-text-body-xl-semibold-font-size)] font-[var(--bh-text-body-xl-semibold-font-weight)] leading-[var(--bh-text-body-xl-semibold-line-height)] tracking-[var(--bh-text-body-xl-semibold-letter-spacing)]",
+        "group-data-[size=comfortable]/sidebar:group-data-[collapsed=false]/sidebar:text-[length:var(--bh-text-heading-md-semibold-font-size)] group-data-[size=comfortable]/sidebar:group-data-[collapsed=false]/sidebar:font-[var(--bh-text-heading-md-semibold-font-weight)] group-data-[size=comfortable]/sidebar:group-data-[collapsed=false]/sidebar:leading-[var(--bh-text-heading-md-semibold-line-height)] group-data-[size=comfortable]/sidebar:group-data-[collapsed=false]/sidebar:tracking-[var(--bh-text-heading-md-semibold-letter-spacing)]",
+        collapsed &&
+          "pointer-events-none max-w-0 opacity-[var(--bh-opacity-0)] [transition-delay:var(--bh-sidebar-motion-duration-content),0ms]"
+      )}
+    >
+      {brand}
+    </span>
+  )
+
+  return (
+    <div
+      data-collapsed={collapsed ? "true" : "false"}
+      data-slot="sidebar-header-brand"
+      data-stacked={stacked ? "true" : "false"}
+      className={cn(
+        "relative h-[var(--bh-sidebar-brand-height)] w-full transition-[width,height] duration-[var(--bh-sidebar-motion-duration)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
+        stacked && !collapsed && "h-auto",
+        collapsed && hasCollapseAction &&
+          "h-[calc(var(--bh-sidebar-header-action-size)+var(--bh-space-sm-6)+var(--bh-sidebar-header-action-size))] w-[var(--bh-sidebar-compact-control-size)]",
+        collapsed && !hasCollapseAction &&
+          "h-[var(--bh-sidebar-header-action-size)] w-[var(--bh-sidebar-compact-control-size)]",
+        className
+      )}
+      {...props}
+    >
+      <span
+        data-slot="sidebar-brand-content"
+        className={cn(
+          "absolute start-[var(--bh-space-sm-6)] top-[var(--bh-space-xs-4)] flex min-w-0 items-center gap-[var(--bh-space-md-8)] transition-[inset-inline-start,top,gap] duration-[var(--bh-sidebar-motion-duration)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
+          stacked && !collapsed &&
+            "static items-start px-[var(--bh-space-sm-6)] py-[var(--bh-space-xs-4)] group-data-[size=comfortable]/sidebar:p-[var(--bh-sidebar-comfortable-brand-padding)]",
+          collapsed && "start-[var(--bh-space-xs-4)] top-0 gap-0"
+        )}
+      >
+        {showLogo ? (
+          <span
+            data-slot="sidebar-brand-logo"
+            className="inline-flex size-[var(--bh-sidebar-header-action-size)] shrink-0 items-center justify-center overflow-hidden rounded-[var(--bh-radius-full)] [&>*]:size-full"
+          >
+            {logo ?? (
+              <span className="inline-flex size-full items-center justify-center bg-[var(--bh-bg-brand-default)] text-[var(--bh-content-on-brand)]">
+                <SparklesIcon
+                  aria-hidden="true"
+                  className="size-[var(--bh-sidebar-icon-size)]"
+                />
+              </span>
+            )}
+          </span>
+        ) : null}
+        {stacked ? (
+          <span
+            aria-hidden={collapsed || undefined}
+            data-slot="sidebar-brand-text"
+            className={cn(
+              "flex min-w-0 flex-col gap-[var(--bh-space-xs-4)] opacity-[var(--bh-opacity-100)] transition-[max-width,opacity] [transition-duration:0ms,var(--bh-sidebar-motion-duration-content)] [transition-delay:0ms,var(--bh-sidebar-motion-delay-content)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
+              collapsed &&
+                "pointer-events-none max-w-0 overflow-hidden opacity-[var(--bh-opacity-0)] [transition-delay:var(--bh-sidebar-motion-duration-content),0ms]"
+            )}
+          >
+            {name}
+            <span
+              data-slot="sidebar-brand-subtitle"
+              dir="auto"
+              className="max-w-[calc(var(--bh-sidebar-width)-var(--bh-space-10xl-80))] truncate text-[length:var(--bh-text-body-sm-regular-font-size)] font-[var(--bh-text-body-sm-regular-font-weight)] leading-[var(--bh-text-body-sm-regular-line-height)] tracking-[var(--bh-text-body-sm-regular-letter-spacing)] text-[var(--bh-content-subtle)]"
+            >
+              {subtitle}
+            </span>
+          </span>
+        ) : (
+          name
+        )}
+      </span>
+
+      {searchAction !== false || hasCollapseAction ? (
+        <span
+          data-slot="sidebar-brand-actions"
+          className={cn(
+            "absolute end-[var(--bh-space-xs-4)] top-[calc((var(--bh-sidebar-brand-height)-var(--bh-sidebar-header-action-size))/2)] flex shrink-0 items-center gap-[var(--bh-space-sm-6)] transition-[top,inset-inline-end,gap] duration-[var(--bh-sidebar-motion-duration)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
+            collapsed && hasCollapseAction &&
+              "end-[var(--bh-space-xs-4)] top-[calc(var(--bh-sidebar-header-action-size)+var(--bh-space-sm-6))] gap-0"
+          )}
+        >
+          {searchAction === false ? null : (
+            <span
+              aria-hidden={collapsed || undefined}
+              data-slot="sidebar-brand-search-action"
+              inert={collapsed ? true : undefined}
+              className={cn(
+                "inline-flex max-w-[var(--bh-sidebar-header-action-size)] overflow-hidden opacity-[var(--bh-opacity-100)] transition-[max-width,opacity] duration-[var(--bh-sidebar-motion-duration-content)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
+                collapsed &&
+                  "pointer-events-none max-w-0 opacity-[var(--bh-opacity-0)]"
+              )}
+            >
+              {searchAction ?? (
+                <SidebarHeaderAction label={searchLabel} onClick={onSearchClick}>
+                  <SearchIcon aria-hidden="true" />
+                </SidebarHeaderAction>
+              )}
+            </span>
+          )}
+          {hasCollapseAction ? collapseAction ?? <SidebarTrigger /> : null}
+        </span>
+      ) : null}
+    </div>
+  )
+}
+
+/** Workspace switcher in either the header-actions or bordered card treatment. */
+function SidebarHeaderWorkspaceSwitch({
+  className,
+  collapseAction,
+  image,
+  label = "Acme Inc",
+  onSearchClick,
+  onWorkspaceClick,
+  searchAction,
+  searchLabel = "Search",
+  supportText = "Pro plan",
+  variant = "actions",
+  workspaceLabel = "Switch workspace",
+  ...props
+}: SidebarHeaderWorkspaceSwitchProps) {
+  const { collapsed } = useSidebarContext()
+  const card = variant === "card"
+  const hasCollapseAction = collapseAction !== false
+
+  const workspaceButton = (
+    <button
+      aria-label={workspaceLabel}
+      data-slot="sidebar-workspace-trigger"
+      onClick={onWorkspaceClick}
+      type="button"
+      className={cn(
+        "group/workspace absolute start-0 top-0 flex min-w-0 items-center overflow-hidden text-start outline-none transition-[width,height,gap,padding,border-radius,background-color,border-color,box-shadow] duration-[var(--bh-sidebar-motion-duration)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
+        card
+          ? "h-[var(--bh-sidebar-workspace-card-height)] w-full gap-[var(--bh-space-md-8)] overflow-hidden rounded-[var(--bh-radius-lg-8)] border border-[var(--bh-border-subtle)] bg-[var(--bh-bg-default)] p-[var(--bh-space-sm-6)] hover:bg-[var(--bh-bg-default-hover)] focus-visible:border-[length:var(--bh-border-width-strong)] focus-visible:border-[var(--bh-border-focus)]"
+          : "h-[var(--bh-sidebar-compact-control-size)] w-[var(--bh-sidebar-workspace-trigger-width)] max-w-[var(--bh-sidebar-workspace-trigger-max-width)] gap-[var(--bh-space-md-8)] rounded-[var(--bh-radius-md-6)] p-[var(--bh-space-sm-6)] hover:bg-[var(--bh-interactive-ghost-hover)] focus-visible:border-[length:var(--bh-border-width-strong)] focus-visible:border-[var(--bh-border-focus)]",
+        collapsed && card &&
+          "size-[var(--bh-sidebar-compact-control-size)] gap-0 px-[var(--bh-space-xxs-2)] py-0",
+        collapsed && !card &&
+          "size-[var(--bh-sidebar-item-height-collapsed)] max-w-[var(--bh-sidebar-item-height-collapsed)] gap-0 px-[var(--bh-space-sm-6)] py-0"
+      )}
+    >
+      <span
+        data-slot="sidebar-workspace-image"
+        className={cn(
+          "inline-flex shrink-0 items-center justify-center overflow-hidden transition-[width,height,border-radius] duration-[var(--bh-sidebar-motion-duration)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none [&>*]:size-full",
+          card
+            ? "size-[var(--bh-space-6xl-32)] rounded-[var(--bh-radius-md-6)]"
+            : "size-[var(--bh-space-5xl-24)] rounded-[var(--bh-radius-lg-8)]",
+          collapsed && !card &&
+            "size-[var(--bh-sidebar-header-action-size)] rounded-[var(--bh-radius-full)]"
+        )}
+      >
+        {image ?? (
+          <Building2Icon
+            aria-hidden="true"
+            className="size-[var(--bh-sidebar-icon-size)]"
+          />
+        )}
+      </span>
+
+      {card ? (
+        <span
+          aria-hidden={collapsed || undefined}
+          className={cn(
+            "flex min-w-0 max-w-[var(--bh-sidebar-width)] flex-1 flex-col items-start justify-center overflow-hidden opacity-[var(--bh-opacity-100)] transition-[max-width,opacity] [transition-duration:0ms,var(--bh-sidebar-motion-duration-content)] [transition-delay:0ms,var(--bh-sidebar-motion-delay-content)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
+            collapsed &&
+              "pointer-events-none max-w-0 opacity-[var(--bh-opacity-0)] [transition-delay:var(--bh-sidebar-motion-duration-content),0ms]"
+          )}
+        >
+          <span
+            data-slot="sidebar-workspace-label"
+            dir="auto"
+            className="w-full truncate text-[length:var(--bh-text-body-sm-medium-font-size)] font-[var(--bh-text-body-sm-medium-font-weight)] leading-[var(--bh-text-body-sm-medium-line-height)] tracking-[var(--bh-text-body-sm-medium-letter-spacing)]"
+          >
+            {label}
+          </span>
+          <span
+            data-slot="sidebar-workspace-support"
+            dir="auto"
+            className="w-full truncate text-[length:var(--bh-text-body-2xs-regular-font-size)] font-[var(--bh-text-body-2xs-regular-font-weight)] leading-[var(--bh-text-body-2xs-regular-line-height)] tracking-[var(--bh-text-body-2xs-regular-letter-spacing)] text-[var(--bh-content-subtle)]"
+          >
+            {supportText}
+          </span>
+        </span>
+      ) : (
+        <span
+          aria-hidden={collapsed || undefined}
+          className={cn(
+            "flex min-w-0 max-w-[var(--bh-sidebar-width)] items-center gap-[var(--bh-space-xxs-2)] overflow-hidden opacity-[var(--bh-opacity-100)] transition-[max-width,opacity] [transition-duration:0ms,var(--bh-sidebar-motion-duration-content)] [transition-delay:0ms,var(--bh-sidebar-motion-delay-content)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
+            collapsed &&
+              "pointer-events-none max-w-0 gap-0 opacity-[var(--bh-opacity-0)] [transition-delay:var(--bh-sidebar-motion-duration-content),0ms]"
+          )}
+        >
+          <span
+            data-slot="sidebar-workspace-label"
+            dir="auto"
+            className="truncate text-[length:var(--bh-text-body-sm-medium-font-size)] font-[var(--bh-text-body-sm-medium-font-weight)] leading-[var(--bh-text-body-sm-medium-line-height)] tracking-[var(--bh-text-body-sm-medium-letter-spacing)]"
+          >
+            {label}
+          </span>
+          <ChevronDownIcon
+            aria-hidden="true"
+            className="size-[var(--bh-space-3xl-16)] shrink-0"
+            data-rtl-flip="true"
+          />
+        </span>
+      )}
+
+      {!card ? (
+        <span
+          aria-hidden="true"
+          data-slot="sidebar-workspace-caret"
+          className={cn(
+            "pointer-events-none absolute end-0 top-1/2 inline-flex size-[var(--bh-space-3xl-16)] -translate-y-1/2 items-center justify-center rounded-[var(--bh-radius-full)] border border-[var(--bh-border-subtle)] bg-[var(--bh-bg-default)] opacity-[var(--bh-opacity-0)] transition-opacity duration-[var(--bh-sidebar-motion-duration-content)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
+            collapsed &&
+              "opacity-[var(--bh-opacity-100)] delay-[var(--bh-sidebar-motion-delay-content)]"
+          )}
+        >
+          <ChevronDownIcon className="size-[var(--bh-space-xl-12)]" />
+        </span>
+      ) : null}
+
+      {card ? (
+        <ChevronsUpDownIcon
+          aria-hidden="true"
+          className={cn(
+            "size-[var(--bh-space-3xl-16)] shrink-0 text-[var(--bh-content-muted)] opacity-[var(--bh-opacity-100)] transition-opacity duration-[var(--bh-sidebar-motion-duration-content)] delay-[var(--bh-sidebar-motion-delay-content)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
+            collapsed && "opacity-[var(--bh-opacity-0)] delay-0"
+          )}
+        />
+      ) : null}
+    </button>
+  )
+
+  return (
+    <div
+      data-collapsed={collapsed ? "true" : "false"}
+      data-slot="sidebar-header-workspace-switch"
+      data-variant={variant}
+      className={cn(
+        "relative w-full transition-[width,height] duration-[var(--bh-sidebar-motion-duration)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
+        card
+          ? "h-[var(--bh-sidebar-workspace-card-height)]"
+          : "h-[var(--bh-sidebar-compact-control-size)]",
+        collapsed && card && hasCollapseAction &&
+          "h-[calc(var(--bh-sidebar-compact-control-size)+var(--bh-space-sm-6)+var(--bh-sidebar-header-action-size))] w-[var(--bh-sidebar-compact-control-size)]",
+        collapsed && card && !hasCollapseAction &&
+          "h-[var(--bh-sidebar-compact-control-size)] w-[var(--bh-sidebar-compact-control-size)]",
+        collapsed && !card && hasCollapseAction &&
+          "h-[calc(var(--bh-sidebar-item-height-collapsed)+var(--bh-space-sm-6)+var(--bh-sidebar-header-action-size))] w-[var(--bh-sidebar-item-height-collapsed)]",
+        collapsed && !card && !hasCollapseAction &&
+          "h-[var(--bh-sidebar-item-height-collapsed)] w-[var(--bh-sidebar-item-height-collapsed)]",
+        className
+      )}
+      {...props}
+    >
+      {workspaceButton}
+      {(!card && searchAction !== false) || hasCollapseAction ? (
+        <span
+          aria-hidden={(card && !collapsed) || undefined}
+          data-slot="sidebar-workspace-actions"
+          inert={card && !collapsed ? true : undefined}
+          className={cn(
+            "absolute flex shrink-0 items-center gap-[var(--bh-space-sm-6)] transition-[top,inset-inline-end,gap,opacity] duration-[var(--bh-sidebar-motion-duration)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
+            card
+              ? "pointer-events-none end-[var(--bh-space-xs-4)] top-[calc((var(--bh-sidebar-workspace-card-height)-var(--bh-sidebar-header-action-size))/2)] opacity-[var(--bh-opacity-0)]"
+              : "end-[var(--bh-space-md-8)] top-[calc((var(--bh-sidebar-compact-control-size)-var(--bh-sidebar-header-action-size))/2)] opacity-[var(--bh-opacity-100)]",
+            collapsed && card &&
+              "pointer-events-auto end-[var(--bh-space-xs-4)] top-[calc(var(--bh-sidebar-compact-control-size)+var(--bh-space-sm-6))] gap-0 opacity-[var(--bh-opacity-100)]",
+            collapsed && !card &&
+              "end-[var(--bh-space-sm-6)] top-[calc(var(--bh-sidebar-item-height-collapsed)+var(--bh-space-sm-6))] gap-0"
+          )}
+        >
+          {!card && searchAction !== false ? (
+            <span
+              aria-hidden={collapsed || undefined}
+              data-slot="sidebar-workspace-search-action"
+              inert={collapsed ? true : undefined}
+              className={cn(
+                "inline-flex max-w-[var(--bh-sidebar-header-action-size)] overflow-hidden opacity-[var(--bh-opacity-100)] transition-[max-width,opacity] duration-[var(--bh-sidebar-motion-duration-content)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
+                collapsed &&
+                  "pointer-events-none max-w-0 opacity-[var(--bh-opacity-0)]"
+              )}
+            >
+              {searchAction ?? (
+                <SidebarHeaderAction label={searchLabel} onClick={onSearchClick}>
+                  <SearchIcon aria-hidden="true" />
+                </SidebarHeaderAction>
+              )}
+            </span>
+          ) : null}
+          {hasCollapseAction ? collapseAction ?? <SidebarTrigger /> : null}
+        </span>
+      ) : null}
+    </div>
+  )
+}
+
+/** Scrollable content region with Figma's expanded and rail insets. */
+function SidebarBody({ className, ...props }: SidebarSectionProps) {
+  return (
+    <div
+      data-slot="sidebar-body"
+      className={cn(
+        "min-h-0 flex-1 overflow-auto px-[var(--bh-space-xl-12)] py-0 transition-[padding] duration-[var(--bh-sidebar-motion-duration)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
+        "group-data-[collapsed=true]/sidebar:px-0",
+        "group-data-[size=comfortable]/sidebar:group-data-[collapsed=false]/sidebar:flex group-data-[size=comfortable]/sidebar:group-data-[collapsed=false]/sidebar:flex-col group-data-[size=comfortable]/sidebar:group-data-[collapsed=false]/sidebar:gap-[var(--bh-sidebar-comfortable-section-gap)] group-data-[size=comfortable]/sidebar:group-data-[collapsed=false]/sidebar:px-[var(--bh-sidebar-comfortable-padding)] group-data-[size=comfortable]/sidebar:group-data-[collapsed=false]/sidebar:pt-[var(--bh-sidebar-comfortable-section-gap)]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/** Bottom-pinned footer with the matching expanded and collapsed padding; divider={false} drops the top rule. */
+function SidebarFooter({ className, divider = true, ...props }: SidebarFooterProps) {
+  return (
+    <div
+      data-divider={divider ? "true" : "false"}
+      data-slot="sidebar-footer"
+      className={cn(
+        "mt-auto shrink-0 bg-[var(--bh-sidebar-bg)] px-[var(--bh-sidebar-padding)] py-[var(--bh-space-md-8)] transition-[padding] duration-[var(--bh-sidebar-motion-duration)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
+        divider && "border-t border-[var(--bh-sidebar-border)]",
+        "group-data-[collapsed=true]/sidebar:p-[var(--bh-space-xs-4)]",
+        "group-data-[size=comfortable]/sidebar:group-data-[collapsed=false]/sidebar:p-[var(--bh-sidebar-comfortable-padding)] group-data-[size=comfortable]/sidebar:group-data-[collapsed=false]/sidebar:pt-[var(--bh-sidebar-comfortable-section-gap)]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/** User switcher used in the footer, with 48px supporting and 40px compact rows. */
+const SidebarFooterUser = React.forwardRef<
+  HTMLButtonElement,
+  SidebarFooterUserProps
+>(function SidebarFooterUser(
+  {
+    "aria-label": ariaLabel,
+    avatar,
+    className,
+    name = "Username",
+    showIdentityPreview = true,
+    supportText = "user@example.com",
+    trailingIcon,
+    type = "button",
+    variant = "supporting-text",
+    ...props
+  },
+  ref
+) {
+  const { collapsed } = useSidebarContext()
+  const card = variant === "card"
+  const supporting = variant === "supporting-text"
+  const showSupport = supporting || card
+  // The card treatment is text-only unless an avatar or trailing icon is passed;
+  // the collapsed rail always keeps a glyph so the control stays visible.
+  const showAvatar =
+    collapsed || (avatar !== false && (!card || (avatar !== undefined && avatar !== null)))
+  const showTrailing =
+    trailingIcon !== false &&
+    (!card || (trailingIcon !== undefined && trailingIcon !== null))
+  const resolvedLabel =
+    ariaLabel ?? (typeof name === "string" ? name : "Open user menu")
+
+  return (
+    <button
+      aria-label={resolvedLabel}
+      data-collapsed={collapsed ? "true" : "false"}
+      data-slot="sidebar-footer-user"
+      data-variant={variant}
+      ref={ref}
+      type={type}
+      className={cn(
+        "group/footer-user relative flex w-full items-center rounded-[var(--bh-radius-lg-8)] text-start outline-none transition-[width,height,gap,padding,border-radius,background-color,border-color,box-shadow] duration-[var(--bh-sidebar-motion-duration)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
+        card
+          ? "gap-[var(--bh-space-xs-4)] bg-[var(--bh-sidebar-user-card-bg)] p-[var(--bh-space-md-8)] hover:bg-[var(--bh-sidebar-user-card-bg-hover)]"
+          : supporting
+            ? "h-[var(--bh-space-8xl-48)] gap-[var(--bh-space-xs-4)] p-[var(--bh-space-sm-6)] hover:bg-[var(--bh-interactive-ghost-hover)]"
+            : "h-[var(--bh-sidebar-item-height-collapsed)] gap-[var(--bh-space-xs-4)] border border-[var(--bh-border-subtle)] bg-[var(--bh-bg-default)] px-[var(--bh-space-sm-6)] py-[var(--bh-space-md-8)] hover:bg-[var(--bh-bg-default-hover)]",
+        "focus-visible:border-[length:var(--bh-border-width-strong)] focus-visible:border-[var(--bh-border-focus)] focus-visible:shadow-[var(--elevation-button-focus)]",
+        collapsed &&
+          "mx-auto size-[var(--bh-sidebar-compact-control-size)] justify-center gap-0 rounded-[var(--bh-radius-full)] border-0 bg-[var(--bh-interactive-ghost-default)] p-0 hover:bg-[var(--bh-interactive-ghost-hover)]",
+        className
+      )}
+      {...props}
+    >
+      <span
+        data-slot="sidebar-footer-user-content"
+        className={cn(
+          "flex min-w-0 flex-1 items-center gap-[var(--bh-space-md-8)] overflow-hidden px-[var(--bh-space-xxs-2)] transition-[width,height,gap,padding] duration-[var(--bh-sidebar-motion-duration)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
+          card && "px-[var(--bh-space-none)]",
+          collapsed && "gap-0 p-0"
+        )}
+      >
+        {showAvatar ? (
+          <span
+            data-slot="sidebar-footer-user-avatar"
+            className={cn(
+              "inline-flex shrink-0 items-center justify-center overflow-hidden rounded-[var(--bh-radius-full)] transition-[width,height,border-radius] duration-[var(--bh-sidebar-motion-duration)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none [&>*]:size-full",
+              supporting || card ? "size-[var(--bh-space-6xl-32)]" : "size-[var(--bh-space-5xl-24)]",
+              collapsed && "size-[var(--bh-sidebar-compact-control-size)]"
+            )}
+          >
+            {avatar === false || avatar === undefined || avatar === null ? (
+              <UserIcon
+                aria-hidden="true"
+                className="size-[var(--bh-sidebar-icon-size)]"
+              />
+            ) : (
+              avatar
+            )}
+          </span>
+        ) : null}
+        <span
+          aria-hidden={collapsed || undefined}
+          data-slot="sidebar-footer-user-text"
+          className={cn(
+            "flex min-w-0 max-w-[var(--bh-sidebar-width)] flex-1 flex-col items-start justify-center overflow-hidden opacity-[var(--bh-opacity-100)] transition-[max-width,opacity] [transition-duration:0ms,var(--bh-sidebar-motion-duration-content)] [transition-delay:0ms,var(--bh-sidebar-motion-delay-content)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none rtl:items-end rtl:text-right",
+            card && "gap-[var(--bh-space-xs-4)]",
+            collapsed &&
+              "pointer-events-none max-w-0 opacity-[var(--bh-opacity-0)] [transition-delay:var(--bh-sidebar-motion-duration-content),0ms]"
+          )}
+        >
+          <span
+            data-slot="sidebar-footer-user-name"
+            dir="auto"
+            className={cn(
+              "w-full truncate",
+              card
+                ? "text-[length:var(--bh-text-body-md-medium-font-size)] font-[var(--bh-text-body-md-medium-font-weight)] leading-[var(--bh-text-body-md-medium-line-height)] tracking-[var(--bh-text-body-md-medium-letter-spacing)] text-[var(--bh-content-default)]"
+                : "text-[length:var(--bh-text-body-sm-medium-font-size)] font-[var(--bh-text-body-sm-medium-font-weight)] leading-[var(--bh-text-body-sm-medium-line-height)] tracking-[var(--bh-text-body-sm-medium-letter-spacing)]"
+            )}
+          >
+            {name}
+          </span>
+          {showSupport ? (
+            <span
+              data-slot="sidebar-footer-user-support"
+              dir="auto"
+              className={cn(
+                "w-full truncate text-[var(--bh-content-subtle)]",
+                card
+                  ? "text-[length:var(--bh-text-body-sm-regular-font-size)] font-[var(--bh-text-body-sm-regular-font-weight)] leading-[var(--bh-text-body-sm-regular-line-height)] tracking-[var(--bh-text-body-sm-regular-letter-spacing)]"
+                  : "text-[length:var(--bh-text-body-2xs-regular-font-size)] font-[var(--bh-text-body-2xs-regular-font-weight)] leading-[var(--bh-text-body-2xs-regular-line-height)] tracking-[var(--bh-text-body-2xs-regular-letter-spacing)]"
+              )}
+            >
+              {supportText}
+            </span>
+          ) : null}
+        </span>
+      </span>
+      {showTrailing ? (
+        <span
+          aria-hidden="true"
+          data-slot="sidebar-footer-user-trailing"
+          className={cn(
+            "inline-flex size-[var(--bh-space-4xl-20)] max-w-[var(--bh-space-4xl-20)] shrink-0 items-center justify-center overflow-hidden text-[var(--bh-content-muted)] opacity-[var(--bh-opacity-100)] transition-[max-width,opacity] [transition-duration:0ms,var(--bh-sidebar-motion-duration-content)] [transition-delay:0ms,var(--bh-sidebar-motion-delay-content)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none [&_svg]:size-[var(--bh-space-3xl-16)]",
+            collapsed &&
+              "pointer-events-none max-w-0 opacity-[var(--bh-opacity-0)] [transition-delay:var(--bh-sidebar-motion-duration-content),0ms]"
+          )}
+        >
+          {trailingIcon ?? <ChevronsUpDownIcon />}
+        </span>
+      ) : null}
+      {collapsed && showIdentityPreview ? (
+        <span
+          aria-hidden="true"
+          data-slot="sidebar-footer-user-preview"
+          className={cn(
+            "pointer-events-none invisible absolute bottom-0 start-[calc(100%+var(--bh-sidebar-user-preview-gap))] z-[var(--bh-z-overlay)] flex h-[var(--bh-sidebar-user-preview-height)] w-[var(--bh-sidebar-user-preview-width)] items-center gap-[var(--bh-space-md-8)] rounded-[var(--bh-radius-xl-10)] border border-[var(--bh-border-subtle)] bg-[var(--bh-bg-raised)] px-[var(--bh-space-xl-12)] py-[var(--bh-space-md-8)] opacity-[var(--bh-opacity-0)] shadow-[var(--elevation-component-default)] transition-[opacity,visibility]",
+            "group-hover/footer-user:visible group-hover/footer-user:opacity-[var(--bh-opacity-100)] group-focus-visible/footer-user:visible group-focus-visible/footer-user:opacity-[var(--bh-opacity-100)] group-data-[state=open]/footer-user:hidden",
+            "group-data-[side=end]/sidebar:start-auto group-data-[side=end]/sidebar:end-[calc(100%+var(--bh-sidebar-user-preview-gap))]"
+          )}
+        >
+          <span className="flex min-w-0 flex-1 flex-col items-start justify-center">
+            <span
+              dir="auto"
+              className="w-full truncate text-[length:var(--bh-text-body-sm-medium-font-size)] font-[var(--bh-text-body-sm-medium-font-weight)] leading-[var(--bh-text-body-sm-medium-line-height)] tracking-[var(--bh-text-body-sm-medium-letter-spacing)] text-[var(--bh-content-default)]"
+            >
+              {name}
+            </span>
+            <span
+              dir="auto"
+              className="w-full truncate text-[length:var(--bh-text-body-xs-regular-font-size)] font-[var(--bh-text-body-xs-regular-font-weight)] leading-[var(--bh-text-body-xs-regular-line-height)] tracking-[var(--bh-text-body-xs-regular-letter-spacing)] text-[var(--bh-content-subtle)]"
+            >
+              {supportText}
+            </span>
+          </span>
+          <span className="inline-flex size-[var(--bh-space-4xl-20)] shrink-0 items-center justify-center text-[var(--bh-content-muted)] [&_svg]:size-[var(--bh-space-3xl-16)]">
+            {trailingIcon ?? <MoreHorizontalIcon />}
+          </span>
+        </span>
+      ) : null}
+    </button>
+  )
+})
+
+/**
+ * A Figma sidebar group: 12px top padding, 6px bottom padding, and no menu gap.
+ * The comfortable size drops the padding (the body's section gap separates groups) and spaces label and rows by 8px.
+ */
+function SidebarGroup({ className, ...props }: SidebarSectionProps) {
+  return (
+    <div
+      data-slot="sidebar-group"
+      className={cn(
+        "flex w-full flex-col items-start pb-[var(--bh-space-sm-6)] pt-[var(--bh-space-xl-12)]",
+        "group-data-[size=comfortable]/sidebar:group-data-[collapsed=false]/sidebar:gap-[var(--bh-sidebar-comfortable-item-gap)] group-data-[size=comfortable]/sidebar:group-data-[collapsed=false]/sidebar:py-[var(--bh-space-none)]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/** Group label that reveals its disclosure and actions on hover or keyboard focus. */
+function SidebarGroupLabel({
+  actions,
+  children,
+  className,
+  expandIcon,
+  expandable = false,
+  ...props
+}: SidebarGroupLabelProps) {
+  const { collapsed } = useSidebarContext()
+
+  return (
+    <div
+      aria-hidden={collapsed || undefined}
+      data-slot="sidebar-group-label-motion"
+      inert={collapsed ? true : undefined}
+      className={cn(
+        "grid w-full grid-rows-[1fr] opacity-[var(--bh-opacity-100)] transition-[grid-template-rows,opacity] duration-[var(--bh-sidebar-motion-duration-content)] delay-[var(--bh-sidebar-motion-delay-content)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
+        collapsed &&
+          "pointer-events-none grid-rows-[0fr] opacity-[var(--bh-opacity-0)] delay-0"
+      )}
+    >
+      <div
+        data-slot="sidebar-group-label"
+        className={cn(
+          "group/label flex min-h-0 h-[var(--bh-space-5xl-24)] w-full items-center gap-[var(--bh-space-xs-4)] overflow-hidden rounded-[var(--bh-radius-lg-8)] px-[var(--bh-space-sm-6)] pb-[var(--bh-space-xs-4)]",
+          "group-data-[size=comfortable]/sidebar:group-data-[collapsed=false]/sidebar:h-[var(--bh-sidebar-comfortable-group-label-height)] group-data-[size=comfortable]/sidebar:group-data-[collapsed=false]/sidebar:px-[var(--bh-space-none)] group-data-[size=comfortable]/sidebar:group-data-[collapsed=false]/sidebar:pb-[var(--bh-space-none)]",
+          className
+        )}
+        {...props}
+      >
+        <span
+          data-slot="sidebar-group-label-content"
+          className="flex min-w-0 flex-1 items-center gap-[var(--bh-space-xxxs-1)]"
+        >
+          <span
+            data-slot="sidebar-group-label-text"
+            dir="auto"
+            className="truncate text-[length:var(--bh-text-body-sm-medium-font-size)] font-[var(--bh-text-body-sm-medium-font-weight)] leading-[var(--bh-text-body-sm-medium-line-height)] tracking-[var(--bh-text-body-sm-medium-letter-spacing)] text-[var(--bh-sidebar-group-label-content)]"
+          >
+            {children}
+          </span>
+          {expandable ? (
+            <span
+              aria-hidden="true"
+              data-slot="sidebar-group-label-expand"
+              className="inline-flex size-[var(--bh-space-3xl-16)] shrink-0 items-center justify-center opacity-[var(--bh-opacity-0)] transition-opacity group-hover/label:opacity-[var(--bh-opacity-100)] group-focus-within/label:opacity-[var(--bh-opacity-100)] [&_svg]:size-full"
+            >
+              {expandIcon ?? <ChevronRightIcon data-rtl-flip="true" />}
+            </span>
+          ) : null}
+        </span>
+        {actions ? (
+          <span
+            data-slot="sidebar-group-label-actions"
+            className="flex shrink-0 items-center gap-[var(--bh-space-xs-4)] opacity-[var(--bh-opacity-0)] transition-opacity group-hover/label:opacity-[var(--bh-opacity-100)] group-focus-within/label:opacity-[var(--bh-opacity-100)]"
+          >
+            {actions}
+          </span>
+        ) : null}
+      </div>
+    </div>
+  )
+}
+
+/** 20px group-label icon slot matching the Default, Hover, and Focus variants. */
+const SidebarGroupAction = React.forwardRef<
+  HTMLButtonElement,
+  SidebarGroupActionProps
+>(function SidebarGroupAction(
+  { "aria-label": ariaLabel, children, className, label, type = "button", ...props },
+  ref
+) {
+  return (
+    <button
+      aria-label={ariaLabel ?? label ?? "Group action"}
+      data-slot="sidebar-group-action"
+      ref={ref}
+      type={type}
+      className={cn(
+        "inline-flex size-[var(--bh-sidebar-icon-slot-size)] items-center justify-center rounded-[var(--bh-control-sm)] border border-transparent bg-[var(--bh-interactive-ghost-default)] text-[var(--bh-content-muted)] outline-none transition-[background-color,border-color,color]",
+        "hover:bg-[var(--bh-interactive-ghost-hover)] hover:text-[var(--bh-content-default)] focus-visible:border-[var(--bh-border-focus)]",
+        "[&_svg]:size-[var(--bh-sidebar-icon-size)] [&_svg]:shrink-0",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  )
+})
+
+/** List wrapper for contiguous 32px sidebar menu rows, or 40px rows 8px apart at the comfortable size. */
+function SidebarMenu({ className, ...props }: SidebarMenuProps) {
+  return (
+    <ul
+      data-slot="sidebar-menu"
+      className={cn(
+        "m-0 flex w-full list-none flex-col p-0",
+        "group-data-[size=comfortable]/sidebar:group-data-[collapsed=false]/sidebar:gap-[var(--bh-sidebar-comfortable-item-gap)]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/** Semantic list item wrapper. */
+function SidebarMenuItem({ className, ...props }: SidebarMenuItemProps) {
+  return (
+    <li
+      data-slot="sidebar-menu-item"
+      className={cn("min-w-0", className)}
+      {...props}
+    />
+  )
+}
+
+/** Native 24px neutral count badge for sidebar rows. */
+function SidebarMenuBadge({ children, className, ...props }: SidebarMenuBadgeProps) {
+  return (
+    <span
+      data-slot="sidebar-menu-badge"
+      className={cn(
+        "inline-flex h-[var(--bh-space-5xl-24)] min-w-[var(--bh-space-5xl-24)] shrink-0 items-center justify-center rounded-[var(--bh-radius-full)] bg-[var(--bh-bg-neutral-subtle)] px-[var(--bh-space-xs-4)] text-center text-[length:var(--bh-text-body-3xs-semibold-font-size)] font-[var(--bh-text-body-3xs-semibold-font-weight)] leading-[var(--bh-text-body-3xs-semibold-line-height)] tracking-[var(--bh-text-body-3xs-semibold-letter-spacing)] text-[var(--bh-content-default)]",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </span>
+  )
+}
+
+/** Default, avatar, Level 2, and Level 2 line menu variants from the Figma set. */
+const SidebarMenuButton = React.forwardRef<
+  HTMLButtonElement,
+  SidebarMenuButtonProps
+>(function SidebarMenuButton(
+  {
+    "aria-label": ariaLabel,
+    active = false,
+    asChild = false,
+    badge,
+    children,
+    className,
+    icon,
+    state = "default",
+    supportText,
+    tooltip,
+    trailingIcon,
+    type = "button",
+    variant = "default",
+    ...props
+  },
+  ref
+) {
+  const { collapsed, dir } = useSidebarContext()
+  const isLevel2 = variant === "level2" || variant === "level2-line"
+  const label = getSlottableLabel(children, asChild)
+  const resolvedLabel =
+    ariaLabel ?? (typeof label === "string" ? label : undefined)
+
+  const content = (
+    <>
+      {isLevel2 ? (
+        <span
+          aria-hidden="true"
+          data-slot="sidebar-menu-indent"
+          className="relative h-full w-[var(--bh-sidebar-level-2-indent-width)] shrink-0"
+        >
+          {variant === "level2-line" ? (
+            <span
+              data-slot="sidebar-menu-guide"
+              className={cn(
+                "absolute start-[var(--bh-space-md-8)]",
+                active
+                  ? "top-1/2 h-[var(--bh-sidebar-active-guide-height)] -translate-y-1/2 border-e-[length:var(--bh-border-width-strong)] border-[var(--bh-bg-brand-default)]"
+                  : "inset-y-0 border-e-[length:var(--bh-border-width-default)] border-[var(--bh-border-subtle)]"
+              )}
+            />
+          ) : null}
+        </span>
+      ) : null}
+
+      {icon ? (
+        <span
+          aria-hidden="true"
+          data-slot="sidebar-menu-icon"
+          className={cn(
+            "inline-flex shrink-0 items-center justify-center overflow-hidden [&>*]:size-full [&_svg]:shrink-0",
+            variant === "avatar"
+              ? "size-[var(--bh-space-4xl-20)] rounded-[var(--bh-radius-md-6)]"
+              : "size-[var(--bh-sidebar-icon-slot-size)] [&_svg]:size-[var(--bh-sidebar-icon-size)]",
+            collapsed && variant === "avatar" &&
+              "size-[var(--bh-space-5xl-24)] rounded-[var(--bh-radius-lg-8)]",
+            collapsed && variant === "default" &&
+              "[&_svg]:size-[var(--bh-sidebar-icon-size-collapsed)]"
+          )}
+        >
+          {icon}
+        </span>
+      ) : null}
+
+      <span
+        aria-hidden={collapsed || undefined}
+        data-slot="sidebar-menu-label"
+        dir="auto"
+        className={cn(
+          "min-w-0 max-w-[var(--bh-sidebar-width)] flex-1 truncate ps-[var(--bh-space-xs-4)] opacity-[var(--bh-opacity-100)] transition-[max-width,opacity,padding] [transition-duration:0ms,var(--bh-sidebar-motion-duration-content),0ms] [transition-delay:0ms,var(--bh-sidebar-motion-delay-content),0ms] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
+          "group-data-[size=comfortable]/sidebar:group-data-[collapsed=false]/sidebar:ps-[var(--bh-sidebar-comfortable-label-padding)]",
+          collapsed &&
+            "pointer-events-none max-w-0 p-0 opacity-[var(--bh-opacity-0)] [transition-delay:var(--bh-sidebar-motion-duration-content),0ms,var(--bh-sidebar-motion-duration-content)]"
+        )}
+      >
+        {label}
+      </span>
+
+      {supportText ? (
+        <span
+          aria-hidden={collapsed || undefined}
+          data-slot="sidebar-menu-support"
+          dir="auto"
+          className={cn(
+            "max-w-[var(--bh-sidebar-width)] shrink-0 overflow-hidden whitespace-nowrap text-[length:var(--bh-text-body-xs-regular-font-size)] font-[var(--bh-text-body-xs-regular-font-weight)] leading-[var(--bh-text-body-xs-regular-line-height)] tracking-[var(--bh-text-body-xs-regular-letter-spacing)] text-[var(--bh-content-muted)] opacity-[var(--bh-opacity-100)] transition-[max-width,opacity] [transition-duration:0ms,var(--bh-sidebar-motion-duration-content)] [transition-delay:0ms,var(--bh-sidebar-motion-delay-content)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
+            collapsed &&
+              "pointer-events-none max-w-0 opacity-[var(--bh-opacity-0)] [transition-delay:var(--bh-sidebar-motion-duration-content),0ms]"
+          )}
+        >
+          {supportText}
+        </span>
+      ) : null}
+
+      {badge ? (
+        <span
+          aria-hidden={collapsed || undefined}
+          data-slot="sidebar-menu-badge-slot"
+          className={cn(
+            "inline-flex max-w-[var(--bh-sidebar-width)] shrink-0 overflow-hidden opacity-[var(--bh-opacity-100)] transition-[max-width,opacity] [transition-duration:0ms,var(--bh-sidebar-motion-duration-content)] [transition-delay:0ms,var(--bh-sidebar-motion-delay-content)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
+            collapsed &&
+              "pointer-events-none max-w-0 opacity-[var(--bh-opacity-0)] [transition-delay:var(--bh-sidebar-motion-duration-content),0ms]"
+          )}
+        >
+          {badge}
+        </span>
+      ) : null}
+
+      {trailingIcon ? (
+        <span
+          aria-hidden="true"
+          data-slot="sidebar-menu-trailing"
+          className={cn(
+            "inline-flex size-[var(--bh-sidebar-icon-slot-size)] max-w-[var(--bh-sidebar-icon-slot-size)] shrink-0 items-center justify-center overflow-hidden text-[var(--bh-content-muted)] opacity-[var(--bh-opacity-100)] transition-[max-width,opacity] [transition-duration:0ms,var(--bh-sidebar-motion-duration-content)] [transition-delay:0ms,var(--bh-sidebar-motion-delay-content)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none [&_svg]:size-[var(--bh-sidebar-icon-size)] [&_svg]:shrink-0",
+            collapsed &&
+              "pointer-events-none max-w-0 opacity-[var(--bh-opacity-0)] [transition-delay:var(--bh-sidebar-motion-duration-content),0ms]"
+          )}
+        >
+          {trailingIcon}
+        </span>
+      ) : null}
+    </>
+  )
+
+  const buttonClassName = cn(
+    "group/menu-button relative flex w-full min-w-0 items-center gap-[var(--bh-space-sm-6)] overflow-hidden rounded-[var(--bh-radius-lg-8)] border-[length:var(--bh-border-width-strong)] border-transparent px-[var(--bh-sidebar-item-padding-x)] text-start text-[length:var(--bh-text-body-sm-regular-font-size)] font-[var(--bh-text-body-sm-regular-font-weight)] leading-[var(--bh-text-body-sm-regular-line-height)] tracking-[var(--bh-text-body-sm-regular-letter-spacing)] text-[var(--bh-sidebar-item-content)] opacity-[var(--bh-opacity-100)] outline-none transition-[width,height,gap,padding,margin,opacity,background-color,border-color,color] duration-[var(--bh-sidebar-motion-duration)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
+    "hover:rounded-[var(--bh-radius-md-6)] hover:bg-[var(--bh-sidebar-item-bg-hover)]",
+    "focus-visible:rounded-[var(--bh-radius-md-6)] focus-visible:border-[var(--bh-border-focus)]",
+    "data-[state=hover]:rounded-[var(--bh-radius-md-6)] data-[state=hover]:bg-[var(--bh-sidebar-item-bg-hover)]",
+    "data-[state=focus]:rounded-[var(--bh-radius-md-6)] data-[state=focus]:border-[var(--bh-border-focus)]",
+    "disabled:pointer-events-none disabled:text-[var(--bh-content-disabled)]",
+    variant === "avatar"
+      ? "h-[var(--bh-sidebar-compact-control-size)]"
+      : "h-[var(--bh-sidebar-item-height)] group-data-[size=comfortable]/sidebar:group-data-[collapsed=false]/sidebar:h-[var(--bh-sidebar-comfortable-item-height)]",
+    "group-data-[size=comfortable]/sidebar:group-data-[collapsed=false]/sidebar:text-[length:var(--bh-text-body-md-regular-font-size)] group-data-[size=comfortable]/sidebar:group-data-[collapsed=false]/sidebar:leading-[var(--bh-text-body-md-regular-line-height)] group-data-[size=comfortable]/sidebar:group-data-[collapsed=false]/sidebar:tracking-[var(--bh-text-body-md-regular-letter-spacing)]",
+    (active || state === "active") &&
+      "rounded-[var(--bh-radius-md-6)] bg-[var(--bh-sidebar-item-bg-active)] font-[var(--bh-text-body-sm-medium-font-weight)] text-[var(--bh-sidebar-item-content-active)]",
+    collapsed && !isLevel2 &&
+      "ms-[var(--bh-space-xs-4)] size-[var(--bh-sidebar-item-height-collapsed)] gap-0 rounded-[var(--bh-radius-lg-8)] px-[var(--bh-space-md-8)] py-0",
+    collapsed && !isLevel2 && variant === "avatar" &&
+      "px-[var(--bh-space-sm-6)]",
+    collapsed && isLevel2 &&
+      "pointer-events-none h-0 w-full gap-0 border-0 p-0 opacity-[var(--bh-opacity-0)]",
+    className
+  )
+
+  const commonProps = {
+    "aria-current": active ? ("page" as const) : undefined,
+    "aria-hidden": collapsed && isLevel2 ? true : undefined,
+    "aria-label": resolvedLabel,
+    "data-active": active ? "true" : "false",
+    "data-collapsed": collapsed ? "true" : "false",
+    "data-slot": "sidebar-menu-button",
+    "data-state": state,
+    "data-variant": variant,
+    inert: collapsed && isLevel2 ? true : undefined,
+    className: buttonClassName,
+  }
+
+  const button = asChild ? (
+    <Slot {...commonProps} ref={ref} {...props}>
+      {cloneSlottableChild(children, content)}
+    </Slot>
+  ) : (
+    <button {...commonProps} ref={ref} type={type} {...props}>
+      {content}
+    </button>
+  )
+
+  const resolvedTooltip = tooltip ?? resolvedLabel
+  if (!resolvedTooltip || isLevel2) return button
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{button}</TooltipTrigger>
+      {collapsed ? (
+        <TooltipContent
+          pointerPosition={dir === "rtl" ? "center-right" : "center-left"}
+          showShortcut={false}
+          side={dir === "rtl" ? "left" : "right"}
+        >
+          {resolvedTooltip}
+        </TooltipContent>
+      ) : null}
+    </Tooltip>
+  )
+})
+
+/** Nested menu list that contracts before the icon rail settles. */
+function SidebarMenuSub({ className, ...props }: SidebarMenuSubProps) {
+  const { collapsed } = useSidebarContext()
+
+  return (
+    <div
+      aria-hidden={collapsed || undefined}
+      data-slot="sidebar-menu-sub-motion"
+      inert={collapsed ? true : undefined}
+      className={cn(
+        "grid w-full grid-rows-[1fr] opacity-[var(--bh-opacity-100)] transition-[grid-template-rows,opacity] duration-[var(--bh-sidebar-motion-duration)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
+        collapsed &&
+          "pointer-events-none grid-rows-[0fr] opacity-[var(--bh-opacity-0)]"
+      )}
+    >
+      <ul
+        data-slot="sidebar-menu-sub"
+        className={cn(
+          "m-0 flex min-h-0 w-full list-none flex-col overflow-hidden p-0",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+/** Level 2 menu row with an optional vertical guide. */
+const SidebarMenuSubButton = React.forwardRef<
+  HTMLButtonElement,
+  SidebarMenuSubButtonProps
+>(function SidebarMenuSubButton({ showLine = false, ...props }, ref) {
+  return (
+    <SidebarMenuButton
+      ref={ref}
+      variant={showLine ? "level2-line" : "level2"}
+      {...props}
+    />
+  )
+})
+
+const treeLevelClasses: Record<NonNullable<SidebarMenuTreeItemProps["level"]>, string> = {
+  1: "ps-[var(--bh-space-sm-6)]",
+  2: "ps-[calc(var(--bh-space-sm-6)+var(--bh-sidebar-tree-indent-step))]",
+  3: "ps-[calc(var(--bh-space-sm-6)+var(--bh-sidebar-tree-indent-step)+var(--bh-sidebar-tree-indent-step))]",
+  4: "ps-[calc(var(--bh-space-sm-6)+var(--bh-sidebar-tree-indent-step)+var(--bh-sidebar-tree-indent-step)+var(--bh-sidebar-tree-indent-step))]",
+}
+
+/** 28px file-tree row with four Figma indentation levels. */
+const SidebarMenuTreeItem = React.forwardRef<
+  HTMLButtonElement,
+  SidebarMenuTreeItemProps
+>(function SidebarMenuTreeItem(
+  {
+    "aria-label": ariaLabel,
+    active = false,
+    asChild = false,
+    children,
+    className,
+    expanded = false,
+    icon,
+    level = 1,
+    showChevron = true,
+    state = "default",
+    type = "button",
+    ...props
+  },
+  ref
+) {
+  const { collapsed } = useSidebarContext()
+
+  const label = getSlottableLabel(children, asChild)
+  const resolvedLabel =
+    ariaLabel ?? (typeof label === "string" ? label : undefined)
+  const content = (
+    <>
+      {showChevron ? (
+        <span
+          aria-hidden="true"
+          data-slot="sidebar-tree-chevron"
+          className="inline-flex size-[var(--bh-space-3xl-16)] shrink-0 items-center justify-center [&_svg]:size-full"
+        >
+          {expanded ? (
+            <ChevronDownIcon />
+          ) : (
+            <ChevronRightIcon data-rtl-flip="true" />
+          )}
+        </span>
+      ) : null}
+      <span
+        aria-hidden="true"
+        data-slot="sidebar-tree-icon"
+        className="inline-flex size-[var(--bh-space-3xl-16)] shrink-0 items-center justify-center [&_svg]:size-full"
+      >
+        {icon ?? <FolderIcon />}
+      </span>
+      <span
+        data-slot="sidebar-tree-label"
+        dir="auto"
+        className="min-w-0 flex-1 truncate"
+      >
+        {label}
+      </span>
+    </>
+  )
+
+  const commonProps = {
+    "aria-current": active ? ("page" as const) : undefined,
+    "aria-expanded": showChevron ? expanded : undefined,
+    "aria-hidden": collapsed || undefined,
+    "aria-label": resolvedLabel,
+    "data-active": active ? "true" : "false",
+    "data-collapsed": collapsed ? "true" : "false",
+    "data-level": String(level),
+    "data-slot": "sidebar-menu-tree-item",
+    "data-state": state,
+    inert: collapsed ? true : undefined,
+    className: cn(
+      "flex h-[var(--bh-sidebar-tree-item-height)] w-full min-w-0 items-center gap-[var(--bh-space-sm-6)] overflow-hidden rounded-[var(--bh-radius-lg-8)] border-[length:var(--bh-border-width-strong)] border-transparent pe-[var(--bh-space-sm-6)] text-start text-[length:var(--bh-text-body-xs-regular-font-size)] font-[var(--bh-text-body-xs-regular-font-weight)] leading-[var(--bh-text-body-xs-regular-line-height)] tracking-[var(--bh-text-body-xs-regular-letter-spacing)] text-[var(--bh-content-subtle)] opacity-[var(--bh-opacity-100)] outline-none transition-[height,gap,padding,opacity,background-color,border-color,color] duration-[var(--bh-sidebar-motion-duration-content)] delay-[var(--bh-sidebar-motion-delay-content)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
+      "hover:rounded-[var(--bh-radius-md-6)] hover:bg-[var(--bh-interactive-ghost-hover)] focus-visible:rounded-[var(--bh-radius-md-6)] focus-visible:border-[var(--bh-border-focus)]",
+      "data-[state=hover]:rounded-[var(--bh-radius-md-6)] data-[state=hover]:bg-[var(--bh-interactive-ghost-hover)] data-[state=focus]:rounded-[var(--bh-radius-md-6)] data-[state=focus]:border-[var(--bh-border-focus)]",
+      (active || state === "active") &&
+        "rounded-[var(--bh-radius-md-6)] bg-[var(--bh-interactive-ghost-active)] font-[var(--bh-text-body-xs-semibold-font-weight)] text-[var(--bh-content-default)]",
+      treeLevelClasses[level],
+      collapsed &&
+        "pointer-events-none h-0 gap-0 border-0 p-0 opacity-[var(--bh-opacity-0)] delay-0",
+      className
+    ),
+  }
+
+  return asChild ? (
+    <Slot {...commonProps} ref={ref} {...props}>
+      {cloneSlottableChild(children, content)}
+    </Slot>
+  ) : (
+    <button {...commonProps} ref={ref} type={type} {...props}>
+      {content}
+    </button>
+  )
+})
+
+/** Labeled tree group used for file-browser and hierarchy sidebars. */
+function SidebarTreeGroup({
+  actions,
+  children,
+  className,
+  expandable = false,
+  expandIcon,
+  label,
+  ...props
+}: SidebarTreeGroupProps) {
+  const { collapsed } = useSidebarContext()
+
+  return (
+    <div
+      aria-hidden={collapsed || undefined}
+      data-slot="sidebar-tree-group-motion"
+      inert={collapsed ? true : undefined}
+      className={cn(
+        "grid w-full grid-rows-[1fr] opacity-[var(--bh-opacity-100)] transition-[grid-template-rows,opacity] duration-[var(--bh-sidebar-motion-duration)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
+        collapsed &&
+          "pointer-events-none grid-rows-[0fr] opacity-[var(--bh-opacity-0)]"
+      )}
+    >
+      <div
+        data-slot="sidebar-tree-group"
+        className={cn(
+          "flex min-h-0 w-full flex-col items-start gap-[var(--bh-space-sm-6)] overflow-hidden pb-[var(--bh-space-sm-6)] pt-[var(--bh-space-xl-12)]",
+          className
+        )}
+        {...props}
+      >
+        {label ? (
+          <SidebarGroupLabel
+            actions={actions}
+            className={cn(
+              expandable &&
+                "[&_[data-slot=sidebar-group-label-expand]]:opacity-[var(--bh-opacity-100)]"
+            )}
+            expandable={expandable}
+            expandIcon={expandIcon ?? (expandable ? <ChevronDownIcon /> : undefined)}
+          >
+            {label}
+          </SidebarGroupLabel>
+        ) : null}
+        <div data-slot="sidebar-tree-menu" className="flex w-full flex-col">
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+/** 28px collapse control with accessible pressed state. */
+const SidebarToggle = React.forwardRef<HTMLButtonElement, SidebarToggleProps>(
+  function SidebarToggle(
+    { children, className, onClick, type = "button", ...props },
+    ref
+  ) {
+    const { collapsed, toggle } = useSidebarContext()
+
+    return (
+      <button
+        aria-label={collapsed ? "Expand sidebar" : "Collapse sidebar"}
+        aria-pressed={collapsed}
+        data-slot="sidebar-toggle"
+        ref={ref}
+        type={type}
+        className={cn(
+          "inline-flex size-[var(--bh-sidebar-header-action-size)] shrink-0 items-center justify-center rounded-[var(--bh-radius-full)] border border-transparent bg-[var(--bh-interactive-ghost-default)] text-[var(--bh-content-default)] outline-none transition-[background-color,border-color,box-shadow,color]",
+          "hover:bg-[var(--bh-interactive-ghost-hover)] focus-visible:border-[var(--bh-border-focus)] focus-visible:shadow-[var(--elevation-button-focus)]",
+          className
+        )}
+        onClick={(event) => {
+          onClick?.(event)
+          if (!event.defaultPrevented) toggle()
+        }}
+        {...props}
+      >
+        <span
+          aria-hidden="true"
+          data-slot="sidebar-toggle-icon"
+          className="inline-flex size-[var(--bh-sidebar-icon-slot-size)] items-center justify-center [&_svg]:size-[var(--bh-sidebar-icon-size)]"
+        >
+          {children ?? (
+            <PanelLeftIcon
+              className="rtl:-scale-x-100"
+              strokeWidth="var(--bh-icon-stroke-200)"
+            />
+          )}
+        </span>
+      </button>
+    )
+  }
+)
+
+const SidebarTrigger = SidebarToggle
+
+/** Edge-hugging pointer target for toggling the sidebar from its border. */
+const SidebarRail = React.forwardRef<HTMLButtonElement, SidebarRailProps>(
+  function SidebarRail({ className, onClick, type = "button", ...props }, ref) {
+    const { toggle } = useSidebarContext()
+
+    return (
+      <button
+        aria-label="Toggle sidebar"
+        data-slot="sidebar-rail"
+        ref={ref}
+        type={type}
+        className={cn(
+          "absolute inset-y-0 end-[calc(var(--bh-sidebar-rail-width)*-1)] hidden w-[var(--bh-sidebar-rail-width)] cursor-ew-resize bg-transparent outline-none lg:block",
+          className
+        )}
+        onClick={(event) => {
+          onClick?.(event)
+          if (!event.defaultPrevented) toggle()
+        }}
+        {...props}
+      />
+    )
+  }
+)
+
+/** Main-content wrapper paired with a sidebar shell. */
+const SidebarInset = React.forwardRef<HTMLDivElement, SidebarInsetProps>(
+  function SidebarInset({ asChild = false, className, ...props }, ref) {
+    const Comp = asChild ? Slot : "div"
+
+    return (
+      <Comp
+        data-slot="sidebar-inset"
+        ref={ref}
+        className={cn("min-w-0 flex-1", className)}
+        {...props}
+      />
+    )
+  }
+)
+
+function getSlottableLabel(children: React.ReactNode, asChild: boolean) {
+  if (!asChild || !React.isValidElement<{ children?: React.ReactNode }>(children)) {
+    return children
+  }
+  return children.props.children
+}
+
+function cloneSlottableChild(children: React.ReactNode, content: React.ReactNode) {
+  if (!React.isValidElement<{ children?: React.ReactNode }>(children)) {
+    throw new Error("Sidebar asChild expects one valid React element")
+  }
+  return React.cloneElement(children, undefined, content)
+}
+
+function useSidebarContext() {
+  const context = React.useContext(SidebarContext)
+  if (!context) {
+    throw new Error("Sidebar components must be used within SidebarProvider")
+  }
+
+  return context
+}
+
+export {
+  Sidebar,
+  SidebarBody,
+  SidebarFooter,
+  SidebarFooterUser,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarHeaderAction,
+  SidebarHeaderBrand,
+  SidebarHeaderWorkspaceSwitch,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuTreeItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarToggle,
+  SidebarTreeGroup,
+  SidebarTrigger,
+}
+export type {
+  SidebarFooterProps,
+  SidebarFooterUserProps,
+  SidebarGroupActionProps,
+  SidebarGroupLabelProps,
+  SidebarHeaderActionProps,
+  SidebarHeaderBrandProps,
+  SidebarHeaderWorkspaceSwitchProps,
+  SidebarInsetProps,
+  SidebarInteractionState,
+  SidebarMenuBadgeProps,
+  SidebarMenuButtonProps,
+  SidebarMenuButtonVariant,
+  SidebarMenuItemProps,
+  SidebarMenuProps,
+  SidebarMenuSubButtonProps,
+  SidebarMenuSubProps,
+  SidebarMenuTreeItemProps,
+  SidebarProps,
+  SidebarProviderProps,
+  SidebarRailProps,
+  SidebarSectionProps,
+  SidebarSize,
+  SidebarToggleProps,
+  SidebarTreeGroupProps,
+  SidebarTriggerProps,
+  SidebarWorkspaceVariant,
+}