@clayer/dashboard-layout 1.0.0

package/dist/index.js

@@ -0,0 +1,1393 @@
+// src/dashboard-layout.tsx
+import {
+  Fragment,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { useTheme } from "@clayer/theme";
+import { cn } from "@clayer/utils";
+import { Fragment as Fragment2, jsx, jsxs } from "react/jsx-runtime";
+var defaultSidebar = {
+  collapsible: true,
+  defaultCollapsed: false,
+  width: 280,
+  collapsedWidth: 80,
+  showTooltipsWhenCollapsed: true,
+  closeOnNavigateMobile: true
+};
+var densityClasses = {
+  compact: {
+    header: "h-14",
+    content: "p-4",
+    navItem: "min-h-9 px-2.5 py-2 text-sm",
+    childItem: "min-h-8 px-3 py-1.5 text-sm"
+  },
+  comfortable: {
+    header: "h-16",
+    content: "p-4 lg:p-6",
+    navItem: "min-h-10 px-3 py-2 text-sm",
+    childItem: "min-h-9 px-3 py-2 text-sm"
+  },
+  spacious: {
+    header: "h-20",
+    content: "p-5 lg:p-8",
+    navItem: "min-h-11 px-4 py-2.5 text-base",
+    childItem: "min-h-10 px-4 py-2 text-sm"
+  }
+};
+var maxWidthClasses = {
+  none: "max-w-none",
+  "screen-xl": "max-w-screen-xl",
+  "screen-2xl": "max-w-screen-2xl",
+  "7xl": "max-w-7xl"
+};
+var layoutPaddingClasses = {
+  none: "p-0",
+  sm: "p-0 lg:p-2",
+  md: "p-0 lg:p-3",
+  lg: "p-0 lg:p-4"
+};
+var layoutRadiusClasses = {
+  none: "rounded-none",
+  sm: "rounded-none lg:rounded-md",
+  md: "rounded-none lg:rounded-lg",
+  lg: "rounded-none lg:rounded-xl",
+  xl: "rounded-none lg:rounded-2xl"
+};
+var layoutShadowClasses = {
+  none: "shadow-none",
+  sm: "shadow-sm",
+  md: "shadow-md",
+  lg: "shadow-xl"
+};
+var userMenuRadiusClasses = {
+  none: "rounded-none",
+  sm: "rounded-md",
+  md: "rounded-lg",
+  lg: "rounded-xl",
+  full: "rounded-full"
+};
+var userMenuPaddingClasses = {
+  none: "p-0",
+  sm: "p-1.5",
+  md: "p-2"
+};
+var userMenuBackgroundClasses = {
+  transparent: "bg-transparent",
+  background: "bg-background",
+  muted: "bg-muted/60"
+};
+var userMenuShadowClasses = {
+  none: "shadow-none",
+  sm: "shadow-sm",
+  md: "shadow-md"
+};
+var defaultLayoutConfig = {
+  padding: "none",
+  bordered: false,
+  radius: "none",
+  shadow: "none",
+  borders: {
+    sidebar: true,
+    header: true,
+    footer: true,
+    mobileBottomNav: true
+  },
+  background: {
+    root: "bg-background",
+    shell: "bg-background",
+    sidebar: "bg-sidebar",
+    header: "bg-background/85",
+    breadcrumb: "bg-background/70",
+    main: "bg-muted/30",
+    content: void 0,
+    footer: "bg-background",
+    mobileBottomNav: "bg-background"
+  },
+  backgroundComponents: {}
+};
+function resolveSurfaceBackgroundClass({
+  value,
+  hasComponent
+}) {
+  if (hasComponent || !value) {
+    return void 0;
+  }
+  if (value === "transparent") {
+    return "bg-transparent";
+  }
+  if (value === "inherit") {
+    return "bg-inherit";
+  }
+  return value;
+}
+function SurfaceBackground({ component }) {
+  if (!component) {
+    return null;
+  }
+  if (typeof component === "object" && component !== null && !Array.isArray(component) && "content" in component) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "absolute inset-0 z-0 h-full w-full",
+          !component.interactive && "pointer-events-none",
+          component.className
+        ),
+        style: component.style,
+        "aria-hidden": !component.interactive,
+        children: component.content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 z-0 h-full w-full", "aria-hidden": true, children: component });
+}
+function useControllableState({
+  value,
+  defaultValue,
+  onChange
+}) {
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const isControlled = value !== void 0;
+  const currentValue = isControlled ? value : internalValue;
+  const setValue = useCallback(
+    (nextValue) => {
+      if (!isControlled) {
+        setInternalValue(nextValue);
+      }
+      onChange?.(nextValue);
+    },
+    [isControlled, onChange]
+  );
+  return [currentValue, setValue];
+}
+function defaultIsItemActive(item, currentPath) {
+  if (!currentPath) {
+    return false;
+  }
+  return item.exact ? currentPath === item.href : currentPath === item.href || currentPath.startsWith(`${item.href}/`);
+}
+function DefaultLink({ href, children, className, onClick, external, "aria-current": ariaCurrent }) {
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      href,
+      className,
+      onClick,
+      target: external ? "_blank" : void 0,
+      rel: external ? "noreferrer" : void 0,
+      "aria-current": ariaCurrent,
+      children
+    }
+  );
+}
+function getThemeStyles(styles) {
+  return styles;
+}
+function Badge({ children, className }) {
+  if (!children) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "ml-auto rounded-full bg-[hsl(var(--cx-sidebar-foreground)/0.12)] px-2 py-0.5 text-[11px] font-medium leading-5",
+        className
+      ),
+      children
+    }
+  );
+}
+function NavIcon({ icon: Icon, className }) {
+  if (!Icon) {
+    return /* @__PURE__ */ jsx("span", { className: cn("grid size-5 shrink-0 place-items-center leading-none", className), "aria-hidden": true, children: /* @__PURE__ */ jsx("span", { className: "size-2 rounded-full bg-current opacity-60" }) });
+  }
+  return /* @__PURE__ */ jsx("span", { className: cn("grid size-5 shrink-0 place-items-center leading-none", className), "aria-hidden": true, children: /* @__PURE__ */ jsx(Icon, { className: "block size-4 shrink-0 leading-none", "aria-hidden": true }) });
+}
+function SidebarLink({
+  item,
+  active,
+  collapsed,
+  closeMobile,
+  onExpandPersist,
+  onCollapsedTooltipChange,
+  renderLink,
+  styles,
+  density
+}) {
+  const handleClick = () => {
+    onCollapsedTooltipChange?.(null);
+    onExpandPersist?.();
+    item.onClick?.();
+    closeMobile?.();
+  };
+  const handleTooltipShow = (element) => {
+    if (!collapsed) {
+      return;
+    }
+    const rect = element.getBoundingClientRect();
+    onCollapsedTooltipChange?.({
+      label: item.label,
+      top: rect.top + rect.height / 2,
+      left: rect.right + 12
+    });
+  };
+  const className = cn(
+    "group relative flex w-full items-center gap-3 rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+    active ? "bg-sidebar-active text-white shadow-sm" : "text-sidebar-foreground/78 transition-colors hover:bg-[hsl(var(--cx-sidebar-foreground)/0.08)] hover:text-sidebar-foreground motion-reduce:transition-none",
+    densityClasses[density].navItem,
+    item.disabled && "pointer-events-none opacity-45",
+    collapsed && "justify-center px-2",
+    styles?.sidebarNavItem,
+    active && styles?.sidebarNavItemActive
+  );
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      onMouseEnter: (event) => handleTooltipShow(event.currentTarget),
+      onMouseLeave: () => onCollapsedTooltipChange?.(null),
+      onFocus: (event) => handleTooltipShow(event.currentTarget),
+      onBlur: () => onCollapsedTooltipChange?.(null),
+      children: renderLink({
+        href: item.href,
+        external: item.external,
+        onClick: handleClick,
+        className,
+        "aria-current": active ? "page" : void 0,
+        children: /* @__PURE__ */ jsxs(Fragment2, { children: [
+          /* @__PURE__ */ jsx(NavIcon, { icon: item.icon, className: styles?.sidebarNavItemIcon }),
+          /* @__PURE__ */ jsx("span", { className: cn("min-w-0 flex-1 truncate", collapsed && "sr-only", styles?.sidebarNavItemLabel), children: item.label }),
+          !collapsed ? /* @__PURE__ */ jsx(Badge, { className: styles?.sidebarNavItemBadge, children: item.badge }) : null
+        ] })
+      })
+    }
+  );
+}
+function SidebarGroup({
+  item,
+  collapsed,
+  currentPath,
+  isItemActive,
+  closeMobile,
+  onExpandPersist,
+  onCollapsedTooltipChange,
+  renderLink,
+  styles,
+  density
+}) {
+  const hasActiveChild = item.children.some((child) => isItemActive(child, currentPath));
+  const [open, setOpen] = useState(item.defaultOpen ?? hasActiveChild);
+  useEffect(() => {
+    if (hasActiveChild) {
+      setOpen(true);
+    }
+  }, [hasActiveChild]);
+  const handleTooltipShow = (element) => {
+    if (!collapsed) {
+      return;
+    }
+    const rect = element.getBoundingClientRect();
+    onCollapsedTooltipChange?.({
+      label: item.label,
+      top: rect.top + rect.height / 2,
+      left: rect.right + 12
+    });
+  };
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      className: cn("space-y-1", styles?.sidebarGroup),
+      onMouseLeave: () => onCollapsedTooltipChange?.(null),
+      onBlur: () => onCollapsedTooltipChange?.(null),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              onCollapsedTooltipChange?.(null);
+              onExpandPersist?.();
+              setOpen((value) => !value);
+            },
+            onMouseEnter: (event) => handleTooltipShow(event.currentTarget),
+            onFocus: (event) => handleTooltipShow(event.currentTarget),
+            "aria-expanded": open,
+            className: cn(
+              "group relative flex w-full items-center gap-3 rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              hasActiveChild ? "bg-sidebar-active text-white shadow-sm" : "text-sidebar-foreground/78 transition-colors hover:bg-[hsl(var(--cx-sidebar-foreground)/0.08)] hover:text-sidebar-foreground motion-reduce:transition-none",
+              densityClasses[density].navItem,
+              collapsed && "justify-center px-2",
+              styles?.sidebarGroupTrigger,
+              hasActiveChild && styles?.sidebarNavItemActive
+            ),
+            children: [
+              /* @__PURE__ */ jsx(NavIcon, { icon: item.icon, className: styles?.sidebarNavItemIcon }),
+              /* @__PURE__ */ jsx("span", { className: cn("min-w-0 flex-1 truncate text-left", collapsed && "sr-only", styles?.sidebarNavItemLabel), children: item.label }),
+              !collapsed ? /* @__PURE__ */ jsx(Badge, { className: styles?.sidebarNavItemBadge, children: item.badge }) : null,
+              !collapsed ? /* @__PURE__ */ jsx("span", { className: cn("text-xs transition-transform", open && "rotate-90"), children: "\u203A" }) : null
+            ]
+          }
+        ),
+        !collapsed && open ? /* @__PURE__ */ jsx(
+          "ul",
+          {
+            className: cn(
+              "ml-5 space-y-1 border-l border-[hsl(var(--cx-sidebar-foreground)/0.12)] pl-3",
+              styles?.sidebarGroupContent
+            ),
+            children: item.children.filter((child) => !child.hidden).map((child) => /* @__PURE__ */ jsx(
+              SidebarLink,
+              {
+                item: child,
+                active: isItemActive(child, currentPath),
+                collapsed: false,
+                closeMobile,
+                onExpandPersist,
+                onCollapsedTooltipChange,
+                renderLink,
+                styles: { ...styles, sidebarNavItem: cn(styles?.sidebarNavItem, styles?.sidebarGroupChildItem) },
+                density
+              },
+              child.href
+            ))
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function SidebarNav({
+  items,
+  collapsed,
+  currentPath,
+  isItemActive,
+  closeMobile,
+  onExpandPersist,
+  onCollapsedTooltipChange,
+  renderLink,
+  styles,
+  density
+}) {
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      className: cn(
+        "min-h-0 flex-1 overflow-y-auto overflow-x-hidden px-3 py-4",
+        styles?.sidebarNav
+      ),
+      "aria-label": "Sidebar navigation",
+      children: /* @__PURE__ */ jsx("ul", { className: "space-y-1", children: items.filter((item) => item.type === "divider" || !item.hidden).map((item, index) => {
+        if (item.type === "divider") {
+          return /* @__PURE__ */ jsx("li", { className: cn("px-3 py-3", styles?.sidebarNavSection), children: item.label && !collapsed ? /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold uppercase tracking-wide text-sidebar-foreground/45", children: item.label }) : /* @__PURE__ */ jsx("span", { className: "block border-t border-[hsl(var(--cx-sidebar-foreground)/0.12)]" }) }, `${item.label ?? "divider"}-${index}`);
+        }
+        if (item.type === "group") {
+          return /* @__PURE__ */ jsx(
+            SidebarGroup,
+            {
+              item,
+              collapsed,
+              currentPath,
+              isItemActive,
+              closeMobile,
+              onExpandPersist,
+              onCollapsedTooltipChange,
+              renderLink,
+              styles,
+              density
+            },
+            item.label
+          );
+        }
+        return /* @__PURE__ */ jsx(
+          SidebarLink,
+          {
+            item,
+            active: isItemActive(item, currentPath),
+            collapsed,
+            closeMobile,
+            onExpandPersist,
+            onCollapsedTooltipChange,
+            renderLink,
+            styles,
+            density
+          },
+          item.href
+        );
+      }) })
+    }
+  );
+}
+function DashboardSidebar({
+  logo,
+  sidebarHeader,
+  sidebarBottomPanel,
+  sidebarFooter,
+  items,
+  collapsed,
+  onCollapsedChange,
+  sidebar,
+  currentPath,
+  isItemActive,
+  closeMobile,
+  renderLink,
+  styles,
+  density,
+  layout,
+  mobile
+}) {
+  const effectiveCollapsed = collapsed;
+  const width = mobile ? sidebar.width : effectiveCollapsed ? sidebar.collapsedWidth : sidebar.width;
+  const [collapsedTooltip, setCollapsedTooltip] = useState(null);
+  const fallbackBottomPanel = sidebarFooter ? {
+    content: sidebarFooter
+  } : void 0;
+  const bottomPanel = sidebarBottomPanel ?? fallbackBottomPanel;
+  const showBottomPanel = bottomPanel && (mobile || !effectiveCollapsed);
+  const [bottomPanelCollapsed, setBottomPanelCollapsed] = useControllableState({
+    value: bottomPanel?.collapsed,
+    defaultValue: bottomPanel?.defaultCollapsed ?? false,
+    onChange: bottomPanel?.onCollapsedChange
+  });
+  const isSidebarCompact = !mobile && effectiveCollapsed;
+  const isPanelBodyCollapsed = Boolean(bottomPanel?.collapsible && bottomPanelCollapsed && !isSidebarCompact);
+  const bottomPanelContent = isSidebarCompact ? bottomPanel?.collapsedContent : bottomPanel?.content;
+  const bottomPanelHeight = isPanelBodyCollapsed ? bottomPanel?.collapsedHeight : bottomPanel?.height;
+  const bottomPanelStyle = bottomPanelHeight ? { height: bottomPanelHeight } : void 0;
+  const handleExpandPersist = () => {
+    if (!mobile && collapsed) {
+      setCollapsedTooltip(null);
+      onCollapsedChange(false);
+    }
+  };
+  const handleSidebarToggle = () => {
+    if (mobile) {
+      return;
+    }
+    setCollapsedTooltip(null);
+    onCollapsedChange(!effectiveCollapsed);
+  };
+  return /* @__PURE__ */ jsxs(
+    "aside",
+    {
+      className: cn(
+        "relative flex h-full min-h-0 shrink-0 flex-col overflow-hidden text-sidebar-foreground transition-[width] duration-200 ease-out motion-reduce:transition-none",
+        resolveSurfaceBackgroundClass({
+          value: layout.background.sidebar,
+          hasComponent: Boolean(layout.backgroundComponents.sidebar)
+        }),
+        layout.borders.sidebar && "border-r border-[hsl(var(--cx-sidebar-foreground)/0.12)]",
+        !mobile && "hidden lg:flex",
+        styles?.sidebar
+      ),
+      style: { width },
+      children: [
+        /* @__PURE__ */ jsx(SurfaceBackground, { component: layout.backgroundComponents.sidebar }),
+        /* @__PURE__ */ jsxs("div", { className: cn("relative z-10 flex min-h-0 flex-1 flex-col", styles?.sidebarInner), children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "flex h-16 shrink-0 items-center gap-3 border-b border-[hsl(var(--cx-sidebar-foreground)/0.12)] px-4",
+                collapsed && !mobile && "justify-center px-2",
+                styles?.sidebarHeader
+              ),
+              children: [
+                /* @__PURE__ */ jsx("div", { className: cn("min-w-0 flex-1", effectiveCollapsed && !mobile && "sr-only", styles?.sidebarLogo), children: sidebarHeader ?? logo }),
+                sidebar.collapsible && !mobile ? /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: handleSidebarToggle,
+                    className: cn(
+                      "grid size-9 place-items-center rounded-lg text-sidebar-foreground/70 hover:bg-[hsl(var(--cx-sidebar-foreground)/0.08)] hover:text-sidebar-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                      styles?.sidebarToggle
+                    ),
+                    "aria-label": effectiveCollapsed ? "Expand sidebar" : "Collapse sidebar",
+                    children: effectiveCollapsed ? "\u203A" : "\u2039"
+                  }
+                ) : null
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            SidebarNav,
+            {
+              items,
+              collapsed: effectiveCollapsed && !mobile,
+              currentPath,
+              isItemActive,
+              closeMobile,
+              onExpandPersist: handleExpandPersist,
+              onCollapsedTooltipChange: sidebar.showTooltipsWhenCollapsed && effectiveCollapsed ? setCollapsedTooltip : void 0,
+              renderLink,
+              styles,
+              density
+            }
+          ),
+          showBottomPanel && bottomPanelContent ? /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                bottomPanel.sticky !== false && "sticky bottom-0",
+                "shrink-0 overflow-hidden bg-transparent p-4",
+                bottomPanel.bordered !== false && "border-t border-[hsl(var(--cx-sidebar-foreground)/0.12)]",
+                effectiveCollapsed && !mobile && "px-2",
+                styles?.sidebarFooter,
+                bottomPanel.className
+              ),
+              style: bottomPanelStyle,
+              children: [
+                !isSidebarCompact && (bottomPanel.title || bottomPanel.collapsible) ? /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center justify-between gap-3", children: [
+                  bottomPanel.title ? /* @__PURE__ */ jsx("div", { className: "min-w-0 truncate font-semibold text-sidebar-foreground", children: bottomPanel.title }) : /* @__PURE__ */ jsx("span", {}),
+                  bottomPanel.collapsible ? /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => setBottomPanelCollapsed(!bottomPanelCollapsed),
+                      className: "grid size-7 shrink-0 place-items-center rounded-md text-sidebar-foreground/70 hover:bg-[hsl(var(--cx-sidebar-foreground)/0.08)] hover:text-sidebar-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                      "aria-expanded": !bottomPanelCollapsed,
+                      "aria-label": bottomPanel.collapseButtonLabel ?? (bottomPanelCollapsed ? "Expand sidebar panel" : "Collapse sidebar panel"),
+                      children: /* @__PURE__ */ jsx("span", { className: cn("transition-transform", bottomPanelCollapsed ? "-rotate-90" : "rotate-90"), children: "\u203A" })
+                    }
+                  ) : null
+                ] }) : null,
+                !isPanelBodyCollapsed ? /* @__PURE__ */ jsx("div", { className: "min-h-0 overflow-hidden", children: bottomPanelContent }) : null
+              ]
+            }
+          ) : null
+        ] }),
+        sidebar.showTooltipsWhenCollapsed && effectiveCollapsed && collapsedTooltip ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "pointer-events-none fixed z-[70] -translate-y-1/2 whitespace-nowrap rounded-md bg-foreground px-2 py-1 text-xs text-background shadow-lg",
+            style: { top: collapsedTooltip.top, left: collapsedTooltip.left },
+            children: collapsedTooltip.label
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function ActionButton({ action, styles }) {
+  const Icon = action.icon;
+  const isIcon = action.type === "icon";
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: action.onClick,
+      className: cn(
+        "relative inline-flex items-center justify-center gap-2 rounded-lg border border-border bg-background text-sm font-medium text-foreground transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        isIcon ? "size-9" : "h-9 px-3",
+        action.type === "button" && action.variant === "solid" && "border-primary bg-primary text-primary-foreground hover:bg-primary/90",
+        action.type === "button" && action.variant === "ghost" && "border-transparent bg-transparent hover:bg-muted",
+        action.type === "button" && action.variant === "soft" && "border-transparent bg-primary/10 text-primary hover:bg-primary/15",
+        action.type === "button" && action.tone === "danger" && "border-danger text-danger hover:bg-danger/10",
+        styles?.headerActionButton
+      ),
+      "aria-label": action.label,
+      children: [
+        Icon ? /* @__PURE__ */ jsx(Icon, { className: "size-4", "aria-hidden": true }) : null,
+        !isIcon ? /* @__PURE__ */ jsx("span", { children: action.label }) : null,
+        isIcon && action.badge ? /* @__PURE__ */ jsx("span", { className: "absolute -right-1 -top-1 rounded-full bg-danger px-1.5 text-[10px] font-semibold text-white", children: action.badge }) : null
+      ]
+    }
+  );
+}
+function DropdownAction({ action, styles }) {
+  const [open, setOpen] = useState(false);
+  const Icon = action.icon;
+  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen((value) => !value),
+        "aria-expanded": open,
+        className: cn("inline-flex h-9 items-center gap-2 rounded-lg border border-border bg-background px-3 text-sm font-medium hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", styles?.headerActionButton),
+        children: [
+          Icon ? /* @__PURE__ */ jsx(Icon, { className: "size-4", "aria-hidden": true }) : null,
+          action.label
+        ]
+      }
+    ),
+    open ? /* @__PURE__ */ jsx("div", { className: "absolute right-0 top-11 z-50 w-52 rounded-lg border border-border bg-background p-1 shadow-lg", children: action.items.map((item) => {
+      const ItemIcon = item.icon;
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            item.onClick?.();
+            setOpen(false);
+          },
+          className: "flex w-full items-center gap-2 rounded-md px-3 py-2 text-left text-sm hover:bg-muted",
+          children: [
+            ItemIcon ? /* @__PURE__ */ jsx(ItemIcon, { className: "size-4", "aria-hidden": true }) : null,
+            item.label
+          ]
+        },
+        item.label
+      );
+    }) }) : null
+  ] });
+}
+function HeaderActions({
+  actions,
+  headerActions,
+  styles
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", styles?.headerActions), children: [
+    actions?.map((action, index) => {
+      if (action.type === "custom") {
+        return /* @__PURE__ */ jsx(Fragment, { children: action.render }, index);
+      }
+      if (action.type === "dropdown") {
+        return /* @__PURE__ */ jsx(DropdownAction, { action, styles }, `${action.label}-${index}`);
+      }
+      return /* @__PURE__ */ jsx(ActionButton, { action, styles }, `${action.label}-${index}`);
+    }),
+    headerActions
+  ] });
+}
+function DashboardBreadcrumbs({
+  breadcrumbs,
+  renderLink,
+  styles
+}) {
+  if (!breadcrumbs?.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("nav", { className: cn("flex min-w-0 items-center gap-1 overflow-x-auto whitespace-nowrap text-sm text-muted-foreground", styles?.headerBreadcrumbs), "aria-label": "Breadcrumbs", children: breadcrumbs.map((item, index) => {
+    const isLast = index === breadcrumbs.length - 1;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      index > 0 ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "/" }) : null,
+      item.href && !isLast ? renderLink({ href: item.href, className: "hover:text-foreground", children: item.label }) : /* @__PURE__ */ jsx("span", { className: cn(isLast && "text-foreground"), children: item.label })
+    ] }, `${item.label}-${index}`);
+  }) });
+}
+function DashboardUserMenu({
+  user,
+  config,
+  styles,
+  placement = "bottom",
+  triggerClassName,
+  menuClassName
+}) {
+  const [open, setOpen] = useState(false);
+  const [avatarFailed, setAvatarFailed] = useState(false);
+  const initials = user?.initials ?? user?.name?.split(" ").map((part) => part[0]).join("").slice(0, 2).toUpperCase() ?? "U";
+  const UserIcon = user?.icon;
+  const userMenuConfig = {
+    bordered: false,
+    background: "transparent",
+    radius: "lg",
+    padding: "sm",
+    shadow: "none",
+    showRole: true,
+    ...config
+  };
+  if (!user) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", styles?.headerUserMenu), children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen((value) => !value),
+        "aria-expanded": open,
+        className: cn(
+          "flex items-center gap-2 transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          userMenuConfig.bordered && "border border-border",
+          userMenuBackgroundClasses[userMenuConfig.background],
+          userMenuRadiusClasses[userMenuConfig.radius],
+          userMenuPaddingClasses[userMenuConfig.padding],
+          userMenuShadowClasses[userMenuConfig.shadow],
+          triggerClassName
+        ),
+        children: [
+          user.avatarUrl && !avatarFailed ? /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: user.avatarUrl,
+              alt: "",
+              className: "size-8 rounded-full object-cover",
+              onError: () => setAvatarFailed(true)
+            }
+          ) : /* @__PURE__ */ jsx("span", { className: "grid size-8 place-items-center rounded-full bg-primary text-xs font-semibold text-primary-foreground", children: initials }),
+          /* @__PURE__ */ jsxs("span", { className: "hidden min-w-0 text-left lg:block", children: [
+            /* @__PURE__ */ jsxs("span", { className: "flex max-w-36 items-center gap-1.5", children: [
+              /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium", children: user.name }),
+              UserIcon ? /* @__PURE__ */ jsx(UserIcon, { className: "size-3.5 shrink-0 text-primary", "aria-hidden": true }) : null
+            ] }),
+            userMenuConfig.showRole ? /* @__PURE__ */ jsx("span", { className: "block max-w-36 truncate text-xs text-muted-foreground", children: user.role ?? user.email }) : null
+          ] })
+        ]
+      }
+    ),
+    open ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "z-50 w-64 rounded-lg border border-border bg-background p-2 shadow-lg",
+          placement === "top" ? "absolute right-0 bottom-12" : "absolute right-0 top-12",
+          menuClassName
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "px-3 py-2", children: [
+            /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium", children: user.name }),
+            /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-muted-foreground", children: user.email })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "my-1 border-t border-border" }),
+          user.menuItems?.map((item, index) => {
+            if (item.type === "divider") {
+              return /* @__PURE__ */ jsx("div", { className: "my-1 border-t border-border" }, index);
+            }
+            const Icon = item.icon;
+            return item.href ? /* @__PURE__ */ jsxs("a", { href: item.href, className: "flex items-center gap-2 rounded-md px-3 py-2 text-sm hover:bg-muted", children: [
+              Icon ? /* @__PURE__ */ jsx(Icon, { className: "size-4", "aria-hidden": true }) : null,
+              item.label
+            ] }, item.label) : /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  item.onClick?.();
+                  setOpen(false);
+                },
+                className: "flex w-full items-center gap-2 rounded-md px-3 py-2 text-left text-sm hover:bg-muted",
+                children: [
+                  Icon ? /* @__PURE__ */ jsx(Icon, { className: "size-4", "aria-hidden": true }) : null,
+                  item.label
+                ]
+              },
+              item.label
+            );
+          })
+        ]
+      }
+    ) : null
+  ] });
+}
+function DashboardHeader({
+  header,
+  user,
+  mobile,
+  mobileOpen,
+  setMobileOpen,
+  renderLink,
+  headerActions,
+  styles,
+  density,
+  layout,
+  breadcrumbsVisible
+}) {
+  const heightStyle = header?.height ? { height: header.height } : void 0;
+  const showMobileBottomNav = Boolean(mobile?.bottomNav);
+  const showMobileHeaderToggle = header?.showSidebarToggle !== false && !showMobileBottomNav;
+  return /* @__PURE__ */ jsxs(
+    "header",
+    {
+      className: cn(
+        "relative z-30 backdrop-blur-xl",
+        resolveSurfaceBackgroundClass({
+          value: layout.background.header,
+          hasComponent: Boolean(layout.backgroundComponents.header)
+        }),
+        layout.borders.header && "border-b border-border",
+        header?.sticky !== false && "sticky top-0",
+        styles?.header
+      ),
+      children: [
+        /* @__PURE__ */ jsx(SurfaceBackground, { component: layout.backgroundComponents.header }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn("relative z-10 flex items-center justify-between gap-4 px-4 lg:px-6", densityClasses[density].header, styles?.headerInner),
+            style: heightStyle,
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 items-center gap-3", styles?.headerLeft), children: [
+                showMobileHeaderToggle ? /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setMobileOpen(!mobileOpen),
+                    className: "grid size-9 place-items-center rounded-lg border border-border bg-background text-foreground hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring lg:hidden",
+                    "aria-label": "Open navigation",
+                    "aria-expanded": mobileOpen,
+                    children: "\u2630"
+                  }
+                ) : null,
+                /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                  header?.title ? /* @__PURE__ */ jsx("h1", { className: cn("truncate text-lg font-semibold", styles?.headerTitle), children: header.title }) : null,
+                  header?.subtitle ? /* @__PURE__ */ jsx("p", { className: cn("truncate text-sm text-muted-foreground", styles?.headerSubtitle), children: header.subtitle }) : null
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "hidden shrink-0 items-center gap-2 lg:flex", children: [
+                /* @__PURE__ */ jsx(HeaderActions, { actions: header?.actions, headerActions, styles }),
+                /* @__PURE__ */ jsx(DashboardUserMenu, { user, config: header?.userMenu, styles })
+              ] })
+            ]
+          }
+        ),
+        header?.showBreadcrumbs ? /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "relative overflow-hidden border-t border-border/70 transition-all duration-200 ease-out motion-reduce:transition-none",
+              resolveSurfaceBackgroundClass({
+                value: layout.background.breadcrumb,
+                hasComponent: Boolean(layout.backgroundComponents.breadcrumb)
+              }),
+              breadcrumbsVisible ? "max-h-12 opacity-100 translate-y-0" : "max-h-0 -translate-y-1 opacity-0"
+            ),
+            "aria-hidden": !breadcrumbsVisible,
+            children: [
+              /* @__PURE__ */ jsx(SurfaceBackground, { component: layout.backgroundComponents.breadcrumb }),
+              /* @__PURE__ */ jsx("div", { className: "relative z-10 px-4 py-2 lg:px-6", children: /* @__PURE__ */ jsx(DashboardBreadcrumbs, { breadcrumbs: header.breadcrumbs, renderLink, styles }) })
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function DashboardContent({
+  children,
+  content,
+  styles,
+  density,
+  layout
+}) {
+  const padded = content?.padded !== false;
+  const maxWidth = content?.maxWidth ?? "none";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative",
+        resolveSurfaceBackgroundClass({
+          value: layout.background.main,
+          hasComponent: Boolean(layout.backgroundComponents.main)
+        }),
+        resolveSurfaceBackgroundClass({
+          value: layout.background.content,
+          hasComponent: Boolean(layout.backgroundComponents.content)
+        }),
+        padded && densityClasses[density].content,
+        styles?.content
+      ),
+      children: [
+        /* @__PURE__ */ jsx(SurfaceBackground, { component: layout.backgroundComponents.main }),
+        /* @__PURE__ */ jsx(SurfaceBackground, { component: layout.backgroundComponents.content }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "relative z-10",
+              maxWidthClasses[maxWidth],
+              content?.centered && "mx-auto",
+              styles?.pageContainer
+            ),
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+function MobileDrawer({
+  open,
+  setOpen,
+  sidebarProps,
+  styles
+}) {
+  const panelRef = useRef(null);
+  const [rendered, setRendered] = useState(open);
+  useEffect(() => {
+    if (open) {
+      setRendered(true);
+      return;
+    }
+    const timeoutId = window.setTimeout(() => {
+      setRendered(false);
+    }, 220);
+    return () => window.clearTimeout(timeoutId);
+  }, [open]);
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [open, setOpen]);
+  if (!rendered) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 lg:hidden", role: "dialog", "aria-modal": "true", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: cn(
+          "absolute inset-0 bg-black/50 transition-opacity duration-200 ease-out motion-reduce:transition-none",
+          open ? "opacity-100" : "opacity-0"
+        ),
+        type: "button",
+        "aria-label": "Close navigation",
+        onClick: () => setOpen(false)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: panelRef,
+        className: cn(
+          "absolute inset-y-0 left-0 flex max-w-[86vw] shadow-2xl transition-transform duration-200 ease-out motion-reduce:transition-none",
+          open ? "translate-x-0" : "-translate-x-full",
+          styles?.mobileDrawer
+        ),
+        children: /* @__PURE__ */ jsx(DashboardSidebar, { ...sidebarProps, mobile: true, closeMobile: () => setOpen(false), collapsed: false })
+      }
+    )
+  ] });
+}
+function MobileBottomNav({
+  items,
+  currentPath,
+  isItemActive,
+  renderLink,
+  user,
+  userMenuConfig,
+  mobileOpen,
+  setMobileOpen,
+  utilityItems,
+  styles,
+  layout
+}) {
+  const resolvedUtilityItems = utilityItems?.length ? utilityItems : [{ type: "sidebar-toggle" }, { type: "user-menu" }];
+  if (!items?.length && !resolvedUtilityItems.length) {
+    return null;
+  }
+  const mobileUserMenuConfig = {
+    ...userMenuConfig,
+    bordered: false,
+    background: "transparent",
+    padding: "none",
+    shadow: "none",
+    showRole: false
+  };
+  const itemBaseClassName = "group flex h-full min-h-[4.5rem] w-full min-w-[4.75rem] flex-col items-center justify-center gap-1 px-2.5 py-2 text-[0.7rem] font-medium leading-none transition-colors";
+  const itemShellClassName = "relative flex min-w-[4.75rem] flex-1 basis-0 items-stretch before:absolute before:bottom-3 before:left-0 before:top-3 before:w-px before:bg-border/70 before:content-[''] first:before:hidden";
+  const iconWrapClassName = "grid size-6 place-items-center text-current transition-transform duration-200 motion-reduce:transition-none";
+  return /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      className: cn(
+        "fixed inset-x-0 bottom-0 z-40 pb-[env(safe-area-inset-bottom)] lg:hidden",
+        resolveSurfaceBackgroundClass({
+          value: layout.background.mobileBottomNav,
+          hasComponent: Boolean(layout.backgroundComponents.mobileBottomNav)
+        }),
+        styles?.mobileBottomNav
+      ),
+      "aria-label": "Mobile navigation",
+      children: [
+        /* @__PURE__ */ jsx(SurfaceBackground, { component: layout.backgroundComponents.mobileBottomNav }),
+        /* @__PURE__ */ jsx("div", { className: "relative z-10 w-full", children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "flex min-h-[5.25rem] w-full items-stretch bg-background/95 backdrop-blur-2xl",
+              layout.borders.mobileBottomNav && "border-t border-border/80"
+            ),
+            children: /* @__PURE__ */ jsxs("ul", { className: "flex min-w-0 flex-1 items-stretch overflow-x-auto overflow-y-hidden", children: [
+              items?.map((item) => {
+                const active = isItemActive(item, currentPath);
+                const Icon = item.icon;
+                return /* @__PURE__ */ jsx("li", { className: itemShellClassName, children: renderLink({
+                  href: item.href,
+                  external: item.external,
+                  "aria-current": active ? "page" : void 0,
+                  className: cn(
+                    itemBaseClassName,
+                    active ? "text-primary" : "text-muted-foreground hover:text-foreground"
+                  ),
+                  children: /* @__PURE__ */ jsxs(Fragment2, { children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: cn(
+                          "h-0.5 w-8 rounded-full transition-all duration-200 motion-reduce:transition-none",
+                          active ? "bg-primary opacity-100" : "bg-transparent opacity-0"
+                        )
+                      }
+                    ),
+                    Icon ? /* @__PURE__ */ jsx("span", { className: cn(iconWrapClassName, active && "-translate-y-px"), "aria-hidden": true, children: /* @__PURE__ */ jsx(Icon, { className: "size-[1.3rem]", "aria-hidden": true }) }) : /* @__PURE__ */ jsx("span", { className: cn(iconWrapClassName, active && "-translate-y-px"), "aria-hidden": true, children: /* @__PURE__ */ jsx("span", { className: "size-2.5 rounded-full bg-current" }) }),
+                    /* @__PURE__ */ jsx("span", { className: "max-w-16 truncate leading-none", children: item.label })
+                  ] })
+                }) }, item.href);
+              }),
+              resolvedUtilityItems.map((item, index) => {
+                if (item.type === "custom") {
+                  return /* @__PURE__ */ jsx("li", { className: itemShellClassName, children: item.render }, item.key);
+                }
+                if (item.type === "user-menu") {
+                  return user ? /* @__PURE__ */ jsx("li", { className: itemShellClassName, children: /* @__PURE__ */ jsx(
+                    DashboardUserMenu,
+                    {
+                      user,
+                      config: mobileUserMenuConfig,
+                      styles,
+                      placement: "top",
+                      menuClassName: "fixed bottom-[calc(env(safe-area-inset-bottom)+6.25rem)] right-3 z-[90] w-[min(16rem,calc(100vw-1.5rem))] max-w-[calc(100vw-1.5rem)] rounded-2xl border border-border/80 bg-background/98 shadow-[0_24px_60px_-24px_rgba(15,23,42,0.55)] backdrop-blur-xl",
+                      triggerClassName: cn(
+                        itemBaseClassName,
+                        "text-foreground hover:text-foreground"
+                      )
+                    }
+                  ) }, `mobile-user-${index}`) : null;
+                }
+                const Icon = item.icon;
+                return /* @__PURE__ */ jsx("li", { className: itemShellClassName, children: /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setMobileOpen(!mobileOpen),
+                    className: cn(
+                      itemBaseClassName,
+                      "text-foreground hover:text-foreground"
+                    ),
+                    "aria-label": item.label ?? "Open navigation",
+                    "aria-expanded": mobileOpen,
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: iconWrapClassName, "aria-hidden": true, children: Icon ? /* @__PURE__ */ jsx(Icon, { className: "size-[1.3rem]", "aria-hidden": true }) : "\u2630" }),
+                      /* @__PURE__ */ jsx("span", { className: "max-w-16 truncate leading-none", children: item.label ?? "Menu" })
+                    ]
+                  }
+                ) }, `mobile-sidebar-toggle-${index}`);
+              })
+            ] })
+          }
+        ) })
+      ]
+    }
+  );
+}
+function DashboardLayout({
+  children,
+  logo,
+  sidebarItems = [],
+  currentPath,
+  isItemActive = defaultIsItemActive,
+  renderLink = DefaultLink,
+  user,
+  header,
+  sidebar: sidebarConfig,
+  mobile,
+  content,
+  layout: layoutConfig,
+  headerActions,
+  sidebarBottomPanel,
+  sidebarFooter,
+  sidebarHeader,
+  footer,
+  variant = "classic",
+  density = "comfortable",
+  styles,
+  className,
+  style
+}) {
+  const theme = useTheme();
+  const themeStyles = getThemeStyles(theme.layout?.DashboardLayout);
+  const mergedStyles = useMemo(() => ({ ...themeStyles, ...styles }), [themeStyles, styles]);
+  const layout = useMemo(
+    () => ({
+      ...defaultLayoutConfig,
+      ...layoutConfig,
+      borders: {
+        ...defaultLayoutConfig.borders,
+        ...layoutConfig?.borders
+      },
+      background: {
+        ...defaultLayoutConfig.background,
+        ...layoutConfig?.background
+      },
+      backgroundComponents: {
+        ...defaultLayoutConfig.backgroundComponents,
+        ...layoutConfig?.backgroundComponents
+      }
+    }),
+    [layoutConfig]
+  );
+  const sidebar = { ...defaultSidebar, ...sidebarConfig };
+  const [collapsed, setCollapsed] = useControllableState({
+    value: sidebarConfig?.collapsed,
+    defaultValue: sidebar.defaultCollapsed,
+    onChange: sidebarConfig?.onCollapsedChange
+  });
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const [breadcrumbsVisible, setBreadcrumbsVisible] = useState(true);
+  const lastMainScrollTopRef = useRef(0);
+  const breadcrumbScrollIntentRef = useRef(0);
+  const mobileOpenRef = useRef(mobileOpen);
+  const mobileDrawerHistoryEntryActiveRef = useRef(false);
+  const mobileDrawerClosingFromHistoryRef = useRef(false);
+  const skipNextDrawerPopstateRef = useRef(false);
+  const showBottomNav = Boolean(mobile?.bottomNav && (mobile.bottomNavItems?.length || mobile.utilityItems?.length));
+  const breadcrumbBehavior = header?.breadcrumbBehavior ?? "hide-on-scroll";
+  useEffect(() => {
+    mobileOpenRef.current = mobileOpen;
+  }, [mobileOpen]);
+  useEffect(() => {
+    setBreadcrumbsVisible(true);
+    lastMainScrollTopRef.current = 0;
+    breadcrumbScrollIntentRef.current = 0;
+  }, [currentPath]);
+  useEffect(() => {
+    if (mobile?.drawer === false || typeof window === "undefined") {
+      return;
+    }
+    const handlePopState = () => {
+      if (skipNextDrawerPopstateRef.current) {
+        skipNextDrawerPopstateRef.current = false;
+        return;
+      }
+      if (mobileDrawerHistoryEntryActiveRef.current && mobileOpenRef.current) {
+        mobileDrawerClosingFromHistoryRef.current = true;
+        mobileDrawerHistoryEntryActiveRef.current = false;
+        setMobileOpen(false);
+      }
+    };
+    window.addEventListener("popstate", handlePopState);
+    return () => window.removeEventListener("popstate", handlePopState);
+  }, [mobile?.drawer]);
+  useEffect(() => {
+    if (mobile?.drawer === false || typeof window === "undefined") {
+      return;
+    }
+    if (mobileOpen) {
+      if (!mobileDrawerHistoryEntryActiveRef.current) {
+        window.history.pushState({ ...window.history.state ?? {}, __clayerMobileDrawer: true }, "", window.location.href);
+        mobileDrawerHistoryEntryActiveRef.current = true;
+      }
+      return;
+    }
+    if (mobileDrawerClosingFromHistoryRef.current) {
+      mobileDrawerClosingFromHistoryRef.current = false;
+      return;
+    }
+    if (mobileDrawerHistoryEntryActiveRef.current) {
+      mobileDrawerHistoryEntryActiveRef.current = false;
+      skipNextDrawerPopstateRef.current = true;
+      window.history.back();
+    }
+  }, [mobile?.drawer, mobileOpen]);
+  const handleMainScroll = useCallback(
+    (event) => {
+      if (!header?.showBreadcrumbs || breadcrumbBehavior === "static") {
+        return;
+      }
+      const nextScrollTop = event.currentTarget.scrollTop;
+      const maxScrollTop = Math.max(0, event.currentTarget.scrollHeight - event.currentTarget.clientHeight);
+      const previousScrollTop = lastMainScrollTopRef.current;
+      const delta = nextScrollTop - previousScrollTop;
+      const clampedNextScrollTop = Math.max(0, nextScrollTop);
+      const distanceFromBottom = Math.max(0, maxScrollTop - clampedNextScrollTop);
+      if (Math.abs(delta) < 2) {
+        lastMainScrollTopRef.current = clampedNextScrollTop;
+        return;
+      }
+      if (clampedNextScrollTop < 16) {
+        if (!breadcrumbsVisible) {
+          setBreadcrumbsVisible(true);
+        }
+        lastMainScrollTopRef.current = clampedNextScrollTop;
+        breadcrumbScrollIntentRef.current = 0;
+        return;
+      }
+      const isSameDirection = Math.sign(delta) === Math.sign(breadcrumbScrollIntentRef.current) || breadcrumbScrollIntentRef.current === 0;
+      breadcrumbScrollIntentRef.current = isSameDirection ? breadcrumbScrollIntentRef.current + delta : delta;
+      const hideThreshold = 18;
+      const showThreshold = 14;
+      const minHideScrollTop = 56;
+      const showResetScrollTop = 28;
+      const bottomIgnoreZone = 24;
+      if (distanceFromBottom < bottomIgnoreZone && delta > 0) {
+        lastMainScrollTopRef.current = clampedNextScrollTop;
+        breadcrumbScrollIntentRef.current = Math.max(0, breadcrumbScrollIntentRef.current);
+        return;
+      }
+      if (breadcrumbsVisible && clampedNextScrollTop > minHideScrollTop && breadcrumbScrollIntentRef.current > hideThreshold) {
+        setBreadcrumbsVisible(false);
+        breadcrumbScrollIntentRef.current = 0;
+      } else if (!breadcrumbsVisible && (clampedNextScrollTop < showResetScrollTop || breadcrumbScrollIntentRef.current < -showThreshold)) {
+        setBreadcrumbsVisible(true);
+        breadcrumbScrollIntentRef.current = 0;
+      }
+      lastMainScrollTopRef.current = clampedNextScrollTop;
+    },
+    [breadcrumbBehavior, breadcrumbsVisible, header?.showBreadcrumbs]
+  );
+  const sidebarProps = {
+    logo,
+    sidebarHeader,
+    sidebarBottomPanel,
+    sidebarFooter,
+    items: sidebarItems,
+    collapsed,
+    onCollapsedChange: setCollapsed,
+    sidebar,
+    currentPath,
+    isItemActive,
+    renderLink,
+    styles: mergedStyles,
+    density,
+    layout
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative h-screen overflow-hidden text-foreground",
+        resolveSurfaceBackgroundClass({
+          value: layout.background.root,
+          hasComponent: Boolean(layout.backgroundComponents.root)
+        }),
+        layoutPaddingClasses[layout.padding],
+        mergedStyles.root,
+        className
+      ),
+      style,
+      children: [
+        /* @__PURE__ */ jsx(SurfaceBackground, { component: layout.backgroundComponents.root }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "relative z-10 flex h-full min-h-0 overflow-hidden",
+              resolveSurfaceBackgroundClass({
+                value: layout.background.shell,
+                hasComponent: Boolean(layout.backgroundComponents.shell)
+              }),
+              layoutRadiusClasses[layout.radius],
+              layoutShadowClasses[layout.shadow],
+              layout.bordered && "border border-border",
+              variant === "floating" && !layoutConfig && "rounded-none lg:rounded-xl lg:border lg:border-border",
+              mergedStyles.shell
+            ),
+            children: [
+              /* @__PURE__ */ jsx(SurfaceBackground, { component: layout.backgroundComponents.shell }),
+              /* @__PURE__ */ jsx(DashboardSidebar, { ...sidebarProps }),
+              /* @__PURE__ */ jsxs("div", { className: cn("relative z-10 flex min-h-0 min-w-0 flex-1 flex-col", mergedStyles.main), children: [
+                mobile?.showHeader !== false ? /* @__PURE__ */ jsx(
+                  DashboardHeader,
+                  {
+                    header,
+                    user,
+                    mobile,
+                    mobileOpen,
+                    setMobileOpen,
+                    renderLink,
+                    headerActions,
+                    styles: mergedStyles,
+                    density,
+                    layout,
+                    breadcrumbsVisible: breadcrumbBehavior === "static" ? true : breadcrumbsVisible
+                  }
+                ) : null,
+                /* @__PURE__ */ jsx(
+                  "main",
+                  {
+                    className: cn("relative min-h-0 min-w-0 flex-1 overflow-y-auto", showBottomNav && "pb-20 lg:pb-0", mergedStyles.main),
+                    onScroll: handleMainScroll,
+                    children: /* @__PURE__ */ jsx("div", { className: "relative z-10", children: /* @__PURE__ */ jsx(DashboardContent, { content, styles: mergedStyles, density, layout, children }) })
+                  }
+                ),
+                footer ? /* @__PURE__ */ jsxs(
+                  "footer",
+                  {
+                    className: cn(
+                      "relative px-4 py-3",
+                      resolveSurfaceBackgroundClass({
+                        value: layout.background.footer,
+                        hasComponent: Boolean(layout.backgroundComponents.footer)
+                      }),
+                      layout.borders.footer && "border-t border-border",
+                      mergedStyles.footer
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx(SurfaceBackground, { component: layout.backgroundComponents.footer }),
+                      /* @__PURE__ */ jsx("div", { className: "relative z-10", children: footer })
+                    ]
+                  }
+                ) : null
+              ] })
+            ]
+          }
+        ),
+        mobile?.drawer !== false ? /* @__PURE__ */ jsx(MobileDrawer, { open: mobileOpen, setOpen: setMobileOpen, sidebarProps, styles: mergedStyles }) : null,
+        mobile?.bottomNav ? /* @__PURE__ */ jsx(
+          MobileBottomNav,
+          {
+            items: mobile.bottomNavItems,
+            currentPath,
+            isItemActive,
+            renderLink,
+            user,
+            userMenuConfig: header?.userMenu,
+            mobileOpen,
+            setMobileOpen,
+            utilityItems: mobile.utilityItems,
+            styles: mergedStyles,
+            layout
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function DashboardShell({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex min-h-screen overflow-hidden bg-inherit text-foreground", className), ...props });
+}
+function DashboardMain({ className, ...props }) {
+  return /* @__PURE__ */ jsx("main", { className: cn("min-w-0 flex-1 overflow-y-auto bg-transparent", className), ...props });
+}
+function DashboardFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx("footer", { className: cn("border-t border-border bg-transparent px-4 py-3", className), ...props });
+}
+function DashboardActionGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-2", className), ...props });
+}
+function SidebarNavItem({ className, ...props }) {
+  return /* @__PURE__ */ jsx("li", { className: cn("list-none", className), ...props });
+}
+function SidebarNavGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx("li", { className: cn("list-none space-y-1", className), ...props });
+}
+export {
+  DashboardActionGroup,
+  DashboardBreadcrumbs,
+  DashboardContent,
+  DashboardFooter,
+  DashboardHeader,
+  DashboardLayout,
+  DashboardMain,
+  MobileBottomNav as DashboardMobileNav,
+  DashboardShell,
+  DashboardSidebar,
+  DashboardUserMenu,
+  SidebarNav,
+  SidebarNavGroup,
+  SidebarNavItem
+};
+//# sourceMappingURL=index.js.map