@questpie/admin 1.1.1 → 3.0.0

package/dist/client/components/fields/relation-select.mjs

@@ -0,0 +1,232 @@
+import { useResolveText, useTranslation } from "../../i18n/hooks.mjs";
+import { cn } from "../../lib/utils.mjs";
+import { selectClient, useAdminStore } from "../../runtime/provider.mjs";
+import { resolveIconElement } from "../component-renderer.mjs";
+import { Button } from "../ui/button.mjs";
+import { LocaleBadge } from "./locale-badge.mjs";
+import { useAdminConfig } from "../../hooks/use-admin-config.mjs";
+import { SelectSingle } from "../primitives/select-single.mjs";
+import { useCollectionItem } from "../../hooks/use-collection.mjs";
+import { ResourceSheet } from "../sheets/resource-sheet.mjs";
+import { Icon } from "@iconify/react";
+import * as React from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { toast } from "sonner";
+import { createQuestpieQueryOptions } from "@questpie/tanstack-query";
+
+//#region src/client/components/fields/relation-select.tsx
+/**
+* RelationSelect Component
+*
+* Single relation field (one-to-one) with:
+* - Searchable select dropdown to choose existing item
+* - Plus button to create new related item (opens side sheet)
+* - Edit button to modify selected item (opens side sheet)
+* - Responsive: Popover on desktop, Drawer on mobile
+*/
+function RelationSelect({ name, value, onChange, targetCollection, label, filter, required, disabled, readOnly, placeholder, error, localized, locale, renderOption, renderValue }) {
+	"use no memo";
+	const { t } = useTranslation();
+	const resolveText = useResolveText();
+	const resolvedLabel = label ? resolveText(label) : void 0;
+	const resolvedPlaceholder = placeholder ? resolveText(placeholder) : void 0;
+	const labelText = resolvedLabel || targetCollection;
+	const selectLabel = t("relation.select", { name: labelText });
+	const noResultsLabel = t("relation.noResults", { name: labelText });
+	const createLabel = t("relation.createNew", { name: labelText });
+	const [isSheetOpen, setIsSheetOpen] = React.useState(false);
+	const [editingItemId, setEditingItemId] = React.useState();
+	const { data: serverConfig } = useAdminConfig();
+	const client = useAdminStore(selectClient);
+	const collectionIconRef = (serverConfig?.collections?.[targetCollection])?.icon;
+	const loadOptions = React.useCallback(async (search) => {
+		if (!client) return [];
+		try {
+			const options = {
+				limit: 50,
+				locale
+			};
+			if (search) options.search = search;
+			if (filter) options.where = filter({});
+			const response = await client.collections[targetCollection].find(options);
+			let docs;
+			if (response) if (response.docs) docs = response.docs;
+			else docs = [];
+			else docs = [];
+			return docs.map((item) => {
+				let label_0;
+				if (renderOption) label_0 = String(renderOption(item));
+				else if (item._title) label_0 = item._title;
+				else if (item.id) label_0 = item.id;
+				else label_0 = "";
+				return {
+					value: item.id,
+					label: label_0,
+					icon: resolveIconElement(collectionIconRef, { className: "size-3.5 text-muted-foreground" })
+				};
+			});
+		} catch (error_0) {
+			console.error("Failed to load relation options:", error_0);
+			toast.error(t("error.failedToLoadOptions"));
+			return [];
+		}
+	}, [
+		client,
+		targetCollection,
+		filter,
+		renderOption,
+		collectionIconRef,
+		locale,
+		t
+	]);
+	const queryClient = useQueryClient();
+	const queryOpts = React.useMemo(() => createQuestpieQueryOptions(client ?? {}, { keyPrefix: ["questpie", "collections"] }), [client]);
+	const refetch = React.useCallback(async () => {
+		queryClient.invalidateQueries({ queryKey: queryOpts.key([
+			"collections",
+			targetCollection,
+			"find"
+		]) });
+		queryClient.invalidateQueries({ queryKey: queryOpts.key([
+			"collections",
+			targetCollection,
+			"findOne",
+			{ where: { id: value || "" } }
+		]) });
+	}, [
+		queryClient,
+		queryOpts,
+		targetCollection,
+		value
+	]);
+	const { data: selectedItem } = useCollectionItem(targetCollection, value || "", void 0, { enabled: !!value });
+	const selectedOptions = React.useMemo(() => {
+		if (!selectedItem) return [];
+		return [{
+			value: selectedItem.id,
+			label: renderValue ? String(renderValue(selectedItem)) : selectedItem._title || selectedItem.id || "",
+			icon: resolveIconElement(collectionIconRef, { className: "size-3.5 text-muted-foreground" })
+		}];
+	}, [
+		selectedItem,
+		renderValue,
+		collectionIconRef
+	]);
+	const handleOpenCreate = () => {
+		setEditingItemId(void 0);
+		setIsSheetOpen(true);
+	};
+	const handleOpenEdit = () => {
+		if (!value) return;
+		setEditingItemId(value);
+		setIsSheetOpen(true);
+	};
+	const handleValueChange = (newValue) => {
+		onChange(newValue);
+	};
+	const handleSheetSave = React.useCallback(async (result) => {
+		if (!editingItemId && result?.id) onChange(result.id);
+		await refetch();
+	}, [
+		editingItemId,
+		onChange,
+		refetch
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "qa-relation-select space-y-2",
+		children: [
+			label && /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsxs("label", {
+					htmlFor: name,
+					className: "flex items-center gap-1.5 text-sm font-medium",
+					children: [
+						resolveIconElement(collectionIconRef, { className: "size-3.5 text-muted-foreground" }),
+						resolvedLabel,
+						required && /* @__PURE__ */ jsx("span", {
+							className: "text-destructive",
+							children: "*"
+						})
+					]
+				}), localized && /* @__PURE__ */ jsx(LocaleBadge, { locale: locale || "i18n" })]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-stretch gap-0",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "min-w-0 flex-1",
+					children: /* @__PURE__ */ jsx(SelectSingle, {
+						id: name,
+						value: value || null,
+						onChange: handleValueChange,
+						options: selectedOptions,
+						loadOptions,
+						queryKey: (search_0) => queryOpts.key([
+							"collections",
+							targetCollection,
+							"find",
+							{
+								limit: 50,
+								locale,
+								search: search_0,
+								where: filter ? filter({}) : void 0
+							}
+						]),
+						prefetchOnMount: true,
+						placeholder: resolvedPlaceholder || `${selectLabel}...`,
+						disabled: disabled || readOnly,
+						clearable: !required,
+						emptyMessage: noResultsLabel,
+						drawerTitle: selectLabel,
+						className: cn(!readOnly && "rounded-r-none", error && "border-destructive"),
+						"aria-invalid": !!error
+					})
+				}), !readOnly && /* @__PURE__ */ jsxs("div", {
+					className: "flex",
+					children: [value && /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "outline",
+						size: "icon",
+						onClick: handleOpenEdit,
+						disabled,
+						title: t("collection.edit", { name: labelText }),
+						"aria-label": t("collection.edit", { name: labelText }),
+						className: "rounded-none border-l-0",
+						children: /* @__PURE__ */ jsx(Icon, {
+							icon: "ph:pencil",
+							className: "h-4 w-4"
+						})
+					}), /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "outline",
+						size: "icon",
+						onClick: handleOpenCreate,
+						disabled,
+						title: createLabel,
+						"aria-label": createLabel,
+						className: "rounded-l-none border-l-0",
+						children: /* @__PURE__ */ jsx(Icon, {
+							icon: "ph:plus",
+							className: "h-4 w-4"
+						})
+					})]
+				})]
+			}),
+			error && /* @__PURE__ */ jsx("p", {
+				className: "text-destructive text-sm",
+				children: error
+			}),
+			/* @__PURE__ */ jsx(ResourceSheet, {
+				type: "collection",
+				collection: targetCollection,
+				itemId: editingItemId,
+				open: isSheetOpen,
+				onOpenChange: setIsSheetOpen,
+				onSave: handleSheetSave
+			})
+		]
+	});
+}
+
+//#endregion
+export { RelationSelect };

package/dist/client/components/fields/rich-text-editor/bubble-menu.mjs

@@ -0,0 +1,105 @@
+import { useTranslation } from "../../../i18n/hooks.mjs";
+import { EDITOR_ICONS, ToolbarButton } from "./toolbar.mjs";
+import { c } from "react/compiler-runtime";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { BubbleMenu } from "@tiptap/react";
+
+//#region src/client/components/fields/rich-text-editor/bubble-menu.tsx
+/**
+* Bubble menu that appears on text selection
+*/
+function RichTextBubbleMenu(t0) {
+	const $ = c(27);
+	const { editor, features, disabled, onLinkClick } = t0;
+	const { t } = useTranslation();
+	const isEditable = !disabled;
+	let t1;
+	if ($[0] !== editor || $[1] !== features.bold || $[2] !== isEditable || $[3] !== t) {
+		t1 = features.bold && /* @__PURE__ */ jsx(ToolbarButton, {
+			icon: EDITOR_ICONS.bold,
+			active: editor.isActive("bold"),
+			disabled: !isEditable,
+			title: t("editor.bold"),
+			shortcut: "⌘B",
+			onClick: () => editor.chain().focus().toggleBold().run()
+		});
+		$[0] = editor;
+		$[1] = features.bold;
+		$[2] = isEditable;
+		$[3] = t;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== editor || $[6] !== features.italic || $[7] !== isEditable || $[8] !== t) {
+		t2 = features.italic && /* @__PURE__ */ jsx(ToolbarButton, {
+			icon: EDITOR_ICONS.italic,
+			active: editor.isActive("italic"),
+			disabled: !isEditable,
+			title: t("editor.italic"),
+			shortcut: "⌘I",
+			onClick: () => editor.chain().focus().toggleItalic().run()
+		});
+		$[5] = editor;
+		$[6] = features.italic;
+		$[7] = isEditable;
+		$[8] = t;
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	if ($[10] !== editor || $[11] !== features.underline || $[12] !== isEditable || $[13] !== t) {
+		t3 = features.underline && /* @__PURE__ */ jsx(ToolbarButton, {
+			icon: EDITOR_ICONS.underline,
+			active: editor.isActive("underline"),
+			disabled: !isEditable,
+			title: t("editor.underline"),
+			shortcut: "⌘U",
+			onClick: () => editor.chain().focus().toggleUnderline().run()
+		});
+		$[10] = editor;
+		$[11] = features.underline;
+		$[12] = isEditable;
+		$[13] = t;
+		$[14] = t3;
+	} else t3 = $[14];
+	let t4;
+	if ($[15] !== editor || $[16] !== features.link || $[17] !== isEditable || $[18] !== onLinkClick || $[19] !== t) {
+		t4 = features.link && /* @__PURE__ */ jsx(ToolbarButton, {
+			icon: EDITOR_ICONS.link,
+			active: editor.isActive("link"),
+			disabled: !isEditable,
+			title: t("editor.link"),
+			shortcut: "⌘K",
+			onClick: onLinkClick
+		});
+		$[15] = editor;
+		$[16] = features.link;
+		$[17] = isEditable;
+		$[18] = onLinkClick;
+		$[19] = t;
+		$[20] = t4;
+	} else t4 = $[20];
+	let t5;
+	if ($[21] !== editor || $[22] !== t1 || $[23] !== t2 || $[24] !== t3 || $[25] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(BubbleMenu, {
+			editor,
+			className: "bg-background flex items-center gap-1 border p-1 shadow-lg",
+			children: [
+				t1,
+				t2,
+				t3,
+				t4
+			]
+		});
+		$[21] = editor;
+		$[22] = t1;
+		$[23] = t2;
+		$[24] = t3;
+		$[25] = t4;
+		$[26] = t5;
+	} else t5 = $[26];
+	return t5;
+}
+
+//#endregion
+export { RichTextBubbleMenu };

package/dist/client/components/fields/rich-text-editor/extensions.mjs

@@ -0,0 +1,144 @@
+import { createSlashCommandExtension } from "./slash-commands.mjs";
+import CharacterCount from "@tiptap/extension-character-count";
+import Image from "@tiptap/extension-image";
+import Link from "@tiptap/extension-link";
+import Placeholder from "@tiptap/extension-placeholder";
+import Table from "@tiptap/extension-table";
+import TableCell from "@tiptap/extension-table-cell";
+import TableHeader from "@tiptap/extension-table-header";
+import TableRow from "@tiptap/extension-table-row";
+import TextAlign from "@tiptap/extension-text-align";
+import Underline from "@tiptap/extension-underline";
+import StarterKit from "@tiptap/starter-kit";
+
+//#region src/client/components/fields/rich-text-editor/extensions.tsx
+let codeBlockExtension = null;
+let codeBlockLoadPromise = null;
+/**
+* Returns the cached CodeBlockLowlight extension synchronously if already
+* loaded, otherwise starts a single shared fetch and returns the promise.
+*/
+function getCodeBlockExtension() {
+	if (codeBlockExtension) return codeBlockExtension;
+	if (!codeBlockLoadPromise) codeBlockLoadPromise = Promise.all([import("@tiptap/extension-code-block-lowlight"), import("lowlight")]).then(([{ default: CodeBlockLowlight }, { common, createLowlight }]) => {
+		const lowlight = createLowlight(common);
+		codeBlockExtension = CodeBlockLowlight.configure({ lowlight });
+		return codeBlockExtension;
+	});
+	return codeBlockLoadPromise;
+}
+/**
+* Build Tiptap extensions based on feature configuration.
+*
+* Returns **synchronously** (`AnyExtension[]`) when no async deps are needed
+* (i.e. codeBlock disabled, or lowlight already cached). Only returns a
+* `Promise` on the first build that includes codeBlock.
+*/
+function buildExtensions({ features, placeholder, maxCharacters, customExtensions }) {
+	const base = buildBaseExtensions({
+		features,
+		placeholder,
+		maxCharacters,
+		customExtensions
+	});
+	if (!features.codeBlock) return base;
+	const codeBlock = getCodeBlockExtension();
+	if (!(codeBlock instanceof Promise)) return [...base, codeBlock];
+	return codeBlock.then((ext) => [...base, ext]);
+}
+function buildBaseExtensions({ features, placeholder, maxCharacters, customExtensions }) {
+	const starterKitConfig = { codeBlock: false };
+	if (!features.bold) starterKitConfig.bold = false;
+	if (!features.italic) starterKitConfig.italic = false;
+	if (!features.strike) starterKitConfig.strike = false;
+	if (!features.code) starterKitConfig.code = false;
+	if (!features.blockquote) starterKitConfig.blockquote = false;
+	if (!features.heading) starterKitConfig.heading = false;
+	if (!features.bulletList) starterKitConfig.bulletList = false;
+	if (!features.orderedList) starterKitConfig.orderedList = false;
+	if (!features.bulletList && !features.orderedList) starterKitConfig.listItem = false;
+	if (!features.horizontalRule) starterKitConfig.horizontalRule = false;
+	if (!features.history) starterKitConfig.history = false;
+	const extensions = [StarterKit.configure(starterKitConfig), Placeholder.configure({ placeholder: placeholder || "Start writing..." })];
+	if (features.underline) extensions.push(Underline);
+	if (features.link) extensions.push(Link.configure({
+		openOnClick: false,
+		autolink: true,
+		linkOnPaste: true
+	}));
+	if (features.align) extensions.push(TextAlign.configure({ types: ["heading", "paragraph"] }));
+	if (features.image) extensions.push(Image);
+	if (features.table) extensions.push(Table.configure({ resizable: true }), TableRow, TableHeader, TableCell);
+	if (features.characterCount && maxCharacters) extensions.push(CharacterCount.configure({ limit: maxCharacters }));
+	if (features.slashCommands) extensions.push(createSlashCommandExtension((editor) => {
+		const commands = [];
+		if (features.heading) commands.push({
+			title: "Heading 1",
+			description: "Large section heading",
+			keywords: ["h1"],
+			command: (cmdEditor) => cmdEditor.chain().focus().toggleHeading({ level: 1 }).run()
+		}, {
+			title: "Heading 2",
+			description: "Medium section heading",
+			keywords: ["h2"],
+			command: (cmdEditor) => cmdEditor.chain().focus().toggleHeading({ level: 2 }).run()
+		}, {
+			title: "Heading 3",
+			description: "Small section heading",
+			keywords: ["h3"],
+			command: (cmdEditor) => cmdEditor.chain().focus().toggleHeading({ level: 3 }).run()
+		});
+		commands.push({
+			title: "Paragraph",
+			description: "Start with plain text",
+			keywords: ["text"],
+			command: (cmdEditor) => cmdEditor.chain().focus().setParagraph().run()
+		});
+		if (features.bulletList) commands.push({
+			title: "Bullet list",
+			description: "Create a bulleted list",
+			keywords: ["list", "ul"],
+			command: (cmdEditor) => cmdEditor.chain().focus().toggleBulletList().run()
+		});
+		if (features.orderedList) commands.push({
+			title: "Numbered list",
+			description: "Create an ordered list",
+			keywords: ["list", "ol"],
+			command: (cmdEditor) => cmdEditor.chain().focus().toggleOrderedList().run()
+		});
+		if (features.blockquote) commands.push({
+			title: "Quote",
+			description: "Capture a quote",
+			keywords: ["blockquote"],
+			command: (cmdEditor) => cmdEditor.chain().focus().toggleBlockquote().run()
+		});
+		if (features.codeBlock) commands.push({
+			title: "Code block",
+			description: "Insert code snippet",
+			keywords: ["code"],
+			command: (cmdEditor) => cmdEditor.chain().focus().toggleCodeBlock().run()
+		});
+		if (features.horizontalRule) commands.push({
+			title: "Divider",
+			description: "Insert a horizontal rule",
+			keywords: ["hr"],
+			command: (cmdEditor) => cmdEditor.chain().focus().setHorizontalRule().run()
+		});
+		if (features.table) commands.push({
+			title: "Table",
+			description: "Insert a 3x3 table",
+			keywords: ["grid"],
+			command: (cmdEditor) => cmdEditor.chain().focus().insertTable({
+				rows: 3,
+				cols: 3,
+				withHeaderRow: true
+			}).run()
+		});
+		return commands;
+	}));
+	if (customExtensions?.length) extensions.push(...customExtensions);
+	return extensions;
+}
+
+//#endregion
+export { buildExtensions };

package/dist/client/components/fields/rich-text-editor/image-popover.mjs

@@ -0,0 +1,221 @@
+import { useTranslation } from "../../../i18n/hooks.mjs";
+import { Button } from "../../ui/button.mjs";
+import { Input } from "../../ui/input.mjs";
+import { sanitizeFilename } from "../field-utils.mjs";
+import { Popover, PopoverContent, PopoverHeader, PopoverTitle, PopoverTrigger } from "../../ui/popover.mjs";
+import { useCollectionItem } from "../../../hooks/use-collection.mjs";
+import { useUploadCollection } from "../../../hooks/use-upload-collection.mjs";
+import { useUpload } from "../../../hooks/use-upload.mjs";
+import { MediaPickerDialog } from "../../media/media-picker-dialog.mjs";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { toast } from "sonner";
+
+//#region src/client/components/fields/rich-text-editor/image-popover.tsx
+/**
+* Image insertion popover
+*/
+function ImagePopover({ editor, open, onOpenChange, disabled, onImageUpload, imageCollection, enableMediaLibrary }) {
+	"use no memo";
+	const { t } = useTranslation();
+	const [imageUrl, setImageUrl] = React.useState("");
+	const [imageAlt, setImageAlt] = React.useState("");
+	const [uploadingImage, setUploadingImage] = React.useState(false);
+	const fileInputRef = React.useRef(null);
+	const [isPickerOpen, setIsPickerOpen] = React.useState(false);
+	const [selectedAssetId, setSelectedAssetId] = React.useState(null);
+	const { upload } = useUpload();
+	const { collection, collections: availableUploadCollections } = useUploadCollection(imageCollection);
+	const showMediaLibrary = enableMediaLibrary ?? true;
+	const { data: selectedAsset } = useCollectionItem(collection || "", selectedAssetId || "", void 0, { enabled: !!collection && !!selectedAssetId });
+	const handleInsertImageUrl = React.useCallback(() => {
+		if (!editor || !imageUrl) return;
+		editor.chain().focus().setImage({
+			src: imageUrl,
+			alt: imageAlt || void 0
+		}).run();
+		setImageUrl("");
+		setImageAlt("");
+		onOpenChange(false);
+	}, [
+		editor,
+		imageAlt,
+		imageUrl,
+		onOpenChange
+	]);
+	const handleImageUpload = React.useCallback(async (event) => {
+		const file = event.target.files?.[0];
+		if (!file || !editor) return;
+		try {
+			setUploadingImage(true);
+			let url;
+			if (onImageUpload) url = await onImageUpload(file);
+			else {
+				if (!collection) {
+					let errorMessage;
+					if (availableUploadCollections.length > 1) errorMessage = `Multiple upload collections are available (${availableUploadCollections.join(", ")}). Configure rich-text imageCollection to choose one.`;
+					else errorMessage = "No upload collection is configured for rich-text image uploads.";
+					toast.error(errorMessage);
+					setUploadingImage(false);
+					event.target.value = "";
+					return;
+				}
+				const sanitizedName = sanitizeFilename(file.name);
+				let uploadFile;
+				if (sanitizedName === file.name) uploadFile = file;
+				else uploadFile = new File([file], sanitizedName, { type: file.type });
+				const uploadedAsset = await upload(uploadFile, { to: collection });
+				if (uploadedAsset) {
+					if (uploadedAsset.url) url = uploadedAsset.url;
+				}
+				if (!url) {
+					toast.error(t("upload.error"));
+					setUploadingImage(false);
+					event.target.value = "";
+					return;
+				}
+			}
+			if (url) {
+				let altValue;
+				if (imageAlt) altValue = imageAlt;
+				else altValue = void 0;
+				editor.chain().focus().setImage({
+					src: url,
+					alt: altValue
+				}).run();
+				setImageUrl("");
+				setImageAlt("");
+				onOpenChange(false);
+			}
+			setUploadingImage(false);
+			event.target.value = "";
+		} catch (err) {
+			let uploadError;
+			if (err instanceof Error) uploadError = err;
+			else uploadError = new Error(t("upload.error"));
+			toast.error(uploadError.message);
+			setUploadingImage(false);
+			event.target.value = "";
+		}
+	}, [
+		collection,
+		availableUploadCollections,
+		editor,
+		imageAlt,
+		onImageUpload,
+		onOpenChange,
+		t,
+		upload
+	]);
+	React.useEffect(() => {
+		if (!selectedAssetId || !selectedAsset || !editor) return;
+		const assetUrl = selectedAsset?.url;
+		if (!assetUrl) {
+			toast.error(t("upload.error"));
+			setSelectedAssetId(null);
+			return;
+		}
+		editor.chain().focus().setImage({
+			src: assetUrl,
+			alt: imageAlt || selectedAsset?.alt || void 0
+		}).run();
+		setImageUrl("");
+		setImageAlt("");
+		setSelectedAssetId(null);
+		onOpenChange(false);
+	}, [
+		editor,
+		imageAlt,
+		onOpenChange,
+		selectedAsset,
+		selectedAssetId,
+		t
+	]);
+	const handlePickerSelect = (ids) => {
+		const selectedId = Array.isArray(ids) ? ids[0] : ids;
+		if (!selectedId) return;
+		setSelectedAssetId(selectedId);
+		setIsPickerOpen(false);
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, { render: /* @__PURE__ */ jsx("div", { className: "sr-only" }) }), /* @__PURE__ */ jsxs(PopoverContent, {
+			className: "w-80",
+			children: [/* @__PURE__ */ jsx(PopoverHeader, { children: /* @__PURE__ */ jsx(PopoverTitle, { children: t("editor.image") }) }), /* @__PURE__ */ jsxs("div", {
+				className: "space-y-3",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "space-y-2",
+					children: [
+						/* @__PURE__ */ jsx(Input, {
+							value: imageUrl,
+							placeholder: "https://example.com/image.jpg",
+							onChange: (event_0) => setImageUrl(event_0.target.value),
+							disabled
+						}),
+						/* @__PURE__ */ jsx(Input, {
+							value: imageAlt,
+							placeholder: t("editor.altText"),
+							onChange: (event_1) => setImageAlt(event_1.target.value),
+							disabled
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "flex justify-end gap-2",
+							children: /* @__PURE__ */ jsx(Button, {
+								type: "button",
+								size: "xs",
+								onClick: handleInsertImageUrl,
+								disabled: disabled || !imageUrl,
+								children: t("editor.insertUrl")
+							})
+						})
+					]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "space-y-2",
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							className: "text-xs font-medium",
+							children: t("editor.uploadFile")
+						}),
+						/* @__PURE__ */ jsx("input", {
+							ref: fileInputRef,
+							type: "file",
+							accept: "image/*",
+							onChange: handleImageUpload,
+							className: "sr-only",
+							disabled: disabled || uploadingImage
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ jsx(Button, {
+								type: "button",
+								size: "xs",
+								variant: "outline",
+								onClick: () => fileInputRef.current?.click(),
+								disabled: disabled || uploadingImage || !onImageUpload && !collection,
+								children: uploadingImage ? t("editor.uploading") : t("editor.chooseFile")
+							}), showMediaLibrary && /* @__PURE__ */ jsx(Button, {
+								type: "button",
+								size: "xs",
+								variant: "outline",
+								onClick: () => setIsPickerOpen(true),
+								disabled: disabled || !collection,
+								children: t("editor.browseLibrary")
+							})]
+						})
+					]
+				})]
+			})]
+		})]
+	}), showMediaLibrary && /* @__PURE__ */ jsx(MediaPickerDialog, {
+		open: isPickerOpen,
+		onOpenChange: setIsPickerOpen,
+		mode: "single",
+		accept: ["image/*"],
+		onSelect: handlePickerSelect,
+		collection
+	})] });
+}
+
+//#endregion
+export { ImagePopover };