svelte-product-mockup 1.0.9 → 1.0.11

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/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/image-transformations/warp/types.d.ts

@@ -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.js

@@ -29,22 +29,6 @@ function omitDefaults(obj, defaults) {
     }
     return result;
 }
-function omitDefaultsAlwaysInclude(obj, defaults, alwaysInclude) {
-    const result = omitDefaults(obj, defaults);
-    for (const key of alwaysInclude) {
-        if (obj.hasOwnProperty(key)) {
-            result[key] = obj[key];
-        }
-    }
-    return result;
-}
-const PX_SIZING_KEYS = {
-    resize: ['width', 'height'],
-    position: ['containerWidth', 'containerHeight'],
-    composition: ['width', 'height'],
-    cylinder: ['diameter'],
-    sphere: ['radius']
-};
 function normalizeTransform(transform) {
     return omitDefaults(transform, defaultTransform);
 }
@@ -53,11 +37,11 @@ function normalizeRestyleEffect(effect) {
     return { type: 'restyle', ...normalized };
 }
 function normalizeResizeEffect(effect) {
-    const normalized = omitDefaultsAlwaysInclude(effect, defaultResizeEffect, PX_SIZING_KEYS.resize);
+    const normalized = omitDefaults(effect, defaultResizeEffect);
     return { type: 'resize', ...normalized };
 }
 function normalizePositionEffect(effect) {
-    const normalized = omitDefaultsAlwaysInclude(effect, defaultPositionEffect, PX_SIZING_KEYS.position);
+    const normalized = omitDefaults(effect, defaultPositionEffect);
     return { type: 'position', ...normalized };
 }
 function normalizeSvgEffect(effect) {
@@ -91,10 +75,10 @@ function normalizeWarpEffect(effect) {
     const shape = effect.shape || 'none';
     if (shape !== 'none') {
         if (shape === 'cylinder' && effect.cylinder) {
-            const cylinderNormalized = omitDefaultsAlwaysInclude(effect.cylinder, defaultCylinderWarp, PX_SIZING_KEYS.cylinder);
-            if (Object.keys(cylinderNormalized).length > 0) {
-                normalized.cylinder = cylinderNormalized;
-            }
+            const cylinderNormalized = omitDefaults(effect.cylinder, defaultCylinderWarp);
+            // diameter is required - always include it
+            cylinderNormalized.diameter = effect.cylinder.diameter;
+            normalized.cylinder = cylinderNormalized;
         }
         else if (shape === 'plane' && effect.plane) {
             const planeNormalized = omitDefaults(effect.plane, defaultPlaneWarp);
@@ -103,10 +87,10 @@ function normalizeWarpEffect(effect) {
             }
         }
         else if (shape === 'sphere' && effect.sphere) {
-            const sphereNormalized = omitDefaultsAlwaysInclude(effect.sphere, defaultSphereWarp, PX_SIZING_KEYS.sphere);
-            if (Object.keys(sphereNormalized).length > 0) {
-                normalized.sphere = sphereNormalized;
-            }
+            const sphereNormalized = omitDefaults(effect.sphere, defaultSphereWarp);
+            // radius is required - always include it
+            sphereNormalized.radius = effect.sphere.radius;
+            normalized.sphere = sphereNormalized;
         }
     }
     if (Object.keys(normalized).length <= 2) {
@@ -138,16 +122,15 @@ function normalizeLayer(layer) {
     if (layer.name) {
         normalized.name = layer.name;
     }
-    const transform = layer.transform ?? defaultTransform;
-    const transformNormalized = normalizeTransform(transform);
+    const transformNormalized = normalizeTransform(layer.transform);
     if (Object.keys(transformNormalized).length > 0) {
         normalized.transform = transformNormalized;
     }
-    if ((layer.opacity ?? defaultLayer.opacity) !== defaultLayer.opacity) {
-        normalized.opacity = layer.opacity ?? defaultLayer.opacity;
+    if (layer.opacity !== defaultLayer.opacity) {
+        normalized.opacity = layer.opacity;
     }
-    if ((layer.visible ?? defaultLayer.visible) !== defaultLayer.visible) {
-        normalized.visible = layer.visible ?? defaultLayer.visible;
+    if (layer.visible !== defaultLayer.visible) {
+        normalized.visible = layer.visible;
     }
     if (layer.effects.length > 0) {
         const effectsNormalized = layer.effects
@@ -160,12 +143,11 @@ function normalizeLayer(layer) {
     return normalized;
 }
 function normalizeComposition(composition) {
-    const normalized = {};
-    normalized.width = composition.width;
-    normalized.height = composition.height;
-    if (composition.layers.length > 0) {
-        normalized.layers = composition.layers.map(normalizeLayer);
-    }
+    const normalized = {
+        width: composition.width,
+        height: composition.height,
+        layers: composition.layers.length > 0 ? composition.layers.map(normalizeLayer) : []
+    };
     if (composition.effects && composition.effects.length > 0) {
         normalized.effects = composition.effects;
     }
@@ -177,13 +159,20 @@ function normalizeView(view) {
 export function normalizeMockup(mockup, clean = false) {
     const normalized = {
         id: mockup.id,
-        name: mockup.name
+        name: mockup.name,
+        canvasSize: {
+            width: mockup.canvasSize.width,
+            height: mockup.canvasSize.height
+        }
     };
     if (mockup.composition) {
         const compNormalized = normalizeComposition(mockup.composition);
-        if (Object.keys(compNormalized).length > 0) {
-            normalized.composition = compNormalized;
-        }
+        normalized.composition = {
+            width: compNormalized.width,
+            height: compNormalized.height,
+            layers: compNormalized.layers,
+            effects: compNormalized.effects || []
+        };
     }
     if (mockup.view) {
         const viewNormalized = normalizeView(mockup.view);
@@ -216,28 +205,6 @@ function mergeDefaults(obj, defaults) {
     }
     return result;
 }
-function mergeDefaultsExcluding(obj, defaults, excludeKeys) {
-    const result = { ...defaults };
-    for (const key in obj) {
-        if (obj.hasOwnProperty(key)) {
-            if (excludeKeys.includes(key)) {
-                result[key] = obj[key];
-            }
-            else if (typeof obj[key] === 'object' && obj[key] !== null && !Array.isArray(obj[key])) {
-                result[key] = mergeDefaults(obj[key], defaults[key]);
-            }
-            else {
-                result[key] = obj[key];
-            }
-        }
-    }
-    for (const key of excludeKeys) {
-        if (!obj.hasOwnProperty(key)) {
-            result[key] = undefined;
-        }
-    }
-    return result;
-}
 function denormalizeTransform(transform) {
     return mergeDefaults(transform, defaultTransform);
 }
@@ -245,48 +212,25 @@ function denormalizeRestyleEffect(effect) {
     return mergeDefaults(effect, defaultRestyleEffect);
 }
 function denormalizeResizeEffect(effect) {
-    if (effect.width === undefined || effect.height === undefined) {
-        throw new Error('ResizeEffect requires explicit width and height (px sizing cannot use defaults)');
-    }
-    return mergeDefaultsExcluding(effect, defaultResizeEffect, [
-        ...PX_SIZING_KEYS.resize,
-        'debug'
-    ]);
+    return mergeDefaults(effect, defaultResizeEffect);
 }
 function denormalizePositionEffect(effect) {
-    if (effect.containerWidth === undefined ||
-        effect.containerHeight === undefined) {
-        throw new Error('PositionEffect requires explicit containerWidth and containerHeight (px sizing cannot use defaults)');
-    }
-    return mergeDefaultsExcluding(effect, defaultPositionEffect, [
-        ...PX_SIZING_KEYS.position,
-        'debug'
-    ]);
+    return mergeDefaults(effect, defaultPositionEffect);
 }
 function denormalizeSvgEffect(effect) {
-    return mergeDefaultsExcluding(effect, defaultSvgEffect, [
-        'strokeWidth',
-        'strokeColor',
-        'fillColor'
-    ]);
+    return mergeDefaults(effect, defaultSvgEffect);
 }
 function denormalizeWarpEffect(effect) {
     const denormalized = mergeDefaults(effect, defaultWarpEffect);
     const shape = denormalized.shape || 'none';
-    if (shape === 'cylinder') {
-        if (!effect.cylinder || effect.cylinder.diameter === undefined) {
-            throw new Error('WarpEffect cylinder shape requires explicit cylinder.diameter (px sizing cannot use defaults)');
-        }
-        denormalized.cylinder = mergeDefaultsExcluding(effect.cylinder, defaultCylinderWarp, PX_SIZING_KEYS.cylinder);
+    if (shape === 'cylinder' && !denormalized.cylinder) {
+        denormalized.cylinder = { ...defaultCylinderWarp };
     }
-    else if (shape === 'plane' && !denormalized.plane) {
+    if (shape === 'plane' && !denormalized.plane) {
         denormalized.plane = { ...defaultPlaneWarp };
     }
-    else if (shape === 'sphere') {
-        if (!effect.sphere || effect.sphere.radius === undefined) {
-            throw new Error('WarpEffect sphere shape requires explicit sphere.radius (px sizing cannot use defaults)');
-        }
-        denormalized.sphere = mergeDefaultsExcluding(effect.sphere, defaultSphereWarp, PX_SIZING_KEYS.sphere);
+    if (shape === 'sphere' && !denormalized.sphere) {
+        denormalized.sphere = { ...defaultSphereWarp };
     }
     if (!denormalized.image) {
         denormalized.image = { ...defaultImageOnSurface };
@@ -324,12 +268,9 @@ function denormalizeLayer(layer) {
     return denormalized;
 }
 function denormalizeComposition(composition) {
-    if (composition.width === undefined || composition.height === undefined) {
-        throw new Error('Composition requires explicit width and height (px sizing cannot use defaults)');
-    }
     return {
-        width: composition.width,
-        height: composition.height,
+        width: composition.width ?? defaultComposition.width,
+        height: composition.height ?? defaultComposition.height,
         layers: (composition.layers || []).map(denormalizeLayer),
         effects: composition.effects || []
     };
@@ -338,11 +279,13 @@ function denormalizeView(view) {
     return mergeDefaults(view, defaultView);
 }
 export function denormalizeMockup(mockup) {
+    const composition = denormalizeComposition(mockup.composition || {});
     return {
         id: mockup.id || crypto.randomUUID(),
         name: mockup.name || 'Untitled Mockup',
         canvasSize: mockup.canvasSize || DEFAULT_CANVAS_SIZE,
-        composition: denormalizeComposition(mockup.composition || {}),
+        layers: composition.layers,
+        composition: composition,
         view: denormalizeView(mockup.view || {}),
         createdAt: mockup.createdAt || Date.now(),
         updatedAt: mockup.updatedAt || Date.now()

package/dist/renderMockupCanvas.js

@@ -1,4 +1,3 @@
-import { defaultTransform } from './types';
 import { applyWarp, processLayerImage } from './image-transformations';
 import { processSvg, verifySvgSource } from './image-transformations/svg';
 import { RenderScheduler } from './RenderScheduler';
@@ -90,8 +89,7 @@ export function renderMockupCanvas(canvasEl, config, overrides = {}, onRenderTim
             const warpKey = warpEffect ? `${warpEffect.enabled}:${warpEffect.shape}` : 'none';
             const restyleKey = restyleEffect ? JSON.stringify(restyleEffect) : 'none';
             const svgKey = svgEffect ? JSON.stringify(svgEffect) : 'none';
-            const t = l.transform ?? defaultTransform;
-            return `${l.id}:${t.x},${t.y},${t.scale},${t.rotation},${l.opacity ?? 1},${l.visible ?? true}:${warpKey}:${restyleKey}:${svgKey}`;
+            return `${l.id}:${l.transform.x},${l.transform.y},${l.transform.scale ?? 1},${l.transform.rotation ?? 0},${l.opacity},${l.visible}:${warpKey}:${restyleKey}:${svgKey}`;
         })
             .join('|');
         if (canvasEl.width !== canvas.width || canvasEl.height !== canvas.height) {
@@ -304,7 +302,7 @@ export function renderMockupCanvas(canvasEl, config, overrides = {}, onRenderTim
         const processedImages = [];
         let hasInvalidBitmaps = false;
         for (const layer of canvas.layers) {
-            if (layer.visible === false)
+            if (!layer.visible)
                 continue;
             const cacheKey = getCacheKey(layer);
             const img = state.loadedImages.get(cacheKey);
@@ -319,9 +317,8 @@ export function renderMockupCanvas(canvasEl, config, overrides = {}, onRenderTim
             const warpEffect = layer.effects.find((e) => e.type === 'warp');
             let displayWidth = processed.width;
             let displayHeight = processed.height;
-            const t = layer.transform ?? defaultTransform;
-            const scaledWidth = displayWidth * t.scale;
-            const scaledHeight = displayHeight * t.scale;
+            const scaledWidth = displayWidth * (layer.transform.scale ?? 1);
+            const scaledHeight = displayHeight * (layer.transform.scale ?? 1);
             let processedBitmap;
             if (processed.image instanceof ImageBitmap) {
                 processedBitmap = processed.image;
@@ -350,14 +347,14 @@ export function renderMockupCanvas(canvasEl, config, overrides = {}, onRenderTim
             } : null;
             layers.push({
                 id: String(layer.id),
-                x: Number(t.x),
-                y: Number(t.y),
+                x: Number(layer.transform.x),
+                y: Number(layer.transform.y),
                 offsetX: Number(processed.offsetX),
                 offsetY: Number(processed.offsetY),
                 width: Number(scaledWidth),
                 height: Number(scaledHeight),
-                rotation: Number(t.rotation),
-                opacity: Number(layer.opacity ?? 1),
+                rotation: Number(layer.transform.rotation ?? 0),
+                opacity: Number(layer.opacity),
                 warp,
                 position
             });
@@ -392,7 +389,7 @@ export function renderMockupCanvas(canvasEl, config, overrides = {}, onRenderTim
         state.ctx.fillRect(0, 0, canvas.width, canvas.height);
         const layerTimes = [];
         for (const layer of canvas.layers) {
-            if (layer.visible === false)
+            if (!layer.visible)
                 continue;
             const layerStartTime = performance.now();
             const cacheKey = getCacheKey(layer);
@@ -409,10 +406,9 @@ export function renderMockupCanvas(canvasEl, config, overrides = {}, onRenderTim
             let displayWidth = processed.width;
             let displayHeight = processed.height;
             state.ctx.save();
-            const t = layer.transform ?? defaultTransform;
-            state.ctx.globalAlpha = layer.opacity ?? 1;
-            const scaledWidth = displayWidth * t.scale;
-            const scaledHeight = displayHeight * t.scale;
+            state.ctx.globalAlpha = layer.opacity;
+            const scaledWidth = displayWidth * (layer.transform.scale ?? 1);
+            const scaledHeight = displayHeight * (layer.transform.scale ?? 1);
             // Calculate image top-left position (centered on canvas by default)
             let imgLeft = (canvas.width - scaledWidth) / 2;
             let imgTop = (canvas.height - scaledHeight) / 2;
@@ -424,13 +420,13 @@ export function renderMockupCanvas(canvasEl, config, overrides = {}, onRenderTim
                 imgTop = containerTop + processed.offsetY;
             }
             // Apply layer transform offset
-            imgLeft += t.x;
-            imgTop += t.y;
+            imgLeft += layer.transform.x;
+            imgTop += layer.transform.y;
             // Calculate center point for rotation
             const centerX = imgLeft + scaledWidth / 2;
             const centerY = imgTop + scaledHeight / 2;
             state.ctx.translate(centerX, centerY);
-            state.ctx.rotate((t.rotation * Math.PI) / 180);
+            state.ctx.rotate(((layer.transform.rotation ?? 0) * Math.PI) / 180);
             try {
                 if (warpEffect && warpEffect.enabled && warpEffect.shape !== 'none') {
                     applyWarp(state.ctx, processed.image, 0, 0, scaledWidth, scaledHeight, warpEffect);

package/dist/types.d.ts

@@ -1,18 +1,18 @@
 export interface LayerTransform {
-    x: number;
-    y: number;
-    scale: number;
-    rotation: number;
+    x?: number;
+    y?: number;
+    scale?: number;
+    rotation?: number;
 }
 import type { LayerEffect, CanvasEffect } from './image-transformations/types';
 export interface Layer {
     id: string;
     src: string;
     name?: string;
-    transform?: LayerTransform;
+    transform: LayerTransform;
     opacity?: number;
     visible?: boolean;
-    effects: LayerEffect[];
+    effects?: LayerEffect[];
 }
 export interface CanvasSize {
     width: number;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svelte-product-mockup",
-	"version": "1.0.9",
+	"version": "1.0.11",
 	"type": "module",
 	"main": "./dist/index.js",
 	"module": "./dist/index.js",
@@ -30,7 +30,7 @@
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"prepublishOnly": "pnpm run build:package",
-		"publish": "bash -c 'set -a && [ -f ../.env ] && . ../.env; set +a && npm config set //registry.npmjs.org/:_authToken $NPM_TOKEN && npm publish'"
+		"publish": "sh -c 'set -a && . ../.env && set +a && npm publish'"
 	},
 	"peerDependencies": {
 		"svelte": "^5.0.0"

package/src/lib/components/LayerControls.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import type { Layer, LayerTransform } from '$lib/types';
-	import { defaultTransform } from '$lib/types';
 	import type { ResizeEffect, PositionEffect, WarpEffect, RestyleEffect, SvgEffect } from '$lib/image-transformations/types';
 	import { defaultRestyleEffect } from '$lib/image-transformations/types';
 	import { verifySvgSource } from '$lib/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/src/lib/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/src/lib/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/src/lib/image-transformations/warp/types.ts

@@ -44,8 +44,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/src/lib/mockup-normalize.ts

@@ -58,28 +58,6 @@ function omitDefaults<T extends Record<string, any>>(obj: T, defaults: Partial<T
 	return result;
 }
 
-function omitDefaultsAlwaysInclude<T extends Record<string, any>>(
-	obj: T,
-	defaults: Partial<T>,
-	alwaysInclude: (keyof T)[]
-): Partial<T> {
-	const result = omitDefaults(obj, defaults);
-	for (const key of alwaysInclude) {
-		if (obj.hasOwnProperty(key)) {
-			result[key] = obj[key];
-		}
-	}
-	return result;
-}
-
-const PX_SIZING_KEYS = {
-	resize: ['width', 'height'] as const,
-	position: ['containerWidth', 'containerHeight'] as const,
-	composition: ['width', 'height'] as const,
-	cylinder: ['diameter'] as const,
-	sphere: ['radius'] as const
-};
-
 function normalizeTransform(transform: LayerTransform): Partial<LayerTransform> {
 	return omitDefaults(transform, defaultTransform);
 }
@@ -90,12 +68,12 @@ function normalizeRestyleEffect(effect: RestyleEffect): Partial<RestyleEffect> {
 }
 
 function normalizeResizeEffect(effect: ResizeEffect): Partial<ResizeEffect> {
-	const normalized = omitDefaultsAlwaysInclude(effect, defaultResizeEffect, PX_SIZING_KEYS.resize);
+	const normalized = omitDefaults(effect, defaultResizeEffect);
 	return { type: 'resize', ...normalized };
 }
 
 function normalizePositionEffect(effect: PositionEffect): Partial<PositionEffect> {
-	const normalized = omitDefaultsAlwaysInclude(effect, defaultPositionEffect, PX_SIZING_KEYS.position);
+	const normalized = omitDefaults(effect, defaultPositionEffect);
 	return { type: 'position', ...normalized };
 }
 
@@ -137,28 +115,20 @@ function normalizeWarpEffect(effect: WarpEffect): Partial<WarpEffect> | null {
 	const shape = effect.shape || 'none';
 	if (shape !== 'none') {
 		if (shape === 'cylinder' && effect.cylinder) {
-			const cylinderNormalized = omitDefaultsAlwaysInclude(
-				effect.cylinder,
-				defaultCylinderWarp,
-				PX_SIZING_KEYS.cylinder
-			);
-			if (Object.keys(cylinderNormalized).length > 0) {
-				normalized.cylinder = cylinderNormalized as typeof effect.cylinder;
-			}
+			const cylinderNormalized = omitDefaults(effect.cylinder, defaultCylinderWarp);
+			// diameter is required - always include it
+			cylinderNormalized.diameter = effect.cylinder.diameter;
+			normalized.cylinder = cylinderNormalized as typeof effect.cylinder;
 		} else if (shape === 'plane' && effect.plane) {
 			const planeNormalized = omitDefaults(effect.plane, defaultPlaneWarp);
 			if (Object.keys(planeNormalized).length > 0) {
 				normalized.plane = planeNormalized as typeof effect.plane;
 			}
 		} else if (shape === 'sphere' && effect.sphere) {
-			const sphereNormalized = omitDefaultsAlwaysInclude(
-				effect.sphere,
-				defaultSphereWarp,
-				PX_SIZING_KEYS.sphere
-			);
-			if (Object.keys(sphereNormalized).length > 0) {
-				normalized.sphere = sphereNormalized as typeof effect.sphere;
-			}
+			const sphereNormalized = omitDefaults(effect.sphere, defaultSphereWarp);
+			// radius is required - always include it
+			sphereNormalized.radius = effect.sphere.radius;
+			normalized.sphere = sphereNormalized as typeof effect.sphere;
 		}
 	}
 
@@ -196,18 +166,17 @@ function normalizeLayer(layer: Layer): Partial<Layer> {
 		normalized.name = layer.name;
 	}
 
-	const transform = layer.transform ?? defaultTransform;
-	const transformNormalized = normalizeTransform(transform);
+	const transformNormalized = normalizeTransform(layer.transform);
 	if (Object.keys(transformNormalized).length > 0) {
 		normalized.transform = transformNormalized as LayerTransform;
 	}
 
-	if ((layer.opacity ?? defaultLayer.opacity) !== defaultLayer.opacity) {
-		normalized.opacity = layer.opacity ?? defaultLayer.opacity;
+	if (layer.opacity !== defaultLayer.opacity) {
+		normalized.opacity = layer.opacity;
 	}
 
-	if ((layer.visible ?? defaultLayer.visible) !== defaultLayer.visible) {
-		normalized.visible = layer.visible ?? defaultLayer.visible;
+	if (layer.visible !== defaultLayer.visible) {
+		normalized.visible = layer.visible;
 	}
 
 	if (layer.effects.length > 0) {
@@ -215,22 +184,19 @@ function normalizeLayer(layer: Layer): Partial<Layer> {
 			.map(normalizeLayerEffect)
 			.filter((e): e is Partial<LayerEffect> => e !== null);
 		if (effectsNormalized.length > 0) {
-			normalized.effects = effectsNormalized as LayerEffect[];
+			normalized.effects = effectsNormalized as any;
 		}
 	}
 
 	return normalized;
 }
 
-function normalizeComposition(composition: Composition): Partial<Composition> {
-	const normalized: Partial<Composition> = {};
-
-	normalized.width = composition.width;
-	normalized.height = composition.height;
-
-	if (composition.layers.length > 0) {
-		normalized.layers = composition.layers.map(normalizeLayer);
-	}
+function normalizeComposition(composition: Composition): Partial<Composition> & { width: number; height: number; layers: Layer[] } {
+	const normalized: Partial<Composition> & { width: number; height: number; layers: Layer[] } = {
+		width: composition.width,
+		height: composition.height,
+		layers: composition.layers.length > 0 ? composition.layers.map(normalizeLayer) as Layer[] : []
+	};
 
 	if (composition.effects && composition.effects.length > 0) {
 		normalized.effects = composition.effects;
@@ -246,14 +212,21 @@ function normalizeView(view: ViewSettings): Partial<ViewSettings> {
 export function normalizeMockup(mockup: Mockup, clean: boolean = false): Partial<Mockup> {
 	const normalized: Partial<Mockup> = {
 		id: mockup.id,
-		name: mockup.name
+		name: mockup.name,
+		canvasSize: {
+			width: mockup.canvasSize.width,
+			height: mockup.canvasSize.height
+		}
 	};
 
 	if (mockup.composition) {
 		const compNormalized = normalizeComposition(mockup.composition);
-		if (Object.keys(compNormalized).length > 0) {
-			normalized.composition = compNormalized as Composition;
-		}
+		normalized.composition = {
+			width: compNormalized.width,
+			height: compNormalized.height,
+			layers: compNormalized.layers,
+			effects: compNormalized.effects || []
+		};
 	}
 
 	if (mockup.view) {
@@ -290,31 +263,6 @@ function mergeDefaults<T extends Record<string, any>>(obj: Partial<T>, defaults:
 	return result;
 }
 
-function mergeDefaultsExcluding<T extends Record<string, any>>(
-	obj: Partial<T>,
-	defaults: T,
-	excludeKeys: (keyof T)[]
-): T {
-	const result = { ...defaults };
-	for (const key in obj) {
-		if (obj.hasOwnProperty(key)) {
-			if (excludeKeys.includes(key)) {
-				result[key] = obj[key] as T[Extract<keyof T, string>];
-			} else if (typeof obj[key] === 'object' && obj[key] !== null && !Array.isArray(obj[key])) {
-				result[key] = mergeDefaults(obj[key] as Partial<T[Extract<keyof T, string>]>, defaults[key]);
-			} else {
-				result[key] = obj[key] as T[Extract<keyof T, string>];
-			}
-		}
-	}
-	for (const key of excludeKeys) {
-		if (!obj.hasOwnProperty(key)) {
-			(result as Record<string, unknown>)[key] = undefined;
-		}
-	}
-	return result;
-}
-
 function denormalizeTransform(transform: Partial<LayerTransform>): LayerTransform {
 	return mergeDefaults(transform, defaultTransform);
 }
@@ -324,62 +272,29 @@ function denormalizeRestyleEffect(effect: Partial<RestyleEffect>): RestyleEffect
 }
 
 function denormalizeResizeEffect(effect: Partial<ResizeEffect>): ResizeEffect {
-	if (effect.width === undefined || effect.height === undefined) {
-		throw new Error('ResizeEffect requires explicit width and height (px sizing cannot use defaults)');
-	}
-	return mergeDefaultsExcluding(effect, defaultResizeEffect, [
-		...PX_SIZING_KEYS.resize,
-		'debug'
-	]);
+	return mergeDefaults(effect, defaultResizeEffect);
 }
 
 function denormalizePositionEffect(effect: Partial<PositionEffect>): PositionEffect {
-	if (
-		effect.containerWidth === undefined ||
-		effect.containerHeight === undefined
-	) {
-		throw new Error(
-			'PositionEffect requires explicit containerWidth and containerHeight (px sizing cannot use defaults)'
-		);
-	}
-	return mergeDefaultsExcluding(effect, defaultPositionEffect, [
-		...PX_SIZING_KEYS.position,
-		'debug'
-	]);
+	return mergeDefaults(effect, defaultPositionEffect);
 }
 
 function denormalizeSvgEffect(effect: Partial<SvgEffect>): SvgEffect {
-	return mergeDefaultsExcluding(effect, defaultSvgEffect, [
-		'strokeWidth',
-		'strokeColor',
-		'fillColor'
-	]);
+	return mergeDefaults(effect, defaultSvgEffect);
 }
 
 function denormalizeWarpEffect(effect: Partial<WarpEffect>): WarpEffect {
 	const denormalized = mergeDefaults(effect, defaultWarpEffect);
+	
 	const shape = denormalized.shape || 'none';
-
-	if (shape === 'cylinder') {
-		if (!effect.cylinder || effect.cylinder.diameter === undefined) {
-			throw new Error('WarpEffect cylinder shape requires explicit cylinder.diameter (px sizing cannot use defaults)');
-		}
-		denormalized.cylinder = mergeDefaultsExcluding(
-			effect.cylinder,
-			defaultCylinderWarp,
-			PX_SIZING_KEYS.cylinder
-		);
-	} else if (shape === 'plane' && !denormalized.plane) {
+	if (shape === 'cylinder' && !denormalized.cylinder) {
+		denormalized.cylinder = { ...defaultCylinderWarp };
+	}
+	if (shape === 'plane' && !denormalized.plane) {
 		denormalized.plane = { ...defaultPlaneWarp };
-	} else if (shape === 'sphere') {
-		if (!effect.sphere || effect.sphere.radius === undefined) {
-			throw new Error('WarpEffect sphere shape requires explicit sphere.radius (px sizing cannot use defaults)');
-		}
-		denormalized.sphere = mergeDefaultsExcluding(
-			effect.sphere,
-			defaultSphereWarp,
-			PX_SIZING_KEYS.sphere
-		);
+	}
+	if (shape === 'sphere' && !denormalized.sphere) {
+		denormalized.sphere = { ...defaultSphereWarp };
 	}
 	if (!denormalized.image) {
 		denormalized.image = { ...defaultImageOnSurface };
@@ -423,12 +338,9 @@ function denormalizeLayer(layer: Partial<Layer>): Layer {
 }
 
 function denormalizeComposition(composition: Partial<Composition>): Composition {
-	if (composition.width === undefined || composition.height === undefined) {
-		throw new Error('Composition requires explicit width and height (px sizing cannot use defaults)');
-	}
 	return {
-		width: composition.width,
-		height: composition.height,
+		width: composition.width ?? defaultComposition.width,
+		height: composition.height ?? defaultComposition.height,
 		layers: (composition.layers || []).map(denormalizeLayer),
 		effects: composition.effects || []
 	};
@@ -439,11 +351,13 @@ function denormalizeView(view: Partial<ViewSettings>): ViewSettings {
 }
 
 export function denormalizeMockup(mockup: Partial<Mockup>): Mockup {
+	const composition = denormalizeComposition(mockup.composition || {});
 	return {
 		id: mockup.id || crypto.randomUUID(),
 		name: mockup.name || 'Untitled Mockup',
 		canvasSize: mockup.canvasSize || DEFAULT_CANVAS_SIZE,
-		composition: denormalizeComposition(mockup.composition || {}),
+		layers: composition.layers,
+		composition: composition,
 		view: denormalizeView(mockup.view || {}),
 		createdAt: mockup.createdAt || Date.now(),
 		updatedAt: mockup.updatedAt || Date.now()

package/src/lib/renderMockupCanvas.ts

@@ -1,5 +1,4 @@
 import type { Composition, Layer } from '$lib/types';
-import { defaultTransform } from '$lib/types';
 import { applyWarp, processLayerImage } from '$lib/image-transformations';
 import type { WarpEffect, RestyleEffect, SvgEffect, PositionEffect } from '$lib/image-transformations/types';
 import { processSvg, verifySvgSource } from '$lib/image-transformations/svg';
@@ -120,8 +119,7 @@ export function renderMockupCanvas(
 				const warpKey = warpEffect ? `${warpEffect.enabled}:${warpEffect.shape}` : 'none';
 				const restyleKey = restyleEffect ? JSON.stringify(restyleEffect) : 'none';
 				const svgKey = svgEffect ? JSON.stringify(svgEffect) : 'none';
-				const t = l.transform ?? defaultTransform;
-				return `${l.id}:${t.x},${t.y},${t.scale},${t.rotation},${l.opacity ?? 1},${l.visible ?? true}:${warpKey}:${restyleKey}:${svgKey}`;
+				return `${l.id}:${l.transform.x},${l.transform.y},${l.transform.scale ?? 1},${l.transform.rotation ?? 0},${l.opacity},${l.visible}:${warpKey}:${restyleKey}:${svgKey}`;
 			})
 			.join('|');
 
@@ -343,7 +341,7 @@ export function renderMockupCanvas(
 		let hasInvalidBitmaps = false;
 
 		for (const layer of canvas.layers) {
-			if (layer.visible === false) continue;
+			if (!layer.visible) continue;
 
 			const cacheKey = getCacheKey(layer);
 			const img = state.loadedImages.get(cacheKey);
@@ -360,9 +358,8 @@ export function renderMockupCanvas(
 			let displayWidth = processed.width;
 			let displayHeight = processed.height;
 
-			const t = layer.transform ?? defaultTransform;
-			const scaledWidth = displayWidth * t.scale;
-			const scaledHeight = displayHeight * t.scale;
+			const scaledWidth = displayWidth * (layer.transform.scale ?? 1);
+			const scaledHeight = displayHeight * (layer.transform.scale ?? 1);
 
 			let processedBitmap: ImageBitmap;
 			if (processed.image instanceof ImageBitmap) {
@@ -393,14 +390,14 @@ export function renderMockupCanvas(
 
 			layers.push({
 				id: String(layer.id),
-				x: Number(t.x),
-				y: Number(t.y),
+				x: Number(layer.transform.x),
+				y: Number(layer.transform.y),
 				offsetX: Number(processed.offsetX),
 				offsetY: Number(processed.offsetY),
 				width: Number(scaledWidth),
 				height: Number(scaledHeight),
-				rotation: Number(t.rotation),
-				opacity: Number(layer.opacity ?? 1),
+				rotation: Number(layer.transform.rotation ?? 0),
+				opacity: Number(layer.opacity),
 				warp,
 				position
 			});
@@ -441,7 +438,7 @@ export function renderMockupCanvas(
 
 		const layerTimes: number[] = [];
 		for (const layer of canvas.layers) {
-			if (layer.visible === false) continue;
+			if (!layer.visible) continue;
 
 			const layerStartTime = performance.now();
 			const cacheKey = getCacheKey(layer);
@@ -460,11 +457,10 @@ export function renderMockupCanvas(
 			let displayHeight = processed.height;
 
 			state.ctx.save();
-			const t = layer.transform ?? defaultTransform;
-			state.ctx.globalAlpha = layer.opacity ?? 1;
+			state.ctx.globalAlpha = layer.opacity;
 
-			const scaledWidth = displayWidth * t.scale;
-			const scaledHeight = displayHeight * t.scale;
+			const scaledWidth = displayWidth * (layer.transform.scale ?? 1);
+			const scaledHeight = displayHeight * (layer.transform.scale ?? 1);
 
 			// Calculate image top-left position (centered on canvas by default)
 			let imgLeft = (canvas.width - scaledWidth) / 2;
@@ -479,15 +475,15 @@ export function renderMockupCanvas(
 			}
 
 			// Apply layer transform offset
-			imgLeft += t.x;
-			imgTop += t.y;
+			imgLeft += layer.transform.x;
+			imgTop += layer.transform.y;
 
 			// Calculate center point for rotation
 			const centerX = imgLeft + scaledWidth / 2;
 			const centerY = imgTop + scaledHeight / 2;
 
 			state.ctx.translate(centerX, centerY);
-			state.ctx.rotate((t.rotation * Math.PI) / 180);
+			state.ctx.rotate(((layer.transform.rotation ?? 0) * Math.PI) / 180);
 
 			try {
 				if (warpEffect && warpEffect.enabled && warpEffect.shape !== 'none') {

package/src/lib/types.ts

@@ -1,8 +1,8 @@
 export interface LayerTransform {
-	x: number;
-	y: number;
-	scale: number;
-	rotation: number;
+	x?: number;
+	y?: number;
+	scale?: number;
+	rotation?: number;
 }
 
 import type { LayerEffect, CanvasEffect } from './image-transformations/types';
@@ -11,10 +11,10 @@ export interface Layer {
 	id: string;
 	src: string;
 	name?: string;
-	transform?: LayerTransform;
+	transform: LayerTransform;
 	opacity?: number;
 	visible?: boolean;
-	effects: LayerEffect[];
+	effects?: LayerEffect[];
 }
 
 export interface CanvasSize {

package/src/routes/test/+page.svelte

@@ -309,11 +309,13 @@
 					<div class="render-output">
 						<h3>Contain (400×300)</h3>
 						<div class="render-container" style="width: 400px; height: 300px;">
+							{#key selectedMockup.id}
 							<MockupRenderer
 								mockup={selectedMockup}
 								imageOverrides={imageOverrides}
 								objectFit="contain"
 							/>
+							{/key}
 						</div>
 					</div>
 					<!-- <div class="render-output">