@plumile/ui 0.1.68 → 0.1.70

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsLayout.js","names":[],"sources":["../../../../src/components/layout/SettingsLayout.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport { cx } from '../../theme/tools.js';\nimport * as styles from './SettingsLayout.css.js';\n\nexport type SettingsLayoutProps = {\n  nav: ReactNode;\n  children: ReactNode;\n  className?: string;\n  navClassName?: string;\n  contentClassName?: string;\n};\n\nexport const SettingsLayout = ({\n  nav,\n  children,\n  className,\n  navClassName,\n  contentClassName,\n}: SettingsLayoutProps): JSX.Element => {\n  return (\n    <div className={cx(styles.container, className)}>\n      <aside className={cx(styles.sidebar, navClassName)}>{nav}</aside>\n      <section className={cx(styles.content, contentClassName)}>\n        {children}\n      </section>\n    </div>\n  );\n};\n\nexport default SettingsLayout;\n"],"mappings":";;;;AAaA,IAAa,KAAkB,EAC7B,QACA,aACA,cACA,iBACA,0BAGE,kBAAC,OAAD;CAAK,WAAW,EAAG,GAAkB,EAAU;WAA/C,CACE,kBAAC,SAAD;EAAO,WAAW,EAAG,GAAgB,EAAa;YAAG;EAAY,CAAA,EACjE,kBAAC,WAAD;EAAS,WAAW,EAAG,GAAgB,EAAiB;EACrD;EACO,CAAA,CACN"}

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

@@ -0,0 +1,8 @@
+/* empty css                                   */
+/* empty css                               */
+//#region src/components/layout/SplitViewLayout.css.ts
+var e = "_1dcntij0 txvbqb9ix txvbqbaoo txvbqblax txvbqbbxo txvbqbbwr", t = "_1dcntij1 txvbqb1ro txvbqbv2z txvbqb1co txvbqb1qf txvbqbwf txvbqbl6f";
+//#endregion
+export { e as container, t as panel };
+
+//# sourceMappingURL=SplitViewLayout.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SplitViewLayout.css.js","names":[],"sources":["../../../../src/components/layout/SplitViewLayout.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: 'splitViewSplit',\n    lg: 'detailSingle',\n  },\n});\n\nexport const panel = 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/split_view_template/SplitViewTemplate.js → components/layout/SplitViewLayout.js}

@@ -1,7 +1,7 @@
-import { cx as e } from "../../../theme/tools.js";
-import { container as t, panel as n } from "./splitViewTemplate.css.js";
+import { cx as e } from "../../theme/tools.js";
+import { container as t, panel as n } from "./SplitViewLayout.css.js";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
-//#region src/backoffice/templates/split_view_template/SplitViewTemplate.tsx
+//#region src/components/layout/SplitViewLayout.tsx
 var a = ({ list: a, detail: o, className: s, listClassName: c, detailClassName: l }) => /* @__PURE__ */ i("div", {
 	className: e(t, s),
 	children: [/* @__PURE__ */ r("div", {
@@ -13,6 +13,6 @@ var a = ({ list: a, detail: o, className: s, listClassName: c, detailClassName:
 	})]
 });
 //#endregion
-export { a as SplitViewTemplate, a as default };
+export { a as SplitViewLayout, a as default };
 
-//# sourceMappingURL=SplitViewTemplate.js.map
+//# sourceMappingURL=SplitViewLayout.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SplitViewLayout.js","names":[],"sources":["../../../../src/components/layout/SplitViewLayout.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport { cx } from '../../theme/tools.js';\nimport * as styles from './SplitViewLayout.css.js';\n\nexport type SplitViewLayoutProps = {\n  list: ReactNode;\n  detail: ReactNode;\n  className?: string;\n  listClassName?: string;\n  detailClassName?: string;\n};\n\nexport const SplitViewLayout = ({\n  list,\n  detail,\n  className,\n  listClassName,\n  detailClassName,\n}: SplitViewLayoutProps): JSX.Element => {\n  return (\n    <div className={cx(styles.container, className)}>\n      <div className={cx(styles.panel, listClassName)}>{list}</div>\n      <div className={cx(styles.panel, detailClassName)}>{detail}</div>\n    </div>\n  );\n};\n\nexport default SplitViewLayout;\n"],"mappings":";;;;AAaA,IAAa,KAAmB,EAC9B,SACA,WACA,cACA,kBACA,yBAGE,kBAAC,OAAD;CAAK,WAAW,EAAG,GAAkB,EAAU;WAA/C,CACE,kBAAC,OAAD;EAAK,WAAW,EAAG,GAAc,EAAc;YAAG;EAAW,CAAA,EAC7D,kBAAC,OAAD;EAAK,WAAW,EAAG,GAAc,EAAgB;YAAG;EAAa,CAAA,CAC7D"}

package/lib/esm/components/select/SimpleSelect.js

@@ -2,12 +2,12 @@ import { cx as e } from "../../theme/tools.js";
 import { useUiTranslation as t } from "../../i18n/useUiTranslation.js";
 import { ChevronDownSvg as n } from "../../icons/ChevronDownSvg.js";
 import { actionsContainer as r, container as i, label as a, menu as o, menuOpen as s, menuSeparator as c, optionButton as l, optionDescription as u, optionSelected as d, trigger as f, triggerIcon as ee, triggerIconBrand as te, triggerIconOpen as ne, triggerOpen as re, valueText as ie } from "./SimpleSelect.css.js";
-import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
-import { useCallback as g, useEffect as _, useId as v, useMemo as y, useRef as b, useState as x } from "react";
+import { useCallback as p, useEffect as m, useId as h, useMemo as g, useRef as _, useState as v } from "react";
+import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
 //#region src/components/select/SimpleSelect.tsx
 var S = ({ actionsSlot: S, className: C, isDisabled: w = !1, label: T, onChange: ae, options: E, placeholder: oe, value: D, variant: O = "default" }) => {
-	let { t: k } = t(), [A, j] = x(!1), M = oe ?? k("common.select.placeholder"), [N, P] = x(-1), F = b(null), I = b(null), L = b(/* @__PURE__ */ new Map()), R = v(), z = y(() => E.find((e) => e.value === D) ?? null, [E, D]);
-	_(() => {
+	let { t: k } = t(), [A, j] = v(!1), M = oe ?? k("common.select.placeholder"), [N, P] = v(-1), F = _(null), I = _(null), L = _(/* @__PURE__ */ new Map()), R = h(), z = g(() => E.find((e) => e.value === D) ?? null, [E, D]);
+	m(() => {
 		if (!A) return;
 		let e = E.findIndex((e) => e.value === D), t = 0;
 		e >= 0 && (t = e), P(t);
@@ -15,7 +15,7 @@ var S = ({ actionsSlot: S, className: C, isDisabled: w = !1, label: T, onChange:
 		A,
 		E,
 		D
-	]), _(() => {
+	]), m(() => {
 		if (!A || N < 0 || N >= E.length) return;
 		let e = E[N];
 		e != null && L.current.get(e.id)?.focus();
@@ -23,7 +23,7 @@ var S = ({ actionsSlot: S, className: C, isDisabled: w = !1, label: T, onChange:
 		N,
 		A,
 		E
-	]), _(() => {
+	]), m(() => {
 		if (!A) return () => {};
 		let e = (e) => {
 			F.current?.contains(e.target) || j(!1);
@@ -33,10 +33,10 @@ var S = ({ actionsSlot: S, className: C, isDisabled: w = !1, label: T, onChange:
 		return document.addEventListener("mousedown", e), window.addEventListener("keydown", t), () => {
 			document.removeEventListener("mousedown", e), window.removeEventListener("keydown", t);
 		};
-	}, [A]), _(() => {
+	}, [A]), m(() => {
 		L.current.clear();
 	}, [E]);
-	let B = g(() => {
+	let B = p(() => {
 		j(!1), requestAnimationFrame(() => {
 			I.current?.focus();
 		});
@@ -88,12 +88,12 @@ var S = ({ actionsSlot: S, className: C, isDisabled: w = !1, label: T, onChange:
 		let r = t.value === D, i = e(l, { [d]: r }), a = -1;
 		N === n && (a = 0);
 		let o = null;
-		return t.description != null && t.description !== "" && (o = /* @__PURE__ */ m("span", {
+		return t.description != null && t.description !== "" && (o = /* @__PURE__ */ b("span", {
 			className: u,
 			children: t.description
-		})), /* @__PURE__ */ m("li", {
+		})), /* @__PURE__ */ b("li", {
 			role: "presentation",
-			children: /* @__PURE__ */ h("button", {
+			children: /* @__PURE__ */ x("button", {
 				ref: K(t.id),
 				type: "button",
 				role: "option",
@@ -106,13 +106,13 @@ var S = ({ actionsSlot: S, className: C, isDisabled: w = !1, label: T, onChange:
 				onMouseEnter: () => {
 					P(n);
 				},
-				children: [/* @__PURE__ */ m("span", { children: t.label }), o]
+				children: [/* @__PURE__ */ b("span", { children: t.label }), o]
 			})
 		}, t.id);
 	}), J;
 	N >= 0 && N < E.length && (J = E[N]?.id);
 	let Y = null;
-	T != null && (Y = /* @__PURE__ */ m("span", {
+	T != null && (Y = /* @__PURE__ */ b("span", {
 		id: q,
 		className: a,
 		children: T
@@ -120,21 +120,21 @@ var S = ({ actionsSlot: S, className: C, isDisabled: w = !1, label: T, onChange:
 	let X;
 	A && (X = R);
 	let Z = null;
-	S != null && (Z = /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m("li", {
+	S != null && (Z = /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b("li", {
 		role: "presentation",
-		children: /* @__PURE__ */ m("div", {
+		children: /* @__PURE__ */ b("div", {
 			className: c,
 			role: "separator"
 		})
-	}), /* @__PURE__ */ m("li", {
+	}), /* @__PURE__ */ b("li", {
 		role: "presentation",
-		children: /* @__PURE__ */ m("div", {
+		children: /* @__PURE__ */ b("div", {
 			className: r,
 			children: se()
 		})
 	})] }));
 	let Q = null;
-	A && (Q = /* @__PURE__ */ h("ul", {
+	A && (Q = /* @__PURE__ */ x("ul", {
 		id: R,
 		className: e(o, s),
 		role: "listbox",
@@ -147,12 +147,12 @@ var S = ({ actionsSlot: S, className: C, isDisabled: w = !1, label: T, onChange:
 		[ne]: A,
 		[te]: O === "brand"
 	});
-	return /* @__PURE__ */ h("div", {
+	return /* @__PURE__ */ x("div", {
 		className: e(i, C),
 		ref: F,
 		children: [
 			Y,
-			/* @__PURE__ */ h("button", {
+			/* @__PURE__ */ x("button", {
 				ref: I,
 				type: "button",
 				className: le,
@@ -163,12 +163,12 @@ var S = ({ actionsSlot: S, className: C, isDisabled: w = !1, label: T, onChange:
 				onClick: V,
 				onKeyDown: U,
 				disabled: w,
-				children: [/* @__PURE__ */ m("span", {
+				children: [/* @__PURE__ */ b("span", {
 					className: ie,
 					children: z?.label ?? M
-				}), /* @__PURE__ */ m("span", {
+				}), /* @__PURE__ */ b("span", {
 					className: $,
-					children: /* @__PURE__ */ m(n, {
+					children: /* @__PURE__ */ b(n, {
 						width: 16,
 						height: 16,
 						"aria-hidden": "true"