svelte-product-mockup 1.0.10 → 1.0.12

package/dist/components/LayerControls.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import type { Layer, LayerTransform } from '../types';
-	import { defaultTransform } from '../types';
 	import type { ResizeEffect, PositionEffect, WarpEffect, RestyleEffect, SvgEffect } from '../image-transformations/types';
 	import { defaultRestyleEffect } from '../image-transformations/types';
 	import { verifySvgSource } from '../image-transformations/svg';
@@ -121,10 +120,10 @@
 	<div class="layer-header">
 		<button
 			class="visibility-toggle"
-			onclick={() => onVisibilityChange(!(layer.visible ?? true))}
-			aria-label={(layer.visible ?? true) ? 'Hide layer' : 'Show layer'}
+			onclick={() => onVisibilityChange(!layer.visible)}
+			aria-label={layer.visible ? 'Hide layer' : 'Show layer'}
 		>
-			{#if layer.visible ?? true}
+			{#if layer.visible}
 				<EyeOpenIcon />
 			{:else}
 				<EyeClosedIcon />
@@ -174,8 +173,8 @@
 		/>
 		<RestyleSection effect={restyleEffect} onChange={handleRestyleChange} />
 		<TransformSection
-			transform={layer.transform ?? defaultTransform}
-			opacity={layer.opacity ?? 1}
+			transform={layer.transform}
+			opacity={layer.opacity}
 			{canvasWidth}
 			{canvasHeight}
 			onTransformChange={onTransformChange}

package/dist/components/MockupEditor.svelte

@@ -446,23 +446,20 @@
 				{/if}
 			</div>
 
-			{#if selectedLayerId}
-				{@const selectedLayer = mockup.composition.layers.find((l) => l.id === selectedLayerId)}
-				{#if selectedLayer}
-					<LayerControls
-						layer={selectedLayer}
-						canvasWidth={mockup.composition.width}
-						canvasHeight={mockup.composition.height}
-						onTransformChange={(transform) => handleLayerTransform(selectedLayer.id, transform)}
-						onOpacityChange={(opacity) => handleLayerOpacityChange(selectedLayer.id, opacity)}
-						onVisibilityChange={(visible) => handleLayerVisibilityChange(selectedLayer.id, visible)}
-						onEffectsChange={(effects) => handleLayerEffectsChange(selectedLayer.id, effects)}
-						onNameChange={(name) => handleLayerNameChange(selectedLayer.id, name)}
-						onSrcChange={(src) => handleLayerSrcChange(selectedLayer.id, src)}
-						onDelete={() => handleDeleteLayer(selectedLayer.id)}
-					/>
-				{/if}
-			{/if}
+		{#if selectedLayer}
+			<LayerControls
+				layer={selectedLayer}
+				canvasWidth={mockup.composition.width}
+				canvasHeight={mockup.composition.height}
+				onTransformChange={(transform) => handleLayerTransform(selectedLayer.id, transform)}
+				onOpacityChange={(opacity) => handleLayerOpacityChange(selectedLayer.id, opacity)}
+				onVisibilityChange={(visible) => handleLayerVisibilityChange(selectedLayer.id, visible)}
+				onEffectsChange={(effects) => handleLayerEffectsChange(selectedLayer.id, effects)}
+				onNameChange={(name) => handleLayerNameChange(selectedLayer.id, name)}
+				onSrcChange={(src) => handleLayerSrcChange(selectedLayer.id, src)}
+				onDelete={() => handleDeleteLayer(selectedLayer.id)}
+			/>
+		{/if}
 		</div>
 	</sidebar>
 	<div class="output-canvas">

package/dist/components/MockupEditorRenderer.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
 	import { onMount, onDestroy, tick, untrack } from 'svelte';
-	import type { Mockup } from '../types';
+	import type { Mockup, MockupConfig } from '../types';
 	import { renderMockupCanvasEditor, type RenderController } from '../renderMockupCanvasEditor';
 	import { denormalizeMockup } from '../mockup-normalize';
 
 	interface Props {
-		mockup: Mockup;
+		mockup: Mockup | MockupConfig;
 		imageOverrides?: Record<string, string>;
 		objectFit?: 'contain' | 'cover';
 		debounceMs?: number;

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

@@ -1,6 +1,6 @@
-import type { Mockup } from '../types';
+import type { Mockup, MockupConfig } from '../types';
 interface Props {
-    mockup: Mockup;
+    mockup: Mockup | MockupConfig;
     imageOverrides?: Record<string, string>;
     objectFit?: 'contain' | 'cover';
     debounceMs?: number;

package/dist/components/MockupRenderer.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import type { Mockup } from '../types';
+	import type { Mockup, MockupConfig } from '../types';
 	import { renderMockupCanvas } from '../renderMockupCanvas';
 	import { denormalizeMockup } from '../mockup-normalize';
 
 	interface Props {
-		mockup: Mockup;
+		mockup: Mockup | MockupConfig;
 		imageOverrides?: Record<string, string>;
 		objectFit?: 'contain' | 'cover';
 	}

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

@@ -1,6 +1,6 @@
-import type { Mockup } from '../types';
+import type { Mockup, MockupConfig } from '../types';
 interface Props {
-    mockup: Mockup;
+    mockup: Mockup | MockupConfig;
     imageOverrides?: Record<string, string>;
     objectFit?: 'contain' | 'cover';
 }

package/dist/components/sections/SizingSection.svelte

@@ -80,7 +80,7 @@
 
 			<ControlGroup label="Mode" onReset={() => updateResize({ mode: defaultResizeEffect.mode })}>
 				<select
-					value={resizeEffect.mode ?? 'contain'}
+					value={resizeEffect.mode}
 					onchange={(e) => updateResize({ mode: e.currentTarget.value as 'contain' | 'cover' })}
 					class="mode-select"
 				>

package/dist/components/sections/TransformSection.svelte

@@ -25,10 +25,13 @@
 	const defaults = {
 		x: 0,
 		y: 0,
+		scale: 1,
 		rotation: 0,
 		opacity: 1
 	};
 
+	const rotationValue = $derived(transform.rotation ?? defaults.rotation);
+
 	function updateTransform(updates: Partial<LayerTransform>) {
 		onTransformChange({ ...transform, ...updates });
 	}
@@ -92,14 +95,14 @@
 						step="1"
 						min="-360"
 						max="360"
-						bind:value={transform.rotation}
+						value={rotationValue}
 						oninput={(e) => updateTransform({ rotation: Number(e.currentTarget.value) })}
 					/>
 					<input
 						type="number"
 						class="manual-input"
 						step="1"
-						bind:value={transform.rotation}
+						value={rotationValue}
 						oninput={(e) => updateTransform({ rotation: Number(e.currentTarget.value) })}
 					/>
 				</ControlGroup>

package/dist/components/sections/WarpSection.svelte

@@ -138,7 +138,7 @@
 							step="0.05"
 							min="0.1"
 							max="5"
-							value={imageSettings.scale ?? 1}
+							value={imageSettings.scale}
 							oninput={(e) => updateImage({ scale: Number(e.currentTarget.value) })}
 						/>
 						<input
@@ -147,7 +147,7 @@
 							step="0.05"
 							min="0.1"
 							max="5"
-							value={imageSettings.scale ?? 1}
+							value={imageSettings.scale}
 							oninput={(e) => updateImage({ scale: Number(e.currentTarget.value) })}
 						/>
 					</ControlGroup>
@@ -157,7 +157,7 @@
 							step="0.01"
 							min="-1"
 							max="1"
-							value={imageSettings.translateX ?? 0}
+							value={imageSettings.translateX}
 							oninput={(e) => updateImage({ translateX: Number(e.currentTarget.value) })}
 						/>
 						<input
@@ -166,7 +166,7 @@
 							step="0.01"
 							min="-1"
 							max="1"
-							value={imageSettings.translateX ?? 0}
+							value={imageSettings.translateX}
 							oninput={(e) => updateImage({ translateX: Number(e.currentTarget.value) })}
 						/>
 					</ControlGroup>
@@ -176,7 +176,7 @@
 							step="0.01"
 							min="-1"
 							max="1"
-							value={imageSettings.translateY ?? 0}
+							value={imageSettings.translateY}
 							oninput={(e) => updateImage({ translateY: Number(e.currentTarget.value) })}
 						/>
 						<input
@@ -185,7 +185,7 @@
 							step="0.01"
 							min="-1"
 							max="1"
-							value={imageSettings.translateY ?? 0}
+							value={imageSettings.translateY}
 							oninput={(e) => updateImage({ translateY: Number(e.currentTarget.value) })}
 						/>
 					</ControlGroup>
@@ -204,7 +204,7 @@
 							step="1"
 							min="-90"
 							max="90"
-							value={plane.rotationX ?? 0}
+							value={plane.rotationX}
 							oninput={(e) => updatePlane({ rotationX: Number(e.currentTarget.value) })}
 						/>
 						<input
@@ -213,7 +213,7 @@
 							step="1"
 							min="-90"
 							max="90"
-							value={plane.rotationX ?? 0}
+							value={plane.rotationX}
 							oninput={(e) => updatePlane({ rotationX: Number(e.currentTarget.value) })}
 						/>
 					</ControlGroup>
@@ -223,7 +223,7 @@
 							step="1"
 							min="-90"
 							max="90"
-							value={plane.rotationY ?? 0}
+							value={plane.rotationY}
 							oninput={(e) => updatePlane({ rotationY: Number(e.currentTarget.value) })}
 						/>
 						<input
@@ -232,7 +232,7 @@
 							step="1"
 							min="-90"
 							max="90"
-							value={plane.rotationY ?? 0}
+							value={plane.rotationY}
 							oninput={(e) => updatePlane({ rotationY: Number(e.currentTarget.value) })}
 						/>
 					</ControlGroup>
@@ -242,7 +242,7 @@
 							step="1"
 							min="-180"
 							max="180"
-							value={plane.rotationZ ?? 0}
+							value={plane.rotationZ}
 							oninput={(e) => updatePlane({ rotationZ: Number(e.currentTarget.value) })}
 						/>
 						<input
@@ -251,7 +251,7 @@
 							step="1"
 							min="-180"
 							max="180"
-							value={plane.rotationZ ?? 0}
+							value={plane.rotationZ}
 							oninput={(e) => updatePlane({ rotationZ: Number(e.currentTarget.value) })}
 						/>
 					</ControlGroup>
@@ -261,7 +261,7 @@
 							step="0.1"
 							min="0"
 							max="3"
-							value={plane.depthScale ?? 1}
+							value={plane.depthScale}
 							oninput={(e) => updatePlane({ depthScale: Number(e.currentTarget.value) })}
 						/>
 						<input
@@ -270,7 +270,7 @@
 							step="0.1"
 							min="0"
 							max="3"
-							value={plane.depthScale ?? 1}
+							value={plane.depthScale}
 							oninput={(e) => updatePlane({ depthScale: Number(e.currentTarget.value) })}
 						/>
 					</ControlGroup>
@@ -327,7 +327,7 @@
 						step="1"
 						min="-90"
 						max="90"
-						value={cylinder.rotationX ?? 0}
+						value={cylinder.rotationX}
 						oninput={(e) => updateCylinder({ rotationX: Number(e.currentTarget.value) })}
 					/>
 					<input
@@ -336,7 +336,7 @@
 						step="1"
 						min="-90"
 						max="90"
-						value={cylinder.rotationX ?? 0}
+						value={cylinder.rotationX}
 						oninput={(e) => updateCylinder({ rotationX: Number(e.currentTarget.value) })}
 					/>
 				</ControlGroup>
@@ -347,7 +347,7 @@
 							step="1"
 							min="-180"
 							max="180"
-							value={cylinder.rotationZ ?? 0}
+							value={cylinder.rotationZ}
 							oninput={(e) => updateCylinder({ rotationZ: Number(e.currentTarget.value) })}
 						/>
 						<input
@@ -356,7 +356,7 @@
 							step="1"
 							min="-180"
 							max="180"
-							value={cylinder.rotationZ ?? 0}
+							value={cylinder.rotationZ}
 							oninput={(e) => updateCylinder({ rotationZ: Number(e.currentTarget.value) })}
 						/>
 					</ControlGroup>
@@ -395,7 +395,7 @@
 							step="1"
 							min="-180"
 							max="180"
-							value={sphere.rotationZ ?? 0}
+							value={sphere.rotationZ}
 							oninput={(e) => updateSphere({ rotationZ: Number(e.currentTarget.value) })}
 						/>
 						<input
@@ -404,7 +404,7 @@
 							step="1"
 							min="-180"
 							max="180"
-							value={sphere.rotationZ ?? 0}
+							value={sphere.rotationZ}
 							oninput={(e) => updateSphere({ rotationZ: Number(e.currentTarget.value) })}
 						/>
 					</ControlGroup>
@@ -419,21 +419,21 @@
 				<ControlGroup label="Show Grid/Bounds" onReset={() => updateDebug({ showBounds: defaultWarpDebug.showBounds })}>
 					<input
 						type="checkbox"
-						checked={debugSettings.showBounds ?? false}
+						checked={debugSettings.showBounds}
 						onchange={(e) => updateDebug({ showBounds: e.currentTarget.checked })}
 					/>
 				</ControlGroup>
 					<ControlGroup label="Depth Shader" onReset={() => updateDebug({ showDepthVis: defaultWarpDebug.showDepthVis })}>
 						<input
 							type="checkbox"
-							checked={debugSettings.showDepthVis ?? false}
+							checked={debugSettings.showDepthVis}
 							onchange={(e) => updateDebug({ showDepthVis: e.currentTarget.checked })}
 						/>
 					</ControlGroup>
 					<ControlGroup label="Crosshair" onReset={() => updateDebug({ showCrosshair: defaultWarpDebug.showCrosshair })}>
 						<input
 							type="checkbox"
-							checked={debugSettings.showCrosshair ?? false}
+							checked={debugSettings.showCrosshair}
 							onchange={(e) => updateDebug({ showCrosshair: e.currentTarget.checked })}
 						/>
 					</ControlGroup>

package/dist/image-transformations/index.js

@@ -59,7 +59,7 @@ export function processLayerImage(image, effects) {
             ctx.setLineDash([]);
             ctx.font = '12px monospace';
             ctx.fillStyle = 'rgba(0,0,0,0.7)';
-            const labelText = `Resize: ${Math.round(containerWidth)}x${Math.round(containerHeight)} (${resizeEffect.mode ?? 'contain'})`;
+            const labelText = `Resize: ${Math.round(containerWidth)}x${Math.round(containerHeight)} (${resizeEffect.mode})`;
             const labelWidth = ctx.measureText(labelText).width + 8;
             ctx.fillRect(0, -22, labelWidth, 20);
             ctx.fillStyle = '#00aa00';
@@ -99,7 +99,7 @@ export function processLayerImage(image, effects) {
                 ctx.setLineDash([]);
                 ctx.font = '12px monospace';
                 ctx.fillStyle = 'rgba(0,0,0,0.7)';
-                const resizeLabelText = `Resize: ${Math.round(resizeEffect.width)}x${Math.round(resizeEffect.height)} (${resizeEffect.mode ?? 'contain'})`;
+                const resizeLabelText = `Resize: ${Math.round(resizeEffect.width)}x${Math.round(resizeEffect.height)} (${resizeEffect.mode})`;
                 const resizeLabelWidth = ctx.measureText(resizeLabelText).width + 8;
                 ctx.fillRect(0, -22, resizeLabelWidth, 20);
                 ctx.fillStyle = '#00aa00';

package/dist/image-transformations/position.js

@@ -20,7 +20,7 @@ function calculateVerticalOffset(imageHeight, containerHeight, anchor) {
 }
 export function calculatePosition(imageWidth, imageHeight, effect) {
     return {
-        offsetX: calculateHorizontalOffset(imageWidth, effect.containerWidth, effect.horizontal ?? 'center'),
-        offsetY: calculateVerticalOffset(imageHeight, effect.containerHeight, effect.vertical ?? 'middle')
+        offsetX: calculateHorizontalOffset(imageWidth, effect.containerWidth, effect.horizontal),
+        offsetY: calculateVerticalOffset(imageHeight, effect.containerHeight, effect.vertical)
     };
 }

package/dist/image-transformations/resize.js

@@ -1,7 +1,7 @@
 export function calculateResize(originalWidth, originalHeight, effect) {
     const targetWidth = effect.width;
     const targetHeight = effect.height;
-    if ((effect.mode ?? 'contain') === 'contain') {
+    if (effect.mode === 'contain') {
         // Fit inside target dimensions, maintain aspect ratio
         const scale = Math.min(targetWidth / originalWidth, targetHeight / originalHeight);
         return {

package/dist/image-transformations/types.d.ts

@@ -18,7 +18,7 @@ export interface ResizeEffect {
     type: 'resize';
     width: number;
     height: number;
-    mode?: ResizeMode;
+    mode: ResizeMode;
     debug?: boolean;
 }
 export type HorizontalAnchor = 'left' | 'center' | 'right';
@@ -27,8 +27,8 @@ export interface PositionEffect {
     type: 'position';
     containerWidth: number;
     containerHeight: number;
-    horizontal?: HorizontalAnchor;
-    vertical?: VerticalAnchor;
+    horizontal: HorizontalAnchor;
+    vertical: VerticalAnchor;
     debug?: boolean;
 }
 export { type WarpShape, type ImageOnSurface, type WarpDebug, type CylinderWarpParams, type PlaneWarpParams, type SphereWarpParams, type CustomWarpParams, type WarpEffect, defaultImageOnSurface, defaultWarpDebug, defaultCylinderWarp, defaultPlaneWarp, defaultSphereWarp, defaultWarpEffect } from './warp';

package/dist/image-transformations/warp/cylinder.js

@@ -141,16 +141,16 @@ function drawCylinderBounds(ctx, centerX, centerY, radius, height, rotX, rotZ, f
 export function drawCylinderWarp(ctx, img, centerX, centerY, width, height, params, imageTransform, quality, warpDebug) {
     const { diameter, perspective, rotationX, rotationZ } = params;
     const radius = diameter / 2;
-    const rotXR = (rotationX ?? 0) * Math.PI / 180;
-    const rotZR = (rotationZ ?? 0) * Math.PI / 180;
+    const rotXR = rotationX * Math.PI / 180;
+    const rotZR = rotationZ * Math.PI / 180;
     const hasXRotation = Math.abs(rotXR) > 0.001;
     const perspectiveStrength = perspective ?? 1;
     const focalLength = perspectiveStrength > 0.01
         ? radius * (10 / perspectiveStrength)
         : radius * 1000;
-    const imgScale = imageTransform.scale ?? 1;
-    const imgTransX = imageTransform.translateX ?? 0;
-    const imgTransY = imageTransform.translateY ?? 0;
+    const imgScale = imageTransform.scale;
+    const imgTransX = imageTransform.translateX;
+    const imgTransY = imageTransform.translateY;
     // Output bounds are the UNTRANSFORMED cylinder area
     // The transformation is handled entirely by the inverse transform
     // We just need enough area to cover the transformed result

package/dist/image-transformations/warp/plane.js

@@ -1,14 +1,14 @@
 import { drawWarpPerPixel, drawCrosshair, rotate3D, rotate3DInverse, drawPlaneGrid } from './helpers';
 export function drawPlaneWarp(ctx, img, centerX, centerY, width, height, params, imageTransform, quality, warpDebug) {
     const { rotationX, rotationY, rotationZ, depthScale } = params;
-    const rotX = (rotationX ?? 0) * (Math.PI / 180);
-    const rotY = (rotationY ?? 0) * (Math.PI / 180);
-    const rotZ = (rotationZ ?? 0) * (Math.PI / 180);
+    const rotX = rotationX * (Math.PI / 180);
+    const rotY = rotationY * (Math.PI / 180);
+    const rotZ = rotationZ * (Math.PI / 180);
     const hasRotation = Math.abs(rotX) > 0.001 || Math.abs(rotY) > 0.001 || Math.abs(rotZ) > 0.001;
-    const imgScale = imageTransform.scale ?? 1;
-    const imgTransX = imageTransform.translateX ?? 0;
-    const imgTransY = imageTransform.translateY ?? 0;
-    const perspectiveFactor = (depthScale ?? 1) * 0.001;
+    const imgScale = imageTransform.scale;
+    const imgTransX = imageTransform.translateX;
+    const imgTransY = imageTransform.translateY;
+    const perspectiveFactor = depthScale * 0.001;
     const focalLength = perspectiveFactor > 0.0001 ? 1 / perspectiveFactor : 10000;
     const forwardTransform = (localX, localY) => {
         const [x3d, y3d, z3d] = rotate3D(localX, localY, 0, rotX, rotY, rotZ);

package/dist/image-transformations/warp/sphere.js

@@ -44,10 +44,10 @@ function drawSphereBounds(ctx, centerX, centerY, radius, rotZ) {
 }
 export function drawSphereWarp(ctx, img, centerX, centerY, width, height, params, imageTransform, quality, warpDebug) {
     const { radius, rotationZ } = params;
-    const rotZ = (rotationZ ?? 0) * (Math.PI / 180);
-    const imgScale = imageTransform.scale ?? 1;
-    const imgTransX = imageTransform.translateX ?? 0;
-    const imgTransY = imageTransform.translateY ?? 0;
+    const rotZ = rotationZ * (Math.PI / 180);
+    const imgScale = imageTransform.scale;
+    const imgTransX = imageTransform.translateX;
+    const imgTransY = imageTransform.translateY;
     const outputBounds = {
         minX: -radius,
         minY: -radius,

package/dist/image-transformations/warp/types.d.ts

@@ -1,33 +1,33 @@
 export type WarpShape = 'none' | 'cylinder' | 'plane' | 'sphere' | 'custom';
 export interface ImageOnSurface {
-    scale?: number;
-    translateX?: number;
-    translateY?: number;
+    scale: number;
+    translateX: number;
+    translateY: number;
 }
 export interface WarpDebug {
-    showBounds?: boolean;
-    showDepthVis?: boolean;
-    showCrosshair?: boolean;
+    showBounds: boolean;
+    showDepthVis: boolean;
+    showCrosshair: boolean;
 }
 export interface CylinderWarpParams {
     diameter: number;
-    pitch?: number;
-    perspective?: number;
-    rotationX?: number;
-    rotationY?: number;
-    rotationZ?: number;
+    pitch: number;
+    perspective: number;
+    rotationX: number;
+    rotationY: number;
+    rotationZ: number;
 }
 export interface PlaneWarpParams {
-    rotationX?: number;
-    rotationY?: number;
-    rotationZ?: number;
-    depthScale?: number;
+    rotationX: number;
+    rotationY: number;
+    rotationZ: number;
+    depthScale: number;
 }
 export interface SphereWarpParams {
     radius: number;
-    rotationX?: number;
-    rotationY?: number;
-    rotationZ?: number;
+    rotationX: number;
+    rotationY: number;
+    rotationZ: number;
 }
 export interface CustomWarpParams {
     formula: string;
@@ -37,8 +37,8 @@ export interface WarpEffect {
     type: 'warp';
     shape: WarpShape;
     enabled: boolean;
-    quality: number;
-    image: ImageOnSurface;
+    quality?: number;
+    image?: ImageOnSurface;
     debug?: WarpDebug;
     cylinder?: CylinderWarpParams;
     plane?: PlaneWarpParams;

package/dist/mockup-normalize.d.ts

@@ -1,3 +1,3 @@
-import type { Mockup } from './types';
-export declare function normalizeMockup(mockup: Mockup, clean?: boolean): Partial<Mockup>;
-export declare function denormalizeMockup(mockup: Partial<Mockup>): Mockup;
+import type { Mockup, MockupConfig, DenormalizedMockup } from './types';
+export declare function normalizeMockup(mockup: Mockup, clean?: boolean): Partial<MockupConfig>;
+export declare function denormalizeMockup(mockup: Partial<MockupConfig>): DenormalizedMockup;