camox 0.44.0 → 0.45.0

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

@@ -0,0 +1,1748 @@
+import { useProjectUuid } from "../../../lib/auth.js";
+import { useNavigate } from "../../navigation/navigation.js";
+import { useCamoxApp } from "../../provider/components/CamoxAppContext.js";
+import { reads, useReadQuery, useStudioCache } from "../../../lib/studio-reads.js";
+import { cn } from "../../../lib/utils.js";
+import { UploadDropZone } from "../../content/components/UploadDropZone.js";
+import { pageMutations } from "../../../lib/queries.js";
+import { useDebouncedField } from "../../../hooks/use-debounced-field.js";
+import { DebouncedFieldEditor } from "./DebouncedFieldEditor.js";
+import { Metadata, MetadataRow, formatRelativeTime } from "./Metadata.js";
+import { useLocalizedPath } from "../../../lib/view-locale.js";
+import { PageNicknameField } from "./PageNicknameField.js";
+import { PageInfoSkeleton } from "./PageInfoSkeleton.js";
+import { PageLocationFieldset } from "./PageLocationFieldset.js";
+import { ShikiMarkdown } from "./ShikiMarkdown.js";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useMutation } from "@tanstack/react-query";
+import { Button } from "@camox/ui/button";
+import { Input } from "@camox/ui/input";
+import { Label } from "@camox/ui/label";
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "@camox/ui/sheet";
+import { Switch } from "@camox/ui/switch";
+import { useForm } from "@tanstack/react-form";
+import { Globe, Info, Pencil, Trash2, Upload } from "lucide-react";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@camox/ui/dialog";
+import { toast } from "@camox/ui/toaster";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@camox/ui/tooltip";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@camox/ui/alert-dialog";
+import { Spinner } from "@camox/ui/spinner";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@camox/ui/select";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText } from "@camox/ui/input-group";
+import { Accordion, AccordionItem, AccordionPanel } from "@camox/ui/accordion";
+import { Alert, AlertDescription, AlertTitle } from "@camox/ui/alert";
+import { Checkbox } from "@camox/ui/checkbox";
+
+//#region src/features/preview/components/PageInfo.tsx
+const usePageMetadataData = (pageId) => {
+	const $ = c(29);
+	const projectUuid = useProjectUuid();
+	const camoxApp = useCamoxApp();
+	let t0;
+	if ($[0] !== pageId) {
+		t0 = reads.page({ id: pageId });
+		$[0] = pageId;
+		$[1] = t0;
+	} else t0 = $[1];
+	const { data: page } = useReadQuery(t0);
+	let t1;
+	if ($[2] !== projectUuid) {
+		t1 = reads.project({ projectUuid });
+		$[2] = projectUuid;
+		$[3] = t1;
+	} else t1 = $[3];
+	const { data: project } = useReadQuery(t1);
+	let t2;
+	if ($[4] !== projectUuid) {
+		t2 = reads.pageList({ projectUuid });
+		$[4] = projectUuid;
+		$[5] = t2;
+	} else t2 = $[5];
+	const t3 = !!project;
+	let t4;
+	if ($[6] !== t3) {
+		t4 = { enabled: t3 };
+		$[6] = t3;
+		$[7] = t4;
+	} else t4 = $[7];
+	const { data: pages } = useReadQuery(t2, t4);
+	let t5;
+	if ($[8] !== project?.id) {
+		t5 = reads.layoutList({ projectId: project?.id ?? 0 });
+		$[8] = project?.id;
+		$[9] = t5;
+	} else t5 = $[9];
+	const t6 = !!project;
+	let t7;
+	if ($[10] !== t6) {
+		t7 = { enabled: t6 };
+		$[10] = t6;
+		$[11] = t7;
+	} else t7 = $[11];
+	const { data: allLayouts } = useReadQuery(t5, t7);
+	let t8;
+	if ($[12] !== allLayouts || $[13] !== camoxApp) {
+		t8 = allLayouts?.filter((layout) => camoxApp.getLayoutById(layout.layoutId)?._internal.kind === "curated");
+		$[12] = allLayouts;
+		$[13] = camoxApp;
+		$[14] = t8;
+	} else t8 = $[14];
+	const layouts = t8;
+	let pageLayoutRecord;
+	let t9;
+	if ($[15] !== allLayouts || $[16] !== camoxApp || $[17] !== page || $[18] !== project?.name) {
+		pageLayoutRecord = allLayouts?.find((l) => l.layoutId === page?.layoutId);
+		const layoutDef = pageLayoutRecord ? camoxApp.getLayoutById(pageLayoutRecord.layoutId) : void 0;
+		t9 = layoutDef && page ? layoutDef._internal.buildMetaTitle({
+			pageMetaTitle: page.metaTitle ?? "",
+			projectName: project?.name ?? "",
+			pageFullPath: page.fullPath,
+			data: void 0,
+			params: {}
+		}) : page?.metaTitle ?? "";
+		$[15] = allLayouts;
+		$[16] = camoxApp;
+		$[17] = page;
+		$[18] = project?.name;
+		$[19] = pageLayoutRecord;
+		$[20] = t9;
+	} else {
+		pageLayoutRecord = $[19];
+		t9 = $[20];
+	}
+	const metaTitle = t9;
+	let t10;
+	if ($[21] !== camoxApp || $[22] !== layouts || $[23] !== metaTitle || $[24] !== page || $[25] !== pageLayoutRecord || $[26] !== pages || $[27] !== project) {
+		t10 = {
+			page,
+			project,
+			pages,
+			layouts,
+			pageLayoutRecord,
+			metaTitle,
+			camoxApp
+		};
+		$[21] = camoxApp;
+		$[22] = layouts;
+		$[23] = metaTitle;
+		$[24] = page;
+		$[25] = pageLayoutRecord;
+		$[26] = pages;
+		$[27] = project;
+		$[28] = t10;
+	} else t10 = $[28];
+	return t10;
+};
+const PAGE_SETTINGS_ITEM = "page-settings";
+const SHOW_PAGE_SETTINGS_STORAGE_KEY = "camox:studio:showPageSettings";
+/** Whether the page info shows its settings, remembered across pages and sessions. */
+const useShowPageSettings = () => {
+	const $ = c(3);
+	const [show, setShow] = React.useState(_temp);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = (next) => {
+			setShow(next);
+			try {
+				localStorage.setItem(SHOW_PAGE_SETTINGS_STORAGE_KEY, String(next));
+			} catch {}
+		};
+		$[0] = t0;
+	} else t0 = $[0];
+	const update = t0;
+	let t1;
+	if ($[1] !== show) {
+		t1 = [show, update];
+		$[1] = show;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
+};
+const PageInfo = (t0) => {
+	const $ = c(64);
+	const { pageId, scrollable: t1, aboutOnly: t2 } = t0;
+	const scrollable = t1 === void 0 ? true : t1;
+	const aboutOnly = t2 === void 0 ? false : t2;
+	const data = usePageMetadataData(pageId);
+	const { page, metaTitle } = data;
+	const [isStructureModalOpen, setIsStructureModalOpen] = React.useState(false);
+	const [isSeoSheetOpen, setIsSeoSheetOpen] = React.useState(false);
+	const [isMarkdownSheetOpen, setIsMarkdownSheetOpen] = React.useState(false);
+	const [showPageSettings, setShowPageSettings] = useShowPageSettings();
+	const showSettingsId = React.useId();
+	const settingsPanelId = React.useId();
+	if (!page) {
+		if (!aboutOnly) {
+			let t3;
+			if ($[0] !== scrollable) {
+				t3 = /* @__PURE__ */ jsx(PageInfoSkeleton, { scrollable });
+				$[0] = scrollable;
+				$[1] = t3;
+			} else t3 = $[1];
+			return t3;
+		}
+		let t3;
+		if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+			t3 = /* @__PURE__ */ jsxs("div", {
+				className: "text-muted-foreground flex flex-1 items-center justify-center px-2 text-sm",
+				children: [/* @__PURE__ */ jsx(Spinner, { className: "mr-2 size-3.5" }), " Loading page info..."]
+			});
+			$[2] = t3;
+		} else t3 = $[2];
+		return t3;
+	}
+	let t3;
+	if ($[3] !== data) {
+		t3 = /* @__PURE__ */ jsx(PageNicknameEditor, { data });
+		$[3] = data;
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(Label, { children: "Page path" });
+		$[5] = t4;
+	} else t4 = $[5];
+	let t5;
+	if ($[6] !== page.fullPath) {
+		t5 = /* @__PURE__ */ jsx(InputGroupText, {
+			className: "min-w-0 flex-1 px-2 py-1.5 font-mono font-normal break-all",
+			children: page.fullPath
+		});
+		$[6] = page.fullPath;
+		$[7] = t5;
+	} else t5 = $[7];
+	let t6;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = () => setIsStructureModalOpen(true);
+		$[8] = t6;
+	} else t6 = $[8];
+	let t7;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(InputGroupAddon, {
+			align: "inline-end",
+			children: /* @__PURE__ */ jsx(InputGroupButton, {
+				type: "button",
+				variant: "ghost",
+				size: "icon-xs",
+				onClick: t6,
+				"aria-label": "Edit page structure",
+				children: /* @__PURE__ */ jsx(Pencil, {})
+			})
+		});
+		$[9] = t7;
+	} else t7 = $[9];
+	let t8;
+	if ($[10] !== t5) {
+		t8 = /* @__PURE__ */ jsxs("div", {
+			className: "space-y-2",
+			children: [t4, /* @__PURE__ */ jsxs(InputGroup, {
+				className: "px-1",
+				children: [t5, t7]
+			})]
+		});
+		$[10] = t5;
+		$[11] = t8;
+	} else t8 = $[11];
+	let t9;
+	if ($[12] !== data) {
+		t9 = /* @__PURE__ */ jsx(PageLayoutSelect, { data });
+		$[12] = data;
+		$[13] = t9;
+	} else t9 = $[13];
+	let t10;
+	if ($[14] !== t3 || $[15] !== t8 || $[16] !== t9) {
+		t10 = /* @__PURE__ */ jsxs("section", {
+			className: "space-y-4",
+			children: [
+				t3,
+				t8,
+				t9
+			]
+		});
+		$[14] = t3;
+		$[15] = t8;
+		$[16] = t9;
+		$[17] = t10;
+	} else t10 = $[17];
+	let t11;
+	if ($[18] !== page) {
+		t11 = /* @__PURE__ */ jsx(PageDeleteButton, { page });
+		$[18] = page;
+		$[19] = t11;
+	} else t11 = $[19];
+	let t12;
+	if ($[20] !== page.createdAt) {
+		t12 = formatRelativeTime(page.createdAt);
+		$[20] = page.createdAt;
+		$[21] = t12;
+	} else t12 = $[21];
+	let t13;
+	if ($[22] !== t12) {
+		t13 = /* @__PURE__ */ jsx(MetadataRow, {
+			label: "Created",
+			children: t12
+		});
+		$[22] = t12;
+		$[23] = t13;
+	} else t13 = $[23];
+	const t14 = page.createdBy ?? "Unknown";
+	let t15;
+	if ($[24] !== t14) {
+		t15 = /* @__PURE__ */ jsx(MetadataRow, {
+			label: "Created by",
+			children: t14
+		});
+		$[24] = t14;
+		$[25] = t15;
+	} else t15 = $[25];
+	let t16;
+	if ($[26] !== page.updatedAt) {
+		t16 = formatRelativeTime(page.updatedAt);
+		$[26] = page.updatedAt;
+		$[27] = t16;
+	} else t16 = $[27];
+	let t17;
+	if ($[28] !== t16) {
+		t17 = /* @__PURE__ */ jsx(MetadataRow, {
+			label: "Updated",
+			children: t16
+		});
+		$[28] = t16;
+		$[29] = t17;
+	} else t17 = $[29];
+	let t18;
+	if ($[30] !== t13 || $[31] !== t15 || $[32] !== t17) {
+		t18 = /* @__PURE__ */ jsxs(Metadata, { children: [
+			t13,
+			t15,
+			t17
+		] });
+		$[30] = t13;
+		$[31] = t15;
+		$[32] = t17;
+		$[33] = t18;
+	} else t18 = $[33];
+	let t19;
+	if ($[34] !== t10 || $[35] !== t11 || $[36] !== t18) {
+		t19 = /* @__PURE__ */ jsxs(Fragment, { children: [
+			t10,
+			t11,
+			t18
+		] });
+		$[34] = t10;
+		$[35] = t11;
+		$[36] = t18;
+		$[37] = t19;
+	} else t19 = $[37];
+	const pageSettings = t19;
+	const t20 = scrollable && "flex-1 overflow-auto";
+	let t21;
+	if ($[38] !== t20) {
+		t21 = cn("space-y-4 p-2 pt-4", t20);
+		$[38] = t20;
+		$[39] = t21;
+	} else t21 = $[39];
+	let t22;
+	if ($[40] !== aboutOnly || $[41] !== pageSettings || $[42] !== setShowPageSettings || $[43] !== settingsPanelId || $[44] !== showPageSettings || $[45] !== showSettingsId) {
+		t22 = aboutOnly ? pageSettings : /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "space-y-2",
+				children: [/* @__PURE__ */ jsx(Label, { children: "SEO" }), /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "outline",
+					className: "w-full",
+					onClick: () => setIsSeoSheetOpen(true),
+					children: "Manage page metadata"
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "space-y-2",
+				children: [/* @__PURE__ */ jsx(Label, { children: "GEO" }), /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "outline",
+					className: "w-full",
+					onClick: () => setIsMarkdownSheetOpen(true),
+					children: "View page markdown"
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx(Checkbox, {
+					id: showSettingsId,
+					checked: showPageSettings,
+					onCheckedChange: setShowPageSettings,
+					"aria-controls": settingsPanelId
+				}), /* @__PURE__ */ jsx(Label, {
+					htmlFor: showSettingsId,
+					className: "font-normal",
+					children: "Show page settings"
+				})]
+			}),
+			/* @__PURE__ */ jsx(Accordion, {
+				value: showPageSettings ? [PAGE_SETTINGS_ITEM] : [],
+				children: /* @__PURE__ */ jsx(AccordionItem, {
+					value: PAGE_SETTINGS_ITEM,
+					children: /* @__PURE__ */ jsx(AccordionPanel, {
+						id: settingsPanelId,
+						className: "-mx-1 px-1",
+						children: /* @__PURE__ */ jsx("div", {
+							className: "space-y-4",
+							children: pageSettings
+						})
+					})
+				})
+			})
+		] });
+		$[40] = aboutOnly;
+		$[41] = pageSettings;
+		$[42] = setShowPageSettings;
+		$[43] = settingsPanelId;
+		$[44] = showPageSettings;
+		$[45] = showSettingsId;
+		$[46] = t22;
+	} else t22 = $[46];
+	let t23;
+	if ($[47] !== t21 || $[48] !== t22) {
+		t23 = /* @__PURE__ */ jsx("div", {
+			className: t21,
+			children: t22
+		});
+		$[47] = t21;
+		$[48] = t22;
+		$[49] = t23;
+	} else t23 = $[49];
+	let t24;
+	if ($[50] !== isStructureModalOpen || $[51] !== page.id) {
+		t24 = /* @__PURE__ */ jsx(PageStructureModal, {
+			open: isStructureModalOpen,
+			onOpenChange: setIsStructureModalOpen,
+			pageId: page.id
+		});
+		$[50] = isStructureModalOpen;
+		$[51] = page.id;
+		$[52] = t24;
+	} else t24 = $[52];
+	let t25;
+	if ($[53] !== aboutOnly || $[54] !== isMarkdownSheetOpen || $[55] !== isSeoSheetOpen || $[56] !== metaTitle || $[57] !== page.id || $[58] !== page.metaDescription) {
+		t25 = !aboutOnly && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(PageSeoSheet, {
+			open: isSeoSheetOpen,
+			onOpenChange: setIsSeoSheetOpen,
+			pageId: page.id
+		}), /* @__PURE__ */ jsx(PageMarkdownSheet, {
+			open: isMarkdownSheetOpen,
+			onOpenChange: setIsMarkdownSheetOpen,
+			pageId: page.id,
+			metaTitle,
+			metaDescription: page.metaDescription ?? ""
+		})] });
+		$[53] = aboutOnly;
+		$[54] = isMarkdownSheetOpen;
+		$[55] = isSeoSheetOpen;
+		$[56] = metaTitle;
+		$[57] = page.id;
+		$[58] = page.metaDescription;
+		$[59] = t25;
+	} else t25 = $[59];
+	let t26;
+	if ($[60] !== t23 || $[61] !== t24 || $[62] !== t25) {
+		t26 = /* @__PURE__ */ jsxs(Fragment, { children: [
+			t23,
+			t24,
+			t25
+		] });
+		$[60] = t23;
+		$[61] = t24;
+		$[62] = t25;
+		$[63] = t26;
+	} else t26 = $[63];
+	return t26;
+};
+const PageDeleteButton = ({ page }) => {
+	const [isConfirmOpen, setIsConfirmOpen] = React.useState(false);
+	const deletePage = useMutation(pageMutations.delete());
+	const navigate = useNavigate();
+	const localized = useLocalizedPath();
+	if (page.fullPath === "/") return null;
+	const handleDelete = async () => {
+		try {
+			await deletePage.mutateAsync({ id: page.id });
+			toast.success(`Deleted ${page.nickname} page`);
+			await navigate({ to: localized("/") });
+		} catch (error) {
+			console.error("Failed to delete page:", error);
+			toast.error(`Could not delete ${page.nickname} page`);
+		} finally {
+			setIsConfirmOpen(false);
+		}
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+		className: "space-y-2",
+		children: [/* @__PURE__ */ jsx(Label, { children: "Danger zone" }), /* @__PURE__ */ jsxs(Button, {
+			type: "button",
+			variant: "outline",
+			className: "w-full",
+			onClick: () => setIsConfirmOpen(true),
+			children: [/* @__PURE__ */ jsx(Trash2, {}), "Delete page"]
+		})]
+	}), /* @__PURE__ */ jsx(AlertDialog, {
+		open: isConfirmOpen,
+		onOpenChange: setIsConfirmOpen,
+		children: /* @__PURE__ */ jsxs(AlertDialogContent, { children: [/* @__PURE__ */ jsxs(AlertDialogHeader, { children: [/* @__PURE__ */ jsx(AlertDialogTitle, { children: "Delete page?" }), /* @__PURE__ */ jsxs(AlertDialogDescription, { children: [/* @__PURE__ */ jsx("strong", { children: page.nickname }), " will be deleted in this draft. Live keeps the page until the draft is published."] })] }), /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [/* @__PURE__ */ jsx(AlertDialogCancel, {
+			variant: "outline",
+			size: "default",
+			children: "Cancel"
+		}), /* @__PURE__ */ jsxs(AlertDialogAction, {
+			variant: "destructive",
+			disabled: deletePage.isPending,
+			onClick: () => void handleDelete(),
+			children: [deletePage.isPending && /* @__PURE__ */ jsx(Spinner, {}), "Yes, delete this page"]
+		})] })] })
+	})] });
+};
+const PageNicknameEditor = (t0) => {
+	const $ = c(20);
+	const { data } = t0;
+	const { page } = data;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = pageMutations.update();
+		$[0] = t1;
+	} else t1 = $[0];
+	const updatePage = useMutation(t1);
+	const inputId = React.useId();
+	let t2;
+	if ($[1] !== page || $[2] !== updatePage) {
+		t2 = (value) => {
+			if (!page) return;
+			const nickname = value.trim();
+			if (nickname === page.nickname) return;
+			if (!nickname) {
+				toast.error("Page nickname is required");
+				return;
+			}
+			updatePage.mutate({
+				id: page.id,
+				nickname,
+				pathSegment: page.pathSegment,
+				parentPageId: page.parentPageId
+			}, { onError: _temp2 });
+		};
+		$[1] = page;
+		$[2] = updatePage;
+		$[3] = t2;
+	} else t2 = $[3];
+	const saveNickname = t2;
+	const { value: value_0, setValue, onFocus, onBlur } = useDebouncedField(page?.nickname ?? "", saveNickname);
+	if (!page) return null;
+	let t3;
+	if ($[4] !== inputId) {
+		t3 = /* @__PURE__ */ jsx(Label, {
+			htmlFor: inputId,
+			children: "Page nickname"
+		});
+		$[4] = inputId;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(Info, { className: "text-muted-foreground size-3.5" }) }), /* @__PURE__ */ jsx(TooltipContent, { children: "A short internal name. Does not affect SEO." })] });
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[7] !== t3) {
+		t5 = /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-1.5",
+			children: [t3, t4]
+		});
+		$[7] = t3;
+		$[8] = t5;
+	} else t5 = $[8];
+	let t6;
+	if ($[9] !== setValue) {
+		t6 = (e) => setValue(e.target.value);
+		$[9] = setValue;
+		$[10] = t6;
+	} else t6 = $[10];
+	let t7;
+	if ($[11] !== inputId || $[12] !== onBlur || $[13] !== onFocus || $[14] !== t6 || $[15] !== value_0) {
+		t7 = /* @__PURE__ */ jsx(Input, {
+			id: inputId,
+			value: value_0,
+			onChange: t6,
+			onFocus,
+			onBlur,
+			placeholder: "e.g. Home, Pricing, About",
+			maxLength: 80
+		});
+		$[11] = inputId;
+		$[12] = onBlur;
+		$[13] = onFocus;
+		$[14] = t6;
+		$[15] = value_0;
+		$[16] = t7;
+	} else t7 = $[16];
+	let t8;
+	if ($[17] !== t5 || $[18] !== t7) {
+		t8 = /* @__PURE__ */ jsxs("div", {
+			className: "space-y-2",
+			children: [t5, t7]
+		});
+		$[17] = t5;
+		$[18] = t7;
+		$[19] = t8;
+	} else t8 = $[19];
+	return t8;
+};
+const PageLayoutSelect = (t0) => {
+	const $ = c(28);
+	const { data } = t0;
+	const { page, layouts, camoxApp } = data;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = pageMutations.setLayout();
+		$[0] = t1;
+	} else t1 = $[0];
+	const setLayout = useMutation(t1);
+	if (!page || !layouts || layouts.length === 0) return null;
+	let t2;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(Label, { children: "Layout" });
+		$[1] = t2;
+	} else t2 = $[1];
+	let t3;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-1.5",
+			children: [t2, /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(Info, { className: "text-muted-foreground size-3.5" }) }), /* @__PURE__ */ jsx(TooltipContent, {
+				className: "max-w-xs",
+				children: "A layout wraps page content in shared structure, like navbars and footers, and controls how metadata is generated."
+			})] })]
+		});
+		$[2] = t3;
+	} else t3 = $[2];
+	const t4 = page.layoutId;
+	let t5;
+	if ($[3] !== page.id || $[4] !== page.layoutId || $[5] !== setLayout) {
+		t5 = (layoutId) => {
+			if (layoutId == null || layoutId === page.layoutId) return;
+			setLayout.mutate({
+				id: page.id,
+				layoutId
+			}, { onError: _temp3 });
+		};
+		$[3] = page.id;
+		$[4] = page.layoutId;
+		$[5] = setLayout;
+		$[6] = t5;
+	} else t5 = $[6];
+	let t6;
+	if ($[7] !== camoxApp || $[8] !== layouts) {
+		let t7;
+		if ($[10] !== camoxApp) {
+			t7 = (t) => ({
+				value: t.layoutId,
+				label: camoxApp.getLayoutById(t.layoutId)?._internal.title ?? t.layoutId
+			});
+			$[10] = camoxApp;
+			$[11] = t7;
+		} else t7 = $[11];
+		t6 = layouts.map(t7);
+		$[7] = camoxApp;
+		$[8] = layouts;
+		$[9] = t6;
+	} else t6 = $[9];
+	let t7;
+	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select a layout" });
+		$[12] = t7;
+	} else t7 = $[12];
+	let t8;
+	if ($[13] !== setLayout.isPending) {
+		t8 = /* @__PURE__ */ jsx(SelectTrigger, {
+			disabled: setLayout.isPending,
+			className: "w-full",
+			children: t7
+		});
+		$[13] = setLayout.isPending;
+		$[14] = t8;
+	} else t8 = $[14];
+	let t9;
+	if ($[15] !== camoxApp || $[16] !== layouts) {
+		let t10;
+		if ($[18] !== camoxApp) {
+			t10 = (t_0) => /* @__PURE__ */ jsx(SelectItem, {
+				value: t_0.layoutId,
+				children: camoxApp.getLayoutById(t_0.layoutId)?._internal.title ?? t_0.layoutId
+			}, t_0.layoutId);
+			$[18] = camoxApp;
+			$[19] = t10;
+		} else t10 = $[19];
+		t9 = layouts.map(t10);
+		$[15] = camoxApp;
+		$[16] = layouts;
+		$[17] = t9;
+	} else t9 = $[17];
+	let t10;
+	if ($[20] !== t9) {
+		t10 = /* @__PURE__ */ jsx(SelectContent, { children: t9 });
+		$[20] = t9;
+		$[21] = t10;
+	} else t10 = $[21];
+	let t11;
+	if ($[22] !== page.layoutId || $[23] !== t10 || $[24] !== t5 || $[25] !== t6 || $[26] !== t8) {
+		t11 = /* @__PURE__ */ jsxs("div", {
+			className: "space-y-2",
+			children: [t3, /* @__PURE__ */ jsxs(Select, {
+				value: t4,
+				onValueChange: t5,
+				items: t6,
+				children: [t8, t10]
+			})]
+		});
+		$[22] = page.layoutId;
+		$[23] = t10;
+		$[24] = t5;
+		$[25] = t6;
+		$[26] = t8;
+		$[27] = t11;
+	} else t11 = $[27];
+	return t11;
+};
+const PageStructureModal = (t0) => {
+	const $ = c(18);
+	const { open, onOpenChange, pageId } = t0;
+	const data = usePageMetadataData(pageId);
+	const { page } = data;
+	let t1;
+	if ($[0] !== data.pages || $[1] !== pageId) {
+		t1 = data.pages?.find((item) => item.id === pageId)?.needsLayout ?? false;
+		$[0] = data.pages;
+		$[1] = pageId;
+		$[2] = t1;
+	} else t1 = $[2];
+	const needsLayout = t1;
+	let t2;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(DialogTitle, { children: "Page page" });
+		$[3] = t2;
+	} else t2 = $[3];
+	const t3 = needsLayout ? "This page's layout is gone, so it isn't served. Move it to another layout, or delete it." : "Update the URL path for this page.";
+	let t4;
+	if ($[4] !== t3) {
+		t4 = /* @__PURE__ */ jsxs(DialogHeader, { children: [t2, /* @__PURE__ */ jsx(DialogDescription, { children: t3 })] });
+		$[4] = t3;
+		$[5] = t4;
+	} else t4 = $[5];
+	let t5;
+	if ($[6] !== data || $[7] !== needsLayout || $[8] !== onOpenChange || $[9] !== page) {
+		t5 = page ? /* @__PURE__ */ jsx(PageStructureEditor, {
+			data,
+			includeNickname: false,
+			includeLayout: needsLayout,
+			onSaved: () => onOpenChange(false)
+		}) : /* @__PURE__ */ jsxs("div", {
+			className: "text-muted-foreground flex items-center gap-2 py-6 text-sm",
+			children: [/* @__PURE__ */ jsx(Spinner, { className: "size-3.5" }), " Loading..."]
+		});
+		$[6] = data;
+		$[7] = needsLayout;
+		$[8] = onOpenChange;
+		$[9] = page;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== t4 || $[12] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(DialogContent, {
+			className: "max-h-[90vh] overflow-y-auto sm:max-w-2xl",
+			children: [t4, t5]
+		});
+		$[11] = t4;
+		$[12] = t5;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== onOpenChange || $[15] !== open || $[16] !== t6) {
+		t7 = /* @__PURE__ */ jsx(Dialog, {
+			open,
+			onOpenChange,
+			children: t6
+		});
+		$[14] = onOpenChange;
+		$[15] = open;
+		$[16] = t6;
+		$[17] = t7;
+	} else t7 = $[17];
+	return t7;
+};
+const PageStructureEditor = (t0) => {
+	const $ = c(37);
+	const { data, includeNickname: t1, includeLayout: t2, onSaved } = t0;
+	const includeNickname = t1 === void 0 ? true : t1;
+	const includeLayout = t2 === void 0 ? true : t2;
+	const { page, project, pages, layouts, camoxApp } = data;
+	let t3;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = pageMutations.update();
+		$[0] = t3;
+	} else t3 = $[0];
+	const updatePage = useMutation(t3);
+	let t4;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = pageMutations.setLayout();
+		$[1] = t4;
+	} else t4 = $[1];
+	const setLayout = useMutation(t4);
+	const navigate = useNavigate();
+	const localized = useLocalizedPath();
+	const t5 = page?.nickname ?? "";
+	const t6 = page?.pathSegment ?? "";
+	const t7 = page?.parentPageId ?? void 0;
+	const t8 = page?.layoutId ?? "";
+	let t9;
+	if ($[2] !== t5 || $[3] !== t6 || $[4] !== t7 || $[5] !== t8) {
+		t9 = {
+			nickname: t5,
+			pathSegment: t6,
+			parentPageId: t7,
+			layoutId: t8
+		};
+		$[2] = t5;
+		$[3] = t6;
+		$[4] = t7;
+		$[5] = t8;
+		$[6] = t9;
+	} else t9 = $[6];
+	const form = useForm({
+		defaultValues: t9,
+		onSubmit: async (values) => {
+			if (!page) return;
+			try {
+				const nickname = values.value.nickname.trim();
+				if (!nickname) {
+					toast.error("Page nickname is required");
+					return;
+				}
+				const { fullPath } = await updatePage.mutateAsync({
+					id: page.id,
+					nickname,
+					pathSegment: values.value.pathSegment,
+					parentPageId: values.value.parentPageId
+				});
+				if (includeLayout && values.value.layoutId && values.value.layoutId !== page.layoutId) await setLayout.mutateAsync({
+					id: page.id,
+					layoutId: values.value.layoutId
+				});
+				toast.success(`Updated ${nickname} page`);
+				form.reset();
+				onSaved?.();
+				await navigate({ to: localized(fullPath) });
+			} catch (t10) {
+				console.error("Failed to update page:", t10);
+				toast.error("Could not update page");
+			}
+		}
+	});
+	let t11;
+	if ($[7] !== form || $[8] !== page) {
+		t11 = () => {
+			if (!page) return;
+			form.reset({
+				nickname: page.nickname,
+				pathSegment: page.pathSegment,
+				parentPageId: page.parentPageId ?? void 0,
+				layoutId: page.layoutId ?? ""
+			});
+		};
+		$[7] = form;
+		$[8] = page;
+		$[9] = t11;
+	} else t11 = $[9];
+	const resetForm = React.useEffectEvent(t11);
+	const pageId = page?.id;
+	let t12;
+	if ($[10] !== resetForm) {
+		t12 = () => {
+			resetForm();
+		};
+		$[10] = resetForm;
+		$[11] = t12;
+	} else t12 = $[11];
+	let t13;
+	if ($[12] !== pageId) {
+		t13 = [pageId];
+		$[12] = pageId;
+		$[13] = t13;
+	} else t13 = $[13];
+	React.useEffect(t12, t13);
+	if (!page || !project) return null;
+	const isRootPage = page.fullPath === "/";
+	let t14;
+	if ($[14] !== form) {
+		t14 = (e) => {
+			e.preventDefault();
+			e.stopPropagation();
+			form.handleSubmit();
+		};
+		$[14] = form;
+		$[15] = t14;
+	} else t14 = $[15];
+	let t15;
+	if ($[16] !== form.Field || $[17] !== includeNickname) {
+		t15 = includeNickname && /* @__PURE__ */ jsx(form.Field, {
+			name: "nickname",
+			children: _temp4
+		});
+		$[16] = form.Field;
+		$[17] = includeNickname;
+		$[18] = t15;
+	} else t15 = $[18];
+	let t16;
+	if ($[19] !== form.Field || $[20] !== isRootPage || $[21] !== page.id || $[22] !== pages) {
+		t16 = isRootPage ? /* @__PURE__ */ jsxs(Alert, { children: [
+			/* @__PURE__ */ jsx(Info, { className: "size-4" }),
+			/* @__PURE__ */ jsx(AlertTitle, { children: "Homepage" }),
+			/* @__PURE__ */ jsx(AlertDescription, { children: "You can't change the path of the home page." })
+		] }) : /* @__PURE__ */ jsx(form.Field, {
+			name: "parentPageId",
+			children: (parentField) => /* @__PURE__ */ jsx(form.Field, {
+				name: "pathSegment",
+				children: (pathField) => /* @__PURE__ */ jsx(PageLocationFieldset, {
+					parentPageId: parentField.state.value,
+					onParentPageIdChange: parentField.handleChange,
+					pathSegment: pathField.state.value,
+					onPathSegmentChange: pathField.handleChange,
+					pages,
+					excludePageId: page.id
+				})
+			})
+		});
+		$[19] = form.Field;
+		$[20] = isRootPage;
+		$[21] = page.id;
+		$[22] = pages;
+		$[23] = t16;
+	} else t16 = $[23];
+	let t17;
+	if ($[24] !== camoxApp || $[25] !== form.Field || $[26] !== includeLayout || $[27] !== layouts) {
+		t17 = includeLayout && layouts && layouts.length > 0 && /* @__PURE__ */ jsx(form.Field, {
+			name: "layoutId",
+			children: (field_0) => /* @__PURE__ */ jsxs("div", {
+				className: "space-y-2",
+				children: [/* @__PURE__ */ jsx(Label, { children: "Layout" }), /* @__PURE__ */ jsxs(Select, {
+					value: field_0.state.value,
+					onValueChange: (value) => {
+						if (value != null) field_0.handleChange(value);
+					},
+					items: layouts.map((t) => ({
+						value: t.layoutId,
+						label: camoxApp.getLayoutById(t.layoutId)?._internal.title ?? t.layoutId
+					})),
+					children: [/* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select a layout" }) }), /* @__PURE__ */ jsx(SelectContent, { children: layouts.map((t_0) => /* @__PURE__ */ jsx(SelectItem, {
+						value: t_0.layoutId,
+						children: camoxApp.getLayoutById(t_0.layoutId)?._internal.title ?? t_0.layoutId
+					}, t_0.layoutId)) })]
+				})]
+			})
+		});
+		$[24] = camoxApp;
+		$[25] = form.Field;
+		$[26] = includeLayout;
+		$[27] = layouts;
+		$[28] = t17;
+	} else t17 = $[28];
+	let t18;
+	if ($[29] !== form.Subscribe) {
+		t18 = /* @__PURE__ */ jsx(form.Subscribe, {
+			selector: _temp5,
+			children: _temp6
+		});
+		$[29] = form.Subscribe;
+		$[30] = t18;
+	} else t18 = $[30];
+	let t19;
+	if ($[31] !== t14 || $[32] !== t15 || $[33] !== t16 || $[34] !== t17 || $[35] !== t18) {
+		t19 = /* @__PURE__ */ jsxs("form", {
+			onSubmit: t14,
+			className: "space-y-4",
+			children: [
+				t15,
+				t16,
+				t17,
+				t18
+			]
+		});
+		$[31] = t14;
+		$[32] = t15;
+		$[33] = t16;
+		$[34] = t17;
+		$[35] = t18;
+		$[36] = t19;
+	} else t19 = $[36];
+	return t19;
+};
+const PageSeoSheet = (t0) => {
+	const $ = c(7);
+	const { open, onOpenChange, pageId } = t0;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsxs(SheetHeader, {
+			className: "border-b",
+			children: [/* @__PURE__ */ jsx(SheetTitle, { children: "SEO metadata" }), /* @__PURE__ */ jsx(SheetDescription, { children: "Control how this page appears in search and social previews." })]
+		});
+		$[0] = t1;
+	} else t1 = $[0];
+	let t2;
+	if ($[1] !== pageId) {
+		t2 = /* @__PURE__ */ jsxs(SheetContent, {
+			side: "right",
+			className: "gap-0 data-[side=right]:sm:max-w-xl",
+			children: [t1, /* @__PURE__ */ jsx("div", {
+				className: "flex-1 overflow-y-auto p-4",
+				children: /* @__PURE__ */ jsx(PageSeoContent, { pageId })
+			})]
+		});
+		$[1] = pageId;
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] !== onOpenChange || $[4] !== open || $[5] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Sheet, {
+			open,
+			onOpenChange,
+			children: t2
+		});
+		$[3] = onOpenChange;
+		$[4] = open;
+		$[5] = t2;
+		$[6] = t3;
+	} else t3 = $[6];
+	return t3;
+};
+const PageSeoContent = (t0) => {
+	const $ = c(5);
+	const { pageId } = t0;
+	const { page, metaTitle, pageLayoutRecord, project } = usePageMetadataData(pageId);
+	let t1;
+	if ($[0] !== metaTitle || $[1] !== page || $[2] !== pageLayoutRecord?.layoutId || $[3] !== project?.name) {
+		t1 = page ? /* @__PURE__ */ jsx(PageSeoEditor, {
+			page,
+			metaTitle,
+			layoutId: pageLayoutRecord?.layoutId,
+			projectName: project?.name
+		}) : /* @__PURE__ */ jsxs("div", {
+			className: "text-muted-foreground flex items-center gap-2 py-6 text-sm",
+			children: [/* @__PURE__ */ jsx(Spinner, { className: "size-3.5" }), " Loading..."]
+		});
+		$[0] = metaTitle;
+		$[1] = page;
+		$[2] = pageLayoutRecord?.layoutId;
+		$[3] = project?.name;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
+};
+const PageSeoEditor = (t0) => {
+	const $ = c(40);
+	const { page, metaTitle, layoutId, projectName } = t0;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = pageMutations.setSeo();
+		$[0] = t1;
+	} else t1 = $[0];
+	const setSeo = useMutation(t1);
+	let t2;
+	if ($[1] !== page.id || $[2] !== setSeo) {
+		t2 = (checked) => {
+			setSeo.mutate({
+				id: page.id,
+				aiSeo: checked
+			});
+		};
+		$[1] = page.id;
+		$[2] = setSeo;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== page.aiSeo || $[5] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Switch, {
+			id: "ai-seo",
+			checked: page.aiSeo,
+			onCheckedChange: t2
+		});
+		$[4] = page.aiSeo;
+		$[5] = t2;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(Label, {
+			htmlFor: "ai-seo",
+			children: "AI metadata"
+		});
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== t3) {
+		t5 = /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [t3, t4]
+		});
+		$[8] = t3;
+		$[9] = t5;
+	} else t5 = $[9];
+	const t6 = page.metaTitle ?? "";
+	let t7;
+	if ($[10] !== page.id || $[11] !== setSeo) {
+		t7 = (value) => setSeo.mutate({
+			id: page.id,
+			metaTitle: value
+		});
+		$[10] = page.id;
+		$[11] = setSeo;
+		$[12] = t7;
+	} else t7 = $[12];
+	let t8;
+	if ($[13] !== page.aiSeo || $[14] !== t6 || $[15] !== t7) {
+		t8 = /* @__PURE__ */ jsx(DebouncedFieldEditor, {
+			label: "Page title",
+			placeholder: "Page title...",
+			initialValue: t6,
+			disabled: page.aiSeo,
+			onSave: t7
+		});
+		$[13] = page.aiSeo;
+		$[14] = t6;
+		$[15] = t7;
+		$[16] = t8;
+	} else t8 = $[16];
+	const t9 = page.metaDescription ?? "";
+	let t10;
+	if ($[17] !== page.id || $[18] !== setSeo) {
+		t10 = (value_0) => setSeo.mutate({
+			id: page.id,
+			metaDescription: value_0
+		});
+		$[17] = page.id;
+		$[18] = setSeo;
+		$[19] = t10;
+	} else t10 = $[19];
+	let t11;
+	if ($[20] !== page.aiSeo || $[21] !== t10 || $[22] !== t9) {
+		t11 = /* @__PURE__ */ jsx(DebouncedFieldEditor, {
+			label: "Page description",
+			placeholder: "Page description...",
+			initialValue: t9,
+			disabled: page.aiSeo,
+			rows: 2,
+			onSave: t10
+		});
+		$[20] = page.aiSeo;
+		$[21] = t10;
+		$[22] = t9;
+		$[23] = t11;
+	} else t11 = $[23];
+	const t12 = page.metaDescription ?? "";
+	let t13;
+	if ($[24] !== metaTitle || $[25] !== page || $[26] !== t12) {
+		t13 = /* @__PURE__ */ jsx(SearchEnginePreview, {
+			page,
+			metaTitle,
+			metaDescription: t12
+		});
+		$[24] = metaTitle;
+		$[25] = page;
+		$[26] = t12;
+		$[27] = t13;
+	} else t13 = $[27];
+	const t14 = page.metaDescription ?? "";
+	let t15;
+	if ($[28] !== layoutId || $[29] !== metaTitle || $[30] !== page || $[31] !== projectName || $[32] !== t14) {
+		t15 = /* @__PURE__ */ jsx(SocialPreviewSection, {
+			page,
+			metaTitle,
+			metaDescription: t14,
+			layoutId,
+			projectName
+		});
+		$[28] = layoutId;
+		$[29] = metaTitle;
+		$[30] = page;
+		$[31] = projectName;
+		$[32] = t14;
+		$[33] = t15;
+	} else t15 = $[33];
+	let t16;
+	if ($[34] !== t11 || $[35] !== t13 || $[36] !== t15 || $[37] !== t5 || $[38] !== t8) {
+		t16 = /* @__PURE__ */ jsxs("div", {
+			className: "space-y-4",
+			children: [
+				t5,
+				t8,
+				t11,
+				t13,
+				t15
+			]
+		});
+		$[34] = t11;
+		$[35] = t13;
+		$[36] = t15;
+		$[37] = t5;
+		$[38] = t8;
+		$[39] = t16;
+	} else t16 = $[39];
+	return t16;
+};
+const PageMarkdownSheet = (t0) => {
+	const $ = c(9);
+	const { open, onOpenChange, pageId, metaTitle, metaDescription } = t0;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsxs(SheetHeader, {
+			className: "border-b",
+			children: [/* @__PURE__ */ jsx(SheetTitle, { children: "Markdown content" }), /* @__PURE__ */ jsx(SheetDescription, { children: "How your content will be served to AI agents." })]
+		});
+		$[0] = t1;
+	} else t1 = $[0];
+	let t2;
+	if ($[1] !== metaDescription || $[2] !== metaTitle || $[3] !== pageId) {
+		t2 = /* @__PURE__ */ jsxs(SheetContent, {
+			side: "right",
+			className: "gap-0 data-[side=right]:sm:max-w-2xl",
+			children: [t1, /* @__PURE__ */ jsx("div", {
+				className: "flex-1 overflow-y-auto p-4",
+				children: /* @__PURE__ */ jsx(PageMarkdownPreview, {
+					pageId,
+					metaTitle,
+					metaDescription
+				})
+			})]
+		});
+		$[1] = metaDescription;
+		$[2] = metaTitle;
+		$[3] = pageId;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== onOpenChange || $[6] !== open || $[7] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Sheet, {
+			open,
+			onOpenChange,
+			children: t2
+		});
+		$[5] = onOpenChange;
+		$[6] = open;
+		$[7] = t2;
+		$[8] = t3;
+	} else t3 = $[8];
+	return t3;
+};
+const PageMarkdownContent = (t0) => {
+	const $ = c(5);
+	const { pageId } = t0;
+	const { page, metaTitle } = usePageMetadataData(pageId);
+	if (!page) {
+		let t1;
+		if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+			t1 = /* @__PURE__ */ jsx(Spinner, { className: "size-4" });
+			$[0] = t1;
+		} else t1 = $[0];
+		return t1;
+	}
+	const t1 = page.metaDescription ?? "";
+	let t2;
+	if ($[1] !== metaTitle || $[2] !== pageId || $[3] !== t1) {
+		t2 = /* @__PURE__ */ jsx(PageMarkdownPreview, {
+			pageId,
+			metaTitle,
+			metaDescription: t1
+		});
+		$[1] = metaTitle;
+		$[2] = pageId;
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	return t2;
+};
+function truncateText(text, maxLen) {
+	if (text.length <= maxLen) return text;
+	return text.slice(0, maxLen) + "...";
+}
+const SearchEnginePreview = (t0) => {
+	const $ = c(19);
+	const { page, metaTitle, metaDescription } = t0;
+	const localized = useLocalizedPath();
+	const origin = typeof window !== "undefined" ? window.location.origin : "";
+	let t1;
+	if ($[0] !== localized || $[1] !== page.fullPath) {
+		t1 = localized(page.fullPath);
+		$[0] = localized;
+		$[1] = page.fullPath;
+		$[2] = t1;
+	} else t1 = $[2];
+	const url = `${origin}${t1}`;
+	let t2;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(Label, { children: "Search engine preview" });
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-1.5",
+			children: [t2, /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+				delay: 50,
+				render: /* @__PURE__ */ jsx(Info, { className: "text-muted-foreground size-3.5" })
+			}), /* @__PURE__ */ jsx(TooltipContent, { children: "Titles are cropped after 60 characters and descriptions after 155, like on Google Search results." })] })]
+		});
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== url) {
+		t4 = /* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground truncate text-xs",
+			children: url
+		});
+		$[5] = url;
+		$[6] = t4;
+	} else t4 = $[6];
+	const t5 = metaTitle || "Untitled";
+	let t6;
+	if ($[7] !== t5) {
+		t6 = truncateText(t5, 60);
+		$[7] = t5;
+		$[8] = t6;
+	} else t6 = $[8];
+	let t7;
+	if ($[9] !== t6) {
+		t7 = /* @__PURE__ */ jsx("p", {
+			className: "text-base font-medium text-blue-600 dark:text-blue-400",
+			children: t6
+		});
+		$[9] = t6;
+		$[10] = t7;
+	} else t7 = $[10];
+	const t8 = metaDescription || "No description";
+	let t9;
+	if ($[11] !== t8) {
+		t9 = truncateText(t8, 155);
+		$[11] = t8;
+		$[12] = t9;
+	} else t9 = $[12];
+	let t10;
+	if ($[13] !== t9) {
+		t10 = /* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground line-clamp-2 text-xs",
+			children: t9
+		});
+		$[13] = t9;
+		$[14] = t10;
+	} else t10 = $[14];
+	let t11;
+	if ($[15] !== t10 || $[16] !== t4 || $[17] !== t7) {
+		t11 = /* @__PURE__ */ jsxs("div", {
+			className: "space-y-1 pt-2",
+			children: [t3, /* @__PURE__ */ jsxs("div", {
+				className: "border-border space-y-0.5 rounded-lg border p-3",
+				children: [
+					t4,
+					t7,
+					t10
+				]
+			})]
+		});
+		$[15] = t10;
+		$[16] = t4;
+		$[17] = t7;
+		$[18] = t11;
+	} else t11 = $[18];
+	return t11;
+};
+const SocialPreviewSection = (t0) => {
+	const $ = c(68);
+	const { page, metaTitle, metaDescription, layoutId, projectName } = t0;
+	const studioCache = useStudioCache();
+	const pageMetaTitle = page.metaTitle ?? page.pathSegment;
+	let t1;
+	if ($[0] !== layoutId || $[1] !== page.metaDescription || $[2] !== pageMetaTitle || $[3] !== projectName) {
+		let t2;
+		if ($[5] !== layoutId) {
+			t2 = layoutId && { layoutId };
+			$[5] = layoutId;
+			$[6] = t2;
+		} else t2 = $[6];
+		let t3;
+		if ($[7] !== page.metaDescription) {
+			t3 = page.metaDescription && { description: page.metaDescription };
+			$[7] = page.metaDescription;
+			$[8] = t3;
+		} else t3 = $[8];
+		let t4;
+		if ($[9] !== projectName) {
+			t4 = projectName && { projectName };
+			$[9] = projectName;
+			$[10] = t4;
+		} else t4 = $[10];
+		t1 = new URLSearchParams({
+			...t2,
+			title: pageMetaTitle,
+			...t3,
+			...t4
+		}).toString();
+		$[0] = layoutId;
+		$[1] = page.metaDescription;
+		$[2] = pageMetaTitle;
+		$[3] = projectName;
+		$[4] = t1;
+	} else t1 = $[4];
+	const generatedOgImage = `/og?${t1}`;
+	const ogImage = page.customOgImageUrl ?? generatedOgImage;
+	const localized = useLocalizedPath();
+	const origin = typeof window !== "undefined" ? window.location.origin : "";
+	let t2;
+	if ($[11] !== localized || $[12] !== page.fullPath) {
+		t2 = localized(page.fullPath);
+		$[11] = localized;
+		$[12] = page.fullPath;
+		$[13] = t2;
+	} else t2 = $[13];
+	const url = `${origin}${t2}`;
+	const fileInputRef = React.useRef(null);
+	let t3;
+	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = pageMutations.uploadCustomOgImage();
+		$[14] = t3;
+	} else t3 = $[14];
+	let t4;
+	if ($[15] !== page.id || $[16] !== studioCache) {
+		t4 = {
+			...t3,
+			onSuccess: () => {
+				studioCache.invalidate(reads.page({ id: page.id }));
+			},
+			onError: _temp7
+		};
+		$[15] = page.id;
+		$[16] = studioCache;
+		$[17] = t4;
+	} else t4 = $[17];
+	const uploadCustomOgImage = useMutation(t4);
+	let t5;
+	if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = pageMutations.deleteCustomOgImage();
+		$[18] = t5;
+	} else t5 = $[18];
+	let t6;
+	if ($[19] !== page.id || $[20] !== studioCache) {
+		t6 = {
+			...t5,
+			onSuccess: () => {
+				studioCache.invalidate(reads.page({ id: page.id }));
+			},
+			onError: _temp8
+		};
+		$[19] = page.id;
+		$[20] = studioCache;
+		$[21] = t6;
+	} else t6 = $[21];
+	const deleteCustomOgImage = useMutation(t6);
+	const hasCustomImage = !!page.customOgImageUrl;
+	const isBusy = uploadCustomOgImage.isPending || deleteCustomOgImage.isPending;
+	let t7;
+	if ($[22] !== page.id || $[23] !== uploadCustomOgImage) {
+		t7 = (files) => {
+			const file = files[0];
+			if (file) uploadCustomOgImage.mutate({
+				pageId: page.id,
+				file
+			});
+		};
+		$[22] = page.id;
+		$[23] = uploadCustomOgImage;
+		$[24] = t7;
+	} else t7 = $[24];
+	const handleFiles = t7;
+	let t8;
+	if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = /* @__PURE__ */ jsx(Label, { children: "Social preview" });
+		$[25] = t8;
+	} else t8 = $[25];
+	let t9;
+	if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = () => fileInputRef.current?.click();
+		$[26] = t9;
+	} else t9 = $[26];
+	let t10;
+	if ($[27] !== uploadCustomOgImage.isPending) {
+		t10 = uploadCustomOgImage.isPending ? /* @__PURE__ */ jsx(Spinner, {}) : /* @__PURE__ */ jsx(Upload, { className: "size-3.5" });
+		$[27] = uploadCustomOgImage.isPending;
+		$[28] = t10;
+	} else t10 = $[28];
+	const t11 = hasCustomImage ? "Replace custom image" : "Upload custom image";
+	let t12;
+	if ($[29] !== isBusy || $[30] !== t10 || $[31] !== t11) {
+		t12 = /* @__PURE__ */ jsxs(Button, {
+			type: "button",
+			variant: "secondary",
+			size: "sm",
+			disabled: isBusy,
+			onClick: t9,
+			children: [t10, t11]
+		});
+		$[29] = isBusy;
+		$[30] = t10;
+		$[31] = t11;
+		$[32] = t12;
+	} else t12 = $[32];
+	let t13;
+	if ($[33] !== deleteCustomOgImage || $[34] !== hasCustomImage || $[35] !== isBusy || $[36] !== page.id) {
+		t13 = hasCustomImage && /* @__PURE__ */ jsxs(Button, {
+			type: "button",
+			variant: "ghost",
+			disabled: isBusy,
+			onClick: () => deleteCustomOgImage.mutate({ pageId: page.id }),
+			"aria-label": "Remove custom image",
+			children: [
+				deleteCustomOgImage.isPending ? /* @__PURE__ */ jsx(Spinner, { className: "text-muted-foreground" }) : /* @__PURE__ */ jsx(Trash2, { className: "text-muted-foreground" }),
+				" ",
+				"Clear"
+			]
+		});
+		$[33] = deleteCustomOgImage;
+		$[34] = hasCustomImage;
+		$[35] = isBusy;
+		$[36] = page.id;
+		$[37] = t13;
+	} else t13 = $[37];
+	let t14;
+	if ($[38] !== handleFiles) {
+		t14 = /* @__PURE__ */ jsx("input", {
+			type: "file",
+			ref: fileInputRef,
+			className: "hidden",
+			accept: "image/jpeg,image/png,image/gif,image/webp",
+			onChange: (e) => {
+				if (e.target.files) handleFiles(e.target.files);
+				e.target.value = "";
+			}
+		});
+		$[38] = handleFiles;
+		$[39] = t14;
+	} else t14 = $[39];
+	let t15;
+	if ($[40] !== t12 || $[41] !== t13 || $[42] !== t14) {
+		t15 = /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [
+				t12,
+				t13,
+				t14
+			]
+		});
+		$[40] = t12;
+		$[41] = t13;
+		$[42] = t14;
+		$[43] = t15;
+	} else t15 = $[43];
+	const t16 = hasCustomImage ? "Drop image to replace" : "Drop image to upload";
+	let t17;
+	if ($[44] === Symbol.for("react.memo_cache_sentinel")) {
+		t17 = { aspectRatio: "1200 / 630" };
+		$[44] = t17;
+	} else t17 = $[44];
+	let t18;
+	if ($[45] !== ogImage) {
+		t18 = /* @__PURE__ */ jsx("img", {
+			src: ogImage,
+			alt: "",
+			className: "w-full object-cover",
+			style: t17
+		});
+		$[45] = ogImage;
+		$[46] = t18;
+	} else t18 = $[46];
+	let t19;
+	if ($[47] !== handleFiles || $[48] !== t16 || $[49] !== t18) {
+		t19 = /* @__PURE__ */ jsx(UploadDropZone, {
+			onDrop: handleFiles,
+			label: t16,
+			className: "block",
+			children: t18
+		});
+		$[47] = handleFiles;
+		$[48] = t16;
+		$[49] = t18;
+		$[50] = t19;
+	} else t19 = $[50];
+	const t20 = metaTitle || "Untitled";
+	let t21;
+	if ($[51] !== t20) {
+		t21 = /* @__PURE__ */ jsx("p", {
+			className: "text-foreground truncate text-sm font-semibold",
+			children: t20
+		});
+		$[51] = t20;
+		$[52] = t21;
+	} else t21 = $[52];
+	const t22 = metaDescription || "No description";
+	let t23;
+	if ($[53] !== t22) {
+		t23 = /* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground line-clamp-2 text-xs",
+			children: t22
+		});
+		$[53] = t22;
+		$[54] = t23;
+	} else t23 = $[54];
+	let t24;
+	if ($[55] === Symbol.for("react.memo_cache_sentinel")) {
+		t24 = /* @__PURE__ */ jsx(Globe, { className: "size-3 shrink-0" });
+		$[55] = t24;
+	} else t24 = $[55];
+	let t25;
+	if ($[56] !== url) {
+		t25 = /* @__PURE__ */ jsx("div", {
+			className: "pt-1.5",
+			children: /* @__PURE__ */ jsxs("p", {
+				className: "text-muted-foreground flex items-center gap-1 text-xs",
+				children: [t24, /* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					children: url
+				})]
+			})
+		});
+		$[56] = url;
+		$[57] = t25;
+	} else t25 = $[57];
+	let t26;
+	if ($[58] !== t21 || $[59] !== t23 || $[60] !== t25) {
+		t26 = /* @__PURE__ */ jsxs("div", {
+			className: "space-y-1.5 border-t px-3 py-2.5",
+			children: [
+				t21,
+				t23,
+				t25
+			]
+		});
+		$[58] = t21;
+		$[59] = t23;
+		$[60] = t25;
+		$[61] = t26;
+	} else t26 = $[61];
+	let t27;
+	if ($[62] !== t19 || $[63] !== t26) {
+		t27 = /* @__PURE__ */ jsxs("div", {
+			className: "border-border max-w-xl overflow-hidden rounded-lg border",
+			children: [t19, t26]
+		});
+		$[62] = t19;
+		$[63] = t26;
+		$[64] = t27;
+	} else t27 = $[64];
+	let t28;
+	if ($[65] !== t15 || $[66] !== t27) {
+		t28 = /* @__PURE__ */ jsxs("div", {
+			className: "space-y-2 pt-2",
+			children: [
+				t8,
+				t15,
+				t27
+			]
+		});
+		$[65] = t15;
+		$[66] = t27;
+		$[67] = t28;
+	} else t28 = $[67];
+	return t28;
+};
+const PageMarkdownPreview = (t0) => {
+	const $ = c(8);
+	const { pageId, metaTitle, metaDescription } = t0;
+	let t1;
+	if ($[0] !== pageId) {
+		t1 = reads.pageMarkdown(pageId);
+		$[0] = pageId;
+		$[1] = t1;
+	} else t1 = $[1];
+	const { data: markdown } = useReadQuery(t1);
+	if (markdown === void 0) {
+		let t2;
+		if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+			t2 = /* @__PURE__ */ jsxs("div", {
+				className: "text-muted-foreground flex items-center gap-2 py-2 text-sm",
+				children: [/* @__PURE__ */ jsx(Spinner, { className: "size-3.5" }), "Loading..."]
+			});
+			$[2] = t2;
+		} else t2 = $[2];
+		return t2;
+	}
+	const t2 = `title: "${metaTitle}"`;
+	const t3 = `description: "${metaDescription}"`;
+	let frontmatterLines;
+	if ($[3] !== t2 || $[4] !== t3) {
+		frontmatterLines = [
+			"---",
+			t2,
+			t3
+		];
+		frontmatterLines.push("---");
+		$[3] = t2;
+		$[4] = t3;
+		$[5] = frontmatterLines;
+	} else frontmatterLines = $[5];
+	const fullMarkdown = frontmatterLines.join("\n") + "\n\n" + (markdown ?? "");
+	let t4;
+	if ($[6] !== fullMarkdown) {
+		t4 = /* @__PURE__ */ jsx(ShikiMarkdown, { code: fullMarkdown });
+		$[6] = fullMarkdown;
+		$[7] = t4;
+	} else t4 = $[7];
+	return t4;
+};
+function _temp() {
+	try {
+		return localStorage.getItem(SHOW_PAGE_SETTINGS_STORAGE_KEY) === "true";
+	} catch {
+		return false;
+	}
+}
+function _temp2() {
+	toast.error("Could not update page");
+}
+function _temp3() {
+	toast.error("Could not update page layout");
+}
+function _temp4(field) {
+	return /* @__PURE__ */ jsx(PageNicknameField, {
+		value: field.state.value,
+		onChange: field.handleChange
+	});
+}
+function _temp5(s) {
+	return {
+		isSubmitting: s.isSubmitting,
+		isPristine: s.isPristine
+	};
+}
+function _temp6(t0) {
+	const { isSubmitting, isPristine } = t0;
+	return /* @__PURE__ */ jsxs(Button, {
+		type: "submit",
+		disabled: isSubmitting || isPristine,
+		children: [
+			isSubmitting && /* @__PURE__ */ jsx(Spinner, {}),
+			"Save changes",
+			isSubmitting && "..."
+		]
+	});
+}
+function _temp7(error) {
+	toast.error(error.message || "Could not upload image");
+}
+function _temp8() {
+	toast.error("Could not remove image");
+}
+
+//#endregion
+export { PageInfo, PageMarkdownContent, PageSeoContent };