@camstack/ui-library 1.1.6 → 1.1.8

package/dist/index.cjs

@@ -10784,6 +10784,26 @@ var Smartphone = createLucideIcon("smartphone", [["rect", {
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
+var Sprout = createLucideIcon("sprout", [
+	["path", {
+		d: "M14 9.536V7a4 4 0 0 1 4-4h1.5a.5.5 0 0 1 .5.5V5a4 4 0 0 1-4 4 4 4 0 0 0-4 4c0 2 1 3 1 5a5 5 0 0 1-1 3",
+		key: "139s4v"
+	}],
+	["path", {
+		d: "M4 9a5 5 0 0 1 8 4 5 5 0 0 1-8-4",
+		key: "1dlkgp"
+	}],
+	["path", {
+		d: "M5 21h14",
+		key: "11awu3"
+	}]
+]);
+/**
+* @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 Square = createLucideIcon("square", [["rect", {
 	width: "18",
 	height: "18",
@@ -10808,6 +10828,52 @@ var Star = createLucideIcon("star", [["path", {
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
+var SunMedium = createLucideIcon("sun-medium", [
+	["circle", {
+		cx: "12",
+		cy: "12",
+		r: "4",
+		key: "4exip2"
+	}],
+	["path", {
+		d: "M12 3v1",
+		key: "1asbbs"
+	}],
+	["path", {
+		d: "M12 20v1",
+		key: "1wcdkc"
+	}],
+	["path", {
+		d: "M3 12h1",
+		key: "lp3yf2"
+	}],
+	["path", {
+		d: "M20 12h1",
+		key: "1vloll"
+	}],
+	["path", {
+		d: "m18.364 5.636-.707.707",
+		key: "1hakh0"
+	}],
+	["path", {
+		d: "m6.343 17.657-.707.707",
+		key: "18m9nf"
+	}],
+	["path", {
+		d: "m5.636 5.636.707.707",
+		key: "1xv1c5"
+	}],
+	["path", {
+		d: "m17.657 17.657.707.707",
+		key: "vl76zb"
+	}]
+]);
+/**
+* @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 Sun = createLucideIcon("sun", [
 	["circle", {
 		cx: "12",
@@ -10854,6 +10920,46 @@ var Sun = createLucideIcon("sun", [
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
+var Sunrise = createLucideIcon("sunrise", [
+	["path", {
+		d: "M12 2v8",
+		key: "1q4o3n"
+	}],
+	["path", {
+		d: "m4.93 10.93 1.41 1.41",
+		key: "2a7f42"
+	}],
+	["path", {
+		d: "M2 18h2",
+		key: "j10viu"
+	}],
+	["path", {
+		d: "M20 18h2",
+		key: "wocana"
+	}],
+	["path", {
+		d: "m19.07 10.93-1.41 1.41",
+		key: "15zs5n"
+	}],
+	["path", {
+		d: "M22 22H2",
+		key: "19qnx5"
+	}],
+	["path", {
+		d: "m8 6 4-4 4 4",
+		key: "ybng9g"
+	}],
+	["path", {
+		d: "M16 18a4 4 0 0 0-8 0",
+		key: "1lzouq"
+	}]
+]);
+/**
+* @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 Table2 = createLucideIcon("table-2", [["path", {
 	d: "M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3v18m0 0h10a2 2 0 0 0 2-2V9M9 21H5a2 2 0 0 1-2-2V9m0 0h18",
 	key: "gugj83"
@@ -14673,6 +14779,26 @@ var DEVICE_ROLE_META = {
 		icon: Gauge,
 		label: "Pressure"
 	},
+	[_camstack_types.DeviceRole.WindSensor]: {
+		icon: Wind,
+		label: "Wind"
+	},
+	[_camstack_types.DeviceRole.RainSensor]: {
+		icon: CloudRain,
+		label: "Rain"
+	},
+	[_camstack_types.DeviceRole.UvSensor]: {
+		icon: SunMedium,
+		label: "UV index"
+	},
+	[_camstack_types.DeviceRole.SolarRadiationSensor]: {
+		icon: Sunrise,
+		label: "Solar radiation"
+	},
+	[_camstack_types.DeviceRole.SoilMoistureSensor]: {
+		icon: Sprout,
+		label: "Soil moisture"
+	},
 	[_camstack_types.DeviceRole.PowerSensor]: {
 		icon: Zap,
 		label: "Power"
@@ -17084,6 +17210,8 @@ var useDeviceManagerAdoptionRefresh = trpc.deviceManager.adoptionRefresh.useMuta
 var useDeviceManagerAdoptionAdopt = trpc.deviceManager.adoptionAdopt.useMutation;
 /** Generated alias around `trpc.deviceManager.adoptionRelease.useMutation`. */
 var useDeviceManagerAdoptionRelease = trpc.deviceManager.adoptionRelease.useMutation;
+/** Generated alias around `trpc.deviceManager.adoptionResync.useMutation`. */
+var useDeviceManagerAdoptionResync = trpc.deviceManager.adoptionResync.useMutation;
 /** Generated alias around `trpc.deviceManager.testField.useMutation`. */
 var useDeviceManagerTestField = trpc.deviceManager.testField.useMutation;
 /** Generated alias around `trpc.deviceManager.getDeviceStatusAggregate.useQuery`. */
@@ -18131,6 +18259,31 @@ var ROLE_DESCRIPTOR = {
 		field: "value",
 		getSliceHandle: (s) => s.numericSensor
 	},
+	"wind-sensor": {
+		kind: "numeric",
+		field: "value",
+		getSliceHandle: (s) => s.numericSensor
+	},
+	"rain-sensor": {
+		kind: "numeric",
+		field: "value",
+		getSliceHandle: (s) => s.numericSensor
+	},
+	"uv-sensor": {
+		kind: "numeric",
+		field: "value",
+		getSliceHandle: (s) => s.numericSensor
+	},
+	"solar-radiation-sensor": {
+		kind: "numeric",
+		field: "value",
+		getSliceHandle: (s) => s.numericSensor
+	},
+	"soil-moisture-sensor": {
+		kind: "numeric",
+		field: "value",
+		getSliceHandle: (s) => s.numericSensor
+	},
 	"power-sensor": {
 		kind: "numeric",
 		field: "watts",
@@ -18644,6 +18797,10 @@ function vacuumStateMeta(state) {
 			label: "Docked",
 			tone: "text-success"
 		};
+		case "drying": return {
+			label: "Drying",
+			tone: "text-warning"
+		};
 		case "idle": return {
 			label: "Idle",
 			tone: "text-foreground-subtle"
@@ -18700,6 +18857,12 @@ function vacuumGraphicTint(state) {
 			docked: true,
 			active: false
 		};
+		case "drying": return {
+			glow: "bg-warning/10",
+			accent: "text-warning",
+			docked: true,
+			active: false
+		};
 		case "paused": return {
 			glow: "bg-warning/10",
 			accent: "text-warning",
@@ -18870,8 +19033,10 @@ function tankMeta(kind) {
 /**
 * TankIndicator — one tank row: label + glyph, then a fill bar (numeric
 * level) or a status pill (discrete), tinted by `tankAlert`. Renders
-* nothing when the tank is absent (null) or its reading is unknown
-* (both fields null).
+* 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 }) {
 	if (tank === null) return null;
@@ -18907,15 +19072,22 @@ function TankIndicator({ kind, tank }) {
 			children: tank.status
 		})]
 	});
-	return 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: "inline-flex items-center gap-1 w-24 shrink-0 text-foreground-subtle",
+			children: [meta.icon, meta.label]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium bg-surface-hover text-foreground-subtle",
+			children: "—"
+		})]
+	});
 }
 /**
 * TanksRow — compact 2-column grid of the present tanks for the vacuum
-* hero. Absent tanks (null) are skipped; the row renders nothing unless at
-* least one tank is actually renderable — present AND with a known reading
-* (level or status). A tank that is present but all-unknown
-* (`{level:null,status:null}`) renders nothing, so a hero of only such
-* tanks would otherwise show an empty bordered box.
+* 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 = [
@@ -18924,7 +19096,7 @@ function TanksRow({ cleanWater, dirtyWater, detergent, dustBin }) {
 		["detergent", detergent],
 		["dustBin", dustBin]
 	];
-	if (!tanks.some(([, t]) => t !== null && (t.level !== null || t.status !== null))) return null;
+	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, {
@@ -19018,52 +19190,72 @@ function VacuumHeroCard({ trpc, deviceId }) {
 				className: "flex items-center gap-6",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(VacuumGraphic, { state }), /* @__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 })]
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "flex items-center gap-2",
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(VacuumHeroButton, {
-								label: "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: "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: "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: "Return to base",
-								busy,
-								active: state === "returning",
-								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: "Locate",
-								busy,
-								active: false,
-								onClick: () => press(cap.locate),
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Megaphone, { className: "h-5 w-5" })
-							})
-						]
-					})]
+					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 ?? `Error ${slice.errorCode}` })]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex items-center gap-2",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(VacuumHeroButton, {
+									label: "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: "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: "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: "Return to base",
+									busy,
+									active: state === "returning",
+									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: "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", {
@@ -19291,6 +19483,37 @@ function LawnMowerGraphic({ activity }) {
 		})]
 	});
 }
+/** Tailwind text tone for a device-code severity. */
+function severityTone(severity) {
+	switch (severity) {
+		case "error": return "text-destructive";
+		case "warning": return "text-warning";
+		case "info": return "text-foreground-subtle";
+	}
+}
+/** Mowing-progress bar + % — shown only when a progress value is present. */
+function ProgressBar({ percent }) {
+	return /* @__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, percent))}%` }
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: "tabular-nums text-xs text-foreground-subtle",
+			children: [Math.round(percent), "%"]
+		})]
+	});
+}
+/** Current device/event code line — tinted by severity; an icon for warn/error. */
+function CodeLine({ code, label, severity }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: cn("inline-flex items-center gap-1 text-xs", severityTone(severity)),
+		children: [severity !== "info" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TriangleAlert, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: label ?? `Code ${code}` })]
+	});
+}
 /** Battery % badge — shared between inline + hero. */
 function BatteryBadge$1({ level }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
@@ -19394,38 +19617,47 @@ function LawnMowerHeroCard({ trpc, deviceId }) {
 			className: "flex items-center gap-6",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LawnMowerGraphic, { activity }), /* @__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$1, { level: slice.batteryLevel })]
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "flex items-center gap-2",
-					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LawnMowerHeroButton, {
-							label: "Start mowing",
-							busy,
-							active: activity === "mowing",
-							onClick: () => press(cap.startMowing),
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Play, { className: "h-5 w-5" })
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LawnMowerHeroButton, {
-							label: "Pause",
-							busy,
-							active: activity === "paused",
-							onClick: () => press(cap.pause),
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Pause, { className: "h-5 w-5" })
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LawnMowerHeroButton, {
-							label: "Dock",
-							busy,
-							active: activity === "docked",
-							onClick: () => press(cap.dock),
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(House, { className: "h-5 w-5" })
-						})
-					]
-				})]
+				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$1, { level: slice.batteryLevel })]
+					}),
+					slice?.progressPercent != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProgressBar, { percent: slice.progressPercent }),
+					slice?.currentCode != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CodeLine, {
+						code: slice.currentCode,
+						label: slice.currentCodeLabel,
+						severity: slice.severity
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex items-center gap-2",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LawnMowerHeroButton, {
+								label: "Start mowing",
+								busy,
+								active: activity === "mowing",
+								onClick: () => press(cap.startMowing),
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Play, { className: "h-5 w-5" })
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LawnMowerHeroButton, {
+								label: "Pause",
+								busy,
+								active: activity === "paused",
+								onClick: () => press(cap.pause),
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Pause, { className: "h-5 w-5" })
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LawnMowerHeroButton, {
+								label: "Dock",
+								busy,
+								active: activity === "docked",
+								onClick: () => press(cap.dock),
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(House, { className: "h-5 w-5" })
+							})
+						]
+					})
+				]
 			})]
 		})
 	});
@@ -21159,103 +21391,6 @@ function WeatherHeroCard({ trpc, deviceId }) {
 	});
 }
 //#endregion
-//#region src/composites/hover-zoom-image.tsx
-/**
-* <HoverZoomImage> — a small thumbnail that expands into a floating
-* enlarged preview on hover/focus.
-*
-* One responsibility: render a compact thumbnail (image when `src` is
-* present, a muted `ImageOff` placeholder box when null) and, while the
-* thumbnail is hovered or focused, portal a larger preview to
-* `document.body` positioned with FLIP-ON-COLLISION:
-*   - the position is computed from the thumbnail's `getBoundingClientRect`;
-*   - placed ABOVE the thumbnail unless there is insufficient space (then
-*     below); left-clamped to the viewport;
-*   - `position:fixed`, `pointer-events:none`, `z-[9999]`.
-*
-* The portal is what lets this work inside the device grid, whose overflow
-* ancestors would otherwise clip a normally-positioned popover.
-*
-* Reused by BOTH the Image DeviceType inline control (signed image url) and
-* the camera-snapshot cell in device rows (snapshot blob/object url).
-*/
-var DEFAULT_EXPANDED_WIDTH = 288;
-var DEFAULT_EXPANDED_HEIGHT = 196;
-var DEFAULT_THUMB_CLASS = "h-7 w-7 rounded";
-var TRIGGER_GAP = 8;
-var VIEWPORT_MARGIN = 8;
-function HoverZoomImage({ src, alt, caption, placeholder = "No image", thumbClassName = DEFAULT_THUMB_CLASS, expandedWidth = DEFAULT_EXPANDED_WIDTH, expandedHeight = DEFAULT_EXPANDED_HEIGHT }) {
-	const triggerRef = (0, react$1.useRef)(null);
-	const [position, setPosition] = (0, react$1.useState)(null);
-	const [errored, setErrored] = (0, react$1.useState)(false);
-	(0, react$1.useEffect)(() => {
-		setErrored(false);
-	}, [src]);
-	const hasImage = src !== null && !errored;
-	const safeSrc = src ?? void 0;
-	const open = (0, react$1.useCallback)(() => {
-		const el = triggerRef.current;
-		if (!el) return;
-		const rect = el.getBoundingClientRect();
-		const spaceAbove = rect.top;
-		const spaceBelow = window.innerHeight - rect.bottom;
-		const top = spaceAbove < expandedHeight + TRIGGER_GAP && spaceBelow > spaceAbove ? rect.bottom + TRIGGER_GAP : rect.top - expandedHeight - TRIGGER_GAP;
-		const desiredLeft = rect.right - expandedWidth;
-		setPosition({
-			top,
-			left: Math.max(VIEWPORT_MARGIN, Math.min(desiredLeft, window.innerWidth - expandedWidth - VIEWPORT_MARGIN))
-		});
-	}, [expandedWidth, expandedHeight]);
-	const close = (0, react$1.useCallback)(() => setPosition(null), []);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-		ref: triggerRef,
-		type: "button",
-		onClick: (e) => e.stopPropagation(),
-		onMouseEnter: open,
-		onMouseLeave: close,
-		onFocus: open,
-		onBlur: close,
-		"aria-label": alt,
-		className: `flex flex-shrink-0 items-center justify-center overflow-hidden border border-border bg-background text-foreground-subtle transition-colors hover:bg-surface-hover ${thumbClassName}`,
-		children: hasImage ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-			src: safeSrc,
-			alt: "",
-			onError: () => setErrored(true),
-			className: "h-full w-full object-cover"
-		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ImageOff, {
-			className: "h-3.5 w-3.5",
-			"aria-hidden": "true"
-		})
-	}), position && (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		"aria-hidden": "true",
-		style: {
-			position: "fixed",
-			top: position.top,
-			left: position.left,
-			width: expandedWidth,
-			pointerEvents: "none"
-		},
-		className: "z-[9999] overflow-hidden rounded-lg border border-border bg-surface shadow-lg shadow-black/30",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "flex h-40 items-center justify-center bg-background",
-			children: hasImage ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-				src: safeSrc,
-				alt,
-				className: "h-full w-full object-cover"
-			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "text-xs text-foreground-subtle",
-				children: placeholder
-			})
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "px-3 py-2",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				className: "truncate text-xs font-semibold text-foreground",
-				children: caption ?? alt
-			})
-		})]
-	}), document.body)] });
-}
-//#endregion
 //#region src/composites/device-controls/image-control.tsx
 /**
 * Image controls for a `DeviceType.Image` device.
@@ -21279,6 +21414,91 @@ function useImage(trpc, deviceId) {
 		slice: (d) => d.state.image
 	});
 }
+var ZOOM_MIN = 1;
+var ZOOM_MAX = 6;
+var ZOOM_STEP = .5;
+/**
+* ImageDetailModal — a full-view image dialog with zoom in/out/reset and pan
+* (scroll when zoomed). Generous padding frames the image. Opened by clicking
+* the inline thumbnail or the hero image. Controlled via `open`/`onOpenChange`.
+*/
+function ImageDetailModal({ url, alt, open, onOpenChange }) {
+	const [scale, setScale] = (0, react$1.useState)(1);
+	(0, react$1.useEffect)(() => {
+		if (open) setScale(1);
+	}, [open, url]);
+	const zoomIn = (0, react$1.useCallback)(() => setScale((s) => Math.min(ZOOM_MAX, s + ZOOM_STEP)), []);
+	const zoomOut = (0, react$1.useCallback)(() => setScale((s) => Math.max(ZOOM_MIN, s - ZOOM_STEP)), []);
+	const reset = (0, react$1.useCallback)(() => setScale(1), []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Dialog, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DialogContent, {
+			width: "lg",
+			className: "max-w-5xl p-6",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-center justify-between gap-2 mb-3",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "truncate text-sm font-semibold text-foreground",
+					children: alt
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-center gap-1",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalIconButton, {
+							label: "Zoom out",
+							disabled: scale <= ZOOM_MIN,
+							onClick: zoomOut,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZoomOut, { className: "h-4 w-4" })
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: "tabular-nums text-xs text-foreground-subtle w-10 text-center",
+							children: [Math.round(scale * 100), "%"]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalIconButton, {
+							label: "Zoom in",
+							disabled: scale >= ZOOM_MAX,
+							onClick: zoomIn,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZoomIn, { className: "h-4 w-4" })
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalIconButton, {
+							label: "Reset zoom",
+							disabled: scale === 1,
+							onClick: reset,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RotateCcw, { className: "h-4 w-4" })
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalIconButton, {
+							label: "Close",
+							onClick: () => onOpenChange(false),
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(X, { className: "h-4 w-4" })
+						})
+					]
+				})]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex max-h-[75vh] items-center justify-center overflow-auto rounded border border-border bg-gradient-to-b from-surface-hover to-surface p-6",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+					src: url,
+					alt,
+					style: {
+						transform: `scale(${scale})`,
+						transformOrigin: "center"
+					},
+					className: "max-h-[65vh] w-auto object-contain transition-transform duration-150"
+				})
+			})]
+		})
+	});
+}
+function ModalIconButton({ label, disabled, onClick, children }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		"aria-label": label,
+		title: label,
+		disabled,
+		onClick,
+		className: "inline-flex h-7 w-7 items-center justify-center rounded text-foreground-subtle hover:text-foreground hover:bg-surface-hover transition-colors disabled:opacity-40 disabled:cursor-not-allowed",
+		children
+	});
+}
 /**
 * ImageInlineControl — compact thumbnail for a device-list row that expands
 * into a floating preview on hover/focus (shared `HoverZoomImage`). Shows a
@@ -21289,13 +21509,36 @@ function useImage(trpc, deviceId) {
 */
 function ImageInlineControl({ trpc, deviceId }) {
 	const { slice } = useImage(trpc, deviceId);
+	const [open, setOpen] = (0, react$1.useState)(false);
 	if (slice === void 0) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HoverZoomImage, {
-		src: slice.url,
-		alt: "Image",
-		placeholder: "No image",
-		thumbClassName: "h-7 w-7 rounded"
+	const url = slice.url;
+	if (url === null) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "inline-flex h-7 w-7 items-center justify-center rounded bg-surface-hover text-foreground-subtle",
+		title: "No image",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ImageOff, {
+			className: "h-4 w-4",
+			"aria-hidden": "true"
+		})
 	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		title: "View image",
+		onClick: (e) => {
+			e.stopPropagation();
+			setOpen(true);
+		},
+		className: "inline-flex items-center justify-center rounded ring-offset-1 hover:ring-2 hover:ring-primary/50 transition",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+			src: url,
+			alt: "Image",
+			className: "h-7 w-7 rounded object-cover"
+		})
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ImageDetailModal, {
+		url,
+		alt: "Image",
+		open,
+		onOpenChange: setOpen
+	})] });
 }
 /**
 * ImageHeroCard — read-only framed image for the device-detail hero.
@@ -21308,19 +21551,27 @@ function ImageInlineControl({ trpc, deviceId }) {
 function ImageHeroCard({ trpc, deviceId, deviceName }) {
 	const { slice } = useImage(trpc, deviceId);
 	const [errored, setErrored] = (0, react$1.useState)(false);
+	const [open, setOpen] = (0, react$1.useState)(false);
+	const url = slice?.url ?? null;
 	(0, react$1.useEffect)(() => {
 		setErrored(false);
-	}, [slice?.url ?? null]);
+	}, [url]);
 	if (slice === void 0) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "flex flex-col items-stretch gap-3 rounded-lg border border-border bg-surface p-4",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "flex w-full items-center justify-center overflow-hidden rounded border-2 border-border bg-gradient-to-b from-surface-hover to-surface",
-			children: slice.url !== null && !errored ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-				src: slice.url,
-				alt: deviceName ?? "Image",
-				onError: () => setErrored(true),
-				className: "max-h-72 w-full object-contain"
+			children: slice.url !== null && !errored ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				title: "View image",
+				onClick: () => setOpen(true),
+				className: "flex w-full cursor-zoom-in items-center justify-center",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+					src: slice.url,
+					alt: deviceName ?? "Image",
+					onError: () => setErrored(true),
+					className: "max-h-72 w-full object-contain"
+				})
 			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				"data-testid": "image-placeholder",
 				className: "flex h-48 w-full flex-col items-center justify-center gap-2 text-foreground-subtle",
@@ -21332,7 +21583,12 @@ function ImageHeroCard({ trpc, deviceId, deviceName }) {
 					children: "No image"
 				})]
 			})
-		})
+		}), url !== null && !errored && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ImageDetailModal, {
+			url,
+			alt: deviceName ?? "Image",
+			open,
+			onOpenChange: setOpen
+		})]
 	});
 }
 //#endregion
@@ -24891,6 +25147,103 @@ function BatteryBadge({ status, variant = "compact", className }) {
 	});
 }
 //#endregion
+//#region src/composites/hover-zoom-image.tsx
+/**
+* <HoverZoomImage> — a small thumbnail that expands into a floating
+* enlarged preview on hover/focus.
+*
+* One responsibility: render a compact thumbnail (image when `src` is
+* present, a muted `ImageOff` placeholder box when null) and, while the
+* thumbnail is hovered or focused, portal a larger preview to
+* `document.body` positioned with FLIP-ON-COLLISION:
+*   - the position is computed from the thumbnail's `getBoundingClientRect`;
+*   - placed ABOVE the thumbnail unless there is insufficient space (then
+*     below); left-clamped to the viewport;
+*   - `position:fixed`, `pointer-events:none`, `z-[9999]`.
+*
+* The portal is what lets this work inside the device grid, whose overflow
+* ancestors would otherwise clip a normally-positioned popover.
+*
+* Reused by BOTH the Image DeviceType inline control (signed image url) and
+* the camera-snapshot cell in device rows (snapshot blob/object url).
+*/
+var DEFAULT_EXPANDED_WIDTH = 288;
+var DEFAULT_EXPANDED_HEIGHT = 196;
+var DEFAULT_THUMB_CLASS = "h-7 w-7 rounded";
+var TRIGGER_GAP = 8;
+var VIEWPORT_MARGIN = 8;
+function HoverZoomImage({ src, alt, caption, placeholder = "No image", thumbClassName = DEFAULT_THUMB_CLASS, expandedWidth = DEFAULT_EXPANDED_WIDTH, expandedHeight = DEFAULT_EXPANDED_HEIGHT }) {
+	const triggerRef = (0, react$1.useRef)(null);
+	const [position, setPosition] = (0, react$1.useState)(null);
+	const [errored, setErrored] = (0, react$1.useState)(false);
+	(0, react$1.useEffect)(() => {
+		setErrored(false);
+	}, [src]);
+	const hasImage = src !== null && !errored;
+	const safeSrc = src ?? void 0;
+	const open = (0, react$1.useCallback)(() => {
+		const el = triggerRef.current;
+		if (!el) return;
+		const rect = el.getBoundingClientRect();
+		const spaceAbove = rect.top;
+		const spaceBelow = window.innerHeight - rect.bottom;
+		const top = spaceAbove < expandedHeight + TRIGGER_GAP && spaceBelow > spaceAbove ? rect.bottom + TRIGGER_GAP : rect.top - expandedHeight - TRIGGER_GAP;
+		const desiredLeft = rect.right - expandedWidth;
+		setPosition({
+			top,
+			left: Math.max(VIEWPORT_MARGIN, Math.min(desiredLeft, window.innerWidth - expandedWidth - VIEWPORT_MARGIN))
+		});
+	}, [expandedWidth, expandedHeight]);
+	const close = (0, react$1.useCallback)(() => setPosition(null), []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		ref: triggerRef,
+		type: "button",
+		onClick: (e) => e.stopPropagation(),
+		onMouseEnter: open,
+		onMouseLeave: close,
+		onFocus: open,
+		onBlur: close,
+		"aria-label": alt,
+		className: `flex flex-shrink-0 items-center justify-center overflow-hidden border border-border bg-background text-foreground-subtle transition-colors hover:bg-surface-hover ${thumbClassName}`,
+		children: hasImage ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+			src: safeSrc,
+			alt: "",
+			onError: () => setErrored(true),
+			className: "h-full w-full object-cover"
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ImageOff, {
+			className: "h-3.5 w-3.5",
+			"aria-hidden": "true"
+		})
+	}), position && (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"aria-hidden": "true",
+		style: {
+			position: "fixed",
+			top: position.top,
+			left: position.left,
+			width: expandedWidth,
+			pointerEvents: "none"
+		},
+		className: "z-[9999] overflow-hidden rounded-lg border border-border bg-surface shadow-lg shadow-black/30",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "flex h-40 items-center justify-center bg-background",
+			children: hasImage ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+				src: safeSrc,
+				alt,
+				className: "h-full w-full object-cover"
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-xs text-foreground-subtle",
+				children: placeholder
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "px-3 py-2",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "truncate text-xs font-semibold text-foreground",
+				children: caption ?? alt
+			})
+		})]
+	}), document.body)] });
+}
+//#endregion
 //#region src/composites/device-item/preview.tsx
 function DeviceItemPreview({ trpc, device, status, enabled, showStatusPills = false }) {
 	const snapshot = useDeviceSnapshotImage(trpc, enabled && device.online ? device.id : null);
@@ -42721,6 +43074,7 @@ exports.useDeviceManagerAdoptionAdopt = useDeviceManagerAdoptionAdopt;
 exports.useDeviceManagerAdoptionListCandidates = useDeviceManagerAdoptionListCandidates;
 exports.useDeviceManagerAdoptionRefresh = useDeviceManagerAdoptionRefresh;
 exports.useDeviceManagerAdoptionRelease = useDeviceManagerAdoptionRelease;
+exports.useDeviceManagerAdoptionResync = useDeviceManagerAdoptionResync;
 exports.useDeviceManagerAllocateDeviceId = useDeviceManagerAllocateDeviceId;
 exports.useDeviceManagerApplyInitialMeta = useDeviceManagerApplyInitialMeta;
 exports.useDeviceManagerCreateDevice = useDeviceManagerCreateDevice;