@mastra/playground-ui 60.0.0-alpha.8 → 60.0.0

package/dist/main-sidebar-CIiWGCgI.js

@@ -1,898 +0,0 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { c as cn } from './cn-65Adrsfj.js';
-import { MenuIcon, PanelRightIcon } from 'lucide-react';
-import React__default, { useRef, useEffect, useCallback, useId } from 'react';
-import { quietTextHover, quietTextHoverInGroup } from './primitives/typography.es.js';
-import { S as ScrollArea } from './scroll-area-DyTZoISq.js';
-import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
-import { c as cva } from './index-Dubp6Qv4.js';
-import { controlHeight } from './primitives/control-size.es.js';
-import { surfaceStateLayerStyle, surfaceGroupStateLayerStyle, overlaySurfaceStyle } from './primitives/raised-surface.es.js';
-import { focusRing, controlStateColorTransition } from './primitives/transitions.es.js';
-import { T as Tooltip, c as TooltipTrigger, a as TooltipContent } from './tooltip-DsQPiynb.js';
-import { D as Drawer, d as DrawerContent, c as DrawerClose, o as DrawerTitle, e as DrawerDescription } from './drawer-C1VyTeuX.js';
-import { ResizeHandleIndicator } from './primitives/resize-handle-indicator.es.js';
-import { K as Kbd } from './kbd-BDVTQHD_.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, mobileTriggerRef, setOpenMobile } = useMainSidebar();
-  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",
-        "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-column", {
-        "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: "mx-3 h-px flex-1 bg-border" })
-  ] }) });
-}
-
-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", 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-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 }),
-  "w-full justify-start",
-  controlStateColorTransition,
-  "[&_svg]:size-4 [&_svg]:shrink-0",
-  focusRing.visible,
-  !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 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, isActive, className: itemClassName }) }) }),
-    !isCollapsed && subItems
-  ] });
-}
-function navInteractiveRow({
-  render,
-  asChild,
-  children,
-  link,
-  state,
-  Link,
-  isActive,
-  className
-}) {
-  const current = isActive ? "page" : void 0;
-  if (render) {
-    return React__default.cloneElement(render, { className: cn(className, render.props.className), "aria-current": current });
-  }
-  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),
-      "aria-current": current
-    });
-  }
-  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(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 (!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 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, mobileMode = "drawer" }) {
-  const {
-    state,
-    width,
-    minWidth,
-    maxWidth,
-    collapseBelow,
-    collapsedWidth,
-    isMobile,
-    openMobile,
-    mobileTriggerRef,
-    setOpenMobile,
-    setMobileDrawerPresent,
-    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) => {
-      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-accent1"
-                      ),
-                      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-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-fill-subtle hover:text-foreground",
-              "transition-colors duration-normal ease-out-custom motion-reduce:transition-none",
-              focusRing.visible,
-              "[&_svg]:size-4 [&_svg]:text-muted-foreground [&_svg]:transition-transform [&_svg]:duration-slow [&_svg]:ease-out-custom motion-reduce:[&_svg]:transition-none [&: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: "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, 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(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, MainSidebarNavLabel as l, MainSidebarNavSection as m, navItemClasses as n, MainSidebarNavSeparator as o, useMainSidebar as u };
-//# sourceMappingURL=main-sidebar-CIiWGCgI.js.map