camox 0.0.0 → 0.1.2-alpha.2

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

@@ -0,0 +1,232 @@
+import { AssetLightbox } from "./AssetLightbox.js";
+import { AssetPickerGrid } from "./AssetPickerGrid.js";
+import { UnlinkAssetButton } from "./UnlinkAssetButton.js";
+import { AssetActionButtons } from "./AssetFieldEditor.js";
+import { api } from "camox/server/api";
+import { useMutation } from "convex/react";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useLocation } from "@tanstack/react-router";
+import { cn } from "@/lib/utils";
+import { Button } from "@camox/ui/button";
+import { FileIcon, GripVertical } from "lucide-react";
+import { UploadDropZone } from "@/features/content/components/UploadDropZone";
+import { useFileUpload } from "@/hooks/use-file-upload";
+import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
+import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
+import { SortableContext, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { generateKeyBetween } from "fractional-indexing";
+//#region src/features/preview/components/MultipleAssetFieldEditor.tsx
+var SortableAssetItem = ({ item, assetType, contentKey, onRemove, onAssetOpen }) => {
+	const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: item._id });
+	const style = {
+		transform: CSS.Transform.toString(transform),
+		transition,
+		opacity: isDragging ? .5 : 1
+	};
+	const asset = item.content?.[contentKey];
+	const url = asset?.url ?? "";
+	const alt = asset?.alt ?? "";
+	const filename = asset?.filename ?? "Untitled";
+	return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("div", {
+		ref: setNodeRef,
+		style,
+		className: cn("flex flex-row items-center gap-2 px-1 py-1 max-w-full rounded-lg text-foreground transition-none group", !isDragging && "hover:bg-accent/75"),
+		children: [
+			/* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "ghost",
+				size: "icon-sm",
+				className: "text-muted-foreground hover:text-foreground flex shrink-0 cursor-grab active:cursor-grabbing",
+				...attributes,
+				...listeners,
+				children: /* @__PURE__ */ jsx(GripVertical, { className: "h-4 w-4" })
+			}),
+			/* @__PURE__ */ jsxs("button", {
+				type: "button",
+				className: "flex min-w-0 flex-1 cursor-zoom-in items-center gap-2",
+				onClick: () => onAssetOpen(item),
+				children: [assetType === "Image" ? /* @__PURE__ */ jsx("div", {
+					className: "border-border h-12 w-12 shrink-0 overflow-hidden rounded border",
+					children: /* @__PURE__ */ jsx("img", {
+						src: url,
+						alt: alt || filename,
+						className: "h-full w-full object-cover"
+					})
+				}) : /* @__PURE__ */ jsx("div", {
+					className: "border-border bg-muted flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded border",
+					children: /* @__PURE__ */ jsx(FileIcon, { className: "text-muted-foreground h-6 w-6" })
+				}), /* @__PURE__ */ jsx("p", {
+					className: "flex-1 truncate text-left text-sm",
+					title: filename,
+					children: filename
+				})]
+			}),
+			/* @__PURE__ */ jsx(UnlinkAssetButton, {
+				fileId: asset?._fileId,
+				onUnlink: () => onRemove(item._id),
+				className: "hidden group-focus-within:flex group-hover:flex"
+			})
+		]
+	}) });
+};
+var MultipleAssetFieldEditor = ({ fieldName, assetType, currentData, blockId }) => {
+	const { pathname } = useLocation();
+	const contentKey = assetType === "Image" ? "image" : "file";
+	const isImage = assetType === "Image";
+	const fileInputRef = React.useRef(null);
+	const createItemMutation = useMutation(api.repeatableItems.createRepeatableItem);
+	const deleteItemMutation = useMutation(api.repeatableItems.deleteRepeatableItem);
+	const updatePositionMutation = useMutation(api.repeatableItems.updateRepeatableItemPosition).withOptimisticUpdate((localStore, args) => {
+		const currentPage = localStore.getQuery(api.pages.getPage, { fullPath: pathname });
+		if (!currentPage) return;
+		const updatedBlocks = currentPage.blocks.map((block) => {
+			if (!Object.entries(block.content).some(([_, value]) => {
+				if (Array.isArray(value)) return value.some((item) => item._id === args.itemId);
+				return false;
+			})) return block;
+			const updatedContent = { ...block.content };
+			for (const [fieldName, fieldValue] of Object.entries(block.content)) {
+				if (!Array.isArray(fieldValue)) continue;
+				const items = fieldValue;
+				const itemIndex = items.findIndex((item) => item._id === args.itemId);
+				if (itemIndex === -1) continue;
+				const item = items[itemIndex];
+				const newPosition = generateKeyBetween(args.afterPosition ?? null, args.beforePosition ?? null);
+				const updatedItem = {
+					...item,
+					position: newPosition
+				};
+				const newItems = [...items];
+				newItems[itemIndex] = updatedItem;
+				newItems.sort((a, b) => {
+					if (a.position < b.position) return -1;
+					if (a.position > b.position) return 1;
+					return 0;
+				});
+				updatedContent[fieldName] = newItems;
+			}
+			return {
+				...block,
+				content: updatedContent
+			};
+		});
+		localStore.setQuery(api.pages.getPage, { fullPath: pathname }, {
+			...currentPage,
+			blocks: updatedBlocks
+		});
+	});
+	const { uploads, uploadFiles } = useFileUpload({ onFileCommitted: (result) => {
+		createItemMutation({
+			blockId,
+			fieldName,
+			content: { [contentKey]: {
+				url: result.url,
+				alt: "",
+				filename: result.filename,
+				mimeType: result.mimeType,
+				_fileId: result.fileId
+			} }
+		});
+	} });
+	const items = (currentData[fieldName] ?? []).filter((item) => {
+		return !!(item.content?.[contentKey])?.url;
+	});
+	const [pickerOpen, setPickerOpen] = React.useState(false);
+	const [lightboxItem, setLightboxItem] = React.useState(null);
+	const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+	const handleDragEnd = async (event) => {
+		const { active, over } = event;
+		if (!over || active.id === over.id) return;
+		const dbItems = items;
+		const oldIndex = dbItems.findIndex((item) => item._id === active.id);
+		const newIndex = dbItems.findIndex((item) => item._id === over.id);
+		if (oldIndex === -1 || newIndex === -1) return;
+		let afterPosition;
+		let beforePosition;
+		if (oldIndex < newIndex) {
+			afterPosition = dbItems[newIndex].position;
+			beforePosition = newIndex < dbItems.length - 1 ? dbItems[newIndex + 1].position : void 0;
+		} else {
+			afterPosition = newIndex > 0 ? dbItems[newIndex - 1].position : void 0;
+			beforePosition = dbItems[newIndex].position;
+		}
+		await updatePositionMutation({
+			itemId: active.id,
+			afterPosition,
+			beforePosition
+		});
+	};
+	const handleRemove = (itemId) => {
+		deleteItemMutation({ itemId });
+	};
+	const handleAssetOpen = (item) => {
+		setLightboxItem(item);
+	};
+	const handleSelectMultiple = async (files) => {
+		for (const file of files) await createItemMutation({
+			blockId,
+			fieldName,
+			content: { [contentKey]: {
+				url: file.url,
+				alt: file.alt,
+				filename: file.filename,
+				mimeType: file.mimeType,
+				_fileId: file._id
+			} }
+		});
+		setPickerOpen(false);
+	};
+	return /* @__PURE__ */ jsxs(UploadDropZone, {
+		onDrop: uploadFiles,
+		children: [pickerOpen ? /* @__PURE__ */ jsx(AssetPickerGrid, {
+			assetType,
+			mode: "multiple",
+			onSelectSingle: () => {},
+			onSelectMultiple: handleSelectMultiple,
+			onClose: () => setPickerOpen(false)
+		}) : /* @__PURE__ */ jsxs("div", {
+			className: "space-y-4 px-4 py-4",
+			children: [items.length > 0 && /* @__PURE__ */ jsx(DndContext, {
+				sensors,
+				collisionDetection: closestCenter,
+				onDragEnd: handleDragEnd,
+				modifiers: [restrictToVerticalAxis],
+				children: /* @__PURE__ */ jsx(SortableContext, {
+					items: items.map((item) => item._id),
+					strategy: verticalListSortingStrategy,
+					children: /* @__PURE__ */ jsx("ul", {
+						className: "flex flex-col gap-1",
+						children: items.map((item) => /* @__PURE__ */ jsx(SortableAssetItem, {
+							item,
+							assetType,
+							contentKey,
+							onRemove: handleRemove,
+							onAssetOpen: handleAssetOpen
+						}, item._id))
+					})
+				})
+			}), /* @__PURE__ */ jsx(AssetActionButtons, {
+				isImage,
+				multiple: true,
+				fileInputRef,
+				onPickerOpen: () => setPickerOpen(true),
+				onFilesSelected: uploadFiles,
+				uploads
+			})]
+		}), (() => {
+			const asset = lightboxItem?.content?.[contentKey];
+			if (!asset?._fileId) return null;
+			return /* @__PURE__ */ jsx(AssetLightbox, {
+				open: !!lightboxItem,
+				onOpenChange: (open) => {
+					if (!open) setLightboxItem(null);
+				},
+				fileId: asset._fileId
+			});
+		})()]
+	});
+};
+//#endregion
+export { MultipleAssetFieldEditor };

package/dist/features/preview/components/OverlayTracker.d.ts

@@ -0,0 +1,6 @@
+/**
+ * OverlayTracker runs inside the iframe and handles:
+ * Listening for focus commands from parent (for sidebar-triggered focus)
+ */
+export declare const OverlayTracker: () => null;
+//# sourceMappingURL=OverlayTracker.d.ts.map

package/dist/features/preview/components/OverlayTracker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayTracker.d.ts","sourceRoot":"","sources":["../../../../src/features/preview/components/OverlayTracker.tsx"],"names":[],"mappings":"AAOA;;;GAGG;AACH,eAAO,MAAM,cAAc,YAoD1B,CAAC"}

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

@@ -0,0 +1,41 @@
+import { isOverlayMessage } from "../overlayMessages.js";
+import { previewStore } from "../previewStore.js";
+import { useFrame } from "@camox/ui/frame";
+import { useSelector } from "@xstate/store/react";
+import * as React from "react";
+//#region src/features/preview/components/OverlayTracker.tsx
+/**
+* OverlayTracker runs inside the iframe and handles:
+* Listening for focus commands from parent (for sidebar-triggered focus)
+*/
+var OverlayTracker = () => {
+	const { window: iframeWindow } = useFrame();
+	const isPageContentSheetOpen = useSelector(previewStore, (state) => state.context.isPageContentSheetOpen);
+	const isAddBlockSheetOpen = useSelector(previewStore, (state) => state.context.isAddBlockSheetOpen);
+	React.useEffect(() => {
+		if (!iframeWindow || !isAddBlockSheetOpen) return;
+		const handleClick = () => {
+			previewStore.send({ type: "exitPeekedBlock" });
+		};
+		iframeWindow.document.addEventListener("click", handleClick);
+		return () => iframeWindow.document.removeEventListener("click", handleClick);
+	}, [iframeWindow, isAddBlockSheetOpen]);
+	React.useEffect(() => {
+		if (!iframeWindow) return;
+		const handleMessage = (event) => {
+			if (!isOverlayMessage(event.data)) return;
+			const { type } = event.data;
+			if (type === "CAMOX_FOCUS_FIELD") {
+				if (isPageContentSheetOpen) return;
+				const { fieldId } = event.data;
+				const element = iframeWindow.document.querySelector(`[data-camox-field-id="${fieldId}"]`);
+				if (element) element.focus();
+			}
+		};
+		iframeWindow.addEventListener("message", handleMessage);
+		return () => iframeWindow.removeEventListener("message", handleMessage);
+	}, [iframeWindow, isPageContentSheetOpen]);
+	return null;
+};
+//#endregion
+export { OverlayTracker };

package/dist/features/preview/components/Overlays.d.ts

@@ -0,0 +1,6 @@
+interface OverlaysProps {
+    iframeElement: HTMLIFrameElement | null;
+}
+export declare const Overlays: ({ iframeElement }: OverlaysProps) => null;
+export {};
+//# sourceMappingURL=Overlays.d.ts.map

package/dist/features/preview/components/Overlays.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Overlays.d.ts","sourceRoot":"","sources":["../../../../src/features/preview/components/Overlays.tsx"],"names":[],"mappings":"AAOA,UAAU,aAAa;IACrB,aAAa,EAAE,iBAAiB,GAAG,IAAI,CAAC;CACzC;AAED,eAAO,MAAM,QAAQ,GAAI,mBAAmB,aAAa,SAgFxD,CAAC"}

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

@@ -0,0 +1,58 @@
+import { isOverlayMessage } from "../overlayMessages.js";
+import { previewStore } from "../previewStore.js";
+import { usePreviewedPage } from "../CamoxPreview.js";
+import { useSelector } from "@xstate/store/react";
+import * as React from "react";
+//#region src/features/preview/components/Overlays.tsx
+var Overlays = ({ iframeElement }) => {
+	const isPageContentSheetOpen = useSelector(previewStore, (state) => state.context.isPageContentSheetOpen);
+	const selectionBreadcrumbs = useSelector(previewStore, (state) => state.context.selectionBreadcrumbs);
+	const peekedBlock = useSelector(previewStore, (state) => state.context.peekedBlock);
+	const page = usePreviewedPage();
+	React.useEffect(() => {
+		const handleMessage = (event) => {
+			if (!isOverlayMessage(event.data)) return;
+			const message = event.data;
+			if (message.type === "CAMOX_ADD_BLOCK_REQUEST") {
+				const { blockPosition, insertPosition } = message;
+				let afterPosition = null;
+				if (message.afterPosition !== void 0) afterPosition = message.afterPosition;
+				else if (insertPosition === "after") afterPosition = blockPosition;
+				else {
+					const blockIndex = page?.blocks.findIndex((b) => b.position === blockPosition);
+					if (blockIndex !== void 0 && blockIndex > 0) afterPosition = page?.blocks[blockIndex - 1].position ?? null;
+					else if (blockIndex === 0) afterPosition = "";
+				}
+				previewStore.send({
+					type: "openAddBlockSheet",
+					afterPosition
+				});
+			}
+		};
+		window.addEventListener("message", handleMessage);
+		return () => window.removeEventListener("message", handleMessage);
+	}, [page]);
+	React.useEffect(() => {
+		if (isPageContentSheetOpen) return;
+		if (peekedBlock) return;
+		if (selectionBreadcrumbs.length === 0) return;
+		const fieldBreadcrumb = selectionBreadcrumbs.find((b) => b.type === "String");
+		if (!fieldBreadcrumb) return;
+		const blockBreadcrumb = selectionBreadcrumbs.find((b) => b.type === "Block");
+		if (!blockBreadcrumb) return;
+		const repeatableItemBreadcrumb = selectionBreadcrumbs.find((b) => b.type === "RepeatableObject");
+		const message = {
+			type: "CAMOX_FOCUS_FIELD",
+			fieldId: repeatableItemBreadcrumb ? `${blockBreadcrumb.id}__${repeatableItemBreadcrumb.id}__${fieldBreadcrumb.id}` : `${blockBreadcrumb.id}__${fieldBreadcrumb.id}`
+		};
+		iframeElement?.contentWindow?.postMessage(message, "*");
+	}, [
+		selectionBreadcrumbs,
+		isPageContentSheetOpen,
+		peekedBlock,
+		iframeElement
+	]);
+	return null;
+};
+//#endregion
+export { Overlays };

package/dist/features/preview/components/PageContentSheet.d.ts

@@ -0,0 +1,3 @@
+declare const PageContentSheet: () => import("react/jsx-runtime").JSX.Element | null;
+export { PageContentSheet };
+//# sourceMappingURL=PageContentSheet.d.ts.map

package/dist/features/preview/components/PageContentSheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageContentSheet.d.ts","sourceRoot":"","sources":["../../../../src/features/preview/components/PageContentSheet.tsx"],"names":[],"mappings":"AAqKA,QAAA,MAAM,gBAAgB,sDAijBrB,CAAC;AAEF,OAAO,EAAE,gBAAgB,EAAE,CAAC"}