@alepha/ui 0.16.1 → 0.17.0

package/src/core/components/form/TypeForm.tsx

@@ -39,6 +39,8 @@ export interface TypeFormProps<T extends TObject> {
 
   fill?: boolean;
   flexProps?: FlexProps;
+
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
 }
 
 /**
@@ -93,6 +95,7 @@ const TypeForm = <T extends TObject>(props: TypeFormProps<T>) => {
     skipSubmitButton = false,
     submitButtonProps,
     fill = true,
+    size,
   } = props;
 
   const schema = props.schema || form.options.schema;
@@ -163,6 +166,10 @@ const TypeForm = <T extends TObject>(props: TypeFormProps<T>) => {
             ...fieldControlProps?.[fieldName],
           };
 
+          if (size) {
+            mergedControlProps.size = size;
+          }
+
           return (
             <Grid.Col key={fieldName} span={span}>
               <Control input={field} {...mergedControlProps} />

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

@@ -72,6 +72,7 @@ const AlephaMantineProvider = (props: AlephaMantineProviderProps) => {
         {...props.mantine}
         defaultColorScheme={defaultColorScheme}
         theme={{
+          cursorType: "pointer",
           // Spread all theme properties from the selected theme
           ...theme,
           // User overrides take precedence

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

@@ -0,0 +1,91 @@
+import { Anchor, Flex, type FlexProps, Text } from "@mantine/core";
+import { IconChevronRight } from "@tabler/icons-react";
+import { Link, useRouter, useRouterState } from "alepha/react/router";
+import type { ReactNode } from "react";
+import { toTitleCase } from "../../utils/string.ts";
+
+export interface BreadcrumbProps extends FlexProps {
+  /**
+   * Label for the home/root crumb. Set to `false` to hide the root crumb.
+   *
+   * @default "Home"
+   */
+  home?: string | false;
+
+  /**
+   * Custom separator between crumbs.
+   *
+   * @default IconChevronRight
+   */
+  separator?: ReactNode;
+
+  /**
+   * Size of text and separator icons.
+   *
+   * @default "xs"
+   */
+  size?: string;
+}
+
+/**
+ * Automatic breadcrumb component that reads the current route hierarchy
+ * from the Alepha router's layer stack.
+ *
+ * Pages should define a `label` in their `$page()` options for best results.
+ * Falls back to the page name converted to Title Case.
+ */
+const Breadcrumb = ({
+  home = "Home",
+  separator,
+  size = "xs",
+  ...groupProps
+}: BreadcrumbProps) => {
+  const state = useRouterState();
+  const router = useRouter();
+
+  const crumbs: Array<{ label: string; href: string }> = [];
+
+  // Optionally add home crumb
+  if (home !== false) {
+    crumbs.push({ label: home, href: "/" });
+  }
+
+  // Build crumbs from layers, skipping the root layout (index 0)
+  for (let i = 1; i < state.layers.length; i++) {
+    const layer = state.layers[i];
+    const route = layer.route as any;
+
+    // Skip index routes (path "/") — they share the parent URL
+    if (route?.path === "/" || route?.path === "") continue;
+
+    const label = route?.label ?? toTitleCase(layer.name);
+    // Use router.path() to resolve dynamic params (e.g. :userId → 3)
+    const href = router.path(layer.name);
+    crumbs.push({ label, href });
+  }
+
+  if (crumbs.length === 0) return null;
+
+  const sep = separator ?? <IconChevronRight size={12} color="#9ca3af" />;
+
+  return (
+    <Flex gap={4} {...groupProps}>
+      {crumbs.map((crumb, i) => (
+        <Flex key={crumb.href} gap={4}>
+          {i > 0 && sep}
+          {i < crumbs.length - 1 ? (
+            <Anchor component={Link} href={crumb.href} size={size} c="dimmed">
+              {crumb.label}
+            </Anchor>
+          ) : (
+            <Text size={size} fw={500}>
+              {crumb.label}
+            </Text>
+          )}
+        </Flex>
+      ))}
+    </Flex>
+  );
+};
+
+export default Breadcrumb;

package/src/core/components/layout/{AdminShell.tsx → DashboardShell.tsx}

@@ -19,7 +19,6 @@ import {
   useState,
 } from "react";
 import { alephaSidebarAtom } from "../../atoms/alephaSidebarAtom.ts";
-import { ui } from "../../constants/ui.ts";
 import AppBar, { type AppBarProps } from "./AppBar.tsx";
 import {
   Sidebar,
@@ -27,7 +26,7 @@ import {
   type SidebarProps,
 } from "./Sidebar.tsx";
 
-export interface AdminShellProps {
+export interface DashboardShellProps {
   appShellProps?: Partial<AppShellProps>;
   appShellMainProps?: Partial<AppShellMainProps>;
   appShellHeaderProps?: Partial<AppShellHeaderProps>;
@@ -39,6 +38,35 @@ export interface AdminShellProps {
   footer?: ReactNode;
   children?: ReactNode;
 
+  /**
+   * AppShell layout mode.
+   * - "default": header/footer span full width, navbar below header.
+   * - "alt": navbar is full height, header/footer offset by navbar width.
+   */
+  layout?: "default" | "alt";
+
+  /**
+   * Content rendered above the Sidebar inside the navbar (e.g. logo).
+   */
+  navbarHeader?: ReactNode;
+
+  /**
+   * Content rendered below the Sidebar inside the navbar (e.g. toggle button).
+   */
+  navbarFooter?: ReactNode;
+
+  /**
+   * Height of the header bar in pixels.
+   * @default 60
+   */
+  headerHeight?: number;
+
+  /**
+   * Height of the footer bar in pixels.
+   * @default 24
+   */
+  footerHeight?: number;
+
   /**
    * Enable drag-to-resize for the sidebar.
    * Width and constraints are configured in alephaSidebarAtom.
@@ -59,17 +87,14 @@ export interface AdminShellProps {
   container?: boolean | ContainerProps;
 }
 
-const AdminShell = (props: AdminShellProps) => {
+const DashboardShell = (props: DashboardShellProps) => {
   const router = useRouter();
   const [sidebar, setSidebar] = useStore(alephaSidebarAtom);
-  const { opened, collapsed } = sidebar;
-
-  // Initialize collapsed state from props on mount
-  useEffect(() => {
-    if (props.sidebarProps?.collapsed !== undefined) {
-      setSidebar({ ...sidebar, collapsed: props.sidebarProps.collapsed });
-    }
-  }, []);
+  const { opened } = sidebar;
+  const collapsed =
+    props.sidebarProps?.collapsed !== undefined
+      ? props.sidebarProps.collapsed
+      : sidebar.collapsed;
 
   // Resize state
   const [isResizing, setIsResizing] = useState(false);
@@ -169,13 +194,15 @@ const AdminShell = (props: AdminShellProps) => {
   // Hover to expand when collapsed (with delay)
   const hoverTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
+  const expandOnHover = props.sidebarProps?.expandOnHover !== false;
+
   const handleNavbarMouseEnter = useCallback(() => {
-    if (collapsed) {
+    if (collapsed && expandOnHover) {
       hoverTimeoutRef.current = setTimeout(() => {
         setIsHovering(true);
       }, hoverDelay);
     }
-  }, [collapsed, hoverDelay]);
+  }, [collapsed, expandOnHover, hoverDelay]);
 
   const handleNavbarMouseLeave = useCallback(() => {
     if (hoverTimeoutRef.current) {
@@ -235,10 +262,12 @@ const AdminShell = (props: AdminShellProps) => {
   appBarProps.container ??= props.container;
 
   const hasSidebar = showSidebar && props.sidebarProps !== undefined;
-  const hasAppBar = hasSidebar || props.appBarProps || props.header;
+  const hasAppBar = props.appBarProps || props.header;
 
-  const headerHeight = hasAppBar ? 60 : 0;
-  const footerHeight = props.footer ? 24 : 0;
+  const hHeight = props.headerHeight ?? 60;
+  const fHeight = props.footerHeight ?? 24;
+  const headerHeight = hasAppBar ? hHeight : 0;
+  const footerHeight = props.footer ? fHeight : 0;
   const expandedWidth = Math.max(sidebar.width, collapsedWidth);
 
   // When collapsed but hovering, show defaultWidth (not current width)
@@ -266,10 +295,10 @@ const AdminShell = (props: AdminShellProps) => {
 
   return (
     <AppShell
+      layout={props.layout}
       w={"100%"}
       flex={1}
-      padding="md"
-      header={hasAppBar ? { height: 60 } : undefined}
+      header={hasAppBar ? { height: hHeight } : undefined}
       navbar={
         hasSidebar
           ? {
@@ -283,16 +312,19 @@ const AdminShell = (props: AdminShellProps) => {
             }
           : undefined
       }
-      footer={props.footer ? { height: 24 } : undefined}
+      footer={props.footer ? { height: fHeight } : undefined}
       {...props.appShellProps}
     >
-      <AppShell.Header bg={ui.colors.surface} {...props.appShellHeaderProps}>
-        {props.header ?? <AppBar items={defaultAppBarItems} {...appBarProps} />}
-      </AppShell.Header>
+      {hasAppBar && (
+        <AppShell.Header {...props.appShellHeaderProps}>
+          {props.header ?? (
+            <AppBar items={defaultAppBarItems} {...appBarProps} />
+          )}
+        </AppShell.Header>
+      )}
 
       {hasSidebar && (
         <AppShell.Navbar
-          bg={ui.colors.surface}
           className="alepha-sidebar-navbar"
           data-resizing={isResizing}
           data-hover-expanded={isExpandedByHover}
@@ -312,11 +344,31 @@ const AdminShell = (props: AdminShellProps) => {
           }}
           {...props.appShellNavbarProps}
         >
+          {props.navbarHeader ? (
+            <Flex
+              style={{
+                borderBottom: "1px solid var(--mantine-color-default-border)",
+              }}
+              h={headerHeight}
+            >
+              {props.navbarHeader}
+            </Flex>
+          ) : null}
           <Sidebar
             {...(props.sidebarProps ?? {})}
             collapsed={effectiveCollapsed}
             onItemClick={handleSidebarItemClick}
           />
+          {props.navbarFooter ? (
+            <Flex
+              style={{
+                borderTop: "1px solid var(--mantine-color-default-border)",
+              }}
+              h={footerHeight}
+            >
+              {props.navbarFooter}
+            </Flex>
+          ) : null}
           {(canResize || isExpandedByHover) && (
             <Flex
               pos="absolute"
@@ -335,13 +387,6 @@ const AdminShell = (props: AdminShellProps) => {
       )}
 
       <AppShell.Main
-        pl={sidebarWidth}
-        pt={headerHeight}
-        pb={footerHeight}
-        pr={0}
-        display={"flex"}
-        flex={1}
-        style={{ flexDirection: "column" }}
         className="alepha-sidebar-main"
         data-resizing={isResizing}
         {...props.appShellMainProps}
@@ -362,7 +407,7 @@ const AdminShell = (props: AdminShellProps) => {
       </AppShell.Main>
 
       {props.footer && (
-        <AppShell.Footer bg={ui.colors.surface} {...props.appShellFooterProps}>
+        <AppShell.Footer {...props.appShellFooterProps}>
           {props.footer}
         </AppShell.Footer>
       )}
@@ -370,4 +415,4 @@ const AdminShell = (props: AdminShellProps) => {
   );
 };
 
-export default AdminShell;
+export default DashboardShell;

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

@@ -2,6 +2,7 @@ import { Spotlight, type SpotlightActionData } from "@mantine/spotlight";
 import { IconSearch } from "@tabler/icons-react";
 import { useStore } from "alepha/react";
 import { useRouter } from "alepha/react/router";
+import { currentUserAtom } from "alepha/security";
 import { type ReactNode, useMemo } from "react";
 import { ui } from "../../constants/ui.ts";
 import { renderIcon } from "../../helpers/renderIcon.tsx";
@@ -19,7 +20,7 @@ const Omnibar = (props: OmnibarProps) => {
   const router = useRouter();
 
   // watch user to re-render on permission changes
-  const [user] = useStore("alepha.server.request.user");
+  const [user] = useStore(currentUserAtom);
 
   const actions: SpotlightActionData[] = useMemo(
     () =>

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

@@ -13,11 +13,13 @@ import { useEvents } from "alepha/react";
 import { useRouter } from "alepha/react/router";
 import {
   type ComponentType,
+  Fragment,
   type ReactNode,
   useCallback,
   useMemo,
   useState,
 } from "react";
+import { ui } from "../../constants/ui.ts";
 import { renderIcon } from "../../helpers/renderIcon.tsx";
 import ActionButton, { type ActionProps } from "../buttons/ActionButton.tsx";
 import OmnibarButton from "../buttons/OmnibarButton.tsx";
@@ -35,6 +37,12 @@ export interface SidebarProps {
     paths?: string[];
   };
 
+  /**
+   * Whether the sidebar expands on hover when collapsed.
+   * @default true
+   */
+  expandOnHover?: boolean;
+
   /**
    * Automatically populate the menu from the router's pages.
    */
@@ -49,19 +57,25 @@ export const Sidebar = (props: SidebarProps) => {
   const router = useRouter();
   const { onItemClick } = props;
 
-  const divider = (key: string | number) => {
+  const divider = (key: string | number, fill?: boolean) => {
     return (
       <Flex
         key={key}
         h={1}
-        bg={"var(--alepha-border)"}
+        bg={"var(--mantine-color-default-border)"}
         my={"xs"}
-        mx={props.collapsed ? 0 : "sm"}
+        mx={
+          fill
+            ? "calc(-1 * var(--mantine-spacing-md))"
+            : props.collapsed
+              ? 0
+              : "sm"
+        }
       />
     );
   };
 
-  const renderNode = (item: SidebarNode, key: number) => {
+  const renderNode = (item: SidebarNode, key: number | string) => {
     if ("type" in item) {
       // Hide spacers when collapsed
       if (item.type === "spacer") {
@@ -70,7 +84,7 @@ export const Sidebar = (props: SidebarProps) => {
       }
 
       if (item.type === "divider") {
-        return divider(key);
+        return divider(key, item.fill);
       }
 
       if (item.type === "search") {
@@ -85,24 +99,45 @@ export const Sidebar = (props: SidebarProps) => {
         return <ToggleSidebarButton key={key} />;
       }
 
+      // Replace sections with dividers when collapsed
       // Replace sections with dividers when collapsed
       if (item.type === "section") {
+        // Hide section if all children are hidden
+        if (item.children && item.children.length > 0) {
+          const hasVisibleChild = item.children.some(
+            (child) => !("can" in child) || !child.can || child.can(),
+          );
+          if (!hasVisibleChild) return null;
+        }
+
         if (props.collapsed) {
-          return divider(key);
+          return (
+            <Fragment key={key}>
+              {divider(`${key}-d`)}
+              {item.children?.map((child, index) =>
+                renderNode(child, `s${key}-${index}`),
+              )}
+            </Fragment>
+          );
         }
         return (
-          <Flex key={key} mt={"md"} align={"center"} gap={"xs"}>
-            {renderIcon(item.icon)}
-            <Text size={"xs"} c={"dimmed"} tt={"uppercase"} fw={"bold"}>
-              {item.label}
-            </Text>
-          </Flex>
+          <Fragment key={key}>
+            <Flex mt={"md"} align={"center"} gap={"xs"}>
+              {renderIcon(item.icon, ui.sizes.icon.sm)}
+              <Text size={"xs"} c={"dimmed"} tt={"uppercase"} fw={"bold"}>
+                {item.label}
+              </Text>
+            </Flex>
+            {item.children?.map((child, index) =>
+              renderNode(child, `s${key}-${index}`),
+            )}
+          </Fragment>
         );
       }
     }
 
     if ("element" in item) {
-      return <Flex key={key}>{item.element}</Flex>;
+      return <Fragment key={key}>{item.element}</Fragment>;
     }
 
     // Check visibility control
@@ -167,7 +202,7 @@ export const Sidebar = (props: SidebarProps) => {
   };
 
   const padding = "md";
-  const gap = props.items ? (props.gap ?? 2) : "xs";
+  const gap = props.items ? (props.gap ?? 4) : "xs";
   const menu = useMemo(
     () => getSidebarNodes(),
     [props.items, props.autoPopulateMenu],
@@ -275,8 +310,11 @@ export const SidebarItem = (props: SidebarItemProps) => {
           props.theme.button?.size ??
           (level === 0 ? "sm" : "xs")
         }
-        tooltip={item.description}
-        c={"var(--mantine-color-text)"}
+        tooltip={
+          item.description
+            ? { label: item.description, position: "right" }
+            : undefined
+        }
         color={"gray"}
         variant={"subtle"}
         variantActive={"default"}
@@ -284,7 +322,7 @@ export const SidebarItem = (props: SidebarItemProps) => {
         onClick={handleItemClick}
         leftSection={
           <Flex w={"100%"} align="center" gap={"sm"}>
-            {renderIcon(item.icon)}
+            {renderIcon(item.icon, ui.sizes.icon.sm)}
             <Flex direction={"column"}>
               <Flex>{item.label}</Flex>
             </Flex>
@@ -313,7 +351,7 @@ export const SidebarItem = (props: SidebarItemProps) => {
               position: "absolute",
               width: 1,
               background:
-                "linear-gradient(to bottom, transparent, var(--alepha-border), transparent)",
+                "linear-gradient(to bottom, transparent, var(--mantine-color-default-border), transparent)",
               top: 48,
               left: 20 + 32 * level,
               bottom: 16,
@@ -368,7 +406,11 @@ const SidebarCollapsedItem = (props: SidebarItemProps) => {
       }}
       radius={props.item.theme?.radius ?? props.theme.button?.radius ?? "md"}
       onClick={handleItemClick}
-      icon={renderIcon(item.icon) ?? <IconSquareRounded />}
+      icon={
+        renderIcon(item.icon, ui.sizes.icon.sm) ?? (
+          <IconSquareRounded size={ui.sizes.icon.sm} />
+        )
+      }
       href={props.item.href as any}
       target={props.item.target}
       {...props.item.actionProps}
@@ -401,6 +443,7 @@ export interface SidebarSpacer extends SidebarAbstractItem {
 
 export interface SidebarDivider extends SidebarAbstractItem {
   type: "divider";
+  fill?: true;
 }
 
 export interface SidebarSearch extends SidebarAbstractItem {
@@ -415,6 +458,7 @@ export interface SidebarSection extends SidebarAbstractItem {
   type: "section";
   label: string;
   icon?: ReactNode | ComponentType;
+  children?: SidebarNode[];
 }
 
 export interface SidebarMenuItem extends SidebarAbstractItem {

package/src/core/components/table/ColumnPicker.tsx

@@ -1,18 +1,14 @@
-import {
-  Button,
-  Checkbox,
-  Group,
-  Popover,
-  ScrollArea,
-  Stack,
-  Text,
-} from "@mantine/core";
+import { Checkbox, Flex, Popover, ScrollArea, Text } from "@mantine/core";
 import { IconColumns } from "@tabler/icons-react";
 import type { TObject } from "alepha";
 import { useState } from "react";
 import { ui } from "../../constants/ui.ts";
 import ActionButton from "../buttons/ActionButton.tsx";
-import type { ColumnVisibility, DataTableColumn } from "./types.ts";
+import {
+  type ColumnVisibility,
+  type DataTableColumn,
+  DEFAULT_MAX_VISIBLE_COLUMNS,
+} from "./types.ts";
 
 export interface ColumnPickerProps<T extends object, Filters extends TObject> {
   columns: { [key: string]: DataTableColumn<T, Filters> };
@@ -36,11 +32,19 @@ const ColumnPicker = <T extends object, Filters extends TObject>({
     onVisibilityChange(newVisibility);
   };
 
-  const handleHideAll = () => {
-    const newVisibility = columnEntries.reduce(
-      (acc, [key]) => ({ ...acc, [key]: false }),
-      {} as ColumnVisibility,
-    );
+  const handleDefault = () => {
+    let count = 0;
+    const newVisibility = columnEntries.reduce((acc, [key, col]) => {
+      if (col.defaultHidden) {
+        acc[key] = false;
+      } else if (count < DEFAULT_MAX_VISIBLE_COLUMNS) {
+        acc[key] = true;
+        count++;
+      } else {
+        acc[key] = false;
+      }
+      return acc;
+    }, {} as ColumnVisibility);
     onVisibilityChange(newVisibility);
   };
 
@@ -71,7 +75,13 @@ const ColumnPicker = <T extends object, Filters extends TObject>({
       }}
     >
       <Popover.Target>
-        <ActionButton variant="subtle" icon={IconColumns} />
+        <div>
+          <ActionButton
+            variant="subtle"
+            icon={IconColumns}
+            onClick={() => setOpened((o) => !o)}
+          />
+        </div>
       </Popover.Target>
       <Popover.Dropdown
         bg="transparent"
@@ -81,43 +91,49 @@ const ColumnPicker = <T extends object, Filters extends TObject>({
           backdropFilter: "blur(20px)",
         }}
       >
-        <Stack gap="xs" bg={ui.colors.surface} p="sm" bdrs="sm">
-          <Group justify="space-between">
+        <Flex
+          direction="column"
+          gap="xs"
+          bg={ui.colors.surface}
+          p="sm"
+          bdrs="sm"
+        >
+          <Flex justify="space-between">
             <Text size="sm" fw={500}>
               Columns ({visibleCount}/{columnEntries.length})
             </Text>
-            <Group gap={4}>
-              <Button
+            <Flex gap={4}>
+              <ActionButton
                 size="compact-xs"
                 variant="subtle"
                 onClick={handleShowAll}
               >
                 All
-              </Button>
-              <Button
+              </ActionButton>
+              <ActionButton
                 size="compact-xs"
                 variant="subtle"
-                onClick={handleHideAll}
+                onClick={handleDefault}
               >
-                None
-              </Button>
-            </Group>
-          </Group>
+                Default
+              </ActionButton>
+            </Flex>
+          </Flex>
 
           <ScrollArea.Autosize mah={300}>
-            <Stack gap={4}>
+            <Flex direction="column" gap={4}>
               {columnEntries.map(([key, col]) => (
                 <Checkbox
                   key={key}
-                  label={col.label}
+                  label={col.label || key}
                   checked={visibility[key] !== false}
                   onChange={(e) => handleToggle(key, e.currentTarget.checked)}
                   size="sm"
                 />
               ))}
-            </Stack>
+            </Flex>
           </ScrollArea.Autosize>
-        </Stack>
+        </Flex>
       </Popover.Dropdown>
     </Popover>
   );