@elevasis/ui 2.67.0 → 2.68.0

package/dist/chunk-SIVUCZXQ.js

@@ -0,0 +1,1194 @@
+import { NavigationButton, useAppearance, useElevasisSystems } from './chunk-ZGCWTWBD.js';
+import { sidebarItemGap, sidebarSubLinkPaddingY, sidebarSubLinkPaddingX, sidebarSubLinkIndent, sidebarHoverDelay, sidebarTransitionDuration, sidebarCollapsedWidth, sidebarWidth, topbarHeight, sidebarToggleIconSize, sidebarSectionPadding, sidebarGroupChevronSize, sidebarIconInnerSize, SubshellNavItem } from './chunk-MISHPEJX.js';
+import { useRouterContext } from './chunk-Q7DJKLEN.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { createContext, memo, useEffect, useRef, createElement, useContext, useLayoutEffect, useState, Fragment as Fragment$1 } from 'react';
+import { Collapse, HoverCard, Stack, Group, Text, UnstyledButton, Tooltip, ScrollArea, Menu, Avatar, Box, useMantineColorScheme, Switch, Code } from '@mantine/core';
+import { IconLayoutSidebarLeftExpand, IconLayoutSidebarLeftCollapse, IconUser, IconLogout, IconChevronDown, IconChevronRight, IconMoonStars, IconSun } from '@tabler/icons-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 AppTopbarAdjusterWrapper = ({ children }) => {
+  const padding = `${topbarHeight}px`;
+  return /* @__PURE__ */ jsx("div", { style: { paddingTop: padding }, children });
+};
+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;
+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 { AppShellContainer, AppShellContentContainer, AppShellRightSideContainer, AppShellRightSideOuterContainer, AppTopbarAdjusterWrapper, CollapsibleSidebarGroup, CyberParticles, LinksGroup, Sidebar, SidebarContext, SidebarProvider, SubshellNavList, Topbar, TopbarActions, TopbarContainer, Vignette, subsidebarWidth, useSidebar, useSidebarCollapse };