svelte-product-mockup 1.0.2 → 1.0.3

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;

package/dist/components/LayerControls.svelte

@@ -0,0 +1,258 @@
+<script lang="ts">
+	import type { Layer, LayerTransform } from '../types';
+	import type { ResizeEffect, WarpEffect, RestyleEffect, SvgEffect } from '../image-transformations/types';
+	import { defaultResizeEffect, defaultRestyleEffect } from '../image-transformations/types';
+	import { verifySvgSource } from '../image-transformations/svg';
+	import EyeOpenIcon from '../icons/EyeOpenIcon.svelte';
+	import EyeClosedIcon from '../icons/EyeClosedIcon.svelte';
+	import TrashIcon from '../icons/TrashIcon.svelte';
+	import TransformSection from './sections/TransformSection.svelte';
+	import SizingSection from './sections/SizingSection.svelte';
+	import WarpSection from './sections/WarpSection.svelte';
+	import RestyleSection from './sections/RestyleSection.svelte';
+	import SvgSection from './sections/SvgSection.svelte';
+
+	interface Props {
+		layer: Layer;
+		canvasWidth: number;
+		canvasHeight: number;
+		onTransformChange: (transform: LayerTransform) => void;
+		onOpacityChange: (opacity: number) => void;
+		onVisibilityChange: (visible: boolean) => void;
+		onEffectsChange: (effects: Layer['effects']) => void;
+		onNameChange?: (name: string) => void;
+		onDelete: () => void;
+	}
+
+	let {
+		layer,
+		canvasWidth,
+		canvasHeight,
+		onTransformChange,
+		onOpacityChange,
+		onVisibilityChange,
+		onEffectsChange,
+		onNameChange,
+		onDelete
+	}: Props = $props();
+
+	const resizeEffect = $derived.by(() => {
+		const effect = layer.effects.find((e) => e.type === 'resize') as ResizeEffect | undefined;
+		return effect ?? defaultResizeEffect;
+	});
+
+	const restyleEffect = $derived.by(() => {
+		const effect = layer.effects.find((e) => e.type === 'restyle') as RestyleEffect | undefined;
+		return effect ?? defaultRestyleEffect;
+	});
+
+	const warpEffect = $derived.by(() => {
+		return layer.effects.find((e) => e.type === 'warp') as WarpEffect | undefined;
+	});
+
+	const svgEffect = $derived.by(() => {
+		return layer.effects.find((e) => e.type === 'svg') as SvgEffect | undefined;
+	});
+
+	let isVerifiedSvg = $state<boolean | null>(null);
+
+	$effect(() => {
+		isVerifiedSvg = null;
+		verifySvgSource(layer.src).then((verified) => {
+			isVerifiedSvg = verified;
+		}).catch(() => {
+			isVerifiedSvg = false;
+		});
+	});
+
+	function handleResizeChange(effect: ResizeEffect) {
+		const otherEffects = layer.effects.filter((e) => e.type !== 'resize');
+		onEffectsChange([...otherEffects, effect]);
+	}
+
+	function handleRestyleChange(effect: RestyleEffect) {
+		const otherEffects = layer.effects.filter((e) => e.type !== 'restyle');
+		onEffectsChange([...otherEffects, effect]);
+	}
+
+	function handleWarpChange(effect: WarpEffect | undefined) {
+		const otherEffects = layer.effects.filter((e) => e.type !== 'warp');
+		if (effect) {
+			onEffectsChange([...otherEffects, effect]);
+		} else {
+			onEffectsChange(otherEffects);
+		}
+	}
+
+	function handleSvgChange(effect: SvgEffect | undefined) {
+		const otherEffects = layer.effects.filter((e) => e.type !== 'svg');
+		if (effect) {
+			onEffectsChange([...otherEffects, effect]);
+		} else {
+			onEffectsChange(otherEffects);
+		}
+	}
+</script>
+
+<div class="layer-controls">
+	<div class="layer-header">
+		<button
+			class="visibility-toggle"
+			onclick={() => onVisibilityChange(!layer.visible)}
+			aria-label={layer.visible ? 'Hide layer' : 'Show layer'}
+		>
+			{#if layer.visible}
+				<EyeOpenIcon />
+			{:else}
+				<EyeClosedIcon />
+			{/if}
+		</button>
+		<span class="layer-preview">
+			<img src={layer.src} alt="Layer preview" />
+		</span>
+		<button class="delete-btn" onclick={onDelete} aria-label="Delete layer">
+			<TrashIcon />
+		</button>
+	</div>
+
+	{#if onNameChange}
+		<div class="layer-name-section">
+			<label class="form-label" for="layer-name-{layer.id}">Layer Name (for overrides)</label>
+			<input
+				id="layer-name-{layer.id}"
+				type="text"
+				class="form-input"
+				placeholder="e.g., front, back, logo"
+				value={layer.name || ''}
+				oninput={(e) => onNameChange(e.currentTarget.value)}
+			/>
+			<p class="form-hint">Use this name as the key when overriding images in the renderer</p>
+		</div>
+	{/if}
+
+	<div class="sections">
+		{#if isVerifiedSvg === true}
+			<SvgSection effect={svgEffect} onChange={handleSvgChange} />
+		{/if}
+		<SizingSection effect={resizeEffect} onChange={handleResizeChange} />
+		<RestyleSection effect={restyleEffect} onChange={handleRestyleChange} />
+		<TransformSection
+			transform={layer.transform}
+			opacity={layer.opacity}
+			{canvasWidth}
+			{canvasHeight}
+			onTransformChange={onTransformChange}
+			onOpacityChange={onOpacityChange}
+			layerId={layer.id}
+		/>
+		<WarpSection effect={warpEffect} onChange={handleWarpChange} />
+	</div>
+</div>
+
+<style>
+	.layer-controls {
+		border-radius: 4px;
+		padding-top: 0.75rem;
+		padding-bottom: 0.75rem;
+		margin-bottom: 0.5rem;
+		background: var(--color-surface, #fff);
+	}
+
+	.layer-header {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		margin-bottom: 0.75rem;
+		padding-bottom: 0.75rem;
+		border-bottom: 1px solid var(--color-border, #eee);
+	}
+
+	.visibility-toggle {
+		background: none;
+		border: none;
+		cursor: pointer;
+		padding: 0.25rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: var(--color-text, #000);
+	}
+
+	.layer-preview {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 40px;
+		overflow: hidden;
+		border-radius: 4px;
+		background: #f5f5f5;
+	}
+
+	.layer-preview img {
+		max-width: 100%;
+		max-height: 100%;
+		object-fit: contain;
+	}
+
+	.delete-btn {
+		background: #ef4444;
+		color: white;
+		border: none;
+		border-radius: 4px;
+		width: 24px;
+		height: 24px;
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0;
+	}
+
+	.delete-btn:hover {
+		background: #dc2626;
+	}
+
+	.layer-name-section {
+		padding: 0 0.75rem;
+		margin-bottom: 0.75rem;
+	}
+
+	.layer-name-section .form-label {
+		display: block;
+		font-size: 0.75rem;
+		font-weight: 500;
+		color: var(--color-text-muted, #666);
+		margin-bottom: 0.25rem;
+		text-transform: uppercase;
+		letter-spacing: 0.5px;
+	}
+
+	.layer-name-section .form-input {
+		width: 100%;
+		padding: 0.375rem 0.5rem;
+		border: 1px solid var(--color-border, #ccc);
+		border-radius: 4px;
+		font-size: 0.875rem;
+		font-family: inherit;
+	}
+
+	.layer-name-section .form-input:focus {
+		outline: none;
+		border-color: var(--color-primary, #3b82f6);
+	}
+
+	.form-hint {
+		font-size: 0.75rem;
+		color: var(--color-text-muted, #666);
+		margin: 0.25rem 0 0 0;
+	}
+
+	.sections {
+		display: flex;
+		flex-direction: column;
+		gap: 0;
+		overflow: hidden;
+		min-width: 0;
+	}
+</style>

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

@@ -0,0 +1,15 @@
+import type { Layer, LayerTransform } from '../types';
+interface Props {
+    layer: Layer;
+    canvasWidth: number;
+    canvasHeight: number;
+    onTransformChange: (transform: LayerTransform) => void;
+    onOpacityChange: (opacity: number) => void;
+    onVisibilityChange: (visible: boolean) => void;
+    onEffectsChange: (effects: Layer['effects']) => void;
+    onNameChange?: (name: string) => void;
+    onDelete: () => void;
+}
+declare const LayerControls: import("svelte").Component<Props, {}, "">;
+type LayerControls = ReturnType<typeof LayerControls>;
+export default LayerControls;