camox 0.48.0 → 0.51.0

package/dist/features/preview/previewConstants.js

@@ -1,12 +1,6 @@
 //#region src/features/preview/previewConstants.ts
-const TOGGLE_CANVAS_SHORTCUT = {
-	key: "Enter",
-	withMeta: true
-};
-const SHOW_WHOLE_CANVAS_SHORTCUT = {
-	key: "Escape",
-	withMeta: true
-};
+const TOGGLE_CANVAS_SHORTCUT = "Mod+Enter";
+const SHOW_WHOLE_CANVAS_SHORTCUT = "Mod+Escape";
 
 //#endregion
 export { SHOW_WHOLE_CANVAS_SHORTCUT, TOGGLE_CANVAS_SHORTCUT };

package/dist/features/preview/usePreviewViewportActions.js

@@ -27,7 +27,7 @@ function _temp10() {
 			groupLabel: "Website",
 			checkIfAvailable: _temp,
 			execute: _temp2,
-			shortcut: { key: "m" }
+			shortcut: "M"
 		},
 		{
 			id: "set-viewport-full",

package/dist/features/provider/AuthenticatedCamoxProvider.js

@@ -1,13 +1,13 @@
 import { AuthContext, useAuthActions } from "../../lib/auth.js";
 import { useDraftScope } from "../../lib/draft-scope.js";
 import { reads, useReadQuery, useStudioCache } from "../../lib/studio-reads.js";
+import { useAdminShortcuts } from "./useAdminShortcuts.js";
 import { useApplyTheme, useThemeActions } from "../studio/useTheme.js";
 import { usePreviewPagesActions, useShowCanvasAction } from "../preview/CamoxPreview.js";
 import { useProjectRoom } from "../../lib/use-project-room.js";
 import { useNavbarActions } from "../studio/components/Navbar.js";
 import { draftNoticeMessage } from "../studio/draftNotice.js";
 import { CommandPalette, useCommandPaletteActions } from "./components/CommandPalette.js";
-import { useAdminShortcuts } from "./useAdminShortcuts.js";
 import { c } from "react/compiler-runtime";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/features/provider/components/CommandPalette.js

@@ -1,5 +1,5 @@
 import { actionsStore } from "../actionsStore.js";
-import { formatShortcut } from "../../../lib/utils.js";
+import { formatShortcut } from "../../../lib/shortcuts.js";
 import { studioStore } from "../../studio/studioStore.js";
 import { c } from "react/compiler-runtime";
 import * as React from "react";
@@ -249,10 +249,7 @@ function _temp7() {
 			groupLabel: "Invisible",
 			checkIfAvailable: _temp4,
 			execute: _temp5,
-			shortcut: {
-				key: "k",
-				withMeta: true
-			}
+			shortcut: "Mod+K"
 		}
 	});
 	return _temp6;

package/dist/features/provider/signInShortcut.js

@@ -1,5 +1,4 @@
 import { useSignInRedirect } from "../../lib/auth.js";
-import { TOGGLE_CANVAS_SHORTCUT } from "../preview/previewConstants.js";
 import { c } from "react/compiler-runtime";
 import * as React from "react";
 
@@ -28,7 +27,7 @@ function useSignInShortcut(enabled) {
 		t0 = () => {
 			if (!enabled) return;
 			const handleKeyDown = (event) => {
-				if (event.key !== TOGGLE_CANVAS_SHORTCUT.key || !(event.metaKey || event.ctrlKey)) return;
+				if (event.key !== "Enter" || !(event.metaKey || event.ctrlKey)) return;
 				if (event.altKey || event.shiftKey || event.defaultPrevented || isTyping()) return;
 				event.preventDefault();
 				signIn();

package/dist/features/provider/useAdminShortcuts.js

@@ -1,75 +1,69 @@
 import { actionsStore } from "./actionsStore.js";
 import { checkIfInputFocused } from "../../lib/utils.js";
 import { c } from "react/compiler-runtime";
-import * as React from "react";
 import { useSelector } from "@xstate/store-react";
+import { parseHotkey, useHotkeys } from "@tanstack/react-hotkeys";
 
 //#region src/features/provider/useAdminShortcuts.tsx
+/** Listens for the shortcuts of the actions in the actionsStore, on the Studio's window. */
+function useAdminShortcuts() {
+	useActionShortcuts(typeof window === "undefined" ? null : window);
+}
 /**
-* Hook that listens for global keyboard shortcuts defined in the actionsStore
+* Runs the first available action whose shortcut is pressed in `win`, which may be a preview
+* iframe's window. Shortcuts no available action claims leave the key to the page.
 */
-function useAdminShortcuts() {
-	const $ = c(3);
+function useActionShortcuts(win) {
+	const $ = c(4);
 	const actions = useSelector(actionsStore, _temp);
 	let t0;
 	let t1;
-	if ($[0] !== actions) {
-		t0 = () => {
-			const handleKeyDown = (event) => {
-				const matchingAction = actions.find((action) => {
-					if (!action.shortcut) return false;
-					if (!action.checkIfAvailable()) return false;
-					const { key, withMeta, withAlt, withShift } = action.shortcut;
-					return (withAlt && key.length === 1 && /[a-z]/i.test(key) ? event.code === `Key${key.toUpperCase()}` : key.toLowerCase() === event.key.toLowerCase()) && !!withMeta === (event.metaKey || event.ctrlKey) && !!withAlt === event.altKey && !!withShift === event.shiftKey;
-				});
-				if (!matchingAction) return;
-				const shortcut = matchingAction.shortcut;
-				if (checkIfInputFocused()) {
-					if (shortcut.key !== "Escape" && !shortcut.withMeta && !shortcut.withAlt) return;
-					if (shortcut.key === "Backspace") return;
-				}
-				event.preventDefault();
-				event.stopPropagation();
-				if (shortcut.key === "Escape" && checkIfInputFocused()) document.activeElement.blur();
-				matchingAction.execute();
-			};
-			const handleCapturedKeyDown = (event_0) => {
-				if (event_0.key === "Escape") return;
-				handleKeyDown(event_0);
-			};
-			const handleEscape = (event_1) => {
-				if (event_1.key !== "Escape" || event_1.defaultPrevented) return;
-				handleKeyDown(event_1);
-			};
-			const handleMessage = (event_2) => {
-				if (event_2.data?.type === "executeAction") {
-					const { actionId } = event_2.data;
-					const action_0 = actions.find((a) => a.id === actionId);
-					if (action_0) action_0.execute();
+	if ($[0] !== actions || $[1] !== win) {
+		const shortcuts = [...new Set(actions.flatMap(_temp2))];
+		t0 = useHotkeys;
+		t1 = win ? shortcuts.map((shortcut) => {
+			const { key, ctrl, meta, alt } = parseHotkey(shortcut);
+			const escape = key === "Escape";
+			return {
+				hotkey: shortcut,
+				callback: (event) => {
+					if (escape && event.defaultPrevented) return;
+					const action_0 = findAvailableAction(shortcut);
+					if (!action_0) return;
+					event.preventDefault();
+					event.stopPropagation();
+					if (escape && checkIfInputFocused(win.document)) win.document.activeElement.blur();
+					action_0.execute();
+				},
+				options: {
+					target: escape ? win : win.document,
+					capture: !escape,
+					ignoreInputs: key === "Backspace" || !ctrl && !meta && !alt && !escape,
+					preventDefault: false,
+					stopPropagation: false,
+					conflictBehavior: "allow"
 				}
 			};
-			document.addEventListener("keydown", handleCapturedKeyDown, true);
-			window.addEventListener("keydown", handleEscape);
-			window.addEventListener("message", handleMessage);
-			return () => {
-				document.removeEventListener("keydown", handleCapturedKeyDown, true);
-				window.removeEventListener("keydown", handleEscape);
-				window.removeEventListener("message", handleMessage);
-			};
-		};
-		t1 = [actions];
+		}) : [];
 		$[0] = actions;
-		$[1] = t0;
-		$[2] = t1;
+		$[1] = win;
+		$[2] = t0;
+		$[3] = t1;
 	} else {
-		t0 = $[1];
-		t1 = $[2];
+		t0 = $[2];
+		t1 = $[3];
 	}
-	React.useEffect(t0, t1);
+	t0(t1);
+}
+function _temp2(action) {
+	return action.shortcut ?? [];
 }
 function _temp(state) {
 	return state.context.actions;
 }
+function findAvailableAction(shortcut) {
+	return actionsStore.getSnapshot().context.actions.find((action) => action.shortcut === shortcut && action.checkIfAvailable());
+}
 
 //#endregion
-export { useAdminShortcuts };
+export { useActionShortcuts, useAdminShortcuts };

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

@@ -218,25 +218,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 +344,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/publicCache.js

@@ -0,0 +1,83 @@
+import { prefersMarkdown } from "../routes/pageRuntime.js";
+
+//#region src/features/runtime/publicCache.ts
+/** How long the edge keeps a render. Live changing replaces its key long before. */
+const EDGE_MAX_AGE = 86400;
+/** Browsers can't be purged, so they ask again each time; the edge answers them. */
+const VISITOR_CACHE_CONTROL = "public, max-age=0, must-revalidate";
+/** The search parameter the cache key adds to a request's URL. */
+const CACHE_KEY_PARAM = "__camox_cache";
+/** The project's Live cache key, as the API serves it from its edge cache. */
+async function readLiveCacheKey(apiUrl, projectUuid) {
+	try {
+		const response = await fetch(`${apiUrl}/live-cache-keys/${encodeURIComponent(projectUuid)}`);
+		return response.ok ? await response.text() || null : null;
+	} catch {
+		return null;
+	}
+}
+/**
+* Answers a public request from the cache, or renders it and keeps the render when it may be
+* shared. Without a Live cache key, it renders without the cache: nothing tells when Live changed.
+*/
+async function respondThroughPublicCache(request, publicCache, render) {
+	const liveCacheKey = await publicCache.liveCacheKey();
+	if (!liveCacheKey) return render();
+	const key = cacheKeyOf(request, `${liveCacheKey}.${publicCache.build}`);
+	const cached = await publicCache.cache.match(withValidators(key, request));
+	if (cached) return forVisitors(cached, request);
+	const response = await render();
+	if (!response || !mayBeShared(response)) return response;
+	publicCache.waitUntil(publicCache.cache.put(key, forEdge(response.clone())));
+	return forVisitors(response, request);
+}
+/**
+* What a request's render is kept under: its URL, the representation it asks for, and the
+* version of Live and of the website it renders.
+*/
+function cacheKeyOf(request, version) {
+	const url = new URL(request.url);
+	const representation = prefersMarkdown(request.headers.get("Accept") ?? "") ? "md" : "any";
+	url.searchParams.set(CACHE_KEY_PARAM, `${version}.${representation}`);
+	return new Request(url.toString(), { method: "GET" });
+}
+/** The cache key, asking for the part of the render the request does. */
+function withValidators(key, request) {
+	const headers = new Headers();
+	for (const name of [
+		"Range",
+		"If-None-Match",
+		"If-Modified-Since"
+	]) {
+		const value = request.headers.get(name);
+		if (value !== null) headers.set(name, value);
+	}
+	return new Request(key, { headers });
+}
+/** Whether a response is the same for every visitor: what a private render never is. */
+function mayBeShared(response) {
+	if (response.status !== 200 || response.headers.has("Set-Cookie")) return false;
+	const cacheControl = response.headers.get("Cache-Control") ?? "";
+	return !/\b(private|no-store)\b/i.test(cacheControl);
+}
+/** How long browsers may keep a render: what it asked for, if it's versioned, else not at all. */
+function visitorCacheControl(response) {
+	const cacheControl = response.headers.get("Cache-Control") ?? "";
+	return /\bmax-age=[1-9]/.test(cacheControl) ? cacheControl : VISITOR_CACHE_CONTROL;
+}
+/** The render as the edge keeps it: as visitors get it, for as long as the edge keeps renders. */
+function forEdge(response) {
+	const kept = new Response(response.body, response);
+	kept.headers.set("Cache-Control", `${visitorCacheControl(response)}, s-maxage=${EDGE_MAX_AGE}`);
+	return kept;
+}
+/** The render as visitors get it, without the edge's lifetime, which no cache downstream gets. */
+function forVisitors(response, request) {
+	const cacheControl = visitorCacheControl(response).replace(/,\s*s-maxage=\d+/, "");
+	const answered = new Response(request.method === "HEAD" ? null : response.body, response);
+	answered.headers.set("Cache-Control", cacheControl);
+	return answered;
+}
+
+//#endregion
+export { readLiveCacheKey, respondThroughPublicCache };

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

@@ -8,7 +8,10 @@ import { StudioRenderInput } from "./studioApp.js";
 import { DraftRead, MemberProject, PageHead, createServerApiClient } from "../routes/pageRuntime.js";
 import { UseHeadInput } from "unhead/types";
 //#region src/features/runtime/runtime.d.ts
-export type RuntimeRouteKind = RuntimeOwnedRouteKind | "canvas" | "page" | "studio" | "studio-content" | "studio-nested";
+/** The studio's own routes, rather than a page or the Canvas. */
+declare const STUDIO_ROUTE_KINDS: readonly ["studio", "studio-content", "studio-settings", "studio-nested"];
+export type StudioRouteKind = (typeof STUDIO_ROUTE_KINDS)[number];
+export type RuntimeRouteKind = RuntimeOwnedRouteKind | "canvas" | "page" | StudioRouteKind;
 export interface RuntimeRouteMatch {
   kind: RuntimeRouteKind;
   pathname: string;
@@ -32,7 +35,7 @@ export interface PageRenderInput extends DraftRead {
   /** Authenticate before rendering, to show the Studio around the page. */
   previewHandoff?: boolean;
   previewDocument?: string;
-  routeKind?: "studio" | "studio-content" | "studio-nested";
+  routeKind?: StudioRouteKind;
   /** Whether the location is the Canvas with nothing selected, which only the Canvas shows. */
   canvasOnly?: boolean;
   project?: MemberProject;
@@ -96,7 +99,14 @@ export interface RuntimeOptions {
   studioStylesheetUrl?: string;
 }
 export declare function getRuntimePathname(url: string, runtimeBasePath?: string): string | null;
+/**
+ * Whether a request reads what every visitor sees, so a shared cache may answer it: a GET or
+ * HEAD of a page or a public output, with no session, no draft named and no preview handoff. A
+ * response that comes out private all the same, such as the Studio's, still says so.
+ */
+export declare function isPublicRequest(request: Request, options?: RuntimeOptions): boolean;
 export declare function matchRuntimeRoute(pathname: string): RuntimeRouteMatch;
 export declare function createPageHeadInput(head: PageHead): UseHeadInput;
 export declare function handleCamoxRequest(request: Request, options?: RuntimeOptions): Promise<Response | null>;
-//#endregion
+//#endregion
+export {};