camox 0.22.0 → 0.24.0

package/dist/core/createBlock.js

@@ -12,6 +12,7 @@ import { useFieldSelection } from "./hooks/useFieldSelection.js";
 import { useIsEditable } from "./hooks/useIsEditable.js";
 import { useOverlayMessage } from "./hooks/useOverlayMessage.js";
 import { Type, resolveToMarkdown } from "./lib/contentType.js";
+import { buildImageSrcSet, getDefaultImageSizes, getDefaultImageWidth, transformImageUrl } from "./lib/imageTransform.js";
 import { markdownToReactNodes } from "./lib/lexicalReact.js";
 import { c } from "react/compiler-runtime";
 import { Input } from "@camox/ui/input";
@@ -58,8 +59,8 @@ let hasShownEmbedLockToast = false;
 function buildInitialSeeds(properties, parentTempId, content, allSeeds, counter) {
 	for (const [fieldName, fieldSchema] of Object.entries(properties)) {
 		if (fieldSchema.type !== "array" || !fieldSchema.items?.properties) continue;
-		const ait = fieldSchema.arrayItemType;
-		if (ait === "Image" || ait === "File") continue;
+		const ft = fieldSchema.fieldType;
+		if (ft === "ImageList" || ft === "FileList") continue;
 		const defaultCount = fieldSchema.defaultItems ?? fieldSchema.minItems ?? 0;
 		if (defaultCount <= 0) continue;
 		const itemProperties = fieldSchema.items.properties;
@@ -97,7 +98,7 @@ function buildInitialSeeds(properties, parentTempId, content, allSeeds, counter)
 function buildPeekItems(properties, blockId, parentItemId, content, allItems, counter) {
 	for (const [fieldName, fieldSchema] of Object.entries(properties)) {
 		if (fieldSchema.type !== "array" || !fieldSchema.items?.properties) continue;
-		if (fieldSchema.fieldType === "MultipleAssets") continue;
+		if (fieldSchema.fieldType === "ImageList" || fieldSchema.fieldType === "FileList") continue;
 		const defaultCount = fieldSchema.defaultItems ?? fieldSchema.minItems ?? 0;
 		if (defaultCount <= 0) continue;
 		const itemProperties = fieldSchema.items.properties;
@@ -158,8 +159,7 @@ function createBlock(options) {
 	for (const [key, prop] of Object.entries(typeboxSchema.properties)) if ("default" in prop) {
 		contentDefaults[key] = prop.default;
 		const ft = prop.fieldType;
-		const ait = prop.arrayItemType;
-		if (ft === "Image" || ft === "File" || ft === "RepeatableItem" || ait === "Image" || ait === "File") continue;
+		if (ft === "Image" || ft === "File" || ft === "ImageList" || ft === "FileList" || ft === "Repeater") continue;
 		contentDefaultsForStorage[key] = prop.default;
 	}
 	const repeatableItemDefaults = {};
@@ -282,9 +282,9 @@ function createBlock(options) {
 	};
 	const Embed = (t0) => {
 		const $ = c(59);
-		if ($[0] !== "821b6b2593d5fb6bcf8554c667ea39ef68a4e6ee5db99025f6c1f92b6a7379ed") {
+		if ($[0] !== "7449f3ea9be4e14dfde818341dfd9ef5acd44b63f0cff7104a5c200feae79d4a") {
 			for (let $i = 0; $i < 59; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-			$[0] = "821b6b2593d5fb6bcf8554c667ea39ef68a4e6ee5db99025f6c1f92b6a7379ed";
+			$[0] = "7449f3ea9be4e14dfde818341dfd9ef5acd44b63f0cff7104a5c200feae79d4a";
 		}
 		const { name, children } = t0;
 		const blockContext = React.use(Context);
@@ -532,9 +532,9 @@ function createBlock(options) {
 	};
 	const Link = (t0) => {
 		const $ = c(38);
-		if ($[0] !== "821b6b2593d5fb6bcf8554c667ea39ef68a4e6ee5db99025f6c1f92b6a7379ed") {
+		if ($[0] !== "7449f3ea9be4e14dfde818341dfd9ef5acd44b63f0cff7104a5c200feae79d4a") {
 			for (let $i = 0; $i < 38; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-			$[0] = "821b6b2593d5fb6bcf8554c667ea39ef68a4e6ee5db99025f6c1f92b6a7379ed";
+			$[0] = "7449f3ea9be4e14dfde818341dfd9ef5acd44b63f0cff7104a5c200feae79d4a";
 		}
 		const { name, children } = t0;
 		const blockContext = React.use(Context);
@@ -773,9 +773,9 @@ function createBlock(options) {
 	};
 	const Image = (t0) => {
 		const $ = c(22);
-		if ($[0] !== "821b6b2593d5fb6bcf8554c667ea39ef68a4e6ee5db99025f6c1f92b6a7379ed") {
+		if ($[0] !== "7449f3ea9be4e14dfde818341dfd9ef5acd44b63f0cff7104a5c200feae79d4a") {
 			for (let $i = 0; $i < 22; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-			$[0] = "821b6b2593d5fb6bcf8554c667ea39ef68a4e6ee5db99025f6c1f92b6a7379ed";
+			$[0] = "7449f3ea9be4e14dfde818341dfd9ef5acd44b63f0cff7104a5c200feae79d4a";
 		}
 		const { name, children } = t0;
 		const blockContext = React.use(Context);
@@ -844,7 +844,13 @@ function createBlock(options) {
 		} else t4 = $[10];
 		const handleClick = t4;
 		const imageProps = {
-			src: fieldValue.url,
+			src: transformImageUrl(fieldValue.url, {
+				width: getDefaultImageWidth(),
+				mimeType: fieldValue.mimeType,
+				size: fieldValue.size
+			}),
+			srcSet: buildImageSrcSet(fieldValue.url, fieldValue.mimeType, fieldValue.size),
+			sizes: getDefaultImageSizes(),
 			alt: fieldValue.alt
 		};
 		if (!isContentEditable) return /* @__PURE__ */ jsx(Fragment, { children: children(imageProps, fieldValue) });
@@ -891,9 +897,9 @@ function createBlock(options) {
 	};
 	const File = (t0) => {
 		const $ = c(9);
-		if ($[0] !== "821b6b2593d5fb6bcf8554c667ea39ef68a4e6ee5db99025f6c1f92b6a7379ed") {
+		if ($[0] !== "7449f3ea9be4e14dfde818341dfd9ef5acd44b63f0cff7104a5c200feae79d4a") {
 			for (let $i = 0; $i < 9; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-			$[0] = "821b6b2593d5fb6bcf8554c667ea39ef68a4e6ee5db99025f6c1f92b6a7379ed";
+			$[0] = "7449f3ea9be4e14dfde818341dfd9ef5acd44b63f0cff7104a5c200feae79d4a";
 		}
 		const { name, children } = t0;
 		const blockContext = React.use(Context);
@@ -926,16 +932,16 @@ function createBlock(options) {
 		} else t2 = $[8];
 		return t2;
 	};
-	const MULTIPLE_ASSETS_SELF_KEY = "__camox_asset_self__";
-	const _MultipleAssets = ({ name, children }) => {
+	const ASSET_LIST_SELF_KEY = "__camox_asset_self__";
+	const _AssetList = ({ name, children }) => {
 		const blockContext = React.use(Context);
-		if (!blockContext) throw new Error("MultipleAssets must be used within a Block Component");
+		if (!blockContext) throw new Error("ImageList/FileList must be used within a Block Component");
 		const parentRepeaterContext = React.use(RepeaterItemContext);
 		const { filesMap } = useNormalizedData();
 		const fieldName = String(name);
 		const fieldSchema = parentRepeaterContext ? typeboxSchema.properties[parentRepeaterContext.arrayFieldName]?.items?.properties?.[fieldName] : typeboxSchema.properties[fieldName];
-		const ait = fieldSchema?.arrayItemType;
-		if (ait !== "Image" && ait !== "File") throw new Error(`MultipleAssets: "${fieldName}" is not Type.Image/File({ multiple: true })`);
+		const ft = fieldSchema?.fieldType;
+		if (ft !== "ImageList" && ft !== "FileList") throw new Error(`"${fieldName}" is not a Type.ImageList or Type.FileList field`);
 		const source = parentRepeaterContext ? parentRepeaterContext.itemContent[fieldName] : blockContext.content[fieldName];
 		let arr = Array.isArray(source) ? source : [];
 		if (arr.length === 0) {
@@ -944,7 +950,7 @@ function createBlock(options) {
 			if (defaultCount > 0 && itemDefault) arr = Array.from({ length: defaultCount }, () => itemDefault);
 		}
 		const resolved = arr.map((v) => isFileMarker(v) ? resolveFileMarker(v, filesMap) : v).filter((v) => v != null && typeof v === "object" && "url" in v);
-		const Single = ait === "Image" ? Image : File;
+		const Single = ft === "ImageList" ? Image : File;
 		return /* @__PURE__ */ jsx(RepeaterHoverProvider, {
 			blockId: blockContext.blockId,
 			fieldName,
@@ -952,24 +958,25 @@ function createBlock(options) {
 				value: {
 					arrayFieldName: fieldName,
 					itemIndex: index,
-					itemContent: { [MULTIPLE_ASSETS_SELF_KEY]: value },
+					itemContent: { [ASSET_LIST_SELF_KEY]: value },
 					itemSettings: {},
 					itemId: void 0,
 					containerItemId: parentRepeaterContext?.itemId ?? parentRepeaterContext?.containerItemId
 				},
 				children: /* @__PURE__ */ jsx(Single, {
-					name: MULTIPLE_ASSETS_SELF_KEY,
+					name: ASSET_LIST_SELF_KEY,
 					children
 				})
 			}, index))
 		});
 	};
-	const MultipleAssets = _MultipleAssets;
+	const ImageList = _AssetList;
+	const FileList = _AssetList;
 	const RepeaterItemWrapper = (t0) => {
 		const $ = c(9);
-		if ($[0] !== "821b6b2593d5fb6bcf8554c667ea39ef68a4e6ee5db99025f6c1f92b6a7379ed") {
+		if ($[0] !== "7449f3ea9be4e14dfde818341dfd9ef5acd44b63f0cff7104a5c200feae79d4a") {
 			for (let $i = 0; $i < 9; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-			$[0] = "821b6b2593d5fb6bcf8554c667ea39ef68a4e6ee5db99025f6c1f92b6a7379ed";
+			$[0] = "7449f3ea9be4e14dfde818341dfd9ef5acd44b63f0cff7104a5c200feae79d4a";
 		}
 		const { itemId, blockId, mode, children } = t0;
 		const isContentEditable = useIsEditable(mode);
@@ -1010,9 +1017,9 @@ function createBlock(options) {
 	};
 	const RepeaterHoverProvider = (t0) => {
 		const $ = c(7);
-		if ($[0] !== "821b6b2593d5fb6bcf8554c667ea39ef68a4e6ee5db99025f6c1f92b6a7379ed") {
+		if ($[0] !== "7449f3ea9be4e14dfde818341dfd9ef5acd44b63f0cff7104a5c200feae79d4a") {
 			for (let $i = 0; $i < 7; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-			$[0] = "821b6b2593d5fb6bcf8554c667ea39ef68a4e6ee5db99025f6c1f92b6a7379ed";
+			$[0] = "7449f3ea9be4e14dfde818341dfd9ef5acd44b63f0cff7104a5c200feae79d4a";
 		}
 		const { blockId, fieldName, children } = t0;
 		const isContentEditable = useIsEditable("site");
@@ -1043,9 +1050,9 @@ function createBlock(options) {
 	};
 	const Repeater = (t0) => {
 		const $ = c(27);
-		if ($[0] !== "821b6b2593d5fb6bcf8554c667ea39ef68a4e6ee5db99025f6c1f92b6a7379ed") {
+		if ($[0] !== "7449f3ea9be4e14dfde818341dfd9ef5acd44b63f0cff7104a5c200feae79d4a") {
 			for (let $i = 0; $i < 27; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-			$[0] = "821b6b2593d5fb6bcf8554c667ea39ef68a4e6ee5db99025f6c1f92b6a7379ed";
+			$[0] = "7449f3ea9be4e14dfde818341dfd9ef5acd44b63f0cff7104a5c200feae79d4a";
 		}
 		const { name, children } = t0;
 		const blockContext = React.use(Context);
@@ -1057,7 +1064,8 @@ function createBlock(options) {
 		const ItemLink = Link;
 		const ItemEmbed = Embed;
 		const ItemImage = Image;
-		const ItemMultipleAssets = _MultipleAssets;
+		const ItemImageList = _AssetList;
+		const ItemFileList = _AssetList;
 		const ItemFile = File;
 		const ItemRepeater = Repeater;
 		const source = parentRepeaterContext ? parentRepeaterContext.itemContent[name] : content[name];
@@ -1103,7 +1111,8 @@ function createBlock(options) {
 						Embed: ItemEmbed,
 						Image: ItemImage,
 						File: ItemFile,
-						MultipleAssets: ItemMultipleAssets,
+						ImageList: ItemImageList,
+						FileList: ItemFileList,
 						Repeater: ItemRepeater,
 						useSetting: useItemSetting
 					};
@@ -1168,9 +1177,9 @@ function createBlock(options) {
 	};
 	const BlockComponent = (t0) => {
 		const $ = c(70);
-		if ($[0] !== "821b6b2593d5fb6bcf8554c667ea39ef68a4e6ee5db99025f6c1f92b6a7379ed") {
+		if ($[0] !== "7449f3ea9be4e14dfde818341dfd9ef5acd44b63f0cff7104a5c200feae79d4a") {
 			for (let $i = 0; $i < 70; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-			$[0] = "821b6b2593d5fb6bcf8554c667ea39ef68a4e6ee5db99025f6c1f92b6a7379ed";
+			$[0] = "7449f3ea9be4e14dfde818341dfd9ef5acd44b63f0cff7104a5c200feae79d4a";
 		}
 		const { blockData, mode, isFirstBlock, showAddBlockTop, showAddBlockBottom, addBlockAfterPosition } = t0;
 		const isContentEditable = useIsEditable(mode);
@@ -1470,9 +1479,9 @@ function createBlock(options) {
 	*/
 	const Detached = (t0) => {
 		const $ = c(31);
-		if ($[0] !== "821b6b2593d5fb6bcf8554c667ea39ef68a4e6ee5db99025f6c1f92b6a7379ed") {
+		if ($[0] !== "7449f3ea9be4e14dfde818341dfd9ef5acd44b63f0cff7104a5c200feae79d4a") {
 			for (let $i = 0; $i < 31; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-			$[0] = "821b6b2593d5fb6bcf8554c667ea39ef68a4e6ee5db99025f6c1f92b6a7379ed";
+			$[0] = "7449f3ea9be4e14dfde818341dfd9ef5acd44b63f0cff7104a5c200feae79d4a";
 		}
 		const { children } = t0;
 		const ctx = React.use(Context);
@@ -1600,7 +1609,8 @@ function createBlock(options) {
 		Link,
 		Image,
 		File,
-		MultipleAssets,
+		ImageList,
+		FileList,
 		Repeater,
 		useSetting,
 		_internal: {
@@ -1624,8 +1634,7 @@ function createBlock(options) {
 				const storageContent = {};
 				for (const [key, prop] of Object.entries(typeboxSchema.properties)) {
 					const ft = prop.fieldType;
-					const ait = prop.arrayItemType;
-					if (ft === "Image" || ft === "File" || ft === "RepeatableItem" || ait === "Image" || ait === "File") continue;
+					if (ft === "Image" || ft === "File" || ft === "ImageList" || ft === "FileList" || ft === "Repeater") continue;
 					if ("default" in prop) storageContent[key] = prop.default;
 				}
 				return {

package/dist/core/lib/contentType.d.ts

@@ -59,6 +59,7 @@ type ImageValue = {
   alt: string;
   filename: string;
   mimeType: string;
+  size?: number;
   _fileId?: string;
 } & {
   readonly __brand: "ImageValue";
@@ -68,30 +69,11 @@ type FileValue = {
   alt: string;
   filename: string;
   mimeType: string;
+  size?: number;
   _fileId?: string;
 } & {
   readonly __brand: "FileValue";
 };
-declare function _imageType(options: {
-  title?: string;
-  multiple?: false;
-}): TUnsafe<ImageValue>;
-declare function _imageType(options: {
-  title?: string;
-  multiple: true;
-  defaultItems: number;
-}): TArray<TUnsafe<ImageValue>>;
-declare function _fileType(options: {
-  accept: string[];
-  title?: string;
-  multiple?: false;
-}): TUnsafe<FileValue>;
-declare function _fileType(options: {
-  accept: string[];
-  title?: string;
-  multiple: true;
-  defaultItems: number;
-}): TArray<TUnsafe<FileValue>>;
 /**
  * Type builders for createBlock content schemas.
  * All fields must have default values.
@@ -120,7 +102,7 @@ declare const Type$1: {
    * similar to block-level settings.
    *
    * @example
-   * Type.RepeatableItem({
+   * Type.Repeater({
    *   content: {
    *     title: Type.String({ default: 'Item' }),
    *     description: Type.String({ default: 'Description' }),
@@ -134,7 +116,7 @@ declare const Type$1: {
    *   toMarkdown: (c) => [`### ${c.title}`, c.description],
    * })
    */
-  RepeatableItem: <T extends Record<string, TSchema>, S extends Record<string, TSchema> = Record<string, never>>(options: {
+  Repeater: <T extends Record<string, TSchema>, S extends Record<string, TSchema> = Record<string, never>>(options: {
     content: T;
     settings?: S;
     minItems: number;
@@ -197,8 +179,46 @@ declare const Type$1: {
     };
     title?: string;
   }) => TUnsafe<LinkValue>;
-  Image: typeof _imageType;
-  File: typeof _fileType;
+  /**
+   * Creates an image asset field.
+   *
+   * @example
+   * Type.Image({ title: 'Hero' })
+   */
+  Image: (options?: {
+    title?: string;
+  }) => TUnsafe<ImageValue>;
+  /**
+   * Creates a file asset field.
+   *
+   * @example
+   * Type.File({ accept: ['application/pdf'], title: 'Datasheet' })
+   */
+  File: (options: {
+    accept: string[];
+    title?: string;
+  }) => TUnsafe<FileValue>;
+  /**
+   * Creates an array of image assets.
+   *
+   * @example
+   * Type.ImageList({ title: 'Gallery', defaultItems: 3 })
+   */
+  ImageList: (options?: {
+    title?: string;
+    defaultItems?: number;
+  }) => TArray<TUnsafe<ImageValue>>;
+  /**
+   * Creates an array of file assets.
+   *
+   * @example
+   * Type.FileList({ accept: ['application/pdf'], title: 'Attachments' })
+   */
+  FileList: (options: {
+    accept: string[];
+    title?: string;
+    defaultItems?: number;
+  }) => TArray<TUnsafe<FileValue>>;
 };
 //#endregion
 export { EmbedURL, FileValue, ImageValue, ItemSettingsBrand, LinkValue, ToMarkdownBuilder, Type$1 as Type };

package/dist/core/lib/contentType.js

@@ -59,14 +59,8 @@ function resolveToMarkdown(builder, settingsShape, scope) {
 	else out.push(entry instanceof FieldToken ? entry.toString() : String(entry));
 	return out;
 }
-function _imageType(options) {
-	const imageDefault = {
-		url: `https://placehold.co/1200x800/f4f4f5/a1a1aa.png?text=${options?.title || "image"}`,
-		alt: "",
-		filename: "placeholder.png",
-		mimeType: "image/png"
-	};
-	const singleSchema = Type.Unsafe({
+function _imageSingle(options) {
+	return Type.Unsafe({
 		type: "object",
 		properties: {
 			url: { type: "string" },
@@ -75,24 +69,28 @@ function _imageType(options) {
 			mimeType: { type: "string" }
 		},
 		accept: ["image/*"],
-		default: imageDefault,
+		default: {
+			url: `https://placehold.co/1200x800/f4f4f5/a1a1aa.png?text=${options?.title || "image"}`,
+			alt: "",
+			filename: "placeholder.png",
+			mimeType: "image/png"
+		},
 		title: options.title,
 		fieldType: "Image"
 	});
-	if (!options.multiple) return singleSchema;
-	const defaultItems = options.defaultItems ?? 0;
-	return Type.Array(singleSchema, {
+}
+function _imageList(options) {
+	return Type.Array(_imageSingle({ title: options.title }), {
 		minItems: 0,
 		maxItems: 100,
 		default: [],
-		defaultItems,
+		defaultItems: options.defaultItems ?? 0,
 		title: options.title,
-		fieldType: "MultipleAssets",
-		arrayItemType: "Image"
+		fieldType: "ImageList"
 	});
 }
-function _fileType(options) {
-	const singleSchema = Type.Unsafe({
+function _fileSingle(options) {
+	return Type.Unsafe({
 		type: "object",
 		properties: {
 			url: { type: "string" },
@@ -110,16 +108,18 @@ function _fileType(options) {
 		title: options.title,
 		fieldType: "File"
 	});
-	if (!options.multiple) return singleSchema;
-	const defaultItems = options.defaultItems ?? 0;
-	return Type.Array(singleSchema, {
+}
+function _fileList(options) {
+	return Type.Array(_fileSingle({
+		accept: options.accept,
+		title: options.title
+	}), {
 		minItems: 0,
 		maxItems: 100,
 		default: [],
-		defaultItems,
+		defaultItems: options.defaultItems ?? 0,
 		title: options.title,
-		fieldType: "MultipleAssets",
-		arrayItemType: "File"
+		fieldType: "FileList"
 	});
 }
 /**
@@ -151,7 +151,7 @@ const Type$1 = {
 	* similar to block-level settings.
 	*
 	* @example
-	* Type.RepeatableItem({
+	* Type.Repeater({
 	*   content: {
 	*     title: Type.String({ default: 'Item' }),
 	*     description: Type.String({ default: 'Description' }),
@@ -165,8 +165,8 @@ const Type$1 = {
 	*   toMarkdown: (c) => [`### ${c.title}`, c.description],
 	* })
 	*/
-	RepeatableItem: (options) => {
-		if (options.minItems < 1) throw new Error("RepeatableItem requires minItems to be at least 1");
+	Repeater: (options) => {
+		if (options.minItems < 1) throw new Error("Repeater requires minItems to be at least 1");
 		const objectSchema = Type.Object(options.content);
 		const defaultItem = {};
 		for (const [key, prop] of Object.entries(objectSchema.properties)) if ("default" in prop) defaultItem[key] = prop.default;
@@ -186,7 +186,7 @@ const Type$1 = {
 			maxItems: options.maxItems,
 			default: defaultArray,
 			title: options.title,
-			fieldType: "RepeatableItem",
+			fieldType: "Repeater",
 			toMarkdown: resolveToMarkdown(options.toMarkdown, options.settings, "item"),
 			itemSettingsSchema,
 			defaultItemSettings: settingsTypeboxSchema ? defaultItemSettings : void 0
@@ -274,8 +274,34 @@ const Type$1 = {
 			fieldType: "Link"
 		});
 	},
-	Image: _imageType,
-	File: _fileType
+	/**
+	* Creates an image asset field.
+	*
+	* @example
+	* Type.Image({ title: 'Hero' })
+	*/
+	Image: (options = {}) => _imageSingle(options),
+	/**
+	* Creates a file asset field.
+	*
+	* @example
+	* Type.File({ accept: ['application/pdf'], title: 'Datasheet' })
+	*/
+	File: (options) => _fileSingle(options),
+	/**
+	* Creates an array of image assets.
+	*
+	* @example
+	* Type.ImageList({ title: 'Gallery', defaultItems: 3 })
+	*/
+	ImageList: (options = {}) => _imageList(options),
+	/**
+	* Creates an array of file assets.
+	*
+	* @example
+	* Type.FileList({ accept: ['application/pdf'], title: 'Attachments' })
+	*/
+	FileList: (options) => _fileList(options)
 };
 
 //#endregion

package/dist/core/lib/fieldTypes.js

@@ -27,16 +27,12 @@ const fieldTypesDictionary = {
 			});
 		}
 	},
-	RepeatableItem: {
-		label: "Repeatable item",
+	Repeater: {
+		label: "Repeater",
 		isScalar: false,
 		isContentEditable: false,
 		hasOwnView: false,
-		getIcon: ({ arrayItemType }) => {
-			if (arrayItemType === "Image") return (props) => /* @__PURE__ */ jsx(Images, { ...props });
-			if (arrayItemType === "File") return (props) => /* @__PURE__ */ jsx(FileIcon, { ...props });
-			return (props) => /* @__PURE__ */ jsx(List, { ...props });
-		},
+		getIcon: () => (props) => /* @__PURE__ */ jsx(List, { ...props }),
 		getLabel: (_value, { schemaTitle, fieldName }) => schemaTitle ?? fieldName,
 		onTreeDoubleClick: ({ blockId }) => {
 			previewStore.send({
@@ -183,23 +179,39 @@ const fieldTypesDictionary = {
 			});
 		}
 	},
-	MultipleAssets: {
-		label: "Multiple assets",
+	ImageList: {
+		label: "Image list",
 		isScalar: false,
 		isContentEditable: false,
 		hasOwnView: true,
-		getIcon: ({ arrayItemType }) => {
-			if (arrayItemType === "File") return (props) => /* @__PURE__ */ jsx(FileIcon, { ...props });
-			return (props) => /* @__PURE__ */ jsx(Images, { ...props });
-		},
+		getIcon: () => (props) => /* @__PURE__ */ jsx(Images, { ...props }),
+		getLabel: (_value, { schemaTitle, fieldName }) => schemaTitle ?? fieldName,
+		onTreeDoubleClick: ({ blockId, fieldName }) => {
+			previewStore.send({
+				type: "selectBlockField",
+				blockId,
+				fieldName,
+				fieldType: "Image"
+			});
+			previewStore.send({
+				type: "openBlockContentSheet",
+				blockId
+			});
+		}
+	},
+	FileList: {
+		label: "File list",
+		isScalar: false,
+		isContentEditable: false,
+		hasOwnView: true,
+		getIcon: () => (props) => /* @__PURE__ */ jsx(FileIcon, { ...props }),
 		getLabel: (_value, { schemaTitle, fieldName }) => schemaTitle ?? fieldName,
-		onTreeDoubleClick: ({ blockId, fieldName }, { arrayItemType }) => {
-			const fieldType = arrayItemType === "File" ? "File" : "Image";
+		onTreeDoubleClick: ({ blockId, fieldName }) => {
 			previewStore.send({
 				type: "selectBlockField",
 				blockId,
 				fieldName,
-				fieldType
+				fieldType: "File"
 			});
 			previewStore.send({
 				type: "openBlockContentSheet",

package/dist/core/lib/imageTransform.js

@@ -0,0 +1,76 @@
+//#region src/core/lib/imageTransform.ts
+const DEFAULT_QUALITY = 85;
+const DEFAULT_SRCSET_WIDTHS = [
+	320,
+	640,
+	960,
+	1280,
+	1920
+];
+const DEFAULT_SRC_WIDTH = 1280;
+const DEFAULT_SIZES = "100vw";
+const MIN_OPTIMIZE_SIZE = 50 * 1024;
+function isNonProxiedHostname(hostname) {
+	if (hostname === "localhost") return true;
+	if (hostname === "127.0.0.1") return true;
+	if (hostname === "0.0.0.0") return true;
+	if (hostname === "::1") return true;
+	if (hostname.endsWith(".local")) return true;
+	if (hostname.endsWith(".localhost")) return true;
+	return false;
+}
+function parseUrl(url) {
+	try {
+		return new URL(url);
+	} catch {
+		return null;
+	}
+}
+function isTransformableUrl(parsed) {
+	if (isNonProxiedHostname(parsed.hostname)) return false;
+	if (parsed.pathname.startsWith("/cdn-cgi/image/")) return false;
+	if (!parsed.pathname.startsWith("/files/serve/")) return false;
+	return true;
+}
+function isNonTransformableMimeType(mimeType) {
+	if (!mimeType) return false;
+	return mimeType === "image/svg+xml";
+}
+function isRasterImage(mimeType) {
+	if (!mimeType) return false;
+	if (!mimeType.startsWith("image/")) return false;
+	return mimeType !== "image/svg+xml";
+}
+function transformImageUrl(url, options = {}) {
+	if (!url) return url;
+	if (isNonTransformableMimeType(options.mimeType)) return url;
+	if (options.size != null && options.size < MIN_OPTIMIZE_SIZE) return url;
+	const parsed = parseUrl(url);
+	if (!parsed) return url;
+	if (!isTransformableUrl(parsed)) return url;
+	const parts = [
+		`format=auto`,
+		`quality=${options.quality ?? DEFAULT_QUALITY}`,
+		`fit=scale-down`
+	];
+	if (options.width != null) parts.push(`width=${options.width}`);
+	return `${parsed.origin}/cdn-cgi/image/${parts.join(",")}${parsed.pathname}${parsed.search}`;
+}
+function buildImageSrcSet(url, mimeType, size) {
+	if (!url) return void 0;
+	if (isNonTransformableMimeType(mimeType)) return void 0;
+	if (size != null && size < MIN_OPTIMIZE_SIZE) return void 0;
+	const parsed = parseUrl(url);
+	if (!parsed) return void 0;
+	if (!isTransformableUrl(parsed)) return void 0;
+	return DEFAULT_SRCSET_WIDTHS.map((w) => `${transformImageUrl(url, { width: w })} ${w}w`).join(", ");
+}
+function getDefaultImageWidth() {
+	return DEFAULT_SRC_WIDTH;
+}
+function getDefaultImageSizes() {
+	return DEFAULT_SIZES;
+}
+
+//#endregion
+export { buildImageSrcSet, getDefaultImageSizes, getDefaultImageWidth, isRasterImage, transformImageUrl };

package/dist/features/content/CamoxContent.js

@@ -20,9 +20,9 @@ import { FloatingToolbar } from "@camox/ui/floating-toolbar";
 //#region src/features/content/CamoxContent.tsx
 const CamoxContent = () => {
 	const $ = c(53);
-	if ($[0] !== "41ba2e77784594f1ce07296c7a619951f1b5765164f78c588070f4799d74d906") {
+	if ($[0] !== "8cb16b8f9bc49d4116b9897e9fc510ae1a05eaf98230f67c2f9664ca4f86e3bd") {
 		for (let $i = 0; $i < 53; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "41ba2e77784594f1ce07296c7a619951f1b5765164f78c588070f4799d74d906";
+		$[0] = "8cb16b8f9bc49d4116b9897e9fc510ae1a05eaf98230f67c2f9664ca4f86e3bd";
 	}
 	const projectSlug = useProjectSlug();
 	let t0;
@@ -268,7 +268,7 @@ const CamoxContent = () => {
 	let t22;
 	if ($[48] !== t18 || $[49] !== t19 || $[50] !== t20 || $[51] !== t21) {
 		t22 = /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-1 flex-row",
+			className: "flex min-h-0 flex-1 flex-row",
 			children: [
 				t11,
 				t18,