gutterpress 0.11.20-alpha.4 → 0.11.20-alpha.5

package/dist/{gutterpress-viewer-jr30yw8t.js → gutterpress-viewer-w7njnkj7.js}

@@ -119,7 +119,38 @@
   );
   position: relative;
   width: var(--gp-content-w);
-  height: var(--gp-content-h);
+  /* Exactly one column tall, but DEFINITE only where print's flow root is.
+     A page root's percentage height (\`.page { height: 100% }\`) resolves
+     against its containing block. In print that is the flow root (\`body\` or
+     \`main\`), whose height is auto in an ordinary book, so the percentage
+     computes to \`auto\` and MARKER_CSS's min-height cushion sizes the root.
+     Here the strip stands in as that containing block, and a plain
+     \`height: var(--gp-content-h)\` resolved the percentage to the full column:
+     the root ended exactly on the column's edge, and the same percentage
+     reached everything else the author's rule matched (\`[data-name="x"]\`
+     selects a block AND its heading, so the heading filled the root and the
+     paragraph after it spilled into the next column). Mid-run the next root's
+     forced break absorbed the spill; a run's LAST root left a blank column —
+     a preview page the PDF does not have. Measured on
+     examples/with-print-effects with \`height: 100%\` on its page blocks: print
+     5pp, viewer 8pp (a pin root is a run of its own, so three runs ended on
+     such a root).
+
+     \`height: 100%\` asks the strip's own containing block the question the
+     root asks print's: is the flow root's height definite? Auto there (the
+     ordinary book) is auto here, and the root's percentage is auto exactly
+     as in print. A definite flow root — \`html, body { height: 100% }\`, where
+     print's percentage DOES resolve to the page area — is definite here too
+     (measured, the same 5-root book: 6pp in both renderers). Either way the
+     min/max pair pins the used height, so the column height, to the content
+     height: \`clientHeight\` is still one column.
+
+     \`decorate.ts\`'s \`.gp-run\` wrapper sizes itself with \`min-height\` for the
+     same reason — a definite wrapper would resolve the percentage after the
+     run was measured and re-fragment it under its sheets. */
+  height: 100%;
+  min-height: var(--gp-content-h);
+  max-height: var(--gp-content-h);
   column-width: var(--gp-content-w);
   column-gap: var(--gp-col-gap);
   column-fill: auto;
@@ -1055,7 +1086,7 @@
   }
   function pinInsets(area, side, edges) {
     const binding = side === "recto" ? "left" : "right";
-    const inset = (edge) => !area || !edges.includes(edge) ? 0 : edge === binding ? area.safe : area.bleed + area.artSafe;
+    const inset = (edge) => !area || !edges.includes(edge) ? 0 : edge === binding ? area.gutter : area.bleed + area.artSafe;
     return { top: inset("top"), right: inset("right"), bottom: inset("bottom"), left: inset("left") };
   }
   var NO_PADDING = { top: 0, right: 0, bottom: 0, left: 0 };
@@ -1097,6 +1128,7 @@
         bleed: n(v.bleed),
         safe,
         artSafe: typeof v.artSafe === "number" ? n(v.artSafe) : safe,
+        gutter: typeof v.gutter === "number" ? n(v.gutter) : safe,
         preset: typeof v.preset === "string" ? v.preset : undefined,
         spec
       };
@@ -1213,7 +1245,7 @@
         continue;
       const stripTop = strip.getBoundingClientRect().top;
       const edge = prop === "break-after" ? rect.bottom : rect.top;
-      if (columnReserve((edge - stripTop) / cssZoomOf(strip), strip.clientHeight) === null)
+      if (columnReserve((edge - stripTop) / cssZoomOf(strip), stripMetrics(strip).height) === null)
         continue;
       const spacer = document.createElement("div");
       spacer.className = "gp-column-break-spacer";
@@ -1597,12 +1629,11 @@
       let previous = "";
       for (let pass = 0;pass < maxPasses; pass++) {
         passes = Math.max(passes, pass + 1);
-        const stride = strideOf(strip.el);
+        const { stride, height: colBottom } = stripMetrics(strip.el);
         const stripLeft = strip.el.getBoundingClientRect().left - strip.el.scrollLeft;
         const zoom = cssZoomOf(strip.el);
         const colOf = (r) => Math.floor(((r.left - stripLeft) / zoom + 1) / stride);
         const stripTop = strip.el.getBoundingClientRect().top;
-        const colBottom = strip.el.clientHeight;
         const plans = [];
         for (const table of tables) {
           const head = repeatingHead(table);
@@ -1773,7 +1804,7 @@
     const colGap = parseFloat(cs.columnGap) || 0;
     const h = parseFloat(cs.getPropertyValue("--gp-content-h"));
     const rowGap = parseFloat(cs.rowGap) || 0;
-    return { stride: w + colGap, rowStride: h + rowGap };
+    return { stride: w + colGap, rowStride: h + rowGap, height: h };
   }
   function rowStrideOf(strip) {
     return stripMetrics(strip).rowStride;
@@ -2225,16 +2256,23 @@
     const b = Math.max(0, area.bleed) * scale;
     const s = Math.max(0, area.safe) * scale;
     const a = Math.max(0, area.artSafe) * scale;
-    const [left, right] = side === "verso" ? [a, s] : [s, a];
+    const g = Math.max(0, area.gutter) * scale;
+    const [textLeft, textRight] = side === "verso" ? [s, g] : [g, s];
+    const [artLeft, artRight] = side === "verso" ? [a, g] : [g, a];
     const trim = { x: side === "verso" ? b : 0, y: b, w: Math.max(0, w - b), h: Math.max(0, h - 2 * b) };
     return {
       sheet: { x: 0, y: 0, w, h },
       trim,
-      safe: { x: trim.x + s, y: trim.y + s, w: Math.max(0, trim.w - 2 * s), h: Math.max(0, trim.h - 2 * s) },
+      safe: {
+        x: trim.x + textLeft,
+        y: trim.y + s,
+        w: Math.max(0, trim.w - textLeft - textRight),
+        h: Math.max(0, trim.h - 2 * s)
+      },
       safeArt: {
-        x: trim.x + left,
+        x: trim.x + artLeft,
         y: trim.y + a,
-        w: Math.max(0, trim.w - left - right),
+        w: Math.max(0, trim.w - artLeft - artRight),
         h: Math.max(0, trim.h - 2 * a)
       },
       bleed: b
@@ -2299,7 +2337,7 @@
   };
   function sheetArea(sheet) {
     const px = (name) => parseFloat(sheet.style.getPropertyValue(name)) || 0;
-    return { width: px("--gp-page-w") / PX_PER_PT, height: px("--gp-page-h") / PX_PER_PT, bleed: 0, safe: 0, artSafe: 0 };
+    return { width: px("--gp-page-w") / PX_PER_PT, height: px("--gp-page-h") / PX_PER_PT, bleed: 0, safe: 0, artSafe: 0, gutter: 0 };
   }
   var OVERLAY_CSS = `
 .root {
@@ -2311,12 +2349,12 @@
   --gp-ov-bleed-color: #e5484d; /* bleed layer: the band, and (darker) the trim line */
   --gp-ov-bleed-alpha: 0.45;    /* opacity of the bleed band */
   --gp-ov-trim-color: color-mix(in srgb, var(--gp-ov-bleed-color) 60%, #000); /* darker than the band so it reads as an edge */
-  --gp-ov-art-color: #00b4d8;   /* art layer: the art line (dotted, a second cue) */
+  --gp-ov-art-color: #a855f7;   /* art layer: the art line (dotted, a second cue) */
   --gp-ov-margins-color: #1a9c6b; /* margins layer: the page's own content box */
   --gp-ov-flag-width: 2px;      /* overflow flag outline */
   --gp-ov-warn: #f59e0b;        /* leaves the safe area */
   --gp-ov-error: #e5484d;       /* crosses the trim / leaves the sheet */
-  --gp-ov-intent: #8b5cf6;      /* placed on purpose */
+  --gp-ov-intent: #ec4899;      /* placed on purpose (pink: apart from the purple art line) */
   /* The overlay is scaled with the stage, so a 2px line would shrink with the
      zoom; dividing by it keeps lines the same width on screen at every zoom. */
   --gp-ov-w: calc(var(--gp-ov-width) / var(--gp-ov-z, 1));
@@ -2386,7 +2424,7 @@
 .gp-ov-flag[data-kind="intended"] {
   outline: var(--gp-ov-flag-w) dotted var(--gp-ov-intent);
 }
-/* the legend: small, fixed in a corner of the viewport, and the one part that takes the pointer (its link) */
+/* the legend: small, fixed in a corner of the viewport, and the one part that takes the pointer (its link and its fold button) */
 .gp-ov-legend {
   position: fixed;
   right: 12px;
@@ -2401,8 +2439,33 @@
   box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
   pointer-events: auto;
 }
-.gp-ov-legend > div + div { margin-top: 3px; }
+.gp-ov-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
+.gp-ov-body { margin-top: 6px; }
+.gp-ov-body > div + div { margin-top: 3px; }
 .gp-ov-legend a { color: #9cc2ff; }
+/* the fold button: a chevron made of two borders, down while the legend is open, up once it is folded to its header */
+.gp-ov-toggle {
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  cursor: pointer;
+}
+.gp-ov-toggle:focus-visible { outline: 2px solid #9cc2ff; }
+.gp-ov-toggle::before {
+  content: "";
+  width: 6px;
+  height: 6px;
+  border: solid currentColor;
+  border-width: 0 2px 2px 0;
+  transform: translateY(-2px) rotate(45deg);
+}
+.gp-ov-toggle[aria-expanded="false"]::before { transform: translateY(2px) rotate(-135deg); }
 .gp-ov-row { display: flex; align-items: flex-start; gap: 6px; }
 .gp-ov-swatch {
   flex: none;
@@ -2550,12 +2613,19 @@
   var ART_TAGS = new Set(["img", "svg", "video", "canvas"]);
   var inches = (px) => +(Math.abs(px) / 96).toFixed(2);
   var ptIn = (pt2) => `${+(pt2 / 72).toFixed(3)}in`;
+  var LEGEND_FOLD_KEY = "gutterpress.overlay-legend-collapsed";
+  var legendCollapsed = false;
+  try {
+    legendCollapsed = localStorage.getItem(LEGEND_FOLD_KEY) === "true";
+  } catch {}
   function legend(layers, area, summary) {
     const el = div("gp-ov-legend");
+    const body = div("gp-ov-body");
+    body.id = "gp-ov-body";
     const add = (cls, ...content) => {
       const line = div(cls);
       line.append(...content);
-      el.appendChild(line);
+      body.appendChild(line);
     };
     const row = (layer, name, text) => {
       const swatch = div("gp-ov-swatch");
@@ -2567,14 +2637,15 @@
       add("gp-ov-row", swatch, label);
     };
     const { bleedPt, safePt, artSafePt, counts } = summary;
+    const gutterPt = area?.gutter ?? safePt;
     if (layers.bleed) {
       row("bleed", "Bleed", bleedPt > 0 ? ` ${ptIn(bleedPt)} — top, bottom, outside; none at the binding` : " — none set (page.bleed in manifest.yaml)");
     }
     if (layers.safe) {
-      row("safe", "Safe area: text", safePt > 0 ? ` — ${ptIn(safePt)}, every edge` : " — none set (page.safe in manifest.yaml)");
+      row("safe", "Safe area: text", safePt <= 0 ? " — none set (page.safe in manifest.yaml)" : gutterPt === safePt ? ` — ${ptIn(safePt)}, every edge` : ` — ${ptIn(safePt)}; ${ptIn(gutterPt)} at the binding`);
     }
     if (layers.art) {
-      row("art", "Safe area: art", safePt <= 0 && artSafePt <= 0 ? " — none set (page.artSafe in manifest.yaml)" : artSafePt === safePt ? ` — ${ptIn(artSafePt)}, every edge` : ` — ${ptIn(artSafePt)} top, bottom, outside; ${ptIn(safePt)} at the binding`);
+      row("art", "Safe area: art", safePt <= 0 && artSafePt <= 0 ? " — none set (page.artSafe in manifest.yaml)" : artSafePt === gutterPt ? ` — ${ptIn(artSafePt)}, every edge` : ` — ${ptIn(artSafePt)} top, bottom, outside; ${ptIn(gutterPt)} at the binding`);
     }
     if (layers.margins)
       row("margins", "Page margins", " — your stylesheet's @page margins");
@@ -2610,6 +2681,30 @@
     const key = document.documentElement.dataset.overlayKey;
     if (key)
       add("gp-ov-note", `${key} hides`);
+    const title = document.createElement("b");
+    title.id = "gp-ov-title";
+    title.textContent = "Print overlays";
+    const toggle = document.createElement("button");
+    toggle.type = "button";
+    toggle.className = "gp-ov-toggle";
+    toggle.setAttribute("aria-labelledby", title.id);
+    toggle.setAttribute("aria-controls", body.id);
+    const fold = () => {
+      body.hidden = legendCollapsed;
+      toggle.setAttribute("aria-expanded", String(!legendCollapsed));
+      toggle.title = legendCollapsed ? "Show the legend" : "Hide the legend";
+    };
+    toggle.addEventListener("click", () => {
+      legendCollapsed = !legendCollapsed;
+      try {
+        localStorage.setItem(LEGEND_FOLD_KEY, String(legendCollapsed));
+      } catch {}
+      fold();
+    });
+    fold();
+    const head = div("gp-ov-head");
+    head.append(title, toggle);
+    el.append(head, body);
     return el;
   }
   function paintOverlay(pages, strips, area, layers) {
@@ -3029,7 +3124,7 @@
           overlayPages.push({ index: bookIndex, sheet, strip, padded: ctx.padded });
         }
         const rows = Math.max(1, Math.ceil((strip.pages + shift) / perRow));
-        run.style.height = `${rowStride * (rows - 1) + PX_PER_PT * g.height}px`;
+        run.style.minHeight = `${rowStride * (rows - 1) + PX_PER_PT * g.height}px`;
         run.style.width = `${stride * perRow}px`;
         const composed = !!strip.wrapCols && shift === 1 && !first;
         run.style.marginTop = composed ? `${-(prevPageH + sheetGap)}px` : "";
@@ -3117,7 +3212,7 @@
       }
     }
     function checkOverflow(strip, out) {
-      const h = strip.el.clientHeight;
+      const { height: h } = stripMetrics(strip.el);
       for (const el of Array.from(strip.el.querySelectorAll("figure,table,img,pre"))) {
         const r = el.getBoundingClientRect();
         if (r.height > h + 1) {

package/dist/{index-t13p8y08.js → index-bta8hc2q.js}

@@ -9,7 +9,7 @@ import {
   getAssetsDir,
   lastPageMode,
   parseSize
-} from "./index-gm5xbx5w.js";
+} from "./index-crys9951.js";
 import {
   countLinkAnnotations,
   getImageResolutions,
@@ -180,7 +180,8 @@ var DTRPG_PRESET = {
     tolerance: 0.5,
     bleed: 9,
     safe: 36,
-    artSafe: 18
+    artSafe: 18,
+    gutter: undefined
   },
   ink: {
     maxTac: 240,
@@ -267,7 +268,8 @@ var BOOK_PRESET = {
     tolerance: 0.5,
     bleed: undefined,
     safe: 18,
-    artSafe: undefined
+    artSafe: undefined,
+    gutter: undefined
   },
   ink: {
     maxTac: 400,
@@ -631,7 +633,8 @@ function resolveCustomPage(c, m) {
     tolerance: c.page?.tolerance ?? m.page?.tolerance ?? 0.5,
     bleed: c.page?.bleed ?? m.page?.bleed,
     safe: c.page?.safe ?? m.page?.safe,
-    artSafe: c.page?.artSafe ?? m.page?.artSafe
+    artSafe: c.page?.artSafe ?? m.page?.artSafe,
+    gutter: c.page?.gutter ?? m.page?.gutter
   };
 }
 function resolveWithPreset(cliOverrides, manifest, preset) {
@@ -1987,11 +1990,15 @@ var GUTTERPRESS_CSS = `
 
 /* sizes — AFTER the flow positions so max-width:100% lifts the floats' 50%
    cap at equal specificity */
-.gp-small { width: 25%; max-width: 100%; }
-.gp-medium { width: 50%; max-width: 100%; }
-.gp-large { width: 60%; max-width: 100%; }
-.gp-xl { width: 80%; max-width: 100%; }
-.gp-xxl { width: 90%; max-width: 100%; }
+.gp-size-10 { width: 10%; max-width: 100%; }
+.gp-size-20 { width: 20%; max-width: 100%; }
+.gp-size-30 { width: 30%; max-width: 100%; }
+.gp-size-40 { width: 40%; max-width: 100%; }
+.gp-size-50 { width: 50%; max-width: 100%; }
+.gp-size-60 { width: 60%; max-width: 100%; }
+.gp-size-70 { width: 70%; max-width: 100%; }
+.gp-size-80 { width: 80%; max-width: 100%; }
+.gp-size-90 { width: 90%; max-width: 100%; }
 
 /* float clearance presets — consumed by var(--gp-gap) in the float rules
    above and by .gp-shape's shape-margin below; --gp-gap itself is
@@ -2189,11 +2196,15 @@ var GP_CLASSES = new Set([
   "gp-center",
   "gp-full",
   "gp-bleed",
-  "gp-small",
-  "gp-medium",
-  "gp-large",
-  "gp-xl",
-  "gp-xxl",
+  "gp-size-10",
+  "gp-size-20",
+  "gp-size-30",
+  "gp-size-40",
+  "gp-size-50",
+  "gp-size-60",
+  "gp-size-70",
+  "gp-size-80",
+  "gp-size-90",
   "gp-tight",
   "gp-loose",
   "gp-columns",
@@ -2318,10 +2329,10 @@ import markdownItAttrs from "markdown-it-attrs";
 import markdownItFootnote from "markdown-it-footnote";
 
 // src/lib/markdown/gp-pin-scope.js
-function warn3(env, line, type, message, marker) {
+function warn3(env, line, type, message, severity) {
   if (!env.layoutWarnings)
     env.layoutWarnings = [];
-  env.layoutWarnings.push({ line, type, message, marker });
+  env.layoutWarnings.push(severity ? { line, type, message, severity } : { line, type, message });
 }
 function editDistance2(a, b) {
   let prev = Array.from({ length: b.length + 1 }, (_, j) => j);
@@ -2364,7 +2375,7 @@ function checkFlushArt(token, env, line) {
     return;
   if (!classes.some((c) => PIN_EDGES.includes(c)))
     return;
-  warn3(env, line, "flush_art", FLUSH_ART_MSG);
+  warn3(env, line, "flush_art", FLUSH_ART_MSG, "info");
 }
 function elementNameFor(token) {
   switch (token.type) {
@@ -3185,6 +3196,7 @@ function printAreaMeta(page) {
     bleed: page.bleed ?? 0,
     safe: page.safe ?? 0,
     artSafe: page.artSafe,
+    gutter: page.gutter,
     preset: page.preset,
     spec: page.spec
   });
@@ -3813,7 +3825,7 @@ import { satisfies, validRange } from "semver";
 // package.json
 var package_default = {
   name: "gutterpress",
-  version: "0.11.20-alpha.4",
+  version: "0.11.20-alpha.5",
   description: "Markdown-to-PDF converter for professional print layout using a native Chromium print engine and Ghostscript.",
   author: "itlackey",
   license: "MPL-2.0",
@@ -6875,11 +6887,11 @@ var inches = (pt) => `${+(pt / 72).toFixed(2)}in`;
 var check4 = {
   id: "pdf.print.safe-margins",
   name: "Safe margins",
-  description: "Fails when text sits closer to the trim than `page.safe` (DriveThruRPG: 0.5in on every edge). Text only: art is judged in the preview's safe-area overlay, not here. Skipped when `page.safe` is not set",
+  description: "Fails when text sits closer to the trim than `page.safe` (DriveThruRPG: 0.5in on every edge), or than `page.gutter` at the binding edge where one is set. Text only: art is judged in the preview's safe-area overlay, not here. Skipped when `page.safe` is not set",
   category: "pdf",
   phase: "post-build",
   async run(ctx) {
-    const { width, height, bleed = 0, safe = 0 } = ctx.config.page;
+    const { width, height, bleed = 0, safe = 0, gutter = safe } = ctx.config.page;
     if (!ctx.pdfPath || !safe)
       return [];
     const doc = await loadPdf(ctx.pdfPath);
@@ -6917,8 +6929,7 @@ var check4 = {
             ["bottom", Math.min(...ys) - trim.bottom],
             ["top", trim.top - Math.max(...ys)]
           ];
-          const [edge, gap] = gaps.reduce((worst, g) => g[1] < worst[1] ? g : worst);
-          const shortfall = safe - gap;
+          const [edge, shortfall] = gaps.map(([name, gap]) => [name, (name === "binding" ? gutter : safe) - gap]).reduce((worst, g) => g[1] > worst[1] ? g : worst);
           if (shortfall <= TOLERANCE_PT)
             continue;
           const text = item.str.trim();
@@ -6926,7 +6937,7 @@ var check4 = {
             severity: "error",
             message: `Page ${pageNum}: "${text.slice(0, 40)}${text.length > 40 ? "…" : ""}" is ${inches(shortfall)} too close to the ${edge} edge.`,
             file: ctx.pdfPath,
-            detail: `${rule}: text must stay at least ${inches(safe)} inside the trim on every edge.`,
+            detail: gutter === safe ? `${rule}: text must stay at least ${inches(safe)} inside the trim on every edge.` : `${rule}: text must stay at least ${inches(safe)} inside the trim, ${inches(gutter)} at the binding.`,
             code: "text-outside-safe-margin",
             data: { page: pageNum, edge, shortfallPt: +shortfall.toFixed(2) }
           }));
@@ -10867,7 +10878,7 @@ class PdfOutput {
       const rawPdf = pdfxMode ? path13.join(stage, "raw.pdf") : path13.resolve(pdfFile);
       await fsp2.mkdir(path13.dirname(path13.resolve(pdfFile)), { recursive: true });
       log.info("Rendering HTML to PDF via the Gutterpress engine (native Chromium pagination)");
-      const { buildNativePdf } = await import("./engine-7ha27n2b.js");
+      const { buildNativePdf } = await import("./engine-5fw55dfb.js");
       const engineDiagnostics = await buildNativePdf(htmlFile, rawPdf, {
         title: config.title,
         author: config.authors.length > 0 ? config.authors.join(", ") : undefined,

package/dist/{index-gm5xbx5w.js → index-crys9951.js}

@@ -148,7 +148,7 @@ import { fileURLToPath } from "node:url";
 var favicon_default = "./favicon-272ga6y0.ico";
 
 // src/assets/manifest.schema.json
-var manifest_schema_default = "./manifest.schema-13dfax80.json";
+var manifest_schema_default = "./manifest.schema-c4wfpg6g.json";
 
 // src/assets/preview/scripts/preview-interface.js
 var preview_interface_default = "./preview-interface-nnmrxyqm.js";
@@ -163,10 +163,10 @@ var preview_shell_default = "./preview-shell-wk9k3gcd.js";
 var CGATS21_CRPC1_default = "./CGATS21_CRPC1-g0e3k7kr.icc";
 
 // src/assets/engine/gutterpress-viewer.js
-var gutterpress_viewer_default = "./gutterpress-viewer-jr30yw8t.js";
+var gutterpress_viewer_default = "./gutterpress-viewer-w7njnkj7.js";
 
 // src/assets/engine/gutterpress-agent.js
-var gutterpress_agent_default = "./gutterpress-agent-mrdnwktc.js";
+var gutterpress_agent_default = "./gutterpress-agent-yvd8w8my.js";
 
 // src/assets/templates/book/manifest.yaml
 var manifest_default = "./manifest-n1gh3qw5.yaml";

package/dist/{index-ad95fws8.js → index-yw16cfm8.js}

@@ -19,7 +19,7 @@ import {
   stringValueAt,
   toFolioPage,
   wantsRecto
-} from "./index-gm5xbx5w.js";
+} from "./index-crys9951.js";
 import {
   launchChromium
 } from "./index-bt0qws5c.js";
@@ -49,7 +49,7 @@ function flushMargins(margin, edges) {
 }
 function pinInsets(area, side, edges) {
   const binding = side === "recto" ? "left" : "right";
-  const inset = (edge) => !area || !edges.includes(edge) ? 0 : edge === binding ? area.safe : area.bleed + area.artSafe;
+  const inset = (edge) => !area || !edges.includes(edge) ? 0 : edge === binding ? area.gutter : area.bleed + area.artSafe;
   return { top: inset("top"), right: inset("right"), bottom: inset("bottom"), left: inset("left") };
 }
 var NO_PADDING = { top: 0, right: 0, bottom: 0, left: 0 };

package/dist/index.js

@@ -154,14 +154,14 @@ import {
   testRemoteAccess,
   updateExtensions,
   validateProjectExtensions
-} from "./index-t13p8y08.js";
+} from "./index-bta8hc2q.js";
 import"./index-ht1bcqdd.js";
 import {
   BUILD_DIAGNOSTIC_CODES
-} from "./index-ad95fws8.js";
+} from "./index-yw16cfm8.js";
 import {
   BuildError
-} from "./index-gm5xbx5w.js";
+} from "./index-crys9951.js";
 import"./index-sth219v1.js";
 import {
   DEFAULT_PRINT_OPTS,

package/dist/lib/markdown/assemble.d.ts

@@ -44,7 +44,7 @@ export interface LayoutWarning {
     type: string;
     message: string;
     marker?: unknown;
-    /** Set only by a component's `validate`; absent means `"warning"`. */
+    /** Set by a component's `validate` and by `flush_art`; absent means `"warning"`. */
     severity?: "error" | "warning" | "info";
 }
 /**

package/dist/lib/markdown/gutterpress-css.d.ts

@@ -18,7 +18,7 @@
  * Also ships the author-facing `gp-*` image/block vocabulary (CLAUDE.md §0 —
  * a behavior broadly useful to non-technical authors belongs in core, not a
  * project layer). markdown-it-attrs is bundled by
- * default (renderer.ts), so `![Art](x.jpg){.gp-right .gp-small}` already
+ * default (renderer.ts), so `![Art](x.jpg){.gp-right .gp-size-30}` already
  * attaches the classes to the rendered `<img>` — these rules are what make
  * them actually do something print-safe. One vocabulary, no aliases: there
  * is no duplicate way to spell each layout (the desktop editor rewrites the
@@ -29,11 +29,11 @@
  *   .gp-right     — floats right, text wraps.
  *   .gp-center    — centers a block element.
  *   .gp-full      — fills the page's content width.
- *   .gp-small     — width 25% of the column. Sizes compose with any
- *   .gp-medium    — width 50%.        position (including .gp-pin, where
- *   .gp-large     — width 60%.        the % resolves against the page
- *   .gp-xl        — width 80%.        root: the page box, reaching the
- *   .gp-xxl       — width 90%.        paper on an edge a pin uses).
+ *   .gp-size-10 … .gp-size-90
+ *                 — width 10% … 90% of the column, in 10% steps. Sizes
+ *                   compose with any position (including .gp-pin, where
+ *                   the % resolves against the page root: the page box,
+ *                   reaching the paper on an edge a pin uses).
  *                   There is no 100% step: that is .gp-full, a position.
  *   .gp-tight     — float/shape clearance 0.5em (sets --gp-gap; default 1em).
  *   .gp-loose     — float/shape clearance 2em (sets --gp-gap).
@@ -132,7 +132,7 @@
  * is pinned. The pin's containing
  * block is the root's padding box, and the engine sets `--gp-pin-<edge>` on
  * the root to the art-safe line's distance from the sheet edge (the bleed
- * plus page.artSafe on the top, bottom and outside edge; page.safe at the
+ * plus page.artSafe on the top, bottom and outside edge; page.gutter at the
  * binding, from the manifest); `.gp-pin` reads them as its four insets.
  * `.gp-flush` zeroes them on the pin: the paper's edge. Under plain
  * markdown-it nothing sets them and every inset is 0.
@@ -151,7 +151,7 @@
  * carrying gp-left could start shifting; that is standards-tracking per
  * CLAUDE.md ("Chrome wins once it ships"), not a bug in the author's book.
  */
-export declare const GUTTERPRESS_CSS = "\n/* gp-* author image/block vocabulary. One vocabulary, gp-* only \u2014 the\n   pre-vocabulary utility names (.center/.float-left/.float-right/\n   .full-width/.full-bleed) were REMOVED when gp-* shipped; books rename\n   the classes in their markdown (see the migration note). Source ORDER is\n   the contract \u2014 see the doctrine comment above. */\n\n/* flow positions */\n.gp-left {\n  float: left;\n  margin: 0 var(--gp-gap, 1em) var(--gp-gap, 1em) 0;\n  max-width: 50%;\n}\n.gp-right {\n  float: right;\n  margin: 0 0 var(--gp-gap, 1em) var(--gp-gap, 1em);\n  max-width: 50%;\n}\n.gp-center {\n  display: block;\n  float: none;\n  margin-left: auto;\n  margin-right: auto;\n  max-width: 100%;\n}\n.gp-full {\n  display: block;\n  float: none;\n  width: 100%;\n  max-width: 100%;\n}\n@page gp-full-bleed { margin-left: 0; margin-right: 0; }\n.gp-bleed {\n  display: block;\n  float: none;\n  break-before: page;\n  page: gp-full-bleed;\n  max-width: none;\n  width: 100%;\n  margin-left: 0;\n  margin-right: 0;\n}\n\n/* sizes \u2014 AFTER the flow positions so max-width:100% lifts the floats' 50%\n   cap at equal specificity */\n.gp-small { width: 25%; max-width: 100%; }\n.gp-medium { width: 50%; max-width: 100%; }\n.gp-large { width: 60%; max-width: 100%; }\n.gp-xl { width: 80%; max-width: 100%; }\n.gp-xxl { width: 90%; max-width: 100%; }\n\n/* float clearance presets \u2014 consumed by var(--gp-gap) in the float rules\n   above and by .gp-shape's shape-margin below; --gp-gap itself is\n   author-settable CSS */\n.gp-tight { --gp-gap: 0.5em; }\n.gp-loose { --gp-gap: 2em; }\n\n/* column runs \u2014 plain CSS Multi-column, emitted by the core @columns marker\n   (markers.js): @columns [1-5] ... @end-columns is the ONE way to lay\n   content out in columns, and @column-break moves to the next column.\n   The classes below are the CSS that marker emits, not author vocabulary.\n\n   Permanent vocabulary, not a shim: Chromium implements multicol natively\n   and these rules are the standard properties verbatim, so there is no\n   spec gap here to remove later. Deliberately minimal \u2014 column-fill is\n   NOT set (the CSS initial balance applies).\n   Themes style a run through two tokens instead of writing column rules:\n     --gp-column-gap   default 1.5em\n     --gp-column-rule  default none (any column-rule shorthand value)\n   Both hooks sit at zero specificity (:where), so any author rule wins.\n   .gp-columns is two columns on its own; a count class (bare @columns\n   emits gp-columns-2) wins because it comes later at the same specificity. */\n:where(.gp-columns, .gp-columns-1, .gp-columns-2, .gp-columns-3, .gp-columns-4, .gp-columns-5) {\n  column-gap: var(--gp-column-gap, 1.5em);\n  column-rule: var(--gp-column-rule, none);\n}\n.gp-columns { columns: 2; }\n.gp-columns-1 { columns: 1; }\n.gp-columns-2 { columns: 2; }\n.gp-columns-3 { columns: 3; }\n.gp-columns-4 { columns: 4; }\n.gp-columns-5 { columns: 5; }\n\n/* fragmentation controls \u2014 generic pagination utilities for any element,\n   independent of the column vocabulary above (a book reached for\n   these just as often outside a multicol run: keeping a card whole,\n   forcing a section to start a fresh page). Standard properties only \u2014\n   this project is Chromium-only (CLAUDE.md), so there are no legacy\n   page-break-* twins to also emit. One name each. */\n.gp-no-break { break-inside: avoid; }\n.gp-break-before { break-before: page; }\n\n/* shape wrap \u2014 text follows the image's alpha silhouette instead of its\n   rectangular box. shape-outside only applies to floats, so this is inert\n   without .gp-left/.gp-right (and under .gp-pin, which un-floats). The\n   shape URL cannot be written in CSS (url() contexts can't read attr()),\n   so the image renderer rule (images.ts) mirrors the src into an inline\n   --gp-shape:url(...) custom property whenever it sees this class --\n   authors only ever type the class. threshold 0.2 ignores near-transparent\n   anti-aliasing halos; shape-margin shares the float-gap vocabulary. */\nimg.gp-shape {\n  shape-outside: var(--gp-shape);\n  shape-image-threshold: 0.2;\n  shape-margin: var(--gp-gap, 1em);\n}\n\n/* pin \u2014 within the nearest positioned ancestor (.page/.spread, rule above).\n   The four insets are the pin box: 0 (the text block's edge) unless an\n   engine set --gp-pin-<edge> on the page root for an edge a pin uses (the\n   art-safe line). Non-auto insets and the explicit centers are\n   load-bearing; see doctrine comment. */\n.gp-pin {\n  position: absolute;\n  top: var(--gp-pin-top, 0px);\n  right: var(--gp-pin-right, 0px);\n  bottom: var(--gp-pin-bottom, 0px);\n  left: var(--gp-pin-left, 0px);\n  align-self: center;\n  justify-self: center;\n  margin: 0;\n  max-width: 100%;\n}\n\n/* pin edge modifiers \u2014 AFTER .gp-pin to beat its center defaults;\n   justify-self is inert on in-flow floats, so gp-left/gp-right safely do\n   double duty as flow float + pin edge */\n.gp-top { align-self: start; }\n.gp-bottom { align-self: end; }\n.gp-left { justify-self: start; }\n.gp-right { justify-self: end; }\n\n/* the escape hatch \u2014 the paper's edge, past the printer's safe area: the\n   pin box loses its art-safe insets. Set on the pin itself, so it beats the\n   values the page root hands down. */\n.gp-pin.gp-flush {\n  --gp-pin-top: 0px;\n  --gp-pin-right: 0px;\n  --gp-pin-bottom: 0px;\n  --gp-pin-left: 0px;\n}\n\n/* wrapper-margin neutralization (same pattern and rationale as the\n   .gp-bleed paragraph-margin note in the doctrine comment; for pin, the\n   emptied paragraph would otherwise leave a phantom margin gap in flow) */\n:where(p:has(> img.gp-bleed:only-child)) { margin: 0; }\n:where(p:has(> img.gp-pin:only-child)) { margin: 0; }\n\n/* depth \u2014 a named ladder for z-index, so books stop hand-tuning bare\n   integers. A real book measured 21 z-index declarations using only four\n   distinct values (-1, 0, 1, 2), each written literally at its use site.\n   The custom properties are the author-settable surface (a book needing a\n   deeper stack raises them once); the classes are the shorthand.\n\n   NOT named \"layer\": CSS Paged Media 3 \u00A73.1 already defines \"page layers\"\n   (page background, canvas, borders, contents, margin boxes) and those are\n   parts of the PAGE BOX, not a z-ladder for content. Reusing the word for a\n   different concept would collide with the spec vocabulary this project\n   tracks. The pin EDGE modifiers already own .gp-top/.gp-bottom, so the\n   ladder avoids those words too.\n\n   .gp-behind is the one that earns its place: it puts a pinned image UNDER\n   the page's text, which is otherwise impossible to express without a bare\n   negative z-index. \"Above\" needs no class \u2014 an out-of-flow pin already\n   paints above in-flow content.\n\n   Two things silently defeat .gp-behind, neither visible at the use site:\n     - a stacking context on the .page/.spread ancestor (z-index, isolation,\n       opacity, filter, transform on it traps the negative layer inside).\n       Core keeps .page/.spread at 'position: relative; z-index: auto'\n       precisely so they are not stacking contexts.\n     - a clipping ancestor (overflow other than visible) \u2014 but only where\n       the art actually overhangs that ancestor's clip box on a clipped\n       axis: the overhang is cut off, the same mechanism that clips a\n       .gp-bleed plate back to the wrapper's width. Clipping never reorders\n       layers \u2014 within-bounds art under a clipping .page prints whole and\n       still behind (measured; see the build audit's comment in\n       engine/compiler/build.ts), and a static wrapper's overflow never\n       binds an abspos .gp-pin at all.\n   The build-time engine.layer.trapped audit reports both against the live\n   ancestor chain. printsafe/page-containment is only an early source hint for\n   declarations written directly on .page/.spread. */\n:root {\n  --gp-z-behind: -1;\n  --gp-z-base: 0;\n  --gp-z-raised: 1;\n  --gp-z-front: 2;\n}\n.gp-behind { z-index: var(--gp-z-behind); }\n.gp-base   { z-index: var(--gp-z-base); }\n.gp-raised { z-index: var(--gp-z-raised); }\n.gp-front  { z-index: var(--gp-z-front); }\n\n/* GFM-style alert/callout boxes (#237) \u2014 the DOM gfm-alerts.ts emits from\n   \"> [!TYPE]\" blockquote syntax when a project opts into the bundled\n   gutterpress-gfm-alerts feature (BUILTIN_OPTIONAL_PLUGINS, renderer.ts).\n   The plugin is optional and inert by default; these rules are equally\n   inert wherever the classes never appear, exactly like every other\n   utility above, so shipping them costs nothing to a book that has not\n   turned the feature on.\n\n   This is authored-COMPONENT vocabulary, not the @marker structural family\n   (markers.js/MARKER_CSS) \u2014 CLAUDE.md \u00A76 splits the two core CSS blocks by\n   ROLE, and an author-facing box an author invokes via inline syntax is the\n   same role as every other gp-* utility here, not page/chapter/section DOM.\n\n   Deliberately minimal (CLAUDE.md \"thin over capable\" / the issue's own\n   \"a rule and a label\"): a left border plus a bold label, :where()'d to\n   zero specificity so a theme's own (unlayered) rule for any of these\n   classes wins outright regardless of selector weight \u2014 see the\n   cascade-layers note atop this file. Five semantic accent colors (the same\n   NOTE/TIP/IMPORTANT/WARNING/CAUTION hues GitHub's own alerts use \u2014 a\n   long-established, non-proprietary convention, not DC branding) are\n   exposed as :root custom properties, the same author-settable-surface\n   pattern as the --gp-z-* ladder above: a book retints every alert of one\n   type by overriding a single property, no specificity fight required.\n   --gp-alert-color cascades from the type modifier down to .gp-alert-title\n   through ordinary CSS inheritance (the title is always a DOM descendant of\n   the box), so it is set in exactly five places, not ten. */\n:root {\n  --gp-alert-note-color: #0969da;\n  --gp-alert-tip-color: #1a7f37;\n  --gp-alert-important-color: #8250df;\n  --gp-alert-warning-color: #9a6700;\n  --gp-alert-caution-color: #cf222e;\n}\n:where(.gp-alert) {\n  margin: 1em 0;\n  padding: 0.5em 1em;\n  border-left: 0.25em solid var(--gp-alert-color, currentColor);\n}\n:where(.gp-alert-title) {\n  margin: 0 0 0.5em;\n  font-weight: bold;\n  color: var(--gp-alert-color, inherit);\n}\n:where(.gp-alert-note)      { --gp-alert-color: var(--gp-alert-note-color); }\n:where(.gp-alert-tip)       { --gp-alert-color: var(--gp-alert-tip-color); }\n:where(.gp-alert-important) { --gp-alert-color: var(--gp-alert-important-color); }\n:where(.gp-alert-warning)   { --gp-alert-color: var(--gp-alert-warning-color); }\n:where(.gp-alert-caution)   { --gp-alert-color: var(--gp-alert-caution-color); }\n";
+export declare const GUTTERPRESS_CSS = "\n/* gp-* author image/block vocabulary. One vocabulary, gp-* only \u2014 the\n   pre-vocabulary utility names (.center/.float-left/.float-right/\n   .full-width/.full-bleed) were REMOVED when gp-* shipped; books rename\n   the classes in their markdown (see the migration note). Source ORDER is\n   the contract \u2014 see the doctrine comment above. */\n\n/* flow positions */\n.gp-left {\n  float: left;\n  margin: 0 var(--gp-gap, 1em) var(--gp-gap, 1em) 0;\n  max-width: 50%;\n}\n.gp-right {\n  float: right;\n  margin: 0 0 var(--gp-gap, 1em) var(--gp-gap, 1em);\n  max-width: 50%;\n}\n.gp-center {\n  display: block;\n  float: none;\n  margin-left: auto;\n  margin-right: auto;\n  max-width: 100%;\n}\n.gp-full {\n  display: block;\n  float: none;\n  width: 100%;\n  max-width: 100%;\n}\n@page gp-full-bleed { margin-left: 0; margin-right: 0; }\n.gp-bleed {\n  display: block;\n  float: none;\n  break-before: page;\n  page: gp-full-bleed;\n  max-width: none;\n  width: 100%;\n  margin-left: 0;\n  margin-right: 0;\n}\n\n/* sizes \u2014 AFTER the flow positions so max-width:100% lifts the floats' 50%\n   cap at equal specificity */\n.gp-size-10 { width: 10%; max-width: 100%; }\n.gp-size-20 { width: 20%; max-width: 100%; }\n.gp-size-30 { width: 30%; max-width: 100%; }\n.gp-size-40 { width: 40%; max-width: 100%; }\n.gp-size-50 { width: 50%; max-width: 100%; }\n.gp-size-60 { width: 60%; max-width: 100%; }\n.gp-size-70 { width: 70%; max-width: 100%; }\n.gp-size-80 { width: 80%; max-width: 100%; }\n.gp-size-90 { width: 90%; max-width: 100%; }\n\n/* float clearance presets \u2014 consumed by var(--gp-gap) in the float rules\n   above and by .gp-shape's shape-margin below; --gp-gap itself is\n   author-settable CSS */\n.gp-tight { --gp-gap: 0.5em; }\n.gp-loose { --gp-gap: 2em; }\n\n/* column runs \u2014 plain CSS Multi-column, emitted by the core @columns marker\n   (markers.js): @columns [1-5] ... @end-columns is the ONE way to lay\n   content out in columns, and @column-break moves to the next column.\n   The classes below are the CSS that marker emits, not author vocabulary.\n\n   Permanent vocabulary, not a shim: Chromium implements multicol natively\n   and these rules are the standard properties verbatim, so there is no\n   spec gap here to remove later. Deliberately minimal \u2014 column-fill is\n   NOT set (the CSS initial balance applies).\n   Themes style a run through two tokens instead of writing column rules:\n     --gp-column-gap   default 1.5em\n     --gp-column-rule  default none (any column-rule shorthand value)\n   Both hooks sit at zero specificity (:where), so any author rule wins.\n   .gp-columns is two columns on its own; a count class (bare @columns\n   emits gp-columns-2) wins because it comes later at the same specificity. */\n:where(.gp-columns, .gp-columns-1, .gp-columns-2, .gp-columns-3, .gp-columns-4, .gp-columns-5) {\n  column-gap: var(--gp-column-gap, 1.5em);\n  column-rule: var(--gp-column-rule, none);\n}\n.gp-columns { columns: 2; }\n.gp-columns-1 { columns: 1; }\n.gp-columns-2 { columns: 2; }\n.gp-columns-3 { columns: 3; }\n.gp-columns-4 { columns: 4; }\n.gp-columns-5 { columns: 5; }\n\n/* fragmentation controls \u2014 generic pagination utilities for any element,\n   independent of the column vocabulary above (a book reached for\n   these just as often outside a multicol run: keeping a card whole,\n   forcing a section to start a fresh page). Standard properties only \u2014\n   this project is Chromium-only (CLAUDE.md), so there are no legacy\n   page-break-* twins to also emit. One name each. */\n.gp-no-break { break-inside: avoid; }\n.gp-break-before { break-before: page; }\n\n/* shape wrap \u2014 text follows the image's alpha silhouette instead of its\n   rectangular box. shape-outside only applies to floats, so this is inert\n   without .gp-left/.gp-right (and under .gp-pin, which un-floats). The\n   shape URL cannot be written in CSS (url() contexts can't read attr()),\n   so the image renderer rule (images.ts) mirrors the src into an inline\n   --gp-shape:url(...) custom property whenever it sees this class --\n   authors only ever type the class. threshold 0.2 ignores near-transparent\n   anti-aliasing halos; shape-margin shares the float-gap vocabulary. */\nimg.gp-shape {\n  shape-outside: var(--gp-shape);\n  shape-image-threshold: 0.2;\n  shape-margin: var(--gp-gap, 1em);\n}\n\n/* pin \u2014 within the nearest positioned ancestor (.page/.spread, rule above).\n   The four insets are the pin box: 0 (the text block's edge) unless an\n   engine set --gp-pin-<edge> on the page root for an edge a pin uses (the\n   art-safe line). Non-auto insets and the explicit centers are\n   load-bearing; see doctrine comment. */\n.gp-pin {\n  position: absolute;\n  top: var(--gp-pin-top, 0px);\n  right: var(--gp-pin-right, 0px);\n  bottom: var(--gp-pin-bottom, 0px);\n  left: var(--gp-pin-left, 0px);\n  align-self: center;\n  justify-self: center;\n  margin: 0;\n  max-width: 100%;\n}\n\n/* pin edge modifiers \u2014 AFTER .gp-pin to beat its center defaults;\n   justify-self is inert on in-flow floats, so gp-left/gp-right safely do\n   double duty as flow float + pin edge */\n.gp-top { align-self: start; }\n.gp-bottom { align-self: end; }\n.gp-left { justify-self: start; }\n.gp-right { justify-self: end; }\n\n/* the escape hatch \u2014 the paper's edge, past the printer's safe area: the\n   pin box loses its art-safe insets. Set on the pin itself, so it beats the\n   values the page root hands down. */\n.gp-pin.gp-flush {\n  --gp-pin-top: 0px;\n  --gp-pin-right: 0px;\n  --gp-pin-bottom: 0px;\n  --gp-pin-left: 0px;\n}\n\n/* wrapper-margin neutralization (same pattern and rationale as the\n   .gp-bleed paragraph-margin note in the doctrine comment; for pin, the\n   emptied paragraph would otherwise leave a phantom margin gap in flow) */\n:where(p:has(> img.gp-bleed:only-child)) { margin: 0; }\n:where(p:has(> img.gp-pin:only-child)) { margin: 0; }\n\n/* depth \u2014 a named ladder for z-index, so books stop hand-tuning bare\n   integers. A real book measured 21 z-index declarations using only four\n   distinct values (-1, 0, 1, 2), each written literally at its use site.\n   The custom properties are the author-settable surface (a book needing a\n   deeper stack raises them once); the classes are the shorthand.\n\n   NOT named \"layer\": CSS Paged Media 3 \u00A73.1 already defines \"page layers\"\n   (page background, canvas, borders, contents, margin boxes) and those are\n   parts of the PAGE BOX, not a z-ladder for content. Reusing the word for a\n   different concept would collide with the spec vocabulary this project\n   tracks. The pin EDGE modifiers already own .gp-top/.gp-bottom, so the\n   ladder avoids those words too.\n\n   .gp-behind is the one that earns its place: it puts a pinned image UNDER\n   the page's text, which is otherwise impossible to express without a bare\n   negative z-index. \"Above\" needs no class \u2014 an out-of-flow pin already\n   paints above in-flow content.\n\n   Two things silently defeat .gp-behind, neither visible at the use site:\n     - a stacking context on the .page/.spread ancestor (z-index, isolation,\n       opacity, filter, transform on it traps the negative layer inside).\n       Core keeps .page/.spread at 'position: relative; z-index: auto'\n       precisely so they are not stacking contexts.\n     - a clipping ancestor (overflow other than visible) \u2014 but only where\n       the art actually overhangs that ancestor's clip box on a clipped\n       axis: the overhang is cut off, the same mechanism that clips a\n       .gp-bleed plate back to the wrapper's width. Clipping never reorders\n       layers \u2014 within-bounds art under a clipping .page prints whole and\n       still behind (measured; see the build audit's comment in\n       engine/compiler/build.ts), and a static wrapper's overflow never\n       binds an abspos .gp-pin at all.\n   The build-time engine.layer.trapped audit reports both against the live\n   ancestor chain. printsafe/page-containment is only an early source hint for\n   declarations written directly on .page/.spread. */\n:root {\n  --gp-z-behind: -1;\n  --gp-z-base: 0;\n  --gp-z-raised: 1;\n  --gp-z-front: 2;\n}\n.gp-behind { z-index: var(--gp-z-behind); }\n.gp-base   { z-index: var(--gp-z-base); }\n.gp-raised { z-index: var(--gp-z-raised); }\n.gp-front  { z-index: var(--gp-z-front); }\n\n/* GFM-style alert/callout boxes (#237) \u2014 the DOM gfm-alerts.ts emits from\n   \"> [!TYPE]\" blockquote syntax when a project opts into the bundled\n   gutterpress-gfm-alerts feature (BUILTIN_OPTIONAL_PLUGINS, renderer.ts).\n   The plugin is optional and inert by default; these rules are equally\n   inert wherever the classes never appear, exactly like every other\n   utility above, so shipping them costs nothing to a book that has not\n   turned the feature on.\n\n   This is authored-COMPONENT vocabulary, not the @marker structural family\n   (markers.js/MARKER_CSS) \u2014 CLAUDE.md \u00A76 splits the two core CSS blocks by\n   ROLE, and an author-facing box an author invokes via inline syntax is the\n   same role as every other gp-* utility here, not page/chapter/section DOM.\n\n   Deliberately minimal (CLAUDE.md \"thin over capable\" / the issue's own\n   \"a rule and a label\"): a left border plus a bold label, :where()'d to\n   zero specificity so a theme's own (unlayered) rule for any of these\n   classes wins outright regardless of selector weight \u2014 see the\n   cascade-layers note atop this file. Five semantic accent colors (the same\n   NOTE/TIP/IMPORTANT/WARNING/CAUTION hues GitHub's own alerts use \u2014 a\n   long-established, non-proprietary convention, not DC branding) are\n   exposed as :root custom properties, the same author-settable-surface\n   pattern as the --gp-z-* ladder above: a book retints every alert of one\n   type by overriding a single property, no specificity fight required.\n   --gp-alert-color cascades from the type modifier down to .gp-alert-title\n   through ordinary CSS inheritance (the title is always a DOM descendant of\n   the box), so it is set in exactly five places, not ten. */\n:root {\n  --gp-alert-note-color: #0969da;\n  --gp-alert-tip-color: #1a7f37;\n  --gp-alert-important-color: #8250df;\n  --gp-alert-warning-color: #9a6700;\n  --gp-alert-caution-color: #cf222e;\n}\n:where(.gp-alert) {\n  margin: 1em 0;\n  padding: 0.5em 1em;\n  border-left: 0.25em solid var(--gp-alert-color, currentColor);\n}\n:where(.gp-alert-title) {\n  margin: 0 0 0.5em;\n  font-weight: bold;\n  color: var(--gp-alert-color, inherit);\n}\n:where(.gp-alert-note)      { --gp-alert-color: var(--gp-alert-note-color); }\n:where(.gp-alert-tip)       { --gp-alert-color: var(--gp-alert-tip-color); }\n:where(.gp-alert-important) { --gp-alert-color: var(--gp-alert-important-color); }\n:where(.gp-alert-warning)   { --gp-alert-color: var(--gp-alert-warning-color); }\n:where(.gp-alert-caution)   { --gp-alert-color: var(--gp-alert-caution-color); }\n";
 /**
  * GP_CLASSES — every class an author may legitimately write with a `gp-`
  * prefix: the `.gp-*` selectors in `GUTTERPRESS_CSS` above, the two

package/dist/{manifest.schema-13dfax80.json → manifest.schema-c4wfpg6g.json}

@@ -228,15 +228,21 @@
         },
         "safe": {
           "type": "number",
-          "description": "The TEXT rule, in points: how far inside the trim glyphs must stay, on every edge. For DriveThruRPG it is the \"text at least 0.5in inside the trim\" rule. The preview's overlay outlines it (dashed) and flags text outside it, and the `pdf.print.safe-margins` check fails a PDF whose text is closer. An image pinned to the binding edge (`.gp-pin`) sits on it, and to any edge where `artSafe` is not set; no book CSS moves it. Preset default: dtrpg 36 (0.5in), book 18 (0.25in); custom none.",
+          "description": "The TEXT rule, in points: how far inside the trim glyphs must stay, on every edge (the binding edge too, unless `gutter` is set). For DriveThruRPG it is the \"text at least 0.5in inside the trim\" rule. The preview's overlay outlines it (dashed) and flags text outside it, and the `pdf.print.safe-margins` check fails a PDF whose text is closer. An image pinned to an edge (`.gp-pin`) where `artSafe` is not set sits on it; no book CSS moves it. Preset default: dtrpg 36 (0.5in), book 18 (0.25in); custom none.",
           "minimum": 0,
           "examples": [18, 36]
         },
         "artSafe": {
           "type": "number",
-          "description": "The ART rule, in points: how far inside the trim art that does not bleed (images, backgrounds, borders, rules) must stay on the top, bottom and OUTER edge; at the binding edge art uses `safe`. For DriveThruRPG it is the \"non-bleeding art at least 0.25in from the outside edges (0.5in at the binding)\" rule. Art that runs out to the page's edge is a bleed and is not judged on that edge. The preview's overlay outlines it (dotted) and flags art outside it, and an image pinned to the top, bottom or outer edge (`.gp-pin`) sits on it unless it carries `.gp-flush`. Absent = the same as `safe`. Preset default: dtrpg 18 (0.25in); book and custom none.",
+          "description": "The ART rule, in points: how far inside the trim art that does not bleed (images, backgrounds, borders, rules) must stay on the top, bottom and OUTER edge; at the binding edge art uses `gutter`. For DriveThruRPG it is the \"non-bleeding art at least 0.25in from the outside edges (0.5in at the binding)\" rule. Art that runs out to the page's edge is a bleed and is not judged on that edge. The preview's overlay outlines it (dotted) and flags art outside it, and an image pinned to the top, bottom or outer edge (`.gp-pin`) sits on it unless it carries `.gp-flush`. Absent = the same as `safe`. Preset default: dtrpg 18 (0.25in); book and custom none.",
           "minimum": 0,
           "examples": [18]
+        },
+        "gutter": {
+          "type": "number",
+          "description": "The binding allowance, in points: how far content stays from the spine, measured from the trim at the binding edge (the left edge of a right-hand page, the right edge of a left-hand one). It stands in for `safe` there, for text and for art alike: the preview's overlay draws and judges that edge against it, the `pdf.print.safe-margins` check fails text closer to the spine than it, and an image pinned to the binding edge (`.gp-pin`) sits on it. The other edges keep `safe` and `artSafe`. Use it when your book keeps its text further from the spine than the printer's minimum: the Field Guide keeps 0.75in (54) where DriveThruRPG asks for 0.5in. Absent = the same as `safe`. Presets leave it unset.",
+          "minimum": 0,
+          "examples": [54]
         }
       }
     },

package/dist/{new-s4f0tnya.js → new-87dqcxtn.js}

@@ -7,17 +7,17 @@ import {
   TARGET_IDS,
   scaffoldExtension,
   scaffoldProject
-} from "./cli-0ey902sx.js";
+} from "./cli-sc5t7c74.js";
 import {
   resolveGhostscript
-} from "./cli-h4tfmpg3.js";
+} from "./cli-6xym15vm.js";
 import {
   UsageError,
   rejectExtraPositionals,
   rejectUnknownFlags
-} from "./cli-fmksazej.js";
+} from "./cli-553ce1d4.js";
 import"./cli-ht1bcqdd.js";
-import"./cli-61vd4ews.js";
+import"./cli-cyej3p9v.js";
 import {
   EXIT_CODES
 } from "./cli-46ycxe6r.js";