@camstack/ui-library 1.2.352 → 1.2.353

package/CHANGELOG.md

@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.2.353] - 2026-10-29
+
+### Changed
+
+- The pet feeder card shows the food in the bowl with its unit (grams, or ounces with imperial units) instead of a bare number.
+
 ## [1.2.352] - 2026-10-29
 
 ### Changed

package/dist/composites/device-controls/pet-feeder-panel.d.ts

@@ -1,5 +1,17 @@
 import { type ReactNode } from "react";
 import type { ControlPanelProps } from "./types.js";
+export interface BowlReading {
+	/** Number text, `—` when the bowl is unknown. */
+	readonly text: string;
+	/** Unit symbol, `''` when the bowl is unknown. */
+	readonly unit: string;
+	/** Number and unit as one string, for labels. */
+	readonly label: string;
+	/** The bowl in grams, for the gauge fill; null when unknown. */
+	readonly grams: number | null;
+}
+/** The slice stores the bowl as a mass in kilograms (D944). */
+export declare function resolveBowlReading(kilograms: number | null, system: "metric" | "imperial"): BowlReading;
 export declare function PetFeederPanel({ trpc, deviceId, layout, optimistic }: ControlPanelProps): ReactNode;
 interface DeviceControlProps {
 	readonly trpc: ControlPanelProps["trpc"];

package/dist/index.cjs

@@ -53126,9 +53126,41 @@ var HOLD_DELAY_MS = 350;
 var HOLD_INTERVAL_MS = 70;
 var HOLD_ACCEL_AFTER = 8;
 var HOLD_FAST_STEP = 5;
-/** The slice stores the bowl as a mass in kilograms (D944); the card draws grams. */
-function bowlGrams(kilograms) {
-	return kilograms === null ? null : Math.round(kilograms * 1e3);
+/** Small bowl masses read in grams (ounces under imperial), never "0.022 kg":
+*  the shared resolver keeps mass in kilograms, so the panel picks the
+*  display unit and the resolver converts and labels it. */
+var BOWL_UNIT = {
+	metric: "g",
+	imperial: "oz"
+};
+var BOWL_PRECISION = {
+	metric: 0,
+	imperial: 1
+};
+/** The slice stores the bowl as a mass in kilograms (D944). */
+function resolveBowlReading(kilograms, system) {
+	if (kilograms === null) return {
+		text: "—",
+		unit: "",
+		label: "—",
+		grams: null
+	};
+	const shown = resolveSensorDisplay({
+		display: { perCap: { "pet-feeder": {
+			unit: BOWL_UNIT[system],
+			precision: BOWL_PRECISION[system]
+		} } },
+		capName: "pet-feeder",
+		quantity: "mass",
+		preference: system
+	}).format(kilograms);
+	const grams = (0, _camstack_types.tryConvertUnit)(kilograms, "kg", "g");
+	return {
+		text: shown.text,
+		unit: shown.unit,
+		label: `${shown.text} ${shown.unit}`,
+		grams: grams === void 0 ? null : Math.round(grams)
+	};
 }
 function clampPortion(grams) {
 	return Math.min(_camstack_types.PET_FEEDER_MANUAL_FEED_MAX, Math.max(_camstack_types.PET_FEEDER_MANUAL_FEED_MIN, grams));
@@ -53152,6 +53184,7 @@ function PetFeederPanel({ trpc, deviceId, layout, optimistic }) {
 	const [portion, setPortion] = usePortion(display?.lastFeedGrams ?? null);
 	const [hopper1, setHopper1] = usePortion(display?.lastFeedHopper1 ?? null);
 	const [hopper2, setHopper2] = usePortion(display?.lastFeedHopper2 ?? null);
+	const bowl = resolveBowlReading(display?.bowlFood ?? null, useUnitPreferences().system);
 	if (cap === void 0) return null;
 	if (display === void 0) return null;
 	const busy = !available;
@@ -53181,7 +53214,7 @@ function PetFeederPanel({ trpc, deviceId, layout, optimistic }) {
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UtensilsCrossed, {
 					className: "h-3.5 w-3.5",
 					"aria-hidden": true
-				}), bowlGrams(display.bowlFood) ?? "—"]
+				}), bowl.label]
 			}),
 			onMains && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 				className: "inline-flex items-center gap-0.5 text-xs text-foreground-subtle",
@@ -53227,21 +53260,29 @@ function PetFeederPanel({ trpc, deviceId, layout, optimistic }) {
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "flex items-center gap-4 rounded-lg border border-border/50 bg-surface-subtle/40 p-3",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(BowlGauge, {
-					grams: bowlGrams(display.bowlFood),
+					grams: bowl.grams,
+					label: bowl.label,
 					low: display.lowFood,
 					eating: display.eating
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "flex min-w-0 flex-1 flex-col gap-1.5",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "flex items-baseline gap-1",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "text-3xl font-bold leading-none tabular-nums",
-							style: { color: display.lowFood ? KIBBLE_LOW : KIBBLE },
-							children: bowlGrams(display.bowlFood) ?? "—"
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "text-sm text-foreground-subtle",
-							children: t("uiLibrary.petFeeder.inBowl", "in bowl")
-						})]
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "text-3xl font-bold leading-none tabular-nums",
+								style: { color: display.lowFood ? KIBBLE_LOW : KIBBLE },
+								children: bowl.text
+							}),
+							bowl.unit !== "" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "text-sm text-foreground-subtle",
+								children: bowl.unit
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "text-sm text-foreground-subtle",
+								children: t("uiLibrary.petFeeder.inBowl", "in bowl")
+							})
+						]
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-foreground-subtle",
 						children: [
@@ -53476,7 +53517,7 @@ function Readout({ icon, label }) {
 * bowl reading (`bowlFood`). Amber when stocked, red when the low-food flag is
 * set; the kibble mound bobs while the pet is eating.
 */
-function BowlGauge({ grams, low, eating }) {
+function BowlGauge({ grams, label, low, eating }) {
 	const t = useUiText();
 	const frac = Math.min(1, Math.max(0, (grams ?? 0) / _camstack_types.PET_FEEDER_MANUAL_FEED_MAX));
 	const fill = low ? KIBBLE_LOW : KIBBLE;
@@ -53486,7 +53527,7 @@ function BowlGauge({ grams, low, eating }) {
 		height: 72,
 		viewBox: "0 0 72 72",
 		role: "img",
-		"aria-label": grams === null ? t("uiLibrary.petFeeder.levelUnknown", "Food level unknown") : t("uiLibrary.petFeeder.gramsInBowl", "{{grams}} in bowl", { grams }),
+		"aria-label": grams === null ? t("uiLibrary.petFeeder.levelUnknown", "Food level unknown") : t("uiLibrary.petFeeder.gramsInBowl", "{{amount}} in bowl", { amount: label }),
 		className: "shrink-0",
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("clipPath", {

package/dist/index.js

@@ -53102,9 +53102,41 @@ var HOLD_DELAY_MS = 350;
 var HOLD_INTERVAL_MS = 70;
 var HOLD_ACCEL_AFTER = 8;
 var HOLD_FAST_STEP = 5;
-/** The slice stores the bowl as a mass in kilograms (D944); the card draws grams. */
-function bowlGrams(kilograms) {
-	return kilograms === null ? null : Math.round(kilograms * 1e3);
+/** Small bowl masses read in grams (ounces under imperial), never "0.022 kg":
+*  the shared resolver keeps mass in kilograms, so the panel picks the
+*  display unit and the resolver converts and labels it. */
+var BOWL_UNIT = {
+	metric: "g",
+	imperial: "oz"
+};
+var BOWL_PRECISION = {
+	metric: 0,
+	imperial: 1
+};
+/** The slice stores the bowl as a mass in kilograms (D944). */
+function resolveBowlReading(kilograms, system) {
+	if (kilograms === null) return {
+		text: "—",
+		unit: "",
+		label: "—",
+		grams: null
+	};
+	const shown = resolveSensorDisplay({
+		display: { perCap: { "pet-feeder": {
+			unit: BOWL_UNIT[system],
+			precision: BOWL_PRECISION[system]
+		} } },
+		capName: "pet-feeder",
+		quantity: "mass",
+		preference: system
+	}).format(kilograms);
+	const grams = tryConvertUnit(kilograms, "kg", "g");
+	return {
+		text: shown.text,
+		unit: shown.unit,
+		label: `${shown.text} ${shown.unit}`,
+		grams: grams === void 0 ? null : Math.round(grams)
+	};
 }
 function clampPortion(grams) {
 	return Math.min(PET_FEEDER_MANUAL_FEED_MAX, Math.max(PET_FEEDER_MANUAL_FEED_MIN, grams));
@@ -53128,6 +53160,7 @@ function PetFeederPanel({ trpc, deviceId, layout, optimistic }) {
 	const [portion, setPortion] = usePortion(display?.lastFeedGrams ?? null);
 	const [hopper1, setHopper1] = usePortion(display?.lastFeedHopper1 ?? null);
 	const [hopper2, setHopper2] = usePortion(display?.lastFeedHopper2 ?? null);
+	const bowl = resolveBowlReading(display?.bowlFood ?? null, useUnitPreferences().system);
 	if (cap === void 0) return null;
 	if (display === void 0) return null;
 	const busy = !available;
@@ -53157,7 +53190,7 @@ function PetFeederPanel({ trpc, deviceId, layout, optimistic }) {
 				children: [/* @__PURE__ */ jsx(UtensilsCrossed, {
 					className: "h-3.5 w-3.5",
 					"aria-hidden": true
-				}), bowlGrams(display.bowlFood) ?? "—"]
+				}), bowl.label]
 			}),
 			onMains && /* @__PURE__ */ jsxs("span", {
 				className: "inline-flex items-center gap-0.5 text-xs text-foreground-subtle",
@@ -53203,21 +53236,29 @@ function PetFeederPanel({ trpc, deviceId, layout, optimistic }) {
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex items-center gap-4 rounded-lg border border-border/50 bg-surface-subtle/40 p-3",
 				children: [/* @__PURE__ */ jsx(BowlGauge, {
-					grams: bowlGrams(display.bowlFood),
+					grams: bowl.grams,
+					label: bowl.label,
 					low: display.lowFood,
 					eating: display.eating
 				}), /* @__PURE__ */ jsxs("div", {
 					className: "flex min-w-0 flex-1 flex-col gap-1.5",
 					children: [/* @__PURE__ */ jsxs("div", {
 						className: "flex items-baseline gap-1",
-						children: [/* @__PURE__ */ jsx("span", {
-							className: "text-3xl font-bold leading-none tabular-nums",
-							style: { color: display.lowFood ? KIBBLE_LOW : KIBBLE },
-							children: bowlGrams(display.bowlFood) ?? "—"
-						}), /* @__PURE__ */ jsx("span", {
-							className: "text-sm text-foreground-subtle",
-							children: t("uiLibrary.petFeeder.inBowl", "in bowl")
-						})]
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "text-3xl font-bold leading-none tabular-nums",
+								style: { color: display.lowFood ? KIBBLE_LOW : KIBBLE },
+								children: bowl.text
+							}),
+							bowl.unit !== "" && /* @__PURE__ */ jsx("span", {
+								className: "text-sm text-foreground-subtle",
+								children: bowl.unit
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "text-sm text-foreground-subtle",
+								children: t("uiLibrary.petFeeder.inBowl", "in bowl")
+							})
+						]
 					}), /* @__PURE__ */ jsxs("div", {
 						className: "flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-foreground-subtle",
 						children: [
@@ -53452,7 +53493,7 @@ function Readout({ icon, label }) {
 * bowl reading (`bowlFood`). Amber when stocked, red when the low-food flag is
 * set; the kibble mound bobs while the pet is eating.
 */
-function BowlGauge({ grams, low, eating }) {
+function BowlGauge({ grams, label, low, eating }) {
 	const t = useUiText();
 	const frac = Math.min(1, Math.max(0, (grams ?? 0) / PET_FEEDER_MANUAL_FEED_MAX));
 	const fill = low ? KIBBLE_LOW : KIBBLE;
@@ -53462,7 +53503,7 @@ function BowlGauge({ grams, low, eating }) {
 		height: 72,
 		viewBox: "0 0 72 72",
 		role: "img",
-		"aria-label": grams === null ? t("uiLibrary.petFeeder.levelUnknown", "Food level unknown") : t("uiLibrary.petFeeder.gramsInBowl", "{{grams}} in bowl", { grams }),
+		"aria-label": grams === null ? t("uiLibrary.petFeeder.levelUnknown", "Food level unknown") : t("uiLibrary.petFeeder.gramsInBowl", "{{amount}} in bowl", { amount: label }),
 		className: "shrink-0",
 		children: [
 			/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camstack/ui-library",
-  "version": "1.2.352",
+  "version": "1.2.353",
   "repository": {
     "type": "git",
     "url": "https://github.com/camstack/server.git",