@skyvexsoftware/stratos-sdk 0.5.9 → 0.7.3

package/README.md

@@ -172,15 +172,17 @@ Available: Button, Card, Dialog, Input, Label, Select, Badge, Separator, Tabs, T
 
 ### Icons
 
-The full [Lucide](https://lucide.dev) icon set is available via `STRATOS_ICONS`:
+Import icons directly from `lucide-react` — they're tree-shaken, so only the icons you use are added to your bundle:
 
 ```tsx
-import { STRATOS_ICONS, STRATOS_ICON_NAMES } from "@skyvexsoftware/stratos-sdk";
-
-const Icon = STRATOS_ICONS["Helicopter"];
+import { Plane, Map, Settings, Helicopter } from "lucide-react";
 ```
 
-Or import icons directly from `lucide-react` in your plugin.
+The SDK's Vite config shims `react`, `react-dom`, and their jsx subpaths so every copy of React in your plugin graph (including lucide-react's internals) resolves to the shell's single instance.
+
+If you need dynamic lookup (e.g. icons chosen by name from a remote config), `import { icons } from "lucide-react"` gives you the full map — at the cost of bundling the whole set into your plugin. Prefer a curated static map when possible.
+
+Earlier SDK versions exposed `STRATOS_ICONS` and `STRATOS_ICON_NAMES` as convenience re-exports of lucide's `icons` object. Those exports are still available but **deprecated** — prefer the patterns above in new code.
 
 ### Types
 

package/dist/icons.d.ts

@@ -1,13 +1,21 @@
 /**
- * Re-exports the full lucide-react icon set.
+ * Re-exports of lucide-react's icon registry.
  *
- * Both Stratos and SkyVex keep lucide-react on the same version
- * so the available icons are always in sync.
+ * @deprecated Since SDK 0.7.2. Import from `lucide-react` directly — static
+ * imports tree-shake, and the SDK's Vite config shims `react` so lucide's
+ * internals resolve to the shell's React instance (no bundle duplication,
+ * no two-React crashes). For genuinely dynamic name→component lookup, use
+ * `import { icons } from "lucide-react"` which costs ~60 KB gzipped in your
+ * plugin bundle — prefer a curated static map where you can.
  *
- * - STRATOS_ICONS: Record<string, LucideIcon> — PascalCase keys (e.g. "BookOpen")
- * - STRATOS_ICON_NAMES: string[] — sorted list of all available icon names
+ * Retained as a thin re-export so existing plugin bundles that were built
+ * against SDK 0.6.x and earlier keep working when core upgrades the SDK.
+ * Safe to remove in a future major release once no shipped plugin references
+ * these exports.
  */
 import { icons } from "lucide-react";
+/** @deprecated Import from `lucide-react` directly. See file docstring. */
 export declare const STRATOS_ICONS: typeof icons;
+/** @deprecated Import from `lucide-react` directly. See file docstring. */
 export declare const STRATOS_ICON_NAMES: string[];
 //# sourceMappingURL=icons.d.ts.map

package/dist/icons.js

@@ -1,12 +1,20 @@
 /**
- * Re-exports the full lucide-react icon set.
+ * Re-exports of lucide-react's icon registry.
  *
- * Both Stratos and SkyVex keep lucide-react on the same version
- * so the available icons are always in sync.
+ * @deprecated Since SDK 0.7.2. Import from `lucide-react` directly — static
+ * imports tree-shake, and the SDK's Vite config shims `react` so lucide's
+ * internals resolve to the shell's React instance (no bundle duplication,
+ * no two-React crashes). For genuinely dynamic name→component lookup, use
+ * `import { icons } from "lucide-react"` which costs ~60 KB gzipped in your
+ * plugin bundle — prefer a curated static map where you can.
  *
- * - STRATOS_ICONS: Record<string, LucideIcon> — PascalCase keys (e.g. "BookOpen")
- * - STRATOS_ICON_NAMES: string[] — sorted list of all available icon names
+ * Retained as a thin re-export so existing plugin bundles that were built
+ * against SDK 0.6.x and earlier keep working when core upgrades the SDK.
+ * Safe to remove in a future major release once no shipped plugin references
+ * these exports.
  */
 import { icons } from "lucide-react";
+/** @deprecated Import from `lucide-react` directly. See file docstring. */
 export const STRATOS_ICONS = icons;
+/** @deprecated Import from `lucide-react` directly. See file docstring. */
 export const STRATOS_ICON_NAMES = Object.keys(icons).sort();

package/dist/index.js

@@ -22,7 +22,10 @@ export { useSocket, useSimulatorData, useProtocolUrl, useNotifications, useSyste
 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, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Input, Label, 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";
-// ── Icons ─────────────────────────────────────────────────────────────
+// ── Icons (deprecated) ────────────────────────────────────────────────
+// Kept as a thin re-export of lucide-react's icons registry so plugin
+// bundles built against earlier SDK versions keep working when core
+// upgrades. New code should import from lucide-react directly.
 export { STRATOS_ICONS, STRATOS_ICON_NAMES } from "./icons";
 // ── Utilities ──────────────────────────────────────────────────────────
 export { cn } from "./utils/cn";

package/dist/shims/react-dom-client.d.ts

@@ -0,0 +1,6 @@
+declare const _default: any;
+export default _default;
+export declare const createRoot: any;
+export declare const hydrateRoot: any;
+export declare const version: any;
+//# sourceMappingURL=react-dom-client.d.ts.map

package/dist/shims/react-dom-client.js

@@ -0,0 +1,12 @@
+// GENERATED by scripts/gen-react-shims.mjs — do not edit by hand.
+// Proxies "react-dom/client" imports to window.__stratos_modules__["react-dom/client"]
+// so every copy of React in the plugin graph (source, lucide-react,
+// radix, etc.) resolves to the shell's single instance.
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const __m = globalThis.__stratos_modules__?.["react-dom/client"];
+if (!__m)
+    throw new Error("Stratos: window.__stratos_modules__[\"react-dom/client\"] is not available. The shell must initialize it before plugin modules evaluate.");
+export default __m.default ?? __m;
+export const createRoot = __m.createRoot;
+export const hydrateRoot = __m.hydrateRoot;
+export const version = __m.version;

package/dist/shims/react-dom.d.ts

@@ -0,0 +1,17 @@
+declare const _default: any;
+export default _default;
+export declare const __DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE: any;
+export declare const createPortal: any;
+export declare const flushSync: any;
+export declare const preconnect: any;
+export declare const prefetchDNS: any;
+export declare const preinit: any;
+export declare const preinitModule: any;
+export declare const preload: any;
+export declare const preloadModule: any;
+export declare const requestFormReset: any;
+export declare const unstable_batchedUpdates: any;
+export declare const useFormState: any;
+export declare const useFormStatus: any;
+export declare const version: any;
+//# sourceMappingURL=react-dom.d.ts.map

package/dist/shims/react-dom.js

@@ -0,0 +1,23 @@
+// GENERATED by scripts/gen-react-shims.mjs — do not edit by hand.
+// Proxies "react-dom" imports to window.__stratos_modules__["react-dom"]
+// so every copy of React in the plugin graph (source, lucide-react,
+// radix, etc.) resolves to the shell's single instance.
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const __m = globalThis.__stratos_modules__?.["react-dom"];
+if (!__m)
+    throw new Error("Stratos: window.__stratos_modules__[\"react-dom\"] is not available. The shell must initialize it before plugin modules evaluate.");
+export default __m.default ?? __m;
+export const __DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE = __m.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
+export const createPortal = __m.createPortal;
+export const flushSync = __m.flushSync;
+export const preconnect = __m.preconnect;
+export const prefetchDNS = __m.prefetchDNS;
+export const preinit = __m.preinit;
+export const preinitModule = __m.preinitModule;
+export const preload = __m.preload;
+export const preloadModule = __m.preloadModule;
+export const requestFormReset = __m.requestFormReset;
+export const unstable_batchedUpdates = __m.unstable_batchedUpdates;
+export const useFormState = __m.useFormState;
+export const useFormStatus = __m.useFormStatus;
+export const version = __m.version;

package/dist/shims/react-jsx-dev-runtime.d.ts

@@ -0,0 +1,5 @@
+declare const _default: any;
+export default _default;
+export declare const Fragment: any;
+export declare const jsxDEV: any;
+//# sourceMappingURL=react-jsx-dev-runtime.d.ts.map

package/dist/shims/react-jsx-dev-runtime.js

@@ -0,0 +1,11 @@
+// GENERATED by scripts/gen-react-shims.mjs — do not edit by hand.
+// Proxies "react/jsx-dev-runtime" imports to window.__stratos_modules__["react/jsx-dev-runtime"]
+// so every copy of React in the plugin graph (source, lucide-react,
+// radix, etc.) resolves to the shell's single instance.
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const __m = globalThis.__stratos_modules__?.["react/jsx-dev-runtime"];
+if (!__m)
+    throw new Error("Stratos: window.__stratos_modules__[\"react/jsx-dev-runtime\"] is not available. The shell must initialize it before plugin modules evaluate.");
+export default __m.default ?? __m;
+export const Fragment = __m.Fragment;
+export const jsxDEV = __m.jsxDEV;

package/dist/shims/react-jsx-runtime.d.ts

@@ -0,0 +1,6 @@
+declare const _default: any;
+export default _default;
+export declare const Fragment: any;
+export declare const jsx: any;
+export declare const jsxs: any;
+//# sourceMappingURL=react-jsx-runtime.d.ts.map

package/dist/shims/react-jsx-runtime.js

@@ -0,0 +1,12 @@
+// GENERATED by scripts/gen-react-shims.mjs — do not edit by hand.
+// Proxies "react/jsx-runtime" imports to window.__stratos_modules__["react/jsx-runtime"]
+// so every copy of React in the plugin graph (source, lucide-react,
+// radix, etc.) resolves to the shell's single instance.
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const __m = globalThis.__stratos_modules__?.["react/jsx-runtime"];
+if (!__m)
+    throw new Error("Stratos: window.__stratos_modules__[\"react/jsx-runtime\"] is not available. The shell must initialize it before plugin modules evaluate.");
+export default __m.default ?? __m;
+export const Fragment = __m.Fragment;
+export const jsx = __m.jsx;
+export const jsxs = __m.jsxs;

package/dist/shims/react.d.ts

@@ -0,0 +1,44 @@
+declare const _default: any;
+export default _default;
+export declare const __CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE: any;
+export declare const __COMPILER_RUNTIME: any;
+export declare const act: any;
+export declare const cache: any;
+export declare const captureOwnerStack: any;
+export declare const Children: any;
+export declare const cloneElement: any;
+export declare const Component: any;
+export declare const createContext: any;
+export declare const createElement: any;
+export declare const createRef: any;
+export declare const forwardRef: any;
+export declare const Fragment: any;
+export declare const isValidElement: any;
+export declare const lazy: any;
+export declare const memo: any;
+export declare const Profiler: any;
+export declare const PureComponent: any;
+export declare const startTransition: any;
+export declare const StrictMode: any;
+export declare const Suspense: any;
+export declare const unstable_useCacheRefresh: any;
+export declare const use: any;
+export declare const useActionState: any;
+export declare const useCallback: any;
+export declare const useContext: any;
+export declare const useDebugValue: any;
+export declare const useDeferredValue: any;
+export declare const useEffect: any;
+export declare const useId: any;
+export declare const useImperativeHandle: any;
+export declare const useInsertionEffect: any;
+export declare const useLayoutEffect: any;
+export declare const useMemo: any;
+export declare const useOptimistic: any;
+export declare const useReducer: any;
+export declare const useRef: any;
+export declare const useState: any;
+export declare const useSyncExternalStore: any;
+export declare const useTransition: any;
+export declare const version: any;
+//# sourceMappingURL=react.d.ts.map

package/dist/shims/react.js

@@ -0,0 +1,50 @@
+// GENERATED by scripts/gen-react-shims.mjs — do not edit by hand.
+// Proxies "react" imports to window.__stratos_modules__["react"]
+// so every copy of React in the plugin graph (source, lucide-react,
+// radix, etc.) resolves to the shell's single instance.
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const __m = globalThis.__stratos_modules__?.["react"];
+if (!__m)
+    throw new Error("Stratos: window.__stratos_modules__[\"react\"] is not available. The shell must initialize it before plugin modules evaluate.");
+export default __m.default ?? __m;
+export const __CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE = __m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
+export const __COMPILER_RUNTIME = __m.__COMPILER_RUNTIME;
+export const act = __m.act;
+export const cache = __m.cache;
+export const captureOwnerStack = __m.captureOwnerStack;
+export const Children = __m.Children;
+export const cloneElement = __m.cloneElement;
+export const Component = __m.Component;
+export const createContext = __m.createContext;
+export const createElement = __m.createElement;
+export const createRef = __m.createRef;
+export const forwardRef = __m.forwardRef;
+export const Fragment = __m.Fragment;
+export const isValidElement = __m.isValidElement;
+export const lazy = __m.lazy;
+export const memo = __m.memo;
+export const Profiler = __m.Profiler;
+export const PureComponent = __m.PureComponent;
+export const startTransition = __m.startTransition;
+export const StrictMode = __m.StrictMode;
+export const Suspense = __m.Suspense;
+export const unstable_useCacheRefresh = __m.unstable_useCacheRefresh;
+export const use = __m.use;
+export const useActionState = __m.useActionState;
+export const useCallback = __m.useCallback;
+export const useContext = __m.useContext;
+export const useDebugValue = __m.useDebugValue;
+export const useDeferredValue = __m.useDeferredValue;
+export const useEffect = __m.useEffect;
+export const useId = __m.useId;
+export const useImperativeHandle = __m.useImperativeHandle;
+export const useInsertionEffect = __m.useInsertionEffect;
+export const useLayoutEffect = __m.useLayoutEffect;
+export const useMemo = __m.useMemo;
+export const useOptimistic = __m.useOptimistic;
+export const useReducer = __m.useReducer;
+export const useRef = __m.useRef;
+export const useState = __m.useState;
+export const useSyncExternalStore = __m.useSyncExternalStore;
+export const useTransition = __m.useTransition;
+export const version = __m.version;

package/dist/ui/alert-dialog.js

@@ -8,7 +8,7 @@ const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 const AlertDialogPortal = AlertDialogPrimitive.Portal;
 const AlertDialogOverlay = React.forwardRef(({ className, ...props }, ref) => (_jsx(AlertDialogPrimitive.Overlay, { className: cn("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80", className), ...props, ref: ref })));
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-const AlertDialogContent = React.forwardRef(({ className, ...props }, ref) => (_jsxs(AlertDialogPortal, { children: [_jsx(AlertDialogOverlay, {}), _jsx(AlertDialogPrimitive.Content, { ref: ref, className: cn("bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg", className), ...props })] })));
+const AlertDialogContent = React.forwardRef(({ className, ...props }, ref) => (_jsxs(AlertDialogPortal, { children: [_jsx(AlertDialogOverlay, {}), _jsx(AlertDialogPrimitive.Content, { ref: ref, className: cn("bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg", className), ...props })] })));
 AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
 const AlertDialogHeader = ({ className, ...props }) => (_jsx("div", { className: cn("flex flex-col space-y-2 text-center sm:text-left", className), ...props }));
 AlertDialogHeader.displayName = "AlertDialogHeader";

package/dist/ui/card.js

@@ -4,10 +4,10 @@ function Card({ className, ...props }) {
     return (_jsx("div", { "data-slot": "card", className: cn("bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm", className), ...props }));
 }
 function CardHeader({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "card-header", className: cn("@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6", className), ...props }));
+    return (_jsx("div", { "data-slot": "card-header", className: cn("@container/card-header has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6", className), ...props }));
 }
 function CardTitle({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "card-title", className: cn("leading-none font-semibold", className), ...props }));
+    return (_jsx("div", { "data-slot": "card-title", className: cn("font-semibold leading-none", className), ...props }));
 }
 function CardDescription({ className, ...props }) {
     return (_jsx("div", { "data-slot": "card-description", className: cn("text-muted-foreground text-sm", className), ...props }));
@@ -19,6 +19,6 @@ function CardContent({ className, ...props }) {
     return (_jsx("div", { "data-slot": "card-content", className: cn("px-6", className), ...props }));
 }
 function CardFooter({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "card-footer", className: cn("flex items-center px-6 [.border-t]:pt-6", className), ...props }));
+    return (_jsx("div", { "data-slot": "card-footer", className: cn("[.border-t]:pt-6 flex items-center px-6", className), ...props }));
 }
 export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, };

package/dist/ui/dialog.js

@@ -9,7 +9,7 @@ const DialogPortal = DialogPrimitive.Portal;
 const DialogClose = DialogPrimitive.Close;
 const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Overlay, { ref: ref, className: cn("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80", className), ...props })));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { ref: ref, className: cn("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] bg-background fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg", className), ...props, children: [children, _jsxs(DialogPrimitive.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none", children: [_jsx(X, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "Close" })] })] })] })));
+const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { ref: ref, className: cn("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] bg-background fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg", className), ...props, children: [children, _jsxs(DialogPrimitive.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground focus:outline-hidden absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none", children: [_jsx(X, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "Close" })] })] })] })));
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 function DialogHeader({ className, ...props }) {
     return (_jsx("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props }));
@@ -17,7 +17,7 @@ function DialogHeader({ className, ...props }) {
 function DialogFooter({ className, ...props }) {
     return (_jsx("div", { className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className), ...props }));
 }
-const DialogTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Title, { ref: ref, className: cn("text-lg leading-none font-semibold tracking-tight", className), ...props })));
+const DialogTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Title, { ref: ref, className: cn("text-lg font-semibold leading-none tracking-tight", className), ...props })));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
 const DialogDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Description, { ref: ref, className: cn("text-muted-foreground text-sm", className), ...props })));
 DialogDescription.displayName = DialogPrimitive.Description.displayName;

package/dist/ui/input.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../utils/cn";
 function Input({ className, type, ...props }) {
-    return (_jsx("input", { type: type, "data-slot": "input", className: cn("file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", className), ...props }));
+    return (_jsx("input", { type: type, "data-slot": "input", className: cn("file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input shadow-xs flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base outline-none transition-[color,box-shadow] file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", className), ...props }));
 }
 export { Input };

package/dist/ui/label.js

@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as LabelPrimitive from "@radix-ui/react-label";
 import { cn } from "../utils/cn";
 function Label({ className, ...props }) {
-    return (_jsx(LabelPrimitive.Root, { "data-slot": "label", className: cn("flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className), ...props }));
+    return (_jsx(LabelPrimitive.Root, { "data-slot": "label", className: cn("flex select-none items-center gap-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50", className), ...props }));
 }
 export { Label };

package/dist/ui/radio-group.js

@@ -5,6 +5,6 @@ import { Circle } from "lucide-react";
 import { cn } from "../utils/cn";
 const RadioGroup = React.forwardRef(({ className, ...props }, ref) => (_jsx(RadioGroupPrimitive.Root, { className: cn("grid gap-2", className), ...props, ref: ref })));
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
-const RadioGroupItem = React.forwardRef(({ className, ...props }, ref) => (_jsx(RadioGroupPrimitive.Item, { ref: ref, className: cn("border-primary text-primary focus-visible:ring-ring aspect-square h-4 w-4 rounded-full border shadow-sm focus:outline-hidden focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50", className), ...props, children: _jsx(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: _jsx(Circle, { className: "fill-primary h-2.5 w-2.5" }) }) })));
+const RadioGroupItem = React.forwardRef(({ className, ...props }, ref) => (_jsx(RadioGroupPrimitive.Item, { ref: ref, className: cn("border-primary text-primary focus-visible:ring-ring focus:outline-hidden aspect-square h-4 w-4 rounded-full border shadow-sm focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50", className), ...props, children: _jsx(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: _jsx(Circle, { className: "fill-primary h-2.5 w-2.5" }) }) })));
 RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
 export { RadioGroup, RadioGroupItem };

package/dist/ui/select.js

@@ -6,7 +6,7 @@ import { cn } from "../utils/cn";
 const Select = SelectPrimitive.Root;
 const SelectGroup = SelectPrimitive.Group;
 const SelectValue = SelectPrimitive.Value;
-const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Trigger, { ref: ref, className: cn("border-input bg-background ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex h-10 w-full items-center justify-between rounded-md border px-3 py-2 text-sm focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDown, { className: "h-4 w-4 opacity-50" }) })] })));
+const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Trigger, { ref: ref, className: cn("border-input bg-background ring-offset-background placeholder:text-muted-foreground focus:ring-ring focus:outline-hidden flex h-10 w-full items-center justify-between rounded-md border px-3 py-2 text-sm focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDown, { className: "h-4 w-4 opacity-50" }) })] })));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.ScrollUpButton, { ref: ref, className: cn("flex cursor-default items-center justify-center py-1", className), ...props, children: _jsx(ChevronUp, { className: "h-4 w-4" }) })));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
@@ -17,9 +17,9 @@ const SelectContent = React.forwardRef(({ className, children, position = "poppe
             "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className), position: position, ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.Viewport, { className: cn("p-1", position === "popper" &&
                     "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"), children: children }), _jsx(SelectScrollDownButton, {})] }) })));
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-const SelectLabel = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Label, { ref: ref, className: cn("py-1.5 pr-2 pl-8 text-sm font-semibold", className), ...props })));
+const SelectLabel = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Label, { ref: ref, className: cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className), ...props })));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Item, { ref: ref, className: cn("focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), ...props, children: [_jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(Check, { className: "h-4 w-4" }) }) }), _jsx(SelectPrimitive.ItemText, { children: children })] })));
+const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Item, { ref: ref, className: cn("focus:bg-accent focus:text-accent-foreground outline-hidden relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), ...props, children: [_jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(Check, { className: "h-4 w-4" }) }) }), _jsx(SelectPrimitive.ItemText, { children: children })] })));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
 const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Separator, { ref: ref, className: cn("bg-muted -mx-1 my-1 h-px", className), ...props })));
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;

package/dist/ui/slider.js

@@ -2,6 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as SliderPrimitive from "@radix-ui/react-slider";
 import { cn } from "../utils/cn";
-const Slider = React.forwardRef(({ className, ...props }, ref) => (_jsxs(SliderPrimitive.Root, { ref: ref, className: cn("relative flex w-full touch-none items-center select-none", className), ...props, children: [_jsx(SliderPrimitive.Track, { className: "bg-primary/20 relative h-1.5 w-full grow overflow-hidden rounded-full", children: _jsx(SliderPrimitive.Range, { className: "bg-primary absolute h-full" }) }), _jsx(SliderPrimitive.Thumb, { className: "border-primary/50 bg-background focus-visible:ring-ring block h-4 w-4 rounded-full border shadow-sm transition-colors focus-visible:ring-1 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50" })] })));
+const Slider = React.forwardRef(({ className, ...props }, ref) => (_jsxs(SliderPrimitive.Root, { ref: ref, className: cn("relative flex w-full touch-none select-none items-center", className), ...props, children: [_jsx(SliderPrimitive.Track, { className: "bg-primary/20 relative h-1.5 w-full grow overflow-hidden rounded-full", children: _jsx(SliderPrimitive.Range, { className: "bg-primary absolute h-full" }) }), _jsx(SliderPrimitive.Thumb, { className: "border-primary/50 bg-background focus-visible:ring-ring focus-visible:outline-hidden block h-4 w-4 rounded-full border shadow-sm transition-colors focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50" })] })));
 Slider.displayName = SliderPrimitive.Root.displayName;
 export { Slider };

package/dist/ui/tabs.js

@@ -5,8 +5,8 @@ import { cn } from "../utils/cn";
 const Tabs = TabsPrimitive.Root;
 const TabsList = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.List, { ref: ref, className: cn("bg-muted text-muted-foreground inline-flex h-10 items-center justify-center rounded-md p-1", className), ...props })));
 TabsList.displayName = TabsPrimitive.List.displayName;
-const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.Trigger, { ref: ref, className: cn("ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center rounded-sm px-3 py-1.5 text-sm font-medium whitespace-nowrap transition-all focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm", className), ...props })));
+const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.Trigger, { ref: ref, className: cn("ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground focus-visible:outline-hidden inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm", className), ...props })));
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-const TabsContent = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.Content, { ref: ref, className: cn("ring-offset-background focus-visible:ring-ring mt-2 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden", className), ...props })));
+const TabsContent = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.Content, { ref: ref, className: cn("ring-offset-background focus-visible:ring-ring focus-visible:outline-hidden mt-2 focus-visible:ring-2 focus-visible:ring-offset-2", className), ...props })));
 TabsContent.displayName = TabsPrimitive.Content.displayName;
 export { Tabs, TabsList, TabsTrigger, TabsContent };

package/dist/ui/textarea.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../utils/cn";
 function Textarea({ className, ...props }) {
-    return (_jsx("textarea", { "data-slot": "textarea", className: cn("border-input bg-background placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 flex min-h-[60px] w-full rounded-md border px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", className), ...props }));
+    return (_jsx("textarea", { "data-slot": "textarea", className: cn("border-input bg-background placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 shadow-xs flex min-h-[60px] w-full rounded-md border px-3 py-2 text-base outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", className), ...props }));
 }
 export { Textarea };

package/dist/vite/externals.d.ts

@@ -1,9 +1,10 @@
 /**
- * Canonical list of modules provided by the Stratos shell at runtime via
- * `window.__stratos_modules__`. This is the single source of truth — both
- * `vite-plugin.config.ts` (build-time) and `serve-externals.ts` (dev-time)
- * import from here.
+ * Re-exports `UI_EXTERNALS` from the standalone stratos-externals module.
+ * Kept for backwards compatibility with SDK consumers importing from
+ * `./externals.js`. The canonical definition lives in `stratos-externals.ts`
+ * so that `@sdk/stratos-externals` can be imported by tests without dragging
+ * in the rest of the SDK's Vite plugin graph.
  */
-export declare const UI_EXTERNALS: readonly ["react", "react-dom", "react/jsx-runtime", "@tanstack/react-router", "@tanstack/react-query", "@skyvexsoftware/stratos-sdk", "sonner", "socket.io-client", "maplibre-gl", "react-map-gl/maplibre"];
-export type UIExternal = (typeof UI_EXTERNALS)[number];
+export { UI_EXTERNALS } from "./stratos-externals.js";
+export type { UIExternal } from "./stratos-externals.js";
 //# sourceMappingURL=externals.d.ts.map

package/dist/vite/externals.js

@@ -1,18 +1,8 @@
 /**
- * Canonical list of modules provided by the Stratos shell at runtime via
- * `window.__stratos_modules__`. This is the single source of truth — both
- * `vite-plugin.config.ts` (build-time) and `serve-externals.ts` (dev-time)
- * import from here.
+ * Re-exports `UI_EXTERNALS` from the standalone stratos-externals module.
+ * Kept for backwards compatibility with SDK consumers importing from
+ * `./externals.js`. The canonical definition lives in `stratos-externals.ts`
+ * so that `@sdk/stratos-externals` can be imported by tests without dragging
+ * in the rest of the SDK's Vite plugin graph.
  */
-export const UI_EXTERNALS = [
-    "react",
-    "react-dom",
-    "react/jsx-runtime",
-    "@tanstack/react-router",
-    "@tanstack/react-query",
-    "@skyvexsoftware/stratos-sdk",
-    "sonner",
-    "socket.io-client",
-    "maplibre-gl",
-    "react-map-gl/maplibre",
-];
+export { UI_EXTERNALS } from "./stratos-externals.js";

package/dist/vite/plugin-config.d.ts

@@ -15,19 +15,11 @@
  *     background: { entry: 'src/background/index.ts' },
  *   });
  */
-import type { Plugin, UserConfig } from "vite";
+import type { UserConfig } from "vite";
 import { UI_EXTERNALS } from "./externals.js";
+import { stratosExternals } from "./stratos-externals.js";
 /** Modules external in background builds (available in Electron main process) */
 declare const BG_EXTERNALS: string[];
-/**
- * Rollup plugin that transforms ESM import statements for externalized modules
- * into runtime lookups from window.__stratos_modules__.
- *
- * This allows plugin UI bundles to remain valid ES modules that can be loaded
- * via dynamic import() while resolving shared dependencies from the shell's
- * global registry.
- */
-declare function stratosExternals(): Plugin;
 export type PluginBuildOptions = {
     /** Plugin root directory. Defaults to process.cwd(). */
     pluginDir?: string;

package/dist/vite/plugin-config.js

@@ -17,12 +17,13 @@
  */
 import * as fs from "fs";
 import * as path from "path";
-import MagicString from "magic-string";
 import { UI_EXTERNALS } from "./externals.js";
+import { stratosExternals } from "./stratos-externals.js";
 import { serveExternals } from "./serve-externals.js";
 import { stratosDevServer } from "./stratos-dev-server.js";
 import { cssInject } from "./css-inject.js";
 import { hmrBaseRewrite } from "./hmr-base-rewrite.js";
+import { reactShimAliases } from "./react-shim.js";
 /** Modules external in background builds (available in Electron main process) */
 const BG_EXTERNALS = ["electron", "socket.io-client"];
 /** Node.js built-in modules to externalize in background builds */
@@ -54,99 +55,6 @@ const NODE_BUILTINS = [
     "worker_threads",
     "zlib",
 ];
-/**
- * Rollup plugin that transforms ESM import statements for externalized modules
- * into runtime lookups from window.__stratos_modules__.
- *
- * This allows plugin UI bundles to remain valid ES modules that can be loaded
- * via dynamic import() while resolving shared dependencies from the shell's
- * global registry.
- */
-function stratosExternals() {
-    return {
-        name: "stratos-externals",
-        renderChunk(code) {
-            const s = new MagicString(code);
-            for (const modId of UI_EXTERNALS) {
-                const escaped = modId.replace(/[-/\\^$*+?.()|[\]{}@]/g, "\\$&");
-                const global = `window.__stratos_modules__[${JSON.stringify(modId)}]`;
-                const patterns = [
-                    // 1. import Default, { named } from 'mod';
-                    [
-                        new RegExp(`import\\s+([\\w$]+)\\s*,\\s*\\{([^}]+)\\}\\s+from\\s+['"]${escaped}['"]\\s*;?`, "g"),
-                        (_, def, names) => {
-                            const destructured = names.replace(/([\w$]+)\s+as\s+([\w$]+)/g, "$1: $2");
-                            return `const ${def} = ${global}.default || ${global};\nconst {${destructured}} = ${global};`;
-                        },
-                    ],
-                    // 2. import { named } from 'mod';
-                    [
-                        new RegExp(`import\\s*\\{([^}]+)\\}\\s+from\\s+['"]${escaped}['"]\\s*;?`, "g"),
-                        (_, names) => {
-                            const destructured = names.replace(/([\w$]+)\s+as\s+([\w$]+)/g, "$1: $2");
-                            return `const {${destructured}} = ${global};`;
-                        },
-                    ],
-                    // 3. import * as ns from 'mod';
-                    [
-                        new RegExp(`import\\s+\\*\\s+as\\s+([\\w$]+)\\s+from\\s+['"]${escaped}['"]\\s*;?`, "g"),
-                        (_, name) => `const ${name} = ${global};`,
-                    ],
-                    // 4. import Default from 'mod';
-                    [
-                        new RegExp(`import\\s+([\\w$]+)\\s+from\\s+['"]${escaped}['"]\\s*;?`, "g"),
-                        (_, def) => `const ${def} = ${global}.default || ${global};`,
-                    ],
-                    // 5. import 'mod';
-                    [new RegExp(`import\\s+['"]${escaped}['"]\\s*;?`, "g"), () => ""],
-                    // 6. export { name } from 'mod';
-                    [
-                        new RegExp(`export\\s*\\{([^}]+)\\}\\s+from\\s+['"]${escaped}['"]\\s*;?`, "g"),
-                        (_, names) => {
-                            const parts = names.split(",").map((n) => n.trim());
-                            const decls = [];
-                            const exportNames = [];
-                            for (const part of parts) {
-                                const asMatch = part.match(/^([\w$]+)\s+as\s+([\w$]+)$/);
-                                if (asMatch) {
-                                    decls.push(`const ${asMatch[2]} = ${global}[${JSON.stringify(asMatch[1])}];`);
-                                    exportNames.push(asMatch[2]);
-                                }
-                                else {
-                                    exportNames.push(part);
-                                }
-                            }
-                            if (decls.length > 0) {
-                                return `${decls.join("\n")}\nconst {${exportNames.join(", ")}} = ${global};\nexport {${exportNames.join(", ")}};`;
-                            }
-                            return `const {${exportNames.join(", ")}} = ${global};\nexport {${exportNames.join(", ")}};`;
-                        },
-                    ],
-                ];
-                // Collect all matches first, then apply in reverse order to preserve offsets
-                const matches = [];
-                for (const [re, replacer] of patterns) {
-                    re.lastIndex = 0;
-                    let match;
-                    while ((match = re.exec(code)) !== null) {
-                        matches.push({
-                            start: match.index,
-                            end: match.index + match[0].length,
-                            replacement: replacer(match[0], ...match.slice(1)),
-                        });
-                    }
-                }
-                // Apply in reverse so earlier offsets stay valid
-                matches
-                    .sort((a, b) => b.start - a.start)
-                    .forEach((m) => s.overwrite(m.start, m.end, m.replacement));
-            }
-            if (!s.hasChanged())
-                return null;
-            return { code: s.toString(), map: s.generateMap({ hires: true }) };
-        },
-    };
-}
 /**
  * Rollup plugin that copies plugin.json and assets/ to dist/ after the build.
  * Only runs during the UI build (not background) to avoid duplicate copies.
@@ -203,6 +111,34 @@ export function createPluginConfig(options) {
 }
 function createUIConfig(pluginDir, entry, extraConfig) {
     const isProduction = process.env.NODE_ENV === "production";
+    // Merge user-supplied resolve.alias with our React shims. We always use
+    // the array form because the shim aliases rely on regex matchers for
+    // exact-subpath matching (e.g. `react` vs `react/jsx-runtime`). User
+    // aliases can come in either form, so normalise object form into array
+    // entries first.
+    const userAlias = extraConfig?.resolve?.alias;
+    const userAliasArray = Array.isArray(userAlias)
+        ? userAlias
+        : userAlias
+            ? Object.entries(userAlias).map(([find, replacement]) => ({
+                find,
+                replacement: replacement,
+            }))
+            : [];
+    // Alias resolution order:
+    //   1. React shim aliases — must win; swapping them would break the
+    //      single-React invariant.
+    //   2. User-supplied aliases — can override the default `@/` below.
+    //   3. Default `@/` → `src/` — the convention every plugin wants, so
+    //      they don't have to wire it up in each vite.config.ts.
+    const mergedAlias = [
+        ...reactShimAliases(),
+        ...userAliasArray,
+        { find: /^@\//, replacement: path.resolve(pluginDir, "src") + "/" },
+    ];
+    // Strip resolve and plugins out of extraConfig before spreading, since we
+    // merge those explicitly below.
+    const { resolve: _omitResolve, plugins: _omitPlugins, ...restExtra } = extraConfig ?? {};
     return {
         root: pluginDir,
         // Skip WebSocket token validation so /@vite/client can connect from
@@ -220,11 +156,9 @@ function createUIConfig(pluginDir, entry, extraConfig) {
             },
         },
         optimizeDeps: {
-            // Exclude non-React externals from pre-bundling (they come from the shell).
-            // React packages are NOT excluded — they need to be pre-bundled so that
-            // @vitejs/plugin-react can resolve react-refresh for Fast Refresh.
-            // serveExternals() still rewrites all source-level React imports to
-            // window.__stratos_modules__, so the pre-bundled React is never loaded.
+            // Exclude non-React externals from pre-bundling (they come from the
+            // shell). React subpaths are handled by the alias below — their imports
+            // are rewritten to shim files, which esbuild can bundle normally.
             exclude: UI_EXTERNALS.filter((id) => !id.startsWith("react") && id !== "react-dom"),
         },
         build: {
@@ -246,8 +180,13 @@ function createUIConfig(pluginDir, entry, extraConfig) {
             jsx: "automatic",
             jsxImportSource: "react",
         },
-        // Merge extra config: plugins are concatenated, other keys shallow-merged
-        ...extraConfig,
+        // Shallow-merge remaining extra config (server, optimizeDeps, build,
+        // etc.). resolve and plugins are merged explicitly below.
+        ...restExtra,
+        resolve: {
+            ...extraConfig?.resolve,
+            alias: mergedAlias,
+        },
         plugins: [
             serveExternals(),
             hmrBaseRewrite(),
@@ -263,6 +202,14 @@ function createBackgroundConfig(pluginDir, entry) {
     const isProduction = process.env.NODE_ENV === "production";
     return {
         root: pluginDir,
+        resolve: {
+            // Same default `@/` → `src/` alias as the UI config, so background
+            // code can share import conventions with the UI without each plugin
+            // wiring it up in its vite.config.ts.
+            alias: [
+                { find: /^@\//, replacement: path.resolve(pluginDir, "src") + "/" },
+            ],
+        },
         build: {
             outDir: path.resolve(pluginDir, "dist/background"),
             emptyOutDir: true,

package/dist/vite/react-shim.d.ts

@@ -0,0 +1,3 @@
+import type { Alias } from "vite";
+export declare function reactShimAliases(): Alias[];
+//# sourceMappingURL=react-shim.d.ts.map

package/dist/vite/react-shim.js

@@ -0,0 +1,46 @@
+/**
+ * Resolve React (and friends) to shim modules that proxy to
+ * `window.__stratos_modules__`.
+ *
+ * Without aliasing, any dep that imports React — `lucide-react`, `@radix-ui/*`,
+ * anything with React as a peer — gets pre-bundled by Vite with its own copy
+ * of React. The plugin's source code has its React imports rewritten to the
+ * shell's `window.__stratos_modules__.react` (by serve-externals /
+ * stratos-externals), so the plugin ends up with two separate React instances
+ * — breaking hooks ("Cannot read properties of null (reading 'useContext')"),
+ * context, and refs.
+ *
+ * The alias redirects React imports (source AND inside pre-bundled deps) to
+ * physical shim files shipped with the SDK. Each shim reads from
+ * `window.__stratos_modules__[...]` and re-exports the enumerated names
+ * statically. Every React import in the entire graph resolves to the SAME
+ * instance the shell provides. Third-party UI libraries just work.
+ *
+ * The trade-off: ES modules require static named exports, so each shim
+ * enumerates the exports it covers. Lists target React 19 — update the shim
+ * files when upgrading React.
+ */
+import { fileURLToPath } from "url";
+import * as path from "path";
+// Resolve shim paths relative to this file. At consume time (compiled SDK in
+// node_modules), this file lives in dist/vite/ and shims live in dist/shims/.
+const here = path.dirname(fileURLToPath(import.meta.url));
+const shimDir = path.resolve(here, "..", "shims");
+export function reactShimAliases() {
+    return [
+        { find: /^react$/, replacement: path.join(shimDir, "react.js") },
+        { find: /^react-dom$/, replacement: path.join(shimDir, "react-dom.js") },
+        {
+            find: /^react-dom\/client$/,
+            replacement: path.join(shimDir, "react-dom-client.js"),
+        },
+        {
+            find: /^react\/jsx-runtime$/,
+            replacement: path.join(shimDir, "react-jsx-runtime.js"),
+        },
+        {
+            find: /^react\/jsx-dev-runtime$/,
+            replacement: path.join(shimDir, "react-jsx-dev-runtime.js"),
+        },
+    ];
+}

package/dist/vite/stratos-externals.d.ts

@@ -0,0 +1,11 @@
+import type { Plugin } from "vite";
+/**
+ * Canonical list of modules provided by the Stratos shell at runtime via
+ * `window.__stratos_modules__`. Plugin builds mark these as Rollup externals
+ * so imports survive bundling, and `stratosExternals` rewrites them into
+ * runtime lookups against the shell's global registry at render time.
+ */
+export declare const UI_EXTERNALS: readonly ["react", "react-dom", "react/jsx-runtime", "@tanstack/react-router", "@tanstack/react-query", "@skyvexsoftware/stratos-sdk", "sonner", "socket.io-client", "maplibre-gl", "react-map-gl/maplibre"];
+export type UIExternal = (typeof UI_EXTERNALS)[number];
+export declare function stratosExternals(): Plugin;
+//# sourceMappingURL=stratos-externals.d.ts.map

package/dist/vite/stratos-externals.js

@@ -0,0 +1,118 @@
+/**
+ * Rollup plugin that rewrites ESM import statements for shell-provided
+ * modules into `window.__stratos_modules__` lookups at render time.
+ *
+ * Plugin builds mark shared deps (react, tanstack, the SDK, etc.) as Rollup
+ * externals so imports survive bundling; this `renderChunk` pass then turns
+ * each surviving `import ... from "mod"` into a runtime lookup against the
+ * global registry the shell sets up, keeping the plugin's ESM output valid.
+ *
+ * Lives in its own file (not plugin-config.ts) so tests can import
+ * `stratosExternals` + `UI_EXTERNALS` without dragging in the rest of the
+ * SDK's Vite plugin graph — which keeps cross-package TypeScript resolution
+ * from walking into unrelated files outside consumers' rootDir.
+ */
+import MagicString from "magic-string";
+/**
+ * Canonical list of modules provided by the Stratos shell at runtime via
+ * `window.__stratos_modules__`. Plugin builds mark these as Rollup externals
+ * so imports survive bundling, and `stratosExternals` rewrites them into
+ * runtime lookups against the shell's global registry at render time.
+ */
+export const UI_EXTERNALS = [
+    "react",
+    "react-dom",
+    "react/jsx-runtime",
+    "@tanstack/react-router",
+    "@tanstack/react-query",
+    "@skyvexsoftware/stratos-sdk",
+    "sonner",
+    "socket.io-client",
+    "maplibre-gl",
+    "react-map-gl/maplibre",
+];
+export function stratosExternals() {
+    return {
+        name: "stratos-externals",
+        renderChunk(code) {
+            const s = new MagicString(code);
+            for (const modId of UI_EXTERNALS) {
+                const escaped = modId.replace(/[-/\\^$*+?.()|[\]{}@]/g, "\\$&");
+                const global = `window.__stratos_modules__[${JSON.stringify(modId)}]`;
+                const patterns = [
+                    // 1. import Default, { named } from 'mod';
+                    [
+                        new RegExp(`import\\s+([\\w$]+)\\s*,\\s*\\{([^}]+)\\}\\s+from\\s+['"]${escaped}['"]\\s*;?`, "g"),
+                        (_, def, names) => {
+                            const destructured = names.replace(/([\w$]+)\s+as\s+([\w$]+)/g, "$1: $2");
+                            return `const ${def} = ${global}.default || ${global};\nconst {${destructured}} = ${global};`;
+                        },
+                    ],
+                    // 2. import { named } from 'mod';
+                    [
+                        new RegExp(`import\\s*\\{([^}]+)\\}\\s+from\\s+['"]${escaped}['"]\\s*;?`, "g"),
+                        (_, names) => {
+                            const destructured = names.replace(/([\w$]+)\s+as\s+([\w$]+)/g, "$1: $2");
+                            return `const {${destructured}} = ${global};`;
+                        },
+                    ],
+                    // 3. import * as ns from 'mod';
+                    [
+                        new RegExp(`import\\s+\\*\\s+as\\s+([\\w$]+)\\s+from\\s+['"]${escaped}['"]\\s*;?`, "g"),
+                        (_, name) => `const ${name} = ${global};`,
+                    ],
+                    // 4. import Default from 'mod';
+                    [
+                        new RegExp(`import\\s+([\\w$]+)\\s+from\\s+['"]${escaped}['"]\\s*;?`, "g"),
+                        (_, def) => `const ${def} = ${global}.default || ${global};`,
+                    ],
+                    // 5. import 'mod';
+                    [new RegExp(`import\\s+['"]${escaped}['"]\\s*;?`, "g"), () => ""],
+                    // 6. export { name } from 'mod';
+                    [
+                        new RegExp(`export\\s*\\{([^}]+)\\}\\s+from\\s+['"]${escaped}['"]\\s*;?`, "g"),
+                        (_, names) => {
+                            const parts = names.split(",").map((n) => n.trim());
+                            const decls = [];
+                            const exportNames = [];
+                            for (const part of parts) {
+                                const asMatch = part.match(/^([\w$]+)\s+as\s+([\w$]+)$/);
+                                if (asMatch) {
+                                    decls.push(`const ${asMatch[2]} = ${global}[${JSON.stringify(asMatch[1])}];`);
+                                    exportNames.push(asMatch[2]);
+                                }
+                                else {
+                                    exportNames.push(part);
+                                }
+                            }
+                            if (decls.length > 0) {
+                                return `${decls.join("\n")}\nconst {${exportNames.join(", ")}} = ${global};\nexport {${exportNames.join(", ")}};`;
+                            }
+                            return `const {${exportNames.join(", ")}} = ${global};\nexport {${exportNames.join(", ")}};`;
+                        },
+                    ],
+                ];
+                // Collect all matches first, then apply in reverse order to preserve offsets
+                const matches = [];
+                for (const [re, replacer] of patterns) {
+                    re.lastIndex = 0;
+                    let match;
+                    while ((match = re.exec(code)) !== null) {
+                        matches.push({
+                            start: match.index,
+                            end: match.index + match[0].length,
+                            replacement: replacer(match[0], ...match.slice(1)),
+                        });
+                    }
+                }
+                // Apply in reverse so earlier offsets stay valid
+                matches
+                    .sort((a, b) => b.start - a.start)
+                    .forEach((m) => s.overwrite(m.start, m.end, m.replacement));
+            }
+            if (!s.hasChanged())
+                return null;
+            return { code: s.toString(), map: s.generateMap({ hires: true }) };
+        },
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyvexsoftware/stratos-sdk",
-  "version": "0.5.9",
+  "version": "0.7.3",
   "description": "Plugin SDK for Stratos — types, hooks, and UI components",
   "author": {
     "name": "Skyvex Software Pty Ltd",
@@ -75,7 +75,8 @@
     "access": "public"
   },
   "scripts": {
-    "build": "tsc -b",
+    "gen:shims": "node scripts/gen-react-shims.mjs",
+    "build": "node scripts/gen-react-shims.mjs && tsc -b",
     "lint": "eslint src --ext .ts,.tsx",
     "tsc": "tsc --noEmit",
     "typecheck": "tsc --noEmit",
@@ -109,17 +110,19 @@
   "devDependencies": {
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-radio-group": "^1.3.8",
     "@radix-ui/react-select": "^2.1.8",
     "@radix-ui/react-separator": "^1.1.4",
     "@radix-ui/react-slider": "^1.3.6",
-    "@radix-ui/react-slot": "^1.2.0",
+    "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tabs": "^1.1.8",
     "@radix-ui/react-tooltip": "^1.1.12",
     "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
     "@vitejs/plugin-react": "^5.1.4",
+    "react-dom": "^19.0.0",
     "class-variance-authority": "^0.7.1",
     "lucide-react": "^0.577.0",
     "socket.io-client": "^4.8.3",