Resize photos and make thicker borders on text

src/lib/cards/esncard_anniversary.ts

@@ -13,8 +13,8 @@ export const ESNCardAnniversary: Card = {
 		height: 41 // mm
 	},
 	photo: {
-		width: 26, // mm
-		height: 36 // mm
+		width: 27, // mm
+		height: 37 // mm
 	},
 	textFields: {
 		name: { x: 2, y: 4, size: 8 },

src/lib/components/Wizard.svelte

@@ -10,18 +10,6 @@
 	import StepGallery from './wizard/StepGallery.svelte';
 	import StepGenerate from './wizard/StepGenerate.svelte';
 
-	const stepComponents = {
-		splash: Splash,
-		auth: StepAuth,
-		search: StepSheetSearch,
-		mapping: StepColumnMap,
-		validation: StepRowFilter,
-		'card-details': StepCardDetails,
-		'card-select': StepCardSelect,
-		gallery: StepGallery,
-		generate: StepGenerate
-	};
-
 	const stepTitles = {
 		splash: 'Welcome',
 		auth: 'Authenticate',
@@ -35,7 +23,6 @@
 	};
 
 	let currentTitle = $derived(stepTitles[$currentStepName]);
-	let currentComponent = $derived(stepComponents[$currentStepName]);
 	let currentStepIndex = $derived(stepNames.indexOf($currentStepName));
 </script>
 
@@ -65,7 +52,25 @@
 
 		<!-- Step content -->
 		<div class="bg-white rounded-lg shadow-sm">
-			<svelte:component this={currentComponent} />
+			{#if $currentStepName === 'splash'}
+				<Splash />
+			{:else if $currentStepName === 'auth'}
+				<StepAuth />
+			{:else if $currentStepName === 'search'}
+				<StepSheetSearch />
+			{:else if $currentStepName === 'mapping'}
+				<StepColumnMap />
+			{:else if $currentStepName === 'validation'}
+				<StepRowFilter />
+			{:else if $currentStepName === 'card-details'}
+				<StepCardDetails />
+			{:else if $currentStepName === 'card-select'}
+				<StepCardSelect />
+			{:else if $currentStepName === 'gallery'}
+				<StepGallery />
+			{:else if $currentStepName === 'generate'}
+				<StepGenerate />
+			{/if}
 		</div>
 	</div>
 </div>

src/lib/pdfLayout.ts

@@ -76,8 +76,8 @@ export function getAbsolutePhotoDimensionsPt(
 
 // Border configuration
 export const BORDER_CONFIG = {
-	color: { r: 0.8, g: 0.8, b: 0.8 },
-	width: 1 // in points
+	color: { r: 0, g: 0, b: 0 },
+	width: 0.5 // in points
 };
 
 // Text configuration