gutterpress 0.10.0-alpha.4 → 0.10.0

package/dist/{engine-z4p9sr4h.js → engine-b159tbns.js}

@@ -1,13 +1,13 @@
 import {
   build
-} from "./index-xxg4zfrg.js";
+} from "./index-wq3r5pj7.js";
 import {
   BuildError,
   RENDER_TIMEOUT_MS,
   assertMilestone,
   connectChromium,
   getBrowser
-} from "./index-9tyq9kks.js";
+} from "./index-ycpvr0am.js";
 import"./index-37x76zdn.js";
 
 // src/lib/engine.ts

package/dist/{engine-wa7y9av9.js → engine-ft4cr3ep.js}

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

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-te8g5grx.js}

@@ -24,6 +24,7 @@
     strideOf: () => strideOf,
     stabilizeFullHeightPageRoots: () => stabilizeFullHeightPageRoots,
     spreadModeSupported: () => spreadModeSupported,
+    runPageBox: () => runPageBox,
     rowStrideOf: () => rowStrideOf,
     pageRangeOf: () => pageRangeOf,
     pageOf: () => pageOf,
@@ -33,9 +34,11 @@
     injectBreakMapping: () => injectBreakMapping,
     fragmentDocument: () => fragmentDocument,
     forcedColumnBreaksSupported: () => forcedColumnBreaksSupported,
+    contentEdgeRect: () => contentEdgeRect,
     compensateTrailingMarginsBeforeAvoids: () => compensateTrailingMarginsBeforeAvoids,
     compensateRepeatedHeaders: () => compensateRepeatedHeaders,
     compensateRectoBreaks: () => compensateRectoBreaks,
+    columnReserve: () => columnReserve,
     collectCssText: () => collectCssText,
     buildStrips: () => buildStrips,
     blankPageIndices: () => blankPageIndices,
@@ -94,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
@@ -148,6 +163,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 +989,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 +1051,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 +1102,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) / cssZoomOf(strip), strip.clientHeight);
+      if (reserve === null)
         continue;
       const spacer = document.createElement("div");
       spacer.className = "gp-column-break-spacer";
@@ -1066,8 +1126,28 @@
       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) {
@@ -1087,12 +1167,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 +1185,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 +1202,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 +1223,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();
@@ -1232,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");
@@ -1277,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;
@@ -1284,26 +1382,34 @@
     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)
         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);
@@ -1329,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;
@@ -1351,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;
               }
             }
@@ -1362,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()],
@@ -1486,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"));
@@ -1508,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));
   }
@@ -1864,6 +1975,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 +2262,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 +2374,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