visualizer-components 0.1.0

package/dist/components/scenes/SceneRenderer.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @file SceneRenderer.tsx
+ * @description Thin connected wrapper around `react-isometric-engine`'s `SceneRenderer`.
+ * Reads Redux state and the MUI theme, then hands both to the portable, prop-driven engine
+ * component as `sceneState` / `colors`. Keeps the same external prop contract as before so
+ * `SceneCanvas.tsx` needs no changes.
+ */
+import React from 'react';
+import { type SceneRendererProps as IsometricSceneRendererProps } from 'react-isometric-engine';
+export type SceneRendererProps = Pick<IsometricSceneRendererProps, 'width' | 'height' | 'scale' | 'offset' | 'interactionProps' | 'preserveAspectRatio' | 'mappingData' | 'forcesData'>;
+/**
+ * Unified isometric SVG engine for mapping and force visualization scenes, connected to Redux
+ * and the MUI theme.
+ */
+export declare const SceneRenderer: React.FC<SceneRendererProps>;
+//# sourceMappingURL=SceneRenderer.d.ts.map

package/dist/components/scenes/SceneRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SceneRenderer.d.ts","sourceRoot":"","sources":["../../../src/components/scenes/SceneRenderer.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAEH,KAAK,kBAAkB,IAAI,2BAA2B,EACzD,MAAM,wBAAwB,CAAC;AAOhC,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACjC,2BAA2B,EAC3B,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,kBAAkB,GAAG,qBAAqB,GAAG,aAAa,GAAG,YAAY,CACtH,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAiEtD,CAAC"}

package/dist/components/scenes/SceneRenderer.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @file SceneRenderer.tsx
+ * @description Thin connected wrapper around `react-isometric-engine`'s `SceneRenderer`.
+ * Reads Redux state and the MUI theme, then hands both to the portable, prop-driven engine
+ * component as `sceneState` / `colors`. Keeps the same external prop contract as before so
+ * `SceneCanvas.tsx` needs no changes.
+ */
+import React from 'react';
+import { useTheme } from '@mui/material';
+import { SceneRenderer as IsometricSceneRenderer, } from 'react-isometric-engine';
+import { useAppSelector } from '../../store';
+import { selectActiveScene } from '../../store/slices/sceneSlice';
+import { selectDiscoveredCells, selectObstacleOverrides } from '../../store/slices/discoveredGridSlice';
+/**
+ * Unified isometric SVG engine for mapping and force visualization scenes, connected to Redux
+ * and the MUI theme.
+ */
+export const SceneRenderer = (props) => {
+    const theme = useTheme();
+    const { showGlobalGrid, showGlobalAxes, showLocalAxes, showLocalGrid, showCourseTrail, showFogOfWar, } = useAppSelector((state) => state.visualization);
+    const { currentHeading, currentSpeed, fineGrid, } = useAppSelector((state) => state.simulation);
+    const { speed: effectiveSpeed, heading: effectiveHeading } = useAppSelector((state) => state.telemetry.asv);
+    const occupancyGrid = useAppSelector((state) => state.telemetry.map.occupancyGrid);
+    const navigationGrid = useAppSelector((state) => state.telemetry.map.navigationGrid);
+    const courseTrail = useAppSelector((state) => state.telemetry.map.courseTrail ?? []);
+    const discoveredCells = useAppSelector(selectDiscoveredCells);
+    const obstacleOverrides = useAppSelector(selectObstacleOverrides);
+    const activeSceneId = useAppSelector(selectActiveScene);
+    return (_jsx(IsometricSceneRenderer, { ...props, sceneState: {
+            activeSceneId,
+            showGlobalGrid,
+            showGlobalAxes,
+            showLocalAxes,
+            showLocalGrid,
+            currentHeading,
+            currentSpeed,
+            effectiveSpeed,
+            effectiveHeading,
+            fineGrid,
+            courseTrail,
+            showCourseTrail,
+            occupancyGrid,
+            navigationGrid,
+            discoveredCells,
+            obstacleOverrides,
+            showFogOfWar,
+        }, colors: {
+            map: theme.palette.map,
+            water: theme.palette.water,
+            scene: theme.palette.scene,
+            error: theme.palette.error,
+            warning: theme.palette.warning,
+            success: theme.palette.success,
+            info: theme.palette.info,
+            common: theme.palette.common,
+            textPrimary: theme.palette.text.primary,
+        } }));
+};
+//# sourceMappingURL=SceneRenderer.js.map

package/dist/components/scenes/SceneRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SceneRenderer.js","sourceRoot":"","sources":["../../../src/components/scenes/SceneRenderer.tsx"],"names":[],"mappings":";AAAA;;;;;;GAMG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EACH,aAAa,IAAI,sBAAsB,GAE1C,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,EAAE,qBAAqB,EAAE,uBAAuB,EAAE,MAAM,wCAAwC,CAAC;AAOxG;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,KAAK,EAAE,EAAE;IACjE,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,MAAM,EACF,cAAc,EACd,cAAc,EACd,aAAa,EACb,aAAa,EACb,eAAe,EACf,YAAY,GACf,GAAG,cAAc,CAAC,CAAC,KAAgB,EAAE,EAAE,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;IAE9D,MAAM,EACF,cAAc,EACd,YAAY,EACZ,QAAQ,GACX,GAAG,cAAc,CAAC,CAAC,KAAgB,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;IAE3D,MAAM,EAAE,KAAK,EAAE,cAAc,EAAE,OAAO,EAAE,gBAAgB,EAAE,GAAG,cAAc,CACvE,CAAC,KAAgB,EAAE,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,CAC5C,CAAC;IACF,MAAM,aAAa,GAAG,cAAc,CAAC,CAAC,KAAgB,EAAE,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC9F,MAAM,cAAc,GAAG,cAAc,CAAC,CAAC,KAAgB,EAAE,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChG,MAAM,WAAW,GAAG,cAAc,CAAC,CAAC,KAAgB,EAAE,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,IAAI,EAAE,CAAC,CAAC;IAEhG,MAAM,eAAe,GAAG,cAAc,CAAC,qBAAqB,CAAC,CAAC;IAC9D,MAAM,iBAAiB,GAAG,cAAc,CAAC,uBAAuB,CAAC,CAAC;IAElE,MAAM,aAAa,GAAG,cAAc,CAAC,iBAAiB,CAAC,CAAC;IAExD,OAAO,CACH,KAAC,sBAAsB,OACf,KAAK,EACT,UAAU,EAAE;YACR,aAAa;YACb,cAAc;YACd,cAAc;YACd,aAAa;YACb,aAAa;YACb,cAAc;YACd,YAAY;YACZ,cAAc;YACd,gBAAgB;YAChB,QAAQ;YACR,WAAW;YACX,eAAe;YACf,aAAa;YACb,cAAc;YACd,eAAe;YACf,iBAAiB;YACjB,YAAY;SACf,EACD,MAAM,EAAE;YACJ,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG;YACtB,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;YAC1B,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;YAC1B,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;YAC1B,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO;YAC9B,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO;YAC9B,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI;YACxB,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,MAAM;YAC5B,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO;SAC1C,GACH,CACL,CAAC;AACN,CAAC,CAAC"}

package/dist/components/scenes/TelemetryScene.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @file TelemetryScene.tsx
+ * @description Re-exports the telemetry dashboard as a scene.
+ */
+export { default } from '../TelemetryDashboard';
+//# sourceMappingURL=TelemetryScene.d.ts.map

package/dist/components/scenes/TelemetryScene.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TelemetryScene.d.ts","sourceRoot":"","sources":["../../../src/components/scenes/TelemetryScene.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/components/scenes/TelemetryScene.js

@@ -0,0 +1,6 @@
+/**
+ * @file TelemetryScene.tsx
+ * @description Re-exports the telemetry dashboard as a scene.
+ */
+export { default } from '../TelemetryDashboard';
+//# sourceMappingURL=TelemetryScene.js.map

package/dist/components/scenes/TelemetryScene.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TelemetryScene.js","sourceRoot":"","sources":["../../../src/components/scenes/TelemetryScene.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/components/svg/CompassRose.d.ts

@@ -0,0 +1,129 @@
+/**
+ * @file CompassRose.tsx
+ * @description Renders a compass rose and directional grid for the map visualizer.
+ *
+ * @remarks
+ * The {@link CompassRose} component displays a circular compass with a needle that smoothly animates to indicate the current heading.
+ * The {@link DirectionalGrid} component renders a ring of clickable arc segments for selecting a compass heading in 45° increments.
+ * The {@link InteractiveCompass} component combines both the {@link CompassRose} and {@link DirectionalGrid} into a single interactive control.
+ * Supports interactive heading selection and smooth needle animation.
+ *
+ * @author Carson Fujita
+ * @license MIT
+ *
+ * @example
+ * <InteractiveCompass
+ *  heading={currentHeading}
+ *  onHeadingChange={(newHeading) => setCurrentHeading(newHeading)}
+ * size={160}
+ * outerRadius={60}
+ * innerRadius={45}
+ * hideCardinalLabels={false}
+ * />
+ *
+ */
+import React from 'react';
+/**
+ * @interface CompassRoseProps
+ * @description Properties for the {@link CompassRose} component.
+ * @see {@link CompassRose}
+ * @property {number} cx - X-coordinate of the center of the compass rose.
+ * @property {number} cy - Y-coordinate of the center of the compass rose.
+ * @property {number} radius - Radius of the compass rose circle.
+ * @property {number} heading - Current heading in degrees (0° = North, 90° = East).
+ * @property {string} [color] - Optional color for the compass needle. Defaults to theme palette info.main.
+ * @property {boolean} [hideCardinalLabels] - Whether to hide cardinal direction labels (N, E, S, W). Defaults to true.
+ */
+export interface CompassRoseProps {
+    cx: number;
+    cy: number;
+    radius: number;
+    heading: number;
+    color?: string;
+    hideCardinalLabels?: boolean;
+}
+/**
+ * @function CompassRose
+ * @description Renders an animated compass needle that smoothly tracks heading changes using a spring.
+ * @param {CompassRoseProps} props - Properties for the compass rose.
+ * @returns {JSX.Element} The rendered compass rose SVG group.
+ * @remarks
+ * The needle color can be specified via the `color` prop or will default to the theme palette info.main.
+ * The needle smoothly animates to the new heading using a spring animation, and the color interpolates based on cardinal directions
+ * if no color is provided.
+ */
+export declare const CompassRose: React.FC<CompassRoseProps>;
+/**
+ * @interface DirectionalGridProps
+ * @description Properties for the {@link DirectionalGrid} component.
+ * @see {@link DirectionalGrid}
+ * @property {number} cx - X-coordinate of the center of the directional grid.
+ * @property {number} cy - Y-coordinate of the center of the directional grid.
+ * @property {number} radius - Radius of the directional grid ring.
+ * @property {number} currentHeading - Current heading in degrees (0° = North, 90° = East).
+ * @property {(heading: number) => void} [onSelect] - Optional callback fired when a direction segment is clicked.
+ * @property {boolean} [hideCardinalLabels] - Whether to hide cardinal direction labels (N, E, S, W). Defaults to false.
+ */
+export interface DirectionalGridProps {
+    cx: number;
+    cy: number;
+    radius: number;
+    currentHeading: number;
+    onSelect?: (heading: number) => void;
+    hideCardinalLabels?: boolean;
+}
+/**
+ * @type DirectionButtonsProps
+ * @description Alias for {@link DirectionalGridProps} to maintain backward compatibility with the `DirectionButtons` component.
+ * @see {@link DirectionalGridProps}
+ * @remarks
+ * The `DirectionButtons` component is now an alias for `DirectionalGrid`, and both share the same props interface.
+ * This allows for consistent usage and easier migration from the older `DirectionButtons` component to the newer `DirectionalGrid`.
+ */
+export type DirectionButtonsProps = DirectionalGridProps;
+/**
+ * @function DirectionalGrid
+ * @description Renders a ring of clickable arc segments for selecting a compass heading in 45° increments.
+ * @param {DirectionalGridProps} props - Properties for the directional grid.
+ * @returns {JSX.Element} The rendered directional grid SVG group.
+ * @remarks
+ * Each segment represents a cardinal or intercardinal direction and can be clicked to select a heading.
+ * The currently selected heading is highlighted with a glow effect, and the segment color can be customized via the theme palette.
+ * The `hideCardinalLabels` prop allows for hiding the N, E, S, W labels if desired.
+ */
+export declare const DirectionalGrid: React.FC<DirectionalGridProps>;
+export declare const DirectionButtons: React.FC<DirectionalGridProps>;
+/**
+ * @interface InteractiveCompassProps
+ * @description Properties for the {@link InteractiveCompass} component.
+ * @see {@link InteractiveCompass}
+ * @property {number} heading - Current heading in degrees (0° = North, 90° = East).
+ * @property {(heading: number) => void} [onHeadingChange] - Optional callback fired when the heading is changed via dragging or clicking.
+ * @property {number} [size] - Size of the SVG canvas. Defaults to 160.
+ * @property {number} [outerRadius] - Outer radius of the directional grid. Defaults to 60.
+ * @property {number} [innerRadius] - Inner radius of the compass rose. Defaults to 45.
+ * @property {boolean} [isConnected] - Whether the compass is connected (disables interaction). Defaults to false.
+ * @property {boolean} [hideCardinalLabels] - Whether to hide cardinal direction labels (N, E, S, W). Defaults to false.
+ */
+export interface InteractiveCompassProps {
+    heading: number;
+    onHeadingChange?: (heading: number) => void;
+    size?: number;
+    outerRadius?: number;
+    innerRadius?: number;
+    isConnected?: boolean;
+    hideCardinalLabels?: boolean;
+}
+/**
+ * @function InteractiveCompass
+ * @description Composites a {@link DirectionalGrid} and a {@link CompassRose} into a drag-to-set heading control.
+ * @param {InteractiveCompassProps} props - Properties for the interactive compass.
+ * @returns {JSX.Element} The rendered interactive compass SVG.
+ * @remarks
+ * The {@link InteractiveCompass} component allows users to set a heading by dragging or clicking on the directional grid.
+ * It combines the visual representation of the {@link CompassRose} with the interactive functionality of the {@link DirectionalGrid}.
+ * The `onHeadingChange` callback is fired whenever the heading is updated, allowing parent components to respond to changes.
+ * The component supports customization of size, radii, and visibility of cardinal labels.
+ */
+export declare const InteractiveCompass: React.FC<InteractiveCompassProps>;
+//# sourceMappingURL=CompassRose.d.ts.map

package/dist/components/svg/CompassRose.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CompassRose.d.ts","sourceRoot":"","sources":["../../../src/components/svg/CompassRose.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B;;;;;;;;;;GAUG;AACH,MAAM,WAAW,gBAAgB;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAwGlD,CAAC;AAIF;;;;;;;;;;GAUG;AACH,MAAM,WAAW,oBAAoB;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED;;;;;;;GAOG;AACH,MAAM,MAAM,qBAAqB,GAAG,oBAAoB,CAAC;AAEzD;;;;;;;;;GASG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA+F1D,CAAC;AAEF,eAAO,MAAM,gBAAgB,gCAAkB,CAAC;AAIhD;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,uBAAuB;IACpC,OAAO,EAAE,MAAM,CAAC;IAChB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CA0EhE,CAAC"}

package/dist/components/svg/CompassRose.js

@@ -0,0 +1,221 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @file CompassRose.tsx
+ * @description Renders a compass rose and directional grid for the map visualizer.
+ *
+ * @remarks
+ * The {@link CompassRose} component displays a circular compass with a needle that smoothly animates to indicate the current heading.
+ * The {@link DirectionalGrid} component renders a ring of clickable arc segments for selecting a compass heading in 45° increments.
+ * The {@link InteractiveCompass} component combines both the {@link CompassRose} and {@link DirectionalGrid} into a single interactive control.
+ * Supports interactive heading selection and smooth needle animation.
+ *
+ * @author Carson Fujita
+ * @license MIT
+ *
+ * @example
+ * <InteractiveCompass
+ *  heading={currentHeading}
+ *  onHeadingChange={(newHeading) => setCurrentHeading(newHeading)}
+ * size={160}
+ * outerRadius={60}
+ * innerRadius={45}
+ * hideCardinalLabels={false}
+ * />
+ *
+ */
+import React from 'react';
+import { useTheme, alpha, Box } from '@mui/material';
+import { useSpring, animated } from '@react-spring/web';
+import { useDrag } from '@use-gesture/react';
+const COMPASS_ROSE_SPRING = { tension: 200, friction: 25 };
+/**
+ * @function CompassRose
+ * @description Renders an animated compass needle that smoothly tracks heading changes using a spring.
+ * @param {CompassRoseProps} props - Properties for the compass rose.
+ * @returns {JSX.Element} The rendered compass rose SVG group.
+ * @remarks
+ * The needle color can be specified via the `color` prop or will default to the theme palette info.main.
+ * The needle smoothly animates to the new heading using a spring animation, and the color interpolates based on cardinal directions
+ * if no color is provided.
+ */
+export const CompassRose = ({ cx, cy, radius, heading, color, hideCardinalLabels = true }) => {
+    const theme = useTheme();
+    const resolvedColor = color || theme.palette.info.main;
+    const compassColors = theme.palette.compass;
+    // Track accumulated rotation so the spring always takes the shortest arc
+    // (e.g. 350°→10° animates +20°, not −340°).
+    const prevHeadingRef = React.useRef(heading);
+    const accumulatedRef = React.useRef(heading);
+    const [{ rot }, springApi] = useSpring(() => ({ rot: heading, config: COMPASS_ROSE_SPRING }));
+    /**
+     * @description Updates the accumulated rotation and spring target whenever the heading prop changes.
+     * @remarks
+     * This effect calculates the shortest rotation delta between the previous heading and the new heading,
+     * updates the accumulated rotation, and starts the spring to animate the needle smoothly.
+     * The accumulated rotation is stored in a ref to maintain continuity across renders.
+     */
+    React.useEffect(() => {
+        const delta = ((heading - prevHeadingRef.current + 540) % 360) - 180;
+        accumulatedRef.current += delta;
+        prevHeadingRef.current = heading;
+        springApi.start({ rot: accumulatedRef.current });
+    }, [heading, springApi]);
+    /**
+     * @description Animated needle color for the current heading.
+     * @remarks
+     * If a color prop is provided, it is used directly. Otherwise the rotation value is normalized to
+     * 0–360° and mapped through the theme's compass palette, linearly blending between the cardinal and
+     * intercardinal colors as the needle rotates. Falls back to the resolved theme color when the palette
+     * defines no compass colors.
+     */
+    const needleColor = React.useMemo(() => {
+        if (color)
+            return color;
+        if (!compassColors)
+            return resolvedColor;
+        return rot
+            .to((v) => ((v % 360) + 360) % 360)
+            .to({
+            range: [0, 45, 90, 135, 180, 225, 270, 315, 360],
+            output: [
+                compassColors.north, compassColors.northEast, compassColors.east, compassColors.southEast,
+                compassColors.south, compassColors.southWest, compassColors.west, compassColors.northWest,
+                compassColors.north,
+            ],
+        });
+    }, [color, compassColors, resolvedColor, rot]);
+    return (_jsxs("g", { transform: `translate(${cx}, ${cy})`, children: [_jsx("circle", { cx: "0", cy: "0", r: radius, fill: alpha(theme.palette.common.black, 0.4), stroke: theme.palette.divider, strokeWidth: "2" }), hideCardinalLabels && [
+                { deg: 0, label: 'N', cardinalColor: compassColors?.north },
+                { deg: 90, label: 'E', cardinalColor: compassColors?.east },
+                { deg: 180, label: 'S', cardinalColor: compassColors?.south },
+                { deg: 270, label: 'W', cardinalColor: compassColors?.west },
+            ].map(({ deg, label, cardinalColor }) => {
+                const rad = (-deg + 90) * Math.PI / 180;
+                const cx = Math.cos(rad);
+                const cy = -Math.sin(rad);
+                return (_jsxs("g", { children: [_jsx("line", { x1: cx * (radius - 8), y1: cy * (radius - 8), x2: cx * radius, y2: cy * radius, stroke: theme.palette.text.secondary, strokeWidth: "2" }), hideCardinalLabels && (_jsx("text", { x: cx * (radius - 14), y: cy * (radius - 14) + 4, fill: cardinalColor || resolvedColor, fontSize: "9", fontWeight: "bold", textAnchor: "middle", pointerEvents: "none", children: label }))] }, deg));
+            }), [45, 135, 225, 315].map((deg) => {
+                const rad = (-deg + 90) * Math.PI / 180;
+                return (_jsx("line", { x1: Math.cos(rad) * (radius - 5), y1: -Math.sin(rad) * (radius - 5), x2: Math.cos(rad) * radius, y2: -Math.sin(rad) * radius, stroke: theme.palette.text.disabled, strokeWidth: "1" }, deg));
+            }), _jsxs(animated.g, { transform: rot.to((v) => `rotate(${v})`), children: [_jsx(animated.line, { x1: "0", y1: "0", x2: "0", y2: -(radius - 12), stroke: needleColor, strokeWidth: "4", strokeLinecap: "round" }), _jsx(animated.circle, { cx: "0", cy: "0", r: "4", fill: needleColor })] }), _jsx("circle", { cx: "0", cy: "0", r: "3", fill: theme.palette.primary.dark })] }));
+};
+/**
+ * @function DirectionalGrid
+ * @description Renders a ring of clickable arc segments for selecting a compass heading in 45° increments.
+ * @param {DirectionalGridProps} props - Properties for the directional grid.
+ * @returns {JSX.Element} The rendered directional grid SVG group.
+ * @remarks
+ * Each segment represents a cardinal or intercardinal direction and can be clicked to select a heading.
+ * The currently selected heading is highlighted with a glow effect, and the segment color can be customized via the theme palette.
+ * The `hideCardinalLabels` prop allows for hiding the N, E, S, W labels if desired.
+ */
+export const DirectionalGrid = ({ cx, cy, radius, currentHeading, onSelect, hideCardinalLabels = false }) => {
+    const theme = useTheme();
+    const compass = theme.palette.compass;
+    const directions = [
+        { label: 'N', heading: 0, angle: 90, color: compass.north || theme.palette.info.main, cardinal: true },
+        { label: 'NE', heading: 45, angle: 45, color: compass.northEast || theme.palette.info.main, cardinal: false },
+        { label: 'E', heading: 90, angle: 0, color: compass.east || theme.palette.info.main, cardinal: true },
+        { label: 'SE', heading: 135, angle: -45, color: compass.southEast || theme.palette.info.main, cardinal: false },
+        { label: 'S', heading: 180, angle: -90, color: compass.south || theme.palette.info.main, cardinal: true },
+        { label: 'SW', heading: 225, angle: -135, color: compass.southWest || theme.palette.info.main, cardinal: false },
+        { label: 'W', heading: 270, angle: 180, color: compass.west || theme.palette.info.main, cardinal: true },
+        { label: 'NW', heading: 315, angle: 135, color: compass.northWest || theme.palette.info.main, cardinal: false },
+    ];
+    const arcWidth = 16;
+    const innerRadius = radius - arcWidth / 2;
+    const outerRadius = radius + arcWidth / 2;
+    const gapAngle = 4;
+    const segmentAngle = 45;
+    // Snap to nearest 45° segment so the glow follows the needle even when
+    // currentHeading is a non-discrete angle set by dragging.
+    const activeHeading = (Math.round(currentHeading / 45) * 45) % 360;
+    /** Returns an SVG arc path for a single direction segment between inner and outer radii. */
+    const createArcPath = (centerAngle, inner, outer) => {
+        const halfSpan = segmentAngle / 2 - gapAngle / 2;
+        const startRad = ((centerAngle + halfSpan) * Math.PI) / 180;
+        const endRad = ((centerAngle - halfSpan) * Math.PI) / 180;
+        const outerStart = { x: Math.cos(startRad) * outer, y: -Math.sin(startRad) * outer };
+        const outerEnd = { x: Math.cos(endRad) * outer, y: -Math.sin(endRad) * outer };
+        const innerStart = { x: Math.cos(startRad) * inner, y: -Math.sin(startRad) * inner };
+        const innerEnd = { x: Math.cos(endRad) * inner, y: -Math.sin(endRad) * inner };
+        return `M ${outerStart.x} ${outerStart.y} A ${outer} ${outer} 0 0 1 ${outerEnd.x} ${outerEnd.y} L ${innerEnd.x} ${innerEnd.y} A ${inner} ${inner} 0 0 0 ${innerStart.x} ${innerStart.y} Z`;
+    };
+    return (_jsxs("g", { transform: `translate(${cx}, ${cy})`, children: [_jsx("circle", { cx: "0", cy: "0", r: innerRadius, fill: "none", stroke: alpha(theme.palette.divider, 0.4), strokeWidth: "1" }), [45, 135, 225, 315].map((deg) => {
+                const rad = ((-deg + 90) * Math.PI) / 180;
+                return (_jsx("line", { x1: Math.cos(rad) * (innerRadius - 6), y1: -Math.sin(rad) * (innerRadius - 6), x2: Math.cos(rad) * (innerRadius - 1), y2: -Math.sin(rad) * (innerRadius - 1), stroke: theme.palette.text.disabled, strokeWidth: "1" }, deg));
+            }), directions.map(({ label, heading, angle, color, cardinal }) => {
+                const isSelected = activeHeading === heading;
+                const midRad = (angle * Math.PI) / 180;
+                // All labels sit on the arc midpoint
+                const labelR = radius;
+                const lx = Math.cos(midRad) * labelR;
+                const ly = -Math.sin(midRad) * labelR + 4;
+                return (_jsxs("g", { cursor: "pointer", filter: isSelected ? `drop-shadow(0 0 6px ${color})` : undefined, onClick: () => onSelect?.(heading), children: [_jsx("path", { d: createArcPath(angle, innerRadius, outerRadius), fill: isSelected ? color : alpha(theme.palette.background.paper, 0.1), stroke: isSelected ? theme.palette.common.white : alpha(theme.palette.divider, 0.5), strokeWidth: isSelected ? 3 : 2 }), !hideCardinalLabels && (_jsx("text", { x: lx, y: ly, fill: isSelected ? theme.palette.common.white : color, fontSize: cardinal ? '11' : '7', fontWeight: "bold", textAnchor: "middle", pointerEvents: "none", children: label }))] }, label));
+            })] }));
+};
+export const DirectionButtons = DirectionalGrid;
+/**
+ * @function InteractiveCompass
+ * @description Composites a {@link DirectionalGrid} and a {@link CompassRose} into a drag-to-set heading control.
+ * @param {InteractiveCompassProps} props - Properties for the interactive compass.
+ * @returns {JSX.Element} The rendered interactive compass SVG.
+ * @remarks
+ * The {@link InteractiveCompass} component allows users to set a heading by dragging or clicking on the directional grid.
+ * It combines the visual representation of the {@link CompassRose} with the interactive functionality of the {@link DirectionalGrid}.
+ * The `onHeadingChange` callback is fired whenever the heading is updated, allowing parent components to respond to changes.
+ * The component supports customization of size, radii, and visibility of cardinal labels.
+ */
+export const InteractiveCompass = ({ heading, onHeadingChange, size = 160, outerRadius = 60, innerRadius = 45, isConnected = false, hideCardinalLabels = false, }) => {
+    // The SVG reference is used to calculate the center of the compass for drag interactions.
+    const svgRef = React.useRef(null);
+    const center = size / 2;
+    /**
+     * @function handleUpdate
+     * @description Converts a screen-space pointer position to a compass heading and fires `onHeadingChange`.
+     * @param {number} x - The x-coordinate of the pointer in screen space.
+     * @param {number} y - The y-coordinate of the pointer in screen space.
+     * @remarks
+     * This function calculates the angle between the center of the compass and the pointer position using `Math.atan2`.
+     * The resulting angle is converted to degrees and adjusted so that 0° corresponds to North.
+     * The heading is normalized to a value between 0° and 360° before invoking the `onHeadingChange` callback.
+     * If the SVG reference is not available or the compass is connected (disabling interaction), the function will return early without firing the callback.
+     */
+    const handleUpdate = (x, y) => {
+        if (!svgRef.current || isConnected || !onHeadingChange)
+            return;
+        const rect = svgRef.current.getBoundingClientRect();
+        const centerX = rect.left + rect.width / 2;
+        const centerY = rect.top + rect.height / 2;
+        const h = (Math.atan2(y - centerY, x - centerX) * 180 / Math.PI) + 90;
+        onHeadingChange((Math.round(h) + 360) % 360);
+    };
+    /**
+     * @description Sets up a drag gesture on the SVG element to allow users to change the heading by dragging.
+     * @remarks
+     * The `useDrag` hook from `@use-gesture/react` is used to handle pointer events.
+     * The `handleUpdate` function is called with the pointer's screen coordinates whenever a drag event occurs.
+     * The `event.stopPropagation()` call prevents the drag event from bubbling up to parent elements,
+     * ensuring that only the compass responds to the interaction.
+     * The `threshold` option is set to 0 to allow immediate response to pointer movement,
+     * and `passive: false` is specified to allow calling `preventDefault()` if needed.
+     * If the compass is connected (disabling interaction), dragging will have no effect.
+     */
+    useDrag(({ xy: [x, y], event }) => {
+        if (event)
+            event.stopPropagation();
+        handleUpdate(x, y);
+    }, {
+        target: svgRef,
+        threshold: 0,
+        eventOptions: { passive: false }
+    });
+    return (_jsxs(Box, { ref: svgRef, component: "svg", width: size, height: size, viewBox: `0 0 ${size} ${size}`, sx: {
+            cursor: isConnected ? 'default' : 'crosshair',
+            touchAction: 'none',
+            display: 'block',
+            overflow: 'visible',
+            userSelect: 'none'
+        }, children: [!hideCardinalLabels && (_jsx(DirectionButtons, { cx: center, cy: center, radius: outerRadius, currentHeading: heading, onSelect: onHeadingChange })), _jsx(CompassRose, { cx: center, cy: center, radius: hideCardinalLabels ? outerRadius : innerRadius, heading: heading, hideCardinalLabels: hideCardinalLabels })] }));
+};
+//# sourceMappingURL=CompassRose.js.map

package/dist/components/svg/CompassRose.js.map

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

package/dist/connection/config.d.ts

@@ -0,0 +1,41 @@
+/**
+ * @file connection/config.ts
+ * @description Runtime-configurable connection settings for the ASV basestation.
+ *
+ * A published library cannot assume the basestation lives at localhost:8080, so
+ * instead of hardcoded constants the connection endpoints are held in a mutable
+ * module-level config. Call {@link configureTelemetryConnection} once at app
+ * startup (before dispatching `initConnection`) to point the visualizer at the
+ * right basestation. Thunks and utilities read the config at call time via
+ * {@link getTelemetryConnectionConfig}, so overrides applied before a connection
+ * attempt are always honored.
+ *
+ * @author Carson Fujita
+ * @license MIT
+ *
+ * @example
+ * configureTelemetryConnection({
+ *     httpBase: 'http://192.168.1.50:8080',
+ *     wsUrl: 'ws://192.168.1.50:8080/telemetry',
+ * });
+ * store.dispatch(initConnection());
+ */
+/** Connection endpoints and timeouts for the ASV basestation. */
+export interface TelemetryConnectionConfig {
+    /** Base HTTP URL for the ASV basestation REST endpoints (health check, relative stream URLs). */
+    httpBase: string;
+    /** WebSocket URL for the ASV basestation telemetry stream. */
+    wsUrl: string;
+    /** Milliseconds to wait for a WebSocket handshake before falling back to simulation. */
+    timeoutMs: number;
+}
+/**
+ * Overrides one or more connection settings. Unspecified fields keep their
+ * current values.
+ */
+export declare function configureTelemetryConnection(overrides: Partial<TelemetryConnectionConfig>): void;
+/** Returns the current connection settings (read at call time by the thunks). */
+export declare function getTelemetryConnectionConfig(): TelemetryConnectionConfig;
+/** Resets the connection settings to the localhost defaults. Primarily for tests. */
+export declare function resetTelemetryConnectionConfig(): void;
+//# sourceMappingURL=config.d.ts.map

package/dist/connection/config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../src/connection/config.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,iEAAiE;AACjE,MAAM,WAAW,yBAAyB;IACtC,iGAAiG;IACjG,QAAQ,EAAE,MAAM,CAAC;IACjB,8DAA8D;IAC9D,KAAK,EAAE,MAAM,CAAC;IACd,wFAAwF;IACxF,SAAS,EAAE,MAAM,CAAC;CACrB;AAUD;;;GAGG;AACH,wBAAgB,4BAA4B,CAAC,SAAS,EAAE,OAAO,CAAC,yBAAyB,CAAC,GAAG,IAAI,CAEhG;AAED,iFAAiF;AACjF,wBAAgB,4BAA4B,IAAI,yBAAyB,CAExE;AAED,qFAAqF;AACrF,wBAAgB,8BAA8B,IAAI,IAAI,CAErD"}

package/dist/connection/config.js

@@ -0,0 +1,44 @@
+/**
+ * @file connection/config.ts
+ * @description Runtime-configurable connection settings for the ASV basestation.
+ *
+ * A published library cannot assume the basestation lives at localhost:8080, so
+ * instead of hardcoded constants the connection endpoints are held in a mutable
+ * module-level config. Call {@link configureTelemetryConnection} once at app
+ * startup (before dispatching `initConnection`) to point the visualizer at the
+ * right basestation. Thunks and utilities read the config at call time via
+ * {@link getTelemetryConnectionConfig}, so overrides applied before a connection
+ * attempt are always honored.
+ *
+ * @author Carson Fujita
+ * @license MIT
+ *
+ * @example
+ * configureTelemetryConnection({
+ *     httpBase: 'http://192.168.1.50:8080',
+ *     wsUrl: 'ws://192.168.1.50:8080/telemetry',
+ * });
+ * store.dispatch(initConnection());
+ */
+const DEFAULT_CONFIG = {
+    httpBase: 'http://localhost:8080',
+    wsUrl: 'ws://localhost:8080/telemetry',
+    timeoutMs: 5000,
+};
+let config = { ...DEFAULT_CONFIG };
+/**
+ * Overrides one or more connection settings. Unspecified fields keep their
+ * current values.
+ */
+export function configureTelemetryConnection(overrides) {
+    config = { ...config, ...overrides };
+}
+/** Returns the current connection settings (read at call time by the thunks). */
+export function getTelemetryConnectionConfig() {
+    return { ...config };
+}
+/** Resets the connection settings to the localhost defaults. Primarily for tests. */
+export function resetTelemetryConnectionConfig() {
+    config = { ...DEFAULT_CONFIG };
+}
+//# sourceMappingURL=config.js.map

package/dist/connection/config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.js","sourceRoot":"","sources":["../../src/connection/config.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAYH,MAAM,cAAc,GAA8B;IAC9C,QAAQ,EAAE,uBAAuB;IACjC,KAAK,EAAE,+BAA+B;IACtC,SAAS,EAAE,IAAI;CAClB,CAAC;AAEF,IAAI,MAAM,GAA8B,EAAE,GAAG,cAAc,EAAE,CAAC;AAE9D;;;GAGG;AACH,MAAM,UAAU,4BAA4B,CAAC,SAA6C;IACtF,MAAM,GAAG,EAAE,GAAG,MAAM,EAAE,GAAG,SAAS,EAAE,CAAC;AACzC,CAAC;AAED,iFAAiF;AACjF,MAAM,UAAU,4BAA4B;IACxC,OAAO,EAAE,GAAG,MAAM,EAAE,CAAC;AACzB,CAAC;AAED,qFAAqF;AACrF,MAAM,UAAU,8BAA8B;IAC1C,MAAM,GAAG,EAAE,GAAG,cAAc,EAAE,CAAC;AACnC,CAAC"}

package/dist/contexts/SceneContext.d.ts

@@ -0,0 +1,35 @@
+/**
+ * @file SceneContext.tsx
+ * @description Provider for the scene viewport context. Renamed from MapCanvasContext.tsx.
+ */
+import React from 'react';
+import { type SceneContextValue } from '../hooks/useSceneContext';
+/**
+ * @interface SceneProviderProps
+ * @description Properties for the {@link SceneProvider} component.
+ * @see {@link SceneProvider}
+ * @property {SceneContextValue} value - The value to be provided to the {@link SceneContext}.
+ * @property {React.ReactNode} children - The child components that will have access to the {@link SceneContext}.
+ * @remarks
+ * This component wraps its children with a {@link SceneContext.Provider}, allowing them to access the scene viewport context values and callbacks. It is typically used at a high level in the component tree to provide context to all components that need it.
+ */
+interface SceneProviderProps {
+    value: SceneContextValue;
+    children: React.ReactNode;
+}
+/**
+ * @component SceneProvider
+ * @description Provides the {@link SceneContext} to its child components.
+ * @param {SceneProviderProps} props - Properties for the component.
+ * @returns {JSX.Element} A React element that provides the {@link SceneContext} to its children.
+ * @remarks
+ * This component should be used at a high level in the component tree to ensure that all child components that need access to the scene viewport context can do so. It takes a {@link SceneContextValue} and makes it available to all descendants via the {@link SceneContext}.
+ * @example
+ * <SceneProvider value={sceneContextValue}>
+ *   <ChildComponent />
+ * </SceneProvider>
+ * @see {@link SceneContext} for the context definition.
+ */
+export declare function SceneProvider({ value, children }: SceneProviderProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=SceneContext.d.ts.map

package/dist/contexts/SceneContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SceneContext.d.ts","sourceRoot":"","sources":["../../src/contexts/SceneContext.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAEhF;;;;;;;;GAQG;AACH,UAAU,kBAAkB;IACxB,KAAK,EAAE,iBAAiB,CAAC;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,kBAAkB,qBAEpE"}