feat: New Image Transformation editor

package.json

@@ -24,10 +24,11 @@
         "@ai-sdk/svelte": "^1.1.24",
         "@appwrite.io/console": "https://pkg.vc/-/@appwrite/@appwrite.io/console@f21fc7f",
         "@appwrite.io/pink-icons": "0.25.0",
-        "@appwrite.io/pink-icons-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@865e2fc",
+        "@appwrite.io/pink-icons-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@957a779",
         "@appwrite.io/pink-legacy": "^1.0.3",
-        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@865e2fc",
+        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@957a779",
         "@faker-js/faker": "^9.9.0",
+        "@neodrag/svelte": "^2.3.3",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
         "@stripe/stripe-js": "^3.5.0",

src/lib/helpers/files.ts

@@ -97,6 +97,32 @@ export enum InvalidFileType {
     EXTENSION = 'invalid_extension'
 }
 
+/**
+ * Check if a file is an image based on its MIME type
+ */
+export function isImageFile(mimeType: string | null | undefined): boolean {
+    if (!mimeType) return false;
+    return mimeType.startsWith('image/');
+}
+
+/**
+ * Check if a file is larger than the specified size threshold (in bytes)
+ */
+export function isLargeFile(fileSize: number, thresholdBytes: number = 1024 * 1024): boolean {
+    return fileSize > thresholdBytes;
+}
+
+/**
+ * Check if a file is a large image
+ */
+export function isLargeImage(
+    mimeType: string | null | undefined,
+    fileSize: number,
+    thresholdBytes: number = 1024 * 1024
+): boolean {
+    return isImageFile(mimeType) && isLargeFile(fileSize, thresholdBytes);
+}
+
 export const defaultIgnore = `
 ### Node ###
 # Logs

src/lib/helpers/imageTransformations.ts

@@ -0,0 +1,123 @@
+import { ImageFormat, type Models } from '@appwrite.io/console';
+
+export type TransformationState = {
+    width?: number;
+    height?: number;
+    gravity?: string; // focal point: 'top-left', 'top', 'top-right', 'left', 'center', 'right', 'bottom-left', 'bottom', 'bottom-right'
+    borderWidth?: number;
+    borderColor?: string; // hex without #
+    borderOpacity?: number; // 0-100
+    borderRadius?: number;
+    background?: string; // hex without #
+    quality?: number; // 1-100
+    output?: ImageFormat;
+    rotation?: number; // 0-360
+};
+
+export function generateTransformationParams(
+    state: TransformationState
+): Record<string, string | number> {
+    const params: Record<string, string | number> = {};
+
+    if (state.width) params.width = state.width;
+    if (state.height) params.height = state.height;
+    if (state.gravity && state.gravity !== 'center') {
+        params.gravity = state.gravity;
+    }
+    if (state.borderWidth && state.borderWidth > 0) {
+        params.borderWidth = state.borderWidth;
+        if (state.borderColor) {
+            params.borderColor = state.borderColor.replace('#', '');
+        }
+    }
+    if (state.borderRadius && state.borderRadius > 0) {
+        params.borderRadius = state.borderRadius;
+    }
+    if (state.background) {
+        params.background = state.background.replace('#', '');
+    }
+    if (state.quality && state.quality < 100) {
+        params.quality = state.quality;
+    }
+    if (state.output) {
+        params.output = state.output;
+    }
+    if (state.rotation && state.rotation !== 0) {
+        params.rotation = state.rotation;
+    }
+
+    return params;
+}
+
+export function generateSDKCode(
+    state: TransformationState,
+    bucketId: string,
+    fileId: string,
+    sdk: 'js' | 'python' | 'flutter' | 'swift' | 'kotlin'
+): string {
+    const params = generateTransformationParams(state);
+    const paramStrings: string[] = [];
+
+    // Build parameter object/string
+    Object.entries(params).forEach(([key, value]) => {
+        if (sdk === 'js' || sdk === 'python') {
+            paramStrings.push(`    ${key}: ${typeof value === 'string' ? `'${value}'` : value}`);
+        } else if (sdk === 'flutter' || sdk === 'swift' || sdk === 'kotlin') {
+            paramStrings.push(`    ${key}: ${typeof value === 'string' ? `"${value}"` : value}`);
+        }
+    });
+
+    const paramsBlock = paramStrings.length > 0 ? `,\n${paramStrings.join(',\n')}` : '';
+
+    switch (sdk) {
+        case 'js':
+            return `storage.getFilePreview({
+    bucketId: '${bucketId}',
+    fileId: '${fileId}'${paramsBlock}
+});`;
+
+        case 'python':
+            return `storage.get_file_preview(
+    bucket_id='${bucketId}',
+    file_id='${fileId}'${paramsBlock.replace(/(\w+):/g, '$1=')}
+);`;
+
+        case 'flutter':
+            return `Storage.getFilePreview(
+    bucketId: '${bucketId}',
+    fileId: '${fileId}'${paramsBlock}
+);`;
+
+        case 'swift':
+            return `storage.getFilePreview(
+    bucketId: "${bucketId}",
+    fileId: "${fileId}"${paramsBlock}
+)`;
+
+        case 'kotlin':
+            return `storage.getFilePreview(
+    bucketId = "${bucketId}",
+    fileId = "${fileId}"${paramsBlock.replace(/(\w+):/g, '$1 =')}
+)`;
+
+        default:
+            return '';
+    }
+}
+
+export function getFormatLabel(format: ImageFormat): string {
+    switch (format) {
+        case ImageFormat.Jpg:
+            return 'JPG';
+        case ImageFormat.Png:
+            return 'PNG';
+        case ImageFormat.Gif:
+            return 'GIF';
+        case ImageFormat.Webp:
+            return 'WEBP';
+        case ImageFormat.Avif:
+            return 'AVIF';
+        default:
+            return 'JPG';
+    }
+}