@camstack/ui-library 1.2.261 → 1.2.263

package/dist/composites/addon-global-settings-form.d.ts

@@ -45,6 +45,11 @@ interface AddonGlobalSettingsFormProps {
 	*/
 	readonly sectionIds?: readonly string[];
 	/**
+	* Fields only — no form card, section border or section title. Use when the
+	* parent already owns the layout (e.g. Nodes page cluster secret).
+	*/
+	readonly bare?: boolean;
+	/**
 	* Render as collapsible. When true, the form body is hidden until
 	* the operator expands the header (click). Defaults to open so
 	* callers that always want the form visible don't have to opt out.
@@ -74,5 +79,5 @@ interface AddonGlobalSettingsFormProps {
 	*/
 	readonly onOverrideChange?: (patch: Record<string, unknown>, effective: Record<string, unknown>) => void;
 }
-export declare function AddonGlobalSettingsForm({ trpc, addonId, nodeId, title, disabled, onAfterChange, refreshToken, sectionIds, collapsible, defaultOpen, mode, onOverrideChange }: AddonGlobalSettingsFormProps): JSX.Element | null;
+export declare function AddonGlobalSettingsForm({ trpc, addonId, nodeId, title, disabled, onAfterChange, refreshToken, sectionIds, bare, collapsible, defaultOpen, mode, onOverrideChange }: AddonGlobalSettingsFormProps): JSX.Element | null;
 export {};

package/dist/composites/config-form-builder.d.ts

@@ -14,6 +14,11 @@ interface FormBuilderProps {
 	probeResults?: Record<string, ProbeState>;
 	/** Callback to clear a probe result when a field value changes */
 	onClearProbe?: (key: string) => void;
+	/**
+	* Fields only — no section border, title or description. For a parent that
+	* already frames the form (or wants a single field with no chrome).
+	*/
+	bare?: boolean;
 }
-export declare function ConfigFormBuilder({ schema, values, onChange, disabled, translationFn, onTestField, probeResults, onClearProbe }: FormBuilderProps): JSX.Element;
+export declare function ConfigFormBuilder({ schema, values, onChange, disabled, translationFn, onTestField, probeResults, onClearProbe, bare }: FormBuilderProps): JSX.Element;
 export {};

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

@@ -30127,7 +30127,7 @@ function SectionCard$1({ section, values, onChange, disabled, translationFn, onT
 		})]
 	});
 }
-function ConfigFormBuilder({ schema, values, onChange, disabled, translationFn, onTestField, probeResults, onClearProbe }) {
+function ConfigFormBuilder({ schema, values, onChange, disabled, translationFn, onTestField, probeResults, onClearProbe, bare = false }) {
 	const handleFieldChange = (key, value) => {
 		onChange({
 			...values,
@@ -30135,6 +30135,18 @@ function ConfigFormBuilder({ schema, values, onChange, disabled, translationFn,
 		});
 		onClearProbe?.(key);
 	};
+	if (bare) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "grid grid-cols-1 gap-y-2.5",
+		children: schema.sections.flatMap((section) => section.fields.map((field) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormField, {
+			field,
+			values,
+			onChange: handleFieldChange,
+			disabled,
+			translationFn,
+			onTestField,
+			externalProbe: probeResults?.[field.key]
+		}, field.key)))
+	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "space-y-4",
 		children: schema.sections.map((section) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SectionCard$1, {
@@ -30217,7 +30229,7 @@ function stripValues(schema) {
 		}))
 	};
 }
-function AddonGlobalSettingsForm({ trpc, addonId, nodeId, title, disabled, onAfterChange, refreshToken, sectionIds, collapsible, defaultOpen, mode, onOverrideChange }) {
+function AddonGlobalSettingsForm({ trpc, addonId, nodeId, title, disabled, onAfterChange, refreshToken, sectionIds, bare = false, collapsible, defaultOpen, mode, onOverrideChange }) {
 	const effectiveMode = mode ?? "persist";
 	const [hydrated, setHydrated] = (0, react$1.useState)(null);
 	const [loading, setLoading] = (0, react$1.useState)(true);
@@ -30361,9 +30373,11 @@ function AddonGlobalSettingsForm({ trpc, addonId, nodeId, title, disabled, onAft
 			schema: schemaNoValues,
 			values: effectiveValues,
 			onChange: handleChange,
-			disabled: disabled === true
+			disabled: disabled === true,
+			bare
 		})
 	] });
+	if (bare) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: body });
 	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", {
@@ -32854,26 +32868,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

@@ -30103,7 +30103,7 @@ function SectionCard$1({ section, values, onChange, disabled, translationFn, onT
 		})]
 	});
 }
-function ConfigFormBuilder({ schema, values, onChange, disabled, translationFn, onTestField, probeResults, onClearProbe }) {
+function ConfigFormBuilder({ schema, values, onChange, disabled, translationFn, onTestField, probeResults, onClearProbe, bare = false }) {
 	const handleFieldChange = (key, value) => {
 		onChange({
 			...values,
@@ -30111,6 +30111,18 @@ function ConfigFormBuilder({ schema, values, onChange, disabled, translationFn,
 		});
 		onClearProbe?.(key);
 	};
+	if (bare) return /* @__PURE__ */ jsx("div", {
+		className: "grid grid-cols-1 gap-y-2.5",
+		children: schema.sections.flatMap((section) => section.fields.map((field) => /* @__PURE__ */ jsx(FormField, {
+			field,
+			values,
+			onChange: handleFieldChange,
+			disabled,
+			translationFn,
+			onTestField,
+			externalProbe: probeResults?.[field.key]
+		}, field.key)))
+	});
 	return /* @__PURE__ */ jsx("div", {
 		className: "space-y-4",
 		children: schema.sections.map((section) => /* @__PURE__ */ jsx(SectionCard$1, {
@@ -30193,7 +30205,7 @@ function stripValues(schema) {
 		}))
 	};
 }
-function AddonGlobalSettingsForm({ trpc, addonId, nodeId, title, disabled, onAfterChange, refreshToken, sectionIds, collapsible, defaultOpen, mode, onOverrideChange }) {
+function AddonGlobalSettingsForm({ trpc, addonId, nodeId, title, disabled, onAfterChange, refreshToken, sectionIds, bare = false, collapsible, defaultOpen, mode, onOverrideChange }) {
 	const effectiveMode = mode ?? "persist";
 	const [hydrated, setHydrated] = useState(null);
 	const [loading, setLoading] = useState(true);
@@ -30337,9 +30349,11 @@ function AddonGlobalSettingsForm({ trpc, addonId, nodeId, title, disabled, onAft
 			schema: schemaNoValues,
 			values: effectiveValues,
 			onChange: handleChange,
-			disabled: disabled === true
+			disabled: disabled === true,
+			bare
 		})
 	] });
+	if (bare) return /* @__PURE__ */ jsx("div", { children: body });
 	if (collapsible === true) return /* @__PURE__ */ jsxs("section", {
 		className: "rounded-lg border border-border bg-surface overflow-hidden",
 		children: [/* @__PURE__ */ jsxs("button", {
@@ -32830,26 +32844,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.261",
+  "version": "1.2.263",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",