camox 0.65.1 → 0.67.0

package/dist/features/canvas/sidebar/PageInspector.js

@@ -5,8 +5,7 @@ import { CanvasInspectorBody, CanvasInspectorTitle } from "./CanvasInspector.js"
 import { PageInspectorSkeleton } from "./PageInspectorSkeleton.js";
 import { PreviewEditingOwnerContext } from "../../preview/previewSelection.js";
 import { CuratedPageInspector } from "./CuratedPageInspector.js";
-import { DerivedPageInspector } from "./DerivedPageInspector.js";
-import { SingletonPageInspector } from "./SingletonPageInspector.js";
+import { LayoutPageOverview } from "./LayoutPageOverview.js";
 import { c } from "react/compiler-runtime";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -38,8 +37,8 @@ var PageInspectorBoundary = class extends React.Component {
 	}
 };
 function PageInspectorContent(t0) {
-	const $ = c(8);
-	const { page, pageRecord, runtimeBasePath } = t0;
+	const $ = c(12);
+	const { page, runtimeBasePath } = t0;
 	switch (page.kind) {
 		case "curated": {
 			let t1;
@@ -51,31 +50,45 @@ function PageInspectorContent(t0) {
 		}
 		case "singleton": {
 			let t1;
-			if ($[1] !== page.layoutId || $[2] !== runtimeBasePath) {
-				t1 = /* @__PURE__ */ jsx(SingletonPageInspector, {
+			if ($[1] !== runtimeBasePath) {
+				t1 = { runtimeBasePath };
+				$[1] = runtimeBasePath;
+				$[2] = t1;
+			} else t1 = $[2];
+			let t2;
+			if ($[3] !== page.layoutId || $[4] !== t1) {
+				t2 = /* @__PURE__ */ jsx(LayoutPageOverview, {
 					layoutId: page.layoutId,
-					runtimeBasePath
+					target: t1
 				});
-				$[1] = page.layoutId;
-				$[2] = runtimeBasePath;
-				$[3] = t1;
-			} else t1 = $[3];
-			return t1;
+				$[3] = page.layoutId;
+				$[4] = t1;
+				$[5] = t2;
+			} else t2 = $[5];
+			return t2;
 		}
 		case "derived": {
 			let t1;
-			if ($[4] !== page.layoutId || $[5] !== pageRecord || $[6] !== runtimeBasePath) {
-				t1 = /* @__PURE__ */ jsx(DerivedPageInspector, {
+			if ($[6] !== page.layoutId || $[7] !== runtimeBasePath) {
+				t1 = {
+					runtimeBasePath,
+					derivedLayoutId: page.layoutId
+				};
+				$[6] = page.layoutId;
+				$[7] = runtimeBasePath;
+				$[8] = t1;
+			} else t1 = $[8];
+			let t2;
+			if ($[9] !== page.layoutId || $[10] !== t1) {
+				t2 = /* @__PURE__ */ jsx(LayoutPageOverview, {
 					layoutId: page.layoutId,
-					pageRecord,
-					runtimeBasePath
+					target: t1
 				});
-				$[4] = page.layoutId;
-				$[5] = pageRecord;
-				$[6] = runtimeBasePath;
-				$[7] = t1;
-			} else t1 = $[7];
-			return t1;
+				$[9] = page.layoutId;
+				$[10] = t1;
+				$[11] = t2;
+			} else t2 = $[11];
+			return t2;
 		}
 	}
 }
@@ -85,8 +98,8 @@ function PageInspectorContent(t0) {
 * overview, and the name's header goes back to it.
 */
 function PageInspector(t0) {
-	const $ = c(27);
-	const { page, owner, pageRecord, runtimeBasePath } = t0;
+	const $ = c(26);
+	const { page, owner, runtimeBasePath } = t0;
 	const { pathname } = useLocation();
 	let t1;
 	if ($[0] !== owner) {
@@ -140,51 +153,49 @@ function PageInspector(t0) {
 		$[10] = t6;
 	} else t6 = $[10];
 	let t7;
-	if ($[11] !== page || $[12] !== pageRecord || $[13] !== runtimeBasePath) {
+	if ($[11] !== page || $[12] !== runtimeBasePath) {
 		t7 = /* @__PURE__ */ jsx(PageInspectorContent, {
 			page,
-			pageRecord,
 			runtimeBasePath
 		});
 		$[11] = page;
-		$[12] = pageRecord;
-		$[13] = runtimeBasePath;
-		$[14] = t7;
-	} else t7 = $[14];
+		$[12] = runtimeBasePath;
+		$[13] = t7;
+	} else t7 = $[13];
 	let t8;
-	if ($[15] !== t6 || $[16] !== t7) {
+	if ($[14] !== t6 || $[15] !== t7) {
 		t8 = /* @__PURE__ */ jsx(React.Suspense, {
 			fallback: t6,
 			children: t7
 		});
-		$[15] = t6;
-		$[16] = t7;
-		$[17] = t8;
-	} else t8 = $[17];
+		$[14] = t6;
+		$[15] = t7;
+		$[16] = t8;
+	} else t8 = $[16];
 	let t9;
-	if ($[18] !== t5 || $[19] !== t8) {
+	if ($[17] !== t5 || $[18] !== t8) {
 		t9 = /* @__PURE__ */ jsx(PageInspectorBoundary, { children: t8 }, t5);
-		$[18] = t5;
-		$[19] = t8;
-		$[20] = t9;
-	} else t9 = $[20];
+		$[17] = t5;
+		$[18] = t8;
+		$[19] = t9;
+	} else t9 = $[19];
 	let t10;
-	if ($[21] !== owner || $[22] !== t9) {
+	if ($[20] !== owner || $[21] !== t9) {
 		t10 = /* @__PURE__ */ jsx(CanvasInspectorBody, { children: /* @__PURE__ */ jsx(PreviewEditingOwnerContext, {
 			value: owner,
 			children: t9
 		}) });
-		$[21] = owner;
-		$[22] = t9;
-		$[23] = t10;
-	} else t10 = $[23];
+		$[20] = owner;
+		$[21] = t9;
+		$[22] = t10;
+	} else t10 = $[22];
 	let t11;
-	if ($[24] !== t10 || $[25] !== t4) {
+	if ($[23] !== t10 || $[24] !== t4) {
 		t11 = /* @__PURE__ */ jsxs(Fragment, { children: [t4, t10] });
-		$[24] = t10;
-		$[25] = t4;
-		$[26] = t11;
-	} else t11 = $[26];
+		$[23] = t10;
+		$[24] = t4;
+		$[25] = t11;
+	} else t11 = $[25];
 	return t11;
 }
 function _temp() {

package/dist/features/canvas/sidebar/PageInspectorSkeleton.js

@@ -61,14 +61,14 @@ function CuratedPageSkeleton() {
 	} else t0 = $[0];
 	return t0;
 }
-/** A layout page's blocks and notice. */
+/** A layout page's blocks. */
 function LayoutPageSkeleton() {
 	const $ = c(1);
 	let t0;
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = /* @__PURE__ */ jsx(LoadingPage, { children: /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-col gap-4 px-2 pt-4",
-			children: [/* @__PURE__ */ jsx(BlocksGroupSkeleton, {}), /* @__PURE__ */ jsx(Skeleton, { className: "h-20 w-full rounded-lg" })]
+		t0 = /* @__PURE__ */ jsx(LoadingPage, { children: /* @__PURE__ */ jsx("div", {
+			className: "px-2 pt-4",
+			children: /* @__PURE__ */ jsx(BlocksGroupSkeleton, {})
 		}) });
 		$[0] = t0;
 	} else t0 = $[0];

package/dist/features/canvas/useCanvasCamera.js

@@ -1,7 +1,7 @@
 import { canvasStore } from "./canvasStore.js";
 import { ViewportContinuityContext, captureViewportAnchor, resolveViewportAnchor } from "../preview/viewportContinuity.js";
 import { canvasPageIframe } from "../preview/previewPageFrame.js";
-import { canvasBlockOverlap } from "./canvasFrameDocument.js";
+import { canvasSeamCover } from "./canvasFrameDocument.js";
 import { revealScrollDelta } from "../preview/selectionReveal.js";
 import { CANVAS_WHEEL_ZOOM_RATE, ZOOM_STRETCH, canvasMaximumScale, canvasMinimumScale, canvasOverview, canvasVerticalRail, canvasWheelDelta, constrainCanvasCamera, findCanvasSnapTarget, fitCanvasPage, isCanvasCameraSnapped, isCanvasPageScale, isInCanvasSnapWindow, placeCanvasPageAnchor, snapCanvasZoom, stretchCanvasZoom, unstretchCanvasZoom, zoomCanvasAt } from "./canvasCamera.js";
 import { createCanvasFlight, createCanvasPan } from "./canvasFlight.js";
@@ -73,7 +73,7 @@ function useCanvasCamera(workspaceKey, initialTarget, row) {
 			for (const name of CAMERA_PROPERTIES) element.style.removeProperty(name);
 			delete element.dataset.canvasPan;
 			delete element.dataset.canvasPromoted;
-			delete element.dataset.canvasBlockOverlap;
+			delete element.dataset.canvasSeamCover;
 		};
 	}, []);
 	/**
@@ -289,10 +289,10 @@ function useCanvasCamera(workspaceKey, initialTarget, row) {
 		};
 		const paintAtRest = () => {
 			if (settle) return;
-			const overlap = String(canvasBlockOverlap(camera.scale, ownerWindow.devicePixelRatio));
+			const seamCover = String(canvasSeamCover(camera.scale, ownerWindow.devicePixelRatio));
 			const zoom = String(camera.scale);
 			for (const element of [viewport, ...mirrors.current]) {
-				if (element.dataset.canvasBlockOverlap !== overlap) element.dataset.canvasBlockOverlap = overlap;
+				if (element.dataset.canvasSeamCover !== seamCover) element.dataset.canvasSeamCover = seamCover;
 				if (element.style.getPropertyValue("--canvas-rest-zoom") !== zoom) element.style.setProperty("--canvas-rest-zoom", zoom);
 			}
 		};
@@ -426,6 +426,7 @@ function useCanvasCamera(workspaceKey, initialTarget, row) {
 			};
 			animation = requestAnimationFrame(animate);
 		};
+		let syncedTargets = targets();
 		flightControls.current = {
 			flyTo: startFlight,
 			reveal: (element, immediate) => {
@@ -451,6 +452,8 @@ function useCanvasCamera(workspaceKey, initialTarget, row) {
 			syncRow: () => {
 				const key = rowRef.current?.selected ?? null;
 				const destination = targetOf(key);
+				const previousTargets = syncedTargets;
+				syncedTargets = targets();
 				if (key !== requested) {
 					requested = key;
 					selection = key;
@@ -463,6 +466,20 @@ function useCanvasCamera(workspaceKey, initialTarget, row) {
 					else if (page.left !== flight.page.left || page.width !== flight.page.width) startFlight(page.key);
 					return;
 				}
+				const previous = previousTargets[syncedTargets.findIndex((candidate) => candidate.key === key)];
+				if (destination && previous?.key === key && previous.left !== destination.left && previous.width === destination.width && selection === key && !flight && isCanvasCameraSnapped(rest(target), viewportSize, previous)) {
+					updateGeometry();
+					const fit = fitCanvasPage(viewportSize, destination);
+					const next = {
+						...fit,
+						y: rescaleY(restoredCamera ?? target, fit.scale)
+					};
+					if (restoredCamera || fittingInitialPage) restoredCamera = next;
+					fittingInitialPage = false;
+					camera = constrain(camera, true);
+					applyCamera(next, true);
+					return;
+				}
 				if (destination && selection === key && !flight && !fittingInitialPage && !isCanvasCameraSnapped(rest(target), viewportSize, destination)) startFlight(destination.key);
 			},
 			fitAll: startOverviewFlight
@@ -771,7 +788,7 @@ function useCanvasCamera(workspaceKey, initialTarget, row) {
 			ownerWindow.removeEventListener("blur", releaseSpace);
 			delete viewport.dataset.canvasPan;
 			delete viewport.dataset.canvasPromoted;
-			delete viewport.dataset.canvasBlockOverlap;
+			delete viewport.dataset.canvasSeamCover;
 			paintMirror.current = null;
 		};
 	}, [workspaceKey, continuity]);

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