@oktis-works/admin 0.23.2 → 0.24.0

package/dist/server/chunks/{FieldRenderer_D4dcZjgt.mjs → FieldRenderer_RlFoxao4.mjs}

@@ -1,5 +1,5 @@
-import "./i18n_C-sgJSi1.mjs";
-import { _ as createMemo$1, h as Show2, u as For2, v as createSignal$1 } from "./DashboardLayout_D6zphdT0.mjs";
+import { r as apiClient } from "./i18n_Bp0_xO2v.mjs";
+import { d as For2, g as Show2, l as Button, m as Pagination, p as Modal, s as loadPluginComponent, v as createMemo$1, y as createSignal$1 } from "./DashboardLayout_Bz8ZBDme.mjs";
 import { Dynamic, createComponent, escape, memo, ssr, ssrAttribute, ssrHydrationKey } from "solid-js/web";
 import { For, Match, Show, Switch, createMemo, createSignal, onMount } from "solid-js";
 //#region ../../packages/validation/dist/client-validate.js
@@ -169,6 +169,7 @@ function validateTrueFalse(value, field, errors) {
 	});
 }
 function validateMediaItem(item, config, field, errors) {
+	if (typeof item === "string" && item.trim() !== "") return;
 	if (typeof item !== "object" || item === null || Array.isArray(item)) {
 		errors.push({
 			field,
@@ -468,33 +469,33 @@ function validateFieldClient(field, value) {
 }
 //#endregion
 //#region src/components/content/RelationshipPicker.tsx
-var _tmpl$$2 = [
+var _tmpl$$3 = [
 	"<ul",
 	" class=\"relationship-picker__selection\">",
 	"</ul>"
 ];
-var _tmpl$2$2 = ["<li", " class=\"relationship-picker__empty\">Buscando...</li>"];
-var _tmpl$3$2 = ["<li", " class=\"relationship-picker__empty\">Nenhum resultado</li>"];
-var _tmpl$4$2 = [
+var _tmpl$2$3 = ["<li", " class=\"relationship-picker__empty\">Buscando...</li>"];
+var _tmpl$3$3 = ["<li", " class=\"relationship-picker__empty\">Nenhum resultado</li>"];
+var _tmpl$4$3 = [
 	"<ul",
 	" class=\"relationship-picker__results\"><!--$-->",
 	"<!--/--><!--$-->",
 	"<!--/--><!--$-->",
 	"<!--/--></ul>"
 ];
-var _tmpl$5$2 = [
+var _tmpl$5$3 = [
 	"<div",
 	" class=\"relationship-picker\"><!--$-->",
 	"<!--/--><input type=\"search\" class=\"input\"",
 	"><!--$-->",
 	"<!--/--></div>"
 ];
-var _tmpl$6$2 = [
+var _tmpl$6$3 = [
 	"<li",
 	"><!--$-->",
 	"<!--/--><button type=\"button\" aria-label=\"Remover\">×</button></li>"
 ];
-var _tmpl$7$2 = [
+var _tmpl$7$3 = [
 	"<li",
 	"><button type=\"button\"><!--$-->",
 	"<!--/--><span class=\"relationship-picker__type\">",
@@ -511,16 +512,16 @@ function RelationshipPicker(props) {
 		if (Array.isArray(value)) return value.map(String);
 		return value ? [String(value)] : [];
 	});
-	return ssr(_tmpl$5$2, ssrHydrationKey(), escape(createComponent(Show2, {
+	return ssr(_tmpl$5$3, ssrHydrationKey(), escape(createComponent(Show2, {
 		get when() {
 			return selected().length > 0 || selectedIds().length > 0;
 		},
 		get children() {
-			return ssr(_tmpl$$2, ssrHydrationKey(), escape(createComponent(For2, {
+			return ssr(_tmpl$$3, ssrHydrationKey(), escape(createComponent(For2, {
 				get each() {
 					return selected();
 				},
-				children: (entry) => ssr(_tmpl$6$2, ssrHydrationKey(), escape(entry.title))
+				children: (entry) => ssr(_tmpl$6$3, ssrHydrationKey(), escape(entry.title))
 			})));
 		}
 	})), ssrAttribute("placeholder", escape(props.placeholder ?? "Buscar conteúdo...", true), false) + ssrAttribute("value", escape(query(), true), false), escape(createComponent(Show2, {
@@ -528,24 +529,24 @@ function RelationshipPicker(props) {
 			return memo(() => !!open())() && (loading() || results().length > 0);
 		},
 		get children() {
-			return ssr(_tmpl$4$2, ssrHydrationKey(), escape(createComponent(Show2, {
+			return ssr(_tmpl$4$3, ssrHydrationKey(), escape(createComponent(Show2, {
 				get when() {
 					return loading();
 				},
 				get children() {
-					return ssr(_tmpl$2$2, ssrHydrationKey());
+					return ssr(_tmpl$2$3, ssrHydrationKey());
 				}
 			})), escape(createComponent(For2, {
 				get each() {
 					return results();
 				},
-				children: (option) => ssr(_tmpl$7$2, ssrHydrationKey(), escape(option.title), escape(option.type))
+				children: (option) => ssr(_tmpl$7$3, ssrHydrationKey(), escape(option.title), escape(option.type))
 			})), escape(createComponent(Show2, {
 				get when() {
 					return memo(() => !!!loading())() && results().length === 0;
 				},
 				get children() {
-					return ssr(_tmpl$3$2, ssrHydrationKey());
+					return ssr(_tmpl$3$3, ssrHydrationKey());
 				}
 			})));
 		}
@@ -553,36 +554,36 @@ function RelationshipPicker(props) {
 }
 //#endregion
 //#region src/content/PluginFieldRenderer.tsx
-var _tmpl$$1 = ["<div", " class=\"fb-plugin-field-renderer fb-plugin-field-renderer--loading\"><div class=\"fb-spinner\" aria-hidden=\"true\"></div><span>Carregando editor...</span></div>"];
-var _tmpl$2$1 = [
+var _tmpl$$2 = ["<div", " class=\"fb-plugin-field-renderer fb-plugin-field-renderer--loading\"><div class=\"fb-spinner\" aria-hidden=\"true\"></div><span>Carregando editor...</span></div>"];
+var _tmpl$2$2 = [
 	"<div",
 	" class=\"fb-renderer-error\"><i data-lucide=\"alert-circle\" aria-hidden=\"true\"></i><span>",
 	"</span></div>"
 ];
-var _tmpl$3$1 = [
+var _tmpl$3$2 = [
 	"<div",
 	" class=\"fb-plugin-field-renderer fb-plugin-field-renderer--fallback\"><!--$-->",
 	"<!--/--><!--$-->",
 	"<!--/--></div>"
 ];
-var _tmpl$4$1 = [
+var _tmpl$4$2 = [
 	"<div",
 	" class=\"fb-plugin-field-renderer\">",
 	"</div>"
 ];
-var _tmpl$5$1 = [
+var _tmpl$5$2 = [
 	"<textarea",
 	" class=\"input fb-plugin-fallback-textarea\"",
 	"",
 	" spellcheck=\"false\"></textarea>"
 ];
-var _tmpl$6$1 = [
+var _tmpl$6$2 = [
 	"<input",
 	" type=\"number\" class=\"input\"",
 	"",
 	">"
 ];
-var _tmpl$7$1 = [
+var _tmpl$7$2 = [
 	"<input",
 	" type=\"text\" class=\"input\"",
 	"",
@@ -596,8 +597,8 @@ function PluginFieldRenderer(props) {
 	onMount(async () => {
 		const pathsToTry = [props.adminRendererPath, props.adminComponentPath].filter(Boolean);
 		for (const path of pathsToTry) try {
-			const module = await import(path);
-			const Comp = module.default || module.PluginFieldRenderer || module.PluginFieldConfig || Object.values(module)[0];
+			const module = await loadPluginComponent(path);
+			const Comp = module["default"] || module["PluginFieldRenderer"] || module["PluginFieldConfig"];
 			if (Comp) {
 				setComponent(Comp);
 				setLoading(false);
@@ -620,7 +621,7 @@ function PluginFieldRenderer(props) {
 					return loading();
 				},
 				get children() {
-					return ssr(_tmpl$$1, ssrHydrationKey());
+					return ssr(_tmpl$$2, ssrHydrationKey());
 				}
 			}),
 			createComponent(Match, {
@@ -628,12 +629,12 @@ function PluginFieldRenderer(props) {
 					return error() || !Component();
 				},
 				get children() {
-					return ssr(_tmpl$3$1, ssrHydrationKey(), escape(createComponent(Show, {
+					return ssr(_tmpl$3$2, ssrHydrationKey(), escape(createComponent(Show, {
 						get when() {
 							return error();
 						},
 						get children() {
-							return ssr(_tmpl$2$1, ssrHydrationKey(), escape(error()));
+							return ssr(_tmpl$2$2, ssrHydrationKey(), escape(error()));
 						}
 					})), escape(createComponent(FallbackRenderer, {
 						get field() {
@@ -646,7 +647,7 @@ function PluginFieldRenderer(props) {
 						get disabled() {
 							return props.disabled;
 						},
-						get _t() {
+						get t() {
 							return props._t;
 						}
 					})));
@@ -655,7 +656,7 @@ function PluginFieldRenderer(props) {
 			createComponent(Match, {
 				when: true,
 				get children() {
-					return ssr(_tmpl$4$1, ssrHydrationKey(), escape(createComponent(Dynamic, {
+					return ssr(_tmpl$4$2, ssrHydrationKey(), escape(createComponent(Dynamic, {
 						get component() {
 							return Component();
 						},
@@ -669,7 +670,7 @@ function PluginFieldRenderer(props) {
 						get disabled() {
 							return props.disabled;
 						},
-						get _t() {
+						get t() {
 							return props._t;
 						}
 					})));
@@ -683,9 +684,384 @@ function FallbackRenderer(props) {
 	const inputType = field.config?.["inputType"] || "textarea";
 	const placeholder = field.config?.["placeholder"] || "";
 	const rows = field.config?.["rows"] || 4;
-	if (inputType === "textarea" || inputType === "code" || inputType === "markdown") return ssr(_tmpl$5$1, ssrHydrationKey(), ssrAttribute("value", escape(value, true), false) + ssrAttribute("placeholder", escape(placeholder, true), false) + ssrAttribute("rows", escape(rows, true), false), ssrAttribute("disabled", disabled, true));
-	if (inputType === "number") return ssr(_tmpl$6$1, ssrHydrationKey(), ssrAttribute("value", escape(value, true), false) + ssrAttribute("placeholder", escape(placeholder, true), false), ssrAttribute("disabled", disabled, true));
-	return ssr(_tmpl$7$1, ssrHydrationKey(), ssrAttribute("value", escape(value, true), false) + ssrAttribute("placeholder", escape(placeholder, true), false), ssrAttribute("disabled", disabled, true));
+	if (inputType === "textarea" || inputType === "code" || inputType === "markdown") return ssr(_tmpl$5$2, ssrHydrationKey(), ssrAttribute("value", escape(value, true), false) + ssrAttribute("placeholder", escape(placeholder, true), false) + ssrAttribute("rows", escape(rows, true), false), ssrAttribute("disabled", disabled, true));
+	if (inputType === "number") return ssr(_tmpl$6$2, ssrHydrationKey(), ssrAttribute("value", escape(value, true), false) + ssrAttribute("placeholder", escape(placeholder, true), false), ssrAttribute("disabled", disabled, true));
+	return ssr(_tmpl$7$2, ssrHydrationKey(), ssrAttribute("value", escape(value, true), false) + ssrAttribute("placeholder", escape(placeholder, true), false), ssrAttribute("disabled", disabled, true));
+}
+//#endregion
+//#region src/components/media/MediaPickerModal.tsx
+var _tmpl$$1 = [
+	"<div",
+	" class=\"notice notice--error media-picker-modal__error\"><span>",
+	"</span><!--$-->",
+	"<!--/--></div>"
+];
+var _tmpl$2$1 = ["<p", " class=\"muted\">Loading media…</p>"];
+var _tmpl$3$1 = ["<p", " class=\"muted\">No media found.</p>"];
+var _tmpl$4$1 = [
+	"<div",
+	" class=\"media-picker-modal__order\" aria-label=\"Selected image order\"><strong>Gallery order</strong><!--$-->",
+	"<!--/--></div>"
+];
+var _tmpl$5$1 = [
+	"<div",
+	" class=\"media-picker-modal\"><div class=\"media-picker-modal__toolbar\"><input class=\"input media-picker-modal__search\" type=\"search\" name=\"media-search\" aria-label=\"Search media\" placeholder=\"Search by filename or alt text\"",
+	"><!--$-->",
+	"<!--/--><label class=\"",
+	"\"><!--$-->",
+	"<!--/--><input type=\"file\"",
+	"",
+	" hidden></label></div><!--$-->",
+	"<!--/--><!--$-->",
+	"<!--/--><!--$-->",
+	"<!--/--><div class=\"media-picker-modal__body\"><div><div class=\"media-picker-modal__grid\">",
+	"</div><!--$-->",
+	"<!--/--></div><!--$-->",
+	"<!--/--></div><!--$-->",
+	"<!--/--><div class=\"media-picker-modal__actions\"><span class=\"muted\">",
+	"</span><div><!--$-->",
+	"<!--/--><!--$-->",
+	"<!--/--></div></div></div>"
+];
+var _tmpl$6$1 = ["<img", " loading=\"lazy\">"];
+var _tmpl$7$1 = [
+	"<button",
+	" type=\"button\" class=\"",
+	"\"><div class=\"media-card__preview\">",
+	"</div><span class=\"media-card__name\"",
+	">",
+	"</span></button>"
+];
+var _tmpl$8$1 = [
+	"<span",
+	" class=\"media-card__ext\">",
+	"</span>"
+];
+var _tmpl$9$1 = [
+	"<div",
+	" class=\"media-picker-modal__order-item\"><span><!--$-->",
+	"<!--/-->. <!--$-->",
+	"<!--/--></span><!--$-->",
+	"<!--/--><!--$-->",
+	"<!--/--></div>"
+];
+var _tmpl$0$1 = ["<p", " class=\"muted media-picker-modal__empty-details\">Click an item to inspect its details.</p>"];
+var _tmpl$1$1 = ["<img", ">"];
+var _tmpl$10$1 = ["<dt", ">Dimensions</dt>"];
+var _tmpl$11$1 = [
+	"<dd",
+	">",
+	"</dd>"
+];
+var _tmpl$12$1 = ["<dt", ">Metadata</dt>"];
+var _tmpl$13$1 = [
+	"<dd",
+	"><code>",
+	"</code></dd>"
+];
+var _tmpl$14$1 = [
+	"<aside",
+	" class=\"media-picker-modal__details\"><div class=\"media-modal__preview\">",
+	"</div><h4>",
+	"</h4><dl class=\"media-details__list\"><dt>Filename</dt><dd>",
+	"</dd><dt>Extension</dt><dd>",
+	"</dd><dt>MIME type</dt><dd>",
+	"</dd><dt>Size</dt><dd>",
+	"</dd><!--$-->",
+	"<!--/--><dt>URL</dt><dd><code>",
+	"</code></dd><dt>Uploaded</dt><dd>",
+	"</dd><dt>Title</dt><dd><input class=\"input\"",
+	"></dd><dt>Alt text</dt><dd><input class=\"input\"",
+	"></dd><dt>Caption</dt><dd><textarea class=\"input\" rows=\"2\"",
+	"></textarea></dd><dt>Description</dt><dd><textarea class=\"input\" rows=\"3\"",
+	"></textarea></dd><!--$-->",
+	"<!--/--></dl><!--$-->",
+	"<!--/--></aside>"
+];
+var _tmpl$15$1 = [
+	"<span",
+	" class=\"media-card__ext media-modal__file-icon\">",
+	"</span>"
+];
+var PAGE_SIZE = 18;
+function displayTitle(media) {
+	return media.title?.trim() || media.filename;
+}
+function extension(media) {
+	return media.filename.split(".").pop()?.toUpperCase() || "FILE";
+}
+function formatSize(bytes) {
+	if (!Number.isFinite(bytes)) return "—";
+	if (bytes < 1024) return `${bytes} B`;
+	if (bytes < 1048576) return `${(bytes / 1024).toFixed(1)} KB`;
+	return `${(bytes / 1048576).toFixed(1)} MB`;
+}
+function isImage(media) {
+	return media.mime_type.startsWith("image/");
+}
+function dimensions(media) {
+	const width = Number(media.metadata?.["width"]);
+	const height = Number(media.metadata?.["height"]);
+	return width > 0 && height > 0 ? `${width} × ${height} px` : null;
+}
+function selectedIds(value) {
+	return (Array.isArray(value) ? value : value ? [value] : []).map((media) => media.id);
+}
+function MediaPickerModal(props) {
+	const [items, setItems] = createSignal([]);
+	const [total, setTotal] = createSignal(0);
+	const [page, setPage] = createSignal(1);
+	const [search, setSearch] = createSignal("");
+	const [selected, setSelected] = createSignal(null);
+	const [selectedItems, setSelectedItems] = createSignal([]);
+	const [loading, setLoading] = createSignal(false);
+	const [error, setError] = createSignal("");
+	const [uploading, setUploading] = createSignal(false);
+	const [metadataSaving, setMetadataSaving] = createSignal(false);
+	const [metadataDirty, setMetadataDirty] = createSignal(false);
+	const [titleValue, setTitleValue] = createSignal("");
+	const [altValue, setAltValue] = createSignal("");
+	const [captionValue, setCaptionValue] = createSignal("");
+	const [descriptionValue, setDescriptionValue] = createSignal("");
+	const title = () => props.mode === "gallery" ? "Select images" : props.mode === "image" ? "Select an image" : "Select a file";
+	const mimeType = () => props.mode === "file" ? void 0 : "image/*";
+	const mediaUrl = (media) => apiClient.mediaUrl(media.url);
+	const load = async () => {
+		setLoading(true);
+		setError("");
+		try {
+			const result = await apiClient.listMedia({
+				page: page(),
+				limit: PAGE_SIZE,
+				search: search() || void 0,
+				mimeType: mimeType()
+			});
+			setItems(result.data ?? []);
+			setTotal(result.total ?? 0);
+		} catch (err) {
+			setError(err instanceof Error ? err.message : String(err));
+		} finally {
+			setLoading(false);
+		}
+	};
+	onMount(() => {
+		const current = Array.isArray(props.value) ? props.value : props.value ? [props.value] : [];
+		setSelectedItems(current);
+		setSelected(current[0] ?? null);
+		setTitleValue(current[0]?.title ?? "");
+		setAltValue(current[0]?.alt ?? "");
+		setCaptionValue(current[0]?.caption ?? "");
+		setDescriptionValue(current[0]?.description ?? "");
+		load();
+	});
+	const confirm = () => {
+		if (metadataDirty()) {
+			setError("Save media details before selecting this attachment.");
+			return;
+		}
+		if (props.mode === "gallery") {
+			if (selectedItems().length > 0) props.onSelect(selectedItems());
+			return;
+		}
+		const media = selected();
+		if (media) props.onSelect(media);
+	};
+	const saveMetadata = async () => {
+		const media = selected();
+		if (!media) return;
+		setMetadataSaving(true);
+		setError("");
+		try {
+			const updated = await apiClient.updateMedia(media.id, {
+				title: titleValue(),
+				alt: altValue(),
+				caption: captionValue(),
+				description: descriptionValue()
+			});
+			setSelected(updated);
+			setSelectedItems((current) => current.map((item) => item.id === updated.id ? updated : item));
+			setMetadataDirty(false);
+		} catch (err) {
+			setError(err instanceof Error ? err.message : String(err));
+		} finally {
+			setMetadataSaving(false);
+		}
+	};
+	const moveSelected = (index, offset) => {
+		const nextIndex = index + offset;
+		const current = [...selectedItems()];
+		if (nextIndex < 0 || nextIndex >= current.length) return;
+		const currentItem = current[index];
+		const nextItem = current[nextIndex];
+		if (!currentItem || !nextItem) return;
+		current[index] = nextItem;
+		current[nextIndex] = currentItem;
+		setSelectedItems(current);
+	};
+	const searchNow = async () => {
+		setPage(1);
+		await load();
+	};
+	return createComponent(Modal, {
+		get open() {
+			return props.open;
+		},
+		get title() {
+			return title();
+		},
+		get onClose() {
+			return props.onClose;
+		},
+		get children() {
+			return ssr(_tmpl$5$1, ssrHydrationKey(), ssrAttribute("value", escape(search(), true), false), escape(createComponent(Button, {
+				variant: "secondary",
+				onClick: () => void searchNow(),
+				children: "Search"
+			})), `btn btn-secondary ${uploading() ? "btn-loading" : ""}`, uploading() ? "Uploading…" : "Upload", ssrAttribute("accept", props.mode === "file" ? escape(void 0, true) : "image/*", false), ssrAttribute("disabled", uploading(), true), escape(createComponent(Show, {
+				get when() {
+					return error();
+				},
+				get children() {
+					return ssr(_tmpl$$1, ssrHydrationKey(), escape(error()), escape(createComponent(Button, {
+						variant: "secondary",
+						size: "sm",
+						onClick: () => void load(),
+						children: "Retry"
+					})));
+				}
+			})), escape(createComponent(Show, {
+				get when() {
+					return loading();
+				},
+				get children() {
+					return ssr(_tmpl$2$1, ssrHydrationKey());
+				}
+			})), escape(createComponent(Show, {
+				get when() {
+					return memo(() => !!!loading())() && items().length === 0;
+				},
+				get children() {
+					return ssr(_tmpl$3$1, ssrHydrationKey());
+				}
+			})), escape(createComponent(For, {
+				get each() {
+					return items();
+				},
+				children: (media) => ssr(_tmpl$7$1, ssrHydrationKey(), `media-card ${selectedIds(selectedItems()).includes(media.id) ? "media-card--selected" : ""}`, escape(createComponent(Show, {
+					get when() {
+						return isImage(media);
+					},
+					get fallback() {
+						return ssr(_tmpl$8$1, ssrHydrationKey(), escape(extension(media)));
+					},
+					get children() {
+						return ssr(_tmpl$6$1, ssrHydrationKey() + ssrAttribute("src", escape(mediaUrl(media), true), false) + ssrAttribute("alt", escape(media.alt ?? displayTitle(media), true), false));
+					}
+				})), ssrAttribute("title", escape(displayTitle(media), true), false), escape(displayTitle(media)))
+			})), escape(createComponent(Show, {
+				get when() {
+					return memo(() => props.mode === "gallery")() && selectedItems().length > 0;
+				},
+				get children() {
+					return ssr(_tmpl$4$1, ssrHydrationKey(), escape(createComponent(For, {
+						get each() {
+							return selectedItems();
+						},
+						children: (media, index) => ssr(_tmpl$9$1, ssrHydrationKey(), escape(index()) + 1, escape(displayTitle(media)), escape(createComponent(Button, {
+							variant: "ghost",
+							size: "sm",
+							get disabled() {
+								return index() === 0;
+							},
+							onClick: () => moveSelected(index(), -1),
+							children: "↑"
+						})), escape(createComponent(Button, {
+							variant: "ghost",
+							size: "sm",
+							get disabled() {
+								return index() === selectedItems().length - 1;
+							},
+							onClick: () => moveSelected(index(), 1),
+							children: "↓"
+						})))
+					})));
+				}
+			})), escape(createComponent(Show, {
+				get when() {
+					return selected();
+				},
+				get fallback() {
+					return ssr(_tmpl$0$1, ssrHydrationKey());
+				},
+				children: (media) => ssr(_tmpl$14$1, ssrHydrationKey(), escape(createComponent(Show, {
+					get when() {
+						return isImage(media());
+					},
+					get fallback() {
+						return ssr(_tmpl$15$1, ssrHydrationKey(), escape(extension(media())));
+					},
+					get children() {
+						return ssr(_tmpl$1$1, ssrHydrationKey() + ssrAttribute("src", escape(mediaUrl(media()), true), false) + ssrAttribute("alt", escape(media().alt ?? displayTitle(media()), true), false));
+					}
+				})), escape(displayTitle(media())), escape(media().filename), escape(extension(media())), escape(media().mime_type), escape(formatSize(media().size)), escape(createComponent(Show, {
+					get when() {
+						return dimensions(media());
+					},
+					get children() {
+						return [ssr(_tmpl$10$1, ssrHydrationKey()), ssr(_tmpl$11$1, ssrHydrationKey(), escape(dimensions(media())))];
+					}
+				})), escape(mediaUrl(media())), media().created_at ? escape(new Date(media().created_at).toLocaleString()) : "—", ssrAttribute("value", escape(titleValue(), true), false), ssrAttribute("value", escape(altValue(), true), false), ssrAttribute("value", escape(captionValue(), true), false), ssrAttribute("value", escape(descriptionValue(), true), false), escape(createComponent(Show, {
+					get when() {
+						return memo(() => !!media().metadata)() && Object.keys(media().metadata ?? {}).length > 0;
+					},
+					get children() {
+						return [ssr(_tmpl$12$1, ssrHydrationKey()), ssr(_tmpl$13$1, ssrHydrationKey(), escape(JSON.stringify(media().metadata)))];
+					}
+				})), escape(createComponent(Show, {
+					get when() {
+						return metadataDirty();
+					},
+					get children() {
+						return createComponent(Button, {
+							variant: "secondary",
+							get disabled() {
+								return metadataSaving();
+							},
+							onClick: () => void saveMetadata(),
+							get children() {
+								return metadataSaving() ? "Saving…" : "Save media details";
+							}
+						});
+					}
+				})))
+			})), escape(createComponent(Pagination, {
+				get page() {
+					return page();
+				},
+				limit: PAGE_SIZE,
+				get total() {
+					return total();
+				},
+				onPageChange: (next) => {
+					setPage(next);
+					load();
+				}
+			})), metadataDirty() ? "Unsaved media details" : props.mode === "gallery" ? `${escape(selectedItems().length)} image(s) selected` : selected() ? "1 item selected" : "No item selected", escape(createComponent(Button, {
+				variant: "secondary",
+				get onClick() {
+					return props.onClose;
+				},
+				children: "Cancel"
+			})), escape(createComponent(Button, {
+				variant: "primary",
+				get disabled() {
+					return memo(() => props.mode === "gallery")() ? selectedItems().length === 0 : !selected();
+				},
+				onClick: confirm,
+				children: "Select"
+			})));
+		}
+	});
 }
 //#endregion
 //#region src/components/content/FieldRenderer.tsx
@@ -829,17 +1205,22 @@ var _tmpl$21 = [
 	"><option value=\"_self\">Mesma janela</option><option value=\"_blank\">Nova janela</option></select></div>"
 ];
 var _tmpl$22 = [
+	"<input",
+	" type=\"text\" class=\"input\"",
+	" readonly aria-readonly=\"true\">"
+];
+var _tmpl$23 = [
 	"<div",
 	" class=\"field-renderer__rows\"><!--$-->",
 	"<!--/--><button type=\"button\" class=\"btn\">+ Adicionar linha</button></div>"
 ];
-var _tmpl$23 = [
+var _tmpl$24 = [
 	"<div",
 	" class=\"field-renderer__rows\"><!--$-->",
 	"<!--/--><select class=\"input\" value><option value>+ Adicionar layout...</option><!--$-->",
 	"<!--/--></select></div>"
 ];
-var _tmpl$24 = [
+var _tmpl$25 = [
 	"<div",
 	" class=\"field-renderer__row\"><div class=\"field-renderer__row-header\"><span><!--$-->",
 	"<!--/--> <!--$-->",
@@ -848,29 +1229,53 @@ var _tmpl$24 = [
 	">↓</button><button type=\"button\" class=\"btn btn-danger\">Remover</button></div><!--$-->",
 	"<!--/--></div>"
 ];
-var _tmpl$25 = [
+var _tmpl$26 = [
 	"<p",
 	" class=\"field-renderer__instructions\">Layout \"<!--$-->",
 	"<!--/-->\" não encontrado.</p>"
 ];
-var _tmpl$26 = [
+var _tmpl$27 = [
 	"<fieldset",
 	" class=\"field-renderer__group\">",
 	"</fieldset>"
 ];
-var _tmpl$27 = ["<input", " type=\"text\" class=\"input\">"];
-var _tmpl$28 = [
+var _tmpl$28 = ["<input", " type=\"text\" class=\"input\">"];
+var _tmpl$29 = [
 	"<div",
 	" class=\"field-renderer__row\"><div class=\"field-renderer__row-header\"><span>Linha <!--$-->",
 	"<!--/--></span><button type=\"button\" class=\"btn btn-danger\">Remover</button></div><!--$-->",
 	"<!--/--></div>"
 ];
-var _tmpl$29 = [
-	"<input",
-	" type=\"file\" class=\"input\"",
-	">"
+var _tmpl$30 = ["<p", " class=\"notice notice--warning\" role=\"alert\">The selected media is no longer available. Choose a replacement.</p>"];
+var _tmpl$31 = [
+	"<div",
+	" class=\"media-field-input__preview\">",
+	"</div>"
+];
+var _tmpl$32 = ["<button", " type=\"button\" class=\"btn btn-ghost\">Remove</button>"];
+var _tmpl$33 = [
+	"<div",
+	" class=\"media-field-input\"><!--$-->",
+	"<!--/--><!--$-->",
+	"<!--/--><div class=\"media-field-input__actions\"><button type=\"button\" class=\"btn btn-secondary\">",
+	"</button><!--$-->",
+	"<!--/--></div><!--$-->",
+	"<!--/--></div>"
+];
+var _tmpl$34 = ["<img", ">"];
+var _tmpl$35 = [
+	"<div",
+	" class=\"media-field-input__item\"><!--$-->",
+	"<!--/--><span",
+	">",
+	"</span></div>"
 ];
-var _tmpl$30 = [
+var _tmpl$36 = [
+	"<span",
+	">",
+	"</span>"
+];
+var _tmpl$37 = [
 	"<option",
 	"",
 	">",
@@ -1016,21 +1421,25 @@ function FieldControl(props) {
 		case "time_picker": return ssr(_tmpl$18, ssrHydrationKey(), ssrAttribute("value", escape(props.value ?? config()["defaultValue"] ?? "", true), false));
 		case "color_picker": return ssr(_tmpl$19, ssrHydrationKey(), ssrAttribute("value", escape(props.value ?? config()["defaultValue"] ?? "", true), false));
 		case "image":
-		case "file": return createComponent(MediaPickerInput, {
-			multiple: false,
+		case "file": return createComponent(MediaFieldInput, {
+			get mode() {
+				return props.field.type;
+			},
+			get value() {
+				return props.value;
+			},
 			get onChange() {
 				return props.onChange;
-			},
-			get accept() {
-				return props.field.type === "image" ? "image/*" : void 0;
 			}
 		});
-		case "gallery": return createComponent(MediaPickerInput, {
-			multiple: true,
+		case "gallery": return createComponent(MediaFieldInput, {
+			mode: "gallery",
+			get value() {
+				return props.value;
+			},
 			get onChange() {
 				return props.onChange;
-			},
-			accept: "image/*"
+			}
 		});
 		case "google_map": return ssr(_tmpl$20, ssrHydrationKey(), ssrAttribute("value", escape(props.value?.["address"] ?? "", true), false), ssrAttribute("value", escape(props.value?.["lat"] ?? "", true), false), ssrAttribute("value", escape(props.value?.["lng"] ?? "", true), false));
 		case "link": return ssr(_tmpl$21, ssrHydrationKey(), ssrAttribute("value", escape(props.value?.["url"] ?? "", true), false), ssrAttribute("value", escape(props.value?.["target"] ?? "_self", true), false));
@@ -1049,8 +1458,7 @@ function FieldControl(props) {
 				return props.onChange;
 			}
 		});
-		case "taxonomy":
-		case "user": return createComponent(RelationshipSelector, {
+		case "taxonomy": return createComponent(RelationshipSelector, {
 			get field() {
 				return props.field;
 			},
@@ -1064,9 +1472,25 @@ function FieldControl(props) {
 				return config()["multiple"] !== false;
 			}
 		});
+		case "user":
+			if (props.field.isCoreField && props.field.coreFieldKey === "author") return ssr(_tmpl$22, ssrHydrationKey(), ssrAttribute("value", escape(props.value ?? "", true), false));
+			return createComponent(RelationshipSelector, {
+				get field() {
+					return props.field;
+				},
+				get value() {
+					return props.value;
+				},
+				get onChange() {
+					return props.onChange;
+				},
+				get multiple() {
+					return config()["multiple"] !== false;
+				}
+			});
 		case "repeater": {
 			const rows = () => Array.isArray(props.value) ? props.value : [];
-			return ssr(_tmpl$22, ssrHydrationKey(), escape(createComponent(For, {
+			return ssr(_tmpl$23, ssrHydrationKey(), escape(createComponent(For, {
 				get each() {
 					return rows();
 				},
@@ -1103,7 +1527,7 @@ function FieldControl(props) {
 					data: row
 				}));
 			};
-			return ssr(_tmpl$23, ssrHydrationKey(), escape(createComponent(For, {
+			return ssr(_tmpl$24, ssrHydrationKey(), escape(createComponent(For, {
 				get each() {
 					return rows();
 				},
@@ -1113,12 +1537,12 @@ function FieldControl(props) {
 						const { fc_layout: _layout, ...data } = row.data;
 						return data;
 					};
-					return ssr(_tmpl$24, ssrHydrationKey(), escape(layout()?.label || row.fc_layout || "Linha"), escape(index()) + 1, ssrAttribute("disabled", index() === 0, true), ssrAttribute("disabled", index() === rows().length - 1, true), escape(createComponent(Show, {
+					return ssr(_tmpl$25, ssrHydrationKey(), escape(layout()?.label || row.fc_layout || "Linha"), escape(index()) + 1, ssrAttribute("disabled", index() === 0, true), ssrAttribute("disabled", index() === rows().length - 1, true), escape(createComponent(Show, {
 						get when() {
 							return layout();
 						},
 						get fallback() {
-							return ssr(_tmpl$25, ssrHydrationKey(), escape(row.fc_layout));
+							return ssr(_tmpl$26, ssrHydrationKey(), escape(row.fc_layout));
 						},
 						get children() {
 							return createComponent(For, {
@@ -1153,7 +1577,7 @@ function FieldControl(props) {
 				children: (layout) => ssr(_tmpl$12, ssrHydrationKey() + ssrAttribute("value", escape(layout.name, true), false), escape(layout.label ?? layout.name))
 			})));
 		}
-		case "group": return ssr(_tmpl$26, ssrHydrationKey(), escape(createComponent(For, {
+		case "group": return ssr(_tmpl$27, ssrHydrationKey(), escape(createComponent(For, {
 			get each() {
 				return props.field.subFields ?? [];
 			},
@@ -1192,11 +1616,11 @@ function FieldControl(props) {
 					return props.t;
 				}
 			});
-			return ssr(_tmpl$27, ssrHydrationKey());
+			return ssr(_tmpl$28, ssrHydrationKey());
 	}
 }
 function RepeaterRow(props) {
-	return ssr(_tmpl$28, ssrHydrationKey(), escape(props.index) + 1, escape(createComponent(For, {
+	return ssr(_tmpl$29, ssrHydrationKey(), escape(props.index) + 1, escape(createComponent(For, {
 		get each() {
 			return props.field.subFields ?? [];
 		},
@@ -1215,8 +1639,92 @@ function RepeaterRow(props) {
 		})
 	})));
 }
-function MediaPickerInput(props) {
-	return ssr(_tmpl$29, ssrHydrationKey(), ssrAttribute("multiple", props.multiple, true) + ssrAttribute("accept", escape(props.accept, true), false));
+function MediaFieldInput(props) {
+	const [open, setOpen] = createSignal(false);
+	const [resolved, setResolved] = createSignal(null);
+	const [stale, setStale] = createSignal(false);
+	onMount(() => {
+		const value = props.value;
+		const ids = (Array.isArray(value) ? value : value ? [value] : []).filter((item) => typeof item === "string");
+		if (ids.length === 0) {
+			setStale(false);
+			setResolved(Array.isArray(value) ? value : value ? [value] : []);
+			return;
+		}
+		Promise.all(ids.map((id) => apiClient.getMedia(id).catch(() => null))).then((items) => {
+			const media = items.filter((item) => item !== null);
+			setStale(media.length !== ids.length);
+			setResolved(props.mode === "gallery" ? media : media[0] ?? null);
+		});
+	});
+	const currentItems = () => {
+		const value = resolved() ?? props.value;
+		return (Array.isArray(value) ? value : value ? [value] : []).filter((item) => typeof item === "object" && item !== null && typeof item.id === "string");
+	};
+	const pickerValue = () => {
+		const items = currentItems();
+		return props.mode === "gallery" ? items : items[0] ?? null;
+	};
+	return ssr(_tmpl$33, ssrHydrationKey(), escape(createComponent(Show, {
+		get when() {
+			return stale();
+		},
+		get children() {
+			return ssr(_tmpl$30, ssrHydrationKey());
+		}
+	})), escape(createComponent(Show, {
+		get when() {
+			return currentItems().length > 0;
+		},
+		get children() {
+			return ssr(_tmpl$31, ssrHydrationKey(), escape(createComponent(For, {
+				get each() {
+					return currentItems();
+				},
+				children: (media) => ssr(_tmpl$35, ssrHydrationKey(), escape(createComponent(Show, {
+					get when() {
+						return media.mime_type.startsWith("image/");
+					},
+					get fallback() {
+						return ssr(_tmpl$36, ssrHydrationKey(), escape(media.filename));
+					},
+					get children() {
+						return ssr(_tmpl$34, ssrHydrationKey() + ssrAttribute("src", escape(apiClient.mediaUrl(media.url), true), false) + ssrAttribute("alt", escape(media.alt ?? media.filename, true), false));
+					}
+				})), ssrAttribute("title", escape(media.filename, true), false), escape(media.title || media.filename))
+			})));
+		}
+	})), currentItems().length > 0 ? "Change media" : "Choose media", escape(createComponent(Show, {
+		get when() {
+			return currentItems().length > 0;
+		},
+		get children() {
+			return ssr(_tmpl$32, ssrHydrationKey());
+		}
+	})), escape(createComponent(Show, {
+		get when() {
+			return open();
+		},
+		get children() {
+			return createComponent(MediaPickerModal, {
+				get open() {
+					return open();
+				},
+				get mode() {
+					return props.mode;
+				},
+				get value() {
+					return pickerValue();
+				},
+				onClose: () => setOpen(false),
+				onSelect: (media) => {
+					setResolved(media);
+					props.onChange(Array.isArray(media) ? media.map((item) => item.id) : media.id);
+					setOpen(false);
+				}
+			});
+		}
+	})));
 }
 function RelationshipSelector(props) {
 	const selectedIds = () => Array.isArray(props.value) ? props.value : props.value ? [props.value] : [];
@@ -1224,7 +1732,7 @@ function RelationshipSelector(props) {
 		get each() {
 			return props.field.config?.["choices"] ?? [];
 		},
-		children: (choice) => ssr(_tmpl$30, ssrHydrationKey() + ssrAttribute("value", escape(choice.value, true), false), ssrAttribute("selected", selectedIds().includes(choice.value), true), escape(choice.label))
+		children: (choice) => ssr(_tmpl$37, ssrHydrationKey() + ssrAttribute("value", escape(choice.value, true), false), ssrAttribute("selected", selectedIds().includes(choice.value), true), escape(choice.label))
 	})));
 }
 //#endregion