@thebes/cadmea 1.0.0 → 1.1.1

package/dist/index/index.d.ts

@@ -1,5 +1,6 @@
 import { JSX } from "solid-js";
-import { CollectionConfig } from "@thebes/cadmus/cms";
+import { CollectionConfig, EditRef } from "@thebes/cadmus/cms";
+import { ImageCrop, ImageHotspot } from "@thebes/cadmus/storage";
 
 //#region src/capabilities.d.ts
 /**
@@ -16,7 +17,45 @@ interface CollectionCapabilities {
   canDelete?: boolean;
 }
 //#endregion
+//#region src/ImageHotspotField.d.ts
+/**
+ * Image hotspot/crop editor widget (issue #17). A custom field widget for
+ * `upload` image fields: upload an image, then click it to set the focal
+ * point (hotspot) and optionally enter a crop region. Stores the value as a
+ * JSON string `{ url, hotspot?, crop? }` in the same column (back-compatible
+ * — a plain URL string still parses). Pair with `ImageService.render`'s
+ * `hotspot`/`crop` args on the read side (see @thebes/cadmus-cloudflare-images).
+ *
+ * Register it via `createCollectionEditPage`/`CollectionEdit`'s `fieldWidgets`
+ * option, keyed by the field name.
+ */
+interface ImageWithHotspot {
+  url: string;
+  hotspot?: ImageHotspot;
+  crop?: ImageCrop;
+}
+/**
+ * Parse an upload-field value into `{ url, hotspot?, crop? }`. Accepts the
+ * JSON object this widget writes, an already-parsed object, or a bare URL
+ * string (legacy / non-hotspot uploads). Returns null for empty values.
+ */
+declare function parseImageHotspotValue(value: unknown): ImageWithHotspot | null;
+/** Serialize an {@link ImageWithHotspot} for storage in an upload field. */
+declare function serializeImageHotspotValue(value: ImageWithHotspot): string;
+/** Props every `fieldWidgets` widget receives from CollectionEdit. */
+interface FieldWidgetProps {
+  fieldKey: string;
+  value: unknown;
+  setValue: (value: unknown) => void;
+  onUploadFile?: (file: File) => Promise<{
+    url: string;
+  }>;
+}
+declare function ImageHotspotField(props: FieldWidgetProps): import("solid-js").JSX.Element;
+//#endregion
 //#region src/CollectionEdit.d.ts
+/** A custom per-field editor, registered via `fieldWidgets`. */
+type FieldWidget = (props: FieldWidgetProps) => JSX.Element;
 interface RelationshipOption {
   id: number;
   label: string;
@@ -81,6 +120,13 @@ interface CollectionEditProps {
    * consuming route) since `CollectionEdit` has no router access itself.
    */
   onDirtyChange?: (dirty: boolean) => void;
+  /**
+   * Per-field custom editor widgets (issue #17), keyed by field name. When a
+   * field has a widget here, it's rendered instead of the generic input for
+   * that field's type — e.g. `{ heroImage: ImageHotspotField }`. The widget
+   * receives the field value, a setter, and `onUploadFile`.
+   */
+  fieldWidgets?: Record<string, FieldWidget>;
   /** Only rendered when `config.versions?.drafts` is also true. */
   draftActions?: DraftActions;
   /**
@@ -91,7 +137,7 @@ interface CollectionEditProps {
    */
   capabilities?: CollectionCapabilities;
 }
-declare function CollectionEdit(props: CollectionEditProps): import("solid-js").JSX.Element;
+declare function CollectionEdit(props: CollectionEditProps): JSX.Element;
 //#endregion
 //#region src/CollectionList.d.ts
 interface CollectionListProps {
@@ -143,5 +189,33 @@ interface SearchPaletteProps {
  */
 declare function SearchPalette(props: SearchPaletteProps): JSX.Element;
 //#endregion
-export { type CollectionCapabilities, CollectionEdit, type CollectionEditProps, CollectionList, type CollectionListProps, SearchPalette, type SearchPaletteProps, type SearchPaletteResult };
+//#region src/VisualEditingPane.d.ts
+/**
+ * Visual-editing preview pane (issue #15, studio side). Embeds the site's
+ * preview in an iframe and listens for the click-to-edit `postMessage` that
+ * `@thebes/cadmus/cms`'s `mountVisualEditing` posts from inside the preview.
+ * On a click, it calls `onEdit(ref)` so the studio can navigate to that
+ * field's editor (e.g. `/admin/<collection>/<id>`).
+ *
+ * The preview page must (a) tag editable regions with `editAttr(...)` and
+ * (b) call `mountVisualEditing()` client-side. This component is the parent
+ * half of that handshake.
+ */
+interface VisualEditingPaneProps {
+  /** URL of the preview route to embed. */
+  src: string;
+  /** Called when an editable region in the preview is clicked. */
+  onEdit?: (ref: EditRef) => void;
+  /**
+   * Origin the preview is served from — messages from any other origin are
+   * ignored (postMessage security). Defaults to `src`'s origin.
+   */
+  allowedOrigin?: string;
+  /** Class for the iframe (size it via the consumer's layout). */
+  class?: string;
+  title?: string;
+}
+declare function VisualEditingPane(props: VisualEditingPaneProps): import("solid-js").JSX.Element;
+//#endregion
+export { type CollectionCapabilities, CollectionEdit, type CollectionEditProps, CollectionList, type CollectionListProps, type FieldWidget, type FieldWidgetProps, ImageHotspotField, type ImageWithHotspot, SearchPalette, type SearchPaletteProps, type SearchPaletteResult, VisualEditingPane, type VisualEditingPaneProps, parseImageHotspotValue, serializeImageHotspotValue };
 //# sourceMappingURL=index.d.ts.map

package/dist/index/index.js

@@ -1,7 +1,8 @@
-import { className, createComponent, delegateEvents, effect, insert, memo, setAttribute, template, use } from "solid-js/web";
-import { For, Show, Suspense, createEffect, createSignal, lazy, onCleanup } from "solid-js";
+import { className, createComponent, delegateEvents, effect, insert, memo, setAttribute, setStyleProperty, template, use } from "solid-js/web";
+import { For, Show, Suspense, createEffect, createMemo, createSignal, lazy, onCleanup, onMount } from "solid-js";
+import { VISUAL_EDIT_MESSAGE } from "@thebes/cadmus/cms";
 //#region src/CollectionEdit.tsx
-var _tmpl$$2 = /*#__PURE__*/ template(`<p class="text-sm text-error"role=alert>`), _tmpl$2$2 = /*#__PURE__*/ template(`<span class="loading loading-spinner loading-sm">`), _tmpl$3$2 = /*#__PURE__*/ template(`<button type=button class="btn flex-1">`), _tmpl$4$2 = /*#__PURE__*/ template(`<button type=button class="btn btn-primary flex-1">`), _tmpl$5$1 = /*#__PURE__*/ template(`<button type=button class="btn btn-outline flex-1">`), _tmpl$6$1 = /*#__PURE__*/ template(`<form class="flex flex-col gap-4"><div class="bg-base-100 sticky bottom-0 flex gap-2 border-t py-3">`), _tmpl$7$1 = /*#__PURE__*/ template(`<span class=text-error> *`), _tmpl$8$1 = /*#__PURE__*/ template(`<div class=form-control><label class=label>`), _tmpl$9$1 = /*#__PURE__*/ template(`<button type=submit class="btn btn-primary flex-1">`), _tmpl$0$1 = /*#__PURE__*/ template(`<input class=input type=text>`), _tmpl$1$1 = /*#__PURE__*/ template(`<select class=select>`), _tmpl$10$1 = /*#__PURE__*/ template(`<option>`), _tmpl$11$1 = /*#__PURE__*/ template(`<input class=input type=number>`), _tmpl$12$1 = /*#__PURE__*/ template(`<input class=input type=text readonly>`), _tmpl$13$1 = /*#__PURE__*/ template(`<input class=checkbox type=checkbox>`), _tmpl$14 = /*#__PURE__*/ template(`<p class="text-sm opacity-70 break-all">`), _tmpl$15 = /*#__PURE__*/ template(`<p class="text-sm text-error">`), _tmpl$16 = /*#__PURE__*/ template(`<div class="flex flex-col gap-2"><input class=file-input type=file>`), _tmpl$17 = /*#__PURE__*/ template(`<select class=select><option value>—`), _tmpl$18 = /*#__PURE__*/ template(`<div class="flex flex-col gap-3"><button type=button class="btn btn-outline btn-sm self-start">Add `), _tmpl$19 = /*#__PURE__*/ template(`<div class="card bg-base-200 flex flex-col gap-2 p-3"><button type=button class="btn btn-error btn-outline btn-sm self-start">Remove`);
+var _tmpl$$4 = /*#__PURE__*/ template(`<p class="text-sm text-error"role=alert>`), _tmpl$2$3 = /*#__PURE__*/ template(`<span class="loading loading-spinner loading-sm">`), _tmpl$3$3 = /*#__PURE__*/ template(`<button type=button class="btn flex-1">`), _tmpl$4$3 = /*#__PURE__*/ template(`<button type=button class="btn btn-primary flex-1">`), _tmpl$5$2 = /*#__PURE__*/ template(`<button type=button class="btn btn-outline flex-1">`), _tmpl$6$2 = /*#__PURE__*/ template(`<form class="flex flex-col gap-4"><div class="bg-base-100 sticky bottom-0 flex gap-2 border-t py-3">`), _tmpl$7$1 = /*#__PURE__*/ template(`<span class=text-error> *`), _tmpl$8$1 = /*#__PURE__*/ template(`<div class=form-control><label class=label>`), _tmpl$9$1 = /*#__PURE__*/ template(`<button type=submit class="btn btn-primary flex-1">`), _tmpl$0$1 = /*#__PURE__*/ template(`<input class=input type=text>`), _tmpl$1$1 = /*#__PURE__*/ template(`<select class=select>`), _tmpl$10$1 = /*#__PURE__*/ template(`<option>`), _tmpl$11$1 = /*#__PURE__*/ template(`<input class=input type=number>`), _tmpl$12$1 = /*#__PURE__*/ template(`<input class=input type=text readonly>`), _tmpl$13$1 = /*#__PURE__*/ template(`<input class=checkbox type=checkbox>`), _tmpl$14 = /*#__PURE__*/ template(`<p class="text-sm opacity-70 break-all">`), _tmpl$15 = /*#__PURE__*/ template(`<p class="text-sm text-error">`), _tmpl$16 = /*#__PURE__*/ template(`<div class="flex flex-col gap-2"><input class=file-input type=file>`), _tmpl$17 = /*#__PURE__*/ template(`<select class=select><option value>—`), _tmpl$18 = /*#__PURE__*/ template(`<div class="flex flex-col gap-3"><button type=button class="btn btn-outline btn-sm self-start">Add `), _tmpl$19 = /*#__PURE__*/ template(`<div class="card bg-base-200 flex flex-col gap-2 p-3"><button type=button class="btn btn-error btn-outline btn-sm self-start">Remove`);
 const RichTextEditor = lazy(() => import("../RichTextEditor-BPilh7Pw.js").then((mod) => ({ default: mod.RichTextEditor })));
 function editableFields(config) {
 	return Object.entries(config.fields).filter(([key]) => key !== "id");
@@ -27,18 +28,19 @@ function CollectionEdit(props) {
 	}
 	const ctx = {
 		onUploadFile: props.onUploadFile,
-		relationshipOptions: props.relationshipOptions
+		relationshipOptions: props.relationshipOptions,
+		fieldWidgets: props.fieldWidgets
 	};
 	const versioned = () => props.config.versions?.drafts && props.draftActions;
 	return (() => {
-		var _el$ = _tmpl$6$1(), _el$3 = _el$.firstChild;
+		var _el$ = _tmpl$6$2(), _el$3 = _el$.firstChild;
 		_el$.addEventListener("submit", handleSubmit);
 		insert(_el$, createComponent(Show, {
 			get when() {
 				return props.error;
 			},
 			get children() {
-				var _el$2 = _tmpl$$2();
+				var _el$2 = _tmpl$$4();
 				insert(_el$2, () => props.error);
 				return _el$2;
 			}
@@ -82,7 +84,7 @@ function CollectionEdit(props) {
 								return props.submitLabel ?? "Save";
 							},
 							get children() {
-								return _tmpl$2$2();
+								return _tmpl$2$3();
 							}
 						}));
 						effect(() => _el$11.disabled = props.saving);
@@ -93,7 +95,7 @@ function CollectionEdit(props) {
 			get children() {
 				return [
 					(() => {
-						var _el$4 = _tmpl$3$2();
+						var _el$4 = _tmpl$3$3();
 						_el$4.$$click = () => void props.draftActions?.onSaveDraft(editablePayload());
 						insert(_el$4, createComponent(Show, {
 							get when() {
@@ -103,14 +105,14 @@ function CollectionEdit(props) {
 								return props.draftActions?.saveDraftLabel ?? "Save draft";
 							},
 							get children() {
-								return _tmpl$2$2();
+								return _tmpl$2$3();
 							}
 						}));
 						effect(() => _el$4.disabled = props.draftActions?.saving);
 						return _el$4;
 					})(),
 					(() => {
-						var _el$6 = _tmpl$4$2();
+						var _el$6 = _tmpl$4$3();
 						_el$6.$$click = () => void props.draftActions?.onPublish?.();
 						insert(_el$6, createComponent(Show, {
 							get when() {
@@ -120,7 +122,7 @@ function CollectionEdit(props) {
 								return props.draftActions?.publishLabel ?? "Publish";
 							},
 							get children() {
-								return _tmpl$2$2();
+								return _tmpl$2$3();
 							}
 						}));
 						effect(() => _el$6.disabled = !props.draftActions?.canPublish || props.draftActions?.publishing);
@@ -131,7 +133,7 @@ function CollectionEdit(props) {
 							return props.draftActions?.onPreview;
 						},
 						get children() {
-							var _el$8 = _tmpl$5$1();
+							var _el$8 = _tmpl$5$2();
 							_el$8.$$click = () => void props.draftActions?.onPreview?.();
 							insert(_el$8, createComponent(Show, {
 								get when() {
@@ -141,7 +143,7 @@ function CollectionEdit(props) {
 									return props.draftActions?.previewLabel ?? "Preview";
 								},
 								get children() {
-									return _tmpl$2$2();
+									return _tmpl$2$3();
 								}
 							}));
 							effect(() => _el$8.disabled = !props.draftActions?.canPreview || props.draftActions?.previewing);
@@ -155,6 +157,15 @@ function CollectionEdit(props) {
 	})();
 }
 function renderInput(key, field, value, setField, ctx) {
+	const Widget = ctx.fieldWidgets?.[key] ?? ctx.fieldWidgets?.[key.slice(key.lastIndexOf(".") + 1)];
+	if (Widget) return createComponent(Widget, {
+		fieldKey: key,
+		value,
+		setValue: (v) => setField(key, v),
+		get onUploadFile() {
+			return ctx.onUploadFile;
+		}
+	});
 	switch (field.type) {
 		case "text": return (() => {
 			var _el$13 = _tmpl$0$1();
@@ -209,7 +220,7 @@ function renderInput(key, field, value, setField, ctx) {
 		case "array": return renderArrayInput(key, field, value, setField, ctx);
 		case "richText": return createComponent(Suspense, {
 			get fallback() {
-				return _tmpl$2$2();
+				return _tmpl$2$3();
 			},
 			get children() {
 				return createComponent(RichTextEditor, {
@@ -260,7 +271,7 @@ function renderUploadInput(key, field, value, setField, ctx) {
 				return uploading();
 			},
 			get children() {
-				return _tmpl$2$2();
+				return _tmpl$2$3();
 			}
 		}), null);
 		insert(_el$20, createComponent(Show, {
@@ -380,7 +391,7 @@ function formatDateValue(value) {
 delegateEvents(["click", "input"]);
 //#endregion
 //#region src/CollectionList.tsx
-var _tmpl$$1 = /*#__PURE__*/ template(`<button type=button class="btn btn-outline btn-sm">`), _tmpl$2$1 = /*#__PURE__*/ template(`<div class=join><select aria-label="Sort by"class="select select-sm join-item"></select><select aria-label="Sort direction"class="select select-sm join-item"><option value=asc>Ascending</option><option value=desc>Descending`), _tmpl$3$1 = /*#__PURE__*/ template(`<th>`), _tmpl$4$1 = /*#__PURE__*/ template(`<table class="table hidden md:table"><thead><tr></tr></thead><tbody>`), _tmpl$5 = /*#__PURE__*/ template(`<div class="flex flex-col gap-2 md:hidden">`), _tmpl$6 = /*#__PURE__*/ template(`<div class="bg-base-100 sticky bottom-0 flex items-center justify-between gap-2 border-t py-2"><button type=button class="btn btn-sm">Prev</button><span class="text-sm opacity-70">Page </span><button type=button class="btn btn-sm">Next`), _tmpl$7 = /*#__PURE__*/ template(`<div class="flex flex-col gap-3"><div class="flex flex-wrap items-center justify-between gap-2">`), _tmpl$8 = /*#__PURE__*/ template(`<option>`), _tmpl$9 = /*#__PURE__*/ template(`<p class="text-sm opacity-70">No <!> yet.`), _tmpl$0 = /*#__PURE__*/ template(`<td><input type=checkbox class="checkbox checkbox-sm">`), _tmpl$1 = /*#__PURE__*/ template(`<tr>`), _tmpl$10 = /*#__PURE__*/ template(`<td>`), _tmpl$11 = /*#__PURE__*/ template(`<input type=checkbox class="checkbox checkbox-sm mt-1">`), _tmpl$12 = /*#__PURE__*/ template(`<div class="card bg-base-200 cursor-pointer p-3"role=button tabindex=0><div class="flex items-start gap-3"><div class="flex flex-1 flex-col gap-1">`), _tmpl$13 = /*#__PURE__*/ template(`<div class="flex justify-between gap-2 text-sm"><span class=opacity-60></span><span class=text-right>`);
+var _tmpl$$3 = /*#__PURE__*/ template(`<button type=button class="btn btn-outline btn-sm">`), _tmpl$2$2 = /*#__PURE__*/ template(`<div class=join><select aria-label="Sort by"class="select select-sm join-item"></select><select aria-label="Sort direction"class="select select-sm join-item"><option value=asc>Ascending</option><option value=desc>Descending`), _tmpl$3$2 = /*#__PURE__*/ template(`<th>`), _tmpl$4$2 = /*#__PURE__*/ template(`<table class="table hidden md:table"><thead><tr></tr></thead><tbody>`), _tmpl$5$1 = /*#__PURE__*/ template(`<div class="flex flex-col gap-2 md:hidden">`), _tmpl$6$1 = /*#__PURE__*/ template(`<div class="bg-base-100 sticky bottom-0 flex items-center justify-between gap-2 border-t py-2"><button type=button class="btn btn-sm">Prev</button><span class="text-sm opacity-70">Page </span><button type=button class="btn btn-sm">Next`), _tmpl$7 = /*#__PURE__*/ template(`<div class="flex flex-col gap-3"><div class="flex flex-wrap items-center justify-between gap-2">`), _tmpl$8 = /*#__PURE__*/ template(`<option>`), _tmpl$9 = /*#__PURE__*/ template(`<p class="text-sm opacity-70">No <!> yet.`), _tmpl$0 = /*#__PURE__*/ template(`<td><input type=checkbox class="checkbox checkbox-sm">`), _tmpl$1 = /*#__PURE__*/ template(`<tr>`), _tmpl$10 = /*#__PURE__*/ template(`<td>`), _tmpl$11 = /*#__PURE__*/ template(`<input type=checkbox class="checkbox checkbox-sm mt-1">`), _tmpl$12 = /*#__PURE__*/ template(`<div class="card bg-base-200 cursor-pointer p-3"role=button tabindex=0><div class="flex items-start gap-3"><div class="flex flex-1 flex-col gap-1">`), _tmpl$13 = /*#__PURE__*/ template(`<div class="flex justify-between gap-2 text-sm"><span class=opacity-60></span><span class=text-right>`);
 function listableFields(config) {
 	const excluded = new Set([
 		"richText",
@@ -421,7 +432,7 @@ function CollectionList(props) {
 				return props.selectable;
 			},
 			get children() {
-				var _el$3 = _tmpl$$1();
+				var _el$3 = _tmpl$$3();
 				_el$3.$$click = () => setSelectMode((v) => !v);
 				insert(_el$3, () => selectMode() ? "Done" : "Select");
 				return _el$3;
@@ -432,7 +443,7 @@ function CollectionList(props) {
 				return props.onSortChange;
 			},
 			get children() {
-				var _el$4 = _tmpl$2$1(), _el$5 = _el$4.firstChild, _el$6 = _el$5.nextSibling;
+				var _el$4 = _tmpl$2$2(), _el$5 = _el$4.firstChild, _el$6 = _el$5.nextSibling;
 				_el$5.addEventListener("change", (e) => props.onSortChange?.(e.currentTarget.value, props.sortDirection ?? "asc"));
 				insert(_el$5, createComponent(For, {
 					get each() {
@@ -465,13 +476,13 @@ function CollectionList(props) {
 			},
 			get children() {
 				return [(() => {
-					var _el$7 = _tmpl$4$1(), _el$8 = _el$7.firstChild, _el$9 = _el$8.firstChild, _el$1 = _el$8.nextSibling;
+					var _el$7 = _tmpl$4$2(), _el$8 = _el$7.firstChild, _el$9 = _el$8.firstChild, _el$1 = _el$8.nextSibling;
 					insert(_el$9, createComponent(Show, {
 						get when() {
 							return selectMode();
 						},
 						get children() {
-							return _tmpl$3$1();
+							return _tmpl$3$2();
 						}
 					}), null);
 					insert(_el$9, createComponent(For, {
@@ -479,7 +490,7 @@ function CollectionList(props) {
 							return columns();
 						},
 						children: ([key]) => (() => {
-							var _el$21 = _tmpl$3$1();
+							var _el$21 = _tmpl$3$2();
 							insert(_el$21, key);
 							return _el$21;
 						})()
@@ -522,7 +533,7 @@ function CollectionList(props) {
 					}));
 					return _el$7;
 				})(), (() => {
-					var _el$10 = _tmpl$5();
+					var _el$10 = _tmpl$5$1();
 					insert(_el$10, createComponent(For, {
 						get each() {
 							return props.rows;
@@ -574,7 +585,7 @@ function CollectionList(props) {
 				return memo(() => props.page !== void 0)() && props.pageSize !== void 0;
 			},
 			get children() {
-				var _el$11 = _tmpl$6(), _el$12 = _el$11.firstChild, _el$13 = _el$12.nextSibling;
+				var _el$11 = _tmpl$6$1(), _el$12 = _el$11.firstChild, _el$13 = _el$12.nextSibling;
 				_el$13.firstChild;
 				var _el$15 = _el$13.nextSibling;
 				_el$12.$$click = () => props.onPageChange?.((props.page ?? 1) - 1);
@@ -597,8 +608,160 @@ function CollectionList(props) {
 }
 delegateEvents(["click", "keydown"]);
 //#endregion
+//#region src/ImageHotspotField.tsx
+var _tmpl$$2 = /*#__PURE__*/ template(`<span class="loading loading-spinner loading-sm">`), _tmpl$2$1 = /*#__PURE__*/ template(`<p class="text-sm text-error">`), _tmpl$3$1 = /*#__PURE__*/ template(`<div class="flex flex-col gap-3"><input class=file-input type=file accept=image/*>`), _tmpl$4$1 = /*#__PURE__*/ template(`<div class="flex flex-col gap-2"><p class="text-xs opacity-60">Click the image to set the focal point.</p><div class="relative inline-block max-w-md"><img alt="Set focal point"class="block w-full cursor-crosshair rounded"></div><details class=text-sm><summary class="cursor-pointer opacity-70">Crop (advanced)</summary><div class="mt-2 grid grid-cols-4 gap-2"></div></details><p class="break-all text-xs opacity-50">`), _tmpl$5 = /*#__PURE__*/ template(`<span class="pointer-events-none absolute h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white bg-[var(--accent,#56c6be)] shadow">`), _tmpl$6 = /*#__PURE__*/ template(`<label class="flex flex-col gap-1 text-xs"><span class="capitalize opacity-70"></span><input class="input input-sm"type=number min=0 max=1 step=0.05>`);
+const round2 = (n) => Math.round(n * 100) / 100;
+const clamp01 = (n) => Math.min(1, Math.max(0, n));
+/**
+* Parse an upload-field value into `{ url, hotspot?, crop? }`. Accepts the
+* JSON object this widget writes, an already-parsed object, or a bare URL
+* string (legacy / non-hotspot uploads). Returns null for empty values.
+*/
+function parseImageHotspotValue(value) {
+	if (!value) return null;
+	if (typeof value === "object") return value;
+	if (typeof value === "string") {
+		const trimmed = value.trim();
+		if (trimmed.startsWith("{")) try {
+			return JSON.parse(trimmed);
+		} catch {}
+		return trimmed ? { url: trimmed } : null;
+	}
+	return null;
+}
+/** Serialize an {@link ImageWithHotspot} for storage in an upload field. */
+function serializeImageHotspotValue(value) {
+	return JSON.stringify(value);
+}
+function ImageHotspotField(props) {
+	const parsed = createMemo(() => parseImageHotspotValue(props.value));
+	const [uploading, setUploading] = createSignal(false);
+	const [error, setError] = createSignal();
+	const patch = (next) => {
+		const current = parsed() ?? { url: "" };
+		props.setValue(serializeImageHotspotValue({
+			...current,
+			...next
+		}));
+	};
+	async function handleFile(e) {
+		const file = e.currentTarget.files?.[0];
+		if (!file) return;
+		if (!props.onUploadFile) {
+			setError("No upload handler configured for this form.");
+			return;
+		}
+		setUploading(true);
+		setError(void 0);
+		try {
+			const { url } = await props.onUploadFile(file);
+			patch({ url });
+		} catch (err) {
+			setError(err instanceof Error ? err.message : "Upload failed");
+		} finally {
+			setUploading(false);
+		}
+	}
+	function handleImageClick(e) {
+		const rect = e.currentTarget.getBoundingClientRect();
+		const x = clamp01((e.clientX - rect.left) / rect.width);
+		const y = clamp01((e.clientY - rect.top) / rect.height);
+		patch({ hotspot: {
+			x: round2(x),
+			y: round2(y)
+		} });
+	}
+	const crop = () => parsed()?.crop ?? {
+		top: 0,
+		right: 0,
+		bottom: 0,
+		left: 0
+	};
+	const setCrop = (edge, raw) => {
+		patch({ crop: {
+			...crop(),
+			[edge]: clamp01(Number(raw) || 0)
+		} });
+	};
+	return (() => {
+		var _el$ = _tmpl$3$1(), _el$2 = _el$.firstChild;
+		_el$2.addEventListener("change", handleFile);
+		insert(_el$, createComponent(Show, {
+			get when() {
+				return uploading();
+			},
+			get children() {
+				return _tmpl$$2();
+			}
+		}), null);
+		insert(_el$, createComponent(Show, {
+			get when() {
+				return error();
+			},
+			get children() {
+				var _el$4 = _tmpl$2$1();
+				insert(_el$4, error);
+				return _el$4;
+			}
+		}), null);
+		insert(_el$, createComponent(Show, {
+			get when() {
+				return parsed()?.url;
+			},
+			children: (url) => (() => {
+				var _el$5 = _tmpl$4$1(), _el$7 = _el$5.firstChild.nextSibling, _el$8 = _el$7.firstChild, _el$9 = _el$7.nextSibling, _el$1 = _el$9.firstChild.nextSibling, _el$10 = _el$9.nextSibling;
+				_el$8.$$click = handleImageClick;
+				insert(_el$7, createComponent(Show, {
+					get when() {
+						return parsed()?.hotspot;
+					},
+					children: (hs) => (() => {
+						var _el$11 = _tmpl$5();
+						effect((_p$) => {
+							var _v$3 = `${hs().x * 100}%`, _v$4 = `${hs().y * 100}%`;
+							_v$3 !== _p$.e && setStyleProperty(_el$11, "left", _p$.e = _v$3);
+							_v$4 !== _p$.t && setStyleProperty(_el$11, "top", _p$.t = _v$4);
+							return _p$;
+						}, {
+							e: void 0,
+							t: void 0
+						});
+						return _el$11;
+					})()
+				}), null);
+				insert(_el$1, () => [
+					"top",
+					"right",
+					"bottom",
+					"left"
+				].map((edge) => (() => {
+					var _el$12 = _tmpl$6(), _el$13 = _el$12.firstChild, _el$14 = _el$13.nextSibling;
+					insert(_el$13, edge);
+					_el$14.$$input = (e) => setCrop(edge, e.currentTarget.value);
+					effect(() => _el$14.value = crop()[edge]);
+					return _el$12;
+				})()));
+				insert(_el$10, url);
+				effect(() => setAttribute(_el$8, "src", url()));
+				return _el$5;
+			})()
+		}), null);
+		effect((_p$) => {
+			var _v$ = props.fieldKey, _v$2 = uploading();
+			_v$ !== _p$.e && setAttribute(_el$2, "id", _p$.e = _v$);
+			_v$2 !== _p$.t && (_el$2.disabled = _p$.t = _v$2);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0
+		});
+		return _el$;
+	})();
+}
+delegateEvents(["click", "input"]);
+//#endregion
 //#region src/SearchPalette.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<ul class="max-h-80 overflow-y-auto py-2">`), _tmpl$2 = /*#__PURE__*/ template(`<div aria-hidden=true class="fixed inset-0 z-50 flex items-start justify-center bg-[var(--color-backdrop)] px-4 pt-[15vh]"><div role=dialog aria-modal=true aria-label=Search class="w-full max-w-lg overflow-hidden rounded-2xl border border-[var(--line)] bg-[var(--surface-strong)] shadow-2xl"><div class="flex items-center gap-2 border-b border-[var(--line)] px-4 py-3"><i class="ph ph-magnifying-glass text-lg text-[var(--sea-ink-soft)]"aria-hidden=true></i><input type=text placeholder=Search… aria-label=Search class="flex-1 bg-transparent text-base text-[var(--sea-ink)] outline-none placeholder:text-[var(--sea-ink-soft)]"><kbd class="rounded border border-[var(--chip-line)] bg-[var(--chip-bg)] px-1.5 py-0.5 text-xs text-[var(--sea-ink-soft)]">Esc`), _tmpl$3 = /*#__PURE__*/ template(`<p class="px-4 py-6 text-center text-sm text-[var(--sea-ink-soft)]">`), _tmpl$4 = /*#__PURE__*/ template(`<li><button type=button class="flex w-full items-center justify-between gap-3 px-4 py-2 text-left text-sm text-[var(--sea-ink)] hover:bg-[var(--link-bg-hover)]"><span class=truncate></span><span class="shrink-0 text-xs text-[var(--sea-ink-soft)]">`);
+var _tmpl$$1 = /*#__PURE__*/ template(`<ul class="max-h-80 overflow-y-auto py-2">`), _tmpl$2 = /*#__PURE__*/ template(`<div aria-hidden=true class="fixed inset-0 z-50 flex items-start justify-center bg-[var(--color-backdrop)] px-4 pt-[15vh]"><div role=dialog aria-modal=true aria-label=Search class="w-full max-w-lg overflow-hidden rounded-2xl border border-[var(--line)] bg-[var(--surface-strong)] shadow-2xl"><div class="flex items-center gap-2 border-b border-[var(--line)] px-4 py-3"><i class="ph ph-magnifying-glass text-lg text-[var(--sea-ink-soft)]"aria-hidden=true></i><input type=text placeholder=Search… aria-label=Search class="flex-1 bg-transparent text-base text-[var(--sea-ink)] outline-none placeholder:text-[var(--sea-ink-soft)]"><kbd class="rounded border border-[var(--chip-line)] bg-[var(--chip-bg)] px-1.5 py-0.5 text-xs text-[var(--sea-ink-soft)]">Esc`), _tmpl$3 = /*#__PURE__*/ template(`<p class="px-4 py-6 text-center text-sm text-[var(--sea-ink-soft)]">`), _tmpl$4 = /*#__PURE__*/ template(`<li><button type=button class="flex w-full items-center justify-between gap-3 px-4 py-2 text-left text-sm text-[var(--sea-ink)] hover:bg-[var(--link-bg-hover)]"><span class=truncate></span><span class="shrink-0 text-xs text-[var(--sea-ink-soft)]">`);
 const DEBOUNCE_MS = 200;
 function capitalize(value) {
 	return value.length === 0 ? value : value[0].toUpperCase() + value.slice(1);
@@ -706,7 +869,7 @@ function SearchPalette(props) {
 					})();
 				},
 				get children() {
-					var _el$6 = _tmpl$();
+					var _el$6 = _tmpl$$1();
 					insert(_el$6, createComponent(For, {
 						get each() {
 							return results();
@@ -735,6 +898,43 @@ delegateEvents([
 	"input"
 ]);
 //#endregion
-export { CollectionEdit, CollectionList, SearchPalette };
+//#region src/VisualEditingPane.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<iframe>`);
+function originOf(url) {
+	try {
+		return new URL(url).origin;
+	} catch {
+		return;
+	}
+}
+function VisualEditingPane(props) {
+	onMount(() => {
+		const expected = props.allowedOrigin ?? originOf(props.src);
+		const handler = (event) => {
+			if (expected && event.origin !== expected) return;
+			const data = event.data;
+			if (data?.type === VISUAL_EDIT_MESSAGE && data.ref) props.onEdit?.(data.ref);
+		};
+		window.addEventListener("message", handler);
+		onCleanup(() => window.removeEventListener("message", handler));
+	});
+	return (() => {
+		var _el$ = _tmpl$();
+		effect((_p$) => {
+			var _v$ = props.src, _v$2 = props.title ?? "Preview", _v$3 = props.class ?? "h-full w-full border-0";
+			_v$ !== _p$.e && setAttribute(_el$, "src", _p$.e = _v$);
+			_v$2 !== _p$.t && setAttribute(_el$, "title", _p$.t = _v$2);
+			_v$3 !== _p$.a && className(_el$, _p$.a = _v$3);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0
+		});
+		return _el$;
+	})();
+}
+//#endregion
+export { CollectionEdit, CollectionList, ImageHotspotField, SearchPalette, VisualEditingPane, parseImageHotspotValue, serializeImageHotspotValue };
 
 //# sourceMappingURL=index.js.map