@thebes/cadmea 1.0.0 → 1.1.0

package/dist/index/server.js

@@ -1,19 +1,20 @@
-import { createComponent, escape, ssr, ssrAttribute } from "solid-js/web";
-import { For, Show, Suspense, createEffect, createSignal, lazy, onCleanup } from "solid-js";
+import { createComponent, escape, ssr, ssrAttribute, ssrStyleProperty } 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 = ["<p class=\"text-sm text-error\" role=\"alert\">", "</p>"], _tmpl$2$2 = "<span class=\"loading loading-spinner loading-sm\"></span>", _tmpl$3$2 = [
+var _tmpl$$4 = ["<p class=\"text-sm text-error\" role=\"alert\">", "</p>"], _tmpl$2$3 = "<span class=\"loading loading-spinner loading-sm\"></span>", _tmpl$3$3 = [
 	"<button type=\"button\" class=\"btn flex-1\"",
 	">",
 	"</button>"
-], _tmpl$4$2 = [
+], _tmpl$4$3 = [
 	"<button type=\"button\" class=\"btn btn-primary flex-1\"",
 	">",
 	"</button>"
-], _tmpl$5$1 = [
+], _tmpl$5$2 = [
 	"<button type=\"button\" class=\"btn btn-outline flex-1\"",
 	">",
 	"</button>"
-], _tmpl$6$1 = [
+], _tmpl$6$2 = [
 	"<form class=\"flex flex-col gap-4\">",
 	"",
 	"<div class=\"bg-base-100 sticky bottom-0 flex gap-2 border-t py-3\">",
@@ -93,15 +94,16 @@ 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 ssr(_tmpl$6$1, escape(createComponent(Show, {
+	return ssr(_tmpl$6$2, escape(createComponent(Show, {
 		get when() {
 			return props.error;
 		},
 		get children() {
-			return ssr(_tmpl$$2, escape(props.error));
+			return ssr(_tmpl$$4, escape(props.error));
 		}
 	})), escape(createComponent(For, {
 		get each() {
@@ -133,7 +135,7 @@ function CollectionEdit(props) {
 							return props.submitLabel ?? "Save";
 						},
 						get children() {
-							return ssr(_tmpl$2$2);
+							return ssr(_tmpl$2$3);
 						}
 					})));
 				}
@@ -141,7 +143,7 @@ function CollectionEdit(props) {
 		},
 		get children() {
 			return [
-				ssr(_tmpl$3$2, ssrAttribute("disabled", props.draftActions?.saving, true), escape(createComponent(Show, {
+				ssr(_tmpl$3$3, ssrAttribute("disabled", props.draftActions?.saving, true), escape(createComponent(Show, {
 					get when() {
 						return props.draftActions?.saving;
 					},
@@ -149,10 +151,10 @@ function CollectionEdit(props) {
 						return props.draftActions?.saveDraftLabel ?? "Save draft";
 					},
 					get children() {
-						return ssr(_tmpl$2$2);
+						return ssr(_tmpl$2$3);
 					}
 				}))),
-				ssr(_tmpl$4$2, ssrAttribute("disabled", !props.draftActions?.canPublish || props.draftActions?.publishing, true), escape(createComponent(Show, {
+				ssr(_tmpl$4$3, ssrAttribute("disabled", !props.draftActions?.canPublish || props.draftActions?.publishing, true), escape(createComponent(Show, {
 					get when() {
 						return props.draftActions?.publishing;
 					},
@@ -160,7 +162,7 @@ function CollectionEdit(props) {
 						return props.draftActions?.publishLabel ?? "Publish";
 					},
 					get children() {
-						return ssr(_tmpl$2$2);
+						return ssr(_tmpl$2$3);
 					}
 				}))),
 				createComponent(Show, {
@@ -168,7 +170,7 @@ function CollectionEdit(props) {
 						return props.draftActions?.onPreview;
 					},
 					get children() {
-						return ssr(_tmpl$5$1, ssrAttribute("disabled", !props.draftActions?.canPreview || props.draftActions?.previewing, true), escape(createComponent(Show, {
+						return ssr(_tmpl$5$2, ssrAttribute("disabled", !props.draftActions?.canPreview || props.draftActions?.previewing, true), escape(createComponent(Show, {
 							get when() {
 								return props.draftActions?.previewing;
 							},
@@ -176,7 +178,7 @@ function CollectionEdit(props) {
 								return props.draftActions?.previewLabel ?? "Preview";
 							},
 							get children() {
-								return ssr(_tmpl$2$2);
+								return ssr(_tmpl$2$3);
 							}
 						})));
 					}
@@ -186,6 +188,15 @@ function CollectionEdit(props) {
 	})));
 }
 function renderInput(key, field, value, setField, ctx) {
+	const Widget = ctx.fieldWidgets?.[key];
+	if (Widget) return createComponent(Widget, {
+		fieldKey: key,
+		value,
+		setValue: (v) => setField(key, v),
+		get onUploadFile() {
+			return ctx.onUploadFile;
+		}
+	});
 	switch (field.type) {
 		case "text": return ssr(_tmpl$0$1, ssrAttribute("id", escape(key, true), false), ssrAttribute("value", escape(value ?? "", true), false), ssrAttribute("required", field.required, true));
 		case "select": return ssr(_tmpl$1$1, ssrAttribute("id", escape(key, true), false), ssrAttribute("value", escape(value ?? "", true), false), ssrAttribute("required", field.required, true), escape(createComponent(For, {
@@ -202,7 +213,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 ssr(_tmpl$2$2);
+				return ssr(_tmpl$2$3);
 			},
 			get children() {
 				return createComponent(RichTextEditor, {
@@ -228,7 +239,7 @@ function renderUploadInput(key, field, value, setField, ctx) {
 			return uploading();
 		},
 		get children() {
-			return ssr(_tmpl$2$2);
+			return ssr(_tmpl$2$3);
 		}
 	})), escape(createComponent(Show, {
 		get when() {
@@ -294,17 +305,17 @@ function formatDateValue(value) {
 }
 //#endregion
 //#region src/CollectionList.tsx
-var _tmpl$$1 = ["<button type=\"button\" class=\"btn btn-outline btn-sm\">", "</button>"], _tmpl$2$1 = [
+var _tmpl$$3 = ["<button type=\"button\" class=\"btn btn-outline btn-sm\">", "</button>"], _tmpl$2$2 = [
 	"<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</option></select></div>"
-], _tmpl$3$1 = "<th></th>", _tmpl$4$1 = [
+], _tmpl$3$2 = "<th></th>", _tmpl$4$2 = [
 	"<table class=\"table hidden md:table\"><thead><tr>",
 	"",
 	"</tr></thead><tbody>",
 	"</tbody></table>"
-], _tmpl$5 = ["<div class=\"flex flex-col gap-2 md:hidden\">", "</div>"], _tmpl$6 = [
+], _tmpl$5$1 = ["<div class=\"flex flex-col gap-2 md:hidden\">", "</div>"], _tmpl$6$1 = [
 	"<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\"",
@@ -357,14 +368,14 @@ function CollectionList(props) {
 			return props.selectable;
 		},
 		get children() {
-			return ssr(_tmpl$$1, selectMode() ? "Done" : "Select");
+			return ssr(_tmpl$$3, selectMode() ? "Done" : "Select");
 		}
 	})), escape(createComponent(Show, {
 		get when() {
 			return props.onSortChange;
 		},
 		get children() {
-			return ssr(_tmpl$2$1, ssrAttribute("value", escape(props.sortField ?? "", true), false), escape(createComponent(For, {
+			return ssr(_tmpl$2$2, ssrAttribute("value", escape(props.sortField ?? "", true), false), escape(createComponent(For, {
 				get each() {
 					return columns();
 				},
@@ -379,12 +390,12 @@ function CollectionList(props) {
 			return ssr(_tmpl$9, escape(props.config.slug));
 		},
 		get children() {
-			return [ssr(_tmpl$4$1, escape(createComponent(Show, {
+			return [ssr(_tmpl$4$2, escape(createComponent(Show, {
 				get when() {
 					return selectMode();
 				},
 				get children() {
-					return ssr(_tmpl$3$1);
+					return ssr(_tmpl$3$2);
 				}
 			})), escape(createComponent(For, {
 				get each() {
@@ -408,7 +419,7 @@ function CollectionList(props) {
 					},
 					children: ([key]) => ssr(_tmpl$11, escape(formatCellValue(row[key])))
 				})))
-			}))), ssr(_tmpl$5, escape(createComponent(For, {
+			}))), ssr(_tmpl$5$1, escape(createComponent(For, {
 				get each() {
 					return props.rows;
 				},
@@ -432,13 +443,95 @@ function CollectionList(props) {
 			return props.page !== void 0 && props.pageSize !== void 0;
 		},
 		get children() {
-			return ssr(_tmpl$6, ssrAttribute("disabled", (props.page ?? 1) <= 1, true), escape(props.page), ssrAttribute("disabled", props.totalCount !== void 0 ? (props.page ?? 1) * (props.pageSize ?? 0) >= props.totalCount : props.rows.length < (props.pageSize ?? 0), true));
+			return ssr(_tmpl$6$1, ssrAttribute("disabled", (props.page ?? 1) <= 1, true), escape(props.page), ssrAttribute("disabled", props.totalCount !== void 0 ? (props.page ?? 1) * (props.pageSize ?? 0) >= props.totalCount : props.rows.length < (props.pageSize ?? 0), true));
+		}
+	})));
+}
+//#endregion
+//#region src/ImageHotspotField.tsx
+var _tmpl$$2 = "<span class=\"loading loading-spinner loading-sm\"></span>", _tmpl$2$1 = ["<p class=\"text-sm text-error\">", "</p>"], _tmpl$3$1 = [
+	"<div class=\"flex flex-col gap-3\"><input",
+	" class=\"file-input\" type=\"file\" accept=\"image/*\"",
+	">",
+	"",
+	"",
+	"</div>"
+], _tmpl$4$1 = [
+	"<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\">",
+	"</p></div>"
+], _tmpl$5 = ["<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\" style=\"", "\"></span>"], _tmpl$6 = [
+	"<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\"",
+	"></label>"
+];
+/**
+* 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 crop = () => parsed()?.crop ?? {
+		top: 0,
+		right: 0,
+		bottom: 0,
+		left: 0
+	};
+	return ssr(_tmpl$3$1, ssrAttribute("id", escape(props.fieldKey, true), false), ssrAttribute("disabled", uploading(), true), escape(createComponent(Show, {
+		get when() {
+			return uploading();
+		},
+		get children() {
+			return ssr(_tmpl$$2);
+		}
+	})), escape(createComponent(Show, {
+		get when() {
+			return error();
+		},
+		get children() {
+			return ssr(_tmpl$2$1, escape(error()));
 		}
+	})), escape(createComponent(Show, {
+		get when() {
+			return parsed()?.url;
+		},
+		children: (url) => ssr(_tmpl$4$1, ssrAttribute("src", escape(url(), true), false), escape(createComponent(Show, {
+			get when() {
+				return parsed()?.hotspot;
+			},
+			children: (hs) => ssr(_tmpl$5, ssrStyleProperty("left:", `${escape(hs().x, true) * 100}%`) + ssrStyleProperty(";top:", `${escape(hs().y, true) * 100}%`))
+		})), escape([
+			"top",
+			"right",
+			"bottom",
+			"left"
+		].map((edge) => ssr(_tmpl$6, escape(edge), ssrAttribute("value", escape(crop()[edge], true), false)))), escape(url()))
 	})));
 }
 //#endregion
 //#region src/SearchPalette.tsx
-var _tmpl$ = ["<ul class=\"max-h-80 overflow-y-auto py-2\">", "</ul>"], _tmpl$2 = [
+var _tmpl$$1 = ["<ul class=\"max-h-80 overflow-y-auto py-2\">", "</ul>"], _tmpl$2 = [
 	"<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</kbd></div>",
 	"</div></div>"
@@ -491,7 +584,7 @@ function SearchPalette(props) {
 					return ssr(_tmpl$3, query().trim().length < 2 ? "Keep typing to search…" : "No results");
 				},
 				get children() {
-					return ssr(_tmpl$, escape(createComponent(For, {
+					return ssr(_tmpl$$1, escape(createComponent(For, {
 						get each() {
 							return results();
 						},
@@ -503,6 +596,29 @@ function SearchPalette(props) {
 	});
 }
 //#endregion
-export { CollectionEdit, CollectionList, SearchPalette };
+//#region src/VisualEditingPane.tsx
+var _tmpl$ = ["<iframe", "></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 ssr(_tmpl$, ssrAttribute("src", escape(props.src, true), false) + ssrAttribute("title", escape(props.title ?? "Preview", true), false) + ssrAttribute("class", escape(props.class ?? "h-full w-full border-0", true), false));
+}
+//#endregion
+export { CollectionEdit, CollectionList, ImageHotspotField, SearchPalette, VisualEditingPane, parseImageHotspotValue, serializeImageHotspotValue };
 
 //# sourceMappingURL=server.js.map