@plumile/ui 0.1.68 → 0.1.69

package/lib/esm/components/data-table/VirtualizedConnectionTable.js

@@ -2,8 +2,8 @@ import { cx as e } from "../../theme/tools.js";
 import { useUiTranslation as t } from "../../i18n/useUiTranslation.js";
 import { body as n, cell as r, container as i, emptyRow as a, header as o, headerCell as s, headerRow as c, hideBelowRecipe as l, primaryCell as u, primaryHeaderCell as d, row as f, rowEven as p, rowOdd as m } from "./DataTable.css.js";
 import { bodyViewport as ee, sentinel as te, singleLineCell as ne, spacer as h } from "./VirtualizedConnectionTable.css.js";
-import { jsx as g, jsxs as _ } from "react/jsx-runtime";
-import { useCallback as v, useEffect as y, useLayoutEffect as b, useMemo as x, useRef as S, useState as re } from "react";
+import { useCallback as g, useEffect as _, useLayoutEffect as v, useMemo as y, useRef as b, useState as re } from "react";
+import { jsx as x, jsxs as S } from "react/jsx-runtime";
 //#region src/components/data-table/VirtualizedConnectionTable.tsx
 var C = "minmax(0, 1fr)", ie = (e, t) => typeof t == "string" && t !== "" ? { gridTemplateColumns: t } : { gridTemplateColumns: `repeat(${e}, ${C})` }, w = (e) => e == null ? null : l({ minVisibleAt: e }), T = (e) => {
 	let t = e;
@@ -14,24 +14,24 @@ var C = "minmax(0, 1fr)", ie = (e, t) => typeof t == "string" && t !== "" ? { gr
 	}
 	return null;
 }, E = (e, t, n) => Math.min(n, Math.max(t, e)), D = ({ columns: l, rows: C, getRowId: D, emptyState: ae, className: oe, gridTemplateColumns: O, kind: se, classes: k, virtualization: A, infiniteScroll: j, hasNextPage: ce = !1, isLoadingMore: le = !1, onLoadMore: M }) => {
-	let { t: ue } = t(), N = se ?? "default", P = S(null), F = S(null), I = S(null), L = S(null), R = S(null), z = S(!1), B = A?.enabled === !0, V = x(() => {
+	let { t: ue } = t(), N = se ?? "default", P = b(null), F = b(null), I = b(null), L = b(null), R = b(null), z = b(!1), B = A?.enabled === !0, V = y(() => {
 		if (!B) return null;
 		let e = A.rowHeightPx;
 		return typeof e == "number" && Number.isFinite(e) && e > 0 ? e : 56;
-	}, [B, A]), H = x(() => {
+	}, [B, A]), H = y(() => {
 		if (!B) return 0;
 		let e = 10, t = A.overscan;
 		return typeof t == "number" && Number.isFinite(t) && (e = t), Math.max(0, e);
-	}, [B, A]), U = j?.thresholdPx ?? 800, W = j?.autoLoad ?? !0, G = j?.enabled === !0, K = G && ce && !le && M != null, q = v(() => {
+	}, [B, A]), U = j?.thresholdPx ?? 800, W = j?.autoLoad ?? !0, G = j?.enabled === !0, K = G && ce && !le && M != null, q = g(() => {
 		M?.();
 	}, [M]), [de, fe] = re(() => ({
 		startIndex: 0,
 		endIndex: Math.min(C.length, 50)
-	})), J = x(() => ie(l.length, O), [l.length, O]), Y = v((t, n, i) => {
+	})), J = y(() => ie(l.length, O), [l.length, O]), Y = g((t, n, i) => {
 		let a = D(t, n), o = [f({ kind: N }), k?.row];
 		n % 2 == 0 ? o.push(p({ kind: N }), k?.rowEven) : o.push(m({ kind: N }), k?.rowOdd);
 		let s = { ...J };
-		return typeof i == "number" && (s.height = i), /* @__PURE__ */ g("div", {
+		return typeof i == "number" && (s.height = i), /* @__PURE__ */ x("div", {
 			role: "row",
 			className: e(...o),
 			style: s,
@@ -41,7 +41,7 @@ var C = "minmax(0, 1fr)", ie = (e, t) => typeof t == "string" && t !== "" ? { gr
 					ne,
 					k?.cell
 				], a = w(n.minVisibleAt);
-				return a != null && i.push(a), n.className != null && i.push(n.className), n.isPrimary && i.push(u, k?.primaryCell), /* @__PURE__ */ g("div", {
+				return a != null && i.push(a), n.className != null && i.push(n.className), n.isPrimary && i.push(u, k?.primaryCell), /* @__PURE__ */ x("div", {
 					role: "cell",
 					className: e(...i),
 					children: n.cell(t)
@@ -54,7 +54,7 @@ var C = "minmax(0, 1fr)", ie = (e, t) => typeof t == "string" && t !== "" ? { gr
 		D,
 		J,
 		N
-	]), X = v(() => {
+	]), X = g(() => {
 		if (!B) return;
 		let e = V;
 		if (e == null) return;
@@ -76,16 +76,16 @@ var C = "minmax(0, 1fr)", ie = (e, t) => typeof t == "string" && t !== "" ? { gr
 		C.length,
 		U,
 		q
-	]), Z = v(() => {
+	]), Z = g(() => {
 		R.current ??= window.requestAnimationFrame(() => {
 			R.current = null, X();
 		});
 	}, [X]);
-	b(() => {
+	v(() => {
 		if (!B) return;
 		let e = P.current;
 		e != null && (L.current = T(e), Z());
-	}, [B, Z]), y(() => {
+	}, [B, Z]), _(() => {
 		if (!B) return;
 		let e = L.current ?? window, t = () => {
 			Z();
@@ -93,7 +93,7 @@ var C = "minmax(0, 1fr)", ie = (e, t) => typeof t == "string" && t !== "" ? { gr
 		return e.addEventListener("scroll", t, { passive: !0 }), window.addEventListener("resize", t), () => {
 			e.removeEventListener("scroll", t), window.removeEventListener("resize", t);
 		};
-	}, [B, Z]), y(() => {
+	}, [B, Z]), _(() => {
 		if (B || !G || !W || !K) return;
 		let e = I.current;
 		if (e == null) return;
@@ -116,21 +116,21 @@ var C = "minmax(0, 1fr)", ie = (e, t) => typeof t == "string" && t !== "" ? { gr
 		B,
 		U,
 		q
-	]), b(() => {
+	]), v(() => {
 		if (B) return;
 		let e = P.current;
 		e != null && (L.current = T(e));
 	}, [B]);
-	let pe = /* @__PURE__ */ g("div", {
+	let pe = /* @__PURE__ */ x("div", {
 		className: e(o({ kind: N }), k?.header),
 		role: "rowgroup",
-		children: /* @__PURE__ */ g("div", {
+		children: /* @__PURE__ */ x("div", {
 			className: e(c, k?.headerRow),
 			role: "row",
 			style: J,
 			children: l.map((t) => {
 				let n = [s({ kind: N }), k?.headerCell], r = w(t.minVisibleAt);
-				return r != null && n.push(r), t.className != null && n.push(t.className), t.isPrimary && n.push(d, k?.primaryHeaderCell), /* @__PURE__ */ g("div", {
+				return r != null && n.push(r), t.className != null && n.push(t.className), t.isPrimary && n.push(d, k?.primaryHeaderCell), /* @__PURE__ */ x("div", {
 					role: "columnheader",
 					className: e(...n),
 					children: t.header
@@ -138,12 +138,12 @@ var C = "minmax(0, 1fr)", ie = (e, t) => typeof t == "string" && t !== "" ? { gr
 			})
 		})
 	}), Q;
-	if (C.length === 0) Q = /* @__PURE__ */ g("div", {
+	if (C.length === 0) Q = /* @__PURE__ */ x("div", {
 		className: e(a, k?.emptyRow),
 		role: "row",
-		children: /* @__PURE__ */ g("div", {
+		children: /* @__PURE__ */ x("div", {
 			role: "cell",
-			children: ae ?? /* @__PURE__ */ g("div", {
+			children: ae ?? /* @__PURE__ */ x("div", {
 				className: e("ysn8461j txvbqb96 txvbqbv8r txvbqbt5x", k?.emptyCell),
 				children: ue("common.table.empty")
 			})
@@ -151,34 +151,34 @@ var C = "minmax(0, 1fr)", ie = (e, t) => typeof t == "string" && t !== "" ? { gr
 	});
 	else if (B && V != null) {
 		let { startIndex: e, endIndex: t } = de, n = e * V, r = (C.length - t) * V, i = C.slice(e, t);
-		Q = /* @__PURE__ */ _("div", {
+		Q = /* @__PURE__ */ S("div", {
 			className: ee,
 			ref: F,
 			children: [
-				/* @__PURE__ */ g("div", {
+				/* @__PURE__ */ x("div", {
 					className: h,
 					style: { height: n }
 				}),
 				i.map((t, n) => Y(t, e + n, V)),
-				/* @__PURE__ */ g("div", {
+				/* @__PURE__ */ x("div", {
 					className: h,
 					style: { height: r }
 				})
 			]
 		});
-	} else Q = /* @__PURE__ */ g("div", {
+	} else Q = /* @__PURE__ */ x("div", {
 		ref: F,
 		children: C.map((e, t) => Y(e, t, null))
 	});
 	let $ = null;
-	return !B && G && W && ($ = /* @__PURE__ */ g("div", {
+	return !B && G && W && ($ = /* @__PURE__ */ x("div", {
 		ref: I,
 		className: te
-	})), /* @__PURE__ */ _("div", {
+	})), /* @__PURE__ */ S("div", {
 		ref: P,
 		className: e(i({ kind: N }), k?.container, oe),
 		role: "table",
-		children: [pe, /* @__PURE__ */ _("div", {
+		children: [pe, /* @__PURE__ */ S("div", {
 			className: e(n({ kind: N }), k?.body),
 			role: "rowgroup",
 			children: [Q, $]

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

@@ -0,0 +1,14 @@
+import { PageShell as e } from "./PageShell.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/layout/AppShell.tsx
+var n = ({ sidebar: n, children: r, breadcrumbSlot: i, actions: a, tabs: o }) => /* @__PURE__ */ t(e, {
+	sidebar: n,
+	breadcrumbSlot: i,
+	actions: a,
+	tabs: o,
+	children: r
+});
+//#endregion
+export { n as AppShell, n as default };
+
+//# sourceMappingURL=AppShell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppShell.js","names":[],"sources":["../../../../src/components/layout/AppShell.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport {\n  PageShell,\n  type PageShellActions,\n  type PageShellTab,\n} from './PageShell.js';\n\nexport type AppShellProps = {\n  sidebar: ReactNode;\n  children: ReactNode;\n  breadcrumbSlot?: ReactNode;\n  actions?: PageShellActions;\n  tabs?: PageShellTab[];\n};\n\nexport const AppShell = ({\n  sidebar,\n  children,\n  breadcrumbSlot,\n  actions,\n  tabs,\n}: AppShellProps): JSX.Element => {\n  return (\n    <PageShell\n      sidebar={sidebar}\n      breadcrumbSlot={breadcrumbSlot}\n      actions={actions}\n      tabs={tabs}\n    >\n      {children}\n    </PageShell>\n  );\n};\n\nexport default AppShell;\n"],"mappings":";;;AAgBA,IAAa,KAAY,EACvB,YACA,aACA,mBACA,YACA,cAGE,kBAAC,GAAD;CACW;CACO;CACP;CACH;CAEL;CACS,CAAA"}

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

@@ -1,14 +1,14 @@
 import { cx as e } from "../../theme/tools.js";
 import { useUiTranslation as t } from "../../i18n/useUiTranslation.js";
-import { actionGroup as n, breadcrumbCurrent as r, breadcrumbItem as i, breadcrumbLink as a, breadcrumbList as o, breadcrumbNav as s, breadcrumbSeparator as c, content as l, header as ee, headerRow as te, mainColumn as ne, mainColumnWithSidePanel as re, mobileSidebarBackdrop as ie, mobileSidebarBackdropOpen as ae, mobileSidebarClose as oe, page as u, pageWithSidePanel as d, secondaryAction as f, shell as p, sidePanel as se, sidePanelResizer as ce, sidePanelResizerHiddenOnMobile as le, sidePanelSurface as ue, sidebarColumn as de, sidebarColumnMobile as fe, sidebarColumnMobileOpen as pe, sidebarInner as m, tabRecipe as h, tabsRow as g } from "./PageShell.css.js";
-import { jsx as _, jsxs as v } from "react/jsx-runtime";
-import { useCallback as y, useEffect as b, useRef as x, useState as S } from "react";
+import { actionGroup as n, breadcrumbCurrent as r, breadcrumbItem as i, breadcrumbLink as a, breadcrumbList as o, breadcrumbNav as s, breadcrumbSeparator as c, content as l, header as ee, headerRow as te, mainColumn as ne, mainColumnWithSidePanel as re, mobileSidebarBackdrop as u, mobileSidebarBackdropOpen as ie, mobileSidebarClose as d, page as f, pageWithSidePanel as p, secondaryAction as m, shell as ae, sidePanel as oe, sidePanelResizer as se, sidePanelResizerHiddenOnMobile as h, sidePanelSurface as g, sidebarColumn as ce, sidebarColumnMobile as le, sidebarColumnMobileOpen as ue, sidebarInner as de, tabRecipe as fe, tabsRow as pe } from "./PageShell.css.js";
+import { useCallback as _, useEffect as v, useRef as y, useState as b } from "react";
+import { jsx as x, jsxs as S } from "react/jsx-runtime";
 import { Link as C } from "@plumile/router";
 //#region src/components/layout/PageShell.tsx
-var me = 520, w = 360, T = .5, E = 480, he = 1024, D = "kronex:initiative:chatWidth", O = () => {
+var w = 520, T = 360, E = .5, D = 480, me = 1024, O = "plumile:page-shell:side-panel-width", he = () => {
 	if (typeof window > "u") return null;
 	try {
-		let e = window.localStorage.getItem(D);
+		let e = window.localStorage.getItem(O);
 		if (e == null) return null;
 		let t = Number(e);
 		return !Number.isFinite(t) || t <= 0 ? null : t;
@@ -17,20 +17,20 @@ var me = 520, w = 360, T = .5, E = 480, he = 1024, D = "kronex:initiative:chatWi
 	}
 }, k = (e) => {
 	if (!(typeof window > "u")) try {
-		window.localStorage.setItem(D, String(e));
+		window.localStorage.setItem(O, String(e));
 	} catch {}
 }, A = (e) => {
 	let t = e;
-	return typeof window < "u" && (t = window.innerWidth), t * T;
-}, j = (e, t) => typeof e.isActive == "boolean" ? e.isActive : e.href != null && t != null ? t === e.href : !1, M = ({ actions: T, breadcrumb: D, breadcrumbSlot: M, children: N, contentClassName: P, sidebar: F, sidePanel: I, tabs: L }) => {
-	let { t: R } = t(), z = I != null, B = x(null), V = x(null), [H, U] = S(() => O() ?? me), W = x(H), [ge, G] = S(!1), [K, _e] = S(!1), [q, J] = S(!1), Y = y((e) => {
+	return typeof window < "u" && (t = window.innerWidth), t * E;
+}, j = (e, t) => typeof e.isActive == "boolean" ? e.isActive : e.href != null && t != null ? t === e.href : !1, M = ({ actions: E, breadcrumb: O, breadcrumbSlot: M, children: N, contentClassName: P, sidebar: F, sidePanel: I, tabs: L }) => {
+	let { t: R } = t(), z = I != null, B = y(null), V = y(null), [H, U] = b(() => he() ?? w), W = y(H), [ge, G] = b(!1), [K, _e] = b(!1), [q, J] = b(!1), Y = _((e) => {
 		let t = B.current;
 		if (t == null) return;
-		let { width: n } = t.getBoundingClientRect(), r = Math.max(0, Math.min(A(n), n - E)), i = Math.min(w, r);
+		let { width: n } = t.getBoundingClientRect(), r = Math.max(0, Math.min(A(n), n - D)), i = Math.min(T, r);
 		r <= 0 && (i = 0);
 		let a = Math.max(i, r), o = Math.max(i, Math.min(e, a));
 		W.current = o, U(o);
-	}, []), X = y((e) => {
+	}, []), X = _((e) => {
 		if (typeof window > "u" || !z || K) return;
 		let t = B.current;
 		if (t == null) return;
@@ -43,7 +43,7 @@ var me = 520, w = 360, T = .5, E = 480, he = 1024, D = "kronex:initiative:chatWi
 				if (e == null) return;
 				i = e.clientX;
 			} else i = t.clientX;
-			let a = r + (e - i), o = Math.max(0, Math.min(A(n.width), n.width - E)), s = Math.min(w, o);
+			let a = r + (e - i), o = Math.max(0, Math.min(A(n.width), n.width - D)), s = Math.min(T, o);
 			o <= 0 && (s = 0);
 			let c = Math.max(s, o), l = Math.max(s, Math.min(a, c));
 			W.current = l, U(l);
@@ -61,25 +61,25 @@ var me = 520, w = 360, T = .5, E = 480, he = 1024, D = "kronex:initiative:chatWi
 		K,
 		H
 	]);
-	b(() => {
+	v(() => {
 		W.current = H;
-	}, [H]), b(() => {
+	}, [H]), v(() => {
 		if (typeof window > "u") return () => {};
-		let e = window.matchMedia(`(max-width: ${he - 1}px)`), t = () => {
+		let e = window.matchMedia(`(max-width: ${me - 1}px)`), t = () => {
 			_e(e.matches);
 		};
 		return t(), e.addEventListener("change", t), () => {
 			e.removeEventListener("change", t);
 		};
-	}, []), b(() => {
+	}, []), v(() => {
 		z && Y(H);
 	}, [
 		z,
 		H,
 		Y
-	]), b(() => {
+	]), v(() => {
 		!K && q && J(!1);
-	}, [q, K]), b(() => {
+	}, [q, K]), v(() => {
 		if (!q) return () => {};
 		let e = (e) => {
 			e.key === "Escape" && J(!1);
@@ -87,85 +87,85 @@ var me = 520, w = 360, T = .5, E = 480, he = 1024, D = "kronex:initiative:chatWi
 		return window.addEventListener("keydown", e), () => {
 			window.removeEventListener("keydown", e);
 		};
-	}, [q]), b(() => () => {
+	}, [q]), v(() => () => {
 		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 Z;
 	typeof window < "u" && (Z = window.location.pathname);
 	let ve = () => {
-		if (M != null) return /* @__PURE__ */ _("div", {
+		if (M != null) return /* @__PURE__ */ x("div", {
 			className: s,
 			children: M
 		});
-		if (D == null || D.length === 0) return null;
-		let e = D.flatMap((e, t) => {
-			let n = t === D.length - 1, o = `${e.href ?? "crumb"}-${t}`, s;
-			if (e.href != null && !n) s = /* @__PURE__ */ _(C, {
+		if (O == null || O.length === 0) return null;
+		let e = O.flatMap((e, t) => {
+			let n = t === O.length - 1, o = `${e.href ?? "crumb"}-${t}`, s;
+			if (e.href != null && !n) s = /* @__PURE__ */ x(C, {
 				to: e.href,
 				className: a,
 				children: e.label
 			});
 			else {
 				let t = a;
-				n && (t = r), s = /* @__PURE__ */ _("span", {
+				n && (t = r), s = /* @__PURE__ */ x("span", {
 					className: t,
 					children: e.label
 				});
 			}
-			let l = /* @__PURE__ */ _("li", {
+			let l = /* @__PURE__ */ x("li", {
 				className: i,
 				children: s
 			}, o);
-			return n ? [l] : [l, /* @__PURE__ */ _("li", {
+			return n ? [l] : [l, /* @__PURE__ */ x("li", {
 				className: c,
 				"aria-hidden": "true",
 				children: "/"
 			}, `${o}-sep`)];
 		});
-		return /* @__PURE__ */ _("nav", {
+		return /* @__PURE__ */ x("nav", {
 			className: s,
 			"aria-label": "Breadcrumb",
-			children: /* @__PURE__ */ _("ol", {
+			children: /* @__PURE__ */ x("ol", {
 				className: o,
 				children: e
 			})
 		});
 	}, ye = () => {
-		if (T == null || T.main == null && (T.secondary ?? []).length === 0) return null;
-		let e = T.secondary ?? [], t = null;
-		return T.main != null && (t = /* @__PURE__ */ _("div", {
-			className: f,
-			children: T.main
-		})), /* @__PURE__ */ v("div", {
+		if (E == null || E.main == null && (E.secondary ?? []).length === 0) return null;
+		let e = E.secondary ?? [], t = null;
+		return E.main != null && (t = /* @__PURE__ */ x("div", {
+			className: m,
+			children: E.main
+		})), /* @__PURE__ */ S("div", {
 			className: n,
-			children: [e.map((e, t) => /* @__PURE__ */ _("div", {
-				className: f,
+			children: [e.map((e, t) => /* @__PURE__ */ x("div", {
+				className: m,
 				children: e
 			}, `secondary-${t}`)), t]
 		});
-	}, be = () => L == null || L.length === 0 ? null : /* @__PURE__ */ _("div", {
-		className: g,
+	}, be = () => L == null || L.length === 0 ? null : /* @__PURE__ */ x("div", {
+		className: pe,
 		children: L.map((e) => {
 			let t = j(e, Z), n = "default";
 			t && (n = "active");
 			let r = "link";
 			e.href ?? (r = "static");
-			let i = h({
+			let i = fe({
 				state: n,
 				mode: r
 			}), a = e.id;
-			return e.href == null ? /* @__PURE__ */ _("span", {
+			return e.href == null ? /* @__PURE__ */ x("span", {
 				className: i,
 				"aria-current": t,
 				children: e.label
-			}, a) : /* @__PURE__ */ _(C, {
+			}, a) : /* @__PURE__ */ x(C, {
 				to: e.href,
 				className: i,
 				children: e.label
 			}, a);
 		})
-	}), xe = y((e) => {
+	}), xe = _((e) => {
 		if (!K && (e.key === "ArrowLeft" || e.key === "ArrowRight")) {
 			e.preventDefault();
 			let t = 16;
@@ -180,10 +180,10 @@ var me = 520, w = 360, T = .5, E = 480, he = 1024, D = "kronex:initiative:chatWi
 		let t;
 		K || (t = {
 			width: `${H}px`,
-			minWidth: `${w}px`,
+			minWidth: `${T}px`,
 			maxWidth: "50vw"
-		}), Q = /* @__PURE__ */ _("aside", {
-			className: e(se, ue),
+		}), Q = /* @__PURE__ */ x("aside", {
+			className: e(oe, g),
 			style: t,
 			children: I
 		});
@@ -191,8 +191,8 @@ var me = 520, w = 360, T = .5, E = 480, he = 1024, D = "kronex:initiative:chatWi
 	let $ = null;
 	if (z) {
 		let t = "false";
-		ge && (t = "true"), $ = /* @__PURE__ */ _("div", {
-			className: e(ce, le),
+		ge && (t = "true"), $ = /* @__PURE__ */ x("div", {
+			className: e(se, h),
 			role: "separator",
 			"aria-orientation": "vertical",
 			"aria-label": "Resize side panel",
@@ -208,45 +208,45 @@ var me = 520, w = 360, T = .5, E = 480, he = 1024, D = "kronex:initiative:chatWi
 			onKeyDown: xe
 		});
 	}
-	return /* @__PURE__ */ v("div", {
-		className: p,
+	return /* @__PURE__ */ S("div", {
+		className: ae,
 		children: [
-			/* @__PURE__ */ _("div", {
-				className: e(ie, { [ae]: K && q }),
+			/* @__PURE__ */ x("div", {
+				className: e(u, { [ie]: K && q }),
 				"aria-hidden": "true",
 				onClick: () => {
 					J(!1);
 				}
 			}),
-			/* @__PURE__ */ v("div", {
-				className: e(de, fe, { [pe]: K && q }),
+			/* @__PURE__ */ S("div", {
+				className: e(ce, le, { [ue]: K && q }),
 				"aria-hidden": K && !q,
 				inert: K && !q,
-				children: [/* @__PURE__ */ _("button", {
+				children: [/* @__PURE__ */ x("button", {
 					type: "button",
-					className: oe,
+					className: d,
 					onClick: () => {
 						J(!1);
 					},
 					"aria-label": R("navigation.pageShell.closeNavigation"),
 					children: R("navigation.pageShell.close")
-				}), /* @__PURE__ */ _("div", {
-					className: m,
+				}), /* @__PURE__ */ x("div", {
+					className: de,
 					children: F
 				})]
 			}),
-			/* @__PURE__ */ v("div", {
+			/* @__PURE__ */ S("div", {
 				ref: B,
-				className: e(u, { [d]: z }),
+				className: e(f, { [p]: z }),
 				children: [
-					/* @__PURE__ */ v("div", {
+					/* @__PURE__ */ S("div", {
 						className: e(ne, { [re]: z }),
-						children: [/* @__PURE__ */ v("div", {
+						children: [/* @__PURE__ */ S("div", {
 							className: ee,
-							children: [/* @__PURE__ */ v("div", {
+							children: [/* @__PURE__ */ S("div", {
 								className: te,
 								children: [
-									K && /* @__PURE__ */ _("button", {
+									K && /* @__PURE__ */ x("button", {
 										type: "button",
 										className: "_1kley2da _1kley2d9 txvbqbnv6 txvbqboif txvbqbp5f txvbqblx6 txvbqb9hx txvbqbco txvbqbdnx txvbqb8x txvbqbamo txvbqb1rf txvbqb1qf txvbqb1co txvbqbwf txvbqbv2r txvbqbv8p txvbqbv",
 										onClick: () => {
@@ -260,7 +260,7 @@ var me = 520, w = 360, T = .5, E = 480, he = 1024, D = "kronex:initiative:chatWi
 									ye()
 								]
 							}), be()]
-						}), /* @__PURE__ */ _("div", {
+						}), /* @__PURE__ */ x("div", {
 							className: e(l, P),
 							children: N
 						})]

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';\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 { 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\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 = 'kronex:initiative:chatWidth';\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  children: ReactNode;\n  breadcrumb?: BreadcrumbItem[];\n  breadcrumbSlot?: ReactNode;\n  tabs?: PageShellTab[];\n  actions?: PageShellActions;\n  sidePanel?: ReactNode;\n  contentClassName?: string;\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  sidebar,\n  sidePanel,\n  tabs,\n}: Props): JSX.Element => {\n  const { t } = useUiTranslation();\n  const hasSidePanel = sidePanel != null;\n  const pageRef = useRef<HTMLDivElement | 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 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      setIsMobileSidebarOpen(false);\n    }\n  }, [isMobileSidebarOpen, isStackedLayout]);\n\n  useEffect(() => {\n    if (!isMobileSidebarOpen) {\n      return () => {};\n    }\n\n    const handleEscape = (event: globalThis.KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        setIsMobileSidebarOpen(false);\n      }\n    };\n\n    window.addEventListener('keydown', handleEscape);\n    return () => {\n      window.removeEventListener('keydown', handleEscape);\n    };\n  }, [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 className={styles.breadcrumbNav} aria-label=\"Breadcrumb\">\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\n          if (tab.href != null) {\n            return (\n              <Link key={key} to={tab.href} className={className}>\n                {tab.label}\n              </Link>\n            );\n          }\n\n          return (\n            <span key={key} className={className} aria-current={isActive}>\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    let sidePanelStyle: CSSProperties | undefined;\n    if (!isStackedLayout) {\n      sidePanelStyle = {\n        width: `${sidePanelWidth}px`,\n        minWidth: `${MIN_SIDE_PANEL_WIDTH}px`,\n        maxWidth: '50vw',\n      };\n    }\n    sidePanelNode = (\n      <aside\n        className={cx(styles.sidePanel, styles.sidePanelSurface)}\n        style={sidePanelStyle}\n      >\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    resizerNode = (\n      <div\n        className={cx(\n          styles.sidePanelResizer,\n          styles.sidePanelResizerHiddenOnMobile,\n        )}\n        role=\"separator\"\n        aria-orientation=\"vertical\"\n        aria-label=\"Resize side panel\"\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  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={() => {\n          setIsMobileSidebarOpen(false);\n        }}\n      />\n      <div\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          type=\"button\"\n          className={styles.mobileSidebarClose}\n          onClick={() => {\n            setIsMobileSidebarOpen(false);\n          }}\n          aria-label={t('navigation.pageShell.closeNavigation')}\n        >\n          {t('navigation.pageShell.close')}\n        </button>\n        <div className={styles.sidebarInner}>{sidebar}</div>\n      </div>\n      <div\n        ref={pageRef}\n        className={cx(styles.page, {\n          [styles.pageWithSidePanel]: hasSidePanel,\n        })}\n      >\n        <div\n          className={cx(styles.mainColumn, {\n            [styles.mainColumnWithSidePanel]: hasSidePanel,\n          })}\n        >\n          <div className={styles.header}>\n            <div className={styles.headerRow}>\n              {isStackedLayout && (\n                <button\n                  type=\"button\"\n                  className={styles.mobileSidebarToggle}\n                  onClick={() => {\n                    setIsMobileSidebarOpen(true);\n                  }}\n                  aria-expanded={isMobileSidebarOpen}\n                  aria-label={t('navigation.pageShell.openNavigation')}\n                >\n                  {t('navigation.pageShell.menu')}\n                </button>\n              )}\n              {renderBreadcrumb()}\n              {renderActions()}\n            </div>\n            {renderTabs()}\n          </div>\n          <div className={cx(styles.content, contentClassName)}>{children}</div>\n        </div>\n        {resizerNode}\n        {sidePanelNode}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"PageShell.js","names":[],"sources":["../../../../src/components/layout/PageShell.tsx"],"sourcesContent":["import { Link } from '@plumile/router';\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 { 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\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';\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  children: ReactNode;\n  breadcrumb?: BreadcrumbItem[];\n  breadcrumbSlot?: ReactNode;\n  tabs?: PageShellTab[];\n  actions?: PageShellActions;\n  sidePanel?: ReactNode;\n  contentClassName?: string;\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  sidebar,\n  sidePanel,\n  tabs,\n}: Props): JSX.Element => {\n  const { t } = useUiTranslation();\n  const hasSidePanel = sidePanel != null;\n  const pageRef = useRef<HTMLDivElement | 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 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      setIsMobileSidebarOpen(false);\n    }\n  }, [isMobileSidebarOpen, isStackedLayout]);\n\n  useEffect(() => {\n    if (!isMobileSidebarOpen) {\n      return () => {};\n    }\n\n    const handleEscape = (event: globalThis.KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        setIsMobileSidebarOpen(false);\n      }\n    };\n\n    window.addEventListener('keydown', handleEscape);\n    return () => {\n      window.removeEventListener('keydown', handleEscape);\n    };\n  }, [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 className={styles.breadcrumbNav} aria-label=\"Breadcrumb\">\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\n          if (tab.href != null) {\n            return (\n              <Link key={key} to={tab.href} className={className}>\n                {tab.label}\n              </Link>\n            );\n          }\n\n          return (\n            <span key={key} className={className} aria-current={isActive}>\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    let sidePanelStyle: CSSProperties | undefined;\n    if (!isStackedLayout) {\n      sidePanelStyle = {\n        width: `${sidePanelWidth}px`,\n        minWidth: `${MIN_SIDE_PANEL_WIDTH}px`,\n        maxWidth: '50vw',\n      };\n    }\n    sidePanelNode = (\n      <aside\n        className={cx(styles.sidePanel, styles.sidePanelSurface)}\n        style={sidePanelStyle}\n      >\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    resizerNode = (\n      <div\n        className={cx(\n          styles.sidePanelResizer,\n          styles.sidePanelResizerHiddenOnMobile,\n        )}\n        role=\"separator\"\n        aria-orientation=\"vertical\"\n        aria-label=\"Resize side panel\"\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  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={() => {\n          setIsMobileSidebarOpen(false);\n        }}\n      />\n      <div\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          type=\"button\"\n          className={styles.mobileSidebarClose}\n          onClick={() => {\n            setIsMobileSidebarOpen(false);\n          }}\n          aria-label={t('navigation.pageShell.closeNavigation')}\n        >\n          {t('navigation.pageShell.close')}\n        </button>\n        <div className={styles.sidebarInner}>{sidebar}</div>\n      </div>\n      <div\n        ref={pageRef}\n        className={cx(styles.page, {\n          [styles.pageWithSidePanel]: hasSidePanel,\n        })}\n      >\n        <div\n          className={cx(styles.mainColumn, {\n            [styles.mainColumnWithSidePanel]: hasSidePanel,\n          })}\n        >\n          <div className={styles.header}>\n            <div className={styles.headerRow}>\n              {isStackedLayout && (\n                <button\n                  type=\"button\"\n                  className={styles.mobileSidebarToggle}\n                  onClick={() => {\n                    setIsMobileSidebarOpen(true);\n                  }}\n                  aria-expanded={isMobileSidebarOpen}\n                  aria-label={t('navigation.pageShell.openNavigation')}\n                >\n                  {t('navigation.pageShell.menu')}\n                </button>\n              )}\n              {renderBreadcrumb()}\n              {renderActions()}\n            </div>\n            {renderTabs()}\n          </div>\n          <div className={cx(styles.content, contentClassName)}>{children}</div>\n        </div>\n        {resizerNode}\n        {sidePanelNode}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,8 @@
+/* empty css                                   */
+/* empty css                              */
+//#region src/components/layout/SettingsLayout.css.ts
+var e = "j42upe0 txvbqb9ix txvbqbaoo txvbqblax txvbqbbxf txvbqbbwr", t = "j42upe1 txvbqb1ro txvbqbv2z txvbqb1co txvbqb1qf txvbqbwf txvbqbl6f", n = "j42upe2 txvbqb1ro txvbqbv2z txvbqb1co txvbqb1qf txvbqbwf txvbqbl6f";
+//#endregion
+export { e as container, n as content, t as sidebar };
+
+//# sourceMappingURL=SettingsLayout.css.js.map

package/lib/esm/components/layout/SettingsLayout.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsLayout.css.js","names":[],"sources":["../../../../src/components/layout/SettingsLayout.css.ts"],"sourcesContent":["import { sprinkles } from '../../theme/sprinkles.css.js';\n\nexport const container = sprinkles({\n  display: 'grid',\n  gap: 4,\n  padding: 6,\n  gridTemplateColumns: {\n    base: 'settingsSplit',\n    lg: 'detailSingle',\n  },\n});\n\nexport const sidebar = sprinkles({\n  borderRadius: 'lg',\n  backgroundColor: 'background',\n  borderWidth: 'default',\n  borderStyle: 'solid',\n  borderColor: 'border',\n  overflow: 'hidden',\n});\n\nexport const content = sprinkles({\n  borderRadius: 'lg',\n  backgroundColor: 'background',\n  borderWidth: 'default',\n  borderStyle: 'solid',\n  borderColor: 'border',\n  overflow: 'hidden',\n});\n"],"mappings":""}

package/lib/esm/{backoffice/templates/settings_template/SettingsTemplate.js → components/layout/SettingsLayout.js}

@@ -1,7 +1,7 @@
-import { cx as e } from "../../../theme/tools.js";
-import { container as t, content as n, sidebar as r } from "./settingsTemplate.css.js";
+import { cx as e } from "../../theme/tools.js";
+import { container as t, content as n, sidebar as r } from "./SettingsLayout.css.js";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
-//#region src/backoffice/templates/settings_template/SettingsTemplate.tsx
+//#region src/components/layout/SettingsLayout.tsx
 var o = ({ nav: o, children: s, className: c, navClassName: l, contentClassName: u }) => /* @__PURE__ */ a("div", {
 	className: e(t, c),
 	children: [/* @__PURE__ */ i("aside", {
@@ -13,6 +13,6 @@ var o = ({ nav: o, children: s, className: c, navClassName: l, contentClassName:
 	})]
 });
 //#endregion
-export { o as SettingsTemplate, o as default };
+export { o as SettingsLayout, o as default };
 
-//# sourceMappingURL=SettingsTemplate.js.map
+//# sourceMappingURL=SettingsLayout.js.map