diff --git a/package.json b/package.json index 0bc592f..40a4ae6 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "svelte": "^5.51.0", "svelte-check": "^4.4.2", "tailwindcss": "^4.1.18", + "tw-animate-css": "^1.4.0", "typescript": "^5.9.3", "typescript-eslint": "^8.54.0", "vite": "^7.3.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5549b1d..a7b9ce4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -81,6 +81,9 @@ importers: tailwindcss: specifier: ^4.1.18 version: 4.2.1 + tw-animate-css: + specifier: ^1.4.0 + version: 1.4.0 typescript: specifier: ^5.9.3 version: 5.9.3 @@ -1720,6 +1723,9 @@ packages: tslib@2.8.1: resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==} + tw-animate-css@1.4.0: + resolution: {integrity: sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ==} + type-check@0.4.0: resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==} engines: {node: '>= 0.8.0'} @@ -3212,6 +3218,8 @@ snapshots: tslib@2.8.1: {} + tw-animate-css@1.4.0: {} + type-check@0.4.0: dependencies: prelude-ls: 1.2.1 diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte index 7416bc0..f8f682d 100644 --- a/src/lib/components/Button.svelte +++ b/src/lib/components/Button.svelte @@ -4,17 +4,27 @@ type Props = ComponentProps & { label?: string; + variant?: 'filled' | 'outlined'; }; - let { label, children, class: className = '', ...restProps }: Props = $props(); + let { + label, + children, + variant = 'filled', + class: className = '', + ...restProps + }: Props = $props(); {#if children} diff --git a/src/lib/contexts/store.svelte.ts b/src/lib/contexts/store.svelte.ts index 043e5fd..339360a 100644 --- a/src/lib/contexts/store.svelte.ts +++ b/src/lib/contexts/store.svelte.ts @@ -1,5 +1,5 @@ // lib/stores/mockup.svelte.ts - +import deepHorizon from '$lib/assets/deep_horizon.webp'; const STORE_KEY = 'mockup-store'; // ── tiny IndexedDB helpers (no deps) @@ -34,10 +34,8 @@ async function idbSet(key: string, value: string): Promise { class MockupStore { uploadedImage = $state(null); backgroundColor = $state('#FF6B6B'); - backgroundType = $state<'solid' | 'gradient' | 'pattern'>('pattern'); - backgroundImage = $state('/assets/deep_horizon.webp'); - gradientColors = $state(['#667eea', '#764ba2']); - gradientDirection = $state('to-br'); + backgroundType = $state<'solid'>('solid'); + backgroundImage = $state(deepHorizon); aspectRatio = $state('16:9'); fixedMargin = $state(false); devicePosition = $state({ x: 0, y: 0, scale: 1, rotation: 0 }); @@ -62,7 +60,7 @@ class MockupStore { this.backgroundColor = v; this.#save(); } - setBackgroundType(v: 'solid' | 'gradient' | 'pattern') { + setBackgroundType(v: 'solid') { this.backgroundType = v; this.#save(); } @@ -70,14 +68,6 @@ class MockupStore { this.backgroundImage = v; this.#save(); } - setGradientColors(v: string[]) { - this.gradientColors = v; - this.#save(); - } - setGradientDirection(v: string) { - this.gradientDirection = v; - this.#save(); - } setAspectRatio(v: string) { this.aspectRatio = v; this.#save(); @@ -126,8 +116,6 @@ class MockupStore { backgroundColor: this.backgroundColor, backgroundType: this.backgroundType, backgroundImage: this.backgroundImage, - gradientColors: this.gradientColors, - gradientDirection: this.gradientDirection, aspectRatio: this.aspectRatio, fixedMargin: this.fixedMargin, devicePosition: this.devicePosition, @@ -152,8 +140,6 @@ class MockupStore { if (s.backgroundColor !== undefined) this.backgroundColor = s.backgroundColor; if (s.backgroundType !== undefined) this.backgroundType = s.backgroundType; if (s.backgroundImage !== undefined) this.backgroundImage = s.backgroundImage; - if (s.gradientColors !== undefined) this.gradientColors = s.gradientColors; - if (s.gradientDirection !== undefined) this.gradientDirection = s.gradientDirection; if (s.aspectRatio !== undefined) this.aspectRatio = s.aspectRatio; if (s.fixedMargin !== undefined) this.fixedMargin = s.fixedMargin; if (s.devicePosition !== undefined) diff --git a/src/lib/editor/Backgrounds.svelte b/src/lib/editor/Backgrounds.svelte index 2736e47..67f8341 100644 --- a/src/lib/editor/Backgrounds.svelte +++ b/src/lib/editor/Backgrounds.svelte @@ -1,11 +1,12 @@ - {#snippet gradientGrid()}

Background Gradients

- + {#each [...mockupStore.customBackgrounds, ...gradientPresets] as gradient, i (gradient.name + i)}
{/snippet} - + - + (isSheetOpen = false)} /> @@ -215,18 +205,18 @@ - -