camox 0.52.3 → 0.54.0

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

@@ -0,0 +1,582 @@
+import { cn } from "../../../lib/utils.js";
+import { useEditingFrame } from "../editingFrame.js";
+import { selectionHoverMessage } from "../overlayMessages.js";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as Tooltip$1 from "@camox/ui/tooltip";
+import { Popover, PopoverContent, PopoverTrigger } from "@camox/ui/popover";
+
+//#region src/features/preview/components/SidebarStack.tsx
+/** How much narrower, on each side, the header right behind the front is than the front's. */
+const FIRST_STEP_INSET = 9;
+/**
+* How much each step back shades a card, relative to the step in front of it. The selection
+* path collapses its middle, so the stack stays short and its steps can stay even.
+*/
+const STEP_FALLOFF = .85;
+/** How much each step back narrows a header, relative to the step in front of it. */
+const INSET_FALLOFF = .75;
+/** How much each step back tilts a header, relative to the step in front of it. */
+const TILT_FALLOFF = .65;
+/** How far the header right behind the front leans back, in degrees. */
+const FIRST_STEP_TILT = 4;
+/**
+* How far the card right behind the front shades, in percent of black, or of white in dark mode,
+* where the background is too dark to darken.
+*/
+const FIRST_STEP_SHADE = 1.2;
+/** How much more cards lighten in dark mode than they darken in light mode, to show as much. */
+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.
+*/
+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}`;
+/**
+* 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.
+*/
+const FIRST_STEP_FADE = .05;
+/** How far away the eye is from the stack, in px: the less, the stronger the depth. */
+const PERSPECTIVE = 900;
+/** Sums the steps of a falloff series, `distance` views behind the front. */
+function stepSeries(first, distance, falloff = STEP_FALLOFF) {
+	return first * (1 - falloff ** distance) / (1 - falloff);
+}
+/** A header's inset on each side, `distance` views behind the front. */
+function stackInset(distance) {
+	return stepSeries(FIRST_STEP_INSET, distance, INSET_FALLOFF);
+}
+/** Cards settle into place, without bouncing. */
+const EASE = "cubic-bezier(0.2, 0, 0, 1)";
+const DURATION = 260;
+/** Cards are pulled away a little faster than they're laid. */
+const LEAVE_EASING = "cubic-bezier(0.4, 0, 1, 1)";
+const LEAVE_DURATION = 180;
+/** Cards swapped at their place cross quickly. */
+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 below the front a card is laid from, or pulled away to, in px. */
+const PULL = 24;
+const PLACED = {
+	transform: "none",
+	opacity: 1
+};
+const PULLED = {
+	transform: `translateY(${PULL}px)`,
+	opacity: 0
+};
+const BEHIND = {
+	transform: "translateY(-2px) scale(0.995)",
+	opacity: .8
+};
+const COMING = {
+	front: [
+		PULLED,
+		{
+			opacity: 1,
+			offset: .4
+		},
+		PLACED
+	],
+	back: [BEHIND, PLACED],
+	same: [{ opacity: 0 }, { opacity: 1 }]
+};
+const GOING = {
+	front: [
+		PLACED,
+		{
+			opacity: 1,
+			offset: .3
+		},
+		PULLED
+	],
+	back: [PLACED, {
+		...BEHIND,
+		opacity: 0
+	}],
+	same: [{ opacity: 1 }, { opacity: 0 }]
+};
+const GOING_TIMING = {
+	front: {
+		duration: LEAVE_DURATION,
+		easing: LEAVE_EASING
+	},
+	back: {
+		duration: DURATION,
+		easing: EASE
+	},
+	same: {
+		duration: SWAP_DURATION,
+		easing: "ease-out"
+	}
+};
+function motionFor(depth, front) {
+	if (depth > front) return "front";
+	if (depth < front) return "back";
+	return "same";
+}
+function prefersMotion() {
+	return typeof window !== "undefined" && typeof window.matchMedia === "function" && !window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+const SelectionViewsContext = React.createContext(null);
+const StackMotionContext = React.createContext(null);
+/**
+* Wraps a stack whose selection views render apart from the views under them, so the views
+* under them know how many are laid over them. Its cards move as the stack changes.
+*/
+function SidebarStack(t0) {
+	const $ = c(13);
+	const { children } = t0;
+	const [count, setCount] = React.useState(0);
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = {
+			ready: false,
+			front: null,
+			behind: null,
+			inFront: null
+		};
+		$[0] = t1;
+	} else t1 = $[0];
+	const motion = React.useRef(t1);
+	let t2;
+	let t3;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = () => {
+			const current = motion.current;
+			current.ready = true;
+			return () => {
+				current.ready = false;
+			};
+		};
+		t3 = [];
+		$[1] = t2;
+		$[2] = t3;
+	} else {
+		t2 = $[1];
+		t3 = $[2];
+	}
+	React.useLayoutEffect(t2, t3);
+	let t4;
+	if ($[3] !== count) {
+		t4 = {
+			count,
+			setCount
+		};
+		$[3] = count;
+		$[4] = t4;
+	} else t4 = $[4];
+	let t5;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = cn("relative isolate flex min-h-0 flex-1 flex-col", SIDEBAR_GUTTER);
+		$[5] = t5;
+	} else t5 = $[5];
+	let t6;
+	let t7;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx("div", {
+			ref: (node) => {
+				motion.current.behind = node;
+			},
+			"aria-hidden": true,
+			className: "pointer-events-none absolute inset-0 -z-10 overflow-hidden"
+		});
+		t7 = /* @__PURE__ */ jsx("div", {
+			ref: (node_0) => {
+				motion.current.inFront = node_0;
+			},
+			"aria-hidden": true,
+			className: "pointer-events-none absolute inset-0 z-10 overflow-hidden"
+		});
+		$[6] = t6;
+		$[7] = t7;
+	} else {
+		t6 = $[6];
+		t7 = $[7];
+	}
+	let t8;
+	if ($[8] !== children) {
+		t8 = /* @__PURE__ */ jsx(StackMotionContext, {
+			value: motion,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: t5,
+				children: [
+					children,
+					t6,
+					t7
+				]
+			})
+		});
+		$[8] = children;
+		$[9] = t8;
+	} else t8 = $[9];
+	let t9;
+	if ($[10] !== t4 || $[11] !== t8) {
+		t9 = /* @__PURE__ */ jsx(SelectionViewsContext, {
+			value: t4,
+			children: t8
+		});
+		$[10] = t4;
+		$[11] = t8;
+		$[12] = t9;
+	} else t9 = $[12];
+	return t9;
+}
+/** A still copy of a card, where it was, so it can move away once the card is gone. */
+function copyCard(card, layer) {
+	const layerRect = layer.getBoundingClientRect();
+	const rect = card.getBoundingClientRect();
+	const copy = card.cloneNode(true);
+	copy.setAttribute("aria-hidden", "true");
+	copy.setAttribute("inert", "");
+	Object.assign(copy.style, {
+		position: "absolute",
+		margin: "0",
+		left: `${rect.left - layerRect.left}px`,
+		top: `${rect.top - layerRect.top}px`,
+		width: `${rect.width}px`,
+		height: `${rect.height}px`
+	});
+	const scrolled = [];
+	const walk = (node, path) => {
+		if (node.scrollTop > 0) scrolled.push([path, node.scrollTop]);
+		Array.from(node.children).forEach((child, i) => walk(child, [...path, i]));
+	};
+	walk(card, []);
+	const restoreScroll = () => {
+		for (const [path, top] of scrolled) {
+			let node = copy;
+			for (const i of path) node = node?.children[i];
+			if (node) node.scrollTop = top;
+		}
+	};
+	return {
+		copy,
+		restoreScroll
+	};
+}
+/**
+* Moves a card of the stack, `depth` views from its back, as it comes and goes: into place
+* from where the front was, then away relative to the new front.
+*/
+function useStackCard(ref, depth, isView) {
+	const stack = React.useContext(StackMotionContext);
+	React.useLayoutEffect(() => {
+		const card = ref.current;
+		const motion = stack?.current;
+		if (!card || !motion || depth == null) return;
+		const previousFront = motion.front;
+		if (isView) motion.front = depth;
+		if (motion.ready && previousFront != null && prefersMotion()) {
+			const how = motionFor(depth, previousFront);
+			card.animate(COMING[how], {
+				duration: how === "same" ? SWAP_DURATION : DURATION,
+				easing: how === "same" ? "ease-out" : EASE,
+				delay: how === "front" ? (depth - previousFront - 1) * STAGGER : 0,
+				fill: "backwards"
+			});
+		}
+		return () => {
+			const { behind, inFront } = motion;
+			if (!motion.ready || !behind || !inFront || !prefersMotion()) return;
+			const { copy, restoreScroll } = copyCard(card, inFront);
+			queueMicrotask(() => {
+				if (card.isConnected) return;
+				const how = motionFor(depth, motion.front ?? depth);
+				(how === "front" ? inFront : behind).append(copy);
+				restoreScroll();
+				copy.animate(GOING[how], {
+					...GOING_TIMING[how],
+					fill: "forwards"
+				}).finished.then(() => copy.remove(), () => copy.remove());
+			});
+		};
+	}, []);
+}
+/** How many of the selection's views are laid over the page's, in this stack. */
+function useSelectionViewCount() {
+	return React.useContext(SelectionViewsContext)?.count ?? 0;
+}
+/** Tells the stack how many views the selection lays over the page's, while it renders. */
+function SelectionViewCount(t0) {
+	const $ = c(4);
+	const { count } = t0;
+	const setCount = React.useContext(SelectionViewsContext)?.setCount;
+	let t1;
+	let t2;
+	if ($[0] !== count || $[1] !== setCount) {
+		t1 = () => {
+			if (!setCount) return;
+			setCount(count);
+			return () => setCount(0);
+		};
+		t2 = [setCount, count];
+		$[0] = count;
+		$[1] = setCount;
+		$[2] = t1;
+		$[3] = t2;
+	} else {
+		t1 = $[2];
+		t2 = $[3];
+	}
+	React.useLayoutEffect(t1, t2);
+	return null;
+}
+/**
+* A view's content, under its header, `depth` views from the back of the stack. Key it by the
+* view, so it comes and goes with the view.
+*/
+function SidebarStackView(t0) {
+	const $ = c(6);
+	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%)]";
+	let t2;
+	if ($[0] !== className || $[1] !== t1) {
+		t2 = cn("bg-background min-h-0 flex-1 origin-top", t1, className);
+		$[0] = className;
+		$[1] = t1;
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] !== children || $[4] !== t2) {
+		t3 = /* @__PURE__ */ jsx("div", {
+			ref,
+			className: t2,
+			children
+		});
+		$[3] = children;
+		$[4] = t2;
+		$[5] = t3;
+	} else t3 = $[5];
+	return t3;
+}
+function SidebarStackHeader(t0) {
+	const $ = c(55);
+	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;
+	const covered = distance > 0;
+	const { send } = useEditingFrame();
+	const [hovered, setHovered] = React.useState(false);
+	let t3;
+	if ($[0] !== covered || $[1] !== hoverTarget || $[2] !== hovered) {
+		t3 = covered && hovered && hoverTarget !== void 0 ? JSON.stringify(hoverTarget) : null;
+		$[0] = covered;
+		$[1] = hoverTarget;
+		$[2] = hovered;
+		$[3] = t3;
+	} else t3 = $[3];
+	const hoverKey = t3;
+	let t4;
+	let t5;
+	if ($[4] !== hoverKey || $[5] !== send) {
+		t4 = () => {
+			if (hoverKey == null) return;
+			const target = JSON.parse(hoverKey);
+			send(selectionHoverMessage(target, true));
+			return () => send(selectionHoverMessage(target, false));
+		};
+		t5 = [hoverKey, send];
+		$[4] = hoverKey;
+		$[5] = send;
+		$[6] = t4;
+		$[7] = t5;
+	} else {
+		t4 = $[6];
+		t5 = $[7];
+	}
+	React.useEffect(t4, t5);
+	const ref = React.useRef(null);
+	useStackCard(ref, depth, false);
+	const [popoverOpen, setPopoverOpen] = React.useState(false);
+	const liftable = covered && (onSelect != null || popover != null);
+	const inStack = React.useContext(StackMotionContext) != null;
+	const flat = first && !covered && !inStack;
+	let t6;
+	if ($[8] !== covered || $[9] !== distance) {
+		t6 = covered ? stepSeries(FIRST_STEP_TILT, distance, TILT_FALLOFF) : 0;
+		$[8] = covered;
+		$[9] = distance;
+		$[10] = t6;
+	} else t6 = $[10];
+	const tilt = t6;
+	let t7;
+	if ($[11] !== distance) {
+		t7 = stepSeries(FIRST_STEP_SHADE, distance);
+		$[11] = distance;
+		$[12] = t7;
+	} else t7 = $[12];
+	const shade = t7;
+	let t8;
+	if ($[13] !== children || $[14] !== liftable || $[15] !== onSelect) {
+		t8 = liftable ? /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "hover:text-foreground data-popup-open:text-foreground flex h-full w-full min-w-0 cursor-pointer items-center justify-center rounded-[inherit] px-3 text-center text-(--ancestor-foreground) transition-colors focus-visible:outline-none",
+			onMouseEnter: () => setHovered(true),
+			onMouseLeave: () => setHovered(false),
+			onClick: () => {
+				setHovered(false);
+				onSelect?.();
+			},
+			children: /* @__PURE__ */ jsx("span", {
+				className: "truncate opacity-(--fade) transition-opacity",
+				children
+			})
+		}) : null;
+		$[13] = children;
+		$[14] = liftable;
+		$[15] = onSelect;
+		$[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 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;
+		$[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,
+			"--dark-shade-strength": DARK_SHADE_STRENGTH,
+			"--hover-shade": t25,
+			"--hover-lift": t26,
+			"--rest-fade": t27,
+			marginInline: t28,
+			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
+		};
+		$[33] = t20;
+		$[34] = t21;
+		$[35] = t22;
+		$[36] = t25;
+		$[37] = t26;
+		$[38] = t27;
+		$[39] = t28;
+		$[40] = t29;
+	} else t29 = $[40];
+	const t30 = t29;
+	let t31;
+	if ($[41] !== button || $[42] !== children || $[43] !== covered || $[44] !== popover || $[45] !== popoverOpen || $[46] !== tooltip) {
+		t31 = button && popover ? /* @__PURE__ */ jsxs(Popover, {
+			open: popoverOpen,
+			onOpenChange: setPopoverOpen,
+			children: [/* @__PURE__ */ jsx(PopoverTrigger, { render: button }), /* @__PURE__ */ jsx(PopoverContent, {
+				side: "bottom",
+				sideOffset: 8,
+				className: "w-48 gap-0 p-1",
+				onClick: () => setPopoverOpen(false),
+				children: popover
+			})]
+		}) : button && tooltip ? /* @__PURE__ */ jsxs(Tooltip$1.Tooltip, { children: [/* @__PURE__ */ jsx(Tooltip$1.TooltipTrigger, { render: button }), /* @__PURE__ */ jsx(Tooltip$1.TooltipContent, {
+			side: "bottom",
+			children: tooltip
+		})] }) : button ?? (covered ? /* @__PURE__ */ jsx("span", {
+			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
+		});
+		$[48] = t19;
+		$[49] = t30;
+		$[50] = t31;
+		$[51] = t32;
+	} else t32 = $[51];
+	let t33;
+	if ($[52] !== t10 || $[53] !== t32) {
+		t33 = /* @__PURE__ */ jsx("div", {
+			ref,
+			className: t10,
+			children: t32
+		});
+		$[52] = t10;
+		$[53] = t32;
+		$[54] = t33;
+	} else t33 = $[54];
+	return t33;
+}
+
+//#endregion
+export { BOTTOM_CARD_EDGES, CARD_BODY_EDGES, SIDEBAR_GUTTER, SelectionViewCount, SidebarStack, SidebarStackHeader, SidebarStackView, useSelectionViewCount };

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

@@ -1,6 +1,6 @@
 import { CanvasLoadingScreen } from "../../canvas/CanvasLoadingScreen.js";
-import { CanvasSidebarSkeleton } from "../../canvas/sidebar/CanvasSidebarSkeleton.js";
 import { previewStore, selectIsCanvasShown } from "../previewStore.js";
+import { CanvasSidebarSkeleton } from "../../canvas/sidebar/CanvasSidebarSkeleton.js";
 import { c } from "react/compiler-runtime";
 import { useSelector } from "@xstate/store-react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -36,7 +36,7 @@ function StudioEditingFallback(t0) {
 	let t4;
 	if ($[5] !== t1 || $[6] !== t3) {
 		t4 = /* @__PURE__ */ jsxs("div", {
-			className: "flex h-full min-h-0 flex-1",
+			className: "relative flex h-full min-h-0 flex-1",
 			children: [t1, t3]
 		});
 		$[5] = t1;

package/dist/features/renderer/RendererFrames.js

@@ -102,7 +102,7 @@ function _temp() {}
 * the studio keeps the Canvas position and selection, and tells the new renderer.
 */
 function RendererFramesProvider(t0) {
-	const $ = c(27);
+	const $ = c(28);
 	const { runtimeBasePath, children } = t0;
 	const queryClient = useQueryClient();
 	const studioCache = useStudioCache();
@@ -166,32 +166,39 @@ function RendererFramesProvider(t0) {
 	const revisions = React.use(RevisionsContext);
 	let t6;
 	let t7;
-	if ($[12] !== draftScope || $[13] !== revisions) {
+	if ($[12] !== documentUrl || $[13] !== draftScope || $[14] !== revisions) {
 		t6 = () => revisions?.subscribe((t8) => {
 			const { draftId } = t8;
-			if (draftId === draftScope.current()) setLoads(_temp2);
+			if (draftId !== draftScope.current()) return;
+			setSource(documentUrl());
+			setLoads(_temp2);
 		});
-		t7 = [revisions, draftScope];
-		$[12] = draftScope;
-		$[13] = revisions;
-		$[14] = t6;
-		$[15] = t7;
+		t7 = [
+			revisions,
+			draftScope,
+			documentUrl
+		];
+		$[12] = documentUrl;
+		$[13] = draftScope;
+		$[14] = revisions;
+		$[15] = t6;
+		$[16] = t7;
 	} else {
-		t6 = $[14];
-		t7 = $[15];
+		t6 = $[15];
+		t7 = $[16];
 	}
 	React.useEffect(t6, t7);
 	let t8;
-	if ($[16] !== host) {
+	if ($[17] !== host) {
 		t8 = (frame) => {
 			if (frame && host) frame[STUDIO_HANDLE_KEY] = host.handle;
 		};
-		$[16] = host;
-		$[17] = t8;
-	} else t8 = $[17];
+		$[17] = host;
+		$[18] = t8;
+	} else t8 = $[18];
 	const connect = t8;
 	let t9;
-	if ($[18] !== connect || $[19] !== host || $[20] !== loads || $[21] !== source) {
+	if ($[19] !== connect || $[20] !== host || $[21] !== loads || $[22] !== source) {
 		t9 = host && /* @__PURE__ */ jsx("iframe", {
 			ref: connect,
 			src: source,
@@ -199,23 +206,23 @@ function RendererFramesProvider(t0) {
 			title: "Website renderer",
 			"data-camox-renderer": true
 		}, `${source}#${loads}`);
-		$[18] = connect;
-		$[19] = host;
-		$[20] = loads;
-		$[21] = source;
-		$[22] = t9;
-	} else t9 = $[22];
+		$[19] = connect;
+		$[20] = host;
+		$[21] = loads;
+		$[22] = source;
+		$[23] = t9;
+	} else t9 = $[23];
 	let t10;
-	if ($[23] !== children || $[24] !== host || $[25] !== t9) {
+	if ($[24] !== children || $[25] !== host || $[26] !== t9) {
 		t10 = /* @__PURE__ */ jsxs(RendererHostContext, {
 			value: host,
 			children: [children, t9]
 		});
-		$[23] = children;
-		$[24] = host;
-		$[25] = t9;
-		$[26] = t10;
-	} else t10 = $[26];
+		$[24] = children;
+		$[25] = host;
+		$[26] = t9;
+		$[27] = t10;
+	} else t10 = $[27];
 	return t10;
 }
 function _temp2(count) {

package/dist/features/runtime/RuntimeChrome.js

@@ -112,7 +112,7 @@ function RuntimeChrome(t0) {
 	let t17;
 	if ($[22] !== t14 || $[23] !== t16) {
 		t17 = /* @__PURE__ */ jsxs("div", {
-			className: "flex min-h-0 flex-1",
+			className: "relative flex min-h-0 flex-1",
 			children: [t14, t16]
 		});
 		$[22] = t14;