gutterpress 0.11.20-alpha.1 → 0.11.20-alpha.2

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

@@ -2101,41 +2101,79 @@
     const h = area.height * scale;
     const b = Math.max(0, area.bleed) * scale;
     const s = Math.max(0, area.safe) * scale;
+    const a = Math.max(0, area.artSafe) * scale;
+    const [left, right] = side === "verso" ? [a, s] : [s, a];
     const trim = { x: side === "verso" ? b : 0, y: b, w: Math.max(0, w - b), h: Math.max(0, h - 2 * b) };
     return {
       sheet: { x: 0, y: 0, w, h },
       trim,
       safe: { x: trim.x + s, y: trim.y + s, w: Math.max(0, trim.w - 2 * s), h: Math.max(0, trim.h - 2 * s) },
+      safeArt: {
+        x: trim.x + left,
+        y: trim.y + a,
+        w: Math.max(0, trim.w - left - right),
+        h: Math.max(0, trim.h - 2 * a)
+      },
       bleed: b
     };
   }
   var SEVERITY = { inside: 0, unsafe: 1, bleed: 2, "off-page": 3 };
-  var within = (r, outer, tol) => r.x >= outer.x - tol && r.y >= outer.y - tol && r.x + r.w <= outer.x + outer.w + tol && r.y + r.h <= outer.y + outer.h + tol;
-  function classifyRect(r, boxes, tol = 0) {
-    if (within(r, boxes.safe, tol))
-      return "inside";
-    if (within(r, boxes.trim, tol))
-      return "unsafe";
-    if (boxes.bleed > 0 && within(r, boxes.sheet, tol))
-      return "bleed";
-    return "off-page";
-  }
-  function worstKind(kinds) {
-    return kinds.reduce((worst, k) => SEVERITY[k] > SEVERITY[worst] ? k : worst, "inside");
+  function classifyRect(r, boxes, rule, tol = 0) {
+    const { sheet, trim } = boxes;
+    const safe = rule === "art" ? boxes.safeArt : boxes.safe;
+    const sides = [
+      [-r.x, -safe.x, -trim.x, -sheet.x],
+      [r.x + r.w, safe.x + safe.w, trim.x + trim.w, sheet.x + sheet.w],
+      [-r.y, -safe.y, -trim.y, -sheet.y],
+      [r.y + r.h, safe.y + safe.h, trim.y + trim.h, sheet.y + sheet.h]
+    ];
+    let worst = { kind: "inside", gap: 0, need: 0 };
+    let beyond = 0;
+    for (const [ink, limit, edge, sheetEdge] of sides) {
+      const past = ink - limit;
+      if (past <= tol || rule === "art" && ink >= sheetEdge - tol)
+        continue;
+      const kind = ink > sheetEdge + tol ? "off-page" : ink > edge + tol ? "bleed" : "unsafe";
+      if (SEVERITY[kind] > SEVERITY[worst.kind] || kind === worst.kind && past > beyond) {
+        worst = { kind, gap: edge - ink, need: edge - limit };
+        beyond = past;
+      }
+    }
+    return worst;
   }
   var INTENT_SELECTOR = ".gp-bleed, .gp-pin, .gp-flush, .gp-behind, .gp-page-full-bleed";
+  var OVERLAY_LAYERS = ["bleed", "safe", "art", "margins"];
+  function layersFrom(state) {
+    const named = state && typeof state === "object" ? state : null;
+    const on = (layer) => named ? named[layer] === true : !!state;
+    return { bleed: on("bleed"), safe: on("safe"), art: on("art"), margins: on("margins") };
+  }
   var OVERLAY_STRENGTHS = ["subtle", "normal", "strong"];
   var HEX_COLOR = /^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i;
   function sanitizeOverlayStyle(style) {
     const s = style && typeof style === "object" ? style : {};
+    const given = s.colors && typeof s.colors === "object" ? s.colors : {};
+    const hex = (v) => typeof v === "string" && HEX_COLOR.test(v.trim()) ? v.trim() : undefined;
     const out = {};
-    if (typeof s.color === "string" && HEX_COLOR.test(s.color.trim()))
-      out.color = s.color.trim();
+    for (const layer of OVERLAY_LAYERS) {
+      const color = hex(given[layer]) ?? (layer === "safe" ? hex(s.color) : undefined);
+      if (color)
+        (out.colors ??= {})[layer] = color;
+    }
     if (OVERLAY_STRENGTHS.includes(s.strength))
       out.strength = s.strength;
     return out;
   }
-  var OVERLAY_OFF = { on: false, issues: 0, intended: 0, bleedPt: 0, safePt: 0 };
+  var OVERLAY_OFF = {
+    on: false,
+    layers: { bleed: false, safe: false, art: false, margins: false },
+    issues: 0,
+    intended: 0,
+    bleedPt: 0,
+    safePt: 0,
+    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)
@@ -2145,24 +2183,37 @@
       const n = (x) => typeof x === "number" && Number.isFinite(x) && x > 0 ? x : 0;
       if (!n(v.width) || !n(v.height))
         return null;
-      return { width: n(v.width), height: n(v.height), bleed: n(v.bleed), safe: n(v.safe) };
+      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 };
+    return { width: px("--gp-page-w") / PX_PER_PT, height: px("--gp-page-h") / PX_PER_PT, bleed: 0, safe: 0, artSafe: 0 };
   }
   var OVERLAY_CSS = `
 .root {
-  --gp-ov-color: #2f80ed;       /* safe-area line + the tint outside it */
+  --gp-ov-color: #2f80ed;       /* safe layer: the text line + the tint outside it */
   --gp-ov-width: 2px;           /* line width as seen on screen, at any zoom */
-  --gp-ov-style: dashed;        /* safe-area line style */
-  --gp-ov-tint: 0.1;            /* opacity of the tint between safe area and trim */
-  --gp-ov-bleed-color: #e5484d; /* bleed band */
+  --gp-ov-style: dashed;        /* text safe line style */
+  --gp-ov-art-style: dotted;    /* art safe line style */
+  --gp-ov-tint: 0.1;            /* opacity of the tint between the text line and the trim */
+  --gp-ov-bleed-color: #e5484d; /* bleed layer: the band, and (darker) the trim line */
   --gp-ov-bleed-alpha: 0.45;    /* opacity of the bleed band */
-  --gp-ov-trim-color: #8a0b18;  /* the trim line: darker than the band so it reads as an edge */
+  --gp-ov-trim-color: color-mix(in srgb, var(--gp-ov-bleed-color) 60%, #000); /* darker than the band so it reads as an edge */
+  --gp-ov-art-color: #00b4d8;   /* art layer: the art line (dotted, a second cue) */
+  --gp-ov-margins-color: #1a9c6b; /* margins layer: the page's own content box */
   --gp-ov-flag-width: 2px;      /* overflow flag outline */
   --gp-ov-warn: #f59e0b;        /* leaves the safe area */
   --gp-ov-error: #e5484d;       /* crosses the trim / leaves the sheet */
@@ -2171,10 +2222,18 @@
      zoom; dividing by it keeps lines the same width on screen at every zoom. */
   --gp-ov-w: calc(var(--gp-ov-width) / var(--gp-ov-z, 1));
   --gp-ov-flag-w: calc(var(--gp-ov-flag-width) / var(--gp-ov-z, 1));
+  --gp-ov-margins-w: calc(1px / var(--gp-ov-z, 1)); /* thin, whatever the strength */
   position: absolute;
   inset: 0;
   pointer-events: none;
 }
+/* the stage's zoomed copy, holding the pages' boxes; the legend sits beside it, not in it */
+.gp-ov-canvas {
+  position: absolute;
+  left: 0;
+  top: 0;
+  transform-origin: 0 0;
+}
 .root[data-strength="subtle"] {
   --gp-ov-width: 1px;
   --gp-ov-tint: 0.05;
@@ -2186,11 +2245,11 @@
   --gp-ov-bleed-alpha: 0.65;
   --gp-ov-flag-width: 3px;
 }
-.gp-ov-page, .gp-ov-tint, .gp-ov-safe, .gp-ov-bleed, .gp-ov-trim, .gp-ov-flag {
+.gp-ov-page, .gp-ov-tint, .gp-ov-safe, .gp-ov-art, .gp-ov-bleed, .gp-ov-trim, .gp-ov-margins, .gp-ov-flag {
   position: absolute;
   box-sizing: border-box;
 }
-/* the band between the safe area and the trim, as a REGION (clip-path, set in
+/* the band between the text line and the trim, as a REGION (clip-path, set in
    overlay.ts), so it reads as an area, not a hairline */
 .gp-ov-tint {
   background: color-mix(in srgb, var(--gp-ov-color) calc(var(--gp-ov-tint) * 100%), transparent);
@@ -2198,6 +2257,9 @@
 .gp-ov-safe {
   border: var(--gp-ov-w) var(--gp-ov-style) var(--gp-ov-color);
 }
+.gp-ov-art {
+  border: var(--gp-ov-w) var(--gp-ov-art-style) var(--gp-ov-art-color);
+}
 /* bleed: a translucent band between the trim and the sheet edge (its width is the border) */
 .gp-ov-bleed {
   border-style: solid;
@@ -2208,6 +2270,10 @@
   outline: var(--gp-ov-w) solid var(--gp-ov-trim-color);
   outline-offset: calc(-1 * var(--gp-ov-w));
 }
+/* margins: the page's own content box, a thin solid line */
+.gp-ov-margins {
+  border: var(--gp-ov-margins-w) solid var(--gp-ov-margins-color);
+}
 /* overflow flags: outline + faint tint, never a box change */
 .gp-ov-flag[data-kind="unsafe"] {
   outline: var(--gp-ov-flag-w) solid var(--gp-ov-warn);
@@ -2221,6 +2287,38 @@
 .gp-ov-flag[data-kind="intended"] {
   outline: var(--gp-ov-flag-w) dotted var(--gp-ov-intent);
 }
+/* the legend: small, fixed in a corner of the viewport, and the one part that takes the pointer (its link) */
+.gp-ov-legend {
+  position: fixed;
+  right: 12px;
+  bottom: 12px;
+  box-sizing: border-box;
+  max-width: min(420px, calc(100vw - 24px));
+  padding: 8px 10px;
+  border-radius: 8px;
+  background: rgba(20, 20, 24, 0.92);
+  color: #fff;
+  font: 11px/1.45 ui-sans-serif, system-ui, sans-serif;
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
+  pointer-events: auto;
+}
+.gp-ov-legend > div + div { margin-top: 3px; }
+.gp-ov-legend a { color: #9cc2ff; }
+.gp-ov-row { display: flex; align-items: flex-start; gap: 6px; }
+.gp-ov-swatch {
+  flex: none;
+  box-sizing: border-box;
+  width: 10px;
+  height: 10px;
+  margin-top: 3px;
+  border: 1px solid rgba(255, 255, 255, 0.7);
+  border-radius: 2px;
+}
+.gp-ov-swatch[data-layer="bleed"] { background: var(--gp-ov-bleed-color); }
+.gp-ov-swatch[data-layer="safe"] { background: var(--gp-ov-color); }
+.gp-ov-swatch[data-layer="art"] { background: var(--gp-ov-art-color); }
+.gp-ov-swatch[data-layer="margins"] { background: var(--gp-ov-margins-color); }
+.gp-ov-note { opacity: 0.75; }
 @media print {
   .root { display: none; }
 }
@@ -2244,24 +2342,33 @@
     "mask: none",
     "z-index: 2147483647",
     "pointer-events: none",
-    "transform-origin: 0 0",
     "contain: style"
   ].map((d) => `${d} !important`).join("; ");
   var OVERLAY_TAG = "gp-overlay";
   var host = null;
   var root = null;
+  var canvas = null;
   var observer = null;
   var currentStyle = {};
+  var COLOR_TOKEN = {
+    bleed: "--gp-ov-bleed-color",
+    safe: "--gp-ov-color",
+    art: "--gp-ov-art-color",
+    margins: "--gp-ov-margins-color"
+  };
   function applyStyle() {
     if (!root)
       return;
     if (currentStyle.strength)
       root.dataset.strength = currentStyle.strength;
-    if (currentStyle.color)
-      root.style.setProperty("--gp-ov-color", currentStyle.color);
+    for (const layer of OVERLAY_LAYERS) {
+      const color = currentStyle.colors?.[layer];
+      if (color)
+        root.style.setProperty(COLOR_TOKEN[layer], color);
+    }
   }
   function setOverlayStyle(style) {
-    currentStyle = { ...currentStyle, ...style };
+    currentStyle = { ...currentStyle, ...style, colors: { ...currentStyle.colors, ...style.colors } };
     applyStyle();
   }
   function stageFrame() {
@@ -2271,32 +2378,33 @@
     return { left: r.left, top: r.top, zoom: zoom || 1 };
   }
   function syncToStage() {
-    if (!host || !root)
+    if (!root || !canvas)
       return;
     const { left, top, zoom } = stageFrame();
-    host.style.setProperty("transform", `translate(${left + window.scrollX}px, ${top + window.scrollY}px) scale(${zoom})`, "important");
+    canvas.style.transform = `translate(${left + window.scrollX}px, ${top + window.scrollY}px) scale(${zoom})`;
     root.style.setProperty("--gp-ov-z", String(zoom));
   }
   function ensureRoot() {
-    if (host && root && host.isConnected) {
-      root.textContent = "";
-      return root;
-    }
-    host = document.createElement(OVERLAY_TAG);
-    host.setAttribute("style", HOST_STYLE);
-    host.setAttribute("aria-hidden", "true");
-    const shadow = host.attachShadow({ mode: "open" });
-    const sheet = document.createElement("style");
-    sheet.textContent = OVERLAY_CSS;
-    root = document.createElement("div");
-    root.className = "root";
-    shadow.append(sheet, root);
-    document.documentElement.appendChild(host);
-    applyStyle();
-    observer = new MutationObserver(syncToStage);
-    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["style"] });
-    observer.observe(document.body, { attributes: true, attributeFilter: ["style"] });
-    return root;
+    if (!(host && root && host.isConnected)) {
+      host = document.createElement(OVERLAY_TAG);
+      host.setAttribute("style", HOST_STYLE);
+      const shadow = host.attachShadow({ mode: "open" });
+      const sheet = document.createElement("style");
+      sheet.textContent = OVERLAY_CSS;
+      root = document.createElement("div");
+      root.className = "root";
+      shadow.append(sheet, root);
+      document.documentElement.appendChild(host);
+      applyStyle();
+      observer = new MutationObserver(syncToStage);
+      observer.observe(document.documentElement, { attributes: true, attributeFilter: ["style"] });
+      observer.observe(document.body, { attributes: true, attributeFilter: ["style"] });
+    }
+    root.textContent = "";
+    canvas = div("gp-ov-canvas");
+    canvas.setAttribute("aria-hidden", "true");
+    root.appendChild(canvas);
+    return canvas;
   }
   function clearOverlay() {
     observer?.disconnect();
@@ -2304,6 +2412,7 @@
     host?.remove();
     host = null;
     root = null;
+    canvas = null;
   }
   function div(cls, box) {
     const el = document.createElement("div");
@@ -2325,9 +2434,86 @@
     el.style.clipPath = `polygon(evenodd, ${t.x}px ${t.y}px, ${t.x + t.w}px ${t.y}px, ${t.x + t.w}px ${t.y + t.h}px, ${t.x}px ${t.y + t.h}px, ${t.x}px ${t.y}px, ` + `${s.x}px ${s.y}px, ${s.x}px ${s.y + s.h}px, ${s.x + s.w}px ${s.y + s.h}px, ${s.x + s.w}px ${s.y}px, ${s.x}px ${s.y}px)`;
     return el;
   }
+  function marginsBox(p, side) {
+    const { width, height, margin } = p.strip.geometry;
+    const shift = side === "verso" ? p.strip.versoShift : 0;
+    const left = margin.left - shift;
+    const right = margin.right + shift;
+    return {
+      x: left * PX_PER_PT,
+      y: margin.top * PX_PER_PT,
+      w: Math.max(0, width - left - right) * PX_PER_PT,
+      h: Math.max(0, height - margin.top - margin.bottom) * PX_PER_PT
+    };
+  }
   var TOL_PX = 1;
   var SKIP = new Set(["SCRIPT", "STYLE", "LINK", "TEMPLATE", "BR", "WBR", "SOURCE", "TRACK", "META"]);
-  function paintOverlay(pages, strips, area) {
+  var ART_TAGS = new Set(["img", "svg", "video", "canvas"]);
+  var inches = (px) => +(Math.abs(px) / 96).toFixed(2);
+  var ptIn = (pt2) => `${+(pt2 / 72).toFixed(3)}in`;
+  function legend(layers, area, summary) {
+    const el = div("gp-ov-legend");
+    const add = (cls, ...content) => {
+      const line = div(cls);
+      line.append(...content);
+      el.appendChild(line);
+    };
+    const row = (layer, name, text) => {
+      const swatch = div("gp-ov-swatch");
+      swatch.dataset.layer = layer;
+      const bold = document.createElement("b");
+      bold.textContent = name;
+      const label = document.createElement("span");
+      label.append(bold, text);
+      add("gp-ov-row", swatch, label);
+    };
+    const { bleedPt, safePt, artSafePt, counts } = summary;
+    if (layers.bleed) {
+      row("bleed", "Bleed", bleedPt > 0 ? ` ${ptIn(bleedPt)} — top, bottom, outside; none at the binding` : " — none set (page.bleed in manifest.yaml)");
+    }
+    if (layers.safe) {
+      row("safe", "Safe area: text", safePt > 0 ? ` — ${ptIn(safePt)}, every edge` : " — none set (page.safe in manifest.yaml)");
+    }
+    if (layers.art) {
+      row("art", "Safe area: art", safePt <= 0 && artSafePt <= 0 ? " — none set (page.artSafe in manifest.yaml)" : artSafePt === safePt ? ` — ${ptIn(artSafePt)}, every edge` : ` — ${ptIn(artSafePt)} top, bottom, outside; ${ptIn(safePt)} at the binding`);
+    }
+    if (layers.margins)
+      row("margins", "Page margins", " — your stylesheet's @page margins");
+    if (area && (layers.bleed || layers.safe || layers.art)) {
+      if (area.spec) {
+        const link = document.createElement("a");
+        link.href = area.spec.url;
+        link.target = "_blank";
+        link.rel = "noopener";
+        link.textContent = area.spec.label;
+        add("gp-ov-note", "from ", link);
+      } else {
+        add("gp-ov-note", `from manifest.yaml${area.preset ? ` (preset ${area.preset})` : ""}`);
+      }
+    }
+    if (layers.safe || layers.art) {
+      const found = [];
+      if (counts.text)
+        found.push(`${counts.text} text outside the safe area`);
+      if (counts.art)
+        found.push(`${counts.art} art outside${counts.text ? "" : " the safe area"}`);
+      if (counts.bleed)
+        found.push(`${counts.bleed} in the bleed band`);
+      if (counts.offPage)
+        found.push(`${counts.offPage} off the page`);
+      if (!found.length) {
+        found.push(`${layers.safe && layers.art ? "everything" : layers.safe ? "all text" : "all art"} inside the safe area`);
+      }
+      if (counts.intended)
+        found.push(`${counts.intended} placed on purpose`);
+      add("gp-ov-found", found.join(" · "));
+    }
+    const key = document.documentElement.dataset.overlayKey;
+    if (key)
+      add("gp-ov-note", `${key} hides`);
+    return el;
+  }
+  function paintOverlay(pages, strips, area, layers) {
     const layer = ensureRoot();
     syncToStage();
     const stage = stageFrame();
@@ -2343,7 +2529,7 @@
         h: boxes.sheet.h
       });
       host2.dataset.page = String(p.index + 1);
-      if (boxes.bleed > 0) {
+      if (layers.bleed && boxes.bleed > 0) {
         const sh = boxes.sheet;
         const t = boxes.trim;
         const band = div("gp-ov-bleed", sh);
@@ -2351,68 +2537,115 @@
         host2.appendChild(band);
         host2.appendChild(div("gp-ov-trim", t));
       }
-      if (area && area.safe > 0) {
+      if (layers.safe && area && area.safe > 0) {
         host2.appendChild(unsafeTint(boxes));
         host2.appendChild(div("gp-ov-safe", boxes.safe));
       }
+      if (layers.art && area && area.artSafe > 0)
+        host2.appendChild(div("gp-ov-art", boxes.safeArt));
+      if (layers.margins && !p.padded)
+        host2.appendChild(div("gp-ov-margins", marginsBox(p, side)));
       layer.appendChild(host2);
       painted.set(p.index, { host: host2, boxes, sheet: p.sheet, rect });
     }
     const flags = [];
-    let issues = 0;
-    let intended = 0;
-    for (const strip of strips) {
-      const zoom = cssZoomOf(strip.el);
-      const colW = (parseFloat(strip.el.style.getPropertyValue("--gp-content-w")) || 0) * zoom;
-      const colH = (parseFloat(strip.el.style.getPropertyValue("--gp-content-h")) || 0) * zoom;
-      const visit = (el) => {
-        if (SKIP.has(el.tagName) || el.classList.contains("gp-wrap-spacer"))
-          return;
-        const kinds = [];
-        const found = [];
-        for (const r of Array.from(el.getClientRects())) {
+    const counts = { text: 0, art: 0, bleed: 0, offPage: 0, intended: 0 };
+    const seen = new Set;
+    const range = document.createRange();
+    const source = area?.spec?.label ?? "the safe area";
+    const inspect = (root2, pageOf2, zoom) => {
+      if (!layers.safe && !layers.art)
+        return;
+      const judge = (el, rule, rects) => {
+        for (const r of rects) {
           if (r.width <= 0 && r.height <= 0)
             continue;
-          const ax = r.left + Math.min(r.width, colW || r.width) / 2;
-          const ay = r.top + Math.min(r.height, colH || r.height) / 2;
-          const target = painted.get(strip.offset + indexInStrip(ax, ay, strip));
+          const target = pageOf2(r);
           if (!target)
             continue;
           target.rect ??= target.sheet.getBoundingClientRect();
-          const local = {
+          const box = {
             x: (r.left - target.rect.left) / zoom,
             y: (r.top - target.rect.top) / zoom,
             w: r.width / zoom,
             h: r.height / zoom
           };
-          const kind = classifyRect(local, target.boxes, TOL_PX);
-          kinds.push(kind);
-          if (kind !== "inside")
-            found.push({ host: target.host, kind, box: local });
+          const { kind, gap, need } = classifyRect(box, target.boxes, rule, TOL_PX);
+          if (kind === "inside")
+            continue;
+          const key = `${target.host.dataset.page} ${box.x} ${box.y} ${box.w} ${box.h}`;
+          if (seen.has(key))
+            continue;
+          seen.add(key);
+          const placed = el.closest(INTENT_SELECTOR) !== null;
+          const bucket = placed ? "intended" : kind === "unsafe" ? rule : kind === "bleed" ? "bleed" : "offPage";
+          counts[bucket]++;
+          const title = `${rule} ${inches(gap)}in ${gap < 0 ? "past" : "from"} the trim; ${source} needs ${inches(need)}in`;
+          flags.push({
+            host: target.host,
+            kind: placed ? "intended" : kind,
+            rule,
+            box,
+            title: placed ? `${title} (placed on purpose)` : title
+          });
         }
-        const worst = worstKind(kinds);
-        if (worst !== "inside") {
-          const isIntended = el.closest(INTENT_SELECTOR) !== null;
-          if (isIntended)
-            intended++;
-          else
-            issues++;
-          for (const f of found)
-            flags.push(isIntended ? { ...f, kind: "intended" } : f);
+      };
+      const visit = (node) => {
+        if (node.nodeType === Node.TEXT_NODE) {
+          if (!layers.safe || !node.nodeValue?.trim())
+            return;
+          range.selectNodeContents(node);
+          judge(node.parentElement, "text", range.getClientRects());
           return;
         }
-        for (const child of Array.from(el.children))
+        if (!(node instanceof Element) || SKIP.has(node.tagName) || node.classList.contains("gp-wrap-spacer"))
+          return;
+        if (layers.art) {
+          const cs = getComputedStyle(node);
+          if (ART_TAGS.has(node.localName) || cs.backgroundImage !== "none" || !/^rgba\(.*, 0\)$/.test(cs.backgroundColor) || parseFloat(cs.borderTopWidth) > 0 || parseFloat(cs.borderRightWidth) > 0 || parseFloat(cs.borderBottomWidth) > 0 || parseFloat(cs.borderLeftWidth) > 0) {
+            judge(node, "art", node.getClientRects());
+          }
+        }
+        for (const child of node.childNodes)
           visit(child);
       };
-      for (const child of Array.from(strip.el.children))
-        visit(child);
+      visit(root2);
+    };
+    for (const strip of strips) {
+      const zoom = cssZoomOf(strip.el);
+      const colW = (parseFloat(strip.el.style.getPropertyValue("--gp-content-w")) || 0) * zoom;
+      const colH = (parseFloat(strip.el.style.getPropertyValue("--gp-content-h")) || 0) * zoom;
+      const pageOf2 = (r) => {
+        const ax = r.left + Math.min(r.width, colW || r.width) / 2;
+        const ay = r.top + Math.min(r.height, colH || r.height) / 2;
+        return painted.get(strip.offset + indexInStrip(ax, ay, strip));
+      };
+      for (const child of strip.el.childNodes)
+        inspect(child, pageOf2, zoom);
+    }
+    for (const target of painted.values()) {
+      for (const furniture of target.sheet.querySelectorAll(".gp-marginbox"))
+        inspect(furniture, () => target, stage.zoom);
     }
     for (const f of flags) {
       const el = div("gp-ov-flag", f.box);
       el.dataset.kind = f.kind;
+      el.dataset.rule = f.rule;
+      el.title = f.title;
       f.host.appendChild(el);
     }
-    return { on: true, issues, intended, bleedPt: area?.bleed ?? 0, safePt: area?.safe ?? 0 };
+    const summary = {
+      on: true,
+      layers,
+      issues: counts.text + counts.art + counts.bleed + counts.offPage,
+      intended: counts.intended,
+      bleedPt: area?.bleed ?? 0,
+      safePt: area?.safe ?? 0,
+      artSafePt: area?.artSafe ?? 0,
+      counts
+    };
+    root?.appendChild(legend(layers, area, summary));
+    return summary;
   }
 
   // src/engine/viewer/decorate.ts
@@ -2444,10 +2677,11 @@
     let paddedPages = new Set;
     const warnings = [];
     let overlayOn = false;
+    let overlayLayers = OVERLAY_OFF.layers;
     let overlayPages = [];
     let overlaySummary = OVERLAY_OFF;
     const paintOverlayNow = () => {
-      overlaySummary = paintOverlay(overlayPages, layout.strips, printAreaFromMeta());
+      overlaySummary = paintOverlay(overlayPages, layout.strips, printAreaFromMeta(), overlayLayers);
       window.dispatchEvent(new CustomEvent("gp:overlay", { detail: overlaySummary }));
     };
     const api = {
@@ -2460,20 +2694,31 @@
       setDesigner(on) {
         document.body.dataset.designer = on ? "on" : "off";
       },
-      setOverlay(on, style) {
+      setOverlay(state, style) {
         if (style) {
           const clean = sanitizeOverlayStyle(style);
           setOverlayStyle(clean);
-          if (clean.strength)
-            document.body.dataset.overlayStrength = clean.strength;
-          if (clean.color)
-            document.body.dataset.overlayColor = clean.color;
+          const { strength, colors } = clean;
+          if (strength)
+            document.body.dataset.overlayStrength = strength;
+          if (colors?.safe)
+            document.body.dataset.overlayColor = colors.safe;
+          if (colors?.art)
+            document.body.dataset.overlayArtColor = colors.art;
+          if (colors?.bleed)
+            document.body.dataset.overlayBleedColor = colors.bleed;
+          if (colors?.margins)
+            document.body.dataset.overlayMarginsColor = colors.margins;
         }
         const wasOn = overlayOn;
-        overlayOn = on;
-        document.body.dataset.overlay = on ? "on" : "off";
-        if (on) {
-          if (!(wasOn && style))
+        const next = layersFrom(state);
+        const sameLayers = OVERLAY_LAYERS.every((layer) => next[layer] === overlayLayers[layer]);
+        overlayLayers = next;
+        overlayOn = OVERLAY_LAYERS.some((layer) => next[layer]);
+        document.body.dataset.overlay = overlayOn ? "on" : "off";
+        if (overlayOn) {
+          document.body.dataset.overlayLayers = OVERLAY_LAYERS.filter((layer) => next[layer]).join(",");
+          if (!(wasOn && sameLayers && style))
             paintOverlayNow();
         } else {
           clearOverlay();
@@ -2617,8 +2862,8 @@
       }
       if (!marked.length)
         return;
-      const canvas = document.createElement("canvas");
-      const cx = canvas.getContext("2d");
+      const canvas2 = document.createElement("canvas");
+      const cx = canvas2.getContext("2d");
       for (const m of marked)
         m.el.setAttribute(m.attr, m.raw.replace(LEADER_RE, ""));
       document.body.offsetHeight;
@@ -2682,7 +2927,7 @@
           drawMarginBoxes(sheet, ctx, layout.totalPages - paddedPages.size);
           drawGuides(sheet, ctx);
           drawCropMarks(sheet, ctx);
-          overlayPages.push({ index: bookIndex, sheet, strip });
+          overlayPages.push({ index: bookIndex, sheet, strip, padded: ctx.padded });
         }
         const rows = Math.max(1, Math.ceil((strip.pages + shift) / perRow));
         run.style.height = `${rowStride * (rows - 1) + PX_PER_PT * g.height}px`;