@rainbow-robotics/plugin-ui 0.1.2-dev.8 → 1.0.0

package/src/viteHost.ts

@@ -0,0 +1,309 @@
+/**
+ * Vite plugins for a HOST app previewing locally-developed plugins.
+ * Host-agnostic — paths are parameters.
+ *
+ *   import {
+ *     pluginPreviewRuntimePlugin,
+ *     pluginPreviewAssetsPlugin,
+ *     isPluginPreviewMode,
+ *   } from "@rainbow-robotics/plugin-ui/vite-host";
+ *
+ * A built plugin's bare imports (react, rb-components, plugin-ui/*) resolve via
+ * the import map this file injects, to the host's already-loaded instances.
+ * See ./host.tsx.
+ */
+import type { Plugin } from "vite";
+import { createReadStream, existsSync, readFileSync, statSync } from "node:fs";
+import { createRequire } from "node:module";
+import { extname, resolve } from "node:path";
+
+const require = createRequire(import.meta.url);
+
+export const defaultPreviewAssetPrefixes = [
+  "/imgs/",
+  "/fonts/",
+  "/models/",
+  "/sounds/",
+  "/data/",
+];
+
+export const contentTypeByExt: Record<string, string> = {
+  ".avif": "image/avif",
+  ".css": "text/css; charset=utf-8",
+  ".gif": "image/gif",
+  ".glb": "model/gltf-binary",
+  ".jpeg": "image/jpeg",
+  ".jpg": "image/jpeg",
+  ".js": "text/javascript; charset=utf-8",
+  ".json": "application/json; charset=utf-8",
+  ".mp3": "audio/mpeg",
+  ".png": "image/png",
+  ".svg": "image/svg+xml",
+  ".wasm": "application/wasm",
+  ".webp": "image/webp",
+  ".woff": "font/woff",
+  ".woff2": "font/woff2",
+};
+
+export const isPluginPreviewMode = (mode: string) => mode === "plugin-preview";
+
+/* -------------------------------------------------------------------------- */
+/* Shared-runtime import map (plugins reuse the host's loaded instances)       */
+/* -------------------------------------------------------------------------- */
+
+const SHARED_BASE = "/plugin-shared";
+
+// Each shared specifier → the named exports its shim re-exports from
+// window.__RB_SHARED__[specifier] (set by the host, e.g. nexus/src/pluginShared).
+//
+// `names`: hardcoded list (small, stable modules).
+// `parseNamesFrom`: parse the export names out of a source file's text — used
+// for react.tsx, which re-exports the whole rb-components barrel (100+ names).
+// We text-parse rather than import it: the barrel is .ts source, which plain
+// Node can't execute.
+const SHARED_MODULES: Record<
+  string,
+  {
+    file: string;
+    names?: string[];
+    parseNamesFrom?: { specifier: string; extraNames?: string[] };
+    hasDefault?: boolean;
+  }
+> = {
+  react: {
+    file: "react",
+    hasDefault: true,
+    names: [
+      "Children", "Component", "Fragment", "Profiler", "PureComponent",
+      "StrictMode", "Suspense", "cloneElement", "createContext",
+      "createElement", "createRef", "forwardRef", "isValidElement", "lazy",
+      "memo", "startTransition", "useCallback", "useContext", "useDebugValue",
+      "useDeferredValue", "useEffect", "useId", "useImperativeHandle",
+      "useInsertionEffect", "useLayoutEffect", "useMemo", "useReducer",
+      "useRef", "useState", "useSyncExternalStore", "useTransition", "version",
+    ],
+  },
+  "react/jsx-runtime": {
+    file: "react_jsx-runtime",
+    names: ["Fragment", "jsx", "jsxs"],
+  },
+  "react/jsx-dev-runtime": {
+    file: "react_jsx-dev-runtime",
+    names: ["Fragment", "jsxDEV"],
+  },
+  "react-dom": {
+    file: "react-dom",
+    hasDefault: true,
+    names: [
+      "__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED",
+      "createPortal",
+      "createRoot",
+      "findDOMNode",
+      "flushSync",
+      "hydrate",
+      "hydrateRoot",
+      "render",
+      "unmountComponentAtNode",
+      "unstable_batchedUpdates",
+      "unstable_renderSubtreeIntoContainer",
+      "version",
+    ],
+  },
+  "react-dom/client": {
+    file: "react-dom_client",
+    names: ["createRoot", "hydrateRoot"],
+  },
+  "@rainbow-robotics/plugin-ui/react": {
+    file: "plugin-ui_react",
+    // react.tsx re-exports the full rb-components barrel (export *) plus the sdk
+    // hooks.
+    parseNamesFrom: {
+      specifier: "@repo/rb-components/new_components",
+      extraNames: ["useRb", "useRbFormData", "useRbSave"],
+    },
+  },
+  "@rainbow-robotics/plugin-ui/sdk": {
+    file: "plugin-ui_sdk",
+    names: ["RbContext", "useRb", "useRbFormData", "useRbSave"],
+  },
+  "@rainbow-robotics/plugin-ui/host-ui": {
+    file: "plugin-ui_host-ui",
+    names: [
+      "alert",
+      "confirm",
+      "getHostServices",
+      "prompt",
+      "setHostServices",
+      "toast",
+    ],
+  },
+  "@rainbow-robotics/plugin-ui/ws": {
+    file: "plugin-ui_ws",
+    names: ["RbWs", "createLazyRbSdk"],
+  },
+};
+
+// Parses `export { a, b as c, ... }` value names out of a source file's text
+// (skips `export type { ... }` blocks and individual `type X` entries within
+// a mixed block — types don't exist as runtime module properties). Static
+// text parsing, not module execution, so it works for .ts source files with
+// no loader and has no ESM-resolution footguns.
+function parseExportedValueNames(source: string): string[] {
+  const names = new Set<string>();
+  const blockRe = /export\s+(type\s+)?\{([^}]*)\}/g;
+  let match: RegExpExecArray | null;
+  while ((match = blockRe.exec(source))) {
+    if (match[1]) continue; // whole `export type { ... }` block
+    for (const rawEntry of match[2].split(",")) {
+      const entry = rawEntry.trim();
+      if (!entry || entry.startsWith("type ")) continue;
+      const asMatch = entry.match(/^\S+\s+as\s+(\S+)$/);
+      names.add(asMatch ? asMatch[1] : entry);
+    }
+  }
+  return [...names];
+}
+
+const nameCache = new Map<string, string[]>();
+
+function resolveNames(spec: string): string[] {
+  const mod = SHARED_MODULES[spec];
+  if (mod.names) return mod.names;
+  if (!mod.parseNamesFrom) {
+    throw new Error(`[plugin-ui] ${spec} has neither "names" nor "parseNamesFrom"`);
+  }
+  if (!nameCache.has(spec)) {
+    const { specifier, extraNames = [] } = mod.parseNamesFrom;
+    const sourcePath = require.resolve(specifier);
+    const parsed = parseExportedValueNames(readFileSync(sourcePath, "utf8"));
+    nameCache.set(spec, [...new Set([...parsed, ...extraNames])]);
+  }
+  return nameCache.get(spec)!;
+}
+
+function shimSource(spec: string): string {
+  const mod = SHARED_MODULES[spec];
+  const names = resolveNames(spec);
+  const g = `(globalThis.__RB_SHARED__||{})[${JSON.stringify(spec)}]`;
+  return (
+    `const m = ${g};\n` +
+    `if (!m) throw new Error("[plugin-ui] host shared module not registered: ${spec}");\n` +
+    `export const { ${names.join(", ")} } = m;\n` +
+    (mod.hasDefault ? `export default (m.default ?? m);\n` : "")
+  );
+}
+
+const fileToSpec = Object.fromEntries(
+  Object.entries(SHARED_MODULES).map(([spec, { file }]) => [file, spec]),
+);
+
+function importMapScript(): string {
+  const imports: Record<string, string> = {};
+  for (const [spec, { file }] of Object.entries(SHARED_MODULES)) {
+    imports[spec] = `${SHARED_BASE}/${file}.js`;
+  }
+  return `<script type="importmap">${JSON.stringify({ imports })}</script>`;
+}
+
+/**
+ * Serves the shared-runtime shim modules at /plugin-shared/*.js and injects the
+ * import map so a dynamically-imported plugin's bare `import "react"` /
+ * `import "@rainbow-robotics/plugin-ui/react"` etc. resolve to the host's OWN
+ * instances (via window.__RB_SHARED__). Applied in all modes — any nexus build
+ * that can host plugins needs it.
+ */
+export const pluginSharedRuntimePlugin = (): Plugin => ({
+  name: "plugin-ui-shared-runtime",
+  transformIndexHtml(html) {
+    return html.replace("</head>", `    ${importMapScript()}\n  </head>`);
+  },
+  configureServer(server) {
+    server.middlewares.use((req, res, next) => {
+      const url = req.url?.split("?")[0];
+      if (!url?.startsWith(`${SHARED_BASE}/`)) return next();
+      const file = url.slice(`${SHARED_BASE}/`.length).replace(/\.js$/, "");
+      const spec = fileToSpec[file];
+      if (!spec) return next();
+      res.setHeader("Content-Type", "text/javascript; charset=utf-8");
+      res.setHeader("Access-Control-Allow-Origin", "*");
+      res.end(shimSource(spec));
+    });
+  },
+  generateBundle() {
+    for (const [spec, { file }] of Object.entries(SHARED_MODULES)) {
+      this.emitFile({
+        type: "asset",
+        fileName: `plugin-shared/${file}.js`,
+        source: shimSource(spec),
+      });
+    }
+  },
+});
+
+/** Inject the preview-host runtime flags into index.html (plugin-preview only). */
+export const pluginPreviewRuntimePlugin = (): Plugin => ({
+  name: "plugin-ui-preview-runtime",
+  apply: (_config, { mode }) => isPluginPreviewMode(mode),
+  transformIndexHtml(html) {
+    return html.replace(
+      "</head>",
+      [
+        "    <script>",
+        "      window.__RB_PLUGIN_PREVIEW_HOST__ = true;",
+        "      window.__RB_ASSETS_BASE_URL__ = window.location.origin;",
+        "    </script>",
+        "  </head>",
+      ].join("\n"),
+    );
+  },
+});
+
+/** Serve the host's static assets (imgs/fonts/...) in plugin-preview dev mode. */
+export const pluginPreviewAssetsPlugin = (opts: {
+  assetsDir: string;
+  prefixes?: string[];
+}): Plugin => {
+  const { assetsDir, prefixes = defaultPreviewAssetPrefixes } = opts;
+  return {
+    name: "plugin-ui-preview-assets",
+    apply: (_config, { command, mode }) =>
+      command === "serve" && isPluginPreviewMode(mode),
+    configureServer(server) {
+      server.middlewares.use((req, res, next) => {
+        const url = req.url?.split("?")[0];
+        if (!url || !prefixes.some((prefix) => url.startsWith(prefix)))
+          return next();
+
+        const decodedUrl = decodeURIComponent(url);
+        const filePath = resolve(assetsDir, `.${decodedUrl}`);
+        if (!filePath.startsWith(assetsDir)) return next();
+        if (!existsSync(filePath) || !statSync(filePath).isFile()) return next();
+
+        const contentType = contentTypeByExt[extname(filePath)];
+        if (contentType) res.setHeader("Content-Type", contentType);
+        res.setHeader("Access-Control-Allow-Origin", "*");
+        createReadStream(filePath).pipe(res);
+      });
+    },
+  };
+};
+
+/**
+ * All host-side plugin-ui Vite plugins in one call. Each self-gates by mode, so
+ * a host just spreads this into its `plugins` array.
+ *
+ *   plugins: [muscatVitePlugin({ previewAssetsDir: resolve(here, "../assets/public") })]
+ */
+export const muscatVitePlugin = (opts: {
+  /** Host static assets dir served in plugin-preview dev mode. */
+  previewAssetsDir: string;
+  /** Override preview asset URL prefixes. */
+  previewAssetPrefixes?: string[];
+}): Plugin[] => [
+  pluginSharedRuntimePlugin(),
+  pluginPreviewRuntimePlugin(),
+  pluginPreviewAssetsPlugin({
+    assetsDir: opts.previewAssetsDir,
+    prefixes: opts.previewAssetPrefixes,
+  }),
+];

package/src/ws.ts

@@ -2,7 +2,7 @@
  * Socket.IO communication client for plugin frontends.
  *
  * Topics are automatically namespaced to prevent cross-plugin collisions:
- *   "sensor/data"  →  "plugin/{pluginId}/sensor/data"
+ *   "sensor/data"  →  "{pluginId}/sensor/data"
  *   "/broadcast/x" →  "broadcast/x"   (leading slash = absolute)
  *
  * Browser ←→ Python backend protocol:
@@ -10,6 +10,8 @@
  *   server emits  : msg, serve_call
  */
 import { io, type Socket } from "socket.io-client";
+// Type-only — no runtime coupling to host-ui.ts.
+import type { PluginUIServices } from "./host-ui";
 
 export interface WsHandle {
   undeclare(): void;
@@ -19,38 +21,67 @@ export type WsSubscriber = WsHandle;
 export type WsQueryable = WsHandle;
 
 function resolveTopic(pluginId: string, topic: string): string {
-  return topic.startsWith("/") ? topic.slice(1) : `plugin/${pluginId}/${topic}`;
+  return topic.startsWith("/") ? topic.slice(1) : `${pluginId}/${topic}`;
 }
 
 export class RbWs {
   private readonly _socket: Socket;
   private readonly _pluginId: string;
-  private readonly _subHandlers = new Map<string, Set<(payload: unknown) => void>>();
-  private readonly _serveHandlers = new Map<string, (payload?: unknown) => unknown | Promise<unknown>>();
+  private readonly _subHandlers = new Map<
+    string,
+    Set<(payload: unknown) => void>
+  >();
+  private readonly _serveHandlers = new Map<
+    string,
+    (payload?: unknown) => unknown | Promise<unknown>
+  >();
 
   private constructor(socket: Socket, pluginId: string) {
     this._socket = socket;
     this._pluginId = pluginId;
 
     // Deliver incoming pub/sub messages to registered handlers
-    socket.on("msg", ({ topic, payload }: { topic: string; payload: unknown }) => {
-      this._subHandlers.get(topic)?.forEach((h) => h(payload));
-    });
+    socket.on(
+      "msg",
+      ({ topic, payload }: { topic: string; payload: unknown }) => {
+        this._subHandlers.get(topic)?.forEach((h) => h(payload));
+      },
+    );
 
     // Python calls a browser-side serve handler
-    socket.on("serve_call", async ({ id, topic, payload }: { id: string; topic: string; payload: unknown }) => {
-      const handler = this._serveHandlers.get(topic);
-      const result = handler ? await handler(payload) : undefined;
-      socket.emit("serve_reply", { id, payload: result });
-    });
+    socket.on(
+      "serve_call",
+      async ({
+        id,
+        topic,
+        payload,
+      }: {
+        id: string;
+        topic: string;
+        payload: unknown;
+      }) => {
+        const handler = this._serveHandlers.get(topic);
+        const result = handler ? await handler(payload) : undefined;
+        socket.emit("serve_reply", { id, payload: result });
+      },
+    );
   }
 
   static connect(url: string, pluginId: string): Promise<RbWs> {
     return new Promise((resolve, reject) => {
       const socket = io(url, { transports: ["websocket"] });
-      const onConnect = () => { cleanup(); resolve(new RbWs(socket, pluginId)); };
-      const onError   = (err: Error) => { cleanup(); reject(err); };
-      const cleanup   = () => { socket.off("connect", onConnect); socket.off("connect_error", onError); };
+      const onConnect = () => {
+        cleanup();
+        resolve(new RbWs(socket, pluginId));
+      };
+      const onError = (err: Error) => {
+        cleanup();
+        reject(err);
+      };
+      const cleanup = () => {
+        socket.off("connect", onConnect);
+        socket.off("connect_error", onError);
+      };
       socket.once("connect", onConnect);
       socket.once("connect_error", onError);
     });
@@ -66,7 +97,10 @@ export class RbWs {
   }
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  async sub<P = any>(topic: string, handler: (payload: P) => void): Promise<WsSubscriber> {
+  async sub<P = any>(
+    topic: string,
+    handler: (payload: P) => void,
+  ): Promise<WsSubscriber> {
     const key = this._key(topic);
     if (!this._subHandlers.has(key)) {
       this._subHandlers.set(key, new Set());
@@ -89,12 +123,40 @@ export class RbWs {
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   async action<R = any, P = any>(topic: string, payload?: P): Promise<R> {
-    return new Promise((resolve) => {
+    const key = this._key(topic);
+    return new Promise((resolve, reject) => {
       this._socket
         .timeout(10_000)
-        .emit("action", { topic: this._key(topic), payload }, (_err: Error | null, result: R) => {
-          resolve(_err ? (undefined as R) : result);
-        });
+        .emit(
+          "action",
+          { topic: key, payload },
+          (err: Error | null, result: R) => {
+            if (err) {
+              // socket.io ack timeout — the bridge itself never answered.
+              reject(new Error(`action "${key}": no ack from bridge (${err.message})`));
+            } else if (
+              result &&
+              typeof result === "object" &&
+              "error" in result &&
+              typeof result.error === "string"
+            ) {
+              // Backend handler returned an error payload — surface it verbatim.
+              reject(new Error(result.error));
+            } else if (result === undefined || result === null) {
+              // The bridge acked but with no payload: the backend handler is
+              // registered yet didn't reply in time (hung inside the handler,
+              // e.g. a blocked SDK call) or returned nothing. Distinct from a
+              // "No handler registered" error, which comes back as result.error.
+              reject(
+                new Error(
+                  `action "${key}": no reply from plugin backend — the handler was reached but didn't return in time (check the backend's stdout on the robot).`,
+                ),
+              );
+            } else {
+              resolve(result);
+            }
+          },
+        );
     });
   }
 
@@ -118,3 +180,48 @@ export class RbWs {
     this._socket.disconnect();
   }
 }
+
+/**
+ * Builds an rb-sdk-shaped object (pub/sub/action/serve + the passed-through
+ * toast/alert/confirm/prompt) that lazily awaits a not-yet-connected `RbWs` —
+ * so callers don't block their first render on the WebSocket handshake (there
+ * may be no backend reachable yet). Shared by both host mount paths (see
+ * ./host.tsx and muscat-plugin-kit's dev bootstrap), which otherwise
+ * duplicate this wiring.
+ */
+export function createLazyRbSdk(
+  wsPromise: Promise<RbWs>,
+  services: PluginUIServices,
+  // Per-mount, host-provided (unlike `services`, which is a global singleton):
+  // initial `data` and the `onSave` registration the host reads back. Plain
+  // values/closures, so they cross the dev React-instance boundary safely.
+  mount?: {
+    data?: unknown;
+    onSave?: (getPayload: () => unknown) => () => void;
+  },
+) {
+  return {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    pub: async (topic: string, payload: any) =>
+      (await wsPromise).pub(topic, payload),
+    sub: async (
+      topic: string,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      handler: (payload: any) => void,
+    ) => (await wsPromise).sub(topic, handler),
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    action: async (topic: string, payload?: any) =>
+      (await wsPromise).action(topic, payload),
+    serve: async (
+      topic: string,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      handler: (payload?: any) => any,
+    ) => (await wsPromise).serve(topic, handler),
+    toast: services.toast,
+    alert: services.alert,
+    confirm: services.confirm,
+    prompt: services.prompt,
+    data: mount?.data,
+    onSave: mount?.onSave ?? (() => () => {}),
+  };
+}

package/build-browser.mjs

@@ -1,84 +0,0 @@
-// Builds @rainbow-robotics/plugin-ui as browser ESM for the sandbox import map.
-// Output: dist-browser/@rainbow-robotics/plugin-ui/{connect,react,sdk,elements}.js
-//         dist-browser/vendor/react-runtime.js
-//
-// Consumed by:
-//   - nexus (vite plugin emits dist-browser/ → dist/plugin-runtime/)
-//   - preview-host (serves dist-browser/ at /plugin-runtime/)
-//
-// Run: node libraries/plugin-ui/build-browser.mjs
-import { build } from "esbuild";
-import { mkdirSync, rmSync, writeFileSync } from "node:fs";
-import { dirname, resolve } from "node:path";
-import { fileURLToPath } from "node:url";
-
-const here = dirname(fileURLToPath(import.meta.url));
-const src = resolve(here, "src");
-const out = resolve(here, "dist-browser");
-const repoRoot = resolve(here, "../..");
-
-const define = { "process.env.NODE_ENV": JSON.stringify("production") };
-const shared = {
-  bundle: true,
-  format: "esm",
-  platform: "browser",
-  target: "es2020",
-  minify: true,
-  sourcemap: false,
-  define,
-  logLevel: "warning",
-};
-
-rmSync(out, { recursive: true, force: true });
-mkdirSync(resolve(out, "@rainbow-robotics/plugin-ui"), { recursive: true });
-mkdirSync(resolve(out, "vendor"), { recursive: true });
-
-// Plugin-UI entry points (react / react-dom provided by vendor bundle below)
-await build({
-  ...shared,
-  entryPoints: {
-    connect: resolve(src, "connect.ts"),
-    react: resolve(src, "react.tsx"),
-    sdk: resolve(src, "sdk.ts"),
-    elements: resolve(src, "elements.ts"),
-  },
-  outdir: resolve(out, "@rainbow-robotics/plugin-ui"),
-  entryNames: "[name]",
-  chunkNames: "chunks/[name]-[hash]",
-  splitting: true,
-  external: ["react", "react-dom/client"],
-});
-
-// Single vendor bundle: React + ReactDOM (sandbox loads this once via import map)
-const reactShim = `
-  import React from "react";
-  import * as ReactClient from "react-dom/client";
-  import * as JsxRuntime from "react/jsx-runtime";
-  import * as JsxDevRuntime from "react/jsx-dev-runtime";
-  export default React;
-  export const { Children, Fragment, Profiler, StrictMode, Suspense,
-    cloneElement, createContext, createElement, createRef, forwardRef,
-    isValidElement, lazy, memo, startTransition, useCallback, useContext,
-    useDebugValue, useDeferredValue, useEffect, useId, useImperativeHandle,
-    useInsertionEffect, useLayoutEffect, useMemo, useReducer, useRef,
-    useState, useSyncExternalStore, useTransition, version } = React;
-  export const { createRoot, hydrateRoot } = ReactClient;
-  export const { jsx, jsxs } = JsxRuntime;
-  export const { jsxDEV } = JsxDevRuntime;
-`;
-
-await build({
-  ...shared,
-  stdin: { contents: reactShim, resolveDir: repoRoot, loader: "js" },
-  outfile: resolve(out, "vendor", "react-runtime.js"),
-});
-
-// Aliases so all standard React specifiers map to the single vendor file
-for (const name of ["react", "react-jsx-runtime", "react-jsx-dev-runtime", "react-dom-client"]) {
-  writeFileSync(
-    resolve(out, "vendor", `${name}.js`),
-    'export * from "./react-runtime.js"; export { default } from "./react-runtime.js";\n',
-  );
-}
-
-console.log("[plugin-ui] dist-browser ready →", out);

package/dist/connect.d.ts

@@ -1,11 +0,0 @@
-import { type ComponentType } from "react";
-/**
- * Mount a plugin. Call this once from the sandbox entry (content.tsx).
- *
- * @example
- * import { connect } from "@rainbow-robotics/plugin-ui/connect";
- * import App from "./App";
- * connect(App);
- */
-export declare function connect(App: ComponentType): void;
-//# sourceMappingURL=connect.d.ts.map

package/dist/connect.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"connect.d.ts","sourceRoot":"","sources":["../src/connect.ts"],"names":[],"mappings":"AAUA,OAAO,EAAiB,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAe1D;;;;;;;GAOG;AACH,wBAAgB,OAAO,CAAC,GAAG,EAAE,aAAa,GAAG,IAAI,CA4BhD"}

package/dist/connect.js

@@ -1,34 +0,0 @@
-import { RemoteMutationObserver } from "@remote-dom/core/elements";
-import { ThreadWindow } from "@quilted/threads";
-import { createElement } from "react";
-import { createRoot } from "react-dom/client";
-import { defineElements } from "./elements";
-import { RbContext } from "./sdk";
-import { RbWs } from "./ws";
-function connect(App) {
-  defineElements();
-  const host = ThreadWindow.parent.import({
-    targetOrigin: "*"
-  });
-  void host.connect().then(async ({ connection, toast, socketUrl, pluginId }) => {
-    const ws = await RbWs.connect(socketUrl, pluginId);
-    const rb = {
-      pub: (topic, payload) => ws.pub(topic, payload),
-      sub: (topic, handler) => ws.sub(topic, handler),
-      action: (topic, payload) => ws.action(topic, payload),
-      serve: (topic, handler) => ws.serve(topic, handler),
-      toast: (message, type) => toast(message, type)
-    };
-    const root = document.createElement("remote-root");
-    document.body.append(root);
-    const observer = new RemoteMutationObserver(connection);
-    observer.observe(root);
-    createRoot(root).render(
-      createElement(RbContext.Provider, { value: rb }, createElement(App))
-    );
-  });
-}
-export {
-  connect
-};
-//# sourceMappingURL=connect.js.map

package/dist/connect.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/connect.ts"],
-  "sourcesContent": ["/**\n * Sandbox bootstrap \u2014 runs *inside* the plugin iframe.\n *\n * The sandbox initiates the handshake: imports the host's `connect()` and calls\n * it. The host responds with the RemoteConnection, toast(), and Socket.IO config\n * (socketUrl + pluginId). We open a Socket.IO connection and wire up the rb object.\n */\nimport { RemoteMutationObserver } from \"@remote-dom/core/elements\";\nimport type { RemoteConnection } from \"@remote-dom/core\";\nimport { ThreadWindow } from \"@quilted/threads\";\nimport { createElement, type ComponentType } from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport { defineElements } from \"./elements\";\nimport { RbContext, type RbSdk } from \"./sdk\";\nimport { RbWs } from \"./ws\";\n\ninterface HostExports {\n  connect: () => Promise<{\n    connection: RemoteConnection;\n    toast: (message: string, type?: string) => void;\n    socketUrl: string;\n    pluginId: string;\n  }>;\n}\n\n/**\n * Mount a plugin. Call this once from the sandbox entry (content.tsx).\n *\n * @example\n * import { connect } from \"@rainbow-robotics/plugin-ui/connect\";\n * import App from \"./App\";\n * connect(App);\n */\nexport function connect(App: ComponentType): void {\n  defineElements();\n\n  const host = ThreadWindow.parent.import<HostExports>({\n    targetOrigin: \"*\",\n  });\n\n  void host.connect().then(async ({ connection, toast, socketUrl, pluginId }) => {\n    const ws = await RbWs.connect(socketUrl, pluginId);\n\n    const rb: RbSdk = {\n      pub:    (topic, payload) => ws.pub(topic, payload),\n      sub:    (topic, handler) => ws.sub(topic, handler),\n      action: (topic, payload) => ws.action(topic, payload),\n      serve:  (topic, handler) => ws.serve(topic, handler),\n      toast:  (message, type)  => toast(message, type),\n    };\n\n    const root = document.createElement(\"remote-root\");\n    document.body.append(root);\n\n    const observer = new RemoteMutationObserver(connection);\n    observer.observe(root);\n\n    createRoot(root).render(\n      createElement(RbContext.Provider, { value: rb }, createElement(App)),\n    );\n  });\n}\n"],
-  "mappings": "AAOA,SAAS,8BAA8B;AAEvC,SAAS,oBAAoB;AAC7B,SAAS,qBAAyC;AAClD,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,iBAA6B;AACtC,SAAS,YAAY;AAmBd,SAAS,QAAQ,KAA0B;AAChD,iBAAe;AAEf,QAAM,OAAO,aAAa,OAAO,OAAoB;AAAA,IACnD,cAAc;AAAA,EAChB,CAAC;AAED,OAAK,KAAK,QAAQ,EAAE,KAAK,OAAO,EAAE,YAAY,OAAO,WAAW,SAAS,MAAM;AAC7E,UAAM,KAAK,MAAM,KAAK,QAAQ,WAAW,QAAQ;AAEjD,UAAM,KAAY;AAAA,MAChB,KAAQ,CAAC,OAAO,YAAY,GAAG,IAAI,OAAO,OAAO;AAAA,MACjD,KAAQ,CAAC,OAAO,YAAY,GAAG,IAAI,OAAO,OAAO;AAAA,MACjD,QAAQ,CAAC,OAAO,YAAY,GAAG,OAAO,OAAO,OAAO;AAAA,MACpD,OAAQ,CAAC,OAAO,YAAY,GAAG,MAAM,OAAO,OAAO;AAAA,MACnD,OAAQ,CAAC,SAAS,SAAU,MAAM,SAAS,IAAI;AAAA,IACjD;AAEA,UAAM,OAAO,SAAS,cAAc,aAAa;AACjD,aAAS,KAAK,OAAO,IAAI;AAEzB,UAAM,WAAW,IAAI,uBAAuB,UAAU;AACtD,aAAS,QAAQ,IAAI;AAErB,eAAW,IAAI,EAAE;AAAA,MACf,cAAc,UAAU,UAAU,EAAE,OAAO,GAAG,GAAG,cAAc,GAAG,CAAC;AAAA,IACrE;AAAA,EACF,CAAC;AACH;",
-  "names": []
-}