svelte-product-mockup 1.0.11 → 1.0.12

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/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;

package/dist/mockup-normalize.js

@@ -157,12 +157,13 @@ function normalizeView(view) {
     return omitDefaults(view, defaultView);
 }
 export function normalizeMockup(mockup, clean = false) {
+    const canvasSize = mockup.canvasSize || DEFAULT_CANVAS_SIZE;
     const normalized = {
         id: mockup.id,
         name: mockup.name,
         canvasSize: {
-            width: mockup.canvasSize.width,
-            height: mockup.canvasSize.height
+            width: canvasSize.width,
+            height: canvasSize.height
         }
     };
     if (mockup.composition) {
@@ -279,11 +280,17 @@ function denormalizeView(view) {
     return mergeDefaults(view, defaultView);
 }
 export function denormalizeMockup(mockup) {
-    const composition = denormalizeComposition(mockup.composition || {});
+    const canvasSize = mockup.canvasSize || DEFAULT_CANVAS_SIZE;
+    const compositionInput = mockup.composition || {};
+    const composition = denormalizeComposition({
+        ...compositionInput,
+        width: compositionInput.width ?? canvasSize.width,
+        height: compositionInput.height ?? canvasSize.height
+    });
     return {
         id: mockup.id || crypto.randomUUID(),
         name: mockup.name || 'Untitled Mockup',
-        canvasSize: mockup.canvasSize || DEFAULT_CANVAS_SIZE,
+        canvasSize: canvasSize,
         layers: composition.layers,
         composition: composition,
         view: denormalizeView(mockup.view || {}),

package/dist/types.d.ts

@@ -14,6 +14,39 @@ export interface Layer {
     visible?: boolean;
     effects?: LayerEffect[];
 }
+export type MockupLayerEffect = ({
+    type: 'restyle';
+} & Partial<Extract<LayerEffect, {
+    type: 'restyle';
+}>>) | ({
+    type: 'resize';
+    width: number;
+    height: number;
+} & Partial<Extract<LayerEffect, {
+    type: 'resize';
+}>>) | ({
+    type: 'position';
+    containerWidth: number;
+    containerHeight: number;
+} & Partial<Extract<LayerEffect, {
+    type: 'position';
+}>>) | ({
+    type: 'warp';
+    enabled: boolean;
+} & Partial<Extract<LayerEffect, {
+    type: 'warp';
+}>>) | Extract<LayerEffect, {
+    type: 'svg';
+}>;
+export interface MockupLayer {
+    id: string;
+    src: string;
+    name?: string;
+    transform?: LayerTransform;
+    opacity?: number;
+    visible?: boolean;
+    effects?: MockupLayerEffect[];
+}
 export interface CanvasSize {
     width: number;
     height: number;
@@ -25,6 +58,12 @@ export interface Composition {
     layers: Layer[];
     effects: CanvasEffect[];
 }
+export interface MockupComposition {
+    width: number;
+    height: number;
+    layers: MockupLayer[];
+    effects?: CanvasEffect[];
+}
 export interface ViewSettings {
     zoom: number;
     panX: number;
@@ -40,6 +79,26 @@ export interface Mockup {
     createdAt: number;
     updatedAt: number;
 }
+export interface MockupConfig {
+    id: string;
+    name: string;
+    canvasSize?: CanvasSize;
+    layers?: MockupLayer[];
+    composition?: MockupComposition;
+    view?: Partial<ViewSettings>;
+    createdAt?: number;
+    updatedAt?: number;
+}
+export interface DenormalizedMockup extends Mockup {
+    id: string;
+    name: string;
+    canvasSize: CanvasSize;
+    layers: Layer[];
+    composition: Composition;
+    view: ViewSettings;
+    createdAt: number;
+    updatedAt: number;
+}
 export declare const defaultTransform: LayerTransform;
 export declare const defaultLayer: Omit<Layer, 'id' | 'src'>;
 export declare const defaultView: ViewSettings;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svelte-product-mockup",
-	"version": "1.0.11",
+	"version": "1.0.12",
 	"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": "sh -c 'set -a && . ../.env && set +a && npm publish'"
+		"publish": "set -a && . ../.env && set +a && npm publish"
 	},
 	"peerDependencies": {
 		"svelte": "^5.0.0"

package/src/lib/components/MockupEditorRenderer.svelte

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

package/src/lib/components/MockupRenderer.svelte

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

package/src/lib/mockup-normalize.ts

@@ -1,4 +1,14 @@
-import type { Mockup, Layer, Composition, LayerTransform, ViewSettings } from './types';
+import type {
+	Mockup,
+	MockupConfig,
+	DenormalizedMockup,
+	Layer,
+	MockupLayer,
+	Composition,
+	MockupComposition,
+	LayerTransform,
+	ViewSettings
+} from './types';
 import {
 	defaultLayer,
 	defaultTransform,
@@ -156,8 +166,8 @@ function normalizeLayerEffect(effect: LayerEffect): Partial<LayerEffect> | null
 	}
 }
 
-function normalizeLayer(layer: Layer): Partial<Layer> {
-	const normalized: Partial<Layer> = {
+function normalizeLayer(layer: Layer): MockupLayer {
+	const normalized: MockupLayer = {
 		id: layer.id,
 		src: layer.src
 	};
@@ -191,11 +201,11 @@ function normalizeLayer(layer: Layer): Partial<Layer> {
 	return normalized;
 }
 
-function normalizeComposition(composition: Composition): Partial<Composition> & { width: number; height: number; layers: Layer[] } {
-	const normalized: Partial<Composition> & { width: number; height: number; layers: Layer[] } = {
+function normalizeComposition(composition: Composition): MockupComposition {
+	const normalized: MockupComposition = {
 		width: composition.width,
 		height: composition.height,
-		layers: composition.layers.length > 0 ? composition.layers.map(normalizeLayer) as Layer[] : []
+		layers: composition.layers.length > 0 ? composition.layers.map(normalizeLayer) : []
 	};
 
 	if (composition.effects && composition.effects.length > 0) {
@@ -209,13 +219,14 @@ function normalizeView(view: ViewSettings): Partial<ViewSettings> {
 	return omitDefaults(view, defaultView);
 }
 
-export function normalizeMockup(mockup: Mockup, clean: boolean = false): Partial<Mockup> {
-	const normalized: Partial<Mockup> = {
+export function normalizeMockup(mockup: Mockup, clean: boolean = false): Partial<MockupConfig> {
+	const canvasSize = mockup.canvasSize || DEFAULT_CANVAS_SIZE;
+	const normalized: Partial<MockupConfig> = {
 		id: mockup.id,
 		name: mockup.name,
 		canvasSize: {
-			width: mockup.canvasSize.width,
-			height: mockup.canvasSize.height
+			width: canvasSize.width,
+			height: canvasSize.height
 		}
 	};
 
@@ -320,7 +331,7 @@ function denormalizeLayerEffect(effect: Partial<LayerEffect>): LayerEffect {
 	}
 }
 
-function denormalizeLayer(layer: Partial<Layer>): Layer {
+function denormalizeLayer(layer: Partial<MockupLayer>): Layer {
 	const denormalized: Layer = {
 		id: layer.id!,
 		src: layer.src || '',
@@ -337,7 +348,7 @@ function denormalizeLayer(layer: Partial<Layer>): Layer {
 	return denormalized;
 }
 
-function denormalizeComposition(composition: Partial<Composition>): Composition {
+function denormalizeComposition(composition: Partial<MockupComposition>): Composition {
 	return {
 		width: composition.width ?? defaultComposition.width,
 		height: composition.height ?? defaultComposition.height,
@@ -350,12 +361,18 @@ function denormalizeView(view: Partial<ViewSettings>): ViewSettings {
 	return mergeDefaults(view, defaultView);
 }
 
-export function denormalizeMockup(mockup: Partial<Mockup>): Mockup {
-	const composition = denormalizeComposition(mockup.composition || {});
+export function denormalizeMockup(mockup: Partial<MockupConfig>): DenormalizedMockup {
+	const canvasSize = mockup.canvasSize || DEFAULT_CANVAS_SIZE;
+	const compositionInput = mockup.composition || {};
+	const composition = denormalizeComposition({
+		...compositionInput,
+		width: compositionInput.width ?? canvasSize.width,
+		height: compositionInput.height ?? canvasSize.height
+	});
 	return {
 		id: mockup.id || crypto.randomUUID(),
 		name: mockup.name || 'Untitled Mockup',
-		canvasSize: mockup.canvasSize || DEFAULT_CANVAS_SIZE,
+		canvasSize: canvasSize,
 		layers: composition.layers,
 		composition: composition,
 		view: denormalizeView(mockup.view || {}),

package/src/lib/types.ts

@@ -17,6 +17,23 @@ export interface Layer {
 	effects?: LayerEffect[];
 }
 
+export type MockupLayerEffect =
+	| ({ type: 'restyle' } & Partial<Extract<LayerEffect, { type: 'restyle' }>>)
+	| ({ type: 'resize'; width: number; height: number } & Partial<Extract<LayerEffect, { type: 'resize' }>>)
+	| ({ type: 'position'; containerWidth: number; containerHeight: number } & Partial<Extract<LayerEffect, { type: 'position' }>>)
+	| ({ type: 'warp'; enabled: boolean } & Partial<Extract<LayerEffect, { type: 'warp' }>>)
+	| Extract<LayerEffect, { type: 'svg' }>;
+
+export interface MockupLayer {
+	id: string;
+	src: string;
+	name?: string;
+	transform?: LayerTransform;
+	opacity?: number;
+	visible?: boolean;
+	effects?: MockupLayerEffect[];
+}
+
 export interface CanvasSize {
 	width: number;
 	height: number;
@@ -34,6 +51,13 @@ export interface Composition {
 	effects: CanvasEffect[];
 }
 
+export interface MockupComposition {
+	width: number;
+	height: number;
+	layers: MockupLayer[];
+	effects?: CanvasEffect[];
+}
+
 export interface ViewSettings {
 	zoom: number;
 	panX: number;
@@ -51,6 +75,28 @@ export interface Mockup {
 	updatedAt: number;
 }
 
+export interface MockupConfig {
+	id: string;
+	name: string;
+	canvasSize?: CanvasSize;
+	layers?: MockupLayer[];
+	composition?: MockupComposition;
+	view?: Partial<ViewSettings>;
+	createdAt?: number;
+	updatedAt?: number;
+}
+
+export interface DenormalizedMockup extends Mockup {
+	id: string;
+	name: string;
+	canvasSize: CanvasSize;
+	layers: Layer[];
+	composition: Composition;
+	view: ViewSettings;
+	createdAt: number;
+	updatedAt: number;
+}
+
 export const defaultTransform: LayerTransform = {
 	x: 0,
 	y: 0,