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 { actionGroup as r, breadcrumbCurrent as i, breadcrumbItem as a, breadcrumbLink as o, breadcrumbList as s, breadcrumbNav as c, breadcrumbSeparator as ee, content as te, header as ne, headerLeading as re, headerRow as ie, mainColumn as ae, mainColumnWithSidePanel as oe, mobileSidebarBackdrop as se, mobileSidebarBackdropOpen as ce, page as le, pageWithSidePanel as ue, secondaryAction as l, shell as de, sidePanel as fe, sidePanelResizable as pe, sidePanelResizer as me, sidePanelResizerHiddenOnMobile as he, sidePanelSurface as ge, tabRecipe as _e, tabsRow as ve } from "./PageShell.css.js";
import { MenuSvg as u } from "../../icons/MenuSvg.js";
import { useCallback as d, useEffect as f, useRef as p, useState as m } from "react";
import { jsx as h, jsxs as g } from "react/jsx-runtime";
import _ from "@plumile/router/routing/Link.js";
//#region src/components/layout/PageShell.tsx
var ye = 520, v = 360, y = .5, b = 480, be = 1024, x = "plumile:page-shell:side-panel-width", xe = "a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])", S = () => {
	if (typeof window > "u") return null;
	try {
		let e = window.localStorage.getItem(x);
		if (e == null) return null;
		let t = Number(e);
		return !Number.isFinite(t) || t <= 0 ? null : t;
	} catch {
		return null;
	}
}, C = (e) => {
	if (!(typeof window > "u")) try {
		window.localStorage.setItem(x, String(e));
	} catch {}
}, w = (e) => {
	let t = e;
	return typeof window < "u" && (t = window.innerWidth), t * y;
}, T = (e, t) => typeof e.isActive == "boolean" ? e.isActive : e.href != null && t != null ? t === e.href : !1, E = ({ actions: y, breadcrumb: x, breadcrumbSlot: E, children: D, contentClassName: Se, desktopSidebarOpen: O = !0, mobileSidebar: Ce, onOpenDesktopSidebar: we, openDesktopSidebarLabel: Te, sidebar: k, sidePanel: A, tabs: j }) => {
	let { t: M } = t(), N = A != null, P = p(null), F = p(null), I = p(null), L = p(null), R = p(null), z = p(null), [B, V] = m(() => S() ?? ye), H = p(B), [Ee, U] = m(!1), [W, De] = m(!1), [G, K] = m(!1), q = d(() => {
		K(!1);
	}, []), Oe = d(() => {
		if (typeof document < "u") {
			let { activeElement: e } = document;
			e instanceof HTMLElement && (R.current = e);
		}
		K(!0);
	}, []), J = d((e) => {
		let t = P.current;
		if (t == null) return;
		let { width: n } = t.getBoundingClientRect(), r = Math.max(0, Math.min(w(n), n - b)), i = Math.min(v, r);
		r <= 0 && (i = 0);
		let a = Math.max(i, Math.min(e, Math.max(i, r)));
		H.current = a, V(a);
	}, []), Y = d((e) => {
		if (typeof window > "u" || !N || W) return;
		let t = P.current;
		if (t == null) return;
		let n = t.getBoundingClientRect(), r = B;
		U(!0);
		let i = (t) => {
			let i = 0;
			if ("touches" in t) {
				let e = t.touches[0];
				if (e == null) return;
				i = e.clientX;
			} else i = t.clientX;
			let a = r + (e - i), o = Math.max(0, Math.min(w(n.width), n.width - b)), s = Math.min(v, o);
			o <= 0 && (s = 0);
			let c = Math.max(s, Math.min(a, Math.max(s, o)));
			H.current = c, V(c);
		}, a = () => {
			U(!1), C(H.current);
			let e = z.current;
			e?.move != null && (window.removeEventListener("mousemove", e.move), window.removeEventListener("touchmove", e.move)), e?.up != null && (window.removeEventListener("mouseup", e.up), window.removeEventListener("touchend", e.up), window.removeEventListener("touchcancel", e.up)), z.current = null;
		};
		z.current = {
			move: i,
			up: a
		}, window.addEventListener("mousemove", i), window.addEventListener("touchmove", i, { passive: !1 }), window.addEventListener("mouseup", a), window.addEventListener("touchend", a), window.addEventListener("touchcancel", a);
	}, [
		N,
		W,
		B
	]);
	f(() => {
		H.current = B;
	}, [B]), f(() => {
		if (typeof window > "u") return () => {};
		let e = window.matchMedia(`(max-width: ${be - 1}px)`), t = () => {
			De(e.matches);
		};
		return t(), e.addEventListener("change", t), () => {
			e.removeEventListener("change", t);
		};
	}, []), f(() => {
		N && J(B);
	}, [
		N,
		B,
		J
	]), f(() => {
		!W && G && q();
	}, [
		q,
		G,
		W
	]), f(() => {
		if (!G) return () => {};
		let e = (e) => {
			if (e.key === "Escape") {
				q();
				return;
			}
			if (e.key !== "Tab") return;
			let t = F.current;
			if (t == null) return;
			let n = Array.from(t.querySelectorAll(xe)).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 = I.current;
		return L.current?.focus(), window.addEventListener("keydown", e), () => {
			window.removeEventListener("keydown", e);
			let n = R.current;
			n != null && document.contains(n) ? n.focus() : t?.focus(), R.current = null;
		};
	}, [q, G]), f(() => () => {
		let e = z.current;
		e?.move != null && (window.removeEventListener("mousemove", e.move), window.removeEventListener("touchmove", e.move)), e?.up != null && (window.removeEventListener("mouseup", e.up), window.removeEventListener("touchend", e.up), window.removeEventListener("touchcancel", e.up));
	}, []);
	let X;
	typeof window < "u" && (X = window.location.pathname);
	let ke = () => {
		if (E != null) return /* @__PURE__ */ h("div", {
			className: c,
			children: E
		});
		if (x == null || x.length === 0) return null;
		let e = x.flatMap((e, t) => {
			let n = t === x.length - 1, r = `${e.href ?? "crumb"}-${t}`, s;
			if (e.href != null && !n) s = /* @__PURE__ */ h(_, {
				to: e.href,
				className: o,
				children: e.label
			});
			else {
				let t = o;
				n && (t = i), s = /* @__PURE__ */ h("span", {
					className: t,
					children: e.label
				});
			}
			let c = /* @__PURE__ */ h("li", {
				className: a,
				children: s
			}, r);
			return n ? [c] : [c, /* @__PURE__ */ h("li", {
				className: ee,
				"aria-hidden": "true",
				children: "/"
			}, `${r}-sep`)];
		});
		return /* @__PURE__ */ h("nav", {
			className: c,
			"aria-label": M("navigation.breadcrumb"),
			children: /* @__PURE__ */ h("ol", {
				className: s,
				children: e
			})
		});
	}, Ae = () => {
		if (y == null || y.main == null && (y.secondary ?? []).length === 0) return null;
		let e = y.secondary ?? [], t = null;
		return y.main != null && (t = /* @__PURE__ */ h("div", {
			className: l,
			children: y.main
		})), /* @__PURE__ */ g("div", {
			className: r,
			children: [e.map((e, t) => /* @__PURE__ */ h("div", {
				className: l,
				children: e
			}, `secondary-${t}`)), t]
		});
	}, je = () => j == null || j.length === 0 ? null : /* @__PURE__ */ h("div", {
		className: ve,
		children: j.map((e) => {
			let t = T(e, X), n = "default";
			t && (n = "active");
			let r = "link";
			e.href ?? (r = "static");
			let i = _e({
				state: n,
				mode: r
			}), a = e.id, o;
			return t && (o = "page"), e.href == null ? /* @__PURE__ */ h("span", {
				className: i,
				"aria-current": o,
				children: e.label
			}, a) : /* @__PURE__ */ h(_, {
				to: e.href,
				className: i,
				"aria-current": o,
				children: e.label
			}, a);
		})
	}), Me = d((e) => {
		if (!W && (e.key === "ArrowLeft" || e.key === "ArrowRight")) {
			e.preventDefault();
			let t = 16;
			e.key === "ArrowRight" && (t = -16), J(B + t), C(H.current);
		}
	}, [
		J,
		W,
		B
	]), Z = null;
	if (N) {
		let t = [fe, ge], n;
		W || (t.push(pe), n = { width: `${B}px` }), Z = /* @__PURE__ */ h("aside", {
			className: e(...t),
			style: n,
			children: A
		});
	}
	let Q = null;
	if (N) {
		let t = "false";
		Ee && (t = "true");
		let n = v, r = Math.max(v, B), i = P.current;
		if (i != null) {
			let { width: e } = i.getBoundingClientRect(), t = Math.max(0, Math.min(w(e), e - b));
			n = Math.min(v, t), t <= 0 && (n = 0), r = Math.max(n, t);
		}
		Q = /* @__PURE__ */ h("div", {
			className: e(me, he),
			role: "separator",
			"aria-orientation": "vertical",
			"aria-label": M("layout.pageShell.resizeSidePanel"),
			"aria-valuemin": Math.round(n),
			"aria-valuemax": Math.round(r),
			"aria-valuenow": Math.round(B),
			tabIndex: 0,
			"data-active": t,
			onMouseDown: (e) => {
				e.preventDefault(), Y(e.clientX);
			},
			onTouchStart: (e) => {
				let t = e.touches[0];
				t != null && Y(t.clientX);
			},
			onKeyDown: Me
		});
	}
	let Ne = k;
	W && (Ne = Ce ?? k);
	let Pe = O || W, $ = Te;
	return $ ??= M("navigation.pageShell.openNavigation"), /* @__PURE__ */ g("div", {
		className: de,
		children: [
			/* @__PURE__ */ h("div", {
				className: e(se, { [ce]: W && G }),
				"aria-hidden": "true",
				onClick: q
			}),
			Pe && /* @__PURE__ */ g("div", {
				ref: F,
				className: e("_1kley2d3 txvbqbpty txvbqbt7y txvbqbcx7 txvbqbaj7 txvbqb9ip txvbqbl7g", "_1kley2d4", { _1kley2d5: W && G }),
				"aria-hidden": W && !G,
				inert: W && !G,
				children: [/* @__PURE__ */ h("button", {
					ref: L,
					type: "button",
					className: "_1kley2dd txvbqb9hy txvbqb9jn txvbqbpu7 txvbqbpte txvbqbpug txvbqbpve txvbqbt7y txvbqbt8w txvbqbuwg txvbqbcp txvbqbdoy txvbqbtyp txvbqbc7p txvbqb1rp txvbqb1qg txvbqb1cp txvbqbwg txvbqbv41 txvbqbv9z txvbqbv",
					onClick: q,
					"aria-label": M("navigation.pageShell.closeNavigation"),
					children: /* @__PURE__ */ h(n, {
						width: 18,
						height: 18,
						"aria-hidden": "true"
					})
				}), /* @__PURE__ */ h("div", {
					className: "_1kley2d7 _1kley2d6 txvbqb9ip txvbqbcgg",
					children: Ne
				})]
			}),
			/* @__PURE__ */ g("div", {
				ref: P,
				className: e(le, { [ue]: N }),
				"aria-hidden": W && G,
				inert: W && G,
				children: [
					/* @__PURE__ */ g("div", {
						className: e(ae, { [oe]: N }),
						children: [/* @__PURE__ */ g("div", {
							className: ne,
							children: [/* @__PURE__ */ g("div", {
								className: ie,
								children: [/* @__PURE__ */ g("div", {
									className: re,
									children: [
										!W && !O && /* @__PURE__ */ h("button", {
											type: "button",
											className: "_1kley2dc _1kley2db txvbqb9jg txvbqb9i5 txvbqbcp txvbqbdoy txvbqbtyp txvbqbc7p txvbqb1rp txvbqb1qg txvbqb1cp txvbqbwg txvbqbv41 txvbqbv9z txvbqbv txvbqbaj7 txvbqb77 txvbqb6x txvbqb7k",
											onClick: we,
											"aria-label": $,
											title: $,
											children: /* @__PURE__ */ h(u, {
												width: 18,
												height: 18,
												"aria-hidden": "true"
											})
										}),
										W && /* @__PURE__ */ h("button", {
											ref: I,
											type: "button",
											className: "_1kley2da txvbqb9hy txvbqb9jn txvbqbcp txvbqbdoy txvbqbtyp txvbqbc7p txvbqb1rp txvbqb1qg txvbqb1cp txvbqbwg txvbqbv41 txvbqbv9z txvbqbv txvbqbaj7",
											onClick: Oe,
											"aria-expanded": G,
											"aria-label": M("navigation.pageShell.openNavigation"),
											children: /* @__PURE__ */ h(u, {
												width: 18,
												height: 18,
												"aria-hidden": "true"
											})
										}),
										ke()
									]
								}), Ae()]
							}), je()]
						}), /* @__PURE__ */ h("div", {
							className: e(te, Se),
							children: D
						})]
					}),
					Q,
					Z
				]
			})
		]
	});
}, D = {
	readStoredSidePanelWidth: S,
	resolveMaxSidePanelWidth: w,
	resolveIsActive: T
};
//#endregion
export { E as PageShell, D as __test };

//# sourceMappingURL=PageShell.js.map