@ammduncan/easel 0.2.15 → 0.2.17

package/CHANGELOG.md

@@ -2,6 +2,17 @@
 
 All notable changes to easel. This project adheres to [Semantic Versioning](https://semver.org/).
 
+## 0.2.17 — 2026-05-23
+
+### Added
+- **`kind: "mockup"` / `"app"` pushes now break out to near-full viewport width.** Two width bounds applied to every push: (1) the wrapper's presentation frame (`max-width: 1400px` + body padding + 880px prose cap), removed by app-fidelity mode since 0.2.13; (2) the feed reading column (`min(94vw, 1600px)` ≈ ~1540px usable), which still squeezed desktop UI recreations. Now app-fidelity cards get `.push--full-bleed` — `width: min(98vw, 1920px)` centred on the viewport — so desktop screens render at real desktop proportions instead of being pinched into the reading column. Presentation pushes stay in the column as before.
+
+## 0.2.16 — 2026-05-23
+
+### Changed
+- **PDF export quality bumped back up after the 0.2.15 size fix landed.** 0.2.15 traded crispness for size (JPEG 0.92 + DPR 2 → ~800 KB per card) — visible JPEG artefacts on type at zoom. Bumped to JPEG quality 1.0 + DPR 4 for the PDF target. Same compression trick (JPEG-in-PDF vs PNG-in-PDF) keeps the file at ~3–8 MB per card instead of the original 300+ MB; the higher quality settings just bring text back to "razor sharp at any zoom" without giving up the size win.
+- PNG export unchanged (still lossless PNG @ DPR 4).
+
 ## 0.2.15 — 2026-05-23
 
 ### Fixed

package/dist/client/viewer.css

@@ -501,6 +501,18 @@ body {
   animation: pop-in 360ms cubic-bezier(0.2, 0.7, 0.2, 1);
 }
 
+/* App-fidelity pushes (kind: mockup / app) break out of the feed column to
+   near-full viewport width, so desktop UI recreations render at real desktop
+   proportions instead of being squeezed to the ~1540px reading column.
+   margin-left:50% moves the left edge to the column's centre line (which is
+   the viewport centre, since .feed is margin:0 auto), then translateX(-50%)
+   pulls back by half the element's own width → viewport-centred full bleed. */
+.push--full-bleed {
+  width: min(98vw, 1920px);
+  margin-left: 50%;
+  transform: translateX(-50%);
+}
+
 @keyframes pop-in {
   from { opacity: 0; transform: translateY(10px); }
   to { opacity: 1; transform: none; }

package/dist/client/viewer.js

@@ -426,6 +426,11 @@
     const card = document.createElement("article");
     card.className = "push";
     if (opts && opts.fresh) card.classList.add("fresh");
+    // App-fidelity pushes (mockup / app) break out of the feed column to
+    // near-full viewport width so desktop screens render at real proportions.
+    if (push.kind === "mockup" || push.kind === "app") {
+      card.classList.add("push--full-bleed");
+    }
     card.id = "push-" + push.id;
 
     const meta = document.createElement("div");
@@ -867,18 +872,21 @@ ${body}
           document.body ? document.body.scrollHeight : 0,
         );
         // PNG target → lossless PNG @ pixelRatio 4 for crisp standalone files.
-        // PDF target → JPEG @ quality 0.92 + pixelRatio 2. PDFs natively use
-        // DCT compression for embedded images, so JPEG-in-PDF stays small;
-        // PNG-in-PDF balloons (a tall card at DPR 4 produces 300+ MB PDFs).
+        // PDF target → JPEG @ quality 1.0 + pixelRatio 4. PDFs natively use
+        // DCT compression for embedded JPEGs, so even at max quality the PDF
+        // stays in the ~3-8 MB range for a typical card (vs ~300 MB if we
+        // embedded as PNG — see 0.2.15). 1.0 + DPR 4 keeps text razor-sharp
+        // at any zoom level; tuned down to 0.92 + DPR 2 in 0.2.15 dropped to
+        // ~800 KB but at the cost of visible JPEG artefacts on type.
         var rasterFn = format === "pdf" ? window.htmlToImage.toJpeg : window.htmlToImage.toPng;
         var rasterOpts = {
           backgroundColor: bgColor,
-          pixelRatio: format === "pdf" ? 2 : 4,
+          pixelRatio: 4,
           cacheBust: true,
           width: width,
           height: height,
         };
-        if (format === "pdf") rasterOpts.quality = 0.92;
+        if (format === "pdf") rasterOpts.quality = 1.0;
         rasterFn(document.documentElement, rasterOpts).then(function(dataUrl){
           parent.postMessage({ type: "easel:image-ready", pushId: pushId, dataUrl: dataUrl, filename: filename, format: format }, "*");
         }).catch(function(err){
@@ -903,7 +911,7 @@ ${body}
     const configScript =
       "<script src='https://cdn.jsdelivr.net/npm/html-to-image@1.11.13/dist/html-to-image.js'></script><script>(function(){function a(c){if(!c)return;if(c.theme==='light'||c.theme==='dark'){document.documentElement.setAttribute('data-theme',c.theme);window.__claudeDisplayTheme=c.theme}if(c.preset==='paper'||c.preset==='aurora'||c.preset==='slate'){document.documentElement.setAttribute('data-preset',c.preset);window.__claudeDisplayPreset=c.preset}if(c.density==='carded'||c.density==='flat'){document.documentElement.setAttribute('data-density',c.density);window.__claudeDisplayDensity=c.density}}a(" +
       JSON.stringify({ theme, preset, density }) +
-      ");window.addEventListener('message',function(e){if(!e||!e.data)return;if(e.data.type==='easel:config')a(e.data);if(e.data.type==='easel:theme')a({theme:e.data.theme});if(e.data.type==='easel:print'){try{window.print()}catch(_){}}if(e.data.type==='easel:image'){var pid=e.data.pushId;var fn=e.data.filename||'push.png';var fmt=e.data.format==='pdf'?'pdf':'png';var bg=e.data.bgColor||'#ffffff';if(!window.htmlToImage)return;var rfn=fmt==='pdf'?window.htmlToImage.toJpeg:window.htmlToImage.toPng;var ropts={backgroundColor:bg,pixelRatio:fmt==='pdf'?2:4,cacheBust:true};if(fmt==='pdf')ropts.quality=0.92;rfn(document.body,ropts).then(function(u){parent.postMessage({type:'easel:image-ready',pushId:pid,dataUrl:u,filename:fn,format:fmt},'*')}).catch(function(err){console.error(err);parent.postMessage({type:'easel:image-error',pushId:pid,format:fmt,message:(err&&err.message)?err.message:String(err)},'*')})}})})();</script>";
+      ");window.addEventListener('message',function(e){if(!e||!e.data)return;if(e.data.type==='easel:config')a(e.data);if(e.data.type==='easel:theme')a({theme:e.data.theme});if(e.data.type==='easel:print'){try{window.print()}catch(_){}}if(e.data.type==='easel:image'){var pid=e.data.pushId;var fn=e.data.filename||'push.png';var fmt=e.data.format==='pdf'?'pdf':'png';var bg=e.data.bgColor||'#ffffff';if(!window.htmlToImage)return;var rfn=fmt==='pdf'?window.htmlToImage.toJpeg:window.htmlToImage.toPng;var ropts={backgroundColor:bg,pixelRatio:4,cacheBust:true};if(fmt==='pdf')ropts.quality=1.0;rfn(document.body,ropts).then(function(u){parent.postMessage({type:'easel:image-ready',pushId:pid,dataUrl:u,filename:fn,format:fmt},'*')}).catch(function(err){console.error(err);parent.postMessage({type:'easel:image-error',pushId:pid,format:fmt,message:(err&&err.message)?err.message:String(err)},'*')})}})})();</script>";
     const measureScript = "<script>" + selfMeasureScript(pushId) + "</script>";
     const combined = configScript + measureScript;
     if (/<\/body>/i.test(html)) return html.replace(/<\/body>/i, combined + "</body>");

package/package.json

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