gutterpress 0.11.23-alpha.7 → 0.11.23-beta.2

package/dist/{gutterpress-viewer-mafsby5k.js → gutterpress-viewer-ywkf49q5.js}

@@ -34,12 +34,12 @@
     makeOverflowFragmentable: () => makeOverflowFragmentable,
     loadStyleSources: () => loadStyleSources,
     injectViewerCss: () => injectViewerCss,
+    injectPageVars: () => injectPageVars,
     injectBreakMapping: () => injectBreakMapping,
     indexInStrip: () => indexInStrip,
     fragmentDocument: () => fragmentDocument,
     cssZoomOf: () => cssZoomOf,
     contentEdgeRect: () => contentEdgeRect,
-    compensateRepeatedHeaders: () => compensateRepeatedHeaders,
     compensateRectoBreaks: () => compensateRectoBreaks,
     columnReserve: () => columnReserve,
     collectCssText: () => collectCssText,
@@ -192,6 +192,29 @@
    no extractable body text; \`rabbit-walking.png\` (1379x2530, unique) sits on
    PDF p134 vs viewer folio 135. */
 
+/* Repeated table headers and footers. Print draws a table's header group
+   (\`thead\`) at the top of every page the table spans, and its footer group
+   (\`tfoot\`) at the foot of each, and never leaves a header alone at the foot
+   of a page. Chromium does the same in a multicol column, through the same
+   table fragmentation, when the group is unbreakable; print media treats
+   every header and footer group so, the screen only one that is
+   \`break-inside: avoid\` (measured: on screen, a plain \`thead\` printed once and
+   a \`break-inside: avoid\` one on every column, exactly as print media does).
+   Setting it here makes the columns repeat the groups print repeats, where
+   print repeats them, and break around them as print does. A group the author
+   set to another \`display\` is not a header group and repeats in neither.
+
+   The viewer used to imitate this in script, cloning the header into each
+   continuation column and forcing a break before a table whose header would
+   be left alone. It moved a lead-in paragraph whole where print splits it,
+   left a clone at a column's foot, drew a second header wherever Chromium
+   already drew one, and shifted pages after the forced-break spacers had been
+   placed, losing a chapter's break (the gp-dimm-city design guide's reference
+   tables: #454). docs/fixtures/repeated-table-header pins it. */
+.gp-strip :is(thead, tfoot) {
+  break-inside: avoid;
+}
+
 /* View mode (\`applySpreadMode\` in fragment.ts): wraps this run's multicol
    columns into \`--gp-wrap-cols\` ROWS instead of one long row — 2 for
    two-up/spread, 1 for single (a plain vertical stack of pages), using
@@ -1118,6 +1141,7 @@
   }
 
   // src/engine/shared/print-area.ts
+  var round3 = (n) => Math.round(n * 1000) / 1000;
   function printAreaFromMeta(doc) {
     const raw = doc.querySelector('meta[name="gp-print-area"]')?.getAttribute("content");
     if (!raw)
@@ -1200,6 +1224,33 @@
     return { kind, gap, need };
   }
 
+  // src/engine/shared/page-vars.ts
+  var decls = (pairs) => pairs.map(([name, n]) => `--gp-page-${name}: ${round3(n)}pt;`).join(" ");
+  function pageDecls(model, name) {
+    const { width, height, margin } = resolvePage(model, { name, pseudos: ["right"] }).geometry;
+    return decls([
+      ["width", width],
+      ["height", height],
+      ["margin-top", margin.top],
+      ["margin-bottom", margin.bottom],
+      ["margin-inside", margin.left],
+      ["margin-outside", margin.right]
+    ]);
+  }
+  function pageGeometryVarsCss(model, area) {
+    const bookWide = decls([
+      ["bleed", area?.bleed ?? 0],
+      ["safe", area?.safe ?? 0],
+      ["gutter", area?.gutter ?? 0],
+      ["art-safe", area?.artSafe ?? 0]
+    ]);
+    return [
+      `:root { ${pageDecls(model)} ${bookWide} }`,
+      ...model.pageAssignments.map((a) => `${a.selector} { ${pageDecls(model, a.page)} }`)
+    ].join(`
+`);
+  }
+
   // src/engine/viewer/fragment.ts
   var PX_PER_PT = 96 / 72;
   function injectViewerCss(doc = document) {
@@ -1210,6 +1261,15 @@
     style.textContent = viewer_default;
     doc.head.appendChild(style);
   }
+  function injectPageVars(model, doc = document) {
+    let style = doc.getElementById("gp-page-vars");
+    if (!style) {
+      style = doc.createElement("style");
+      style.id = "gp-page-vars";
+      doc.head.appendChild(style);
+    }
+    style.textContent = pageGeometryVarsCss(model, printAreaFromMeta(doc));
+  }
   var pt = (v) => v * PX_PER_PT;
   function collectCssText(doc = document) {
     let out = "";
@@ -1444,10 +1504,13 @@
   function clearLeadingForcedBreaks(strip) {
     for (let el = strip.firstElementChild;el; el = el.firstElementChild) {
       const cs = getComputedStyle(el);
-      if (FORCED_BREAK.test(cs.breakBefore))
-        el.style.breakBefore = "auto";
+      if (!FORCED_BREAK.test(cs.breakBefore))
+        continue;
+      clearedLeadingBreaks.set(el, cs.breakBefore);
+      el.style.breakBefore = "auto";
     }
   }
+  var clearedLeadingBreaks = new WeakMap;
   function stabilizeFullHeightPageRoots(model, strips) {
     let stabilized = 0;
     for (const strip of strips) {
@@ -1650,164 +1713,28 @@
       clearLeadingForcedBreaks(s.el);
     return strips;
   }
-  var AVOID_BREAK = /^avoid(-page|-column)?$/;
-  function keepChainHead(el) {
-    let head = el;
-    for (let prev = head.previousElementSibling;prev instanceof HTMLElement; prev = head.previousElementSibling) {
-      const linked = AVOID_BREAK.test(getComputedStyle(prev).breakAfter) || AVOID_BREAK.test(getComputedStyle(head).breakBefore);
-      if (!linked)
-        break;
-      head = prev;
-    }
-    return head;
-  }
-  var pushTargets = new WeakMap;
-  function repeatingHead(table) {
-    const head = table.tHead;
-    return head && getComputedStyle(head).display === "table-header-group" ? head : null;
-  }
-  function repeatingFoot(table) {
-    const foot = table.tFoot;
-    return foot && getComputedStyle(foot).display === "table-footer-group" ? foot : null;
-  }
-  function compensateRepeatedHeaders(strips, maxPasses = 24) {
-    const warnings = [];
-    let passes = 0;
-    let touched = 0;
-    for (const strip of strips) {
-      const tables = Array.from(strip.el.querySelectorAll("table")).filter((t) => repeatingHead(t) || repeatingFoot(t));
-      if (!tables.length)
-        continue;
-      for (const table of tables) {
-        for (const shim of Array.from(table.querySelectorAll("tr.gp-thead-shim, tr.gp-tfoot-shim")))
-          shim.remove();
-        table.style.breakBefore = "";
-        const target = pushTargets.get(table);
-        if (target)
-          target.style.breakBefore = "";
-        pushTargets.delete(table);
-      }
-      const pushed = new Set;
-      const footClaims = new Map;
-      let previous = "";
-      for (let pass = 0;pass < maxPasses; pass++) {
-        passes = Math.max(passes, pass + 1);
-        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 plans = [];
-        for (const table of tables) {
-          const head = repeatingHead(table);
-          const headRect = head?.getClientRects()[0];
-          const footHeight = (repeatingFoot(table)?.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;
-          const rects = rows.map((r) => r.getClientRects()[0] ?? r.getBoundingClientRect());
-          const cols = rects.map(colOf);
-          const claims = footClaims.get(table) ?? new Map;
-          footClaims.set(table, claims);
-          let newClaim;
-          if (footHeight > 0) {
-            const lastCol = cols[cols.length - 1];
-            for (let i = 0;i < rows.length; i++) {
-              const row = rows[i];
-              if (cols[i] === lastCol || claims.has(row))
-                continue;
-              const bottom = (rects[i].bottom - stripTop) / zoom;
-              if (bottom > colBottom - footHeight + 0.5) {
-                newClaim = row;
-                claims.set(row, colBottom - (rects[i].top - stripTop) / zoom);
-                break;
-              }
-            }
-          }
-          plans.push({
-            table,
-            push: headRect ? colOf(headRect) < cols[0] : false,
-            headHeight: (headRect?.height ?? 0) / zoom,
-            footHeight,
-            breakRows: headRect ? rows.filter((_, i) => i > 0 && cols[i] > cols[i - 1]) : [],
-            footRows: [...claims.entries()],
-            grew: newClaim !== undefined,
-            cells: Math.max(1, ...rows.map((r) => r.cells.length))
-          });
-        }
-        const signature = plans.map((p) => `${p.push || pushed.has(p.table) ? "P" : ""}${p.breakRows.map((r) => r.rowIndex).join(".")}~${p.footRows.map(([r]) => r.rowIndex).join(".")}`).join("|");
-        const anyGrowth = plans.some((p) => p.grew);
-        if (!anyGrowth && signature === previous)
-          break;
-        previous = signature;
-        for (const plan of plans) {
-          for (const shim of Array.from(plan.table.querySelectorAll("tr.gp-thead-shim, tr.gp-tfoot-shim")))
-            shim.remove();
-          if (plan.push && !pushed.has(plan.table)) {
-            pushed.add(plan.table);
-            const target = keepChainHead(plan.table);
-            target.style.breakBefore = "column";
-            pushTargets.set(plan.table, target);
-            touched++;
-            continue;
-          }
-          for (const row of plan.breakRows) {
-            row.before(headerShim(plan.table.tHead, plan.headHeight, plan.cells));
-            touched++;
-          }
-          for (const [row, height] of plan.footRows) {
-            row.before(sectionShim(plan.table.tFoot, height, plan.cells, "gp-tfoot-shim"));
-            touched++;
-          }
-        }
-      }
-    }
-    return { tables: touched, passes, warnings };
-  }
-  function headerShim(head, height, cells) {
-    return sectionShim(head, height, cells, "gp-thead-shim");
-  }
-  function sectionShim(section, height, cells, className) {
-    const shim = document.createElement("tr");
-    shim.className = className;
-    shim.setAttribute("aria-hidden", "true");
-    shim.style.height = `${height}px`;
-    if (className === "gp-tfoot-shim")
-      shim.style.verticalAlign = "bottom";
-    const source = section.rows[0];
-    if (source) {
-      for (const cell of Array.from(source.cells)) {
-        const td = document.createElement("td");
-        td.colSpan = cell.colSpan;
-        td.innerHTML = cell.innerHTML;
-        const cs = getComputedStyle(cell);
-        td.style.cssText = `font:${cs.font};color:${cs.color};letter-spacing:${cs.letterSpacing};text-transform:${cs.textTransform};vertical-align:${cs.verticalAlign};text-align:${cs.textAlign};padding:${cs.padding};border:${cs.border};background:${cs.backgroundColor};`;
-        shim.appendChild(td);
-      }
-    } else {
-      const td = document.createElement("td");
-      td.colSpan = cells;
-      td.style.cssText = `height:${height}px;padding:0;border:0;`;
-      shim.appendChild(td);
-    }
-    return shim;
-  }
   function compensateRectoBreaks(model, strips) {
-    const decls = model.breaks.filter(isRectoVersoBreak);
+    const decls2 = model.breaks.filter(isRectoVersoBreak);
     for (const spacer of Array.from(document.querySelectorAll(".gp-recto-spacer")))
       spacer.remove();
-    if (!decls.length)
+    if (!decls2.length)
       return 0;
     const sites = [];
-    for (const d of decls) {
+    const seen = new Set;
+    for (const d of decls2) {
       let els = [];
       try {
         els = Array.from(document.querySelectorAll(d.selector));
       } catch {
         continue;
       }
-      for (const el of els)
-        sites.push({ el, wantsRecto: wantsRecto(d.value) });
+      for (const el of els) {
+        const value = clearedLeadingBreaks.get(el) ?? getComputedStyle(el).breakBefore;
+        if (seen.has(el) || !RECTO_VERSO_VALUES.test(value))
+          continue;
+        seen.add(el);
+        sites.push({ el, wantsRecto: wantsRecto(value) });
+      }
     }
     sites.sort((a, b) => a.el.compareDocumentPosition(b.el) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1);
     const plan = planRectoBlanks(sites.map((site) => ({ page: pageOf(site.el, strips) + 1, wantsRecto: site.wantsRecto })));
@@ -1993,6 +1920,7 @@
       document.head.appendChild(style);
     }
     const model = extract(css);
+    injectPageVars(model);
     injectBreakMapping(model);
     const authoring = [];
     const strips = buildStrips(model, opts, authoring);
@@ -2004,7 +1932,6 @@
     const blanks = compensateRectoBreaks(model, strips);
     if (blanks)
       measure(strips);
-    const headers = opts.compensateHeaders === false ? { tables: 0, passes: 0, warnings: [] } : compensateRepeatedHeaders(strips);
     const contentPages = measure(strips).totalPages;
     const totalPages = padToSignature(strips, contentPages);
     fitVersoPinRoots(model, strips);
@@ -2012,7 +1939,7 @@
       model,
       strips,
       totalPages,
-      warnings: [...new Set([...authoring, ...headers.warnings])],
+      warnings: [...new Set(authoring)],
       blankPages: blanks,
       blankPageIndices: blankPageIndices(strips),
       paddedPageIndices: pagesAfter(contentPages, totalPages),
@@ -2033,10 +1960,7 @@
         synthesizeColumnBreaks(model);
         measure(strips);
         api.blankPages = compensateRectoBreaks(model, strips);
-        if (opts.compensateHeaders !== false)
-          api.warnings = [
-            ...new Set([...authoring, ...compensateRepeatedHeaders(strips).warnings])
-          ];
+        api.warnings = [...new Set(authoring)];
         const content = measure(strips).totalPages;
         padToSignature(strips, content);
         const r = measure(strips);
@@ -2861,8 +2785,8 @@
     } catch {}
     return document.getElementById(id);
   }
-  function applyPageBackground(sheet, decls) {
-    for (const [prop, value] of Object.entries(decls)) {
+  function applyPageBackground(sheet, decls2) {
+    for (const [prop, value] of Object.entries(decls2)) {
       const p = prop.toLowerCase();
       if (p !== "background" && !p.startsWith("background-"))
         continue;
@@ -2941,8 +2865,8 @@
       }
       if (blankPages.has(bookIndex)) {
         const pseudos2 = ["blank"];
-        const { geometry: geometry2, marginBoxes: marginBoxes2, decls: decls2 } = resolvePage(model, { pseudos: pseudos2 });
-        return { index: bookIndex, strip, pseudos: pseudos2, geometry: geometry2, marginBoxes: marginBoxes2, decls: decls2 };
+        const { geometry: geometry2, marginBoxes: marginBoxes2, decls: decls3 } = resolvePage(model, { pseudos: pseudos2 });
+        return { index: bookIndex, strip, pseudos: pseudos2, geometry: geometry2, marginBoxes: marginBoxes2, decls: decls3 };
       }
       const pseudos = [];
       if (bookIndex === 0)
@@ -2950,11 +2874,11 @@
       if (indexInStrip2 === 0)
         pseudos.push("nth-first-of-run");
       pseudos.push(bookIndex % 2 === 0 ? "right" : "left");
-      const { geometry, marginBoxes, decls } = resolvePage(model, {
+      const { geometry, marginBoxes, decls: decls2 } = resolvePage(model, {
         name: strip.page,
         pseudos
       });
-      return { index: bookIndex, strip, pseudos, geometry, marginBoxes, decls };
+      return { index: bookIndex, strip, pseudos, geometry, marginBoxes, decls: decls2 };
     }
     function buildMaps() {
       api.stringMap = new Map;
@@ -3150,10 +3074,10 @@
     function drawMarginBoxes(sheet, ctx, totalPages) {
       const g = ctx.geometry;
       for (const name of MARGIN_BOX_NAMES) {
-        const decls = ctx.marginBoxes[`@${name}`];
-        if (!decls?.content)
+        const decls2 = ctx.marginBoxes[`@${name}`];
+        if (!decls2?.content)
           continue;
-        const text = evaluate(decls.content, {
+        const text = evaluate(decls2.content, {
           page: api.pageNumbers[ctx.index] ?? ctx.index + 1,
           pages: totalPages,
           strings: (n, w) => stringAt(n, w, ctx.index),
@@ -3169,7 +3093,7 @@
         const content = document.createElement("span");
         content.className = "gp-marginbox-content";
         content.textContent = text;
-        for (const [prop, value] of Object.entries(decls)) {
+        for (const [prop, value] of Object.entries(decls2)) {
           if (prop.toLowerCase() === "content" || isIgnoredMarginBoxProperty(prop))
             continue;
           content.style.setProperty(prop, value);