camox 0.66.0 → 0.67.0

package/dist/features/content/components/MissingFromLocale.js

@@ -2,8 +2,8 @@ import { useViewLocale } from "../../../lib/view-locale-context.js";
 import { useProjectUuid } from "../../../lib/auth.js";
 import { reads, useReadQuery, useStudioCache } from "../../../lib/studio-reads.js";
 import { localeMutations } from "../../../lib/queries.js";
-import { ContentSidebarGroup } from "./ContentSidebarGroup.js";
 import { localeLabel } from "../../studio/localeOptions.js";
+import { ContentSidebarGroup } from "./ContentSidebarGroup.js";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMutation } from "@tanstack/react-query";

package/dist/features/page/UnplacedLayoutContent.js

@@ -0,0 +1,141 @@
+import { useViewLocale } from "../../lib/view-locale-context.js";
+import { usePageBlocks } from "../../lib/normalized-data.js";
+import { buildLayoutContext } from "../../core/layoutContext.js";
+import { SharedLayoutContent } from "./SharedLayoutContent.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/features/page/UnplacedLayoutContent.tsx
+const EMPTY_PAGE = { blockIds: [] };
+/**
+* How tall the placeholder stands: short enough to leave the footer on the first screen, which
+* shows whether it rises up it, or taller than any screen, as a long page is.
+*/
+const PLACEHOLDER_HEIGHTS = {
+	short: "16rem",
+	tall: "300vh"
+};
+/** A grey that reads on light and dark Themes alike. */
+const HATCH = "rgba(128, 128, 128, 0.35)";
+/**
+* Where a page's content goes, as the look document's Layout Definition mode shows it: a labelled,
+* hatched area, styled inline, since the site's stylesheet knows nothing of it.
+*/
+function PageContentPlaceholder(t0) {
+	const $ = c(6);
+	const { height } = t0;
+	const t1 = PLACEHOLDER_HEIGHTS[height];
+	let t2;
+	if ($[0] !== t1) {
+		t2 = {
+			minHeight: t1,
+			display: "flex",
+			alignItems: "flex-start",
+			justifyContent: "center",
+			padding: "2rem",
+			border: `2px dashed ${HATCH}`,
+			backgroundImage: `repeating-linear-gradient(45deg, ${HATCH} 0 2px, transparent 2px 14px)`,
+			font: "600 14px/1.4 system-ui, sans-serif",
+			color: "rgb(128, 128, 128)"
+		};
+		$[0] = t1;
+		$[1] = t2;
+	} else t2 = $[1];
+	const style = t2;
+	let t3;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx("span", { children: "Page content" });
+		$[2] = t3;
+	} else t3 = $[2];
+	let t4;
+	if ($[3] !== height || $[4] !== style) {
+		t4 = /* @__PURE__ */ jsx("div", {
+			"data-camox-look-placeholder": height,
+			style,
+			children: t3
+		});
+		$[3] = height;
+		$[4] = style;
+		$[5] = t4;
+	} else t4 = $[5];
+	return t4;
+}
+/**
+* A curated Layout around no page, alone, as the look document's Layout Definition mode shows it
+* (ADR 0032): its blocks, read like a Layout's, around a placeholder for a page's content.
+*/
+function UnplacedLayoutContent(t0) {
+	const $ = c(21);
+	const { camoxApp, lookLayout } = t0;
+	let t1;
+	if ($[0] !== lookLayout.layout) {
+		t1 = {
+			page: EMPTY_PAGE,
+			layout: lookLayout.layout
+		};
+		$[0] = lookLayout.layout;
+		$[1] = t1;
+	} else t1 = $[1];
+	const { beforeBlocks, afterBlocks, layoutFiles, layoutItems } = usePageBlocks(t1);
+	const { locale } = useViewLocale();
+	let t2;
+	if ($[2] !== camoxApp || $[3] !== lookLayout.layoutId) {
+		t2 = camoxApp.getLayoutById(lookLayout.layoutId);
+		$[2] = camoxApp;
+		$[3] = lookLayout.layoutId;
+		$[4] = t2;
+	} else t2 = $[4];
+	const layout = t2;
+	if (!layout) throw new Error(`Unknown layout: ${lookLayout.layoutId}`);
+	let t3;
+	if ($[5] !== locale.tag || $[6] !== lookLayout.path || $[7] !== lookLayout.projectName) {
+		t3 = buildLayoutContext({
+			kind: "curated",
+			title: ""
+		}, {
+			path: lookLayout.path,
+			locale: locale.tag,
+			projectName: lookLayout.projectName
+		});
+		$[5] = locale.tag;
+		$[6] = lookLayout.path;
+		$[7] = lookLayout.projectName;
+		$[8] = t3;
+	} else t3 = $[8];
+	const context = t3;
+	let t4;
+	if ($[9] !== afterBlocks || $[10] !== beforeBlocks) {
+		t4 = [...beforeBlocks, ...afterBlocks];
+		$[9] = afterBlocks;
+		$[10] = beforeBlocks;
+		$[11] = t4;
+	} else t4 = $[11];
+	let t5;
+	if ($[12] !== lookLayout.placeholder) {
+		t5 = /* @__PURE__ */ jsx(PageContentPlaceholder, { height: lookLayout.placeholder });
+		$[12] = lookLayout.placeholder;
+		$[13] = t5;
+	} else t5 = $[13];
+	let t6;
+	if ($[14] !== context || $[15] !== layout || $[16] !== layoutFiles || $[17] !== layoutItems || $[18] !== t4 || $[19] !== t5) {
+		t6 = /* @__PURE__ */ jsx(SharedLayoutContent, {
+			layout,
+			context,
+			blocks: t4,
+			files: layoutFiles,
+			repeatableItems: layoutItems,
+			children: t5
+		});
+		$[14] = context;
+		$[15] = layout;
+		$[16] = layoutFiles;
+		$[17] = layoutItems;
+		$[18] = t4;
+		$[19] = t5;
+		$[20] = t6;
+	} else t6 = $[20];
+	return t6;
+}
+
+//#endregion
+export { UnplacedLayoutContent };

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

@@ -45,8 +45,8 @@ const getSchemaFieldsInOrder = (schema) => {
 	});
 };
 const ItemFieldsEditor = (t0) => {
-	const $ = c(58);
-	const { selectedFieldName, schema, data, blockId, itemId, onFieldChange, postToIframe, filesMap, itemsMap, references, placement, fieldIdPrefix } = t0;
+	const $ = c(59);
+	const { selectedFieldName, schema, data, blockId, itemId, onFieldChange, postToIframe, filesMap, itemsMap, references, placement, fieldIdPrefix, fieldHint } = t0;
 	const owner = React.useContext(PreviewEditingOwnerContext);
 	let t1;
 	if ($[0] !== schema || $[1] !== selectedFieldName) {
@@ -146,7 +146,7 @@ const ItemFieldsEditor = (t0) => {
 	React.useEffect(t8, t9);
 	let t10;
 	let t11;
-	if ($[25] !== blockId || $[26] !== data || $[27] !== fields || $[28] !== filesMap || $[29] !== form || $[30] !== getFieldElementId || $[31] !== getFieldId || $[32] !== itemId || $[33] !== itemsMap || $[34] !== onFieldChange || $[35] !== owner || $[36] !== placement || $[37] !== postToIframe || $[38] !== references || $[39] !== schema || $[40] !== selectedFieldName) {
+	if ($[25] !== blockId || $[26] !== data || $[27] !== fieldHint || $[28] !== fields || $[29] !== filesMap || $[30] !== form || $[31] !== getFieldElementId || $[32] !== getFieldId || $[33] !== itemId || $[34] !== itemsMap || $[35] !== onFieldChange || $[36] !== owner || $[37] !== placement || $[38] !== postToIframe || $[39] !== references || $[40] !== schema || $[41] !== selectedFieldName) {
 		const handleScalarChange = (fieldName_2, value, fieldApi) => {
 			fieldApi.handleChange(value);
 			if (timerRef.current) clearTimeout(timerRef.current);
@@ -158,7 +158,7 @@ const ItemFieldsEditor = (t0) => {
 			}, 500);
 		};
 		let t12;
-		if ($[43] !== blockId || $[44] !== itemId || $[45] !== owner || $[46] !== placement) {
+		if ($[44] !== blockId || $[45] !== itemId || $[46] !== owner || $[47] !== placement) {
 			t12 = (fieldName_3, fieldType) => {
 				if (owner === null) return;
 				if (placement) {
@@ -190,12 +190,12 @@ const ItemFieldsEditor = (t0) => {
 					fieldType
 				});
 			};
-			$[43] = blockId;
-			$[44] = itemId;
-			$[45] = owner;
-			$[46] = placement;
-			$[47] = t12;
-		} else t12 = $[47];
+			$[44] = blockId;
+			$[45] = itemId;
+			$[46] = owner;
+			$[47] = placement;
+			$[48] = t12;
+		} else t12 = $[48];
 		const selectField = t12;
 		const handleFieldFocus = (fieldName_4, fieldType_0) => {
 			if (owner === null) return;
@@ -216,7 +216,7 @@ const ItemFieldsEditor = (t0) => {
 			});
 		};
 		let t13;
-		if ($[48] !== blockId || $[49] !== itemId || $[50] !== placement) {
+		if ($[49] !== blockId || $[50] !== itemId || $[51] !== placement) {
 			t13 = (fieldName_6, recordId) => placement ? {
 				...placement,
 				nested: {
@@ -229,15 +229,15 @@ const ItemFieldsEditor = (t0) => {
 				fieldName: fieldName_6,
 				recordId
 			};
-			$[48] = blockId;
-			$[49] = itemId;
-			$[50] = placement;
-			$[51] = t13;
-		} else t13 = $[51];
+			$[49] = blockId;
+			$[50] = itemId;
+			$[51] = placement;
+			$[52] = t13;
+		} else t13 = $[52];
 		const placementOf = t13;
 		const opensRecords = !placement?.nested;
 		let t14;
-		if ($[52] !== owner || $[53] !== placementOf) {
+		if ($[53] !== owner || $[54] !== placementOf) {
 			t14 = (fieldName_7, recordId_0) => {
 				if (owner === null) return;
 				previewStore.send({
@@ -246,10 +246,10 @@ const ItemFieldsEditor = (t0) => {
 					...placementOf(fieldName_7, recordId_0)
 				});
 			};
-			$[52] = owner;
-			$[53] = placementOf;
-			$[54] = t14;
-		} else t14 = $[54];
+			$[53] = owner;
+			$[54] = placementOf;
+			$[55] = t14;
+		} else t14 = $[55];
 		const openRecord = t14;
 		t10 = "space-y-4 px-2 py-4";
 		t11 = fields.map((field_0) => {
@@ -342,6 +342,7 @@ const ItemFieldsEditor = (t0) => {
 					const preview = field_0.fieldType === "String" ? lexicalStateToPlainText(value_2 ?? "") || "Empty text" : field_0.fieldType === "Repeater" ? `${Array.isArray(value_2) ? value_2.length : 0} items` : field_0.fieldType === "Boolean" ? value_2 ? "On" : "Off" : typeof value_2 === "string" && value_2 ? value_2 : "Empty";
 					return /* @__PURE__ */ jsx(DrillRow, {
 						label,
+						hint: fieldHint?.(field_0.name),
 						preview,
 						Icon: field_0.fieldType === "String" ? Type : field_0.fieldType === "Repeater" ? List : field_0.fieldType === "Embed" ? Code : field_0.fieldType === "Boolean" ? ToggleLeft : ListFilter,
 						onClick: () => selectField(field_0.name, field_0.fieldType),
@@ -444,6 +445,7 @@ const ItemFieldsEditor = (t0) => {
 					const preview_0 = linkValue?.text || linkValue?.href || "Empty link";
 					return /* @__PURE__ */ jsx(DrillRow, {
 						label,
+						hint: fieldHint?.(field_0.name),
 						preview: preview_0,
 						Icon: Link2,
 						onClick: () => selectField(field_0.name, "Link"),
@@ -465,6 +467,7 @@ const ItemFieldsEditor = (t0) => {
 					else preview_1 = `${count} ${noun}s`;
 					return /* @__PURE__ */ jsx(DrillRow, {
 						label,
+						hint: fieldHint?.(field_0.name),
 						preview: preview_1,
 						Icon: isImage ? Images : FileIcon,
 						onClick: () => selectField(field_0.name, isImage ? "Image" : "File"),
@@ -480,6 +483,7 @@ const ItemFieldsEditor = (t0) => {
 					const preview_2 = resolveAssetValue(data[field_0.name], filesMap)?.filename || "No image";
 					return /* @__PURE__ */ jsx(DrillRow, {
 						label,
+						hint: fieldHint?.(field_0.name),
 						preview: preview_2,
 						Icon: ImageIcon,
 						onClick: () => selectField(field_0.name, "Image"),
@@ -494,6 +498,7 @@ const ItemFieldsEditor = (t0) => {
 					const preview_3 = resolveAssetValue(data[field_0.name], filesMap)?.filename || "No file";
 					return /* @__PURE__ */ jsx(DrillRow, {
 						label,
+						hint: fieldHint?.(field_0.name),
 						preview: preview_3,
 						Icon: FileIcon,
 						onClick: () => selectField(field_0.name, "File"),
@@ -526,36 +531,37 @@ const ItemFieldsEditor = (t0) => {
 		});
 		$[25] = blockId;
 		$[26] = data;
-		$[27] = fields;
-		$[28] = filesMap;
-		$[29] = form;
-		$[30] = getFieldElementId;
-		$[31] = getFieldId;
-		$[32] = itemId;
-		$[33] = itemsMap;
-		$[34] = onFieldChange;
-		$[35] = owner;
-		$[36] = placement;
-		$[37] = postToIframe;
-		$[38] = references;
-		$[39] = schema;
-		$[40] = selectedFieldName;
-		$[41] = t10;
-		$[42] = t11;
+		$[27] = fieldHint;
+		$[28] = fields;
+		$[29] = filesMap;
+		$[30] = form;
+		$[31] = getFieldElementId;
+		$[32] = getFieldId;
+		$[33] = itemId;
+		$[34] = itemsMap;
+		$[35] = onFieldChange;
+		$[36] = owner;
+		$[37] = placement;
+		$[38] = postToIframe;
+		$[39] = references;
+		$[40] = schema;
+		$[41] = selectedFieldName;
+		$[42] = t10;
+		$[43] = t11;
 	} else {
-		t10 = $[41];
-		t11 = $[42];
+		t10 = $[42];
+		t11 = $[43];
 	}
 	let t12;
-	if ($[55] !== t10 || $[56] !== t11) {
+	if ($[56] !== t10 || $[57] !== t11) {
 		t12 = /* @__PURE__ */ jsx("form", {
 			className: t10,
 			children: t11
 		});
-		$[55] = t10;
-		$[56] = t11;
-		$[57] = t12;
-	} else t12 = $[57];
+		$[56] = t10;
+		$[57] = t11;
+		$[58] = t12;
+	} else t12 = $[58];
 	return t12;
 };
 function _temp(f) {