@camstack/ui-library 1.2.341 → 1.2.343

package/CHANGELOG.md

@@ -7,6 +7,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [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
+
+- Option lists can group options under headings, and a dropdown can be opened and closed from outside
+
 ## [1.2.341] - 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/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/composites/option-select/option-select-model.d.ts

@@ -13,6 +13,12 @@ export type OptionSelectOption = {
 	iconId?: string;
 	disabled?: boolean;
 	badge?: string;
+	/**
+	* Heading this option is listed under. Options of one group are expected
+	* together (the list keeps its order); a heading is drawn where the group
+	* changes.
+	*/
+	group?: string;
 };
 /** Number of options at/above which search is enabled by default (unless creatable). */
 export declare const OPTION_SELECT_SEARCH_MIN_OPTIONS = 8;

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

@@ -12818,8 +12818,14 @@ function useDropdownContext() {
 	if (!ctx) throw new Error("Dropdown compound components must be used within <Dropdown>");
 	return ctx;
 }
-function Dropdown({ children }) {
-	const [open, setOpen] = (0, react$1.useState)(false);
+function Dropdown({ children, open: controlledOpen, onOpenChange }) {
+	const [innerOpen, setInnerOpen] = (0, react$1.useState)(false);
+	const controlled = controlledOpen !== void 0 && onOpenChange !== void 0;
+	const open = controlled ? controlledOpen : innerOpen;
+	const setOpen = (0, react$1.useCallback)((next) => {
+		if (controlled) onOpenChange(next);
+		else setInnerOpen(next);
+	}, [controlled, onOpenChange]);
 	const triggerId = (0, react$1.useId)();
 	const contentId = (0, react$1.useId)();
 	const triggerRef = (0, react$1.useRef)(null);
@@ -14010,7 +14016,13 @@ function OptionSelect(props) {
 		const checked = mode === "single" ? props.value === opt.value : props.value.includes(opt.value);
 		const blockedByMax = mode === "multi" && !checked && atMax === true;
 		const optionDisabled = opt.disabled === true || blockedByMax;
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		const previous = dropdownRows[i - 1];
+		const previousGroup = previous !== void 0 && previous.kind === "option" ? previous.opt.group : void 0;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react$1.Fragment, { children: [opt.group !== void 0 && opt.group !== previousGroup ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			role: "presentation",
+			className: "px-2.5 pb-0.5 pt-1.5 text-[10px] font-medium uppercase tracking-wide text-foreground-subtle",
+			children: opt.group
+		}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 			type: "button",
 			role: "option",
 			"aria-selected": checked,
@@ -14038,7 +14050,7 @@ function OptionSelect(props) {
 					children: opt.badge
 				}) : null
 			]
-		}, opt.value);
+		})] }, opt.value);
 	}) });
 	const footerAddNewIndex = dropdownRows.length;
 	const fieldShowsChoice = mode === "single" && props.singleDisplay === "field" && selectedOptions.length > 0;
@@ -35994,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"),
@@ -36157,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, "%"] })]
 	});
@@ -47415,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, "%"]
 		})]
 	});
 }
@@ -47455,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",
@@ -48553,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
 	},
@@ -48613,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
 	},
@@ -49403,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) {
@@ -50172,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", {
@@ -50691,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,
@@ -53342,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"),
@@ -53370,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: [
@@ -53389,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", {
@@ -54802,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;
@@ -54852,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", {
@@ -54900,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
 								} });
 							}
 						}),
@@ -54964,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;
@@ -54993,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;
@@ -55216,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;
@@ -55231,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",
@@ -55254,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", {
@@ -55273,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

@@ -12794,8 +12794,14 @@ function useDropdownContext() {
 	if (!ctx) throw new Error("Dropdown compound components must be used within <Dropdown>");
 	return ctx;
 }
-function Dropdown({ children }) {
-	const [open, setOpen] = useState(false);
+function Dropdown({ children, open: controlledOpen, onOpenChange }) {
+	const [innerOpen, setInnerOpen] = useState(false);
+	const controlled = controlledOpen !== void 0 && onOpenChange !== void 0;
+	const open = controlled ? controlledOpen : innerOpen;
+	const setOpen = useCallback((next) => {
+		if (controlled) onOpenChange(next);
+		else setInnerOpen(next);
+	}, [controlled, onOpenChange]);
 	const triggerId = useId();
 	const contentId = useId();
 	const triggerRef = useRef(null);
@@ -13986,7 +13992,13 @@ function OptionSelect(props) {
 		const checked = mode === "single" ? props.value === opt.value : props.value.includes(opt.value);
 		const blockedByMax = mode === "multi" && !checked && atMax === true;
 		const optionDisabled = opt.disabled === true || blockedByMax;
-		return /* @__PURE__ */ jsxs("button", {
+		const previous = dropdownRows[i - 1];
+		const previousGroup = previous !== void 0 && previous.kind === "option" ? previous.opt.group : void 0;
+		return /* @__PURE__ */ jsxs(Fragment, { children: [opt.group !== void 0 && opt.group !== previousGroup ? /* @__PURE__ */ jsx("div", {
+			role: "presentation",
+			className: "px-2.5 pb-0.5 pt-1.5 text-[10px] font-medium uppercase tracking-wide text-foreground-subtle",
+			children: opt.group
+		}) : null, /* @__PURE__ */ jsxs("button", {
 			type: "button",
 			role: "option",
 			"aria-selected": checked,
@@ -14014,7 +14026,7 @@ function OptionSelect(props) {
 					children: opt.badge
 				}) : null
 			]
-		}, opt.value);
+		})] }, opt.value);
 	}) });
 	const footerAddNewIndex = dropdownRows.length;
 	const fieldShowsChoice = mode === "single" && props.singleDisplay === "field" && selectedOptions.length > 0;
@@ -35970,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"),
@@ -36133,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, "%"] })]
 	});
@@ -47391,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, "%"]
 		})]
 	});
 }
@@ -47431,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",
@@ -48529,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
 	},
@@ -48589,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
 	},
@@ -49379,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) {
@@ -50148,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", {
@@ -50667,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,
@@ -53318,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"),
@@ -53346,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: [
@@ -53365,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", {
@@ -54778,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;
@@ -54828,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", {
@@ -54876,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
 								} });
 							}
 						}),
@@ -54940,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;
@@ -54969,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;
@@ -55192,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;
@@ -55207,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",
@@ -55230,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", {
@@ -55249,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/dist/primitives/dropdown.d.ts

@@ -1,8 +1,16 @@
 import { type JSX, type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from "react";
 import { type LucideIcon } from "lucide-react";
-export declare function Dropdown({ children }: {
-	children: ReactNode;
-}): JSX.Element | null;
+export interface DropdownProps {
+	readonly children: ReactNode;
+	/**
+	* Controlled open state. Give both `open` and `onOpenChange` to drive the menu
+	* from outside (a "{" typed in a field opens the variable list); give neither
+	* and the dropdown keeps its own state.
+	*/
+	readonly open?: boolean;
+	readonly onOpenChange?: (open: boolean) => void;
+}
+export declare function Dropdown({ children, open: controlledOpen, onOpenChange }: DropdownProps): JSX.Element | null;
 export declare function DropdownTrigger({ children, ...props }: ButtonHTMLAttributes<HTMLButtonElement>): JSX.Element | null;
 interface DropdownContentProps extends HTMLAttributes<HTMLDivElement> {
 	/** Horizontal alignment relative to the trigger. Default: 'start' (left-aligned). */

package/package.json

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