camox 0.48.0 → 0.51.0

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

@@ -1,7 +1,7 @@
 import { useAuthContext, useAuthState } from "../../../lib/auth.js";
 import { useNavigate } from "../../navigation/navigation.js";
-import { PlatformLabel } from "../../../components/PlatformLabel.js";
 import { useLocalePath, useLocalizedPath } from "../../../lib/view-locale.js";
+import { PlatformLabel } from "../../../components/PlatformLabel.js";
 import { STUDIO_BASE_PATH } from "../routes.js";
 import { studioStore } from "../studioStore.js";
 import { previewStore, selectIsCanvasShown } from "../../preview/previewStore.js";

package/dist/features/studio/routes.js

@@ -3,6 +3,8 @@ const STUDIO_ROUTE_SEGMENT = "camox";
 const STUDIO_BASE_PATH = `/${STUDIO_ROUTE_SEGMENT}`;
 const STUDIO_CONTENT_PATH = `${STUDIO_BASE_PATH}/content`;
 const STUDIO_ASSETS_PATH = `${STUDIO_CONTENT_PATH}/assets`;
+/** The Settings Section, where members change Project Settings. */
+const STUDIO_SETTINGS_PATH = `${STUDIO_BASE_PATH}/settings`;
 const collectionContentPath = (collectionId) => `${STUDIO_CONTENT_PATH}/collections/${encodeURIComponent(collectionId)}`;
 function matchCollectionContentPath(pathname) {
 	const match = /^\/camox\/content\/collections\/([^/]+)(?:(\/new)|\/([^/]+)\/edit)?$/.exec(pathname);
@@ -29,4 +31,4 @@ function matchCollectionContentPath(pathname) {
 const STUDIO_CANVAS_PATH = `${STUDIO_BASE_PATH}/canvas`;
 
 //#endregion
-export { STUDIO_ASSETS_PATH, STUDIO_BASE_PATH, STUDIO_CANVAS_PATH, STUDIO_CONTENT_PATH, STUDIO_ROUTE_SEGMENT, collectionContentPath, matchCollectionContentPath };
+export { STUDIO_ASSETS_PATH, STUDIO_BASE_PATH, STUDIO_CANVAS_PATH, STUDIO_CONTENT_PATH, STUDIO_ROUTE_SEGMENT, STUDIO_SETTINGS_PATH, collectionContentPath, matchCollectionContentPath };

package/dist/features/studio/showInCanvas.js

@@ -0,0 +1,129 @@
+import { useProjectUuid } from "../../lib/auth.js";
+import { localizedPath } from "../../lib/locale-path.js";
+import { useViewLocale } from "../../lib/view-locale-context.js";
+import { useLocation, useNavigate } from "../navigation/navigation.js";
+import { reads, useStudioCache } from "../../lib/studio-reads.js";
+import { previewStore, sameEditingOwner } from "../preview/previewStore.js";
+import { fieldTypesDictionary } from "../../core/lib/fieldTypes.js";
+import { c } from "react/compiler-runtime";
+
+//#region src/features/studio/showInCanvas.ts
+/**
+* How long showing something in the Canvas keeps selecting it, in milliseconds, while the Canvas
+* mounts and its page's editing frame claims, each of which can clear the selection. A product
+* tuning value: long enough for a page to load, short enough not to fight the editor.
+*/
+const SELECTING_FOR = 5e3;
+const isFieldType = (kind) => !!kind && Object.hasOwn(fieldTypesDictionary, kind);
+/** What to select on the target's page: its field, else its item or block, else nothing. */
+function selectionOf({ blockId, itemId, field }) {
+	if (!blockId) return null;
+	const fieldType = field && isFieldType(field.kind) ? field.kind : null;
+	if (itemId) return field && fieldType ? {
+		type: "item-field",
+		blockId,
+		itemId,
+		fieldName: field.name,
+		fieldType
+	} : {
+		type: "item",
+		blockId,
+		itemId
+	};
+	return field && fieldType ? {
+		type: "block-field",
+		blockId,
+		fieldName: field.name,
+		fieldType
+	} : {
+		type: "block",
+		blockId
+	};
+}
+/** Stops selecting what was last shown in the Canvas. */
+let stopSelecting = null;
+/**
+* Selects `selection` once `owner`'s editing frame is active, and again whenever it's cleared,
+* until the editor selects something else or the time runs out.
+*/
+function selectOnceShown(owner, selection) {
+	stopSelecting?.();
+	const select = () => {
+		const { editingContext } = previewStore.getSnapshot().context;
+		if (!sameEditingOwner(editingContext, owner)) return;
+		const current = editingContext?.selection ?? null;
+		if (current === null) {
+			previewStore.send({
+				type: "selectTarget",
+				...owner,
+				selection
+			});
+			return;
+		}
+		if (JSON.stringify(current) !== JSON.stringify(selection)) stop();
+	};
+	const subscription = previewStore.subscribe(select);
+	const timer = setTimeout(() => stop(), SELECTING_FOR);
+	const stop = () => {
+		subscription.unsubscribe();
+		clearTimeout(timer);
+		if (stopSelecting === stop) stopSelecting = null;
+	};
+	stopSelecting = stop;
+	const { editingContext } = previewStore.getSnapshot().context;
+	if (sameEditingOwner(editingContext, owner)) previewStore.send({
+		type: "selectTarget",
+		...owner,
+		selection
+	});
+}
+/**
+* Shows a page in the Canvas, in the target's locale, and selects the block, item or field in it
+* once the page's editing frame is active.
+*/
+function useShowInCanvas() {
+	const $ = c(8);
+	const cache = useStudioCache();
+	const projectUuid = useProjectUuid();
+	const view = useViewLocale();
+	const navigate = useNavigate();
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = { select: _temp };
+		$[0] = t0;
+	} else t0 = $[0];
+	const search = useLocation(t0);
+	let t1;
+	if ($[1] !== cache || $[2] !== navigate || $[3] !== projectUuid || $[4] !== search || $[5] !== view.locale || $[6] !== view.locales) {
+		t1 = async (target) => {
+			const locale = view.locales.find((each) => each.tag === target.locale) ?? view.locale;
+			const page = (await cache.ensure(reads.pageList({ projectUuid }), { locale }).catch(_temp2)).find((each_0) => each_0.id === target.pageId);
+			if (!page) return;
+			const selection = selectionOf(target);
+			if (selection) selectOnceShown({
+				kind: "page",
+				pageId: page.id
+			}, selection);
+			else stopSelecting?.();
+			previewStore.send({ type: "showCanvas" });
+			await navigate({ to: `${localizedPath(page.fullPath, locale)}${search}` });
+		};
+		$[1] = cache;
+		$[2] = navigate;
+		$[3] = projectUuid;
+		$[4] = search;
+		$[5] = view.locale;
+		$[6] = view.locales;
+		$[7] = t1;
+	} else t1 = $[7];
+	return t1;
+}
+function _temp2() {
+	return [];
+}
+function _temp(location) {
+	return location.search;
+}
+
+//#endregion
+export { useShowInCanvas };

package/dist/features/vite/definitionsSync.js

@@ -56,14 +56,13 @@ async function syncDefinitionsToApi(options) {
 		throw error;
 	}
 	if (result.draftCreated) logger.info("[camox] Created your development draft", { timestamp: true });
-	logger.info(`[camox] Synced ${counted(result.blocks.count, "block definition")}`, { timestamp: true });
+	const definitionCount = result.blocks.count + result.collections.count + (result.layouts?.count ?? 0);
+	logger.info(`[camox] Synced ${counted(definitionCount, "Camox definition")}`, { timestamp: true });
 	const { deletedDefinitionTypes } = result.blocks;
 	if (deletedDefinitionTypes.length > 0) logger.info(`[camox] Removed ${counted(deletedDefinitionTypes.length, "block definition")} no longer in code: ${quoted(deletedDefinitionTypes)}. Their blocks are kept and render nothing until the definition comes back.`, { timestamp: true });
-	logger.info(`[camox] Synced ${result.collections.count} collection definitions`, { timestamp: true });
 	for (const id of result.collections.retired) logger.warn(`[camox] Removed collection "${id}"; its records are kept and hidden`, { timestamp: true });
 	const layoutSyncResults = result.layouts;
 	if (layoutSyncResults) {
-		logger.info(`[camox] Synced ${counted(layoutSyncResults.count, "layout")} to Camox API`, { timestamp: true });
 		for (const layout of layoutSyncResults.layouts) {
 			const { layoutId, createdBlockTypes, removedBlockTypes, skippedOrphanTypes } = layout;
 			if (layout.wasExisting && createdBlockTypes.length > 0) logger.info(`[camox] Added ${counted(createdBlockTypes.length, "block")} to existing layout "${layoutId}": ${quoted(createdBlockTypes)}`, { timestamp: true });
@@ -180,7 +179,7 @@ async function syncDefinitions(server, options) {
 		await sync({ initial: true });
 		synced = true;
 	} catch (error) {
-		logger.error(`[camox] Failed to sync block definitions: ${String(error)}`, { timestamp: true });
+		logger.error(`[camox] Failed to sync Camox definitions: ${String(error)}`, { timestamp: true });
 	}
 	let running = Promise.resolve();
 	let timer;
@@ -188,7 +187,7 @@ async function syncDefinitions(server, options) {
 		clearTimeout(timer);
 		timer = setTimeout(() => {
 			running = running.then(() => sync().catch((error) => {
-				logger.error(`[camox] Failed to sync block definitions: ${String(error)}`, { timestamp: true });
+				logger.error(`[camox] Failed to sync Camox definitions: ${String(error)}`, { timestamp: true });
 			}));
 		}, SYNC_DEBOUNCE_DELAY_MS);
 	};

package/dist/features/vite/runtimeDev.js

@@ -183,7 +183,10 @@ export default stylesheetUrl;
 `;
 }
 function generateVirtualCamoxServer(runtimeBasePath) {
-	return `import { handleCamoxRequest as handleRuntimeRequest } from "camox/_internal/runtime";
+	return `import {
+  handleCamoxRequest as handleRuntimeRequest,
+  isPublicRequest as isPublicRuntimeRequest,
+} from "camox/_internal/runtime";
 import { blockModulePaths, camoxApp } from "virtual:camox/app";
 import blockChunks from "virtual:camox/block-chunks";
 import { camoxDocument } from "virtual:camox/document";
@@ -198,23 +201,35 @@ import devHtml from "virtual:camox/dev-html";
 export { devHtml };
 export const runtimeBasePath = ${JSON.stringify(normalizeRuntimeBasePath(runtimeBasePath))};
 
+const options = {
+  apiUrl: __CAMOX_API_URL__,
+  authenticationUrl: __CAMOX_AUTHENTICATION_URL__,
+  blockPreloads: { modulePaths: blockModulePaths, chunks: blockChunks },
+  pageClientEntryUrl,
+  studioClientEntryUrl,
+  developmentDraft: __CAMOX_DEVELOPMENT_DRAFT__,
+  getCamoxApp: async () => camoxApp,
+  getDocument: async () => camoxDocument,
+  projectUuid: __CAMOX_PROJECT_ID__,
+  renderPage,
+  renderStudio,
+  runtimeBasePath: ${JSON.stringify(runtimeBasePath)},
+  stylesheetUrl: appStylesheetUrl,
+  studioStylesheetUrl,
+};
+
+export const publicCacheSource = {
+  apiUrl: __CAMOX_API_URL__,
+  projectUuid: __CAMOX_PROJECT_ID__,
+  build: __CAMOX_BUILD_ID__,
+};
+
 export async function handleCamoxRequest(request) {
-  return handleRuntimeRequest(request, {
-    apiUrl: __CAMOX_API_URL__,
-    authenticationUrl: __CAMOX_AUTHENTICATION_URL__,
-    blockPreloads: { modulePaths: blockModulePaths, chunks: blockChunks },
-    pageClientEntryUrl,
-    studioClientEntryUrl,
-    developmentDraft: __CAMOX_DEVELOPMENT_DRAFT__,
-    getCamoxApp: async () => camoxApp,
-    getDocument: async () => camoxDocument,
-    projectUuid: __CAMOX_PROJECT_ID__,
-    renderPage,
-    renderStudio,
-    runtimeBasePath: ${JSON.stringify(runtimeBasePath)},
-    stylesheetUrl: appStylesheetUrl,
-    studioStylesheetUrl,
-  });
+  return handleRuntimeRequest(request, options);
+}
+
+export function isPublicRequest(request) {
+  return isPublicRuntimeRequest(request, options);
 }
 `;
 }

package/dist/features/vite/staticAssetHeaders.js

@@ -0,0 +1,52 @@
+import { existsSync, readFileSync, readdirSync } from "node:fs";
+import { join, relative } from "node:path";
+
+//#region src/features/vite/staticAssetHeaders.ts
+/** Where the client build puts the files it names by their content's hash. */
+const HASHED_DIRS = ["assets", "_chunks"];
+const IMMUTABLE = "public, max-age=31536000, immutable";
+/** Workers Static Assets reads at most this many rules. */
+const MAX_RULES = 100;
+/**
+* The `_headers` file Workers Static Assets serves the client build with. Files under
+* `/assets/` and `/_chunks/` are named by their content's hash, so browsers keep them for good;
+* the files there named otherwise, the entry chunks pages load by a fixed name and whatever the
+* app's public directory puts there, keep the default, which revalidates. The app's own
+* `_headers` comes first, as it wrote it.
+*/
+function staticAssetHeaders({ ownHeaders, unhashedFiles }) {
+	const rules = [...HASHED_DIRS.map((dir) => `/${dir}/*\n  Cache-Control: ${IMMUTABLE}`), ...[...unhashedFiles].sort().map((file) => `/${file}\n  ! Cache-Control`)];
+	const own = ownHeaders?.trimEnd();
+	const ownRules = own ? own.split("\n").filter((line) => /^\S/.test(line) && !line.startsWith("#")) : [];
+	if (ownRules.length + rules.length > MAX_RULES) throw new Error(`Camox: _headers would hold ${ownRules.length + rules.length} rules, past Workers Static Assets' ${MAX_RULES}. Move the public directory's files out of /assets/ and /_chunks/, or drop rules from public/_headers.`);
+	return [
+		...own ? [own] : [],
+		"# Camox: files named by their content's hash never change.",
+		...rules,
+		""
+	].join("\n");
+}
+/** The entry chunks of a bundle under the hashed directories, which pages load by name. */
+function unhashedEntries(bundle) {
+	return Object.values(bundle).flatMap((output) => output.type === "chunk" && output.isEntry ? [output.fileName] : []).filter(inHashedDir);
+}
+/** The files a public directory puts under the hashed directories, relative to it. */
+function publicFilesInHashedDirs(publicDir) {
+	if (!publicDir) return [];
+	return HASHED_DIRS.flatMap((dir) => filesUnder(join(publicDir, dir))).map((file) => relative(publicDir, file).replaceAll("\\", "/"));
+}
+/** The app's own `_headers`, if its public directory has one. */
+function readOwnHeaders(publicDir) {
+	const path = publicDir && join(publicDir, "_headers");
+	return path && existsSync(path) ? readFileSync(path, "utf-8") : void 0;
+}
+function inHashedDir(file) {
+	return HASHED_DIRS.some((dir) => file.startsWith(`${dir}/`));
+}
+function filesUnder(dir) {
+	if (!existsSync(dir)) return [];
+	return readdirSync(dir, { withFileTypes: true }).flatMap((entry) => entry.isDirectory() ? filesUnder(join(dir, entry.name)) : [join(dir, entry.name)]);
+}
+
+//#endregion
+export { publicFilesInHashedDirs, readOwnHeaders, staticAssetHeaders, unhashedEntries };

package/dist/features/vite/vite.d.ts

@@ -23,7 +23,7 @@ export interface CamoxPluginOptions {
   _internal?: {
     /** URL of the Camox API backend, used for data fetching */
     apiUrl?: string;
-    /** URL of the Camox authentication backend (default: https://app.camox.dev) */
+    /** URL of the Camox authentication backend (default: https://app.camox.ai) */
     authenticationUrl?: string;
     /** Show Tanstack query devtools (default: false) */
     enableTanstackDevtools?: boolean;

package/dist/features/vite/vite.js

@@ -8,6 +8,7 @@ import { installDevAuthenticationMiddleware } from "./devAuthentication.js";
 import { installDevSignInLink } from "./devSignIn.js";
 import { generateIconTypes } from "./iconGeneration.js";
 import { generateLayoutFiles, watchLayoutFiles } from "./layoutGeneration.js";
+import { publicFilesInHashedDirs, readOwnHeaders, staticAssetHeaders, unhashedEntries } from "./staticAssetHeaders.js";
 import { buildClientThenWorker } from "./workerBuild.js";
 import { VIRTUAL_CAMOX_APP, syncDefinitions, syncDefinitionsToApi } from "./definitionsSync.js";
 import { publishSeededContent } from "./publishSeededContent.js";
@@ -15,7 +16,7 @@ import { cleanupGeneratedRouteFiles } from "./routeGeneration.js";
 import { RESOLVED_VIRTUAL_DEV_HTML, createRuntimeRegistryPlugin, loadRuntimeDevModule, resolveRuntimeDevId } from "./runtimeDev.js";
 import { projectIdSchema } from "@camox/api-contract/ids";
 import { DEVELOPMENT_DRAFT } from "@camox/api-contract/drafts";
-import { createHash } from "node:crypto";
+import { createHash, randomUUID } from "node:crypto";
 import { mkdirSync, readFileSync, writeFileSync } from "node:fs";
 import { dirname, join, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
@@ -34,9 +35,9 @@ const RESOLVED_VIRTUAL_PAGE_CLIENT_URL = "\0virtual:camox/page-client-url";
 const VIRTUAL_STUDIO_CLIENT = "virtual:camox/studio-client";
 const RESOLVED_VIRTUAL_STUDIO_CLIENT_URL = "\0virtual:camox/studio-client-url";
 const RESOLVED_VIRTUAL_BLOCK_CHUNKS = "\0virtual:camox/block-chunks";
-const PRODUCTION_API_URL = "https://api.camox.dev";
+const PRODUCTION_API_URL = "https://api.camox.ai";
 /** Authentication URL to use for Camox authentication (production Camox Dashboard) */
-const DEFAULT_AUTHENTICATION_URL = "https://app.camox.dev";
+const DEFAULT_AUTHENTICATION_URL = "https://app.camox.ai";
 /** What Vite injects into HTML in dev, which the Worker can't ask Vite for itself. */
 async function getDevHtml(server) {
 	const html = await server.transformIndexHtml("/", "<html><head></head><body></body></html>");
@@ -226,6 +227,16 @@ function camox(options) {
 		generateBundle(_outputOptions, bundle) {
 			if (this.environment.name !== "client") return;
 			blockChunks = collectBlockChunks(bundle, resolvedConfig.root);
+			if (!isBuild) return;
+			const { publicDir } = resolvedConfig;
+			this.emitFile({
+				type: "asset",
+				fileName: "_headers",
+				source: staticAssetHeaders({
+					ownHeaders: readOwnHeaders(publicDir),
+					unhashedFiles: [...unhashedEntries(bundle), ...publicFilesInHashedDirs(publicDir)]
+				})
+			});
 		},
 		async config(_config, env) {
 			const iconIds = await generateIconTypes(resolve(_config.root ?? process.cwd()), options.icons);
@@ -248,7 +259,8 @@ function camox(options) {
 					__CAMOX_DEVELOPMENT_DRAFT__: JSON.stringify(!isRelease),
 					__CAMOX_API_URL__: JSON.stringify(apiUrl),
 					__CAMOX_AUTHENTICATION_URL__: JSON.stringify(authenticationUrl),
-					__CAMOX_PROJECT_ID__: JSON.stringify(projectUuid)
+					__CAMOX_PROJECT_ID__: JSON.stringify(projectUuid),
+					__CAMOX_BUILD_ID__: JSON.stringify(randomUUID())
 				},
 				environments: { client: { build: { rollupOptions: {
 					onLog: withoutExpectedCamoxLogs(findClientOnLog(_config)),

package/dist/lib/api-client-server.d.ts

@@ -1,4 +1,4 @@
-import { Router } from "@camox/api-contract";
+import { Router } from "@camox/api-contract/router";
 import { RouterClient } from "@orpc/server";
 //#region src/lib/api-client-server.d.ts
 export type ServerApiClient = RouterClient<Router>;

package/dist/lib/api-client.d.ts

@@ -1,5 +1,6 @@
+import "./locale-path.js";
 import "./draft-scope.js";
-import { Router } from "@camox/api-contract";
+import { Router } from "@camox/api-contract/router";
 import { RouterClient } from "@orpc/server";
 //#region src/lib/api-client.d.ts
 export type ApiClient = RouterClient<Router>;

package/dist/lib/draft-scope.d.ts

@@ -1,3 +1,4 @@
+import "./locale-path.js";
 import "../features/routes/pageRuntime.js";
 import "react";
 import { EndedDraft } from "@camox/api-contract/drafts";

package/dist/lib/locale-path.d.ts

@@ -1,14 +1,5 @@
+import { LocaleView } from "@camox/api-contract/locales";
 //#region src/lib/locale-path.d.ts
-/**
- * The URL names the locale: a non-default locale's paths sit under its prefix (`/de/preise`), the
- * default locale's have none. The studio's routes follow the same rule (`/de/camox/content`).
- * Pure, so the runtime and the browser share it.
- */
-/** A locale of a project, as `locales.list` returns it. */
-export type LocaleView = {
-  tag: string;
-  isDefault: boolean;
-};
 /**
  * Where a page sits in one locale it exists in: the locale's tag and the page's path there, under
  * the locale's prefix. The runtime finds them for `hreflang` links and the sitemap; the
@@ -19,4 +10,5 @@ export interface AlternatePath {
   /** The page's runtime path, with its locale's prefix and without the runtime base path. */
   path: string;
 }
-//#endregion
+//#endregion
+export type { LocaleView };

package/dist/lib/locale-path.js

@@ -1,10 +1,11 @@
 import { LOCALE_HEADER } from "@camox/api-contract/drafts";
+import { localePrefix, parseLocalePath } from "@camox/api-contract/locales";
 
 //#region src/lib/locale-path.ts
 /**
 * The URL names the locale: a non-default locale's paths sit under its prefix (`/de/preise`), the
 * default locale's have none. The studio's routes follow the same rule (`/de/camox/content`).
-* Pure, so the runtime and the browser share it.
+* Pure, so the runtime and the browser share it, and the API reads paths by the same rule.
 */
 /**
 * The default locale where nothing says its tag yet: before a render shows a locale, outside the
@@ -21,31 +22,6 @@ const UNNAMED_DEFAULT_LOCALE = {
 function localeHeaders(locale) {
 	return locale && !locale.isDefault ? { [LOCALE_HEADER]: locale.tag } : {};
 }
-/** A locale's URL prefix: its tag in lowercase. The default locale has none. */
-function localePrefix(locale) {
-	return locale.isDefault ? "" : `/${locale.tag.toLowerCase()}`;
-}
-/**
-* The locale a runtime path names, and the path after its prefix, without search or hash. A first
-* segment that isn't a non-default locale's prefix leaves the path the default locale's. A
-* locale's home is `/de`; `/de/` names it too.
-*/
-function parseLocalePath(pathname, locales) {
-	const path = pathname.replace(/[?#].*$/s, "") || "/";
-	const end = path.indexOf("/", 1);
-	const segment = end === -1 ? path.slice(1) : path.slice(1, end);
-	const named = locales.find((locale) => !locale.isDefault && localePrefix(locale) === `/${segment}`);
-	if (named) return {
-		locale: named,
-		path: end === -1 ? "/" : path.slice(end)
-	};
-	const fallback = locales.find((locale) => locale.isDefault);
-	if (!fallback) throw new Error("A project's locales include its default locale.");
-	return {
-		locale: fallback,
-		path
-	};
-}
 /** A locale-relative path under its locale's prefix, keeping its search and hash: `/` is `/de`. */
 function localizedPath(path, locale) {
 	const prefix = localePrefix(locale);
@@ -54,4 +30,4 @@ function localizedPath(path, locale) {
 }
 
 //#endregion
-export { UNNAMED_DEFAULT_LOCALE, localeHeaders, localePrefix, localizedPath, parseLocalePath };
+export { UNNAMED_DEFAULT_LOCALE, localeHeaders, localizedPath, parseLocalePath };

package/dist/lib/queries.js

@@ -25,6 +25,8 @@ async function sendFaviconChange(path, init) {
 	return res;
 }
 const projectMutations = {
+	update: () => getOrpc().projects.update.mutationOptions(),
+	updateAnalytics: () => getOrpc().projects.updateAnalytics.mutationOptions(),
 	updateSocialProfiles: () => getOrpc().projects.updateSocialProfiles.mutationOptions(),
 	uploadFavicon: () => ({ mutationFn: async ({ projectId, file }) => {
 		const formData = new FormData();
@@ -41,7 +43,11 @@ const projectMutations = {
 };
 const draftMutations = {
 	publish: () => getOrpc().drafts.publish.mutationOptions(),
-	discard: () => getOrpc().drafts.discard.mutationOptions()
+	discard: () => getOrpc().drafts.discard.mutationOptions(),
+	/** Requests the draft's overview again right away, once it failed. */
+	retryOverview: () => getOrpc().drafts.retryOverview.mutationOptions(),
+	/** Drops the draft's copy of an entity it conflicts on, to use Live's version instead. */
+	revertToLive: () => getOrpc().drafts.revertToLive.mutationOptions()
 };
 /** Adding and removing locales: content writes, so on Live they start a draft (ADR 0015). */
 const localeMutations = {

package/dist/lib/shortcuts.js

@@ -0,0 +1,29 @@
+import { PlatformLabel } from "../components/PlatformLabel.js";
+import { jsx } from "react/jsx-runtime";
+import { Kbd } from "@camox/ui/kbd";
+import { formatForDisplay } from "@tanstack/react-hotkeys";
+
+//#region src/lib/shortcuts.tsx
+/**
+* Formats a shortcut as a keyboard shortcut display component, labelled for the user's platform.
+*
+* @example
+* ```tsx
+* formatShortcut("Mod+E") // ⌘ E on Mac, Ctrl E elsewhere
+* formatShortcut("L")     // L
+* ```
+*/
+function formatShortcut(shortcut) {
+	if (!shortcut) return null;
+	const label = (platform) => formatForDisplay(shortcut, {
+		platform,
+		separatorToken: " "
+	});
+	return /* @__PURE__ */ jsx(Kbd, { children: /* @__PURE__ */ jsx(PlatformLabel, {
+		mac: label("mac"),
+		other: label("windows")
+	}) });
+}
+
+//#endregion
+export { formatShortcut };

package/dist/lib/studio-reads.d.ts

@@ -1,3 +1,4 @@
+import "./locale-path.js";
 import "../core/createLayout.js";
 import "../features/runtime/runtime.js";
 import "./draft-scope.js";

package/dist/lib/utils.js

@@ -1,112 +1,9 @@
-import { PlatformLabel } from "../components/PlatformLabel.js";
-import { c } from "react/compiler-runtime";
-import { jsx } from "react/jsx-runtime";
-import { Kbd } from "@camox/ui/kbd";
 import { INPUT_BASE_STYLES, INPUT_FOCUS_STYLES, cn } from "@camox/ui/utils";
 
 //#region src/lib/utils.tsx
 function checkIfInputFocused(document = window.document) {
 	return document.activeElement?.tagName === "INPUT" || document.activeElement?.tagName === "TEXTAREA" || (document.activeElement?.getAttribute("contenteditable") ?? "false") === "true";
 }
-/**
-* Formats an action shortcut into a keyboard shortcut display component.
-* Automatically detects the platform and uses the appropriate modifier keys.
-*
-* @param shortcut - The shortcut configuration from an Action
-* @returns React element displaying the keyboard shortcut
-*
-* @example
-* ```tsx
-* formatShortcut({ key: "e", withMeta: true }) // Returns <KbdGroup><Kbd>⌘</Kbd><Kbd>E</Kbd></KbdGroup>
-* formatShortcut({ key: "l" })                 // Returns <Kbd>L</Kbd>
-* ```
-*/
-function formatShortcut(shortcut) {
-	if (!shortcut) return null;
-	return /* @__PURE__ */ jsx(Shortcut, { shortcut });
-}
-function Shortcut(t0) {
-	const $ = c(14);
-	const { shortcut } = t0;
-	let t1;
-	bb0: {
-		if (shortcut.key === "Enter") {
-			t1 = "↵";
-			break bb0;
-		}
-		if (shortcut.key === "Escape") {
-			t1 = "Esc";
-			break bb0;
-		}
-		if (shortcut.key === "Backspace") {
-			t1 = "⌫";
-			break bb0;
-		}
-		if (shortcut.key === "ArrowUp") {
-			t1 = "↑";
-			break bb0;
-		}
-		if (shortcut.key === "ArrowDown") {
-			t1 = "↓";
-			break bb0;
-		}
-		if (shortcut.key === "ArrowLeft") {
-			t1 = "←";
-			break bb0;
-		}
-		if (shortcut.key === "ArrowRight") {
-			t1 = "→";
-			break bb0;
-		}
-		let t2;
-		if ($[0] !== shortcut.key) {
-			t2 = shortcut.key.toUpperCase();
-			$[0] = shortcut.key;
-			$[1] = t2;
-		} else t2 = $[1];
-		t1 = t2;
-	}
-	const formattedKey = t1;
-	let t2;
-	if ($[2] !== formattedKey || $[3] !== shortcut.withAlt || $[4] !== shortcut.withMeta || $[5] !== shortcut.withShift) {
-		t2 = (mac) => {
-			const modifiers = [];
-			if (shortcut.withMeta) modifiers.push(mac ? "⌘" : "Ctrl");
-			if (shortcut.withAlt) modifiers.push(mac ? "⌥" : "Alt");
-			if (shortcut.withShift) modifiers.push(mac ? "⇧" : "Shift");
-			return `${modifiers.join()} ${formattedKey}`.trim();
-		};
-		$[2] = formattedKey;
-		$[3] = shortcut.withAlt;
-		$[4] = shortcut.withMeta;
-		$[5] = shortcut.withShift;
-		$[6] = t2;
-	} else t2 = $[6];
-	const label = t2;
-	let t3;
-	if ($[7] !== label) {
-		t3 = label(true);
-		$[7] = label;
-		$[8] = t3;
-	} else t3 = $[8];
-	let t4;
-	if ($[9] !== label) {
-		t4 = label(false);
-		$[9] = label;
-		$[10] = t4;
-	} else t4 = $[10];
-	let t5;
-	if ($[11] !== t3 || $[12] !== t4) {
-		t5 = /* @__PURE__ */ jsx(Kbd, { children: /* @__PURE__ */ jsx(PlatformLabel, {
-			mac: t3,
-			other: t4
-		}) });
-		$[11] = t3;
-		$[12] = t4;
-		$[13] = t5;
-	} else t5 = $[13];
-	return t5;
-}
 
 //#endregion
-export { INPUT_BASE_STYLES, INPUT_FOCUS_STYLES, checkIfInputFocused, cn, formatShortcut };
+export { INPUT_BASE_STYLES, INPUT_FOCUS_STYLES, checkIfInputFocused, cn };

package/dist/package.js

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "0.48.0";
+var version = "0.51.0";
 
 //#endregion
 export { version };