@alepha/ui 0.15.5 → 0.16.1

package/package.json

@@ -7,7 +7,7 @@
     "mantine"
   ],
   "author": "Nicolas Foures",
-  "version": "0.15.5",
+  "version": "0.16.1",
   "type": "module",
   "engines": {
     "node": ">=22.0.0"
@@ -22,19 +22,19 @@
     "styles.css"
   ],
   "dependencies": {
-    "@mantine/core": "^8.3.13",
-    "@mantine/dates": "^8.3.13",
-    "@mantine/hooks": "^8.3.13",
-    "@mantine/modals": "^8.3.13",
-    "@mantine/notifications": "^8.3.13",
-    "@mantine/nprogress": "^8.3.13",
-    "@mantine/spotlight": "^8.3.13",
+    "@mantine/core": "^8.3.14",
+    "@mantine/dates": "^8.3.14",
+    "@mantine/hooks": "^8.3.14",
+    "@mantine/modals": "^8.3.14",
+    "@mantine/notifications": "^8.3.14",
+    "@mantine/nprogress": "^8.3.14",
+    "@mantine/spotlight": "^8.3.14",
     "@tabler/icons-react": "^3.36.1",
     "dayjs": "^1.11.19"
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.3.13",
-    "alepha": "0.15.5",
+    "@biomejs/biome": "^2.3.14",
+    "alepha": "0.16.1",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "typescript": "^5.9.3",
@@ -42,7 +42,7 @@
     "vitest": "^4.0.18"
   },
   "peerDependencies": {
-    "alepha": "0.15.5",
+    "alepha": "0.16.1",
     "react": "*",
     "react-dom": "*"
   },

package/src/admin/AdminRouter.ts

@@ -1,4 +1,4 @@
-import type { AdminShellProps } from "@alepha/ui";
+import type { AdminShellProps, SidebarNode } from "@alepha/ui";
 import { AuthRouter } from "@alepha/ui/auth";
 import {
   IconBell,
@@ -40,7 +40,82 @@ export class AdminRouter {
   protected readonly jobCtrl = $client<AdminJobController>();
   protected readonly apiKeyCtrl = $client<AdminApiKeyController>();
 
+  public configFn?: (adminRouter: AdminRouter) => AdminShellProps = () => {
+    return {
+      sidebarResizable: true,
+      sidebarProps: {
+        items: this.getDefaultSidebarItems(),
+      },
+    };
+  };
+
+  public getDefaultSidebarItems(): SidebarNode[] {
+    return [
+      // Identity & Access
+      {
+        label: "Identity",
+        icon: IconUsers,
+        children: [
+          {
+            ...this.router.node(this.adminUsers.name),
+            can: () => this.userCtrl.findUsers.can(),
+          },
+          {
+            ...this.router.node(this.adminSessions.name),
+            can: () => this.sessionCtrl.findSessions.can(),
+          },
+          {
+            ...this.router.node(this.adminApiKeys.name),
+            can: () => this.apiKeyCtrl.findApiKeys.can(),
+          },
+        ],
+      },
+
+      // Content & Storage
+      {
+        label: "Content",
+        icon: IconFile,
+        children: [
+          {
+            ...this.router.node(this.adminFiles.name),
+            can: () => this.fileCtrl.findFiles.can(),
+          },
+          {
+            ...this.router.node(this.adminNotifications.name),
+            can: () => this.notificationCtrl.findNotifications.can(),
+          },
+        ],
+      },
+
+      // System
+      {
+        label: "System",
+        icon: IconSettings,
+        children: [
+          {
+            ...this.router.node(this.adminJobs.name),
+            can: () => this.jobCtrl.getJobs.can(),
+          },
+          {
+            ...this.router.node(this.adminAudits.name),
+            can: () => this.auditCtrl.findAudits.can(),
+          },
+          {
+            ...this.router.node(this.adminParameters.name),
+            can: () => this.configCtrl.getConfigTree.can(),
+          },
+        ],
+      },
+
+      // Bottom
+      { type: "toggle", position: "bottom" },
+    ];
+  }
+
   protected adminShellProps(): AdminShellProps {
+    if (this.configFn) {
+      return this.configFn(this);
+    }
     return {};
   }
 
@@ -61,7 +136,7 @@ export class AdminRouter {
   public readonly adminLayout = $page({
     path: "/admin",
     label: "Admin",
-    can: () => this.userCtrl.findUsers.can(),
+    can: () => this.auth.can("admin:*"),
     lazy: () => import("./components/AdminLayout.tsx"),
     props: () => ({
       adminShellProps: this.adminShellProps(),

package/src/admin/components/AdminLayout.tsx

@@ -7,7 +7,6 @@ import {
 } from "@alepha/ui";
 import { UserButton } from "@alepha/ui/auth";
 import { IconArrowLeft } from "@tabler/icons-react";
-import "../../core/styles.css";
 
 export interface AdminLayoutProps {
   adminShellProps?: AdminShellProps;

package/src/admin/index.ts

@@ -1,6 +1,6 @@
 import { AlephaUI } from "@alepha/ui";
 import { AlephaUIAuth } from "@alepha/ui/auth";
-import { $context, $module } from "alepha";
+import { $module } from "alepha";
 import { AdminRouter } from "./AdminRouter.ts";
 
 // ---------------------------------------------------------------------------------------------------------------------
@@ -30,13 +30,14 @@ export { default as AdminUserSettings } from "./components/users/AdminUserSettin
 export { default as AdminUsers } from "./components/users/AdminUsers.tsx";
 // Verifications
 export { default as AdminVerifications } from "./components/verifications/AdminVerifications.tsx";
+export * from "./primitives/$uiAdmin.ts";
 
 // ---------------------------------------------------------------------------------------------------------------------
 
 /**
- * | type | quality | stability |
- * |------|---------|-----------|
- * | frontend | rare | experimental |
+ * | Stability | Since | Runtime |
+ * |-----------|-------|---------|
+ * | 2 - beta | 0.12.0 | node, bun, workerd, browser|
  *
  * Admin panel UI components.
  *
@@ -62,11 +63,3 @@ export const AlephaUIAdmin = $module({
 });
 
 // ---------------------------------------------------------------------------------------------------------------------
-
-/**
- * Register Admin UI components and get the AdminRouter instance.
- */
-export const $uiAdmin = () => {
-  const { alepha } = $context();
-  return alepha.inject(AdminRouter);
-};

package/src/admin/primitives/$uiAdmin.ts

@@ -0,0 +1,17 @@
+import type { AdminShellProps } from "@alepha/ui";
+import { $context } from "alepha";
+import { AdminRouter } from "../AdminRouter.ts";
+
+/**
+ * Register Admin UI components and get the AdminRouter instance.
+ */
+export const $uiAdmin = (optsFn?: (a: AdminRouter) => AdminShellProps) => {
+  const { alepha } = $context();
+  const adminRouter = alepha.inject(AdminRouter);
+
+  if (optsFn) {
+    adminRouter.configFn = optsFn;
+  }
+
+  return adminRouter;
+};

package/src/auth/AuthRouter.ts

@@ -9,7 +9,7 @@ import {
 import { $inject, AlephaError, t } from "alepha";
 import type { RealmController } from "alepha/api/users";
 import { ReactAuth } from "alepha/react/auth";
-import { $page } from "alepha/react/router";
+import { $page, Redirection } from "alepha/react/router";
 import { $client } from "alepha/server/links";
 
 /**
@@ -46,9 +46,11 @@ export class AuthRouter {
     schema: {
       query: realmQuerySchema,
     },
-    can: () => !this.auth.user,
     lazy: () => import("./components/Login.tsx"),
-    loader: async ({ query }) => {
+    loader: async ({ query, user }) => {
+      if (user) {
+        throw new Redirection(query.r || "/");
+      }
       return {
         realmConfig: await this.loadRealmConfig(query.realm),
       };
@@ -63,9 +65,11 @@ export class AuthRouter {
     schema: {
       query: realmQuerySchema,
     },
-    can: () => !this.auth.user,
     lazy: () => import("./components/Register.tsx"),
-    loader: async ({ query }) => {
+    loader: async ({ query, user }) => {
+      if (user) {
+        throw new Redirection(query.r || "/");
+      }
       return {
         realmConfig: await this.loadRealmConfig(query.realm),
       };
@@ -80,9 +84,11 @@ export class AuthRouter {
     schema: {
       query: realmQuerySchema,
     },
-    can: () => !this.auth.user,
     lazy: () => import("./components/ResetPassword.tsx"),
-    loader: async ({ query }) => {
+    loader: async ({ query, user }) => {
+      if (user) {
+        throw new Redirection(query.r || "/");
+      }
       return {
         realmConfig: await this.loadRealmConfig(query.realm),
       };
@@ -107,7 +113,6 @@ export class AuthRouter {
     icon: IconLogout2,
     label: "Sign Out",
     description: "Sign out of your account",
-    can: () => !!this.auth.user,
     path: "/logout",
     component: () => null,
     loader: () => {

package/src/auth/components/AuthLayout.tsx

@@ -1,7 +1,6 @@
 import { AlephaMantineProvider } from "@alepha/ui";
 import { Flex } from "@mantine/core";
 import { NestedView } from "alepha/react/router";
-import "../../core/styles.css";
 
 const AuthLayout = () => {
   return (

package/src/auth/index.ts

@@ -1,5 +1,5 @@
 import { AlephaUI } from "@alepha/ui";
-import { $context, $module } from "alepha";
+import { $module } from "alepha";
 import { AlephaReactAuth } from "alepha/react/auth";
 import { AlephaReactI18n } from "alepha/react/i18n";
 import { AuthI18n } from "./AuthI18n.ts";
@@ -14,13 +14,14 @@ export { default as Login } from "./components/Login.tsx";
 export { default as Register } from "./components/Register.tsx";
 export { default as ResetPassword } from "./components/ResetPassword.tsx";
 export { default as VerifyEmail } from "./components/VerifyEmail.tsx";
+export * from "./primitives/$uiAuth.ts";
 
 // ---------------------------------------------------------------------------------------------------------------------
 
 /**
- * | type | quality | stability |
- * |------|---------|-----------|
- * | frontend | rare | experimental |
+ * | Stability | Since | Runtime |
+ * |-----------|-------|---------|
+ * | 2 - beta | 0.12.0 | node, bun, workerd, browser|
  *
  * Authentication UI components.
  *
@@ -37,13 +38,3 @@ export const AlephaUIAuth = $module({
   name: "alepha.ui.auth",
   services: [AlephaUI, AlephaReactAuth, AlephaReactI18n, AuthRouter, AuthI18n],
 });
-
-// ---------------------------------------------------------------------------------------------------------------------
-
-/**
- * Register Auth UI components and get the AuthRouter instance.
- */
-export const $uiAuth = () => {
-  const { alepha } = $context();
-  return alepha.inject(AuthRouter);
-};

package/src/auth/primitives/$uiAuth.ts

@@ -0,0 +1,10 @@
+import { $context } from "alepha";
+import { AuthRouter } from "../AuthRouter.ts";
+
+/**
+ * Register Auth UI components and get the AuthRouter instance.
+ */
+export const $uiAuth = () => {
+  const { alepha } = $context();
+  return alepha.inject(AuthRouter);
+};

package/src/core/components/layout/AlephaMantineProvider.tsx

@@ -39,8 +39,9 @@ const AlephaMantineProvider = (props: AlephaMantineProviderProps) => {
       "react:transition:end": () => {
         nprogress.complete();
       },
-      "react:action:error": ({ error }) => {
+      "react:action:error": ({ error, type }) => {
         if (
+          type === "transition" ||
           error instanceof FormValidationError ||
           error instanceof TypeBoxError
         ) {

package/src/core/components/layout/Sidebar.tsx

@@ -110,6 +110,16 @@ export const Sidebar = (props: SidebarProps) => {
       return null;
     }
 
+    // Hide parent if all children are hidden
+    if (item.children && item.children.length > 0) {
+      const hasVisibleChild = item.children.some(
+        (child) => !child.can || child.can(),
+      );
+      if (!hasVisibleChild) {
+        return null;
+      }
+    }
+
     if (props.collapsed) {
       return (
         <SidebarCollapsedItem

package/src/core/index.ts

@@ -159,9 +159,9 @@ declare module "alepha/react/router" {
 // ---------------------------------------------------------------------------------------------------------------------
 
 /**
- * | type | quality | stability |
- * |------|---------|-----------|
- * | frontend | rare | experimental |
+ * | Stability | Since | Runtime |
+ * |-----------|-------|---------|
+ * | 2 - beta | 0.12.0 | node, bun, workerd, browser|
  *
  * Core UI components based on Mantine UI v8.
  *

package/src/core/styles.css

@@ -34,6 +34,7 @@
   background-color: var(--alepha-background);
   color: var(--alepha-text);
   min-height: 100dvh;
+  flex-direction: column;
 }
 
 /* ------------------------------------------------------------------------------------------------------------------ */

package/dist/admin/AdminLayout-BX4FIpXv.css

@@ -1,143 +0,0 @@
-/* Dark Mode Toggle - SSR-safe icon switching */
-
-[data-mantine-color-scheme="light"] .alepha-light-hidden,
-[data-mantine-color-scheme="dark"] .alepha-dark-hidden {
-  display: none;
-}
-
-
-:root {
-  --alepha-background-light: var(--mantine-color-gray-1);
-  --alepha-background-dark: var(--mantine-color-dark-9);
-  --alepha-background: var(--alepha-background-light);
-
-  --alepha-surface-light: var(--mantine-color-gray-0);
-  --alepha-surface-dark: var(--mantine-color-dark-8);
-  --alepha-surface: var(--alepha-surface-light);
-
-  --alepha-elevated-light: var(--mantine-color-white);
-  --alepha-elevated-hover-light: #f6f5f5;
-  --alepha-elevated-dark: var(--mantine-color-dark-7);
-  --alepha-elevated-hover-dark: var(--mantine-color-dark-6);
-  --alepha-elevated: var(--alepha-elevated-light);
-  --alepha-elevated-hover: var(--alepha-elevated-hover-light);
-
-  --alepha-border: var(--mantine-color-default-border);
-
-  --alepha-text-light: #000000;
-  --alepha-text-dark: #ffffff;
-  --alepha-text-muted: #6c757d;
-  --alepha-text: var(--alepha-text-light);
-}
-
-#root {
-  display: flex;
-  background-color: var(--alepha-background);
-  color: var(--alepha-text);
-  min-height: 100dvh;
-}
-
-/* ------------------------------------------------------------------------------------------------------------------ */
-
-[data-mantine-color-scheme="dark"] {
-  --alepha-surface: var(--alepha-surface-dark);
-  --alepha-elevated: var(--alepha-elevated-dark);
-  --alepha-elevated-hover: var(--alepha-elevated-hover-dark);
-  --alepha-background: var(--alepha-background-dark);
-  --alepha-text: var(--alepha-text-dark);
-}
-
-/* ------------------------------------------------------------------------------------------------------------------ */
-
-.overflow-auto {
-  overflow: auto;
-  scrollbar-color: var(--alepha-text-muted) transparent;
-  scrollbar-width: thin;
-}
-
-/* Sidebar scroll area - subtle scrollbar that appears on hover */
-.alepha-sidebar-scroll {
-  overflow-y: auto;
-  overflow-x: hidden;
-  scrollbar-width: thin;
-  scrollbar-color: transparent transparent;
-}
-
-.alepha-sidebar-scroll:hover {
-  scrollbar-color: var(--mantine-color-gray-4) transparent;
-}
-
-[data-mantine-color-scheme="dark"] .alepha-sidebar-scroll:hover {
-  scrollbar-color: var(--mantine-color-dark-4) transparent;
-}
-
-/* WebKit scrollbar styling */
-.alepha-sidebar-scroll::-webkit-scrollbar {
-  width: 6px;
-}
-
-.alepha-sidebar-scroll::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.alepha-sidebar-scroll::-webkit-scrollbar-thumb {
-  background: transparent;
-  border-radius: 3px;
-}
-
-.alepha-sidebar-scroll:hover::-webkit-scrollbar-thumb {
-  background: var(--mantine-color-gray-4);
-}
-
-[data-mantine-color-scheme="dark"]
-  .alepha-sidebar-scroll:hover::-webkit-scrollbar-thumb {
-  background: var(--mantine-color-dark-4);
-}
-
-/* ------------------------------------------------------------------------------------------------------------------ */
-/* Sidebar Transitions */
-
-.alepha-sidebar-navbar {
-  transition: width 0.2s ease-in-out;
-}
-
-.alepha-sidebar-navbar[data-resizing="true"] {
-  transition: none;
-}
-
-.alepha-sidebar-main {
-  transition: padding-left 0.2s ease-in-out;
-}
-
-.alepha-sidebar-main[data-resizing="true"] {
-  transition: none;
-}
-
-/* ------------------------------------------------------------------------------------------------------------------ */
-/* Modal Customizations */
-
-/* Custom modal scale animation */
-@keyframes modalScaleIn {
-  from {
-    opacity: 0;
-    transform: scale(0.9);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-@keyframes modalScaleOut {
-  from {
-    opacity: 1;
-    transform: scale(1);
-  }
-  to {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-}
-
-
-/*# sourceMappingURL=AdminLayout-BX4FIpXv.css.map*/

package/dist/admin/AdminLayout-BX4FIpXv.css.map

@@ -1 +0,0 @@
-{"version":3,"file":"AdminLayout-BX4FIpXv.css","names":[],"sources":["../../../../src/core/components/buttons/DarkModeButton.css","../../../../src/core/styles.css"],"sourcesContent":["/* Dark Mode Toggle - SSR-safe icon switching */\n\n[data-mantine-color-scheme=\"light\"] .alepha-light-hidden,\n[data-mantine-color-scheme=\"dark\"] .alepha-dark-hidden {\n  display: none;\n}\n","@import \"@mantine/core/styles.css\";\n@import \"@mantine/nprogress/styles.css\";\n@import \"@mantine/spotlight/styles.css\";\n@import \"@mantine/dates/styles.css\";\n@import \"@mantine/notifications/styles.css\";\n@import \"./components/buttons/DarkModeButton.css\";\n\n:root {\n  --alepha-background-light: var(--mantine-color-gray-1);\n  --alepha-background-dark: var(--mantine-color-dark-9);\n  --alepha-background: var(--alepha-background-light);\n\n  --alepha-surface-light: var(--mantine-color-gray-0);\n  --alepha-surface-dark: var(--mantine-color-dark-8);\n  --alepha-surface: var(--alepha-surface-light);\n\n  --alepha-elevated-light: var(--mantine-color-white);\n  --alepha-elevated-hover-light: #f6f5f5;\n  --alepha-elevated-dark: var(--mantine-color-dark-7);\n  --alepha-elevated-hover-dark: var(--mantine-color-dark-6);\n  --alepha-elevated: var(--alepha-elevated-light);\n  --alepha-elevated-hover: var(--alepha-elevated-hover-light);\n\n  --alepha-border: var(--mantine-color-default-border);\n\n  --alepha-text-light: #000000;\n  --alepha-text-dark: #ffffff;\n  --alepha-text-muted: #6c757d;\n  --alepha-text: var(--alepha-text-light);\n}\n\n#root {\n  display: flex;\n  background-color: var(--alepha-background);\n  color: var(--alepha-text);\n  min-height: 100dvh;\n}\n\n/* ------------------------------------------------------------------------------------------------------------------ */\n\n[data-mantine-color-scheme=\"dark\"] {\n  --alepha-surface: var(--alepha-surface-dark);\n  --alepha-elevated: var(--alepha-elevated-dark);\n  --alepha-elevated-hover: var(--alepha-elevated-hover-dark);\n  --alepha-background: var(--alepha-background-dark);\n  --alepha-text: var(--alepha-text-dark);\n}\n\n/* ------------------------------------------------------------------------------------------------------------------ */\n\n.overflow-auto {\n  overflow: auto;\n  scrollbar-color: var(--alepha-text-muted) transparent;\n  scrollbar-width: thin;\n}\n\n/* Sidebar scroll area - subtle scrollbar that appears on hover */\n.alepha-sidebar-scroll {\n  overflow-y: auto;\n  overflow-x: hidden;\n  scrollbar-width: thin;\n  scrollbar-color: transparent transparent;\n}\n\n.alepha-sidebar-scroll:hover {\n  scrollbar-color: var(--mantine-color-gray-4) transparent;\n}\n\n[data-mantine-color-scheme=\"dark\"] .alepha-sidebar-scroll:hover {\n  scrollbar-color: var(--mantine-color-dark-4) transparent;\n}\n\n/* WebKit scrollbar styling */\n.alepha-sidebar-scroll::-webkit-scrollbar {\n  width: 6px;\n}\n\n.alepha-sidebar-scroll::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.alepha-sidebar-scroll::-webkit-scrollbar-thumb {\n  background: transparent;\n  border-radius: 3px;\n}\n\n.alepha-sidebar-scroll:hover::-webkit-scrollbar-thumb {\n  background: var(--mantine-color-gray-4);\n}\n\n[data-mantine-color-scheme=\"dark\"]\n  .alepha-sidebar-scroll:hover::-webkit-scrollbar-thumb {\n  background: var(--mantine-color-dark-4);\n}\n\n/* ------------------------------------------------------------------------------------------------------------------ */\n/* Sidebar Transitions */\n\n.alepha-sidebar-navbar {\n  transition: width 0.2s ease-in-out;\n}\n\n.alepha-sidebar-navbar[data-resizing=\"true\"] {\n  transition: none;\n}\n\n.alepha-sidebar-main {\n  transition: padding-left 0.2s ease-in-out;\n}\n\n.alepha-sidebar-main[data-resizing=\"true\"] {\n  transition: none;\n}\n\n/* ------------------------------------------------------------------------------------------------------------------ */\n/* Modal Customizations */\n\n/* Custom modal scale animation */\n@keyframes modalScaleIn {\n  from {\n    opacity: 0;\n    transform: scale(0.9);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@keyframes modalScaleOut {\n  from {\n    opacity: 1;\n    transform: scale(1);\n  }\n  to {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n}\n"],"mappings":"AAAA;;AAEA;AACA;AACA;AACA;;;ACEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}

package/dist/auth/AuthLayout-BaD7RD2h.css

@@ -1,143 +0,0 @@
-/* Dark Mode Toggle - SSR-safe icon switching */
-
-[data-mantine-color-scheme="light"] .alepha-light-hidden,
-[data-mantine-color-scheme="dark"] .alepha-dark-hidden {
-  display: none;
-}
-
-
-:root {
-  --alepha-background-light: var(--mantine-color-gray-1);
-  --alepha-background-dark: var(--mantine-color-dark-9);
-  --alepha-background: var(--alepha-background-light);
-
-  --alepha-surface-light: var(--mantine-color-gray-0);
-  --alepha-surface-dark: var(--mantine-color-dark-8);
-  --alepha-surface: var(--alepha-surface-light);
-
-  --alepha-elevated-light: var(--mantine-color-white);
-  --alepha-elevated-hover-light: #f6f5f5;
-  --alepha-elevated-dark: var(--mantine-color-dark-7);
-  --alepha-elevated-hover-dark: var(--mantine-color-dark-6);
-  --alepha-elevated: var(--alepha-elevated-light);
-  --alepha-elevated-hover: var(--alepha-elevated-hover-light);
-
-  --alepha-border: var(--mantine-color-default-border);
-
-  --alepha-text-light: #000000;
-  --alepha-text-dark: #ffffff;
-  --alepha-text-muted: #6c757d;
-  --alepha-text: var(--alepha-text-light);
-}
-
-#root {
-  display: flex;
-  background-color: var(--alepha-background);
-  color: var(--alepha-text);
-  min-height: 100dvh;
-}
-
-/* ------------------------------------------------------------------------------------------------------------------ */
-
-[data-mantine-color-scheme="dark"] {
-  --alepha-surface: var(--alepha-surface-dark);
-  --alepha-elevated: var(--alepha-elevated-dark);
-  --alepha-elevated-hover: var(--alepha-elevated-hover-dark);
-  --alepha-background: var(--alepha-background-dark);
-  --alepha-text: var(--alepha-text-dark);
-}
-
-/* ------------------------------------------------------------------------------------------------------------------ */
-
-.overflow-auto {
-  overflow: auto;
-  scrollbar-color: var(--alepha-text-muted) transparent;
-  scrollbar-width: thin;
-}
-
-/* Sidebar scroll area - subtle scrollbar that appears on hover */
-.alepha-sidebar-scroll {
-  overflow-y: auto;
-  overflow-x: hidden;
-  scrollbar-width: thin;
-  scrollbar-color: transparent transparent;
-}
-
-.alepha-sidebar-scroll:hover {
-  scrollbar-color: var(--mantine-color-gray-4) transparent;
-}
-
-[data-mantine-color-scheme="dark"] .alepha-sidebar-scroll:hover {
-  scrollbar-color: var(--mantine-color-dark-4) transparent;
-}
-
-/* WebKit scrollbar styling */
-.alepha-sidebar-scroll::-webkit-scrollbar {
-  width: 6px;
-}
-
-.alepha-sidebar-scroll::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.alepha-sidebar-scroll::-webkit-scrollbar-thumb {
-  background: transparent;
-  border-radius: 3px;
-}
-
-.alepha-sidebar-scroll:hover::-webkit-scrollbar-thumb {
-  background: var(--mantine-color-gray-4);
-}
-
-[data-mantine-color-scheme="dark"]
-  .alepha-sidebar-scroll:hover::-webkit-scrollbar-thumb {
-  background: var(--mantine-color-dark-4);
-}
-
-/* ------------------------------------------------------------------------------------------------------------------ */
-/* Sidebar Transitions */
-
-.alepha-sidebar-navbar {
-  transition: width 0.2s ease-in-out;
-}
-
-.alepha-sidebar-navbar[data-resizing="true"] {
-  transition: none;
-}
-
-.alepha-sidebar-main {
-  transition: padding-left 0.2s ease-in-out;
-}
-
-.alepha-sidebar-main[data-resizing="true"] {
-  transition: none;
-}
-
-/* ------------------------------------------------------------------------------------------------------------------ */
-/* Modal Customizations */
-
-/* Custom modal scale animation */
-@keyframes modalScaleIn {
-  from {
-    opacity: 0;
-    transform: scale(0.9);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-@keyframes modalScaleOut {
-  from {
-    opacity: 1;
-    transform: scale(1);
-  }
-  to {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-}
-
-
-/*# sourceMappingURL=AuthLayout-BaD7RD2h.css.map*/