228 lines
7.1 KiB
TypeScript
228 lines
7.1 KiB
TypeScript
/**
|
|
* Shell HTML renderer.
|
|
*
|
|
* 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";
|
|
|
|
export interface ShellOptions {
|
|
/** Page <title> */
|
|
title: string;
|
|
/** Current module ID (highlighted in app switcher) */
|
|
moduleId: string;
|
|
/** Current space slug */
|
|
spaceSlug: string;
|
|
/** Space display name */
|
|
spaceName?: string;
|
|
/** Module HTML content to inject into <main> */
|
|
body: string;
|
|
/** Additional <script type="module"> tags for module-specific JS */
|
|
scripts?: string;
|
|
/** Additional <link>/<style> tags for module-specific CSS */
|
|
styles?: string;
|
|
/** List of available modules (for app switcher) */
|
|
modules: ModuleInfo[];
|
|
/** Theme for the header: 'dark' or 'light' */
|
|
theme?: "dark" | "light";
|
|
/** Extra <head> content (meta tags, preloads, etc.) */
|
|
head?: string;
|
|
}
|
|
|
|
export function renderShell(opts: ShellOptions): string {
|
|
const {
|
|
title,
|
|
moduleId,
|
|
spaceSlug,
|
|
spaceName,
|
|
body,
|
|
scripts = "",
|
|
styles = "",
|
|
modules,
|
|
theme = "dark",
|
|
head = "",
|
|
} = opts;
|
|
|
|
const moduleListJSON = JSON.stringify(modules);
|
|
|
|
return `<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<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">
|
|
${styles}
|
|
${head}
|
|
</head>
|
|
<body data-theme="${theme}">
|
|
<header class="rstack-header" data-theme="${theme}">
|
|
<div class="rstack-header__left">
|
|
<rstack-app-switcher current="${escapeAttr(moduleId)}"></rstack-app-switcher>
|
|
<rstack-space-switcher current="${escapeAttr(spaceSlug)}" name="${escapeAttr(spaceName || spaceSlug)}"></rstack-space-switcher>
|
|
</div>
|
|
<div class="rstack-header__center">
|
|
<rstack-mi></rstack-mi>
|
|
</div>
|
|
<div class="rstack-header__right">
|
|
<rstack-identity></rstack-identity>
|
|
</div>
|
|
</header>
|
|
<div class="rstack-tab-row" data-theme="${theme}">
|
|
<rstack-tab-bar space="${escapeAttr(spaceSlug)}" active="" view-mode="flat"></rstack-tab-bar>
|
|
</div>
|
|
<main id="app">
|
|
${body}
|
|
</main>
|
|
<script type="module">
|
|
import '/shell.js';
|
|
// Provide module list to app switcher
|
|
document.querySelector('rstack-app-switcher')?.setModules(${moduleListJSON});
|
|
|
|
// ── Tab bar / Layer system initialization ──
|
|
const tabBar = document.querySelector('rstack-tab-bar');
|
|
const spaceSlug = '${escapeAttr(spaceSlug)}';
|
|
const currentModuleId = '${escapeAttr(moduleId)}';
|
|
|
|
if (tabBar) {
|
|
// Default layer: current module (bootstrap if no layers saved yet)
|
|
const defaultLayer = {
|
|
id: 'layer-' + currentModuleId,
|
|
moduleId: currentModuleId,
|
|
label: ${JSON.stringify(modules.find((m: any) => m.id === moduleId)?.name || moduleId)},
|
|
order: 0,
|
|
color: '',
|
|
visible: true,
|
|
createdAt: Date.now(),
|
|
};
|
|
|
|
// Set the current module as the active layer
|
|
tabBar.setLayers([defaultLayer]);
|
|
tabBar.setAttribute('active', defaultLayer.id);
|
|
|
|
// Listen for tab events
|
|
tabBar.addEventListener('layer-switch', (e) => {
|
|
const { moduleId } = e.detail;
|
|
window.location.href = '/' + spaceSlug + '/' + moduleId;
|
|
});
|
|
|
|
tabBar.addEventListener('layer-add', (e) => {
|
|
const { moduleId } = e.detail;
|
|
// Navigate to the new module (layer will be persisted when sync connects)
|
|
window.location.href = '/' + spaceSlug + '/' + moduleId;
|
|
});
|
|
|
|
tabBar.addEventListener('layer-close', (e) => {
|
|
const { layerId } = e.detail;
|
|
tabBar.removeLayer(layerId);
|
|
// If we closed the active layer, switch to first remaining
|
|
const remaining = tabBar.querySelectorAll?.('[data-layer-id]');
|
|
// The tab bar handles this internally
|
|
});
|
|
|
|
tabBar.addEventListener('view-toggle', (e) => {
|
|
const { mode } = e.detail;
|
|
// When switching to stack view, emit event for canvas to connect
|
|
document.dispatchEvent(new CustomEvent('layer-view-mode', { detail: { mode } }));
|
|
});
|
|
|
|
// Expose tabBar for CommunitySync integration
|
|
window.__rspaceTabBar = tabBar;
|
|
|
|
// If CommunitySync is available, wire up layer persistence
|
|
document.addEventListener('community-sync-ready', (e) => {
|
|
const sync = e.detail?.sync;
|
|
if (!sync) return;
|
|
|
|
// Load persisted layers
|
|
const layers = sync.getLayers();
|
|
if (layers.length > 0) {
|
|
tabBar.setLayers(layers);
|
|
const activeId = sync.doc.activeLayerId;
|
|
if (activeId) tabBar.setAttribute('active', activeId);
|
|
tabBar.setFlows(sync.getFlows());
|
|
} else {
|
|
// First visit: save the default layer
|
|
sync.addLayer(defaultLayer);
|
|
sync.setActiveLayer(defaultLayer.id);
|
|
}
|
|
|
|
// Sync layer changes back to Automerge
|
|
tabBar.addEventListener('layer-switch', (e) => {
|
|
sync.setActiveLayer(e.detail.layerId);
|
|
});
|
|
|
|
// Listen for remote layer changes
|
|
sync.addEventListener('change', () => {
|
|
tabBar.setLayers(sync.getLayers());
|
|
tabBar.setFlows(sync.getFlows());
|
|
const activeId = sync.doc.activeLayerId;
|
|
if (activeId) tabBar.setAttribute('active', activeId);
|
|
});
|
|
});
|
|
}
|
|
</script>
|
|
${scripts}
|
|
</body>
|
|
</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>`;
|
|
}
|
|
|
|
function escapeHtml(s: string): string {
|
|
return s.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """);
|
|
}
|
|
|
|
function escapeAttr(s: string): string {
|
|
return s.replace(/&/g, "&").replace(/"/g, """).replace(/</g, "<").replace(/>/g, ">");
|
|
}
|