@mastra/playground-ui 61.0.0-alpha.6 → 61.0.0

package/dist/new/sidebar.es.js

@@ -1,705 +0,0 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { k as useMainSidebar, u as useMaybeSidebarState, f as MainSidebarTrigger, h as MainSidebarNav, n as navItemClasses, d as MainSidebarRoot, c as MainSidebarNavLink, b as MainSidebarNavList, g as MainSidebarNavLabel, M as MainSidebarNavSection, a as MainSidebarNavSeparator, i as MainSidebarProvider, e as MainSidebarMobileTrigger } from '../main-sidebar-link-active-JtKNF9hx.js';
-import '../sidebar.css';export { j as getIsLinkActive } from '../main-sidebar-link-active-JtKNF9hx.js';
-import { T as Txt } from '../Txt-C3cYJgKU.js';
-import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
-import { c as cn } from '../cn-65Adrsfj.js';
-import React__default, { forwardRef, useState, useId } from 'react';
-import { surfaceStateLayerStyle, frameSurfaceStyle } from '../primitives/raised-surface.es.js';
-import { ArrowLeftIcon, ChevronDownIcon, MoreHorizontalIcon } from 'lucide-react';
-import { K as Kbd } from '../kbd-BDVTQHD_.js';
-import { focusRing, controlStateColorTransition } from '../primitives/transitions.es.js';
-import { quietTextHoverInGroup, quietTextHover } from '../primitives/typography.es.js';
-import { z } from 'zod/v4';
-import { useLocalStorageState } from '../hooks/use-local-storage-state.es.js';
-
-function SidebarNewBrand({ logo, title, className, ...props }) {
-  const { state } = useMainSidebar();
-  return /* @__PURE__ */ jsxs("div", { "data-slot": "sidebar-new-brand", className: cn("flex min-w-0 flex-1 items-center gap-2", className), ...props, children: [
-    logo ? /* @__PURE__ */ jsx("span", { className: "shrink-0", children: logo }) : null,
-    state === "collapsed" ? /* @__PURE__ */ jsx(VisuallyHidden, { children: title }) : /* @__PURE__ */ jsx(Txt, { as: "span", variant: "subheading", tone: "ink", className: "truncate font-body tracking-tight", children: title })
-  ] });
-}
-
-const SidebarNewCommandHeader = forwardRef(
-  function SidebarNewCommandHeader2({ className, children, ...props }, ref) {
-    const { state, isMobile } = useMainSidebar();
-    return /* @__PURE__ */ jsx(
-      "header",
-      {
-        ref,
-        "data-slot": "sidebar-new-command-header",
-        "data-state": state,
-        className: cn(
-          "flex h-header-default shrink-0 items-center gap-1 overflow-hidden",
-          state === "collapsed" ? "px-3" : "pr-2 pl-3.5",
-          state !== "collapsed" && !isMobile && "w-[calc(var(--sidebar-width)-1rem)]",
-          state === "collapsed" && "[&_[data-slot=sidebar-new-search-trigger]]:hidden",
-          className
-        ),
-        ...props,
-        children
-      }
-    );
-  }
-);
-
-function SidebarNewFooter({ className, children, ...props }) {
-  return /* @__PURE__ */ jsx("footer", { "data-slot": "sidebar-new-footer", className: cn("mt-auto shrink-0 space-y-1.5 pb-2", className), ...props, children });
-}
-
-const SidebarNewFooterMeta = forwardRef(function SidebarNewFooterMeta2({ className, children, action, ...props }, ref) {
-  const { state } = useMainSidebar();
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref,
-      "data-slot": "sidebar-new-footer-meta",
-      "data-state": state,
-      className: cn(
-        "grid min-h-10 grid-cols-[minmax(0,1fr)_auto_0fr] items-center border-t border-border px-2 py-1 text-meta text-muted-foreground",
-        "transition-[grid-template-columns] duration-slow ease-out-custom motion-reduce:transition-none",
-        state === "collapsed" && "grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] px-0",
-        className
-      ),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            "aria-hidden": state === "collapsed",
-            className: cn(
-              "min-w-0 truncate transition-opacity duration-normal ease-out-custom motion-reduce:transition-none",
-              state === "collapsed" && "opacity-0"
-            ),
-            children
-          }
-        ),
-        action,
-        /* @__PURE__ */ jsx("span", { "aria-hidden": true })
-      ]
-    }
-  );
-});
-
-function SidebarNewTrigger(props) {
-  const context = useMaybeSidebarState();
-  if (context?.isMobile) return null;
-  return /* @__PURE__ */ jsx(MainSidebarTrigger, { ...props });
-}
-
-const hold = "animate-[sidebar-hold_var(--resize-dur)] motion-reduce:animate-none";
-function SidebarNewHeader({ className, children, collapsedLogo, ...props }) {
-  const sidebar = useMaybeSidebarState();
-  const collapsed = sidebar?.state === "collapsed";
-  const isMobile = sidebar?.isMobile ?? false;
-  return /* @__PURE__ */ jsx(
-    "header",
-    {
-      "data-slot": "sidebar-new-header",
-      className: cn(
-        "flex h-header-default shrink-0 items-center gap-2",
-        collapsed ? "px-1" : "pr-2 pl-3.5",
-        // Target width, not the animating one, so the title doesn't re-truncate while expanding.
-        !collapsed && !isMobile && "w-[calc(var(--sidebar-width)-1rem)]",
-        className
-      ),
-      ...props,
-      children: collapsed && collapsedLogo ? (
-        // ml-0.5 instead of mx-auto, so it doesn't jump while the sidebar collapses.
-        /* @__PURE__ */ jsxs("div", { className: "group/collapsed-logo relative ml-0.5 grid size-9 shrink-0 place-items-center", children: [
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: cn(
-                hold,
-                "grid place-items-center transition-opacity duration-normal [--sidebar-hold-opacity:1] group-focus-within/collapsed-logo:opacity-0 group-hover/sidebar:opacity-0 motion-reduce:transition-none"
-              ),
-              children: collapsedLogo
-            }
-          ),
-          isMobile ? null : /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: cn(
-                hold,
-                "absolute inset-0 grid place-items-center opacity-0 transition-opacity duration-normal [--sidebar-hold-opacity:0] group-hover/sidebar:opacity-100 focus-within:opacity-100 motion-reduce:transition-none"
-              ),
-              children: /* @__PURE__ */ jsx(SidebarNewTrigger, {})
-            }
-          )
-        ] })
-      ) : children
-    }
-  );
-}
-
-const NOISE = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")`;
-const CARD_HEIGHT = 76;
-const BLOOM_HEIGHT = 100;
-const BLOOM_HOLD_Y = 60;
-const BLOOM_HOLD_X = 22.5;
-const GRAIN_OPACITY = 0.18;
-const GRAIN_SIZE = 110;
-const FALLOFF_RAMP = [0, 0.08, 0.16, 0.25, 0.34, 0.44, 0.55, 0.66, 0.78, 0.89, 1];
-const TONES = {
-  neutral: { colorVar: "--foreground", peak: 0.08, grain: true, text: "text-muted-foreground" },
-  warning: {
-    colorVar: "--warning-indicator",
-    peak: 0.16,
-    grain: false,
-    text: "text-warning-foreground"
-  },
-  danger: {
-    colorVar: "--destructive-indicator",
-    peak: 0.16,
-    grain: false,
-    text: "text-destructive-foreground"
-  }
-};
-function cubicFalloff(position) {
-  const inverse = 1 - position;
-  return inverse * inverse * inverse;
-}
-function easedBloom(colorVar, peak) {
-  const stops = FALLOFF_RAMP.map((position) => {
-    const alpha = (peak * cubicFalloff(position) * 100).toFixed(2);
-    return `color-mix(in oklch, var(${colorVar}) ${alpha}%, transparent) ${(position * 100).toFixed(0)}%`;
-  });
-  return `linear-gradient(to right, ${stops.join(", ")})`;
-}
-function easedMask(direction, hold) {
-  const stops = FALLOFF_RAMP.map((position) => {
-    const offset = (hold + (100 - hold) * position).toFixed(2);
-    return `rgb(0 0 0 / ${cubicFalloff(position).toFixed(3)}) ${offset}%`;
-  });
-  return `linear-gradient(${direction}, rgb(0 0 0 / 1) 0%, ${stops.join(", ")})`;
-}
-const BLOOM_MASK = `${easedMask("to bottom", BLOOM_HOLD_Y)}, ${easedMask("to right", BLOOM_HOLD_X)}`;
-function Bloom({ tone }) {
-  const current = TONES[tone];
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      "aria-hidden": true,
-      "data-slot": "sidebar-new-meter-bloom",
-      className: "pointer-events-none absolute inset-x-0 top-0 -z-10",
-      style: {
-        height: BLOOM_HEIGHT,
-        backgroundImage: easedBloom(current.colorVar, current.peak),
-        maskImage: BLOOM_MASK,
-        maskComposite: "intersect"
-      },
-      children: current.grain ? /* @__PURE__ */ jsx(
-        "span",
-        {
-          "aria-hidden": true,
-          className: "absolute inset-0",
-          style: {
-            backgroundImage: NOISE,
-            backgroundRepeat: "repeat",
-            backgroundSize: `${GRAIN_SIZE}px ${GRAIN_SIZE}px`,
-            opacity: GRAIN_OPACITY
-          }
-        }
-      ) : null
-    }
-  );
-}
-const SidebarNewMeter = forwardRef(function SidebarNewMeter2({
-  label,
-  value,
-  status,
-  tone = "neutral",
-  icon,
-  action,
-  href,
-  linkLabel,
-  LinkComponent: LinkProp,
-  state: stateProp,
-  className,
-  ...props
-}, ref) {
-  const ctx = useMaybeSidebarState();
-  const state = stateProp ?? ctx?.state ?? "default";
-  const Link = LinkProp ?? ctx?.LinkComponent ?? "a";
-  const isCollapsed = state === "collapsed";
-  const current = TONES[tone];
-  if (isCollapsed) {
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref,
-        "data-slot": "sidebar-new-meter",
-        "data-tone": tone,
-        "data-state": state,
-        className: cn(
-          "relative isolate flex items-center justify-center overflow-hidden rounded-lg border border-border bg-background px-1 py-2",
-          className
-        ),
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx(Bloom, { tone }),
-          href ? /* @__PURE__ */ jsx(Link, { href, className: "absolute inset-0 rounded-lg", "aria-label": linkLabel }) : null,
-          /* @__PURE__ */ jsx(Txt, { as: "span", variant: "meta", tone: "ink", className: "pointer-events-none relative tabular-nums", children: value })
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref,
-      "data-slot": "sidebar-new-meter",
-      "data-tone": tone,
-      "data-state": state,
-      className: cn(
-        "relative isolate flex flex-col justify-center overflow-hidden rounded-lg border border-border bg-background px-3",
-        href && surfaceStateLayerStyle,
-        className
-      ),
-      style: { height: CARD_HEIGHT },
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx(Bloom, { tone }),
-        href ? /* @__PURE__ */ jsx(Link, { href, className: "absolute inset-0 rounded-lg", "aria-label": linkLabel }) : null,
-        /* @__PURE__ */ jsxs("div", { className: "pointer-events-none relative", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-            tone === "neutral" ? null : icon,
-            /* @__PURE__ */ jsx(Txt, { as: "span", variant: "column", tone: "muted", children: label }),
-            action ? /* @__PURE__ */ jsx("span", { className: "pointer-events-auto", children: action }) : null
-          ] }),
-          /* @__PURE__ */ jsx(Txt, { variant: "heading", tone: "ink", className: "mt-0.5 leading-tight tabular-nums", children: value }),
-          status ? /* @__PURE__ */ jsx("div", { className: "mt-1 text-meta", children: /* @__PURE__ */ jsx("p", { className: cn("truncate", current.text), children: status }) }) : null
-        ] })
-      ]
-    }
-  );
-});
-
-function SidebarNewNav({ children, className, ...props }) {
-  const isMobile = useMaybeSidebarState()?.isMobile ?? false;
-  return /* @__PURE__ */ jsx(
-    MainSidebarNav,
-    {
-      className: cn(
-        "-mr-1.5",
-        "[&_[data-slot=scroll-area-scrollbar][data-orientation=vertical]]:w-1 [&_[data-slot=scroll-area-scrollbar][data-orientation=vertical]]:p-0",
-        "focus-within:[&_[data-slot=scroll-area-scrollbar][data-orientation=vertical][data-has-overflow-y]]:opacity-100",
-        isMobile && "[&_a]:min-h-11 [&_a]:touch-manipulation [&_button]:min-h-11 [&_button]:touch-manipulation",
-        className
-      ),
-      ...props,
-      children: /* @__PURE__ */ jsx("div", { className: "pr-1.5", children })
-    }
-  );
-}
-
-function SidebarNewNavHeader({
-  children,
-  className,
-  state: stateProp,
-  href,
-  isActive,
-  LinkComponent: LinkProp,
-  ...props
-}) {
-  const context = useMaybeSidebarState();
-  const state = stateProp ?? context?.state ?? "default";
-  const showTitle = state === "default";
-  const Link = LinkProp ?? context?.LinkComponent ?? "a";
-  return (
-    // Same 40px slot in both states, so rows don't shift when collapsing; the divider is centered in it.
-    /* @__PURE__ */ jsx("div", { className: cn("flex min-w-0 items-center", showTitle ? "mt-3 min-h-7" : "h-10", 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": !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" })
-    ] }) })
-  );
-}
-
-const SidebarNewNavStackContext = React__default.createContext(void 0);
-function useSidebarNewNavStack() {
-  const context = React__default.useContext(SidebarNewNavStackContext);
-  if (!context) throw new Error("SidebarNew.NavStack components must be used within SidebarNew.NavStack.");
-  return context;
-}
-
-function SidebarNewNavStackRoot({
-  value,
-  rootValue = "root",
-  onValueChange,
-  children,
-  className,
-  ...props
-}) {
-  function closeView(returnFocusRef) {
-    onValueChange(rootValue);
-    requestAnimationFrame(() => {
-      const target = returnFocusRef?.current;
-      if (target && !target.closest("[inert]")) target.focus();
-    });
-  }
-  return /* @__PURE__ */ jsx(SidebarNewNavStackContext.Provider, { value: { activeValue: value, rootValue, closeView }, children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "sidebar-new-nav-stack",
-      "data-value": value,
-      className: cn("relative grid min-w-0 overflow-hidden", className),
-      ...props,
-      children
-    }
-  ) });
-}
-
-function sidebarNewNavStackPageClasses(active, page, className) {
-  return cn(
-    "col-start-1 row-start-1 min-w-0 transition-[opacity,translate] duration-normal ease-out-custom will-change-[opacity,translate] motion-reduce:transition-none",
-    active && "relative translate-x-0 opacity-100",
-    !active && "pointer-events-none absolute inset-0 opacity-0",
-    !active && page === "root" && "-translate-x-2",
-    !active && page === "view" && "translate-x-2",
-    className
-  );
-}
-
-function SidebarNewNavStackRootView({ children, className, ...props }) {
-  const { state } = useMainSidebar();
-  const { activeValue, rootValue } = useSidebarNewNavStack();
-  const active = state === "collapsed" || activeValue === rootValue;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...props,
-      "data-slot": "sidebar-new-nav-stack-root",
-      "aria-hidden": !active,
-      inert: !active,
-      className: sidebarNewNavStackPageClasses(active, "root", className),
-      children
-    }
-  );
-}
-
-function SidebarNewNavStackView({
-  value,
-  title,
-  backLabel = "Back to main navigation",
-  returnFocusRef,
-  onBack,
-  children,
-  className,
-  ...props
-}) {
-  const { state } = useMainSidebar();
-  const { activeValue, closeView } = useSidebarNewNavStack();
-  const active = state !== "collapsed" && activeValue === value;
-  const backRef = React__default.useRef(null);
-  const wasActiveRef = React__default.useRef(active);
-  React__default.useEffect(() => {
-    if (active && !wasActiveRef.current) backRef.current?.focus();
-    wasActiveRef.current = active;
-  }, [active]);
-  React__default.useEffect(() => {
-    if (!active) return;
-    function handleKeyDown(event) {
-      if (event.key !== "Escape" || event.defaultPrevented) return;
-      event.preventDefault();
-      closeView(returnFocusRef);
-      onBack?.();
-    }
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [active, closeView, onBack, returnFocusRef]);
-  function handleBack() {
-    closeView(returnFocusRef);
-    onBack?.();
-  }
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ...props,
-      "data-slot": "sidebar-new-nav-stack-view",
-      "data-value": value,
-      "aria-hidden": !active,
-      inert: !active,
-      className: sidebarNewNavStackPageClasses(active, "view", className),
-      children: [
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            ref: backRef,
-            type: "button",
-            "aria-label": `${backLabel}: ${title}`,
-            onClick: handleBack,
-            className: cn(navItemClasses(), "mb-2 grid grid-cols-[2rem_1fr_2rem] px-1"),
-            children: [
-              /* @__PURE__ */ jsx(ArrowLeftIcon, { className: "justify-self-center", "aria-hidden": "true" }),
-              /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate text-center", children: title }),
-              /* @__PURE__ */ jsx("span", { "aria-hidden": "true" })
-            ]
-          }
-        ),
-        children
-      ]
-    }
-  );
-}
-
-const SidebarNewNavStack = Object.assign(SidebarNewNavStackRoot, {
-  Root: SidebarNewNavStackRootView,
-  View: SidebarNewNavStackView
-});
-
-function SidebarNewRoot({
-  "aria-label": ariaLabel = "Sidebar",
-  mobileMode = "takeover",
-  variant = "default",
-  children,
-  ...props
-}) {
-  const sidebar = useMaybeSidebarState();
-  const isRaised = variant === "raised" && !sidebar?.isMobile;
-  return /* @__PURE__ */ jsx("aside", { "aria-label": ariaLabel, className: "contents", children: /* @__PURE__ */ jsx(MainSidebarRoot, { mobileMode, ...props, children: isRaised ? /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-slot": "sidebar-new-surface",
-      className: cn(
-        "my-2 -mr-2 -ml-4 flex min-h-0 flex-1 flex-col overflow-hidden rounded-r-xl py-1.5",
-        sidebar?.state === "collapsed" ? "pr-2 pl-4" : "pr-3.5 pl-5.5",
-        frameSurfaceStyle
-      ),
-      children
-    }
-  ) : children }) });
-}
-
-const SidebarNewSearchTrigger = forwardRef(
-  function SidebarNewSearchTrigger2({ className, children, shortcut, type = "button", ...props }, ref) {
-    return /* @__PURE__ */ jsxs(
-      "button",
-      {
-        ref,
-        "data-slot": "sidebar-new-search-trigger",
-        type,
-        className: cn(
-          "group inline-flex size-control-md shrink-0 items-center justify-center gap-1.5 rounded-full border border-transparent hover:bg-fill-subtle",
-          quietTextHover,
-          controlStateColorTransition,
-          focusRing,
-          "[&_svg]:size-4 [&_svg]:shrink-0",
-          shortcut && "w-auto px-2",
-          className
-        ),
-        ...props,
-        children: [
-          children,
-          shortcut ? /* @__PURE__ */ jsx(Kbd, { size: "xs", className: cn("bg-surface-overlay-soft active:scale-100", quietTextHoverInGroup), children: shortcut }) : null
-        ]
-      }
-    );
-  }
-);
-
-function getSidebarNewLinkKey(link) {
-  return `${link.url}:${link.name}`;
-}
-function SidebarNewSectionLink({
-  link,
-  activeCandidates,
-  level = 0,
-  isActive,
-  onSelect
-}) {
-  const childLinks = link.children ?? [];
-  return /* @__PURE__ */ jsx(
-    MainSidebarNavLink,
-    {
-      link,
-      isActive: isActive?.(link, activeCandidates) ?? link.isActive,
-      level,
-      onClick: (event) => {
-        if (event.target instanceof Element && event.target.closest("li") !== event.currentTarget) return;
-        onSelect?.(link);
-      },
-      subItems: childLinks.length > 0 ? /* @__PURE__ */ jsx(MainSidebarNavList, { className: "mt-0.5", children: childLinks.map((child) => /* @__PURE__ */ jsx(
-        SidebarNewSectionLink,
-        {
-          link: child,
-          activeCandidates,
-          level: level + 1,
-          isActive,
-          onSelect
-        },
-        getSidebarNewLinkKey(child)
-      )) }) : null
-    }
-  );
-}
-
-function SidebarNewMoreLinks({
-  links,
-  activeCandidates,
-  isActive,
-  recentLinks,
-  recentCutoff,
-  onSelect
-}) {
-  const [expanded, setExpanded] = useState(false);
-  const linkIsActive = (link) => isActive?.(link, activeCandidates) ?? link.isActive ?? false;
-  const surfacedLinks = links.length < 2 ? links : links.filter((link) => linkIsActive(link) || (recentLinks[`${link.url}:${link.name}`] ?? 0) >= recentCutoff);
-  const foldedLinks = links.filter((link) => !surfacedLinks.includes(link));
-  function renderLink(link) {
-    return /* @__PURE__ */ jsx(
-      SidebarNewSectionLink,
-      {
-        link,
-        activeCandidates,
-        isActive,
-        onSelect
-      },
-      `${link.url}:${link.name}`
-    );
-  }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    surfacedLinks.map(renderLink),
-    foldedLinks.length > 0 ? /* @__PURE__ */ jsx(
-      MainSidebarNavLink,
-      {
-        link: { name: "More", url: "", icon: /* @__PURE__ */ jsx(MoreHorizontalIcon, {}) },
-        render: /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            "aria-label": "More",
-            "aria-expanded": expanded,
-            onClick: () => setExpanded((current) => !current),
-            children: [
-              /* @__PURE__ */ jsx(MoreHorizontalIcon, { "aria-hidden": "true" }),
-              /* @__PURE__ */ jsx(MainSidebarNavLabel, { children: "More" })
-            ]
-          }
-        ),
-        action: /* @__PURE__ */ jsx(
-          ChevronDownIcon,
-          {
-            "aria-hidden": "true",
-            className: cn(
-              "size-3.5 transition-transform duration-normal ease-out-custom motion-reduce:transition-none",
-              expanded && "rotate-180"
-            )
-          }
-        )
-      }
-    ) : null,
-    expanded ? foldedLinks.map(renderLink) : null
-  ] });
-}
-
-const recentLinkRetentionMs = 7 * 24 * 60 * 60 * 1e3;
-const recentLinksSchema = z.record(z.string(), z.number());
-const defaultRecentItemsStorageKey = "mastra:sidebar-new:recent-more-items";
-function getLinkKey(link) {
-  return `${link.url}:${link.name}`;
-}
-function SidebarNewSections({
-  sections,
-  isActive,
-  className,
-  recentItemsStorageKey = defaultRecentItemsStorageKey
-}) {
-  const baseId = useId();
-  const [renderedAt] = useState(Date.now);
-  const [recentLinks, setRecentLinks] = useLocalStorageState({
-    initialKey: recentItemsStorageKey,
-    defaultValue: {},
-    schema: recentLinksSchema
-  });
-  const recentCutoff = renderedAt - recentLinkRetentionMs;
-  function rememberLink(link) {
-    setRecentLinks((current) => ({ ...current, [getLinkKey(link)]: Date.now() }));
-  }
-  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;
-    const activeCandidates = [...section.links, ...section.moreLinks ?? []];
-    return /* @__PURE__ */ jsxs(
-      MainSidebarNavSection,
-      {
-        className,
-        "aria-labelledby": headerId,
-        "aria-label": !headerId ? section.key : void 0,
-        children: [
-          showSeparator ? /* @__PURE__ */ jsx(MainSidebarNavSeparator, { className: "[&:after]:border-border" }) : null,
-          section.title ? /* @__PURE__ */ jsx(SidebarNewNavHeader, { id: headerId, href: section.href, isActive: section.isHeaderActive, children: section.title }) : null,
-          /* @__PURE__ */ jsxs(MainSidebarNavList, { children: [
-            section.links.map((link) => /* @__PURE__ */ jsx(
-              SidebarNewSectionLink,
-              {
-                link,
-                activeCandidates,
-                isActive
-              },
-              getLinkKey(link)
-            )),
-            section.moreLinks?.length ? /* @__PURE__ */ jsx(
-              SidebarNewMoreLinks,
-              {
-                links: section.moreLinks,
-                activeCandidates,
-                isActive,
-                recentLinks,
-                recentCutoff,
-                onSelect: rememberLink
-              }
-            ) : null
-          ] })
-        ]
-      },
-      section.key
-    );
-  }) });
-}
-
-const SidebarNew = Object.assign(SidebarNewRoot, {
-  Brand: SidebarNewBrand,
-  CommandHeader: SidebarNewCommandHeader,
-  Footer: SidebarNewFooter,
-  FooterMeta: SidebarNewFooterMeta,
-  Header: SidebarNewHeader,
-  Meter: SidebarNewMeter,
-  MobileTrigger: MainSidebarMobileTrigger,
-  Nav: SidebarNewNav,
-  NavHeader: SidebarNewNavHeader,
-  NavLabel: MainSidebarNavLabel,
-  NavLink: MainSidebarNavLink,
-  NavList: MainSidebarNavList,
-  NavSection: MainSidebarNavSection,
-  NavSeparator: MainSidebarNavSeparator,
-  NavStack: SidebarNewNavStack,
-  Provider: MainSidebarProvider,
-  SearchTrigger: SidebarNewSearchTrigger,
-  Sections: SidebarNewSections,
-  Trigger: SidebarNewTrigger
-});
-
-export { SidebarNew, SidebarNewBrand, SidebarNewCommandHeader, SidebarNewFooter, SidebarNewFooterMeta, SidebarNewHeader, SidebarNewMeter, SidebarNewNav, SidebarNewNavHeader, SidebarNewNavStack, MainSidebarProvider as SidebarNewProvider, SidebarNewRoot, SidebarNewSearchTrigger, SidebarNewSections, SidebarNewTrigger, navItemClasses, useMainSidebar as useSidebarNew };
-//# sourceMappingURL=sidebar.es.js.map