gutterpress 0.11.20-alpha.2 → 0.11.20-alpha.4

package/dist/engine/shared/print-area.d.ts

@@ -0,0 +1,68 @@
+/**
+ * The project's print area: the manifest's `page` block, carried into every
+ * assembled book (preview, build, publish) as ONE
+ * `<meta name="gp-print-area">` by the markdown assembly
+ * (lib/markdown/assemble.ts) and read back here by everything that needs it:
+ * the preview's print overlays (viewer/overlay.ts) and both engines' pinned
+ * art (pin-edges.ts — a pin sits on the printer's art-safe line).
+ *
+ * Only the manifest feeds it — `page.width` x `page.height` (the sheet),
+ * `page.bleed` (a bleed the sheet already contains on the top, bottom and
+ * OUTER edge; the binding edge has none, as DriveThruRPG cuts it),
+ * `page.safe` (the TEXT rule: its inset from the trim on every edge) and
+ * `page.artSafe` (the ART rule: its inset on the top, bottom and outer edge,
+ * while the binding edge takes `safe`; absent = `safe`) — plus the preset's
+ * id and the printer spec it follows, which only word what the overlay finds.
+ * No book or plugin CSS feeds it: not the `@page` margins (they are where the
+ * author put the TEXT, which is not the printer's safe area), not
+ * `@page { bleed }`.
+ *
+ * The meta is metadata: it changes nothing a browser renders on its own.
+ * Node-safe: the writer is pure, and the reader takes the document it reads.
+ */
+/** The project's page geometry, in pt — the manifest's `page` block. */
+export interface PrintArea {
+    width: number;
+    height: number;
+    /** in-sheet bleed on the top, bottom and outer edge; 0 = none */
+    bleed: number;
+    /** the TEXT rule: inset from the trim on every edge; 0 = none */
+    safe: number;
+    /** the ART rule: inset on the top, bottom and outer edge (the binding edge takes `safe`) */
+    artSafe: number;
+    /** the manifest's preset id, and the printer spec it follows: they only word what is found */
+    preset?: string;
+    spec?: {
+        label: string;
+        url: string;
+    };
+}
+/** Which side of the spread a page is: page 1 is a recto, so every odd page is one. */
+export type PageSide = "recto" | "verso";
+/** What a host knows from its resolved config: the `page` block, the preset and its spec. */
+export interface PrintAreaSource {
+    width: number;
+    height: number;
+    bleed?: number;
+    safe?: number;
+    artSafe?: number;
+    preset?: string;
+    spec?: {
+        label: string;
+        url: string;
+    };
+}
+/**
+ * The `<meta>` tag for one book. An unset bleed or text rule is written as 0,
+ * never left out; an unset art rule stays out (the reader takes it as `safe`).
+ * Anything else the config's `page` block holds (`tolerance`) is not part of it.
+ */
+export declare function printAreaMeta(page: PrintAreaSource): string;
+/** The one DOM call the reader makes: a `Document` satisfies it. */
+export interface MetaDocument {
+    querySelector(selector: string): {
+        getAttribute(name: string): string | null;
+    } | null;
+}
+/** The book's print area from its `<meta name="gp-print-area">`; `null` without one. */
+export declare function printAreaFromMeta(doc: MetaDocument): PrintArea | null;

package/dist/{engine-9xb1ky8d.js → engine-67f68bxs.js}

@@ -1,6 +1,6 @@
 import {
   build
-} from "./cli-j802s31j.js";
+} from "./cli-61vd4ews.js";
 import {
   BuildError
 } from "./cli-46ycxe6r.js";

package/dist/{engine-yax79k9m.js → engine-7ha27n2b.js}

@@ -1,9 +1,9 @@
 import {
   build
-} from "./index-6xwtb7cw.js";
+} from "./index-ad95fws8.js";
 import {
   BuildError
-} from "./index-3nr5rzzp.js";
+} from "./index-gm5xbx5w.js";
 import"./index-bt0qws5c.js";
 import"./index-37x76zdn.js";
 

package/dist/{ext-ahwxt6gv.js → ext-9mc7sr0d.js}

@@ -12,20 +12,21 @@ import {
   searchNpmExtensions,
   setExtensionEnabled,
   updateExtensions
-} from "./cli-zacevwcy.js";
-import"./cli-gh0ym80r.js";
+} from "./cli-0ey902sx.js";
+import"./cli-h4tfmpg3.js";
 import {
   UsageError,
   exitForUsage,
   rejectExtraPositionals,
   rejectUnknownFlags,
   resolveProjectDir
-} from "./cli-7z29z4wz.js";
+} from "./cli-fmksazej.js";
 import"./cli-ht1bcqdd.js";
-import"./cli-j802s31j.js";
+import"./cli-61vd4ews.js";
 import {
   EXIT_CODES
 } from "./cli-46ycxe6r.js";
+import"./cli-sth219v1.js";
 import"./cli-eyyggect.js";
 import"./cli-asap4t1z.js";
 import"./cli-5qr3z0qa.js";

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

@@ -43,11 +43,13 @@
     xrefSites: () => xrefSites,
     targetTexts: () => targetTexts,
     stringSources: () => stringSources,
+    setPinGeometry: () => setPinGeometry,
+    setPinFurniture: () => setPinFurniture,
     setGenerated: () => setGenerated,
-    setFlushFurniture: () => setFlushFurniture,
+    printArea: () => printArea,
+    pinRoots: () => pinRoots,
     instrument: () => instrument,
     forcedBreakSites: () => forcedBreakSites,
-    flushRoots: () => flushRoots,
     fillLeaders: () => fillLeaders,
     counterResetSites: () => counterResetSites,
     collectCss: () => collectCss,
@@ -302,6 +304,51 @@
     return evaluateContent(parseContent(value), ctx);
   }
 
+  // src/engine/shared/pin-edges.ts
+  var PIN_EDGES = ["top", "right", "bottom", "left"];
+  var EDGE_PIN_SELECTOR = PIN_EDGES.map((edge) => `.gp-pin.gp-${edge}`).join(", ");
+  function pinEdgesIn(root) {
+    const pins = Array.from(root.querySelectorAll(EDGE_PIN_SELECTOR)).filter((pin) => pin.offsetParent === root);
+    return PIN_EDGES.filter((edge) => pins.some((pin) => pin.classList.contains(`gp-${edge}`)));
+  }
+  function pinKey(edges) {
+    return PIN_EDGES.filter((e) => edges.includes(e)).map((e) => e[0]).join("");
+  }
+  function paddingOf(cs) {
+    return {
+      top: parseFloat(cs.paddingTop) || 0,
+      right: parseFloat(cs.paddingRight) || 0,
+      bottom: parseFloat(cs.paddingBottom) || 0,
+      left: parseFloat(cs.paddingLeft) || 0
+    };
+  }
+
+  // src/engine/shared/print-area.ts
+  function printAreaFromMeta(doc) {
+    const raw = doc.querySelector('meta[name="gp-print-area"]')?.getAttribute("content");
+    if (!raw)
+      return null;
+    try {
+      const v = JSON.parse(raw);
+      const n = (x) => typeof x === "number" && Number.isFinite(x) && x > 0 ? x : 0;
+      if (!n(v.width) || !n(v.height))
+        return null;
+      const safe = n(v.safe);
+      const spec = v.spec && typeof v.spec.label === "string" && typeof v.spec.url === "string" && /^https?:\/\//i.test(v.spec.url) ? v.spec : undefined;
+      return {
+        width: n(v.width),
+        height: n(v.height),
+        bleed: n(v.bleed),
+        safe,
+        artSafe: typeof v.artSafe === "number" ? n(v.artSafe) : safe,
+        preset: typeof v.preset === "string" ? v.preset : undefined,
+        spec
+      };
+    } catch {
+      return null;
+    }
+  }
+
   // src/engine/compiler/agent.ts
   var uid = 0;
   function ensureAnchor(el) {
@@ -559,29 +606,45 @@
     addCss("gp-generated-content", css);
     return entries.length;
   }
-  function flushRoots() {
+  function pinRoots() {
     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}`));
+      const edges = pinEdgesIn(root);
       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 });
+      const cs = getComputedStyle(root);
+      const padding = paddingOf(cs);
+      const key = `${cs.page === "auto" ? "" : cs.page}|${pinKey(edges)}|${edges.map((e) => padding[e]).join(",")}`;
+      root.dataset.gpPin = key;
+      out.push({ id: ensureAnchor(root), page: cs.page, edges, padding, key });
     }
     return out;
   }
-  function setFlushFurniture(items) {
+  function printArea() {
+    return printAreaFromMeta(document);
+  }
+  function setPinGeometry(items) {
+    let set = 0;
+    for (const item of items) {
+      const host = anchorHost(item.id);
+      if (!host)
+        continue;
+      for (const [prop, value] of Object.entries(item.style))
+        host.style.setProperty(prop, value);
+      set++;
+    }
+    return set;
+  }
+  function setPinFurniture(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");
+      let layer = host.querySelector(":scope > .gp-pin-furniture");
       if (!layer) {
         layer = document.createElement("div");
-        layer.className = "gp-flush-furniture";
+        layer.className = "gp-pin-furniture";
         layer.setAttribute("aria-hidden", "true");
         layer.setAttribute("style", "position:absolute;inset:0;pointer-events:none;z-index:10;");
         host.appendChild(layer);
@@ -616,8 +679,10 @@
     instrument,
     addCss,
     setGenerated,
-    flushRoots,
-    setFlushFurniture
+    pinRoots,
+    printArea,
+    setPinGeometry,
+    setPinFurniture
   };
   if (typeof window !== "undefined")
     window.__gp = api;

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

@@ -1038,10 +1038,12 @@
 `);
   }
 
-  // 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}`));
+  // src/engine/shared/pin-edges.ts
+  var PIN_EDGES = ["top", "right", "bottom", "left"];
+  var EDGE_PIN_SELECTOR = PIN_EDGES.map((edge) => `.gp-pin.gp-${edge}`).join(", ");
+  function pinEdgesIn(root) {
+    const pins = Array.from(root.querySelectorAll(EDGE_PIN_SELECTOR)).filter((pin) => pin.offsetParent === root);
+    return PIN_EDGES.filter((edge) => pins.some((pin) => pin.classList.contains(`gp-${edge}`)));
   }
   function flushMargins(margin, edges) {
     return {
@@ -1051,6 +1053,57 @@
       left: edges.includes("left") ? 0 : margin.left
     };
   }
+  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;
+    return { top: inset("top"), right: inset("right"), bottom: inset("bottom"), left: inset("left") };
+  }
+  var NO_PADDING = { top: 0, right: 0, bottom: 0, left: 0 };
+  function pinRootStyle(margin, area, side, edges, padding = NO_PADDING) {
+    const px = (pt) => pt * 96 / 72;
+    const inset = pinInsets(area, side, edges);
+    const style = { "box-decoration-break": "clone" };
+    for (const edge of PIN_EDGES)
+      if (edges.includes(edge))
+        style[`padding-${edge}`] = `${px(margin[edge]) + padding[edge]}px`;
+    for (const edge of PIN_EDGES)
+      style[`--gp-pin-${edge}`] = `${px(inset[edge])}px`;
+    return style;
+  }
+  function paddingOf(cs) {
+    return {
+      top: parseFloat(cs.paddingTop) || 0,
+      right: parseFloat(cs.paddingRight) || 0,
+      bottom: parseFloat(cs.paddingBottom) || 0,
+      left: parseFloat(cs.paddingLeft) || 0
+    };
+  }
+
+  // src/engine/shared/print-area.ts
+  function printAreaFromMeta(doc) {
+    const raw = doc.querySelector('meta[name="gp-print-area"]')?.getAttribute("content");
+    if (!raw)
+      return null;
+    try {
+      const v = JSON.parse(raw);
+      const n = (x) => typeof x === "number" && Number.isFinite(x) && x > 0 ? x : 0;
+      if (!n(v.width) || !n(v.height))
+        return null;
+      const safe = n(v.safe);
+      const spec = v.spec && typeof v.spec.label === "string" && typeof v.spec.url === "string" && /^https?:\/\//i.test(v.spec.url) ? v.spec : undefined;
+      return {
+        width: n(v.width),
+        height: n(v.height),
+        bleed: n(v.bleed),
+        safe,
+        artSafe: typeof v.artSafe === "number" ? n(v.artSafe) : safe,
+        preset: typeof v.preset === "string" ? v.preset : undefined,
+        spec
+      };
+    } catch {
+      return null;
+    }
+  }
 
   // src/engine/viewer/fragment.ts
   var PX_PER_PT = 96 / 72;
@@ -1210,13 +1263,29 @@
     }
     return false;
   }
-  function pushRun(runs, page, nodes, flushEdges) {
-    const key = (r) => `${r.page ?? ""}\x00${(r.flushEdges ?? []).join(",")}`;
+  function pushRun(runs, page, nodes, pin) {
+    const key = (r) => `${r.page ?? ""}\x00${(r.pin?.edges ?? []).join(",")}`;
     const last = runs[runs.length - 1];
-    if (last && key(last) === key({ page, flushEdges }))
+    if (last && key(last) === key({ page, pin })) {
       last.nodes.push(...nodes);
-    else
-      runs.push({ page, nodes, flushEdges: flushEdges?.length ? flushEdges : undefined });
+      if (pin)
+        last.pin.roots.push(...pin.roots);
+    } else
+      runs.push({ page, nodes, pin: pin && { edges: pin.edges, roots: [...pin.roots] } });
+  }
+  var PAGE_ROOT = ".page, .spread";
+  var ownPadding = new WeakMap;
+  function pinRunOf(el) {
+    if (!el.matches(PAGE_ROOT))
+      return;
+    const edges = pinEdgesIn(el);
+    return edges.length ? { edges, roots: [el] } : undefined;
+  }
+  function holdsPinRoot(el) {
+    return Array.from(el.querySelectorAll(EDGE_PIN_SELECTOR)).some((pin) => {
+      const root = pin.offsetParent;
+      return !!root && root !== el && el.contains(root) && root.matches(PAGE_ROOT);
+    });
   }
   function explodeChildren(container, model) {
     const runs = [];
@@ -1228,7 +1297,7 @@
       pending = [];
       const last = runs[runs.length - 1];
       if (last) {
-        pushRun(runs, last.page, held, last.flushEdges);
+        pushRun(runs, last.page, held, last.pin && { edges: last.pin.edges, roots: [] });
         return [];
       }
       if (held.some((n) => (n.textContent ?? "").trim() !== "")) {
@@ -1245,19 +1314,19 @@
       const kid = node;
       if (kid.classList.contains("gp-layer"))
         continue;
-      const flush = flushEdgesIn(kid);
+      const pin = pinRunOf(kid);
       const own = directPageName(kid, model);
       if (own !== undefined) {
-        pushRun(runs, own, [...carry(), kid], flush);
+        pushRun(runs, own, [...carry(), kid], pin);
         continue;
       }
-      if (!hasDescendantPageAssignment(kid, model)) {
-        pushRun(runs, undefined, [...carry(), kid], flush);
+      if (!hasDescendantPageAssignment(kid, model) && !holdsPinRoot(kid)) {
+        pushRun(runs, undefined, [...carry(), kid], pin);
         continue;
       }
       const inner = explodeChildren(kid, model);
       if (inner.length <= 1) {
-        pushRun(runs, inner[0]?.page, [...carry(), kid]);
+        pushRun(runs, inner[0]?.page, [...carry(), kid], pin ?? inner[0]?.pin);
         continue;
       }
       let lead = carry();
@@ -1266,7 +1335,7 @@
         for (const n of r.nodes)
           shell.appendChild(n);
         kid.before(shell);
-        pushRun(runs, r.page, [...lead, shell], flushEdgesIn(shell));
+        pushRun(runs, r.page, [...lead, shell], pin ? pinRunOf(shell) : r.pin);
         lead = [];
       }
       kid.remove();
@@ -1323,6 +1392,42 @@
       delete el.dataset.gpLeadingPageRootDisplayPriority;
     }
   }
+  function fitVersoPinRoots(model, strips) {
+    const area = printAreaFromMeta(document);
+    const versos = [];
+    for (const strip of strips) {
+      if (!strip.pinEdges || !strip.pinRoots?.length)
+        continue;
+      const edges = strip.pinEdges;
+      const { left, agree } = pageSides(model, strip.page);
+      const verso = agree ? left.margin : strip.geometry.margin;
+      const margin = { ...strip.geometry.margin, left: verso.left, right: verso.right };
+      const shift = pt(strip.versoShift);
+      for (const root of strip.pinRoots) {
+        if (pageOf(root, strips) % 2 !== 1)
+          continue;
+        const style = pinRootStyle(margin, area, "verso", edges, ownPadding.get(root));
+        if (shift && edges.includes("left"))
+          style["margin-left"] = `${shift}px`;
+        if (shift && edges.includes("right"))
+          style["margin-right"] = `${-shift}px`;
+        versos.push({ root, style });
+      }
+    }
+    for (const { root, style } of versos)
+      for (const [prop, value] of Object.entries(style))
+        root.style.setProperty(prop, value);
+  }
+  function restorePinRoots(doc = document) {
+    for (const el of Array.from(doc.querySelectorAll("[data-gp-pin-style]"))) {
+      const style = el.dataset.gpPinStyle;
+      if (style)
+        el.setAttribute("style", style);
+      else
+        el.removeAttribute("style");
+      delete el.dataset.gpPinStyle;
+    }
+  }
   var SCROLLABLE = /^(auto|scroll|hidden)$/;
   function makeOverflowFragmentable(strips) {
     const todo = [];
@@ -1388,21 +1493,16 @@
       agree: Math.abs(r.w - l.w) < 0.01 && Math.abs(r.h - l.h) < 0.01
     };
   }
-  function versoShiftPt(model, name, flushEdges = []) {
+  function versoShiftPt(model, name) {
     const { right, left, agree } = pageSides(model, name);
-    if (!agree)
-      return 0;
-    const r = flushMargins(right.margin, flushEdges);
-    const l = flushMargins(left.margin, flushEdges);
-    if (Math.abs(r.left + r.right - (l.left + l.right)) >= 0.01)
-      return 0;
-    return r.left - l.left;
+    return agree ? right.margin.left - left.margin.left : 0;
   }
   function buildStrips(model, opts = {}, warnings = []) {
     const doc = document;
     const root = opts.root ?? doc.querySelector("main") ?? doc.body;
     const gap = opts.sheetGap ?? 24;
     const runs = explodeChildren(root, model);
+    const area = printAreaFromMeta(doc);
     const strips = [];
     for (const run of runs) {
       const geometry = runPageBox(model, run.page, warnings);
@@ -1410,7 +1510,18 @@
       strip.className = "gp-strip";
       if (run.page)
         strip.dataset.page = run.page;
-      const margin = run.flushEdges?.length ? flushMargins(geometry.margin, run.flushEdges) : geometry.margin;
+      const margin = run.pin ? flushMargins(geometry.margin, run.pin.edges) : geometry.margin;
+      if (run.pin) {
+        const { edges, roots } = run.pin;
+        for (const pinRoot of roots)
+          ownPadding.set(pinRoot, paddingOf(getComputedStyle(pinRoot)));
+        for (const pinRoot of roots) {
+          pinRoot.dataset.gpPinStyle ??= pinRoot.getAttribute("style") ?? "";
+          const recto = pinRootStyle(geometry.margin, area, "recto", edges, ownPadding.get(pinRoot));
+          for (const [prop, value] of Object.entries(recto))
+            pinRoot.style.setProperty(prop, value);
+        }
+      }
       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`);
@@ -1422,7 +1533,7 @@
       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`);
-      const rawShift = versoShiftPt(model, run.page, run.flushEdges);
+      const rawShift = versoShiftPt(model, run.page);
       const versoShift = Math.abs(rawShift) >= 0.01 ? rawShift : 0;
       if (versoShift)
         strip.style.setProperty("--gp-verso-shift", `${pt(versoShift)}px`);
@@ -1433,7 +1544,8 @@
         el: strip,
         page: run.page,
         geometry,
-        flushEdges: run.flushEdges,
+        pinEdges: run.pin?.edges,
+        pinRoots: run.pin?.roots,
         versoShift,
         pages: 0,
         offset: 0
@@ -1455,12 +1567,20 @@
     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) => t.tHead || t.tFoot);
+      const tables = Array.from(strip.el.querySelectorAll("table")).filter((t) => repeatingHead(t) || repeatingFoot(t));
       if (!tables.length)
         continue;
       for (const table of tables) {
@@ -1485,9 +1605,9 @@
         const colBottom = strip.el.clientHeight;
         const plans = [];
         for (const table of tables) {
-          const head = table.tHead;
+          const head = repeatingHead(table);
           const headRect = head?.getClientRects()[0];
-          const footHeight = (table.tFoot?.getBoundingClientRect().height ?? 0) / zoom;
+          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;
@@ -1567,7 +1687,7 @@
         td.colSpan = cell.colSpan;
         td.innerHTML = cell.innerHTML;
         const cs = getComputedStyle(cell);
-        td.style.cssText = `font:${cs.font};text-align:${cs.textAlign};padding:${cs.padding};border:${cs.border};background:${cs.backgroundColor};`;
+        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 {
@@ -1797,6 +1917,7 @@
     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);
     const api = {
       model,
       strips,
@@ -1810,6 +1931,7 @@
       relayout: () => {
         restoreFullHeightPageRoots();
         restoreScrollContainers();
+        restorePinRoots();
         unwrapStrips(strips);
         for (const spacer of Array.from(document.querySelectorAll(".gp-recto-spacer, .gp-pad-spacer")))
           spacer.remove();
@@ -1828,6 +1950,7 @@
         const content = measure(strips).totalPages;
         padToSignature(strips, content);
         const r = measure(strips);
+        fitVersoPinRoots(model, strips);
         api.totalPages = r.totalPages;
         api.blankPageIndices = blankPageIndices(strips);
         api.paddedPageIndices = pagesAfter(content, r.totalPages);
@@ -2174,30 +2297,6 @@
     artSafePt: 0,
     counts: { text: 0, art: 0, bleed: 0, offPage: 0, intended: 0 }
   };
-  function printAreaFromMeta() {
-    const raw = document.querySelector('meta[name="gp-print-area"]')?.getAttribute("content");
-    if (!raw)
-      return null;
-    try {
-      const v = JSON.parse(raw);
-      const n = (x) => typeof x === "number" && Number.isFinite(x) && x > 0 ? x : 0;
-      if (!n(v.width) || !n(v.height))
-        return null;
-      const safe = n(v.safe);
-      const spec = v.spec && typeof v.spec.label === "string" && typeof v.spec.url === "string" && /^https?:\/\//i.test(v.spec.url) ? v.spec : undefined;
-      return {
-        width: n(v.width),
-        height: n(v.height),
-        bleed: n(v.bleed),
-        safe,
-        artSafe: typeof v.artSafe === "number" ? n(v.artSafe) : safe,
-        preset: typeof v.preset === "string" ? v.preset : undefined,
-        spec
-      };
-    } catch {
-      return null;
-    }
-  }
   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 };
@@ -2681,7 +2780,7 @@
     let overlayPages = [];
     let overlaySummary = OVERLAY_OFF;
     const paintOverlayNow = () => {
-      overlaySummary = paintOverlay(overlayPages, layout.strips, printAreaFromMeta(), overlayLayers);
+      overlaySummary = paintOverlay(overlayPages, layout.strips, printAreaFromMeta(document), overlayLayers);
       window.dispatchEvent(new CustomEvent("gp:overlay", { detail: overlaySummary }));
     };
     const api = {