@camstack/ui-library 1.2.256 → 1.2.258

package/dist/index.cjs

@@ -10717,7 +10717,10 @@ var IconButton = (0, react$1.forwardRef)(({ className, variant, size, icon: Icon
 			size
 		}), className),
 		...props,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { className: "h-4 w-4" })
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+			className: "h-4 w-4",
+			"aria-hidden": "true"
+		})
 	});
 });
 IconButton.displayName = "IconButton";
@@ -10738,19 +10741,19 @@ var inputVariants = cva("h-7 w-full px-2.5 text-xs bg-surface border rounded-md
 });
 var Input = (0, react$1.forwardRef)(({ className, state, leftSlot, rightSlot, ...props }, ref) => {
 	if (leftSlot || rightSlot) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "relative flex items-center w-full",
+		className: cn("relative flex items-center", className),
 		children: [
 			leftSlot && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "absolute left-2.5 flex items-center pointer-events-none",
+				className: "absolute left-2.5 flex items-center text-foreground-subtle pointer-events-none",
 				children: leftSlot
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 				ref,
-				className: cn(inputVariants({ state }), leftSlot ? "pl-7" : "", rightSlot ? "pr-7" : "", className),
+				className: cn(inputVariants({ state }), leftSlot && "pl-8", rightSlot && "pr-8", className),
 				...props
 			}),
 			rightSlot && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "absolute right-2.5 flex items-center pointer-events-none",
+				className: "absolute right-2.5 flex items-center text-foreground-subtle",
 				children: rightSlot
 			})
 		]
@@ -30726,16 +30729,6 @@ function resolveEffectiveStepModel(input) {
 }
 //#endregion
 //#region src/composites/root-model-source.tsx
-/**
-* "Use the root model" — the step editor's control for a step the camera's
-* ROOT detection model can supply (D730).
-*
-* The flag (`useRootModel`, in the step's own settings) is an operator INTENT
-* kept beside the step's model: checking it never changes the model, and a
-* root that cannot supply the step leaves the step running its own model while
-* the flag waits, inactive, for a root that can. Whether it is in force is
-* `resolveRootSupply` — the same function the runner decides with.
-*/
 /** The editor's view of the flag for one step, or `null` for a step no root can supply. */
 function rootSourceState(stepId, settings, rootModel) {
 	if (!(0, _camstack_types.isRootSuppliableStepId)(stepId)) return null;
@@ -31687,6 +31680,7 @@ var Separator = (0, react$1.forwardRef)(({ className, orientation, ...props }, r
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		ref,
 		role: "separator",
+		"aria-orientation": orientation ?? "horizontal",
 		className: cn(separatorVariants({ orientation }), className),
 		...props
 	});
@@ -31988,15 +31982,27 @@ var ScrollArea = (0, react$1.forwardRef)(({ className, ...props }, ref) => {
 ScrollArea.displayName = "ScrollArea";
 //#endregion
 //#region src/primitives/floating-panel.tsx
-function FloatingPanel({ title, onClose, children, defaultWidth = 360, defaultHeight = 280, minWidth = 280, minHeight = 160, offsetIndex = 0, className }) {
-	const [pos, setPos] = (0, react$1.useState)({
+function FloatingPanel({ title, icon: Icon, position, onPositionChange, size: controlledSize, onSizeChange, onClose, children, defaultWidth = 360, defaultHeight = 280, minWidth = 280, minHeight = 160, offsetIndex = 0, className }) {
+	const [ownPos, setOwnPos] = (0, react$1.useState)({
 		x: 80 + offsetIndex * 30,
 		y: 80 + offsetIndex * 30
 	});
-	const [size, setSize] = (0, react$1.useState)({
+	const [ownSize, setOwnSize] = (0, react$1.useState)({
 		w: defaultWidth,
 		h: defaultHeight
 	});
+	const pos = position ?? ownPos;
+	const size = controlledSize ?? ownSize;
+	const latest = (0, react$1.useRef)({
+		size,
+		onPositionChange,
+		onSizeChange
+	});
+	latest.current = {
+		size,
+		onPositionChange,
+		onSizeChange
+	};
 	const [minimized, setMinimized] = (0, react$1.useState)(false);
 	const dragging = (0, react$1.useRef)(false);
 	const resizing = (0, react$1.useRef)(false);
@@ -32024,10 +32030,14 @@ function FloatingPanel({ title, onClose, children, defaultWidth = 360, defaultHe
 	}, []);
 	(0, react$1.useEffect)(() => {
 		const onMouseMove = (e) => {
-			if (dragging.current) setPos({
-				x: e.clientX - offset.current.x,
-				y: e.clientY - offset.current.y
-			});
+			if (dragging.current) {
+				const next = {
+					x: e.clientX - offset.current.x,
+					y: e.clientY - offset.current.y
+				};
+				setOwnPos(next);
+				latest.current.onPositionChange?.(next);
+			}
 			if (resizing.current) {
 				const dx = e.clientX - offset.current.x;
 				const dy = e.clientY - offset.current.y;
@@ -32035,10 +32045,17 @@ function FloatingPanel({ title, onClose, children, defaultWidth = 360, defaultHe
 					x: e.clientX,
 					y: e.clientY
 				};
-				setSize((prev) => ({
+				const prev = latest.current.size;
+				const next = {
 					w: Math.max(minWidth, prev.w + dx),
 					h: Math.max(minHeight, prev.h + dy)
-				}));
+				};
+				latest.current = {
+					...latest.current,
+					size: next
+				};
+				setOwnSize(next);
+				latest.current.onSizeChange?.(next);
 			}
 		};
 		const onMouseUp = () => {
@@ -32057,9 +32074,15 @@ function FloatingPanel({ title, onClose, children, defaultWidth = 360, defaultHe
 		style: { maxHeight: "60dvh" },
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "flex items-center justify-between gap-2 px-3 py-2 border-b border-border shrink-0 bg-surface",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "text-[11px] font-medium truncate",
-				children: title
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-center gap-2 min-w-0",
+				children: [Icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+					size: 12,
+					className: "text-primary shrink-0"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "text-[11px] font-medium truncate",
+					children: title
+				})]
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "flex items-center gap-1 shrink-0",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
@@ -32090,13 +32113,20 @@ function FloatingPanel({ title, onClose, children, defaultWidth = 360, defaultHe
 			className: "flex items-center justify-between gap-2 px-3 py-2 border-b border-border cursor-move select-none shrink-0 bg-surface",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "flex items-center gap-2 min-w-0",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(GripHorizontal, {
-					size: 12,
-					className: "text-foreground-subtle shrink-0"
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "text-[11px] font-medium truncate",
-					children: title
-				})]
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(GripHorizontal, {
+						size: 12,
+						className: "text-foreground-subtle shrink-0"
+					}),
+					Icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+						size: 12,
+						className: "text-primary shrink-0"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-[11px] font-medium truncate",
+						children: title
+					})
+				]
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "flex items-center gap-1 shrink-0",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
@@ -32573,19 +32603,6 @@ function AudioWaveform({ samples, sampleRate = 16e3, height = 96, className = ""
 }
 //#endregion
 //#region src/composites/battery-badge.tsx
-/**
-* BatteryBadge — compact battery indicator for camera tiles + headers.
-*
-* Renders a battery icon with the percentage, a charging glyph when the
-* device is on DC/solar, and a moon when the camera is sleeping (so
-* operators don't blame the platform for low fps on a sleeping cam).
-*
-* Self-contained on data: the caller passes a `status` snapshot from
-* `trpc.battery.getStatus.useQuery` or the `battery.onStatusChanged`
-* event subscription. Returns `null` when status is missing so the
-* call-site can drop the badge in unconditionally — non-battery
-* cameras simply produce no badge.
-*/
 /** A binary battery is "low" below this stand-in percentage (normal maps to
 *  100, low to a sub-threshold value). Keep in sync with the HA container. */
 var BINARY_LOW_THRESHOLD = 50;
@@ -58602,26 +58619,39 @@ function SnapshotButton({ trpc, deviceId, deviceName, size = "sm", className })
 }
 //#endregion
 //#region src/composites/stat-card.tsx
-function StatCard({ value, label, trend, className }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Card, {
-		className: cn("flex flex-col gap-1", className),
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "flex items-baseline gap-2",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "text-2xl font-semibold text-foreground",
-				children: value
-			}), trend && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-				className: cn("inline-flex items-center gap-0.5 text-xs font-medium", trend.direction === "up" ? "text-success" : "text-danger"),
-				children: [
-					trend.direction === "up" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TrendingUp, { className: "h-3 w-3" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TrendingDown, { className: "h-3 w-3" }),
-					trend.value,
-					"%"
-				]
-			})]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "text-xs text-foreground-muted",
-			children: label
-		})]
+function StatCard({ value, label, icon: Icon, subtext, valueClassName, trend, className }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: cn("rounded-lg border border-border bg-surface p-2 sm:p-2.5 min-w-0", className),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-center gap-1.5 mb-0.5 min-w-0",
+				children: [Icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { className: "h-3 w-3 text-foreground-subtle flex-shrink-0" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "text-[10px] text-foreground-subtle uppercase tracking-wider whitespace-nowrap overflow-hidden text-ellipsis min-w-0",
+					title: label,
+					children: label
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-baseline gap-2 min-w-0",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: cn("text-lg font-semibold leading-tight whitespace-nowrap overflow-hidden text-ellipsis min-w-0", valueClassName ?? "text-foreground"),
+					title: String(value),
+					children: value
+				}), trend && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: cn("inline-flex items-center gap-0.5 text-xs font-medium shrink-0", trend.direction === "up" ? "text-success" : "text-danger"),
+					children: [
+						trend.direction === "up" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TrendingUp, { className: "h-3 w-3" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TrendingDown, { className: "h-3 w-3" }),
+						trend.value,
+						"%"
+					]
+				})]
+			}),
+			subtext && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "text-[10px] text-foreground-subtle mt-0.5 truncate",
+				title: subtext,
+				children: subtext
+			})
+		]
 	});
 }
 //#endregion
@@ -58642,9 +58672,33 @@ var statusConfig = {
 	unknown: {
 		colorClass: "bg-foreground-subtle",
 		label: "Unknown"
+	},
+	running: {
+		colorClass: "bg-success",
+		label: "Running"
+	},
+	stopped: {
+		colorClass: "bg-foreground-subtle",
+		label: "Stopped"
+	},
+	error: {
+		colorClass: "bg-danger",
+		label: "Error"
+	},
+	idle: {
+		colorClass: "bg-info",
+		label: "Idle"
+	},
+	enabled: {
+		colorClass: "bg-success",
+		label: "Enabled"
+	},
+	disabled: {
+		colorClass: "bg-warning",
+		label: "Disabled"
 	}
 };
-function StatusBadge({ status, showDot = true, showLabel = true, size = "sm", className }) {
+function StatusBadge({ status, label, showDot = true, showLabel = true, size = "sm", className }) {
 	const config = statusConfig[status];
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 		className: cn("inline-flex items-center gap-1.5", size === "sm" ? "text-xs" : "text-sm", className),
@@ -58653,7 +58707,7 @@ function StatusBadge({ status, showDot = true, showLabel = true, size = "sm", cl
 			"aria-hidden": "true"
 		}), showLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: "text-foreground",
-			children: config.label
+			children: label ?? config.label
 		})]
 	});
 }

package/dist/index.d.ts

@@ -1,31 +1,35 @@
-export * from './composites';
-export * from './contexts/custom-field-renderers';
-export * from './contexts/device-context';
-export * from './contexts/device-quick-detail';
-export * from './contexts/player-overlays';
-export * from './contexts/recorded-playback';
-export { SystemProvider, type SystemProviderProps, useOptionalSystem, useSystem, } from './contexts/system-context';
-export * from './contexts/vod-playback';
-export { loadRemoteBundle, useAllWidgets, useOptionalWidgetRegistry, useRemoteComponent, useWidget, useWidgetMetadata, useWidgetRegistry, type WidgetHost, type WidgetMetadataEntry, type WidgetProps, type WidgetRegistry, WidgetRegistryProvider, type WidgetRegistryProviderProps, type WidgetSize, } from './contexts/widget-registry';
-export * from './contexts/zone-editing';
-export * from './generated/system-hooks';
-export * from './hooks';
-export * from './icons';
-export * from './lib';
-export * from './primitives';
-export * from './theme';
-export { trpc } from './trpc-react';
-export { HOST_WIDGETS, type HostWidgetProps } from './widgets/host-widgets';
-export { classifyCapability, useCapabilityPresence, type CapabilityPresence, } from './hooks/use-capability-presence';
-export { AdminLinkQuickAction, type AdminLinkQuickActionProps, useDeviceAdminLink, } from './composites/device-item/admin-link-quick-action';
+export * from "./composites";
+export * from "./contexts/custom-field-renderers";
+export * from "./contexts/device-context";
+export * from "./contexts/device-quick-detail";
+export * from "./contexts/player-overlays";
+export * from "./contexts/recorded-playback";
+export { SystemProvider, type SystemProviderProps, useOptionalSystem, useSystem } from "./contexts/system-context";
+export * from "./contexts/vod-playback";
+export { loadRemoteBundle, useAllWidgets, useOptionalWidgetRegistry, useRemoteComponent, useWidget, useWidgetMetadata, useWidgetRegistry, type WidgetHost, type WidgetMetadataEntry, type WidgetProps, type WidgetRegistry, WidgetRegistryProvider, type WidgetRegistryProviderProps, type WidgetSize } from "./contexts/widget-registry";
+export * from "./contexts/zone-editing";
+export * from "./generated/system-hooks";
+export * from "./hooks";
+export * from "./icons";
+export * from "./lib";
+export * from "./primitives";
+export * from "./theme";
+export { trpc } from "./trpc-react";
+export { HOST_WIDGETS, type HostWidgetProps } from "./widgets/host-widgets";
+export { classifyCapability, useCapabilityPresence, type CapabilityPresence } from "./hooks/use-capability-presence";
+export { AdminLinkQuickAction, type AdminLinkQuickActionProps, useDeviceAdminLink } from "./composites/device-item/admin-link-quick-action";
+import { type ComponentType, type LazyExoticComponent } from "react";
+import type { CapSettingsComponentProps } from "./composites/cap-settings/index.js";
+import type { MaskShapeCanvasProps } from "./composites/cap-settings/MaskShapeCanvas.js";
+import type { SceneMonitorEditorProps } from "./composites/cap-settings/SceneMonitorEditor.js";
 /** Lazy-wrapped `MaskShapeCanvas` — code-split off the main bundle.
- *  Render inside `<Suspense>` at all call sites. */
-export declare const MaskShapeCanvas: import('react').LazyExoticComponent<import('react').MemoExoticComponent<({ items, selectedId, onSelect, onShapeChange, onDrawComplete, drawingKind, supportedShapes, transparent, backdrop, polygonVertices, grid, }: import('./composites').MaskShapeCanvasProps) => import("react").JSX.Element>>;
+*  Render inside `<Suspense>` at all call sites. */
+export declare const MaskShapeCanvas: LazyExoticComponent<ComponentType<MaskShapeCanvasProps>>;
 /** Lazy-wrapped `MotionZonesSettings` — code-split off the main bundle. */
-export declare const MotionZonesSettings: import('react').LazyExoticComponent<typeof import('./composites/cap-settings').MotionZonesSettings>;
+export declare const MotionZonesSettings: LazyExoticComponent<ComponentType<CapSettingsComponentProps>>;
 /** Lazy-wrapped `SceneMonitorEditor` — code-split off the main bundle for the
- *  same reason: it mounts `MaskShapeCanvas`, which chains react-konva. Render
- *  inside `<Suspense>`; the admin-ui `/scenes` dialog is its only caller. */
-export declare const SceneMonitorEditor: import('react').LazyExoticComponent<typeof import('./composites/cap-settings').SceneMonitorEditor>;
+*  same reason: it mounts `MaskShapeCanvas`, which chains react-konva. Render
+*  inside `<Suspense>`; the admin-ui `/scenes` dialog is its only caller. */
+export declare const SceneMonitorEditor: LazyExoticComponent<ComponentType<SceneMonitorEditorProps>>;
 /** Lazy-wrapped `PrivacyMaskSettings` — code-split off the main bundle. */
-export declare const PrivacyMaskSettings: import('react').LazyExoticComponent<typeof import('./composites/cap-settings').PrivacyMaskSettings>;
+export declare const PrivacyMaskSettings: LazyExoticComponent<ComponentType<CapSettingsComponentProps>>;