@elevasis/ui 2.9.1 → 2.10.1

package/dist/app/index.css

@@ -0,0 +1,137 @@
+/* src/theme/custom.css */
+.mantine-Button-root[data-variant=default] {
+  background-color: var(--color-surface);
+  backdrop-filter: var(--glass-blur);
+  -webkit-backdrop-filter: var(--glass-blur);
+  border: 1px solid var(--color-border);
+  color: var(--color-text);
+}
+.mantine-Button-root[data-variant=default]:hover {
+  background-color: var(--color-surface-hover);
+}
+.mantine-Accordion-control:hover {
+  background-color: var(--color-surface-hover);
+}
+.mantine-Menu-item:hover:not([data-disabled]) {
+  background-color: var(--color-surface-hover);
+}
+.mantine-Select-option:hover {
+  background-color: var(--color-surface-hover) !important;
+}
+[data-mantine-color-scheme=dark] .mantine-Tabs-root {
+  --tab-border-color: var(--color-border);
+}
+.mantine-Tabs-tab:hover {
+  background-color: var(--color-surface-hover);
+}
+.mantine-Pagination-control:not([data-active]) {
+  background: var(--color-surface);
+}
+::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--color-text-subtle) 50%, var(--color-border));
+  border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-text-subtle);
+}
+.mantine-Checkbox-input {
+  background-color: var(--color-surface);
+  border-color: var(--color-border);
+}
+.mantine-Checkbox-input:checked {
+  background-color: var(--color-primary);
+  border-color: var(--color-primary);
+}
+.mantine-Switch-root:has(input:not(:checked)) .mantine-Switch-track {
+  background-color: var(--color-surface-hover);
+  border-color: var(--color-border);
+}
+.mantine-Timeline-root {
+  --tl-color: var(--color-primary);
+}
+.mantine-Timeline-item {
+  --item-border-color: var(--color-border);
+}
+.mantine-Timeline-itemBullet {
+  border-color: var(--color-border);
+}
+.mantine-Timeline-itemBullet:where([data-with-child]) {
+  background-color: var(--color-primary);
+  border-color: var(--color-primary);
+}
+.recharts-surface:focus {
+  outline: none;
+}
+.hide-scrollbar {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.hide-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+/* src/components/display/ElevasisLoader.module.css */
+.wrapper {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--loader-size);
+  height: var(--loader-size);
+  overflow: visible;
+}
+.loader {
+  width: 100%;
+  height: 100%;
+  display: block;
+  overflow: visible;
+}
+.chevron {
+  stroke: var(--loader-color);
+  stroke-width: 2;
+  stroke-linecap: square;
+  stroke-linejoin: miter;
+  fill: none;
+  opacity: 0.15;
+  animation: chevronPulse 2s ease-in-out infinite;
+  filter: drop-shadow(0 0 1.5px var(--loader-color));
+}
+[data-mantine-color-scheme=light] .chevron {
+  filter: none;
+}
+.c1 {
+  animation-delay: 0s;
+}
+.c2 {
+  animation-delay: 0.2s;
+}
+.c3 {
+  animation-delay: 0.4s;
+}
+@keyframes chevronPulse {
+  0%, 100% {
+    opacity: 0.12;
+    filter: drop-shadow(0 0 1px var(--loader-color));
+  }
+  40%, 60% {
+    opacity: 1;
+    filter: drop-shadow(0 0 3px var(--loader-color));
+  }
+}
+[data-mantine-color-scheme=light] .chevron {
+  animation-name: chevronPulseLight;
+}
+@keyframes chevronPulseLight {
+  0%, 100% {
+    opacity: 0.2;
+  }
+  40%, 60% {
+    opacity: 1;
+  }
+}

package/dist/app/index.d.ts

@@ -0,0 +1,223 @@
+import { ReactNode, ComponentType } from 'react';
+import { AnyRouter } from '@tanstack/react-router';
+import { QueryClient } from '@tanstack/react-query';
+import { MantineThemeOverride } from '@mantine/core';
+
+interface ApiErrorDetails {
+    method: string;
+    statusCode: number;
+    requestId?: string;
+}
+
+/** Framework-agnostic theme overrides bundled with a preset (fonts, radius, component styles). */
+interface FrameworkThemeOverrides {
+    fontFamily?: string;
+    defaultRadius?: string;
+    headings?: {
+        fontFamily?: string;
+        fontWeight?: string;
+    };
+    components?: Record<string, unknown>;
+}
+/** Tokens every preset must define. `elevatedSurface` is progressively adopted and stays optional. */
+type PresetTokens = Required<Omit<ElevasisTokenOverrides, 'elevatedSurface'>> & Pick<ElevasisTokenOverrides, 'elevatedSurface'>;
+interface ThemePreset {
+    light: PresetTokens;
+    dark: PresetTokens;
+    /** Optional framework theme overrides bundled with this preset (fonts, radius, etc.). */
+    framework?: FrameworkThemeOverrides;
+    /**
+     * Subtitle font family — used for card names, section labels, and nav items.
+     * Sits between heading and body in the typographic hierarchy.
+     */
+    subtitleFontFamily?: string;
+    /** Google Fonts URLs to load when this preset is active. */
+    fontImports?: string[];
+    /** Display label for settings UI (e.g. "Tactical"). Built-in presets define this; custom presets must provide it. */
+    label?: string;
+    /** Short description for settings UI (e.g. "Tactical command center aesthetic"). */
+    description?: string;
+    /** Three representative hex colors for swatch display: [primary, dark-bg, light-bg]. */
+    colors?: [string, string, string];
+    /**
+     * Background layers rendered behind app content when this preset is active.
+     * Overridden by `theme.background` on the provider if both are set.
+     */
+    background?: ReactNode;
+    /**
+     * Loader element used in loading states when this preset is active.
+     * Overridden by `theme.loader` on the provider if both are set.
+     */
+    loader?: ReactNode;
+}
+type PresetName = 'default' | 'tactical' | 'regal' | 'cyber-volt' | 'aurora' | 'rose-gold' | 'midnight' | 'titanium' | 'canopy' | 'slate' | 'cyber-strike' | 'cyber-chrome' | 'cyber-void' | 'nirvana' | 'wave' | 'synapse' | 'cortex' | 'helios' | 'graphite' | 'quarry';
+
+/** Flat + per-scheme override pattern. Flat values apply to both; `light`/`dark` win over flat. */
+type WithSchemes<T> = T & {
+    light?: T;
+    dark?: T;
+};
+/**
+ * Theme token overrides. Each key maps 1:1 to a CSS variable.
+ * All optional — defaults come from Elevasis design system.
+ */
+interface ElevasisTokenOverrides {
+    primary?: string;
+    /** Text color that contrasts with `primary`. Defaults to '#fff'. */
+    primaryContrast?: string;
+    background?: string;
+    surface?: string;
+    surfaceHover?: string;
+    /** Opaque surface for floating overlays (modals, menus, popovers) — guarantees readable contrast against decorative backgrounds. */
+    elevatedSurface?: string;
+    text?: string;
+    textDimmed?: string;
+    textSubtle?: string;
+    border?: string;
+    error?: string;
+    warning?: string;
+    success?: string;
+    glassBackground?: string;
+    glassBlur?: string;
+    shadow?: string;
+    cardShadow?: string;
+    durationFast?: string;
+    durationNormal?: string;
+    easing?: string;
+    /** Foreground text color for destructive/error buttons. Defaults to '#fff'. */
+    destructiveFg?: string;
+    /** Heading font family — used for titles, section headers. */
+    fontHeading?: string;
+    /** Body font family — used for general text. */
+    fontSans?: string;
+}
+/**
+ * Core theme config — Mantine-free.
+ * Used by ElevasisCoreProvider and as the base for ElevasisThemeConfig.
+ */
+interface ElevasisCoreThemeConfig {
+    /** Color scheme: 'light', 'dark', or 'auto'. Defaults to 'dark'. */
+    colorScheme?: 'light' | 'dark' | 'auto';
+    /** Named preset — bundles light/dark token defaults. Defaults to 'default'. Accepts built-in PresetName or custom preset key. */
+    preset?: PresetName | (string & {});
+    /**
+     * Semantic token overrides fed into CSS variables.
+     * Flat values apply to both schemes. `light`/`dark` nested values win over flat.
+     */
+    tokens?: WithSchemes<ElevasisTokenOverrides>;
+    /** Custom presets map — when provided, used instead of built-in presets. Typically `{ ...presets, ...customPresets }`. */
+    presets?: Record<string, ThemePreset>;
+}
+
+/**
+ * Mantine-specific theme config — extends the headless core config with
+ * visual appearance and a full Mantine theme override escape hatch.
+ */
+interface ElevasisThemeConfig extends ElevasisCoreThemeConfig {
+    /** Full Mantine theme override — merged on top of Elevasis defaults. */
+    mantine?: MantineThemeOverride;
+    /** Background layers rendered behind app content. Defaults to Elevasis background (PerspectiveGrid + RadiantGlow + FloatingOrbs + FilmGrain). */
+    background?: ReactNode;
+    /** Loader element rendered during loading states. Defaults to Elevasis chevron loader (xl). */
+    loader?: ReactNode;
+}
+
+/**
+ * Store integration hooks for reading and writing theme state.
+ * Pass functions that read from your Zustand store (or equivalent).
+ */
+interface ElevasisAppStoreConfig {
+    /** Returns the active preset name (e.g. 'default', 'ocean') */
+    useThemePreset: () => string;
+    /** Returns the active color scheme ('light' | 'dark' | 'auto') */
+    useThemeColorScheme: () => string;
+    /** Returns the setTheme action from the store */
+    useSetTheme: () => (theme: Record<string, unknown>) => void;
+}
+/**
+ * Configuration for createElevasisApp.
+ *
+ * NOTE: CSS imports are NOT handled by this factory — consumers must import
+ * the required CSS in their entry point:
+ * ```ts
+ * import './style.css'
+ * import '@elevasis/ui/components/index.css'
+ * import '@elevasis/ui/graph/index.css'
+ * import '@elevasis/ui/provider/index.css'
+ * ```
+ *
+ * Module-level side effects (initializeBetterStack, suppressKnownWarnings) also
+ * remain in the consumer's main.tsx — call them before invoking createElevasisApp.
+ */
+interface ElevasisAppConfig {
+    /** TanStack Router instance (from createRouter) */
+    router: AnyRouter;
+    /** Elevasis API base URL */
+    apiUrl: string;
+    /** WorkOS AuthKit configuration */
+    auth: {
+        clientId: string;
+        redirectUri?: string;
+        apiHostname?: string;
+        devMode?: boolean;
+    };
+    /**
+     * Zustand store hooks for theme state.
+     * When omitted, uses static defaults ('default' preset, 'dark' scheme, no sync).
+     */
+    store?: ElevasisAppStoreConfig;
+    /** Extra theme configuration (presets map, background, loader) */
+    theme?: {
+        presets?: ElevasisThemeConfig['presets'];
+        background?: ReactNode;
+        loader?: ReactNode;
+    };
+    /** Custom QueryClient. A default is created internally when omitted. */
+    queryClient?: QueryClient;
+    /** Callback for API errors (status >= 500) */
+    onApiError?: (endpoint: string, error: Error, details?: ApiErrorDetails) => void;
+    /**
+     * Component to render when VITE_WORKOS_CLIENT_ID (or auth.clientId) is missing.
+     * When omitted and clientId is falsy, renders null.
+     */
+    MissingEnvNotice?: ComponentType;
+    /**
+     * Called with the current access token whenever the auth user changes.
+     * Use this to sync the token to a debug logger or external service.
+     */
+    onAuthTokenChange?: (token: string | undefined) => void;
+}
+/**
+ * Creates a root App component from a declarative config.
+ *
+ * Absorbs the boilerplate common to every template's main.tsx:
+ * - Theme preset/colorScheme reading from a Zustand store
+ * - Missing env var guard
+ * - ElevasisUIProvider assembly
+ * - Auth token sync
+ * - Profile theme sync
+ * - Notifications + RouterProvider rendering
+ *
+ * @example
+ * ```tsx
+ * const App = createElevasisApp({
+ *   router,
+ *   apiUrl: import.meta.env.VITE_API_URL,
+ *   auth: { clientId: import.meta.env.VITE_WORKOS_CLIENT_ID, devMode: true },
+ *   store: {
+ *     useThemePreset: () => useAppStore(s => s.theme.preset),
+ *     useThemeColorScheme: () => useAppStore(s => s.theme.colorScheme),
+ *     useSetTheme: () => useAppStore(s => s.setTheme),
+ *   },
+ *   MissingEnvNotice,
+ *   onAuthTokenChange: (token) => uiLogger.setAuthToken(token),
+ *   onApiError: (endpoint, error, details) => bslogAPIError(endpoint, error, details),
+ * })
+ *
+ * createRoot(document.getElementById('root')!).render(<App />)
+ * ```
+ */
+declare function createElevasisApp(config: ElevasisAppConfig): ComponentType;
+
+export { createElevasisApp };
+export type { ElevasisAppConfig, ElevasisAppStoreConfig };

package/dist/app/index.js

@@ -0,0 +1,95 @@
+import { ElevasisUIProvider } from '../chunk-LPSBID5V.js';
+import '../chunk-6PNHW4X2.js';
+import '../chunk-F4TPY6YL.js';
+import '../chunk-R7WLWGPO.js';
+import '../chunk-SZHARWKU.js';
+import '../chunk-NVOCKXUQ.js';
+import '../chunk-V7XHGJQZ.js';
+import '../chunk-QJ2KCHKX.js';
+import '../chunk-IOKL7BKE.js';
+import { useInitialization } from '../chunk-TUXTSEAF.js';
+import '../chunk-DD3CCMCZ.js';
+import '../chunk-QEPXAWE2.js';
+import '../chunk-BRJ3QZ4E.js';
+import { useCallback, useEffect } from 'react';
+import { RouterProvider } from '@tanstack/react-router';
+import { Notifications } from '@mantine/notifications';
+import { useAuth } from '@workos-inc/authkit-react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var DEFAULT_PRESET = "default";
+var DEFAULT_COLOR_SCHEME = "dark";
+function AppWithStore({ config }) {
+  const themePreset = config.store?.useThemePreset() ?? DEFAULT_PRESET;
+  const themeColorScheme = config.store?.useThemeColorScheme() ?? DEFAULT_COLOR_SCHEME;
+  const handleApiError = useCallback(
+    (endpoint, error, details) => {
+      config.onApiError?.(endpoint, error, details);
+    },
+    [config.onApiError]
+  );
+  if (!config.auth.clientId) {
+    if (config.MissingEnvNotice) {
+      return /* @__PURE__ */ jsx(config.MissingEnvNotice, {});
+    }
+    return null;
+  }
+  const assembledTheme = {
+    preset: themePreset,
+    colorScheme: themeColorScheme,
+    ...config.theme?.presets ? { presets: config.theme.presets } : {},
+    ...config.theme?.background !== void 0 ? { background: config.theme.background } : {},
+    ...config.theme?.loader !== void 0 ? { loader: config.theme.loader } : {}
+  };
+  return /* @__PURE__ */ jsx(
+    ElevasisUIProvider,
+    {
+      theme: assembledTheme,
+      auth: {
+        mode: "authkit",
+        clientId: config.auth.clientId,
+        redirectUri: config.auth.redirectUri,
+        apiHostname: config.auth.apiHostname,
+        devMode: config.auth.devMode
+      },
+      queryClient: config.queryClient,
+      apiUrl: config.apiUrl,
+      onError: config.onApiError ? handleApiError : void 0,
+      children: /* @__PURE__ */ jsx(AuthenticatedApp, { config })
+    }
+  );
+}
+function AuthenticatedApp({ config }) {
+  const { user, getAccessToken } = useAuth();
+  const setTheme = config.store?.useSetTheme();
+  const { profile } = useInitialization();
+  useEffect(() => {
+    if (!config.onAuthTokenChange) return;
+    if (user) {
+      getAccessToken().then((token) => config.onAuthTokenChange(token)).catch(() => {
+      });
+    } else {
+      config.onAuthTokenChange(void 0);
+    }
+  }, [user, getAccessToken, config.onAuthTokenChange]);
+  useEffect(() => {
+    if (!setTheme || !profile?.config) return;
+    const cfg = profile.config;
+    if (cfg.theme) {
+      setTheme(cfg.theme);
+    }
+  }, [profile, setTheme]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Notifications, {}),
+    /* @__PURE__ */ jsx(RouterProvider, { router: config.router })
+  ] });
+}
+function createElevasisApp(config) {
+  function ElevasisApp() {
+    return /* @__PURE__ */ jsx(AppWithStore, { config });
+  }
+  ElevasisApp.displayName = "ElevasisApp";
+  return ElevasisApp;
+}
+
+export { createElevasisApp };

package/dist/charts/index.js

@@ -1,8 +1,9 @@
-export { ActivityTrendChart, ChartFrame, CombinedTrendChart, CostTrendChart, CyberAreaChart, CyberDonut, CyberDonutTooltip, CyberLegendItem, HeroStatsRow, getSeriesColor, useCyberColors } from '../chunk-KFICYU6S.js';
+export { ActivityTrendChart, ChartFrame, CombinedTrendChart, CostTrendChart, CyberAreaChart, CyberDonut, CyberDonutTooltip, CyberLegendItem, HeroStatsRow, getSeriesColor, useCyberColors } from '../chunk-STZJ7SY5.js';
 import '../chunk-LXHZYSMQ.js';
-import '../chunk-Y3D3WFJG.js';
+import '../chunk-SQQGLGHW.js';
 import '../chunk-3KMDHCAR.js';
 import '../chunk-NYBEU5TE.js';
+import '../chunk-SZHARWKU.js';
 import '../chunk-2IFYDILW.js';
 import '../chunk-ELJIFLCB.js';
 import '../chunk-DT3QYZVU.js';

package/dist/{chunk-NYMKWGKN.js → chunk-4BF74JVD.js}

@@ -1,12 +1,12 @@
-import { SubshellNavItem } from './chunk-27COZ5AH.js';
+import { SubshellNavItem } from './chunk-CEWTOKE7.js';
 import { NavigationButton } from './chunk-NYBEU5TE.js';
 import { useAppearance } from './chunk-QJ2KCHKX.js';
-import { sidebarItemGap, sidebarSubLinkPaddingY, sidebarSubLinkPaddingX, sidebarSubLinkIndent, sidebarHoverDelay, sidebarTransitionDuration, sidebarCollapsedWidth, sidebarWidth, topbarHeight, sidebarToggleIconSize, sidebarSectionPadding } from './chunk-DT3QYZVU.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 { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createContext, memo, useEffect, createElement, useContext, useRef, useLayoutEffect, useState } from 'react';
-import { Collapse, HoverCard, Stack, Group, Text, UnstyledButton, Tooltip, ScrollArea, Menu, Avatar, useMantineColorScheme, Switch, Code } from '@mantine/core';
-import { IconLayoutSidebarLeftExpand, IconLayoutSidebarLeftCollapse, IconUser, IconLogout, IconMoonStars, IconSun } from '@tabler/icons-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 }, () => {
@@ -381,7 +381,7 @@ var isOverviewLink = (label, link) => {
 var SubLinkItem = ({ linkItem, currentPath }) => {
   const { Link } = useRouterContext();
   const isActive = isOverviewLink(linkItem.label, linkItem.link) ? currentPath === linkItem.link : isPathActive(linkItem.link, currentPath);
-  const activeColor = "var(--color-primary)";
+  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)";
@@ -396,7 +396,7 @@ var SubLinkItem = ({ linkItem, currentPath }) => {
         textDecoration: "none",
         fontFamily: "var(--elevasis-font-family-subtitle)",
         fontSize: "var(--mantine-font-size-sm)",
-        color: isActive ? activeColor : defaultColor,
+        color: isActive ? activeColor2 : defaultColor,
         backgroundColor: isActive ? activeColorBg : "transparent",
         padding: `${sidebarSubLinkPaddingY}px ${sidebarSubLinkPaddingX}px ${sidebarSubLinkPaddingY}px ${sidebarSubLinkIndent}px`,
         borderRadius: "var(--mantine-radius-default)",
@@ -958,6 +958,109 @@ var Sidebar = memo(function Sidebar2({
     /* @__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) => {
@@ -1067,4 +1170,4 @@ var Topbar = ({ version, leftContent, children }) => {
   ] });
 };
 
-export { AppShellContainer, AppShellContentContainer, AppShellRightSideContainer, AppShellRightSideOuterContainer, AppTopbarAdjusterWrapper, CyberParticles, LinksGroup, Sidebar, SidebarContext, SidebarProvider, SubshellNavList, Topbar, TopbarContainer, Vignette, subsidebarWidth, useSidebar, useSidebarCollapse };
+export { AppShellContainer, AppShellContentContainer, AppShellRightSideContainer, AppShellRightSideOuterContainer, AppTopbarAdjusterWrapper, CollapsibleSidebarGroup, CyberParticles, LinksGroup, Sidebar, SidebarContext, SidebarProvider, SubshellNavList, Topbar, TopbarContainer, Vignette, subsidebarWidth, useSidebar, useSidebarCollapse };