@camstack/ui-library 1.2.376 → 1.2.377

package/dist/index.cjs

@@ -3471,6 +3471,58 @@ var RefreshCw = require_createLucideIcon.createLucideIcon("refresh-cw", [
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
+var Repeat1 = require_createLucideIcon.createLucideIcon("repeat-1", [
+	["path", {
+		d: "m17 2 4 4-4 4",
+		key: "nntrym"
+	}],
+	["path", {
+		d: "M3 11v-1a4 4 0 0 1 4-4h14",
+		key: "84bu3i"
+	}],
+	["path", {
+		d: "m7 22-4-4 4-4",
+		key: "1wqhfi"
+	}],
+	["path", {
+		d: "M21 13v1a4 4 0 0 1-4 4H3",
+		key: "1rx37r"
+	}],
+	["path", {
+		d: "M11 10h1v4",
+		key: "70cz1p"
+	}]
+]);
+/**
+* @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 Repeat = require_createLucideIcon.createLucideIcon("repeat", [
+	["path", {
+		d: "m17 2 4 4-4 4",
+		key: "nntrym"
+	}],
+	["path", {
+		d: "M3 11v-1a4 4 0 0 1 4-4h14",
+		key: "84bu3i"
+	}],
+	["path", {
+		d: "m7 22-4-4 4-4",
+		key: "1wqhfi"
+	}],
+	["path", {
+		d: "M21 13v1a4 4 0 0 1-4 4H3",
+		key: "1rx37r"
+	}]
+]);
+/**
+* @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 RotateCcw = require_createLucideIcon.createLucideIcon("rotate-ccw", [["path", {
 	d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8",
 	key: "1357e3"
@@ -3846,6 +3898,34 @@ var Ship = require_createLucideIcon.createLucideIcon("ship", [
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
+var Shuffle = require_createLucideIcon.createLucideIcon("shuffle", [
+	["path", {
+		d: "m18 14 4 4-4 4",
+		key: "10pe0f"
+	}],
+	["path", {
+		d: "m18 2 4 4-4 4",
+		key: "pucp1d"
+	}],
+	["path", {
+		d: "M2 18h1.973a4 4 0 0 0 3.3-1.7l5.454-8.6a4 4 0 0 1 3.3-1.7H22",
+		key: "1ailkh"
+	}],
+	["path", {
+		d: "M2 6h1.972a4 4 0 0 1 3.6 2.2",
+		key: "km57vx"
+	}],
+	["path", {
+		d: "M22 18h-6.041a4 4 0 0 1-3.3-1.8l-.359-.45",
+		key: "os18l9"
+	}]
+]);
+/**
+* @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 Siren = require_createLucideIcon.createLucideIcon("siren", [
 	["path", {
 		d: "M7 18v-6a5 5 0 1 1 10 0v6",
@@ -5994,7 +6074,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-DXwPEKdJ.cjs")).then((module) => {
+	pending ??= Promise.resolve().then(() => require("./icons-BWpVdTJu.cjs")).then((module) => {
 		fullTable = module;
 		publish();
 	}, (error) => {
@@ -27761,6 +27841,92 @@ function NavigationPanel({ deviceId }) {
 	});
 }
 //#endregion
+//#region src/composites/cap-settings/PowerMeterLine.tsx
+/**
+* PowerMeterLine — the ONE place a device's electrical draw is shown (D1004):
+* a slim line directly under the device page's hero card, for every device
+* bound to the `power-meter` capability, whatever its type. The cap declares
+* `ui: { kind:'widget', widgetId:'host/power-meter-line', placement:'hero' }`;
+* no device-controls hero card draws watts itself
+* (`scripts/check-no-hero-self-drawn-power.ts`).
+*
+* A reading the device never reported is not drawn as a number: no slice, or
+* a slice with neither power nor energy, renders nothing; a missing field
+* (power but no energy, or the reverse) is simply absent, never `0` or `NaN`.
+*/
+/** A finite number, or null: the one gate between a slice field and the screen. */
+function known(value) {
+	return typeof value === "number" && Number.isFinite(value) ? value : null;
+}
+/** Whole watts below a kilowatt, one decimal above. */
+function formatPowerWatts(watts) {
+	return Math.abs(watts) >= 1e3 ? {
+		value: (watts / 1e3).toFixed(1),
+		unit: "kW"
+	} : {
+		value: String(Math.round(watts)),
+		unit: "W"
+	};
+}
+/** Two decimals under 100 kWh, whole kWh above. */
+function formatEnergyKwh(kwh) {
+	return Math.abs(kwh) >= 100 ? String(Math.round(kwh)) : kwh.toFixed(2);
+}
+function PowerMeterLine({ deviceId }) {
+	const t = useUiText();
+	const { slice } = useDeviceCapability({
+		trpc: useSystem().trpcClient,
+		deviceId,
+		cap: (d) => d.powerMeter,
+		slice: (d) => d.state.powerMeter
+	});
+	const power = known(slice?.power);
+	const energy = known(slice?.energy);
+	if (power === null && energy === null) return null;
+	const drawing = power !== null && power > 0;
+	const shown = power === null ? null : formatPowerWatts(power);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-testid": "power-meter-line",
+		className: "flex items-center gap-3 rounded-lg border border-border bg-surface px-3 py-2",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "relative flex h-5 w-5 shrink-0 items-center justify-center",
+				children: [drawing && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					"aria-hidden": "true",
+					"data-testid": "power-meter-pulse",
+					className: "absolute inset-0 rounded-full bg-primary/20 motion-safe:animate-pulse"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Zap, {
+					className: cn("relative h-3.5 w-3.5", drawing ? "text-primary" : "text-foreground-subtle"),
+					"aria-hidden": true
+				})]
+			}),
+			shown !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				"data-testid": "power-meter-power",
+				className: "flex items-baseline gap-1 tabular-nums",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "text-lg font-semibold text-foreground",
+					children: shown.value
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "text-xs text-foreground-muted",
+					children: shown.unit
+				})]
+			}),
+			energy !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				"data-testid": "power-meter-energy",
+				className: "ml-auto flex items-baseline gap-1 tabular-nums",
+				title: t("uiLibrary.powerMeterLine.energy", "Energy"),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "text-sm text-foreground-muted",
+					children: formatEnergyKwh(energy)
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "text-xs text-foreground-subtle",
+					children: "kWh"
+				})]
+			})
+		]
+	});
+}
+//#endregion
 //#region src/lib/cap-error.ts
 /**
 * Shared capability-error utilities for the admin UI.
@@ -30739,6 +30905,7 @@ var HOST_WIDGETS = {
 	"host/ptz-panel": PtzPanel,
 	"host/navigation-panel": NavigationPanel,
 	"host/consumables-panel": ConsumablesPanel,
+	"host/power-meter-line": PowerMeterLine,
 	"host/ptz-autotrack": AutotrackSection,
 	"host/recording-panel": RecordingPanel,
 	"host/camera-grid-layout": CameraGridLayoutEditor,
@@ -37075,8 +37242,8 @@ function pickWifiIcon(signalPercent) {
 }
 function signalColor(signalPercent) {
 	if (signalPercent === null) return "text-foreground-subtle";
-	if (signalPercent <= 20) return "text-rose-400";
-	if (signalPercent <= 50) return "text-amber-400";
+	if (signalPercent <= 20) return "text-danger";
+	if (signalPercent <= 50) return "text-warning";
 	return "text-foreground-subtle";
 }
 function NetworkLinkBadge({ status, className }) {
@@ -37087,15 +37254,16 @@ function NetworkLinkBadge({ status, className }) {
 		title: t("uiLibrary.networkLinkBadge.ethernet", "Network: ethernet"),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Cable, { className: "h-3.5 w-3.5" })
 	});
-	const Icon = status.type === "cellular" ? RadioTower : pickWifiIcon(status.signal);
-	const signal = status.signal === null ? null : Math.round(status.signal);
+	const reading = typeof status.signal === "number" && Number.isFinite(status.signal) ? status.signal : null;
+	const Icon = status.type === "cellular" ? RadioTower : pickWifiIcon(reading);
+	const signal = reading === null ? null : Math.round(reading);
 	const networkText = status.ssid ? t("uiLibrary.networkLinkBadge.typeSsid", "Network: {{type}} ({{ssid}})", {
 		type: status.type,
 		ssid: status.ssid
 	}) : t("uiLibrary.networkLinkBadge.type", "Network: {{type}}", { type: status.type });
 	const title = signal === null ? networkText : `${networkText} · ${t("uiLibrary.networkLinkBadge.signal", "signal {{percent}}%", { percent: signal })}`;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-		className: cn("inline-flex items-center gap-1 text-[10px] font-medium", signalColor(status.signal), className),
+		className: cn("inline-flex items-center gap-1 text-[10px] font-medium", signalColor(reading), className),
 		title,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { className: "h-3.5 w-3.5" }), signal !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [signal, "%"] })]
 	});
@@ -48782,29 +48950,179 @@ function ClimatePanel({ trpc, deviceId, features: _features, layout, optimistic
 	});
 }
 //#endregion
+//#region src/composites/device-controls/media-player-view.ts
+/**
+* The state → view mapping of the media-player hero card, kept pure so it can
+* be specified without rendering.
+*
+* Two questions are answered separately. POWER is whether the device is on
+* (`off` / `standby` / on); RUNNING is what a powered device is doing
+* (`playing` / `paused` / `buffering` / `idle`). A status that never arrived
+* is `unknown` for both, and an unknown state is never drawn as off: it is
+* its own look. A value the driver only guesses (infrared has no feedback)
+* carries an `assumed` flag so the card can draw it as a guess.
+*
+* The controls are derived from what the device exposes — the status fields
+* it fills and the `DeviceFeature` flags it declares — never from a vendor.
+*/
+var NO_TRANSPORT = {
+	playPause: false,
+	previous: false,
+	next: false,
+	stop: false
+};
+/** Whether the status carries any activity the device actually reported. */
+function runningOf(state) {
+	switch (state) {
+		case "playing":
+		case "paused":
+		case "buffering":
+		case "idle": return state;
+		case void 0: return "unknown";
+		default: return "none";
+	}
+}
+function artworkOf(status) {
+	const url = status.currentMedia?.imageUrl?.trim() ?? "";
+	return url === "" ? null : url;
+}
+function powerOf(state) {
+	if (state === void 0) return "unknown";
+	if (state === "off") return "off";
+	if (state === "standby") return "standby";
+	return "on";
+}
+/**
+* A slice from before `assumedFields` existed (stateSource assumed, no list)
+* means the whole state is a guess; with a list, only the named fields are.
+*/
+function isAssumed(status, field) {
+	if (status.stateSource !== "assumed") return false;
+	const listed = status.assumedFields ?? [];
+	return listed.length === 0 || listed.includes(field);
+}
+var UNKNOWN_VIEW = {
+	power: "unknown",
+	runningReading: "unknown",
+	running: "unknown",
+	stateAssumed: false,
+	canSwitchPower: false,
+	transport: NO_TRANSPORT,
+	seek: false,
+	volume: "none",
+	volumeAssumed: false,
+	volumeKnown: false,
+	muteKnown: false,
+	artworkUrl: null,
+	mute: false,
+	muteAssumed: false,
+	source: null,
+	sourceAssumed: false,
+	shuffle: false,
+	repeat: false
+};
+function readingOf(running) {
+	if (running === true) return "running";
+	if (running === false) return "idle";
+	return "unknown";
+}
+function deriveMediaPlayerView(status, features, extras = {}) {
+	const runningReading = readingOf(extras.running);
+	const view = deriveFromStatus(status, features);
+	const guessed = status === void 0 || status.state === void 0 || view.stateAssumed;
+	if (runningReading === "unknown" || !guessed) return {
+		...view,
+		runningReading
+	};
+	if (runningReading === "idle") return {
+		...UNKNOWN_VIEW,
+		power: "off",
+		running: "none",
+		canSwitchPower: view.canSwitchPower,
+		runningReading
+	};
+	return {
+		...status === void 0 ? view : deriveFromStatus(status.state === void 0 || status.state === "off" || status.state === "standby" ? {
+			...status,
+			state: "on"
+		} : status, features),
+		power: "on",
+		stateAssumed: false,
+		runningReading
+	};
+}
+function deriveFromStatus(status, features) {
+	const has = (f) => features?.includes(f) ?? false;
+	const canSwitchPower = has(_camstack_types.DeviceFeature.MediaPlayerPower);
+	if (status === void 0 || status.state === void 0) return {
+		...UNKNOWN_VIEW,
+		canSwitchPower
+	};
+	const power = powerOf(status.state);
+	const running = runningOf(status.state);
+	const base = {
+		...UNKNOWN_VIEW,
+		power,
+		running,
+		stateAssumed: isAssumed(status, "state"),
+		canSwitchPower
+	};
+	if (power !== "on") return base;
+	const hasTransportFeature = has(_camstack_types.DeviceFeature.MediaPlayerNext) || has(_camstack_types.DeviceFeature.MediaPlayerPrevious) || has(_camstack_types.DeviceFeature.MediaPlayerStop) || has(_camstack_types.DeviceFeature.MediaPlayerSeek);
+	const volume = has(_camstack_types.DeviceFeature.MediaPlayerVolume) ? "slider" : has(_camstack_types.DeviceFeature.MediaPlayerVolumeStep) ? "steps" : "none";
+	const sourceName = typeof status.source === "string" ? status.source.trim() : "";
+	const options = status.availableSources ?? [];
+	const hasSource = sourceName !== "" || options.length > 0;
+	return {
+		...base,
+		transport: {
+			playPause: running !== "none" || hasTransportFeature,
+			previous: has(_camstack_types.DeviceFeature.MediaPlayerPrevious),
+			next: has(_camstack_types.DeviceFeature.MediaPlayerNext),
+			stop: has(_camstack_types.DeviceFeature.MediaPlayerStop)
+		},
+		seek: has(_camstack_types.DeviceFeature.MediaPlayerSeek) && status.duration !== null && status.duration > 0,
+		volume,
+		volumeAssumed: isAssumed(status, "volumeLevel"),
+		mute: has(_camstack_types.DeviceFeature.MediaPlayerMute) || volume === "slider" && status.isMuted !== null,
+		volumeKnown: status.volumeLevel !== null,
+		muteKnown: status.isMuted !== null,
+		artworkUrl: artworkOf(status),
+		muteAssumed: isAssumed(status, "isMuted"),
+		source: hasSource ? {
+			current: sourceName,
+			options,
+			selectable: has(_camstack_types.DeviceFeature.MediaPlayerSelectSource) && options.length > 1
+		} : null,
+		sourceAssumed: isAssumed(status, "source"),
+		shuffle: has(_camstack_types.DeviceFeature.MediaPlayerShuffle) && status.shuffle !== null,
+		repeat: has(_camstack_types.DeviceFeature.MediaPlayerRepeat) && status.repeat !== null
+	};
+}
+//#endregion
 //#region src/composites/device-controls/media-player-panel.tsx
 /**
 * Exhaustive colour map — one entry per MediaPlayerState.
 * Build fails if a state is added and not reflected here.
 */
 var STATE_COLOR = {
-	playing: "border-green-400 bg-green-50 dark:bg-green-950",
-	paused: "border-amber-400 bg-amber-50 dark:bg-amber-950",
-	buffering: "border-blue-400 bg-blue-50 dark:bg-blue-950",
-	on: "border-slate-400 bg-slate-50 dark:bg-slate-950",
-	idle: "border-slate-400 bg-slate-50 dark:bg-slate-950",
-	off: "border-zinc-300 bg-zinc-50 dark:bg-zinc-900",
-	standby: "border-zinc-300 bg-zinc-50 dark:bg-zinc-900"
+	playing: "border-success/50 bg-success/10",
+	paused: "border-warning/50 bg-warning/10",
+	buffering: "border-info/50 bg-info/10",
+	on: "border-foreground-subtle/40 bg-surface-hover",
+	idle: "border-foreground-subtle/40 bg-surface-hover",
+	off: "border-border bg-surface",
+	standby: "border-border bg-surface"
 };
 /** Dot indicator colour (small circle) per state. */
 var STATE_DOT_COLOR = {
-	playing: "bg-green-500",
-	paused: "bg-amber-400",
-	buffering: "bg-blue-400",
-	on: "bg-slate-400",
-	idle: "bg-slate-400",
-	off: "bg-zinc-300",
-	standby: "bg-zinc-300"
+	playing: "bg-success",
+	paused: "bg-warning",
+	buffering: "bg-info",
+	on: "bg-foreground-subtle",
+	idle: "bg-foreground-subtle",
+	off: "bg-border",
+	standby: "bg-border"
 };
 /** Exhaustive tuple of valid repeat values — single source of truth. */
 var REPEAT_VALUES = [
@@ -48828,7 +49146,7 @@ function toggleAction$1(state) {
 	if (state === "playing" || state === "buffering") return "pause";
 	return "play";
 }
-function MediaPlayerPanel({ trpc, deviceId, features: _features, layout, optimistic }) {
+function MediaPlayerPanel({ trpc, deviceId, features, layout, optimistic }) {
 	const t = useUiText();
 	const { cap, slice, available } = useDeviceCapability({
 		trpc,
@@ -48838,6 +49156,7 @@ function MediaPlayerPanel({ trpc, deviceId, features: _features, layout, optimis
 	});
 	const { display, applyOptimistic } = useOptimisticSlice(slice, { enabled: optimistic ?? true });
 	if (display === void 0) return null;
+	const declared = deriveMediaPlayerView(display, features, {});
 	const busy = !available;
 	const action = toggleAction$1(display.state);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -48892,7 +49211,7 @@ function MediaPlayerPanel({ trpc, deviceId, features: _features, layout, optimis
 					children: "⏭"
 				})]
 			}),
-			display.volumeLevel !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+			(declared.volume === "slider" || display.volumeLevel !== null) && /* @__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", { children: t("uiLibrary.mediaPlayerPanel.vol", "Vol") }),
@@ -48902,7 +49221,7 @@ function MediaPlayerPanel({ trpc, deviceId, features: _features, layout, optimis
 						min: 0,
 						max: 100,
 						step: 1,
-						value: display.volumeLevel,
+						value: display.volumeLevel ?? 0,
 						disabled: busy,
 						onChange: (e) => {
 							const volumeLevel = Number(e.target.value);
@@ -48910,25 +49229,25 @@ function MediaPlayerPanel({ trpc, deviceId, features: _features, layout, optimis
 							if (!busy) cap?.setVolume({ volumeLevel });
 						}
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 						className: "tabular-nums w-8 text-right",
-						children: [display.volumeLevel, "%"]
+						children: display.volumeLevel === null ? "—" : `${display.volumeLevel}%`
 					})
 				]
 			}),
-			display.isMuted !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			(declared.mute || display.isMuted !== null) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 				type: "button",
 				"aria-label": display.isMuted ? t("uiLibrary.mediaPlayerPanel.unmute", "Unmute") : t("uiLibrary.mediaPlayerPanel.mute", "Mute"),
 				disabled: busy,
 				onClick: (e) => {
 					e.stopPropagation();
-					if (!busy && display.isMuted !== null) {
-						const muted = !display.isMuted;
+					if (!busy) {
+						const muted = display.isMuted === null ? true : !display.isMuted;
 						applyOptimistic({ isMuted: muted });
 						cap?.setMute({ muted });
 					}
 				},
-				className: cn("inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs transition-colors", display.isMuted ? "bg-amber-400 text-amber-950" : "text-foreground-subtle hover:text-foreground hover:bg-surface-hover", busy && "opacity-40 cursor-not-allowed"),
+				className: cn("inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs transition-colors", display.isMuted ? "bg-warning-fill text-warning-on" : "text-foreground-subtle hover:text-foreground hover:bg-surface-hover", busy && "opacity-40 cursor-not-allowed"),
 				children: display.isMuted ? "🔇" : "🔊"
 			}),
 			display.availableSources.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
@@ -48967,7 +49286,7 @@ function MediaPlayerPanel({ trpc, deviceId, features: _features, layout, optimis
 						cap?.setShuffle({ shuffle });
 					}
 				},
-				className: cn("inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs transition-colors", display.shuffle ? "bg-green-400 text-green-950" : "text-foreground-subtle hover:text-foreground hover:bg-surface-hover", busy && "opacity-40 cursor-not-allowed"),
+				className: cn("inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs transition-colors", display.shuffle ? "bg-success-fill text-success-on" : "text-foreground-subtle hover:text-foreground hover:bg-surface-hover", busy && "opacity-40 cursor-not-allowed"),
 				children: ["⇌ ", t("uiLibrary.mediaPlayerPanel.shuffle", "Shuffle")]
 			}),
 			display.repeat !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
@@ -55611,7 +55930,7 @@ function SwingToggle({ axis, on, busy, onToggle }) {
 *     "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
+*     on/off switch and the timed
 *     run (number, unit, Run, countdown, Cancel).
 *
 * Every reading may be unknown (`null`) and is drawn as a dash, never as zero.
@@ -55633,12 +55952,6 @@ function useHeater({ trpc, deviceId, optimistic }) {
 		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,
@@ -55652,7 +55965,6 @@ function useHeater({ trpc, deviceId, optimistic }) {
 		available,
 		applyOptimistic,
 		running: running.slice,
-		power: power.slice,
 		timer
 	};
 }
@@ -55695,11 +56007,10 @@ function HeaterInlineControl(props) {
 }
 function HeaterHeroCard(props) {
 	const t = useUiText();
-	const { cap, display, available, applyOptimistic, running, power, timer } = useHeater(props);
+	const { cap, display, available, applyOptimistic, running, 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: [
@@ -55717,21 +56028,13 @@ function HeaterHeroCard(props) {
 					})
 				}), /* @__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`
-						})
-					]
+					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.jsxs)("label", {
@@ -56176,17 +56479,16 @@ function DishwasherHeroCard(props) {
 * 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.
+* the cycle is running (the `running-state` cap) and for how long. The draw
+* is NOT drawn here: the `power-meter` cap's hero widget shows it under every
+* hero card (D1004).
 *   - ApplianceInlineControl (device-list row): the running badge round the
-*     drum icon, plus the live watts when there are any.
+*     drum icon.
 *   - ApplianceHeroCard (device-detail hero): the drum (turning only while a
-*     cycle runs), the state, the phase, the dwell and the power.
+*     cycle runs), the state, the phase and the dwell.
 *
 * 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.
+* drum stays still and unbadged.
 */
 var KEYFRAMES = `
 @keyframes apl-tumble { to { transform: rotate(360deg) } }
@@ -56195,10 +56497,6 @@ var KEYFRAMES = `
   .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 {
@@ -56221,10 +56519,7 @@ function dwellText(running, since, now, t) {
 	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 { running: useDeviceState(props.trpc, props.deviceId, (s) => s.runningState) };
 }
 /** The drum: a ring with a few items in it, turning only while a cycle runs. */
 function Drum({ running }) {
@@ -56246,7 +56541,7 @@ function Drum({ running }) {
 }
 function ApplianceHeroCard(props) {
 	const t = useUiText();
-	const { running, power } = useApplianceState(props);
+	const { running } = useApplianceState(props);
 	const state = running?.running ?? null;
 	const meta = applianceStateLabel(state, t);
 	const phase = running?.phase?.trim() ?? "";
@@ -56258,50 +56553,35 @@ function ApplianceHeroCard(props) {
 			/* @__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)]
-					})
-				]
+				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
+				})]
 			})
 		]
 	});
 }
 function ApplianceInlineControl(props) {
-	const { running, power } = useApplianceState(props);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+	const { running } = useApplianceState(props);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "inline-flex items-center gap-1.5 max-w-full",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RunningBadge, {
+		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
@@ -57266,6 +57546,106 @@ function SwitchHeroCard({ trpc, deviceId, optimistic }) {
 	});
 }
 //#endregion
+//#region src/composites/device-controls/media-player-hero-parts.tsx
+/**
+* The animated parts of the media-player hero: the power orb and the running
+* indicator. Motion is transform / opacity only, plays only while the state
+* says so, and stops under `prefers-reduced-motion` (the state is still told
+* by colour, icon and text, never by motion alone).
+*/
+var MEDIA_HERO_KEYFRAMES = `
+@keyframes mph-eq { 0%, 100% { transform: scaleY(.3) } 50% { transform: scaleY(1) } }
+@keyframes mph-halo { 0% { transform: scale(.92); opacity: .55 } 100% { transform: scale(1.4); opacity: 0 } }
+.mph-eq { transform-origin: bottom; animation: mph-eq 1s ease-in-out infinite; }
+.mph-eq:nth-child(2) { animation-duration: .8s; animation-delay: -.3s; }
+.mph-eq:nth-child(3) { animation-duration: 1.2s; animation-delay: -.6s; }
+.mph-eq:nth-child(4) { animation-duration: .9s; animation-delay: -.1s; }
+.mph-halo { animation: mph-halo 2.8s ease-out infinite; }
+@keyframes mph-in { from { opacity: 0 } to { opacity: 1 } }
+@keyframes mph-out { from { opacity: 1 } to { opacity: 0 } }
+.mph-fade-in { animation: mph-in .6s ease-out both; }
+.mph-fade-out { animation: mph-out .6s ease-out both; }
+@media (prefers-reduced-motion: reduce) {
+  .mph-eq, .mph-halo, .mph-fade-in, .mph-fade-out { animation: none !important; }
+  .mph-fade-out { opacity: 0; }
+  .mph-eq:nth-child(odd) { transform: scaleY(.6); }
+  .mph-halo { opacity: 0; }
+}
+`;
+var ORB_TONE = {
+	on: "border-success bg-success/15 text-success shadow-lg shadow-success/30",
+	standby: "border-warning bg-warning/10 text-warning",
+	off: "border-border bg-surface-hover text-foreground-subtle",
+	unknown: "border-dashed border-border bg-transparent text-foreground-subtle"
+};
+/** The device's power: a glowing ring when on, amber in standby, flat when off, dashed when unknown. */
+function PowerOrb({ power, onPress, label, busy }) {
+	const body = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: power === "unknown" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CircleQuestionMark, {
+		className: "h-7 w-7",
+		"aria-hidden": "true"
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Power, {
+		className: "h-7 w-7",
+		"aria-hidden": "true"
+	}) });
+	const classes = cn("relative z-10 inline-flex h-16 w-16 items-center justify-center rounded-full border-2", "transition-all duration-500 motion-reduce:transition-none", ORB_TONE[power]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "relative flex h-20 w-20 items-center justify-center",
+		"data-power": power,
+		children: [power === "on" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			"aria-hidden": "true",
+			"data-testid": "media-power-halo",
+			className: "mph-halo absolute h-16 w-16 rounded-full bg-success/25"
+		}), onPress === void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: classes,
+			"data-testid": "media-power",
+			role: "img",
+			"aria-label": label,
+			children: body
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			type: "button",
+			"aria-label": label,
+			title: label,
+			disabled: busy,
+			"data-testid": "media-power",
+			onClick: (e) => {
+				e.stopPropagation();
+				if (!busy) onPress();
+			},
+			className: cn(classes, "hover:brightness-110 active:scale-95", busy && "cursor-not-allowed opacity-40"),
+			children: body
+		})]
+	});
+}
+var EQ_BARS = [
+	0,
+	1,
+	2,
+	3
+];
+/** Equalizer while playing, a spinner while buffering, a pause glyph when paused; nothing otherwise. */
+function RunningIndicator({ running }) {
+	if (running === "playing") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "inline-flex h-4 items-end gap-0.5 text-primary",
+		"data-testid": "media-running",
+		"data-running": "playing",
+		"aria-hidden": "true",
+		children: EQ_BARS.map((bar) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "mph-eq h-4 w-1 rounded-full bg-primary" }, bar))
+	});
+	if (running === "buffering") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoaderCircle, {
+		className: "h-4 w-4 animate-spin text-foreground-muted motion-reduce:animate-none",
+		"data-testid": "media-running",
+		"data-running": "buffering",
+		"aria-hidden": "true"
+	});
+	if (running === "paused") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Pause, {
+		className: "h-4 w-4 text-foreground-muted",
+		"data-testid": "media-running",
+		"data-running": "paused",
+		"aria-hidden": "true"
+	});
+	return null;
+}
+//#endregion
 //#region src/composites/device-controls/media-player-hero-card.tsx
 /** Which states map to play() vs pause() on the central transport button. */
 function toggleAction(state) {
@@ -57282,12 +57662,50 @@ function formatClock(ms) {
 	const total = Math.floor(ms / 1e3);
 	return `${Math.floor(total / 60)}:${(total % 60).toString().padStart(2, "0")}`;
 }
-function NowPlaying({ title, subtitle }) {
+var NEXT_REPEAT = {
+	off: "all",
+	all: "one",
+	one: "off"
+};
+/** The artwork of what is playing; a change cross-fades from the previous cover. */
+function Artwork({ url }) {
+	const [shown, setShown] = (0, react$1.useState)(url);
+	const [previous, setPrevious] = (0, react$1.useState)(null);
+	const [failed, setFailed] = (0, react$1.useState)(null);
+	const last = (0, react$1.useRef)(url);
+	(0, react$1.useEffect)(() => {
+		if (last.current === url) return;
+		setPrevious(last.current);
+		setShown(url);
+		last.current = url;
+		const timer = setTimeout(() => setPrevious(null), 700);
+		return () => clearTimeout(timer);
+	}, [url]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-testid": "media-artwork",
+		className: "relative h-40 w-40 overflow-hidden rounded-lg border border-border bg-surface-hover",
+		children: [previous !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+			src: previous,
+			alt: "",
+			className: "mph-fade-out absolute inset-0 h-full w-full object-cover"
+		}), shown !== null && failed !== shown ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+			src: shown,
+			alt: "",
+			"data-testid": "media-artwork-img",
+			className: "mph-fade-in absolute inset-0 h-full w-full object-cover",
+			onError: () => setFailed(shown)
+		}, shown) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Music, {
+			className: "absolute inset-0 m-auto h-8 w-8 text-foreground-subtle",
+			"aria-hidden": "true"
+		})]
+	});
+}
+function NowPlaying({ title, subtitle, artworkUrl }) {
 	const t = useUiText();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "flex flex-col items-center gap-1 text-center",
+		className: "flex flex-col items-center gap-2 text-center",
 		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Music, {
+			artworkUrl !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Artwork, { url: artworkUrl }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Music, {
 				className: "h-6 w-6 text-foreground-subtle",
 				"aria-hidden": "true"
 			}),
@@ -57311,18 +57729,23 @@ var STATE_LABEL$1 = {
 	buffering: "Buffering",
 	standby: "Standby"
 };
-function StateLine({ state, assumed, source }) {
+function StateLine({ state, assumed, source, running }) {
 	const t = useUiText();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "flex flex-wrap items-center justify-center gap-2 text-xs text-foreground-muted",
 		"data-testid": "media-state",
 		children: [
-			STATE_LABEL$1[state] !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			running,
+			state === void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "font-medium text-foreground-subtle",
+				"data-testid": "media-state-unknown",
+				children: t("uiLibrary.mediaPlayerHero.state.unknown", "State unknown")
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				className: "font-medium text-foreground",
 				children: t(`uiLibrary.mediaPlayerHero.state.${state}`, STATE_LABEL$1[state])
 			}),
 			assumed && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "rounded border border-border px-1.5 py-0.5 text-[11px] text-foreground-subtle",
+				className: "rounded border border-dashed border-border px-1.5 py-0.5 text-[11px] text-foreground-subtle",
 				title: t("uiLibrary.mediaPlayerHero.assumedHint", "No feedback from the device: this is what was last sent."),
 				"data-testid": "media-assumed",
 				children: t("uiLibrary.mediaPlayerHero.assumed", "assumed")
@@ -57334,33 +57757,40 @@ function StateLine({ state, assumed, source }) {
 		]
 	});
 }
-function TransportButton({ label, busy, onPress, children, primary }) {
+function TransportButton({ label, busy, onPress, children, primary, active, testId }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 		type: "button",
 		"aria-label": label,
+		"aria-pressed": active,
 		title: label,
 		disabled: busy,
+		"data-testid": testId,
 		onClick: (e) => {
 			e.stopPropagation();
 			if (!busy) onPress();
 		},
-		className: cn("inline-flex items-center justify-center rounded-full transition-colors", primary ? "h-12 w-12 bg-primary text-primary-foreground hover:bg-primary/90 shadow-md" : "h-10 w-10 text-foreground-muted hover:bg-surface-hover", busy && "opacity-40 cursor-not-allowed"),
+		className: cn("inline-flex items-center justify-center rounded-full transition-colors", primary ? "h-12 w-12 bg-primary text-primary-foreground hover:bg-primary/90 shadow-md" : "h-10 w-10 text-foreground-muted hover:bg-surface-hover", active === true && "bg-primary/15 text-primary", busy && "opacity-40 cursor-not-allowed"),
 		children
 	});
 }
 /**
-* MediaPlayerHeroCard — now-playing hero for MediaPlayer devices.
+* MediaPlayerHeroCard — the state of a MediaPlayer device and every control it
+* exposes, drawn from `deriveMediaPlayerView` (the state → view mapping and
+* its spec live in `media-player-view.ts`).
 *
-* Renders (Spec §3):
-*  - Now-playing block: cover glyph + title + artist/album.
-*  - Seek GripTrack with a native range overlay (gated on DeviceFeature
-*    MediaPlayerSeek + a known duration).
-*  - Transport row: SkipBack / Play-Pause / SkipForward (lucide icons). Skip
-*    buttons are gated on MediaPlayerPrevious / MediaPlayerNext.
-*  - Volume GripTrack with a native range overlay + mute toggle (gated on a
-*    non-null volume surface + DeviceFeature.MediaPlayerVolume).
+*  - Power orb: glowing when on, amber in standby, flat when off, dashed with a
+*    question mark while the state is unknown (never drawn as off). It is the
+*    power switch when the device declares `MediaPlayerPower`.
+*  - Running line: equalizer while playing, spinner while buffering, pause
+*    glyph when paused; a value the driver only guesses carries an "assumed" mark.
+*  - Only while the device is on: now-playing, seek, transport (previous /
+*    play-pause / stop / next), volume (slider with mute, or steps when the
+*    device has no level reading), the source (a picker when it can switch),
+*    shuffle and repeat. Each appears only when the status fills it or a
+*    `DeviceFeature` declares it — no per-vendor list.
 *
 * Cap-gated on `media-player` — returns null when the device lacks the cap.
+* Motion respects `prefers-reduced-motion`.
 */
 function MediaPlayerHeroCard({ trpc, deviceId, features, optimistic }) {
 	const t = useUiText();
@@ -57371,15 +57801,24 @@ function MediaPlayerHeroCard({ trpc, deviceId, features, optimistic }) {
 		slice: (d) => d.state.mediaPlayer
 	});
 	const { display, applyOptimistic } = useOptimisticSlice(slice, { enabled: optimistic ?? true });
+	const runningSlice = useDeviceState(trpc, deviceId, (st) => st.runningState);
 	if (cap === void 0) return null;
-	if (display === void 0) return null;
+	const view = deriveMediaPlayerView(display, features, { running: runningSlice?.running });
 	const busy = !available;
-	const action = toggleAction(display.state);
-	const supportsSeek = (features?.includes(_camstack_types.DeviceFeature.MediaPlayerSeek) ?? false) && display.duration !== null && display.duration > 0;
-	const supportsNext = features?.includes(_camstack_types.DeviceFeature.MediaPlayerNext) ?? false;
-	const supportsPrevious = features?.includes(_camstack_types.DeviceFeature.MediaPlayerPrevious) ?? false;
-	const volumeLevel = display.volumeLevel;
-	const supportsVolume = (features?.includes(_camstack_types.DeviceFeature.MediaPlayerVolume) ?? false) && volumeLevel !== null;
+	const status = display;
+	const powered = status !== void 0 && view.power === "on";
+	const action = toggleAction(status?.state ?? "off");
+	const switchPower = () => {
+		if (busy) return;
+		if (view.power === "on") {
+			applyOptimistic({ state: "off" });
+			cap.turnOff({});
+		} else {
+			applyOptimistic({ state: "on" });
+			cap.turnOn({});
+		}
+	};
+	const powerLabel = powerLabelOf(view.power, t);
 	const handleToggle = () => {
 		if (busy) return;
 		if (action === "play") {
@@ -57390,25 +57829,60 @@ function MediaPlayerHeroCard({ trpc, deviceId, features, optimistic }) {
 			cap.pause({});
 		}
 	};
-	const title = display.currentMedia?.title ?? null;
-	const subtitle = display.currentMedia?.artist ?? display.currentMedia?.album ?? null;
-	const hasNowPlaying = title !== null || subtitle !== null;
-	const isAssumed = display.stateSource === "assumed";
-	const source = typeof display.source === "string" ? display.source.trim() : "";
-	const seekFraction = progressFraction(display.position, display.duration);
+	const title = status?.currentMedia?.title ?? null;
+	const subtitle = status?.currentMedia?.artist ?? status?.currentMedia?.album ?? null;
+	const hasNowPlaying = powered && (title !== null || subtitle !== null || view.artworkUrl !== null);
+	const assumedAny = view.stateAssumed || view.volumeAssumed || view.muteAssumed || view.sourceAssumed;
+	const sourceText = powered && view.source !== null && !view.source.selectable ? view.source.current : "";
+	const volumeLevel = status?.volumeLevel ?? null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "flex flex-col items-stretch gap-4 rounded-lg border border-border bg-surface p-6",
+		className: cn("flex flex-col items-stretch gap-4 rounded-lg border bg-surface p-6", "transition-colors duration-500 motion-reduce:transition-none", view.power === "on" ? "border-success/40" : "border-border"),
+		"data-testid": "media-hero",
+		"data-power": view.power,
 		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StateLine, {
-				state: display.state,
-				assumed: isAssumed,
-				source
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: MEDIA_HERO_KEYFRAMES }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-col items-center gap-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PowerOrb, {
+					power: view.power,
+					label: powerLabel,
+					busy,
+					onPress: view.canSwitchPower ? switchPower : void 0
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StateLine, {
+					state: status?.state,
+					assumed: assumedAny,
+					source: sourceText,
+					running: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RunningIndicator, { running: view.running })
+				})]
 			}),
 			hasNowPlaying && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NowPlaying, {
 				title,
-				subtitle
+				subtitle,
+				artworkUrl: view.artworkUrl
+			}),
+			powered && view.source !== null && view.source.selectable && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				"data-testid": "media-source-select",
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "text-xs text-foreground-subtle",
+					children: t("uiLibrary.mediaPlayerHero.source", "Source")
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Select, {
+					"aria-label": t("uiLibrary.mediaPlayerHero.source", "Source"),
+					value: view.source.current,
+					disabled: busy,
+					wrapperClassName: "relative min-w-0 flex-1",
+					options: view.source.options.map((o) => ({
+						value: o,
+						label: o
+					})),
+					onChange: (e) => {
+						if (busy) return;
+						applyOptimistic({ source: e.target.value });
+						cap.selectSource({ source: e.target.value });
+					}
+				})]
 			}),
-			supportsSeek && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			powered && view.seek && status !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				"data-testid": "media-seek",
 				className: "flex flex-col gap-1",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
@@ -57422,10 +57896,10 @@ function MediaPlayerHeroCard({ trpc, deviceId, features, optimistic }) {
 							"aria-label": t("uiLibrary.mediaPlayerHero.seek", "Seek"),
 							type: "range",
 							min: 0,
-							max: display.duration ?? 0,
+							max: status.duration ?? 0,
 							step: 1e3,
 							className: "absolute inset-0 h-4 w-full cursor-pointer opacity-0",
-							value: display.position ?? 0,
+							value: status.position ?? 0,
 							disabled: busy,
 							onChange: (e) => {
 								if (busy) return;
@@ -57436,18 +57910,19 @@ function MediaPlayerHeroCard({ trpc, deviceId, features, optimistic }) {
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							className: "pointer-events-none",
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GripTrack, { fraction: seekFraction })
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GripTrack, { fraction: progressFraction(status.position, status.duration) })
 						})
 					]
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "flex justify-between text-[11px] tabular-nums text-foreground-subtle",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: formatClock(display.position) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: formatClock(display.duration) })]
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: formatClock(status.position) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: formatClock(status.duration) })]
 				})]
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			powered && view.transport.playPause && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "flex items-center justify-center gap-4",
+				"data-testid": "media-transport",
 				children: [
-					supportsPrevious && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TransportButton, {
+					view.transport.previous && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TransportButton, {
 						label: t("uiLibrary.mediaPlayerHero.previous", "Previous"),
 						busy,
 						onPress: () => void cap.previous({}),
@@ -57469,7 +57944,16 @@ function MediaPlayerHeroCard({ trpc, deviceId, features, optimistic }) {
 							"aria-hidden": "true"
 						})
 					}),
-					supportsNext && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TransportButton, {
+					view.transport.stop && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TransportButton, {
+						label: t("uiLibrary.mediaPlayerHero.stop", "Stop"),
+						busy,
+						onPress: () => void cap.stop({}),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Square, {
+							className: "h-4 w-4",
+							"aria-hidden": "true"
+						})
+					}),
+					view.transport.next && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TransportButton, {
 						label: t("uiLibrary.mediaPlayerHero.next", "Next"),
 						busy,
 						onPress: () => void cap.next({}),
@@ -57480,24 +57964,24 @@ function MediaPlayerHeroCard({ trpc, deviceId, features, optimistic }) {
 					})
 				]
 			}),
-			supportsVolume && volumeLevel !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			powered && view.volume === "slider" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				"data-testid": "media-volume",
 				className: "flex items-center gap-2",
 				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					view.mute && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 						type: "button",
-						"aria-label": display.isMuted === true ? t("uiLibrary.mediaPlayerHero.unmute", "Unmute") : t("uiLibrary.mediaPlayerHero.mute", "Mute"),
-						title: display.isMuted === true ? t("uiLibrary.mediaPlayerHero.unmute", "Unmute") : t("uiLibrary.mediaPlayerHero.mute", "Mute"),
+						"aria-label": status?.isMuted === true ? t("uiLibrary.mediaPlayerHero.unmute", "Unmute") : t("uiLibrary.mediaPlayerHero.mute", "Mute"),
+						title: status?.isMuted === true ? t("uiLibrary.mediaPlayerHero.unmute", "Unmute") : t("uiLibrary.mediaPlayerHero.mute", "Mute"),
 						disabled: busy,
 						onClick: (e) => {
 							e.stopPropagation();
-							if (busy || display.isMuted === null) return;
-							const muted = !display.isMuted;
+							if (busy) return;
+							const muted = status?.isMuted === null || status === void 0 ? true : !status.isMuted;
 							applyOptimistic({ isMuted: muted });
 							cap.setMute({ muted });
 						},
 						className: cn("inline-flex h-7 w-7 items-center justify-center rounded text-foreground-subtle hover:text-foreground hover:bg-surface-hover transition-colors", busy && "opacity-40 cursor-not-allowed"),
-						children: display.isMuted === true ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VolumeX, {
+						children: status?.isMuted === true ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VolumeX, {
 							className: "h-4 w-4",
 							"aria-hidden": "true"
 						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Volume2, {
@@ -57519,7 +58003,7 @@ function MediaPlayerHeroCard({ trpc, deviceId, features, optimistic }) {
 								max: 100,
 								step: 1,
 								className: "absolute inset-0 h-4 w-full cursor-pointer opacity-0",
-								value: volumeLevel,
+								value: volumeLevel ?? 0,
 								disabled: busy,
 								onChange: (e) => {
 									if (busy) return;
@@ -57530,19 +58014,92 @@ function MediaPlayerHeroCard({ trpc, deviceId, features, optimistic }) {
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 								className: "pointer-events-none",
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GripTrack, { fraction: volumeLevel / 100 })
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: cn(volumeLevel === null && "opacity-40"),
+									"data-testid": "media-volume-track",
+									"data-known": volumeLevel !== null,
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GripTrack, { fraction: status?.isMuted === true || volumeLevel === null ? 0 : volumeLevel / 100 })
+								})
 							})
 						]
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 						className: "w-9 text-right text-[11px] tabular-nums text-foreground-subtle",
-						children: [volumeLevel, "%"]
+						children: volumeLevel === null ? "—" : `${volumeLevel}%`
 					})
 				]
+			}),
+			powered && view.volume === "steps" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				"data-testid": "media-volume-steps",
+				className: "flex items-center justify-center gap-3 text-xs text-foreground-subtle",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TransportButton, {
+						label: t("uiLibrary.mediaPlayerHero.volumeDown", "Volume down"),
+						busy,
+						onPress: () => void cap.volumeDown({ steps: 1 }),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Minus, {
+							className: "h-4 w-4",
+							"aria-hidden": "true"
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Volume2, {
+						className: "h-4 w-4",
+						"aria-hidden": "true"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TransportButton, {
+						label: t("uiLibrary.mediaPlayerHero.volumeUp", "Volume up"),
+						busy,
+						onPress: () => void cap.volumeUp({ steps: 1 }),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Plus, {
+							className: "h-4 w-4",
+							"aria-hidden": "true"
+						})
+					})
+				]
+			}),
+			powered && status !== void 0 && (view.shuffle || view.repeat) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-center justify-center gap-2",
+				"data-testid": "media-modes",
+				children: [view.shuffle && status.shuffle !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TransportButton, {
+					label: t("uiLibrary.mediaPlayerHero.shuffle", "Shuffle"),
+					busy,
+					active: status.shuffle,
+					onPress: () => {
+						const shuffle = !status.shuffle;
+						applyOptimistic({ shuffle });
+						cap.setShuffle({ shuffle });
+					},
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Shuffle, {
+						className: "h-4 w-4",
+						"aria-hidden": "true"
+					})
+				}), view.repeat && status.repeat !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TransportButton, {
+					label: t("uiLibrary.mediaPlayerHero.repeat", "Repeat"),
+					busy,
+					active: status.repeat !== "off",
+					onPress: () => {
+						if (status.repeat === null) return;
+						const repeat = NEXT_REPEAT[status.repeat];
+						applyOptimistic({ repeat });
+						cap.setRepeat({ repeat });
+					},
+					children: status.repeat === "one" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Repeat1, {
+						className: "h-4 w-4",
+						"aria-hidden": "true"
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Repeat, {
+						className: "h-4 w-4",
+						"aria-hidden": "true"
+					})
+				})]
 			})
 		]
 	});
 }
+function powerLabelOf(power, t) {
+	if (power === "on") return t("uiLibrary.mediaPlayerHero.turnOff", "Turn off");
+	if (power === "unknown") return t("uiLibrary.mediaPlayerHero.powerUnknown", "Power state unknown");
+	return t("uiLibrary.mediaPlayerHero.turnOn", "Turn on");
+}
 //#endregion
 //#region src/composites/device-controls/alarm-hero-card.tsx
 var ALARM_STATE_CONFIG = {
@@ -73116,7 +73673,7 @@ function TimelineSlider({ markers, bands = [], selectedId = null, step = 5, aria
 }
 //#endregion
 //#region src/ui-library-version.ts
-var uiLibraryVersion = "1.2.376";
+var uiLibraryVersion = "1.2.377";
 //#endregion
 //#region src/hooks/use-account-unit-preferences.ts
 /**
@@ -74481,6 +75038,7 @@ exports.PopoverContent = PopoverContent;
 exports.PopoverRowAction = PopoverRowAction;
 exports.PopoverTrigger = PopoverTrigger;
 exports.Power = Power;
+exports.PowerMeterLine = PowerMeterLine;
 exports.PowerOff = PowerOff;
 exports.PrimaryChildPicker = PrimaryChildPicker;
 exports.PrivacyMaskSettings = PrivacyMaskSettings;
@@ -74507,6 +75065,8 @@ exports.RecordEntriesPanel = RecordEntriesPanel;
 exports.RecordedPlaybackProvider = RecordedPlaybackProvider;
 exports.RecordingPanel = RecordingPanel;
 exports.RefreshCw = RefreshCw;
+exports.Repeat = Repeat;
+exports.Repeat1 = Repeat1;
 exports.ResponseLog = ResponseLog;
 exports.RetrainReviewBadge = RetrainReviewBadge;
 exports.RoleDisplayDefaultsFromServer = RoleDisplayDefaultsFromServer;
@@ -74590,6 +75150,7 @@ exports.ShieldAlert = ShieldAlert;
 exports.ShieldCheck = ShieldCheck;
 exports.ShieldOff = ShieldOff;
 exports.Ship = Ship;
+exports.Shuffle = Shuffle;
 exports.Sidebar = Sidebar;
 exports.SidebarItem = SidebarItem;
 exports.Siren = Siren;