@camstack/ui-library 1.2.263 → 1.2.264

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

@@ -32837,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",
@@ -32868,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
@@ -32885,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
@@ -32902,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,
@@ -32910,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

@@ -32813,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",
@@ -32844,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
@@ -32861,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
@@ -32878,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,
@@ -32886,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.263",
+  "version": "1.2.264",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",