gutterpress 0.10.0-beta.1 → 0.10.0

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

@@ -24,6 +24,7 @@
     strideOf: () => strideOf,
     stabilizeFullHeightPageRoots: () => stabilizeFullHeightPageRoots,
     spreadModeSupported: () => spreadModeSupported,
+    runPageBox: () => runPageBox,
     rowStrideOf: () => rowStrideOf,
     pageRangeOf: () => pageRangeOf,
     pageOf: () => pageOf,
@@ -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
@@ -1103,7 +1116,7 @@
         continue;
       const stripTop = strip.getBoundingClientRect().top;
       const edge = prop === "break-after" ? rect.bottom : rect.top;
-      const reserve = columnReserve(edge - stripTop, strip.clientHeight);
+      const reserve = columnReserve((edge - stripTop) / cssZoomOf(strip), strip.clientHeight);
       if (reserve === null)
         continue;
       const spacer = document.createElement("div");
@@ -1301,19 +1314,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 +1361,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 +1382,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 +1435,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 +1458,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 +1469,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()],
@@ -1563,6 +1593,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 +1618,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));
   }