camox 0.38.0 → 0.40.0

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

@@ -0,0 +1,303 @@
+import { useAuthContext } from "../../../lib/auth.js";
+import { projectQueries } from "../../../lib/queries.js";
+import { cn } from "../../../lib/utils.js";
+import { previewStore, selectionBlockId } from "../previewStore.js";
+import { UserButton } from "../../studio/components/UserButton.js";
+import { AddBlockSidebar } from "./AddBlockSidebar.js";
+import { PageTree } from "./PageTree.js";
+import { PageNavigatorHeader } from "./PageNavigatorSidebar.js";
+import { PageEditorSidebar } from "./PageEditorSidebar.js";
+import { PageInfoSidebar, PageMarkdownContent, PageSeoContent } from "./PageInfoSidebar.js";
+import { c } from "react/compiler-runtime";
+import { useQuery } from "@tanstack/react-query";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useSelector } from "@xstate/store-react";
+import { Button } from "@camox/ui/button";
+import { ArrowLeft, FileText, Info, Layers, Search, Settings } from "lucide-react";
+
+//#region src/features/preview/components/MobilePreviewDrawer.tsx
+const COLLAPSED_HEIGHT = 80;
+const DRAG_THRESHOLD = 4;
+const screenTitles = {
+	root: "Page",
+	blocks: "Page content",
+	about: "About this page",
+	seo: "SEO metadata",
+	markdown: "Page markdown"
+};
+function MobilePreviewDrawer({ page, projectName }) {
+	const [height, setHeight] = React.useState(COLLAPSED_HEIGHT);
+	const [isExpanded, setIsExpanded] = React.useState(false);
+	const [isDragging, setIsDragging] = React.useState(false);
+	const [screen, setScreen] = React.useState("root");
+	const authCtx = useAuthContext();
+	const { data: project } = useQuery(projectQueries.getBySlug(authCtx.projectSlug));
+	const dragStartRef = React.useRef({
+		y: 0,
+		height: COLLAPSED_HEIGHT
+	});
+	const dragDistanceRef = React.useRef(0);
+	const rootContentRef = React.useRef(null);
+	const selection = useSelector(previewStore, (state) => state.context.selection);
+	const isAddBlockSidebarOpen = useSelector(previewStore, (state_0) => state_0.context.isAddBlockSidebarOpen);
+	const selectedBlockId = selectionBlockId(selection);
+	const isContentScreen = selectedBlockId != null || isAddBlockSidebarOpen;
+	const isTileScreen = screen !== "root" || isContentScreen;
+	const showScreenHeader = isExpanded && isTileScreen;
+	const getExpandedHeight = React.useCallback(() => {
+		if (typeof window === "undefined") return 720;
+		if (isTileScreen) return window.innerHeight;
+		const contentHeight = rootContentRef.current?.getBoundingClientRect().height ?? 0;
+		return Math.max(COLLAPSED_HEIGHT, Math.min(window.innerHeight, COLLAPSED_HEIGHT + contentHeight + 2));
+	}, [isTileScreen]);
+	const goBack = () => {
+		if (isContentScreen) {
+			previewStore.send({ type: "clearSelection" });
+			previewStore.send({ type: "closeAddBlockSidebar" });
+			setScreen("blocks");
+			return;
+		}
+		setScreen("root");
+	};
+	const snapTo = React.useCallback((expanded) => {
+		setIsExpanded(expanded);
+		setHeight(expanded ? getExpandedHeight() : COLLAPSED_HEIGHT);
+	}, [getExpandedHeight]);
+	React.useEffect(() => {
+		setScreen("root");
+	}, [page.id]);
+	React.useEffect(() => {
+		const handleResize = () => {
+			if (!isExpanded || isDragging) return;
+			setHeight(getExpandedHeight());
+		};
+		handleResize();
+		const observer = new ResizeObserver(handleResize);
+		if (rootContentRef.current) observer.observe(rootContentRef.current);
+		window.addEventListener("resize", handleResize);
+		return () => {
+			observer.disconnect();
+			window.removeEventListener("resize", handleResize);
+		};
+	}, [
+		isExpanded,
+		isDragging,
+		getExpandedHeight
+	]);
+	const handlePointerDown = (event) => {
+		event.currentTarget.setPointerCapture(event.pointerId);
+		dragStartRef.current = {
+			y: event.clientY,
+			height
+		};
+		dragDistanceRef.current = 0;
+		setIsDragging(true);
+	};
+	const handlePointerMove = (event_0) => {
+		if (!event_0.currentTarget.hasPointerCapture(event_0.pointerId)) return;
+		const distance = dragStartRef.current.y - event_0.clientY;
+		dragDistanceRef.current = distance;
+		const nextHeight = dragStartRef.current.height + distance;
+		setHeight(Math.min(getExpandedHeight(), Math.max(COLLAPSED_HEIGHT, nextHeight)));
+	};
+	const finishDrag = (event_1, onTap = () => snapTo(!isExpanded)) => {
+		if (event_1.currentTarget.hasPointerCapture(event_1.pointerId)) event_1.currentTarget.releasePointerCapture(event_1.pointerId);
+		setIsDragging(false);
+		const distance_0 = dragDistanceRef.current;
+		if (Math.abs(distance_0) < DRAG_THRESHOLD) {
+			onTap();
+			return;
+		}
+		if (isExpanded && distance_0 < -40) {
+			snapTo(false);
+			return;
+		}
+		snapTo(dragStartRef.current.height + distance_0 >= (COLLAPSED_HEIGHT + getExpandedHeight()) / 2);
+	};
+	const cancelDrag = (event_2) => {
+		if (event_2.currentTarget.hasPointerCapture(event_2.pointerId)) event_2.currentTarget.releasePointerCapture(event_2.pointerId);
+		setIsDragging(false);
+		snapTo(isExpanded);
+	};
+	return /* @__PURE__ */ jsxs("section", {
+		className: "bg-background relative z-10 w-full shrink-0 overflow-hidden border-t-2 shadow-[0_-8px_24px_rgba(0,0,0,0.08)]",
+		style: {
+			height,
+			transition: isDragging ? "none" : "height 220ms cubic-bezier(0.22, 1, 0.36, 1)"
+		},
+		"aria-label": "Project drawer",
+		children: [showScreenHeader ? /* @__PURE__ */ jsxs("header", {
+			className: "relative h-12 touch-none border-b px-3 pt-2.5 pb-1.5 select-none",
+			onPointerDown: handlePointerDown,
+			onPointerMove: handlePointerMove,
+			onPointerUp: (event_3) => finishDrag(event_3, goBack),
+			onPointerCancel: cancelDrag,
+			children: [/* @__PURE__ */ jsx("span", { className: "bg-muted-foreground/60 absolute top-1 left-1/2 h-1 w-12 -translate-x-1/2 rounded-full" }), /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				onClick: (event_4) => {
+					if (event_4.detail === 0) goBack();
+				},
+				className: "hover:bg-accent flex h-8 w-full items-center gap-2 rounded-lg px-2 text-left text-sm font-semibold",
+				"aria-label": isContentScreen ? "Back to page content" : "Back to page overview",
+				children: [/* @__PURE__ */ jsx(ArrowLeft, { className: "text-muted-foreground size-4" }), isContentScreen ? screenTitles.blocks : screenTitles[screen]]
+			})]
+		}) : /* @__PURE__ */ jsxs("div", {
+			className: "relative h-20",
+			children: [/* @__PURE__ */ jsxs("button", {
+				type: "button",
+				className: "relative flex h-20 w-full touch-none items-center px-5 pt-2 pr-20 text-left select-none",
+				"aria-controls": "camox-mobile-drawer-content",
+				"aria-expanded": isExpanded,
+				onPointerDown: handlePointerDown,
+				onPointerMove: handlePointerMove,
+				onPointerUp: (event_5) => finishDrag(event_5),
+				onPointerCancel: cancelDrag,
+				onClick: (event_6) => {
+					if (event_6.detail === 0) snapTo(!isExpanded);
+				},
+				children: [/* @__PURE__ */ jsx("span", { className: "bg-muted-foreground/60 absolute top-2 left-1/2 h-1 w-12 -translate-x-1/2 rounded-full" }), /* @__PURE__ */ jsx("span", {
+					className: "truncate pr-4 text-sm font-medium",
+					children: projectName
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "absolute top-6 right-5",
+				children: /* @__PURE__ */ jsx(UserButton, {})
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			id: "camox-mobile-drawer-content",
+			inert: !isExpanded,
+			className: cn("flex min-h-0 flex-col overflow-hidden", isTileScreen && "pb-[env(safe-area-inset-bottom)]", showScreenHeader ? "h-[calc(100%-3rem)]" : "h-[calc(100%-5rem)]"),
+			children: selectedBlockId != null ? /* @__PURE__ */ jsx(PageEditorSidebar, {}) : isAddBlockSidebarOpen ? /* @__PURE__ */ jsx(AddBlockSidebar, {}) : /* @__PURE__ */ jsxs("div", {
+				className: "min-h-0 flex-1 overflow-auto",
+				children: [
+					screen === "root" && /* @__PURE__ */ jsxs("div", {
+						ref: rootContentRef,
+						className: "pb-[env(safe-area-inset-bottom)]",
+						children: [
+							/* @__PURE__ */ jsx(PageNavigatorHeader, { page }),
+							/* @__PURE__ */ jsx("div", {
+								className: "px-3 pt-3",
+								children: /* @__PURE__ */ jsx(Button, {
+									type: "button",
+									variant: "outline",
+									className: "w-full",
+									disabled: page.status === "published" || page.livePublishedCheckpointId == null,
+									onClick: () => previewStore.send({ type: "viewLivePage" }),
+									children: "View live site"
+								})
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "grid grid-cols-2 gap-2 p-3",
+								children: [
+									/* @__PURE__ */ jsx(DrawerTile, {
+										title: "Page content",
+										icon: Layers,
+										onClick: () => setScreen("blocks"),
+										fullWidth: true
+									}),
+									/* @__PURE__ */ jsx(DrawerTile, {
+										title: "About this page",
+										icon: Info,
+										onClick: () => setScreen("about")
+									}),
+									/* @__PURE__ */ jsx(DrawerTile, {
+										title: "SEO metadata",
+										icon: Search,
+										onClick: () => setScreen("seo")
+									}),
+									/* @__PURE__ */ jsx(DrawerTile, {
+										title: "Page markdown",
+										icon: FileText,
+										onClick: () => setScreen("markdown")
+									}),
+									/* @__PURE__ */ jsx(DrawerTile, {
+										title: "Project settings",
+										icon: Settings,
+										onClick: () => {
+											if (!project) return;
+											window.open(`${authCtx.authenticationUrl}/${project.organizationSlug}/${project.slug}/overview`, "_blank", "noopener,noreferrer");
+										},
+										disabled: !project
+									})
+								]
+							})
+						]
+					}),
+					screen === "blocks" && /* @__PURE__ */ jsx("div", {
+						className: "flex flex-col gap-2 p-2",
+						children: /* @__PURE__ */ jsx(PageTree, {})
+					}),
+					screen === "about" && /* @__PURE__ */ jsx(PageInfoSidebar, {
+						pageId: page.id,
+						scrollable: false,
+						aboutOnly: true
+					}),
+					screen === "seo" && /* @__PURE__ */ jsx("div", {
+						className: "p-3",
+						children: /* @__PURE__ */ jsx(PageSeoContent, { pageId: page.id })
+					}),
+					screen === "markdown" && /* @__PURE__ */ jsxs("div", {
+						className: "space-y-4 p-3",
+						children: [/* @__PURE__ */ jsx("p", {
+							className: "text-muted-foreground text-sm",
+							children: "How your content will be served to AI agents."
+						}), /* @__PURE__ */ jsx(PageMarkdownContent, { pageId: page.id })]
+					})
+				]
+			}, screen)
+		})]
+	});
+}
+function DrawerTile(t0) {
+	const $ = c(13);
+	if ($[0] !== "a15836a2c406a6e26e3450f2952542d7c3ef6e1f52eed0eca720954850f751a5") {
+		for (let $i = 0; $i < 13; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "a15836a2c406a6e26e3450f2952542d7c3ef6e1f52eed0eca720954850f751a5";
+	}
+	const { title, icon: Icon, onClick, fullWidth: t1, disabled: t2 } = t0;
+	const fullWidth = t1 === void 0 ? false : t1;
+	const disabled = t2 === void 0 ? false : t2;
+	const t3 = fullWidth && "col-span-2";
+	let t4;
+	if ($[1] !== t3) {
+		t4 = cn("bg-muted/40 hover:bg-muted flex flex-col items-start justify-between rounded-xl border p-3 text-left transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", t3);
+		$[1] = t3;
+		$[2] = t4;
+	} else t4 = $[2];
+	let t5;
+	if ($[3] !== Icon) {
+		t5 = /* @__PURE__ */ jsx(Icon, { className: "text-muted-foreground size-5" });
+		$[3] = Icon;
+		$[4] = t5;
+	} else t5 = $[4];
+	let t6;
+	if ($[5] !== title) {
+		t6 = /* @__PURE__ */ jsx("span", {
+			className: "mt-3 text-xs font-medium",
+			children: title
+		});
+		$[5] = title;
+		$[6] = t6;
+	} else t6 = $[6];
+	let t7;
+	if ($[7] !== disabled || $[8] !== onClick || $[9] !== t4 || $[10] !== t5 || $[11] !== t6) {
+		t7 = /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onClick,
+			disabled,
+			className: t4,
+			children: [t5, t6]
+		});
+		$[7] = disabled;
+		$[8] = onClick;
+		$[9] = t4;
+		$[10] = t5;
+		$[11] = t6;
+		$[12] = t7;
+	} else t7 = $[12];
+	return t7;
+}
+
+//#endregion
+export { MobilePreviewDrawer };

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

@@ -281,7 +281,7 @@ const PageEditorSidebar = () => {
 		},
 		{
 			key: "block",
-			label: block.summary || blockDef._internal.title,
+			label: blockDef._internal.title,
 			isCurrent: ancestorChain.length === 0 && !fieldHasOwnView,
 			onClick: () => previewStore.send({
 				type: "setFocusedBlock",
@@ -290,7 +290,7 @@ const PageEditorSidebar = () => {
 		},
 		...ancestorChain.map((ancestor) => ({
 			key: `item-${ancestor.id}`,
-			label: ancestor.summary || formatFieldName(ancestor.fieldName),
+			label: getArraySchemaForItem(blockDef._internal.contentSchema, ancestor.id, itemsMap)?.title ?? formatFieldName(ancestor.fieldName),
 			isCurrent: ancestor.id === currentItemId && !fieldHasOwnView && ancestor.id === ancestorChain[ancestorChain.length - 1]?.id,
 			onClick: () => previewStore.send({
 				type: "selectItem",