@camstack/ui-library 1.2.262 → 1.2.264

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/index.d.ts

@@ -18,7 +18,7 @@ export type { NetworkLinkBadgeProps, NetworkLinkStatusLike } from "./network-lin
 export { NetworkLinkBadge } from "./network-link-badge";
 export { NODE_COLOR_IDS, assignNodeColorId, nodeColorClass, nodeTextColorClass } from "./node-color";
 export type { NodeColorId } from "./node-color";
-export type { RoleNodePillProps } from "./role-node-pill";
+export type { PipelineRoleId, RoleNodePillProps } from "./role-node-pill";
 export { RoleNodePill } from "./role-node-pill";
 export * from "./breadcrumb";
 export type { AdaptiveHintsReport, AdaptiveOfferPhase, ApplyDownlinkProbe, DownlinkProbeAnswer } from "./adaptive-downlink";

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

@@ -1,14 +1,19 @@
 /**
-* 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).
+* RoleNodePill — with a role: chrome tinted by ROLE (Detection / Decode /
+* Audio) and a trailing node-colour dot. Without a role: colour icon + name
+* only (Nodes selector and similar).
 */
 import type { NodeColorId } from "@camstack/types";
 import type { JSX, ReactNode } from "react";
+/** Stable ids for the three camera roles on Assignments. */
+export type PipelineRoleId = "detection" | "decode" | "audio";
 export interface RoleNodePillProps {
 	/** When omitted, the pill is colour icon + node name only. */
 	readonly roleLabel?: string;
+	/** When set with a role label, chrome uses role tones instead of node palette. */
+	readonly roleId?: PipelineRoleId;
 	readonly nodeName: string;
+	/** Node palette — trailing host dot (and full chrome when there is no roleId). */
 	readonly colorId: NodeColorId;
 	readonly emphasized?: boolean;
 	readonly pinned?: boolean;
@@ -18,4 +23,4 @@ export interface RoleNodePillProps {
 	/** Extra trailing content inside the pill (e.g. "offline"). */
 	readonly trailing?: ReactNode;
 }
-export declare function RoleNodePill({ roleLabel, nodeName, colorId, emphasized, pinned, onSelect, disabled, trailing }: RoleNodePillProps): JSX.Element;
+export declare function RoleNodePill({ roleLabel, roleId, 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", {
@@ -32823,6 +32837,16 @@ function nodeTextColorClass(id) {
 }
 //#endregion
 //#region src/composites/role-node-pill.tsx
+var ROLE_SOFT_CLASS = {
+	detection: "bg-info/12 text-info ring-info/35",
+	decode: "bg-warning/12 text-warning ring-warning/35",
+	audio: "bg-success/12 text-success ring-success/35"
+};
+var ROLE_EMPHASIZED_CLASS = {
+	detection: "bg-info/22 text-info ring-info/55",
+	decode: "bg-warning/22 text-warning ring-warning/55",
+	audio: "bg-success/22 text-success ring-success/55"
+};
 /** Full class strings so Tailwind v4 JIT retains node palette opacity utilities. */
 var NODE_BG_SOFT_CLASS = {
 	"node-a": "bg-node-a/12",
@@ -32854,9 +32878,10 @@ 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, onSelect, disabled = false, trailing }) {
+function RoleNodePill({ roleLabel, roleId, 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 roleChrome = roleLabel !== void 0 && roleId !== void 0;
+	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", roleChrome ? emphasized ? cn("role-node-pill-emphasized font-semibold ring-2", ROLE_EMPHASIZED_CLASS[roleId]) : cn("font-medium", ROLE_SOFT_CLASS[roleId]) : 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
@@ -32871,7 +32896,7 @@ function RoleNodePill({ roleLabel, nodeName, colorId, emphasized = false, pinned
 			children: roleLabel
 		}),
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: cn("min-w-0 truncate", emphasized ? nodeTextColorClass(colorId) : "text-foreground-subtle"),
+			className: cn("min-w-0 truncate", roleChrome ? "opacity-80" : emphasized ? nodeTextColorClass(colorId) : "text-foreground-subtle"),
 			children: nodeName
 		}),
 		colorIcon
@@ -32888,6 +32913,7 @@ function RoleNodePill({ roleLabel, nodeName, colorId, emphasized = false, pinned
 		role: "tab",
 		"aria-selected": emphasized,
 		"data-testid": "role-node-pill",
+		"data-role": roleId,
 		title,
 		disabled,
 		onClick: onSelect,
@@ -32896,6 +32922,7 @@ function RoleNodePill({ roleLabel, nodeName, colorId, emphasized = false, pinned
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 		"data-testid": "role-node-pill",
+		"data-role": roleId,
 		title,
 		className,
 		children: body

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", {
@@ -32799,6 +32813,16 @@ function nodeTextColorClass(id) {
 }
 //#endregion
 //#region src/composites/role-node-pill.tsx
+var ROLE_SOFT_CLASS = {
+	detection: "bg-info/12 text-info ring-info/35",
+	decode: "bg-warning/12 text-warning ring-warning/35",
+	audio: "bg-success/12 text-success ring-success/35"
+};
+var ROLE_EMPHASIZED_CLASS = {
+	detection: "bg-info/22 text-info ring-info/55",
+	decode: "bg-warning/22 text-warning ring-warning/55",
+	audio: "bg-success/22 text-success ring-success/55"
+};
 /** Full class strings so Tailwind v4 JIT retains node palette opacity utilities. */
 var NODE_BG_SOFT_CLASS = {
 	"node-a": "bg-node-a/12",
@@ -32830,9 +32854,10 @@ 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, onSelect, disabled = false, trailing }) {
+function RoleNodePill({ roleLabel, roleId, 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 roleChrome = roleLabel !== void 0 && roleId !== void 0;
+	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", roleChrome ? emphasized ? cn("role-node-pill-emphasized font-semibold ring-2", ROLE_EMPHASIZED_CLASS[roleId]) : cn("font-medium", ROLE_SOFT_CLASS[roleId]) : 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
@@ -32847,7 +32872,7 @@ function RoleNodePill({ roleLabel, nodeName, colorId, emphasized = false, pinned
 			children: roleLabel
 		}),
 		/* @__PURE__ */ jsx("span", {
-			className: cn("min-w-0 truncate", emphasized ? nodeTextColorClass(colorId) : "text-foreground-subtle"),
+			className: cn("min-w-0 truncate", roleChrome ? "opacity-80" : emphasized ? nodeTextColorClass(colorId) : "text-foreground-subtle"),
 			children: nodeName
 		}),
 		colorIcon
@@ -32864,6 +32889,7 @@ function RoleNodePill({ roleLabel, nodeName, colorId, emphasized = false, pinned
 		role: "tab",
 		"aria-selected": emphasized,
 		"data-testid": "role-node-pill",
+		"data-role": roleId,
 		title,
 		disabled,
 		onClick: onSelect,
@@ -32872,6 +32898,7 @@ function RoleNodePill({ roleLabel, nodeName, colorId, emphasized = false, pinned
 	});
 	return /* @__PURE__ */ jsx("span", {
 		"data-testid": "role-node-pill",
+		"data-role": roleId,
 		title,
 		className,
 		children: body

package/package.json

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