@burdenoff/fe-libs 2026.1018.1 → 2026.1019.2

package/dist/chrome/NavCustomizeDialog.js

@@ -1,39 +1,41 @@
 import { ResponsiveDialog as e, ResponsiveDialogContent as t, ResponsiveDialogDescription as n, ResponsiveDialogHeader as r, ResponsiveDialogTitle as i } from "../ui/responsive-dialog.js";
 import { useNavRegistryStore as a } from "../shared/hooks/shell/useNavRegistry.js";
 import { Switch as o } from "../ui/switch.js";
-import { useSafePermissions as s } from "../shared/providers/shell/PermissionProvider.js";
-import { useSafePersonaSurface as c } from "../shared/providers/shell/PersonaSurfaceProvider.js";
-import { applyPermissionFilter as l, isItemEffectivelyShown as u } from "./sideNavigation/navVisibility.js";
-import { useEffect as d, useMemo as f, useState as p } from "react";
-import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
+import { useShellLabel as s } from "../shared/providers/shell/useShellLabel.js";
+import { useSafePermissions as c } from "../shared/providers/shell/PermissionProvider.js";
+import { useSafePersonaSurface as l } from "../shared/providers/shell/PersonaSurfaceProvider.js";
+import { interpolateShellLabel as u } from "../shared/providers/shell/interpolateShellLabel.js";
+import { applyPermissionFilter as d, isItemEffectivelyShown as f } from "./sideNavigation/navVisibility.js";
+import { useEffect as ee, useMemo as p, useState as m } from "react";
+import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
 //#region src/chrome/NavCustomizeDialog.tsx
-function _({ item: e, depth: t, parentShown: n, surfaceVisibleItems: r, overrides: i, onToggle: a }) {
-	let s = u(e, n, r, i), c = s && (!r || r.includes(e.id) || i[e.id] === "shown");
-	return /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ g("div", {
+function v({ item: e, depth: t, parentShown: n, surfaceVisibleItems: r, overrides: i, onToggle: a }) {
+	let c = s(), l = f(e, n, r, i), u = l && (!r || r.includes(e.id) || i[e.id] === "shown");
+	return /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ _("div", {
 		className: "flex items-center justify-between gap-3 py-1.5",
 		style: { paddingLeft: t * 16 },
-		children: [/* @__PURE__ */ h("span", {
-			className: `truncate text-body-sm ${s ? "text-text-primary" : "text-text-muted"}`,
+		children: [/* @__PURE__ */ g("span", {
+			className: `truncate text-body-sm ${l ? "text-text-primary" : "text-text-muted"}`,
 			children: e.label
-		}), /* @__PURE__ */ h(o, {
-			checked: s,
+		}), /* @__PURE__ */ g(o, {
+			checked: l,
 			onCheckedChange: (t) => a(e, n, t === !0),
-			"aria-label": `Show ${e.label} in the menu`,
+			"aria-label": c("nav.showNamedItem", "Show {{label}} in the menu", { label: e.label }),
 			"data-testid": `persona-toggle-${e.id}`
 		})]
-	}), e.children?.map((e) => /* @__PURE__ */ h(_, {
+	}), e.children?.map((e) => /* @__PURE__ */ g(v, {
 		item: e,
 		depth: t + 1,
-		parentShown: c,
+		parentShown: u,
 		surfaceVisibleItems: r,
 		overrides: i,
 		onToggle: a
 	}, e.id))] });
 }
-function v(e, t, n) {
+function y(e, t, n) {
 	let r = [], i = (e, a) => {
 		for (let o of e) {
-			let e = u(o, a, t, n);
+			let e = f(o, a, t, n);
 			e && r.push(o.id);
 			let s = e && (!t || t.includes(o.id) || n[o.id] === "shown");
 			o.children && i(o.children, s);
@@ -41,203 +43,193 @@ function v(e, t, n) {
 	};
 	return i(e, !1), r;
 }
-function y({ groupLabels: o, groupOrder: m, everythingLabel: y = "Everything" }) {
-	let b = c(), x = s(), S = a((e) => e.items), [C, w] = p(""), [T, E] = p(null), [D, O] = p(!1), [k, A] = p(null), j = x?.hasPermission, M = x?.isLoading ?? !1, N = f(() => {
-		let e = S.filter((e) => e.visible !== !1);
-		return !j || M ? e : l(e, j);
+function b({ groupLabels: o, groupOrder: h, everythingLabel: b = "Everything" }) {
+	let x = s(), S = l(), C = c(), w = a((e) => e.items), [T, E] = m(""), [D, O] = m(null), [k, A] = m(!1), [j, M] = m(null), N = C?.hasPermission, P = C?.isLoading ?? !1, F = p(() => {
+		let e = w.filter((e) => e.visible !== !1);
+		return !N || P ? e : d(e, N);
 	}, [
-		S,
-		j,
-		M
+		w,
+		N,
+		P
 	]);
-	d(() => {
-		w(""), E(null), A(null);
-	}, [b?.customizeOpen ?? !1]);
-	let ee = f(() => {
+	ee(() => {
+		E(""), O(null), M(null);
+	}, [S?.customizeOpen ?? !1]);
+	let I = p(() => {
 		let e = /* @__PURE__ */ new Map();
-		for (let t of N) {
+		for (let t of F) {
 			let n = t.group ?? "__default__", r = e.get(n);
 			r ? r.push(t) : e.set(n, [t]);
 		}
-		return [...m ?? [], ...Array.from(e.keys()).filter((e) => !(m ?? []).includes(e))].filter((t) => (e.get(t)?.length ?? 0) > 0).map((t) => ({
+		return [...h ?? [], ...Array.from(e.keys()).filter((e) => !(h ?? []).includes(e))].filter((t) => (e.get(t)?.length ?? 0) > 0).map((t) => ({
 			key: t,
 			label: t === "__default__" ? null : o?.[t] ?? t,
 			items: e.get(t) ?? []
 		}));
 	}, [
-		N,
-		m,
+		F,
+		h,
 		o
 	]);
-	if (!b) return null;
-	let { activeSurfaceId: P, activeSurface: F, overrides: I, setItemOverride: L, resetOverrides: R, customizeOpen: z, setCustomizeOpen: te, simulation: B, customViews: ne, canManageViews: V, createCustomView: H, renameCustomView: U, deleteCustomView: W } = b, G = F ? F.visibleItems : null, K = (e, t, n) => {
-		let r = u(e, t, G, {});
-		L(e.id, n === r ? null : n ? "shown" : "hidden");
-	}, q = Object.keys(I).length, J = P === "everything" ? y : F?.label ?? P, Y = ne.find((e) => e.id === P) ?? null, X = async () => {
-		let e = C.trim();
-		if (!e || D) return;
-		O(!0), A(null);
-		let t = await H(e, v(N, G, I));
-		O(!1), t ? w("") : A("Could not save the view — try a different name.");
-	}, Z = async () => {
-		if (!Y || T === null || D) return;
+	if (!S) return null;
+	let { activeSurfaceId: L, activeSurface: R, overrides: z, setItemOverride: B, resetOverrides: V, customizeOpen: H, setCustomizeOpen: U, simulation: W, customViews: G, canManageViews: K, createCustomView: te, renameCustomView: ne, deleteCustomView: re } = S, q = R ? R.visibleItems : null, ie = (e, t, n) => {
+		let r = f(e, t, q, {});
+		B(e.id, n === r ? null : n ? "shown" : "hidden");
+	}, J = Object.keys(z).length, ae = L === "everything" ? b : R?.label ?? L, Y = G.find((e) => e.id === L) ?? null, X = async () => {
 		let e = T.trim();
+		if (!e || k) return;
+		A(!0), M(null);
+		let t = await te(e, y(F, q, z));
+		A(!1), t ? E("") : M(x("nav.saveViewError", "Could not save the view — try a different name."));
+	}, Z = async () => {
+		if (!Y || D === null || k) return;
+		let e = D.trim();
 		if (!e || e === Y.name) {
-			E(null);
+			O(null);
 			return;
 		}
-		O(!0), A(null);
-		let t = await U(Y.id, e);
-		O(!1), t ? E(null) : A("Could not rename the view — try a different name.");
-	}, re = async () => {
-		if (!Y || D) return;
-		O(!0), A(null);
-		let e = await W(Y.id);
-		O(!1), e || A("Could not delete the view.");
+		A(!0), M(null);
+		let t = await ne(Y.id, e);
+		A(!1), t ? O(null) : M(x("nav.renameViewError", "Could not rename the view — try a different name."));
+	}, oe = async () => {
+		if (!Y || k) return;
+		A(!0), M(null);
+		let e = await re(Y.id);
+		A(!1), e || M(x("nav.deleteViewError", "Could not delete the view."));
 	}, Q = "w-full rounded-button border border-border-subtle bg-bg-canvas px-3 py-2 text-body-sm text-text-primary placeholder:text-text-muted", $ = "rounded-button border border-border-subtle px-3 py-2 text-body-sm font-medium text-text-primary hover:bg-bg-sunken transition-colors disabled:opacity-50";
-	return /* @__PURE__ */ h(e, {
-		open: z,
-		onOpenChange: te,
-		children: /* @__PURE__ */ g(t, {
+	return /* @__PURE__ */ g(e, {
+		open: H,
+		onOpenChange: U,
+		children: /* @__PURE__ */ _(t, {
 			className: "max-h-[85vh] overflow-y-auto sm:max-w-lg",
-			children: [/* @__PURE__ */ g(r, { children: [/* @__PURE__ */ h(i, { children: "Customize menu" }), /* @__PURE__ */ g(n, { children: [
-				"Choose which pages appear in the",
-				" ",
-				/* @__PURE__ */ h("span", {
-					className: "font-medium text-text-primary",
-					children: J
-				}),
-				" view. Hidden pages stay one click away under “more” and in search — nothing is removed."
-			] })] }), /* @__PURE__ */ g("div", {
+			children: [/* @__PURE__ */ _(r, { children: [/* @__PURE__ */ g(i, { children: x("nav.customizeMenu", "Customize menu") }), /* @__PURE__ */ g(n, { children: u(x("nav.customizeDescription", "Choose which pages appear in the {{view}} view. Hidden pages stay one click away under “more” and in search — nothing is removed."), { view: /* @__PURE__ */ g("span", {
+				className: "font-medium text-text-primary",
+				children: ae
+			}) }) })] }), /* @__PURE__ */ _("div", {
 				className: "space-y-5",
 				children: [
-					Y && !B && /* @__PURE__ */ g("section", {
+					Y && !W && /* @__PURE__ */ _("section", {
 						className: "space-y-2",
 						"data-testid": "persona-dialog-manage-view",
-						children: [/* @__PURE__ */ h("h3", {
+						children: [/* @__PURE__ */ g("h3", {
 							className: "text-[11px] font-medium uppercase tracking-wider text-text-muted",
-							children: "This view"
-						}), T === null ? /* @__PURE__ */ g("div", {
+							children: x("nav.thisView", "This view")
+						}), D === null ? /* @__PURE__ */ _("div", {
 							className: "flex items-center gap-2",
 							children: [
-								/* @__PURE__ */ h("span", {
+								/* @__PURE__ */ g("span", {
 									className: "min-w-0 flex-1 truncate text-body-sm text-text-primary",
 									children: Y.name
 								}),
-								/* @__PURE__ */ h("button", {
+								/* @__PURE__ */ g("button", {
 									type: "button",
-									onClick: () => E(Y.name),
+									onClick: () => O(Y.name),
 									className: $,
 									"data-testid": "persona-dialog-rename-view",
-									children: "Rename"
+									children: x("files.common.actions.rename", "Rename")
 								}),
-								/* @__PURE__ */ h("button", {
+								/* @__PURE__ */ g("button", {
 									type: "button",
-									onClick: re,
-									disabled: D,
+									onClick: oe,
+									disabled: k,
 									className: `${$} text-status-error-text`,
 									"data-testid": "persona-dialog-delete-view",
-									children: "Delete"
+									children: x("common.actions.delete", "Delete")
 								})
 							]
-						}) : /* @__PURE__ */ g("div", {
+						}) : /* @__PURE__ */ _("div", {
 							className: "flex items-center gap-2",
-							children: [/* @__PURE__ */ h("input", {
-								value: T,
-								onChange: (e) => E(e.target.value),
+							children: [/* @__PURE__ */ g("input", {
+								value: D,
+								onChange: (e) => O(e.target.value),
 								onKeyDown: (e) => {
 									e.key === "Enter" && Z();
 								},
 								maxLength: 60,
 								className: Q,
 								"data-testid": "persona-dialog-rename-input"
-							}), /* @__PURE__ */ h("button", {
+							}), /* @__PURE__ */ g("button", {
 								type: "button",
 								onClick: () => void Z(),
-								disabled: D,
+								disabled: k,
 								className: $,
 								"data-testid": "persona-dialog-rename-save",
-								children: "Save"
+								children: x("common.save", "Save")
 							})]
 						})]
 					}),
-					/* @__PURE__ */ g("section", {
+					/* @__PURE__ */ _("section", {
 						className: "space-y-1",
 						"data-testid": "persona-dialog-items",
-						children: [/* @__PURE__ */ g("div", {
+						children: [/* @__PURE__ */ _("div", {
 							className: "flex items-center justify-between",
-							children: [/* @__PURE__ */ h("h3", {
+							children: [/* @__PURE__ */ g("h3", {
 								className: "text-[11px] font-medium uppercase tracking-wider text-text-muted",
-								children: "Menu items"
-							}), q > 0 && /* @__PURE__ */ g("button", {
+								children: x("nav.menuItems", "Menu items")
+							}), J > 0 && /* @__PURE__ */ g("button", {
 								type: "button",
-								onClick: R,
+								onClick: V,
 								className: "text-body-sm text-text-secondary underline-offset-2 hover:text-text-primary hover:underline",
 								"data-testid": "persona-dialog-reset-overrides",
-								children: [
-									"Reset ",
-									q,
-									" change",
-									q === 1 ? "" : "s"
-								]
+								children: J === 1 ? x("nav.resetOneChange", "Reset {{count}} change", { count: J }) : x("nav.resetChanges", "Reset {{count}} changes", { count: J })
 							})]
-						}), B ? /* @__PURE__ */ h("p", {
+						}), W ? /* @__PURE__ */ g("p", {
 							className: "py-2 text-body-sm text-text-muted",
-							children: "Exit role simulation to customize your own menu."
-						}) : ee.map((e) => /* @__PURE__ */ g("div", {
+							children: x("nav.exitSimulationHint", "Exit role simulation to customize your own menu.")
+						}) : I.map((e) => /* @__PURE__ */ _("div", {
 							className: "pt-2",
-							children: [e.label && /* @__PURE__ */ h("p", {
+							children: [e.label && /* @__PURE__ */ g("p", {
 								className: "pb-1 text-[11px] font-medium uppercase tracking-wider text-text-muted",
 								children: e.label
-							}), /* @__PURE__ */ h("div", {
+							}), /* @__PURE__ */ g("div", {
 								className: "divide-y divide-border-subtle",
-								children: e.items.map((e) => /* @__PURE__ */ h(_, {
+								children: e.items.map((e) => /* @__PURE__ */ g(v, {
 									item: e,
 									depth: 0,
 									parentShown: !1,
-									surfaceVisibleItems: G,
-									overrides: I,
-									onToggle: K
+									surfaceVisibleItems: q,
+									overrides: z,
+									onToggle: ie
 								}, e.id))
 							})]
 						}, e.key))]
 					}),
-					V && !B && /* @__PURE__ */ g("section", {
+					K && !W && /* @__PURE__ */ _("section", {
 						className: "space-y-2",
 						"data-testid": "persona-dialog-save-view",
 						children: [
-							/* @__PURE__ */ h("h3", {
+							/* @__PURE__ */ g("h3", {
 								className: "text-[11px] font-medium uppercase tracking-wider text-text-muted",
-								children: "Save as new view"
+								children: x("nav.saveAsNewView", "Save as new view")
 							}),
-							/* @__PURE__ */ h("p", {
+							/* @__PURE__ */ g("p", {
 								className: "text-body-sm text-text-muted",
-								children: "Saves the menu exactly as configured above as your own view, available on all your devices."
+								children: x("nav.saveViewHelp", "Saves the menu exactly as configured above as your own view, available on all your devices.")
 							}),
-							/* @__PURE__ */ g("div", {
+							/* @__PURE__ */ _("div", {
 								className: "flex items-center gap-2",
-								children: [/* @__PURE__ */ h("input", {
-									value: C,
-									onChange: (e) => w(e.target.value),
+								children: [/* @__PURE__ */ g("input", {
+									value: T,
+									onChange: (e) => E(e.target.value),
 									onKeyDown: (e) => {
 										e.key === "Enter" && X();
 									},
-									placeholder: "View name (e.g. Harvest season)",
+									placeholder: x("nav.viewNamePlaceholder", "View name (e.g. Harvest season)"),
 									maxLength: 60,
 									className: Q,
 									"data-testid": "persona-dialog-new-view-name"
-								}), /* @__PURE__ */ h("button", {
+								}), /* @__PURE__ */ g("button", {
 									type: "button",
 									onClick: () => void X(),
-									disabled: D || !C.trim(),
+									disabled: k || !T.trim(),
 									className: $,
 									"data-testid": "persona-dialog-new-view-save",
-									children: "Save"
+									children: x("common.save", "Save")
 								})]
 							}),
-							k && /* @__PURE__ */ h("p", {
+							j && /* @__PURE__ */ g("p", {
 								className: "text-body-sm text-status-error-text",
-								children: k
+								children: j
 							})
 						]
 					})
@@ -247,4 +239,4 @@ function y({ groupLabels: o, groupOrder: m, everythingLabel: y = "Everything" })
 	});
 }
 //#endregion
-export { y as NavCustomizeDialog };
+export { b as NavCustomizeDialog };

package/dist/chrome/PanelTabs.js

@@ -1,44 +1,48 @@
-import { Maximize2 as e, Minimize2 as t, Minus as n, X as r } from "lucide-react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useShellLabel as e } from "../shared/providers/shell/useShellLabel.js";
+import { Maximize2 as t, Minimize2 as n, Minus as r, X as i } from "lucide-react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/chrome/PanelTabs.tsx
-var o = ({ tabs: o, activeTabId: s, onTabClick: c, onClose: l, onMinimize: u, onMaximize: d, isMaximized: f }) => /* @__PURE__ */ a("div", {
-	className: "flex items-center justify-between border-b border-border-subtle bg-bg-sunken h-9 px-2 flex-shrink-0",
-	children: [/* @__PURE__ */ i("div", {
-		className: "flex items-center gap-0.5 overflow-x-auto",
-		children: o.map((e) => {
-			let t = e.icon;
-			return /* @__PURE__ */ a("button", {
-				onClick: () => c(e.id),
-				className: `flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-t transition-colors ${e.id === s ? "bg-bg-surface text-text-primary border-b-2 border-action-primary-bg" : "text-text-secondary hover:text-text-primary hover:bg-bg-surface"}`,
-				children: [t && /* @__PURE__ */ i(t, { className: "size-3.5" }), /* @__PURE__ */ i("span", { children: e.title })]
-			}, e.id);
-		})
-	}), /* @__PURE__ */ a("div", {
-		className: "flex items-center gap-0.5",
-		children: [
-			u && /* @__PURE__ */ i("button", {
-				type: "button",
-				onClick: u,
-				className: "p-1 rounded text-text-muted hover:text-text-primary hover:bg-bg-sunken transition-colors",
-				"aria-label": "Minimize panel",
-				children: /* @__PURE__ */ i(n, { className: "size-3.5" })
-			}),
-			d && /* @__PURE__ */ i("button", {
-				type: "button",
-				onClick: d,
-				className: "p-1 rounded text-text-muted hover:text-text-primary hover:bg-bg-sunken transition-colors",
-				"aria-label": f ? "Restore panel" : "Maximize panel",
-				children: i(f ? t : e, { className: "size-3.5" })
-			}),
-			/* @__PURE__ */ i("button", {
-				type: "button",
-				onClick: l,
-				className: "p-1 rounded text-text-muted hover:text-text-primary hover:bg-bg-sunken transition-colors",
-				"aria-label": "Close panel",
-				children: /* @__PURE__ */ i(r, { className: "size-3.5" })
+var s = ({ tabs: s, activeTabId: c, onTabClick: l, onClose: u, onMinimize: d, onMaximize: f, isMaximized: p }) => {
+	let m = e();
+	return /* @__PURE__ */ o("div", {
+		className: "flex items-center justify-between border-b border-border-subtle bg-bg-sunken h-9 px-2 flex-shrink-0",
+		children: [/* @__PURE__ */ a("div", {
+			className: "flex items-center gap-0.5 overflow-x-auto",
+			children: s.map((e) => {
+				let t = e.icon;
+				return /* @__PURE__ */ o("button", {
+					onClick: () => l(e.id),
+					className: `flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-t transition-colors ${e.id === c ? "bg-bg-surface text-text-primary border-b-2 border-action-primary-bg" : "text-text-secondary hover:text-text-primary hover:bg-bg-surface"}`,
+					children: [t && /* @__PURE__ */ a(t, { className: "size-3.5" }), /* @__PURE__ */ a("span", { children: e.title })]
+				}, e.id);
 			})
-		]
-	})]
-});
+		}), /* @__PURE__ */ o("div", {
+			className: "flex items-center gap-0.5",
+			children: [
+				d && /* @__PURE__ */ a("button", {
+					type: "button",
+					onClick: d,
+					className: "p-1 rounded text-text-muted hover:text-text-primary hover:bg-bg-sunken transition-colors",
+					"aria-label": m("appShell.minimizePanel", "Minimize panel"),
+					children: /* @__PURE__ */ a(r, { className: "size-3.5" })
+				}),
+				f && /* @__PURE__ */ a("button", {
+					type: "button",
+					onClick: f,
+					className: "p-1 rounded text-text-muted hover:text-text-primary hover:bg-bg-sunken transition-colors",
+					"aria-label": p ? m("appShell.restorePanel", "Restore panel") : m("appShell.maximizePanel", "Maximize panel"),
+					children: a(p ? n : t, { className: "size-3.5" })
+				}),
+				/* @__PURE__ */ a("button", {
+					type: "button",
+					onClick: u,
+					className: "p-1 rounded text-text-muted hover:text-text-primary hover:bg-bg-sunken transition-colors",
+					"aria-label": m("notifCommon.closePanel", "Close panel"),
+					children: /* @__PURE__ */ a(i, { className: "size-3.5" })
+				})
+			]
+		})]
+	});
+};
 //#endregion
-export { o as PanelTabs };
+export { s as PanelTabs };

package/dist/chrome/PersonaSurfaceControls.d.ts

@@ -1,20 +1,3 @@
-/**
- * PersonaSurfaceControls — sidebar-footer widget for persona surfaces.
- *
- * Rendered automatically by ProductSideNav when a PersonaSurfaceProvider is
- * mounted. One compact row: a searchable VIEW DROPDOWN (the user's surfaces —
- * their own role preselected and marked — plus Everything, and, for workspace
- * admins / super admins, a "Preview a role" section) and a Customize button
- * that opens the per-item visibility dialog. The dropdown panel portals to
- * document.body with a stable width (min 300px, clamped to the viewport) and
- * tracks the trigger's rect — anchored inside the sidebar it would inherit
- * the sidebar's animating width and be clipped by the aside's
- * overflow-x-hidden. No backdrop/overlay, so it never deadens the nav or the
- * mobile drawer. During role preview the trigger tints amber and an "Exit
- * preview" row appears; a viewport-fixed pill (rendered by ProductSideNav
- * OUTSIDE the aside — its backdrop-filter would trap fixed positioning)
- * mirrors the state on all breakpoints.
- */
 export interface PersonaSurfaceControlsProps {
     /** Label for the built-in uncurated surface. @default "Everything" */
     everythingLabel?: string;