feat(canvas): move online badge to bottom-right, add solo/multi toggle, move share to header

- Move "N online" badge to bottom-right corner, remove connection status indicator
- People panel opens upward from badge with Solo/Multi mode toggle
- Solo mode hides remote cursors and suppresses presence broadcasting
- Notification toast when others join in solo mode with quick switch button
- Move share button from floating badge to header (share arrow icon beside settings)
- Share panel now drops down from header instead of floating up from bottom
- Mode preference persisted to localStorage

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

lib/presence.ts

@@ -134,6 +134,14 @@ export class PresenceManager extends EventTarget {
 		};
 	}
 
+	/**
+	 * Show or hide all remote cursors (for single/multiplayer toggle)
+	 */
+	setVisible(visible: boolean) {
+		const container = this.#container.querySelector(".presence-cursors") as HTMLElement;
+		if (container) container.style.display = visible ? "" : "none";
+	}
+
 	/**
 	 * Remove a user's presence
 	 */

website/canvas.html

@@ -552,48 +552,7 @@
 			}
 
 			#status {
-				position: fixed;
+				display: none;
-				bottom: 16px;
-				right: 16px;
-				padding: 8px 16px;
-				background: var(--rs-bg-surface);
-				border-radius: 8px;
-				box-shadow: var(--rs-shadow-sm);
-				font-size: 12px;
-				color: var(--rs-text-muted);
-				z-index: 1000;
-				display: flex;
-				align-items: center;
-				gap: 8px;
-			}
-
-			#status .indicator {
-				width: 8px;
-				height: 8px;
-				border-radius: 50%;
-				background: var(--rs-text-muted);
-			}
-
-			#status.connected .indicator {
-				background: #22c55e;
-			}
-
-			#status.disconnected .indicator {
-				background: #ef4444;
-			}
-
-			#status.syncing .indicator {
-				background: #f59e0b;
-				animation: pulse 1s infinite;
-			}
-
-			#status.offline .indicator {
-				background: #f59e0b;
-			}
-
-			#status.offline-empty .indicator {
-				background: #94a3b8;
-				animation: pulse 2s infinite;
 			}
 
 			@keyframes pulse {
@@ -982,38 +941,17 @@
 			}
 
 			/* ── Share badge & panel ── */
-			#share-badge {
+			/* share-badge is now a header icon button — see .rstack-header__share-btn in shell.css overrides below */
-				position: fixed;
-				bottom: 16px;
-				right: 310px;
-				padding: 6px 12px;
-				background: var(--rs-bg-surface);
-				border-radius: 8px;
-				box-shadow: var(--rs-shadow-sm);
-				font-size: 12px;
-				color: var(--rs-text-muted);
-				z-index: 1000;
-				display: flex;
-				align-items: center;
-				gap: 6px;
-				cursor: pointer;
-				user-select: none;
-				transition: box-shadow 0.15s;
-			}
-
-			#share-badge:hover {
-				box-shadow: 0 2px 14px rgba(0, 0, 0, 0.18);
-			}
 
 			#share-panel {
 				position: fixed;
-				bottom: 56px;
+				top: 56px;
-				right: 16px;
+				right: 60px;
 				width: 320px;
 				background: var(--rs-bg-surface);
 				border-radius: 12px;
 				box-shadow: var(--rs-shadow-lg);
-				z-index: 1001;
+				z-index: 10001;
 				display: none;
 				overflow: hidden;
 			}
@@ -1162,7 +1100,7 @@
 			#people-online-badge {
 				position: fixed;
 				bottom: 16px;
-				right: 170px;
+				right: 16px;
 				padding: 6px 12px;
 				background: var(--rs-bg-surface);
 				border-radius: 8px;
@@ -1198,7 +1136,7 @@
 			/* ── People Panel ── */
 			#people-panel {
 				position: fixed;
-				top: 72px;
+				bottom: 56px;
 				right: 16px;
 				width: 280px;
 				max-height: calc(100vh - 120px);
@@ -1279,6 +1217,37 @@
 				font-weight: normal;
 			}
 
+			/* ── Mode toggle (single/multi player) ── */
+			.mode-toggle {
+				display: flex;
+				align-items: center;
+				gap: 0;
+				border: 1px solid var(--rs-input-border);
+				border-radius: 6px;
+				overflow: hidden;
+				flex-shrink: 0;
+			}
+
+			.mode-toggle button {
+				padding: 3px 8px;
+				border: none;
+				background: none;
+				font-size: 11px;
+				color: var(--rs-text-muted);
+				cursor: pointer;
+				transition: background 0.15s, color 0.15s;
+				white-space: nowrap;
+			}
+
+			.mode-toggle button.active {
+				background: var(--rs-accent, #3b82f6);
+				color: #fff;
+			}
+
+			.mode-toggle button:not(.active):hover {
+				background: var(--rs-bg-hover);
+			}
+
 			.people-row .actions-btn {
 				padding: 2px 8px;
 				border: 1px solid var(--rs-input-border);
@@ -1321,6 +1290,48 @@
 				cursor: default;
 			}
 
+			/* ── Multiplayer notification toast ── */
+			#mp-notify {
+				position: fixed;
+				bottom: 56px;
+				right: 16px;
+				padding: 10px 16px;
+				background: var(--rs-bg-surface);
+				border-radius: 10px;
+				box-shadow: var(--rs-shadow-lg);
+				font-size: 12px;
+				color: var(--rs-text-primary);
+				z-index: 1002;
+				display: flex;
+				align-items: center;
+				gap: 10px;
+				transform: translateY(20px);
+				opacity: 0;
+				pointer-events: none;
+				transition: transform 0.25s, opacity 0.25s;
+			}
+
+			#mp-notify.show {
+				transform: translateY(0);
+				opacity: 1;
+				pointer-events: auto;
+			}
+
+			#mp-notify button {
+				padding: 4px 10px;
+				border: 1px solid var(--rs-accent, #3b82f6);
+				border-radius: 6px;
+				background: var(--rs-accent, #3b82f6);
+				color: #fff;
+				font-size: 11px;
+				cursor: pointer;
+				white-space: nowrap;
+			}
+
+			#mp-notify button:hover {
+				filter: brightness(1.1);
+			}
+
 			/* ── Ping toast ── */
 			#ping-toast {
 				position: fixed;
@@ -1368,16 +1379,12 @@
 
 			/* ── Share & People panel mobile ── */
 			@media (max-width: 640px) {
-				#share-badge {
-					right: 220px;
-					bottom: 12px;
-				}
 				#share-panel {
 					width: calc(100vw - 32px);
 					right: 16px;
 				}
 				#people-online-badge {
-					right: 100px;
+					right: 16px;
 					bottom: 12px;
 				}
 				#people-panel {
@@ -2103,6 +2110,7 @@
 			</div>
 			<div class="rstack-header__right">
 				<a class="rstack-header__demo-btn" href="https://demo.rspace.online/rspace">Try Demo</a>
+				<button class="rstack-header__settings-btn" id="share-badge" title="Share this space"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg></button>
 				<button class="rstack-header__settings-btn" id="settings-btn" title="Space Settings"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg></button>
 				<rstack-identity></rstack-identity>
 			</div>
@@ -2403,8 +2411,9 @@
 			<span id="people-badge-text">1 online</span>
 		</div>
 
-		<div id="share-badge" title="Share this space">
+		<div id="mp-notify">
-			<span>🔗</span> Share
+			<span id="mp-notify-text"></span>
+			<button id="mp-notify-switch">Switch to Multiplayer</button>
 		</div>
 
 		<div id="share-panel">
@@ -3151,6 +3160,7 @@
 			const CURSOR_THROTTLE = 50;
 
 			canvas.addEventListener("mousemove", (e) => {
+				if (!isMultiplayer) return; // solo mode — don't broadcast cursor
 				const now = Date.now();
 				if (now - lastCursorUpdate < CURSOR_THROTTLE) return;
 				lastCursorUpdate = now;
@@ -3166,6 +3176,7 @@
 
 			// Handle touch for cursor position on mobile
 			canvas.addEventListener("touchmove", (e) => {
+				if (!isMultiplayer) return; // solo mode — don't broadcast cursor
 				if (e.touches.length !== 1) return;
 
 				const now = Date.now();
@@ -3181,12 +3192,14 @@
 
 			// Handle presence updates from other users
 			sync.addEventListener("presence", (e) => {
-				presence.updatePresence(e.detail);
+				// Always track last cursor for Navigate-to, but only show cursors in multiplayer
-				// Update last cursor for people panel "Navigate to"
 				const pid = e.detail.peerId;
 				if (pid && e.detail.cursor && onlinePeers.has(pid)) {
 					onlinePeers.get(pid).lastCursor = e.detail.cursor;
 				}
+				if (isMultiplayer) {
+					presence.updatePresence(e.detail);
+				}
 			});
 
 			// ── People Online panel ──
@@ -3201,9 +3214,42 @@
 			const pingToast = document.getElementById("ping-toast");
 			const pingToastText = document.getElementById("ping-toast-text");
 			const pingToastGo = document.getElementById("ping-toast-go");
+			const mpNotify = document.getElementById("mp-notify");
+			const mpNotifyText = document.getElementById("mp-notify-text");
+			const mpNotifySwitch = document.getElementById("mp-notify-switch");
 			let pingToastTimer = null;
+			let mpNotifyTimer = null;
 			let openActionsId = null; // which peer's actions dropdown is open
 
+			// ── Single / Multiplayer mode ──
+			let isMultiplayer = localStorage.getItem("rspace-multiplayer") !== "false"; // default true
+
+			function setMultiplayerMode(enabled) {
+				isMultiplayer = enabled;
+				localStorage.setItem("rspace-multiplayer", enabled ? "true" : "false");
+				// Show/hide remote cursors
+				presence.setVisible(enabled);
+				renderPeopleBadge();
+				if (peoplePanel.classList.contains("open")) renderPeoplePanel();
+			}
+
+			mpNotifySwitch.addEventListener("click", () => {
+				setMultiplayerMode(true);
+				mpNotify.classList.remove("show");
+				if (mpNotifyTimer) clearTimeout(mpNotifyTimer);
+			});
+
+			function showMpNotification(username) {
+				if (isMultiplayer) return; // already in multiplayer
+				mpNotifyText.textContent = `${username} is online — switch to multiplayer to collaborate`;
+				mpNotify.classList.add("show");
+				if (mpNotifyTimer) clearTimeout(mpNotifyTimer);
+				mpNotifyTimer = setTimeout(() => mpNotify.classList.remove("show"), 8000);
+			}
+
+			// Apply initial multiplayer visibility
+			if (!isMultiplayer) presence.setVisible(false);
+
 			// Announce ourselves
 			sync.setAnnounceData({ peerId, username: storedUsername, color: localColor });
 
@@ -3231,11 +3277,17 @@
 
 			function renderPeoplePanel() {
 				peopleList.innerHTML = "";
-				// Self row (no actions)
+				// Self row with mode toggle
 				const selfRow = document.createElement("div");
 				selfRow.className = "people-row";
 				selfRow.innerHTML = `<span class="dot" style="background:${escapeHtml(localColor)}"></span>
-					<span class="name">${escapeHtml(storedUsername)} <span class="you-tag">(you)</span></span>`;
+					<span class="name">${escapeHtml(storedUsername)} <span class="you-tag">(you)</span></span>
+					<span class="mode-toggle">
+						<button class="mode-solo ${isMultiplayer ? '' : 'active'}">Solo</button>
+						<button class="mode-multi ${isMultiplayer ? 'active' : ''}">Multi</button>
+					</span>`;
+				selfRow.querySelector(".mode-solo").addEventListener("click", () => setMultiplayerMode(false));
+				selfRow.querySelector(".mode-multi").addEventListener("click", () => setMultiplayerMode(true));
 				peopleList.appendChild(selfRow);
 				// Remote peers
 				for (const [pid, peer] of onlinePeers) {
@@ -3405,6 +3457,8 @@
 					onlinePeers.set(d.peerId, { username: d.username, color: d.color });
 					renderPeopleBadge();
 					if (peoplePanel.classList.contains("open")) renderPeoplePanel();
+					// In single-player mode, notify that someone joined
+					if (!isMultiplayer) showMpNotification(d.username || "Someone");
 				}
 			});