refactor: remove iframe shell — render all modules directly via web components

Every module except canvas was using renderIframeShell() to embed standalone
domains (rdata.online, rwork.online, etc.) via iframe. None of these domains
had independent deployments — they routed back to the same container, causing
infinite redirect loops or 404s.

Now all 22 modules render their web components directly inside renderShell(),
eliminating cross-origin failures, iframe loading spinners, and ~820 lines
of dead code. Standalone domain requests are internally rewritten to module
routes instead of 301 redirecting.

- Remove renderIframeShell(), renderStandaloneShell(), IframeShellOptions
- Remove keepStandalone set; rewrite standalone domains internally
- Convert all module GET / handlers to renderShell + <folk-*> components
- Delete 20 standalone.ts entry points (circular/broken)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-02-25 18:45:41 -08:00
parent a483cbe0af
commit f9bda6c35d
43 changed files with 129 additions and 947 deletions

View File

@ -10,7 +10,7 @@ import { resolve } from "node:path";
import { mkdir, readFile } from "node:fs/promises";
import { randomUUID } from "node:crypto";
import { sql } from "../../shared/db/pool";
import { renderShell, renderIframeShell } from "../../server/shell";
import { renderShell } from "../../server/shell";
import { getModuleInfoList } from "../../shared/module";
import type { RSpaceModule } from "../../shared/module";
import {
@ -204,13 +204,15 @@ routes.get("/api/books/:id/pdf", async (c) => {
// ── Page: Library ──
routes.get("/", (c) => {
const spaceSlug = c.req.param("space") || "personal";
return c.html(renderIframeShell({
return c.html(renderShell({
title: `${spaceSlug} — Library | rSpace`,
moduleId: "books",
spaceSlug,
modules: getModuleInfoList(),
theme: "dark",
standaloneDomain: "rbooks.online",
body: `<folk-book-shelf space-slug="${spaceSlug}"></folk-book-shelf>`,
scripts: `<script type="module" src="/modules/books/folk-book-shelf.js"></script>`,
styles: `<link rel="stylesheet" href="/modules/books/books.css">`,
}));
});

View File

@ -1,71 +0,0 @@
/**
* rBooks standalone server independent deployment at rbooks.online.
*
* Wraps the books module routes in a minimal Hono server with
* standalone shell (just EncryptID identity, no app/space switcher).
*
* Usage: bun run modules/books/standalone.ts
*/
import { Hono } from "hono";
import { cors } from "hono/cors";
import { resolve } from "node:path";
import { booksModule } from "./mod";
import { renderStandaloneShell } from "../../server/shell";
const PORT = Number(process.env.PORT) || 3000;
const DIST_DIR = resolve(import.meta.dir, "../../dist");
const app = new Hono();
app.use("/api/*", cors());
// WebAuthn related origins (passkey sharing with rspace.online)
app.get("/.well-known/webauthn", (c) => {
return c.json(
{ origins: ["https://rspace.online"] },
200,
{ "Access-Control-Allow-Origin": "*", "Cache-Control": "public, max-age=3600" }
);
});
// Mount books module routes at root
app.route("/", booksModule.routes);
// Static asset serving
function getContentType(path: string): string {
if (path.endsWith(".html")) return "text/html";
if (path.endsWith(".js")) return "application/javascript";
if (path.endsWith(".css")) return "text/css";
if (path.endsWith(".json")) return "application/json";
if (path.endsWith(".svg")) return "image/svg+xml";
if (path.endsWith(".png")) return "image/png";
if (path.endsWith(".jpg") || path.endsWith(".jpeg")) return "image/jpeg";
if (path.endsWith(".ico")) return "image/x-icon";
return "application/octet-stream";
}
Bun.serve({
port: PORT,
async fetch(req) {
const url = new URL(req.url);
// Static assets
if (url.pathname !== "/" && !url.pathname.startsWith("/api/")) {
const assetPath = url.pathname.slice(1);
if (assetPath.includes(".")) {
const filePath = resolve(DIST_DIR, assetPath);
const file = Bun.file(filePath);
if (await file.exists()) {
return new Response(file, { headers: { "Content-Type": getContentType(assetPath) } });
}
}
}
// Hono handles all routes
return app.fetch(req);
},
});
console.log(`rBooks standalone server running on http://localhost:${PORT}`);

View File

@ -9,7 +9,7 @@ import { Hono } from "hono";
import { readFileSync } from "node:fs";
import { resolve } from "node:path";
import { sql } from "../../shared/db/pool";
import { renderShell, renderIframeShell } from "../../server/shell";
import { renderShell } from "../../server/shell";
import { getModuleInfoList } from "../../shared/module";
import type { RSpaceModule } from "../../shared/module";
import { verifyEncryptIDToken, extractToken } from "@encryptid/sdk/server";
@ -375,13 +375,15 @@ routes.get("/api/context/:tool", async (c) => {
// ── Page route ──
routes.get("/", (c) => {
const space = c.req.param("space") || "demo";
return c.html(renderIframeShell({
return c.html(renderShell({
title: `${space} — Calendar | rSpace`,
moduleId: "cal",
spaceSlug: space,
modules: getModuleInfoList(),
theme: "dark",
standaloneDomain: "rcal.online",
body: `<folk-calendar-view space="${space}"></folk-calendar-view>`,
scripts: `<script type="module" src="/modules/cal/folk-calendar-view.js"></script>`,
styles: `<link rel="stylesheet" href="/modules/cal/cal.css">`,
}));
});

View File

@ -1,17 +0,0 @@
/**
* Standalone server for the Cal module.
* Serves rcal.online independently.
*/
import { Hono } from "hono";
import { serveStatic } from "hono/bun";
import { calModule } from "./mod";
const app = new Hono();
app.use("/modules/cal/*", serveStatic({ root: "./dist" }));
app.use("/*", serveStatic({ root: "./dist" }));
app.route("/", calModule.routes);
console.log(`[rCal Standalone] Listening on :3000`);
export default { port: 3000, fetch: app.fetch };

View File

@ -10,7 +10,7 @@ import { Hono } from "hono";
import { readFileSync } from "node:fs";
import { resolve } from "node:path";
import { sql } from "../../shared/db/pool";
import { renderShell, renderIframeShell } from "../../server/shell";
import { renderShell } from "../../server/shell";
import { getModuleInfoList } from "../../shared/module";
import { depositOrderRevenue } from "./flow";
import type { RSpaceModule } from "../../shared/module";
@ -441,13 +441,15 @@ routes.post("/api/fulfill/resolve", async (c) => {
// ── Page route: shop ──
routes.get("/", (c) => {
const space = c.req.param("space") || "demo";
return c.html(renderIframeShell({
return c.html(renderShell({
title: `Shop | rSpace`,
moduleId: "cart",
spaceSlug: space,
modules: getModuleInfoList(),
theme: "dark",
standaloneDomain: "rcart.online",
body: `<folk-cart-shop space="${space}"></folk-cart-shop>`,
scripts: `<script type="module" src="/modules/cart/folk-cart-shop.js"></script>`,
styles: `<link rel="stylesheet" href="/modules/cart/cart.css">`,
}));
});

View File

@ -1,58 +0,0 @@
/**
* Cart standalone server independent deployment at rcart.online.
*/
import { Hono } from "hono";
import { cors } from "hono/cors";
import { resolve } from "node:path";
import { cartModule } from "./mod";
const PORT = Number(process.env.PORT) || 3000;
const DIST_DIR = resolve(import.meta.dir, "../../dist");
const app = new Hono();
app.use("/api/*", cors({
origin: "*",
exposeHeaders: ["X-PAYMENT-REQUIRED", "X-PAYMENT-RESPONSE"],
allowHeaders: ["Content-Type", "Authorization", "X-PAYMENT", "X-PAYMENT-RESPONSE"],
}));
app.get("/.well-known/webauthn", (c) => {
return c.json(
{ origins: ["https://rspace.online"] },
200,
{ "Access-Control-Allow-Origin": "*", "Cache-Control": "public, max-age=3600" }
);
});
app.route("/", cartModule.routes);
function getContentType(path: string): string {
if (path.endsWith(".html")) return "text/html";
if (path.endsWith(".js")) return "application/javascript";
if (path.endsWith(".css")) return "text/css";
if (path.endsWith(".json")) return "application/json";
if (path.endsWith(".svg")) return "image/svg+xml";
if (path.endsWith(".png")) return "image/png";
if (path.endsWith(".ico")) return "image/x-icon";
return "application/octet-stream";
}
Bun.serve({
port: PORT,
async fetch(req) {
const url = new URL(req.url);
if (url.pathname !== "/" && !url.pathname.startsWith("/api/")) {
const assetPath = url.pathname.slice(1);
if (assetPath.includes(".")) {
const file = Bun.file(resolve(DIST_DIR, assetPath));
if (await file.exists()) {
return new Response(file, { headers: { "Content-Type": getContentType(assetPath) } });
}
}
}
return app.fetch(req);
},
});
console.log(`rCart standalone server running on http://localhost:${PORT}`);

View File

@ -9,7 +9,7 @@
*/
import { Hono } from "hono";
import { renderShell, renderIframeShell } from "../../server/shell";
import { renderShell } from "../../server/shell";
import type { RSpaceModule } from "../../shared/module";
import { getModuleInfoList } from "../../shared/module";
import { getDocumentData } from "../../server/community-store";
@ -48,13 +48,15 @@ routes.get("/api/choices", async (c) => {
// GET / — choices page
routes.get("/", (c) => {
const spaceSlug = c.req.param("space") || "demo";
return c.html(renderIframeShell({
return c.html(renderShell({
title: `${spaceSlug} — Choices | rSpace`,
moduleId: "choices",
spaceSlug,
modules: getModuleInfoList(),
theme: "dark",
standaloneDomain: "rchoices.online",
body: `<folk-choices-dashboard space="${spaceSlug}"></folk-choices-dashboard>`,
scripts: `<script type="module" src="/modules/choices/folk-choices-dashboard.js"></script>`,
styles: `<link rel="stylesheet" href="/modules/choices/choices.css">`,
}));
});

View File

@ -1,45 +0,0 @@
/**
* Choices standalone server independent deployment at choices.jeffemmett.com.
*/
import { Hono } from "hono";
import { resolve } from "node:path";
import { choicesModule } from "./mod";
const PORT = Number(process.env.PORT) || 3000;
const DIST_DIR = resolve(import.meta.dir, "../../dist");
const app = new Hono();
app.get("/.well-known/webauthn", (c) => {
return c.json(
{ origins: ["https://rspace.online"] },
200,
{ "Access-Control-Allow-Origin": "*", "Cache-Control": "public, max-age=3600" }
);
});
app.route("/", choicesModule.routes);
Bun.serve({
port: PORT,
async fetch(req) {
const url = new URL(req.url);
if (url.pathname !== "/" && !url.pathname.startsWith("/api/")) {
const assetPath = url.pathname.slice(1);
if (assetPath.includes(".")) {
const file = Bun.file(resolve(DIST_DIR, assetPath));
if (await file.exists()) {
const ct = assetPath.endsWith(".js") ? "application/javascript" :
assetPath.endsWith(".css") ? "text/css" :
assetPath.endsWith(".html") ? "text/html" :
"application/octet-stream";
return new Response(file, { headers: { "Content-Type": ct } });
}
}
}
return app.fetch(req);
},
});
console.log(`rChoices standalone server running on http://localhost:${PORT}`);

View File

@ -6,7 +6,7 @@
*/
import { Hono } from "hono";
import { renderShell, renderIframeShell } from "../../server/shell";
import { renderShell } from "../../server/shell";
import { getModuleInfoList } from "../../shared/module";
import type { RSpaceModule } from "../../shared/module";
@ -120,13 +120,15 @@ routes.post("/api/collect", async (c) => {
// ── Page route ──
routes.get("/", (c) => {
const space = c.req.param("space") || "demo";
return c.html(renderIframeShell({
return c.html(renderShell({
title: `${space} — Data | rSpace`,
moduleId: "data",
spaceSlug: space,
modules: getModuleInfoList(),
theme: "dark",
standaloneDomain: "rdata.online",
body: `<folk-analytics-view space="${space}"></folk-analytics-view>`,
scripts: `<script type="module" src="/modules/data/folk-analytics-view.js"></script>`,
styles: `<link rel="stylesheet" href="/modules/data/data.css">`,
}));
});

View File

@ -1,17 +0,0 @@
/**
* Standalone server for the Data module.
* Serves rdata.online independently.
*/
import { Hono } from "hono";
import { serveStatic } from "hono/bun";
import { dataModule } from "./mod";
const app = new Hono();
app.use("/modules/data/*", serveStatic({ root: "./dist" }));
app.use("/*", serveStatic({ root: "./dist" }));
app.route("/", dataModule.routes);
console.log(`[rData Standalone] Listening on :3000`);
export default { port: 3000, fetch: app.fetch };

View File

@ -9,7 +9,7 @@ import { resolve } from "node:path";
import { mkdir, writeFile, unlink } from "node:fs/promises";
import { createHash, randomBytes } from "node:crypto";
import { sql } from "../../shared/db/pool";
import { renderShell, renderIframeShell } from "../../server/shell";
import { renderShell } from "../../server/shell";
import { getModuleInfoList } from "../../shared/module";
import type { RSpaceModule } from "../../shared/module";
import { verifyEncryptIDToken, extractToken } from "@encryptid/sdk/server";
@ -366,13 +366,15 @@ routes.delete("/api/cards/:id", async (c) => {
// ── Page route ──
routes.get("/", (c) => {
const spaceSlug = c.req.param("space") || "demo";
return c.html(renderIframeShell({
return c.html(renderShell({
title: `${spaceSlug} — Files | rSpace`,
moduleId: "files",
spaceSlug,
modules: getModuleInfoList(),
theme: "dark",
standaloneDomain: "rfiles.online",
body: `<folk-file-browser space="${spaceSlug}"></folk-file-browser>`,
scripts: `<script type="module" src="/modules/files/folk-file-browser.js"></script>`,
styles: `<link rel="stylesheet" href="/modules/files/files.css">`,
}));
});

View File

@ -1,23 +0,0 @@
/**
* Standalone server for the Files module.
* Serves rfiles.online independently.
*/
import { Hono } from "hono";
import { serveStatic } from "hono/bun";
import { filesModule } from "./mod";
const app = new Hono();
// Serve static module assets
app.use("/modules/files/*", serveStatic({ root: "./dist" }));
app.use("/*", serveStatic({ root: "./dist" }));
// Mount files routes at root
app.route("/", filesModule.routes);
console.log(`[rFiles Standalone] Listening on :3000`);
export default {
port: 3000,
fetch: app.fetch,
};

View File

@ -7,7 +7,7 @@ import { Hono } from "hono";
import { readFileSync } from "node:fs";
import { resolve } from "node:path";
import { sql } from "../../shared/db/pool";
import { renderShell, renderIframeShell } from "../../server/shell";
import { renderShell } from "../../server/shell";
import { getModuleInfoList } from "../../shared/module";
import { provisionInstance, destroyInstance } from "./lib/provisioner";
import type { RSpaceModule } from "../../shared/module";
@ -157,13 +157,15 @@ routes.get("/api/health", (c) => {
// ── Page route ──
routes.get("/", (c) => {
const spaceSlug = c.req.param("space") || "demo";
return c.html(renderIframeShell({
return c.html(renderShell({
title: `${spaceSlug} — Forum | rSpace`,
moduleId: "forum",
spaceSlug,
modules: getModuleInfoList(),
theme: "dark",
standaloneDomain: "rforum.online",
body: `<folk-forum-dashboard space="${spaceSlug}"></folk-forum-dashboard>`,
scripts: `<script type="module" src="/modules/forum/folk-forum-dashboard.js"></script>`,
styles: `<link rel="stylesheet" href="/modules/forum/forum.css">`,
}));
});

View File

@ -1,23 +0,0 @@
/**
* Standalone server for the Forum module.
* Serves rforum.online independently.
*/
import { Hono } from "hono";
import { serveStatic } from "hono/bun";
import { forumModule } from "./mod";
const app = new Hono();
// Serve static module assets
app.use("/modules/forum/*", serveStatic({ root: "./dist" }));
app.use("/*", serveStatic({ root: "./dist" }));
// Mount forum routes at root
app.route("/", forumModule.routes);
console.log(`[rForum Standalone] Listening on :3000`);
export default {
port: 3000,
fetch: app.fetch,
};

View File

@ -8,7 +8,7 @@ import { Hono } from "hono";
import { readFileSync } from "node:fs";
import { resolve } from "node:path";
import { sql } from "../../shared/db/pool";
import { renderShell, renderIframeShell } from "../../server/shell";
import { renderShell } from "../../server/shell";
import type { RSpaceModule } from "../../shared/module";
import { getModuleInfoList } from "../../shared/module";
import { verifyEncryptIDToken, extractToken } from "@encryptid/sdk/server";
@ -193,16 +193,18 @@ const fundsScripts = `
const fundsStyles = `<link rel="stylesheet" href="/modules/funds/funds.css">`;
// Landing page — iframes the standalone rfunds.online app
// Landing page
routes.get("/", (c) => {
const spaceSlug = c.req.param("space") || "demo";
return c.html(renderIframeShell({
return c.html(renderShell({
title: `rFunds — TBFF Flow Funding | rSpace`,
moduleId: "funds",
spaceSlug,
modules: getModuleInfoList(),
theme: "dark",
standaloneDomain: "rfunds.online",
body: `<folk-funds-app space="${spaceSlug}"></folk-funds-app>`,
scripts: `<script type="module" src="/modules/funds/folk-funds-app.js"></script>`,
styles: `<link rel="stylesheet" href="/modules/funds/funds.css">`,
}));
});

View File

@ -1,45 +0,0 @@
/**
* Funds standalone server independent deployment at rfunds.online.
*/
import { Hono } from "hono";
import { resolve } from "node:path";
import { fundsModule } from "./mod";
const PORT = Number(process.env.PORT) || 3000;
const DIST_DIR = resolve(import.meta.dir, "../../dist");
const app = new Hono();
app.get("/.well-known/webauthn", (c) => {
return c.json(
{ origins: ["https://rspace.online"] },
200,
{ "Access-Control-Allow-Origin": "*", "Cache-Control": "public, max-age=3600" }
);
});
app.route("/", fundsModule.routes);
Bun.serve({
port: PORT,
async fetch(req) {
const url = new URL(req.url);
// Serve static assets (JS, CSS, etc.) from dist/
const assetPath = url.pathname.slice(1);
if (assetPath.includes(".")) {
const file = Bun.file(resolve(DIST_DIR, assetPath));
if (await file.exists()) {
const ct = assetPath.endsWith(".js") ? "application/javascript" :
assetPath.endsWith(".css") ? "text/css" :
assetPath.endsWith(".html") ? "text/html" :
"application/octet-stream";
return new Response(file, { headers: { "Content-Type": ct } });
}
}
// All other routes (/, /demo, /flow/:id, /api/*) handled by Hono
return app.fetch(req);
},
});
console.log(`rFunds standalone server running on http://localhost:${PORT}`);

View File

@ -9,7 +9,7 @@ import { Hono } from "hono";
import { readFileSync } from "node:fs";
import { resolve } from "node:path";
import { sql } from "../../shared/db/pool";
import { renderShell, renderIframeShell } from "../../server/shell";
import { renderShell } from "../../server/shell";
import { getModuleInfoList } from "../../shared/module";
import type { RSpaceModule } from "../../shared/module";
import { verifyEncryptIDToken, extractToken } from "@encryptid/sdk/server";
@ -530,13 +530,15 @@ runSyncLoop();
// ── Page route ──
routes.get("/", (c) => {
const space = c.req.param("space") || "demo";
return c.html(renderIframeShell({
return c.html(renderShell({
title: `${space} — Inbox | rSpace`,
moduleId: "inbox",
spaceSlug: space,
modules: getModuleInfoList(),
theme: "dark",
standaloneDomain: "rinbox.online",
body: `<folk-inbox-client space="${space}"></folk-inbox-client>`,
scripts: `<script type="module" src="/modules/inbox/folk-inbox-client.js"></script>`,
styles: `<link rel="stylesheet" href="/modules/inbox/inbox.css">`,
}));
});

View File

@ -1,17 +0,0 @@
/**
* Standalone server for the Inbox module.
* Serves rinbox.online independently.
*/
import { Hono } from "hono";
import { serveStatic } from "hono/bun";
import { inboxModule } from "./mod";
const app = new Hono();
app.use("/modules/inbox/*", serveStatic({ root: "./dist" }));
app.use("/*", serveStatic({ root: "./dist" }));
app.route("/", inboxModule.routes);
console.log(`[rInbox Standalone] Listening on :3000`);
export default { port: 3000, fetch: app.fetch };

View File

@ -7,7 +7,7 @@
*/
import { Hono } from "hono";
import { renderShell, renderIframeShell } from "../../server/shell";
import { renderShell } from "../../server/shell";
import { getModuleInfoList } from "../../shared/module";
import type { RSpaceModule } from "../../shared/module";
@ -133,13 +133,15 @@ routes.get("/api/c3nav/:event", async (c) => {
// ── Page route ──
routes.get("/", (c) => {
const space = c.req.param("space") || "demo";
return c.html(renderIframeShell({
return c.html(renderShell({
title: `${space} — Maps | rSpace`,
moduleId: "maps",
spaceSlug: space,
modules: getModuleInfoList(),
theme: "dark",
standaloneDomain: "rmaps.online",
body: `<folk-map-viewer space="${space}"></folk-map-viewer>`,
scripts: `<script type="module" src="/modules/maps/folk-map-viewer.js"></script>`,
styles: `<link rel="stylesheet" href="/modules/maps/maps.css">`,
}));
});

View File

@ -1,17 +0,0 @@
/**
* Standalone server for the Maps module.
* Serves rmaps.online independently.
*/
import { Hono } from "hono";
import { serveStatic } from "hono/bun";
import { mapsModule } from "./mod";
const app = new Hono();
app.use("/modules/maps/*", serveStatic({ root: "./dist" }));
app.use("/*", serveStatic({ root: "./dist" }));
app.route("/", mapsModule.routes);
console.log(`[rMaps Standalone] Listening on :3000`);
export default { port: 3000, fetch: app.fetch };

View File

@ -7,7 +7,7 @@
*/
import { Hono } from "hono";
import { renderShell, renderIframeShell } from "../../server/shell";
import { renderShell } from "../../server/shell";
import { getModuleInfoList } from "../../shared/module";
import type { RSpaceModule } from "../../shared/module";
@ -216,13 +216,15 @@ routes.get("/api/workspaces", (c) => {
// ── Page route ──
routes.get("/", (c) => {
const space = c.req.param("space") || "demo";
return c.html(renderIframeShell({
return c.html(renderShell({
title: `${space} — Network | rSpace`,
moduleId: "network",
spaceSlug: space,
modules: getModuleInfoList(),
theme: "dark",
standaloneDomain: "rnetwork.online",
body: `<folk-graph-viewer space="${space}"></folk-graph-viewer>`,
scripts: `<script type="module" src="/modules/network/folk-graph-viewer.js"></script>`,
styles: `<link rel="stylesheet" href="/modules/network/network.css">`,
}));
});

View File

@ -1,17 +0,0 @@
/**
* Standalone server for the Network module.
* Serves rnetwork.online independently.
*/
import { Hono } from "hono";
import { serveStatic } from "hono/bun";
import { networkModule } from "./mod";
const app = new Hono();
app.use("/modules/network/*", serveStatic({ root: "./dist" }));
app.use("/*", serveStatic({ root: "./dist" }));
app.route("/", networkModule.routes);
console.log(`[rNetwork Standalone] Listening on :3000`);
export default { port: 3000, fetch: app.fetch };

View File

@ -9,7 +9,7 @@ import { Hono } from "hono";
import { readFileSync } from "node:fs";
import { resolve } from "node:path";
import { sql } from "../../shared/db/pool";
import { renderShell, renderIframeShell } from "../../server/shell";
import { renderShell } from "../../server/shell";
import { getModuleInfoList } from "../../shared/module";
import type { RSpaceModule } from "../../shared/module";
import { verifyEncryptIDToken, extractToken } from "@encryptid/sdk/server";
@ -361,13 +361,15 @@ routes.delete("/api/notes/:id", async (c) => {
// ── Page route ──
routes.get("/", (c) => {
const space = c.req.param("space") || "demo";
return c.html(renderIframeShell({
return c.html(renderShell({
title: `${space} — Notes | rSpace`,
moduleId: "notes",
spaceSlug: space,
modules: getModuleInfoList(),
theme: "dark",
standaloneDomain: "rnotes.online",
body: `<folk-notes-app space="${space}"></folk-notes-app>`,
scripts: `<script type="module" src="/modules/notes/folk-notes-app.js"></script>`,
styles: `<link rel="stylesheet" href="/modules/notes/notes.css">`,
}));
});

View File

@ -1,17 +0,0 @@
/**
* Standalone server for the Notes module.
* Serves rnotes.online independently.
*/
import { Hono } from "hono";
import { serveStatic } from "hono/bun";
import { notesModule } from "./mod";
const app = new Hono();
app.use("/modules/notes/*", serveStatic({ root: "./dist" }));
app.use("/*", serveStatic({ root: "./dist" }));
app.route("/", notesModule.routes);
console.log(`[rNotes Standalone] Listening on :3000`);
export default { port: 3000, fetch: app.fetch };

View File

@ -7,7 +7,7 @@
*/
import { Hono } from "hono";
import { renderShell, renderIframeShell } from "../../server/shell";
import { renderShell } from "../../server/shell";
import { getModuleInfoList } from "../../shared/module";
import type { RSpaceModule } from "../../shared/module";
@ -108,13 +108,15 @@ routes.get("/api/assets/:id/original", async (c) => {
// ── Page route ──
routes.get("/", (c) => {
const spaceSlug = c.req.param("space") || "demo";
return c.html(renderIframeShell({
return c.html(renderShell({
title: `${spaceSlug} — Photos | rSpace`,
moduleId: "photos",
spaceSlug,
modules: getModuleInfoList(),
theme: "dark",
standaloneDomain: "rphotos.online",
body: `<folk-photo-gallery space="${spaceSlug}"></folk-photo-gallery>`,
scripts: `<script type="module" src="/modules/photos/folk-photo-gallery.js"></script>`,
styles: `<link rel="stylesheet" href="/modules/photos/photos.css">`,
}));
});

View File

@ -9,7 +9,7 @@ import { Hono } from "hono";
import { readFileSync } from "node:fs";
import { resolve } from "node:path";
import { sql } from "../../shared/db/pool";
import { renderShell, renderIframeShell } from "../../server/shell";
import { renderShell } from "../../server/shell";
import { getModuleInfoList } from "../../shared/module";
import type { RSpaceModule } from "../../shared/module";
import { verifyEncryptIDToken, extractToken } from "@encryptid/sdk/server";
@ -348,13 +348,15 @@ routes.delete("/api/providers/:id", async (c) => {
// ── Page route: browse providers ──
routes.get("/", (c) => {
const space = c.req.param("space") || "demo";
return c.html(renderIframeShell({
return c.html(renderShell({
title: `Providers | rSpace`,
moduleId: "providers",
spaceSlug: space,
modules: getModuleInfoList(),
theme: "dark",
standaloneDomain: "providers.mycofi.earth",
body: `<folk-provider-directory space="${space}"></folk-provider-directory>`,
scripts: `<script type="module" src="/modules/providers/folk-provider-directory.js"></script>`,
styles: `<link rel="stylesheet" href="/modules/providers/providers.css">`,
}));
});

View File

@ -1,54 +0,0 @@
/**
* Providers standalone server independent deployment at providers.mycofi.earth.
*/
import { Hono } from "hono";
import { cors } from "hono/cors";
import { resolve } from "node:path";
import { providersModule } from "./mod";
const PORT = Number(process.env.PORT) || 3000;
const DIST_DIR = resolve(import.meta.dir, "../../dist");
const app = new Hono();
app.use("/api/*", cors());
app.get("/.well-known/webauthn", (c) => {
return c.json(
{ origins: ["https://rspace.online"] },
200,
{ "Access-Control-Allow-Origin": "*", "Cache-Control": "public, max-age=3600" }
);
});
app.route("/", providersModule.routes);
function getContentType(path: string): string {
if (path.endsWith(".html")) return "text/html";
if (path.endsWith(".js")) return "application/javascript";
if (path.endsWith(".css")) return "text/css";
if (path.endsWith(".json")) return "application/json";
if (path.endsWith(".svg")) return "image/svg+xml";
if (path.endsWith(".png")) return "image/png";
if (path.endsWith(".ico")) return "image/x-icon";
return "application/octet-stream";
}
Bun.serve({
port: PORT,
async fetch(req) {
const url = new URL(req.url);
if (url.pathname !== "/" && !url.pathname.startsWith("/api/")) {
const assetPath = url.pathname.slice(1);
if (assetPath.includes(".")) {
const file = Bun.file(resolve(DIST_DIR, assetPath));
if (await file.exists()) {
return new Response(file, { headers: { "Content-Type": getContentType(assetPath) } });
}
}
}
return app.fetch(req);
},
});
console.log(`Providers standalone server running on http://localhost:${PORT}`);

View File

@ -13,7 +13,7 @@ import { parseMarkdown } from "./parse-document";
import { compileDocument } from "./typst-compile";
import { getFormat, FORMATS, listFormats } from "./formats";
import type { BookFormat } from "./formats";
import { renderShell, renderIframeShell } from "../../server/shell";
import { renderShell } from "../../server/shell";
import { getModuleInfoList } from "../../shared/module";
import type { RSpaceModule } from "../../shared/module";
@ -321,13 +321,15 @@ routes.get("/api/artifact/:id/pdf", async (c) => {
// ── Page: Editor ──
routes.get("/", (c) => {
const spaceSlug = c.req.param("space") || "personal";
return c.html(renderIframeShell({
return c.html(renderShell({
title: `${spaceSlug} — rPubs Editor | rSpace`,
moduleId: "pubs",
spaceSlug,
modules: getModuleInfoList(),
theme: "dark",
standaloneDomain: "rpubs.online",
body: `<folk-pubs-editor space="${spaceSlug}"></folk-pubs-editor>`,
scripts: `<script type="module" src="/modules/pubs/folk-pubs-editor.js"></script>`,
styles: `<link rel="stylesheet" href="/modules/pubs/pubs.css">`,
}));
});

View File

@ -1,57 +0,0 @@
/**
* rPubs standalone server independent deployment at rpubs.online.
*
* Usage: bun run modules/pubs/standalone.ts
*/
import { Hono } from "hono";
import { cors } from "hono/cors";
import { resolve } from "node:path";
import { pubsModule } from "./mod";
const PORT = Number(process.env.PORT) || 3000;
const DIST_DIR = resolve(import.meta.dir, "../../dist");
const app = new Hono();
app.use("/api/*", cors());
app.get("/.well-known/webauthn", (c) => {
return c.json(
{ origins: ["https://rspace.online"] },
200,
{ "Access-Control-Allow-Origin": "*", "Cache-Control": "public, max-age=3600" }
);
});
app.route("/", pubsModule.routes);
function getContentType(path: string): string {
if (path.endsWith(".html")) return "text/html";
if (path.endsWith(".js")) return "application/javascript";
if (path.endsWith(".css")) return "text/css";
if (path.endsWith(".json")) return "application/json";
if (path.endsWith(".svg")) return "image/svg+xml";
if (path.endsWith(".png")) return "image/png";
if (path.endsWith(".ico")) return "image/x-icon";
return "application/octet-stream";
}
Bun.serve({
port: PORT,
async fetch(req) {
const url = new URL(req.url);
if (url.pathname !== "/" && !url.pathname.startsWith("/api/")) {
const assetPath = url.pathname.slice(1);
if (assetPath.includes(".")) {
const file = Bun.file(resolve(DIST_DIR, assetPath));
if (await file.exists()) {
return new Response(file, { headers: { "Content-Type": getContentType(assetPath) } });
}
}
}
return app.fetch(req);
},
});
console.log(`rPubs standalone server running on http://localhost:${PORT}`);

View File

@ -11,7 +11,7 @@ import { mkdir, writeFile, readFile, readdir, stat } from "node:fs/promises";
import { join } from "node:path";
import { getProduct, PRODUCTS } from "./products";
import { processImage } from "./process-image";
import { renderShell, renderIframeShell } from "../../server/shell";
import { renderShell } from "../../server/shell";
import { getModuleInfoList } from "../../shared/module";
import type { RSpaceModule } from "../../shared/module";
@ -228,13 +228,15 @@ routes.get("/api/artifact/:id", async (c) => {
// ── Page route: swag designer ──
routes.get("/", (c) => {
const space = c.req.param("space") || "demo";
return c.html(renderIframeShell({
return c.html(renderShell({
title: `Swag Designer | rSpace`,
moduleId: "swag",
spaceSlug: space,
modules: getModuleInfoList(),
theme: "dark",
standaloneDomain: "swag.mycofi.earth",
body: `<folk-swag-designer space="${space}"></folk-swag-designer>`,
scripts: `<script type="module" src="/modules/swag/folk-swag-designer.js"></script>`,
styles: `<link rel="stylesheet" href="/modules/swag/swag.css">`,
}));
});

View File

@ -1,54 +0,0 @@
/**
* Swag standalone server independent deployment at swag.mycofi.earth.
*/
import { Hono } from "hono";
import { cors } from "hono/cors";
import { resolve } from "node:path";
import { swagModule } from "./mod";
const PORT = Number(process.env.PORT) || 3000;
const DIST_DIR = resolve(import.meta.dir, "../../dist");
const app = new Hono();
app.use("/api/*", cors());
app.get("/.well-known/webauthn", (c) => {
return c.json(
{ origins: ["https://rspace.online"] },
200,
{ "Access-Control-Allow-Origin": "*", "Cache-Control": "public, max-age=3600" }
);
});
app.route("/", swagModule.routes);
function getContentType(path: string): string {
if (path.endsWith(".html")) return "text/html";
if (path.endsWith(".js")) return "application/javascript";
if (path.endsWith(".css")) return "text/css";
if (path.endsWith(".json")) return "application/json";
if (path.endsWith(".svg")) return "image/svg+xml";
if (path.endsWith(".png")) return "image/png";
if (path.endsWith(".ico")) return "image/x-icon";
return "application/octet-stream";
}
Bun.serve({
port: PORT,
async fetch(req) {
const url = new URL(req.url);
if (url.pathname !== "/" && !url.pathname.startsWith("/api/")) {
const assetPath = url.pathname.slice(1);
if (assetPath.includes(".")) {
const file = Bun.file(resolve(DIST_DIR, assetPath));
if (await file.exists()) {
return new Response(file, { headers: { "Content-Type": getContentType(assetPath) } });
}
}
}
return app.fetch(req);
},
});
console.log(`Swag standalone server running on http://localhost:${PORT}`);

View File

@ -9,7 +9,7 @@ import { Hono } from "hono";
import { readFileSync } from "node:fs";
import { resolve } from "node:path";
import { sql } from "../../shared/db/pool";
import { renderShell, renderIframeShell } from "../../server/shell";
import { renderShell } from "../../server/shell";
import { getModuleInfoList } from "../../shared/module";
import type { RSpaceModule } from "../../shared/module";
import { verifyEncryptIDToken, extractToken } from "@encryptid/sdk/server";
@ -253,13 +253,15 @@ routes.get("/routes", (c) => {
// ── Page route ──
routes.get("/", (c) => {
const space = c.req.param("space") || "demo";
return c.html(renderIframeShell({
return c.html(renderShell({
title: `${space} — Trips | rSpace`,
moduleId: "trips",
spaceSlug: space,
modules: getModuleInfoList(),
theme: "dark",
standaloneDomain: "rtrips.online",
body: `<folk-trips-planner space="${space}"></folk-trips-planner>`,
scripts: `<script type="module" src="/modules/trips/folk-trips-planner.js"></script>`,
styles: `<link rel="stylesheet" href="/modules/trips/trips.css">`,
}));
});

View File

@ -1,17 +0,0 @@
/**
* Standalone server for the Trips module.
* Serves rtrips.online independently.
*/
import { Hono } from "hono";
import { serveStatic } from "hono/bun";
import { tripsModule } from "./mod";
const app = new Hono();
app.use("/modules/trips/*", serveStatic({ root: "./dist" }));
app.use("/*", serveStatic({ root: "./dist" }));
app.route("/", tripsModule.routes);
console.log(`[rTrips Standalone] Listening on :3000`);
export default { port: 3000, fetch: app.fetch };

View File

@ -6,7 +6,7 @@
*/
import { Hono } from "hono";
import { renderShell, renderIframeShell } from "../../server/shell";
import { renderShell } from "../../server/shell";
import { getModuleInfoList } from "../../shared/module";
import type { RSpaceModule } from "../../shared/module";
import { verifyEncryptIDToken, extractToken } from "@encryptid/sdk/server";
@ -191,13 +191,15 @@ routes.get("/api/health", (c) => c.json({ ok: true }));
// ── Page route ──
routes.get("/", (c) => {
const space = c.req.param("space") || "demo";
return c.html(renderIframeShell({
return c.html(renderShell({
title: `${space} — Tube | rSpace`,
moduleId: "tube",
spaceSlug: space,
modules: getModuleInfoList(),
theme: "dark",
standaloneDomain: "rtube.online",
body: `<folk-video-player space="${space}"></folk-video-player>`,
scripts: `<script type="module" src="/modules/tube/folk-video-player.js"></script>`,
styles: `<link rel="stylesheet" href="/modules/tube/tube.css">`,
}));
});

View File

@ -1,17 +0,0 @@
/**
* Standalone server for the Tube module.
* Serves rtube.online independently.
*/
import { Hono } from "hono";
import { serveStatic } from "hono/bun";
import { tubeModule } from "./mod";
const app = new Hono();
app.use("/modules/tube/*", serveStatic({ root: "./dist" }));
app.use("/*", serveStatic({ root: "./dist" }));
app.route("/", tubeModule.routes);
console.log(`[rTube Standalone] Listening on :3000`);
export default { port: 3000, fetch: app.fetch };

View File

@ -9,7 +9,7 @@ import { Hono } from "hono";
import { readFileSync } from "node:fs";
import { resolve } from "node:path";
import { sql } from "../../shared/db/pool";
import { renderShell, renderIframeShell } from "../../server/shell";
import { renderShell } from "../../server/shell";
import { getModuleInfoList } from "../../shared/module";
import type { RSpaceModule } from "../../shared/module";
import { verifyEncryptIDToken, extractToken } from "@encryptid/sdk/server";
@ -327,13 +327,15 @@ routes.post("/api/proposals/:id/final-vote", async (c) => {
// ── Page route ──
routes.get("/", (c) => {
const space = c.req.param("space") || "demo";
return c.html(renderIframeShell({
return c.html(renderShell({
title: `${space} — Vote | rSpace`,
moduleId: "vote",
spaceSlug: space,
modules: getModuleInfoList(),
theme: "dark",
standaloneDomain: "rvote.online",
body: `<folk-vote-dashboard space="${space}"></folk-vote-dashboard>`,
scripts: `<script type="module" src="/modules/vote/folk-vote-dashboard.js"></script>`,
styles: `<link rel="stylesheet" href="/modules/vote/vote.css">`,
}));
});

View File

@ -1,17 +0,0 @@
/**
* Standalone server for the Vote module.
* Serves rvote.online independently.
*/
import { Hono } from "hono";
import { serveStatic } from "hono/bun";
import { voteModule } from "./mod";
const app = new Hono();
app.use("/modules/vote/*", serveStatic({ root: "./dist" }));
app.use("/*", serveStatic({ root: "./dist" }));
app.route("/", voteModule.routes);
console.log(`[rVote Standalone] Listening on :3000`);
export default { port: 3000, fetch: app.fetch };

View File

@ -6,7 +6,7 @@
*/
import { Hono } from "hono";
import { renderShell, renderIframeShell } from "../../server/shell";
import { renderShell } from "../../server/shell";
import { getModuleInfoList } from "../../shared/module";
import type { RSpaceModule } from "../../shared/module";
@ -94,13 +94,15 @@ function getSafePrefix(chainId: string): string | null {
// ── Page route ──
routes.get("/", (c) => {
const spaceSlug = c.req.param("space") || "demo";
return c.html(renderIframeShell({
return c.html(renderShell({
title: `${spaceSlug} — Wallet | rSpace`,
moduleId: "wallet",
spaceSlug,
modules: getModuleInfoList(),
theme: "dark",
standaloneDomain: "rwallet.online",
body: `<folk-wallet-viewer></folk-wallet-viewer>`,
scripts: `<script type="module" src="/modules/wallet/folk-wallet-viewer.js"></script>`,
styles: `<link rel="stylesheet" href="/modules/wallet/wallet.css">`,
}));
});

View File

@ -1,17 +0,0 @@
/**
* Standalone server for the Wallet module.
* Serves rwallet.online independently.
*/
import { Hono } from "hono";
import { serveStatic } from "hono/bun";
import { walletModule } from "./mod";
const app = new Hono();
app.use("/modules/wallet/*", serveStatic({ root: "./dist" }));
app.use("/*", serveStatic({ root: "./dist" }));
app.route("/", walletModule.routes);
console.log(`[rWallet Standalone] Listening on :3000`);
export default { port: 3000, fetch: app.fetch };

View File

@ -9,7 +9,7 @@ import { Hono } from "hono";
import { readFileSync } from "node:fs";
import { resolve } from "node:path";
import { sql } from "../../shared/db/pool";
import { renderShell, renderIframeShell } from "../../server/shell";
import { renderShell } from "../../server/shell";
import { getModuleInfoList } from "../../shared/module";
import type { RSpaceModule } from "../../shared/module";
import { verifyEncryptIDToken, extractToken } from "@encryptid/sdk/server";
@ -217,13 +217,15 @@ routes.get("/api/spaces/:slug/activity", async (c) => {
// ── Page route ──
routes.get("/", (c) => {
const space = c.req.param("space") || "demo";
return c.html(renderIframeShell({
return c.html(renderShell({
title: `${space} — Work | rSpace`,
moduleId: "work",
spaceSlug: space,
modules: getModuleInfoList(),
theme: "dark",
standaloneDomain: "rwork.online",
body: `<folk-work-board space="${space}"></folk-work-board>`,
scripts: `<script type="module" src="/modules/work/folk-work-board.js"></script>`,
styles: `<link rel="stylesheet" href="/modules/work/work.css">`,
}));
});

View File

@ -1,17 +0,0 @@
/**
* Standalone server for the Work module.
* Serves rwork.online independently.
*/
import { Hono } from "hono";
import { serveStatic } from "hono/bun";
import { workModule } from "./mod";
const app = new Hono();
app.use("/modules/work/*", serveStatic({ root: "./dist" }));
app.use("/*", serveStatic({ root: "./dist" }));
app.route("/", workModule.routes);
console.log(`[rWork Standalone] Listening on :3000`);
export default { port: 3000, fetch: app.fetch };

View File

@ -626,14 +626,6 @@ for (const mod of getAllModules()) {
domainToModule.set(mod.standaloneDomain, mod.id);
}
}
// Domains we keep on their own containers (do NOT rewrite)
const keepStandalone = new Set([
"rcart.online",
"rdata.online",
"rfiles.online",
"swag.mycofi.earth",
"providers.mycofi.earth",
]);
// ── Bun.serve: WebSocket + fetch delegation ──
const server = Bun.serve<WSData>({
@ -645,35 +637,19 @@ const server = Bun.serve<WSData>({
const hostClean = host?.split(":")[0] || "";
const subdomain = getSubdomain(host);
// ── Standalone domain → 301 redirect to canonical subdomain URL ──
// ── Standalone domain → internal rewrite to module routes ──
const standaloneModuleId = domainToModule.get(hostClean);
if (standaloneModuleId && !keepStandalone.has(hostClean)) {
// WebSocket: rewrite for backward compat (WS can't follow redirects)
if (url.pathname.startsWith("/ws/")) {
const communitySlug = url.pathname.split("/")[2];
if (communitySlug) {
const spaceConfig = await getSpaceConfig(communitySlug);
const claims = await authenticateWSUpgrade(req);
let readOnly = false;
if (spaceConfig) {
const vis = spaceConfig.visibility;
if (vis === "authenticated" || vis === "members_only") {
if (!claims) return new Response("Authentication required", { status: 401 });
} else if (vis === "public_read") {
readOnly = !claims;
}
}
const peerId = generatePeerId();
const mode = url.searchParams.get("mode") === "json" ? "json" : "automerge";
const upgraded = server.upgrade(req, {
data: { communitySlug, peerId, claims, readOnly, mode } as WSData,
});
if (upgraded) return undefined;
if (standaloneModuleId) {
// Static assets pass through
if (url.pathname !== "/" && !url.pathname.startsWith("/api/") && !url.pathname.startsWith("/ws/")) {
const assetPath = url.pathname.slice(1);
if (assetPath.includes(".")) {
const staticResponse = await serveStatic(assetPath);
if (staticResponse) return staticResponse;
}
return new Response("WebSocket upgrade failed", { status: 400 });
}
// Everything else: 301 redirect to {space}.rspace.online/{moduleId}
// Rewrite path internally: / → /demo/{moduleId}
const pathParts = url.pathname.split("/").filter(Boolean);
let space = "demo";
let suffix = "";
@ -690,8 +666,10 @@ const server = Bun.serve<WSData>({
suffix = url.pathname;
}
const canonical = `https://${space}.rspace.online/${standaloneModuleId}${suffix}${url.search}`;
return Response.redirect(canonical, 301);
const rewrittenPath = `/${space}/${standaloneModuleId}${suffix}`;
const rewrittenUrl = new URL(rewrittenPath + url.search, `http://localhost:${PORT}`);
const rewrittenReq = new Request(rewrittenUrl, req);
return app.fetch(rewrittenReq);
}
// ── WebSocket upgrade ──

View File

@ -3,9 +3,6 @@
*
* Wraps module content in the shared rSpace layout: header with app/space
* switchers + identity, <main> with module content, shell script + styles.
*
* In standalone mode, modules call renderStandaloneShell() which omits the
* app/space switchers and only includes identity.
*/
import type { ModuleInfo } from "../shared/module";
@ -57,6 +54,16 @@ export function renderShell(opts: ShellOptions): string {
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🌌</text></svg>">
<title>${escapeHtml(title)}</title>
<link rel="stylesheet" href="/shell.css">
<style>
/* When loaded inside an iframe (e.g. standalone domain redirecting back),
hide the shell chrome the parent rSpace page already provides it. */
html.rspace-embedded .rstack-header { display: none !important; }
html.rspace-embedded .rstack-tab-row { display: none !important; }
html.rspace-embedded #app { padding-top: 0 !important; }
html.rspace-embedded .rspace-iframe-loading,
html.rspace-embedded .rspace-iframe-error { top: 0 !important; }
</style>
<script>if (window.self !== window.parent) document.documentElement.classList.add('rspace-embedded');</script>
${styles}
${head}
<style>${WELCOME_CSS}</style>
@ -288,52 +295,6 @@ export function renderShell(opts: ShellOptions): string {
</html>`;
}
/** Minimal shell for standalone module deployments (no app/space switcher) */
export function renderStandaloneShell(opts: {
title: string;
body: string;
scripts?: string;
styles?: string;
theme?: "dark" | "light";
head?: string;
}): string {
const { title, body, scripts = "", styles = "", theme = "dark", head = "" } = opts;
return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>${escapeHtml(title)}</title>
<link rel="stylesheet" href="/shell.css">
${styles}
${head}
</head>
<body data-theme="${theme}">
<header class="rstack-header rstack-header--standalone" data-theme="${theme}">
<div class="rstack-header__left">
<a href="/" class="rstack-header__brand">
<span class="rstack-header__brand-gradient">rSpace</span>
</a>
</div>
<div class="rstack-header__center">
<rstack-mi></rstack-mi>
</div>
<div class="rstack-header__right">
<rstack-identity></rstack-identity>
</div>
</header>
<main id="app">
${body}
</main>
<script type="module">
import '/shell.js';
</script>
${scripts}
</body>
</html>`;
}
// ── Welcome overlay (quarter-screen popup for first-time visitors on demo) ──
function renderWelcomeOverlay(): string {
@ -436,188 +397,6 @@ const WELCOME_CSS = `
}
`;
/**
* Shell that embeds a standalone app via iframe.
*
* Wraps the independent app's domain in the shared rSpace header/nav
* so users get the latest code from the standalone repo while preserving
* the unified space/identity experience.
*/
export interface IframeShellOptions extends Omit<ShellOptions, "body" | "scripts" | "styles"> {
/** The standalone app domain, e.g. "rvote.online" */
standaloneDomain: string;
/** Extra path to append after the domain root (default: "") */
path?: string;
}
export function renderIframeShell(opts: IframeShellOptions): string {
const { standaloneDomain, path = "", ...shellOpts } = opts;
const iframeSrc = `https://${standaloneDomain}${path}`;
const moduleName = shellOpts.modules.find(m => m.id === shellOpts.moduleId)?.name || shellOpts.moduleId;
return renderShell({
...shellOpts,
body: `<div id="rspace-iframe-loading" class="rspace-iframe-loading">
<div class="rspace-iframe-loading__spinner"></div>
<p class="rspace-iframe-loading__text">Loading ${escapeHtml(moduleName)}...</p>
</div>
<div id="rspace-iframe-error" class="rspace-iframe-error" style="display:none">
<div class="rspace-iframe-error__icon">&#x26A0;</div>
<h3 class="rspace-iframe-error__title">${escapeHtml(moduleName)} is not available</h3>
<p class="rspace-iframe-error__text">The standalone app at <code>${escapeHtml(standaloneDomain)}</code> didn't respond.</p>
<div class="rspace-iframe-error__actions">
<button onclick="location.reload()" class="rspace-iframe-error__btn">Retry</button>
<a href="https://${escapeAttr(standaloneDomain)}" target="_blank" rel="noopener" class="rspace-iframe-error__btn rspace-iframe-error__btn--secondary">Open directly &rarr;</a>
</div>
</div>
<iframe id="rspace-module-frame"
src="${escapeAttr(iframeSrc)}"
class="rspace-iframe"
allow="camera;microphone;fullscreen;autoplay;clipboard-write;web-share"
loading="lazy"></iframe>`,
styles: `<style>
#app.iframe-layout {
padding-top: 92px;
height: 100vh;
overflow: hidden;
display: flex;
flex-direction: column;
position: relative;
}
.rspace-iframe {
flex: 1;
width: 100%;
border: none;
background: #0a0a0a;
opacity: 0;
transition: opacity 0.3s ease;
}
.rspace-iframe.loaded { opacity: 1; }
.rspace-iframe-loading {
position: absolute;
inset: 92px 0 0 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
background: #0a0a0a;
z-index: 1;
}
.rspace-iframe-loading__spinner {
width: 36px; height: 36px;
border: 3px solid rgba(255,255,255,0.1);
border-top-color: #14b8a6;
border-radius: 50%;
animation: rspace-spin 0.8s linear infinite;
}
@keyframes rspace-spin { to { transform: rotate(360deg); } }
.rspace-iframe-loading__text {
color: #64748b; font-size: 0.9rem; margin: 0;
}
.rspace-iframe-error {
position: absolute;
inset: 92px 0 0 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
background: #0a0a0a;
z-index: 2;
text-align: center;
padding: 24px;
}
.rspace-iframe-error__icon {
font-size: 2.5rem; opacity: 0.5;
}
.rspace-iframe-error__title {
color: #e2e8f0; font-size: 1.1rem; margin: 0;
}
.rspace-iframe-error__text {
color: #64748b; font-size: 0.85rem; margin: 0; max-width: 400px;
}
.rspace-iframe-error__text code {
color: #94a3b8; background: rgba(255,255,255,0.06);
padding: 2px 6px; border-radius: 4px; font-size: 0.82rem;
}
.rspace-iframe-error__actions {
display: flex; gap: 10px; margin-top: 8px;
}
.rspace-iframe-error__btn {
padding: 8px 18px; border-radius: 8px; font-size: 0.82rem;
font-weight: 600; cursor: pointer; border: none;
background: #14b8a6; color: white; text-decoration: none;
transition: opacity 0.15s;
}
.rspace-iframe-error__btn:hover { opacity: 0.85; }
.rspace-iframe-error__btn--secondary {
background: rgba(255,255,255,0.08); color: #94a3b8;
}
</style>`,
scripts: `<script type="module">
document.getElementById('app')?.classList.add('iframe-layout');
const frame = document.getElementById('rspace-module-frame');
const loadingEl = document.getElementById('rspace-iframe-loading');
const errorEl = document.getElementById('rspace-iframe-error');
let loaded = false;
// Timeout: if the iframe hasn't signalled a load after 12s, show error
const timeout = setTimeout(() => {
if (!loaded) {
loadingEl?.remove();
if (errorEl) errorEl.style.display = 'flex';
}
}, 12000);
if (frame) {
frame.addEventListener('load', () => {
loaded = true;
clearTimeout(timeout);
loadingEl?.remove();
errorEl?.remove();
frame.classList.add('loaded');
// Identity bridge: forward EncryptID session to the embedded app
try {
const raw = localStorage.getItem('encryptid_session');
if (raw) {
frame.contentWindow?.postMessage({
type: 'rspace:identity',
session: JSON.parse(raw),
space: '${escapeAttr(shellOpts.spaceSlug)}',
module: '${escapeAttr(shellOpts.moduleId)}',
}, 'https://${escapeAttr(standaloneDomain)}');
}
} catch(e) {}
});
// Also detect load failure via error event
frame.addEventListener('error', () => {
if (!loaded) {
loaded = true;
clearTimeout(timeout);
loadingEl?.remove();
if (errorEl) errorEl.style.display = 'flex';
}
});
// Listen for navigation messages from the iframe
window.addEventListener('message', (e) => {
if (e.origin !== 'https://${escapeAttr(standaloneDomain)}') return;
if (e.data?.type === 'rspace:navigate') {
const { space, module } = e.data;
if (space && module && window.__rspaceNavUrl) {
window.location.href = window.__rspaceNavUrl(space, module);
}
}
});
}
</script>`,
});
}
function escapeHtml(s: string): string {
return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");