inicontent 1.0.0

package/app/composables/optimizeFile.ts

@@ -0,0 +1,287 @@
+/**
+ * Composable for optimizing files (images and PDFs) before upload
+ * Images are converted to WebP or AVIF format for better compression
+ * Falls back to original if optimized version is larger
+ */
+
+interface OptimizationResult {
+    file: File
+    optimized: boolean
+    originalSize: number
+    compressedSize?: number
+    compressionRatio?: number
+    outputFormat?: string
+}
+
+export const useOptimizeFile = () => {
+    /**
+     * Compress image to WebP or AVIF format
+     * @param file - The image file to compress
+     * @param quality - Compression quality (0-1), defaults to 0.85
+     * @param maxWidth - Maximum width in pixels, defaults to 3840 (4K)
+     * @param maxHeight - Maximum height in pixels, defaults to 3840 (4K)
+     * @returns Promise with compressed blob and metadata, or null if conversion not possible
+     */
+    const compressImage = async (
+        file: File,
+        quality = 0.85,
+        maxWidth = 3840,
+        maxHeight = 3840,
+    ): Promise<{ blob: Blob; width: number; height: number; format: string } | null> => {
+        return new Promise((resolve) => {
+            const reader = new FileReader()
+
+            reader.onload = (event) => {
+                const img = new Image()
+
+                img.onload = () => {
+                    // Calculate new dimensions while maintaining aspect ratio
+                    let { width, height } = img
+                    const aspectRatio = width / height
+                    let newWidth = width
+                    let newHeight = height
+
+                    // Scale down if dimensions exceed max
+                    if (width > maxWidth) {
+                        newWidth = maxWidth
+                        newHeight = maxWidth / aspectRatio
+                    }
+                    if (newHeight > maxHeight) {
+                        newHeight = maxHeight
+                        newWidth = maxHeight * aspectRatio
+                    }
+
+                    // Create canvas and compress
+                    const canvas = document.createElement('canvas')
+                    canvas.width = Math.round(newWidth)
+                    canvas.height = Math.round(newHeight)
+
+                    const ctx = canvas.getContext('2d')
+                    if (!ctx) {
+                        resolve(null)
+                        return
+                    }
+
+                    // Enable image smoothing for better quality
+                    ctx.imageSmoothingEnabled = true
+                    ctx.imageSmoothingQuality = 'high'
+
+                    // Draw scaled image
+                    ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
+
+                    // Try AVIF first (best compression)
+                    // AVIF: ~50-60% size reduction vs JPEG
+                    // WebP: ~25-35% size reduction vs JPEG
+                    canvas.toBlob(
+                        (avifBlob) => {
+                            if (avifBlob) {
+                                // AVIF succeeded, now try WebP to compare
+                                canvas.toBlob(
+                                    (webpBlob) => {
+                                        if (webpBlob && webpBlob.size < avifBlob.size) {
+                                            // WebP is smaller than AVIF
+                                            resolve({
+                                                blob: webpBlob,
+                                                width: canvas.width,
+                                                height: canvas.height,
+                                                format: 'image/webp',
+                                            })
+                                        } else {
+                                            // AVIF is smaller or WebP failed
+                                            resolve({
+                                                blob: avifBlob,
+                                                width: canvas.width,
+                                                height: canvas.height,
+                                                format: 'image/avif',
+                                            })
+                                        }
+                                    },
+                                    'image/webp',
+                                    quality,
+                                )
+                            } else {
+                                // AVIF not supported, try WebP
+                                canvas.toBlob(
+                                    (webpBlob) => {
+                                        if (webpBlob) {
+                                            resolve({
+                                                blob: webpBlob,
+                                                width: canvas.width,
+                                                height: canvas.height,
+                                                format: 'image/webp',
+                                            })
+                                        } else {
+                                            // WebP not supported, use JPEG
+                                            canvas.toBlob(
+                                                (jpegBlob) => {
+                                                    resolve(
+                                                        jpegBlob
+                                                            ? {
+                                                                blob: jpegBlob,
+                                                                width: canvas.width,
+                                                                height: canvas.height,
+                                                                format: 'image/jpeg',
+                                                            }
+                                                            : null,
+                                                    )
+                                                },
+                                                'image/jpeg',
+                                                quality,
+                                            )
+                                        }
+                                    },
+                                    'image/webp',
+                                    quality,
+                                )
+                            }
+                        },
+                        'image/avif',
+                        quality,
+                    )
+                }
+
+                img.onerror = () => {
+                    resolve(null)
+                }
+
+                img.src = event.target?.result as string
+            }
+
+            reader.onerror = () => {
+                resolve(null)
+            }
+
+            reader.readAsDataURL(file)
+        })
+    }
+
+    /**
+     * Determine if file should be optimized
+     * Optimizes images > 300KB and PDFs > 500KB
+     */
+    const shouldOptimize = (file: File): boolean => {
+        const mimeType = file.type
+        const isImage = mimeType.startsWith('image/')
+        const isPDF = mimeType === 'application/pdf'
+
+        if (isImage) {
+            // Optimize images larger than 300KB
+            return file.size > 300 * 1024
+        }
+        if (isPDF) {
+            // Optimize PDFs larger than 500KB
+            return file.size > 500 * 1024
+        }
+
+        return false
+    }
+
+    /**
+     * Optimize a single file
+     * For images: convert to WebP/AVIF for better compression
+     * Returns original file if optimization doesn't reduce size
+     */
+    const optimizeFile = async (
+        file: File,
+        imageQuality = 0.85,
+    ): Promise<OptimizationResult> => {
+        const isImage = file.type.startsWith('image/')
+
+        // Only optimize supported types
+        if (!isImage) {
+            return {
+                file,
+                optimized: false,
+                originalSize: file.size,
+            }
+        }
+
+        // Skip optimization if file is too small
+        if (!shouldOptimize(file)) {
+            return {
+                file,
+                optimized: false,
+                originalSize: file.size,
+            }
+        }
+
+        try {
+            // Compress image to WebP/AVIF
+            const result = await compressImage(
+                file,
+                imageQuality,
+                3840,
+                3840,
+            )
+
+            if (!result) {
+                // Compression failed, use original
+                return {
+                    file,
+                    optimized: false,
+                    originalSize: file.size,
+                }
+            }
+
+            const { blob, width, height, format } = result
+
+            // Only use compressed version if it's actually smaller or equal
+            if (blob.size <= file.size) {
+                const extension = format === 'image/avif' ? 'avif' : format === 'image/webp' ? 'webp' : 'jpg'
+                const newFileName = file.name.replace(/\.[^.]+$/, `.${extension}`)
+
+                const compressedFile = new File([blob], newFileName, {
+                    type: format,
+                    lastModified: file.lastModified,
+                })
+
+                const compressionRatio = 1 - blob.size / file.size
+                const formatName = format === 'image/avif' ? 'AVIF' : format === 'image/webp' ? 'WebP' : 'JPEG'
+
+
+                return {
+                    file: compressedFile,
+                    optimized: true,
+                    originalSize: file.size,
+                    compressedSize: blob.size,
+                    compressionRatio,
+                    outputFormat: formatName,
+                }
+            }
+
+            // Compression resulted in larger file, use original
+            return {
+                file,
+                optimized: false,
+                originalSize: file.size,
+            }
+        } catch (error) {
+            console.warn(`File optimization failed, using original: ${error instanceof Error ? error.message : 'Unknown error'}`)
+        }
+
+        return {
+            file,
+            optimized: false,
+            originalSize: file.size,
+        }
+    }
+
+    /**
+     * Batch optimize multiple files
+     */
+    const optimizeFiles = async (
+        files: File[],
+        imageQuality = 0.85,
+    ): Promise<OptimizationResult[]> => {
+        return Promise.all(
+            files.map((file) => optimizeFile(file, imageQuality)),
+        )
+    }
+
+    return {
+        compressImage,
+        shouldOptimize,
+        optimizeFile,
+        optimizeFiles,
+    }
+}

package/app/composables/renderLabel.ts

@@ -0,0 +1,88 @@
+import { flattenSchema } from "inibase/utils";
+
+export default function renderLabel(
+	table?: Table,
+	item?: Item,
+	defaulValue = "--",
+): string {
+	if (!table || !table.schema) return `${item?.id ?? defaulValue}`;
+
+	// Tables created without an explicit Item Label template (e.g. quick
+	// "new table" with just a slug) have `label: ""`. Falling back to the raw
+	// masked id makes referenced items unreadable and — since translated
+	// references can point to a different item per language — the cell value
+	// appears to change "randomly" when the UI language switches. Show the
+	// item's first text field instead.
+	if (!table.label) return fallbackLabel(table, item, defaulValue);
+
+	if (table.customLabel) return table.customLabel(item);
+
+	const flattenTableSchema = flattenSchema(table.schema as any);
+	return table.label
+		.replace(
+			/@([a-zA-Z0-9_]+)\.(\d+)|@(\d+)/g,
+			(match, slug, fieldId, capturedNumber) => {
+				if (slug && fieldId !== undefined) {
+					if (slug === "user") {
+						slug = "users";
+						item = useState<User>("user").value;
+					}
+
+					const database = useState<Database>("database");
+					const refTable = database.value.tables?.find(
+						({ slug: s }) => s === slug,
+					);
+					if (!refTable || !refTable.schema) return defaulValue;
+					const flattenRefSchema = flattenSchema(refTable.schema as any);
+					const field = flattenRefSchema.find(
+						({ id }) => id === Number(fieldId),
+					);
+					if (!field || !item || !item[field.key]) return defaulValue;
+					if (field.table) {
+						const fieldTable = database.value.tables?.find(
+							({ slug }) => slug === field.table,
+						);
+						return renderLabel(fieldTable, item[field.key]);
+					}
+					return item[field.key];
+				}
+				if (capturedNumber) {
+					const field = flattenTableSchema.find(
+						({ id }) => id === Number(capturedNumber),
+					);
+					if (!field || !item || !item[field.key]) return defaulValue;
+					if (field.table) {
+						const database = useState<Database>("database");
+						const fieldTable = database.value.tables?.find(
+							({ slug }) => slug === field.table,
+						);
+						return renderLabel(fieldTable, item[field.key]);
+					}
+					return item[field.key];
+				}
+				return defaulValue;
+			},
+		)
+		.replaceAll("\\\\", "\\");
+}
+
+function fallbackLabel(table: Table, item?: Item, defaulValue = "--"): string {
+	if (!item) return `${defaulValue}`;
+	const flattened = flattenSchema(table.schema as any);
+	const candidates = flattened
+		.filter((field) => field.id !== undefined && Number(field.id) > 0)
+		.sort((a, b) => Number(a.id) - Number(b.id));
+	for (const field of candidates) {
+		const types = Array.isArray(field.type) ? field.type : [field.type];
+		if (
+			!types.some(
+				(type) => type === "string" || type === "text" || type === "number",
+			)
+		)
+			continue;
+		const value = (item as Record<string, unknown>)[field.key];
+		if (value !== undefined && value !== null && String(value).trim() !== "")
+			return String(value);
+	}
+	return `${item?.id ?? defaulValue}`;
+}

package/app/composables/schemaClipboard.ts

@@ -0,0 +1,95 @@
+import { isArrayOfObjects } from "inibase/utils";
+import Inison from "inison";
+import { copyToClipboard, randomID } from "~/composables";
+
+/**
+ * Shared clipboard for the table-schema editor.
+ *
+ * Schema fields are stored on the *system* clipboard (not a module ref) so they
+ * can be copied in one table/browser tab and pasted into another. The clipboard
+ * value is tagged so it won't collide with normal data item copy/paste.
+ */
+const CLIPBOARD_TAG = "INISON_SCHEMA_FIELDS";
+
+// Returns a plain, VNode-free copy of a field that is safe to serialize.
+function copyableField(field: Field): Record<string, unknown> {
+	const { render, onCreate, onDelete, children, ...rest } = field;
+	const cleaned = rest as Record<string, unknown>;
+	if (children === undefined) return cleaned;
+	if (isArrayOfObjects(children))
+		return {
+			...cleaned,
+			children: children.map((child) => copyableField(child)),
+		};
+	return { ...cleaned, children };
+}
+
+/**
+ * Writes the given fields to the system clipboard so they can be pasted into
+ * another schema editor (including a different table or browser tab).
+ */
+export async function copySchemaFields(fields: Field[]) {
+	const payload = Inison.stringify(fields.map((field) => copyableField(field)));
+	await copyToClipboard(`${CLIPBOARD_TAG}:${payload}`);
+}
+
+// Deep-clones a copied field and regenerates id (and recursive children ids) so
+// pasting does not collide with existing fields.
+function cloneFieldWithNewIds(field: Field): Field {
+	const clone = { ...field };
+	clone.id = `temp-${randomID()}`;
+	if (isArrayOfObjects(clone.children)) {
+		clone.children = clone.children.map((child) =>
+			cloneFieldWithNewIds(child as Field),
+		);
+	}
+	return clone;
+}
+
+function isFieldLike(value: unknown): boolean {
+	return (
+		!!value &&
+		typeof value === "object" &&
+		!Array.isArray(value) &&
+		"type" in (value as object) &&
+		"key" in (value as object)
+	);
+}
+
+/**
+ * Reads the system clipboard and returns the copied schema fields, or an empty
+ * array when the clipboard doesn't contain schema fields.
+ */
+export async function readSchemaFieldsFromClipboard(): Promise<Field[]> {
+	try {
+		const raw = await navigator.clipboard.readText();
+		if (!raw?.startsWith(CLIPBOARD_TAG)) return [];
+		const payload = raw.slice(CLIPBOARD_TAG.length + 1);
+		if (!payload) return [];
+		const data = Inison.unstringify<unknown>(payload);
+		if (!Array.isArray(data)) return [];
+		return data.filter(
+			(item): item is Field =>
+				isFieldLike(item) &&
+				!["id", "createdAt", "updatedAt"].includes(String((item as Field).key)),
+		);
+	} catch {
+		return [];
+	}
+}
+
+/**
+ * Reads the clipboard and inserts the copied fields into `schema` right before
+ * `targetIndex`. Returns the newly inserted fields (with fresh temp ids).
+ */
+export async function pasteSchemaFields(
+	schema: Schema,
+	targetIndex: number,
+): Promise<Field[]> {
+	const fields = await readSchemaFieldsFromClipboard();
+	const inserted = fields.map((field) => cloneFieldWithNewIds(field));
+	if (!inserted.length) return [];
+	const index = Math.max(0, Math.min(targetIndex, schema.length));
+	schema.splice(index, 0, ...inserted);
+	return inserted;
+}