camox 0.56.0 → 0.58.0

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

@@ -64,16 +64,8 @@ const LEAVE_DURATION = 180;
 const SWAP_DURATION = 150;
 /** How long after each other cards laid at once land, front-most last. */
 const STAGGER = 25;
-const HEADER_TRANSITION = [...[
-	"transform",
-	"margin",
-	"height",
-	"padding"
-].map((p) => `${p} ${DURATION}ms ${EASE}`), ...[
-	"background-color",
-	"box-shadow",
-	"color"
-].map((p) => `${p} ${DURATION}ms ease-out`)].join(", ");
+/** How far any card shades at most, `stepSeries`' limit: a header's shade is a part of it. */
+const MAX_SHADE = FIRST_STEP_SHADE / .15000000000000002;
 /** How far below the front a card is laid from, or pulled away to, in px. */
 const PULL = 24;
 const PLACED = {
@@ -312,6 +304,41 @@ function useStackCard(ref, depth, isView) {
 		};
 	}, []);
 }
+/**
+* Eases a header's card and content from where they were laid out before `shape` changed to
+* where they are now, as its layout snaps: its card scales from its old size, and its content
+* slides from its old height.
+*/
+function useHeaderReshape(surfaceRef, contentRef, shape) {
+	const last = React.useRef(null);
+	const moving = React.useRef([]);
+	React.useLayoutEffect(() => {
+		const surface = surfaceRef.current;
+		const content = contentRef.current;
+		if (!surface || !content) return;
+		const box = {
+			width: surface.offsetWidth,
+			height: surface.offsetHeight,
+			center: content.offsetTop + content.offsetHeight / 2
+		};
+		const from = last.current;
+		last.current = box;
+		if (!from || !box.width || !box.height || !prefersMotion()) return;
+		let { width, height, center } = from;
+		if (moving.current.some((animation) => animation.playState === "running")) {
+			const shown = new DOMMatrixReadOnly(getComputedStyle(surface).transform);
+			width *= shown.a;
+			height *= shown.d;
+			center += new DOMMatrixReadOnly(getComputedStyle(content).transform).f;
+		}
+		for (const animation of moving.current) animation.cancel();
+		const timing = {
+			duration: DURATION,
+			easing: EASE
+		};
+		moving.current = [surface.animate([{ transform: `scale(${width / box.width}, ${height / box.height})` }, { transform: "none" }], timing), content.animate([{ transform: `translateY(${center - box.center}px)` }, { transform: "none" }], timing)];
+	}, [shape]);
+}
 /** How many of the selection's views are laid over the page's, in this stack. */
 function useSelectionViewCount() {
 	return React.useContext(SelectionViewsContext)?.count ?? 0;
@@ -372,7 +399,7 @@ function SidebarStackView(t0) {
 	return t3;
 }
 function SidebarStackHeader(t0) {
-	const $ = c(55);
+	const $ = c(69);
 	const { depth, distance: t1, first: t2, onSelect, hoverTarget, tooltip, popover, children } = t0;
 	const distance = t1 === void 0 ? 0 : t1;
 	const first = t2 === void 0 ? false : t2;
@@ -450,82 +477,129 @@ function SidebarStackHeader(t0) {
 		$[16] = t8;
 	} else t8 = $[16];
 	const button = t8;
-	const t9 = !first && "-mt-1";
-	let t10;
-	if ($[17] !== t9) {
-		t10 = cn("relative shrink-0 origin-top", t9);
-		$[17] = t9;
-		$[18] = t10;
-	} else t10 = $[18];
-	const t11 = !flat && !first && "rounded-t-sm";
+	const surfaceRef = React.useRef(null);
+	const contentRef = React.useRef(null);
+	let t9;
+	if ($[17] !== covered || $[18] !== distance) {
+		t9 = covered ? stackInset(distance) : 0;
+		$[17] = covered;
+		$[18] = distance;
+		$[19] = t9;
+	} else t9 = $[19];
+	const inset = t9;
+	useHeaderReshape(surfaceRef, contentRef, `${covered}:${inset}`);
+	const t10 = !first && "-mt-1";
+	let t11;
+	if ($[20] !== t10) {
+		t11 = cn("relative shrink-0 origin-top", t10);
+		$[20] = t10;
+		$[21] = t11;
+	} else t11 = $[21];
 	const t12 = covered ? "h-[38px] pb-1" : "h-11 px-3";
-	const t13 = first && !flat && "rounded-t-lg inset-shadow-raised-top";
-	const t14 = covered && !first && `${CARD_TOP_EDGE} shadow-[0_-2px_5px_-3px_rgb(0_0_0/0.08)] dark:shadow-[0_-2px_5px_-3px_rgb(0_0_0/0.4)]`;
-	const t15 = !covered && !first && `${CARD_TOP_EDGE} shadow-[0_-3px_8px_-4px_rgb(0_0_0/0.08)] dark:shadow-[0_-3px_8px_-4px_rgb(0_0_0/0.4)]`;
-	const t16 = liftable && "hover:[--fade:1] hover:[--lift:var(--hover-lift)] hover:[--shade:var(--hover-shade)] hover:[--tilt:var(--hover-tilt)]";
-	const t17 = liftable && "has-focus-visible:[--fade:1] has-focus-visible:[--lift:var(--hover-lift)] has-focus-visible:[--shade:var(--hover-shade)] has-focus-visible:[--tilt:var(--hover-tilt)]";
-	const t18 = liftable && "has-data-popup-open:[--fade:1] has-data-popup-open:[--lift:var(--hover-lift)] has-data-popup-open:[--shade:var(--hover-shade)] has-data-popup-open:[--tilt:var(--hover-tilt)]";
-	let t19;
-	if ($[19] !== t11 || $[20] !== t12 || $[21] !== t13 || $[22] !== t14 || $[23] !== t15 || $[24] !== t16 || $[25] !== t17 || $[26] !== t18) {
-		t19 = cn("relative flex min-w-0 items-center justify-center text-center text-sm", t11, "[--ancestor-foreground:color-mix(in_oklab,var(--color-muted-foreground),var(--color-foreground)_40%)]", "[--fade:var(--rest-fade)] [--lift:0px] [--shade:var(--rest-shade)] [--tilt:var(--rest-tilt)]", "[--shade-color:black] [--shade-strength:1] dark:[--shade-color:white] dark:[--shade-strength:var(--dark-shade-strength)]", "origin-bottom [backface-visibility:hidden] motion-reduce:transition-none!", t12, t13, t14, t15, t16, t17, t18);
-		$[19] = t11;
-		$[20] = t12;
-		$[21] = t13;
-		$[22] = t14;
-		$[23] = t15;
-		$[24] = t16;
-		$[25] = t17;
-		$[26] = t18;
+	const t13 = liftable && "hover:[--fade:1] hover:[--lift:var(--hover-lift)] hover:[--shade:var(--hover-shade)] hover:[--tilt:var(--hover-tilt)]";
+	const t14 = liftable && "has-focus-visible:[--fade:1] has-focus-visible:[--lift:var(--hover-lift)] has-focus-visible:[--shade:var(--hover-shade)] has-focus-visible:[--tilt:var(--hover-tilt)]";
+	const t15 = liftable && "has-data-popup-open:[--fade:1] has-data-popup-open:[--lift:var(--hover-lift)] has-data-popup-open:[--shade:var(--hover-shade)] has-data-popup-open:[--tilt:var(--hover-tilt)]";
+	let t16;
+	if ($[22] !== t12 || $[23] !== t13 || $[24] !== t14 || $[25] !== t15) {
+		t16 = cn("relative flex min-w-0 items-center justify-center text-center text-sm", "[--ancestor-foreground:color-mix(in_oklab,var(--color-muted-foreground),var(--color-foreground)_40%)]", "[--fade:var(--rest-fade)] [--lift:0px] [--shade:var(--rest-shade)] [--tilt:var(--rest-tilt)]", "[--shade-color:black] [--shade-strength:1] dark:[--shade-color:white] dark:[--shade-strength:var(--dark-shade-strength)]", "origin-bottom [backface-visibility:hidden] motion-reduce:transition-none!", t12, t13, t14, t15);
+		$[22] = t12;
+		$[23] = t13;
+		$[24] = t14;
+		$[25] = t15;
+		$[26] = t16;
+	} else t16 = $[26];
+	const t17 = `${tilt}deg`;
+	const t18 = `${tilt / 2}deg`;
+	const t19 = Math.max(0, distance - 1);
+	let t20;
+	if ($[27] !== t19) {
+		t20 = stepSeries(FIRST_STEP_SHADE, t19);
 		$[27] = t19;
-	} else t19 = $[27];
-	const t20 = `${tilt}deg`;
-	const t21 = `${tilt / 2}deg`;
-	const t22 = `${shade}%`;
-	const t23 = Math.max(0, distance - 1);
-	let t24;
-	if ($[28] !== t23) {
-		t24 = stepSeries(FIRST_STEP_SHADE, t23);
-		$[28] = t23;
-		$[29] = t24;
-	} else t24 = $[29];
-	const t25 = `${t24}%`;
-	const t26 = `${first ? 0 : -1.5}px`;
-	const t27 = covered ? 1 - stepSeries(FIRST_STEP_FADE, distance - 1) : 1;
-	let t28;
-	if ($[30] !== covered || $[31] !== distance) {
-		t28 = covered ? stackInset(distance) : void 0;
-		$[30] = covered;
-		$[31] = distance;
-		$[32] = t28;
-	} else t28 = $[32];
-	let t29;
-	if ($[33] !== t20 || $[34] !== t21 || $[35] !== t22 || $[36] !== t25 || $[37] !== t26 || $[38] !== t27 || $[39] !== t28) {
-		t29 = {
-			"--rest-tilt": t20,
-			"--hover-tilt": t21,
-			"--rest-shade": t22,
+		$[28] = t20;
+	} else t20 = $[28];
+	const t21 = `${first ? 0 : -1.5}px`;
+	const t22 = covered ? 1 - stepSeries(FIRST_STEP_FADE, distance - 1) : 1;
+	let t23;
+	if ($[29] !== shade || $[30] !== t17 || $[31] !== t18 || $[32] !== t20 || $[33] !== t21 || $[34] !== t22) {
+		t23 = {
+			"--rest-tilt": t17,
+			"--hover-tilt": t18,
+			"--rest-shade": shade,
 			"--dark-shade-strength": DARK_SHADE_STRENGTH,
-			"--hover-shade": t25,
-			"--hover-lift": t26,
-			"--rest-fade": t27,
-			marginInline: t28,
+			"--hover-shade": t20,
+			"--hover-lift": t21,
+			"--rest-fade": t22,
 			transform: `perspective(${PERSPECTIVE}px) translateY(var(--lift)) rotateX(var(--tilt))`,
-			backgroundColor: "color-mix(in oklab, var(--color-background), var(--shade-color) calc(var(--shade) * var(--shade-strength)))",
-			transition: HEADER_TRANSITION
+			transition: `transform ${DURATION}ms ${EASE}`
 		};
-		$[33] = t20;
-		$[34] = t21;
-		$[35] = t22;
+		$[29] = shade;
+		$[30] = t17;
+		$[31] = t18;
+		$[32] = t20;
+		$[33] = t21;
+		$[34] = t22;
+		$[35] = t23;
+	} else t23 = $[35];
+	const t24 = t23;
+	const t25 = !flat && (first ? "rounded-t-lg" : "rounded-t-sm");
+	const t26 = covered && !first && "shadow-[0_-2px_5px_-3px_rgb(0_0_0/0.08)] dark:shadow-[0_-2px_5px_-3px_rgb(0_0_0/0.4)]";
+	const t27 = !covered && !first && "shadow-[0_-3px_8px_-4px_rgb(0_0_0/0.08)] dark:shadow-[0_-3px_8px_-4px_rgb(0_0_0/0.4)]";
+	let t28;
+	if ($[36] !== t25 || $[37] !== t26 || $[38] !== t27) {
+		t28 = cn("bg-background absolute inset-y-0 isolate origin-top", t25, t26, t27);
 		$[36] = t25;
 		$[37] = t26;
 		$[38] = t27;
 		$[39] = t28;
-		$[40] = t29;
-	} else t29 = $[40];
-	const t30 = t29;
+	} else t28 = $[39];
+	let t29;
+	if ($[40] !== inset) {
+		t29 = { insetInline: inset };
+		$[40] = inset;
+		$[41] = t29;
+	} else t29 = $[41];
+	let t30;
+	if ($[42] === Symbol.for("react.memo_cache_sentinel")) {
+		t30 = /* @__PURE__ */ jsx("div", {
+			className: "absolute inset-0 rounded-[inherit] motion-reduce:transition-none!",
+			style: {
+				backgroundColor: `color-mix(in oklab, var(--color-background), var(--shade-color) calc(${MAX_SHADE}% * var(--shade-strength)))`,
+				opacity: `calc(var(--shade) / ${MAX_SHADE})`,
+				transition: `opacity ${DURATION}ms ease-out`
+			}
+		});
+		$[42] = t30;
+	} else t30 = $[42];
 	let t31;
-	if ($[41] !== button || $[42] !== children || $[43] !== covered || $[44] !== popover || $[45] !== popoverOpen || $[46] !== tooltip) {
-		t31 = button && popover ? /* @__PURE__ */ jsxs(Popover, {
+	if ($[43] !== flat) {
+		t31 = !flat && /* @__PURE__ */ jsx("div", { className: cn("absolute inset-0 rounded-[inherit]", CARD_TOP_EDGE) });
+		$[43] = flat;
+		$[44] = t31;
+	} else t31 = $[44];
+	let t32;
+	if ($[45] !== t28 || $[46] !== t29 || $[47] !== t31) {
+		t32 = /* @__PURE__ */ jsxs("div", {
+			ref: surfaceRef,
+			"aria-hidden": true,
+			className: t28,
+			style: t29,
+			children: [t30, t31]
+		});
+		$[45] = t28;
+		$[46] = t29;
+		$[47] = t31;
+		$[48] = t32;
+	} else t32 = $[48];
+	const t33 = inset || void 0;
+	let t34;
+	if ($[49] !== t33) {
+		t34 = { marginInline: t33 };
+		$[49] = t33;
+		$[50] = t34;
+	} else t34 = $[50];
+	let t35;
+	if ($[51] !== button || $[52] !== children || $[53] !== covered || $[54] !== popover || $[55] !== popoverOpen || $[56] !== tooltip) {
+		t35 = button && popover ? /* @__PURE__ */ jsxs(Popover, {
 			open: popoverOpen,
 			onOpenChange: setPopoverOpen,
 			children: [/* @__PURE__ */ jsx(PopoverTrigger, { render: button }), /* @__PURE__ */ jsx(PopoverContent, {
@@ -542,38 +616,51 @@ function SidebarStackHeader(t0) {
 			className: "truncate px-3 text-(--ancestor-foreground) opacity-(--fade)",
 			children
 		}) : children);
-		$[41] = button;
-		$[42] = children;
-		$[43] = covered;
-		$[44] = popover;
-		$[45] = popoverOpen;
-		$[46] = tooltip;
-		$[47] = t31;
-	} else t31 = $[47];
-	let t32;
-	if ($[48] !== t19 || $[49] !== t30 || $[50] !== t31) {
-		t32 = /* @__PURE__ */ jsx("div", {
-			className: t19,
-			style: t30,
-			children: t31
+		$[51] = button;
+		$[52] = children;
+		$[53] = covered;
+		$[54] = popover;
+		$[55] = popoverOpen;
+		$[56] = tooltip;
+		$[57] = t35;
+	} else t35 = $[57];
+	let t36;
+	if ($[58] !== t34 || $[59] !== t35) {
+		t36 = /* @__PURE__ */ jsx("div", {
+			ref: contentRef,
+			className: "relative flex min-w-0 flex-1 items-center justify-center self-stretch",
+			style: t34,
+			children: t35
+		});
+		$[58] = t34;
+		$[59] = t35;
+		$[60] = t36;
+	} else t36 = $[60];
+	let t37;
+	if ($[61] !== t16 || $[62] !== t24 || $[63] !== t32 || $[64] !== t36) {
+		t37 = /* @__PURE__ */ jsxs("div", {
+			className: t16,
+			style: t24,
+			children: [t32, t36]
 		});
-		$[48] = t19;
-		$[49] = t30;
-		$[50] = t31;
-		$[51] = t32;
-	} else t32 = $[51];
-	let t33;
-	if ($[52] !== t10 || $[53] !== t32) {
-		t33 = /* @__PURE__ */ jsx("div", {
+		$[61] = t16;
+		$[62] = t24;
+		$[63] = t32;
+		$[64] = t36;
+		$[65] = t37;
+	} else t37 = $[65];
+	let t38;
+	if ($[66] !== t11 || $[67] !== t37) {
+		t38 = /* @__PURE__ */ jsx("div", {
 			ref,
-			className: t10,
-			children: t32
+			className: t11,
+			children: t37
 		});
-		$[52] = t10;
-		$[53] = t32;
-		$[54] = t33;
-	} else t33 = $[54];
-	return t33;
+		$[66] = t11;
+		$[67] = t37;
+		$[68] = t38;
+	} else t38 = $[68];
+	return t38;
 }
 
 //#endregion

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

@@ -1,8 +1,32 @@
 //#region src/features/preview/components/previewStyles.ts
+/**
+* Whether a style or stylesheet is the site's. The studio marks its own, including those it adds
+* to a frame's document, with `data-camox-studio`.
+*/
 function isSiteStyle(element) {
 	return !element.hasAttribute("data-camox-studio");
 }
 const EMPTY_PREVIEW_DOCUMENT = "<!doctype html><html><head></head><body><div id=\"root\" data-camox-preview-root></div></body></html>";
+/**
+* The stylesheets of a document's head that are the site document's: not the studio's, nor those
+* React hoists there for the blocks rendering in it (`data-precedence`).
+*/
+const SITE_STYLESHEETS = "link[rel~=\"stylesheet\"], style";
+const siteStylesheetsOf = (head) => Array.from(head.querySelectorAll(SITE_STYLESHEETS)).filter((element) => element.parentElement === head && isSiteStyle(element) && !element.hasAttribute("data-precedence"));
+/**
+* Gives a frame's document the site stylesheets of `html`, a site document: the ones it no
+* longer has go, and its new ones are added, the rest of the frame left as it is.
+*/
+function restyle(frame, html) {
+	const doc = frame.document;
+	const { DOMParser } = frame;
+	const wanted = siteStylesheetsOf(new DOMParser().parseFromString(html, "text/html").head);
+	const held = siteStylesheetsOf(doc.head);
+	const wantedMarkup = new Set(wanted.map((element) => element.outerHTML));
+	const heldMarkup = new Set(held.map((element) => element.outerHTML));
+	for (const element of held) if (!wantedMarkup.has(element.outerHTML)) element.remove();
+	for (const element of wanted) if (!heldMarkup.has(element.outerHTML)) doc.head.appendChild(doc.importNode(element, true));
+}
 
 //#endregion
-export { EMPTY_PREVIEW_DOCUMENT, isSiteStyle };
+export { EMPTY_PREVIEW_DOCUMENT, isSiteStyle, restyle };

package/dist/features/renderer/RendererApp.js

@@ -8,6 +8,7 @@ import { PreviewEditingOwnerContext } from "../preview/previewSelection.js";
 import { StudioNoticeContext } from "../preview/studioNotice.js";
 import { ContentEditsContext } from "../../core/editing/contentEdits.js";
 import { PreviewDocumentContext } from "../runtime/PreviewDocumentContext.js";
+import { restyle } from "../preview/components/previewStyles.js";
 import { FrameContext } from "../preview/components/Frame.js";
 import { DerivedPageContent } from "../page/DerivedPageContent.js";
 import { BlockPeek } from "../preview/components/BlockPeek.js";
@@ -425,7 +426,7 @@ function _temp2() {
 function _temp() {}
 /** The page at `pathname`, as the runtime renders it in the renderer's draft. */
 function FramePage(t0) {
-	const $ = c(20);
+	const $ = c(24);
 	const { camoxApp, codeLoaded, projectUuid, runtimeBasePath, pathname, derivedLayoutId, onRendered } = t0;
 	let t1;
 	if ($[0] !== derivedLayoutId || $[1] !== pathname || $[2] !== projectUuid || $[3] !== runtimeBasePath) {
@@ -449,52 +450,69 @@ function FramePage(t0) {
 	} else t1 = $[4];
 	const input = useRead(t1);
 	if (codeLoaded) React.use(codeLoaded);
-	const rendered = React.useEffectEvent(onRendered);
+	const frameWindow = React.use(FrameContext).window;
 	let t2;
-	if ($[7] !== rendered) {
-		t2 = () => rendered();
-		$[7] = rendered;
-		$[8] = t2;
-	} else t2 = $[8];
 	let t3;
-	if ($[9] !== input) {
-		t3 = [input];
-		$[9] = input;
+	if ($[7] !== frameWindow || $[8] !== input.previewDocument) {
+		t2 = () => {
+			if (frameWindow && input.previewDocument) restyle(frameWindow, input.previewDocument);
+		};
+		t3 = [frameWindow, input.previewDocument];
+		$[7] = frameWindow;
+		$[8] = input.previewDocument;
+		$[9] = t2;
 		$[10] = t3;
-	} else t3 = $[10];
-	React.useEffect(t2, t3);
-	const t4 = input.dehydratedState;
+	} else {
+		t2 = $[9];
+		t3 = $[10];
+	}
+	React.useLayoutEffect(t2, t3);
+	const rendered = React.useEffectEvent(onRendered);
+	let t4;
+	if ($[11] !== rendered) {
+		t4 = () => rendered();
+		$[11] = rendered;
+		$[12] = t4;
+	} else t4 = $[12];
 	let t5;
-	if ($[11] !== camoxApp || $[12] !== input.derived) {
-		t5 = input.derived ? /* @__PURE__ */ jsx(DerivedPageContent, {
+	if ($[13] !== input) {
+		t5 = [input];
+		$[13] = input;
+		$[14] = t5;
+	} else t5 = $[14];
+	React.useEffect(t4, t5);
+	const t6 = input.dehydratedState;
+	let t7;
+	if ($[15] !== camoxApp || $[16] !== input.derived) {
+		t7 = input.derived ? /* @__PURE__ */ jsx(DerivedPageContent, {
 			camoxApp,
 			derived: input.derived
 		}) : /* @__PURE__ */ jsx(EditablePageContent, {});
-		$[11] = camoxApp;
-		$[12] = input.derived;
-		$[13] = t5;
-	} else t5 = $[13];
-	let t6;
-	if ($[14] !== input.previewDocument || $[15] !== t5) {
-		t6 = /* @__PURE__ */ jsx(PreviewDocumentContext.Provider, {
+		$[15] = camoxApp;
+		$[16] = input.derived;
+		$[17] = t7;
+	} else t7 = $[17];
+	let t8;
+	if ($[18] !== input.previewDocument || $[19] !== t7) {
+		t8 = /* @__PURE__ */ jsx(PreviewDocumentContext.Provider, {
 			value: input.previewDocument,
-			children: t5
-		});
-		$[14] = input.previewDocument;
-		$[15] = t5;
-		$[16] = t6;
-	} else t6 = $[16];
-	let t7;
-	if ($[17] !== t4 || $[18] !== t6) {
-		t7 = /* @__PURE__ */ jsx(HydrationBoundary, {
-			state: t4,
-			children: t6
+			children: t7
 		});
-		$[17] = t4;
-		$[18] = t6;
+		$[18] = input.previewDocument;
 		$[19] = t7;
-	} else t7 = $[19];
-	return t7;
+		$[20] = t8;
+	} else t8 = $[20];
+	let t9;
+	if ($[21] !== t6 || $[22] !== t8) {
+		t9 = /* @__PURE__ */ jsx(HydrationBoundary, {
+			state: t6,
+			children: t8
+		});
+		$[21] = t6;
+		$[22] = t8;
+		$[23] = t9;
+	} else t9 = $[23];
+	return t9;
 }
 const messageOf = (error) => error instanceof Error ? error.message : String(error);
 const ERROR_STYLE = {

package/dist/features/runtime/artifactDocuments.js

@@ -0,0 +1,58 @@
+import { artifactFontLinks, artifactShellHash, artifactUrlDocument } from "../../core/lib/artifact.js";
+import { ARTIFACTS_PATH_PREFIX } from "./runtimeRoutes.js";
+
+//#region src/features/runtime/artifactDocuments.ts
+const shells = /* @__PURE__ */ new WeakMap();
+/**
+* The website's artifact shell, computed once per runtime: its font links come from the build's
+* document definition, so they never change while it runs.
+*/
+function readArtifactShell(options) {
+	let shell = shells.get(options);
+	if (!shell) {
+		shell = (async () => {
+			const fontLinks = artifactFontLinks(await options.getDocument?.());
+			return {
+				fontLinks,
+				hash: await artifactShellHash(fontLinks)
+			};
+		})();
+		shell.catch(() => shells.delete(options));
+		shells.set(options, shell);
+	}
+	return shell;
+}
+const YEAR = 31536e3;
+/**
+* An artifact's document, served at `/_camox/artifacts/<shellHash>/<sourceHash>`: the source the
+* API stores under its hash, inside the website's current shell. It's the same for every visitor,
+* so cookies are ignored. It keeps an opaque origin even when opened top-level, and only a
+* document whose shell matches its URL is cached: one from a previous release still loads.
+*/
+async function createArtifactDocumentResponse(pathname, options) {
+	const [shellHash, sourceHash, ...rest] = pathname.slice(ARTIFACTS_PATH_PREFIX.length).split("/");
+	const { apiUrl, projectUuid } = options;
+	if (!apiUrl || !projectUuid) return Response.json({ message: "Camox artifacts are not configured." }, { status: 500 });
+	if (!shellHash || !sourceHash || rest.length) return notFound();
+	const [shell, stored] = await Promise.all([readArtifactShell(options), fetch(`${apiUrl}/artifact-sources/${encodeURIComponent(projectUuid)}/${encodeURIComponent(sourceHash)}`)]);
+	if (stored.status === 404) return notFound();
+	if (!stored.ok) return new Response("Artifact source unavailable", {
+		status: 502,
+		headers: { "Cache-Control": "no-store" }
+	});
+	return new Response(artifactUrlDocument(await stored.text(), shell.fontLinks), { headers: {
+		"Content-Type": "text/html; charset=utf-8",
+		"Cache-Control": shellHash === shell.hash ? `public, max-age=${YEAR}, immutable` : "no-store",
+		"Content-Security-Policy": "sandbox allow-scripts",
+		"X-Robots-Tag": "noindex"
+	} });
+}
+function notFound() {
+	return new Response("Not found", {
+		status: 404,
+		headers: { "Cache-Control": "no-store" }
+	});
+}
+
+//#endregion
+export { createArtifactDocumentResponse, readArtifactShell };

package/dist/features/runtime/artifactSources.js

@@ -1,6 +1,40 @@
-import { artifactSourceOf } from "../../core/lib/artifact.js";
+import { artifactSourceOf, artifactTitle } from "../../core/lib/artifact.js";
 
 //#region src/features/runtime/artifactSources.ts
+function isStringRecord(value) {
+	return isPlainObject(value) && Object.values(value).every((hash) => typeof hash === "string");
+}
+/** A copy of a JSON value with every object replaced, deepest first. */
+function mapObjects(value, replace) {
+	if (Array.isArray(value)) return value.map((item) => mapObjects(item, replace));
+	if (!isPlainObject(value)) return value;
+	return replace(Object.fromEntries(Object.entries(value).map(([key, item]) => [key, mapObjects(item, replace)])));
+}
+/**
+* The page's dehydrated state with each artifact source replaced by a reference to the URL its
+* document loads from, `<artifactsPath><sourceHash>`, and its title: public pages load their
+* artifacts by URL, so neither their HTML nor their hydration data carries a source. Every block
+* and repeatable item the API reads names its sources' hashes beside its content.
+*/
+function referenceArtifactSources(dehydratedState, artifactsPath) {
+	return mapObjects(dehydratedState, (owner) => {
+		const { artifactHashes, content } = owner;
+		if (!isStringRecord(artifactHashes) || !isPlainObject(content)) return owner;
+		const referenced = { ...content };
+		for (const [field, hash] of Object.entries(artifactHashes)) {
+			const source = content[field];
+			if (typeof source !== "string") continue;
+			referenced[field] = {
+				artifactUrl: `${artifactsPath}${hash}`,
+				title: artifactTitle(source)
+			};
+		}
+		return {
+			...owner,
+			content: referenced
+		};
+	});
+}
 /**
 * A page's HTML holds each rendered artifact source in its frame's `srcdoc`, so the server leaves
 * them out of the hydration data, and the client takes them back from the frames before
@@ -84,4 +118,4 @@ function restoreArtifactSources(dehydratedState, root) {
 }
 
 //#endregion
-export { omitArtifactSources, restoreArtifactSources };
+export { omitArtifactSources, referenceArtifactSources, restoreArtifactSources };