camox 0.54.0 → 0.57.0

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

@@ -31,16 +31,14 @@ const DARK_SHADE_STRENGTH = 2.5;
 /** Keeps a sidebar's cards off its sides, so their edges show. */
 const SIDEBAR_GUTTER = "px-2";
 /**
-* The color of a card's edges: the border's, solid. Dark mode's border is translucent, so it's
-* laid over the Canvas behind the sidebars, to look the same over the card as beside it.
+* The front card's bottom, under its header, with a soft shadow down its sides that stops short
+* of its top, so it doesn't fall on its header.
 */
-const CARD_EDGE_COLOR = "border-border dark:border-[color-mix(in_srgb,var(--color-muted),white_10%)]";
-/** The front card's sides and bottom, under its header. */
-const CARD_BODY_EDGES = `rounded-b-lg border border-t-0 ${CARD_EDGE_COLOR}`;
-/** The bottom card's top and sides, as it meets the top of a sidebar. */
-const BOTTOM_CARD_EDGES = `rounded-t-lg border border-b-0 ${CARD_EDGE_COLOR}`;
-/** The front card's top and sides, over the cards behind it. */
-const FRONT_CARD_EDGES = `border border-b-0 ${CARD_EDGE_COLOR}`;
+const CARD_BODY_EDGES = "rounded-b-lg inset-shadow-raised-bottom shadow-[0_12px_24px_-12px_rgb(0_0_0/0.14)] dark:shadow-[0_12px_24px_-12px_rgb(0_0_0/0.6)]";
+/** The bottom card's top, as it meets the top of a sidebar. */
+const BOTTOM_CARD_EDGES = "rounded-t-lg inset-shadow-raised-top";
+/** A card's top, over the cards behind it. */
+const CARD_TOP_EDGE = "inset-shadow-raised-top";
 /**
 * How much the second card behind the front fades its name, which shows depth on dark
 * backgrounds too. The card right behind the front doesn't fade.
@@ -66,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 = {
@@ -314,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;
@@ -352,7 +377,7 @@ function SidebarStackView(t0) {
 	const { depth, className, children } = t0;
 	const ref = React.useRef(null);
 	useStackCard(ref, depth, true);
-	const t1 = React.useContext(StackMotionContext) != null && "rounded-b-lg border border-t-0 border-border dark:border-[color-mix(in_srgb,var(--color-muted),white_10%)]";
+	const t1 = React.useContext(StackMotionContext) != null && "rounded-b-lg inset-shadow-raised-bottom shadow-[0_12px_24px_-12px_rgb(0_0_0/0.14)] dark:shadow-[0_12px_24px_-12px_rgb(0_0_0/0.6)]";
 	let t2;
 	if ($[0] !== className || $[1] !== t1) {
 		t2 = cn("bg-background min-h-0 flex-1 origin-top", t1, className);
@@ -374,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;
@@ -452,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 border border-b-0 border-border dark:border-[color-mix(in_srgb,var(--color-muted),white_10%)]";
-	const t14 = covered && !first && `border ${CARD_EDGE_COLOR} 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 && (inStack ? `${FRONT_CARD_EDGES} shadow-[0_-3px_8px_-4px_rgb(0_0_0/0.08)] dark:shadow-[0_-3px_8px_-4px_rgb(0_0_0/0.4)]` : `border-t ${CARD_EDGE_COLOR} 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, {
@@ -544,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/StudioEditingFallback.js

@@ -1,6 +1,6 @@
 import { CanvasLoadingScreen } from "../../canvas/CanvasLoadingScreen.js";
 import { previewStore, selectIsCanvasShown } from "../previewStore.js";
-import { CanvasSidebarSkeleton } from "../../canvas/sidebar/CanvasSidebarSkeleton.js";
+import { ContentSidebarSkeleton } from "../../canvas/sidebar/ContentSidebarSkeleton.js";
 import { c } from "react/compiler-runtime";
 import { useSelector } from "@xstate/store-react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -9,7 +9,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 /**
 * What holds the page's place while the editor loads. The studio never renders the site's code:
 * a loading screen shows where the page will, in the Canvas's background, until the renderer
-* frame shows it. Showing the Canvas before the editor is ready also shows the Canvas sidebar's
+* frame shows it. Showing the Canvas before the editor is ready also shows the Content Sidebar's
 * placeholder, as the editor does while the Canvas prepares.
 */
 function StudioEditingFallback(t0) {
@@ -18,7 +18,7 @@ function StudioEditingFallback(t0) {
 	const isCanvasShown = useSelector(previewStore, selectIsCanvasShown);
 	let t1;
 	if ($[0] !== isCanvasShown || $[1] !== layoutPage) {
-		t1 = isCanvasShown && /* @__PURE__ */ jsx(CanvasSidebarSkeleton, { layoutPage });
+		t1 = isCanvasShown && /* @__PURE__ */ jsx(ContentSidebarSkeleton, { layoutPage });
 		$[0] = isCanvasShown;
 		$[1] = layoutPage;
 		$[2] = t1;

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/routes/pageRuntime.d.ts

@@ -23,7 +23,7 @@ export type PageStructure = {
 };
 /**
  * Why a member can't see the draft a URL names: it doesn't exist, it's someone else's
- * development draft, or it was published or discarded (ADR 0011). In dev mode, the caller's
+ * development draft, or it was published or deleted (ADR 0011). In dev mode, the caller's
  * own development draft doesn't exist until the dev server's first sync creates it.
  */
 export type DraftNotice = {

package/dist/features/runtime/RuntimeChrome.js

@@ -4,7 +4,7 @@ import { StudioEditingFallback } from "../preview/components/StudioEditingFallba
 import { Navbar } from "../studio/components/Navbar.js";
 import { EditingFallbackContext } from "./editingFallback.js";
 import { PreviewToolbar } from "../preview/components/PreviewToolbar.js";
-import { ChatSidebar } from "../studio/components/ChatSidebar.js";
+import { AgentSidebar } from "../studio/components/AgentSidebar.js";
 import { FollowAgentProvider } from "../studio/FollowAgentProvider.js";
 import { c } from "react/compiler-runtime";
 import { useSelector } from "@xstate/store-react";
@@ -19,7 +19,7 @@ function RuntimeChrome(t0) {
 	const website = !input.routeKind;
 	const hidden = useSelector(previewStore, _temp);
 	const isCanvasShown = useSelector(previewStore, selectIsCanvasShown);
-	const showChat = website && isCanvasShown;
+	const showAgentSidebar = website && isCanvasShown;
 	const t1 = input.runtimeBasePath;
 	let t2;
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
@@ -102,10 +102,10 @@ function RuntimeChrome(t0) {
 		$[18] = t9;
 		$[19] = t14;
 	} else t14 = $[19];
-	const t15 = !showChat;
+	const t15 = !showAgentSidebar;
 	let t16;
 	if ($[20] !== t15) {
-		t16 = /* @__PURE__ */ jsx(ChatSidebar, { hidden: t15 });
+		t16 = /* @__PURE__ */ jsx(AgentSidebar, { hidden: t15 });
 		$[20] = t15;
 		$[21] = t16;
 	} else t16 = $[21];

package/dist/features/studio/components/AgentSidebar.js

@@ -0,0 +1,56 @@
+import { cn } from "../../../lib/utils.js";
+import { SIDEBAR_GUTTER } from "../../preview/components/SidebarStack.js";
+import { ChatWidget } from "./ChatWidget.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 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.
+*/
+function AgentSidebar(t0) {
+	const $ = c(6);
+	const { hidden: t1 } = t0;
+	const hidden = t1 === void 0 ? false : t1;
+	let t2;
+	let t3;
+	let t4;
+	let t5;
+	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(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;
+		$[2] = t4;
+		$[3] = t5;
+	} else {
+		t2 = $[0];
+		t3 = $[1];
+		t4 = $[2];
+		t5 = $[3];
+	}
+	let t6;
+	if ($[4] !== hidden) {
+		t6 = /* @__PURE__ */ jsxs("aside", {
+			"aria-label": "Agent",
+			"data-agent-sidebar": true,
+			hidden,
+			className: t2,
+			style: t3,
+			children: [t4, t5]
+		});
+		$[4] = hidden;
+		$[5] = t6;
+	} else t6 = $[5];
+	return t6;
+}
+
+//#endregion
+export { AgentSidebar };