@elevasis/ui 1.4.0 → 1.6.0

package/dist/layout/index.js

@@ -0,0 +1,1440 @@
+import { NavigationButton, ElevasisLoader } from '../chunk-R56VC63S.js';
+import '../chunk-LHQTTUL2.js';
+import { useRouterContext } from '../chunk-Q7DJKLEN.js';
+import '../chunk-MLKGABMK.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 };