@burdenoff/fe-libs 2026.1021.5 → 2026.1021.7

package/README.md

@@ -122,6 +122,41 @@ plain browser (persisted in `sessionStorage`, cleared with `off`). It is
 `public/manifest.json` and `public/sw.js` from its `native.config.json`
 (`NativeConfig`).
 
+## Raw colours, canvas tokens and the shared ESLint guard
+
+UI code uses semantic tokens only. `createEslintConfig()` from
+`@burdenoff/fe-libs/shared/config/eslint.config.mjs` reports, as an **error**,
+hex / `rgb()` / `hsl()` / `oklch()` literals and Tailwind palette classes
+(`bg-red-500`, `text-white`, `border-t-gray-200`, …) in string literals and
+template strings. Comments and test files are not checked.
+
+- A repo that still carries raw-colour debt can pass `rawColors: 'warn'` while
+  it sweeps; treat that as a tracked, temporary opt-out.
+- A repo with a standalone ESLint config applies the same guard with
+  `'no-restricted-syntax': ['error', ...rawColorRestrictedSyntax()]`.
+
+Workflow builders, graphs and mappers use the canvas tokens in `tokens.css`.
+Each one aliases an existing `chart-*` / `status-*` / surface token, so it
+follows light/dark mode, the brand and the expressive themes:
+
+| Group | Tokens |
+|---|---|
+| Canvas | `--color-canvas-{bg,grid,selection,minimap-bg,minimap-node,minimap-mask,control-bg}` |
+| Node surface | `--color-node-{bg,bg-hover,border,border-hover,border-selected,text,text-muted,handle,handle-connected}` |
+| Node category | `--color-node-{trigger,action,logic,loop,data,integration,ai,human,utility,end,default}` plus `-subtle` |
+| Node state | `--color-node-state-{idle,queued,running,success,warning,error,skipped}` |
+| Edge | `--color-edge-{default,hover,selected,active,success,error,compatible,incompatible,label-bg,label-text}` |
+| Data type | `--color-datatype-{string,number,boolean,object,array,date,binary,any}` |
+
+`app-shell.css` maps them to Tailwind utilities (`bg-node-trigger`,
+`stroke-edge-default`, `ring-node-state-running`, …). A shell with its own
+`@theme` imports `@burdenoff/fe-libs/shared/styles/canvas-theme.css` instead.
+For React Flow props, SVG attributes and inline styles, use the helpers in
+`@burdenoff/fe-libs/shared/utils` (`nodeCategoryColor`, `edgeColor`,
+`nodeStateColor`, `dataTypeColor`, `chartSeriesColor(chartSeriesIndex(key))`)
+and the literal class records (`nodeCategoryClasses`, `nodeStateRingClasses`,
+`dataTypeTextClasses`).
+
 ## Tech Stack
 
 - React 19

package/dist/chrome/AccountSwitcher.js

@@ -1,5 +1,5 @@
-import { Sheet as e, SheetContent as t, SheetHeader as n, SheetTitle as r } from "../ui/sheet.js";
-import { useShellLabel as i } from "../shared/providers/shell/useShellLabel.js";
+import { useShellLabel as e } from "../shared/providers/shell/useShellLabel.js";
+import { Sheet as t, SheetContent as n, SheetHeader as r, SheetTitle as i } from "../ui/sheet.js";
 import { useEffect as a, useRef as o, useState as s } from "react";
 import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/chrome/AccountSwitcher.tsx
@@ -16,7 +16,7 @@ function f(e, t, n) {
 	return r.length >= 2 ? `${r[0].charAt(0)}${r[1].charAt(0)}`.toUpperCase() : e.substring(0, 2).toUpperCase();
 }
 var p = ({ accounts: p, activeAccountId: m, onSwitchAccount: h, onAddAccount: g, onRemoveAccount: _, onLogoutAll: v, compact: y = !1 }) => {
-	let b = i(), [x, S] = s(!1), C = d(), w = o(null), T = p.find((e) => e.id === m) || p[0], E = p.filter((e) => e.id !== m);
+	let b = e(), [x, S] = s(!1), C = d(), w = o(null), T = p.find((e) => e.id === m) || p[0], E = p.filter((e) => e.id !== m);
 	a(() => {
 		if (C) return;
 		let e = (e) => {
@@ -194,15 +194,15 @@ var p = ({ accounts: p, activeAccountId: m, onSwitchAccount: h, onAddAccount: g,
 	});
 	return C ? /* @__PURE__ */ u("div", {
 		className: "relative",
-		children: [A, /* @__PURE__ */ l(e, {
+		children: [A, /* @__PURE__ */ l(t, {
 			open: x,
 			onOpenChange: S,
-			children: /* @__PURE__ */ u(t, {
+			children: /* @__PURE__ */ u(n, {
 				side: "bottom",
 				className: "h-auto max-h-[70vh] flex flex-col p-0",
-				children: [/* @__PURE__ */ l(n, {
+				children: [/* @__PURE__ */ l(r, {
 					className: "px-4 pt-4 pb-2 border-b border-border-subtle",
-					children: /* @__PURE__ */ l(r, {
+					children: /* @__PURE__ */ l(i, {
 						className: "text-text-primary",
 						children: b("userMenu.accounts", "Accounts")
 					})

package/dist/chrome/AutoBreadcrumbs.js

@@ -1,5 +1,5 @@
-import { useNavRegistryStore as e } from "../shared/hooks/shell/useNavRegistry.js";
-import { useShellLabel as t } from "../shared/providers/shell/useShellLabel.js";
+import { useShellLabel as e } from "../shared/providers/shell/useShellLabel.js";
+import { useNavRegistryStore as t } from "../shared/hooks/shell/useNavRegistry.js";
 import { useSafeShellUi as n } from "../shared/providers/shell/ShellUiProvider.js";
 import { resolveBreadcrumbLabel as r } from "./breadcrumbLabel.js";
 import { useEffect as i, useMemo as a, useState as o } from "react";
@@ -19,7 +19,7 @@ typeof window < "u" && (window.__breadcrumbRegistry = {
 	unregister: v
 });
 function y() {
-	let _ = p(), v = m(), y = t(), b = e((e) => e.items), x = n(), [S, C] = o(0);
+	let _ = p(), v = m(), y = e(), b = t((e) => e.items), x = n(), [S, C] = o(0);
 	i(() => {
 		let e = setInterval(() => {
 			C((e) => e + 1);

package/dist/chrome/Breadcrumbs.js

@@ -1,5 +1,5 @@
-import { cn as e } from "../shared-utils.js";
-import { useShellLabel as t } from "../shared/providers/shell/useShellLabel.js";
+import { useShellLabel as e } from "../shared/providers/shell/useShellLabel.js";
+import { cn as t } from "../shared-utils.js";
 import { Fragment as n, useMemo as r } from "react";
 import { ChevronRight as i, Home as a } from "lucide-react";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
@@ -9,7 +9,7 @@ var c = /* @__PURE__ */ o(i, {
 	className: "size-3.5 shrink-0 text-text-muted opacity-70",
 	strokeWidth: 2
 }), l = "inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-text-secondary transition-colors duration-150 hover:bg-bg-sunken hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-strong", u = "inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 font-semibold text-text-primary cursor-default", d = ({ items: i, separator: d, showHome: f = !0, onHomeClick: p, maxItems: m = 5, className: h }) => {
-	let g = t(), _ = r(() => i.length <= m ? i : [
+	let g = e(), _ = r(() => i.length <= m ? i : [
 		i[0],
 		{
 			label: "...",
@@ -19,7 +19,7 @@ var c = /* @__PURE__ */ o(i, {
 	], [i, m]), v = d ?? c;
 	return /* @__PURE__ */ o("nav", {
 		"aria-label": g("nav.breadcrumb", "Breadcrumb"),
-		className: e("flex min-w-0 items-center gap-1 text-[13px] font-medium", h),
+		className: t("flex min-w-0 items-center gap-1 text-[13px] font-medium", h),
 		children: /* @__PURE__ */ s("ol", {
 			className: "flex min-w-0 flex-wrap items-center gap-0.5",
 			children: [f && /* @__PURE__ */ o("li", {
@@ -27,13 +27,13 @@ var c = /* @__PURE__ */ o(i, {
 				children: /* @__PURE__ */ o("button", {
 					type: "button",
 					onClick: p,
-					className: e(l, "p-1.5"),
+					className: t(l, "p-1.5"),
 					"aria-label": g("nav.home", "Home"),
 					children: /* @__PURE__ */ o(a, { className: "size-3.5" })
 				})
-			}), _.map((t, r) => {
-				if (!t) return null;
-				let i = "isEllipsis" in t && t.isEllipsis;
+			}), _.map((e, r) => {
+				if (!e) return null;
+				let i = "isEllipsis" in e && e.isEllipsis;
 				return /* @__PURE__ */ s(n, { children: [(f || r > 0) && /* @__PURE__ */ o("li", {
 					"aria-hidden": "true",
 					className: "flex items-center px-0.5",
@@ -44,38 +44,38 @@ var c = /* @__PURE__ */ o(i, {
 						className: "px-1 text-text-muted",
 						"aria-hidden": "true",
 						children: "…"
-					}) : t.isCurrentPage ? /* @__PURE__ */ s("span", {
-						className: e(u, "max-w-[260px] truncate"),
+					}) : e.isCurrentPage ? /* @__PURE__ */ s("span", {
+						className: t(u, "max-w-[260px] truncate"),
 						"aria-current": "page",
-						children: [t.icon && /* @__PURE__ */ o("span", {
+						children: [e.icon && /* @__PURE__ */ o("span", {
 							className: "flex items-center",
-							children: t.icon
+							children: e.icon
 						}), /* @__PURE__ */ o("span", {
 							className: "truncate",
-							children: t.label
+							children: e.label
 						})]
-					}) : t.href || t.onClick ? /* @__PURE__ */ s("button", {
+					}) : e.href || e.onClick ? /* @__PURE__ */ s("button", {
 						type: "button",
-						onClick: t.onClick,
-						className: e(l, "max-w-[180px] truncate"),
-						children: [t.icon && /* @__PURE__ */ o("span", {
+						onClick: e.onClick,
+						className: t(l, "max-w-[180px] truncate"),
+						children: [e.icon && /* @__PURE__ */ o("span", {
 							className: "flex items-center",
-							children: t.icon
+							children: e.icon
 						}), /* @__PURE__ */ o("span", {
 							className: "truncate",
-							children: t.label
+							children: e.label
 						})]
 					}) : /* @__PURE__ */ s("span", {
-						className: e(l, "pointer-events-none max-w-[180px] truncate"),
-						children: [t.icon && /* @__PURE__ */ o("span", {
+						className: t(l, "pointer-events-none max-w-[180px] truncate"),
+						children: [e.icon && /* @__PURE__ */ o("span", {
 							className: "flex items-center",
-							children: t.icon
+							children: e.icon
 						}), /* @__PURE__ */ o("span", {
 							className: "truncate",
-							children: t.label
+							children: e.label
 						})]
 					})
-				})] }, `${t.label}-${r}`);
+				})] }, `${e.label}-${r}`);
 			})]
 		})
 	});

package/dist/chrome/ContextSwitcher.js

@@ -1,5 +1,5 @@
-import { Sheet as e, SheetContent as t, SheetHeader as n, SheetTitle as r } from "../ui/sheet.js";
-import { useShellLabel as i } from "../shared/providers/shell/useShellLabel.js";
+import { useShellLabel as e } from "../shared/providers/shell/useShellLabel.js";
+import { Sheet as t, SheetContent as n, SheetHeader as r, SheetTitle as i } from "../ui/sheet.js";
 import { useAssistantControl as a } from "../shared/assistant/appControls/useAssistantControl.js";
 import { EscapeLayer as ee } from "../shared/components/EscapeLayer.js";
 import { useIsMobile as te } from "./contextSwitcher/useIsMobile.js";
@@ -13,7 +13,7 @@ import { useCallback as f, useEffect as p, useMemo as m, useRef as h, useState a
 import { Fragment as ne, jsx as _, jsxs as v } from "react/jsx-runtime";
 //#region src/chrome/ContextSwitcher.tsx
 var y = ({ organizations: y, workspaces: b, projects: x, currentOrganizationId: S, currentWorkspaceId: C, currentProjectId: w, onOrganizationChange: T, onWorkspaceChange: E, onProjectChange: D, onWorkspaceWideChange: O, compact: re = !1 }) => {
-	let k = i(), [A, j] = g(!1), [M, N] = g(() => S ? "workspace" : "org"), [P, F] = g({
+	let k = e(), [A, j] = g(!1), [M, N] = g(() => S ? "workspace" : "org"), [P, F] = g({
 		org: "",
 		workspace: "",
 		project: ""
@@ -148,15 +148,15 @@ var y = ({ organizations: y, workspaces: b, projects: x, currentOrganizationId:
 	});
 	return I ? /* @__PURE__ */ v("div", {
 		className: "relative",
-		children: [$, /* @__PURE__ */ _(e, {
+		children: [$, /* @__PURE__ */ _(t, {
 			open: A,
 			onOpenChange: j,
-			children: /* @__PURE__ */ v(t, {
+			children: /* @__PURE__ */ v(n, {
 				side: "bottom",
 				className: "h-[70vh] flex flex-col p-0",
-				children: [/* @__PURE__ */ _(n, {
+				children: [/* @__PURE__ */ _(r, {
 					className: "px-4 pt-4 pb-2 border-b border-[var(--color-border-subtle)]",
-					children: /* @__PURE__ */ _(r, {
+					children: /* @__PURE__ */ _(i, {
 						className: "text-[var(--color-text-primary)]",
 						children: k("contextSwitcher.title", "Switch Context")
 					})

package/dist/chrome/DynamicFooter.js

@@ -1,7 +1,7 @@
 import { useGatewayClient as e } from "../shared/graphql/GatewayContext.js";
 import "../shared-graphql.js";
-import { useActiveContext as t } from "../shared/providers/shell/ActiveContextProvider.js";
-import { useI18n as n } from "../shared/providers/shell/I18nProvider.js";
+import { useI18n as t } from "../shared/providers/shell/I18nProvider.js";
+import { useActiveContext as n } from "../shared/providers/shell/ActiveContextProvider.js";
 import { DEFAULT_FOOTER_COLUMNS as r, DEFAULT_SOCIAL_LINKS as i, Footer as a } from "./Footer.js";
 import { BrandMark as o } from "./BrandMark.js";
 import { useEffect as s, useMemo as c, useState as l } from "react";
@@ -61,7 +61,7 @@ function w(e) {
 	return e.trim().replace(/[^A-Za-z0-9 ]/g, "").split(/\s+/).map((e, t) => t === 0 ? e.toLowerCase() : e.charAt(0).toUpperCase() + e.slice(1).toLowerCase()).join("");
 }
 function T({ productSlug: u, productName: f, tagline: p, version: m = "v1.0.0", columns: h, socialLinks: _, legalPageOrder: T = C, deferRemoteData: E = !1, hideOnInstalledApp: D = !0 }) {
-	let { workspaceId: O, projectId: k } = t(), A = e("global"), { t: j } = n(), [M, N] = l(null), [P, F] = l(null);
+	let { workspaceId: O, projectId: k } = n(), A = e("global"), { t: j } = t(), [M, N] = l(null), [P, F] = l(null);
 	s(() => {
 		if (!A || E) return;
 		let e = !1;

package/dist/chrome/HeaderThemeSwitcher.js

@@ -1,6 +1,6 @@
-import { DropdownMenu as e, DropdownMenuContent as t, DropdownMenuItem as n, DropdownMenuLabel as r, DropdownMenuSeparator as i, DropdownMenuTrigger as a } from "../ui/dropdown-menu.js";
-import { useTheme as o } from "../shared/providers/shell/ThemeProvider.js";
-import { useShellLabel as s } from "../shared/providers/shell/useShellLabel.js";
+import { useShellLabel as e } from "../shared/providers/shell/useShellLabel.js";
+import { DropdownMenu as t, DropdownMenuContent as n, DropdownMenuItem as r, DropdownMenuLabel as i, DropdownMenuSeparator as a, DropdownMenuTrigger as o } from "../ui/dropdown-menu.js";
+import { useTheme as s } from "../shared/providers/shell/ThemeProvider.js";
 import { useExclusiveMenu as c } from "../shared/hooks/useExclusiveMenu.js";
 import { useThemeOptionLabels as l } from "./useThemeOptionLabels.js";
 import { cn as u } from "../utils/cn.js";
@@ -42,37 +42,37 @@ var w = {
 		label: "High contrast"
 	}
 ];
-function E({ mobileOptimized: n = !0 }) {
+function E({ mobileOptimized: r = !0 }) {
 	let [p, m] = f(!1);
 	c("header-theme", p, d(() => m(!1), []));
-	let { mode: y, setMode: b, resolvedTheme: x } = o(), E = s(), O = l(), k = E("themeSwitcher.label", "Theme"), A = x === "dark" ? g : v, j = d((e) => b(e), [b]);
-	return /* @__PURE__ */ C(e, {
+	let { mode: y, setMode: b, resolvedTheme: x } = s(), E = e(), O = l(), k = E("themeSwitcher.label", "Theme"), A = x === "dark" ? g : v, j = d((e) => b(e), [b]);
+	return /* @__PURE__ */ C(t, {
 		open: p,
 		onOpenChange: m,
-		children: [/* @__PURE__ */ S(a, {
+		children: [/* @__PURE__ */ S(o, {
 			asChild: !0,
 			children: /* @__PURE__ */ S("button", {
 				type: "button",
 				"aria-label": k,
 				title: k,
-				className: u("flex size-9 items-center justify-center rounded-button text-text-primary transition-colors", "hover:bg-bg-sunken focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]", n ? "hidden md:flex" : ""),
+				className: u("flex size-9 items-center justify-center rounded-button text-text-primary transition-colors", "hover:bg-bg-sunken focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]", r ? "hidden md:flex" : ""),
 				children: /* @__PURE__ */ S(A, {
 					className: "size-5",
 					"aria-hidden": "true"
 				})
 			})
-		}), /* @__PURE__ */ C(t, {
+		}), /* @__PURE__ */ C(n, {
 			align: "end",
 			className: "w-56",
 			children: [
-				/* @__PURE__ */ C(r, {
+				/* @__PURE__ */ C(i, {
 					className: "flex items-center gap-2 text-text-secondary",
 					children: [/* @__PURE__ */ S(_, {
 						className: "size-4",
 						"aria-hidden": "true"
 					}), E("themeSwitcher.heading", "Appearance")]
 				}),
-				/* @__PURE__ */ S(i, {}),
+				/* @__PURE__ */ S(a, {}),
 				/* @__PURE__ */ S(D, {
 					active: y === "system",
 					icon: h,
@@ -89,8 +89,8 @@ function E({ mobileOptimized: n = !0 }) {
 		})]
 	});
 }
-function D({ active: e, icon: t, label: r, onSelect: i }) {
-	return /* @__PURE__ */ C(n, {
+function D({ active: e, icon: t, label: n, onSelect: i }) {
+	return /* @__PURE__ */ C(r, {
 		onSelect: i,
 		className: u("gap-2", e && "bg-[var(--color-accent-soft)] text-text-primary"),
 		children: [
@@ -100,7 +100,7 @@ function D({ active: e, icon: t, label: r, onSelect: i }) {
 			}),
 			/* @__PURE__ */ S("span", {
 				className: "flex-1",
-				children: r
+				children: n
 			}),
 			e && /* @__PURE__ */ S(p, {
 				className: "size-4 text-action-primary-bg",

package/dist/chrome/LanguagePickerSheet.js

@@ -1,20 +1,20 @@
-import { Sheet as e, SheetContent as t, SheetHeader as n, SheetTitle as r } from "../ui/sheet.js";
-import { useShellLabel as i } from "../shared/providers/shell/useShellLabel.js";
+import { useShellLabel as e } from "../shared/providers/shell/useShellLabel.js";
+import { Sheet as t, SheetContent as n, SheetHeader as r, SheetTitle as i } from "../ui/sheet.js";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/chrome/LanguagePickerSheet.tsx
 var s = ({ open: s, onOpenChange: c, languages: l, currentLanguage: u, onLanguageChange: d }) => {
-	let f = i(), p = (e) => {
+	let f = e(), p = (e) => {
 		d && d(e), c(!1);
 	};
-	return /* @__PURE__ */ a(e, {
+	return /* @__PURE__ */ a(t, {
 		open: s,
 		onOpenChange: c,
-		children: /* @__PURE__ */ o(t, {
+		children: /* @__PURE__ */ o(n, {
 			side: "bottom",
 			className: "h-[60vh] flex flex-col p-0",
-			children: [/* @__PURE__ */ a(n, {
+			children: [/* @__PURE__ */ a(r, {
 				className: "px-4 pt-4 pb-2 border-b border-border-subtle",
-				children: /* @__PURE__ */ a(r, {
+				children: /* @__PURE__ */ a(i, {
 					className: "text-text-primary",
 					children: f("languageSwitcher.title", "Select Language")
 				})

package/dist/chrome/NativeTopBar.js

@@ -1,6 +1,6 @@
 import { cn as e } from "../lib/utils.js";
-import { nativeImpact as t } from "../shared/native/consumers.js";
-import { useShellLabel as n } from "../shared/providers/shell/useShellLabel.js";
+import { useShellLabel as t } from "../shared/providers/shell/useShellLabel.js";
+import { nativeImpact as n } from "../shared/native/consumers.js";
 import { useLayoutEffect as r, useRef as i, useState as a } from "react";
 import { ChevronLeft as o } from "lucide-react";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
@@ -17,7 +17,7 @@ function d() {
 	return !1;
 }
 function f({ title: f, backLabel: p, onBack: m, rightActions: h, leftSlot: g, showBack: _, className: v }) {
-	let y = n(), b = l(), x = i(null), [S] = a(d), C = _ ?? S, w = p ?? y("nav.back", "Back");
+	let y = t(), b = l(), x = i(null), [S] = a(d), C = _ ?? S, w = p ?? y("nav.back", "Back");
 	return r(() => {
 		let e = x.current;
 		if (!e || typeof window > "u") return;
@@ -40,7 +40,7 @@ function f({ title: f, backLabel: p, onBack: m, rightActions: h, leftSlot: g, sh
 					children: C ? /* @__PURE__ */ c("button", {
 						type: "button",
 						onClick: () => {
-							t("light"), m ? m() : b(-1);
+							n("light"), m ? m() : b(-1);
 						},
 						"aria-label": w,
 						className: "native-topbar__back flex min-h-11 items-center gap-0.5 pr-2 text-text-link",

package/dist/chrome/NavCustomizeDialog.js

@@ -1,7 +1,7 @@
 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 { useShellLabel as s } from "../shared/providers/shell/useShellLabel.js";
+import { useShellLabel as a } from "../shared/providers/shell/useShellLabel.js";
+import { useNavRegistryStore as o } from "../shared/hooks/shell/useNavRegistry.js";
+import { Switch as s } from "../ui/switch.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";
@@ -9,17 +9,17 @@ import { applyPermissionFilter as d, isItemEffectivelyShown as f } from "./sideN
 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 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");
+function v({ item: e, depth: t, parentShown: n, surfaceVisibleItems: r, overrides: i, onToggle: o }) {
+	let c = a(), 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__ */ g("span", {
 			className: `truncate text-body-sm ${l ? "text-text-primary" : "text-text-muted"}`,
 			children: e.label
-		}), /* @__PURE__ */ g(o, {
+		}), /* @__PURE__ */ g(s, {
 			checked: l,
-			onCheckedChange: (t) => a(e, n, t === !0),
+			onCheckedChange: (t) => o(e, n, t === !0),
 			"aria-label": c("nav.showNamedItem", "Show {{label}} in the menu", { label: e.label }),
 			"data-testid": `persona-toggle-${e.id}`
 		})]
@@ -29,7 +29,7 @@ function v({ item: e, depth: t, parentShown: n, surfaceVisibleItems: r, override
 		parentShown: u,
 		surfaceVisibleItems: r,
 		overrides: i,
-		onToggle: a
+		onToggle: o
 	}, e.id))] });
 }
 function y(e, t, n) {
@@ -43,8 +43,8 @@ function y(e, t, n) {
 	};
 	return i(e, !1), r;
 }
-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(() => {
+function b({ groupLabels: s, groupOrder: h, everythingLabel: b = "Everything" }) {
+	let x = a(), S = l(), C = c(), w = o((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);
 	}, [
@@ -63,13 +63,13 @@ function b({ groupLabels: o, groupOrder: h, everythingLabel: b = "Everything" })
 		}
 		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,
+			label: t === "__default__" ? null : s?.[t] ?? t,
 			items: e.get(t) ?? []
 		}));
 	}, [
 		F,
 		h,
-		o
+		s
 	]);
 	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) => {

package/dist/chrome/ProductPickerSheet.js

@@ -1,6 +1,6 @@
 import { isSameProductSlug as e } from "../shared/config/productSlug.js";
-import { Sheet as t, SheetContent as n, SheetHeader as r, SheetTitle as i } from "../ui/sheet.js";
-import { useShellLabel as a } from "../shared/providers/shell/useShellLabel.js";
+import { useShellLabel as t } from "../shared/providers/shell/useShellLabel.js";
+import { Sheet as n, SheetContent as r, SheetHeader as i, SheetTitle as a } from "../ui/sheet.js";
 import { filterProducts as o, resolveProductLogo as s } from "./ProductSwitcher.js";
 import { useMemo as c, useState as l } from "react";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
@@ -26,21 +26,21 @@ var f = 6, p = ({ product: e }) => {
 		})
 	});
 }, m = ({ open: s, onOpenChange: m, products: h, currentProductId: g, onProductChange: _ }) => {
-	let v = a(), [y, b] = l(""), x = h.length > f, S = c(() => o(h, y), [h, y]), C = (e) => {
+	let v = t(), [y, b] = l(""), x = h.length > f, S = c(() => o(h, y), [h, y]), C = (e) => {
 		_ && _(e), m(!1);
 	};
-	return /* @__PURE__ */ u(t, {
+	return /* @__PURE__ */ u(n, {
 		open: s,
 		onOpenChange: (e) => {
 			e || b(""), m(e);
 		},
-		children: /* @__PURE__ */ d(n, {
+		children: /* @__PURE__ */ d(r, {
 			side: "bottom",
 			className: "h-[60vh] flex flex-col p-0",
 			children: [
-				/* @__PURE__ */ u(r, {
+				/* @__PURE__ */ u(i, {
 					className: "px-4 pt-4 pb-2 border-b border-border-subtle",
-					children: /* @__PURE__ */ u(i, {
+					children: /* @__PURE__ */ u(a, {
 						className: "text-text-primary",
 						children: v("productSwitcher.title", "Switch Product")
 					})

package/dist/chrome/SideNavigation.js

@@ -1,5 +1,5 @@
-import { Tooltip as e, TooltipContent as t, TooltipProvider as n, TooltipTrigger as r } from "../ui/tooltip.js";
-import { useShellLabel as i } from "../shared/providers/shell/useShellLabel.js";
+import { useShellLabel as e } from "../shared/providers/shell/useShellLabel.js";
+import { Tooltip as t, TooltipContent as n, TooltipProvider as r, TooltipTrigger as i } from "../ui/tooltip.js";
 import { useAssistantControl as a } from "../shared/assistant/appControls/useAssistantControl.js";
 import "./sideNavigation/navVisibility.js";
 import { NavItemRenderer as o } from "./sideNavigation/NavItemRenderer.js";
@@ -58,7 +58,7 @@ var h = ({ items: h, currentPath: g, collapsed: _ = !1, onItemClick: v, onToggle
 			return n.expandedItems.has(e) === t ? { status: "already" } : (n.toggleExpand(e), { status: "done" });
 		}
 	} : null, [N]));
-	let P = i(), F = b ?? P("nav.collapse", "Collapse"), I = P("nav.expand", "Expand"), L = h.filter((e) => e.visible !== !1), R = (() => {
+	let P = e(), F = b ?? P("nav.collapse", "Collapse"), I = P("nav.expand", "Expand"), L = h.filter((e) => e.visible !== !1), R = (() => {
 		if (_) return [{
 			id: "__all__",
 			label: null,
@@ -136,24 +136,24 @@ var h = ({ items: h, currentPath: g, collapsed: _ = !1, onItemClick: v, onToggle
 			}),
 			/* @__PURE__ */ p("nav", {
 				className: "scrollbar-slim scrollbar-hover-only flex-1 min-h-0 py-card-padding overflow-y-auto overflow-x-hidden",
-				children: /* @__PURE__ */ p(n, {
+				children: /* @__PURE__ */ p(r, {
 					delayDuration: 300,
 					children: /* @__PURE__ */ p("ul", {
 						className: "space-y-list-gap",
-						children: R.map((n, i) => /* @__PURE__ */ m("li", {
+						children: R.map((e, r) => /* @__PURE__ */ m("li", {
 							className: "list-none",
 							children: [
-								i > 0 && !_ && /* @__PURE__ */ p("div", { className: "my-2 border-t border-border-subtle" }),
-								n.label && !_ && /* @__PURE__ */ p("p", {
+								r > 0 && !_ && /* @__PURE__ */ p("div", { className: "my-2 border-t border-border-subtle" }),
+								e.label && !_ && /* @__PURE__ */ p("p", {
 									className: "px-3 pb-1.5 pt-0.5 text-[11px] font-medium uppercase tracking-wider text-text-muted",
-									children: n.label
+									children: e.label
 								}),
 								/* @__PURE__ */ p("ul", {
 									className: "space-y-list-gap",
-									children: n.items.map((n) => _ ? /* @__PURE__ */ m(e, { children: [/* @__PURE__ */ p(r, {
+									children: e.items.map((e) => _ ? /* @__PURE__ */ m(t, { children: [/* @__PURE__ */ p(i, {
 										asChild: !0,
 										children: /* @__PURE__ */ p(o, {
-											item: n,
+											item: e,
 											depth: 0,
 											maxDepth: E,
 											currentPath: g,
@@ -164,14 +164,14 @@ var h = ({ items: h, currentPath: g, collapsed: _ = !1, onItemClick: v, onToggle
 											collapsed: _,
 											contextSearchParams: D
 										})
-									}), /* @__PURE__ */ m(t, {
+									}), /* @__PURE__ */ m(n, {
 										side: "right",
-										children: [/* @__PURE__ */ p("p", { children: n.label }), n.badge !== void 0 && n.badge > 0 && /* @__PURE__ */ p("span", {
+										children: [/* @__PURE__ */ p("p", { children: e.label }), e.badge !== void 0 && e.badge > 0 && /* @__PURE__ */ p("span", {
 											className: "ml-2 text-xs bg-status-error-bg-subtle text-status-error-text px-2 py-0.5 rounded-full",
-											children: n.badge
+											children: e.badge
 										})]
-									})] }, n.id) : /* @__PURE__ */ p(o, {
-										item: n,
+									})] }, e.id) : /* @__PURE__ */ p(o, {
+										item: e,
 										depth: 0,
 										maxDepth: E,
 										currentPath: g,
@@ -181,10 +181,10 @@ var h = ({ items: h, currentPath: g, collapsed: _ = !1, onItemClick: v, onToggle
 										onToggleCollapse: y,
 										collapsed: _,
 										contextSearchParams: D
-									}, n.id))
+									}, e.id))
 								})
 							]
-						}, n.id))
+						}, e.id))
 					})
 				})
 			}),