@ammduncan/easel 0.2.18 → 0.2.20

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 All notable changes to easel. This project adheres to [Semantic Versioning](https://semver.org/).
 
+## 0.2.20 — 2026-05-23
+
+### Fixed
+- **Prose reading-width cap silently missed when content was wrapped in `.wrap`.** The 880px cap only targeted direct body children (`body > p`, `body > h1`, …). But the skill recommends wrapping push content in `<div class="wrap">`, so prose became `body > .wrap > p` and the selector never matched — prose stretched the full card width (defeating the whole point of the reading column, and making the 0.2.19 full-bleed demo look like "everything's wide" rather than "prose narrow, mockup wide"). Extended the cap to also match one level deep through `.wrap`. `.full-bleed` was unaffected (it escapes via viewport units regardless of nesting).
+
+## 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

package/dist/client/viewer.js

@@ -693,13 +693,32 @@ body {
   body { max-width: 1600px; }
 }
 /* Constrain prose to a comfortable reading length, but let visual blocks
-   (cards, grids, tables, mockups) use the full card width. */
+   (cards, grids, tables, mockups) use the full card width. Match prose both
+   as direct body children AND one level deep through a `.wrap` container —
+   the skill recommends wrapping content in <div class="wrap">, and without
+   the `.wrap >` branch the cap silently misses and prose stretches full width.
+   `.full-bleed` still escapes via viewport units regardless of nesting. */
 body > p, body > .deck, body > .lede, body > ul, body > ol, body > blockquote,
-body > h1, body > h2, body > h3, body > h4 {
+body > h1, body > h2, body > h3, body > h4,
+body > .wrap > p, body > .wrap > .deck, body > .wrap > .lede,
+body > .wrap > ul, body > .wrap > ol, body > .wrap > blockquote,
+body > .wrap > h1, body > .wrap > h2, body > .wrap > h3, body > .wrap > h4 {
   max-width: 880px;
 }
 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.18",
+  "version": "0.2.20",
   "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