"use client";
import { cn } from "./index3.js";
import { AppShell as AppShell$1 } from "./index469.js";
import { SheetContent, SheetNamespace } from "./index470.js";
import { useIsMobile } from "./index471.js";
import { SidebarContext } from "./index472.js";
import { AppShellProvider, PanelIndexContext, PanelLayoutContext } from "./index473.js";
import { AppShellContent } from "./index474.js";
import { AppShellMobileTabBar } from "./index475.js";
import { AppShellPanel } from "./index476.js";
import * as React from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/components/templates/AppShell/AppShell.tsx
function AppShellRoot({ background = "var(--app-bg)", height = "100dvh", padding = 16, mobilePadding, gap = 12, connected = false, skipToId, activePanel: activePanelProp, onActivePanelChange, defaultActivePanel = 0, className, children, ...props }) {
	const isMobile = useIsMobile();
	const ariaBaseId = React.useId();
	const [internalActivePanel, setInternalActivePanel] = React.useState(defaultActivePanel);
	const activePanel = activePanelProp ?? internalActivePanel;
	const handleActivePanelChange = React.useCallback((index) => {
		if (activePanelProp === void 0) setInternalActivePanel((prev) => prev === index ? prev : index);
		onActivePanelChange?.(index);
	}, [activePanelProp, onActivePanelChange]);
	const { panels, panelInfos, sidebarChild, otherChildren } = React.useMemo(() => {
		const p = [];
		const infos = [];
		let sidebar = null;
		const other = [];
		React.Children.forEach(children, (child) => {
			if (!React.isValidElement(child)) return;
			if (child.type?.__appShellType === "AppShell.Panel") {
				const panel = child;
				infos.push({ label: panel.props.label });
				p.push(panel);
			} else if (child.type === AppShellSidebar) sidebar = child;
			else other.push(child);
		});
		return {
			panels: p,
			panelInfos: infos,
			sidebarChild: sidebar,
			otherChildren: other
		};
	}, [children]);
	const firstExpandedIndex = panels.findIndex((p) => p.props.expanded);
	const hasExpanded = firstExpandedIndex !== -1;
	const visibleCount = hasExpanded ? 1 : Math.min(panels.length, 2);
	if (process.env.NODE_ENV !== "production") {
		if (hasExpanded && panels.filter((p) => p.props.expanded).length > 1) console.warn("AppShell.Root: multiple panels have expanded={true}. Only the first expanded panel will be shown.");
		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 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 setOpenMobile = sidebarContext?.setOpenMobile;
	const handleSidebarOpen = React.useCallback(() => {
		setOpenMobile?.(true);
	}, [setOpenMobile]);
	const handleSheetOpenChange = React.useCallback((open) => {
		setOpenMobile?.(open);
	}, [setOpenMobile]);
	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 }) => {
		if (isMobile && index !== activePanel) return null;
		const layoutInfo = {
			visible: isMobile ? true : visible,
			isMobile,
			tabId: hasTabBar ? `${ariaBaseId}-tab-${index}` : void 0,
			panelId: hasTabBar ? `${ariaBaseId}-tabpanel-${index}` : void 0
		};
		return /* @__PURE__ */ jsx(PanelIndexContext.Provider, {
			value: index,
			children: /* @__PURE__ */ jsx(PanelLayoutContext.Provider, {
				value: layoutInfo,
				children: panel
			})
		}, index);
	}), [
		visiblePanels,
		isMobile,
		activePanel,
		hasTabBar,
		ariaBaseId
	]);
	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, {
			background,
			height,
			padding,
			mobilePadding,
			gap: 0,
			connected,
			className,
			...props,
			children: [
				skipLink,
				sidebarChild && /* @__PURE__ */ jsx(SheetNamespace, {
					open: sidebarContext?.openMobile ?? false,
					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
			]
		})
	});
	return /* @__PURE__ */ jsx(AppShellProvider, {
		value: contextValue,
		children: /* @__PURE__ */ jsxs(AppShell$1, {
			background,
			height,
			padding,
			mobilePadding,
			gap: connected ? 0 : gap,
			connected,
			className,
			...props,
			children: [
				skipLink,
				sidebarChild,
				renderedPanels,
				otherChildren
			]
		})
	});
}
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-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
	});
}
AppShellSidebar.displayName = "AppShell.Sidebar";
function AppShellHeader({ className, children, ...props }) {
	return /* @__PURE__ */ jsx("div", {
		"data-slot": "app-shell-header",
		className: cn("shrink-0", className),
		...props,
		children
	});
}
AppShellHeader.displayName = "AppShell.Header";
var appShellBackgrounds = {
	transparent: "transparent",
	appBg: "var(--app-bg)",
	neutral: "var(--muted)",
	brandSubtle: "linear-gradient(135deg, var(--brand-50) 0%, var(--brand-100) 100%)",
	brand: "linear-gradient(135deg, var(--brand-400) 0%, var(--brand-600) 100%)",
	brandDeep: "linear-gradient(135deg, var(--brand-700) 0%, var(--brand-900) 100%)",
	desertMidnight: "linear-gradient(135deg, var(--desert-midnight-500) 0%, var(--desert-midnight-700) 100%)",
	aqua: "linear-gradient(135deg, var(--aqua-flat-400) 0%, var(--aqua-flat-600) 100%)"
};
var AppShell = Object.assign(AppShellRoot, {
	Root: AppShellRoot,
	Sidebar: AppShellSidebar,
	Header: AppShellHeader,
	Panel: AppShellPanel,
	Content: AppShellContent
});
//#endregion
export { AppShell, AppShellHeader, AppShellRoot, AppShellSidebar, appShellBackgrounds };

//# sourceMappingURL=index477.js.map