gutterpress 0.11.19 → 0.11.20-alpha.2

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

@@ -62,7 +62,6 @@
   --gp-sheet-bg: #fff;
   --gp-stage-bg: #4a4a52;
   --gp-guide: #e5484d;
-  --gp-safe: #30a46c;
   background: var(--gp-stage-bg);
   margin: 0;
   padding: 32px;
@@ -275,110 +274,8 @@
 .gp-marginbox[data-align="center"] > .gp-marginbox-content { justify-content: center; }
 .gp-marginbox[data-align="end"] > .gp-marginbox-content { justify-content: flex-end; }
 
-/* margin & bleed overlay (overlay.ts) -------------------------------- */
-/* THE LOOK LIVES HERE, in these tokens, and nowhere else: colours, line
-   width, line style, tint strength. The desktop app's settings change the
-   colour (an inline \`--gp-ov-color\` on <body>) and pick a strength preset
-   (\`data-overlay-strength\`); nothing in a book's CSS is involved or needed. */
-.gp-stage {
-  --gp-ov-color: #2f80ed;       /* margin box line + the tint over the margins */
-  --gp-ov-width: 2px;           /* line width as seen on screen, at any zoom */
-  --gp-ov-style: dashed;        /* margin box line style */
-  --gp-ov-tint: 0.1;            /* opacity of the tint over the margin area */
-  --gp-ov-bleed-color: #e5484d; /* bleed band + 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-flag-width: 2px;      /* overflow flag outline */
-  --gp-ov-warn: #f59e0b;        /* reaches into the margin */
-  --gp-ov-error: #e5484d;       /* crosses the trim / leaves the page */
-  --gp-ov-intent: #8b5cf6;      /* placed on purpose */
-}
-.gp-stage[data-overlay-strength="subtle"] {
-  --gp-ov-width: 1px;
-  --gp-ov-tint: 0.05;
-  --gp-ov-bleed-alpha: 0.3;
-}
-.gp-stage[data-overlay-strength="strong"] {
-  --gp-ov-width: 3px;
-  --gp-ov-tint: 0.2;
-  --gp-ov-bleed-alpha: 0.65;
-  --gp-ov-flag-width: 3px;
-}
-
-/* One sibling layer per run, ABOVE the strip so the lines stay visible over
-   author backgrounds and art. Absolutely positioned and pointer-transparent:
-   it takes no flow space and no hits, so it cannot move a page break. Exists
-   only while the overlay is on. */
-.gp-ov {
-  position: absolute;
-  inset: 0;
-  z-index: 5;
-  pointer-events: none;
-  /* The stage is a paint transform, so a 2px line would shrink with the zoom
-     and vanish at fit-to-width. Lines are sized in layout px divided by the
-     zoom, which makes them the same width on screen at every zoom. */
-  --gp-ov-w: calc(var(--gp-ov-width) / var(--gp-zoom, 1));
-  --gp-ov-flag-w: calc(var(--gp-ov-flag-width) / var(--gp-zoom, 1));
-}
-
-.gp-ov-page {
-  position: absolute;
-}
-
-/* the margins as a region: the trim minus the content box (clip-path, set in
-   overlay.ts), so a margin reads as an area, not a hairline */
-.gp-ov-tint {
-  position: absolute;
-  inset: 0;
-  background: color-mix(in srgb, var(--gp-ov-color) calc(var(--gp-ov-tint) * 100%), transparent);
-}
-
-/* margin box: the content area's outline */
-.gp-ov-margin {
-  position: absolute;
-  box-sizing: border-box;
-  border: var(--gp-ov-w) var(--gp-ov-style) var(--gp-ov-color);
-}
-
-/* bleed: a translucent band OUTSIDE the trim (its width is the border) */
-.gp-ov-bleed {
-  position: absolute;
-  box-sizing: border-box;
-  border-style: solid;
-  border-color: color-mix(in srgb, var(--gp-ov-bleed-color) calc(var(--gp-ov-bleed-alpha) * 100%), transparent);
-}
-
-/* trim: where the sheet will be cut, drawn only when there is bleed — solid,
-   just inside the edge so it never paints over the band (overlay.ts sizes and
-   places it: the whole sheet, or the sheet less an in-sheet bleed) */
-.gp-ov-trim {
-  position: absolute;
-  outline: var(--gp-ov-w) solid var(--gp-ov-trim-color);
-  outline-offset: calc(-1 * var(--gp-ov-w));
-}
-
-/* overflow flags — outline + faint tint, never a box change */
-.gp-ov-flag {
-  position: absolute;
-  box-sizing: border-box;
-}
-.gp-ov-flag[data-kind="margin"] {
-  outline: var(--gp-ov-flag-w) solid var(--gp-ov-warn);
-  background: color-mix(in srgb, var(--gp-ov-warn) 16%, transparent);
-}
-.gp-ov-flag[data-kind="bleed"],
-.gp-ov-flag[data-kind="off-page"] {
-  outline: var(--gp-ov-flag-w) solid var(--gp-ov-error);
-  background: color-mix(in srgb, var(--gp-ov-error) 18%, transparent);
-}
-/* placed on purpose (.gp-bleed, .gp-pin, …): present, not a problem */
-.gp-ov-flag[data-kind="intended"] {
-  outline: var(--gp-ov-flag-w) dotted var(--gp-ov-intent);
-}
-
 /* designer mode ------------------------------------------------------- */
 .gp-guide-trim,
-.gp-guide-safe,
 .gp-crop-mark {
   position: absolute;
   pointer-events: none;
@@ -386,13 +283,11 @@
 }
 
 .gp-stage[data-designer="on"] .gp-guide-trim,
-.gp-stage[data-designer="on"] .gp-guide-safe,
 .gp-stage[data-designer="on"] .gp-crop-mark {
   display: block;
 }
 
 .gp-guide-trim { outline: 1px dashed var(--gp-guide); }
-.gp-guide-safe { outline: 1px dashed var(--gp-safe); }
 .gp-crop-mark { background: var(--gp-guide); }
 
 .gp-warning {
@@ -419,10 +314,8 @@
     transform: none;
   }
   .gp-layer,
-  .gp-ov,
   .gp-warning,
   .gp-guide-trim,
-  .gp-guide-safe,
   .gp-crop-mark {
     display: none !important;
   }
@@ -2202,96 +2095,325 @@
     return /right/.test(name) ? "end" : "start";
   }
 
-  // src/engine/compiler/tier2.ts
-  var DEFAULT_SLUG_PT = 18;
-  function pageGeometry(model, opts) {
-    const base = resolvePage(model);
-    const trim = { width: base.geometry.width, height: base.geometry.height };
-    const bleed = opts.bleedPt ?? base.geometry.bleed;
-    const wantsMarks = base.geometry.marks.length > 0 || opts.marks === true;
-    const slug = wantsMarks ? opts.slugPt ?? DEFAULT_SLUG_PT : 0;
-    return {
-      trim,
-      bleed,
-      slug,
-      marks: base.geometry.marks.length ? base.geometry.marks : wantsMarks ? ["crop"] : [],
-      media: {
-        width: trim.width + 2 * (bleed + slug),
-        height: trim.height + 2 * (bleed + slug)
-      }
-    };
-  }
-
   // src/engine/viewer/overlay.ts
-  function documentBleedPt(model) {
-    return pageGeometry(model, { model }).bleed;
-  }
-  function pageBoxes(g, margin, bleed, scale = 1) {
-    const w = g.width * scale;
-    const h = g.height * scale;
-    const b = Math.max(0, bleed) * scale;
+  function pageBoxes(area, side, scale = 1) {
+    const w = area.width * scale;
+    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 {
-      host: { x: 0, y: 0, w, h },
-      trim: { x: 0, y: 0, w, h },
-      content: {
-        x: margin.left * scale,
-        y: margin.top * scale,
-        w: w - (margin.left + margin.right) * scale,
-        h: h - (margin.top + margin.bottom) * scale
+      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)
       },
-      bleedBox: { x: -b, y: -b, w: w + 2 * b, h: h + 2 * b },
-      bleed: b
-    };
-  }
-  function insetPageBoxes(g, margin, bleed, side, scale = 1) {
-    const sheet = pageBoxes(g, margin, 0, scale);
-    const b = Math.max(0, bleed) * scale;
-    return {
-      host: sheet.host,
-      trim: { x: side === "verso" ? b : 0, y: b, w: sheet.host.w - b, h: sheet.host.h - 2 * b },
-      content: sheet.content,
-      bleedBox: sheet.host,
       bleed: b
     };
   }
-  var SEVERITY = { inside: 0, margin: 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.content, tol))
-      return "inside";
-    if (within(r, boxes.trim, tol))
-      return "margin";
-    if (boxes.bleed > 0 && within(r, boxes.bleedBox, tol))
-      return "bleed";
-    return "off-page";
-  }
-  function worstKind(kinds) {
-    return kinds.reduce((worst, k) => SEVERITY[k] > SEVERITY[worst] ? k : worst, "inside");
+  var SEVERITY = { inside: 0, unsafe: 1, bleed: 2, "off-page": 3 };
+  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 };
-  function pageFrameMargin(margin, versoShift, side) {
-    if (side === "recto" || !versoShift)
-      return margin;
-    return { ...margin, left: margin.left - versoShift, right: margin.right + versoShift };
+  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)
+      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 configInsetBleedPt() {
-    const v = parseFloat(document.querySelector('meta[name="gp-inset-bleed"]')?.getAttribute("content") ?? "");
-    return Number.isFinite(v) && v > 0 ? v : 0;
+  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 };
+  }
+  var OVERLAY_CSS = `
+.root {
+  --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;        /* 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: 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 */
+  --gp-ov-intent: #8b5cf6;      /* placed on purpose */
+  /* The overlay is scaled with the stage, so a 2px line would shrink with the
+     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;
+  --gp-ov-bleed-alpha: 0.3;
+}
+.root[data-strength="strong"] {
+  --gp-ov-width: 3px;
+  --gp-ov-tint: 0.2;
+  --gp-ov-bleed-alpha: 0.65;
+  --gp-ov-flag-width: 3px;
+}
+.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 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);
+}
+.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;
+  border-color: color-mix(in srgb, var(--gp-ov-bleed-color) calc(var(--gp-ov-bleed-alpha) * 100%), transparent);
+}
+/* trim: where the sheet will be cut, drawn only when there is bleed */
+.gp-ov-trim {
+  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);
+  background: color-mix(in srgb, var(--gp-ov-warn) 16%, transparent);
+}
+.gp-ov-flag[data-kind="bleed"],
+.gp-ov-flag[data-kind="off-page"] {
+  outline: var(--gp-ov-flag-w) solid var(--gp-ov-error);
+  background: color-mix(in srgb, var(--gp-ov-error) 18%, transparent);
+}
+.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; }
+}
+`;
+  var HOST_STYLE = [
+    "all: initial",
+    "display: block",
+    "position: absolute",
+    "left: 0",
+    "top: 0",
+    "width: 0",
+    "height: 0",
+    "margin: 0",
+    "padding: 0",
+    "border: 0",
+    "overflow: visible",
+    "visibility: visible",
+    "opacity: 1",
+    "filter: none",
+    "clip-path: none",
+    "mask: none",
+    "z-index: 2147483647",
+    "pointer-events: none",
+    "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;
+    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, colors: { ...currentStyle.colors, ...style.colors } };
+    applyStyle();
+  }
+  function stageFrame() {
+    const stage = document.body;
+    const r = stage.getBoundingClientRect();
+    const zoom = stage.offsetWidth > 0 ? r.width / stage.offsetWidth : 1;
+    return { left: r.left, top: r.top, zoom: zoom || 1 };
+  }
+  function syncToStage() {
+    if (!root || !canvas)
+      return;
+    const { left, top, zoom } = stageFrame();
+    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)) {
+      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();
+    observer = null;
+    host?.remove();
+    host = null;
+    root = null;
+    canvas = null;
   }
-  var SKIP = new Set(["SCRIPT", "STYLE", "LINK", "TEMPLATE", "BR", "WBR", "SOURCE", "TRACK", "META"]);
-  var TOL_PX = 1;
   function div(cls, box) {
     const el = document.createElement("div");
     el.className = cls;
@@ -2305,111 +2427,225 @@
     el.style.width = `${r.w}px`;
     el.style.height = `${r.h}px`;
   }
-  function marginTint(b) {
-    const el = div("gp-ov-tint");
+  function unsafeTint(b) {
+    const el = div("gp-ov-tint", b.sheet);
     const t = b.trim;
-    const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
-    const l = clamp(b.content.x, t.x, t.x + t.w);
-    const r = clamp(b.content.x + b.content.w, t.x, t.x + t.w);
-    const top = clamp(b.content.y, t.y, t.y + t.h);
-    const bot = clamp(b.content.y + b.content.h, t.y, t.y + t.h);
-    const x2 = t.x + t.w;
-    const y2 = t.y + t.h;
-    el.style.clipPath = `polygon(evenodd, ${t.x}px ${t.y}px, ${x2}px ${t.y}px, ${x2}px ${y2}px, ${t.x}px ${y2}px, ${t.x}px ${t.y}px, ` + `${l}px ${top}px, ${l}px ${bot}px, ${r}px ${bot}px, ${r}px ${top}px, ${l}px ${top}px)`;
+    const s = b.safe;
+    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 clearOverlay() {
-    for (const layer of Array.from(document.querySelectorAll(".gp-ov")))
-      layer.remove();
+  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"]);
+  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, bleedPt, insetBleedPt = 0) {
-    const inSheet = bleedPt <= 0 && insetBleedPt > 0;
-    clearOverlay();
-    const layers = new Map;
+  function paintOverlay(pages, strips, area, layers) {
+    const layer = ensureRoot();
+    syncToStage();
+    const stage = stageFrame();
     const painted = new Map;
     for (const p of pages) {
-      const run = p.sheet.closest(".gp-run");
-      if (!run)
-        continue;
-      let layer = layers.get(run);
-      if (!layer) {
-        layer = div("gp-ov");
-        run.appendChild(layer);
-        layers.set(run, layer);
-      }
-      const boxes = inSheet ? insetPageBoxes(p.geometry, p.margin, insetBleedPt, p.sheet.dataset.side === "verso" ? "verso" : "recto", PX_PER_PT) : pageBoxes(p.geometry, p.margin, bleedPt, PX_PER_PT);
-      const host = div("gp-ov-page", boxes.host);
-      host.style.left = p.sheet.style.left;
-      host.style.top = p.sheet.style.top;
-      host.dataset.page = String(p.index + 1);
-      if (boxes.bleed > 0) {
-        const bb = boxes.bleedBox;
+      const side = p.sheet.dataset.side === "verso" ? "verso" : "recto";
+      const boxes = pageBoxes(area ?? sheetArea(p.sheet), side, PX_PER_PT);
+      const rect = p.sheet.getBoundingClientRect();
+      const host2 = div("gp-ov-page", {
+        x: (rect.left - stage.left) / stage.zoom,
+        y: (rect.top - stage.top) / stage.zoom,
+        w: boxes.sheet.w,
+        h: boxes.sheet.h
+      });
+      host2.dataset.page = String(p.index + 1);
+      if (layers.bleed && boxes.bleed > 0) {
+        const sh = boxes.sheet;
         const t = boxes.trim;
-        const band = div("gp-ov-bleed", bb);
-        band.style.borderWidth = `${t.y - bb.y}px ${bb.x + bb.w - (t.x + t.w)}px ${bb.y + bb.h - (t.y + t.h)}px ${t.x - bb.x}px`;
-        host.appendChild(band);
-        host.appendChild(div("gp-ov-trim", t));
-      }
-      host.appendChild(marginTint(boxes));
-      host.appendChild(div("gp-ov-margin", boxes.content));
-      layer.appendChild(host);
-      painted.set(p.index, { host, boxes, sheet: p.sheet });
+        const band = div("gp-ov-bleed", sh);
+        band.style.borderWidth = `${t.y - sh.y}px ${sh.x + sh.w - (t.x + t.w)}px ${sh.y + sh.h - (t.y + t.h)}px ${t.x - sh.x}px`;
+        host2.appendChild(band);
+        host2.appendChild(div("gp-ov-trim", t));
+      }
+      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 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;
         }
-        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);
+        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 Array.from(el.children))
+        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);
+      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 inSheet ? { on: true, issues, intended, bleedPt: insetBleedPt, bleedInSheet: true } : { on: true, issues, intended, bleedPt };
+    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
@@ -2441,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, documentBleedPt(model), configInsetBleedPt());
+      overlaySummary = paintOverlay(overlayPages, layout.strips, printAreaFromMeta(), overlayLayers);
       window.dispatchEvent(new CustomEvent("gp:overlay", { detail: overlaySummary }));
     };
     const api = {
@@ -2457,19 +2694,31 @@
       setDesigner(on) {
         document.body.dataset.designer = on ? "on" : "off";
       },
-      setOverlay(on, style) {
+      setOverlay(state, style) {
         if (style) {
-          const { color, strength } = sanitizeOverlayStyle(style);
+          const clean = sanitizeOverlayStyle(style);
+          setOverlayStyle(clean);
+          const { strength, colors } = clean;
           if (strength)
             document.body.dataset.overlayStrength = strength;
-          if (color)
-            document.body.style.setProperty("--gp-ov-color", color);
+          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();
@@ -2613,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;
@@ -2678,13 +2927,7 @@
           drawMarginBoxes(sheet, ctx, layout.totalPages - paddedPages.size);
           drawGuides(sheet, ctx);
           drawCropMarks(sheet, ctx);
-          overlayPages.push({
-            index: bookIndex,
-            sheet,
-            strip,
-            geometry: ctx.geometry,
-            margin: ctx.padded || blankPages.has(bookIndex) ? ctx.geometry.margin : pageFrameMargin(flushMargins(g.margin, strip.flushEdges ?? []), strip.versoShift, side)
-          });
+          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`;
@@ -2773,15 +3016,6 @@
         });
         sheet.appendChild(trim);
       }
-      const safe = document.createElement("div");
-      safe.className = "gp-guide-safe";
-      Object.assign(safe.style, {
-        left: px(g.margin.left),
-        top: px(g.margin.top),
-        width: px(g.width - g.margin.left - g.margin.right),
-        height: px(g.height - g.margin.top - g.margin.bottom)
-      });
-      sheet.appendChild(safe);
     }
     function checkOverflow(strip, out) {
       const h = strip.el.clientHeight;