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

package/dist/main-sidebar-link-active-BK4RR4Az.js

@@ -0,0 +1,719 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { MenuIcon, PanelRightIcon } from 'lucide-react';
+import { c as cn } from './cn-ByEbywDh.js';
+import { S as ScrollArea } from './scroll-area-B0L1nYJS.js';
+import React__default, { useRef, useEffect, useCallback } from 'react';
+import { c as cva } from './index-CZvpHqka.js';
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
+import { T as Tooltip, c as TooltipTrigger, a as TooltipContent } from './tooltip-Vj_jjcxE.js';
+import { D as Drawer, d as DrawerContent, o as DrawerTitle, e as DrawerDescription } from './drawer-D1m2faHU.js';
+import { ResizeHandleIndicator } from './primitives/resize-handle-indicator.es.js';
+import { K as Kbd } from './kbd-Bod0H0VQ.js';
+
+const MainSidebarContext = React__default.createContext(null);
+const MobileDrawerContext = React__default.createContext(null);
+function useMaybeSidebarState() {
+  return React__default.useContext(MainSidebarContext);
+}
+function useMainSidebar() {
+  const ctx = React__default.useContext(MainSidebarContext);
+  const drawer = React__default.useContext(MobileDrawerContext);
+  if (!ctx || !drawer) {
+    throw new Error("useMainSidebar must be used within a MainSidebarProvider.");
+  }
+  return { ...ctx, ...drawer };
+}
+function useMaybeSidebar() {
+  const ctx = React__default.useContext(MainSidebarContext);
+  const drawer = React__default.useContext(MobileDrawerContext);
+  if (!ctx || !drawer) return null;
+  return { ...ctx, ...drawer };
+}
+function useMobileDrawer() {
+  const drawer = React__default.useContext(MobileDrawerContext);
+  if (!drawer) throw new Error("useMobileDrawer must be used within a MainSidebarProvider.");
+  return drawer;
+}
+
+function MainSidebarMobileTrigger({
+  className,
+  icon,
+  "aria-label": ariaLabel = "Open navigation menu",
+  onClick,
+  ...props
+}) {
+  const { isMobile, setOpenMobile } = useMainSidebar();
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": ariaLabel,
+      "aria-hidden": !isMobile,
+      tabIndex: isMobile ? 0 : -1,
+      "data-mobile-only": true,
+      ...props,
+      onClick: (event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) setOpenMobile(true);
+      },
+      className: cn(
+        "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__ */ 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 MainSidebarNavLabel({ children, className, state: stateProp, ...rest }) {
+  const ctx = useMaybeSidebarState();
+  const state = stateProp ?? ctx?.state ?? "default";
+  if (state === "collapsed") {
+    return /* @__PURE__ */ jsx(VisuallyHidden, { children });
+  }
+  return /* @__PURE__ */ jsx("span", { ...rest, className: cn("min-w-0 flex-1 truncate text-left font-[450]", className), children });
+}
+
+const navItemVariants = cva("flex min-w-0 cursor-pointer items-center rounded-lg whitespace-nowrap", {
+  variants: {
+    size: {
+      default: "h-8 text-ui-md",
+      sm: "h-7 text-ui-sm",
+      lg: "h-9 text-ui-md"
+    }
+  },
+  defaultVariants: {
+    size: "sm"
+  }
+});
+const nestedExpandedItemClasses = (level) => {
+  if (level <= 0) return "w-full gap-2 py-1 px-3 justify-start";
+  if (level === 1) return "w-full gap-2 py-1 pr-3 pl-8 justify-start text-ui-sm h-8";
+  if (level === 2) return "w-full gap-2 py-1 pr-3 pl-10 justify-start text-ui-sm h-8";
+  return "w-full gap-2 py-1 pr-3 pl-12 justify-start text-ui-sm h-8";
+};
+const idleSurface = cn(
+  "rounded-lg text-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 = cn(
+  "my-2 border border-accent1/30 bg-accent1Dark text-accent1 hover:bg-accent1Darker hover:text-accent1",
+  "dark:border-transparent dark:bg-accent1 dark:text-black dark:hover:bg-accent1/90 dark:hover:text-black",
+  "[&_svg]:text-accent1 dark:[&_svg]:text-black/75 [&:hover_svg]:text-accent1 dark:[&:hover_svg]:text-black"
+);
+const navRowSurfaceClasses = ({ isActive, isFeatured }) => cn(idleSurface, isActive && activeSurface, isFeatured && featuredSurface);
+const navItemLayoutClasses = ({ isCollapsed, level = 0, size }) => cn(
+  navItemVariants({ size }),
+  "transition-all duration-normal ease-out-custom motion-reduce:transition-none",
+  "[&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:transition-colors [&_svg]:duration-normal motion-reduce:[&_svg]:transition-none",
+  "focus-visible:shadow-focus-ring focus-visible:ring-1 focus-visible:ring-accent1 focus-visible:outline-hidden",
+  !isCollapsed && nestedExpandedItemClasses(level),
+  isCollapsed && "w-full justify-center p-0"
+);
+const navItemClasses = ({ isActive, isCollapsed, isFeatured, level, size } = {}) => cn(
+  navItemLayoutClasses({ isCollapsed, level, size }),
+  navRowSurfaceClasses({ isActive, isFeatured }),
+  isCollapsed && !isActive && "[&_svg]:text-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 ? cn(navItemLayoutClasses({ level, size }), "flex-1 pr-1") : navItemClasses({ isActive, isCollapsed, isFeatured, level, size });
+  return /* @__PURE__ */ jsxs("li", { ...props, className: cn("relative flex min-w-0 flex-col", className), children: [
+    /* @__PURE__ */ jsx(NavRowBody, { action: rowAction, surfaceClassName: navRowSurfaceClasses({ isActive, isFeatured }), children: /* @__PURE__ */ jsx(NavRowTooltip, { label: navTooltipLabel(link, isCollapsed), children: navInteractiveRow({ render, asChild, children, link, state, Link, className: itemClassName }) }) }),
+    !isCollapsed && subItems
+  ] });
+}
+function navInteractiveRow({
+  render,
+  asChild,
+  children,
+  link,
+  state,
+  Link,
+  className
+}) {
+  if (render) return React__default.cloneElement(render, { className: cn(className, render.props.className) });
+  if (asChild) {
+    if (!React__default.isValidElement(children)) {
+      throw new Error(
+        "MainSidebarNavLink requires a valid React element child when `asChild` is true so it can apply `SlottedNavChildProps` and merge `itemClassName`."
+      );
+    }
+    return React__default.cloneElement(children, { className: cn(className, children.props.className) });
+  }
+  if (!link) return children;
+  const externalParams = /^(https?:)?\/\//.test(link.url) ? { target: "_blank", rel: "noreferrer" } : {};
+  return /* @__PURE__ */ jsxs(Link, { href: link.url, ...externalParams, className, children: [
+    link.icon,
+    /* @__PURE__ */ jsx(MainSidebarNavLabel, { state, children: link.name }),
+    children
+  ] });
+}
+function navTooltipLabel(link, isCollapsed) {
+  if (!link) return void 0;
+  if (link.tooltipMsg) return isCollapsed ? `${link.name} | ${link.tooltipMsg}` : link.tooltipMsg;
+  return isCollapsed ? link.name : void 0;
+}
+function NavRowTooltip({ label, children }) {
+  if (!label || !React__default.isValidElement(children)) return children;
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { render: children }),
+    /* @__PURE__ */ jsx(TooltipContent, { side: "right", align: "center", sideOffset: 16, children: label })
+  ] });
+}
+function NavRowBody({
+  action,
+  surfaceClassName,
+  children
+}) {
+  if (!action) return children;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 items-center pr-1", surfaceClassName), children: [
+    children,
+    action
+  ] });
+}
+
+function MainSidebarNavList({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx("ul", { className: cn("grid grid-cols-[minmax(0,1fr)] content-center items-start gap-0.5", className), ...props, children });
+}
+
+function MainSidebarNavSection({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx("section", { className: cn("relative grid grid-cols-[minmax(0,1fr)] content-center items-start", className), ...props, children });
+}
+
+function MainSidebarNavSeparator({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "separator",
+      "aria-orientation": "horizontal",
+      className: cn(
+        "relative min-h-5",
+        '[&:after]:absolute [&:after]:inset-x-3 [&:after]:top-1/2 [&:after]:block [&:after]:h-0 [&:after]:border-t [&:after]:border-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 = useRef(false);
+  const dragCleanupRef = useRef(null);
+  useEffect(() => {
+    return () => {
+      dragCleanupRef.current?.();
+      dragCleanupRef.current = null;
+    };
+  }, []);
+  const onPointerDown = useCallback(
+    (event) => {
+      if (event.button !== 0) return;
+      event.preventDefault();
+      draggedRef.current = false;
+      setGestureActive(true);
+      const startX = event.clientX;
+      const handle = event.currentTarget;
+      const pointerId = event.pointerId;
+      try {
+        handle.setPointerCapture(pointerId);
+      } catch {
+      }
+      const sidebarEl = handle.parentElement;
+      const sidebarLeft = sidebarEl ? sidebarEl.getBoundingClientRect().left : 0;
+      const prevCursor = document.body.style.cursor;
+      const prevUserSelect = document.body.style.userSelect;
+      const onMove = (ev) => {
+        if (ev.pointerId !== pointerId) return;
+        const dx = ev.clientX - startX;
+        if (!draggedRef.current) {
+          if (Math.abs(dx) <= DRAG_THRESHOLD) return;
+          draggedRef.current = true;
+          document.body.style.cursor = "col-resize";
+          document.body.style.userSelect = "none";
+        }
+        const cursorWidth = ev.clientX - sidebarLeft;
+        if (collapseBelow > 0 && cursorWidth < collapseBelow) {
+          collapse();
+          return;
+        }
+        expand();
+        setWidth(cursorWidth);
+      };
+      const cleanup = (ev) => {
+        if (ev && ev.pointerId !== pointerId) return;
+        window.removeEventListener("pointermove", onMove);
+        window.removeEventListener("pointerup", cleanup);
+        window.removeEventListener("pointercancel", cleanup);
+        document.body.style.cursor = prevCursor;
+        document.body.style.userSelect = prevUserSelect;
+        setGestureActive(false);
+        commit();
+        dragCleanupRef.current = null;
+      };
+      dragCleanupRef.current = () => cleanup();
+      window.addEventListener("pointermove", onMove);
+      window.addEventListener("pointerup", cleanup);
+      window.addEventListener("pointercancel", cleanup);
+    },
+    [collapseBelow, setWidth, expand, collapse, commit, setGestureActive]
+  );
+  const onClick = useCallback(() => {
+    if (draggedRef.current) {
+      draggedRef.current = false;
+      return;
+    }
+    toggleSidebar();
+  }, [toggleSidebar]);
+  const onKeyDown = useCallback(
+    (event) => {
+      switch (event.key) {
+        case "Enter":
+        case " ": {
+          event.preventDefault();
+          toggleSidebar();
+          return;
+        }
+        case "ArrowLeft": {
+          event.preventDefault();
+          if (isCollapsed) return;
+          setWidth(width - KEYBOARD_STEP);
+          commit();
+          return;
+        }
+        case "ArrowRight": {
+          event.preventDefault();
+          if (isCollapsed) {
+            expand();
+            commit();
+            return;
+          }
+          setWidth(width + KEYBOARD_STEP);
+          commit();
+          return;
+        }
+        case "Home": {
+          event.preventDefault();
+          expand();
+          setWidth(minWidth);
+          commit();
+          return;
+        }
+        case "End": {
+          event.preventDefault();
+          expand();
+          setWidth(maxWidth);
+          commit();
+          return;
+        }
+      }
+    },
+    [isCollapsed, width, minWidth, maxWidth, setWidth, expand, commit, toggleSidebar]
+  );
+  const closeOnAnchor = useCallback(
+    (event) => {
+      const anchor = event.target.closest("a");
+      if (!anchor || !anchor.hasAttribute("href")) return;
+      if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+      if (anchor.target === "_blank" || anchor.hasAttribute("download")) return;
+      setOpenMobile(false);
+    },
+    [setOpenMobile]
+  );
+  if (isMobile) {
+    return /* @__PURE__ */ jsx(Drawer, { side: "left", open: openMobile, onOpenChange: setOpenMobile, children: /* @__PURE__ */ jsxs(
+      DrawerContent,
+      {
+        className: cn(
+          "w-3/4 max-w-(--sidebar-width-mobile) overflow-hidden rounded-none border-0 bg-surface2 shadow-xl",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsx(DrawerTitle, { children: "Navigation" }) }),
+          /* @__PURE__ */ jsx(VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsx(DrawerDescription, { children: "Primary site navigation drawer" }) }),
+          /* @__PURE__ */ jsx("div", { onClick: closeOnAnchor, className: "flex h-full min-h-0 flex-col overflow-hidden px-3 py-2", children })
+        ]
+      }
+    ) });
+  }
+  const currentWidth = isCollapsed ? collapsedWidth : width;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "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__ */ 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(
+                  "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 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-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__ */ 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", children: "[" })
+    ] }) })
+  ] });
+}
+
+const SIDEBAR_STATE_KEY = "sidebar:state";
+const SIDEBAR_WIDTH_KEY = "sidebar:width";
+const SIDEBAR_WIDTH_VAR = "--sidebar-width";
+const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
+const useIsoLayoutEffect = typeof window !== "undefined" ? React__default.useLayoutEffect : React__default.useEffect;
+function MainSidebarProvider({
+  children,
+  defaultState = "default",
+  defaultWidth = 240,
+  minWidth = 200,
+  maxWidth = 480,
+  collapseBelow,
+  collapsedWidth = 64,
+  disableKeyboardShortcut = true,
+  storageKey,
+  mobileBreakpoint = 1024,
+  mobileWidth = 360,
+  LinkComponent
+}) {
+  const safeMin = Math.max(0, Math.min(minWidth, maxWidth));
+  const safeMax = Math.max(safeMin, maxWidth);
+  const safeCollapsed = Math.max(0, Math.min(collapsedWidth, safeMax));
+  const safeDefault = clamp(defaultWidth, safeMin, safeMax);
+  const safeCollapseBelow = collapseBelow ?? safeMin;
+  const stateStorageKey = storageKey ? `${storageKey}:${SIDEBAR_STATE_KEY}` : SIDEBAR_STATE_KEY;
+  const widthStorageKey = storageKey ? `${storageKey}:${SIDEBAR_WIDTH_KEY}` : SIDEBAR_WIDTH_KEY;
+  const readInitial = () => {
+    if (typeof window === "undefined") return { state: defaultState, width: safeDefault };
+    try {
+      let nextState = defaultState;
+      let nextWidth = safeDefault;
+      const storedState = window.localStorage.getItem(stateStorageKey);
+      if (storedState === "collapsed" || storedState === "default") nextState = storedState;
+      const storedWidth = window.localStorage.getItem(widthStorageKey);
+      if (storedWidth !== null) {
+        const parsed = Number(storedWidth);
+        if (Number.isFinite(parsed)) nextWidth = clamp(parsed, safeMin, safeMax);
+      }
+      return { state: nextState, width: nextWidth };
+    } catch {
+      return { state: defaultState, width: safeDefault };
+    }
+  };
+  const initialRef = React__default.useRef(null);
+  if (initialRef.current === null) initialRef.current = readInitial();
+  const initial = initialRef.current;
+  const [state, setState] = React__default.useState(initial.state);
+  const [width, setWidthState] = React__default.useState(initial.width);
+  const [isMobile, setIsMobile] = React__default.useState(false);
+  const [openMobile, setOpenMobile] = React__default.useState(false);
+  const widthRef = React__default.useRef(initial.width);
+  const stateRef = React__default.useRef(initial.state);
+  stateRef.current = state;
+  const scopeRef = React__default.useRef(null);
+  React__default.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mq = window.matchMedia(`(max-width: ${mobileBreakpoint - 1}px)`);
+    const update = () => setIsMobile(mq.matches);
+    update();
+    mq.addEventListener("change", update);
+    return () => mq.removeEventListener("change", update);
+  }, [mobileBreakpoint]);
+  React__default.useEffect(() => {
+    if (!isMobile && openMobile) setOpenMobile(false);
+  }, [isMobile, openMobile]);
+  const writeCssVar = React__default.useCallback((px) => {
+    const el = scopeRef.current;
+    if (el) el.style.setProperty(SIDEBAR_WIDTH_VAR, `${px}px`);
+  }, []);
+  useIsoLayoutEffect(() => {
+    writeCssVar(state === "collapsed" ? safeCollapsed : widthRef.current);
+  }, [state, safeCollapsed, writeCssVar]);
+  const persistState = React__default.useCallback(
+    (next) => {
+      try {
+        window.localStorage.setItem(stateStorageKey, next);
+      } catch {
+      }
+    },
+    [stateStorageKey]
+  );
+  const toggleSidebar = React__default.useCallback(() => {
+    if (isMobile) {
+      setOpenMobile((prev) => !prev);
+      return;
+    }
+    setState((prev) => {
+      const next = prev === "default" ? "collapsed" : "default";
+      stateRef.current = next;
+      persistState(next);
+      return next;
+    });
+  }, [isMobile, persistState]);
+  const setWidth = React__default.useCallback(
+    (next) => {
+      const clamped = clamp(next, safeMin, safeMax);
+      widthRef.current = clamped;
+      writeCssVar(clamped);
+    },
+    [safeMin, safeMax, writeCssVar]
+  );
+  const collapse = React__default.useCallback(() => {
+    stateRef.current = "collapsed";
+    persistState("collapsed");
+    setState("collapsed");
+  }, [persistState]);
+  const expand = React__default.useCallback(() => {
+    stateRef.current = "default";
+    persistState("default");
+    setState("default");
+  }, [persistState]);
+  const commit = React__default.useCallback(() => {
+    setWidthState(widthRef.current);
+    try {
+      window.localStorage.setItem(stateStorageKey, stateRef.current);
+      window.localStorage.setItem(widthStorageKey, String(widthRef.current));
+    } catch {
+    }
+  }, [stateStorageKey, widthStorageKey]);
+  const setGestureActive = React__default.useCallback((active) => {
+    const el = scopeRef.current;
+    if (!el) return;
+    if (active) el.setAttribute("data-sidebar-gesture", "active");
+    else el.removeAttribute("data-sidebar-gesture");
+  }, []);
+  React__default.useEffect(() => {
+    if (disableKeyboardShortcut) return;
+    const onKeyDown = (ev) => {
+      if (ev.code !== "KeyB") return;
+      if (!(ev.metaKey || ev.ctrlKey)) return;
+      if (ev.altKey || ev.shiftKey) return;
+      const target = ev.target;
+      if (target) {
+        const tag = target.tagName;
+        if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return;
+        if (target.isContentEditable) return;
+      }
+      ev.preventDefault();
+      toggleSidebar();
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [disableKeyboardShortcut, toggleSidebar]);
+  const effectiveState = isMobile ? "default" : state;
+  const contextValue = React__default.useMemo(
+    () => ({
+      state: effectiveState,
+      desktopState: state,
+      width,
+      minWidth: safeMin,
+      maxWidth: safeMax,
+      collapseBelow: safeCollapseBelow,
+      collapsedWidth: safeCollapsed,
+      isMobile,
+      toggleSidebar,
+      setWidth,
+      collapse,
+      expand,
+      commit,
+      setGestureActive,
+      LinkComponent
+    }),
+    [
+      effectiveState,
+      state,
+      width,
+      safeMin,
+      safeMax,
+      safeCollapseBelow,
+      safeCollapsed,
+      isMobile,
+      toggleSidebar,
+      setWidth,
+      collapse,
+      expand,
+      commit,
+      setGestureActive,
+      LinkComponent
+    ]
+  );
+  const drawerValue = React__default.useMemo(() => ({ openMobile, setOpenMobile }), [openMobile]);
+  const scopeStyle = {
+    [SIDEBAR_WIDTH_VAR]: `${initial.state === "collapsed" ? safeCollapsed : initial.width}px`,
+    ["--sidebar-width-mobile"]: `${mobileWidth}px`,
+    display: "contents"
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: scopeRef,
+      "data-sidebar-scope": true,
+      "data-sidebar-state": state,
+      "data-sidebar-mobile": isMobile ? "true" : "false",
+      style: scopeStyle,
+      suppressHydrationWarning: true,
+      children: /* @__PURE__ */ jsx(MainSidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(MobileDrawerContext.Provider, { value: drawerValue, children }) })
+    }
+  );
+}
+
+function getIsLinkActive(link, pathname, siblings = []) {
+  const matches = (url) => pathname === url || pathname.startsWith(url + "/");
+  const flattenLinks = (links) => links.flatMap((item) => [item, ...flattenLinks(item.children ?? [])]);
+  if (!matches(link.url)) return false;
+  const competingLinks = [...flattenLinks(link.children ?? []), ...flattenLinks(siblings)];
+  return !competingLinks.some(
+    (other) => other.url !== link.url && other.url.length > link.url.length && matches(other.url)
+  );
+}
+
+export { MainSidebarNavSection as M, MainSidebarNavSeparator as a, MainSidebarNavList as b, MainSidebarNavLink as c, MainSidebarRoot as d, MainSidebarMobileTrigger as e, MainSidebarTrigger as f, MainSidebarNavLabel as g, MainSidebarNav as h, MainSidebarProvider as i, getIsLinkActive as j, useMainSidebar as k, useMaybeSidebar as l, useMobileDrawer as m, navItemClasses as n, useMaybeSidebarState as u };
+//# sourceMappingURL=main-sidebar-link-active-BK4RR4Az.js.map