camox 0.57.0 → 0.58.0

package/dist/core/createApp.d.ts

@@ -416,7 +416,7 @@ export declare function createApp({ blocks, lazyBlocks, layouts, collections, do
       Component: ({ blockData, mode, isFirstBlock, showAddBlockTop, showAddBlockBottom, addBlockAfterPosition }: BlockComponentProps<{
         [x: string]: unknown;
       }>) => import("react").JSX.Element;
-      LayoutItem: ({ collectionId, collection, properties, record, children, fallback }: LayoutItemProps) => string | number | bigint | boolean | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
+      LayoutItem: ({ collectionId, collection, properties, record, children, fallback }: LayoutItemProps) => string | number | bigint | boolean | import("react").JSX.Element | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | null | undefined;
       id: string;
       title: string;
       description: string;
@@ -858,7 +858,7 @@ export declare function createApp({ blocks, lazyBlocks, layouts, collections, do
       Component: ({ blockData, mode, isFirstBlock, showAddBlockTop, showAddBlockBottom, addBlockAfterPosition }: BlockComponentProps<{
         [x: string]: unknown;
       }>) => import("react").JSX.Element;
-      LayoutItem: ({ collectionId, collection, properties, record, children, fallback }: LayoutItemProps) => string | number | bigint | boolean | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
+      LayoutItem: ({ collectionId, collection, properties, record, children, fallback }: LayoutItemProps) => string | number | bigint | boolean | import("react").JSX.Element | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | null | undefined;
       id: string;
       title: string;
       description: string;

package/dist/core/createBlock.js

@@ -1,4 +1,4 @@
-import { artifactFrameProps, artifactStandInProps, isArtifactSource } from "./lib/artifact.js";
+import { artifactFrameProps, artifactStandInProps, isArtifactSource, isArtifactSourceReference } from "./lib/artifact.js";
 import { artifactData } from "./lib/artifactData.js";
 import { resolveBlockFields, resolveToMarkdown, resolveToStructuredData, resolveToTitle } from "./lib/contentType.js";
 import { useProjectUuid } from "../lib/auth.js";
@@ -190,9 +190,13 @@ function createViewBlock(options) {
 			size: useFieldSchema(name)?.size,
 			navigate: useNavigate()
 		});
-		const initialData = useInitialArtifactData(value, data);
+		const initialData = useInitialArtifactData(isArtifactSourceReference(value) ? value.artifactUrl : value, data);
 		const fontLinks = useOptionalCamoxApp()?.getArtifactFontLinks();
 		const runs = React.use(ArtifactsRunContext);
+		if (isArtifactSourceReference(value)) return children({
+			...artifactFrameProps(value, { data: initialData }),
+			...hostProps
+		});
 		if (!isArtifactSource(value)) return null;
 		return children({
 			...runs ? artifactFrameProps(value, {

package/dist/core/createLayout.d.ts

@@ -236,7 +236,7 @@ declare function createLayoutDefinition(options: AnyLayoutOptions): {
   Item: {
     ({ children }: {
       children: (item: any) => React.ReactNode;
-    }): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | React.JSX.Element | null | undefined;
+    }): string | number | bigint | boolean | React.JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
     displayName: string;
   };
   useData(): unknown;

package/dist/core/editing/createEditableBlock.d.ts

@@ -1694,7 +1694,7 @@ export declare function createEditableBlock<TSchemaShape extends Record<string,
       params: unknown[] & [];
     })["static"]; }, Exclude<keyof TSchemaShape, { [K_1 in keyof TSchemaShape]: TSchemaShape[K_1] extends import("@sinclair/typebox").TReadonly<TSchema> ? TSchemaShape[K_1] extends import("@sinclair/typebox").TOptional<TSchemaShape[K_1]> ? K_1 : never : never; }[keyof TSchemaShape] | { [K_2 in keyof TSchemaShape]: TSchemaShape[K_2] extends import("@sinclair/typebox").TReadonly<TSchema> ? TSchemaShape[K_2] extends import("@sinclair/typebox").TOptional<TSchemaShape[K_2]> ? never : K_2 : never; }[keyof TSchemaShape] | { [K_3 in keyof TSchemaShape]: TSchemaShape[K_3] extends import("@sinclair/typebox").TOptional<TSchema> ? TSchemaShape[K_3] extends import("@sinclair/typebox").TReadonly<TSchemaShape[K_3]> ? never : K_3 : never; }[keyof TSchemaShape]>>>>>) => React.JSX.Element;
     /** Renders a record page's record; see `BlockEditingRuntime.renderLayoutItem`. */
-    LayoutItem: ({ collectionId, collection, properties, record, children, fallback }: LayoutItemProps) => string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | React.JSX.Element | null | undefined;
+    LayoutItem: ({ collectionId, collection, properties, record, children, fallback }: LayoutItemProps) => string | number | bigint | boolean | React.JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
     id: string;
     title: string;
     description: string;

package/dist/core/lib/artifact.d.ts

@@ -3,14 +3,23 @@ import "./artifactData.js";
 import * as React from "react";
 import "@camox/api-contract";
 //#region src/core/lib/artifact.d.ts
-/** The frame attributes of an artifact source. */
-export type ArtifactFrameProps = {
-  srcDoc: string;
+/** The frame attributes an artifact's frame has, whichever way it loads its document. */
+type ArtifactFrameAttributes = {
   sandbox: string;
   allow: string;
   title: string;
   loading: "lazy";
 };
+/** The frame attributes of an artifact whose document is inlined. */
+export type InlineArtifactFrameProps = ArtifactFrameAttributes & {
+  srcDoc: string;
+  src?: never;
+};
+/** The frame attributes of an artifact: its document inlined, or loaded by URL. */
+export type ArtifactFrameProps = InlineArtifactFrameProps | (ArtifactFrameAttributes & {
+  src: string;
+  srcDoc?: never;
+});
 /** What `block.Artifact` passes to its render prop, to spread onto an `<iframe>`. */
 export type ArtifactRenderProps = ArtifactFrameProps & {
   /** Connects the frame to the `camox` runtime inside it. */
@@ -18,4 +27,5 @@ export type ArtifactRenderProps = ArtifactFrameProps & {
   /** For `size: "content"`, the height the artifact's content needs, once it reports it. */
   style?: React.CSSProperties;
 };
-//#endregion
+//#endregion
+export {};

package/dist/core/lib/artifact.js

@@ -1,8 +1,14 @@
 import { escapeAttribute } from "../../lib/html.js";
 import { ARTIFACT_RUNTIME } from "./artifactRuntime.js";
-import { artifactTitle } from "@camox/api-contract";
+import { artifactSourceHash, artifactTitle } from "@camox/api-contract";
 
 //#region src/core/lib/artifact.ts
+/** Whether a stored artifact value was replaced by a reference to its source. */
+function isArtifactSourceReference(value) {
+	if (typeof value !== "object" || value === null) return false;
+	const { artifactUrl, title } = value;
+	return typeof artifactUrl === "string" && typeof title === "string";
+}
 const FONT_LINK_RELS = /* @__PURE__ */ new Set(["stylesheet", "preconnect"]);
 const UNHEAD_TAG_OPTIONS = /* @__PURE__ */ new Set([
 	"key",
@@ -32,6 +38,15 @@ function artifactDataScript(data) {
 	return `${DATA_SCRIPT_OPEN}${json}<\/script>`;
 }
 /**
+* The fragment, `#` included, that carries the starting Artifact Data in the URL of a frame that
+* loads its artifact by URL instead of `srcdoc`. The runtime decodes it as `camox.data`. Fragments
+* never reach the server, so one cached document serves every placement. Empty data needs none.
+*/
+function artifactDataFragment(data) {
+	const json = JSON.stringify(data);
+	return json === "{}" ? "" : `#${encodeURIComponent(json)}`;
+}
+/**
 * The stylesheet and preconnect links of the project's document definition, as HTML, so artifacts
 * use the website's fonts from their first render. Nothing else from the document's head: its
 * title, meta, scripts and icons belong to the website, not to the artifact.
@@ -47,12 +62,35 @@ function artifactFontLinks(document) {
 	}).map(renderLink).join("");
 }
 /**
-* The document an artifact frame loads: the `camox` runtime, the website's font links, the initial
-* Artifact Data, then the stored source. The doctype comes first so the runtime's script never
-* puts the page in quirks mode; the source's own doctype, if any, is then ignored by the parser.
+* What every artifact's document holds before its source: the `camox` runtime, then the website's
+* font links. The doctype comes first so the runtime's script never puts the page in quirks mode;
+* the source's own doctype, if any, is then ignored by the parser.
+*/
+function artifactShell(fontLinks) {
+	return `<!doctype html><script>${ARTIFACT_RUNTIME}<\/script>${fontLinks}`;
+}
+/**
+* The hash of the shell around every artifact source, which names it in the URLs public pages
+* load artifacts from. It changes only with the runtime or the website's font links, so a release
+* that changes neither keeps every artifact cached.
+*/
+function artifactShellHash(fontLinks) {
+	return artifactSourceHash(artifactShell(fontLinks));
+}
+/**
+* The document an inline (`srcdoc`) artifact frame loads: the shell, the initial Artifact Data,
+* then the stored source.
 */
 function artifactDocument(source, { fontLinks = "", data = {} }) {
-	return `<!doctype html>${`<script>${ARTIFACT_RUNTIME}<\/script>${fontLinks}${artifactDataScript(data)}`}${source}`;
+	return `${artifactShell(fontLinks)}${artifactDataScript(data)}${source}`;
+}
+/**
+* The document served at an artifact's URL: the shell, then the stored source. No Artifact Data:
+* the frame's URL fragment carries it (`artifactDataFragment`), so one cached document serves
+* every placement, and an inline data script would win over the fragment.
+*/
+function artifactUrlDocument(source, fontLinks) {
+	return `${artifactShell(fontLinks)}${source}`;
 }
 /**
 * The artifact source inside an artifact's document, the reverse of `artifactDocument`, or `null`
@@ -60,7 +98,7 @@ function artifactDocument(source, { fontLinks = "", data = {} }) {
 * JSON escapes it too, so the first `<\/script>` after the data's opening tag ends the data.
 */
 function artifactSourceOf(document) {
-	const head = `<!doctype html><script>${ARTIFACT_RUNTIME}<\/script>`;
+	const head = artifactShell("");
 	if (!document.startsWith(head)) return null;
 	const data = document.indexOf(DATA_SCRIPT_OPEN, head.length);
 	if (data < 0 || document.slice(head.length, data).includes("<script")) return null;
@@ -68,19 +106,22 @@ function artifactSourceOf(document) {
 	if (end < 0) return null;
 	return document.slice(end + 9);
 }
-/**
-* The frame props for an artifact source, with its initial Artifact Data and the website's font
-* links. This getter is the boundary that hides how the source reaches the frame (inline `srcdoc`
-* today), so blocks never depend on it.
-*/
-function artifactFrameProps(source, options = {}) {
-	return {
-		srcDoc: artifactDocument(source, options),
+function artifactFrameProps(artifact, options = {}) {
+	const attributes = {
 		sandbox: "allow-scripts",
 		allow: "fullscreen; clipboard-write",
-		title: artifactTitle(source),
 		loading: "lazy"
 	};
+	if (typeof artifact === "string") return {
+		srcDoc: artifactDocument(artifact, options),
+		...attributes,
+		title: artifactTitle(artifact)
+	};
+	return {
+		src: `${artifact.artifactUrl}${artifactDataFragment(options.data ?? {})}`,
+		...attributes,
+		title: artifact.title
+	};
 }
 const PLACEHOLDER_SOURCE = `<!doctype html>
 <html>
@@ -151,4 +192,4 @@ function isArtifactSource(value) {
 }
 
 //#endregion
-export { artifactFontLinks, artifactFrameProps, artifactPlaceholderProps, artifactSourceOf, artifactStandInProps, artifactTitle, isArtifactSource };
+export { artifactDataFragment, artifactFontLinks, artifactFrameProps, artifactPlaceholderProps, artifactShellHash, artifactSourceOf, artifactStandInProps, artifactTitle, artifactUrlDocument, isArtifactSource, isArtifactSourceReference };

package/dist/core/lib/artifactRuntime.js

@@ -13,7 +13,9 @@
 *   change. The host converts the colors, so the runtime that every frame inlines stays small.
 * - host → frame: `data` with the latest Artifact Data. The initial data is inlined in the
 *   `srcDoc` as a `<script type="application/json" data-camox-data>` after the runtime and the
-*   font links, so it is read lazily, on first access.
+*   font links, or, for a frame loaded by URL, encoded in the URL's fragment (see
+*   `artifactDataFragment`). It is read lazily, on first access, but the fragment is captured as
+*   the runtime starts, before the artifact source can change it.
 * - runtime → page: `observe-viewport` with `observe`, when the artifact's first `onViewport`
 *   subscription starts or its last one ends. While observed, the host sends `viewport` with
 *   `progress` and `visibleRatio` whenever they change.
@@ -30,7 +32,7 @@
 * `plugins/minifyArtifactRuntime.ts`), so it must stay one template literal without
 * interpolations or backslashes.
 */
-const ARTIFACT_RUNTIME = "(()=>{\"use strict\";let e=window.parent,t=null,n=null,r,i,a=new Set,o=()=>{if(i!==void 0)return r;let e=document.querySelector(`script[data-camox-data]`);try{r=e?JSON.parse(e.textContent):{}}catch{r={}}return i=JSON.stringify(r),r},s=(()=>{let e=new Set,t=[],n=Object.freeze({tokens:Object.freeze({}),colors:Object.freeze({})}),r=document.createElement(`style`);r.textContent=`body { visibility: hidden !important; }`,document.head.append(r);let i=()=>r.remove();setTimeout(i,300);let a=e=>Number.isFinite(e)?Math.min(255,Math.max(0,Math.round(e))):0;return{get current(){return n},receive(r){let o={},s={},c=r.colors||{};for(let[e,t]of Object.entries(r.tokens||{})){if(!e.startsWith(`--`)||typeof t!=`string`)continue;o[e]=t;let n=Object.hasOwn(c,e)?c[e]:null;n&&typeof n==`object`&&(s[e]=Object.freeze({r:a(n.r),g:a(n.g),b:a(n.b)}))}let l=document.documentElement.style;for(let e of t)Object.hasOwn(o,e)||l.removeProperty(e);for(let[e,t]of Object.entries(o))l.setProperty(e,t);t=Object.keys(o),i(),n=Object.freeze({tokens:Object.freeze(o),colors:Object.freeze(s)});for(let t of[...e])t(n)},subscribe(t){return e.add(t),()=>{e.delete(t)}}}})(),c=new Set,l=null,u=null,d=null,f=()=>{let e=Math.ceil(document.documentElement.getBoundingClientRect().height);e!==d&&(d=e,p(`height`,{height:d}))},p=(n,r)=>{t&&e.postMessage({...r,camox:n,channel:t},`*`)},m=()=>p(`observe-viewport`,{observe:c.size>0}),h={studio(e){let t=e.studio;n=t?Object.freeze({editing:!!t.editing,canvas:!!t.canvas}):null},data(e){o();let t=JSON.stringify(e.data??{});if(t!==i){r=JSON.parse(t),i=t;for(let e of[...a])e(r)}},theme:s.receive,measure(){d=null,u||(u=new ResizeObserver(f),u.observe(document.documentElement)),f()},viewport(e){let{progress:t,visibleRatio:n}=e;if(typeof t==`number`&&typeof n==`number`){l=Object.freeze({progress:t,visibleRatio:n}),document.documentElement.style.setProperty(`--camox-progress`,String(t));for(let e of c)e(l)}}};window.addEventListener(`message`,e=>{let n=e.data;if(n&&typeof n.camox==`string`){if(n.camox===`connect`){if(typeof n.channel!=`string`||n.channel===t)return;t=n.channel,p(`ready`),c.size>0&&m()}else t&&n.channel===t&&Object.hasOwn(h,n.camox)&&h[n.camox](n)}});let g=Object.freeze({get studio(){return n},get data(){return o()},onData(e){return a.add(e),()=>{a.delete(e)}},get theme(){return s.current},onTheme:s.subscribe,navigate(e){p(`navigate`,{href:String(e)})},onViewport(e){if(typeof e!=`function`)throw TypeError(`camox.onViewport needs a callback`);let t=t=>e(t);return c.add(t),c.size===1?m():l&&queueMicrotask(()=>c.has(t)&&e(l)),()=>{c.delete(t)&&c.size===0&&m()}}});Object.defineProperty(window,\"camox\",{value:g,enumerable:!0}),e!==window&&e.postMessage({camox:`hello`},`*`)})();";
+const ARTIFACT_RUNTIME = "(()=>{\"use strict\";let e=window.parent,t=null,n=null,r,i,a=new Set,o=location.hash.slice(1),s=()=>{if(i!==void 0)return r;let e=document.querySelector(`script[data-camox-data]`);try{r=JSON.parse(e?e.textContent:decodeURIComponent(o)),(!r||typeof r!=`object`||Array.isArray(r))&&(r={})}catch{r={}}return i=JSON.stringify(r),r},c=(()=>{let e=new Set,t=[],n=Object.freeze({tokens:Object.freeze({}),colors:Object.freeze({})}),r=document.createElement(`style`);r.textContent=`body { visibility: hidden !important; }`,document.head.append(r);let i=()=>r.remove();setTimeout(i,300);let a=e=>Number.isFinite(e)?Math.min(255,Math.max(0,Math.round(e))):0;return{get current(){return n},receive(r){let o={},s={},c=r.colors||{};for(let[e,t]of Object.entries(r.tokens||{})){if(!e.startsWith(`--`)||typeof t!=`string`)continue;o[e]=t;let n=Object.hasOwn(c,e)?c[e]:null;n&&typeof n==`object`&&(s[e]=Object.freeze({r:a(n.r),g:a(n.g),b:a(n.b)}))}let l=document.documentElement.style;for(let e of t)Object.hasOwn(o,e)||l.removeProperty(e);for(let[e,t]of Object.entries(o))l.setProperty(e,t);t=Object.keys(o),i(),n=Object.freeze({tokens:Object.freeze(o),colors:Object.freeze(s)});for(let t of[...e])t(n)},subscribe(t){return e.add(t),()=>{e.delete(t)}}}})(),l=new Set,u=null,d=null,f=null,p=()=>{let e=Math.ceil(document.documentElement.getBoundingClientRect().height);e!==f&&(f=e,m(`height`,{height:f}))},m=(n,r)=>{t&&e.postMessage({...r,camox:n,channel:t},`*`)},h=()=>m(`observe-viewport`,{observe:l.size>0}),g={studio(e){let t=e.studio;n=t?Object.freeze({editing:!!t.editing,canvas:!!t.canvas}):null},data(e){s();let t=JSON.stringify(e.data??{});if(t!==i){r=JSON.parse(t),i=t;for(let e of[...a])e(r)}},theme:c.receive,measure(){f=null,d||(d=new ResizeObserver(p),d.observe(document.documentElement)),p()},viewport(e){let{progress:t,visibleRatio:n}=e;if(typeof t==`number`&&typeof n==`number`){u=Object.freeze({progress:t,visibleRatio:n}),document.documentElement.style.setProperty(`--camox-progress`,String(t));for(let e of l)e(u)}}};window.addEventListener(`message`,e=>{let n=e.data;if(n&&typeof n.camox==`string`){if(n.camox===`connect`){if(typeof n.channel!=`string`||n.channel===t)return;t=n.channel,m(`ready`),l.size>0&&h()}else t&&n.channel===t&&Object.hasOwn(g,n.camox)&&g[n.camox](n)}});let _=Object.freeze({get studio(){return n},get data(){return s()},onData(e){return a.add(e),()=>{a.delete(e)}},get theme(){return c.current},onTheme:c.subscribe,navigate(e){m(`navigate`,{href:String(e)})},onViewport(e){if(typeof e!=`function`)throw TypeError(`camox.onViewport needs a callback`);let t=t=>e(t);return l.add(t),l.size===1?h():u&&queueMicrotask(()=>l.has(t)&&e(u)),()=>{l.delete(t)&&l.size===0&&h()}}});Object.defineProperty(window,\"camox\",{value:_,enumerable:!0}),e!==window&&e.postMessage({camox:`hello`},`*`)})();";
 
 //#endregion
 export { ARTIFACT_RUNTIME };

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 };

package/dist/features/runtime/runtime.js

@@ -3,7 +3,7 @@ import { createRequestContext } from "../../core/requestContext.js";
 import { buildClearServerAuthCookieHeader, getServerAuthCookieHeader } from "../../lib/server-auth-cookie.js";
 import { UNNAMED_DEFAULT_LOCALE, localizedPath, parseLocalePath } from "../../lib/locale-path.js";
 import { draftNamedBy } from "../../lib/draft-scope.js";
-import { RUNTIME_ROUTE_PATHS, matchRuntimeOwnedRoute } from "./runtimeRoutes.js";
+import { ARTIFACTS_PATH_PREFIX, RUNTIME_ROUTE_PATHS, matchRuntimeOwnedRoute } from "./runtimeRoutes.js";
 import { reads } from "../../lib/studio-reads.js";
 import { asCollectionItem, recordMarkdownTemplate, recordPageValues } from "../../core/recordItem.js";
 import { PLATFORM_SCRIPT } from "../../lib/platform.js";
@@ -17,7 +17,8 @@ import { assetPrefix } from "./assetPrefix.js";
 import { documentGoogleFonts } from "../og/documentFonts.js";
 import { alternatesByPage, findAlternates, hreflangLinks } from "./alternates.js";
 import { configuredProviders, renderAnalyticsScripts } from "./analytics.js";
-import { omitArtifactSources } from "./artifactSources.js";
+import { createArtifactDocumentResponse, readArtifactShell } from "./artifactDocuments.js";
+import { omitArtifactSources, referenceArtifactSources } from "./artifactSources.js";
 import { readBreadcrumb } from "./breadcrumbs.js";
 import { RouteDiscoveryError, listLivePages } from "./livePages.js";
 import { formatLlmsTxt } from "./llmsTxt.js";
@@ -519,8 +520,9 @@ function preparePreviewDocument(input, options, document) {
 	input.previewDocument = `<!doctype html><html${siteHead.htmlAttrs}><head><base href="${escapeXml(href)}">${siteHead.headTags}</head><body${siteHead.bodyAttrs}>${siteHead.bodyTagsOpen}<div id="root" data-camox-preview-root></div>${siteHead.bodyTags}</body></html>`;
 }
 /**
-* The render input a page's HTML embeds for hydration. Visitors load public pages, whose HTML
-* already holds each rendered artifact source in its frame, so their copy leaves those out.
+* The render input a page's HTML embeds for hydration. Outside the studio, a page whose HTML
+* inlines its artifacts (in dev mode) already holds each rendered source in its frame, so their
+* copy leaves those out. Public pages load artifacts by URL and hold no source at all.
 */
 function hydrationInputFor(input, html) {
 	if (input.presentation === "studio") return input;
@@ -529,6 +531,21 @@ function hydrationInputFor(input, html) {
 		dehydratedState: omitArtifactSources(input.dehydratedState, html)
 	};
 }
+/**
+* The render input with its artifacts loaded by URL, where a visitor reads Live: each artifact
+* source becomes a reference to the document the website serves, so neither the page's HTML nor
+* its data carries a source, and the client renders the frames the server did. The studio, drafts
+* and dev mode keep inlined sources, so an agent's change shows at once.
+*/
+async function withArtifactsByUrl(input, options) {
+	if (input.presentation !== "public" || input.draftId || options.developmentDraft) return input;
+	const shell = await readArtifactShell(options);
+	const artifactsPath = `${input.runtimeBasePath}${ARTIFACTS_PATH_PREFIX}${shell.hash}/`;
+	return {
+		...input,
+		dehydratedState: referenceArtifactSources(input.dehydratedState, artifactsPath)
+	};
+}
 function renderStudioThemeScript(enabled) {
 	return enabled ? `<script data-camox-studio>${STUDIO_THEME_SCRIPT}${PLATFORM_SCRIPT}<\/script>` : "";
 }
@@ -841,7 +858,7 @@ async function createPageHtmlResponse({ options, pathname, located, request, pag
 			studio,
 			draftId: result.draftId
 		}, result.data.page.project);
-		const pageRenderInput = {
+		const pageRenderInput = await withArtifactsByUrl({
 			alternates,
 			project,
 			presentation: studio ? "studio" : "public",
@@ -860,7 +877,7 @@ async function createPageHtmlResponse({ options, pathname, located, request, pag
 			runtimeBasePath: normalizeRuntimeBasePath(options.runtimeBasePath),
 			locale: located.locale,
 			locales: located.locales
-		};
+		}, options);
 		preparePreviewDocument(pageRenderInput, options, document);
 		const appHtml = await options.renderPage(pageRenderInput);
 		const renderedHead = renderHead(studio ? {} : document, createPageHeadInput(head), studio ? void 0 : options.stylesheetUrl, studio ? options.studioStylesheetUrl : void 0, studio ? void 0 : located.locale);
@@ -1170,7 +1187,7 @@ async function createDerivedResponse(options, pathname, located, request, { data
 			studio,
 			draftId: read.draftId
 		}, shared.project);
-		const input = {
+		const input = await withArtifactsByUrl({
 			alternates,
 			project,
 			presentation: studio ? "studio" : "public",
@@ -1199,7 +1216,7 @@ async function createDerivedResponse(options, pathname, located, request, { data
 				result: serializedResult,
 				layout: shared.layout
 			}
-		};
+		}, options);
 		const document = await options.getDocument?.() ?? {};
 		preparePreviewDocument(input, options, document);
 		if (dataOnly) return Response.json(input, { headers: {
@@ -1350,7 +1367,7 @@ async function createPageDataResponse({ options, pathname, located, request, pag
 			localeReads: localeReads(result.draftId)
 		});
 		const dehydratedState = dehydrate(queryClient);
-		const input = {
+		const navigationInput = await withArtifactsByUrl({
 			alternates,
 			apiUrl: options.apiUrl,
 			authenticationUrl: options.authenticationUrl ?? "",
@@ -1368,9 +1385,9 @@ async function createPageDataResponse({ options, pathname, located, request, pag
 			loaderData: result.data,
 			head,
 			dehydratedState
-		};
-		preparePreviewDocument(input, options, await options.getDocument?.() ?? {});
-		return Response.json(input, { headers });
+		}, options);
+		preparePreviewDocument(navigationInput, options, await options.getDocument?.() ?? {});
+		return Response.json(navigationInput, { headers });
 	} catch (error) {
 		if (isNotFoundError(error)) {
 			const derived = await createDerivedResponse(options, pathname, located, request, { dataOnly: true });
@@ -1397,6 +1414,7 @@ async function handleCamoxRequest(request, options = {}) {
 			layouts: camoxApp.getLayouts().map((layout) => layout._internal.id)
 		});
 	}
+	if (match.kind === "artifact") return createArtifactDocumentResponse(pathname, options);
 	if (match.kind === "og") return createOgResponse(request, options);
 	if (match.kind === "renderer") return createRendererDocumentResponse(options);
 	if (match.kind === "logo") return createProjectLogoResponse(request, options);

package/dist/features/runtime/runtimeRoutes.d.ts

@@ -1,9 +1,10 @@
 //#region src/features/runtime/runtimeRoutes.d.ts
 /**
- * The URLs the runtime answers that aren't pages or the Studio. Worker request filtering, runtime
- * route matching and client navigation all read this list, so a new one can't be forgotten in any
- * of them. Prefix rules stay with their readers: the Worker also answers every `/camox/` Studio
- * path, and client navigation also skips any other `/_camox/` path.
+ * The URLs the runtime answers that aren't pages or the Studio, besides artifact documents
+ * (`ARTIFACTS_PATH_PREFIX`). Worker request filtering, runtime route matching and client
+ * navigation all match them through `matchRuntimeOwnedRoute`, so a new one can't be forgotten in
+ * any of them. Other prefix rules stay with their readers: the Worker also answers every
+ * `/camox/` Studio path, and client navigation also skips any other `/_camox/` path.
  * No imports: client navigation ships this module in the browser bundle.
  */
 export declare const RUNTIME_ROUTE_PATHS: {
@@ -18,5 +19,5 @@ export declare const RUNTIME_ROUTE_PATHS: {
   readonly sitemap: "/sitemap.xml";
   readonly "llms-txt": "/llms.txt";
 };
-export type RuntimeOwnedRouteKind = keyof typeof RUNTIME_ROUTE_PATHS;
+export type RuntimeOwnedRouteKind = keyof typeof RUNTIME_ROUTE_PATHS | "artifact";
 //#endregion

package/dist/features/runtime/runtimeRoutes.js

@@ -1,9 +1,10 @@
 //#region src/features/runtime/runtimeRoutes.ts
 /**
-* The URLs the runtime answers that aren't pages or the Studio. Worker request filtering, runtime
-* route matching and client navigation all read this list, so a new one can't be forgotten in any
-* of them. Prefix rules stay with their readers: the Worker also answers every `/camox/` Studio
-* path, and client navigation also skips any other `/_camox/` path.
+* The URLs the runtime answers that aren't pages or the Studio, besides artifact documents
+* (`ARTIFACTS_PATH_PREFIX`). Worker request filtering, runtime route matching and client
+* navigation all match them through `matchRuntimeOwnedRoute`, so a new one can't be forgotten in
+* any of them. Other prefix rules stay with their readers: the Worker also answers every
+* `/camox/` Studio path, and client navigation also skips any other `/_camox/` path.
 * No imports: client navigation ships this module in the browser bundle.
 */
 const RUNTIME_ROUTE_PATHS = {
@@ -18,11 +19,17 @@ const RUNTIME_ROUTE_PATHS = {
 	sitemap: "/sitemap.xml",
 	"llms-txt": "/llms.txt"
 };
+/**
+* Where public pages load artifacts from: `<prefix><shellHash>/<sourceHash>`. Each document is
+* cached by its own URL, never as a page.
+*/
+const ARTIFACTS_PATH_PREFIX = "/_camox/artifacts/";
 /** Which runtime-owned route a path inside the runtime (base path removed) is, if any. */
 function matchRuntimeOwnedRoute(pathname) {
 	for (const [kind, path] of Object.entries(RUNTIME_ROUTE_PATHS)) if (pathname === path) return kind;
+	if (pathname.startsWith("/_camox/artifacts/")) return "artifact";
 	return null;
 }
 
 //#endregion
-export { RUNTIME_ROUTE_PATHS, matchRuntimeOwnedRoute };
+export { ARTIFACTS_PATH_PREFIX, RUNTIME_ROUTE_PATHS, matchRuntimeOwnedRoute };