@humain/ui 2.1.63 → 2.1.65

package/dist/index223.js

@@ -1,229 +1,479 @@
 "use client";
 import { cn } from "./index2.js";
-import { Button } from "./index5.js";
-import { DropdownMenu } from "./index191.js";
-import { usePanelExpansion } from "./index217.js";
-import { AppShellContent } from "./index218.js";
-import { EllipsisVertical, Maximize2, Minimize2 } from "lucide-react";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "./index49.js";
+import { AppShell as AppShell$1 } from "./index214.js";
+import { Sheet as SheetNamespace, SheetContent } from "./index215.js";
+import { useIsMobile } from "./index216.js";
+import { SidebarContext } from "./index217.js";
+import { AppShellProvider, PanelIndexContext, PanelLayoutContext } from "./index218.js";
+import { AppShellContent } from "./index219.js";
+import { AppShellMobileTabBar } from "./index220.js";
+import { AppShellPanel } from "./index221.js";
+import { getExpandedPanelFromLayout, layoutMapToTuple, normalizePanelSizes, toResizableMinSize, toResizablePercentageSize } from "./index222.js";
 import * as React from "react";
 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;
+//#region src/components/templates/AppShell/AppShell.tsx
+var DEFAULT_APP_SHELL_BACKGROUND = "var(--app-background)";
+function isAppShellPanelComponent(type) {
+	return typeof type === "function" && type.__appShellType === "AppShell.Panel";
 }
-function assignAppShellCardType(component, type) {
-	component.__appShellCardType = type;
-	return component;
+function isAppShellPanelElement(child) {
+	return React.isValidElement(child) && isAppShellPanelComponent(child.type);
 }
-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 getAppShellPanelIdentity(panel, ariaBaseId, index) {
+	return panel.key ?? panel.props.label ?? `${ariaBaseId}-panel-${index}`;
 }
-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;
-		}
-		titleText = getTitleText(child.props.children);
+function AppShellPanelWithLayout({ panel, visible, index, overrides = {}, isMobile, activePanel, hasExpanded, hasTabBar, ariaBaseId, rootExpansionActive, firstExpandedIndex, onExpandedPanelChange }) {
+	if (isMobile && index !== activePanel) return null;
+	const layoutInfo = {
+		visible: isMobile ? true : visible,
+		collapseMode: hasExpanded ? "animated" : "removed",
+		isMobile,
+		tabId: hasTabBar ? `${ariaBaseId}-tab-${index}` : void 0,
+		panelId: hasTabBar ? `${ariaBaseId}-tabpanel-${index}` : void 0,
+		expanded: rootExpansionActive ? hasExpanded && index === firstExpandedIndex : void 0,
+		onExpandedChange: rootExpansionActive ? (nextExpanded) => onExpandedPanelChange(nextExpanded ? index : null) : void 0,
+		...overrides
+	};
+	return /* @__PURE__ */ jsx(PanelIndexContext.Provider, {
+		value: index,
+		children: /* @__PURE__ */ jsx(PanelLayoutContext.Provider, {
+			value: layoutInfo,
+			children: panel
+		})
 	});
-	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);
+function AppShellRoot({ background = DEFAULT_APP_SHELL_BACKGROUND, height = "100dvh", padding = 16, mobilePadding, gap = 12, connected = false, skipToId, activePanel: activePanelProp, onActivePanelChange, defaultActivePanel = 0, expandedPanel: expandedPanelProp, defaultExpandedPanel, onExpandedPanelChange, resizablePanels, defaultPanelSizes, panelSizes, onPanelSizesChange, expandThreshold = 85, className, children, ...props }) {
+	const isMobile = useIsMobile();
+	const ariaBaseId = React.useId();
+	const [internalActivePanel, setInternalActivePanel] = React.useState(defaultActivePanel);
+	const [internalExpandedPanel, setInternalExpandedPanel] = React.useState(defaultExpandedPanel ?? null);
+	const [internalPanelSizes, setInternalPanelSizes] = React.useState(() => normalizePanelSizes(defaultPanelSizes));
+	const [isResizingPanels, setIsResizingPanels] = React.useState(false);
+	const [isRestoringResizablePanels, setIsRestoringResizablePanels] = React.useState(false);
+	const [internalMobileSidebarOpen, setInternalMobileSidebarOpen] = React.useState(false);
+	const resizableGroupRef = React.useRef(null);
+	const rootRef = React.useRef(null);
+	const allowResizeReleaseExpansionRef = React.useRef(false);
+	const suppressControlledLayoutChangeRef = React.useRef(false);
+	const previousResizableExpandedRef = React.useRef(false);
+	const activePanel = activePanelProp ?? internalActivePanel;
+	const handleActivePanelChange = React.useCallback((index) => {
+		if (activePanelProp === void 0) setInternalActivePanel((prev) => prev === index ? prev : index);
+		onActivePanelChange?.(index);
+	}, [activePanelProp, onActivePanelChange]);
+	const rootExpansionRequested = expandedPanelProp !== void 0 || defaultExpandedPanel !== void 0 || onExpandedPanelChange !== void 0;
+	const resolvedExpandedPanel = expandedPanelProp !== void 0 ? expandedPanelProp : internalExpandedPanel;
+	const handleExpandedPanelChange = React.useCallback((panelIndex) => {
+		if (expandedPanelProp === void 0) setInternalExpandedPanel(panelIndex);
+		onExpandedPanelChange?.(panelIndex);
+	}, [expandedPanelProp, onExpandedPanelChange]);
+	const { panels, panelInfos, sidebarChild, otherChildren } = React.useMemo(() => {
+		const p = [];
+		const infos = [];
+		let sidebar = null;
+		const other = [];
+		React.Children.forEach(children, (child) => {
+			if (isAppShellPanelElement(child)) {
+				infos.push({
+					key: child.key ?? child.props.label,
+					label: child.props.label
+				});
+				p.push(child);
+				return;
+			}
+			if (!React.isValidElement(child)) return;
+			if (child.type === AppShellSidebar) sidebar = child;
+			else other.push(child);
+		});
+		return {
+			panels: p,
+			panelInfos: infos,
+			sidebarChild: sidebar,
+			otherChildren: other
+		};
+	}, [children]);
+	const shouldUseResizablePanels = resizablePanels ?? true;
+	const firstPanelExpandedIndex = panels.findIndex((p) => p.props.expanded);
+	const hasPanelExpansionProps = panels.some((panel) => panel.props.expanded !== void 0 || panel.props.onExpandedChange !== void 0);
+	const canUseResizablePanelPair = shouldUseResizablePanels && !connected && !isMobile && panels.length === 2 && (resizablePanels !== void 0 || !hasPanelExpansionProps);
+	const rootExpansionActive = rootExpansionRequested || canUseResizablePanelPair;
+	const validRootExpandedPanel = typeof resolvedExpandedPanel === "number" && Number.isInteger(resolvedExpandedPanel) && resolvedExpandedPanel >= 0 && resolvedExpandedPanel < panels.length ? resolvedExpandedPanel : null;
+	let firstExpandedIndex = firstPanelExpandedIndex;
+	if (rootExpansionActive) firstExpandedIndex = validRootExpandedPanel;
+	const hasExpanded = firstExpandedIndex !== -1 && firstExpandedIndex !== null;
+	const visibleCount = hasExpanded ? 1 : Math.min(panels.length, 2);
+	const canRenderResizablePanels = canUseResizablePanelPair;
+	const resolvedPanelSizes = React.useMemo(() => normalizePanelSizes(panelSizes ?? internalPanelSizes), [panelSizes, internalPanelSizes]);
+	const resizablePanelSizes = React.useMemo(() => {
+		if (hasExpanded && firstExpandedIndex === 0) return [100, 0];
+		if (hasExpanded && firstExpandedIndex === 1) return [0, 100];
+		return resolvedPanelSizes;
+	}, [
+		firstExpandedIndex,
+		hasExpanded,
+		resolvedPanelSizes
+	]);
+	const shouldBypassResizableMinSize = hasExpanded || isRestoringResizablePanels || !hasExpanded && previousResizableExpandedRef.current;
+	if (process.env.NODE_ENV !== "production") {
+		const expandedPanelPropCount = panels.filter((p) => p.props.expanded).length;
+		if (rootExpansionActive && expandedPanelPropCount > 0) console.warn("AppShell.Root: root-owned expansion props should not be mixed with AppShell.Panel expanded. Root expansion will be used.");
+		if (!rootExpansionActive && expandedPanelPropCount > 1) console.warn("AppShell.Root: multiple panels have expanded={true}. Only the first expanded panel will be shown.");
+		if (rootExpansionActive && resolvedExpandedPanel !== null && resolvedExpandedPanel !== void 0 && validRootExpandedPanel === null) console.warn(`AppShell.Root: expandedPanel index ${resolvedExpandedPanel} is out of range. No panel will be expanded.`);
+		if (resizablePanels === true && connected) console.warn("AppShell.Root: resizablePanels is not supported with connected. Rendering non-resizable panels.");
+		if (resizablePanels === true && !connected && panels.length !== 2) console.warn(`AppShell.Root: resizablePanels requires exactly 2 Panel children, got ${panels.length}. Rendering non-resizable panels.`);
+		if (panels.length > 2 && !hasExpanded) console.warn(`AppShell.Root: max 2 Panel children allowed, got ${panels.length}. Only the first 2 will be visible.`);
+	}
+	const handleLayoutChange = React.useCallback((layout) => {
+		if (hasExpanded || suppressControlledLayoutChangeRef.current) return;
+		if (panelSizes === void 0) setInternalPanelSizes(layoutMapToTuple(layout));
+	}, [hasExpanded, panelSizes]);
+	const handleLayoutChanged = React.useCallback((layout) => {
+		if (hasExpanded || !allowResizeReleaseExpansionRef.current || suppressControlledLayoutChangeRef.current) return;
+		const nextSizes = layoutMapToTuple(layout);
+		if (panelSizes === void 0) setInternalPanelSizes(nextSizes);
+		onPanelSizesChange?.(nextSizes);
+		const expandedIndex = getExpandedPanelFromLayout(layout, expandThreshold);
+		if (expandedIndex !== null) handleExpandedPanelChange(expandedIndex);
+	}, [
+		expandThreshold,
+		handleExpandedPanelChange,
+		hasExpanded,
+		onPanelSizesChange,
+		panelSizes
+	]);
 	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);
+		if (!canRenderResizablePanels) {
+			suppressControlledLayoutChangeRef.current = false;
+			previousResizableExpandedRef.current = false;
+			return;
+		}
+		const ownerWindow = rootRef.current?.ownerDocument.defaultView;
+		if (!ownerWindow) return;
+		const wasExpanded = previousResizableExpandedRef.current;
+		previousResizableExpandedRef.current = hasExpanded;
+		if (!(hasExpanded || wasExpanded || panelSizes !== void 0)) {
+			suppressControlledLayoutChangeRef.current = false;
+			return;
+		}
+		let restoreFrame;
+		const [first, second] = resizablePanelSizes;
+		if (wasExpanded && !hasExpanded) restoreFrame = ownerWindow.requestAnimationFrame(() => {
+			setIsRestoringResizablePanels(true);
+		});
+		suppressControlledLayoutChangeRef.current = true;
+		const nextLayout = {
+			panel0: first,
+			panel1: second
 		};
-		el.addEventListener("scroll", update, { passive: true });
-		const OwnerResizeObserver = el.ownerDocument.defaultView?.ResizeObserver;
-		const observer = OwnerResizeObserver ? new OwnerResizeObserver(update) : null;
-		observer?.observe(el);
-		update();
+		resizableGroupRef.current?.setLayout(nextLayout);
+		const frame = ownerWindow.requestAnimationFrame(() => {
+			resizableGroupRef.current?.setLayout(nextLayout);
+		});
+		const timeout = ownerWindow.setTimeout(() => {
+			suppressControlledLayoutChangeRef.current = false;
+		}, 350);
 		return () => {
-			el.removeEventListener("scroll", update);
-			observer?.disconnect();
+			if (restoreFrame !== void 0) ownerWindow.cancelAnimationFrame(restoreFrame);
+			ownerWindow.cancelAnimationFrame(frame);
+			ownerWindow.clearTimeout(timeout);
+			suppressControlledLayoutChangeRef.current = false;
 		};
-	}, []);
-	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;
+	}, [
+		canRenderResizablePanels,
+		hasExpanded,
+		panelSizes,
+		resizablePanelSizes
+	]);
+	React.useEffect(() => {
+		if (!isRestoringResizablePanels) return;
+		const ownerWindow = rootRef.current?.ownerDocument.defaultView;
+		if (!ownerWindow) return;
+		const timeout = ownerWindow.setTimeout(() => {
+			setIsRestoringResizablePanels(false);
+		}, 350);
+		return () => ownerWindow.clearTimeout(timeout);
+	}, [isRestoringResizablePanels]);
+	React.useEffect(() => {
+		if (!canRenderResizablePanels) {
+			allowResizeReleaseExpansionRef.current = false;
+			suppressControlledLayoutChangeRef.current = false;
+			return;
 		}
-		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,
-		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))
+		const ownerWindow = rootRef.current?.ownerDocument.defaultView;
+		if (!ownerWindow) return;
+		const frame = ownerWindow.requestAnimationFrame(() => {
+			allowResizeReleaseExpansionRef.current = true;
+		});
+		return () => {
+			ownerWindow.cancelAnimationFrame(frame);
+			allowResizeReleaseExpansionRef.current = false;
+		};
+	}, [canRenderResizablePanels]);
+	React.useEffect(() => {
+		if (!isResizingPanels) return;
+		const ownerWindow = rootRef.current?.ownerDocument.defaultView;
+		if (!ownerWindow) return;
+		const stopResizing = () => setIsResizingPanels(false);
+		ownerWindow.addEventListener("pointerup", stopResizing);
+		ownerWindow.addEventListener("pointercancel", stopResizing);
+		return () => {
+			ownerWindow.removeEventListener("pointerup", stopResizing);
+			ownerWindow.removeEventListener("pointercancel", stopResizing);
+		};
+	}, [isResizingPanels]);
+	const handleResizablePointerDownCapture = React.useCallback((event) => {
+		const target = event.target;
+		if (!(target instanceof Element)) return;
+		if (target.closest("[data-slot=\"resizable-handle\"]")) setIsResizingPanels(true);
+	}, []);
+	const visiblePanels = React.useMemo(() => hasExpanded ? panels.map((panel, i) => ({
+		panel,
+		visible: i === firstExpandedIndex,
+		index: i
+	})) : panels.map((panel, i) => ({
+		panel,
+		visible: i < 2,
+		index: i
+	})), [
+		panels,
+		hasExpanded,
+		firstExpandedIndex
+	]);
+	const hasTabBar = isMobile && panels.length > 1;
+	const getPanelPosition = React.useCallback((index) => {
+		if (visibleCount === 1) return "only";
+		if (hasExpanded) return index === firstExpandedIndex ? "only" : "last";
+		return index === 0 ? "first" : "last";
+	}, [
+		visibleCount,
+		hasExpanded,
+		firstExpandedIndex
+	]);
+	const contextValue = React.useMemo(() => ({
+		connected,
+		panelCount: visibleCount,
+		getPanelPosition
+	}), [
+		connected,
+		visibleCount,
+		getPanelPosition
+	]);
+	const sidebarContext = React.useContext(SidebarContext);
+	const mobileSidebarOpen = sidebarContext?.openMobile ?? internalMobileSidebarOpen;
+	const setMobileSidebarOpen = sidebarContext?.setOpenMobile ?? setInternalMobileSidebarOpen;
+	const handleSidebarOpen = React.useCallback(() => {
+		setMobileSidebarOpen(true);
+	}, [setMobileSidebarOpen]);
+	const handleSheetOpenChange = React.useCallback((open) => {
+		setMobileSidebarOpen(open);
+	}, [setMobileSidebarOpen]);
+	const skipLink = skipToId ? /* @__PURE__ */ jsx("a", {
+		href: `#${skipToId}`,
+		className: "sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-50 focus:rounded-md focus:bg-background focus:px-4 focus:py-2 focus:text-sm focus:font-medium focus:text-foreground focus:shadow-sm focus:ring-2 focus:ring-ring",
+		children: "Skip to content"
+	}) : null;
+	const renderedPanels = React.useMemo(() => visiblePanels.map(({ panel, visible, index }) => /* @__PURE__ */ jsx(AppShellPanelWithLayout, {
+		panel,
+		visible,
+		index,
+		isMobile,
+		activePanel,
+		hasExpanded,
+		hasTabBar,
+		ariaBaseId,
+		rootExpansionActive,
+		firstExpandedIndex,
+		onExpandedPanelChange: handleExpandedPanelChange
+	}, getAppShellPanelIdentity(panel, ariaBaseId, index))), [
+		visiblePanels,
+		ariaBaseId,
+		isMobile,
+		activePanel,
+		hasExpanded,
+		hasTabBar,
+		rootExpansionActive,
+		firstExpandedIndex,
+		handleExpandedPanelChange
+	]);
+	const renderedResizablePanels = canRenderResizablePanels ? /* @__PURE__ */ jsxs(ResizablePanelGroup, {
+		orientation: "horizontal",
+		disabled: hasExpanded,
+		groupRef: resizableGroupRef,
+		onLayoutChange: handleLayoutChange,
+		onLayoutChanged: handleLayoutChanged,
+		onPointerDownCapture: handleResizablePointerDownCapture,
+		className: cn("min-h-0 min-w-0 flex-1", !isResizingPanels && "[&>[data-slot=resizable-panel]]:transition-[flex-grow] [&>[data-slot=resizable-panel]]:duration-300 [&>[data-slot=resizable-panel]]:ease-[cubic-bezier(0.16,1,0.3,1)] motion-reduce:[&>[data-slot=resizable-panel]]:transition-none"),
+		children: [
+			/* @__PURE__ */ jsx(ResizablePanel, {
+				id: "panel0",
+				defaultSize: toResizablePercentageSize(resizablePanelSizes[0]),
+				minSize: shouldBypassResizableMinSize ? 0 : toResizableMinSize(panels[0].props.minWidth),
+				children: /* @__PURE__ */ jsx(AppShellPanelWithLayout, {
+					panel: panels[0],
+					visible: !hasExpanded || firstExpandedIndex === 0,
+					index: 0,
+					overrides: { sizeManagedByRoot: true },
+					isMobile,
+					activePanel,
+					hasExpanded,
+					hasTabBar,
+					ariaBaseId,
+					rootExpansionActive,
+					firstExpandedIndex,
+					onExpandedPanelChange: handleExpandedPanelChange
 				})
+			}),
+			/* @__PURE__ */ jsx(ResizableHandle, {
+				disabled: hasExpanded,
+				className: cn("z-10 min-w-2 shrink-0 cursor-col-resize w-[var(--app-shell-gap,0px)] bg-transparent after:w-2 hover:bg-transparent", "transition-[width,min-width,opacity,background-color] duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] motion-reduce:transition-none", hasExpanded && "min-w-0 w-0 opacity-0 after:w-0 pointer-events-none")
+			}),
+			/* @__PURE__ */ jsx(ResizablePanel, {
+				id: "panel1",
+				defaultSize: toResizablePercentageSize(resizablePanelSizes[1]),
+				minSize: shouldBypassResizableMinSize ? 0 : toResizableMinSize(panels[1].props.minWidth),
+				children: /* @__PURE__ */ jsx(AppShellPanelWithLayout, {
+					panel: panels[1],
+					visible: !hasExpanded || firstExpandedIndex === 1,
+					index: 1,
+					overrides: { sizeManagedByRoot: true },
+					isMobile,
+					activePanel,
+					hasExpanded,
+					hasTabBar,
+					ariaBaseId,
+					rootExpansionActive,
+					firstExpandedIndex,
+					onExpandedPanelChange: handleExpandedPanelChange
+				})
+			})
+		]
+	}) : null;
+	const activeLabel = hasTabBar && panelInfos[activePanel] ? panelInfos[activePanel].label || `Panel ${activePanel + 1}` : null;
+	if (isMobile) return /* @__PURE__ */ jsx(AppShellProvider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsxs(AppShell$1, {
+			ref: rootRef,
+			background,
+			height,
+			padding,
+			mobilePadding,
+			gap: 0,
+			connected,
+			className,
+			...props,
+			children: [
+				skipLink,
+				sidebarChild && /* @__PURE__ */ jsx(SheetNamespace, {
+					open: mobileSidebarOpen,
+					onOpenChange: handleSheetOpenChange,
+					children: /* @__PURE__ */ jsx(SheetContent, {
+						side: "left",
+						showCloseButton: false,
+						className: "w-[280px] p-0",
+						"aria-label": "Sidebar navigation",
+						children: sidebarChild
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex h-full min-w-0 flex-1 flex-col overflow-clip",
+					children: [/* @__PURE__ */ jsx(AppShellMobileTabBar, {
+						panels: panelInfos,
+						activeIndex: activePanel,
+						onActiveChange: handleActivePanelChange,
+						onSidebarOpen: sidebarChild ? handleSidebarOpen : void 0,
+						baseId: ariaBaseId
+					}), /* @__PURE__ */ jsx("div", {
+						className: "flex min-h-0 flex-1",
+						children: renderedPanels
+					})]
+				}),
+				activeLabel && /* @__PURE__ */ jsxs("div", {
+					className: "sr-only",
+					role: "status",
+					"aria-live": "polite",
+					children: [activeLabel, " panel active"]
+				}),
+				otherChildren
 			]
-		}), /* @__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
-		})]
+		})
 	});
-});
-AppShellCardRoot.displayName = "AppShellCard";
-function AppShellCardToolbar({ className, children, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "app-shell-card-toolbar",
-		role: "toolbar",
-		"aria-label": "Card actions",
-		className: cn(appShellCardToolbarClassName, className),
-		...props,
-		children
+	return /* @__PURE__ */ jsx(AppShellProvider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsxs(AppShell$1, {
+			ref: rootRef,
+			background,
+			height,
+			padding,
+			mobilePadding,
+			gap: connected || hasExpanded ? 0 : gap,
+			connected,
+			className,
+			...props,
+			children: [
+				skipLink,
+				sidebarChild,
+				renderedResizablePanels ?? renderedPanels,
+				otherChildren
+			]
+		})
 	});
 }
-AppShellCardToolbar.displayName = "AppShellCard.Toolbar";
-assignAppShellCardType(AppShellCardToolbar, TOOLBAR_TYPE);
-function AppShellCardHeader({ className, children, ...props }) {
+AppShellRoot.displayName = "AppShell";
+/**
+* Layout slot for the sidebar region. Renders a div — the actual aside
+* landmark is provided by AppSidebar/Sidebar primitive inside it.
+*
+* **Auto-detection (default):** When no `width` prop is provided, the sidebar
+* observes the child SidebarProvider's `data-state` attribute via CSS `:has()`
+* and transitions between `collapsedWidth` and `expandedWidth` automatically.
+*
+* **Manual mode:** Pass an explicit `width` to control sizing yourself.
+*/
+function AppShellSidebar({ width, expandedWidth = "280px", collapsedWidth = "64px", className, style, children, ...props }) {
+	const autoMode = !width;
 	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "app-shell-card-header",
-		className: cn("flex min-w-0 flex-1 flex-col justify-center", className),
+		"data-slot": "app-shell-sidebar",
+		style: {
+			...autoMode ? {
+				"--app-shell-sidebar-collapsed": collapsedWidth,
+				"--app-shell-sidebar-expanded": expandedWidth
+			} : { "--app-shell-sidebar-width": width },
+			...style
+		},
+		className: cn("flex h-full shrink-0 flex-col overflow-clip", "transition-[width] duration-300 ease-[cubic-bezier(0.16,1,0.3,1)]", "motion-reduce:transition-none", autoMode ? ["w-[var(--app-shell-sidebar-collapsed,64px)]", "[&:has([data-state=expanded])]:w-[var(--app-shell-sidebar-expanded,280px)]"] : "w-[var(--app-shell-sidebar-width,64px)]", className),
 		...props,
 		children
 	});
 }
-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
-	});
-}
-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
-	});
-}
-AppShellCardSubtitle.displayName = "AppShellCard.Subtitle";
-function AppShellCardActions({ className, children, ...props }) {
+AppShellSidebar.displayName = "AppShell.Sidebar";
+function AppShellHeader({ className, children, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "app-shell-card-actions",
-		className: cn("flex shrink-0 items-center gap-2", className),
+		"data-slot": "app-shell-header",
+		className: cn("shrink-0", className),
 		...props,
 		children
 	});
 }
-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
+AppShellHeader.displayName = "AppShell.Header";
+var appShellBackgrounds = {
+	transparent: "transparent",
+	appBg: DEFAULT_APP_SHELL_BACKGROUND,
+	neutral: "var(--muted)",
+	brandSubtle: "linear-gradient(135deg, var(--air-50) 0%, var(--air-100) 100%)",
+	brand: "linear-gradient(135deg, var(--air-400) 0%, var(--primary) 100%)",
+	brandDeep: "linear-gradient(135deg, var(--primary) 0%, var(--air-900) 100%)",
+	desertMidnight: "linear-gradient(135deg, var(--slate-500) 0%, var(--slate-700) 100%)",
+	aqua: "linear-gradient(135deg, var(--air-400) 0%, var(--air-600) 100%)"
+};
+var AppShell = Object.assign(AppShellRoot, {
+	Root: AppShellRoot,
+	Sidebar: AppShellSidebar,
+	Header: AppShellHeader,
+	Panel: AppShellPanel,
+	Content: AppShellContent
 });
 //#endregion
-export { AppShellCard, AppShellCardActions, AppShellCardHeader, AppShellCardMenu, AppShellCardRoot, AppShellCardSubtitle, AppShellCardTitle, AppShellCardToolbar };
+export { AppShell, AppShellContent, AppShellHeader, AppShellPanel, AppShellRoot, AppShellSidebar, appShellBackgrounds };
 
 //# sourceMappingURL=index223.js.map