camox 0.47.0 → 0.48.0

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

@@ -1,7 +1,10 @@
 import { useProjectUuid } from "../../../lib/auth.js";
+import { useOptionalDraftScope } from "../../../lib/draft-scope.js";
+import { useViewLocale } from "../../../lib/view-locale-context.js";
 import { useNavigate } from "../../navigation/navigation.js";
 import { useCamoxApp } from "../../provider/components/CamoxAppContext.js";
 import { reads, useReadQuery, useStudioCache } from "../../../lib/studio-reads.js";
+import { curatedLayoutContext } from "../../../core/layoutContext.js";
 import { cn } from "../../../lib/utils.js";
 import { UploadDropZone } from "../../content/components/UploadDropZone.js";
 import { pageMutations } from "../../../lib/queries.js";
@@ -12,6 +15,7 @@ import { useLocalizedPath } from "../../../lib/view-locale.js";
 import { PageNicknameField } from "./PageNicknameField.js";
 import { PageInfoSkeleton } from "./PageInfoSkeleton.js";
 import { PageLocationFieldset } from "./PageLocationFieldset.js";
+import { pageImageUrl } from "../../og/pageImage.js";
 import { ShikiMarkdown } from "./ShikiMarkdown.js";
 import { c } from "react/compiler-runtime";
 import * as React from "react";
@@ -37,7 +41,7 @@ import { Checkbox } from "@camox/ui/checkbox";
 
 //#region src/features/preview/components/PageInfo.tsx
 const usePageMetadataData = (pageId) => {
-	const $ = c(29);
+	const $ = c(23);
 	const projectUuid = useProjectUuid();
 	const camoxApp = useCamoxApp();
 	let t0;
@@ -90,32 +94,16 @@ const usePageMetadataData = (pageId) => {
 		$[14] = t8;
 	} else t8 = $[14];
 	const layouts = t8;
-	let pageLayoutRecord;
+	const pageLayoutRecord = allLayouts?.find((l) => l.layoutId === page?.layoutId);
+	const layoutDef = pageLayoutRecord ? camoxApp.getLayoutById(pageLayoutRecord.layoutId) : void 0;
+	const { locale } = useViewLocale();
+	const metaTitle = layoutDef && page ? layoutDef._internal.toTitle(curatedLayoutContext({
+		page,
+		projectName: project?.name ?? ""
+	}, locale)) : page?.metaTitle ?? "";
 	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 = {
+	if ($[15] !== camoxApp || $[16] !== layouts || $[17] !== metaTitle || $[18] !== page || $[19] !== pageLayoutRecord || $[20] !== pages || $[21] !== project) {
+		t9 = {
 			page,
 			project,
 			pages,
@@ -124,16 +112,16 @@ const usePageMetadataData = (pageId) => {
 			metaTitle,
 			camoxApp
 		};
-		$[21] = camoxApp;
-		$[22] = layouts;
-		$[23] = metaTitle;
-		$[24] = page;
-		$[25] = pageLayoutRecord;
-		$[26] = pages;
-		$[27] = project;
-		$[28] = t10;
-	} else t10 = $[28];
-	return t10;
+		$[15] = camoxApp;
+		$[16] = layouts;
+		$[17] = metaTitle;
+		$[18] = page;
+		$[19] = pageLayoutRecord;
+		$[20] = pages;
+		$[21] = project;
+		$[22] = t9;
+	} else t9 = $[22];
+	return t9;
 };
 const PAGE_SETTINGS_ITEM = "page-settings";
 const SHOW_PAGE_SETTINGS_STORAGE_KEY = "camox:studio:showPageSettings";
@@ -1021,31 +1009,27 @@ const PageSeoSheet = (t0) => {
 	return t3;
 };
 const PageSeoContent = (t0) => {
-	const $ = c(5);
+	const $ = c(3);
 	const { pageId } = t0;
-	const { page, metaTitle, pageLayoutRecord, project } = usePageMetadataData(pageId);
+	const { page, metaTitle } = usePageMetadataData(pageId);
 	let t1;
-	if ($[0] !== metaTitle || $[1] !== page || $[2] !== pageLayoutRecord?.layoutId || $[3] !== project?.name) {
+	if ($[0] !== metaTitle || $[1] !== page) {
 		t1 = page ? /* @__PURE__ */ jsx(PageSeoEditor, {
 			page,
-			metaTitle,
-			layoutId: pageLayoutRecord?.layoutId,
-			projectName: project?.name
+			metaTitle
 		}) : /* @__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];
+		$[2] = t1;
+	} else t1 = $[2];
 	return t1;
 };
 const PageSeoEditor = (t0) => {
-	const $ = c(40);
-	const { page, metaTitle, layoutId, projectName } = t0;
+	const $ = c(38);
+	const { page, metaTitle } = t0;
 	let t1;
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
 		t1 = pageMutations.setSeo();
@@ -1158,23 +1142,19 @@ const PageSeoEditor = (t0) => {
 	} else t13 = $[27];
 	const t14 = page.metaDescription ?? "";
 	let t15;
-	if ($[28] !== layoutId || $[29] !== metaTitle || $[30] !== page || $[31] !== projectName || $[32] !== t14) {
+	if ($[28] !== metaTitle || $[29] !== page || $[30] !== t14) {
 		t15 = /* @__PURE__ */ jsx(SocialPreviewSection, {
 			page,
 			metaTitle,
-			metaDescription: t14,
-			layoutId,
-			projectName
+			metaDescription: t14
 		});
-		$[28] = layoutId;
-		$[29] = metaTitle;
-		$[30] = page;
-		$[31] = projectName;
-		$[32] = t14;
-		$[33] = t15;
-	} else t15 = $[33];
+		$[28] = metaTitle;
+		$[29] = page;
+		$[30] = t14;
+		$[31] = t15;
+	} else t15 = $[31];
 	let t16;
-	if ($[34] !== t11 || $[35] !== t13 || $[36] !== t15 || $[37] !== t5 || $[38] !== t8) {
+	if ($[32] !== t11 || $[33] !== t13 || $[34] !== t15 || $[35] !== t5 || $[36] !== t8) {
 		t16 = /* @__PURE__ */ jsxs("div", {
 			className: "space-y-4",
 			children: [
@@ -1185,13 +1165,13 @@ const PageSeoEditor = (t0) => {
 				t15
 			]
 		});
-		$[34] = t11;
-		$[35] = t13;
-		$[36] = t15;
-		$[37] = t5;
-		$[38] = t8;
-		$[39] = t16;
-	} else t16 = $[39];
+		$[32] = t11;
+		$[33] = t13;
+		$[34] = t15;
+		$[35] = t5;
+		$[36] = t8;
+		$[37] = t16;
+	} else t16 = $[37];
 	return t16;
 };
 const PageMarkdownSheet = (t0) => {
@@ -1360,144 +1340,144 @@ const SearchEnginePreview = (t0) => {
 	return t11;
 };
 const SocialPreviewSection = (t0) => {
-	const $ = c(68);
-	const { page, metaTitle, metaDescription, layoutId, projectName } = t0;
+	const $ = c(70);
+	const { page, metaTitle, metaDescription } = 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 : "";
+	const { scope } = useOptionalDraftScope();
+	let t1;
 	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);
+	if ($[0] !== localized || $[1] !== page.fullPath || $[2] !== page.metaDescription || $[3] !== page.metaTitle) {
+		const version = new URLSearchParams({ v: `${page.metaTitle ?? ""}|${page.metaDescription ?? ""}` });
+		if ($[6] !== localized || $[7] !== page.fullPath) {
+			t1 = pageImageUrl({
+				origin: "",
+				path: localized(page.fullPath)
+			});
+			$[6] = localized;
+			$[7] = page.fullPath;
+			$[8] = t1;
+		} else t1 = $[8];
+		t2 = version.toString();
+		$[0] = localized;
+		$[1] = page.fullPath;
+		$[2] = page.metaDescription;
+		$[3] = page.metaTitle;
+		$[4] = t1;
+		$[5] = t2;
+	} else {
+		t1 = $[4];
+		t2 = $[5];
+	}
+	const generatedOgImage = `${t1}&${t2}`;
 	let t3;
-	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
-		t3 = pageMutations.uploadCustomOgImage();
-		$[14] = t3;
-	} else t3 = $[14];
+	if ($[9] !== generatedOgImage || $[10] !== page.customOgImageUrl || $[11] !== scope) {
+		t3 = page.customOgImageUrl || (scope?.hrefFor(generatedOgImage) ?? generatedOgImage);
+		$[9] = generatedOgImage;
+		$[10] = page.customOgImageUrl;
+		$[11] = scope;
+		$[12] = t3;
+	} else t3 = $[12];
+	const ogImage = t3;
+	const origin = typeof window !== "undefined" ? window.location.origin : "";
 	let t4;
-	if ($[15] !== page.id || $[16] !== studioCache) {
-		t4 = {
-			...t3,
+	if ($[13] !== localized || $[14] !== page.fullPath) {
+		t4 = localized(page.fullPath);
+		$[13] = localized;
+		$[14] = page.fullPath;
+		$[15] = t4;
+	} else t4 = $[15];
+	const url = `${origin}${t4}`;
+	const fileInputRef = React.useRef(null);
+	let t5;
+	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = pageMutations.uploadCustomOgImage();
+		$[16] = t5;
+	} else t5 = $[16];
+	let t6;
+	if ($[17] !== page.id || $[18] !== studioCache) {
+		t6 = {
+			...t5,
 			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,
+		$[17] = page.id;
+		$[18] = studioCache;
+		$[19] = t6;
+	} else t6 = $[19];
+	const uploadCustomOgImage = useMutation(t6);
+	let t7;
+	if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = pageMutations.deleteCustomOgImage();
+		$[20] = t7;
+	} else t7 = $[20];
+	let t8;
+	if ($[21] !== page.id || $[22] !== studioCache) {
+		t8 = {
+			...t7,
 			onSuccess: () => {
 				studioCache.invalidate(reads.page({ id: page.id }));
 			},
 			onError: _temp8
 		};
-		$[19] = page.id;
-		$[20] = studioCache;
-		$[21] = t6;
-	} else t6 = $[21];
-	const deleteCustomOgImage = useMutation(t6);
+		$[21] = page.id;
+		$[22] = studioCache;
+		$[23] = t8;
+	} else t8 = $[23];
+	const deleteCustomOgImage = useMutation(t8);
 	const hasCustomImage = !!page.customOgImageUrl;
 	const isBusy = uploadCustomOgImage.isPending || deleteCustomOgImage.isPending;
-	let t7;
-	if ($[22] !== page.id || $[23] !== uploadCustomOgImage) {
-		t7 = (files) => {
+	let t9;
+	if ($[24] !== page.id || $[25] !== uploadCustomOgImage) {
+		t9 = (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();
+		$[24] = page.id;
+		$[25] = uploadCustomOgImage;
 		$[26] = t9;
 	} else t9 = $[26];
+	const handleFiles = t9;
 	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";
+	if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = /* @__PURE__ */ jsx(Label, { children: "Social preview" });
+		$[27] = t10;
+	} else t10 = $[27];
+	let t11;
+	if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = () => fileInputRef.current?.click();
+		$[28] = t11;
+	} else t11 = $[28];
 	let t12;
-	if ($[29] !== isBusy || $[30] !== t10 || $[31] !== t11) {
-		t12 = /* @__PURE__ */ jsxs(Button, {
+	if ($[29] !== uploadCustomOgImage.isPending) {
+		t12 = uploadCustomOgImage.isPending ? /* @__PURE__ */ jsx(Spinner, {}) : /* @__PURE__ */ jsx(Upload, { className: "size-3.5" });
+		$[29] = uploadCustomOgImage.isPending;
+		$[30] = t12;
+	} else t12 = $[30];
+	const t13 = hasCustomImage ? "Replace custom image" : "Upload custom image";
+	let t14;
+	if ($[31] !== isBusy || $[32] !== t12 || $[33] !== t13) {
+		t14 = /* @__PURE__ */ jsxs(Button, {
 			type: "button",
 			variant: "secondary",
 			size: "sm",
 			disabled: isBusy,
-			onClick: t9,
-			children: [t10, t11]
+			onClick: t11,
+			children: [t12, t13]
 		});
-		$[29] = isBusy;
-		$[30] = t10;
-		$[31] = t11;
+		$[31] = isBusy;
 		$[32] = t12;
-	} else t12 = $[32];
-	let t13;
-	if ($[33] !== deleteCustomOgImage || $[34] !== hasCustomImage || $[35] !== isBusy || $[36] !== page.id) {
-		t13 = hasCustomImage && /* @__PURE__ */ jsxs(Button, {
+		$[33] = t13;
+		$[34] = t14;
+	} else t14 = $[34];
+	let t15;
+	if ($[35] !== deleteCustomOgImage || $[36] !== hasCustomImage || $[37] !== isBusy || $[38] !== page.id) {
+		t15 = hasCustomImage && /* @__PURE__ */ jsxs(Button, {
 			type: "button",
 			variant: "ghost",
 			disabled: isBusy,
@@ -1509,15 +1489,15 @@ const SocialPreviewSection = (t0) => {
 				"Clear"
 			]
 		});
-		$[33] = deleteCustomOgImage;
-		$[34] = hasCustomImage;
-		$[35] = isBusy;
-		$[36] = page.id;
-		$[37] = t13;
-	} else t13 = $[37];
-	let t14;
-	if ($[38] !== handleFiles) {
-		t14 = /* @__PURE__ */ jsx("input", {
+		$[35] = deleteCustomOgImage;
+		$[36] = hasCustomImage;
+		$[37] = isBusy;
+		$[38] = page.id;
+		$[39] = t15;
+	} else t15 = $[39];
+	let t16;
+	if ($[40] !== handleFiles) {
+		t16 = /* @__PURE__ */ jsx("input", {
 			type: "file",
 			ref: fileInputRef,
 			className: "hidden",
@@ -1527,134 +1507,134 @@ const SocialPreviewSection = (t0) => {
 				e.target.value = "";
 			}
 		});
-		$[38] = handleFiles;
-		$[39] = t14;
-	} else t14 = $[39];
-	let t15;
-	if ($[40] !== t12 || $[41] !== t13 || $[42] !== t14) {
-		t15 = /* @__PURE__ */ jsxs("div", {
+		$[40] = handleFiles;
+		$[41] = t16;
+	} else t16 = $[41];
+	let t17;
+	if ($[42] !== t14 || $[43] !== t15 || $[44] !== t16) {
+		t17 = /* @__PURE__ */ jsxs("div", {
 			className: "flex items-center gap-2",
 			children: [
-				t12,
-				t13,
-				t14
+				t14,
+				t15,
+				t16
 			]
 		});
-		$[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", {
+		$[44] = t16;
+		$[45] = t17;
+	} else t17 = $[45];
+	const t18 = hasCustomImage ? "Drop image to replace" : "Drop image to upload";
+	let t19;
+	if ($[46] === Symbol.for("react.memo_cache_sentinel")) {
+		t19 = { aspectRatio: "1200 / 630" };
+		$[46] = t19;
+	} else t19 = $[46];
+	let t20;
+	if ($[47] !== ogImage) {
+		t20 = /* @__PURE__ */ jsx("img", {
 			src: ogImage,
 			alt: "",
 			className: "w-full object-cover",
-			style: t17
+			style: t19
 		});
-		$[45] = ogImage;
-		$[46] = t18;
-	} else t18 = $[46];
-	let t19;
-	if ($[47] !== handleFiles || $[48] !== t16 || $[49] !== t18) {
-		t19 = /* @__PURE__ */ jsx(UploadDropZone, {
+		$[47] = ogImage;
+		$[48] = t20;
+	} else t20 = $[48];
+	let t21;
+	if ($[49] !== handleFiles || $[50] !== t18 || $[51] !== t20) {
+		t21 = /* @__PURE__ */ jsx(UploadDropZone, {
 			onDrop: handleFiles,
-			label: t16,
+			label: t18,
 			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
 		});
+		$[49] = handleFiles;
+		$[50] = t18;
 		$[51] = t20;
 		$[52] = t21;
 	} else t21 = $[52];
-	const t22 = metaDescription || "No description";
+	const t22 = metaTitle || "Untitled";
 	let t23;
 	if ($[53] !== t22) {
 		t23 = /* @__PURE__ */ jsx("p", {
-			className: "text-muted-foreground line-clamp-2 text-xs",
+			className: "text-foreground truncate text-sm font-semibold",
 			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];
+	const t24 = metaDescription || "No description";
 	let t25;
-	if ($[56] !== url) {
-		t25 = /* @__PURE__ */ jsx("div", {
+	if ($[55] !== t24) {
+		t25 = /* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground line-clamp-2 text-xs",
+			children: t24
+		});
+		$[55] = t24;
+		$[56] = t25;
+	} else t25 = $[56];
+	let t26;
+	if ($[57] === Symbol.for("react.memo_cache_sentinel")) {
+		t26 = /* @__PURE__ */ jsx(Globe, { className: "size-3 shrink-0" });
+		$[57] = t26;
+	} else t26 = $[57];
+	let t27;
+	if ($[58] !== url) {
+		t27 = /* @__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", {
+				children: [t26, /* @__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", {
+		$[58] = url;
+		$[59] = t27;
+	} else t27 = $[59];
+	let t28;
+	if ($[60] !== t23 || $[61] !== t25 || $[62] !== t27) {
+		t28 = /* @__PURE__ */ jsxs("div", {
 			className: "space-y-1.5 border-t px-3 py-2.5",
 			children: [
-				t21,
 				t23,
-				t25
+				t25,
+				t27
 			]
 		});
-		$[58] = t21;
-		$[59] = t23;
-		$[60] = t25;
-		$[61] = t26;
-	} else t26 = $[61];
-	let t27;
-	if ($[62] !== t19 || $[63] !== t26) {
-		t27 = /* @__PURE__ */ jsxs("div", {
+		$[60] = t23;
+		$[61] = t25;
+		$[62] = t27;
+		$[63] = t28;
+	} else t28 = $[63];
+	let t29;
+	if ($[64] !== t21 || $[65] !== t28) {
+		t29 = /* @__PURE__ */ jsxs("div", {
 			className: "border-border max-w-xl overflow-hidden rounded-lg border",
-			children: [t19, t26]
+			children: [t21, t28]
 		});
-		$[62] = t19;
-		$[63] = t26;
-		$[64] = t27;
-	} else t27 = $[64];
-	let t28;
-	if ($[65] !== t15 || $[66] !== t27) {
-		t28 = /* @__PURE__ */ jsxs("div", {
+		$[64] = t21;
+		$[65] = t28;
+		$[66] = t29;
+	} else t29 = $[66];
+	let t30;
+	if ($[67] !== t17 || $[68] !== t29) {
+		t30 = /* @__PURE__ */ jsxs("div", {
 			className: "space-y-2 pt-2",
 			children: [
-				t8,
-				t15,
-				t27
+				t10,
+				t17,
+				t29
 			]
 		});
-		$[65] = t15;
-		$[66] = t27;
-		$[67] = t28;
-	} else t28 = $[67];
-	return t28;
+		$[67] = t17;
+		$[68] = t29;
+		$[69] = t30;
+	} else t30 = $[69];
+	return t30;
 };
 const PageMarkdownPreview = (t0) => {
 	const $ = c(8);