@emdash-cms/admin 0.24.1 → 0.26.0

package/dist/index.js

@@ -1,7 +1,7 @@
 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-G9Z9NQ7n.js";
-import { a as SUPPORTED_LOCALES, i as DEFAULT_LOCALE, l as resolveLocale, n as useLocale, o as SUPPORTED_LOCALE_CODES, s as getLocaleDir, t as LocaleDirectionProvider } from "./LocaleDirectionProvider-CK7aJ2Lb.js";
+import { a as SUPPORTED_LOCALES, i as DEFAULT_LOCALE, l as resolveLocale, n as useLocale, o as SUPPORTED_LOCALE_CODES, s as getLocaleDir, t as LocaleDirectionProvider } from "./LocaleDirectionProvider-elsAJo9B.js";
 import "./locales/index.js";
-import { Autocomplete, Badge, Button, Checkbox, ClipboardText, CommandPalette, Dialog, Input, InputArea, Label, LinkButton, LinkProvider, Loader, Popover, Select, Sidebar as KumoSidebar, Switch, Tabs, Toast, Toasty, Tooltip, buttonVariants, useSidebar } from "@cloudflare/kumo";
+import { Autocomplete, Badge, Button, Checkbox, ClipboardText, Combobox, CommandPalette, Dialog, Input, InputArea, Label, LinkButton, LinkProvider, Loader, Popover, Select, Sidebar as KumoSidebar, Switch, Tabs, Toast, Toasty, Tooltip, buttonVariants, useSidebar } from "@cloudflare/kumo";
 import { i18n } from "@lingui/core";
 import { I18nProvider, Trans, useLingui } from "@lingui/react";
 import { QueryClient, QueryClientProvider, keepPreviousData, useInfiniteQuery, useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
@@ -3187,6 +3187,11 @@ function useDebouncedValue$1(value, delay) {
 
 //#endregion
 //#region src/lib/media-utils.ts
+/** Read a string value from an untyped `meta` bag, or undefined. */
+function metaString(meta, key) {
+	const value = meta?.[key];
+	return typeof value === "string" ? value : void 0;
+}
 function providerItemToMediaItem(providerId, item) {
 	return {
 		id: item.id,
@@ -3196,6 +3201,8 @@ function providerItemToMediaItem(providerId, item) {
 		size: item.size || 0,
 		width: item.width,
 		height: item.height,
+		blurhash: item.blurhash ?? metaString(item.meta, "blurhash"),
+		dominantColor: item.dominantColor ?? metaString(item.meta, "dominantColor"),
 		alt: item.alt,
 		createdAt: (/* @__PURE__ */ new Date()).toISOString(),
 		provider: providerId,
@@ -4579,6 +4586,8 @@ function ImageFieldRenderer({ id, label, description, value, onChange, required,
 			alt: item.alt || "",
 			width: item.width,
 			height: item.height,
+			blurhash: item.blurhash ?? metaString(item.meta, "blurhash"),
+			dominantColor: item.dominantColor ?? metaString(item.meta, "dominantColor"),
 			meta: isLocalProvider ? {
 				...item.meta,
 				storageKey: item.storageKey
@@ -4990,18 +4999,26 @@ function SubFieldInput({ subField, value, onChange }) {
 			onChange: (e) => onChange(fromDatetimeLocalInputValue(e.target.value)),
 			required: subField.required
 		});
-		case "select": return /* @__PURE__ */ jsx(Select, {
-			label: subField.label,
-			value: typeof value === "string" ? value : "",
-			onValueChange: (v) => onChange(v ?? ""),
-			items: {
-				"": _t3({
+		case "select": {
+			const options = Array.isArray(subField.options) ? subField.options : [];
+			return /* @__PURE__ */ jsxs(Combobox, {
+				label: subField.label,
+				value: typeof value === "string" && value ? value : null,
+				onValueChange: (v) => onChange(typeof v === "string" ? v : ""),
+				items: options,
+				required: subField.required,
+				children: [/* @__PURE__ */ jsx(Combobox.TriggerInput, { placeholder: _t3({
 					id: "O/7I0o",
 					message: "Select..."
-				}),
-				...Object.fromEntries((subField.options ?? []).map((opt) => [opt, opt]))
-			}
-		});
+				}) }), /* @__PURE__ */ jsxs(Combobox.Content, { children: [/* @__PURE__ */ jsx(Combobox.Empty, { children: _t3({
+					id: "Ev2r9A",
+					message: "No results"
+				}) }), /* @__PURE__ */ jsx(Combobox.List, { children: (opt) => /* @__PURE__ */ jsx(Combobox.Item, {
+					value: opt,
+					children: opt
+				}, opt) })] })]
+			});
+		}
 		case "image": return /* @__PURE__ */ jsx(ImageFieldRenderer, {
 			label: subField.label,
 			value: value != null && typeof value === "object" ? value : typeof value === "string" && value ? value : void 0,
@@ -5105,6 +5122,8 @@ function ImageDetailPanel({ attributes, onUpdate, onReplace, onDelete, onClose,
 			mediaId: item.id,
 			width: item.width,
 			height: item.height,
+			blurhash: item.blurhash,
+			dominantColor: item.dominantColor,
 			caption: void 0,
 			title: void 0
 		});
@@ -6391,6 +6410,16 @@ function languageLabelDescriptor(value) {
 * so that less common languages can still be used. Free-form input is
 * sanitized to a single safe CSS class token via `normalizeLanguage` so the
 * frontend's `language-{id}` class stays well-formed.
+*
+* The popover content is rendered through Kumo's `Popover`, which portals it
+* out of the editor's contentEditable DOM. That portal is load-bearing, not
+* cosmetic: a code block is a non-atom ProseMirror node with live editable
+* content, so if the picker's text input lived inside the node view, typing
+* would move the DOM selection into it. ProseMirror reads that selection,
+* dispatches a selection-correcting transaction, and the resulting node-view
+* redraw recreates this React component mid-edit, tearing the picker down --
+* the "language picker loses focus and closes when you type" bug (issue
+* #1200). Keeping the input outside the editor DOM avoids it entirely.
 */
 function CodeBlockNodeView({ node, updateAttributes, selected }) {
 	const { _: _t } = useLingui();
@@ -6412,7 +6441,6 @@ function CodeBlockNodeView({ node, updateAttributes, selected }) {
 		return lang.aliases?.some((alias) => alias.toLowerCase().includes(searchText)) ?? false;
 	}, [findLanguageByDisplayLabel, _t]);
 	const [draft, setDraft] = React$1.useState(() => labelText(storedLanguage));
-	const popoverRef = React$1.useRef(null);
 	React$1.useEffect(() => {
 		if (!isEditing) setDraft(labelText(storedLanguage));
 	}, [
@@ -6441,20 +6469,8 @@ function CodeBlockNodeView({ node, updateAttributes, selected }) {
 		if (e.key === "Enter") {
 			e.preventDefault();
 			commit();
-		} else if (e.key === "Escape") {
-			e.preventDefault();
-			closePicker();
 		}
 	};
-	React$1.useEffect(() => {
-		if (!isEditing) return void 0;
-		const onMouseDown = (event) => {
-			const target = event.target instanceof Node ? event.target : null;
-			if (popoverRef.current && target && !popoverRef.current.contains(target)) closePicker();
-		};
-		document.addEventListener("mousedown", onMouseDown);
-		return () => document.removeEventListener("mousedown", onMouseDown);
-	}, [isEditing, closePicker]);
 	const label = labelText(storedLanguage);
 	const chipPersistent = isEditing || Boolean(storedLanguage) || selected;
 	return /* @__PURE__ */ jsxs(NodeViewWrapper, {
@@ -6466,89 +6482,95 @@ function CodeBlockNodeView({ node, updateAttributes, selected }) {
 		}), /* @__PURE__ */ jsx("div", {
 			className: "absolute end-2 top-2 select-none",
 			contentEditable: false,
-			children: isEditing ? /* @__PURE__ */ jsxs("div", {
-				ref: popoverRef,
-				className: "flex items-center gap-1 rounded-md border bg-kumo-overlay p-1 shadow-lg",
-				onKeyDown: handleKeyDown,
-				children: [
-					/* @__PURE__ */ jsxs(Autocomplete, {
-						items: languageItems,
-						value: draft,
-						onValueChange: (next) => setDraft(next),
-						filter: filterLanguages,
-						children: [/* @__PURE__ */ jsx(Autocomplete.InputGroup, {
-							size: "sm",
-							placeholder: _t({
-								id: "vXIe7J",
-								message: "Language"
-							})
-						}), /* @__PURE__ */ jsxs(Autocomplete.Content, {
-							sideOffset: 4,
-							children: [/* @__PURE__ */ jsx(Autocomplete.List, { children: (item) => /* @__PURE__ */ jsx(Autocomplete.Item, {
-								value: item,
-								children: item
-							}, item) }), /* @__PURE__ */ jsx(Autocomplete.Empty, { children: _t({
-								id: "4TVVsS",
-								message: "No matches"
-							}) })]
-						})]
+			children: /* @__PURE__ */ jsxs(Popover, {
+				open: isEditing,
+				onOpenChange: (open) => open ? openPicker() : closePicker(),
+				children: [/* @__PURE__ */ jsx(Popover.Trigger, { render: /* @__PURE__ */ jsx("button", {
+					type: "button",
+					tabIndex: chipPersistent ? 0 : -1,
+					onMouseDown: (e) => e.preventDefault(),
+					className: "rounded-md border bg-kumo-overlay/90 px-2 py-1 text-xs text-kumo-subtle opacity-0 transition-opacity hover:text-kumo-strong focus:opacity-100 focus:outline-none focus:ring-2 focus:ring-kumo-brand group-hover:opacity-100 data-[persistent=true]:opacity-100",
+					"data-persistent": chipPersistent ? "true" : "false",
+					title: _t({
+						id: "9cbOH7",
+						message: "Set language"
 					}),
-					/* @__PURE__ */ jsx(Button, {
-						type: "button",
-						variant: "ghost",
-						shape: "square",
-						className: "h-7 w-7",
-						onMouseDown: (e) => e.preventDefault(),
-						onClick: () => commit(),
-						title: _t({
-							id: "Ek42QX",
-							message: "Apply language"
-						}),
-						"aria-label": _t({
-							id: "Ek42QX",
-							message: "Apply language"
-						}),
-						children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" })
+					"aria-label": _t({
+						id: "q/A3pF",
+						message: "Set language (current: {label})",
+						values: { label }
 					}),
-					/* @__PURE__ */ jsx(Button, {
-						type: "button",
-						variant: "ghost",
-						shape: "square",
-						className: "h-7 w-7",
-						onMouseDown: (e) => e.preventDefault(),
-						onClick: closePicker,
-						title: _t({
-							id: "dEgA5A",
-							message: "Cancel"
-						}),
-						"aria-label": _t({
-							id: "dEgA5A",
-							message: "Cancel"
-						}),
-						children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+					"aria-hidden": chipPersistent ? void 0 : true,
+					children: storedLanguage ? label : _t({
+						id: "9cbOH7",
+						message: "Set language"
+					})
+				}) }), /* @__PURE__ */ jsx(Popover.Content, {
+					side: "bottom",
+					className: "w-auto p-1",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-1",
+						onKeyDown: handleKeyDown,
+						children: [
+							/* @__PURE__ */ jsxs(Autocomplete, {
+								items: languageItems,
+								value: draft,
+								onValueChange: (next) => setDraft(next),
+								filter: filterLanguages,
+								children: [/* @__PURE__ */ jsx(Autocomplete.InputGroup, {
+									size: "sm",
+									placeholder: _t({
+										id: "vXIe7J",
+										message: "Language"
+									})
+								}), /* @__PURE__ */ jsxs(Autocomplete.Content, {
+									sideOffset: 4,
+									children: [/* @__PURE__ */ jsx(Autocomplete.List, { children: (item) => /* @__PURE__ */ jsx(Autocomplete.Item, {
+										value: item,
+										children: item
+									}, item) }), /* @__PURE__ */ jsx(Autocomplete.Empty, { children: _t({
+										id: "4TVVsS",
+										message: "No matches"
+									}) })]
+								})]
+							}),
+							/* @__PURE__ */ jsx(Button, {
+								type: "button",
+								variant: "ghost",
+								shape: "square",
+								className: "h-7 w-7",
+								onMouseDown: (e) => e.preventDefault(),
+								onClick: () => commit(),
+								title: _t({
+									id: "Ek42QX",
+									message: "Apply language"
+								}),
+								"aria-label": _t({
+									id: "Ek42QX",
+									message: "Apply language"
+								}),
+								children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" })
+							}),
+							/* @__PURE__ */ jsx(Button, {
+								type: "button",
+								variant: "ghost",
+								shape: "square",
+								className: "h-7 w-7",
+								onMouseDown: (e) => e.preventDefault(),
+								onClick: closePicker,
+								title: _t({
+									id: "dEgA5A",
+									message: "Cancel"
+								}),
+								"aria-label": _t({
+									id: "dEgA5A",
+									message: "Cancel"
+								}),
+								children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+							})
+						]
 					})
-				]
-			}) : /* @__PURE__ */ jsx("button", {
-				type: "button",
-				tabIndex: chipPersistent ? 0 : -1,
-				onMouseDown: (e) => e.preventDefault(),
-				onClick: openPicker,
-				className: "rounded-md border bg-kumo-overlay/90 px-2 py-1 text-xs text-kumo-subtle opacity-0 transition-opacity hover:text-kumo-strong focus:opacity-100 focus:outline-none focus:ring-2 focus:ring-kumo-brand group-hover:opacity-100 data-[persistent=true]:opacity-100",
-				"data-persistent": chipPersistent ? "true" : "false",
-				title: _t({
-					id: "9cbOH7",
-					message: "Set language"
-				}),
-				"aria-label": _t({
-					id: "q/A3pF",
-					message: "Set language (current: {label})",
-					values: { label }
-				}),
-				"aria-hidden": chipPersistent ? void 0 : true,
-				children: storedLanguage ? label : _t({
-					id: "9cbOH7",
-					message: "Set language"
-				})
+				})]
 			})
 		})]
 	});
@@ -7084,6 +7106,8 @@ function ImageNodeView({ node, updateAttributes, selected, deleteNode, editor })
 		mediaId: node.attrs.mediaId,
 		width: node.attrs.width,
 		height: node.attrs.height,
+		blurhash: node.attrs.blurhash,
+		dominantColor: node.attrs.dominantColor,
 		displayWidth: node.attrs.displayWidth,
 		displayHeight: node.attrs.displayHeight,
 		alignment: node.attrs.alignment
@@ -7309,6 +7333,8 @@ const ImageExtension = Node$2.create({
 			provider: { default: null },
 			width: { default: null },
 			height: { default: null },
+			blurhash: { default: null },
+			dominantColor: { default: null },
 			displayWidth: { default: null },
 			displayHeight: { default: null },
 			alignment: { default: null }
@@ -8028,6 +8054,8 @@ function convertPMNode(node) {
 		case "image": {
 			const attrs = node.attrs ?? {};
 			const provider = attrStr(attrs.provider);
+			const blurhash = attrStr(attrs.blurhash);
+			const dominantColor = attrStr(attrs.dominantColor);
 			return {
 				_type: "image",
 				_key: generateKey(),
@@ -8040,6 +8068,8 @@ function convertPMNode(node) {
 				caption: attrStr(attrs.caption) ?? attrStr(attrs.title),
 				width: attrNum(attrs.width),
 				height: attrNum(attrs.height),
+				...blurhash ? { blurhash } : {},
+				...dominantColor ? { dominantColor } : {},
 				displayWidth: attrNum(attrs.displayWidth),
 				displayHeight: attrNum(attrs.displayHeight),
 				alignment: attrStr(attrs.alignment)
@@ -8262,6 +8292,9 @@ function convertPTBlock(block) {
 		case "image": {
 			if (!isImageBlock(block)) return null;
 			const imageBlock = block;
+			const meta = imageBlock.asset.meta;
+			const blurhash = typeof imageBlock.blurhash === "string" ? imageBlock.blurhash : typeof meta?.blurhash === "string" ? meta.blurhash : null;
+			const dominantColor = typeof imageBlock.dominantColor === "string" ? imageBlock.dominantColor : typeof meta?.dominantColor === "string" ? meta.dominantColor : null;
 			return {
 				type: "image",
 				attrs: {
@@ -8272,6 +8305,8 @@ function convertPTBlock(block) {
 					mediaId: imageBlock.asset._ref,
 					width: imageBlock.width,
 					height: imageBlock.height,
+					blurhash,
+					dominantColor,
 					displayWidth: imageBlock.displayWidth,
 					displayHeight: imageBlock.displayHeight,
 					alignment: imageBlock.alignment
@@ -9297,28 +9332,49 @@ function DynamicSelect({ field, pluginId, value, onChange }) {
 		}
 	})] });
 }
+const WORDS_PER_MINUTE = 200;
+const CJK_CHARACTERS_PER_MINUTE = 500;
+const WHITESPACE_REGEX$1 = /\s+/;
+const CJK_CHARACTER_REGEX = /\p{Script=Han}|\p{Script=Hangul}|\p{Script=Hiragana}|\p{Script=Katakana}/gu;
+function countCjkCharacters(text) {
+	return text.match(CJK_CHARACTER_REGEX)?.length ?? 0;
+}
+function countNonCjkWords(text) {
+	return text.replace(CJK_CHARACTER_REGEX, " ").split(WHITESPACE_REGEX$1).filter(Boolean).length;
+}
+/**
+* Word count for the editor footer. CJK characters are counted individually
+* because they are not delimited by spaces; other scripts are counted by word.
+* Used as the `wordCounter` for the CharacterCount extension, whose default
+* (`text.split(' ')`) reports a spaceless CJK paragraph as a single word.
+*/
+function countWords(text) {
+	return countNonCjkWords(text) + countCjkCharacters(text);
+}
 /**
-* Calculate reading time in minutes based on word count
-* Uses a standard reading speed of 200 words per minute
+* Calculate reading time in minutes for the given text. Word-based scripts are
+* read at WORDS_PER_MINUTE and CJK characters at CJK_CHARACTERS_PER_MINUTE.
+* Returns 0 for an empty document.
 */
-function calculateReadingTime(words) {
-	return Math.ceil(words / 200);
+function calculateReadingTime(text) {
+	return Math.ceil(countNonCjkWords(text) / WORDS_PER_MINUTE + countCjkCharacters(text) / CJK_CHARACTERS_PER_MINUTE);
 }
 /**
 * Editor footer showing writing metrics (word count, character count, reading time)
 */
 function EditorFooter({ editor }) {
-	const { words, characters } = useEditorState({
+	const { words, characters, text } = useEditorState({
 		editor,
 		selector: (ctx) => {
 			const storage = ctx.editor.storage.characterCount;
 			return {
 				words: storage.words(),
-				characters: storage.characters()
+				characters: storage.characters(),
+				text: ctx.editor.getText()
 			};
 		}
 	});
-	const readingTime = calculateReadingTime(words);
+	const readingTime = calculateReadingTime(text);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "border-t px-4 py-2 flex items-center gap-4 text-xs text-kumo-subtle",
 		children: [
@@ -9501,7 +9557,7 @@ function PortableTextEditor({ value, onChange, placeholder = "Start writing...",
 				onStateChange: setSlashMenuState,
 				getState: () => slashMenuStateRef.current
 			}),
-			CharacterCount,
+			CharacterCount.configure({ wordCounter: countWords }),
 			Focus.configure({
 				className: "has-focus",
 				mode: "all"
@@ -9575,7 +9631,9 @@ function PortableTextEditor({ value, onChange, placeholder = "Start writing...",
 			mediaId: item.id,
 			provider: item.provider || "local",
 			width: item.width,
-			height: item.height
+			height: item.height,
+			blurhash: item.blurhash,
+			dominantColor: item.dominantColor
 		}).run();
 		setMediaPickerOpen(false);
 	}, [editor]);
@@ -10009,7 +10067,9 @@ function EditorToolbar({ editor, focusMode, onFocusModeChange }) {
 			alt: item.alt || item.filename,
 			mediaId: item.id,
 			width: item.width,
-			height: item.height
+			height: item.height,
+			blurhash: item.blurhash,
+			dominantColor: item.dominantColor
 		}).run();
 	}, [editor]);
 	const handleKeyDown = React$1.useCallback((e) => {
@@ -30744,7 +30804,7 @@ function Header() {
 								/* @__PURE__ */ jsx("hr", { className: "my-1" }),
 								/* @__PURE__ */ jsxs("button", {
 									onClick: handleLogout,
-									className: "flex items-center gap-2 rounded-md px-3 py-2 text-sm text-kumo-danger hover:bg-kumo-danger/10 w-full text-start",
+									className: "flex items-center gap-2 rounded-md px-3 py-2 text-sm text-kumo-danger hover:bg-kumo-danger/10 w-full text-start cursor-pointer",
 									children: [/* @__PURE__ */ jsx(SignOut, { className: "h-4 w-4" }), _t({
 										id: "FgAxTj",
 										message: "Log out"
@@ -39546,6 +39606,7 @@ function ContentListPage() {
 		return data?.pages.flatMap((page) => page.items) || [];
 	}, [data]);
 	const total = data?.pages[0]?.total ?? items.length;
+	const handleLoadMore = React$1.useCallback(() => void fetchNextPage(), [fetchNextPage]);
 	if (!manifest) return /* @__PURE__ */ jsx(LoadingScreen, {});
 	const collectionConfig = manifest.collections[collection];
 	if (!collectionConfig) return /* @__PURE__ */ jsx(NotFoundPage, { message: `Collection "${collection}" not found` });
@@ -39565,7 +39626,7 @@ function ContentListPage() {
 		isLoading: isLoading || isFetchingNextPage,
 		isTrashedLoading,
 		hasMore: !!hasNextPage,
-		onLoadMore: React$1.useCallback(() => void fetchNextPage(), [fetchNextPage]),
+		onLoadMore: handleLoadMore,
 		trashedCount: trashedData?.items?.length || 0,
 		onDelete: (id) => deleteMutation.mutate(id),
 		onRestore: (id) => restoreMutation.mutate(id),