@elevasis/ui 2.33.2 → 2.35.0

package/dist/{chunk-TYRUKGGD.js → chunk-GX6XBRRF.js}

@@ -1,5 +1,4 @@
-import { SubshellNavItem } from './chunk-X4WBGKJQ.js';
-import { SubshellSidebarSection } from './chunk-IIMU5YAJ.js';
+import { SubshellSidebarSection, SubshellNavItem } from './chunk-R3VCBZDC.js';
 import { useRouterContext } from './chunk-Q7DJKLEN.js';
 import { Stack } from '@mantine/core';
 import { IconSearch, IconChartBar, IconTrendingUp } from '@tabler/icons-react';

package/dist/{chunk-V6SZ4ECN.js → chunk-LUYVRATI.js}

@@ -1,12 +1,11 @@
-import { SubshellNavItem } from './chunk-X4WBGKJQ.js';
 import { NavigationButton } from './chunk-NYBEU5TE.js';
+import { SubshellNavItem } from './chunk-R3VCBZDC.js';
+import { sidebarItemGap, sidebarSubLinkPaddingY, sidebarSubLinkPaddingX, sidebarSubLinkIndent, sidebarHoverDelay, sidebarTransitionDuration, sidebarCollapsedWidth, sidebarWidth, topbarHeight, sidebarToggleIconSize, sidebarSectionPadding, sidebarGroupChevronSize, sidebarIconInnerSize, sidebarBottomSectionHeight } from './chunk-DT3QYZVU.js';
 import { useRouterContext } from './chunk-Q7DJKLEN.js';
-import { useAppearance } from './chunk-E565XMTQ.js';
-import { sidebarItemGap, sidebarSubLinkPaddingY, sidebarSubLinkPaddingX, sidebarSubLinkIndent, sidebarHoverDelay, sidebarTransitionDuration, sidebarCollapsedWidth, sidebarWidth, topbarHeight, sidebarToggleIconSize, sidebarSectionPadding, sidebarGroupChevronSize, sidebarIconInnerSize } from './chunk-DT3QYZVU.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createContext, memo, useEffect, useRef, createElement, useContext, useLayoutEffect, useState } 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';
+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';
 
 var randRange = (min, max) => min + Math.random() * (max - min);
 var FLUX_SPARKS = Array.from({ length: 30 }, () => {
@@ -228,6 +227,17 @@ function Vignette({ strength = 0.35, className }) {
     }
   );
 }
+var AppearanceContext = createContext(null);
+function AppearanceProvider({ value, children }) {
+  return /* @__PURE__ */ jsx(AppearanceContext.Provider, { value, children });
+}
+function useAppearance() {
+  const ctx = useContext(AppearanceContext);
+  if (!ctx) {
+    throw new Error("useAppearance must be used within an AppearanceProvider (ElevasisCoreProvider)");
+  }
+  return ctx;
+}
 var AppShellContainer = ({ children }) => {
   const { background } = useAppearance();
   return /* @__PURE__ */ jsxs(
@@ -288,10 +298,45 @@ var AppShellContentContainer = ({ 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 }) => {
@@ -1078,6 +1123,204 @@ var CollapsibleSidebarGroup = ({
     ) })
   ] });
 };
+var SubshellContainer = ({ children, className }) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className,
+      style: {
+        display: "flex",
+        height: "100%",
+        width: "100%",
+        position: "relative"
+      },
+      children
+    }
+  );
+};
+var SubshellRightSideContainer = ({ children, className }) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className,
+      style: {
+        flex: 1,
+        minWidth: 0,
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden"
+      },
+      children
+    }
+  );
+};
+var mdSpacing = 16;
+var SubshellContentContainer = ({ children, className }) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className,
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        flex: 1,
+        overflowX: "clip",
+        overflowY: "auto",
+        minWidth: 0,
+        minHeight: 0,
+        padding: "var(--mantine-spacing-md)",
+        paddingTop: `${topbarHeight + mdSpacing}px`
+      },
+      children
+    }
+  );
+};
+var SubshellSidebar = ({
+  children,
+  className,
+  width,
+  collapsible = true,
+  defaultOpen = true
+}) => {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+  const effectiveWidth = collapsible && !isOpen ? 0 : width;
+  if (!collapsible) {
+    return /* @__PURE__ */ jsx(
+      "aside",
+      {
+        className,
+        style: {
+          width: `${width}px`,
+          flexShrink: 0,
+          display: "flex",
+          flexDirection: "column",
+          backgroundColor: "color-mix(in srgb, var(--glass-background) 80%, transparent)",
+          backdropFilter: "var(--glass-blur)",
+          WebkitBackdropFilter: "var(--glass-blur)",
+          borderRight: "1px solid var(--color-border)",
+          boxShadow: "var(--card-shadow)",
+          clipPath: "inset(-100px -100px -100px 0)",
+          height: `calc(100vh - ${topbarHeight}px)`,
+          minHeight: 0,
+          marginTop: `${topbarHeight}px`,
+          fontFamily: "var(--elevasis-font-family-subtitle)",
+          overflow: "hidden"
+        },
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        position: "relative",
+        flexShrink: 0,
+        marginTop: `${topbarHeight}px`,
+        height: `calc(100vh - ${topbarHeight}px)`,
+        minHeight: 0
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "aside",
+          {
+            className,
+            style: {
+              width: `${effectiveWidth}px`,
+              flexShrink: 0,
+              display: "flex",
+              flexDirection: "column",
+              backgroundColor: "color-mix(in srgb, var(--glass-background) 80%, transparent)",
+              backdropFilter: "var(--glass-blur)",
+              WebkitBackdropFilter: "var(--glass-blur)",
+              borderRight: isOpen ? "1px solid var(--color-border)" : "none",
+              boxShadow: isOpen ? "var(--card-shadow)" : "none",
+              clipPath: isOpen ? "inset(-100px -100px -100px 0)" : "none",
+              height: "100%",
+              fontFamily: "var(--elevasis-font-family-subtitle)",
+              overflow: "hidden",
+              transition: `width ${sidebarTransitionDuration}ms var(--easing)`
+            },
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  width: `${width}px`,
+                  flexShrink: 0,
+                  height: "100%",
+                  minHeight: 0,
+                  display: "flex",
+                  flexDirection: "column",
+                  opacity: isOpen ? 1 : 0,
+                  transition: `opacity var(--duration-fast) var(--easing)`
+                },
+                children
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setIsOpen((prev) => !prev),
+            style: {
+              position: "absolute",
+              right: 0,
+              bottom: 0,
+              transform: "translateX(100%)",
+              width: "20px",
+              // Match the live height of the outer Sidebar's bottom profile section.
+              // SidebarBottomSection publishes --elevasis-sidebar-bottom-section-height
+              // via ResizeObserver so this follows its actual height through
+              // collapse/expand transitions. Falls back to the expanded-state
+              // constant when rendered outside a Sidebar layout.
+              height: `var(--elevasis-sidebar-bottom-section-height, ${sidebarBottomSectionHeight}px)`,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              backgroundColor: "color-mix(in srgb, var(--glass-background) 80%, transparent)",
+              backdropFilter: "var(--glass-blur)",
+              WebkitBackdropFilter: "var(--glass-blur)",
+              border: "1px solid var(--color-border)",
+              borderLeft: "none",
+              borderBottom: "none",
+              borderRadius: "0 4px 0 0",
+              cursor: "pointer",
+              color: "var(--color-text-subtle)",
+              padding: 0,
+              zIndex: 10,
+              transition: `color var(--duration-fast) var(--easing)`
+            },
+            "aria-label": isOpen ? "Collapse sidebar" : "Expand sidebar",
+            children: /* @__PURE__ */ jsx(
+              "svg",
+              {
+                width: "6",
+                height: "10",
+                viewBox: "0 0 8 12",
+                fill: "none",
+                style: {
+                  transform: isOpen ? void 0 : "rotate(180deg)",
+                  transition: `transform var(--duration-fast) var(--easing)`
+                },
+                children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: "M6 1L1 6L6 11",
+                    stroke: "currentColor",
+                    strokeWidth: "1.5",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round"
+                  }
+                )
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
 var SubshellNavList = ({ items }) => {
   const { currentPath, navigate } = useRouterContext();
   return /* @__PURE__ */ jsx(Fragment, { children: items.map((item) => {
@@ -1098,6 +1341,14 @@ var SubshellNavList = ({ items }) => {
 
 // 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;
@@ -1188,4 +1439,4 @@ var Topbar = ({ version, leftContent, children }) => {
   ] });
 };
 
-export { AppShellContainer, AppShellContentContainer, AppShellRightSideContainer, AppShellRightSideOuterContainer, AppTopbarAdjusterWrapper, CollapsibleSidebarGroup, CyberParticles, LinksGroup, Sidebar, SidebarContext, SidebarProvider, SubshellNavList, Topbar, TopbarContainer, Vignette, subsidebarWidth, useSidebar, useSidebarCollapse };
+export { AppShellCenteredContainer, AppShellContainer, AppShellContentContainer, AppShellError, AppShellLoader, AppShellRightSideContainer, AppShellRightSideOuterContainer, AppTopbarAdjusterWrapper, AppearanceProvider, CollapsibleSidebarGroup, CyberParticles, LinksGroup, PageContainer, Sidebar, SidebarContext, SidebarProvider, SubshellContainer, SubshellContentContainer, SubshellLoader, SubshellNavList, SubshellRightSideContainer, SubshellSidebar, SubshellSidebarLoader, Topbar, TopbarContainer, Vignette, subsidebarWidth, useAppearance, useSidebar, useSidebarCollapse };

package/dist/{chunk-X4WBGKJQ.js → chunk-R3VCBZDC.js}

@@ -1,5 +1,5 @@
-import { subshellNavItemIconSize } from './chunk-DT3QYZVU.js';
-import { UnstyledButton, Stack, Group, Text } from '@mantine/core';
+import { sidebarIconSize, sidebarIconStroke, sidebarIconInnerSize, subshellNavItemIconSize } from './chunk-DT3QYZVU.js';
+import { UnstyledButton, Box, Group, ThemeIcon, Stack, Text } from '@mantine/core';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var activeColor = "var(--color-primary)";
@@ -134,5 +134,52 @@ var SubshellNavItem = ({
     }
   );
 };
+var SubshellSidebarSection = ({
+  icon: Icon,
+  label,
+  rightSection,
+  withTopBorder = false
+}) => {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      p: "sm",
+      style: {
+        borderTop: withTopBorder ? "1px solid var(--color-border)" : void 0,
+        borderBottom: "1px solid var(--color-border)"
+      },
+      children: /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+        /* @__PURE__ */ jsx(
+          ThemeIcon,
+          {
+            variant: "light",
+            size: sidebarIconSize,
+            style: {
+              backgroundColor: "var(--color-surface)",
+              color: "var(--color-primary)",
+              flexShrink: 0
+            },
+            children: /* @__PURE__ */ jsx(Icon, { size: sidebarIconInnerSize, stroke: sidebarIconStroke })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            c: "var(--color-text)",
+            style: {
+              fontFamily: "var(--elevasis-font-family-subtitle)",
+              flex: 1,
+              fontSize: "var(--mantine-font-size-md)",
+              fontWeight: 500,
+              lineHeight: 1.2
+            },
+            children: label
+          }
+        ),
+        rightSection
+      ] })
+    }
+  );
+};
 
-export { SubshellNavItem };
+export { SubshellNavItem, SubshellSidebarSection };