@camstack/ui-library 1.2.367 → 1.2.369

package/dist/index.cjs

@@ -4284,6 +4284,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 TimerOff = require_createLucideIcon.createLucideIcon("timer-off", [
+	["path", {
+		d: "M10 2h4",
+		key: "n1abiw"
+	}],
+	["path", {
+		d: "M4.6 11a8 8 0 0 0 1.7 8.7 8 8 0 0 0 8.7 1.7",
+		key: "10he05"
+	}],
+	["path", {
+		d: "M7.4 7.4a8 8 0 0 1 10.3 1 8 8 0 0 1 .9 10.2",
+		key: "15f7sh"
+	}],
+	["path", {
+		d: "m2 2 20 20",
+		key: "1ooewy"
+	}],
+	["path", {
+		d: "M12 12v-2",
+		key: "fwoke6"
+	}]
+]);
+/**
+* @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 Timer = require_createLucideIcon.createLucideIcon("timer", [
 	["line", {
 		x1: "10",
@@ -5456,6 +5484,11 @@ var DEVICE_TYPE_META = {
 		labelKey: "uiLibrary.deviceMeta.type.petFountain",
 		labelFallback: "Pet fountain"
 	},
+	[_camstack_types.DeviceType.Heater]: {
+		icon: Flame,
+		labelKey: "uiLibrary.deviceMeta.type.heater",
+		labelFallback: "Heater"
+	},
 	[_camstack_types.DeviceType.Dishwasher]: {
 		icon: Waves,
 		labelKey: "uiLibrary.deviceMeta.type.dishwasher",
@@ -5961,7 +5994,7 @@ function lucideExportName(key) {
 function loadIconGlyphs() {
 	if (fullTable !== void 0) return Promise.resolve();
 	if (failure$1 !== void 0) return Promise.reject(failure$1);
-	pending ??= Promise.resolve().then(() => require("./icons-jbAtRNh8.cjs")).then((module) => {
+	pending ??= Promise.resolve().then(() => require("./icons-DXwPEKdJ.cjs")).then((module) => {
 		fullTable = module;
 		publish();
 	}, (error) => {
@@ -10694,12 +10727,6 @@ var useAddonsGetLogs = /*#__PURE__*/ alias(() => trpc.addons.getLogs.useQuery);
 var useAddonsListPackages = /*#__PURE__*/ alias(() => trpc.addons.listPackages.useQuery);
 /** Generated alias around `trpc.addons.installPackage.useMutation`. */
 var useAddonsInstallPackage = /*#__PURE__*/ alias(() => trpc.addons.installPackage.useMutation);
-/** Generated alias around `trpc.addons.installFromWorkspace.useMutation`. */
-var useAddonsInstallFromWorkspace = /*#__PURE__*/ alias(() => trpc.addons.installFromWorkspace.useMutation);
-/** Generated alias around `trpc.addons.isWorkspaceAvailable.useQuery`. */
-var useAddonsIsWorkspaceAvailable = /*#__PURE__*/ alias(() => trpc.addons.isWorkspaceAvailable.useQuery);
-/** Generated alias around `trpc.addons.listWorkspacePackages.useQuery`. */
-var useAddonsListWorkspacePackages = /*#__PURE__*/ alias(() => trpc.addons.listWorkspacePackages.useQuery);
 /** Generated alias around `trpc.addons.uninstallPackage.useMutation`. */
 var useAddonsUninstallPackage = /*#__PURE__*/ alias(() => trpc.addons.uninstallPackage.useMutation);
 /** Generated alias around `trpc.addons.listInstallations.useQuery`. */
@@ -11422,6 +11449,12 @@ var useDeviceProviderGetChildCreationSchema = /*#__PURE__*/ alias(() => trpc.dev
 var useDeviceProviderCreateDevice = /*#__PURE__*/ alias(() => trpc.deviceProvider.createDevice.useMutation);
 /** Generated alias around `trpc.deviceProvider.testCreationField.useMutation`. */
 var useDeviceProviderTestCreationField = /*#__PURE__*/ alias(() => trpc.deviceProvider.testCreationField.useMutation);
+/** Generated alias around `trpc.deviceRuns.listRuns.useQuery`. */
+var useDeviceRunsListRuns = /*#__PURE__*/ alias(() => trpc.deviceRuns.listRuns.useQuery);
+/** Generated alias around `trpc.deviceRuns.getRun.useQuery`. */
+var useDeviceRunsGetRun = /*#__PURE__*/ alias(() => trpc.deviceRuns.getRun.useQuery);
+/** Generated alias around `trpc.deviceRuns.getCurrentRun.useQuery`. */
+var useDeviceRunsGetCurrentRun = /*#__PURE__*/ alias(() => trpc.deviceRuns.getCurrentRun.useQuery);
 /** Generated alias around `trpc.deviceState.getSnapshot.useQuery`. */
 var useDeviceStateGetSnapshot = /*#__PURE__*/ alias(() => trpc.deviceState.getSnapshot.useQuery);
 /** Generated alias around `trpc.deviceState.getCapSlice.useQuery`. */
@@ -11526,6 +11559,14 @@ var useFanControlSetDirection = /*#__PURE__*/ alias(() => trpc.fanControl.setDir
 var useFanControlSetOscillating = /*#__PURE__*/ alias(() => trpc.fanControl.setOscillating.useMutation);
 /** Generated alias around `trpc.fanControl.getStatus.useQuery`. */
 var useFanControlGetStatus = /*#__PURE__*/ alias(() => trpc.fanControl.getStatus.useQuery);
+/** Generated alias around `trpc.fanPresets.getPresets.useQuery`. */
+var useFanPresetsGetPresets = /*#__PURE__*/ alias(() => trpc.fanPresets.getPresets.useQuery);
+/** Generated alias around `trpc.fanPresets.setPresets.useMutation`. */
+var useFanPresetsSetPresets = /*#__PURE__*/ alias(() => trpc.fanPresets.setPresets.useMutation);
+/** Generated alias around `trpc.fanPresets.applyPreset.useMutation`. */
+var useFanPresetsApplyPreset = /*#__PURE__*/ alias(() => trpc.fanPresets.applyPreset.useMutation);
+/** Generated alias around `trpc.fanPresets.capturePreset.useQuery`. */
+var useFanPresetsCapturePreset = /*#__PURE__*/ alias(() => trpc.fanPresets.capturePreset.useQuery);
 /** Generated alias around `trpc.featureProbe.getStatus.useQuery`. */
 var useFeatureProbeGetStatus = /*#__PURE__*/ alias(() => trpc.featureProbe.getStatus.useQuery);
 /** Generated alias around `trpc.flood.getStatus.useQuery`. */
@@ -13056,6 +13097,12 @@ var useTerminalSessionPullOutput = /*#__PURE__*/ alias(() => trpc.terminalSessio
 var useTerminalSessionWriteInput = /*#__PURE__*/ alias(() => trpc.terminalSession.writeInput.useMutation);
 /** Generated alias around `trpc.terminalSession.close.useMutation`. */
 var useTerminalSessionClose = /*#__PURE__*/ alias(() => trpc.terminalSession.close.useMutation);
+/** Generated alias around `trpc.timedRun.runFor.useMutation`. */
+var useTimedRunRunFor = /*#__PURE__*/ alias(() => trpc.timedRun.runFor.useMutation);
+/** Generated alias around `trpc.timedRun.cancel.useMutation`. */
+var useTimedRunCancel = /*#__PURE__*/ alias(() => trpc.timedRun.cancel.useMutation);
+/** Generated alias around `trpc.timedRun.getStatus.useQuery`. */
+var useTimedRunGetStatus = /*#__PURE__*/ alias(() => trpc.timedRun.getStatus.useQuery);
 /** Generated alias around `trpc.toast.onToast.useSubscription`. */
 var useToastOnToast = /*#__PURE__*/ alias(() => trpc.toast.onToast.useSubscription);
 /** Generated alias around `trpc.training.listBaseModels.useQuery`. */
@@ -36270,15 +36317,15 @@ function MobileDrawer({ open, onClose, children, className, width = "w-64" }) {
 			document.body.style.overflow = "";
 		};
 	}, [open, onClose]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: cn("fixed inset-0 z-40 bg-black/50 transition-opacity duration-200", open ? "opacity-100" : "pointer-events-none opacity-0"),
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [open && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "fixed inset-0 z-40 bg-black/50 animate-in fade-in duration-200",
 		onClick: onClose,
 		"aria-hidden": "true"
 	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		ref: drawerRef,
 		role: "dialog",
 		"aria-modal": "true",
-		className: cn("fixed inset-y-0 left-0 z-50 flex flex-col bg-surface border-r border-border shadow-2xl transition-transform duration-200 ease-out pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)]", width, open ? "translate-x-0" : "-translate-x-full", className),
+		className: cn("fixed inset-y-0 left-0 z-50 flex flex-col bg-surface border-r border-border shadow-2xl transition-transform duration-200 ease-out pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)]", width, open ? "translate-x-0" : "-translate-x-full shadow-none", className),
 		children
 	})] });
 }
@@ -53594,7 +53641,7 @@ function resolveBowlReading(kilograms, system) {
 function clampPortion(grams) {
 	return Math.min(_camstack_types.PET_FEEDER_MANUAL_FEED_MAX, Math.max(_camstack_types.PET_FEEDER_MANUAL_FEED_MIN, grams));
 }
-var KEYFRAMES$1 = `
+var KEYFRAMES$3 = `
 @keyframes pf-eat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(2px)} }
 @keyframes pf-pulse { 0%,100%{opacity:.55} 50%{opacity:1} }
 @media (prefers-reduced-motion: reduce) {
@@ -53685,7 +53732,7 @@ function PetFeederPanel({ trpc, deviceId, layout, optimistic }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "relative flex flex-col items-stretch gap-3 overflow-hidden rounded-lg border border-border bg-surface p-4",
 		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: KEYFRAMES$1 }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: KEYFRAMES$3 }),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "flex items-center gap-4 rounded-lg border border-border/50 bg-surface-subtle/40 p-3",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(BowlGauge, {
@@ -54144,6 +54191,137 @@ function PetFeederHeroCard({ trpc, deviceId, features, optimistic }) {
 	});
 }
 //#endregion
+//#region src/composites/device-controls/timed-run-control.tsx
+/**
+* "Run for N" - the inline control of the `timed-run` cap (D993).
+*
+* A number, the unit it is in, and a Run button: the hub turns the device on and
+* switches it off again after that long. While a run is armed the control shows
+* the time left (counted down from the slice's `activeUntil`) and a Cancel. The
+* maximum is the device type's own bound (`TIMED_RUN_LIMITS`); a value above it
+* is refused by the hub with a typed reason, which this control says in words.
+*
+* Rendered only when the device binds `timed-run`. An unknown slice is "nothing
+* armed", never a running timer.
+*/
+var TICK_MS = 1e3;
+var SECONDS_PER_MINUTE$1 = 60;
+var MS_PER_SECOND = 1e3;
+var DEFAULT_MINUTES = 30;
+var DEFAULT_SECONDS = 60;
+/** `m:ss` for a countdown; a started run never shows a negative time. */
+function formatCountdown(remainingMs) {
+	const total = Math.max(0, Math.ceil(remainingMs / MS_PER_SECOND));
+	const minutes = Math.floor(total / SECONDS_PER_MINUTE$1);
+	const seconds = total % SECONDS_PER_MINUTE$1;
+	return `${minutes}:${String(seconds).padStart(2, "0")}`;
+}
+/** The largest value the field accepts, in the limit's unit. */
+function maxInUnit(limit) {
+	return limit.unit === "min" ? limit.maxSeconds / SECONDS_PER_MINUTE$1 : limit.maxSeconds;
+}
+function useNow(active) {
+	const [now, setNow] = (0, react$1.useState)(() => Date.now());
+	(0, react$1.useEffect)(() => {
+		if (!active) return void 0;
+		setNow(Date.now());
+		const handle = setInterval(() => setNow(Date.now()), TICK_MS);
+		return () => clearInterval(handle);
+	}, [active]);
+	return now;
+}
+function TimedRunControl({ trpc, deviceId, limit }) {
+	const t = useUiText();
+	const { cap, slice, online } = useDeviceCapability({
+		trpc,
+		deviceId,
+		cap: (d) => d.timedRun,
+		slice: (d) => d.state.timedRun
+	});
+	const max = maxInUnit(limit);
+	const [draft, setDraft] = (0, react$1.useState)(Math.min(max, limit.unit === "min" ? DEFAULT_MINUTES : DEFAULT_SECONDS));
+	const [refusal, setRefusal] = (0, react$1.useState)(null);
+	const activeUntil = slice?.activeUntil ?? null;
+	const now = useNow(activeUntil !== null);
+	if (cap === void 0) return null;
+	const unitLabel = limit.unit === "min" ? t("uiLibrary.timedRun.minutes", "min") : t("uiLibrary.timedRun.seconds", "s");
+	const valid = Number.isFinite(draft) && draft > 0 && draft <= max;
+	const armed = activeUntil !== null && activeUntil > now;
+	const run = () => {
+		if (!valid) return;
+		setRefusal(null);
+		cap.runFor({
+			duration: draft,
+			unit: limit.unit
+		}).then((result) => {
+			if (!result.ok) setRefusal(result.reason);
+		});
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col gap-1.5",
+		"data-testid": "timed-run-control",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-center gap-2",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Input, {
+						type: "number",
+						inputMode: "numeric",
+						min: 1,
+						max,
+						step: 1,
+						value: Number.isFinite(draft) ? draft : "",
+						disabled: !online,
+						"aria-label": t("uiLibrary.timedRun.duration", "Run for"),
+						className: "w-20 tabular-nums",
+						onChange: (event) => setDraft(event.target.valueAsNumber)
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-xs text-foreground-muted",
+						children: unitLabel
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Button, {
+						size: "sm",
+						disabled: !online || !valid,
+						onClick: run,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Timer, {
+							className: "h-4 w-4",
+							"aria-hidden": true
+						}), t("uiLibrary.timedRun.run", "Run")]
+					}),
+					armed && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-xs font-medium tabular-nums text-foreground",
+						"data-testid": "timed-run-countdown",
+						children: t("uiLibrary.timedRun.remaining", "{{time}} left", { time: formatCountdown(activeUntil - now) })
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+						size: "sm",
+						variant: "outline",
+						disabled: !online,
+						"aria-label": t("uiLibrary.timedRun.cancel", "Cancel the timer"),
+						onClick: () => void cap.cancel({}),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TimerOff, {
+							className: "h-4 w-4",
+							"aria-hidden": true
+						})
+					})] })
+				]
+			}),
+			!valid && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-xs text-danger",
+				children: t("uiLibrary.timedRun.range", "Enter 1 to {{max}} {{unit}}", {
+					max,
+					unit: unitLabel
+				})
+			}),
+			refusal !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-xs text-danger",
+				role: "alert",
+				children: refusal === "over-max" ? t("uiLibrary.timedRun.overMax", "That is longer than this device may run.") : refusal === "command-failed" ? t("uiLibrary.timedRun.commandFailed", "The device did not turn on.") : t("uiLibrary.timedRun.unsupported", "This device cannot run on a timer.")
+			})
+		]
+	});
+}
+//#endregion
 //#region src/composites/device-controls/pet-fountain-panel.tsx
 /**
 * Pet-fountain controls for a `DeviceType.PetFountain` device.
@@ -54162,6 +54340,17 @@ function PetFeederHeroCard({ trpc, deviceId, features, optimistic }) {
 * zero. Stored volumes are litres and durations seconds (D944); the card
 * shows millilitres and minutes. Actions are gated on `available`.
 */
+var KEYFRAMES$2 = `
+@keyframes pfn-ripple { 0% { transform: scale(.45); opacity: .7 } 100% { transform: scale(1.15); opacity: 0 } }
+@keyframes pfn-rise { 0% { transform: translateY(0); opacity: 0 } 20% { opacity: .8 } 100% { transform: translateY(-16px); opacity: 0 } }
+.pfn-ripple, .pfn-bubble { transform-box: fill-box; transform-origin: center; }
+.pfn-ripple { animation: pfn-ripple 2.4s ease-out infinite; }
+.pfn-bubble { animation: pfn-rise 2.2s ease-in infinite; }
+@media (prefers-reduced-motion: reduce) {
+  .pfn-ripple, .pfn-bubble { animation: none !important; opacity: 0; }
+}
+`;
+var PUMP_LIMIT = _camstack_types.TIMED_RUN_LIMITS[_camstack_types.DeviceType.PetFountain];
 var LITRES_TO_ML = 1e3;
 var SECONDS_PER_MINUTE = 60;
 var MAX_PUMP_MINUTES = 240;
@@ -54222,25 +54411,30 @@ function PetFountainPanel({ trpc, deviceId, layout, optimistic }) {
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "flex items-center gap-4 rounded-lg border border-border-subtle bg-background-elevated p-3",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TankGauge, {
-					level,
-					empty: display.empty === true
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "flex min-w-0 flex-1 flex-col gap-1.5",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "flex items-baseline gap-2",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: cn("text-3xl font-bold leading-none tabular-nums", display.empty === true ? "text-danger" : "text-info"),
-							children: level === null ? "—" : `${Math.round(level)}%`
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "text-sm tabular-nums text-foreground-muted",
-							children: millilitres(display.waterVolume)
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: KEYFRAMES$2 }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TankGauge, {
+						level,
+						empty: display.empty === true,
+						pumping: display.pumpRunning === true
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex min-w-0 flex-1 flex-col gap-1.5",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex items-baseline gap-2",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: cn("text-3xl font-bold leading-none tabular-nums", display.empty === true ? "text-danger" : "text-info"),
+								children: level === null ? "—" : `${Math.round(level)}%`
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "text-sm tabular-nums text-foreground-muted",
+								children: millilitres(display.waterVolume)
+							})]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatusLine, {
+							empty: display.empty,
+							pumpRunning: display.pumpRunning
 						})]
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatusLine, {
-						empty: display.empty,
-						pumpRunning: display.pumpRunning
-					})]
-				})]
+					})
+				]
 			}),
 			fault !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "flex items-start gap-2 rounded-lg border border-danger/40 bg-danger/10 px-3 py-2 text-xs font-medium text-danger",
@@ -54321,6 +54515,11 @@ function PetFountainPanel({ trpc, deviceId, layout, optimistic }) {
 					]
 				})
 			}),
+			PUMP_LIMIT !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TimedRunControl, {
+				trpc,
+				deviceId,
+				limit: PUMP_LIMIT
+			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Button, {
 				variant: "outline",
 				size: "sm",
@@ -54335,7 +54534,7 @@ function PetFountainPanel({ trpc, deviceId, layout, optimistic }) {
 	});
 }
 /** A tank outline whose water rises with the level; danger-coloured when empty. */
-function TankGauge({ level, empty }) {
+function TankGauge({ level, empty, pumping }) {
 	const t = useUiText();
 	const top = 58 - Math.min(1, Math.max(0, (level ?? 0) / 100)) * 40;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
@@ -54356,16 +54555,56 @@ function TankGauge({ level, empty }) {
 					rx: "6"
 				})
 			}) }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("g", {
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", {
 				clipPath: "url(#pfn-tank-clip)",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
 					x: "18",
 					y: top,
 					width: "36",
 					height: "46",
 					className: empty ? "fill-danger" : "fill-info",
 					opacity: .75
-				})
+				}), pumping && level !== null && !empty && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", {
+					"data-testid": "fountain-ripple",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("ellipse", {
+							cx: "36",
+							cy: top,
+							rx: "14",
+							ry: "3.5",
+							fill: "none",
+							strokeWidth: "1.5",
+							className: "pfn-ripple stroke-info"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("ellipse", {
+							cx: "36",
+							cy: top,
+							rx: "14",
+							ry: "3.5",
+							fill: "none",
+							strokeWidth: "1.5",
+							className: "pfn-ripple stroke-info [animation-delay:1.2s]"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+							cx: "28",
+							cy: "54",
+							r: "1.8",
+							className: "pfn-bubble fill-info"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+							cx: "38",
+							cy: "56",
+							r: "1.4",
+							className: "pfn-bubble fill-info [animation-delay:0.8s]"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+							cx: "45",
+							cy: "54",
+							r: "1.6",
+							className: "pfn-bubble fill-info [animation-delay:1.5s]"
+						})
+					]
+				})]
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
 				x: "18",
@@ -54505,661 +54744,215 @@ function PetFountainHeroCard({ 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.
-*
-* Salt and rinse aid are not here: they are items of the device's `consumables`
-* cap, shown by the page's Consumables section like every device's (D915).
-*
-* UNKNOWN IS NOT OFF. The slice carries `null` for everything the appliance has not
-* reported, and this view renders that as "—" / a disabled control, never as an unchecked
-* box or a zero. It also does not echo a command before the appliance confirms it: the
-* slice moves when the appliance says so.
-*/
-/** What the operation state is called to a person, and how it is toned. */
-function dishwasherOperationMeta(operationState, t = defaultUiText) {
-	switch (operationState) {
-		case "Run": return {
-			label: t("uiLibrary.dishwasher.op.run", "Running"),
-			tone: "text-primary"
-		};
-		case "Pause": return {
-			label: t("uiLibrary.dishwasher.op.pause", "Paused"),
-			tone: "text-warning"
-		};
-		case "Finished": return {
-			label: t("uiLibrary.dishwasher.op.finished", "Finished"),
-			tone: "text-success"
-		};
-		case "Error": return {
-			label: t("uiLibrary.dishwasher.op.error", "Error"),
-			tone: "text-danger"
-		};
-		case "Aborting": return {
-			label: t("uiLibrary.dishwasher.op.aborting", "Stopping"),
-			tone: "text-warning"
-		};
-		case "ActionRequired": return {
-			label: t("uiLibrary.dishwasher.op.actionRequired", "Action required"),
-			tone: "text-warning"
-		};
-		case "DelayedStart": return {
-			label: t("uiLibrary.dishwasher.op.delayedStart", "Delayed start"),
-			tone: "text-primary"
-		};
-		case "Ready": return {
-			label: t("uiLibrary.dishwasher.op.ready", "Ready"),
-			tone: "text-foreground"
-		};
-		case "Inactive": return {
-			label: t("uiLibrary.dishwasher.op.inactive", "Inactive"),
-			tone: "text-foreground-subtle"
-		};
-		case null: return {
-			label: t("uiLibrary.dishwasher.unknown", "Unknown"),
-			tone: "text-foreground-subtle"
-		};
-	}
+//#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));
 }
-/** The headline for the whole slice: the appliance's state, or why there is none. */
-function dishwasherHeadline(status, t = defaultUiText) {
-	switch (status.availability) {
-		case "offline": return {
-			label: t("uiLibrary.dishwasher.offline", "Offline"),
-			tone: "text-foreground-subtle"
-		};
-		case "description-missing": return {
-			label: t("uiLibrary.dishwasher.descriptionMissing", "Waiting for the appliance profile"),
-			tone: "text-warning"
-		};
-		case "available": return dishwasherOperationMeta(status.operationState, t);
+/** 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) {
+		case "cool": return t("uiLibrary.acPanel.modeCool", "Cool");
+		case "heat": return t("uiLibrary.acPanel.modeHeat", "Heat");
+		case "auto": return t("uiLibrary.acPanel.modeAuto", "Auto");
+		case "heat_cool": return t("uiLibrary.acPanel.modeHeatCool", "Heat·Cool");
+		case "fan_only": return t("uiLibrary.acPanel.modeFan", "Fan");
+		case "dry": return t("uiLibrary.acPanel.modeDry", "Dry");
+		case "off": return t("uiLibrary.acPanel.modeOff", "Off");
 	}
 }
-/** Last segment of a feature key, spaced out: `Dishcare.Dishwasher.Program.Eco50` -> `Eco50`. */
-function featureLabel(key) {
-	return (key.split(".").pop() ?? key).replace(/([a-z0-9])([A-Z])/g, "$1 $2");
+/** Per-mode icon (lucide). Exhaustive over HvacMode. */
+var MODE_ICON = {
+	cool: Snowflake,
+	heat: Flame,
+	auto: Sparkles,
+	heat_cool: Thermometer,
+	fan_only: Fan,
+	dry: Droplets,
+	off: Power
+};
+/** Mode accent hex — drives the airflow particles, the glow, and the target
+*  value colour. Mirrors the thermostat gauge palette. Exhaustive. */
+var MODE_ACCENT = {
+	heat: "#f59e0b",
+	cool: "#60a5fa",
+	auto: "#c084fc",
+	heat_cool: "#e879f9",
+	fan_only: "#94a3b8",
+	dry: "#22d3ee",
+	off: "#a1a1aa"
+};
+/** 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) {
+	const spaced = token.replace(/_/g, " ");
+	return spaced.charAt(0).toUpperCase() + spaced.slice(1);
+}
+/** Preset → icon. Unknown presets fall back to a neutral sparkle. */
+function presetIcon(preset) {
+	switch (preset) {
+		case "turbo": return Zap;
+		case "quiet": return Feather;
+		case "sleep": return Moon;
+		case "eco": return Leaf;
+		case "8c_heat": return Snowflake;
+		case "none": return Ban;
+		default: return Sparkles;
+	}
 }
 /**
-* Salt and rinse aid are consumable items (D915). Their events must not
-* reappear on the hero — the Consumables section is the only surface.
+* Fan level → airflow animation period. Higher speed ⇒ shorter period. Unknown
+* strings fall back to a medium pace. Turbo (a preset) shortens it further.
 */
-function isConsumableDishwasherEvent(event) {
-	const short = (event.split(".").pop() ?? event).toLowerCase();
-	return short.includes("salt") || short.includes("rinse");
-}
-/** Raised events the hero may name. Consumable events are dropped. */
-function visibleDishwasherEvents(events) {
-	return events.filter((event) => !isConsumableDishwasherEvent(event));
+function airflowPeriodSec(fanMode) {
+	switch (fanMode) {
+		case "high": return 1;
+		case "medium_high": return 1.3;
+		case "medium": return 1.6;
+		case "medium_low": return 1.9;
+		case "low": return 2.2;
+		default: return 1.8;
+	}
 }
-/** Whole seconds as a short duration: `1 h 24 min`, `42 min`, `30 s`. */
-function formatDuration(seconds, t = defaultUiText) {
-	if (seconds < 60) return t("uiLibrary.dishwasher.durationSeconds", "{{n}} s", { n: seconds });
-	const minutes = Math.round(seconds / 60);
-	if (minutes < 60) return t("uiLibrary.dishwasher.durationMinutes", "{{n}} min", { n: minutes });
-	const hours = Math.floor(minutes / 60);
-	const rest = minutes % 60;
-	return rest === 0 ? t("uiLibrary.dishwasher.durationHours", "{{n}} h", { n: hours }) : t("uiLibrary.dishwasher.durationHoursMinutes", "{{h}} h {{m}} min", {
-		h: hours,
-		m: rest
-	});
+var KEYFRAMES$1 = `
+@keyframes acv-fall { 0%{transform:translateY(-1.75rem);opacity:0} 18%{opacity:.7} 82%{opacity:.7} 100%{transform:translateY(7.5rem);opacity:0} }
+@keyframes acv-rise { 0%{transform:translateY(7.5rem);opacity:0} 18%{opacity:.7} 82%{opacity:.7} 100%{transform:translateY(-1.75rem);opacity:0} }
+@keyframes acv-sway { 0%,100%{transform:translateX(-9%)} 50%{transform:translateX(9%)} }
+@keyframes acv-swing-h { 0%,100%{transform:translateX(-22%)} 50%{transform:translateX(22%)} }
+@keyframes acv-swing-v { 0%,100%{transform:translateY(-22%)} 50%{transform:translateY(22%)} }
+@keyframes acv-spin { to { transform:rotate(360deg) } }
+@keyframes acv-glow { 0%,100%{opacity:.35;transform:scale(1)} 50%{opacity:.6;transform:scale(1.06)} }
+@media (prefers-reduced-motion: reduce) {
+  .acv-streak, .acv-fan, .acv-sway-wrap, .acv-glow, .acv-swing { animation: none !important; }
 }
-function useDishwasher(trpc, deviceId) {
-	return useDeviceCapability({
+`;
+function AcPanel({ trpc, deviceId, layout, optimistic }) {
+	const t = useUiText();
+	const { cap, slice, available } = 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 DishwasherGraphic({ running, progressPercent }) {
-	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",
-		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" })
-		})]
+		cap: (d) => d.climateControl,
+		slice: (d) => d.state.climateControl
 	});
-}
-function DishwasherPanel({ trpc, deviceId, layout }) {
-	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 (slice === void 0) return null;
-	const display = slice;
-	const link = display.availability === "available";
-	const busy = !available || !link;
-	const optionTogglesLocked = display.childLock === true;
-	const meta = dishwasherHeadline(display, t);
-	const running = display.operationState === "Run";
-	const paused = display.operationState === "Pause";
-	const startable = display.remoteStartAllowed === true && display.selectedProgram !== null;
-	const press = (fn) => {
-		if (busy) return;
-		fn();
-	};
+	if (display === void 0) return null;
+	const busy = !available;
 	if (layout === "compact") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "inline-flex items-center gap-1.5 max-w-full",
+		"data-mode": display.mode,
+		className: "inline-flex items-center gap-1",
 		children: [
-			display.doorOpen === true && /* @__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: featureLabel(display.program)
-			}),
-			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.remaining, t)]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DishwasherIconButton, {
-				label: t("uiLibrary.dishwasher.start", "Start"),
-				busy: busy || !startable,
-				active: running,
-				onClick: () => press(() => cap.start({})),
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Play, { className: "h-3 w-3" })
+				className: cn("text-xs tabular-nums font-medium", MODE_TEXT_COLOR[display.mode]),
+				children: display.target !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+					display.target,
+					"°",
+					display.currentTemp !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "text-foreground-subtle font-normal",
+						children: [
+							" ",
+							"(",
+							display.currentTemp,
+							"°)"
+						]
+					})
+				] }) : display.currentTemp !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: "text-foreground-subtle",
+					children: [display.currentTemp, "°"]
+				}) : null
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DishwasherIconButton, {
-				label: paused ? t("uiLibrary.dishwasher.resume", "Resume") : t("uiLibrary.dishwasher.pause", "Pause"),
-				busy: busy || !(running || paused),
-				active: paused,
-				onClick: () => press(() => paused ? cap.resume({}) : cap.pause({})),
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Pause, { className: "h-3 w-3" })
+			display.target !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				"aria-label": t("uiLibrary.acPanel.decrease", "Decrease target"),
+				disabled: busy,
+				onClick: (e) => {
+					e.stopPropagation();
+					if (!busy && display.target !== null) {
+						const next = nextClimateTarget(display.target, -1, display);
+						applyOptimistic({ target: next });
+						cap.setTarget({ target: next });
+					}
+				},
+				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 text-xs", busy && "opacity-40 cursor-not-allowed"),
+				children: "−"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				"aria-label": t("uiLibrary.acPanel.increase", "Increase target"),
+				disabled: busy,
+				onClick: (e) => {
+					e.stopPropagation();
+					if (!busy && display.target !== null) {
+						const next = nextClimateTarget(display.target, 1, display);
+						applyOptimistic({ target: next });
+						cap.setTarget({ target: next });
+					}
+				},
+				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 text-xs", busy && "opacity-40 cursor-not-allowed"),
+				children: "+"
+			})] }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
+				"aria-label": t("uiLibrary.acPanel.mode", "Mode"),
+				value: display.mode,
+				disabled: busy,
+				onChange: (e) => {
+					e.stopPropagation();
+					const mode = display.availableModes.find((m) => m === e.target.value);
+					if (!busy && mode) {
+						applyOptimistic({ mode });
+						cap.setMode({ mode });
+					}
+				},
+				className: cn("bg-transparent px-0.5 text-xs text-foreground-subtle hover:text-foreground cursor-pointer", busy && "opacity-40 cursor-not-allowed"),
+				children: display.availableModes.map((m) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+					value: m,
+					children: modeLabel(t, m)
+				}, m))
 			})
 		]
 	});
-	const programs = display.availablePrograms;
+	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));
+	const showVSwing = display.swingVertical !== null;
+	const showHSwing = display.swingHorizontal !== null;
+	const swaying = on && (display.swingVertical === true || display.swingHorizontal === true);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "flex flex-col gap-3 rounded-lg border border-border bg-surface p-4",
+		"data-mode": display.mode,
+		className: cn("relative flex flex-col items-stretch gap-2.5 overflow-hidden rounded-lg border p-3 transition-colors", MODE_COLOR[display.mode]),
 		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex items-start gap-4",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DishwasherGraphic, {
-					running,
-					progressPercent: display.progress
-				}), /* @__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 === false && /* @__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",
-							title: display.program,
-							children: featureLabel(display.program)
-						}),
-						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.remaining, t) })]
-						}),
-						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.delayedStart, t) })
-						}),
-						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.progress))}%` }
-								})
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-								className: "tabular-nums text-xs text-foreground-subtle",
-								children: [Math.round(display.progress), "%"]
-							})]
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "flex flex-wrap items-center gap-x-3 gap-y-1.5",
-							children: [display.doorOpen === true && /* @__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")]
-							}), visibleDishwasherEvents(display.activeEvents).map((event) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "text-xs text-warning",
-								title: event,
-								children: featureLabel(event)
-							}, event))]
-						}),
-						display.operationState === "Error" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "inline-flex items-center gap-1 text-xs text-danger",
-							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 != null ? featureLabel(display.errorLabel) : display.errorCode != null ? t("uiLibrary.dishwasher.errorCode", "Error {{code}}", { code: display.errorCode }) : t("uiLibrary.dishwasher.op.error", "Error") })]
-						}),
-						/* @__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 || !startable,
-									active: running,
-									onClick: () => press(() => cap.start({})),
-									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Play, { className: "h-4 w-4" })
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DishwasherIconButton, {
-									label: paused ? t("uiLibrary.dishwasher.resume", "Resume") : t("uiLibrary.dishwasher.pause", "Pause"),
-									busy: busy || !(running || paused),
-									active: paused,
-									onClick: () => press(() => paused ? cap.resume({}) : cap.pause({})),
-									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: busy || !(running || paused),
-									active: false,
-									onClick: () => press(() => cap.stop({})),
-									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: busy || display.powerOn === null,
-									active: display.powerOn === true,
-									onClick: () => {
-										const next = display.powerOn !== true;
-										press(() => cap.setPower({ on: 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.selectedProgram ?? "",
-					disabled: busy,
-					onChange: (e) => {
-						const program = e.target.value;
-						if (!program) return;
-						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.selectedProgram == null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-						value: "",
-						children: "—"
-					}), programs.map((p) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-						value: p,
-						children: featureLabel(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,
-						shown: link,
-						busy: busy || optionTogglesLocked,
-						onChange: (on) => void cap.setHalfLoad({ on })
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleRow, {
-						label: t("uiLibrary.dishwasher.hygienePlus", "Hygiene plus"),
-						checked: display.hygienePlus,
-						shown: link,
-						busy: busy || optionTogglesLocked,
-						onChange: (on) => void cap.setHygienePlus({ on })
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleRow, {
-						label: t("uiLibrary.dishwasher.extraDry", "Extra dry"),
-						checked: display.extraDry,
-						shown: link,
-						busy: busy || optionTogglesLocked,
-						onChange: (on) => void cap.setExtraDry({ on })
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleRow, {
-						label: t("uiLibrary.dishwasher.intensiveZone", "Intensive zone"),
-						checked: display.intensiveZone,
-						shown: link,
-						busy: busy || optionTogglesLocked,
-						onChange: (on) => void cap.setIntensiveZone({ on })
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleRow, {
-						label: t("uiLibrary.dishwasher.varioSpeedPlus", "VarioSpeed+"),
-						checked: display.varioSpeedPlus,
-						shown: link,
-						busy: busy || optionTogglesLocked,
-						onChange: (on) => void cap.setVarioSpeedPlus({ on })
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleRow, {
-						label: t("uiLibrary.dishwasher.childLock", "Child lock"),
-						checked: display.childLock,
-						shown: link,
-						busy,
-						onChange: (on) => void cap.setChildLock({ on })
-					})
-				]
-			})
-		]
-	});
-}
-/**
-* One boolean setting. `checked === null` is "the appliance has not said": on a reachable
-* appliance that means it does not offer the setting (hidden); on an unreachable one the
-* setting is shown but disabled and marked unknown — never as an unchecked box.
-*/
-function ToggleRow({ label, checked, shown, busy, onChange }) {
-	const t = useUiText();
-	if (checked === null && shown) return null;
-	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: checked === true,
-				"aria-checked": checked === null ? "mixed" : checked,
-				disabled: busy || checked === null,
-				onChange: (e) => {
-					onChange(e.target.checked);
-				},
-				onClick: (e) => {
-					e.stopPropagation();
-				},
-				className: "rounded border-border"
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: label }),
-			checked === null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "text-foreground-subtle",
-				children: t("uiLibrary.dishwasher.unknownValue", "—")
-			})
-		]
-	});
-}
-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) {
-		case "cool": return t("uiLibrary.acPanel.modeCool", "Cool");
-		case "heat": return t("uiLibrary.acPanel.modeHeat", "Heat");
-		case "auto": return t("uiLibrary.acPanel.modeAuto", "Auto");
-		case "heat_cool": return t("uiLibrary.acPanel.modeHeatCool", "Heat·Cool");
-		case "fan_only": return t("uiLibrary.acPanel.modeFan", "Fan");
-		case "dry": return t("uiLibrary.acPanel.modeDry", "Dry");
-		case "off": return t("uiLibrary.acPanel.modeOff", "Off");
-	}
-}
-/** Per-mode icon (lucide). Exhaustive over HvacMode. */
-var MODE_ICON = {
-	cool: Snowflake,
-	heat: Flame,
-	auto: Sparkles,
-	heat_cool: Thermometer,
-	fan_only: Fan,
-	dry: Droplets,
-	off: Power
-};
-/** Mode accent hex — drives the airflow particles, the glow, and the target
-*  value colour. Mirrors the thermostat gauge palette. Exhaustive. */
-var MODE_ACCENT = {
-	heat: "#f59e0b",
-	cool: "#60a5fa",
-	auto: "#c084fc",
-	heat_cool: "#e879f9",
-	fan_only: "#94a3b8",
-	dry: "#22d3ee",
-	off: "#a1a1aa"
-};
-/** 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) {
-	const spaced = token.replace(/_/g, " ");
-	return spaced.charAt(0).toUpperCase() + spaced.slice(1);
-}
-/** Preset → icon. Unknown presets fall back to a neutral sparkle. */
-function presetIcon(preset) {
-	switch (preset) {
-		case "turbo": return Zap;
-		case "quiet": return Feather;
-		case "sleep": return Moon;
-		case "eco": return Leaf;
-		case "8c_heat": return Snowflake;
-		case "none": return Ban;
-		default: return Sparkles;
-	}
-}
-/**
-* Fan level → airflow animation period. Higher speed ⇒ shorter period. Unknown
-* strings fall back to a medium pace. Turbo (a preset) shortens it further.
-*/
-function airflowPeriodSec(fanMode) {
-	switch (fanMode) {
-		case "high": return 1;
-		case "medium_high": return 1.3;
-		case "medium": return 1.6;
-		case "medium_low": return 1.9;
-		case "low": return 2.2;
-		default: return 1.8;
-	}
-}
-var KEYFRAMES = `
-@keyframes acv-fall { 0%{transform:translateY(-1.75rem);opacity:0} 18%{opacity:.7} 82%{opacity:.7} 100%{transform:translateY(7.5rem);opacity:0} }
-@keyframes acv-rise { 0%{transform:translateY(7.5rem);opacity:0} 18%{opacity:.7} 82%{opacity:.7} 100%{transform:translateY(-1.75rem);opacity:0} }
-@keyframes acv-sway { 0%,100%{transform:translateX(-9%)} 50%{transform:translateX(9%)} }
-@keyframes acv-swing-h { 0%,100%{transform:translateX(-22%)} 50%{transform:translateX(22%)} }
-@keyframes acv-swing-v { 0%,100%{transform:translateY(-22%)} 50%{transform:translateY(22%)} }
-@keyframes acv-spin { to { transform:rotate(360deg) } }
-@keyframes acv-glow { 0%,100%{opacity:.35;transform:scale(1)} 50%{opacity:.6;transform:scale(1.06)} }
-@media (prefers-reduced-motion: reduce) {
-  .acv-streak, .acv-fan, .acv-sway-wrap, .acv-glow, .acv-swing { animation: none !important; }
-}
-`;
-function AcPanel({ trpc, deviceId, layout, optimistic }) {
-	const t = useUiText();
-	const { cap, slice, available } = 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;
-	if (layout === "compact") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		"data-mode": display.mode,
-		className: "inline-flex items-center gap-1",
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: cn("text-xs tabular-nums font-medium", MODE_TEXT_COLOR[display.mode]),
-				children: display.target !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-					display.target,
-					"°",
-					display.currentTemp !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-						className: "text-foreground-subtle font-normal",
-						children: [
-							" ",
-							"(",
-							display.currentTemp,
-							"°)"
-						]
-					})
-				] }) : display.currentTemp !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-					className: "text-foreground-subtle",
-					children: [display.currentTemp, "°"]
-				}) : null
-			}),
-			display.target !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-				type: "button",
-				"aria-label": t("uiLibrary.acPanel.decrease", "Decrease target"),
-				disabled: busy,
-				onClick: (e) => {
-					e.stopPropagation();
-					if (!busy && display.target !== null) {
-						const next = nextClimateTarget(display.target, -1, display);
-						applyOptimistic({ target: next });
-						cap.setTarget({ target: next });
-					}
-				},
-				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 text-xs", busy && "opacity-40 cursor-not-allowed"),
-				children: "−"
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-				type: "button",
-				"aria-label": t("uiLibrary.acPanel.increase", "Increase target"),
-				disabled: busy,
-				onClick: (e) => {
-					e.stopPropagation();
-					if (!busy && display.target !== null) {
-						const next = nextClimateTarget(display.target, 1, display);
-						applyOptimistic({ target: next });
-						cap.setTarget({ target: next });
-					}
-				},
-				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 text-xs", busy && "opacity-40 cursor-not-allowed"),
-				children: "+"
-			})] }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
-				"aria-label": t("uiLibrary.acPanel.mode", "Mode"),
-				value: display.mode,
-				disabled: busy,
-				onChange: (e) => {
-					e.stopPropagation();
-					const mode = display.availableModes.find((m) => m === e.target.value);
-					if (!busy && mode) {
-						applyOptimistic({ mode });
-						cap.setMode({ mode });
-					}
-				},
-				className: cn("bg-transparent px-0.5 text-xs text-foreground-subtle hover:text-foreground cursor-pointer", busy && "opacity-40 cursor-not-allowed"),
-				children: display.availableModes.map((m) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-					value: m,
-					children: modeLabel(t, m)
-				}, m))
-			})
-		]
-	});
-	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));
-	const showVSwing = display.swingVertical !== null;
-	const showHSwing = display.swingHorizontal !== null;
-	const swaying = on && (display.swingVertical === true || display.swingHorizontal === true);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		"data-mode": display.mode,
-		className: cn("relative flex flex-col items-stretch gap-2.5 overflow-hidden rounded-lg border p-3 transition-colors", MODE_COLOR[display.mode]),
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: KEYFRAMES }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: KEYFRAMES$1 }),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "relative z-10 flex flex-col items-center justify-center gap-1 overflow-hidden rounded-lg border border-border/50 bg-surface/30 px-3 py-3",
 				children: [
@@ -55645,6 +55438,739 @@ function SwingToggle({ axis, on, busy, onToggle }) {
 	});
 }
 //#endregion
+//#region src/composites/device-controls/heater-control.tsx
+/**
+* Heater controls for a `DeviceType.Heater` device (a dumb plug-in stove).
+*
+* A heater is a switch that heats while it is on, and the hub can switch it off
+* again after a chosen time (`timed-run`, D993):
+*   - HeaterInlineControl (device-list row): the on/off switch and a one-tap
+*     "Run N min".
+*   - HeaterHeroCard (device-detail hero): the glowing heat backdrop (the same
+*     rising streaks a heating air conditioner draws) while it is on, the
+*     on/off switch, the power draw when the plug measures one, and the timed
+*     run (number, unit, Run, countdown, Cancel).
+*
+* Every reading may be unknown (`null`) and is drawn as a dash, never as zero.
+*/
+var HEATER_LIMIT = _camstack_types.TIMED_RUN_LIMITS[_camstack_types.DeviceType.Heater];
+var QUICK_RUN_MINUTES = 30;
+var HEAT_ACCENT = "var(--color-warning)";
+var HEAT_PERIOD_SEC = 1.8;
+function useHeater({ trpc, deviceId, optimistic }) {
+	const { cap, slice, available } = useDeviceCapability({
+		trpc,
+		deviceId,
+		cap: (d) => d.switch,
+		slice: (d) => d.state.switch
+	});
+	const running = useDeviceCapability({
+		trpc,
+		deviceId,
+		cap: (d) => d.runningState,
+		slice: (d) => d.state.runningState
+	});
+	const power = useDeviceCapability({
+		trpc,
+		deviceId,
+		cap: (d) => d.powerMeter,
+		slice: (d) => d.state.powerMeter
+	});
+	const timer = useDeviceCapability({
+		trpc,
+		deviceId,
+		cap: (d) => d.timedRun,
+		slice: (d) => d.state.timedRun
+	});
+	const { display, applyOptimistic } = useOptimisticSlice(slice, { enabled: optimistic ?? true });
+	return {
+		cap,
+		display,
+		available,
+		applyOptimistic,
+		running: running.slice,
+		power: power.slice,
+		timer
+	};
+}
+function HeaterInlineControl(props) {
+	const t = useUiText();
+	const { cap, display, available, applyOptimistic, timer } = useHeater(props);
+	if (cap === void 0 || display === void 0) return null;
+	const on = display.on === true;
+	const quickMinutes = HEATER_LIMIT === void 0 ? QUICK_RUN_MINUTES : Math.min(QUICK_RUN_MINUTES, maxInUnit(HEATER_LIMIT));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "inline-flex items-center gap-2",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			onClick: (e) => e.stopPropagation(),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Switch, {
+				checked: on,
+				disabled: !available,
+				"aria-label": t("uiLibrary.heater.power", "Heater"),
+				onCheckedChange: (next) => {
+					applyOptimistic({ on: next });
+					cap.setState({ on: next });
+				}
+			})
+		}), timer.cap !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			onClick: (e) => e.stopPropagation(),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Button, {
+				size: "sm",
+				variant: "outline",
+				disabled: !timer.online,
+				onClick: () => void timer.cap?.runFor({
+					duration: quickMinutes,
+					unit: "min"
+				}),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Timer, {
+					className: "h-3.5 w-3.5",
+					"aria-hidden": true
+				}), t("uiLibrary.heater.quickRun", "Run {{minutes}} min", { minutes: quickMinutes })]
+			})
+		})]
+	});
+}
+function HeaterHeroCard(props) {
+	const t = useUiText();
+	const { cap, display, available, applyOptimistic, running, power, timer } = useHeater(props);
+	if (cap === void 0 || display === void 0) return null;
+	const on = display.on === true;
+	const heating = running?.running ?? on;
+	const watts = power?.power ?? null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "relative flex flex-col items-stretch gap-3 overflow-hidden rounded-lg border border-border bg-surface p-4",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: KEYFRAMES$1 }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "relative flex h-32 items-center justify-center overflow-hidden rounded-lg border border-border-subtle bg-background-elevated",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: cn("pointer-events-none absolute inset-0", heating ? "opacity-60" : "opacity-20"),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AirflowViz, {
+						mode: heating ? "heat" : "off",
+						accent: HEAT_ACCENT,
+						periodSec: HEAT_PERIOD_SEC,
+						swaying: false,
+						forceRising: true
+					})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "relative z-10 flex flex-col items-center gap-1",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Flame, {
+							className: cn("h-8 w-8", heating ? "text-warning" : "text-foreground-subtle"),
+							"aria-hidden": true
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-sm font-medium text-foreground",
+							children: heating ? t("uiLibrary.heater.heating", "Heating") : t("uiLibrary.heater.off", "Off")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-xs tabular-nums text-foreground-muted",
+							"data-testid": "heater-watts",
+							children: watts === null ? "—" : `${Math.round(watts)} W`
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+				className: "flex items-center justify-between gap-3 text-sm text-foreground",
+				children: [t("uiLibrary.heater.power", "Heater"), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Switch, {
+					checked: on,
+					disabled: !available,
+					onCheckedChange: (next) => {
+						applyOptimistic({ on: next });
+						cap.setState({ on: next });
+					}
+				})]
+			}),
+			timer.cap !== void 0 && HEATER_LIMIT !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TimedRunControl, {
+				trpc: props.trpc,
+				deviceId: props.deviceId,
+				limit: HEATER_LIMIT
+			})
+		]
+	});
+}
+//#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.
+*
+* Salt and rinse aid are not here: they are items of the device's `consumables`
+* cap, shown by the page's Consumables section like every device's (D915).
+*
+* UNKNOWN IS NOT OFF. The slice carries `null` for everything the appliance has not
+* reported, and this view renders that as "—" / a disabled control, never as an unchecked
+* box or a zero. It also does not echo a command before the appliance confirms it: the
+* slice moves when the appliance says so.
+*/
+/** What the operation state is called to a person, and how it is toned. */
+function dishwasherOperationMeta(operationState, t = defaultUiText) {
+	switch (operationState) {
+		case "Run": return {
+			label: t("uiLibrary.dishwasher.op.run", "Running"),
+			tone: "text-primary"
+		};
+		case "Pause": return {
+			label: t("uiLibrary.dishwasher.op.pause", "Paused"),
+			tone: "text-warning"
+		};
+		case "Finished": return {
+			label: t("uiLibrary.dishwasher.op.finished", "Finished"),
+			tone: "text-success"
+		};
+		case "Error": return {
+			label: t("uiLibrary.dishwasher.op.error", "Error"),
+			tone: "text-danger"
+		};
+		case "Aborting": return {
+			label: t("uiLibrary.dishwasher.op.aborting", "Stopping"),
+			tone: "text-warning"
+		};
+		case "ActionRequired": return {
+			label: t("uiLibrary.dishwasher.op.actionRequired", "Action required"),
+			tone: "text-warning"
+		};
+		case "DelayedStart": return {
+			label: t("uiLibrary.dishwasher.op.delayedStart", "Delayed start"),
+			tone: "text-primary"
+		};
+		case "Ready": return {
+			label: t("uiLibrary.dishwasher.op.ready", "Ready"),
+			tone: "text-foreground"
+		};
+		case "Inactive": return {
+			label: t("uiLibrary.dishwasher.op.inactive", "Inactive"),
+			tone: "text-foreground-subtle"
+		};
+		case null: return {
+			label: t("uiLibrary.dishwasher.unknown", "Unknown"),
+			tone: "text-foreground-subtle"
+		};
+	}
+}
+/** The headline for the whole slice: the appliance's state, or why there is none. */
+function dishwasherHeadline(status, t = defaultUiText) {
+	switch (status.availability) {
+		case "offline": return {
+			label: t("uiLibrary.dishwasher.offline", "Offline"),
+			tone: "text-foreground-subtle"
+		};
+		case "description-missing": return {
+			label: t("uiLibrary.dishwasher.descriptionMissing", "Waiting for the appliance profile"),
+			tone: "text-warning"
+		};
+		case "available": return dishwasherOperationMeta(status.operationState, t);
+	}
+}
+/** Last segment of a feature key, spaced out: `Dishcare.Dishwasher.Program.Eco50` -> `Eco50`. */
+function featureLabel(key) {
+	return (key.split(".").pop() ?? key).replace(/([a-z0-9])([A-Z])/g, "$1 $2");
+}
+/**
+* Salt and rinse aid are consumable items (D915). Their events must not
+* reappear on the hero — the Consumables section is the only surface.
+*/
+function isConsumableDishwasherEvent(event) {
+	const short = (event.split(".").pop() ?? event).toLowerCase();
+	return short.includes("salt") || short.includes("rinse");
+}
+/** Raised events the hero may name. Consumable events are dropped. */
+function visibleDishwasherEvents(events) {
+	return events.filter((event) => !isConsumableDishwasherEvent(event));
+}
+/** Whole seconds as a short duration: `1 h 24 min`, `42 min`, `30 s`. */
+function formatDuration(seconds, t = defaultUiText) {
+	if (seconds < 60) return t("uiLibrary.dishwasher.durationSeconds", "{{n}} s", { n: seconds });
+	const minutes = Math.round(seconds / 60);
+	if (minutes < 60) return t("uiLibrary.dishwasher.durationMinutes", "{{n}} min", { n: minutes });
+	const hours = Math.floor(minutes / 60);
+	const rest = minutes % 60;
+	return rest === 0 ? t("uiLibrary.dishwasher.durationHours", "{{n}} h", { n: hours }) : t("uiLibrary.dishwasher.durationHoursMinutes", "{{h}} h {{m}} min", {
+		h: hours,
+		m: rest
+	});
+}
+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 DishwasherGraphic({ running, progressPercent }) {
+	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",
+		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 }) {
+	const t = useUiText();
+	const { cap, slice, available } = useDishwasher(trpc, deviceId);
+	if (cap === void 0) return null;
+	if (slice === void 0) return null;
+	const display = slice;
+	const link = display.availability === "available";
+	const busy = !available || !link;
+	const optionTogglesLocked = display.childLock === true;
+	const meta = dishwasherHeadline(display, t);
+	const running = display.operationState === "Run";
+	const paused = display.operationState === "Pause";
+	const startable = display.remoteStartAllowed === true && display.selectedProgram !== null;
+	const press = (fn) => {
+		if (busy) return;
+		fn();
+	};
+	if (layout === "compact") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "inline-flex items-center gap-1.5 max-w-full",
+		children: [
+			display.doorOpen === true && /* @__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: featureLabel(display.program)
+			}),
+			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.remaining, t)]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DishwasherIconButton, {
+				label: t("uiLibrary.dishwasher.start", "Start"),
+				busy: busy || !startable,
+				active: running,
+				onClick: () => press(() => cap.start({})),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Play, { className: "h-3 w-3" })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DishwasherIconButton, {
+				label: paused ? t("uiLibrary.dishwasher.resume", "Resume") : t("uiLibrary.dishwasher.pause", "Pause"),
+				busy: busy || !(running || paused),
+				active: paused,
+				onClick: () => press(() => paused ? cap.resume({}) : cap.pause({})),
+				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, {
+					running,
+					progressPercent: display.progress
+				}), /* @__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 === false && /* @__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",
+							title: display.program,
+							children: featureLabel(display.program)
+						}),
+						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.remaining, t) })]
+						}),
+						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.delayedStart, t) })
+						}),
+						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.progress))}%` }
+								})
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: "tabular-nums text-xs text-foreground-subtle",
+								children: [Math.round(display.progress), "%"]
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex flex-wrap items-center gap-x-3 gap-y-1.5",
+							children: [display.doorOpen === true && /* @__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")]
+							}), visibleDishwasherEvents(display.activeEvents).map((event) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "text-xs text-warning",
+								title: event,
+								children: featureLabel(event)
+							}, event))]
+						}),
+						display.operationState === "Error" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "inline-flex items-center gap-1 text-xs text-danger",
+							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 != null ? featureLabel(display.errorLabel) : display.errorCode != null ? t("uiLibrary.dishwasher.errorCode", "Error {{code}}", { code: display.errorCode }) : t("uiLibrary.dishwasher.op.error", "Error") })]
+						}),
+						/* @__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 || !startable,
+									active: running,
+									onClick: () => press(() => cap.start({})),
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Play, { className: "h-4 w-4" })
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DishwasherIconButton, {
+									label: paused ? t("uiLibrary.dishwasher.resume", "Resume") : t("uiLibrary.dishwasher.pause", "Pause"),
+									busy: busy || !(running || paused),
+									active: paused,
+									onClick: () => press(() => paused ? cap.resume({}) : cap.pause({})),
+									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: busy || !(running || paused),
+									active: false,
+									onClick: () => press(() => cap.stop({})),
+									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: busy || display.powerOn === null,
+									active: display.powerOn === true,
+									onClick: () => {
+										const next = display.powerOn !== true;
+										press(() => cap.setPower({ on: 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.selectedProgram ?? "",
+					disabled: busy,
+					onChange: (e) => {
+						const program = e.target.value;
+						if (!program) return;
+						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.selectedProgram == null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+						value: "",
+						children: "—"
+					}), programs.map((p) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+						value: p,
+						children: featureLabel(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,
+						shown: link,
+						busy: busy || optionTogglesLocked,
+						onChange: (on) => void cap.setHalfLoad({ on })
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleRow, {
+						label: t("uiLibrary.dishwasher.hygienePlus", "Hygiene plus"),
+						checked: display.hygienePlus,
+						shown: link,
+						busy: busy || optionTogglesLocked,
+						onChange: (on) => void cap.setHygienePlus({ on })
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleRow, {
+						label: t("uiLibrary.dishwasher.extraDry", "Extra dry"),
+						checked: display.extraDry,
+						shown: link,
+						busy: busy || optionTogglesLocked,
+						onChange: (on) => void cap.setExtraDry({ on })
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleRow, {
+						label: t("uiLibrary.dishwasher.intensiveZone", "Intensive zone"),
+						checked: display.intensiveZone,
+						shown: link,
+						busy: busy || optionTogglesLocked,
+						onChange: (on) => void cap.setIntensiveZone({ on })
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleRow, {
+						label: t("uiLibrary.dishwasher.varioSpeedPlus", "VarioSpeed+"),
+						checked: display.varioSpeedPlus,
+						shown: link,
+						busy: busy || optionTogglesLocked,
+						onChange: (on) => void cap.setVarioSpeedPlus({ on })
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleRow, {
+						label: t("uiLibrary.dishwasher.childLock", "Child lock"),
+						checked: display.childLock,
+						shown: link,
+						busy,
+						onChange: (on) => void cap.setChildLock({ on })
+					})
+				]
+			})
+		]
+	});
+}
+/**
+* One boolean setting. `checked === null` is "the appliance has not said": on a reachable
+* appliance that means it does not offer the setting (hidden); on an unreachable one the
+* setting is shown but disabled and marked unknown — never as an unchecked box.
+*/
+function ToggleRow({ label, checked, shown, busy, onChange }) {
+	const t = useUiText();
+	if (checked === null && shown) return null;
+	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: checked === true,
+				"aria-checked": checked === null ? "mixed" : checked,
+				disabled: busy || checked === null,
+				onChange: (e) => {
+					onChange(e.target.checked);
+				},
+				onClick: (e) => {
+					e.stopPropagation();
+				},
+				className: "rounded border-border"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: label }),
+			checked === null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-foreground-subtle",
+				children: t("uiLibrary.dishwasher.unknownValue", "—")
+			})
+		]
+	});
+}
+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/appliance-control.tsx
+/**
+* Appliance card for a `DeviceType.Washer` / `DeviceType.Dryer` device.
+*
+* These appliances have no program surface: what is worth showing is whether
+* the cycle is running (the `running-state` cap), for how long, and what the
+* appliance draws right now (the `power-meter` cap). Both slices are read
+* straight from the device; neither is required.
+*   - ApplianceInlineControl (device-list row): the running badge round the
+*     drum icon, plus the live watts when there are any.
+*   - ApplianceHeroCard (device-detail hero): the drum (turning only while a
+*     cycle runs), the state, the phase, the dwell and the power.
+*
+* UNKNOWN IS NOT OFF (D393). `running: null` is drawn as "Unknown" and the
+* drum stays still and unbadged; a missing watt reading is a dash, never
+* "0 W". A slice that has not landed hides its row instead of faking a value.
+*/
+var KEYFRAMES = `
+@keyframes apl-tumble { to { transform: rotate(360deg) } }
+.apl-drum-run { animation: apl-tumble 3s linear infinite; }
+@media (prefers-reduced-motion: reduce) {
+  .apl-drum-run { animation: none !important; }
+}
+`;
+/** Whole watts, or a dash when the appliance has not reported a reading. */
+function formatWatts(power) {
+	return power === void 0 || !Number.isFinite(power) ? "—" : `${Math.round(power)} W`;
+}
+/** The state to a person: running / idle, or why there is none (unknown). */
+function applianceStateLabel(running, t) {
+	if (running === true) return {
+		label: t("uiLibrary.appliance.running", "Running"),
+		tone: "text-primary"
+	};
+	if (running === false) return {
+		label: t("uiLibrary.appliance.idle", "Idle"),
+		tone: "text-foreground"
+	};
+	return {
+		label: t("uiLibrary.appliance.unknown", "Unknown"),
+		tone: "text-foreground-subtle"
+	};
+}
+function dwellText(running, since, now, t) {
+	if (running !== true) return null;
+	const { duration } = runningStatusParts(running, since, null, now);
+	if (duration === void 0) return null;
+	return "minutes" in duration ? t("uiLibrary.appliance.forMinutes", "for {{count}} min", { count: duration.minutes }) : t("uiLibrary.appliance.forHours", "for {{count}} h", { count: duration.hours });
+}
+function useApplianceState(props) {
+	return {
+		running: useDeviceState(props.trpc, props.deviceId, (s) => s.runningState),
+		power: useDeviceState(props.trpc, props.deviceId, (s) => s.powerMeter)
+	};
+}
+/** The drum: a ring with a few items in it, turning only while a cycle runs. */
+function Drum({ running }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"aria-hidden": "true",
+		"data-testid": "appliance-drum",
+		"data-running": running === true ? "running" : running === false ? "idle" : "unknown",
+		className: "relative flex h-28 w-28 shrink-0 items-center justify-center rounded-full border-2 border-border bg-surface-hover",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: cn("relative h-20 w-20 rounded-full border-2", running === true ? "apl-drum-run border-primary" : "border-border"),
+			"data-testid": "appliance-drum-ring",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "absolute left-2 top-4 h-3 w-3 rounded-full bg-primary/40" }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "absolute bottom-3 right-3 h-4 w-4 rounded-full bg-info/40" }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "absolute bottom-4 left-4 h-2.5 w-2.5 rounded-full bg-foreground-subtle/40" })
+			]
+		})
+	});
+}
+function ApplianceHeroCard(props) {
+	const t = useUiText();
+	const { running, power } = useApplianceState(props);
+	const state = running?.running ?? null;
+	const meta = applianceStateLabel(state, t);
+	const phase = running?.phase?.trim() ?? "";
+	const dwell = running === void 0 ? null : dwellText(state, running.since, Date.now(), t);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex items-center gap-4 rounded-lg border border-border bg-surface p-4",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: KEYFRAMES }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Drum, { running: state }),
+			/* @__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-baseline gap-x-2",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							"data-testid": "appliance-state",
+							className: cn("text-3xl font-semibold", meta.tone),
+							children: meta.label
+						}), dwell !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-sm tabular-nums text-foreground-subtle",
+							children: dwell
+						})]
+					}),
+					phase !== "" && state !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-sm text-foreground-subtle",
+						children: phase
+					}),
+					power !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						"data-testid": "appliance-power",
+						className: "inline-flex items-center gap-1 text-sm tabular-nums text-foreground-muted",
+						title: power.power === void 0 ? t("uiLibrary.appliance.powerUnknown", "Power unknown") : void 0,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Zap, {
+							className: "h-3.5 w-3.5",
+							"aria-hidden": true
+						}), formatWatts(power.power)]
+					})
+				]
+			})
+		]
+	});
+}
+function ApplianceInlineControl(props) {
+	const { running, power } = useApplianceState(props);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "inline-flex items-center gap-1.5 max-w-full",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RunningBadge, {
+			running: running?.running ?? null,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WashingMachine, {
+				className: "h-4 w-4 text-foreground-muted",
+				"aria-hidden": true
+			})
+		}), power !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "text-xs tabular-nums text-foreground-subtle",
+			children: formatWatts(power.power)
+		})]
+	});
+}
+//#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/thermostat-hero-card.tsx
 /**
 * Default temperature range (Celsius) used to normalize the setpoint fraction
@@ -57733,10 +58259,18 @@ var CONTROL_KIND_COMPONENTS = {
 		InlineControl: PetFountainInlineControl,
 		HeroCard: PetFountainHeroCard
 	},
+	heater: {
+		InlineControl: HeaterInlineControl,
+		HeroCard: HeaterHeroCard
+	},
 	dishwasher: {
 		InlineControl: DishwasherInlineControl,
 		HeroCard: DishwasherHeroCard
 	},
+	appliance: {
+		InlineControl: ApplianceInlineControl,
+		HeroCard: ApplianceHeroCard
+	},
 	script: {
 		InlineControl: ScriptInlineControl,
 		HeroCard: ScriptHeroCard
@@ -57816,6 +58350,7 @@ var CONTROL_FILLS = {
 	[_camstack_types.DeviceType.Image]: false,
 	[_camstack_types.DeviceType.PetFeeder]: false,
 	[_camstack_types.DeviceType.PetFountain]: false,
+	[_camstack_types.DeviceType.Heater]: false,
 	[_camstack_types.DeviceType.Dishwasher]: false,
 	[_camstack_types.DeviceType.Washer]: false,
 	[_camstack_types.DeviceType.Dryer]: false
@@ -73823,6 +74358,7 @@ exports.ThermostatInlineControl = ThermostatInlineControl;
 exports.TimeSeriesChart = TimeSeriesChart;
 exports.TimelineSlider = TimelineSlider;
 exports.Timer = Timer;
+exports.TimerOff = TimerOff;
 exports.TimezoneSelector = TimezoneSelector;
 exports.ToggleLeft = ToggleLeft;
 exports.ToggleRight = ToggleRight;
@@ -74270,9 +74806,7 @@ exports.useAddonsGetLastRestart = useAddonsGetLastRestart;
 exports.useAddonsGetLogs = useAddonsGetLogs;
 exports.useAddonsGetPackageDocs = useAddonsGetPackageDocs;
 exports.useAddonsGetVersions = useAddonsGetVersions;
-exports.useAddonsInstallFromWorkspace = useAddonsInstallFromWorkspace;
 exports.useAddonsInstallPackage = useAddonsInstallPackage;
-exports.useAddonsIsWorkspaceAvailable = useAddonsIsWorkspaceAvailable;
 exports.useAddonsList = useAddonsList;
 exports.useAddonsListCapabilityProviders = useAddonsListCapabilityProviders;
 exports.useAddonsListFrameworkPackages = useAddonsListFrameworkPackages;
@@ -74280,7 +74814,6 @@ exports.useAddonsListInstallations = useAddonsListInstallations;
 exports.useAddonsListJobs = useAddonsListJobs;
 exports.useAddonsListPackages = useAddonsListPackages;
 exports.useAddonsListUpdates = useAddonsListUpdates;
-exports.useAddonsListWorkspacePackages = useAddonsListWorkspacePackages;
 exports.useAddonsOnAddonLogs = useAddonsOnAddonLogs;
 exports.useAddonsReloadPackages = useAddonsReloadPackages;
 exports.useAddonsRestartAddon = useAddonsRestartAddon;
@@ -74649,6 +75182,9 @@ exports.useDeviceProviderTestCreationField = useDeviceProviderTestCreationField;
 exports.useDeviceProxy = useDeviceProxy;
 exports.useDeviceProxy$1 = useDeviceProxy;
 exports.useDeviceQuickDetailOpen = useDeviceQuickDetailOpen;
+exports.useDeviceRunsGetCurrentRun = useDeviceRunsGetCurrentRun;
+exports.useDeviceRunsGetRun = useDeviceRunsGetRun;
+exports.useDeviceRunsListRuns = useDeviceRunsListRuns;
 exports.useDeviceSeriesList = useDeviceSeriesList;
 exports.useDeviceSnapshot = useDeviceSnapshot;
 exports.useDeviceSnapshotImage = useDeviceSnapshotImage;
@@ -74717,6 +75253,10 @@ exports.useFanControlSetDirection = useFanControlSetDirection;
 exports.useFanControlSetOscillating = useFanControlSetOscillating;
 exports.useFanControlSetPercentage = useFanControlSetPercentage;
 exports.useFanControlSetPreset = useFanControlSetPreset;
+exports.useFanPresetsApplyPreset = useFanPresetsApplyPreset;
+exports.useFanPresetsCapturePreset = useFanPresetsCapturePreset;
+exports.useFanPresetsGetPresets = useFanPresetsGetPresets;
+exports.useFanPresetsSetPresets = useFanPresetsSetPresets;
 exports.useFeatureProbeGetStatus = useFeatureProbeGetStatus;
 exports.useFloodGetStatus = useFloodGetStatus;
 exports.useGasGetStatus = useGasGetStatus;
@@ -75518,6 +76058,9 @@ exports.useTerminalSessionSetInstanceEnabled = useTerminalSessionSetInstanceEnab
 exports.useTerminalSessionUpdateInstance = useTerminalSessionUpdateInstance;
 exports.useTerminalSessionWriteInput = useTerminalSessionWriteInput;
 exports.useThemeMode = require_theme_index.useThemeMode$1;
+exports.useTimedRunCancel = useTimedRunCancel;
+exports.useTimedRunGetStatus = useTimedRunGetStatus;
+exports.useTimedRunRunFor = useTimedRunRunFor;
 exports.useToastOnToast = useToastOnToast;
 exports.useTrainingCanaryResult = useTrainingCanaryResult;
 exports.useTrainingCancelJob = useTrainingCancelJob;