@camstack/ui-library 1.2.260 → 1.2.262

package/dist/composites/role-node-pill.d.ts

@@ -1,14 +1,21 @@
 /**
-* RoleNodePill — one pipeline role and the node that hosts it, tinted by that
-* node's palette colour (agent-settings `color`, else stable hash).
+* RoleNodePill — a node tinted by its palette colour (agent-settings `color`,
+* else stable hash). With a `roleLabel`, shows role · node · colour (Assignments).
+* Without, colour icon + name only (Nodes selector and similar).
 */
 import type { NodeColorId } from "@camstack/types";
-import type { JSX } from "react";
+import type { JSX, ReactNode } from "react";
 export interface RoleNodePillProps {
-	readonly roleLabel: string;
+	/** When omitted, the pill is colour icon + node name only. */
+	readonly roleLabel?: string;
 	readonly nodeName: string;
 	readonly colorId: NodeColorId;
 	readonly emphasized?: boolean;
 	readonly pinned?: boolean;
+	/** When set, the pill is a selectable control (`role="tab"`). */
+	readonly onSelect?: () => void;
+	readonly disabled?: boolean;
+	/** Extra trailing content inside the pill (e.g. "offline"). */
+	readonly trailing?: ReactNode;
 }
-export declare function RoleNodePill({ roleLabel, nodeName, colorId, emphasized, pinned }: RoleNodePillProps): JSX.Element;
+export declare function RoleNodePill({ roleLabel, nodeName, colorId, emphasized, pinned, onSelect, disabled, trailing }: RoleNodePillProps): JSX.Element;

package/dist/index.cjs

@@ -29241,6 +29241,13 @@ function EditableArrayField({ field, value, onChange, disabled, translationFn, o
 	};
 	const canRemove = rows.length > minRows;
 	const canAdd = rows.length < maxRows;
+	const idKey = field.itemIdKey ?? "id";
+	const rowReactKey = (row, idx) => {
+		const raw = row[idKey];
+		if (typeof raw === "string" && raw.length > 0) return raw;
+		if (typeof raw === "number" && Number.isFinite(raw)) return String(raw);
+		return `row-${String(idx)}`;
+	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "col-span-full space-y-2",
 		children: [
@@ -29287,7 +29294,7 @@ function EditableArrayField({ field, value, onChange, disabled, translationFn, o
 							onAction
 						}, sub.key))
 					})]
-				}, idx))
+				}, rowReactKey(row, idx)))
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 				type: "button",
@@ -30166,23 +30173,44 @@ var Chevron$1 = ({ open }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg",
 	"aria-hidden": true,
 	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("polyline", { points: "9 18 15 12 9 6" })
 });
+function isValueBearingField(f) {
+	return f.type !== "separator" && f.type !== "info" && f.type !== "button" && f.type !== "group";
+}
 function extractValues(schema) {
 	const out = {};
 	if (!schema) return out;
 	for (const s of schema.sections) for (const f of s.fields) {
-		if (f.type === "separator" || f.type === "info" || f.type === "button" || f.type === "group") continue;
+		if (!isValueBearingField(f)) continue;
 		const key = f.key;
 		out[key] = f.value;
 	}
 	return out;
 }
+/** Paint operator edits into the hydrated schema so controlled inputs keep focus. */
+function applyValuesToSchema(schema, nextValues) {
+	return {
+		...schema,
+		sections: schema.sections.map((s) => ({
+			...s,
+			fields: s.fields.map((f) => {
+				if (!isValueBearingField(f)) return f;
+				const key = f.key;
+				if (!(key in nextValues)) return f;
+				return {
+					...f,
+					value: nextValues[key]
+				};
+			})
+		}))
+	};
+}
 function stripValues(schema) {
 	return {
 		...schema,
 		sections: schema.sections.map((s) => ({
 			...s,
 			fields: s.fields.map((f) => {
-				if (f.type === "separator" || f.type === "info" || f.type === "button" || f.type === "group") return f;
+				if (!isValueBearingField(f)) return f;
 				const { value: _drop, ...rest } = f;
 				return rest;
 			})
@@ -30198,6 +30226,8 @@ function AddonGlobalSettingsForm({ trpc, addonId, nodeId, title, disabled, onAft
 	const [open, setOpen] = (0, react$1.useState)(defaultOpen ?? false);
 	const [overrideValues, setOverrideValues] = (0, react$1.useState)({});
 	const [baseValues, setBaseValues] = (0, react$1.useState)(null);
+	/** Bumps on every persist edit; a stale refetch must not clobber a newer local paint. */
+	const persistSeq = (0, react$1.useRef)(0);
 	(0, react$1.useEffect)(() => {
 		setBaseValues(null);
 		setOverrideValues({});
@@ -30266,7 +30296,10 @@ function AddonGlobalSettingsForm({ trpc, addonId, nodeId, title, disabled, onAft
 		const patch = {};
 		for (const k of Object.keys(nextValues)) if (nextValues[k] !== values[k]) patch[k] = nextValues[k];
 		if (Object.keys(patch).length === 0) return;
+		const seq = ++persistSeq.current;
+		setHydrated((prev) => prev === null ? prev : applyValuesToSchema(prev, nextValues));
 		setSaving(true);
+		setError(null);
 		try {
 			await trpc.addonSettings.updateGlobalSettings.mutate({
 				addonId,
@@ -30277,12 +30310,12 @@ function AddonGlobalSettingsForm({ trpc, addonId, nodeId, title, disabled, onAft
 				addonId,
 				nodeId
 			});
-			if (next) setHydrated(next);
-			onAfterChange?.();
+			if (next && seq === persistSeq.current) setHydrated(next);
+			if (seq === persistSeq.current) onAfterChange?.();
 		} catch (err) {
-			setError(err instanceof Error ? err.message : String(err));
+			if (seq === persistSeq.current) setError(err instanceof Error ? err.message : String(err));
 		} finally {
-			setSaving(false);
+			if (seq === persistSeq.current) setSaving(false);
 		}
 	};
 	if (loading) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -30314,15 +30347,23 @@ function AddonGlobalSettingsForm({ trpc, addonId, nodeId, title, disabled, onAft
 		...values,
 		...overrideValues
 	} : values;
-	const body = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [effectiveMode === "override" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "mb-2 text-[11px] text-foreground-subtle",
-		children: "Benchmark override — applies to this run only. The addon's saved settings are not changed."
-	}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConfigFormBuilder, {
-		schema: schemaNoValues,
-		values: effectiveValues,
-		onChange: handleChange,
-		disabled: disabled === true || saving
-	})] });
+	const body = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		effectiveMode === "override" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "mb-2 text-[11px] text-foreground-subtle",
+			children: "Benchmark override — applies to this run only. The addon's saved settings are not changed."
+		}) : null,
+		saving ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "mb-2 text-[11px] text-foreground-subtle",
+			"aria-live": "polite",
+			children: "Saving…"
+		}) : null,
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConfigFormBuilder, {
+			schema: schemaNoValues,
+			values: effectiveValues,
+			onChange: handleChange,
+			disabled: disabled === true
+		})
+	] });
 	if (collapsible === true) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
 		className: "rounded-lg border border-border bg-surface overflow-hidden",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
@@ -32813,26 +32854,51 @@ var NODE_RING_CLASS = {
 	"node-g": "ring-node-g/45",
 	"node-h": "ring-node-h/45"
 };
-function RoleNodePill({ roleLabel, nodeName, colorId, emphasized = false, pinned = false }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+function RoleNodePill({ roleLabel, nodeName, colorId, emphasized = false, pinned = false, onSelect, disabled = false, trailing }) {
+	const title = roleLabel !== void 0 ? pinned ? `${roleLabel} pinned on ${nodeName}` : `${roleLabel} on ${nodeName}` : nodeName;
+	const className = cn("inline-flex max-w-full items-center gap-1 rounded-full px-2 py-0.5 text-[10px] leading-tight ring-1 ring-inset", emphasized ? cn("role-node-pill-emphasized font-semibold ring-2", NODE_BG_EMPHASIZED_CLASS[colorId], NODE_RING_CLASS[colorId], nodeTextColorClass(colorId)) : cn("font-medium text-foreground-muted ring-border/60", NODE_BG_SOFT_CLASS[colorId]), onSelect !== void 0 && !disabled && "cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40", disabled && "cursor-not-allowed opacity-50");
+	const colorIcon = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: cn("h-1.5 w-1.5 shrink-0 rounded-full", nodeColorClass(colorId)),
+		"aria-hidden": true
+	});
+	const body = roleLabel !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		pinned && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Pin, {
+			className: "h-2.5 w-2.5 shrink-0 opacity-80",
+			"aria-label": "pinned"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "shrink-0",
+			children: roleLabel
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: cn("min-w-0 truncate", emphasized ? nodeTextColorClass(colorId) : "text-foreground-subtle"),
+			children: nodeName
+		}),
+		colorIcon
+	] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		colorIcon,
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: cn("min-w-0 truncate font-medium", emphasized ? nodeTextColorClass(colorId) : "text-foreground"),
+			children: nodeName
+		}),
+		trailing
+	] });
+	if (onSelect !== void 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		role: "tab",
+		"aria-selected": emphasized,
 		"data-testid": "role-node-pill",
-		title: pinned ? `${roleLabel} pinned on ${nodeName}` : `${roleLabel} on ${nodeName}`,
-		className: cn("inline-flex max-w-full items-center gap-1 rounded-full px-2 py-0.5 text-[10px] leading-tight ring-1 ring-inset", emphasized ? cn("role-node-pill-emphasized font-semibold ring-2", NODE_BG_EMPHASIZED_CLASS[colorId], NODE_RING_CLASS[colorId], nodeTextColorClass(colorId)) : cn("font-medium text-foreground-muted ring-border/60", NODE_BG_SOFT_CLASS[colorId])),
-		children: [
-			pinned && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Pin, {
-				className: "h-2.5 w-2.5 shrink-0 opacity-80",
-				"aria-label": "pinned"
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "shrink-0",
-				children: roleLabel
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: cn("min-w-0 truncate", emphasized ? nodeTextColorClass(colorId) : "text-foreground-subtle"),
-				children: nodeName
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: cn("h-1.5 w-1.5 shrink-0 rounded-full", nodeColorClass(colorId)) })
-		]
+		title,
+		disabled,
+		onClick: onSelect,
+		className,
+		children: body
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		"data-testid": "role-node-pill",
+		title,
+		className,
+		children: body
 	});
 }
 //#endregion

package/dist/index.js

@@ -29217,6 +29217,13 @@ function EditableArrayField({ field, value, onChange, disabled, translationFn, o
 	};
 	const canRemove = rows.length > minRows;
 	const canAdd = rows.length < maxRows;
+	const idKey = field.itemIdKey ?? "id";
+	const rowReactKey = (row, idx) => {
+		const raw = row[idKey];
+		if (typeof raw === "string" && raw.length > 0) return raw;
+		if (typeof raw === "number" && Number.isFinite(raw)) return String(raw);
+		return `row-${String(idx)}`;
+	};
 	return /* @__PURE__ */ jsxs("div", {
 		className: "col-span-full space-y-2",
 		children: [
@@ -29263,7 +29270,7 @@ function EditableArrayField({ field, value, onChange, disabled, translationFn, o
 							onAction
 						}, sub.key))
 					})]
-				}, idx))
+				}, rowReactKey(row, idx)))
 			}),
 			/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("button", {
 				type: "button",
@@ -30142,23 +30149,44 @@ var Chevron$1 = ({ open }) => /* @__PURE__ */ jsx("svg", {
 	"aria-hidden": true,
 	children: /* @__PURE__ */ jsx("polyline", { points: "9 18 15 12 9 6" })
 });
+function isValueBearingField(f) {
+	return f.type !== "separator" && f.type !== "info" && f.type !== "button" && f.type !== "group";
+}
 function extractValues(schema) {
 	const out = {};
 	if (!schema) return out;
 	for (const s of schema.sections) for (const f of s.fields) {
-		if (f.type === "separator" || f.type === "info" || f.type === "button" || f.type === "group") continue;
+		if (!isValueBearingField(f)) continue;
 		const key = f.key;
 		out[key] = f.value;
 	}
 	return out;
 }
+/** Paint operator edits into the hydrated schema so controlled inputs keep focus. */
+function applyValuesToSchema(schema, nextValues) {
+	return {
+		...schema,
+		sections: schema.sections.map((s) => ({
+			...s,
+			fields: s.fields.map((f) => {
+				if (!isValueBearingField(f)) return f;
+				const key = f.key;
+				if (!(key in nextValues)) return f;
+				return {
+					...f,
+					value: nextValues[key]
+				};
+			})
+		}))
+	};
+}
 function stripValues(schema) {
 	return {
 		...schema,
 		sections: schema.sections.map((s) => ({
 			...s,
 			fields: s.fields.map((f) => {
-				if (f.type === "separator" || f.type === "info" || f.type === "button" || f.type === "group") return f;
+				if (!isValueBearingField(f)) return f;
 				const { value: _drop, ...rest } = f;
 				return rest;
 			})
@@ -30174,6 +30202,8 @@ function AddonGlobalSettingsForm({ trpc, addonId, nodeId, title, disabled, onAft
 	const [open, setOpen] = useState(defaultOpen ?? false);
 	const [overrideValues, setOverrideValues] = useState({});
 	const [baseValues, setBaseValues] = useState(null);
+	/** Bumps on every persist edit; a stale refetch must not clobber a newer local paint. */
+	const persistSeq = useRef(0);
 	useEffect(() => {
 		setBaseValues(null);
 		setOverrideValues({});
@@ -30242,7 +30272,10 @@ function AddonGlobalSettingsForm({ trpc, addonId, nodeId, title, disabled, onAft
 		const patch = {};
 		for (const k of Object.keys(nextValues)) if (nextValues[k] !== values[k]) patch[k] = nextValues[k];
 		if (Object.keys(patch).length === 0) return;
+		const seq = ++persistSeq.current;
+		setHydrated((prev) => prev === null ? prev : applyValuesToSchema(prev, nextValues));
 		setSaving(true);
+		setError(null);
 		try {
 			await trpc.addonSettings.updateGlobalSettings.mutate({
 				addonId,
@@ -30253,12 +30286,12 @@ function AddonGlobalSettingsForm({ trpc, addonId, nodeId, title, disabled, onAft
 				addonId,
 				nodeId
 			});
-			if (next) setHydrated(next);
-			onAfterChange?.();
+			if (next && seq === persistSeq.current) setHydrated(next);
+			if (seq === persistSeq.current) onAfterChange?.();
 		} catch (err) {
-			setError(err instanceof Error ? err.message : String(err));
+			if (seq === persistSeq.current) setError(err instanceof Error ? err.message : String(err));
 		} finally {
-			setSaving(false);
+			if (seq === persistSeq.current) setSaving(false);
 		}
 	};
 	if (loading) return /* @__PURE__ */ jsxs("div", {
@@ -30290,15 +30323,23 @@ function AddonGlobalSettingsForm({ trpc, addonId, nodeId, title, disabled, onAft
 		...values,
 		...overrideValues
 	} : values;
-	const body = /* @__PURE__ */ jsxs(Fragment$1, { children: [effectiveMode === "override" ? /* @__PURE__ */ jsx("div", {
-		className: "mb-2 text-[11px] text-foreground-subtle",
-		children: "Benchmark override — applies to this run only. The addon's saved settings are not changed."
-	}) : null, /* @__PURE__ */ jsx(ConfigFormBuilder, {
-		schema: schemaNoValues,
-		values: effectiveValues,
-		onChange: handleChange,
-		disabled: disabled === true || saving
-	})] });
+	const body = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		effectiveMode === "override" ? /* @__PURE__ */ jsx("div", {
+			className: "mb-2 text-[11px] text-foreground-subtle",
+			children: "Benchmark override — applies to this run only. The addon's saved settings are not changed."
+		}) : null,
+		saving ? /* @__PURE__ */ jsx("div", {
+			className: "mb-2 text-[11px] text-foreground-subtle",
+			"aria-live": "polite",
+			children: "Saving…"
+		}) : null,
+		/* @__PURE__ */ jsx(ConfigFormBuilder, {
+			schema: schemaNoValues,
+			values: effectiveValues,
+			onChange: handleChange,
+			disabled: disabled === true
+		})
+	] });
 	if (collapsible === true) return /* @__PURE__ */ jsxs("section", {
 		className: "rounded-lg border border-border bg-surface overflow-hidden",
 		children: [/* @__PURE__ */ jsxs("button", {
@@ -32789,26 +32830,51 @@ var NODE_RING_CLASS = {
 	"node-g": "ring-node-g/45",
 	"node-h": "ring-node-h/45"
 };
-function RoleNodePill({ roleLabel, nodeName, colorId, emphasized = false, pinned = false }) {
-	return /* @__PURE__ */ jsxs("span", {
+function RoleNodePill({ roleLabel, nodeName, colorId, emphasized = false, pinned = false, onSelect, disabled = false, trailing }) {
+	const title = roleLabel !== void 0 ? pinned ? `${roleLabel} pinned on ${nodeName}` : `${roleLabel} on ${nodeName}` : nodeName;
+	const className = cn("inline-flex max-w-full items-center gap-1 rounded-full px-2 py-0.5 text-[10px] leading-tight ring-1 ring-inset", emphasized ? cn("role-node-pill-emphasized font-semibold ring-2", NODE_BG_EMPHASIZED_CLASS[colorId], NODE_RING_CLASS[colorId], nodeTextColorClass(colorId)) : cn("font-medium text-foreground-muted ring-border/60", NODE_BG_SOFT_CLASS[colorId]), onSelect !== void 0 && !disabled && "cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40", disabled && "cursor-not-allowed opacity-50");
+	const colorIcon = /* @__PURE__ */ jsx("span", {
+		className: cn("h-1.5 w-1.5 shrink-0 rounded-full", nodeColorClass(colorId)),
+		"aria-hidden": true
+	});
+	const body = roleLabel !== void 0 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		pinned && /* @__PURE__ */ jsx(Pin, {
+			className: "h-2.5 w-2.5 shrink-0 opacity-80",
+			"aria-label": "pinned"
+		}),
+		/* @__PURE__ */ jsx("span", {
+			className: "shrink-0",
+			children: roleLabel
+		}),
+		/* @__PURE__ */ jsx("span", {
+			className: cn("min-w-0 truncate", emphasized ? nodeTextColorClass(colorId) : "text-foreground-subtle"),
+			children: nodeName
+		}),
+		colorIcon
+	] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		colorIcon,
+		/* @__PURE__ */ jsx("span", {
+			className: cn("min-w-0 truncate font-medium", emphasized ? nodeTextColorClass(colorId) : "text-foreground"),
+			children: nodeName
+		}),
+		trailing
+	] });
+	if (onSelect !== void 0) return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		role: "tab",
+		"aria-selected": emphasized,
 		"data-testid": "role-node-pill",
-		title: pinned ? `${roleLabel} pinned on ${nodeName}` : `${roleLabel} on ${nodeName}`,
-		className: cn("inline-flex max-w-full items-center gap-1 rounded-full px-2 py-0.5 text-[10px] leading-tight ring-1 ring-inset", emphasized ? cn("role-node-pill-emphasized font-semibold ring-2", NODE_BG_EMPHASIZED_CLASS[colorId], NODE_RING_CLASS[colorId], nodeTextColorClass(colorId)) : cn("font-medium text-foreground-muted ring-border/60", NODE_BG_SOFT_CLASS[colorId])),
-		children: [
-			pinned && /* @__PURE__ */ jsx(Pin, {
-				className: "h-2.5 w-2.5 shrink-0 opacity-80",
-				"aria-label": "pinned"
-			}),
-			/* @__PURE__ */ jsx("span", {
-				className: "shrink-0",
-				children: roleLabel
-			}),
-			/* @__PURE__ */ jsx("span", {
-				className: cn("min-w-0 truncate", emphasized ? nodeTextColorClass(colorId) : "text-foreground-subtle"),
-				children: nodeName
-			}),
-			/* @__PURE__ */ jsx("span", { className: cn("h-1.5 w-1.5 shrink-0 rounded-full", nodeColorClass(colorId)) })
-		]
+		title,
+		disabled,
+		onClick: onSelect,
+		className,
+		children: body
+	});
+	return /* @__PURE__ */ jsx("span", {
+		"data-testid": "role-node-pill",
+		title,
+		className,
+		children: body
 	});
 }
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camstack/ui-library",
-  "version": "1.2.260",
+  "version": "1.2.262",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",