From cfa9e85d05a325ff1e71cb7b1afb029cd7211b58 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Thu, 12 Mar 2026 19:23:21 -0400
Subject: [PATCH] feat(badges): add demo background pattern toggle in edit mode
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds a 🎨 button to the badge debug bar (edit-mode only) that cycles
through 5 SVG background patterns keyed by badge type color palette:
stripes, dots, diamonds, grid, swirls.

Swirl tile is 64×64 with corner-to-corner cubic bezier S-curves so
edges align seamlessly when tiled. Off by default; never prints.
---
 .../ae_comp__badge_obj_view_v2.svelte         | 50 +++++++++++++++++++
 1 file changed, 50 insertions(+)

diff --git a/src/routes/events/[event_id]/(badges)/badges/[badge_id]/ae_comp__badge_obj_view_v2.svelte b/src/routes/events/[event_id]/(badges)/badges/[badge_id]/ae_comp__badge_obj_view_v2.svelte
index 9138b0d5..c60a81d8 100644
--- a/src/routes/events/[event_id]/(badges)/badges/[badge_id]/ae_comp__badge_obj_view_v2.svelte
+++ b/src/routes/events/[event_id]/(badges)/badges/[badge_id]/ae_comp__badge_obj_view_v2.svelte
@@ -223,6 +223,45 @@
     let qr_data_url: any = $state('');
     let qr_error_message = $state('');
 
+    // --- Demo background pattern (edit mode only, for preview/demo purposes) ---
+    // 0 = off, 1–4 = pattern variants. Cycles on each button click.
+    let demo_bg_state = $state(0);
+    const DEMO_BG_PATTERNS = 5;
+
+    function cycle_demo_bg() {
+        demo_bg_state = (demo_bg_state + 1) % (DEMO_BG_PATTERNS + 1);
+    }
+
+    let demo_bg_style = $derived.by(() => {
+        if (demo_bg_state === 0) return '';
+        // Colors keyed by badge type code — bg tint + accent
+        const palettes: Record<string, [string, string]> = {
+            member:        ['#dbeafe', '#3b82f6'],
+            staff:         ['#dcfce7', '#16a34a'],
+            guest:         ['#f3e8ff', '#9333ea'],
+            exhibitor:     ['#ffedd5', '#ea580c'],
+            'non-member':  ['#fce7f3', '#db2777'],
+            test:          ['#fef9c3', '#ca8a04'],
+        };
+        const [bg, fg] = palettes[effective_badge_type_code?.toLowerCase() ?? ''] ?? ['#f1f5f9', '#64748b'];
+        // Each entry: [svg string, tile size]. Swirls use a larger tile for smoother repeats.
+        const patterns: [string, string][] = [
+            // 1: diagonal stripes
+            [`<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><rect width='24' height='24' fill='${bg}'/><line x1='0' y1='24' x2='24' y2='0' stroke='${fg}' stroke-width='1.5' stroke-opacity='0.5'/><line x1='-12' y1='24' x2='12' y2='0' stroke='${fg}' stroke-width='1.5' stroke-opacity='0.5'/><line x1='12' y1='24' x2='36' y2='0' stroke='${fg}' stroke-width='1.5' stroke-opacity='0.5'/></svg>`, '24px 24px'],
+            // 2: polka dots
+            [`<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><rect width='24' height='24' fill='${bg}'/><circle cx='12' cy='12' r='5' fill='${fg}' fill-opacity='0.35'/></svg>`, '24px 24px'],
+            // 3: diamonds
+            [`<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><rect width='24' height='24' fill='${bg}'/><polygon points='12,3 21,12 12,21 3,12' fill='none' stroke='${fg}' stroke-width='1.5' stroke-opacity='0.5'/></svg>`, '24px 24px'],
+            // 4: grid
+            [`<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><rect width='24' height='24' fill='${bg}'/><line x1='12' y1='0' x2='12' y2='24' stroke='${fg}' stroke-width='1' stroke-opacity='0.4'/><line x1='0' y1='12' x2='24' y2='12' stroke='${fg}' stroke-width='1' stroke-opacity='0.4'/></svg>`, '24px 24px'],
+            // 5: swirls — two crossing S-curves (yin-yang tiling) + echo curves for depth.
+            //    Paths use corner-to-corner cubic beziers so opposite tile edges match perfectly.
+            [`<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64'><rect width='64' height='64' fill='${bg}'/><path d='M0,0 C0,32 64,32 64,64' fill='none' stroke='${fg}' stroke-width='2.5' stroke-opacity='0.45' stroke-linecap='round'/><path d='M64,0 C64,32 0,32 0,64' fill='none' stroke='${fg}' stroke-width='2.5' stroke-opacity='0.45' stroke-linecap='round'/><path d='M0,16 C16,32 48,32 64,48' fill='none' stroke='${fg}' stroke-width='1.5' stroke-opacity='0.22' stroke-linecap='round'/><path d='M64,16 C48,32 16,32 0,48' fill='none' stroke='${fg}' stroke-width='1.5' stroke-opacity='0.22' stroke-linecap='round'/><circle cx='32' cy='32' r='4' fill='${fg}' fill-opacity='0.18'/></svg>`, '64px 64px'],
+        ];
+        const [svg, size] = patterns[(demo_bg_state - 1) % DEMO_BG_PATTERNS];
+        return `background-image: url("data:image/svg+xml,${encodeURIComponent(svg)}"); background-repeat: repeat; background-size: ${size};`;
+    });
+
     $effect(() => {
         if (browser && $lq__event_badge_obj?.event_badge_id) {
             qr_error_message = '';
@@ -281,6 +320,16 @@
     <span title="Layout code">{$lq__event_badge_template_obj?.layout ?? '(no layout)'}</span>
     <span class="text-gray-300">|</span>
     <span class="text-blue-400" title="V2 — auto-scaling text, display-only render">v2</span>
+    {#if $ae_loc.edit_mode}
+        <span class="text-gray-300">|</span>
+        <button
+            class="px-1.5 py-0.5 rounded border text-xs transition-colors {demo_bg_state > 0 ? 'border-indigo-400 text-indigo-600 bg-indigo-50 dark:bg-indigo-950/40 dark:text-indigo-300 dark:border-indigo-600' : 'border-gray-300 text-gray-400 hover:text-gray-600 dark:border-zinc-600 dark:hover:text-zinc-300'}"
+            onclick={cycle_demo_bg}
+            title="Cycle demo background pattern — edit mode only"
+        >
+            🎨 {demo_bg_state > 0 ? ['stripes','dots','diamonds','grid','swirls'][demo_bg_state - 1] : 'demo bg'}
+        </button>
+    {/if}
 </div>
 
 <section
@@ -312,6 +361,7 @@
         outline-4 outline-red-500/50 hover:outline-red-700/75
         group
         "
+            style={demo_bg_style}
         >
             <span
                 class="