@alepha/ui 0.15.2 → 0.15.3

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

@@ -5,6 +5,8 @@ import {
   type AppShellMainProps,
   type AppShellNavbarProps,
   type AppShellProps,
+  Container,
+  type ContainerProps,
   Flex,
 } from "@mantine/core";
 import { useEvents, useStore } from "alepha/react";
@@ -37,7 +39,7 @@ export interface AdminShellProps {
    * Enable drag-to-resize for the sidebar.
    * Width and constraints are configured in alephaSidebarAtom.
    */
-  resizable?: boolean;
+  sidebarResizable?: boolean;
 
   noSidebarWhen?: {
     /**
@@ -45,6 +47,12 @@ export interface AdminShellProps {
      */
     paths?: string[];
   };
+
+  /**
+   * Wrap AppBar and main content in a Mantine Container.
+   * Pass `true` for default Container, or ContainerProps to customize.
+   */
+  container?: boolean | ContainerProps;
 }
 
 const AdminShell = (props: AdminShellProps) => {
@@ -79,7 +87,7 @@ const AdminShell = (props: AdminShellProps) => {
 
   const handleResizeStart = useCallback(
     (e: React.MouseEvent) => {
-      if (!props.resizable) return;
+      if (!props.sidebarResizable) return;
       e.preventDefault();
 
       // If collapsed and hovering, un-collapse first and start from defaultWidth
@@ -98,7 +106,7 @@ const AdminShell = (props: AdminShellProps) => {
         };
       }
     },
-    [props.resizable, collapsed, sidebar, setSidebar, defaultWidth],
+    [props.sidebarResizable, collapsed, sidebar, setSidebar, defaultWidth],
   );
 
   useEffect(() => {
@@ -218,6 +226,10 @@ const AdminShell = (props: AdminShellProps) => {
     { position: "left" as const, type: "burger" as const },
   ];
 
+  // Forward container to appBarProps if not already set
+  const appBarProps = { ...props.appBarProps };
+  appBarProps.container ??= props.container;
+
   const hasSidebar = showSidebar && props.sidebarProps !== undefined;
   const hasAppBar = hasSidebar || props.appBarProps || props.header;
 
@@ -229,14 +241,13 @@ const AdminShell = (props: AdminShellProps) => {
   const isExpandedByHover = collapsed && isHovering;
   const effectiveCollapsed = collapsed && !isHovering;
   const hoverWidth = Math.max(defaultWidth, collapsedWidth);
+  // When hovering, keep main content at collapsed width (sidebar overlays)
   const sidebarWidth = hasSidebar
-    ? effectiveCollapsed
+    ? effectiveCollapsed || isExpandedByHover
       ? collapsedWidth
-      : isExpandedByHover
-        ? hoverWidth
-        : expandedWidth
+      : expandedWidth
     : 0;
-  const canResize = props.resizable && !collapsed;
+  const canResize = props.sidebarResizable && !collapsed;
 
   return (
     <AppShell
@@ -247,10 +258,10 @@ const AdminShell = (props: AdminShellProps) => {
       navbar={
         hasSidebar
           ? {
-              width: effectiveCollapsed
-                ? { base: collapsedWidth }
-                : isExpandedByHover
-                  ? { base: hoverWidth }
+              // When hovering, keep collapsed width to avoid pushing content
+              width:
+                effectiveCollapsed || isExpandedByHover
+                  ? { base: collapsedWidth }
                   : { base: expandedWidth },
               breakpoint: "sm",
               collapsed: { mobile: !opened },
@@ -261,9 +272,7 @@ const AdminShell = (props: AdminShellProps) => {
       {...props.appShellProps}
     >
       <AppShell.Header bg={ui.colors.surface} {...props.appShellHeaderProps}>
-        {props.header ?? (
-          <AppBar items={defaultAppBarItems} {...props.appBarProps} />
-        )}
+        {props.header ?? <AppBar items={defaultAppBarItems} {...appBarProps} />}
       </AppShell.Header>
 
       {hasSidebar && (
@@ -271,6 +280,7 @@ const AdminShell = (props: AdminShellProps) => {
           bg={ui.colors.surface}
           className="alepha-sidebar-navbar"
           data-resizing={isResizing}
+          data-hover-expanded={isExpandedByHover}
           onMouseEnter={handleNavbarMouseEnter}
           onMouseLeave={handleNavbarMouseLeave}
           style={{
@@ -278,6 +288,12 @@ const AdminShell = (props: AdminShellProps) => {
               ? `translateX(${collapseEffect.offset}px)`
               : undefined,
             opacity: collapseEffect.opacity,
+            // When hovering, expand width visually as overlay
+            ...(isExpandedByHover && {
+              width: hoverWidth,
+              zIndex: 200,
+              boxShadow: "var(--mantine-shadow-xl)",
+            }),
           }}
           {...props.appShellNavbarProps}
         >
@@ -288,10 +304,10 @@ const AdminShell = (props: AdminShellProps) => {
           {(canResize || isExpandedByHover) && (
             <Flex
               pos="absolute"
-              right={-2}
+              right={-6}
               top={0}
               bottom={0}
-              w={4}
+              w={12}
               style={{
                 cursor: "col-resize",
                 userSelect: "none",
@@ -314,7 +330,19 @@ const AdminShell = (props: AdminShellProps) => {
         data-resizing={isResizing}
         {...props.appShellMainProps}
       >
-        {props.children ?? <NestedView />}
+        {props.container ? (
+          <Container
+            w={"100%"}
+            flex={1}
+            display="flex"
+            style={{ flexDirection: "column" }}
+            {...(typeof props.container === "boolean" ? {} : props.container)}
+          >
+            {props.children ?? <NestedView />}
+          </Container>
+        ) : (
+          (props.children ?? <NestedView />)
+        )}
       </AppShell.Main>
 
       {props.footer && (

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

@@ -1,5 +1,17 @@
-import { Divider, Flex, type FlexProps } from "@mantine/core";
-import type { ReactNode } from "react";
+import {
+  Anchor,
+  Container,
+  type ContainerProps,
+  Divider,
+  Flex,
+  type FlexProps,
+  Image,
+  Text,
+} from "@mantine/core";
+import { IconArrowLeft } from "@tabler/icons-react";
+import { Link, useRouter } from "alepha/react/router";
+import type { ComponentType, ReactNode } from "react";
+import ActionButton from "../buttons/ActionButton.tsx";
 import BurgerButton from "../buttons/BurgerButton.tsx";
 import DarkModeButton, {
   type DarkModeButtonProps,
@@ -18,55 +30,146 @@ export type AppBarItem =
   | AppBarSearch
   | AppBarLang
   | AppBarSpacer
-  | AppBarDivider;
+  | AppBarDivider
+  | AppBarLogo
+  | AppBarBack;
 
-export interface AppBarElement {
+export interface AppBarAbstractItem {
   position: "left" | "center" | "right";
+
+  /**
+   * Visibility control: return true to show, false to hide.
+   */
+  can?: () => boolean;
+}
+
+export interface AppBarElement extends AppBarAbstractItem {
   element: ReactNode;
 }
 
-export interface AppBarBurger {
-  position: "left" | "center" | "right";
+export interface AppBarBurger extends AppBarAbstractItem {
   type: "burger";
 }
 
-export interface AppBarDark {
-  position: "left" | "center" | "right";
+export interface AppBarDark extends AppBarAbstractItem {
   type: "dark";
   props?: DarkModeButtonProps;
 }
 
-export interface AppBarSearch {
-  position: "left" | "center" | "right";
+export interface AppBarSearch extends AppBarAbstractItem {
   type: "search";
   props?: OmnibarButtonProps;
 }
 
-export interface AppBarLang {
-  position: "left" | "center" | "right";
+export interface AppBarLang extends AppBarAbstractItem {
   type: "lang";
   props?: LanguageButtonProps;
 }
 
-export interface AppBarSpacer {
-  position: "left" | "center" | "right";
+export interface AppBarSpacer extends AppBarAbstractItem {
   type: "spacer";
 }
 
-export interface AppBarDivider {
-  position: "left" | "center" | "right";
+export interface AppBarDivider extends AppBarAbstractItem {
   type: "divider";
 }
 
+export interface AppBarLogo extends AppBarAbstractItem {
+  type: "logo";
+  props?: {
+    /**
+     * Logo image source URL.
+     */
+    src?: string;
+
+    /**
+     * Logo text (used if no src provided).
+     */
+    text?: string;
+
+    /**
+     * Icon component (used if no src or text provided).
+     */
+    icon?: ReactNode | ComponentType;
+
+    /**
+     * Link href when logo is clicked.
+     */
+    href?: string;
+
+    /**
+     * Logo image height in pixels.
+     * @default 32
+     */
+    height?: number;
+
+    /**
+     * Logo image width in pixels.
+     */
+    width?: number;
+
+    /**
+     * Font weight for text logo.
+     * @default 700
+     */
+    fontWeight?: number;
+
+    /**
+     * Font size for text logo.
+     * @default "lg"
+     */
+    fontSize?: string;
+  };
+}
+
+export interface AppBarBack extends AppBarAbstractItem {
+  type: "back";
+  props?: {
+    /**
+     * Custom label for back button.
+     * @default "Back"
+     */
+    label?: string;
+
+    /**
+     * Show only icon without label.
+     * @default true
+     */
+    iconOnly?: boolean;
+
+    /**
+     * Custom href to navigate to instead of history back.
+     */
+    href?: string;
+
+    /**
+     * Custom icon component.
+     */
+    icon?: ReactNode | ComponentType;
+  };
+}
+
 export interface AppBarProps {
   flexProps?: FlexProps;
   items?: AppBarItem[];
+
+  /**
+   * Wrap the AppBar content in a Mantine Container.
+   * Pass `true` for default Container, or ContainerProps to customize.
+   */
+  container?: boolean | ContainerProps;
 }
 
 const AppBar = (props: AppBarProps) => {
   const { items = [] } = props;
+  const router = useRouter();
 
   const renderItem = (item: AppBarItem, index: number) => {
+    // Check visibility control
+    if (item.can && !item.can()) {
+      return null;
+    }
+
     if ("type" in item) {
       if (item.type === "burger") {
         return <BurgerButton key={index} />;
@@ -86,6 +189,12 @@ const AppBar = (props: AppBarProps) => {
       if (item.type === "divider") {
         return <Divider key={index} orientation="vertical" />;
       }
+      if (item.type === "logo") {
+        return renderLogo(item, index);
+      }
+      if (item.type === "back") {
+        return renderBack(item, index);
+      }
     }
     if ("element" in item) {
       return item.element;
@@ -93,15 +202,111 @@ const AppBar = (props: AppBarProps) => {
     return null;
   };
 
+  const renderLogo = (item: AppBarLogo, index: number) => {
+    const {
+      src,
+      text,
+      icon,
+      href,
+      height = 32,
+      width,
+      fontWeight = 700,
+      fontSize = "lg",
+    } = item.props ?? {};
+
+    const logoContent = src ? (
+      <Image src={src} h={height} w={width} fit="contain" />
+    ) : icon ? (
+      typeof icon === "function" ? (
+        (() => {
+          const IconComponent = icon;
+          return <IconComponent />;
+        })()
+      ) : (
+        icon
+      )
+    ) : text ? (
+      <Text fw={fontWeight} size={fontSize}>
+        {text}
+      </Text>
+    ) : null;
+
+    if (href) {
+      return (
+        <Anchor
+          component={Link}
+          key={index}
+          href={href}
+          underline="never"
+          c="inherit"
+        >
+          {logoContent}
+        </Anchor>
+      );
+    }
+
+    return <Flex key={index}>{logoContent}</Flex>;
+  };
+
+  const renderBack = (item: AppBarBack, index: number) => {
+    const { label = "Back", iconOnly = true, href, icon } = item.props ?? {};
+
+    const renderIcon = () => {
+      if (!icon) {
+        return <IconArrowLeft size={18} />;
+      }
+      if (typeof icon === "function") {
+        const IconComponent = icon as ComponentType<{ size?: number }>;
+        return <IconComponent size={18} />;
+      }
+      return icon;
+    };
+
+    const iconElement = renderIcon();
+
+    const handleClick = () => {
+      if (href) {
+        router.push(href);
+      } else {
+        router.back();
+      }
+    };
+
+    if (iconOnly) {
+      return (
+        <ActionButton
+          key={index}
+          icon={iconElement}
+          variant="subtle"
+          color="gray"
+          onClick={handleClick}
+          tooltip={{ label, position: "bottom" }}
+        />
+      );
+    }
+
+    return (
+      <ActionButton
+        key={index}
+        leftSection={iconElement}
+        variant="subtle"
+        color="gray"
+        onClick={handleClick}
+      >
+        {label}
+      </ActionButton>
+    );
+  };
+
   const leftItems = items.filter((item) => item.position === "left");
   const centerItems = items.filter((item) => item.position === "center");
   const rightItems = items.filter((item) => item.position === "right");
 
-  return (
+  const content = (
     <Flex
       h="100%"
       align="center"
-      px="md"
+      px={props.container ? 0 : "md"}
       justify="space-between"
       {...props.flexProps}
     >
@@ -128,6 +333,18 @@ const AppBar = (props: AppBarProps) => {
       </Flex>
     </Flex>
   );
+
+  if (props.container) {
+    const containerProps =
+      typeof props.container === "boolean" ? {} : props.container;
+    return (
+      <Container h="100%" {...containerProps}>
+        {content}
+      </Container>
+    );
+  }
+
+  return content;
 };
 
 export default AppBar;

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

@@ -35,9 +35,9 @@ const Omnibar = (props: OmnibarProps) => {
           description: page.description,
           onClick: () => {
             if (page.staticName) {
-              return router.go(page.staticName, { params: page.params });
+              return router.push(page.staticName, { params: page.params });
             }
-            return router.go(page.name);
+            return router.push(page.name);
           },
           leftSection: renderIcon(page.icon),
         })),

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

@@ -265,6 +265,7 @@ export const SidebarItem = (props: SidebarItemProps) => {
           props.theme.button?.size ??
           (level === 0 ? "sm" : "xs")
         }
+        tooltip={item.description}
         c={"var(--mantine-color-text)"}
         color={"gray"}
         variant={"subtle"}
@@ -276,11 +277,6 @@ export const SidebarItem = (props: SidebarItemProps) => {
             {renderIcon(item.icon)}
             <Flex direction={"column"}>
               <Flex>{item.label}</Flex>
-              {item.description && (
-                <Text size={"xs"} c={"dimmed"}>
-                  {item.description}
-                </Text>
-              )}
             </Flex>
           </Flex>
         }

package/src/core/index.ts

@@ -5,11 +5,15 @@ import { AlephaReactI18n } from "alepha/react/i18n";
 import type { ComponentType, ReactNode } from "react";
 import { alephaSidebarAtom } from "./atoms/alephaSidebarAtom.ts";
 import { alephaThemeAtom } from "./atoms/alephaThemeAtom.ts";
+import {
+  type AlephaThemeListAtom,
+  alephaThemeListAtom,
+} from "./atoms/alephaThemeListAtom.ts";
 import type { ControlProps } from "./components/form/Control.tsx";
 import { ThemeProvider } from "./providers/ThemeProvider.ts";
-import { RootRouter } from "./RootRouter.ts";
 import { DialogService } from "./services/DialogService.tsx";
 import { ToastService } from "./services/ToastService.tsx";
+import { UiRouter } from "./UiRouter.ts";
 
 // ---------------------------------------------------------------------------------------------------------------------
 
@@ -98,7 +102,6 @@ export * from "./constants/ui.ts";
 export { useDialog } from "./hooks/useDialog.ts";
 export { useToast } from "./hooks/useToast.ts";
 export * from "./providers/ThemeProvider.ts";
-export * from "./RootRouter.ts";
 export type {
   AlertDialogOptions,
   AlertDialogProps,
@@ -110,6 +113,7 @@ export type {
 } from "./services/DialogService.tsx";
 export { DialogService } from "./services/DialogService.tsx";
 export { ToastService } from "./services/ToastService.tsx";
+export * from "./UiRouter.ts";
 export * from "./utils/extractSchemaFields.ts";
 export * from "./utils/icons.tsx";
 export * from "./utils/string.ts";
@@ -180,7 +184,7 @@ declare module "alepha/react/router" {
  */
 export const AlephaUI = $module({
   name: "alepha.ui",
-  services: [DialogService, ToastService, ThemeProvider, RootRouter],
+  services: [DialogService, ToastService, ThemeProvider, UiRouter],
   register: (alepha) => {
     alepha.with(AlephaReactI18n);
     alepha.with(AlephaReactHead);
@@ -192,30 +196,12 @@ export const AlephaUI = $module({
 });
 
 /**
- * Register UI components and get the RootRouter instance.
+ * Convenience function to configure and inject the UiRouter.
  */
-export const $ui = (
-  opts: {
-    // TODO:
-    // theme?: ThemeOptions;
-    // root?: string = "/";
-  } = {},
-) => {
+export const $ui = (options: { themes?: AlephaThemeListAtom } = {}) => {
   const { alepha } = $context();
-
-  // TODO: Register unique instance ? In order to have multiple ui apps in the same context ?
-  // app = $ui();
-  // admin = $ui({ root: "/admin", theme: adminTheme });
-  // auth = $ui({ root: "/auth", theme: authTheme });
-  // etc...
-
-  /**
-   * If multi ui, should we have N themes ? or one $atom theme but with change based on current ui app ?
-   *
-   * App (theme=T1) -> Admin (theme=T2) ?
-   *
-   * > It can be done with onLeave()/onEnter() of the RootRouter to set the theme atom.
-   */
-
-  return alepha.inject(RootRouter); // Inject as singleton ?
+  if (options.themes) {
+    alepha.store.set(alephaThemeListAtom, options.themes);
+  }
+  return alepha.inject(UiRouter); // Inject as singleton ?
 };

package/dist/admin/AdminAudits-BlGGKLof.js

@@ -1,3 +0,0 @@
-import { t as AdminAudits_default } from "./AdminAudits-C0DPYw0W.js";
-
-export { AdminAudits_default as default };

package/dist/admin/AdminAudits-C0DPYw0W.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AdminAudits-C0DPYw0W.js","names":[],"sources":["../../src/admin/components/audits/AdminAudits.tsx"],"sourcesContent":["import { DataTable, Flex, Text } from \"@alepha/ui\";\nimport { Badge, Group, Stack, Tooltip } from \"@mantine/core\";\nimport {\n  IconAlertTriangle,\n  IconCheck,\n  IconInfoCircle,\n  IconUser,\n  IconX,\n} from \"@tabler/icons-react\";\nimport { type Page, t } from \"alepha\";\nimport type { AdminAuditController, AuditEntity } from \"alepha/api/audits\";\nimport { useClient } from \"alepha/react\";\nimport { useI18n } from \"alepha/react/i18n\";\nimport { useRouter } from \"alepha/react/router\";\nimport type { AdminRouter } from \"../../AdminRouter.ts\";\n\nexport interface AdminAuditsProps {\n  userRealmName?: string;\n}\n\nconst getSeverityColor = (severity: string) => {\n  switch (severity) {\n    case \"critical\":\n      return \"red\";\n    case \"warning\":\n      return \"yellow\";\n    default:\n      return \"blue\";\n  }\n};\n\nconst getSeverityIcon = (severity: string) => {\n  switch (severity) {\n    case \"critical\":\n      return <IconAlertTriangle size={12} />;\n    case \"warning\":\n      return <IconAlertTriangle size={12} />;\n    default:\n      return <IconInfoCircle size={12} />;\n  }\n};\n\nconst getTypeColor = (type: string) => {\n  switch (type) {\n    case \"auth\":\n      return \"blue\";\n    case \"user\":\n      return \"grape\";\n    case \"security\":\n      return \"red\";\n    case \"system\":\n      return \"orange\";\n    case \"access\":\n      return \"cyan\";\n    case \"payment\":\n      return \"green\";\n    case \"order\":\n      return \"teal\";\n    default:\n      return \"gray\";\n  }\n};\n\nconst AdminAudits = (props: AdminAuditsProps) => {\n  const client = useClient<AdminAuditController>();\n  const router = useRouter<AdminRouter>();\n  const { l } = useI18n();\n\n  const filters = t.object({\n    type: t.optional(t.text()),\n    action: t.optional(t.text()),\n    severity: t.optional(t.enum([\"info\", \"warning\", \"critical\"])),\n    success: t.optional(t.boolean()),\n    resourceType: t.optional(t.text()),\n    search: t.optional(t.text()),\n    from: t.optional(t.datetime()),\n    to: t.optional(t.datetime()),\n  });\n\n  return (\n    <Flex flex={1} direction=\"column\">\n      <DataTable<AuditEntity, typeof filters>\n        submitOnInit\n        defaultSize={20}\n        typeFormProps={{\n          skipSubmitButton: true,\n          columns: 4,\n        }}\n        tableProps={{\n          horizontalSpacing: \"xs\",\n          verticalSpacing: \"xs\",\n          striped: false,\n          highlightOnHover: true,\n        }}\n        filters={filters}\n        tableTrProps={(item) => ({\n          style: {\n            cursor: item.userId ? \"pointer\" : \"default\",\n            opacity: item.success ? 1 : 0.85,\n          },\n          onClick: () => {\n            if (item.userId) {\n              router.go(\"adminUserDetails\", {\n                params: { userId: item.userId },\n              });\n            }\n          },\n        })}\n        items={async (query) => {\n          const response = await client.findAudits({\n            query: {\n              ...query,\n              userRealm: props.userRealmName,\n            },\n          });\n          return response as Page<AuditEntity>;\n        }}\n        columns={{\n          type: {\n            label: \"Type\",\n            fit: true,\n            value: (item) => (\n              <Badge size=\"sm\" variant=\"light\" color={getTypeColor(item.type)}>\n                {item.type}\n              </Badge>\n            ),\n          },\n          action: {\n            label: \"Action\",\n            fit: true,\n            value: (item) => (\n              <Badge size=\"sm\" variant=\"outline\">\n                {item.action}\n              </Badge>\n            ),\n          },\n          severity: {\n            label: \"Severity\",\n            fit: true,\n            value: (item) => (\n              <Badge\n                size=\"xs\"\n                variant=\"light\"\n                color={getSeverityColor(item.severity)}\n                leftSection={getSeverityIcon(item.severity)}\n              >\n                {item.severity}\n              </Badge>\n            ),\n          },\n          user: {\n            label: \"User\",\n            fit: true,\n            value: (item) =>\n              item.userId ? (\n                <Tooltip\n                  label={\n                    <Stack gap={2}>\n                      <Text size=\"xs\">{item.userEmail || \"No email\"}</Text>\n                      <Text size=\"xs\" c=\"dimmed\">\n                        {item.userRealm || \"default\"}\n                      </Text>\n                    </Stack>\n                  }\n                >\n                  <Group gap={4}>\n                    <IconUser size={12} />\n                    <Text size=\"xs\" lineClamp={1} maw={100}>\n                      {item.userEmail?.split(\"@\")[0] || item.userId.slice(0, 8)}\n                    </Text>\n                  </Group>\n                </Tooltip>\n              ) : (\n                <Text size=\"xs\" c=\"dimmed\">\n                  System\n                </Text>\n              ),\n          },\n          description: {\n            label: \"Description\",\n            value: (item) => (\n              <Text size=\"sm\" lineClamp={1}>\n                {item.description || \"-\"}\n              </Text>\n            ),\n          },\n          resource: {\n            label: \"Resource\",\n            fit: true,\n            value: (item) =>\n              item.resourceType ? (\n                <Tooltip label={`${item.resourceType}: ${item.resourceId}`}>\n                  <Badge size=\"xs\" variant=\"dot\" color=\"gray\">\n                    {item.resourceType}\n                  </Badge>\n                </Tooltip>\n              ) : (\n                <Text size=\"xs\" c=\"dimmed\">\n                  -\n                </Text>\n              ),\n          },\n          success: {\n            label: \"Status\",\n            fit: true,\n            value: (item) =>\n              item.success ? (\n                <IconCheck size={14} color=\"var(--mantine-color-green-6)\" />\n              ) : (\n                <Tooltip label={item.errorMessage || \"Failed\"}>\n                  <IconX size={14} color=\"var(--mantine-color-red-6)\" />\n                </Tooltip>\n              ),\n          },\n          ipAddress: {\n            label: \"IP\",\n            fit: true,\n            value: (item) => (\n              <Text size=\"xs\" c=\"dimmed\" ff=\"monospace\">\n                {item.ipAddress || \"-\"}\n              </Text>\n            ),\n          },\n          createdAt: {\n            label: \"Time\",\n            fit: true,\n            value: (item) => (\n              <Tooltip label={l(item.createdAt, { date: \"medium\" })}>\n                <Text size=\"xs\" c=\"dimmed\">\n                  {l(item.createdAt, { date: \"fromNow\" })}\n                </Text>\n              </Tooltip>\n            ),\n          },\n        }}\n      />\n    </Flex>\n  );\n};\n\nexport default AdminAudits;\n"],"mappings":"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"}

package/dist/admin/AdminUserCreate-DiXi1EWB.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AdminUserCreate-DiXi1EWB.js","names":["Text"],"sources":["../../src/admin/components/users/AdminUserCreate.tsx"],"sourcesContent":["import { ActionButton, Control, Flex } from \"@alepha/ui\";\nimport { Card, Stack, Text } from \"@mantine/core\";\nimport { t } from \"alepha\";\nimport type { AdminUserController } from \"alepha/api/users\";\nimport { useClient } from \"alepha/react\";\nimport { useForm } from \"alepha/react/form\";\nimport { useRouter } from \"alepha/react/router\";\nimport type { AdminRouter } from \"../../AdminRouter.ts\";\n\nexport interface AdminUserCreateProps {\n  userRealmName?: string;\n}\n\nconst AdminUserCreate = (props: AdminUserCreateProps) => {\n  const client = useClient<AdminUserController>();\n  const router = useRouter<AdminRouter>();\n\n  const form = useForm({\n    schema: t.object({\n      username: t.optional(\n        t.shortText({\n          minLength: 3,\n          maxLength: 50,\n          pattern: \"^[a-zA-Z0-9._-]+$\",\n        }),\n      ),\n      email: t.optional(t.email()),\n      phoneNumber: t.optional(t.e164()),\n      firstName: t.optional(t.string()),\n      lastName: t.optional(t.string()),\n      roles: t.optional(t.array(t.string())),\n      enabled: t.optional(t.boolean()),\n      password: t.optional(t.string({ minLength: 8 })),\n    }),\n    handler: async (data) => {\n      const user = await client.createUser({\n        query: {\n          userRealmName: props.userRealmName,\n        },\n        body: {\n          ...data,\n          enabled: data.enabled ?? true,\n        },\n      });\n\n      await router.go(\"adminUserDetails\", {\n        params: { userId: user.id },\n      });\n    },\n  });\n\n  return (\n    <Flex flex={1} p=\"md\">\n      <Card withBorder p=\"lg\" maw={600} w=\"100%\">\n        <form {...form.props}>\n          <Stack gap=\"md\">\n            <Text size=\"lg\" fw={500}>\n              Create New User\n            </Text>\n\n            <Control title=\"Username\" input={form.input.username} />\n\n            <Control title=\"Email\" input={form.input.email} />\n\n            <Control title=\"Phone Number\" input={form.input.phoneNumber} />\n\n            <Control title=\"First Name\" input={form.input.firstName} />\n\n            <Control title=\"Last Name\" input={form.input.lastName} />\n\n            <Control title=\"Password\" input={form.input.password} password />\n\n            <Control title=\"Roles\" input={form.input.roles} />\n\n            <Control title=\"Enabled\" input={form.input.enabled} />\n\n            <ActionButton form={form}>Create User</ActionButton>\n          </Stack>\n        </form>\n      </Card>\n    </Flex>\n  );\n};\n\nexport default AdminUserCreate;\n"],"mappings":";;;;;;;;;AAaA,MAAM,mBAAmB,UAAgC;CACvD,MAAM,SAAS,WAAgC;CAC/C,MAAM,SAAS,WAAwB;CAEvC,MAAM,OAAO,QAAQ;EACnB,QAAQ,EAAE,OAAO;GACf,UAAU,EAAE,SACV,EAAE,UAAU;IACV,WAAW;IACX,WAAW;IACX,SAAS;IACV,CAAC,CACH;GACD,OAAO,EAAE,SAAS,EAAE,OAAO,CAAC;GAC5B,aAAa,EAAE,SAAS,EAAE,MAAM,CAAC;GACjC,WAAW,EAAE,SAAS,EAAE,QAAQ,CAAC;GACjC,UAAU,EAAE,SAAS,EAAE,QAAQ,CAAC;GAChC,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC;GACtC,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC;GAChC,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,WAAW,GAAG,CAAC,CAAC;GACjD,CAAC;EACF,SAAS,OAAO,SAAS;GACvB,MAAM,OAAO,MAAM,OAAO,WAAW;IACnC,OAAO,EACL,eAAe,MAAM,eACtB;IACD,MAAM;KACJ,GAAG;KACH,SAAS,KAAK,WAAW;KAC1B;IACF,CAAC;AAEF,SAAM,OAAO,GAAG,oBAAoB,EAClC,QAAQ,EAAE,QAAQ,KAAK,IAAI,EAC5B,CAAC;;EAEL,CAAC;AAEF,QACE,oBAAC;EAAK,MAAM;EAAG,GAAE;YACf,oBAAC;GAAK;GAAW,GAAE;GAAK,KAAK;GAAK,GAAE;aAClC,oBAAC;IAAK,GAAI,KAAK;cACb,qBAAC;KAAM,KAAI;;MACT,oBAACA;OAAK,MAAK;OAAK,IAAI;iBAAK;QAElB;MAEP,oBAAC;OAAQ,OAAM;OAAW,OAAO,KAAK,MAAM;QAAY;MAExD,oBAAC;OAAQ,OAAM;OAAQ,OAAO,KAAK,MAAM;QAAS;MAElD,oBAAC;OAAQ,OAAM;OAAe,OAAO,KAAK,MAAM;QAAe;MAE/D,oBAAC;OAAQ,OAAM;OAAa,OAAO,KAAK,MAAM;QAAa;MAE3D,oBAAC;OAAQ,OAAM;OAAY,OAAO,KAAK,MAAM;QAAY;MAEzD,oBAAC;OAAQ,OAAM;OAAW,OAAO,KAAK,MAAM;OAAU;QAAW;MAEjE,oBAAC;OAAQ,OAAM;OAAQ,OAAO,KAAK,MAAM;QAAS;MAElD,oBAAC;OAAQ,OAAM;OAAU,OAAO,KAAK,MAAM;QAAW;MAEtD,oBAAC;OAAmB;iBAAM;QAA0B;;MAC9C;KACH;IACF;GACF;;AAIX,8BAAe"}

package/dist/admin/AdminUserSettings-BnzRAcqV.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AdminUserSettings-BnzRAcqV.js","names":[],"sources":["../../src/admin/components/users/AdminUserSettings.tsx"],"sourcesContent":["import { ActionButton, Flex, Text } from \"@alepha/ui\";\nimport { Alert, Card, Group, Loader, Stack } from \"@mantine/core\";\nimport {\n  IconAlertCircle,\n  IconCheck,\n  IconMail,\n  IconTrash,\n} from \"@tabler/icons-react\";\nimport type {\n  AdminUserController,\n  UserController,\n  UserEntity,\n} from \"alepha/api/users\";\nimport { useClient } from \"alepha/react\";\nimport { useRouter, useRouterState } from \"alepha/react/router\";\nimport { useEffect, useState } from \"react\";\nimport type { AdminRouter } from \"../../AdminRouter.ts\";\n\nexport interface AdminUserSettingsProps {\n  userRealmName?: string;\n}\n\nconst AdminUserSettings = (props: AdminUserSettingsProps) => {\n  const router = useRouter<AdminRouter>();\n  const state = useRouterState();\n  const adminClient = useClient<AdminUserController>();\n  const userClient = useClient<UserController>();\n  const userId = state.params.userId as string;\n\n  const [user, setUser] = useState<UserEntity | null>(null);\n  const [loading, setLoading] = useState(true);\n  const [deleteLoading, setDeleteLoading] = useState(false);\n  const [verifyLoading, setVerifyLoading] = useState(false);\n  const [verifySuccess, setVerifySuccess] = useState(false);\n\n  useEffect(() => {\n    const loadUser = async () => {\n      try {\n        const data = await adminClient.getUser({\n          params: { id: userId },\n          query: { userRealmName: props.userRealmName },\n        });\n        setUser(data);\n      } finally {\n        setLoading(false);\n      }\n    };\n\n    loadUser();\n  }, [userId]);\n\n  const handleDelete = async () => {\n    if (!confirm(\"Are you sure you want to delete this user?\")) {\n      return;\n    }\n\n    setDeleteLoading(true);\n    try {\n      await adminClient.deleteUser({\n        params: { id: userId },\n        query: { userRealmName: props.userRealmName },\n      });\n      await router.go(\"adminUsers\");\n    } finally {\n      setDeleteLoading(false);\n    }\n  };\n\n  const handleTriggerEmailVerification = async () => {\n    if (!user?.email) return;\n\n    setVerifyLoading(true);\n    setVerifySuccess(false);\n    try {\n      await userClient.requestEmailVerification({\n        query: {\n          userRealmName: props.userRealmName,\n          method: \"link\",\n          verifyUrl: `${window.location.origin}/auth/verify-email`,\n        },\n        body: { email: user.email },\n      });\n      setVerifySuccess(true);\n    } finally {\n      setVerifyLoading(false);\n    }\n  };\n\n  if (loading) {\n    return (\n      <Flex flex={1} justify=\"center\" align=\"center\">\n        <Loader />\n      </Flex>\n    );\n  }\n\n  if (!user) {\n    return (\n      <Flex flex={1} justify=\"center\" align=\"center\">\n        <Text c=\"dimmed\">User not found</Text>\n      </Flex>\n    );\n  }\n\n  return (\n    <Flex flex={1} direction=\"column\" gap=\"md\">\n      {user.email && !user.emailVerified && (\n        <Card withBorder p=\"lg\">\n          <Stack gap=\"md\">\n            <Text size=\"lg\" fw={500}>\n              Email Verification\n            </Text>\n\n            <Alert variant=\"light\" color=\"yellow\" icon={<IconMail />}>\n              <Text size=\"sm\">\n                This user's email ({user.email}) is not verified. You can send a\n                verification link to the user.\n              </Text>\n            </Alert>\n\n            {verifySuccess && (\n              <Alert variant=\"light\" color=\"green\" icon={<IconCheck />}>\n                <Text size=\"sm\">\n                  Verification link sent successfully to {user.email}.\n                </Text>\n              </Alert>\n            )}\n\n            <Group>\n              <ActionButton\n                leftSection={<IconMail size={16} />}\n                loading={verifyLoading}\n                onClick={handleTriggerEmailVerification}\n              >\n                Send Verification Link\n              </ActionButton>\n            </Group>\n          </Stack>\n        </Card>\n      )}\n\n      <Card withBorder p=\"lg\">\n        <Stack gap=\"md\">\n          <Text size=\"lg\" fw={500} c=\"red\">\n            Danger Zone\n          </Text>\n\n          <Alert variant=\"light\" color=\"red\" icon={<IconAlertCircle />}>\n            <Text size=\"sm\">\n              Deleting this user will permanently remove their account and all\n              associated data. This action cannot be undone.\n            </Text>\n          </Alert>\n\n          <Group>\n            <ActionButton\n              color=\"red\"\n              leftSection={<IconTrash size={16} />}\n              loading={deleteLoading}\n              onClick={handleDelete}\n            >\n              Delete User\n            </ActionButton>\n          </Group>\n        </Stack>\n      </Card>\n    </Flex>\n  );\n};\n\nexport default AdminUserSettings;\n"],"mappings":"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"}

package/dist/admin/AdminUserSettings-CXs-jtRv.js

@@ -1,3 +0,0 @@
-import { t as AdminUserSettings_default } from "./AdminUserSettings-BnzRAcqV.js";
-
-export { AdminUserSettings_default as default };

package/dist/admin/AdminUsers-CYkcUWCg.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AdminUsers-CYkcUWCg.js","names":["Flex"],"sources":["../../src/admin/components/users/AdminUsers.tsx"],"sourcesContent":["import { DataTable, Text } from \"@alepha/ui\";\nimport { Badge, Flex, Group } from \"@mantine/core\";\nimport { IconCheck, IconUsersPlus, IconX } from \"@tabler/icons-react\";\nimport { type Page, t } from \"alepha\";\nimport {\n  type AdminUserController,\n  type UserEntity,\n  users,\n} from \"alepha/api/users\";\nimport { useClient } from \"alepha/react\";\nimport { useI18n } from \"alepha/react/i18n\";\nimport { useRouter } from \"alepha/react/router\";\nimport type { AdminRouter } from \"../../AdminRouter.ts\";\n\nexport interface AdminUsersProps {\n  userRealmName?: string;\n}\n\nconst AdminUsers = (props: AdminUsersProps) => {\n  const client = useClient<AdminUserController>();\n  const router = useRouter<AdminRouter>();\n  const { l } = useI18n();\n\n  const filters = t.object({\n    query: t.optional(\n      t.string({\n        $control: {\n          query: t.omit(users.schema, [\"id\", \"version\"]),\n        },\n      }),\n    ),\n  });\n\n  return (\n    <Flex flex={1} direction=\"column\">\n      <DataTable<UserEntity, typeof filters>\n        submitOnInit\n        actions={[\n          {\n            icon: IconUsersPlus,\n            href: router.path(\"adminUserCreate\"),\n            label: \"Create User\",\n          },\n        ]}\n        defaultSize={10}\n        typeFormProps={{\n          skipSubmitButton: true,\n          columns: 3,\n        }}\n        tableProps={{\n          horizontalSpacing: \"xs\",\n          verticalSpacing: \"xs\",\n          striped: false,\n          highlightOnHover: true,\n        }}\n        onFilterChange={(key, value, form) => {\n          if (key === \"query\") {\n            return form.submit();\n          }\n        }}\n        filters={filters}\n        tableTrProps={(item) => {\n          const baseProps: Record<string, any> = {\n            style: { cursor: \"pointer\" },\n            onClick: () =>\n              router.go(\"adminUserDetails\", {\n                params: { userId: item.id },\n              }),\n          };\n\n          if (!item.enabled) {\n            baseProps.opacity = 0.5;\n          }\n\n          return baseProps;\n        }}\n        items={async (filters) => {\n          const response = await client.findUsers({\n            query: {\n              ...filters,\n              userRealmName: props.userRealmName,\n            },\n          });\n\n          return response as Page<UserEntity>;\n        }}\n        columns={{\n          username: {\n            label: \"Username\",\n            value: (item) => (\n              <Text size=\"sm\" fw={500}>\n                {item.username || \"-\"}\n              </Text>\n            ),\n          },\n          email: {\n            label: \"Email\",\n            value: (item) => (\n              <Group gap=\"xs\">\n                <Text size=\"sm\">{item.email || \"-\"}</Text>\n                {item.email && (\n                  <Badge\n                    size=\"xs\"\n                    variant=\"light\"\n                    color={item.emailVerified ? \"green\" : \"gray\"}\n                    leftSection={\n                      item.emailVerified ? (\n                        <IconCheck size={10} />\n                      ) : (\n                        <IconX size={10} />\n                      )\n                    }\n                  >\n                    {item.emailVerified ? \"Verified\" : \"Unverified\"}\n                  </Badge>\n                )}\n              </Group>\n            ),\n          },\n          roles: {\n            label: \"Roles\",\n            value: (item) => (\n              <Group gap={4}>\n                {item.roles.map((role: string) => (\n                  <Badge key={role} size=\"xs\" variant=\"outline\">\n                    {role}\n                  </Badge>\n                ))}\n              </Group>\n            ),\n          },\n          enabled: {\n            label: \"Status\",\n            fit: true,\n            value: (item) => (\n              <Badge\n                size=\"sm\"\n                variant=\"light\"\n                color={item.enabled ? \"green\" : \"red\"}\n              >\n                {item.enabled ? \"Active\" : \"Disabled\"}\n              </Badge>\n            ),\n          },\n          createdAt: {\n            label: \"Created\",\n            fit: true,\n            value: (item) => (\n              <Text size=\"xs\" c=\"dimmed\">\n                {l(item.createdAt, { date: \"fromNow\" })}\n              </Text>\n            ),\n          },\n        }}\n      />\n    </Flex>\n  );\n};\n\nexport default AdminUsers;\n"],"mappings":";;;;;;;;;;;AAkBA,MAAM,cAAc,UAA2B;CAC7C,MAAM,SAAS,WAAgC;CAC/C,MAAM,SAAS,WAAwB;CACvC,MAAM,EAAE,MAAM,SAAS;CAEvB,MAAM,UAAU,EAAE,OAAO,EACvB,OAAO,EAAE,SACP,EAAE,OAAO,EACP,UAAU,EACR,OAAO,EAAE,KAAK,MAAM,QAAQ,CAAC,MAAM,UAAU,CAAC,EAC/C,EACF,CAAC,CACH,EACF,CAAC;AAEF,QACE,oBAACA;EAAK,MAAM;EAAG,WAAU;YACvB,oBAAC;GACC;GACA,SAAS,CACP;IACE,MAAM;IACN,MAAM,OAAO,KAAK,kBAAkB;IACpC,OAAO;IACR,CACF;GACD,aAAa;GACb,eAAe;IACb,kBAAkB;IAClB,SAAS;IACV;GACD,YAAY;IACV,mBAAmB;IACnB,iBAAiB;IACjB,SAAS;IACT,kBAAkB;IACnB;GACD,iBAAiB,KAAK,OAAO,SAAS;AACpC,QAAI,QAAQ,QACV,QAAO,KAAK,QAAQ;;GAGf;GACT,eAAe,SAAS;IACtB,MAAM,YAAiC;KACrC,OAAO,EAAE,QAAQ,WAAW;KAC5B,eACE,OAAO,GAAG,oBAAoB,EAC5B,QAAQ,EAAE,QAAQ,KAAK,IAAI,EAC5B,CAAC;KACL;AAED,QAAI,CAAC,KAAK,QACR,WAAU,UAAU;AAGtB,WAAO;;GAET,OAAO,OAAO,YAAY;AAQxB,WAPiB,MAAM,OAAO,UAAU,EACtC,OAAO;KACL,GAAG;KACH,eAAe,MAAM;KACtB,EACF,CAAC;;GAIJ,SAAS;IACP,UAAU;KACR,OAAO;KACP,QAAQ,SACN,oBAAC;MAAK,MAAK;MAAK,IAAI;gBACjB,KAAK,YAAY;OACb;KAEV;IACD,OAAO;KACL,OAAO;KACP,QAAQ,SACN,qBAAC;MAAM,KAAI;iBACT,oBAAC;OAAK,MAAK;iBAAM,KAAK,SAAS;QAAW,EACzC,KAAK,SACJ,oBAAC;OACC,MAAK;OACL,SAAQ;OACR,OAAO,KAAK,gBAAgB,UAAU;OACtC,aACE,KAAK,gBACH,oBAAC,aAAU,MAAM,KAAM,GAEvB,oBAAC,SAAM,MAAM,KAAM;iBAItB,KAAK,gBAAgB,aAAa;QAC7B;OAEJ;KAEX;IACD,OAAO;KACL,OAAO;KACP,QAAQ,SACN,oBAAC;MAAM,KAAK;gBACT,KAAK,MAAM,KAAK,SACf,oBAAC;OAAiB,MAAK;OAAK,SAAQ;iBACjC;SADS,KAEJ,CACR;OACI;KAEX;IACD,SAAS;KACP,OAAO;KACP,KAAK;KACL,QAAQ,SACN,oBAAC;MACC,MAAK;MACL,SAAQ;MACR,OAAO,KAAK,UAAU,UAAU;gBAE/B,KAAK,UAAU,WAAW;OACrB;KAEX;IACD,WAAW;KACT,OAAO;KACP,KAAK;KACL,QAAQ,SACN,oBAAC;MAAK,MAAK;MAAK,GAAE;gBACf,EAAE,KAAK,WAAW,EAAE,MAAM,WAAW,CAAC;OAClC;KAEV;IACF;IACD;GACG;;AAIX,yBAAe"}