camox 0.44.0 → 0.46.0

package/dist/lib/studio-reads.js

@@ -0,0 +1,554 @@
+import { useCurrentDraftId } from "./draft-scope.js";
+import { ViewLocaleContext } from "./view-locale-context.js";
+import { fetchRuntimeJson } from "../features/runtime/navigationTarget.js";
+import { collectFileIds } from "./normalized-data.js";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+import { inScope, queryKeys, scopeOfKey } from "@camox/api-contract/query-keys";
+import { useQueries, useQuery, useSuspenseQuery } from "@tanstack/react-query";
+
+//#region src/lib/studio-reads.ts
+function entry(definition) {
+	const make = ((params) => ({
+		entry: make,
+		params
+	}));
+	Object.assign(make, {
+		definition,
+		paramsOf: (key) => definition.parse?.(key.slice(0, key.length - keySuffixLength(definition))) ?? null
+	});
+	return make;
+}
+const usageCountsPrefix = queryKeys.blocks.getUsageCounts;
+const collectionsPrefix = ["camox", "collections"];
+const loadLayout = ({ api, signal }, { projectUuid, layoutId }) => api.layouts.get({
+	projectUuid,
+	layoutId
+}, { signal });
+const landLayout = (layout, fill) => {
+	fillBlocks(layout, fill);
+	return layout.layout;
+};
+const reads = {
+	project: entry({
+		key: ({ projectUuid }) => [
+			"camox",
+			"projects",
+			"getByUuid",
+			projectUuid
+		],
+		shared: true,
+		fetch: ({ api, signal }, { projectUuid }) => api.projects.getByUuid({ projectUuid }, { signal }),
+		staleTime: Infinity
+	}),
+	localeList: entry({
+		key: ({ projectId }) => [
+			"camox",
+			"locales",
+			"list",
+			projectId
+		],
+		everyLocale: true,
+		fetch: ({ api, signal }, { projectId }) => api.locales.list({ projectId }, { signal }),
+		staleTime: Infinity
+	}),
+	missingFromLocale: entry({
+		key: ({ projectId }) => [
+			"camox",
+			"locales",
+			"listMissing",
+			projectId
+		],
+		fetch: ({ api, signal }, { projectId }) => api.locales.listMissing({ projectId }, { signal })
+	}),
+	pageList: entry({
+		key: () => queryKeys.pages.list,
+		fetch: async ({ api, signal }, { projectUuid }) => (await api.pages.listBySlug({ projectUuid }, { signal })).pages,
+		staleTime: Infinity
+	}),
+	pageStructure: entry({
+		key: ({ path }) => queryKeys.pages.getByPath(path),
+		fetch: ({ api, signal }, { path, projectUuid }) => api.pages.getStructure({
+			path,
+			projectUuid
+		}, { signal }),
+		full: {
+			load: ({ api, signal }, { path, projectUuid }) => api.pages.getByPath({
+				path,
+				projectUuid
+			}, { signal }),
+			land: (page, fill) => {
+				fillBlocks(page, fill);
+				return {
+					page: page.page,
+					layout: page.layout,
+					projectName: page.projectName,
+					project: page.project
+				};
+			}
+		},
+		staleTime: Infinity
+	}),
+	page: entry({
+		key: ({ id }) => queryKeys.pages.getById(id),
+		fetch: ({ api, signal }, { id }) => api.pages.get({ id }, { signal }),
+		staleTime: Infinity
+	}),
+	layoutStructure: entry({
+		key: ({ projectUuid, layoutId }) => [
+			...queryKeys.layouts.all,
+			"get",
+			projectUuid,
+			layoutId
+		],
+		fetch: async (context, params) => landLayout(await loadLayout(context, params), context.fill),
+		full: {
+			load: loadLayout,
+			land: landLayout
+		},
+		staleTime: Infinity
+	}),
+	layoutList: entry({
+		key: () => [...queryKeys.layouts.all, "list"],
+		fetch: ({ api, signal }, { projectId }) => api.layouts.list({ projectId }, { signal }),
+		staleTime: Infinity
+	}),
+	blockBundle: entry({
+		key: (id) => queryKeys.blocks.get(id),
+		fetch: ({ api, signal }, id) => api.blocks.get({ id }, { signal }),
+		parse: (key) => {
+			const id = key[3];
+			if (typeof id !== "string") return null;
+			const rebuilt = queryKeys.blocks.get(id);
+			return rebuilt.length === key.length && rebuilt.every((part, index) => part === key[index]) ? id : null;
+		},
+		staleTime: Infinity
+	}),
+	fileList: entry({
+		key: () => queryKeys.files.list,
+		fetch: ({ api, signal }, { projectId }) => api.files.list({ projectId }, { signal }),
+		staleTime: Infinity
+	}),
+	file: entry({
+		key: (id) => queryKeys.files.get(id),
+		fetch: ({ api, signal }, id) => api.files.get({ id }, { signal }),
+		staleTime: Infinity
+	}),
+	fileUsageCount: entry({
+		key: (id) => [
+			...usageCountsPrefix,
+			"files",
+			id
+		],
+		fetch: async ({ api, signal }, id) => (await api.files.getUsageCount({ id }, { signal })).count,
+		staleTime: Infinity
+	}),
+	blockUsageCounts: entry({
+		key: () => usageCountsPrefix,
+		fetch: async ({ api, signal }, { projectId }) => Object.fromEntries((await api.blocks.getUsageCounts({ projectId }, { signal })).map(({ type, count }) => [type, count])),
+		staleTime: Infinity
+	}),
+	pageMarkdown: entry({
+		key: (pageId) => queryKeys.blocks.getPageMarkdown(pageId),
+		fetch: async ({ api, signal }, pageId) => (await api.blocks.getPageMarkdown({ pageId }, { signal })).markdown,
+		staleTime: Infinity
+	}),
+	collectionList: entry({
+		key: ({ projectUuid }) => [
+			...collectionsPrefix,
+			"list",
+			projectUuid
+		],
+		fetch: ({ api, signal }, { projectUuid }) => api.collectionDefinitions.list({ projectUuid }, { signal })
+	}),
+	collection: entry({
+		key: ({ projectUuid, collectionId }) => [
+			...collectionsPrefix,
+			"get",
+			projectUuid,
+			collectionId
+		],
+		fetch: ({ api, signal }, input) => api.collectionDefinitions.get(input, { signal })
+	}),
+	record: entry({
+		key: ({ projectUuid, collectionId, id }) => queryKeys.collections.record(projectUuid, collectionId, id),
+		fetch: ({ api, signal }, input) => api.collectionDefinitions.getRecord(input, { signal })
+	}),
+	records: entry({
+		key: ({ projectUuid, collectionId }) => queryKeys.collections.records(projectUuid, collectionId),
+		fetch: ({ api, signal }, input) => api.collectionDefinitions.listRecords(input, { signal })
+	}),
+	recordUsageCount: entry({
+		key: ({ projectUuid, collectionId, id }) => [...queryKeys.collections.record(projectUuid, collectionId, id), "usageCount"],
+		fetch: async ({ api, signal }, input) => (await api.collectionDefinitions.getRecordUsageCount(input, { signal })).count
+	}),
+	draftList: entry({
+		key: ({ projectId }) => [...queryKeys.drafts.list, projectId],
+		shared: true,
+		fetch: ({ api, signal }, { projectId }) => api.drafts.list({ projectId }, { signal }),
+		staleTime: Infinity
+	}),
+	draft: entry({
+		key: ({ draftId }) => [...queryKeys.drafts.get, draftId],
+		shared: true,
+		fetch: ({ apiIn, signal }, { projectId, draftId }) => apiIn(draftId).drafts.get({ projectId }, { signal }),
+		staleTime: Infinity
+	}),
+	publishPreview: entry({
+		key: ({ draftId }) => [
+			...queryKeys.drafts.all,
+			"previewPublish",
+			draftId
+		],
+		shared: true,
+		fetch: ({ apiIn, signal }, { projectId, draftId }) => apiIn(draftId).drafts.previewPublish({ projectId }, { signal }),
+		staleTime: 0
+	}),
+	canvasFrame: entry({
+		key: ({ projectUuid, runtimeBasePath, pathname, derivedLayoutId }) => derivedLayoutId ? [
+			...queryKeys.layouts.all,
+			"canvas",
+			projectUuid,
+			runtimeBasePath,
+			pathname,
+			derivedLayoutId
+		] : [
+			...queryKeys.pages.getByPath(pathname),
+			"canvas",
+			projectUuid,
+			runtimeBasePath
+		],
+		fetch: async (context, { runtimeBasePath, pathname, derivedLayoutId }) => {
+			const input = await readRender(context, runtimeBasePath, pathname);
+			if (!input) throw new Error(`Could not load ${pathname} (404).`);
+			validateCanvasFrame(input, pathname, derivedLayoutId);
+			return input;
+		},
+		staleTime: 3e4,
+		retry: false,
+		refetchOnWindowFocus: false
+	}),
+	derivedPageData: entry({
+		key: ({ projectUuid, runtimeBasePath, pathname }) => [
+			...queryKeys.layouts.all,
+			"data",
+			projectUuid,
+			runtimeBasePath,
+			pathname
+		],
+		fetch: async (context, { runtimeBasePath, pathname }) => (await readRender(context, runtimeBasePath, pathname))?.derived?.result ?? null,
+		staleTime: Infinity
+	}),
+	discoveredPath: entry({
+		key: ({ projectUuid, runtimeBasePath, layoutId, recordId }) => [
+			...queryKeys.layouts.all,
+			"routes",
+			projectUuid,
+			runtimeBasePath,
+			layoutId,
+			...recordId ? [recordId] : []
+		],
+		fetch: async ({ runtimeJson, draft, signal }, { runtimeBasePath, layoutId, recordId }) => {
+			const response = await runtimeJson("/_camox/routes", runtimeBasePath, {
+				layoutId,
+				...recordId && { recordId }
+			}, draft, signal);
+			if (!response.ok) throw new Error(`Could not discover pages of ${layoutId}.`);
+			return (await response.json()).path;
+		},
+		staleTime: Infinity,
+		retry: false
+	})
+};
+/** What the runtime renders at `pathname` in the read's draft, or null where nothing renders. */
+async function readRender({ runtimeJson, draft, signal }, runtimeBasePath, pathname) {
+	const response = await runtimeJson("/_camox/data", runtimeBasePath, { path: pathname }, draft, signal);
+	if (response.status === 404) return null;
+	if (!response.ok) throw new Error(`Could not load ${pathname} (${response.status}).`);
+	return await response.json();
+}
+/** Fills each block's bundle, and each file a bundle places, from a page or layout response. */
+function fillBlocks(response, fill) {
+	const filesById = new Map(response.files.map((file) => [file.id, file]));
+	for (const block of response.blocks) {
+		const repeatableItems = response.repeatableItems.filter((item) => item.blockId === block.id);
+		const files = [...collectFileIds(block, repeatableItems)].map((id) => filesById.get(id)).filter((file) => file != null);
+		fill(reads.blockBundle(block.id), {
+			block,
+			repeatableItems,
+			files
+		});
+		for (const file of files) fill(reads.file(file.id), file);
+	}
+}
+/** Whether a runtime response is the page a Canvas frame asked for. */
+function validateCanvasFrame(input, pathname, derivedLayoutId) {
+	if (input.pathname !== pathname || input.routeKind || !input.dehydratedState || !input.previewDocument) throw new Error("The server did not return a page preview.");
+	if (derivedLayoutId && input.derived?.layoutId !== derivedLayoutId) throw new Error(`This path does not render the selected derived layout (${derivedLayoutId}).`);
+}
+/**
+* A locale as a key segment: the tag a request names in `LOCALE_HEADER`, and none for the default
+* locale, which requests don't name. A server render naming no locale keys the default one's.
+*/
+const localeKey = (locale) => locale.isDefault ? "" : locale.tag;
+/** A read's key in `target`: its own key, then its locale unless it has none, then its scope. */
+function keyIn(definition, params, target) {
+	const key = definition.key(params);
+	if (definition.shared) return key;
+	return inScope(definition.everyLocale ? key : [...key, localeKey(target.locale)], target.draft);
+}
+/** How many segments `keyIn` appends to a read's own key: its locale and scope. */
+function keySuffixLength(definition) {
+	if (definition.shared) return 0;
+	return definition.everyLocale ? 1 : 2;
+}
+function createStudioCache({ queryClient, scope, api, runtimeJson = (endpoint, base, params, draft, signal, locale) => fetchRuntimeJson(scope, endpoint, base, params, draft, signal, locale), locale: viewedLocale = scope.locale }) {
+	const targetOf = (options) => ({
+		draft: options && "in" in options ? options.in ?? null : scope.current(),
+		locale: options?.locale ?? viewedLocale()
+	});
+	const keyOf = (read, target) => keyIn(read.entry.definition, read.params, target);
+	const contextFor = (target, signal) => ({
+		draft: target.draft,
+		get api() {
+			return api(target.draft, target.locale);
+		},
+		apiIn: (draft) => api(draft, target.locale),
+		signal,
+		runtimeJson: (endpoint, base, params, draft, signal) => runtimeJson(endpoint, base, params, draft, signal, target.locale),
+		fill: (read, value) => queryClient.setQueryData(keyOf(read, target), value)
+	});
+	const neverAborted = () => new AbortController().signal;
+	const options = (read, inDraft) => {
+		const target = targetOf(inDraft);
+		const definition = read.entry.definition;
+		return {
+			queryKey: keyOf(read, target),
+			queryFn: ({ signal }) => definition.fetch(contextFor(target, signal), read.params),
+			...definition.staleTime !== void 0 && { staleTime: definition.staleTime },
+			...definition.retry !== void 0 && { retry: definition.retry },
+			...definition.refetchOnWindowFocus !== void 0 && { refetchOnWindowFocus: definition.refetchOnWindowFocus }
+		};
+	};
+	const land = (read, response, inDraft) => {
+		const target = targetOf(inDraft);
+		const full = read.entry.definition.full;
+		if (!full) {
+			queryClient.setQueryData(keyOf(read, target), response);
+			return response;
+		}
+		const context = contextFor(target, neverAborted());
+		const value = full.land(response, context.fill, read.params);
+		queryClient.setQueryData(keyOf(read, target), value);
+		return value;
+	};
+	const loadFully = async (read, inDraft) => {
+		const target = targetOf(inDraft);
+		const definition = read.entry.definition;
+		const context = contextFor(target, neverAborted());
+		if (!definition.full) {
+			const value = await definition.fetch(context, read.params);
+			queryClient.setQueryData(keyOf(read, target), value);
+			return value;
+		}
+		return land(read, await definition.full.load(context, read.params), {
+			in: target.draft,
+			locale: target.locale
+		});
+	};
+	return {
+		options,
+		get: (read, inDraft) => queryClient.getQueryData(keyOf(read, targetOf(inDraft))),
+		set: (read, value, inDraft) => queryClient.setQueryData(keyOf(read, targetOf(inDraft)), value),
+		land,
+		ensure: async (read, inDraft) => {
+			const cached = queryClient.getQueryData(keyOf(read, targetOf(inDraft)));
+			return cached !== void 0 ? cached : loadFully(read, inDraft);
+		},
+		reload: loadFully,
+		invalidate: (read, inDraft) => queryClient.invalidateQueries({
+			queryKey: keyOf(read, targetOf(inDraft)),
+			exact: true
+		}),
+		remove: (read, inDraft) => queryClient.removeQueries({
+			queryKey: keyOf(read, targetOf(inDraft)),
+			exact: true
+		}),
+		edit: () => {
+			const target = targetOf();
+			const snapshots = /* @__PURE__ */ new Map();
+			const touch = (read) => {
+				const key = keyOf(read, target);
+				const hash = JSON.stringify(key);
+				if (!snapshots.has(hash)) {
+					queryClient.cancelQueries({
+						queryKey: key,
+						exact: true
+					});
+					snapshots.set(hash, {
+						key,
+						data: queryClient.getQueryData(key)
+					});
+				}
+				return key;
+			};
+			return {
+				get: (read) => queryClient.getQueryData(keyOf(read, target)),
+				set: (read, value) => queryClient.setQueryData(touch(read), value),
+				remove: (read) => queryClient.removeQueries({
+					queryKey: touch(read),
+					exact: true
+				}),
+				rollback: () => {
+					for (const { key, data } of snapshots.values()) if (data === void 0) queryClient.removeQueries({
+						queryKey: key,
+						exact: true
+					});
+					else queryClient.setQueryData(key, data);
+				},
+				settle: () => {
+					for (const { key } of snapshots.values()) queryClient.invalidateQueries({
+						queryKey: key,
+						exact: true
+					});
+				}
+			};
+		},
+		receive: async (message, projectId) => {
+			const keyScope = message.draftId === null ? null : await scope.keyScopeOfDraft(message.draftId, projectId);
+			await Promise.all(message.targets.map((queryKey) => queryClient.invalidateQueries({
+				queryKey,
+				predicate: keyScope === null ? void 0 : (query) => scopeOfKey(query.queryKey) === keyScope
+			})));
+		}
+	};
+}
+const StudioCacheContext = React.createContext(null);
+/** The studio cache of the draft scope the caller is in. */
+function useStudioCache() {
+	const cache = React.useContext(StudioCacheContext);
+	if (!cache) throw new Error("useStudioCache must be used inside a StudioCacheContext provider");
+	return cache;
+}
+/**
+* The draft and locale the caller's render shows, which its reads name: the read hooks re-render
+* after a move to another draft, and a locale switch mounts the page afresh.
+*/
+function useShownTarget() {
+	const $ = c(3);
+	const t0 = useCurrentDraftId();
+	const t1 = React.useContext(ViewLocaleContext)?.locale;
+	let t2;
+	if ($[0] !== t0 || $[1] !== t1) {
+		t2 = {
+			in: t0,
+			locale: t1
+		};
+		$[0] = t0;
+		$[1] = t1;
+		$[2] = t2;
+	} else t2 = $[2];
+	return t2;
+}
+const NO_READ = {
+	queryKey: ["camox", "noRead"],
+	queryFn: async () => null,
+	staleTime: Infinity
+};
+function useRead(read) {
+	const $ = c(4);
+	const inDraft = useShownTarget();
+	const cache = useStudioCache();
+	let t0;
+	if ($[0] !== cache || $[1] !== inDraft || $[2] !== read) {
+		t0 = read ? cache.options(read, inDraft) : NO_READ;
+		$[0] = cache;
+		$[1] = inDraft;
+		$[2] = read;
+		$[3] = t0;
+	} else t0 = $[3];
+	const { data } = useSuspenseQuery(t0);
+	return data;
+}
+/**
+* A read's query, without suspending: pending until it loads, or while not `enabled`. It reads in
+* the locale the caller's render shows, unless `locale` names another.
+*/
+function useReadQuery(read, t0) {
+	const $ = c(13);
+	let t1;
+	if ($[0] !== t0) {
+		t1 = t0 === void 0 ? {} : t0;
+		$[0] = t0;
+		$[1] = t1;
+	} else t1 = $[1];
+	const { enabled, select, locale } = t1;
+	const shown = useShownTarget();
+	const cache = useStudioCache();
+	let t2;
+	if ($[2] !== locale || $[3] !== shown) {
+		t2 = locale ? {
+			...shown,
+			locale
+		} : shown;
+		$[2] = locale;
+		$[3] = shown;
+		$[4] = t2;
+	} else t2 = $[4];
+	const inDraft = t2;
+	let t3;
+	if ($[5] !== cache || $[6] !== inDraft || $[7] !== read) {
+		t3 = cache.options(read, inDraft);
+		$[5] = cache;
+		$[6] = inDraft;
+		$[7] = read;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] !== enabled || $[10] !== select || $[11] !== t3) {
+		t4 = {
+			...t3,
+			enabled,
+			select
+		};
+		$[9] = enabled;
+		$[10] = select;
+		$[11] = t3;
+		$[12] = t4;
+	} else t4 = $[12];
+	return useQuery(t4);
+}
+function useReadQueries(list, combine) {
+	const $ = c(10);
+	const inDraft = useShownTarget();
+	const cache = useStudioCache();
+	let t0;
+	if ($[0] !== cache || $[1] !== inDraft || $[2] !== list) {
+		let t1;
+		if ($[4] !== cache || $[5] !== inDraft) {
+			t1 = (read) => cache.options(read, inDraft);
+			$[4] = cache;
+			$[5] = inDraft;
+			$[6] = t1;
+		} else t1 = $[6];
+		t0 = list.map(t1);
+		$[0] = cache;
+		$[1] = inDraft;
+		$[2] = list;
+		$[3] = t0;
+	} else t0 = $[3];
+	let t1;
+	if ($[7] !== combine || $[8] !== t0) {
+		t1 = {
+			queries: t0,
+			combine
+		};
+		$[7] = combine;
+		$[8] = t0;
+		$[9] = t1;
+	} else t1 = $[9];
+	return useQueries(t1);
+}
+
+//#endregion
+export { StudioCacheContext, createStudioCache, reads, useRead, useReadQueries, useReadQuery, useStudioCache, validateCanvasFrame };

package/dist/lib/use-project-room.js

@@ -1,52 +1,48 @@
-import { getAuthCookieHeader } from "./auth.js";
-import { areCommentsEnabled } from "../features/preview/commentsEnabled.js";
+import { apiSocketOptions } from "./api-socket.js";
 import { c } from "react/compiler-runtime";
-import { useQueryClient } from "@tanstack/react-query";
 import { useRef } from "react";
-import { queryKeys } from "@camox/api-contract/query-keys";
 import { usePartySocket } from "partysocket/react";
 
 //#region src/lib/use-project-room.ts
 const DEBOUNCE_MS = 300;
-function useProjectRoom(apiUrl, projectId) {
-	const $ = c(10);
-	if ($[0] !== "67c19533e16ee15335bcc3b4e1e8e5b7b5ec3b876c8d1b4511e85727b85792f9") {
-		for (let $i = 0; $i < 10; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "67c19533e16ee15335bcc3b4e1e8e5b7b5ec3b876c8d1b4511e85727b85792f9";
-	}
-	const queryClient = useQueryClient();
-	const timerRef = useRef(void 0);
-	let t0;
-	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = [];
-		$[1] = t0;
-	} else t0 = $[1];
-	const pendingRef = useRef(t0);
+/**
+* Follows the project's realtime room (ADR 0011). An invalidation from a draft refetches only
+* that draft's queries; one from Live refetches every draft's too, since drafts read Live
+* wherever they change nothing. The studio cache applies each one to the reads it reaches.
+*/
+function useProjectRoom(apiUrl, projectId, studioCache, t0) {
+	const $ = c(12);
 	let t1;
-	if ($[2] !== apiUrl) {
-		let t2;
-		if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-			t2 = /\/+$/;
-			$[4] = t2;
-		} else t2 = $[4];
-		t1 = apiUrl.replace(/^https?:\/\//, "").replace(t2, "");
-		$[2] = apiUrl;
-		$[3] = t1;
-	} else t1 = $[3];
-	const host = t1;
-	const t2 = String(projectId ?? "");
-	const t3 = !!projectId;
-	let t4;
-	if ($[5] !== host || $[6] !== queryClient || $[7] !== t2 || $[8] !== t3) {
-		t4 = {
-			host,
+	if ($[0] !== t0) {
+		t1 = t0 === void 0 ? {} : t0;
+		$[0] = t0;
+		$[1] = t1;
+	} else t1 = $[1];
+	const { onDraftEnded } = t1;
+	const timerRef = useRef(void 0);
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = [];
+		$[2] = t2;
+	} else t2 = $[2];
+	const pendingRef = useRef(t2);
+	let t3;
+	if ($[3] !== apiUrl) {
+		t3 = apiSocketOptions(apiUrl);
+		$[3] = apiUrl;
+		$[4] = t3;
+	} else t3 = $[4];
+	const t4 = String(projectId ?? "");
+	const t5 = !!projectId;
+	let t6;
+	if ($[5] !== onDraftEnded || $[6] !== projectId || $[7] !== studioCache || $[8] !== t3 || $[9] !== t4 || $[10] !== t5) {
+		t6 = {
+			...t3,
 			party: "project-room",
-			room: t2,
+			room: t4,
 			prefix: "parties",
-			query: _temp,
-			enabled: t3,
+			enabled: t5,
 			onOpen() {
-				if (areCommentsEnabled()) queryClient.invalidateQueries({ queryKey: queryKeys.comments.all });
 				if (process.env.NODE_ENV !== "production") console.debug("[useProjectRoom] WebSocket connected");
 			},
 			onClose(event) {
@@ -62,26 +58,30 @@ function useProjectRoom(apiUrl, projectId) {
 				} catch {
 					return;
 				}
+				if (data.type === "draftEnded") {
+					const { type: _type, ...ended } = data;
+					onDraftEnded?.(ended);
+					return;
+				}
 				if (data.type !== "invalidate") return;
-				pendingRef.current.push(...data.targets);
+				pendingRef.current.push(data);
 				clearTimeout(timerRef.current);
 				timerRef.current = setTimeout(() => {
-					const targets = pendingRef.current;
+					const pending = pendingRef.current;
 					pendingRef.current = [];
-					for (const queryKey of targets) queryClient.invalidateQueries({ queryKey });
+					for (const message of pending) studioCache.receive(message, projectId);
 				}, DEBOUNCE_MS);
 			}
 		};
-		$[5] = host;
-		$[6] = queryClient;
-		$[7] = t2;
+		$[5] = onDraftEnded;
+		$[6] = projectId;
+		$[7] = studioCache;
 		$[8] = t3;
 		$[9] = t4;
-	} else t4 = $[9];
-	usePartySocket(t4);
-}
-function _temp() {
-	return { _authCookie: getAuthCookieHeader() };
+		$[10] = t5;
+		$[11] = t6;
+	} else t6 = $[11];
+	usePartySocket(t6);
 }
 
 //#endregion