@classytic/fluid 0.2.1 → 0.3.2

package/dist/dashboard.mjs

@@ -0,0 +1,1617 @@
+"use client";
+
+import { t as cn } from "./utils-DQ5SCVoW.mjs";
+import { t as useIsMobile } from "./use-mobile-BX3SQVo2.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Skeleton } from "@/components/ui/skeleton";
+import * as React$1 from "react";
+import React, { Suspense, useState } from "react";
+import { Building2, Check, ChevronLeft, ChevronRight, ChevronsUpDown, CircleUserRound, LogOut, Menu } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+import { Badge } from "@/components/ui/badge";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Sheet, SheetContent, SheetDescription, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { Separator } from "@/components/ui/separator";
+import Link from "next/link";
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@/components/ui/breadcrumb";
+import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarRail, SidebarTrigger, useSidebar } from "@/components/ui/sidebar";
+
+//#region src/dashboard/nav-utils.ts
+/** Check hidden flag, then canAccess(ctx) */
+function isItemVisible(item, ctx) {
+	if (item.hidden) return false;
+	if (item.canAccess && !item.canAccess(ctx)) return false;
+	return true;
+}
+/** Resolve badgeCount(ctx), falling back to static badge */
+function resolveBadge(item, ctx) {
+	if (item.badgeCount) {
+		const value = item.badgeCount(ctx);
+		if (value !== void 0) return {
+			...item,
+			badge: value
+		};
+	}
+	return item;
+}
+/**
+* resolveNavigation — Filter NavGroup[] by permissions and resolve dynamic badges.
+* For InsetSidebar, FloatingSidebar, and any component using NavGroup[].
+*
+* When `ctx` is omitted, only `hidden` checks apply (backwards-compat).
+*/
+function resolveNavigation(groups, ctx) {
+	const result = [];
+	for (const group of groups) {
+		const filteredItems = [];
+		for (const item of group.items) {
+			if (ctx !== void 0 && !isItemVisible(item, ctx)) continue;
+			if (ctx === void 0 && item.hidden) continue;
+			let resolved = ctx !== void 0 ? resolveBadge(item, ctx) : item;
+			if (resolved.items && resolved.items.length > 0) {
+				const filteredSubs = resolved.items.filter((sub) => {
+					if (ctx !== void 0) return isItemVisible(sub, ctx);
+					return !sub.hidden;
+				}).map((sub) => ctx !== void 0 ? resolveBadge(sub, ctx) : sub);
+				resolved = {
+					...resolved,
+					items: filteredSubs
+				};
+			}
+			filteredItems.push(resolved);
+		}
+		if (filteredItems.length > 0) result.push({
+			...group,
+			items: filteredItems
+		});
+	}
+	return result;
+}
+/**
+* resolveMiniNavigation — Filter MiniSidebarGroup[] by permissions.
+*/
+function resolveMiniNavigation(groups, ctx) {
+	const result = [];
+	for (const group of groups) {
+		const filteredItems = group.items.filter((item) => {
+			if (ctx !== void 0) return isItemVisible(item, ctx);
+			return !item.hidden;
+		}).map((item) => ctx !== void 0 ? resolveBadge(item, ctx) : item);
+		if (filteredItems.length > 0) result.push({
+			...group,
+			items: filteredItems
+		});
+	}
+	return result;
+}
+/**
+* resolveCategories — Filter category arrays by permissions.
+* Works with DualSidebarCategory[] and TopbarRailCategory[].
+*/
+function resolveCategories(categories, ctx) {
+	const result = [];
+	for (const category of categories) {
+		if (ctx !== void 0 && !isItemVisible(category, ctx)) continue;
+		if (ctx === void 0 && category.hidden) continue;
+		const filteredItems = category.items.filter((item) => {
+			if (ctx !== void 0) return isItemVisible(item, ctx);
+			return !item.hidden;
+		}).map((item) => ctx !== void 0 ? resolveBadge(item, ctx) : item);
+		if (filteredItems.length > 0) result.push({
+			...category,
+			items: filteredItems
+		});
+	}
+	return result;
+}
+
+//#endregion
+//#region src/dashboard/header-section.tsx
+const variants = {
+	default: {
+		wrapper: "px-6 py-5 rounded-xl shadow-sm border bg-background hover:shadow-md",
+		title: "text-2xl font-semibold tracking-tight",
+		description: "text-sm text-muted-foreground",
+		iconSize: "size-10",
+		iconInner: "size-5",
+		spacing: "space-y-1"
+	},
+	compact: {
+		wrapper: "px-4 py-3 rounded-lg border bg-background/50",
+		title: "text-lg font-semibold",
+		description: "text-xs text-muted-foreground",
+		iconSize: "size-8",
+		iconInner: "size-4",
+		spacing: "space-y-0.5"
+	},
+	hero: {
+		wrapper: "px-8 py-8 rounded-2xl shadow-lg border bg-gradient-to-br from-background to-muted/20",
+		title: "text-3xl font-bold tracking-tight bg-gradient-to-r from-foreground to-foreground/70 bg-clip-text text-transparent",
+		description: "text-base text-muted-foreground mt-2",
+		iconSize: "size-14",
+		iconInner: "size-7",
+		spacing: "space-y-2"
+	},
+	minimal: {
+		wrapper: "px-0 py-2",
+		title: "text-xl font-medium",
+		description: "text-sm text-muted-foreground",
+		iconSize: "size-8",
+		iconInner: "size-4",
+		spacing: "space-y-0.5"
+	}
+};
+function HeaderSection({ title, description, actions = null, icon: Icon = null, iconClassName, loading = false, variant = "default", className, badge, breadcrumbs, metadata, children }) {
+	const currentVariant = variants[variant] || variants.default;
+	const isBadgeObject = (badge) => {
+		return typeof badge === "object" && badge !== null && "text" in badge;
+	};
+	if (loading && !title) return /* @__PURE__ */ jsx("div", {
+		className: cn(currentVariant.wrapper, "transition-all duration-300", className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col sm:flex-row sm:items-center sm:justify-between",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-4",
+				children: [Icon && /* @__PURE__ */ jsx(Skeleton, { className: cn(currentVariant.iconSize, "rounded-lg") }), /* @__PURE__ */ jsxs("div", {
+					className: currentVariant.spacing,
+					children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-48" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-64 mt-1" })]
+				})]
+			}), actions && /* @__PURE__ */ jsxs("div", {
+				className: "flex gap-2 mt-4 sm:mt-0",
+				children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-24" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-24" })]
+			})]
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("transition-all duration-300", currentVariant.wrapper, className),
+		children: [
+			breadcrumbs && /* @__PURE__ */ jsx("nav", {
+				className: "mb-3 text-sm text-muted-foreground",
+				children: breadcrumbs
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-start sm:items-center gap-4",
+					children: [Icon && /* @__PURE__ */ jsx("div", {
+						className: cn("flex aspect-square items-center justify-center rounded-lg flex-shrink-0", "bg-primary/10 text-primary", currentVariant.iconSize, iconClassName),
+						children: /* @__PURE__ */ jsx(Icon, { className: currentVariant.iconInner })
+					}), /* @__PURE__ */ jsxs("div", {
+						className: cn("flex-1", currentVariant.spacing),
+						children: [
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex items-center gap-2 flex-wrap",
+								children: [/* @__PURE__ */ jsx("h1", {
+									className: cn("leading-none", currentVariant.title),
+									children: title
+								}), badge && (isBadgeObject(badge) ? /* @__PURE__ */ jsx(Badge, {
+									variant: badge.variant || "secondary",
+									className: cn("ml-2", badge.className),
+									children: badge.text
+								}) : badge)]
+							}),
+							description && /* @__PURE__ */ jsx("p", {
+								className: currentVariant.description,
+								children: description
+							}),
+							metadata && /* @__PURE__ */ jsx("div", {
+								className: "flex items-center gap-4 mt-2 text-xs text-muted-foreground",
+								children: metadata.map((item, index) => /* @__PURE__ */ jsxs("div", {
+									className: "flex items-center gap-1",
+									children: [item.icon && /* @__PURE__ */ jsx(item.icon, { className: "size-3" }), /* @__PURE__ */ jsx("span", { children: item.text })]
+								}, index))
+							})
+						]
+					})]
+				}), actions && /* @__PURE__ */ jsx("div", {
+					className: "flex flex-wrap gap-2 mt-4 sm:mt-0",
+					children: actions.map((action, index) => {
+						const isActionLoading = action.loading ?? false;
+						const isDisabled = loading || action.disabled || isActionLoading;
+						const displayText = isActionLoading ? action.loadingText || action.text : action.text;
+						return /* @__PURE__ */ jsxs(Button, {
+							onClick: action.onClick,
+							disabled: isDisabled,
+							variant: action.variant || "default",
+							size: action.size || (variant === "compact" ? "sm" : "default"),
+							className: cn(variant === "hero" && "shadow-md hover:shadow-lg", action.className),
+							children: [
+								action.icon && action.iconPosition !== "right" && /* @__PURE__ */ jsx(action.icon, { className: "size-4 mr-2" }),
+								/* @__PURE__ */ jsx("span", { children: displayText }),
+								action.icon && action.iconPosition === "right" && /* @__PURE__ */ jsx(action.icon, { className: "size-4 ml-2" })
+							]
+						}, index);
+					})
+				})]
+			}),
+			children && /* @__PURE__ */ jsx("div", {
+				className: cn("mt-4 pt-4 border-t", variant === "minimal" && "border-0 pt-2"),
+				children
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/dashboard/page-header.tsx
+function PageHeader({ items, className, actions }) {
+	return /* @__PURE__ */ jsxs("header", {
+		className: cn("flex h-12 shrink-0 items-center justify-between gap-2", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [
+				/* @__PURE__ */ jsx(SidebarTrigger, { className: "-ml-1" }),
+				/* @__PURE__ */ jsx(Separator, {
+					orientation: "vertical",
+					className: "!self-center h-4"
+				}),
+				/* @__PURE__ */ jsx(Breadcrumb, { children: /* @__PURE__ */ jsx(BreadcrumbList, { children: items.map((item, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [/* @__PURE__ */ jsx(BreadcrumbItem, {
+					className: item.current ? "" : "hidden md:block",
+					children: item.current ? /* @__PURE__ */ jsx(BreadcrumbPage, { children: item.label }) : /* @__PURE__ */ jsx(BreadcrumbLink, {
+						render: /* @__PURE__ */ jsx(Link, { href: item.href || "#" }),
+						children: item.label
+					})
+				}), index < items.length - 1 && /* @__PURE__ */ jsx(BreadcrumbSeparator, { className: "hidden md:block" })] }, `breadcrumb-${index}`)) }) })
+			]
+		}), actions]
+	});
+}
+
+//#endregion
+//#region src/dashboard/dashboard-content.tsx
+const PADDING = {
+	none: "",
+	sm: "px-2",
+	md: "px-4",
+	lg: "px-6 lg:px-8"
+};
+/**
+* DashboardContent — Safe content wrapper for sidebar layouts.
+*
+* Prevents the classic flexbox overflow bug where children with
+* `max-w-*` or grid layouts extend beyond the available space
+* (behind the sidebar) by propagating `min-w-0` through the
+* flex chain.
+*
+* **Important**: `SidebarInset` also needs `min-w-0` for the
+* width constraint to propagate correctly from the flex parent.
+* Pass `className="min-w-0"` to `SidebarInset`.
+*
+* @example
+* ```tsx
+* <SidebarProvider>
+*   <AppSidebar />
+*   <SidebarInset className="min-w-0">
+*     <DashboardContent>
+*       <PageHeader items={breadcrumbs} />
+*       <MyPageContent />
+*     </DashboardContent>
+*   </SidebarInset>
+* </SidebarProvider>
+* ```
+*/
+function DashboardContent({ children, className, container = true, padding = "md" }) {
+	const containerClass = container === true ? "@container/main" : typeof container === "string" ? `@container/${container}` : "";
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex flex-1 flex-col min-w-0", className),
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("flex flex-1 flex-col gap-2 min-w-0", containerClass, PADDING[padding]),
+			children
+		})
+	});
+}
+
+//#endregion
+//#region src/dashboard/dashboard-page-layout.tsx
+const defaultFallback = /* @__PURE__ */ jsx("div", {
+	className: "flex items-center justify-center py-12",
+	children: /* @__PURE__ */ jsx("div", { className: "h-6 w-6 animate-spin rounded-full border-2 border-primary border-t-transparent" })
+});
+/**
+* DashboardPageLayout — Standard page shell for dashboard pages.
+* Combines PageHeader (breadcrumbs + actions) with optional Suspense boundary.
+*
+* @example
+* ```tsx
+* <DashboardPageLayout
+*   breadcrumbs={[
+*     { label: "Dashboard", href: "/dashboard" },
+*     { label: "Posts", current: true },
+*   ]}
+*   actions={<Button>New Post</Button>}
+*   fallback={<SkeletonTable rows={5} />}
+* >
+*   <PostsList />
+* </DashboardPageLayout>
+* ```
+*/
+function DashboardPageLayout({ breadcrumbs, actions, suspense = true, fallback = defaultFallback, className, children }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(PageHeader, {
+		items: breadcrumbs,
+		actions
+	}), /* @__PURE__ */ jsx("div", {
+		className: cn("flex-1", className),
+		children: suspense ? /* @__PURE__ */ jsx(Suspense, {
+			fallback,
+			children
+		}) : children
+	})] });
+}
+
+//#endregion
+//#region src/dashboard/sidebar-brand.tsx
+/**
+* SidebarBrand - Logo and title section for dashboard sidebar.
+* Automatically handles collapsed state styling.
+*/
+function SidebarBrand({ title, icon, href = "/", className, tooltip }) {
+	const { isMobile, state } = useSidebar();
+	const isCollapsed = state === "collapsed";
+	return /* @__PURE__ */ jsx(SidebarMenu, {
+		className,
+		children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(SidebarMenuButton, {
+			size: "lg",
+			className: "group-data-[collapsible=icon]:p-0!",
+			tooltip: isCollapsed ? tooltip || title : void 0,
+			render: /* @__PURE__ */ jsx(Link, {
+				href,
+				className: cn("flex items-center text-sidebar-foreground", isCollapsed && !isMobile && "justify-center")
+			}),
+			children: [/* @__PURE__ */ jsx("div", {
+				className: cn("rounded-lg flex items-center justify-center bg-sidebar-primary text-sidebar-primary-foreground shadow-sm flex-shrink-0 transition-[width,height]", isCollapsed && !isMobile ? "h-6 w-6" : "h-8 w-8"),
+				children: icon
+			}), /* @__PURE__ */ jsx("span", {
+				className: cn("ml-2 font-semibold tracking-tight truncate", !isMobile && isCollapsed && "hidden"),
+				children: title
+			})]
+		}) })
+	});
+}
+
+//#endregion
+//#region src/dashboard/sidebar-nav.tsx
+/**
+* SidebarNavItem - Single navigation item with optional sub-items.
+*/
+function SidebarNavItem({ item, onClick }) {
+	const hasSubItems = item.items && item.items.length > 0;
+	const Icon = item.icon;
+	const [open, setOpen] = useState(item.isActive ?? false);
+	if (hasSubItems) return /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(Collapsible, {
+		open,
+		onOpenChange: setOpen,
+		className: "group/collapsible",
+		children: [/* @__PURE__ */ jsxs(CollapsibleTrigger, {
+			render: /* @__PURE__ */ jsx(SidebarMenuButton, {}),
+			children: [
+				Icon && /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" }),
+				/* @__PURE__ */ jsx("span", { children: item.title }),
+				item.badge && /* @__PURE__ */ jsx("span", {
+					className: "ml-auto text-xs bg-sidebar-accent text-sidebar-accent-foreground px-1.5 py-0.5 rounded",
+					children: item.badge
+				}),
+				/* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto h-4 w-4 transition-transform duration-200 group-data-open/collapsible:rotate-90" })
+			]
+		}), /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx(SidebarMenuSub, { children: item.items.map((subItem, idx) => /* @__PURE__ */ jsx(SidebarMenuSubItem, { children: /* @__PURE__ */ jsxs(SidebarMenuSubButton, {
+			render: /* @__PURE__ */ jsx(Link, { href: subItem.url }),
+			isActive: subItem.isActive,
+			children: [/* @__PURE__ */ jsx("span", { children: subItem.title }), subItem.badge && /* @__PURE__ */ jsx("span", {
+				className: "ml-auto text-xs opacity-60",
+				children: subItem.badge
+			})]
+		}) }, `${item.title}-${subItem.title}-${idx}`)) }) })]
+	}) });
+	return /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(Link, {
+		href: item.url,
+		className: "w-full",
+		children: /* @__PURE__ */ jsxs(SidebarMenuButton, {
+			isActive: item.isActive,
+			onClick,
+			children: [
+				Icon && /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" }),
+				/* @__PURE__ */ jsx("span", { children: item.title }),
+				item.badge && /* @__PURE__ */ jsx("span", {
+					className: "ml-auto text-xs bg-sidebar-accent text-sidebar-accent-foreground px-1.5 py-0.5 rounded",
+					children: item.badge
+				})
+			]
+		})
+	}) });
+}
+/**
+* SidebarNavGroup - A group of navigation items with optional title.
+*/
+function SidebarNavGroup({ title, items, className, onItemClick }) {
+	return /* @__PURE__ */ jsxs(SidebarGroup, {
+		className,
+		children: [title && /* @__PURE__ */ jsx(SidebarGroupLabel, { children: title }), /* @__PURE__ */ jsx(SidebarMenu, { children: items.map((item, idx) => /* @__PURE__ */ jsx(SidebarNavItem, {
+			item,
+			onClick: () => onItemClick?.(item)
+		}, `${item.title}-${idx}`)) })]
+	});
+}
+/**
+* SidebarNav - Complete navigation section with multiple groups.
+*/
+function SidebarNav({ groups, className, onItemClick }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex flex-col gap-2", className),
+		children: groups.map((group, index) => /* @__PURE__ */ jsx(SidebarNavGroup, {
+			title: group.title,
+			items: group.items,
+			onItemClick
+		}, group.title || `nav-group-${index}`))
+	});
+}
+
+//#endregion
+//#region src/dashboard/sidebar-user-menu.tsx
+function getUserInitials$1(name) {
+	if (!name) return "?";
+	const names = name.trim().split(" ");
+	if (names.length === 1) return names[0].slice(0, 2).toUpperCase();
+	return (names[0][0] + names[names.length - 1][0]).toUpperCase();
+}
+function UserAvatar({ user, className }) {
+	return /* @__PURE__ */ jsxs(Avatar, {
+		className: cn("h-8 w-8 rounded-lg", className),
+		children: [/* @__PURE__ */ jsx(AvatarImage, {
+			src: user.avatar,
+			alt: user.name
+		}), /* @__PURE__ */ jsx(AvatarFallback, {
+			className: "rounded-lg bg-sidebar-primary text-sidebar-primary-foreground",
+			children: getUserInitials$1(user.name)
+		})]
+	});
+}
+function UserInfo({ user }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "grid flex-1 text-left text-sm leading-tight",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "truncate font-semibold",
+			children: user.name
+		}), /* @__PURE__ */ jsx("span", {
+			className: "truncate text-xs text-muted-foreground",
+			children: user.email
+		})]
+	});
+}
+/**
+* SidebarUserMenu - User avatar and dropdown menu for sidebar footer.
+* Accepts handlers for logout and custom menu items.
+*/
+function SidebarUserMenu({ user, menuItems = [], onLogout, className }) {
+	const { isMobile, state } = useSidebar();
+	const isCollapsed = state === "collapsed";
+	const defaultItems = [{
+		label: "Account",
+		icon: CircleUserRound,
+		href: "/dashboard/profile"
+	}];
+	const items = menuItems.length > 0 ? menuItems : defaultItems;
+	return /* @__PURE__ */ jsx(SidebarMenu, {
+		className,
+		children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(DropdownMenuTrigger, {
+			render: /* @__PURE__ */ jsx(SidebarMenuButton, {
+				size: "lg",
+				tooltip: isCollapsed ? user.name : void 0,
+				className: cn("data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground", isCollapsed && !isMobile && "justify-center")
+			}),
+			children: [/* @__PURE__ */ jsx(UserAvatar, { user }), (!isCollapsed || isMobile) && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(UserInfo, { user }), /* @__PURE__ */ jsx(ChevronsUpDown, { className: "ml-auto size-4" })] })]
+		}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+			className: "w-(--anchor-width) min-w-56 rounded-lg",
+			side: isMobile ? "bottom" : "right",
+			align: "end",
+			sideOffset: 4,
+			children: [
+				/* @__PURE__ */ jsx(DropdownMenuGroup, { children: /* @__PURE__ */ jsx(DropdownMenuLabel, {
+					className: "p-0 font-normal",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2 px-1 py-1.5 text-left text-sm",
+						children: [/* @__PURE__ */ jsx(UserAvatar, { user }), /* @__PURE__ */ jsx(UserInfo, { user })]
+					})
+				}) }),
+				/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+				/* @__PURE__ */ jsx(DropdownMenuGroup, { children: items.map((item, index) => /* @__PURE__ */ jsxs(React$1.Fragment, { children: [item.separator && index > 0 && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}), item.href ? /* @__PURE__ */ jsxs(DropdownMenuItem, {
+					render: /* @__PURE__ */ jsx(Link, { href: item.href }),
+					className: "w-full flex items-center",
+					children: [item.icon && /* @__PURE__ */ jsx(item.icon, { className: "mr-2 h-4 w-4" }), item.label]
+				}) : /* @__PURE__ */ jsxs(DropdownMenuItem, {
+					onClick: item.onClick,
+					className: "w-full flex items-center",
+					children: [item.icon && /* @__PURE__ */ jsx(item.icon, { className: "mr-2 h-4 w-4" }), item.label]
+				})] }, item.label)) }),
+				onLogout && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(DropdownMenuSeparator, {}), /* @__PURE__ */ jsxs(DropdownMenuItem, {
+					onClick: onLogout,
+					className: "w-full flex items-center",
+					children: [/* @__PURE__ */ jsx(LogOut, { className: "mr-2 h-4 w-4" }), "Log out"]
+				})] })
+			]
+		})] }) })
+	});
+}
+
+//#endregion
+//#region src/dashboard/project-switcher.tsx
+function DropdownContent({ items, selected, onSelect, label, renderItem, isMobile = false }) {
+	return /* @__PURE__ */ jsx(DropdownMenuContent, {
+		className: "w-64 rounded-lg",
+		side: isMobile ? "bottom" : "right",
+		align: "start",
+		sideOffset: 4,
+		children: /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [/* @__PURE__ */ jsx(DropdownMenuLabel, {
+			className: "text-xs text-muted-foreground font-normal",
+			children: label
+		}), items.map((item) => {
+			const isSelected = selected.id === item.id;
+			if (renderItem) return /* @__PURE__ */ jsx(DropdownMenuItem, {
+				onClick: () => onSelect(item),
+				className: "cursor-pointer",
+				children: renderItem(item, isSelected)
+			}, item.id);
+			return /* @__PURE__ */ jsx(DropdownMenuItem, {
+				onClick: () => onSelect(item),
+				className: "gap-2 cursor-pointer",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "flex-1 min-w-0",
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center justify-between gap-2",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "font-medium text-sm truncate",
+								children: item.name
+							}), isSelected && /* @__PURE__ */ jsx(Check, { className: "size-3.5 text-primary shrink-0" })]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-1.5 mt-0.5",
+							children: [
+								item.code && /* @__PURE__ */ jsx("span", {
+									className: "text-xs text-muted-foreground",
+									children: item.code
+								}),
+								item.type && /* @__PURE__ */ jsxs(Fragment, { children: [item.code && /* @__PURE__ */ jsx("span", {
+									className: "text-xs text-muted-foreground",
+									children: "•"
+								}), /* @__PURE__ */ jsx(Badge, {
+									variant: "outline",
+									className: "text-[10px] h-4 px-1",
+									children: item.type
+								})] }),
+								item.isDefault && /* @__PURE__ */ jsx(Badge, {
+									variant: "secondary",
+									className: "text-[10px] h-4 px-1",
+									children: "Default"
+								}),
+								item.isActive === false && /* @__PURE__ */ jsx(Badge, {
+									variant: "destructive",
+									className: "text-[10px] h-4 px-1",
+									children: "Inactive"
+								})
+							]
+						}),
+						item.subtitle && /* @__PURE__ */ jsx("p", {
+							className: "text-[10px] text-muted-foreground mt-0.5 truncate",
+							children: item.subtitle
+						})
+					]
+				})
+			}, item.id);
+		})] })
+	});
+}
+function SidebarLoadingSkeleton({ isCollapsed, isMobile }) {
+	return /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(SidebarMenuButton, {
+		className: cn("h-10 py-1.5 bg-sidebar-accent/50", isCollapsed && !isMobile && "justify-center"),
+		disabled: true,
+		children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-4 rounded-sm shrink-0" }), (!isCollapsed || isMobile) && /* @__PURE__ */ jsxs("div", {
+			className: "flex-1 min-w-0 space-y-1",
+			children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-24" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-2.5 w-14" })]
+		})]
+	}) }) });
+}
+function SidebarProjectDisplay({ project, Icon, isCollapsed, isMobile }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 text-muted-foreground shrink-0" }), (!isCollapsed || isMobile) && /* @__PURE__ */ jsxs("div", {
+		className: "flex-1 min-w-0 leading-tight text-left",
+		children: [/* @__PURE__ */ jsx("p", {
+			className: "text-xs font-medium truncate",
+			children: project.name
+		}), project.code && /* @__PURE__ */ jsx("p", {
+			className: "text-[10px] text-muted-foreground truncate",
+			children: project.code
+		})]
+	})] });
+}
+function StandaloneLoadingSkeleton({ size }) {
+	return /* @__PURE__ */ jsxs(Button, {
+		variant: "outline",
+		size,
+		className: cn("gap-2", size === "sm" ? "h-8" : "h-9"),
+		disabled: true,
+		children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-4 rounded-sm" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-20" })]
+	});
+}
+function StandaloneProjectDisplay({ project, Icon, size }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(Icon, { className: cn("text-muted-foreground shrink-0", size === "sm" ? "h-3.5 w-3.5" : "h-4 w-4") }),
+		/* @__PURE__ */ jsx("span", {
+			className: cn("font-medium truncate max-w-[120px]", size === "sm" ? "text-xs" : "text-sm"),
+			children: project.name
+		}),
+		project.code && /* @__PURE__ */ jsxs("span", {
+			className: cn("text-muted-foreground truncate", size === "sm" ? "text-[10px]" : "text-xs"),
+			children: [
+				"(",
+				project.code,
+				")"
+			]
+		})
+	] });
+}
+/**
+* ProjectSwitcher - Generic project/workspace/branch switcher.
+* Works for any entity that needs switching functionality.
+*
+* @example Sidebar usage (inside SidebarProvider)
+* ```tsx
+* <ProjectSwitcher
+*   items={projects}
+*   selected={selectedProject}
+*   onSelect={setSelectedProject}
+* />
+* ```
+*
+* @example Header/Standalone usage (no SidebarProvider needed)
+* ```tsx
+* <ProjectSwitcher
+*   variant="standalone"
+*   items={projects}
+*   selected={selectedProject}
+*   onSelect={setSelectedProject}
+*   size="sm"
+* />
+* ```
+*/
+function ProjectSwitcher({ items, selected, onSelect, isLoading = false, label = "Switch Project", icon: Icon = Building2, className, disabled = false, variant = "sidebar", size = "default", renderItem }) {
+	const hasMultipleItems = items.length > 1;
+	if (variant === "standalone") {
+		if (isLoading) return /* @__PURE__ */ jsx(StandaloneLoadingSkeleton, { size });
+		if (!selected) return null;
+		if (!hasMultipleItems || disabled) return /* @__PURE__ */ jsx(Button, {
+			variant: "outline",
+			size,
+			className: cn("gap-2 cursor-default", size === "sm" ? "h-8" : "h-9", className),
+			disabled: true,
+			children: /* @__PURE__ */ jsx(StandaloneProjectDisplay, {
+				project: selected,
+				Icon,
+				size
+			})
+		});
+		return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(DropdownMenuTrigger, {
+			render: /* @__PURE__ */ jsx(Button, {
+				variant: "outline",
+				size,
+				className: cn("gap-2", size === "sm" ? "h-8" : "h-9", className)
+			}),
+			children: [/* @__PURE__ */ jsx(StandaloneProjectDisplay, {
+				project: selected,
+				Icon,
+				size
+			}), /* @__PURE__ */ jsx(ChevronsUpDown, { className: cn("text-muted-foreground shrink-0", size === "sm" ? "h-3 w-3" : "h-3.5 w-3.5") })]
+		}), /* @__PURE__ */ jsx(DropdownContent, {
+			items,
+			selected,
+			onSelect,
+			label,
+			renderItem
+		})] });
+	}
+	const { isMobile, state } = useSidebar();
+	const isCollapsed = state === "collapsed";
+	if (isLoading) return /* @__PURE__ */ jsx(SidebarLoadingSkeleton, {
+		isCollapsed,
+		isMobile
+	});
+	if (!selected) return null;
+	if (!hasMultipleItems || disabled) return /* @__PURE__ */ jsx(SidebarMenu, {
+		className,
+		children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(SidebarMenuButton, {
+			className: cn("h-10 py-1.5 bg-sidebar-accent/50", isCollapsed && !isMobile && "justify-center"),
+			tooltip: isCollapsed ? selected.name : void 0,
+			disabled: true,
+			children: /* @__PURE__ */ jsx(SidebarProjectDisplay, {
+				project: selected,
+				Icon,
+				isCollapsed,
+				isMobile
+			})
+		}) })
+	});
+	return /* @__PURE__ */ jsx(SidebarMenu, {
+		className,
+		children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(DropdownMenuTrigger, {
+			render: /* @__PURE__ */ jsx(SidebarMenuButton, {
+				className: cn("h-10 py-1.5 bg-sidebar-accent/50 hover:bg-sidebar-accent transition-colors", isCollapsed && !isMobile && "justify-center"),
+				tooltip: isCollapsed ? selected.name : void 0
+			}),
+			children: [/* @__PURE__ */ jsx(SidebarProjectDisplay, {
+				project: selected,
+				Icon,
+				isCollapsed,
+				isMobile
+			}), (!isCollapsed || isMobile) && /* @__PURE__ */ jsx(ChevronsUpDown, { className: "h-3 w-3 text-muted-foreground shrink-0" })]
+		}), /* @__PURE__ */ jsx(DropdownContent, {
+			items,
+			selected,
+			onSelect,
+			label,
+			renderItem,
+			isMobile
+		})] }) })
+	});
+}
+
+//#endregion
+//#region src/dashboard/dashboard-header.tsx
+function BreadcrumbNav({ items }) {
+	return /* @__PURE__ */ jsx(Breadcrumb, { children: /* @__PURE__ */ jsx(BreadcrumbList, { children: items.map((item, index) => /* @__PURE__ */ jsxs(React$1.Fragment, { children: [/* @__PURE__ */ jsx(BreadcrumbItem, {
+		className: item.current ? "" : "hidden md:block",
+		children: item.current ? /* @__PURE__ */ jsx(BreadcrumbPage, { children: item.label }) : /* @__PURE__ */ jsx(BreadcrumbLink, {
+			render: /* @__PURE__ */ jsx(Link, { href: item.href || "#" }),
+			children: item.label
+		})
+	}), index < items.length - 1 && /* @__PURE__ */ jsx(BreadcrumbSeparator, { className: "hidden md:block" })] }, `breadcrumb-${index}`)) }) });
+}
+/**
+* DashboardHeader - Top header bar for dashboard pages.
+* Includes sidebar trigger, breadcrumbs, and action slots.
+*/
+function DashboardHeader({ breadcrumbs, leftContent, rightContent, showSidebarTrigger = true, customTrigger, className, children }) {
+	return /* @__PURE__ */ jsxs("header", {
+		className: cn("flex h-12 shrink-0 items-center justify-between gap-2 px-4", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [
+				showSidebarTrigger && !customTrigger && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SidebarTrigger, { className: "-ml-1" }), /* @__PURE__ */ jsx(Separator, {
+					orientation: "vertical",
+					className: "mx-2 !h-4 !self-auto"
+				})] }),
+				customTrigger,
+				children ? children : /* @__PURE__ */ jsxs(Fragment, { children: [breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsx(BreadcrumbNav, { items: breadcrumbs }), leftContent] })
+			]
+		}), rightContent && /* @__PURE__ */ jsx("div", {
+			className: "flex items-center gap-2",
+			children: rightContent
+		})]
+	});
+}
+
+//#endregion
+//#region src/dashboard/presets/inset-sidebar.tsx
+/**
+* InsetSidebar - Complete sidebar preset with inset variant.
+* The standard dashboard sidebar with collapsible to icons.
+*/
+function InsetSidebar({ brand, navigation, secondaryNavigation, project, user, headerContent, ariaLabel = "Navigation Menu", className, children }) {
+	const { isMobile } = useSidebar();
+	return /* @__PURE__ */ jsxs(Sidebar, {
+		variant: "inset",
+		collapsible: "icon",
+		className,
+		children: [
+			isMobile && /* @__PURE__ */ jsxs("span", {
+				className: "sr-only",
+				children: [/* @__PURE__ */ jsx(SheetTitle, { children: ariaLabel }), /* @__PURE__ */ jsx(SheetDescription, { children: "Application navigation menu containing links to different sections" })]
+			}),
+			/* @__PURE__ */ jsxs(SidebarHeader, {
+				className: "gap-1",
+				children: [
+					/* @__PURE__ */ jsx(SidebarBrand, {
+						title: brand.title,
+						icon: brand.icon,
+						href: brand.href
+					}),
+					project && /* @__PURE__ */ jsx(ProjectSwitcher, {
+						items: project.items,
+						selected: project.selected,
+						onSelect: project.onSelect,
+						isLoading: project.isLoading,
+						label: project.label,
+						icon: project.icon
+					}),
+					headerContent
+				]
+			}),
+			/* @__PURE__ */ jsx(SidebarContent, { children: children || /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SidebarNav, { groups: navigation }), secondaryNavigation && /* @__PURE__ */ jsx(SidebarNav, {
+				groups: secondaryNavigation,
+				className: "mt-auto"
+			})] }) }),
+			user && /* @__PURE__ */ jsx(SidebarFooter, { children: /* @__PURE__ */ jsx(SidebarUserMenu, {
+				user: user.data,
+				menuItems: user.menuItems,
+				onLogout: user.onLogout
+			}) })
+		]
+	});
+}
+
+//#endregion
+//#region src/dashboard/presets/dual-sidebar.tsx
+const SIDEBAR_RAIL_WIDTH = "3.5rem";
+const SIDEBAR_PANEL_WIDTH = "13rem";
+const SIDEBAR_WIDTH_EXPANDED = "16.5rem";
+const SIDEBAR_WIDTH_COLLAPSED = "3.5rem";
+const SIDEBAR_PADDING = "0.5rem";
+const railVariants$1 = {
+	default: "bg-sidebar",
+	dark: "bg-zinc-900 dark:bg-zinc-950",
+	primary: "bg-primary",
+	muted: "bg-muted"
+};
+const railTextVariants$1 = {
+	default: "text-sidebar-foreground",
+	dark: "text-zinc-100",
+	primary: "text-primary-foreground",
+	muted: "text-muted-foreground"
+};
+/**
+* DualSidebar - A sidebar with icon rail and collapsible expanded panel.
+* Mimics the inset sidebar variant structure for consistent styling.
+*/
+function DualSidebar({ brand, categories, user, defaultCategoryId, onCategoryChange, defaultCollapsed = false, mobileOpen: controlledMobileOpen, onMobileOpenChange, railVariant = "default", ariaLabel = "Navigation Menu", className }) {
+	const [activeCategory, setActiveCategory] = React$1.useState(defaultCategoryId || (categories.length > 0 ? categories[0].id : null));
+	const [isExpanded, setIsExpanded] = React$1.useState(!defaultCollapsed);
+	const [internalMobileOpen, setInternalMobileOpen] = React$1.useState(false);
+	const { isMobile } = useSidebar();
+	const isControlledMobile = controlledMobileOpen !== void 0;
+	const mobileOpen = isControlledMobile ? controlledMobileOpen : internalMobileOpen;
+	const setMobileOpen = React$1.useCallback((open) => {
+		if (isControlledMobile) onMobileOpenChange?.(open);
+		else setInternalMobileOpen(open);
+	}, [isControlledMobile, onMobileOpenChange]);
+	const handleCategorySelect = (id) => {
+		setActiveCategory(id);
+		onCategoryChange?.(id);
+		if (!isExpanded) setIsExpanded(true);
+	};
+	const handleMobileCategorySelect = (id) => {
+		setActiveCategory(id);
+		onCategoryChange?.(id);
+	};
+	const toggleExpanded = () => {
+		setIsExpanded(!isExpanded);
+	};
+	const activeCategoryData = categories.find((c) => c.id === activeCategory) || null;
+	const totalWidth = `calc(${isExpanded ? SIDEBAR_WIDTH_EXPANDED : SIDEBAR_WIDTH_COLLAPSED} + ${SIDEBAR_PADDING} * 2)`;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Sheet, {
+		open: mobileOpen,
+		onOpenChange: setMobileOpen,
+		children: [!isControlledMobile && /* @__PURE__ */ jsx(SheetTrigger, {
+			render: /* @__PURE__ */ jsx(Button, {
+				variant: "outline",
+				size: "icon",
+				className: "md:hidden fixed top-2 left-2 z-40 h-9 w-9 bg-background/80 backdrop-blur-sm shadow-sm",
+				"aria-label": "Open navigation"
+			}),
+			children: /* @__PURE__ */ jsx(Menu, { className: "h-5 w-5" })
+		}), /* @__PURE__ */ jsxs(SheetContent, {
+			side: "left",
+			className: "w-72 p-0",
+			children: [
+				/* @__PURE__ */ jsx(SheetTitle, {
+					className: "sr-only",
+					children: ariaLabel
+				}),
+				/* @__PURE__ */ jsx(SheetDescription, {
+					className: "sr-only",
+					children: "Navigation menu with category icons and expanded content"
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex h-full flex-row",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: cn("flex flex-col shrink-0", railVariants$1[railVariant], railTextVariants$1[railVariant], "border-r border-sidebar-border"),
+						style: {
+							width: SIDEBAR_RAIL_WIDTH,
+							minWidth: SIDEBAR_RAIL_WIDTH
+						},
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "flex items-center justify-center p-2 h-14",
+							children: /* @__PURE__ */ jsx(Link, {
+								href: brand.href || "/",
+								className: cn("flex items-center justify-center h-10 w-10 rounded-lg shadow-sm transition-colors", railVariant === "dark" || railVariant === "primary" ? "bg-white/10 hover:bg-white/20 text-inherit" : "bg-sidebar-primary text-sidebar-primary-foreground"),
+								onClick: () => setMobileOpen(false),
+								children: brand.icon
+							})
+						}), /* @__PURE__ */ jsx("div", {
+							className: "flex-1 flex flex-col gap-1 p-2",
+							children: categories.map((category) => {
+								const Icon = category.icon;
+								return /* @__PURE__ */ jsx("button", {
+									onClick: () => handleMobileCategorySelect(category.id),
+									className: cn("flex items-center justify-center h-10 w-10 rounded-lg transition-colors", activeCategory === category.id ? railVariant === "dark" || railVariant === "primary" ? "bg-white/20" : "bg-sidebar-accent text-sidebar-accent-foreground" : railVariant === "dark" || railVariant === "primary" ? "hover:bg-white/10" : "hover:bg-sidebar-accent/50"),
+									children: /* @__PURE__ */ jsx(Icon, { className: "h-5 w-5" })
+								}, category.id);
+							})
+						})]
+					}), /* @__PURE__ */ jsx("div", {
+						className: "flex-1 flex flex-col bg-sidebar overflow-hidden",
+						children: activeCategoryData ? /* @__PURE__ */ jsxs(Fragment, { children: [
+							/* @__PURE__ */ jsx(SidebarHeader, {
+								className: "h-14 border-b border-sidebar-border px-4 flex items-center shrink-0",
+								children: /* @__PURE__ */ jsxs("div", {
+									className: "flex items-center gap-2",
+									children: [/* @__PURE__ */ jsx(activeCategoryData.icon, { className: "h-5 w-5 text-sidebar-foreground" }), /* @__PURE__ */ jsx("span", {
+										className: "font-semibold text-sidebar-foreground truncate",
+										children: activeCategoryData.name
+									})]
+								})
+							}),
+							/* @__PURE__ */ jsx(SidebarContent, {
+								className: "flex-1 overflow-y-auto",
+								children: /* @__PURE__ */ jsx(SidebarGroup, {
+									className: "p-2",
+									children: /* @__PURE__ */ jsx(SidebarMenu, { children: activeCategoryData.items.map((item, idx) => {
+										const Icon = item.icon;
+										return /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(SidebarMenuButton, {
+											isActive: item.isActive,
+											render: /* @__PURE__ */ jsx(Link, {
+												href: item.url,
+												onClick: () => setMobileOpen(false)
+											}),
+											children: [
+												Icon && /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" }),
+												/* @__PURE__ */ jsx("span", {
+													className: "truncate",
+													children: item.title
+												}),
+												item.badge && /* @__PURE__ */ jsx("span", {
+													className: "ml-auto text-xs bg-sidebar-accent text-sidebar-accent-foreground px-1.5 py-0.5 rounded shrink-0",
+													children: item.badge
+												})
+											]
+										}) }, `mobile-${activeCategoryData.id}-${item.title}-${idx}`);
+									}) })
+								})
+							}),
+							user && /* @__PURE__ */ jsx(SidebarFooter, {
+								className: "border-t border-sidebar-border shrink-0",
+								children: /* @__PURE__ */ jsx(SidebarUserMenu, {
+									user: user.data,
+									menuItems: user.menuItems,
+									onLogout: user.onLogout
+								})
+							})
+						] }) : /* @__PURE__ */ jsx("div", {
+							className: "flex-1 flex items-center justify-center text-sidebar-foreground/60 text-sm",
+							children: "Select a category"
+						})
+					})]
+				})
+			]
+		})]
+	}), /* @__PURE__ */ jsxs("div", {
+		className: "group peer text-sidebar-foreground hidden md:block",
+		"data-state": "expanded",
+		"data-collapsible": "",
+		"data-variant": "inset",
+		"data-side": "left",
+		"data-slot": "sidebar",
+		children: [/* @__PURE__ */ jsx("div", {
+			"data-slot": "sidebar-gap",
+			className: "relative bg-transparent transition-[width] duration-200 ease-linear",
+			style: { width: totalWidth }
+		}), /* @__PURE__ */ jsx("div", {
+			"data-slot": "sidebar-container",
+			className: cn("fixed inset-y-0 left-0 z-10 hidden h-svh transition-[width] duration-200 ease-linear md:flex", className),
+			style: {
+				width: totalWidth,
+				padding: SIDEBAR_PADDING
+			},
+			children: /* @__PURE__ */ jsxs("div", {
+				"data-sidebar": "sidebar",
+				"data-slot": "sidebar-inner",
+				className: "bg-sidebar flex h-full w-full flex-row overflow-hidden rounded-lg border border-sidebar-border shadow-sm",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: cn("flex flex-col shrink-0 transition-colors", railVariants$1[railVariant], railTextVariants$1[railVariant], isExpanded && "border-r border-sidebar-border"),
+					style: {
+						width: SIDEBAR_RAIL_WIDTH,
+						minWidth: SIDEBAR_RAIL_WIDTH
+					},
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							className: "flex items-center justify-center p-2 h-14",
+							children: /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+								render: /* @__PURE__ */ jsx(Link, {
+									href: brand.href || "/",
+									className: cn("flex items-center justify-center h-10 w-10 rounded-lg shadow-sm transition-colors", railVariant === "dark" || railVariant === "primary" ? "bg-white/10 hover:bg-white/20 text-inherit" : "bg-sidebar-primary text-sidebar-primary-foreground")
+								}),
+								children: brand.icon
+							}), /* @__PURE__ */ jsx(TooltipContent, {
+								side: "right",
+								children: brand.title
+							})] })
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "flex-1 flex flex-col gap-1 p-2",
+							children: categories.map((category) => {
+								const Icon = category.icon;
+								return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+									render: /* @__PURE__ */ jsx("button", {
+										onClick: () => handleCategorySelect(category.id),
+										className: cn("flex items-center justify-center h-10 w-10 rounded-lg transition-colors", activeCategory === category.id ? railVariant === "dark" || railVariant === "primary" ? "bg-white/20" : "bg-sidebar-accent text-sidebar-accent-foreground" : railVariant === "dark" || railVariant === "primary" ? "hover:bg-white/10" : "hover:bg-sidebar-accent/50")
+									}),
+									children: /* @__PURE__ */ jsx(Icon, { className: "h-5 w-5" })
+								}), /* @__PURE__ */ jsx(TooltipContent, {
+									side: "right",
+									children: category.name
+								})] }, category.id);
+							})
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "p-2",
+							children: /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+								render: /* @__PURE__ */ jsx("button", {
+									onClick: toggleExpanded,
+									className: cn("flex items-center justify-center h-10 w-10 rounded-lg transition-colors", railVariant === "dark" || railVariant === "primary" ? "hover:bg-white/10" : "hover:bg-sidebar-accent/50")
+								}),
+								children: isExpanded ? /* @__PURE__ */ jsx(ChevronLeft, { className: "h-5 w-5" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-5 w-5" })
+							}), /* @__PURE__ */ jsx(TooltipContent, {
+								side: "right",
+								children: isExpanded ? "Collapse sidebar" : "Expand sidebar"
+							})] })
+						})
+					]
+				}), /* @__PURE__ */ jsx("div", {
+					className: cn("flex flex-col bg-sidebar overflow-hidden transition-[width,opacity] duration-200 ease-linear", isExpanded ? "opacity-100" : "opacity-0 w-0"),
+					style: { width: isExpanded ? SIDEBAR_PANEL_WIDTH : 0 },
+					children: activeCategoryData ? /* @__PURE__ */ jsxs(Fragment, { children: [
+						/* @__PURE__ */ jsx(SidebarHeader, {
+							className: "h-14 border-b border-sidebar-border px-4 flex items-center shrink-0",
+							children: /* @__PURE__ */ jsxs("div", {
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ jsx(activeCategoryData.icon, { className: "h-5 w-5 text-sidebar-foreground" }), /* @__PURE__ */ jsx("span", {
+									className: "font-semibold text-sidebar-foreground truncate",
+									children: activeCategoryData.name
+								})]
+							})
+						}),
+						/* @__PURE__ */ jsx(SidebarContent, {
+							className: "flex-1 overflow-y-auto",
+							children: /* @__PURE__ */ jsxs(SidebarGroup, {
+								className: "p-2",
+								children: [/* @__PURE__ */ jsxs(SidebarGroupLabel, {
+									className: "px-2 text-xs text-sidebar-foreground/60",
+									children: [activeCategoryData.name, " Menu"]
+								}), /* @__PURE__ */ jsx(SidebarMenu, { children: activeCategoryData.items.map((item, idx) => {
+									const Icon = item.icon;
+									return /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(SidebarMenuButton, {
+										isActive: item.isActive,
+										render: /* @__PURE__ */ jsx(Link, { href: item.url }),
+										children: [
+											Icon && /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" }),
+											/* @__PURE__ */ jsx("span", {
+												className: "truncate",
+												children: item.title
+											}),
+											item.badge && /* @__PURE__ */ jsx("span", {
+												className: "ml-auto text-xs bg-sidebar-accent text-sidebar-accent-foreground px-1.5 py-0.5 rounded shrink-0",
+												children: item.badge
+											})
+										]
+									}) }, `${activeCategoryData.id}-${item.title}-${idx}`);
+								}) })]
+							})
+						}),
+						user && /* @__PURE__ */ jsx(SidebarFooter, {
+							className: "border-t border-sidebar-border shrink-0",
+							children: /* @__PURE__ */ jsx(SidebarUserMenu, {
+								user: user.data,
+								menuItems: user.menuItems,
+								onLogout: user.onLogout
+							})
+						})
+					] }) : /* @__PURE__ */ jsx("div", {
+						className: "flex-1 flex items-center justify-center text-sidebar-foreground/60 text-sm",
+						children: "Select a category"
+					})
+				})]
+			})
+		})]
+	})] });
+}
+
+//#endregion
+//#region src/dashboard/presets/floating-sidebar.tsx
+/**
+* FloatingSidebar - Floating variant sidebar with rounded corners and shadow.
+* Hovers above the content area like Linear / Notion style.
+* Collapses to icon-only rail on desktop.
+*/
+function FloatingSidebar({ brand, navigation, secondaryNavigation, project, user, headerContent, side = "left", ariaLabel = "Navigation Menu", className, children }) {
+	const { isMobile } = useSidebar();
+	return /* @__PURE__ */ jsxs(Sidebar, {
+		variant: "floating",
+		collapsible: "icon",
+		side,
+		className,
+		children: [
+			isMobile && /* @__PURE__ */ jsxs("span", {
+				className: "sr-only",
+				children: [/* @__PURE__ */ jsx(SheetTitle, { children: ariaLabel }), /* @__PURE__ */ jsx(SheetDescription, { children: "Application navigation menu containing links to different sections" })]
+			}),
+			/* @__PURE__ */ jsxs(SidebarHeader, {
+				className: "gap-1",
+				children: [
+					/* @__PURE__ */ jsx(SidebarBrand, {
+						title: brand.title,
+						icon: brand.icon,
+						href: brand.href
+					}),
+					project && /* @__PURE__ */ jsx(ProjectSwitcher, {
+						items: project.items,
+						selected: project.selected,
+						onSelect: project.onSelect,
+						isLoading: project.isLoading,
+						label: project.label,
+						icon: project.icon
+					}),
+					headerContent
+				]
+			}),
+			/* @__PURE__ */ jsx(SidebarContent, { children: children || /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SidebarNav, { groups: navigation }), secondaryNavigation && /* @__PURE__ */ jsx(SidebarNav, {
+				groups: secondaryNavigation,
+				className: "mt-auto"
+			})] }) }),
+			user && /* @__PURE__ */ jsx(SidebarFooter, { children: /* @__PURE__ */ jsx(SidebarUserMenu, {
+				user: user.data,
+				menuItems: user.menuItems,
+				onLogout: user.onLogout
+			}) })
+		]
+	});
+}
+
+//#endregion
+//#region src/dashboard/presets/mini-sidebar.tsx
+/**
+* MiniSidebar - Collapsible sidebar that shrinks to icon-only rail.
+* Think VS Code, GitHub, or Figma-style navigation.
+* Uses the standard shadcn sidebar with `collapsible="icon"`.
+*/
+function MiniSidebar({ brand, navigation, secondaryNavigation, user, headerContent, side = "left", showRail = true, ariaLabel = "Navigation Menu", className, children }) {
+	const { isMobile } = useSidebar();
+	return /* @__PURE__ */ jsxs(Sidebar, {
+		collapsible: "icon",
+		side,
+		className,
+		children: [
+			isMobile && /* @__PURE__ */ jsxs("span", {
+				className: "sr-only",
+				children: [/* @__PURE__ */ jsx(SheetTitle, { children: ariaLabel }), /* @__PURE__ */ jsx(SheetDescription, { children: "Application navigation menu" })]
+			}),
+			/* @__PURE__ */ jsxs(SidebarHeader, { children: [/* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(SidebarMenuButton, {
+				size: "lg",
+				tooltip: brand.title,
+				render: /* @__PURE__ */ jsx(Link, { href: brand.href || "/" }),
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "flex items-center justify-center h-8 w-8 rounded-lg bg-sidebar-primary text-sidebar-primary-foreground shadow-sm shrink-0",
+					children: brand.icon
+				}), /* @__PURE__ */ jsx("span", {
+					className: "font-semibold tracking-tight truncate",
+					children: brand.title
+				})]
+			}) }) }), headerContent] }),
+			/* @__PURE__ */ jsx(SidebarContent, { children: children || /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(NavGroups, { groups: navigation }), secondaryNavigation && /* @__PURE__ */ jsx(NavGroups, {
+				groups: secondaryNavigation,
+				className: "mt-auto"
+			})] }) }),
+			user && /* @__PURE__ */ jsx(SidebarFooter, { children: /* @__PURE__ */ jsx(SidebarUserMenu, {
+				user: user.data,
+				menuItems: user.menuItems,
+				onLogout: user.onLogout
+			}) }),
+			showRail && /* @__PURE__ */ jsx(SidebarRail, {})
+		]
+	});
+}
+function NavGroups({ groups, className }) {
+	return /* @__PURE__ */ jsx(Fragment, { children: groups.map((group, groupIndex) => /* @__PURE__ */ jsxs(SidebarGroup, {
+		className: cn(groupIndex === groups.length - 1 && className),
+		children: [group.title && /* @__PURE__ */ jsx(SidebarGroupLabel, { children: group.title }), /* @__PURE__ */ jsx(SidebarMenu, { children: group.items.map((item, itemIndex) => {
+			const Icon = item.icon;
+			return /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(SidebarMenuButton, {
+				isActive: item.isActive,
+				tooltip: item.title,
+				render: /* @__PURE__ */ jsx(Link, { href: item.url }),
+				children: [
+					/* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" }),
+					/* @__PURE__ */ jsx("span", {
+						className: "truncate",
+						children: item.title
+					}),
+					item.badge != null && /* @__PURE__ */ jsx("span", {
+						className: "ml-auto text-xs bg-sidebar-accent text-sidebar-accent-foreground px-1.5 py-0.5 rounded shrink-0",
+						children: item.badge
+					})
+				]
+			}) }, `${groupIndex}-${itemIndex}`);
+		}) })]
+	}, groupIndex)) });
+}
+
+//#endregion
+//#region src/dashboard/presets/topbar-rail.tsx
+const TOPBAR_HEIGHT = "3rem";
+const RAIL_WIDTH = "3.5rem";
+const DRAWER_WIDTH = "14rem";
+const railVariants = {
+	default: "bg-sidebar",
+	dark: "bg-zinc-900 dark:bg-zinc-950",
+	primary: "bg-primary",
+	muted: "bg-muted"
+};
+const railTextVariants = {
+	default: "text-sidebar-foreground",
+	dark: "text-zinc-100",
+	primary: "text-primary-foreground",
+	muted: "text-muted-foreground"
+};
+function getUserInitials(name) {
+	if (!name) return "?";
+	const names = name.trim().split(" ");
+	if (names.length === 1) return names[0].slice(0, 2).toUpperCase();
+	return (names[0][0] + names[names.length - 1][0]).toUpperCase();
+}
+function TopbarBreadcrumbs({ items }) {
+	return /* @__PURE__ */ jsx(Breadcrumb, { children: /* @__PURE__ */ jsx(BreadcrumbList, { children: items.map((item, index) => /* @__PURE__ */ jsxs(React$1.Fragment, { children: [/* @__PURE__ */ jsx(BreadcrumbItem, {
+		className: item.current ? "" : "hidden md:block",
+		children: item.current ? /* @__PURE__ */ jsx(BreadcrumbPage, { children: item.label }) : /* @__PURE__ */ jsx(BreadcrumbLink, {
+			render: /* @__PURE__ */ jsx(Link, { href: item.href || "#" }),
+			children: item.label
+		})
+	}), index < items.length - 1 && /* @__PURE__ */ jsx(BreadcrumbSeparator, { className: "hidden md:block" })] }, `breadcrumb-${index}`)) }) });
+}
+function TopbarUserMenu({ user, menuItems = [], onLogout }) {
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+		render: /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			size: "icon",
+			className: "h-8 w-8 rounded-full"
+		}),
+		children: /* @__PURE__ */ jsxs(Avatar, {
+			className: "h-8 w-8",
+			children: [/* @__PURE__ */ jsx(AvatarImage, {
+				src: user.avatar,
+				alt: user.name
+			}), /* @__PURE__ */ jsx(AvatarFallback, {
+				className: "text-xs",
+				children: getUserInitials(user.name)
+			})]
+		})
+	}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+		className: "w-56",
+		align: "end",
+		sideOffset: 4,
+		children: [
+			/* @__PURE__ */ jsx(DropdownMenuGroup, { children: /* @__PURE__ */ jsx(DropdownMenuLabel, {
+				className: "p-0 font-normal",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2 px-2 py-1.5 text-left text-sm",
+					children: [/* @__PURE__ */ jsxs(Avatar, {
+						className: "h-8 w-8",
+						children: [/* @__PURE__ */ jsx(AvatarImage, {
+							src: user.avatar,
+							alt: user.name
+						}), /* @__PURE__ */ jsx(AvatarFallback, {
+							className: "text-xs",
+							children: getUserInitials(user.name)
+						})]
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "grid flex-1 text-left text-sm leading-tight",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "truncate font-semibold",
+							children: user.name
+						}), /* @__PURE__ */ jsx("span", {
+							className: "truncate text-xs text-muted-foreground",
+							children: user.email
+						})]
+					})]
+				})
+			}) }),
+			/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+			/* @__PURE__ */ jsx(DropdownMenuGroup, { children: menuItems.map((item, index) => /* @__PURE__ */ jsxs(React$1.Fragment, { children: [item.separator && index > 0 && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}), item.href ? /* @__PURE__ */ jsxs(DropdownMenuItem, {
+				render: /* @__PURE__ */ jsx(Link, { href: item.href }),
+				className: "w-full flex items-center",
+				children: [item.icon && /* @__PURE__ */ jsx(item.icon, { className: "mr-2 h-4 w-4" }), item.label]
+			}) : /* @__PURE__ */ jsxs(DropdownMenuItem, {
+				onClick: item.onClick,
+				className: "w-full flex items-center",
+				children: [item.icon && /* @__PURE__ */ jsx(item.icon, { className: "mr-2 h-4 w-4" }), item.label]
+			})] }, item.label)) }),
+			onLogout && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(DropdownMenuSeparator, {}), /* @__PURE__ */ jsx(DropdownMenuItem, {
+				onClick: onLogout,
+				className: "w-full flex items-center",
+				children: "Log out"
+			})] })
+		]
+	})] });
+}
+/**
+* TopbarRail - Fixed topbar + icon rail + secondary drawer layout.
+* Common in Linear, Figma, Jira-style SaaS applications.
+* Does NOT use SidebarProvider — fully custom layout.
+*/
+function TopbarRail({ brand, categories, user, breadcrumbs, actions, defaultCategoryId, onCategoryChange, defaultDrawerOpen = false, railVariant = "default", ariaLabel = "Navigation Menu", className, children }) {
+	const [activeCategory, setActiveCategory] = React$1.useState(defaultCategoryId || (categories.length > 0 ? categories[0].id : null));
+	const [isDrawerOpen, setIsDrawerOpen] = React$1.useState(defaultDrawerOpen);
+	const [mobileOpen, setMobileOpen] = React$1.useState(false);
+	useIsMobile();
+	const handleCategorySelect = (id) => {
+		if (activeCategory === id && isDrawerOpen) setIsDrawerOpen(false);
+		else {
+			setActiveCategory(id);
+			onCategoryChange?.(id);
+			setIsDrawerOpen(true);
+		}
+	};
+	const handleMobileCategorySelect = (id) => {
+		setActiveCategory(id);
+		onCategoryChange?.(id);
+	};
+	const activeCategoryData = categories.find((c) => c.id === activeCategory) || null;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "topbar-rail-layout",
+		className: cn("flex flex-col h-svh", className),
+		children: [/* @__PURE__ */ jsxs("header", {
+			className: "flex shrink-0 items-center border-b bg-background px-4 gap-2",
+			style: { height: TOPBAR_HEIGHT },
+			children: [
+				/* @__PURE__ */ jsxs(Sheet, {
+					open: mobileOpen,
+					onOpenChange: setMobileOpen,
+					children: [/* @__PURE__ */ jsx(SheetTrigger, {
+						render: /* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							size: "icon",
+							className: "md:hidden h-8 w-8",
+							"aria-label": "Open navigation"
+						}),
+						children: /* @__PURE__ */ jsx(Menu, { className: "h-5 w-5" })
+					}), /* @__PURE__ */ jsxs(SheetContent, {
+						side: "left",
+						className: "w-72 p-0",
+						children: [
+							/* @__PURE__ */ jsx(SheetTitle, {
+								className: "sr-only",
+								children: ariaLabel
+							}),
+							/* @__PURE__ */ jsx(SheetDescription, {
+								className: "sr-only",
+								children: "Navigation menu with category icons and expanded content"
+							}),
+							/* @__PURE__ */ jsx(MobileNav, {
+								brand,
+								categories,
+								user,
+								activeCategory,
+								onCategorySelect: handleMobileCategorySelect,
+								onClose: () => setMobileOpen(false),
+								railVariant
+							})
+						]
+					})]
+				}),
+				/* @__PURE__ */ jsxs(Link, {
+					href: brand.href || "/",
+					className: "hidden md:flex items-center gap-2 shrink-0",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "flex items-center justify-center h-7 w-7",
+						children: brand.icon
+					}), /* @__PURE__ */ jsx("span", {
+						className: "font-semibold text-sm",
+						children: brand.title
+					})]
+				}),
+				/* @__PURE__ */ jsx(Link, {
+					href: brand.href || "/",
+					className: "md:hidden flex items-center gap-2 shrink-0",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "flex items-center justify-center h-7 w-7",
+						children: brand.icon
+					})
+				}),
+				breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Separator, {
+					orientation: "vertical",
+					className: "mx-2 !h-4 !self-auto hidden md:block"
+				}), /* @__PURE__ */ jsx(TopbarBreadcrumbs, { items: breadcrumbs })] }),
+				/* @__PURE__ */ jsx("div", { className: "flex-1" }),
+				actions && /* @__PURE__ */ jsx("div", {
+					className: "flex items-center gap-2",
+					children: actions
+				}),
+				user && /* @__PURE__ */ jsx(TopbarUserMenu, {
+					user: user.data,
+					menuItems: user.menuItems,
+					onLogout: user.onLogout
+				})
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-1 overflow-hidden",
+			children: [
+				/* @__PURE__ */ jsx("nav", {
+					className: cn("hidden md:flex flex-col shrink-0 border-r", railVariants[railVariant], railTextVariants[railVariant]),
+					style: {
+						width: RAIL_WIDTH,
+						minWidth: RAIL_WIDTH
+					},
+					"aria-label": ariaLabel,
+					children: /* @__PURE__ */ jsx("div", {
+						className: "flex-1 flex flex-col gap-1 p-2 pt-3",
+						children: categories.map((category) => {
+							const Icon = category.icon;
+							return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+								render: /* @__PURE__ */ jsx("button", {
+									onClick: () => handleCategorySelect(category.id),
+									className: cn("flex items-center justify-center h-10 w-10 rounded-lg transition-colors", activeCategory === category.id ? railVariant === "dark" || railVariant === "primary" ? "bg-white/20" : "bg-sidebar-accent text-sidebar-accent-foreground" : railVariant === "dark" || railVariant === "primary" ? "hover:bg-white/10" : "hover:bg-sidebar-accent/50")
+								}),
+								children: /* @__PURE__ */ jsx(Icon, { className: "h-5 w-5" })
+							}), /* @__PURE__ */ jsx(TooltipContent, {
+								side: "right",
+								children: category.name
+							})] }, category.id);
+						})
+					})
+				}),
+				/* @__PURE__ */ jsx("aside", {
+					className: cn("hidden md:flex flex-col border-r bg-sidebar overflow-hidden transition-[width,opacity] duration-200 ease-linear", isDrawerOpen ? "opacity-100" : "opacity-0 w-0"),
+					style: { width: isDrawerOpen ? DRAWER_WIDTH : 0 },
+					children: activeCategoryData && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SidebarHeader, {
+						className: "h-12 border-b border-sidebar-border px-4 flex items-center shrink-0",
+						children: /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ jsx(activeCategoryData.icon, { className: "h-5 w-5 text-sidebar-foreground" }), /* @__PURE__ */ jsx("span", {
+								className: "font-semibold text-sidebar-foreground text-sm truncate",
+								children: activeCategoryData.name
+							})]
+						})
+					}), /* @__PURE__ */ jsx(SidebarContent, {
+						className: "flex-1 overflow-y-auto",
+						children: /* @__PURE__ */ jsxs(SidebarGroup, {
+							className: "p-2",
+							children: [/* @__PURE__ */ jsx(SidebarGroupLabel, {
+								className: "px-2 text-xs text-sidebar-foreground/60",
+								children: activeCategoryData.name
+							}), /* @__PURE__ */ jsx(SidebarMenu, { children: activeCategoryData.items.map((item, idx) => {
+								const Icon = item.icon;
+								return /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(Link, {
+									href: item.url,
+									className: cn("flex items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors w-full", "text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground", item.isActive && "bg-sidebar-accent text-sidebar-accent-foreground font-medium"),
+									children: [
+										Icon && /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" }),
+										/* @__PURE__ */ jsx("span", {
+											className: "truncate",
+											children: item.title
+										}),
+										item.badge != null && /* @__PURE__ */ jsx("span", {
+											className: "ml-auto text-xs bg-sidebar-accent text-sidebar-accent-foreground px-1.5 py-0.5 rounded shrink-0",
+											children: item.badge
+										})
+									]
+								}) }, `${activeCategoryData.id}-${item.title}-${idx}`);
+							}) })]
+						})
+					})] })
+				}),
+				/* @__PURE__ */ jsx("main", {
+					className: "flex-1 overflow-auto min-w-0",
+					children
+				})
+			]
+		})]
+	});
+}
+function MobileNav({ brand, categories, user, activeCategory, onCategorySelect, onClose, railVariant }) {
+	const activeCategoryData = categories.find((c) => c.id === activeCategory) || null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex h-full flex-row",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cn("flex flex-col shrink-0", railVariants[railVariant], railTextVariants[railVariant], "border-r border-sidebar-border"),
+			style: {
+				width: RAIL_WIDTH,
+				minWidth: RAIL_WIDTH
+			},
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "flex items-center justify-center p-2 h-14",
+				children: /* @__PURE__ */ jsx(Link, {
+					href: brand.href || "/",
+					className: cn("flex items-center justify-center h-10 w-10 rounded-lg shadow-sm transition-colors", railVariant === "dark" || railVariant === "primary" ? "bg-white/10 hover:bg-white/20 text-inherit" : "bg-sidebar-primary text-sidebar-primary-foreground"),
+					onClick: onClose,
+					children: brand.icon
+				})
+			}), /* @__PURE__ */ jsx("div", {
+				className: "flex-1 flex flex-col gap-1 p-2",
+				children: categories.map((category) => {
+					const Icon = category.icon;
+					return /* @__PURE__ */ jsx("button", {
+						onClick: () => onCategorySelect(category.id),
+						className: cn("flex items-center justify-center h-10 w-10 rounded-lg transition-colors", activeCategory === category.id ? railVariant === "dark" || railVariant === "primary" ? "bg-white/20" : "bg-sidebar-accent text-sidebar-accent-foreground" : railVariant === "dark" || railVariant === "primary" ? "hover:bg-white/10" : "hover:bg-sidebar-accent/50"),
+						children: /* @__PURE__ */ jsx(Icon, { className: "h-5 w-5" })
+					}, category.id);
+				})
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex-1 flex flex-col bg-sidebar overflow-hidden",
+			children: activeCategoryData ? /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx(SidebarHeader, {
+					className: "h-14 border-b border-sidebar-border px-4 flex items-center shrink-0",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ jsx(activeCategoryData.icon, { className: "h-5 w-5 text-sidebar-foreground" }), /* @__PURE__ */ jsx("span", {
+							className: "font-semibold text-sidebar-foreground truncate",
+							children: activeCategoryData.name
+						})]
+					})
+				}),
+				/* @__PURE__ */ jsx(SidebarContent, {
+					className: "flex-1 overflow-y-auto",
+					children: /* @__PURE__ */ jsx(SidebarGroup, {
+						className: "p-2",
+						children: /* @__PURE__ */ jsx(SidebarMenu, { children: activeCategoryData.items.map((item, idx) => {
+							const Icon = item.icon;
+							return /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(Link, {
+								href: item.url,
+								onClick: onClose,
+								className: cn("flex items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors w-full", "text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground", item.isActive && "bg-sidebar-accent text-sidebar-accent-foreground font-medium"),
+								children: [
+									Icon && /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" }),
+									/* @__PURE__ */ jsx("span", {
+										className: "truncate",
+										children: item.title
+									}),
+									item.badge != null && /* @__PURE__ */ jsx("span", {
+										className: "ml-auto text-xs bg-sidebar-accent text-sidebar-accent-foreground px-1.5 py-0.5 rounded shrink-0",
+										children: item.badge
+									})
+								]
+							}) }, `mobile-${activeCategoryData.id}-${item.title}-${idx}`);
+						}) })
+					})
+				}),
+				user && /* @__PURE__ */ jsx("div", {
+					className: "border-t border-sidebar-border p-3 shrink-0",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ jsxs(Avatar, {
+							className: "h-8 w-8",
+							children: [/* @__PURE__ */ jsx(AvatarImage, {
+								src: user.data.avatar,
+								alt: user.data.name
+							}), /* @__PURE__ */ jsx(AvatarFallback, {
+								className: "text-xs",
+								children: getUserInitials(user.data.name)
+							})]
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "grid flex-1 text-left text-sm leading-tight",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "truncate font-semibold text-sm",
+								children: user.data.name
+							}), /* @__PURE__ */ jsx("span", {
+								className: "truncate text-xs text-muted-foreground",
+								children: user.data.email
+							})]
+						})]
+					})
+				})
+			] }) : /* @__PURE__ */ jsx("div", {
+				className: "flex-1 flex items-center justify-center text-sidebar-foreground/60 text-sm",
+				children: "Select a category"
+			})
+		})]
+	});
+}
+
+//#endregion
+export { DashboardContent, DashboardHeader, DashboardPageLayout, DualSidebar, FloatingSidebar, HeaderSection, InsetSidebar, MiniSidebar, PageHeader, ProjectSwitcher, SidebarBrand, SidebarNav, SidebarNavGroup, SidebarNavItem, SidebarUserMenu, TopbarRail, cn, resolveCategories, resolveMiniNavigation, resolveNavigation };