From e40db0640777222a76f21fec554fe312f75294ae Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeff@jeffemmett.com>
Date: Sat, 28 Feb 2026 06:55:16 +0000
Subject: [PATCH] fix: show mockup section from start in rSwag demo

Step 2 (design mockup + "Use Sample Design" button) was gated behind
demoStep >= 2, but the only way to reach step 2 was clicking a button
inside the hidden section. Now mockup is always visible alongside
product selection.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 modules/swag/components/folk-swag-designer.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/modules/swag/components/folk-swag-designer.ts b/modules/swag/components/folk-swag-designer.ts
index 03535b8..00b058f 100644
--- a/modules/swag/components/folk-swag-designer.ts
+++ b/modules/swag/components/folk-swag-designer.ts
@@ -389,8 +389,8 @@ class FolkSwagDesigner extends HTMLElement {
 			</div>` : ""}
 		</section>
 
-		<!-- Step 2: Design Mockup -->
-		<section class="step-section ${this.demoStep >= 2 ? 'visible' : ''}">
+		<!-- Step 2: Design Mockup (always visible alongside product selection) -->
+		<section class="step-section visible">
 			<div class="mockup-area">
 				<div class="mockup-svg">${this.getMockupSvg()}</div>
 				<div class="mockup-info">
@@ -401,8 +401,8 @@ class FolkSwagDesigner extends HTMLElement {
 			</div>
 		</section>
 
-		<!-- Generate button (between step 2 and 3) -->
-		${this.demoStep === 2 && this.usedSampleDesign ? `
+		<!-- Generate button (visible once sample design is loaded) -->
+		${this.usedSampleDesign && this.demoStep < 3 ? `
 		<div class="generate-row">
 			<button class="btn btn-primary generate-btn">Generate Print-Ready Files</button>
 		</div>` : ""}