@rainbow-robotics/muscat-plugin-kit 0.1.2-dev.44 → 0.1.2-dev.45

package/cli/templates/common/assets/icon.svg

@@ -1,3 +1,45 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="1em" height="1em" fill="none">
-  <path fill="currentColor" d="M16 3a13 13 0 1 0 0 26 13 13 0 0 0 0-26Zm0 4a3 3 0 0 1 3 3v2.18a3 3 0 0 1 0 5.64V20a3 3 0 1 1-6 0v-2.18a3 3 0 0 1 0-5.64V10a3 3 0 0 1 3-3Z"/>
+<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="bg" x1="36" y1="28" x2="220" y2="228" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#8B5CF6"/>
+      <stop offset="1" stop-color="#5B21B6"/>
+    </linearGradient>
+    <linearGradient id="grape" x1="92" y1="74" x2="168" y2="178" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#D8B4FE"/>
+      <stop offset="1" stop-color="#A855F7"/>
+    </linearGradient>
+  </defs>
+
+  <rect x="16" y="16" width="224" height="224" rx="52" fill="url(#bg)"/>
+
+  <!-- plugin brackets -->
+  <path d="M72 84H56C47.1634 84 40 91.1634 40 100V116" stroke="white" stroke-width="12" stroke-linecap="round"/>
+  <path d="M184 84H200C208.837 84 216 91.1634 216 100V116" stroke="white" stroke-width="12" stroke-linecap="round"/>
+  <path d="M72 172H56C47.1634 172 40 164.837 40 156V140" stroke="white" stroke-width="12" stroke-linecap="round"/>
+  <path d="M184 172H200C208.837 172 216 164.837 216 156V140" stroke="white" stroke-width="12" stroke-linecap="round"/>
+
+  <!-- grape stem + leaf -->
+  <path d="M128 73C128 59 137 48 151 44" stroke="#F3E8FF" stroke-width="10" stroke-linecap="round"/>
+  <path d="M142 51C151 39 169 39 179 50C165 60 151 62 142 51Z" fill="#C4B5FD"/>
+
+  <!-- muscat grape cluster -->
+  <circle cx="106" cy="91" r="18" fill="url(#grape)"/>
+  <circle cx="132" cy="88" r="18" fill="url(#grape)"/>
+  <circle cx="158" cy="91" r="18" fill="url(#grape)"/>
+  <circle cx="94" cy="119" r="18" fill="url(#grape)"/>
+  <circle cx="120" cy="116" r="18" fill="url(#grape)"/>
+  <circle cx="146" cy="116" r="18" fill="url(#grape)"/>
+  <circle cx="172" cy="119" r="18" fill="url(#grape)"/>
+  <circle cx="107" cy="145" r="18" fill="url(#grape)"/>
+  <circle cx="133" cy="144" r="18" fill="url(#grape)"/>
+  <circle cx="159" cy="145" r="18" fill="url(#grape)"/>
+  <circle cx="120" cy="170" r="18" fill="url(#grape)"/>
+  <circle cx="146" cy="170" r="18" fill="url(#grape)"/>
+  <circle cx="133" cy="193" r="18" fill="url(#grape)"/>
+
+  <!-- center plugin glyph -->
+  <path d="M122 119V109C122 103.477 126.477 99 132 99H136C141.523 99 146 103.477 146 109V119" stroke="white" stroke-width="8" stroke-linecap="round"/>
+  <rect x="116" y="118" width="36" height="34" rx="10" fill="white"/>
+  <path d="M127 152V163" stroke="white" stroke-width="8" stroke-linecap="round"/>
+  <path d="M141 152V163" stroke="white" stroke-width="8" stroke-linecap="round"/>
 </svg>

package/cli/templates/common/package.json

@@ -7,9 +7,11 @@
     "@rainbow-robotics/plugin-ui": "__RB_VERSION__"
   },
   "devDependencies": {
+    "@tailwindcss/vite": "^4.1.0",
     "@rainbow-robotics/muscat-plugin-kit": "__RB_VERSION__",
     "@rainbow-robotics/preview-host": "__RB_VERSION__",
     "@vitejs/plugin-react": "^4.0.0",
+    "tailwindcss": "^4.1.0",
     "typescript": "^5.8.0",
     "vite": "^6.0.0"
   }

package/cli/templates/common/ui/content.tsx

@@ -1,33 +1,216 @@
-import { useState } from "react";
-import { connect } from "@rainbow-robotics/plugin-ui/connect";
-import { Slider, Button, Text, Switch } from "@rainbow-robotics/plugin-ui/react";
+import { useMemo, useState } from "react";
+import {
+  RBCheckBox,
+  RBLabelButton,
+  RBRadioBox,
+  RBSelectBox,
+  RBSlider,
+  RBSwitch,
+  RBTextArea,
+  RBTextField,
+  RBTextInput,
+  Option
+} from "@rainbow-robotics/plugin-ui/react";
 import { useRb } from "@rainbow-robotics/plugin-ui/sdk";
 
-function App() {
+type RunMode = "inspect" | "assist" | "auto";
+
+const MODE_OPTIONS: Array<{ label: string; value: RunMode }> = [
+  { label: "Inspect", value: "inspect" },
+  { label: "Assist", value: "assist" },
+  { label: "Auto", value: "auto" },
+];
+
+const TASK_OPTIONS = [
+  { label: "Publish status", value: "publish" },
+  { label: "Run grip action", value: "grip" },
+  { label: "Save snapshot", value: "snapshot" },
+];
+
+// Export your UI as the default. The host mounts it (dev: with HMR).
+export default function App() {
   const rb = useRb();
-  const [width, setWidth] = useState(20);
-  const [open, setOpen] = useState(false);
+  const [targetName, setTargetName] = useState("demo_target");
+  const [gripType, setGripType] = useState<string>();
+  const [gripWidth, setGripWidth] = useState(24);
+  const [speed, setSpeed] = useState(45);
+  const [mode, setMode] = useState<RunMode>("assist");
+  const [enabled, setEnabled] = useState(true);
+  const [tasks, setTasks] = useState<Array<string>>(["publish", "grip"]);
+  const [memo, setMemo] = useState("Use this area for operator notes.");
+
+  const payload = useMemo(
+    () => ({
+      targetName,
+      gripWidth,
+      speed,
+      mode,
+      enabled,
+      tasks,
+      memo,
+    }),
+    [targetName, gripWidth, speed, mode, enabled, tasks, memo],
+  );
+
+  const showRequestError = (error: unknown) => {
+    const message = error instanceof Error ? error.message : "Request failed";
+    rb.toast({ type: "danger", message });
+  };
+
+  const runAction = async () => {
+    try {
+      await rb.action("grip", payload);
+      rb.toast({ type: "success", message: `Sent ${targetName}` });
+    } catch (error) {
+      showRequestError(error);
+    }
+  };
+
+  const publishPreview = async () => {
+    try {
+      const isConfirm = await rb.confirm({
+        message: "Are you sure publish?",
+        buttonText: { yes: "confirm", no: "cancel" },
+      });
+
+      if (isConfirm) {
+        await rb.pub("event", payload);
+      }
+    } catch (error) {
+      showRequestError(error);
+    }
+  };
 
   return (
-    <>
-      <Text>__PLUGIN_NAME__ width: {width}</Text>
-      <Slider
-        value={width}
-        min={0}
-        max={100}
-        onChange={(event: { detail?: number }) => setWidth(event.detail ?? 0)}
-      />
-      <Button label="Grip" onPress={() => rb.action("grip", { width })} />
-      <Switch
-        checked={open}
-        onChange={(event: { detail?: boolean }) => {
-          const next = event.detail ?? false;
-          setOpen(next);
-          rb.toast(next ? "opened" : "closed", "info");
-        }}
-      />
-    </>
+    <div className="max-h-[70vh] w-[420px] p-4 max-w-full overflow-y-auto bg-bg-elevated text-fg-default">
+      <div className="flex flex-col gap-5">
+        <header>
+          <div className="flex items-center justify-between gap-12">
+            <div>
+              <h2 className="typo-heading-xs-semibold">Demo Control</h2>
+              <p className="typo-body-xs2-normal text-fg-subtle">
+                Input patterns for Muscat plugin UIs
+              </p>
+            </div>
+            <RBSwitch
+              checked={enabled}
+              onCheckedChange={(next: boolean) => {
+                setEnabled(next);
+                rb.toast({message: next ? "Plugin enabled" : "Plugin paused"});
+              }}
+            />
+          </div>
+        </header>
+
+        <section className="flex flex-col gap-4">
+          <RBTextField
+            label="Target name"
+            required
+            helperText="Used as the backend action target."
+          >
+            <RBTextInput
+              name="targetName"
+              value={targetName}
+              placeholder="target id"
+              handleChange={(value) => setTargetName(String(value))}
+            />
+          </RBTextField>
+
+          <RBTextField label="Select Grip">
+            <RBSelectBox  className="w-full" value={gripType} handleChange={setGripType}>
+              <Option value="A">A Grip</Option>
+              <Option value="B">B Grip</Option>
+            </RBSelectBox>
+          </RBTextField>
+
+          <div className="flex gap-4">
+            <RBTextField className="flex-1" label="Grip width" helperText="0-100 mm">
+              <RBTextInput
+                className="w-full"
+                name="gripWidth"
+                type="number"
+                value={gripWidth}
+                validate={(value: number) =>
+                  Math.max(0, Math.min(100, Number(value) || 0))
+                }
+                handleChange={(value) => setGripWidth(Number(value) || 0)}
+              />
+            </RBTextField>
+
+            <RBTextField className="flex-1" label="Speed" helperText={`${speed}%`}>
+              <div className="flex items-center px-2">
+                <RBSlider
+                  value={[speed]}
+                  min={0}
+                  max={100}
+                  step={5}
+                  onValueChange={(values: number[]) =>
+                    setSpeed(values[0] ?? 0)
+                  }
+                />
+              </div>
+            </RBTextField>
+          </div>
+        </section>
+
+        <section className="mb-4">
+          <RBTextField label="Run mode">
+            <div className="flex justify-between border-1 border-border-subtle rounded-sm p-2">
+            {MODE_OPTIONS.map((item) => (
+              <RBRadioBox
+                key={item.value}
+                name="mode"
+                checkValue={item.value}
+                value={mode}
+                handleChange={(value) => setMode(value as RunMode)}
+              >
+                {item.label}
+              </RBRadioBox>
+            ))}
+          </div>
+          </RBTextField>
+        </section>
+
+        <section className="mb-4">
+          <RBTextField label="Tasks">
+            <div className="flex justify-between border-1 border-border-subtle rounded-sm p-2">
+              {TASK_OPTIONS.map((item) => (
+                <RBCheckBox
+                  key={item.value}
+                  name="tasks"
+                  checkValue={item.value}
+                  value={tasks}
+                  handleChange={(value) =>
+                    setTasks(Array.isArray(value) ? value.map(String) : [])
+                  }
+                >
+                  {item.label}
+                </RBCheckBox>
+              ))}
+            </div>
+          </RBTextField>
+          
+        </section>
+
+        <RBTextField label="Memo">
+          <RBTextArea
+            name="memo"
+            value={memo}
+            maxLength={120}
+            rows={4}
+            handleChange={setMemo}
+          />
+        </RBTextField>
+
+        <footer className="grid grid-cols-2 gap-8 pt-4">
+          <RBLabelButton variant="outlined" onClick={publishPreview}>
+            Publish
+          </RBLabelButton>
+          <RBLabelButton onClick={runAction} disabled={!enabled}>
+            Run Action
+          </RBLabelButton>
+        </footer>
+      </div>
+    </div>
   );
 }
-
-connect(App);

package/cli/templates/common/ui/style.css

@@ -0,0 +1,6 @@
+@layer theme, utilities;
+
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/utilities.css" layer(utilities);
+
+@source "./**/*.{ts,tsx}";

package/cli/templates/common/vite.config.ts

@@ -1,38 +1,10 @@
-import { readdirSync } from "fs";
-import { basename, extname, resolve } from "path";
-import react from "@vitejs/plugin-react";
 import { defineConfig } from "vite";
+import tailwindcss from "@tailwindcss/vite";
+import { muscat } from "@rainbow-robotics/muscat-plugin-kit/vite";
 
-// Plugin UI and React are provided by Muscat/preview-host via import map.
-// They must NOT be bundled into the plugin ZIP.
-const HOST_PROVIDED_EXTERNALS = [
-  /^@rainbow-robotics\/plugin-ui(\/|$)/,
-  /^react(\/|$)/,
-  /^react-dom(\/|$)/,
-];
-
-// All top-level .tsx/.ts files in ui/ become separate entry points.
-// Subdirectories (components/, hooks/, etc.) are imported by entries and bundled in.
-const uiEntries = Object.fromEntries(
-  readdirSync("ui")
-    .filter((f) => /\.(tsx?|jsx?)$/.test(f))
-    .map((f) => [basename(f, extname(f)), resolve("ui", f)]),
-);
-
+// The muscat() preset wires react-refresh, ui/ entry discovery, and marks the
+// host-provided runtime (plugin-ui, react) as external. Add your own plugins or
+// overrides here as needed.
 export default defineConfig({
-  plugins: [react()],
-  build: {
-    outDir: "dist",
-    emptyOutDir: false,
-    rollupOptions: {
-      input: uiEntries,
-      external: HOST_PROVIDED_EXTERNALS,
-      output: {
-        format: "es",
-        entryFileNames: "[name].js",
-        chunkFileNames: "chunks/[name]-[hash].js",
-        assetFileNames: "assets/[name]-[hash][extname]",
-      },
-    },
-  },
+  plugins: [tailwindcss(), muscat()],
 });

package/cli/templates/cpp/cpp/main.cpp

@@ -8,6 +8,7 @@
 #include <chrono>
 #include <cstdlib>
 #include <iostream>
+#include <string>
 #include <thread>
 
 int main() {

package/cli/vite.d.mts

@@ -0,0 +1,25 @@
+export interface MuscatVitePlugin {
+  name: string;
+}
+
+export type MuscatVitePluginOption =
+  | MuscatVitePlugin
+  | false
+  | null
+  | undefined
+  | MuscatVitePluginOption[];
+
+export interface MuscatReactOptions {
+  jsxImportSource?: string;
+  babel?: {
+    plugins?: unknown[];
+    [key: string]: unknown;
+  };
+  [key: string]: unknown;
+}
+
+export interface MuscatOptions {
+  react?: false | MuscatReactOptions;
+}
+
+export declare function muscat(options?: MuscatOptions): MuscatVitePluginOption[];

package/cli/vite.mjs

@@ -0,0 +1,271 @@
+import react from "@vitejs/plugin-react";
+import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js";
+import postcss from "postcss";
+import { createRequire } from "node:module";
+import { existsSync, readFileSync, readdirSync } from "node:fs";
+import { basename, extname, resolve } from "node:path";
+
+
+const HOST_PROVIDED_EXTERNALS = [
+  /^react(\/.*)?$/,
+  /^react-dom(\/.*)?$/,
+  /^@rainbow-robotics\/plugin-ui(\/.*)?$/,
+  /^@repo\/rb-components(\/.*)?$/,
+];
+
+const UI_ENTRY_PREFIX = "muscat-ui-entry:";
+const RESOLVED_UI_ENTRY_PREFIX = "\0" + UI_ENTRY_PREFIX;
+const SHARED_RUNTIME_PREFIX = "muscat-shared-runtime:";
+const RESOLVED_SHARED_RUNTIME_PREFIX = "\0" + SHARED_RUNTIME_PREFIX;
+const STYLE_EXTENSIONS = [".css", ".scss", ".sass", ".less"];
+const SHARED_RUNTIME_FILES = {
+  react: "react",
+  "react/jsx-runtime": "react_jsx-runtime",
+  "react-dom": "react-dom",
+  "react-dom/client": "react-dom_client",
+  "@rainbow-robotics/plugin-ui/react": "plugin-ui_react",
+  "@rainbow-robotics/plugin-ui/sdk": "plugin-ui_sdk",
+  "@rainbow-robotics/plugin-ui/host-ui": "plugin-ui_host-ui",
+  "@rainbow-robotics/plugin-ui/ws": "plugin-ui_ws",
+};
+
+function cssString(value) {
+  return String(value).replace(/\\/g, "\\\\").replace(/"/g, '\\"').replace(/\n/g, "\\a ");
+}
+
+function readPluginId(root) {
+  try {
+    const manifest = JSON.parse(readFileSync(resolve(root, "manifest.json"), "utf8"));
+    return typeof manifest.id === "string" && manifest.id ? manifest.id : null;
+  } catch {
+    return null;
+  }
+}
+
+function pluginScopeSelector(pluginId) {
+  if (!pluginId) return ":where([data-muscat-plugin-root])";
+  return `:where([data-muscat-plugin-id="${cssString(pluginId)}"])`;
+}
+
+function discoverUiEntries(uiDir) {
+  return Object.fromEntries(
+    readdirSync(uiDir)
+      .filter((f) => /\.(tsx?|jsx?)$/.test(f))
+      .map((f) => [basename(f, extname(f)), resolve(uiDir, f)]),
+  );
+}
+
+function discoverUiStyles(uiDir, entryName) {
+  return STYLE_EXTENSIONS.flatMap((ext) => [
+    resolve(uiDir, `style${ext}`),
+    resolve(uiDir, `styles${ext}`),
+    resolve(uiDir, `${entryName}${ext}`),
+  ]).filter((file, index, files) => existsSync(file) && files.indexOf(file) === index);
+}
+
+function isKeyframesRule(rule) {
+  for (let node = rule.parent; node; node = node.parent) {
+    if (node.type === "atrule" && /keyframes$/i.test(node.name)) return true;
+  }
+  return false;
+}
+
+function scopeSelector(selector, rootSelector) {
+  const trimmed = selector.trim();
+  if (
+    !trimmed ||
+    trimmed.includes("[data-muscat-plugin-root]") ||
+    trimmed.includes("[data-muscat-plugin-id")
+  ) {
+    return selector;
+  }
+  if (/^(:root|:host)\b/.test(trimmed)) {
+    return trimmed.replace(/^(:root|:host)\b/, rootSelector);
+  }
+  if (/^(html|body)\b/.test(trimmed)) {
+    return trimmed.replace(/^(html|body)\b/, rootSelector);
+  }
+  return `${rootSelector} ${trimmed}`;
+}
+
+function scopePluginCss(css, rootSelector) {
+  if (!css.trim()) return css;
+  const root = postcss.parse(css);
+  root.walkRules((rule) => {
+    if (isKeyframesRule(rule)) return;
+    rule.selectors = rule.selectors.map((selector) => scopeSelector(selector, rootSelector));
+  });
+  return root.toString();
+}
+
+function createUiEntryPlugin(uiDir, entries) {
+  return {
+    name: "muscat-ui-entry",
+    enforce: "pre",
+    resolveId(id) {
+      if (id.startsWith(UI_ENTRY_PREFIX)) return "\0" + id;
+    },
+    load(id) {
+      if (!id.startsWith(RESOLVED_UI_ENTRY_PREFIX)) return;
+      const entryName = id.slice(RESOLVED_UI_ENTRY_PREFIX.length);
+      const entry = entries[entryName];
+      if (!entry) throw new Error(`Unknown Muscat UI entry: ${entryName}`);
+
+      const styleImports = discoverUiStyles(uiDir, entryName)
+        .map((file) => {
+          this.addWatchFile(file);
+          return `import ${JSON.stringify(file)};`;
+        })
+        .join("\n");
+
+      return `${styleImports}\nexport { default } from ${JSON.stringify(entry)};\n`;
+    },
+  };
+}
+
+function resolveFromPlugin(root, specifier) {
+  try {
+    return createRequire(resolve(root, "package.json")).resolve(specifier);
+  } catch {
+    return null;
+  }
+}
+
+function exactSpecifier(specifier) {
+  return new RegExp(`^${specifier.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}$`);
+}
+
+function reactAliases(root) {
+  return [
+    "react",
+    "react/jsx-runtime",
+    "react/jsx-dev-runtime",
+    "react-dom",
+    "react-dom/client",
+  ].flatMap((specifier) => {
+    const resolved = resolveFromPlugin(root, specifier);
+    return resolved ? [{ find: exactSpecifier(specifier), replacement: resolved }] : [];
+  });
+}
+
+function createSharedRuntimePlugin(baseUrl) {
+  const base = baseUrl.replace(/\/$/, "");
+
+  return {
+    name: "muscat-shared-runtime",
+    enforce: "pre",
+    resolveId(id) {
+      if (id in SHARED_RUNTIME_FILES) return "\0" + SHARED_RUNTIME_PREFIX + id;
+    },
+    load(id) {
+      if (!id.startsWith(RESOLVED_SHARED_RUNTIME_PREFIX)) return;
+      const specifier = id.slice(RESOLVED_SHARED_RUNTIME_PREFIX.length);
+      const file = SHARED_RUNTIME_FILES[specifier];
+      if (!file) throw new Error(`Unknown Muscat shared runtime module: ${specifier}`);
+
+      const url = JSON.stringify(`${base}/${file}.js`);
+      if (specifier === "react" || specifier === "react-dom") {
+        return `export * from ${url};\nimport sharedDefault from ${url};\nexport default sharedDefault;\n`;
+      }
+      return `export * from ${url};\n`;
+    },
+  };
+}
+
+const REACT_REFRESH_ACCEPT_MARKER =
+  "\nif (import.meta.hot && !inWebWorker) {\n  RefreshRuntime.__hmr_import(import.meta.url).then((currentExports) => {";
+
+function createManualHmrBoundaryPlugin(uiDir) {
+  const normalizedUiDir = uiDir.replace(/\/$/, "");
+
+  return {
+    name: "muscat-manual-hmr-boundary",
+    apply: "serve",
+    enforce: "post",
+    transform(code, id) {
+      const [file] = id.split("?");
+      if (!file.startsWith(`${normalizedUiDir}/`) || !/\.[jt]sx?$/.test(file)) return null;
+
+      const markerIndex = code.lastIndexOf(REACT_REFRESH_ACCEPT_MARKER);
+      if (markerIndex === -1) return null;
+
+      // preview-host provides the same production ReactDOM as Nexus. Vite's
+      // React Fast Refresh receives updates but cannot drive that renderer, so
+      // let the bootstrap module handle HMR by re-rendering the updated entry.
+      return { code: code.slice(0, markerIndex), map: null };
+    },
+  };
+}
+
+export function muscat(options = {}) {
+  const pluginRoot = process.cwd();
+  const uiDir = resolve(pluginRoot, "ui");
+  const entries = discoverUiEntries(uiDir);
+  const rootSelector = pluginScopeSelector(readPluginId(pluginRoot));
+  const sharedRuntimeBase = process.env.MUSCAT_PLUGIN_SHARED_RUNTIME_BASE;
+  const wrappedEntries = Object.fromEntries(
+    Object.keys(entries).map((name) => [name, `${UI_ENTRY_PREFIX}${name}`]),
+  );
+  const reactPlugins = options.react === false ? [] : [react(options.react)];
+
+  return [
+    ...reactPlugins,
+    createUiEntryPlugin(uiDir, entries),
+    ...(sharedRuntimeBase ? [createSharedRuntimePlugin(sharedRuntimeBase)] : []),
+    ...(sharedRuntimeBase ? [createManualHmrBoundaryPlugin(uiDir)] : []),
+    cssInjectedByJsPlugin({
+      relativeCSSInjection: true,
+      preRenderCSSCode: (css) => scopePluginCss(css, rootSelector),
+    }),
+    {
+      name: "muscat-plugin-build",
+      apply: "build",
+      config: () => ({
+        build: {
+          target: "esnext",
+          outDir: "dist",
+          emptyOutDir: false,
+          rollupOptions: {
+            input: wrappedEntries,
+            external: HOST_PROVIDED_EXTERNALS,
+            // Entries only `export default App` (the host mounts it). Without
+            // this, Vite treats entries as self-executing apps and tree-shakes
+            // the unused default export away.
+            preserveEntrySignatures: "strict",
+            output: {
+              format: "es",
+              entryFileNames: "[name].js",
+              chunkFileNames: "chunks/[name]-[hash].js",
+              assetFileNames: "assets/[name]-[hash][extname]",
+            },
+          },
+        },
+      }),
+    },
+    {
+      name: "muscat-plugin-dev",
+      apply: "serve",
+      config: () => {
+        return {
+          resolve: {
+            alias: sharedRuntimeBase ? [] : reactAliases(pluginRoot),
+            dedupe: ["react", "react-dom"],
+          },
+          optimizeDeps: sharedRuntimeBase
+            ? { noDiscovery: true, include: [] }
+            : {
+                include: [
+                  "react",
+                  "react-dom",
+                  "react-dom/client",
+                  "@rainbow-robotics/plugin-ui/react",
+                  "@rainbow-robotics/plugin-ui/sdk",
+                  "@rainbow-robotics/plugin-ui/host-ui",
+                  "@rainbow-robotics/plugin-ui/ws",
+                ],
+              },
+        };
+      },
+    },
+  ];
+}