includio-cms 0.0.34 → 0.0.35

package/dist/admin/components/fields/seo-field.svelte

@@ -48,7 +48,8 @@
 		type: 'text',
 		slug: 'title',
 		label: 'Title',
-		required: true
+		required: true,
+		maxLength: 60
 	};
 
 	const descriptionField: TextField = {
@@ -56,7 +57,8 @@
 		slug: 'description',
 		label: 'Description',
 		required: false,
-		multiline: true
+		multiline: true,
+		maxLength: 160
 	};
 
 	const keyWordsField: TextField = {

package/dist/admin/components/media/file-upload.svelte

@@ -1,16 +1,14 @@
 <script lang="ts">
-	import { getRemotes } from '../../context/remotes.js';
 	import Button from '../../../components/ui/button/button.svelte';
 	import Plus from '@tabler/icons-svelte/icons/plus';
 
-	const remotes = getRemotes();
-
 	type Props = {
 		folderId?: string | null;
 		accept?: string;
+		onUpload?: () => void;
 	};
 
-	let { folderId = $bindable(null), accept }: Props = $props();
+	let { folderId = $bindable(null), accept, onUpload }: Props = $props();
 
 	let inputElement: HTMLInputElement;
 
@@ -30,10 +28,11 @@
 					method: 'POST',
 					body: form
 				});
+
+				onUpload?.();
 			})
 		);
 
-		remotes.getMedia().refresh();
 		input.value = '';
 	}
 </script>

package/dist/admin/components/media/file-upload.svelte.d.ts

@@ -1,6 +1,7 @@
 type Props = {
     folderId?: string | null;
     accept?: string;
+    onUpload?: () => void;
 };
 declare const FileUpload: import("svelte").Component<Props, {}, "folderId">;
 type FileUpload = ReturnType<typeof FileUpload>;

package/dist/admin/components/media/media-library.svelte

@@ -78,7 +78,13 @@
 				</Tabs.Root>
 			</div>
 			<div class="flex items-center gap-2">
-				<FileUpload bind:folderId={selectedFolder} {accept} />
+				<FileUpload
+					bind:folderId={selectedFolder}
+					{accept}
+					onUpload={() => {
+						fetchFiles(selectedFolder, accept);
+					}}
+				/>
 			</div>
 		</div>
 

package/dist/components/ui/sidebar/sidebar-input.svelte.d.ts

@@ -2,7 +2,7 @@ declare const SidebarInput: import("svelte").Component<(Omit<import("svelte/elem
     type: "file";
     files?: FileList;
 } | {
-    type?: "number" | "text" | "email" | "checkbox" | "image" | "date" | "radio" | "url" | "hidden" | "color" | "submit" | "reset" | "button" | (string & {}) | "search" | "tel" | "time" | "datetime-local" | "month" | "password" | "range" | "week";
+    type?: "number" | "image" | "text" | "date" | "radio" | "url" | "email" | "checkbox" | "hidden" | "color" | "submit" | "reset" | "button" | (string & {}) | "search" | "tel" | "time" | "datetime-local" | "month" | "password" | "range" | "week";
     files?: undefined;
 })) & {
     ref?: HTMLElement | null | undefined;

package/dist/core/server/fields/resolveImageFields.js

@@ -1,6 +1,7 @@
 import { PUBLIC_URL } from '$env/static/public';
 import { getCMS } from '../../cms.js';
 import z from 'zod';
+import { getImageStyle } from '../media/styles/operations/getImageStyle.js';
 export async function resolveMediaFields(data, fields) {
     const mediaIds = [];
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -60,7 +61,7 @@ export async function resolveMediaFields(data, fields) {
     });
     const mediaMap = Object.fromEntries(media.map((m) => [m.id, m]));
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const resolveValues = (value, fields) => {
+    const resolveValues = async (value, fields) => {
         // Start with a copy of all original data to preserve non-field properties
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const result = { ...value };
@@ -71,7 +72,42 @@ export async function resolveMediaFields(data, fields) {
                 continue;
             }
             switch (field.type) {
-                case 'image':
+                case 'image': {
+                    if (field.multiple && Array.isArray(val)) {
+                        result[field.slug] = val.map((id) => ({
+                            data: mediaMap[id] ?? null,
+                            styles: {}
+                        }));
+                    }
+                    else {
+                        if (field.styles) {
+                            const styles = await Promise.all(field.styles.map(async (style) => {
+                                const styleDbData = await getImageStyle(val, style);
+                                return [
+                                    style.name,
+                                    {
+                                        url: styleDbData.url,
+                                        media: style.media,
+                                        mimeType: style.format
+                                    }
+                                ];
+                            }));
+                            const finalVal = {
+                                data: mediaMap[val] ?? null,
+                                styles: Object.fromEntries(styles)
+                            };
+                            result[field.slug] = finalVal;
+                            break;
+                        }
+                        const finalVal = {
+                            data: mediaMap[val] ?? null,
+                            styles: {}
+                        };
+                        result[field.slug] = finalVal;
+                        break;
+                    }
+                    break;
+                }
                 case 'file': {
                     if (field.multiple && Array.isArray(val)) {
                         result[field.slug] = val.map((id) => mediaMap[id] ?? null);
@@ -98,23 +134,24 @@ export async function resolveMediaFields(data, fields) {
                 case 'object':
                     result[field.slug] = {
                         ...val,
-                        data: resolveValues(val.data, field.fields)
+                        data: await resolveValues(val.data, field.fields)
                     };
                     break;
                 case 'array':
+                    result[field.slug] = await Promise.all(
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    result[field.slug] = val.map((item) => {
+                    val.map(async (item) => {
                         // Find the object definition for this item based on its slug
                         const objectDef = field.of.find((objDef) => objDef.slug === item.slug);
                         if (objectDef) {
                             return {
                                 ...item,
-                                data: resolveValues(item.data, objectDef.fields)
+                                data: await resolveValues(item.data, objectDef.fields)
                             };
                         }
                         // If no matching object definition found, return item unchanged
                         return item;
-                    });
+                    }));
                     break;
                 default:
                     result[field.slug] = val;
@@ -122,5 +159,5 @@ export async function resolveMediaFields(data, fields) {
         }
         return result;
     };
-    return resolveValues(data, fields);
+    return (await resolveValues(data, fields));
 }

package/dist/core/server/generator/fields.js

@@ -7,7 +7,10 @@ function getFieldTypeAsString(field) {
             return 'string';
         case 'radio':
             return field.options.map((opt) => `'${opt.value.trim()}'`).join(' | ');
-        case 'image':
+        case 'image': {
+            const base = field.multiple ? 'ImageFieldData[]' : 'ImageFieldData';
+            return base + (field.required ? '' : ' | null');
+        }
         case 'file': {
             const base = field.multiple ? 'MediaFile[]' : 'MediaFile';
             return base + (field.required ? '' : ' | null');

package/dist/core/server/generator/generator.js

@@ -65,7 +65,7 @@ function generateTypes(config) {
     const cmsDir = join(process.cwd(), 'src/lib/cms/runtime');
     const filePath = join(cmsDir, 'types.ts');
     let code = `// This file is auto-generated. Do not edit directly.\n\n`;
-    code += `import type { MediaFile } from 'includio-cms/types';\n\n`;
+    code += `import type { MediaFile, ImageFieldData } from 'includio-cms/types';\n\n`;
     if (config.singles && config.singles.length > 0) {
         code += generateTypesStringForRecords('single', Object.values(config.singles));
     }

package/dist/core/server/media/styles/operations/createMediaStyles.d.ts

@@ -0,0 +1,3 @@
+import type { ImageFieldStyle } from '../../../../../types/fields.js';
+import type { ImageStyle } from '../../../../../types/media.js';
+export declare function createImageStyle(mediaFileId: string, style: ImageFieldStyle): Promise<ImageStyle>;

package/dist/core/server/media/styles/operations/createMediaStyles.js

@@ -0,0 +1,7 @@
+import { getCMS } from '../../../../cms.js';
+import { generateImageStyle } from '../sharp/generateImageStyle.js';
+export async function createImageStyle(mediaFileId, style) {
+    const imageStyleFile = await generateImageStyle(mediaFileId, style);
+    const imageStyle = await getCMS().databaseAdapter.createImageStyle(mediaFileId, imageStyleFile, style);
+    return imageStyle;
+}

package/dist/core/server/media/styles/operations/getImageStyle.d.ts

@@ -0,0 +1,3 @@
+import type { ImageFieldStyle } from '../../../../../types/fields.js';
+import type { ImageStyle } from '../../../../../types/media.js';
+export declare function getImageStyle(mediaFileId: string, style: ImageFieldStyle): Promise<ImageStyle>;

package/dist/core/server/media/styles/operations/getImageStyle.js

@@ -0,0 +1,8 @@
+import { getCMS } from '../../../../cms.js';
+import { createImageStyle } from './createMediaStyles.js';
+export async function getImageStyle(mediaFileId, style) {
+    const imageStyle = await getCMS().databaseAdapter.getImageStyle(mediaFileId, style);
+    if (imageStyle)
+        return imageStyle;
+    return createImageStyle(mediaFileId, style);
+}

package/dist/core/server/media/styles/sharp/generateImageStyle.d.ts

@@ -0,0 +1,3 @@
+import type { ImageFieldStyle } from '../../../../../types/fields.js';
+import type { UploadedMediaFile } from '../../../../../types/media.js';
+export declare function generateImageStyle(mediaFileId: string, style: ImageFieldStyle): Promise<UploadedMediaFile>;

package/dist/core/server/media/styles/sharp/generateImageStyle.js

@@ -0,0 +1,16 @@
+import { getCMS } from '../../../../cms.js';
+import sharp from 'sharp';
+export async function generateImageStyle(mediaFileId, style) {
+    const file = await getCMS().filesAdapter.getFile(mediaFileId);
+    if (!file) {
+        throw new Error('Media file not found');
+    }
+    const imageBuffer = await file.arrayBuffer();
+    const outputBuffer = await sharp(Buffer.from(imageBuffer))
+        .resize(style.width, style.height)
+        .toFormat(style.format)
+        .toBuffer();
+    return getCMS().filesAdapter.uploadFile(new File([new Uint8Array(outputBuffer)], `${mediaFileId}_${style.name}.${style.format}`, {
+        type: `image/${style.format}`
+    }));
+}

package/dist/db-postgres/index.js

@@ -197,6 +197,36 @@ export function pg(config) {
                 .returning()
                 .then(([file]) => file);
         },
+        getImageStyle: async (mediaFileId, style) => {
+            const [imageStyle] = await db
+                .select()
+                .from(schema.imageStylesTable)
+                .where(and(eq(schema.imageStylesTable.mediaFileId, mediaFileId), eq(schema.imageStylesTable.name, style.name), eq(schema.imageStylesTable.width, style.width), eq(schema.imageStylesTable.height, style.height)))
+                .limit(1);
+            if (!imageStyle)
+                return null;
+            return {
+                url: imageStyle.url,
+                mimeType: imageStyle.mimeType,
+                media: imageStyle.media ? imageStyle.media : undefined
+            };
+        },
+        createImageStyle: async (mediaFileId, file, style) => {
+            const [imageStyle] = await db
+                .insert(schema.imageStylesTable)
+                .values({
+                ...style,
+                url: file.url,
+                mimeType: file.mimeType ?? `image/${style.format}`,
+                mediaFileId: mediaFileId
+            })
+                .returning();
+            return {
+                url: imageStyle.url,
+                mimeType: imageStyle.mimeType,
+                media: imageStyle.media ? imageStyle.media : undefined
+            };
+        },
         deleteMediaFile: async (id) => {
             await db.delete(schema.mediaFilesTable).where(eq(schema.mediaFilesTable.id, id));
         },

package/dist/db-postgres/schema/imageStyle.d.ts

@@ -0,0 +1,160 @@
+export declare const imageStylesTable: import("drizzle-orm/pg-core/table", { with: { "resolution-mode": "require" } }).PgTableWithColumns<{
+    name: "image_styles";
+    schema: undefined;
+    columns: {
+        id: import("drizzle-orm/pg-core", { with: { "resolution-mode": "require" } }).PgColumn<{
+            name: "id";
+            tableName: "image_styles";
+            dataType: "string";
+            columnType: "PgUUID";
+            data: string;
+            driverParam: string;
+            notNull: true;
+            hasDefault: true;
+            isPrimaryKey: true;
+            isAutoincrement: false;
+            hasRuntimeDefault: false;
+            enumValues: undefined;
+            baseColumn: never;
+            identity: undefined;
+            generated: undefined;
+        }, {}, {}>;
+        mediaFileId: import("drizzle-orm/pg-core", { with: { "resolution-mode": "require" } }).PgColumn<{
+            name: "media_file_id";
+            tableName: "image_styles";
+            dataType: "string";
+            columnType: "PgUUID";
+            data: string;
+            driverParam: string;
+            notNull: true;
+            hasDefault: false;
+            isPrimaryKey: false;
+            isAutoincrement: false;
+            hasRuntimeDefault: false;
+            enumValues: undefined;
+            baseColumn: never;
+            identity: undefined;
+            generated: undefined;
+        }, {}, {}>;
+        name: import("drizzle-orm/pg-core", { with: { "resolution-mode": "require" } }).PgColumn<{
+            name: "name";
+            tableName: "image_styles";
+            dataType: "string";
+            columnType: "PgText";
+            data: string;
+            driverParam: string;
+            notNull: true;
+            hasDefault: false;
+            isPrimaryKey: false;
+            isAutoincrement: false;
+            hasRuntimeDefault: false;
+            enumValues: [string, ...string[]];
+            baseColumn: never;
+            identity: undefined;
+            generated: undefined;
+        }, {}, {}>;
+        url: import("drizzle-orm/pg-core", { with: { "resolution-mode": "require" } }).PgColumn<{
+            name: "url";
+            tableName: "image_styles";
+            dataType: "string";
+            columnType: "PgText";
+            data: string;
+            driverParam: string;
+            notNull: true;
+            hasDefault: false;
+            isPrimaryKey: false;
+            isAutoincrement: false;
+            hasRuntimeDefault: false;
+            enumValues: [string, ...string[]];
+            baseColumn: never;
+            identity: undefined;
+            generated: undefined;
+        }, {}, {}>;
+        width: import("drizzle-orm/pg-core", { with: { "resolution-mode": "require" } }).PgColumn<{
+            name: "width";
+            tableName: "image_styles";
+            dataType: "number";
+            columnType: "PgInteger";
+            data: number;
+            driverParam: string | number;
+            notNull: true;
+            hasDefault: false;
+            isPrimaryKey: false;
+            isAutoincrement: false;
+            hasRuntimeDefault: false;
+            enumValues: undefined;
+            baseColumn: never;
+            identity: undefined;
+            generated: undefined;
+        }, {}, {}>;
+        height: import("drizzle-orm/pg-core", { with: { "resolution-mode": "require" } }).PgColumn<{
+            name: "height";
+            tableName: "image_styles";
+            dataType: "number";
+            columnType: "PgInteger";
+            data: number;
+            driverParam: string | number;
+            notNull: true;
+            hasDefault: false;
+            isPrimaryKey: false;
+            isAutoincrement: false;
+            hasRuntimeDefault: false;
+            enumValues: undefined;
+            baseColumn: never;
+            identity: undefined;
+            generated: undefined;
+        }, {}, {}>;
+        crop: import("drizzle-orm/pg-core", { with: { "resolution-mode": "require" } }).PgColumn<{
+            name: "crop";
+            tableName: "image_styles";
+            dataType: "boolean";
+            columnType: "PgBoolean";
+            data: boolean;
+            driverParam: boolean;
+            notNull: true;
+            hasDefault: true;
+            isPrimaryKey: false;
+            isAutoincrement: false;
+            hasRuntimeDefault: false;
+            enumValues: undefined;
+            baseColumn: never;
+            identity: undefined;
+            generated: undefined;
+        }, {}, {}>;
+        media: import("drizzle-orm/pg-core", { with: { "resolution-mode": "require" } }).PgColumn<{
+            name: "media";
+            tableName: "image_styles";
+            dataType: "string";
+            columnType: "PgText";
+            data: string;
+            driverParam: string;
+            notNull: false;
+            hasDefault: false;
+            isPrimaryKey: false;
+            isAutoincrement: false;
+            hasRuntimeDefault: false;
+            enumValues: [string, ...string[]];
+            baseColumn: never;
+            identity: undefined;
+            generated: undefined;
+        }, {}, {}>;
+        mimeType: import("drizzle-orm/pg-core", { with: { "resolution-mode": "require" } }).PgColumn<{
+            name: "mime_type";
+            tableName: "image_styles";
+            dataType: "string";
+            columnType: "PgText";
+            data: string;
+            driverParam: string;
+            notNull: true;
+            hasDefault: false;
+            isPrimaryKey: false;
+            isAutoincrement: false;
+            hasRuntimeDefault: false;
+            enumValues: [string, ...string[]];
+            baseColumn: never;
+            identity: undefined;
+            generated: undefined;
+        }, {}, {}>;
+    };
+    dialect: "pg";
+}>;

package/dist/db-postgres/schema/imageStyle.js

@@ -0,0 +1,12 @@
+import { boolean, integer, pgTable, text, uuid } from 'drizzle-orm/pg-core';
+export const imageStylesTable = pgTable('image_styles', {
+    id: uuid('id').primaryKey().defaultRandom(),
+    mediaFileId: uuid('media_file_id').notNull(),
+    name: text('name').notNull(),
+    url: text('url').notNull(),
+    width: integer('width').notNull(),
+    height: integer('height').notNull(),
+    crop: boolean('crop').notNull().default(false),
+    media: text('media'),
+    mimeType: text('mime_type').notNull()
+});

package/dist/db-postgres/schema/index.d.ts

@@ -5,3 +5,4 @@ export * from './session.js';
 export * from './user.js';
 export * from './formSubmission.js';
 export * from './consentLog.js';
+export * from './imageStyle.js';

package/dist/db-postgres/schema/index.js

@@ -5,3 +5,4 @@ export * from './session.js';
 export * from './user.js';
 export * from './formSubmission.js';
 export * from './consentLog.js';
+export * from './imageStyle.js';

package/dist/files-local/index.js

@@ -1,6 +1,6 @@
 import { extname, resolve } from 'node:path';
 import { randomUUID } from 'node:crypto';
-import { writeFile } from 'node:fs/promises';
+import { writeFile, readFile } from 'node:fs/promises';
 import sharp from 'sharp';
 import ffmpeg from 'fluent-ffmpeg';
 const fullDir = process.env.NODE_ENV === 'production' ? `/data/uploads` : `./static/uploads`;
@@ -53,30 +53,17 @@ async function processVideo(filepath, filename) {
 }
 export function local() {
     return {
-        // getFiles: async (): Promise<MediaFile[]> => {
-        // 	const files = await readdir(dir);
-        // 	return await Promise.all(
-        // 		files.map(async (file) => {
-        // 			const stats = await stat(join(dir, file));
-        // 			const ext = extname(file).toLowerCase();
-        // 			const type = ['.jpg', '.jpeg', '.png', '.webp'].includes(ext)
-        // 				? 'image'
-        // 				: ['.mp4', '.webm'].includes(ext)
-        // 					? 'video'
-        // 					: ext === '.pdf'
-        // 						? 'pdf'
-        // 						: 'other';
-        // 			return {
-        // 				id: file,
-        // 				name: file,
-        // 				url: `/uploads/${file}`,
-        // 				type,
-        // 				size: stats.size,
-        // 				createdAt: stats.birthtime.toISOString()
-        // 			};
-        // 		})
-        // 	);
-        // },
+        getFile: async (id) => {
+            const filepath = resolve(fullDir, id);
+            try {
+                const data = await readFile(filepath);
+                const file = new File([data], id);
+                return file;
+            }
+            catch {
+                return null;
+            }
+        },
         uploadFile: async (file) => {
             const ext = extname(file.name);
             const id = randomUUID();

package/dist/index.d.ts

@@ -2,5 +2,3 @@ export * from './admin/index.js';
 export type * from './admin/index.js';
 export * from './core/index.js';
 export type * from './core/index.js';
-export * from './ui/index.js';
-export type * from './ui/index.js';

package/dist/index.js

@@ -1,3 +1,2 @@
 export * from './admin/index.js';
 export * from './core/index.js';
-export * from './ui/index.js';

package/dist/sveltekit/components/image.svelte

@@ -1,20 +1,33 @@
 <script lang="ts">
-	import type { MediaFile } from '../../types/media.js';
+	import type { ImageFieldData } from '../../types/fields.js';
 	import type { HTMLImgAttributes } from 'svelte/elements';
 
 	type Props = HTMLImgAttributes & {
-		data: MediaFile;
+		data: ImageFieldData;
+		pictureClass?: string;
 	};
 
-	let { class: className = undefined, data, ...restProps }: Props = $props();
+	let {
+		class: className = undefined,
+		pictureClass,
+		data,
+		loading = 'lazy',
+		...restProps
+	}: Props = $props();
 </script>
 
-<img
-	src={data.url}
-	alt={data.alt}
-	class={className}
-	width={data.width}
-	height={data.height}
-	loading="lazy"
-	{...restProps}
-/>
+<picture class={pictureClass}>
+	{#each Object.values(data.styles) as style}
+		<source srcset={style.url} type={style.mimeType} media={style.media} />
+	{/each}
+
+	<img
+		src={data.data.url}
+		alt={data.data.alt}
+		width={data.data.width}
+		height={data.data.height}
+		class={className}
+		{loading}
+		{...restProps}
+	/>
+</picture>

package/dist/sveltekit/components/image.svelte.d.ts

@@ -1,7 +1,8 @@
-import type { MediaFile } from '../../types/media.js';
+import type { ImageFieldData } from '../../types/fields.js';
 import type { HTMLImgAttributes } from 'svelte/elements';
 type Props = HTMLImgAttributes & {
-    data: MediaFile;
+    data: ImageFieldData;
+    pictureClass?: string;
 };
 declare const Image: import("svelte").Component<Props, {}, "">;
 type Image = ReturnType<typeof Image>;

package/dist/types/adapters/files.d.ts

@@ -1,5 +1,7 @@
 import type { UploadedMediaFile } from '../media.js';
 export interface FilesAdapter {
+    getFile: GetFile;
     uploadFile: UploadFile;
 }
+export type GetFile = (id: string) => Promise<File | null>;
 export type UploadFile = (file: File) => Promise<UploadedMediaFile>;

package/dist/types/adapters.d.ts

@@ -1,7 +1,8 @@
 import type { ConsentLogData } from './consent.js';
 import type { RawEntry } from './entries.js';
+import type { ImageFieldStyle } from './fields.js';
 import type { FormSubmission } from './forms.js';
-import type { MediaFile, MediaFolder } from './media.js';
+import type { ImageStyle, MediaFile, MediaFolder, UploadedMediaFile } from './media.js';
 import type { Session } from './sessions.js';
 import type { User } from './users.js';
 export type { AuthAdapter } from './adapters/auth.js';
@@ -19,6 +20,8 @@ export interface DatabaseAdapter {
     createMediaFolder: CreateMediaFolder;
     getMediaFolders: GetMediaFolders;
     createMediaFile: CreateMediaFile;
+    getImageStyle: GetImageStyle;
+    createImageStyle: CreateImageStyle;
     getMediaFiles: GetMediaFiles;
     getMediaFile: GetMediaFile;
     updateMediaFile: UpdateMediaFile;
@@ -98,6 +101,8 @@ export type UpdateMediaFile = (data: {
     data: Partial<MediaFile>;
 }) => Promise<MediaFile>;
 export type CreateMediaFile = (data: MediaFile) => Promise<MediaFile>;
+export type CreateImageStyle = (mediaFileId: string, file: UploadedMediaFile, style: ImageFieldStyle) => Promise<ImageStyle>;
+export type GetImageStyle = (mediaFileId: string, style: ImageFieldStyle) => Promise<ImageStyle | null>;
 export interface GetUserOptions {
     data: {
         id?: string;

package/dist/types/fields.d.ts

@@ -1,3 +1,4 @@
+import type { ImageStyle, MediaFile } from './media.js';
 export type FieldType = 'text' | 'richtext' | 'number' | 'boolean' | 'date' | 'datetime' | 'file' | 'image' | 'select' | 'radio' | 'checkboxes' | 'relation' | 'object' | 'array' | 'slug' | 'seo' | 'url';
 export interface BaseField {
     slug: string;
@@ -62,6 +63,19 @@ export interface ImageField extends BaseField {
     aspectRatio?: number;
     thumbnail?: boolean;
     defaultValue?: string | string[];
+    styles?: ImageFieldStyle[];
+}
+export interface ImageFieldStyle {
+    name: string;
+    width: number;
+    height: number;
+    format?: 'jpeg' | 'png' | 'webp' | 'avif';
+    media?: string;
+    crop?: boolean;
+}
+export interface ImageFieldData {
+    data: MediaFile;
+    styles: Record<string, ImageStyle>;
 }
 export interface SelectField extends BaseField {
     type: 'select';

package/dist/types/media.d.ts

@@ -34,3 +34,8 @@ export interface MediaFile {
     posterUrl: string | null;
     mimeType: string | null;
 }
+export interface ImageStyle {
+    url: string;
+    mimeType: string;
+    media?: string;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "includio-cms",
-	"version": "0.0.34",
+	"version": "0.0.35",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",