@rainbow-robotics/plugin-ui 0.1.2-dev.5 → 0.1.2-dev.50

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

@@ -0,0 +1,204 @@
+/**
+ * Socket.IO communication client for plugin frontends.
+ *
+ * Topics are automatically namespaced to prevent cross-plugin collisions:
+ *   "sensor/data"  →  "{pluginId}/sensor/data"
+ *   "/broadcast/x" →  "broadcast/x"   (leading slash = absolute)
+ *
+ * Browser ←→ Python backend protocol:
+ *   browser emits : sub, unsub, pub, action (with ack), serve_reply
+ *   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;
+}
+
+export type WsSubscriber = WsHandle;
+export type WsQueryable = WsHandle;
+
+function resolveTopic(pluginId: string, topic: string): string {
+  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 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));
+      },
+    );
+
+    // 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 });
+      },
+    );
+  }
+
+  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);
+      };
+      socket.once("connect", onConnect);
+      socket.once("connect_error", onError);
+    });
+  }
+
+  private _key(topic: string): string {
+    return resolveTopic(this._pluginId, topic);
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  async pub<P = any>(topic: string, payload: P): Promise<void> {
+    this._socket.emit("pub", { topic: this._key(topic), payload });
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  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());
+      this._socket.emit("sub", { topic: key });
+    }
+    const h = handler as (payload: unknown) => void;
+    this._subHandlers.get(key)!.add(h);
+    return {
+      undeclare: () => {
+        const set = this._subHandlers.get(key);
+        if (!set) return;
+        set.delete(h);
+        if (set.size === 0) {
+          this._subHandlers.delete(key);
+          this._socket.emit("unsub", { topic: key });
+        }
+      },
+    };
+  }
+
+  // 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, reject) => {
+      this._socket
+        .timeout(10_000)
+        .emit(
+          "action",
+          { topic: this._key(topic), payload },
+          (err: Error | null, result: R) => {
+            if (err) reject(err);
+            else resolve(result);
+          },
+        );
+    });
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  async serve<P = any, R = any>(
+    topic: string,
+    handler: (payload?: P) => R | Promise<R>,
+  ): Promise<WsQueryable> {
+    const key = this._key(topic);
+    this._serveHandlers.set(key, handler as (payload?: unknown) => unknown);
+    this._socket.emit("serve_register", { topic: key });
+    return {
+      undeclare: () => {
+        this._serveHandlers.delete(key);
+        this._socket.emit("serve_unregister", { topic: key });
+      },
+    };
+  }
+
+  close(): void {
+    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,12 +0,0 @@
-import { type ComponentType } from "react";
-/**
- * Mount a plugin. Call this once from the sandbox entry (sandbox.html), passing
- * the plugin's root component.
- *
- * @example
- * import { connect } from "@rainbow-robotics/plugin-ui/connect";
- * import App from "./content";
- * 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":"AAoBA,OAAO,EAAiB,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAc1D;;;;;;;;GAQG;AACH,wBAAgB,OAAO,CAAC,GAAG,EAAE,aAAa,GAAG,IAAI,CAwBhD"}

package/dist/connect.js

@@ -1,29 +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";
-function connect(App) {
-  defineElements();
-  const host = ThreadWindow.parent.import({
-    targetOrigin: "*"
-  });
-  void host.connect().then(({ connection, action, notify }) => {
-    const rb = {
-      action: (id, payload) => Promise.resolve(action(id, payload)),
-      notify: (message, type) => notify(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 (the iframe is the side that knows when it\n * is ready): it imports the host's `connect()` and calls it. The host responds\n * with a `RemoteConnection` (its `receiver.connection`, ferried by\n * @quilted/threads) plus the host SDK. We then render the plugin's React tree\n * into a detached root and let `RemoteMutationObserver` stream every DOM\n * mutation to the host, where the real rb-components live.\n *\n * The child-initiates-handshake pattern is required because @quilted/threads\n * does not buffer a call made before the other side is listening; the host has\n * been listening since it mounted the iframe, so a call *from* the sandbox is\n * always delivered.\n *\n * Verified against @remote-dom/core@1.11.x + @quilted/threads@4.x.\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\";\n\n/** What the host exposes to the sandbox. */\ninterface HostExports {\n  connect: () => Promise<{\n    connection: RemoteConnection;\n    action: (id: string, payload?: unknown) => Promise<unknown> | unknown;\n    notify: (message: string, type?: string) => void;\n  }>;\n}\n\n/**\n * Mount a plugin. Call this once from the sandbox entry (sandbox.html), passing\n * the plugin's root component.\n *\n * @example\n * import { connect } from \"@rainbow-robotics/plugin-ui/connect\";\n * import App from \"./content\";\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(({ connection, action, notify }) => {\n    const rb: RbSdk = {\n      action: (id, payload) => Promise.resolve(action(id, payload)),\n      notify: (message, type) => notify(message, type as string | undefined),\n    };\n\n    const root = document.createElement(\"remote-root\");\n\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": "AAiBA,SAAS,8BAA8B;AAEvC,SAAS,oBAAoB;AAC7B,SAAS,qBAAyC;AAClD,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,iBAA6B;AAoB/B,SAAS,QAAQ,KAA0B;AAChD,iBAAe;AAEf,QAAM,OAAO,aAAa,OAAO,OAAoB;AAAA,IACnD,cAAc;AAAA,EAChB,CAAC;AAED,OAAK,KAAK,QAAQ,EAAE,KAAK,CAAC,EAAE,YAAY,QAAQ,OAAO,MAAM;AAC3D,UAAM,KAAY;AAAA,MAChB,QAAQ,CAAC,IAAI,YAAY,QAAQ,QAAQ,OAAO,IAAI,OAAO,CAAC;AAAA,MAC5D,QAAQ,CAAC,SAAS,SAAS,OAAO,SAAS,IAA0B;AAAA,IACvE;AAEA,UAAM,OAAO,SAAS,cAAc,aAAa;AAEjD,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": []
-}