From 29dcdeea61a0694c50c3b5ffc12b7bbef788dac7 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Wed, 27 May 2026 10:17:12 -0400
Subject: [PATCH] Canvas crop marks for Custom Art + Slide modes (toggleable)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Crop marks were a cover-only feature; Custom Art / Slide canvases
exported with no corner registration marks at all. Add a corner
crop-mark set for canvas modes with the existing showCrops /
printCrops toggles wired up.

Changes:

- New <div class="cropMarks canvasCrops"> sits inside .sheet
  alongside the existing cover cropMarks. Eight corner marks,
  positioned outside the canvas edges via new .cc-* classes that
  are scoped under .canvasCrops so they don't collide with the
  bleed-anchored cover .cm-* positions.
- CSS shows .canvasCrops only in body.template-customart and
  body.template-slide. It reuses the existing `--crop-display` /
  body.print-crops gating, so state.showCrops drives on-screen
  visibility and state.printCrops drives print visibility — the
  same toggles the cover mode has used all along.
- Move showCrops and printCrops <label>s from `cover-toggle` to a
  new `crops-toggle` class. Cover-toggle still hides showGuides /
  showBleed / printGuides in non-cover modes (those are bleed/safe
  concepts that don't apply to canvas modes); crops-toggle shows
  in cover / customart / slide, hidden only in disc + jewel sheets.

JPEG export was already unaffected — the direct canvas rasterizer
doesn't touch the DOM, so canvasCrops never appears there. The PDF
Print route does render the DOM, where printCrops now controls
inclusion.

Verified via CDP: in customart mode, both toggle labels render,
.canvasCrops is visible by default with a valid corner-span
bounding box, and `state.showCrops = false; render()` hides it.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 src/index.html | 34 +++++++++++++++++++++++++++++++---
 1 file changed, 31 insertions(+), 3 deletions(-)

diff --git a/src/index.html b/src/index.html
index 7a0acd8..013d058 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1270,13 +1270,19 @@
       display: none !important;
     }
 
-    /* Export toggles: fold/safe/trim/bleed/crops only apply to case covers */
+    /* Export toggles: fold/safe/trim/bleed guides only apply to case
+       covers. Crop-mark toggles apply more broadly — cover + Custom Art
+       + Slide all render crop marks, only Disc / Jewel sheets don't. */
     body.template-disc .cover-toggle,
     body.template-jewel .cover-toggle,
     body.template-customart .cover-toggle,
     body.template-slide .cover-toggle {
       display: none !important;
     }
+    body.template-disc .crops-toggle,
+    body.template-jewel .crops-toggle {
+      display: none !important;
+    }
 
     /* Custom Art / Slide mode: hide all the slot/region UI and decorations,
        show only the canvas + layers (the Canvas panel serves both). */
@@ -1908,6 +1914,22 @@
     .cm-br-h { left: calc(var(--bleed) + (var(--panel-w) * 2) + var(--spine-w) + .06in); top: calc(var(--bleed) + var(--trim-h)); }
     .cm-br-v { left: calc(var(--bleed) + (var(--panel-w) * 2) + var(--spine-w)); top: calc(var(--bleed) + var(--trim-h) + .06in); }
 
+    /* Canvas-mode crop marks (Custom Art / Slide). The .sheet has no bleed
+       in canvas modes, so the corner marks sit just outside the canvas
+       edges. .cc- positions only kick in inside .canvasCrops to avoid
+       conflicting with the cover .cm- positions. */
+    .canvasCrops { display: none; }
+    body.template-customart .canvasCrops,
+    body.template-slide .canvasCrops { display: var(--crop-display, block); }
+    .canvasCrops .cc-tl-h { left: -.24in; top: 0; }
+    .canvasCrops .cc-tl-v { left: 0; top: -.24in; }
+    .canvasCrops .cc-tr-h { right: -.24in; top: 0; }
+    .canvasCrops .cc-tr-v { right: 0; top: -.24in; }
+    .canvasCrops .cc-bl-h { left: -.24in; bottom: 0; }
+    .canvasCrops .cc-bl-v { left: 0; bottom: -.24in; }
+    .canvasCrops .cc-br-h { right: -.24in; bottom: 0; }
+    .canvasCrops .cc-br-v { right: 0; bottom: -.24in; }
+
     body.hide-guides .sheet { --guide-display: none; --safe-display: none; --label-display: none; }
     body.hide-bleed .sheet { --bleed-display: none; }
     body.hide-crops .sheet { --crop-display: none; }
@@ -2797,9 +2819,9 @@
         <div class="toggles">
           <label class="toggle cover-toggle"><input id="showGuides" type="checkbox" checked /> Show fold/safe/trim guides on screen</label>
           <label class="toggle cover-toggle"><input id="showBleed" type="checkbox" checked /> Show bleed shading on screen</label>
-          <label class="toggle cover-toggle"><input id="showCrops" type="checkbox" checked /> Show crop marks on screen</label>
+          <label class="toggle crops-toggle"><input id="showCrops" type="checkbox" checked /> Show crop marks on screen</label>
           <label class="toggle cover-toggle"><input id="printGuides" type="checkbox" /> Include guides in PDF</label>
-          <label class="toggle cover-toggle"><input id="printCrops" type="checkbox" checked /> Include crop marks in PDF</label>
+          <label class="toggle crops-toggle"><input id="printCrops" type="checkbox" checked /> Include crop marks in PDF</label>
                   </div>
         <p class="hint">PDF export opens your browser print dialog. Choose <b>Save as PDF</b>, use <b>100% scale</b>, and disable headers/footers.</p>
       </fieldset>
@@ -3534,6 +3556,12 @@
               <span class="cm-h cm-bl-h"></span><span class="cm-v cm-bl-v"></span>
               <span class="cm-h cm-br-h"></span><span class="cm-v cm-br-v"></span>
             </div>
+            <div class="cropMarks canvasCrops" aria-hidden="true">
+              <span class="cm-h cc-tl-h"></span><span class="cm-v cc-tl-v"></span>
+              <span class="cm-h cc-tr-h"></span><span class="cm-v cc-tr-v"></span>
+              <span class="cm-h cc-bl-h"></span><span class="cm-v cc-bl-v"></span>
+              <span class="cm-h cc-br-h"></span><span class="cm-v cc-br-v"></span>
+            </div>
             <div class="diskLayer" id="diskLayer" aria-hidden="true">
               <div class="discSlot" data-label="DISC 1" id="disc-top">
                 <div class="placeholder">Assign a disc design</div>