camox 0.56.0 → 0.57.0

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;

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/studio/components/AgentSidebar.js

@@ -1,14 +1,14 @@
 import { cn } from "../../../lib/utils.js";
 import { SIDEBAR_GUTTER } from "../../preview/components/SidebarStack.js";
 import { ChatWidget } from "./ChatWidget.js";
-import { WorkersWidget } from "./WorkersWidget.js";
+import { Patrol } from "./Patrol.js";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/features/studio/components/AgentSidebar.tsx
 /**
-* The sidebar on the Canvas's right side, where editors work with Camox's agent: the Workers
-* widget over the Chat widget, which gets the larger share of the height. Laid over the Canvas,
+* The sidebar on the Canvas's right side, where editors work with Camox's agent: the Patrol
+* over the Chat widget, which gets the larger share of the height. Laid over the Canvas,
 * as the Content Sidebar is over its left: only the cards have a background, and the Canvas shows
 * around them. Elsewhere in the studio it is only hidden, so the chat keeps its thread and the
 * Preview and Studio pages follow the editor's runs too.
@@ -24,7 +24,7 @@ function AgentSidebar(t0) {
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
 		t2 = cn("absolute inset-y-0 right-0 z-10 flex flex-col gap-2 py-2 max-md:hidden", SIDEBAR_GUTTER);
 		t3 = { width: 265 };
-		t4 = /* @__PURE__ */ jsx(WorkersWidget, { className: "min-h-0 flex-[3_1_0]" });
+		t4 = /* @__PURE__ */ jsx(Patrol, { className: "min-h-0 flex-[3_1_0]" });
 		t5 = /* @__PURE__ */ jsx(ChatWidget, { className: "min-h-0 flex-[7_1_0]" });
 		$[0] = t2;
 		$[1] = t3;