From 4819852b14ce3b800e86aea1f8da2879a041ca9f Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Mon, 2 Mar 2026 22:51:35 -0800
Subject: [PATCH 1/3] fix: extract inline <style> blocks in tab-cache for
 canvas toolbar rendering

The tab cache's extractContent() only collected <link> stylesheets, missing
inline <style> blocks. The canvas toolbar CSS is entirely inline, causing
unstyled toolbar when switching to the rSpace tab via tab cache.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 shared/tab-cache.ts | 26 +++++++++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/shared/tab-cache.ts b/shared/tab-cache.ts
index 24cb6f4..06d34cb 100644
--- a/shared/tab-cache.ts
+++ b/shared/tab-cache.ts
@@ -135,7 +135,7 @@ export class TabCache {
 			this.panes.set(moduleId, pane);
 
 			// Load module-specific assets
-			this.loadAssets(content.scripts, content.styles);
+			this.loadAssets(content.scripts, content.styles, content.inlineStyles, moduleId);
 
 			// Update shell state
 			this.currentModuleId = moduleId;
@@ -159,6 +159,7 @@ export class TabCache {
 		title: string;
 		scripts: string[];
 		styles: string[];
+		inlineStyles: string[];
 	} | null {
 		const parser = new DOMParser();
 		const doc = parser.parseFromString(html, "text/html");
@@ -197,11 +198,20 @@ export class TabCache {
 			styles.push(href);
 		});
 
-		return { body, title, scripts, styles };
+		// Extract inline <style> blocks (exclude shell-embedded styles)
+		const inlineStyles: string[] = [];
+		doc.querySelectorAll("head style").forEach((s) => {
+			const css = s.textContent || "";
+			// Skip the shell's own embedded styles (tab-pane, spinner, etc.)
+			if (css.includes(".rspace-tab-pane")) return;
+			if (css.trim()) inlineStyles.push(css);
+		});
+
+		return { body, title, scripts, styles, inlineStyles };
 	}
 
 	/** Load script and style assets (idempotent — browsers deduplicate module scripts) */
-	private loadAssets(scripts: string[], styles: string[]): void {
+	private loadAssets(scripts: string[], styles: string[], inlineStyles: string[] = [], moduleId?: string): void {
 		for (const src of scripts) {
 			const el = document.createElement("script");
 			el.type = "module";
@@ -217,6 +227,16 @@ export class TabCache {
 			el.href = href;
 			document.head.appendChild(el);
 		}
+
+		// Inject inline <style> blocks (tagged for deduplication)
+		for (let i = 0; i < inlineStyles.length; i++) {
+			const tag = `tab-style-${moduleId || "unknown"}-${i}`;
+			if (document.querySelector(`style[data-tab-style="${tag}"]`)) continue;
+			const el = document.createElement("style");
+			el.dataset.tabStyle = tag;
+			el.textContent = inlineStyles[i];
+			document.head.appendChild(el);
+		}
 	}
 
 	/** Show a specific pane and update shell state */

From 4f9b036cc0058db671d2ce3b20061fbdd1a58fd6 Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Mon, 2 Mar 2026 23:07:41 -0800
Subject: [PATCH 2/3] fix: preserve shape x/y/size on reload + fix eraser
 Automerge persistence

createRenderRoot() was unconditionally reading x/y/width/height from HTML
attributes, overwriting values already set via JS properties before DOM
insertion. This caused all shapes to stack at (0,0) with auto dimensions
on page reload. Now only reads from attributes when they exist.

Also fixed eraser: hardDeleteShape() was only in the click handler which
never fired because pointerdown already removed the target element.
Moved Automerge deletion into the pointerdown handler.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 lib/folk-shape.ts   | 18 +++++++++++++-----
 website/canvas.html |  9 +++++----
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/lib/folk-shape.ts b/lib/folk-shape.ts
index 493aaf6..81cf085 100644
--- a/lib/folk-shape.ts
+++ b/lib/folk-shape.ts
@@ -383,11 +383,19 @@ export class FolkShape extends FolkElement {
 
 		this.#updateCursors();
 
-		this.x = Number(this.getAttribute("x")) || 0;
-		this.y = Number(this.getAttribute("y")) || 0;
-		this.width = Number(this.getAttribute("width")) || "auto";
-		this.height = Number(this.getAttribute("height")) || "auto";
-		this.rotation = (Number(this.getAttribute("rotation")) || 0) * (Math.PI / 180);
+		// Only initialize from HTML attributes if they exist — when properties
+		// are set via JS before DOM insertion, attributes are absent and reading
+		// them would overwrite the already-set values with 0/"auto".
+		const attrX = this.getAttribute("x");
+		const attrY = this.getAttribute("y");
+		const attrW = this.getAttribute("width");
+		const attrH = this.getAttribute("height");
+		const attrR = this.getAttribute("rotation");
+		if (attrX !== null) this.x = Number(attrX) || 0;
+		if (attrY !== null) this.y = Number(attrY) || 0;
+		if (attrW !== null) this.width = Number(attrW) || "auto";
+		if (attrH !== null) this.height = Number(attrH) || "auto";
+		if (attrR !== null) this.rotation = (Number(attrR) || 0) * (Math.PI / 180);
 
 		this.#rect.transformOrigin = { x: 0, y: 0 };
 		this.#rect.rotateOrigin = { x: 0.5, y: 0.5 };
diff --git a/website/canvas.html b/website/canvas.html
index a92eed1..919ba56 100644
--- a/website/canvas.html
+++ b/website/canvas.html
@@ -3655,6 +3655,8 @@
 						// Find and remove the nearest SVG element under cursor
 						const hit = document.elementFromPoint(e.clientX, e.clientY);
 						if (hit && hit !== wbOverlay && wbOverlay.contains(hit)) {
+							const wbId = hit.getAttribute("data-wb-id");
+							if (wbId) sync.hardDeleteShape(wbId);
 							hit.remove();
 						}
 					}
@@ -3766,15 +3768,14 @@
 				}
 			});
 
-			// Eraser: click on existing SVG strokes to delete them + remove from Automerge
+			// Eraser click fallback — deletion is handled in pointerdown above,
+			// but catch any clicks that slip through (e.g. keyboard-triggered)
 			wbOverlay.addEventListener("click", (e) => {
 				if (wbTool !== "eraser") return;
 				const hit = e.target;
 				if (hit && hit !== wbOverlay && wbOverlay.contains(hit)) {
 					const wbId = hit.getAttribute("data-wb-id");
-					if (wbId) {
-						sync.hardDeleteShape(wbId);
-					}
+					if (wbId) sync.hardDeleteShape(wbId);
 					hit.remove();
 				}
 			});

From fef419f572dd804f997f672ec7e663f7040b6911 Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Mon, 2 Mar 2026 23:36:15 -0800
Subject: [PATCH 3/3] fix: folk-wrapper crash, service worker API exclusion,
 fal.ai endpoint

- folk-wrapper: createRenderRoot crashed because innerHTML="" removed the
  slot from DOM, making parentElement null on the next line. Save parent
  ref before clearing.

- sw.ts: module API paths (/space/module/api/...) weren't excluded from
  caching. Changed startsWith("/api/") to includes("/api/"). Also fixed
  catch handler returning undefined instead of a Response.

- image-gen: changed queue.fal.run to fal.run for synchronous responses.
  The queue endpoint returns request_id, not the actual image data.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 lib/folk-wrapper.ts | 9 +++++----
 server/index.ts     | 6 +++---
 website/sw.ts       | 6 +++---
 3 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/lib/folk-wrapper.ts b/lib/folk-wrapper.ts
index 4cdc5bb..3edaa36 100644
--- a/lib/folk-wrapper.ts
+++ b/lib/folk-wrapper.ts
@@ -292,11 +292,12 @@ export class FolkWrapper extends FolkShape {
 			<div class="tags"></div>
 		`;
 
-		// Replace existing content structure
+		// Replace existing content structure — save parent ref before clearing
 		const existingSlot = root.querySelector("slot");
-		if (existingSlot?.parentElement) {
-			existingSlot.parentElement.innerHTML = "";
-			existingSlot.parentElement.appendChild(wrapper);
+		const slotParent = existingSlot?.parentElement;
+		if (slotParent) {
+			slotParent.innerHTML = "";
+			slotParent.appendChild(wrapper);
 		}
 
 		// Get references
diff --git a/server/index.ts b/server/index.ts
index eb7bf3e..1178fa2 100644
--- a/server/index.ts
+++ b/server/index.ts
@@ -533,7 +533,7 @@ app.post("/api/image-gen", async (c) => {
 	};
 	const styledPrompt = (stylePrompts[style] || "") + prompt;
 
-	const res = await fetch("https://queue.fal.run/fal-ai/flux-pro/v1.1", {
+	const res = await fetch("https://fal.run/fal-ai/flux-pro/v1.1", {
 		method: "POST",
 		headers: {
 			Authorization: `Key ${FAL_KEY}`,
@@ -567,7 +567,7 @@ app.post("/api/video-gen/t2v", async (c) => {
 	const { prompt, duration } = await c.req.json();
 	if (!prompt) return c.json({ error: "prompt required" }, 400);
 
-	const res = await fetch("https://queue.fal.run/fal-ai/wan/v2.1", {
+	const res = await fetch("https://fal.run/fal-ai/wan/v2.1", {
 		method: "POST",
 		headers: {
 			Authorization: `Key ${FAL_KEY}`,
@@ -600,7 +600,7 @@ app.post("/api/video-gen/i2v", async (c) => {
 	const { image, prompt, duration } = await c.req.json();
 	if (!image) return c.json({ error: "image required" }, 400);
 
-	const res = await fetch("https://queue.fal.run/fal-ai/kling-video/v1/standard/image-to-video", {
+	const res = await fetch("https://fal.run/fal-ai/kling-video/v1/standard/image-to-video", {
 		method: "POST",
 		headers: {
 			Authorization: `Key ${FAL_KEY}`,
diff --git a/website/sw.ts b/website/sw.ts
index e20893d..d0f3eaa 100644
--- a/website/sw.ts
+++ b/website/sw.ts
@@ -40,12 +40,12 @@ self.addEventListener("fetch", (event) => {
 	// Skip non-http(s) schemes (chrome-extension://, etc.) — they can't be cached
 	if (!url.protocol.startsWith("http")) return;
 
-	// Skip WebSocket and API requests entirely
+	// Skip WebSocket and API requests entirely (including module APIs like /space/module/api/...)
 	if (
 		event.request.url.startsWith("ws://") ||
 		event.request.url.startsWith("wss://") ||
 		url.pathname.startsWith("/ws/") ||
-		url.pathname.startsWith("/api/")
+		url.pathname.includes("/api/")
 	) {
 		return;
 	}
@@ -101,7 +101,7 @@ self.addEventListener("fetch", (event) => {
 					}
 					return response;
 				})
-				.catch(() => cached as Response);
+				.catch(() => cached || new Response("Offline", { status: 503 }));
 			return cached || fetchPromise;
 		})
 	);