import { cx as e } from "../../theme/tools.js";
import { useUiTranslation as t } from "../../i18n/useUiTranslation.js";
import { ModalCloseSvg as n } from "../../icons/ModalCloseSvg.js";
import { Tabs as r } from "../../atomic/molecules/tabs/Tabs.js";
import { actionGroup as i, breadcrumbCurrent as ee, breadcrumbItem as a, breadcrumbLink as o, breadcrumbList as s, breadcrumbNav as c, breadcrumbSeparator as l, content as u, contentContained as d, header as te, headerLeading as ne, headerRow as re, mainColumn as ie, mainColumnContained as ae, mainColumnWithSidePanel as oe, mobileSidebarBackdrop as se, mobileSidebarBackdropOpen as ce, page as le, pageContained as ue, pageSplitView as de, pageWithSidePanel as fe, secondaryAction as f, shell as pe, sidePanel as p, sidePanelSurface as m } from "./PageShell.css.js";
import { ResizableSplitView as me } from "./ResizableSplitView.js";
import { MenuSvg as h } from "../../icons/MenuSvg.js";
import { useCallback as g, useEffect as _, useRef as v, useState as y } from "react";
import { jsx as b, jsxs as x } from "react/jsx-runtime";
import he from "@plumile/router/routing/Link.js";
//#region src/components/layout/PageShell.tsx
var ge = 520, _e = 360, ve = .5, ye = 480, S = 1024, C = "plumile:page-shell:side-panel-width", w = "a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])", T = (e, t) => typeof e.isActive == "boolean" ? e.isActive : e.href != null && t != null ? t === e.href : !1, E = ({ actions: T, breadcrumb: E, breadcrumbSlot: D, children: O, contentClassName: k, contentScrollMode: A = "page", desktopSidebarOpen: j = !0, mobileSidebar: M, onOpenDesktopSidebar: N, openDesktopSidebarLabel: P, sidebar: F, sidePanel: I, tabs: L }) => {
	let { t: R } = t(), z = I != null, B = F != null || M != null, V = A === "contained", H = null;
	V && (H = d);
	let be = v(null), U = v(null), W = v(null), G = v(null), K = v(null), [q, xe] = y(!1), [J, Y] = y(!1), X = g(() => {
		Y(!1);
	}, []), Z = g(() => {
		if (typeof document < "u") {
			let { activeElement: e } = document;
			e instanceof HTMLElement && (K.current = e);
		}
		Y(!0);
	}, []);
	_(() => {
		if (typeof window > "u") return () => {};
		let e = window.matchMedia(`(max-width: ${S - 1}px)`), t = () => {
			xe(e.matches);
		};
		return t(), e.addEventListener("change", t), () => {
			e.removeEventListener("change", t);
		};
	}, []), _(() => {
		!q && J && X();
	}, [
		X,
		J,
		q
	]), _(() => {
		if (!J) return () => {};
		let e = (e) => {
			if (e.key === "Escape") {
				X();
				return;
			}
			if (e.key !== "Tab") return;
			let t = U.current;
			if (t == null) return;
			let n = Array.from(t.querySelectorAll(w)).filter((e) => e.offsetParent != null || e === document.activeElement), r = n[0], i = n[n.length - 1];
			if (r == null || i == null) {
				e.preventDefault();
				return;
			}
			if (e.shiftKey && document.activeElement === r) {
				e.preventDefault(), i.focus();
				return;
			}
			!e.shiftKey && document.activeElement === i && (e.preventDefault(), r.focus());
		}, t = W.current;
		return G.current?.focus(), window.addEventListener("keydown", e), () => {
			window.removeEventListener("keydown", e);
			let n = K.current;
			n != null && document.contains(n) ? n.focus() : t?.focus(), K.current = null;
		};
	}, [X, J]);
	let Se = () => {
		if (D != null) return /* @__PURE__ */ b("div", {
			className: c,
			children: D
		});
		if (E == null || E.length === 0) return null;
		let e = E.flatMap((e, t) => {
			let n = t === E.length - 1, r = `${e.href ?? "crumb"}-${t}`, i;
			if (e.href != null && !n) i = /* @__PURE__ */ b(he, {
				to: e.href,
				className: o,
				children: e.label
			});
			else {
				let t = o;
				n && (t = ee), i = /* @__PURE__ */ b("span", {
					className: t,
					children: e.label
				});
			}
			let s = /* @__PURE__ */ b("li", {
				className: a,
				children: i
			}, r);
			return n ? [s] : [s, /* @__PURE__ */ b("li", {
				className: l,
				"aria-hidden": "true",
				children: "/"
			}, `${r}-sep`)];
		});
		return /* @__PURE__ */ b("nav", {
			className: c,
			"aria-label": R("navigation.breadcrumb"),
			children: /* @__PURE__ */ b("ol", {
				className: s,
				children: e
			})
		});
	}, Ce = () => {
		if (T == null || T.main == null && (T.secondary ?? []).length === 0) return null;
		let e = T.secondary ?? [], t = null;
		return T.main != null && (t = /* @__PURE__ */ b("div", {
			className: f,
			children: T.main
		})), /* @__PURE__ */ x("div", {
			className: i,
			children: [e.map((e, t) => /* @__PURE__ */ b("div", {
				className: f,
				children: e
			}, `secondary-${t}`)), t]
		});
	}, we = () => L == null || L.length === 0 ? null : /* @__PURE__ */ b(r, {
		items: L.map((e) => ({
			id: e.id,
			label: e.label,
			to: e.href,
			isActive: e.isActive
		})),
		variant: "page"
	}), Q = F;
	q && (Q = M ?? F);
	let Te = B && (j || q), $ = P;
	$ ??= R("navigation.pageShell.openNavigation");
	let Ee = /* @__PURE__ */ x("div", {
		className: e(ie, {
			[oe]: z,
			[ae]: V
		}),
		children: [/* @__PURE__ */ x("div", {
			className: te,
			children: [/* @__PURE__ */ x("div", {
				className: re,
				children: [/* @__PURE__ */ x("div", {
					className: ne,
					children: [
						B && !q && !j && /* @__PURE__ */ b("button", {
							type: "button",
							className: "_1kley2de _1kley2dd txvbqbfqq txvbqbfou txvbqbey txvbqbls4 txvbqb19hs txvbqbjn7 txvbqb2uc txvbqb2sj txvbqb28o txvbqb1cw txvbqb1b7z txvbqb1bg1 txvbqbv txvbqbh6d txvbqb7g txvbqb76 txvbqb7t",
							onClick: N,
							"aria-label": $,
							title: $,
							children: /* @__PURE__ */ b(h, {
								width: 18,
								height: 18,
								"aria-hidden": "true"
							})
						}),
						B && q && /* @__PURE__ */ b("button", {
							ref: W,
							type: "button",
							className: "_1kley2dc txvbqbfok txvbqbfr0 txvbqbey txvbqbls4 txvbqb19hs txvbqbjn7 txvbqb2uc txvbqb2sj txvbqb28o txvbqb1cw txvbqb1b7z txvbqb1bg1 txvbqbv txvbqbh6d",
							onClick: Z,
							"aria-expanded": J,
							"aria-label": R("navigation.pageShell.openNavigation"),
							children: /* @__PURE__ */ b(h, {
								width: 18,
								height: 18,
								"aria-hidden": "true"
							})
						}),
						Se()
					]
				}), Ce()]
			}), we()]
		}), /* @__PURE__ */ b("div", {
			className: e(u, H, k),
			children: O
		})]
	});
	return /* @__PURE__ */ x("div", {
		className: pe,
		children: [
			/* @__PURE__ */ b("div", {
				className: e(se, { [ce]: q && J }),
				"aria-hidden": "true",
				onClick: X
			}),
			Te && /* @__PURE__ */ x("div", {
				ref: U,
				className: e("_1kley2d5 txvbqb13ix txvbqb18f5 txvbqbko1 txvbqbh6d txvbqbfpn txvbqbwr6", "_1kley2d6", { _1kley2d7: q && J }),
				"aria-hidden": q && !J,
				inert: q && !J,
				children: [/* @__PURE__ */ b("button", {
					ref: G,
					type: "button",
					className: "_1kley2df txvbqbfok txvbqbfr0 txvbqb13ja txvbqb13i4 txvbqb13jn txvbqb13l0 txvbqb18f5 txvbqb18gi txvbqb1auj txvbqbey txvbqbls4 txvbqb19hs txvbqbjn7 txvbqb2uc txvbqb2sj txvbqb28o txvbqb1cw txvbqb1b7z txvbqb1bg1 txvbqbv",
					onClick: X,
					"aria-label": R("navigation.pageShell.closeNavigation"),
					children: /* @__PURE__ */ b(n, {
						width: 18,
						height: 18,
						"aria-hidden": "true"
					})
				}), /* @__PURE__ */ b("div", {
					className: "_1kley2d9 _1kley2d8 txvbqbfpn txvbqbjzu",
					children: Q
				})]
			}),
			/* @__PURE__ */ b("div", {
				ref: be,
				className: e(le, { [ue]: V }),
				"aria-hidden": q && J,
				inert: q && J,
				children: /* @__PURE__ */ b(me, {
					main: Ee,
					sidePanel: I,
					className: e(de, { [fe]: z }),
					sidePanelClassName: e(p, m),
					defaultSidePanelWidth: ge,
					minSidePanelWidth: _e,
					maxSidePanelRatio: ve,
					minMainWidth: ye,
					stackedBreakpoint: S,
					storageKey: C,
					sidePanelLabel: R("layout.pageShell.sidePanel"),
					resizerLabel: R("layout.pageShell.resizeSidePanel")
				})
			})
		]
	});
}, D = { resolveIsActive: T };
//#endregion
export { E as PageShell, D as __test };

//# sourceMappingURL=PageShell.js.map