camox 0.47.0 → 0.51.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/preview/previewConstants.js

@@ -1,12 +1,6 @@
 //#region src/features/preview/previewConstants.ts
-const TOGGLE_CANVAS_SHORTCUT = {
-	key: "Enter",
-	withMeta: true
-};
-const SHOW_WHOLE_CANVAS_SHORTCUT = {
-	key: "Escape",
-	withMeta: true
-};
+const TOGGLE_CANVAS_SHORTCUT = "Mod+Enter";
+const SHOW_WHOLE_CANVAS_SHORTCUT = "Mod+Escape";
 
 //#endregion
 export { SHOW_WHOLE_CANVAS_SHORTCUT, TOGGLE_CANVAS_SHORTCUT };

package/dist/features/preview/usePreviewViewportActions.js

@@ -27,7 +27,7 @@ function _temp10() {
 			groupLabel: "Website",
 			checkIfAvailable: _temp,
 			execute: _temp2,
-			shortcut: { key: "m" }
+			shortcut: "M"
 		},
 		{
 			id: "set-viewport-full",

package/dist/features/provider/AuthenticatedCamoxProvider.js

@@ -1,13 +1,13 @@
 import { AuthContext, useAuthActions } from "../../lib/auth.js";
 import { useDraftScope } from "../../lib/draft-scope.js";
 import { reads, useReadQuery, useStudioCache } from "../../lib/studio-reads.js";
+import { useAdminShortcuts } from "./useAdminShortcuts.js";
 import { useApplyTheme, useThemeActions } from "../studio/useTheme.js";
 import { usePreviewPagesActions, useShowCanvasAction } from "../preview/CamoxPreview.js";
 import { useProjectRoom } from "../../lib/use-project-room.js";
 import { useNavbarActions } from "../studio/components/Navbar.js";
 import { draftNoticeMessage } from "../studio/draftNotice.js";
 import { CommandPalette, useCommandPaletteActions } from "./components/CommandPalette.js";
-import { useAdminShortcuts } from "./useAdminShortcuts.js";
 import { c } from "react/compiler-runtime";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/features/provider/components/CommandPalette.js

@@ -1,5 +1,5 @@
 import { actionsStore } from "../actionsStore.js";
-import { formatShortcut } from "../../../lib/utils.js";
+import { formatShortcut } from "../../../lib/shortcuts.js";
 import { studioStore } from "../../studio/studioStore.js";
 import { c } from "react/compiler-runtime";
 import * as React from "react";
@@ -249,10 +249,7 @@ function _temp7() {
 			groupLabel: "Invisible",
 			checkIfAvailable: _temp4,
 			execute: _temp5,
-			shortcut: {
-				key: "k",
-				withMeta: true
-			}
+			shortcut: "Mod+K"
 		}
 	});
 	return _temp6;

package/dist/features/provider/signInShortcut.js

@@ -1,5 +1,4 @@
 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";
 
@@ -28,7 +27,7 @@ function useSignInShortcut(enabled) {
 		t0 = () => {
 			if (!enabled) return;
 			const handleKeyDown = (event) => {
-				if (event.key !== TOGGLE_CANVAS_SHORTCUT.key || !(event.metaKey || event.ctrlKey)) return;
+				if (event.key !== "Enter" || !(event.metaKey || event.ctrlKey)) return;
 				if (event.altKey || event.shiftKey || event.defaultPrevented || isTyping()) return;
 				event.preventDefault();
 				signIn();

package/dist/features/provider/useAdminShortcuts.js

@@ -1,75 +1,69 @@
 import { actionsStore } from "./actionsStore.js";
 import { checkIfInputFocused } from "../../lib/utils.js";
 import { c } from "react/compiler-runtime";
-import * as React from "react";
 import { useSelector } from "@xstate/store-react";
+import { parseHotkey, useHotkeys } from "@tanstack/react-hotkeys";
 
 //#region src/features/provider/useAdminShortcuts.tsx
+/** Listens for the shortcuts of the actions in the actionsStore, on the Studio's window. */
+function useAdminShortcuts() {
+	useActionShortcuts(typeof window === "undefined" ? null : window);
+}
 /**
-* Hook that listens for global keyboard shortcuts defined in the actionsStore
+* Runs the first available action whose shortcut is pressed in `win`, which may be a preview
+* iframe's window. Shortcuts no available action claims leave the key to the page.
 */
-function useAdminShortcuts() {
-	const $ = c(3);
+function useActionShortcuts(win) {
+	const $ = c(4);
 	const actions = useSelector(actionsStore, _temp);
 	let t0;
 	let t1;
-	if ($[0] !== actions) {
-		t0 = () => {
-			const handleKeyDown = (event) => {
-				const matchingAction = actions.find((action) => {
-					if (!action.shortcut) return false;
-					if (!action.checkIfAvailable()) return false;
-					const { key, withMeta, withAlt, withShift } = action.shortcut;
-					return (withAlt && key.length === 1 && /[a-z]/i.test(key) ? event.code === `Key${key.toUpperCase()}` : key.toLowerCase() === event.key.toLowerCase()) && !!withMeta === (event.metaKey || event.ctrlKey) && !!withAlt === event.altKey && !!withShift === event.shiftKey;
-				});
-				if (!matchingAction) return;
-				const shortcut = matchingAction.shortcut;
-				if (checkIfInputFocused()) {
-					if (shortcut.key !== "Escape" && !shortcut.withMeta && !shortcut.withAlt) return;
-					if (shortcut.key === "Backspace") return;
-				}
-				event.preventDefault();
-				event.stopPropagation();
-				if (shortcut.key === "Escape" && checkIfInputFocused()) document.activeElement.blur();
-				matchingAction.execute();
-			};
-			const handleCapturedKeyDown = (event_0) => {
-				if (event_0.key === "Escape") return;
-				handleKeyDown(event_0);
-			};
-			const handleEscape = (event_1) => {
-				if (event_1.key !== "Escape" || event_1.defaultPrevented) return;
-				handleKeyDown(event_1);
-			};
-			const handleMessage = (event_2) => {
-				if (event_2.data?.type === "executeAction") {
-					const { actionId } = event_2.data;
-					const action_0 = actions.find((a) => a.id === actionId);
-					if (action_0) action_0.execute();
+	if ($[0] !== actions || $[1] !== win) {
+		const shortcuts = [...new Set(actions.flatMap(_temp2))];
+		t0 = useHotkeys;
+		t1 = win ? shortcuts.map((shortcut) => {
+			const { key, ctrl, meta, alt } = parseHotkey(shortcut);
+			const escape = key === "Escape";
+			return {
+				hotkey: shortcut,
+				callback: (event) => {
+					if (escape && event.defaultPrevented) return;
+					const action_0 = findAvailableAction(shortcut);
+					if (!action_0) return;
+					event.preventDefault();
+					event.stopPropagation();
+					if (escape && checkIfInputFocused(win.document)) win.document.activeElement.blur();
+					action_0.execute();
+				},
+				options: {
+					target: escape ? win : win.document,
+					capture: !escape,
+					ignoreInputs: key === "Backspace" || !ctrl && !meta && !alt && !escape,
+					preventDefault: false,
+					stopPropagation: false,
+					conflictBehavior: "allow"
 				}
 			};
-			document.addEventListener("keydown", handleCapturedKeyDown, true);
-			window.addEventListener("keydown", handleEscape);
-			window.addEventListener("message", handleMessage);
-			return () => {
-				document.removeEventListener("keydown", handleCapturedKeyDown, true);
-				window.removeEventListener("keydown", handleEscape);
-				window.removeEventListener("message", handleMessage);
-			};
-		};
-		t1 = [actions];
+		}) : [];
 		$[0] = actions;
-		$[1] = t0;
-		$[2] = t1;
+		$[1] = win;
+		$[2] = t0;
+		$[3] = t1;
 	} else {
-		t0 = $[1];
-		t1 = $[2];
+		t0 = $[2];
+		t1 = $[3];
 	}
-	React.useEffect(t0, t1);
+	t0(t1);
+}
+function _temp2(action) {
+	return action.shortcut ?? [];
 }
 function _temp(state) {
 	return state.context.actions;
 }
+function findAvailableAction(shortcut) {
+	return actionsStore.getSnapshot().context.actions.find((action) => action.shortcut === shortcut && action.checkIfAvailable());
+}
 
 //#endregion
-export { useAdminShortcuts };
+export { useActionShortcuts, useAdminShortcuts };

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

@@ -1,10 +1,12 @@
+import { LocaleView } from "../../lib/locale-path.js";
+import "../../core/layoutContext.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";
 import { QueryClient } from "@tanstack/react-query";
+import { Router } from "@camox/api-contract/router";
 import { RouterClient } from "@orpc/server";
 //#region src/features/routes/pageRuntime.d.ts
 type PageWithBlocks = Awaited<ReturnType<RouterClient<Router>["pages"]["getByPath"]>>;
@@ -14,6 +16,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 +52,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 {};