camox 0.48.0 → 0.52.1

package/dist/features/renderer/rendererHost.js

@@ -0,0 +1,249 @@
+import { referencePickerFocus } from "../preview/referencePickerFocus.js";
+import { canvasStore } from "../canvas/canvasStore.js";
+import { previewStore } from "../preview/previewStore.js";
+import { SDK_VERSION, deferredInbox } from "./protocol.js";
+import { createContentEditor } from "../../core/editing/contentEdits.js";
+import { LIVE_KEY_SCOPE, scopeOfKey } from "@camox/api-contract/query-keys";
+
+//#region src/features/renderer/rendererHost.ts
+const mirrored = {
+	preview: previewStore,
+	canvas: canvasStore
+};
+const forwarded = {
+	preview: previewStore,
+	referencePickerFocus
+};
+/**
+* The host of the studio whose cache is `studioCache`, viewing the draft `draftScope` names, which
+* the renderer shows too. Without them, the renderer hears nothing of the studio's cache.
+* The edits the renderer makes in place are written with the studio's own mutations, through
+* `queryClient`; without it, every one fails. What the renderer's pages tell the editor goes to
+* `notify`.
+*/
+function createRendererHost({ studioCache, draftScope, queryClient, notify } = {}) {
+	const applyEdit = queryClient && studioCache ? createContentEditor({
+		queryClient,
+		studioCache
+	}) : void 0;
+	const frames = /* @__PURE__ */ new Map();
+	const thumbnails = /* @__PURE__ */ new Map();
+	/** The questions asked that no renderer answered yet. */
+	const asked = /* @__PURE__ */ new Map();
+	let lastAskId = 0;
+	const connectionListeners = /* @__PURE__ */ new Set();
+	let status = "connecting";
+	const statusListeners = /* @__PURE__ */ new Set();
+	const setStatus = (next) => {
+		if (status === next) return;
+		status = next;
+		for (const listener of statusListeners) listener();
+	};
+	let renderer = null;
+	/** Sends to the renderer once it said hello, in the protocol it speaks. */
+	let welcomed = false;
+	const post = (message) => {
+		if (welcomed) renderer?.(message);
+	};
+	const postStore = (store) => post({
+		type: "store",
+		store,
+		context: mirrored[store].getSnapshot().context
+	});
+	const subscriptions = Object.keys(mirrored).map((store) => mirrored[store].subscribe(() => postStore(store)));
+	const shownScope = () => draftScope?.current() ?? LIVE_KEY_SCOPE;
+	const shown = (queryKey) => scopeOfKey(queryKey) === shownScope();
+	/** Whether a project room invalidation reaches the reads of the draft the renderer shows. */
+	const reaches = async (message, projectId) => {
+		if (message.draftId === null) return true;
+		if (!draftScope) return false;
+		return await draftScope.keyScopeOfDraft(message.draftId, projectId) === shownScope();
+	};
+	const relayChange = (change) => {
+		switch (change.type) {
+			case "received": {
+				const { message, projectId } = change;
+				reaches(message, projectId).then((reached) => reached && post({
+					type: "invalidate",
+					message,
+					projectId
+				}));
+				return;
+			}
+			case "wrote":
+				if (!shown(change.queryKey)) return;
+				post({
+					type: "write",
+					queryKey: change.queryKey,
+					..."value" in change && change.value !== void 0 && { value: change.value }
+				});
+				return;
+			case "outdated": {
+				const queryKeys = change.queryKeys.filter(shown);
+				if (queryKeys.length) post({
+					type: "outdated",
+					queryKeys
+				});
+				return;
+			}
+		}
+	};
+	const stopRelaying = studioCache?.subscribe(relayChange);
+	const stopFollowing = draftScope?.subscribe(({ draftId, move }) => {
+		if (move === "started" && draftId) post({
+			type: "draftStarted",
+			draftId
+		});
+	});
+	const receive = (message) => {
+		switch (message.type) {
+			case "hello":
+				if (message.protocol !== 1) return;
+				renderer?.({
+					type: "welcome",
+					protocol: 1,
+					sdkVersion: SDK_VERSION
+				});
+				if (message.sdkVersion !== SDK_VERSION) return setStatus("updating");
+				welcomed = true;
+				setStatus("connected");
+				for (const store of Object.keys(mirrored)) postStore(store);
+				for (const [frameId, { slot, target }] of frames) post({
+					type: "frame",
+					frameId,
+					slot,
+					target
+				});
+				for (const [thumbnailId, { slot, blockType }] of thumbnails) post({
+					type: "thumbnail",
+					thumbnailId,
+					slot,
+					blockType
+				});
+				for (const [askId, { question }] of asked) post({
+					type: "ask",
+					askId,
+					question
+				});
+				for (const listener of connectionListeners) listener();
+				return;
+			case "storeEvent": {
+				const store = forwarded[message.store];
+				if (!store) return;
+				store.send(message.event);
+				return;
+			}
+			case "rendered": return frames.get(message.frameId)?.hears.rendered?.();
+			case "error": return frames.get(message.frameId)?.hears.failed?.(message.message);
+			case "navigate": return frames.get(message.frameId)?.hears.navigate?.(message.to);
+			case "reveal": return frames.get(message.frameId)?.hears.reveal?.(message.element, message.immediate);
+			case "answer": {
+				const question = asked.get(message.askId);
+				if (!question) return;
+				asked.delete(message.askId);
+				if (message.error === void 0) question.resolve(message.value ?? null);
+				else question.reject(new Error(message.error));
+				return;
+			}
+			case "notify": return notify?.(message.notice);
+			case "edit": {
+				const { editId, edit } = message;
+				const sender = renderer;
+				const answer = (error) => {
+					if (renderer === sender) post({
+						type: "edited",
+						editId,
+						...error && { error }
+					});
+				};
+				if (!applyEdit) return answer("The studio can't save changes made here.");
+				applyEdit(edit).then(() => answer(), (cause) => answer(cause instanceof Error ? cause.message : "Couldn't save the change."));
+				return;
+			}
+		}
+	};
+	return {
+		handle: { connect(inbox) {
+			renderer = deferredInbox(inbox);
+			welcomed = false;
+			const connected = renderer;
+			return deferredInbox((message) => {
+				if (renderer === connected) receive(message);
+			});
+		} },
+		show(frameId, slot, target, hears = {}) {
+			frames.set(frameId, {
+				slot,
+				target,
+				hears
+			});
+			post({
+				type: "frame",
+				frameId,
+				slot,
+				target
+			});
+		},
+		hide(frameId) {
+			if (!frames.delete(frameId)) return;
+			post({
+				type: "frameEnd",
+				frameId
+			});
+		},
+		ask(question) {
+			return new Promise((resolve, reject) => {
+				const askId = ++lastAskId;
+				asked.set(askId, {
+					question,
+					resolve,
+					reject
+				});
+				post({
+					type: "ask",
+					askId,
+					question
+				});
+			});
+		},
+		showThumbnail(thumbnailId, slot, blockType) {
+			thumbnails.set(thumbnailId, {
+				slot,
+				blockType
+			});
+			post({
+				type: "thumbnail",
+				thumbnailId,
+				slot,
+				blockType
+			});
+		},
+		hideThumbnail(thumbnailId) {
+			if (!thumbnails.delete(thumbnailId)) return;
+			post({
+				type: "thumbnailEnd",
+				thumbnailId
+			});
+		},
+		subscribe(listener) {
+			connectionListeners.add(listener);
+			return () => connectionListeners.delete(listener);
+		},
+		status: () => status,
+		subscribeStatus(listener) {
+			statusListeners.add(listener);
+			return () => statusListeners.delete(listener);
+		},
+		close() {
+			connectionListeners.clear();
+			statusListeners.clear();
+			for (const subscription of subscriptions) subscription.unsubscribe();
+			stopRelaying?.();
+			stopFollowing?.();
+			renderer = null;
+		}
+	};
+}
+
+//#endregion
+export { createRendererHost };

package/dist/features/renderer/studioConnection.js

@@ -0,0 +1,186 @@
+import { referencePickerFocus } from "../preview/referencePickerFocus.js";
+import { canvasStore } from "../canvas/canvasStore.js";
+import { previewStore } from "../preview/previewStore.js";
+import { SDK_VERSION, deferredInbox } from "./protocol.js";
+import { answerFromCode } from "./definitionAnswers.js";
+
+//#region src/features/renderer/studioConnection.ts
+const mirrors = {
+	preview: previewStore,
+	canvas: canvasStore
+};
+const forwards = {
+	preview: previewStore,
+	referencePickerFocus
+};
+/**
+* Connects the renderer document to the studio through its handle. This document's stores then
+* mirror the studio's, its own events are forwarded to the studio, which owns their truth, and
+* 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 }) {
+	let welcomed = false;
+	let frames = [];
+	const listeners = /* @__PURE__ */ new Set();
+	let thumbnails = [];
+	const changed = () => {
+		for (const listener of listeners) listener();
+	};
+	const setFrames = (next) => {
+		frames = next;
+		changed();
+	};
+	const setThumbnails = (next) => {
+		thumbnails = next;
+		changed();
+	};
+	/** The edits sent to the studio that it hasn't answered yet. */
+	const editsInFlight = /* @__PURE__ */ new Map();
+	let lastEditId = 0;
+	/** Whether the renderer holds the read under `queryKey`. */
+	const holds = (queryKey) => !!queryClient.getQueryCache().find({
+		queryKey,
+		exact: true
+	});
+	const receive = (message) => {
+		if (message.type === "welcome") {
+			welcomed = message.protocol === 1 && message.sdkVersion === SDK_VERSION;
+			return;
+		}
+		if (!welcomed) return;
+		switch (message.type) {
+			case "frame": {
+				const frame = {
+					frameId: message.frameId,
+					slot: message.slot,
+					target: message.target
+				};
+				const index = frames.findIndex(({ frameId }) => frameId === message.frameId);
+				setFrames(index < 0 ? [...frames, frame] : frames.map((shown, at) => at === index ? frame : shown));
+				return;
+			}
+			case "frameEnd":
+				setFrames(frames.filter(({ frameId }) => frameId !== message.frameId));
+				return;
+			case "store":
+				mirrors[message.store]?.send({
+					type: "mirror",
+					context: message.context
+				});
+				return;
+			case "draftStarted":
+				draftScope.enterStarted(message.draftId);
+				return;
+			case "invalidate":
+				studioCache.receive(message.message, message.projectId);
+				return;
+			case "write":
+				if (!holds(message.queryKey)) return;
+				if ("value" in message && message.value !== void 0) queryClient.setQueryData(message.queryKey, message.value);
+				else queryClient.removeQueries({
+					queryKey: message.queryKey,
+					exact: true
+				});
+				return;
+			case "outdated":
+				for (const queryKey of message.queryKeys) if (holds(queryKey)) queryClient.invalidateQueries({
+					queryKey,
+					exact: true
+				});
+				return;
+			case "thumbnail": {
+				const { thumbnailId, slot, blockType } = message;
+				const thumbnail = {
+					thumbnailId,
+					slot,
+					blockType
+				};
+				const index = thumbnails.findIndex((shown) => shown.thumbnailId === thumbnailId);
+				setThumbnails(index < 0 ? [...thumbnails, thumbnail] : thumbnails.map((shown, at) => at === index ? thumbnail : shown));
+				return;
+			}
+			case "thumbnailEnd":
+				setThumbnails(thumbnails.filter(({ thumbnailId }) => thumbnailId !== message.thumbnailId));
+				return;
+			case "ask": {
+				const { askId, question } = message;
+				if (!camoxApp) {
+					studio({
+						type: "answer",
+						askId,
+						error: "The renderer has no code to answer with."
+					});
+					return;
+				}
+				answerFromCode(camoxApp, question).then((value) => studio({
+					type: "answer",
+					askId,
+					value
+				}), (error) => studio({
+					type: "answer",
+					askId,
+					error: error instanceof Error ? error.message : String(error)
+				}));
+				return;
+			}
+			case "edited": {
+				const edit = editsInFlight.get(message.editId);
+				if (!edit) return;
+				editsInFlight.delete(message.editId);
+				if (message.error === void 0) edit.resolve();
+				else edit.reject(new Error(message.error));
+				return;
+			}
+		}
+	};
+	const studio = handle.connect(deferredInbox(receive));
+	studio({
+		type: "hello",
+		protocol: 1,
+		sdkVersion: SDK_VERSION
+	});
+	const inspections = Object.keys(forwards).map((store) => forwards[store].inspect((inspection) => {
+		const event = inspection.event;
+		if (inspection.type !== "@xstate.transition" || !event) return;
+		if (event.type === "mirror" || event.type.startsWith("@xstate.")) return;
+		studio({
+			type: "storeEvent",
+			store,
+			event: { ...event }
+		});
+	}));
+	return {
+		connected: () => welcomed,
+		frames: () => frames,
+		thumbnails: () => thumbnails,
+		subscribe(listener) {
+			listeners.add(listener);
+			return () => listeners.delete(listener);
+		},
+		send: (message) => studio(message),
+		notify: (notice) => studio({
+			type: "notify",
+			notice
+		}),
+		edit: (edit) => new Promise((resolve, reject) => {
+			const editId = ++lastEditId;
+			editsInFlight.set(editId, {
+				resolve,
+				reject
+			});
+			studio({
+				type: "edit",
+				editId,
+				edit
+			});
+		}),
+		close() {
+			for (const inspection of inspections) inspection.unsubscribe();
+			listeners.clear();
+		}
+	};
+}
+
+//#endregion
+export { connectToStudio };

package/dist/features/routes/pageRuntime.d.ts

@@ -1,11 +1,12 @@
 import { LocaleView } from "../../lib/locale-path.js";
+import "../../core/layoutContext.js";
 import "../../core/structuredData.js";
 import "../../core/createLayout.js";
 import "../../core/createApp.js";
 import "../../lib/studio-reads.js";
-import { Router } from "@camox/api-contract";
 import { EndedDraft } from "@camox/api-contract/drafts";
 import { QueryClient } from "@tanstack/react-query";
+import { Router } from "@camox/api-contract/router";
 import { RouterClient } from "@orpc/server";
 //#region src/features/routes/pageRuntime.d.ts
 type PageWithBlocks = Awaited<ReturnType<RouterClient<Router>["pages"]["getByPath"]>>;

package/dist/features/routes/pageRuntime.js

@@ -2,10 +2,11 @@ import { UNNAMED_DEFAULT_LOCALE, localeHeaders } from "../../lib/locale-path.js"
 import { createDraftScope, withoutDraft } from "../../lib/draft-scope.js";
 import { createStudioCache, reads } from "../../lib/studio-reads.js";
 import { linkFallbackLocale } from "../../lib/link-pages.js";
-import { curatedLayoutContext } from "../../core/layoutContext.js";
 import { PAGE_IMAGE_SIZE, pageImageUrl } from "../og/pageImage.js";
+import { curatedLayoutContext } from "../../core/layoutContext.js";
 import { isArticle } from "../../core/structuredData.js";
-import { DRAFT_ENDED_ERROR_CODE, DRAFT_HEADER, NO_DEVELOPMENT_DRAFT_ERROR } from "@camox/api-contract/drafts";
+import { publishingDraft } from "../runtime/publishingDraft.js";
+import { DRAFT_ENDED_ERROR_CODE, DRAFT_HEADER, NO_DEVELOPMENT_DRAFT_ERROR, PUBLISHING_DRAFT_HEADER } from "@camox/api-contract/drafts";
 import { createORPCClient } from "@orpc/client";
 import { RPCLink } from "@orpc/client/fetch";
 
@@ -38,6 +39,10 @@ function parseMarkdownPath(pathname) {
 function createServerApiClient(apiUrl, options) {
 	const headers = localeHeaders(options?.locale);
 	if (options?.draftId && options.authCookieHeader) headers[DRAFT_HEADER] = options.draftId;
+	else {
+		const publishing = publishingDraft();
+		if (publishing) headers[PUBLISHING_DRAFT_HEADER] = publishing;
+	}
 	return createORPCClient(new RPCLink({
 		url: `${apiUrl}/rpc`,
 		headers,
@@ -218,25 +223,32 @@ async function loadCamoxPageForRequest({ apiUrl, authCookieHeader, draftId, loca
 		shouldClearAuthCookie: member.clearAuthCookie
 	};
 }
-async function createMarkdownResponse({ apiUrl, camoxApp, locale, pathname, projectUuid, request, url, onNotFound }) {
-	const api = createServerApiClient(apiUrl, { locale });
-	const requestPathname = pathname ?? new URL(request.url).pathname;
-	try {
-		const page = await api.pages.getByPath({
-			path: requestPathname,
-			projectUuid
-		});
-		const { markdown } = await api.blocks.getPageMarkdown({ pageId: page.page.id });
-		if (!markdown) return null;
-		const meta = buildPageMeta(curatedPageMetaInput(camoxApp, page, locale));
-		return new Response(withFrontMatter(markdown, {
-			...meta,
-			url
-		}), { headers: { "Content-Type": "text/markdown; charset=utf-8" } });
-	} catch (error) {
-		if (onNotFound && isNotFoundError(error)) return onNotFound();
-		return null;
-	}
+/**
+* Reads the Markdown Representation of the page at a runtime path, with its locale's prefix, in
+* one API read: the API finds the locale the prefix names, the page there, its Markdown and what
+* its front matter is built from. Markdown is a public output, so it reads Live whoever asks.
+*/
+function readPageMarkdown({ apiUrl, path, projectUuid }) {
+	return createServerApiClient(apiUrl).pages.getMarkdown({
+		path,
+		projectUuid
+	});
+}
+/**
+* A curated page's Markdown Representation, opened by front matter stating its title,
+* description and absolute `url`. Null when the path has no curated page, or the page has no
+* Markdown.
+*/
+function curatedMarkdownResponse(camoxApp, read, url) {
+	if (!read.page || !read.markdown) return null;
+	const meta = buildPageMeta(curatedPageMetaInput(camoxApp, {
+		...read,
+		page: read.page
+	}, read.locale));
+	return new Response(withFrontMatter(read.markdown, {
+		...meta,
+		url
+	}), { headers: { "Content-Type": "text/markdown; charset=utf-8" } });
 }
 /** A page's title and description, built by its layout's `toTitle` and `toDescription`. */
 function buildPageMeta(input) {
@@ -337,4 +349,4 @@ function buildCamoxPageHead(camoxApp, loaderData, locale) {
 }
 
 //#endregion
-export { buildCamoxPageHead, buildCamoxPageLoaderData, buildDefaultFaviconUrl, buildFaviconUrl, buildPageHead, buildPageMeta, createMarkdownResponse, createServerApiClient, createServerStudioCache, curatedPageMetaInput, declarePage, getMarkdownPath, isAuthSessionError, isNotFoundError, loadCamoxPage, loadCamoxPageForRequest, parseMarkdownPath, parseQuality, prefersMarkdown, readDraftOrLive, readScopeLocales, renderedHref, resolveMemberProject, withFrontMatter };
+export { buildCamoxPageHead, buildCamoxPageLoaderData, buildDefaultFaviconUrl, buildFaviconUrl, buildPageHead, buildPageMeta, createServerApiClient, createServerStudioCache, curatedMarkdownResponse, curatedPageMetaInput, declarePage, getMarkdownPath, isAuthSessionError, isNotFoundError, loadCamoxPage, loadCamoxPageForRequest, parseMarkdownPath, parseQuality, prefersMarkdown, readDraftOrLive, readPageMarkdown, readScopeLocales, renderedHref, resolveMemberProject, withFrontMatter };

package/dist/features/runtime/RuntimeChrome.js

@@ -1,9 +1,9 @@
 import { previewStore, selectIsCanvasShown } from "../preview/previewStore.js";
 import { shownRecordPage } from "../preview/pageRecord.js";
+import { StudioEditingFallback } from "../preview/components/StudioEditingFallback.js";
 import { Navbar } from "../studio/components/Navbar.js";
 import { EditingFallbackContext } from "./editingFallback.js";
 import { PreviewToolbar } from "../preview/components/PreviewToolbar.js";
-import { StudioEditingFallback } from "../preview/components/StudioEditingFallback.js";
 import { ChatSidebar } from "../studio/components/ChatSidebar.js";
 import { FollowAgentProvider } from "../studio/FollowAgentProvider.js";
 import { c } from "react/compiler-runtime";
@@ -12,10 +12,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import studioCssUrl from "virtual:camox-studio-css";
 
 //#region src/features/runtime/RuntimeChrome.tsx
-const renderEditingFallback = ({ layoutPage, children }) => /* @__PURE__ */ jsx(StudioEditingFallback, {
-	layoutPage,
-	children
-});
+const renderEditingFallback = ({ layoutPage }) => /* @__PURE__ */ jsx(StudioEditingFallback, { layoutPage });
 function RuntimeChrome(t0) {
 	const $ = c(32);
 	const { input, children } = t0;

package/dist/features/runtime/assetPrefix.js

@@ -0,0 +1,14 @@
+//#region src/features/runtime/assetPrefix.ts
+/**
+* One build serves under any URL prefix: Live at `/`, a revision's preview at
+* `/_camox/r/<revisionId>/`. Whatever loads the server bundle sets this global first, never per
+* request: the bundle collects its asset URLs when it loads. Unset, assets are under `/`.
+*/
+const ASSET_PREFIX_GLOBAL = "__CAMOX_ASSET_PREFIX__";
+/** The prefix the server build's assets are under, ending with `/`. */
+function assetPrefix() {
+	return globalThis["__CAMOX_ASSET_PREFIX__"] ?? "/";
+}
+
+//#endregion
+export { ASSET_PREFIX_GLOBAL, assetPrefix };

package/dist/features/runtime/breadcrumbs.js

@@ -1,7 +1,7 @@
 import { recordPageValues } from "../../core/recordItem.js";
-import { curatedPageTitle } from "../../core/layoutContext.js";
 import { getPageDestinations } from "../../core/pageDestinations.js";
 import { matchDerivedLayout } from "../../core/derivedRoutes.js";
+import { curatedPageTitle } from "../../core/layoutContext.js";
 
 //#region src/features/runtime/breadcrumbs.ts
 /** The paths above a page's, from the home page down: none for the home page itself. */

package/dist/features/runtime/editingFallback.js

@@ -2,18 +2,14 @@ import * as React from "react";
 
 //#region src/features/runtime/editingFallback.tsx
 /**
-* Renders the read-only page while the editor is still loading. The Studio
+* Renders what holds the page's place while the editor is still loading. The Studio
 * chrome provides it, so visitors never download it.
 */
 const EditingFallbackContext = React.createContext(null);
-/** The read-only page shown until the editor activates, laid out for the Canvas when it shows. */
-function EditingFallbackSlot({ layoutPage, children }) {
+/** What shows until the editor activates, laid out for the Canvas when it shows. */
+function EditingFallbackSlot({ layoutPage }) {
 	const render = React.use(EditingFallbackContext);
-	if (!render) return children;
-	return render({
-		layoutPage,
-		children
-	});
+	return render ? render({ layoutPage }) : null;
 }
 
 //#endregion

package/dist/features/runtime/livePages.js

@@ -1,7 +1,7 @@
 import { createRequestContext } from "../../core/requestContext.js";
-import { curatedPageTitle } from "../../core/layoutContext.js";
 import { getPageDestinations } from "../../core/pageDestinations.js";
 import { discoverLayoutPages } from "../../core/derivedRoutes.js";
+import { curatedPageTitle } from "../../core/layoutContext.js";
 
 //#region src/features/runtime/livePages.ts
 /**