camox 0.3.0 → 0.4.0

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

@@ -1,107 +1,308 @@
 import { AuthContext } from "../../../lib/auth.js";
 import { projectQueries } from "../../../lib/queries.js";
+import { c } from "react/compiler-runtime";
 import { useQuery } from "@tanstack/react-query";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@camox/ui/button";
-import { ChevronDown, Globe, Settings, Users } from "lucide-react";
+import { Link } from "@tanstack/react-router";
+import { ChevronDown, Globe, Info, Settings, Users } from "lucide-react";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "@camox/ui/dropdown-menu";
 import { Skeleton } from "@camox/ui/skeleton";
 //#region src/features/studio/components/ProjectMenu.tsx
-var Favicon = ({ size = 16 }) => {
+var Favicon = (t0) => {
+	const $ = c(18);
+	const { size: t1 } = t0;
+	const size = t1 === void 0 ? 16 : t1;
 	const [faviconUrl, setFaviconUrl] = React.useState(null);
 	const [hasError, setHasError] = React.useState(false);
-	React.useEffect(() => {
-		const getFaviconUrl = () => {
-			for (const selector of [
-				"link[rel=\"icon\"]",
-				"link[rel=\"shortcut icon\"]",
-				"link[rel=\"apple-touch-icon\"]"
-			]) {
-				const link = document.querySelector(selector);
-				if (link?.href) return link.href;
-			}
-			return null;
+	let t2;
+	let t3;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = () => {
+			setFaviconUrl(_temp());
 		};
-		setFaviconUrl(getFaviconUrl());
-	}, []);
-	if (!faviconUrl || hasError) return /* @__PURE__ */ jsx("div", {
-		className: "bg-muted flex items-center justify-center rounded-full",
-		style: {
+		t3 = [];
+		$[0] = t2;
+		$[1] = t3;
+	} else {
+		t2 = $[0];
+		t3 = $[1];
+	}
+	React.useEffect(t2, t3);
+	if (!faviconUrl || hasError) {
+		let t4;
+		if ($[2] !== size) {
+			t4 = {
+				height: size,
+				width: size
+			};
+			$[2] = size;
+			$[3] = t4;
+		} else t4 = $[3];
+		const t5 = size * .6;
+		const t6 = size * .6;
+		let t7;
+		if ($[4] !== t5 || $[5] !== t6) {
+			t7 = /* @__PURE__ */ jsx(Globe, {
+				className: "text-muted-foreground",
+				style: {
+					height: t5,
+					width: t6
+				}
+			});
+			$[4] = t5;
+			$[5] = t6;
+			$[6] = t7;
+		} else t7 = $[6];
+		let t8;
+		if ($[7] !== t4 || $[8] !== t7) {
+			t8 = /* @__PURE__ */ jsx("div", {
+				className: "bg-muted flex items-center justify-center rounded-full",
+				style: t4,
+				children: t7
+			});
+			$[7] = t4;
+			$[8] = t7;
+			$[9] = t8;
+		} else t8 = $[9];
+		return t8;
+	}
+	let t4;
+	if ($[10] !== size) {
+		t4 = {
 			height: size,
 			width: size
-		},
-		children: /* @__PURE__ */ jsx(Globe, {
-			className: "text-muted-foreground",
-			style: {
-				height: size * .6,
-				width: size * .6
-			}
-		})
-	});
-	return /* @__PURE__ */ jsx("div", {
-		className: "bg-muted flex items-center justify-center overflow-hidden rounded-full",
-		style: {
-			height: size,
-			width: size
-		},
-		children: /* @__PURE__ */ jsx("img", {
+		};
+		$[10] = size;
+		$[11] = t4;
+	} else t4 = $[11];
+	let t5;
+	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = () => setHasError(true);
+		$[12] = t5;
+	} else t5 = $[12];
+	let t6;
+	if ($[13] !== faviconUrl) {
+		t6 = /* @__PURE__ */ jsx("img", {
 			src: faviconUrl,
 			alt: "Favicon",
 			className: "h-full w-full object-cover",
-			onError: () => setHasError(true)
-		})
-	});
+			onError: t5
+		});
+		$[13] = faviconUrl;
+		$[14] = t6;
+	} else t6 = $[14];
+	let t7;
+	if ($[15] !== t4 || $[16] !== t6) {
+		t7 = /* @__PURE__ */ jsx("div", {
+			className: "bg-muted flex items-center justify-center overflow-hidden rounded-full",
+			style: t4,
+			children: t6
+		});
+		$[15] = t4;
+		$[16] = t6;
+		$[17] = t7;
+	} else t7 = $[17];
+	return t7;
 };
 var ProjectMenu = () => {
+	const $ = c(41);
 	const authCtx = React.useContext(AuthContext);
-	const { data: project } = useQuery(projectQueries.getBySlug(authCtx.projectSlug));
-	if (!project) return /* @__PURE__ */ jsxs("div", {
-		className: "flex h-9 min-w-[150px] items-center gap-2 px-4",
-		children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-4 rounded-full" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-3 flex-1" })]
-	});
-	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
-		asChild: true,
-		children: /* @__PURE__ */ jsxs(Button, {
-			variant: "ghost",
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: "flex items-center gap-2",
-				children: [/* @__PURE__ */ jsx(Favicon, { size: 16 }), /* @__PURE__ */ jsx("span", {
-					className: "select-none",
-					children: project.name
-				})]
-			}), /* @__PURE__ */ jsx(ChevronDown, { className: "ml-1 h-4 w-4 shrink-0 opacity-50" })]
-		})
-	}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
-		className: "w-72",
-		align: "start",
-		side: "bottom",
-		children: [
-			/* @__PURE__ */ jsxs(DropdownMenuItem, {
-				onSelect: () => {
-					if (authCtx) window.open(`${authCtx.authenticationUrl}/dashboard/${project.organizationSlug}/${project.slug}/overview`, "_blank");
-				},
-				children: [/* @__PURE__ */ jsx(Settings, { className: "mr-2 h-4 w-4" }), "Project settings"]
-			}),
-			/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-			/* @__PURE__ */ jsx(DropdownMenuLabel, {
-				className: "text-muted-foreground text-xs font-normal",
-				children: project.organizationSlug
-			}),
-			/* @__PURE__ */ jsxs(DropdownMenuItem, {
-				onSelect: () => {
-					if (authCtx) window.open(`${authCtx.authenticationUrl}/dashboard/${project.organizationSlug}/team?tab=members`, "_blank");
-				},
-				children: [/* @__PURE__ */ jsx(Users, { className: "mr-2 h-4 w-4" }), "Team members"]
-			}),
-			/* @__PURE__ */ jsxs(DropdownMenuItem, {
-				onSelect: () => {
-					if (authCtx) window.open(`${authCtx.authenticationUrl}/dashboard/${project.organizationSlug}/team?tab=settings`, "_blank");
-				},
-				children: [/* @__PURE__ */ jsx(Settings, { className: "mr-2 h-4 w-4" }), "Team settings"]
+	let t0;
+	if ($[0] !== authCtx.projectSlug) {
+		t0 = projectQueries.getBySlug(authCtx.projectSlug);
+		$[0] = authCtx.projectSlug;
+		$[1] = t0;
+	} else t0 = $[1];
+	const { data: project } = useQuery(t0);
+	if (!project) {
+		let t1;
+		if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+			t1 = /* @__PURE__ */ jsxs("div", {
+				className: "flex h-9 min-w-[150px] items-center gap-2 px-4",
+				children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-4 rounded-full" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-3 flex-1" })]
+			});
+			$[2] = t1;
+		} else t1 = $[2];
+		return t1;
+	}
+	let t1;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(Favicon, { size: 16 });
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== project.name) {
+		t2 = /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [t1, /* @__PURE__ */ jsx("span", {
+				className: "select-none",
+				children: project.name
+			})]
+		});
+		$[4] = project.name;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(ChevronDown, { className: "shrink-0 opacity-50" });
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t2) {
+		t4 = /* @__PURE__ */ jsx(DropdownMenuTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs(Button, {
+				variant: "ghost",
+				children: [t2, t3]
+			})
+		});
+		$[7] = t2;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== authCtx || $[10] !== project.organizationSlug || $[11] !== project.slug) {
+		t5 = () => {
+			if (authCtx) window.open(`${authCtx.authenticationUrl}/dashboard/${project.organizationSlug}/${project.slug}/overview`, "_blank");
+		};
+		$[9] = authCtx;
+		$[10] = project.organizationSlug;
+		$[11] = project.slug;
+		$[12] = t5;
+	} else t5 = $[12];
+	let t6;
+	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx(Settings, {});
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== t5) {
+		t7 = /* @__PURE__ */ jsxs(DropdownMenuItem, {
+			onSelect: t5,
+			children: [t6, "Project settings"]
+		});
+		$[14] = t5;
+		$[15] = t7;
+	} else t7 = $[15];
+	let t8;
+	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = /* @__PURE__ */ jsx(DropdownMenuSeparator, {});
+		$[16] = t8;
+	} else t8 = $[16];
+	let t9;
+	if ($[17] !== project.organizationSlug) {
+		t9 = /* @__PURE__ */ jsx(DropdownMenuLabel, {
+			className: "text-muted-foreground text-xs font-normal",
+			children: project.organizationSlug
+		});
+		$[17] = project.organizationSlug;
+		$[18] = t9;
+	} else t9 = $[18];
+	let t10;
+	if ($[19] !== authCtx || $[20] !== project.organizationSlug) {
+		t10 = () => {
+			if (authCtx) window.open(`${authCtx.authenticationUrl}/dashboard/${project.organizationSlug}/team?tab=members`, "_blank");
+		};
+		$[19] = authCtx;
+		$[20] = project.organizationSlug;
+		$[21] = t10;
+	} else t10 = $[21];
+	let t11;
+	if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = /* @__PURE__ */ jsx(Users, {});
+		$[22] = t11;
+	} else t11 = $[22];
+	let t12;
+	if ($[23] !== t10) {
+		t12 = /* @__PURE__ */ jsxs(DropdownMenuItem, {
+			onSelect: t10,
+			children: [t11, "Team members"]
+		});
+		$[23] = t10;
+		$[24] = t12;
+	} else t12 = $[24];
+	let t13;
+	if ($[25] !== authCtx || $[26] !== project.organizationSlug) {
+		t13 = () => {
+			if (authCtx) window.open(`${authCtx.authenticationUrl}/dashboard/${project.organizationSlug}/team?tab=settings`, "_blank");
+		};
+		$[25] = authCtx;
+		$[26] = project.organizationSlug;
+		$[27] = t13;
+	} else t13 = $[27];
+	let t14;
+	if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = /* @__PURE__ */ jsx(Settings, { className: "h-4 w-4" });
+		$[28] = t14;
+	} else t14 = $[28];
+	let t15;
+	if ($[29] !== t13) {
+		t15 = /* @__PURE__ */ jsxs(DropdownMenuItem, {
+			onSelect: t13,
+			children: [t14, "Team settings"]
+		});
+		$[29] = t13;
+		$[30] = t15;
+	} else t15 = $[30];
+	let t16;
+	if ($[31] === Symbol.for("react.memo_cache_sentinel")) {
+		t16 = /* @__PURE__ */ jsx(DropdownMenuSeparator, {});
+		$[31] = t16;
+	} else t16 = $[31];
+	let t17;
+	if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
+		t17 = /* @__PURE__ */ jsx(DropdownMenuItem, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs(Link, {
+				to: "https://camox.ai",
+				target: "_blank",
+				children: [/* @__PURE__ */ jsx(Info, { className: "h-4 w-4" }), "Powered by Camox"]
 			})
-		]
-	})] });
+		});
+		$[32] = t17;
+	} else t17 = $[32];
+	let t18;
+	if ($[33] !== t12 || $[34] !== t15 || $[35] !== t7 || $[36] !== t9) {
+		t18 = /* @__PURE__ */ jsxs(DropdownMenuContent, {
+			className: "w-72",
+			align: "start",
+			side: "bottom",
+			children: [
+				t7,
+				t8,
+				t9,
+				t12,
+				t15,
+				t16,
+				t17
+			]
+		});
+		$[33] = t12;
+		$[34] = t15;
+		$[35] = t7;
+		$[36] = t9;
+		$[37] = t18;
+	} else t18 = $[37];
+	let t19;
+	if ($[38] !== t18 || $[39] !== t4) {
+		t19 = /* @__PURE__ */ jsxs(DropdownMenu, { children: [t4, t18] });
+		$[38] = t18;
+		$[39] = t4;
+		$[40] = t19;
+	} else t19 = $[40];
+	return t19;
 };
+function _temp() {
+	for (const selector of [
+		"link[rel=\"icon\"]",
+		"link[rel=\"shortcut icon\"]",
+		"link[rel=\"apple-touch-icon\"]"
+	]) {
+		const link = document.querySelector(selector);
+		if (link?.href) return link.href;
+	}
+	return null;
+}
 //#endregion
 export { ProjectMenu };

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

@@ -1,5 +1,6 @@
 import { AuthContext, useAuthState } from "../../../lib/auth.js";
 import { useTheme } from "../useTheme.js";
+import { c } from "react/compiler-runtime";
 import { useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@camox/ui/button";
@@ -8,14 +9,28 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel,
 import { Avatar, AvatarFallback, AvatarImage } from "@camox/ui/avatar";
 //#region src/features/studio/components/UserButton.tsx
 var UserButton = () => {
+	const $ = c(3);
 	const { isAuthenticated, isLoading } = useAuthState();
 	const { setTheme } = useTheme();
-	if (!isAuthenticated || isLoading) return /* @__PURE__ */ jsx(Button, {
-		variant: "outline",
-		size: "icon",
-		children: /* @__PURE__ */ jsx(User, { className: "h-4 w-4" })
-	});
-	return /* @__PURE__ */ jsx(AuthenticatedUserButton, { setTheme });
+	if (!isAuthenticated || isLoading) {
+		let t0;
+		if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+			t0 = /* @__PURE__ */ jsx(Button, {
+				variant: "outline",
+				size: "icon",
+				children: /* @__PURE__ */ jsx(User, { className: "h-4 w-4" })
+			});
+			$[0] = t0;
+		} else t0 = $[0];
+		return t0;
+	}
+	let t0;
+	if ($[1] !== setTheme) {
+		t0 = /* @__PURE__ */ jsx(AuthenticatedUserButton, { setTheme });
+		$[1] = setTheme;
+		$[2] = t0;
+	} else t0 = $[2];
+	return t0;
 };
 function AuthenticatedUserButton({ setTheme }) {
 	const authCtx = useContext(AuthContext);

package/dist/features/studio/studioStore.d.ts

@@ -2,7 +2,7 @@ interface StudioContext {
     isCommandPaletteOpen: boolean;
     commandPalettePages: string[];
 }
-export declare const studioStore: import('@xstate/store').Store<StudioContext, import('@xstate/store').ExtractEvents<{
+export declare const studioStore: import('@xstate/store').Store<StudioContext, {
     openCommandPalette: unknown;
     closeCommandPalette: unknown;
     toggleCommandPalette: unknown;
@@ -10,7 +10,7 @@ export declare const studioStore: import('@xstate/store').Store<StudioContext, i
         page: string;
     };
     popCommandPalettePage: unknown;
-}>, {
+}, {
     type: string;
 }>;
 export {};

package/dist/features/studio/useTheme.js

@@ -1,87 +1,141 @@
 import { actionsStore } from "../provider/actionsStore.js";
+import { c } from "react/compiler-runtime";
 import * as React from "react";
 //#region src/features/studio/useTheme.ts
 function useTheme() {
-	const [theme, setTheme] = React.useState(() => {
-		if (typeof window !== "undefined") return localStorage.getItem("theme") || "system";
-		return "system";
-	});
-	const applyTheme = (themeToApply) => {
-		const root = window.document.documentElement;
-		root.classList.remove("light", "dark");
-		root.classList.add(themeToApply);
-	};
-	React.useEffect(() => {
-		const root = window.document.documentElement;
-		root.classList.remove("light", "dark");
-		if (theme === "system") {
-			const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-			const updateSystemTheme = () => {
-				applyTheme(mediaQuery.matches ? "dark" : "light");
-			};
-			updateSystemTheme();
-			mediaQuery.addEventListener("change", updateSystemTheme);
-			return () => mediaQuery.removeEventListener("change", updateSystemTheme);
-		}
-		root.classList.add(theme);
-	}, [theme]);
-	React.useEffect(() => {
-		localStorage.setItem("theme", theme);
-	}, [theme]);
-	return {
-		theme,
-		setTheme
-	};
+	const $ = c(8);
+	const [theme, setTheme] = React.useState(_temp);
+	const applyTheme = _temp2;
+	let t0;
+	let t1;
+	if ($[0] !== theme) {
+		t0 = () => {
+			const root_0 = window.document.documentElement;
+			root_0.classList.remove("light", "dark");
+			if (theme === "system") {
+				const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+				const updateSystemTheme = () => {
+					applyTheme(mediaQuery.matches ? "dark" : "light");
+				};
+				updateSystemTheme();
+				mediaQuery.addEventListener("change", updateSystemTheme);
+				return () => mediaQuery.removeEventListener("change", updateSystemTheme);
+			}
+			root_0.classList.add(theme);
+		};
+		t1 = [theme];
+		$[0] = theme;
+		$[1] = t0;
+		$[2] = t1;
+	} else {
+		t0 = $[1];
+		t1 = $[2];
+	}
+	React.useEffect(t0, t1);
+	let t2;
+	let t3;
+	if ($[3] !== theme) {
+		t2 = () => {
+			localStorage.setItem("theme", theme);
+		};
+		t3 = [theme];
+		$[3] = theme;
+		$[4] = t2;
+		$[5] = t3;
+	} else {
+		t2 = $[4];
+		t3 = $[5];
+	}
+	React.useEffect(t2, t3);
+	let t4;
+	if ($[6] !== theme) {
+		t4 = {
+			theme,
+			setTheme
+		};
+		$[6] = theme;
+		$[7] = t4;
+	} else t4 = $[7];
+	return t4;
+}
+function _temp2(themeToApply) {
+	const root = window.document.documentElement;
+	root.classList.remove("light", "dark");
+	root.classList.add(themeToApply);
+}
+function _temp() {
+	if (typeof window !== "undefined") return localStorage.getItem("theme") || "system";
+	return "system";
 }
 function useThemeActions() {
+	const $ = c(4);
 	const { theme, setTheme } = useTheme();
-	React.useEffect(() => {
-		const pageId = "change-theme";
-		const actions = [
-			{
-				id: pageId,
-				label: "Change theme",
-				groupLabel: "Studio",
-				checkIfAvailable: () => true,
-				hasChildren: true,
-				execute: () => {}
-			},
-			{
-				id: "switch-to-light-theme",
-				parentActionId: pageId,
-				label: "Switch to light theme",
-				groupLabel: "Studio",
-				checkIfAvailable: () => theme !== "light",
-				execute: () => setTheme("light")
-			},
-			{
-				id: "switch-to-dark-theme",
-				parentActionId: pageId,
-				label: "Switch to dark theme",
-				groupLabel: "Studio",
-				checkIfAvailable: () => theme !== "dark",
-				execute: () => setTheme("dark")
-			},
-			{
-				id: "switch-to-system-theme",
-				parentActionId: pageId,
-				label: "Switch to system theme",
-				groupLabel: "Studio",
-				checkIfAvailable: () => theme !== "system",
-				execute: () => setTheme("system")
-			}
-		];
-		actionsStore.send({
-			type: "registerManyActions",
-			actions
-		});
-		return () => {
+	let t0;
+	let t1;
+	if ($[0] !== setTheme || $[1] !== theme) {
+		t0 = () => {
+			const actions = [
+				{
+					id: "change-theme",
+					label: "Change theme",
+					groupLabel: "Studio",
+					checkIfAvailable: _temp3,
+					hasChildren: true,
+					execute: _temp4
+				},
+				{
+					id: "switch-to-light-theme",
+					parentActionId: "change-theme",
+					label: "Switch to light theme",
+					groupLabel: "Studio",
+					checkIfAvailable: () => theme !== "light",
+					execute: () => setTheme("light")
+				},
+				{
+					id: "switch-to-dark-theme",
+					parentActionId: "change-theme",
+					label: "Switch to dark theme",
+					groupLabel: "Studio",
+					checkIfAvailable: () => theme !== "dark",
+					execute: () => setTheme("dark")
+				},
+				{
+					id: "switch-to-system-theme",
+					parentActionId: "change-theme",
+					label: "Switch to system theme",
+					groupLabel: "Studio",
+					checkIfAvailable: () => theme !== "system",
+					execute: () => setTheme("system")
+				}
+			];
 			actionsStore.send({
-				type: "unregisterManyActions",
-				ids: actions.map((a) => a.id)
+				type: "registerManyActions",
+				actions
 			});
+			return () => {
+				actionsStore.send({
+					type: "unregisterManyActions",
+					ids: actions.map(_temp5)
+				});
+			};
 		};
-	}, [theme, setTheme]);
+		t1 = [theme, setTheme];
+		$[0] = setTheme;
+		$[1] = theme;
+		$[2] = t0;
+		$[3] = t1;
+	} else {
+		t0 = $[2];
+		t1 = $[3];
+	}
+	React.useEffect(t0, t1);
+}
+function _temp5(a) {
+	return a.id;
+}
+function _temp4() {}
+function _temp3() {
+	return true;
 }
 //#endregion
 export { useTheme, useThemeActions };