camox 0.43.0 → 0.45.0

package/dist/features/preview/components/ReferenceListFieldEditor.js

@@ -0,0 +1,432 @@
+import { collectionField } from "../../../core/lib/contentType.js";
+import { useProjectUuid } from "../../../lib/auth.js";
+import { useCamoxApp } from "../../provider/components/CamoxAppContext.js";
+import { reads, useReadQuery } from "../../../lib/studio-reads.js";
+import { referenceListIds } from "../../../core/lib/reference.js";
+import { useCollectionItemSheet } from "../../content/CollectionItemSheetContext.js";
+import { referencePickerFocus, useReferencePickerFocusRequested } from "../referencePickerFocus.js";
+import { DrillRow } from "./DrillRow.js";
+import { RecordCard } from "./RecordCard.js";
+import { RecordCombobox } from "./RecordCombobox.js";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@camox/ui/button";
+import { GripVertical, ListOrdered, X } from "lucide-react";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@camox/ui/tooltip";
+import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
+import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
+import { SortableContext, arrayMove, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+
+//#region src/features/preview/components/ReferenceListFieldEditor.tsx
+const sameIds = (a, b) => a.length === b.length && a.every((id, index) => id === b[index]);
+/** The hover for one record's card, when the list highlights entries in the preview. */
+function entryHover(recordHover, recordId) {
+	if (!recordHover) return void 0;
+	return {
+		fieldId: recordHover.fieldId(recordId),
+		postToIframe: recordHover.postToIframe
+	};
+}
+/** Highlights a record's entry in the preview while its card is hovered. */
+function useEntryHover(hover) {
+	const $ = c(6);
+	const [isHovered, setIsHovered] = React.useState(false);
+	const hoverFieldId = hover?.fieldId;
+	const postToIframe = hover?.postToIframe;
+	let t0;
+	let t1;
+	if ($[0] !== hoverFieldId || $[1] !== isHovered || $[2] !== postToIframe) {
+		t0 = () => {
+			if (!isHovered || hoverFieldId === void 0 || !postToIframe) return;
+			postToIframe({
+				type: "CAMOX_HOVER_FIELD",
+				fieldId: hoverFieldId
+			});
+			return () => postToIframe({
+				type: "CAMOX_HOVER_FIELD_END",
+				fieldId: hoverFieldId
+			});
+		};
+		t1 = [
+			isHovered,
+			hoverFieldId,
+			postToIframe
+		];
+		$[0] = hoverFieldId;
+		$[1] = isHovered;
+		$[2] = postToIframe;
+		$[3] = t0;
+		$[4] = t1;
+	} else {
+		t0 = $[3];
+		t1 = $[4];
+	}
+	React.useEffect(t0, t1);
+	let t2;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = {
+			onMouseEnter: () => setIsHovered(true),
+			onMouseLeave: () => setIsHovered(false)
+		};
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
+}
+/**
+* How a query picks its records, for editors: "Newest 3 by published date",
+* "First 3 by Title, A to Z". Without `orderBy`, records come in creation order.
+*/
+function describeQuery(query, fieldTitle) {
+	const [key, direction] = Object.entries(query.orderBy ?? { createdAt: "asc" })[0];
+	const { limit } = query;
+	if (key === "createdAt" || key === "publishedAt") return `${direction === "desc" ? "Newest" : "Oldest"} ${limit ?? "first"} by ${key === "publishedAt" ? "published date" : "creation date"}`;
+	return `${limit === void 0 ? "All" : `First ${limit}`} by ${fieldTitle(key)}, ${direction === "desc" ? "Z to A" : "A to Z"}`;
+}
+/** A query result: it can be opened, never unlinked or moved. */
+function QueryResultCard(t0) {
+	const $ = c(8);
+	let card;
+	let hover;
+	if ($[0] !== t0) {
+		({hover, ...card} = t0);
+		$[0] = t0;
+		$[1] = card;
+		$[2] = hover;
+	} else {
+		card = $[1];
+		hover = $[2];
+	}
+	const hoverHandlers = useEntryHover(hover);
+	let t1;
+	if ($[3] !== card) {
+		t1 = /* @__PURE__ */ jsx(RecordCard, { ...card });
+		$[3] = card;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== hoverHandlers || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx("li", {
+			...hoverHandlers,
+			className: "min-w-0",
+			children: t1
+		});
+		$[5] = hoverHandlers;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+}
+function SortableRecordCard(t0) {
+	const $ = c(31);
+	const { id, label, collectionTitle, onOpen, onUnlink, hover } = t0;
+	let t1;
+	if ($[0] !== id) {
+		t1 = { id };
+		$[0] = id;
+		$[1] = t1;
+	} else t1 = $[1];
+	const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable(t1);
+	const hoverHandlers = useEntryHover(hover);
+	let t2;
+	if ($[2] !== transform) {
+		t2 = CSS.Transform.toString(transform);
+		$[2] = transform;
+		$[3] = t2;
+	} else t2 = $[3];
+	const t3 = isDragging ? .5 : 1;
+	let t4;
+	if ($[4] !== t2 || $[5] !== t3 || $[6] !== transition) {
+		t4 = {
+			transform: t2,
+			transition,
+			opacity: t3
+		};
+		$[4] = t2;
+		$[5] = t3;
+		$[6] = transition;
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx(GripVertical, {
+			"aria-hidden": true,
+			className: "size-4"
+		});
+		$[8] = t5;
+	} else t5 = $[8];
+	let t6;
+	if ($[9] !== attributes || $[10] !== listeners) {
+		t6 = /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "ghost",
+			size: "icon-sm",
+			"aria-label": "Reorder",
+			className: "text-muted-foreground hover:text-foreground shrink-0 cursor-grab active:cursor-grabbing",
+			...attributes,
+			...listeners,
+			children: t5
+		});
+		$[9] = attributes;
+		$[10] = listeners;
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== onUnlink) {
+		t7 = /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "ghost",
+			size: "icon-sm",
+			"aria-label": "Unlink",
+			className: "text-muted-foreground hover:text-foreground shrink-0",
+			onClick: onUnlink
+		});
+		$[12] = onUnlink;
+		$[13] = t7;
+	} else t7 = $[13];
+	let t8;
+	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = /* @__PURE__ */ jsx(X, {
+			"aria-hidden": true,
+			className: "size-4"
+		});
+		$[14] = t8;
+	} else t8 = $[14];
+	let t9;
+	if ($[15] !== t7) {
+		t9 = /* @__PURE__ */ jsx(TooltipTrigger, {
+			render: t7,
+			children: t8
+		});
+		$[15] = t7;
+		$[16] = t9;
+	} else t9 = $[16];
+	let t10;
+	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = /* @__PURE__ */ jsx(TooltipContent, { children: "Unlink" });
+		$[17] = t10;
+	} else t10 = $[17];
+	let t11;
+	if ($[18] !== t9) {
+		t11 = /* @__PURE__ */ jsxs(Tooltip, { children: [t9, t10] });
+		$[18] = t9;
+		$[19] = t11;
+	} else t11 = $[19];
+	let t12;
+	if ($[20] !== collectionTitle || $[21] !== label || $[22] !== onOpen || $[23] !== t11 || $[24] !== t6) {
+		t12 = /* @__PURE__ */ jsx(RecordCard, {
+			label,
+			collectionTitle,
+			onOpen,
+			leading: t6,
+			actions: t11
+		});
+		$[20] = collectionTitle;
+		$[21] = label;
+		$[22] = onOpen;
+		$[23] = t11;
+		$[24] = t6;
+		$[25] = t12;
+	} else t12 = $[25];
+	let t13;
+	if ($[26] !== hoverHandlers || $[27] !== setNodeRef || $[28] !== t12 || $[29] !== t4) {
+		t13 = /* @__PURE__ */ jsx("li", {
+			ref: setNodeRef,
+			...hoverHandlers,
+			style: t4,
+			className: "min-w-0",
+			children: t12
+		});
+		$[26] = hoverHandlers;
+		$[27] = setNodeRef;
+		$[28] = t12;
+		$[29] = t4;
+		$[30] = t13;
+	} else t13 = $[30];
+	return t13;
+}
+/**
+* Manages which records a reference list links, and their order. Every change writes the
+* whole id array; records themselves are edited in their own view, never unlinked by deletion.
+*/
+function ReferenceListFieldEditor({ collectionId, fieldId, value, maxItems, query, records: hydratedRecords = [], onChange, onOpenRecord, recordHover, drill, allowCreate = true }) {
+	const projectUuid = useProjectUuid();
+	const collection = useCamoxApp().getCollectionById(collectionId);
+	const collectionTitle = collection?._internal.title ?? collectionId;
+	const sheet = useCollectionItemSheet();
+	const records = useReadQuery(reads.records({
+		projectUuid,
+		collectionId
+	}), { enabled: !drill });
+	const storedIds = referenceListIds(value);
+	const [pendingIds, setPendingIds] = React.useState(null);
+	const ids = pendingIds ?? storedIds;
+	const [saving, setSaving] = React.useState(false);
+	const [error, setError] = React.useState(null);
+	const [pickerOpen, setPickerOpen] = React.useState(false);
+	const focusRequested = useReferencePickerFocusRequested(drill ? void 0 : fieldId);
+	const canAdd = maxItems === void 0 || ids.length < maxItems;
+	const pickerReady = canAdd && records.isSuccess && !saving;
+	React.useEffect(() => {
+		if (!focusRequested || !fieldId || !pickerReady) return;
+		referencePickerFocus.send({
+			type: "consume",
+			fieldId
+		});
+		setPickerOpen(true);
+	}, [
+		focusRequested,
+		fieldId,
+		pickerReady
+	]);
+	const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+	if (drill && query) {
+		const count = hydratedRecords.length;
+		return /* @__PURE__ */ jsx(DrillRow, {
+			label: drill.label,
+			preview: `${count} ${count === 1 ? "result" : "results"}`,
+			Icon: ListOrdered,
+			onClick: drill.onClick,
+			hover: {
+				variant: "field",
+				fieldId: drill.fieldId
+			},
+			postToIframe: drill.postToIframe
+		});
+	}
+	if (drill) return /* @__PURE__ */ jsx(DrillRow, {
+		label: drill.label,
+		preview: storedIds.length > 0 ? `${storedIds.length} linked` : `No ${collectionTitle} linked`,
+		Icon: ListOrdered,
+		onClick: drill.onClick,
+		hover: {
+			variant: "field",
+			fieldId: drill.fieldId
+		},
+		postToIframe: drill.postToIframe
+	});
+	if (query) {
+		const fieldTitle = (key) => collectionField(collection, key)?.title ?? key;
+		return /* @__PURE__ */ jsxs("div", {
+			className: "min-w-0 space-y-3",
+			children: [/* @__PURE__ */ jsx("p", {
+				"data-query-summary": true,
+				className: "text-muted-foreground px-1 text-xs",
+				children: describeQuery(query, fieldTitle)
+			}), hydratedRecords.length > 0 && /* @__PURE__ */ jsx("ul", {
+				className: "flex min-w-0 flex-col gap-2",
+				children: hydratedRecords.map((record) => /* @__PURE__ */ jsx(QueryResultCard, {
+					label: record.label,
+					collectionTitle,
+					onOpen: onOpenRecord ? () => onOpenRecord(record.id) : void 0,
+					hover: entryHover(recordHover, record.id)
+				}, record.id))
+			})]
+		});
+	}
+	const save = async (next) => {
+		if (sameIds(next, ids)) return;
+		setPendingIds(next);
+		setSaving(true);
+		setError(null);
+		try {
+			await onChange?.(next);
+		} catch (cause) {
+			setError(cause instanceof Error ? cause.message : "Could not change the list.");
+			throw cause;
+		} finally {
+			setPendingIds(null);
+			setSaving(false);
+		}
+	};
+	const change = (next) => {
+		save(next).catch(() => {});
+	};
+	const handleDragEnd = ({ active, over }) => {
+		if (!over || active.id === over.id) return;
+		const from = ids.indexOf(String(active.id));
+		const to = ids.indexOf(String(over.id));
+		if (from === -1 || to === -1) return;
+		change(arrayMove(ids, from, to));
+	};
+	const options = (records.data ?? []).filter((option) => !ids.includes(option.id));
+	return /* @__PURE__ */ jsxs("fieldset", {
+		disabled: saving,
+		className: "min-w-0 space-y-3",
+		children: [
+			ids.length > 0 && /* @__PURE__ */ jsx(DndContext, {
+				sensors,
+				collisionDetection: closestCenter,
+				onDragEnd: handleDragEnd,
+				modifiers: [restrictToVerticalAxis],
+				children: /* @__PURE__ */ jsx(SortableContext, {
+					items: ids,
+					strategy: verticalListSortingStrategy,
+					children: /* @__PURE__ */ jsx("ul", {
+						className: "flex min-w-0 flex-col gap-2",
+						children: ids.map((id) => {
+							const summary = records.data?.find((option) => option.id === id);
+							const hydrated = hydratedRecords.find((record) => record.id === id);
+							return /* @__PURE__ */ jsx(SortableRecordCard, {
+								id,
+								label: summary?.label ?? hydrated?.label ?? "Unavailable item",
+								collectionTitle,
+								onOpen: onOpenRecord ? () => onOpenRecord(id) : void 0,
+								onUnlink: () => change(ids.filter((linked) => linked !== id)),
+								hover: entryHover(recordHover, id)
+							}, id);
+						})
+					})
+				})
+			}),
+			!canAdd && /* @__PURE__ */ jsxs("p", {
+				className: "text-muted-foreground px-1 text-xs",
+				children: [
+					"Limit of ",
+					maxItems,
+					" reached"
+				]
+			}),
+			canAdd && /* @__PURE__ */ jsx(RecordCombobox, {
+				records: options,
+				collectionTitle,
+				emptyMessage: records.data?.length ? `Every ${collectionTitle} item is already linked.` : void 0,
+				onSelect: (option) => change([...ids, option.id]),
+				disabled: saving || records.isPending || records.isError,
+				open: pickerOpen,
+				onOpenChange: setPickerOpen,
+				footerAction: allowCreate ? {
+					label: "Create item",
+					onSelect: (search) => sheet.open({
+						collectionId,
+						initialContent: collection && search.trim() ? { [collection._internal.label]: search } : void 0,
+						onSaved: (created) => save([...ids, created.id])
+					})
+				} : void 0
+			}),
+			records.isPending && /* @__PURE__ */ jsx("p", {
+				role: "status",
+				children: "Loading items…"
+			}),
+			records.isError && /* @__PURE__ */ jsxs("div", {
+				role: "alert",
+				className: "space-y-2",
+				children: [/* @__PURE__ */ jsx("p", { children: "Could not load collection items." }), /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "outline",
+					onClick: () => void records.refetch(),
+					children: "Try again"
+				})]
+			}),
+			error && /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				className: "text-destructive text-sm",
+				children: error
+			})
+		]
+	});
+}
+
+//#endregion
+export { ReferenceListFieldEditor };

package/dist/features/preview/components/RemovedBlockPlaceholder.js

@@ -0,0 +1,95 @@
+import { blockMutations } from "../../../lib/queries.js";
+import { useIsEditable } from "../../../core/hooks/useIsEditable.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMutation } from "@tanstack/react-query";
+import { Button } from "@camox/ui/button";
+import { Trash2 } from "lucide-react";
+import { toast } from "@camox/ui/toaster";
+
+//#region src/features/preview/components/RemovedBlockPlaceholder.tsx
+/**
+* A block whose definition was removed from code. It renders nothing on the website; in edit
+* mode it shows this placeholder, whose only action is delete. Its content stays stored and
+* comes back if the definition does.
+*/
+function RemovedBlockPlaceholder(t0) {
+	const $ = c(16);
+	const { blockId, type, mode } = t0;
+	const isEditable = useIsEditable(mode);
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = blockMutations.delete();
+		$[0] = t1;
+	} else t1 = $[0];
+	const deleteBlock = useMutation(t1);
+	if (!isEditable) return null;
+	let t2;
+	if ($[1] !== blockId || $[2] !== deleteBlock || $[3] !== type) {
+		t2 = async () => {
+			try {
+				await deleteBlock.mutateAsync({ id: blockId });
+				toast.success(`Deleted "${type}" block`);
+			} catch (t3) {
+				console.error("Failed to delete block:", t3);
+				toast.error("Could not delete block");
+			}
+		};
+		$[1] = blockId;
+		$[2] = deleteBlock;
+		$[3] = type;
+		$[4] = t2;
+	} else t2 = $[4];
+	const handleDelete = t2;
+	let t3;
+	if ($[5] !== type) {
+		t3 = /* @__PURE__ */ jsxs("p", { children: [
+			"The ",
+			/* @__PURE__ */ jsx("span", {
+				className: "text-foreground font-mono",
+				children: type
+			}),
+			" block definition was removed from code, so this block renders nothing."
+		] });
+		$[5] = type;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== handleDelete) {
+		t4 = () => void handleDelete();
+		$[7] = handleDelete;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx(Trash2, {});
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] !== deleteBlock.isPending || $[11] !== t4) {
+		t6 = /* @__PURE__ */ jsxs(Button, {
+			variant: "outline",
+			size: "sm",
+			disabled: deleteBlock.isPending,
+			onClick: t4,
+			children: [t5, "Delete"]
+		});
+		$[10] = deleteBlock.isPending;
+		$[11] = t4;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== t3 || $[14] !== t6) {
+		t7 = /* @__PURE__ */ jsxs("div", {
+			className: "border-border text-muted-foreground mx-4 my-2 flex items-center justify-between gap-4 rounded-md border border-dashed p-4 text-sm",
+			children: [t3, t6]
+		});
+		$[13] = t3;
+		$[14] = t6;
+		$[15] = t7;
+	} else t7 = $[15];
+	return t7;
+}
+
+//#endregion
+export { RemovedBlockPlaceholder };