@skyvexsoftware/stratos-sdk 0.22.1 → 0.23.0

package/dist/hooks/index.d.ts

@@ -11,6 +11,7 @@ export { useVaApi } from "./useVaApi";
 export { useShellConfig } from "./useShellConfig";
 export { useShellNavigation } from "./useShellNavigation";
 export { useShellToast } from "./useShellToast";
+export { useTheme } from "./useTheme";
 export { useSocket, useSimulatorData, useProtocolUrl, useNotifications, useSystemMetrics, } from "./useSimulatorData";
 export { SOCKET_EVENTS } from "../shared-types/socket-events";
 export type { ConnectionState, NotificationPayload, ProtocolUrlPayload, SimulatorDataPayload, SimulatorStatusPayload, SocketEventName, SystemMetricsPayload, } from "../shared-types/socket-events";

package/dist/hooks/index.js

@@ -11,6 +11,7 @@ export { useVaApi } from "./useVaApi";
 export { useShellConfig } from "./useShellConfig";
 export { useShellNavigation } from "./useShellNavigation";
 export { useShellToast } from "./useShellToast";
+export { useTheme } from "./useTheme";
 export { useSocket, useSimulatorData, useProtocolUrl, useNotifications, useSystemMetrics, } from "./useSimulatorData";
 // Socket.io event catalog — re-exported from shared-types for convenience
 export { SOCKET_EVENTS } from "../shared-types/socket-events";

package/dist/hooks/useTheme.d.ts

@@ -0,0 +1,7 @@
+/**
+ * The theme Stratos is showing, `"light"` or `"dark"` (with "system" already
+ * resolved), and a re-render whenever it changes. Use it for anything the
+ * CSS theme variables can't reach, such as a map style or a logo.
+ */
+export declare function useTheme(): "light" | "dark";
+//# sourceMappingURL=useTheme.d.ts.map

package/dist/hooks/useTheme.js

@@ -0,0 +1,23 @@
+import { useSyncExternalStore } from "react";
+// The shell marks dark mode with the "dark" class on <html>, so watching that
+// one attribute follows every way the theme changes (Settings, "system" mode
+// following the OS, the dev footer).
+function subscribe(onChange) {
+    const observer = new MutationObserver(onChange);
+    observer.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ["class"],
+    });
+    return () => observer.disconnect();
+}
+function getSnapshot() {
+    return document.documentElement.classList.contains("dark") ? "dark" : "light";
+}
+/**
+ * The theme Stratos is showing, `"light"` or `"dark"` (with "system" already
+ * resolved), and a re-render whenever it changes. Use it for anything the
+ * CSS theme variables can't reach, such as a map style or a logo.
+ */
+export function useTheme() {
+    return useSyncExternalStore(subscribe, getSnapshot);
+}

package/dist/index.d.ts

@@ -33,11 +33,14 @@ export { useVaApi } from "./hooks/useVaApi";
 export { useShellConfig } from "./hooks/useShellConfig";
 export { useShellNavigation } from "./hooks/useShellNavigation";
 export { useShellToast } from "./hooks/useShellToast";
+export { useTheme } from "./hooks/useTheme";
 export { useSocket, useSimulatorData, useProtocolUrl, useNotifications, useSystemMetrics, } from "./hooks/useSimulatorData";
 export { SOCKET_EVENTS } from "./shared-types/socket-events";
 export type { AutoStartConfirmPayload, ConnectionState, LogEntryPayload, NotificationPayload, ProtocolUrlPayload, SimulatorDataPayload, SimulatorStatusPayload, SocketEventName, SoundPayload, SystemMetricsPayload, } from "./shared-types/socket-events";
 export type { PluginDialogKind, PluginDialogSelectOption, PluginDialogSpec, PluginDialogResult, PluginDialogClosePayload, } from "./shared-types/plugin-dialogs";
 export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, Badge, badgeVariants, Button, buttonVariants, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Combobox, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Input, Label, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, RadioGroup, RadioGroupItem, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Slider, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "./ui";
 export type { BadgeProps, ButtonProps, ComboboxOption, ComboboxProps, } from "./ui";
+export { StratosMap } from "./ui/stratos-map";
+export type { StratosMapProps } from "./ui/stratos-map";
 export { cn } from "./utils/cn";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -23,11 +23,13 @@ export { useVaApi } from "./hooks/useVaApi";
 export { useShellConfig } from "./hooks/useShellConfig";
 export { useShellNavigation } from "./hooks/useShellNavigation";
 export { useShellToast } from "./hooks/useShellToast";
+export { useTheme } from "./hooks/useTheme";
 export { useSocket, useSimulatorData, useProtocolUrl, useNotifications, useSystemMetrics, } from "./hooks/useSimulatorData";
 // ── Socket.io Event Catalog ──────────────────────────────────────────────
 export { SOCKET_EVENTS } from "./shared-types/socket-events";
 // ── UI Primitives ──────────────────────────────────────────────────────
 export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, Badge, badgeVariants, Button, buttonVariants, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Combobox, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Input, Label, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, RadioGroup, RadioGroupItem, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Slider, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "./ui";
+export { StratosMap } from "./ui/stratos-map";
 // ── Icons (internal) ──────────────────────────────────────────────────
 // Kept at runtime for plugin bundles that still read them; out of the
 // published types. Plugins import from lucide-react or use DynamicIcon.

package/dist/ui/index.d.ts

@@ -16,6 +16,8 @@ export { Switch } from "./switch";
 export { Textarea } from "./textarea";
 export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, } from "./select";
 export { Separator } from "./separator";
+export { StratosMap } from "./stratos-map";
+export type { StratosMapProps } from "./stratos-map";
 export { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs";
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "./tooltip";
 //# sourceMappingURL=index.d.ts.map

package/dist/ui/index.js

@@ -13,5 +13,6 @@ export { Switch } from "./switch";
 export { Textarea } from "./textarea";
 export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, } from "./select";
 export { Separator } from "./separator";
+export { StratosMap } from "./stratos-map";
 export { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs";
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "./tooltip";

package/dist/ui/stratos-map-labels.d.ts

@@ -0,0 +1,8 @@
+import type maplibregl from "maplibre-gl";
+/**
+ * The Stratos look on top of the base style: English place names (else the
+ * local name), no village, hamlet, highway shield or minor road labels, and
+ * softer halos.
+ */
+export declare function applyStratosLabels(map: maplibregl.Map): void;
+//# sourceMappingURL=stratos-map-labels.d.ts.map

package/dist/ui/stratos-map-labels.js

@@ -0,0 +1,35 @@
+/**
+ * The Stratos look on top of the base style: English place names (else the
+ * local name), no village, hamlet, highway shield or minor road labels, and
+ * softer halos.
+ */
+export function applyStratosLabels(map) {
+    const layers = map.getStyle()?.layers;
+    if (!layers)
+        return;
+    for (const layer of layers) {
+        if (layer.type === "symbol" && layer.layout?.["text-field"] !== undefined) {
+            map.setLayoutProperty(layer.id, "text-field", [
+                "coalesce",
+                ["get", "name:en"],
+                ["get", "name"],
+            ]);
+        }
+        const id = layer.id.toLowerCase();
+        if (id.includes("place-village") ||
+            id.includes("place-hamlet") ||
+            id.includes("highway-shield") ||
+            id.includes("road_label_minor")) {
+            map.setLayoutProperty(layer.id, "visibility", "none");
+        }
+        if (layer.type === "symbol") {
+            try {
+                map.setPaintProperty(layer.id, "text-halo-width", 1.5);
+                map.setPaintProperty(layer.id, "text-halo-blur", 1);
+            }
+            catch {
+                // Some symbol layers don't take these.
+            }
+        }
+    }
+}

package/dist/ui/stratos-map.d.ts

@@ -0,0 +1,19 @@
+import { type Ref } from "react";
+import type { MapProps, MapRef } from "react-map-gl/maplibre";
+export type StratosMapProps = Omit<MapProps, "mapStyle" | "attributionControl"> & {
+    /** Your own style in the light theme (URL or object). Defaults to Stratos's. */
+    lightStyle?: MapProps["mapStyle"];
+    /** Your own style in the dark theme (URL or object). Defaults to Stratos's. */
+    darkStyle?: MapProps["mapStyle"];
+    ref?: Ref<MapRef>;
+};
+/**
+ * react-map-gl's `Map` (every prop and child passes through) in Stratos's
+ * map style, light or dark to match the theme, with English labels and the
+ * attribution tucked behind its info button. It switches style when the theme changes, and
+ * carries `data-stratos-map-drawing` until it has drawn the style showing:
+ * the dev footer's Screenshot waits for that, so both shots show the right
+ * map.
+ */
+export declare function StratosMap({ lightStyle, darkStyle, onLoad, ref, ...props }: StratosMapProps): import("react").JSX.Element;
+//# sourceMappingURL=stratos-map.d.ts.map

package/dist/ui/stratos-map.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState } from "react";
+import { Map } from "react-map-gl/maplibre";
+import { useTheme } from "../hooks/useTheme";
+import { applyStratosLabels } from "./stratos-map-labels";
+const LIGHT_STYLE = "https://tiles.openfreemap.org/styles/positron";
+const DARK_STYLE = "https://tiles.openfreemap.org/styles/dark";
+// MapLibre draws the attribution open the moment the map is made and only
+// tucks it away later, so keep it hidden until the map has loaded and it's
+// tucked away, then fade it in.
+const STYLES = `
+[data-stratos-map]:not([data-attribution-ready]) .maplibregl-ctrl-attrib {
+  opacity: 0;
+  pointer-events: none;
+}
+@media (prefers-reduced-motion: no-preference) {
+  [data-stratos-map] .maplibregl-ctrl-attrib {
+    transition: opacity 200ms ease-out;
+  }
+}
+`;
+const ATTRIBUTION = { compact: true };
+const isStratosStyle = (style) => style === LIGHT_STYLE || style === DARK_STYLE;
+/**
+ * react-map-gl's `Map` (every prop and child passes through) in Stratos's
+ * map style, light or dark to match the theme, with English labels and the
+ * attribution tucked behind its info button. It switches style when the theme changes, and
+ * carries `data-stratos-map-drawing` until it has drawn the style showing:
+ * the dev footer's Screenshot waits for that, so both shots show the right
+ * map.
+ */
+export function StratosMap({ lightStyle = LIGHT_STYLE, darkStyle = DARK_STYLE, onLoad, ref, ...props }) {
+    const mapStyle = useTheme() === "dark" ? darkStyle : lightStyle;
+    const [loaded, setLoaded] = useState(false);
+    const [drawing, setDrawing] = useState(true);
+    // "style" while a style URL loads (a diffed switch reports idle on the old
+    // style meanwhile), "draw" until the map is next idle, null when drawn.
+    const phase = useRef("draw");
+    const shownStyle = useRef(mapStyle);
+    useLayoutEffect(() => {
+        if (shownStyle.current === mapStyle)
+            return;
+        shownStyle.current = mapStyle;
+        phase.current = typeof mapStyle === "string" ? "style" : "draw";
+        setDrawing(true);
+    }, [mapStyle]);
+    const handleLoad = (event) => {
+        const map = event.target;
+        // Tucked away behind its info button, not open until the first drag.
+        map
+            .getContainer()
+            .querySelector(".maplibregl-ctrl-attrib.maplibregl-compact-show")
+            ?.classList.remove("maplibregl-compact-show");
+        setLoaded(true);
+        // Stratos's label tweaks, again after each theme switch reloads the style.
+        if (isStratosStyle(shownStyle.current))
+            applyStratosLabels(map);
+        map.on("style.load", () => {
+            if (isStratosStyle(shownStyle.current))
+                applyStratosLabels(map);
+        });
+        map.on("styledata", () => {
+            if (phase.current === "style")
+                phase.current = "draw";
+        });
+        map.on("idle", () => {
+            if (phase.current !== "draw")
+                return;
+            phase.current = null;
+            setDrawing(false);
+        });
+        // Then the plugin's own onLoad, if it passed one.
+        onLoad?.(event);
+    };
+    return (
+    // No box of its own: the map sizes against the parent as it would bare.
+    _jsxs("div", { "data-stratos-map": "", "data-attribution-ready": loaded ? "" : undefined, "data-stratos-map-drawing": drawing ? "" : undefined, style: { display: "contents" }, children: [_jsx("style", { href: "stratos-map", precedence: "default", children: STYLES }), _jsx(Map, { ...props, ref: ref, mapStyle: mapStyle, 
+                // Reload Stratos's style from scratch on a theme switch, so style.load
+                // fires and the label tweaks go back on (a diff would undo them).
+                styleDiffing: isStratosStyle(mapStyle) ? false : props.styleDiffing, attributionControl: ATTRIBUTION, onLoad: handleLoad })] }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyvexsoftware/stratos-sdk",
-  "version": "0.22.1",
+  "version": "0.23.0",
   "description": "Plugin SDK for Stratos — types, hooks, and UI components",
   "author": {
     "name": "Skyvex Software Pty Ltd",
@@ -107,10 +107,20 @@
     "class-variance-authority": "^0.7.0",
     "cmdk": "^1.0.0",
     "lucide-react": ">=0.300.0",
+    "maplibre-gl": "^5.0.0",
     "react": "^19.0.0",
+    "react-map-gl": "^8.0.0",
     "socket.io-client": "^4.0.0",
     "vite": "^7.0.0"
   },
+  "peerDependenciesMeta": {
+    "maplibre-gl": {
+      "optional": true
+    },
+    "react-map-gl": {
+      "optional": true
+    }
+  },
   "dependencies": {
     "axios": "^1.17.0",
     "clsx": "^2.1.1",
@@ -135,7 +145,9 @@
     "class-variance-authority": "^0.7.1",
     "cmdk": "^1.1.1",
     "lucide-react": "^0.577.0",
+    "maplibre-gl": "5.19.0",
     "react-dom": "^19.0.0",
+    "react-map-gl": "8.1.1",
     "socket.io-client": "^4.8.3",
     "typescript": "^5.8.3",
     "vite": "^7.3.1"