@camstack/ui-library 1.2.368 → 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) => {
@@ -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`. */
@@ -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.
@@ -54172,6 +54350,7 @@ var KEYFRAMES$2 = `
   .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;
@@ -54336,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",
@@ -54560,795 +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/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$1 = `
-@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$1 }),
-			/* @__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/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: [
@@ -55490,347 +55094,1080 @@ function AcPanel({ trpc, deviceId, layout, optimistic }) {
 							}
 						}
 					}),
-					display.availableFanModes.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CompactSelect, {
-						label: t("uiLibrary.acPanel.fan", "Fan"),
-						icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Wind, { className: "h-4 w-4 text-sky-500" }),
-						value: display.fanMode,
-						options: display.availableFanModes.map((f) => ({
-							value: f,
-							label: fanLabel(f)
-						})),
-						disabled: busy,
-						onChange: (v) => {
-							applyOptimistic({ fanMode: v });
-							cap.setFanMode({ fanMode: v });
-						}
+					display.availableFanModes.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CompactSelect, {
+						label: t("uiLibrary.acPanel.fan", "Fan"),
+						icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Wind, { className: "h-4 w-4 text-sky-500" }),
+						value: display.fanMode,
+						options: display.availableFanModes.map((f) => ({
+							value: f,
+							label: fanLabel(f)
+						})),
+						disabled: busy,
+						onChange: (v) => {
+							applyOptimistic({ fanMode: v });
+							cap.setFanMode({ fanMode: v });
+						}
+					}),
+					display.availablePresets.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CompactSelect, {
+						label: t("uiLibrary.acPanel.preset", "Preset"),
+						icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CurrentPresetIcon, { className: "h-4 w-4 text-emerald-500" }),
+						value: display.preset,
+						options: display.availablePresets.map((p) => ({
+							value: p,
+							label: fanLabel(p)
+						})),
+						disabled: busy,
+						onChange: (v) => {
+							applyOptimistic({ preset: v });
+							cap.setPreset({ preset: v });
+						}
+					})
+				]
+			}),
+			(showVSwing || showHSwing) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Field, {
+				label: t("uiLibrary.acPanel.swing", "Swing"),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "grid grid-cols-2 gap-1",
+					children: [showVSwing && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SwingToggle, {
+						axis: "vertical",
+						on: display.swingVertical ?? false,
+						busy,
+						onToggle: (next) => {
+							applyOptimistic({ swingVertical: next });
+							cap.setSwingVertical({ on: next });
+						}
+					}), showHSwing && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SwingToggle, {
+						axis: "horizontal",
+						on: display.swingHorizontal ?? false,
+						busy,
+						onToggle: (next) => {
+							applyOptimistic({ swingHorizontal: next });
+							cap.setSwingHorizontal({ on: next });
+						}
+					})]
+				})
+			})
+		]
+	});
+}
+/** Labelled control group — a small uppercase header above its control. */
+function Field({ label, children }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "relative z-10 flex flex-col gap-1",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "text-[10px] font-semibold uppercase tracking-wider text-foreground-subtle",
+			children: label
+		}), children]
+	});
+}
+function ModeIcon({ mode, heatingOnly = false, className }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(heatingOnly && mode === "heat" ? Heater : MODE_ICON[mode], {
+		className,
+		"aria-hidden": true
+	});
+}
+/** Compact labelled dropdown — a leading icon + native `<select>` + chevron,
+*  used for the Mode / Fan / Preset selectors so all three fit in one row. */
+function CompactSelect({ label, icon, value, options, disabled, onChange }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex min-w-0 flex-col gap-1",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "text-[10px] font-semibold uppercase tracking-wider text-foreground-subtle",
+			children: label
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: cn("flex items-center gap-1 overflow-hidden rounded-lg border border-border/60 bg-surface-subtle px-1.5 py-1.5 has-[:focus-visible]:border-primary", disabled && "opacity-40"),
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "flex shrink-0",
+					children: icon
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
+					"aria-label": label,
+					value,
+					disabled,
+					onChange: (e) => {
+						e.stopPropagation();
+						if (!disabled) onChange(e.target.value);
+					},
+					className: "min-w-0 flex-1 cursor-pointer appearance-none truncate bg-transparent text-xs font-medium text-foreground outline-none",
+					children: options.map((o) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+						value: o.value,
+						children: o.label
+					}, o.value))
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronDown, { className: "h-3 w-3 shrink-0 text-foreground-subtle" })
+			]
+		})]
+	});
+}
+/** Circular ± button for the target. */
+function RoundStep({ label, symbol, disabled, onClick }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		"aria-label": label,
+		disabled,
+		onClick,
+		className: cn("flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-border bg-surface text-lg leading-none text-foreground-subtle transition-colors hover:bg-surface-hover hover:text-foreground active:scale-95", disabled && "opacity-40 cursor-not-allowed"),
+		children: symbol
+	});
+}
+/** Setpoint track. Drag previews; the command is sent when the pointer is released. */
+function RangeTrack({ value, min, max, step, accent, disabled, label, onPreview, onCommit }) {
+	const trackRef = (0, react$1.useRef)(null);
+	const draggingRef = (0, react$1.useRef)(false);
+	const [draft, setDraft] = (0, react$1.useState)(null);
+	const shown = draft ?? value;
+	const pct = `${Math.min(1, Math.max(0, (shown - min) / (max - min))) * 100}%`;
+	const tempAt = (clientX) => {
+		const el = trackRef.current;
+		if (el === null) return value;
+		const rect = el.getBoundingClientRect();
+		if (rect.width <= 0) return value;
+		return climateTargetFromFraction((clientX - rect.left) / rect.width, {
+			min,
+			max
+		}, step);
+	};
+	const onPointerDown = (event) => {
+		if (disabled) return;
+		event.stopPropagation();
+		event.preventDefault();
+		draggingRef.current = true;
+		if (typeof event.currentTarget.setPointerCapture === "function") event.currentTarget.setPointerCapture(event.pointerId);
+		const next = tempAt(event.clientX);
+		setDraft(next);
+		onPreview(next);
+	};
+	const onPointerMove = (event) => {
+		if (disabled || !draggingRef.current) return;
+		event.stopPropagation();
+		const next = tempAt(event.clientX);
+		setDraft(next);
+		onPreview(next);
+	};
+	const endDrag = (event) => {
+		if (!draggingRef.current) return;
+		event.stopPropagation();
+		draggingRef.current = false;
+		const next = tempAt(event.clientX);
+		setDraft(null);
+		if (event.currentTarget.hasPointerCapture?.(event.pointerId) === true) event.currentTarget.releasePointerCapture(event.pointerId);
+		onCommit(next);
+	};
+	const onKeyDown = (event) => {
+		if (disabled) return;
+		const current = draft ?? value;
+		if (event.key === "ArrowRight" || event.key === "ArrowUp") {
+			event.preventDefault();
+			onCommit(nextClimateTarget(current, 1, {
+				tempStep: step,
+				minTemp: min,
+				maxTemp: max
+			}));
+		} else if (event.key === "ArrowLeft" || event.key === "ArrowDown") {
+			event.preventDefault();
+			onCommit(nextClimateTarget(current, -1, {
+				tempStep: step,
+				minTemp: min,
+				maxTemp: max
+			}));
+		} else if (event.key === "Home") {
+			event.preventDefault();
+			onCommit(min);
+		} else if (event.key === "End") {
+			event.preventDefault();
+			onCommit(max);
+		}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref: trackRef,
+		role: "slider",
+		"aria-label": label,
+		"aria-valuemin": min,
+		"aria-valuemax": max,
+		"aria-valuenow": shown,
+		"aria-disabled": disabled,
+		tabIndex: disabled ? -1 : 0,
+		onPointerDown,
+		onPointerMove,
+		onPointerUp: endDrag,
+		onPointerCancel: endDrag,
+		onKeyDown,
+		className: cn("mt-1 w-full touch-none select-none py-2", disabled ? "cursor-not-allowed opacity-40" : "cursor-ew-resize"),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "relative h-1.5 w-full rounded-full bg-surface-subtle",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "absolute inset-y-0 left-0 rounded-full",
+				style: {
+					width: pct,
+					background: accent
+				}
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "absolute top-1/2 h-3.5 w-3.5 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-surface shadow",
+				style: {
+					left: pct,
+					background: accent
+				}
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "mt-0.5 flex justify-between text-[9px] tabular-nums text-foreground-subtle",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [min, "°"] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [max, "°"] })]
+		})]
+	});
+}
+/**
+* Animated centerpiece. `fan_only` renders a spinning fan; `off` a dim static
+* vent; every active mode renders drifting particles that FALL (cool/dry/auto)
+* or RISE (heat), with a horizontal sweep overlaid when a swing axis is active.
+*/
+function AirflowViz({ mode, accent, periodSec, swaying, forceRising = false }) {
+	const columns = [
+		0,
+		1,
+		2,
+		3,
+		4,
+		5
+	];
+	const rising = forceRising || mode === "heat";
+	const isDroplet = mode === "dry";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"aria-hidden": true,
+		className: "absolute inset-0 overflow-hidden",
+		children: mode === "off" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "flex h-full items-center justify-center gap-2 opacity-30",
+			children: columns.map((i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "h-8 w-1 rounded-full bg-foreground-subtle opacity-40" }, i))
+		}) : mode === "fan_only" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "flex h-full items-center justify-center",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FanBlades, {
+				color: accent,
+				periodSec: Math.max(.5, periodSec * .7),
+				size: 56
+			})
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			"data-testid": forceRising ? "climate-heat-rise" : void 0,
+			className: cn("acv-sway-wrap absolute inset-0", swaying && "acv-sway"),
+			style: swaying ? { animation: "acv-sway 2.6s ease-in-out infinite" } : void 0,
+			children: columns.map((i) => {
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "acv-streak absolute rounded-full",
+					style: {
+						left: `${8 + i * 15}%`,
+						width: isDroplet ? "0.4rem" : "0.3rem",
+						height: isDroplet ? "0.4rem" : "1.9rem",
+						background: accent,
+						boxShadow: `0 0 6px ${accent}`,
+						animationName: rising ? "acv-rise" : "acv-fall",
+						animationTimingFunction: "linear",
+						animationIterationCount: "infinite",
+						animationDuration: `${periodSec}s`,
+						animationDelay: `${i % 3 * (periodSec / 3) + i * .05}s`
+					}
+				}, i);
+			})
+		})
+	});
+}
+/** Still radiator fins — the off state of a heating-only climate. */
+function RadiatorFins() {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-testid": "climate-radiator",
+		"aria-hidden": true,
+		className: "flex h-full items-end justify-center gap-1.5 px-8 pb-3 opacity-40",
+		children: [
+			0,
+			1,
+			2,
+			3,
+			4,
+			5,
+			6
+		].map((i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "h-10 w-1.5 rounded-t-full bg-foreground-subtle" }, i))
+	});
+}
+/** Big spinning fan for `fan_only` mode. */
+function FanBlades({ color, periodSec, size }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+		width: size,
+		height: size,
+		viewBox: "0 0 100 100",
+		className: "acv-fan",
+		style: {
+			animation: `acv-spin ${periodSec}s linear infinite`,
+			transformOrigin: "50% 50%"
+		},
+		"aria-hidden": true,
+		children: [[
+			0,
+			120,
+			240
+		].map((deg) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+			d: "M50 50 C 58 30, 78 26, 84 12 C 66 20, 54 34, 50 50 Z",
+			fill: color,
+			opacity: .85,
+			transform: `rotate(${deg} 50 50)`
+		}, deg)), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+			cx: "50",
+			cy: "50",
+			r: "7",
+			fill: color
+		})]
+	});
+}
+/** Swing axis toggle — a card with a MoveVertical/Horizontal glyph that
+*  oscillates along its axis when on. On/off is non-destructive → plain tap. */
+function SwingToggle({ axis, on, busy, onToggle }) {
+	const t = useUiText();
+	const label = axis === "vertical" ? t("uiLibrary.acPanel.vertical", "Vertical") : t("uiLibrary.acPanel.horizontal", "Horizontal");
+	const Icon = axis === "vertical" ? MoveVertical : MoveHorizontal;
+	const anim = axis === "vertical" ? "acv-swing-v" : "acv-swing-h";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		type: "button",
+		"aria-label": t("uiLibrary.acPanel.swingAxis", "{{axis}} swing", { axis: label }),
+		"aria-pressed": on,
+		disabled: busy,
+		onClick: () => {
+			if (!busy) onToggle(!on);
+		},
+		className: cn("flex items-center justify-center gap-2 rounded-lg border px-2 py-1.5 text-xs font-medium transition-colors", on ? "border-transparent bg-indigo-400 text-indigo-950 shadow-sm" : "border-border/60 bg-surface-subtle text-foreground-subtle hover:bg-surface-hover hover:text-foreground", busy && "opacity-40 cursor-not-allowed"),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+			className: "acv-swing h-4 w-4",
+			"aria-hidden": true,
+			style: on ? { animation: `${anim} 1.4s ease-in-out infinite` } : void 0
+		}), label]
+	});
+}
+//#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 })
 					}),
-					display.availablePresets.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CompactSelect, {
-						label: t("uiLibrary.acPanel.preset", "Preset"),
-						icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CurrentPresetIcon, { className: "h-4 w-4 text-emerald-500" }),
-						value: display.preset,
-						options: display.availablePresets.map((p) => ({
-							value: p,
-							label: fanLabel(p)
-						})),
-						disabled: busy,
-						onChange: (v) => {
-							applyOptimistic({ preset: v });
-							cap.setPreset({ preset: v });
-						}
+					/* @__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 })
 					})
 				]
-			}),
-			(showVSwing || showHSwing) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Field, {
-				label: t("uiLibrary.acPanel.swing", "Swing"),
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "grid grid-cols-2 gap-1",
-					children: [showVSwing && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SwingToggle, {
-						axis: "vertical",
-						on: display.swingVertical ?? false,
-						busy,
-						onToggle: (next) => {
-							applyOptimistic({ swingVertical: next });
-							cap.setSwingVertical({ on: next });
-						}
-					}), showHSwing && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SwingToggle, {
-						axis: "horizontal",
-						on: display.swingHorizontal ?? false,
-						busy,
-						onToggle: (next) => {
-							applyOptimistic({ swingHorizontal: next });
-							cap.setSwingHorizontal({ on: next });
-						}
-					})]
-				})
 			})
 		]
 	});
 }
-/** Labelled control group — a small uppercase header above its control. */
-function Field({ label, children }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "relative z-10 flex flex-col gap-1",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "text-[10px] font-semibold uppercase tracking-wider text-foreground-subtle",
-			children: label
-		}), children]
+/**
+* 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 ModeIcon({ mode, heatingOnly = false, className }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(heatingOnly && mode === "heat" ? Heater : MODE_ICON[mode], {
-		className,
-		"aria-hidden": true
+function DishwasherInlineControl(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DishwasherPanel, {
+		...props,
+		layout: "compact"
 	});
 }
-/** Compact labelled dropdown — a leading icon + native `<select>` + chevron,
-*  used for the Mode / Fan / Preset selectors so all three fit in one row. */
-function CompactSelect({ label, icon, value, options, disabled, onChange }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "flex min-w-0 flex-col gap-1",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "text-[10px] font-semibold uppercase tracking-wider text-foreground-subtle",
-			children: label
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: cn("flex items-center gap-1 overflow-hidden rounded-lg border border-border/60 bg-surface-subtle px-1.5 py-1.5 has-[:focus-visible]:border-primary", disabled && "opacity-40"),
-			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "flex shrink-0",
-					children: icon
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
-					"aria-label": label,
-					value,
-					disabled,
-					onChange: (e) => {
-						e.stopPropagation();
-						if (!disabled) onChange(e.target.value);
-					},
-					className: "min-w-0 flex-1 cursor-pointer appearance-none truncate bg-transparent text-xs font-medium text-foreground outline-none",
-					children: options.map((o) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-						value: o.value,
-						children: o.label
-					}, o.value))
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronDown, { className: "h-3 w-3 shrink-0 text-foreground-subtle" })
-			]
-		})]
+function DishwasherHeroCard(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DishwasherPanel, {
+		...props,
+		layout: "full"
 	});
 }
-/** Circular ± button for the target. */
-function RoundStep({ label, symbol, disabled, onClick }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-		type: "button",
-		"aria-label": label,
-		disabled,
-		onClick,
-		className: cn("flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-border bg-surface text-lg leading-none text-foreground-subtle transition-colors hover:bg-surface-hover hover:text-foreground active:scale-95", disabled && "opacity-40 cursor-not-allowed"),
-		children: symbol
-	});
+//#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; }
 }
-/** Setpoint track. Drag previews; the command is sent when the pointer is released. */
-function RangeTrack({ value, min, max, step, accent, disabled, label, onPreview, onCommit }) {
-	const trackRef = (0, react$1.useRef)(null);
-	const draggingRef = (0, react$1.useRef)(false);
-	const [draft, setDraft] = (0, react$1.useState)(null);
-	const shown = draft ?? value;
-	const pct = `${Math.min(1, Math.max(0, (shown - min) / (max - min))) * 100}%`;
-	const tempAt = (clientX) => {
-		const el = trackRef.current;
-		if (el === null) return value;
-		const rect = el.getBoundingClientRect();
-		if (rect.width <= 0) return value;
-		return climateTargetFromFraction((clientX - rect.left) / rect.width, {
-			min,
-			max
-		}, step);
-	};
-	const onPointerDown = (event) => {
-		if (disabled) return;
-		event.stopPropagation();
-		event.preventDefault();
-		draggingRef.current = true;
-		if (typeof event.currentTarget.setPointerCapture === "function") event.currentTarget.setPointerCapture(event.pointerId);
-		const next = tempAt(event.clientX);
-		setDraft(next);
-		onPreview(next);
+`;
+/** 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"
 	};
-	const onPointerMove = (event) => {
-		if (disabled || !draggingRef.current) return;
-		event.stopPropagation();
-		const next = tempAt(event.clientX);
-		setDraft(next);
-		onPreview(next);
+	if (running === false) return {
+		label: t("uiLibrary.appliance.idle", "Idle"),
+		tone: "text-foreground"
 	};
-	const endDrag = (event) => {
-		if (!draggingRef.current) return;
-		event.stopPropagation();
-		draggingRef.current = false;
-		const next = tempAt(event.clientX);
-		setDraft(null);
-		if (event.currentTarget.hasPointerCapture?.(event.pointerId) === true) event.currentTarget.releasePointerCapture(event.pointerId);
-		onCommit(next);
+	return {
+		label: t("uiLibrary.appliance.unknown", "Unknown"),
+		tone: "text-foreground-subtle"
 	};
-	const onKeyDown = (event) => {
-		if (disabled) return;
-		const current = draft ?? value;
-		if (event.key === "ArrowRight" || event.key === "ArrowUp") {
-			event.preventDefault();
-			onCommit(nextClimateTarget(current, 1, {
-				tempStep: step,
-				minTemp: min,
-				maxTemp: max
-			}));
-		} else if (event.key === "ArrowLeft" || event.key === "ArrowDown") {
-			event.preventDefault();
-			onCommit(nextClimateTarget(current, -1, {
-				tempStep: step,
-				minTemp: min,
-				maxTemp: max
-			}));
-		} else if (event.key === "Home") {
-			event.preventDefault();
-			onCommit(min);
-		} else if (event.key === "End") {
-			event.preventDefault();
-			onCommit(max);
-		}
+}
+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)
 	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		ref: trackRef,
-		role: "slider",
-		"aria-label": label,
-		"aria-valuemin": min,
-		"aria-valuemax": max,
-		"aria-valuenow": shown,
-		"aria-disabled": disabled,
-		tabIndex: disabled ? -1 : 0,
-		onPointerDown,
-		onPointerMove,
-		onPointerUp: endDrag,
-		onPointerCancel: endDrag,
-		onKeyDown,
-		className: cn("mt-1 w-full touch-none select-none py-2", disabled ? "cursor-not-allowed opacity-40" : "cursor-ew-resize"),
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "relative h-1.5 w-full rounded-full bg-surface-subtle",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "absolute inset-y-0 left-0 rounded-full",
-				style: {
-					width: pct,
-					background: accent
-				}
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "absolute top-1/2 h-3.5 w-3.5 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-surface shadow",
-				style: {
-					left: pct,
-					background: accent
-				}
-			})]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "mt-0.5 flex justify-between text-[9px] tabular-nums text-foreground-subtle",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [min, "°"] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [max, "°"] })]
-		})]
-	});
 }
-/**
-* Animated centerpiece. `fan_only` renders a spinning fan; `off` a dim static
-* vent; every active mode renders drifting particles that FALL (cool/dry/auto)
-* or RISE (heat), with a horizontal sweep overlaid when a swing axis is active.
-*/
-function AirflowViz({ mode, accent, periodSec, swaying, forceRising = false }) {
-	const columns = [
-		0,
-		1,
-		2,
-		3,
-		4,
-		5
-	];
-	const rising = forceRising || mode === "heat";
-	const isDroplet = mode === "dry";
+/** 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,
-		className: "absolute inset-0 overflow-hidden",
-		children: mode === "off" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "flex h-full items-center justify-center gap-2 opacity-30",
-			children: columns.map((i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "h-8 w-1 rounded-full bg-foreground-subtle opacity-40" }, i))
-		}) : mode === "fan_only" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "flex h-full items-center justify-center",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FanBlades, {
-				color: accent,
-				periodSec: Math.max(.5, periodSec * .7),
-				size: 56
-			})
-		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			"data-testid": forceRising ? "climate-heat-rise" : void 0,
-			className: cn("acv-sway-wrap absolute inset-0", swaying && "acv-sway"),
-			style: swaying ? { animation: "acv-sway 2.6s ease-in-out infinite" } : void 0,
-			children: columns.map((i) => {
-				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "acv-streak absolute rounded-full",
-					style: {
-						left: `${8 + i * 15}%`,
-						width: isDroplet ? "0.4rem" : "0.3rem",
-						height: isDroplet ? "0.4rem" : "1.9rem",
-						background: accent,
-						boxShadow: `0 0 6px ${accent}`,
-						animationName: rising ? "acv-rise" : "acv-fall",
-						animationTimingFunction: "linear",
-						animationIterationCount: "infinite",
-						animationDuration: `${periodSec}s`,
-						animationDelay: `${i % 3 * (periodSec / 3) + i * .05}s`
-					}
-				}, i);
-			})
+		"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" })
+			]
 		})
 	});
 }
-/** Still radiator fins — the off state of a heating-only climate. */
-function RadiatorFins() {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		"data-testid": "climate-radiator",
-		"aria-hidden": true,
-		className: "flex h-full items-end justify-center gap-1.5 px-8 pb-3 opacity-40",
+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: [
-			0,
-			1,
-			2,
-			3,
-			4,
-			5,
-			6
-		].map((i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "h-10 w-1.5 rounded-t-full bg-foreground-subtle" }, i))
+			/* @__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)]
+					})
+				]
+			})
+		]
 	});
 }
-/** Big spinning fan for `fan_only` mode. */
-function FanBlades({ color, periodSec, size }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
-		width: size,
-		height: size,
-		viewBox: "0 0 100 100",
-		className: "acv-fan",
-		style: {
-			animation: `acv-spin ${periodSec}s linear infinite`,
-			transformOrigin: "50% 50%"
-		},
-		"aria-hidden": true,
-		children: [[
-			0,
-			120,
-			240
-		].map((deg) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-			d: "M50 50 C 58 30, 78 26, 84 12 C 66 20, 54 34, 50 50 Z",
-			fill: color,
-			opacity: .85,
-			transform: `rotate(${deg} 50 50)`
-		}, deg)), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
-			cx: "50",
-			cy: "50",
-			r: "7",
-			fill: color
+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)
 		})]
 	});
 }
-/** Swing axis toggle — a card with a MoveVertical/Horizontal glyph that
-*  oscillates along its axis when on. On/off is non-destructive → plain tap. */
-function SwingToggle({ axis, on, busy, onToggle }) {
+//#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 label = axis === "vertical" ? t("uiLibrary.acPanel.vertical", "Vertical") : t("uiLibrary.acPanel.horizontal", "Horizontal");
-	const Icon = axis === "vertical" ? MoveVertical : MoveHorizontal;
-	const anim = axis === "vertical" ? "acv-swing-v" : "acv-swing-h";
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-		type: "button",
-		"aria-label": t("uiLibrary.acPanel.swingAxis", "{{axis}} swing", { axis: label }),
-		"aria-pressed": on,
-		disabled: busy,
-		onClick: () => {
-			if (!busy) onToggle(!on);
-		},
-		className: cn("flex items-center justify-center gap-2 rounded-lg border px-2 py-1.5 text-xs font-medium transition-colors", on ? "border-transparent bg-indigo-400 text-indigo-950 shadow-sm" : "border-border/60 bg-surface-subtle text-foreground-subtle hover:bg-surface-hover hover:text-foreground", busy && "opacity-40 cursor-not-allowed"),
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
-			className: "acv-swing h-4 w-4",
-			"aria-hidden": true,
-			style: on ? { animation: `${anim} 1.4s ease-in-out infinite` } : void 0
-		}), label]
+	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
@@ -57922,6 +58259,10 @@ var CONTROL_KIND_COMPONENTS = {
 		InlineControl: PetFountainInlineControl,
 		HeroCard: PetFountainHeroCard
 	},
+	heater: {
+		InlineControl: HeaterInlineControl,
+		HeroCard: HeaterHeroCard
+	},
 	dishwasher: {
 		InlineControl: DishwasherInlineControl,
 		HeroCard: DishwasherHeroCard
@@ -58009,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
@@ -74016,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;
@@ -74910,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;
@@ -75711,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;