gutterpress 0.10.0-alpha.3 → 0.10.0-beta.1

package/dist/engine/shared/margin-box-support.d.ts

@@ -10,3 +10,27 @@
  */
 export declare const MARGIN_BOX_IGNORED_PROPERTIES: ReadonlySet<string>;
 export declare function isIgnoredMarginBoxProperty(property: string): boolean;
+/**
+ * Geometry of each of the 16 margin boxes, per CSS Paged Media §5.3, in pt
+ * SHEET coordinates (origin at the sheet's top-left). One implementation for
+ * both furniture painters: the viewer's `drawMarginBoxes` overlays and the
+ * compiler's `.gp-flush` furniture relocation must place a box at the same
+ * spot or preview and print disagree about where the folio sits.
+ */
+export declare function marginBoxRectPt(name: string, g: {
+    width: number;
+    height: number;
+    margin: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+}): {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+};
+/** Horizontal alignment of a margin box's content within its slot. */
+export declare function marginBoxAlign(name: string): "start" | "center" | "end";

package/dist/{engine-eng4xh2q.js → engine-hrtn0b28.js}

@@ -4,7 +4,7 @@ import {
   build,
   connectChromium,
   getBrowser
-} from "./cli-yp3p0sf2.js";
+} from "./cli-afm8pa0h.js";
 import"./cli-c41yr7he.js";
 import {
   BuildError

package/dist/{engine-q5skhgms.js → engine-nbfdy0pp.js}

@@ -1,13 +1,13 @@
 import {
   build
-} from "./index-a4kr77td.js";
+} from "./index-wsydvp08.js";
 import {
   BuildError,
   RENDER_TIMEOUT_MS,
   assertMilestone,
   connectChromium,
   getBrowser
-} from "./index-mvehxh0e.js";
+} from "./index-c2b6gyeg.js";
 import"./index-37x76zdn.js";
 
 // src/lib/engine.ts

package/dist/{gutterpress-agent-1ctgfz92.js → gutterpress-agent-cazqstr1.js}

@@ -44,8 +44,10 @@
     targetTexts: () => targetTexts,
     stringSources: () => stringSources,
     setGenerated: () => setGenerated,
+    setFlushFurniture: () => setFlushFurniture,
     instrument: () => instrument,
     forcedBreakSites: () => forcedBreakSites,
+    flushRoots: () => flushRoots,
     fillLeaders: () => fillLeaders,
     counterResetSites: () => counterResetSites,
     collectCss: () => collectCss,
@@ -557,6 +559,50 @@
     addCss("gp-generated-content", css);
     return entries.length;
   }
+  function flushRoots() {
+    const out = [];
+    for (const root of Array.from(document.querySelectorAll(".page, .spread"))) {
+      const edges = ["top", "right", "bottom", "left"].filter((edge) => root.querySelector(`.gp-pin.gp-flush.gp-${edge}`));
+      if (!edges.length)
+        continue;
+      const page = getComputedStyle(root).page;
+      const key = `${page === "auto" ? "" : page}|${edges.map((e) => e[0]).join("")}`;
+      root.dataset.gpFlush = key;
+      out.push({ id: ensureAnchor(root), page, edges, key });
+    }
+    return out;
+  }
+  function setFlushFurniture(items) {
+    let painted = 0;
+    for (const item of items) {
+      const host = anchorHost(item.id);
+      if (!host)
+        continue;
+      let layer = host.querySelector(":scope > .gp-flush-furniture");
+      if (!layer) {
+        layer = document.createElement("div");
+        layer.className = "gp-flush-furniture";
+        layer.setAttribute("aria-hidden", "true");
+        layer.setAttribute("style", "position:absolute;inset:0;pointer-events:none;z-index:10;");
+        host.appendChild(layer);
+      }
+      layer.textContent = "";
+      for (const b of item.boxes) {
+        const slot = document.createElement("div");
+        slot.dataset.box = b.box;
+        const justify = b.align === "center" ? "center" : b.align === "end" ? "flex-end" : "flex-start";
+        slot.setAttribute("style", `position:absolute;left:${b.x}px;top:${b.y}px;width:${b.w}px;height:${b.h}px;` + `display:flex;align-items:center;justify-content:${justify};overflow:hidden;white-space:pre;`);
+        const content = document.createElement("span");
+        content.textContent = b.text;
+        for (const [prop, value] of Object.entries(b.decls))
+          content.style.setProperty(prop, value);
+        slot.appendChild(content);
+        layer.appendChild(slot);
+        painted++;
+      }
+    }
+    return painted;
+  }
   var api = {
     auditContent,
     collectCss,
@@ -569,7 +615,9 @@
     fillLeaders,
     instrument,
     addCss,
-    setGenerated
+    setGenerated,
+    flushRoots,
+    setFlushFurniture
   };
   if (typeof window !== "undefined")
     window.__gp = api;

package/dist/{gutterpress-viewer-cem7dmr5.js → gutterpress-viewer-fb6fhwsy.js}

@@ -33,9 +33,11 @@
     injectBreakMapping: () => injectBreakMapping,
     fragmentDocument: () => fragmentDocument,
     forcedColumnBreaksSupported: () => forcedColumnBreaksSupported,
+    contentEdgeRect: () => contentEdgeRect,
     compensateTrailingMarginsBeforeAvoids: () => compensateTrailingMarginsBeforeAvoids,
     compensateRepeatedHeaders: () => compensateRepeatedHeaders,
     compensateRectoBreaks: () => compensateRectoBreaks,
+    columnReserve: () => columnReserve,
     collectCssText: () => collectCssText,
     buildStrips: () => buildStrips,
     blankPageIndices: () => blankPageIndices,
@@ -148,6 +150,23 @@
 .gp-run {
   position: relative;
   margin: 0 0 var(--gp-sheet-gap);
+  /* Hit-transparent, like \`.gp-layer\` below: in wrap mode a recto-starting
+     run is pulled up over the previous run's last row (decorate.ts's
+     cross-run negative margin-top — the spread-composition overlap), and
+     its leading \`.gp-wrap-spacer\` slot is visually empty. The covered page
+     paints through, but the run's full-width box used to win
+     elementFromPoint there, so clicks, right-clicks, link hits, and text
+     selection were all dead on every covered page (measured: 60/60 dead
+     probe points in two-column view). Runs are viewer chrome — only author
+     content may capture hits. */
+  pointer-events: none;
+}
+
+/* …and the author's content re-enables hit testing. Equal specificity with
+   \`.gp-run { pointer-events: none }\` above, so ORDER is load-bearing:
+   \`auto\` must come after \`none\`. */
+.gp-strip > * {
+  pointer-events: auto;
 }
 
 .gp-layer {
@@ -957,6 +976,20 @@
 `);
   }
 
+  // src/engine/shared/flush.ts
+  var FLUSH_EDGES = ["top", "right", "bottom", "left"];
+  function flushEdgesIn(root) {
+    return FLUSH_EDGES.filter((edge) => root.querySelector(`.gp-pin.gp-flush.gp-${edge}`));
+  }
+  function flushMargins(margin, edges) {
+    return {
+      top: edges.includes("top") ? 0 : margin.top,
+      right: edges.includes("right") ? 0 : margin.right,
+      bottom: edges.includes("bottom") ? 0 : margin.bottom,
+      left: edges.includes("left") ? 0 : margin.left
+    };
+  }
+
   // src/engine/viewer/fragment.ts
   var PX_PER_PT = 96 / 72;
   function injectViewerCss(doc = document) {
@@ -1005,6 +1038,21 @@
   function forcedColumnBreaksSupported() {
     return typeof CSS !== "undefined" && typeof CSS.supports === "function" && CSS.supports("break-before", "column") && CSS.supports("break-after", "column");
   }
+  var FRAGMENT_EPSILON_PX = 1;
+  function contentEdgeRect(site, atEnd) {
+    const rects = Array.from(site.getClientRects());
+    const solid = rects.filter((r) => r.height >= FRAGMENT_EPSILON_PX);
+    const pool = solid.length ? solid : rects;
+    return atEnd ? pool.at(-1) : pool[0];
+  }
+  function columnReserve(offset, columnHeight) {
+    const remaining = columnHeight - offset;
+    if (remaining < FRAGMENT_EPSILON_PX)
+      return null;
+    if (remaining > columnHeight - FRAGMENT_EPSILON_PX)
+      return null;
+    return Math.ceil(remaining);
+  }
   function synthesizeColumnBreaks(model) {
     const sites = [];
     const seen = new WeakMap;
@@ -1041,23 +1089,22 @@
       const strip = el.closest(".gp-strip");
       if (!strip)
         continue;
-      if (prop === "break-before" && !el.previousElementSibling)
-        continue;
+      let site = el;
+      if (prop === "break-before") {
+        const target = propagatedBreakTarget(el, strip);
+        if (!target)
+          continue;
+        site = target;
+      }
       if (prop === "break-after" && !el.nextElementSibling)
         continue;
-      const rects = Array.from(el.getClientRects());
-      const rect = prop === "break-after" ? rects.at(-1) : rects[0];
+      const rect = contentEdgeRect(site, prop === "break-after");
       if (!rect)
         continue;
       const stripTop = strip.getBoundingClientRect().top;
       const edge = prop === "break-after" ? rect.bottom : rect.top;
-      const offset = edge - stripTop;
-      if (prop === "break-before" && offset < 0.5)
-        continue;
-      if (prop === "break-after" && strip.clientHeight - offset < 0.5)
-        continue;
-      const reserve = Math.ceil(strip.clientHeight - offset);
-      if (reserve <= 0)
+      const reserve = columnReserve(edge - stripTop, strip.clientHeight);
+      if (reserve === null)
         continue;
       const spacer = document.createElement("div");
       spacer.className = "gp-column-break-spacer";
@@ -1066,9 +1113,29 @@
       if (prop === "break-after")
         el.after(spacer);
       else
-        el.before(spacer);
+        site.before(spacer);
     }
   }
+  function propagatedBreakTarget(el, strip) {
+    let site = el;
+    while (!site.previousElementSibling) {
+      const parent = site.parentElement;
+      if (!parent || parent === strip)
+        return null;
+      const cs = getComputedStyle(site);
+      if (cs.position === "absolute" || cs.position === "fixed" || cs.float !== "none")
+        return null;
+      for (let node = site.previousSibling;node; node = node.previousSibling) {
+        if (node.nodeType === 3 && (node.textContent ?? "").trim() !== "")
+          return site;
+      }
+      const pcs = getComputedStyle(parent);
+      if (!/^(block|flow-root)$/.test(pcs.display) || pcs.columnCount !== "auto")
+        return null;
+      site = parent;
+    }
+    return site;
+  }
   function directPageName(el, model) {
     for (const a of model.pageAssignments) {
       try {
@@ -1087,12 +1154,13 @@
     }
     return false;
   }
-  function pushRun(runs, page, nodes) {
+  function pushRun(runs, page, nodes, flushEdges) {
+    const key = (r) => `${r.page ?? ""}\x00${(r.flushEdges ?? []).join(",")}`;
     const last = runs[runs.length - 1];
-    if (last && last.page === page)
+    if (last && key(last) === key({ page, flushEdges }))
       last.nodes.push(...nodes);
     else
-      runs.push({ page, nodes });
+      runs.push({ page, nodes, flushEdges: flushEdges?.length ? flushEdges : undefined });
   }
   function explodeChildren(container, model) {
     const runs = [];
@@ -1104,7 +1172,7 @@
       pending = [];
       const last = runs[runs.length - 1];
       if (last) {
-        pushRun(runs, last.page, held);
+        pushRun(runs, last.page, held, last.flushEdges);
         return [];
       }
       if (held.some((n) => (n.textContent ?? "").trim() !== "")) {
@@ -1121,13 +1189,14 @@
       const kid = node;
       if (kid.classList.contains("gp-layer"))
         continue;
+      const flush = flushEdgesIn(kid);
       const own = directPageName(kid, model);
       if (own !== undefined) {
-        pushRun(runs, own, [...carry(), kid]);
+        pushRun(runs, own, [...carry(), kid], flush);
         continue;
       }
       if (!hasDescendantPageAssignment(kid, model)) {
-        pushRun(runs, undefined, [...carry(), kid]);
+        pushRun(runs, undefined, [...carry(), kid], flush);
         continue;
       }
       const inner = explodeChildren(kid, model);
@@ -1141,7 +1210,7 @@
         for (const n of r.nodes)
           shell.appendChild(n);
         kid.before(shell);
-        pushRun(runs, r.page, [...lead, shell]);
+        pushRun(runs, r.page, [...lead, shell], flushEdgesIn(shell));
         lead = [];
       }
       kid.remove();
@@ -1289,21 +1358,29 @@
       strip.className = "gp-strip";
       if (run.page)
         strip.dataset.page = run.page;
-      const w = pt(geometry.width - geometry.margin.left - geometry.margin.right);
-      const h = pt(geometry.height - geometry.margin.top - geometry.margin.bottom);
+      const margin = run.flushEdges?.length ? flushMargins(geometry.margin, run.flushEdges) : geometry.margin;
+      const w = pt(geometry.width - margin.left - margin.right);
+      const h = pt(geometry.height - margin.top - margin.bottom);
       strip.style.setProperty("--gp-content-w", `${w}px`);
       strip.style.setProperty("--gp-content-h", `${h}px`);
       strip.style.setProperty("--gp-sheet-gap", `${gap}px`);
       strip.style.setProperty("--gp-page-w", `${pt(geometry.width)}px`);
       strip.style.setProperty("--gp-page-h", `${pt(geometry.height)}px`);
-      strip.style.setProperty("--gp-margin-top", `${pt(geometry.margin.top)}px`);
-      strip.style.setProperty("--gp-margin-right", `${pt(geometry.margin.right)}px`);
-      strip.style.setProperty("--gp-margin-bottom", `${pt(geometry.margin.bottom)}px`);
-      strip.style.setProperty("--gp-margin-left", `${pt(geometry.margin.left)}px`);
+      strip.style.setProperty("--gp-margin-top", `${pt(margin.top)}px`);
+      strip.style.setProperty("--gp-margin-right", `${pt(margin.right)}px`);
+      strip.style.setProperty("--gp-margin-bottom", `${pt(margin.bottom)}px`);
+      strip.style.setProperty("--gp-margin-left", `${pt(margin.left)}px`);
       run.nodes[0].before(strip);
       for (const n of run.nodes)
         strip.appendChild(n);
-      strips.push({ el: strip, page: run.page, geometry, pages: 0, offset: 0 });
+      strips.push({
+        el: strip,
+        page: run.page,
+        geometry,
+        flushEdges: run.flushEdges,
+        pages: 0,
+        offset: 0
+      });
     }
     for (const s of strips)
       clearLeadingForcedBreaks(s.el);
@@ -1864,6 +1941,37 @@
   function isIgnoredMarginBoxProperty(property) {
     return MARGIN_BOX_IGNORED_PROPERTIES.has(property.toLowerCase());
   }
+  function marginBoxRectPt(name, g) {
+    const { top, right, bottom, left } = g.margin;
+    const cw = g.width - left - right;
+    const ch = g.height - top - bottom;
+    const third = (n) => n / 3;
+    const T = {
+      "top-left-corner": [0, 0, left, top],
+      "top-left": [left, 0, third(cw), top],
+      "top-center": [left + third(cw), 0, third(cw), top],
+      "top-right": [left + 2 * third(cw), 0, third(cw), top],
+      "top-right-corner": [g.width - right, 0, right, top],
+      "bottom-left-corner": [0, g.height - bottom, left, bottom],
+      "bottom-left": [left, g.height - bottom, third(cw), bottom],
+      "bottom-center": [left + third(cw), g.height - bottom, third(cw), bottom],
+      "bottom-right": [left + 2 * third(cw), g.height - bottom, third(cw), bottom],
+      "bottom-right-corner": [g.width - right, g.height - bottom, right, bottom],
+      "left-top": [0, top, left, third(ch)],
+      "left-middle": [0, top + third(ch), left, third(ch)],
+      "left-bottom": [0, top + 2 * third(ch), left, third(ch)],
+      "right-top": [g.width - right, top, right, third(ch)],
+      "right-middle": [g.width - right, top + third(ch), right, third(ch)],
+      "right-bottom": [g.width - right, top + 2 * third(ch), right, third(ch)]
+    };
+    const [x, y, w, h] = T[name] ?? [0, 0, 0, 0];
+    return { x, y, w, h };
+  }
+  function marginBoxAlign(name) {
+    if (name.includes("center") || name.includes("middle"))
+      return "center";
+    return /right/.test(name) ? "end" : "start";
+  }
 
   // src/engine/viewer/decorate.ts
   var px = (v) => `${v * PX_PER_PT}px`;
@@ -2120,7 +2228,7 @@
         box.className = "gp-marginbox";
         box.dataset.box = name;
         Object.assign(box.style, rectFor(name, g));
-        box.dataset.align = name.includes("center") || name.includes("middle") ? "center" : /right/.test(name) ? "end" : "start";
+        box.dataset.align = marginBoxAlign(name);
         const content = document.createElement("span");
         content.className = "gp-marginbox-content";
         content.textContent = text;
@@ -2232,30 +2340,8 @@
     return run;
   }
   function rectFor(name, g) {
-    const { top, right, bottom, left } = g.margin;
-    const cw = g.width - left - right;
-    const ch = g.height - top - bottom;
-    const third = (n) => n / 3;
-    const T = {
-      "top-left-corner": [0, 0, left, top],
-      "top-left": [left, 0, third(cw), top],
-      "top-center": [left + third(cw), 0, third(cw), top],
-      "top-right": [left + 2 * third(cw), 0, third(cw), top],
-      "top-right-corner": [g.width - right, 0, right, top],
-      "bottom-left-corner": [0, g.height - bottom, left, bottom],
-      "bottom-left": [left, g.height - bottom, third(cw), bottom],
-      "bottom-center": [left + third(cw), g.height - bottom, third(cw), bottom],
-      "bottom-right": [left + 2 * third(cw), g.height - bottom, third(cw), bottom],
-      "bottom-right-corner": [g.width - right, g.height - bottom, right, bottom],
-      "left-top": [0, top, left, third(ch)],
-      "left-middle": [0, top + third(ch), left, third(ch)],
-      "left-bottom": [0, top + 2 * third(ch), left, third(ch)],
-      "right-top": [g.width - right, top, right, third(ch)],
-      "right-middle": [g.width - right, top + third(ch), right, third(ch)],
-      "right-bottom": [g.width - right, top + 2 * third(ch), right, third(ch)]
-    };
-    const [x, y, w, h] = T[name] ?? [0, 0, 0, 0];
-    return { left: px(x), top: px(y), width: px(w), height: px(h) };
+    const r = marginBoxRectPt(name, g);
+    return { left: px(r.x), top: px(r.y), width: px(r.w), height: px(r.h) };
   }
 
   // src/engine/viewer/index.ts