@ammduncan/easel 0.3.0 → 0.3.1

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes to easel. This project adheres to [Semantic Versioning](https://semver.org/).
 
+## 0.3.1 — 2026-05-26
+
+### Fixed
+- **Prose measure tightened from ~90 to ~66 characters per line.** The reading-column cap was `max-width: 880px`, which at the 18px body font produces ~90-character lines — past WCAG 1.4.8's 80-char ceiling and well past Bringhurst's 45–75 comfortable range. Changed to `max-width: 56ch`. The `ch` unit is the width of the "0" glyph and proportional Inter averages narrower, so 56ch renders ~66 actual characters — the reading-measure sweet spot. (`ch` scales with font-size, so headings stay proportional; short headings never hit the cap, so it's load-bearing only on body paragraphs, which is correct.)
+- **`.full-bleed` now has vertical breathing room.** It only set horizontal margins, so a paragraph after an embedded mockup hugged the frame with no gap. Added `margin: 32px 0`; it collapses correctly against adjacent prose margins (32px, not 64) and the existing first/last-child margin resets still zero it at the card's top/bottom edge.
+
 ## 0.3.0 — 2026-05-26
 
 ### Fixed

package/dist/client/viewer.js

@@ -829,7 +829,10 @@ 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;
+  /* ~56ch of "0"-width lands ~66 actual characters in proportional Inter
+     (avg glyph is narrower than "0"), i.e. Bringhurst's reading-measure sweet
+     spot — not 56 literal characters. */
+  max-width: 56ch;
 }
 body > *:first-child { margin-top: 0 !important; }
 body > *:last-child { margin-bottom: 0 !important; }
@@ -840,12 +843,13 @@ body > *:last-child { margin-bottom: 0 !important; }
    stays as a gutter, so neither the mockup nor the surrounding text ever touches
    the card border. (The name is historical — it's "full content width", not
    "bleed to the card edge".) Capped at 100% of the content column, which the
-   body's max-width already limits to desktop-realistic proportions. */
+   body's max-width already limits to desktop-realistic proportions.
+   Vertical margin gives an embedded mockup breathing room from the prose above
+   and below it (without it, the next paragraph hugs the frame). */
 .full-bleed {
   width: 100%;
   max-width: 100% !important;
-  margin-left: 0;
-  margin-right: 0;
+  margin: 32px 0;
 }
 .wrap { display: block; }
 .kicker {

package/package.json

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