@camstack/ui-library 1.2.316 → 1.2.317

package/dist/index.cjs

@@ -1899,26 +1899,6 @@ var Flashlight = require_createLucideIcon.createLucideIcon("flashlight", [
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-var FlaskConical = require_createLucideIcon.createLucideIcon("flask-conical", [
-	["path", {
-		d: "M14 2v6a2 2 0 0 0 .245.96l5.51 10.08A2 2 0 0 1 18 22H6a2 2 0 0 1-1.755-2.96l5.51-10.08A2 2 0 0 0 10 8V2",
-		key: "18mbvz"
-	}],
-	["path", {
-		d: "M6.453 15h11.094",
-		key: "3shlmq"
-	}],
-	["path", {
-		d: "M8.5 2h7",
-		key: "csnxdl"
-	}]
-]);
-/**
-* @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 Footprints = require_createLucideIcon.createLucideIcon("footprints", [
 	["path", {
 		d: "M4 16v-2.38C4 11.5 2.97 10.5 3 8c.03-2.72 1.49-6 4.5-6C9.37 2 10 3.8 10 5.5c0 3.11-2 5.66-2 8.68V16a2 2 0 1 1-4 0Z",
@@ -5870,7 +5850,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-BTux33dH.cjs")).then((module) => {
+	pending ??= Promise.resolve().then(() => require("./icons-pqV1UOV_.cjs")).then((module) => {
 		fullTable = module;
 		publish();
 	}, (error) => {
@@ -10801,6 +10781,10 @@ var useDeviceHistoryGetDeviceEnabled = trpc.deviceHistory.getDeviceEnabled.useQu
 var useDeviceHistorySetDeviceEnabled = trpc.deviceHistory.setDeviceEnabled.useMutation;
 /** Generated alias around `trpc.deviceHistory.getStatus.useQuery`. */
 var useDeviceHistoryGetStatus = trpc.deviceHistory.getStatus.useQuery;
+/** Generated alias around `trpc.deviceHistory.listOrphanSeries.useQuery`. */
+var useDeviceHistoryListOrphanSeries = trpc.deviceHistory.listOrphanSeries.useQuery;
+/** Generated alias around `trpc.deviceHistory.deleteOrphanSeries.useMutation`. */
+var useDeviceHistoryDeleteOrphanSeries = trpc.deviceHistory.deleteOrphanSeries.useMutation;
 /** Generated alias around `trpc.deviceManager.allocateDeviceId.useMutation`. */
 var useDeviceManagerAllocateDeviceId = trpc.deviceManager.allocateDeviceId.useMutation;
 /** Generated alias around `trpc.deviceManager.migrateDevice.useMutation`. */
@@ -19149,20 +19133,30 @@ function useDeviceAutotrack(deviceId) {
 }
 //#endregion
 //#region src/composites/widget-panel.tsx
-function WidgetPanel({ title, icon, headerRight, collapsible = false, defaultOpen = true, bodyClassName = "p-3", children }) {
-	const [open, setOpen] = (0, react$1.useState)(defaultOpen);
+function WidgetPanel({ title, icon, headerRight, collapsible = false, defaultOpen = true, open: openProp, onOpenChange, bodyClassName = "p-3", children }) {
+	const [openState, setOpenState] = (0, react$1.useState)(defaultOpen);
+	const open = openProp ?? openState;
+	const toggle = () => {
+		const next = !open;
+		if (openProp === void 0) setOpenState(next);
+		onOpenChange?.(next);
+	};
 	const showBody = !collapsible || open;
 	const headerInner = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 		className: "flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-foreground",
 		children: [icon, title]
-	}), collapsible ? open ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronDown, { className: "h-3.5 w-3.5 text-foreground-subtle" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronRight, { className: "h-3.5 w-3.5 text-foreground-subtle" }) : headerRight] });
+	}), collapsible ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: "flex min-w-0 items-center gap-2",
+		children: [headerRight, open ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronDown, { className: "h-3.5 w-3.5 shrink-0 text-foreground-subtle" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronRight, { className: "h-3.5 w-3.5 shrink-0 text-foreground-subtle" })]
+	}) : headerRight] });
 	const headerClass = `px-4 py-2 flex items-center justify-between ${showBody ? "border-b border-border" : ""}`;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "rounded-lg border border-border bg-surface overflow-hidden",
 		children: [collapsible ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 			type: "button",
-			onClick: () => setOpen((v) => !v),
-			className: `w-full text-left ${headerClass}`,
+			"aria-expanded": open,
+			onClick: toggle,
+			className: `w-full gap-2 text-left ${headerClass}`,
 			children: headerInner
 		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: headerClass,
@@ -20523,6 +20517,60 @@ function useDeviceCapability(options) {
 	};
 }
 //#endregion
+//#region src/hooks/use-persisted-disclosure.ts
+/**
+* usePersistedDisclosure — an open / closed choice the viewer made, remembered
+* per viewer under the caller's key (one key per section and device).
+*
+* `null` means the viewer never chose. The caller then shows its own default,
+* which may follow the data (the Consumables section opens itself while an
+* item needs attention) — the default is never written, so it can change with
+* the data until the viewer picks.
+*
+* Storage is a convenience, never a requirement: every read and write is
+* guarded, and a blocked / private-mode storage means the choice lasts until
+* the page is left. A stored value this hook did not write is ignored.
+*/
+var OPEN = "open";
+var CLOSED = "closed";
+function readStored$1(key) {
+	if (key === null || typeof window === "undefined") return null;
+	try {
+		const raw = window.localStorage.getItem(key);
+		if (raw === OPEN) return true;
+		if (raw === CLOSED) return false;
+		return null;
+	} catch {
+		return null;
+	}
+}
+function writeStored$1(key, open) {
+	if (key === null || typeof window === "undefined") return;
+	try {
+		window.localStorage.setItem(key, open ? OPEN : CLOSED);
+	} catch {}
+}
+/** @returns `[choice, setChoice]` — `choice` is `null` until the viewer picks. */
+function usePersistedDisclosure(storageKey) {
+	const [choice, setChoice] = (0, react$1.useState)(() => ({
+		key: storageKey,
+		open: readStored$1(storageKey)
+	}));
+	const current = choice.key === storageKey ? choice : {
+		key: storageKey,
+		open: readStored$1(storageKey)
+	};
+	if (current !== choice) setChoice(current);
+	const update = (0, react$1.useCallback)((open) => {
+		setChoice({
+			key: storageKey,
+			open
+		});
+		writeStored$1(storageKey, open);
+	}, [storageKey]);
+	return [current.open, update];
+}
+//#endregion
 //#region src/composites/consumable-level-badge.tsx
 var LOOKS$1 = {
 	ok: {
@@ -20543,6 +20591,12 @@ var LOOKS$1 = {
 		labelKey: "uiLibrary.consumableLevel.empty",
 		labelFallback: "Empty"
 	},
+	full: {
+		variant: "warning",
+		barClass: "bg-warning",
+		labelKey: "uiLibrary.consumableLevel.full",
+		labelFallback: "Full"
+	},
 	unknown: {
 		variant: "neutral",
 		barClass: "bg-foreground-subtle",
@@ -20566,39 +20620,57 @@ function consumableLevelLabel(level, t) {
 	const look = lookOf(level);
 	return t(look.labelKey, look.labelFallback);
 }
-/** A remaining-life % at or below this is `low`. */
+/** A remaining-life (or supply fill) % at or below this is `low`. */
 var CONSUMABLE_LOW_PERCENT = 15;
-/**
-* A `consumables` cap item as a level: a known % (0 = empty, at or below
-* {@link CONSUMABLE_LOW_PERCENT} = low), never better than `low` when the
-* provider also says `replace`; without a % the discrete status (`replace` =
-* low); else unknown.
-*/
-function consumableItemLevel(item) {
+/** A waste item: full is bad, low or empty is what it should be. */
+function wasteLevel(item) {
+	if (item.status === "full" || item.status === "replace") return "full";
+	if (item.level !== null) return item.level >= 85 ? "full" : "ok";
+	return item.status === null ? null : "ok";
+}
+/** A wear part or a supply: low / empty is bad, a full supply is fine. */
+function drawnLevel(item) {
 	if (item.level !== null) {
-		if (item.level <= 0) return "empty";
-		if (item.level <= 15 || item.status === "replace") return "low";
+		if (item.level <= 0 || item.status === "empty") return "empty";
+		if (item.level <= 15 || item.status === "replace" || item.status === "low") return "low";
 		return "ok";
 	}
 	switch (item.status) {
-		case "replace": return "low";
-		case "ok": return "ok";
+		case "replace":
+		case "low": return "low";
+		case "empty": return "empty";
+		case "ok":
+		case "full": return "ok";
 		case null: return null;
 	}
 }
 /**
+* A `consumables` cap item as a level, by its kind (D915):
+*  - a `waste` item (a dust bin) is `full` when the provider says so or its
+*    fill is at or above {@link CONSUMABLE_FULL_PERCENT}, else ok;
+*  - a `wear` part or a `supply` reads a known % (0 = empty, at or below
+*    {@link CONSUMABLE_LOW_PERCENT} = low), never better than `low` when the
+*    provider says `replace` or `low`; without a % its discrete status.
+* Nothing known is unknown (`null`).
+*/
+function consumableItemLevel(item) {
+	return (0, _camstack_types.consumableKindOf)(item) === "waste" ? wasteLevel(item) : drawnLevel(item);
+}
+/** The supply vocabulary a level FIELD of a cap is typed by: `ok | low | empty`. */
+var SUPPLY_LEVELS = _camstack_types.ConsumableLevelSchema.exclude(["full"]).options;
+/**
 * Whether a cap state field IS a consumable level: an enum whose members are
-* exactly the consumable level enum. Derived from the cap's schema, so a new
-* cap that uses the enum is recognised without naming it anywhere.
+* exactly the supply levels (`ok | low | empty`). Derived from the schema, so a
+* new cap that uses the vocabulary is recognised without naming it anywhere.
 */
 function isConsumableLevelField(field) {
 	if (field.kind !== "enum" || field.enumValues === void 0) return false;
-	const members = _camstack_types.DishwasherConsumableLevelSchema.options;
+	const members = SUPPLY_LEVELS;
 	return field.enumValues.length === members.length && members.every((m) => field.enumValues?.includes(m));
 }
 /** A value read from a slice as a level; anything that is not a member is unknown. */
 function parseConsumableLevel(value) {
-	const parsed = _camstack_types.DishwasherConsumableLevelSchema.safeParse(value);
+	const parsed = _camstack_types.ConsumableLevelSchema.safeParse(value);
 	return parsed.success ? parsed.data : null;
 }
 function ConsumableLevelBadge({ level, name, label, size = "md", className }) {
@@ -20613,26 +20685,50 @@ function ConsumableLevelBadge({ level, name, label, size = "md", className }) {
 	});
 }
 //#endregion
-//#region src/composites/cap-settings/ConsumablesPanel.tsx
-/**
-* ConsumablesPanel — maintenance-items surface for the generic
-* `consumables` capability. A cap-settings component (ui-library),
-* mounted as a cap-contributed top-level device-detail tab via the
-* cap-UI contribution mechanism (the `consumables` cap declares
-* `ui: { kind:'widget', widgetId:'host/consumables-panel', tab:'consumables', topTab:true, ... }`).
-*
-* Reads the cap's pushed runtime-state slice via `useDeviceCapability`
-* and renders one row per item: a fill bar + percentage when `level` is
-* known, else a `ConsumableLevelBadge` (OK / Replace, or Unknown when
-* neither is known) — the bar's colour and the badge's tone come from the
-* same `consumableItemLevel` mapping. When a provider also reports `remaining` (a count in
-* days/hours/cycles), its value is shown alongside — `null` renders a
-* muted em-dash, never a fake `0` (D393); absent `remaining` renders
-* nothing, exactly as before this field existed. A per-item "Replaced"
-* button calls `cap.reset` when the item is `resettable`. The cap is
-* inert until a provider sets items — an empty list renders a muted
-* placeholder.
-*/
+//#region src/primitives/skeleton.tsx
+var Skeleton = (0, react$1.forwardRef)(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref,
+		className: cn("animate-pulse bg-surface-hover rounded-md h-4 w-full", className),
+		...props
+	});
+});
+Skeleton.displayName = "Skeleton";
+//#endregion
+//#region src/primitives/button.tsx
+var buttonVariants = cva("inline-flex items-center justify-center rounded-md font-medium transition-colors cursor-pointer disabled:opacity-50 disabled:pointer-events-none", {
+	variants: {
+		variant: {
+			primary: "bg-primary text-primary-foreground hover:bg-primary/90",
+			secondary: "bg-surface text-foreground hover:bg-surface-hover",
+			ghost: "hover:bg-surface-hover text-foreground-muted",
+			danger: "bg-danger text-white hover:bg-danger/90",
+			outline: "border border-border bg-transparent text-foreground hover:bg-surface-hover"
+		},
+		size: {
+			sm: "h-7 px-2.5 text-xs gap-1.5",
+			md: "h-8 px-3 text-sm gap-2",
+			lg: "h-9 px-4 text-sm gap-2"
+		}
+	},
+	defaultVariants: {
+		variant: "primary",
+		size: "sm"
+	}
+});
+var Button = (0, react$1.forwardRef)(({ className, variant, size, ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		ref,
+		className: cn(buttonVariants({
+			variant,
+			size
+		}), className),
+		...props
+	});
+});
+Button.displayName = "Button";
+//#endregion
+//#region src/composites/cap-settings/consumable-rows.tsx
 /** `value` null = unknown (D393) — renders an em-dash, never a fake `0`. */
 function formatRemaining(t, r) {
 	if (r.value === null) return "—";
@@ -20664,55 +20760,278 @@ function formatResetAt(ms) {
 		return "";
 	}
 }
-function ConsumableRow({ item, busy, canReset, onReset }) {
+function needsAttention(level) {
+	return level === "low" || level === "empty" || level === "full";
+}
+function clampPercent(value) {
+	return Math.max(0, Math.min(100, value));
+}
+function RowFrame({ item, warn, children }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-form": (0, _camstack_types.consumableFormOf)(item),
+		className: `flex gap-2.5 rounded-md border p-3 ${warn ? "border-warning/40 bg-warning/5" : "border-border-subtle"}`,
+		children
+	});
+}
+function RowLabel({ item, warn }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: `truncate text-xs font-semibold ${warn ? "text-warning" : "text-foreground"}`,
+		children: item.label
+	});
+}
+/** A wear part: bar + %, or its verdict; remaining time; the reset. */
+function PartRow({ item, busy, canReset, onReset }) {
 	const t = useUiText();
 	const level = consumableItemLevel(item);
-	const warn = level === "low" || level === "empty";
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: `flex flex-col gap-1.5 rounded-md border p-3 ${warn ? "border-warning/40 bg-warning/5" : "border-border/40 bg-surface-elevated/30"}`,
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex items-center justify-between gap-2",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: `text-xs font-semibold ${warn ? "text-warning" : "text-foreground"}`,
-					children: item.label
-				}), item.resettable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+	const warn = needsAttention(level);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RowFrame, {
+		item,
+		warn,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex min-w-0 flex-1 flex-col gap-1.5",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RowLabel, {
+					item,
+					warn
+				}),
+				item.level !== 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 overflow-hidden rounded-full bg-surface-hover",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: `h-full rounded-full ${consumableLevelBarClass(level)} transition-all`,
+							style: { width: `${clampPercent(item.level)}%` }
+						})
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "text-[10px] font-medium tabular-nums text-foreground-subtle",
+						children: [Math.round(item.level), "%"]
+					})]
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConsumableLevelBadge, {
+					level,
+					size: "sm",
+					className: "w-fit",
+					label: item.status === "replace" ? t("uiLibrary.consumablesPanel.replace", "Replace") : void 0
+				}),
+				item.remaining && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "text-[10px] font-medium tabular-nums text-foreground-subtle",
+					children: formatRemaining(t, item.remaining)
+				}),
+				item.lastResetAt !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "text-[10px] text-foreground-subtle",
+					children: t("uiLibrary.consumablesPanel.replacedOn", "Replaced {{date}}", { date: formatResetAt(item.lastResetAt) })
+				}),
+				item.resettable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
 					type: "button",
+					variant: "outline",
+					size: "sm",
+					className: "w-fit",
 					onClick: () => onReset(item.key),
 					disabled: busy || !canReset,
-					className: "rounded-md border border-border bg-surface px-2 py-0.5 text-[10px] font-medium text-foreground-subtle hover:bg-surface-hover disabled:opacity-40 transition-colors",
 					children: t("uiLibrary.consumablesPanel.replaced", "Replaced")
-				})]
-			}),
-			item.level !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				})
+			]
+		})
+	});
+}
+/** A tank or a bin: a vertical gauge filled from the bottom, then the % or the verdict. */
+function GaugeRow({ item }) {
+	const level = consumableItemLevel(item);
+	const warn = needsAttention(level);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(RowFrame, {
+		item,
+		warn,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "relative h-10 w-3 shrink-0 overflow-hidden rounded-sm border border-border bg-surface-hover",
+			"data-testid": "consumable-gauge",
+			children: item.level !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: `absolute inset-x-0 bottom-0 ${consumableLevelBarClass(level)} transition-all`,
+				style: { height: `${clampPercent(item.level)}%` }
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex min-w-0 flex-1 flex-col justify-center gap-1",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RowLabel, {
+				item,
+				warn
+			}), /* @__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 overflow-hidden rounded-full bg-surface-elevated/60",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: `h-full rounded-full ${consumableLevelBarClass(level)} transition-all`,
-						style: { width: `${Math.max(0, Math.min(100, item.level))}%` }
-					})
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConsumableLevelBadge, {
+					level,
+					size: "sm",
+					className: "w-fit"
+				}), item.level !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 					className: "text-[10px] font-medium tabular-nums text-foreground-subtle",
 					children: [Math.round(item.level), "%"]
 				})]
-			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConsumableLevelBadge, {
-				level,
-				size: "sm",
-				className: "w-fit",
-				label: item.status === "replace" ? t("uiLibrary.consumablesPanel.replace", "Replace") : void 0
-			}),
-			item.remaining && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "text-[10px] font-medium tabular-nums text-foreground-subtle",
-				children: formatRemaining(t, item.remaining)
-			}),
-			item.lastResetAt !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "text-[10px] text-foreground-subtle",
-				children: t("uiLibrary.consumablesPanel.replacedOn", "Replaced {{date}}", { date: formatResetAt(item.lastResetAt) })
-			})
-		]
+			})]
+		})]
+	});
+}
+/** How many of the three steps a product's level fills. */
+var PRODUCT_STEPS = {
+	full: 3,
+	ok: 3,
+	low: 1,
+	empty: 0,
+	unknown: 0
+};
+var STEP_INDEXES = [
+	0,
+	1,
+	2
+];
+/** The refill wording a product's level reads as. */
+function productLabel(level, t) {
+	if (level === "low") return t("uiLibrary.consumablesPanel.refillSoon", "Refill soon");
+	if (level === "empty") return t("uiLibrary.consumablesPanel.refillNow", "Refill now");
+}
+/** A product bought and refilled: package icon, three steps, "refill". */
+function ProductRow({ item }) {
+	const t = useUiText();
+	const level = consumableItemLevel(item);
+	const warn = needsAttention(level);
+	const filled = PRODUCT_STEPS[level ?? "unknown"];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(RowFrame, {
+		item,
+		warn,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Package, { className: `mt-0.5 h-4 w-4 shrink-0 ${warn ? "text-warning" : "text-foreground-subtle"}` }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex min-w-0 flex-1 flex-col gap-1.5",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RowLabel, {
+				item,
+				warn
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-wrap items-center gap-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "flex gap-0.5",
+					"data-testid": "consumable-steps",
+					"data-filled": filled,
+					children: STEP_INDEXES.map((i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: `h-1.5 w-3 rounded-full ${i < filled ? consumableLevelBarClass(level) : "bg-surface-hover"}` }, i))
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConsumableLevelBadge, {
+					level,
+					size: "sm",
+					className: "whitespace-nowrap",
+					label: productLabel(level, t)
+				})]
+			})]
+		})]
 	});
 }
+/** The row for an item, chosen by its form. */
+function ConsumableRow(props) {
+	switch ((0, _camstack_types.consumableFormOf)(props.item)) {
+		case "part": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PartRow, { ...props });
+		case "tank":
+		case "bin": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GaugeRow, { item: props.item });
+		case "product": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProductRow, { item: props.item });
+	}
+}
+//#endregion
+//#region src/composites/cap-settings/consumables-summary.ts
+var SEVERITY = {
+	empty: 3,
+	full: 2,
+	low: 1
+};
+function isAttention(level) {
+	return level === "low" || level === "empty" || level === "full";
+}
+function summarizeConsumables(items) {
+	if (items.length === 0) return {
+		kind: "none",
+		needsAttention: false
+	};
+	const attention = [];
+	let ok = 0;
+	let unknown = 0;
+	for (const item of items) {
+		const level = consumableItemLevel(item);
+		if (isAttention(level)) attention.push({
+			label: item.label,
+			level,
+			replace: item.status === "replace"
+		});
+		else if (level === "ok") ok += 1;
+		else unknown += 1;
+	}
+	const worst = [...attention].sort((a, b) => SEVERITY[b.level] - SEVERITY[a.level])[0];
+	if (worst !== void 0) return {
+		kind: "attention",
+		needsAttention: true,
+		count: attention.length,
+		worst
+	};
+	return unknown === 0 ? {
+		kind: "ok",
+		needsAttention: false,
+		count: ok
+	} : {
+		kind: "partial",
+		needsAttention: false,
+		ok,
+		unknown
+	};
+}
+//#endregion
+//#region src/composites/cap-settings/ConsumablesPanel.tsx
+/**
+* ConsumablesPanel — the ONE consumables surface of every device (D915): wear
+* parts, tanks (a vacuum's clean and dirty water), products (detergent, a
+* dishwasher's salt and rinse aid) and bins (a dust bin), for whichever device
+* is bound to the `consumables` capability. A cap-settings component
+* (ui-library), shown directly under the device page's hero card through the
+* cap-UI contribution mechanism (the cap declares
+* `ui: { kind:'widget', widgetId:'host/consumables-panel', placement:'hero', ... }`)
+* — never drawn by a device type's hero card itself.
+*
+* Reads the cap's pushed runtime-state slice via `useDeviceCapability` and
+* renders one row per item, drawn by its form (`consumable-rows.tsx`). A
+* slice that has not landed is a loading line, never "none reported" (D315).
+*
+* The section COLLAPSES smartly: it starts open while any item needs
+* attention (low, empty, a full bin or waste tank, a part to replace) and
+* closed while every item is ok or unknown; closed, its header carries a
+* one-line summary (`consumables-summary.ts`). The operator's own toggle wins
+* and is remembered per device and per viewer.
+*/
+/** Where one viewer's open / closed choice for one device's section is kept. */
+function consumablesOpenStorageKey(deviceId) {
+	return `camstack.device.${String(deviceId)}.consumables.open`;
+}
+/** The one line a collapsed section says. */
+function SummaryLine({ summary, t }) {
+	switch (summary.kind) {
+		case "none": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Badge, {
+			variant: "neutral",
+			size: "sm",
+			children: t("uiLibrary.consumablesPanel.noneReported", "None reported")
+		});
+		case "ok": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Badge, {
+			variant: "success",
+			size: "sm",
+			children: t("uiLibrary.consumablesPanel.allOk", "All OK")
+		});
+		case "partial": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Badge, {
+			variant: "neutral",
+			size: "sm",
+			children: t("uiLibrary.consumablesPanel.okAndUnknown", "{{ok}} OK · {{unknown}} unknown", {
+				ok: summary.ok,
+				unknown: summary.unknown
+			})
+		});
+		case "attention": return summary.count === 1 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConsumableLevelBadge, {
+			level: summary.worst.level,
+			name: summary.worst.label,
+			size: "sm",
+			label: summary.worst.replace ? t("uiLibrary.consumablesPanel.replace", "Replace") : void 0
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Badge, {
+			variant: consumableLevelVariant(summary.worst.level),
+			size: "sm",
+			children: t("uiLibrary.consumablesPanel.needAttention", {
+				one: "{{count}} needs attention",
+				other: "{{count}} need attention"
+			}, { count: summary.count })
+		});
+	}
+}
 function ConsumablesPanel({ deviceId }) {
 	const t = useUiText();
 	const system = useSystem();
@@ -20724,6 +21043,7 @@ function ConsumablesPanel({ deviceId }) {
 		slice: (d) => d.state.consumables
 	});
 	const [busyKey, setBusyKey] = (0, react$1.useState)(null);
+	const [choice, setChoice] = usePersistedDisclosure(ready ? consumablesOpenStorageKey(deviceId) : null);
 	const onReset = (0, react$1.useCallback)(async (key) => {
 		if (!cap) return;
 		setBusyKey(key);
@@ -20735,17 +21055,30 @@ function ConsumablesPanel({ deviceId }) {
 			setBusyKey(null);
 		}
 	}, [cap]);
-	const items = slice?.items ?? [];
+	const summary = slice === void 0 ? null : summarizeConsumables(slice.items);
+	const open = choice ?? summary?.needsAttention ?? false;
+	const loading = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skeleton, {
+		className: open ? "h-10 w-full" : "h-4 w-16",
+		"data-testid": "consumables-loading",
+		"aria-label": t("uiLibrary.consumablesPanel.loading", "Reading consumables…")
+	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WidgetPanel, {
 		title: t("uiLibrary.consumablesPanel.title", "Consumables"),
 		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Gauge, { className: "h-3.5 w-3.5 text-foreground-subtle" }),
 		bodyClassName: "p-3 overflow-y-auto",
-		children: items.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		collapsible: true,
+		open,
+		onOpenChange: setChoice,
+		headerRight: open ? void 0 : summary === null ? loading : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SummaryLine, {
+			summary,
+			t
+		}),
+		children: slice === void 0 ? loading : slice.items.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 			className: "text-[11px] text-foreground-subtle italic leading-relaxed",
 			children: t("uiLibrary.consumablesPanel.empty", "No consumables reported.")
 		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "flex flex-col gap-2",
-			children: items.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConsumableRow, {
+			className: "grid grid-cols-1 gap-2 sm:grid-cols-2",
+			children: slice.items.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConsumableRow, {
 				item,
 				busy: busyKey === item.key,
 				canReset: available,
@@ -20785,49 +21118,6 @@ function useCapabilityPresence(capabilityName) {
 	return classifyCapability(query.data);
 }
 //#endregion
-//#region src/primitives/button.tsx
-var buttonVariants = cva("inline-flex items-center justify-center rounded-md font-medium transition-colors cursor-pointer disabled:opacity-50 disabled:pointer-events-none", {
-	variants: {
-		variant: {
-			primary: "bg-primary text-primary-foreground hover:bg-primary/90",
-			secondary: "bg-surface text-foreground hover:bg-surface-hover",
-			ghost: "hover:bg-surface-hover text-foreground-muted",
-			danger: "bg-danger text-white hover:bg-danger/90",
-			outline: "border border-border bg-transparent text-foreground hover:bg-surface-hover"
-		},
-		size: {
-			sm: "h-7 px-2.5 text-xs gap-1.5",
-			md: "h-8 px-3 text-sm gap-2",
-			lg: "h-9 px-4 text-sm gap-2"
-		}
-	},
-	defaultVariants: {
-		variant: "primary",
-		size: "sm"
-	}
-});
-var Button = (0, react$1.forwardRef)(({ className, variant, size, ...props }, ref) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-		ref,
-		className: cn(buttonVariants({
-			variant,
-			size
-		}), className),
-		...props
-	});
-});
-Button.displayName = "Button";
-//#endregion
-//#region src/primitives/skeleton.tsx
-var Skeleton = (0, react$1.forwardRef)(({ className, ...props }, ref) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		ref,
-		className: cn("animate-pulse bg-surface-hover rounded-md h-4 w-full", className),
-		...props
-	});
-});
-Skeleton.displayName = "Skeleton";
-//#endregion
 //#region src/composites/cap-settings/recording-timeline-model.ts
 /** Tie-break precedence for a bucket's dominant kind (first wins on equal count). */
 var KIND_PRECEDENCE = [
@@ -47102,147 +47392,6 @@ function BatteryBadge$2({ level }) {
 	});
 }
 /**
-* Pure helper — partitions a tank kind into "supply" (low is bad) vs
-* "waste" (full is bad) via an exhaustive switch. A future TankKind that
-* forgets to classify itself fails the build (the `never` default arm),
-* rather than silently defaulting to the waste branch.
-*/
-function tankIsSupply(kind) {
-	switch (kind) {
-		case "cleanWater": return true;
-		case "detergent": return true;
-		case "dirtyWater": return false;
-		case "dustBin": return false;
-		default: return kind;
-	}
-}
-/**
-* Pure helper — classifies a tank as `ok` or `warning`.
-*
-* Clean-water + detergent are "supply" tanks: low is bad. Dirty-water +
-* dust-bin are "waste" tanks: full is bad. Prefers the numeric `level`
-* (thresholds 15 / 85), falling back to the discrete `status` flag. Both
-* unknown → `ok`. Exhaustive over TankKind.
-*/
-function tankAlert(kind, tank) {
-	const isSupply = tankIsSupply(kind);
-	if (tank.level !== null) {
-		if (isSupply) return tank.level <= 15 ? "warning" : "ok";
-		return tank.level >= 85 ? "warning" : "ok";
-	}
-	if (tank.status !== null) {
-		if (isSupply) return tank.status === "low" ? "warning" : "ok";
-		return tank.status === "full" ? "warning" : "ok";
-	}
-	return "ok";
-}
-function tankMeta(t, kind) {
-	switch (kind) {
-		case "cleanWater": return {
-			label: t("uiLibrary.vacuum.cleanWater", "Clean water"),
-			icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Droplet, { className: "h-3.5 w-3.5" })
-		};
-		case "dirtyWater": return {
-			label: t("uiLibrary.vacuum.dirtyWater", "Dirty water"),
-			icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Droplets, { className: "h-3.5 w-3.5" })
-		};
-		case "detergent": return {
-			label: t("uiLibrary.vacuum.detergent", "Detergent"),
-			icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FlaskConical, { className: "h-3.5 w-3.5" })
-		};
-		case "dustBin": return {
-			label: t("uiLibrary.vacuum.dustBin", "Dust bin"),
-			icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Trash2, { className: "h-3.5 w-3.5" })
-		};
-		default: return kind;
-	}
-}
-/**
-* TankIndicator — one tank row: label + glyph, then a fill bar (numeric
-* level) or a status pill (discrete), tinted by `tankAlert`. Renders
-* nothing only when the tank is absent (null). A PRESENT tank whose
-* reading is unknown (both fields null) still renders a neutral row with
-* an em-dash placeholder, so the user always sees which tanks the robot
-* has (Dreame reports presence but no fill telemetry).
-*/
-function TankIndicator({ kind, tank }) {
-	const t = useUiText();
-	if (tank === null) return null;
-	const meta = tankMeta(t, kind);
-	const warning = tankAlert(kind, tank) === "warning";
-	if (tank.level !== null) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "flex items-center gap-2 text-xs",
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-				className: cn("inline-flex items-center gap-1 w-24 shrink-0", warning ? "text-warning" : "text-foreground-subtle"),
-				children: [meta.icon, meta.label]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "relative h-1.5 flex-1 overflow-hidden rounded-full bg-surface-hover",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: cn("absolute inset-y-0 left-0 rounded-full transition-all", warning ? "bg-warning" : "bg-primary"),
-					style: { width: `${tank.level}%` }
-				})
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-				className: cn("tabular-nums w-9 text-right", warning ? "text-warning" : "text-foreground-subtle"),
-				children: [tank.level, "%"]
-			})
-		]
-	});
-	if (tank.status !== null) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "flex items-center gap-2 text-xs",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-			className: cn("inline-flex items-center gap-1 w-24 shrink-0", warning ? "text-warning" : "text-foreground-subtle"),
-			children: [meta.icon, meta.label]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConsumableLevelBadge, {
-			level: warning ? "low" : "ok",
-			label: tankStatusLabel(t, tank.status),
-			size: "sm"
-		})]
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "flex items-center gap-2 text-xs",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-			className: "inline-flex items-center gap-1 w-24 shrink-0 text-foreground-subtle",
-			children: [meta.icon, meta.label]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConsumableLevelBadge, {
-			level: null,
-			size: "sm"
-		})]
-	});
-}
-/** A tank's discrete reading in words; the tone is `tankAlert`'s (a full waste tank warns, a full supply tank does not). */
-function tankStatusLabel(t, status) {
-	switch (status) {
-		case "ok": return consumableLevelLabel("ok", t);
-		case "low": return consumableLevelLabel("low", t);
-		case "full": return t("uiLibrary.vacuum.tankFull", "Full");
-	}
-}
-/**
-* TanksRow — compact 2-column grid of the present tanks for the vacuum
-* hero. Absent tanks (null) are skipped; every PRESENT tank is shown, even
-* when its reading is unknown (`{level:null,status:null}`) — it renders a
-* neutral em-dash row. The row renders iff the robot has at least one tank.
-*/
-function TanksRow({ cleanWater, dirtyWater, detergent, dustBin }) {
-	const tanks = [
-		["cleanWater", cleanWater],
-		["dirtyWater", dirtyWater],
-		["detergent", detergent],
-		["dustBin", dustBin]
-	];
-	if (!tanks.some(([, t]) => t !== null)) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "grid grid-cols-1 gap-x-6 gap-y-2 rounded-md border border-border bg-surface-hover/40 p-3 sm:grid-cols-2",
-		children: tanks.map(([kind, tank]) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TankIndicator, {
-			kind,
-			tank
-		}, kind))
-	});
-}
-/**
 * VacuumInlineControl — compact, state-aware vacuum controls for a
 * device-list row. Start / Pause / Return-to-base + battery badge.
 */
@@ -47324,114 +47473,105 @@ function VacuumHeroCard({ trpc, deviceId }) {
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "flex flex-col items-stretch gap-4 rounded-lg border border-border bg-surface p-4",
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex items-center gap-6",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(VacuumGraphic, {
-					state,
-					batteryLevel: slice?.batteryLevel ?? null
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "flex flex-col gap-3 flex-1",
-					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "flex items-center justify-between",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: cn("text-3xl font-semibold", meta.tone),
-								children: meta.label
-							}), slice?.batteryLevel != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BatteryBadge$2, { level: slice.batteryLevel })]
-						}),
-						slice?.progressPercent != null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "flex items-center gap-2",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: "h-1.5 flex-1 rounded bg-surface-hover overflow-hidden",
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-									className: "h-full bg-primary transition-[width] duration-500",
-									style: { width: `${Math.max(0, Math.min(100, slice.progressPercent))}%` }
-								})
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-								className: "tabular-nums text-xs text-foreground-subtle",
-								children: [Math.round(slice.progressPercent), "%"]
-							})]
-						}),
-						slice?.errorCode != null && slice.errorCode !== 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "inline-flex items-center gap-1 text-xs text-destructive",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TriangleAlert, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: slice.errorLabel ?? t("uiLibrary.vacuum.errorCode", "Error {{code}}", { code: slice.errorCode }) })]
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "flex items-center gap-2",
-							children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(VacuumHeroButton, {
-									label: t("uiLibrary.vacuum.start", "Start"),
-									busy,
-									active: state === "cleaning",
-									onClick: () => press(cap.start),
-									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Play, { className: "h-5 w-5" })
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(VacuumHeroButton, {
-									label: t("uiLibrary.vacuum.pause", "Pause"),
-									busy,
-									active: state === "paused",
-									onClick: () => press(cap.pause),
-									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Pause, { className: "h-5 w-5" })
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(VacuumHeroButton, {
-									label: t("uiLibrary.vacuum.stop", "Stop"),
-									busy,
-									active: false,
-									onClick: () => press(cap.stop),
-									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Square, { className: "h-4 w-4" })
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(VacuumHeroButton, {
-									label: t("uiLibrary.vacuum.returnToBase", "Return to base"),
-									busy,
-									active: state === "returning" || state === "docked",
-									onClick: () => press(cap.returnToBase),
-									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(House, { className: "h-5 w-5" })
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(VacuumHeroButton, {
-									label: t("uiLibrary.vacuum.locate", "Locate"),
-									busy,
-									active: false,
-									onClick: () => press(cap.locate),
-									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Megaphone, { className: "h-5 w-5" })
-								})
-							]
-						})
-					]
-				})]
-			}),
-			fanSpeeds.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.vacuum.fanSpeed", "Fan speed")
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
-					"aria-label": t("uiLibrary.vacuum.fanSpeed", "Fan speed"),
-					value: slice?.fanSpeed ?? "",
-					disabled: busy,
-					onChange: (e) => {
-						onFanSpeed(e.target.value);
-					},
-					onClick: (e) => {
-						e.stopPropagation();
-					},
-					className: "flex-1 rounded border border-border bg-surface px-2 py-1 text-foreground disabled:opacity-50",
-					children: [slice?.fanSpeed == null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-						value: "",
-						children: "—"
-					}), fanSpeeds.map((s) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-						value: s,
-						children: s
-					}, s))]
-				})]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TanksRow, {
-				cleanWater: slice?.cleanWater ?? null,
-				dirtyWater: slice?.dirtyWater ?? null,
-				detergent: slice?.detergent ?? null,
-				dustBin: slice?.dustBin ?? null
-			})
-		]
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center gap-6",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(VacuumGraphic, {
+				state,
+				batteryLevel: slice?.batteryLevel ?? null
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-col gap-3 flex-1",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex items-center justify-between",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: cn("text-3xl font-semibold", meta.tone),
+							children: meta.label
+						}), slice?.batteryLevel != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BatteryBadge$2, { level: slice.batteryLevel })]
+					}),
+					slice?.progressPercent != null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "h-1.5 flex-1 rounded bg-surface-hover overflow-hidden",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "h-full bg-primary transition-[width] duration-500",
+								style: { width: `${Math.max(0, Math.min(100, slice.progressPercent))}%` }
+							})
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: "tabular-nums text-xs text-foreground-subtle",
+							children: [Math.round(slice.progressPercent), "%"]
+						})]
+					}),
+					slice?.errorCode != null && slice.errorCode !== 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "inline-flex items-center gap-1 text-xs text-destructive",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TriangleAlert, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: slice.errorLabel ?? t("uiLibrary.vacuum.errorCode", "Error {{code}}", { code: slice.errorCode }) })]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex items-center gap-2",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(VacuumHeroButton, {
+								label: t("uiLibrary.vacuum.start", "Start"),
+								busy,
+								active: state === "cleaning",
+								onClick: () => press(cap.start),
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Play, { className: "h-5 w-5" })
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(VacuumHeroButton, {
+								label: t("uiLibrary.vacuum.pause", "Pause"),
+								busy,
+								active: state === "paused",
+								onClick: () => press(cap.pause),
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Pause, { className: "h-5 w-5" })
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(VacuumHeroButton, {
+								label: t("uiLibrary.vacuum.stop", "Stop"),
+								busy,
+								active: false,
+								onClick: () => press(cap.stop),
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Square, { className: "h-4 w-4" })
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(VacuumHeroButton, {
+								label: t("uiLibrary.vacuum.returnToBase", "Return to base"),
+								busy,
+								active: state === "returning" || state === "docked",
+								onClick: () => press(cap.returnToBase),
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(House, { className: "h-5 w-5" })
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(VacuumHeroButton, {
+								label: t("uiLibrary.vacuum.locate", "Locate"),
+								busy,
+								active: false,
+								onClick: () => press(cap.locate),
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Megaphone, { className: "h-5 w-5" })
+							})
+						]
+					})
+				]
+			})]
+		}), fanSpeeds.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.vacuum.fanSpeed", "Fan speed")
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
+				"aria-label": t("uiLibrary.vacuum.fanSpeed", "Fan speed"),
+				value: slice?.fanSpeed ?? "",
+				disabled: busy,
+				onChange: (e) => {
+					onFanSpeed(e.target.value);
+				},
+				onClick: (e) => {
+					e.stopPropagation();
+				},
+				className: "flex-1 rounded border border-border bg-surface px-2 py-1 text-foreground disabled:opacity-50",
+				children: [slice?.fanSpeed == null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+					value: "",
+					children: "—"
+				}), fanSpeeds.map((s) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+					value: s,
+					children: s
+				}, s))]
+			})]
+		})]
 	});
 }
 //#endregion
@@ -50359,6 +50499,9 @@ function PetFeederHeroCard({ trpc, deviceId, features, optimistic }) {
 * 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
@@ -50492,60 +50635,44 @@ function DishwasherPanel({ trpc, deviceId, layout }) {
 		if (busy) return;
 		fn();
 	};
-	if (layout === "compact") {
-		const saltWarn = display.saltLevel === "low" || display.saltLevel === "empty";
-		const rinseWarn = display.rinseAidLevel === "low" || display.rinseAidLevel === "empty";
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "inline-flex items-center gap-1.5 max-w-full",
-			children: [
-				display.doorOpen === 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.remainingSeconds != null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-					className: "inline-flex items-center gap-0.5 text-xs text-foreground-subtle tabular-nums shrink-0",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Timer, { className: "h-3 w-3" }), formatDuration(display.remainingSeconds, t)]
-				}),
-				saltWarn && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConsumableLevelBadge, {
-					level: display.saltLevel,
-					name: t("uiLibrary.dishwasher.salt", "Salt"),
-					size: "sm",
-					className: "shrink-0"
-				}),
-				rinseWarn && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConsumableLevelBadge, {
-					level: display.rinseAidLevel,
-					name: t("uiLibrary.dishwasher.rinseAid", "Rinse aid"),
-					size: "sm",
-					className: "shrink-0"
-				}),
-				/* @__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" })
-				})
-			]
-		});
-	}
+	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.remainingSeconds != null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "inline-flex items-center gap-0.5 text-xs text-foreground-subtle tabular-nums shrink-0",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Timer, { className: "h-3 w-3" }), formatDuration(display.remainingSeconds, t)]
+			}),
+			/* @__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",
@@ -50596,25 +50723,14 @@ function DishwasherPanel({ trpc, deviceId, layout }) {
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: "flex flex-wrap items-center gap-x-3 gap-y-1.5",
-							children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConsumableLevelBadge, {
-									name: t("uiLibrary.dishwasher.salt", "Salt"),
-									level: display.saltLevel
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConsumableLevelBadge, {
-									name: t("uiLibrary.dishwasher.rinseAid", "Rinse aid"),
-									level: display.rinseAidLevel
-								}),
-								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")]
-								}),
-								display.activeEvents.map((event) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "text-xs text-warning",
-									title: event,
-									children: featureLabel(event)
-								}, event))
-							]
+							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")]
+							}), 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",
@@ -68253,7 +68369,6 @@ exports.FilterBar = FilterBar;
 exports.Flame = Flame;
 exports.Flashlight = Flashlight;
 exports.FlashlightOff = FlashlightOff;
-exports.FlaskConical = FlaskConical;
 exports.FloatingEventStream = FloatingEventStream;
 exports.FloatingLogStream = FloatingLogStream;
 exports.FloatingPanel = FloatingPanel;
@@ -68945,7 +69060,6 @@ exports.summarizeHubCandidates = summarizeHubCandidates;
 exports.swatchFillClass = swatchFillClass;
 exports.swatchLineClass = swatchLineClass;
 exports.tabForSelector = tabForSelector;
-exports.tankAlert = tankAlert;
 exports.themeToCss = require_theme_to_root_css.themeToCss;
 exports.themeToRootCss = require_theme_to_root_css.themeToRootCss;
 exports.timeInState = timeInState;
@@ -69211,9 +69325,11 @@ exports.useDeviceExtensionListSlots = useDeviceExtensionListSlots;
 exports.useDeviceExtensionListSources = useDeviceExtensionListSources;
 exports.useDeviceExtensionSetSlot = useDeviceExtensionSetSlot;
 exports.useDeviceHistoryDeclareSeries = useDeviceHistoryDeclareSeries;
+exports.useDeviceHistoryDeleteOrphanSeries = useDeviceHistoryDeleteOrphanSeries;
 exports.useDeviceHistoryGetDeviceEnabled = useDeviceHistoryGetDeviceEnabled;
 exports.useDeviceHistoryGetStatus = useDeviceHistoryGetStatus;
 exports.useDeviceHistoryListNodeSeries = useDeviceHistoryListNodeSeries;
+exports.useDeviceHistoryListOrphanSeries = useDeviceHistoryListOrphanSeries;
 exports.useDeviceHistoryListSeries = useDeviceHistoryListSeries;
 exports.useDeviceHistoryQuery = useDeviceHistoryQuery;
 exports.useDeviceHistoryQueryMany = useDeviceHistoryQueryMany;
@@ -69666,6 +69782,7 @@ exports.useOsdManagerSetSlotCameraEnabled = useOsdManagerSetSlotCameraEnabled;
 exports.useOsdManagerUpsertTemplate = useOsdManagerUpsertTemplate;
 exports.useOsdSetOverlay = useOsdSetOverlay;
 exports.usePTZ = usePTZ;
+exports.usePersistedDisclosure = usePersistedDisclosure;
 exports.usePersistedPageSize = usePersistedPageSize;
 exports.usePetFeederCallPet = usePetFeederCallPet;
 exports.usePetFeederCancelFeed = usePetFeederCancelFeed;