From 07d21c29c849ab8017e0bbe801c5dca99f724b55 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Wed, 18 Mar 2026 13:05:17 -0400
Subject: [PATCH] feat: add trusted-only debug outlines toggle to badge print
 controls panel

---
 .../ae_comp__badge_print_controls.svelte      | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/src/routes/events/[event_id]/(badges)/badges/[badge_id]/ae_comp__badge_print_controls.svelte b/src/routes/events/[event_id]/(badges)/badges/[badge_id]/ae_comp__badge_print_controls.svelte
index d5999be6..bd363f96 100644
--- a/src/routes/events/[event_id]/(badges)/badges/[badge_id]/ae_comp__badge_print_controls.svelte
+++ b/src/routes/events/[event_id]/(badges)/badges/[badge_id]/ae_comp__badge_print_controls.svelte
@@ -283,6 +283,22 @@
         ?? ''
     );
 
+    // --- Debug Outlines Toggle ---
+    let debug_outlines = $state(false);
+    $effect(() => {
+        if (browser) {
+            if (debug_outlines) {
+                document.documentElement.classList.add('debug_outlines');
+            } else {
+                document.documentElement.classList.remove('debug_outlines');
+            }
+        }
+        return () => {
+            if (browser) document.documentElement.classList.remove('debug_outlines');
+        };
+    });
+
+
     // --- Focus management: focus the input when its accordion opens ---
     // rAF gives the CSS accordion one repaint tick before focus() is called,
     // avoiding jumping to an invisible (height: 0) element.
@@ -863,6 +879,18 @@
             <span class="flex-1 border-t border-gray-200 dark:border-gray-700"></span>
         </div>
 
+        <!-- Debug Outlines Toggle (for print testing) -->
+        <div class="flex items-center gap-2 px-2 py-1.5">
+            <label class="flex items-center gap-2 cursor-pointer select-none">
+                <input
+                    type="checkbox"
+                    class="checkbox"
+                    bind:checked={debug_outlines}
+                />
+                <span class="text-xs">Show debug outlines</span>
+            </label>
+        </div>
+
         <!-- === BADGE TYPE === (only when template defines badge_type_list) -->
         {#if badge_type_code_li.length > 0}
             <div class="field-card rounded-lg overflow-hidden" class:field-card--active={active_field === 'badge_type'}>