camox 0.44.0 → 0.45.0

package/dist/features/preview/EditablePageContent.js

@@ -1,3 +1,3 @@
 import { PageContent } from "./CamoxPreview.js";
 
-export {  };
+export { PageContent as EditablePageContent };

package/dist/features/preview/EditablePageExperience.js

@@ -1,39 +1,33 @@
-import { STUDIO_CONTENT_PATH } from "../studio/routes.js";
 import { CamoxPreview, PageContent } from "./CamoxPreview.js";
 import { CamoxContent } from "../content/CamoxContent.js";
 import { AuthenticatedCamoxProvider } from "../provider/AuthenticatedCamoxProvider.js";
 import { CamoxStudio } from "../studio/CamoxStudio.js";
-import { CompleteBlockEditingRuntimeProvider } from "../../core/editing/CompleteBlockEditingRuntime.js";
-import { DerivedPreview } from "./DerivedPreview.js";
 import "./EditablePageContent.js";
+import { CompleteBlockEditingRuntimeProvider } from "../../core/editing/CompleteBlockEditingRuntime.js";
 import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/features/preview/EditablePageExperience.tsx
 function EditablePageExperience(t0) {
-	const $ = c(7);
-	if ($[0] !== "3e64bef83d2f73cbe404213f4d6ec47e2fdb910abb8eeca9c10b0045de454f73") {
-		for (let $i = 0; $i < 7; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "3e64bef83d2f73cbe404213f4d6ec47e2fdb910abb8eeca9c10b0045de454f73";
-	}
-	const { camoxApp, input } = t0;
+	const $ = c(5);
+	const { input } = t0;
 	let t1;
-	if ($[1] !== camoxApp || $[2] !== input.derived || $[3] !== input.pathname || $[4] !== input.routeKind || $[5] !== input.source) {
-		t1 = /* @__PURE__ */ jsx(AuthenticatedCamoxProvider, { children: /* @__PURE__ */ jsx(CompleteBlockEditingRuntimeProvider, { children: input.routeKind ? /* @__PURE__ */ jsx(CamoxStudio, { children: input.pathname === STUDIO_CONTENT_PATH ? /* @__PURE__ */ jsx(CamoxContent, {}) : /* @__PURE__ */ jsx("div", {
+	if ($[0] !== input.canvasOnly || $[1] !== input.derived || $[2] !== input.routeKind || $[3] !== input.runtimeBasePath) {
+		t1 = /* @__PURE__ */ jsx(AuthenticatedCamoxProvider, { children: /* @__PURE__ */ jsx(CompleteBlockEditingRuntimeProvider, { children: input.routeKind ? /* @__PURE__ */ jsx(CamoxStudio, { children: input.routeKind === "studio-content" ? /* @__PURE__ */ jsx(CamoxContent, {}) : /* @__PURE__ */ jsx("div", {
 			className: "text-muted-foreground p-6 text-sm",
 			children: "Studio page not found"
-		}) }) : input.derived ? /* @__PURE__ */ jsx(DerivedPreview, {
-			camoxApp,
+		}) }) : /* @__PURE__ */ jsx(CamoxPreview, {
 			derived: input.derived,
-			source: input.source
-		}) : /* @__PURE__ */ jsx(CamoxPreview, { children: /* @__PURE__ */ jsx(PageContent, {}) }) }) });
-		$[1] = camoxApp;
-		$[2] = input.derived;
-		$[3] = input.pathname;
-		$[4] = input.routeKind;
-		$[5] = input.source;
-		$[6] = t1;
-	} else t1 = $[6];
+			canvasOnly: input.canvasOnly,
+			runtimeBasePath: input.runtimeBasePath,
+			children: /* @__PURE__ */ jsx(PageContent, {})
+		}) }) });
+		$[0] = input.canvasOnly;
+		$[1] = input.derived;
+		$[2] = input.routeKind;
+		$[3] = input.runtimeBasePath;
+		$[4] = t1;
+	} else t1 = $[4];
 	return t1;
 }
 

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

@@ -0,0 +1,270 @@
+import { useProjectUuid } from "../../../lib/auth.js";
+import { useCamoxApp } from "../../provider/components/CamoxAppContext.js";
+import { usePageBlocks } from "../../../lib/normalized-data.js";
+import { reads, useReadQuery, useStudioCache } from "../../../lib/studio-reads.js";
+import { blockMutations } from "../../../lib/queries.js";
+import { useLocalePath } from "../../../lib/view-locale.js";
+import { previewStore, sameEditingOwner } from "../previewStore.js";
+import { getGridNavigationIndex } from "./blockGridNavigation.js";
+import { BlockThumbnail } from "./BlockThumbnail.js";
+import { usePreviewedPage } from "../CamoxPreview.js";
+import * as React from "react";
+import { generateUuidv7 } from "@camox/api-contract/ids";
+import { generateKeyBetween } from "fractional-indexing";
+import { useSelector } from "@xstate/store-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMutation } from "@tanstack/react-query";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@camox/ui/dialog";
+import { Badge } from "@camox/ui/badge";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, commandFilter } from "@camox/ui/command";
+
+//#region src/features/preview/components/AddBlockDialog.tsx
+const AddBlockDialog = ({ focusCreatedBlock = true }) => {
+	const [highlightedValue, setHighlightedValue] = React.useState("");
+	const [search, setSearch] = React.useState("");
+	const [error, setError] = React.useState(null);
+	const submitting = React.useRef(false);
+	const mounted = React.useRef(false);
+	React.useEffect(() => {
+		mounted.current = true;
+		return () => {
+			mounted.current = false;
+		};
+	}, []);
+	const gridRef = React.useRef(null);
+	const dialog = useSelector(previewStore, (state) => state.context.addBlockDialog);
+	const studioCache = useStudioCache();
+	const projectUuid = useProjectUuid();
+	const pathname = useLocalePath();
+	const createBlock = useMutation({
+		...blockMutations.create(),
+		onMutate: (variables) => {
+			const edit = studioCache.edit();
+			const page = reads.pageStructure({
+				path: pathname,
+				projectUuid
+			});
+			const previousPage = edit.get(page);
+			if (!previousPage) return { edit };
+			const blockIds = previousPage.page.blockIds;
+			const pageBlocks = blockIds.map((id) => edit.get(reads.blockBundle(id))?.block).filter((b) => b != null);
+			const { afterPosition } = variables;
+			let position;
+			if (afterPosition == null) {
+				const lastBlock = pageBlocks[pageBlocks.length - 1];
+				position = generateKeyBetween(lastBlock?.position ?? null, null);
+			} else if (afterPosition === "") {
+				const firstBlock = pageBlocks[0];
+				position = generateKeyBetween(null, firstBlock?.position ?? null);
+			} else {
+				let afterIndex = -1;
+				for (let i = pageBlocks.length - 1; i >= 0; i--) if (String(pageBlocks[i].position) <= afterPosition) {
+					afterIndex = i;
+					break;
+				}
+				const nextBlock = afterIndex >= 0 ? pageBlocks[afterIndex + 1] : pageBlocks[0];
+				position = generateKeyBetween(afterIndex >= 0 ? pageBlocks[afterIndex].position : null, nextBlock?.position ?? null);
+			}
+			const now = Date.now();
+			const optimisticId = variables.id ?? generateUuidv7();
+			const optimisticBlock = {
+				id: optimisticId,
+				pageId: variables.pageId,
+				layoutId: null,
+				type: variables.type,
+				content: variables.content,
+				settings: variables.settings ?? null,
+				slot: null,
+				summary: "",
+				position,
+				createdAt: now,
+				updatedAt: now
+			};
+			edit.set(reads.blockBundle(optimisticId), {
+				block: optimisticBlock,
+				repeatableItems: [],
+				files: []
+			});
+			const insertIndex = pageBlocks.findIndex((b) => b.position > position);
+			const newBlockIds = [...blockIds];
+			if (insertIndex === -1) newBlockIds.push(optimisticId);
+			else newBlockIds.splice(insertIndex, 0, optimisticId);
+			edit.set(page, {
+				...previousPage,
+				page: {
+					...previousPage.page,
+					blockIds: newBlockIds
+				}
+			});
+			return { edit };
+		},
+		onError: (_error, _variables, context) => context?.edit.rollback(),
+		onSettled: (_data, _error, _variables, context) => context?.edit.settle()
+	});
+	const { data: project } = useReadQuery(reads.project({ projectUuid }));
+	const availableBlocks = useCamoxApp().getBlocks().filter((b) => !b._internal.layoutOnly);
+	const page = usePreviewedPage();
+	const { pageBlocks } = usePageBlocks(page);
+	const { data: totalCounts = {} } = useReadQuery(reads.blockUsageCounts({ projectId: project?.id ?? 0 }), { enabled: !!project });
+	const filteredBlocks = availableBlocks.map((block) => ({
+		block,
+		score: search.trim() ? commandFilter(block._internal.id, search.trim(), [block._internal.title, block._internal.description ?? ""]) : 1
+	})).filter(({ score }) => score > 0).sort((a, b) => b.score - a.score || (totalCounts[b.block._internal.id] ?? 0) - (totalCounts[a.block._internal.id] ?? 0)).map(({ block }) => block);
+	const selectedValue = filteredBlocks.some((block) => block._internal.id === highlightedValue) ? highlightedValue : filteredBlocks[0]?._internal.id ?? "";
+	const pageCounts = React.useMemo(() => {
+		const counts = {};
+		if (!page) return counts;
+		for (const block of pageBlocks) counts[block.type] = (counts[block.type] ?? 0) + 1;
+		return counts;
+	}, [page, pageBlocks]);
+	const [previousDialog, setPreviousDialog] = React.useState(dialog);
+	if (dialog !== previousDialog) {
+		setPreviousDialog(dialog);
+		setHighlightedValue("");
+		setSearch("");
+		setError(null);
+	}
+	const handleAddBlock = async (block) => {
+		if (!page || !dialog || submitting.current) return;
+		submitting.current = true;
+		setError(null);
+		const owner = {
+			kind: "page",
+			pageId: page.page.id
+		};
+		try {
+			const bundle = block._internal.getInitialBundle();
+			const { id: blockId } = await createBlock.mutateAsync({
+				id: generateUuidv7(),
+				pageId: page.page.id,
+				type: block._internal.id,
+				content: bundle.content,
+				settings: bundle.settings,
+				afterPosition: dialog.afterPosition,
+				repeatableItems: bundle.repeatableItems
+			});
+			const context = previewStore.getSnapshot().context;
+			if (!mounted.current) return;
+			if (focusCreatedBlock && !sameEditingOwner(context.editingContext, owner)) return;
+			if (context.addBlockDialog !== dialog) return;
+			previewStore.send({ type: "closeAddBlockDialog" });
+			if (focusCreatedBlock) previewStore.send({
+				type: "focusCreatedBlock",
+				...owner,
+				blockId
+			});
+		} catch {
+			if (previewStore.getSnapshot().context.addBlockDialog === dialog) setError("Could not add this block. Please try again.");
+		} finally {
+			submitting.current = false;
+		}
+	};
+	const displayCount = (blockId) => {
+		const total = totalCounts[blockId] ?? 0;
+		if (total === 0) return "Never used";
+		const page = pageCounts[blockId] ?? "none";
+		return `${total} use${total > 1 ? "s" : ""} (${page} here)`;
+	};
+	return /* @__PURE__ */ jsx(Dialog, {
+		open: dialog != null,
+		onOpenChange: (open) => {
+			if (!open && !submitting.current) previewStore.send({ type: "closeAddBlockDialog" });
+		},
+		children: /* @__PURE__ */ jsxs(DialogContent, {
+			className: "flex h-[min(85dvh,900px)] flex-col gap-4 overflow-hidden sm:max-w-6xl",
+			children: [
+				/* @__PURE__ */ jsxs(DialogHeader, {
+					className: "pr-8",
+					children: [/* @__PURE__ */ jsx(DialogTitle, { children: "Add a block" }), /* @__PURE__ */ jsx(DialogDescription, { children: "Search blocks, use the arrow keys to browse, and press Enter to add." })]
+				}),
+				/* @__PURE__ */ jsxs(Command, {
+					label: "Search blocks",
+					shouldFilter: false,
+					value: selectedValue,
+					onValueChange: setHighlightedValue,
+					className: "h-0 min-h-0 flex-1 rounded-none! bg-transparent! p-0!",
+					onKeyDown: (e) => {
+						if (e.nativeEvent.isComposing || e.altKey || e.ctrlKey || e.metaKey) return;
+						if (![
+							"ArrowLeft",
+							"ArrowRight",
+							"ArrowUp",
+							"ArrowDown"
+						].includes(e.key)) return;
+						e.preventDefault();
+						const grid = gridRef.current?.querySelector("[cmdk-group-items]");
+						if (!grid || submitting.current) return;
+						const items = Array.from(grid.querySelectorAll("[cmdk-item]:not([data-disabled=\"true\"])"));
+						const columns = getComputedStyle(grid).gridTemplateColumns.split(" ").length;
+						const index = items.findIndex((item) => item.dataset.selected === "true");
+						const item = items[getGridNavigationIndex(index, items.length, columns, e.key)];
+						if (!item) return;
+						setHighlightedValue(item.dataset.value ?? "");
+						item.scrollIntoView({ block: "nearest" });
+					},
+					children: [/* @__PURE__ */ jsx(CommandInput, {
+						placeholder: "Search blocks...",
+						"aria-label": "Search blocks",
+						value: search,
+						onValueChange: (value) => {
+							setSearch(value);
+							setHighlightedValue("");
+						},
+						className: "px-0 pt-0",
+						autoFocus: true
+					}), /* @__PURE__ */ jsxs(CommandList, {
+						label: "Available blocks",
+						className: "mt-4 max-h-none min-h-0 flex-1 pb-2",
+						"aria-busy": createBlock.isPending,
+						children: [/* @__PURE__ */ jsx(CommandEmpty, { children: "No blocks found." }), /* @__PURE__ */ jsx(CommandGroup, {
+							ref: gridRef,
+							className: "p-0 [&>[cmdk-group-items]]:grid [&>[cmdk-group-items]]:grid-cols-1 [&>[cmdk-group-items]]:gap-4 sm:[&>[cmdk-group-items]]:grid-cols-2 lg:[&>[cmdk-group-items]]:grid-cols-3",
+							children: filteredBlocks.map((block) => /* @__PURE__ */ jsxs(CommandItem, {
+								value: block._internal.id,
+								keywords: [block._internal.title, block._internal.description ?? ""],
+								disabled: createBlock.isPending,
+								hideCheck: true,
+								onSelect: () => {
+									handleAddBlock(block);
+								},
+								className: "group bg-card data-[selected=true]:border-primary flex flex-col items-stretch gap-0 overflow-hidden rounded-lg border-2 p-0",
+								children: [/* @__PURE__ */ jsx(BlockThumbnail, {
+									block,
+									className: "h-44"
+								}), /* @__PURE__ */ jsxs("div", {
+									className: "border-border flex flex-col gap-1 border-t px-3 py-2",
+									children: [/* @__PURE__ */ jsxs("div", {
+										className: "flex items-center justify-between gap-2",
+										children: [/* @__PURE__ */ jsx("span", {
+											className: "min-w-0 leading-5 font-medium",
+											children: block._internal.title
+										}), block._internal.synced && /* @__PURE__ */ jsx(Badge, {
+											variant: "secondary",
+											size: "sm",
+											children: "Synced"
+										})]
+									}), /* @__PURE__ */ jsx("span", {
+										className: "text-muted-foreground text-xs leading-4",
+										children: displayCount(block._internal.id)
+									})]
+								})]
+							}, block._internal.id))
+						})]
+					})]
+				}),
+				createBlock.isPending && /* @__PURE__ */ jsx("p", {
+					role: "status",
+					children: "Adding block…"
+				}),
+				error && /* @__PURE__ */ jsx("p", {
+					role: "alert",
+					className: "text-destructive",
+					children: error
+				})
+			]
+		})
+	});
+};
+
+//#endregion
+export { AddBlockDialog };