@humain/ui 2.1.63 → 2.1.65

package/dist/index224.js

@@ -1,759 +1,229 @@
 "use client";
 import { cn } from "./index2.js";
-import { Badge } from "./index14.js";
-import { Separator } from "./index51.js";
-import { Avatar } from "./index70.js";
-import { BrandIcon } from "./index71.js";
-import { Tooltip, TooltipPopup, TooltipTrigger } from "./index122.js";
-import { PopoverPopup, PopoverRoot, PopoverTrigger } from "./index211.js";
-import { MOBILE_BREAKPOINT, useIsMobile } from "./index215.js";
-import { Sidebar as SidebarCompound, SidebarAccountSkeleton, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarNavSkeleton, SidebarProvider, SidebarTrigger, useSidebar } from "./index216.js";
-import { cva } from "class-variance-authority";
-import { ChevronRight, MessageCircle, PanelLeftClose, PanelLeftOpen } from "lucide-react";
+import { Button } from "./index5.js";
+import { DropdownMenu } from "./index192.js";
+import { usePanelExpansion } from "./index218.js";
+import { AppShellContent } from "./index219.js";
+import { EllipsisVertical, Maximize2, Minimize2 } from "lucide-react";
 import * as React from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/templates/AppSidebar/AppSidebar.tsx
-/** biome-ignore-all lint/a11y/noNoninteractiveTabindex: ChatList uses tabIndex on scrollable div for keyboard scrolling */
-/** biome-ignore-all lint/a11y/useSemanticElements: NavSection uses role="separator" on inner <div>; ChatList uses role="list" on scrollable div */
-/** biome-ignore-all lint/a11y/useFocusableInteractive: Non-focusable separator per WAI-ARIA spec for decorative separators */
-/** biome-ignore-all lint/a11y/useAriaPropsForRole: Non-focusable separators don't require aria-valuenow per WAI-ARIA spec */
-/** biome-ignore-all lint/a11y/noNoninteractiveElementToInteractiveRole: role="separator" on <div> inside list items for semantic section boundaries */
-function formatAccessibleLabel(label, badge) {
-	if (badge == null) return label;
-	return `${label}, ${typeof badge === "number" ? `${badge} ${badge === 1 ? "item" : "items"}` : badge}`;
-}
-function getSidebarBgClass(isCollapsed, sidebarBgColor) {
-	return isCollapsed ? "bg-transparent" : sidebarBgColor ?? "bg-muted";
-}
-function getSkeletonCount(count, fallback) {
-	return typeof count === "number" && Number.isFinite(count) && count >= 0 ? Math.floor(count) : fallback;
-}
-var APP_SIDEBAR_IMPLICIT_SLOT = Symbol("AppSidebarImplicitSlot");
-function markAppSidebarImplicitSlot(component, slot) {
-	const slottedComponent = component;
-	slottedComponent[APP_SIDEBAR_IMPLICIT_SLOT] = slot;
-	return slottedComponent;
-}
-function isAppSidebarImplicitSlotComponent(value) {
-	return (typeof value === "function" || typeof value === "object" && value !== null) && APP_SIDEBAR_IMPLICIT_SLOT in value;
-}
-function getAppSidebarImplicitSlot(childType) {
-	if (isAppSidebarImplicitSlotComponent(childType)) return childType[APP_SIDEBAR_IMPLICIT_SLOT];
-	if (typeof childType === "object" && childType !== null) {
-		const wrappedComponent = childType;
-		return getAppSidebarImplicitSlot(wrappedComponent.type) ?? getAppSidebarImplicitSlot(wrappedComponent.render);
-	}
-}
-function useSlotChildren(children) {
-	return React.useMemo(() => {
-		const result = {
-			header: [],
-			content: [],
-			footer: [],
-			explicitHeader: null,
-			explicitContent: null,
-			explicitFooter: null
-		};
-		React.Children.forEach(children, (child) => {
-			if (!React.isValidElement(child)) return;
-			const childType = child.type;
-			if (childType === AppSidebarHeader) {
-				result.explicitHeader = child;
-				return;
-			}
-			if (childType === AppSidebarContent) {
-				result.explicitContent = child;
-				return;
-			}
-			if (childType === AppSidebarFooter) {
-				result.explicitFooter = child;
-				return;
-			}
-			const implicitSlot = getAppSidebarImplicitSlot(childType);
-			if (implicitSlot === "header") result.header.push(child);
-			else if (implicitSlot === "content") result.content.push(child);
-			else if (implicitSlot === "footer") result.footer.push(child);
-			else result.content.push(child);
-		});
-		return result;
-	}, [children]);
-}
-var AppSidebarLayoutContext = React.createContext({ side: "left" });
-function useAppSidebarLayout() {
-	return React.useContext(AppSidebarLayoutContext);
-}
-function getAppSidebarDirection(element) {
-	const win = element?.ownerDocument.defaultView;
-	if (!element || !win) return "ltr";
-	return win.getComputedStyle(element).direction === "rtl" ? "rtl" : "ltr";
-}
-function normalizeAppSidebarDirection(dir) {
-	return dir === "rtl" || dir === "ltr" ? dir : void 0;
-}
-function getAppSidebarSideFromDirection(direction) {
-	return direction === "rtl" ? "right" : "left";
-}
-function getAppSidebarDirectionTargets(element) {
-	const targets = /* @__PURE__ */ new Set();
-	let current = element;
-	while (current) {
-		targets.add(current);
-		if (current === element.ownerDocument.documentElement) break;
-		current = current.parentElement;
-	}
-	targets.add(element.ownerDocument.documentElement);
-	if (element.ownerDocument.body) targets.add(element.ownerDocument.body);
-	return Array.from(targets);
-}
-function useResolvedAppSidebarSide({ containerRef, explicitDir, explicitSide }) {
-	const [detectedDirection, setDetectedDirection] = React.useState(() => normalizeAppSidebarDirection(explicitDir) ?? "ltr");
-	React.useEffect(() => {
-		if (explicitSide) return;
-		const normalizedExplicitDir = normalizeAppSidebarDirection(explicitDir);
-		if (normalizedExplicitDir) {
-			setDetectedDirection((current) => current === normalizedExplicitDir ? current : normalizedExplicitDir);
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/templates/AppShellCard/AppShellCard.tsx
+var HEADER_TYPE = "AppShellCard.Header";
+var TOOLBAR_TYPE = "AppShellCard.Toolbar";
+var ACTIONS_TYPE = "AppShellCard.Actions";
+var MENU_TYPE = "AppShellCard.Menu";
+var TITLE_TYPE = "AppShellCard.Title";
+function getAppShellCardType(child) {
+	if (!child.type || typeof child.type === "string") return;
+	return child.type.__appShellCardType;
+}
+function assignAppShellCardType(component, type) {
+	component.__appShellCardType = type;
+	return component;
+}
+function getNodeText(node) {
+	if (typeof node === "string" || typeof node === "number") return String(node);
+	if (Array.isArray(node)) return node.map(getNodeText).join("");
+	if (React.isValidElement(node)) return getNodeText(node.props.children);
+	return "";
+}
+function getTitleText(node) {
+	let titleText = "";
+	React.Children.forEach(node, (child) => {
+		if (titleText || !React.isValidElement(child)) return;
+		if (getAppShellCardType(child) === TITLE_TYPE) {
+			titleText = getNodeText(child.props.children).trim();
 			return;
 		}
-		const container = containerRef.current;
-		const win = container?.ownerDocument.defaultView;
-		if (!container || !win) return;
-		const detectDirection = () => {
-			const nextDirection = getAppSidebarDirection(container);
-			setDetectedDirection((current) => current === nextDirection ? current : nextDirection);
+		titleText = getTitleText(child.props.children);
+	});
+	return titleText;
+}
+var appShellCardBodyPaddingClasses = {
+	none: "",
+	md: "p-4 sm:p-6"
+};
+var appShellCardElevationClasses = {
+	none: "shadow-none",
+	"2xs": "shadow-2xs",
+	xs: "shadow-xs",
+	sm: "shadow-sm",
+	md: "shadow-md",
+	lg: "shadow-lg",
+	xl: "shadow-xl",
+	"2xl": "shadow-2xl"
+};
+var appShellCardToolbarClassName = "flex shrink-0 items-center gap-4 overflow-hidden border-b border-border px-4 py-3 sm:gap-6 sm:p-6";
+var AppShellCardRoot = React.forwardRef(function AppShellCardRoot({ className, bodyPadding = "md", elevation = "md", bodyClassName, bodyAriaLabel, inset = false, children, ...props }, ref) {
+	const expansion = usePanelExpansion();
+	const menuId = React.useId();
+	const bodyRef = React.useRef(null);
+	React.useEffect(() => {
+		const el = bodyRef.current;
+		if (!el) return;
+		const update = () => {
+			const hasOverflow = el.scrollHeight > el.clientHeight;
+			const top = hasOverflow && el.scrollTop > 0 ? "1" : "0";
+			const bottom = hasOverflow && el.scrollTop + el.clientHeight < el.scrollHeight - 1 ? "1" : "0";
+			if (el.style.getPropertyValue("--scroll-t") !== top) el.style.setProperty("--scroll-t", top);
+			if (el.style.getPropertyValue("--scroll-b") !== bottom) el.style.setProperty("--scroll-b", bottom);
 		};
-		detectDirection();
-		const Observer = win.MutationObserver;
-		if (!Observer) return;
-		const observer = new Observer(detectDirection);
-		for (const target of getAppSidebarDirectionTargets(container)) observer.observe(target, {
-			attributes: true,
-			attributeFilter: [
-				"dir",
-				"class",
-				"style"
-			]
-		});
-		return () => observer.disconnect();
-	}, [
-		containerRef,
-		explicitDir,
-		explicitSide
-	]);
-	return explicitSide ?? getAppSidebarSideFromDirection(detectedDirection);
-}
-var DEFAULT_COMPACTED_LOGO = /* @__PURE__ */ jsx(BrandIcon, {
-	icon: "mark",
-	size: "lg"
-});
-function AppSidebarLogo({ logo, compactedLogo, subtext, className, ...props }) {
-	const { state, toggleSidebar } = useSidebar();
-	const isCollapsed = state === "collapsed";
-	const effectiveCompactedLogo = compactedLogo ?? DEFAULT_COMPACTED_LOGO;
-	if (isCollapsed) return /* @__PURE__ */ jsx("div", {
-		"data-slot": "app-sidebar-logo",
-		className: cn("flex items-center justify-center", className),
-		...props,
-		dir: "ltr",
-		children: /* @__PURE__ */ jsxs("button", {
-			type: "button",
-			onClick: toggleSidebar,
-			className: "group/logo relative flex min-h-11 min-w-11 items-center justify-center rounded-md p-1 transition-colors duration-200 ease-smooth hover:bg-background focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring motion-reduce:transition-none",
-			"aria-label": "Expand sidebar",
-			children: [/* @__PURE__ */ jsx("span", {
-				className: "transition-opacity duration-200 ease-smooth group-hover/logo:opacity-0 motion-reduce:transition-none",
-				children: effectiveCompactedLogo
-			}), /* @__PURE__ */ jsx(PanelLeftOpen, { className: "absolute size-5 opacity-0 transition-opacity duration-200 ease-smooth group-hover/logo:opacity-100 motion-reduce:transition-none" })]
-		})
-	});
-	return /* @__PURE__ */ jsxs("div", {
-		"data-slot": "app-sidebar-logo",
-		className: cn("flex items-center justify-between px-3", className),
+		el.addEventListener("scroll", update, { passive: true });
+		const OwnerResizeObserver = el.ownerDocument.defaultView?.ResizeObserver;
+		const observer = OwnerResizeObserver ? new OwnerResizeObserver(update) : null;
+		observer?.observe(el);
+		update();
+		return () => {
+			el.removeEventListener("scroll", update);
+			observer?.disconnect();
+		};
+	}, []);
+	let toolbarSlot = null;
+	let headerSlot = null;
+	let actionsSlot = null;
+	let menuSlot = null;
+	const toolbarChildren = [];
+	const bodyChildren = [];
+	for (const child of React.Children.toArray(children)) {
+		if (!React.isValidElement(child)) {
+			bodyChildren.push(child);
+			continue;
+		}
+		const type = getAppShellCardType(child);
+		if (type === HEADER_TYPE) headerSlot = child;
+		else if (type === TOOLBAR_TYPE) toolbarSlot = child;
+		else if (type === ACTIONS_TYPE) actionsSlot = child;
+		else if (type === MENU_TYPE) menuSlot = child;
+		else bodyChildren.push(child);
+	}
+	if (toolbarSlot) for (const child of React.Children.toArray(toolbarSlot.props.children)) {
+		if (!React.isValidElement(child)) {
+			toolbarChildren.push(child);
+			continue;
+		}
+		const type = getAppShellCardType(child);
+		if (type === HEADER_TYPE) headerSlot = child;
+		else if (type === ACTIONS_TYPE) actionsSlot = child;
+		else if (type === MENU_TYPE) menuSlot = child;
+		else toolbarChildren.push(child);
+	}
+	const hasToolbar = toolbarSlot || headerSlot || actionsSlot || menuSlot || toolbarChildren.length > 0 || expansion?.onExpandedChange;
+	const titleText = headerSlot ? getTitleText(headerSlot) : "";
+	const resolvedBodyAriaLabel = bodyAriaLabel ?? (titleText ? `${titleText} content` : "Card content");
+	const { children: _toolbarSlotChildren, className: toolbarClassName, ...toolbarProps } = toolbarSlot?.props ?? {};
+	return /* @__PURE__ */ jsxs(AppShellContent, {
+		ref,
+		"data-slot": "app-shell-card",
+		className: cn(appShellCardElevationClasses[elevation], "transition-[margin] duration-300 ease-[cubic-bezier(0.16,1,0.3,1)]", inset && !expansion?.expanded ? "mx-5 my-10" : "m-0", className),
 		...props,
-		dir: "ltr",
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex flex-col gap-0",
-			children: [/* @__PURE__ */ jsx("div", {
-				className: "flex items-center gap-2",
-				children: logo || /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(BrandIcon, {
-					icon: "mark",
-					size: "lg"
-				}), /* @__PURE__ */ jsx("span", {
-					className: "text-lg font-semibold tracking-tight text-foreground",
-					children: "HUMAIN"
-				})] })
-			}), subtext && /* @__PURE__ */ jsx("p", {
-				className: "text-sm text-sidebar-foreground",
-				children: subtext
-			})]
-		}), /* @__PURE__ */ jsx("button", {
-			type: "button",
-			onClick: toggleSidebar,
-			className: "relative flex size-7 items-center justify-center rounded-md text-muted-foreground transition-colors duration-200 ease-smooth hover:bg-background hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring motion-reduce:transition-none after:absolute after:-inset-2",
-			"aria-label": "Collapse sidebar",
-			children: /* @__PURE__ */ jsx(PanelLeftClose, {
-				"aria-hidden": "true",
-				className: "size-4"
-			})
+		children: [hasToolbar && /* @__PURE__ */ jsxs("div", {
+			role: "toolbar",
+			"aria-label": "Card actions",
+			...toolbarProps,
+			"data-slot": "app-shell-card-toolbar",
+			className: cn(appShellCardToolbarClassName, toolbarClassName),
+			children: [
+				headerSlot,
+				toolbarChildren,
+				actionsSlot,
+				menuSlot && /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenu.Trigger, { render: /* @__PURE__ */ jsx(Button, {
+					appearance: "ghost",
+					size: "icon",
+					"aria-label": "More options",
+					children: /* @__PURE__ */ jsx(EllipsisVertical, { className: "size-5" })
+				}) }), /* @__PURE__ */ jsx(DropdownMenu.Popup, {
+					id: `${menuId}-popup`,
+					align: "end",
+					sideOffset: 4,
+					children: menuSlot.props.children
+				})] }),
+				expansion?.onExpandedChange && /* @__PURE__ */ jsx(Button, {
+					appearance: "ghost",
+					size: "icon",
+					onClick: () => expansion.onExpandedChange?.(!expansion.expanded),
+					"aria-label": expansion.expanded ? "Minimize panel" : "Maximize panel",
+					children: /* @__PURE__ */ jsx("span", {
+						className: "delight-fade-in inline-flex",
+						children: expansion.expanded ? /* @__PURE__ */ jsx(Minimize2, { className: "size-5" }) : /* @__PURE__ */ jsx(Maximize2, { className: "size-5" })
+					}, String(expansion.expanded))
+				})
+			]
+		}), /* @__PURE__ */ jsx("section", {
+			ref: bodyRef,
+			"data-slot": "app-shell-card-body",
+			"aria-label": resolvedBodyAriaLabel || "Card content",
+			tabIndex: 0,
+			className: cn("delight-scroll-shadow flex-1 min-h-0 overflow-auto focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring rounded-b-[inherit]", appShellCardBodyPaddingClasses[bodyPadding], bodyClassName),
+			children: bodyChildren
 		})]
 	});
-}
-AppSidebarLogo.displayName = "AppSidebar.Logo";
-function AppSidebarHeader({ children, className }) {
+});
+AppShellCardRoot.displayName = "AppShellCard";
+function AppShellCardToolbar({ className, children, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "app-sidebar-header",
-		className,
+		"data-slot": "app-shell-card-toolbar",
+		role: "toolbar",
+		"aria-label": "Card actions",
+		className: cn(appShellCardToolbarClassName, className),
+		...props,
 		children
 	});
 }
-AppSidebarHeader.displayName = "AppSidebar.Header";
-function AppSidebarContent({ children, className }) {
+AppShellCardToolbar.displayName = "AppShellCard.Toolbar";
+assignAppShellCardType(AppShellCardToolbar, TOOLBAR_TYPE);
+function AppShellCardHeader({ className, children, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "app-sidebar-content",
-		className,
+		"data-slot": "app-shell-card-header",
+		className: cn("flex min-w-0 flex-1 flex-col justify-center", className),
+		...props,
 		children
 	});
 }
-AppSidebarContent.displayName = "AppSidebar.Content";
-function AppSidebarFooter({ children, className }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "app-sidebar-footer",
-		className,
+AppShellCardHeader.displayName = "AppShellCard.Header";
+assignAppShellCardType(AppShellCardHeader, HEADER_TYPE);
+function AppShellCardTitle({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("h3", {
+		"data-slot": "app-shell-card-title",
+		className: cn("text-lg font-semibold leading-7 text-foreground", className),
+		...props,
 		children
 	});
 }
-AppSidebarFooter.displayName = "AppSidebar.Footer";
-function AppSidebarNav({ children, "aria-label": ariaLabel = "Sidebar navigation", className }) {
-	const menuContent = /* @__PURE__ */ jsx(SidebarMenu, {
-		className: "gap-0.5 group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:gap-2",
-		children: React.Children.map(children, (child) => /* @__PURE__ */ jsx(SidebarMenuItem, { children: child }))
-	});
-	return /* @__PURE__ */ jsx(SidebarGroup, {
-		"data-slot": "app-sidebar-nav",
-		className: cn("shrink-0 p-0 group-data-[collapsible=icon]:w-auto", className),
-		children: /* @__PURE__ */ jsx(SidebarGroupContent, { children: /* @__PURE__ */ jsx("nav", {
-			"aria-label": ariaLabel,
-			children: menuContent
-		}) })
-	});
-}
-AppSidebarNav.displayName = "AppSidebar.Nav";
-markAppSidebarImplicitSlot(AppSidebarNav, "content");
-function AppSidebarNavSection({ label, className }) {
-	return /* @__PURE__ */ jsxs("div", {
-		"data-slot": "app-sidebar-nav-section",
-		role: "separator",
-		"aria-label": label,
-		className: cn("py-2 group-data-[collapsible=icon]:w-8", className),
-		children: [/* @__PURE__ */ jsx("div", {
-			className: "flex h-8 items-center px-2 group-data-[collapsible=icon]:hidden",
-			children: /* @__PURE__ */ jsx("span", {
-				className: "text-xs font-medium text-sidebar-foreground/80",
-				children: label
-			})
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "hidden py-2 group-data-[collapsible=icon]:block",
-			children: [/* @__PURE__ */ jsx("span", {
-				className: "sr-only",
-				children: label
-			}), /* @__PURE__ */ jsx(Separator, { className: "mx-auto w-8" })]
-		})]
-	});
-}
-AppSidebarNavSection.displayName = "AppSidebar.NavSection";
-var navItemVariants = cva("relative flex w-full items-center gap-1.5 rounded-md px-2 py-2 text-sm font-normal transition-[color,background-color] duration-200 ease-smooth motion-reduce:transition-none", {
-	variants: { state: {
-		default: "text-sidebar-foreground hover:bg-background",
-		active: "bg-primary/10 text-sidebar-foreground"
-	} },
-	defaultVariants: { state: "default" }
-});
-function AppSidebarNavItem({ icon, label, isActive = false, badge, onClick, href, className, children }) {
-	const { state, containerRef } = useSidebar();
-	const { side: sidebarSide } = useAppSidebarLayout();
-	const isCollapsed = state === "collapsed";
-	const hasChildren = React.Children.count(children) > 0;
-	const [isOpen, setIsOpen] = React.useState(isActive && hasChildren);
-	const subNavId = React.useId();
-	const floatingSide = sidebarSide === "right" ? "left" : "right";
-	const flyoutPanelBackground = "linear-gradient(108deg, var(--opacity-white-87) 0.5219%, var(--opacity-white-75) 98.419%)";
-	const flyoutFrameEdgeClassName = sidebarSide === "right" ? "justify-end rounded-l-xl rounded-r-none" : "justify-start rounded-r-xl rounded-l-none";
-	const flyoutPanelEdgeClassName = sidebarSide === "right" ? "rounded-l-xl" : "rounded-r-xl";
-	const flyoutAnchor = React.useMemo(() => ({ getBoundingClientRect: () => {
-		const container = containerRef.current;
-		const rect = container?.getBoundingClientRect();
-		const viewportHeight = (container?.ownerDocument.defaultView)?.innerHeight ?? rect?.height ?? 0;
-		const x = rect ? sidebarSide === "right" ? rect.left : rect.right : 0;
-		return {
-			x,
-			y: 0,
-			top: 0,
-			right: x,
-			bottom: viewportHeight,
-			left: x,
-			width: 0,
-			height: viewportHeight
-		};
-	} }), [containerRef, sidebarSide]);
-	React.useEffect(() => {
-		if (isActive && hasChildren) setIsOpen(true);
-	}, [isActive, hasChildren]);
-	const accessibleLabel = formatAccessibleLabel(label, badge);
-	const iconElement = /* @__PURE__ */ jsx("span", {
-		"data-slot": "nav-icon",
-		className: "flex shrink-0 items-center p-0.5 [&>svg]:size-4",
-		children: icon
-	});
-	const labelElement = /* @__PURE__ */ jsx("span", {
-		className: "flex-1 text-start group-data-[collapsible=icon]:hidden",
-		children: label
-	});
-	const badgeElement = badge != null && /* @__PURE__ */ jsx(Badge, {
-		size: "sm",
-		variant: "soft",
-		color: isActive ? "secondary" : "primary",
-		className: "group-data-[collapsible=icon]:hidden",
-		"aria-hidden": "true",
-		children: badge
-	});
-	const chevronElement = hasChildren && /* @__PURE__ */ jsx(ChevronRight, {
-		"aria-hidden": "true",
-		className: cn("size-4 shrink-0 text-muted-foreground transition-transform duration-200 ease-smooth group-data-[collapsible=icon]:hidden motion-reduce:transition-none", isOpen ? "rotate-90" : "rtl:rotate-180", isActive && isOpen && "text-primary")
-	});
-	const itemClassName = cn(navItemVariants({ state: isActive ? "active" : "default" }), "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", "min-h-11 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-0 group-data-[collapsible=icon]:py-2 group-data-[collapsible=icon]:w-11 group-data-[collapsible=icon]:h-11", className);
-	const ariaProps = isActive ? { "aria-current": "page" } : {};
-	if (isCollapsed) {
-		const collapsedIconElement = /* @__PURE__ */ jsx("span", {
-			"data-slot": "nav-icon",
-			className: "flex shrink-0 items-center justify-center p-0.5 [&>svg]:size-4",
-			children: icon
-		});
-		const triggerElement = href ? /* @__PURE__ */ jsx("a", {
-			href,
-			className: cn(itemClassName),
-			"aria-label": accessibleLabel,
-			...ariaProps,
-			"data-slot": "app-sidebar-nav-item",
-			children: collapsedIconElement
-		}) : /* @__PURE__ */ jsx("button", {
-			type: "button",
-			onClick: hasChildren ? () => setIsOpen(!isOpen) : onClick,
-			className: cn(itemClassName, "cursor-pointer"),
-			"aria-label": accessibleLabel,
-			...ariaProps,
-			"data-slot": "app-sidebar-nav-item",
-			children: collapsedIconElement
-		});
-		if (!hasChildren) {
-			if (!label) return triggerElement;
-			return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: triggerElement }), /* @__PURE__ */ jsx(TooltipPopup, {
-				side: floatingSide,
-				sideOffset: 8,
-				children: label
-			})] });
-		}
-		return /* @__PURE__ */ jsxs(PopoverRoot, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
-			className: cn(itemClassName, "cursor-pointer"),
-			"aria-label": accessibleLabel,
-			"data-slot": "app-sidebar-nav-item",
-			children: collapsedIconElement
-		}), /* @__PURE__ */ jsx(PopoverPopup, {
-			side: floatingSide,
-			align: "start",
-			sideOffset: 0,
-			alignOffset: 0,
-			anchor: flyoutAnchor,
-			collisionAvoidance: {
-				side: "none",
-				align: "none",
-				fallbackAxisSide: "none"
-			},
-			positionMethod: "fixed",
-			"aria-label": `${label} sub-navigation`,
-			style: { "--app-sidebar-flyout-panel-bg": flyoutPanelBackground },
-			className: cn("flex h-[var(--anchor-height)] w-[276px] border-0 bg-transparent p-0 ring-0 shadow-none", "overflow-clip", flyoutFrameEdgeClassName),
-			children: /* @__PURE__ */ jsxs("div", {
-				className: cn("flex h-full w-64 flex-col gap-0.5 overflow-y-auto p-3 shadow-[var(--shadow-hover-card)]", "supports-backdrop-filter:backdrop-blur-[60px] [background-image:var(--app-sidebar-flyout-panel-bg)] delight-tooltip-stagger", flyoutPanelEdgeClassName),
-				"data-slot": "app-sidebar-nav-flyout-panel",
-				role: "group",
-				"aria-label": label,
-				children: [/* @__PURE__ */ jsx("p", {
-					className: "px-2 pb-2 pt-1 text-xs font-semibold text-primary opacity-70",
-					"aria-hidden": "true",
-					children: label
-				}), children]
-			})
-		})] });
-	}
-	const handleClick = () => {
-		if (hasChildren) setIsOpen(!isOpen);
-		onClick?.();
-	};
-	const mainElement = href && !hasChildren ? /* @__PURE__ */ jsxs("a", {
-		href,
-		className: itemClassName,
-		"aria-label": accessibleLabel,
-		...ariaProps,
-		"data-slot": "app-sidebar-nav-item",
-		children: [
-			iconElement,
-			labelElement,
-			badgeElement,
-			chevronElement
-		]
-	}) : /* @__PURE__ */ jsxs("button", {
-		type: "button",
-		onClick: handleClick,
-		className: cn(itemClassName, "cursor-pointer"),
-		"aria-label": accessibleLabel,
-		"aria-expanded": hasChildren ? isOpen : void 0,
-		"aria-controls": hasChildren ? subNavId : void 0,
-		...ariaProps,
-		"data-slot": "app-sidebar-nav-item",
-		children: [
-			iconElement,
-			labelElement,
-			badgeElement,
-			chevronElement
-		]
-	});
-	if (!hasChildren) return mainElement;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [mainElement, isOpen && /* @__PURE__ */ jsx("ul", {
-		id: subNavId,
-		role: "group",
-		"aria-label": `${label} sub-navigation`,
-		className: "flex flex-col items-start py-1 pl-6",
+AppShellCardTitle.displayName = "AppShellCard.Title";
+assignAppShellCardType(AppShellCardTitle, TITLE_TYPE);
+function AppShellCardSubtitle({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "app-shell-card-subtitle",
+		className: cn("text-sm leading-5 text-secondary-foreground", className),
+		...props,
 		children
-	})] });
-}
-AppSidebarNavItem.displayName = "AppSidebar.NavItem";
-function AppSidebarNavSub({ label, badge, isActive = false, href, onClick, className }) {
-	const accessibleLabel = formatAccessibleLabel(label, badge);
-	const itemClassName = cn(navItemVariants({ state: isActive ? "active" : "default" }), "min-h-11 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", "transition-[color,background-color,transform] ltr:hover:translate-x-0.5 rtl:hover:-translate-x-0.5 motion-reduce:ltr:hover:translate-x-0 motion-reduce:rtl:hover:translate-x-0", className);
-	const ariaProps = isActive ? { "aria-current": "page" } : {};
-	const content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
-		className: "flex-1 text-start",
-		children: label
-	}), badge != null && /* @__PURE__ */ jsx(Badge, {
-		size: "sm",
-		variant: "soft",
-		color: isActive ? "secondary" : "primary",
-		"aria-hidden": "true",
-		children: badge
-	})] });
-	if (href) return /* @__PURE__ */ jsx("a", {
-		href,
-		className: itemClassName,
-		"aria-label": accessibleLabel,
-		...ariaProps,
-		"data-slot": "app-sidebar-nav-sub",
-		children: content
-	});
-	return /* @__PURE__ */ jsx("button", {
-		type: "button",
-		onClick,
-		className: cn(itemClassName, "cursor-pointer delight-selection-press"),
-		"aria-label": accessibleLabel,
-		...ariaProps,
-		"data-slot": "app-sidebar-nav-sub",
-		children: content
-	});
-}
-AppSidebarNavSub.displayName = "AppSidebar.NavSub";
-function AppSidebarNavSkeleton({ count = 3, className }) {
-	const skeletonCount = getSkeletonCount(count, 3);
-	return /* @__PURE__ */ jsx(SidebarGroup, {
-		className: cn("shrink-0 p-0 group-data-[collapsible=icon]:w-auto", className),
-		children: /* @__PURE__ */ jsx(SidebarGroupContent, { children: /* @__PURE__ */ jsx(SidebarMenu, {
-			className: "gap-0.5 group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:gap-2",
-			children: Array.from({ length: skeletonCount }).map((_, i) => /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(SidebarNavSkeleton, {}) }, `nav-skeleton-${i}`))
-		}) })
-	});
-}
-AppSidebarNavSkeleton.displayName = "AppSidebar.NavSkeleton";
-markAppSidebarImplicitSlot(AppSidebarNavSkeleton, "content");
-function AppSidebarChatList({ label = "Recent Chats", children, className }) {
-	const { state } = useSidebar();
-	if (state === "collapsed") return null;
-	return /* @__PURE__ */ jsxs(SidebarGroup, {
-		"data-slot": "app-sidebar-chat-list",
-		className: cn("mt-4 flex min-h-0 flex-1 flex-col p-0", className),
-		children: [/* @__PURE__ */ jsx(SidebarGroupLabel, {
-			className: "shrink-0 px-3 py-1 text-xs font-bold text-muted-foreground",
-			children: label
-		}), /* @__PURE__ */ jsx(SidebarGroupContent, {
-			className: "flex-1 overflow-hidden",
-			children: /* @__PURE__ */ jsx("div", {
-				className: "flex h-full flex-col overflow-y-auto pb-5 rounded-md focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
-				tabIndex: 0,
-				role: "list",
-				"aria-label": label,
-				children
-			})
-		})]
 	});
 }
-AppSidebarChatList.displayName = "AppSidebar.ChatList";
-markAppSidebarImplicitSlot(AppSidebarChatList, "content");
-var chatItemVariants = cva("flex w-full items-center justify-between gap-2 rounded-md px-3 py-2 min-h-11 transition-[color,background-color,transform] duration-200 ease-smooth cursor-pointer motion-reduce:transition-none ltr:hover:translate-x-0.5 rtl:hover:-translate-x-0.5 motion-reduce:ltr:hover:translate-x-0 motion-reduce:rtl:hover:translate-x-0", {
-	variants: { state: {
-		default: "hover:bg-muted",
-		hover: "bg-muted",
-		selected: "bg-primary/10"
-	} },
-	defaultVariants: { state: "default" }
-});
-function AppSidebarChatItem({ title, time, icon, isSelected = false, onClick, onContextMenu, className }) {
-	const { state } = useSidebar();
-	const { side: sidebarSide } = useAppSidebarLayout();
-	const isCollapsed = state === "collapsed";
-	const tooltipSide = sidebarSide === "right" ? "left" : "right";
-	if (isCollapsed) {
-		const collapsedButton = /* @__PURE__ */ jsx("button", {
-			type: "button",
-			onClick,
-			onContextMenu,
-			"data-slot": "app-sidebar-chat-item",
-			"aria-label": title || void 0,
-			className: cn("flex size-11 items-center justify-center rounded-md transition-colors duration-200 ease-smooth motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", isSelected ? "bg-primary/10" : "hover:bg-muted", className),
-			children: icon || /* @__PURE__ */ jsx(MessageCircle, { className: "size-5 text-secondary-foreground" })
-		});
-		if (!title && !time) return collapsedButton;
-		return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: collapsedButton }), /* @__PURE__ */ jsx(TooltipPopup, {
-			side: tooltipSide,
-			sideOffset: 8,
-			children: /* @__PURE__ */ jsxs("div", {
-				className: "flex flex-col",
-				children: [/* @__PURE__ */ jsx("span", {
-					className: "font-medium",
-					children: title
-				}), time && /* @__PURE__ */ jsx("span", {
-					className: "text-xs text-muted-foreground",
-					children: time
-				})]
-			})
-		})] });
-	}
+AppShellCardSubtitle.displayName = "AppShellCard.Subtitle";
+function AppShellCardActions({ className, children, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		role: "listitem",
-		children: /* @__PURE__ */ jsxs("button", {
-			type: "button",
-			onClick,
-			onContextMenu,
-			"data-slot": "app-sidebar-chat-item",
-			"aria-label": title,
-			className: cn(chatItemVariants({ state: isSelected ? "selected" : "default" }), "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", className),
-			children: [/* @__PURE__ */ jsx("span", {
-				className: "text-base font-semibold text-secondary-foreground truncate",
-				children: title
-			}), time && /* @__PURE__ */ jsx("span", {
-				className: "text-xs font-normal text-muted-foreground shrink-0",
-				children: time
-			})]
-		})
-	});
-}
-AppSidebarChatItem.displayName = "AppSidebar.ChatItem";
-function AppSidebarChatListSkeleton({ count = 5, label = "Recent Chats", className }) {
-	const skeletonCount = getSkeletonCount(count, 5);
-	return /* @__PURE__ */ jsxs(SidebarGroup, {
-		className: cn("mt-4 flex min-h-0 flex-1 flex-col p-0 group-data-[collapsible=icon]:hidden", className),
-		children: [/* @__PURE__ */ jsx(SidebarGroupLabel, {
-			className: "shrink-0 px-3 py-1 text-xs font-bold text-muted-foreground",
-			children: label
-		}), /* @__PURE__ */ jsx(SidebarGroupContent, {
-			className: "flex-1 overflow-hidden",
-			children: /* @__PURE__ */ jsx("div", {
-				className: "flex h-full flex-col overflow-y-auto pb-5",
-				children: Array.from({ length: skeletonCount }).map((_, i) => /* @__PURE__ */ jsx(SidebarMenuSkeleton, {}, `chat-skeleton-${i}`))
-			})
-		})]
-	});
-}
-AppSidebarChatListSkeleton.displayName = "AppSidebar.ChatListSkeleton";
-markAppSidebarImplicitSlot(AppSidebarChatListSkeleton, "content");
-function AppSidebarAccount({ name, subtitle, avatarSrc, isOnline = false, onExpand, className }) {
-	const { state } = useSidebar();
-	const { side: sidebarSide } = useAppSidebarLayout();
-	const isCollapsed = state === "collapsed";
-	const tooltipSide = sidebarSide === "right" ? "left" : "right";
-	if (isCollapsed) {
-		const avatarButton = /* @__PURE__ */ jsx("button", {
-			type: "button",
-			onClick: onExpand,
-			"data-slot": "app-sidebar-account",
-			"aria-label": name ? `${name} account menu` : "Account menu",
-			"aria-haspopup": "true",
-			className: cn("flex items-center justify-center rounded-lg transition-opacity duration-200 ease-smooth hover:opacity-80 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring motion-reduce:transition-none", className),
-			children: /* @__PURE__ */ jsx(Avatar, {
-				src: avatarSrc,
-				alt: name,
-				fallback: name,
-				size: "sm",
-				indicator: isOnline ? "online" : void 0
-			})
-		});
-		if (!name && !subtitle) return avatarButton;
-		return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: avatarButton }), /* @__PURE__ */ jsx(TooltipPopup, {
-			side: tooltipSide,
-			sideOffset: 8,
-			children: /* @__PURE__ */ jsxs("div", {
-				className: "flex flex-col",
-				children: [name && /* @__PURE__ */ jsx("span", {
-					className: "font-medium",
-					children: name
-				}), subtitle && /* @__PURE__ */ jsx("span", {
-					className: "text-xs text-muted-foreground",
-					children: subtitle
-				})]
-			})
-		})] });
-	}
-	return /* @__PURE__ */ jsxs("button", {
-		type: "button",
-		onClick: onExpand,
-		"data-slot": "app-sidebar-account",
-		"aria-label": name ? `${name} account menu` : "Account menu",
-		"aria-haspopup": "true",
-		className: cn("flex w-full items-center gap-2 rounded-md p-2 transition-colors duration-200 ease-smooth hover:bg-background focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring motion-reduce:transition-none", className),
-		children: [
-			/* @__PURE__ */ jsx(Avatar, {
-				src: avatarSrc,
-				alt: name,
-				fallback: name,
-				size: "sm",
-				indicator: isOnline ? "online" : void 0
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "flex flex-1 flex-col items-start overflow-hidden",
-				children: [/* @__PURE__ */ jsx("span", {
-					className: "w-full truncate text-start text-sm font-medium text-sidebar-foreground",
-					children: name
-				}), subtitle && /* @__PURE__ */ jsx("span", {
-					className: "w-full truncate text-start text-xs font-light text-sidebar-foreground",
-					children: subtitle
-				})]
-			}),
-			/* @__PURE__ */ jsx(ChevronRight, {
-				"aria-hidden": "true",
-				className: "size-4 shrink-0 text-muted-foreground rtl:rotate-180"
-			})
-		]
-	});
-}
-AppSidebarAccount.displayName = "AppSidebar.Account";
-markAppSidebarImplicitSlot(AppSidebarAccount, "footer");
-function AppSidebarAccountSkeleton({ className }) {
-	return /* @__PURE__ */ jsx(SidebarAccountSkeleton, { className });
-}
-AppSidebarAccountSkeleton.displayName = "AppSidebar.AccountSkeleton";
-markAppSidebarImplicitSlot(AppSidebarAccountSkeleton, "footer");
-function AppSidebarSkeleton({ navCount = 4, chatCount = 5, logo, compactedLogo, collapsible = "icon", side, rounded = false, sidebarBgColor, className }) {
-	const { state, containerRef } = useSidebar();
-	const isCollapsed = state === "collapsed";
-	return /* @__PURE__ */ jsxs(SidebarCompound, {
-		collapsible,
-		side: useResolvedAppSidebarSide({
-			containerRef,
-			explicitSide: side
-		}),
-		rounded,
-		className: cn(getSidebarBgClass(isCollapsed, sidebarBgColor), className),
-		children: [
-			/* @__PURE__ */ jsx(SidebarHeader, {
-				className: "gap-4 pb-0 pt-6 group-data-[collapsible=icon]:px-4",
-				children: /* @__PURE__ */ jsx(AppSidebarLogo, {
-					logo,
-					compactedLogo
-				})
-			}),
-			/* @__PURE__ */ jsxs(SidebarContent, {
-				className: "flex flex-col gap-0 overflow-hidden px-3 py-4 group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:px-4",
-				children: [/* @__PURE__ */ jsx(AppSidebarNavSkeleton, { count: navCount }), /* @__PURE__ */ jsx(AppSidebarChatListSkeleton, { count: chatCount })]
-			}),
-			/* @__PURE__ */ jsx(SidebarFooter, {
-				className: "gap-4 px-4 pb-6 pt-0 group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:px-4",
-				children: /* @__PURE__ */ jsx(AppSidebarAccountSkeleton, {})
-			})
-		]
-	});
-}
-AppSidebarSkeleton.displayName = "AppSidebar.Skeleton";
-/**
-* AppSidebar is a full-featured application sidebar with navigation, chat list, and account sections.
-* Supports collapsible modes with a unified logo toggle and loading skeletons.
-*
-* @llms Full-featured app sidebar with nav, chat list, account, collapsible modes
-* @example
-* ```tsx
-* <AppSidebar logo={<Logo />} collapsible="icon">
-*   <AppSidebar.Nav>
-*     <AppSidebar.NavItem icon={<Home />} label="Home" isActive />
-*   </AppSidebar.Nav>
-*   <AppSidebar.ChatList>
-*     <AppSidebar.ChatItem title="Chat 1" />
-*   </AppSidebar.ChatList>
-*   <AppSidebar.Account name="User" subtitle="user@example.com" />
-* </AppSidebar>
-* ```
-*/
-function AppSidebarRoot({ logo, compactedLogo, logoSubtext, collapsible = "icon", side, rounded = false, sidebarBgColor, className, children, dir, ...props }) {
-	const { state, containerRef } = useSidebar();
-	const isCollapsed = state === "collapsed";
-	const resolvedSide = useResolvedAppSidebarSide({
-		containerRef,
-		explicitDir: dir,
-		explicitSide: side
-	});
-	const bgClass = getSidebarBgClass(isCollapsed, sidebarBgColor);
-	const slots = useSlotChildren(children);
-	return /* @__PURE__ */ jsx(AppSidebarLayoutContext.Provider, {
-		value: { side: resolvedSide },
-		children: /* @__PURE__ */ jsxs(SidebarCompound, {
-			collapsible,
-			side: resolvedSide,
-			rounded,
-			dir,
-			className: cn(bgClass, className),
-			...props,
-			children: [
-				/* @__PURE__ */ jsx(SidebarHeader, {
-					className: "gap-4 pb-0 pt-6 group-data-[collapsible=icon]:px-4",
-					children: /* @__PURE__ */ jsx(AppSidebarLogo, {
-						logo,
-						compactedLogo,
-						subtext: logoSubtext
-					})
-				}),
-				/* @__PURE__ */ jsx(SidebarContent, {
-					className: "flex flex-col gap-0 overflow-hidden px-3 py-4 group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:px-4",
-					children: slots.explicitContent ? slots.explicitContent.props.children : slots.content
-				}),
-				/* @__PURE__ */ jsx(SidebarFooter, {
-					className: "gap-4 px-4 pb-6 pt-0 group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:px-4",
-					children: slots.explicitFooter ? slots.explicitFooter.props.children : slots.footer
-				})
-			]
-		})
+		"data-slot": "app-shell-card-actions",
+		className: cn("flex shrink-0 items-center gap-2", className),
+		...props,
+		children
 	});
 }
-AppSidebarRoot.displayName = "AppSidebar";
-var AppSidebar = Object.assign(AppSidebarRoot, {
-	Header: AppSidebarHeader,
-	Content: AppSidebarContent,
-	Footer: AppSidebarFooter,
-	Nav: AppSidebarNav,
-	NavSection: AppSidebarNavSection,
-	NavItem: AppSidebarNavItem,
-	NavSub: AppSidebarNavSub,
-	NavSkeleton: AppSidebarNavSkeleton,
-	ChatList: AppSidebarChatList,
-	ChatItem: AppSidebarChatItem,
-	ChatListSkeleton: AppSidebarChatListSkeleton,
-	Account: AppSidebarAccount,
-	AccountSkeleton: AppSidebarAccountSkeleton,
-	Skeleton: AppSidebarSkeleton
+AppShellCardActions.displayName = "AppShellCard.Actions";
+assignAppShellCardType(AppShellCardActions, ACTIONS_TYPE);
+function AppShellCardMenu({ children }) {
+	return children;
+}
+AppShellCardMenu.displayName = "AppShellCard.Menu";
+assignAppShellCardType(AppShellCardMenu, MENU_TYPE);
+var AppShellCard = Object.assign(AppShellCardRoot, {
+	Toolbar: AppShellCardToolbar,
+	Header: AppShellCardHeader,
+	Title: AppShellCardTitle,
+	Subtitle: AppShellCardSubtitle,
+	Actions: AppShellCardActions,
+	Menu: AppShellCardMenu
 });
 //#endregion
-export { AppSidebar, MOBILE_BREAKPOINT, SidebarCompound as Sidebar, SidebarAccountSkeleton, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarNavSkeleton, SidebarProvider, SidebarTrigger, chatItemVariants, navItemVariants, useIsMobile, useSidebar };
+export { AppShellCard, AppShellCardActions, AppShellCardHeader, AppShellCardMenu, AppShellCardRoot, AppShellCardSubtitle, AppShellCardTitle, AppShellCardToolbar };
 
 //# sourceMappingURL=index224.js.map