@mastra/playground-ui 55.0.0 → 55.1.0-alpha.0

package/dist/components/MainSidebar.cjs.js

@@ -4,88 +4,14 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const utils_cn = require('../cn-DnbTIGXa.cjs');
-const lucideReact = require('lucide-react');
-const React = require('react');
-const scrollArea = require('../scroll-area-DK4w_mMg.cjs');
+const mainSidebarLinkActive = require('../main-sidebar-link-active-DLGDYeTJ.cjs');
 const reactVisuallyHidden = require('@radix-ui/react-visually-hidden');
-const index = require('../index-BxcigDwC.cjs');
-const tooltip = require('../tooltip-BsSNtmxl.cjs');
-const drawer = require('../drawer-Bq7j_MiM.cjs');
-const primitives_resizeHandleIndicator = require('../primitives/resize-handle-indicator.cjs.js');
-const kbd = require('../kbd-BaoBQUlL.cjs');
+const React = require('react');
 
 function MainSidebarBottom({ className, children, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn("mt-auto", className), ...props, children });
 }
 
-const MainSidebarContext = React.createContext(null);
-const MobileDrawerContext = React.createContext(null);
-function useMaybeSidebarState() {
-  return React.useContext(MainSidebarContext);
-}
-function useMainSidebar() {
-  const ctx = React.useContext(MainSidebarContext);
-  const drawer = React.useContext(MobileDrawerContext);
-  if (!ctx || !drawer) {
-    throw new Error("useMainSidebar must be used within a MainSidebarProvider.");
-  }
-  return { ...ctx, ...drawer };
-}
-function useMaybeSidebar() {
-  const ctx = React.useContext(MainSidebarContext);
-  const drawer = React.useContext(MobileDrawerContext);
-  if (!ctx || !drawer) return null;
-  return { ...ctx, ...drawer };
-}
-function useMobileDrawer() {
-  const drawer = React.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__ */ jsxRuntime.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: utils_cn.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",
-        "text-neutral4 hover:bg-sidebar-nav-hover hover:text-neutral6",
-        "focus-visible:ring-1 focus-visible:ring-accent1 focus-visible:outline-hidden",
-        className
-      ),
-      children: icon ?? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MenuIcon, { className: "size-5" })
-    }
-  );
-}
-
-function MainSidebarNav({
-  "aria-label": ariaLabel = "Main",
-  children,
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": ariaLabel, className: utils_cn.cn("flex min-h-0 flex-1 flex-col", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(scrollArea.ScrollArea, { className: "min-h-0 flex-1", viewPortClassName: "px-0.5", children }) });
-}
-
 function MainSidebarNavHeader({
   children,
   className,
@@ -95,7 +21,7 @@ function MainSidebarNavHeader({
   LinkComponent: LinkProp,
   ...props
 }) {
-  const ctx = useMaybeSidebarState();
+  const ctx = mainSidebarLinkActive.useMaybeSidebarState();
   const state = stateProp ?? ctx?.state ?? "default";
   const isMobile = ctx?.isMobile ?? false;
   const Link = LinkProp ?? ctx?.LinkComponent ?? "a";
@@ -126,398 +52,18 @@ function MainSidebarNavHeader({
   ] }) });
 }
 
-function MainSidebarNavLabel({ children, className, state: stateProp, ...rest }) {
-  const ctx = useMaybeSidebarState();
-  const state = stateProp ?? ctx?.state ?? "default";
-  if (state === "collapsed") {
-    return /* @__PURE__ */ jsxRuntime.jsx(reactVisuallyHidden.VisuallyHidden, { children });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { ...rest, className: utils_cn.cn("min-w-0 flex-1 truncate text-left font-[450]", className), children });
-}
-
-const navItemVariants = index.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 = utils_cn.cn(
-  "rounded-lg text-neutral3 [&_svg]:text-neutral3/70",
-  "hover:bg-sidebar-nav-hover hover:text-neutral6 [&:hover_svg]:text-neutral5"
-);
-const activeSurface = "bg-sidebar-nav-active text-neutral6 hover:bg-sidebar-nav-active hover:text-neutral6 [&_svg]:text-neutral6 [&:hover_svg]:text-neutral6";
-const featuredSurface = utils_cn.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 }) => utils_cn.cn(idleSurface, isActive && activeSurface, isFeatured && featuredSurface);
-const navItemLayoutClasses = ({ isCollapsed, level = 0, size }) => utils_cn.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 } = {}) => utils_cn.cn(
-  navItemLayoutClasses({ isCollapsed, level, size }),
-  navRowSurfaceClasses({ isActive, isFeatured }),
-  isCollapsed && !isActive && "[&_svg]:text-neutral3"
-);
-
-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 ? utils_cn.cn(navItemLayoutClasses({ level, size }), "flex-1 pr-1") : navItemClasses({ isActive, isCollapsed, isFeatured, level, size });
-  return /* @__PURE__ */ jsxRuntime.jsxs("li", { ...props, className: utils_cn.cn("relative flex min-w-0 flex-col", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(NavRowBody, { action: rowAction, surfaceClassName: navRowSurfaceClasses({ isActive, isFeatured }), children: /* @__PURE__ */ jsxRuntime.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.cloneElement(render, { className: utils_cn.cn(className, render.props.className) });
-  if (asChild) {
-    if (!React.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.cloneElement(children, { className: utils_cn.cn(className, children.props.className) });
-  }
-  if (!link) return children;
-  const externalParams = /^(https?:)?\/\//.test(link.url) ? { target: "_blank", rel: "noreferrer" } : {};
-  return /* @__PURE__ */ jsxRuntime.jsxs(Link, { href: link.url, ...externalParams, className, children: [
-    link.icon,
-    /* @__PURE__ */ jsxRuntime.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.isValidElement(children)) return children;
-  return /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { render: children }),
-    /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { side: "right", align: "center", sideOffset: 16, children: label })
-  ] });
-}
-function NavRowBody({
-  action,
-  surfaceClassName,
-  children
-}) {
-  if (!action) return children;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils_cn.cn("flex min-w-0 items-center pr-1", surfaceClassName), children: [
-    children,
-    action
-  ] });
-}
-
-function MainSidebarNavList({ className, children, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: utils_cn.cn("grid grid-cols-[minmax(0,1fr)] content-center items-start gap-0.5", className), ...props, children });
-}
-
-function MainSidebarNavSection({ className, children, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: utils_cn.cn("relative grid grid-cols-[minmax(0,1fr)] content-center items-start", className), ...props, children });
-}
-
-function MainSidebarNavSeparator({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      role: "separator",
-      "aria-orientation": "horizontal",
-      className: utils_cn.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-border1 [&: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 = React.useRef(false);
-  const dragCleanupRef = React.useRef(null);
-  React.useEffect(() => {
-    return () => {
-      dragCleanupRef.current?.();
-      dragCleanupRef.current = null;
-    };
-  }, []);
-  const onPointerDown = React.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 = React.useCallback(() => {
-    if (draggedRef.current) {
-      draggedRef.current = false;
-      return;
-    }
-    toggleSidebar();
-  }, [toggleSidebar]);
-  const onKeyDown = React.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 = React.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__ */ jsxRuntime.jsx(drawer.Drawer, { side: "left", open: openMobile, onOpenChange: setOpenMobile, children: /* @__PURE__ */ jsxRuntime.jsxs(
-      drawer.DrawerContent,
-      {
-        className: utils_cn.cn(
-          "w-3/4 max-w-(--sidebar-width-mobile) overflow-hidden rounded-none border-0 bg-surface2 shadow-xl",
-          className
-        ),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(reactVisuallyHidden.VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(drawer.DrawerTitle, { children: "Navigation" }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(reactVisuallyHidden.VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(drawer.DrawerDescription, { children: "Primary site navigation drawer" }) }),
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: utils_cn.cn(
-        "sidebar-layout group/sidebar relative min-h-0 shrink-0 self-stretch",
-        "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,
-        // Order matters for tailwind-merge: these win over consumer-supplied border classes.
-        isHidden && "border-r-0 border-transparent"
-      ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: utils_cn.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__ */ jsxRuntime.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: utils_cn.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__ */ jsxRuntime.jsx(
-              primitives_resizeHandleIndicator.ResizeHandleIndicator,
-              {
-                className: utils_cn.cn(
-                  "group-hover:opacity-100",
-                  "group-focus-visible:via-accent1 group-focus-visible:opacity-100",
-                  "in-data-[sidebar-gesture=active]:via-neutral6/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__ */ jsxRuntime.jsx(
-    MainSidebarNavLink,
+    mainSidebarLinkActive.MainSidebarNavLink,
     {
       link,
       isActive: isActive?.(link, activeCandidates) ?? link.isActive,
       level,
-      subItems: childLinks.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(MainSidebarNavList, { className: "mt-0.5", children: childLinks.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
+      subItems: childLinks.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(mainSidebarLinkActive.MainSidebarNavList, { className: "mt-0.5", children: childLinks.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
         MainSidebarSectionLink,
         {
           link: child,
@@ -536,15 +82,15 @@ function MainSidebarSections({ sections, isActive, className }) {
     const showSeparator = section.links.length > 0 && section.separator;
     const headerId = section.title ? `${baseId}-${section.key}` : void 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(
-      MainSidebarNavSection,
+      mainSidebarLinkActive.MainSidebarNavSection,
       {
         className,
         "aria-labelledby": headerId,
         "aria-label": !headerId ? section.key : void 0,
         children: [
-          showSeparator ? /* @__PURE__ */ jsxRuntime.jsx(MainSidebarNavSeparator, {}) : null,
+          showSeparator ? /* @__PURE__ */ jsxRuntime.jsx(mainSidebarLinkActive.MainSidebarNavSeparator, {}) : null,
           section.title ? /* @__PURE__ */ jsxRuntime.jsx(MainSidebarNavHeader, { id: headerId, href: section.href, isActive: section.isHeaderActive, children: section.title }) : null,
-          /* @__PURE__ */ jsxRuntime.jsx(MainSidebarNavList, { children: section.links.map((link) => /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx(mainSidebarLinkActive.MainSidebarNavList, { children: section.links.map((link) => /* @__PURE__ */ jsxRuntime.jsx(
             MainSidebarSectionLink,
             {
               link,
@@ -560,285 +106,28 @@ function MainSidebarSections({ sections, isActive, className }) {
   }) });
 }
 
-function MainSidebarTrigger({ className, onClick, ...props }) {
-  const { desktopState, toggleSidebar } = useMainSidebar();
-  const isCollapsed = desktopState === "collapsed";
-  return /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      tooltip.TooltipTrigger,
-      {
-        render: /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            "aria-label": "Toggle sidebar",
-            "aria-expanded": !isCollapsed,
-            ...props,
-            onClick: (event) => {
-              onClick?.(event);
-              if (!event.defaultPrevented) toggleSidebar();
-            },
-            className: utils_cn.cn(
-              "flex items-center justify-center rounded-md text-neutral3",
-              "size-7",
-              isCollapsed ? "mx-auto" : "ml-auto",
-              "hover:bg-sidebar-nav-hover hover:text-neutral6",
-              "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-neutral3 [&_svg]:transition-transform [&_svg]:duration-normal [&:hover_svg]:text-neutral5",
-              className
-            ),
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              lucideReact.PanelRightIcon,
-              {
-                className: utils_cn.cn({
-                  "rotate-180": isCollapsed
-                })
-              }
-            )
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipContent, { children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
-      "Toggle Sidebar",
-      /* @__PURE__ */ jsxRuntime.jsx(kbd.Kbd, { size: "xs", 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.useLayoutEffect : React.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.useRef(null);
-  if (initialRef.current === null) initialRef.current = readInitial();
-  const initial = initialRef.current;
-  const [state, setState] = React.useState(initial.state);
-  const [width, setWidthState] = React.useState(initial.width);
-  const [isMobile, setIsMobile] = React.useState(false);
-  const [openMobile, setOpenMobile] = React.useState(false);
-  const widthRef = React.useRef(initial.width);
-  const stateRef = React.useRef(initial.state);
-  stateRef.current = state;
-  const scopeRef = React.useRef(null);
-  React.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.useEffect(() => {
-    if (!isMobile && openMobile) setOpenMobile(false);
-  }, [isMobile, openMobile]);
-  const writeCssVar = React.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.useCallback(
-    (next) => {
-      try {
-        window.localStorage.setItem(stateStorageKey, next);
-      } catch {
-      }
-    },
-    [stateStorageKey]
-  );
-  const toggleSidebar = React.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.useCallback(
-    (next) => {
-      const clamped = clamp(next, safeMin, safeMax);
-      widthRef.current = clamped;
-      writeCssVar(clamped);
-    },
-    [safeMin, safeMax, writeCssVar]
-  );
-  const collapse = React.useCallback(() => {
-    stateRef.current = "collapsed";
-    persistState("collapsed");
-    setState("collapsed");
-  }, [persistState]);
-  const expand = React.useCallback(() => {
-    stateRef.current = "default";
-    persistState("default");
-    setState("default");
-  }, [persistState]);
-  const commit = React.useCallback(() => {
-    setWidthState(widthRef.current);
-    try {
-      window.localStorage.setItem(stateStorageKey, stateRef.current);
-      window.localStorage.setItem(widthStorageKey, String(widthRef.current));
-    } catch {
-    }
-  }, [stateStorageKey, widthStorageKey]);
-  const setGestureActive = React.useCallback((active) => {
-    const el = scopeRef.current;
-    if (!el) return;
-    if (active) el.setAttribute("data-sidebar-gesture", "active");
-    else el.removeAttribute("data-sidebar-gesture");
-  }, []);
-  React.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.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.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__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ref: scopeRef,
-      "data-sidebar-scope": true,
-      "data-sidebar-state": state,
-      "data-sidebar-mobile": isMobile ? "true" : "false",
-      style: scopeStyle,
-      suppressHydrationWarning: true,
-      children: /* @__PURE__ */ jsxRuntime.jsx(MainSidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.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, {
+const MainSidebar = Object.assign(mainSidebarLinkActive.MainSidebarRoot, {
   Bottom: MainSidebarBottom,
-  Nav: MainSidebarNav,
-  NavSection: MainSidebarNavSection,
-  NavLink: MainSidebarNavLink,
-  NavLabel: MainSidebarNavLabel,
+  Nav: mainSidebarLinkActive.MainSidebarNav,
+  NavSection: mainSidebarLinkActive.MainSidebarNavSection,
+  NavLink: mainSidebarLinkActive.MainSidebarNavLink,
+  NavLabel: mainSidebarLinkActive.MainSidebarNavLabel,
   NavHeader: MainSidebarNavHeader,
-  NavList: MainSidebarNavList,
-  NavSeparator: MainSidebarNavSeparator,
+  NavList: mainSidebarLinkActive.MainSidebarNavList,
+  NavSeparator: mainSidebarLinkActive.MainSidebarNavSeparator,
   Sections: MainSidebarSections,
-  Trigger: MainSidebarTrigger,
-  MobileTrigger: MainSidebarMobileTrigger
+  Trigger: mainSidebarLinkActive.MainSidebarTrigger,
+  MobileTrigger: mainSidebarLinkActive.MainSidebarMobileTrigger
 });
 
+exports.MainSidebarMobileTrigger = mainSidebarLinkActive.MainSidebarMobileTrigger;
+exports.MainSidebarProvider = mainSidebarLinkActive.MainSidebarProvider;
+exports.MainSidebarTrigger = mainSidebarLinkActive.MainSidebarTrigger;
+exports.getIsLinkActive = mainSidebarLinkActive.getIsLinkActive;
+exports.navItemClasses = mainSidebarLinkActive.navItemClasses;
+exports.useMainSidebar = mainSidebarLinkActive.useMainSidebar;
+exports.useMaybeSidebar = mainSidebarLinkActive.useMaybeSidebar;
+exports.useMaybeSidebarState = mainSidebarLinkActive.useMaybeSidebarState;
+exports.useMobileDrawer = mainSidebarLinkActive.useMobileDrawer;
 exports.MainSidebar = MainSidebar;
-exports.MainSidebarMobileTrigger = MainSidebarMobileTrigger;
-exports.MainSidebarProvider = MainSidebarProvider;
-exports.MainSidebarTrigger = MainSidebarTrigger;
-exports.getIsLinkActive = getIsLinkActive;
-exports.navItemClasses = navItemClasses;
-exports.useMainSidebar = useMainSidebar;
-exports.useMaybeSidebar = useMaybeSidebar;
-exports.useMaybeSidebarState = useMaybeSidebarState;
-exports.useMobileDrawer = useMobileDrawer;
 //# sourceMappingURL=MainSidebar.cjs.js.map