@ammduncan/easel 0.2.17 → 0.2.19

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 All notable changes to easel. This project adheres to [Semantic Versioning](https://semver.org/).
 
+## 0.2.19 — 2026-05-23
+
+### Added
+- **`.full-bleed` utility class for mockups embedded mid-presentation.** The common case: a presentation push with prose intro → embedded UI mockup → more prose. Prose should stay in the ~880px reading column, but the mockup should fill the full card width. `kind: "mockup"` can't help (it strips the frame from the whole push, prose included). Now wrapping just the mockup section in `<div class="full-bleed">` breaks it out of the body padding + 1400px prose cap to span the full card width (`width: 100vw; left: 50%; transform: translateX(-50%)` — inside the iframe 100vw === card width), while everything outside the wrapper stays in the reading column. Documented in the skill and the inline `push` tool description. Two cases, two tools: whole-push recreation → `kind: "mockup"`/`"app"`; embedded mockup → `.full-bleed` wrapper.
+
+## 0.2.18 — 2026-05-23
+
+### Reverted
+- **Reverted the 0.2.17 full-bleed *card* breakout.** That change made `kind: mockup/app` cards grow to near-full viewport width — wrong axis. The actual ask was for the *content* to fill the card edge-to-edge (no inner inset), with the card itself staying at the normal reading-column width. That's already handled by app-fidelity mode (0.2.13): the wrapper sets `body { margin:0; padding:0 }`, `.push-body` has no padding, and the iframe is `width:100%`, so mockup content fills the card to its rounded edges. Cards now stay column-width again; mockup content still bleeds to the card edges.
+
 ## 0.2.17 — 2026-05-23
 
 ### Added

package/dist/client/viewer.css

@@ -501,18 +501,6 @@ 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,11 +426,6 @@
     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");
@@ -705,6 +700,18 @@ body > h1, body > h2, body > h3, body > h4 {
 }
 body > *:first-child { margin-top: 0 !important; }
 body > *:last-child { margin-bottom: 0 !important; }
+/* Full-bleed escape hatch for embedded mockups mid-presentation. Wrap a
+   section in <div class="full-bleed"> and it spans the full card width,
+   breaking out of the body padding + 1400px prose max-width, while the prose
+   around it stays in the comfortable reading column. Inside the iframe, 100vw
+   === the card's width; left:50% + translateX(-50%) re-centres on the card. */
+.full-bleed {
+  width: 100vw;
+  position: relative;
+  left: 50%;
+  transform: translateX(-50%);
+  max-width: 100vw;
+}
 .wrap { display: block; }
 .kicker {
   display: block;

package/dist/mcp.js

@@ -139,6 +139,7 @@ export async function main() {
                     "═══ LAYOUT ═══\n" +
                     "• Stack desktop mockups VERTICALLY with labels ('Now', 'Proposed') — don't squeeze them side-by-side. The iframe is ~900px wide; two desktop screens at half-width crush columns, wrap headings to 3 lines, and turn tables unreadable.\n" +
                     "• Side-by-side is fine only for narrow mobile mockups, small cards, or short text columns that genuinely fit in half-width.\n" +
+                    "• Mockup embedded mid-explanation? Prose has a ~880px reading-width cap, but a mockup section should fill the full card. Wrap JUST the mockup in <div class=\"full-bleed\">…</div> — it breaks out of the body padding + prose cap to span the full card width, while surrounding prose stays in the reading column. (If the WHOLE push is a UI recreation, use kind:'mockup'/'app' instead — that strips the entire frame.)\n" +
                     "• One accent color, 3–4 instances max per card. Status colors (red/amber/green) only when state genuinely maps to status.\n\n" +
                     "═══ WHEN TO PUSH ═══\n" +
                     "A response that would otherwise contain: >2 paragraphs of explanation, any UI mockup, a diagram, a code diff, a ≥3-option comparison, or a multi-step progress view. Do NOT ask permission — push proactively. After pushing, reply in chat with ONE LINE: 'pushed to easel ↗ — #<index>'. Don't restate the card's content.\n\n" +

package/package.json

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

package/skills/using-easel/SKILL.md

@@ -265,6 +265,24 @@ Good shapes:
 
 ## Built-in helpers
 
+### Full-bleed mockups mid-presentation
+
+Most mockups appear *inside* an explanation push — prose intro, embedded UI mockup, more prose. The prose should stay in the comfortable reading column, but the mockup should fill the full card width. Wrap just the mockup section in `.full-bleed`:
+
+```html
+<p>Here's the proposed auth screen:</p>
+<div class="full-bleed">
+  <!-- desktop mockup — spans the full card width, escaping the prose max-width -->
+</div>
+<p>The left panel uses the existing brand assets…</p>
+```
+
+`.full-bleed` is injected into every presentation push. It breaks the wrapped element out of the body padding + 1400px prose cap to span the full card width, then everything outside it stays in the reading column. This is the right tool when a mockup is one section of a longer push.
+
+Two cases, two tools:
+- **Whole push is a mockup / app recreation** → `kind: "mockup"` (or `"app"`) on the push. Strips the entire presentation frame; content owns the canvas.
+- **Mockup embedded in an explanation** → leave the push as-is and wrap the mockup section in `<div class="full-bleed">`.
+
 ### Semantic chips
 
 ```html