camox 0.32.0 → 0.33.0

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

@@ -0,0 +1,1453 @@
+import { useProjectSlug } from "../../../lib/auth.js";
+import { blockQueries, layoutQueries, pageMutations, pageQueries, projectQueries } from "../../../lib/queries.js";
+import { trackClientEvent } from "../../../lib/telemetry-client.js";
+import { useCamoxApp } from "../../provider/components/CamoxAppContext.js";
+import { PageLocationFieldset } from "./PageLocationFieldset.js";
+import { PageNicknameField } from "./PageNicknameField.js";
+import { UploadDropZone } from "../../content/components/UploadDropZone.js";
+import { useDebouncedField } from "../../../hooks/use-debounced-field.js";
+import { DebouncedFieldEditor } from "./DebouncedFieldEditor.js";
+import { ShikiMarkdown } from "./ShikiMarkdown.js";
+import { c } from "react/compiler-runtime";
+import { Input } from "@camox/ui/input";
+import { Label } from "@camox/ui/label";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useNavigate } from "@tanstack/react-router";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { toast } from "@camox/ui/toaster";
+import { Button } from "@camox/ui/button";
+import { Globe, Info, Pencil, Trash2, Upload } from "lucide-react";
+import { Alert, AlertDescription, AlertTitle } from "@camox/ui/alert";
+import { Spinner } from "@camox/ui/spinner";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@camox/ui/dialog";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@camox/ui/select";
+import { useForm } from "@tanstack/react-form";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText } from "@camox/ui/input-group";
+import { Switch } from "@camox/ui/switch";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@camox/ui/tooltip";
+
+//#region src/features/preview/components/PageInfoSidebar.tsx
+const usePageMetadataData = (pageId) => {
+	const $ = c(29);
+	if ($[0] !== "7c7e91a25652fa060b67c4ffcd921b50c9111bae47d2051cc0eaca87fb060c3e") {
+		for (let $i = 0; $i < 29; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "7c7e91a25652fa060b67c4ffcd921b50c9111bae47d2051cc0eaca87fb060c3e";
+	}
+	const projectSlug = useProjectSlug();
+	const camoxApp = useCamoxApp();
+	let t0;
+	if ($[1] !== pageId) {
+		t0 = pageQueries.getById(pageId);
+		$[1] = pageId;
+		$[2] = t0;
+	} else t0 = $[2];
+	const { data: page } = useQuery(t0);
+	let t1;
+	if ($[3] !== projectSlug) {
+		t1 = projectQueries.getBySlug(projectSlug);
+		$[3] = projectSlug;
+		$[4] = t1;
+	} else t1 = $[4];
+	const { data: project } = useQuery(t1);
+	let t2;
+	if ($[5] !== project?.id) {
+		t2 = pageQueries.list(project?.id ?? 0);
+		$[5] = project?.id;
+		$[6] = t2;
+	} else t2 = $[6];
+	const t3 = !!project;
+	let t4;
+	if ($[7] !== t2 || $[8] !== t3) {
+		t4 = {
+			...t2,
+			enabled: t3
+		};
+		$[7] = t2;
+		$[8] = t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	const { data: pages } = useQuery(t4);
+	let t5;
+	if ($[10] !== project?.id) {
+		t5 = layoutQueries.list(project?.id ?? 0);
+		$[10] = project?.id;
+		$[11] = t5;
+	} else t5 = $[11];
+	const t6 = !!project;
+	let t7;
+	if ($[12] !== t5 || $[13] !== t6) {
+		t7 = {
+			...t5,
+			enabled: t6
+		};
+		$[12] = t5;
+		$[13] = t6;
+		$[14] = t7;
+	} else t7 = $[14];
+	const { data: layouts } = useQuery(t7);
+	let pageLayoutRecord;
+	let t8;
+	if ($[15] !== camoxApp || $[16] !== layouts || $[17] !== page || $[18] !== project?.name) {
+		pageLayoutRecord = layouts?.find((l) => l.id === page?.layoutId);
+		const layoutDef = pageLayoutRecord ? camoxApp.getLayoutById(pageLayoutRecord.layoutId) : void 0;
+		t8 = layoutDef && page ? layoutDef._internal.buildMetaTitle({
+			pageMetaTitle: page.metaTitle ?? "",
+			projectName: project?.name ?? "",
+			pageFullPath: page.fullPath
+		}) : page?.metaTitle ?? "";
+		$[15] = camoxApp;
+		$[16] = layouts;
+		$[17] = page;
+		$[18] = project?.name;
+		$[19] = pageLayoutRecord;
+		$[20] = t8;
+	} else {
+		pageLayoutRecord = $[19];
+		t8 = $[20];
+	}
+	const metaTitle = t8;
+	let t9;
+	if ($[21] !== camoxApp || $[22] !== layouts || $[23] !== metaTitle || $[24] !== page || $[25] !== pageLayoutRecord || $[26] !== pages || $[27] !== project) {
+		t9 = {
+			page,
+			project,
+			pages,
+			layouts,
+			pageLayoutRecord,
+			metaTitle,
+			camoxApp
+		};
+		$[21] = camoxApp;
+		$[22] = layouts;
+		$[23] = metaTitle;
+		$[24] = page;
+		$[25] = pageLayoutRecord;
+		$[26] = pages;
+		$[27] = project;
+		$[28] = t9;
+	} else t9 = $[28];
+	return t9;
+};
+const PageInfoSidebar = (t0) => {
+	const $ = c(40);
+	if ($[0] !== "7c7e91a25652fa060b67c4ffcd921b50c9111bae47d2051cc0eaca87fb060c3e") {
+		for (let $i = 0; $i < 40; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "7c7e91a25652fa060b67c4ffcd921b50c9111bae47d2051cc0eaca87fb060c3e";
+	}
+	const { pageId } = t0;
+	const data = usePageMetadataData(pageId);
+	const { page, metaTitle } = data;
+	const [isStructureModalOpen, setIsStructureModalOpen] = React.useState(false);
+	const [isSeoModalOpen, setIsSeoModalOpen] = React.useState(false);
+	const [isMarkdownModalOpen, setIsMarkdownModalOpen] = React.useState(false);
+	if (!page) {
+		let t1;
+		if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+			t1 = /* @__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..."]
+			});
+			$[1] = t1;
+		} else t1 = $[1];
+		return t1;
+	}
+	let t1;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx("p", {
+			className: "text-base font-semibold",
+			children: "About this page"
+		});
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== data) {
+		t2 = /* @__PURE__ */ jsx(PageNicknameSidebarEditor, { data });
+		$[3] = data;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(Label, { children: "Page path" });
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== page.fullPath) {
+		t4 = /* @__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] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = () => setIsStructureModalOpen(true);
+		$[8] = t5;
+	} else t5 = $[8];
+	let t6;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx(InputGroupAddon, {
+			align: "inline-end",
+			children: /* @__PURE__ */ jsx(InputGroupButton, {
+				type: "button",
+				variant: "ghost",
+				size: "icon-xs",
+				onClick: t5,
+				"aria-label": "Edit page structure",
+				children: /* @__PURE__ */ jsx(Pencil, { className: "size-4" })
+			})
+		});
+		$[9] = t6;
+	} else t6 = $[9];
+	let t7;
+	if ($[10] !== t4) {
+		t7 = /* @__PURE__ */ jsxs("div", {
+			className: "space-y-2",
+			children: [t3, /* @__PURE__ */ jsxs(InputGroup, {
+				className: "h-auto min-h-9 px-1",
+				children: [t4, t6]
+			})]
+		});
+		$[10] = t4;
+		$[11] = t7;
+	} else t7 = $[11];
+	let t8;
+	if ($[12] !== data) {
+		t8 = /* @__PURE__ */ jsx(PageLayoutSidebarSelect, { data });
+		$[12] = data;
+		$[13] = t8;
+	} else t8 = $[13];
+	let t9;
+	if ($[14] !== t2 || $[15] !== t7 || $[16] !== t8) {
+		t9 = /* @__PURE__ */ jsxs("section", {
+			className: "space-y-4",
+			children: [
+				t1,
+				t2,
+				t7,
+				t8
+			]
+		});
+		$[14] = t2;
+		$[15] = t7;
+		$[16] = t8;
+		$[17] = t9;
+	} else t9 = $[17];
+	let t10;
+	if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = /* @__PURE__ */ jsx(Label, { children: "SEO" });
+		$[18] = t10;
+	} else t10 = $[18];
+	let t11;
+	if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = /* @__PURE__ */ jsxs("div", {
+			className: "space-y-2",
+			children: [t10, /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "outline",
+				className: "w-full",
+				onClick: () => setIsSeoModalOpen(true),
+				children: "Manage SEO metadata"
+			})]
+		});
+		$[19] = t11;
+	} else t11 = $[19];
+	let t12;
+	if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+		t12 = /* @__PURE__ */ jsx(Label, { children: "Markdown" });
+		$[20] = t12;
+	} else t12 = $[20];
+	let t13;
+	if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
+		t13 = /* @__PURE__ */ jsxs("div", {
+			className: "space-y-2",
+			children: [t12, /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "outline",
+				className: "w-full",
+				onClick: () => setIsMarkdownModalOpen(true),
+				children: "View page markdown"
+			})]
+		});
+		$[21] = t13;
+	} else t13 = $[21];
+	let t14;
+	if ($[22] !== t9) {
+		t14 = /* @__PURE__ */ jsxs("div", {
+			className: "flex-1 space-y-4 overflow-auto p-2 pt-4",
+			children: [
+				t9,
+				t11,
+				t13
+			]
+		});
+		$[22] = t9;
+		$[23] = t14;
+	} else t14 = $[23];
+	let t15;
+	if ($[24] !== isStructureModalOpen || $[25] !== page.id) {
+		t15 = /* @__PURE__ */ jsx(PageStructureModal, {
+			open: isStructureModalOpen,
+			onOpenChange: setIsStructureModalOpen,
+			pageId: page.id
+		});
+		$[24] = isStructureModalOpen;
+		$[25] = page.id;
+		$[26] = t15;
+	} else t15 = $[26];
+	let t16;
+	if ($[27] !== isSeoModalOpen || $[28] !== page.id) {
+		t16 = /* @__PURE__ */ jsx(PageSeoModal, {
+			open: isSeoModalOpen,
+			onOpenChange: setIsSeoModalOpen,
+			pageId: page.id
+		});
+		$[27] = isSeoModalOpen;
+		$[28] = page.id;
+		$[29] = t16;
+	} else t16 = $[29];
+	const t17 = page.metaDescription ?? "";
+	let t18;
+	if ($[30] !== isMarkdownModalOpen || $[31] !== metaTitle || $[32] !== page.id || $[33] !== t17) {
+		t18 = /* @__PURE__ */ jsx(PageMarkdownModal, {
+			open: isMarkdownModalOpen,
+			onOpenChange: setIsMarkdownModalOpen,
+			pageId: page.id,
+			metaTitle,
+			metaDescription: t17
+		});
+		$[30] = isMarkdownModalOpen;
+		$[31] = metaTitle;
+		$[32] = page.id;
+		$[33] = t17;
+		$[34] = t18;
+	} else t18 = $[34];
+	let t19;
+	if ($[35] !== t14 || $[36] !== t15 || $[37] !== t16 || $[38] !== t18) {
+		t19 = /* @__PURE__ */ jsxs(Fragment, { children: [
+			t14,
+			t15,
+			t16,
+			t18
+		] });
+		$[35] = t14;
+		$[36] = t15;
+		$[37] = t16;
+		$[38] = t18;
+		$[39] = t19;
+	} else t19 = $[39];
+	return t19;
+};
+const PageNicknameSidebarEditor = (t0) => {
+	const $ = c(21);
+	if ($[0] !== "7c7e91a25652fa060b67c4ffcd921b50c9111bae47d2051cc0eaca87fb060c3e") {
+		for (let $i = 0; $i < 21; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "7c7e91a25652fa060b67c4ffcd921b50c9111bae47d2051cc0eaca87fb060c3e";
+	}
+	const { data } = t0;
+	const { page } = data;
+	let t1;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = pageMutations.update();
+		$[1] = t1;
+	} else t1 = $[1];
+	const updatePage = useMutation(t1);
+	const inputId = React.useId();
+	let t2;
+	if ($[2] !== page || $[3] !== 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
+			}, {
+				onSuccess: () => {
+					trackClientEvent("page_updated", {
+						projectId: page.projectId,
+						changes: {
+							nickname: true,
+							path: false,
+							layout: false,
+							parent: false
+						}
+					});
+				},
+				onError: _temp
+			});
+		};
+		$[2] = page;
+		$[3] = updatePage;
+		$[4] = t2;
+	} else t2 = $[4];
+	const saveNickname = t2;
+	const { value: value_0, setValue, onFocus, onBlur } = useDebouncedField(page?.nickname ?? "", saveNickname);
+	if (!page) return null;
+	let t3;
+	if ($[5] !== inputId) {
+		t3 = /* @__PURE__ */ jsx(Label, {
+			htmlFor: inputId,
+			children: "Page nickname"
+		});
+		$[5] = inputId;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] === 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." })] });
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== t3) {
+		t5 = /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-1.5",
+			children: [t3, t4]
+		});
+		$[8] = t3;
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] !== setValue) {
+		t6 = (e) => setValue(e.target.value);
+		$[10] = setValue;
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== inputId || $[13] !== onBlur || $[14] !== onFocus || $[15] !== t6 || $[16] !== value_0) {
+		t7 = /* @__PURE__ */ jsx(Input, {
+			id: inputId,
+			value: value_0,
+			onChange: t6,
+			onFocus,
+			onBlur,
+			placeholder: "e.g. Home, Pricing, About",
+			maxLength: 80
+		});
+		$[12] = inputId;
+		$[13] = onBlur;
+		$[14] = onFocus;
+		$[15] = t6;
+		$[16] = value_0;
+		$[17] = t7;
+	} else t7 = $[17];
+	let t8;
+	if ($[18] !== t5 || $[19] !== t7) {
+		t8 = /* @__PURE__ */ jsxs("div", {
+			className: "space-y-2",
+			children: [t5, t7]
+		});
+		$[18] = t5;
+		$[19] = t7;
+		$[20] = t8;
+	} else t8 = $[20];
+	return t8;
+};
+const PageLayoutSidebarSelect = (t0) => {
+	const $ = c(30);
+	if ($[0] !== "7c7e91a25652fa060b67c4ffcd921b50c9111bae47d2051cc0eaca87fb060c3e") {
+		for (let $i = 0; $i < 30; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "7c7e91a25652fa060b67c4ffcd921b50c9111bae47d2051cc0eaca87fb060c3e";
+	}
+	const { data } = t0;
+	const { page, layouts, camoxApp } = data;
+	let t1;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = pageMutations.setLayout();
+		$[1] = t1;
+	} else t1 = $[1];
+	const setLayout = useMutation(t1);
+	if (!page || !layouts || layouts.length === 0) return null;
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(Label, { children: "Layout" });
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] === 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."
+			})] })]
+		});
+		$[3] = t3;
+	} else t3 = $[3];
+	const t4 = page.layoutId ? String(page.layoutId) : "";
+	let t5;
+	if ($[4] !== page.id || $[5] !== page.layoutId || $[6] !== page.projectId || $[7] !== setLayout) {
+		t5 = (value) => {
+			const layoutId = Number(value);
+			if (layoutId === page.layoutId) return;
+			setLayout.mutate({
+				id: page.id,
+				layoutId
+			}, {
+				onSuccess: () => {
+					trackClientEvent("page_updated", {
+						projectId: page.projectId,
+						changes: {
+							nickname: false,
+							path: false,
+							layout: true,
+							parent: false
+						}
+					});
+				},
+				onError: _temp2
+			});
+		};
+		$[4] = page.id;
+		$[5] = page.layoutId;
+		$[6] = page.projectId;
+		$[7] = setLayout;
+		$[8] = t5;
+	} else t5 = $[8];
+	let t6;
+	if ($[9] !== camoxApp || $[10] !== layouts) {
+		let t7;
+		if ($[12] !== camoxApp) {
+			t7 = (t) => ({
+				value: String(t.id),
+				label: camoxApp.getLayoutById(t.layoutId)?._internal.title ?? t.layoutId
+			});
+			$[12] = camoxApp;
+			$[13] = t7;
+		} else t7 = $[13];
+		t6 = layouts.map(t7);
+		$[9] = camoxApp;
+		$[10] = layouts;
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select a layout" });
+		$[14] = t7;
+	} else t7 = $[14];
+	let t8;
+	if ($[15] !== setLayout.isPending) {
+		t8 = /* @__PURE__ */ jsx(SelectTrigger, {
+			disabled: setLayout.isPending,
+			className: "w-full",
+			children: t7
+		});
+		$[15] = setLayout.isPending;
+		$[16] = t8;
+	} else t8 = $[16];
+	let t9;
+	if ($[17] !== camoxApp || $[18] !== layouts) {
+		let t10;
+		if ($[20] !== camoxApp) {
+			t10 = (t_0) => /* @__PURE__ */ jsx(SelectItem, {
+				value: String(t_0.id),
+				children: camoxApp.getLayoutById(t_0.layoutId)?._internal.title ?? t_0.layoutId
+			}, t_0.id);
+			$[20] = camoxApp;
+			$[21] = t10;
+		} else t10 = $[21];
+		t9 = layouts.map(t10);
+		$[17] = camoxApp;
+		$[18] = layouts;
+		$[19] = t9;
+	} else t9 = $[19];
+	let t10;
+	if ($[22] !== t9) {
+		t10 = /* @__PURE__ */ jsx(SelectContent, { children: t9 });
+		$[22] = t9;
+		$[23] = t10;
+	} else t10 = $[23];
+	let t11;
+	if ($[24] !== t10 || $[25] !== t4 || $[26] !== t5 || $[27] !== t6 || $[28] !== t8) {
+		t11 = /* @__PURE__ */ jsxs("div", {
+			className: "space-y-2",
+			children: [t3, /* @__PURE__ */ jsxs(Select, {
+				value: t4,
+				onValueChange: t5,
+				items: t6,
+				children: [t8, t10]
+			})]
+		});
+		$[24] = t10;
+		$[25] = t4;
+		$[26] = t5;
+		$[27] = t6;
+		$[28] = t8;
+		$[29] = t11;
+	} else t11 = $[29];
+	return t11;
+};
+const PageStructureModal = (t0) => {
+	const $ = c(10);
+	if ($[0] !== "7c7e91a25652fa060b67c4ffcd921b50c9111bae47d2051cc0eaca87fb060c3e") {
+		for (let $i = 0; $i < 10; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "7c7e91a25652fa060b67c4ffcd921b50c9111bae47d2051cc0eaca87fb060c3e";
+	}
+	const { open, onOpenChange, pageId } = t0;
+	const data = usePageMetadataData(pageId);
+	const { page } = data;
+	let t1;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogTitle, { children: "Page page" }), /* @__PURE__ */ jsx(DialogDescription, { children: "Update the URL path for this page." })] });
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== data || $[3] !== onOpenChange || $[4] !== page) {
+		t2 = /* @__PURE__ */ jsxs(DialogContent, {
+			className: "max-h-[90vh] overflow-y-auto sm:max-w-2xl",
+			children: [t1, page ? /* @__PURE__ */ jsx(PageStructureEditor, {
+				data,
+				includeNickname: false,
+				includeLayout: false,
+				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..."]
+			})]
+		});
+		$[2] = data;
+		$[3] = onOpenChange;
+		$[4] = page;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== onOpenChange || $[7] !== open || $[8] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Dialog, {
+			open,
+			onOpenChange,
+			children: t2
+		});
+		$[6] = onOpenChange;
+		$[7] = open;
+		$[8] = t2;
+		$[9] = t3;
+	} else t3 = $[9];
+	return t3;
+};
+const PageStructureEditor = ({ data, includeNickname = true, includeLayout = true, onSaved }) => {
+	const { page, project, pages, layouts, camoxApp } = data;
+	const updatePage = useMutation(pageMutations.update());
+	const setLayout = useMutation(pageMutations.setLayout());
+	const navigate = useNavigate();
+	const form = useForm({
+		defaultValues: {
+			nickname: page?.nickname ?? "",
+			pathSegment: page?.pathSegment ?? "",
+			parentPageId: page?.parentPageId ?? void 0,
+			layoutId: page?.layoutId ?? 0
+		},
+		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) await setLayout.mutateAsync({
+					id: page.id,
+					layoutId: values.value.layoutId
+				});
+				trackClientEvent("page_updated", {
+					projectId: page.projectId,
+					changes: {
+						nickname: nickname !== page.nickname,
+						path: values.value.pathSegment !== page.pathSegment,
+						layout: includeLayout && values.value.layoutId !== page.layoutId,
+						parent: values.value.parentPageId !== page.parentPageId
+					}
+				});
+				toast.success(`Updated ${nickname} page`);
+				form.reset();
+				onSaved?.();
+				await navigate({ to: fullPath });
+			} catch (error) {
+				console.error("Failed to update page:", error);
+				toast.error("Could not update page");
+			}
+		}
+	});
+	React.useEffect(() => {
+		if (!page) return;
+		form.reset({
+			nickname: page.nickname,
+			pathSegment: page.pathSegment,
+			parentPageId: page.parentPageId ?? void 0,
+			layoutId: page.layoutId ?? 0
+		});
+	}, [page?.id]);
+	if (!page || !project) return null;
+	const isRootPage = page.fullPath === "/";
+	return /* @__PURE__ */ jsxs("form", {
+		onSubmit: (e) => {
+			e.preventDefault();
+			e.stopPropagation();
+			form.handleSubmit();
+		},
+		className: "space-y-4",
+		children: [
+			includeNickname && /* @__PURE__ */ jsx(form.Field, {
+				name: "nickname",
+				children: (field) => /* @__PURE__ */ jsx(PageNicknameField, {
+					value: field.state.value,
+					onChange: field.handleChange
+				})
+			}),
+			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
+					})
+				})
+			}),
+			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 ? String(field_0.state.value) : "",
+						onValueChange: (value) => field_0.handleChange(Number(value)),
+						items: layouts.map((t) => ({
+							value: String(t.id),
+							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: String(t_0.id),
+							children: camoxApp.getLayoutById(t_0.layoutId)?._internal.title ?? t_0.layoutId
+						}, t_0.id)) })]
+					})]
+				})
+			}),
+			/* @__PURE__ */ jsx(form.Subscribe, {
+				selector: (s) => ({
+					isSubmitting: s.isSubmitting,
+					isPristine: s.isPristine
+				}),
+				children: ({ isSubmitting, isPristine }) => /* @__PURE__ */ jsxs(Button, {
+					type: "submit",
+					disabled: isSubmitting || isPristine,
+					children: [
+						isSubmitting && /* @__PURE__ */ jsx(Spinner, {}),
+						"Save changes",
+						isSubmitting && "..."
+					]
+				})
+			})
+		]
+	});
+};
+const PageSeoModal = (t0) => {
+	const $ = c(11);
+	if ($[0] !== "7c7e91a25652fa060b67c4ffcd921b50c9111bae47d2051cc0eaca87fb060c3e") {
+		for (let $i = 0; $i < 11; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "7c7e91a25652fa060b67c4ffcd921b50c9111bae47d2051cc0eaca87fb060c3e";
+	}
+	const { open, onOpenChange, pageId } = t0;
+	const { page, metaTitle, pageLayoutRecord, project } = usePageMetadataData(pageId);
+	let t1;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogTitle, { children: "SEO metadata" }), /* @__PURE__ */ jsx(DialogDescription, { children: "Control how this page appears in search and social previews." })] });
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== metaTitle || $[3] !== page || $[4] !== pageLayoutRecord?.layoutId || $[5] !== project?.name) {
+		t2 = /* @__PURE__ */ jsxs(DialogContent, {
+			className: "max-h-[90vh] overflow-y-auto sm:max-w-3xl",
+			children: [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..."]
+			})]
+		});
+		$[2] = metaTitle;
+		$[3] = page;
+		$[4] = pageLayoutRecord?.layoutId;
+		$[5] = project?.name;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== onOpenChange || $[8] !== open || $[9] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Dialog, {
+			open,
+			onOpenChange,
+			children: t2
+		});
+		$[7] = onOpenChange;
+		$[8] = open;
+		$[9] = t2;
+		$[10] = t3;
+	} else t3 = $[10];
+	return t3;
+};
+const PageSeoEditor = (t0) => {
+	const $ = c(43);
+	if ($[0] !== "7c7e91a25652fa060b67c4ffcd921b50c9111bae47d2051cc0eaca87fb060c3e") {
+		for (let $i = 0; $i < 43; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "7c7e91a25652fa060b67c4ffcd921b50c9111bae47d2051cc0eaca87fb060c3e";
+	}
+	const { page, metaTitle, layoutId, projectName } = t0;
+	let t1;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = pageMutations.setAiSeo();
+		$[1] = t1;
+	} else t1 = $[1];
+	const setAiSeo = useMutation(t1);
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = pageMutations.setMetaTitle();
+		$[2] = t2;
+	} else t2 = $[2];
+	const setMetaTitle = useMutation(t2);
+	let t3;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = pageMutations.setMetaDescription();
+		$[3] = t3;
+	} else t3 = $[3];
+	const setMetaDescription = useMutation(t3);
+	const t4 = page.aiSeoEnabled !== false;
+	let t5;
+	if ($[4] !== page.id || $[5] !== setAiSeo) {
+		t5 = (checked) => {
+			setAiSeo.mutate({
+				id: page.id,
+				enabled: checked
+			});
+			trackClientEvent("ai_metadata_toggled", {
+				target: "page",
+				enabled: checked,
+				pageId: page.id
+			});
+		};
+		$[4] = page.id;
+		$[5] = setAiSeo;
+		$[6] = t5;
+	} else t5 = $[6];
+	let t6;
+	if ($[7] !== t4 || $[8] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Switch, {
+			id: "ai-seo",
+			checked: t4,
+			onCheckedChange: t5
+		});
+		$[7] = t4;
+		$[8] = t5;
+		$[9] = t6;
+	} else t6 = $[9];
+	let t7;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(Label, {
+			htmlFor: "ai-seo",
+			children: "AI metadata"
+		});
+		$[10] = t7;
+	} else t7 = $[10];
+	let t8;
+	if ($[11] !== t6) {
+		t8 = /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [t6, t7]
+		});
+		$[11] = t6;
+		$[12] = t8;
+	} else t8 = $[12];
+	const t9 = page.metaTitle ?? "";
+	const t10 = page.aiSeoEnabled !== false;
+	let t11;
+	if ($[13] !== page.id || $[14] !== setMetaTitle) {
+		t11 = (value) => setMetaTitle.mutate({
+			id: page.id,
+			metaTitle: value
+		});
+		$[13] = page.id;
+		$[14] = setMetaTitle;
+		$[15] = t11;
+	} else t11 = $[15];
+	let t12;
+	if ($[16] !== t10 || $[17] !== t11 || $[18] !== t9) {
+		t12 = /* @__PURE__ */ jsx(DebouncedFieldEditor, {
+			label: "Page title",
+			placeholder: "Page title...",
+			initialValue: t9,
+			disabled: t10,
+			onSave: t11
+		});
+		$[16] = t10;
+		$[17] = t11;
+		$[18] = t9;
+		$[19] = t12;
+	} else t12 = $[19];
+	const t13 = page.metaDescription ?? "";
+	const t14 = page.aiSeoEnabled !== false;
+	let t15;
+	if ($[20] !== page.id || $[21] !== setMetaDescription) {
+		t15 = (value_0) => setMetaDescription.mutate({
+			id: page.id,
+			metaDescription: value_0
+		});
+		$[20] = page.id;
+		$[21] = setMetaDescription;
+		$[22] = t15;
+	} else t15 = $[22];
+	let t16;
+	if ($[23] !== t13 || $[24] !== t14 || $[25] !== t15) {
+		t16 = /* @__PURE__ */ jsx(DebouncedFieldEditor, {
+			label: "Page description",
+			placeholder: "Page description...",
+			initialValue: t13,
+			disabled: t14,
+			rows: 2,
+			onSave: t15
+		});
+		$[23] = t13;
+		$[24] = t14;
+		$[25] = t15;
+		$[26] = t16;
+	} else t16 = $[26];
+	const t17 = page.metaDescription ?? "";
+	let t18;
+	if ($[27] !== metaTitle || $[28] !== page || $[29] !== t17) {
+		t18 = /* @__PURE__ */ jsx(SearchEnginePreview, {
+			page,
+			metaTitle,
+			metaDescription: t17
+		});
+		$[27] = metaTitle;
+		$[28] = page;
+		$[29] = t17;
+		$[30] = t18;
+	} else t18 = $[30];
+	const t19 = page.metaDescription ?? "";
+	let t20;
+	if ($[31] !== layoutId || $[32] !== metaTitle || $[33] !== page || $[34] !== projectName || $[35] !== t19) {
+		t20 = /* @__PURE__ */ jsx(SocialPreviewSection, {
+			page,
+			metaTitle,
+			metaDescription: t19,
+			layoutId,
+			projectName
+		});
+		$[31] = layoutId;
+		$[32] = metaTitle;
+		$[33] = page;
+		$[34] = projectName;
+		$[35] = t19;
+		$[36] = t20;
+	} else t20 = $[36];
+	let t21;
+	if ($[37] !== t12 || $[38] !== t16 || $[39] !== t18 || $[40] !== t20 || $[41] !== t8) {
+		t21 = /* @__PURE__ */ jsxs("div", {
+			className: "space-y-4",
+			children: [
+				t8,
+				t12,
+				t16,
+				t18,
+				t20
+			]
+		});
+		$[37] = t12;
+		$[38] = t16;
+		$[39] = t18;
+		$[40] = t20;
+		$[41] = t8;
+		$[42] = t21;
+	} else t21 = $[42];
+	return t21;
+};
+const PageMarkdownModal = (t0) => {
+	const $ = c(10);
+	if ($[0] !== "7c7e91a25652fa060b67c4ffcd921b50c9111bae47d2051cc0eaca87fb060c3e") {
+		for (let $i = 0; $i < 10; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "7c7e91a25652fa060b67c4ffcd921b50c9111bae47d2051cc0eaca87fb060c3e";
+	}
+	const { open, onOpenChange, pageId, metaTitle, metaDescription } = t0;
+	let t1;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogTitle, { children: "Markdown content" }), /* @__PURE__ */ jsx(DialogDescription, { children: "How your content will be served to AI agents." })] });
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== metaDescription || $[3] !== metaTitle || $[4] !== pageId) {
+		t2 = /* @__PURE__ */ jsxs(DialogContent, {
+			className: "max-h-[90vh] overflow-y-auto sm:max-w-4xl",
+			children: [t1, /* @__PURE__ */ jsx(PageMarkdownPreview, {
+				pageId,
+				metaTitle,
+				metaDescription
+			})]
+		});
+		$[2] = metaDescription;
+		$[3] = metaTitle;
+		$[4] = pageId;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== onOpenChange || $[7] !== open || $[8] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Dialog, {
+			open,
+			onOpenChange,
+			children: t2
+		});
+		$[6] = onOpenChange;
+		$[7] = open;
+		$[8] = t2;
+		$[9] = t3;
+	} else t3 = $[9];
+	return t3;
+};
+function truncateText(text, maxLen) {
+	if (text.length <= maxLen) return text;
+	return text.slice(0, maxLen) + "...";
+}
+const SearchEnginePreview = (t0) => {
+	const $ = c(17);
+	if ($[0] !== "7c7e91a25652fa060b67c4ffcd921b50c9111bae47d2051cc0eaca87fb060c3e") {
+		for (let $i = 0; $i < 17; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "7c7e91a25652fa060b67c4ffcd921b50c9111bae47d2051cc0eaca87fb060c3e";
+	}
+	const { page, metaTitle, metaDescription } = t0;
+	const url = `${typeof window !== "undefined" ? window.location.origin : ""}${page.fullPath}`;
+	let t1;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(Label, { children: "Search engine preview" });
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-1.5",
+			children: [t1, /* @__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." })] })]
+		});
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] !== url) {
+		t3 = /* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground truncate text-xs",
+			children: url
+		});
+		$[3] = url;
+		$[4] = t3;
+	} else t3 = $[4];
+	const t4 = metaTitle || "Untitled";
+	let t5;
+	if ($[5] !== t4) {
+		t5 = truncateText(t4, 60);
+		$[5] = t4;
+		$[6] = t5;
+	} else t5 = $[6];
+	let t6;
+	if ($[7] !== t5) {
+		t6 = /* @__PURE__ */ jsx("p", {
+			className: "text-base font-medium text-blue-600 dark:text-blue-400",
+			children: t5
+		});
+		$[7] = t5;
+		$[8] = t6;
+	} else t6 = $[8];
+	const t7 = metaDescription || "No description";
+	let t8;
+	if ($[9] !== t7) {
+		t8 = truncateText(t7, 155);
+		$[9] = t7;
+		$[10] = t8;
+	} else t8 = $[10];
+	let t9;
+	if ($[11] !== t8) {
+		t9 = /* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground line-clamp-2 text-xs",
+			children: t8
+		});
+		$[11] = t8;
+		$[12] = t9;
+	} else t9 = $[12];
+	let t10;
+	if ($[13] !== t3 || $[14] !== t6 || $[15] !== t9) {
+		t10 = /* @__PURE__ */ jsxs("div", {
+			className: "space-y-1 pt-2",
+			children: [t2, /* @__PURE__ */ jsxs("div", {
+				className: "border-border space-y-0.5 rounded-lg border p-3",
+				children: [
+					t3,
+					t6,
+					t9
+				]
+			})]
+		});
+		$[13] = t3;
+		$[14] = t6;
+		$[15] = t9;
+		$[16] = t10;
+	} else t10 = $[16];
+	return t10;
+};
+const SocialPreviewSection = (t0) => {
+	const $ = c(60);
+	if ($[0] !== "7c7e91a25652fa060b67c4ffcd921b50c9111bae47d2051cc0eaca87fb060c3e") {
+		for (let $i = 0; $i < 60; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "7c7e91a25652fa060b67c4ffcd921b50c9111bae47d2051cc0eaca87fb060c3e";
+	}
+	const { page, metaTitle, metaDescription, layoutId, projectName } = t0;
+	const pageMetaTitle = page.metaTitle ?? page.pathSegment;
+	let t1;
+	if ($[1] !== layoutId || $[2] !== page.metaDescription || $[3] !== pageMetaTitle || $[4] !== projectName) {
+		t1 = new URLSearchParams({
+			...layoutId && { layoutId },
+			title: pageMetaTitle,
+			...page.metaDescription && { description: page.metaDescription },
+			...projectName && { projectName }
+		}).toString();
+		$[1] = layoutId;
+		$[2] = page.metaDescription;
+		$[3] = pageMetaTitle;
+		$[4] = projectName;
+		$[5] = t1;
+	} else t1 = $[5];
+	const generatedOgImage = `/og?${t1}`;
+	const ogImage = page.customOgImageUrl ?? generatedOgImage;
+	const url = `${typeof window !== "undefined" ? window.location.origin : ""}${page.fullPath}`;
+	const fileInputRef = React.useRef(null);
+	const queryClient = useQueryClient();
+	let t2;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = pageMutations.uploadCustomOgImage();
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== page.id || $[8] !== queryClient) {
+		t3 = {
+			...t2,
+			onSuccess: () => {
+				queryClient.invalidateQueries({ queryKey: pageQueries.getById(page.id).queryKey });
+				trackClientEvent("page_custom_og_image_uploaded", { pageId: page.id });
+			},
+			onError: _temp6
+		};
+		$[7] = page.id;
+		$[8] = queryClient;
+		$[9] = t3;
+	} else t3 = $[9];
+	const uploadCustomOgImage = useMutation(t3);
+	let t4;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = pageMutations.deleteCustomOgImage();
+		$[10] = t4;
+	} else t4 = $[10];
+	let t5;
+	if ($[11] !== page.id || $[12] !== queryClient) {
+		t5 = {
+			...t4,
+			onSuccess: () => {
+				queryClient.invalidateQueries({ queryKey: pageQueries.getById(page.id).queryKey });
+				trackClientEvent("page_custom_og_image_removed", { pageId: page.id });
+			},
+			onError: _temp7
+		};
+		$[11] = page.id;
+		$[12] = queryClient;
+		$[13] = t5;
+	} else t5 = $[13];
+	const deleteCustomOgImage = useMutation(t5);
+	const hasCustomImage = !!page.customOgImageUrl;
+	const isBusy = uploadCustomOgImage.isPending || deleteCustomOgImage.isPending;
+	let t6;
+	if ($[14] !== page.id || $[15] !== uploadCustomOgImage) {
+		t6 = (files) => {
+			const file = files[0];
+			if (file) uploadCustomOgImage.mutate({
+				pageId: page.id,
+				file
+			});
+		};
+		$[14] = page.id;
+		$[15] = uploadCustomOgImage;
+		$[16] = t6;
+	} else t6 = $[16];
+	const handleFiles = t6;
+	let t7;
+	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(Label, { children: "Social preview" });
+		$[17] = t7;
+	} else t7 = $[17];
+	let t8;
+	if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = () => fileInputRef.current?.click();
+		$[18] = t8;
+	} else t8 = $[18];
+	let t9;
+	if ($[19] !== uploadCustomOgImage.isPending) {
+		t9 = uploadCustomOgImage.isPending ? /* @__PURE__ */ jsx(Spinner, {}) : /* @__PURE__ */ jsx(Upload, { className: "size-3.5" });
+		$[19] = uploadCustomOgImage.isPending;
+		$[20] = t9;
+	} else t9 = $[20];
+	const t10 = hasCustomImage ? "Replace custom image" : "Upload custom image";
+	let t11;
+	if ($[21] !== isBusy || $[22] !== t10 || $[23] !== t9) {
+		t11 = /* @__PURE__ */ jsxs(Button, {
+			type: "button",
+			variant: "secondary",
+			size: "sm",
+			disabled: isBusy,
+			onClick: t8,
+			children: [t9, t10]
+		});
+		$[21] = isBusy;
+		$[22] = t10;
+		$[23] = t9;
+		$[24] = t11;
+	} else t11 = $[24];
+	let t12;
+	if ($[25] !== deleteCustomOgImage || $[26] !== hasCustomImage || $[27] !== isBusy || $[28] !== page.id) {
+		t12 = 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"
+			]
+		});
+		$[25] = deleteCustomOgImage;
+		$[26] = hasCustomImage;
+		$[27] = isBusy;
+		$[28] = page.id;
+		$[29] = t12;
+	} else t12 = $[29];
+	let t13;
+	if ($[30] !== handleFiles) {
+		t13 = /* @__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 = "";
+			}
+		});
+		$[30] = handleFiles;
+		$[31] = t13;
+	} else t13 = $[31];
+	let t14;
+	if ($[32] !== t11 || $[33] !== t12 || $[34] !== t13) {
+		t14 = /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [
+				t11,
+				t12,
+				t13
+			]
+		});
+		$[32] = t11;
+		$[33] = t12;
+		$[34] = t13;
+		$[35] = t14;
+	} else t14 = $[35];
+	const t15 = hasCustomImage ? "Drop image to replace" : "Drop image to upload";
+	let t16;
+	if ($[36] === Symbol.for("react.memo_cache_sentinel")) {
+		t16 = { aspectRatio: "1200 / 630" };
+		$[36] = t16;
+	} else t16 = $[36];
+	let t17;
+	if ($[37] !== ogImage) {
+		t17 = /* @__PURE__ */ jsx("img", {
+			src: ogImage,
+			alt: "",
+			className: "w-full object-cover",
+			style: t16
+		});
+		$[37] = ogImage;
+		$[38] = t17;
+	} else t17 = $[38];
+	let t18;
+	if ($[39] !== handleFiles || $[40] !== t15 || $[41] !== t17) {
+		t18 = /* @__PURE__ */ jsx(UploadDropZone, {
+			onDrop: handleFiles,
+			label: t15,
+			className: "block",
+			children: t17
+		});
+		$[39] = handleFiles;
+		$[40] = t15;
+		$[41] = t17;
+		$[42] = t18;
+	} else t18 = $[42];
+	const t19 = metaTitle || "Untitled";
+	let t20;
+	if ($[43] !== t19) {
+		t20 = /* @__PURE__ */ jsx("p", {
+			className: "text-foreground truncate text-sm font-semibold",
+			children: t19
+		});
+		$[43] = t19;
+		$[44] = t20;
+	} else t20 = $[44];
+	const t21 = metaDescription || "No description";
+	let t22;
+	if ($[45] !== t21) {
+		t22 = /* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground line-clamp-2 text-xs",
+			children: t21
+		});
+		$[45] = t21;
+		$[46] = t22;
+	} else t22 = $[46];
+	let t23;
+	if ($[47] === Symbol.for("react.memo_cache_sentinel")) {
+		t23 = /* @__PURE__ */ jsx(Globe, { className: "size-3 shrink-0" });
+		$[47] = t23;
+	} else t23 = $[47];
+	let t24;
+	if ($[48] !== url) {
+		t24 = /* @__PURE__ */ jsx("div", {
+			className: "pt-1.5",
+			children: /* @__PURE__ */ jsxs("p", {
+				className: "text-muted-foreground flex items-center gap-1 text-xs",
+				children: [t23, /* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					children: url
+				})]
+			})
+		});
+		$[48] = url;
+		$[49] = t24;
+	} else t24 = $[49];
+	let t25;
+	if ($[50] !== t20 || $[51] !== t22 || $[52] !== t24) {
+		t25 = /* @__PURE__ */ jsxs("div", {
+			className: "space-y-1.5 border-t px-3 py-2.5",
+			children: [
+				t20,
+				t22,
+				t24
+			]
+		});
+		$[50] = t20;
+		$[51] = t22;
+		$[52] = t24;
+		$[53] = t25;
+	} else t25 = $[53];
+	let t26;
+	if ($[54] !== t18 || $[55] !== t25) {
+		t26 = /* @__PURE__ */ jsxs("div", {
+			className: "border-border max-w-xl overflow-hidden rounded-lg border",
+			children: [t18, t25]
+		});
+		$[54] = t18;
+		$[55] = t25;
+		$[56] = t26;
+	} else t26 = $[56];
+	let t27;
+	if ($[57] !== t14 || $[58] !== t26) {
+		t27 = /* @__PURE__ */ jsxs("div", {
+			className: "space-y-2 pt-2",
+			children: [
+				t7,
+				t14,
+				t26
+			]
+		});
+		$[57] = t14;
+		$[58] = t26;
+		$[59] = t27;
+	} else t27 = $[59];
+	return t27;
+};
+const PageMarkdownPreview = (t0) => {
+	const $ = c(9);
+	if ($[0] !== "7c7e91a25652fa060b67c4ffcd921b50c9111bae47d2051cc0eaca87fb060c3e") {
+		for (let $i = 0; $i < 9; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "7c7e91a25652fa060b67c4ffcd921b50c9111bae47d2051cc0eaca87fb060c3e";
+	}
+	const { pageId, metaTitle, metaDescription } = t0;
+	let t1;
+	if ($[1] !== pageId) {
+		t1 = blockQueries.getPageMarkdown(pageId);
+		$[1] = pageId;
+		$[2] = t1;
+	} else t1 = $[2];
+	const { data: markdown } = useQuery(t1);
+	if (markdown === void 0) {
+		let t2;
+		if ($[3] === 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..."]
+			});
+			$[3] = t2;
+		} else t2 = $[3];
+		return t2;
+	}
+	const t2 = `title: "${metaTitle}"`;
+	const t3 = `description: "${metaDescription}"`;
+	let frontmatterLines;
+	if ($[4] !== t2 || $[5] !== t3) {
+		frontmatterLines = [
+			"---",
+			t2,
+			t3
+		];
+		frontmatterLines.push("---");
+		$[4] = t2;
+		$[5] = t3;
+		$[6] = frontmatterLines;
+	} else frontmatterLines = $[6];
+	const fullMarkdown = frontmatterLines.join("\n") + "\n\n" + (markdown ?? "");
+	let t4;
+	if ($[7] !== fullMarkdown) {
+		t4 = /* @__PURE__ */ jsx(ShikiMarkdown, { code: fullMarkdown });
+		$[7] = fullMarkdown;
+		$[8] = t4;
+	} else t4 = $[8];
+	return t4;
+};
+function _temp() {
+	toast.error("Could not update page");
+}
+function _temp2() {
+	toast.error("Could not update page layout");
+}
+function _temp6(error) {
+	toast.error(error.message || "Could not upload image");
+}
+function _temp7() {
+	toast.error("Could not remove image");
+}
+
+//#endregion
+export { PageInfoSidebar };