svelte-product-mockup 1.0.2 → 1.0.5

package/dist/InputBatcher.d.ts

@@ -0,0 +1,18 @@
+/**
+ * InputBatcher - Batches rapid input events using requestAnimationFrame
+ * with a trailing timeout to ensure the last event always fires.
+ *
+ * - During rapid input: batches to ~60fps via rAF
+ * - After input stops: trailing timeout ensures final state renders within TRAILING_MS
+ */
+export declare class InputBatcher<T> {
+    private latestInput;
+    private rafPending;
+    private timeoutId;
+    private onFlush;
+    private readonly TRAILING_MS;
+    constructor(onFlush: (input: T) => void);
+    queue(input: T): void;
+    private flush;
+    destroy(): void;
+}

package/dist/InputBatcher.js

@@ -0,0 +1,56 @@
+/**
+ * InputBatcher - Batches rapid input events using requestAnimationFrame
+ * with a trailing timeout to ensure the last event always fires.
+ *
+ * - During rapid input: batches to ~60fps via rAF
+ * - After input stops: trailing timeout ensures final state renders within TRAILING_MS
+ */
+export class InputBatcher {
+    latestInput = null;
+    rafPending = false;
+    timeoutId = null;
+    onFlush;
+    TRAILING_MS = 32;
+    constructor(onFlush) {
+        this.onFlush = onFlush;
+    }
+    queue(input) {
+        this.latestInput = input;
+        // Clear previous trailing timeout
+        if (this.timeoutId !== null) {
+            clearTimeout(this.timeoutId);
+        }
+        // Schedule rAF if not already pending (60fps batching)
+        if (!this.rafPending) {
+            this.rafPending = true;
+            requestAnimationFrame(() => {
+                this.rafPending = false;
+                this.flush();
+            });
+        }
+        // Trailing timeout: ensures last event ALWAYS fires within TRAILING_MS
+        this.timeoutId = setTimeout(() => {
+            this.timeoutId = null;
+            this.flush();
+        }, this.TRAILING_MS);
+    }
+    flush() {
+        if (this.latestInput === null)
+            return;
+        // Clear timeout if we're flushing via rAF
+        if (this.timeoutId !== null) {
+            clearTimeout(this.timeoutId);
+            this.timeoutId = null;
+        }
+        const input = this.latestInput;
+        this.latestInput = null;
+        this.onFlush(input);
+    }
+    destroy() {
+        if (this.timeoutId !== null) {
+            clearTimeout(this.timeoutId);
+            this.timeoutId = null;
+        }
+        this.latestInput = null;
+    }
+}

package/dist/RenderScheduler.d.ts

@@ -0,0 +1,52 @@
+import type { WarpEffect } from './image-transformations/types';
+export interface LayerRenderData {
+    id: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    rotation: number;
+    opacity: number;
+    warp: WarpEffect | null;
+}
+export interface RenderRequest {
+    id: number;
+    canvasWidth: number;
+    canvasHeight: number;
+    layers: LayerRenderData[];
+    images: ImageBitmap[];
+}
+export interface WorkerMessage {
+    type: 'render';
+    payload: RenderRequest;
+}
+export interface WorkerResponse {
+    type: 'complete' | 'error';
+    payload: {
+        id: number;
+        result?: ImageBitmap;
+        frameTime?: number;
+        error?: string;
+    };
+}
+export interface RenderSchedulerOptions {
+    onResult: (bitmap: ImageBitmap, frameTime: number) => void;
+    onError?: (error: string) => void;
+}
+export declare class RenderScheduler {
+    private worker;
+    private batcher;
+    private pendingRequest;
+    private isWorking;
+    private frameId;
+    private lastCompletedId;
+    private options;
+    constructor(options: RenderSchedulerOptions);
+    private initWorker;
+    request(req: Omit<RenderRequest, 'id'>): void;
+    private submitToWorker;
+    private sendToWorker;
+    private handleWorkerMessage;
+    private processNext;
+    destroy(): void;
+}

package/dist/RenderScheduler.js

@@ -0,0 +1,87 @@
+import { InputBatcher } from './InputBatcher';
+import { createRenderWorker } from './renderWorkerInline';
+export class RenderScheduler {
+    worker = null;
+    batcher;
+    pendingRequest = null;
+    isWorking = false;
+    frameId = 0;
+    lastCompletedId = 0;
+    options;
+    constructor(options) {
+        this.options = options;
+        this.batcher = new InputBatcher((req) => this.submitToWorker(req));
+        this.initWorker();
+    }
+    initWorker() {
+        try {
+            this.worker = createRenderWorker();
+            this.worker.onmessage = (e) => {
+                this.handleWorkerMessage(e.data);
+            };
+            this.worker.onerror = (e) => {
+                console.error('Worker error:', e);
+                this.options.onError?.(`Worker error: ${e.message}`);
+            };
+        }
+        catch (e) {
+            console.error('Failed to create worker:', e);
+            this.options.onError?.('Failed to create render worker');
+        }
+    }
+    request(req) {
+        this.batcher.queue(req);
+    }
+    submitToWorker(req) {
+        const id = ++this.frameId;
+        const request = { ...req, id };
+        if (this.isWorking) {
+            this.pendingRequest = request;
+        }
+        else {
+            this.sendToWorker(request);
+        }
+    }
+    sendToWorker(request) {
+        if (!this.worker)
+            return;
+        this.isWorking = true;
+        const message = { type: 'render', payload: request };
+        const transferables = request.images.filter(img => img instanceof ImageBitmap);
+        this.worker.postMessage(message, transferables);
+    }
+    handleWorkerMessage(response) {
+        if (response.type === 'error') {
+            console.error('Render error:', response.payload.error);
+            this.isWorking = false;
+            this.processNext();
+            return;
+        }
+        const { id, result, frameTime } = response.payload;
+        this.isWorking = false;
+        if (id <= this.lastCompletedId) {
+            result?.close();
+            this.processNext();
+            return;
+        }
+        this.lastCompletedId = id;
+        if (result && frameTime !== undefined) {
+            this.options.onResult(result, frameTime);
+        }
+        this.processNext();
+    }
+    processNext() {
+        if (this.pendingRequest) {
+            const next = this.pendingRequest;
+            this.pendingRequest = null;
+            this.sendToWorker(next);
+        }
+    }
+    destroy() {
+        this.batcher.destroy();
+        if (this.worker) {
+            this.worker.terminate();
+            this.worker = null;
+        }
+    }
+}

package/dist/components/ImageAdder.svelte

@@ -0,0 +1,148 @@
+<script lang="ts">
+	interface Props {
+		onAddImage: (src: string) => void;
+		localImages?: string[];
+	}
+
+	let { onAddImage, localImages = [] }: Props = $props();
+
+	let urlInput = $state('');
+	let showUrlInput = $state(false);
+
+	function handleUrlSubmit() {
+		const trimmed = urlInput.trim();
+		if (trimmed) {
+			onAddImage(trimmed);
+			urlInput = '';
+			showUrlInput = false;
+		}
+	}
+
+	function handleFileSelect(e: Event) {
+		const input = e.currentTarget as HTMLInputElement;
+		const file = input.files?.[0];
+		if (file) {
+			const reader = new FileReader();
+			reader.onload = (e) => {
+				const result = e.target?.result;
+				if (typeof result === 'string') {
+					onAddImage(result);
+				}
+			};
+			reader.readAsDataURL(file);
+		}
+		input.value = '';
+	}
+</script>
+
+<div class="image-adder">
+	<div class="add-buttons">
+		<button class="btn" onclick={() => (showUrlInput = !showUrlInput)}>
+			{showUrlInput ? 'Cancel' : 'Add from URL'}
+		</button>
+		<label class="btn">
+			Add from File
+			<input type="file" accept="image/*" onchange={handleFileSelect} style="display: none;" />
+		</label>
+	</div>
+
+	{#if showUrlInput}
+		<div class="url-input-group">
+			<input
+				type="url"
+				placeholder="https://example.com/image.jpg"
+				bind:value={urlInput}
+				onkeydown={(e) => e.key === 'Enter' && handleUrlSubmit()}
+			/>
+			<button class="btn" onclick={handleUrlSubmit}>Add</button>
+		</div>
+	{/if}
+
+	{#if localImages.length > 0}
+		<div class="local-images">
+			<h3>Local Images</h3>
+			<div class="image-grid">
+				{#each localImages as src}
+					<button class="image-item" onclick={() => onAddImage(src)}>
+						<img src={src} alt="" />
+					</button>
+				{/each}
+			</div>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.image-adder {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+	}
+
+	.add-buttons {
+		display: flex;
+		gap: 0.5rem;
+	}
+
+	.btn {
+		padding: 0.5rem 1rem;
+		background: var(--color-primary, #3b82f6);
+		color: white;
+		border: none;
+		border-radius: 4px;
+		cursor: pointer;
+		font-size: 0.875rem;
+		transition: background 200ms;
+	}
+
+	.btn:hover {
+		background: var(--color-primary-dark, #2563eb);
+	}
+
+	.url-input-group {
+		display: flex;
+		gap: 0.5rem;
+	}
+
+	.url-input-group input {
+		flex: 1;
+		padding: 0.5rem;
+		border: 1px solid var(--color-border, #ccc);
+		border-radius: 4px;
+		font-size: 0.875rem;
+	}
+
+	.local-images h3 {
+		margin: 0 0 0.5rem;
+		font-size: 0.875rem;
+		font-weight: 600;
+		color: var(--color-text-muted, #666);
+	}
+
+	.image-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+		gap: 0.5rem;
+	}
+
+	.image-item {
+		aspect-ratio: 1;
+		border: 2px solid var(--color-border, #ccc);
+		border-radius: 4px;
+		overflow: hidden;
+		cursor: pointer;
+		padding: 0;
+		background: #f5f5f5;
+		transition: border-color 200ms;
+	}
+
+	.image-item:hover {
+		border-color: var(--color-primary, #3b82f6);
+	}
+
+	.image-item img {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+</style>

package/dist/components/ImageAdder.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    onAddImage: (src: string) => void;
+    localImages?: string[];
+}
+declare const ImageAdder: import("svelte").Component<Props, {}, "">;
+type ImageAdder = ReturnType<typeof ImageAdder>;
+export default ImageAdder;

package/dist/components/InfoSections.svelte

@@ -0,0 +1,152 @@
+<script lang="ts">
+</script>
+
+<div class="info-sections">
+	<div class="info-card">
+		<h3>📋 How to Use</h3>
+		<ol>
+			<li>Add images to your mockup using the "File" or "URL" buttons</li>
+			<li>Adjust canvas size to match your desired output dimensions</li>
+			<li>Select a layer to transform, resize, or apply effects</li>
+			<li>Use pan and zoom controls to position your mockup perfectly</li>
+			<li>Save your mockup to work on it later</li>
+		</ol>
+	</div>
+	<div class="info-card">
+		<h3>🎨 Features</h3>
+		<p>
+			<span class="tag">Layer Management</span>
+			<span class="tag">Transform Controls</span>
+			<span class="tag">Image Effects</span>
+			<span class="tag">Pan & Zoom</span>
+			<span class="tag">Custom Canvas</span>
+			<span class="tag">Save & Load</span>
+		</p>
+		<p style="margin-top: 0.5rem;">Create professional product mockups by layering images, applying transformations, and fine-tuning every detail. All your work is saved automatically in your browser.</p>
+	</div>
+	<div class="info-card">
+		<h3>🔒 Privacy</h3>
+		<p>This tool runs 100% locally in your browser. No image data is uploaded to any server. Your mockups and images are processed and stored entirely on your machine.</p>
+	</div>
+	<div class="info-card">
+		<h3>❓ FAQ</h3>
+		<div class="faq-item">
+			<strong>What image formats are supported?</strong>
+			<p>All common image formats including PNG, JPG, WebP, and GIF. Images are displayed directly in the browser.</p>
+		</div>
+		<div class="faq-item">
+			<strong>How do I save my mockup?</strong>
+			<p>Mockups are automatically saved to your browser's local storage. Use the "View All" button to see and manage all your saved mockups.</p>
+		</div>
+		<div class="faq-item">
+			<strong>Can I export my mockup?</strong>
+			<p>You can use your browser's screenshot or print features to capture your mockup, or right-click on the canvas to save the rendered image.</p>
+		</div>
+	</div>
+</div>
+
+<footer class="info-footer">
+	<p>Mockup Renderer · Part of <a href="https://tools.carsho.dev">Carsho Tools</a></p>
+</footer>
+
+<style>
+:global(:root) {
+  --bg: var(--bg-primary);
+  --text: var(--text-primary);
+}
+
+.info-sections {
+  background: var(--bg);
+  padding: 3rem 2rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 1.5rem;
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+.info-card {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 1.5rem;
+}
+
+.info-card h3 {
+  font-size: 1rem;
+  font-weight: 600;
+  margin: 0 0 1rem 0;
+  color: var(--text);
+}
+
+.info-card p {
+  font-size: 0.85rem;
+  color: var(--text-secondary);
+  line-height: 1.6;
+  margin: 0.5rem 0;
+}
+
+.info-card ol {
+  margin: 0;
+  padding-left: 1.25rem;
+  color: var(--text-secondary);
+  font-size: 0.85rem;
+  line-height: 1.8;
+}
+
+.info-card .faq-item {
+  margin-bottom: 1rem;
+}
+
+.info-card .faq-item:last-child {
+  margin-bottom: 0;
+}
+
+.info-card .faq-item strong {
+  color: var(--text);
+  font-size: 0.85rem;
+}
+
+.info-card .faq-item p {
+  margin-top: 0.25rem;
+}
+
+.info-card .tag {
+  display: inline-block;
+  background: var(--accent);
+  color: white;
+  padding: 0.2rem 0.5rem;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  margin-right: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.info-footer {
+  background: var(--bg-secondary);
+  border-top: 1px solid var(--border);
+  padding: 1.5rem 2rem;
+  text-align: center;
+}
+
+.info-footer p {
+  font-size: 0.8rem;
+  color: var(--text-secondary);
+  margin: 0;
+}
+
+.info-footer a {
+  color: var(--accent);
+  text-decoration: none;
+}
+
+.info-footer a:hover {
+  text-decoration: underline;
+}
+
+@media (max-width: 1000px) {
+  .info-sections {
+    padding: 2rem 1rem;
+  }
+}
+</style>

package/dist/components/InfoSections.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const InfoSections: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type InfoSections = InstanceType<typeof InfoSections>;
+export default InfoSections;