camox 0.63.0 → 0.66.0

package/dist/features/canvas/canvasFrameDocument.js

@@ -14,24 +14,83 @@ function studioStyle(doc, css) {
 	style.textContent = css;
 	return style;
 }
-/** Set by the camera on elements that hold Canvas frames: see `canvasBlockOverlap`. */
-const BLOCK_OVERLAP_ATTRIBUTE = "data-canvas-block-overlap";
+/** Set by the camera on elements that hold Canvas frames: see `canvasSeamCover`. */
+const SEAM_COVER_ATTRIBUTE = "data-canvas-seam-cover";
 const BLOCK = "[data-camox-viewport-block]";
-/** Every block after the first, in its container or a later one, covers the end of the one before. */
-const BLOCK_OVERLAP_SELECTOR = `:is(${BLOCK}, :has(${BLOCK})) ~ ${BLOCK}, :is(${BLOCK}, :has(${BLOCK})) ~ * ${BLOCK}`;
-const BLOCK_OVERLAP_STYLE = `${BLOCK_OVERLAP_SELECTOR} { margin-top: calc(-1 * var(--camox-block-overlap, 0px)); }`;
+/** Set on a block whose bottom edge needs covering, to the color to cover it in. */
+const SEAM_COLOR_PROPERTY = "--camox-seam-color";
 /**
-* How far, in CSS pixels, each block in a Canvas frame overlaps the one before it.
-* Where two blocks meet partway through a screen pixel, each covers only part of
-* it, and whatever is under both (the site's background, often unlike either
-* block) shows through as a light seam. Zoomed out, an overlap of at least a
-* device pixel covers it, at the cost of about as much of a block's bottom edge. From
-* 100%, where seams are rare, borders stay exact. Powers of two change a page's
-* height only at a few zooms.
+* A band in a block's seam color across its bottom edge, from `--camox-seam-cover` above it to
+* as far below. It's the block's border image, which it doesn't otherwise have: that paints
+* under the block's content and under the next block, and moves nothing.
 */
-function canvasBlockOverlap(scale, pixelRatio) {
-	if (scale >= 1) return 0;
-	return 2 ** Math.max(0, Math.ceil(Math.log2(1 / (scale * pixelRatio))));
+const SEAM_STYLE = `${BLOCK}[style*="${SEAM_COLOR_PROPERTY}"] { border-image: linear-gradient(var(${SEAM_COLOR_PROPERTY}), var(${SEAM_COLOR_PROPERTY})) 0 0 1 0 / 0 0 calc(2 * var(--camox-seam-cover, 0px)) 0 / 0 0 var(--camox-seam-cover, 0px) 0 stretch; }`;
+/**
+* How far, in CSS pixels, the band under each seam between blocks in a Canvas frame
+* reaches to either side of it. Where two blocks meet partway through a screen pixel,
+* each covers only part of it, and whatever is under both (the site's background,
+* often unlike either block) shows through as a light seam. A band in the blocks'
+* color under that pixel covers it. Chromium rasters layers at scales slightly off the
+* camera's, so the band reaches three device pixels: fewer leave some seams.
+*/
+function canvasSeamCover(scale, pixelRatio) {
+	return 3 / (scale * pixelRatio);
+}
+/**
+* Gives each block a seam color where it meets the next one and both paint their side of
+* the edge, so that the band under the edge hides the seam (see `SEAM_STYLE`). Where
+* either side is see-through, nothing shows through the edge but what's already there,
+* and a band would show.
+*/
+function colorSeams(doc) {
+	const view = doc.defaultView;
+	if (!view || !doc.elementsFromPoint) return;
+	const blocks = Array.from(doc.querySelectorAll(BLOCK));
+	blocks.forEach((block, index) => {
+		const next = blocks[index + 1];
+		const color = next ? seamColor(view, block, next) : null;
+		if (color) {
+			if (block.style.getPropertyValue(SEAM_COLOR_PROPERTY) !== color) block.style.setProperty(SEAM_COLOR_PROPERTY, color);
+		} else if (block.style.getPropertyValue(SEAM_COLOR_PROPERTY)) block.style.removeProperty(SEAM_COLOR_PROPERTY);
+	});
+}
+function seamColor(view, above, below) {
+	const top = above.getBoundingClientRect();
+	const bottom = below.getBoundingClientRect();
+	if (Math.abs(top.bottom - bottom.top) > 1) return null;
+	const x = (Math.max(top.left, bottom.left) + Math.min(top.right, bottom.right)) / 2;
+	const aboveColor = paintAt(view, above, x, top.bottom - .5);
+	const belowColor = paintAt(view, below, x, bottom.top + .5);
+	if (aboveColor === null || belowColor === null) return null;
+	return aboveColor || belowColor || null;
+}
+const PAINTED_ELEMENTS = /* @__PURE__ */ new Set([
+	"img",
+	"picture",
+	"video",
+	"canvas",
+	"svg",
+	"iframe"
+]);
+/**
+* What a block paints at a point: `null` where nothing does, its background color, or an
+* empty string for an image or other painting of no one color.
+*/
+function paintAt(view, block, x, y) {
+	for (const element of block.ownerDocument.elementsFromPoint(x, y)) {
+		if (!block.contains(element)) continue;
+		const style = view.getComputedStyle(element);
+		const color = isTransparent(style.backgroundColor) ? "" : style.backgroundColor;
+		if (style.backgroundImage && style.backgroundImage !== "none" || PAINTED_ELEMENTS.has(element.localName)) return color;
+		if (color) return color;
+	}
+	return null;
+}
+/** Whether a computed color is fully transparent: only an alpha of 0 is. */
+function isTransparent(color) {
+	if (!color || color === "transparent") return true;
+	const alpha = /^rgba\(.*,\s*([\d.]+)\)$/.exec(color)?.[1] ?? /\/\s*([\d.]+)%?\s*\)$/.exec(color)?.[1];
+	return alpha !== void 0 && parseFloat(alpha) === 0;
 }
 function canvasPageHref(input) {
 	return new URL(`${input.runtimeBasePath.replace(/\/$/, "")}/${input.pathname.replace(/^\//, "")}`, input.href).href;
@@ -207,19 +266,19 @@ function observeCanvasDocument(iframe, root, viewportHeight, suspended = () => f
 	doc.documentElement.style.setProperty("--camox-viewport-height", `${baseline}px`);
 	doc.documentElement.style.setProperty("overflow", "hidden", "important");
 	doc.body.style.setProperty("overflow", "hidden", "important");
-	const overlapStyle = studioStyle(doc, BLOCK_OVERLAP_STYLE);
-	doc.head.appendChild(overlapStyle);
-	const followOverlap = () => {
-		const overlap = iframe.closest(`[${BLOCK_OVERLAP_ATTRIBUTE}]`);
-		const pixels = Number(overlap?.getAttribute(BLOCK_OVERLAP_ATTRIBUTE)) || 0;
-		doc.documentElement.style.setProperty("--camox-block-overlap", `${pixels}px`);
+	const seamStyle = studioStyle(doc, SEAM_STYLE);
+	doc.head.appendChild(seamStyle);
+	const followSeamCover = () => {
+		const holder = iframe.closest(`[${SEAM_COVER_ATTRIBUTE}]`);
+		const pixels = Number(holder?.getAttribute(SEAM_COVER_ATTRIBUTE)) || 0;
+		doc.documentElement.style.setProperty("--camox-seam-cover", `${pixels}px`);
 	};
-	followOverlap();
-	const overlapChanges = new MutationObserver(followOverlap);
-	overlapChanges.observe(iframe.ownerDocument.documentElement, {
+	followSeamCover();
+	const seamCoverChanges = new MutationObserver(followSeamCover);
+	seamCoverChanges.observe(iframe.ownerDocument.documentElement, {
 		subtree: true,
 		attributes: true,
-		attributeFilter: [BLOCK_OVERLAP_ATTRIBUTE]
+		attributeFilter: [SEAM_COVER_ATTRIBUTE]
 	});
 	let frame = 0;
 	let disposed = false;
@@ -235,6 +294,7 @@ function observeCanvasDocument(iframe, root, viewportHeight, suspended = () => f
 		frame = 0;
 		if (suspended()) return;
 		measureCanvasDocument(iframe, root, baseline);
+		colorSeams(doc);
 		const elements = /* @__PURE__ */ new Set([
 			doc.body,
 			root,
@@ -295,9 +355,10 @@ function observeCanvasDocument(iframe, root, viewportHeight, suspended = () => f
 		cancelAnimationFrame(frame);
 		resize.disconnect();
 		mutations.disconnect();
-		overlapChanges.disconnect();
-		overlapStyle.remove();
-		doc.documentElement.style.removeProperty("--camox-block-overlap");
+		seamCoverChanges.disconnect();
+		seamStyle.remove();
+		doc.documentElement.style.removeProperty("--camox-seam-cover");
+		for (const block of doc.querySelectorAll(BLOCK)) block.style.removeProperty(SEAM_COLOR_PROPERTY);
 		doc.removeEventListener("load", contentChanged, true);
 		doc.removeEventListener("error", contentChanged, true);
 		doc.fonts?.removeEventListener("loadingdone", contentChanged);
@@ -306,4 +367,4 @@ function observeCanvasDocument(iframe, root, viewportHeight, suspended = () => f
 }
 
 //#endregion
-export { BLOCK_OVERLAP_SELECTOR, adaptCanvasStyleSheets, adoptCanvasDocument, canvasBlockOverlap, canvasPageHref, createCanvasDocument, logicalViewportValue, measureCanvasDocument, observeCanvasDocument, pauseCanvasDocument };
+export { adaptCanvasStyleSheets, adoptCanvasDocument, canvasPageHref, canvasSeamCover, createCanvasDocument, logicalViewportValue, measureCanvasDocument, observeCanvasDocument, pauseCanvasDocument };

package/dist/features/canvas/canvasItems.js

@@ -1,21 +1,37 @@
+import { fitCanvasPage } from "./canvasCamera.js";
 import { CANVAS_DEVICES } from "./canvasPages.js";
 
 //#region src/features/canvas/canvasItems.ts
-const CANVAS_ITEM_GAP = 240;
 const CANVAS_SLOT_WIDTH = CANVAS_DEVICES.desktop.width;
+/** World-space bounds of the gap, so very narrow or wide canvases still space Pages alike. */
+const MIN_CANVAS_ITEM_GAP = 96;
+const MAX_CANVAS_ITEM_GAP = 320;
+/**
+* The world-space gap between Pages that, with a Page snapped, starts the next one halfway
+* across the sidebar laid over the working area's edge. The snapped zoom follows the working
+* area's width, so the gap does too.
+*/
+function canvasItemGap(workingArea, sidebarWidth) {
+	const fit = fitCanvasPage(workingArea, {
+		left: 0,
+		width: CANVAS_SLOT_WIDTH
+	});
+	const gap = ((workingArea.width - CANVAS_SLOT_WIDTH * fit.scale) / 2 + sidebarWidth / 2) / fit.scale;
+	return Math.min(320, Math.max(96, gap));
+}
 /**
 * World-space positions of the Canvas row, matching its flex layout: every Page
-* side by side, in Canvas order.
+* side by side, in Canvas order, a gap apart.
 */
-function positionCanvasPages(pages) {
+function positionCanvasPages(pages, gap) {
 	return {
 		items: pages.map((page, index) => ({
 			key: page.key,
 			page,
-			left: index * (CANVAS_SLOT_WIDTH + 240),
+			left: index * (CANVAS_SLOT_WIDTH + gap),
 			width: CANVAS_SLOT_WIDTH
 		})),
-		width: Math.max(0, pages.length * (CANVAS_SLOT_WIDTH + 240) - 240)
+		width: Math.max(0, pages.length * (CANVAS_SLOT_WIDTH + gap) - gap)
 	};
 }
 function canvasSnapTargets(items) {
@@ -27,4 +43,4 @@ function canvasSnapTargets(items) {
 }
 
 //#endregion
-export { CANVAS_SLOT_WIDTH, canvasSnapTargets, positionCanvasPages };
+export { CANVAS_SLOT_WIDTH, canvasItemGap, canvasSnapTargets, positionCanvasPages };

package/dist/features/canvas/sidebar/ContentSidebar.js

@@ -13,8 +13,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * Navigator, then the Canvas Inspector of the selected Page laid over it, if any.
 */
 function ContentSidebar(t0) {
-	const $ = c(16);
-	const { page, navigator, onShowWholeCanvas, owner: t1, pageRecord, runtimeBasePath } = t0;
+	const $ = c(15);
+	const { page, navigator, onShowWholeCanvas, owner: t1, runtimeBasePath } = t0;
 	const owner = t1 === void 0 ? null : t1;
 	const t2 = page?.title ?? "Canvas navigator";
 	const t3 = page != null;
@@ -29,11 +29,10 @@ function ContentSidebar(t0) {
 		$[2] = t4;
 	} else t4 = $[2];
 	let t5;
-	if ($[3] !== navigator || $[4] !== owner || $[5] !== page || $[6] !== pageRecord || $[7] !== runtimeBasePath) {
+	if ($[3] !== navigator || $[4] !== owner || $[5] !== page || $[6] !== runtimeBasePath) {
 		t5 = page ? /* @__PURE__ */ jsx(PageInspector, {
 			page,
 			owner,
-			pageRecord,
 			runtimeBasePath
 		}) : /* @__PURE__ */ jsx(SidebarStackView, {
 			depth: 0,
@@ -43,32 +42,31 @@ function ContentSidebar(t0) {
 		$[3] = navigator;
 		$[4] = owner;
 		$[5] = page;
-		$[6] = pageRecord;
-		$[7] = runtimeBasePath;
-		$[8] = t5;
-	} else t5 = $[8];
+		$[6] = runtimeBasePath;
+		$[7] = t5;
+	} else t5 = $[7];
 	let t6;
-	if ($[9] !== t4 || $[10] !== t5) {
+	if ($[8] !== t4 || $[9] !== t5) {
 		t6 = /* @__PURE__ */ jsxs(SidebarStack, { children: [t4, t5] });
-		$[9] = t4;
-		$[10] = t5;
-		$[11] = t6;
-	} else t6 = $[11];
+		$[8] = t4;
+		$[9] = t5;
+		$[10] = t6;
+	} else t6 = $[10];
 	let t7;
-	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
 		t7 = /* @__PURE__ */ jsx(CreatePageModal, {});
-		$[12] = t7;
-	} else t7 = $[12];
+		$[11] = t7;
+	} else t7 = $[11];
 	let t8;
-	if ($[13] !== t2 || $[14] !== t6) {
+	if ($[12] !== t2 || $[13] !== t6) {
 		t8 = /* @__PURE__ */ jsxs(ContentSidebarFrame, {
 			label: t2,
 			children: [t6, t7]
 		});
-		$[13] = t2;
-		$[14] = t6;
-		$[15] = t8;
-	} else t8 = $[15];
+		$[12] = t2;
+		$[13] = t6;
+		$[14] = t8;
+	} else t8 = $[14];
 	return t8;
 }
 

package/dist/features/canvas/sidebar/LayoutPageOverview.js

@@ -5,16 +5,15 @@ import { LayoutPageBlocks } from "./LayoutPageBlocks.js";
 import { LayoutPageSeo } from "./LayoutPageSeo.js";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Alert, AlertDescription, AlertTitle } from "@camox/ui/alert";
 
 //#region src/features/canvas/sidebar/LayoutPageOverview.tsx
 /**
-* A layout page's overview: its layout's blocks, then a notice, which a singleton and a
-* derived page word for themselves, then its SEO and Markdown, which its code builds.
+* A singleton or derived page's overview: its layout's blocks, then its SEO and Markdown, which
+* its code builds.
 */
 function LayoutPageOverview(t0) {
-	const $ = c(20);
-	const { layoutId, notice, target } = t0;
+	const $ = c(10);
+	const { layoutId, target } = t0;
 	const projectUuid = useProjectUuid();
 	let t1;
 	if ($[0] !== layoutId || $[1] !== projectUuid) {
@@ -29,59 +28,33 @@ function LayoutPageOverview(t0) {
 	const layout = useRead(t1);
 	let t2;
 	if ($[3] !== layout) {
-		t2 = /* @__PURE__ */ jsx(LayoutPageBlocks, { layout });
+		t2 = /* @__PURE__ */ jsx("div", {
+			className: "px-2 pt-5",
+			children: /* @__PURE__ */ jsx(LayoutPageBlocks, { layout })
+		});
 		$[3] = layout;
 		$[4] = t2;
 	} else t2 = $[4];
 	let t3;
-	if ($[5] !== notice.title) {
-		t3 = /* @__PURE__ */ jsx(AlertTitle, { children: notice.title });
-		$[5] = notice.title;
-		$[6] = t3;
-	} else t3 = $[6];
-	let t4;
-	if ($[7] !== notice.description) {
-		t4 = /* @__PURE__ */ jsx(AlertDescription, { children: notice.description });
-		$[7] = notice.description;
-		$[8] = t4;
-	} else t4 = $[8];
-	let t5;
-	if ($[9] !== t3 || $[10] !== t4) {
-		t5 = /* @__PURE__ */ jsxs(Alert, { children: [t3, t4] });
-		$[9] = t3;
-		$[10] = t4;
-		$[11] = t5;
-	} else t5 = $[11];
-	let t6;
-	if ($[12] !== t2 || $[13] !== t5) {
-		t6 = /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-col gap-4 px-2 pt-5",
-			children: [t2, t5]
-		});
-		$[12] = t2;
-		$[13] = t5;
-		$[14] = t6;
-	} else t6 = $[14];
-	let t7;
-	if ($[15] !== target) {
-		t7 = /* @__PURE__ */ jsx("div", {
+	if ($[5] !== target) {
+		t3 = /* @__PURE__ */ jsx("div", {
 			className: "space-y-4 p-2 pt-4",
 			children: /* @__PURE__ */ jsx(LayoutPageSeo, { target })
 		});
-		$[15] = target;
-		$[16] = t7;
-	} else t7 = $[16];
-	let t8;
-	if ($[17] !== t6 || $[18] !== t7) {
-		t8 = /* @__PURE__ */ jsx(PageOverview, { children: /* @__PURE__ */ jsxs("div", {
+		$[5] = target;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t2 || $[8] !== t3) {
+		t4 = /* @__PURE__ */ jsx(PageOverview, { children: /* @__PURE__ */ jsxs("div", {
 			className: "flex min-h-0 flex-1 flex-col overflow-auto",
-			children: [t6, t7]
+			children: [t2, t3]
 		}) });
-		$[17] = t6;
-		$[18] = t7;
-		$[19] = t8;
-	} else t8 = $[19];
-	return t8;
+		$[7] = t2;
+		$[8] = t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	return t4;
 }
 
 //#endregion

package/dist/features/canvas/sidebar/LayoutPageSeo.js

@@ -2,6 +2,7 @@ import { useOptionalDraftScope } from "../../../lib/draft-scope.js";
 import { useLocation } from "../../navigation/navigation.js";
 import { useProjectUuid } from "../../../lib/auth.js";
 import { reads, useReadQuery } from "../../../lib/studio-reads.js";
+import { useLatestRevision } from "../../../lib/revisions.js";
 import { pageImageUrl } from "../../og/pageImage.js";
 import { ShikiMarkdown } from "../../preview/components/ShikiMarkdown.js";
 import { PageDiscoverabilityButtons, PageMarkdownSheetFrame, PageSeoSheetFrame, SearchEnginePreview, SocialPreviewCard, SocialPreviewImage } from "../../preview/components/PageInfo.js";
@@ -105,7 +106,8 @@ function LayoutPageSeoContent(t0) {
 	const { target } = t0;
 	const projectUuid = useProjectUuid();
 	const { pathname } = useLocation();
-	const { scope } = useOptionalDraftScope();
+	const { scope, draftId } = useOptionalDraftScope();
+	const revision = useLatestRevision(draftId);
 	let t1;
 	if ($[0] !== pathname || $[1] !== projectUuid || $[2] !== target) {
 		t1 = reads.canvasFrame({
@@ -148,67 +150,63 @@ function LayoutPageSeoContent(t0) {
 	const { title, description } = t2;
 	let t3;
 	let t4;
-	if ($[9] !== description || $[10] !== pathname || $[11] !== title) {
-		const version = new URLSearchParams({ v: `${title}|${description}` });
-		if ($[14] !== pathname) {
+	if ($[9] !== description || $[10] !== pathname || $[11] !== revision || $[12] !== title) {
+		const version = new URLSearchParams({ v: `${title}|${description}|${revision ?? ""}` });
+		if ($[15] !== pathname) {
 			t3 = pageImageUrl({
 				origin: "",
 				path: pathname
 			});
-			$[14] = pathname;
-			$[15] = t3;
-		} else t3 = $[15];
+			$[15] = pathname;
+			$[16] = t3;
+		} else t3 = $[16];
 		t4 = version.toString();
 		$[9] = description;
 		$[10] = pathname;
-		$[11] = title;
-		$[12] = t3;
-		$[13] = t4;
+		$[11] = revision;
+		$[12] = title;
+		$[13] = t3;
+		$[14] = t4;
 	} else {
-		t3 = $[12];
-		t4 = $[13];
+		t3 = $[13];
+		t4 = $[14];
 	}
 	const image = `${t3}&${t4}`;
 	const origin = typeof window !== "undefined" ? window.location.origin : "";
 	let t5;
-	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
-		t5 = /* @__PURE__ */ jsxs(Alert, { children: [/* @__PURE__ */ jsx(AlertTitle, { children: "Set in code" }), /* @__PURE__ */ jsx(AlertDescription, { children: "This page’s title and description come from its layout’s code, built from the content it shows." })] });
-		$[16] = t5;
-	} else t5 = $[16];
-	let t6;
 	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
-		t6 = /* @__PURE__ */ jsx(Label, {
+		t5 = /* @__PURE__ */ jsx(Label, {
 			htmlFor: "layout-page-title",
 			children: "Page title"
 		});
-		$[17] = t6;
-	} else t6 = $[17];
-	let t7;
+		$[17] = t5;
+	} else t5 = $[17];
+	let t6;
 	if ($[18] !== title) {
-		t7 = /* @__PURE__ */ jsxs("div", {
+		t6 = /* @__PURE__ */ jsxs("div", {
 			className: "space-y-2",
-			children: [t6, /* @__PURE__ */ jsx(Input, {
+			children: [t5, /* @__PURE__ */ jsx(Input, {
 				id: "layout-page-title",
 				value: title,
 				readOnly: true
 			})]
 		});
 		$[18] = title;
-		$[19] = t7;
-	} else t7 = $[19];
-	let t8;
+		$[19] = t6;
+	} else t6 = $[19];
+	let t7;
 	if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
-		t8 = /* @__PURE__ */ jsx(Label, {
+		t7 = /* @__PURE__ */ jsx(Label, {
 			htmlFor: "layout-page-description",
 			children: "Page description"
 		});
-		$[20] = t8;
-	} else t8 = $[20];
-	let t9;
+		$[20] = t7;
+	} else t7 = $[20];
+	let t8;
 	if ($[21] !== description) {
-		t9 = /* @__PURE__ */ jsxs("div", {
+		t8 = /* @__PURE__ */ jsxs("div", {
 			className: "space-y-2",
-			children: [t8, /* @__PURE__ */ jsx(Textarea, {
+			children: [t7, /* @__PURE__ */ jsx(Textarea, {
 				id: "layout-page-description",
 				value: description,
 				placeholder: "No description",
@@ -217,11 +215,11 @@ function LayoutPageSeoContent(t0) {
 			})]
 		});
 		$[21] = description;
-		$[22] = t9;
-	} else t9 = $[22];
-	let t10;
+		$[22] = t8;
+	} else t8 = $[22];
+	let t9;
 	if ($[23] !== description || $[24] !== pathname || $[25] !== title) {
-		t10 = /* @__PURE__ */ jsx(SearchEnginePreview, {
+		t9 = /* @__PURE__ */ jsx(SearchEnginePreview, {
 			path: pathname,
 			metaTitle: title,
 			metaDescription: description
@@ -229,63 +227,62 @@ function LayoutPageSeoContent(t0) {
 		$[23] = description;
 		$[24] = pathname;
 		$[25] = title;
-		$[26] = t10;
-	} else t10 = $[26];
-	let t11;
+		$[26] = t9;
+	} else t9 = $[26];
+	let t10;
 	if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
-		t11 = /* @__PURE__ */ jsx(Label, { children: "Social preview" });
-		$[27] = t11;
-	} else t11 = $[27];
-	let t12;
+		t10 = /* @__PURE__ */ jsx(Label, { children: "Social preview" });
+		$[27] = t10;
+	} else t10 = $[27];
+	let t11;
 	if ($[28] !== image || $[29] !== scope) {
-		t12 = scope?.hrefFor(image) ?? image;
+		t11 = scope?.hrefFor(image) ?? image;
 		$[28] = image;
 		$[29] = scope;
-		$[30] = t12;
-	} else t12 = $[30];
-	let t13;
-	if ($[31] !== t12) {
-		t13 = /* @__PURE__ */ jsx(SocialPreviewImage, { src: t12 });
-		$[31] = t12;
-		$[32] = t13;
-	} else t13 = $[32];
-	const t14 = `${origin}${pathname}`;
-	let t15;
-	if ($[33] !== description || $[34] !== t13 || $[35] !== t14 || $[36] !== title) {
-		t15 = /* @__PURE__ */ jsxs("div", {
+		$[30] = t11;
+	} else t11 = $[30];
+	let t12;
+	if ($[31] !== t11) {
+		t12 = /* @__PURE__ */ jsx(SocialPreviewImage, { src: t11 });
+		$[31] = t11;
+		$[32] = t12;
+	} else t12 = $[32];
+	const t13 = `${origin}${pathname}`;
+	let t14;
+	if ($[33] !== description || $[34] !== t12 || $[35] !== t13 || $[36] !== title) {
+		t14 = /* @__PURE__ */ jsxs("div", {
 			className: "space-y-2 pt-2",
-			children: [t11, /* @__PURE__ */ jsx(SocialPreviewCard, {
-				image: t13,
+			children: [t10, /* @__PURE__ */ jsx(SocialPreviewCard, {
+				image: t12,
 				metaTitle: title,
 				metaDescription: description,
-				url: t14
+				url: t13
 			})]
 		});
 		$[33] = description;
-		$[34] = t13;
-		$[35] = t14;
+		$[34] = t12;
+		$[35] = t13;
 		$[36] = title;
-		$[37] = t15;
-	} else t15 = $[37];
-	let t16;
-	if ($[38] !== t10 || $[39] !== t15 || $[40] !== t7 || $[41] !== t9) {
-		t16 = /* @__PURE__ */ jsxs("div", {
+		$[37] = t14;
+	} else t14 = $[37];
+	let t15;
+	if ($[38] !== t14 || $[39] !== t6 || $[40] !== t8 || $[41] !== t9) {
+		t15 = /* @__PURE__ */ jsxs("div", {
 			className: "space-y-4",
 			children: [
-				t5,
-				t7,
+				t6,
+				t8,
 				t9,
-				t10,
-				t15
+				t14
 			]
 		});
-		$[38] = t10;
-		$[39] = t15;
-		$[40] = t7;
+		$[38] = t14;
+		$[39] = t6;
+		$[40] = t8;
 		$[41] = t9;
-		$[42] = t16;
-	} else t16 = $[42];
-	return t16;
+		$[42] = t15;
+	} else t15 = $[42];
+	return t15;
 }
 function LayoutPageMarkdown(t0) {
 	const $ = c(11);