Merge branch 'dev'

shared/components/rstack-space-switcher.ts

@@ -131,8 +131,20 @@ export class RStackSpaceSwitcher extends HTMLElement {
 		return s.name;
 	}
 
+	#demoSpaceHTML(current: string, moduleId: string): string {
+		const isActive = current === "demo";
+		return `
+			<a class="item vis-public ${isActive ? "active" : ""}"
+			   href="${rspaceNavUrl("demo", moduleId)}">
+				<span class="item-icon">🎮</span>
+				<span class="item-name">Demo Space</span>
+				<span class="item-vis vis-public">👁</span>
+			</a>`;
+	}
+
 	#renderMenu(menu: HTMLElement, current: string) {
 		const auth = isAuthenticated();
+		const moduleId = this.#getCurrentModule();
 
 		if (this.#spaces.length === 0) {
 			let cta = "";
@@ -144,6 +156,8 @@ export class RStackSpaceSwitcher extends HTMLElement {
 				cta = this.#yourSpaceCTAhtml(label);
 			}
 			menu.innerHTML = `
+				${this.#demoSpaceHTML(current, moduleId)}
+				<div class="divider"></div>
 				${cta}
 				<div class="divider"></div>
 				<div class="menu-empty">
@@ -157,17 +171,19 @@ export class RStackSpaceSwitcher extends HTMLElement {
 			return;
 		}
 
-		const moduleId = this.#getCurrentModule();
+		// 3-section split — exclude demo from public since we show it separately
-
-		// 3-section split
 		const mySpaces = this.#spaces.filter((s) => s.role);
-		const publicSpaces = this.#spaces.filter((s) => s.accessible !== false && !s.role);
+		const publicSpaces = this.#spaces.filter((s) => s.accessible !== false && !s.role && s.slug !== "demo");
 		const discoverSpaces = this.#spaces.filter((s) => s.accessible === false);
 
 		const hasOwnedSpace = mySpaces.some((s) => s.relationship === "owner");
 
 		let html = "";
 
+		// ── Demo Space — always first ──
+		html += this.#demoSpaceHTML(current, moduleId);
+		html += `<div class="divider"></div>`;
+
 		// ── Create personal space CTA — only if user has no owned spaces ──
 		if (!auth) {
 			html += this.#yourSpaceCTAhtml("Sign in to create →");