@declarion/react 0.66.1 → 0.80.0

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

@@ -20,7 +20,7 @@ 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 { builtInPageTitle as g, useTabTitle as _ } 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";
@@ -35,75 +35,72 @@ 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";
+import { useActiveTabFollowsRoute as we } from "../../hooks/useActiveTabFollowsRoute.js";
+import { useDocumentTitle as Te } from "../../hooks/useDocumentTitle.js";
+import { useCallback as v, useEffect as y, useMemo as Ee, useRef as b, useState as x } from "react";
+import { Fragment as S, jsx as C, jsxs as w } from "react/jsx-runtime";
+import { Outlet as De, useLocation as Oe, useNavigate as ke } from "react-router";
 //#region src/components/layout/Layout.tsx
-var w = "default";
-function T() {
+var T = "default";
+function E() {
 	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") => {
+	let { isAuthenticated: a, isLoading: h, user: g, activeTenant: _ } = n(), S = t(), E = ke(), D = ie(), O = v((e) => D(e, { topLevel: !0 }), [D]), k = Oe(), { data: A } = r(), Le = s(), j = d((e) => e.sidebar), Re = d((e) => e.tabsPosition), M = d((e) => e.aiSurface), ze = d((e) => e.colorScheme), N = d((e) => e.set), Be = d((e) => e.hydrateFromBranding), { branding: Ve } = l(), P = Ce(), F = f((e) => e.tabs), He = f((e) => e.activeTabId), Ue = f((e) => e.closeTabs), We = f((e) => e.switchTab), [I, L] = x(T), [Ge, R] = x(!1), [Ke, qe] = x("default"), [z, B] = x(!1), [Je, V] = x(), [Ye, H] = x(!1), [Xe, U] = x(!1), Ze = b(null), Qe = b(null), [W, G] = x(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 = Le.category === "phone" || Le.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 = Ae(!J && q && z), ct = P.isVisible("show_tenant_switcher"), lt = P.isVisible("show_breadcrumbs"), ut = P.isVisible("show_theme_toggle"), X = v((e = "default") => {
 		K && (qe(e), R(!0));
-	}, [K]), Z = _((e) => {
+	}, [K]), Z = v((e) => {
 		if (e.length === 0) return;
-		let t = f.getState(), n = !t.activeTabId || e.includes(t.activeTabId), r = Ve(e);
+		let t = f.getState(), n = !t.activeTabId || e.includes(t.activeTabId), r = Ue(e);
 		if (!n) return;
 		let i = pe(r);
 		E({
 			pathname: i.pathname,
 			search: i.search
 		}, { replace: i.replace });
-	}, [Ve, E]), Q = _((e, t) => {
+	}, [Ue, E]), Q = v((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 = _(() => {
+	}, [Z]), dt = v(() => {
 		G(null);
-	}, []), ft = _(() => {
+	}, []), ft = v(() => {
 		W && (G(null), Z(W.cleanIds));
-	}, [W, Z]), pt = _(() => {
+	}, [W, Z]), pt = v(() => {
 		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 });
+	y(() => {
+		S.enabled || !h && !a && E(e(`${k.pathname}${k.search}${k.hash}`), { replace: !0 });
 	}, [
-		T.enabled,
+		S.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(() => {
+	]), y(() => {
+		let e = g?.id || null, t = _?.id || null;
+		f.getState().setScope(t, e), ye.getState().setScope(t, e), e && t && (f.getState().hydrate(), ye.getState().hydrate(), ve());
+	}, [g?.id, _?.id]), we(), Te(), y(() => {
+		Be(Ve?.preferences);
+	}, [Ve, Be]), y(() => {
 		if (!A) return;
-		let e = Ne(A.navigation, A.screens, k.pathname);
+		let e = Fe(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;
+		if ((A.navigation ?? []).some((e) => (e.area || T) === t)) return;
+		let n = (A.navigation ?? [])[0]?.area || T;
 		n !== t && L(n);
 	}, [
 		A,
 		k.pathname,
 		I
-	]), v(() => {
+	]), y(() => {
 		H(!1), U(!1);
-	}, [k.pathname, k.search]), v(() => {
+	}, [k.pathname, k.search]), y(() => {
 		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);
@@ -116,14 +113,14 @@ function T() {
 		j,
 		q
 	]);
-	let ht = we(() => A ? Pe(i, A.navigation, A.screens, k.pathname, F, O) : [], [
+	let ht = Ee(() => A ? Ie(i, A.navigation, A.screens, k.pathname, F, O) : [], [
 		i,
 		A,
 		k.pathname,
 		F,
 		O
 	]);
-	if (h) return /* @__PURE__ */ S("div", {
+	if (h) return /* @__PURE__ */ C("div", {
 		style: {
 			display: "flex",
 			height: "var(--app-height)",
@@ -137,7 +134,7 @@ function T() {
 	if (!a) return null;
 	let gt = (e) => {
 		L(e);
-		let t = Me(e, A);
+		let t = Pe(e, A);
 		t && O(t);
 	}, _t = (e) => {
 		switch (e.type) {
@@ -157,28 +154,28 @@ function T() {
 				q && (V(void 0), B(!0));
 				break;
 			case "theme":
-				N("colorScheme", Le === "dark" ? "light" : "dark");
+				N("colorScheme", ze === "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", {
+	return S.enabled ? /* @__PURE__ */ w(_e, { children: [
+		/* @__PURE__ */ C(ne, {}),
+		/* @__PURE__ */ C(m, {}),
+		/* @__PURE__ */ C(re, {}),
+		/* @__PURE__ */ C(ee, {}),
+		/* @__PURE__ */ C(p, {}),
+		/* @__PURE__ */ C("div", {
 			id: "app-embed",
 			className: "flex min-h-0 flex-col overflow-auto",
 			style: { height: "var(--app-height)" },
-			children: /* @__PURE__ */ S(Te, {})
+			children: /* @__PURE__ */ C(De, {})
 		})
-	] }) : /* @__PURE__ */ S(_e, { children: /* @__PURE__ */ C("div", {
+	] }) : /* @__PURE__ */ C(_e, { children: /* @__PURE__ */ w("div", {
 		id: "app",
 		"data-sidebar": j,
 		"data-mobile-shell": J ? "true" : void 0,
-		style: ke({
+		style: je({
 			mobileShell: J,
 			showBanner: $,
 			showTopbar: Y,
@@ -188,9 +185,9 @@ function T() {
 			showAssistant: st
 		}),
 		children: [
-			$ && /* @__PURE__ */ S(ue, {}),
-			/* @__PURE__ */ S(de, {}),
-			Y && /* @__PURE__ */ S(se, {
+			$ && /* @__PURE__ */ C(ue, {}),
+			/* @__PURE__ */ C(de, {}),
+			Y && /* @__PURE__ */ C(se, {
 				breadcrumbs: ht,
 				onCrumbClick: (e) => e.onClick && e.onClick(),
 				showNavButton: at,
@@ -209,7 +206,7 @@ function T() {
 				showBreadcrumbs: lt,
 				showThemeToggle: ut
 			}),
-			nt && /* @__PURE__ */ S(c, {
+			nt && /* @__PURE__ */ C(c, {
 				activeArea: I,
 				onPick: gt,
 				onToggleAI: () => q && B((e) => !e),
@@ -218,8 +215,8 @@ function T() {
 				areas: A?.areas,
 				branding: et
 			}),
-			rt && /* @__PURE__ */ S(ae, { activeArea: I }),
-			/* @__PURE__ */ C("main", {
+			rt && /* @__PURE__ */ C(ae, { activeArea: I }),
+			/* @__PURE__ */ w("main", {
 				style: {
 					gridArea: "main",
 					overflow: "hidden",
@@ -228,11 +225,11 @@ function T() {
 					minWidth: 0
 				},
 				children: [
-					it && Ie === "top" && /* @__PURE__ */ S(ce, {
+					it && Re === "top" && /* @__PURE__ */ C(ce, {
 						onNew: () => X("new"),
 						onCloseRequest: Q
 					}),
-					/* @__PURE__ */ S("div", {
+					/* @__PURE__ */ C("div", {
 						style: {
 							flex: 1,
 							overflow: "auto",
@@ -240,15 +237,15 @@ function T() {
 							display: "flex",
 							flexDirection: "column"
 						},
-						children: /* @__PURE__ */ S(Te, {})
+						children: /* @__PURE__ */ C(De, {})
 					}),
-					it && Ie === "bottom" && /* @__PURE__ */ S(ce, {
+					it && Re === "bottom" && /* @__PURE__ */ C(ce, {
 						onNew: () => X("new"),
 						onCloseRequest: Q
 					})
 				]
 			}),
-			K && /* @__PURE__ */ S(me, {
+			K && /* @__PURE__ */ C(me, {
 				open: Ge,
 				mode: Ke,
 				onClose: () => R(!1),
@@ -258,8 +255,8 @@ function T() {
 				includeAI: $e,
 				aiName: tt
 			}),
-			/* @__PURE__ */ S(xe, {}),
-			q && z && /* @__PURE__ */ S(he, {
+			/* @__PURE__ */ C(xe, {}),
+			q && z && /* @__PURE__ */ C(he, {
 				open: z,
 				docked: st,
 				onClose: () => {
@@ -269,7 +266,7 @@ function T() {
 				askOnOpen: Je,
 				context: mt ?? void 0
 			}),
-			at && /* @__PURE__ */ S(Ae, {
+			at && /* @__PURE__ */ C(Me, {
 				open: Ye,
 				activeArea: I,
 				schema: A,
@@ -277,21 +274,21 @@ function T() {
 				onClose: () => H(!1),
 				onNavigate: O
 			}),
-			ot && /* @__PURE__ */ S(je, {
+			ot && /* @__PURE__ */ C(Ne, {
 				open: Xe,
 				tabs: F,
-				activeTabId: Be,
+				activeTabId: He,
 				returnFocusRef: Qe,
 				onClose: () => U(!1),
 				onSwitch: (e) => {
-					He(e.id), E({
+					We(e.id), E({
 						pathname: e.pathname,
 						search: e.search
 					}, { replace: !1 }), U(!1);
 				},
 				onCloseTab: (e) => Q("current", e)
 			}),
-			/* @__PURE__ */ S(le, {
+			/* @__PURE__ */ C(le, {
 				pending: W,
 				onCancel: dt,
 				onCloseClean: ft,
@@ -300,15 +297,15 @@ function T() {
 		]
 	}) });
 }
-function Oe(e) {
-	return v(() => {
+function Ae(e) {
+	return y(() => {
 		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 }) {
+function je({ mobileShell: e, showBanner: t, showTopbar: n, showRail: r, showSidebar: i, sidebarMode: a, showAssistant: o }) {
 	let s = [
 		...t ? ["auto"] : [],
 		...n ? ["var(--topbar-h)"] : [],
@@ -339,7 +336,7 @@ function ke({ mobileShell: e, showBanner: t, showTopbar: n, showRail: r, showSid
 		overflow: "hidden"
 	};
 }
-var E = [
+var D = [
 	"a[href]",
 	"button:not([disabled])",
 	"input:not([disabled])",
@@ -347,14 +344,14 @@ var E = [
 	"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();
+	return e ? Array.from(e.querySelectorAll(D)).filter((e) => !e.hasAttribute("disabled") && e.getAttribute("aria-hidden") !== "true") : [];
 }
-function k(e, t) {
-	let n = D(e);
+function k(e) {
+	O(e)[0]?.focus();
+}
+function A(e, t) {
+	let n = O(e);
 	if (n.length === 0) {
 		t.preventDefault();
 		return;
@@ -362,16 +359,16 @@ function k(e, t) {
 	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(() => {
+function Me({ open: e, activeArea: t, schema: n, returnFocusRef: r, onClose: s, onNavigate: c }) {
+	let l = o(), [u, d] = x(t), f = b(null);
+	if (y(() => {
 		e && d(t);
-	}, [e, t]), v(() => {
+	}, [e, t]), y(() => {
 		if (!e) return;
 		let t = document.activeElement instanceof HTMLElement ? document.activeElement : null, n = r.current;
-		requestAnimationFrame(() => O(f.current));
+		requestAnimationFrame(() => k(f.current));
 		let i = (e) => {
-			e.key === "Escape" ? (e.preventDefault(), s()) : e.key === "Tab" && k(f.current, e);
+			e.key === "Escape" ? (e.preventDefault(), s()) : e.key === "Tab" && A(f.current, e);
 		};
 		return window.addEventListener("keydown", i), () => {
 			window.removeEventListener("keydown", i), (n ?? t)?.focus();
@@ -381,20 +378,20 @@ function Ae({ open: e, activeArea: t, schema: n, returnFocusRef: r, onClose: s,
 		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 p = Array.from(new Set((n.navigation ?? []).map((e) => e.area || T)));
+	p.length === 0 && p.push(T);
 	let ee = (e) => {
 		let t = n.areas?.find((t) => t.code === e);
-		return l(t?.name) || (e === w ? l("shell.nav.title", "Navigation") : e);
+		return l(t?.name) || (e === T ? 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", {
+		return /* @__PURE__ */ w("div", {
 			style: {
 				display: "flex",
 				flexDirection: "column",
 				gap: 2
 			},
-			children: [r?.route ? /* @__PURE__ */ C("button", {
+			children: [r?.route ? /* @__PURE__ */ w("button", {
 				type: "button",
 				onClick: () => {
 					c(r.route), s();
@@ -413,7 +410,7 @@ function Ae({ open: e, activeArea: t, schema: n, returnFocusRef: r, onClose: s,
 					textAlign: "left",
 					cursor: "pointer"
 				},
-				children: [/* @__PURE__ */ S("span", { style: { width: 12 } }), /* @__PURE__ */ S("span", {
+				children: [/* @__PURE__ */ C("span", { style: { width: 12 } }), /* @__PURE__ */ C("span", {
 					style: {
 						minWidth: 0,
 						overflow: "hidden",
@@ -422,7 +419,7 @@ function Ae({ open: e, activeArea: t, schema: n, returnFocusRef: r, onClose: s,
 					},
 					children: a || r.route
 				})]
-			}) : a ? /* @__PURE__ */ S("div", {
+			}) : a ? /* @__PURE__ */ C("div", {
 				style: {
 					padding: `7px 10px 5px ${10 + t * 14}px`,
 					color: "var(--text-3)",
@@ -435,7 +432,7 @@ function Ae({ open: e, activeArea: t, schema: n, returnFocusRef: r, onClose: s,
 			}) : null, i.map((e) => m(e, t + 1))]
 		}, `${t}-${e.screen ?? a}`);
 	};
-	return /* @__PURE__ */ C(x, { children: [/* @__PURE__ */ S("div", {
+	return /* @__PURE__ */ w(S, { children: [/* @__PURE__ */ C("div", {
 		"data-testid": "mobile-nav-backdrop",
 		onClick: s,
 		style: {
@@ -444,7 +441,7 @@ function Ae({ open: e, activeArea: t, schema: n, returnFocusRef: r, onClose: s,
 			background: "var(--scrim-lite)",
 			zIndex: 120
 		}
-	}), /* @__PURE__ */ C("aside", {
+	}), /* @__PURE__ */ w("aside", {
 		ref: f,
 		role: "dialog",
 		"aria-modal": "true",
@@ -468,7 +465,7 @@ function Ae({ open: e, activeArea: t, schema: n, returnFocusRef: r, onClose: s,
 			boxSizing: "border-box",
 			overflow: "hidden"
 		},
-		children: [/* @__PURE__ */ C("div", {
+		children: [/* @__PURE__ */ w("div", {
 			style: {
 				display: "flex",
 				alignItems: "center",
@@ -476,18 +473,18 @@ function Ae({ open: e, activeArea: t, schema: n, returnFocusRef: r, onClose: s,
 				minHeight: 36,
 				padding: "0 2px 8px"
 			},
-			children: [/* @__PURE__ */ S("strong", {
+			children: [/* @__PURE__ */ C("strong", {
 				style: {
 					fontSize: 13,
 					flex: 1
 				},
 				children: l("shell.nav.title", "Navigation")
-			}), /* @__PURE__ */ S(a, {
-				icon: /* @__PURE__ */ S(i.x, { size: 15 }),
+			}), /* @__PURE__ */ C(a, {
+				icon: /* @__PURE__ */ C(i.x, { size: 15 }),
 				title: l("shell.nav.close", "Close navigation"),
 				onClick: s
 			})]
-		}), /* @__PURE__ */ S("nav", {
+		}), /* @__PURE__ */ C("nav", {
 			style: {
 				overflowY: "auto",
 				overscrollBehavior: "contain",
@@ -497,7 +494,7 @@ function Ae({ open: e, activeArea: t, schema: n, returnFocusRef: r, onClose: s,
 			},
 			children: p.map((e) => {
 				let r = u === e, a = h(l, n.navigation ?? [], e);
-				return /* @__PURE__ */ C("section", { children: [/* @__PURE__ */ C("button", {
+				return /* @__PURE__ */ w("section", { children: [/* @__PURE__ */ w("button", {
 					type: "button",
 					onClick: () => d(r ? "" : e),
 					style: {
@@ -516,16 +513,16 @@ function Ae({ open: e, activeArea: t, schema: n, returnFocusRef: r, onClose: s,
 						cursor: "pointer"
 					},
 					"aria-expanded": r,
-					children: [/* @__PURE__ */ S("span", {
+					children: [/* @__PURE__ */ C("span", {
 						style: {
 							flex: 1,
 							textAlign: "left"
 						},
 						children: ee(e)
-					}), S(r ? i.down : i.right, { size: 13 })]
-				}), r && /* @__PURE__ */ S("div", {
+					}), C(r ? i.down : i.right, { size: 13 })]
+				}), r && /* @__PURE__ */ C("div", {
 					style: { padding: "6px 0 4px" },
-					children: a.flatMap((t) => [t.title ? /* @__PURE__ */ S("div", {
+					children: a.flatMap((t) => [t.title ? /* @__PURE__ */ C("div", {
 						style: {
 							padding: "8px 10px 4px",
 							color: "var(--text-3)",
@@ -541,14 +538,14 @@ function Ae({ open: e, activeArea: t, schema: n, returnFocusRef: r, onClose: s,
 		})]
 	})] });
 }
-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(() => {
+function Ne({ open: e, tabs: t, activeTabId: n, returnFocusRef: r, onClose: s, onSwitch: c, onCloseTab: l }) {
+	let u = o(), d = _(), f = b(null);
+	return y(() => {
 		if (!e) return;
 		let t = document.activeElement instanceof HTMLElement ? document.activeElement : null, n = r.current;
-		requestAnimationFrame(() => O(f.current));
+		requestAnimationFrame(() => k(f.current));
 		let i = (e) => {
-			e.key === "Escape" ? (e.preventDefault(), s()) : e.key === "Tab" && k(f.current, e);
+			e.key === "Escape" ? (e.preventDefault(), s()) : e.key === "Tab" && A(f.current, e);
 		};
 		return window.addEventListener("keydown", i), () => {
 			window.removeEventListener("keydown", i), (n ?? t)?.focus();
@@ -557,7 +554,7 @@ function je({ open: e, tabs: t, activeTabId: n, returnFocusRef: r, onClose: s, o
 		e,
 		s,
 		r
-	]), e ? /* @__PURE__ */ C(x, { children: [/* @__PURE__ */ S("div", {
+	]), e ? /* @__PURE__ */ w(S, { children: [/* @__PURE__ */ C("div", {
 		"data-testid": "mobile-tabs-backdrop",
 		onClick: s,
 		style: {
@@ -566,7 +563,7 @@ function je({ open: e, tabs: t, activeTabId: n, returnFocusRef: r, onClose: s, o
 			background: "var(--scrim-lite)",
 			zIndex: 122
 		}
-	}), /* @__PURE__ */ C("section", {
+	}), /* @__PURE__ */ w("section", {
 		ref: f,
 		role: "dialog",
 		"aria-modal": "true",
@@ -589,32 +586,32 @@ function je({ open: e, tabs: t, activeTabId: n, returnFocusRef: r, onClose: s, o
 			padding: 6,
 			boxSizing: "border-box"
 		},
-		children: [/* @__PURE__ */ C("div", {
+		children: [/* @__PURE__ */ w("div", {
 			style: {
 				display: "flex",
 				alignItems: "center",
 				gap: 8,
 				padding: "4px 4px 8px"
 			},
-			children: [/* @__PURE__ */ S("strong", {
+			children: [/* @__PURE__ */ C("strong", {
 				style: {
 					flex: 1,
 					fontSize: 13
 				},
 				children: u("shell.tabs.open_tabs", "Open tabs")
-			}), /* @__PURE__ */ S(a, {
-				icon: /* @__PURE__ */ S(i.x, { size: 14 }),
+			}), /* @__PURE__ */ C(a, {
+				icon: /* @__PURE__ */ C(i.x, { size: 14 }),
 				title: u("shell.tabs.close_menu", "Close tabs menu"),
 				onClick: s
 			})]
-		}), t.length === 0 ? /* @__PURE__ */ S("div", {
+		}), t.length === 0 ? /* @__PURE__ */ C("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", {
+		}) : t.map((e) => /* @__PURE__ */ w("div", {
 			style: {
 				display: "grid",
 				gridTemplateColumns: "minmax(0, 1fr) auto",
@@ -623,7 +620,7 @@ function je({ open: e, tabs: t, activeTabId: n, returnFocusRef: r, onClose: s, o
 				borderRadius: "var(--radius-md)",
 				background: e.id === n ? "var(--surface-3)" : "transparent"
 			},
-			children: [/* @__PURE__ */ C("button", {
+			children: [/* @__PURE__ */ w("button", {
 				type: "button",
 				onClick: () => c(e),
 				style: {
@@ -639,7 +636,7 @@ function je({ open: e, tabs: t, activeTabId: n, returnFocusRef: r, onClose: s, o
 					textAlign: "left",
 					cursor: "pointer"
 				},
-				children: [/* @__PURE__ */ S(i.layers, { size: 13 }), /* @__PURE__ */ S("span", {
+				children: [/* @__PURE__ */ C(i.layers, { size: 13 }), /* @__PURE__ */ C("span", {
 					style: {
 						overflow: "hidden",
 						textOverflow: "ellipsis",
@@ -647,15 +644,15 @@ function je({ open: e, tabs: t, activeTabId: n, returnFocusRef: r, onClose: s, o
 					},
 					children: d(e)
 				})]
-			}), e.closable && /* @__PURE__ */ S(a, {
-				icon: /* @__PURE__ */ S(i.x, { size: 12 }),
+			}), e.closable && /* @__PURE__ */ C(a, {
+				icon: /* @__PURE__ */ C(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) {
+function Pe(e, t) {
 	if (!t) return;
 	let n = t.areas?.find((t) => t.code === e);
 	if (n?.home_screen) {
@@ -677,12 +674,12 @@ function Me(e, t) {
 		}
 	};
 	for (let n of t.navigation ?? []) {
-		if ((n.area || w) !== e) continue;
+		if ((n.area || T) !== e) continue;
 		let t = r(n);
 		if (t) return t;
 	}
 }
-function Ne(e, t, n) {
+function Fe(e, t, n) {
 	let r = (e) => {
 		if (!e.screen) return !1;
 		let r = t[e.screen];
@@ -699,11 +696,11 @@ function Ne(e, t, n) {
 		}
 	};
 	for (let t of e ?? []) {
-		let e = i(t, t.area || w);
+		let e = i(t, t.area || T);
 		if (e) return e;
 	}
 }
-function Pe(e, t, n, r, i, a) {
+function Ie(e, t, n, r, i, a) {
 	let o = (e, t) => {
 		if (e.screen) {
 			let i = n[e.screen];
@@ -722,10 +719,15 @@ function Pe(e, t, n, r, i, a) {
 	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 ? [{
+		if (t?.display?.name) return [{
 			label: e(t.display.name),
 			icon: t.display.icon,
 			isLast: !0
+		}];
+		let i = g(e, r);
+		return i ? [{
+			label: i,
+			isLast: !0
 		}] : [];
 	}
 	let c = [];
@@ -752,4 +754,4 @@ function Pe(e, t, n, r, i, a) {
 	return c;
 }
 //#endregion
-export { T as Layout, Pe as buildCrumbs };
+export { E as Layout, Ie as buildCrumbs };

package/dist-lib/components/pages/NoScreensPage.impl.js

@@ -0,0 +1,14 @@
+import { useText as e } from "../../hooks/useText.js";
+import { EmptyState as t } from "../shared/EmptyState.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/pages/NoScreensPage.impl.tsx
+function r() {
+	let r = e();
+	return /* @__PURE__ */ n(t, {
+		icon: "lock",
+		title: r("page.no_screens.title", "No screens are open to you in this tenant"),
+		description: r("page.no_screens.description", "Ask an administrator of this tenant to grant you a role.")
+	});
+}
+//#endregion
+export { r as NoScreensPage };

package/dist-lib/components/pages/NoScreensPage.js

@@ -0,0 +1,12 @@
+import { Suspense as e, lazy as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/pages/NoScreensPage.tsx
+var r = t(() => import("./NoScreensPage.impl.js").then((e) => ({ default: e.NoScreensPage })));
+function i() {
+	return /* @__PURE__ */ n(e, {
+		fallback: null,
+		children: /* @__PURE__ */ n(r, {})
+	});
+}
+//#endregion
+export { i as NoScreensPage };