visualizer-components 0.1.0

package/dist/components/controls/ControlsDrawer.js

@@ -0,0 +1,93 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @file ControlsDrawer.tsx
+ * @description Drawer panel for controlling the ASV visualizer. Contains simulation mode toggles, connection status, and other control options.
+ * @author Carson Fujita
+ * @license MIT
+ */
+import React from 'react';
+import { Drawer, Box, Typography, Stack, Paper, Button, Switch, Tooltip, IconButton, CircularProgress, useTheme, alpha, } from '@mui/material';
+import TuneIcon from '@mui/icons-material/Tune';
+import AutorenewIcon from '@mui/icons-material/Autorenew';
+import WifiIcon from '@mui/icons-material/Wifi';
+import { useAppSelector, useAppDispatch } from '../../store';
+import { setSimMode, setCurrentHeading } from '../../store/slices/simulationSlice';
+import { selectActiveScene } from '../../store/slices/sceneSlice';
+import { setASVHeading } from '../../store/slices/telemetrySlice';
+import { retryConnection } from '../../store/actions/connectionActions';
+import { ForceVectorsPanel } from './ForceVectorsPanel';
+import { ControlOverlay } from './ControlOverlay';
+import { InteractiveCompass } from '../svg/CompassRose';
+import { getTelemetryConnectionConfig } from '../../connection/config';
+/**
+ * @component ControlsDrawer
+ * @description Drawer panel for controlling the ASV visualizer. Contains simulation mode toggles, connection status, and other control options.
+ * @param {ControlsDrawerProps} props - Properties for the component.
+ * @remarks
+ * The ControlsDrawer component provides a side panel for controlling various aspects of the ASV visualizer, including simulation mode toggles, connection status, and other control options.
+ * It uses Material-UI components for styling and layout, and interacts with the Redux store to read and update the application state.
+ * The drawer can be opened or closed based on the `open` prop, and provides callback functions for closing the drawer and regenerating the map.
+ * @example
+ * <ControlsDrawer
+ *  open={isDrawerOpen}
+ *  onClose={() => setIsDrawerOpen(false)}
+ *  onRegenerateMap={handleRegenerateMap}
+ * />
+ */
+export const ControlsDrawer = ({ open, onClose, onRegenerateMap }) => {
+    const theme = useTheme();
+    const dispatch = useAppDispatch();
+    const connectionStatus = useAppSelector(state => state.connection.status);
+    // URL resolved by initConnection(); before the first attempt, show the configured endpoint.
+    const connectionUrl = useAppSelector(state => state.connection.url) || getTelemetryConnectionConfig().wsUrl;
+    const simMode = useAppSelector(state => state.simulation.simMode);
+    const activeSceneId = useAppSelector(selectActiveScene);
+    const asvHeading = useAppSelector(state => state.telemetry.asv.heading);
+    const asvSpeed = useAppSelector(state => state.telemetry.asv.speed);
+    const currentHeading = useAppSelector(state => state.simulation.currentHeading);
+    const isConnected = connectionStatus === 'connected';
+    const autoSimActive = !isConnected && simMode === 'automatic';
+    const currentRad = (currentHeading || 0) * Math.PI / 180;
+    return (_jsxs(Drawer, { anchor: "right", open: open, onClose: onClose, slotProps: {
+            backdrop: { sx: { bgcolor: alpha(theme.palette.scene.skyDark, 0.3) } },
+            paper: {
+                sx: {
+                    width: { xs: '100%', sm: 360 },
+                    bgcolor: theme.palette.scene.skyDark,
+                    color: theme.palette.common.white,
+                    borderLeft: `1px solid ${alpha(theme.palette.common.white, 0.1)}`,
+                    backgroundImage: 'none',
+                    p: 0,
+                    display: 'flex',
+                    flexDirection: 'column',
+                },
+            },
+        }, children: [_jsxs(Box, { sx: { p: 3, borderBottom: `1px solid ${alpha(theme.palette.common.white, 0.05)}`, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, children: [_jsx(Typography, { variant: "h6", sx: { fontWeight: 700 }, children: "System Configuration" }), _jsx(Tooltip, { title: "Close", placement: "left", children: _jsx(IconButton, { onClick: onClose, sx: { color: theme.palette.common.white }, children: _jsx(TuneIcon, {}) }) })] }), _jsx(Box, { sx: { p: 3, flex: 1, overflowY: 'auto' }, children: _jsxs(Stack, { spacing: 2, children: [!isConnected && (_jsxs(Paper, { sx: { p: 2, bgcolor: theme.palette.gui.primary, borderRadius: 2, border: `1px solid ${alpha(theme.palette.common.white, 0.1)}` }, children: [_jsx(Typography, { variant: "subtitle2", sx: { fontWeight: 800, color: theme.palette.gui.subtle, textTransform: 'uppercase', fontSize: '0.7rem', letterSpacing: '0.08em', mb: 1.5 }, children: "Simulation Mode" }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' }, children: [_jsxs(Box, { children: [_jsx(Typography, { variant: "body2", sx: { fontWeight: 700, color: autoSimActive ? theme.palette.sim.auto : theme.palette.sim.manual }, children: autoSimActive ? 'Automatic' : 'Manual' }), _jsx(Typography, { variant: "caption", sx: { color: theme.palette.gui.subtle }, children: autoSimActive
+                                                        ? 'Vessel follows the planned BFS path'
+                                                        : 'Control speed and heading via sliders' })] }), _jsx(Tooltip, { title: autoSimActive ? 'Switch to manual control' : 'Switch to automatic', placement: "left", children: _jsx(Switch, { checked: autoSimActive, onChange: () => dispatch(setSimMode(autoSimActive ? 'manual' : 'automatic')), sx: {
+                                                    '& .MuiSwitch-switchBase.Mui-checked': { color: theme.palette.sim.auto },
+                                                    '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': { bgcolor: theme.palette.sim.auto },
+                                                    '& .MuiSwitch-switchBase': { color: theme.palette.sim.manual },
+                                                    '& .MuiSwitch-track': { bgcolor: theme.palette.sim.manual },
+                                                } }) })] })] })), !isConnected && (_jsxs(Paper, { sx: { p: 2, bgcolor: theme.palette.gui.primary, borderRadius: 2, border: `1px solid ${alpha(theme.palette.common.white, 0.1)}` }, children: [_jsx(Typography, { variant: "subtitle2", sx: { fontWeight: 800, color: theme.palette.gui.subtle, textTransform: 'uppercase', fontSize: '0.7rem', letterSpacing: '0.08em', mb: 1.5 }, children: "Simulation Data" }), _jsx(Tooltip, { title: "Generate a new obstacle map, noise field, and BFS path", placement: "top", children: _jsx(Button, { fullWidth: true, variant: "outlined", startIcon: _jsx(AutorenewIcon, {}), onClick: onRegenerateMap, sx: {
+                                            color: theme.palette.sim.auto,
+                                            borderColor: alpha(theme.palette.sim.auto, 0.4),
+                                            '&:hover': { borderColor: theme.palette.sim.auto, bgcolor: alpha(theme.palette.sim.auto, 0.08) },
+                                            textTransform: 'none',
+                                            fontWeight: 600,
+                                        }, children: "Regenerate Map" }) }), _jsx(Typography, { variant: "caption", sx: { color: theme.palette.gui.faint, display: 'block', mt: 1 }, children: "New Gaussian noise field, obstacle islands, and BFS path" })] })), _jsxs(Paper, { sx: { p: 2, bgcolor: theme.palette.gui.primary, borderRadius: 2, border: `1px solid ${alpha(theme.palette.common.white, 0.1)}` }, children: [_jsx(Typography, { variant: "subtitle2", sx: { fontWeight: 800, color: theme.palette.gui.subtle, textTransform: 'uppercase', fontSize: '0.7rem', letterSpacing: '0.08em', mb: 1.5 }, children: "Basestation Connection" }), _jsx(Tooltip, { title: isConnected ? 'Re-establish the WebSocket connection' : connectionStatus === 'connecting' ? 'Connection in progress…' : 'Connect to the basestation WebSocket', placement: "top", children: _jsx("span", { children: _jsx(Button, { fullWidth: true, variant: "outlined", disabled: connectionStatus === 'connecting', startIcon: connectionStatus === 'connecting'
+                                                ? _jsx(CircularProgress, { size: 14, sx: { color: theme.palette.sim.connecting } })
+                                                : _jsx(WifiIcon, {}), onClick: () => { dispatch(retryConnection()); onClose(); }, sx: {
+                                                color: isConnected ? theme.palette.status.primary.autonomous : theme.palette.sim.connecting,
+                                                borderColor: isConnected ? alpha(theme.palette.status.primary.autonomous, 0.4) : alpha(theme.palette.sim.connecting, 0.4),
+                                                '&:hover': {
+                                                    borderColor: isConnected ? theme.palette.status.primary.autonomous : theme.palette.sim.connecting,
+                                                    bgcolor: isConnected ? alpha(theme.palette.status.primary.autonomous, 0.08) : alpha(theme.palette.sim.connecting, 0.08),
+                                                },
+                                                '&.Mui-disabled': { color: theme.palette.sim.connecting, borderColor: alpha(theme.palette.sim.connecting, 0.2) },
+                                                textTransform: 'none',
+                                                fontWeight: 600,
+                                                width: '100%',
+                                            }, children: isConnected ? 'Reconnect' : connectionStatus === 'connecting' ? 'Connecting…' : 'Connect to Basestation' }) }) }), _jsx(Typography, { variant: "caption", sx: { color: theme.palette.gui.faint, display: 'block', mt: 1, wordBreak: 'break-all' }, children: connectionUrl })] }), activeSceneId === 'forces' && (_jsx(ForceVectorsPanel, { objectHeading: asvHeading, currentRad: currentRad, currentSpeed: asvSpeed })), activeSceneId === 'forces' && (_jsxs(Paper, { sx: { p: 2, bgcolor: theme.palette.gui.primary, borderRadius: 2, border: `1px solid ${alpha(theme.palette.common.white, 0.1)}`, textAlign: 'center' }, children: [_jsx(Typography, { variant: "subtitle2", sx: { fontWeight: 800, color: theme.palette.primary.light, mb: 2, textTransform: 'uppercase', fontSize: '0.75rem', letterSpacing: '0.05em' }, children: "Vessel Heading" }), _jsx(Box, { sx: { display: 'flex', justifyContent: 'center', alignItems: 'center' }, children: _jsx(InteractiveCompass, { heading: asvHeading, onHeadingChange: (h) => dispatch(setASVHeading(h)), isConnected: isConnected, size: 160, outerRadius: 60, innerRadius: 50 }) }), _jsx(Typography, { variant: "caption", sx: { display: 'block', mt: 1.5, color: theme.palette.gui.faint }, children: "Drag to set the vessel's heading direction" })] })), activeSceneId === 'forces' && (_jsxs(Paper, { sx: { p: 2, bgcolor: theme.palette.gui.primary, borderRadius: 2, border: `1px solid ${alpha(theme.palette.common.white, 0.1)}`, textAlign: 'center' }, children: [_jsx(Typography, { variant: "subtitle2", sx: { fontWeight: 800, color: theme.palette.info.main, mb: 2, textTransform: 'uppercase', fontSize: '0.75rem', letterSpacing: '0.05em' }, children: "Flow Control" }), _jsx(Box, { sx: { display: 'flex', justifyContent: 'center', alignItems: 'center' }, children: _jsx(InteractiveCompass, { heading: currentHeading, onHeadingChange: (h) => dispatch(setCurrentHeading(h)), isConnected: isConnected, size: 160, outerRadius: 60, innerRadius: 50 }) }), _jsx(Typography, { variant: "caption", sx: { display: 'block', mt: 1.5, color: theme.palette.gui.faint }, children: "Drag to set the simulated water current direction" })] })), _jsx(ControlOverlay, { title: activeSceneId === 'forces' ? 'Simulation Params' : 'Mapping Params', showLocalRotation: activeSceneId === 'mapping' && !isConnected && !autoSimActive, showVelocity: !isConnected && !autoSimActive, showObjectHeading: activeSceneId === 'forces' && !isConnected, showGlobalGrid: true, showGlobalAxes: true, showLocalAxes: true, showLocalGrid: activeSceneId === 'mapping', showLegend: true, showCourseTrail: activeSceneId === 'mapping', showFogOfWar: activeSceneId === 'mapping', showCurrentHeading: activeSceneId === 'forces', showCurrentSpeed: activeSceneId === 'forces', isLocked: isConnected })] }) })] }));
+};
+//# sourceMappingURL=ControlsDrawer.js.map

package/dist/components/controls/ControlsDrawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlsDrawer.js","sourceRoot":"","sources":["../../../src/components/controls/ControlsDrawer.tsx"],"names":[],"mappings":"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"}

package/dist/components/controls/ForceVectorsPanel.d.ts

@@ -0,0 +1,37 @@
+/**
+ * @file ForceVectorsPanel.tsx
+ * @description HTML overlay showing numerical values of force vectors using MUI.
+ */
+import React from 'react';
+/**
+ * @interface ForceVectorsPanelProps
+ * @description Properties for the {@link ForceVectorsPanel} component.
+ * @see {@link ForceVectorsPanel}
+ * @property {number} objectHeading - Current heading of the object in degrees.
+ * @property {number} currentRad - Current heading of the water in radians.
+ * @property {number} currentSpeed - Current speed of the water.
+ */
+export interface ForceVectorsPanelProps {
+    /** Current heading of the object in degrees. */
+    objectHeading: number;
+    /** Current heading of the water in radians. */
+    currentRad: number;
+    /** Current speed of the water. */
+    currentSpeed: number;
+}
+/**
+ * @component ForceVectorsPanel
+ * @description Renders a panel containing the numerical decomposition of forces acting on the object.
+ * @param {ForceVectorsPanelProps} props - Properties for the component.
+ * @remarks
+ * This component displays a panel with the numerical values of various force vectors acting on the floating object,
+ * including weight, buoyancy, current, drag, and net XY forces. It uses Material-UI components for styling and layout.
+ * @example
+ * <ForceVectorsPanel
+ *  objectHeading={45}
+ * currentRad={Math.PI / 4}
+ * currentSpeed={2.5}
+ * />
+ */
+export declare const ForceVectorsPanel: React.FC<ForceVectorsPanelProps>;
+//# sourceMappingURL=ForceVectorsPanel.d.ts.map

package/dist/components/controls/ForceVectorsPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ForceVectorsPanel.d.ts","sourceRoot":"","sources":["../../../src/components/controls/ForceVectorsPanel.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B;;;;;;;GAOG;AACH,MAAM,WAAW,sBAAsB;IACnC,gDAAgD;IAChD,aAAa,EAAE,MAAM,CAAC;IACtB,+CAA+C;IAC/C,UAAU,EAAE,MAAM,CAAC;IACnB,kCAAkC;IAClC,YAAY,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAwF9D,CAAC"}

package/dist/components/controls/ForceVectorsPanel.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @file ForceVectorsPanel.tsx
+ * @description HTML overlay showing numerical values of force vectors using MUI.
+ */
+import React from 'react';
+import { useTheme, Box, Typography, Paper, alpha } from '@mui/material';
+import { getCardinalLabel } from '../../types';
+/**
+ * @component ForceVectorsPanel
+ * @description Renders a panel containing the numerical decomposition of forces acting on the object.
+ * @param {ForceVectorsPanelProps} props - Properties for the component.
+ * @remarks
+ * This component displays a panel with the numerical values of various force vectors acting on the floating object,
+ * including weight, buoyancy, current, drag, and net XY forces. It uses Material-UI components for styling and layout.
+ * @example
+ * <ForceVectorsPanel
+ *  objectHeading={45}
+ * currentRad={Math.PI / 4}
+ * currentSpeed={2.5}
+ * />
+ */
+export const ForceVectorsPanel = ({ objectHeading, currentRad, currentSpeed }) => {
+    const theme = useTheme();
+    /**
+     * @remarks
+     * Defines the legend items for the force vectors panel, including labels, colors, and values.
+     * The values are calculated based on the current heading and speed of the water.
+     */
+    const items = [
+        { label: 'Heading:', color: theme.palette.common.white, value: `${objectHeading}° (${getCardinalLabel(objectHeading)})` },
+        { label: 'Weight:', color: theme.palette.map.weight, value: '(0, 0, −mg)' },
+        { label: 'Buoyancy:', color: theme.palette.map.buoyancy, value: '(0, 0, +ρVg)' },
+        {
+            label: 'Current:',
+            color: theme.palette.map.current,
+            value: `(${(-Math.sin(currentRad) * currentSpeed).toFixed(1)}, ${(Math.cos(currentRad) * currentSpeed).toFixed(1)}, 0)`
+        },
+        {
+            label: 'Drag:',
+            color: theme.palette.map.drag,
+            value: `(${(Math.sin(currentRad) * currentSpeed * 0.5).toFixed(1)}, ${(-Math.cos(currentRad) * currentSpeed * 0.5).toFixed(1)}, 0)`
+        },
+        {
+            label: 'Net XY:',
+            color: theme.palette.map.xAxis,
+            value: `(${(-Math.sin(currentRad) * currentSpeed * 0.5).toFixed(1)}, ${(Math.cos(currentRad) * currentSpeed * 0.5).toFixed(1)}, 0)`
+        },
+    ];
+    return (_jsxs(Paper, { elevation: 0, sx: {
+            width: '100%',
+            backgroundColor: theme.palette.gui.primary,
+            backdropFilter: 'blur(4px)',
+            borderRadius: 2,
+            p: 2,
+            border: `1px solid ${alpha(theme.palette.common.white, 0.1)}`,
+            color: theme.palette.common.white,
+        }, children: [_jsx(Typography, { variant: "subtitle2", sx: {
+                    fontWeight: 800,
+                    mb: 1.5,
+                    fontSize: '0.875rem',
+                    textTransform: 'uppercase',
+                    letterSpacing: '0.05em'
+                }, children: "Force Vectors:" }), _jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 0.5 }, children: items.map((item) => (_jsxs(Box, { sx: { display: 'flex', alignItems: 'baseline' }, children: [_jsx(Typography, { variant: "caption", sx: {
+                                color: item.color,
+                                fontWeight: 'bold',
+                                fontSize: '0.65rem',
+                                width: '65px',
+                                flexShrink: 0
+                            }, children: item.label }), _jsx(Typography, { variant: "caption", sx: {
+                                color: theme.palette.gui.muted,
+                                fontSize: '0.65rem',
+                                fontFamily: 'monospace'
+                            }, children: item.value })] }, item.label))) })] }));
+};
+//# sourceMappingURL=ForceVectorsPanel.js.map

package/dist/components/controls/ForceVectorsPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ForceVectorsPanel.js","sourceRoot":"","sources":["../../../src/components/controls/ForceVectorsPanel.tsx"],"names":[],"mappings":"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"}

package/dist/components/controls/InfoPopover.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @file InfoPopover.tsx
+ * @description Popover panel that explains the different simulation modes and connection states in the ASV visualizer.
+ *
+ * @author Carson Fujita
+ * @license MIT
+ */
+import React from 'react';
+/**
+ * @interface InfoPopoverProps
+ * @description Properties for the {@link InfoPopover} component.
+ * @see {@link InfoPopover}
+ * @property {HTMLElement | null} anchor - The HTML element to which the popover is anchored.
+ * @property {() => void} onClose - Callback function to close the popover.
+ */
+export interface InfoPopoverProps {
+    anchor: HTMLElement | null;
+    onClose: () => void;
+}
+/**
+ * @component InfoPopover
+ * @description Popover that explains LIVE/SIM connection states and AUTO/MAN simulation modes.
+ * @param {InfoPopoverProps} props - Properties for the component.
+ * @remarks
+ * This component renders a popover panel that provides information about the different simulation modes (AUTO and MAN) and connection states (LIVE and SIM) in the ASV visualizer. It uses Material-UI components for styling and layout.
+ * The popover is anchored to a specified HTML element and can be closed via a callback function.
+ * @example
+ * <InfoPopover
+ *  anchor={anchorElement}
+ * onClose={() => setAnchor(null)}
+ * />
+ */
+export declare const InfoPopover: React.FC<InfoPopoverProps>;
+//# sourceMappingURL=InfoPopover.d.ts.map

package/dist/components/controls/InfoPopover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfoPopover.d.ts","sourceRoot":"","sources":["../../../src/components/controls/InfoPopover.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B;;;;;;GAMG;AACH,MAAM,WAAW,gBAAgB;IAC7B,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA2ElD,CAAC"}

package/dist/components/controls/InfoPopover.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @file InfoPopover.tsx
+ * @description Popover panel that explains the different simulation modes and connection states in the ASV visualizer.
+ *
+ * @author Carson Fujita
+ * @license MIT
+ */
+import React from 'react';
+import { Popover, Typography, Divider, Stack, Box, useTheme, alpha } from '@mui/material';
+/**
+ * @component InfoPopover
+ * @description Popover that explains LIVE/SIM connection states and AUTO/MAN simulation modes.
+ * @param {InfoPopoverProps} props - Properties for the component.
+ * @remarks
+ * This component renders a popover panel that provides information about the different simulation modes (AUTO and MAN) and connection states (LIVE and SIM) in the ASV visualizer. It uses Material-UI components for styling and layout.
+ * The popover is anchored to a specified HTML element and can be closed via a callback function.
+ * @example
+ * <InfoPopover
+ *  anchor={anchorElement}
+ * onClose={() => setAnchor(null)}
+ * />
+ */
+export const InfoPopover = ({ anchor, onClose }) => {
+    const theme = useTheme();
+    return (_jsxs(Popover, { open: Boolean(anchor), anchorEl: anchor, onClose: onClose, anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, transformOrigin: { vertical: 'top', horizontal: 'right' }, slotProps: {
+            paper: {
+                sx: {
+                    bgcolor: theme.palette.scene.skyDark,
+                    color: theme.palette.common.white,
+                    border: `1px solid ${alpha(theme.palette.common.white, 0.1)}`,
+                    backgroundImage: 'none',
+                    borderRadius: 2,
+                    p: 2.5,
+                    maxWidth: 320,
+                    boxShadow: `0 25px 50px -12px ${alpha(theme.palette.common.black, 0.6)}`,
+                },
+            },
+        }, children: [_jsx(Typography, { variant: "subtitle2", sx: { fontWeight: 800, color: theme.palette.water.highlight, textTransform: 'uppercase', letterSpacing: '0.08em', mb: 1.5 }, children: "System Visualizer" }), _jsxs(Stack, { spacing: 0.5, mb: 2, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Box, { sx: { width: 8, height: 8, borderRadius: '50%', bgcolor: theme.palette.status.primary.autonomous, flexShrink: 0 } }), _jsx(Typography, { variant: "caption", sx: { fontWeight: 700, color: theme.palette.status.primary.autonomous, letterSpacing: '0.05em' }, children: "LIVE" })] }), _jsx(Typography, { variant: "caption", sx: { color: theme.palette.gui.muted, pl: 2.5, display: 'block' }, children: "Connected to the ASV basestation over WebSocket. All telemetry \u2014 speed, heading, position, grid maps \u2014 streams from the vessel in real time. Simulation controls are locked." })] }), _jsxs(Stack, { spacing: 0.5, mb: 2.5, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Box, { sx: { width: 8, height: 8, borderRadius: '50%', bgcolor: theme.palette.map.drag, flexShrink: 0 } }), _jsx(Typography, { variant: "caption", sx: { fontWeight: 700, color: theme.palette.map.drag, letterSpacing: '0.05em' }, children: "SIM" })] }), _jsx(Typography, { variant: "caption", sx: { color: theme.palette.gui.muted, pl: 2.5, display: 'block' }, children: "No live connection. A 20\u00D720 map is generated procedurally using Gaussian noise blurred into obstacle islands, then BFS finds a navigable path between two free cells." })] }), _jsx(Divider, { sx: { borderColor: alpha(theme.palette.common.white, 0.08), mb: 2 } }), _jsx(Typography, { variant: "caption", sx: { fontWeight: 700, color: theme.palette.gui.subtle, textTransform: 'uppercase', letterSpacing: '0.08em', display: 'block', mb: 1.5 }, children: "Simulation Modes" }), _jsxs(Stack, { spacing: 0.5, mb: 2, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Box, { sx: { width: 8, height: 8, borderRadius: '50%', bgcolor: theme.palette.sim.auto, flexShrink: 0 } }), _jsx(Typography, { variant: "caption", sx: { fontWeight: 700, color: theme.palette.sim.auto, letterSpacing: '0.05em' }, children: "AUTO" })] }), _jsx(Typography, { variant: "caption", sx: { color: theme.palette.gui.muted, pl: 2.5, display: 'block' }, children: "The vessel follows the planned BFS path from current position to objective, looping continuously. If the objective is unreachable the vessel holds position. The course-over-ground trail marks every visited cell." })] }), _jsxs(Stack, { spacing: 0.5, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Box, { sx: { width: 8, height: 8, borderRadius: '50%', bgcolor: theme.palette.sim.manual, flexShrink: 0 } }), _jsx(Typography, { variant: "caption", sx: { fontWeight: 700, color: theme.palette.sim.manual, letterSpacing: '0.05em' }, children: "MAN" })] }), _jsx(Typography, { variant: "caption", sx: { color: theme.palette.gui.muted, pl: 2.5, display: 'block' }, children: "Full manual control. Use the speed and rotation sliders in the settings drawer to drive the vessel around the map. The grid wraps seamlessly at the boundary." })] })] }));
+};
+//# sourceMappingURL=InfoPopover.js.map

package/dist/components/controls/InfoPopover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfoPopover.js","sourceRoot":"","sources":["../../../src/components/controls/InfoPopover.tsx"],"names":[],"mappings":"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"}

package/dist/components/controls/Legend.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @file Legend.tsx
+ * @description Legend component for the Mapping Visualizer explaining colors and symbols.
+ */
+import React from 'react';
+/**
+ * @interface LegendProps
+ * @description Properties for the {@link Legend} component.
+ * @see {@link Legend}
+ */
+interface LegendProps {
+    /** The type of legend to display. Defaults to 'mapping'. */
+    variant?: 'mapping' | 'forces';
+    /** If true, renders without the Paper wrapper. */
+    disablePaper?: boolean;
+    /** If true, hides the internal title. */
+    hideTitle?: boolean;
+}
+/**
+ * @component Legend
+ * @description Renders an HTML legend panel using MUI.
+ * @param {LegendProps} props - Properties for the component.
+ * @remarks
+ * Renders an HTML legend panel using MUI.
+ * Uses the application theme for consistent styling of text and shapes.
+ */
+export declare const Legend: React.FC<LegendProps>;
+export {};
+//# sourceMappingURL=Legend.d.ts.map

package/dist/components/controls/Legend.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Legend.d.ts","sourceRoot":"","sources":["../../../src/components/controls/Legend.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B;;;;GAIG;AACH,UAAU,WAAW;IACnB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC/B,kDAAkD;IAClD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,yCAAyC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AA0BD;;;;;;;GAOG;AACH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA2GxC,CAAC"}

package/dist/components/controls/Legend.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @file Legend.tsx
+ * @description Legend component for the Mapping Visualizer explaining colors and symbols.
+ */
+import React from 'react';
+import { useTheme, Box, Typography, Paper, alpha } from '@mui/material';
+/**
+ * @component Legend
+ * @description Renders an HTML legend panel using MUI.
+ * @param {LegendProps} props - Properties for the component.
+ * @remarks
+ * Renders an HTML legend panel using MUI.
+ * Uses the application theme for consistent styling of text and shapes.
+ */
+export const Legend = ({ variant = 'mapping', disablePaper = false, hideTitle = false }) => {
+    const theme = useTheme();
+    const isForces = variant === 'forces';
+    // Define legend items based on the variant
+    const items = isForces
+        ? [
+            { label: 'Object Heading', color: theme.palette.map.heading, type: 'line', strokeWidth: 3 },
+            { label: 'Weight (-Z)', color: theme.palette.map.weight, type: 'line', strokeWidth: 3, textColor: theme.palette.error.light },
+            { label: 'Buoyancy (+Z)', color: theme.palette.map.buoyancy, type: 'line', strokeWidth: 3, textColor: theme.palette.success.light },
+            { label: 'Current (XY plane)', color: theme.palette.map.current, type: 'line', strokeWidth: 3, textColor: theme.palette.info.light },
+            { label: 'Drag (opposes current)', color: theme.palette.map.drag, type: 'line', strokeWidth: 3, textColor: theme.palette.warning.light },
+        ]
+        : [
+            { label: 'Global Grid (Low-Res)', color: theme.palette.map.grid, type: 'line', strokeWidth: 2, opacity: 0.5 },
+            { label: 'X Axis (Global & Local)', color: theme.palette.map.xAxis, type: 'line', strokeWidth: 2 },
+            { label: 'Y Axis / Local YZ Plane', color: theme.palette.map.yAxis, type: 'line', strokeWidth: 2 },
+            { label: 'Local XY Plane', color: theme.palette.map.localXY, type: 'line', strokeWidth: 2 },
+            { label: 'Local XZ Plane', color: theme.palette.map.localXZ, type: 'line', strokeWidth: 2 },
+            { label: 'Local Origin Point', color: theme.palette.map.localOrigin, type: 'circle', radius: 5 },
+            { label: 'Global Origin (0,0)', color: theme.palette.map.globalOrigin, type: 'circle', stroke: theme.palette.map.grid, strokeWidth: 1, radius: 4 },
+        ];
+    const content = (_jsxs(Box, { sx: { width: '100%' }, children: [!hideTitle && (_jsx(Typography, { variant: "subtitle2", sx: {
+                    fontWeight: 800,
+                    mb: 1.5,
+                    fontSize: '0.75rem',
+                    color: theme.palette.primary.light,
+                    textTransform: 'uppercase',
+                    letterSpacing: '0.05em'
+                }, children: isForces ? 'Forces:' : 'Legend' })), _jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 1.2 }, children: items.map((item) => (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1.5 }, children: [_jsx(Box, { sx: { width: 20, display: 'flex', justifyContent: 'center', alignItems: 'center' }, children: item.type === 'line' ? (_jsx(Box, { sx: {
+                                    width: '100%',
+                                    height: item.strokeWidth || 2,
+                                    bgcolor: item.color,
+                                    opacity: item.opacity ?? 1,
+                                    borderRadius: 1
+                                } })) : (_jsx(Box, { sx: {
+                                    width: (item.radius || 4) * 2,
+                                    height: (item.radius || 4) * 2,
+                                    borderRadius: '50%',
+                                    bgcolor: item.color,
+                                    border: item.stroke ? `${item.strokeWidth || 1}px solid ${item.stroke}` : 'none'
+                                } })) }), _jsx(Typography, { variant: "caption", sx: {
+                                fontSize: '0.7rem',
+                                fontWeight: 600,
+                                color: item.textColor || 'inherit',
+                                lineHeight: 1.2
+                            }, children: item.label })] }, item.label))) })] }));
+    if (disablePaper)
+        return content;
+    return (_jsx(Paper, { elevation: 0, sx: {
+            width: '100%',
+            backgroundColor: alpha(theme.palette.scene.skyDark, 0.7),
+            backdropFilter: 'blur(10px)',
+            borderRadius: 2,
+            p: 2,
+            color: theme.palette.common.white,
+            border: `1px solid ${alpha(theme.palette.common.white, 0.1)}`
+        }, children: content }));
+};
+//# sourceMappingURL=Legend.js.map

package/dist/components/controls/Legend.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Legend.js","sourceRoot":"","sources":["../../../src/components/controls/Legend.tsx"],"names":[],"mappings":"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"}

package/dist/components/controls/MobileBottomNav.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @file MobileBottomNav.tsx
+ * @description Bottom navigation bar for mobile view in the ASV visualizer. Allows switching between mapping and forces panels.
+ * @author Carson Fujita
+ * @license MIT
+ */
+import React from 'react';
+/**
+ * @component MobileBottomNav
+ * @description Fixed bottom navigation bar for mobile view that allows switching between the Mapping and Forces tabs.
+ * @remarks
+ * This component renders a fixed bottom navigation bar that is visible on mobile devices. It allows users to switch between the Mapping and Forces panels in the ASV visualizer. The active tab is highlighted, and clicking on a tab dispatches an action to update the active scene in the Redux store.
+ * @example
+ * <MobileBottomNav />
+ */
+export declare const MobileBottomNav: React.FC;
+//# sourceMappingURL=MobileBottomNav.d.ts.map

package/dist/components/controls/MobileBottomNav.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobileBottomNav.d.ts","sourceRoot":"","sources":["../../../src/components/controls/MobileBottomNav.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAA0B,MAAM,OAAO,CAAC;AAO/C;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAsCnC,CAAC"}

package/dist/components/controls/MobileBottomNav.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @file MobileBottomNav.tsx
+ * @description Bottom navigation bar for mobile view in the ASV visualizer. Allows switching between mapping and forces panels.
+ * @author Carson Fujita
+ * @license MIT
+ */
+import React, { startTransition } from 'react';
+import { Paper, BottomNavigation, BottomNavigationAction, useTheme } from '@mui/material';
+import MapIcon from '@mui/icons-material/Map';
+import SpeedIcon from '@mui/icons-material/Speed';
+import { useAppSelector, useAppDispatch } from '../../store';
+import { setActiveScene, selectActiveTabIndex, selectRegisteredScenes } from '../../store/slices/sceneSlice';
+/**
+ * @component MobileBottomNav
+ * @description Fixed bottom navigation bar for mobile view that allows switching between the Mapping and Forces tabs.
+ * @remarks
+ * This component renders a fixed bottom navigation bar that is visible on mobile devices. It allows users to switch between the Mapping and Forces panels in the ASV visualizer. The active tab is highlighted, and clicking on a tab dispatches an action to update the active scene in the Redux store.
+ * @example
+ * <MobileBottomNav />
+ */
+export const MobileBottomNav = () => {
+    const theme = useTheme();
+    const dispatch = useAppDispatch();
+    const activeTabIndex = useAppSelector(selectActiveTabIndex);
+    const scenes = useAppSelector(selectRegisteredScenes);
+    return (_jsx(Paper, { sx: {
+            position: 'fixed',
+            bottom: 0,
+            left: 0,
+            right: 0,
+            zIndex: 100,
+            borderRadius: 0,
+            borderTop: '1px solid',
+            borderColor: 'divider',
+        }, elevation: 3, children: _jsxs(BottomNavigation, { showLabels: true, value: activeTabIndex, onChange: (_, v) => {
+                const scene = scenes.find(s => s.tabIndex === v);
+                if (scene)
+                    startTransition(() => { dispatch(setActiveScene(scene.id)); });
+            }, sx: {
+                bgcolor: theme.palette.scene.skyDark,
+                '& .Mui-selected': { color: `${theme.palette.water.highlight} !important` },
+                '& .MuiBottomNavigationAction-root': { color: theme.palette.gui.muted },
+            }, children: [_jsx(BottomNavigationAction, { label: "Mapping", icon: _jsx(MapIcon, {}) }), _jsx(BottomNavigationAction, { label: "Forces", icon: _jsx(SpeedIcon, {}) })] }) }));
+};
+//# sourceMappingURL=MobileBottomNav.js.map

package/dist/components/controls/MobileBottomNav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobileBottomNav.js","sourceRoot":"","sources":["../../../src/components/controls/MobileBottomNav.tsx"],"names":[],"mappings":";AAAA;;;;;GAKG;AACH,OAAO,KAAK,EAAE,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,EAAE,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC1F,OAAO,OAAO,MAAM,yBAAyB,CAAC;AAC9C,OAAO,SAAS,MAAM,2BAA2B,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAE7G;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,eAAe,GAAa,GAAG,EAAE;IAC1C,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,QAAQ,GAAG,cAAc,EAAE,CAAC;IAClC,MAAM,cAAc,GAAG,cAAc,CAAC,oBAAoB,CAAC,CAAC;IAC5D,MAAM,MAAM,GAAG,cAAc,CAAC,sBAAsB,CAAC,CAAC;IAEtD,OAAO,CACH,KAAC,KAAK,IACF,EAAE,EAAE;YACA,QAAQ,EAAE,OAAO;YACjB,MAAM,EAAE,CAAC;YACT,IAAI,EAAE,CAAC;YACP,KAAK,EAAE,CAAC;YACR,MAAM,EAAE,GAAG;YACX,YAAY,EAAE,CAAC;YACf,SAAS,EAAE,WAAW;YACtB,WAAW,EAAE,SAAS;SACzB,EACD,SAAS,EAAE,CAAC,YAEZ,MAAC,gBAAgB,IACb,UAAU,QACV,KAAK,EAAE,cAAc,EACrB,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;gBACf,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,KAAK,CAAC,CAAC,CAAC;gBACjD,IAAI,KAAK;oBAAE,eAAe,CAAC,GAAG,EAAE,GAAG,QAAQ,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAC9E,CAAC,EACD,EAAE,EAAE;gBACA,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO;gBACpC,iBAAiB,EAAE,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,aAAa,EAAE;gBAC3E,mCAAmC,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,EAAE;aAC1E,aAED,KAAC,sBAAsB,IAAC,KAAK,EAAC,SAAS,EAAC,IAAI,EAAE,KAAC,OAAO,KAAG,GAAI,EAC7D,KAAC,sBAAsB,IAAC,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAE,KAAC,SAAS,KAAG,GAAI,IAC/C,GACf,CACX,CAAC;AACN,CAAC,CAAC"}