@declarion/react 0.87.0 → 0.89.0

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

@@ -1,38 +1,40 @@
-import { useAuthStore as e } from "../../stores/auth.js";
-import { Icon as t } from "../primitives/Icons.js";
-import { IconBtn as n } from "../primitives/IconBtn.js";
-import { Pill as r } from "../primitives/Pill.js";
-import { Kbd as i } from "../primitives/Kbd.js";
-import { Avatar as a } from "../primitives/Avatar.js";
-import { Dropdown as ee } from "../primitives/Dropdown.js";
-import { useText as o } from "../../hooks/useText.js";
-import { useResponsiveMode as s } from "../../hooks/useResponsiveMode.js";
-import { MenuItem as c } from "../primitives/MenuItem.js";
-import { usePreferencesStore as l } from "../../stores/preferences.js";
-import { useTabStore as te } from "../../stores/tabs.js";
-import { useAuth as u } from "../../hooks/useAuth.js";
-import { useImpersonation as d } from "../../hooks/useImpersonation.js";
-import { TenantChip as f, envTone as p } from "./TenantChip.js";
-import { Breadcrumbs as m } from "../chrome/Breadcrumbs.js";
-import { pageInsetX as h } from "../../lib/page-inset.js";
-import { useRef as g, useState as _ } from "react";
-import { Fragment as v, jsx as y, jsxs as b } from "react/jsx-runtime";
+import { usePreferencesStore as e } from "../../stores/preferences.js";
+import { useAuthStore as t } from "../../stores/auth.js";
+import { Icon as n } from "../primitives/Icons.js";
+import { IconBtn as r } from "../primitives/IconBtn.js";
+import { Pill as i } from "../primitives/Pill.js";
+import { Kbd as a } from "../primitives/Kbd.js";
+import { Avatar as o } from "../primitives/Avatar.js";
+import { Dropdown as s } from "../primitives/Dropdown.js";
+import { useText as c } from "../../hooks/useText.js";
+import { useResponsiveMode as ee } from "../../hooks/useResponsiveMode.js";
+import { MenuItem as l } from "../primitives/MenuItem.js";
+import { useUiPreferences as u } from "../../hooks/useUiPreferences.js";
+import { shortcutLabel as d } from "../../lib/shortcut.js";
+import { useTabStore as f } from "../../stores/tabs.js";
+import { useAuth as p } from "../../hooks/useAuth.js";
+import { useImpersonation as te } from "../../hooks/useImpersonation.js";
+import { TenantChip as ne, envTone as re } from "./TenantChip.js";
+import { Breadcrumbs as ie } from "../chrome/Breadcrumbs.js";
+import { pageInsetX as ae } from "../../lib/page-inset.js";
+import { activeRoleLabel as oe } from "../../lib/role-label.js";
+import { useRef as m, useState as h } from "react";
+import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
 //#region src/components/layout/TopBar.tsx
-var x = "⌘K";
-function S({ breadcrumbs: S, onCrumbClick: ne, onOpenNav: re, navButtonRef: ie, showNavButton: C, onOpenTabs: ae, tabsButtonRef: oe, showTabsButton: w, mobileTabCount: T = 0, onCmdK: E, onToggleAI: D, aiOpen: O, onOpenProfile: k, onOpenPrefs: A, showTenantSwitcher: j = !0, showBreadcrumbs: M = !0, showThemeToggle: N = !0 } = {}) {
-	let P = o(), F = e((e) => e.user), I = s(), { activeTenant: L, tenants: R, switchTenant: z, isSwitchingTenant: se, logout: B } = u(), { isImpersonating: V, stop: H } = d(), U = l((e) => e.colorScheme), W = l((e) => e.set), [G, K] = _(!1), q = g(null), J = L?.env, ce = p(J), Y = F?.email ?? "", X = F?.display_name || Y || P("shell.user_menu.user", "User"), Z = C && I.category === "phone", Q = C && I.category !== "desktop", $ = () => {
+function y({ breadcrumbs: y, onCrumbClick: b, onOpenNav: x, navButtonRef: se, showNavButton: S, onOpenTabs: ce, tabsButtonRef: C, showTabsButton: w, mobileTabCount: T = 0, onCmdK: E, onToggleAI: D, aiOpen: O, onOpenProfile: k, onOpenPrefs: A, showTenantSwitcher: j = !0, showBreadcrumbs: M = !0, showThemeToggle: N = !0 } = {}) {
+	let P = c(), F = t((e) => e.user), I = ee(), { activeTenant: L, tenants: le, switchTenant: R, isSwitchingTenant: z, logout: B } = p(), { isImpersonating: V, stop: H } = te(), U = e((e) => e.colorScheme), { set: W } = u(), [ue, G] = h(!1), K = m(null), q = L?.env, de = re(q), J = F?.email ?? "", Y = oe(F, P), X = F?.display_name || J || P("shell.user_menu.user", "User"), Z = S && I.category === "phone", Q = S && I.category !== "desktop", $ = () => {
 		W("colorScheme", U === "dark" ? "light" : "dark");
-	}, le = (e) => {
-		L?.id !== e.id && (!te.getState().tabs.some((e) => e.dirty) || window.confirm(P("shell.tenant.switch_confirm", "You have unsaved changes in one or more tabs. Switching tenant will discard them. Continue?"))) && z(e.id);
+	}, fe = (e) => {
+		L?.id !== e.id && (!f.getState().tabs.some((e) => e.dirty) || window.confirm(P("shell.tenant.switch_confirm", "You have unsaved changes in one or more tabs. Switching tenant will discard them. Continue?"))) && R(e.id);
 	};
-	return /* @__PURE__ */ b("header", {
+	return /* @__PURE__ */ v("header", {
 		style: {
 			gridArea: "topbar",
 			background: "var(--surface)",
 			borderBottom: "1px solid var(--border)",
 			display: "flex",
 			alignItems: "center",
-			...h(12),
+			...ae(12),
 			gap: Q ? 8 : 10,
 			zIndex: 5,
 			position: "relative",
@@ -40,39 +42,40 @@ function S({ breadcrumbs: S, onCrumbClick: ne, onOpenNav: re, navButtonRef: ie,
 			overflow: "hidden"
 		},
 		children: [
-			J === "production" && /* @__PURE__ */ y("span", { style: {
+			q === "production" && /* @__PURE__ */ _("span", { style: {
 				position: "absolute",
 				left: 0,
 				right: 0,
 				top: 0,
 				height: 2,
-				background: `linear-gradient(90deg, transparent, ${ce.fg}, transparent)`,
+				background: `linear-gradient(90deg, transparent, ${de.fg}, transparent)`,
 				opacity: .35,
 				pointerEvents: "none"
 			} }),
-			C && /* @__PURE__ */ y(n, {
-				ref: ie,
-				icon: /* @__PURE__ */ y(t.menu, { size: 16 }),
+			S && /* @__PURE__ */ _(r, {
+				ref: se,
+				icon: /* @__PURE__ */ _(n.menu, { size: 16 }),
 				title: P("shell.nav.open", "Open navigation"),
-				onClick: re
+				onClick: x
 			}),
-			j && /* @__PURE__ */ y("div", {
+			j && /* @__PURE__ */ _("div", {
 				style: {
 					minWidth: 0,
 					maxWidth: Z ? "min(210px, 56vw)" : Q ? 230 : void 0,
 					flex: Z ? "1 1 auto" : "0 0 auto"
 				},
-				children: /* @__PURE__ */ y(f, {
+				children: /* @__PURE__ */ _(ne, {
 					tenant: L,
-					tenants: R,
-					onSwitch: le,
-					busy: se,
+					tenants: le,
+					role: Y,
+					onSwitch: fe,
+					busy: z,
 					compact: Q,
 					locked: V,
 					lockedReason: V ? P("shell.impersonation.tenant_locked", "Exit impersonation to switch tenants") : void 0
 				})
 			}),
-			V && /* @__PURE__ */ b("span", {
+			V && /* @__PURE__ */ v("span", {
 				"data-testid": "impersonation-chip",
 				style: {
 					display: "inline-flex",
@@ -89,39 +92,39 @@ function S({ breadcrumbs: S, onCrumbClick: ne, onOpenNav: re, navButtonRef: ie,
 					letterSpacing: "0.05em"
 				},
 				children: [
-					/* @__PURE__ */ y(t.users, { size: 11 }),
+					/* @__PURE__ */ _(n.users, { size: 11 }),
 					" ",
 					P("shell.impersonation.chip", "Impersonating")
 				]
 			}),
-			!Z && M && /* @__PURE__ */ b(v, { children: [/* @__PURE__ */ y("span", {
+			!Z && M && /* @__PURE__ */ v(g, { children: [/* @__PURE__ */ _("span", {
 				style: {
 					color: "var(--text-4)",
 					fontSize: 11
 				},
-				children: /* @__PURE__ */ y(t.right, { size: 10 })
-			}), /* @__PURE__ */ y(m, {
-				items: S ?? [],
-				onCrumbClick: ne
+				children: /* @__PURE__ */ _(n.right, { size: 10 })
+			}), /* @__PURE__ */ _(ie, {
+				items: y ?? [],
+				onCrumbClick: b
 			})] }),
-			/* @__PURE__ */ y("div", { style: { flex: 1 } }),
-			w && /* @__PURE__ */ y(n, {
-				ref: oe,
-				icon: /* @__PURE__ */ y(t.layers, { size: 15 }),
+			/* @__PURE__ */ _("div", { style: { flex: 1 } }),
+			w && /* @__PURE__ */ _(r, {
+				ref: C,
+				icon: /* @__PURE__ */ _(n.layers, { size: 15 }),
 				title: P("shell.tabs.open_tabs_count", "Open tabs ({count})", { count: T }),
-				onClick: ae
+				onClick: ce
 			}),
-			Z ? /* @__PURE__ */ b(v, { children: [/* @__PURE__ */ y(n, {
-				icon: /* @__PURE__ */ y(t.search, { size: 15 }),
+			Z ? /* @__PURE__ */ v(g, { children: [/* @__PURE__ */ _(r, {
+				icon: /* @__PURE__ */ _(n.search, { size: 15 }),
 				title: P("shell.palette.search", "Search or run command"),
 				onClick: E
-			}), D && /* @__PURE__ */ y(n, {
-				icon: /* @__PURE__ */ y(t.sparkle, { size: 15 }),
+			}), D && /* @__PURE__ */ _(r, {
+				icon: /* @__PURE__ */ _(n.sparkle, { size: 15 }),
 				title: P("shell.ai_assistant", "AI Assistant"),
 				onClick: D,
 				active: O
-			})] }) : /* @__PURE__ */ b(v, { children: [
-				/* @__PURE__ */ b("button", {
+			})] }) : /* @__PURE__ */ v(g, { children: [
+				/* @__PURE__ */ v("button", {
 					onClick: E,
 					style: {
 						display: "flex",
@@ -138,44 +141,44 @@ function S({ breadcrumbs: S, onCrumbClick: ne, onOpenNav: re, navButtonRef: ie,
 						minWidth: 240
 					},
 					children: [
-						/* @__PURE__ */ y(t.search, { size: 13 }),
-						/* @__PURE__ */ y("span", {
+						/* @__PURE__ */ _(n.search, { size: 13 }),
+						/* @__PURE__ */ _("span", {
 							style: {
 								flex: 1,
 								textAlign: "left"
 							},
 							children: P("shell.topbar.search_hint", "Search or run command…")
 						}),
-						/* @__PURE__ */ y(i, { children: x })
+						/* @__PURE__ */ _(a, { children: d("K") })
 					]
 				}),
-				/* @__PURE__ */ y(n, {
-					icon: /* @__PURE__ */ y(t.bell, { size: 15 }),
+				/* @__PURE__ */ _(r, {
+					icon: /* @__PURE__ */ _(n.bell, { size: 15 }),
 					title: P("shell.topbar.notifications", "Notifications")
 				}),
-				N && /* @__PURE__ */ y(n, {
-					icon: y(U === "dark" ? t.sun : t.moon, { size: 15 }),
+				N && /* @__PURE__ */ _(r, {
+					icon: _(U === "dark" ? n.sun : n.moon, { size: 15 }),
 					title: P("shell.topbar.theme", "Theme"),
 					onClick: $
 				}),
-				/* @__PURE__ */ y(n, {
-					icon: /* @__PURE__ */ y(t.sparkle, { size: 15 }),
+				/* @__PURE__ */ _(r, {
+					icon: /* @__PURE__ */ _(n.sparkle, { size: 15 }),
 					title: P("shell.ai_assistant", "AI Assistant"),
 					onClick: D,
 					active: O
 				}),
-				/* @__PURE__ */ y("div", { style: {
+				/* @__PURE__ */ _("div", { style: {
 					width: 1,
 					height: 18,
 					background: "var(--divider)",
 					margin: "0 2px"
 				} })
 			] }),
-			/* @__PURE__ */ b("div", {
+			/* @__PURE__ */ v("div", {
 				style: { position: "relative" },
-				children: [/* @__PURE__ */ b("button", {
-					ref: q,
-					onClick: () => K((e) => !e),
+				children: [/* @__PURE__ */ v("button", {
+					ref: K,
+					onClick: () => G((e) => !e),
 					style: {
 						display: "flex",
 						alignItems: "center",
@@ -186,50 +189,50 @@ function S({ breadcrumbs: S, onCrumbClick: ne, onOpenNav: re, navButtonRef: ie,
 						border: 0,
 						cursor: "pointer"
 					},
-					children: [/* @__PURE__ */ y(a, {
+					children: [/* @__PURE__ */ _(o, {
 						name: X,
 						size: 22
-					}), !Q && /* @__PURE__ */ b(v, { children: [/* @__PURE__ */ y("span", {
+					}), !Q && /* @__PURE__ */ v(g, { children: [/* @__PURE__ */ _("span", {
 						style: {
 							fontSize: 12,
 							color: "var(--text-2)"
 						},
-						children: Y
-					}), /* @__PURE__ */ y(t.down, {
+						children: J
+					}), /* @__PURE__ */ _(n.down, {
 						size: 11,
 						style: { color: "var(--text-3)" }
 					})] })]
-				}), /* @__PURE__ */ b(ee, {
-					open: G,
-					anchor: q.current,
-					onClose: () => K(!1),
+				}), /* @__PURE__ */ v(s, {
+					open: ue,
+					anchor: K.current,
+					onClose: () => G(!1),
 					width: 220,
 					align: "end",
 					children: [
-						/* @__PURE__ */ b("div", {
+						/* @__PURE__ */ v("div", {
 							style: {
 								padding: "10px 10px 8px",
 								borderBottom: "1px solid var(--divider)"
 							},
-							children: [/* @__PURE__ */ b("div", {
+							children: [/* @__PURE__ */ v("div", {
 								style: {
 									display: "flex",
 									gap: 8,
 									alignItems: "center"
 								},
-								children: [/* @__PURE__ */ y(a, {
+								children: [/* @__PURE__ */ _(o, {
 									name: X,
 									size: 28
-								}), /* @__PURE__ */ b("div", {
+								}), /* @__PURE__ */ v("div", {
 									style: { minWidth: 0 },
-									children: [/* @__PURE__ */ y("div", {
+									children: [/* @__PURE__ */ _("div", {
 										style: {
 											fontSize: 12.5,
 											fontWeight: 600,
 											color: "var(--text)"
 										},
 										children: X
-									}), /* @__PURE__ */ y("div", {
+									}), /* @__PURE__ */ _("div", {
 										style: {
 											fontSize: 11,
 											color: "var(--text-3)",
@@ -237,61 +240,61 @@ function S({ breadcrumbs: S, onCrumbClick: ne, onOpenNav: re, navButtonRef: ie,
 											textOverflow: "ellipsis",
 											whiteSpace: "nowrap"
 										},
-										children: Y
+										children: J
 									})]
 								})]
-							}), L && /* @__PURE__ */ b("div", {
+							}), L && /* @__PURE__ */ v("div", {
 								style: {
 									marginTop: 8,
 									display: "flex",
 									gap: 4,
 									flexWrap: "wrap"
 								},
-								children: [/* @__PURE__ */ y(r, {
+								children: [/* @__PURE__ */ _(i, {
 									tone: "violet",
 									size: "xs",
 									dot: !0,
-									children: L.role
-								}), /* @__PURE__ */ b(r, {
+									children: Y
+								}), /* @__PURE__ */ v(i, {
 									tone: "slate",
 									size: "xs",
-									children: [L.name, J ? ` · ${J}` : ""]
+									children: [L.name, q ? ` · ${q}` : ""]
 								})]
 							})]
 						}),
-						V && /* @__PURE__ */ y(c, {
-							icon: /* @__PURE__ */ y(t.x, { size: 13 }),
+						V && /* @__PURE__ */ _(l, {
+							icon: /* @__PURE__ */ _(n.x, { size: 13 }),
 							onClick: () => {
-								K(!1), H();
+								G(!1), H();
 							},
 							"data-testid": "exit-impersonation-menu-item",
 							children: P("shell.impersonation.exit", "Exit impersonation")
 						}),
-						/* @__PURE__ */ y(c, {
-							icon: /* @__PURE__ */ y(t.users, { size: 13 }),
+						/* @__PURE__ */ _(l, {
+							icon: /* @__PURE__ */ _(n.users, { size: 13 }),
 							onClick: () => {
-								K(!1), k?.();
+								G(!1), k?.();
 							},
 							children: P("shell.user_menu.profile", "My profile")
 						}),
-						/* @__PURE__ */ y(c, {
-							icon: /* @__PURE__ */ y(t.settings, { size: 13 }),
+						/* @__PURE__ */ _(l, {
+							icon: /* @__PURE__ */ _(n.settings, { size: 13 }),
 							onClick: () => {
-								K(!1), A?.();
+								G(!1), A?.();
 							},
 							children: P("shell.user_menu.preferences", "Preferences")
 						}),
-						N && /* @__PURE__ */ y(c, {
-							icon: /* @__PURE__ */ y(t.moon, { size: 13 }),
+						N && /* @__PURE__ */ _(l, {
+							icon: /* @__PURE__ */ _(n.moon, { size: 13 }),
 							onClick: $,
 							children: P("shell.user_menu.toggle_theme", "Toggle theme")
 						}),
-						/* @__PURE__ */ y(c, { divider: !0 }),
-						/* @__PURE__ */ y(c, {
-							icon: /* @__PURE__ */ y(t.x, { size: 13 }),
+						/* @__PURE__ */ _(l, { divider: !0 }),
+						/* @__PURE__ */ _(l, {
+							icon: /* @__PURE__ */ _(n.x, { size: 13 }),
 							danger: !0,
 							onClick: () => {
-								K(!1), B();
+								G(!1), B();
 							},
 							children: P("shell.user_menu.sign_out", "Sign out")
 						})
@@ -302,4 +305,4 @@ function S({ breadcrumbs: S, onCrumbClick: ne, onOpenNav: re, navButtonRef: ie,
 	});
 }
 //#endregion
-export { S as TopBar };
+export { y as TopBar };

package/dist-lib/components/list/InlineEditCell.js

@@ -1,9 +1,9 @@
-import { Icon as e } from "../primitives/Icons.js";
-import { IconBtn as t } from "../primitives/IconBtn.js";
-import { useText as n } from "../../hooks/useText.js";
-import { BoolToggle as r } from "../primitives/BoolToggle.js";
-import { Select as i, TextInput as a } from "../primitives/Fields.js";
-import { failureTitle as o } from "../../lib/failure.js";
+import { failureTitle as e } from "../../lib/failure.js";
+import { Icon as t } from "../primitives/Icons.js";
+import { IconBtn as n } from "../primitives/IconBtn.js";
+import { useText as r } from "../../hooks/useText.js";
+import { BoolToggle as i } from "../primitives/BoolToggle.js";
+import { Select as a, TextInput as o } from "../primitives/Fields.js";
 import { toast as s } from "../../lib/toast.js";
 import { useEffect as c, useRef as l, useState as u } from "react";
 import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
@@ -20,24 +20,24 @@ var m = {
 	gap: 4
 };
 function h({ value: h, onSave: g, type: _ = "text", options: v, trigger: y = "always", label: b, placeholder: x }) {
-	let S = n(), C = n("errors"), [w, T] = u(h), [E, D] = u(h), [O, k] = u(!1), [A, j] = u(h), M = l(null);
+	let S = r(), C = r("errors"), [w, T] = u(h), [E, D] = u(h), [O, k] = u(!1), [A, j] = u(h), M = l(null);
 	c(() => {
 		T(h), D(h), j(h);
 	}, [h]);
 	let N = () => {
 		j(E), k(!0);
-	}, P = async (e) => {
-		let t = w;
-		D(e), T(e), k(!1);
+	}, P = async (t) => {
+		let n = w;
+		D(t), T(t), k(!1);
 		try {
-			await g(e);
-		} catch (e) {
-			D(t), T(t);
-			let n = o(C, e);
+			await g(t);
+		} catch (t) {
+			D(n), T(n);
+			let r = e(C, t);
 			s.error(C("list.cell_unsaved", "The value could not be saved."), b ? S("list.cell.field_reason", "{field}: {reason}", {
 				field: b,
-				reason: n
-			}) : n);
+				reason: r
+			}) : r);
 		}
 	}, F = () => {
 		j(E), k(!1);
@@ -54,31 +54,31 @@ function h({ value: h, onSave: g, type: _ = "text", options: v, trigger: y = "al
 		onKeyDown: (e) => {
 			e.key === "Enter" && I(), e.key === "Escape" && F();
 		},
-		children: [_ === "select" ? /* @__PURE__ */ f(i, {
+		children: [_ === "select" ? /* @__PURE__ */ f(a, {
 			value: A,
 			options: v || [],
 			onChange: (e) => {
 				j(e), P(e);
 			}
-		}) : _ === "bool" ? /* @__PURE__ */ f(r, {
+		}) : _ === "bool" ? /* @__PURE__ */ f(i, {
 			value: A === "true",
 			onChange: (e) => {
 				let t = String(e);
 				j(t), P(t);
 			}
-		}) : /* @__PURE__ */ f(a, {
+		}) : /* @__PURE__ */ f(o, {
 			value: A ?? "",
 			onChange: j,
 			autoFocus: !0,
 			placeholder: x
-		}), _ !== "select" && _ !== "bool" && /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(t, {
+		}), _ !== "select" && _ !== "bool" && /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(n, {
 			size: 24,
-			icon: /* @__PURE__ */ f(e.check, { size: 13 }),
+			icon: /* @__PURE__ */ f(t.check, { size: 13 }),
 			onClick: I,
 			title: S("dialog.save", "Save")
-		}), /* @__PURE__ */ f(t, {
+		}), /* @__PURE__ */ f(n, {
 			size: 24,
-			icon: /* @__PURE__ */ f(e.x, { size: 13 }),
+			icon: /* @__PURE__ */ f(t.x, { size: 13 }),
 			onClick: F,
 			title: S("dialog.cancel", "Cancel")
 		})] })]