@alepha/ui 0.15.1 → 0.15.3

package/src/admin/components/users/AdminUserSettings.tsx

@@ -1,5 +1,3 @@
-import { useClient } from "@alepha/react";
-import { useRouter, useRouterState } from "@alepha/react/router";
 import { ActionButton, Flex, Text } from "@alepha/ui";
 import { Alert, Card, Group, Loader, Stack } from "@mantine/core";
 import {
@@ -13,6 +11,8 @@ import type {
   UserController,
   UserEntity,
 } from "alepha/api/users";
+import { useClient } from "alepha/react";
+import { useRouter, useRouterState } from "alepha/react/router";
 import { useEffect, useState } from "react";
 import type { AdminRouter } from "../../AdminRouter.ts";
 
@@ -60,7 +60,7 @@ const AdminUserSettings = (props: AdminUserSettingsProps) => {
         params: { id: userId },
         query: { userRealmName: props.userRealmName },
       });
-      await router.go("adminUsers");
+      await router.push("adminUsers");
     } finally {
       setDeleteLoading(false);
     }
@@ -76,7 +76,7 @@ const AdminUserSettings = (props: AdminUserSettingsProps) => {
         query: {
           userRealmName: props.userRealmName,
           method: "link",
-          verifyUrl: `${window.location.origin}/verify-email`,
+          verifyUrl: `${window.location.origin}/auth/verify-email`,
         },
         body: { email: user.email },
       });

package/src/admin/components/users/AdminUsers.tsx

@@ -1,6 +1,3 @@
-import { useClient } from "@alepha/react";
-import { useI18n } from "@alepha/react/i18n";
-import { useRouter } from "@alepha/react/router";
 import { DataTable, Text } from "@alepha/ui";
 import { Badge, Flex, Group } from "@mantine/core";
 import { IconCheck, IconUsersPlus, IconX } from "@tabler/icons-react";
@@ -10,6 +7,9 @@ import {
   type UserEntity,
   users,
 } from "alepha/api/users";
+import { useClient } from "alepha/react";
+import { useI18n } from "alepha/react/i18n";
+import { useRouter } from "alepha/react/router";
 import type { AdminRouter } from "../../AdminRouter.ts";
 
 export interface AdminUsersProps {
@@ -63,7 +63,7 @@ const AdminUsers = (props: AdminUsersProps) => {
           const baseProps: Record<string, any> = {
             style: { cursor: "pointer" },
             onClick: () =>
-              router.go("adminUserDetails", {
+              router.push("adminUserDetails", {
                 params: { userId: item.id },
               }),
           };

package/src/admin/index.ts

@@ -1,6 +1,6 @@
 import { AlephaUI } from "@alepha/ui";
 import { AlephaUIAuth } from "@alepha/ui/auth";
-import { $module } from "alepha";
+import { $context, $module } from "alepha";
 import { AdminRouter } from "./AdminRouter.ts";
 import { MainRouter } from "./MainRouter.ts";
 
@@ -36,7 +36,22 @@ export { MainRouter } from "./MainRouter.ts";
 // ---------------------------------------------------------------------------------------------------------------------
 
 /**
- * Admin panel UI Module
+ * | type | quality | stability |
+ * |------|---------|-----------|
+ * | frontend | rare | experimental |
+ *
+ * Admin panel UI components.
+ *
+ * **Features:**
+ * - AdminLayout for admin pages
+ * - AdminUsers with user list, create, details, settings, sessions, audits
+ * - AdminFiles for file management
+ * - AdminJobs for job monitoring
+ * - AdminNotifications for notification management
+ * - AdminParameters for configuration management
+ * - AdminSessions for session management
+ * - AdminAudits for audit log viewing
+ * - AdminVerifications for verification management
  *
  * @module alepha.ui.admin
  */
@@ -47,3 +62,13 @@ export const AlephaUIAdmin = $module({
     alepha.with(AdminRouter);
   },
 });
+
+// ---------------------------------------------------------------------------------------------------------------------
+
+/**
+ * Register Admin UI components and get the AdminRouter instance.
+ */
+export const $uiAdmin = () => {
+  const { alepha } = $context();
+  return alepha.inject(AdminRouter);
+};

package/src/auth/AuthI18n.ts

@@ -1,4 +1,4 @@
-import { $dictionary } from "@alepha/react/i18n";
+import { $dictionary } from "alepha/react/i18n";
 
 export class AuthI18n {
   en = $dictionary({

package/src/auth/AuthRouter.ts

@@ -1,14 +1,15 @@
-import { ReactAuth } from "@alepha/react/auth";
-import { $page } from "@alepha/react/router";
 import {
   IconLogin2,
   IconLogout2,
   IconMailCheck,
   IconPasswordUser,
+  IconUser,
   IconUserPlus,
 } from "@tabler/icons-react";
 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 { $client } from "alepha/server/links";
 
 /**
@@ -34,6 +35,7 @@ export class AuthRouter {
       this.register,
       this.resetPassword,
       this.verifyEmail,
+      this.profile,
     ],
   });
 
@@ -115,6 +117,16 @@ export class AuthRouter {
     },
   });
 
+  profile = $page({
+    name: "userProfile",
+    icon: IconUser,
+    label: "Profile",
+    description: "View your profile",
+    path: "/profile",
+    can: () => !!this.auth.user,
+    lazy: () => import("./components/Profile.tsx"),
+  });
+
   protected async loadRealmConfig(realmName?: string) {
     try {
       return await this.realmClient.getRealmConfig({

package/src/auth/components/AuthLayout.tsx

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

package/src/auth/components/Login.tsx

@@ -1,12 +1,12 @@
-import { useAuth } from "@alepha/react/auth";
-import { FormValidationError, useForm } from "@alepha/react/form";
-import { useI18n } from "@alepha/react/i18n";
-import { useRouter } from "@alepha/react/router";
 import { ActionButton, Control, capitalize } from "@alepha/ui";
 import { Card, Flex, Group, Image, Stack, Text, Title } from "@mantine/core";
 import { IconLock, IconUser } from "@tabler/icons-react";
 import { AlephaError, t } from "alepha";
 import type { RealmConfig } from "alepha/api/users";
+import { useAuth } from "alepha/react/auth";
+import { FormValidationError, useForm } from "alepha/react/form";
+import { useI18n } from "alepha/react/i18n";
+import { useRouter } from "alepha/react/router";
 import { HttpError } from "alepha/server";
 import { useMemo } from "react";
 import type { AuthI18n } from "../AuthI18n.ts";
@@ -78,7 +78,7 @@ const Login = (props: LoginProps) => {
           password: data.password,
           realm: props.realmConfig.realmName,
         });
-        await router.go(router.query.r || "/");
+        await router.push(router.query.r || "/");
       } catch (error) {
         if (
           error instanceof HttpError &&

package/src/auth/components/Profile.tsx

@@ -0,0 +1,157 @@
+import { ActionButton } from "@alepha/ui";
+import {
+  Avatar,
+  Badge,
+  Card,
+  Flex,
+  Group,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
+import {
+  IconAt,
+  IconCalendar,
+  IconId,
+  IconShield,
+  IconUser,
+} from "@tabler/icons-react";
+import { useAuth } from "alepha/react/auth";
+import { useRouter } from "alepha/react/router";
+import type { AuthRouter } from "../AuthRouter.ts";
+
+const Profile = () => {
+  const auth = useAuth();
+  const router = useRouter<AuthRouter>();
+
+  if (!auth.user) {
+    return null;
+  }
+
+  const { id, name, email, username, picture, roles, organizations } =
+    auth.user;
+
+  const displayName = name || username || email || "User";
+
+  return (
+    <Flex flex={1} justify="center" align="center">
+      <Stack gap="md" w={400}>
+        <Card withBorder p="xl" bg="var(--alepha-elevated)">
+          <Stack gap="lg">
+            {/* Avatar and name */}
+            <Flex direction="column" align="center" gap="md">
+              <Avatar
+                src={picture ? `/api/files/${picture}` : undefined}
+                size={96}
+                radius="xl"
+                color="blue"
+              >
+                {!picture && <IconUser size={48} />}
+              </Avatar>
+              <Stack gap={4} align="center">
+                <Title order={3}>{displayName}</Title>
+                {email && username && (
+                  <Text size="sm" c="dimmed">
+                    @{username}
+                  </Text>
+                )}
+              </Stack>
+            </Flex>
+
+            {/* User details */}
+            <Stack gap="sm">
+              {email && (
+                <ProfileField icon={<IconAt size={18} />} label="Email">
+                  {email}
+                </ProfileField>
+              )}
+
+              {username && (
+                <ProfileField icon={<IconUser size={18} />} label="Username">
+                  {username}
+                </ProfileField>
+              )}
+
+              {id && (
+                <ProfileField icon={<IconId size={18} />} label="User ID">
+                  <Text size="xs" c="dimmed" ff="monospace">
+                    {id}
+                  </Text>
+                </ProfileField>
+              )}
+
+              {/* Roles */}
+              {roles && roles.length > 0 && (
+                <ProfileField icon={<IconShield size={18} />} label="Roles">
+                  <Group gap="xs">
+                    {roles.map((role) => (
+                      <Badge key={role} size="sm" variant="light">
+                        {role}
+                      </Badge>
+                    ))}
+                  </Group>
+                </ProfileField>
+              )}
+
+              {/* Organizations */}
+              {organizations && organizations.length > 0 && (
+                <ProfileField
+                  icon={<IconCalendar size={18} />}
+                  label="Organizations"
+                >
+                  <Group gap="xs">
+                    {organizations.map((org) => (
+                      <Badge key={org} size="sm" variant="outline">
+                        {org}
+                      </Badge>
+                    ))}
+                  </Group>
+                </ProfileField>
+              )}
+            </Stack>
+
+            {/* Actions */}
+            <Stack gap="sm" mt="md">
+              <ActionButton
+                variant="light"
+                color="red"
+                onClick={() => auth.logout()}
+                fullWidth
+              >
+                Sign out
+              </ActionButton>
+            </Stack>
+          </Stack>
+        </Card>
+
+        <ActionButton variant="subtle" href="/">
+          Back to home
+        </ActionButton>
+      </Stack>
+    </Flex>
+  );
+};
+
+interface ProfileFieldProps {
+  icon: React.ReactNode;
+  label: string;
+  children: React.ReactNode;
+}
+
+const ProfileField = ({ icon, label, children }: ProfileFieldProps) => {
+  return (
+    <Flex gap="sm" align="flex-start">
+      <Flex c="dimmed" mt={2}>
+        {icon}
+      </Flex>
+      <Stack gap={2} flex={1}>
+        <Text size="xs" c="dimmed" tt="uppercase" fw={500}>
+          {label}
+        </Text>
+        <Text size="sm">{children}</Text>
+      </Stack>
+    </Flex>
+  );
+};
+
+export default Profile;

package/src/auth/components/Register.tsx

@@ -1,8 +1,3 @@
-import { useClient } from "@alepha/react";
-import { useAuth } from "@alepha/react/auth";
-import { useForm } from "@alepha/react/form";
-import { useI18n } from "@alepha/react/i18n";
-import { useRouter } from "@alepha/react/router";
 import { ActionButton, Control, capitalize } from "@alepha/ui";
 import {
   Alert,
@@ -28,6 +23,11 @@ import type {
   RegistrationIntentResponse,
   UserController,
 } from "alepha/api/users";
+import { useClient } from "alepha/react";
+import { useAuth } from "alepha/react/auth";
+import { useForm } from "alepha/react/form";
+import { useI18n } from "alepha/react/i18n";
+import { useRouter } from "alepha/react/router";
 import { useMemo, useState } from "react";
 import type { AuthI18n } from "../AuthI18n.ts";
 import type { AuthRouter } from "../AuthRouter.ts";
@@ -155,7 +155,7 @@ const Register = (props: RegisterProps) => {
         });
       }
 
-      await router.go(router.query.r || "/");
+      await router.push(router.query.r || "/");
     },
   });
 
@@ -188,7 +188,7 @@ const Register = (props: RegisterProps) => {
         });
       }
 
-      await router.go(router.query.r || "/");
+      await router.push(router.query.r || "/");
     } catch (error) {
       setVerificationError(
         error instanceof Error ? error.message : "Verification failed",

package/src/auth/components/ResetPassword.tsx

@@ -1,7 +1,3 @@
-import { useClient } from "@alepha/react";
-import { useForm } from "@alepha/react/form";
-import { useI18n } from "@alepha/react/i18n";
-import { useRouter } from "@alepha/react/router";
 import { ActionButton, Control } from "@alepha/ui";
 import {
   Alert,
@@ -27,6 +23,10 @@ import type {
   UserController,
 } from "alepha/api/users";
 import { resetPasswordRequestSchema } from "alepha/api/users";
+import { useClient } from "alepha/react";
+import { useForm } from "alepha/react/form";
+import { useI18n } from "alepha/react/i18n";
+import { useRouter } from "alepha/react/router";
 import { useState } from "react";
 import type { AuthI18n } from "../AuthI18n.ts";
 import type { AuthRouter } from "../AuthRouter.ts";

package/src/auth/components/VerifyEmail.tsx

@@ -1,10 +1,10 @@
-import { useClient } from "@alepha/react";
-import { useI18n } from "@alepha/react/i18n";
-import { useRouter, useRouterState } from "@alepha/react/router";
 import { ActionButton } from "@alepha/ui";
 import { Alert, Card, Flex, Loader, Stack, Text } from "@mantine/core";
 import { IconAlertCircle, IconCheck, IconMailCheck } from "@tabler/icons-react";
 import type { UserController } from "alepha/api/users";
+import { useClient } from "alepha/react";
+import { useI18n } from "alepha/react/i18n";
+import { useRouter, useRouterState } from "alepha/react/router";
 import { useEffect, useState } from "react";
 import type { AuthI18n } from "../AuthI18n.ts";
 import type { AuthRouter } from "../AuthRouter.ts";

package/src/auth/components/buttons/UserButton.tsx

@@ -1,5 +1,3 @@
-import { useAuth } from "@alepha/react/auth";
-import { useRouter } from "@alepha/react/router";
 import {
   ActionButton,
   type ActionMenuConfig,
@@ -8,7 +6,16 @@ import {
   ui,
 } from "@alepha/ui";
 import { Avatar } from "@mantine/core";
-import { IconLogin2, IconLogout, IconUser } from "@tabler/icons-react";
+import {
+  IconLogin2,
+  IconLogout,
+  IconSettings,
+  IconUser,
+} from "@tabler/icons-react";
+import type { AdminUserController } from "alepha/api/users";
+import { useClient, useInject } from "alepha/react";
+import { useAuth } from "alepha/react/auth";
+import { ReactPageProvider, useRouter } from "alepha/react/router";
 import type { ReactNode } from "react";
 import type { AuthRouter } from "../../AuthRouter.ts";
 
@@ -53,12 +60,19 @@ const UserButton = (props: UserButtonProps) => {
 
   buttonProps.variant ??= "subtle";
 
+  const adminUserCtrl = useClient<AdminUserController>();
+  const pages = useInject(ReactPageProvider);
+
   const auth = useAuth<{
     username?: string;
     email?: string;
     picture?: string;
   }>();
 
+  const isConnected = !!auth.user;
+  const isAdmin = isConnected && adminUserCtrl.findUsers.can();
+  const userPage = pages.getPages().find((it) => it.name === "userProfile");
+  const adminPage = pages.getPages().find((it) => it.name === "adminLayout");
   const authRouter = useRouter<AuthRouter>();
 
   if (!auth.user) {
@@ -83,6 +97,24 @@ const UserButton = (props: UserButtonProps) => {
     });
   }
 
+  // Add profile page link if available
+  if (userPage && isConnected) {
+    items.push({
+      label: "Profile",
+      icon: <IconUser size={ui.sizes.icon.md} />,
+      href: authRouter.path("userProfile"),
+    });
+  }
+
+  // Add admin page link if available and user is admin
+  if (adminPage && isAdmin) {
+    items.push({
+      label: "Admin",
+      icon: <IconSettings size={ui.sizes.icon.md} />,
+      href: authRouter.path("adminLayout"),
+    });
+  }
+
   // Add custom menu items
   items.push(...menuItems);
 

package/src/auth/index.ts

@@ -1,7 +1,7 @@
-import { AlephaReactAuth } from "@alepha/react/auth";
-import { AlephaReactI18n } from "@alepha/react/i18n";
 import { AlephaUI } from "@alepha/ui";
-import { $module } from "alepha";
+import { $context, $module } from "alepha";
+import { AlephaReactAuth } from "alepha/react/auth";
+import { AlephaReactI18n } from "alepha/react/i18n";
 import { AuthI18n } from "./AuthI18n.ts";
 import { AuthRouter } from "./AuthRouter.ts";
 
@@ -18,7 +18,18 @@ export { default as VerifyEmail } from "./components/VerifyEmail.tsx";
 // ---------------------------------------------------------------------------------------------------------------------
 
 /**
- * Login UI Module
+ * | type | quality | stability |
+ * |------|---------|-----------|
+ * | frontend | rare | experimental |
+ *
+ * Authentication UI components.
+ *
+ * **Features:**
+ * - Login page component
+ * - Register page component
+ * - Reset password page component
+ * - Email verification page component
+ * - UserButton for user menu
  *
  * @module alepha.ui.auth
  */
@@ -26,3 +37,13 @@ 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/core/UiRouter.ts

@@ -0,0 +1,15 @@
+import { $page } from "alepha/react/router";
+import AlephaMantineProvider from "./components/layout/AlephaMantineProvider.tsx";
+
+/**
+ * UI Router defining the root page with AlephaMantineProvider.
+ *
+ * - Use UiRouter when you need Alepha's Mantine-based UI components and theming.
+ * - Prefer to use $ui() for convenience. (Custom Factory of UiRouter)
+ */
+export class UiRouter {
+  public readonly root = $page({
+    path: "/",
+    component: AlephaMantineProvider,
+  });
+}

package/src/core/atoms/alephaSidebarAtom.ts

@@ -0,0 +1,57 @@
+import { $atom, type Static, t } from "alepha";
+
+export const alephaSidebarAtom = $atom({
+  name: "alepha.ui.sidebar",
+  schema: t.object({
+    /**
+     * Whether the sidebar is opened or closed (mobile).
+     */
+    opened: t.boolean(),
+    /**
+     * Whether the sidebar is collapsed (narrow) or expanded (wide).
+     */
+    collapsed: t.boolean(),
+    /**
+     * Current width of the sidebar when expanded (can be changed by resizing).
+     * @default 300
+     */
+    width: t.number(),
+    /**
+     * Default width used when expanding from collapsed state or on hover.
+     * @default 300
+     */
+    defaultWidth: t.number(),
+    /**
+     * Width of the sidebar when collapsed.
+     * @default 78
+     */
+    collapsedWidth: t.number(),
+    /**
+     * Maximum width when resizing.
+     * @default 500
+     */
+    maxWidth: t.number(),
+    /**
+     * Minimum width before auto-collapse triggers.
+     * @default 150
+     */
+    collapseThreshold: t.number(),
+    /**
+     * Delay in ms before sidebar expands on hover when collapsed.
+     * @default 300
+     */
+    hoverDelay: t.number(),
+  }),
+  default: {
+    opened: false,
+    collapsed: false,
+    width: 300,
+    defaultWidth: 300,
+    collapsedWidth: 78,
+    maxWidth: 500,
+    collapseThreshold: 240,
+    hoverDelay: 300,
+  },
+});
+
+export type AlephaSidebarState = Static<typeof alephaSidebarAtom.schema>;

package/src/core/atoms/alephaThemeListAtom.ts

@@ -1,4 +1,4 @@
-import { $atom, t } from "alepha";
+import { $atom, type Static, t } from "alepha";
 import type { AlephaTheme } from "../interfaces/AlephaTheme.ts";
 import { defaultTheme } from "./themes/default.ts";
 import { midnightTheme } from "./themes/midnight.ts";
@@ -8,3 +8,5 @@ export const alephaThemeListAtom = $atom({
   schema: t.array(t.json<AlephaTheme>()), // TODO: translate to proper schema
   default: [defaultTheme, midnightTheme],
 });
+
+export type AlephaThemeListAtom = Static<typeof alephaThemeListAtom.schema>;

package/src/core/components/buttons/ActionButton.tsx

@@ -1,11 +1,3 @@
-import { type UseActionReturn, useAction } from "@alepha/react";
-import { type FormModel, useFormState } from "@alepha/react/form";
-import {
-  type RouterGoOptions,
-  type UseActiveOptions,
-  useActive,
-  useRouter,
-} from "@alepha/react/router";
 import {
   Anchor,
   type AnchorProps,
@@ -23,6 +15,14 @@ import {
   useMantineTheme,
 } from "@mantine/core";
 import { IconCheck, IconChevronRight } from "@tabler/icons-react";
+import { type UseActionReturn, useAction } from "alepha/react";
+import { type FormModel, useFormState } from "alepha/react/form";
+import {
+  type RouterPushOptions,
+  type UseActiveOptions,
+  useActive,
+  useRouter,
+} from "alepha/react/router";
 import {
   type ButtonHTMLAttributes,
   Children,
@@ -287,7 +287,7 @@ const ActionButton = (_props: ActionProps) => {
 
     if (!props.children) {
       restProps.children = Children.only(icon);
-      restProps.px ??= "xs";
+      restProps.px ??= "xs"; // TODO: change based on props.size ?
     } else {
       restProps.leftSection = icon;
     }
@@ -551,7 +551,7 @@ const ActionClickButton = (props: ActionClickButtonProps) => {
 export interface ActionNavigationButtonProps extends ButtonProps {
   href: string;
   active?: Partial<UseActiveOptions> | false;
-  routerGoOptions?: RouterGoOptions;
+  routerGoOptions?: RouterPushOptions;
   classNameActive?: string;
   variantActive?: ButtonProps["variant"];
   target?: string;