@elevasis/ui 1.8.0 → 1.8.1

package/dist/layout/index.js

@@ -1,1439 +1,4 @@
-import { NavigationButton, ElevasisLoader } from '../chunk-YGYF6G7W.js';
+export { AppShellCenteredContainer, AppShellContainer, AppShellContentContainer, AppShellError, AppShellLoader, AppShellRightSideContainer, AppShellRightSideOuterContainer, AppTopbarAdjusterWrapper, CollapsibleSidebarGroup, FilmGrain, FloatingOrbs, LinksGroup, PageContainer, PerspectiveGrid, RadiantGlow, Sidebar, SidebarListItem, SidebarProvider, SubshellContainer, SubshellContentContainer, SubshellLoader, SubshellRightSideContainer, SubshellSidebar, SubshellSidebarSection, Topbar, TopbarContainer, Vignette, sidebarCollapsedWidth, sidebarHoverDelay, sidebarTransitionDuration, sidebarWidth, subsidebarWidth, topbarHeight, useSidebar, useSidebarCollapse } from '../chunk-WSVFUERF.js';
+import '../chunk-YGYF6G7W.js';
 import '../chunk-LHQTTUL2.js';
-import { useRouterContext } from '../chunk-Q7DJKLEN.js';
-import { Collapse, HoverCard, Stack, Group, Text, UnstyledButton, Tooltip, ScrollArea, Menu, Avatar, useComputedColorScheme, Container, Loader, Title, Button, Box, Center, useMantineColorScheme, Switch, Code } from '@mantine/core';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { IconLayoutSidebarLeftExpand, IconLayoutSidebarLeftCollapse, IconUser, IconLogout, IconAlertCircle, IconChevronDown, IconChevronRight, IconMoonStars, IconSun } from '@tabler/icons-react';
-import { createContext, memo, useEffect, createElement, useContext, useState } from 'react';
-
-// src/components/layout/constants.ts
-var sidebarWidth = 240;
-var sidebarCollapsedWidth = 72;
-var sidebarTransitionDuration = 200;
-var sidebarHoverDelay = 100;
-var topbarHeight = 54;
-var KEYFRAMES = `
-@keyframes elevasis-grain-shift {
-  0%, 100% { transform: translate(0, 0); }
-  10% { transform: translate(-2%, -3%); }
-  20% { transform: translate(3%, 1%); }
-  30% { transform: translate(-1%, 4%); }
-  40% { transform: translate(4%, -2%); }
-  50% { transform: translate(-3%, 2%); }
-  60% { transform: translate(2%, -4%); }
-  70% { transform: translate(-4%, 1%); }
-  80% { transform: translate(1%, 3%); }
-  90% { transform: translate(3%, -1%); }
-}
-`;
-function FilmGrain({ darkOpacity = 0.02, lightOpacity = 0.06, className }) {
-  const colorScheme = useComputedColorScheme();
-  const opacity = colorScheme === "dark" ? darkOpacity : lightOpacity;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className,
-      style: {
-        position: "absolute",
-        inset: 0,
-        pointerEvents: "none",
-        overflow: "clip",
-        opacity,
-        mixBlendMode: colorScheme === "dark" ? "screen" : "multiply"
-      },
-      children: [
-        /* @__PURE__ */ jsx("style", { children: KEYFRAMES }),
-        /* @__PURE__ */ jsx("svg", { style: { position: "absolute", width: 0, height: 0 }, children: /* @__PURE__ */ jsx("filter", { id: "elevasis-grain", children: /* @__PURE__ */ jsx("feTurbulence", { type: "fractalNoise", baseFrequency: "0.65", numOctaves: "3", stitchTiles: "stitch" }) }) }),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              inset: "-50%",
-              width: "200%",
-              height: "200%",
-              filter: "url(#elevasis-grain)",
-              animation: "elevasis-grain-shift 0.8s steps(4) infinite",
-              willChange: "transform"
-            }
-          }
-        )
-      ]
-    }
-  );
-}
-var KEYFRAMES2 = `
-@keyframes elevasis-orb-float-0 {
-  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
-  25% { transform: translate(12vw, -8vh) scale(1.2); opacity: 0.8; }
-  50% { transform: translate(-5vw, -15vh) scale(0.9); opacity: 0.4; }
-  75% { transform: translate(8vw, 5vh) scale(1.1); opacity: 0.7; }
-}
-@keyframes elevasis-orb-float-1 {
-  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.6; }
-  30% { transform: translate(-10vw, 6vh) scale(0.85); opacity: 0.3; }
-  60% { transform: translate(7vw, 12vh) scale(1.15); opacity: 0.7; }
-}
-@keyframes elevasis-orb-float-2 {
-  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.4; }
-  20% { transform: translate(6vw, 10vh) scale(1.3); opacity: 0.7; }
-  50% { transform: translate(-8vw, -4vh) scale(0.8); opacity: 0.3; }
-  80% { transform: translate(3vw, -12vh) scale(1.1); opacity: 0.6; }
-}
-`;
-var ORB_CONFIGS = [
-  { top: "10%", left: "15%", size: "25vw", anim: "elevasis-orb-float-0", dur: "22s" },
-  { top: "60%", left: "70%", size: "30vw", anim: "elevasis-orb-float-1", dur: "28s" },
-  { top: "30%", left: "50%", size: "20vw", anim: "elevasis-orb-float-2", dur: "32s" },
-  { top: "75%", left: "20%", size: "22vw", anim: "elevasis-orb-float-0", dur: "26s" },
-  { top: "5%", left: "75%", size: "18vw", anim: "elevasis-orb-float-1", dur: "30s" },
-  { top: "45%", left: "5%", size: "24vw", anim: "elevasis-orb-float-2", dur: "24s" }
-];
-function FloatingOrbs({
-  color = "var(--color-primary)",
-  count = 6,
-  className
-}) {
-  const orbs = ORB_CONFIGS.slice(0, count);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className,
-      style: {
-        position: "absolute",
-        inset: 0,
-        pointerEvents: "none",
-        overflow: "clip"
-      },
-      children: [
-        /* @__PURE__ */ jsx("style", { children: KEYFRAMES2 }),
-        orbs.map((orb, i) => /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              top: orb.top,
-              left: orb.left,
-              width: orb.size,
-              height: orb.size,
-              borderRadius: "50%",
-              background: `radial-gradient(circle at center, color-mix(in srgb, ${color} 3%, transparent) 0%, transparent 70%)`,
-              filter: "blur(40px)",
-              animation: `${orb.anim} ${orb.dur} ease-in-out infinite`,
-              willChange: "transform, opacity"
-            }
-          },
-          i
-        ))
-      ]
-    }
-  );
-}
-function PerspectiveGrid({
-  glowColor = "rgba(123, 123, 123, 0.1)",
-  className
-}) {
-  const colorScheme = useComputedColorScheme();
-  const lineColor = colorScheme === "dark" ? "rgba(90, 90, 90, 0.1)" : "rgba(120, 120, 120, 0.1)";
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className,
-      style: {
-        position: "absolute",
-        inset: 0,
-        pointerEvents: "none",
-        overflow: "hidden",
-        perspective: "500px"
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              bottom: 0,
-              left: "50%",
-              transform: "translateX(-50%)",
-              width: "100%",
-              height: "60%",
-              background: `radial-gradient(ellipse 90% 75% at 50% 112%, ${glowColor} -15%, transparent 45%)`,
-              pointerEvents: "none"
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              left: "-50%",
-              right: "-50%",
-              bottom: 0,
-              height: "70%",
-              backgroundImage: `
-            linear-gradient(${lineColor} 2px, transparent 1px),
-            linear-gradient(90deg, ${lineColor} 2px, transparent 1px)
-          `,
-              backgroundSize: "120px 100px",
-              transform: "rotateX(60deg)",
-              transformOrigin: "bottom center",
-              maskImage: "linear-gradient(to bottom, transparent 0%, black 100%, black 100%, transparent 100%)",
-              WebkitMaskImage: "linear-gradient(to bottom, transparent 0%, black 100%, black 100%, transparent 100%)"
-            }
-          }
-        )
-      ]
-    }
-  );
-}
-var KEYFRAMES3 = `
-@keyframes elevasis-glow-drift {
-  0% { transform: translateY(0) scale(1); opacity: 1; }
-  20% { transform: translateY(-8%) scale(1.12); opacity: 0.7; }
-  40% { transform: translateY(3%) scale(0.92); opacity: 1; }
-  60% { transform: translateY(5%) scale(1.08); opacity: 0.8; }
-  80% { transform: translateY(-4%) scale(0.95); opacity: 0.9; }
-  100% { transform: translateY(0) scale(1); opacity: 1; }
-}
-@keyframes elevasis-glow-drift-alt {
-  0% { transform: translateY(0) scale(1); opacity: 0.8; }
-  25% { transform: translateY(6%) scale(0.9); opacity: 1; }
-  50% { transform: translateY(-7%) scale(1.15); opacity: 0.7; }
-  75% { transform: translateY(-5%) scale(1.05); opacity: 0.9; }
-  100% { transform: translateY(0) scale(1); opacity: 0.8; }
-}
-@keyframes elevasis-glow-drift-slow {
-  0% { transform: translateY(0) scale(1); opacity: 0.9; }
-  33% { transform: translateY(-4%) scale(1.1); opacity: 0.6; }
-  66% { transform: translateY(6%) scale(0.88); opacity: 1; }
-  100% { transform: translateY(0) scale(1); opacity: 0.9; }
-}
-`;
-function RadiantGlow({
-  color = "var(--color-primary)",
-  opacity = 1,
-  className
-}) {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className,
-      style: {
-        position: "absolute",
-        inset: 0,
-        pointerEvents: "none",
-        overflow: "clip",
-        opacity
-      },
-      children: [
-        /* @__PURE__ */ jsx("style", { children: KEYFRAMES3 }),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              top: "-80%",
-              left: "50%",
-              transform: "translateX(-50%)",
-              width: "200%",
-              height: "200%",
-              background: `radial-gradient(ellipse at center, color-mix(in srgb, ${color} 0.8%, transparent) 0%, transparent 70%)`,
-              animation: "elevasis-glow-drift 20s ease-in-out infinite",
-              willChange: "transform"
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              bottom: "-70%",
-              left: "50%",
-              transform: "translateX(-50%)",
-              width: "180%",
-              height: "180%",
-              background: `radial-gradient(ellipse at center, color-mix(in srgb, ${color} 0.6%, transparent) 0%, transparent 65%)`,
-              animation: "elevasis-glow-drift-alt 24s ease-in-out infinite",
-              willChange: "transform"
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              top: "-20%",
-              left: "50%",
-              transform: "translateX(-50%)",
-              width: "120%",
-              height: "120%",
-              background: `radial-gradient(ellipse at center, color-mix(in srgb, ${color} 0.6%, transparent) 0%, transparent 60%)`,
-              animation: "elevasis-glow-drift-slow 28s ease-in-out infinite",
-              willChange: "transform"
-            }
-          }
-        )
-      ]
-    }
-  );
-}
-function Vignette({ strength = 0.35, className }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className,
-      style: {
-        position: "absolute",
-        inset: 0,
-        pointerEvents: "none",
-        background: `radial-gradient(ellipse 80% 70% at 50% 50%, transparent 50%, rgba(0, 0, 0, ${strength}) 100%)`
-      }
-    }
-  );
-}
-var AppShellContainer = ({ children }) => {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        height: "100vh",
-        display: "flex",
-        backgroundColor: "var(--color-background)",
-        position: "relative"
-      },
-      children: [
-        /* @__PURE__ */ jsx(PerspectiveGrid, {}),
-        /* @__PURE__ */ jsx(RadiantGlow, {}),
-        /* @__PURE__ */ jsx(FloatingOrbs, {}),
-        /* @__PURE__ */ jsx(FilmGrain, {}),
-        children
-      ]
-    }
-  );
-};
-var AppShellRightSideContainer = ({ children }) => {
-  return /* @__PURE__ */ jsx(
-    "main",
-    {
-      style: {
-        flex: 1,
-        minWidth: 0,
-        color: "var(--color-text)",
-        display: "flex",
-        flexDirection: "column",
-        minHeight: "100vh"
-      },
-      children
-    }
-  );
-};
-var AppShellRightSideOuterContainer = ({ children }) => {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        flex: 1,
-        overflow: "auto",
-        minWidth: 0,
-        minHeight: "100vh"
-      },
-      children
-    }
-  );
-};
-var AppShellContentContainer = ({ children }) => {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        height: "100%",
-        padding: "var(--mantine-spacing-md)"
-      },
-      children
-    }
-  );
-};
-var PageContainer = ({ children }) => {
-  return (
-    // Add padding to the top of the container to adjust for the topbar height
-    /* @__PURE__ */ jsx(Container, { size: "xl", p: 0, w: "100%", children: /* @__PURE__ */ jsx(Stack, { children }) })
-  );
-};
-var AppTopbarAdjusterWrapper = ({ children }) => {
-  const padding = `${topbarHeight}px`;
-  return /* @__PURE__ */ jsx("div", { style: { paddingTop: padding }, children });
-};
-var standardMdSpacing = 16;
-var topAndBottomSpacing = standardMdSpacing * 2;
-var AppShellCenteredContainer = ({ children }) => {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        margin: "auto auto",
-        height: `calc(100vh - ${topbarHeight + topAndBottomSpacing}px)`,
-        textAlign: "center"
-      },
-      children
-    }
-  );
-};
-var AppShellLoader = () => {
-  return /* @__PURE__ */ jsx(AppShellCenteredContainer, { children: /* @__PURE__ */ jsx(Loader, { size: "xl", loaders: { elevasis: ElevasisLoader }, type: "elevasis" }) });
-};
-var AppShellError = ({ message, retry }) => {
-  return /* @__PURE__ */ jsxs(AppShellCenteredContainer, { children: [
-    /* @__PURE__ */ jsx(IconAlertCircle, { size: 48, color: "var(--color-error)" }),
-    /* @__PURE__ */ jsx(Title, { order: 3, c: "dimmed", children: message }),
-    retry && /* @__PURE__ */ jsx(Button, { onClick: retry, children: "Retry" })
-  ] });
-};
-var SidebarContext = createContext(void 0);
-var SIDEBAR_COLLAPSED_KEY = "sidebar-collapsed";
-var SidebarProvider = ({ children }) => {
-  const [expandedGroups, setExpandedGroups] = useState({});
-  const [isInitialized, setIsInitialized] = useState(false);
-  const [isCollapsed, setIsCollapsed] = useState(() => {
-    if (typeof window !== "undefined" && window.innerWidth < 1024) {
-      return true;
-    }
-    const stored = localStorage.getItem(SIDEBAR_COLLAPSED_KEY);
-    return stored === "true";
-  });
-  const toggleGroup = (groupLabel) => {
-    setExpandedGroups((prev) => ({
-      ...prev,
-      [groupLabel]: !prev[groupLabel]
-    }));
-  };
-  const initializeGroups = (groups) => {
-    if (!isInitialized) {
-      const initialState = {};
-      groups.forEach((group) => {
-        initialState[group.label] = group.initiallyOpened || false;
-      });
-      setExpandedGroups(initialState);
-      setIsInitialized(true);
-    }
-  };
-  const toggleCollapsed = () => {
-    setIsCollapsed((prev) => {
-      const newValue = !prev;
-      localStorage.setItem(SIDEBAR_COLLAPSED_KEY, String(newValue));
-      return newValue;
-    });
-  };
-  const setCollapsed = (value) => {
-    setIsCollapsed(value);
-    localStorage.setItem(SIDEBAR_COLLAPSED_KEY, String(value));
-  };
-  useEffect(() => {
-    const handleStorageChange = (e) => {
-      if (e.key === SIDEBAR_COLLAPSED_KEY && e.newValue !== null) {
-        setIsCollapsed(e.newValue === "true");
-      }
-    };
-    window.addEventListener("storage", handleStorageChange);
-    return () => window.removeEventListener("storage", handleStorageChange);
-  }, []);
-  return /* @__PURE__ */ jsx(
-    SidebarContext.Provider,
-    {
-      value: {
-        expandedGroups,
-        toggleGroup,
-        initializeGroups,
-        isCollapsed,
-        toggleCollapsed,
-        setCollapsed
-      },
-      children
-    }
-  );
-};
-var useSidebar = () => {
-  const context = useContext(SidebarContext);
-  if (context === void 0) {
-    throw new Error("useSidebar must be used within a SidebarProvider");
-  }
-  return context;
-};
-
-// src/components/layout/sidebar/components/link-group-components/utils.ts
-var isPathActive = (linkPath, currentPath) => {
-  if (!currentPath || !linkPath) return false;
-  if (currentPath === linkPath) return true;
-  const linkSegments = linkPath.split("/").filter(Boolean);
-  const currentSegments = currentPath.split("/").filter(Boolean);
-  if (currentSegments.length < linkSegments.length) return false;
-  for (let i = 0; i < linkSegments.length; i++) {
-    if (linkSegments[i] !== currentSegments[i]) return false;
-  }
-  return true;
-};
-var isOverviewLink = (label, link) => {
-  return label === "Overview" && (link === "/admin" || link === "/operations" || link === "/monitoring" || link === "/settings" || link === "/execution-engine" || link === "/acquisition");
-};
-var SubLinkItem = ({ linkItem, currentPath }) => {
-  const { Link } = useRouterContext();
-  const isActive = isOverviewLink(linkItem.label, linkItem.link) ? currentPath === linkItem.link : isPathActive(linkItem.link, currentPath);
-  const activeColor3 = "var(--color-primary)";
-  const activeColorBg = "color-mix(in srgb, var(--color-primary) 10%, transparent)";
-  const defaultColor2 = "var(--color-text-subtle)";
-  const hoverColor2 = "var(--color-text)";
-  return /* @__PURE__ */ jsx(
-    Link,
-    {
-      to: linkItem.link,
-      onClick: linkItem.onClick,
-      style: {
-        display: "block",
-        textDecoration: "none",
-        fontFamily: "var(--elevasis-font-family-subtitle)",
-        fontSize: "var(--mantine-font-size-sm)",
-        color: isActive ? activeColor3 : defaultColor2,
-        backgroundColor: isActive ? activeColorBg : "transparent",
-        padding: `var(--mantine-spacing-xs) var(--mantine-spacing-xs) var(--mantine-spacing-xs) 50px`,
-        borderRadius: "var(--mantine-radius-xs)",
-        transition: `all var(--duration-fast) var(--easing)`,
-        fontWeight: isActive ? 600 : 400
-      },
-      onMouseEnter: (e) => {
-        if (!isActive) {
-          e.currentTarget.style.backgroundColor = "var(--color-surface-hover)";
-          e.currentTarget.style.color = hoverColor2;
-        }
-      },
-      onMouseLeave: (e) => {
-        if (!isActive) {
-          e.currentTarget.style.backgroundColor = "transparent";
-          e.currentTarget.style.color = defaultColor2;
-        }
-      },
-      children: linkItem.label
-    }
-  );
-};
-var MainButton = ({
-  icon,
-  label,
-  isCollapsed,
-  hasLinks,
-  opened,
-  isIconTextActive,
-  isBackgroundActive,
-  onClick,
-  link,
-  noWrapper = false
-}) => {
-  const { Link } = useRouterContext();
-  const button = /* @__PURE__ */ jsx(
-    NavigationButton,
-    {
-      icon,
-      label,
-      isCollapsed,
-      hasSubItems: hasLinks,
-      isExpanded: opened,
-      isActive: isIconTextActive,
-      hasActiveBackground: isBackgroundActive,
-      onClick,
-      transitionDuration: sidebarTransitionDuration
-    }
-  );
-  const wrapperStyle = { marginBottom: "4px" };
-  if (noWrapper) {
-    return button;
-  }
-  if (!hasLinks && link) {
-    return /* @__PURE__ */ jsx("div", { style: wrapperStyle, children: /* @__PURE__ */ jsx(Link, { to: link, style: { textDecoration: "none" }, children: button }) });
-  }
-  return /* @__PURE__ */ jsx("div", { style: wrapperStyle, children: button });
-};
-var CollapsedWithTooltip = ({ label, children }) => {
-  return /* @__PURE__ */ jsx(Tooltip, { label, position: "right", offset: 12, children });
-};
-var CollapsedWithHoverCard = ({
-  label,
-  icon: Icon,
-  links,
-  currentPath,
-  children
-}) => {
-  const { Link } = useRouterContext();
-  return /* @__PURE__ */ jsxs(
-    HoverCard,
-    {
-      width: 200,
-      position: "right-start",
-      shadow: "md",
-      withinPortal: true,
-      offset: 12,
-      openDelay: sidebarHoverDelay,
-      closeDelay: 150,
-      zIndex: 9999,
-      children: [
-        /* @__PURE__ */ jsx(HoverCard.Target, { children: /* @__PURE__ */ jsx("div", { style: { display: "inline-block", width: "100%" }, children }) }),
-        /* @__PURE__ */ jsx(
-          HoverCard.Dropdown,
-          {
-            style: {
-              padding: "var(--mantine-spacing-sm)",
-              background: "var(--glass-background)",
-              backdropFilter: "var(--glass-blur)"
-            },
-            children: /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
-              /* @__PURE__ */ jsxs(
-                Group,
-                {
-                  gap: "xs",
-                  style: {
-                    paddingBottom: "8px",
-                    borderBottom: "1px solid var(--color-border)",
-                    marginBottom: "4px"
-                  },
-                  children: [
-                    Icon && /* @__PURE__ */ jsx(Icon, { size: 16, stroke: 2 }),
-                    /* @__PURE__ */ jsx(
-                      Text,
-                      {
-                        size: "sm",
-                        fw: 600,
-                        c: "var(--color-text)",
-                        style: { fontFamily: "var(--mantine-font-family-headings)" },
-                        children: label
-                      }
-                    )
-                  ]
-                }
-              ),
-              links.map((linkItem) => {
-                const isActive = currentPath === linkItem.link;
-                return /* @__PURE__ */ jsx(Link, { to: linkItem.link, style: { textDecoration: "none" }, onClick: () => {
-                }, children: /* @__PURE__ */ jsx(
-                  UnstyledButton,
-                  {
-                    style: {
-                      width: "100%",
-                      padding: "8px 12px",
-                      backgroundColor: isActive ? "color-mix(in srgb, var(--color-primary) 10%, transparent)" : "transparent",
-                      color: isActive ? "var(--color-primary)" : "var(--color-text)",
-                      transition: "all var(--duration-fast) var(--easing)"
-                    },
-                    onMouseEnter: (e) => {
-                      if (!isActive) {
-                        e.currentTarget.style.backgroundColor = "var(--color-surface-hover)";
-                      }
-                    },
-                    onMouseLeave: (e) => {
-                      e.currentTarget.style.backgroundColor = isActive ? "color-mix(in srgb, var(--color-primary) 10%, transparent)" : "transparent";
-                    },
-                    children: /* @__PURE__ */ jsx(Text, { size: "sm", style: { lineHeight: 1.2 }, children: linkItem.label })
-                  }
-                ) }, linkItem.link);
-              })
-            ] })
-          }
-        )
-      ]
-    }
-  );
-};
-var LinksGroup = memo(function LinksGroup2({
-  icon: Icon,
-  label,
-  links = [],
-  link,
-  onClick,
-  currentPath = "",
-  opened = false,
-  onToggle
-}) {
-  const hasLinks = links.length > 0;
-  const { navigate } = useRouterContext();
-  const { isCollapsed } = useSidebar();
-  useEffect(() => {
-    if (isCollapsed && opened && onToggle) {
-      onToggle();
-    }
-  }, [isCollapsed, opened, onToggle]);
-  const hasActiveChild = hasLinks && links.some((item) => isPathActive(item.link, currentPath));
-  const isParentActive = !hasLinks && (link === "/" ? currentPath === "/" : isPathActive(link || "", currentPath));
-  const isIconTextActive = isParentActive || hasActiveChild;
-  const isBackgroundActive = isParentActive || hasActiveChild && !opened;
-  const handleMainClick = () => {
-    if (hasLinks && !isCollapsed) {
-      onToggle?.();
-    } else if (!hasLinks) {
-      if (link) {
-        navigate(link);
-      }
-      onClick?.();
-    }
-  };
-  const items = links.map((item) => /* @__PURE__ */ jsx(SubLinkItem, { linkItem: item, currentPath }, item.label));
-  const mainButton = /* @__PURE__ */ jsx(
-    MainButton,
-    {
-      icon: Icon,
-      label,
-      isCollapsed,
-      hasLinks,
-      opened,
-      isIconTextActive,
-      isBackgroundActive,
-      onClick: handleMainClick,
-      link
-    }
-  );
-  if (isCollapsed && hasLinks) {
-    const mainButtonNoWrapper = /* @__PURE__ */ jsx(
-      MainButton,
-      {
-        icon: Icon,
-        label,
-        isCollapsed,
-        hasLinks,
-        opened,
-        isIconTextActive,
-        isBackgroundActive,
-        onClick: handleMainClick,
-        link,
-        noWrapper: true
-      }
-    );
-    return /* @__PURE__ */ jsx("div", { style: { marginBottom: "4px" }, children: /* @__PURE__ */ jsx(CollapsedWithHoverCard, { label, icon: Icon, links, currentPath, children: mainButtonNoWrapper }) });
-  }
-  if (isCollapsed && !hasLinks) {
-    const mainButtonNoWrapper = /* @__PURE__ */ jsx(
-      MainButton,
-      {
-        icon: Icon,
-        label,
-        isCollapsed,
-        hasLinks,
-        opened,
-        isIconTextActive,
-        isBackgroundActive,
-        onClick: handleMainClick,
-        link,
-        noWrapper: true
-      }
-    );
-    return /* @__PURE__ */ jsx("div", { style: { marginBottom: "4px" }, children: /* @__PURE__ */ jsx(CollapsedWithTooltip, { label, children: mainButtonNoWrapper }) });
-  }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    mainButton,
-    hasLinks && /* @__PURE__ */ jsx(Collapse, { in: opened && !isCollapsed, children: /* @__PURE__ */ jsx("div", { style: { paddingLeft: "0px" }, children: items }) })
-  ] });
-});
-var useSidebarCollapse = () => {
-  const { isCollapsed, toggleCollapsed, setCollapsed } = useSidebar();
-  useEffect(() => {
-    const handleKeyDown = (e) => {
-      if ((e.metaKey || e.ctrlKey) && e.key === "b") {
-        e.preventDefault();
-        toggleCollapsed();
-      }
-    };
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [toggleCollapsed]);
-  useEffect(() => {
-    const handleResize = () => {
-      if (window.innerWidth < 1024) {
-        setCollapsed(true);
-      }
-    };
-    handleResize();
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
-  }, [setCollapsed]);
-  return {
-    isCollapsed,
-    toggleCollapsed,
-    setCollapsed
-  };
-};
-var SidebarContainer = ({ children, className }) => {
-  const { isCollapsed } = useSidebar();
-  return /* @__PURE__ */ jsx(
-    "nav",
-    {
-      className,
-      style: {
-        height: "100vh",
-        width: isCollapsed ? `${sidebarCollapsedWidth}px` : `${sidebarWidth}px`,
-        flexShrink: 0,
-        display: "flex",
-        flexDirection: "column",
-        backgroundColor: "var(--glass-background)",
-        backdropFilter: "var(--glass-blur)",
-        WebkitBackdropFilter: "var(--glass-blur)",
-        borderRight: "1px solid var(--color-border)",
-        boxShadow: "var(--card-shadow)",
-        transition: `width ${sidebarTransitionDuration}ms var(--easing)`,
-        overflow: "hidden",
-        position: "relative",
-        fontFamily: "var(--mantine-font-family-headings)"
-      },
-      children
-    }
-  );
-};
-var SidebarTopSection = ({ logo }) => {
-  const { isCollapsed, toggleCollapsed } = useSidebar();
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        padding: "var(--mantine-spacing-sm)",
-        borderBottom: "1px solid var(--color-border)",
-        height: `${topbarHeight}px`,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between"
-      },
-      children: [
-        !isCollapsed && logo ? /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: logo,
-            alt: "Logo",
-            style: {
-              marginLeft: 12,
-              width: "auto",
-              height: "30px",
-              transition: `opacity ${sidebarTransitionDuration}ms var(--easing)`,
-              opacity: isCollapsed ? 0 : 1
-            }
-          }
-        ) : /* @__PURE__ */ jsx("div", {}),
-        /* @__PURE__ */ jsx(
-          UnstyledButton,
-          {
-            onClick: toggleCollapsed,
-            style: {
-              padding: "6px",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              color: "var(--color-text-subtle)",
-              paddingRight: 6,
-              marginRight: isCollapsed ? 6 : 0,
-              transition: "all var(--duration-fast) var(--easing)",
-              ":hover": {
-                backgroundColor: "var(--color-surface-hover)",
-                color: "var(--color-text)"
-              }
-            },
-            onMouseEnter: (e) => {
-              e.currentTarget.style.backgroundColor = "var(--color-surface-hover)";
-              e.currentTarget.style.color = "var(--color-text)";
-            },
-            onMouseLeave: (e) => {
-              e.currentTarget.style.backgroundColor = "transparent";
-              e.currentTarget.style.color = "var(--color-text-subtle)";
-            },
-            children: isCollapsed ? /* @__PURE__ */ jsx(
-              IconLayoutSidebarLeftExpand,
-              {
-                size: 20,
-                stroke: 1.5,
-                style: {
-                  transition: `transform ${sidebarTransitionDuration}ms var(--easing)`
-                }
-              }
-            ) : /* @__PURE__ */ jsx(
-              IconLayoutSidebarLeftCollapse,
-              {
-                size: 20,
-                stroke: 1.5,
-                style: {
-                  transition: `transform ${sidebarTransitionDuration}ms var(--easing)`
-                }
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
-};
-var SidebarBottomSection = ({ user, onLogout }) => {
-  const { isCollapsed } = useSidebar();
-  if (!user) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        padding: "var(--mantine-spacing-sm)",
-        borderTop: "1px solid var(--color-border)",
-        transition: `padding ${sidebarTransitionDuration}ms var(--easing)`
-      },
-      children: /* @__PURE__ */ jsxs(Menu, { shadow: "md", width: 200, position: "top-start", offset: 8, children: [
-        /* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              borderRadius: "var(--mantine-radius-xs)",
-              padding: "4px",
-              transition: "background-color var(--duration-fast)",
-              display: "flex",
-              justifyContent: "flex-start",
-              cursor: "pointer"
-            },
-            onMouseEnter: (e) => {
-              e.currentTarget.style.backgroundColor = "var(--color-surface-hover)";
-            },
-            onMouseLeave: (e) => {
-              e.currentTarget.style.backgroundColor = "transparent";
-            },
-            children: /* @__PURE__ */ jsxs(Group, { gap: "sm", wrap: "nowrap", children: [
-              /* @__PURE__ */ jsx(
-                Tooltip,
-                {
-                  label: isCollapsed ? /* @__PURE__ */ jsxs("div", { style: { textAlign: "center" }, children: [
-                    /* @__PURE__ */ jsx("div", { style: { fontWeight: 500 }, children: [user.firstName, user.lastName].filter(Boolean).join(" ") || user.email }),
-                    /* @__PURE__ */ jsx("div", { style: { fontSize: "11px", opacity: 0.8 }, children: user.email })
-                  ] }) : null,
-                  position: "right",
-                  offset: 12,
-                  disabled: !isCollapsed,
-                  children: /* @__PURE__ */ jsx(
-                    Avatar,
-                    {
-                      src: user.profilePictureUrl || void 0,
-                      radius: "xl",
-                      size: isCollapsed ? "sm" : "md",
-                      alt: `${user.firstName || ""} ${user.lastName || ""}`.trim(),
-                      style: {
-                        marginLeft: isCollapsed ? 8 : 0,
-                        transition: `all ${sidebarTransitionDuration}ms var(--easing)`,
-                        cursor: "pointer"
-                      },
-                      children: (user.firstName || user.email).charAt(0).toUpperCase()
-                    }
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsxs(
-                Stack,
-                {
-                  gap: 2,
-                  style: {
-                    flex: 1,
-                    minWidth: 0,
-                    opacity: isCollapsed ? 0 : 1,
-                    width: isCollapsed ? 0 : "auto",
-                    overflow: "hidden",
-                    transition: `opacity ${sidebarTransitionDuration}ms var(--easing), width ${sidebarTransitionDuration}ms var(--easing)`
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      Text,
-                      {
-                        size: "sm",
-                        fw: 500,
-                        style: {
-                          color: "var(--color-text)",
-                          lineHeight: 1.2,
-                          overflow: "hidden",
-                          textOverflow: "ellipsis",
-                          whiteSpace: "nowrap"
-                        },
-                        children: [user.firstName, user.lastName].filter(Boolean).join(" ") || user.email
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      Text,
-                      {
-                        size: "xs",
-                        style: {
-                          color: "var(--color-text-subtle)",
-                          lineHeight: 1.2,
-                          overflow: "hidden",
-                          textOverflow: "ellipsis",
-                          whiteSpace: "nowrap"
-                        },
-                        children: user.email
-                      }
-                    )
-                  ]
-                }
-              )
-            ] })
-          }
-        ) }),
-        /* @__PURE__ */ jsxs(Menu.Dropdown, { children: [
-          /* @__PURE__ */ jsx(Menu.Item, { leftSection: /* @__PURE__ */ jsx(IconUser, { size: 14 }), children: "Account" }),
-          onLogout && /* @__PURE__ */ jsx(Menu.Item, { leftSection: /* @__PURE__ */ jsx(IconLogout, { size: 14 }), onClick: onLogout, children: "Logout" })
-        ] })
-      ] })
-    }
-  );
-};
-var SidebarMiddleSection = ({ linkElements }) => {
-  return /* @__PURE__ */ jsx(
-    ScrollArea,
-    {
-      style: {
-        flex: 1,
-        padding: "var(--mantine-spacing-sm)",
-        transition: `padding ${sidebarTransitionDuration}ms var(--easing)`
-      },
-      children: /* @__PURE__ */ jsx("div", { style: { paddingBottom: "var(--mantine-spacing-sm)" }, children: linkElements })
-    }
-  );
-};
-var Sidebar = memo(function Sidebar2({
-  links = [],
-  user,
-  onLogout,
-  className = "",
-  logo
-}) {
-  const { currentPath } = useRouterContext();
-  const { expandedGroups, toggleGroup, initializeGroups } = useSidebar();
-  useSidebarCollapse();
-  useEffect(() => {
-    initializeGroups(links);
-  }, [links, initializeGroups]);
-  const linkElements = links.map((item) => {
-    const isOpened = expandedGroups[item.label] || false;
-    const linkGroup = /* @__PURE__ */ createElement(
-      LinksGroup,
-      {
-        ...item,
-        key: item.label,
-        currentPath,
-        opened: isOpened,
-        onToggle: () => toggleGroup(item.label)
-      }
-    );
-    if (item.dataOnboardingTourId) {
-      return /* @__PURE__ */ jsx("div", { "data-onboarding-tour-id": item.dataOnboardingTourId, children: linkGroup }, item.label);
-    }
-    return linkGroup;
-  });
-  return /* @__PURE__ */ jsxs(SidebarContainer, { className, children: [
-    /* @__PURE__ */ jsx(SidebarTopSection, { logo }),
-    /* @__PURE__ */ jsx(SidebarMiddleSection, { linkElements }),
-    /* @__PURE__ */ jsx(SidebarBottomSection, { user, onLogout })
-  ] });
-});
-var activeColor = "var(--color-primary)";
-var defaultTextColor = "var(--color-text)";
-var subtleColor = "var(--color-text-subtle)";
-var activeBg = `color-mix(in srgb, ${activeColor} 10%, transparent)`;
-var CollapsibleSidebarGroup = ({
-  icon: Icon,
-  label,
-  isExpanded,
-  onToggle,
-  isActive = false,
-  badge,
-  children,
-  onLabelClick,
-  emptyMessage = "No items",
-  isEmpty = false,
-  isLoading = false,
-  loadingComponent
-}) => {
-  const showActiveStyle = !isExpanded && isActive;
-  const iconColor = showActiveStyle ? activeColor : subtleColor;
-  const textColor = showActiveStyle ? activeColor : defaultTextColor;
-  const fontWeight = showActiveStyle ? 600 : 500;
-  const handleLabelClick = (e) => {
-    if (onLabelClick) {
-      e.stopPropagation();
-      onLabelClick();
-    }
-  };
-  return /* @__PURE__ */ jsxs(Box, { children: [
-    /* @__PURE__ */ jsx(
-      UnstyledButton,
-      {
-        onClick: onToggle,
-        style: {
-          display: "flex",
-          alignItems: "center",
-          width: "100%",
-          padding: "var(--mantine-spacing-xs)",
-          color: textColor,
-          backgroundColor: showActiveStyle ? activeBg : "transparent",
-          transition: `all var(--duration-fast) var(--easing)`,
-          cursor: "pointer",
-          overflow: "hidden"
-        },
-        onMouseEnter: (e) => {
-          if (!showActiveStyle) {
-            e.currentTarget.style.backgroundColor = "var(--color-surface-hover)";
-          }
-        },
-        onMouseLeave: (e) => {
-          if (!showActiveStyle) {
-            e.currentTarget.style.backgroundColor = "transparent";
-          }
-        },
-        children: /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", style: { width: "100%" }, children: [
-          /* @__PURE__ */ jsx(Box, { style: { flexShrink: 0, color: iconColor }, children: isExpanded ? /* @__PURE__ */ jsx(IconChevronDown, { size: 14 }) : /* @__PURE__ */ jsx(IconChevronRight, { size: 14 }) }),
-          /* @__PURE__ */ jsx(
-            Box,
-            {
-              style: { flexShrink: 0, color: iconColor, cursor: onLabelClick ? "pointer" : "inherit" },
-              onClick: onLabelClick ? handleLabelClick : void 0,
-              children: /* @__PURE__ */ jsx(Icon, { size: 18, color: activeColor })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Text,
-            {
-              size: "sm",
-              fw: fontWeight,
-              style: {
-                fontFamily: "var(--elevasis-font-family-subtitle)",
-                color: textColor,
-                transition: `color var(--duration-fast) var(--easing)`,
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-                whiteSpace: "nowrap",
-                flex: 1,
-                cursor: onLabelClick ? "pointer" : "inherit"
-              },
-              onClick: onLabelClick ? handleLabelClick : void 0,
-              children: label
-            }
-          ),
-          badge && /* @__PURE__ */ jsx(Box, { style: { flexShrink: 0 }, children: badge })
-        ] })
-      }
-    ),
-    /* @__PURE__ */ jsx(Collapse, { in: isExpanded, children: /* @__PURE__ */ jsx(
-      Stack,
-      {
-        gap: 0,
-        mt: "xs",
-        ml: "xs",
-        style: {
-          borderLeft: `1px solid color-mix(in srgb, var(--color-primary) 40%, transparent)`,
-          marginLeft: "calc(var(--mantine-spacing-xs) + 6px)",
-          paddingLeft: "calc(var(--mantine-spacing-xs) - 2px)"
-        },
-        children: isLoading ? loadingComponent : isEmpty ? /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", style: { padding: "6px 8px" }, children: emptyMessage }) : children
-      }
-    ) })
-  ] });
-};
-var activeColor2 = "var(--color-primary)";
-var defaultColor = "var(--color-text-subtle)";
-var hoverColor = "var(--color-text)";
-var activeBg2 = `color-mix(in srgb, ${activeColor2} 10%, transparent)`;
-var SidebarListItem = ({
-  icon: Icon,
-  label,
-  isActive = false,
-  onClick,
-  description,
-  badge,
-  disabled = false
-}) => {
-  return /* @__PURE__ */ jsx(
-    UnstyledButton,
-    {
-      onClick: disabled ? void 0 : onClick,
-      disabled,
-      style: {
-        width: "100%",
-        padding: "var(--mantine-spacing-xs)",
-        backgroundColor: isActive ? activeBg2 : "transparent",
-        borderRadius: "var(--mantine-radius-xs)",
-        transition: `all var(--duration-fast) var(--easing)`,
-        cursor: disabled ? "not-allowed" : "pointer",
-        opacity: disabled ? 0.5 : 1
-      },
-      onMouseEnter: (e) => {
-        if (!isActive && !disabled) {
-          e.currentTarget.style.backgroundColor = "var(--color-surface-hover)";
-          const textElements = e.currentTarget.querySelectorAll("[data-text-element]");
-          textElements.forEach((el) => {
-            el.style.color = hoverColor;
-          });
-        }
-      },
-      onMouseLeave: (e) => {
-        if (!isActive && !disabled) {
-          e.currentTarget.style.backgroundColor = "transparent";
-          const textElements = e.currentTarget.querySelectorAll("[data-text-element]");
-          textElements.forEach((el) => {
-            el.style.color = defaultColor;
-          });
-        }
-      },
-      children: /* @__PURE__ */ jsxs(Stack, { gap: 2, children: [
-        /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", children: [
-          /* @__PURE__ */ jsx(
-            Icon,
-            {
-              size: 14,
-              style: {
-                flexShrink: 0,
-                opacity: isActive ? 1 : 0.6,
-                color: isActive ? activeColor2 : defaultColor
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Text,
-            {
-              size: "sm",
-              fw: isActive ? 600 : 400,
-              style: {
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-                whiteSpace: "nowrap",
-                flex: 1,
-                fontFamily: "var(--elevasis-font-family-subtitle)",
-                color: isActive ? activeColor2 : defaultColor,
-                transition: `color var(--duration-fast) var(--easing)`
-              },
-              "data-text-element": true,
-              children: label
-            }
-          ),
-          badge && /* @__PURE__ */ jsx("div", { style: { flexShrink: 0 }, children: badge })
-        ] }),
-        description && /* @__PURE__ */ jsx(
-          Text,
-          {
-            size: "xs",
-            c: "dimmed",
-            style: {
-              paddingLeft: "22px",
-              lineHeight: 1.2,
-              color: isActive ? activeColor2 : defaultColor,
-              opacity: isActive ? 0.8 : 0.6,
-              transition: `all var(--duration-fast) var(--easing)`,
-              display: "-webkit-box",
-              WebkitLineClamp: 2,
-              WebkitBoxOrient: "vertical",
-              overflow: "hidden",
-              textOverflow: "ellipsis"
-            },
-            "data-text-element": true,
-            children: description
-          }
-        )
-      ] })
-    }
-  );
-};
-var SubshellContainer = ({ children, className }) => {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className,
-      style: {
-        display: "flex",
-        height: "100%",
-        width: "100%",
-        position: "relative"
-      },
-      children
-    }
-  );
-};
-var SubshellRightSideContainer = ({ children, className }) => {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className,
-      style: {
-        flex: 1,
-        minWidth: 0,
-        display: "flex",
-        flexDirection: "column",
-        overflow: "hidden"
-      },
-      children
-    }
-  );
-};
-var mdSpacing = 16;
-var SubshellContentContainer = ({ children, className }) => {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className,
-      style: {
-        display: "flex",
-        flexDirection: "column",
-        flex: 1,
-        overflowX: "clip",
-        overflowY: "auto",
-        minWidth: 0,
-        minHeight: 0,
-        padding: "var(--mantine-spacing-md)",
-        paddingTop: `${topbarHeight + mdSpacing}px`
-      },
-      children
-    }
-  );
-};
-var SubshellSidebar = ({ children, className, width }) => {
-  return /* @__PURE__ */ jsx(
-    "aside",
-    {
-      className,
-      style: {
-        width: `${width}px`,
-        flexShrink: 0,
-        display: "flex",
-        flexDirection: "column",
-        backgroundColor: "var(--glass-background)",
-        backdropFilter: "var(--glass-blur)",
-        WebkitBackdropFilter: "var(--glass-blur)",
-        borderRight: "1px solid var(--color-border)",
-        minHeight: `calc(100vh - ${topbarHeight}px)`,
-        marginTop: `${topbarHeight}px`,
-        fontFamily: "var(--elevasis-font-family-subtitle)"
-      },
-      children
-    }
-  );
-};
-var SubshellSidebarSection = ({
-  icon: Icon,
-  label,
-  rightSection,
-  withTopBorder = false
-}) => {
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      p: "sm",
-      style: {
-        borderTop: withTopBorder ? "1px solid var(--color-border)" : void 0,
-        borderBottom: "1px solid var(--color-border)"
-      },
-      children: /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
-        /* @__PURE__ */ jsx(Icon, { size: 16, color: "var(--color-text-subtle)" }),
-        /* @__PURE__ */ jsx(
-          Text,
-          {
-            size: "sm",
-            fw: 600,
-            c: "var(--color-text-subtle)",
-            style: { fontFamily: "var(--mantine-font-family-headings)", flex: 1 },
-            children: label
-          }
-        ),
-        rightSection
-      ] })
-    }
-  );
-};
-
-// src/components/layout/sub-shell/constants.ts
-var subsidebarWidth = 200;
-function SubshellLoader() {
-  return /* @__PURE__ */ jsx(Center, { mih: "calc(100vh - 70px)", children: /* @__PURE__ */ jsx(Loader, { size: "lg", loaders: { elevasis: ElevasisLoader }, type: "elevasis" }) });
-}
-var TopbarContainer = ({ children }) => {
-  const { isCollapsed } = useSidebar();
-  const actualSidebarWidth = isCollapsed ? sidebarCollapsedWidth : sidebarWidth;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        position: "fixed",
-        top: 0,
-        left: `${actualSidebarWidth}px`,
-        height: `${topbarHeight}px`,
-        width: `calc(100% - ${actualSidebarWidth}px)`,
-        backgroundColor: "var(--glass-background)",
-        backdropFilter: "var(--glass-blur)",
-        WebkitBackdropFilter: "var(--glass-blur)",
-        borderBottom: "1px solid var(--color-border)",
-        boxShadow: "var(--card-shadow)",
-        padding: "var(--mantine-spacing-sm)",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-        zIndex: 100,
-        // Add transition to match sidebar animation
-        transition: `left ${sidebarTransitionDuration}ms var(--easing), width ${sidebarTransitionDuration}ms var(--easing)`
-      },
-      children
-    }
-  );
-};
-var Topbar = ({ version, leftContent, children }) => {
-  const { colorScheme, toggleColorScheme } = useMantineColorScheme();
-  const isDark = colorScheme === "dark";
-  const [switchChecked, setSwitchChecked] = useState(isDark);
-  const [isToggling, setIsToggling] = useState(false);
-  useEffect(() => {
-    if (!isToggling) {
-      setSwitchChecked(isDark);
-    }
-  }, [isDark, isToggling]);
-  const handleSwitchToggle = (event) => {
-    const checked = event.currentTarget.checked;
-    setIsToggling(true);
-    toggleColorScheme();
-    setTimeout(() => {
-      setSwitchChecked(checked);
-      setTimeout(() => {
-        setIsToggling(false);
-      }, 200);
-    }, 10);
-  };
-  return /* @__PURE__ */ jsxs(TopbarContainer, { children: [
-    leftContent,
-    /* @__PURE__ */ jsxs(Group, { gap: "sm", children: [
-      children,
-      /* @__PURE__ */ jsx(
-        Switch,
-        {
-          size: "md",
-          checked: switchChecked,
-          onChange: handleSwitchToggle,
-          onLabel: /* @__PURE__ */ jsx(IconSun, { size: 16, stroke: 2.5, color: "var(--mantine-color-yellow-4)" }),
-          offLabel: /* @__PURE__ */ jsx(IconMoonStars, { size: 16, stroke: 2.5, color: "var(--mantine-color-blue-6)" }),
-          styles: {
-            track: {
-              backgroundColor: "var(--color-surface-hover)",
-              borderColor: "var(--color-border)"
-            }
-          }
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Code,
-        {
-          style: {
-            backgroundColor: "var(--color-surface)",
-            color: "var(--color-text)",
-            fontSize: "var(--mantine-font-size-xs)",
-            fontWeight: 700,
-            padding: "2px 6px",
-            borderRadius: "var(--mantine-radius-xs)",
-            border: "1px solid var(--color-border)"
-          },
-          children: version
-        }
-      )
-    ] })
-  ] });
-};
-
-export { AppShellCenteredContainer, AppShellContainer, AppShellContentContainer, AppShellError, AppShellLoader, AppShellRightSideContainer, AppShellRightSideOuterContainer, AppTopbarAdjusterWrapper, CollapsibleSidebarGroup, FilmGrain, FloatingOrbs, LinksGroup, PageContainer, PerspectiveGrid, RadiantGlow, Sidebar, SidebarListItem, SidebarProvider, SubshellContainer, SubshellContentContainer, SubshellLoader, SubshellRightSideContainer, SubshellSidebar, SubshellSidebarSection, Topbar, TopbarContainer, Vignette, sidebarCollapsedWidth, sidebarHoverDelay, sidebarTransitionDuration, sidebarWidth, subsidebarWidth, topbarHeight, useSidebar, useSidebarCollapse };
+import '../chunk-Q7DJKLEN.js';