@mastra/playground-ui 33.0.0-alpha.3 → 33.0.0

package/dist/main-sidebar-0q7MXh2j.js

@@ -0,0 +1,761 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { c as cn } from './utils-CzYGxqbG.js';
+import { MenuIcon, PanelRightIcon, KeyboardIcon } from 'lucide-react';
+import React__default, { useRef, useEffect, useCallback, useId } from 'react';
+import { S as ScrollArea } from './scroll-area-BCZiAvhR.js';
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
+import { T as Tooltip, c as TooltipTrigger, a as TooltipContent } from './tooltip-DehuxlSR.js';
+import { Dialog } from '@base-ui/react/dialog';
+import { c as cva } from './index-CsyK0ihk.js';
+
+function MainSidebarBottom({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("mt-auto", className), ...props, children });
+}
+
+const SIDEBAR_STATE_KEY = "sidebar:state";
+const SIDEBAR_WIDTH_KEY = "sidebar:width";
+const SIDEBAR_WIDTH_VAR = "--sidebar-width";
+const MainSidebarContext = React__default.createContext(null);
+const MobileDrawerContext = React__default.createContext(null);
+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 };
+}
+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 = false,
+  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 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(
+        "inline-flex size-10 items-center justify-center rounded-md",
+        "in-data-[sidebar-mobile=false]:hidden",
+        "text-neutral4 hover:text-neutral6 hover:bg-sidebar-nav-hover",
+        "focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-accent1",
+        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 flex-col flex-1 min-h-0", className), ...props, children: /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1 min-h-0", viewPortClassName: "px-0.5", children }) });
+}
+
+function MainSidebarNavHeader({
+  children,
+  className,
+  state: stateProp,
+  href,
+  isActive,
+  LinkComponent: LinkProp,
+  ...props
+}) {
+  const ctx = useMaybeSidebar();
+  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("min-w-0 min-h-8 flex items-center mt-2 mb-0.5", className), children: showTitle ? /* @__PURE__ */ jsx(
+    "header",
+    {
+      ...props,
+      className: cn("min-w-0 max-w-full truncate text-ui-sm font-medium pl-3", {
+        "text-neutral5": isActive,
+        "text-neutral3/70": !isActive
+      }),
+      children: href ? /* @__PURE__ */ jsx(
+        Link,
+        {
+          href,
+          className: cn("block min-w-0 truncate transition-colors duration-normal", {
+            "hover:text-neutral5": !isActive,
+            "text-neutral5": 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-border1" })
+  ] }) });
+}
+
+function MainSidebarNavLabel({ children, className, state: stateProp, ...rest }) {
+  const ctx = useMaybeSidebar();
+  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 navItemClasses = ({ isActive, isCollapsed, isFeatured } = {}) => cn(
+  "flex items-center text-ui-md text-neutral3 rounded-lg h-9 min-w-0 whitespace-nowrap",
+  "transition-all duration-normal ease-out-custom motion-reduce:transition-none",
+  "[&_svg]:w-4 [&_svg]:h-4 [&_svg]:shrink-0 [&_svg]:text-neutral3/70 [&_svg]:transition-colors [&_svg]:duration-normal motion-reduce:[&_svg]:transition-none",
+  "hover:bg-sidebar-nav-hover hover:text-neutral6 [&:hover_svg]:text-neutral5",
+  "focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-accent1 focus-visible:shadow-focus-ring",
+  !isCollapsed && "w-full gap-2.5 py-1 px-3 justify-start",
+  isCollapsed && "w-full p-0 justify-center",
+  isActive && "text-neutral6 bg-sidebar-nav-active hover:bg-sidebar-nav-active hover:text-neutral6 [&_svg]:text-neutral6 [&:hover_svg]:text-neutral6",
+  isCollapsed && !isActive && "[&_svg]:text-neutral3",
+  isFeatured && "my-2 bg-accent1Dark hover:bg-accent1Darker text-accent1 hover:text-accent1 border border-accent1/30",
+  isFeatured && "dark:bg-accent1 dark:hover:bg-accent1/90 dark:text-black dark:hover:text-black dark:border-transparent",
+  isFeatured && "[&_svg]:text-accent1 [&:hover_svg]:text-accent1 dark:[&_svg]:text-black/75 dark:[&:hover_svg]:text-black"
+);
+function MainSidebarNavLink({
+  link,
+  state: stateProp,
+  children,
+  isActive,
+  className,
+  LinkComponent: LinkProp,
+  asChild = false,
+  ...props
+}) {
+  const ctx = useMaybeSidebar();
+  const state = stateProp ?? ctx?.state ?? "default";
+  const Link = LinkProp ?? ctx?.LinkComponent ?? "a";
+  const isCollapsed = state === "collapsed";
+  const isFeatured = link?.variant === "featured";
+  const isExternal = Boolean(link?.url && /^(https?:)?\/\//.test(link.url));
+  const linkParams = isExternal ? { target: "_blank", rel: "noreferrer" } : {};
+  const needsTooltip = link ? isCollapsed || Boolean(link.tooltipMsg) : false;
+  const itemClassName = navItemClasses({
+    isActive,
+    isCollapsed,
+    isFeatured
+  });
+  let interactiveEl = null;
+  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`."
+      );
+    }
+    interactiveEl = React__default.cloneElement(children, {
+      className: cn(itemClassName, children.props.className)
+    });
+  } else if (link) {
+    interactiveEl = /* @__PURE__ */ jsxs(Link, { href: link.url, ...linkParams, className: itemClassName, children: [
+      link.icon,
+      /* @__PURE__ */ jsx(MainSidebarNavLabel, { state, children: link.name }),
+      children
+    ] });
+  }
+  return /* @__PURE__ */ jsx("li", { ...props, className: cn("flex relative min-w-0", className), children: link && needsTooltip && React__default.isValidElement(interactiveEl) ? /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { render: interactiveEl }),
+    /* @__PURE__ */ jsx(TooltipContent, { side: "right", align: "center", sideOffset: 16, children: link.tooltipMsg ? isCollapsed ? `${link.name} | ${link.tooltipMsg}` : link.tooltipMsg : link.name })
+  ] }) : interactiveEl ?? children });
+}
+
+function MainSidebarNavList({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx("ul", { className: cn("grid grid-cols-[minmax(0,1fr)] gap-1 items-start content-center", className), ...props, children });
+}
+
+function MainSidebarNavSection({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx("section", { className: cn("grid grid-cols-[minmax(0,1fr)] items-start content-center relative", className), ...props, children });
+}
+
+function MainSidebarNavSeparator({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "separator",
+      "aria-orientation": "horizontal",
+      className: cn(
+        "min-h-5 relative",
+        '[&:after]:content-[""] [&:after]:block [&:after]:absolute [&:after]:h-0 [&:after]:border-border1 [&:after]:border-t [&:after]:top-1/2 [&:after]:left-3 [&:after]:right-3',
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+const indicatorVariants = cva(
+  "block pointer-events-none transition-all duration-150 ease-out motion-reduce:transition-none",
+  {
+    variants: {
+      variant: {
+        line: "h-3/4 w-px bg-linear-to-b from-transparent via-neutral6/25 to-transparent opacity-0",
+        pill: "h-10 w-0.5 rounded-full bg-surface5"
+      }
+    },
+    defaultVariants: {
+      variant: "line"
+    }
+  }
+);
+const ResizeHandleIndicator = ({ variant, className }) => /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn(indicatorVariants({ variant }), className) });
+
+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(Dialog.Root, { open: openMobile, onOpenChange: setOpenMobile, children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [
+      /* @__PURE__ */ jsx(
+        Dialog.Backdrop,
+        {
+          className: cn(
+            "fixed inset-0 z-40 bg-overlay backdrop-blur-sm",
+            "opacity-100 transition-opacity duration-200 ease-out motion-reduce:transition-none",
+            "data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[ending-style]:ease-in"
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Dialog.Popup,
+        {
+          className: cn(
+            "fixed inset-y-0 left-0 z-50 flex h-full flex-col",
+            "w-3/4 max-w-(--sidebar-width-mobile)",
+            "bg-surface2 shadow-xl",
+            "data-[open]:animate-in data-[closed]:animate-out",
+            "data-[open]:slide-in-from-left data-[closed]:slide-out-to-left",
+            "duration-200",
+            className
+          ),
+          children: [
+            /* @__PURE__ */ jsx(VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsx(Dialog.Title, { children: "Navigation" }) }),
+            /* @__PURE__ */ jsx(VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsx(Dialog.Description, { children: "Primary site navigation drawer" }) }),
+            /* @__PURE__ */ jsx("div", { onClick: closeOnAnchor, className: "flex flex-col h-full min-h-0 px-4 py-2 overflow-hidden", children })
+          ]
+        }
+      )
+    ] }) });
+  }
+  const currentWidth = isCollapsed ? collapsedWidth : width;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "sidebar-layout group/sidebar relative shrink-0 self-stretch min-h-0",
+        "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__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "flex flex-col h-full min-h-0 overflow-hidden",
+              "transition-opacity duration-200 motion-reduce:transition-none",
+              isCollapsed ? "px-2" : "px-4",
+              isHidden && "opacity-0 pointer-events-none px-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(
+                  "group-hover:opacity-100",
+                  "group-focus-visible:opacity-100 group-focus-visible:via-accent1",
+                  "in-data-[sidebar-gesture=active]:opacity-100 in-data-[sidebar-gesture=active]:via-neutral6/45"
+                )
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+
+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(
+            MainSidebarNavLink,
+            {
+              link,
+              isActive: isActive?.(link, section.links) ?? link.isActive
+            },
+            link.name
+          )) })
+        ]
+      },
+      section.key
+    );
+  }) });
+}
+function getIsLinkActive(link, pathname, siblings = []) {
+  const matches = (url) => pathname === url || pathname.startsWith(url + "/");
+  if (!matches(link.url)) return false;
+  return !siblings.some((other) => other.url !== link.url && other.url.length > link.url.length && matches(other.url));
+}
+
+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 text-neutral3 rounded-md",
+              "size-9",
+              isCollapsed ? "mx-auto" : "ml-auto",
+              "hover:bg-sidebar-nav-hover hover:text-neutral6",
+              "transition-all duration-normal ease-out-custom",
+              "focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-accent1 focus-visible:shadow-focus-ring",
+              "[&_svg]:w-4 [&_svg]:h-4 [&_svg]:text-neutral3 [&:hover_svg]:text-neutral5 [&_svg]:transition-transform [&_svg]:duration-normal",
+              className
+            ),
+            children: /* @__PURE__ */ jsx(
+              PanelRightIcon,
+              {
+                className: cn({
+                  "rotate-180": isCollapsed
+                })
+              }
+            )
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs(TooltipContent, { children: [
+      "Toggle Sidebar",
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 [&>svg]:w-[1em] [&>svg]:h-[1em]", children: [
+        /* @__PURE__ */ jsx(KeyboardIcon, {}),
+        " Ctrl+B"
+      ] })
+    ] })
+  ] });
+}
+
+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, ResizeHandleIndicator as R, MainSidebarMobileTrigger as a, MainSidebarProvider as b, MainSidebarTrigger as c, useMaybeSidebar as d, getIsLinkActive as g, navItemClasses as n, useMainSidebar as u };
+//# sourceMappingURL=main-sidebar-0q7MXh2j.js.map