camox 0.56.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/canvas/CanvasPageHeader.js

@@ -39,7 +39,7 @@ function CanvasPageHeader({ page, pathname, selected, onSelect, onHoverChange, o
 		}
 	};
 	const path = pathname ?? (page.kind === "derived" ? page.pattern : void 0);
-	const pathClassName = "text-muted-foreground w-full min-w-0 truncate text-left text-xs font-normal";
+	const pathClassName = "text-muted-foreground max-w-full min-w-0 truncate text-left text-xs font-normal";
 	const focusClassName = "focus-visible:ring-ring outline-none focus-visible:ring-2";
 	const name = draft !== null ? /* @__PURE__ */ jsx("input", {
 		"aria-label": "Page nickname",

package/dist/features/canvas/canvasFrameDocument.js

@@ -4,6 +4,16 @@ import { EMPTY_PREVIEW_DOCUMENT, isSiteStyle } from "../preview/components/previ
 //#region src/features/canvas/canvasFrameDocument.ts
 /** Freezes CSS animations, including ones that start while the frame is paused. */
 const PAUSED_ANIMATIONS_STYLE = `html[${PREVIEW_PAUSED_ATTRIBUTE}] *, html[${PREVIEW_PAUSED_ATTRIBUTE}] *::before, html[${PREVIEW_PAUSED_ATTRIBUTE}] *::after { animation-play-state: paused !important; }`;
+/**
+* A style of the studio's own for a frame's document, marked so that giving the frame a site
+* document's stylesheets (`restyle`) leaves it.
+*/
+function studioStyle(doc, css) {
+	const style = doc.createElement("style");
+	style.setAttribute("data-camox-studio", "");
+	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";
 const BLOCK = "[data-camox-viewport-block]";
@@ -93,8 +103,7 @@ function createCanvasDocument(previewDocument, href) {
 	doc.querySelector("[data-camox-preview-root]")?.replaceChildren();
 	doc.documentElement.style.setProperty("overscroll-behavior", "none");
 	doc.body.style.setProperty("overscroll-behavior", "none");
-	const paused = doc.createElement("style");
-	paused.textContent = PAUSED_ANIMATIONS_STYLE;
+	const paused = studioStyle(doc, PAUSED_ANIMATIONS_STYLE);
 	doc.head.appendChild(paused);
 	return `<!doctype html>${doc.documentElement.outerHTML}`;
 }
@@ -106,8 +115,7 @@ function createCanvasDocument(previewDocument, href) {
 */
 function adoptCanvasDocument(iframe, root, viewportHeight) {
 	const doc = root.ownerDocument;
-	const paused = doc.createElement("style");
-	paused.textContent = PAUSED_ANIMATIONS_STYLE;
+	const paused = studioStyle(doc, PAUSED_ANIMATIONS_STYLE);
 	doc.head.appendChild(paused);
 	const restored = [doc.documentElement, doc.body].map((element) => ({
 		element,
@@ -199,8 +207,7 @@ 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 = doc.createElement("style");
-	overlapStyle.textContent = BLOCK_OVERLAP_STYLE;
+	const overlapStyle = studioStyle(doc, BLOCK_OVERLAP_STYLE);
 	doc.head.appendChild(overlapStyle);
 	const followOverlap = () => {
 		const overlap = iframe.closest(`[${BLOCK_OVERLAP_ATTRIBUTE}]`);

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

@@ -5,7 +5,7 @@ import { PageViewportContext } from "../../runtime/pageViewport.js";
 import { PreviewDocumentContext } from "../../runtime/PreviewDocumentContext.js";
 import { ViewportContinuityContext, capturePreviewAnchor, restorePreviewAnchor } from "../viewportContinuity.js";
 import { PreviewActivationContext } from "./PreviewActivation.js";
-import { EMPTY_PREVIEW_DOCUMENT, isSiteStyle } from "./previewStyles.js";
+import { EMPTY_PREVIEW_DOCUMENT, isSiteStyle, restyle } from "./previewStyles.js";
 import { c } from "react/compiler-runtime";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -21,23 +21,6 @@ function useFrame() {
 	if (!context) throw new Error("useFrame must be used within a Frame");
 	return context;
 }
-/** The stylesheets of a document's head that are the site's: not the studio's. */
-const SITE_STYLESHEETS = "link[rel~=\"stylesheet\"], style";
-const siteStylesheetsOf = (head) => Array.from(head.querySelectorAll(SITE_STYLESHEETS)).filter((element) => element.parentElement === head && isSiteStyle(element));
-/**
-* Gives the 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));
-}
 function ClearServerMarkup(t0) {
 	const $ = c(4);
 	const { nodes } = t0;