@elevasis/ui 2.41.0 → 2.42.0

package/dist/chunk-QVQMOQXB.js

@@ -1,1240 +0,0 @@
-import { SubshellNavItem } from './chunk-X4WBGKJQ.js';
-import { useAppearance } from './chunk-L7GXUSCV.js';
-import { NavigationButton } from './chunk-NYBEU5TE.js';
-import { sidebarItemGap, sidebarSubLinkPaddingY, sidebarSubLinkPaddingX, sidebarSubLinkIndent, sidebarHoverDelay, sidebarTransitionDuration, sidebarCollapsedWidth, sidebarWidth, topbarHeight, sidebarToggleIconSize, sidebarSectionPadding, sidebarGroupChevronSize, sidebarIconInnerSize } from './chunk-DT3QYZVU.js';
-import { useRouterContext } from './chunk-Q7DJKLEN.js';
-import { useElevasisSystems } from './chunk-FIMGOWOT.js';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Collapse, HoverCard, Stack, Group, Text, UnstyledButton, Tooltip, ScrollArea, Menu, Avatar, Container, Title, Button, Box, Center, useMantineColorScheme, Switch, Code } from '@mantine/core';
-import { IconLayoutSidebarLeftExpand, IconLayoutSidebarLeftCollapse, IconUser, IconLogout, IconAlertCircle, IconChevronDown, IconChevronRight, IconMoonStars, IconSun } from '@tabler/icons-react';
-import { createContext, memo, useEffect, useRef, createElement, useContext, useLayoutEffect, useState, Fragment as Fragment$1 } from 'react';
-
-var randRange = (min, max) => min + Math.random() * (max - min);
-var FLUX_SPARKS = Array.from({ length: 30 }, () => {
-  const duration = randRange(12, 70);
-  const pulse = randRange(0.8, 2.2);
-  return {
-    left: randRange(0, 100),
-    size: randRange(1.5, 4.2),
-    duration,
-    delay: -randRange(0, duration),
-    drift: randRange(-35, 35),
-    peak: randRange(0.18, 0.5),
-    pulse,
-    pulseDelay: -randRange(0, pulse)
-  };
-});
-var FLUX_MOTES = Array.from({ length: 18 }, () => {
-  const duration = randRange(18, 90);
-  const pulse = randRange(1.6, 4);
-  return {
-    left: randRange(-2, 102),
-    size: randRange(3.5, 10),
-    duration,
-    delay: -randRange(0, duration),
-    drift: randRange(-55, 55),
-    blur: randRange(1.5, 5),
-    peak: randRange(0.22, 0.55),
-    pulse,
-    pulseDelay: -randRange(0, pulse)
-  };
-});
-var FLUX_GLOWS = Array.from({ length: 10 }, () => {
-  const duration = randRange(25, 130);
-  const pulse = randRange(3.5, 7);
-  return {
-    left: randRange(-5, 105),
-    size: randRange(3, 22),
-    duration,
-    delay: -randRange(0, duration),
-    drift: randRange(-80, 80),
-    blur: randRange(6, 16),
-    opacity: randRange(0.18, 0.42),
-    pulse,
-    pulseDelay: -randRange(0, pulse)
-  };
-});
-var KEYFRAMES = `
-@keyframes elevasis-cyber-spark-rise {
-  0% { transform: translate3d(0, 0, 0); opacity: 0; }
-  10% { opacity: var(--cy-peak, 1); }
-  85% { opacity: calc(var(--cy-peak, 1) * 0.9); }
-  100% { transform: translate3d(var(--cy-drift, 0px), -112vh, 0); opacity: 0; }
-}
-@keyframes elevasis-cyber-spark-pulse {
-  0%, 100% { filter: brightness(0.55); transform: scale(0.8); }
-  50% { filter: brightness(1.7); transform: scale(1.25); }
-}
-@keyframes elevasis-cyber-glow-pulse {
-  0%, 100% { transform: scale(0.85); }
-  50% { transform: scale(1.2); }
-}
-@media (prefers-reduced-motion: reduce) {
-  .elevasis-cyber-spark,
-  .elevasis-cyber-spark-inner,
-  .elevasis-cyber-glow,
-  .elevasis-cyber-glow-inner {
-    animation: none !important;
-  }
-  .elevasis-cyber-spark,
-  .elevasis-cyber-glow {
-    opacity: 0 !important;
-  }
-}
-`;
-function FluxGlows() {
-  return /* @__PURE__ */ jsx(Fragment, { children: FLUX_GLOWS.map((g, i) => /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: "elevasis-cyber-glow",
-      style: {
-        position: "absolute",
-        bottom: "-5%",
-        left: `${g.left}%`,
-        width: `${g.size}px`,
-        height: `${g.size}px`,
-        filter: `blur(${g.blur}px)`,
-        animation: `elevasis-cyber-spark-rise ${g.duration}s linear infinite`,
-        animationDelay: `${g.delay}s`,
-        ["--cy-drift"]: `${g.drift}px`,
-        ["--cy-peak"]: `${g.opacity}`,
-        willChange: "transform, opacity"
-      },
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "elevasis-cyber-glow-inner",
-          style: {
-            width: "100%",
-            height: "100%",
-            borderRadius: "50%",
-            background: `radial-gradient(circle, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 60%, transparent) 45%, transparent 75%)`,
-            animation: `elevasis-cyber-glow-pulse ${g.pulse}s ease-in-out infinite`,
-            animationDelay: `${g.pulseDelay}s`,
-            willChange: "transform"
-          }
-        }
-      )
-    },
-    i
-  )) });
-}
-function FluxMotes() {
-  return /* @__PURE__ */ jsx(Fragment, { children: FLUX_MOTES.map((m, i) => /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: "elevasis-cyber-spark",
-      style: {
-        position: "absolute",
-        bottom: "-3%",
-        left: `${m.left}%`,
-        width: `${m.size}px`,
-        height: `${m.size}px`,
-        filter: `blur(${m.blur}px)`,
-        animation: `elevasis-cyber-spark-rise ${m.duration}s linear infinite`,
-        animationDelay: `${m.delay}s`,
-        ["--cy-drift"]: `${m.drift}px`,
-        ["--cy-peak"]: `${m.peak}`,
-        willChange: "transform, opacity"
-      },
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "elevasis-cyber-spark-inner",
-          style: {
-            width: "100%",
-            height: "100%",
-            borderRadius: "50%",
-            background: `radial-gradient(circle, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 70%, transparent) 55%, transparent 90%)`,
-            boxShadow: `0 0 ${m.size * 1.2}px color-mix(in srgb, var(--color-primary) 40%, transparent)`,
-            animation: `elevasis-cyber-spark-pulse ${m.pulse}s ease-in-out infinite`,
-            animationDelay: `${m.pulseDelay}s`,
-            willChange: "transform, filter"
-          }
-        }
-      )
-    },
-    i
-  )) });
-}
-function FluxSparks() {
-  return /* @__PURE__ */ jsx(Fragment, { children: FLUX_SPARKS.map((s, i) => /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: "elevasis-cyber-spark",
-      style: {
-        position: "absolute",
-        bottom: "-2%",
-        left: `${s.left}%`,
-        width: `${s.size}px`,
-        height: `${s.size}px`,
-        animation: `elevasis-cyber-spark-rise ${s.duration}s linear infinite`,
-        animationDelay: `${s.delay}s`,
-        ["--cy-drift"]: `${s.drift}px`,
-        ["--cy-peak"]: `${s.peak}`,
-        willChange: "transform, opacity"
-      },
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "elevasis-cyber-spark-inner",
-          style: {
-            width: "100%",
-            height: "100%",
-            borderRadius: "50%",
-            background: "var(--color-primary)",
-            boxShadow: `0 0 ${s.size * 2.5}px var(--color-primary), 0 0 ${s.size * 5}px color-mix(in srgb, var(--color-primary) 50%, transparent)`,
-            animation: `elevasis-cyber-spark-pulse ${s.pulse}s ease-in-out infinite`,
-            animationDelay: `${s.pulseDelay}s`,
-            willChange: "transform, filter"
-          }
-        }
-      )
-    },
-    i
-  )) });
-}
-function CyberParticles({ variant: _variant, className }) {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className,
-      "aria-hidden": "true",
-      style: {
-        position: "absolute",
-        inset: 0,
-        pointerEvents: "none",
-        overflow: "hidden"
-      },
-      children: [
-        /* @__PURE__ */ jsx("style", { children: KEYFRAMES }),
-        /* @__PURE__ */ jsx(FluxGlows, {}),
-        /* @__PURE__ */ jsx(FluxMotes, {}),
-        /* @__PURE__ */ jsx(FluxSparks, {})
-      ]
-    }
-  );
-}
-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 }) => {
-  const { background } = useAppearance();
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        height: "100vh",
-        display: "flex",
-        backgroundColor: "var(--color-background)",
-        position: "relative"
-      },
-      children: [
-        background,
-        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, { gap: "lg", 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 = () => {
-  const { loader } = useAppearance();
-  return /* @__PURE__ */ jsx(AppShellCenteredContainer, { children: loader });
-};
-var AppShellError = ({ message, retry }) => {
-  return /* @__PURE__ */ jsx(AppShellCenteredContainer, { children: /* @__PURE__ */ jsxs(Stack, { align: "center", gap: "md", 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 isLinkItemActive = (linkItem, currentPath) => {
-  const isKnowledgeBaseActive = linkItem.link === "/knowledge" && currentPath.startsWith("/knowledge") && !currentPath.startsWith("/knowledge/command-view");
-  const matchesExtraPath = linkItem.activeMatchPaths?.some((path) => isPathActive(path, currentPath)) ?? false;
-  if (isKnowledgeBaseActive) return true;
-  if (linkItem.exact || isOverviewLink(linkItem.label, linkItem.link)) {
-    return currentPath === linkItem.link || matchesExtraPath;
-  }
-  return isPathActive(linkItem.link, currentPath) || matchesExtraPath;
-};
-var SubLinkItem = ({ linkItem, currentPath }) => {
-  const { Link } = useRouterContext();
-  const isActive = isLinkItemActive(linkItem, currentPath);
-  const activeColor2 = "var(--color-primary)";
-  const activeColorBg = "color-mix(in srgb, var(--color-primary) 10%, transparent)";
-  const defaultColor = "var(--color-text-subtle)";
-  const hoverColor = "var(--color-text)";
-  return /* @__PURE__ */ jsx(
-    Link,
-    {
-      to: linkItem.link,
-      onClick: linkItem.onClick,
-      "data-onboarding-tour-id": linkItem.dataOnboardingTourId,
-      style: {
-        display: "block",
-        textDecoration: "none",
-        fontFamily: "var(--elevasis-font-family-subtitle)",
-        fontSize: "var(--mantine-font-size-sm)",
-        color: isActive ? activeColor2 : defaultColor,
-        backgroundColor: isActive ? activeColorBg : "transparent",
-        padding: `${sidebarSubLinkPaddingY}px ${sidebarSubLinkPaddingX}px ${sidebarSubLinkPaddingY}px ${sidebarSubLinkIndent}px`,
-        borderRadius: "var(--mantine-radius-default)",
-        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 = hoverColor;
-        }
-      },
-      onMouseLeave: (e) => {
-        if (!isActive) {
-          e.currentTarget.style.backgroundColor = "transparent";
-          e.currentTarget.style.color = defaultColor;
-        }
-      },
-      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: `${sidebarItemGap}px` };
-  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",
-                      borderRadius: "var(--mantine-radius-default)",
-                      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) => isLinkItemActive(item, currentPath));
-  const isParentActive = !hasLinks && (link === "/" ? currentPath === "/" : isPathActive(link || "", currentPath));
-  const isIconTextActive = isParentActive || hasActiveChild;
-  const isBackgroundActive = isParentActive || hasActiveChild && !opened;
-  const prevPathRef = useRef(null);
-  useEffect(() => {
-    const pathChanged = prevPathRef.current !== currentPath;
-    prevPathRef.current = currentPath;
-    if (pathChanged && !isCollapsed && hasActiveChild && !opened && onToggle) {
-      onToggle();
-    }
-  }, [currentPath, hasActiveChild, isCollapsed, opened, onToggle]);
-  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: `${sidebarItemGap}px` }, 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: `${sidebarItemGap}px` }, 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: sidebarToggleIconSize,
-                stroke: 1.5,
-                style: {
-                  transition: `transform ${sidebarTransitionDuration}ms var(--easing)`
-                }
-              }
-            ) : /* @__PURE__ */ jsx(
-              IconLayoutSidebarLeftCollapse,
-              {
-                size: sidebarToggleIconSize,
-                stroke: 1.5,
-                style: {
-                  transition: `transform ${sidebarTransitionDuration}ms var(--easing)`
-                }
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
-};
-var BOTTOM_SECTION_HEIGHT_VAR = "--elevasis-sidebar-bottom-section-height";
-var SidebarBottomSection = ({ user, onLogout, onAccountClick }) => {
-  const { isCollapsed } = useSidebar();
-  const rootRef = useRef(null);
-  useLayoutEffect(() => {
-    const el = rootRef.current;
-    if (!el) return;
-    const update = () => {
-      document.documentElement.style.setProperty(BOTTOM_SECTION_HEIGHT_VAR, `${el.offsetHeight}px`);
-    };
-    update();
-    const observer = new ResizeObserver(update);
-    observer.observe(el);
-    return () => {
-      observer.disconnect();
-      document.documentElement.style.removeProperty(BOTTOM_SECTION_HEIGHT_VAR);
-    };
-  }, [user]);
-  if (!user) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: rootRef,
-      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,
-          {
-            style: {
-              background: "var(--glass-background)",
-              backdropFilter: "var(--glass-blur)",
-              WebkitBackdropFilter: "var(--glass-blur)"
-            },
-            children: [
-              /* @__PURE__ */ jsx(Menu.Item, { leftSection: /* @__PURE__ */ jsx(IconUser, { size: 14 }), onClick: onAccountClick, 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: sidebarSectionPadding,
-        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,
-  onAccountClick,
-  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, onAccountClick })
-  ] });
-});
-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: sidebarGroupChevronSize }) : /* @__PURE__ */ jsx(IconChevronRight, { size: sidebarGroupChevronSize }) }),
-          /* @__PURE__ */ jsx(
-            Box,
-            {
-              style: { flexShrink: 0, color: iconColor, cursor: onLabelClick ? "pointer" : "inherit" },
-              onClick: onLabelClick ? handleLabelClick : void 0,
-              children: /* @__PURE__ */ jsx(Icon, { size: sidebarIconInnerSize, 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 SubshellNavList = ({ items }) => {
-  const { currentPath, navigate } = useRouterContext();
-  return /* @__PURE__ */ jsx(Fragment, { children: items.map((item) => {
-    const isActive = item.exact ? currentPath === item.to || currentPath === `${item.to}/` : currentPath.startsWith(item.to);
-    return /* @__PURE__ */ jsx(
-      SubshellNavItem,
-      {
-        icon: item.icon,
-        label: item.label,
-        isActive,
-        href: item.to,
-        onClick: () => navigate(item.to)
-      },
-      item.to
-    );
-  }) });
-};
-
-// src/components/layout/sub-shell/constants.ts
-var subsidebarWidth = 200;
-function SubshellLoader() {
-  const { loader } = useAppearance();
-  return /* @__PURE__ */ jsx(Center, { mih: "calc(100vh - 70px)", children: loader });
-}
-function SubshellSidebarLoader({ padding = "sm" }) {
-  const { loader } = useAppearance();
-  return /* @__PURE__ */ jsx(Box, { style: { flex: 1, minHeight: 0, display: "flex" }, children: /* @__PURE__ */ jsx(Center, { p: padding, style: { flex: 1, minHeight: 0 }, children: loader }) });
-}
-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)",
-        clipPath: "inset(-100px -100px -100px 0)",
-        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
-        }
-      )
-    ] })
-  ] });
-};
-function TopbarActions({ isPlatformAdmin, isDev }) {
-  const { getTopbarActions } = useElevasisSystems();
-  const actions = getTopbarActions({ isPlatformAdmin, isDev });
-  return /* @__PURE__ */ jsx(Fragment, { children: actions.map(({ node, render }) => /* @__PURE__ */ jsx(Fragment$1, { children: render({ node }) }, node.id)) });
-}
-
-export { AppShellCenteredContainer, AppShellContainer, AppShellContentContainer, AppShellError, AppShellLoader, AppShellRightSideContainer, AppShellRightSideOuterContainer, AppTopbarAdjusterWrapper, CollapsibleSidebarGroup, CyberParticles, LinksGroup, PageContainer, Sidebar, SidebarContext, SidebarProvider, SubshellLoader, SubshellNavList, SubshellSidebarLoader, Topbar, TopbarActions, TopbarContainer, Vignette, subsidebarWidth, useSidebar, useSidebarCollapse };