@declarion/react 0.65.0 → 0.66.0

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

@@ -0,0 +1,321 @@
+import { pluralText as e } from "../../lib/language.js";
+import { Icon as t } from "../primitives/Icons.js";
+import { Dropdown as n } from "../primitives/Dropdown.js";
+import { useText as r } from "../../hooks/useText.js";
+import { MenuItem as i } from "../primitives/MenuItem.js";
+import { DynamicIcon as a } from "../shared/DynamicIcon.js";
+import { usePreferencesStore as o } from "../../stores/preferences.js";
+import { tabIdsForCloseScope as s, useTabStore as c } from "../../stores/tabs.js";
+import { pageInsetX as l } from "../../lib/page-inset.js";
+import { useTabTitle as u } from "../../hooks/useTabTitle.js";
+import { useCallback as d, useEffect as f, useRef as p, useState as m } from "react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import { useNavigate as _ } from "react-router";
+//#region src/components/layout/TabStrip.tsx
+function v({ onNew: n, onCloseRequest: i } = {}) {
+	let v = r(), b = u(), x = _(), S = p(null), C = p(null), w = p(null), T = p(!1), [E, D] = m(!1), O = c((e) => e.tabs), k = c((e) => e.activeTabId), A = o((e) => e.tabsMaxOpen), j = c((e) => e.switchTab), M = c((e) => e.closeTab), N = O.findIndex((e) => e.id === k);
+	f(() => {
+		let e = N === O.length - 1 ? w.current : C.current;
+		e && (e.scrollIntoView({
+			block: "nearest",
+			inline: "nearest",
+			behavior: T.current ? "smooth" : "auto"
+		}), T.current = !0);
+	}, [
+		k,
+		N,
+		O.length
+	]);
+	let P = d((e, t) => {
+		let n = O[e];
+		n && (j(n.id), x({
+			pathname: n.pathname,
+			search: n.search || void 0
+		}));
+	}, [
+		O,
+		j,
+		x
+	]), F = d((e) => {
+		let t = O[e];
+		if (!t) return;
+		if (i) {
+			i("current", t.id);
+			return;
+		}
+		let n = t.id === k;
+		if (M(t.id), n) {
+			let n = O.filter((e) => e.id !== t.id);
+			if (n.length > 0) {
+				let t = n[e < n.length ? e : n.length - 1];
+				x({
+					pathname: t.pathname,
+					search: t.search || void 0
+				});
+			}
+		}
+	}, [
+		O,
+		k,
+		M,
+		x,
+		i
+	]), I = d((e) => {
+		D(!1), i ? i(e) : e === "current" && N >= 0 && F(N);
+	}, [
+		N,
+		F,
+		i
+	]), L = d(() => {
+		n ? n() : x("/");
+	}, [n, x]);
+	if (O.length === 0) return null;
+	let R = N >= 0 && O.length > 1 && O[N]?.closable !== !1, z = s(O, k, "others").length > 0, B = s(O, k, "right").length > 0, V = O.length >= A ? "danger" : O.length >= Math.ceil(A * .8) ? "warning" : "normal", H = V === "danger" ? "var(--danger)" : V === "warning" ? "var(--warn)" : "var(--text-3)";
+	return /* @__PURE__ */ g("div", {
+		style: {
+			display: "flex",
+			alignItems: "stretch",
+			height: 34,
+			background: "var(--surface-2)",
+			borderBottom: "1px solid var(--border)",
+			overflow: "hidden",
+			flexShrink: 0
+		},
+		children: [/* @__PURE__ */ g("div", {
+			className: "scrollbar-none",
+			style: {
+				display: "flex",
+				alignItems: "stretch",
+				overflowX: "auto",
+				flex: 1,
+				gap: 0
+			},
+			children: [O.map((e, n) => {
+				let r = n === N, i = O.length > 1 && e.closable !== !1;
+				return /* @__PURE__ */ g("div", {
+					"data-testid": "tabstrip-tab",
+					ref: r ? C : void 0,
+					onClick: (e) => P(n, { newTab: e.metaKey || e.ctrlKey }),
+					onAuxClick: (e) => {
+						e.button === 1 && (e.preventDefault(), F(n));
+					},
+					title: b(e),
+					style: {
+						display: "flex",
+						alignItems: "center",
+						gap: 6,
+						height: "100%",
+						...l(11),
+						background: r ? "var(--surface)" : "transparent",
+						borderRight: "1px solid var(--border)",
+						borderTop: r ? "2px solid var(--accent)" : "2px solid transparent",
+						borderBottom: r ? "1px solid var(--surface)" : "1px solid transparent",
+						marginBottom: r ? -1 : 0,
+						cursor: "pointer",
+						position: "relative",
+						maxWidth: 220,
+						minWidth: 120,
+						color: r ? "var(--text)" : "var(--text-3)",
+						fontSize: 12,
+						fontWeight: r ? 500 : 400
+					},
+					children: [
+						e.icon && /* @__PURE__ */ h("span", {
+							style: {
+								color: r ? "var(--accent)" : "var(--text-4)",
+								display: "flex"
+							},
+							children: /* @__PURE__ */ h(a, {
+								name: e.icon,
+								size: 12
+							})
+						}),
+						/* @__PURE__ */ h("span", {
+							style: {
+								flex: 1,
+								whiteSpace: "nowrap",
+								overflow: "hidden",
+								textOverflow: "ellipsis"
+							},
+							children: b(e)
+						}),
+						e.dirty && /* @__PURE__ */ h("span", {
+							style: {
+								width: 6,
+								height: 6,
+								borderRadius: 999,
+								background: "var(--warn)",
+								flexShrink: 0
+							},
+							title: v("shell.tabs.unsaved", "Unsaved changes")
+						}),
+						i && /* @__PURE__ */ h("button", {
+							onClick: (e) => {
+								e.stopPropagation(), F(n);
+							},
+							"aria-label": v("shell.tabs.close_named", "Close {title}", { title: b(e) }),
+							title: v("shell.tabs.close_tab", "Close tab"),
+							style: {
+								display: "flex",
+								background: "transparent",
+								border: 0,
+								padding: 2,
+								borderRadius: "var(--radius-xs)",
+								cursor: "pointer",
+								color: "var(--text-4)",
+								opacity: r ? 1 : .5
+							},
+							onMouseEnter: (e) => {
+								e.currentTarget.style.background = "var(--surface-3)", e.currentTarget.style.color = "var(--text)";
+							},
+							onMouseLeave: (e) => {
+								e.currentTarget.style.background = "transparent", e.currentTarget.style.color = "var(--text-4)";
+							},
+							children: /* @__PURE__ */ h(t.x, { size: 11 })
+						})
+					]
+				}, e.id);
+			}), /* @__PURE__ */ h("button", {
+				ref: w,
+				onClick: L,
+				title: v("shell.tabs.new", "New tab (⌘T)"),
+				style: {
+					width: 32,
+					background: "transparent",
+					border: 0,
+					borderRight: "1px solid var(--border)",
+					cursor: "pointer",
+					color: "var(--text-3)",
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center"
+				},
+				children: /* @__PURE__ */ h(t.plus, { size: 13 })
+			})]
+		}), /* @__PURE__ */ g("div", {
+			className: "tabstrip-utility",
+			style: {
+				...l(10),
+				fontSize: 11,
+				color: "var(--text-4)",
+				display: "flex",
+				alignItems: "center",
+				gap: 8,
+				borderLeft: "1px solid var(--border)",
+				flexShrink: 0
+			},
+			children: [
+				/* @__PURE__ */ g("span", {
+					"data-testid": "tabstrip-tab-count",
+					style: {
+						display: "flex",
+						alignItems: "center",
+						gap: 3,
+						color: H,
+						fontWeight: V === "normal" ? 400 : 600
+					},
+					children: [/* @__PURE__ */ g("span", {
+						className: "mono num",
+						children: [
+							O.length,
+							"/",
+							A
+						]
+					}), /* @__PURE__ */ h("span", {
+						className: "tabstrip-tabs-label",
+						style: { color: "var(--text-3)" },
+						children: e(v, "shell.tabs.count_label", A, {
+							one: "tab",
+							other: "tabs"
+						})
+					})]
+				}),
+				/* @__PURE__ */ h("span", {
+					className: "tabstrip-utility-divider",
+					style: {
+						width: 1,
+						height: 14,
+						background: "var(--border)"
+					}
+				}),
+				/* @__PURE__ */ h("button", {
+					ref: S,
+					onClick: () => D(!0),
+					title: v("shell.tabs.actions", "Tab actions"),
+					"aria-label": v("shell.tabs.actions", "Tab actions"),
+					"data-testid": "tabstrip-actions-button",
+					style: {
+						width: 24,
+						height: 24,
+						border: 0,
+						background: "transparent",
+						borderRadius: "var(--radius-sm)",
+						cursor: "pointer",
+						color: "var(--text-3)",
+						display: "flex",
+						alignItems: "center",
+						justifyContent: "center"
+					},
+					onMouseEnter: (e) => {
+						e.currentTarget.style.background = "var(--surface-3)";
+					},
+					onMouseLeave: (e) => {
+						e.currentTarget.style.background = "transparent";
+					},
+					children: /* @__PURE__ */ h(t.more, { size: 13 })
+				}),
+				/* @__PURE__ */ h(y, {
+					open: E,
+					anchor: S.current,
+					onClose: () => D(!1),
+					canCloseCurrent: R,
+					canCloseOthers: z,
+					canCloseRight: B,
+					onAction: I
+				})
+			]
+		})]
+	});
+}
+function y({ open: e, anchor: a, onClose: o, canCloseCurrent: s, canCloseOthers: c, canCloseRight: l, onAction: u }) {
+	let d = r();
+	return /* @__PURE__ */ g(n, {
+		open: e,
+		onClose: o,
+		anchor: a,
+		align: "end",
+		width: 230,
+		children: [
+			/* @__PURE__ */ h(i, {
+				icon: /* @__PURE__ */ h(t.x, { size: 13 }),
+				disabled: !s,
+				title: s ? void 0 : d("shell.tabs.none_closable", "No current tab can be closed"),
+				onClick: () => u("current"),
+				children: d("shell.tabs.close_current", "Close current tab")
+			}),
+			/* @__PURE__ */ h(i, {
+				icon: /* @__PURE__ */ h(t.x, { size: 13 }),
+				disabled: !c,
+				title: c ? void 0 : d("shell.tabs.no_others", "No other tabs"),
+				onClick: () => u("others"),
+				children: d("shell.tabs.close_others", "Close others")
+			}),
+			/* @__PURE__ */ h(i, {
+				icon: /* @__PURE__ */ h(t.x, { size: 13 }),
+				disabled: !l,
+				title: l ? void 0 : d("shell.tabs.none_right", "No tabs to the right"),
+				onClick: () => u("right"),
+				children: d("shell.tabs.close_right", "Close tabs to the right")
+			}),
+			/* @__PURE__ */ h(i, { divider: !0 }),
+			/* @__PURE__ */ h(i, {
+				icon: /* @__PURE__ */ h(t.trash, { size: 13 }),
+				danger: !0,
+				onClick: () => u("all"),
+				children: d("shell.tabs.close_all", "Close all tabs")
+			})
+		]
+	});
+}
+//#endregion
+export { v as TabStrip };

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

@@ -0,0 +1,355 @@
+import { textWithNodes as e } from "../../lib/language.js";
+import { Icon as t } from "../primitives/Icons.js";
+import { Dropdown as n } from "../primitives/Dropdown.js";
+import { useText as r } from "../../hooks/useText.js";
+import { useMemo as i, useRef as a, useState as o } from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/layout/TenantChip.tsx
+var u = 6;
+function d(e) {
+	return e.startsWith("_");
+}
+var f = {
+	production: {
+		fg: "var(--danger)",
+		bg: "var(--danger-soft)",
+		border: "var(--danger-border)"
+	},
+	staging: {
+		fg: "var(--warn)",
+		bg: "var(--warn-soft)",
+		border: "var(--warn-border)"
+	},
+	dev: {
+		fg: "var(--info)",
+		bg: "var(--info-soft)",
+		border: "var(--info-border)"
+	}
+}, p = {
+	fg: "var(--text-3)",
+	bg: "var(--surface-2)",
+	border: "var(--border)"
+};
+function m(e) {
+	return e ? f[e] ?? p : f.production;
+}
+function h({ tenant: s, tenants: d, onSwitch: f, busy: p, compact: h, locked: _, lockedReason: v }) {
+	let y = r(), [b, x] = o(!1), [S, C] = o(""), w = a(null), T = s?.env, E = m(T), D = s?.name || "—", O = s?.role || "—", k = i(() => d.filter((e) => e.is_member !== !1), [d]), A = i(() => d.filter((e) => e.is_member === !1), [d]), j = d.length >= u, M = (e) => {
+		if (!S) return !0;
+		let t = S.toLowerCase();
+		return e.name.toLowerCase().includes(t) || e.code.toLowerCase().includes(t);
+	}, N = k.filter(M), P = A.filter(M), F = S !== "" && N.length === 0 && P.length === 0;
+	return /* @__PURE__ */ l("div", {
+		style: { position: "relative" },
+		children: [/* @__PURE__ */ l("button", {
+			ref: w,
+			onClick: () => !_ && x((e) => !e),
+			"data-testid": "tenant-chip",
+			"data-locked": _ ? "true" : void 0,
+			style: {
+				display: "flex",
+				alignItems: "center",
+				gap: 8,
+				height: 28,
+				padding: "0 8px 0 8px",
+				maxWidth: h ? "100%" : void 0,
+				minWidth: 0,
+				background: "var(--surface-2)",
+				border: "1px solid var(--border)",
+				borderRadius: "var(--radius-md)",
+				cursor: _ ? "not-allowed" : "pointer",
+				color: "var(--text)",
+				fontSize: 12.5,
+				fontWeight: 500,
+				opacity: _ ? .6 : 1
+			},
+			title: _ ? v || y("shell.tenant.switch_disabled", "Tenant switching is disabled") : y("shell.tenant.current", "Current tenant / environment"),
+			disabled: p || _,
+			children: [
+				/* @__PURE__ */ c(t.tenant, {
+					size: 13,
+					style: {
+						color: "var(--text-3)",
+						flex: "none"
+					}
+				}),
+				/* @__PURE__ */ c("span", {
+					style: {
+						fontWeight: 600,
+						minWidth: 0,
+						overflow: h ? "hidden" : void 0,
+						textOverflow: h ? "ellipsis" : void 0,
+						whiteSpace: h ? "nowrap" : void 0
+					},
+					children: D
+				}),
+				T && /* @__PURE__ */ c("span", {
+					className: "mono",
+					style: {
+						padding: "2px 6px",
+						borderRadius: "var(--radius-xs)",
+						fontSize: 10,
+						fontWeight: 700,
+						letterSpacing: "0.06em",
+						textTransform: "uppercase",
+						background: E.bg,
+						color: E.fg,
+						border: `1px solid ${E.border}`,
+						flex: "none"
+					},
+					children: T
+				}),
+				/* @__PURE__ */ c(t.down, {
+					size: 11,
+					style: {
+						color: "var(--text-3)",
+						flex: "none"
+					}
+				})
+			]
+		}), /* @__PURE__ */ l(n, {
+			open: b,
+			anchor: w.current,
+			onClose: () => x(!1),
+			width: 300,
+			align: "start",
+			children: [
+				/* @__PURE__ */ l("div", {
+					style: {
+						padding: "10px 10px 6px",
+						borderBottom: "1px solid var(--divider)"
+					},
+					children: [
+						/* @__PURE__ */ c("div", {
+							style: {
+								fontSize: 10.5,
+								color: "var(--text-3)",
+								letterSpacing: "0.08em",
+								fontWeight: 700,
+								textTransform: "uppercase"
+							},
+							children: y("shell.tenant.active_scope", "Active scope")
+						}),
+						/* @__PURE__ */ l("div", {
+							style: {
+								display: "flex",
+								alignItems: "center",
+								gap: 6,
+								marginTop: 4
+							},
+							children: [
+								/* @__PURE__ */ c(t.tenant, {
+									size: 13,
+									style: { color: "var(--accent)" }
+								}),
+								/* @__PURE__ */ c("span", {
+									style: {
+										fontSize: 13,
+										fontWeight: 600
+									},
+									children: D
+								}),
+								T && /* @__PURE__ */ c("span", {
+									className: "mono",
+									style: {
+										marginLeft: "auto",
+										padding: "2px 6px",
+										borderRadius: "var(--radius-xs)",
+										fontSize: 10,
+										fontWeight: 700,
+										background: E.bg,
+										color: E.fg
+									},
+									children: T
+								})
+							]
+						}),
+						/* @__PURE__ */ c("div", {
+							style: {
+								marginTop: 4,
+								fontSize: 11,
+								color: "var(--text-3)"
+							},
+							children: e(y("shell.tenant.role", "Role: {role}"), { role: /* @__PURE__ */ c("span", {
+								style: {
+									color: "var(--text-2)",
+									fontWeight: 500
+								},
+								children: O
+							}) })
+						})
+					]
+				}),
+				j && /* @__PURE__ */ c("div", {
+					style: {
+						padding: "8px 10px 4px",
+						borderBottom: "1px solid var(--divider)"
+					},
+					children: /* @__PURE__ */ c("input", {
+						type: "text",
+						value: S,
+						onChange: (e) => C(e.target.value),
+						placeholder: y("shell.tenant.search", "Search tenants…"),
+						autoFocus: !0,
+						"data-testid": "tenant-switch-search",
+						style: {
+							width: "100%",
+							height: 28,
+							padding: "0 8px",
+							fontSize: 12.5,
+							background: "var(--surface-1)",
+							color: "var(--text)",
+							border: "1px solid var(--border)",
+							borderRadius: "var(--radius-sm)",
+							outline: "none"
+						}
+					})
+				}),
+				/* @__PURE__ */ l("div", {
+					style: {
+						maxHeight: 320,
+						overflowY: "auto"
+					},
+					children: [
+						/* @__PURE__ */ c(g, {
+							label: A.length > 0 ? y("shell.tenant.yours", "Your tenants") : y("shell.tenant.switch", "Switch tenant"),
+							tenants: N,
+							activeID: s?.id,
+							onPick: (e) => {
+								x(!1), f(e);
+							}
+						}),
+						P.length > 0 && /* @__PURE__ */ c(g, {
+							label: y("shell.tenant.all_admin", "All tenants (admin)"),
+							tenants: P,
+							activeID: s?.id,
+							onPick: (e) => {
+								x(!1), f(e);
+							}
+						}),
+						F && /* @__PURE__ */ c("div", {
+							style: {
+								padding: "12px 12px",
+								fontSize: 12,
+								color: "var(--text-3)",
+								textAlign: "center"
+							},
+							children: y("shell.tenant.no_matches", "No tenants match “{query}”.", { query: S })
+						})
+					]
+				}),
+				/* @__PURE__ */ l("div", {
+					style: {
+						padding: "8px 10px",
+						borderTop: "1px solid var(--divider)",
+						fontSize: 10.5,
+						color: "var(--text-4)",
+						display: "flex",
+						alignItems: "flex-start",
+						gap: 6
+					},
+					children: [/* @__PURE__ */ c(t.info, {
+						size: 11,
+						style: {
+							marginTop: 2,
+							flexShrink: 0
+						}
+					}), /* @__PURE__ */ c("span", { children: y("shell.tenant.switch_hint", "Switching tenant reloads all data. Unsaved changes in open tabs will prompt.") })]
+				})
+			]
+		})]
+	});
+}
+function g({ label: e, tenants: t, activeID: n, onPick: r }) {
+	return t.length === 0 ? null : /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c("div", {
+		style: {
+			padding: "6px 10px 4px",
+			fontSize: 10,
+			color: "var(--text-4)",
+			letterSpacing: "0.08em",
+			fontWeight: 700,
+			textTransform: "uppercase"
+		},
+		children: e
+	}), t.map((e) => /* @__PURE__ */ c(_, {
+		tenant: e,
+		tone: m(e.env),
+		active: e.id === n,
+		onPick: () => r(e)
+	}, e.id))] });
+}
+function _({ tenant: e, tone: n, active: i, onPick: a }) {
+	let s = r(), [u, f] = o(!1), p = i || u ? "var(--surface-3)" : "transparent", m = d(e.code);
+	return /* @__PURE__ */ l("button", {
+		onClick: a,
+		onMouseEnter: () => f(!0),
+		onMouseLeave: () => f(!1),
+		style: {
+			display: "flex",
+			alignItems: "center",
+			gap: 8,
+			width: "100%",
+			padding: "7px 10px",
+			background: p,
+			border: 0,
+			cursor: "pointer",
+			textAlign: "left"
+		},
+		children: [
+			/* @__PURE__ */ c(t.tenant, {
+				size: 12,
+				style: { color: "var(--text-3)" }
+			}),
+			/* @__PURE__ */ c("span", {
+				style: {
+					fontSize: 12.5,
+					color: "var(--text)",
+					fontWeight: 500
+				},
+				children: e.name
+			}),
+			m ? /* @__PURE__ */ c("span", {
+				className: "mono",
+				title: s("shell.tenant.system_hint", "Platform-internal workspace"),
+				style: {
+					padding: "1px 5px",
+					borderRadius: "var(--radius-xs)",
+					fontSize: 9.5,
+					fontWeight: 700,
+					background: "var(--surface-3)",
+					color: "var(--text-2)",
+					border: "1px solid var(--border)"
+				},
+				children: s("shell.tenant.system", "system")
+			}) : e.env ? /* @__PURE__ */ c("span", {
+				className: "mono",
+				style: {
+					padding: "1px 5px",
+					borderRadius: "var(--radius-xs)",
+					fontSize: 9.5,
+					fontWeight: 700,
+					background: n.bg,
+					color: n.fg
+				},
+				children: e.env
+			}) : null,
+			/* @__PURE__ */ c("span", { style: { flex: 1 } }),
+			e.role && /* @__PURE__ */ c("span", {
+				style: {
+					fontSize: 10.5,
+					color: "var(--text-3)"
+				},
+				children: e.role
+			}),
+			i && /* @__PURE__ */ c(t.check, {
+				size: 12,
+				style: {
+					color: "var(--accent)",
+					marginLeft: 4
+				}
+			})
+		]
+	});
+}
+//#endregion
+export { h as TenantChip, m as envTone };