camox 0.40.0 → 0.41.0

package/dist/features/studio/useTheme.js

@@ -1,127 +1,112 @@
 import { actionsStore } from "../provider/actionsStore.js";
+import { STUDIO_THEME_STORAGE_KEY, bootstrapStudioTheme, readStudioTheme } from "./studioTheme.js";
 import { c } from "react/compiler-runtime";
 import * as React from "react";
 
 //#region src/features/studio/useTheme.ts
 let activeThemeOwnerCount = 0;
+const listeners = /* @__PURE__ */ new Set();
+let preference;
 function readStoredTheme() {
 	if (typeof window === "undefined") return "system";
-	return localStorage.getItem("theme") || "system";
+	return preference ?? readStudioTheme();
+}
+function subscribe(listener) {
+	listeners.add(listener);
+	return () => {
+		listeners.delete(listener);
+	};
+}
+function notify() {
+	listeners.forEach((listener) => listener());
+}
+function applyTheme(theme = readStoredTheme()) {
+	bootstrapStudioTheme(theme);
+	const resolved = document.documentElement.dataset.camoxStudioTheme;
+	document.body.classList.remove("light", "dark");
+	document.body.classList.add("camox-studio-theme", resolved);
+	document.body.dataset.camoxStudioTheme = resolved;
+}
+function setTheme(theme) {
+	preference = theme;
+	try {
+		localStorage.setItem(STUDIO_THEME_STORAGE_KEY, theme);
+	} catch {}
+	applyTheme(theme);
+	notify();
 }
-/**
-* Owns the studio theme: writes the active class onto `<html>` and persists
-* changes to localStorage. Should only be mounted from the studio chrome —
-* never from contexts that share `<html>` with the user's site.
-*/
 function useApplyTheme() {
-	const $ = c(10);
-	if ($[0] !== "da3935c3f496f05138d1e012522f8d34be97b470fa5c8f37185df49127eab10f") {
-		for (let $i = 0; $i < 10; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "da3935c3f496f05138d1e012522f8d34be97b470fa5c8f37185df49127eab10f";
+	const $ = c(5);
+	if ($[0] !== "5860ae8e48f7dc27e488236def482df22f144de61ae2d86bfde82aeeea4f9874") {
+		for (let $i = 0; $i < 5; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "5860ae8e48f7dc27e488236def482df22f144de61ae2d86bfde82aeeea4f9874";
 	}
-	const [theme, setTheme] = React.useState(readStoredTheme);
-	const [resolvedTheme, setResolvedTheme] = React.useState("light");
+	const theme = React.useSyncExternalStore(subscribe, readStoredTheme, _temp2);
+	const resolvedTheme = React.useSyncExternalStore(subscribe, _temp3, _temp4);
 	let t0;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = [];
+		$[1] = t0;
+	} else t0 = $[1];
+	React.useEffect(_temp7, t0);
 	let t1;
-	if ($[1] !== theme) {
-		t0 = () => {
-			const root = window.document.documentElement;
-			const body = window.document.body;
-			activeThemeOwnerCount = activeThemeOwnerCount + 1;
-			const applyTheme = (themeToApply) => {
-				setResolvedTheme(themeToApply);
-				root.classList.remove("light", "dark");
-				root.classList.add(themeToApply);
-				root.dataset.camoxStudioTheme = themeToApply;
-				body.classList.remove("light", "dark");
-				body.classList.add("camox-studio-theme", themeToApply);
-				body.dataset.camoxStudioTheme = themeToApply;
-			};
-			const resolveTheme = () => {
-				if (theme !== "system") return theme;
-				return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-			};
-			applyTheme(resolveTheme());
-			const observer = new MutationObserver(() => {
-				const themeToApply_0 = resolveTheme();
-				if (root.classList.contains(themeToApply_0) && body.classList.contains(themeToApply_0)) return;
-				applyTheme(themeToApply_0);
-			});
-			observer.observe(root, {
-				attributes: true,
-				attributeFilter: ["class"]
-			});
-			observer.observe(body, {
-				attributes: true,
-				attributeFilter: ["class"]
-			});
-			if (theme === "system") {
-				const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-				const updateSystemTheme = () => applyTheme(resolveTheme());
-				mediaQuery.addEventListener("change", updateSystemTheme);
-				return () => {
-					mediaQuery.removeEventListener("change", updateSystemTheme);
-					observer.disconnect();
-					activeThemeOwnerCount = activeThemeOwnerCount - 1;
-					if (activeThemeOwnerCount > 0) return;
-					root.classList.remove("light", "dark");
-					delete root.dataset.camoxStudioTheme;
-					body.classList.remove("camox-studio-theme", "light", "dark");
-					delete body.dataset.camoxStudioTheme;
-				};
-			}
-			return () => {
-				observer.disconnect();
-				activeThemeOwnerCount = activeThemeOwnerCount - 1;
-				if (activeThemeOwnerCount > 0) return;
-				root.classList.remove("light", "dark");
-				delete root.dataset.camoxStudioTheme;
-				body.classList.remove("camox-studio-theme", "light", "dark");
-				delete body.dataset.camoxStudioTheme;
-			};
-		};
-		t1 = [theme];
-		$[1] = theme;
-		$[2] = t0;
-		$[3] = t1;
-	} else {
-		t0 = $[2];
-		t1 = $[3];
-	}
-	React.useEffect(t0, t1);
-	let t2;
-	let t3;
-	if ($[4] !== theme) {
-		t2 = () => {
-			localStorage.setItem("theme", theme);
-		};
-		t3 = [theme];
-		$[4] = theme;
-		$[5] = t2;
-		$[6] = t3;
-	} else {
-		t2 = $[5];
-		t3 = $[6];
-	}
-	React.useEffect(t2, t3);
-	let t4;
-	if ($[7] !== resolvedTheme || $[8] !== theme) {
-		t4 = {
+	if ($[2] !== resolvedTheme || $[3] !== theme) {
+		t1 = {
 			theme,
 			resolvedTheme,
 			setTheme
 		};
-		$[7] = resolvedTheme;
-		$[8] = theme;
-		$[9] = t4;
-	} else t4 = $[9];
-	return t4;
+		$[2] = resolvedTheme;
+		$[3] = theme;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
+}
+function _temp7() {
+	const root = window.document.documentElement;
+	const body = window.document.body;
+	activeThemeOwnerCount = activeThemeOwnerCount + 1;
+	setTheme(readStoredTheme());
+	const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+	const updateSystemTheme = _temp5;
+	const onStorage = _temp6;
+	mediaQuery.addEventListener("change", updateSystemTheme);
+	window.addEventListener("storage", onStorage);
+	return () => {
+		mediaQuery.removeEventListener("change", updateSystemTheme);
+		window.removeEventListener("storage", onStorage);
+		activeThemeOwnerCount = activeThemeOwnerCount - 1;
+		if (activeThemeOwnerCount > 0) return;
+		root.classList.remove("light", "dark");
+		root.style.removeProperty("color-scheme");
+		delete root.dataset.camoxStudioTheme;
+		body.classList.remove("camox-studio-theme", "light", "dark");
+		delete body.dataset.camoxStudioTheme;
+	};
+}
+function _temp6(event) {
+	if (event.key !== "camox:studio:theme" && event.key !== null) return;
+	preference = void 0;
+	applyTheme();
+	notify();
+}
+function _temp5() {
+	if (readStoredTheme() === "system") setTheme("system");
+}
+function _temp4() {
+	return "light";
+}
+function _temp3() {
+	return document.documentElement.dataset.camoxStudioTheme === "dark" ? "dark" : "light";
+}
+function _temp2() {
+	return "system";
 }
 function useThemeActions() {
 	const $ = c(5);
-	if ($[0] !== "da3935c3f496f05138d1e012522f8d34be97b470fa5c8f37185df49127eab10f") {
+	if ($[0] !== "5860ae8e48f7dc27e488236def482df22f144de61ae2d86bfde82aeeea4f9874") {
 		for (let $i = 0; $i < 5; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "da3935c3f496f05138d1e012522f8d34be97b470fa5c8f37185df49127eab10f";
+		$[0] = "5860ae8e48f7dc27e488236def482df22f144de61ae2d86bfde82aeeea4f9874";
 	}
 	const { theme, setTheme } = useApplyTheme();
 	let t0;
@@ -138,9 +123,9 @@ function useThemeActions() {
 						"Color mode"
 					],
 					groupLabel: "Studio",
-					checkIfAvailable: _temp,
+					checkIfAvailable: _temp8,
 					hasChildren: true,
-					execute: _temp2
+					execute: _temp9
 				},
 				{
 					id: "switch-to-light-theme",
@@ -177,7 +162,7 @@ function useThemeActions() {
 			return () => {
 				actionsStore.send({
 					type: "unregisterManyActions",
-					ids: actions.map(_temp3)
+					ids: actions.map(_temp0)
 				});
 			};
 		};
@@ -192,11 +177,11 @@ function useThemeActions() {
 	}
 	React.useEffect(t0, t1);
 }
-function _temp3(a) {
+function _temp0(a) {
 	return a.id;
 }
-function _temp2() {}
-function _temp() {
+function _temp9() {}
+function _temp8() {
 	return true;
 }
 

package/dist/features/vite/appGeneration.js

@@ -1,4 +1,5 @@
 import { writeIfChanged } from "./utils.js";
+import { generateLayoutFiles } from "./layoutGeneration.js";
 import { readFileSync, writeFileSync } from "node:fs";
 import { relative, resolve } from "node:path";
 
@@ -28,16 +29,16 @@ const blocks = [...Object.values(blockModules), ...Object.values(legacyBlockModu
 );
 
 // Auto-import all layouts from the first-class layouts directory
-const layoutModules = import.meta.glob<{ layout: Layout }>(
+const layoutModules = import.meta.glob<{ layout?: Layout; Layout?: Layout }>(
   '../layouts/*.{ts,tsx}',
   { eager: true },
 );
-const legacyLayoutModules = import.meta.glob<{ layout: Layout }>(
+const legacyLayoutModules = import.meta.glob<{ layout?: Layout; Layout?: Layout }>(
   './layouts/*.{ts,tsx}',
   { eager: true },
 );
 const layouts = [...Object.values(layoutModules), ...Object.values(legacyLayoutModules)].map(
-  (mod) => mod.layout,
+  (mod) => (mod.Layout ?? mod.layout)!,
 );
 
 export const camoxApp = createApp({
@@ -53,9 +54,17 @@ function getAppFileEntries(appRoot) {
 	}];
 }
 function generateAppFile(appRoot) {
+	generateLayoutFiles(appRoot);
 	for (const entry of getAppFileEntries(appRoot)) writeIfChanged(entry.path, entry.content);
 }
 function watchAppFile(server, appRoot) {
+	for (const event of [
+		"add",
+		"change",
+		"unlink"
+	]) server.watcher.on(event, (path) => {
+		if (path.startsWith(resolve(appRoot, "src/layouts") + "/")) generateLayoutFiles(appRoot);
+	});
 	const entries = getAppFileEntries(appRoot);
 	const expectedByPath = new Map(entries.map((e) => [e.path, e.content]));
 	server.watcher.on("change", (changedPath) => {

package/dist/features/vite/definitionsSync.js

@@ -32,7 +32,8 @@ async function syncDefinitionsToApi(options) {
 		settingsSchema: block._internal.settingsSchema,
 		defaultContent: block._internal.getInitialContent(),
 		defaultSettings: block._internal.getInitialSettings(),
-		layoutOnly: block._internal.layoutOnly || void 0
+		layoutOnly: block._internal.layoutOnly || void 0,
+		synced: block._internal.synced
 	}));
 	let environmentCreated = false;
 	let deletedDefinitionTypes = [];
@@ -186,7 +187,8 @@ async function syncDefinitions(server, options) {
 				settingsSchema: block._internal.settingsSchema,
 				defaultContent: block._internal.getInitialContent(),
 				defaultSettings: block._internal.getInitialSettings(),
-				layoutOnly: block._internal.layoutOnly || void 0
+				layoutOnly: block._internal.layoutOnly || void 0,
+				synced: block._internal.synced
 			});
 		} catch (error) {
 			throwIfSyncAuthError(error);

package/dist/features/vite/layoutGeneration.js

@@ -0,0 +1,38 @@
+import { writeIfChanged } from "./utils.js";
+import { existsSync, readFileSync, readdirSync } from "node:fs";
+import { basename, resolve } from "node:path";
+
+//#region src/features/vite/layoutGeneration.ts
+/** Keep file identities stable across moves without executing application modules. */
+function generateLayoutFiles(appRoot) {
+	const directory = resolve(appRoot, "src/layouts");
+	if (!existsSync(directory)) return;
+	const declarations = [];
+	for (const file of readdirSync(directory).sort()) {
+		if (!/\.(ts|tsx)$/.test(file) || file.endsWith(".d.ts")) continue;
+		const id = basename(file).replace(/\.(ts|tsx)$/, "");
+		const path = resolve(directory, file);
+		let source = readFileSync(path, "utf8");
+		if (!source.trim()) source = `import { createLayout } from "camox/createLayout";
+
+export const Layout = createLayout(${JSON.stringify(id)})({
+  kind: "curated",
+  title: ${JSON.stringify(id)},
+  description: "",
+  blocks: { before: [], after: [] },
+  buildMetaTitle: ({ pageMetaTitle }) => pageMetaTitle,
+  component: ({ children }) => <main><Layout.BeforeBlocks />{children}<Layout.AfterBlocks /></main>,
+});
+`;
+		source = source.replace(/(createLayout\(\s*)["'][^"']+["'](\s*\)\s*\()/g, `$1${JSON.stringify(id)}$2`);
+		writeIfChanged(path, source);
+		const segments = id.split(".");
+		const route = "/" + segments.map((segment) => segment.startsWith("$") ? `:${segment.slice(1)}` : segment).join("/");
+		const params = segments.filter((segment) => segment.startsWith("$")).map((segment) => `${JSON.stringify(segment.slice(1))}: string`).join("; ");
+		declarations.push(`${JSON.stringify(id)}: { route: ${JSON.stringify(route)}; params: { ${params} } };`);
+	}
+	writeIfChanged(resolve(appRoot, "src/camox/layouts.gen.d.ts"), `// Generated by Camox.\nimport "camox/createLayout";\ndeclare module "camox/createLayout" {\n  interface LayoutFileRoutes {\n    ${declarations.join("\n    ")}\n  }\n}\n`);
+}
+
+//#endregion
+export { generateLayoutFiles };

package/dist/features/vite/runtimeDev.js

@@ -79,7 +79,7 @@ const blocks = [...Object.values(rootBlockModules), ...Object.values(legacyBlock
   .map((mod) => mod.block)
   .filter(Boolean);
 const layouts = [...Object.values(rootLayoutModules), ...Object.values(legacyLayoutModules)]
-  .map((mod) => mod.layout)
+  .map((mod) => mod.Layout ?? mod.layout)
   .filter(Boolean);
 
 export const camoxApp = createApp({ blocks, layouts });
@@ -146,6 +146,7 @@ function generateVirtualCamoxServer(runtimeBasePath) {
 import { camoxApp } from "virtual:camox/app";
 import { camoxDocument } from "virtual:camox/document";
 import appStylesheetUrl from "virtual:camox/app-stylesheet-url";
+import studioStylesheetUrl from "virtual:camox-studio-css";
 import pageClientEntryUrl from "virtual:camox/page-client-url";
 import studioClientEntryUrl from "virtual:camox/studio-client-url";
 import { renderPage } from "virtual:camox/page-server";
@@ -165,6 +166,7 @@ export async function handleCamoxRequest(request) {
     renderStudio,
     runtimeBasePath: ${JSON.stringify(runtimeBasePath)},
     stylesheetUrl: appStylesheetUrl,
+    studioStylesheetUrl,
   });
 }
 `;

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