camox 0.46.0 → 0.48.0

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

@@ -3,6 +3,7 @@ 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 { titleField } from "../../../core/recordItem.js";
 import { useCollectionItemSheet } from "../../content/CollectionItemSheetContext.js";
 import { referencePickerFocus, useReferencePickerFocusRequested } from "../referencePickerFocus.js";
 import { DrillRow } from "./DrillRow.js";
@@ -119,8 +120,8 @@ function QueryResultCard(t0) {
 	return t2;
 }
 function SortableRecordCard(t0) {
-	const $ = c(31);
-	const { id, label, collectionTitle, onOpen, onUnlink, hover } = t0;
+	const $ = c(32);
+	const { id, label, description, collectionTitle, onOpen, onUnlink, hover } = t0;
 	let t1;
 	if ($[0] !== id) {
 		t1 = { id };
@@ -214,23 +215,25 @@ function SortableRecordCard(t0) {
 		$[19] = t11;
 	} else t11 = $[19];
 	let t12;
-	if ($[20] !== collectionTitle || $[21] !== label || $[22] !== onOpen || $[23] !== t11 || $[24] !== t6) {
+	if ($[20] !== collectionTitle || $[21] !== description || $[22] !== label || $[23] !== onOpen || $[24] !== t11 || $[25] !== t6) {
 		t12 = /* @__PURE__ */ jsx(RecordCard, {
 			label,
+			description,
 			collectionTitle,
 			onOpen,
 			leading: t6,
 			actions: t11
 		});
 		$[20] = collectionTitle;
-		$[21] = label;
-		$[22] = onOpen;
-		$[23] = t11;
-		$[24] = t6;
-		$[25] = t12;
-	} else t12 = $[25];
+		$[21] = description;
+		$[22] = label;
+		$[23] = onOpen;
+		$[24] = t11;
+		$[25] = t6;
+		$[26] = t12;
+	} else t12 = $[26];
 	let t13;
-	if ($[26] !== hoverHandlers || $[27] !== setNodeRef || $[28] !== t12 || $[29] !== t4) {
+	if ($[27] !== hoverHandlers || $[28] !== setNodeRef || $[29] !== t12 || $[30] !== t4) {
 		t13 = /* @__PURE__ */ jsx("li", {
 			ref: setNodeRef,
 			...hoverHandlers,
@@ -238,12 +241,12 @@ function SortableRecordCard(t0) {
 			className: "min-w-0",
 			children: t12
 		});
-		$[26] = hoverHandlers;
-		$[27] = setNodeRef;
-		$[28] = t12;
-		$[29] = t4;
-		$[30] = t13;
-	} else t13 = $[30];
+		$[27] = hoverHandlers;
+		$[28] = setNodeRef;
+		$[29] = t12;
+		$[30] = t4;
+		$[31] = t13;
+	} else t13 = $[31];
 	return t13;
 }
 /**
@@ -317,7 +320,8 @@ function ReferenceListFieldEditor({ collectionId, fieldId, value, maxItems, quer
 			}), 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,
+					label: record.title,
+					description: record.description,
 					collectionTitle,
 					onOpen: onOpenRecord ? () => onOpenRecord(record.id) : void 0,
 					hover: entryHover(recordHover, record.id)
@@ -370,7 +374,8 @@ function ReferenceListFieldEditor({ collectionId, fieldId, value, maxItems, quer
 							const hydrated = hydratedRecords.find((record) => record.id === id);
 							return /* @__PURE__ */ jsx(SortableRecordCard, {
 								id,
-								label: summary?.label ?? hydrated?.label ?? "Unavailable item",
+								label: summary?.title ?? hydrated?.title ?? "Unavailable item",
+								description: summary ? summary.description : hydrated?.description,
 								collectionTitle,
 								onOpen: onOpenRecord ? () => onOpenRecord(id) : void 0,
 								onUnlink: () => change(ids.filter((linked) => linked !== id)),
@@ -400,7 +405,7 @@ function ReferenceListFieldEditor({ collectionId, fieldId, value, maxItems, quer
 					label: "Create item",
 					onSelect: (search) => sheet.open({
 						collectionId,
-						initialContent: collection && search.trim() ? { [collection._internal.label]: search } : void 0,
+						initialContent: collection && search.trim() && titleField(collection._internal.toTitle) ? { [titleField(collection._internal.toTitle)]: search } : void 0,
 						onSaved: (created) => save([...ids, created.id])
 					})
 				} : void 0

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

@@ -3,6 +3,7 @@ import { repeatableItemMutations } from "../../../lib/queries.js";
 import { previewStore, selectionItemId } from "../previewStore.js";
 import { useEditingFrame } from "../editingFrame.js";
 import { PreviewEditingOwnerContext, usePreviewTargetSelection } from "../previewSelection.js";
+import { entityName } from "../entityName.js";
 import { useRepeatableItemActions } from "./useRepeatableItemActions.js";
 import { c } from "react/compiler-runtime";
 import { useContext } from "react";
@@ -18,7 +19,7 @@ import { CSS } from "@dnd-kit/utilities";
 
 //#region src/features/preview/components/RepeatableItemsList.tsx
 const SortableRepeatableItem = (t0) => {
-	const $ = c(47);
+	const $ = c(53);
 	const { item, fieldName, blockId, canRemove, onRemove } = t0;
 	const owner = useContext(PreviewEditingOwnerContext);
 	let t1;
@@ -113,9 +114,17 @@ const SortableRepeatableItem = (t0) => {
 		$[23] = listeners;
 		$[24] = t13;
 	} else t13 = $[24];
-	let t14;
-	if ($[25] !== blockId || $[26] !== handleMouseLeave || $[27] !== item.id || $[28] !== owner) {
-		t14 = () => {
+	const t14 = `${fieldName} (${item.id})`;
+	let t15;
+	if ($[25] !== item || $[26] !== t14) {
+		t15 = entityName(item, t14);
+		$[25] = item;
+		$[26] = t14;
+		$[27] = t15;
+	} else t15 = $[27];
+	let t16;
+	if ($[28] !== blockId || $[29] !== handleMouseLeave || $[30] !== item.id || $[31] !== owner) {
+		t16 = () => {
 			if (owner === null) return;
 			handleMouseLeave();
 			previewStore.send({
@@ -125,32 +134,39 @@ const SortableRepeatableItem = (t0) => {
 				itemId: item.id
 			});
 		};
-		$[25] = blockId;
-		$[26] = handleMouseLeave;
-		$[27] = item.id;
-		$[28] = owner;
-		$[29] = t14;
-	} else t14 = $[29];
-	const t15 = item.summary || `${fieldName} (${item.id})`;
-	let t16;
-	if ($[30] !== item.summary || $[31] !== t14 || $[32] !== t15) {
-		t16 = /* @__PURE__ */ jsx("div", {
+		$[28] = blockId;
+		$[29] = handleMouseLeave;
+		$[30] = item.id;
+		$[31] = owner;
+		$[32] = t16;
+	} else t16 = $[32];
+	const t17 = `${fieldName} (${item.id})`;
+	let t18;
+	if ($[33] !== item || $[34] !== t17) {
+		t18 = entityName(item, t17);
+		$[33] = item;
+		$[34] = t17;
+		$[35] = t18;
+	} else t18 = $[35];
+	let t19;
+	if ($[36] !== t15 || $[37] !== t16 || $[38] !== t18) {
+		t19 = /* @__PURE__ */ jsx("div", {
 			className: "flex flex-1 items-center gap-1 overflow-x-hidden",
 			children: /* @__PURE__ */ jsx("p", {
 				className: "flex-1 cursor-default truncate py-1 text-sm",
-				title: item.summary,
-				onClick: t14,
-				children: t15
+				title: t15,
+				onClick: t16,
+				children: t18
 			})
 		});
-		$[30] = item.summary;
-		$[31] = t14;
-		$[32] = t15;
-		$[33] = t16;
-	} else t16 = $[33];
-	let t17;
-	if ($[34] !== canRemove || $[35] !== item.id || $[36] !== onRemove) {
-		t17 = canRemove && /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		$[36] = t15;
+		$[37] = t16;
+		$[38] = t18;
+		$[39] = t19;
+	} else t19 = $[39];
+	let t20;
+	if ($[40] !== canRemove || $[41] !== item.id || $[42] !== onRemove) {
+		t20 = canRemove && /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
 			render: /* @__PURE__ */ jsx(Button, {
 				type: "button",
 				variant: "ghost",
@@ -166,14 +182,14 @@ const SortableRepeatableItem = (t0) => {
 			side: "right",
 			children: "Remove item"
 		})] });
-		$[34] = canRemove;
-		$[35] = item.id;
-		$[36] = onRemove;
-		$[37] = t17;
-	} else t17 = $[37];
-	let t18;
-	if ($[38] !== handleMouseEnter || $[39] !== handleMouseLeave || $[40] !== setNodeRef || $[41] !== style || $[42] !== t11 || $[43] !== t13 || $[44] !== t16 || $[45] !== t17) {
-		t18 = /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("div", {
+		$[40] = canRemove;
+		$[41] = item.id;
+		$[42] = onRemove;
+		$[43] = t20;
+	} else t20 = $[43];
+	let t21;
+	if ($[44] !== handleMouseEnter || $[45] !== handleMouseLeave || $[46] !== setNodeRef || $[47] !== style || $[48] !== t11 || $[49] !== t13 || $[50] !== t19 || $[51] !== t20) {
+		t21 = /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("div", {
 			ref: setNodeRef,
 			style,
 			className: t11,
@@ -181,21 +197,21 @@ const SortableRepeatableItem = (t0) => {
 			onMouseLeave: handleMouseLeave,
 			children: [
 				t13,
-				t16,
-				t17
+				t19,
+				t20
 			]
 		}) });
-		$[38] = handleMouseEnter;
-		$[39] = handleMouseLeave;
-		$[40] = setNodeRef;
-		$[41] = style;
-		$[42] = t11;
-		$[43] = t13;
-		$[44] = t16;
-		$[45] = t17;
-		$[46] = t18;
-	} else t18 = $[46];
-	return t18;
+		$[44] = handleMouseEnter;
+		$[45] = handleMouseLeave;
+		$[46] = setNodeRef;
+		$[47] = style;
+		$[48] = t11;
+		$[49] = t13;
+		$[50] = t19;
+		$[51] = t20;
+		$[52] = t21;
+	} else t21 = $[52];
+	return t21;
 };
 const RepeatableItemsList = (t0) => {
 	const $ = c(24);

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

@@ -9,6 +9,7 @@ import { editorAssetField } from "../../content/collection-form.js";
 import { isBlockPlacement, previewStore, recordPlacement, selectionBlockId, selectionField, selectionForOwner, selectionItemId } from "../previewStore.js";
 import { useEditingFrame } from "../editingFrame.js";
 import { PreviewEditingOwnerContext } from "../previewSelection.js";
+import { entityName } from "../entityName.js";
 import { fieldTypesDictionary } from "../../../core/lib/fieldTypes.js";
 import { selectionHoverMessage } from "../overlayMessages.js";
 import { usePageRecordPlacer } from "../pageRecord.js";
@@ -605,7 +606,7 @@ const SelectionEditorContent = (t0) => {
 		})
 	}, {
 		key: `item-${ancestor.id}`,
-		label: ancestor.summary || "Item",
+		label: entityName(ancestor, "Item"),
 		hoverTarget: {
 			type: "item",
 			blockId: block_0.id,
@@ -685,7 +686,7 @@ const SelectionEditorContent = (t0) => {
 				]
 			}), item.onClick ? /* @__PURE__ */ jsx("button", {
 				type: "button",
-				className: cn("hover:text-foreground flex h-7 min-w-0 cursor-pointer items-center truncate text-left transition-colors", item.isCurrent && "text-foreground font-medium"),
+				className: cn("hover:text-foreground block h-7 max-w-full cursor-pointer truncate text-left leading-7 transition-colors", item.isCurrent && "text-foreground font-medium"),
 				onClick: item.onClick,
 				children: item.label
 			}) : /* @__PURE__ */ jsx("span", {

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

@@ -2,8 +2,8 @@ import { useProjectUuid } from "../../../lib/auth.js";
 import { useCamoxApp } from "../../provider/components/CamoxAppContext.js";
 import { referenceList } from "../../../lib/normalized-data.js";
 import { reads, useStudioCache } from "../../../lib/studio-reads.js";
-import { lexicalStateToPlainText } from "../../../core/lib/lexicalState.js";
 import { referenceListIds } from "../../../core/lib/reference.js";
+import { recordText } from "../../../core/recordItem.js";
 import { blockMutations, collectionMutations, repeatableItemMutations } from "../../../lib/queries.js";
 import { invalidateCollectionRecordViews } from "../../../lib/collection-cache.js";
 import { serializeAssetField } from "../../content/collection-form.js";
@@ -134,13 +134,11 @@ function useFieldWriter(target, schema) {
 						collectionId,
 						id: recordId
 					}));
-					const labelField = camoxApp.getCollectionById(collectionId)?._internal.label;
-					const label = labelField ? record_0.content[labelField] : void 0;
 					return {
 						id: record_0.id,
 						collectionId,
 						content: record_0.content,
-						label: typeof label === "string" ? lexicalStateToPlainText(label) : ""
+						...recordText(camoxApp.getCollectionById(collectionId), record_0.content)
 					};
 				};
 				return (async () => {

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

@@ -302,7 +302,7 @@ function useRecordView(t0) {
 				})
 			}] : [], {
 				key: "record",
-				label: outerRecord.label,
+				label: outerRecord.title,
 				isCurrent: !nested && !fieldHasOwnView,
 				hoverTarget: outerTarget,
 				onClick: nested || fieldHasOwnView ? () => previewStore.send({
@@ -332,7 +332,7 @@ function useRecordView(t0) {
 				},
 				{
 					key: "nested-record",
-					label: recordView.record.label,
+					label: recordView.record.title,
 					isCurrent: !fieldHasOwnView,
 					hoverTarget: nestedTarget,
 					onClick: fieldHasOwnView ? () => previewStore.send({

package/dist/features/preview/entityName.js

@@ -0,0 +1,11 @@
+//#region src/features/preview/entityName.ts
+/**
+* What the studio names a block or repeatable item by: its Summary, generated or hand-written,
+* else its title, from its definition's `toTitle` on default-locale content, else `fallback`.
+*/
+function entityName(entity, fallback) {
+	return entity.summary || entity.title || fallback;
+}
+
+//#endregion
+export { entityName };

package/dist/features/preview/pageRecord.js

@@ -157,32 +157,31 @@ function usePageRecordPlacer() {
 	const app = useCamoxApp();
 	const collection = loaded ? app.getCollectionById(loaded.collectionId) : void 0;
 	const collectionId = loaded?.collectionId ?? "";
-	const t0 = collection?._internal.label ?? "";
-	const t1 = collection ? loaded?.data : void 0;
-	let t2;
-	if ($[0] !== collectionId || $[1] !== t0 || $[2] !== t1) {
-		t2 = {
+	const t0 = collection ? loaded?.data : void 0;
+	let t1;
+	if ($[0] !== collection || $[1] !== collectionId || $[2] !== t0) {
+		t1 = {
 			collectionId,
-			labelField: t0,
-			loaded: t1
+			collection,
+			loaded: t0
 		};
-		$[0] = collectionId;
-		$[1] = t0;
-		$[2] = t1;
-		$[3] = t2;
-	} else t2 = $[3];
-	const record = useLatestRecord(t2);
-	let t3;
+		$[0] = collection;
+		$[1] = collectionId;
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	const record = useLatestRecord(t1);
+	let t2;
 	if ($[4] !== collectionId || $[5] !== record) {
-		t3 = record ? {
+		t2 = record ? {
 			collectionId,
 			record
 		} : null;
 		$[4] = collectionId;
 		$[5] = record;
-		$[6] = t3;
-	} else t3 = $[6];
-	return t3;
+		$[6] = t2;
+	} else t2 = $[6];
+	return t2;
 }
 
 //#endregion

package/dist/features/provider/CamoxProvider.js

@@ -1,17 +1,17 @@
 import { useSignInRedirect } from "../../lib/auth.js";
 import { useLocation } from "../navigation/navigation.js";
+import { useSignInShortcut } from "./signInShortcut.js";
 import { STUDIO_BASE_PATH } from "../studio/routes.js";
 import { AuthGate } from "../../components/AuthGate.js";
 import { AuthenticatedCamoxProvider } from "./AuthenticatedCamoxProvider.js";
-import { CoreCamoxProvider, isLocalhostPreview } from "./CoreCamoxProvider.js";
-import { LocalhostPreviewProvider } from "./LocalhostPreviewProvider.js";
+import { CoreCamoxProvider } from "./CoreCamoxProvider.js";
 import { c } from "react/compiler-runtime";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/features/provider/CamoxProvider.tsx
 function UnauthenticatedExperience(t0) {
-	const $ = c(12);
+	const $ = c(10);
 	const { children } = t0;
 	const { pathname } = useLocation();
 	let t1;
@@ -48,25 +48,17 @@ function UnauthenticatedExperience(t0) {
 		t4 = $[7];
 	}
 	React.useEffect(t3, t4);
+	useSignInShortcut(!isStudio);
 	if (isStudio) return null;
-	if (isLocalhostPreview()) {
-		let t5;
-		if ($[8] !== children) {
-			t5 = /* @__PURE__ */ jsx(LocalhostPreviewProvider, { children });
-			$[8] = children;
-			$[9] = t5;
-		} else t5 = $[9];
-		return t5;
-	}
 	let t5;
-	if ($[10] !== children) {
+	if ($[8] !== children) {
 		t5 = /* @__PURE__ */ jsx("div", {
 			className: "bg-background min-h-screen",
 			children
 		});
-		$[10] = children;
-		$[11] = t5;
-	} else t5 = $[11];
+		$[8] = children;
+		$[9] = t5;
+	} else t5 = $[9];
 	return t5;
 }
 function CamoxProvider(props) {

package/dist/features/provider/CoreCamoxProvider.js

@@ -9,11 +9,6 @@ import { jsx } from "react/jsx-runtime";
 import { replaceEqualDeep, useQueryClient } from "@tanstack/react-query";
 
 //#region src/features/provider/CoreCamoxProvider.tsx
-function isLocalhostPreview() {
-	if (typeof window === "undefined") return false;
-	const { hostname } = window.location;
-	return hostname === "localhost" || hostname.endsWith(".localhost") || hostname === "127.0.0.1" || hostname === "[::1]" || hostname === "::1";
-}
 function CoreCamoxProvider({ apiUrl, authenticationUrl, camoxApp, children, projectUuid, initialAuthenticated = false, initialProject }) {
 	const queryClient = useQueryClient();
 	const authClient = React.useMemo(() => createCamoxAuthClient(apiUrl), [apiUrl]);
@@ -94,4 +89,4 @@ function createWindowDraftScope(queryClient) {
 }
 
 //#endregion
-export { CoreCamoxProvider, isLocalhostPreview };
+export { CoreCamoxProvider };

package/dist/features/provider/signInShortcut.js

@@ -0,0 +1,60 @@
+import { useSignInRedirect } from "../../lib/auth.js";
+import { TOGGLE_CANVAS_SHORTCUT } from "../preview/previewConstants.js";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+
+//#region src/features/provider/signInShortcut.ts
+/** Marks the URL a sign-in returns to, so the Studio opens on the Canvas there. */
+const SHOW_CANVAS_PARAM = "camox-show-canvas";
+function showCanvasCallbackHref() {
+	const url = new URL(window.location.href);
+	url.searchParams.set(SHOW_CANVAS_PARAM, "");
+	return url.href;
+}
+function isTyping() {
+	const element = document.activeElement;
+	return element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLElement && element.isContentEditable;
+}
+/**
+* While signed out, the shortcut that shows the Canvas signs in instead, then shows the Canvas
+* on the page it was pressed on. Fields keep it, since sites often submit forms with it.
+*/
+function useSignInShortcut(enabled) {
+	const $ = c(4);
+	const signIn = useSignInRedirect(showCanvasCallbackHref);
+	let t0;
+	let t1;
+	if ($[0] !== enabled || $[1] !== signIn) {
+		t0 = () => {
+			if (!enabled) return;
+			const handleKeyDown = (event) => {
+				if (event.key !== TOGGLE_CANVAS_SHORTCUT.key || !(event.metaKey || event.ctrlKey)) return;
+				if (event.altKey || event.shiftKey || event.defaultPrevented || isTyping()) return;
+				event.preventDefault();
+				signIn();
+			};
+			window.addEventListener("keydown", handleKeyDown);
+			return () => window.removeEventListener("keydown", handleKeyDown);
+		};
+		t1 = [enabled, signIn];
+		$[0] = enabled;
+		$[1] = signIn;
+		$[2] = t0;
+		$[3] = t1;
+	} else {
+		t0 = $[2];
+		t1 = $[3];
+	}
+	React.useEffect(t0, t1);
+}
+/** Whether a sign-in from the shortcut led here. Removes the mark, so it shows the Canvas once. */
+function takeShowCanvasRequest() {
+	const url = new URL(window.location.href);
+	if (!url.searchParams.has(SHOW_CANVAS_PARAM)) return false;
+	url.searchParams.delete(SHOW_CANVAS_PARAM);
+	window.history.replaceState(window.history.state, "", url);
+	return true;
+}
+
+//#endregion
+export { takeShowCanvasRequest, useSignInShortcut };

package/dist/features/routes/pageRuntime.d.ts

@@ -1,6 +1,7 @@
+import { LocaleView } from "../../lib/locale-path.js";
+import "../../core/structuredData.js";
 import "../../core/createLayout.js";
 import "../../core/createApp.js";
-import { LocaleView } from "../../lib/locale-path.js";
 import "../../lib/studio-reads.js";
 import { Router } from "@camox/api-contract";
 import { EndedDraft } from "@camox/api-contract/drafts";
@@ -14,6 +15,10 @@ export type PageStructure = {
   layout: PageWithBlocks["layout"];
   projectName: string;
   project: PageWithBlocks["project"];
+  /** Each block's Structured Data nodes, from a full read: a structure read has none. */
+  structuredData?: PageWithBlocks["structuredData"];
+  /** The nodes of the records its blocks reference, from a full read. */
+  recordStructuredData?: PageWithBlocks["recordStructuredData"];
 };
 /**
  * Why a member can't see the draft a URL names: it doesn't exist, it's someone else's
@@ -46,5 +51,14 @@ export declare function createServerApiClient(apiUrl: string, options?: {
   draftId?: string;
   locale?: LocaleView;
 }): RouterClient<Router>;
+export type PageHead = {
+  meta?: Array<Record<string, string>>;
+  links?: Array<Record<string, string>>;
+  /** Scripts with their text, such as the page's Structured Data. */
+  scripts?: Array<{
+    type: string;
+    text: string;
+  }>;
+};
 //#endregion
 export {};