@plumile/ui 0.1.134 → 0.1.142

package/lib/esm/components/layout/PageShell.js

@@ -1,111 +1,51 @@
 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, contentContained as ne, header as re, headerLeading as ie, headerRow as ae, mainColumn as oe, mainColumnContained as se, mainColumnWithSidePanel as ce, mobileSidebarBackdrop as le, mobileSidebarBackdropOpen as ue, page as de, pageContained as fe, pageWithSidePanel as pe, secondaryAction as l, shell as me, sidePanel as he, sidePanelResizable as ge, sidePanelResizer as _e, sidePanelResizerHiddenOnMobile as ve, sidePanelSurface as ye, tabRecipe as be, tabsRow as xe } 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";
+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 Se = 520, v = 360, y = .5, b = 480, Ce = 1024, x = "plumile:page-shell:side-panel-width", we = "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: Te, contentScrollMode: Ee = "page", desktopSidebarOpen: O = !0, mobileSidebar: De, onOpenDesktopSidebar: Oe, openDesktopSidebarLabel: ke, sidebar: k, sidePanel: A, tabs: j }) => {
-	let { t: M } = t(), N = A != null, P = Ee === "contained", F = null;
-	P && (F = ne);
-	let I = p(null), L = p(null), R = p(null), z = p(null), B = p(null), V = p(null), [H, U] = m(() => S() ?? Se), W = p(H), [Ae, G] = m(!1), [K, je] = m(!1), [q, J] = m(!1), Y = d(() => {
-		J(!1);
-	}, []), Me = d(() => {
+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 && (B.current = e);
+			e instanceof HTMLElement && (K.current = e);
 		}
-		J(!0);
-	}, []), X = d((e) => {
-		let t = I.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)));
-		W.current = a, U(a);
-	}, []), Z = d((e) => {
-		if (typeof window > "u" || !N || K) return;
-		let t = I.current;
-		if (t == null) return;
-		let n = t.getBoundingClientRect(), r = H;
-		G(!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)));
-			W.current = c, U(c);
-		}, a = () => {
-			G(!1), C(W.current);
-			let e = V.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)), V.current = null;
-		};
-		V.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,
-		K,
-		H
-	]);
-	f(() => {
-		W.current = H;
-	}, [H]), f(() => {
+		Y(!0);
+	}, []);
+	_(() => {
 		if (typeof window > "u") return () => {};
-		let e = window.matchMedia(`(max-width: ${Ce - 1}px)`), t = () => {
-			je(e.matches);
+		let e = window.matchMedia(`(max-width: ${S - 1}px)`), t = () => {
+			xe(e.matches);
 		};
 		return t(), e.addEventListener("change", t), () => {
 			e.removeEventListener("change", t);
 		};
-	}, []), f(() => {
-		N && X(H);
+	}, []), _(() => {
+		!q && J && X();
 	}, [
-		N,
-		H,
-		X
-	]), f(() => {
-		!K && q && Y();
-	}, [
-		Y,
-		q,
-		K
-	]), f(() => {
-		if (!q) return () => {};
+		X,
+		J,
+		q
+	]), _(() => {
+		if (!J) return () => {};
 		let e = (e) => {
 			if (e.key === "Escape") {
-				Y();
+				X();
 				return;
 			}
 			if (e.key !== "Tab") return;
-			let t = L.current;
+			let t = U.current;
 			if (t == null) return;
-			let n = Array.from(t.querySelectorAll(we)).filter((e) => e.offsetParent != null || e === document.activeElement), r = n[0], i = n[n.length - 1];
+			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;
@@ -115,237 +55,173 @@ var Se = 520, v = 360, y = .5, b = 480, Ce = 1024, x = "plumile:page-shell:side-
 				return;
 			}
 			!e.shiftKey && document.activeElement === i && (e.preventDefault(), r.focus());
-		}, t = R.current;
-		return z.current?.focus(), window.addEventListener("keydown", e), () => {
+		}, t = W.current;
+		return G.current?.focus(), window.addEventListener("keydown", e), () => {
 			window.removeEventListener("keydown", e);
-			let n = B.current;
-			n != null && document.contains(n) ? n.focus() : t?.focus(), B.current = null;
+			let n = K.current;
+			n != null && document.contains(n) ? n.focus() : t?.focus(), K.current = null;
 		};
-	}, [Y, q]), f(() => () => {
-		let e = V.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 Q;
-	typeof window < "u" && (Q = window.location.pathname);
-	let Ne = () => {
-		if (E != null) return /* @__PURE__ */ h("div", {
+	}, [X, J]);
+	let Se = () => {
+		if (D != null) return /* @__PURE__ */ b("div", {
 			className: c,
-			children: E
+			children: D
 		});
-		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(_, {
+		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 = i), s = /* @__PURE__ */ h("span", {
+				n && (t = ee), i = /* @__PURE__ */ b("span", {
 					className: t,
 					children: e.label
 				});
 			}
-			let c = /* @__PURE__ */ h("li", {
+			let s = /* @__PURE__ */ b("li", {
 				className: a,
-				children: s
+				children: i
 			}, r);
-			return n ? [c] : [c, /* @__PURE__ */ h("li", {
-				className: ee,
+			return n ? [s] : [s, /* @__PURE__ */ b("li", {
+				className: l,
 				"aria-hidden": "true",
 				children: "/"
 			}, `${r}-sep`)];
 		});
-		return /* @__PURE__ */ h("nav", {
+		return /* @__PURE__ */ b("nav", {
 			className: c,
-			"aria-label": M("navigation.breadcrumb"),
-			children: /* @__PURE__ */ h("ol", {
+			"aria-label": R("navigation.breadcrumb"),
+			children: /* @__PURE__ */ b("ol", {
 				className: s,
 				children: e
 			})
 		});
-	}, Pe = () => {
-		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,
+	}, 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]
 		});
-	}, Fe = () => j == null || j.length === 0 ? null : /* @__PURE__ */ h("div", {
-		className: xe,
-		children: j.map((e) => {
-			let t = T(e, Q), n = "default";
-			t && (n = "active");
-			let r = "link";
-			e.href ?? (r = "static");
-			let i = be({
-				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);
-		})
-	}), Ie = d((e) => {
-		if (!K && (e.key === "ArrowLeft" || e.key === "ArrowRight")) {
-			e.preventDefault();
-			let t = 16;
-			e.key === "ArrowRight" && (t = -16), X(H + t), C(W.current);
-		}
-	}, [
-		X,
-		K,
-		H
-	]), Le = null;
-	if (N) {
-		let t = [he, ye], n;
-		K || (t.push(ge), n = { width: `${H}px` }), Le = /* @__PURE__ */ h("aside", {
-			className: e(...t),
-			style: n,
-			children: A
-		});
-	}
-	let Re = null;
-	if (N) {
-		let t = "false";
-		Ae && (t = "true");
-		let n = v, r = Math.max(v, H), i = I.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);
-		}
-		Re = /* @__PURE__ */ h("div", {
-			className: e(_e, ve),
-			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(H),
-			tabIndex: 0,
-			"data-active": t,
-			onMouseDown: (e) => {
-				e.preventDefault(), Z(e.clientX);
-			},
-			onTouchStart: (e) => {
-				let t = e.touches[0];
-				t != null && Z(t.clientX);
-			},
-			onKeyDown: Ie
-		});
-	}
-	let ze = k;
-	K && (ze = De ?? k);
-	let Be = O || K, $ = ke;
-	return $ ??= M("navigation.pageShell.openNavigation"), /* @__PURE__ */ g("div", {
-		className: me,
+	}, 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 txvbqbdsb txvbqbdqf txvbqbey txvbqbjtp txvbqb17jd txvbqbhos txvbqb2gm txvbqb2et txvbqb1uy txvbqb17h txvbqb196b txvbqb19c9 txvbqbv txvbqbf7y 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 txvbqbdq5 txvbqbdsl txvbqbey txvbqbjtp txvbqb17jd txvbqbhos txvbqb2gm txvbqb2et txvbqb1uy txvbqb17h txvbqb196b txvbqb19c9 txvbqbv txvbqbf7y",
+							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__ */ h("div", {
-				className: e(le, { [ue]: K && q }),
+			/* @__PURE__ */ b("div", {
+				className: e(se, { [ce]: q && J }),
 				"aria-hidden": "true",
-				onClick: Y
+				onClick: X
 			}),
-			Be && /* @__PURE__ */ g("div", {
-				ref: L,
-				className: e("_1kley2d4 txvbqb11ki txvbqb16gq txvbqbipm txvbqbf7y txvbqbdr8 txvbqbusr", "_1kley2d5", { _1kley2d6: K && q }),
-				"aria-hidden": K && !q,
-				inert: K && !q,
-				children: [/* @__PURE__ */ h("button", {
-					ref: z,
+			Te && /* @__PURE__ */ x("div", {
+				ref: U,
+				className: e("_1kley2d5 txvbqb11ki txvbqb16gq txvbqbipm txvbqbf7y txvbqbdr8 txvbqbusr", "_1kley2d6", { _1kley2d7: q && J }),
+				"aria-hidden": q && !J,
+				inert: q && !J,
+				children: [/* @__PURE__ */ b("button", {
+					ref: G,
 					type: "button",
-					className: "_1kley2de txvbqbdq5 txvbqbdsl txvbqb11kv txvbqb11jp txvbqb11l8 txvbqb11ml txvbqb16gq txvbqb16i3 txvbqb18w4 txvbqbey txvbqbjtp txvbqb17jd txvbqbhos txvbqb2gm txvbqb2et txvbqb1uy txvbqb17h txvbqb196b txvbqb19c9 txvbqbv",
-					onClick: Y,
-					"aria-label": M("navigation.pageShell.closeNavigation"),
-					children: /* @__PURE__ */ h(n, {
+					className: "_1kley2df txvbqbdq5 txvbqbdsl txvbqb11kv txvbqb11jp txvbqb11l8 txvbqb11ml txvbqb16gq txvbqb16i3 txvbqb18w4 txvbqbey txvbqbjtp txvbqb17jd txvbqbhos txvbqb2gm txvbqb2et txvbqb1uy txvbqb17h txvbqb196b txvbqb19c9 txvbqbv",
+					onClick: X,
+					"aria-label": R("navigation.pageShell.closeNavigation"),
+					children: /* @__PURE__ */ b(n, {
 						width: 18,
 						height: 18,
 						"aria-hidden": "true"
 					})
-				}), /* @__PURE__ */ h("div", {
-					className: "_1kley2d8 _1kley2d7 txvbqbdr8 txvbqbi1f",
-					children: ze
+				}), /* @__PURE__ */ b("div", {
+					className: "_1kley2d9 _1kley2d8 txvbqbdr8 txvbqbi1f",
+					children: Q
 				})]
 			}),
-			/* @__PURE__ */ g("div", {
-				ref: I,
-				className: e(de, {
-					[pe]: N,
-					[fe]: P
-				}),
-				"aria-hidden": K && q,
-				inert: K && q,
-				children: [
-					/* @__PURE__ */ g("div", {
-						className: e(oe, {
-							[ce]: N,
-							[se]: P
-						}),
-						children: [/* @__PURE__ */ g("div", {
-							className: re,
-							children: [/* @__PURE__ */ g("div", {
-								className: ae,
-								children: [/* @__PURE__ */ g("div", {
-									className: ie,
-									children: [
-										!K && !O && /* @__PURE__ */ h("button", {
-											type: "button",
-											className: "_1kley2dd _1kley2dc txvbqbdsb txvbqbdqf txvbqbey txvbqbjtp txvbqb17jd txvbqbhos txvbqb2gm txvbqb2et txvbqb1uy txvbqb17h txvbqb196b txvbqb19c9 txvbqbv txvbqbf7y txvbqb7g txvbqb76 txvbqb7t",
-											onClick: Oe,
-											"aria-label": $,
-											title: $,
-											children: /* @__PURE__ */ h(u, {
-												width: 18,
-												height: 18,
-												"aria-hidden": "true"
-											})
-										}),
-										K && /* @__PURE__ */ h("button", {
-											ref: R,
-											type: "button",
-											className: "_1kley2db txvbqbdq5 txvbqbdsl txvbqbey txvbqbjtp txvbqb17jd txvbqbhos txvbqb2gm txvbqb2et txvbqb1uy txvbqb17h txvbqb196b txvbqb19c9 txvbqbv txvbqbf7y",
-											onClick: Me,
-											"aria-expanded": q,
-											"aria-label": M("navigation.pageShell.openNavigation"),
-											children: /* @__PURE__ */ h(u, {
-												width: 18,
-												height: 18,
-												"aria-hidden": "true"
-											})
-										}),
-										Ne()
-									]
-								}), Pe()]
-							}), Fe()]
-						}), /* @__PURE__ */ h("div", {
-							className: e(te, F, Te),
-							children: D
-						})]
-					}),
-					Re,
-					Le
-				]
+			/* @__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,
+					resizerLabel: R("layout.pageShell.resizeSidePanel")
+				})
 			})
 		]
 	});
-}, D = {
-	readStoredSidePanelWidth: S,
-	resolveMaxSidePanelWidth: w,
-	resolveIsActive: T
-};
+}, D = { resolveIsActive: T };
 //#endregion
 export { E as PageShell, D as __test };
 

package/lib/esm/components/layout/PageShell.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageShell.js","names":[],"sources":["../../../../src/components/layout/PageShell.tsx"],"sourcesContent":["import Link from '@plumile/router/routing/Link.js';\nimport {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type JSX,\n  type ReactNode,\n  type KeyboardEvent,\n  type CSSProperties,\n} from 'react';\n\nimport * as styles from './PageShell.css.js';\nimport { MenuSvg } from '../../icons/MenuSvg.js';\nimport { ModalCloseSvg } from '../../icons/ModalCloseSvg.js';\nimport { cx } from '../../theme/tools.js';\nimport { useUiTranslation } from '../../i18n/useUiTranslation.js';\n\nexport type BreadcrumbItem = {\n  label: ReactNode;\n  href?: string;\n};\n\nexport type PageShellTab = {\n  id: string;\n  label: ReactNode;\n  href?: string;\n  isActive?: boolean;\n};\n\nexport type PageShellActions = {\n  main?: ReactNode;\n  secondary?: ReactNode[];\n};\n\nexport type PageShellContentScrollMode = 'page' | 'contained';\n\nconst DEFAULT_SIDE_PANEL_WIDTH = 520;\nconst MIN_SIDE_PANEL_WIDTH = 360;\nconst MAX_SIDE_PANEL_RATIO = 0.5;\nconst MIN_MAIN_WIDTH = 480;\nconst SPLIT_BREAKPOINT = 1024;\nconst SIDE_PANEL_WIDTH_STORAGE_KEY = 'plumile:page-shell:side-panel-width';\nconst FOCUSABLE_SELECTOR =\n  'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\nconst readStoredSidePanelWidth = (): number | null => {\n  if (typeof window === 'undefined') {\n    return null;\n  }\n\n  try {\n    const stored = window.localStorage.getItem(SIDE_PANEL_WIDTH_STORAGE_KEY);\n    if (stored == null) {\n      return null;\n    }\n    const parsed = Number(stored);\n    if (!Number.isFinite(parsed) || parsed <= 0) {\n      return null;\n    }\n    return parsed;\n  } catch {\n    return null;\n  }\n};\n\nconst persistSidePanelWidth = (width: number): void => {\n  if (typeof window === 'undefined') {\n    return;\n  }\n\n  try {\n    window.localStorage.setItem(SIDE_PANEL_WIDTH_STORAGE_KEY, String(width));\n  } catch {\n    // ignore quota / permission errors\n  }\n};\n\nconst resolveMaxSidePanelWidth = (containerWidth: number): number => {\n  let viewWidth = containerWidth;\n  if (typeof window !== 'undefined') {\n    viewWidth = window.innerWidth;\n  }\n  return viewWidth * MAX_SIDE_PANEL_RATIO;\n};\n\ntype ResizeMoveHandler = (event: MouseEvent | TouchEvent) => void;\ntype ResizeUpHandler = () => void;\ntype ActiveResizeHandlers = {\n  move?: ResizeMoveHandler | null;\n  up?: ResizeUpHandler | null;\n};\n\ntype Props = {\n  sidebar: ReactNode;\n  mobileSidebar?: ReactNode;\n  desktopSidebarOpen?: boolean;\n  onOpenDesktopSidebar?: () => void;\n  openDesktopSidebarLabel?: string;\n  children: ReactNode;\n  breadcrumb?: BreadcrumbItem[];\n  breadcrumbSlot?: ReactNode;\n  tabs?: PageShellTab[];\n  actions?: PageShellActions;\n  sidePanel?: ReactNode;\n  contentClassName?: string;\n  contentScrollMode?: PageShellContentScrollMode;\n};\n\nconst resolveIsActive = (tab: PageShellTab, pathname?: string): boolean => {\n  if (typeof tab.isActive === 'boolean') {\n    return tab.isActive;\n  }\n\n  if (tab.href != null && pathname != null) {\n    return pathname === tab.href;\n  }\n\n  return false;\n};\n\nexport const PageShell = ({\n  actions,\n  breadcrumb,\n  breadcrumbSlot,\n  children,\n  contentClassName,\n  contentScrollMode = 'page',\n  desktopSidebarOpen = true,\n  mobileSidebar,\n  onOpenDesktopSidebar,\n  openDesktopSidebarLabel,\n  sidebar,\n  sidePanel,\n  tabs,\n}: Props): JSX.Element => {\n  const { t } = useUiTranslation();\n  const hasSidePanel = sidePanel != null;\n  const isContainedScroll = contentScrollMode === 'contained';\n  let containedContentClassName: string | null = null;\n  if (isContainedScroll) {\n    containedContentClassName = styles.contentContained;\n  }\n  const pageRef = useRef<HTMLDivElement | null>(null);\n  const mobileSidebarRef = useRef<HTMLDivElement | null>(null);\n  const mobileSidebarToggleRef = useRef<HTMLButtonElement | null>(null);\n  const mobileSidebarCloseRef = useRef<HTMLButtonElement | null>(null);\n  const mobileSidebarPreviousFocusRef = useRef<HTMLElement | null>(null);\n  const activeResizeHandlersRef = useRef<ActiveResizeHandlers | null>(null);\n  const [sidePanelWidth, setSidePanelWidth] = useState(() => {\n    const stored = readStoredSidePanelWidth();\n    return stored ?? DEFAULT_SIDE_PANEL_WIDTH;\n  });\n  const sidePanelWidthSnapshotRef = useRef(sidePanelWidth);\n  const [isResizingPanel, setIsResizingPanel] = useState(false);\n  const [isStackedLayout, setIsStackedLayout] = useState(false);\n  const [isMobileSidebarOpen, setIsMobileSidebarOpen] = useState(false);\n\n  const closeMobileSidebar = useCallback(() => {\n    setIsMobileSidebarOpen(false);\n  }, []);\n\n  const openMobileSidebar = useCallback(() => {\n    if (typeof document !== 'undefined') {\n      const { activeElement } = document;\n      if (activeElement instanceof HTMLElement) {\n        mobileSidebarPreviousFocusRef.current = activeElement;\n      }\n    }\n    setIsMobileSidebarOpen(true);\n  }, []);\n\n  const clampSidePanelWidth = useCallback((candidateWidth: number): void => {\n    const container = pageRef.current;\n    if (container == null) {\n      return;\n    }\n\n    const { width } = container.getBoundingClientRect();\n    const maxWidth = Math.max(\n      0,\n      Math.min(resolveMaxSidePanelWidth(width), width - MIN_MAIN_WIDTH),\n    );\n    const minWidth = Math.min(MIN_SIDE_PANEL_WIDTH, maxWidth);\n    let safeMin = minWidth;\n    if (maxWidth <= 0) {\n      safeMin = 0;\n    }\n    const safeMax = Math.max(safeMin, maxWidth);\n    const clampedWidth = Math.max(safeMin, Math.min(candidateWidth, safeMax));\n    sidePanelWidthSnapshotRef.current = clampedWidth;\n    setSidePanelWidth(clampedWidth);\n  }, []);\n\n  const startResizing = useCallback(\n    (startClientX: number): void => {\n      if (typeof window === 'undefined') {\n        return;\n      }\n\n      if (!hasSidePanel || isStackedLayout) {\n        return;\n      }\n\n      const container = pageRef.current;\n      if (container == null) {\n        return;\n      }\n\n      const rect = container.getBoundingClientRect();\n      const currentWidth = sidePanelWidth;\n      setIsResizingPanel(true);\n\n      const moveHandler: ResizeMoveHandler = (event) => {\n        let clientX = 0;\n        if ('touches' in event) {\n          const touch = event.touches[0];\n          if (touch == null) {\n            return;\n          }\n          clientX = touch.clientX;\n        } else {\n          clientX = event.clientX;\n        }\n\n        const deltaX = startClientX - clientX;\n        const nextWidth = currentWidth + deltaX;\n\n        const maxWidth = Math.max(\n          0,\n          Math.min(\n            resolveMaxSidePanelWidth(rect.width),\n            rect.width - MIN_MAIN_WIDTH,\n          ),\n        );\n        const minWidth = Math.min(MIN_SIDE_PANEL_WIDTH, maxWidth);\n        let safeMin = minWidth;\n        if (maxWidth <= 0) {\n          safeMin = 0;\n        }\n        const safeMax = Math.max(safeMin, maxWidth);\n\n        const clampedWidth = Math.max(safeMin, Math.min(nextWidth, safeMax));\n        sidePanelWidthSnapshotRef.current = clampedWidth;\n        setSidePanelWidth(clampedWidth);\n      };\n\n      const upHandler: ResizeUpHandler = () => {\n        setIsResizingPanel(false);\n        persistSidePanelWidth(sidePanelWidthSnapshotRef.current);\n        const handlers = activeResizeHandlersRef.current;\n        if (handlers?.move != null) {\n          window.removeEventListener('mousemove', handlers.move);\n          window.removeEventListener('touchmove', handlers.move);\n        }\n        if (handlers?.up != null) {\n          window.removeEventListener('mouseup', handlers.up);\n          window.removeEventListener('touchend', handlers.up);\n          window.removeEventListener('touchcancel', handlers.up);\n        }\n        activeResizeHandlersRef.current = null;\n      };\n\n      activeResizeHandlersRef.current = { move: moveHandler, up: upHandler };\n\n      window.addEventListener('mousemove', moveHandler);\n      window.addEventListener('touchmove', moveHandler, { passive: false });\n      window.addEventListener('mouseup', upHandler);\n      window.addEventListener('touchend', upHandler);\n      window.addEventListener('touchcancel', upHandler);\n    },\n    [hasSidePanel, isStackedLayout, sidePanelWidth],\n  );\n\n  useEffect(() => {\n    sidePanelWidthSnapshotRef.current = sidePanelWidth;\n  }, [sidePanelWidth]);\n\n  useEffect(() => {\n    if (typeof window === 'undefined') {\n      return () => {};\n    }\n    const mediaQuery = window.matchMedia(\n      `(max-width: ${SPLIT_BREAKPOINT - 1}px)`,\n    );\n    const handleMediaChange = () => {\n      setIsStackedLayout(mediaQuery.matches);\n    };\n\n    handleMediaChange();\n    mediaQuery.addEventListener('change', handleMediaChange);\n\n    return () => {\n      mediaQuery.removeEventListener('change', handleMediaChange);\n    };\n  }, []);\n\n  useEffect(() => {\n    if (hasSidePanel) {\n      clampSidePanelWidth(sidePanelWidth);\n    }\n  }, [hasSidePanel, sidePanelWidth, clampSidePanelWidth]);\n\n  useEffect(() => {\n    if (!isStackedLayout && isMobileSidebarOpen) {\n      closeMobileSidebar();\n    }\n  }, [closeMobileSidebar, isMobileSidebarOpen, isStackedLayout]);\n\n  useEffect(() => {\n    if (!isMobileSidebarOpen) {\n      return () => {};\n    }\n\n    const handleEscape = (event: globalThis.KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        closeMobileSidebar();\n        return;\n      }\n\n      if (event.key !== 'Tab') {\n        return;\n      }\n\n      const sidebarElement = mobileSidebarRef.current;\n      if (sidebarElement == null) {\n        return;\n      }\n\n      const focusableElements = Array.from(\n        sidebarElement.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR),\n      ).filter((element) => {\n        return (\n          element.offsetParent != null || element === document.activeElement\n        );\n      });\n\n      const firstElement = focusableElements[0];\n      const lastElement = focusableElements[focusableElements.length - 1];\n\n      if (firstElement == null || lastElement == null) {\n        event.preventDefault();\n        return;\n      }\n\n      if (event.shiftKey && document.activeElement === firstElement) {\n        event.preventDefault();\n        lastElement.focus();\n        return;\n      }\n\n      if (!event.shiftKey && document.activeElement === lastElement) {\n        event.preventDefault();\n        firstElement.focus();\n      }\n    };\n\n    const fallbackFocusElement = mobileSidebarToggleRef.current;\n    mobileSidebarCloseRef.current?.focus();\n\n    window.addEventListener('keydown', handleEscape);\n    return () => {\n      window.removeEventListener('keydown', handleEscape);\n      const previousFocus = mobileSidebarPreviousFocusRef.current;\n      if (previousFocus != null && document.contains(previousFocus)) {\n        previousFocus.focus();\n      } else {\n        fallbackFocusElement?.focus();\n      }\n      mobileSidebarPreviousFocusRef.current = null;\n    };\n  }, [closeMobileSidebar, isMobileSidebarOpen]);\n\n  useEffect(() => {\n    return () => {\n      const handlers = activeResizeHandlersRef.current;\n      if (handlers?.move != null) {\n        window.removeEventListener('mousemove', handlers.move);\n        window.removeEventListener('touchmove', handlers.move);\n      }\n      if (handlers?.up != null) {\n        window.removeEventListener('mouseup', handlers.up);\n        window.removeEventListener('touchend', handlers.up);\n        window.removeEventListener('touchcancel', handlers.up);\n      }\n    };\n  }, []);\n\n  let currentPath: string | undefined;\n  if (typeof window !== 'undefined') {\n    currentPath = window.location.pathname;\n  }\n\n  const renderBreadcrumb = (): JSX.Element | null => {\n    if (breadcrumbSlot != null) {\n      return <div className={styles.breadcrumbNav}>{breadcrumbSlot}</div>;\n    }\n\n    if (breadcrumb == null || breadcrumb.length === 0) {\n      return null;\n    }\n\n    const items = breadcrumb.flatMap((item, index) => {\n      const isLast = index === breadcrumb.length - 1;\n      const key = `${item.href ?? 'crumb'}-${index}`;\n      let content: JSX.Element;\n      if (item.href != null && !isLast) {\n        content = (\n          <Link to={item.href} className={styles.breadcrumbLink}>\n            {item.label}\n          </Link>\n        );\n      } else {\n        let breadcrumbClass = styles.breadcrumbLink;\n        if (isLast) {\n          breadcrumbClass = styles.breadcrumbCurrent;\n        }\n        content = <span className={breadcrumbClass}>{item.label}</span>;\n      }\n\n      const renderedItem = (\n        <li key={key} className={styles.breadcrumbItem}>\n          {content}\n        </li>\n      );\n\n      if (isLast) {\n        return [renderedItem];\n      }\n\n      return [\n        renderedItem,\n        <li\n          key={`${key}-sep`}\n          className={styles.breadcrumbSeparator}\n          aria-hidden=\"true\"\n        >\n          /\n        </li>,\n      ];\n    });\n\n    return (\n      <nav\n        className={styles.breadcrumbNav}\n        aria-label={t('navigation.breadcrumb')}\n      >\n        <ol className={styles.breadcrumbList}>{items}</ol>\n      </nav>\n    );\n  };\n\n  const renderActions = (): JSX.Element | null => {\n    if (\n      actions == null ||\n      (actions.main == null && (actions.secondary ?? []).length === 0)\n    ) {\n      return null;\n    }\n\n    const secondaryNodes = actions.secondary ?? [];\n\n    let mainActionNode: JSX.Element | null = null;\n    if (actions.main != null) {\n      mainActionNode = (\n        <div className={styles.secondaryAction}>{actions.main}</div>\n      );\n    }\n\n    return (\n      <div className={styles.actionGroup}>\n        {secondaryNodes.map((node, index) => {\n          return (\n            <div key={`secondary-${index}`} className={styles.secondaryAction}>\n              {node}\n            </div>\n          );\n        })}\n        {mainActionNode}\n      </div>\n    );\n  };\n\n  const renderTabs = (): JSX.Element | null => {\n    if (tabs == null || tabs.length === 0) {\n      return null;\n    }\n\n    return (\n      <div className={styles.tabsRow}>\n        {tabs.map((tab) => {\n          const isActive = resolveIsActive(tab, currentPath);\n          let tabState: 'default' | 'active' = 'default';\n          if (isActive) {\n            tabState = 'active';\n          }\n          let tabMode: 'static' | 'link' = 'link';\n          if (tab.href == null) {\n            tabMode = 'static';\n          }\n          const className = styles.tabRecipe({\n            state: tabState,\n            mode: tabMode,\n          });\n          const key = tab.id;\n          let ariaCurrent: 'page' | undefined;\n          if (isActive) {\n            ariaCurrent = 'page';\n          }\n\n          if (tab.href != null) {\n            return (\n              <Link\n                key={key}\n                to={tab.href}\n                className={className}\n                aria-current={ariaCurrent}\n              >\n                {tab.label}\n              </Link>\n            );\n          }\n\n          return (\n            <span key={key} className={className} aria-current={ariaCurrent}>\n              {tab.label}\n            </span>\n          );\n        })}\n      </div>\n    );\n  };\n\n  const handleResizerKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLDivElement>) => {\n      if (isStackedLayout) {\n        return;\n      }\n      if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {\n        event.preventDefault();\n        let delta = 16;\n        if (event.key === 'ArrowRight') {\n          delta = -16;\n        }\n        clampSidePanelWidth(sidePanelWidth + delta);\n        persistSidePanelWidth(sidePanelWidthSnapshotRef.current);\n      }\n    },\n    [clampSidePanelWidth, isStackedLayout, sidePanelWidth],\n  );\n\n  let sidePanelNode: JSX.Element | null = null;\n  if (hasSidePanel) {\n    const sidePanelClasses = [styles.sidePanel, styles.sidePanelSurface];\n    let sidePanelStyle: CSSProperties | undefined;\n    if (!isStackedLayout) {\n      sidePanelClasses.push(styles.sidePanelResizable);\n      sidePanelStyle = {\n        width: `${sidePanelWidth}px`,\n      };\n    }\n    sidePanelNode = (\n      <aside className={cx(...sidePanelClasses)} style={sidePanelStyle}>\n        {sidePanel}\n      </aside>\n    );\n  }\n\n  let resizerNode: JSX.Element | null = null;\n  if (hasSidePanel) {\n    let resizerActive = 'false';\n    if (isResizingPanel) {\n      resizerActive = 'true';\n    }\n    let resizerMin = MIN_SIDE_PANEL_WIDTH;\n    let resizerMax = Math.max(MIN_SIDE_PANEL_WIDTH, sidePanelWidth);\n    const pageElement = pageRef.current;\n    if (pageElement != null) {\n      const { width } = pageElement.getBoundingClientRect();\n      const maxWidth = Math.max(\n        0,\n        Math.min(resolveMaxSidePanelWidth(width), width - MIN_MAIN_WIDTH),\n      );\n      resizerMin = Math.min(MIN_SIDE_PANEL_WIDTH, maxWidth);\n      if (maxWidth <= 0) {\n        resizerMin = 0;\n      }\n      resizerMax = Math.max(resizerMin, maxWidth);\n    }\n    resizerNode = (\n      <div\n        className={cx(\n          styles.sidePanelResizer,\n          styles.sidePanelResizerHiddenOnMobile,\n        )}\n        role=\"separator\"\n        aria-orientation=\"vertical\"\n        aria-label={t('layout.pageShell.resizeSidePanel')}\n        aria-valuemin={Math.round(resizerMin)}\n        aria-valuemax={Math.round(resizerMax)}\n        aria-valuenow={Math.round(sidePanelWidth)}\n        tabIndex={0}\n        data-active={resizerActive}\n        onMouseDown={(event) => {\n          event.preventDefault();\n          startResizing(event.clientX);\n        }}\n        onTouchStart={(event) => {\n          const touch = event.touches[0];\n          if (touch != null) {\n            startResizing(touch.clientX);\n          }\n        }}\n        onKeyDown={handleResizerKeyDown}\n      />\n    );\n  }\n\n  let sidebarContent = sidebar;\n  if (isStackedLayout) {\n    sidebarContent = mobileSidebar ?? sidebar;\n  }\n  const shouldRenderDesktopSidebar = desktopSidebarOpen || isStackedLayout;\n  let resolvedOpenDesktopSidebarLabel = openDesktopSidebarLabel;\n  resolvedOpenDesktopSidebarLabel ??= t('navigation.pageShell.openNavigation');\n\n  return (\n    <div className={styles.shell}>\n      <div\n        className={cx(styles.mobileSidebarBackdrop, {\n          [styles.mobileSidebarBackdropOpen]:\n            isStackedLayout && isMobileSidebarOpen,\n        })}\n        aria-hidden=\"true\"\n        onClick={closeMobileSidebar}\n      />\n      {shouldRenderDesktopSidebar && (\n        <div\n          ref={mobileSidebarRef}\n          className={cx(styles.sidebarColumn, styles.sidebarColumnMobile, {\n            [styles.sidebarColumnMobileOpen]:\n              isStackedLayout && isMobileSidebarOpen,\n          })}\n          aria-hidden={isStackedLayout && !isMobileSidebarOpen}\n          inert={isStackedLayout && !isMobileSidebarOpen}\n        >\n          <button\n            ref={mobileSidebarCloseRef}\n            type=\"button\"\n            className={styles.mobileSidebarClose}\n            onClick={closeMobileSidebar}\n            aria-label={t('navigation.pageShell.closeNavigation')}\n          >\n            <ModalCloseSvg width={18} height={18} aria-hidden=\"true\" />\n          </button>\n          <div className={styles.sidebarInner}>{sidebarContent}</div>\n        </div>\n      )}\n      <div\n        ref={pageRef}\n        className={cx(styles.page, {\n          [styles.pageWithSidePanel]: hasSidePanel,\n          [styles.pageContained]: isContainedScroll,\n        })}\n        aria-hidden={isStackedLayout && isMobileSidebarOpen}\n        inert={isStackedLayout && isMobileSidebarOpen}\n      >\n        <div\n          className={cx(styles.mainColumn, {\n            [styles.mainColumnWithSidePanel]: hasSidePanel,\n            [styles.mainColumnContained]: isContainedScroll,\n          })}\n        >\n          <div className={styles.header}>\n            <div className={styles.headerRow}>\n              <div className={styles.headerLeading}>\n                {!isStackedLayout && !desktopSidebarOpen && (\n                  <button\n                    type=\"button\"\n                    className={styles.desktopSidebarToggle}\n                    onClick={onOpenDesktopSidebar}\n                    aria-label={resolvedOpenDesktopSidebarLabel}\n                    title={resolvedOpenDesktopSidebarLabel}\n                  >\n                    <MenuSvg width={18} height={18} aria-hidden=\"true\" />\n                  </button>\n                )}\n                {isStackedLayout && (\n                  <button\n                    ref={mobileSidebarToggleRef}\n                    type=\"button\"\n                    className={styles.mobileSidebarToggle}\n                    onClick={openMobileSidebar}\n                    aria-expanded={isMobileSidebarOpen}\n                    aria-label={t('navigation.pageShell.openNavigation')}\n                  >\n                    <MenuSvg width={18} height={18} aria-hidden=\"true\" />\n                  </button>\n                )}\n                {renderBreadcrumb()}\n              </div>\n              {renderActions()}\n            </div>\n            {renderTabs()}\n          </div>\n          <div\n            className={cx(\n              styles.content,\n              containedContentClassName,\n              contentClassName,\n            )}\n          >\n            {children}\n          </div>\n        </div>\n        {resizerNode}\n        {sidePanelNode}\n      </div>\n    </div>\n  );\n};\n\nexport const __test = {\n  readStoredSidePanelWidth,\n  resolveMaxSidePanelWidth,\n  resolveIsActive,\n} as const;\n"],"mappings":"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"}
+{"version":3,"file":"PageShell.js","names":[],"sources":["../../../../src/components/layout/PageShell.tsx"],"sourcesContent":["import Link from '@plumile/router/routing/Link.js';\nimport {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type JSX,\n  type ReactNode,\n} from 'react';\n\nimport * as styles from './PageShell.css.js';\nimport { ResizableSplitView } from './ResizableSplitView.js';\nimport { Tabs, type TabItem } from '../../atomic/molecules/tabs/Tabs.js';\nimport { MenuSvg } from '../../icons/MenuSvg.js';\nimport { ModalCloseSvg } from '../../icons/ModalCloseSvg.js';\nimport { cx } from '../../theme/tools.js';\nimport { useUiTranslation } from '../../i18n/useUiTranslation.js';\n\nexport type BreadcrumbItem = {\n  label: ReactNode;\n  href?: string;\n};\n\nexport type PageShellTab = {\n  id: string;\n  label: ReactNode;\n  href?: string;\n  isActive?: boolean;\n};\n\nexport type PageShellActions = {\n  main?: ReactNode;\n  secondary?: ReactNode[];\n};\n\nexport type PageShellContentScrollMode = 'page' | 'contained';\n\nconst DEFAULT_SIDE_PANEL_WIDTH = 520;\nconst MIN_SIDE_PANEL_WIDTH = 360;\nconst MAX_SIDE_PANEL_RATIO = 0.5;\nconst MIN_MAIN_WIDTH = 480;\nconst SPLIT_BREAKPOINT = 1024;\nconst SIDE_PANEL_WIDTH_STORAGE_KEY = 'plumile:page-shell:side-panel-width';\nconst FOCUSABLE_SELECTOR =\n  'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\ntype Props = {\n  sidebar?: ReactNode;\n  mobileSidebar?: ReactNode;\n  desktopSidebarOpen?: boolean;\n  onOpenDesktopSidebar?: () => void;\n  openDesktopSidebarLabel?: string;\n  children: ReactNode;\n  breadcrumb?: BreadcrumbItem[];\n  breadcrumbSlot?: ReactNode;\n  tabs?: PageShellTab[];\n  actions?: PageShellActions;\n  sidePanel?: ReactNode;\n  contentClassName?: string;\n  contentScrollMode?: PageShellContentScrollMode;\n};\n\nconst resolveIsActive = (tab: PageShellTab, pathname?: string): boolean => {\n  if (typeof tab.isActive === 'boolean') {\n    return tab.isActive;\n  }\n\n  if (tab.href != null && pathname != null) {\n    return pathname === tab.href;\n  }\n\n  return false;\n};\n\nexport const PageShell = ({\n  actions,\n  breadcrumb,\n  breadcrumbSlot,\n  children,\n  contentClassName,\n  contentScrollMode = 'page',\n  desktopSidebarOpen = true,\n  mobileSidebar,\n  onOpenDesktopSidebar,\n  openDesktopSidebarLabel,\n  sidebar,\n  sidePanel,\n  tabs,\n}: Props): JSX.Element => {\n  const { t } = useUiTranslation();\n  const hasSidePanel = sidePanel != null;\n  const hasSidebar = sidebar != null || mobileSidebar != null;\n  const isContainedScroll = contentScrollMode === 'contained';\n  let containedContentClassName: string | null = null;\n  if (isContainedScroll) {\n    containedContentClassName = styles.contentContained;\n  }\n  const pageRef = useRef<HTMLDivElement | null>(null);\n  const mobileSidebarRef = useRef<HTMLDivElement | null>(null);\n  const mobileSidebarToggleRef = useRef<HTMLButtonElement | null>(null);\n  const mobileSidebarCloseRef = useRef<HTMLButtonElement | null>(null);\n  const mobileSidebarPreviousFocusRef = useRef<HTMLElement | null>(null);\n  const [isStackedLayout, setIsStackedLayout] = useState(false);\n  const [isMobileSidebarOpen, setIsMobileSidebarOpen] = useState(false);\n\n  const closeMobileSidebar = useCallback(() => {\n    setIsMobileSidebarOpen(false);\n  }, []);\n\n  const openMobileSidebar = useCallback(() => {\n    if (typeof document !== 'undefined') {\n      const { activeElement } = document;\n      if (activeElement instanceof HTMLElement) {\n        mobileSidebarPreviousFocusRef.current = activeElement;\n      }\n    }\n    setIsMobileSidebarOpen(true);\n  }, []);\n\n  useEffect(() => {\n    if (typeof window === 'undefined') {\n      return () => {};\n    }\n    const mediaQuery = window.matchMedia(\n      `(max-width: ${SPLIT_BREAKPOINT - 1}px)`,\n    );\n    const handleMediaChange = () => {\n      setIsStackedLayout(mediaQuery.matches);\n    };\n\n    handleMediaChange();\n    mediaQuery.addEventListener('change', handleMediaChange);\n\n    return () => {\n      mediaQuery.removeEventListener('change', handleMediaChange);\n    };\n  }, []);\n\n  useEffect(() => {\n    if (!isStackedLayout && isMobileSidebarOpen) {\n      closeMobileSidebar();\n    }\n  }, [closeMobileSidebar, isMobileSidebarOpen, isStackedLayout]);\n\n  useEffect(() => {\n    if (!isMobileSidebarOpen) {\n      return () => {};\n    }\n\n    const handleEscape = (event: globalThis.KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        closeMobileSidebar();\n        return;\n      }\n\n      if (event.key !== 'Tab') {\n        return;\n      }\n\n      const sidebarElement = mobileSidebarRef.current;\n      if (sidebarElement == null) {\n        return;\n      }\n\n      const focusableElements = Array.from(\n        sidebarElement.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR),\n      ).filter((element) => {\n        return (\n          element.offsetParent != null || element === document.activeElement\n        );\n      });\n\n      const firstElement = focusableElements[0];\n      const lastElement = focusableElements[focusableElements.length - 1];\n\n      if (firstElement == null || lastElement == null) {\n        event.preventDefault();\n        return;\n      }\n\n      if (event.shiftKey && document.activeElement === firstElement) {\n        event.preventDefault();\n        lastElement.focus();\n        return;\n      }\n\n      if (!event.shiftKey && document.activeElement === lastElement) {\n        event.preventDefault();\n        firstElement.focus();\n      }\n    };\n\n    const fallbackFocusElement = mobileSidebarToggleRef.current;\n    mobileSidebarCloseRef.current?.focus();\n\n    window.addEventListener('keydown', handleEscape);\n    return () => {\n      window.removeEventListener('keydown', handleEscape);\n      const previousFocus = mobileSidebarPreviousFocusRef.current;\n      if (previousFocus != null && document.contains(previousFocus)) {\n        previousFocus.focus();\n      } else {\n        fallbackFocusElement?.focus();\n      }\n      mobileSidebarPreviousFocusRef.current = null;\n    };\n  }, [closeMobileSidebar, isMobileSidebarOpen]);\n\n  const renderBreadcrumb = (): JSX.Element | null => {\n    if (breadcrumbSlot != null) {\n      return <div className={styles.breadcrumbNav}>{breadcrumbSlot}</div>;\n    }\n\n    if (breadcrumb == null || breadcrumb.length === 0) {\n      return null;\n    }\n\n    const items = breadcrumb.flatMap((item, index) => {\n      const isLast = index === breadcrumb.length - 1;\n      const key = `${item.href ?? 'crumb'}-${index}`;\n      let content: JSX.Element;\n      if (item.href != null && !isLast) {\n        content = (\n          <Link to={item.href} className={styles.breadcrumbLink}>\n            {item.label}\n          </Link>\n        );\n      } else {\n        let breadcrumbClass = styles.breadcrumbLink;\n        if (isLast) {\n          breadcrumbClass = styles.breadcrumbCurrent;\n        }\n        content = <span className={breadcrumbClass}>{item.label}</span>;\n      }\n\n      const renderedItem = (\n        <li key={key} className={styles.breadcrumbItem}>\n          {content}\n        </li>\n      );\n\n      if (isLast) {\n        return [renderedItem];\n      }\n\n      return [\n        renderedItem,\n        <li\n          key={`${key}-sep`}\n          className={styles.breadcrumbSeparator}\n          aria-hidden=\"true\"\n        >\n          /\n        </li>,\n      ];\n    });\n\n    return (\n      <nav\n        className={styles.breadcrumbNav}\n        aria-label={t('navigation.breadcrumb')}\n      >\n        <ol className={styles.breadcrumbList}>{items}</ol>\n      </nav>\n    );\n  };\n\n  const renderActions = (): JSX.Element | null => {\n    if (\n      actions == null ||\n      (actions.main == null && (actions.secondary ?? []).length === 0)\n    ) {\n      return null;\n    }\n\n    const secondaryNodes = actions.secondary ?? [];\n\n    let mainActionNode: JSX.Element | null = null;\n    if (actions.main != null) {\n      mainActionNode = (\n        <div className={styles.secondaryAction}>{actions.main}</div>\n      );\n    }\n\n    return (\n      <div className={styles.actionGroup}>\n        {secondaryNodes.map((node, index) => {\n          return (\n            <div key={`secondary-${index}`} className={styles.secondaryAction}>\n              {node}\n            </div>\n          );\n        })}\n        {mainActionNode}\n      </div>\n    );\n  };\n\n  const renderTabs = (): JSX.Element | null => {\n    if (tabs == null || tabs.length === 0) {\n      return null;\n    }\n\n    const tabItems: TabItem[] = tabs.map((tab) => {\n      return {\n        id: tab.id,\n        label: tab.label,\n        to: tab.href,\n        isActive: tab.isActive,\n      };\n    });\n\n    return <Tabs items={tabItems} variant=\"page\" />;\n  };\n\n  let sidebarContent = sidebar;\n  if (isStackedLayout) {\n    sidebarContent = mobileSidebar ?? sidebar;\n  }\n  const shouldRenderDesktopSidebar =\n    hasSidebar && (desktopSidebarOpen || isStackedLayout);\n  let resolvedOpenDesktopSidebarLabel = openDesktopSidebarLabel;\n  resolvedOpenDesktopSidebarLabel ??= t('navigation.pageShell.openNavigation');\n\n  const mainNode = (\n    <div\n      className={cx(styles.mainColumn, {\n        [styles.mainColumnWithSidePanel]: hasSidePanel,\n        [styles.mainColumnContained]: isContainedScroll,\n      })}\n    >\n      <div className={styles.header}>\n        <div className={styles.headerRow}>\n          <div className={styles.headerLeading}>\n            {hasSidebar && !isStackedLayout && !desktopSidebarOpen && (\n              <button\n                type=\"button\"\n                className={styles.desktopSidebarToggle}\n                onClick={onOpenDesktopSidebar}\n                aria-label={resolvedOpenDesktopSidebarLabel}\n                title={resolvedOpenDesktopSidebarLabel}\n              >\n                <MenuSvg width={18} height={18} aria-hidden=\"true\" />\n              </button>\n            )}\n            {hasSidebar && isStackedLayout && (\n              <button\n                ref={mobileSidebarToggleRef}\n                type=\"button\"\n                className={styles.mobileSidebarToggle}\n                onClick={openMobileSidebar}\n                aria-expanded={isMobileSidebarOpen}\n                aria-label={t('navigation.pageShell.openNavigation')}\n              >\n                <MenuSvg width={18} height={18} aria-hidden=\"true\" />\n              </button>\n            )}\n            {renderBreadcrumb()}\n          </div>\n          {renderActions()}\n        </div>\n        {renderTabs()}\n      </div>\n      <div\n        className={cx(\n          styles.content,\n          containedContentClassName,\n          contentClassName,\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  );\n\n  return (\n    <div className={styles.shell}>\n      <div\n        className={cx(styles.mobileSidebarBackdrop, {\n          [styles.mobileSidebarBackdropOpen]:\n            isStackedLayout && isMobileSidebarOpen,\n        })}\n        aria-hidden=\"true\"\n        onClick={closeMobileSidebar}\n      />\n      {shouldRenderDesktopSidebar && (\n        <div\n          ref={mobileSidebarRef}\n          className={cx(styles.sidebarColumn, styles.sidebarColumnMobile, {\n            [styles.sidebarColumnMobileOpen]:\n              isStackedLayout && isMobileSidebarOpen,\n          })}\n          aria-hidden={isStackedLayout && !isMobileSidebarOpen}\n          inert={isStackedLayout && !isMobileSidebarOpen}\n        >\n          <button\n            ref={mobileSidebarCloseRef}\n            type=\"button\"\n            className={styles.mobileSidebarClose}\n            onClick={closeMobileSidebar}\n            aria-label={t('navigation.pageShell.closeNavigation')}\n          >\n            <ModalCloseSvg width={18} height={18} aria-hidden=\"true\" />\n          </button>\n          <div className={styles.sidebarInner}>{sidebarContent}</div>\n        </div>\n      )}\n      <div\n        ref={pageRef}\n        className={cx(styles.page, {\n          [styles.pageContained]: isContainedScroll,\n        })}\n        aria-hidden={isStackedLayout && isMobileSidebarOpen}\n        inert={isStackedLayout && isMobileSidebarOpen}\n      >\n        <ResizableSplitView\n          main={mainNode}\n          sidePanel={sidePanel}\n          className={cx(styles.pageSplitView, {\n            [styles.pageWithSidePanel]: hasSidePanel,\n          })}\n          sidePanelClassName={cx(styles.sidePanel, styles.sidePanelSurface)}\n          defaultSidePanelWidth={DEFAULT_SIDE_PANEL_WIDTH}\n          minSidePanelWidth={MIN_SIDE_PANEL_WIDTH}\n          maxSidePanelRatio={MAX_SIDE_PANEL_RATIO}\n          minMainWidth={MIN_MAIN_WIDTH}\n          stackedBreakpoint={SPLIT_BREAKPOINT}\n          storageKey={SIDE_PANEL_WIDTH_STORAGE_KEY}\n          resizerLabel={t('layout.pageShell.resizeSidePanel')}\n        />\n      </div>\n    </div>\n  );\n};\n\nexport const __test = {\n  resolveIsActive,\n} as const;\n"],"mappings":"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"}

package/lib/esm/components/layout/ResizableSplitView.css.js

@@ -0,0 +1,8 @@
+/* empty css                                   */
+/* empty css                                  */
+//#region src/components/layout/ResizableSplitView.css.ts
+var e = "_1sh6osj1 _1sh6osj0 txvbqbdr8 txvbqbe8 txvbqbfeg txvbqbt9i txvbqb17w0", t = "_1sh6osj2 txvbqbf6i txvbqbffj", n = "_1sh6osj3 txvbqbf65", r = "_1sh6osj5 _1sh6osj4 txvbqbdxd txvbqbt9i", i = "_1sh6osj6 txvbqbdyg txvbqbt9i", a = "_1sh6osj7 txvbqb17w0", o = "_1sh6osj9 _1sh6osj8 txvbqbhh txvbqb1933 txvbqbb txvbqbdyg txvbqbtay txvbqb11js txvbqb17h7";
+//#endregion
+export { r as main, o as resizer, e as root, n as rootSplit, t as rootStacked, i as sidePanel, a as sidePanelStacked };
+
+//# sourceMappingURL=ResizableSplitView.css.js.map