camox 0.40.0 → 0.41.1

package/dist/lib/auth.js

@@ -217,9 +217,9 @@ function useProcessOtt(authClient) {
 const AuthContext = React.createContext(null);
 function useAuthContext() {
 	const $ = c(1);
-	if ($[0] !== "96393d5626632a69960ca7e18d98e06ae87b8528faab082732a3cc7b48adfd93") {
+	if ($[0] !== "613abd4be0f81de0bf8df48c671a83e40c3e6ac86dab4c38ebcffe92268b614b") {
 		for (let $i = 0; $i < 1; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "96393d5626632a69960ca7e18d98e06ae87b8528faab082732a3cc7b48adfd93";
+		$[0] = "613abd4be0f81de0bf8df48c671a83e40c3e6ac86dab4c38ebcffe92268b614b";
 	}
 	const ctx = React.useContext(AuthContext);
 	if (!ctx) throw new Error("Missing CamoxProvider");
@@ -227,34 +227,36 @@ function useAuthContext() {
 }
 function useProjectSlug() {
 	const $ = c(1);
-	if ($[0] !== "96393d5626632a69960ca7e18d98e06ae87b8528faab082732a3cc7b48adfd93") {
+	if ($[0] !== "613abd4be0f81de0bf8df48c671a83e40c3e6ac86dab4c38ebcffe92268b614b") {
 		for (let $i = 0; $i < 1; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "96393d5626632a69960ca7e18d98e06ae87b8528faab082732a3cc7b48adfd93";
+		$[0] = "613abd4be0f81de0bf8df48c671a83e40c3e6ac86dab4c38ebcffe92268b614b";
 	}
 	return useAuthContext().projectSlug;
 }
+const subscribeToHydration = () => () => {};
 function useAuthState() {
-	const { authClient } = useAuthContext();
+	const { authClient, initialAuthenticated = false } = useAuthContext();
 	const { data: session, isPending } = authClient.useSession();
+	const useInitial = !React.useSyncExternalStore(subscribeToHydration, () => true, () => false) || isPending;
 	return {
-		isAuthenticated: !!session,
-		isLoading: isPending
+		isAuthenticated: useInitial ? initialAuthenticated : !!session,
+		isLoading: useInitial && !initialAuthenticated
 	};
 }
 function useIsAuthenticated() {
 	const $ = c(1);
-	if ($[0] !== "96393d5626632a69960ca7e18d98e06ae87b8528faab082732a3cc7b48adfd93") {
+	if ($[0] !== "613abd4be0f81de0bf8df48c671a83e40c3e6ac86dab4c38ebcffe92268b614b") {
 		for (let $i = 0; $i < 1; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "96393d5626632a69960ca7e18d98e06ae87b8528faab082732a3cc7b48adfd93";
+		$[0] = "613abd4be0f81de0bf8df48c671a83e40c3e6ac86dab4c38ebcffe92268b614b";
 	}
 	const { isAuthenticated } = useAuthState();
 	return isAuthenticated;
 }
 function useSignInRedirect(callbackHref) {
 	const $ = c(4);
-	if ($[0] !== "96393d5626632a69960ca7e18d98e06ae87b8528faab082732a3cc7b48adfd93") {
+	if ($[0] !== "613abd4be0f81de0bf8df48c671a83e40c3e6ac86dab4c38ebcffe92268b614b") {
 		for (let $i = 0; $i < 4; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "96393d5626632a69960ca7e18d98e06ae87b8528faab082732a3cc7b48adfd93";
+		$[0] = "613abd4be0f81de0bf8df48c671a83e40c3e6ac86dab4c38ebcffe92268b614b";
 	}
 	const { authenticationUrl } = useAuthContext();
 	let t0;
@@ -276,9 +278,9 @@ function useSignInRedirect(callbackHref) {
 */
 function useAuthActions() {
 	const $ = c(5);
-	if ($[0] !== "96393d5626632a69960ca7e18d98e06ae87b8528faab082732a3cc7b48adfd93") {
+	if ($[0] !== "613abd4be0f81de0bf8df48c671a83e40c3e6ac86dab4c38ebcffe92268b614b") {
 		for (let $i = 0; $i < 5; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "96393d5626632a69960ca7e18d98e06ae87b8528faab082732a3cc7b48adfd93";
+		$[0] = "613abd4be0f81de0bf8df48c671a83e40c3e6ac86dab4c38ebcffe92268b614b";
 	}
 	const { authClient, authenticationUrl } = useAuthContext();
 	let t0;

package/dist/lib/normalized-data.js

@@ -11,9 +11,9 @@ const NormalizedDataContext = React.createContext({
 });
 const NormalizedDataProvider = (t0) => {
 	const $ = c(13);
-	if ($[0] !== "9680f54d18eb424030716d5c43a9901462a27cc0d8227fb40b5d6abb9b464a89") {
+	if ($[0] !== "28aab7b25bd21e351d34503ab3d745344dc158d8c4a4ad7a8c63e2c8732703bb") {
 		for (let $i = 0; $i < 13; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "9680f54d18eb424030716d5c43a9901462a27cc0d8227fb40b5d6abb9b464a89";
+		$[0] = "28aab7b25bd21e351d34503ab3d745344dc158d8c4a4ad7a8c63e2c8732703bb";
 	}
 	const { files, repeatableItems, children } = t0;
 	let t1;
@@ -74,9 +74,9 @@ function useStableArray(next) {
 }
 function usePageBlocks(pageStructure, t0) {
 	const $ = c(37);
-	if ($[0] !== "9680f54d18eb424030716d5c43a9901462a27cc0d8227fb40b5d6abb9b464a89") {
+	if ($[0] !== "28aab7b25bd21e351d34503ab3d745344dc158d8c4a4ad7a8c63e2c8732703bb") {
 		for (let $i = 0; $i < 37; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "9680f54d18eb424030716d5c43a9901462a27cc0d8227fb40b5d6abb9b464a89";
+		$[0] = "28aab7b25bd21e351d34503ab3d745344dc158d8c4a4ad7a8c63e2c8732703bb";
 	}
 	const source = t0 === void 0 ? "draft" : t0;
 	const blockIds = pageStructure.page.blockIds;

package/dist/lib/platform.js

@@ -0,0 +1,13 @@
+//#region src/lib/platform.ts
+function bootstrapPlatform() {
+	document.documentElement.dataset.camoxPlatform = /Mac|iPhone|iPad|iPod/i.test(navigator.userAgent) ? "mac" : "other";
+}
+const PLATFORM_SCRIPT = `(${bootstrapPlatform.toString()})();`;
+const PLATFORM_LABEL_CSS = `
+.camox-platform-mac{display:none}
+:root[data-camox-platform="mac"] .camox-platform-mac{display:inline}
+:root[data-camox-platform="mac"] .camox-platform-other{display:none}
+`;
+
+//#endregion
+export { PLATFORM_LABEL_CSS, PLATFORM_SCRIPT, bootstrapPlatform };

package/dist/lib/utils.js

@@ -1,4 +1,6 @@
-import { jsxs } from "react/jsx-runtime";
+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";
 
@@ -21,44 +23,94 @@ function checkIfInputFocused(document = window.document) {
 */
 function formatShortcut(shortcut) {
 	if (!shortcut) return null;
-	const isMac = navigator.userAgent.toUpperCase().indexOf("MAC") >= 0;
-	const modifiers = [];
-	if (shortcut.withMeta) modifiers.push(isMac ? "⌘" : "Ctrl");
-	if (shortcut.withAlt) modifiers.push(isMac ? "⌥" : "Alt");
-	if (shortcut.withShift) modifiers.push(isMac ? "⇧" : "Shift");
-	const formattedKey = (() => {
-		if (shortcut.key === "Enter") return "↵";
-		if (shortcut.key === "Escape") return "Esc";
-		if (shortcut.key === "Backspace") return "⌫";
-		if (shortcut.key === "ArrowUp") return "↑";
-		if (shortcut.key === "ArrowDown") return "↓";
-		if (shortcut.key === "ArrowLeft") return "←";
-		if (shortcut.key === "ArrowRight") return "→";
-		return shortcut.key.toUpperCase();
-	})();
-	return /* @__PURE__ */ jsxs(Kbd, { children: [
-		modifiers.join(),
-		" ",
-		formattedKey
-	] });
+	return /* @__PURE__ */ jsx(Shortcut, { shortcut });
 }
-/**
-* Gets an action's shortcut component by action ID from the actions array.
-*
-* @param actions - Array of actions from actionsStore
-* @param actionId - The ID of the action to get the shortcut for
-* @returns React element displaying the keyboard shortcut, or null if not found
-*
-* @example
-* ```tsx
-* const actions = useSelector(actionsStore, (state) => state.context.actions);
-* getActionShortcut(actions, "cycle-viewport-mode") // Returns formatted shortcut component
-* ```
-*/
-function getActionShortcut(actions, actionId) {
-	const action = actions.find((a) => a.id === actionId);
-	return action?.shortcut ? formatShortcut(action.shortcut) : null;
+function Shortcut(t0) {
+	const $ = c(15);
+	if ($[0] !== "45dff80dbc1805709c694dadbd04b0216f01c3a1a826daf47b8bb5bac9e42d9a") {
+		for (let $i = 0; $i < 15; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "45dff80dbc1805709c694dadbd04b0216f01c3a1a826daf47b8bb5bac9e42d9a";
+	}
+	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 ($[1] !== shortcut.key) {
+			t2 = shortcut.key.toUpperCase();
+			$[1] = shortcut.key;
+			$[2] = t2;
+		} else t2 = $[2];
+		t1 = t2;
+	}
+	const formattedKey = t1;
+	let t2;
+	if ($[3] !== formattedKey || $[4] !== shortcut.withAlt || $[5] !== shortcut.withMeta || $[6] !== 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();
+		};
+		$[3] = formattedKey;
+		$[4] = shortcut.withAlt;
+		$[5] = shortcut.withMeta;
+		$[6] = shortcut.withShift;
+		$[7] = t2;
+	} else t2 = $[7];
+	const label = t2;
+	let t3;
+	if ($[8] !== label) {
+		t3 = label(true);
+		$[8] = label;
+		$[9] = t3;
+	} else t3 = $[9];
+	let t4;
+	if ($[10] !== label) {
+		t4 = label(false);
+		$[10] = label;
+		$[11] = t4;
+	} else t4 = $[11];
+	let t5;
+	if ($[12] !== t3 || $[13] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Kbd, { children: /* @__PURE__ */ jsx(PlatformLabel, {
+			mac: t3,
+			other: t4
+		}) });
+		$[12] = t3;
+		$[13] = t4;
+		$[14] = t5;
+	} else t5 = $[14];
+	return t5;
 }
 
 //#endregion
-export { INPUT_BASE_STYLES, INPUT_FOCUS_STYLES, checkIfInputFocused, cn, formatShortcut, getActionShortcut };
+export { INPUT_BASE_STYLES, INPUT_FOCUS_STYLES, checkIfInputFocused, cn, formatShortcut };

package/dist/studio-overlays.css

@@ -4,7 +4,7 @@
  * State is driven by data attributes on the elements:
  * - data-camox-hovered: element is hovered
  * - data-camox-focused: element is focused/selected
- * - data-camox-overlay-mode="layout": use layout (purple) colors
+ * - data-camox-overlay-mode="synced": use synced-block (purple) colors
  *
  * Elements are targeted via their existing data attributes:
  * - [data-camox-field-id]: Field, Link, Image, Embed
@@ -15,8 +15,6 @@
 :root {
   --camox-overlay-color-hover: #f472b6bf; /* pink-400 at 75% */
   --camox-overlay-color-selected: #f472b6; /* pink-400 */
-  --camox-overlay-layout-color-hover: #c084fcbf; /* purple-400 at 75% */
-  --camox-overlay-layout-color-selected: #c084fc; /* purple-400 */
   --camox-overlay-width-hover: 3px;
   --camox-overlay-width-selected: 1px;
   --camox-overlay-inset-field-hover: -1px;
@@ -79,35 +77,10 @@
   box-shadow: 0 0 0 var(--camox-overlay-width-selected) var(--camox-overlay-color-selected) !important;
 }
 
-/* ---- Layout mode color overrides ---- */
-
-[data-camox-field-id][data-camox-field-type][data-camox-overlay-mode="layout"][data-camox-hovered]::after,
-[data-camox-block-id][data-camox-overlay-mode="layout"][data-camox-hovered]:not(
-    [data-camox-detached]
-  )::after,
-[data-camox-repeater-item-id][data-camox-overlay-mode="layout"][data-camox-hovered]::after {
-  border-color: var(--camox-overlay-layout-color-hover);
-}
-
-[data-camox-field-id][data-camox-field-type][data-camox-overlay-mode="layout"][data-camox-focused]::after,
-[data-camox-block-id][data-camox-overlay-mode="layout"][data-camox-focused]:not(
-    [data-camox-detached]
-  )::after {
-  border-color: var(--camox-overlay-layout-color-selected);
-}
-
-[data-camox-field-id]:not(
-    [data-camox-field-type]
-  )[data-camox-overlay-mode="layout"][data-camox-hovered] {
-  box-shadow: 0 0 0 var(--camox-overlay-width-hover) var(--camox-overlay-layout-color-hover) !important;
-  border-radius: 0 !important;
-}
-
-[data-camox-field-id]:not(
-    [data-camox-field-type]
-  )[data-camox-overlay-mode="layout"][data-camox-focused] {
-  box-shadow: 0 0 0 var(--camox-overlay-width-selected) var(--camox-overlay-layout-color-selected) !important;
-  border-radius: 0 !important;
+/* Shared data is purple, regardless of whether its placement is in a layout. */
+[data-camox-overlay-mode="synced"] {
+  --camox-overlay-color-hover: #c084fcbf;
+  --camox-overlay-color-selected: #c084fc;
 }
 
 /* ---- Embed: z-index above click-interceptor ---- */
@@ -130,14 +103,6 @@
   border: var(--camox-overlay-width-selected) solid var(--camox-overlay-color-selected);
 }
 
-[data-camox-detached][data-camox-overlay-mode="layout"][data-camox-hovered] {
-  border-color: var(--camox-overlay-layout-color-hover);
-}
-
-[data-camox-detached][data-camox-overlay-mode="layout"][data-camox-focused] {
-  border-color: var(--camox-overlay-layout-color-selected);
-}
-
 /* ---- Add-block overlay ---- */
 
 .camox-sheet-overlay {