@camstack/ui-library 1.2.325 → 1.2.326

package/dist/composites/device-controls/control-panel.d.ts

@@ -4,7 +4,5 @@ import type { ControlPanelProps } from "./types.js";
 export declare function toDateInput(value: string): string;
 /** Trim an HA time value ('HH:MM:SS') to the `<input type=time>` shape ('HH:MM'). */
 export declare function toTimeInput(value: string): string;
-/** Trim an HA datetime value to the `<input type=datetime-local>` shape
-*  ('YYYY-MM-DDTHH:MM'). Accepts both 'T'- and space-separated forms. */
 export declare function toDateTimeInput(value: string): string;
 export declare function ControlPanel({ trpc, deviceId, features: _features, layout, optimistic }: ControlPanelProps): ReactNode;

package/dist/composites/device-controls/sensor-value-atom.d.ts

@@ -20,7 +20,7 @@
 * at the call site; narrowing occurs after `useDeviceStateSlice`.
 */
 import type { ReactNode } from "react";
-import type { DeviceProxy, SliceHandle } from "@camstack/types";
+import type { DeviceProxy, ReadingQuantity, SliceHandle } from "@camstack/types";
 import { type UseDeviceProxyTrpc } from "../../hooks/use-device-proxy";
 import { type ControlDateTimeFormat } from "../../lib/format-control-datetime";
 import type { DeviceItemDevice } from "../device-item/helpers";
@@ -28,12 +28,8 @@ interface NumericDescriptor {
 	readonly kind: "numeric";
 	/** Field in the slice that holds the numeric value. */
 	readonly field: string;
-	/** Canonical display unit for TYPED roles (temperature → '°C', humidity → '%',
-	*  ambient-light → 'lx', pressure → 'hPa'). When present the UI renders this
-	*  directly WITHOUT consulting the slice or sourceInfo.
-	*  For the generic `numeric-sensor` role this is `undefined` — the unit is
-	*  read live from the slice (`slice.unit`). */
-	readonly canonicalUnit?: string;
+	/** Quantity of the stored number. `device` reads `sourceInfo.quantity`. */
+	readonly quantity?: ReadingQuantity;
 	/** Accessor into DeviceProxy['state'] — returns a typed slice handle. */
 	readonly getSliceHandle: (state: DeviceProxy["state"]) => SliceHandle<unknown>;
 }
@@ -99,13 +95,9 @@ export declare function hasBatteryNumericValue(slice: unknown, field: string): b
 * avoids dynamic string indexing — each one is a concrete property
 * access on the typed `DeviceProxy['state']` shape.
 *
-* Canonical unit rules:
-*  - Typed roles (temperature/humidity/ambient-light/pressure/power/energy)
-*    carry a `canonicalUnit` constant. The slice is normalised to one unit
-*    so no per-device lookup is needed.
-*  - Generic `numeric-sensor` has no `canonicalUnit`. The unit is read live
-*    from the slice (`slice.unit`) as populated by the provider from the
-*    upstream source on every state push.
+* The unit comes from the descriptor's quantity through `resolveSensorDisplay`.
+* A generic numeric sensor uses quantity `device` and the device's
+* `sourceInfo.quantity`.
 */
 export declare const ROLE_DESCRIPTOR: Record<string, SensorDescriptor>;
 export interface StringSliceValue {

package/dist/index.cjs

@@ -20973,21 +20973,16 @@ Skeleton.displayName = "Skeleton";
 /** `value` null = unknown (D393) — renders an em-dash, never a fake `0`. */
 function formatRemaining(t, r) {
 	if (r.value === null) return "—";
-	const count = r.value;
-	switch (r.unit) {
-		case "days": return t("uiLibrary.consumablesPanel.days", {
-			one: "{{count}} day",
-			other: "{{count}} days"
-		}, { count });
-		case "hours": return t("uiLibrary.consumablesPanel.hours", {
-			one: "{{count}} hour",
-			other: "{{count}} hours"
-		}, { count });
-		case "cycles": return t("uiLibrary.consumablesPanel.cycles", {
-			one: "{{count}} cycle",
-			other: "{{count}} cycles"
-		}, { count });
-	}
+	if (r.kind === "count") return t("uiLibrary.consumablesPanel.cycles", {
+		one: "{{count}} cycle",
+		other: "{{count}} cycles"
+	}, { count: r.value });
+	const rendered = (0, _camstack_types.formatReading)({
+		value: r.value,
+		quantity: "duration",
+		precision: 0
+	});
+	return rendered.unit.length === 0 ? rendered.text : `${rendered.text} ${rendered.unit}`;
 }
 /** Format a ms-epoch as a compact local date for the "replaced" hint. */
 function formatResetAt(ms) {
@@ -46083,6 +46078,66 @@ function formatNumeric(value, precision) {
 	return Number.isInteger(value) ? String(value) : value.toFixed(1);
 }
 //#endregion
+//#region src/lib/resolve-sensor-display.ts
+function canonUnit(raw) {
+	if (raw === void 0) return void 0;
+	return (0, _camstack_types.normalizeUnit)(raw) ?? raw;
+}
+function concreteQuantity(input) {
+	if (input.quantity === void 0) return void 0;
+	if (input.quantity === "device") {
+		const chosen = input.deviceQuantity;
+		if (chosen === void 0 || chosen === "device") return void 0;
+		return chosen;
+	}
+	return input.quantity;
+}
+function resolveSensorDisplay(input) {
+	const perCap = input.capName !== void 0 ? input.display?.perCap?.[input.capName] : void 0;
+	const precision = perCap?.precision ?? input.display?.precision ?? input.roleDefault?.precision ?? input.declarationPrecision;
+	const quantity = concreteQuantity(input);
+	const preference = input.preference ?? _camstack_types.DEFAULT_DISPLAY_PREFERENCE;
+	const base = quantity === void 0 ? void 0 : (0, _camstack_types.baseUnitOf)(quantity);
+	const preferred = quantity === void 0 ? void 0 : (0, _camstack_types.displayUnitFor)(quantity, preference);
+	const overrideUnit = canonUnit(perCap?.unit ?? input.display?.unit ?? input.roleDefault?.unit);
+	const overrideOk = overrideUnit !== void 0 && base !== void 0 && overrideUnit !== base && (0, _camstack_types.canConvertUnit)(base, overrideUnit);
+	const unit = overrideOk ? overrideUnit : preferred ?? "";
+	const scales = quantity === "duration" || quantity === "information" || quantity === "duration-ms";
+	const toDisplayValue = (raw) => {
+		if (scales || base === void 0 || unit.length === 0 || unit === base) return raw;
+		return (0, _camstack_types.tryConvertUnit)(raw, base, unit) ?? raw;
+	};
+	const fromDisplayValue = (shown) => {
+		if (scales || base === void 0 || unit.length === 0 || unit === base) return shown;
+		return (0, _camstack_types.tryConvertUnit)(shown, unit, base) ?? shown;
+	};
+	const format = (raw) => {
+		if (quantity !== void 0 && !overrideOk) {
+			const rendered = (0, _camstack_types.formatReading)({
+				value: raw,
+				quantity,
+				preference,
+				precision
+			});
+			return {
+				text: rendered.text,
+				unit: rendered.unit
+			};
+		}
+		return {
+			text: formatNumeric(toDisplayValue(raw), precision),
+			unit
+		};
+	};
+	return {
+		unit,
+		precision,
+		toDisplayValue,
+		fromDisplayValue,
+		format
+	};
+}
+//#endregion
 //#region src/lib/format-control-datetime.ts
 var DATE_RE = /^(\d{4})-(\d{2})-(\d{2})/;
 var TIME_RE = /^(\d{2}):(\d{2})(?::(\d{2}))?$/;
@@ -46148,8 +46203,20 @@ function toDateInput(value) {
 function toTimeInput(value) {
 	return value.slice(0, 5);
 }
-/** Trim an HA datetime value to the `<input type=datetime-local>` shape
-*  ('YYYY-MM-DDTHH:MM'). Accepts both 'T'- and space-separated forms. */
+function datetimeEditor(format, rawValue) {
+	if (format === "date") return {
+		type: "date",
+		value: toDateInput(rawValue)
+	};
+	if (format === "time") return {
+		type: "time",
+		value: toTimeInput(rawValue)
+	};
+	return {
+		type: "datetime-local",
+		value: toDateTimeInput(rawValue)
+	};
+}
 function toDateTimeInput(value) {
 	return (value.includes("T") ? value : value.replace(" ", "T")).slice(0, 16);
 }
@@ -46242,24 +46309,35 @@ function TextControl({ value, busy, onCommit }) {
 		className: cn("rounded border border-border bg-surface px-2 py-0.5 text-xs", busy && "opacity-40 cursor-not-allowed")
 	});
 }
-function ControlWidget({ slice, busy, setValueFn, layout }) {
+function ControlWidget({ slice, busy, setValueFn, layout, quantity, display, dateTimeShape }) {
 	const t = useUiText();
 	switch (slice.kind) {
-		case "numeric": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NumericControl, {
-			value: typeof slice.value === "number" ? slice.value : Number(slice.value),
-			busy,
-			onCommit: (v) => {
-				setValueFn({ control: {
-					kind: "numeric",
-					value: v
-				} });
-			},
-			unit: slice.unit,
-			min: slice.min,
-			max: slice.max,
-			step: slice.step,
-			precision: slice.precision
-		});
+		case "numeric": {
+			const numericValue = typeof slice.value === "number" ? slice.value : Number(slice.value);
+			const resolved = quantity === void 0 ? void 0 : resolveSensorDisplay({
+				quantity,
+				display,
+				capName: "control"
+			});
+			const toShown = resolved?.toDisplayValue ?? ((raw) => raw);
+			const toBase = resolved?.fromDisplayValue ?? ((shown) => shown);
+			const unit = resolved !== void 0 && resolved.unit.length > 0 ? resolved.unit : void 0;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NumericControl, {
+				value: toShown(numericValue),
+				busy,
+				onCommit: (v) => {
+					setValueFn({ control: {
+						kind: "numeric",
+						value: toBase(v)
+					} });
+				},
+				unit,
+				min: slice.min === void 0 ? void 0 : toShown(slice.min),
+				max: slice.max === void 0 ? void 0 : toShown(slice.max),
+				step: slice.step === void 0 ? void 0 : toShown(slice.step),
+				precision: resolved?.precision
+			});
+		}
 		case "select": {
 			const selectValue = String(slice.value);
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
@@ -46292,7 +46370,7 @@ function ControlWidget({ slice, busy, setValueFn, layout }) {
 		});
 		case "datetime": {
 			const rawValue = String(slice.value);
-			const format = slice.format ?? "datetime";
+			const format = dateTimeShape ?? "datetime";
 			if (layout === "compact") {
 				if (rawValue === "") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					"aria-label": t("uiLibrary.controlPanel.value", "Control value"),
@@ -46305,8 +46383,9 @@ function ControlWidget({ slice, busy, setValueFn, layout }) {
 					children: formatControlDateTime(rawValue, format)
 				});
 			}
-			const inputType = format === "date" ? "date" : format === "time" ? "time" : "datetime-local";
-			const inputValue = format === "date" ? toDateInput(rawValue) : format === "time" ? toTimeInput(rawValue) : toDateTimeInput(rawValue);
+			const editor = datetimeEditor(format, rawValue);
+			const inputType = editor.type;
+			const inputValue = editor.value;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 				type: inputType,
 				"aria-label": t("uiLibrary.controlPanel.value", "Control value"),
@@ -46326,6 +46405,7 @@ function ControlWidget({ slice, busy, setValueFn, layout }) {
 	}
 }
 function ControlPanel({ trpc, deviceId, features: _features, layout, optimistic }) {
+	const info = useOptionalSystem()?.getDeviceInfo(deviceId) ?? null;
 	const { cap, slice, available } = useDeviceCapability({
 		trpc,
 		deviceId,
@@ -46335,6 +46415,8 @@ function ControlPanel({ trpc, deviceId, features: _features, layout, optimistic
 	const { display, applyOptimistic } = useOptimisticSlice(slice, { enabled: optimistic ?? true });
 	if (display === void 0) return null;
 	const busy = !available;
+	const chosen = info?.sourceInfo?.quantity;
+	const quantity = (0, _camstack_types.isReadingQuantity)(chosen) && chosen !== "device" && chosen !== "none" ? chosen : void 0;
 	const setValueFn = (input) => {
 		if (!busy && cap) {
 			applyOptimistic({ value: input.control.value });
@@ -46348,7 +46430,10 @@ function ControlPanel({ trpc, deviceId, features: _features, layout, optimistic
 			slice: display,
 			busy,
 			setValueFn,
-			layout
+			layout,
+			quantity,
+			display: info?.display,
+			dateTimeShape: info?.sourceInfo?.dateTimeShape
 		})
 	});
 }
@@ -46452,30 +46537,6 @@ function PopoverRowAction({ icon: Icon, title, children }) {
 	}), document.body)] });
 }
 //#endregion
-//#region src/lib/resolve-sensor-display.ts
-/** Table keys are canonical spellings; providers often send `C` / `F` / `celsius`. */
-function canonUnit(raw) {
-	if (raw === void 0) return void 0;
-	return (0, _camstack_types.normalizeUnit)(raw) ?? raw;
-}
-var identity = (raw) => raw;
-function resolveSensorDisplay(input) {
-	const perCap = input.capName !== void 0 ? input.display?.perCap?.[input.capName] : void 0;
-	const precision = perCap?.precision ?? input.display?.precision ?? input.roleDefault?.precision ?? input.slicePrecision;
-	const sourceUnit = canonUnit(input.sliceUnit ?? input.canonicalUnit);
-	const overrideUnit = canonUnit(perCap?.unit ?? input.display?.unit ?? input.roleDefault?.unit);
-	if (overrideUnit !== void 0 && sourceUnit !== void 0 && overrideUnit !== sourceUnit && (0, _camstack_types.canConvertUnit)(sourceUnit, overrideUnit)) return {
-		unit: overrideUnit,
-		precision,
-		toDisplayValue: (raw) => (0, _camstack_types.tryConvertUnit)(raw, sourceUnit, overrideUnit) ?? raw
-	};
-	return {
-		unit: sourceUnit ?? "",
-		precision,
-		toDisplayValue: identity
-	};
-}
-//#endregion
 //#region src/composites/device-controls/sensor-value-atom.tsx
 /**
 * Binary fallback for the `battery-sensor` role.
@@ -46516,102 +46577,105 @@ function hasBatteryNumericValue(slice, field) {
 * avoids dynamic string indexing — each one is a concrete property
 * access on the typed `DeviceProxy['state']` shape.
 *
-* Canonical unit rules:
-*  - Typed roles (temperature/humidity/ambient-light/pressure/power/energy)
-*    carry a `canonicalUnit` constant. The slice is normalised to one unit
-*    so no per-device lookup is needed.
-*  - Generic `numeric-sensor` has no `canonicalUnit`. The unit is read live
-*    from the slice (`slice.unit`) as populated by the provider from the
-*    upstream source on every state push.
+* The unit comes from the descriptor's quantity through `resolveSensorDisplay`.
+* A generic numeric sensor uses quantity `device` and the device's
+* `sourceInfo.quantity`.
 */
 var ROLE_DESCRIPTOR = {
 	"temperature-sensor": {
 		kind: "numeric",
 		field: "celsius",
-		canonicalUnit: "°C",
+		quantity: "temperature",
 		getSliceHandle: (s) => s.temperatureSensor
 	},
 	"humidity-sensor": {
 		kind: "numeric",
 		field: "percent",
-		canonicalUnit: "%",
+		quantity: "humidity",
 		getSliceHandle: (s) => s.humiditySensor
 	},
 	"ambient-light-sensor": {
 		kind: "numeric",
 		field: "lux",
-		canonicalUnit: "lx",
+		quantity: "illuminance",
 		getSliceHandle: (s) => s.ambientLightSensor
 	},
 	"pressure-sensor": {
 		kind: "numeric",
 		field: "hpa",
-		canonicalUnit: "hPa",
+		quantity: "pressure",
 		getSliceHandle: (s) => s.pressureSensor
 	},
 	"numeric-sensor": {
 		kind: "numeric",
 		field: "value",
+		quantity: "device",
 		getSliceHandle: (s) => s.numericSensor
 	},
 	"wind-sensor": {
 		kind: "numeric",
 		field: "value",
+		quantity: "device",
 		getSliceHandle: (s) => s.numericSensor
 	},
 	"rain-sensor": {
 		kind: "numeric",
 		field: "value",
+		quantity: "device",
 		getSliceHandle: (s) => s.numericSensor
 	},
 	"uv-sensor": {
 		kind: "numeric",
 		field: "value",
+		quantity: "device",
 		getSliceHandle: (s) => s.numericSensor
 	},
 	"solar-radiation-sensor": {
 		kind: "numeric",
 		field: "value",
+		quantity: "device",
 		getSliceHandle: (s) => s.numericSensor
 	},
 	"soil-moisture-sensor": {
 		kind: "numeric",
 		field: "value",
+		quantity: "device",
 		getSliceHandle: (s) => s.numericSensor
 	},
 	"power-sensor": {
 		kind: "numeric",
 		field: "watts",
-		canonicalUnit: "W",
+		quantity: "power",
 		getSliceHandle: (s) => s.powerMeter
 	},
 	"energy-sensor": {
 		kind: "numeric",
 		field: "kwhTotal",
-		canonicalUnit: "kWh",
+		quantity: "energy",
 		getSliceHandle: (s) => s.powerMeter
 	},
 	"voltage-sensor": {
 		kind: "numeric",
 		field: "volts",
-		canonicalUnit: "V",
+		quantity: "voltage",
 		getSliceHandle: (s) => s.powerMeter
 	},
 	"current-sensor": {
 		kind: "numeric",
 		field: "amps",
-		canonicalUnit: "A",
+		quantity: "current",
 		getSliceHandle: (s) => s.powerMeter
 	},
 	"battery-sensor": {
 		kind: "numeric",
 		field: "value",
-		canonicalUnit: "%",
+		quantity: "percentage",
 		getSliceHandle: (s) => s.numericSensor
 	},
 	"generic-sensor": {
 		kind: "numeric",
 		field: "value",
+		quantity: "device",
 		getSliceHandle: (s) => s.numericSensor
 	},
 	"motion-sensor": {
@@ -46729,19 +46793,16 @@ function SensorValueAtom({ trpc, device }) {
 			children: enumSensorSlice.value
 		});
 		if (numericIsColStart) return null;
-		const sliceRecord = slice;
-		const liveUnit = typeof sliceRecord["unit"] === "string" ? sliceRecord["unit"] : void 0;
-		const slicePrecision = typeof sliceRecord["precision"] === "number" ? sliceRecord["precision"] : void 0;
-		const resolved = resolveSensorDisplay({
+		const deviceQuantity = device.sourceInfo?.quantity;
+		const rendered = resolveSensorDisplay({
 			display: device.display,
 			capName: device.role === "numeric-sensor" ? "numeric-sensor" : void 0,
 			roleDefault: device.role != null ? roleDefaultsData?.defaults[device.role] : void 0,
-			sliceUnit: liveUnit,
-			slicePrecision,
-			canonicalUnit: descriptor.canonicalUnit
-		});
-		const unit = resolved.unit;
-		const formatted = formatNumeric(resolved.toDisplayValue(rawValue), resolved.precision);
+			quantity: descriptor.quantity ?? "device",
+			deviceQuantity: deviceQuantity === "device" ? void 0 : deviceQuantity
+		}).format(rawValue);
+		const unit = rendered.unit;
+		const formatted = rendered.text;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 			className: cn("inline-flex items-baseline gap-0.5 tabular-nums text-xs text-foreground"),
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: formatted }), unit && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -46771,7 +46832,7 @@ function SensorValueAtom({ trpc, device }) {
 	if (descriptor.kind === "datetime") {
 		if (!isStringSliceValue(slice)) return null;
 		if (slice.value === "") return null;
-		const format = readSliceDateTimeFormat(slice) ?? descriptor.format;
+		const format = device.sourceInfo?.dateTimeShape ?? readSliceDateTimeFormat(slice) ?? descriptor.format;
 		const formatted = formatControlDateTime(slice.value, format);
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: cn("inline-flex items-baseline text-xs text-foreground"),
@@ -47326,17 +47387,14 @@ function SensorInlineControl({ trpc, deviceId }) {
 *
 * Renders:
 *  - Typed numeric sensors: value in `text-3xl font-semibold tabular-nums` +
-*    canonical unit from ROLE_DESCRIPTOR (e.g. temperature-sensor → '°C').
-*  - Generic numeric-sensor: value + unit read live from the slice
-*    (`slice.unit`, populated by the HA provider from state attributes).
+*    the unit `resolveSensorDisplay` derives from the quantity.
+*  - Generic numeric-sensor: the same formatter, with the device's quantity.
 *  - Binary sensors: coloured state badge ("Detected"/"Clear" etc.) — same
 *    labels and colours as SensorValueAtom's binary branch.
 *  - Presence: Home/Away/zone-name badge — same labels as SensorValueAtom.
 *  - All: sensor name label below the value.
 *
-* Unit resolution uses the same logic as SensorValueAtom (live slice.unit
-* wins, ROLE_DESCRIPTOR canonicalUnit as fallback) — the two surfaces stay
-* in sync.
+* Unit resolution uses the same formatter as SensorValueAtom.
 */
 function isNumericSliceValue(v) {
 	return typeof v === "object" && v !== null;
@@ -47403,19 +47461,16 @@ function SensorHeroInner({ trpc, device }) {
 		if (!isNumericSliceValue(slice)) return null;
 		const rawValue = slice[descriptor.field];
 		if (typeof rawValue !== "number") return null;
-		const sliceRecord = slice;
-		const liveUnit = typeof sliceRecord["unit"] === "string" ? sliceRecord["unit"] : void 0;
-		const slicePrecision = typeof sliceRecord["precision"] === "number" ? sliceRecord["precision"] : void 0;
-		const resolved = resolveSensorDisplay({
+		const deviceQuantity = device.sourceInfo?.quantity;
+		const rendered = resolveSensorDisplay({
 			display: device.display,
 			capName: device.role === "numeric-sensor" ? "numeric-sensor" : void 0,
 			roleDefault: device.role != null ? roleDefaultsData?.defaults[device.role] : roleDefaultsData?.defaults["temperature-sensor"],
-			sliceUnit: liveUnit,
-			slicePrecision,
-			canonicalUnit: descriptor.canonicalUnit
-		});
-		const unit = resolved.unit;
-		const formatted = formatNumeric(resolved.toDisplayValue(rawValue), resolved.precision);
+			quantity: descriptor.quantity ?? "device",
+			deviceQuantity: deviceQuantity === "device" ? void 0 : deviceQuantity
+		}).format(rawValue);
+		const unit = rendered.unit;
+		const formatted = rendered.text;
 		const occupancyOn = occupancySlice !== void 0 && isBinarySliceValue(occupancySlice) && typeof occupancySlice["on"] === "boolean" ? Boolean(occupancySlice["on"]) : null;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "flex flex-col items-center justify-center gap-2 rounded-lg border border-border bg-surface p-4",
@@ -47471,7 +47526,7 @@ function SensorHeroInner({ trpc, device }) {
 				children: t("uiLibrary.sensorHeroCard.awaiting", "Awaiting state…")
 			})]
 		});
-		const format = readSliceDateTimeFormat(slice) ?? descriptor.format;
+		const format = device.sourceInfo?.dateTimeShape ?? readSliceDateTimeFormat(slice) ?? descriptor.format;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "flex flex-col items-center justify-center gap-2 rounded-lg border border-border bg-surface p-4",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -49927,10 +49982,15 @@ function useWeather(trpc, deviceId) {
 		slice: (d) => d.state.weather
 	});
 }
-/** Format a temperature + unit readout (e.g. `21°C`). */
-function formatTemp(temp, unit) {
-	if (temp === null) return "—";
-	return `${Math.round(temp)}${unit ?? "°"}`;
+/** Format a base-unit weather reading (metric). */
+function formatWeather(value, quantity) {
+	if (value === null) return "—";
+	const rendered = (0, _camstack_types.formatReading)({
+		value,
+		quantity,
+		precision: 0
+	});
+	return rendered.unit.length === 0 ? rendered.text : `${rendered.text}${rendered.unit}`;
 }
 /**
 * WeatherInlineControl — compact condition icon + temperature readout
@@ -49950,7 +50010,7 @@ function WeatherInlineControl({ trpc, deviceId }) {
 			children: inlineGlyph(meta.glyph)
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: "tabular-nums",
-			children: formatTemp(slice.temperature, slice.temperatureUnit)
+			children: formatWeather(slice.temperature, "temperature")
 		})]
 	});
 }
@@ -50260,7 +50320,11 @@ function WeatherHeroCard({ trpc, deviceId }) {
 	if (slice === void 0) return null;
 	const meta = weatherConditionMeta(slice.condition, t);
 	const tint = weatherTint(slice.condition);
-	const unit = slice.temperatureUnit ?? "°";
+	const temperature = slice.temperature === null ? void 0 : (0, _camstack_types.formatReading)({
+		value: slice.temperature,
+		quantity: "temperature",
+		precision: 0
+	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("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", {
@@ -50275,11 +50339,14 @@ function WeatherHeroCard({ trpc, deviceId }) {
 					children: [
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 							className: "text-3xl font-semibold tabular-nums text-foreground",
-							children: slice.temperature !== null ? Math.round(slice.temperature) : "—"
+							children: temperature !== void 0 ? temperature.text : "—"
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 							className: "text-base text-foreground-subtle",
-							children: unit
+							children: temperature !== void 0 ? temperature.unit : (0, _camstack_types.formatReading)({
+								value: 0,
+								quantity: "temperature"
+							}).unit
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 							className: "text-xs text-foreground-subtle ml-2 capitalize",
@@ -50300,12 +50367,12 @@ function WeatherHeroCard({ trpc, deviceId }) {
 								style: { transform: `rotate(${slice.windBearing}deg)` }
 							}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Wind, { className: "h-3.5 w-3.5" }),
 							label: t("uiLibrary.weatherControl.wind", "Wind"),
-							value: `${Math.round(slice.windSpeed)} ${slice.windSpeedUnit ?? ""}`.trim()
+							value: formatWeather(slice.windSpeed, "speed")
 						}),
 						slice.pressure !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Readout$1, {
 							icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Gauge, { className: "h-3.5 w-3.5" }),
 							label: t("uiLibrary.weatherControl.pressure", "Pressure"),
-							value: `${Math.round(slice.pressure)} ${slice.pressureUnit ?? ""}`.trim()
+							value: formatWeather(slice.pressure, "pressure")
 						})
 					]
 				})]
@@ -50544,6 +50611,16 @@ var VOLUME_MAX = 9;
 /** Amber kibble accent for the bowl fill; destructive red when low. */
 var KIBBLE = "#f59e0b";
 var KIBBLE_LOW = "#ef4444";
+function desiccantLabel(t, seconds) {
+	const rendered = (0, _camstack_types.formatReading)({
+		value: seconds,
+		quantity: "duration"
+	});
+	return t("uiLibrary.petFeeder.desiccant", "{{text}}{{unit}} desiccant", {
+		text: rendered.text,
+		unit: rendered.unit
+	});
+}
 function clampPortion(grams) {
 	return Math.min(_camstack_types.PET_FEEDER_MANUAL_FEED_MAX, Math.max(_camstack_types.PET_FEEDER_MANUAL_FEED_MIN, grams));
 }
@@ -50666,7 +50743,7 @@ function PetFeederPanel({ trpc, deviceId, layout, optimistic }) {
 							}),
 							display.desiccantLeftDays !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Readout, {
 								icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Wind, { className: "h-3.5 w-3.5" }),
-								label: t("uiLibrary.petFeeder.desiccant", "{{days}}d desiccant", { days: display.desiccantLeftDays })
+								label: desiccantLabel(t, display.desiccantLeftDays)
 							}),
 							onBatteries && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 								className: "inline-flex items-center gap-1 font-medium text-amber-500",

package/dist/index.js

@@ -5,7 +5,7 @@ import * as __mfHostReact from "react";
 import React, { Fragment, Suspense, cloneElement, createContext, createElement, forwardRef, lazy, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, useSyncExternalStore } from "react";
 import * as __mfHostReactJsxRuntime from "react/jsx-runtime";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { ALL_CAPABILITY_DEFINITIONS, CAM_PROFILE_ORDER, CLIP_STILL_DISPOSITION_HEADER, CLIP_STILL_REASON_CODE_HEADER, CLIP_STILL_REASON_HEADER, CONTAINER_CHILD_PRIORITY, ConsumableLevelSchema, DEFAULT_EVENTS_BAND_BUFFER_SEC, DEVICE_HISTORY_ENERGY_KEY, DEVICE_HISTORY_QUERY_MANY_MAX_ITEMS, DEVICE_TYPE_CONTROL_KIND, DeviceExportStatusSchema, DeviceFeature, DeviceRole, DeviceType, EXTENSION_SLOTS, EXTENSION_SLOT_IDS, EventCategory, ExposedDeviceSchema, FIRST_LEVEL_MACRO_CLASSES, HISTORY_CATALOG, ICON_CATEGORIES, KNOWN_CAP_NAMES, MAX_SENSOR_TRIGGER_DEVICES, MODEL_PROVIDER_IDS, NAVIGATION_LIGHT_LEVEL_MAX, NAVIGATION_LIGHT_LEVEL_MIN, NODE_COLOR_IDS, NodeColorIdSchema, PALETTE_ENTRY_IDS, PET_FEEDER_MANUAL_FEED_MAX, PET_FEEDER_MANUAL_FEED_MIN, RECORDING_AUDIO_TRIGGER_OFFERED_DBFS, RECORDING_SOURCE_CAMSTACK_ADDON, REDACTED_SECRET, RecordingConfigSchema, RecordingStatusSchema, SECRET_CLEAR, SOURCE_CAP_ACTIVE_FIELD, STATIONARY_OVERLAY_STYLE, SUBJECT_PATH_DWELL_EPS, SUBJECT_PATH_FULL_FRAME_COVERAGE, SUBJECT_PATH_MAX_POINTS, TIMEZONES, USE_ROOT_MODEL_SETTING_KEY, assignNodeColorId, assignNodeColorId as assignNodeColorId$1, buildModelVariantGroups, buildSubjectPath, bundledCamstack, canConvertUnit, canonicalIconKey, clearModelBoundOverrides, clearModelBoundSetting, clusterStepSettingFieldsFor, collectModelBoundKeys, consumableFormOf, consumableKindOf, createDeviceProxy, createLazyTrpcSource, createSliceHandle, dehydrateSchema, deriveRecordingMode, describeModelVariant, effectiveStepSettings, findTimezone, formatParkedFor, hasModelBoundOverrides, iconCategoryLabel, iconsInCategory, isDrawableSubjectPath, isKeychainStoredField, isModelScopedStepSettingKey, isRootSuppliableStepId, isSecretClear, isSecretFieldView, isSecretMarker, modelBindingKey, normalizeUnit, paintHex, parseOccupancyScope, projectSubjectPath, publicEventCategories, resolveContainerPrimaryChild, resolveDeviceControlKind, resolveIconKey, resolveModelBoundSetting, resolveRecordingProfiles, resolveRootSupply, resolveVariantModelId, resolveViewableDeviceIds, searchIcons, selectAssignedProfileSlots, stepSettingSource, subjectPathSampleFromBox, subjectPathSvgPoints, tryConvertUnit, unitsForDimension, withFieldFrom, withoutField, writeModelBoundSetting } from "@camstack/types";
+import { ALL_CAPABILITY_DEFINITIONS, CAM_PROFILE_ORDER, CLIP_STILL_DISPOSITION_HEADER, CLIP_STILL_REASON_CODE_HEADER, CLIP_STILL_REASON_HEADER, CONTAINER_CHILD_PRIORITY, ConsumableLevelSchema, DEFAULT_DISPLAY_PREFERENCE, DEFAULT_EVENTS_BAND_BUFFER_SEC, DEVICE_HISTORY_ENERGY_KEY, DEVICE_HISTORY_QUERY_MANY_MAX_ITEMS, DEVICE_TYPE_CONTROL_KIND, DeviceExportStatusSchema, DeviceFeature, DeviceRole, DeviceType, EXTENSION_SLOTS, EXTENSION_SLOT_IDS, EventCategory, ExposedDeviceSchema, FIRST_LEVEL_MACRO_CLASSES, HISTORY_CATALOG, ICON_CATEGORIES, KNOWN_CAP_NAMES, MAX_SENSOR_TRIGGER_DEVICES, MODEL_PROVIDER_IDS, NAVIGATION_LIGHT_LEVEL_MAX, NAVIGATION_LIGHT_LEVEL_MIN, NODE_COLOR_IDS, NodeColorIdSchema, PALETTE_ENTRY_IDS, PET_FEEDER_MANUAL_FEED_MAX, PET_FEEDER_MANUAL_FEED_MIN, RECORDING_AUDIO_TRIGGER_OFFERED_DBFS, RECORDING_SOURCE_CAMSTACK_ADDON, REDACTED_SECRET, RecordingConfigSchema, RecordingStatusSchema, SECRET_CLEAR, SOURCE_CAP_ACTIVE_FIELD, STATIONARY_OVERLAY_STYLE, SUBJECT_PATH_DWELL_EPS, SUBJECT_PATH_FULL_FRAME_COVERAGE, SUBJECT_PATH_MAX_POINTS, TIMEZONES, USE_ROOT_MODEL_SETTING_KEY, assignNodeColorId, assignNodeColorId as assignNodeColorId$1, baseUnitOf, buildModelVariantGroups, buildSubjectPath, bundledCamstack, canConvertUnit, canonicalIconKey, clearModelBoundOverrides, clearModelBoundSetting, clusterStepSettingFieldsFor, collectModelBoundKeys, consumableFormOf, consumableKindOf, createDeviceProxy, createLazyTrpcSource, createSliceHandle, dehydrateSchema, deriveRecordingMode, describeModelVariant, displayUnitFor, effectiveStepSettings, findTimezone, formatParkedFor, formatReading, hasModelBoundOverrides, iconCategoryLabel, iconsInCategory, isDrawableSubjectPath, isKeychainStoredField, isModelScopedStepSettingKey, isReadingQuantity, isRootSuppliableStepId, isSecretClear, isSecretFieldView, isSecretMarker, modelBindingKey, normalizeUnit, paintHex, parseOccupancyScope, projectSubjectPath, publicEventCategories, resolveContainerPrimaryChild, resolveDeviceControlKind, resolveIconKey, resolveModelBoundSetting, resolveRecordingProfiles, resolveRootSupply, resolveVariantModelId, resolveViewableDeviceIds, searchIcons, selectAssignedProfileSlots, stepSettingSource, subjectPathSampleFromBox, subjectPathSvgPoints, tryConvertUnit, unitsForDimension, withFieldFrom, withoutField, writeModelBoundSetting } from "@camstack/types";
 import * as __mfHostTrpcReactQuery from "@trpc/react-query";
 import { createTRPCReact } from "@trpc/react-query";
 import * as __mfHostReactDOM from "react-dom";
@@ -20949,21 +20949,16 @@ Skeleton.displayName = "Skeleton";
 /** `value` null = unknown (D393) — renders an em-dash, never a fake `0`. */
 function formatRemaining(t, r) {
 	if (r.value === null) return "—";
-	const count = r.value;
-	switch (r.unit) {
-		case "days": return t("uiLibrary.consumablesPanel.days", {
-			one: "{{count}} day",
-			other: "{{count}} days"
-		}, { count });
-		case "hours": return t("uiLibrary.consumablesPanel.hours", {
-			one: "{{count}} hour",
-			other: "{{count}} hours"
-		}, { count });
-		case "cycles": return t("uiLibrary.consumablesPanel.cycles", {
-			one: "{{count}} cycle",
-			other: "{{count}} cycles"
-		}, { count });
-	}
+	if (r.kind === "count") return t("uiLibrary.consumablesPanel.cycles", {
+		one: "{{count}} cycle",
+		other: "{{count}} cycles"
+	}, { count: r.value });
+	const rendered = formatReading({
+		value: r.value,
+		quantity: "duration",
+		precision: 0
+	});
+	return rendered.unit.length === 0 ? rendered.text : `${rendered.text} ${rendered.unit}`;
 }
 /** Format a ms-epoch as a compact local date for the "replaced" hint. */
 function formatResetAt(ms) {
@@ -46059,6 +46054,66 @@ function formatNumeric(value, precision) {
 	return Number.isInteger(value) ? String(value) : value.toFixed(1);
 }
 //#endregion
+//#region src/lib/resolve-sensor-display.ts
+function canonUnit(raw) {
+	if (raw === void 0) return void 0;
+	return normalizeUnit(raw) ?? raw;
+}
+function concreteQuantity(input) {
+	if (input.quantity === void 0) return void 0;
+	if (input.quantity === "device") {
+		const chosen = input.deviceQuantity;
+		if (chosen === void 0 || chosen === "device") return void 0;
+		return chosen;
+	}
+	return input.quantity;
+}
+function resolveSensorDisplay(input) {
+	const perCap = input.capName !== void 0 ? input.display?.perCap?.[input.capName] : void 0;
+	const precision = perCap?.precision ?? input.display?.precision ?? input.roleDefault?.precision ?? input.declarationPrecision;
+	const quantity = concreteQuantity(input);
+	const preference = input.preference ?? DEFAULT_DISPLAY_PREFERENCE;
+	const base = quantity === void 0 ? void 0 : baseUnitOf(quantity);
+	const preferred = quantity === void 0 ? void 0 : displayUnitFor(quantity, preference);
+	const overrideUnit = canonUnit(perCap?.unit ?? input.display?.unit ?? input.roleDefault?.unit);
+	const overrideOk = overrideUnit !== void 0 && base !== void 0 && overrideUnit !== base && canConvertUnit(base, overrideUnit);
+	const unit = overrideOk ? overrideUnit : preferred ?? "";
+	const scales = quantity === "duration" || quantity === "information" || quantity === "duration-ms";
+	const toDisplayValue = (raw) => {
+		if (scales || base === void 0 || unit.length === 0 || unit === base) return raw;
+		return tryConvertUnit(raw, base, unit) ?? raw;
+	};
+	const fromDisplayValue = (shown) => {
+		if (scales || base === void 0 || unit.length === 0 || unit === base) return shown;
+		return tryConvertUnit(shown, unit, base) ?? shown;
+	};
+	const format = (raw) => {
+		if (quantity !== void 0 && !overrideOk) {
+			const rendered = formatReading({
+				value: raw,
+				quantity,
+				preference,
+				precision
+			});
+			return {
+				text: rendered.text,
+				unit: rendered.unit
+			};
+		}
+		return {
+			text: formatNumeric(toDisplayValue(raw), precision),
+			unit
+		};
+	};
+	return {
+		unit,
+		precision,
+		toDisplayValue,
+		fromDisplayValue,
+		format
+	};
+}
+//#endregion
 //#region src/lib/format-control-datetime.ts
 var DATE_RE = /^(\d{4})-(\d{2})-(\d{2})/;
 var TIME_RE = /^(\d{2}):(\d{2})(?::(\d{2}))?$/;
@@ -46124,8 +46179,20 @@ function toDateInput(value) {
 function toTimeInput(value) {
 	return value.slice(0, 5);
 }
-/** Trim an HA datetime value to the `<input type=datetime-local>` shape
-*  ('YYYY-MM-DDTHH:MM'). Accepts both 'T'- and space-separated forms. */
+function datetimeEditor(format, rawValue) {
+	if (format === "date") return {
+		type: "date",
+		value: toDateInput(rawValue)
+	};
+	if (format === "time") return {
+		type: "time",
+		value: toTimeInput(rawValue)
+	};
+	return {
+		type: "datetime-local",
+		value: toDateTimeInput(rawValue)
+	};
+}
 function toDateTimeInput(value) {
 	return (value.includes("T") ? value : value.replace(" ", "T")).slice(0, 16);
 }
@@ -46218,24 +46285,35 @@ function TextControl({ value, busy, onCommit }) {
 		className: cn("rounded border border-border bg-surface px-2 py-0.5 text-xs", busy && "opacity-40 cursor-not-allowed")
 	});
 }
-function ControlWidget({ slice, busy, setValueFn, layout }) {
+function ControlWidget({ slice, busy, setValueFn, layout, quantity, display, dateTimeShape }) {
 	const t = useUiText();
 	switch (slice.kind) {
-		case "numeric": return /* @__PURE__ */ jsx(NumericControl, {
-			value: typeof slice.value === "number" ? slice.value : Number(slice.value),
-			busy,
-			onCommit: (v) => {
-				setValueFn({ control: {
-					kind: "numeric",
-					value: v
-				} });
-			},
-			unit: slice.unit,
-			min: slice.min,
-			max: slice.max,
-			step: slice.step,
-			precision: slice.precision
-		});
+		case "numeric": {
+			const numericValue = typeof slice.value === "number" ? slice.value : Number(slice.value);
+			const resolved = quantity === void 0 ? void 0 : resolveSensorDisplay({
+				quantity,
+				display,
+				capName: "control"
+			});
+			const toShown = resolved?.toDisplayValue ?? ((raw) => raw);
+			const toBase = resolved?.fromDisplayValue ?? ((shown) => shown);
+			const unit = resolved !== void 0 && resolved.unit.length > 0 ? resolved.unit : void 0;
+			return /* @__PURE__ */ jsx(NumericControl, {
+				value: toShown(numericValue),
+				busy,
+				onCommit: (v) => {
+					setValueFn({ control: {
+						kind: "numeric",
+						value: toBase(v)
+					} });
+				},
+				unit,
+				min: slice.min === void 0 ? void 0 : toShown(slice.min),
+				max: slice.max === void 0 ? void 0 : toShown(slice.max),
+				step: slice.step === void 0 ? void 0 : toShown(slice.step),
+				precision: resolved?.precision
+			});
+		}
 		case "select": {
 			const selectValue = String(slice.value);
 			return /* @__PURE__ */ jsx("select", {
@@ -46268,7 +46346,7 @@ function ControlWidget({ slice, busy, setValueFn, layout }) {
 		});
 		case "datetime": {
 			const rawValue = String(slice.value);
-			const format = slice.format ?? "datetime";
+			const format = dateTimeShape ?? "datetime";
 			if (layout === "compact") {
 				if (rawValue === "") return /* @__PURE__ */ jsx("span", {
 					"aria-label": t("uiLibrary.controlPanel.value", "Control value"),
@@ -46281,8 +46359,9 @@ function ControlWidget({ slice, busy, setValueFn, layout }) {
 					children: formatControlDateTime(rawValue, format)
 				});
 			}
-			const inputType = format === "date" ? "date" : format === "time" ? "time" : "datetime-local";
-			const inputValue = format === "date" ? toDateInput(rawValue) : format === "time" ? toTimeInput(rawValue) : toDateTimeInput(rawValue);
+			const editor = datetimeEditor(format, rawValue);
+			const inputType = editor.type;
+			const inputValue = editor.value;
 			return /* @__PURE__ */ jsx("input", {
 				type: inputType,
 				"aria-label": t("uiLibrary.controlPanel.value", "Control value"),
@@ -46302,6 +46381,7 @@ function ControlWidget({ slice, busy, setValueFn, layout }) {
 	}
 }
 function ControlPanel({ trpc, deviceId, features: _features, layout, optimistic }) {
+	const info = useOptionalSystem()?.getDeviceInfo(deviceId) ?? null;
 	const { cap, slice, available } = useDeviceCapability({
 		trpc,
 		deviceId,
@@ -46311,6 +46391,8 @@ function ControlPanel({ trpc, deviceId, features: _features, layout, optimistic
 	const { display, applyOptimistic } = useOptimisticSlice(slice, { enabled: optimistic ?? true });
 	if (display === void 0) return null;
 	const busy = !available;
+	const chosen = info?.sourceInfo?.quantity;
+	const quantity = isReadingQuantity(chosen) && chosen !== "device" && chosen !== "none" ? chosen : void 0;
 	const setValueFn = (input) => {
 		if (!busy && cap) {
 			applyOptimistic({ value: input.control.value });
@@ -46324,7 +46406,10 @@ function ControlPanel({ trpc, deviceId, features: _features, layout, optimistic
 			slice: display,
 			busy,
 			setValueFn,
-			layout
+			layout,
+			quantity,
+			display: info?.display,
+			dateTimeShape: info?.sourceInfo?.dateTimeShape
 		})
 	});
 }
@@ -46428,30 +46513,6 @@ function PopoverRowAction({ icon: Icon, title, children }) {
 	}), document.body)] });
 }
 //#endregion
-//#region src/lib/resolve-sensor-display.ts
-/** Table keys are canonical spellings; providers often send `C` / `F` / `celsius`. */
-function canonUnit(raw) {
-	if (raw === void 0) return void 0;
-	return normalizeUnit(raw) ?? raw;
-}
-var identity = (raw) => raw;
-function resolveSensorDisplay(input) {
-	const perCap = input.capName !== void 0 ? input.display?.perCap?.[input.capName] : void 0;
-	const precision = perCap?.precision ?? input.display?.precision ?? input.roleDefault?.precision ?? input.slicePrecision;
-	const sourceUnit = canonUnit(input.sliceUnit ?? input.canonicalUnit);
-	const overrideUnit = canonUnit(perCap?.unit ?? input.display?.unit ?? input.roleDefault?.unit);
-	if (overrideUnit !== void 0 && sourceUnit !== void 0 && overrideUnit !== sourceUnit && canConvertUnit(sourceUnit, overrideUnit)) return {
-		unit: overrideUnit,
-		precision,
-		toDisplayValue: (raw) => tryConvertUnit(raw, sourceUnit, overrideUnit) ?? raw
-	};
-	return {
-		unit: sourceUnit ?? "",
-		precision,
-		toDisplayValue: identity
-	};
-}
-//#endregion
 //#region src/composites/device-controls/sensor-value-atom.tsx
 /**
 * Binary fallback for the `battery-sensor` role.
@@ -46492,102 +46553,105 @@ function hasBatteryNumericValue(slice, field) {
 * avoids dynamic string indexing — each one is a concrete property
 * access on the typed `DeviceProxy['state']` shape.
 *
-* Canonical unit rules:
-*  - Typed roles (temperature/humidity/ambient-light/pressure/power/energy)
-*    carry a `canonicalUnit` constant. The slice is normalised to one unit
-*    so no per-device lookup is needed.
-*  - Generic `numeric-sensor` has no `canonicalUnit`. The unit is read live
-*    from the slice (`slice.unit`) as populated by the provider from the
-*    upstream source on every state push.
+* The unit comes from the descriptor's quantity through `resolveSensorDisplay`.
+* A generic numeric sensor uses quantity `device` and the device's
+* `sourceInfo.quantity`.
 */
 var ROLE_DESCRIPTOR = {
 	"temperature-sensor": {
 		kind: "numeric",
 		field: "celsius",
-		canonicalUnit: "°C",
+		quantity: "temperature",
 		getSliceHandle: (s) => s.temperatureSensor
 	},
 	"humidity-sensor": {
 		kind: "numeric",
 		field: "percent",
-		canonicalUnit: "%",
+		quantity: "humidity",
 		getSliceHandle: (s) => s.humiditySensor
 	},
 	"ambient-light-sensor": {
 		kind: "numeric",
 		field: "lux",
-		canonicalUnit: "lx",
+		quantity: "illuminance",
 		getSliceHandle: (s) => s.ambientLightSensor
 	},
 	"pressure-sensor": {
 		kind: "numeric",
 		field: "hpa",
-		canonicalUnit: "hPa",
+		quantity: "pressure",
 		getSliceHandle: (s) => s.pressureSensor
 	},
 	"numeric-sensor": {
 		kind: "numeric",
 		field: "value",
+		quantity: "device",
 		getSliceHandle: (s) => s.numericSensor
 	},
 	"wind-sensor": {
 		kind: "numeric",
 		field: "value",
+		quantity: "device",
 		getSliceHandle: (s) => s.numericSensor
 	},
 	"rain-sensor": {
 		kind: "numeric",
 		field: "value",
+		quantity: "device",
 		getSliceHandle: (s) => s.numericSensor
 	},
 	"uv-sensor": {
 		kind: "numeric",
 		field: "value",
+		quantity: "device",
 		getSliceHandle: (s) => s.numericSensor
 	},
 	"solar-radiation-sensor": {
 		kind: "numeric",
 		field: "value",
+		quantity: "device",
 		getSliceHandle: (s) => s.numericSensor
 	},
 	"soil-moisture-sensor": {
 		kind: "numeric",
 		field: "value",
+		quantity: "device",
 		getSliceHandle: (s) => s.numericSensor
 	},
 	"power-sensor": {
 		kind: "numeric",
 		field: "watts",
-		canonicalUnit: "W",
+		quantity: "power",
 		getSliceHandle: (s) => s.powerMeter
 	},
 	"energy-sensor": {
 		kind: "numeric",
 		field: "kwhTotal",
-		canonicalUnit: "kWh",
+		quantity: "energy",
 		getSliceHandle: (s) => s.powerMeter
 	},
 	"voltage-sensor": {
 		kind: "numeric",
 		field: "volts",
-		canonicalUnit: "V",
+		quantity: "voltage",
 		getSliceHandle: (s) => s.powerMeter
 	},
 	"current-sensor": {
 		kind: "numeric",
 		field: "amps",
-		canonicalUnit: "A",
+		quantity: "current",
 		getSliceHandle: (s) => s.powerMeter
 	},
 	"battery-sensor": {
 		kind: "numeric",
 		field: "value",
-		canonicalUnit: "%",
+		quantity: "percentage",
 		getSliceHandle: (s) => s.numericSensor
 	},
 	"generic-sensor": {
 		kind: "numeric",
 		field: "value",
+		quantity: "device",
 		getSliceHandle: (s) => s.numericSensor
 	},
 	"motion-sensor": {
@@ -46705,19 +46769,16 @@ function SensorValueAtom({ trpc, device }) {
 			children: enumSensorSlice.value
 		});
 		if (numericIsColStart) return null;
-		const sliceRecord = slice;
-		const liveUnit = typeof sliceRecord["unit"] === "string" ? sliceRecord["unit"] : void 0;
-		const slicePrecision = typeof sliceRecord["precision"] === "number" ? sliceRecord["precision"] : void 0;
-		const resolved = resolveSensorDisplay({
+		const deviceQuantity = device.sourceInfo?.quantity;
+		const rendered = resolveSensorDisplay({
 			display: device.display,
 			capName: device.role === "numeric-sensor" ? "numeric-sensor" : void 0,
 			roleDefault: device.role != null ? roleDefaultsData?.defaults[device.role] : void 0,
-			sliceUnit: liveUnit,
-			slicePrecision,
-			canonicalUnit: descriptor.canonicalUnit
-		});
-		const unit = resolved.unit;
-		const formatted = formatNumeric(resolved.toDisplayValue(rawValue), resolved.precision);
+			quantity: descriptor.quantity ?? "device",
+			deviceQuantity: deviceQuantity === "device" ? void 0 : deviceQuantity
+		}).format(rawValue);
+		const unit = rendered.unit;
+		const formatted = rendered.text;
 		return /* @__PURE__ */ jsxs("span", {
 			className: cn("inline-flex items-baseline gap-0.5 tabular-nums text-xs text-foreground"),
 			children: [/* @__PURE__ */ jsx("span", { children: formatted }), unit && /* @__PURE__ */ jsx("span", {
@@ -46747,7 +46808,7 @@ function SensorValueAtom({ trpc, device }) {
 	if (descriptor.kind === "datetime") {
 		if (!isStringSliceValue(slice)) return null;
 		if (slice.value === "") return null;
-		const format = readSliceDateTimeFormat(slice) ?? descriptor.format;
+		const format = device.sourceInfo?.dateTimeShape ?? readSliceDateTimeFormat(slice) ?? descriptor.format;
 		const formatted = formatControlDateTime(slice.value, format);
 		return /* @__PURE__ */ jsx("span", {
 			className: cn("inline-flex items-baseline text-xs text-foreground"),
@@ -47302,17 +47363,14 @@ function SensorInlineControl({ trpc, deviceId }) {
 *
 * Renders:
 *  - Typed numeric sensors: value in `text-3xl font-semibold tabular-nums` +
-*    canonical unit from ROLE_DESCRIPTOR (e.g. temperature-sensor → '°C').
-*  - Generic numeric-sensor: value + unit read live from the slice
-*    (`slice.unit`, populated by the HA provider from state attributes).
+*    the unit `resolveSensorDisplay` derives from the quantity.
+*  - Generic numeric-sensor: the same formatter, with the device's quantity.
 *  - Binary sensors: coloured state badge ("Detected"/"Clear" etc.) — same
 *    labels and colours as SensorValueAtom's binary branch.
 *  - Presence: Home/Away/zone-name badge — same labels as SensorValueAtom.
 *  - All: sensor name label below the value.
 *
-* Unit resolution uses the same logic as SensorValueAtom (live slice.unit
-* wins, ROLE_DESCRIPTOR canonicalUnit as fallback) — the two surfaces stay
-* in sync.
+* Unit resolution uses the same formatter as SensorValueAtom.
 */
 function isNumericSliceValue(v) {
 	return typeof v === "object" && v !== null;
@@ -47379,19 +47437,16 @@ function SensorHeroInner({ trpc, device }) {
 		if (!isNumericSliceValue(slice)) return null;
 		const rawValue = slice[descriptor.field];
 		if (typeof rawValue !== "number") return null;
-		const sliceRecord = slice;
-		const liveUnit = typeof sliceRecord["unit"] === "string" ? sliceRecord["unit"] : void 0;
-		const slicePrecision = typeof sliceRecord["precision"] === "number" ? sliceRecord["precision"] : void 0;
-		const resolved = resolveSensorDisplay({
+		const deviceQuantity = device.sourceInfo?.quantity;
+		const rendered = resolveSensorDisplay({
 			display: device.display,
 			capName: device.role === "numeric-sensor" ? "numeric-sensor" : void 0,
 			roleDefault: device.role != null ? roleDefaultsData?.defaults[device.role] : roleDefaultsData?.defaults["temperature-sensor"],
-			sliceUnit: liveUnit,
-			slicePrecision,
-			canonicalUnit: descriptor.canonicalUnit
-		});
-		const unit = resolved.unit;
-		const formatted = formatNumeric(resolved.toDisplayValue(rawValue), resolved.precision);
+			quantity: descriptor.quantity ?? "device",
+			deviceQuantity: deviceQuantity === "device" ? void 0 : deviceQuantity
+		}).format(rawValue);
+		const unit = rendered.unit;
+		const formatted = rendered.text;
 		const occupancyOn = occupancySlice !== void 0 && isBinarySliceValue(occupancySlice) && typeof occupancySlice["on"] === "boolean" ? Boolean(occupancySlice["on"]) : null;
 		return /* @__PURE__ */ jsxs("div", {
 			className: "flex flex-col items-center justify-center gap-2 rounded-lg border border-border bg-surface p-4",
@@ -47447,7 +47502,7 @@ function SensorHeroInner({ trpc, device }) {
 				children: t("uiLibrary.sensorHeroCard.awaiting", "Awaiting state…")
 			})]
 		});
-		const format = readSliceDateTimeFormat(slice) ?? descriptor.format;
+		const format = device.sourceInfo?.dateTimeShape ?? readSliceDateTimeFormat(slice) ?? descriptor.format;
 		return /* @__PURE__ */ jsxs("div", {
 			className: "flex flex-col items-center justify-center gap-2 rounded-lg border border-border bg-surface p-4",
 			children: [/* @__PURE__ */ jsx("span", {
@@ -49903,10 +49958,15 @@ function useWeather(trpc, deviceId) {
 		slice: (d) => d.state.weather
 	});
 }
-/** Format a temperature + unit readout (e.g. `21°C`). */
-function formatTemp(temp, unit) {
-	if (temp === null) return "—";
-	return `${Math.round(temp)}${unit ?? "°"}`;
+/** Format a base-unit weather reading (metric). */
+function formatWeather(value, quantity) {
+	if (value === null) return "—";
+	const rendered = formatReading({
+		value,
+		quantity,
+		precision: 0
+	});
+	return rendered.unit.length === 0 ? rendered.text : `${rendered.text}${rendered.unit}`;
 }
 /**
 * WeatherInlineControl — compact condition icon + temperature readout
@@ -49926,7 +49986,7 @@ function WeatherInlineControl({ trpc, deviceId }) {
 			children: inlineGlyph(meta.glyph)
 		}), /* @__PURE__ */ jsx("span", {
 			className: "tabular-nums",
-			children: formatTemp(slice.temperature, slice.temperatureUnit)
+			children: formatWeather(slice.temperature, "temperature")
 		})]
 	});
 }
@@ -50236,7 +50296,11 @@ function WeatherHeroCard({ trpc, deviceId }) {
 	if (slice === void 0) return null;
 	const meta = weatherConditionMeta(slice.condition, t);
 	const tint = weatherTint(slice.condition);
-	const unit = slice.temperatureUnit ?? "°";
+	const temperature = slice.temperature === null ? void 0 : formatReading({
+		value: slice.temperature,
+		quantity: "temperature",
+		precision: 0
+	});
 	return /* @__PURE__ */ jsx("div", {
 		className: "flex flex-col items-stretch gap-4 rounded-lg border border-border bg-surface p-4",
 		children: /* @__PURE__ */ jsxs("div", {
@@ -50251,11 +50315,14 @@ function WeatherHeroCard({ trpc, deviceId }) {
 					children: [
 						/* @__PURE__ */ jsx("span", {
 							className: "text-3xl font-semibold tabular-nums text-foreground",
-							children: slice.temperature !== null ? Math.round(slice.temperature) : "—"
+							children: temperature !== void 0 ? temperature.text : "—"
 						}),
 						/* @__PURE__ */ jsx("span", {
 							className: "text-base text-foreground-subtle",
-							children: unit
+							children: temperature !== void 0 ? temperature.unit : formatReading({
+								value: 0,
+								quantity: "temperature"
+							}).unit
 						}),
 						/* @__PURE__ */ jsx("span", {
 							className: "text-xs text-foreground-subtle ml-2 capitalize",
@@ -50276,12 +50343,12 @@ function WeatherHeroCard({ trpc, deviceId }) {
 								style: { transform: `rotate(${slice.windBearing}deg)` }
 							}) : /* @__PURE__ */ jsx(Wind, { className: "h-3.5 w-3.5" }),
 							label: t("uiLibrary.weatherControl.wind", "Wind"),
-							value: `${Math.round(slice.windSpeed)} ${slice.windSpeedUnit ?? ""}`.trim()
+							value: formatWeather(slice.windSpeed, "speed")
 						}),
 						slice.pressure !== null && /* @__PURE__ */ jsx(Readout$1, {
 							icon: /* @__PURE__ */ jsx(Gauge, { className: "h-3.5 w-3.5" }),
 							label: t("uiLibrary.weatherControl.pressure", "Pressure"),
-							value: `${Math.round(slice.pressure)} ${slice.pressureUnit ?? ""}`.trim()
+							value: formatWeather(slice.pressure, "pressure")
 						})
 					]
 				})]
@@ -50520,6 +50587,16 @@ var VOLUME_MAX = 9;
 /** Amber kibble accent for the bowl fill; destructive red when low. */
 var KIBBLE = "#f59e0b";
 var KIBBLE_LOW = "#ef4444";
+function desiccantLabel(t, seconds) {
+	const rendered = formatReading({
+		value: seconds,
+		quantity: "duration"
+	});
+	return t("uiLibrary.petFeeder.desiccant", "{{text}}{{unit}} desiccant", {
+		text: rendered.text,
+		unit: rendered.unit
+	});
+}
 function clampPortion(grams) {
 	return Math.min(PET_FEEDER_MANUAL_FEED_MAX, Math.max(PET_FEEDER_MANUAL_FEED_MIN, grams));
 }
@@ -50642,7 +50719,7 @@ function PetFeederPanel({ trpc, deviceId, layout, optimistic }) {
 							}),
 							display.desiccantLeftDays !== null && /* @__PURE__ */ jsx(Readout, {
 								icon: /* @__PURE__ */ jsx(Wind, { className: "h-3.5 w-3.5" }),
-								label: t("uiLibrary.petFeeder.desiccant", "{{days}}d desiccant", { days: display.desiccantLeftDays })
+								label: desiccantLabel(t, display.desiccantLeftDays)
 							}),
 							onBatteries && /* @__PURE__ */ jsxs("span", {
 								className: "inline-flex items-center gap-1 font-medium text-amber-500",

package/dist/lib/resolve-sensor-display.d.ts

@@ -1,20 +1,10 @@
 /**
-* Shared, pure resolution of a sensor's DISPLAY unit + precision + value
-* transform. One function so the two renderers (`SensorValueAtom`,
-* `SensorHeroCard`) can never diverge — they duplicated this precedence before.
-*
-* Resolution order (device override → role default → live slice →
-* ROLE_DESCRIPTOR canonicalUnit). `??` everywhere, never `||`: `precision: 0`
-* is a legal override and must win over a slice `precision: 2`.
-*
-* Conversion happens at RENDER only — storage stays in source units. An
-* override unit converts the raw slice value ONLY when it shares a dimension
-* with the source unit (`canConvertUnit`); on refusal the display falls back to
-* identity + the SOURCE unit so a unit label and its value math can never
-* disagree. Precision applies AFTER conversion (by construction — the caller
-* runs `formatNumeric(toDisplayValue(raw), precision)`).
+* Shared resolution of a sensor's display string. The stored number is always
+* the quantity's base unit (D944 §4). A display preference (default metric)
+* or an operator override picks the label; the value is converted to match.
 */
-import type { DeviceDisplayOverride, RoleDisplayDefault } from "@camstack/types";
+import type { DeviceDisplayOverride, ReadingQuantity, RoleDisplayDefault } from "@camstack/types";
+import { type DisplayPreference } from "@camstack/types";
 export interface SensorDisplayInput {
 	/** Per-device override from the row (`DeviceInfo.display`). */
 	readonly display?: DeviceDisplayOverride;
@@ -22,20 +12,28 @@ export interface SensorDisplayInput {
 	readonly capName?: string;
 	/** Role default (`roleDisplayDefaults[device.role]`). */
 	readonly roleDefault?: RoleDisplayDefault;
-	/** Live slice unit (the unit the raw VALUE is actually in, for generic sensors). */
-	readonly sliceUnit?: string;
-	/** Live slice precision. */
-	readonly slicePrecision?: number;
-	/** ROLE_DESCRIPTOR canonical unit fallback (typed roles). */
-	readonly canonicalUnit?: string;
+	/** Quantity of the stored number. `device` reads `deviceQuantity`. */
+	readonly quantity?: ReadingQuantity;
+	/** The device's chosen quantity when `quantity` is `device`. */
+	readonly deviceQuantity?: ReadingQuantity;
+	/** Precision declared on the reading, when the operator has not overridden it. */
+	readonly declarationPrecision?: number;
+	/** Read-time preference. Defaults to metric. */
+	readonly preference?: DisplayPreference;
 }
 export interface ResolvedSensorDisplay {
-	/** Display unit — `''` when none resolves anywhere. */
+	/** Display unit — `''` when the quantity has none. */
 	readonly unit: string;
 	/** Display precision (int 0-10) or undefined for auto-format. */
 	readonly precision: number | undefined;
-	/** Convert a raw slice value into the display unit. Identity unless an
-	*  override unit differs from the source unit AND both share a dimension. */
+	/** Convert a base-unit value into the display unit. */
 	readonly toDisplayValue: (raw: number) => number;
+	/** Convert a display-unit value back into the stored base. */
+	readonly fromDisplayValue: (shown: number) => number;
+	/** Text and unit for one base-unit sample. */
+	readonly format: (raw: number) => {
+		readonly text: string;
+		readonly unit: string;
+	};
 }
 export declare function resolveSensorDisplay(input: SensorDisplayInput): ResolvedSensorDisplay;

package/package.json

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