@camstack/ui-library 1.2.342 → 1.2.344

package/CHANGELOG.md

@@ -7,6 +7,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.2.344] - 2026-10-28
+
+### Changed
+
+- The breadcrumb usage example links to the new per-addon integration URL
+
+## [1.2.343] - 2026-10-28
+
+### Changed
+
+- Device value fields are named after their quantity instead of their unit; run the quantity-field migration after updating
+
 ## [1.2.342] - 2026-10-28
 
 ### Changed

package/dist/composites/battery-badge.d.ts

@@ -15,7 +15,7 @@ import type { JSX } from "react";
 export interface BatteryStatusLike {
 	/** `null` means no reading has landed yet (cold seed) — NOT a flat 0 %
 	*  (D315). Render "Unknown", never a red critical badge. */
-	readonly percentage: number | null;
+	readonly level: number | null;
 	readonly charging: "dc" | "solar" | "none" | "unknown";
 	readonly sleeping: boolean;
 	/** True for a binary LOW_BAT source with no real % — render "Normal"/"Low"

package/dist/composites/breadcrumb.d.ts

@@ -18,7 +18,7 @@ export interface BreadcrumbProps {
 * ```tsx
 * <Breadcrumb items={[
 *   { label: 'Integrations', onClick: () => navigate('/integrations') },
-*   { label: 'RTSP Cameras', onClick: () => navigate('/integrations/int_0001') },
+*   { label: 'RTSP Cameras', onClick: () => navigate('/integrations/provider-rtsp?instance=int_0001') },
 *   { label: 'Front Door' },
 * ]} />
 * ```

package/dist/composites/network-link-badge.d.ts

@@ -1,7 +1,7 @@
 import { type JSX } from "react";
 export interface NetworkLinkStatusLike {
 	readonly type: "wifi" | "ethernet" | "cellular" | "unknown";
-	readonly signalPercent: number | null;
+	readonly signal: number | null;
 	readonly ssid?: string;
 }
 export interface NetworkLinkBadgeProps {

package/dist/hooks/use-device-network-link.d.ts

@@ -10,8 +10,8 @@ import { type UseDeviceProxyTrpc } from "./use-device-proxy";
 export interface NetworkLinkStatus {
 	readonly type: "wifi" | "ethernet" | "cellular" | "unknown";
 	/** `null` = not known or not applicable (a wired link has no signal). */
-	readonly signalPercent: number | null;
-	readonly rssiDbm?: number;
+	readonly signal: number | null;
+	readonly rssi?: number;
 	readonly ssid?: string;
 	readonly lastUpdated: number;
 }

package/dist/index.cjs

@@ -36006,7 +36006,7 @@ function levelColor(percentage, charging) {
 function BatteryBadge({ status, variant = "compact", className }) {
 	const t = useUiText();
 	if (!status) return null;
-	const { percentage, charging, sleeping, binary } = status;
+	const { level: percentage, charging, sleeping, binary } = status;
 	if (percentage === null) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 		className: cn("inline-flex items-center gap-1 text-[10px] font-medium text-foreground-subtle", className),
 		title: t("uiLibrary.batteryBadge.titleUnknown", "Battery: unknown"),
@@ -36169,15 +36169,15 @@ function NetworkLinkBadge({ status, className }) {
 		title: t("uiLibrary.networkLinkBadge.ethernet", "Network: ethernet"),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Cable, { className: "h-3.5 w-3.5" })
 	});
-	const Icon = status.type === "cellular" ? RadioTower : pickWifiIcon(status.signalPercent);
-	const signal = status.signalPercent === null ? null : Math.round(status.signalPercent);
+	const Icon = status.type === "cellular" ? RadioTower : pickWifiIcon(status.signal);
+	const signal = status.signal === null ? null : Math.round(status.signal);
 	const networkText = status.ssid ? t("uiLibrary.networkLinkBadge.typeSsid", "Network: {{type}} ({{ssid}})", {
 		type: status.type,
 		ssid: status.ssid
 	}) : t("uiLibrary.networkLinkBadge.type", "Network: {{type}}", { type: status.type });
 	const title = signal === null ? networkText : `${networkText} · ${t("uiLibrary.networkLinkBadge.signal", "signal {{percent}}%", { percent: signal })}`;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-		className: cn("inline-flex items-center gap-1 text-[10px] font-medium", signalColor(status.signalPercent), className),
+		className: cn("inline-flex items-center gap-1 text-[10px] font-medium", signalColor(status.signal), className),
 		title,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { className: "h-3.5 w-3.5" }), signal !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [signal, "%"] })]
 	});
@@ -36348,7 +36348,7 @@ function RoleNodePill({ roleLabel, roleId, nodeName, colorId, emphasized = false
 * ```tsx
 * <Breadcrumb items={[
 *   { label: 'Integrations', onClick: () => navigate('/integrations') },
-*   { label: 'RTSP Cameras', onClick: () => navigate('/integrations/int_0001') },
+*   { label: 'RTSP Cameras', onClick: () => navigate('/integrations/provider-rtsp?instance=int_0001') },
 *   { label: 'Front Door' },
 * ]} />
 * ```
@@ -47427,16 +47427,16 @@ function BrightnessPanel({ trpc, deviceId, layout, optimistic }) {
 			min: 0,
 			max: 100,
 			step: 1,
-			value: display.percentage,
+			value: display.level,
 			disabled: busy,
 			onChange: (e) => {
 				const pct = Number(e.target.value);
-				applyOptimistic({ percentage: pct });
-				if (!busy) cap?.setBrightness({ percentage: pct });
+				applyOptimistic({ level: pct });
+				if (!busy) cap?.setBrightness({ level: pct });
 			}
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 			className: "tabular-nums w-8 text-right",
-			children: [display.percentage, "%"]
+			children: [display.level, "%"]
 		})]
 	});
 }
@@ -47467,17 +47467,17 @@ function FanPanel({ trpc, deviceId, features, layout, optimistic }) {
 				min: 0,
 				max: 100,
 				step,
-				value: display.percentage ?? 0,
+				value: display.speed ?? 0,
 				disabled: busy,
 				onChange: (e) => {
 					const raw = Number(e.target.value);
 					const pct = Math.min(100, Math.max(0, Math.round(raw / step) * step));
-					applyOptimistic({ percentage: pct });
-					if (!busy) cap?.setPercentage({ percentage: pct });
+					applyOptimistic({ speed: pct });
+					if (!busy) cap?.setPercentage({ speed: pct });
 				}
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 				className: "tabular-nums w-8 text-right",
-				children: [display.percentage ?? "—", "%"]
+				children: [display.speed ?? "—", "%"]
 			})]
 		}), showPreset && display.availablePresets.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "flex items-center gap-2 text-xs text-foreground-subtle",
@@ -48565,25 +48565,25 @@ function hasBatteryNumericValue(slice, field) {
 var ROLE_DESCRIPTOR = {
 	"temperature-sensor": {
 		kind: "numeric",
-		field: "celsius",
+		field: "temperature",
 		quantity: "temperature",
 		getSliceHandle: (s) => s.temperatureSensor
 	},
 	"humidity-sensor": {
 		kind: "numeric",
-		field: "percent",
+		field: "humidity",
 		quantity: "humidity",
 		getSliceHandle: (s) => s.humiditySensor
 	},
 	"ambient-light-sensor": {
 		kind: "numeric",
-		field: "lux",
+		field: "illuminance",
 		quantity: "illuminance",
 		getSliceHandle: (s) => s.ambientLightSensor
 	},
 	"pressure-sensor": {
 		kind: "numeric",
-		field: "hpa",
+		field: "pressure",
 		quantity: "pressure",
 		getSliceHandle: (s) => s.pressureSensor
 	},
@@ -48625,25 +48625,25 @@ var ROLE_DESCRIPTOR = {
 	},
 	"power-sensor": {
 		kind: "numeric",
-		field: "watts",
+		field: "power",
 		quantity: "power",
 		getSliceHandle: (s) => s.powerMeter
 	},
 	"energy-sensor": {
 		kind: "numeric",
-		field: "kwhTotal",
+		field: "energy",
 		quantity: "energy",
 		getSliceHandle: (s) => s.powerMeter
 	},
 	"voltage-sensor": {
 		kind: "numeric",
-		field: "volts",
+		field: "voltage",
 		quantity: "voltage",
 		getSliceHandle: (s) => s.powerMeter
 	},
 	"current-sensor": {
 		kind: "numeric",
-		field: "amps",
+		field: "current",
 		quantity: "current",
 		getSliceHandle: (s) => s.powerMeter
 	},
@@ -49415,16 +49415,16 @@ function capSlice(caps, capName) {
 	return caps[capName];
 }
 /**
-* A battery group writes `battery.percentage`. The role's usual cap is
+* A battery group writes `battery.level`. The role's usual cap is
 * `numeric-sensor.value`. Hand the renderer a slice whose `value` is that
 * percentage so one numeric path draws both.
 */
 function batteryPercentageSlice(caps) {
 	const battery = capSlice(caps, "battery");
-	if (!isRecord$2(battery) || typeof battery["percentage"] !== "number") return void 0;
+	if (!isRecord$2(battery) || typeof battery["level"] !== "number") return void 0;
 	return {
 		...battery,
-		value: battery["percentage"]
+		value: battery["level"]
 	};
 }
 function snapshotSlice(input) {
@@ -50184,17 +50184,17 @@ function VacuumHeroCard({ trpc, deviceId }) {
 							children: meta.label
 						}), slice?.batteryLevel != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BatteryBadge$2, { level: slice.batteryLevel })]
 					}),
-					slice?.progressPercent != null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					slice?.progress != null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "flex items-center gap-2",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							className: "h-1.5 flex-1 rounded bg-surface-hover overflow-hidden",
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 								className: "h-full bg-primary transition-[width] duration-500",
-								style: { width: `${Math.max(0, Math.min(100, slice.progressPercent))}%` }
+								style: { width: `${Math.max(0, Math.min(100, slice.progress))}%` }
 							})
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 							className: "tabular-nums text-xs text-foreground-subtle",
-							children: [Math.round(slice.progressPercent), "%"]
+							children: [Math.round(slice.progress), "%"]
 						})]
 					}),
 					slice?.errorCode != null && slice.errorCode !== 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -50703,7 +50703,7 @@ function LawnMowerHeroCard({ trpc, deviceId }) {
 							children: meta.label
 						}), slice?.batteryLevel != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BatteryBadge$1, { level: slice.batteryLevel })]
 					}),
-					slice?.progressPercent != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProgressBar, { percent: slice.progressPercent }),
+					slice?.progress != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProgressBar, { percent: slice.progress }),
 					slice?.currentCode != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CodeLine, {
 						code: slice.currentCode,
 						label: slice.currentCodeLabel,
@@ -53354,9 +53354,9 @@ function DishwasherPanel({ trpc, deviceId, layout }) {
 				title: display.program,
 				children: featureLabel(display.program)
 			}),
-			display.remainingSeconds != null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			display.remaining != null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 				className: "inline-flex items-center gap-0.5 text-xs text-foreground-subtle tabular-nums shrink-0",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Timer, { className: "h-3 w-3" }), formatDuration(display.remainingSeconds, t)]
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Timer, { className: "h-3 w-3" }), formatDuration(display.remaining, t)]
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DishwasherIconButton, {
 				label: t("uiLibrary.dishwasher.start", "Start"),
@@ -53382,7 +53382,7 @@ function DishwasherPanel({ trpc, deviceId, layout }) {
 				className: "flex items-start gap-4",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DishwasherGraphic, {
 					running,
-					progressPercent: display.progressPercent
+					progressPercent: display.progress
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "flex min-w-0 flex-1 flex-col gap-2",
 					children: [
@@ -53401,25 +53401,25 @@ function DishwasherPanel({ trpc, deviceId, layout }) {
 							title: display.program,
 							children: featureLabel(display.program)
 						}),
-						display.remainingSeconds != null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						display.remaining != null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 							className: "inline-flex items-center gap-1 text-sm text-foreground-subtle tabular-nums",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Timer, { className: "h-3.5 w-3.5" }), t("uiLibrary.dishwasher.remaining", "{{time}} left", { time: formatDuration(display.remainingSeconds, t) })]
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Timer, { className: "h-3.5 w-3.5" }), t("uiLibrary.dishwasher.remaining", "{{time}} left", { time: formatDuration(display.remaining, t) })]
 						}),
-						display.delayedStartSeconds != null && display.delayedStartSeconds > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						display.delayedStart != null && display.delayedStart > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 							className: "text-xs text-foreground-subtle tabular-nums",
-							children: t("uiLibrary.dishwasher.startsIn", "Starts in {{time}}", { time: formatDuration(display.delayedStartSeconds, t) })
+							children: t("uiLibrary.dishwasher.startsIn", "Starts in {{time}}", { time: formatDuration(display.delayedStart, t) })
 						}),
-						display.progressPercent != null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						display.progress != null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: "flex items-center gap-2",
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 								className: "h-1.5 flex-1 rounded bg-surface-hover overflow-hidden",
 								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 									className: "h-full bg-primary transition-[width] duration-500",
-									style: { width: `${Math.max(0, Math.min(100, display.progressPercent))}%` }
+									style: { width: `${Math.max(0, Math.min(100, display.progress))}%` }
 								})
 							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 								className: "tabular-nums text-xs text-foreground-subtle",
-								children: [Math.round(display.progressPercent), "%"]
+								children: [Math.round(display.progress), "%"]
 							})]
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -54814,12 +54814,12 @@ function LightHeroCard({ trpc, deviceId, features, optimistic }) {
 	if (swOpt.display === void 0) return null;
 	const on = swOpt.display.on === true;
 	const swBusy = !sw.available;
-	const percentage = brightOpt.display?.percentage ?? 0;
+	const percentage = brightOpt.display?.level ?? 0;
 	const brightBusy = !bright.available;
 	const fraction = on ? percentage / 100 : 0;
 	const arcColor = on ? ARC_COLOR_ON$1 : ARC_COLOR_OFF$1;
 	const supportsCt = (features?.includes(_camstack_types.DeviceFeature.LightColorMired) ?? false) && color.cap !== void 0;
-	const ctMireds = colorOpt.display?.mireds;
+	const ctMireds = colorOpt.display?.colorTemperature;
 	const ctBusy = !color.available;
 	const handleToggle = () => {
 		if (swBusy) return;
@@ -54864,8 +54864,8 @@ function LightHeroCard({ trpc, deviceId, features, optimistic }) {
 							disabled: brightBusy || !on,
 							onChange: (e) => {
 								const pct = Number(e.target.value);
-								brightOpt.applyOptimistic({ percentage: pct });
-								if (!brightBusy) bright.cap?.setBrightness({ percentage: pct });
+								brightOpt.applyOptimistic({ level: pct });
+								if (!brightBusy) bright.cap?.setBrightness({ level: pct });
 							}
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
@@ -54912,11 +54912,11 @@ function LightHeroCard({ trpc, deviceId, features, optimistic }) {
 								const mireds = Number(e.target.value);
 								colorOpt.applyOptimistic({
 									mode: "mired",
-									mireds
+									colorTemperature: mireds
 								});
 								if (!ctBusy) color.cap?.setColor({ color: {
 									mode: "mired",
-									mireds
+									colorTemperature: mireds
 								} });
 							}
 						}),
@@ -54976,7 +54976,7 @@ function FanHeroCard({ trpc, deviceId, features, optimistic }) {
 	if (swOpt.display === void 0) return null;
 	const on = swOpt.display.on === true;
 	const swBusy = !sw.available;
-	const percentage = fanOpt.display?.percentage ?? 0;
+	const percentage = fanOpt.display?.speed ?? 0;
 	const fanBusy = !fan.available;
 	const fraction = on ? percentage / 100 : 0;
 	const arcColor = on ? ARC_COLOR_ON : ARC_COLOR_OFF;
@@ -55005,8 +55005,8 @@ function FanHeroCard({ trpc, deviceId, features, optimistic }) {
 		if (slice === void 0) return;
 		const step = slice.percentageStep !== void 0 && slice.percentageStep > 0 ? slice.percentageStep : 1;
 		const pct = Math.min(100, Math.max(0, Math.round(f * 100 / step) * step));
-		fanOpt.applyOptimistic({ percentage: pct });
-		fan.cap?.setPercentage({ percentage: pct });
+		fanOpt.applyOptimistic({ speed: pct });
+		fan.cap?.setPercentage({ speed: pct });
 	};
 	const handlePreset = (preset) => {
 		if (fanBusy || preset === "") return;
@@ -55228,7 +55228,7 @@ function MediaPlayerHeroCard({ trpc, deviceId, features, optimistic }) {
 	if (display === void 0) return null;
 	const busy = !available;
 	const action = toggleAction(display.state);
-	const supportsSeek = (features?.includes(_camstack_types.DeviceFeature.MediaPlayerSeek) ?? false) && display.durationMs !== null && display.durationMs > 0;
+	const supportsSeek = (features?.includes(_camstack_types.DeviceFeature.MediaPlayerSeek) ?? false) && display.duration !== null && display.duration > 0;
 	const supportsNext = features?.includes(_camstack_types.DeviceFeature.MediaPlayerNext) ?? false;
 	const supportsPrevious = features?.includes(_camstack_types.DeviceFeature.MediaPlayerPrevious) ?? false;
 	const supportsVolume = (features?.includes(_camstack_types.DeviceFeature.MediaPlayerVolume) ?? false) && display.volumeLevel !== null;
@@ -55243,7 +55243,7 @@ function MediaPlayerHeroCard({ trpc, deviceId, features, optimistic }) {
 		}
 	};
 	const subtitle = display.currentMedia?.artist ?? display.currentMedia?.album ?? null;
-	const seekFraction = progressFraction(display.positionMs, display.durationMs);
+	const seekFraction = progressFraction(display.position, display.duration);
 	const volumeLevel = display.volumeLevel ?? 0;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "flex flex-col items-stretch gap-4 rounded-lg border border-border bg-surface p-6",
@@ -55266,16 +55266,16 @@ function MediaPlayerHeroCard({ trpc, deviceId, features, optimistic }) {
 							"aria-label": t("uiLibrary.mediaPlayerHero.seek", "Seek"),
 							type: "range",
 							min: 0,
-							max: display.durationMs ?? 0,
+							max: display.duration ?? 0,
 							step: 1e3,
 							className: "absolute inset-0 h-4 w-full cursor-pointer opacity-0",
-							value: display.positionMs ?? 0,
+							value: display.position ?? 0,
 							disabled: busy,
 							onChange: (e) => {
 								if (busy) return;
 								const positionMs = Number(e.target.value);
-								applyOptimistic({ positionMs });
-								cap.seek({ positionMs });
+								applyOptimistic({ position: positionMs });
+								cap.seek({ position: positionMs });
 							}
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -55285,7 +55285,7 @@ function MediaPlayerHeroCard({ trpc, deviceId, features, optimistic }) {
 					]
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "flex justify-between text-[11px] tabular-nums text-foreground-subtle",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: formatClock(display.positionMs) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: formatClock(display.durationMs) })]
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: formatClock(display.position) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: formatClock(display.duration) })]
 				})]
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {

package/dist/index.js

@@ -35982,7 +35982,7 @@ function levelColor(percentage, charging) {
 function BatteryBadge({ status, variant = "compact", className }) {
 	const t = useUiText();
 	if (!status) return null;
-	const { percentage, charging, sleeping, binary } = status;
+	const { level: percentage, charging, sleeping, binary } = status;
 	if (percentage === null) return /* @__PURE__ */ jsxs("span", {
 		className: cn("inline-flex items-center gap-1 text-[10px] font-medium text-foreground-subtle", className),
 		title: t("uiLibrary.batteryBadge.titleUnknown", "Battery: unknown"),
@@ -36145,15 +36145,15 @@ function NetworkLinkBadge({ status, className }) {
 		title: t("uiLibrary.networkLinkBadge.ethernet", "Network: ethernet"),
 		children: /* @__PURE__ */ jsx(Cable, { className: "h-3.5 w-3.5" })
 	});
-	const Icon = status.type === "cellular" ? RadioTower : pickWifiIcon(status.signalPercent);
-	const signal = status.signalPercent === null ? null : Math.round(status.signalPercent);
+	const Icon = status.type === "cellular" ? RadioTower : pickWifiIcon(status.signal);
+	const signal = status.signal === null ? null : Math.round(status.signal);
 	const networkText = status.ssid ? t("uiLibrary.networkLinkBadge.typeSsid", "Network: {{type}} ({{ssid}})", {
 		type: status.type,
 		ssid: status.ssid
 	}) : t("uiLibrary.networkLinkBadge.type", "Network: {{type}}", { type: status.type });
 	const title = signal === null ? networkText : `${networkText} · ${t("uiLibrary.networkLinkBadge.signal", "signal {{percent}}%", { percent: signal })}`;
 	return /* @__PURE__ */ jsxs("span", {
-		className: cn("inline-flex items-center gap-1 text-[10px] font-medium", signalColor(status.signalPercent), className),
+		className: cn("inline-flex items-center gap-1 text-[10px] font-medium", signalColor(status.signal), className),
 		title,
 		children: [/* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5" }), signal !== null && /* @__PURE__ */ jsxs("span", { children: [signal, "%"] })]
 	});
@@ -36324,7 +36324,7 @@ function RoleNodePill({ roleLabel, roleId, nodeName, colorId, emphasized = false
 * ```tsx
 * <Breadcrumb items={[
 *   { label: 'Integrations', onClick: () => navigate('/integrations') },
-*   { label: 'RTSP Cameras', onClick: () => navigate('/integrations/int_0001') },
+*   { label: 'RTSP Cameras', onClick: () => navigate('/integrations/provider-rtsp?instance=int_0001') },
 *   { label: 'Front Door' },
 * ]} />
 * ```
@@ -47403,16 +47403,16 @@ function BrightnessPanel({ trpc, deviceId, layout, optimistic }) {
 			min: 0,
 			max: 100,
 			step: 1,
-			value: display.percentage,
+			value: display.level,
 			disabled: busy,
 			onChange: (e) => {
 				const pct = Number(e.target.value);
-				applyOptimistic({ percentage: pct });
-				if (!busy) cap?.setBrightness({ percentage: pct });
+				applyOptimistic({ level: pct });
+				if (!busy) cap?.setBrightness({ level: pct });
 			}
 		}), /* @__PURE__ */ jsxs("span", {
 			className: "tabular-nums w-8 text-right",
-			children: [display.percentage, "%"]
+			children: [display.level, "%"]
 		})]
 	});
 }
@@ -47443,17 +47443,17 @@ function FanPanel({ trpc, deviceId, features, layout, optimistic }) {
 				min: 0,
 				max: 100,
 				step,
-				value: display.percentage ?? 0,
+				value: display.speed ?? 0,
 				disabled: busy,
 				onChange: (e) => {
 					const raw = Number(e.target.value);
 					const pct = Math.min(100, Math.max(0, Math.round(raw / step) * step));
-					applyOptimistic({ percentage: pct });
-					if (!busy) cap?.setPercentage({ percentage: pct });
+					applyOptimistic({ speed: pct });
+					if (!busy) cap?.setPercentage({ speed: pct });
 				}
 			}), /* @__PURE__ */ jsxs("span", {
 				className: "tabular-nums w-8 text-right",
-				children: [display.percentage ?? "—", "%"]
+				children: [display.speed ?? "—", "%"]
 			})]
 		}), showPreset && display.availablePresets.length > 0 && /* @__PURE__ */ jsx("div", {
 			className: "flex items-center gap-2 text-xs text-foreground-subtle",
@@ -48541,25 +48541,25 @@ function hasBatteryNumericValue(slice, field) {
 var ROLE_DESCRIPTOR = {
 	"temperature-sensor": {
 		kind: "numeric",
-		field: "celsius",
+		field: "temperature",
 		quantity: "temperature",
 		getSliceHandle: (s) => s.temperatureSensor
 	},
 	"humidity-sensor": {
 		kind: "numeric",
-		field: "percent",
+		field: "humidity",
 		quantity: "humidity",
 		getSliceHandle: (s) => s.humiditySensor
 	},
 	"ambient-light-sensor": {
 		kind: "numeric",
-		field: "lux",
+		field: "illuminance",
 		quantity: "illuminance",
 		getSliceHandle: (s) => s.ambientLightSensor
 	},
 	"pressure-sensor": {
 		kind: "numeric",
-		field: "hpa",
+		field: "pressure",
 		quantity: "pressure",
 		getSliceHandle: (s) => s.pressureSensor
 	},
@@ -48601,25 +48601,25 @@ var ROLE_DESCRIPTOR = {
 	},
 	"power-sensor": {
 		kind: "numeric",
-		field: "watts",
+		field: "power",
 		quantity: "power",
 		getSliceHandle: (s) => s.powerMeter
 	},
 	"energy-sensor": {
 		kind: "numeric",
-		field: "kwhTotal",
+		field: "energy",
 		quantity: "energy",
 		getSliceHandle: (s) => s.powerMeter
 	},
 	"voltage-sensor": {
 		kind: "numeric",
-		field: "volts",
+		field: "voltage",
 		quantity: "voltage",
 		getSliceHandle: (s) => s.powerMeter
 	},
 	"current-sensor": {
 		kind: "numeric",
-		field: "amps",
+		field: "current",
 		quantity: "current",
 		getSliceHandle: (s) => s.powerMeter
 	},
@@ -49391,16 +49391,16 @@ function capSlice(caps, capName) {
 	return caps[capName];
 }
 /**
-* A battery group writes `battery.percentage`. The role's usual cap is
+* A battery group writes `battery.level`. The role's usual cap is
 * `numeric-sensor.value`. Hand the renderer a slice whose `value` is that
 * percentage so one numeric path draws both.
 */
 function batteryPercentageSlice(caps) {
 	const battery = capSlice(caps, "battery");
-	if (!isRecord$2(battery) || typeof battery["percentage"] !== "number") return void 0;
+	if (!isRecord$2(battery) || typeof battery["level"] !== "number") return void 0;
 	return {
 		...battery,
-		value: battery["percentage"]
+		value: battery["level"]
 	};
 }
 function snapshotSlice(input) {
@@ -50160,17 +50160,17 @@ function VacuumHeroCard({ trpc, deviceId }) {
 							children: meta.label
 						}), slice?.batteryLevel != null && /* @__PURE__ */ jsx(BatteryBadge$2, { level: slice.batteryLevel })]
 					}),
-					slice?.progressPercent != null && /* @__PURE__ */ jsxs("div", {
+					slice?.progress != null && /* @__PURE__ */ jsxs("div", {
 						className: "flex items-center gap-2",
 						children: [/* @__PURE__ */ jsx("div", {
 							className: "h-1.5 flex-1 rounded bg-surface-hover overflow-hidden",
 							children: /* @__PURE__ */ jsx("div", {
 								className: "h-full bg-primary transition-[width] duration-500",
-								style: { width: `${Math.max(0, Math.min(100, slice.progressPercent))}%` }
+								style: { width: `${Math.max(0, Math.min(100, slice.progress))}%` }
 							})
 						}), /* @__PURE__ */ jsxs("span", {
 							className: "tabular-nums text-xs text-foreground-subtle",
-							children: [Math.round(slice.progressPercent), "%"]
+							children: [Math.round(slice.progress), "%"]
 						})]
 					}),
 					slice?.errorCode != null && slice.errorCode !== 0 && /* @__PURE__ */ jsxs("div", {
@@ -50679,7 +50679,7 @@ function LawnMowerHeroCard({ trpc, deviceId }) {
 							children: meta.label
 						}), slice?.batteryLevel != null && /* @__PURE__ */ jsx(BatteryBadge$1, { level: slice.batteryLevel })]
 					}),
-					slice?.progressPercent != null && /* @__PURE__ */ jsx(ProgressBar, { percent: slice.progressPercent }),
+					slice?.progress != null && /* @__PURE__ */ jsx(ProgressBar, { percent: slice.progress }),
 					slice?.currentCode != null && /* @__PURE__ */ jsx(CodeLine, {
 						code: slice.currentCode,
 						label: slice.currentCodeLabel,
@@ -53330,9 +53330,9 @@ function DishwasherPanel({ trpc, deviceId, layout }) {
 				title: display.program,
 				children: featureLabel(display.program)
 			}),
-			display.remainingSeconds != null && /* @__PURE__ */ jsxs("span", {
+			display.remaining != null && /* @__PURE__ */ jsxs("span", {
 				className: "inline-flex items-center gap-0.5 text-xs text-foreground-subtle tabular-nums shrink-0",
-				children: [/* @__PURE__ */ jsx(Timer, { className: "h-3 w-3" }), formatDuration(display.remainingSeconds, t)]
+				children: [/* @__PURE__ */ jsx(Timer, { className: "h-3 w-3" }), formatDuration(display.remaining, t)]
 			}),
 			/* @__PURE__ */ jsx(DishwasherIconButton, {
 				label: t("uiLibrary.dishwasher.start", "Start"),
@@ -53358,7 +53358,7 @@ function DishwasherPanel({ trpc, deviceId, layout }) {
 				className: "flex items-start gap-4",
 				children: [/* @__PURE__ */ jsx(DishwasherGraphic, {
 					running,
-					progressPercent: display.progressPercent
+					progressPercent: display.progress
 				}), /* @__PURE__ */ jsxs("div", {
 					className: "flex min-w-0 flex-1 flex-col gap-2",
 					children: [
@@ -53377,25 +53377,25 @@ function DishwasherPanel({ trpc, deviceId, layout }) {
 							title: display.program,
 							children: featureLabel(display.program)
 						}),
-						display.remainingSeconds != null && /* @__PURE__ */ jsxs("span", {
+						display.remaining != null && /* @__PURE__ */ jsxs("span", {
 							className: "inline-flex items-center gap-1 text-sm text-foreground-subtle tabular-nums",
-							children: [/* @__PURE__ */ jsx(Timer, { className: "h-3.5 w-3.5" }), t("uiLibrary.dishwasher.remaining", "{{time}} left", { time: formatDuration(display.remainingSeconds, t) })]
+							children: [/* @__PURE__ */ jsx(Timer, { className: "h-3.5 w-3.5" }), t("uiLibrary.dishwasher.remaining", "{{time}} left", { time: formatDuration(display.remaining, t) })]
 						}),
-						display.delayedStartSeconds != null && display.delayedStartSeconds > 0 && /* @__PURE__ */ jsx("span", {
+						display.delayedStart != null && display.delayedStart > 0 && /* @__PURE__ */ jsx("span", {
 							className: "text-xs text-foreground-subtle tabular-nums",
-							children: t("uiLibrary.dishwasher.startsIn", "Starts in {{time}}", { time: formatDuration(display.delayedStartSeconds, t) })
+							children: t("uiLibrary.dishwasher.startsIn", "Starts in {{time}}", { time: formatDuration(display.delayedStart, t) })
 						}),
-						display.progressPercent != null && /* @__PURE__ */ jsxs("div", {
+						display.progress != null && /* @__PURE__ */ jsxs("div", {
 							className: "flex items-center gap-2",
 							children: [/* @__PURE__ */ jsx("div", {
 								className: "h-1.5 flex-1 rounded bg-surface-hover overflow-hidden",
 								children: /* @__PURE__ */ jsx("div", {
 									className: "h-full bg-primary transition-[width] duration-500",
-									style: { width: `${Math.max(0, Math.min(100, display.progressPercent))}%` }
+									style: { width: `${Math.max(0, Math.min(100, display.progress))}%` }
 								})
 							}), /* @__PURE__ */ jsxs("span", {
 								className: "tabular-nums text-xs text-foreground-subtle",
-								children: [Math.round(display.progressPercent), "%"]
+								children: [Math.round(display.progress), "%"]
 							})]
 						}),
 						/* @__PURE__ */ jsxs("div", {
@@ -54790,12 +54790,12 @@ function LightHeroCard({ trpc, deviceId, features, optimistic }) {
 	if (swOpt.display === void 0) return null;
 	const on = swOpt.display.on === true;
 	const swBusy = !sw.available;
-	const percentage = brightOpt.display?.percentage ?? 0;
+	const percentage = brightOpt.display?.level ?? 0;
 	const brightBusy = !bright.available;
 	const fraction = on ? percentage / 100 : 0;
 	const arcColor = on ? ARC_COLOR_ON$1 : ARC_COLOR_OFF$1;
 	const supportsCt = (features?.includes(DeviceFeature.LightColorMired) ?? false) && color.cap !== void 0;
-	const ctMireds = colorOpt.display?.mireds;
+	const ctMireds = colorOpt.display?.colorTemperature;
 	const ctBusy = !color.available;
 	const handleToggle = () => {
 		if (swBusy) return;
@@ -54840,8 +54840,8 @@ function LightHeroCard({ trpc, deviceId, features, optimistic }) {
 							disabled: brightBusy || !on,
 							onChange: (e) => {
 								const pct = Number(e.target.value);
-								brightOpt.applyOptimistic({ percentage: pct });
-								if (!brightBusy) bright.cap?.setBrightness({ percentage: pct });
+								brightOpt.applyOptimistic({ level: pct });
+								if (!brightBusy) bright.cap?.setBrightness({ level: pct });
 							}
 						}),
 						/* @__PURE__ */ jsxs("span", {
@@ -54888,11 +54888,11 @@ function LightHeroCard({ trpc, deviceId, features, optimistic }) {
 								const mireds = Number(e.target.value);
 								colorOpt.applyOptimistic({
 									mode: "mired",
-									mireds
+									colorTemperature: mireds
 								});
 								if (!ctBusy) color.cap?.setColor({ color: {
 									mode: "mired",
-									mireds
+									colorTemperature: mireds
 								} });
 							}
 						}),
@@ -54952,7 +54952,7 @@ function FanHeroCard({ trpc, deviceId, features, optimistic }) {
 	if (swOpt.display === void 0) return null;
 	const on = swOpt.display.on === true;
 	const swBusy = !sw.available;
-	const percentage = fanOpt.display?.percentage ?? 0;
+	const percentage = fanOpt.display?.speed ?? 0;
 	const fanBusy = !fan.available;
 	const fraction = on ? percentage / 100 : 0;
 	const arcColor = on ? ARC_COLOR_ON : ARC_COLOR_OFF;
@@ -54981,8 +54981,8 @@ function FanHeroCard({ trpc, deviceId, features, optimistic }) {
 		if (slice === void 0) return;
 		const step = slice.percentageStep !== void 0 && slice.percentageStep > 0 ? slice.percentageStep : 1;
 		const pct = Math.min(100, Math.max(0, Math.round(f * 100 / step) * step));
-		fanOpt.applyOptimistic({ percentage: pct });
-		fan.cap?.setPercentage({ percentage: pct });
+		fanOpt.applyOptimistic({ speed: pct });
+		fan.cap?.setPercentage({ speed: pct });
 	};
 	const handlePreset = (preset) => {
 		if (fanBusy || preset === "") return;
@@ -55204,7 +55204,7 @@ function MediaPlayerHeroCard({ trpc, deviceId, features, optimistic }) {
 	if (display === void 0) return null;
 	const busy = !available;
 	const action = toggleAction(display.state);
-	const supportsSeek = (features?.includes(DeviceFeature.MediaPlayerSeek) ?? false) && display.durationMs !== null && display.durationMs > 0;
+	const supportsSeek = (features?.includes(DeviceFeature.MediaPlayerSeek) ?? false) && display.duration !== null && display.duration > 0;
 	const supportsNext = features?.includes(DeviceFeature.MediaPlayerNext) ?? false;
 	const supportsPrevious = features?.includes(DeviceFeature.MediaPlayerPrevious) ?? false;
 	const supportsVolume = (features?.includes(DeviceFeature.MediaPlayerVolume) ?? false) && display.volumeLevel !== null;
@@ -55219,7 +55219,7 @@ function MediaPlayerHeroCard({ trpc, deviceId, features, optimistic }) {
 		}
 	};
 	const subtitle = display.currentMedia?.artist ?? display.currentMedia?.album ?? null;
-	const seekFraction = progressFraction(display.positionMs, display.durationMs);
+	const seekFraction = progressFraction(display.position, display.duration);
 	const volumeLevel = display.volumeLevel ?? 0;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex flex-col items-stretch gap-4 rounded-lg border border-border bg-surface p-6",
@@ -55242,16 +55242,16 @@ function MediaPlayerHeroCard({ trpc, deviceId, features, optimistic }) {
 							"aria-label": t("uiLibrary.mediaPlayerHero.seek", "Seek"),
 							type: "range",
 							min: 0,
-							max: display.durationMs ?? 0,
+							max: display.duration ?? 0,
 							step: 1e3,
 							className: "absolute inset-0 h-4 w-full cursor-pointer opacity-0",
-							value: display.positionMs ?? 0,
+							value: display.position ?? 0,
 							disabled: busy,
 							onChange: (e) => {
 								if (busy) return;
 								const positionMs = Number(e.target.value);
-								applyOptimistic({ positionMs });
-								cap.seek({ positionMs });
+								applyOptimistic({ position: positionMs });
+								cap.seek({ position: positionMs });
 							}
 						}),
 						/* @__PURE__ */ jsx("div", {
@@ -55261,7 +55261,7 @@ function MediaPlayerHeroCard({ trpc, deviceId, features, optimistic }) {
 					]
 				}), /* @__PURE__ */ jsxs("div", {
 					className: "flex justify-between text-[11px] tabular-nums text-foreground-subtle",
-					children: [/* @__PURE__ */ jsx("span", { children: formatClock(display.positionMs) }), /* @__PURE__ */ jsx("span", { children: formatClock(display.durationMs) })]
+					children: [/* @__PURE__ */ jsx("span", { children: formatClock(display.position) }), /* @__PURE__ */ jsx("span", { children: formatClock(display.duration) })]
 				})]
 			}),
 			/* @__PURE__ */ jsxs("div", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camstack/ui-library",
-  "version": "1.2.342",
+  "version": "1.2.344",
   "repository": {
     "type": "git",
     "url": "https://github.com/camstack/server.git",