@camstack/ui-library 1.2.120 → 1.2.121

package/dist/composites/cap-settings/NavigationPanel.d.ts

@@ -0,0 +1,2 @@
+import { CapSettingsComponentProps } from './index';
+export declare function NavigationPanel({ deviceId }: CapSettingsComponentProps): import("react").JSX.Element;

package/dist/composites/cap-settings/index.d.ts

@@ -4,6 +4,7 @@ export type { MaskShapeCanvasProps, MaskShapeItem } from './MaskShapeCanvas';
 export { MaskShapeCanvas } from './MaskShapeCanvas';
 export { MotionZonesSettings } from './MotionZonesSettings';
 export { PrivacyMaskSettings } from './PrivacyMaskSettings';
+export { NavigationPanel } from './NavigationPanel';
 export { PtzPanel } from './PtzPanel';
 export { RecordingBandsEditor } from './RecordingBandsEditor';
 export { RecordingPanel } from './RecordingPanel';

package/dist/composites/index.d.ts

@@ -21,6 +21,7 @@ export { AutotrackSection } from './cap-settings/AutotrackSection';
 export { ConsumablesPanel } from './cap-settings/ConsumablesPanel';
 export type { CapSettingsComponentProps } from './cap-settings/index';
 export type { MaskShapeCanvasProps, MaskShapeItem } from './cap-settings/MaskShapeCanvas';
+export { NavigationPanel } from './cap-settings/NavigationPanel';
 export { PtzPanel } from './cap-settings/PtzPanel';
 export { RecordingPanel } from './cap-settings/RecordingPanel';
 export type { SceneCaptureVariant } from './cap-settings/scene-monitor-copy';

package/dist/generated/system-hooks.d.ts

@@ -935,6 +935,28 @@ export declare const useMqttBrokerGetStatus: typeof trpc.mqttBroker.getStatus.us
 export declare const useNativeObjectDetectionSetEnabled: typeof trpc.nativeObjectDetection.setEnabled.useMutation;
 /** Generated alias around `trpc.nativeObjectDetection.getStatus.useQuery`. */
 export declare const useNativeObjectDetectionGetStatus: typeof trpc.nativeObjectDetection.getStatus.useQuery;
+/** Generated alias around `trpc.navigation.move.useMutation`. */
+export declare const useNavigationMove: typeof trpc.navigation.move.useMutation;
+/** Generated alias around `trpc.navigation.stop.useMutation`. */
+export declare const useNavigationStop: typeof trpc.navigation.stop.useMutation;
+/** Generated alias around `trpc.navigation.goToPoint.useMutation`. */
+export declare const useNavigationGoToPoint: typeof trpc.navigation.goToPoint.useMutation;
+/** Generated alias around `trpc.navigation.listActions.useQuery`. */
+export declare const useNavigationListActions: typeof trpc.navigation.listActions.useQuery;
+/** Generated alias around `trpc.navigation.runAction.useMutation`. */
+export declare const useNavigationRunAction: typeof trpc.navigation.runAction.useMutation;
+/** Generated alias around `trpc.navigation.playSound.useMutation`. */
+export declare const useNavigationPlaySound: typeof trpc.navigation.playSound.useMutation;
+/** Generated alias around `trpc.navigation.setLightOn.useMutation`. */
+export declare const useNavigationSetLightOn: typeof trpc.navigation.setLightOn.useMutation;
+/** Generated alias around `trpc.navigation.setLightMode.useMutation`. */
+export declare const useNavigationSetLightMode: typeof trpc.navigation.setLightMode.useMutation;
+/** Generated alias around `trpc.navigation.setLightLevel.useMutation`. */
+export declare const useNavigationSetLightLevel: typeof trpc.navigation.setLightLevel.useMutation;
+/** Generated alias around `trpc.navigation.getFeatures.useQuery`. */
+export declare const useNavigationGetFeatures: typeof trpc.navigation.getFeatures.useQuery;
+/** Generated alias around `trpc.navigation.getStatus.useQuery`. */
+export declare const useNavigationGetStatus: typeof trpc.navigation.getStatus.useQuery;
 /** Generated alias around `trpc.networkAccess.start.useMutation`. */
 export declare const useNetworkAccessStart: typeof trpc.networkAccess.start.useMutation;
 /** Generated alias around `trpc.networkAccess.stop.useMutation`. */
@@ -945,6 +967,8 @@ export declare const useNetworkAccessGetEndpoint: typeof trpc.networkAccess.getE
 export declare const useNetworkAccessGetStatus: typeof trpc.networkAccess.getStatus.useQuery;
 /** Generated alias around `trpc.networkAccess.listEndpoints.useQuery`. */
 export declare const useNetworkAccessListEndpoints: typeof trpc.networkAccess.listEndpoints.useQuery;
+/** Generated alias around `trpc.networkLink.getStatus.useQuery`. */
+export declare const useNetworkLinkGetStatus: typeof trpc.networkLink.getStatus.useQuery;
 /** Generated alias around `trpc.networkQuality.getDeviceStats.useQuery`. */
 export declare const useNetworkQualityGetDeviceStats: typeof trpc.networkQuality.getDeviceStats.useQuery;
 /** Generated alias around `trpc.networkQuality.getAllStats.useQuery`. */

package/dist/hooks/index.d.ts

@@ -4,6 +4,8 @@ export { useDebouncedString } from './use-debounced-string';
 export type { UseDeviceAutotrack } from './use-device-autotrack';
 export { useDeviceAutotrack } from './use-device-autotrack';
 export type { UseDeviceBatteryTrpc } from './use-device-battery';
+export type { NavigationDirection, UseNavigationResult } from './use-navigation';
+export { NAVIGATION_DRIVE_INTERVAL_MS, useNavigation } from './use-navigation';
 export { useDeviceBattery } from './use-device-battery';
 export type { NetworkLinkStatus } from './use-device-network-link';
 export { useDeviceNetworkLink } from './use-device-network-link';

package/dist/hooks/use-navigation.d.ts

@@ -0,0 +1,26 @@
+import { NavigationActionEntry, NavigationActionId, NavigationFeatures, NavigationLightMode, NavigationStatus } from '@camstack/types';
+import { UseDeviceProxyTrpc } from './use-device-proxy';
+export type NavigationDirection = 'forward' | 'left' | 'right' | 'spin';
+/** The cadence the robot app drives at while a direction is held. */
+export declare const NAVIGATION_DRIVE_INTERVAL_MS = 1000;
+export interface UseNavigationOptions {
+    readonly enabled?: boolean;
+}
+export interface UseNavigationResult {
+    readonly features: NavigationFeatures | null;
+    readonly actions: readonly NavigationActionEntry[];
+    readonly status: NavigationStatus | null;
+    /** Start nudging in a direction at 1 Hz until `stopDrive`. */
+    readonly startDrive: (direction: NavigationDirection) => void;
+    readonly stopDrive: () => Promise<void>;
+    readonly runAction: (actionId: NavigationActionId) => Promise<void>;
+    readonly playSound: (soundId: number) => Promise<void>;
+    readonly setLightOn: (on: boolean) => Promise<void>;
+    readonly setLightMode: (mode: NavigationLightMode, level?: number) => Promise<void>;
+    readonly setLightLevel: (level: number) => Promise<void>;
+    readonly busy: boolean;
+    readonly error: string | null;
+    /** True while a direction is held. */
+    readonly driving: NavigationDirection | null;
+}
+export declare function useNavigation(trpc: UseDeviceProxyTrpc, deviceId: number, hookOptions?: UseNavigationOptions): UseNavigationResult;

package/dist/index.cjs

@@ -1890,6 +1890,34 @@ var Flame = createLucideIcon("flame", [["path", {
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
+var FlashlightOff = createLucideIcon("flashlight-off", [
+	["path", {
+		d: "M11.652 6H18",
+		key: "voqkpr"
+	}],
+	["path", {
+		d: "M12 13v1",
+		key: "176q98"
+	}],
+	["path", {
+		d: "M16 16v4a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-8a4 4 0 0 0-.8-2.4l-.6-.8A3 3 0 0 1 6 7V6",
+		key: "dzyf92"
+	}],
+	["path", {
+		d: "m2 2 20 20",
+		key: "1ooewy"
+	}],
+	["path", {
+		d: "M7.649 2H17a1 1 0 0 1 1 1v4a3 3 0 0 1-.6 1.8l-.6.8a4 4 0 0 0-.55 1.007",
+		key: "1hvcfn"
+	}]
+]);
+/**
+* @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 Flashlight = createLucideIcon("flashlight", [
 	["path", {
 		d: "M12 13v1",
@@ -2081,6 +2109,30 @@ var Hammer = createLucideIcon("hammer", [
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
+var Hand = createLucideIcon("hand", [
+	["path", {
+		d: "M18 11V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2",
+		key: "1fvzgz"
+	}],
+	["path", {
+		d: "M14 10V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v2",
+		key: "1kc0my"
+	}],
+	["path", {
+		d: "M10 10.5V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2v8",
+		key: "10h0bg"
+	}],
+	["path", {
+		d: "M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15",
+		key: "1s1gnw"
+	}]
+]);
+/**
+* @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 HardDrive = createLucideIcon("hard-drive", [
 	["path", {
 		d: "M10 16h.01",
@@ -4286,6 +4338,19 @@ var Type = createLucideIcon("type", [
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
+var Undo2 = createLucideIcon("undo-2", [["path", {
+	d: "M9 14 4 9l5-5",
+	key: "102s5s"
+}], ["path", {
+	d: "M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11",
+	key: "f3b9sd"
+}]]);
+/**
+* @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 Unlink2 = createLucideIcon("unlink-2", [["path", {
 	d: "M15 7h2a5 5 0 0 1 0 10h-2m-6 0H7A5 5 0 0 1 7 7h2",
 	key: "1re2ne"
@@ -5922,6 +5987,28 @@ var useMqttBrokerGetStatus = trpc.mqttBroker.getStatus.useQuery;
 var useNativeObjectDetectionSetEnabled = trpc.nativeObjectDetection.setEnabled.useMutation;
 /** Generated alias around `trpc.nativeObjectDetection.getStatus.useQuery`. */
 var useNativeObjectDetectionGetStatus = trpc.nativeObjectDetection.getStatus.useQuery;
+/** Generated alias around `trpc.navigation.move.useMutation`. */
+var useNavigationMove = trpc.navigation.move.useMutation;
+/** Generated alias around `trpc.navigation.stop.useMutation`. */
+var useNavigationStop = trpc.navigation.stop.useMutation;
+/** Generated alias around `trpc.navigation.goToPoint.useMutation`. */
+var useNavigationGoToPoint = trpc.navigation.goToPoint.useMutation;
+/** Generated alias around `trpc.navigation.listActions.useQuery`. */
+var useNavigationListActions = trpc.navigation.listActions.useQuery;
+/** Generated alias around `trpc.navigation.runAction.useMutation`. */
+var useNavigationRunAction = trpc.navigation.runAction.useMutation;
+/** Generated alias around `trpc.navigation.playSound.useMutation`. */
+var useNavigationPlaySound = trpc.navigation.playSound.useMutation;
+/** Generated alias around `trpc.navigation.setLightOn.useMutation`. */
+var useNavigationSetLightOn = trpc.navigation.setLightOn.useMutation;
+/** Generated alias around `trpc.navigation.setLightMode.useMutation`. */
+var useNavigationSetLightMode = trpc.navigation.setLightMode.useMutation;
+/** Generated alias around `trpc.navigation.setLightLevel.useMutation`. */
+var useNavigationSetLightLevel = trpc.navigation.setLightLevel.useMutation;
+/** Generated alias around `trpc.navigation.getFeatures.useQuery`. */
+var useNavigationGetFeatures = trpc.navigation.getFeatures.useQuery;
+/** Generated alias around `trpc.navigation.getStatus.useQuery`. */
+var useNavigationGetStatus = trpc.navigation.getStatus.useQuery;
 /** Generated alias around `trpc.networkAccess.start.useMutation`. */
 var useNetworkAccessStart = trpc.networkAccess.start.useMutation;
 /** Generated alias around `trpc.networkAccess.stop.useMutation`. */
@@ -5932,6 +6019,8 @@ var useNetworkAccessGetEndpoint = trpc.networkAccess.getEndpoint.useQuery;
 var useNetworkAccessGetStatus = trpc.networkAccess.getStatus.useQuery;
 /** Generated alias around `trpc.networkAccess.listEndpoints.useQuery`. */
 var useNetworkAccessListEndpoints = trpc.networkAccess.listEndpoints.useQuery;
+/** Generated alias around `trpc.networkLink.getStatus.useQuery`. */
+var useNetworkLinkGetStatus = trpc.networkLink.getStatus.useQuery;
 /** Generated alias around `trpc.networkQuality.getDeviceStats.useQuery`. */
 var useNetworkQualityGetDeviceStats = trpc.networkQuality.getDeviceStats.useQuery;
 /** Generated alias around `trpc.networkQuality.getAllStats.useQuery`. */
@@ -15987,6 +16076,373 @@ function ConsumablesPanel({ deviceId }) {
 	});
 }
 //#endregion
+//#region src/hooks/use-navigation.ts
+/**
+* useNavigation — drive a `navigation` robot camera from the UI.
+*
+* The cap's `move` is MOMENTARY: fluid driving is the UI sending a nudge at
+* 1 Hz while a direction is held and ONE `stop` on release, exactly like the
+* robot app's joystick. This hook owns that cadence (`startDrive` /
+* `stopDrive`); the provider forwards each nudge to a single drive write.
+*
+* Everything else is a plain call plus the data the panel renders from:
+* `features` (which primitives are on), `actions` (the enabled dictionary)
+* and the live `status` slice off the device proxy.
+*/
+/** The cadence the robot app drives at while a direction is held. */
+var NAVIGATION_DRIVE_INTERVAL_MS = 1e3;
+var DIRECTION_VECTORS$1 = {
+	forward: {
+		pan: 0,
+		tilt: 1
+	},
+	left: {
+		pan: -1,
+		tilt: 0
+	},
+	right: {
+		pan: 1,
+		tilt: 0
+	},
+	spin: {
+		pan: 0,
+		tilt: -1
+	}
+};
+function isAbsentProvider$1(err) {
+	const message = err instanceof Error ? err.message : String(err);
+	return /not available|no provider|NOT_FOUND|PRECONDITION/i.test(message);
+}
+function useNavigation(trpc, deviceId, hookOptions) {
+	const enabled = hookOptions?.enabled ?? true;
+	const nav = useDeviceProxy(trpc, enabled ? deviceId : null)?.navigation;
+	const status = useDeviceState(trpc, enabled ? deviceId : null, (s) => s.navigation);
+	const [features, setFeatures] = (0, react$1.useState)(null);
+	const [actions, setActions] = (0, react$1.useState)([]);
+	const [busy, setBusy] = (0, react$1.useState)(false);
+	const [error, setError] = (0, react$1.useState)(null);
+	const [driving, setDriving] = (0, react$1.useState)(null);
+	const driveTimer = (0, react$1.useRef)(null);
+	(0, react$1.useEffect)(() => {
+		if (!enabled || !nav) return;
+		let cancelled = false;
+		(async () => {
+			try {
+				const [nextFeatures, nextActions] = await Promise.all([nav.getFeatures({}), nav.listActions({})]);
+				if (cancelled) return;
+				setFeatures(nextFeatures);
+				setActions(nextActions);
+			} catch (err) {
+				if (cancelled || isAbsentProvider$1(err)) return;
+				setError(err instanceof Error ? err.message : String(err));
+			}
+		})();
+		return () => {
+			cancelled = true;
+		};
+	}, [nav, enabled]);
+	const wrap = (0, react$1.useCallback)(async (fn) => {
+		if (!enabled || !nav) return;
+		setError(null);
+		setBusy(true);
+		try {
+			await fn();
+		} catch (err) {
+			setError(err instanceof Error ? err.message : String(err));
+		} finally {
+			setBusy(false);
+		}
+	}, [enabled, nav]);
+	const clearTimer = (0, react$1.useCallback)(() => {
+		if (driveTimer.current !== null) {
+			clearInterval(driveTimer.current);
+			driveTimer.current = null;
+		}
+	}, []);
+	const stopDrive = (0, react$1.useCallback)(async () => {
+		clearTimer();
+		setDriving(null);
+		if (!nav) return;
+		await wrap(() => nav.stop({}));
+	}, [
+		clearTimer,
+		nav,
+		wrap
+	]);
+	const startDrive = (0, react$1.useCallback)((direction) => {
+		if (!nav) return;
+		clearTimer();
+		setDriving(direction);
+		const vector = DIRECTION_VECTORS$1[direction];
+		const nudge = () => {
+			nav.move({
+				pan: vector.pan,
+				tilt: vector.tilt
+			}).catch((err) => {
+				setError(err instanceof Error ? err.message : String(err));
+			});
+		};
+		nudge();
+		driveTimer.current = setInterval(nudge, NAVIGATION_DRIVE_INTERVAL_MS);
+	}, [clearTimer, nav]);
+	(0, react$1.useEffect)(() => {
+		return () => {
+			if (driveTimer.current !== null) {
+				clearInterval(driveTimer.current);
+				driveTimer.current = null;
+				nav?.stop({}).catch(() => void 0);
+			}
+		};
+	}, [nav]);
+	const runAction = (0, react$1.useCallback)((actionId) => wrap(async () => nav?.runAction({ actionId })), [nav, wrap]);
+	const playSound = (0, react$1.useCallback)((soundId) => wrap(async () => nav?.playSound({ soundId })), [nav, wrap]);
+	const setLightOn = (0, react$1.useCallback)((on) => wrap(async () => nav?.setLightOn({ on })), [nav, wrap]);
+	const setLightMode = (0, react$1.useCallback)((mode, level) => wrap(async () => nav?.setLightMode(level === void 0 ? { mode } : {
+		mode,
+		level
+	})), [nav, wrap]);
+	const setLightLevel = (0, react$1.useCallback)((level) => wrap(async () => nav?.setLightLevel({ level })), [nav, wrap]);
+	return {
+		features,
+		actions,
+		status: status ?? null,
+		startDrive,
+		stopDrive,
+		runAction,
+		playSound,
+		setLightOn,
+		setLightMode,
+		setLightLevel,
+		busy,
+		error,
+		driving
+	};
+}
+//#endregion
+//#region src/composites/cap-settings/NavigationPanel.tsx
+/** The cap's icon HINTS are lucide names; unknown hints fall back to a spark. */
+var ICONS = {
+	play: Play,
+	pause: Pause,
+	hand: Hand,
+	home: House,
+	bell: Bell,
+	crosshair: Crosshair,
+	"paw-print": PawPrint,
+	footprints: Footprints,
+	droplets: Droplets,
+	"trash-2": Trash2,
+	flashlight: Flashlight,
+	"flashlight-off": FlashlightOff,
+	cat: Cat,
+	dog: Dog,
+	clock: Clock
+};
+function iconFor(hint) {
+	return ICONS[hint] ?? Sparkles;
+}
+var DRIVE_BUTTONS = [
+	{
+		direction: "left",
+		label: "Turn left",
+		Icon: RotateCcw
+	},
+	{
+		direction: "forward",
+		label: "Forward",
+		Icon: ArrowUp
+	},
+	{
+		direction: "right",
+		label: "Turn right",
+		Icon: RotateCw
+	},
+	{
+		direction: "spin",
+		label: "Turn around",
+		Icon: Undo2
+	}
+];
+var BUTTON = "inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-[10px] font-medium transition-colors bg-surface-elevated/40 text-foreground-subtle hover:bg-surface-hover hover:text-foreground disabled:opacity-50";
+var BUTTON_ON = "bg-success/15 text-success hover:bg-success/25";
+function EntryButton({ entry, disabled, onRun }) {
+	const Glyph = iconFor(entry.icon);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		type: "button",
+		className: BUTTON,
+		disabled,
+		onClick: () => onRun(entry),
+		title: entry.label,
+		"aria-label": entry.label,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Glyph, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: entry.label })]
+	});
+}
+function NavigationPanel({ deviceId }) {
+	const system = useSystem();
+	const ready = Number.isFinite(deviceId);
+	const nav = useNavigation(system.trpcClient, ready ? deviceId : 0, { enabled: ready });
+	if (!ready) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex items-center justify-center h-full text-[11px] text-foreground-subtle italic",
+		children: [
+			"Device #",
+			deviceId,
+			" not loaded."
+		]
+	});
+	const features = nav.features;
+	const actions = nav.actions.filter((entry) => entry.enabled && entry.kind === "action");
+	const sounds = nav.actions.filter((entry) => entry.enabled && entry.kind === "sound");
+	const status = nav.status;
+	const manual = status?.lightMode === "manual";
+	const run = (entry) => {
+		if (entry.kind === "sound") {
+			if (entry.soundId !== void 0) nav.playSound(entry.soundId);
+			return;
+		}
+		nav.runAction(entry.id);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(WidgetPanel, {
+		title: "Navigation",
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Navigation, { className: "h-3.5 w-3.5 text-foreground-subtle" }),
+		bodyClassName: "p-3 flex flex-col gap-3 overflow-y-auto",
+		children: [
+			status && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-wrap items-center gap-1.5 text-[10px]",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "rounded-full bg-surface-elevated/60 px-2 py-0.5 text-foreground",
+						children: status.mode
+					}),
+					status.following && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "rounded-full bg-info/15 px-2 py-0.5 text-info",
+						children: "following"
+					}),
+					status.flash && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "rounded-full bg-warning/15 px-2 py-0.5 text-warning",
+						children: "light on"
+					})
+				]
+			}),
+			features?.move && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+				className: "flex flex-col gap-1.5",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-[10.5px] font-semibold text-foreground",
+						children: "Drive (hold)"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "grid grid-cols-4 gap-1.5",
+						children: DRIVE_BUTTONS.map(({ direction, label, Icon }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: cn(BUTTON, "justify-center select-none", nav.driving === direction && BUTTON_ON),
+							"aria-label": label,
+							title: label,
+							onPointerDown: () => nav.startDrive(direction),
+							onPointerUp: () => void nav.stopDrive(),
+							onPointerLeave: () => {
+								if (nav.driving === direction) nav.stopDrive();
+							},
+							onPointerCancel: () => void nav.stopDrive(),
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { className: "h-4 w-4" })
+						}, direction))
+					}),
+					features.stop && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						type: "button",
+						className: cn(BUTTON, "justify-center"),
+						onClick: () => void nav.stopDrive(),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Hand, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "Stop" })]
+					})
+				]
+			}),
+			features?.runAction && actions.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+				className: "flex flex-col gap-1.5",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "text-[10.5px] font-semibold text-foreground",
+					children: "Actions"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "flex flex-wrap gap-1.5",
+					children: actions.map((entry) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EntryButton, {
+						entry,
+						disabled: nav.busy,
+						onRun: run
+					}, entry.id))
+				})]
+			}),
+			features?.playSound && sounds.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+				className: "flex flex-col gap-1.5",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "text-[10.5px] font-semibold text-foreground",
+					children: "Sounds"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "flex flex-wrap gap-1.5",
+					children: sounds.map((entry) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EntryButton, {
+						entry,
+						disabled: nav.busy,
+						onRun: run
+					}, entry.id))
+				})]
+			}),
+			features?.light && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+				className: "flex flex-col gap-1.5 border-t border-border/40 pt-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-center justify-between",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-[10.5px] font-semibold text-foreground",
+						children: "Fill light"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						type: "button",
+						className: cn(BUTTON, status?.flash && BUTTON_ON),
+						"aria-pressed": status?.flash === true,
+						disabled: nav.busy,
+						onClick: () => void nav.setLightOn(!(status?.flash === true)),
+						children: [status?.flash ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Flashlight, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FlashlightOff, { className: "h-3.5 w-3.5" }), status?.flash ? "On" : "Off"]
+					})]
+				}), features.lightMode && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-center gap-2",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
+							"aria-label": "Light mode",
+							className: "rounded-md bg-surface-elevated/40 px-2 py-1 text-[10px] text-foreground",
+							value: status?.lightMode ?? "auto",
+							disabled: nav.busy,
+							onChange: (event) => {
+								const mode = event.target.value === "manual" ? "manual" : "auto";
+								nav.setLightMode(mode, mode === "manual" ? status?.lightLevel : void 0);
+							},
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+								value: "auto",
+								children: "Auto"
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+								value: "manual",
+								children: "Manual"
+							})]
+						}),
+						manual && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+							type: "range",
+							"aria-label": "Light level",
+							className: "flex-1",
+							min: _camstack_types.NAVIGATION_LIGHT_LEVEL_MIN,
+							max: _camstack_types.NAVIGATION_LIGHT_LEVEL_MAX,
+							step: 1,
+							value: status?.lightLevel ?? _camstack_types.NAVIGATION_LIGHT_LEVEL_MAX,
+							disabled: nav.busy,
+							onChange: (event) => void nav.setLightLevel(Number(event.target.value))
+						}),
+						manual && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-[10px] text-foreground-subtle w-8 text-right",
+							children: status?.lightLevel ?? _camstack_types.NAVIGATION_LIGHT_LEVEL_MAX
+						})
+					]
+				})]
+			}),
+			nav.error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "text-[10px] text-danger",
+				children: nav.error
+			})
+		]
+	});
+}
+//#endregion
 //#region src/lib/cap-error.ts
 /**
 * Shared capability-error utilities for the admin UI.
@@ -18812,6 +19268,7 @@ var HOST_WIDGETS = {
 	"host/motion-zones-grid": (0, react$1.lazy)(() => Promise.resolve().then(() => require("./MotionZonesSettings-BP9p0pFB.cjs")).then((m) => ({ default: m.MotionZonesSettings }))),
 	"host/privacy-mask-grid": (0, react$1.lazy)(() => Promise.resolve().then(() => require("./PrivacyMaskSettings-Oo7gyB4E.cjs")).then((m) => ({ default: m.PrivacyMaskSettings }))),
 	"host/ptz-panel": PtzPanel,
+	"host/navigation-panel": NavigationPanel,
 	"host/consumables-panel": ConsumablesPanel,
 	"host/ptz-autotrack": AutotrackSection,
 	"host/recording-panel": RecordingPanel
@@ -49843,6 +50300,8 @@ exports.Mic = Mic;
 exports.MobileDrawer = MobileDrawer;
 exports.ModelPicker = ModelPicker;
 exports.MotionZonesSettings = MotionZonesSettings;
+exports.NAVIGATION_DRIVE_INTERVAL_MS = NAVIGATION_DRIVE_INTERVAL_MS;
+exports.NavigationPanel = NavigationPanel;
 exports.NetworkLinkBadge = NetworkLinkBadge;
 exports.NodeMultiSelectField = NodeMultiSelectField;
 exports.NodePicker = NodePicker;
@@ -50562,11 +51021,24 @@ exports.useMqttBrokerStopEmbeddedBroker = useMqttBrokerStopEmbeddedBroker;
 exports.useMqttBrokerTestConnection = useMqttBrokerTestConnection;
 exports.useNativeObjectDetectionGetStatus = useNativeObjectDetectionGetStatus;
 exports.useNativeObjectDetectionSetEnabled = useNativeObjectDetectionSetEnabled;
+exports.useNavigation = useNavigation;
+exports.useNavigationGetFeatures = useNavigationGetFeatures;
+exports.useNavigationGetStatus = useNavigationGetStatus;
+exports.useNavigationGoToPoint = useNavigationGoToPoint;
+exports.useNavigationListActions = useNavigationListActions;
+exports.useNavigationMove = useNavigationMove;
+exports.useNavigationPlaySound = useNavigationPlaySound;
+exports.useNavigationRunAction = useNavigationRunAction;
+exports.useNavigationSetLightLevel = useNavigationSetLightLevel;
+exports.useNavigationSetLightMode = useNavigationSetLightMode;
+exports.useNavigationSetLightOn = useNavigationSetLightOn;
+exports.useNavigationStop = useNavigationStop;
 exports.useNetworkAccessGetEndpoint = useNetworkAccessGetEndpoint;
 exports.useNetworkAccessGetStatus = useNetworkAccessGetStatus;
 exports.useNetworkAccessListEndpoints = useNetworkAccessListEndpoints;
 exports.useNetworkAccessStart = useNetworkAccessStart;
 exports.useNetworkAccessStop = useNetworkAccessStop;
+exports.useNetworkLinkGetStatus = useNetworkLinkGetStatus;
 exports.useNetworkQualityGetAllStats = useNetworkQualityGetAllStats;
 exports.useNetworkQualityGetDeviceStats = useNetworkQualityGetDeviceStats;
 exports.useNetworkQualityReportClientStats = useNetworkQualityReportClientStats;