fix(canvas): per-user forgotten shape filtering + lazy loading for perf

Shapes deleted (forgotten) by a user no longer reappear on reload —
forgottenBy[localDID] filtering in #applyDocToDOM and #applyPatchesToDOM
means one delete = gone permanently for that user while preserving CRDT
data for others.

IntersectionObserver on FolkShape base class defers heavy init (API calls,
iframes, feed polling) until shapes enter viewport (+500px margin),
reducing initial load from 100+ concurrent requests to ~5-10 visible.

Also: folk-rapp #getModulePath always uses subdomain routing (no subpath
fallback), and DID re-syncs on auth-change events.

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

lib/community-sync.ts

@@ -166,6 +166,7 @@ export class CommunitySync extends EventTarget {
 	#syncedDebounceTimer: ReturnType<typeof setTimeout> | null = null;
 	#initialSyncFired = false;
 	#wsUrl: string | null = null;
+	#localDID: string = '';
 
 	// ── Undo/Redo state ──
 	#undoStack: UndoEntry[] = [];
@@ -195,6 +196,11 @@ export class CommunitySync extends EventTarget {
 		}
 	}
 
+	/** Set the local user's DID so forgotten-shape filtering is per-user. */
+	setLocalDID(did: string): void {
+		this.#localDID = did;
+	}
+
 	/**
 	 * Load document and sync state from offline cache.
 	 * Call BEFORE connect() to show cached content immediately.
@@ -878,9 +884,14 @@ export class CommunitySync extends EventTarget {
 		for (const [id, shapeData] of Object.entries(shapes)) {
 			const d = shapeData as Record<string, unknown>;
 			if (d.deleted === true) continue; // Deleted: not in DOM
-			this.#applyShapeToDOM(shapeData);
+			// Skip shapes this user has forgotten — one delete = gone from their view
-			// If forgotten (faded), emit state-changed so canvas can apply visual
 			const fb = d.forgottenBy;
+			if (this.#localDID && fb && typeof fb === 'object'
+				&& (fb as Record<string, number>)[this.#localDID]) {
+				continue;
+			}
+			this.#applyShapeToDOM(shapeData);
+			// If forgotten by others (but not this user), emit state-changed for fade visual
 			if (fb && typeof fb === 'object' && Object.keys(fb).length > 0) {
 				this.dispatchEvent(new CustomEvent("shape-state-changed", {
 					detail: { shapeId: id, state: 'forgotten', data: shapeData }
@@ -945,6 +956,14 @@ export class CommunitySync extends EventTarget {
 					const d = shapeData as Record<string, unknown>;
 					const state = this.getShapeVisualState(shapeId);
 
+					// Skip shapes this user has forgotten — don't create/update DOM
+					const fb = d.forgottenBy;
+					if (this.#localDID && fb && typeof fb === 'object'
+						&& (fb as Record<string, number>)[this.#localDID]) {
+						this.#removeShapeFromDOM(shapeId);
+						continue;
+					}
+
 					if (state === 'deleted') {
 						// Hard-deleted: remove from DOM
 						this.#removeShapeFromDOM(shapeId);
@@ -952,7 +971,7 @@ export class CommunitySync extends EventTarget {
 							detail: { shapeId, state: 'deleted', data: shapeData }
 						}));
 					} else if (state === 'forgotten') {
-						// Forgotten: keep in DOM, emit state change for fade visual
+						// Forgotten by others: keep in DOM, emit state change for fade visual
 						this.#applyShapeToDOM(shapeData);
 						this.dispatchEvent(new CustomEvent("shape-state-changed", {
 							detail: { shapeId, state: 'forgotten', data: shapeData }

lib/folk-embed.ts

@@ -222,6 +222,7 @@ export class FolkEmbed extends FolkShape {
 
 	#url: string | null = null;
 	#error: string | null = null;
+	#embedRendered = false;
 
 	get url() {
 		return this.#url;
@@ -320,15 +321,34 @@ export class FolkEmbed extends FolkShape {
 			this.dispatchEvent(new CustomEvent("close"));
 		});
 
-		// If URL is already set, render embed
+		// Defer embed rendering until shape enters viewport
 		if (this.#url) {
-			const embedUrl = transformUrl(this.#url);
+			if (this.hasBeenVisible) {
-			this.#renderEmbed(content, urlInputContainer, titleText, headerTitle, this.#url, embedUrl);
+				const embedUrl = transformUrl(this.#url);
+				this.#renderEmbed(content, urlInputContainer, titleText, headerTitle, this.#url, embedUrl);
+			} else {
+				// Show URL text as lightweight placeholder
+				titleText.textContent = getDisplayTitle(this.#url);
+			}
 		}
 
 		return root;
 	}
 
+	protected override onBecameVisible(): void {
+		if (this.#url && !this.#embedRendered) {
+			const root = this.renderRoot as ShadowRoot;
+			const content = root.querySelector(".content") as HTMLElement;
+			const urlInputContainer = root.querySelector(".url-input-container") as HTMLElement;
+			const titleText = root.querySelector(".title-text") as HTMLElement;
+			const headerTitle = root.querySelector(".header-title") as HTMLElement;
+			if (content && urlInputContainer && titleText && headerTitle) {
+				const embedUrl = transformUrl(this.#url);
+				this.#renderEmbed(content, urlInputContainer, titleText, headerTitle, this.#url, embedUrl);
+			}
+		}
+	}
+
 	#renderEmbed(
 		content: HTMLElement,
 		urlInputContainer: HTMLElement,
@@ -337,6 +357,7 @@ export class FolkEmbed extends FolkShape {
 		originalUrl: string,
 		embedUrl: string | null
 	) {
+		this.#embedRendered = true;
 		// Update header
 		titleText.textContent = getDisplayTitle(originalUrl);
 		const favicon = document.createElement("img");

lib/folk-feed.ts

@@ -64,8 +64,7 @@ export class FolkFeed extends FolkShape {
 	connectedCallback() {
 		super.connectedCallback();
 		this.#buildUI();
-		this.#fetchFeed();
+		// Defer API calls until shape is visible (onBecameVisible handles it)
-		this.#startAutoRefresh();
 	}
 
 	disconnectedCallback() {
@@ -73,6 +72,11 @@ export class FolkFeed extends FolkShape {
 		this.#stopAutoRefresh();
 	}
 
+	protected override onBecameVisible(): void {
+		this.#fetchFeed();
+		this.#startAutoRefresh();
+	}
+
 	attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null) {
 		super.attributeChangedCallback(name, oldVal, newVal);
 		if (["source-module", "feed-id", "feed-filter", "max-items"].includes(name)) {

lib/folk-rapp.ts

@@ -634,6 +634,7 @@ export class FolkRApp extends FolkShape {
 	#refreshTimer: ReturnType<typeof setInterval> | null = null;
 	#modeToggleBtn: HTMLButtonElement | null = null;
 	#resolvedPorts: PortDescriptor[] | null = null;
+	#contentLoaded = false;
 
 	get moduleId() { return this.#moduleId; }
 	set moduleId(value: string) {
@@ -815,9 +816,13 @@ export class FolkRApp extends FolkShape {
 		// Register for enabled-state broadcasts
 		FolkRApp.#instances.add(this);
 
-		// Load content
+		// Defer heavy content loading until shape enters viewport
 		if (this.#moduleId) {
-			this.#renderContent();
+			if (this.hasBeenVisible) {
+				this.#renderContent();
+			} else {
+				this.#showLoading();
+			}
 		} else {
 			this.#showPicker();
 		}
@@ -825,8 +830,8 @@ export class FolkRApp extends FolkShape {
 		return root;
 	}
 
-	disconnectedCallback() {
+	override disconnectedCallback() {
-		super.disconnectedCallback?.();
+		super.disconnectedCallback();
 		FolkRApp.#instances.delete(this);
 		if (this.#messageHandler) {
 			window.removeEventListener("message", this.#messageHandler);
@@ -838,6 +843,23 @@ export class FolkRApp extends FolkShape {
 		}
 	}
 
+	protected override onBecameVisible(): void {
+		if (this.#moduleId && !this.#contentLoaded) {
+			this.#renderContent();
+		}
+	}
+
+	#showLoading() {
+		if (!this.#contentEl) return;
+		const meta = MODULE_META[this.#moduleId];
+		this.#contentEl.innerHTML = `
+			<div class="rapp-loading">
+				<div class="spinner"></div>
+				<span>${meta?.name || this.#moduleId}</span>
+			</div>
+		`;
+	}
+
 	#buildSwitcher(switcherEl: HTMLElement) {
 		const enabledSet = FolkRApp.enabledModuleIds
 			?? ((window as any).__rspaceEnabledModules ? new Set((window as any).__rspaceEnabledModules as string[]) : null);
@@ -955,16 +977,9 @@ export class FolkRApp extends FolkShape {
 		}
 	}
 
-	/** Derive the base module URL path, accounting for subdomain routing */
+	/** Derive the base module URL path — spaces are always subdomains */
 	#getModulePath(): string {
-		if (!this.#spaceSlug) {
+		return `/${this.#moduleId}`;
-			const pathParts = window.location.pathname.split("/").filter(Boolean);
-			if (pathParts.length >= 1) this.#spaceSlug = pathParts[0];
-		}
-		const space = this.#spaceSlug || "demo";
-		const hostname = window.location.hostname;
-		const onSubdomain = hostname.split(".").length >= 3 && hostname.startsWith(space + ".");
-		return onSubdomain ? `/${this.#moduleId}` : `/${space}/${this.#moduleId}`;
 	}
 
 	/** Check if this shape's module is currently disabled */
@@ -1014,6 +1029,8 @@ export class FolkRApp extends FolkShape {
 	#renderContent() {
 		if (!this.#contentEl || !this.#moduleId) return;
 
+		this.#contentLoaded = true;
+
 		// Block rendering if module is disabled
 		if (this.#isModuleDisabled()) { this.#showDisabled(); return; }
 

lib/folk-shape.ts

@@ -224,6 +224,32 @@ export class FolkShape extends FolkElement {
 	static tagName = "folk-shape";
 	static styles = styles;
 
+	// ── Viewport-based lazy loading ──
+	static #visibilityObserver: IntersectionObserver | null = null;
+	static #ensureObserver(): IntersectionObserver {
+		if (!FolkShape.#visibilityObserver) {
+			FolkShape.#visibilityObserver = new IntersectionObserver(
+				(entries) => {
+					for (const entry of entries) {
+						const shape = entry.target as FolkShape;
+						if (entry.isIntersecting && !shape.#hasBeenVisible) {
+							shape.#hasBeenVisible = true;
+							shape.onBecameVisible();
+						}
+					}
+				},
+				{ rootMargin: '500px' }
+			);
+		}
+		return FolkShape.#visibilityObserver;
+	}
+
+	#hasBeenVisible = false;
+	get hasBeenVisible(): boolean { return this.#hasBeenVisible; }
+
+	/** Called once when shape first enters viewport (+500px margin). Override to defer heavy init. */
+	protected onBecameVisible(): void {}
+
 	#internals = this.attachInternals();
 	#attrWidth: Dimension = 0;
 	#attrHeight: Dimension = 0;
@@ -466,6 +492,16 @@ export class FolkShape extends FolkElement {
 		return root;
 	}
 
+	override connectedCallback() {
+		super.connectedCallback();
+		FolkShape.#ensureObserver().observe(this);
+	}
+
+	override disconnectedCallback() {
+		super.disconnectedCallback();
+		FolkShape.#visibilityObserver?.unobserve(this);
+	}
+
 	getTransformDOMRect() {
 		return this.#readonlyRect;
 	}

website/canvas.html

@@ -2563,6 +2563,9 @@
 					window.__communitySync?.disconnect?.();
 					window.location.href = "/";
 				}
+
+				// Re-sync DID for forgotten-shape filtering after auth changes
+				window.__communitySync?.setLocalDID?.(getLocalDID());
 			});
 
 			// Load module list for app switcher and tab bar + menu
@@ -3217,6 +3220,7 @@
 			// Initialize offline store and CommunitySync
 			const offlineStore = new OfflineStore();
 			const sync = new CommunitySync(communitySlug, offlineStore);
+			sync.setLocalDID(getLocalDID());
 			window.__communitySync = sync;
 
 			// Wire history panel to CommunitySync doc