@mastra/playground-ui 46.0.0-alpha.4 → 46.0.0-alpha.6

package/dist/components/MainSidebar.es.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { c as cn } from '../cn-BakJzhuv.js';
-import { MenuIcon, PanelRightIcon, KeyboardIcon } from 'lucide-react';
+import { MenuIcon, PanelRightIcon } from 'lucide-react';
 import React__default, { useRef, useEffect, useCallback, useId } from 'react';
 import { S as ScrollArea } from '../scroll-area-DZrEuKjC.js';
 import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
@@ -13,11 +13,11 @@ 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 useMaybeSidebarState() {
+  return React__default.useContext(MainSidebarContext);
+}
 function useMainSidebar() {
   const ctx = React__default.useContext(MainSidebarContext);
   const drawer = React__default.useContext(MobileDrawerContext);
@@ -32,201 +32,10 @@ function useMaybeSidebar() {
   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 useMobileDrawer() {
+  const drawer = React__default.useContext(MobileDrawerContext);
+  if (!drawer) throw new Error("useMobileDrawer must be used within a MainSidebarProvider.");
+  return drawer;
 }
 
 function MainSidebarMobileTrigger({
@@ -281,7 +90,7 @@ function MainSidebarNavHeader({
   LinkComponent: LinkProp,
   ...props
 }) {
-  const ctx = useMaybeSidebar();
+  const ctx = useMaybeSidebarState();
   const state = stateProp ?? ctx?.state ?? "default";
   const isMobile = ctx?.isMobile ?? false;
   const Link = LinkProp ?? ctx?.LinkComponent ?? "a";
@@ -313,7 +122,7 @@ function MainSidebarNavHeader({
 }
 
 function MainSidebarNavLabel({ children, className, state: stateProp, ...rest }) {
-  const ctx = useMaybeSidebar();
+  const ctx = useMaybeSidebarState();
   const state = stateProp ?? ctx?.state ?? "default";
   if (state === "collapsed") {
     return /* @__PURE__ */ jsx(VisuallyHidden, { children });
@@ -368,7 +177,7 @@ function MainSidebarNavLink({
   asChild = false,
   ...props
 }) {
-  const ctx = useMaybeSidebar();
+  const ctx = useMaybeSidebarState();
   const state = stateProp ?? ctx?.state ?? "default";
   const Link = LinkProp ?? ctx?.LinkComponent ?? "a";
   const isCollapsed = state === "collapsed";
@@ -762,16 +571,210 @@ function MainSidebarTrigger({ className, onClick, ...props }) {
         )
       }
     ),
-    /* @__PURE__ */ jsxs(TooltipContent, { children: [
-      "Toggle Sidebar",
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 [&>svg]:size-[1em]", children: [
-        /* @__PURE__ */ jsx(KeyboardIcon, {}),
-        " Ctrl+B"
-      ] })
-    ] })
+    /* @__PURE__ */ jsx(TooltipContent, { children: "Toggle Sidebar" })
   ] });
 }
 
+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 ?? [])]);
@@ -796,5 +799,5 @@ const MainSidebar = Object.assign(MainSidebarRoot, {
   MobileTrigger: MainSidebarMobileTrigger
 });
 
-export { MainSidebar, MainSidebarMobileTrigger, MainSidebarProvider, MainSidebarTrigger, getIsLinkActive, navItemClasses, useMainSidebar, useMaybeSidebar };
+export { MainSidebar, MainSidebarMobileTrigger, MainSidebarProvider, MainSidebarTrigger, getIsLinkActive, navItemClasses, useMainSidebar, useMaybeSidebar, useMaybeSidebarState, useMobileDrawer };
 //# sourceMappingURL=MainSidebar.es.js.map