camox 0.68.0 → 0.69.0

package/dist/features/renderer/studioConnection.js

@@ -26,7 +26,7 @@ const mirror = (message) => mirrors[message.store]?.send({
 * its cache follows the studio's (see `protocol.ts`). The studio's questions are answered from
 * `camoxApp`, the draft's code; without it, none can be.
 */
-function connectToStudio(handle, { queryClient, studioCache, draftScope, camoxApp }) {
+function connectToStudio(handle, { queryClient, studioCache, draftScope, camoxApp, prepareFrame }) {
 	let welcomed = false;
 	let frames = [];
 	const listeners = /* @__PURE__ */ new Set();
@@ -109,6 +109,14 @@ function connectToStudio(handle, { queryClient, studioCache, draftScope, camoxAp
 				return;
 			case "ask": {
 				const { askId, question } = message;
+				if (question.type === "prepareFrame") {
+					(prepareFrame?.(question) ?? Promise.resolve()).catch(() => {}).then(() => studio({
+						type: "answer",
+						askId,
+						value: null
+					}));
+					return;
+				}
 				if (!camoxApp) {
 					studio({
 						type: "answer",

package/dist/features/runtime/pageNavigation.js

@@ -1,7 +1,8 @@
-import { DraftScopeContext, draftNamedBy } from "../../lib/draft-scope.js";
+import { DraftScopeContext, ShownDraftContext, draftNamedBy } from "../../lib/draft-scope.js";
 import { PageAlternatesContext, ViewLocaleContext } from "../../lib/view-locale-context.js";
 import { NavigationProvider } from "../navigation/navigation.js";
 import { fetchRuntimeJson, getNavigationTarget } from "./navigationTarget.js";
+import { SWITCH_WAIT_MS, ViewSwitchDeadlineContext, ViewSwitchesContext } from "../../lib/view-switch.js";
 import { reads } from "../../lib/studio-reads.js";
 import { createPrefetchCache, listenForLinkIntent } from "./linkPrefetch.js";
 import { PageViewportContext } from "./pageViewport.js";
@@ -13,7 +14,7 @@ import { createNavigationRequestTracker } from "./navigationRequest.js";
 import { createScrollRestoration } from "./scrollRestoration.js";
 import { c } from "react/compiler-runtime";
 import * as React from "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { hydrate } from "@tanstack/react-query";
 import { createHead, renderDOMHead } from "@unhead/react/client";
 
@@ -63,13 +64,24 @@ function prefetchKey(pathname, draft) {
 function PageNavigationProvider({ camoxApp, children, initialInput, queryClient }) {
 	const draftScope = React.useContext(DraftScopeContext);
 	if (!draftScope) throw new Error("PageNavigationProvider needs a DraftScopeContext provider");
-	const [{ input, source, generation }, setLocation] = React.useState(() => {
+	const [{ input, source, switched, navigation }, setLocation] = React.useState(() => {
 		draftScope.adopt(initialInput);
 		return {
 			input: initialInput,
-			generation: 0
+			navigation: 0
 		};
 	});
+	const [preparers] = React.useState(() => /* @__PURE__ */ new Set());
+	const [commits] = React.useState(() => /* @__PURE__ */ new Map());
+	const navigations = React.useRef(0);
+	const lastShown = React.useRef(Promise.resolve());
+	const switches = React.useMemo(() => ({
+		prepare(preparer) {
+			preparers.add(preparer);
+			return () => void preparers.delete(preparer);
+		},
+		shown: () => lastShown.current
+	}), [preparers]);
 	const current = React.useRef(initialInput);
 	const [requests] = React.useState(createNavigationRequestTracker);
 	const ownsWindow = initialInput.presentation !== "studio";
@@ -88,6 +100,20 @@ function PageNavigationProvider({ camoxApp, children, initialInput, queryClient
 	}, [restoration]);
 	const pendingAnnouncement = React.useRef(null);
 	const announcer = React.useRef(null);
+	const prepareSwitch = React.useCallback((next) => {
+		const view = {
+			pathname: next.pathname,
+			...next.derived && { derivedLayoutId: next.derived.layoutId },
+			draftId: next.draftId ?? null,
+			locale: next.locale
+		};
+		const deadline = Date.now() + SWITCH_WAIT_MS;
+		const prepared = Promise.all([...preparers].map((prepare) => Promise.resolve(prepare(view)).catch(() => {})));
+		return {
+			deadline,
+			ready: Promise.race([prepared.then(() => {}), new Promise((resolve) => setTimeout(resolve, SWITCH_WAIT_MS))])
+		};
+	}, [preparers]);
 	const loadPage = React.useCallback(async (pathname, draft, signal) => {
 		const response = await fetchRuntimeJson(draftScope, "/_camox/data", initialInput.runtimeBasePath, { path: pathname }, draft, signal);
 		if (!response.ok) throw new Error(`Navigation failed: ${response.status}`);
@@ -106,6 +132,7 @@ function PageNavigationProvider({ camoxApp, children, initialInput, queryClient
 	const { analytics } = initialInput;
 	const navigate = React.useCallback(async ({ to, replace, source, draft, pop = false, refresh = false }) => {
 		const request = requests.begin();
+		const id = ++navigations.current;
 		const href = pop ? to : draftScope.hrefFor(to, {
 			from: window.location.href,
 			draft
@@ -122,12 +149,20 @@ function PageNavigationProvider({ camoxApp, children, initialInput, queryClient
 			if (target.url.hash && viewport) position(viewport, "fragment", target.url.href);
 			return;
 		}
+		lastShown.current = new Promise((resolve) => commits.set(id, resolve));
+		const settle = () => {
+			for (const [waiting, resolve] of commits) {
+				if (waiting > id) continue;
+				commits.delete(waiting);
+				resolve();
+			}
+		};
 		try {
 			let next = current.current;
 			const targetDraft = draftNamedBy(target.url.href);
 			const fetched = target.pathname !== next.pathname || refresh || targetDraft !== draftNamedBy(next.href);
 			if (fetched) next = await (!refresh && prefetched.take(prefetchKey(target.pathname, targetDraft)) || loadPage(target.pathname, targetDraft, request.signal));
-			if (!request.isCurrent()) return;
+			if (!request.isCurrent()) return settle();
 			const switching = (next.draftId ?? null) !== (current.current.draftId ?? null) || !sameLocale(next.locale, current.current.locale);
 			const positions = restoration();
 			if (!pop) {
@@ -145,6 +180,7 @@ function PageNavigationProvider({ camoxApp, children, initialInput, queryClient
 			};
 			pendingAnnouncement.current = fetched && !refresh ? next.pathname : null;
 			if (fetched) draftScope.adopt(next);
+			const switched = switching ? prepareSwitch(next) : void 0;
 			hydrate(queryClient, switching ? next.dehydratedState : preserveStableLayoutBlockCaches(next.dehydratedState, current.current.layoutIdentity, next.layoutIdentity));
 			next = {
 				...next,
@@ -162,12 +198,14 @@ function PageNavigationProvider({ camoxApp, children, initialInput, queryClient
 			renderDOMHead(manager.head);
 			if (ownsWindow && analytics && next.pathname !== previous.pathname) sendPageView(analytics, window);
 			if (ownsWindow) document.documentElement.lang = next.locale.tag;
-			React.startTransition(() => setLocation((location) => ({
+			React.startTransition(() => setLocation({
 				input: next,
 				source: pop ? void 0 : source,
-				generation: location.generation + (switching ? 1 : 0)
-			})));
+				switched,
+				navigation: id
+			}));
 		} catch {
+			settle();
 			if (!request.isCurrent()) return;
 			if (pop) window.location.reload();
 			else if (replace) window.location.replace(target.url.href);
@@ -175,12 +213,14 @@ function PageNavigationProvider({ camoxApp, children, initialInput, queryClient
 		}
 	}, [
 		analytics,
+		commits,
 		draftScope,
 		initialInput.runtimeBasePath,
 		loadPage,
 		ownsWindow,
 		position,
 		prefetched,
+		prepareSwitch,
 		queryClient,
 		requests,
 		restoration
@@ -250,6 +290,21 @@ function PageNavigationProvider({ camoxApp, children, initialInput, queryClient
 			prefetched.clear();
 		};
 	}, [draftScope, prefetched]);
+	React.useLayoutEffect(() => {
+		for (const [waiting, resolve] of commits) {
+			if (waiting > navigation) continue;
+			commits.delete(waiting);
+			resolve();
+		}
+		if (switched) setLocation((location) => ({
+			...location,
+			switched: void 0
+		}));
+	}, [
+		commits,
+		navigation,
+		switched
+	]);
 	React.useLayoutEffect(() => {
 		const intent = takeScroll(input.href);
 		const viewport = scroll.current?.viewport();
@@ -310,13 +365,14 @@ function PageNavigationProvider({ camoxApp, children, initialInput, queryClient
 		initialInput.runtimeBasePath,
 		requests
 	]);
+	const hydrated = React.useSyncExternalStore(noSubscription, isClient, isServer);
 	const url = new URL(input.href);
 	const viewLocale = useSameJson({
 		locale: input.locale,
 		locales: input.locales
 	});
 	const alternates = useSameJson(input.alternates ?? null);
-	return /* @__PURE__ */ jsx(NavigationProvider, {
+	return /* @__PURE__ */ jsxs(NavigationProvider, {
 		location: {
 			href: input.href,
 			pathname: input.pathname,
@@ -325,18 +381,38 @@ function PageNavigationProvider({ camoxApp, children, initialInput, queryClient
 			source
 		},
 		navigate,
-		children: /* @__PURE__ */ jsx(ViewLocaleContext, {
-			value: viewLocale,
-			children: /* @__PURE__ */ jsx(PageAlternatesContext, {
-				value: alternates,
-				children: /* @__PURE__ */ jsx(PageViewportContext, {
-					value: pageViewport,
-					children: /* @__PURE__ */ jsx(React.Fragment, { children: children(input) }, generation)
+		children: [/* @__PURE__ */ jsx(ViewSwitchesContext, {
+			value: switches,
+			children: /* @__PURE__ */ jsx(ViewSwitchDeadlineContext, {
+				value: switched?.deadline ?? null,
+				children: /* @__PURE__ */ jsx(ShownDraftContext, {
+					value: input.draftId ?? null,
+					children: /* @__PURE__ */ jsx(ViewLocaleContext, {
+						value: viewLocale,
+						children: /* @__PURE__ */ jsx(PageAlternatesContext, {
+							value: alternates,
+							children: /* @__PURE__ */ jsx(PageViewportContext, {
+								value: pageViewport,
+								children: children(input)
+							})
+						})
+					})
 				})
 			})
-		})
+		}), hydrated && /* @__PURE__ */ jsx(React.Suspense, {
+			fallback: null,
+			children: /* @__PURE__ */ jsx(SwitchGate, { ready: switched?.ready })
+		})]
 	});
 }
+const noSubscription = () => () => {};
+const isClient = () => true;
+const isServer = () => false;
+/** Suspends the switch's render until the next view is ready. */
+function SwitchGate({ ready }) {
+	if (ready) React.use(ready);
+	return null;
+}
 
 //#endregion
 export { PageNavigationProvider };

package/dist/features/runtime/rendererClient.js

@@ -1,5 +1,5 @@
 import { DraftScopeContext, createDraftScope, followUrl } from "../../lib/draft-scope.js";
-import { StudioCacheContext, createStudioCache } from "../../lib/studio-reads.js";
+import { StudioCacheContext, createStudioCache, reads } from "../../lib/studio-reads.js";
 import { getDraftReadClient } from "../../lib/api-client.js";
 import { STUDIO_HANDLE_KEY } from "../renderer/protocol.js";
 import { CoreCamoxProvider } from "../provider/CoreCamoxProvider.js";
@@ -23,7 +23,8 @@ async function startRendererWithApp(camoxApp) {
 		return;
 	}
 	const input = readHydrationData();
-	if (!input.apiUrl || !input.authenticationUrl || !input.projectUuid) {
+	const { projectUuid, runtimeBasePath } = input;
+	if (!input.apiUrl || !input.authenticationUrl || !projectUuid) {
 		console.error("Camox: the renderer document is missing its API or project.");
 		return;
 	}
@@ -44,7 +45,13 @@ async function startRendererWithApp(camoxApp) {
 		queryClient,
 		studioCache,
 		draftScope,
-		camoxApp
+		camoxApp,
+		prepareFrame: ({ pathname, derivedLayoutId, locale }) => Promise.all([studioCache.ensure(reads.canvasFrame({
+			projectUuid,
+			runtimeBasePath,
+			pathname,
+			...derivedLayoutId && { derivedLayoutId }
+		}), { locale }), codeLoaded])
 	});
 	const container = document.createElement("div");
 	document.body.append(container);
@@ -58,14 +65,14 @@ async function startRendererWithApp(camoxApp) {
 					apiUrl: input.apiUrl,
 					authenticationUrl: input.authenticationUrl,
 					camoxApp,
-					projectUuid: input.projectUuid,
+					projectUuid,
 					initialAuthenticated: true,
 					children: /* @__PURE__ */ jsx(CompleteBlockEditingRuntimeProvider, { children: /* @__PURE__ */ jsx(RendererApp, {
 						connection,
 						camoxApp,
 						codeLoaded,
-						projectUuid: input.projectUuid,
-						runtimeBasePath: input.runtimeBasePath
+						projectUuid,
+						runtimeBasePath
 					}) })
 				})
 			})

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

@@ -6,7 +6,8 @@ import { reads, useReadQuery } from "../../../lib/studio-reads.js";
 import { cn } from "../../../lib/utils.js";
 import { studioStore } from "../studioStore.js";
 import { draftLabel, plural, timeAgo } from "../draftLabel.js";
-import { DeleteDraftDialog, ReviewDraftSheet, useLeaveDraft } from "./ReviewDraftSheet.js";
+import { useLeaveDraft, useSwitchView } from "../viewSwitch.js";
+import { DeleteDraftDialog, ReviewDraftSheet } from "./ReviewDraftSheet.js";
 import { c } from "react/compiler-runtime";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -97,12 +98,13 @@ function useDrafts() {
 * still names what the studio is viewing.
 */
 function DraftPicker(t0) {
-	const $ = c(66);
+	const $ = c(68);
 	const { disabled: t1 } = t0;
 	const disabled = t1 === void 0 ? false : t1;
 	const { draftScope, draftId, projectId, list, current } = useDrafts();
 	const navigate = useNavigate();
 	const leaveDraft = useLeaveDraft();
+	const switchView = useSwitchView();
 	const review = useSelector(studioStore, _temp);
 	const deleting = useSelector(studioStore, _temp2);
 	let t2;
@@ -134,23 +136,30 @@ function DraftPicker(t0) {
 	} else t5 = $[6];
 	const drafts = t5;
 	let t6;
-	if ($[7] !== draftId || $[8] !== navigate) {
+	if ($[7] !== draftId || $[8] !== drafts || $[9] !== navigate || $[10] !== switchView) {
 		t6 = (next) => {
 			if (next === draftId) return;
-			navigate({
+			const target = next ? drafts.find((draft) => draft.id === next) : void 0;
+			const label = next ? target ? draftLabel(target) : "the draft" : "Live";
+			switchView(() => navigate({
 				to: window.location.href,
 				draft: next
+			}), {
+				loading: `Switching to ${label}…`,
+				success: `You're now viewing ${label}.`
 			});
 		};
 		$[7] = draftId;
-		$[8] = navigate;
-		$[9] = t6;
-	} else t6 = $[9];
+		$[8] = drafts;
+		$[9] = navigate;
+		$[10] = switchView;
+		$[11] = t6;
+	} else t6 = $[11];
 	const switchTo = t6;
 	const t7 = !!projectId;
 	const t8 = current?.name === null;
 	let t9;
-	if ($[10] !== draftId || $[11] !== drafts || $[12] !== switchTo || $[13] !== t7 || $[14] !== t8) {
+	if ($[12] !== draftId || $[13] !== drafts || $[14] !== switchTo || $[15] !== t7 || $[16] !== t8) {
 		t9 = {
 			enabled: t7,
 			draftId,
@@ -158,65 +167,65 @@ function DraftPicker(t0) {
 			drafts,
 			switchTo
 		};
-		$[10] = draftId;
-		$[11] = drafts;
-		$[12] = switchTo;
-		$[13] = t7;
-		$[14] = t8;
-		$[15] = t9;
-	} else t9 = $[15];
+		$[12] = draftId;
+		$[13] = drafts;
+		$[14] = switchTo;
+		$[15] = t7;
+		$[16] = t8;
+		$[17] = t9;
+	} else t9 = $[17];
 	useDraftsActions(t9);
 	if (draftId && !current) return null;
 	let t10;
-	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
 		t10 = /* @__PURE__ */ jsx(Button, {
 			type: "button",
 			variant: "ghost"
 		});
-		$[16] = t10;
-	} else t10 = $[16];
+		$[18] = t10;
+	} else t10 = $[18];
 	const t11 = draftId ? "bg-blue-500" : "bg-emerald-500";
 	let t12;
-	if ($[17] !== t11) {
+	if ($[19] !== t11) {
 		t12 = cn("size-2 shrink-0 rounded-full", t11);
-		$[17] = t11;
-		$[18] = t12;
-	} else t12 = $[18];
+		$[19] = t11;
+		$[20] = t12;
+	} else t12 = $[20];
 	let t13;
-	if ($[19] !== t12) {
+	if ($[21] !== t12) {
 		t13 = /* @__PURE__ */ jsx("span", {
 			"aria-hidden": true,
 			className: t12
 		});
-		$[19] = t12;
-		$[20] = t13;
-	} else t13 = $[20];
+		$[21] = t12;
+		$[22] = t13;
+	} else t13 = $[22];
 	let t14;
-	if ($[21] !== current || $[22] !== draftId) {
+	if ($[23] !== current || $[24] !== draftId) {
 		t14 = draftId ? draftLabel(current) : "Live";
-		$[21] = current;
-		$[22] = draftId;
-		$[23] = t14;
-	} else t14 = $[23];
+		$[23] = current;
+		$[24] = draftId;
+		$[25] = t14;
+	} else t14 = $[25];
 	let t15;
-	if ($[24] !== t14) {
+	if ($[26] !== t14) {
 		t15 = /* @__PURE__ */ jsx("span", {
 			className: "max-w-48 truncate",
 			children: t14
 		});
-		$[24] = t14;
-		$[25] = t15;
-	} else t15 = $[25];
+		$[26] = t14;
+		$[27] = t15;
+	} else t15 = $[27];
 	let t16;
-	if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
 		t16 = /* @__PURE__ */ jsx(ChevronsUpDown, {
 			"aria-hidden": true,
 			className: "size-4 opacity-50"
 		});
-		$[26] = t16;
-	} else t16 = $[26];
+		$[28] = t16;
+	} else t16 = $[28];
 	let t17;
-	if ($[27] !== disabled || $[28] !== t13 || $[29] !== t15) {
+	if ($[29] !== disabled || $[30] !== t13 || $[31] !== t15) {
 		t17 = /* @__PURE__ */ jsxs(DropdownMenuTrigger, {
 			disabled,
 			render: t10,
@@ -226,48 +235,48 @@ function DraftPicker(t0) {
 				t16
 			]
 		});
-		$[27] = disabled;
-		$[28] = t13;
-		$[29] = t15;
-		$[30] = t17;
-	} else t17 = $[30];
+		$[29] = disabled;
+		$[30] = t13;
+		$[31] = t15;
+		$[32] = t17;
+	} else t17 = $[32];
 	let t18;
-	if ($[31] !== draftId) {
+	if ($[33] !== draftId) {
 		t18 = !draftId && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(DropdownMenuGroup, { children: /* @__PURE__ */ jsx(DropdownMenuLabel, {
 			className: "text-muted-foreground font-normal",
 			children: "Live is read-only. Your first edit starts a new draft."
 		}) }), /* @__PURE__ */ jsx(DropdownMenuSeparator, {})] });
-		$[31] = draftId;
-		$[32] = t18;
-	} else t18 = $[32];
+		$[33] = draftId;
+		$[34] = t18;
+	} else t18 = $[34];
 	const t19 = draftId ?? LIVE;
 	let t20;
-	if ($[33] !== switchTo) {
+	if ($[35] !== switchTo) {
 		t20 = (value) => switchTo(value === LIVE ? null : String(value));
-		$[33] = switchTo;
-		$[34] = t20;
-	} else t20 = $[34];
+		$[35] = switchTo;
+		$[36] = t20;
+	} else t20 = $[36];
 	let t21;
-	if ($[35] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[37] === Symbol.for("react.memo_cache_sentinel")) {
 		t21 = /* @__PURE__ */ jsx(DropdownMenuLabel, { children: "Switch to" });
-		$[35] = t21;
-	} else t21 = $[35];
+		$[37] = t21;
+	} else t21 = $[37];
 	let t22;
-	if ($[36] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[38] === Symbol.for("react.memo_cache_sentinel")) {
 		t22 = /* @__PURE__ */ jsx("span", { children: "Live" });
-		$[36] = t22;
-	} else t22 = $[36];
+		$[38] = t22;
+	} else t22 = $[38];
 	let t23;
-	if ($[37] !== list) {
+	if ($[39] !== list) {
 		t23 = list && /* @__PURE__ */ jsx("span", {
 			className: "text-muted-foreground text-xs",
 			children: liveLine(list.live)
 		});
-		$[37] = list;
-		$[38] = t23;
-	} else t23 = $[38];
+		$[39] = list;
+		$[40] = t23;
+	} else t23 = $[40];
 	let t24;
-	if ($[39] !== t23) {
+	if ($[41] !== t23) {
 		t24 = /* @__PURE__ */ jsx(DropdownMenuRadioItem, {
 			value: LIVE,
 			closeOnClick: true,
@@ -276,58 +285,58 @@ function DraftPicker(t0) {
 				children: [t22, t23]
 			})
 		});
-		$[39] = t23;
-		$[40] = t24;
-	} else t24 = $[40];
+		$[41] = t23;
+		$[42] = t24;
+	} else t24 = $[42];
 	let t25;
-	if ($[41] !== drafts) {
+	if ($[43] !== drafts) {
 		t25 = drafts.map(_temp6);
-		$[41] = drafts;
-		$[42] = t25;
-	} else t25 = $[42];
+		$[43] = drafts;
+		$[44] = t25;
+	} else t25 = $[44];
 	let t26;
-	if ($[43] !== t24 || $[44] !== t25) {
+	if ($[45] !== t24 || $[46] !== t25) {
 		t26 = /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [
 			t21,
 			t24,
 			t25
 		] });
-		$[43] = t24;
-		$[44] = t25;
-		$[45] = t26;
-	} else t26 = $[45];
+		$[45] = t24;
+		$[46] = t25;
+		$[47] = t26;
+	} else t26 = $[47];
 	let t27;
-	if ($[46] !== t19 || $[47] !== t20 || $[48] !== t26) {
+	if ($[48] !== t19 || $[49] !== t20 || $[50] !== t26) {
 		t27 = /* @__PURE__ */ jsx(DropdownMenuRadioGroup, {
 			value: t19,
 			onValueChange: t20,
 			children: t26
 		});
-		$[46] = t19;
-		$[47] = t20;
-		$[48] = t26;
-		$[49] = t27;
-	} else t27 = $[49];
+		$[48] = t19;
+		$[49] = t20;
+		$[50] = t26;
+		$[51] = t27;
+	} else t27 = $[51];
 	let t28;
-	if ($[50] !== t18 || $[51] !== t27) {
+	if ($[52] !== t18 || $[53] !== t27) {
 		t28 = /* @__PURE__ */ jsx(DropdownMenuContent, {
 			className: "w-80",
 			align: "start",
 			children: /* @__PURE__ */ jsxs(Fragment, { children: [t18, t27] })
 		});
-		$[50] = t18;
-		$[51] = t27;
-		$[52] = t28;
-	} else t28 = $[52];
+		$[52] = t18;
+		$[53] = t27;
+		$[54] = t28;
+	} else t28 = $[54];
 	let t29;
-	if ($[53] !== t17 || $[54] !== t28) {
+	if ($[55] !== t17 || $[56] !== t28) {
 		t29 = /* @__PURE__ */ jsxs(DropdownMenu, { children: [t17, t28] });
-		$[53] = t17;
-		$[54] = t28;
-		$[55] = t29;
-	} else t29 = $[55];
+		$[55] = t17;
+		$[56] = t28;
+		$[57] = t29;
+	} else t29 = $[57];
 	let t30;
-	if ($[56] !== current?.name || $[57] !== deleting || $[58] !== draftId || $[59] !== leaveDraft || $[60] !== projectId || $[61] !== review) {
+	if ($[58] !== current?.name || $[59] !== deleting || $[60] !== draftId || $[61] !== leaveDraft || $[62] !== projectId || $[63] !== review) {
 		t30 = draftId && projectId && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ReviewDraftSheet, {
 			projectId,
 			draftId,
@@ -341,21 +350,21 @@ function DraftPicker(t0) {
 			onOpenChange: _temp8,
 			onDeleted: (ended) => leaveDraft(ended, { discarded: current?.name === null })
 		})] });
-		$[56] = current?.name;
-		$[57] = deleting;
-		$[58] = draftId;
-		$[59] = leaveDraft;
-		$[60] = projectId;
-		$[61] = review;
-		$[62] = t30;
-	} else t30 = $[62];
+		$[58] = current?.name;
+		$[59] = deleting;
+		$[60] = draftId;
+		$[61] = leaveDraft;
+		$[62] = projectId;
+		$[63] = review;
+		$[64] = t30;
+	} else t30 = $[64];
 	let t31;
-	if ($[63] !== t29 || $[64] !== t30) {
+	if ($[65] !== t29 || $[66] !== t30) {
 		t31 = /* @__PURE__ */ jsxs(Fragment, { children: [t29, t30] });
-		$[63] = t29;
-		$[64] = t30;
-		$[65] = t31;
-	} else t31 = $[65];
+		$[65] = t29;
+		$[66] = t30;
+		$[67] = t31;
+	} else t31 = $[67];
 	return t31;
 }
 function _temp8(open_0) {
@@ -364,8 +373,8 @@ function _temp8(open_0) {
 function _temp7(open) {
 	if (!open) studioStore.send({ type: "closeReviewDraftSheet" });
 }
-function _temp6(draft) {
-	return /* @__PURE__ */ jsx(DraftItem, { draft }, draft.id);
+function _temp6(draft_0) {
+	return /* @__PURE__ */ jsx(DraftItem, { draft: draft_0 }, draft_0.id);
 }
 function _temp5() {
 	return _temp4;