Multi-text blocks, batch screenshot export, animation resolution picker, project persistence

- Multiple text objects with per-block settings (font, position, size, shadow, arc, etc.)
- Max width / word wrapping support for text blocks
- Text block list with add/remove/duplicate in sidebar
- Animation resolution selector (1080p / 4K) for video export
- Screenshots persist in .monkr project files as data URLs
- Background images persist in project save/load
- Background type falls back gracefully on refresh (image → gradient)
- Multi-screenshot drop: drop multiple images on a device for batch export
- "Export All Variations" button renders each screenshot variant separately
- App Store presets: added Mac, Apple TV, Apple Watch sizes
- Bumped scene preset device scales for better visual fill
- Scene presets now include text blocks (App Store scenes have placeholder titles)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: blaineam

src/lib/animation.ts

@@ -203,18 +203,23 @@ export function createDefaultAnimationConfig(): AnimationConfig {
 
 // ─── Frame Capture ────────────────────────────────────────────
 
-/** Max export dimensions — cap at 1080p for animation (keeps it fast) */
-const MAX_ANIM_WIDTH = 1920;
-const MAX_ANIM_HEIGHT = 1080;
 const MAX_EXPORT_FPS = 60;
 
+export type AnimResolution = '1080p' | '4k';
+
+const RESOLUTION_CAPS: Record<AnimResolution, { w: number; h: number }> = {
+	'1080p': { w: 1920, h: 1080 },
+	'4k': { w: 3840, h: 2160 }
+};
+
 /** Compute a pixel ratio that keeps the output within bounds */
-function computeExportPixelRatio(element: HTMLElement): number {
+function computeExportPixelRatio(element: HTMLElement, resolution: AnimResolution = '1080p'): number {
 	const w = element.offsetWidth;
 	const h = element.offsetHeight;
 	if (w <= 0 || h <= 0) return 1;
-	const scaleW = MAX_ANIM_WIDTH / w;
-	const scaleH = MAX_ANIM_HEIGHT / h;
+	const cap = RESOLUTION_CAPS[resolution];
+	const scaleW = cap.w / w;
+	const scaleH = cap.h / h;
 	return Math.min(1, scaleW, scaleH);
 }
 
@@ -237,12 +242,13 @@ export async function captureFrames(
 	fps: number,
 	onFrame: (time: number) => void,
 	onProgress?: (pct: number) => void,
-	_tracks?: AnimationTrack[] // reserved for future use
+	_tracks?: AnimationTrack[], // reserved for future use
+	resolution: AnimResolution = '1080p'
 ): Promise<Blob[]> {
 	const clampedFps = Math.min(fps, MAX_EXPORT_FPS);
 	const totalFrames = Math.ceil((duration / 1000) * clampedFps);
 	const frameInterval = duration / totalFrames;
-	const pixelRatio = computeExportPixelRatio(element);
+	const pixelRatio = computeExportPixelRatio(element, resolution);
 	const frames: Blob[] = [];
 
 	for (let i = 0; i < totalFrames; i++) {

src/lib/components/Canvas.svelte

@@ -209,8 +209,48 @@
 				/>
 			{/if}
 
-			<!-- Text overlay above -->
-			{#if store.textOverlay.enabled && store.textOverlay.text && store.textOverlay.position === 'above'}
+			<!-- Text blocks (above position) -->
+			{#each store.textBlocks.filter(t => t.text && t.position === 'above') as tb (tb.id)}
+				{@const isSelText = store.selectedTextId === tb.id}
+				<div
+					class="absolute left-0 right-0 text-center"
+					style="top: {store.padding * 0.4}px;
+						font-size: {tb.fontSize}px;
+						font-weight: {tb.fontWeight};
+						font-family: '{tb.fontFamily}', sans-serif;
+						color: {tb.color};
+						text-align: {tb.textAlign};
+						letter-spacing: {tb.letterSpacing}px;
+						line-height: {tb.lineHeight};
+						padding: 0 {store.padding}px;
+						overflow: visible;
+						{tb.maxWidth > 0 ? `max-width: ${tb.maxWidth}%; margin: 0 auto; word-wrap: break-word; overflow-wrap: break-word; white-space: normal;` : ''}
+						transform: perspective(1200px) rotateX({tb.tiltX}deg) rotateY({tb.tiltY}deg) rotate({tb.rotation}deg);
+						{tb.shadow.enabled ? `text-shadow: ${tb.shadow.offsetX}px ${tb.shadow.offsetY}px ${tb.shadow.blur}px ${tb.shadow.color};` : ''}
+						{isSelText ? 'outline: 2px dashed rgba(236,72,153,0.4); outline-offset: 4px;' : ''}"
+					onclick={() => store.selectTextBlock(tb.id)}
+				>
+					{#if tb.arcDegrees !== 0}
+						{@const estW = Math.max(500, tb.fontSize * tb.text.length * 0.7)}
+						{@const estH = Math.max(300, tb.fontSize * 4)}
+						{@const pathD = makeTextPath(tb.pathType, tb.arcDegrees, estW * 0.85)}
+						<svg viewBox="-{estW / 2} -{estH / 2} {estW} {estH}" style="width: 100%; height: {estH}px; overflow: visible; display: block;">
+							<defs>
+								<path id="text-arc-{tb.id}" d={pathD} />
+							</defs>
+							<text fill={tb.color} font-size={tb.fontSize} font-weight={tb.fontWeight} font-family="'{tb.fontFamily}', sans-serif" letter-spacing={tb.letterSpacing} text-anchor="middle"
+								style={tb.shadow.enabled ? `filter: drop-shadow(${tb.shadow.offsetX}px ${tb.shadow.offsetY}px ${tb.shadow.blur}px ${tb.shadow.color})` : ''}>
+								<textPath href="#text-arc-{tb.id}" startOffset="50%">{tb.text}</textPath>
+							</text>
+						</svg>
+					{:else}
+						{tb.text}
+					{/if}
+				</div>
+			{/each}
+
+			<!-- Legacy single text overlay above (backward compat) -->
+			{#if store.textOverlay.enabled && store.textOverlay.text && store.textOverlay.position === 'above' && store.textBlocks.length === 0}
 				{@const to = store.textOverlay}
 				<div
 					class="absolute left-0 right-0 text-center"
@@ -284,8 +324,70 @@
 				{/if}
 			{/each}
 
-			<!-- Text overlay below -->
-			{#if store.textOverlay.enabled && store.textOverlay.text && store.textOverlay.position === 'below'}
+			<!-- Text blocks (below position) -->
+			{#each store.textBlocks.filter(t => t.text && t.position === 'below') as tb (tb.id)}
+				{@const isSelText = store.selectedTextId === tb.id}
+				<div
+					class="absolute bottom-0 left-0 right-0 text-center"
+					style="bottom: {store.padding * 0.4}px;
+						font-size: {tb.fontSize}px;
+						font-weight: {tb.fontWeight};
+						font-family: '{tb.fontFamily}', sans-serif;
+						color: {tb.color};
+						text-align: {tb.textAlign};
+						letter-spacing: {tb.letterSpacing}px;
+						line-height: {tb.lineHeight};
+						padding: 0 {store.padding}px;
+						{tb.maxWidth > 0 ? `max-width: ${tb.maxWidth}%; margin: 0 auto; word-wrap: break-word; overflow-wrap: break-word; white-space: normal;` : ''}
+						transform: perspective(1200px) rotateX({tb.tiltX}deg) rotateY({tb.tiltY}deg) rotate({tb.rotation}deg);
+						{tb.shadow.enabled ? `text-shadow: ${tb.shadow.offsetX}px ${tb.shadow.offsetY}px ${tb.shadow.blur}px ${tb.shadow.color};` : ''}
+						{isSelText ? 'outline: 2px dashed rgba(236,72,153,0.4); outline-offset: 4px;' : ''}"
+					onclick={() => store.selectTextBlock(tb.id)}
+				>
+					{tb.text}
+				</div>
+			{/each}
+
+			<!-- Text blocks (custom position) -->
+			{#each store.textBlocks.filter(t => t.text && t.position === 'custom') as tb (tb.id)}
+				{@const isSelText = store.selectedTextId === tb.id}
+				<div
+					class="absolute"
+					style="left: {tb.x}%; top: {tb.y}%;
+						transform: translate(-50%, -50%) perspective(1200px) rotateX({tb.tiltX}deg) rotateY({tb.tiltY}deg) rotate({tb.rotation}deg);
+						font-size: {tb.fontSize}px;
+						font-weight: {tb.fontWeight};
+						font-family: '{tb.fontFamily}', sans-serif;
+						color: {tb.color};
+						text-align: {tb.textAlign};
+						letter-spacing: {tb.letterSpacing}px;
+						line-height: {tb.lineHeight};
+						{tb.maxWidth > 0 ? `max-width: ${tb.maxWidth}%; word-wrap: break-word; overflow-wrap: break-word; white-space: normal;` : 'white-space: nowrap;'}
+						{tb.shadow.enabled ? `text-shadow: ${tb.shadow.offsetX}px ${tb.shadow.offsetY}px ${tb.shadow.blur}px ${tb.shadow.color};` : ''}
+						{isSelText ? 'outline: 2px dashed rgba(236,72,153,0.4); outline-offset: 4px;' : ''}"
+					onclick={() => store.selectTextBlock(tb.id)}
+				>
+					{#if tb.arcDegrees !== 0}
+						{@const svgW = Math.max(400, tb.fontSize * tb.text.length * 0.7)}
+						{@const svgH = Math.max(250, tb.fontSize * 4)}
+						{@const pathD = makeTextPath(tb.pathType, tb.arcDegrees, svgW * 0.85)}
+						<svg style="overflow: visible; width: {svgW}px; height: {svgH}px; display: block;" viewBox="-{svgW / 2} -{svgH / 2} {svgW} {svgH}">
+							<defs>
+								<path id="text-path-{tb.id}" d={pathD} />
+							</defs>
+							<text fill={tb.color} font-size={tb.fontSize} font-weight={tb.fontWeight} font-family="'{tb.fontFamily}', sans-serif" letter-spacing={tb.letterSpacing} text-anchor="middle"
+								style={tb.shadow.enabled ? `filter: drop-shadow(${tb.shadow.offsetX}px ${tb.shadow.offsetY}px ${tb.shadow.blur}px ${tb.shadow.color})` : ''}>
+								<textPath href="#text-path-{tb.id}" startOffset="50%">{tb.text}</textPath>
+							</text>
+						</svg>
+					{:else}
+						{tb.text}
+					{/if}
+				</div>
+			{/each}
+
+			<!-- Legacy single text overlay below (backward compat) -->
+			{#if store.textOverlay.enabled && store.textOverlay.text && store.textOverlay.position === 'below' && store.textBlocks.length === 0}
 				{@const to = store.textOverlay}
 				<div
 					class="absolute bottom-0 left-0 right-0 text-center"
@@ -305,8 +407,8 @@
 				</div>
 			{/if}
 
-			<!-- Text overlay custom position -->
-			{#if store.textOverlay.enabled && store.textOverlay.text && store.textOverlay.position === 'custom'}
+			<!-- Legacy single text overlay custom (backward compat) -->
+			{#if store.textOverlay.enabled && store.textOverlay.text && store.textOverlay.position === 'custom' && store.textBlocks.length === 0}
 				{@const to = store.textOverlay}
 				<div
 					class="absolute whitespace-nowrap"

src/lib/components/DropZone.svelte

@@ -5,12 +5,14 @@
 		screenshotUrl = null,
 		index = 0,
 		onupload,
-		onremove
+		onremove,
+		onuploadmultiple
 	}: {
 		screenshotUrl: string | null;
 		index?: number;
 		onupload: (file: File) => void;
 		onremove: () => void;
+		onuploadmultiple?: (files: File[]) => void;
 	} = $props();
 
 	let dragging = $state(false);
@@ -19,9 +21,11 @@
 	function handleDrop(e: DragEvent) {
 		e.preventDefault();
 		dragging = false;
-		const file = e.dataTransfer?.files[0];
-		if (file && file.type.startsWith('image/')) {
-			onupload(file);
+		const files = Array.from(e.dataTransfer?.files ?? []).filter((f) => f.type.startsWith('image/'));
+		if (files.length > 1 && onuploadmultiple) {
+			onuploadmultiple(files);
+		} else if (files.length === 1) {
+			onupload(files[0]);
 		}
 	}
 
@@ -36,9 +40,11 @@
 
 	function handleFileSelect(e: Event) {
 		const input = e.target as HTMLInputElement;
-		const file = input.files?.[0];
-		if (file && file.type.startsWith('image/')) {
-			onupload(file);
+		const files = Array.from(input.files ?? []).filter((f) => f.type.startsWith('image/'));
+		if (files.length > 1 && onuploadmultiple) {
+			onuploadmultiple(files);
+		} else if (files.length === 1) {
+			onupload(files[0]);
 		}
 		input.value = '';
 	}
@@ -74,7 +80,7 @@
 		>
 			{#if dragging}
 				<Image size={20} class="text-pink-400" />
-				<span class="text-xs text-pink-400">Drop image</span>
+				<span class="text-xs text-pink-400">Drop image(s)</span>
 			{:else}
 				<Upload size={20} class="text-zinc-500" />
 				<span class="text-xs text-zinc-500">Drop or click</span>
@@ -85,6 +91,7 @@
 		bind:this={fileInput}
 		type="file"
 		accept="image/*"
+		multiple
 		class="hidden"
 		onchange={handleFileSelect}
 	/>

src/lib/components/ExportButton.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Download, Copy, Check } from 'lucide-svelte';
+	import { Download, Copy, Check, Layers } from 'lucide-svelte';
 	import { store } from '../stores/state.svelte';
 	import { exportCanvas, exportCanvasSections, copyToClipboard } from '../export';
 
@@ -11,6 +11,13 @@
 
 	let exporting = $state(false);
 	let copied = $state(false);
+	let batchExporting = $state(false);
+	let batchProgress = $state('');
+
+	/** Check if any device has extra screenshots for batch export */
+	let hasBatchScreenshots = $derived(
+		store.sceneObjects.some((o) => o.extraScreenshots.length > 0)
+	);
 
 	async function handleExport() {
 		if (!canvasRef || exporting) return;
@@ -45,26 +52,100 @@
 			console.error('Copy failed:', err);
 		}
 	}
+
+	/**
+	 * Export all variations: for each device with extra screenshots,
+	 * cycle through all screenshots (primary + extras) and export each render.
+	 */
+	async function handleBatchExport() {
+		if (!canvasRef || batchExporting) return;
+		batchExporting = true;
+
+		try {
+			// Collect all objects that have extra screenshots
+			const batchObjects = store.sceneObjects.filter((o) => o.extraScreenshots.length > 0);
+			if (batchObjects.length === 0) return;
+
+			// For simplicity, batch over the first object with extras
+			// (multi-device batch is more complex, handle single device first)
+			const obj = batchObjects[0];
+			const allScreenshots = [
+				{ url: obj.screenshotUrl, file: obj.screenshotFile },
+				...obj.extraScreenshots
+			].filter((s) => s.url);
+
+			for (let i = 0; i < allScreenshots.length; i++) {
+				batchProgress = `Exporting ${i + 1} of ${allScreenshots.length}...`;
+
+				// Swap screenshot on the device
+				store.updateObject(obj.id, {
+					screenshotUrl: allScreenshots[i].url,
+					screenshotFile: allScreenshots[i].file
+				});
+
+				// Wait for DOM update
+				await new Promise<void>((r) => setTimeout(r, 100));
+
+				// Export
+				if (store.appStoreEnabled) {
+					await exportCanvasSections(
+						canvasRef,
+						store.appStore.numSections,
+						store.appStore.sectionWidth,
+						store.appStore.sectionHeight,
+						store.exportConfig.format,
+						store.exportConfig.scale,
+						`variation-${i + 1}`
+					);
+				} else {
+					await exportCanvas(canvasRef, store.exportConfig.format, store.exportConfig.scale, `variation-${i + 1}`);
+				}
+			}
+
+			// Restore original primary screenshot
+			store.updateObject(obj.id, {
+				screenshotUrl: allScreenshots[0].url,
+				screenshotFile: allScreenshots[0].file
+			});
+		} catch (err) {
+			console.error('Batch export failed:', err);
+		} finally {
+			batchExporting = false;
+			batchProgress = '';
+		}
+	}
 </script>
 
-<div class="flex gap-2">
-	<button
-		onclick={handleExport}
-		disabled={exporting}
-		class="flex flex-1 items-center justify-center gap-2 rounded-lg bg-pink-600 px-3 py-2.5 text-xs font-semibold text-white transition-colors hover:bg-pink-500 disabled:opacity-50"
-	>
-		<Download size={14} />
-		{exporting ? 'Saving...' : store.appStoreEnabled ? `Download ${store.appStore.numSections} Slides` : 'Download'}
-	</button>
-	<button
-		onclick={handleCopy}
-		class="flex items-center justify-center rounded-lg bg-zinc-800 px-3 py-2.5 text-zinc-400 transition-colors hover:bg-zinc-700 hover:text-white"
-		title="Copy to clipboard"
-	>
-		{#if copied}
-			<Check size={14} class="text-green-400" />
-		{:else}
-			<Copy size={14} />
-		{/if}
-	</button>
+<div class="space-y-2">
+	<div class="flex gap-2">
+		<button
+			onclick={handleExport}
+			disabled={exporting || batchExporting}
+			class="flex flex-1 items-center justify-center gap-2 rounded-lg bg-pink-600 px-3 py-2.5 text-xs font-semibold text-white transition-colors hover:bg-pink-500 disabled:opacity-50"
+		>
+			<Download size={14} />
+			{exporting ? 'Saving...' : store.appStoreEnabled ? `Download ${store.appStore.numSections} Slides` : 'Download'}
+		</button>
+		<button
+			onclick={handleCopy}
+			class="flex items-center justify-center rounded-lg bg-zinc-800 px-3 py-2.5 text-zinc-400 transition-colors hover:bg-zinc-700 hover:text-white"
+			title="Copy to clipboard"
+		>
+			{#if copied}
+				<Check size={14} class="text-green-400" />
+			{:else}
+				<Copy size={14} />
+			{/if}
+		</button>
+	</div>
+	{#if hasBatchScreenshots}
+		<button
+			onclick={handleBatchExport}
+			disabled={batchExporting || exporting}
+			class="flex w-full items-center justify-center gap-2 rounded-lg bg-violet-600/80 px-3 py-2 text-[11px] font-medium text-white transition-colors hover:bg-violet-500 disabled:opacity-50"
+		>
+			<Layers size={13} />
+			{batchExporting ? batchProgress : 'Export All Variations'}
+		</button>
+	{/if}
 </div>