@emdash-cms/admin 0.11.1 → 0.12.0

package/dist/index.js

@@ -1,5 +1,5 @@
 import { c as fetchAuthMode, d as throwResponseError, i as fetchPlugins, l as fetchManifest, n as enablePlugin, o as API_BASE, r as fetchPlugin, s as apiFetch, t as disablePlugin, u as parseApiResponse } from "./plugins-qrjvPK4g.js";
-import { a as SUPPORTED_LOCALES, i as DEFAULT_LOCALE, l as resolveLocale, n as useLocale, o as SUPPORTED_LOCALE_CODES, t as LocaleDirectionProvider } from "./LocaleDirectionProvider-PhIYobDG.js";
+import { a as SUPPORTED_LOCALES, i as DEFAULT_LOCALE, l as resolveLocale, n as useLocale, o as SUPPORTED_LOCALE_CODES, t as LocaleDirectionProvider } from "./LocaleDirectionProvider-cjRhNz57.js";
 import "./locales/index.js";
 import { Badge, Button, Checkbox, CommandPalette, Dialog, Input, InputArea, Label, LinkButton, Loader, Popover, Select, Sidebar as KumoSidebar, Switch, Tabs, Toast, Toasty, Tooltip, buttonVariants, useSidebar } from "@cloudflare/kumo";
 import { i18n } from "@lingui/core";
@@ -3122,7 +3122,7 @@ function probeImageDimensions(url, errorMessage) {
 		img.src = url;
 	});
 }
-function MediaPickerModal({ open, onOpenChange, onSelect, mimeTypeFilter = "image/", mimeTypeFilters, fieldId, title: providedTitle, hideUrlInput = false, mediaKind = "image" }) {
+function MediaPickerModal({ open, onOpenChange, onSelect, mimeTypeFilter = "image/", mimeTypeFilters, fieldId, title: providedTitle, hideUrlInput = false, mediaKind = "image", localOnly = false }) {
 	const { _: _t } = useLingui();
 	const isFileKind = mediaKind === "file";
 	const filters = React$1.useMemo(() => {
@@ -3170,11 +3170,11 @@ function MediaPickerModal({ open, onOpenChange, onSelect, mimeTypeFilter = "imag
 			setUploadError(null);
 			setProviderDimensions({});
 		}
-	}, [open]);
+	}, [open, localOnly]);
 	const { data: providers } = useQuery({
 		queryKey: ["media-providers"],
 		queryFn: fetchMediaProviders,
-		enabled: open,
+		enabled: open && !localOnly,
 		placeholderData: []
 	});
 	const activeProviderInfo = React$1.useMemo(() => {
@@ -3191,12 +3191,15 @@ function MediaPickerModal({ open, onOpenChange, onSelect, mimeTypeFilter = "imag
 		};
 		return providers?.find((p) => p.id === activeProvider);
 	}, [activeProvider, providers]);
-	const { data: localData, isLoading: localLoading } = useQuery({
+	const { data: localData, isLoading: localLoading, fetchNextPage: fetchNextLocalPage, hasNextPage: hasNextLocalPage, isFetchingNextPage: isFetchingNextLocalPage } = useInfiniteQuery({
 		queryKey: ["media", filters?.join(",") ?? ""],
-		queryFn: () => fetchMediaList({
+		queryFn: ({ pageParam }) => fetchMediaList({
 			mimeType: filters,
-			limit: 50
+			cursor: pageParam,
+			limit: 100
 		}),
+		initialPageParam: void 0,
+		getNextPageParam: (lastPage) => lastPage.nextCursor,
 		enabled: open && activeProvider === "local"
 	});
 	const { data: providerData, isLoading: providerLoading } = useQuery({
@@ -3211,9 +3214,9 @@ function MediaPickerModal({ open, onOpenChange, onSelect, mimeTypeFilter = "imag
 			limit: 50,
 			query: searchQuery || void 0
 		}),
-		enabled: open && activeProvider !== "local"
+		enabled: open && !localOnly && activeProvider !== "local"
 	});
-	const isLoading = activeProvider === "local" ? localLoading : providerLoading;
+	const isLoading = activeProvider === "local" ? localLoading || isFetchingNextLocalPage : providerLoading;
 	const [uploadError, setUploadError] = React$1.useState(null);
 	const uploadLocalMutation = useMutation({
 		mutationFn: (file) => uploadMedia(file, { fieldId }),
@@ -3255,11 +3258,14 @@ function MediaPickerModal({ open, onOpenChange, onSelect, mimeTypeFilter = "imag
 				if (!old) return old;
 				return {
 					...old,
-					items: old.items.map((item) => item.id === id ? {
-						...item,
-						width,
-						height
-					} : item)
+					pages: old.pages.map((page) => ({
+						...page,
+						items: page.items.map((item) => item.id === id ? {
+							...item,
+							width,
+							height
+						} : item)
+					}))
 				};
 			});
 			if (selectedItem?.providerId === "local" && selectedItem.item.id === id) setSelectedItem({
@@ -3285,11 +3291,11 @@ function MediaPickerModal({ open, onOpenChange, onSelect, mimeTypeFilter = "imag
 		});
 	}, [dimensionsMutation]);
 	const items = React$1.useMemo(() => {
-		if (activeProvider === "local") return (localData?.items || []).filter((item) => matchesAnyFilter(item.mimeType, filters));
+		if (activeProvider === "local") return (localData?.pages.flatMap((page) => page.items) || []).filter((item) => matchesAnyFilter(item.mimeType, filters));
 		return providerData?.items || [];
 	}, [
 		activeProvider,
-		localData?.items,
+		localData,
 		providerData?.items,
 		filters
 	]);
@@ -3399,7 +3405,7 @@ function MediaPickerModal({ open, onOpenChange, onSelect, mimeTypeFilter = "imag
 			name: "Library",
 			icon: void 0
 		}];
-		if (providers) {
+		if (providers && !localOnly) {
 			for (const p of providers) if (p.id !== "local") tabs.push({
 				id: p.id,
 				name: p.name,
@@ -3407,7 +3413,7 @@ function MediaPickerModal({ open, onOpenChange, onSelect, mimeTypeFilter = "imag
 			});
 		}
 		return tabs;
-	}, [providers]);
+	}, [providers, localOnly]);
 	return /* @__PURE__ */ jsx(Dialog.Root, {
 		open,
 		onOpenChange: handleClose,
@@ -3444,7 +3450,7 @@ function MediaPickerModal({ open, onOpenChange, onSelect, mimeTypeFilter = "imag
 						})
 					})]
 				}),
-				!hideUrlInput && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+				!hideUrlInput && !localOnly && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
 					className: "border-b pb-4",
 					children: [
 						/* @__PURE__ */ jsx(Label, { children: _t({
@@ -3581,9 +3587,9 @@ function MediaPickerModal({ open, onOpenChange, onSelect, mimeTypeFilter = "imag
 					}) : null,
 					className: "mb-3"
 				}),
-				/* @__PURE__ */ jsx("div", {
+				/* @__PURE__ */ jsxs("div", {
 					className: "flex-1 overflow-y-auto min-h-0",
-					children: isLoading ? /* @__PURE__ */ jsx("div", {
+					children: [isLoading && items.length === 0 ? /* @__PURE__ */ jsx("div", {
 						className: "flex items-center justify-center h-full",
 						children: /* @__PURE__ */ jsx(Loader, {})
 					}) : items.length === 0 ? /* @__PURE__ */ jsxs("div", {
@@ -3662,7 +3668,22 @@ function MediaPickerModal({ open, onOpenChange, onSelect, mimeTypeFilter = "imag
 								}));
 							}
 						}, item.id))
-					})
+					}), activeProvider === "local" && hasNextLocalPage && /* @__PURE__ */ jsx("div", {
+						className: "flex justify-center py-3",
+						children: /* @__PURE__ */ jsx(Button, {
+							variant: "outline",
+							size: "sm",
+							onClick: () => void fetchNextLocalPage(),
+							disabled: isFetchingNextLocalPage,
+							children: isFetchingNextLocalPage ? _t({
+								id: "Z3FXyt",
+								message: "Loading..."
+							}) : _t({
+								id: "a4N/Bg",
+								message: "Load More"
+							})
+						})
+					})]
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 border-t pt-4",
@@ -7969,7 +7990,7 @@ function PortableTextEditor({ value, onChange, placeholder = "Start writing...",
 	/** When editing an existing block, store the node position for updateAttributes */
 	const editingBlockPosRef = React$1.useRef(null);
 	const [sectionPickerOpen, setSectionPickerOpen] = React$1.useState(false);
-	const [slashMenuState, setSlashMenuState] = React$1.useState({
+	const [slashMenuState, setSlashMenuStateRaw] = React$1.useState({
 		isOpen: false,
 		items: [],
 		selectedIndex: 0,
@@ -7977,9 +7998,11 @@ function PortableTextEditor({ value, onChange, placeholder = "Start writing...",
 		range: null
 	});
 	const slashMenuStateRef = React$1.useRef(slashMenuState);
-	React$1.useEffect(() => {
-		slashMenuStateRef.current = slashMenuState;
-	}, [slashMenuState]);
+	const setSlashMenuState = React$1.useCallback((action) => {
+		const next = typeof action === "function" ? action(slashMenuStateRef.current) : action;
+		slashMenuStateRef.current = next;
+		setSlashMenuStateRaw(next);
+	}, []);
 	const slashCommands = React$1.useMemo(() => {
 		const cmds = [...defaultSlashCommands];
 		cmds.push({
@@ -19099,7 +19122,7 @@ function formatDate(isoString) {
 /**
 * Media library component with upload, provider tabs, and grid view
 */
-function MediaLibrary({ items = [], isLoading, onUpload, onDelete, onItemUpdated }) {
+function MediaLibrary({ items = [], isLoading, onUpload, onDelete, onItemUpdated, hasMore, onLoadMore }) {
 	const { _: _t } = useLingui();
 	const [viewMode, setViewMode] = React$1.useState("grid");
 	const [selectedItem, setSelectedItem] = React$1.useState(null);
@@ -19437,7 +19460,7 @@ function MediaLibrary({ items = [], isLoading, onUpload, onDelete, onItemUpdated
 					className: "ps-9"
 				})]
 			}),
-			currentLoading ? /* @__PURE__ */ jsx("div", {
+			currentLoading && currentItems.length === 0 && currentProviderItems.length === 0 ? /* @__PURE__ */ jsx("div", {
 				className: "flex items-center justify-center py-12",
 				children: /* @__PURE__ */ jsx(Loader, {})
 			}) : activeProvider === "local" && currentItems.length === 0 ? /* @__PURE__ */ jsxs("div", {
@@ -19601,6 +19624,21 @@ function MediaLibrary({ items = [], isLoading, onUpload, onDelete, onItemUpdated
 					})]
 				})
 			}),
+			activeProvider === "local" && hasMore && onLoadMore && /* @__PURE__ */ jsx("div", {
+				className: "flex justify-center",
+				children: /* @__PURE__ */ jsx(Button, {
+					variant: "outline",
+					onClick: onLoadMore,
+					disabled: isLoading,
+					children: isLoading ? _t({
+						id: "Z3FXyt",
+						message: "Loading..."
+					}) : _t({
+						id: "a4N/Bg",
+						message: "Load More"
+					})
+				})
+			}),
 			selectedItem && /* @__PURE__ */ jsx(MediaDetailPanel, {
 				item: selectedItem,
 				onClose: () => setSelectedItem(null),
@@ -24556,15 +24594,25 @@ function GeneralSettings() {
 								/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Label, { children: _t({
 									id: "iG7KNr",
 									message: "Logo"
-								}) }), formData.logo?.url ? /* @__PURE__ */ jsxs("div", {
+								}) }), formData.logo?.mediaId ? /* @__PURE__ */ jsxs("div", {
 									className: "mt-2 space-y-2",
-									children: [/* @__PURE__ */ jsx("img", {
+									children: [formData.logo.url ? /* @__PURE__ */ jsx("img", {
 										src: formData.logo.url,
 										alt: formData.logo.alt || _t({
 											id: "iG7KNr",
 											message: "Logo"
 										}),
 										className: "h-16 rounded border bg-kumo-tint object-contain p-2"
+									}) : /* @__PURE__ */ jsxs("div", {
+										className: "flex min-h-16 items-center gap-2 rounded border border-dashed bg-kumo-tint px-3 py-2 text-sm text-kumo-subtle",
+										role: "status",
+										children: [/* @__PURE__ */ jsx(WarningCircle, {
+											className: "h-4 w-4 flex-shrink-0",
+											"aria-hidden": "true"
+										}), /* @__PURE__ */ jsx("span", { children: _t({
+											id: "Ja5IhY",
+											message: "The referenced logo is no longer available. Pick a new one or remove the reference."
+										}) })]
 									}), /* @__PURE__ */ jsxs("div", {
 										className: "flex gap-2",
 										children: [/* @__PURE__ */ jsx(Button, {
@@ -24603,15 +24651,25 @@ function GeneralSettings() {
 								/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Label, { children: _t({
 									id: "+Qaboy",
 									message: "Favicon"
-								}) }), formData.favicon?.url ? /* @__PURE__ */ jsxs("div", {
+								}) }), formData.favicon?.mediaId ? /* @__PURE__ */ jsxs("div", {
 									className: "mt-2 space-y-2",
-									children: [/* @__PURE__ */ jsx("img", {
+									children: [formData.favicon.url ? /* @__PURE__ */ jsx("img", {
 										src: formData.favicon.url,
 										alt: _t({
 											id: "+Qaboy",
 											message: "Favicon"
 										}),
 										className: "h-8 w-8 rounded border bg-kumo-tint object-contain p-1"
+									}) : /* @__PURE__ */ jsxs("div", {
+										className: "flex min-h-8 items-center gap-2 rounded border border-dashed bg-kumo-tint px-2 py-1 text-xs text-kumo-subtle",
+										role: "status",
+										children: [/* @__PURE__ */ jsx(WarningCircle, {
+											className: "h-3 w-3 flex-shrink-0",
+											"aria-hidden": "true"
+										}), /* @__PURE__ */ jsx("span", { children: _t({
+											id: "z58F7a",
+											message: "Referenced favicon unavailable."
+										}) })]
 									}), /* @__PURE__ */ jsxs("div", {
 										className: "flex gap-2",
 										children: [/* @__PURE__ */ jsx(Button, {
@@ -24722,6 +24780,7 @@ function GeneralSettings() {
 				onOpenChange: setLogoPickerOpen,
 				onSelect: handleLogoSelect,
 				mimeTypeFilter: "image/",
+				localOnly: true,
 				title: _t({
 					id: "JUZ3aC",
 					message: "Select Logo"
@@ -24732,6 +24791,7 @@ function GeneralSettings() {
 				onOpenChange: setFaviconPickerOpen,
 				onSelect: handleFaviconSelect,
 				mimeTypeFilter: "image/",
+				localOnly: true,
 				title: _t({
 					id: "LmzxcB",
 					message: "Select Favicon"
@@ -25237,6 +25297,7 @@ function SeoSettings() {
 	});
 	const [formData, setFormData] = React$1.useState({});
 	const [saveStatus, setSaveStatus] = React$1.useState(null);
+	const [ogImagePickerOpen, setOgImagePickerOpen] = React$1.useState(false);
 	React$1.useEffect(() => {
 		if (settings) setFormData(settings);
 	}, [settings]);
@@ -25281,6 +25342,29 @@ function SeoSettings() {
 			}
 		}));
 	};
+	const handleDefaultOgImageSelect = (media) => {
+		setFormData((prev) => ({
+			...prev,
+			seo: {
+				...prev.seo,
+				defaultOgImage: {
+					mediaId: media.id,
+					alt: media.alt || "",
+					url: media.url
+				}
+			}
+		}));
+		setOgImagePickerOpen(false);
+	};
+	const handleDefaultOgImageRemove = () => {
+		setFormData((prev) => ({
+			...prev,
+			seo: {
+				...prev.seo,
+				defaultOgImage: void 0
+			}
+		}));
+	};
 	if (isLoading) return /* @__PURE__ */ jsxs("div", {
 		className: "space-y-6",
 		children: [/* @__PURE__ */ jsxs("div", {
@@ -25363,6 +25447,73 @@ function SeoSettings() {
 									message: "Character between page title and site name (e.g., \"My Post | My Site\")"
 								})
 							}),
+							/* @__PURE__ */ jsxs("div", { children: [
+								/* @__PURE__ */ jsx(Label, { children: _t({
+									id: "rqCo6p",
+									message: "Default Social Image"
+								}) }),
+								/* @__PURE__ */ jsx("p", {
+									className: "mt-1 text-sm text-kumo-subtle",
+									children: _t({
+										id: "YkLTCK",
+										message: "Used as the fallback Open Graph image when a page has none. Recommended size: 1200×630."
+									})
+								}),
+								formData.seo?.defaultOgImage?.mediaId ? /* @__PURE__ */ jsxs("div", {
+									className: "mt-2 space-y-2",
+									children: [formData.seo.defaultOgImage.url ? /* @__PURE__ */ jsx("img", {
+										src: formData.seo.defaultOgImage.url,
+										alt: formData.seo.defaultOgImage.alt || _t({
+											id: "GOoV+w",
+											message: "Default social image"
+										}),
+										className: "h-32 rounded border bg-kumo-tint object-contain p-2"
+									}) : /* @__PURE__ */ jsxs("div", {
+										className: "flex min-h-32 items-center gap-2 rounded border border-dashed bg-kumo-tint px-3 py-2 text-sm text-kumo-subtle",
+										role: "status",
+										children: [/* @__PURE__ */ jsx(WarningCircle, {
+											className: "h-4 w-4 flex-shrink-0",
+											"aria-hidden": "true"
+										}), /* @__PURE__ */ jsx("span", { children: _t({
+											id: "xPSZCT",
+											message: "The referenced image is no longer available. Pick a new one or remove the reference."
+										}) })]
+									}), /* @__PURE__ */ jsxs("div", {
+										className: "flex gap-2",
+										children: [/* @__PURE__ */ jsx(Button, {
+											type: "button",
+											variant: "outline",
+											size: "sm",
+											icon: /* @__PURE__ */ jsx(Upload, {}),
+											onClick: () => setOgImagePickerOpen(true),
+											children: _t({
+												id: "mwX/w0",
+												message: "Change Image"
+											})
+										}), /* @__PURE__ */ jsx(Button, {
+											type: "button",
+											variant: "outline",
+											size: "sm",
+											icon: /* @__PURE__ */ jsx(X, {}),
+											onClick: handleDefaultOgImageRemove,
+											children: _t({
+												id: "t/YqKh",
+												message: "Remove"
+											})
+										})]
+									})]
+								}) : /* @__PURE__ */ jsx(Button, {
+									type: "button",
+									variant: "outline",
+									icon: /* @__PURE__ */ jsx(Upload, {}),
+									onClick: () => setOgImagePickerOpen(true),
+									className: "mt-2",
+									children: _t({
+										id: "bAiEJP",
+										message: "Select Image"
+									})
+								})
+							] }),
 							/* @__PURE__ */ jsx(Input, {
 								label: _t({
 									id: "uP6I1q",
@@ -25414,6 +25565,22 @@ function SeoSettings() {
 						})
 					})
 				})]
+			}),
+			/* @__PURE__ */ jsx(MediaPickerModal, {
+				open: ogImagePickerOpen,
+				onOpenChange: setOgImagePickerOpen,
+				onSelect: handleDefaultOgImageSelect,
+				mimeTypeFilters: [
+					"image/jpeg",
+					"image/png",
+					"image/webp",
+					"image/gif"
+				],
+				localOnly: true,
+				title: _t({
+					id: "lxsmBp",
+					message: "Select Default Social Image"
+				})
 			})
 		]
 	});
@@ -35460,9 +35627,14 @@ const mediaRoute = createRoute({
 });
 function MediaPage() {
 	const queryClient = useQueryClient();
-	const { data, isLoading, error } = useQuery({
+	const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading, error } = useInfiniteQuery({
 		queryKey: ["media"],
-		queryFn: () => fetchMediaList()
+		queryFn: ({ pageParam }) => fetchMediaList({
+			cursor: pageParam,
+			limit: 100
+		}),
+		initialPageParam: void 0,
+		getNextPageParam: (lastPage) => lastPage.nextCursor
 	});
 	const uploadMutation = useMutation({
 		mutationFn: (file) => uploadMedia(file),
@@ -35476,10 +35648,15 @@ function MediaPage() {
 			queryClient.invalidateQueries({ queryKey: ["media"] });
 		}
 	});
+	const items = React$1.useMemo(() => {
+		return data?.pages.flatMap((page) => page.items) || [];
+	}, [data]);
 	if (error) return /* @__PURE__ */ jsx(ErrorScreen, { error: error.message });
 	return /* @__PURE__ */ jsx(MediaLibrary, {
-		items: data?.items || [],
-		isLoading,
+		items,
+		isLoading: isLoading || isFetchingNextPage,
+		hasMore: !!hasNextPage,
+		onLoadMore: () => void fetchNextPage(),
 		onUpload: (file) => uploadMutation.mutate(file),
 		onDelete: (id) => deleteMutation.mutate(id)
 	});