@mastra/playground-ui 55.0.0 → 56.0.0-alpha.5

package/dist/main-sidebar-CbjWru0s.js

@@ -0,0 +1,830 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { c as cn } from './cn-Dxjsbr9n.js';
+import { MenuIcon, PanelRightIcon } from 'lucide-react';
+import React__default, { useRef, useEffect, useCallback, useId } from 'react';
+import { S as ScrollArea } from './scroll-area-DmygE5DR.js';
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
+import { c as cva } from './index-BXfwV6wk.js';
+import { T as Tooltip, c as TooltipTrigger, a as TooltipContent } from './tooltip-D1PLTHDf.js';
+import { D as Drawer, d as DrawerContent, o as DrawerTitle, e as DrawerDescription } from './drawer-B2GbH_X2.js';
+import { ResizeHandleIndicator } from './primitives/resize-handle-indicator.es.js';
+import { K as Kbd } from './kbd-DB7Dmf_Y.js';
+
+function MainSidebarBottom({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("mt-auto", className), ...props, children });
+}
+
+const MainSidebarContext = React__default.createContext(null);
+const MobileDrawerContext = React__default.createContext(null);
+function useMaybeSidebarState() {
+  return React__default.useContext(MainSidebarContext);
+}
+function useMainSidebar() {
+  const ctx = React__default.useContext(MainSidebarContext);
+  const drawer = React__default.useContext(MobileDrawerContext);
+  if (!ctx || !drawer) {
+    throw new Error("useMainSidebar must be used within a MainSidebarProvider.");
+  }
+  return { ...ctx, ...drawer };
+}
+function useMaybeSidebar() {
+  const ctx = React__default.useContext(MainSidebarContext);
+  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 MainSidebarProvider.");
+  return drawer;
+}
+
+function MainSidebarMobileTrigger({
+  className,
+  icon,
+  "aria-label": ariaLabel = "Open navigation menu",
+  onClick,
+  ...props
+}) {
+  const { isMobile, setOpenMobile } = useMainSidebar();
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      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(
+        "new-theme 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",
+        "text-muted-foreground hover:bg-sidebar-accent hover:text-foreground",
+        "focus-visible:ring-1 focus-visible:ring-accent1 focus-visible:outline-hidden",
+        className
+      ),
+      children: icon ?? /* @__PURE__ */ jsx(MenuIcon, { className: "size-5" })
+    }
+  );
+}
+
+function MainSidebarNav({
+  "aria-label": ariaLabel = "Main",
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("nav", { "aria-label": ariaLabel, className: cn("flex min-h-0 flex-1 flex-col", className), ...props, children: /* @__PURE__ */ jsx(ScrollArea, { className: "min-h-0 flex-1", viewPortClassName: "px-0.5", children }) });
+}
+
+function MainSidebarNavHeader({
+  children,
+  className,
+  state: stateProp,
+  href,
+  isActive,
+  LinkComponent: LinkProp,
+  ...props
+}) {
+  const ctx = useMaybeSidebarState();
+  const state = stateProp ?? ctx?.state ?? "default";
+  const isMobile = ctx?.isMobile ?? false;
+  const Link = LinkProp ?? ctx?.LinkComponent ?? "a";
+  const showTitle = state === "default" && !isMobile;
+  return /* @__PURE__ */ jsx("div", { className: cn("mt-2 mb-0.5 flex min-h-8 min-w-0 items-center", className), children: showTitle ? /* @__PURE__ */ jsx(
+    "header",
+    {
+      ...props,
+      className: cn("max-w-full min-w-0 truncate pl-3 text-ui-sm font-medium", {
+        "text-foreground": isActive,
+        "text-muted-foreground/70": !isActive
+      }),
+      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
+    }
+  ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsx("header", { ...props, children }) }),
+    /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "bg-border mx-3 h-px flex-1" })
+  ] }) });
+}
+
+function MainSidebarNavLabel({ 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 font-[450]", className), children });
+}
+
+const navItemVariants = cva("flex min-w-0 cursor-pointer items-center rounded-lg whitespace-nowrap", {
+  variants: {
+    size: {
+      default: "h-8 text-ui-md",
+      sm: "h-7 text-ui-sm",
+      lg: "h-9 text-ui-md"
+    }
+  },
+  defaultVariants: {
+    size: "sm"
+  }
+});
+const nestedExpandedItemClasses = (level) => {
+  if (level <= 0) return "w-full gap-2 py-1 px-3 justify-start";
+  if (level === 1) return "w-full gap-2 py-1 pr-3 pl-8 justify-start text-ui-sm h-8";
+  if (level === 2) return "w-full gap-2 py-1 pr-3 pl-10 justify-start text-ui-sm h-8";
+  return "w-full gap-2 py-1 pr-3 pl-12 justify-start text-ui-sm h-8";
+};
+const idleSurface = cn(
+  "rounded-lg text-muted-foreground [&_svg]:text-muted-foreground/70",
+  "hover:bg-sidebar-accent hover:text-foreground [&:hover_svg]:text-foreground"
+);
+const activeSurface = "bg-selected text-foreground hover:bg-selected hover:text-foreground [&_svg]:text-foreground [&:hover_svg]:text-foreground";
+const featuredSurface = cn(
+  "my-2 border border-accent1/30 bg-accent1Dark text-accent1 hover:bg-accent1Darker hover:text-accent1",
+  "dark:border-transparent dark:bg-accent1 dark:text-black dark:hover:bg-accent1/90 dark:hover:text-black",
+  "[&_svg]:text-accent1 dark:[&_svg]:text-black/75 [&:hover_svg]:text-accent1 dark:[&:hover_svg]:text-black"
+);
+const navRowSurfaceClasses = ({ isActive, isFeatured }) => cn(idleSurface, isActive && activeSurface, isFeatured && featuredSurface);
+const navItemLayoutClasses = ({ isCollapsed, level = 0, size }) => cn(
+  navItemVariants({ size }),
+  "transition-all duration-normal ease-out-custom motion-reduce:transition-none",
+  "[&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:transition-colors [&_svg]:duration-normal motion-reduce:[&_svg]:transition-none",
+  "focus-visible:shadow-focus-ring focus-visible:ring-1 focus-visible:ring-accent1 focus-visible:outline-hidden",
+  !isCollapsed && nestedExpandedItemClasses(level),
+  isCollapsed && "w-full justify-center p-0"
+);
+const navItemClasses = ({ isActive, isCollapsed, isFeatured, level, size } = {}) => cn(
+  navItemLayoutClasses({ isCollapsed, level, size }),
+  navRowSurfaceClasses({ isActive, isFeatured }),
+  isCollapsed && !isActive && "[&_svg]:text-muted-foreground"
+);
+
+function MainSidebarNavLink({
+  link,
+  state: stateProp,
+  children,
+  isActive,
+  size,
+  render,
+  action,
+  className,
+  LinkComponent: LinkProp,
+  level: levelProp,
+  subItems,
+  asChild = false,
+  ...props
+}) {
+  if (render && asChild) {
+    throw new Error("MainSidebarNavLink 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") : navItemClasses({ isActive, isCollapsed, isFeatured, level, size });
+  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, className: itemClassName }) }) }),
+    !isCollapsed && subItems
+  ] });
+}
+function navInteractiveRow({
+  render,
+  asChild,
+  children,
+  link,
+  state,
+  Link,
+  className
+}) {
+  if (render) return React__default.cloneElement(render, { className: cn(className, render.props.className) });
+  if (asChild) {
+    if (!React__default.isValidElement(children)) {
+      throw new Error(
+        "MainSidebarNavLink requires a valid React element child when `asChild` is true so it can apply `SlottedNavChildProps` and merge `itemClassName`."
+      );
+    }
+    return React__default.cloneElement(children, { className: cn(className, children.props.className) });
+  }
+  if (!link) return children;
+  const externalParams = /^(https?:)?\/\//.test(link.url) ? { target: "_blank", rel: "noreferrer" } : {};
+  return /* @__PURE__ */ jsxs(Link, { href: link.url, ...externalParams, className, children: [
+    link.icon,
+    /* @__PURE__ */ jsx(MainSidebarNavLabel, { state, children: link.name }),
+    children
+  ] });
+}
+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 (!label || !React__default.isValidElement(children)) return children;
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { render: children }),
+    /* @__PURE__ */ jsx(TooltipContent, { side: "right", align: "center", sideOffset: 16, children: label })
+  ] });
+}
+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 MainSidebarNavList({ 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 MainSidebarNavSection({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx("section", { className: cn("relative grid grid-cols-[minmax(0,1fr)] content-center items-start", className), ...props, children });
+}
+
+function MainSidebarNavSeparator({ 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 KEYBOARD_STEP = 10;
+const DRAG_THRESHOLD = 5;
+function MainSidebarRoot({ children, className }) {
+  const {
+    state,
+    width,
+    minWidth,
+    maxWidth,
+    collapseBelow,
+    collapsedWidth,
+    isMobile,
+    openMobile,
+    setOpenMobile,
+    setWidth,
+    collapse,
+    expand,
+    commit,
+    toggleSidebar,
+    setGestureActive
+  } = useMainSidebar();
+  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) => {
+      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, children: /* @__PURE__ */ jsxs(
+      DrawerContent,
+      {
+        className: cn(
+          "new-theme w-3/4 max-w-(--sidebar-width-mobile) overflow-hidden rounded-none border-0 bg-sidebar text-foreground shadow-xl",
+          className
+        ),
+        children: [
+          /* @__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: "flex h-full min-h-0 flex-col overflow-hidden px-3 py-2", children })
+        ]
+      }
+    ) });
+  }
+  const currentWidth = isCollapsed ? collapsedWidth : width;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "new-theme sidebar-layout group/sidebar relative min-h-0 shrink-0 self-stretch bg-sidebar text-foreground",
+        "w-(--sidebar-width)",
+        "transition-[width] duration-220 ease-[cubic-bezier(0.32,0.72,0,1)]",
+        "motion-reduce:transition-none",
+        "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/25 group-hover:opacity-100",
+                  "group-focus-visible:via-accent1 group-focus-visible:opacity-100",
+                  "in-data-[sidebar-gesture=active]:via-foreground/45 in-data-[sidebar-gesture=active]:opacity-100"
+                )
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+
+function getLinkKey(link) {
+  return `${link.url}:${link.name}`;
+}
+function MainSidebarSectionLink({ link, activeCandidates, level = 0, isActive }) {
+  const childLinks = link.children ?? [];
+  return /* @__PURE__ */ jsx(
+    MainSidebarNavLink,
+    {
+      link,
+      isActive: isActive?.(link, activeCandidates) ?? link.isActive,
+      level,
+      subItems: childLinks.length > 0 ? /* @__PURE__ */ jsx(MainSidebarNavList, { className: "mt-0.5", children: childLinks.map((child) => /* @__PURE__ */ jsx(
+        MainSidebarSectionLink,
+        {
+          link: child,
+          activeCandidates,
+          level: level + 1,
+          isActive
+        },
+        getLinkKey(child)
+      )) }) : null
+    }
+  );
+}
+function MainSidebarSections({ sections, isActive, className }) {
+  const baseId = useId();
+  return /* @__PURE__ */ jsx(Fragment, { children: sections.map((section) => {
+    const showSeparator = section.links.length > 0 && section.separator;
+    const headerId = section.title ? `${baseId}-${section.key}` : void 0;
+    return /* @__PURE__ */ jsxs(
+      MainSidebarNavSection,
+      {
+        className,
+        "aria-labelledby": headerId,
+        "aria-label": !headerId ? section.key : void 0,
+        children: [
+          showSeparator ? /* @__PURE__ */ jsx(MainSidebarNavSeparator, {}) : null,
+          section.title ? /* @__PURE__ */ jsx(MainSidebarNavHeader, { id: headerId, href: section.href, isActive: section.isHeaderActive, children: section.title }) : null,
+          /* @__PURE__ */ jsx(MainSidebarNavList, { children: section.links.map((link) => /* @__PURE__ */ jsx(
+            MainSidebarSectionLink,
+            {
+              link,
+              activeCandidates: section.links,
+              isActive
+            },
+            getLinkKey(link)
+          )) })
+        ]
+      },
+      section.key
+    );
+  }) });
+}
+
+function MainSidebarTrigger({ className, onClick, ...props }) {
+  const { desktopState, toggleSidebar } = useMainSidebar();
+  const isCollapsed = desktopState === "collapsed";
+  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 ? "mx-auto" : "ml-auto",
+              "hover:bg-sidebar-accent hover:text-foreground",
+              "transition-all duration-normal ease-out-custom",
+              "focus-visible:shadow-focus-ring focus-visible:ring-1 focus-visible:ring-accent1 focus-visible:outline-hidden",
+              "[&_svg]:size-4 [&_svg]:text-muted-foreground [&_svg]:transition-transform [&_svg]:duration-normal [&:hover_svg]:text-foreground",
+              className
+            ),
+            children: /* @__PURE__ */ jsx(
+              PanelRightIcon,
+              {
+                className: cn({
+                  "rotate-180": isCollapsed
+                })
+              }
+            )
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+      "Toggle Sidebar",
+      /* @__PURE__ */ jsx(Kbd, { size: "xs", className: "border-border bg-muted text-muted-foreground", children: "[" })
+    ] }) })
+  ] });
+}
+
+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 MainSidebarProvider({
+  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, setOpenMobile] = React__default.useState(false);
+  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]);
+  React__default.useEffect(() => {
+    if (!isMobile && openMobile) setOpenMobile(false);
+  }, [isMobile, openMobile]);
+  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((prev) => !prev);
+      return;
+    }
+    setState((prev) => {
+      const next = prev === "default" ? "collapsed" : "default";
+      stateRef.current = next;
+      persistState(next);
+      return next;
+    });
+  }, [isMobile, persistState]);
+  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;
+      const target = ev.target;
+      if (target) {
+        const tag = target.tagName;
+        if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return;
+        if (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, setOpenMobile }), [openMobile]);
+  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",
+      style: scopeStyle,
+      suppressHydrationWarning: true,
+      children: /* @__PURE__ */ jsx(MainSidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(MobileDrawerContext.Provider, { value: drawerValue, children }) })
+    }
+  );
+}
+
+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)
+  );
+}
+
+const MainSidebar = Object.assign(MainSidebarRoot, {
+  Bottom: MainSidebarBottom,
+  Nav: MainSidebarNav,
+  NavSection: MainSidebarNavSection,
+  NavLink: MainSidebarNavLink,
+  NavLabel: MainSidebarNavLabel,
+  NavHeader: MainSidebarNavHeader,
+  NavList: MainSidebarNavList,
+  NavSeparator: MainSidebarNavSeparator,
+  Sections: MainSidebarSections,
+  Trigger: MainSidebarTrigger,
+  MobileTrigger: MainSidebarMobileTrigger
+});
+
+export { MainSidebar as M, MainSidebarMobileTrigger as a, MainSidebarProvider as b, MainSidebarTrigger as c, useMaybeSidebar as d, useMaybeSidebarState as e, useMobileDrawer as f, getIsLinkActive as g, MainSidebarNav as h, MainSidebarRoot as i, MainSidebarNavLink as j, MainSidebarNavList as k, MainSidebarNavSection as l, MainSidebarNavSeparator as m, navItemClasses as n, MainSidebarNavLabel as o, useMainSidebar as u };
+//# sourceMappingURL=main-sidebar-CbjWru0s.js.map