@joai/react 1.0.0

package/dist/index.mjs

@@ -0,0 +1,1788 @@
+'use client';
+import { createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { containedImageDimensions, containedImageDimensions as containedImageDimensions$1, cropOutputDimensions, cropOutputDimensions as cropOutputDimensions$1, getLoginUrl, imageCropRectangle, imageCropRectangle as imageCropRectangle$1, validateImageDimensions } from "@joai/core";
+import { createClient, getAuthFragmentToken } from "@joai/sdk";
+//#region src/guest.ts
+function safeGet(key) {
+	try {
+		return localStorage.getItem(key);
+	} catch {
+		return null;
+	}
+}
+function safeSet(key, value) {
+	try {
+		localStorage.setItem(key, value);
+	} catch {}
+}
+function safeRemove(key) {
+	try {
+		localStorage.removeItem(key);
+	} catch {}
+}
+function getOrCreateGuestId(storageKey = "joai_embed_guest") {
+	if (typeof window === "undefined") return "";
+	const existing = safeGet(storageKey);
+	if (existing) return existing;
+	const id = crypto.randomUUID();
+	safeSet(storageKey, id);
+	return id;
+}
+function loadRoom(storageKey) {
+	return safeGet(storageKey);
+}
+function saveRoom(storageKey, roomId) {
+	safeSet(storageKey, roomId);
+}
+function clearRoom(storageKey) {
+	safeRemove(storageKey);
+}
+//#endregion
+//#region src/stream-connection.ts
+function openEventSourceStream(url, onData, options) {
+	const es = new EventSource(url, { withCredentials: options?.withCredentials ?? false });
+	es.onmessage = (event) => {
+		try {
+			onData(JSON.parse(event.data));
+		} catch (e) {
+			options?.onError?.(e);
+		}
+	};
+	es.onerror = (event) => {
+		options?.onConnectionError?.(event);
+	};
+	return () => es.close();
+}
+//#endregion
+//#region src/components.tsx
+function EmbedChatList({ items, agentName, awaitingResponse, classNames = {}, renderEmptyState, renderAgentContent }) {
+	const containerRef = useRef(null);
+	useEffect(() => {
+		const el = containerRef.current;
+		if (!el) return;
+		if (el.scrollHeight - el.scrollTop - el.clientHeight < 120) el.scrollTop = el.scrollHeight;
+	}, [items, awaitingResponse]);
+	if (items.length === 0 && !awaitingResponse) return renderEmptyState ? renderEmptyState() : /* @__PURE__ */ jsx("div", {
+		className: classNames.container,
+		children: /* @__PURE__ */ jsxs("p", { children: [
+			"Send ",
+			agentName,
+			" a message to start chatting"
+		] })
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref: containerRef,
+		className: classNames.container,
+		role: "log",
+		"aria-live": "polite",
+		children: [items.map((item, i) => /* @__PURE__ */ jsx(EmbedChatBubble, {
+			item,
+			classNames,
+			renderAgentContent
+		}, i)), awaitingResponse && /* @__PURE__ */ jsx(EmbedThinkingIndicator, {
+			wrapperClassName: classNames.thinkingWrapper,
+			dotClassName: classNames.dot
+		})]
+	});
+}
+function EmbedChatBubble({ item, classNames, renderAgentContent }) {
+	if (item.byUser) return /* @__PURE__ */ jsx("div", {
+		className: classNames.userBubble,
+		children: item.content
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: item.error ? classNames.errorBubble : classNames.agentBubble,
+		children: renderAgentContent ? renderAgentContent(item) : /* @__PURE__ */ jsxs(Fragment, { children: [item.content, item.streaming && /* @__PURE__ */ jsx("span", { className: "inline-block w-1 h-3 ml-1 bg-current animate-pulse rounded-full" })] })
+	});
+}
+function EmbedThinkingIndicator({ wrapperClassName, dotClassName }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: wrapperClassName,
+		children: /* @__PURE__ */ jsxs("span", {
+			className: "inline-flex gap-1",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: dotClassName,
+					style: { animationDelay: "0ms" }
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: dotClassName,
+					style: { animationDelay: "150ms" }
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: dotClassName,
+					style: { animationDelay: "300ms" }
+				})
+			]
+		})
+	});
+}
+function EmbedChatInput({ onSend, disabled, placeholder = "Type a message...", maxLength = 4e3, classNames = {}, renderSendButton }) {
+	const [text, setText] = useState("");
+	const textareaRef = useRef(null);
+	function handleSend() {
+		const trimmed = text.trim();
+		if (!trimmed || disabled) return;
+		onSend(trimmed);
+		setText("");
+		if (textareaRef.current) textareaRef.current.style.height = "auto";
+	}
+	function handleKeyDown(e) {
+		if (e.key === "Enter" && !e.shiftKey) {
+			e.preventDefault();
+			handleSend();
+		}
+	}
+	function handleInput() {
+		if (textareaRef.current) {
+			textareaRef.current.style.height = "auto";
+			textareaRef.current.style.height = Math.min(textareaRef.current.scrollHeight, 120) + "px";
+		}
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: classNames.container,
+		children: [/* @__PURE__ */ jsx("textarea", {
+			ref: textareaRef,
+			value: text,
+			onChange: (e) => setText(e.target.value),
+			onKeyDown: handleKeyDown,
+			onInput: handleInput,
+			placeholder,
+			"aria-label": "Message input",
+			maxLength,
+			rows: 1,
+			disabled,
+			className: classNames.textarea
+		}), renderSendButton({
+			onClick: handleSend,
+			disabled: disabled || !text.trim()
+		})]
+	});
+}
+//#endregion
+//#region src/use-embed-chat.ts
+const RESPONSE_TIMEOUT_MS = 3e4;
+function useEmbedChat({ agentUuid, http, cortexBaseUrl, guestId, roomStorageKey, enabled = true, extraPayload }) {
+	const [items, setItems] = useState([]);
+	const [sending, setSending] = useState(false);
+	const [awaitingResponse, setAwaitingResponse] = useState(false);
+	const [roomId, setRoomId] = useState(null);
+	const [connectionError, setConnectionError] = useState(false);
+	const roomIdRef = useRef(null);
+	roomIdRef.current = roomId;
+	const extraPayloadRef = useRef(extraPayload);
+	extraPayloadRef.current = extraPayload;
+	useEffect(() => {
+		if (!roomId) return;
+		setConnectionError(false);
+		return openEventSourceStream(`${cortexBaseUrl}/agents/stream/${roomId}`, (raw) => {
+			setConnectionError(false);
+			const data = raw;
+			if (data.type === "response:chunk") {
+				setAwaitingResponse(false);
+				setItems((prev) => {
+					const last = prev[prev.length - 1];
+					if (last && last.streaming && !last.byUser) {
+						const updated = [...prev];
+						updated[updated.length - 1] = {
+							...last,
+							content: last.content + (data.content ?? "")
+						};
+						return updated;
+					}
+					return [...prev, {
+						content: data.content ?? "",
+						byUser: false,
+						streaming: true
+					}];
+				});
+			} else if (data.type === "response") {
+				setAwaitingResponse(false);
+				setItems((prev) => {
+					const updated = [...prev];
+					const lastIdx = updated.length - 1;
+					if (lastIdx >= 0 && updated[lastIdx].streaming) updated[lastIdx] = {
+						...updated[lastIdx],
+						content: data.content ?? updated[lastIdx].content,
+						streaming: false
+					};
+					else updated.push({
+						content: data.content ?? "",
+						byUser: false
+					});
+					return updated;
+				});
+			} else if (data.type === "complete") {
+				setAwaitingResponse(false);
+				setItems((prev) => prev.map((item) => item.streaming ? {
+					...item,
+					streaming: false
+				} : item));
+			}
+		}, { onConnectionError: () => setConnectionError(true) });
+	}, [roomId, cortexBaseUrl]);
+	useEffect(() => {
+		if (!awaitingResponse) return;
+		const timer = setTimeout(() => {
+			setAwaitingResponse(false);
+			setItems((prev) => [...prev, {
+				content: "Response timed out. Please try again.",
+				byUser: false,
+				error: true
+			}]);
+		}, RESPONSE_TIMEOUT_MS);
+		return () => clearTimeout(timer);
+	}, [awaitingResponse]);
+	return {
+		items,
+		setItems,
+		sending,
+		awaitingResponse,
+		roomId,
+		setRoomId,
+		send: useCallback(async (message) => {
+			if (!enabled || sending || !agentUuid) return;
+			setItems((prev) => [...prev, {
+				content: message,
+				byUser: true
+			}]);
+			setSending(true);
+			setConnectionError(false);
+			try {
+				const res = await http.post(`integrations/embed/${agentUuid}/execute`, {
+					message,
+					guestId,
+					...extraPayloadRef.current
+				});
+				if (!res.ok) {
+					const msg = res.data && typeof res.data === "object" && "message" in res.data ? res.data.message : "Something went wrong. Please try again.";
+					setItems((prev) => [...prev, {
+						content: msg,
+						byUser: false,
+						error: true
+					}]);
+					return;
+				}
+				setAwaitingResponse(true);
+				const newRoomId = res.data?.roomId;
+				if (newRoomId && !roomIdRef.current) {
+					setRoomId(newRoomId);
+					saveRoom(roomStorageKey, newRoomId);
+				}
+			} catch {
+				setItems((prev) => [...prev, {
+					content: "Something went wrong. Please try again.",
+					byUser: false,
+					error: true
+				}]);
+			} finally {
+				setSending(false);
+			}
+		}, [
+			enabled,
+			sending,
+			agentUuid,
+			http,
+			guestId,
+			roomStorageKey
+		]),
+		connectionError
+	};
+}
+//#endregion
+//#region src/content/context.ts
+const ContentContext = createContext(null);
+function useContent() {
+	const context = useContext(ContentContext);
+	if (!context) throw new Error("useContent must be used within a ContentProvider.");
+	return context;
+}
+//#endregion
+//#region src/content/content-cache.ts
+const contentCache = /* @__PURE__ */ new Map();
+const pendingLoads = /* @__PURE__ */ new Map();
+function cacheContent(content) {
+	contentCache.set(`id:${content.id}`, content);
+	contentCache.set(`slug:${content.slug}`, content);
+}
+async function loadContent(client, contentId, publicSlug) {
+	const target = contentId ?? publicSlug;
+	if (!target) return null;
+	const key = contentId ? `id:${contentId}` : `slug:${publicSlug}`;
+	const cached = contentCache.get(key);
+	if (cached) return cached;
+	const pending = pendingLoads.get(key);
+	if (pending) return pending;
+	const request = (contentId ? client.content.get(target) : client.content.getPublic(target)).then((result) => result.ok && result.data ? result.data : null).then((content) => {
+		if (content) cacheContent(content);
+		return content;
+	}).finally(() => pendingLoads.delete(key));
+	pendingLoads.set(key, request);
+	return request;
+}
+//#endregion
+//#region src/content/state.ts
+function contentValues(content) {
+	return Object.fromEntries(content?.version?.entries.map((entry) => [entry.key, entry.value]) ?? []);
+}
+function contentPatches(content, values) {
+	const original = contentValues(content);
+	return Object.entries(values).filter(([key, value]) => JSON.stringify(value) !== JSON.stringify(original[key])).map(([key, value]) => ({
+		key,
+		value
+	}));
+}
+//#endregion
+//#region src/content/use-unsaved-navigation.ts
+const navigationApi = () => {
+	if (typeof window === "undefined") return null;
+	return window.navigation ?? null;
+};
+const useUnsavedNavigation = (shouldBlock, confirmLeave) => {
+	const allowed = useRef(false);
+	useEffect(() => {
+		if (!shouldBlock || typeof window === "undefined" || typeof document === "undefined") return;
+		allowed.current = false;
+		const beforeUnload = (event) => {
+			if (allowed.current) return;
+			event.preventDefault();
+			event.returnValue = "";
+		};
+		const confirmNavigation = () => {
+			if (!confirmLeave()) return false;
+			allowed.current = true;
+			return true;
+		};
+		const navigation = navigationApi();
+		const navigate = ((event) => {
+			if (allowed.current || event.hashChange || !event.cancelable) return;
+			const destination = event.destination?.url;
+			if (destination) {
+				const current = new URL(window.location.href);
+				const next = new URL(destination, current);
+				if (current.origin === next.origin && current.pathname === next.pathname && current.search === next.search) return;
+			}
+			if (!confirmNavigation()) event.preventDefault();
+		});
+		const click = (event) => {
+			if (allowed.current || event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+			const target = event.target instanceof Element ? event.target.closest("a[href]") : null;
+			if (!target || target.target === "_blank" || target.hasAttribute("download")) return;
+			if (target.hasAttribute("data-content-navigation-allowed")) {
+				allowed.current = true;
+				return;
+			}
+			const current = new URL(window.location.href);
+			const next = new URL(target.href, current);
+			if (current.origin === next.origin && current.pathname === next.pathname && current.search === next.search) return;
+			if (!confirmNavigation()) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		};
+		window.addEventListener("beforeunload", beforeUnload);
+		if (navigation) navigation.addEventListener("navigate", navigate);
+		else document.addEventListener("click", click, true);
+		return () => {
+			window.removeEventListener("beforeunload", beforeUnload);
+			if (navigation) navigation.removeEventListener("navigate", navigate);
+			else document.removeEventListener("click", click, true);
+		};
+	}, [shouldBlock]);
+};
+//#endregion
+//#region src/content/provider.tsx
+const DEFAULT_MESSAGES = {
+	conflict: "This content changed elsewhere. Your edits are preserved on the latest version. Review them and try again.",
+	loadError: "Content could not be loaded.",
+	publishError: "Changes could not be published. Try again.",
+	published: "Changes published.",
+	saveError: "Changes could not be saved. Try again.",
+	saved: "Draft saved.",
+	sessionExpired: "Your session expired. Sign in again to continue.",
+	unsavedNavigation: "You have unsaved changes. Do you really want to leave this page?"
+};
+const DEFAULT_IMAGE_PICKER_LABELS = {
+	applyCrop: "Apply crop",
+	back: "Back",
+	choose: "Choose image",
+	close: "Close",
+	cropDescription: "Adjust the position and zoom before uploading.",
+	cropTitle: "Crop image",
+	dimensionsTooLarge: "The image dimensions are too large.",
+	dimensionsTooSmall: "The image dimensions are too small.",
+	drop: "Drop an image here",
+	empty: "No images are available yet.",
+	field: "Editable image",
+	invalidType: "Choose an image file.",
+	libraryDescription: "Choose an existing image or upload a new one.",
+	libraryTitle: "Image library",
+	loadError: "Images could not be loaded.",
+	loading: "Loading images…",
+	positionHorizontal: "Horizontal position",
+	positionVertical: "Vertical position",
+	processing: "Preparing image…",
+	retry: "Try again",
+	tooLarge: "The image is too large.",
+	upload: "Upload image",
+	uploadError: "The image could not be uploaded.",
+	uploading: "Uploading…",
+	zoom: "Zoom"
+};
+const isContentConflict = (result) => {
+	return result.original?.status === 409 || Boolean(result.errors && "expectedVersion" in result.errors);
+};
+const isUnauthorized = (result) => result.original?.status === 401 || result.original?.status === 403;
+const valuesWithDraft = (source, canEdit, contentId, draftStore) => {
+	const values = contentValues(source);
+	if (!canEdit || !draftStore) return values;
+	try {
+		const draft = draftStore.get();
+		if (!draft || draft.contentId && contentId && draft.contentId !== contentId) return values;
+		return {
+			...values,
+			...draft.values
+		};
+	} catch {
+		return values;
+	}
+};
+const clearDraft = (draftStore) => {
+	try {
+		draftStore?.clear();
+	} catch {}
+};
+const persistDraft = (draftStore, contentId, values) => {
+	try {
+		draftStore?.set({
+			contentId,
+			values
+		});
+	} catch {}
+};
+function ContentProvider({ children, client, contentId, publicSlug, initialContent, canEdit = false, canPublish = false, teamSlug, confirmLeave, draftStore, imagePickerLabels: imagePickerLabelOverrides, messages: messageOverrides, onUnauthorized }) {
+	const messages = {
+		...DEFAULT_MESSAGES,
+		...messageOverrides
+	};
+	const imagePickerLabels = {
+		...DEFAULT_IMAGE_PICKER_LABELS,
+		...imagePickerLabelOverrides
+	};
+	const [content, setContent] = useState(initialContent ?? null);
+	const [values, setValues] = useState(() => valuesWithDraft(initialContent ?? null, canEdit, contentId, draftStore));
+	const [isLoading, setIsLoading] = useState(!initialContent && Boolean(contentId || publicSlug));
+	const [operation, setOperation] = useState(null);
+	const [isEditing, setEditing] = useState(false);
+	const [error, setError] = useState(null);
+	const [message, setMessage] = useState(null);
+	useEffect(() => {
+		if (initialContent) {
+			cacheContent(initialContent);
+			setContent(initialContent);
+			setValues(valuesWithDraft(initialContent, canEdit, contentId, draftStore));
+			setIsLoading(false);
+			return;
+		}
+		const load = async () => {
+			if (!contentId && !publicSlug) return;
+			setIsLoading(true);
+			setError(null);
+			setMessage(null);
+			try {
+				const nextContent = await loadContent(client, contentId, publicSlug);
+				if (!nextContent) setError(messages.loadError);
+				else {
+					setContent(nextContent);
+					setValues(valuesWithDraft(nextContent, canEdit, contentId, draftStore));
+				}
+			} catch {
+				setError(messages.loadError);
+			} finally {
+				setIsLoading(false);
+			}
+		};
+		load();
+	}, [
+		contentId,
+		initialContent?.id,
+		initialContent?.version?.number,
+		publicSlug
+	]);
+	const setValue = useCallback((key, value) => {
+		setError(null);
+		setMessage(null);
+		setValues((current) => ({
+			...current,
+			[key]: value
+		}));
+	}, []);
+	const updateEditing = useCallback((editing) => {
+		if (editing) {
+			setError(null);
+			setMessage(null);
+		}
+		setEditing(editing);
+	}, []);
+	const isDirty = contentPatches(content, values).length > 0;
+	const isSaving = operation !== null;
+	const versionNumber = content?.version?.number;
+	const valuesSignature = JSON.stringify(values);
+	const requestLeave = useCallback(() => confirmLeave ? confirmLeave() : window.confirm(messages.unsavedNavigation), [messages.unsavedNavigation]);
+	useUnsavedNavigation(canEdit && isDirty, requestLeave);
+	useEffect(() => {
+		if (!canEdit || !draftStore || !versionNumber) return;
+		if (isDirty) persistDraft(draftStore, contentId, JSON.parse(valuesSignature));
+		else clearDraft(draftStore);
+	}, [
+		canEdit,
+		contentId,
+		isDirty,
+		valuesSignature,
+		versionNumber
+	]);
+	const recoverConflict = useCallback(async () => {
+		if (!contentId) return false;
+		try {
+			const latest = await client.content.get(contentId);
+			if (!latest.ok || !latest.data) return false;
+			cacheContent(latest.data);
+			setContent(latest.data);
+			setError(messages.conflict);
+			return true;
+		} catch {
+			return false;
+		}
+	}, [contentId, messages.conflict]);
+	const cancel = useCallback(() => {
+		setValues(contentValues(content));
+		clearDraft(draftStore);
+		setError(null);
+		setMessage(null);
+		setEditing(false);
+	}, [content]);
+	const save = useCallback(async () => {
+		if (!content?.version || !contentId || !canEdit) return false;
+		const patches = contentPatches(content, values);
+		if (patches.length === 0) return true;
+		setOperation("save");
+		setError(null);
+		setMessage(null);
+		try {
+			const result = await client.content.patch(contentId, {
+				expectedVersion: content.version.number,
+				patches,
+				origin: "inlineEditor"
+			});
+			if (!result.ok || !result.data) {
+				if (isUnauthorized(result)) {
+					setError(messages.sessionExpired);
+					onUnauthorized?.();
+					return false;
+				}
+				if (isContentConflict(result) && await recoverConflict()) return false;
+				setError(messages.saveError);
+				return false;
+			}
+			const nextContent = {
+				...content,
+				version: result.data,
+				updatedAt: result.data.updatedAt
+			};
+			cacheContent(nextContent);
+			setContent(nextContent);
+			setValues(contentValues(nextContent));
+			clearDraft(draftStore);
+			setMessage(messages.saved);
+			return true;
+		} catch {
+			setError(messages.saveError);
+			return false;
+		} finally {
+			setOperation(null);
+		}
+	}, [
+		canEdit,
+		content,
+		contentId,
+		messages.saveError,
+		messages.saved,
+		messages.sessionExpired,
+		recoverConflict,
+		values
+	]);
+	const publish = useCallback(async () => {
+		if (!content?.version || !contentId || !canPublish) return false;
+		const patches = contentPatches(content, values);
+		setOperation("publish");
+		setError(null);
+		setMessage(null);
+		try {
+			const result = patches.length > 0 ? await client.content.patch(contentId, {
+				expectedVersion: content.version.number,
+				patches,
+				origin: "inlineEditor",
+				publish: true
+			}) : await client.content.publish(contentId, content.version.number);
+			if (!result.ok || !result.data) {
+				if (isUnauthorized(result)) {
+					setError(messages.sessionExpired);
+					onUnauthorized?.();
+					return false;
+				}
+				if (isContentConflict(result) && await recoverConflict()) return false;
+				setError(messages.publishError);
+				return false;
+			}
+			const nextContent = {
+				...content,
+				version: result.data,
+				updatedAt: result.data.updatedAt
+			};
+			cacheContent(nextContent);
+			setContent(nextContent);
+			setValues(contentValues(nextContent));
+			clearDraft(draftStore);
+			setEditing(false);
+			setMessage(messages.published);
+			return true;
+		} catch {
+			setError(messages.publishError);
+			return false;
+		} finally {
+			setOperation(null);
+		}
+	}, [
+		canPublish,
+		content,
+		contentId,
+		messages.publishError,
+		messages.published,
+		messages.sessionExpired,
+		recoverConflict,
+		values
+	]);
+	const context = useMemo(() => ({
+		content,
+		values,
+		isLoading,
+		isSaving,
+		operation,
+		isEditing,
+		isDirty,
+		canEdit,
+		canPublish,
+		teamSlug,
+		media: client.media,
+		error,
+		message,
+		imagePickerLabels,
+		cancel,
+		setEditing: updateEditing,
+		setValue,
+		save,
+		publish
+	}), [
+		cancel,
+		canEdit,
+		canPublish,
+		content,
+		error,
+		imagePickerLabels.applyCrop,
+		imagePickerLabels.back,
+		imagePickerLabels.choose,
+		imagePickerLabels.close,
+		imagePickerLabels.cropDescription,
+		imagePickerLabels.cropTitle,
+		imagePickerLabels.dimensionsTooLarge,
+		imagePickerLabels.dimensionsTooSmall,
+		imagePickerLabels.drop,
+		imagePickerLabels.empty,
+		imagePickerLabels.field,
+		imagePickerLabels.invalidType,
+		imagePickerLabels.libraryDescription,
+		imagePickerLabels.libraryTitle,
+		imagePickerLabels.loadError,
+		imagePickerLabels.loading,
+		imagePickerLabels.positionHorizontal,
+		imagePickerLabels.positionVertical,
+		imagePickerLabels.processing,
+		imagePickerLabels.retry,
+		imagePickerLabels.tooLarge,
+		imagePickerLabels.upload,
+		imagePickerLabels.uploadError,
+		imagePickerLabels.uploading,
+		imagePickerLabels.zoom,
+		isDirty,
+		isEditing,
+		isLoading,
+		isSaving,
+		message,
+		operation,
+		publish,
+		save,
+		setValue,
+		teamSlug,
+		updateEditing,
+		values
+	]);
+	return /* @__PURE__ */ jsx(ContentContext.Provider, {
+		value: context,
+		children
+	});
+}
+//#endregion
+//#region src/content/editable-content.tsx
+function EditableContent({ field, as: Tag = "span", className, placeholder = "Add text", multiline = false, editorClassName, label }) {
+	const { values, isEditing, canEdit, setValue } = useContent();
+	const value = values[field];
+	const text = typeof value === "string" || typeof value === "number" ? String(value) : "";
+	const fieldLabel = label ?? field;
+	if (!canEdit || !isEditing) return /* @__PURE__ */ jsx(Tag, {
+		className,
+		children: text
+	});
+	const editorClasses = `${className ?? ""} ${editorClassName ?? ""} block min-h-[2.5rem] w-full rounded-md border border-dashed border-blue-400/80 bg-white/95 px-3 py-2 [font:inherit] text-inherit shadow-sm outline-none transition hover:border-blue-500 hover:bg-blue-50/60 focus:border-blue-600 focus:bg-white focus:ring-2 focus:ring-blue-500/30`.trim();
+	return /* @__PURE__ */ jsxs("span", {
+		className: "group/content-field relative my-1 block",
+		"data-content-editable": field,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "pointer-events-none absolute -top-2 left-2 z-10 rounded bg-blue-600 px-1.5 py-0.5 text-[10px] font-semibold uppercase leading-none tracking-wide text-white opacity-90 shadow-sm transition group-hover/content-field:opacity-100",
+			children: fieldLabel
+		}), multiline ? /* @__PURE__ */ jsx("textarea", {
+			"aria-label": fieldLabel,
+			className: `${editorClasses} min-h-[7rem] resize-y`,
+			placeholder,
+			value: text,
+			onChange: (event) => setValue(field, event.target.value)
+		}) : /* @__PURE__ */ jsx("input", {
+			"aria-label": fieldLabel,
+			className: editorClasses,
+			placeholder,
+			value: text,
+			onChange: (event) => setValue(field, event.target.value)
+		})]
+	});
+}
+function useContentValue(key) {
+	return useContent().values[key];
+}
+//#endregion
+//#region src/content/image-processing.ts
+const loadImage = (file) => new Promise((resolve, reject) => {
+	const url = URL.createObjectURL(file);
+	const image = new Image();
+	image.onload = () => {
+		URL.revokeObjectURL(url);
+		resolve({
+			image,
+			dimensions: {
+				width: image.naturalWidth,
+				height: image.naturalHeight
+			}
+		});
+	};
+	image.onerror = () => {
+		URL.revokeObjectURL(url);
+		reject(/* @__PURE__ */ new Error("Image could not be decoded."));
+	};
+	image.src = url;
+});
+const readImageDimensions = async (file) => (await loadImage(file)).dimensions;
+const outputFileName = (name, mimeType) => {
+	const extension = mimeType === "image/png" ? "png" : mimeType === "image/jpeg" ? "jpg" : "webp";
+	return `${name.replace(/\.[^.]+$/, "") || "image"}.${extension}`;
+};
+const processImageFile = async (file, compression, cropOptions, cropState = {
+	x: 0,
+	y: 0,
+	zoom: 1
+}) => {
+	const { image, dimensions } = await loadImage(file);
+	const source = cropOptions ? imageCropRectangle$1(dimensions, cropOptions.aspectRatio, cropState) : {
+		x: 0,
+		y: 0,
+		...dimensions
+	};
+	const requested = cropOptions ? cropOutputDimensions$1({
+		width: source.width,
+		height: source.height
+	}, cropOptions, compression) : containedImageDimensions$1({
+		width: source.width,
+		height: source.height
+	}, compression);
+	const canvas = document.createElement("canvas");
+	canvas.width = requested.width;
+	canvas.height = requested.height;
+	const context = canvas.getContext("2d");
+	if (!context) throw new Error("Canvas is unavailable.");
+	context.drawImage(image, source.x, source.y, source.width, source.height, 0, 0, requested.width, requested.height);
+	const mimeType = compression.mimeType ?? "image/webp";
+	const quality = typeof compression.quality === "number" && Number.isFinite(compression.quality) ? Math.max(.1, Math.min(1, compression.quality)) : .84;
+	const blob = await new Promise((resolve, reject) => canvas.toBlob((value) => value ? resolve(value) : reject(/* @__PURE__ */ new Error("Image processing failed.")), mimeType, quality));
+	const outputType = blob.type || mimeType;
+	return new File([blob], outputFileName(file.name, outputType), {
+		type: outputType,
+		lastModified: Date.now()
+	});
+};
+//#endregion
+//#region src/content/editable-image.tsx
+const DEFAULT_MAX_UPLOAD_BYTES = 10 * 1024 * 1024;
+const DEFAULT_MAX_SOURCE_BYTES = 40 * 1024 * 1024;
+const DEFAULT_PROCESSING = {
+	compression: {
+		maxWidth: 2560,
+		maxHeight: 2560,
+		mimeType: "image/webp",
+		quality: .84
+	},
+	dimensions: { maxPixels: 5e7 }
+};
+const FOCUSABLE_SELECTOR = "button:not([disabled]), [href], input:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
+const focusableElements = (container) => Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR));
+const validateImageFile = (file, maxUploadBytes, labels) => {
+	if (!file.type.startsWith("image/")) return labels.invalidType;
+	if (file.size > maxUploadBytes) return labels.tooLarge;
+	return null;
+};
+const compressionFor = (file, compression) => {
+	if (compression !== false) return compression ?? DEFAULT_PROCESSING.compression;
+	return { mimeType: file.type === "image/png" || file.type === "image/jpeg" || file.type === "image/webp" ? file.type : "image/webp" };
+};
+const preservesOriginalFormat = (file) => file.type === "image/gif" || file.type === "image/svg+xml";
+const processingDimensionError = (dimensions, processing) => {
+	if (processing.dimensions === false) return null;
+	return validateImageDimensions(dimensions, {
+		...DEFAULT_PROCESSING.dimensions,
+		...processing.dimensions
+	});
+};
+function EditableImage({ field, alt = "", className, inputClassName, placeholder = "Image URL", onSelect, label, labels: labelOverrides, maxUploadBytes = DEFAULT_MAX_UPLOAD_BYTES, maxSourceBytes = DEFAULT_MAX_SOURCE_BYTES, processing = DEFAULT_PROCESSING }) {
+	const { values, isEditing, canEdit, media, setValue, teamSlug, imagePickerLabels: defaultLabels } = useContent();
+	const labels = {
+		...defaultLabels,
+		...labelOverrides
+	};
+	const fieldLabel = label ?? labels.field;
+	const source = typeof values[field] === "string" ? values[field] : "";
+	const [isPickerOpen, setPickerOpen] = useState(false);
+	const [images, setImages] = useState([]);
+	const [isLoading, setLoading] = useState(false);
+	const [operation, setOperation] = useState(null);
+	const [error, setError] = useState(null);
+	const [canRetry, setCanRetry] = useState(false);
+	const [pendingImage, setPendingImage] = useState(null);
+	const [crop, setCrop] = useState({
+		x: 0,
+		y: 0,
+		zoom: 1
+	});
+	const loadRequest = useRef(0);
+	const uploadInProgress = useRef(false);
+	useEffect(() => () => {
+		if (pendingImage) URL.revokeObjectURL(pendingImage.previewUrl);
+	}, [pendingImage?.previewUrl]);
+	const loadImages = async () => {
+		if (!media || !teamSlug) return;
+		const request = ++loadRequest.current;
+		setLoading(true);
+		setError(null);
+		setCanRetry(false);
+		try {
+			const result = await media.list(teamSlug, { mime: "image/" });
+			if (request !== loadRequest.current) return;
+			if (!result.ok) {
+				setError(labels.loadError);
+				setCanRetry(true);
+				return;
+			}
+			setImages(result.data ?? []);
+		} catch {
+			if (request === loadRequest.current) {
+				setError(labels.loadError);
+				setCanRetry(true);
+			}
+		} finally {
+			if (request === loadRequest.current) setLoading(false);
+		}
+	};
+	useEffect(() => {
+		if (!isPickerOpen || !media || !teamSlug) return;
+		loadImages();
+		return () => {
+			loadRequest.current += 1;
+		};
+	}, [isPickerOpen, teamSlug]);
+	const uploadFile = async (file) => {
+		if (!media || !teamSlug || uploadInProgress.current) return;
+		uploadInProgress.current = true;
+		setOperation("uploading");
+		try {
+			const result = await media.upload({
+				team: teamSlug,
+				file,
+				type: "output",
+				label: file.name
+			});
+			if (!result.ok || !result.data) {
+				setError(labels.uploadError);
+				return;
+			}
+			setImages((current) => [result.data, ...current]);
+			setValue(field, result.data.url);
+			setPickerOpen(false);
+		} catch {
+			setError(labels.uploadError);
+		} finally {
+			uploadInProgress.current = false;
+			setOperation(null);
+		}
+	};
+	const prepareUpload = async (file) => {
+		if (uploadInProgress.current) return;
+		setError(null);
+		setCanRetry(false);
+		const validationError = validateImageFile(file, maxSourceBytes, labels);
+		if (validationError) {
+			setError(validationError);
+			return;
+		}
+		uploadInProgress.current = true;
+		setOperation("processing");
+		try {
+			if (processing === false) {
+				if (file.size > maxUploadBytes) setError(labels.tooLarge);
+				else {
+					uploadInProgress.current = false;
+					setOperation(null);
+					await uploadFile(file);
+				}
+				return;
+			}
+			const dimensions = await readImageDimensions(file);
+			const dimensionError = processingDimensionError(dimensions, processing);
+			if (dimensionError) {
+				setError(dimensionError === "too-small" ? labels.dimensionsTooSmall : labels.dimensionsTooLarge);
+				return;
+			}
+			if (processing.crop) {
+				if (!Number.isFinite(processing.crop.aspectRatio) || processing.crop.aspectRatio <= 0) throw new RangeError("Crop aspect ratio must be a positive finite number.");
+				setCrop({
+					x: 0,
+					y: 0,
+					zoom: 1
+				});
+				setPendingImage({
+					file,
+					dimensions,
+					previewUrl: URL.createObjectURL(file)
+				});
+				return;
+			}
+			if (processing.compression === false || preservesOriginalFormat(file)) {
+				if (file.size > maxUploadBytes) {
+					setError(labels.tooLarge);
+					return;
+				}
+				uploadInProgress.current = false;
+				setOperation(null);
+				await uploadFile(file);
+				return;
+			}
+			const compression = {
+				...DEFAULT_PROCESSING.compression,
+				...processing.compression
+			};
+			const outputDimensionError = processingDimensionError(containedImageDimensions(dimensions, compression), processing);
+			if (outputDimensionError) {
+				setError(outputDimensionError === "too-small" ? labels.dimensionsTooSmall : labels.dimensionsTooLarge);
+				return;
+			}
+			const output = await processImageFile(file, compression);
+			if (output.size > maxUploadBytes) {
+				setError(labels.tooLarge);
+				return;
+			}
+			uploadInProgress.current = false;
+			setOperation(null);
+			await uploadFile(output);
+		} catch {
+			setError(labels.uploadError);
+		} finally {
+			if (uploadInProgress.current) {
+				uploadInProgress.current = false;
+				setOperation(null);
+			}
+		}
+	};
+	const applyCrop = async () => {
+		if (!pendingImage || processing === false || !processing.crop || uploadInProgress.current) return;
+		uploadInProgress.current = true;
+		setOperation("processing");
+		setError(null);
+		try {
+			const compression = {
+				...DEFAULT_PROCESSING.compression,
+				...processing.compression === false ? compressionFor(pendingImage.file, false) : processing.compression
+			};
+			const source = imageCropRectangle(pendingImage.dimensions, processing.crop.aspectRatio, crop);
+			const outputDimensionError = processingDimensionError(cropOutputDimensions({
+				width: source.width,
+				height: source.height
+			}, processing.crop, compression), processing);
+			if (outputDimensionError) {
+				setError(outputDimensionError === "too-small" ? labels.dimensionsTooSmall : labels.dimensionsTooLarge);
+				return;
+			}
+			const output = await processImageFile(pendingImage.file, compression, processing.crop, crop);
+			if (output.size > maxUploadBytes) {
+				setError(labels.tooLarge);
+				return;
+			}
+			setPendingImage(null);
+			uploadInProgress.current = false;
+			setOperation(null);
+			await uploadFile(output);
+		} catch {
+			setError(labels.uploadError);
+		} finally {
+			if (uploadInProgress.current) {
+				uploadInProgress.current = false;
+				setOperation(null);
+			}
+		}
+	};
+	if (!canEdit || !isEditing) return source ? /* @__PURE__ */ jsx("img", {
+		src: source,
+		alt,
+		className
+	}) : null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: `group/content-field relative rounded-lg border border-dashed border-blue-400/80 bg-blue-50/30 p-2 transition hover:border-blue-500 hover:bg-blue-50/60 focus-within:border-blue-600 focus-within:ring-2 focus-within:ring-blue-500/30 ${className ?? ""}`,
+		"data-content-editable": field,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "pointer-events-none absolute -top-2 left-2 z-10 rounded bg-blue-600 px-1.5 py-0.5 text-[10px] font-semibold uppercase leading-none tracking-wide text-white shadow-sm",
+				children: fieldLabel
+			}),
+			source && /* @__PURE__ */ jsx("img", {
+				src: source,
+				alt,
+				className: "h-auto w-full rounded-md"
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "mt-2 flex flex-wrap items-center gap-2",
+				children: [
+					onSelect && /* @__PURE__ */ jsx("button", {
+						className: "rounded-lg bg-blue-600 px-3 py-2 text-sm font-medium text-white transition hover:bg-blue-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2",
+						type: "button",
+						onClick: onSelect,
+						children: labels.choose
+					}),
+					!onSelect && media && teamSlug && /* @__PURE__ */ jsx("button", {
+						className: "rounded-lg bg-blue-600 px-3 py-2 text-sm font-medium text-white transition hover:bg-blue-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2",
+						type: "button",
+						onClick: () => setPickerOpen(true),
+						children: labels.choose
+					}),
+					/* @__PURE__ */ jsx("input", {
+						"aria-label": fieldLabel,
+						className: `${inputClassName ?? ""} min-w-0 flex-1 rounded-md border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 outline-none transition hover:border-blue-400 focus:border-blue-600 focus:ring-2 focus:ring-blue-500/30`,
+						type: "url",
+						placeholder,
+						value: source,
+						onChange: (event) => setValue(field, event.target.value)
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(ImagePicker, {
+				open: isPickerOpen,
+				onClose: () => {
+					if (!uploadInProgress.current) {
+						setPendingImage(null);
+						setPickerOpen(false);
+					}
+				},
+				images,
+				isLoading,
+				operation,
+				error,
+				canRetry,
+				labels,
+				pendingImage,
+				crop,
+				cropAspectRatio: processing === false ? void 0 : processing.crop?.aspectRatio,
+				onCropChange: setCrop,
+				onApplyCrop: applyCrop,
+				onBack: () => setPendingImage(null),
+				onRetry: loadImages,
+				onUpload: prepareUpload,
+				onSelect: (url) => {
+					if (uploadInProgress.current) return;
+					setValue(field, url);
+					setPickerOpen(false);
+				}
+			})
+		]
+	});
+}
+function ImagePicker({ open, onClose, images, isLoading, operation, error, canRetry, labels, pendingImage, crop, cropAspectRatio, onCropChange, onApplyCrop, onBack, onRetry, onUpload, onSelect }) {
+	const dialogRef = useRef(null);
+	const closeButtonRef = useRef(null);
+	const previousFocusRef = useRef(null);
+	const [isDragging, setDragging] = useState(false);
+	const titleId = useId();
+	const descriptionId = useId();
+	const isBusy = operation !== null;
+	useEffect(() => {
+		if (!open) return;
+		previousFocusRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+		const previousOverflow = document.body.style.overflow;
+		document.body.style.overflow = "hidden";
+		const frame = window.requestAnimationFrame(() => closeButtonRef.current?.focus());
+		const keydown = (event) => {
+			if (event.key === "Escape") {
+				event.preventDefault();
+				if (!isBusy) onClose();
+				return;
+			}
+			if (event.key !== "Tab" || !dialogRef.current) return;
+			const focusable = focusableElements(dialogRef.current);
+			if (focusable.length === 0) return;
+			const first = focusable[0];
+			const last = focusable.at(-1);
+			if (event.shiftKey && document.activeElement === first) {
+				event.preventDefault();
+				last.focus();
+			} else if (!event.shiftKey && document.activeElement === last) {
+				event.preventDefault();
+				first.focus();
+			}
+		};
+		document.addEventListener("keydown", keydown);
+		return () => {
+			window.cancelAnimationFrame(frame);
+			document.removeEventListener("keydown", keydown);
+			document.body.style.overflow = previousOverflow;
+			previousFocusRef.current?.focus();
+		};
+	}, [open]);
+	if (!open) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "fixed inset-0 z-[1100] grid place-items-center bg-slate-950/55 p-4",
+		role: "presentation",
+		onMouseDown: (event) => {
+			if (event.target === event.currentTarget) onClose();
+		},
+		children: /* @__PURE__ */ jsxs("div", {
+			ref: dialogRef,
+			className: "max-h-[min(44rem,calc(100vh-2rem))] w-full max-w-2xl overflow-y-auto rounded-xl bg-white p-5 shadow-2xl",
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-labelledby": titleId,
+			"aria-describedby": descriptionId,
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-start justify-between gap-4",
+					children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h2", {
+						id: titleId,
+						className: "text-lg font-semibold text-slate-950",
+						children: pendingImage ? labels.cropTitle : labels.libraryTitle
+					}), /* @__PURE__ */ jsx("p", {
+						id: descriptionId,
+						className: "mt-1 text-sm text-slate-500",
+						children: pendingImage ? labels.cropDescription : labels.libraryDescription
+					})] }), /* @__PURE__ */ jsx("button", {
+						ref: closeButtonRef,
+						"aria-label": labels.close,
+						className: "rounded-lg px-3 py-2 text-sm font-medium text-slate-700 transition hover:bg-slate-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 disabled:cursor-not-allowed disabled:opacity-50",
+						type: "button",
+						disabled: isBusy,
+						onClick: onClose,
+						children: labels.close
+					})]
+				}),
+				error && /* @__PURE__ */ jsxs("div", {
+					className: "mt-4 flex items-center justify-between gap-3 rounded-lg bg-red-50 px-3 py-2 text-sm text-red-700",
+					role: "alert",
+					children: [/* @__PURE__ */ jsx("span", { children: error }), canRetry && !isBusy && /* @__PURE__ */ jsx("button", {
+						className: "shrink-0 rounded px-2 py-1 font-semibold hover:bg-red-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-500",
+						type: "button",
+						onClick: () => void onRetry(),
+						children: labels.retry
+					})]
+				}),
+				pendingImage && cropAspectRatio ? /* @__PURE__ */ jsx(ImageCropEditor, {
+					pendingImage,
+					aspectRatio: cropAspectRatio,
+					crop,
+					isProcessing: isBusy,
+					labels,
+					onChange: onCropChange,
+					onApply: onApplyCrop,
+					onBack
+				}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsxs("label", {
+						className: `mt-5 flex flex-col items-center justify-center rounded-lg border border-dashed px-4 py-7 text-center text-sm font-medium transition focus-within:ring-2 focus-within:ring-blue-500 ${isBusy ? "cursor-wait border-slate-200 bg-slate-50 text-slate-400" : isDragging ? "cursor-copy border-blue-600 bg-blue-50 text-blue-700" : "cursor-pointer border-slate-300 text-slate-600 hover:border-blue-400 hover:text-blue-600"}`,
+						onDragEnter: (event) => {
+							event.preventDefault();
+							if (!isBusy) setDragging(true);
+						},
+						onDragOver: (event) => {
+							event.preventDefault();
+							if (!isBusy) setDragging(true);
+						},
+						onDragLeave: (event) => {
+							if (!event.currentTarget.contains(event.relatedTarget)) setDragging(false);
+						},
+						onDrop: (event) => {
+							event.preventDefault();
+							setDragging(false);
+							if (isBusy) return;
+							const file = event.dataTransfer.files?.[0];
+							if (file) onUpload(file);
+						},
+						children: [
+							/* @__PURE__ */ jsx("input", {
+								className: "sr-only",
+								type: "file",
+								accept: "image/*",
+								disabled: isBusy,
+								onChange: (event) => {
+									const file = event.target.files?.[0];
+									if (file) onUpload(file);
+									event.currentTarget.value = "";
+								}
+							}),
+							/* @__PURE__ */ jsx("span", { children: isDragging ? labels.drop : labels.upload }),
+							operation && /* @__PURE__ */ jsx("span", {
+								className: "mt-2 text-xs font-normal text-slate-500",
+								role: "status",
+								children: operation === "processing" ? labels.processing : labels.uploading
+							})
+						]
+					}),
+					isLoading && /* @__PURE__ */ jsx("div", {
+						className: "mt-5 rounded-lg bg-slate-50 p-6 text-center text-sm text-slate-500",
+						role: "status",
+						children: labels.loading
+					}),
+					!isLoading && !error && images.length === 0 && /* @__PURE__ */ jsx("div", {
+						className: "mt-5 rounded-lg bg-slate-50 p-6 text-center text-sm text-slate-500",
+						children: labels.empty
+					}),
+					!isLoading && images.length > 0 && /* @__PURE__ */ jsx("div", {
+						className: "mt-5 grid grid-cols-2 gap-3 sm:grid-cols-3",
+						role: "list",
+						children: images.map((image) => /* @__PURE__ */ jsxs("button", {
+							className: "overflow-hidden rounded-lg border border-slate-200 text-left transition hover:border-blue-400 hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 disabled:cursor-not-allowed disabled:opacity-50",
+							type: "button",
+							disabled: isBusy,
+							onClick: () => onSelect(image.url),
+							children: [/* @__PURE__ */ jsx("img", {
+								className: "aspect-square w-full object-cover",
+								src: image.url,
+								alt: image.name
+							}), /* @__PURE__ */ jsx("span", {
+								className: "block truncate p-2 text-xs text-slate-700",
+								children: image.name
+							})]
+						}, image.id))
+					})
+				] })
+			]
+		})
+	});
+}
+function ImageCropEditor({ pendingImage, aspectRatio, crop, isProcessing, labels, onChange, onApply, onBack }) {
+	const previewRef = useRef(null);
+	const drag = useRef(null);
+	const control = (key, value) => onChange({
+		...crop,
+		[key]: value
+	});
+	const clampedX = Math.max(-1, Math.min(1, crop.x));
+	const clampedY = Math.max(-1, Math.min(1, crop.y));
+	const clampedZoom = Math.max(1, crop.zoom);
+	const sourceAspect = pendingImage.dimensions.width / pendingImage.dimensions.height;
+	const baseWidth = sourceAspect > aspectRatio ? sourceAspect / aspectRatio * 100 : 100;
+	const baseHeight = sourceAspect > aspectRatio ? 100 : aspectRatio / sourceAspect * 100;
+	const width = baseWidth * clampedZoom;
+	const height = baseHeight * clampedZoom;
+	const left = -(width - 100) * ((clampedX + 1) / 2);
+	const top = -(height - 100) * ((clampedY + 1) / 2);
+	const moveCrop = (clientX, clientY) => {
+		const start = drag.current;
+		const bounds = previewRef.current?.getBoundingClientRect();
+		if (!start || !bounds) return;
+		const overflowX = bounds.width * ((width - 100) / 100);
+		const overflowY = bounds.height * ((height - 100) / 100);
+		const x = overflowX > 0 ? start.crop.x - 2 * (clientX - start.x) / overflowX : start.crop.x;
+		const y = overflowY > 0 ? start.crop.y - 2 * (clientY - start.y) / overflowY : start.crop.y;
+		onChange({
+			...crop,
+			x: Math.max(-1, Math.min(1, x)),
+			y: Math.max(-1, Math.min(1, y))
+		});
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "mt-5",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				ref: previewRef,
+				className: `relative mx-auto w-full max-w-xl touch-none overflow-hidden rounded-lg bg-slate-950 ${isProcessing ? "cursor-wait" : "cursor-grab active:cursor-grabbing"}`,
+				style: { aspectRatio },
+				onPointerDown: (event) => {
+					if (isProcessing) return;
+					drag.current = {
+						pointerId: event.pointerId,
+						x: event.clientX,
+						y: event.clientY,
+						crop
+					};
+					event.currentTarget.setPointerCapture(event.pointerId);
+				},
+				onPointerMove: (event) => {
+					if (drag.current?.pointerId === event.pointerId) moveCrop(event.clientX, event.clientY);
+				},
+				onPointerUp: (event) => {
+					if (drag.current?.pointerId !== event.pointerId) return;
+					drag.current = null;
+					event.currentTarget.releasePointerCapture(event.pointerId);
+				},
+				onPointerCancel: () => {
+					drag.current = null;
+				},
+				children: [/* @__PURE__ */ jsx("img", {
+					src: pendingImage.previewUrl,
+					alt: "",
+					className: "absolute max-w-none select-none",
+					draggable: false,
+					style: {
+						width: `${width}%`,
+						height: `${height}%`,
+						left: `${left}%`,
+						top: `${top}%`
+					}
+				}), /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 ring-1 ring-inset ring-white/70" })]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "mt-5 grid gap-4 sm:grid-cols-3",
+				children: [
+					/* @__PURE__ */ jsxs("label", {
+						className: "grid gap-1 text-xs font-medium text-slate-700",
+						children: [/* @__PURE__ */ jsx("span", { children: labels.zoom }), /* @__PURE__ */ jsx("input", {
+							"aria-label": labels.zoom,
+							type: "range",
+							min: "1",
+							max: "3",
+							step: "0.01",
+							value: crop.zoom,
+							disabled: isProcessing,
+							onChange: (event) => control("zoom", Number(event.target.value))
+						})]
+					}),
+					/* @__PURE__ */ jsxs("label", {
+						className: "grid gap-1 text-xs font-medium text-slate-700",
+						children: [/* @__PURE__ */ jsx("span", { children: labels.positionHorizontal }), /* @__PURE__ */ jsx("input", {
+							"aria-label": labels.positionHorizontal,
+							type: "range",
+							min: "-1",
+							max: "1",
+							step: "0.01",
+							value: crop.x,
+							disabled: isProcessing,
+							onChange: (event) => control("x", Number(event.target.value))
+						})]
+					}),
+					/* @__PURE__ */ jsxs("label", {
+						className: "grid gap-1 text-xs font-medium text-slate-700",
+						children: [/* @__PURE__ */ jsx("span", { children: labels.positionVertical }), /* @__PURE__ */ jsx("input", {
+							"aria-label": labels.positionVertical,
+							type: "range",
+							min: "-1",
+							max: "1",
+							step: "0.01",
+							value: crop.y,
+							disabled: isProcessing,
+							onChange: (event) => control("y", Number(event.target.value))
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "mt-5 flex justify-end gap-2",
+				children: [/* @__PURE__ */ jsx("button", {
+					className: "rounded-lg px-3 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-100 disabled:opacity-50",
+					type: "button",
+					disabled: isProcessing,
+					onClick: onBack,
+					children: labels.back
+				}), /* @__PURE__ */ jsx("button", {
+					className: "rounded-lg bg-blue-600 px-3 py-2 text-sm font-semibold text-white hover:bg-blue-500 disabled:opacity-50",
+					type: "button",
+					disabled: isProcessing,
+					onClick: () => void onApply(),
+					children: isProcessing ? labels.processing : labels.applyCrop
+				})]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/content/toolbar.tsx
+function ContentToolbar({ className, labels = {}, confirmCancel, confirmPublish }) {
+	const { canEdit, canPublish, isDirty, isEditing, isSaving, operation, error, message, cancel: cancelEditing, setEditing, save, publish } = useContent();
+	if (!canEdit) return null;
+	const edit = labels.edit ?? "Edit";
+	const saveLabel = labels.save ?? "Save draft";
+	const savingLabel = labels.saving ?? "Saving…";
+	const publishLabel = labels.publish ?? "Publish";
+	const publishingLabel = labels.publishing ?? "Publishing…";
+	const cancel = labels.cancel ?? "Cancel";
+	const toolbar = labels.toolbar ?? "Content editor";
+	const unsaved = labels.unsaved ?? "Unsaved changes";
+	const handlePublish = async () => {
+		if (confirmPublish && !await confirmPublish()) return;
+		await publish();
+	};
+	const handleCancel = async () => {
+		if (isDirty && confirmCancel && !await confirmCancel()) return;
+		cancelEditing();
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: `flex flex-wrap items-center gap-2 ${className ?? ""}`,
+		role: "toolbar",
+		"aria-label": toolbar,
+		"aria-busy": isSaving,
+		children: [
+			!isEditing ? /* @__PURE__ */ jsx("button", {
+				className: "rounded-lg bg-blue-600 px-3 py-2 text-sm font-medium text-white transition hover:bg-blue-500",
+				type: "button",
+				onClick: () => setEditing(true),
+				children: edit
+			}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx("button", {
+					className: "rounded-lg bg-blue-600 px-3 py-2 text-sm font-medium text-white transition hover:bg-blue-500 disabled:opacity-60",
+					type: "button",
+					disabled: isSaving || !isDirty,
+					onClick: () => void save(),
+					children: operation === "save" ? savingLabel : saveLabel
+				}),
+				canPublish && /* @__PURE__ */ jsx("button", {
+					className: "rounded-lg bg-emerald-600 px-3 py-2 text-sm font-medium text-white transition hover:bg-emerald-500 disabled:opacity-60",
+					type: "button",
+					disabled: isSaving,
+					onClick: () => void handlePublish(),
+					children: operation === "publish" ? publishingLabel : publishLabel
+				}),
+				/* @__PURE__ */ jsx("button", {
+					className: "rounded-lg px-3 py-2 text-sm font-medium text-slate-700 transition hover:bg-slate-100 disabled:opacity-60",
+					type: "button",
+					disabled: isSaving,
+					onClick: () => void handleCancel(),
+					children: cancel
+				})
+			] }),
+			error && /* @__PURE__ */ jsx("span", {
+				className: "w-full text-sm text-red-600 dark:text-red-400",
+				role: "alert",
+				children: error
+			}),
+			message && /* @__PURE__ */ jsx("span", {
+				className: "w-full text-sm text-emerald-700",
+				"aria-live": "polite",
+				children: message
+			}),
+			isEditing && isDirty && /* @__PURE__ */ jsx("span", {
+				className: "w-full text-xs text-slate-500",
+				"aria-live": "polite",
+				children: unsaved
+			})
+		]
+	});
+}
+//#endregion
+//#region src/content/content-editor.tsx
+function EditorPanel({ confirmCancel, confirmPublish, labels, title }) {
+	const { canEdit } = useContent();
+	if (!canEdit) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "fixed right-4 bottom-4 z-[1000] w-[min(24rem,calc(100vw-2rem))] rounded-xl border border-slate-200 bg-white p-3 text-slate-950 shadow-xl",
+		children: [/* @__PURE__ */ jsx("strong", {
+			className: "mb-2 block text-sm font-semibold",
+			children: title
+		}), /* @__PURE__ */ jsx(ContentToolbar, {
+			confirmCancel,
+			confirmPublish,
+			labels
+		})]
+	});
+}
+function ContentEditor({ children, confirmCancel, confirmPublish, labels, title = "Edit content", ...provider }) {
+	return /* @__PURE__ */ jsx(ContentProvider, {
+		...provider,
+		children: /* @__PURE__ */ jsxs("div", {
+			"data-content-editor": "true",
+			children: [/* @__PURE__ */ jsx(EditorPanel, {
+				confirmCancel,
+				confirmPublish,
+				labels,
+				title
+			}), children]
+		})
+	});
+}
+//#endregion
+//#region src/content/draft-store.ts
+const isDraft = (value) => {
+	if (!value || typeof value !== "object") return false;
+	const draft = value;
+	if (draft.contentId !== void 0 && typeof draft.contentId !== "string") return false;
+	return Boolean(draft.values && typeof draft.values === "object" && !Array.isArray(draft.values));
+};
+const createContentDraftStore = (storageKey, storage) => {
+	const resolvedStorage = () => {
+		if (storage) return storage;
+		if (typeof window === "undefined") return null;
+		try {
+			return window.sessionStorage;
+		} catch {
+			return null;
+		}
+	};
+	return {
+		get: () => {
+			try {
+				const serialized = resolvedStorage()?.getItem(storageKey);
+				if (!serialized) return null;
+				const value = JSON.parse(serialized);
+				if (!isDraft(value)) return null;
+				return {
+					contentId: value.contentId,
+					values: value.values
+				};
+			} catch {
+				return null;
+			}
+		},
+		set: (draft) => {
+			try {
+				const target = resolvedStorage();
+				if (!target) return false;
+				target.setItem(storageKey, JSON.stringify(draft));
+				return true;
+			} catch {
+				return false;
+			}
+		},
+		clear: () => {
+			try {
+				const target = resolvedStorage();
+				if (!target) return false;
+				target.removeItem(storageKey);
+				return true;
+			} catch {
+				return false;
+			}
+		}
+	};
+};
+//#endregion
+//#region src/content/return-url.ts
+const getContentSessionReturnUrl = (currentUrl) => {
+	const returnUrl = new URL(currentUrl);
+	returnUrl.searchParams.set("platform", "app");
+	return returnUrl.toString();
+};
+//#endregion
+//#region src/content/session-store.ts
+const createSessionTokenStore = (storageKey, storage) => {
+	const listeners = /* @__PURE__ */ new Set();
+	const resolvedStorage = () => {
+		if (storage) return storage;
+		if (typeof window === "undefined") return null;
+		try {
+			return window.localStorage;
+		} catch {
+			return null;
+		}
+	};
+	const emit = () => {
+		for (const listener of listeners) listener();
+	};
+	const onStorage = (event) => {
+		if (event.key === storageKey) emit();
+	};
+	return {
+		getSnapshot: () => {
+			try {
+				return resolvedStorage()?.getItem(storageKey) ?? null;
+			} catch {
+				return null;
+			}
+		},
+		getServerSnapshot: () => null,
+		subscribe: (listener) => {
+			listeners.add(listener);
+			if (typeof window !== "undefined") window.addEventListener("storage", onStorage);
+			return () => {
+				listeners.delete(listener);
+				if (listeners.size === 0 && typeof window !== "undefined") window.removeEventListener("storage", onStorage);
+			};
+		},
+		set: (token) => {
+			try {
+				const target = resolvedStorage();
+				if (!target) return false;
+				target.setItem(storageKey, token);
+				emit();
+				return true;
+			} catch {
+				return false;
+			}
+		},
+		clear: () => {
+			try {
+				const target = resolvedStorage();
+				if (!target) return false;
+				target.removeItem(storageKey);
+				emit();
+				return true;
+			} catch {
+				return false;
+			}
+		}
+	};
+};
+//#endregion
+//#region src/content/use-content-session.ts
+const useContentSession = ({ env = "mainnet", exchange, sessionStore, sessionStorageKey, team }) => {
+	const defaultStore = useMemo(() => createSessionTokenStore(sessionStorageKey), [sessionStorageKey]);
+	const store = sessionStore ?? defaultStore;
+	const storedToken = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getServerSnapshot);
+	const [handoffToken, setHandoffToken] = useState(null);
+	const [error, setError] = useState(null);
+	useEffect(() => {
+		const handoff = getAuthFragmentToken(window.location.href);
+		if (!handoff) return;
+		window.history.replaceState(null, "", `${window.location.pathname}${window.location.search}`);
+		const completeExchange = async () => {
+			const token = await (exchange ? exchange(handoff) : createClient({
+				env,
+				team
+			}).auth.exchangeNativeSession(handoff).then((response) => {
+				if (!response.ok || !response.data?.token) throw new Error("Session exchange failed.");
+				return response.data.token;
+			}));
+			if (!store.set(token)) throw new Error("Session storage is unavailable.");
+			setHandoffToken(token);
+		};
+		completeExchange().catch(() => setError("The session could not be established."));
+	}, [
+		env,
+		sessionStorageKey,
+		team
+	]);
+	return {
+		clear: useCallback(() => {
+			setHandoffToken(null);
+			store.clear();
+		}, [sessionStorageKey]),
+		error,
+		token: handoffToken ?? storedToken
+	};
+};
+//#endregion
+//#region src/content/managed-content-editor.tsx
+function ManagedContentEditor({ authErrorClassName, authErrorMessage = "The session could not be established.", children, config, confirmLeave, confirmCancel, confirmPublish, draftStore, imagePickerLabels, initialContent, labels, messages, reauthenticateLabel = "Sign in again", reauthenticateUrl, sessionStore, sessionExpiredMessage = "Your editing session expired. Sign in again to continue; your unsaved changes will be restored.", title = "Edit content" }) {
+	const { contentId, env = "mainnet", publicSlug, sessionStorageKey, team } = config;
+	const { error, token } = useContentSession({
+		env,
+		sessionStore,
+		sessionStorageKey,
+		team
+	});
+	const client = useMemo(() => createClient({
+		apiToken: token ?? void 0,
+		env,
+		team
+	}), [
+		env,
+		team,
+		token
+	]);
+	const defaultDraftStore = useMemo(() => createContentDraftStore(`${sessionStorageKey}:draft`), [sessionStorageKey]);
+	const [sessionExpired, setSessionExpired] = useState(false);
+	const [loginUrl, setLoginUrl] = useState(null);
+	useEffect(() => {
+		if (!token) return;
+		setSessionExpired(false);
+		const previous = client.http.onUnauthorized;
+		client.http.onUnauthorized = () => {
+			setSessionExpired(true);
+		};
+		return () => {
+			client.http.onUnauthorized = previous;
+		};
+	}, [token]);
+	useEffect(() => {
+		if (!sessionExpired || typeof window === "undefined") return;
+		const returnTo = getContentSessionReturnUrl(window.location.href);
+		setLoginUrl(typeof reauthenticateUrl === "function" ? reauthenticateUrl(returnTo) : reauthenticateUrl ?? getLoginUrl(env, returnTo, { team }));
+	}, [
+		env,
+		sessionExpired,
+		team
+	]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		error && /* @__PURE__ */ jsx("p", {
+			className: authErrorClassName ?? "fixed right-4 bottom-4 z-[1001] max-w-[min(24rem,calc(100vw-2rem))] rounded-xl border border-red-200 bg-white p-3 text-sm text-red-700 shadow-xl",
+			"data-content-auth-error": "true",
+			role: "alert",
+			children: authErrorMessage
+		}),
+		sessionExpired && /* @__PURE__ */ jsxs("div", {
+			className: authErrorClassName ?? "fixed right-4 bottom-4 z-[1002] max-w-[min(26rem,calc(100vw-2rem))] rounded-xl border border-amber-200 bg-white p-4 text-sm text-slate-800 shadow-xl",
+			"data-content-session-expired": "true",
+			role: "alert",
+			children: [/* @__PURE__ */ jsx("strong", {
+				className: "block font-semibold text-slate-950",
+				children: sessionExpiredMessage
+			}), loginUrl && /* @__PURE__ */ jsx("a", {
+				className: "mt-3 inline-flex rounded-lg bg-blue-600 px-3 py-2 font-semibold text-white transition hover:bg-blue-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2",
+				"data-content-navigation-allowed": true,
+				href: loginUrl,
+				children: reauthenticateLabel
+			})]
+		}),
+		/* @__PURE__ */ jsx(ContentEditor, {
+			client,
+			contentId: token ? contentId : void 0,
+			publicSlug: token ? void 0 : publicSlug,
+			initialContent: token ? void 0 : initialContent,
+			canEdit: Boolean(token),
+			canPublish: Boolean(token),
+			teamSlug: team,
+			confirmLeave,
+			confirmCancel,
+			confirmPublish,
+			draftStore: draftStore ?? defaultDraftStore,
+			imagePickerLabels,
+			labels,
+			messages: {
+				...messages,
+				sessionExpired: sessionExpiredMessage
+			},
+			onUnauthorized: () => {
+				setSessionExpired(true);
+			},
+			title,
+			children
+		})
+	] });
+}
+//#endregion
+export { ContentEditor, ContentProvider, ContentToolbar, EditableContent, EditableImage, EmbedChatInput, EmbedChatList, ManagedContentEditor, clearRoom, containedImageDimensions, createContentDraftStore, createSessionTokenStore, cropOutputDimensions, getContentSessionReturnUrl, getOrCreateGuestId, imageCropRectangle, loadRoom, openEventSourceStream, processImageFile, readImageDimensions, saveRoom, useContentSession, useContentValue, useEmbedChat, useUnsavedNavigation, validateImageDimensions, validateImageFile };