@mastra/playground-ui 61.0.0-alpha.6 → 61.0.0

package/dist/components/Sidebar.es.js

@@ -0,0 +1,1615 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { c as cn } from '../cn-65Adrsfj.js';
+import React__default, { forwardRef, useRef, useEffect, useCallback, useId, Fragment as Fragment$1, useState } from 'react';
+import { T as Txt } from '../Txt-CuuPO9Ho.js';
+import { surfaceStateLayerStyle, surfaceGroupStateLayerStyle, overlaySurfaceStyle, frameSurfaceStyle } from '../primitives/raised-surface.es.js';
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
+import { PanelLeftIcon, ChevronRightIcon, ArrowLeftIcon, MenuIcon, MoreHorizontalIcon, Settings2Icon } from 'lucide-react';
+import { K as Kbd } from '../kbd-BDVTQHD_.js';
+import { T as Tooltip, c as TooltipTrigger, a as TooltipContent } from '../tooltip-DsQPiynb.js';
+import { focusRing, controlStateColorTransition } from '../primitives/transitions.es.js';
+import { quietTextHoverInGroup, quietTextHover } from '../primitives/typography.es.js';
+import { S as ScrollArea, a as ScrollAreaViewport } from '../scroll-area-CfoN8Hpp.js';
+import { c as cva } from '../index-Dubp6Qv4.js';
+import { controlHeight } from '../primitives/control-size.es.js';
+import { D as Drawer, d as DrawerContent, c as DrawerClose, o as DrawerTitle, e as DrawerDescription } from '../drawer-BI3B_krl.js';
+import { ResizeHandleIndicator } from '../primitives/resize-handle-indicator.es.js';
+import { z } from 'zod/v4';
+import { D as Dialog, d as DialogContent, g as DialogHeader, j as DialogTitle, e as DialogDescription, a as DialogBody } from '../dialog-DhtPcWY-.js';
+import { S as Select, d as SelectTrigger, e as SelectValue, a as SelectContent, c as SelectItem } from '../select-CWxcmE3F.js';
+import { C as ContextMenu } from '../context-menu-YjTzgOUh.js';
+import { D as DropdownMenu } from '../dropdown-menu-DpEn6HwK.js';
+import { useLocalStorageState } from '../hooks/use-local-storage-state.es.js';
+
+import '../Sidebar.css';function SidebarFooter({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx("footer", { "data-slot": "sidebar-footer", className: cn("mt-auto shrink-0 space-y-1.5 pb-2", className), ...props, children });
+}
+
+const SidebarContext = React__default.createContext(null);
+const MobileDrawerContext = React__default.createContext(null);
+function useMaybeSidebarState() {
+  return React__default.useContext(SidebarContext);
+}
+function useSidebar() {
+  const ctx = React__default.useContext(SidebarContext);
+  const drawer = React__default.useContext(MobileDrawerContext);
+  if (!ctx || !drawer) {
+    throw new Error("useSidebar must be used within a SidebarProvider.");
+  }
+  return { ...ctx, ...drawer };
+}
+function useMaybeSidebar() {
+  const ctx = React__default.useContext(SidebarContext);
+  const drawer = React__default.useContext(MobileDrawerContext);
+  if (!ctx || !drawer) return null;
+  return { ...ctx, ...drawer };
+}
+function useMobileDrawer() {
+  const drawer = React__default.useContext(MobileDrawerContext);
+  if (!drawer) throw new Error("useMobileDrawer must be used within a SidebarProvider.");
+  return drawer;
+}
+
+const SidebarFooterMeta = forwardRef(function SidebarFooterMeta2({ className, children, action, ...props }, ref) {
+  const { state } = useSidebar();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      "data-slot": "sidebar-footer-meta",
+      "data-state": state,
+      className: cn(
+        "grid min-h-10 grid-cols-[minmax(0,1fr)_auto_0fr] items-center border-t border-border px-2 py-1 text-meta text-muted-foreground",
+        "transition-[grid-template-columns] duration-slow ease-out-custom motion-reduce:transition-none",
+        state === "collapsed" && "grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] px-0",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": state === "collapsed",
+            className: cn(
+              "min-w-0 truncate transition-opacity duration-normal ease-out-custom motion-reduce:transition-none",
+              state === "collapsed" && "opacity-0"
+            ),
+            children
+          }
+        ),
+        action,
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true })
+      ]
+    }
+  );
+});
+
+const NOISE = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")`;
+const CARD_HEIGHT = 76;
+const BLOOM_HEIGHT = 100;
+const BLOOM_HOLD_Y = 60;
+const BLOOM_HOLD_X = 22.5;
+const GRAIN_OPACITY = 0.18;
+const GRAIN_SIZE = 110;
+const FALLOFF_RAMP = [0, 0.08, 0.16, 0.25, 0.34, 0.44, 0.55, 0.66, 0.78, 0.89, 1];
+const TONES = {
+  neutral: { colorVar: "--foreground", peak: 0.08, grain: true, text: "text-muted-foreground" },
+  warning: {
+    colorVar: "--warning-indicator",
+    peak: 0.16,
+    grain: false,
+    text: "text-warning-foreground"
+  },
+  danger: {
+    colorVar: "--destructive-indicator",
+    peak: 0.16,
+    grain: false,
+    text: "text-destructive-foreground"
+  }
+};
+function cubicFalloff(position) {
+  const inverse = 1 - position;
+  return inverse * inverse * inverse;
+}
+function easedBloom(colorVar, peak) {
+  const stops = FALLOFF_RAMP.map((position) => {
+    const alpha = (peak * cubicFalloff(position) * 100).toFixed(2);
+    return `color-mix(in oklch, var(${colorVar}) ${alpha}%, transparent) ${(position * 100).toFixed(0)}%`;
+  });
+  return `linear-gradient(to right, ${stops.join(", ")})`;
+}
+function easedMask(direction, hold) {
+  const stops = FALLOFF_RAMP.map((position) => {
+    const offset = (hold + (100 - hold) * position).toFixed(2);
+    return `rgb(0 0 0 / ${cubicFalloff(position).toFixed(3)}) ${offset}%`;
+  });
+  return `linear-gradient(${direction}, rgb(0 0 0 / 1) 0%, ${stops.join(", ")})`;
+}
+const BLOOM_MASK = `${easedMask("to bottom", BLOOM_HOLD_Y)}, ${easedMask("to right", BLOOM_HOLD_X)}`;
+function Bloom({ tone }) {
+  const current = TONES[tone];
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      "data-slot": "sidebar-meter-bloom",
+      className: "pointer-events-none absolute inset-x-0 top-0 -z-10",
+      style: {
+        height: BLOOM_HEIGHT,
+        backgroundImage: easedBloom(current.colorVar, current.peak),
+        maskImage: BLOOM_MASK,
+        maskComposite: "intersect"
+      },
+      children: current.grain ? /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": true,
+          className: "absolute inset-0",
+          style: {
+            backgroundImage: NOISE,
+            backgroundRepeat: "repeat",
+            backgroundSize: `${GRAIN_SIZE}px ${GRAIN_SIZE}px`,
+            opacity: GRAIN_OPACITY
+          }
+        }
+      ) : null
+    }
+  );
+}
+const SidebarMeter = forwardRef(function SidebarMeter2({
+  label,
+  value,
+  status,
+  tone = "neutral",
+  icon,
+  action,
+  href,
+  linkLabel,
+  LinkComponent: LinkProp,
+  state: stateProp,
+  className,
+  ...props
+}, ref) {
+  const ctx = useMaybeSidebarState();
+  const state = stateProp ?? ctx?.state ?? "default";
+  const Link = LinkProp ?? ctx?.LinkComponent ?? "a";
+  const isCollapsed = state === "collapsed";
+  const current = TONES[tone];
+  if (isCollapsed) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        "data-slot": "sidebar-meter",
+        "data-tone": tone,
+        "data-state": state,
+        className: cn(
+          "relative isolate flex items-center justify-center overflow-hidden rounded-lg border border-border bg-background px-1 py-2",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(Bloom, { tone }),
+          href ? /* @__PURE__ */ jsx(Link, { href, className: "absolute inset-0 rounded-lg", "aria-label": linkLabel }) : null,
+          /* @__PURE__ */ jsx(Txt, { as: "span", variant: "meta", tone: "ink", className: "pointer-events-none relative tabular-nums", children: value })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      "data-slot": "sidebar-meter",
+      "data-tone": tone,
+      "data-state": state,
+      className: cn(
+        "relative isolate flex flex-col justify-center overflow-hidden rounded-lg border border-border bg-background px-3",
+        href && surfaceStateLayerStyle,
+        className
+      ),
+      style: { height: CARD_HEIGHT },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(Bloom, { tone }),
+        href ? /* @__PURE__ */ jsx(Link, { href, className: "absolute inset-0 rounded-lg", "aria-label": linkLabel }) : null,
+        /* @__PURE__ */ jsxs("div", { className: "pointer-events-none relative", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+            tone === "neutral" ? null : icon,
+            /* @__PURE__ */ jsx(Txt, { as: "span", variant: "column", tone: "muted", children: label }),
+            action ? /* @__PURE__ */ jsx("span", { className: "pointer-events-auto", children: action }) : null
+          ] }),
+          /* @__PURE__ */ jsx(Txt, { variant: "heading", tone: "ink", className: "mt-0.5 leading-tight tabular-nums", children: value }),
+          status ? /* @__PURE__ */ jsx("div", { className: "mt-1 text-meta", children: /* @__PURE__ */ jsx("p", { className: cn("truncate", current.text), children: status }) }) : null
+        ] })
+      ]
+    }
+  );
+});
+
+function SidebarBrand({ logo, title, className, ...props }) {
+  const { state } = useSidebar();
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "sidebar-brand", className: cn("flex min-w-0 flex-1 items-center gap-2", className), ...props, children: [
+    logo ? /* @__PURE__ */ jsx("span", { className: "shrink-0", children: logo }) : null,
+    state === "collapsed" ? /* @__PURE__ */ jsx(VisuallyHidden, { children: title }) : /* @__PURE__ */ jsx(Txt, { as: "span", variant: "subheading", tone: "ink", className: "truncate font-body tracking-tight", children: title })
+  ] });
+}
+
+const SidebarCommandHeader = forwardRef(function SidebarCommandHeader2({ className, children, ...props }, ref) {
+  const { state, isMobile } = useSidebar();
+  return /* @__PURE__ */ jsx(
+    "header",
+    {
+      ref,
+      "data-slot": "sidebar-command-header",
+      "data-state": state,
+      className: cn(
+        "flex h-header-default shrink-0 items-center gap-1 overflow-hidden",
+        state === "collapsed" ? "px-3" : "pr-2 pl-3.5",
+        state !== "collapsed" && !isMobile && "w-[calc(var(--sidebar-width)-1rem)]",
+        state === "collapsed" && "[&_[data-slot=sidebar-search-trigger]]:hidden",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+});
+
+function SidebarTrigger({ className, onClick, ...props }) {
+  const { desktopState, isMobile, toggleSidebar } = useSidebar();
+  const isCollapsed = desktopState === "collapsed";
+  if (isMobile) return null;
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(
+      TooltipTrigger,
+      {
+        render: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Toggle sidebar",
+            "aria-expanded": !isCollapsed,
+            ...props,
+            onClick: (event) => {
+              onClick?.(event);
+              if (!event.defaultPrevented) toggleSidebar();
+            },
+            className: cn(
+              "flex items-center justify-center rounded-md text-muted-foreground",
+              "size-7",
+              !isCollapsed && "ml-auto",
+              "hover:bg-fill-subtle hover:text-foreground",
+              "transition-colors duration-normal ease-out-custom motion-reduce:transition-none",
+              focusRing,
+              "[&_svg]:size-4 [&_svg]:text-muted-foreground [&:hover_svg]:text-foreground",
+              className
+            ),
+            children: /* @__PURE__ */ jsx(PanelLeftIcon, {})
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+      "Toggle Sidebar",
+      /* @__PURE__ */ jsx(Kbd, { size: "xs", className: "bg-muted text-muted-foreground", children: "[" })
+    ] }) })
+  ] });
+}
+
+const hold = "animate-[sidebar-hold_var(--resize-dur)] motion-reduce:animate-none";
+function SidebarHeader({ className, children, collapsedLogo, actions, ...props }) {
+  const sidebar = useMaybeSidebarState();
+  const collapsed = sidebar?.state === "collapsed";
+  const isMobile = sidebar?.isMobile ?? false;
+  return /* @__PURE__ */ jsxs(
+    "header",
+    {
+      "data-slot": "sidebar-header",
+      className: cn(
+        "flex h-header-default shrink-0 items-center gap-2",
+        collapsed ? "px-1" : "pr-2 pl-3.5",
+        collapsed && actions && "h-auto flex-col gap-3 py-3",
+        !collapsed && !isMobile && "w-[calc(var(--sidebar-width)-1rem)]",
+        className
+      ),
+      ...props,
+      children: [
+        collapsed && collapsedLogo ? /* @__PURE__ */ jsxs("div", { className: "group/collapsed-logo relative ml-0.5 grid size-9 shrink-0 place-items-center", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                hold,
+                "grid place-items-center transition-opacity duration-normal [--sidebar-hold-opacity:1] group-focus-within/collapsed-logo:opacity-0 group-hover/sidebar:opacity-0 motion-reduce:transition-none"
+              ),
+              children: collapsedLogo
+            }
+          ),
+          isMobile ? null : /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                hold,
+                "absolute inset-0 grid place-items-center opacity-0 transition-opacity duration-normal [--sidebar-hold-opacity:0] group-hover/sidebar:opacity-100 focus-within:opacity-100 motion-reduce:transition-none"
+              ),
+              children: /* @__PURE__ */ jsx(SidebarTrigger, {})
+            }
+          )
+        ] }) : children,
+        actions
+      ]
+    }
+  );
+}
+
+const SidebarSearchTrigger = forwardRef(
+  function SidebarSearchTrigger2({ className, children, shortcut, type = "button", ...props }, ref) {
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        "data-slot": "sidebar-search-trigger",
+        type,
+        className: cn(
+          "group inline-flex size-control-md shrink-0 items-center justify-center gap-1.5 rounded-full border border-transparent hover:bg-fill-subtle",
+          quietTextHover,
+          controlStateColorTransition,
+          focusRing,
+          "[&_svg]:size-4 [&_svg]:shrink-0",
+          shortcut && "w-auto px-2",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          shortcut ? /* @__PURE__ */ jsx(Kbd, { size: "xs", className: cn("bg-surface-overlay-soft active:scale-100", quietTextHoverInGroup), children: shortcut }) : null
+        ]
+      }
+    );
+  }
+);
+
+function SidebarNav({ "aria-label": ariaLabel = "Main", children, className, ...props }) {
+  const isMobile = useMaybeSidebarState()?.isMobile ?? false;
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      "aria-label": ariaLabel,
+      className: cn(
+        "-mr-1.5 flex min-h-0 flex-1 flex-col",
+        "[&_[data-slot=scroll-area-scrollbar][data-orientation=vertical]]:w-1 [&_[data-slot=scroll-area-scrollbar][data-orientation=vertical]]:p-0",
+        "focus-within:[&_[data-slot=scroll-area-scrollbar][data-orientation=vertical][data-has-overflow-y]]:opacity-100",
+        isMobile && "[&_a]:min-h-11 [&_a]:touch-manipulation [&_button]:min-h-11 [&_button]:touch-manipulation",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(ScrollArea, { className: "min-h-0 flex-1", mask: { top: "3rem", bottom: "5rem" }, children: /* @__PURE__ */ jsx(ScrollAreaViewport, { className: "px-0.5", children: /* @__PURE__ */ jsx("div", { className: "pr-1.5", children }) }) })
+    }
+  );
+}
+
+function SidebarNavHeader({
+  children,
+  icon,
+  action,
+  className,
+  state: stateProp,
+  href,
+  isActive,
+  LinkComponent: LinkProp,
+  ...props
+}) {
+  const context = useMaybeSidebarState();
+  const state = stateProp ?? context?.state ?? "default";
+  const showTitle = state === "default";
+  const Link = LinkProp ?? context?.LinkComponent ?? "a";
+  const toneClassName = isActive ? "text-foreground" : "text-muted-foreground";
+  return /* @__PURE__ */ jsx("div", { className: cn("flex min-w-0 items-center", showTitle ? "mt-3 min-h-7" : "h-10", className), children: showTitle ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    icon ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn("flex shrink-0 pl-3 [&_svg]:size-4", toneClassName), children: icon }) : null,
+    /* @__PURE__ */ jsx(
+      "header",
+      {
+        ...props,
+        className: cn("max-w-full min-w-0 flex-1 truncate text-column", icon ? "pl-2" : "pl-3", toneClassName),
+        children: href ? /* @__PURE__ */ jsx(
+          Link,
+          {
+            href,
+            className: cn("block min-w-0 truncate transition-colors duration-normal", {
+              "hover:text-foreground": !isActive,
+              "text-foreground": isActive
+            }),
+            children
+          }
+        ) : children
+      }
+    ),
+    action
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsx("header", { ...props, children }) }),
+    /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "mx-3 h-px flex-1 bg-border" }),
+    action ? /* @__PURE__ */ jsx(VisuallyHidden, { children: action }) : null
+  ] }) });
+}
+
+function SidebarNavLabel({ children, className, state: stateProp, ...rest }) {
+  const ctx = useMaybeSidebarState();
+  const state = stateProp ?? ctx?.state ?? "default";
+  if (state === "collapsed") {
+    return /* @__PURE__ */ jsx(VisuallyHidden, { children });
+  }
+  return /* @__PURE__ */ jsx("span", { ...rest, className: cn("min-w-0 flex-1 truncate text-left", className), children });
+}
+
+const navItemVariants = cva("flex min-w-0 cursor-pointer items-center rounded-lg text-label whitespace-nowrap", {
+  variants: {
+    size: {
+      sm: controlHeight.sm,
+      md: controlHeight.md,
+      lg: controlHeight.lg
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+const nestedExpandedItemClasses = (level) => {
+  if (level <= 0) return "gap-2 py-1 px-3";
+  if (level === 1) return `gap-2 py-1 pr-3 pl-8 ${controlHeight.md}`;
+  if (level === 2) return `gap-2 py-1 pr-3 pl-10 ${controlHeight.md}`;
+  return `gap-2 py-1 pr-3 pl-12 ${controlHeight.md}`;
+};
+const idleSurface = cn("rounded-lg text-muted-foreground hover:text-foreground", surfaceStateLayerStyle);
+const activeSurface = "bg-fill text-foreground";
+const featuredSurface = cn(
+  "my-2 border border-transparent bg-brand-green text-black hover:text-black hover:brightness-95"
+);
+const navRowSurfaceClasses = ({ isActive, isFeatured }) => cn(idleSurface, isActive && activeSurface, isFeatured && featuredSurface);
+const navItemLayoutClasses = ({ isCollapsed, level = 0, size }) => cn(
+  navItemVariants({ size }),
+  "w-full justify-start",
+  controlStateColorTransition,
+  "[&_svg]:size-4 [&_svg]:shrink-0",
+  focusRing,
+  !isCollapsed && nestedExpandedItemClasses(level),
+  isCollapsed && "gap-0 px-[13.5px] py-0"
+);
+const navItemClasses = ({ isActive, isCollapsed, isFeatured, level, size } = {}) => cn(navItemLayoutClasses({ isCollapsed, level, size }), navRowSurfaceClasses({ isActive, isFeatured }));
+
+function SidebarNavLink({
+  link,
+  state: stateProp,
+  children,
+  isActive,
+  size,
+  render,
+  action,
+  className,
+  LinkComponent: LinkProp,
+  level: levelProp,
+  subItems,
+  asChild = false,
+  ...props
+}) {
+  if (render && asChild) {
+    throw new Error("SidebarNavLink accepts either `render` or `asChild`, not both.");
+  }
+  const ctx = useMaybeSidebarState();
+  const state = stateProp ?? ctx?.state ?? "default";
+  const Link = LinkProp ?? ctx?.LinkComponent ?? "a";
+  const isCollapsed = state === "collapsed";
+  const isFeatured = link?.variant === "featured";
+  const level = levelProp ?? (link?.indent ? 1 : 0);
+  const rowAction = isCollapsed ? void 0 : action;
+  const itemClassName = rowAction ? cn(navItemLayoutClasses({ level, size }), "flex-1 pr-1") : cn(navItemClasses({ isActive, isCollapsed, isFeatured, level, size }), link?.opensView && !isCollapsed && "pr-1");
+  return /* @__PURE__ */ jsxs("li", { ...props, className: cn("relative flex min-w-0 flex-col", className), children: [
+    /* @__PURE__ */ jsx(NavRowBody, { action: rowAction, surfaceClassName: navRowSurfaceClasses({ isActive, isFeatured }), children: /* @__PURE__ */ jsx(NavRowTooltip, { label: navTooltipLabel(link, isCollapsed), children: navInteractiveRow({ render, asChild, children, link, state, Link, isActive, className: itemClassName }) }) }),
+    !isCollapsed && subItems
+  ] });
+}
+function navInteractiveRow({
+  render,
+  asChild,
+  children,
+  link,
+  state,
+  Link,
+  isActive,
+  className
+}) {
+  const current = isActive ? "page" : void 0;
+  const caret = link?.opensView && state !== "collapsed" ? /* @__PURE__ */ jsx(ChevronRightIcon, { "aria-hidden": "true", className: "!size-3.5" }) : null;
+  if (render || asChild) {
+    const slotted = render ?? children;
+    if (!React__default.isValidElement(slotted)) {
+      throw new Error(
+        "SidebarNavLink requires a valid React element child when `asChild` is true so it can apply `SlottedNavChildProps` and merge `itemClassName`."
+      );
+    }
+    return React__default.cloneElement(slotted, {
+      className: cn(className, slotted.props.className),
+      "aria-current": current,
+      children: /* @__PURE__ */ jsxs(Fragment, { children: [
+        slotted.props.children,
+        caret
+      ] })
+    });
+  }
+  if (!link) return children;
+  const externalParams = /^(https?:)?\/\//.test(link.url) ? { target: "_blank", rel: "noreferrer" } : {};
+  return /* @__PURE__ */ jsxs(Link, { href: link.url, ...externalParams, "aria-current": current, className, children: [
+    link.icon,
+    /* @__PURE__ */ jsx(SidebarNavLabel, { state, children: link.name }),
+    children,
+    caret
+  ] });
+}
+function navTooltipLabel(link, isCollapsed) {
+  if (!link) return void 0;
+  if (link.tooltipMsg) return isCollapsed ? `${link.name} | ${link.tooltipMsg}` : link.tooltipMsg;
+  return isCollapsed ? link.name : void 0;
+}
+function NavRowTooltip({ label, children }) {
+  if (!React__default.isValidElement(children)) return children;
+  return /* @__PURE__ */ jsxs(Tooltip, { disabled: !label, children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { render: children }),
+    label ? /* @__PURE__ */ jsx(TooltipContent, { side: "right", align: "center", sideOffset: 16, children: label }) : null
+  ] });
+}
+function NavRowBody({
+  action,
+  surfaceClassName,
+  children
+}) {
+  if (!action) return children;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 items-center pr-1", surfaceClassName), children: [
+    children,
+    action
+  ] });
+}
+
+function SidebarNavList({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx("ul", { className: cn("grid grid-cols-[minmax(0,1fr)] content-center items-start gap-0.5", className), ...props, children });
+}
+
+function SidebarNavSection({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx("section", { className: cn("relative grid grid-cols-[minmax(0,1fr)] content-center items-start", className), ...props, children });
+}
+
+function SidebarNavSeparator({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "separator",
+      "aria-orientation": "horizontal",
+      className: cn(
+        "relative min-h-5",
+        '[&:after]:absolute [&:after]:inset-x-3 [&:after]:top-1/2 [&:after]:block [&:after]:h-0 [&:after]:border-t [&:after]:border-border [&:after]:content-[""]',
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+const SidebarNavStackContext = React__default.createContext(void 0);
+function useSidebarNavStack() {
+  const context = React__default.useContext(SidebarNavStackContext);
+  if (!context) throw new Error("Sidebar.NavStack components must be used within Sidebar.NavStack.");
+  return context;
+}
+
+function SidebarNavStackRoot({
+  value,
+  rootValue = "root",
+  onValueChange,
+  children,
+  className,
+  ...props
+}) {
+  function closeView(returnFocusRef) {
+    onValueChange(rootValue);
+    requestAnimationFrame(() => {
+      const target = returnFocusRef?.current;
+      if (target && !target.closest("[inert]")) target.focus();
+    });
+  }
+  return /* @__PURE__ */ jsx(SidebarNavStackContext.Provider, { value: { activeValue: value, rootValue, closeView }, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sidebar-nav-stack",
+      "data-value": value,
+      className: cn("relative grid min-w-0 overflow-hidden", className),
+      ...props,
+      children
+    }
+  ) });
+}
+
+function sidebarNavStackPageClasses(active, page, className) {
+  return cn(
+    "col-start-1 row-start-1 min-w-0 transition-[opacity,translate] duration-normal ease-out-custom will-change-[opacity,translate] motion-reduce:transition-none",
+    active && "relative translate-x-0 opacity-100",
+    !active && "pointer-events-none absolute inset-0 opacity-0",
+    !active && page === "root" && "-translate-x-2",
+    !active && page === "view" && "translate-x-2",
+    className
+  );
+}
+
+function SidebarNavStackRootView({ children, className, ...props }) {
+  const { state } = useSidebar();
+  const { activeValue, rootValue } = useSidebarNavStack();
+  const active = state === "collapsed" || activeValue === rootValue;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      "data-slot": "sidebar-nav-stack-root",
+      "aria-hidden": !active,
+      inert: !active,
+      className: sidebarNavStackPageClasses(active, "root", className),
+      children
+    }
+  );
+}
+
+function SidebarNavStackView({
+  value,
+  title,
+  backLabel = "Back to main navigation",
+  returnFocusRef,
+  onBack,
+  children,
+  className,
+  ...props
+}) {
+  const { state } = useSidebar();
+  const { activeValue, closeView } = useSidebarNavStack();
+  const active = state !== "collapsed" && activeValue === value;
+  const backRef = React__default.useRef(null);
+  const wasActiveRef = React__default.useRef(active);
+  React__default.useEffect(() => {
+    if (active && !wasActiveRef.current) backRef.current?.focus();
+    wasActiveRef.current = active;
+  }, [active]);
+  React__default.useEffect(() => {
+    if (!active) return;
+    function handleKeyDown(event) {
+      if (event.key !== "Escape" || event.defaultPrevented) return;
+      event.preventDefault();
+      closeView(returnFocusRef);
+      onBack?.();
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [active, closeView, onBack, returnFocusRef]);
+  function handleBack() {
+    closeView(returnFocusRef);
+    onBack?.();
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...props,
+      "data-slot": "sidebar-nav-stack-view",
+      "data-value": value,
+      "aria-hidden": !active,
+      inert: !active,
+      className: sidebarNavStackPageClasses(active, "view", className),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            ref: backRef,
+            type: "button",
+            "aria-label": `${backLabel}: ${title}`,
+            onClick: handleBack,
+            className: cn(navItemClasses(), "mb-2 grid grid-cols-[2rem_1fr_2rem] px-1"),
+            children: [
+              /* @__PURE__ */ jsx(ArrowLeftIcon, { className: "justify-self-center", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate text-center", children: title }),
+              /* @__PURE__ */ jsx("span", { "aria-hidden": "true" })
+            ]
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+
+const SidebarNavStack = Object.assign(SidebarNavStackRoot, {
+  Root: SidebarNavStackRootView,
+  View: SidebarNavStackView
+});
+
+function SidebarMobileTrigger({
+  className,
+  icon,
+  "aria-label": ariaLabel = "Open navigation menu",
+  onClick,
+  ...props
+}) {
+  const { isMobile, mobileTriggerRef, setOpenMobile } = useSidebar();
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref: mobileTriggerRef,
+      type: "button",
+      "aria-label": ariaLabel,
+      "aria-hidden": !isMobile,
+      tabIndex: isMobile ? 0 : -1,
+      "data-mobile-only": true,
+      ...props,
+      onClick: (event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) setOpenMobile(true);
+      },
+      className: cn(
+        "inline-flex size-10 items-center justify-center rounded-md",
+        // compound selector, not `in-*` — its `:where()` ties with a consumer's later `.inline-flex`
+        "[[data-sidebar-mobile='false']_&]:hidden",
+        "[[data-sidebar-mobile-present='true']_&]:invisible",
+        quietTextHover,
+        "hover:bg-fill-subtle",
+        focusRing,
+        className
+      ),
+      children: icon ?? /* @__PURE__ */ jsx(MenuIcon, { className: "size-5" })
+    }
+  );
+}
+
+const SIDEBAR_STATE_KEY = "sidebar:state";
+const SIDEBAR_WIDTH_KEY = "sidebar:width";
+const SIDEBAR_WIDTH_VAR = "--sidebar-width";
+const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
+const useIsoLayoutEffect = typeof window !== "undefined" ? React__default.useLayoutEffect : React__default.useEffect;
+function SidebarProvider({
+  children,
+  defaultState = "default",
+  defaultWidth = 240,
+  minWidth = 200,
+  maxWidth = 480,
+  collapseBelow,
+  collapsedWidth = 64,
+  disableKeyboardShortcut = true,
+  storageKey,
+  mobileBreakpoint = 1024,
+  mobileWidth = 360,
+  LinkComponent
+}) {
+  const safeMin = Math.max(0, Math.min(minWidth, maxWidth));
+  const safeMax = Math.max(safeMin, maxWidth);
+  const safeCollapsed = Math.max(0, Math.min(collapsedWidth, safeMax));
+  const safeDefault = clamp(defaultWidth, safeMin, safeMax);
+  const safeCollapseBelow = collapseBelow ?? safeMin;
+  const stateStorageKey = storageKey ? `${storageKey}:${SIDEBAR_STATE_KEY}` : SIDEBAR_STATE_KEY;
+  const widthStorageKey = storageKey ? `${storageKey}:${SIDEBAR_WIDTH_KEY}` : SIDEBAR_WIDTH_KEY;
+  const readInitial = () => {
+    if (typeof window === "undefined") return { state: defaultState, width: safeDefault };
+    try {
+      let nextState = defaultState;
+      let nextWidth = safeDefault;
+      const storedState = window.localStorage.getItem(stateStorageKey);
+      if (storedState === "collapsed" || storedState === "default") nextState = storedState;
+      const storedWidth = window.localStorage.getItem(widthStorageKey);
+      if (storedWidth !== null) {
+        const parsed = Number(storedWidth);
+        if (Number.isFinite(parsed)) nextWidth = clamp(parsed, safeMin, safeMax);
+      }
+      return { state: nextState, width: nextWidth };
+    } catch {
+      return { state: defaultState, width: safeDefault };
+    }
+  };
+  const initialRef = React__default.useRef(null);
+  if (initialRef.current === null) initialRef.current = readInitial();
+  const initial = initialRef.current;
+  const [state, setState] = React__default.useState(initial.state);
+  const [width, setWidthState] = React__default.useState(initial.width);
+  const [isMobile, setIsMobile] = React__default.useState(false);
+  const [openMobile, setOpenMobileState] = React__default.useState(false);
+  const [mobileDrawerPresent, setMobileDrawerPresent] = React__default.useState(false);
+  const openMobileRef = React__default.useRef(false);
+  const mobileTriggerRef = React__default.useRef(null);
+  const widthRef = React__default.useRef(initial.width);
+  const stateRef = React__default.useRef(initial.state);
+  stateRef.current = state;
+  const scopeRef = React__default.useRef(null);
+  React__default.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mq = window.matchMedia(`(max-width: ${mobileBreakpoint - 1}px)`);
+    const update = () => setIsMobile(mq.matches);
+    update();
+    mq.addEventListener("change", update);
+    return () => mq.removeEventListener("change", update);
+  }, [mobileBreakpoint]);
+  const setOpenMobile = React__default.useCallback((open) => {
+    openMobileRef.current = open;
+    if (open) setMobileDrawerPresent(true);
+    setOpenMobileState(open);
+  }, []);
+  React__default.useEffect(() => {
+    if (!isMobile && openMobile) {
+      setOpenMobile(false);
+      setMobileDrawerPresent(false);
+    }
+  }, [isMobile, openMobile, setOpenMobile]);
+  const writeCssVar = React__default.useCallback((px) => {
+    const el = scopeRef.current;
+    if (el) el.style.setProperty(SIDEBAR_WIDTH_VAR, `${px}px`);
+  }, []);
+  useIsoLayoutEffect(() => {
+    writeCssVar(state === "collapsed" ? safeCollapsed : widthRef.current);
+  }, [state, safeCollapsed, writeCssVar]);
+  const persistState = React__default.useCallback(
+    (next) => {
+      try {
+        window.localStorage.setItem(stateStorageKey, next);
+      } catch {
+      }
+    },
+    [stateStorageKey]
+  );
+  const toggleSidebar = React__default.useCallback(() => {
+    if (isMobile) {
+      setOpenMobile(!openMobileRef.current);
+      return;
+    }
+    setState((prev) => {
+      const next = prev === "default" ? "collapsed" : "default";
+      stateRef.current = next;
+      persistState(next);
+      return next;
+    });
+  }, [isMobile, persistState, setOpenMobile]);
+  const setWidth = React__default.useCallback(
+    (next) => {
+      const clamped = clamp(next, safeMin, safeMax);
+      widthRef.current = clamped;
+      writeCssVar(clamped);
+    },
+    [safeMin, safeMax, writeCssVar]
+  );
+  const collapse = React__default.useCallback(() => {
+    stateRef.current = "collapsed";
+    persistState("collapsed");
+    setState("collapsed");
+  }, [persistState]);
+  const expand = React__default.useCallback(() => {
+    stateRef.current = "default";
+    persistState("default");
+    setState("default");
+  }, [persistState]);
+  const commit = React__default.useCallback(() => {
+    setWidthState(widthRef.current);
+    try {
+      window.localStorage.setItem(stateStorageKey, stateRef.current);
+      window.localStorage.setItem(widthStorageKey, String(widthRef.current));
+    } catch {
+    }
+  }, [stateStorageKey, widthStorageKey]);
+  const setGestureActive = React__default.useCallback((active) => {
+    const el = scopeRef.current;
+    if (!el) return;
+    if (active) el.setAttribute("data-sidebar-gesture", "active");
+    else el.removeAttribute("data-sidebar-gesture");
+  }, []);
+  React__default.useEffect(() => {
+    if (disableKeyboardShortcut) return;
+    const onKeyDown = (ev) => {
+      if (ev.code !== "KeyB") return;
+      if (!(ev.metaKey || ev.ctrlKey)) return;
+      if (ev.altKey || ev.shiftKey) return;
+      if (ev.target instanceof HTMLElement) {
+        const tag = ev.target.tagName;
+        if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return;
+        if (ev.target.isContentEditable) return;
+      }
+      ev.preventDefault();
+      toggleSidebar();
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [disableKeyboardShortcut, toggleSidebar]);
+  const effectiveState = isMobile ? "default" : state;
+  const contextValue = React__default.useMemo(
+    () => ({
+      state: effectiveState,
+      desktopState: state,
+      width,
+      minWidth: safeMin,
+      maxWidth: safeMax,
+      collapseBelow: safeCollapseBelow,
+      collapsedWidth: safeCollapsed,
+      isMobile,
+      toggleSidebar,
+      setWidth,
+      collapse,
+      expand,
+      commit,
+      setGestureActive,
+      LinkComponent
+    }),
+    [
+      effectiveState,
+      state,
+      width,
+      safeMin,
+      safeMax,
+      safeCollapseBelow,
+      safeCollapsed,
+      isMobile,
+      toggleSidebar,
+      setWidth,
+      collapse,
+      expand,
+      commit,
+      setGestureActive,
+      LinkComponent
+    ]
+  );
+  const drawerValue = React__default.useMemo(
+    () => ({ openMobile, mobileTriggerRef, setOpenMobile, setMobileDrawerPresent }),
+    [openMobile, setOpenMobile]
+  );
+  const scopeStyle = {
+    [SIDEBAR_WIDTH_VAR]: `${initial.state === "collapsed" ? safeCollapsed : initial.width}px`,
+    "--sidebar-width-mobile": `${mobileWidth}px`,
+    display: "contents"
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: scopeRef,
+      "data-sidebar-scope": true,
+      "data-sidebar-state": state,
+      "data-sidebar-mobile": isMobile ? "true" : "false",
+      "data-sidebar-mobile-present": mobileDrawerPresent ? "true" : "false",
+      style: scopeStyle,
+      suppressHydrationWarning: true,
+      children: /* @__PURE__ */ jsx(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(MobileDrawerContext.Provider, { value: drawerValue, children }) })
+    }
+  );
+}
+
+const KEYBOARD_STEP = 10;
+const DRAG_THRESHOLD = 5;
+function SidebarPanel({ children, className, mobileMode = "drawer" }) {
+  const {
+    state,
+    width,
+    minWidth,
+    maxWidth,
+    collapseBelow,
+    collapsedWidth,
+    isMobile,
+    openMobile,
+    mobileTriggerRef,
+    setOpenMobile,
+    setMobileDrawerPresent,
+    setWidth,
+    collapse,
+    expand,
+    commit,
+    toggleSidebar,
+    setGestureActive
+  } = useSidebar();
+  const isCollapsed = state === "collapsed";
+  const isHidden = isCollapsed && collapsedWidth === 0;
+  const draggedRef = useRef(false);
+  const dragCleanupRef = useRef(null);
+  useEffect(() => {
+    return () => {
+      dragCleanupRef.current?.();
+      dragCleanupRef.current = null;
+    };
+  }, []);
+  const onPointerDown = useCallback(
+    (event) => {
+      if (event.button !== 0) return;
+      event.preventDefault();
+      draggedRef.current = false;
+      setGestureActive(true);
+      const startX = event.clientX;
+      const handle = event.currentTarget;
+      const pointerId = event.pointerId;
+      try {
+        handle.setPointerCapture(pointerId);
+      } catch {
+      }
+      const sidebarEl = handle.parentElement;
+      const sidebarLeft = sidebarEl ? sidebarEl.getBoundingClientRect().left : 0;
+      const prevCursor = document.body.style.cursor;
+      const prevUserSelect = document.body.style.userSelect;
+      const onMove = (ev) => {
+        if (ev.pointerId !== pointerId) return;
+        const dx = ev.clientX - startX;
+        if (!draggedRef.current) {
+          if (Math.abs(dx) <= DRAG_THRESHOLD) return;
+          draggedRef.current = true;
+          document.body.style.cursor = "col-resize";
+          document.body.style.userSelect = "none";
+        }
+        const cursorWidth = ev.clientX - sidebarLeft;
+        if (collapseBelow > 0 && cursorWidth < collapseBelow) {
+          collapse();
+          return;
+        }
+        expand();
+        setWidth(cursorWidth);
+      };
+      const cleanup = (ev) => {
+        if (ev && ev.pointerId !== pointerId) return;
+        window.removeEventListener("pointermove", onMove);
+        window.removeEventListener("pointerup", cleanup);
+        window.removeEventListener("pointercancel", cleanup);
+        document.body.style.cursor = prevCursor;
+        document.body.style.userSelect = prevUserSelect;
+        setGestureActive(false);
+        commit();
+        dragCleanupRef.current = null;
+      };
+      dragCleanupRef.current = () => cleanup();
+      window.addEventListener("pointermove", onMove);
+      window.addEventListener("pointerup", cleanup);
+      window.addEventListener("pointercancel", cleanup);
+    },
+    [collapseBelow, setWidth, expand, collapse, commit, setGestureActive]
+  );
+  const onClick = useCallback(() => {
+    if (draggedRef.current) {
+      draggedRef.current = false;
+      return;
+    }
+    toggleSidebar();
+  }, [toggleSidebar]);
+  const onKeyDown = useCallback(
+    (event) => {
+      switch (event.key) {
+        case "Enter":
+        case " ": {
+          event.preventDefault();
+          toggleSidebar();
+          return;
+        }
+        case "ArrowLeft": {
+          event.preventDefault();
+          if (isCollapsed) return;
+          setWidth(width - KEYBOARD_STEP);
+          commit();
+          return;
+        }
+        case "ArrowRight": {
+          event.preventDefault();
+          if (isCollapsed) {
+            expand();
+            commit();
+            return;
+          }
+          setWidth(width + KEYBOARD_STEP);
+          commit();
+          return;
+        }
+        case "Home": {
+          event.preventDefault();
+          expand();
+          setWidth(minWidth);
+          commit();
+          return;
+        }
+        case "End": {
+          event.preventDefault();
+          expand();
+          setWidth(maxWidth);
+          commit();
+          return;
+        }
+      }
+    },
+    [isCollapsed, width, minWidth, maxWidth, setWidth, expand, commit, toggleSidebar]
+  );
+  const closeOnAnchor = useCallback(
+    (event) => {
+      if (!(event.target instanceof Element)) return;
+      const anchor = event.target.closest("a");
+      if (!anchor || !anchor.hasAttribute("href")) return;
+      if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+      if (anchor.target === "_blank" || anchor.hasAttribute("download")) return;
+      setOpenMobile(false);
+    },
+    [setOpenMobile]
+  );
+  if (isMobile) {
+    return /* @__PURE__ */ jsx(
+      Drawer,
+      {
+        side: "left",
+        open: openMobile,
+        onOpenChange: setOpenMobile,
+        onOpenChangeComplete: (open) => {
+          if (!open) setMobileDrawerPresent(false);
+        },
+        children: /* @__PURE__ */ jsxs(
+          DrawerContent,
+          {
+            "data-mobile-mode": mobileMode,
+            finalFocus: mobileTriggerRef,
+            showCloseButton: mobileMode === "drawer",
+            className: cn(
+              "border-0 bg-sidebar text-foreground",
+              mobileMode === "takeover" ? "w-[calc(100%-3.5rem)] max-w-none overflow-visible rounded-l-none rounded-r-3xl pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)]" : "w-3/4 max-w-(--sidebar-width-mobile) overflow-hidden rounded-none",
+              className
+            ),
+            children: [
+              mobileMode === "takeover" ? /* @__PURE__ */ jsx(DrawerClose, { asChild: true, children: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Close",
+                  className: "group absolute top-2 -right-12 z-10 inline-flex size-11 touch-manipulation items-center justify-center transition-opacity duration-fast group-data-[ending-style]/popup:opacity-0 focus-visible:outline-hidden motion-reduce:duration-0",
+                  children: /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: cn(
+                        overlaySurfaceStyle,
+                        quietTextHoverInGroup,
+                        surfaceGroupStateLayerStyle,
+                        "inline-flex size-9 items-center justify-center rounded-full backdrop-blur-sm group-focus-visible:ring-1 group-focus-visible:ring-border-focus"
+                      ),
+                      children: /* @__PURE__ */ jsx(MenuIcon, { className: "size-4" })
+                    }
+                  )
+                }
+              ) }) : null,
+              /* @__PURE__ */ jsx(VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsx(DrawerTitle, { children: "Navigation" }) }),
+              /* @__PURE__ */ jsx(VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsx(DrawerDescription, { children: "Primary site navigation drawer" }) }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  onClick: closeOnAnchor,
+                  className: cn(
+                    "flex h-full min-h-0 flex-col overflow-hidden py-2",
+                    mobileMode === "takeover" ? "px-4" : "px-3"
+                  ),
+                  children
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+  const currentWidth = isCollapsed ? collapsedWidth : width;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "sidebar-layout group/sidebar t-resize relative min-h-0 shrink-0 self-stretch bg-sidebar text-foreground",
+        "w-(--sidebar-width)",
+        "in-data-[sidebar-gesture=active]:transition-none",
+        className,
+        isHidden && "border-r-0 border-transparent"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "flex h-full min-h-0 flex-col overflow-hidden",
+              "transition-opacity duration-200 motion-reduce:transition-none",
+              "px-2",
+              isHidden && "pointer-events-none px-0 opacity-0"
+            ),
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "separator",
+            "aria-orientation": "vertical",
+            "aria-valuenow": isCollapsed ? void 0 : currentWidth,
+            "aria-valuemin": isCollapsed ? void 0 : minWidth,
+            "aria-valuemax": isCollapsed ? void 0 : maxWidth,
+            "aria-valuetext": isCollapsed ? "collapsed" : `${currentWidth} pixels`,
+            "aria-label": `Resize sidebar. Arrow keys to resize, Enter to ${isCollapsed ? "expand" : "collapse"}.`,
+            tabIndex: 0,
+            onPointerDown,
+            onClick,
+            onKeyDown,
+            className: cn(
+              "group absolute top-0 -right-1 z-10 h-full w-2 cursor-col-resize touch-none",
+              "flex items-center justify-center",
+              "focus-visible:outline-hidden"
+            ),
+            children: /* @__PURE__ */ jsx(
+              ResizeHandleIndicator,
+              {
+                className: cn(
+                  "via-foreground/30 group-hover:opacity-100",
+                  "group-focus-visible:via-border-focus group-focus-visible:opacity-100",
+                  "in-data-[sidebar-gesture=active]:via-foreground/45 in-data-[sidebar-gesture=active]:opacity-100"
+                )
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+
+function SidebarRoot({
+  "aria-label": ariaLabel = "Sidebar",
+  mobileMode = "takeover",
+  variant = "default",
+  children,
+  ...props
+}) {
+  const sidebar = useMaybeSidebarState();
+  const isRaised = variant === "raised" && !sidebar?.isMobile;
+  return /* @__PURE__ */ jsx("aside", { "aria-label": ariaLabel, className: "contents", children: /* @__PURE__ */ jsx(SidebarPanel, { mobileMode, ...props, children: isRaised ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sidebar-surface",
+      className: cn(
+        "my-2 -mr-2 -ml-4 flex min-h-0 flex-1 flex-col overflow-hidden rounded-r-xl py-1.5",
+        sidebar?.state === "collapsed" ? "pr-2 pl-4" : "pr-3.5 pl-5.5",
+        frameSurfaceStyle
+      ),
+      children
+    }
+  ) : children }) });
+}
+
+const sidebarLinkPlacements = ["sidebar", "more", "hidden"];
+const sidebarLinkPlacementLabels = {
+  sidebar: "Always show",
+  more: "Hide in More menu",
+  hidden: "Never show"
+};
+const placementsSchema = z.record(z.string(), z.enum(sidebarLinkPlacements));
+const defaultVisibilityStorageKey = "mastra:sidebar:link-visibility";
+function getSidebarLinkKey(link) {
+  return `${link.url}:${link.name}`;
+}
+function getSidebarVisibilityKey(sectionKey, link) {
+  return `${sectionKey}:${link.name}`;
+}
+function getDefaultPlacement(link, optionalLinkCount) {
+  const visible = link.defaultVisible ?? optionalLinkCount < 2;
+  return visible ? "sidebar" : "more";
+}
+function isSidebarLinkPlacement(value) {
+  return sidebarLinkPlacements.some((placement) => placement === value);
+}
+
+function SidebarCustomizeDialog({
+  open,
+  onOpenChange,
+  returnFocusRef,
+  sections,
+  placementOf,
+  onPlacementChange
+}) {
+  const baseId = useId();
+  const customizableSections = sections.filter((section) => (section.moreLinks?.length ?? 0) > 0);
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { size: "md", finalFocus: returnFocusRef, children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: "Customize sidebar" }),
+      /* @__PURE__ */ jsx(DialogDescription, { children: "Choose where each optional link appears. Changes save automatically in this browser." })
+    ] }),
+    /* @__PURE__ */ jsx(DialogBody, { className: "space-y-5", children: customizableSections.map((section) => {
+      const links = section.moreLinks ?? [];
+      const headingId = section.title ? `${baseId}-${section.key}` : void 0;
+      return /* @__PURE__ */ jsxs(
+        "section",
+        {
+          "aria-labelledby": headingId,
+          "aria-label": headingId ? void 0 : section.key,
+          className: "space-y-2",
+          children: [
+            section.title ? /* @__PURE__ */ jsx(Txt, { as: "h3", id: headingId, variant: "label", tone: "muted", children: section.title }) : null,
+            /* @__PURE__ */ jsx("ul", { className: "divide-y divide-border rounded-lg border border-border", children: links.map((link) => /* @__PURE__ */ jsxs("li", { className: "flex min-h-11 items-center gap-2.5 py-1.5 pr-1.5 pl-3", children: [
+              /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "flex shrink-0 text-muted-foreground [&_svg]:size-4", children: link.icon }),
+              /* @__PURE__ */ jsx(Txt, { as: "span", variant: "body-sm", className: "min-w-0 flex-1 truncate", children: link.name }),
+              /* @__PURE__ */ jsxs(
+                Select,
+                {
+                  value: placementOf(section.key, link, links.length),
+                  onValueChange: (placement) => {
+                    if (isSidebarLinkPlacement(placement)) onPlacementChange(section.key, link, placement);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      SelectTrigger,
+                      {
+                        size: "sm",
+                        variant: "ghost",
+                        className: "w-44 shrink-0",
+                        "aria-label": `${link.name} placement`,
+                        children: /* @__PURE__ */ jsx(SelectValue, {})
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(SelectContent, { children: sidebarLinkPlacements.map((placement) => /* @__PURE__ */ jsx(SelectItem, { value: placement, children: sidebarLinkPlacementLabels[placement] }, placement)) })
+                  ]
+                }
+              )
+            ] }, getSidebarLinkKey(link))) })
+          ]
+        },
+        section.key
+      );
+    }) })
+  ] }) });
+}
+
+function SidebarSectionLink({ link, activeCandidates, level = 0, isActive, ...props }) {
+  const childLinks = link.children ?? [];
+  return /* @__PURE__ */ jsx(
+    SidebarNavLink,
+    {
+      ...props,
+      link,
+      isActive: isActive?.(link, activeCandidates) ?? link.isActive,
+      level,
+      subItems: childLinks.length > 0 ? /* @__PURE__ */ jsx(SidebarNavList, { className: "mt-0.5", children: childLinks.map((child) => /* @__PURE__ */ jsx(
+        SidebarSectionLink,
+        {
+          link: child,
+          activeCandidates,
+          level: level + 1,
+          isActive
+        },
+        getSidebarLinkKey(child)
+      )) }) : null
+    }
+  );
+}
+
+function SidebarOptionalLink({
+  link,
+  activeCandidates,
+  isActive,
+  placement,
+  onPlacementChange,
+  onCustomize
+}) {
+  const itemRef = useRef(null);
+  return /* @__PURE__ */ jsxs(ContextMenu, { children: [
+    /* @__PURE__ */ jsx(
+      ContextMenu.Trigger,
+      {
+        ref: (node) => {
+          itemRef.current = node;
+        },
+        render: /* @__PURE__ */ jsx(SidebarSectionLink, { link, activeCandidates, isActive })
+      }
+    ),
+    /* @__PURE__ */ jsxs(ContextMenu.Content, { "aria-label": `${link.name} options`, children: [
+      /* @__PURE__ */ jsx(
+        ContextMenu.RadioGroup,
+        {
+          value: placement,
+          onValueChange: (value) => {
+            if (isSidebarLinkPlacement(value)) onPlacementChange(value);
+          },
+          children: sidebarLinkPlacements.map((option) => /* @__PURE__ */ jsx(ContextMenu.RadioItem, { value: option, children: sidebarLinkPlacementLabels[option] }, option))
+        }
+      ),
+      /* @__PURE__ */ jsx(ContextMenu.Separator, {}),
+      /* @__PURE__ */ jsx(ContextMenu.Item, { onClick: () => onCustomize(itemRef.current?.querySelector("a") ?? null), children: "Customize sidebar…" })
+    ] })
+  ] });
+}
+
+function SidebarMoreLinks({
+  links,
+  activeCandidates,
+  isActive,
+  placementOf,
+  onPlacementChange,
+  onCustomize
+}) {
+  const context = useMaybeSidebarState();
+  const Link = context?.LinkComponent ?? "a";
+  const linkIsActive = (link) => isActive?.(link, activeCandidates) ?? link.isActive ?? false;
+  const shownLinks = links.filter((link) => linkIsActive(link) || placementOf(link) === "sidebar");
+  const moreMenuLinks = links.filter((link) => !shownLinks.includes(link) && placementOf(link) === "more");
+  const isCustomized = links.some((link) => placementOf(link) !== getDefaultPlacement(link, links.length));
+  const hasMoreRow = links.length > 1 || moreMenuLinks.length > 0 || isCustomized;
+  const moreTriggerRef = useRef(null);
+  function renderMenuLink(link, nested = false) {
+    return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      /* @__PURE__ */ jsxs(
+        DropdownMenu.Item,
+        {
+          nativeButton: false,
+          inset: nested,
+          render: /* @__PURE__ */ jsx(
+            Link,
+            {
+              href: link.url,
+              .../^(https?:)?\/\//.test(link.url) ? { target: "_blank", rel: "noreferrer" } : {}
+            }
+          ),
+          "aria-current": linkIsActive(link) ? "page" : void 0,
+          children: [
+            link.icon,
+            link.name
+          ]
+        }
+      ),
+      link.children?.map((child) => renderMenuLink(child, true))
+    ] }, getSidebarLinkKey(link));
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    shownLinks.map((link) => /* @__PURE__ */ jsx(
+      SidebarOptionalLink,
+      {
+        link,
+        activeCandidates,
+        isActive,
+        placement: placementOf(link),
+        onPlacementChange: (placement) => onPlacementChange(link, placement),
+        onCustomize: (returnFocusTo) => onCustomize(returnFocusTo, () => moreTriggerRef.current)
+      },
+      getSidebarLinkKey(link)
+    )),
+    hasMoreRow ? /* @__PURE__ */ jsxs(DropdownMenu, { modal: false, children: [
+      /* @__PURE__ */ jsx(
+        SidebarNavLink,
+        {
+          link: { name: "More", url: "", icon: /* @__PURE__ */ jsx(MoreHorizontalIcon, {}) },
+          render: /* @__PURE__ */ jsxs(DropdownMenu.Trigger, { ref: moreTriggerRef, render: /* @__PURE__ */ jsx("button", { type: "button" }), "aria-label": "More", children: [
+            /* @__PURE__ */ jsx(MoreHorizontalIcon, { "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx(SidebarNavLabel, { children: "More" })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsxs(DropdownMenu.Content, { align: "start", "aria-label": "More navigation", className: "min-w-44", children: [
+        moreMenuLinks.map((link) => renderMenuLink(link)),
+        moreMenuLinks.length > 0 && /* @__PURE__ */ jsx(DropdownMenu.Separator, {}),
+        /* @__PURE__ */ jsxs(DropdownMenu.Item, { onClick: () => onCustomize(moreTriggerRef.current, () => moreTriggerRef.current), children: [
+          /* @__PURE__ */ jsx(Settings2Icon, {}),
+          "Customize sidebar"
+        ] })
+      ] })
+    ] }) : null
+  ] });
+}
+
+function SidebarSectionsContent({
+  sections,
+  isActive,
+  className,
+  visibilityStorageKey
+}) {
+  const baseId = useId();
+  const [customizeOpen, setCustomizeOpen] = useState(false);
+  const customizeReturnFocusRef = useRef(null);
+  const getCustomizeFallbackRef = useRef(() => null);
+  const [placements, setPlacements] = useLocalStorageState({
+    initialKey: visibilityStorageKey,
+    defaultValue: {},
+    schema: placementsSchema
+  });
+  function placementOf(sectionKey, link, optionalLinkCount) {
+    return placements[getSidebarVisibilityKey(sectionKey, link)] ?? getDefaultPlacement(link, optionalLinkCount);
+  }
+  function openCustomize(returnFocusTo, getMoreTrigger) {
+    customizeReturnFocusRef.current = returnFocusTo;
+    getCustomizeFallbackRef.current = getMoreTrigger;
+    setCustomizeOpen(true);
+  }
+  function changeCustomizeOpen(open) {
+    if (!open && !customizeReturnFocusRef.current?.isConnected) {
+      customizeReturnFocusRef.current = getCustomizeFallbackRef.current();
+    }
+    setCustomizeOpen(open);
+  }
+  function changePlacement(sectionKey, link, placement) {
+    setPlacements((current) => ({ ...current, [getSidebarVisibilityKey(sectionKey, link)]: placement }));
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    sections.map((section) => {
+      const showSeparator = section.links.length > 0 && section.separator;
+      const headerId = section.title ? `${baseId}-${section.key}` : void 0;
+      const moreLinks = section.moreLinks ?? [];
+      const activeCandidates = [...section.links, ...moreLinks];
+      return /* @__PURE__ */ jsxs(
+        SidebarNavSection,
+        {
+          className,
+          "aria-labelledby": headerId,
+          "aria-label": !headerId ? section.key : void 0,
+          children: [
+            showSeparator ? /* @__PURE__ */ jsx(SidebarNavSeparator, { className: "[&:after]:border-border" }) : null,
+            section.title ? /* @__PURE__ */ jsx(SidebarNavHeader, { id: headerId, href: section.href, isActive: section.isHeaderActive, children: section.title }) : null,
+            /* @__PURE__ */ jsxs(SidebarNavList, { children: [
+              section.links.map((link) => /* @__PURE__ */ jsx(
+                SidebarSectionLink,
+                {
+                  link,
+                  activeCandidates,
+                  isActive
+                },
+                getSidebarLinkKey(link)
+              )),
+              moreLinks.length > 0 ? /* @__PURE__ */ jsx(
+                SidebarMoreLinks,
+                {
+                  links: moreLinks,
+                  activeCandidates,
+                  isActive,
+                  placementOf: (link) => placementOf(section.key, link, moreLinks.length),
+                  onPlacementChange: (link, placement) => changePlacement(section.key, link, placement),
+                  onCustomize: openCustomize
+                }
+              ) : null
+            ] })
+          ]
+        },
+        section.key
+      );
+    }),
+    /* @__PURE__ */ jsx(
+      SidebarCustomizeDialog,
+      {
+        open: customizeOpen,
+        onOpenChange: changeCustomizeOpen,
+        returnFocusRef: customizeReturnFocusRef,
+        sections,
+        placementOf,
+        onPlacementChange: changePlacement
+      }
+    )
+  ] });
+}
+
+function SidebarSections({
+  visibilityStorageKey = defaultVisibilityStorageKey,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(SidebarSectionsContent, { ...props, visibilityStorageKey }, visibilityStorageKey);
+}
+
+const Sidebar = Object.assign(SidebarRoot, {
+  Brand: SidebarBrand,
+  CommandHeader: SidebarCommandHeader,
+  Footer: SidebarFooter,
+  FooterMeta: SidebarFooterMeta,
+  Header: SidebarHeader,
+  Meter: SidebarMeter,
+  MobileTrigger: SidebarMobileTrigger,
+  Nav: SidebarNav,
+  NavHeader: SidebarNavHeader,
+  NavLabel: SidebarNavLabel,
+  NavLink: SidebarNavLink,
+  NavList: SidebarNavList,
+  NavSection: SidebarNavSection,
+  NavSeparator: SidebarNavSeparator,
+  NavStack: SidebarNavStack,
+  Provider: SidebarProvider,
+  SearchTrigger: SidebarSearchTrigger,
+  Sections: SidebarSections,
+  Trigger: SidebarTrigger
+});
+
+function getIsLinkActive(link, pathname, siblings = []) {
+  const matches = (url) => pathname === url || pathname.startsWith(url + "/");
+  const flattenLinks = (links) => links.flatMap((item) => [item, ...flattenLinks(item.children ?? [])]);
+  if (!matches(link.url)) return false;
+  const competingLinks = [...flattenLinks(link.children ?? []), ...flattenLinks(siblings)];
+  return !competingLinks.some(
+    (other) => other.url !== link.url && other.url.length > link.url.length && matches(other.url)
+  );
+}
+
+export { Sidebar, SidebarBrand, SidebarCommandHeader, SidebarFooter, SidebarFooterMeta, SidebarHeader, SidebarMeter, SidebarMobileTrigger, SidebarNav, SidebarNavHeader, SidebarNavLink, SidebarNavStack, SidebarProvider, SidebarRoot, SidebarSearchTrigger, SidebarSections, SidebarTrigger, getIsLinkActive, navItemClasses, useMaybeSidebar, useMaybeSidebarState, useMobileDrawer, useSidebar };
+//# sourceMappingURL=Sidebar.es.js.map