@alepha/ui 0.18.0 → 0.18.2

package/dist/demo/index.js

@@ -1,4 +1,4 @@
-import { t as AlephaUI } from "./core-RCUw1Q-a.js";
+import { t as AlephaUI } from "./core-B7LNjM78.js";
 import { $context, $module } from "alepha";
 import { IconBell, IconBinaryTree, IconBraces, IconClick, IconForms, IconHeading, IconHome, IconKey, IconLayout, IconLayoutSidebar, IconLetterT, IconLockQuestion, IconLogin, IconMailCheck, IconMessage, IconPackages, IconRowInsertBottom, IconTable, IconUserPlus, IconWall } from "@tabler/icons-react";
 import { $page } from "alepha/react/router";
@@ -9,7 +9,7 @@ var DemoRouter = class {
 		icon: IconPackages,
 		path: "/demo",
 		label: "Demo",
-		lazy: () => import("./DemoLayout-C56xb5EE.js"),
+		lazy: () => import("./DemoLayout-Cy6xjn6P.js"),
 		children: () => [
 			this.demoHome,
 			this.demoCore,
@@ -24,7 +24,7 @@ var DemoRouter = class {
 		icon: IconHome,
 		path: "/",
 		label: "Home",
-		lazy: () => import("./DemoHome-Clbn8AmS.js")
+		lazy: () => import("./DemoHome-BSGuBHus.js")
 	});
 	demoCore = $page({
 		icon: IconWall,
@@ -41,25 +41,25 @@ var DemoRouter = class {
 		icon: IconRowInsertBottom,
 		path: "/flex",
 		label: "Flex",
-		lazy: () => import("./DemoFlex-EtVq8QfX.js")
+		lazy: () => import("./DemoFlex-CAhLUanT.js")
 	});
 	demoText = $page({
 		icon: IconLetterT,
 		path: "/text",
 		label: "Text",
-		lazy: () => import("./DemoText-CzXuUn3g.js")
+		lazy: () => import("./DemoText-DU3JeRS0.js")
 	});
 	demoHeading = $page({
 		icon: IconHeading,
 		path: "/heading",
 		label: "Heading",
-		lazy: () => import("./DemoHeading-BS-vGfkI.js")
+		lazy: () => import("./DemoHeading-yIFmNjHB.js")
 	});
 	demoButton = $page({
 		icon: IconClick,
 		path: "/button",
 		label: "Button",
-		lazy: () => import("./DemoButton-BmaWZVwf.js")
+		lazy: () => import("./DemoButton-CGUyR9eM.js")
 	});
 	demoLayoutSection = $page({
 		icon: IconLayout,
@@ -75,19 +75,19 @@ var DemoRouter = class {
 		icon: IconLayoutSidebar,
 		path: "/sidebar",
 		label: "Sidebar",
-		lazy: () => import("./DemoSidebar-CcBo4ltC.js")
+		lazy: () => import("./DemoSidebar-od7aLjP_.js")
 	});
 	demoDialog = $page({
 		icon: IconMessage,
 		path: "/dialog",
 		label: "Dialog",
-		lazy: () => import("./DemoDialog-4ItHLf9t.js")
+		lazy: () => import("./DemoDialog-DW8QEvD1.js")
 	});
 	demoToast = $page({
 		icon: IconBell,
 		path: "/toast",
 		label: "Toast",
-		lazy: () => import("./DemoToast-BgHDhWrX.js")
+		lazy: () => import("./DemoToast-CUJEiPRa.js")
 	});
 	demoForm = $page({
 		icon: IconForms,
@@ -99,7 +99,7 @@ var DemoRouter = class {
 		icon: IconForms,
 		path: "/type-form",
 		label: "TypeForm",
-		lazy: () => import("./DemoTypeForm-DDzWoMSV.js")
+		lazy: () => import("./DemoTypeForm-C1dNkahD.js")
 	});
 	demoTable = $page({
 		icon: IconTable,
@@ -111,7 +111,7 @@ var DemoRouter = class {
 		icon: IconTable,
 		path: "/data-table",
 		label: "DataTable",
-		lazy: () => import("./DemoDataTable-Z9xyV221.js")
+		lazy: () => import("./DemoDataTable-QFG-xXSx.js")
 	});
 	demoJson = $page({
 		icon: IconBraces,
@@ -123,7 +123,7 @@ var DemoRouter = class {
 		icon: IconBinaryTree,
 		path: "/viewer",
 		label: "JsonViewer",
-		lazy: () => import("./DemoJsonViewer-DkIX_ky2.js")
+		lazy: () => import("./DemoJsonViewer-DsA2IpgV.js")
 	});
 	demoAuth = $page({
 		icon: IconKey,
@@ -140,25 +140,25 @@ var DemoRouter = class {
 		icon: IconLogin,
 		path: "/login",
 		label: "Login",
-		lazy: () => import("./DemoLogin-BZwpicOS.js")
+		lazy: () => import("./DemoLogin-vqxgTu4P.js")
 	});
 	demoRegister = $page({
 		icon: IconUserPlus,
 		path: "/register",
 		label: "Register",
-		lazy: () => import("./DemoRegister-C7_qc4MJ.js")
+		lazy: () => import("./DemoRegister-YHPvPg77.js")
 	});
 	demoResetPassword = $page({
 		icon: IconLockQuestion,
 		path: "/reset-password",
 		label: "ResetPassword",
-		lazy: () => import("./DemoResetPassword-BI1Ct4Dw.js")
+		lazy: () => import("./DemoResetPassword-mOW18Zlm.js")
 	});
 	demoVerifyEmail = $page({
 		icon: IconMailCheck,
 		path: "/verify-email",
 		label: "VerifyEmail",
-		lazy: () => import("./DemoVerifyEmail-C_Irdnov.js")
+		lazy: () => import("./DemoVerifyEmail-D9EcXZ38.js")
 	});
 };
 

package/package.json

@@ -7,7 +7,7 @@
     "mantine"
   ],
   "author": "Nicolas Foures",
-  "version": "0.18.0",
+  "version": "0.18.2",
   "type": "module",
   "engines": {
     "node": ">=22.0.0"
@@ -40,7 +40,7 @@
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
     "@types/react-is": "^19.2.0",
-    "alepha": "0.18.0",
+    "alepha": "0.18.2",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "typescript": "^5.9.3",
@@ -48,7 +48,7 @@
     "vitest": "^4.0.18"
   },
   "peerDependencies": {
-    "alepha": "0.18.0",
+    "alepha": "0.18.2",
     "react": "*",
     "react-dom": "*"
   },
@@ -57,7 +57,7 @@
     "lint": "alepha lint && yarn build:check",
     "typecheck": "alepha typecheck",
     "test": "alepha test",
-    "build": "node scripts/build.ts",
+    "build": "node ../alepha/scripts/build.ts",
     "build:check": "node scripts/build.ts --check"
   },
   "repository": {

package/src/admin/{AdminRouter.ts → AdminRouter.tsx}

@@ -1,12 +1,23 @@
-import type { DashboardShellProps, SidebarNode } from "@alepha/ui";
-import { AuthRouter } from "@alepha/ui/auth";
+import {
+  type AppBarItem,
+  alephaSidebarAtom,
+  Breadcrumbs,
+  type DashboardShellProps,
+  LanguageButton,
+  type SidebarNode,
+  ThemeButton,
+} from "@alepha/ui";
+import { AuthRouter, UserButton } from "@alepha/ui/auth";
 import {
   IconClock,
+  IconDashboard,
   IconDevices,
   IconFile,
   IconHistory,
   IconKey,
+  IconLayoutDashboard,
   IconListDetails,
+  IconLockPassword,
   IconSettings,
   IconTerminal2,
   IconUser,
@@ -25,6 +36,7 @@ import type {
 } from "alepha/api/users";
 import { ReactAuth } from "alepha/react/auth";
 import { $page, ReactRouter, Redirection } from "alepha/react/router";
+import { $cookie } from "alepha/server/cookies";
 import { $client } from "alepha/server/links";
 
 export class AdminRouter {
@@ -40,31 +52,90 @@ export class AdminRouter {
   protected readonly jobCtrl = $client<AdminJobController>();
   protected readonly apiKeyCtrl = $client<AdminApiKeyController>();
 
+  public readonly adminCookie = $cookie(alephaSidebarAtom, {
+    name: "admin.sidebar",
+  });
+
   public configFn?: (adminRouter: AdminRouter) => DashboardShellProps = () => {
     return {
       sidebarProps: {
         items: this.getDefaultSidebarItems(),
       },
+      appBarProps: {
+        items: this.getDefaultAppBarItems(),
+      },
     };
   };
 
+  public getDefaultAppBarItems(): AppBarItem[] {
+    return [
+      {
+        type: "burger",
+        position: "left",
+      },
+      {
+        element: <Breadcrumbs />,
+        position: "left",
+      },
+      {
+        element: <UserButton />,
+        position: "right",
+      },
+      {
+        element: <ThemeButton expert />,
+        position: "right",
+      },
+      {
+        element: <LanguageButton />,
+        position: "right",
+      },
+      {
+        type: "dark",
+        position: "right",
+      },
+    ];
+  }
+
   public getDefaultSidebarItems(): SidebarNode[] {
     return [
+      {
+        position: "top",
+        type: "search",
+      },
+      {
+        position: "top",
+        type: "spacer",
+      },
+      {
+        label: "Dashboard",
+        href: "/admin",
+        icon: IconLayoutDashboard,
+      },
       {
         type: "section",
-        label: "Identity",
+        label: "Security",
         children: [
           {
-            ...this.router.node(this.adminUsers.name),
-            can: () => this.userCtrl.findUsers.can(),
-          },
-          {
-            ...this.router.node(this.adminSessions.name),
-            can: () => this.sessionCtrl.findSessions.can(),
+            label: "Identity",
+            icon: IconLockPassword,
+            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(),
+              },
+            ],
           },
           {
-            ...this.router.node(this.adminApiKeys.name),
-            can: () => this.apiKeyCtrl.findApiKeys.can(),
+            ...this.router.node(this.adminAudits.name),
+            can: () => this.auditCtrl.findAudits.can(),
           },
         ],
       },
@@ -77,9 +148,8 @@ export class AdminRouter {
             can: () => this.fileCtrl.findFiles.can(),
           },
           {
-            ...this.router.node(this.adminJobDashboard.name),
-            href: undefined,
-            can: () => this.jobCtrl.getJobRegistry.can(),
+            label: "Jobs",
+            icon: IconTerminal2,
             children: [
               {
                 ...this.router.node(this.adminJobDashboard.name),
@@ -89,10 +159,6 @@ export class AdminRouter {
               { ...this.router.node(this.adminJobExecutions.name) },
             ],
           },
-          {
-            ...this.router.node(this.adminAudits.name),
-            can: () => this.auditCtrl.findAudits.can(),
-          },
           {
             ...this.router.node(this.adminParameters.name),
             can: () => this.paramCtrl.getParameterTree.can(),
@@ -126,6 +192,10 @@ export class AdminRouter {
   public readonly adminLayout = $page({
     path: "/admin",
     label: "Admin",
+    head: {
+      title: "Admin Panel",
+      titleSeparator: " | ",
+    },
     lazy: () => import("./components/AdminLayout.tsx"),
     props: () => ({
       adminShellProps: this.adminShellProps(),
@@ -138,6 +208,18 @@ export class AdminRouter {
     },
   });
 
+  // ─────────────────────────────────────────────────────────────────────────────
+  // Dashboard
+  // ─────────────────────────────────────────────────────────────────────────────
+
+  public readonly adminDashboard = $page({
+    icon: IconLayoutDashboard,
+    parent: this.adminLayout,
+    path: "/",
+    label: "Dashboard",
+    lazy: () => import("./components/AdminDashboard.tsx"),
+  });
+
   // ─────────────────────────────────────────────────────────────────────────────
   // Users
   // ─────────────────────────────────────────────────────────────────────────────
@@ -147,6 +229,9 @@ export class AdminRouter {
     parent: this.adminLayout,
     path: "/users",
     label: "Users",
+    head: {
+      title: "Users",
+    },
     description: "Manage application users and their roles.",
     lazy: () => import("./components/users/AdminUsers.tsx"),
     can: () => this.userCtrl.findUsers.can(),
@@ -155,6 +240,9 @@ export class AdminRouter {
   public readonly adminUserLayout = $page({
     parent: this.adminLayout,
     path: "/users/:userId",
+    head: {
+      title: "Users",
+    },
     lazy: () => import("./components/users/AdminUserLayout.tsx"),
   });
 
@@ -163,6 +251,9 @@ export class AdminRouter {
     parent: this.adminUserLayout,
     path: "/",
     label: "Profile",
+    head: {
+      title: "User Profile",
+    },
     lazy: () => import("./components/users/AdminUserProfile.tsx"),
   });
 
@@ -171,6 +262,9 @@ export class AdminRouter {
     parent: this.adminUserLayout,
     path: "/sessions",
     label: "Sessions",
+    head: {
+      title: "User Sessions",
+    },
     lazy: () => import("./components/users/AdminUserSessions.tsx"),
   });
 
@@ -183,6 +277,9 @@ export class AdminRouter {
     parent: this.adminLayout,
     path: "/audits",
     label: "Audit Log",
+    head: {
+      title: "Audit Logs",
+    },
     description: "View system-wide audit trail and activity logs.",
     lazy: () => import("./components/audits/AdminAudits.tsx"),
     can: () => this.auditCtrl.findAudits.can(),
@@ -198,6 +295,9 @@ export class AdminRouter {
     path: "/sessions",
     label: "Sessions",
     description: "View and manage all active sessions.",
+    head: {
+      title: "Sessions",
+    },
     lazy: () => import("./components/sessions/AdminSessions.tsx"),
     can: () => this.sessionCtrl.findSessions.can(),
   });
@@ -212,6 +312,9 @@ export class AdminRouter {
     path: "/files",
     label: "Files",
     description: "Manage uploaded files and storage.",
+    head: {
+      title: "Files",
+    },
     lazy: () => import("./components/files/AdminFiles.tsx"),
     can: () => this.fileCtrl.findFiles.can(),
   });
@@ -228,6 +331,9 @@ export class AdminRouter {
     description: "View and manage application parameters.",
     lazy: () => import("./components/parameters/AdminParameters.tsx"),
     can: () => this.paramCtrl.getParameterTree.can(),
+    head: {
+      title: "Parameters",
+    },
     loader: async () => {
       const treeData = await this.paramCtrl.getParameterTree({});
       return { treeData };
@@ -239,7 +345,7 @@ export class AdminRouter {
   // ─────────────────────────────────────────────────────────────────────────────
 
   public readonly adminJobDashboard = $page({
-    icon: IconTerminal2,
+    icon: IconDashboard,
     parent: this.adminLayout,
     path: "/jobs",
     label: "Jobs",
@@ -277,6 +383,9 @@ export class AdminRouter {
     parent: this.adminLayout,
     path: "/api-keys",
     label: "API Keys",
+    head: {
+      title: "API Keys",
+    },
     description: "View and manage API keys for programmatic access.",
     lazy: () => import("./components/keys/AdminApiKeys.tsx"),
     can: () => this.apiKeyCtrl.findApiKeys.can(),

package/src/admin/components/AdminDashboard.tsx

@@ -0,0 +1,52 @@
+import { Flex, Text } from "@alepha/ui";
+import { useAuth } from "alepha/react/auth";
+
+// ─────────────────────────────────────────────────────────────────────────────
+
+const AdminDashboard = () => {
+  const auth = useAuth();
+
+  return (
+    <Flex elevated fill col pos="relative" style={{ overflow: "hidden" }}>
+      <Flex
+        bg="yellow"
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width: 256,
+          height: 256,
+          borderRadius: "50%",
+          transform: "translate(-50%, -50%)",
+          pointerEvents: "none",
+        }}
+      />
+
+      {/* Header */}
+      <Flex gap={4} p={128} pb="xl" style={{ zIndex: 1 }}>
+        <Flex col pos={"relative"}>
+          <Text muted bold small uppercase>
+            Account Home
+          </Text>
+          <Text
+            top={10}
+            pos={"absolute"}
+            left={-20}
+            fz={42}
+            c={"yellow"}
+            style={{ transform: "rotate(-15deg)" }}
+          >
+            !
+          </Text>
+          <Text fz={36}>Hello, {auth.user?.name ?? "Admin"}</Text>
+          <Text muted>
+            This is your admin dashboard. You can manage resources from the
+            sidebar menu.
+          </Text>
+        </Flex>
+      </Flex>
+    </Flex>
+  );
+};
+
+export default AdminDashboard;

package/src/admin/components/AdminLayout.tsx

@@ -1,15 +1,13 @@
 import {
   ActionButton,
   AlephaMantineProvider,
-  Breadcrumbs,
   DashboardShell,
   type DashboardShellProps,
-  LanguageButton,
   SidebarCollapseButton,
-  ThemeButton,
+  Text,
+  ui,
 } from "@alepha/ui";
-import { UserButton } from "@alepha/ui/auth";
-import { Flex } from "@mantine/core";
+import { Flex, Image } from "@mantine/core";
 import { IconArrowLeft } from "@tabler/icons-react";
 
 export interface AdminLayoutProps {
@@ -33,45 +31,39 @@ const AdminLayout = (props: AdminLayoutProps) => {
     >
       <DashboardShell
         layout={"alt"}
-        navbarHeader={
-          <Flex px={"lg"} align={"center"} justify={"center"}>
-            <ActionButton variant={"subtle"} icon={IconArrowLeft} href={"/"} />
+        navbarHeader={(props) => (
+          <Flex gap={"md"} flex={1} px={"lg"} align={"center"}>
+            <ActionButton
+              href={"/"}
+              variant={"default"}
+              bd={0}
+              icon={IconArrowLeft}
+            />
+            {!props.collapsed && (
+              <>
+                <Image pt={4} src={"/favicon.svg"} h={36} w={36} />
+                <Flex direction={"column"}>
+                  <Text bold>Blog</Text>
+                  <Text small muted mt={-4}>
+                    Admin Panel
+                  </Text>
+                </Flex>
+              </>
+            )}
           </Flex>
-        }
-        footerHeight={50}
+        )}
+        footerHeight={48}
         navbarFooter={
-          <Flex flex={1} px={"lg"} gap={"md"} align={"center"}>
-            <SidebarCollapseButton />
+          <Flex flex={1} px={"lg"} align={"center"}>
+            <SidebarCollapseButton
+              c={"gray"}
+              size={"xs"}
+              iconSize={ui.sizes.icon.sm}
+              p={8}
+              bd={0}
+            />
           </Flex>
         }
-        appBarProps={{
-          items: [
-            {
-              type: "burger",
-              position: "left",
-            },
-            {
-              element: <Breadcrumbs />,
-              position: "left",
-            },
-            {
-              element: <UserButton />,
-              position: "right",
-            },
-            {
-              element: <ThemeButton />,
-              position: "right",
-            },
-            {
-              element: <LanguageButton />,
-              position: "right",
-            },
-            {
-              type: "dark",
-              position: "right",
-            },
-          ],
-        }}
         sidebarProps={{
           autoPopulateMenu: {
             startsWith: "/admin",