@ammduncan/easel 0.3.3 → 0.4.0

package/CHANGELOG.md

@@ -2,6 +2,11 @@
 
 All notable changes to easel. This project adheres to [Semantic Versioning](https://semver.org/).
 
+## 0.4.0 — 2026-05-26
+
+### Added
+- **Remote images are now inlined server-side at push time, so pushes that embed cross-origin images export correctly.** A push that referenced a remote image (e.g. a mobbin.com screenshot in an `app`/`mockup` recreation) rendered fine on screen but **couldn't be exported to PNG/PDF**: the browser blocks cross-origin images from canvas rasterisation (CORS), and drawing one taints the canvas so `toDataURL` throws — export would stall until the 30s watchdog fired (see 0.3.3). The fix moves the fetch to the server: `POST /api/push` now scans incoming HTML for remote `<img src>` and CSS `url(...)` references, fetches each server-side (no CORS limit), and rewrites them to self-contained `data:` URLs before storing the push. Exports then work, and the push survives the original URL later expiring (mobbin's `…/mcp/short/…` links are ephemeral). Fetches run in parallel, each bounded by an 8s timeout with an 8MB size cap and an image-content-type check; a URL that can't be inlined (timeout, non-image, too large, network error) is left untouched — it still displays, just won't appear in an export — so a dead link degrades gracefully instead of failing the push. Opt out with `EASEL_INLINE_IMAGES=0`. Covered by `tests/unit/inline-images.test.mjs`.
+
 ## 0.3.3 — 2026-05-26
 
 ### Fixed

package/dist/http-server.js

@@ -6,6 +6,7 @@ import { appendPush, deletePush, deleteSession, getSessionView, listSessionSumma
 import { readConfig, writeConfig } from "./config-store.js";
 import { clearLockIfMine, writeLock } from "./server-manager.js";
 import { resolvePort } from "./paths.js";
+import { inlineRemoteImages } from "./inline-images.js";
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const CLIENT_DIR = resolve(__dirname, "client");
 const clients = new Map();
@@ -157,7 +158,7 @@ export function startHttpServer() {
         const ok = deleteSession(id);
         res.json({ ok });
     });
-    app.post("/api/push", (req, res) => {
+    app.post("/api/push", async (req, res) => {
         const { sessionId, html, title, kind } = req.body ?? {};
         if (typeof sessionId !== "string" || !sessionId.trim()) {
             res.status(400).json({ error: "sessionId required" });
@@ -167,7 +168,24 @@ export function startHttpServer() {
             res.status(400).json({ error: "html required" });
             return;
         }
-        const push = appendPush(sessionId, { html, title, kind });
+        // Inline remote images server-side so the stored push is self-contained
+        // and exportable (cross-origin images are CORS-blocked from client-side
+        // rasterisation). Best-effort: on any failure we store the original html.
+        let storedHtml = html;
+        if (process.env.EASEL_INLINE_IMAGES !== "0") {
+            try {
+                const result = await inlineRemoteImages(html);
+                storedHtml = result.html;
+                if (result.failed.length > 0) {
+                    console.warn(`[easel] ${result.failed.length} remote image(s) left un-inlined (won't export): ` +
+                        result.failed.map((f) => `${f.url} — ${f.reason}`).join("; "));
+                }
+            }
+            catch (err) {
+                console.warn("[easel] image inlining failed; storing original html:", err);
+            }
+        }
+        const push = appendPush(sessionId, { html: storedHtml, title, kind });
         touchSession(sessionId);
         broadcast(sessionId, "push", push);
         if (Math.random() < 0.05) {

package/dist/inline-images.js

@@ -0,0 +1,91 @@
+/**
+ * Inline remote images into pushed HTML so exports work.
+ *
+ * Cross-origin images (e.g. mobbin screenshots) render on screen but can't be
+ * rasterised client-side: fetching them for inlining is CORS-blocked, and
+ * drawing a cross-origin image taints the canvas so PNG/PDF export throws. We
+ * fetch them server-side (no CORS) at push time and rewrite the references to
+ * self-contained `data:` URLs, so the stored push exports cleanly and survives
+ * the original URL later expiring.
+ *
+ * A remote URL that can't be inlined (timeout, non-image, too large, network
+ * error) is left untouched — it still displays cross-origin, it just won't
+ * appear in an export — so a dead link degrades gracefully instead of failing
+ * the push. Only `http(s)` URLs are touched; `data:`, `blob:`, and relative
+ * references are left alone.
+ */
+const PER_IMAGE_TIMEOUT_MS = 8000;
+const MAX_IMAGE_BYTES = 8_000_000;
+// `src="https://…"` (img/source/…) and CSS `url(https://…)` with optional quotes.
+// Capture group 2 is the URL in both.
+const URL_PATTERNS = [
+    /\bsrc\s*=\s*(["'])(https?:\/\/[^"']+?)\1/gi,
+    /url\(\s*(["']?)(https?:\/\/[^)"']+?)\1\s*\)/gi,
+];
+function collectRemoteUrls(html) {
+    const urls = new Set();
+    for (const pattern of URL_PATTERNS) {
+        const re = new RegExp(pattern.source, pattern.flags);
+        let match;
+        while ((match = re.exec(html)) !== null) {
+            urls.add(match[2]);
+        }
+    }
+    return [...urls];
+}
+async function fetchAsDataUri(url, fetchImpl) {
+    const ac = new AbortController();
+    const timer = setTimeout(() => ac.abort(), PER_IMAGE_TIMEOUT_MS);
+    try {
+        const res = await fetchImpl(url, { signal: ac.signal, redirect: "follow" });
+        if (!res.ok) {
+            throw new Error(`HTTP ${res.status}`);
+        }
+        const type = (res.headers.get("content-type") || "").split(";")[0].trim();
+        if (!type.startsWith("image/")) {
+            throw new Error(`not an image (${type || "unknown content-type"})`);
+        }
+        const buf = Buffer.from(await res.arrayBuffer());
+        if (buf.byteLength > MAX_IMAGE_BYTES) {
+            throw new Error(`too large (${buf.byteLength} bytes)`);
+        }
+        return `data:${type};base64,${buf.toString("base64")}`;
+    }
+    finally {
+        clearTimeout(timer);
+    }
+}
+/**
+ * Fetch every remote image referenced in `html` and rewrite the references to
+ * `data:` URIs. Fetches run in parallel, each bounded by its own timeout, so
+ * total latency is roughly the slowest single image, not the sum.
+ *
+ * @param fetchImpl - injectable for tests; defaults to global `fetch`.
+ */
+export async function inlineRemoteImages(html, fetchImpl = fetch) {
+    const urls = collectRemoteUrls(html);
+    if (urls.length === 0) {
+        return { html, inlined: 0, failed: [] };
+    }
+    const dataUriByUrl = new Map();
+    const failed = [];
+    await Promise.all(urls.map(async (url) => {
+        try {
+            dataUriByUrl.set(url, await fetchAsDataUri(url, fetchImpl));
+        }
+        catch (err) {
+            failed.push({ url, reason: err instanceof Error ? err.message : String(err) });
+        }
+    }));
+    // Swap each URL inside its matched attribute/url() context only, so a URL
+    // that is a prefix of another can't be corrupted by a blind global replace.
+    let out = html;
+    for (const pattern of URL_PATTERNS) {
+        const re = new RegExp(pattern.source, pattern.flags);
+        out = out.replace(re, (full, _quote, url) => {
+            const dataUri = dataUriByUrl.get(url);
+            return dataUri ? full.replace(url, dataUri) : full;
+        });
+    }
+    return { html: out, inlined: dataUriByUrl.size, failed };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ammduncan/easel",
-  "version": "0.3.3",
+  "version": "0.4.0",
   "description": "A live browser tab for every Claude Code (and MCP) session. The push MCP tool appends HTML cards to a scrolling feed you keep open in split-screen.",
   "type": "module",
   "license": "MIT",