@alepha/ui 0.15.1 → 0.15.3

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

@@ -1,15 +1,16 @@
-import { useStore } from "@alepha/react";
 import { Burger, type BurgerProps } from "@mantine/core";
+import { useStore } from "alepha/react";
+import { alephaSidebarAtom } from "../../atoms/alephaSidebarAtom.ts";
 
 export interface BurgerButtonProps extends BurgerProps {}
 
 const BurgerButton = (props: BurgerButtonProps) => {
-  const [opened, setOpened] = useStore("alepha.ui.sidebar.opened");
+  const [sidebar, setSidebar] = useStore(alephaSidebarAtom);
 
   return (
     <Burger
-      opened={opened}
-      onClick={() => setOpened(!opened)}
+      opened={sidebar.opened}
+      onClick={() => setSidebar({ ...sidebar, opened: !sidebar.opened })}
       hiddenFrom="sm"
       size="sm"
       {...props}

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

@@ -1,5 +1,5 @@
-import { useI18n } from "@alepha/react/i18n";
 import { IconLanguage } from "@tabler/icons-react";
+import { useI18n } from "alepha/react/i18n";
 import ActionButton, { type ActionProps } from "./ActionButton.tsx";
 
 export interface LanguageButtonProps {

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

@@ -1,6 +1,8 @@
 import { Flex, Kbd, Text } from "@mantine/core";
+import { useOs } from "@mantine/hooks";
 import { spotlight } from "@mantine/spotlight";
 import { IconSearch } from "@tabler/icons-react";
+import { ClientOnly } from "alepha/react";
 import ActionButton, { type ActionProps } from "./ActionButton.tsx";
 
 export interface OmnibarButtonProps {
@@ -9,6 +11,23 @@ export interface OmnibarButtonProps {
 }
 
 const OmnibarButton = (props: OmnibarButtonProps) => {
+  const os = useOs();
+  const isMac = os === "macos" || os === "ios";
+  const shortcut = isMac ? "⌘" : "Ctrl";
+
+  if (props.collapsed) {
+    return (
+      <ActionButton
+        variant={"subtle"}
+        onClick={spotlight.open}
+        radius={"md"}
+        icon={<IconSearch size={16} />}
+        tooltip={{ label: "Search", position: "right" }}
+        {...props.actionProps}
+      />
+    );
+  }
+
   return (
     <ActionButton
       variant={"default"}
@@ -16,7 +35,7 @@ const OmnibarButton = (props: OmnibarButtonProps) => {
       justify={"space-between"}
       rightSection={
         <Kbd visibleFrom={"sm"} size={"sm"}>
-          ⌘+K
+          <ClientOnly>{shortcut}</ClientOnly>+K
         </Kbd>
       }
       radius={"md"}

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

@@ -1,5 +1,5 @@
-import { useStore } from "@alepha/react";
 import { IconPalette } from "@tabler/icons-react";
+import { useStore } from "alepha/react";
 import { alephaThemeListAtom } from "../../atoms/alephaThemeListAtom.ts";
 import { useTheme } from "../../hooks/useTheme.ts";
 import ActionButton, { type ActionProps } from "./ActionButton.tsx";

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

@@ -1,33 +1,43 @@
-import { useStore } from "@alepha/react";
-import { Flex } from "@mantine/core";
 import {
   IconLayoutSidebarLeftCollapse,
   IconLayoutSidebarRightCollapse,
 } from "@tabler/icons-react";
-import ActionButton from "./ActionButton.tsx";
+import { useStore } from "alepha/react";
+import { alephaSidebarAtom } from "../../atoms/alephaSidebarAtom.ts";
+import ActionButton, { type ActionProps } from "./ActionButton.tsx";
 
-const ToggleSidebarButton = () => {
-  const [collapsed, setCollapsed] = useStore("alepha.ui.sidebar.collapsed");
+type Props = ActionProps;
+
+const ToggleSidebarButton = (props: Props) => {
+  const [sidebar, setSidebar] = useStore(alephaSidebarAtom);
 
   return (
-    <Flex>
-      <ActionButton
-        icon={
-          collapsed ? (
-            <IconLayoutSidebarRightCollapse />
-          ) : (
-            <IconLayoutSidebarLeftCollapse />
-          )
-        }
-        variant={"subtle"}
-        size={"md"}
-        onClick={() => setCollapsed(!collapsed)}
-        tooltip={{
-          position: "right",
-          label: collapsed ? "Show sidebar" : "Hide sidebar",
-        }}
-      />
-    </Flex>
+    <ActionButton
+      icon={
+        sidebar.collapsed ? (
+          <IconLayoutSidebarRightCollapse />
+        ) : (
+          <IconLayoutSidebarLeftCollapse />
+        )
+      }
+      visibleFrom={"sm"}
+      variant={"subtle"}
+      size={"md"}
+      onClick={() => {
+        const expanding = sidebar.collapsed;
+        setSidebar({
+          ...sidebar,
+          collapsed: !sidebar.collapsed,
+          // Reset width to defaultWidth when expanding
+          width: expanding ? sidebar.defaultWidth : sidebar.width,
+        });
+      }}
+      tooltip={{
+        position: "right",
+        label: sidebar.collapsed ? "Show sidebar" : "Hide sidebar",
+      }}
+      {...props}
+    />
   );
 };
 

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

@@ -1,4 +1,3 @@
-import { useFormState } from "@alepha/react/form";
 import {
   ColorInput,
   type ColorInputProps,
@@ -20,6 +19,7 @@ import type {
   DateTimePickerProps,
   TimeInputProps,
 } from "@mantine/dates";
+import { useFormState } from "alepha/react/form";
 import type { ComponentType } from "react";
 import {
   type GenericControlProps,

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

@@ -1,5 +1,3 @@
-import { useEvents } from "@alepha/react";
-import type { BaseInputField } from "@alepha/react/form";
 import {
   ActionIcon,
   Fieldset,
@@ -11,6 +9,8 @@ import {
 } from "@mantine/core";
 import { IconGripVertical, IconPlus, IconTrash } from "@tabler/icons-react";
 import type { TObject, TSchema } from "alepha";
+import { useEvents } from "alepha/react";
+import type { BaseInputField } from "alepha/react/form";
 import { useRef, useState } from "react";
 import { ui } from "../../constants/ui.ts";
 import {

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

@@ -1,4 +1,3 @@
-import { useFormState } from "@alepha/react/form";
 import {
   DateInput,
   type DateInputProps,
@@ -7,6 +6,7 @@ import {
   TimeInput,
   type TimeInputProps,
 } from "@mantine/dates";
+import { useFormState } from "alepha/react/form";
 import {
   type GenericControlProps,
   parseInput,

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

@@ -1,5 +1,3 @@
-import { useEvents } from "@alepha/react";
-import { useFormState } from "@alepha/react/form";
 import {
   Input,
   NumberInput,
@@ -7,6 +5,8 @@ import {
   Slider,
   type SliderProps,
 } from "@mantine/core";
+import { useEvents } from "alepha/react";
+import { useFormState } from "alepha/react/form";
 import { useRef, useState } from "react";
 import {
   type GenericControlProps,

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

@@ -1,6 +1,6 @@
-import type { BaseInputField, ObjectInputField } from "@alepha/react/form";
 import { Fieldset, Grid, Stack, Text } from "@mantine/core";
 import type { TObject } from "alepha";
+import type { BaseInputField, ObjectInputField } from "alepha/react/form";
 import {
   type GenericControlProps,
   parseInput,

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

@@ -1,4 +1,3 @@
-import { useEvents } from "@alepha/react";
 import {
   ActionIcon,
   Badge,
@@ -14,6 +13,7 @@ import {
 import { IconFilter, IconInfoTriangle, IconX } from "@tabler/icons-react";
 import type { TObject } from "alepha";
 import { parseQueryString } from "alepha/orm";
+import { useEvents } from "alepha/react";
 import { useRef, useState } from "react";
 import { ui } from "../../constants/ui.ts";
 import {

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

@@ -1,4 +1,3 @@
-import { useFormState } from "@alepha/react/form";
 import {
   Autocomplete,
   type AutocompleteProps,
@@ -13,6 +12,7 @@ import {
   TagsInput,
   type TagsInputProps,
 } from "@mantine/core";
+import { useFormState } from "alepha/react/form";
 import { useEffect, useState } from "react";
 import {
   type GenericControlProps,

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

@@ -1,6 +1,6 @@
-import type { FormModel } from "@alepha/react/form";
 import { Card, Flex, type FlexProps, Grid } from "@mantine/core";
 import type { TObject } from "alepha";
+import type { FormModel } from "alepha/react/form";
 import type { ReactNode } from "react";
 import ActionButton, {
   type ActionSubmitButtonProps,
@@ -55,7 +55,7 @@ export interface TypeFormProps<T extends TObject> {
  * @example
  * ```tsx
  * import { t } from "alepha";
- * import { useForm } from "@alepha/react/form";
+ * import { useForm } from "alepha/react/form";
  * import { TypeForm } from "@alepha/ui";
  *
  * const form = useForm({

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

@@ -1,5 +1,3 @@
-import { useEvents, useStore } from "@alepha/react";
-import { NestedView, useRouter } from "@alepha/react/router";
 import {
   AppShell,
   type AppShellFooterProps,
@@ -7,8 +5,20 @@ import {
   type AppShellMainProps,
   type AppShellNavbarProps,
   type AppShellProps,
+  Container,
+  type ContainerProps,
+  Flex,
 } from "@mantine/core";
-import { type ReactNode, useState } from "react";
+import { useEvents, useStore } from "alepha/react";
+import { NestedView, useRouter } from "alepha/react/router";
+import {
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { alephaSidebarAtom } from "../../atoms/alephaSidebarAtom.ts";
 import { ui } from "../../constants/ui.ts";
 import AppBar, { type AppBarProps } from "./AppBar.tsx";
 import { Sidebar, type SidebarProps } from "./Sidebar.tsx";
@@ -25,36 +35,163 @@ export interface AdminShellProps {
   footer?: ReactNode;
   children?: ReactNode;
 
+  /**
+   * Enable drag-to-resize for the sidebar.
+   * Width and constraints are configured in alephaSidebarAtom.
+   */
+  sidebarResizable?: boolean;
+
   noSidebarWhen?: {
     /**
      * Paths where the sidebar should be hidden.
      */
     paths?: string[];
   };
-}
 
-declare module "alepha" {
-  interface State {
-    /**
-     * Whether the sidebar is opened or closed.
-     */
-    "alepha.ui.sidebar.opened"?: boolean;
-
-    /**
-     * Whether the sidebar is collapsed (narrow) or expanded (wide).
-     */
-    "alepha.ui.sidebar.collapsed"?: boolean;
-  }
+  /**
+   * 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) => {
   const router = useRouter();
-  const [opened, setOpened] = useStore("alepha.ui.sidebar.opened");
-  const [collapsed] = useStore(
-    "alepha.ui.sidebar.collapsed",
-    props.sidebarProps?.collapsed,
+  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 });
+    }
+  }, []);
+
+  // Resize state
+  const [isResizing, setIsResizing] = useState(false);
+  const [isHovering, setIsHovering] = useState(false);
+  const [collapseEffect, setCollapseEffect] = useState({
+    offset: 0,
+    opacity: 1,
+  });
+  const resizeRef = useRef<{ startX: number; startWidth: number } | null>(null);
+
+  // Use atom values for constraints
+  const {
+    collapsedWidth,
+    collapseThreshold,
+    maxWidth,
+    hoverDelay,
+    defaultWidth,
+  } = sidebar;
+
+  const handleResizeStart = useCallback(
+    (e: React.MouseEvent) => {
+      if (!props.sidebarResizable) return;
+      e.preventDefault();
+
+      // If collapsed and hovering, un-collapse first and start from defaultWidth
+      if (collapsed) {
+        setSidebar({ ...sidebar, collapsed: false, width: defaultWidth });
+        setIsResizing(true);
+        resizeRef.current = {
+          startX: e.clientX,
+          startWidth: defaultWidth,
+        };
+      } else {
+        setIsResizing(true);
+        resizeRef.current = {
+          startX: e.clientX,
+          startWidth: sidebar.width,
+        };
+      }
+    },
+    [props.sidebarResizable, collapsed, sidebar, setSidebar, defaultWidth],
   );
 
+  useEffect(() => {
+    if (!isResizing) return;
+
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!resizeRef.current) return;
+      const delta = e.clientX - resizeRef.current.startX;
+      const rawWidth = resizeRef.current.startWidth + delta;
+      const newWidth = Math.min(Math.max(rawWidth, collapsedWidth), maxWidth);
+
+      // Visual effect when below collapse threshold
+      if (rawWidth < collapseThreshold) {
+        const progress = Math.max(
+          0,
+          (collapseThreshold - rawWidth) / collapseThreshold,
+        );
+        setCollapseEffect({
+          offset: -progress * collapsedWidth,
+          opacity: 1 - progress * 0.7,
+        });
+        setSidebar({ ...sidebar, width: collapseThreshold, collapsed: false });
+      } else {
+        setCollapseEffect({ offset: 0, opacity: 1 });
+        setSidebar({ ...sidebar, width: newWidth, collapsed: false });
+      }
+    };
+
+    const handleMouseUp = () => {
+      // If we released while in collapse zone, actually collapse
+      if (collapseEffect.offset < 0) {
+        setSidebar({ ...sidebar, collapsed: true });
+      }
+      setCollapseEffect({ offset: 0, opacity: 1 });
+      setIsResizing(false);
+      resizeRef.current = null;
+    };
+
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [
+    isResizing,
+    sidebar,
+    setSidebar,
+    collapsedWidth,
+    maxWidth,
+    collapseThreshold,
+    collapseEffect.offset,
+  ]);
+
+  // Hover to expand when collapsed (with delay)
+  const hoverTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const handleNavbarMouseEnter = useCallback(() => {
+    if (collapsed) {
+      hoverTimeoutRef.current = setTimeout(() => {
+        setIsHovering(true);
+      }, hoverDelay);
+    }
+  }, [collapsed, hoverDelay]);
+
+  const handleNavbarMouseLeave = useCallback(() => {
+    if (hoverTimeoutRef.current) {
+      clearTimeout(hoverTimeoutRef.current);
+      hoverTimeoutRef.current = null;
+    }
+    setIsHovering(false);
+  }, []);
+
+  // Reset hover state when collapsed changes (e.g., when toggle button is clicked)
+  useEffect(() => {
+    if (collapsed) {
+      setIsHovering(false);
+      if (hoverTimeoutRef.current) {
+        clearTimeout(hoverTimeoutRef.current);
+        hoverTimeoutRef.current = null;
+      }
+    }
+  }, [collapsed]);
+
   const shouldShowSidebar = () => {
     if (props.noSidebarWhen?.paths) {
       for (const path of props.noSidebarWhen.paths) {
@@ -78,10 +215,10 @@ const AdminShell = (props: AdminShellProps) => {
         setShowSidebar(shouldShowSidebar());
       },
       "react:transition:begin": () => {
-        setOpened(false);
+        setSidebar({ ...sidebar, opened: false });
       },
     },
-    [],
+    [sidebar],
   );
 
   // Default AppBar items with burger button on the left
@@ -89,12 +226,28 @@ 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;
 
   const headerHeight = hasAppBar ? 60 : 0;
   const footerHeight = props.footer ? 24 : 0;
-  const sidebarWidth = hasSidebar ? (collapsed ? 78 : 300) : 0;
+  const expandedWidth = Math.max(sidebar.width, collapsedWidth);
+
+  // When collapsed but hovering, show defaultWidth (not current width)
+  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 || isExpandedByHover
+      ? collapsedWidth
+      : expandedWidth
+    : 0;
+  const canResize = props.sidebarResizable && !collapsed;
 
   return (
     <AppShell
@@ -105,7 +258,11 @@ const AdminShell = (props: AdminShellProps) => {
       navbar={
         hasSidebar
           ? {
-              width: collapsed ? { base: 78 } : { base: 300 },
+              // When hovering, keep collapsed width to avoid pushing content
+              width:
+                effectiveCollapsed || isExpandedByHover
+                  ? { base: collapsedWidth }
+                  : { base: expandedWidth },
               breakpoint: "sm",
               collapsed: { mobile: !opened },
             }
@@ -115,14 +272,49 @@ 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 && (
-        <AppShell.Navbar bg={ui.colors.surface} {...props.appShellNavbarProps}>
-          <Sidebar collapsed={collapsed} {...(props.sidebarProps ?? {})} />
+        <AppShell.Navbar
+          bg={ui.colors.surface}
+          className="alepha-sidebar-navbar"
+          data-resizing={isResizing}
+          data-hover-expanded={isExpandedByHover}
+          onMouseEnter={handleNavbarMouseEnter}
+          onMouseLeave={handleNavbarMouseLeave}
+          style={{
+            transform: collapseEffect.offset
+              ? `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}
+        >
+          <Sidebar
+            {...(props.sidebarProps ?? {})}
+            collapsed={effectiveCollapsed}
+          />
+          {(canResize || isExpandedByHover) && (
+            <Flex
+              pos="absolute"
+              right={-6}
+              top={0}
+              bottom={0}
+              w={12}
+              style={{
+                cursor: "col-resize",
+                userSelect: "none",
+              }}
+              onMouseDown={handleResizeStart}
+            />
+          )}
         </AppShell.Navbar>
       )}
 
@@ -134,9 +326,23 @@ const AdminShell = (props: AdminShellProps) => {
         display={"flex"}
         flex={1}
         style={{ flexDirection: "column" }}
+        className="alepha-sidebar-main"
+        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/AlephaMantineProvider.tsx

@@ -1,6 +1,3 @@
-import { useEvents } from "@alepha/react";
-import { FormValidationError } from "@alepha/react/form";
-import { NestedView } from "@alepha/react/router";
 import {
   ColorSchemeScript,
   type ColorSchemeScriptProps,
@@ -12,6 +9,9 @@ import { Notifications, type NotificationsProps } from "@mantine/notifications";
 import type { NavigationProgressProps } from "@mantine/nprogress";
 import { NavigationProgress, nprogress } from "@mantine/nprogress";
 import { TypeBoxError } from "alepha";
+import { useEvents } from "alepha/react";
+import { FormValidationError } from "alepha/react/form";
+import { NestedView } from "alepha/react/router";
 import type { ReactNode } from "react";
 import { useTheme } from "../../hooks/useTheme.ts";
 import { useToast } from "../../hooks/useToast.ts";