camox 0.48.0 → 0.52.1

package/dist/features/preview/studioNotice.js

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { toast } from "@camox/ui/toaster";
+
+//#region src/features/preview/studioNotice.ts
+/** Shows a notice in this document's toasts. */
+function showNotice({ tone, message }) {
+	toast[tone](message);
+}
+/**
+* Where the notices of a page's blocks go. The renderer frame's document shows no toasts: it
+* hands them to the studio, which shows them.
+*/
+const StudioNoticeContext = React.createContext(null);
+/** Tells the editor something, in the studio's toasts. */
+function useStudioNotice() {
+	return React.use(StudioNoticeContext) ?? showNotice;
+}
+
+//#endregion
+export { StudioNoticeContext, showNotice, useStudioNotice };

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,22 +1,23 @@
 import { AuthContext, useAuthActions } from "../../lib/auth.js";
 import { useDraftScope } from "../../lib/draft-scope.js";
 import { reads, useReadQuery, useStudioCache } from "../../lib/studio-reads.js";
+import { RevisionsContext, createRevisions } from "../../lib/revisions.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";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Toaster, toast } from "@camox/ui/toaster";
 import studioCssUrl from "virtual:camox-studio-css";
 
 //#region src/features/provider/AuthenticatedCamoxProvider.tsx
 function AuthenticatedCamoxProvider(t0) {
-	const $ = c(14);
+	const $ = c(18);
 	const { children } = t0;
 	useAdminShortcuts();
 	useCommandPaletteActions();
@@ -48,49 +49,64 @@ function AuthenticatedCamoxProvider(t0) {
 		t3 = $[4];
 	}
 	React.useEffect(t2, t3);
+	const [revisions] = React.useState(createRevisions);
 	let t4;
-	if ($[5] !== draftScope) {
-		t4 = { onDraftEnded(ended) {
-			if (ended.draftId !== draftScope.current()) return;
-			draftScope.leave(ended, { notice: true });
-		} };
+	if ($[5] !== draftScope || $[6] !== revisions) {
+		let t5;
+		if ($[8] !== revisions) {
+			t5 = (revision) => revisions.announce(revision);
+			$[8] = revisions;
+			$[9] = t5;
+		} else t5 = $[9];
+		t4 = {
+			onDraftEnded(ended) {
+				if (ended.draftId !== draftScope.current()) return;
+				draftScope.leave(ended, { notice: true });
+			},
+			onRevision: t5
+		};
 		$[5] = draftScope;
-		$[6] = t4;
-	} else t4 = $[6];
+		$[6] = revisions;
+		$[7] = t4;
+	} else t4 = $[7];
 	useProjectRoom(apiUrl, project?.id, studioCache, t4);
 	const { resolvedTheme } = useApplyTheme();
 	let t5;
-	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
 		t5 = /* @__PURE__ */ jsx("link", {
 			rel: "stylesheet",
 			href: studioCssUrl,
 			"data-camox-studio": true
 		});
-		$[7] = t5;
-	} else t5 = $[7];
+		$[10] = t5;
+	} else t5 = $[10];
 	let t6;
-	if ($[8] !== resolvedTheme) {
+	if ($[11] !== resolvedTheme) {
 		t6 = /* @__PURE__ */ jsx(Toaster, { theme: resolvedTheme });
-		$[8] = resolvedTheme;
-		$[9] = t6;
-	} else t6 = $[9];
+		$[11] = resolvedTheme;
+		$[12] = t6;
+	} else t6 = $[12];
 	let t7;
-	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
 		t7 = /* @__PURE__ */ jsx(CommandPalette, {});
-		$[10] = t7;
-	} else t7 = $[10];
+		$[13] = t7;
+	} else t7 = $[13];
 	let t8;
-	if ($[11] !== children || $[12] !== t6) {
-		t8 = /* @__PURE__ */ jsxs(Fragment, { children: [
-			t5,
-			children,
-			t6,
-			t7
-		] });
-		$[11] = children;
-		$[12] = t6;
-		$[13] = t8;
-	} else t8 = $[13];
+	if ($[14] !== children || $[15] !== revisions || $[16] !== t6) {
+		t8 = /* @__PURE__ */ jsxs(RevisionsContext, {
+			value: revisions,
+			children: [
+				t5,
+				children,
+				t6,
+				t7
+			]
+		});
+		$[14] = children;
+		$[15] = revisions;
+		$[16] = t6;
+		$[17] = t8;
+	} else t8 = $[17];
 	return t8;
 }
 function _temp(notice) {

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 };