gutterpress 0.10.0-beta.1 → 0.10.1-beta.1

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

@@ -24,15 +24,16 @@
     strideOf: () => strideOf,
     stabilizeFullHeightPageRoots: () => stabilizeFullHeightPageRoots,
     spreadModeSupported: () => spreadModeSupported,
+    runPageBox: () => runPageBox,
     rowStrideOf: () => rowStrideOf,
     pageRangeOf: () => pageRangeOf,
     pageOf: () => pageOf,
     measure: () => measure,
+    makeOverflowFragmentable: () => makeOverflowFragmentable,
     loadStyleSources: () => loadStyleSources,
     injectViewerCss: () => injectViewerCss,
     injectBreakMapping: () => injectBreakMapping,
     fragmentDocument: () => fragmentDocument,
-    forcedColumnBreaksSupported: () => forcedColumnBreaksSupported,
     contentEdgeRect: () => contentEdgeRect,
     compensateTrailingMarginsBeforeAvoids: () => compensateTrailingMarginsBeforeAvoids,
     compensateRepeatedHeaders: () => compensateRepeatedHeaders,
@@ -96,11 +97,23 @@
   transform: translate(var(--gp-margin-left), var(--gp-margin-top));
 }
 
-/* Sheets/margin boxes are painted behind/around the strip by the decoration
-   layer; the strip itself must stay transparent so they show through. */
-.gp-strip > * {
-  break-inside: auto;
-}
+/* NOTE: there is deliberately no \`.gp-strip > * { break-inside: auto }\` here.
+   The original spike shipped one, under a comment about sheet transparency that
+   described no rule of its own, and it was never justified anywhere. Because
+   viewer chrome is injected after the author's stylesheet, it beat every
+   single-class author rule at equal specificity: a top-level block the author
+   declared atomic (\`.card\`, \`.section\`, a stat block) split on screen while the
+   PDF moved it whole and left a short page. Measured on
+   \`docs/fixtures/atomic-blocks\`: print 6pp, viewer 5pp with the rule, 6pp and
+   6pp without it; a longer probe of the same shape ran 25pp against 21pp.
+   Chromium honours \`break-inside: avoid\` in multicol as it does in paged media,
+   including relaxing it for a block too tall to fit an empty fragmentainer, so
+   nothing here needs to override the author.
+
+   Scope: \`>\` means this only ever reached the flow root's OWN children, so a
+   book whose atomic blocks sit inside \`@page\`/\`@section\` wrappers was never
+   affected — which is why removing it does not move the dc-op-manual field
+   guide's remaining 4-page divergence. That one is still open. */
 
 /* View mode (\`applySpreadMode\` in fragment.ts): wraps this run's multicol
    columns into \`--gp-wrap-cols\` ROWS instead of one long row — 2 for
@@ -1035,15 +1048,10 @@
     doc.getElementById("gp-break-mapping")?.remove();
     return "";
   }
-  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];
+    return atEnd ? rects.at(-1) : rects[0];
   }
   function columnReserve(offset, columnHeight) {
     const remaining = columnHeight - offset;
@@ -1103,13 +1111,12 @@
         continue;
       const stripTop = strip.getBoundingClientRect().top;
       const edge = prop === "break-after" ? rect.bottom : rect.top;
-      const reserve = columnReserve(edge - stripTop, strip.clientHeight);
-      if (reserve === null)
+      if (columnReserve((edge - stripTop) / cssZoomOf(strip), strip.clientHeight) === null)
         continue;
       const spacer = document.createElement("div");
       spacer.className = "gp-column-break-spacer";
       spacer.setAttribute("aria-hidden", "true");
-      spacer.style.cssText = `height:${reserve}px;margin:0;padding:0;border:0;`;
+      spacer.style.cssText = `${prop}: column; height:0; margin:0; padding:0; border:0;`;
       if (prop === "break-after")
         el.after(spacer);
       else
@@ -1267,6 +1274,47 @@
       delete el.dataset.gpLeadingPageRootDisplayPriority;
     }
   }
+  var SCROLLABLE = /^(auto|scroll|hidden)$/;
+  function makeOverflowFragmentable(strips) {
+    const todo = [];
+    for (const strip of strips) {
+      for (const el of Array.from(strip.el.querySelectorAll("*"))) {
+        const cs = getComputedStyle(el);
+        const x = SCROLLABLE.test(cs.overflowX);
+        const y = SCROLLABLE.test(cs.overflowY);
+        if (x || y)
+          todo.push({ el, x, y });
+      }
+    }
+    for (const { el, x, y } of todo) {
+      el.dataset.gpOverflow = "clipped";
+      el.dataset.gpOverflowX = el.style.getPropertyValue("overflow-x");
+      el.dataset.gpOverflowY = el.style.getPropertyValue("overflow-y");
+      el.dataset.gpOverflowXPriority = el.style.getPropertyPriority("overflow-x");
+      el.dataset.gpOverflowYPriority = el.style.getPropertyPriority("overflow-y");
+      if (x)
+        el.style.setProperty("overflow-x", "clip");
+      if (y)
+        el.style.setProperty("overflow-y", "clip");
+    }
+  }
+  function restoreScrollContainers(doc = document) {
+    for (const el of Array.from(doc.querySelectorAll('[data-gp-overflow="clipped"]'))) {
+      for (const axis of ["x", "y"]) {
+        const value = axis === "x" ? el.dataset.gpOverflowX : el.dataset.gpOverflowY;
+        const priority = axis === "x" ? el.dataset.gpOverflowXPriority : el.dataset.gpOverflowYPriority;
+        if (value)
+          el.style.setProperty(`overflow-${axis}`, value, priority || "");
+        else
+          el.style.removeProperty(`overflow-${axis}`);
+      }
+      delete el.dataset.gpOverflow;
+      delete el.dataset.gpOverflowX;
+      delete el.dataset.gpOverflowY;
+      delete el.dataset.gpOverflowXPriority;
+      delete el.dataset.gpOverflowYPriority;
+    }
+  }
   function compensateTrailingMarginsBeforeAvoids(model, strips) {
     const candidates = new Set;
     for (const decl of model.breaks) {
@@ -1301,19 +1349,21 @@
       const prevRect = prevRects.at(-1);
       const stripRect = stripEl.getBoundingClientRect();
       const { stride } = stripMetrics(stripEl);
-      const colOf = (r) => Math.floor((r.left - stripRect.left + 1) / stride);
+      const zoom = cssZoomOf(stripEl);
+      const colOf = (r) => Math.floor(((r.left - stripRect.left) / zoom + 1) / stride);
       const currentCol = colOf(rect);
       if (currentCol !== colOf(prevRect) + 1)
         continue;
-      if (Math.abs(rect.top - stripRect.top) > 0.5)
+      if (Math.abs(rect.top - stripRect.top) / zoom > 0.5)
         continue;
       const marginEnd = parseFloat(getComputedStyle(prev).marginBlockEnd) || 0;
       if (marginEnd <= 0.5)
         continue;
-      const remaining = stripEl.clientHeight - (prevRect.bottom - stripRect.top);
-      if (rect.height > remaining + 0.5)
+      const remaining = stripEl.clientHeight - (prevRect.bottom - stripRect.top) / zoom;
+      const height = rect.height / zoom;
+      if (height > remaining + 0.5)
         continue;
-      if (rect.height + marginEnd <= remaining + 0.5)
+      if (height + marginEnd <= remaining + 0.5)
         continue;
       prev.dataset.gpTrailingMargin = "compensated";
       prev.dataset.gpTrailingMarginValue = prev.style.getPropertyValue("margin-block-end");
@@ -1346,6 +1396,20 @@
       }
     }
   }
+  function runPageBox(model, name, warnings = []) {
+    const right = resolvePage(model, { name, pseudos: ["right"] }).geometry;
+    const left = resolvePage(model, { name, pseudos: ["left"] }).geometry;
+    const box = (g) => ({
+      w: g.width - g.margin.left - g.margin.right,
+      h: g.height - g.margin.top - g.margin.bottom
+    });
+    const r = box(right);
+    const l = box(left);
+    if (Math.abs(r.w - l.w) < 0.01 && Math.abs(r.h - l.h) < 0.01)
+      return right;
+    warnings.push(`@page :left and @page :right give ${name ? `the "${name}" page` : "this book"} ` + `different content areas (${l.w.toFixed(1)}×${l.h.toFixed(1)}pt vs ` + `${r.w.toFixed(1)}×${r.h.toFixed(1)}pt). Print alternates between them; the preview can ` + `only show one, so page breaks here may not match the PDF. Mirror the margins instead: ` + `swap which edge is wide and keep the total the same.`);
+    return resolvePage(model, { name }).geometry;
+  }
   function buildStrips(model, opts = {}, warnings = []) {
     const doc = document;
     const root = opts.root ?? doc.querySelector("main") ?? doc.body;
@@ -1353,7 +1417,7 @@
     const runs = explodeChildren(root, model);
     const strips = [];
     for (const run of runs) {
-      const { geometry } = resolvePage(model, { name: run.page });
+      const geometry = runPageBox(model, run.page, warnings);
       const strip = doc.createElement("div");
       strip.className = "gp-strip";
       if (run.page)
@@ -1406,14 +1470,15 @@
         passes = Math.max(passes, pass + 1);
         const stride = strideOf(strip.el);
         const stripLeft = strip.el.getBoundingClientRect().left - strip.el.scrollLeft;
-        const colOf = (r) => Math.floor((r.left - stripLeft + 1) / stride);
+        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 = table.tHead;
           const headRect = head?.getClientRects()[0];
-          const footHeight = table.tFoot?.getBoundingClientRect().height ?? 0;
+          const footHeight = (table.tFoot?.getBoundingClientRect().height ?? 0) / zoom;
           const rows = Array.from(table.querySelectorAll("tbody > tr")).filter((r) => !r.classList.contains("gp-thead-shim") && !r.classList.contains("gp-tfoot-shim"));
           if (!rows.length)
             continue;
@@ -1428,10 +1493,10 @@
               const row = rows[i];
               if (cols[i] === lastCol || claims.has(row))
                 continue;
-              const bottom = rects[i].bottom - stripTop;
+              const bottom = (rects[i].bottom - stripTop) / zoom;
               if (bottom > colBottom - footHeight + 0.5) {
                 newClaim = row;
-                claims.set(row, colBottom - (rects[i].top - stripTop));
+                claims.set(row, colBottom - (rects[i].top - stripTop) / zoom);
                 break;
               }
             }
@@ -1439,7 +1504,7 @@
           plans.push({
             table,
             push: headRect ? colOf(headRect) < cols[0] : false,
-            headHeight: headRect?.height ?? 0,
+            headHeight: (headRect?.height ?? 0) / zoom,
             footHeight,
             breakRows: headRect ? rows.filter((_, i) => i > 0 && cols[i] > cols[i - 1]) : [],
             footRows: [...claims.entries()],
@@ -1525,11 +1590,15 @@
     for (const [i, site] of sites.entries()) {
       if (!plan[i])
         continue;
-      const spacer = document.createElement("div");
-      spacer.className = "gp-recto-spacer";
-      spacer.setAttribute("aria-hidden", "true");
-      spacer.style.cssText = "break-before: column; break-after: column; height: 0; margin: 0; padding: 0; border: 0;";
-      site.el.before(spacer);
+      const leading = site.el.previousElementSibling;
+      const need = leading?.classList.contains("gp-column-break-spacer") ? 1 : 2;
+      for (let n = 0;n < need; n++) {
+        const spacer = document.createElement("div");
+        spacer.className = "gp-recto-spacer";
+        spacer.setAttribute("aria-hidden", "true");
+        spacer.style.cssText = "break-before: column; height: 0; margin: 0; padding: 0; border: 0;";
+        site.el.before(spacer);
+      }
       inserted++;
     }
     return inserted;
@@ -1563,6 +1632,9 @@
   function strideOf(strip) {
     return stripMetrics(strip).stride;
   }
+  function cssZoomOf(el) {
+    return el.currentCSSZoom ?? 1;
+  }
   function stripMetrics(strip) {
     const cs = getComputedStyle(strip);
     const w = parseFloat(cs.getPropertyValue("--gp-content-w"));
@@ -1585,12 +1657,13 @@
   function indexInStrip(left, top, strip) {
     const { stride, rowStride } = stripMetrics(strip.el);
     const stripBox = strip.el.getBoundingClientRect();
-    const stripLeft = stripBox.left - strip.el.scrollLeft;
-    const stripTop = stripBox.top;
+    const zoom = cssZoomOf(strip.el);
+    const x = (left - stripBox.left) / zoom + strip.el.scrollLeft;
+    const y = (top - stripBox.top) / zoom;
     const { perRow, shift } = wrapGeometry(strip);
-    const colVisual = Math.floor((left - stripLeft + 1) / stride);
+    const colVisual = Math.floor((x + 1) / stride);
     const colClamped = Math.max(0, Math.min(perRow - 1, colVisual));
-    const row = Math.max(0, Math.floor((top - stripTop + 1) / rowStride));
+    const row = Math.max(0, Math.floor((y + 1) / rowStride));
     const idx = row * perRow + colClamped - shift;
     return Math.max(0, Math.min(strip.pages - 1, idx));
   }
@@ -1679,6 +1752,7 @@
     const authoring = [];
     const strips = buildStrips(model, opts, authoring);
     await layoutReady;
+    makeOverflowFragmentable(strips);
     stabilizeFullHeightPageRoots(model, strips);
     compensateTrailingMarginsBeforeAvoids(model, strips);
     synthesizeColumnBreaks(model);
@@ -1701,12 +1775,14 @@
       relayout: () => {
         restoreFullHeightPageRoots();
         restoreTrailingMargins();
+        restoreScrollContainers();
         unwrapStrips(strips);
         for (const spacer of Array.from(document.querySelectorAll(".gp-recto-spacer")))
           spacer.remove();
         const rebuilt = buildStrips(model, opts, authoring);
         strips.length = 0;
         strips.push(...rebuilt);
+        makeOverflowFragmentable(strips);
         stabilizeFullHeightPageRoots(model, strips);
         compensateTrailingMarginsBeforeAvoids(model, strips);
         synthesizeColumnBreaks(model);