camox 0.35.0 → 0.36.1

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

@@ -8,25 +8,26 @@ import { Button } from "@camox/ui/button";
 import { Monitor, Smartphone, Tablet, X } from "lucide-react";
 import { Label } from "@camox/ui/label";
 import { ButtonGroup } from "@camox/ui/button-group";
-import { Switch } from "@camox/ui/switch";
 import * as Tooltip$1 from "@camox/ui/tooltip";
+import { Switch } from "@camox/ui/switch";
 import { FloatingToolbar } from "@camox/ui/floating-toolbar";
 import { Toggle } from "@camox/ui/toggle";
 
 //#region src/features/preview/components/PreviewToolbar.tsx
 const PreviewToolbar = (t0) => {
-	const $ = c(68);
-	if ($[0] !== "68e35a20462160afd6c2aeaffaf03edcd93240318bca212e17001e624c1d829c") {
-		for (let $i = 0; $i < 68; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "68e35a20462160afd6c2aeaffaf03edcd93240318bca212e17001e624c1d829c";
+	const $ = c(74);
+	if ($[0] !== "88648f3760cc744b4acae6ce6f9f000de00b69d7e7f65268463e98389ba90d90") {
+		for (let $i = 0; $i < 74; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "88648f3760cc744b4acae6ce6f9f000de00b69d7e7f65268463e98389ba90d90";
 	}
-	const { onEditModeChange } = t0;
+	const { onEditModeChange, pageStatus, hasLiveVersion } = t0;
 	const isEditMode = useSelector(previewStore, _temp);
 	const isToolbarHidden = useSelector(previewStore, _temp2);
-	const actions = useSelector(actionsStore, _temp3);
-	const viewportMode = useSelector(previewStore, _temp4);
+	const peekedBlock = useSelector(previewStore, _temp3);
+	const actions = useSelector(actionsStore, _temp4);
+	const viewportMode = useSelector(previewStore, _temp5);
 	const editModeActionId = isEditMode ? "exit-edit-mode" : "enter-edit-mode";
-	if (isToolbarHidden) return null;
+	if (isToolbarHidden || peekedBlock) return null;
 	let t1;
 	if ($[1] !== onEditModeChange) {
 		t1 = (checked) => {
@@ -70,7 +71,7 @@ const PreviewToolbar = (t0) => {
 	let t5;
 	if ($[11] !== t2 || $[12] !== t4) {
 		t5 = /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-2 px-2",
+			className: "flex shrink-0 items-center gap-2 px-2",
 			children: [t2, t4]
 		});
 		$[11] = t2;
@@ -246,65 +247,88 @@ const PreviewToolbar = (t0) => {
 		$[53] = t30;
 	} else t30 = $[53];
 	let t31;
-	if ($[54] !== isEditMode) {
-		t31 = /* @__PURE__ */ jsx(Button, {
+	if ($[54] !== hasLiveVersion || $[55] !== pageStatus) {
+		t31 = pageStatus && /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "outline",
+			disabled: pageStatus === "published" || !hasLiveVersion,
+			onClick: _temp6,
+			children: "View live site"
+		});
+		$[54] = hasLiveVersion;
+		$[55] = pageStatus;
+		$[56] = t31;
+	} else t31 = $[56];
+	let t32;
+	if ($[57] !== isEditMode) {
+		t32 = /* @__PURE__ */ jsx(Button, {
 			type: "button",
 			variant: "ghost",
 			size: "icon",
 			disabled: isEditMode,
-			onClick: _temp5,
+			onClick: _temp7,
 			"aria-label": "Hide toolbar",
 			className: "text-muted-foreground"
 		});
-		$[54] = isEditMode;
-		$[55] = t31;
-	} else t31 = $[55];
-	let t32;
-	if ($[56] === Symbol.for("react.memo_cache_sentinel")) {
-		t32 = /* @__PURE__ */ jsx(X, {});
-		$[56] = t32;
-	} else t32 = $[56];
+		$[57] = isEditMode;
+		$[58] = t32;
+	} else t32 = $[58];
 	let t33;
-	if ($[57] !== t31) {
-		t33 = /* @__PURE__ */ jsx(Tooltip$1.TooltipTrigger, {
-			render: t31,
-			children: t32
-		});
-		$[57] = t31;
-		$[58] = t33;
-	} else t33 = $[58];
-	let t34;
 	if ($[59] === Symbol.for("react.memo_cache_sentinel")) {
-		t34 = /* @__PURE__ */ jsx(Tooltip$1.TooltipContent, { children: "Hide toolbar" });
-		$[59] = t34;
-	} else t34 = $[59];
+		t33 = /* @__PURE__ */ jsx(X, {});
+		$[59] = t33;
+	} else t33 = $[59];
+	let t34;
+	if ($[60] !== t32) {
+		t34 = /* @__PURE__ */ jsx(Tooltip$1.TooltipTrigger, {
+			render: t32,
+			children: t33
+		});
+		$[60] = t32;
+		$[61] = t34;
+	} else t34 = $[61];
 	let t35;
-	if ($[60] !== t33) {
-		t35 = /* @__PURE__ */ jsxs(Tooltip$1.Tooltip, { children: [t33, t34] });
-		$[60] = t33;
-		$[61] = t35;
-	} else t35 = $[61];
+	if ($[62] === Symbol.for("react.memo_cache_sentinel")) {
+		t35 = /* @__PURE__ */ jsx(Tooltip$1.TooltipContent, { children: "Hide toolbar" });
+		$[62] = t35;
+	} else t35 = $[62];
 	let t36;
-	if ($[62] !== t30 || $[63] !== t35) {
-		t36 = /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-2",
-			children: [t30, t35]
-		});
-		$[62] = t30;
-		$[63] = t35;
+	if ($[63] !== t34) {
+		t36 = /* @__PURE__ */ jsxs(Tooltip$1.Tooltip, { children: [t34, t35] });
+		$[63] = t34;
 		$[64] = t36;
 	} else t36 = $[64];
 	let t37;
-	if ($[65] !== t36 || $[66] !== t5) {
-		t37 = /* @__PURE__ */ jsxs(FloatingToolbar, {
-			className: "bottom-2 justify-between gap-8 transition-none",
-			children: [t5, t36]
+	if ($[65] !== t31 || $[66] !== t36) {
+		t37 = /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [t31, t36]
 		});
-		$[65] = t36;
-		$[66] = t5;
+		$[65] = t31;
+		$[66] = t36;
 		$[67] = t37;
 	} else t37 = $[67];
-	return t37;
+	let t38;
+	if ($[68] !== t30 || $[69] !== t37) {
+		t38 = /* @__PURE__ */ jsxs("div", {
+			className: "flex shrink-0 items-center gap-8 self-stretch",
+			children: [t30, t37]
+		});
+		$[68] = t30;
+		$[69] = t37;
+		$[70] = t38;
+	} else t38 = $[70];
+	let t39;
+	if ($[71] !== t38 || $[72] !== t5) {
+		t39 = /* @__PURE__ */ jsxs(FloatingToolbar, {
+			className: "bottom-2 w-max justify-between gap-8 transition-none",
+			children: [t5, t38]
+		});
+		$[71] = t38;
+		$[72] = t5;
+		$[73] = t39;
+	} else t39 = $[73];
+	return t39;
 };
 function _temp(state) {
 	return state.context.isEditMode;
@@ -313,12 +337,18 @@ function _temp2(state_0) {
 	return state_0.context.isToolbarHidden;
 }
 function _temp3(state_1) {
-	return state_1.context.actions;
+	return state_1.context.peekedBlock;
 }
 function _temp4(state_2) {
-	return state_2.context.viewportMode;
+	return state_2.context.actions;
+}
+function _temp5(state_3) {
+	return state_3.context.viewportMode;
+}
+function _temp6() {
+	return previewStore.send({ type: "viewLivePage" });
 }
-function _temp5() {
+function _temp7() {
 	return previewStore.send({ type: "hideToolbar" });
 }
 

package/dist/features/preview/previewStore.js

@@ -26,7 +26,6 @@ const previewStore = createStore({
 	context: {
 		isEditMode: false,
 		isToolbarHidden: false,
-		isSidebarOpen: true,
 		isPageEditorSidebarOpen: false,
 		isAddBlockSidebarOpen: false,
 		addBlockSource: null,
@@ -64,17 +63,25 @@ const previewStore = createStore({
 			return {
 				...context,
 				isEditMode: true,
-				isSidebarOpen: true
+				isToolbarHidden: false
 			};
 		},
 		hideToolbar: (context) => ({
 			...context,
 			isToolbarHidden: true
 		}),
-		toggleSidebar: (context) => ({
-			...context,
-			isSidebarOpen: true
-		}),
+		viewLivePage: (context, _, enqueue) => {
+			enqueue.effect(() => {
+				if (context.isEditMode) trackClientEvent("edit_mode_toggled", { enabled: false });
+				toast("Viewing live version of the site");
+			});
+			return {
+				...context,
+				isEditMode: false,
+				isToolbarHidden: true,
+				previewSource: "live"
+			};
+		},
 		setViewportMode: (context, event) => {
 			if (context.viewportMode === event.mode) return context;
 			return {

package/dist/features/routes/pageRuntime.js

@@ -1,6 +1,244 @@
-import "../../lib/telemetry.js";
+import { trackEvent } from "../../lib/telemetry.js";
 import { queryKeys } from "@camox/api-contract/query-keys";
 import { createORPCClient } from "@orpc/client";
 import { RPCLink } from "@orpc/client/fetch";
 
-export {  };
+//#region src/features/routes/pageRuntime.ts
+function parseQuality(part) {
+	const match = part.match(/;\s*q=([0-9.]+)/);
+	return match ? parseFloat(match[1]) : 1;
+}
+function prefersMarkdown(accept) {
+	let markdownQ = -1;
+	let htmlQ = -1;
+	for (const part of accept.split(",")) {
+		const trimmed = part.trim();
+		if (trimmed.startsWith("text/markdown")) markdownQ = parseQuality(trimmed);
+		else if (trimmed.startsWith("text/html")) htmlQ = parseQuality(trimmed);
+	}
+	return markdownQ > 0 && markdownQ >= htmlQ;
+}
+function createServerApiClient(apiUrl, environmentName, options) {
+	const headers = {};
+	if (environmentName) headers["x-environment-name"] = environmentName;
+	return createORPCClient(new RPCLink({
+		url: `${apiUrl}/rpc`,
+		headers,
+		fetch: (request, init) => {
+			if (options?.authCookieHeader && request instanceof Request) request.headers.set("Better-Auth-Cookie", options.authCookieHeader);
+			return fetch(request, init);
+		}
+	}));
+}
+function getErrorDetails(error) {
+	if (!error || typeof error !== "object") return { message: String(error) };
+	const errorRecord = error;
+	return {
+		code: typeof errorRecord.code === "string" ? errorRecord.code : void 0,
+		status: typeof errorRecord.status === "number" ? errorRecord.status : void 0,
+		message: error instanceof Error ? error.message : typeof errorRecord.message === "string" ? errorRecord.message : ""
+	};
+}
+function isAuthSessionError(error) {
+	const { code, status, message } = getErrorDetails(error);
+	if (code === "UNAUTHORIZED" || code === "FORBIDDEN") return true;
+	if (status === 401 || status === 403) return true;
+	const lowerMessage = message.toLowerCase();
+	return lowerMessage.includes("unauthorized") || lowerMessage.includes("forbidden") || lowerMessage.includes("invalid session") || lowerMessage.includes("session expired") || lowerMessage.includes("expired session");
+}
+function isNotFoundError(error) {
+	const { code, status } = getErrorDetails(error);
+	return code === "NOT_FOUND" || status === 404;
+}
+function visitForFileIds(value, ids) {
+	if (value == null || typeof value !== "object") return;
+	if ("_fileId" in value && typeof value._fileId === "number") {
+		ids.add(value._fileId);
+		return;
+	}
+	if (Array.isArray(value)) {
+		for (const item of value) visitForFileIds(item, ids);
+		return;
+	}
+	for (const child of Object.values(value)) visitForFileIds(child, ids);
+}
+function collectFileIdsFromContent(content, ids) {
+	for (const value of Object.values(content)) visitForFileIds(value, ids);
+}
+function seedBlockCaches(queryClient, pageData, source = "draft") {
+	const filesById = new Map(pageData.files.map((f) => [f.id, f]));
+	for (const block of pageData.blocks) {
+		const blockItems = pageData.repeatableItems.filter((i) => i.blockId === block.id);
+		const fileIds = /* @__PURE__ */ new Set();
+		collectFileIdsFromContent(block.content, fileIds);
+		for (const item of blockItems) collectFileIdsFromContent(item.content, fileIds);
+		const blockFiles = [...fileIds].map((id) => filesById.get(id)).filter((f) => f != null);
+		queryClient.setQueryData(queryKeys.blocks.get(block.id, source), {
+			block,
+			repeatableItems: blockItems,
+			files: blockFiles
+		});
+		for (const file of blockFiles) queryClient.setQueryData(queryKeys.files.get(file.id), file);
+	}
+}
+async function loadCamoxPage({ apiUrl, authCookieHeader, environmentName, pathname, projectSlug, queryClient, source }) {
+	const serverApi = createServerApiClient(apiUrl, environmentName, { authCookieHeader });
+	return queryClient.ensureQueryData({
+		queryKey: queryKeys.pages.getByPath(pathname, source),
+		queryFn: async () => {
+			const [data, pagesList] = await Promise.all([serverApi.pages.getByPath({
+				path: pathname,
+				projectSlug,
+				source
+			}), serverApi.pages.listBySlug({ projectSlug }).catch(() => null)]);
+			seedBlockCaches(queryClient, data, source);
+			queryClient.setQueryData(queryKeys.pages.getByPath(pathname, source), {
+				page: data.page,
+				layout: data.layout,
+				projectName: data.projectName,
+				project: data.project
+			});
+			if (source === "live") {
+				seedBlockCaches(queryClient, data, "draft");
+				queryClient.setQueryData(queryKeys.pages.getByPath(pathname, "draft"), {
+					page: data.page,
+					layout: data.layout,
+					projectName: data.projectName,
+					project: data.project
+				});
+			}
+			if (pagesList) queryClient.setQueryData(queryKeys.pages.list, pagesList);
+			return {
+				page: data.page,
+				layout: data.layout,
+				projectName: data.projectName,
+				project: data.project
+			};
+		},
+		staleTime: Infinity
+	});
+}
+async function loadLivePage(options) {
+	return loadCamoxPage({
+		...options,
+		source: "live"
+	});
+}
+function buildCamoxPageLoaderData(apiUrl, page, origin) {
+	return {
+		page,
+		origin,
+		faviconUrl: `${apiUrl}/favicons/${page.project.id}?v=${page.project.updatedAt}`
+	};
+}
+async function loadCamoxPageForRequest({ apiUrl, authCookieHeader, environmentName, origin, pathname, projectSlug, queryClient }) {
+	const loadOptions = {
+		apiUrl,
+		environmentName,
+		pathname,
+		projectSlug,
+		queryClient
+	};
+	if (!authCookieHeader) return {
+		data: buildCamoxPageLoaderData(apiUrl, await loadLivePage(loadOptions), origin),
+		shouldClearAuthCookie: false,
+		source: "live"
+	};
+	try {
+		return {
+			data: buildCamoxPageLoaderData(apiUrl, await loadCamoxPage({
+				...loadOptions,
+				authCookieHeader,
+				source: "draft"
+			}), origin),
+			shouldClearAuthCookie: false,
+			source: "draft"
+		};
+	} catch (error) {
+		if (!isAuthSessionError(error)) throw error;
+		console.warn("[camox] Ignoring stale camox_auth_cookie and retrying published page load.");
+		return {
+			data: buildCamoxPageLoaderData(apiUrl, await loadLivePage(loadOptions), origin),
+			shouldClearAuthCookie: true,
+			source: "live"
+		};
+	}
+}
+async function createMarkdownResponse({ apiUrl, environmentName, pathname, projectSlug, request }) {
+	if (!prefersMarkdown(request.headers.get("Accept") ?? "")) return null;
+	const api = createServerApiClient(apiUrl, environmentName);
+	const requestPathname = pathname ?? new URL(request.url).pathname;
+	try {
+		const page = await api.pages.getByPath({
+			path: requestPathname,
+			projectSlug,
+			source: "live"
+		});
+		const { markdown } = await api.blocks.getPageMarkdown({ pageId: page.page.id });
+		if (!markdown) return null;
+		trackEvent("markdown_served", {
+			pathname: requestPathname,
+			projectId: page.page.projectId,
+			projectName: page.projectName
+		});
+		return new Response(markdown, { headers: { "Content-Type": "text/markdown; charset=utf-8" } });
+	} catch {
+		return null;
+	}
+}
+function buildCamoxPageHead(camoxApp, loaderData) {
+	if (!loaderData) return {};
+	const { page, origin, faviconUrl } = loaderData;
+	const pageMetaTitle = page.page.metaTitle ?? page.page.pathSegment;
+	const meta = [];
+	let title = pageMetaTitle;
+	if (page.layout) {
+		const layout = camoxApp.getLayoutById(page.layout.layoutId);
+		if (layout) {
+			title = layout._internal.buildMetaTitle({
+				pageMetaTitle,
+				projectName: page.projectName,
+				pageFullPath: page.page.fullPath
+			});
+			meta.push({ title });
+		}
+	}
+	if (page.page.metaDescription) meta.push({
+		name: "description",
+		content: page.page.metaDescription
+	});
+	const ogImageParams = new URLSearchParams({
+		...page.layout && { layoutId: page.layout.layoutId },
+		title: pageMetaTitle,
+		...page.page.metaDescription && { description: page.page.metaDescription },
+		...page.projectName && { projectName: page.projectName }
+	});
+	const ogImageUrl = page.page.customOgImageUrl ?? `${origin}/og?${ogImageParams.toString()}`;
+	meta.push({
+		property: "og:title",
+		content: title
+	}, {
+		property: "og:image",
+		content: ogImageUrl
+	}, {
+		property: "og:image:width",
+		content: "1200"
+	}, {
+		property: "og:image:height",
+		content: "630"
+	});
+	if (page.page.metaDescription) meta.push({
+		property: "og:description",
+		content: page.page.metaDescription
+	});
+	return {
+		meta,
+		links: [{
+			rel: "icon",
+			href: faviconUrl
+		}]
+	};
+}
+
+//#endregion
+export { buildCamoxPageHead, createMarkdownResponse, createServerApiClient, isNotFoundError, loadCamoxPageForRequest };

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

@@ -1,6 +1,14 @@
+import { CamoxApp } from "../../core/createApp.js";
+import { CamoxDocument } from "../../core/defineDocument.js";
+import { StudioRenderInput } from "./studioApp.js";
 import { UseHeadInput } from "unhead/types";
 
 //#region src/features/runtime/runtime.d.ts
+type RuntimeRouteKind = "data" | "health" | "og" | "page" | "registry" | "sitemap" | "studio" | "studio-content" | "studio-nested";
+interface RuntimeRouteMatch {
+  kind: RuntimeRouteKind;
+  pathname: string;
+}
 interface LayoutIdentity {
   blockIds: number[];
   id: number;
@@ -21,5 +29,26 @@ interface PageRenderInput {
   runtimeBasePath: string;
   source: "live" | "draft";
 }
+interface RuntimeOptions {
+  apiUrl?: string;
+  authenticationUrl?: string;
+  environmentName?: string;
+  pageClientEntryUrl?: string;
+  studioClientEntryUrl?: string;
+  getCamoxApp?: () => Promise<CamoxApp>;
+  getDocument?: () => Promise<CamoxDocument>;
+  projectSlug?: string;
+  renderPage?: (input: PageRenderInput) => Promise<string>;
+  renderStudio?: (input: StudioRenderInput) => Promise<string>;
+  runtimeBasePath?: string;
+  stylesheetUrl?: string;
+}
+declare function getRuntimePathname(url: string, runtimeBasePath?: string): string | null;
+declare function matchRuntimeRoute(pathname: string): RuntimeRouteMatch;
+declare function createPageHeadInput(head: {
+  meta?: Array<Record<string, string>>;
+  links?: Array<Record<string, string>>;
+}): UseHeadInput;
+declare function handleCamoxRequest(request: Request, options?: RuntimeOptions): Promise<Response | null>;
 //#endregion
-export { PageRenderInput };
+export { LayoutIdentity, PageRenderInput, RuntimeOptions, RuntimeRouteKind, RuntimeRouteMatch, createPageHeadInput, getRuntimePathname, handleCamoxRequest, matchRuntimeRoute };