From 690e4dedb4c54003410e8a5402883afce02cd996 Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Tue, 31 Mar 2026 10:58:30 -0700
Subject: [PATCH] =?UTF-8?q?refactor:=20consolidate=20space=20settings=20?=
 =?UTF-8?q?=E2=80=94=20both=20gear=20icons=20open=20same=20tabbed=20modal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Remove rstack-space-settings slide-out panel. Enhance the existing tabbed
modal in rstack-space-switcher with add-member (username search + email
invite) and pending email invites (with revoke). Header gear now calls
openSettingsModal() on the space switcher instead of toggling the old panel.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 modules/rspace/mod.ts                         |    1 -
 shared/components/rstack-app-switcher.ts      |   15 +-
 shared/components/rstack-collab-overlay.ts    |    5 +-
 shared/components/rstack-comment-bell.ts      |   11 +-
 shared/components/rstack-identity.ts          |    2 +-
 shared/components/rstack-mi.ts                |   20 +-
 shared/components/rstack-notification-bell.ts |   15 +-
 shared/components/rstack-share-panel.ts       |    4 +-
 shared/components/rstack-space-settings.ts    | 1221 -----------------
 shared/components/rstack-space-switcher.ts    |  404 +++++-
 shared/components/rstack-tab-bar.ts           |   36 +-
 shared/tab-cache.ts                           |    2 +-
 website/canvas.html                           |   18 +-
 website/shell.ts                              |    4 +-
 14 files changed, 416 insertions(+), 1342 deletions(-)
 delete mode 100644 shared/components/rstack-space-settings.ts

diff --git a/modules/rspace/mod.ts b/modules/rspace/mod.ts
index 13fe383..e487e98 100644
--- a/modules/rspace/mod.ts
+++ b/modules/rspace/mod.ts
@@ -85,7 +85,6 @@ function extractCanvasContent(html: string): { body: string; styles: string; scr
 	// space-settings, history-panel, and welcome overlay.
 	bodyContent = bodyContent
 		.replace(/<header[\s\S]*?<\/header>/i, "")
-		.replace(/<rstack-space-settings[^>]*><\/rstack-space-settings>/gi, "")
 		.replace(/<rstack-history-panel[^>]*><\/rstack-history-panel>/gi, "")
 		.replace(/<!--\s*Welcome overlay[\s\S]*?<\/div>\s*<\/div>\s*<\/div>/i, "");
 	// Strip the rstack-tab-row div (nested divs make simple regex unreliable)
diff --git a/shared/components/rstack-app-switcher.ts b/shared/components/rstack-app-switcher.ts
index 382cc46..0ad1613 100644
--- a/shared/components/rstack-app-switcher.ts
+++ b/shared/components/rstack-app-switcher.ts
@@ -132,7 +132,7 @@ export class RStackAppSwitcher extends HTMLElement {
 	#isOpen = false;
 	#catalogOpen = false;
 	#catalogBusy = false;
-	#outsideClickHandler: ((e: MouseEvent) => void) | null = null;
+	#outsideClickHandler: ((e: PointerEvent) => void) | null = null;
 
 	constructor() {
 		super();
@@ -173,7 +173,7 @@ export class RStackAppSwitcher extends HTMLElement {
 		// Clean up body class and outside-click listener on removal
 		document.body.classList.remove("rstack-sidebar-open");
 		if (this.#outsideClickHandler) {
-			document.removeEventListener("click", this.#outsideClickHandler);
+			document.removeEventListener("pointerdown", this.#outsideClickHandler);
 			this.#outsideClickHandler = null;
 		}
 	}
@@ -404,16 +404,16 @@ export class RStackAppSwitcher extends HTMLElement {
 
 		// Close sidebar when clicking outside (on main content)
 		if (this.#outsideClickHandler) {
-			document.removeEventListener("click", this.#outsideClickHandler);
+			document.removeEventListener("pointerdown", this.#outsideClickHandler);
 		}
-		this.#outsideClickHandler = (e: MouseEvent) => {
+		this.#outsideClickHandler = (e: PointerEvent) => {
 			if (!this.#isOpen) return;
 			const path = e.composedPath();
 			if (!path.includes(sidebar) && !path.includes(trigger)) {
 				close();
 			}
 		};
-		document.addEventListener("click", this.#outsideClickHandler);
+		document.addEventListener("pointerdown", this.#outsideClickHandler);
 
 		// Prefetch module fragments on hover for faster tab switching.
 		// Uses low-priority fetch so it doesn't compete with user-initiated requests.
@@ -589,7 +589,7 @@ const STYLES = `
   white-space: nowrap; min-width: 0; flex-shrink: 1;
   overflow: hidden; text-overflow: ellipsis;
 }
-.trigger:hover { background: var(--rs-bg-hover); }
+.trigger:hover, .trigger:active { background: var(--rs-bg-hover); }
 
 .trigger-badge {
   display: inline-flex; align-items: center; justify-content: center;
@@ -609,6 +609,7 @@ const STYLES = `
   top: 56px; left: 0; bottom: 0;
   width: 280px;
   overflow-y: auto;
+  touch-action: pan-y;
   z-index: 10001;
   background: var(--rs-bg-surface);
   border-right: 1px solid var(--rs-border);
@@ -675,7 +676,7 @@ a.rstack-header:hover { background: var(--rs-bg-hover); }
   transition: background 0.12s;
   color: var(--rs-text-primary);
 }
-.item-row:hover { background: var(--rs-bg-hover); }
+.item-row:hover, .item-row:active { background: var(--rs-bg-hover); }
 .item-row.active { background: var(--rs-bg-active); }
 
 .item {
diff --git a/shared/components/rstack-collab-overlay.ts b/shared/components/rstack-collab-overlay.ts
index 462e826..3152ffd 100644
--- a/shared/components/rstack-collab-overlay.ts
+++ b/shared/components/rstack-collab-overlay.ts
@@ -862,7 +862,7 @@ const OVERLAY_CSS = `
 		white-space: nowrap;
 	}
 
-	.collab-badge:hover {
+	.collab-badge:hover, .collab-badge:active {
 		border-color: var(--rs-border-strong, rgba(255,255,255,0.2));
 	}
 
@@ -938,6 +938,7 @@ const OVERLAY_CSS = `
 
 	.people-list {
 		overflow-y: auto;
+		touch-action: pan-y;
 		flex: 1;
 		padding: 8px;
 	}
@@ -959,7 +960,7 @@ const OVERLAY_CSS = `
 		transition: background 0.15s;
 	}
 
-	.people-row:hover {
+	.people-row:hover, .people-row:active {
 		background: var(--rs-bg-hover, rgba(0,0,0,0.04));
 	}
 
diff --git a/shared/components/rstack-comment-bell.ts b/shared/components/rstack-comment-bell.ts
index 455c099..a85c23d 100644
--- a/shared/components/rstack-comment-bell.ts
+++ b/shared/components/rstack-comment-bell.ts
@@ -213,10 +213,10 @@ export class RStackCommentBell extends HTMLElement {
           this.#render();
         }
       };
-      document.addEventListener("click", closeHandler, { once: true });
+      document.addEventListener("pointerdown", closeHandler, { once: true });
 
       // Stop propagation from panel clicks
-      this.#shadow.querySelector(".panel")?.addEventListener("click", (e) => e.stopPropagation());
+      this.#shadow.querySelector(".panel")?.addEventListener("pointerdown", (e) => e.stopPropagation());
     }
 
     // New Comment button
@@ -291,7 +291,7 @@ const STYLES = `
   justify-content: center;
   transition: color 0.15s, background 0.15s;
 }
-.comment-btn:hover {
+.comment-btn:hover, .comment-btn:active {
   color: var(--rs-text-primary, #e2e8f0);
   background: var(--rs-bg-hover, rgba(255,255,255,0.05));
 }
@@ -364,13 +364,14 @@ const STYLES = `
   cursor: pointer;
   transition: opacity 0.15s;
 }
-.new-comment-btn:hover {
+.new-comment-btn:hover, .new-comment-btn:active {
   opacity: 0.85;
 }
 
 .panel-body {
   flex: 1;
   overflow-y: auto;
+  touch-action: pan-y;
 }
 
 .panel-empty {
@@ -389,7 +390,7 @@ const STYLES = `
   transition: background 0.15s;
   border-bottom: 1px solid var(--rs-border, rgba(255,255,255,0.06));
 }
-.comment-item:hover {
+.comment-item:hover, .comment-item:active {
   background: var(--rs-bg-hover, rgba(255,255,255,0.05));
 }
 .comment-item:last-child {
diff --git a/shared/components/rstack-identity.ts b/shared/components/rstack-identity.ts
index 42f8750..4a2fb15 100644
--- a/shared/components/rstack-identity.ts
+++ b/shared/components/rstack-identity.ts
@@ -684,7 +684,7 @@ export class RStackIdentity extends HTMLElement {
 				dropdown.classList.toggle("open");
 			});
 
-			document.addEventListener("click", () => dropdown.classList.remove("open"));
+			document.addEventListener("pointerdown", () => dropdown.classList.remove("open"));
 
 			this.#shadow.querySelectorAll("[data-action]").forEach((el) => {
 				el.addEventListener("click", (e) => {
diff --git a/shared/components/rstack-mi.ts b/shared/components/rstack-mi.ts
index 44001a1..d5f8b6b 100644
--- a/shared/components/rstack-mi.ts
+++ b/shared/components/rstack-mi.ts
@@ -249,7 +249,7 @@ export class RStackMi extends HTMLElement {
 		});
 
 		// Close panel on outside click — use composedPath to pierce Shadow DOM
-		document.addEventListener("click", (e) => {
+		document.addEventListener("pointerdown", (e) => {
 			const path = e.composedPath();
 			if (!path.includes(this)) {
 				panel.classList.remove("open");
@@ -258,8 +258,8 @@ export class RStackMi extends HTMLElement {
 		});
 
 		// Prevent internal clicks from closing
-		panel.addEventListener("mousedown", (e) => e.stopPropagation());
-		bar.addEventListener("mousedown", (e) => e.stopPropagation());
+		panel.addEventListener("pointerdown", (e) => e.stopPropagation());
+		bar.addEventListener("pointerdown", (e) => e.stopPropagation());
 
 		// Minimize button
 		this.#shadow.getElementById("mi-minimize")!.addEventListener("click", () => this.#minimize());
@@ -855,7 +855,7 @@ const STYLES = `
   font-size: 0.85rem; border-radius: 6px; transition: all 0.2s;
   flex-shrink: 0; line-height: 1;
 }
-.mi-mic-btn:hover { background: var(--rs-bg-hover); }
+.mi-mic-btn:hover, .mi-mic-btn:active { background: var(--rs-bg-hover); }
 .mi-mic-btn.recording {
   animation: micPulse 1.5s infinite;
   filter: saturate(2) brightness(1.1);
@@ -907,7 +907,7 @@ const STYLES = `
   font-size: 1.1rem; line-height: 1; padding: 2px 6px; border-radius: 4px;
   color: var(--rs-text-muted); transition: all 0.15s;
 }
-.mi-panel-btn:hover { background: var(--rs-bg-hover); color: var(--rs-text-primary); }
+.mi-panel-btn:hover, .mi-panel-btn:active { background: var(--rs-bg-hover); color: var(--rs-text-primary); }
 
 /* ── Messages ── */
 .mi-messages {
@@ -935,7 +935,7 @@ const STYLES = `
   font-family: inherit; white-space: nowrap;
   background: var(--rs-btn-secondary-bg); color: var(--rs-text-primary);
 }
-.mi-suggest-chip:hover {
+.mi-suggest-chip:hover, .mi-suggest-chip:active {
   background: var(--rs-bg-hover);
   border-color: rgba(6,182,212,0.4);
   box-shadow: 0 0 0 1px rgba(6,182,212,0.15);
@@ -943,7 +943,7 @@ const STYLES = `
 .mi-suggest-chip.dynamic {
   border-color: rgba(124,58,237,0.3);
 }
-.mi-suggest-chip.dynamic:hover {
+.mi-suggest-chip.dynamic:hover, .mi-suggest-chip.dynamic:active {
   border-color: rgba(124,58,237,0.5);
   box-shadow: 0 0 0 1px rgba(124,58,237,0.15);
 }
@@ -1022,7 +1022,7 @@ const STYLES = `
   font-family: inherit;
   background: var(--rs-btn-secondary-bg); color: var(--rs-text-primary);
 }
-.mi-tool-chip:hover { background: var(--rs-bg-hover); }
+.mi-tool-chip:hover, .mi-tool-chip:active { background: var(--rs-bg-hover); }
 
 /* ── Confirmation bar ── */
 .mi-confirm {
@@ -1080,7 +1080,7 @@ const STYLES = `
   font-size: 0.9rem; padding: 4px 8px; border-radius: 6px;
   color: #06b6d4; transition: all 0.15s; flex-shrink: 0;
 }
-.mi-send-btn:hover { background: rgba(6,182,212,0.12); }
+.mi-send-btn:hover, .mi-send-btn:active { background: rgba(6,182,212,0.12); }
 
 /* ── Minimized pill ── */
 .mi-pill {
@@ -1092,7 +1092,7 @@ const STYLES = `
   display: none; align-items: center; gap: 6px;
   color: var(--rs-text-primary); transition: all 0.2s;
 }
-.mi-pill:hover { box-shadow: 0 4px 20px rgba(6,182,212,0.3); }
+.mi-pill:hover, .mi-pill:active { box-shadow: 0 4px 20px rgba(6,182,212,0.3); }
 .mi-pill.visible { display: flex; }
 .mi-pill-icon {
   background: linear-gradient(135deg, #06b6d4, #7c3aed);
diff --git a/shared/components/rstack-notification-bell.ts b/shared/components/rstack-notification-bell.ts
index d60dac1..2222e15 100644
--- a/shared/components/rstack-notification-bell.ts
+++ b/shared/components/rstack-notification-bell.ts
@@ -428,10 +428,10 @@ export class RStackNotificationBell extends HTMLElement {
         this.#render();
       }
     };
-    document.addEventListener("click", closeHandler, { once: true });
+    document.addEventListener("pointerdown", closeHandler, { once: true });
 
     // Stop propagation from panel clicks
-    this.#shadow.querySelector(".panel")?.addEventListener("click", (e) => e.stopPropagation());
+    this.#shadow.querySelector(".panel")?.addEventListener("pointerdown", (e) => e.stopPropagation());
 
     // Mark all read
     this.#shadow.querySelector('[data-action="mark-all-read"]')?.addEventListener("click", (e) => {
@@ -520,7 +520,7 @@ const STYLES = `
   justify-content: center;
   transition: color 0.15s, background 0.15s;
 }
-.bell-btn:hover {
+.bell-btn:hover, .bell-btn:active {
   color: var(--rs-text-primary, #e2e8f0);
   background: var(--rs-bg-hover, rgba(255,255,255,0.05));
 }
@@ -552,6 +552,7 @@ const STYLES = `
   width: 360px;
   max-height: 480px;
   overflow-y: auto;
+  touch-action: pan-y;
   border-radius: 10px;
   background: var(--rs-bg-surface, #1e293b);
   border: 1px solid var(--rs-border, rgba(255,255,255,0.1));
@@ -589,7 +590,7 @@ const STYLES = `
   border-radius: 4px;
   transition: background 0.15s;
 }
-.mark-all-btn:hover, .push-btn:hover {
+.mark-all-btn:hover, .push-btn:hover, .mark-all-btn:active, .push-btn:active {
   background: var(--rs-bg-hover, rgba(255,255,255,0.05));
 }
 
@@ -614,7 +615,7 @@ const STYLES = `
   transition: background 0.15s;
   border-bottom: 1px solid var(--rs-border, rgba(255,255,255,0.1));
 }
-.notif-item:hover {
+.notif-item:hover, .notif-item:active {
   background: var(--rs-bg-hover, rgba(255,255,255,0.05));
 }
 .notif-item.unread {
@@ -687,7 +688,7 @@ const STYLES = `
   border: 1px solid var(--rs-border, rgba(255,255,255,0.15));
   color: var(--rs-text-muted, #94a3b8);
 }
-.notif-accept:hover, .notif-decline:hover {
+.notif-accept:hover, .notif-decline:hover, .notif-accept:active, .notif-decline:active {
   opacity: 0.85;
 }
 
@@ -706,7 +707,7 @@ const STYLES = `
 .notif-item:hover .notif-dismiss {
   opacity: 1;
 }
-.notif-dismiss:hover {
+.notif-dismiss:hover, .notif-dismiss:active {
   color: var(--rs-text-primary, #e2e8f0);
 }
 
diff --git a/shared/components/rstack-share-panel.ts b/shared/components/rstack-share-panel.ts
index 73d5c18..34d4dbf 100644
--- a/shared/components/rstack-share-panel.ts
+++ b/shared/components/rstack-share-panel.ts
@@ -167,11 +167,11 @@ export class RStackSharePanel extends HTMLElement {
     });
 
     // Stop propagation from panel clicks
-    this.#shadow.querySelector(".panel")?.addEventListener("click", (e) => e.stopPropagation());
+    this.#shadow.querySelector(".panel")?.addEventListener("pointerdown", (e) => e.stopPropagation());
 
     // Close on outside click
     if (this.#open) {
-      document.addEventListener("click", () => {
+      document.addEventListener("pointerdown", () => {
         if (this.#open) {
           this.#open = false;
           this.#render();
diff --git a/shared/components/rstack-space-settings.ts b/shared/components/rstack-space-settings.ts
deleted file mode 100644
index c60788a..0000000
--- a/shared/components/rstack-space-settings.ts
+++ /dev/null
@@ -1,1221 +0,0 @@
-/**
- * <rstack-space-settings> — Space settings slide-out panel.
- *
- * Shows members list, add member (by username or email), pending invites.
- * Only admins/owners see the full panel; others see a read-only member list.
- */
-
-const SESSION_KEY = "encryptid_session";
-
-interface MemberInfo {
-	did: string;
-	role: string;
-	displayName?: string;
-	joinedAt?: number;
-}
-
-interface SettingField {
-	key: string;
-	label: string;
-	type: string;
-	description?: string;
-	default?: string | boolean;
-	options?: Array<{ value: string; label: string }>;
-}
-
-interface ModuleConfig {
-	id: string;
-	name: string;
-	icon: string;
-	settingsSchema?: SettingField[];
-	settings?: Record<string, string | boolean>;
-}
-
-function getSession(): { accessToken: string; claims: { sub: string; username?: string } } | null {
-	try {
-		const raw = localStorage.getItem(SESSION_KEY);
-		if (!raw) return null;
-		return JSON.parse(raw);
-	} catch { return null; }
-}
-
-function getToken(): string | null {
-	return getSession()?.accessToken || null;
-}
-
-export class RStackSpaceSettings extends HTMLElement {
-	private _open = false;
-	private _space = "";
-	private _members: MemberInfo[] = [];
-	private _ownerDID = "";
-	private _myRole: string = "viewer";
-	private _isOwner = false;
-	private _invites: any[] = [];
-	private _addMode: "username" | "email" = "username";
-	private _lookupResult: { did: string; username: string; displayName: string } | null = null;
-	private _lookupError = "";
-	private _searchResults: { id: string; did: string; username: string; displayName: string }[] = [];
-	private _moduleId = "";
-	private _moduleConfig: ModuleConfig | null = null;
-	private _moduleSettingsValues: Record<string, string | boolean> = {};
-	private _moduleSaveError = "";
-	private _moduleSaving = false;
-	private _visibility: "public" | "permissioned" | "private" = "public";
-	private _description = "";
-	private _spaceName = "";
-	private _spaceSaving = false;
-	private _spaceSaveMsg = "";
-
-	static define() {
-		if (!customElements.get("rstack-space-settings")) {
-			customElements.define("rstack-space-settings", RStackSpaceSettings);
-		}
-	}
-
-	static get observedAttributes() { return ["space", "module-id"]; }
-
-	attributeChangedCallback(name: string, _old: string, val: string) {
-		if (name === "space") this._space = val;
-		else if (name === "module-id") {
-			this._moduleId = val || "";
-			// Reload module config if panel is open
-			if (this._open) this._loadModuleConfig();
-		}
-	}
-
-	private _clickOutsideHandler = (e: MouseEvent) => {
-		const path = e.composedPath();
-		if (!path.includes(this) && !path.includes(document.getElementById("settings-btn")!)) {
-			this.close();
-		}
-	};
-
-	connectedCallback() {
-		this._space = this.getAttribute("space") || "";
-		this._moduleId = this.getAttribute("module-id") || "";
-		if (!this.shadowRoot) this.attachShadow({ mode: "open" });
-		this._render();
-	}
-
-	disconnectedCallback() {
-		document.removeEventListener("click", this._clickOutsideHandler, true);
-	}
-
-	open() {
-		this._open = true;
-		this._loadData();
-		this._loadModuleConfig();
-		this._render();
-		this._positionPanel();
-		document.addEventListener("click", this._clickOutsideHandler, true);
-	}
-
-	close() {
-		this._open = false;
-		this._render();
-		document.removeEventListener("click", this._clickOutsideHandler, true);
-	}
-
-	toggle() {
-		if (this._open) this.close(); else this.open();
-	}
-
-	/** Position the panel below the settings button, clamped to viewport. */
-	private _positionPanel() {
-		const panel = this.shadowRoot?.querySelector(".panel") as HTMLElement | null;
-		const btn = document.getElementById("settings-btn");
-		if (!panel || !btn) return;
-		const rect = btn.getBoundingClientRect();
-		const panelWidth = Math.min(380, window.innerWidth * 0.9);
-		const topPos = rect.bottom + 6;
-		// Align panel's left edge with the button, but clamp so it stays on screen
-		let left = rect.left;
-		if (left + panelWidth > window.innerWidth - 8) {
-			left = window.innerWidth - panelWidth - 8;
-		}
-		if (left < 8) left = 8;
-		panel.style.top = `${topPos}px`;
-		panel.style.left = `${left}px`;
-		panel.style.right = "auto";
-		// Clamp max-height so panel never overflows bottom of viewport
-		panel.style.maxHeight = `${window.innerHeight - topPos - 8}px`;
-	}
-
-	private async _loadData() {
-		if (!this._space) return;
-
-		const session = getSession();
-		const token = getToken();
-
-		// Load community data from WS-synced doc (via global)
-		const sync = (window as any).__communitySync;
-		if (sync?.doc) {
-			const data = sync.doc;
-			this._ownerDID = data.meta?.ownerDID || "";
-			this._members = [];
-			if (data.members) {
-				for (const [did, m] of Object.entries(data.members)) {
-					const member = m as MemberInfo;
-					this._members.push({ did, role: member.role, displayName: member.displayName, joinedAt: member.joinedAt });
-				}
-			}
-		} else {
-			// Fallback: fetch from API
-			// On subdomain routing (jeff.rspace.online), omit space prefix to avoid double-prefix
-			const host = window.location.hostname;
-			const isSubdomain = host.split(".").length >= 3 && !host.startsWith("www.");
-			const metaUrl = isSubdomain ? "/rspace/api/meta" : `/${this._space}/rspace/api/meta`;
-			try {
-				const res = await fetch(metaUrl, {
-					headers: token ? { "Authorization": `Bearer ${token}` } : {},
-				});
-				if (res.ok) {
-					const json = await res.json();
-					this._ownerDID = json.meta?.ownerDID || "";
-					if (json.meta?.members) {
-						this._members = [];
-						for (const [did, m] of Object.entries(json.meta.members)) {
-							const member = m as MemberInfo;
-							this._members.push({ did, role: member.role, displayName: member.displayName });
-						}
-					}
-				}
-			} catch {}
-		}
-
-		// Resolve displayNames from EncryptID for all members + owner
-		const allDids = [...new Set([
-			...this._members.map(m => m.did),
-			...(this._ownerDID ? [this._ownerDID] : []),
-		])];
-		if (allDids.length) {
-			try {
-				const res = await fetch("/api/users/resolve-dids", {
-					method: "POST",
-					headers: { "Content-Type": "application/json" },
-					body: JSON.stringify({ dids: allDids }),
-				});
-				if (res.ok) {
-					const resolved = await res.json() as Record<string, { username: string; displayName: string }>;
-					for (const m of this._members) {
-						// Match by did or by id (members may be stored as userId)
-						const info = resolved[m.did];
-						if (info) {
-							m.displayName = info.displayName || info.username;
-						}
-					}
-				}
-			} catch {}
-		}
-
-		// Determine my role
-		if (session?.claims?.sub) {
-			this._isOwner = session.claims.sub === this._ownerDID;
-			const myMember = this._members.find(m => m.did === session.claims.sub);
-			this._myRole = this._isOwner ? "admin" : (myMember?.role || "viewer");
-		}
-
-		// Load space metadata (visibility, description)
-		if (this._isAdmin && token) {
-			try {
-				const res = await fetch(`/api/spaces/${encodeURIComponent(this._space)}`, {
-					headers: { "Authorization": `Bearer ${token}` },
-				});
-				if (res.ok) {
-					const info = await res.json();
-					this._visibility = info.visibility || "public";
-					this._description = info.description || "";
-					this._spaceName = info.name || this._space;
-				}
-			} catch {}
-		}
-
-		// Load invites (admin only)
-		if (this._isAdmin && token) {
-			try {
-				const res = await fetch(`/api/spaces/${this._space}/invites`, {
-					headers: { "Authorization": `Bearer ${token}` },
-				});
-				if (res.ok) {
-					const json = await res.json();
-					this._invites = json.invites || [];
-				}
-			} catch {}
-		}
-
-		this._render();
-	}
-
-	private async _loadModuleConfig() {
-		if (!this._space || !this._moduleId) {
-			this._moduleConfig = null;
-			return;
-		}
-
-		const token = getToken();
-		try {
-			const res = await fetch(`/api/spaces/${encodeURIComponent(this._space)}/modules`, {
-				headers: token ? { Authorization: `Bearer ${token}` } : {},
-			});
-			if (!res.ok) return;
-			const data = await res.json();
-			const mod: ModuleConfig | undefined = (data.modules || []).find((m: ModuleConfig) => m.id === this._moduleId);
-			if (mod?.settingsSchema && mod.settingsSchema.length > 0) {
-				this._moduleConfig = mod;
-				this._moduleSettingsValues = {};
-				for (const field of mod.settingsSchema) {
-					this._moduleSettingsValues[field.key] = mod.settings?.[field.key] ?? field.default ?? "";
-				}
-			} else {
-				this._moduleConfig = null;
-			}
-		} catch {
-			this._moduleConfig = null;
-		}
-		this._render();
-	}
-
-	private async _saveModuleSettings() {
-		if (!this._moduleConfig || !this._moduleId) return;
-		const token = getToken();
-		if (!token) return;
-
-		this._moduleSaving = true;
-		this._moduleSaveError = "";
-		this._render();
-
-		try {
-			const res = await fetch(`/api/spaces/${encodeURIComponent(this._space)}/modules`, {
-				method: "PATCH",
-				headers: {
-					"Content-Type": "application/json",
-					Authorization: `Bearer ${token}`,
-				},
-				body: JSON.stringify({
-					moduleSettings: { [this._moduleId]: this._moduleSettingsValues },
-				}),
-			});
-			if (!res.ok) {
-				const err = await res.json().catch(() => ({}));
-				throw new Error(err.error || `Save failed (${res.status})`);
-			}
-			// Reload to reflect saved state
-			await this._loadModuleConfig();
-		} catch (e: any) {
-			this._moduleSaveError = e.message || "Failed to save";
-		}
-		this._moduleSaving = false;
-		this._render();
-	}
-
-	private get _isAdmin(): boolean {
-		return this._isOwner || this._myRole === "admin";
-	}
-
-	private _render() {
-		if (!this.shadowRoot) return;
-
-		if (!this._open) {
-			this.shadowRoot.innerHTML = "";
-			return;
-		}
-
-		// Track whether this is a re-render (panel already exists)
-		const isRerender = !!this.shadowRoot.querySelector(".panel");
-
-		const roleOptions = (currentRole: string) => {
-			const roles = ["viewer", "member", "moderator", "admin"];
-			return roles.map(r => `<option value="${r}" ${r === currentRole ? "selected" : ""}>${r}</option>`).join("");
-		};
-
-		const membersHTML = this._members.map(m => {
-			const isOwnerRow = m.did === this._ownerDID;
-			const displayName = m.displayName || "Unknown user";
-			const initial = displayName.charAt(0).toUpperCase();
-			const roleBadge = isOwnerRow
-				? `<span class="role-badge role-owner">Owner</span>`
-				: `<span class="role-badge role-${m.role}">${m.role}</span>`;
-
-			let controls = "";
-			if (this._isAdmin && !isOwnerRow) {
-				controls = `
-					<select class="role-select" data-did="${m.did}">
-						${roleOptions(m.role)}
-					</select>
-					<button class="remove-btn" data-did="${m.did}" title="Remove member">&times;</button>
-				`;
-			}
-
-			return `
-				<div class="member-row">
-					<div class="member-avatar">${initial}</div>
-					<div class="member-info">
-						<div class="member-name">${this._esc(displayName)}</div>
-						${roleBadge}
-					</div>
-					<div class="member-controls">${controls}</div>
-				</div>
-			`;
-		}).join("");
-
-		const invitesHTML = this._invites
-			.filter(inv => inv.status === "pending")
-			.map(inv => {
-				const expiry = new Date(inv.expiresAt).toLocaleDateString();
-				return `
-					<div class="invite-row">
-						<div class="invite-info">
-							<span class="invite-email">${this._esc(inv.email || "Link invite")}</span>
-							<span class="invite-role">${inv.role}</span>
-							<span class="invite-expiry">expires ${expiry}</span>
-						</div>
-						<button class="revoke-btn" data-invite-id="${inv.id}">Revoke</button>
-					</div>
-				`;
-			}).join("") || '<div class="empty-state">No pending invites</div>';
-
-		// Module-specific settings section
-		let moduleSettingsHTML = "";
-		if (this._moduleConfig && this._isAdmin) {
-			const fields = this._moduleConfig.settingsSchema!;
-			const fieldsHTML = fields.map(field => {
-				const val = this._moduleSettingsValues[field.key] ?? "";
-				let inputHTML = "";
-
-				if (field.type === "boolean") {
-					inputHTML = `<label style="display:flex;align-items:center;gap:8px;cursor:pointer"><input type="checkbox" class="mod-cfg-field" data-key="${field.key}" ${val ? "checked" : ""} /><span style="font-size:0.82rem;color:var(--rs-text-secondary)">${this._esc(field.label)}</span></label>`;
-				} else if (field.type === "select") {
-					inputHTML = `<select class="mod-cfg-field input" data-key="${field.key}">${(field.options || []).map(o => `<option value="${o.value}" ${val === o.value ? "selected" : ""}>${o.label}</option>`).join("")}</select>`;
-				} else if (field.type === "password") {
-					inputHTML = `<input type="password" class="mod-cfg-field input" data-key="${field.key}" value="${typeof val === "string" ? this._esc(val) : ""}" autocomplete="off" />`;
-				} else {
-					inputHTML = `<input type="text" class="mod-cfg-field input" data-key="${field.key}" value="${typeof val === "string" ? this._esc(val) : ""}" />`;
-				}
-
-				return `
-					<div class="mod-cfg-field-group">
-						${field.type !== "boolean" ? `<label class="mod-cfg-label">${this._esc(field.label)}</label>` : ""}
-						${inputHTML}
-						${field.description ? `<div class="mod-cfg-desc">${this._esc(field.description)}</div>` : ""}
-					</div>
-				`;
-			}).join("");
-
-			moduleSettingsHTML = `
-				<section class="section mod-cfg-section">
-					<h3>${this._moduleConfig.icon} ${this._esc(this._moduleConfig.name)} Settings</h3>
-					<div class="mod-cfg-fields">${fieldsHTML}</div>
-					${this._moduleSaveError ? `<div class="error-msg">${this._esc(this._moduleSaveError)}</div>` : ""}
-					<button class="add-btn mod-cfg-save" id="mod-cfg-save" ${this._moduleSaving ? "disabled" : ""}>
-						${this._moduleSaving ? "Saving..." : "Save Module Settings"}
-					</button>
-				</section>
-			`;
-		}
-
-		const panelTitle = "Space Settings";
-
-		this.shadowRoot.innerHTML = `
-			<style>${PANEL_CSS}</style>
-			<div class="panel">
-				<div class="panel-header">
-					<h2>${panelTitle}</h2>
-					<button class="close-btn" id="close-btn">&times;</button>
-				</div>
-
-				<div class="panel-content">
-					<section class="section">
-						<h3>Members <span class="count">${this._members.length}</span></h3>
-						<div class="members-list">${membersHTML}</div>
-					</section>
-
-					${this._isAdmin ? `
-					<section class="section">
-						<h3>Add Member</h3>
-						<div class="add-toggle">
-							<button class="toggle-btn ${this._addMode === "username" ? "active" : ""}" data-mode="username">By Username</button>
-							<button class="toggle-btn ${this._addMode === "email" ? "active" : ""}" data-mode="email">By Email</button>
-						</div>
-
-						${this._addMode === "username" ? `
-						<div class="add-form">
-							<div class="search-wrapper">
-								<input type="text" class="input" id="add-username" placeholder="Search username…" autocomplete="off" />
-								${this._searchResults.length > 0 ? `
-								<div class="search-dropdown">
-									${this._searchResults.map((u, i) => `
-										<div class="search-item" data-idx="${i}">
-											<span class="search-item-name">${this._esc(u.displayName)}</span>
-											<span class="search-item-username">@${this._esc(u.username)}</span>
-										</div>
-									`).join("")}
-								</div>
-								` : ""}
-							</div>
-							${this._lookupResult ? `<div class="lookup-result">Selected: <strong>${this._esc(this._lookupResult.displayName)}</strong> (@${this._esc(this._lookupResult.username)})</div>` : ""}
-							${this._lookupError ? `<div class="error-msg">${this._esc(this._lookupError)}</div>` : ""}
-							<div class="add-row">
-								<select class="input role-input" id="add-role">
-									<option value="member">member</option>
-									<option value="viewer">viewer</option>
-									<option value="moderator">moderator</option>
-									<option value="admin">admin</option>
-								</select>
-								<button class="add-btn" id="add-by-username" ${!this._lookupResult ? "disabled" : ""}>Send Invite</button>
-							</div>
-							<span id="username-invite-feedback" style="font-size:12px;margin-top:4px;display:block;min-height:16px;"></span>
-						</div>
-						` : `
-						<div class="add-form">
-							<input type="email" class="input" id="add-email" placeholder="Email address…" />
-							<div class="add-row">
-								<select class="input role-input" id="add-email-role">
-									<option value="member">member</option>
-									<option value="viewer">viewer</option>
-									<option value="moderator">moderator</option>
-									<option value="admin">admin</option>
-								</select>
-								<button class="add-btn" id="add-by-email">Send Invite</button>
-							</div>
-							<span id="email-invite-feedback" style="font-size:12px;margin-top:4px;display:block;min-height:16px;"></span>
-						</div>
-						`}
-					</section>
-
-					<section class="section">
-						<h3>Pending Invites</h3>
-						<div class="invites-list">${invitesHTML}</div>
-					</section>
-					` : ""}
-
-					${moduleSettingsHTML}
-
-					${this._isAdmin ? `
-					<section class="section">
-						<h3>Space Settings</h3>
-						<label class="field-label">Visibility</label>
-						<select class="input" id="space-visibility">
-							<option value="public" ${this._visibility === "public" ? "selected" : ""}>Public — anyone can read</option>
-							<option value="permissioned" ${this._visibility === "permissioned" ? "selected" : ""}>Permissioned — sign in to access</option>
-							<option value="private" ${this._visibility === "private" ? "selected" : ""}>Private — invite only</option>
-						</select>
-						<label class="field-label" style="margin-top:8px">Description</label>
-						<textarea class="input" id="space-description" rows="2" placeholder="Optional description…" style="resize:vertical">${this._esc(this._description)}</textarea>
-						<button class="add-btn" id="space-save" style="margin-top:8px" ${this._spaceSaving ? "disabled" : ""}>${this._spaceSaving ? "Saving…" : "Save"}</button>
-						${this._spaceSaveMsg ? `<span class="space-save-msg">${this._esc(this._spaceSaveMsg)}</span>` : ""}
-					</section>
-					` : ""}
-				</div>
-			</div>
-		`;
-
-		this._bindEvents();
-		// Re-position after every render since innerHTML replacement destroys inline styles
-		this._positionPanel();
-	}
-
-	private _bindEvents() {
-		const sr = this.shadowRoot!;
-
-		sr.getElementById("close-btn")?.addEventListener("click", () => this.close());
-
-		// Toggle add mode
-		sr.querySelectorAll(".toggle-btn").forEach(btn => {
-			btn.addEventListener("click", () => {
-				this._addMode = (btn as HTMLElement).dataset.mode as "username" | "email";
-				this._lookupResult = null;
-				this._lookupError = "";
-				this._render();
-			});
-		});
-
-		// Username lookup with debounce
-		const usernameInput = sr.getElementById("add-username") as HTMLInputElement;
-		if (usernameInput) {
-			let debounce: ReturnType<typeof setTimeout>;
-			usernameInput.addEventListener("input", () => {
-				clearTimeout(debounce);
-				this._lookupResult = null;
-				this._lookupError = "";
-				debounce = setTimeout(() => this._lookupUser(usernameInput.value), 300);
-			});
-		}
-
-		// Search result selection
-		sr.querySelectorAll(".search-item").forEach(item => {
-			item.addEventListener("click", () => {
-				const idx = parseInt((item as HTMLElement).dataset.idx || "0");
-				if (this._searchResults[idx]) this._selectSearchResult(this._searchResults[idx]);
-			});
-		});
-
-		// Add by username
-		sr.getElementById("add-by-username")?.addEventListener("click", () => this._addByUsername());
-
-		// Add by email
-		sr.getElementById("add-by-email")?.addEventListener("click", () => this._addByEmail());
-
-		// Role changes
-		sr.querySelectorAll(".role-select").forEach(sel => {
-			sel.addEventListener("change", (e) => {
-				const target = e.target as HTMLSelectElement;
-				this._changeRole(target.dataset.did!, target.value);
-			});
-		});
-
-		// Remove member
-		sr.querySelectorAll(".remove-btn").forEach(btn => {
-			btn.addEventListener("click", () => {
-				const did = (btn as HTMLElement).dataset.did!;
-				this._removeMember(did);
-			});
-		});
-
-		// Revoke invite
-		sr.querySelectorAll(".revoke-btn").forEach(btn => {
-			btn.addEventListener("click", () => {
-				const id = (btn as HTMLElement).dataset.inviteId!;
-				this._revokeInvite(id);
-			});
-		});
-
-		// Module config fields
-		sr.querySelectorAll(".mod-cfg-field").forEach(el => {
-			const handler = () => {
-				const input = el as HTMLInputElement | HTMLSelectElement;
-				const key = input.dataset.key!;
-				if (input.type === "checkbox") {
-					this._moduleSettingsValues[key] = (input as HTMLInputElement).checked;
-				} else {
-					this._moduleSettingsValues[key] = input.value;
-				}
-			};
-			el.addEventListener("change", handler);
-			el.addEventListener("input", handler);
-		});
-
-		sr.getElementById("mod-cfg-save")?.addEventListener("click", () => this._saveModuleSettings());
-
-		// Space settings save
-		sr.getElementById("space-save")?.addEventListener("click", () => this._saveSpaceSettings());
-	}
-
-	private async _saveSpaceSettings() {
-		const sr = this.shadowRoot!;
-		const vis = (sr.getElementById("space-visibility") as HTMLSelectElement)?.value;
-		const desc = (sr.getElementById("space-description") as HTMLTextAreaElement)?.value;
-		const token = getToken();
-		if (!token) return;
-
-		this._spaceSaving = true;
-		this._spaceSaveMsg = "";
-		this._render();
-
-		try {
-			const res = await fetch(`/api/spaces/${encodeURIComponent(this._space)}`, {
-				method: "PATCH",
-				headers: {
-					"Content-Type": "application/json",
-					"Authorization": `Bearer ${token}`,
-				},
-				body: JSON.stringify({ visibility: vis, description: desc }),
-			});
-			if (res.ok) {
-				const data = await res.json();
-				this._visibility = data.visibility || vis;
-				this._description = data.description ?? desc;
-				this._spaceSaveMsg = "Saved";
-			} else {
-				const err = await res.json().catch(() => ({})) as { error?: string };
-				this._spaceSaveMsg = (err as any).error || "Failed to save";
-			}
-		} catch {
-			this._spaceSaveMsg = "Network error";
-		}
-		this._spaceSaving = false;
-		this._render();
-		setTimeout(() => { this._spaceSaveMsg = ""; this._render(); }, 3000);
-	}
-
-	private async _lookupUser(username: string) {
-		if (!username || username.length < 2) {
-			this._searchResults = [];
-			this._lookupResult = null;
-			this._lookupError = "";
-			this._render();
-			return;
-		}
-		const token = getToken();
-		if (!token) return;
-
-		try {
-			const res = await fetch(`/api/users/search?q=${encodeURIComponent(username)}&limit=5`, {
-				headers: { "Authorization": `Bearer ${token}` },
-			});
-			if (res.ok) {
-				this._searchResults = await res.json();
-				this._lookupError = this._searchResults.length === 0 && username.length > 2 ? "No users found" : "";
-				// Auto-select if exact match
-				const exact = this._searchResults.find(u => u.username.toLowerCase() === username.toLowerCase());
-				this._lookupResult = exact ? { did: exact.id, username: exact.username, displayName: exact.displayName } : null;
-			} else {
-				this._searchResults = [];
-				this._lookupResult = null;
-				this._lookupError = username.length > 2 ? "No users found" : "";
-			}
-		} catch {
-			this._lookupError = "Lookup failed";
-			this._searchResults = [];
-		}
-		this._render();
-	}
-
-	private _selectSearchResult(user: { id: string; did: string; username: string; displayName: string }) {
-		this._lookupResult = { did: user.id, username: user.username, displayName: user.displayName };
-		this._searchResults = [];
-		this._lookupError = "";
-		this._render();
-		// Set the input value to the selected username
-		const input = this.shadowRoot?.getElementById("add-username") as HTMLInputElement;
-		if (input) input.value = user.username;
-	}
-
-	private async _addByUsername() {
-		const sr = this.shadowRoot!;
-		const input = sr.getElementById("add-username") as HTMLInputElement;
-		const roleSelect = sr.getElementById("add-role") as HTMLSelectElement;
-		if (!input?.value) return;
-
-		const token = getToken();
-		if (!token) return;
-
-		const username = input.value;
-		try {
-			const res = await fetch(`/api/spaces/${this._space}/members/add`, {
-				method: "POST",
-				headers: {
-					"Content-Type": "application/json",
-					"Authorization": `Bearer ${token}`,
-				},
-				body: JSON.stringify({ username, role: roleSelect.value }),
-			});
-			if (res.ok) {
-				input.value = "";
-				this._lookupResult = null;
-				this._lookupError = "";
-				this._render();
-				// Show invite-sent feedback briefly
-				const feedbackEl = sr.getElementById("username-invite-feedback");
-				if (feedbackEl) {
-					feedbackEl.textContent = `Invite sent to ${username}`;
-					feedbackEl.style.color = "#14b8a6";
-					setTimeout(() => { feedbackEl.textContent = ""; }, 3000);
-				}
-				this._loadData();
-			} else {
-				const err = await res.json();
-				this._lookupError = err.error || "Failed to invite member";
-				this._render();
-			}
-		} catch {
-			this._lookupError = "Network error";
-			this._render();
-		}
-	}
-
-	private async _addByEmail() {
-		const sr = this.shadowRoot!;
-		const input = sr.getElementById("add-email") as HTMLInputElement;
-		const roleSelect = sr.getElementById("add-email-role") as HTMLSelectElement;
-		const feedback = sr.getElementById("email-invite-feedback");
-		if (!input?.value) return;
-
-		const token = getToken();
-		if (!token) return;
-
-		try {
-			const res = await fetch(`/api/spaces/${this._space}/invite`, {
-				method: "POST",
-				headers: {
-					"Content-Type": "application/json",
-					"Authorization": `Bearer ${token}`,
-				},
-				body: JSON.stringify({ email: input.value, role: roleSelect.value }),
-			});
-			if (res.ok) {
-				input.value = "";
-				if (feedback) {
-					feedback.textContent = "Invite sent";
-					feedback.style.color = "#14b8a6";
-					setTimeout(() => { feedback.textContent = ""; }, 3000);
-				}
-				this._loadData();
-			} else {
-				const err = await res.json().catch(() => ({ error: "Failed to invite" })) as { error?: string };
-				if (feedback) {
-					feedback.textContent = err.error || "Failed to invite";
-					feedback.style.color = "#ef4444";
-					setTimeout(() => { feedback.textContent = ""; }, 3000);
-				}
-			}
-		} catch {
-			if (feedback) {
-				feedback.textContent = "Network error";
-				feedback.style.color = "#ef4444";
-				setTimeout(() => { feedback.textContent = ""; }, 3000);
-			}
-		}
-	}
-
-	private async _changeRole(did: string, newRole: string) {
-		const token = getToken();
-		if (!token) return;
-
-		try {
-			await fetch(`/api/spaces/${this._space}/members/${encodeURIComponent(did)}`, {
-				method: "PATCH",
-				headers: {
-					"Content-Type": "application/json",
-					"Authorization": `Bearer ${token}`,
-				},
-				body: JSON.stringify({ role: newRole }),
-			});
-			this._loadData();
-		} catch {}
-	}
-
-	private async _removeMember(did: string) {
-		const token = getToken();
-		if (!token) return;
-
-		try {
-			await fetch(`/api/spaces/${this._space}/members/${encodeURIComponent(did)}`, {
-				method: "DELETE",
-				headers: { "Authorization": `Bearer ${token}` },
-			});
-			this._loadData();
-		} catch {}
-	}
-
-	private async _revokeInvite(id: string) {
-		const token = getToken();
-		if (!token) return;
-
-		try {
-			await fetch(`https://auth.rspace.online/api/spaces/${this._space}/invites/${id}/revoke`, {
-				method: "POST",
-				headers: { "Authorization": `Bearer ${token}` },
-			});
-			this._loadData();
-		} catch {}
-	}
-
-	private _esc(s: string): string {
-		return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
-	}
-}
-
-const PANEL_CSS = `
-:host {
-	display: contents;
-	color-scheme: light dark;
-}
-
-.panel {
-	position: fixed;
-	width: min(380px, 90vw);
-	max-height: calc(100vh - 72px);
-	background: var(--rs-bg-surface);
-	border: 1px solid var(--rs-border);
-	border-radius: 12px;
-	box-shadow: 0 8px 32px rgba(0,0,0,0.3);
-	z-index: 200001;
-	display: flex;
-	flex-direction: column;
-	animation: dropDown 0.2s ease;
-	color: var(--rs-text-primary);
-	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-}
-
-@keyframes dropDown {
-	from { opacity: 0; transform: translateY(-8px); }
-	to { opacity: 1; transform: translateY(0); }
-}
-
-.panel-header {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	padding: 16px 20px;
-	border-bottom: 1px solid var(--rs-btn-secondary-bg);
-}
-
-.panel-header h2 {
-	margin: 0;
-	font-size: 1.1rem;
-	font-weight: 600;
-	background: linear-gradient(135deg, #14b8a6, #22d3ee);
-	-webkit-background-clip: text;
-	-webkit-text-fill-color: transparent;
-	background-clip: text;
-}
-
-.close-btn {
-	background: none;
-	border: none;
-	color: var(--rs-text-muted);
-	font-size: 1.5rem;
-	cursor: pointer;
-	padding: 4px 8px;
-	border-radius: 4px;
-	line-height: 1;
-}
-.close-btn:hover { color: var(--rs-text-primary); background: var(--rs-btn-secondary-bg); }
-
-.panel-content {
-	flex: 1;
-	overflow-y: auto;
-	padding: 0 20px 20px;
-}
-
-.section {
-	padding-top: 16px;
-}
-
-.section h3 {
-	font-size: 0.82rem;
-	font-weight: 700;
-	color: var(--rs-text-secondary);
-	text-transform: uppercase;
-	letter-spacing: 0.06em;
-	margin: 0 0 10px;
-}
-
-.count {
-	font-weight: 400;
-	color: var(--rs-text-muted);
-	font-size: 0.75rem;
-	margin-left: 4px;
-}
-
-/* Members */
-.members-list {
-	display: flex;
-	flex-direction: column;
-	gap: 4px;
-}
-
-.member-row {
-	display: flex;
-	align-items: center;
-	gap: 10px;
-	padding: 8px 10px;
-	border-radius: 8px;
-	transition: background 0.15s;
-}
-.member-row:hover { background: var(--rs-bg-hover); }
-
-.member-avatar {
-	width: 32px;
-	height: 32px;
-	border-radius: 50%;
-	background: rgba(20,184,166,0.15);
-	color: #14b8a6;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	font-weight: 700;
-	font-size: 0.8rem;
-	flex-shrink: 0;
-}
-
-.member-info {
-	flex: 1;
-	min-width: 0;
-}
-
-.member-name {
-	font-size: 0.85rem;
-	font-weight: 500;
-	color: var(--rs-text-primary);
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
-.role-badge {
-	display: inline-block;
-	font-size: 0.65rem;
-	font-weight: 700;
-	padding: 1px 6px;
-	border-radius: 9999px;
-	text-transform: uppercase;
-	letter-spacing: 0.04em;
-}
-.role-owner { background: rgba(124,58,237,0.2); color: #a78bfa; }
-.role-admin { background: rgba(239,68,68,0.15); color: #f87171; }
-.role-moderator { background: rgba(245,158,11,0.15); color: #fbbf24; }
-.role-member { background: rgba(20,184,166,0.15); color: #14b8a6; }
-.role-viewer { background: rgba(148,163,184,0.15); color: #94a3b8; }
-
-.member-controls {
-	display: flex;
-	align-items: center;
-	gap: 6px;
-	flex-shrink: 0;
-}
-
-.role-select {
-	background: var(--rs-border-subtle);
-	border: 1px solid var(--rs-border);
-	color: var(--rs-text-primary);
-	border-radius: 6px;
-	padding: 3px 6px;
-	font-size: 0.72rem;
-	cursor: pointer;
-}
-.role-select:focus { outline: none; border-color: #14b8a6; }
-
-.remove-btn {
-	background: none;
-	border: none;
-	color: var(--rs-text-muted);
-	font-size: 1.1rem;
-	cursor: pointer;
-	padding: 2px 6px;
-	border-radius: 4px;
-	line-height: 1;
-}
-.remove-btn:hover { color: #f87171; background: rgba(239,68,68,0.1); }
-
-/* Add member */
-.add-toggle {
-	display: flex;
-	gap: 4px;
-	margin-bottom: 10px;
-}
-
-.toggle-btn {
-	flex: 1;
-	padding: 6px 10px;
-	background: var(--rs-bg-hover);
-	border: 1px solid var(--rs-btn-secondary-bg);
-	color: var(--rs-text-secondary);
-	border-radius: 6px;
-	font-size: 0.78rem;
-	cursor: pointer;
-	transition: all 0.15s;
-}
-.toggle-btn.active {
-	background: rgba(20,184,166,0.1);
-	border-color: rgba(20,184,166,0.3);
-	color: #14b8a6;
-}
-
-.add-form {
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-}
-
-.input {
-	background: var(--rs-border-subtle);
-	border: 1px solid var(--rs-border);
-	color: var(--rs-text-primary);
-	border-radius: 8px;
-	padding: 8px 12px;
-	font-size: 0.85rem;
-	width: 100%;
-	box-sizing: border-box;
-}
-.input:focus { outline: none; border-color: #14b8a6; }
-.input::placeholder { color: var(--rs-text-muted); }
-
-.field-label {
-	display: block;
-	font-size: 0.75rem;
-	color: var(--rs-text-secondary);
-	margin-bottom: 4px;
-}
-
-.space-save-msg {
-	font-size: 0.78rem;
-	color: #14b8a6;
-	margin-left: 8px;
-}
-
-.add-row {
-	display: flex;
-	gap: 8px;
-}
-
-.role-input {
-	flex: 0 0 auto;
-	width: auto;
-	padding: 8px 10px;
-}
-
-.add-btn {
-	flex-shrink: 0;
-	padding: 8px 16px;
-	background: linear-gradient(135deg, #14b8a6, #0d9488);
-	border: none;
-	color: white;
-	border-radius: 8px;
-	font-size: 0.82rem;
-	font-weight: 600;
-	cursor: pointer;
-	transition: opacity 0.15s;
-}
-.add-btn:hover { opacity: 0.9; }
-
-.search-wrapper {
-	position: relative;
-}
-
-.search-dropdown {
-	position: absolute;
-	top: 100%;
-	left: 0;
-	right: 0;
-	background: var(--rs-bg-surface);
-	border: 1px solid var(--rs-border);
-	border-radius: 8px;
-	margin-top: 4px;
-	overflow: hidden;
-	z-index: 10;
-	box-shadow: 0 4px 16px rgba(0,0,0,0.25);
-}
-
-.search-item {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	padding: 8px 12px;
-	cursor: pointer;
-	transition: background 0.1s;
-}
-.search-item:hover {
-	background: var(--rs-bg-hover);
-}
-
-.search-item-name {
-	font-size: 0.82rem;
-	font-weight: 500;
-	color: var(--rs-text-primary);
-}
-
-.search-item-username {
-	font-size: 0.72rem;
-	color: var(--rs-text-muted);
-}
-
-.lookup-result {
-	font-size: 0.78rem;
-	color: #14b8a6;
-	padding: 4px 0;
-}
-
-.add-btn:disabled {
-	opacity: 0.5;
-	cursor: not-allowed;
-}
-
-.error-msg {
-	font-size: 0.78rem;
-	color: #f87171;
-	padding: 4px 0;
-}
-
-/* Invites */
-.invites-list {
-	display: flex;
-	flex-direction: column;
-	gap: 4px;
-}
-
-.invite-row {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	padding: 8px 10px;
-	border-radius: 8px;
-	background: var(--rs-bg-hover);
-}
-
-.invite-info {
-	display: flex;
-	flex-direction: column;
-	gap: 2px;
-}
-
-.invite-email {
-	font-size: 0.82rem;
-	color: var(--rs-text-primary);
-}
-
-.invite-role {
-	font-size: 0.7rem;
-	color: #14b8a6;
-}
-
-.invite-expiry {
-	font-size: 0.65rem;
-	color: var(--rs-text-muted);
-}
-
-.revoke-btn {
-	background: rgba(239,68,68,0.1);
-	border: 1px solid rgba(239,68,68,0.2);
-	color: #f87171;
-	border-radius: 6px;
-	padding: 4px 10px;
-	font-size: 0.72rem;
-	cursor: pointer;
-	transition: all 0.15s;
-}
-.revoke-btn:hover { background: rgba(239,68,68,0.2); }
-
-.empty-state {
-	font-size: 0.8rem;
-	color: var(--rs-text-muted);
-	padding: 12px 0;
-	text-align: center;
-}
-
-/* Module config */
-.mod-cfg-section {
-	border-bottom: 1px solid var(--rs-btn-secondary-bg);
-	padding-bottom: 16px;
-}
-
-.mod-cfg-fields {
-	display: flex;
-	flex-direction: column;
-	gap: 10px;
-	margin-bottom: 12px;
-}
-
-.mod-cfg-field-group {
-	display: flex;
-	flex-direction: column;
-	gap: 3px;
-}
-
-.mod-cfg-label {
-	font-size: 0.75rem;
-	font-weight: 600;
-	color: var(--rs-text-secondary);
-}
-
-.mod-cfg-desc {
-	font-size: 0.68rem;
-	color: var(--rs-text-muted);
-	line-height: 1.4;
-}
-
-.mod-cfg-save {
-	width: 100%;
-	margin-top: 4px;
-}
-`;
diff --git a/shared/components/rstack-space-switcher.ts b/shared/components/rstack-space-switcher.ts
index 963e323..91850b9 100644
--- a/shared/components/rstack-space-switcher.ts
+++ b/shared/components/rstack-space-switcher.ts
@@ -123,7 +123,7 @@ export class RStackSpaceSwitcher extends HTMLElement {
 		});
 
 		// Close menu only when clicking outside both trigger and menu
-		document.addEventListener("click", (e) => {
+		document.addEventListener("pointerdown", (e) => {
 			if (!menu.classList.contains("open")) return;
 			const path = e.composedPath();
 			if (path.includes(menu) || path.includes(trigger)) return;
@@ -132,7 +132,7 @@ export class RStackSpaceSwitcher extends HTMLElement {
 		});
 
 		// Prevent clicks inside menu from closing it
-		menu.addEventListener("click", (e) => e.stopPropagation());
+		menu.addEventListener("pointerdown", (e) => e.stopPropagation());
 	}
 
 	#visibilityInfo(s: SpaceInfo): { cls: string; label: string } {
@@ -517,7 +517,12 @@ export class RStackSpaceSwitcher extends HTMLElement {
 		document.body.appendChild(overlay);
 	}
 
-	#showEditSpaceModal(slug: string, spaceName: string) {
+	/** Public entry point — both gear icons call this */
+	openSettingsModal(slug: string, name: string, tab: "settings" | "modules" | "members" | "invitations" = "settings") {
+		this.#showEditSpaceModal(slug, name, tab);
+	}
+
+	#showEditSpaceModal(slug: string, spaceName: string, initialTab: "settings" | "modules" | "members" | "invitations" = "settings") {
 		if (document.querySelector(".rstack-auth-overlay")) return;
 
 		const overlay = document.createElement("div");
@@ -528,13 +533,13 @@ export class RStackSpaceSwitcher extends HTMLElement {
 				<button class="close-btn" data-action="close">&times;</button>
 				<h2>Edit Space</h2>
 				<div class="tabs">
-					<button class="tab active" data-tab="settings">Settings</button>
-					<button class="tab" data-tab="modules">Modules</button>
-					<button class="tab" data-tab="members">Members</button>
-					<button class="tab" data-tab="invitations">Invitations</button>
+					<button class="tab ${initialTab === "settings" ? "active" : ""}" data-tab="settings">Settings</button>
+					<button class="tab ${initialTab === "modules" ? "active" : ""}" data-tab="modules">Modules</button>
+					<button class="tab ${initialTab === "members" ? "active" : ""}" data-tab="members">Members</button>
+					<button class="tab ${initialTab === "invitations" ? "active" : ""}" data-tab="invitations">Invitations</button>
 				</div>
 
-				<div class="tab-panel" id="panel-settings">
+				<div class="tab-panel ${initialTab !== "settings" ? "hidden" : ""}" id="panel-settings">
 					<label class="field-label">Name</label>
 					<input class="input" id="es-name" value="${spaceName.replace(/"/g, "&quot;")}" />
 					<label class="field-label">Visibility</label>
@@ -555,16 +560,16 @@ export class RStackSpaceSwitcher extends HTMLElement {
 					</div>
 				</div>
 
-				<div class="tab-panel hidden" id="panel-modules">
+				<div class="tab-panel ${initialTab !== "modules" ? "hidden" : ""}" id="panel-modules">
 					<div id="es-modules-list" class="modules-list"><div class="loading">Loading modules...</div></div>
 					<div class="status" id="es-modules-status"></div>
 				</div>
 
-				<div class="tab-panel hidden" id="panel-members">
+				<div class="tab-panel ${initialTab !== "members" ? "hidden" : ""}" id="panel-members">
 					<div id="es-members-list" class="member-list"><div class="loading">Loading members...</div></div>
 				</div>
 
-				<div class="tab-panel hidden" id="panel-invitations">
+				<div class="tab-panel ${initialTab !== "invitations" ? "hidden" : ""}" id="panel-invitations">
 					<div id="es-invitations-list" class="invitation-list"><div class="loading">Loading invitations...</div></div>
 				</div>
 			</div>
@@ -601,6 +606,11 @@ export class RStackSpaceSwitcher extends HTMLElement {
 		// Delete handler
 		overlay.querySelector("#es-delete")?.addEventListener("click", () => this.#deleteSpace(overlay, slug, spaceName));
 
+		// Eager-load the initially-active tab (if not settings, which loads above)
+		if (initialTab === "modules") this.#loadModulesConfig(overlay, slug);
+		if (initialTab === "members") this.#loadMembers(overlay, slug);
+		if (initialTab === "invitations") this.#loadInvitations(overlay, slug);
+
 		document.body.appendChild(overlay);
 	}
 
@@ -691,29 +701,73 @@ export class RStackSpaceSwitcher extends HTMLElement {
 			const data = await res.json();
 			const members: Array<{ did: string; role: string; displayName?: string; isOwner?: boolean }> = data.members || [];
 
+			let membersHtml = "";
 			if (members.length === 0) {
-				container.innerHTML = `<div class="loading">No members</div>`;
-				return;
+				membersHtml = `<div class="loading">No members</div>`;
+			} else {
+				membersHtml = members.map((m) => {
+					const displayName = m.displayName || m.did.slice(0, 20) + "...";
+					const roleOptions = ["viewer", "member", "moderator", "admin"]
+						.map((r) => `<option value="${r}" ${r === m.role ? "selected" : ""}>${r}</option>`)
+						.join("");
+					return `
+						<div class="member-item${m.isOwner ? " member-owner" : ""}">
+							<span class="member-name">${displayName}</span>
+							${m.isOwner
+								? `<span class="role-badge role-owner">owner</span>`
+								: `<select class="role-select" data-did="${m.did}">${roleOptions}</select>
+								   <button class="member-remove" data-did="${m.did}" title="Remove member">&times;</button>`
+							}
+						</div>`;
+				}).join("");
 			}
 
-			container.innerHTML = members.map((m) => {
-				const displayName = m.displayName || m.did.slice(0, 20) + "...";
-				const roleOptions = ["viewer", "member", "moderator", "admin"]
-					.map((r) => `<option value="${r}" ${r === m.role ? "selected" : ""}>${r}</option>`)
-					.join("");
-				return `
-					<div class="member-item${m.isOwner ? " member-owner" : ""}">
-						<span class="member-name">${displayName}</span>
-						${m.isOwner
-							? `<span class="role-badge role-owner">owner</span>`
-							: `<select class="role-select" data-did="${m.did}">${roleOptions}</select>
-							   <button class="member-remove" data-did="${m.did}" title="Remove member">&times;</button>`
-						}
-					</div>`;
-			}).join("");
+			// Add Member section (admin-only)
+			const addMemberHtml = `
+				<div class="add-member-section">
+					<div class="section-label">Add Member</div>
+					<div class="add-member-toggle">
+						<button class="add-toggle-btn active" data-add-mode="username">By Username</button>
+						<button class="add-toggle-btn" data-add-mode="email">By Email</button>
+					</div>
+					<div class="add-member-form" id="add-member-form">
+						<div class="add-member-username-mode">
+							<div class="add-search-wrapper">
+								<input class="input" id="am-username" placeholder="Search username..." autocomplete="off" style="margin-bottom:0" />
+								<div class="add-search-dropdown" id="am-search-dropdown"></div>
+							</div>
+							<div class="add-selected-user" id="am-selected-user"></div>
+							<div class="add-member-row">
+								<select class="role-select" id="am-role">
+									<option value="member">member</option>
+									<option value="viewer">viewer</option>
+									<option value="moderator">moderator</option>
+									<option value="admin">admin</option>
+								</select>
+								<button class="btn-sm btn-sm--approve" id="am-add-btn" disabled>Add</button>
+							</div>
+							<div class="add-feedback" id="am-feedback"></div>
+						</div>
+					</div>
+					<div class="add-member-form hidden" id="add-email-form">
+						<input type="email" class="input" id="am-email" placeholder="Email address..." style="margin-bottom:0" />
+						<div class="add-member-row">
+							<select class="role-select" id="am-email-role">
+								<option value="member">member</option>
+								<option value="viewer">viewer</option>
+								<option value="moderator">moderator</option>
+								<option value="admin">admin</option>
+							</select>
+							<button class="btn-sm btn-sm--approve" id="am-email-btn">Send Invite</button>
+						</div>
+						<div class="add-feedback" id="am-email-feedback"></div>
+					</div>
+				</div>`;
+
+			container.innerHTML = membersHtml + addMemberHtml;
 
 			// Role change handlers
-			container.querySelectorAll(".role-select").forEach((sel) => {
+			container.querySelectorAll(".role-select:not(#am-role):not(#am-email-role)").forEach((sel) => {
 				sel.addEventListener("change", async () => {
 					const el = sel as HTMLSelectElement;
 					const did = el.dataset.did!;
@@ -746,51 +800,238 @@ export class RStackSpaceSwitcher extends HTMLElement {
 					} catch { alert("Failed to remove member"); }
 				});
 			});
+
+			// Wire up add-member section
+			this.#attachAddMemberHandlers(container, overlay, slug);
 		} catch {
 			container.innerHTML = `<div class="loading">Failed to load members</div>`;
 		}
 	}
 
+	#attachAddMemberHandlers(container: HTMLElement, overlay: HTMLElement, slug: string) {
+		// Toggle between username and email modes
+		const usernameForm = container.querySelector("#add-member-form") as HTMLElement;
+		const emailForm = container.querySelector("#add-email-form") as HTMLElement;
+
+		container.querySelectorAll(".add-toggle-btn").forEach((btn) => {
+			btn.addEventListener("click", () => {
+				container.querySelectorAll(".add-toggle-btn").forEach((b) => b.classList.remove("active"));
+				btn.classList.add("active");
+				const mode = (btn as HTMLElement).dataset.addMode;
+				if (mode === "username") {
+					usernameForm?.classList.remove("hidden");
+					emailForm?.classList.add("hidden");
+				} else {
+					usernameForm?.classList.add("hidden");
+					emailForm?.classList.remove("hidden");
+				}
+			});
+		});
+
+		// Username search with debounce
+		const usernameInput = container.querySelector("#am-username") as HTMLInputElement;
+		const dropdown = container.querySelector("#am-search-dropdown") as HTMLElement;
+		const selectedDiv = container.querySelector("#am-selected-user") as HTMLElement;
+		const addBtn = container.querySelector("#am-add-btn") as HTMLButtonElement;
+		const feedback = container.querySelector("#am-feedback") as HTMLElement;
+		let selectedUser: { did: string; username: string; displayName: string } | null = null;
+		let searchTimer: ReturnType<typeof setTimeout>;
+
+		if (usernameInput) {
+			usernameInput.addEventListener("input", () => {
+				clearTimeout(searchTimer);
+				selectedUser = null;
+				addBtn.disabled = true;
+				selectedDiv.innerHTML = "";
+				const q = usernameInput.value.trim();
+				if (q.length < 2) { dropdown.innerHTML = ""; dropdown.classList.remove("open"); return; }
+
+				searchTimer = setTimeout(async () => {
+					try {
+						const token = getAccessToken();
+						const res = await fetch(`/api/users/search?q=${encodeURIComponent(q)}&limit=5`, {
+							headers: token ? { Authorization: `Bearer ${token}` } : {},
+						});
+						if (!res.ok) { dropdown.classList.remove("open"); return; }
+						const users: Array<{ id: string; did: string; username: string; displayName: string }> = await res.json();
+						if (users.length === 0) {
+							dropdown.innerHTML = `<div class="add-dd-empty">No users found</div>`;
+						} else {
+							dropdown.innerHTML = users.map((u, i) => `
+								<div class="add-dd-item" data-idx="${i}">
+									<span class="add-dd-name">${u.displayName || u.username}</span>
+									<span class="add-dd-user">@${u.username}</span>
+								</div>
+							`).join("");
+							// Attach click handlers
+							dropdown.querySelectorAll(".add-dd-item").forEach((item) => {
+								item.addEventListener("click", () => {
+									const idx = parseInt((item as HTMLElement).dataset.idx || "0");
+									const u = users[idx];
+									selectedUser = { did: u.id, username: u.username, displayName: u.displayName || u.username };
+									usernameInput.value = u.username;
+									dropdown.innerHTML = "";
+									dropdown.classList.remove("open");
+									selectedDiv.innerHTML = `<span class="add-selected-chip">Selected: <strong>${selectedUser.displayName}</strong> (@${selectedUser.username})</span>`;
+									addBtn.disabled = false;
+								});
+							});
+						}
+						dropdown.classList.add("open");
+					} catch { dropdown.classList.remove("open"); }
+				}, 300);
+			});
+
+			// Close dropdown on outside click
+			overlay.addEventListener("click", (e) => {
+				if (!(e.target as HTMLElement).closest(".add-search-wrapper")) {
+					dropdown.classList.remove("open");
+				}
+			});
+		}
+
+		// Add by username
+		addBtn?.addEventListener("click", async () => {
+			if (!selectedUser) return;
+			const role = (container.querySelector("#am-role") as HTMLSelectElement).value;
+			const token = getAccessToken();
+			if (!token) return;
+			try {
+				const res = await fetch(`/api/spaces/${slug}/members/add`, {
+					method: "POST",
+					headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}` },
+					body: JSON.stringify({ username: selectedUser.username, role }),
+				});
+				if (res.ok) {
+					feedback.textContent = `Invite sent to ${selectedUser.username}`;
+					feedback.style.color = "#34d399";
+					selectedUser = null;
+					usernameInput.value = "";
+					selectedDiv.innerHTML = "";
+					addBtn.disabled = true;
+					setTimeout(() => { feedback.textContent = ""; }, 3000);
+					this.#loadMembers(overlay, slug);
+				} else {
+					const err = await res.json();
+					feedback.textContent = err.error || "Failed to invite";
+					feedback.style.color = "#ef4444";
+					setTimeout(() => { feedback.textContent = ""; }, 3000);
+				}
+			} catch {
+				feedback.textContent = "Network error";
+				feedback.style.color = "#ef4444";
+				setTimeout(() => { feedback.textContent = ""; }, 3000);
+			}
+		});
+
+		// Add by email
+		const emailInput = container.querySelector("#am-email") as HTMLInputElement;
+		const emailBtn = container.querySelector("#am-email-btn") as HTMLButtonElement;
+		const emailFeedback = container.querySelector("#am-email-feedback") as HTMLElement;
+
+		emailBtn?.addEventListener("click", async () => {
+			if (!emailInput?.value) return;
+			const role = (container.querySelector("#am-email-role") as HTMLSelectElement).value;
+			const token = getAccessToken();
+			if (!token) return;
+			try {
+				const res = await fetch(`/api/spaces/${slug}/invite`, {
+					method: "POST",
+					headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}` },
+					body: JSON.stringify({ email: emailInput.value, role }),
+				});
+				if (res.ok) {
+					emailFeedback.textContent = "Invite sent";
+					emailFeedback.style.color = "#34d399";
+					emailInput.value = "";
+					setTimeout(() => { emailFeedback.textContent = ""; }, 3000);
+				} else {
+					const err = await res.json().catch(() => ({ error: "Failed to invite" })) as { error?: string };
+					emailFeedback.textContent = err.error || "Failed to invite";
+					emailFeedback.style.color = "#ef4444";
+					setTimeout(() => { emailFeedback.textContent = ""; }, 3000);
+				}
+			} catch {
+				emailFeedback.textContent = "Network error";
+				emailFeedback.style.color = "#ef4444";
+				setTimeout(() => { emailFeedback.textContent = ""; }, 3000);
+			}
+		});
+	}
+
 	async #loadInvitations(overlay: HTMLElement, slug: string) {
 		const container = overlay.querySelector("#es-invitations-list") as HTMLElement;
 		try {
 			const token = getAccessToken();
-			const res = await fetch(`/api/spaces/${slug}/access-requests`, {
-				headers: token ? { Authorization: `Bearer ${token}` } : {},
-			});
-			if (!res.ok) { container.innerHTML = `<div class="loading">Failed to load</div>`; return; }
-			const data = await res.json();
-			const requests: Array<{ id: string; requesterUsername: string; message?: string; status: string; createdAt: number }> = data.requests || [];
+			const headers: Record<string, string> = {};
+			if (token) headers["Authorization"] = `Bearer ${token}`;
 
-			if (requests.length === 0) {
-				container.innerHTML = `<div class="loading">No access requests</div>`;
-				return;
-			}
-
-			const pending = requests.filter((r) => r.status === "pending");
-			const resolved = requests.filter((r) => r.status !== "pending");
+			// Fetch access requests and email invites in parallel
+			const [reqRes, invRes] = await Promise.all([
+				fetch(`/api/spaces/${slug}/access-requests`, { headers }),
+				fetch(`/api/spaces/${slug}/invites`, { headers }).catch(() => null),
+			]);
 
+			// Access requests
 			let html = "";
-			if (pending.length > 0) {
-				html += pending.map((r) => `
-					<div class="invite-item">
-						<div class="invite-info">
+			if (reqRes.ok) {
+				const data = await reqRes.json();
+				const requests: Array<{ id: string; requesterUsername: string; message?: string; status: string; createdAt: number }> = data.requests || [];
+				const pending = requests.filter((r) => r.status === "pending");
+				const resolved = requests.filter((r) => r.status !== "pending");
+
+				html += `<div class="section-label">Access Requests</div>`;
+				if (pending.length > 0) {
+					html += pending.map((r) => `
+						<div class="invite-item">
+							<div class="invite-info">
+								<span class="invite-name">${r.requesterUsername}</span>
+								${r.message ? `<span class="invite-msg">${r.message.replace(/</g, "&lt;")}</span>` : ""}
+							</div>
+							<div class="invite-actions">
+								<button class="btn-sm btn-sm--approve" data-req-id="${r.id}" data-action="approve">Approve</button>
+								<button class="btn-sm btn-sm--deny" data-req-id="${r.id}" data-action="deny">Deny</button>
+							</div>
+						</div>`).join("");
+				} else {
+					html += `<div class="loading" style="padding:8px 0">No pending requests</div>`;
+				}
+				if (resolved.length > 0) {
+					html += `<div class="section-label" style="opacity:0.4;padding:8px 0 4px">Resolved</div>`;
+					html += resolved.map((r) => `
+						<div class="invite-item invite-resolved">
 							<span class="invite-name">${r.requesterUsername}</span>
-							${r.message ? `<span class="invite-msg">${r.message.replace(/</g, "&lt;")}</span>` : ""}
-						</div>
-						<div class="invite-actions">
-							<button class="btn-sm btn-sm--approve" data-req-id="${r.id}" data-action="approve">Approve</button>
-							<button class="btn-sm btn-sm--deny" data-req-id="${r.id}" data-action="deny">Deny</button>
-						</div>
-					</div>`).join("");
+							<span class="invite-status invite-status--${r.status}">${r.status}</span>
+						</div>`).join("");
+				}
+			} else {
+				html += `<div class="loading">Failed to load access requests</div>`;
 			}
-			if (resolved.length > 0) {
-				html += `<div class="section-label" style="opacity:0.4;padding:8px 0 4px">Resolved</div>`;
-				html += resolved.map((r) => `
-					<div class="invite-item invite-resolved">
-						<span class="invite-name">${r.requesterUsername}</span>
-						<span class="invite-status invite-status--${r.status}">${r.status}</span>
-					</div>`).join("");
+
+			// Email invites
+			html += `<div class="section-label" style="margin-top:16px">Pending Email Invites</div>`;
+			if (invRes && invRes.ok) {
+				const invData = await invRes.json();
+				const invites: Array<{ id: string; email?: string; role: string; status: string; expiresAt: string }> = invData.invites || [];
+				const pendingInvites = invites.filter((inv) => inv.status === "pending");
+
+				if (pendingInvites.length > 0) {
+					html += pendingInvites.map((inv) => {
+						const expiry = new Date(inv.expiresAt).toLocaleDateString();
+						return `
+							<div class="invite-item">
+								<div class="invite-info">
+									<span class="invite-name">${(inv.email || "Link invite").replace(/</g, "&lt;")}</span>
+									<span class="invite-msg">${inv.role} &middot; expires ${expiry}</span>
+								</div>
+								<button class="btn-sm btn-sm--deny" data-revoke-id="${inv.id}">Revoke</button>
+							</div>`;
+					}).join("");
+				} else {
+					html += `<div class="loading" style="padding:8px 0">No pending invites</div>`;
+				}
+			} else {
+				html += `<div class="loading" style="padding:8px 0">No pending invites</div>`;
 			}
 
 			container.innerHTML = html;
@@ -813,6 +1054,23 @@ export class RStackSpaceSwitcher extends HTMLElement {
 					} catch { alert("Failed to process request"); }
 				});
 			});
+
+			// Revoke invite handlers
+			container.querySelectorAll("[data-revoke-id]").forEach((btn) => {
+				btn.addEventListener("click", async () => {
+					const id = (btn as HTMLElement).dataset.revokeId!;
+					const token = getAccessToken();
+					if (!token) return;
+					try {
+						const res = await fetch(`/api/spaces/${slug}/invites/${id}/revoke`, {
+							method: "POST",
+							headers: { Authorization: `Bearer ${token}` },
+						});
+						if (!res.ok) { const d = await res.json().catch(() => ({})); alert((d as any).error || "Failed"); return; }
+						this.#loadInvitations(overlay, slug);
+					} catch { alert("Failed to revoke invite"); }
+				});
+			});
 		} catch {
 			container.innerHTML = `<div class="loading">Failed to load invitations</div>`;
 		}
@@ -1919,6 +2177,32 @@ select.input { appearance: auto; }
 input:checked + .toggle-slider { background: #06b6d4; }
 input:checked + .toggle-slider:before { transform: translateX(16px); }
 
+/* Section labels */
+.section-label { font-size: 0.72rem; font-weight: 700; color: var(--rs-text-secondary); text-transform: uppercase; letter-spacing: 0.06em; padding: 8px 0 4px; }
+
+/* Add member section */
+.add-member-section { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--rs-border-subtle); }
+.add-member-toggle { display: flex; gap: 4px; margin-bottom: 10px; }
+.add-toggle-btn {
+  flex: 1; padding: 6px 10px; background: var(--rs-bg-hover); border: 1px solid var(--rs-input-border, #404040);
+  color: var(--rs-text-secondary); border-radius: 6px; font-size: 0.78rem; cursor: pointer; transition: all 0.15s;
+}
+.add-toggle-btn.active { background: rgba(6,182,212,0.1); border-color: rgba(6,182,212,0.3); color: #06b6d4; }
+.add-member-form { display: flex; flex-direction: column; gap: 8px; }
+.add-member-form.hidden { display: none; }
+.add-member-row { display: flex; gap: 8px; align-items: center; }
+.add-search-wrapper { position: relative; }
+.add-search-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: var(--rs-bg-surface); border: 1px solid var(--rs-border); border-radius: 8px; margin-top: 4px; overflow: hidden; z-index: 10; box-shadow: 0 4px 16px rgba(0,0,0,0.25); display: none; }
+.add-search-dropdown.open { display: block; }
+.add-dd-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; transition: background 0.1s; }
+.add-dd-item:hover { background: var(--rs-bg-hover); }
+.add-dd-name { font-size: 0.82rem; font-weight: 500; color: var(--rs-text-primary); }
+.add-dd-user { font-size: 0.72rem; color: var(--rs-text-muted); }
+.add-dd-empty { padding: 8px 12px; font-size: 0.8rem; color: var(--rs-text-muted); }
+.add-selected-chip { font-size: 0.78rem; color: #06b6d4; }
+.add-selected-user { min-height: 0; }
+.add-feedback { font-size: 0.78rem; min-height: 16px; }
+
 @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
 @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
 `;
diff --git a/shared/components/rstack-tab-bar.ts b/shared/components/rstack-tab-bar.ts
index abda7dc..bcea794 100644
--- a/shared/components/rstack-tab-bar.ts
+++ b/shared/components/rstack-tab-bar.ts
@@ -1182,9 +1182,9 @@ export class RStackTabBar extends HTMLElement {
 				}
 			});
 
-			// Drag-to-connect: mousedown starts a flow drag (skip if wiring)
-			plane.addEventListener("mousedown", (e) => {
-				if ((e as MouseEvent).button !== 0) return;
+			// Drag-to-connect: pointerdown starts a flow drag (skip if wiring)
+			plane.addEventListener("pointerdown", (e) => {
+				if ((e as PointerEvent).button !== 0) return;
 				if (this.#wiringActive) return;
 				e.stopPropagation(); // prevent orbit
 				this.#flowDragSource = layerId;
@@ -1195,20 +1195,25 @@ export class RStackTabBar extends HTMLElement {
 		// 3D scene: orbit controls (drag on empty space to rotate)
 		const sceneContainer = this.#shadow.getElementById("stack-3d");
 		if (sceneContainer) {
-			sceneContainer.addEventListener("mousedown", (e) => {
+			let orbitPointerId: number | null = null;
+
+			sceneContainer.addEventListener("pointerdown", (e) => {
+				const pe = e as PointerEvent;
 				// Only orbit on left-click on empty space (not on layer planes)
-				if ((e as MouseEvent).button !== 0) return;
+				if (pe.button !== 0) return;
 				if ((e.target as HTMLElement).closest(".layer-plane")) return;
 				this.#orbitDragging = true;
-				this.#orbitLastX = (e as MouseEvent).clientX;
-				this.#orbitLastY = (e as MouseEvent).clientY;
+				this.#orbitLastX = pe.clientX;
+				this.#orbitLastY = pe.clientY;
+				orbitPointerId = pe.pointerId;
+				sceneContainer.setPointerCapture(pe.pointerId);
 				sceneContainer.style.cursor = "grabbing";
 			});
 
 			// Collect all layer planes + their rects for drag target detection
 			const layerPlanes = [...this.#shadow.querySelectorAll<HTMLElement>(".layer-plane")];
 
-			const onMouseMove = (e: MouseEvent) => {
+			const onPointerMove = (e: PointerEvent) => {
 				if (this.#orbitDragging) {
 					const dx = e.clientX - this.#orbitLastX;
 					const dy = e.clientY - this.#orbitLastY;
@@ -1250,9 +1255,13 @@ export class RStackTabBar extends HTMLElement {
 				}
 			};
 
-			const onMouseUp = () => {
+			const onPointerUp = (e: PointerEvent) => {
 				if (this.#orbitDragging) {
 					this.#orbitDragging = false;
+					if (orbitPointerId !== null) {
+						try { sceneContainer.releasePointerCapture(orbitPointerId); } catch {}
+						orbitPointerId = null;
+					}
 					sceneContainer.style.cursor = "";
 				}
 				// Complete flow drag
@@ -1267,11 +1276,11 @@ export class RStackTabBar extends HTMLElement {
 			};
 
 			// Attach to document for drag continuity (cleaned up on re-render)
-			document.addEventListener("mousemove", onMouseMove);
-			document.addEventListener("mouseup", onMouseUp);
+			document.addEventListener("pointermove", onPointerMove);
+			document.addEventListener("pointerup", onPointerUp);
 			this.#docCleanup = () => {
-				document.removeEventListener("mousemove", onMouseMove);
-				document.removeEventListener("mouseup", onMouseUp);
+				document.removeEventListener("pointermove", onPointerMove);
+				document.removeEventListener("pointerup", onPointerUp);
 			};
 
 			// Scroll to zoom
@@ -1894,6 +1903,7 @@ const STYLES = `
   align-items: center;
   justify-content: center;
   cursor: grab;
+  touch-action: none;
   user-select: none;
   overflow: visible;
 }
diff --git a/shared/tab-cache.ts b/shared/tab-cache.ts
index b11a6f8..949f83f 100644
--- a/shared/tab-cache.ts
+++ b/shared/tab-cache.ts
@@ -307,7 +307,7 @@ export class TabCache {
 		if (appEl) {
 			// Remove duplicate shell chrome that shouldn't be in tab panes
 			appEl.querySelectorAll(
-				".rstack-tab-row, rstack-tab-bar, rstack-space-settings, rstack-history-panel",
+				".rstack-tab-row, rstack-tab-bar, rstack-history-panel",
 			).forEach((el) => el.remove());
 			body = appEl.innerHTML;
 		} else if (iframeWrap) {
diff --git a/website/canvas.html b/website/canvas.html
index 33d23ef..a82fcad 100644
--- a/website/canvas.html
+++ b/website/canvas.html
@@ -1916,10 +1916,7 @@
 					<button class="rstack-header__history-btn" id="history-btn" title="History"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg></button>
 					<rstack-history-panel type="canvas"></rstack-history-panel>
 				</div>
-				<div class="rstack-header__dropdown-wrap">
-					<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-space-settings space="" module-id="rspace"></rstack-space-settings>
-				</div>
+				<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>
 			</div>
 			<div class="rstack-header__center">
 				<rstack-mi></rstack-mi>
@@ -2492,7 +2489,7 @@
 			import { RStackSpaceSwitcher } from "@shared/components/rstack-space-switcher";
 			import { RStackTabBar } from "@shared/components/rstack-tab-bar";
 			import { RStackMi } from "@shared/components/rstack-mi";
-			import { RStackSpaceSettings } from "@shared/components/rstack-space-settings";
+
 			import { RStackHistoryPanel } from "@shared/components/rstack-history-panel";
 			import { RStackCommentBell } from "@shared/components/rstack-comment-bell";
 			import { rspaceNavUrl } from "@shared/url-helpers";
@@ -2508,17 +2505,19 @@
 			RStackSpaceSwitcher.define();
 			RStackTabBar.define();
 			RStackMi.define();
-			RStackSpaceSettings.define();
+
 			RStackHistoryPanel.define();
 			RStackCommentBell.define();
 
-			// ── Settings & history panel toggle (same as shell.ts) ──
+			// ── Settings & history panel toggle ──
 			document.getElementById("settings-btn")?.addEventListener("click", () => {
 				document.querySelector("rstack-history-panel")?.close();
-				document.querySelector("rstack-space-settings")?.toggle();
+				const sw = document.querySelector("rstack-space-switcher");
+				const slug = sw?.getAttribute("current") || "";
+				const name = sw?.getAttribute("name") || slug;
+				if (sw && slug) sw.openSettingsModal(slug, name);
 			});
 			document.getElementById("history-btn")?.addEventListener("click", () => {
-				document.querySelector("rstack-space-settings")?.close();
 				document.querySelector("rstack-history-panel")?.toggle();
 			});
 
@@ -2820,7 +2819,6 @@
 			if (tabBar) {
 				tabBar.setAttribute("space", communitySlug);
 				document.querySelector("rstack-collab-overlay")?.setAttribute("space", communitySlug);
-				document.querySelector("rstack-space-settings")?.setAttribute("space", communitySlug);
 
 				// Helper: look up a module's display name
 				function getModuleLabel(id) {
diff --git a/website/shell.ts b/website/shell.ts
index dbfc53a..5e11506 100644
--- a/website/shell.ts
+++ b/website/shell.ts
@@ -13,7 +13,7 @@ import { RStackAppSwitcher } from "../shared/components/rstack-app-switcher";
 import { RStackSpaceSwitcher } from "../shared/components/rstack-space-switcher";
 import { RStackTabBar } from "../shared/components/rstack-tab-bar";
 import { RStackMi } from "../shared/components/rstack-mi";
-import { RStackSpaceSettings } from "../shared/components/rstack-space-settings";
+
 import { RStackModuleSetup } from "../shared/components/rstack-module-setup";
 import { RStackHistoryPanel } from "../shared/components/rstack-history-panel";
 import { RStackOfflineIndicator } from "../shared/components/rstack-offline-indicator";
@@ -40,7 +40,7 @@ RStackAppSwitcher.define();
 RStackSpaceSwitcher.define();
 RStackTabBar.define();
 RStackMi.define();
-RStackSpaceSettings.define();
+
 RStackModuleSetup.define();
 RStackHistoryPanel.define();
 RStackOfflineIndicator.define();