npm - @ammduncan/easel - Versions diffs - 0.3.3 → 0.4.1 - Mend

@ammduncan/easel 0.3.3 → 0.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -2,6 +2,16 @@
 All notable changes to easel. This project adheres to [Semantic Versioning](https://semver.org/).
+## 0.4.1 — 2026-05-26
+### Fixed
+- **App-fidelity pushes (`kind:"app"`/`"mockup"`) can now be exported — they were silently hanging.** The 0.3.3 export fix (toSvg-based, rAF-free bridge) was only wired into `buildDefaultWrapper`'s *normal* branch and `injectBridge`. `buildDefaultWrapper` returns early for app-fidelity with a separate template, and that branch loaded the html-to-image CDN but never injected the `imageExportScript` bridge — so `kind:"app"`/`"mockup"` cards had **no `easel:image` handler at all**. Clicking export posted a message nothing listened for; the push never reported back and the 30s watchdog fired ("Export timed out…"). The bridge is now injected into the app-fidelity branch too. The `image-export` regression test now asserts the bridge is referenced by **both** `buildDefaultWrapper` branches plus `injectBridge`, so no single render path can lose it again. Verified live: an app-fidelity auth mockup that timed out now exports in ~0.5s.
+## 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/client/viewer.js CHANGED Viewed

@@ -859,6 +859,7 @@ ${STRUCTURAL_PRIMITIVES_CSS}
 </head>
 <body>
 ${body}
+<script>${imageExportScript()}</script>
 <script>${selfMeasureScript(pushId)}</script>
 </body>
 </html>`;

package/dist/http-server.js CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@ammduncan/easel",
-  "version": "0.3.3",
+  "version": "0.4.1",
   "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",