@ammduncan/easel 0.2.16 → 0.2.17

package/CHANGELOG.md

@@ -2,6 +2,11 @@
 
 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

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");

package/package.json

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