camox 0.52.3 → 0.54.0

package/dist/features/runtime/runtime.d.ts

@@ -93,6 +93,11 @@ export interface RuntimeOptions {
   rendererClientEntryUrl?: string;
   getCamoxApp?: () => Promise<CamoxApp>;
   getDocument?: () => Promise<CamoxDocument>;
+  /**
+   * The app's stylesheet, compiled, which page images render with: a `toImage` styles its
+   * elements with the same classes as the site.
+   */
+  getImageStylesheet?: () => Promise<string>;
   projectUuid?: string;
   renderPage?: (input: PageRenderInput) => Promise<string>;
   renderStudio?: (input: StudioRenderInput) => Promise<string>;

package/dist/features/runtime/runtime.js

@@ -14,6 +14,7 @@ import { discoverLayoutPages, matchDerivedLayout } from "../../core/derivedRoute
 import { buildLayoutContext, curatedLayoutContext } from "../../core/layoutContext.js";
 import { buildCamoxPageHead, buildFaviconUrl, buildPageHead, buildPageMeta, createServerApiClient, createServerStudioCache, curatedMarkdownResponse, declarePage, isNotFoundError, loadCamoxPageForRequest, parseMarkdownPath, prefersMarkdown, readDraftOrLive, readPageMarkdown, readScopeLocales, renderedHref, resolveMemberProject, withFrontMatter } from "../routes/pageRuntime.js";
 import { assetPrefix } from "./assetPrefix.js";
+import { documentGoogleFonts } from "../og/documentFonts.js";
 import { alternatesByPage, findAlternates, hreflangLinks } from "./alternates.js";
 import { configuredProviders, renderAnalyticsScripts } from "./analytics.js";
 import { omitArtifactSources } from "./artifactSources.js";
@@ -294,16 +295,26 @@ async function createRoutesResponse(request, options) {
 }
 /**
 * The image of the page `/og?path=` names, by its path with its locale's prefix: its layout's
-* `toImage`, or Camox's default image, rendered with the page's context. Only real pages have
-* one, read as the page itself would be, in the draft the URL names for a member.
+* `toImage`, or Camox's default image, rendered with the page's context and the site's
+* stylesheet and fonts. Only real pages have one, read as the page itself would be, in the draft
+* the URL names for a member.
 */
 async function createOgResponse(request, options) {
 	const camoxApp = await options.getCamoxApp?.();
 	if (!camoxApp) return Response.json({ message: "Camox app registry is not available." }, { status: 500 });
 	const source = await readPageImageSource(request, options, camoxApp);
 	if (!source) return new Response("Not found", { status: 404 });
+	const [css, document] = await Promise.all([options.getImageStylesheet?.(), options.getDocument?.()]);
+	const style = {
+		css,
+		fonts: documentGoogleFonts(document ?? {})
+	};
 	const headers = {
-		ETag: await etagOf(JSON.stringify([source.layout?.id ?? null, source.context])),
+		ETag: await etagOf(JSON.stringify([
+			source.layout?.id ?? null,
+			source.context,
+			style
+		])),
 		"Cache-Control": isPrivateRender(request, options) ? "private, no-store" : "public, no-cache"
 	};
 	if (namesEtag(request, headers.ETag)) return new Response(null, {
@@ -311,7 +322,7 @@ async function createOgResponse(request, options) {
 		headers
 	});
 	const toImage = source.layout?.toImage ?? DefaultPageImage;
-	const image = await renderPageImage(toImage(source.context));
+	const image = await renderPageImage(toImage(source.context), style);
 	for (const [name, value] of Object.entries(headers)) image.headers.set(name, value);
 	return image;
 }
@@ -933,17 +944,41 @@ async function loadLayoutResult(app, match, context, locale) {
 }
 /**
 * The Markdown of a singleton or derived page: front matter, its before blocks, the layout's
-* toMarkdown output, then its after blocks. Without toMarkdown, the page is HTML only.
+* toMarkdown output, then its after blocks. Null without toMarkdown: the page is then HTML only.
+* The layout's blocks settle which draft it reads, as they do for the page's HTML.
 */
-async function createLayoutMarkdownResponse(options, match, locale, page) {
+async function buildLayoutMarkdown(options, match, locale, page, reader = { member: false }) {
 	const { toMarkdown, id } = match.layout._internal;
 	const { apiUrl, projectUuid } = options;
 	if (!toMarkdown || !apiUrl || !projectUuid) return null;
-	const api = createServerApiClient(apiUrl, { locale });
+	const authCookieHeader = reader.member ? reader.authCookieHeader : void 0;
+	const api = (draftId) => createServerApiClient(apiUrl, {
+		authCookieHeader,
+		draftId,
+		locale
+	});
+	const { value: slots, draftId } = await readDraftOrLive(reader.requestedDraft, reader.member, (draftId) => api(draftId).blocks.getLayoutMarkdown({
+		projectUuid,
+		layoutId: id
+	})).catch((error) => {
+		if (!isNotFoundError(error)) throw error;
+		return {
+			value: {
+				before: "",
+				after: "",
+				projectName: ""
+			},
+			draftId: reader.member ? reader.requestedDraft : void 0
+		};
+	});
 	const app = await options.getCamoxApp?.();
 	/** The layout's own Markdown, between its before and after blocks, and what built it. */
 	const layoutMarkdown = async () => {
-		const result = await loadLayoutResult(app, match, createLayoutRequestContext(options, "live", { locale }), locale);
+		const result = await loadLayoutResult(app, match, createLayoutRequestContext(options, reader.member ? "draft" : "live", {
+			authCookieHeader,
+			draftId,
+			locale
+		}), locale);
 		const record = asCollectionItem(result);
 		const collection = record && app?.getCollectionById(record.collectionId);
 		if (!record || !collection) return {
@@ -960,7 +995,7 @@ async function createLayoutMarkdownResponse(options, match, locale, page) {
 			item
 		}));
 		return {
-			body: [await api.collectionDefinitions.recordMarkdown({
+			body: [await api(draftId).collectionDefinitions.recordMarkdown({
 				projectUuid,
 				collectionId: record.collectionId,
 				id: data.id,
@@ -970,24 +1005,7 @@ async function createLayoutMarkdownResponse(options, match, locale, page) {
 			record: recordPageValues(collection, record)
 		};
 	};
-	let rendered;
-	try {
-		rendered = await layoutMarkdown();
-	} catch (error) {
-		if (isNotFoundError(error)) return new Response("Page not found", { status: 404 });
-		throw error;
-	}
-	const slots = await api.blocks.getLayoutMarkdown({
-		projectUuid,
-		layoutId: id
-	}).catch((error) => {
-		if (isNotFoundError(error)) return {
-			before: "",
-			after: "",
-			projectName: ""
-		};
-		throw error;
-	});
+	const rendered = await layoutMarkdown();
 	const meta = buildPageMeta({
 		layout: match.layout._internal,
 		context: buildLayoutContext(match.layout._internal, {
@@ -1004,10 +1022,59 @@ async function createLayoutMarkdownResponse(options, match, locale, page) {
 		...rendered.body,
 		slots.after
 	].filter(Boolean).join("\n\n");
-	return new Response(withFrontMatter(markdown, {
+	return withFrontMatter(markdown, {
 		...meta,
 		url: page.url
-	}), { headers: { "Content-Type": "text/markdown; charset=utf-8" } });
+	});
+}
+/**
+* A singleton or derived page's public Markdown Representation. Markdown is a public output: it
+* reads published records and blocks whoever asks.
+*/
+async function createLayoutMarkdownResponse(options, match, locale, page) {
+	let markdown;
+	try {
+		markdown = await buildLayoutMarkdown(options, match, locale, page);
+	} catch (error) {
+		if (isNotFoundError(error)) return new Response("Page not found", { status: 404 });
+		throw error;
+	}
+	if (markdown === null) return null;
+	return new Response(markdown, { headers: { "Content-Type": "text/markdown; charset=utf-8" } });
+}
+/**
+* A singleton or derived page's Markdown Representation as JSON (`/_camox/data?markdown`), read
+* like the page's data: in the draft the URL names, for a member. The studio shows it, while the
+* page's `.md` URL always reads Live. `markdown` is null when the layout declares none.
+*/
+async function createLayoutMarkdownDataResponse(options, request, pathname) {
+	const located = await locateRequest(request, options, pathname);
+	const app = await options.getCamoxApp?.();
+	const match = app && matchDerivedLayout(app.getLayouts(), located.path);
+	if (!match || matchLocalizedRoute(located.path)?.kind !== "page") return new Response("Not found", { status: 404 });
+	const { project, clearAuthCookie } = await resolveRequestMember(request, options);
+	const headers = {
+		...isPrivateRender(request, options) ? { "Cache-Control": "private, no-store" } : {},
+		Vary: "Cookie",
+		...clearAuthCookie ? { "Set-Cookie": buildClearServerAuthCookieHeader() } : {}
+	};
+	try {
+		const markdown = await buildLayoutMarkdown(options, match, located.locale, {
+			pathname,
+			url: absoluteUrl(request, options)(pathname)
+		}, {
+			member: project !== void 0,
+			authCookieHeader: getServerAuthCookieHeader(request.headers),
+			requestedDraft: getRequestDraftId(request, options)
+		});
+		return Response.json({ markdown }, { headers });
+	} catch (error) {
+		if (isNotFoundError(error)) return new Response("Not found", {
+			status: 404,
+			headers
+		});
+		throw error;
+	}
 }
 async function createDerivedResponse(options, pathname, located, request, { dataOnly = false, singletonOnly = false } = {}) {
 	const app = await options.getCamoxApp?.();
@@ -1337,8 +1404,10 @@ async function handleCamoxRequest(request, options = {}) {
 	if (match.kind === "llms-txt") return createLlmsTxtResponse(request, options);
 	if (match.kind === "routes") return createRoutesResponse(request, options);
 	if (match.kind === "data") {
-		const targetPathname = normalizePagePath(new URL(request.url).searchParams.get("path"));
+		const { searchParams } = new URL(request.url);
+		const targetPathname = normalizePagePath(searchParams.get("path"));
 		if (matchRuntimeOwnedRoute(targetPathname)) return new Response("Not found", { status: 404 });
+		if (searchParams.has("markdown")) return createLayoutMarkdownDataResponse(options, request, targetPathname);
 		return respondInLocale(options, request, targetPathname, { dataOnly: true });
 	}
 	if (isPreviewHandoff(request, options) && match.kind === "page") return createPreviewHandoffResponse({

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

@@ -2,9 +2,12 @@ import { AuthContext } from "../../../lib/auth.js";
 import { useCurrentDraftId, useDraftScope } from "../../../lib/draft-scope.js";
 import { useNavigate } from "../../navigation/navigation.js";
 import { reads, useReadQuery } from "../../../lib/studio-reads.js";
+import { cn } from "../../../lib/utils.js";
+import { BOTTOM_CARD_EDGES, CARD_BODY_EDGES, SIDEBAR_GUTTER } from "../../preview/components/SidebarStack.js";
 import { draftLabel } from "../draftLabel.js";
 import { FollowAgentContext } from "../followAgentContext.js";
 import { useThread } from "../../../lib/use-thread.js";
+import { Squareling } from "./Squareling.js";
 import { ThreadComposer } from "./ThreadComposer.js";
 import { ThreadMessages } from "./ThreadMessages.js";
 import { c } from "react/compiler-runtime";
@@ -20,64 +23,54 @@ import { EMPTY_THREAD_VIEW } from "@camox/api-contract/threads";
 * When the Live thread starts a draft, the studio enters it with the thread.
 */
 function ChatSidebar(t0) {
-	const $ = c(5);
+	const $ = c(6);
 	const { hidden: t1 } = t0;
 	const hidden = t1 === void 0 ? false : t1;
 	let t2;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = { width: 265 };
-		$[0] = t2;
-	} else t2 = $[0];
 	let t3;
 	let t4;
-	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-		t3 = /* @__PURE__ */ jsxs("header", {
-			className: "border-border box-content flex h-8 min-w-0 items-center gap-2 border-b px-2 py-2",
-			children: [/* @__PURE__ */ jsx(CamoxMark, {}), /* @__PURE__ */ jsx("h2", {
+	let t5;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = cn("absolute inset-y-0 right-0 z-10 flex flex-col py-2 max-md:hidden", SIDEBAR_GUTTER);
+		t3 = { width: 265 };
+		t4 = /* @__PURE__ */ jsxs("header", {
+			className: cn("bg-background flex h-11 min-w-0 shrink-0 items-center justify-center gap-2 px-3", BOTTOM_CARD_EDGES),
+			children: [/* @__PURE__ */ jsx(Squareling, {
+				status: "idle",
+				className: "size-5"
+			}), /* @__PURE__ */ jsx("h2", {
 				className: "truncate text-sm font-medium",
-				children: "Chat"
+				children: "Agent"
 			})]
 		});
-		t4 = /* @__PURE__ */ jsx(CurrentThread, {});
+		t5 = /* @__PURE__ */ jsx("div", {
+			className: cn("bg-background flex min-h-0 flex-1 flex-col", CARD_BODY_EDGES),
+			children: /* @__PURE__ */ jsx(CurrentThread, {})
+		});
+		$[0] = t2;
 		$[1] = t3;
 		$[2] = t4;
+		$[3] = t5;
 	} else {
+		t2 = $[0];
 		t3 = $[1];
 		t4 = $[2];
+		t5 = $[3];
 	}
-	let t5;
-	if ($[3] !== hidden) {
-		t5 = /* @__PURE__ */ jsxs("aside", {
-			"aria-label": "Chat",
+	let t6;
+	if ($[4] !== hidden) {
+		t6 = /* @__PURE__ */ jsxs("aside", {
+			"aria-label": "Agent",
 			"data-chat-sidebar": true,
 			hidden,
-			className: "bg-background flex shrink-0 flex-col border-l-2 max-md:hidden",
-			style: t2,
-			children: [t3, t4]
-		});
-		$[3] = hidden;
-		$[4] = t5;
-	} else t5 = $[4];
-	return t5;
-}
-/** Camox's logo, beside the heading: the agent is Camox. */
-function CamoxMark() {
-	const $ = c(1);
-	let t0;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = /* @__PURE__ */ jsx("svg", {
-			"aria-hidden": true,
-			viewBox: "0 0 191.03 132",
-			className: "size-5 shrink-0",
-			xmlns: "http://www.w3.org/2000/svg",
-			children: /* @__PURE__ */ jsx("path", {
-				d: "M0 22.55A22.55 22.55 0 0 1 22.55 0L90.19 0A5.32 5.32 0 0 1 95.52 5.32L95.52 36.48L36.48 36.48L36.48 95.52L5.32 95.52A5.32 5.32 0 0 1 0 90.19ZM95.52 36.48L181.48 36.48A5.32 5.32 0 0 1 186.01 44.61L138.61 121.31A22.55 22.55 0 0 1 119.43 132L41.81 132A5.32 5.32 0 0 1 36.48 126.68L36.48 95.52L95.52 95.52Z",
-				fill: "#00BC7D"
-			})
+			className: t2,
+			style: t3,
+			children: [t4, t5]
 		});
-		$[0] = t0;
-	} else t0 = $[0];
-	return t0;
+		$[4] = hidden;
+		$[5] = t6;
+	} else t6 = $[5];
+	return t6;
 }
 function CurrentThread() {
 	const $ = c(15);
@@ -156,7 +149,7 @@ function CurrentThread() {
 	return t6;
 }
 function Thread(t0) {
-	const $ = c(31);
+	const $ = c(30);
 	const { apiUrl, projectId, draftId, carried, onEnterDraft } = t0;
 	let t1;
 	if ($[0] !== carried || $[1] !== onEnterDraft) {
@@ -204,68 +197,65 @@ function Thread(t0) {
 		$[12] = t5;
 	} else t5 = $[12];
 	const sendFollowing = t5;
-	const t6 = draftId !== null;
-	let t7;
-	if ($[13] !== sending || $[14] !== t6 || $[15] !== view) {
-		t7 = {
+	let t6;
+	if ($[13] !== sending || $[14] !== view) {
+		t6 = {
 			view,
-			sending,
-			showSenders: t6
+			sending
 		};
 		$[13] = sending;
-		$[14] = t6;
-		$[15] = view;
-		$[16] = t7;
-	} else t7 = $[16];
-	const messages = t7;
+		$[14] = view;
+		$[15] = t6;
+	} else t6 = $[15];
+	const messages = t6;
 	const continuedIn = draftId === null ? view.continuedIn?.draftId : void 0;
-	let t8;
-	if ($[17] !== continuedIn || $[18] !== messages || $[19] !== projectId) {
-		t8 = continuedIn ? /* @__PURE__ */ jsx(ContinuedInMessages, {
+	let t7;
+	if ($[16] !== continuedIn || $[17] !== messages || $[18] !== projectId) {
+		t7 = continuedIn ? /* @__PURE__ */ jsx(ContinuedInMessages, {
 			...messages,
 			projectId,
 			draftId: continuedIn
 		}) : /* @__PURE__ */ jsx(ThreadMessages, { ...messages });
-		$[17] = continuedIn;
-		$[18] = messages;
-		$[19] = projectId;
-		$[20] = t8;
-	} else t8 = $[20];
-	let t9;
-	if ($[21] !== error) {
-		t9 = error && /* @__PURE__ */ jsx("p", {
+		$[16] = continuedIn;
+		$[17] = messages;
+		$[18] = projectId;
+		$[19] = t7;
+	} else t7 = $[19];
+	let t8;
+	if ($[20] !== error) {
+		t8 = error && /* @__PURE__ */ jsx("p", {
 			role: "alert",
 			className: "text-destructive px-2 pt-2 text-sm",
 			children: error
 		});
-		$[21] = error;
-		$[22] = t9;
-	} else t9 = $[22];
-	let t10;
-	if ($[23] !== sendFollowing || $[24] !== stop || $[25] !== view.running) {
-		t10 = /* @__PURE__ */ jsx(ThreadComposer, {
+		$[20] = error;
+		$[21] = t8;
+	} else t8 = $[21];
+	let t9;
+	if ($[22] !== sendFollowing || $[23] !== stop || $[24] !== view.running) {
+		t9 = /* @__PURE__ */ jsx(ThreadComposer, {
 			onSend: sendFollowing,
 			onStop: stop,
 			running: view.running
 		});
-		$[23] = sendFollowing;
-		$[24] = stop;
-		$[25] = view.running;
-		$[26] = t10;
-	} else t10 = $[26];
-	let t11;
-	if ($[27] !== t10 || $[28] !== t8 || $[29] !== t9) {
-		t11 = /* @__PURE__ */ jsxs(Fragment, { children: [
+		$[22] = sendFollowing;
+		$[23] = stop;
+		$[24] = view.running;
+		$[25] = t9;
+	} else t9 = $[25];
+	let t10;
+	if ($[26] !== t7 || $[27] !== t8 || $[28] !== t9) {
+		t10 = /* @__PURE__ */ jsxs(Fragment, { children: [
+			t7,
 			t8,
-			t9,
-			t10
+			t9
 		] });
-		$[27] = t10;
-		$[28] = t8;
-		$[29] = t9;
-		$[30] = t11;
-	} else t11 = $[30];
-	return t11;
+		$[26] = t7;
+		$[27] = t8;
+		$[28] = t9;
+		$[29] = t10;
+	} else t10 = $[29];
+	return t10;
 }
 /**
 * A fresh Live thread's messages, linking to the draft the editor's previous one continued in,

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

@@ -151,7 +151,7 @@ const Navbar = (t0) => {
 	let t11;
 	if ($[24] !== t9) {
 		t11 = /* @__PURE__ */ jsxs("nav", {
-			className: "bg-background relative flex items-center justify-between gap-4 border-b-2 px-2 py-2",
+			className: "bg-background relative flex items-center justify-between gap-4 border-b px-2 py-2",
 			children: [t9, t10]
 		});
 		$[24] = t9;

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

@@ -0,0 +1,114 @@
+import { cn } from "../../../lib/utils.js";
+import { c } from "react/compiler-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/features/studio/components/Squareling.tsx
+/**
+* Camox's agent, drawn from the logo's shapes: its square, the soft corner, and the knockout as
+* eyes, looking right like the mark. Its face and motion say what the agent is doing. The
+* animations live in `studio.css`.
+*/
+function Squareling(t0) {
+	const $ = c(17);
+	const { status, className } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = cn("squareling shrink-0 overflow-visible", className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx("path", {
+			d: "M20 12H80Q88 12 88 20V64Q88 88 64 88H20Q12 88 12 80V20Q12 12 20 12Z",
+			className: "fill-emerald-500"
+		});
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] !== status) {
+		t3 = (status === "idle" || status === "thinking") && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("rect", {
+			className: "squareling-eye",
+			x: "50",
+			y: "36",
+			width: "11",
+			height: "17"
+		}), /* @__PURE__ */ jsx("rect", {
+			className: "squareling-eye",
+			x: "69",
+			y: "36",
+			width: "11",
+			height: "17"
+		})] });
+		$[3] = status;
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== status) {
+		t4 = status === "acting" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("rect", {
+			x: "50",
+			y: "44",
+			width: "11",
+			height: "6"
+		}), /* @__PURE__ */ jsx("rect", {
+			x: "69",
+			y: "44",
+			width: "11",
+			height: "6"
+		})] });
+		$[5] = status;
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[7] !== status) {
+		t5 = status === "fixing" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("rect", {
+			x: "50",
+			y: "36",
+			width: "11",
+			height: "17"
+		}), /* @__PURE__ */ jsx("rect", {
+			x: "69",
+			y: "44",
+			width: "11",
+			height: "6"
+		})] });
+		$[7] = status;
+		$[8] = t5;
+	} else t5 = $[8];
+	let t6;
+	if ($[9] !== t3 || $[10] !== t4 || $[11] !== t5) {
+		t6 = /* @__PURE__ */ jsxs("g", {
+			className: "squareling-body",
+			children: [t2, /* @__PURE__ */ jsxs("g", {
+				className: "squareling-eyes fill-neutral-950",
+				children: [
+					t3,
+					t4,
+					t5
+				]
+			})]
+		});
+		$[9] = t3;
+		$[10] = t4;
+		$[11] = t5;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== status || $[14] !== t1 || $[15] !== t6) {
+		t7 = /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 100 100",
+			"aria-hidden": true,
+			"data-squareling": status,
+			className: t1,
+			children: t6
+		});
+		$[13] = status;
+		$[14] = t1;
+		$[15] = t6;
+		$[16] = t7;
+	} else t7 = $[16];
+	return t7;
+}
+
+//#endregion
+export { Squareling };