@camstack/ui-library 1.2.299 → 1.2.301

package/dist/index.cjs

@@ -2185,6 +2185,54 @@ var Hash = require_createLucideIcon.createLucideIcon("hash", [
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
+var Heater = require_createLucideIcon.createLucideIcon("heater", [
+	["path", {
+		d: "M11 8c2-3-2-3 0-6",
+		key: "1ldv5m"
+	}],
+	["path", {
+		d: "M15.5 8c2-3-2-3 0-6",
+		key: "1otqoz"
+	}],
+	["path", {
+		d: "M6 10h.01",
+		key: "1lbq93"
+	}],
+	["path", {
+		d: "M6 14h.01",
+		key: "zudwn7"
+	}],
+	["path", {
+		d: "M10 16v-4",
+		key: "1c25yv"
+	}],
+	["path", {
+		d: "M14 16v-4",
+		key: "1dkbt8"
+	}],
+	["path", {
+		d: "M18 16v-4",
+		key: "1yg9me"
+	}],
+	["path", {
+		d: "M20 6a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h3",
+		key: "1ubg90"
+	}],
+	["path", {
+		d: "M5 20v2",
+		key: "1abpe8"
+	}],
+	["path", {
+		d: "M19 20v2",
+		key: "kqn6ft"
+	}]
+]);
+/**
+* @license lucide-react v0.576.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
 var House = require_createLucideIcon.createLucideIcon("house", [["path", {
 	d: "M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8",
 	key: "5wwlr5"
@@ -4173,6 +4221,34 @@ var Thermometer = require_createLucideIcon.createLucideIcon("thermometer", [["pa
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
+var Timer = require_createLucideIcon.createLucideIcon("timer", [
+	["line", {
+		x1: "10",
+		x2: "14",
+		y1: "2",
+		y2: "2",
+		key: "14vaq8"
+	}],
+	["line", {
+		x1: "12",
+		x2: "15",
+		y1: "14",
+		y2: "11",
+		key: "17fdiu"
+	}],
+	["circle", {
+		cx: "12",
+		cy: "14",
+		r: "8",
+		key: "1e1u0o"
+	}]
+]);
+/**
+* @license lucide-react v0.576.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
 var ToggleLeft = require_createLucideIcon.createLucideIcon("toggle-left", [["circle", {
 	cx: "9",
 	cy: "12",
@@ -5275,6 +5351,11 @@ var DEVICE_TYPE_META = {
 		icon: Bone,
 		labelKey: "uiLibrary.deviceMeta.type.petFeeder",
 		labelFallback: "Pet feeder"
+	},
+	[_camstack_types.DeviceType.Dishwasher]: {
+		icon: Waves,
+		labelKey: "uiLibrary.deviceMeta.type.dishwasher",
+		labelFallback: "Dishwasher"
 	}
 };
 var DEVICE_ROLE_META = {
@@ -5756,7 +5837,7 @@ function lucideExportName(key) {
 function loadIconGlyphs() {
 	if (fullTable !== void 0) return Promise.resolve();
 	if (failure !== void 0) return Promise.reject(failure);
-	pending ??= Promise.resolve().then(() => require("./icons-CLC60C-_.cjs")).then((module) => {
+	pending ??= Promise.resolve().then(() => require("./icons-B1AFXUaZ.cjs")).then((module) => {
 		fullTable = module;
 		publish();
 	}, (error) => {
@@ -10931,6 +11012,32 @@ var useDeviceStateListClaims = trpc.deviceState.listClaims.useQuery;
 var useDeviceStateGetNativeCapSlice = trpc.deviceState.getNativeCapSlice.useQuery;
 /** Generated alias around `trpc.deviceStatus.getStatus.useQuery`. */
 var useDeviceStatusGetStatus = trpc.deviceStatus.getStatus.useQuery;
+/** Generated alias around `trpc.dishwasher.start.useMutation`. */
+var useDishwasherStart = trpc.dishwasher.start.useMutation;
+/** Generated alias around `trpc.dishwasher.pause.useMutation`. */
+var useDishwasherPause = trpc.dishwasher.pause.useMutation;
+/** Generated alias around `trpc.dishwasher.stop.useMutation`. */
+var useDishwasherStop = trpc.dishwasher.stop.useMutation;
+/** Generated alias around `trpc.dishwasher.setProgram.useMutation`. */
+var useDishwasherSetProgram = trpc.dishwasher.setProgram.useMutation;
+/** Generated alias around `trpc.dishwasher.setPower.useMutation`. */
+var useDishwasherSetPower = trpc.dishwasher.setPower.useMutation;
+/** Generated alias around `trpc.dishwasher.setHalfLoad.useMutation`. */
+var useDishwasherSetHalfLoad = trpc.dishwasher.setHalfLoad.useMutation;
+/** Generated alias around `trpc.dishwasher.setHygienePlus.useMutation`. */
+var useDishwasherSetHygienePlus = trpc.dishwasher.setHygienePlus.useMutation;
+/** Generated alias around `trpc.dishwasher.setExtraDry.useMutation`. */
+var useDishwasherSetExtraDry = trpc.dishwasher.setExtraDry.useMutation;
+/** Generated alias around `trpc.dishwasher.setIntensiveZone.useMutation`. */
+var useDishwasherSetIntensiveZone = trpc.dishwasher.setIntensiveZone.useMutation;
+/** Generated alias around `trpc.dishwasher.setVarioSpeedPlus.useMutation`. */
+var useDishwasherSetVarioSpeedPlus = trpc.dishwasher.setVarioSpeedPlus.useMutation;
+/** Generated alias around `trpc.dishwasher.setChildLock.useMutation`. */
+var useDishwasherSetChildLock = trpc.dishwasher.setChildLock.useMutation;
+/** Generated alias around `trpc.dishwasher.setOption.useMutation`. */
+var useDishwasherSetOption = trpc.dishwasher.setOption.useMutation;
+/** Generated alias around `trpc.dishwasher.getStatus.useQuery`. */
+var useDishwasherGetStatus = trpc.dishwasher.getStatus.useQuery;
 /** Generated alias around `trpc.doorbell.getStatus.useQuery`. */
 var useDoorbellGetStatus = trpc.doorbell.getStatus.useQuery;
 /** Generated alias around `trpc.enumSensor.getStatus.useQuery`. */
@@ -10985,6 +11092,8 @@ var useFeatureProbeGetStatus = trpc.featureProbe.getStatus.useQuery;
 var useFloodGetStatus = trpc.flood.getStatus.useQuery;
 /** Generated alias around `trpc.gas.getStatus.useQuery`. */
 var useGasGetStatus = trpc.gas.getStatus.useQuery;
+/** Generated alias around `trpc.heatingValve.getStatus.useQuery`. */
+var useHeatingValveGetStatus = trpc.heatingValve.getStatus.useQuery;
 /** Generated alias around `trpc.humidifier.setOn.useMutation`. */
 var useHumidifierSetOn = trpc.humidifier.setOn.useMutation;
 /** Generated alias around `trpc.humidifier.setTargetHumidity.useMutation`. */
@@ -28815,7 +28924,7 @@ function AddonActionSelectField({ field, value, values, onChange, disabled, onAc
 		})()
 	});
 }
-function AddonActionButtonField({ field, values, disabled, onAction }) {
+function AddonActionButtonField({ field, values, disabled, onAction, onChange, onChangeMany }) {
 	const t = useUiText();
 	const [loading, setLoading] = (0, react$1.useState)(false);
 	const [status, setStatus] = (0, react$1.useState)(null);
@@ -28847,6 +28956,17 @@ function AddonActionButtonField({ field, values, disabled, onAction }) {
 		try {
 			const result = await onAction(field.action, field.key, params);
 			const resultRecord = typeof result === "object" && result !== null ? result : null;
+			if (resultRecord !== null && field.assignResult && (onChange || onChangeMany)) {
+				const patch = {};
+				for (const [formKey, resultKey] of Object.entries(field.assignResult)) {
+					const assigned = resultRecord[resultKey];
+					if (typeof assigned === "string") patch[formKey] = assigned;
+				}
+				if (Object.keys(patch).length > 0) {
+					if (onChangeMany) onChangeMany(patch);
+					else if (onChange) for (const [formKey, assigned] of Object.entries(patch)) onChange(formKey, assigned);
+				}
+			}
 			setStatus({
 				kind: "ok",
 				text: field.successMessage ? field.successMessage.replace(/\{(\w+)\}/g, (_, k) => {
@@ -29195,7 +29315,7 @@ function isFieldVisible(field, values, allFields) {
 	if (condition.notIncludes !== void 0) return !Array.isArray(condVal) || !condVal.includes(condition.notIncludes);
 	return true;
 }
-function FormField({ field, values, onChange, disabled, translationFn, onTestField, externalProbe, allFields, onAction }) {
+function FormField({ field, values, onChange, onChangeMany, disabled, translationFn, onTestField, externalProbe, allFields, onAction }) {
 	if (hasMultiple(field)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MultipleFieldWrapper, {
 		field,
 		values,
@@ -29431,7 +29551,9 @@ function FormField({ field, values, onChange, disabled, translationFn, onTestFie
 			field,
 			values,
 			disabled,
-			onAction
+			onAction,
+			onChange,
+			onChangeMany
 		});
 		case "device-action-button": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DeviceActionButtonField, {
 			field,
@@ -42914,6 +43036,19 @@ function FanPanel({ trpc, deviceId, features, layout, optimistic }) {
 }
 //#endregion
 //#region src/composites/device-controls/climate-panel.tsx
+/** Step size for target ± buttons; defaults to 1 °C when unset or invalid. */
+function resolveClimateTempStep(tempStep) {
+	if (typeof tempStep === "number" && Number.isFinite(tempStep) && tempStep > 0) return tempStep;
+	return 1;
+}
+function nextClimateTarget(current, deltaSteps, display) {
+	let next = current + deltaSteps * resolveClimateTempStep(display.tempStep);
+	const min = display.minTemp;
+	const max = display.maxTemp;
+	if (typeof min === "number" && Number.isFinite(min)) next = Math.max(next, min);
+	if (typeof max === "number" && Number.isFinite(max)) next = Math.min(next, max);
+	return next;
+}
 /**
 * Exhaustive colour map — one entry per HvacMode. Build will fail if a
 * mode is added to the enum and not reflected here (Record<HvacMode, ...>
@@ -42994,7 +43129,7 @@ function ClimatePanel({ trpc, deviceId, features: _features, layout, optimistic
 				onClick: (e) => {
 					e.stopPropagation();
 					if (!busy && display.target !== null) {
-						const next = display.target - 1;
+						const next = nextClimateTarget(display.target, -1, display);
 						applyOptimistic({ target: next });
 						cap.setTarget({ target: next });
 					}
@@ -43008,7 +43143,7 @@ function ClimatePanel({ trpc, deviceId, features: _features, layout, optimistic
 				onClick: (e) => {
 					e.stopPropagation();
 					if (!busy && display.target !== null) {
-						const next = display.target + 1;
+						const next = nextClimateTarget(display.target, 1, display);
 						applyOptimistic({ target: next });
 						cap.setTarget({ target: next });
 					}
@@ -43063,7 +43198,7 @@ function ClimatePanel({ trpc, deviceId, features: _features, layout, optimistic
 						onClick: (e) => {
 							e.stopPropagation();
 							if (!busy && display.target !== null) {
-								const next = display.target - 1;
+								const next = nextClimateTarget(display.target, -1, display);
 								applyOptimistic({ target: next });
 								cap.setTarget({ target: next });
 							}
@@ -43078,7 +43213,7 @@ function ClimatePanel({ trpc, deviceId, features: _features, layout, optimistic
 						onClick: (e) => {
 							e.stopPropagation();
 							if (!busy && display.target !== null) {
-								const next = display.target + 1;
+								const next = nextClimateTarget(display.target, 1, display);
 								applyOptimistic({ target: next });
 								cap.setTarget({ target: next });
 							}
@@ -43736,7 +43871,8 @@ var CONTROL_CAP_NAMES = [
 	"climate-control",
 	"media-player",
 	"control",
-	"pet-feeder"
+	"pet-feeder",
+	"dishwasher"
 ];
 //#endregion
 //#region src/composites/device-controls/popover-row-action.tsx
@@ -48547,7 +48683,462 @@ function PetFeederHeroCard({ trpc, deviceId, features, optimistic }) {
 	});
 }
 //#endregion
+//#region src/composites/device-controls/dishwasher-control.tsx
+/**
+* Dishwasher controls for a `DeviceType.Dishwasher` device.
+*
+* Reads the `dishwasher` cap status slice and renders inline + hero surfaces
+* mirroring vacuum-control / pet-feeder patterns.
+*/
+function dishwasherStateMeta(state, t = defaultUiText) {
+	switch (state) {
+		case "running": return {
+			label: t("uiLibrary.dishwasher.running", "Running"),
+			tone: "text-primary"
+		};
+		case "paused": return {
+			label: t("uiLibrary.dishwasher.paused", "Paused"),
+			tone: "text-warning"
+		};
+		case "finished": return {
+			label: t("uiLibrary.dishwasher.finished", "Finished"),
+			tone: "text-success"
+		};
+		case "error": return {
+			label: t("uiLibrary.dishwasher.error", "Error"),
+			tone: "text-destructive"
+		};
+		case "unavailable": return {
+			label: t("uiLibrary.dishwasher.unavailable", "Unavailable"),
+			tone: "text-foreground-subtle"
+		};
+		case "idle": return {
+			label: t("uiLibrary.dishwasher.idle", "Idle"),
+			tone: "text-foreground-subtle"
+		};
+		case void 0: return {
+			label: t("uiLibrary.dishwasher.unknown", "Unknown"),
+			tone: "text-foreground-subtle"
+		};
+	}
+}
+function consumableTone(level) {
+	switch (level) {
+		case "ok": return "text-success";
+		case "low": return "text-warning";
+		case "empty": return "text-destructive";
+		case null: return "text-foreground-subtle";
+	}
+}
+function useDishwasher(trpc, deviceId) {
+	return useDeviceCapability({
+		trpc,
+		deviceId,
+		cap: (d) => d.dishwasher,
+		slice: (d) => d.state.dishwasher
+	});
+}
+function DishwasherIconButton({ label, busy, active, onClick, children }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		"aria-label": label,
+		title: label,
+		disabled: busy,
+		onClick: (e) => {
+			e.stopPropagation();
+			onClick();
+		},
+		className: cn("inline-flex h-5 w-5 items-center justify-center rounded text-foreground-subtle hover:text-foreground hover:bg-surface-hover transition-colors", active && "bg-primary text-primary-foreground", busy && "opacity-40 cursor-not-allowed"),
+		children
+	});
+}
+function ConsumableBadge({ label, level }) {
+	if (level === null) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: cn("text-xs font-medium capitalize", consumableTone(level)),
+		children: [
+			label,
+			": ",
+			level
+		]
+	});
+}
+function DishwasherGraphic({ state, progressPercent }) {
+	const running = state === "running";
+	const pct = progressPercent != null ? Math.max(0, Math.min(100, progressPercent)) : running ? 40 : 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"aria-hidden": "true",
+		className: "relative w-28 h-36 rounded border-2 border-border bg-gradient-to-b from-surface-hover to-surface overflow-hidden flex-shrink-0",
+		style: { boxShadow: "inset 0 0 0 2px rgba(255,255,255,.06)" },
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: cn("absolute inset-x-0 bottom-0 bg-primary/25 transition-[height] duration-500", running && "animate-pulse"),
+			style: { height: `${pct}%` }
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "absolute inset-0 flex items-center justify-center text-foreground-subtle",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Waves, { className: "h-10 w-10 opacity-70" })
+		})]
+	});
+}
+function DishwasherPanel({ trpc, deviceId, layout, optimistic }) {
+	const t = useUiText();
+	const { cap, slice, available } = useDishwasher(trpc, deviceId);
+	const { display, applyOptimistic } = useOptimisticSlice(slice, { enabled: optimistic ?? true });
+	if (cap === void 0) return null;
+	if (display === void 0) return null;
+	const busy = !available;
+	const optionTogglesLocked = display.childLock === true;
+	const meta = dishwasherStateMeta(display.state, t);
+	const running = display.state === "running";
+	const paused = display.state === "paused";
+	const press = (fn, patch) => {
+		if (busy) return;
+		applyOptimistic(patch);
+		fn();
+	};
+	if (layout === "compact") {
+		const saltWarn = display.saltLevel === "low" || display.saltLevel === "empty";
+		const rinseWarn = display.rinseAidLevel === "low" || display.rinseAidLevel === "empty";
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "inline-flex items-center gap-1.5 max-w-full",
+			children: [
+				display.doorOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "inline-flex text-warning shrink-0",
+					title: t("uiLibrary.dishwasher.doorOpen", "Door open"),
+					"aria-label": t("uiLibrary.dishwasher.doorOpen", "Door open"),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DoorOpen, { className: "h-3.5 w-3.5" })
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: cn("text-xs font-medium tabular-nums shrink-0", meta.tone),
+					children: meta.label
+				}),
+				display.program != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "text-xs text-foreground-subtle truncate max-w-[7rem]",
+					title: display.program,
+					children: display.program
+				}),
+				display.remainingMinutes != 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" }),
+						display.remainingMinutes,
+						"m"
+					]
+				}),
+				saltWarn && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: cn("text-[10px] font-medium shrink-0", consumableTone(display.saltLevel)),
+					children: t("uiLibrary.dishwasher.salt", "Salt")
+				}),
+				rinseWarn && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: cn("text-[10px] font-medium shrink-0", consumableTone(display.rinseAidLevel)),
+					children: t("uiLibrary.dishwasher.rinseAid", "Rinse")
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DishwasherIconButton, {
+					label: t("uiLibrary.dishwasher.start", "Start"),
+					busy: busy || !display.remoteStartAllowed,
+					active: running,
+					onClick: () => press(() => cap.start({}), {
+						state: "running",
+						remoteStartAllowed: false
+					}),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Play, { className: "h-3 w-3" })
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DishwasherIconButton, {
+					label: t("uiLibrary.dishwasher.pause", "Pause"),
+					busy: busy || !running,
+					active: paused,
+					onClick: () => press(() => cap.pause({}), { state: "paused" }),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Pause, { className: "h-3 w-3" })
+				})
+			]
+		});
+	}
+	const programs = display.availablePrograms;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col gap-3 rounded-lg border border-border bg-surface p-4",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-start gap-4",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DishwasherGraphic, {
+					state: display.state,
+					progressPercent: display.progressPercent
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex min-w-0 flex-1 flex-col gap-2",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex flex-wrap items-center gap-2",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: cn("text-3xl font-semibold", meta.tone),
+								children: meta.label
+							}), !display.powerOn && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "text-xs font-medium text-foreground-subtle",
+								children: t("uiLibrary.dishwasher.powerOff", "Power off")
+							})]
+						}),
+						display.program != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-sm text-foreground-subtle",
+							children: display.program
+						}),
+						display.progressPercent != 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))}%` }
+								})
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: "tabular-nums text-xs text-foreground-subtle",
+								children: [Math.round(display.progressPercent), "%"]
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex flex-wrap gap-3",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConsumableBadge, {
+									label: t("uiLibrary.dishwasher.salt", "Salt"),
+									level: display.saltLevel
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConsumableBadge, {
+									label: t("uiLibrary.dishwasher.rinseAid", "Rinse aid"),
+									level: display.rinseAidLevel
+								}),
+								display.doorOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+									className: "inline-flex items-center gap-1 text-xs text-warning",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DoorOpen, { className: "h-3.5 w-3.5" }), t("uiLibrary.dishwasher.doorOpen", "Door open")]
+								})
+							]
+						}),
+						display.errorCode != null && display.errorCode !== 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "inline-flex items-center gap-1 text-xs text-destructive",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TriangleAlert, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: display.errorLabel ?? t("uiLibrary.dishwasher.errorCode", "Error {{code}}", { code: display.errorCode }) })]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex flex-wrap items-center gap-2",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DishwasherIconButton, {
+									label: t("uiLibrary.dishwasher.start", "Start"),
+									busy: busy || !display.remoteStartAllowed,
+									active: running,
+									onClick: () => press(() => cap.start({}), {
+										state: "running",
+										remoteStartAllowed: false
+									}),
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Play, { className: "h-4 w-4" })
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DishwasherIconButton, {
+									label: t("uiLibrary.dishwasher.pause", "Pause"),
+									busy: busy || !running,
+									active: paused,
+									onClick: () => press(() => cap.pause({}), { state: "paused" }),
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Pause, { className: "h-4 w-4" })
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DishwasherIconButton, {
+									label: t("uiLibrary.dishwasher.stop", "Stop"),
+									busy,
+									active: false,
+									onClick: () => press(() => cap.stop({}), {
+										state: "idle",
+										remainingMinutes: null
+									}),
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Square, { className: "h-3.5 w-3.5" })
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DishwasherIconButton, {
+									label: t("uiLibrary.dishwasher.power", "Power"),
+									busy,
+									active: display.powerOn,
+									onClick: () => {
+										const next = !display.powerOn;
+										press(() => cap.setPower({ on: next }), { powerOn: next });
+									},
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Power, { className: "h-4 w-4" })
+								})
+							]
+						})
+					]
+				})]
+			}),
+			programs.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+				className: "flex items-center gap-2 text-xs text-foreground-subtle",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "w-16 shrink-0",
+					children: t("uiLibrary.dishwasher.program", "Program")
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
+					"aria-label": t("uiLibrary.dishwasher.program", "Program"),
+					value: display.program ?? "",
+					disabled: busy,
+					onChange: (e) => {
+						const program = e.target.value;
+						if (!program) return;
+						applyOptimistic({ program });
+						cap.setProgram({ program });
+					},
+					onClick: (e) => {
+						e.stopPropagation();
+					},
+					className: "flex-1 rounded border border-border bg-surface px-2 py-1 text-foreground disabled:opacity-50",
+					children: [display.program == null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+						value: "",
+						children: "—"
+					}), programs.map((p) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+						value: p,
+						children: p
+					}, p))]
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-wrap gap-4 text-xs",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleRow, {
+						label: t("uiLibrary.dishwasher.halfLoad", "Half load"),
+						checked: display.halfLoad,
+						busy: busy || optionTogglesLocked,
+						onChange: (on) => {
+							applyOptimistic({ halfLoad: on });
+							cap.setHalfLoad({ on });
+						}
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleRow, {
+						label: t("uiLibrary.dishwasher.hygienePlus", "Hygiene plus"),
+						checked: display.hygienePlus,
+						busy: busy || optionTogglesLocked,
+						onChange: (on) => {
+							applyOptimistic({ hygienePlus: on });
+							cap.setHygienePlus({ on });
+						}
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleRow, {
+						label: t("uiLibrary.dishwasher.extraDry", "Extra dry"),
+						checked: display.extraDry,
+						busy: busy || optionTogglesLocked,
+						onChange: (on) => {
+							applyOptimistic({ extraDry: on });
+							cap.setExtraDry({ on });
+						}
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleRow, {
+						label: t("uiLibrary.dishwasher.intensiveZone", "Intensive zone"),
+						checked: display.intensiveZone,
+						busy: busy || optionTogglesLocked,
+						onChange: (on) => {
+							applyOptimistic({ intensiveZone: on });
+							cap.setIntensiveZone({ on });
+						}
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleRow, {
+						label: t("uiLibrary.dishwasher.varioSpeedPlus", "VarioSpeed+"),
+						checked: display.varioSpeedPlus,
+						busy: busy || optionTogglesLocked,
+						onChange: (on) => {
+							applyOptimistic({ varioSpeedPlus: on });
+							cap.setVarioSpeedPlus({ on });
+						}
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleRow, {
+						label: t("uiLibrary.dishwasher.childLock", "Child lock"),
+						checked: display.childLock,
+						busy,
+						onChange: (on) => {
+							applyOptimistic({ childLock: on });
+							cap.setChildLock({ on });
+						}
+					})
+				]
+			})
+		]
+	});
+}
+function ToggleRow({ label, checked, busy, onChange }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+		className: "inline-flex items-center gap-2 cursor-pointer",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+			type: "checkbox",
+			checked,
+			disabled: busy,
+			onChange: (e) => {
+				onChange(e.target.checked);
+			},
+			onClick: (e) => {
+				e.stopPropagation();
+			},
+			className: "rounded border-border"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: label })]
+	});
+}
+function DishwasherInlineControl(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DishwasherPanel, {
+		...props,
+		layout: "compact"
+	});
+}
+function DishwasherHeroCard(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DishwasherPanel, {
+		...props,
+		layout: "full"
+	});
+}
+//#endregion
+//#region src/composites/device-controls/heating-valve-readout.tsx
+function formatHeatingValvePosition(position) {
+	return position !== null ? `${position}%` : "—";
+}
+function HeatingValveReadout({ trpc, deviceId, layout }) {
+	const t = useUiText();
+	const { cap, slice } = useDeviceCapability({
+		trpc,
+		deviceId,
+		cap: (d) => d.heatingValve,
+		slice: (d) => d.state.heatingValve
+	});
+	if (cap === void 0 || slice === void 0) return null;
+	const label = t("uiLibrary.heatingValveReadout.valve", "Valve");
+	const value = formatHeatingValvePosition(slice.position);
+	if (layout === "compact") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "inline-flex items-center text-xs tabular-nums text-foreground-subtle",
+		"aria-label": `${label} ${value}`,
+		children: value
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex items-center gap-2 text-xs tabular-nums text-foreground-subtle",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: label }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "font-medium text-foreground",
+			children: value
+		})]
+	});
+}
+//#endregion
 //#region src/composites/device-controls/ac-panel.tsx
+/** Modes that mean the device can cool, dry, or move air — an air conditioner. */
+var COOLING_MODES = new Set([
+	"cool",
+	"heat_cool",
+	"dry",
+	"fan_only"
+]);
+/** A heater offers heat (and maybe auto/off) and none of the cooling modes. */
+function climateOffersCooling(modes) {
+	return modes.some((mode) => COOLING_MODES.has(mode));
+}
+/** Setpoint track bounds. Absent when the integration did not report both ends. */
+function climateSetpointBounds(status) {
+	const min = status.minTemp;
+	const max = status.maxTemp;
+	if (typeof min !== "number" || typeof max !== "number") return null;
+	if (!Number.isFinite(min) || !Number.isFinite(max) || max <= min) return null;
+	return {
+		min,
+		max
+	};
+}
+/** Map a 0–1 drag fraction onto the setpoint, snapped to `tempStep`. */
+function climateTargetFromFraction(fraction, bounds, tempStep) {
+	const step = resolveClimateTempStep(tempStep);
+	const clamped = Math.min(1, Math.max(0, fraction));
+	const raw = bounds.min + clamped * (bounds.max - bounds.min);
+	const steps = Math.round((raw - bounds.min) / step);
+	const snapped = bounds.min + steps * step;
+	const rounded = Math.round(snapped * 1e3) / 1e3;
+	return Math.min(bounds.max, Math.max(bounds.min, rounded));
+}
 /** AC-appropriate short mode labels. Exhaustive over HvacMode. */
 function modeLabel(t, mode) {
 	switch (mode) {
@@ -48581,9 +49172,6 @@ var MODE_ACCENT = {
 	dry: "#22d3ee",
 	off: "#a1a1aa"
 };
-/** Practical AC setpoint range (Celsius) for the target range track. */
-var TARGET_MIN = 16;
-var TARGET_MAX = 30;
 /** Title-case a snake/lower token for a selector option ('medium_low' → 'Medium
 *  low', 'turbo' → 'Turbo'). Shared by the fan + preset selectors. */
 function fanLabel(token) {
@@ -48670,7 +49258,7 @@ function AcPanel({ trpc, deviceId, layout, optimistic }) {
 				onClick: (e) => {
 					e.stopPropagation();
 					if (!busy && display.target !== null) {
-						const next = display.target - 1;
+						const next = nextClimateTarget(display.target, -1, display);
 						applyOptimistic({ target: next });
 						cap.setTarget({ target: next });
 					}
@@ -48684,7 +49272,7 @@ function AcPanel({ trpc, deviceId, layout, optimistic }) {
 				onClick: (e) => {
 					e.stopPropagation();
 					if (!busy && display.target !== null) {
-						const next = display.target + 1;
+						const next = nextClimateTarget(display.target, 1, display);
 						applyOptimistic({ target: next });
 						cap.setTarget({ target: next });
 					}
@@ -48714,6 +49302,8 @@ function AcPanel({ trpc, deviceId, layout, optimistic }) {
 	});
 	const accent = MODE_ACCENT[display.mode];
 	const on = display.mode !== "off";
+	const heatingOnly = !climateOffersCooling(display.availableModes);
+	const setpointBounds = climateSetpointBounds(display);
 	const CurrentPresetIcon = presetIcon(display.preset);
 	const boost = display.preset === "turbo";
 	const period = Math.max(.55, airflowPeriodSec(display.fanMode) * (boost ? .6 : 1));
@@ -48730,11 +49320,12 @@ function AcPanel({ trpc, deviceId, layout, optimistic }) {
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: "pointer-events-none absolute inset-0 opacity-60",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AirflowViz, {
+						children: heatingOnly && !on ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RadiatorFins, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AirflowViz, {
 							mode: display.mode,
 							accent,
 							periodSec: period,
-							swaying
+							swaying,
+							forceRising: heatingOnly
 						})
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "pointer-events-none absolute inset-0 bg-gradient-to-b from-surface/50 via-transparent to-surface/50" }),
@@ -48752,6 +49343,7 @@ function AcPanel({ trpc, deviceId, layout, optimistic }) {
 						children: [
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModeIcon, {
 								mode: display.mode,
+								heatingOnly,
 								className: "h-3.5 w-3.5"
 							}),
 							modeLabel(t, display.mode),
@@ -48778,7 +49370,7 @@ function AcPanel({ trpc, deviceId, layout, optimistic }) {
 								disabled: busy,
 								onClick: () => {
 									if (busy || display.target === null) return;
-									const next = display.target - 1;
+									const next = nextClimateTarget(display.target, -1, display);
 									applyOptimistic({ target: next });
 									cap.setTarget({ target: next });
 								}
@@ -48800,19 +49392,29 @@ function AcPanel({ trpc, deviceId, layout, optimistic }) {
 								disabled: busy,
 								onClick: () => {
 									if (busy || display.target === null) return;
-									const next = display.target + 1;
+									const next = nextClimateTarget(display.target, 1, display);
 									applyOptimistic({ target: next });
 									cap.setTarget({ target: next });
 								}
 							})
 						]
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "relative z-10 w-36",
+					}), setpointBounds !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "relative z-10 w-full px-1",
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RangeTrack, {
 							value: display.target,
-							min: TARGET_MIN,
-							max: TARGET_MAX,
-							accent
+							min: setpointBounds.min,
+							max: setpointBounds.max,
+							step: display.tempStep,
+							accent,
+							disabled: busy,
+							label: t("uiLibrary.acPanel.setpoint", "Setpoint"),
+							onPreview: (next) => {
+								applyOptimistic({ target: next });
+							},
+							onCommit: (next) => {
+								applyOptimistic({ target: next });
+								cap.setTarget({ target: next });
+							}
 						})
 					})] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "relative z-10 flex items-baseline gap-0.5",
@@ -48836,6 +49438,7 @@ function AcPanel({ trpc, deviceId, layout, optimistic }) {
 							className: "flex",
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModeIcon, {
 								mode: display.mode,
+								heatingOnly,
 								className: "h-4 w-4"
 							})
 						}),
@@ -48919,9 +49522,8 @@ function Field({ label, children }) {
 		}), children]
 	});
 }
-function ModeIcon({ mode, className }) {
-	const Icon = MODE_ICON[mode];
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+function ModeIcon({ mode, heatingOnly = false, className }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(heatingOnly && mode === "heat" ? Heater : MODE_ICON[mode], {
 		className,
 		"aria-hidden": true
 	});
@@ -48971,11 +49573,89 @@ function RoundStep({ label, symbol, disabled, onClick }) {
 		children: symbol
 	});
 }
-/** Thin gradient range track with a knob at the setpoint fraction. */
-function RangeTrack({ value, min, max, accent }) {
-	const pct = `${Math.min(1, Math.max(0, (value - min) / (max - min))) * 100}%`;
+/** Setpoint track. Drag previews; the command is sent when the pointer is released. */
+function RangeTrack({ value, min, max, step, accent, disabled, label, onPreview, onCommit }) {
+	const trackRef = (0, react$1.useRef)(null);
+	const draggingRef = (0, react$1.useRef)(false);
+	const [draft, setDraft] = (0, react$1.useState)(null);
+	const shown = draft ?? value;
+	const pct = `${Math.min(1, Math.max(0, (shown - min) / (max - min))) * 100}%`;
+	const tempAt = (clientX) => {
+		const el = trackRef.current;
+		if (el === null) return value;
+		const rect = el.getBoundingClientRect();
+		if (rect.width <= 0) return value;
+		return climateTargetFromFraction((clientX - rect.left) / rect.width, {
+			min,
+			max
+		}, step);
+	};
+	const onPointerDown = (event) => {
+		if (disabled) return;
+		event.stopPropagation();
+		event.preventDefault();
+		draggingRef.current = true;
+		if (typeof event.currentTarget.setPointerCapture === "function") event.currentTarget.setPointerCapture(event.pointerId);
+		const next = tempAt(event.clientX);
+		setDraft(next);
+		onPreview(next);
+	};
+	const onPointerMove = (event) => {
+		if (disabled || !draggingRef.current) return;
+		event.stopPropagation();
+		const next = tempAt(event.clientX);
+		setDraft(next);
+		onPreview(next);
+	};
+	const endDrag = (event) => {
+		if (!draggingRef.current) return;
+		event.stopPropagation();
+		draggingRef.current = false;
+		const next = tempAt(event.clientX);
+		setDraft(null);
+		if (event.currentTarget.hasPointerCapture?.(event.pointerId) === true) event.currentTarget.releasePointerCapture(event.pointerId);
+		onCommit(next);
+	};
+	const onKeyDown = (event) => {
+		if (disabled) return;
+		const current = draft ?? value;
+		if (event.key === "ArrowRight" || event.key === "ArrowUp") {
+			event.preventDefault();
+			onCommit(nextClimateTarget(current, 1, {
+				tempStep: step,
+				minTemp: min,
+				maxTemp: max
+			}));
+		} else if (event.key === "ArrowLeft" || event.key === "ArrowDown") {
+			event.preventDefault();
+			onCommit(nextClimateTarget(current, -1, {
+				tempStep: step,
+				minTemp: min,
+				maxTemp: max
+			}));
+		} else if (event.key === "Home") {
+			event.preventDefault();
+			onCommit(min);
+		} else if (event.key === "End") {
+			event.preventDefault();
+			onCommit(max);
+		}
+	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "mt-2 w-full",
+		ref: trackRef,
+		role: "slider",
+		"aria-label": label,
+		"aria-valuemin": min,
+		"aria-valuemax": max,
+		"aria-valuenow": shown,
+		"aria-disabled": disabled,
+		tabIndex: disabled ? -1 : 0,
+		onPointerDown,
+		onPointerMove,
+		onPointerUp: endDrag,
+		onPointerCancel: endDrag,
+		onKeyDown,
+		className: cn("mt-1 w-full touch-none select-none py-2", disabled ? "cursor-not-allowed opacity-40" : "cursor-ew-resize"),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "relative h-1.5 w-full rounded-full bg-surface-subtle",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -48985,7 +49665,7 @@ function RangeTrack({ value, min, max, accent }) {
 					background: accent
 				}
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "absolute top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-surface shadow",
+				className: "absolute top-1/2 h-3.5 w-3.5 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-surface shadow",
 				style: {
 					left: pct,
 					background: accent
@@ -49002,7 +49682,7 @@ function RangeTrack({ value, min, max, accent }) {
 * vent; every active mode renders drifting particles that FALL (cool/dry/auto)
 * or RISE (heat), with a horizontal sweep overlaid when a swing axis is active.
 */
-function AirflowViz({ mode, accent, periodSec, swaying }) {
+function AirflowViz({ mode, accent, periodSec, swaying, forceRising = false }) {
 	const columns = [
 		0,
 		1,
@@ -49011,7 +49691,7 @@ function AirflowViz({ mode, accent, periodSec, swaying }) {
 		4,
 		5
 	];
-	const rising = mode === "heat";
+	const rising = forceRising || mode === "heat";
 	const isDroplet = mode === "dry";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		"aria-hidden": true,
@@ -49027,6 +49707,7 @@ function AirflowViz({ mode, accent, periodSec, swaying }) {
 				size: 56
 			})
 		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			"data-testid": forceRising ? "climate-heat-rise" : void 0,
 			className: cn("acv-sway-wrap absolute inset-0", swaying && "acv-sway"),
 			style: swaying ? { animation: "acv-sway 2.6s ease-in-out infinite" } : void 0,
 			children: columns.map((i) => {
@@ -49049,6 +49730,23 @@ function AirflowViz({ mode, accent, periodSec, swaying }) {
 		})
 	});
 }
+/** Still radiator fins — the off state of a heating-only climate. */
+function RadiatorFins() {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-testid": "climate-radiator",
+		"aria-hidden": true,
+		className: "flex h-full items-end justify-center gap-1.5 px-8 pb-3 opacity-40",
+		children: [
+			0,
+			1,
+			2,
+			3,
+			4,
+			5,
+			6
+		].map((i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "h-10 w-1.5 rounded-t-full bg-foreground-subtle" }, i))
+	});
+}
 /** Big spinning fan for `fan_only` mode. */
 function FanBlades({ color, periodSec, size }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
@@ -49215,16 +49913,33 @@ var MODE_ARC_COLOR = {
 */
 function ThermostatHeroCard({ trpc, deviceId, features: _features, optimistic }) {
 	const t = useUiText();
-	const { cap, slice, available } = useDeviceCapability({
+	const climate = useDeviceCapability({
 		trpc,
 		deviceId,
 		cap: (d) => d.climateControl,
 		slice: (d) => d.state.climateControl
 	});
-	const { display, applyOptimistic } = useOptimisticSlice(slice, { enabled: optimistic ?? true });
-	if (cap === void 0) return null;
-	if (display === void 0) return null;
-	const busy = !available;
+	const valve = useDeviceCapability({
+		trpc,
+		deviceId,
+		cap: (d) => d.heatingValve,
+		slice: (d) => d.state.heatingValve
+	});
+	const { display, applyOptimistic } = useOptimisticSlice(climate.slice, { enabled: optimistic ?? true });
+	const hasClimate = climate.cap !== void 0 && display !== void 0;
+	const hasValve = valve.cap !== void 0;
+	if (!hasClimate && !hasValve) return null;
+	if (!hasClimate && hasValve) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "flex flex-col items-stretch gap-3 rounded-lg border border-border bg-surface p-4",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HeatingValveReadout, {
+			trpc,
+			deviceId,
+			layout: "full"
+		})
+	});
+	if (climate.cap === void 0 || display === void 0) return null;
+	const cap = climate.cap;
+	const busy = !climate.available;
 	const color = MODE_ARC_COLOR[display.mode];
 	const isRange = display.mode === "heat_cool" || display.targetLow !== null && display.targetHigh !== null;
 	const min = DEFAULT_TEMP_MIN;
@@ -49235,132 +49950,140 @@ function ThermostatHeroCard({ trpc, deviceId, features: _features, optimistic })
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		"data-mode": display.mode,
 		className: cn("flex flex-col items-stretch gap-4 rounded-lg border border-border bg-surface p-4 transition-colors", MODE_COLOR[display.mode]),
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "flex flex-col items-center gap-3",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "relative",
-				style: {
-					width: GAUGE_SIZE,
-					height: GAUGE_SIZE
-				},
-				children: [
-					isRange ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GaugeRing, {
-						mode: "band",
-						band: {
-							from: fractionLow,
-							to: fractionHigh
-						},
-						color
-					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GaugeRing, {
-						mode: "fill",
-						fraction: singleFraction,
-						color
-					}),
-					isRange ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						"data-testid": "arc-knob",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ArcKnob, {
-							fraction: fractionLow,
-							color,
-							knobTopPx: THERMOSTAT_KNOB_TOP_PX,
-							onDragFraction: (f) => {
-								if (busy || display.targetHigh === null) return;
-								const next = Math.min(fractionToTemp(f, min, max), display.targetHigh);
-								applyOptimistic({ targetLow: next });
-								cap.setTargetRange({
-									targetLow: next,
-									targetHigh: display.targetHigh
-								});
-							}
-						})
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						"data-testid": "arc-knob",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ArcKnob, {
-							fraction: fractionHigh,
-							color,
-							knobTopPx: THERMOSTAT_KNOB_TOP_PX,
-							onDragFraction: (f) => {
-								if (busy || display.targetLow === null) return;
-								const next = Math.max(fractionToTemp(f, min, max), display.targetLow);
-								applyOptimistic({ targetHigh: next });
-								cap.setTargetRange({
-									targetLow: display.targetLow,
-									targetHigh: next
-								});
-							}
-						})
-					})] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						"data-testid": "arc-knob",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ArcKnob, {
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-col items-center gap-3",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "relative",
+					style: {
+						width: GAUGE_SIZE,
+						height: GAUGE_SIZE
+					},
+					children: [
+						isRange ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GaugeRing, {
+							mode: "band",
+							band: {
+								from: fractionLow,
+								to: fractionHigh
+							},
+							color
+						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GaugeRing, {
+							mode: "fill",
 							fraction: singleFraction,
-							color,
-							knobTopPx: THERMOSTAT_KNOB_TOP_PX,
-							onDragFraction: (f) => {
-								if (busy) return;
-								const next = fractionToTemp(f, min, max);
-								applyOptimistic({ target: next });
-								cap.setTarget({ target: next });
-							}
-						})
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "absolute inset-0 flex flex-col items-center justify-center gap-0.5 pointer-events-none",
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								"data-testid": "current-temp",
-								className: "text-4xl font-bold tabular-nums text-foreground leading-none",
-								children: [display.currentTemp !== null ? display.currentTemp : "—", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "text-lg text-foreground-subtle font-normal ml-0.5",
-									children: "°"
-								})]
-							}),
-							!isRange && display.target !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: "text-xs font-semibold",
-								style: { color },
-								children: t("uiLibrary.thermostatHeroCard.setTo", "set {{value}}°", { value: display.target })
-							}),
-							isRange && display.targetLow !== null && display.targetHigh !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: "text-xs font-semibold",
-								style: { color },
-								children: [
-									display.targetLow,
-									"° – ",
-									display.targetHigh,
-									"°"
-								]
+							color
+						}),
+						isRange ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							"data-testid": "arc-knob",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ArcKnob, {
+								fraction: fractionLow,
+								color,
+								knobTopPx: THERMOSTAT_KNOB_TOP_PX,
+								onDragFraction: (f) => {
+									if (busy || display.targetHigh === null) return;
+									const next = Math.min(fractionToTemp(f, min, max), display.targetHigh);
+									applyOptimistic({ targetLow: next });
+									cap.setTargetRange({
+										targetLow: next,
+										targetHigh: display.targetHigh
+									});
+								}
 							})
-						]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							"data-testid": "arc-knob",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ArcKnob, {
+								fraction: fractionHigh,
+								color,
+								knobTopPx: THERMOSTAT_KNOB_TOP_PX,
+								onDragFraction: (f) => {
+									if (busy || display.targetLow === null) return;
+									const next = Math.max(fractionToTemp(f, min, max), display.targetLow);
+									applyOptimistic({ targetHigh: next });
+									cap.setTargetRange({
+										targetLow: display.targetLow,
+										targetHigh: next
+									});
+								}
+							})
+						})] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							"data-testid": "arc-knob",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ArcKnob, {
+								fraction: singleFraction,
+								color,
+								knobTopPx: THERMOSTAT_KNOB_TOP_PX,
+								onDragFraction: (f) => {
+									if (busy) return;
+									const next = fractionToTemp(f, min, max);
+									applyOptimistic({ target: next });
+									cap.setTarget({ target: next });
+								}
+							})
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "absolute inset-0 flex flex-col items-center justify-center gap-0.5 pointer-events-none",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									"data-testid": "current-temp",
+									className: "text-4xl font-bold tabular-nums text-foreground leading-none",
+									children: [display.currentTemp !== null ? display.currentTemp : "—", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "text-lg text-foreground-subtle font-normal ml-0.5",
+										children: "°"
+									})]
+								}),
+								!isRange && display.target !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "text-xs font-semibold",
+									style: { color },
+									children: t("uiLibrary.thermostatHeroCard.setTo", "set {{value}}°", { value: display.target })
+								}),
+								isRange && display.targetLow !== null && display.targetHigh !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "text-xs font-semibold",
+									style: { color },
+									children: [
+										display.targetLow,
+										"° – ",
+										display.targetHigh,
+										"°"
+									]
+								})
+							]
+						})
+					]
+				}), !isRange && display.target !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "w-[200px]",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Stepper, {
+						value: `${display.target}°`,
+						onDelta: (d) => {
+							if (busy || display.target === null) return;
+							const next = display.target + d;
+							applyOptimistic({ target: next });
+							cap.setTarget({ target: next });
+						}
 					})
-				]
-			}), !isRange && display.target !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "w-[200px]",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Stepper, {
-					value: `${display.target}°`,
-					onDelta: (d) => {
-						if (busy || display.target === null) return;
-						const next = display.target + d;
-						applyOptimistic({ target: next });
-						cap.setTarget({ target: next });
+				})]
+			}),
+			hasValve ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HeatingValveReadout, {
+				trpc,
+				deviceId,
+				layout: "full"
+			}) : null,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
+				"aria-label": t("uiLibrary.thermostatHeroCard.mode", "Mode"),
+				value: display.mode,
+				disabled: busy,
+				onChange: (e) => {
+					e.stopPropagation();
+					const mode = e.target.value;
+					if (!busy && mode) {
+						applyOptimistic({ mode: display.availableModes.find((m) => m === mode) ?? display.mode });
+						cap.setMode({ mode: display.availableModes.find((m) => m === mode) ?? display.mode });
 					}
-				})
-			})]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
-			"aria-label": t("uiLibrary.thermostatHeroCard.mode", "Mode"),
-			value: display.mode,
-			disabled: busy,
-			onChange: (e) => {
-				e.stopPropagation();
-				const mode = e.target.value;
-				if (!busy && mode) {
-					applyOptimistic({ mode: display.availableModes.find((m) => m === mode) ?? display.mode });
-					cap.setMode({ mode: display.availableModes.find((m) => m === mode) ?? display.mode });
-				}
-			},
-			className: cn("w-full rounded border border-border bg-surface px-3 py-1.5 text-sm", busy && "opacity-40 cursor-not-allowed"),
-			children: display.availableModes.map((m) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-				value: m,
-				children: m
-			}, m))
-		})]
+				},
+				className: cn("w-full rounded border border-border bg-surface px-3 py-1.5 text-sm", busy && "opacity-40 cursor-not-allowed"),
+				children: display.availableModes.map((m) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+					value: m,
+					children: m
+				}, m))
+			})
+		]
 	});
 }
 //#endregion
@@ -50868,14 +51591,32 @@ function useClimateCapGuard(trpc, deviceId) {
 	});
 	return cap !== void 0;
 }
-function ThermostatInlineControl({ trpc, deviceId, features, optimistic }) {
-	if (!useClimateCapGuard(trpc, deviceId)) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ClimatePanel, {
+function useHeatingValveCapGuard(trpc, deviceId) {
+	const { cap } = useDeviceCapability({
 		trpc,
 		deviceId,
-		features,
-		layout: "compact",
-		optimistic
+		cap: (d) => d.heatingValve,
+		slice: (d) => d.state.heatingValve
+	});
+	return cap !== void 0;
+}
+function ThermostatInlineControl({ trpc, deviceId, features, optimistic }) {
+	const hasClimate = useClimateCapGuard(trpc, deviceId);
+	const hasValve = useHeatingValveCapGuard(trpc, deviceId);
+	if (!hasClimate && !hasValve) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: "inline-flex items-center gap-2",
+		children: [hasClimate ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ClimatePanel, {
+			trpc,
+			deviceId,
+			features,
+			layout: "compact",
+			optimistic
+		}) : null, hasValve ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HeatingValveReadout, {
+			trpc,
+			deviceId,
+			layout: "compact"
+		}) : null]
 	});
 }
 function AcInlineControl({ trpc, deviceId, features, optimistic }) {
@@ -51040,6 +51781,10 @@ var CONTROL_KIND_COMPONENTS = {
 		InlineControl: PetFeederInlineControl,
 		HeroCard: PetFeederHeroCard
 	},
+	dishwasher: {
+		InlineControl: DishwasherInlineControl,
+		HeroCard: DishwasherHeroCard
+	},
 	script: {
 		InlineControl: ScriptInlineControl,
 		HeroCard: ScriptHeroCard
@@ -51116,7 +51861,8 @@ var CONTROL_FILLS = {
 	[_camstack_types.DeviceType.Weather]: false,
 	[_camstack_types.DeviceType.Container]: false,
 	[_camstack_types.DeviceType.Image]: false,
-	[_camstack_types.DeviceType.PetFeeder]: false
+	[_camstack_types.DeviceType.PetFeeder]: false,
+	[_camstack_types.DeviceType.Dishwasher]: false
 };
 var DEVICE_TYPE_VALUES = new Set(Object.values(_camstack_types.DeviceType));
 /**
@@ -63964,6 +64710,7 @@ exports.Hammer = Hammer;
 exports.Hand = Hand;
 exports.HardDrive = HardDrive;
 exports.Hash = Hash;
+exports.Heater = Heater;
 exports.HlsVideo = HlsVideo;
 exports.House = House;
 exports.HoverZoomImage = HoverZoomImage;
@@ -64239,6 +64986,7 @@ exports.ThemeProvider = require_theme_index.ThemeProvider$1;
 exports.Thermometer = Thermometer;
 exports.ThermostatHeroCard = ThermostatHeroCard;
 exports.ThermostatInlineControl = ThermostatInlineControl;
+exports.Timer = Timer;
 exports.TimezoneSelector = TimezoneSelector;
 exports.ToggleLeft = ToggleLeft;
 exports.ToggleRight = ToggleRight;
@@ -64919,6 +65667,19 @@ exports.useDeviceStateSlice$1 = useDeviceStateSlice;
 exports.useDeviceStatusGetStatus = useDeviceStatusGetStatus;
 exports.useDeviceWebrtc = useDeviceWebrtc;
 exports.useDevices = useDevices;
+exports.useDishwasherGetStatus = useDishwasherGetStatus;
+exports.useDishwasherPause = useDishwasherPause;
+exports.useDishwasherSetChildLock = useDishwasherSetChildLock;
+exports.useDishwasherSetExtraDry = useDishwasherSetExtraDry;
+exports.useDishwasherSetHalfLoad = useDishwasherSetHalfLoad;
+exports.useDishwasherSetHygienePlus = useDishwasherSetHygienePlus;
+exports.useDishwasherSetIntensiveZone = useDishwasherSetIntensiveZone;
+exports.useDishwasherSetOption = useDishwasherSetOption;
+exports.useDishwasherSetPower = useDishwasherSetPower;
+exports.useDishwasherSetProgram = useDishwasherSetProgram;
+exports.useDishwasherSetVarioSpeedPlus = useDishwasherSetVarioSpeedPlus;
+exports.useDishwasherStart = useDishwasherStart;
+exports.useDishwasherStop = useDishwasherStop;
 exports.useDisplayIconResolver = useDisplayIconResolver;
 exports.useDoorbellEvents = useDoorbellEvents;
 exports.useDoorbellGetStatus = useDoorbellGetStatus;
@@ -64951,6 +65712,7 @@ exports.useFanControlSetPreset = useFanControlSetPreset;
 exports.useFeatureProbeGetStatus = useFeatureProbeGetStatus;
 exports.useFloodGetStatus = useFloodGetStatus;
 exports.useGasGetStatus = useGasGetStatus;
+exports.useHeatingValveGetStatus = useHeatingValveGetStatus;
 exports.useHumidifierGetStatus = useHumidifierGetStatus;
 exports.useHumidifierSetMode = useHumidifierSetMode;
 exports.useHumidifierSetOn = useHumidifierSetOn;