@declarion/react 0.65.0 → 0.66.0

package/dist-lib/components/layout/Layout.js

@@ -0,0 +1,755 @@
+import { loginPathForRedirectPath as e } from "../../api/auth-redirect.js";
+import { useEmbed as t } from "../../embed/EmbedContext.js";
+import { useAuthStore as n } from "../../stores/auth.js";
+import { useSchema as r } from "../../hooks/useSchema.js";
+import { Icon as i } from "../primitives/Icons.js";
+import { IconBtn as a } from "../primitives/IconBtn.js";
+import { useText as o } from "../../hooks/useText.js";
+import { useResponsiveMode as s } from "../../hooks/useResponsiveMode.js";
+import { Rail as c } from "./Rail.js";
+import { useBranding as l, useBrandingIdentity as u } from "../../hooks/useBranding.js";
+import { usePreferencesStore as d } from "../../stores/preferences.js";
+import { useTabStore as f } from "../../stores/tabs.js";
+import { EmbedResizeReporter as p } from "../../embed/EmbedResizeReporter.js";
+import { EmbedDirtyReporter as ee } from "../../embed/EmbedDirtyReporter.js";
+import { EmbedHistoryTracker as m } from "../../embed/EmbedHistoryTracker.js";
+import { useGlobalLinkInterceptor as te } from "../../embed/useGlobalLinkInterceptor.js";
+import { EmbedLocationReporter as ne } from "../../embed/EmbedLocationReporter.js";
+import { EmbedUnsavedGuard as re } from "../../embed/EmbedUnsavedGuard.js";
+import { useTabNavigate as ie } from "../../hooks/useTabNavigate.js";
+import { Sidebar as ae, buildSections as h } from "./Sidebar.js";
+import { useImpersonation as oe } from "../../hooks/useImpersonation.js";
+import { TopBar as se } from "./TopBar.js";
+import { useTabTitle as g } from "../../hooks/useTabTitle.js";
+import { TabStrip as ce } from "./TabStrip.js";
+import { DirtyTabsCloseDialog as le } from "./DirtyTabsCloseDialog.js";
+import { ImpersonationBanner as ue } from "./ImpersonationBanner.js";
+import { ImpersonationFrame as de } from "./ImpersonationFrame.js";
+import { buildPendingTabClose as fe, tabCloseRoute as pe } from "./tab-close.js";
+import { CommandPalette as me } from "./CommandPalette.js";
+import { AgentChatPanel as he } from "../agents/AgentChatPanel.js";
+import { useSSE as ge } from "../../hooks/useSSE.js";
+import { ActionRunnerProvider as _e } from "../actions/ActionRunner.js";
+import { startListLayoutCrossTabSync as ve, useListLayoutStore as ye } from "../../stores/list-layout.js";
+import { usePageStateRuntime as be } from "../../hooks/usePageStateRuntime.js";
+import { AgentOpenFollower as xe } from "../agents/AgentOpenFollower.js";
+import { useCurrentLocation as Se } from "../../hooks/useCurrentLocation.js";
+import { useBrandingShell as Ce } from "../../hooks/useBrandingChrome.js";
+import { useCallback as _, useEffect as v, useMemo as we, useRef as y, useState as b } from "react";
+import { Fragment as x, jsx as S, jsxs as C } from "react/jsx-runtime";
+import { Outlet as Te, useLocation as Ee, useNavigate as De } from "react-router";
+//#region src/components/layout/Layout.tsx
+var w = "default";
+function T() {
+	let i = o();
+	te(), be();
+	let { isAuthenticated: a, isLoading: h, user: g, activeTenant: x } = n(), T = t(), E = De(), D = ie(), O = _((e) => D(e, { topLevel: !0 }), [D]), k = Ee(), { data: A } = r(), Fe = s(), j = d((e) => e.sidebar), Ie = d((e) => e.tabsPosition), M = d((e) => e.aiSurface), Le = d((e) => e.colorScheme), N = d((e) => e.set), Re = d((e) => e.hydrateFromBranding), { branding: ze } = l(), P = Ce(), F = f((e) => e.tabs), Be = f((e) => e.activeTabId), Ve = f((e) => e.closeTabs), He = f((e) => e.switchTab), Ue = f((e) => e.setScope), We = f((e) => e.hydrate), [I, L] = b(w), [Ge, R] = b(!1), [Ke, qe] = b("default"), [z, B] = b(!1), [Je, V] = b(), [Ye, H] = b(!1), [Xe, U] = b(!1), Ze = y(null), Qe = y(null), [W, G] = b(null), K = M !== "off" && P.isVisible("show_command_palette"), q = M === "panel" || M === "both", $e = M === "command" || M === "both", et = u(), tt = et?.ai_name?.trim() ?? "", J = Fe.category === "phone" || Fe.category === "tablet", Y = P.isVisible("show_topbar"), nt = !J && P.isVisible("show_rail"), rt = !J && P.isVisible("show_sidebar"), it = !J && P.isVisible("show_tabs"), at = J && P.isVisible("show_sidebar"), ot = J && P.isVisible("show_tabs"), st = Oe(!J && q && z), ct = P.isVisible("show_tenant_switcher"), lt = P.isVisible("show_breadcrumbs"), ut = P.isVisible("show_theme_toggle"), X = _((e = "default") => {
+		K && (qe(e), R(!0));
+	}, [K]), Z = _((e) => {
+		if (e.length === 0) return;
+		let t = f.getState(), n = !t.activeTabId || e.includes(t.activeTabId), r = Ve(e);
+		if (!n) return;
+		let i = pe(r);
+		E({
+			pathname: i.pathname,
+			search: i.search
+		}, { replace: i.replace });
+	}, [Ve, E]), Q = _((e, t) => {
+		let n = f.getState(), r = fe(n.tabs, n.activeTabId, e, t);
+		r && (r.dirtyTabs.length > 0 ? G(r) : Z(r.ids));
+	}, [Z]), dt = _(() => {
+		G(null);
+	}, []), ft = _(() => {
+		W && (G(null), Z(W.cleanIds));
+	}, [W, Z]), pt = _(() => {
+		W && (G(null), Z(W.ids));
+	}, [W, Z]);
+	ge();
+	let mt = Se(), { isImpersonating: $ } = oe();
+	v(() => {
+		T.enabled || !h && !a && E(e(`${k.pathname}${k.search}${k.hash}`), { replace: !0 });
+	}, [
+		T.enabled,
+		h,
+		a,
+		E,
+		k.hash,
+		k.pathname,
+		k.search
+	]), v(() => {
+		let e = g?.id || null, t = x?.id || null;
+		Ue(t, e), ye.getState().setScope(t, e), e && t && (We(), ye.getState().hydrate(), ve());
+	}, [
+		g?.id,
+		x?.id,
+		Ue,
+		We
+	]), v(() => {
+		Re(ze?.preferences);
+	}, [ze, Re]), v(() => {
+		if (!A) return;
+		let e = Ne(A.navigation, A.screens, k.pathname);
+		if (e) {
+			L(e);
+			return;
+		}
+		let t = I;
+		if ((A.navigation ?? []).some((e) => (e.area || w) === t)) return;
+		let n = (A.navigation ?? [])[0]?.area || w;
+		n !== t && L(n);
+	}, [
+		A,
+		k.pathname,
+		I
+	]), v(() => {
+		H(!1), U(!1);
+	}, [k.pathname, k.search]), v(() => {
+		let e = (e) => {
+			let t = document.activeElement, n = !!t && (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.isContentEditable), r = e.metaKey || e.ctrlKey;
+			r && e.key.toLowerCase() === "k" ? (e.preventDefault(), X("default")) : r && e.key.toLowerCase() === "t" ? (e.preventDefault(), X("new")) : r && e.key.toLowerCase() === "b" ? (e.preventDefault(), N("sidebar", j === "collapsed" ? "wide" : "collapsed")) : r && e.key.toLowerCase() === "w" ? (e.preventDefault(), Q("current")) : r && e.key === "/" ? (e.preventDefault(), q && B((e) => !e)) : e.key === "/" && !n ? (e.preventDefault(), X("default")) : e.key === "Escape" && R(!1);
+		};
+		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+	}, [
+		X,
+		Q,
+		N,
+		j,
+		q
+	]);
+	let ht = we(() => A ? Pe(i, A.navigation, A.screens, k.pathname, F, O) : [], [
+		i,
+		A,
+		k.pathname,
+		F,
+		O
+	]);
+	if (h) return /* @__PURE__ */ S("div", {
+		style: {
+			display: "flex",
+			height: "var(--app-height)",
+			alignItems: "center",
+			justifyContent: "center",
+			background: "var(--background)",
+			color: "var(--text-3)"
+		},
+		children: i("shell.loading", "Loading…")
+	});
+	if (!a) return null;
+	let gt = (e) => {
+		L(e);
+		let t = Me(e, A);
+		t && O(t);
+	}, _t = (e) => {
+		switch (e.type) {
+			case "nav":
+				e.route && O(e.route);
+				break;
+			case "new":
+				e.route && O(e.route + "/new");
+				break;
+			case "open":
+				e.route && O(e.route);
+				break;
+			case "ai":
+				q && (V(e.q), B(!0));
+				break;
+			case "ai-panel":
+				q && (V(void 0), B(!0));
+				break;
+			case "theme":
+				N("colorScheme", Le === "dark" ? "light" : "dark");
+				break;
+			case "tab-close": e.tabCloseScope && Q(e.tabCloseScope);
+		}
+	};
+	return T.enabled ? /* @__PURE__ */ C(_e, { children: [
+		/* @__PURE__ */ S(ne, {}),
+		/* @__PURE__ */ S(m, {}),
+		/* @__PURE__ */ S(re, {}),
+		/* @__PURE__ */ S(ee, {}),
+		/* @__PURE__ */ S(p, {}),
+		/* @__PURE__ */ S("div", {
+			id: "app-embed",
+			className: "flex min-h-0 flex-col overflow-auto",
+			style: { height: "var(--app-height)" },
+			children: /* @__PURE__ */ S(Te, {})
+		})
+	] }) : /* @__PURE__ */ S(_e, { children: /* @__PURE__ */ C("div", {
+		id: "app",
+		"data-sidebar": j,
+		"data-mobile-shell": J ? "true" : void 0,
+		style: ke({
+			mobileShell: J,
+			showBanner: $,
+			showTopbar: Y,
+			showRail: nt,
+			showSidebar: rt,
+			sidebarMode: j,
+			showAssistant: st
+		}),
+		children: [
+			$ && /* @__PURE__ */ S(ue, {}),
+			/* @__PURE__ */ S(de, {}),
+			Y && /* @__PURE__ */ S(se, {
+				breadcrumbs: ht,
+				onCrumbClick: (e) => e.onClick && e.onClick(),
+				showNavButton: at,
+				navButtonRef: Ze,
+				onOpenNav: () => H(!0),
+				showTabsButton: ot,
+				tabsButtonRef: Qe,
+				onOpenTabs: () => U(!0),
+				mobileTabCount: F.length,
+				onCmdK: () => X("default"),
+				onToggleAI: () => q && B((e) => !e),
+				aiOpen: z,
+				onOpenProfile: () => O("/profile"),
+				onOpenPrefs: () => O("/preferences"),
+				showTenantSwitcher: ct,
+				showBreadcrumbs: lt,
+				showThemeToggle: ut
+			}),
+			nt && /* @__PURE__ */ S(c, {
+				activeArea: I,
+				onPick: gt,
+				onToggleAI: () => q && B((e) => !e),
+				aiOpen: z,
+				onCmdK: () => X("default"),
+				areas: A?.areas,
+				branding: et
+			}),
+			rt && /* @__PURE__ */ S(ae, { activeArea: I }),
+			/* @__PURE__ */ C("main", {
+				style: {
+					gridArea: "main",
+					overflow: "hidden",
+					display: "flex",
+					flexDirection: "column",
+					minWidth: 0
+				},
+				children: [
+					it && Ie === "top" && /* @__PURE__ */ S(ce, {
+						onNew: () => X("new"),
+						onCloseRequest: Q
+					}),
+					/* @__PURE__ */ S("div", {
+						style: {
+							flex: 1,
+							overflow: "auto",
+							minHeight: 0,
+							display: "flex",
+							flexDirection: "column"
+						},
+						children: /* @__PURE__ */ S(Te, {})
+					}),
+					it && Ie === "bottom" && /* @__PURE__ */ S(ce, {
+						onNew: () => X("new"),
+						onCloseRequest: Q
+					})
+				]
+			}),
+			K && /* @__PURE__ */ S(me, {
+				open: Ge,
+				mode: Ke,
+				onClose: () => R(!1),
+				onAction: (e) => _t(e),
+				navigation: A?.navigation,
+				screens: A?.screens,
+				includeAI: $e,
+				aiName: tt
+			}),
+			/* @__PURE__ */ S(xe, {}),
+			q && z && /* @__PURE__ */ S(he, {
+				open: z,
+				docked: st,
+				onClose: () => {
+					B(!1), V(void 0);
+				},
+				title: tt,
+				askOnOpen: Je,
+				context: mt ?? void 0
+			}),
+			at && /* @__PURE__ */ S(Ae, {
+				open: Ye,
+				activeArea: I,
+				schema: A,
+				returnFocusRef: Ze,
+				onClose: () => H(!1),
+				onNavigate: O
+			}),
+			ot && /* @__PURE__ */ S(je, {
+				open: Xe,
+				tabs: F,
+				activeTabId: Be,
+				returnFocusRef: Qe,
+				onClose: () => U(!1),
+				onSwitch: (e) => {
+					He(e.id), E({
+						pathname: e.pathname,
+						search: e.search
+					}, { replace: !1 }), U(!1);
+				},
+				onCloseTab: (e) => Q("current", e)
+			}),
+			/* @__PURE__ */ S(le, {
+				pending: W,
+				onCancel: dt,
+				onCloseClean: ft,
+				onDiscardAll: pt
+			})
+		]
+	}) });
+}
+function Oe(e) {
+	return v(() => {
+		let t = document.documentElement.style;
+		return t.setProperty("--assistant-open-w", e ? "var(--assistant-w)" : "0px"), () => {
+			t.removeProperty("--assistant-open-w");
+		};
+	}, [e]), e;
+}
+function ke({ mobileShell: e, showBanner: t, showTopbar: n, showRail: r, showSidebar: i, sidebarMode: a, showAssistant: o }) {
+	let s = [
+		...t ? ["auto"] : [],
+		...n ? ["var(--topbar-h)"] : [],
+		"minmax(0, 1fr)"
+	].join(" "), c = (e) => {
+		let r = (t) => `"${e.map(() => t).join(" ")}"`;
+		return [
+			...t ? [r("banner")] : [],
+			...n ? [r("topbar")] : [],
+			`"${e.join(" ")}"`
+		].join(" ");
+	};
+	if (e) return {
+		height: "var(--app-height)",
+		display: "grid",
+		gridTemplateRows: s,
+		gridTemplateColumns: "minmax(0, 1fr)",
+		gridTemplateAreas: c(["main"]),
+		overflow: "hidden"
+	};
+	let l = [], u = [];
+	return r && (l.push("var(--rail-w)"), u.push("rail")), i && (l.push(a === "collapsed" || a === "icon-only" ? "56px" : "var(--sidebar-w)"), u.push("sidebar")), l.push("minmax(0, 1fr)"), u.push("main"), o && (l.push("var(--assistant-w)"), u.push("assistant")), {
+		height: "var(--app-height)",
+		display: "grid",
+		gridTemplateRows: s,
+		gridTemplateColumns: l.join(" "),
+		gridTemplateAreas: c(u),
+		overflow: "hidden"
+	};
+}
+var E = [
+	"a[href]",
+	"button:not([disabled])",
+	"input:not([disabled])",
+	"select:not([disabled])",
+	"textarea:not([disabled])",
+	"[tabindex]:not([tabindex='-1'])"
+].join(",");
+function D(e) {
+	return e ? Array.from(e.querySelectorAll(E)).filter((e) => !e.hasAttribute("disabled") && e.getAttribute("aria-hidden") !== "true") : [];
+}
+function O(e) {
+	D(e)[0]?.focus();
+}
+function k(e, t) {
+	let n = D(e);
+	if (n.length === 0) {
+		t.preventDefault();
+		return;
+	}
+	let r = n[0], i = n[n.length - 1], a = document.activeElement;
+	t.shiftKey && a === r ? (t.preventDefault(), i.focus()) : !t.shiftKey && a === i && (t.preventDefault(), r.focus());
+}
+function Ae({ open: e, activeArea: t, schema: n, returnFocusRef: r, onClose: s, onNavigate: c }) {
+	let l = o(), [u, d] = b(t), f = y(null);
+	if (v(() => {
+		e && d(t);
+	}, [e, t]), v(() => {
+		if (!e) return;
+		let t = document.activeElement instanceof HTMLElement ? document.activeElement : null, n = r.current;
+		requestAnimationFrame(() => O(f.current));
+		let i = (e) => {
+			e.key === "Escape" ? (e.preventDefault(), s()) : e.key === "Tab" && k(f.current, e);
+		};
+		return window.addEventListener("keydown", i), () => {
+			window.removeEventListener("keydown", i), (n ?? t)?.focus();
+		};
+	}, [
+		e,
+		s,
+		r
+	]), !e || !n) return null;
+	let p = Array.from(new Set((n.navigation ?? []).map((e) => e.area || w)));
+	p.length === 0 && p.push(w);
+	let ee = (e) => {
+		let t = n.areas?.find((t) => t.code === e);
+		return l(t?.name) || (e === w ? l("shell.nav.title", "Navigation") : e);
+	}, m = (e, t) => {
+		let r = e.screen ? n.screens[e.screen] : void 0, i = [...e.items ?? [], ...e.children ?? []], a = l(e.name) || (r ? l(r.display?.name) : "");
+		return /* @__PURE__ */ C("div", {
+			style: {
+				display: "flex",
+				flexDirection: "column",
+				gap: 2
+			},
+			children: [r?.route ? /* @__PURE__ */ C("button", {
+				type: "button",
+				onClick: () => {
+					c(r.route), s();
+				},
+				style: {
+					minHeight: 40,
+					border: 0,
+					borderRadius: "var(--radius-md)",
+					background: "transparent",
+					color: "var(--text-2)",
+					display: "flex",
+					alignItems: "center",
+					gap: 8,
+					padding: `0 10px 0 ${10 + t * 14}px`,
+					fontSize: 13,
+					textAlign: "left",
+					cursor: "pointer"
+				},
+				children: [/* @__PURE__ */ S("span", { style: { width: 12 } }), /* @__PURE__ */ S("span", {
+					style: {
+						minWidth: 0,
+						overflow: "hidden",
+						textOverflow: "ellipsis",
+						whiteSpace: "nowrap"
+					},
+					children: a || r.route
+				})]
+			}) : a ? /* @__PURE__ */ S("div", {
+				style: {
+					padding: `7px 10px 5px ${10 + t * 14}px`,
+					color: "var(--text-3)",
+					fontSize: 10.5,
+					fontWeight: 700,
+					letterSpacing: "0.08em",
+					textTransform: "uppercase"
+				},
+				children: a
+			}) : null, i.map((e) => m(e, t + 1))]
+		}, `${t}-${e.screen ?? a}`);
+	};
+	return /* @__PURE__ */ C(x, { children: [/* @__PURE__ */ S("div", {
+		"data-testid": "mobile-nav-backdrop",
+		onClick: s,
+		style: {
+			position: "fixed",
+			inset: 0,
+			background: "var(--scrim-lite)",
+			zIndex: 120
+		}
+	}), /* @__PURE__ */ C("aside", {
+		ref: f,
+		role: "dialog",
+		"aria-modal": "true",
+		"aria-label": l("shell.nav.title", "Navigation"),
+		"data-testid": "mobile-nav-drawer",
+		style: {
+			position: "fixed",
+			top: 0,
+			bottom: 0,
+			left: 0,
+			width: 320,
+			maxWidth: "calc(100vw - var(--safe-area-right) - 24px)",
+			background: "var(--sidebar)",
+			color: "var(--sidebar-fg)",
+			borderRight: "1px solid var(--border)",
+			boxShadow: "var(--shadow-lg)",
+			zIndex: 121,
+			display: "flex",
+			flexDirection: "column",
+			padding: "calc(10px + var(--safe-area-top)) 10px calc(10px + var(--safe-area-bottom)) calc(10px + var(--safe-area-left))",
+			boxSizing: "border-box",
+			overflow: "hidden"
+		},
+		children: [/* @__PURE__ */ C("div", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				gap: 8,
+				minHeight: 36,
+				padding: "0 2px 8px"
+			},
+			children: [/* @__PURE__ */ S("strong", {
+				style: {
+					fontSize: 13,
+					flex: 1
+				},
+				children: l("shell.nav.title", "Navigation")
+			}), /* @__PURE__ */ S(a, {
+				icon: /* @__PURE__ */ S(i.x, { size: 15 }),
+				title: l("shell.nav.close", "Close navigation"),
+				onClick: s
+			})]
+		}), /* @__PURE__ */ S("nav", {
+			style: {
+				overflowY: "auto",
+				overscrollBehavior: "contain",
+				display: "flex",
+				flexDirection: "column",
+				gap: 6
+			},
+			children: p.map((e) => {
+				let r = u === e, a = h(l, n.navigation ?? [], e);
+				return /* @__PURE__ */ C("section", { children: [/* @__PURE__ */ C("button", {
+					type: "button",
+					onClick: () => d(r ? "" : e),
+					style: {
+						width: "100%",
+						minHeight: 42,
+						border: "1px solid var(--border)",
+						borderRadius: "var(--radius-md)",
+						background: e === t ? "var(--sidebar-active)" : "var(--sidebar-hover)",
+						color: "var(--sidebar-fg)",
+						display: "flex",
+						alignItems: "center",
+						gap: 8,
+						padding: "0 10px",
+						fontSize: 13,
+						fontWeight: 650,
+						cursor: "pointer"
+					},
+					"aria-expanded": r,
+					children: [/* @__PURE__ */ S("span", {
+						style: {
+							flex: 1,
+							textAlign: "left"
+						},
+						children: ee(e)
+					}), S(r ? i.down : i.right, { size: 13 })]
+				}), r && /* @__PURE__ */ S("div", {
+					style: { padding: "6px 0 4px" },
+					children: a.flatMap((t) => [t.title ? /* @__PURE__ */ S("div", {
+						style: {
+							padding: "8px 10px 4px",
+							color: "var(--text-3)",
+							fontSize: 10,
+							fontWeight: 700,
+							letterSpacing: "0.08em",
+							textTransform: "uppercase"
+						},
+						children: t.title
+					}, `${e}-${t.title}`) : null, ...t.items.map((e) => m(e, 0))])
+				})] }, e);
+			})
+		})]
+	})] });
+}
+function je({ open: e, tabs: t, activeTabId: n, returnFocusRef: r, onClose: s, onSwitch: c, onCloseTab: l }) {
+	let u = o(), d = g(), f = y(null);
+	return v(() => {
+		if (!e) return;
+		let t = document.activeElement instanceof HTMLElement ? document.activeElement : null, n = r.current;
+		requestAnimationFrame(() => O(f.current));
+		let i = (e) => {
+			e.key === "Escape" ? (e.preventDefault(), s()) : e.key === "Tab" && k(f.current, e);
+		};
+		return window.addEventListener("keydown", i), () => {
+			window.removeEventListener("keydown", i), (n ?? t)?.focus();
+		};
+	}, [
+		e,
+		s,
+		r
+	]), e ? /* @__PURE__ */ C(x, { children: [/* @__PURE__ */ S("div", {
+		"data-testid": "mobile-tabs-backdrop",
+		onClick: s,
+		style: {
+			position: "fixed",
+			inset: 0,
+			background: "var(--scrim-lite)",
+			zIndex: 122
+		}
+	}), /* @__PURE__ */ C("section", {
+		ref: f,
+		role: "dialog",
+		"aria-modal": "true",
+		"aria-label": u("shell.tabs.open_tabs", "Open tabs"),
+		"data-testid": "mobile-tabs-menu",
+		style: {
+			position: "fixed",
+			top: "calc(var(--topbar-h) + var(--safe-area-top) + 8px)",
+			right: "calc(var(--safe-area-right) + 10px)",
+			width: 320,
+			maxWidth: "calc(100vw - var(--safe-area-left) - var(--safe-area-right) - 20px)",
+			maxHeight: "calc(var(--app-height) - var(--topbar-h) - var(--safe-area-top) - var(--safe-area-bottom) - 16px)",
+			overflowY: "auto",
+			overscrollBehavior: "contain",
+			background: "var(--surface)",
+			border: "1px solid var(--border)",
+			borderRadius: "var(--radius-md)",
+			boxShadow: "var(--shadow-lg)",
+			zIndex: 123,
+			padding: 6,
+			boxSizing: "border-box"
+		},
+		children: [/* @__PURE__ */ C("div", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				gap: 8,
+				padding: "4px 4px 8px"
+			},
+			children: [/* @__PURE__ */ S("strong", {
+				style: {
+					flex: 1,
+					fontSize: 13
+				},
+				children: u("shell.tabs.open_tabs", "Open tabs")
+			}), /* @__PURE__ */ S(a, {
+				icon: /* @__PURE__ */ S(i.x, { size: 14 }),
+				title: u("shell.tabs.close_menu", "Close tabs menu"),
+				onClick: s
+			})]
+		}), t.length === 0 ? /* @__PURE__ */ S("div", {
+			style: {
+				padding: 10,
+				color: "var(--text-3)",
+				fontSize: 12
+			},
+			children: u("shell.tabs.none_open", "No open tabs")
+		}) : t.map((e) => /* @__PURE__ */ C("div", {
+			style: {
+				display: "grid",
+				gridTemplateColumns: "minmax(0, 1fr) auto",
+				gap: 4,
+				alignItems: "center",
+				borderRadius: "var(--radius-md)",
+				background: e.id === n ? "var(--surface-3)" : "transparent"
+			},
+			children: [/* @__PURE__ */ C("button", {
+				type: "button",
+				onClick: () => c(e),
+				style: {
+					minHeight: 38,
+					border: 0,
+					background: "transparent",
+					color: "var(--text-2)",
+					display: "flex",
+					alignItems: "center",
+					gap: 8,
+					minWidth: 0,
+					padding: "0 8px",
+					textAlign: "left",
+					cursor: "pointer"
+				},
+				children: [/* @__PURE__ */ S(i.layers, { size: 13 }), /* @__PURE__ */ S("span", {
+					style: {
+						overflow: "hidden",
+						textOverflow: "ellipsis",
+						whiteSpace: "nowrap"
+					},
+					children: d(e)
+				})]
+			}), e.closable && /* @__PURE__ */ S(a, {
+				icon: /* @__PURE__ */ S(i.x, { size: 12 }),
+				title: u("shell.tabs.close_named", "Close {title}", { title: d(e) }),
+				onClick: () => l(e.id)
+			})]
+		}, e.id))]
+	})] }) : null;
+}
+function Me(e, t) {
+	if (!t) return;
+	let n = t.areas?.find((t) => t.code === e);
+	if (n?.home_screen) {
+		let e = t.screens[n.home_screen];
+		if (e?.route) return e.route;
+	}
+	let r = (e) => {
+		if (e.screen) {
+			let n = t.screens[e.screen];
+			if (n?.route) return n.route;
+		}
+		for (let t of e.items || []) {
+			let e = r(t);
+			if (e) return e;
+		}
+		for (let t of e.children || []) {
+			let e = r(t);
+			if (e) return e;
+		}
+	};
+	for (let n of t.navigation ?? []) {
+		if ((n.area || w) !== e) continue;
+		let t = r(n);
+		if (t) return t;
+	}
+}
+function Ne(e, t, n) {
+	let r = (e) => {
+		if (!e.screen) return !1;
+		let r = t[e.screen];
+		return !!r && (r.route === n || n.startsWith(r.route + "/"));
+	}, i = (e, t) => {
+		if (r(e)) return t;
+		for (let n of e.items || []) {
+			let e = i(n, t);
+			if (e) return e;
+		}
+		for (let n of e.children || []) {
+			let e = i(n, t);
+			if (e) return e;
+		}
+	};
+	for (let t of e ?? []) {
+		let e = i(t, t.area || w);
+		if (e) return e;
+	}
+}
+function Pe(e, t, n, r, i, a) {
+	let o = (e, t) => {
+		if (e.screen) {
+			let i = n[e.screen];
+			if (i && (i.route === r || r.startsWith(i.route + "/"))) return [...t, e];
+		}
+		for (let n of e.items || []) {
+			let r = o(n, [...t, e]);
+			if (r) return r;
+		}
+		for (let n of e.children || []) {
+			let r = o(n, [...t, e]);
+			if (r) return r;
+		}
+		return null;
+	}, s = null;
+	for (let e of t ?? []) if (s = o(e, []), s) break;
+	if (!s || s.length === 0) {
+		let t = Object.values(n).find((e) => e.route === r);
+		return t?.display?.name ? [{
+			label: e(t.display.name),
+			icon: t.display.icon,
+			isLast: !0
+		}] : [];
+	}
+	let c = [];
+	for (let t = 0; t < s.length; t++) {
+		let i = s[t], o = t === s.length - 1, l = i.screen ? n[i.screen] : void 0;
+		c.push({
+			label: e(i.name) || i.screen || "",
+			icon: i.icon,
+			onClick: l ? () => {
+				a(l.route);
+			} : void 0,
+			isLast: o && (!l || l.route === r)
+		});
+	}
+	let l = s[s.length - 1], u = l.screen ? n[l.screen] : void 0;
+	if (u && r !== u.route && r.startsWith(u.route + "/")) {
+		let t = i.find((e) => e.pathname === r);
+		c.push({
+			label: t?.title || e("shell.crumbs.record", "Record"),
+			icon: "file",
+			isLast: !0
+		});
+	}
+	return c;
+}
+//#endregion
+export { T as Layout, Pe as buildCrumbs };