@rainbow-robotics/preview-host 0.1.1

package/README.md

@@ -0,0 +1,44 @@
+# @repo/preview-host
+
+Standalone **mini-Muscat** (nexus) shell for previewing Muscat plugins with **no
+robot and no back end**. Built from `apps/web/nexus` in `plugin-preview` mode.
+
+The shell renders the real Header / LNB / panels and the real `rb-components`,
+loads the developer's plugin via its manifest, and mocks every robot/back-end
+dependency (API-failure toasts suppressed, query retries off, rb static assets
+served locally).
+
+This package is consumed by `muscat-plugin-kit` (`muscat-pk dev:ui`) so external
+plugin developers get a faithful preview without the web-rainbow-ui source.
+
+## Build
+
+```bash
+node build.mjs            # builds nexus (plugin-preview) and assembles ./dist
+node build.mjs --skip-build   # only re-assemble (nexus already built)
+```
+
+`dist/` (git-ignored) is self-contained: the nexus bundle + rb assets
+(`/imgs`, `/fonts`, …) served at their runtime paths.
+
+## Serve
+
+```bash
+rb-preview-host --plugin <built-plugin-dir> [--port 4180] [--dist <dir>]
+```
+
+The plugin dir is the output of `muscat-pk build` and must contain
+`manifest.json`, `sandbox.html`, `content.js` and any `assets/`. It is mounted at
+`/plugin-dev/`; the shell reads it via these globals (injected by `serve.mjs`):
+
+| global | meaning |
+|---|---|
+| `window.__RB_PLUGIN_PREVIEW_HOST__` | enable preview-host mode (mock back end) |
+| `window.__RB_PLUGIN_PREVIEW_BASE__` | base URL of the plugin (default `/plugin-dev`) |
+| `window.__RB_ASSETS_BASE_URL__` | origin for rb static assets |
+
+## How it relates to dev mode
+
+`muscat-pk dev:ui` runs nexus's `vite --mode plugin-preview` directly (HMR), which
+is the same preview-host runtime. This packaged static bundle is the
+distributable form for developers who don't have the monorepo source.

package/build.mjs

@@ -0,0 +1,51 @@
+// Builds the standalone preview-host bundle.
+//
+// 1. Builds nexus in `plugin-preview` mode (standalone mini-Muscat shell with
+//    the preview-host runtime flag baked into index.html).
+// 2. Assembles a self-contained `dist/` here: the nexus bundle plus the rb
+//    static assets (imgs/fonts/...) served at their runtime paths.
+//
+// Run: node libraries/preview-host/build.mjs [--skip-build]
+import { execSync } from "node:child_process";
+import { cpSync, existsSync, mkdirSync, rmSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+// This file lives at <repo>/libraries/preview-host/build.mjs
+const here = dirname(fileURLToPath(import.meta.url));
+const repoRoot = resolve(here, "../..");
+const nexusDir = resolve(repoRoot, "apps/web/nexus");
+const nexusDist = resolve(nexusDir, "dist-preview");
+const assetsPublic = resolve(repoRoot, "apps/web/assets/public");
+const outDir = resolve(here, "dist");
+
+const skipBuild = process.argv.includes("--skip-build");
+
+if (!skipBuild) {
+  console.log("[preview-host] building nexus (plugin-preview)…");
+  execSync("yarn workspace @app/nexus build:preview", {
+    cwd: repoRoot,
+    stdio: "inherit",
+  });
+}
+
+if (!existsSync(nexusDist)) {
+  throw new Error(
+    `nexus preview build not found at ${nexusDist}. Run without --skip-build.`,
+  );
+}
+
+console.log("[preview-host] assembling dist…");
+rmSync(outDir, { recursive: true, force: true });
+mkdirSync(outDir, { recursive: true });
+
+// nexus bundle (index.html + assets/)
+cpSync(nexusDist, outDir, { recursive: true });
+
+// rb static assets served at runtime (/imgs, /fonts, ...)
+for (const dir of ["imgs", "fonts", "models", "sounds", "data"]) {
+  const src = resolve(assetsPublic, dir);
+  if (existsSync(src)) cpSync(src, resolve(outDir, dir), { recursive: true });
+}
+
+console.log("[preview-host] dist ready →", outDir);

package/dist/index.html

@@ -0,0 +1,28 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/png" href="/rainbow-robotics-favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Rainbow Robotics System</title>
+    <script type="module" crossorigin src="/assets/index.C3X9hmTL.js"></script>
+    <link rel="modulepreload" crossorigin href="/assets/__federation_fn_import.Drmbxo5T.js">
+    <link rel="modulepreload" crossorigin href="/assets/index.ChsGqxH_.js">
+    <link rel="modulepreload" crossorigin href="/assets/jsx-runtime.CKZTQYsb.js">
+    <link rel="modulepreload" crossorigin href="/assets/emotion-styled-base.browser.esm.JngGwqgu.js">
+    <link rel="modulepreload" crossorigin href="/assets/_commonjsHelpers.Cpj98o6Y.js">
+    <link rel="modulepreload" crossorigin href="/assets/FactoryMap.CBpf9N92.js">
+    <link rel="modulepreload" crossorigin href="/assets/index.CHuCXVak.js">
+    <link rel="modulepreload" crossorigin href="/assets/index.ayADrA9_.js">
+    <link rel="modulepreload" crossorigin href="/assets/__federation_expose_App.B-7yegU_.js">
+    
+    
+      <script>
+      window.__RB_PLUGIN_PREVIEW_HOST__ = true;
+      window.__RB_ASSETS_BASE_URL__ = window.location.origin;
+    </script>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@rainbow-robotics/preview-host",
+  "version": "0.1.1",
+  "type": "module",
+  "engines": {
+    "node": ">=20"
+  },
+  "description": "Mini-Muscat preview host for Muscat plugin development (devDependency)",
+  "publishConfig": {
+    "access": "public"
+  },
+  "bin": {
+    "rb-preview-host": "./serve.mjs"
+  },
+  "exports": {
+    ".": "./serve.mjs",
+    "./serve": "./serve.mjs",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist/assets",
+    "dist/data",
+    "dist/fonts",
+    "dist/imgs",
+    "dist/index.html",
+    "dist/plugin-demo",
+    "dist/plugin-runtime",
+    "dist/sounds",
+    "*.mjs",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "node build.mjs",
+    "prepack": "node build.mjs"
+  },
+  "dependencies": {
+    "@rainbow-robotics/plugin-ui": "*"
+  }
+}

package/serve.mjs

@@ -0,0 +1,140 @@
+#!/usr/bin/env node
+// Serves the standalone preview-host bundle: the mini-Muscat shell (dist/) plus
+// the developer's built plugin mounted at /plugin-dev/. No robot/back end.
+//
+// Usage:
+//   rb-preview-host --plugin <built-plugin-dir> [--port 4180] [--dist <dir>]
+//
+// The plugin dir must contain manifest.json, sandbox.html, content.js and any
+// assets/ — i.e. the output of `muscat-pk build`.
+import { createServer } from "node:http";
+import { createReadStream, existsSync, readFileSync, statSync } from "node:fs";
+import { createRequire } from "node:module";
+import { dirname, extname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const here = dirname(fileURLToPath(import.meta.url));
+
+function arg(name, fallback) {
+  const i = process.argv.indexOf(`--${name}`);
+  return i !== -1 && process.argv[i + 1] ? process.argv[i + 1] : fallback;
+}
+
+function resolvePluginUiDistBrowser() {
+  try {
+    const req = createRequire(import.meta.url);
+    const pkgPath = req.resolve("@rainbow-robotics/plugin-ui/package.json");
+    return resolve(dirname(pkgPath), "dist-browser");
+  } catch {
+    // fallback for unusual install layouts
+    return resolve(here, "../plugin-ui/dist-browser");
+  }
+}
+
+const port = Number(arg("port", "4180"));
+const distDir = resolve(arg("dist", join(here, "dist")));
+const runtimeDir = resolve(arg("runtime", resolvePluginUiDistBrowser()));
+const pluginDir = arg("plugin", "")
+  ? resolve(arg("plugin", ""))
+  : "";
+const PLUGIN_BASE = "/plugin-dev";
+const RUNTIME_BASE = "/plugin-runtime";
+
+const CONTENT_TYPE = {
+  ".html": "text/html; charset=utf-8",
+  ".js": "text/javascript; charset=utf-8",
+  ".mjs": "text/javascript; charset=utf-8",
+  ".css": "text/css; charset=utf-8",
+  ".json": "application/json; charset=utf-8",
+  ".svg": "image/svg+xml",
+  ".png": "image/png",
+  ".jpg": "image/jpeg",
+  ".jpeg": "image/jpeg",
+  ".webp": "image/webp",
+  ".gif": "image/gif",
+  ".woff": "font/woff",
+  ".woff2": "font/woff2",
+  ".glb": "model/gltf-binary",
+  ".mp3": "audio/mpeg",
+  ".wasm": "application/wasm",
+};
+
+if (!existsSync(distDir)) {
+  console.error(
+    `[preview-host] dist not found at ${distDir}. Run \`node build.mjs\` first.`,
+  );
+  process.exit(1);
+}
+
+// index.html with the preview-host globals injected (host flag + plugin base).
+const indexHtml = readFileSync(join(distDir, "index.html"), "utf8").replace(
+  "</head>",
+  [
+    "    <script>",
+    "      window.__RB_PLUGIN_PREVIEW_HOST__ = true;",
+    "      window.__RB_ASSETS_BASE_URL__ = window.location.origin;",
+    `      window.__RB_PLUGIN_PREVIEW_BASE__ = ${JSON.stringify(PLUGIN_BASE)};`,
+    "    </script>",
+    "  </head>",
+  ].join("\n"),
+);
+
+function sendFile(res, filePath) {
+  res.setHeader("Access-Control-Allow-Origin", "*");
+  const type = CONTENT_TYPE[extname(filePath)];
+  if (type) res.setHeader("Content-Type", type);
+  createReadStream(filePath).pipe(res);
+}
+
+function tryServe(res, baseDir, relPath) {
+  const filePath = resolve(baseDir, `.${relPath}`);
+  if (!filePath.startsWith(baseDir)) return false;
+  if (existsSync(filePath) && statSync(filePath).isFile()) {
+    sendFile(res, filePath);
+    return true;
+  }
+  return false;
+}
+
+const server = createServer((req, res) => {
+  const url = (req.url || "/").split("?")[0];
+
+  // Developer's plugin (sandbox.html, content.js, manifest.json, assets/)
+  if (url.startsWith(PLUGIN_BASE)) {
+    if (!pluginDir) {
+      res.statusCode = 404;
+      res.end("no --plugin dir configured");
+      return;
+    }
+    const rel = url.slice(PLUGIN_BASE.length) || "/";
+    if (tryServe(res, pluginDir, rel)) return;
+    res.statusCode = 404;
+    res.end("plugin asset not found");
+    return;
+  }
+
+  // Host-provided plugin runtime (@rainbow-robotics/plugin-ui, React).
+  if (url.startsWith(RUNTIME_BASE)) {
+    const rel = url.slice(RUNTIME_BASE.length) || "/";
+    if (tryServe(res, runtimeDir, rel)) return;
+    res.statusCode = 404;
+    res.end("plugin runtime asset not found");
+    return;
+  }
+
+  // Static bundle + rb assets
+  if (url !== "/" && tryServe(res, distDir, url)) return;
+
+  // SPA fallback → injected index.html
+  res.setHeader("Content-Type", "text/html; charset=utf-8");
+  res.end(indexHtml);
+});
+
+server.listen(port, () => {
+  console.log(`[preview-host] mini-Muscat → http://localhost:${port}`);
+  console.log(`[preview-host] dist:   ${distDir}`);
+  console.log(`[preview-host] runtime: ${runtimeDir} → ${RUNTIME_BASE}`);
+  console.log(
+    `[preview-host] plugin: ${pluginDir || "(none — pass --plugin <dir>)"} → ${PLUGIN_BASE}`,
+  );
+});