@classytic/fluid 0.4.2 → 0.5.0

package/dist/dashboard.d.mts

@@ -1,9 +1,70 @@
-import { t as cn } from "./utils-CDue7cEt.mjs";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { t as cn } from "./utils-rqvYP1by.mjs";
 import * as React$1 from "react";
 import React, { ReactNode } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { LucideIcon } from "lucide-react";
 
+//#region src/components/client-only.d.ts
+interface ClientOnlyProps {
+  children: ReactNode;
+  fallback?: ReactNode;
+}
+/**
+ * Renders children only on the client after hydration.
+ * Use for components with Base UI auto-generated IDs that cause hydration mismatches.
+ */
+declare function ClientOnly({
+  children,
+  fallback
+}: ClientOnlyProps): ReactNode;
+//#endregion
+//#region src/dashboard/dashboard-header.d.ts
+interface BreadcrumbItem {
+  label: string;
+  href?: string;
+  current?: boolean;
+}
+interface DashboardHeaderProps {
+  /** Breadcrumb items */
+  breadcrumbs?: BreadcrumbItem[];
+  /** Content to show on the left (after breadcrumbs) */
+  leftContent?: React$1.ReactNode;
+  /** Content to show on the right (actions, mode toggle, etc.) */
+  rightContent?: React$1.ReactNode;
+  /** Whether to show sidebar trigger */
+  showSidebarTrigger?: boolean;
+  /** Custom trigger element (rendered before breadcrumbs, replaces SidebarTrigger) */
+  customTrigger?: React$1.ReactNode;
+  /** Additional className */
+  className?: string;
+  /** Custom content (replaces default breadcrumb) */
+  children?: React$1.ReactNode;
+}
+/**
+ * DashboardHeader - Top header bar for dashboard pages.
+ * Includes sidebar trigger, breadcrumbs, and action slots.
+ */
+declare function DashboardHeader({
+  breadcrumbs,
+  leftContent,
+  rightContent,
+  showSidebarTrigger,
+  customTrigger,
+  className,
+  children
+}: DashboardHeaderProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/hooks/use-dashboard-breadcrumbs.d.ts
+interface UseDashboardBreadcrumbsOptions {
+  /** Label overrides keyed by slug segment. e.g., { "platform-config": "Settings" } */
+  labelOverrides?: Record<string, string>;
+  /** Segments to skip/hide from breadcrumbs */
+  hideSegments?: string[];
+  /** Custom base label. Default: "Home" */
+  baseLabel?: string;
+}
+declare function useDashboardBreadcrumbs(basePath: string, options?: UseDashboardBreadcrumbsOptions): BreadcrumbItem[];
+//#endregion
 //#region src/dashboard/nav-utils.d.ts
 /**
  * NavPermissions - Mixin applied to all nav item types.
@@ -95,6 +156,30 @@ interface MiniSidebarGroup {
   title?: string;
   items: MiniSidebarItem[];
 }
+interface RouteMatchable {
+  url: string;
+}
+/**
+ * matchRoute — Check if a pathname matches a URL.
+ * Exact match or prefix match with trailing slash boundary.
+ */
+declare function matchRoute(pathname: string, url: string): boolean;
+/**
+ * findActiveItem — Find the most specific matching item from a flat list.
+ * Returns the item with the longest matching URL (avoids `/settings` matching `/settings/users`).
+ */
+declare function findActiveItem<T extends RouteMatchable>(items: T[], pathname: string): T | null;
+/**
+ * findActiveCategory — Find the category containing the best-matching item.
+ * Returns { category, item } or null.
+ */
+declare function findActiveCategory<TItem extends RouteMatchable, TCategory extends {
+  id: string;
+  items: TItem[];
+}>(categories: TCategory[], pathname: string): {
+  category: TCategory;
+  item: TItem;
+} | null;
 /**
  * resolveNavigation — Filter NavGroup[] by permissions and resolve dynamic badges.
  * For InsetSidebar, FloatingSidebar, and any component using NavGroup[].
@@ -117,317 +202,164 @@ declare function resolveCategories<TItem extends NavPermissions & {
   items: TItem[];
 }>(categories: TCategory[], ctx?: unknown): TCategory[];
 //#endregion
-//#region src/dashboard/header-section.d.ts
-interface HeaderAction {
-  text: string;
-  onClick?: () => void;
-  disabled?: boolean;
-  variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
-  size?: "default" | "sm" | "lg" | "icon";
-  className?: string;
-  icon?: LucideIcon;
-  iconPosition?: "left" | "right";
-  loadingText?: string;
-  loading?: boolean;
-}
-interface HeaderBadge {
-  text: string;
-  variant?: "default" | "secondary" | "destructive" | "outline";
-  className?: string;
+//#region src/dashboard/sidebar-user-menu.d.ts
+interface UserData {
+  name: string;
+  email: string;
+  avatar?: string;
 }
-interface HeaderMetadata {
-  text: string;
+interface UserMenuItem {
+  label: string;
   icon?: LucideIcon;
+  href?: string;
+  onClick?: () => void;
+  separator?: boolean;
 }
-interface HeaderSectionProps {
-  title?: string;
-  description?: string;
-  actions?: HeaderAction[] | null;
-  icon?: LucideIcon | null;
-  iconClassName?: string;
-  loading?: boolean;
-  variant?: "default" | "compact" | "hero" | "minimal";
+interface SidebarUserMenuProps {
+  /** User data to display */
+  user: UserData;
+  /** Menu items (account, settings, etc.) */
+  menuItems?: UserMenuItem[];
+  /** Logout handler */
+  onLogout?: () => void;
+  /** Additional className */
   className?: string;
-  badge?: HeaderBadge | ReactNode;
-  breadcrumbs?: ReactNode;
-  metadata?: HeaderMetadata[];
-  children?: ReactNode;
 }
-declare function HeaderSection({
-  title,
-  description,
-  actions,
-  icon: Icon,
-  iconClassName,
-  loading,
-  variant,
-  className,
-  badge,
-  breadcrumbs,
-  metadata,
-  children
-}: HeaderSectionProps): react_jsx_runtime0.JSX.Element;
+/**
+ * SidebarUserMenu - User avatar and dropdown menu for sidebar footer.
+ * Accepts handlers for logout and custom menu items.
+ */
+declare function SidebarUserMenu({
+  user,
+  menuItems,
+  onLogout,
+  className
+}: SidebarUserMenuProps): react_jsx_runtime0.JSX.Element;
 //#endregion
-//#region src/dashboard/page-header.d.ts
-interface BreadcrumbItemData {
-  label: string;
+//#region src/dashboard/presets/dual-sidebar/types.d.ts
+interface DualSidebarBrand {
+  title: string;
+  icon: React$1.ReactNode;
   href?: string;
-  current?: boolean;
 }
-interface PageHeaderProps {
-  items: BreadcrumbItemData[];
+interface DualSidebarUser {
+  data: UserData;
+  menuItems?: UserMenuItem[];
+  onLogout?: () => void;
+}
+interface DualSidebarProps {
+  /** Brand configuration */
+  brand: DualSidebarBrand;
+  /** Main categories with their items */
+  categories: DualSidebarCategory[];
+  /** User menu configuration */
+  user?: DualSidebarUser;
+  /** Initially active category ID (uncontrolled) */
+  defaultCategoryId?: string;
+  /** Controlled active category ID. When provided, the component is controlled. */
+  activeCategoryId?: string;
+  /** Callback when category changes (works in both controlled and uncontrolled modes) */
+  onCategoryChange?: (categoryId: string) => void;
+  /** Whether the expanded panel starts collapsed (uncontrolled) */
+  defaultCollapsed?: boolean;
+  /** Controlled collapsed state. When provided, the component is controlled. */
+  collapsed?: boolean;
+  /** Callback when collapsed state changes (works in both controlled and uncontrolled modes) */
+  onCollapsedChange?: (collapsed: boolean) => void;
+  /** Controlled mobile sheet open state */
+  mobileOpen?: boolean;
+  /** Callback when mobile sheet state changes */
+  onMobileOpenChange?: (open: boolean) => void;
+  /** Custom content rendered in the expanded panel header (below brand, above nav items).
+   *  Use for "Create" buttons, org/workspace switchers, etc. */
+  headerContent?: React$1.ReactNode;
+  /** Custom content rendered at the bottom of the expanded panel (above user menu) */
+  footerContent?: React$1.ReactNode;
+  /** Rail color variant */
+  railVariant?: "default" | "dark" | "primary" | "muted";
+  /** "inset" = rounded with padding (default). "flush" = edge-to-edge, no rounding. */
+  sidebarStyle?: "inset" | "flush";
+  /** Accessibility label */
+  ariaLabel?: string;
+  /** Additional className for outer container */
   className?: string;
-  actions?: React.ReactNode;
 }
-declare function PageHeader({
-  items,
-  className,
-  actions
-}: PageHeaderProps): react_jsx_runtime0.JSX.Element;
 //#endregion
-//#region src/dashboard/dashboard-content.d.ts
-interface DashboardContentProps {
-  /** Content to render inside the dashboard area */
-  children: React$1.ReactNode;
-  /** Additional className for the outer wrapper */
+//#region src/dashboard/presets/dual-sidebar/dual-sidebar.d.ts
+/**
+ * DualSidebar - A sidebar with icon rail and collapsible expanded panel.
+ * Mimics the inset sidebar variant structure for consistent styling.
+ */
+declare function DualSidebar({
+  brand,
+  categories,
+  user,
+  defaultCategoryId,
+  activeCategoryId: controlledCategoryId,
+  onCategoryChange,
+  defaultCollapsed,
+  collapsed: controlledCollapsed,
+  onCollapsedChange,
+  mobileOpen: controlledMobileOpen,
+  onMobileOpenChange,
+  headerContent,
+  footerContent,
+  railVariant,
+  sidebarStyle,
+  ariaLabel,
+  className
+}: DualSidebarProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/dashboard/project-switcher.d.ts
+interface ProjectItem {
+  /** Unique identifier */
+  id: string;
+  /** Display name */
+  name: string;
+  /** Short code or identifier */
+  code?: string;
+  /** Optional type badge */
+  type?: string;
+  /** Is this the default project */
+  isDefault?: boolean;
+  /** Is this project active */
+  isActive?: boolean;
+  /** Optional subtitle/description */
+  subtitle?: string;
+}
+interface ProjectSwitcherProps {
+  /** List of available projects */
+  items: ProjectItem[];
+  /** Currently selected project */
+  selected?: ProjectItem;
+  /** Callback when a project is selected */
+  onSelect: (project: ProjectItem) => void;
+  /** Whether the data is loading */
+  isLoading?: boolean;
+  /** Label shown in dropdown header */
+  label?: string;
+  /** Icon to display (defaults to Building2) */
+  icon?: LucideIcon;
+  /** Additional className */
   className?: string;
-  /** Enable @container queries on the content area */
-  container?: boolean | string;
-  /** Horizontal padding — defaults to "md" */
-  padding?: "none" | "sm" | "md" | "lg";
+  /** Whether to show as disabled (single item) */
+  disabled?: boolean;
+  /**
+   * Render variant:
+   * - "sidebar": Uses SidebarMenu components, requires SidebarProvider context
+   * - "standalone": Uses Button, works anywhere (headers, toolbars, etc.)
+   */
+  variant?: "sidebar" | "standalone";
+  /** Size for standalone variant (ignored in sidebar variant) */
+  size?: "sm" | "default";
+  /** Render custom item content */
+  renderItem?: (item: ProjectItem, isSelected: boolean) => React$1.ReactNode;
 }
 /**
- * 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`.
+ * ProjectSwitcher - Generic project/workspace/branch switcher.
+ * Works for any entity that needs switching functionality.
  *
- * @example
- * ```tsx
- * <SidebarProvider>
- *   <AppSidebar />
- *   <SidebarInset className="min-w-0">
- *     <DashboardContent>
- *       <PageHeader items={breadcrumbs} />
- *       <MyPageContent />
- *     </DashboardContent>
- *   </SidebarInset>
- * </SidebarProvider>
- * ```
- */
-declare function DashboardContent({
-  children,
-  className,
-  container,
-  padding
-}: DashboardContentProps): react_jsx_runtime0.JSX.Element;
-//#endregion
-//#region src/dashboard/dashboard-page-layout.d.ts
-interface DashboardPageLayoutProps {
-  /** Breadcrumb items for the page header */
-  breadcrumbs: BreadcrumbItemData[];
-  /** Action buttons rendered in the page header */
-  actions?: ReactNode;
-  /** Whether to wrap children in Suspense (default: true) */
-  suspense?: boolean;
-  /** Custom Suspense fallback. Defaults to a spinner. */
-  fallback?: ReactNode;
-  /** Additional className for the content wrapper */
-  className?: string;
-  children: ReactNode;
-}
-/**
- * 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>
- * ```
- */
-declare function DashboardPageLayout({
-  breadcrumbs,
-  actions,
-  suspense,
-  fallback,
-  className,
-  children
-}: DashboardPageLayoutProps): react_jsx_runtime0.JSX.Element;
-//#endregion
-//#region src/dashboard/sidebar-brand.d.ts
-interface SidebarBrandProps {
-  /** Brand title text */
-  title: string;
-  /** Brand icon/logo element */
-  icon: React$1.ReactNode;
-  /** Link href (defaults to "/") */
-  href?: string;
-  /** Additional className */
-  className?: string;
-  /** Tooltip text when collapsed (defaults to title) */
-  tooltip?: string;
-}
-/**
- * SidebarBrand - Logo and title section for dashboard sidebar.
- * Automatically handles collapsed state styling.
- */
-declare function SidebarBrand({
-  title,
-  icon,
-  href,
-  className,
-  tooltip
-}: SidebarBrandProps): react_jsx_runtime0.JSX.Element;
-//#endregion
-//#region src/dashboard/sidebar-nav.d.ts
-interface SidebarNavProps {
-  /** Navigation groups to render */
-  groups: NavGroup[];
-  /** Additional className */
-  className?: string;
-  /** Callback when a nav item is clicked */
-  onItemClick?: (item: NavItem) => void;
-}
-interface SidebarNavGroupProps {
-  /** Group title (optional) */
-  title?: string;
-  /** Navigation items in this group */
-  items: NavItem[];
-  /** Additional className */
-  className?: string;
-  /** Callback when an item is clicked */
-  onItemClick?: (item: NavItem) => void;
-}
-interface SidebarNavItemProps {
-  /** The navigation item data */
-  item: NavItem;
-  /** Callback when clicked */
-  onClick?: () => void;
-}
-/**
- * SidebarNavItem - Single navigation item with optional sub-items.
- */
-declare function SidebarNavItem({
-  item,
-  onClick
-}: SidebarNavItemProps): react_jsx_runtime0.JSX.Element;
-/**
- * SidebarNavGroup - A group of navigation items with optional title.
- */
-declare function SidebarNavGroup({
-  title,
-  items,
-  className,
-  onItemClick
-}: SidebarNavGroupProps): react_jsx_runtime0.JSX.Element;
-/**
- * SidebarNav - Complete navigation section with multiple groups.
- */
-declare function SidebarNav({
-  groups,
-  className,
-  onItemClick
-}: SidebarNavProps): react_jsx_runtime0.JSX.Element;
-//#endregion
-//#region src/dashboard/sidebar-user-menu.d.ts
-interface UserData {
-  name: string;
-  email: string;
-  avatar?: string;
-}
-interface UserMenuItem {
-  label: string;
-  icon?: LucideIcon;
-  href?: string;
-  onClick?: () => void;
-  separator?: boolean;
-}
-interface SidebarUserMenuProps {
-  /** User data to display */
-  user: UserData;
-  /** Menu items (account, settings, etc.) */
-  menuItems?: UserMenuItem[];
-  /** Logout handler */
-  onLogout?: () => void;
-  /** Additional className */
-  className?: string;
-}
-/**
- * SidebarUserMenu - User avatar and dropdown menu for sidebar footer.
- * Accepts handlers for logout and custom menu items.
- */
-declare function SidebarUserMenu({
-  user,
-  menuItems,
-  onLogout,
-  className
-}: SidebarUserMenuProps): react_jsx_runtime0.JSX.Element;
-//#endregion
-//#region src/dashboard/project-switcher.d.ts
-interface ProjectItem {
-  /** Unique identifier */
-  id: string;
-  /** Display name */
-  name: string;
-  /** Short code or identifier */
-  code?: string;
-  /** Optional type badge */
-  type?: string;
-  /** Is this the default project */
-  isDefault?: boolean;
-  /** Is this project active */
-  isActive?: boolean;
-  /** Optional subtitle/description */
-  subtitle?: string;
-}
-interface ProjectSwitcherProps {
-  /** List of available projects */
-  items: ProjectItem[];
-  /** Currently selected project */
-  selected?: ProjectItem;
-  /** Callback when a project is selected */
-  onSelect: (project: ProjectItem) => void;
-  /** Whether the data is loading */
-  isLoading?: boolean;
-  /** Label shown in dropdown header */
-  label?: string;
-  /** Icon to display (defaults to Building2) */
-  icon?: LucideIcon;
-  /** Additional className */
-  className?: string;
-  /** Whether to show as disabled (single item) */
-  disabled?: boolean;
-  /**
-   * Render variant:
-   * - "sidebar": Uses SidebarMenu components, requires SidebarProvider context
-   * - "standalone": Uses Button, works anywhere (headers, toolbars, etc.)
-   */
-  variant?: "sidebar" | "standalone";
-  /** Size for standalone variant (ignored in sidebar variant) */
-  size?: "sm" | "default";
-  /** Render custom item content */
-  renderItem?: (item: ProjectItem, isSelected: boolean) => React$1.ReactNode;
-}
-/**
- * ProjectSwitcher - Generic project/workspace/branch switcher.
- * Works for any entity that needs switching functionality.
- *
- * @example Sidebar usage (inside SidebarProvider)
+ * @example Sidebar usage (inside SidebarProvider)
  * ```tsx
  * <ProjectSwitcher
  *   items={projects}
@@ -461,74 +393,40 @@ declare function ProjectSwitcher({
   renderItem
 }: ProjectSwitcherProps): react_jsx_runtime0.JSX.Element | null;
 //#endregion
-//#region src/dashboard/dashboard-header.d.ts
-interface BreadcrumbItem {
-  label: string;
+//#region src/dashboard/presets/floating-sidebar.d.ts
+interface FloatingSidebarBrand {
+  title: string;
+  icon: React$1.ReactNode;
   href?: string;
-  current?: boolean;
 }
-interface DashboardHeaderProps {
-  /** Breadcrumb items */
-  breadcrumbs?: BreadcrumbItem[];
-  /** Content to show on the left (after breadcrumbs) */
-  leftContent?: React$1.ReactNode;
-  /** Content to show on the right (actions, mode toggle, etc.) */
-  rightContent?: React$1.ReactNode;
-  /** Whether to show sidebar trigger */
-  showSidebarTrigger?: boolean;
-  /** Custom trigger element (rendered before breadcrumbs, replaces SidebarTrigger) */
-  customTrigger?: React$1.ReactNode;
-  /** Additional className */
-  className?: string;
-  /** Custom content (replaces default breadcrumb) */
-  children?: React$1.ReactNode;
+interface FloatingSidebarProject {
+  items: ProjectItem[];
+  selected?: ProjectItem;
+  onSelect: (project: ProjectItem) => void;
+  isLoading?: boolean;
+  label?: string;
+  icon?: LucideIcon;
 }
-/**
- * DashboardHeader - Top header bar for dashboard pages.
- * Includes sidebar trigger, breadcrumbs, and action slots.
- */
-declare function DashboardHeader({
-  breadcrumbs,
-  leftContent,
-  rightContent,
-  showSidebarTrigger,
-  customTrigger,
-  className,
-  children
-}: DashboardHeaderProps): react_jsx_runtime0.JSX.Element;
-//#endregion
-//#region src/dashboard/presets/inset-sidebar.d.ts
-interface InsetSidebarBrand {
-  title: string;
-  icon: React$1.ReactNode;
-  href?: string;
-}
-interface InsetSidebarProject {
-  items: ProjectItem[];
-  selected?: ProjectItem;
-  onSelect: (project: ProjectItem) => void;
-  isLoading?: boolean;
-  label?: string;
-  icon?: LucideIcon;
-}
-interface InsetSidebarUser {
+interface FloatingSidebarUser {
   data: UserData;
   menuItems?: UserMenuItem[];
   onLogout?: () => void;
 }
-interface InsetSidebarProps {
+interface FloatingSidebarProps {
   /** Brand configuration */
-  brand: InsetSidebarBrand;
+  brand: FloatingSidebarBrand;
   /** Navigation groups */
   navigation: NavGroup[];
   /** Secondary navigation (shown at bottom above user) */
   secondaryNavigation?: NavGroup[];
   /** Project/workspace switcher configuration */
-  project?: InsetSidebarProject;
+  project?: FloatingSidebarProject;
   /** User menu configuration */
-  user?: InsetSidebarUser;
+  user?: FloatingSidebarUser;
   /** Custom content to render in header (after brand/project switcher) */
   headerContent?: React$1.ReactNode;
+  /** Side of the screen */
+  side?: "left" | "right";
   /** Accessibility label for the sidebar */
   ariaLabel?: string;
   /** Additional className */
@@ -537,81 +435,30 @@ interface InsetSidebarProps {
   children?: React$1.ReactNode;
 }
 /**
- * InsetSidebar - Complete sidebar preset with inset variant.
- * The standard dashboard sidebar with collapsible to icons.
+ * 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.
  */
-declare function InsetSidebar({
+declare function FloatingSidebar({
   brand,
   navigation,
   secondaryNavigation,
   project,
   user,
   headerContent,
+  side,
   ariaLabel,
   className,
   children
-}: InsetSidebarProps): react_jsx_runtime0.JSX.Element;
-//#endregion
-//#region src/dashboard/presets/dual-sidebar.d.ts
-interface DualSidebarBrand {
-  title: string;
-  icon: React$1.ReactNode;
-  href?: string;
-}
-interface DualSidebarUser {
-  data: UserData;
-  menuItems?: UserMenuItem[];
-  onLogout?: () => void;
-}
-interface DualSidebarProps {
-  /** Brand configuration */
-  brand: DualSidebarBrand;
-  /** Main categories with their items */
-  categories: DualSidebarCategory[];
-  /** User menu configuration */
-  user?: DualSidebarUser;
-  /** Initially active category ID */
-  defaultCategoryId?: string;
-  /** Callback when category changes */
-  onCategoryChange?: (categoryId: string) => void;
-  /** Whether the expanded panel starts collapsed */
-  defaultCollapsed?: boolean;
-  /** Controlled mobile sheet open state */
-  mobileOpen?: boolean;
-  /** Callback when mobile sheet state changes */
-  onMobileOpenChange?: (open: boolean) => void;
-  /** Rail color variant */
-  railVariant?: "default" | "dark" | "primary" | "muted";
-  /** Accessibility label */
-  ariaLabel?: string;
-  /** Additional className for outer container */
-  className?: string;
-}
-/**
- * DualSidebar - A sidebar with icon rail and collapsible expanded panel.
- * Mimics the inset sidebar variant structure for consistent styling.
- */
-declare function DualSidebar({
-  brand,
-  categories,
-  user,
-  defaultCategoryId,
-  onCategoryChange,
-  defaultCollapsed,
-  mobileOpen: controlledMobileOpen,
-  onMobileOpenChange,
-  railVariant,
-  ariaLabel,
-  className
-}: DualSidebarProps): react_jsx_runtime0.JSX.Element;
+}: FloatingSidebarProps): react_jsx_runtime0.JSX.Element;
 //#endregion
-//#region src/dashboard/presets/floating-sidebar.d.ts
-interface FloatingSidebarBrand {
+//#region src/dashboard/presets/inset-sidebar.d.ts
+interface InsetSidebarBrand {
   title: string;
   icon: React$1.ReactNode;
   href?: string;
 }
-interface FloatingSidebarProject {
+interface InsetSidebarProject {
   items: ProjectItem[];
   selected?: ProjectItem;
   onSelect: (project: ProjectItem) => void;
@@ -619,25 +466,29 @@ interface FloatingSidebarProject {
   label?: string;
   icon?: LucideIcon;
 }
-interface FloatingSidebarUser {
+interface InsetSidebarUser {
   data: UserData;
   menuItems?: UserMenuItem[];
   onLogout?: () => void;
 }
-interface FloatingSidebarProps {
+interface InsetSidebarProps {
   /** Brand configuration */
-  brand: FloatingSidebarBrand;
+  brand: InsetSidebarBrand;
   /** Navigation groups */
   navigation: NavGroup[];
   /** Secondary navigation (shown at bottom above user) */
   secondaryNavigation?: NavGroup[];
   /** Project/workspace switcher configuration */
-  project?: FloatingSidebarProject;
+  project?: InsetSidebarProject;
   /** User menu configuration */
-  user?: FloatingSidebarUser;
+  user?: InsetSidebarUser;
   /** Custom content to render in header (after brand/project switcher) */
   headerContent?: React$1.ReactNode;
-  /** Side of the screen */
+  /** Sidebar visual style. "inset" = rounded with padding. "flush" = edge-to-edge, no rounding. Default: "inset" */
+  sidebarStyle?: "inset" | "flush";
+  /** Nav item height density. "comfortable" = taller items like KIE AI. Default: "default" */
+  density?: "compact" | "default" | "comfortable";
+  /** Sidebar position */
   side?: "left" | "right";
   /** Accessibility label for the sidebar */
   ariaLabel?: string;
@@ -647,22 +498,23 @@ interface FloatingSidebarProps {
   children?: React$1.ReactNode;
 }
 /**
- * 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.
+ * InsetSidebar - Complete sidebar preset with inset variant.
+ * The standard dashboard sidebar with collapsible to icons.
  */
-declare function FloatingSidebar({
+declare function InsetSidebar({
   brand,
   navigation,
   secondaryNavigation,
   project,
   user,
   headerContent,
+  sidebarStyle,
+  density,
   side,
   ariaLabel,
   className,
   children
-}: FloatingSidebarProps): react_jsx_runtime0.JSX.Element;
+}: InsetSidebarProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/dashboard/presets/mini-sidebar.d.ts
 interface MiniSidebarBrand {
@@ -777,4 +629,344 @@ declare function TopbarRail({
   children
 }: TopbarRailProps): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { type BreadcrumbItem, type BreadcrumbItemData, DashboardContent, type DashboardContentProps, DashboardHeader, type DashboardHeaderProps, DashboardPageLayout, type DashboardPageLayoutProps, DualSidebar, type DualSidebarBrand, type DualSidebarCategory, type DualSidebarItem, type DualSidebarProps, type DualSidebarUser, FloatingSidebar, type FloatingSidebarBrand, type FloatingSidebarProject, type FloatingSidebarProps, type FloatingSidebarUser, type HeaderAction, type HeaderBadge, type HeaderMetadata, HeaderSection, type HeaderSectionProps, InsetSidebar, type InsetSidebarBrand, type InsetSidebarProject, type InsetSidebarProps, type InsetSidebarUser, MiniSidebar, type MiniSidebarBrand, type MiniSidebarGroup, type MiniSidebarItem, type MiniSidebarProps, type MiniSidebarUser, type NavGroup, type NavItem, type NavPermissions, type NavSubItem, PageHeader, type PageHeaderProps, type ProjectItem, ProjectSwitcher, type ProjectSwitcherProps, SidebarBrand, type SidebarBrandProps, SidebarNav, SidebarNavGroup, type SidebarNavGroupProps, SidebarNavItem, type SidebarNavItemProps, type SidebarNavProps, SidebarUserMenu, type SidebarUserMenuProps, TopbarRail, type TopbarRailBrand, type TopbarRailBreadcrumb, type TopbarRailCategory, type TopbarRailItem, type TopbarRailProps, type TopbarRailUser, type UserData, type UserMenuItem, cn, resolveCategories, resolveMiniNavigation, resolveNavigation };
+//#region src/dashboard/dashboard-layout.d.ts
+type RailVariant = "default" | "dark" | "primary" | "muted";
+interface InsetSidebarConfig {
+  variant: "inset";
+  brand: InsetSidebarBrand;
+  navigation: NavGroup[];
+  secondaryNavigation?: NavGroup[];
+  project?: InsetSidebarProject;
+  user?: InsetSidebarUser;
+  /** Custom content below brand (e.g., "Create" button, org switcher) */
+  headerContent?: React$1.ReactNode;
+  /** "inset" = rounded with padding (default). "flush" = edge-to-edge, no rounding. */
+  sidebarStyle?: "inset" | "flush";
+  /** Nav item density. "comfortable" = taller items. */
+  density?: "compact" | "default" | "comfortable";
+  side?: "left" | "right";
+}
+interface FloatingSidebarConfig {
+  variant: "floating";
+  brand: FloatingSidebarBrand;
+  navigation: NavGroup[];
+  secondaryNavigation?: NavGroup[];
+  project?: FloatingSidebarProject;
+  user?: FloatingSidebarUser;
+  /** Custom content below brand (e.g., "Create" button, org switcher) */
+  headerContent?: React$1.ReactNode;
+  side?: "left" | "right";
+}
+interface MiniSidebarConfig {
+  variant: "mini";
+  brand: MiniSidebarBrand;
+  navigation: MiniSidebarGroup[];
+  secondaryNavigation?: MiniSidebarGroup[];
+  user?: MiniSidebarUser;
+  /** Custom content below brand */
+  headerContent?: React$1.ReactNode;
+  side?: "left" | "right";
+  showRail?: boolean;
+}
+interface DualSidebarConfig {
+  variant: "dual";
+  brand: DualSidebarBrand;
+  categories: DualSidebarCategory[];
+  user?: DualSidebarUser;
+  /** Custom content in expanded panel header (e.g., "Create" button, org switcher) */
+  headerContent?: React$1.ReactNode;
+  /** Custom content above user menu in expanded panel */
+  footerContent?: React$1.ReactNode;
+  railVariant?: RailVariant;
+  /** "inset" = rounded with padding (default). "flush" = edge-to-edge, no rounding. */
+  sidebarStyle?: "inset" | "flush";
+  defaultCategoryId?: string;
+  activeCategoryId?: string;
+  onCategoryChange?: (id: string) => void;
+  defaultCollapsed?: boolean;
+  collapsed?: boolean;
+  onCollapsedChange?: (collapsed: boolean) => void;
+}
+interface TopbarRailConfig {
+  variant: "topbar-rail";
+  brand: TopbarRailBrand;
+  categories: TopbarRailCategory[];
+  user?: TopbarRailUser;
+  railVariant?: RailVariant;
+  defaultCategoryId?: string;
+  defaultDrawerOpen?: boolean;
+}
+type SidebarConfig = InsetSidebarConfig | FloatingSidebarConfig | MiniSidebarConfig | DualSidebarConfig | TopbarRailConfig;
+interface BreadcrumbsConfig extends UseDashboardBreadcrumbsOptions {
+  basePath: string;
+}
+interface DashboardLayoutProps {
+  /** Sidebar configuration — discriminated by `variant` */
+  sidebar: SidebarConfig;
+  /** Auto-generate breadcrumbs from pathname. Pass false to disable. */
+  breadcrumbs?: BreadcrumbsConfig | false;
+  /** Right-side header content (search triggers, mode toggle, etc.) */
+  headerRight?: React$1.ReactNode;
+  /** Left-side header content (after breadcrumbs) */
+  headerLeft?: React$1.ReactNode;
+  /** Override the entire header. Pass false to hide. */
+  header?: React$1.ReactNode | false;
+  /** Make the header stick to the top while content scrolls. Applies proper bg + border automatically. */
+  stickyHeader?: boolean;
+  /** Additional className for the auto-generated header */
+  headerClassName?: string;
+  /** Additional className */
+  className?: string;
+  /** Page content */
+  children: React$1.ReactNode;
+}
+declare function DashboardLayout({
+  sidebar,
+  breadcrumbs,
+  headerRight,
+  headerLeft,
+  header,
+  stickyHeader,
+  headerClassName,
+  className,
+  children
+}: DashboardLayoutProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/dashboard/dashboard-content.d.ts
+interface DashboardContentProps {
+  /** Content to render inside the dashboard area */
+  children: React$1.ReactNode;
+  /** Additional className for the outer wrapper */
+  className?: string;
+  /** Enable @container queries on the content area */
+  container?: boolean | string;
+  /** Horizontal padding — defaults to "md" */
+  padding?: "none" | "sm" | "md" | "lg";
+}
+/**
+ * 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>
+ * ```
+ */
+declare function DashboardContent({
+  children,
+  className,
+  container,
+  padding
+}: DashboardContentProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/dashboard/page-header.d.ts
+interface BreadcrumbItemData {
+  label: string;
+  href?: string;
+  current?: boolean;
+}
+interface PageHeaderProps {
+  items: BreadcrumbItemData[];
+  className?: string;
+  actions?: React.ReactNode;
+}
+declare function PageHeader({
+  items,
+  className,
+  actions
+}: PageHeaderProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/dashboard/dashboard-page-layout.d.ts
+interface DashboardPageLayoutProps {
+  /** Breadcrumb items for the page header */
+  breadcrumbs: BreadcrumbItemData[];
+  /** Action buttons rendered in the page header */
+  actions?: ReactNode;
+  /** Whether to wrap children in Suspense (default: true) */
+  suspense?: boolean;
+  /** Custom Suspense fallback. Defaults to a spinner. */
+  fallback?: ReactNode;
+  /** Additional className for the content wrapper */
+  className?: string;
+  children: ReactNode;
+}
+/**
+ * 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>
+ * ```
+ */
+declare function DashboardPageLayout({
+  breadcrumbs,
+  actions,
+  suspense,
+  fallback,
+  className,
+  children
+}: DashboardPageLayoutProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/dashboard/header-section.d.ts
+interface HeaderAction {
+  text: string;
+  onClick?: () => void;
+  disabled?: boolean;
+  variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
+  size?: "default" | "sm" | "lg" | "icon";
+  className?: string;
+  icon?: LucideIcon;
+  iconPosition?: "left" | "right";
+  loadingText?: string;
+  loading?: boolean;
+}
+interface HeaderBadge {
+  text: string;
+  variant?: "default" | "secondary" | "destructive" | "outline";
+  className?: string;
+}
+interface HeaderMetadata {
+  text: string;
+  icon?: LucideIcon;
+}
+interface HeaderSectionProps {
+  title?: string;
+  description?: string;
+  actions?: HeaderAction[] | null;
+  icon?: LucideIcon | null;
+  iconClassName?: string;
+  loading?: boolean;
+  variant?: "default" | "compact" | "hero" | "minimal";
+  className?: string;
+  badge?: HeaderBadge | ReactNode;
+  breadcrumbs?: ReactNode;
+  metadata?: HeaderMetadata[];
+  children?: ReactNode;
+}
+declare function HeaderSection({
+  title,
+  description,
+  actions,
+  icon: Icon,
+  iconClassName,
+  loading,
+  variant,
+  className,
+  badge,
+  breadcrumbs,
+  metadata,
+  children
+}: HeaderSectionProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/dashboard/sidebar-brand.d.ts
+interface SidebarBrandProps {
+  /** Brand title text */
+  title: string;
+  /** Brand icon/logo element */
+  icon: React$1.ReactNode;
+  /** Link href (defaults to "/") */
+  href?: string;
+  /** Additional className */
+  className?: string;
+  /** Tooltip text when collapsed (defaults to title) */
+  tooltip?: string;
+}
+/**
+ * SidebarBrand - Logo and title section for dashboard sidebar.
+ * Automatically handles collapsed state styling.
+ */
+declare function SidebarBrand({
+  title,
+  icon,
+  href,
+  className,
+  tooltip
+}: SidebarBrandProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/dashboard/sidebar-nav.d.ts
+type SidebarDensity = "compact" | "default" | "comfortable";
+interface SidebarNavProps {
+  /** Navigation groups to render */
+  groups: NavGroup[];
+  /** Item height density. "compact" = h-7, "default" = h-8, "comfortable" = h-10 */
+  density?: SidebarDensity;
+  /** Additional className */
+  className?: string;
+  /** Callback when a nav item is clicked */
+  onItemClick?: (item: NavItem) => void;
+}
+interface SidebarNavGroupProps {
+  /** Group title (optional) */
+  title?: string;
+  /** Navigation items in this group */
+  items: NavItem[];
+  /** Item density */
+  density?: SidebarDensity;
+  /** Additional className */
+  className?: string;
+  /** Callback when an item is clicked */
+  onItemClick?: (item: NavItem) => void;
+}
+interface SidebarNavItemProps {
+  /** The navigation item data */
+  item: NavItem;
+  /** Item density */
+  density?: SidebarDensity;
+  /** Callback when clicked */
+  onClick?: () => void;
+}
+/**
+ * SidebarNavItem - Single navigation item with optional sub-items.
+ */
+declare function SidebarNavItem({
+  item,
+  density,
+  onClick
+}: SidebarNavItemProps): react_jsx_runtime0.JSX.Element;
+/**
+ * SidebarNavGroup - A group of navigation items with optional title.
+ */
+declare function SidebarNavGroup({
+  title,
+  items,
+  density,
+  className,
+  onItemClick
+}: SidebarNavGroupProps): react_jsx_runtime0.JSX.Element;
+/**
+ * SidebarNav - Complete navigation section with multiple groups.
+ */
+declare function SidebarNav({
+  groups,
+  density,
+  className,
+  onItemClick
+}: SidebarNavProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { type BreadcrumbItem, type BreadcrumbItemData, type BreadcrumbsConfig, ClientOnly, DashboardContent, type DashboardContentProps, DashboardHeader, type DashboardHeaderProps, DashboardLayout, type DashboardLayoutProps, DashboardPageLayout, type DashboardPageLayoutProps, DualSidebar, type DualSidebarBrand, type DualSidebarCategory, type DualSidebarItem, type DualSidebarProps, type DualSidebarUser, FloatingSidebar, type FloatingSidebarBrand, type FloatingSidebarProject, type FloatingSidebarProps, type FloatingSidebarUser, type HeaderAction, type HeaderBadge, type HeaderMetadata, HeaderSection, type HeaderSectionProps, InsetSidebar, type InsetSidebarBrand, type InsetSidebarProject, type InsetSidebarProps, type InsetSidebarUser, MiniSidebar, type MiniSidebarBrand, type MiniSidebarGroup, type MiniSidebarItem, type MiniSidebarProps, type MiniSidebarUser, type NavGroup, type NavItem, type NavPermissions, type NavSubItem, PageHeader, type PageHeaderProps, type ProjectItem, ProjectSwitcher, type ProjectSwitcherProps, SidebarBrand, type SidebarBrandProps, type SidebarConfig, SidebarNav, SidebarNavGroup, type SidebarNavGroupProps, SidebarNavItem, type SidebarNavItemProps, type SidebarNavProps, SidebarUserMenu, type SidebarUserMenuProps, TopbarRail, type TopbarRailBrand, type TopbarRailBreadcrumb, type TopbarRailCategory, type TopbarRailItem, type TopbarRailProps, type TopbarRailUser, type UseDashboardBreadcrumbsOptions, type UserData, type UserMenuItem, cn, findActiveCategory, findActiveItem, matchRoute, resolveCategories, resolveMiniNavigation, resolveNavigation, useDashboardBreadcrumbs };