camox 0.66.0 → 0.68.0

package/dist/core/editing/createEditableBlock.js

@@ -714,7 +714,8 @@ function createEditableBlock(options) {
 			$[5] = t2;
 		} else t2 = $[5];
 		const isHoveredFromSidebar = useOverlayMessage(iframeWindow, isContentEditable, "CAMOX_HOVER_FIELD", "CAMOX_HOVER_FIELD_END", t2);
-		const overlayState = useOverlayState(isHovered || isHoveredFromSidebar);
+		const isFocused = useFieldSelection(blockId, fieldName, "Artifact", itemId);
+		const overlayState = useOverlayState(isHovered || isHoveredFromSidebar, isFocused);
 		let t3;
 		if ($[6] !== blockId || $[7] !== fieldName || $[8] !== itemId || $[9] !== selectTarget) {
 			t3 = () => {

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) {

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

@@ -3,6 +3,7 @@ import { formatShortcut } from "../../../lib/shortcuts.js";
 import { TOGGLE_CANVAS_SHORTCUT } from "../previewConstants.js";
 import { prefetchCanvas } from "./CanvasPreview.js";
 import { DeviceSelector } from "../../../components/DeviceSelector.js";
+import { DraftBar } from "../../studio/components/DraftBar.js";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useSelector } from "@xstate/store-react";
@@ -15,55 +16,60 @@ import { FloatingToolbar } from "@camox/ui/floating-toolbar";
 
 //#region src/features/preview/components/PreviewToolbar.tsx
 const PreviewToolbar = () => {
-	const $ = c(21);
+	const $ = c(22);
 	const isCanvasShown = useSelector(previewStore, selectIsCanvasShown);
 	const isToolbarHidden = useSelector(previewStore, _temp);
 	const viewportMode = useSelector(previewStore, _temp2);
 	if (isToolbarHidden) return null;
 	let t0;
-	if ($[0] !== isCanvasShown) {
-		t0 = /* @__PURE__ */ jsx(Switch, {
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(DraftBar, { stacked: true });
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] !== isCanvasShown) {
+		t1 = /* @__PURE__ */ jsx(Switch, {
 			id: "show-canvas",
 			checked: isCanvasShown,
 			onCheckedChange: _temp3
 		});
-		$[0] = isCanvasShown;
-		$[1] = t0;
-	} else t0 = $[1];
-	let t1;
-	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = /* @__PURE__ */ jsxs(Label, {
+		$[1] = isCanvasShown;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsxs(Label, {
 			htmlFor: "show-canvas",
 			className: "flex items-center gap-2",
 			children: ["Show canvas ", formatShortcut(TOGGLE_CANVAS_SHORTCUT)]
 		});
-		$[2] = t1;
-	} else t1 = $[2];
-	let t2;
-	if ($[3] !== t0) {
-		t2 = /* @__PURE__ */ jsxs("div", {
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== t1) {
+		t3 = /* @__PURE__ */ jsxs("div", {
 			className: "flex shrink-0 items-center gap-2 px-2",
 			onPointerEnter: prefetchCanvas,
 			onFocus: prefetchCanvas,
-			children: [t0, t1]
+			children: [t1, t2]
 		});
-		$[3] = t0;
-		$[4] = t2;
-	} else t2 = $[4];
-	const t3 = viewportMode === "full" ? "desktop" : viewportMode;
-	let t4;
-	if ($[5] !== t3) {
-		t4 = /* @__PURE__ */ jsx(DeviceSelector, {
-			value: t3,
+		$[4] = t1;
+		$[5] = t3;
+	} else t3 = $[5];
+	const t4 = viewportMode === "full" ? "desktop" : viewportMode;
+	let t5;
+	if ($[6] !== t4) {
+		t5 = /* @__PURE__ */ jsx(DeviceSelector, {
+			value: t4,
 			desktopLabel: "Full view",
 			onValueChange: _temp4
 		});
-		$[5] = t3;
 		$[6] = t4;
-	} else t4 = $[6];
-	let t5;
-	if ($[7] !== isCanvasShown) {
-		t5 = /* @__PURE__ */ jsx(Button, {
+		$[7] = t5;
+	} else t5 = $[7];
+	let t6;
+	if ($[8] !== isCanvasShown) {
+		t6 = /* @__PURE__ */ jsx(Button, {
 			type: "button",
 			variant: "ghost",
 			size: "icon",
@@ -72,58 +78,61 @@ const PreviewToolbar = () => {
 			"aria-label": "Hide toolbar",
 			className: "text-muted-foreground"
 		});
-		$[7] = isCanvasShown;
-		$[8] = t5;
-	} else t5 = $[8];
-	let t6;
-	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
-		t6 = /* @__PURE__ */ jsx(X, {});
+		$[8] = isCanvasShown;
 		$[9] = t6;
 	} else t6 = $[9];
 	let t7;
-	if ($[10] !== t5) {
-		t7 = /* @__PURE__ */ jsx(Tooltip$1.TooltipTrigger, {
-			render: t5,
-			children: t6
-		});
-		$[10] = t5;
-		$[11] = t7;
-	} else t7 = $[11];
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(X, {});
+		$[10] = t7;
+	} else t7 = $[10];
 	let t8;
-	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
-		t8 = /* @__PURE__ */ jsx(Tooltip$1.TooltipContent, { children: "Hide toolbar" });
+	if ($[11] !== t6) {
+		t8 = /* @__PURE__ */ jsx(Tooltip$1.TooltipTrigger, {
+			render: t6,
+			children: t7
+		});
+		$[11] = t6;
 		$[12] = t8;
 	} else t8 = $[12];
 	let t9;
-	if ($[13] !== t7) {
-		t9 = /* @__PURE__ */ jsx("div", {
+	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = /* @__PURE__ */ jsx(Tooltip$1.TooltipContent, { children: "Hide toolbar" });
+		$[13] = t9;
+	} else t9 = $[13];
+	let t10;
+	if ($[14] !== t8) {
+		t10 = /* @__PURE__ */ jsx("div", {
 			className: "-ml-2 flex items-center gap-2",
-			children: /* @__PURE__ */ jsxs(Tooltip$1.Tooltip, { children: [t7, t8] })
+			children: /* @__PURE__ */ jsxs(Tooltip$1.Tooltip, { children: [t8, t9] })
 		});
-		$[13] = t7;
-		$[14] = t9;
-	} else t9 = $[14];
-	let t10;
-	if ($[15] !== t4 || $[16] !== t9) {
-		t10 = /* @__PURE__ */ jsxs("div", {
+		$[14] = t8;
+		$[15] = t10;
+	} else t10 = $[15];
+	let t11;
+	if ($[16] !== t10 || $[17] !== t5) {
+		t11 = /* @__PURE__ */ jsxs("div", {
 			className: "flex shrink-0 items-center gap-6 self-stretch",
-			children: [t4, t9]
+			children: [t5, t10]
 		});
-		$[15] = t4;
-		$[16] = t9;
-		$[17] = t10;
-	} else t10 = $[17];
-	let t11;
-	if ($[18] !== t10 || $[19] !== t2) {
-		t11 = /* @__PURE__ */ jsxs(FloatingToolbar, {
-			className: "fixed bottom-2 w-max justify-between gap-6 transition-none",
-			children: [t2, t10]
+		$[16] = t10;
+		$[17] = t5;
+		$[18] = t11;
+	} else t11 = $[18];
+	let t12;
+	if ($[19] !== t11 || $[20] !== t3) {
+		t12 = /* @__PURE__ */ jsxs("div", {
+			className: "pointer-events-none fixed bottom-2 left-1/2 z-30 flex -translate-x-1/2 flex-col items-center gap-2",
+			children: [t0, /* @__PURE__ */ jsxs(FloatingToolbar, {
+				className: "pointer-events-auto relative left-auto w-max translate-x-0 justify-between gap-6 transition-none",
+				children: [t3, t11]
+			})]
 		});
-		$[18] = t10;
-		$[19] = t2;
-		$[20] = t11;
-	} else t11 = $[20];
-	return t11;
+		$[19] = t11;
+		$[20] = t3;
+		$[21] = t12;
+	} else t12 = $[21];
+	return t12;
 };
 function _temp(state) {
 	return state.context.isToolbarHidden;