camox 0.14.2 → 0.16.0

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

@@ -12,39 +12,43 @@ import { Skeleton } from "@camox/ui/skeleton";
 
 //#region src/features/studio/components/ProjectMenu.tsx
 const Favicon = (t0) => {
-	const $ = c(18);
+	const $ = c(19);
+	if ($[0] !== "40bfae178d4420104da32b869316c5a2f7a1b383b1d8724af7281134abe451e3") {
+		for (let $i = 0; $i < 19; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "40bfae178d4420104da32b869316c5a2f7a1b383b1d8724af7281134abe451e3";
+	}
 	const { size: t1 } = t0;
 	const size = t1 === void 0 ? 16 : t1;
 	const [faviconUrl, setFaviconUrl] = React.useState(null);
 	const [hasError, setHasError] = React.useState(false);
 	let t2;
 	let t3;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
 		t2 = () => {
 			setFaviconUrl(_temp());
 		};
 		t3 = [];
-		$[0] = t2;
-		$[1] = t3;
+		$[1] = t2;
+		$[2] = t3;
 	} else {
-		t2 = $[0];
-		t3 = $[1];
+		t2 = $[1];
+		t3 = $[2];
 	}
 	React.useEffect(t2, t3);
 	if (!faviconUrl || hasError) {
 		let t4;
-		if ($[2] !== size) {
+		if ($[3] !== size) {
 			t4 = {
 				height: size,
 				width: size
 			};
-			$[2] = size;
-			$[3] = t4;
-		} else t4 = $[3];
+			$[3] = size;
+			$[4] = t4;
+		} else t4 = $[4];
 		const t5 = size * .6;
 		const t6 = size * .6;
 		let t7;
-		if ($[4] !== t5 || $[5] !== t6) {
+		if ($[5] !== t5 || $[6] !== t6) {
 			t7 = /* @__PURE__ */ jsx(Globe, {
 				className: "text-muted-foreground",
 				style: {
@@ -52,94 +56,98 @@ const Favicon = (t0) => {
 					width: t6
 				}
 			});
-			$[4] = t5;
-			$[5] = t6;
-			$[6] = t7;
-		} else t7 = $[6];
+			$[5] = t5;
+			$[6] = t6;
+			$[7] = t7;
+		} else t7 = $[7];
 		let t8;
-		if ($[7] !== t4 || $[8] !== t7) {
+		if ($[8] !== t4 || $[9] !== 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];
+			$[8] = t4;
+			$[9] = t7;
+			$[10] = t8;
+		} else t8 = $[10];
 		return t8;
 	}
 	let t4;
-	if ($[10] !== size) {
+	if ($[11] !== size) {
 		t4 = {
 			height: size,
 			width: size
 		};
-		$[10] = size;
-		$[11] = t4;
-	} else t4 = $[11];
+		$[11] = size;
+		$[12] = t4;
+	} else t4 = $[12];
 	let t5;
-	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
 		t5 = () => setHasError(true);
-		$[12] = t5;
-	} else t5 = $[12];
+		$[13] = t5;
+	} else t5 = $[13];
 	let t6;
-	if ($[13] !== faviconUrl) {
+	if ($[14] !== faviconUrl) {
 		t6 = /* @__PURE__ */ jsx("img", {
 			src: faviconUrl,
 			alt: "Favicon",
 			className: "h-full w-full object-cover",
 			onError: t5
 		});
-		$[13] = faviconUrl;
-		$[14] = t6;
-	} else t6 = $[14];
+		$[14] = faviconUrl;
+		$[15] = t6;
+	} else t6 = $[15];
 	let t7;
-	if ($[15] !== t4 || $[16] !== t6) {
+	if ($[16] !== t4 || $[17] !== 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];
+		$[16] = t4;
+		$[17] = t6;
+		$[18] = t7;
+	} else t7 = $[18];
 	return t7;
 };
 const ProjectMenu = () => {
-	const $ = c(40);
+	const $ = c(41);
+	if ($[0] !== "40bfae178d4420104da32b869316c5a2f7a1b383b1d8724af7281134abe451e3") {
+		for (let $i = 0; $i < 41; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "40bfae178d4420104da32b869316c5a2f7a1b383b1d8724af7281134abe451e3";
+	}
 	const authCtx = React.useContext(AuthContext);
 	let t0;
-	if ($[0] !== authCtx.projectSlug) {
+	if ($[1] !== authCtx.projectSlug) {
 		t0 = projectQueries.getBySlug(authCtx.projectSlug);
-		$[0] = authCtx.projectSlug;
-		$[1] = t0;
-	} else t0 = $[1];
+		$[1] = authCtx.projectSlug;
+		$[2] = t0;
+	} else t0 = $[2];
 	const { data: project } = useQuery(t0);
 	if (!project) {
 		let t1;
-		if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		if ($[3] === 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];
+			$[3] = t1;
+		} else t1 = $[3];
 		return t1;
 	}
 	let t1;
-	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
 		t1 = /* @__PURE__ */ jsx(Button, { variant: "ghost" });
-		$[3] = t1;
-	} else t1 = $[3];
+		$[4] = t1;
+	} else t1 = $[4];
 	let t2;
-	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
 		t2 = /* @__PURE__ */ jsx(Favicon, { size: 16 });
-		$[4] = t2;
-	} else t2 = $[4];
+		$[5] = t2;
+	} else t2 = $[5];
 	let t3;
-	if ($[5] !== project.name) {
+	if ($[6] !== project.name) {
 		t3 = /* @__PURE__ */ jsxs("div", {
 			className: "flex items-center gap-2",
 			children: [t2, /* @__PURE__ */ jsx("span", {
@@ -147,131 +155,131 @@ const ProjectMenu = () => {
 				children: project.name
 			})]
 		});
-		$[5] = project.name;
-		$[6] = t3;
-	} else t3 = $[6];
+		$[6] = project.name;
+		$[7] = t3;
+	} else t3 = $[7];
 	let t4;
-	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
 		t4 = /* @__PURE__ */ jsx(ChevronDown, { className: "shrink-0 opacity-50" });
-		$[7] = t4;
-	} else t4 = $[7];
+		$[8] = t4;
+	} else t4 = $[8];
 	let t5;
-	if ($[8] !== t3) {
+	if ($[9] !== t3) {
 		t5 = /* @__PURE__ */ jsxs(DropdownMenuTrigger, {
 			render: t1,
 			children: [t3, t4]
 		});
-		$[8] = t3;
-		$[9] = t5;
-	} else t5 = $[9];
+		$[9] = t3;
+		$[10] = t5;
+	} else t5 = $[10];
 	const t6 = authCtx ? `${authCtx.authenticationUrl}/dashboard/${project.organizationSlug}/${project.slug}/overview` : "#";
 	let t7;
-	if ($[10] !== t6) {
+	if ($[11] !== t6) {
 		t7 = /* @__PURE__ */ jsx("a", {
 			href: t6,
 			target: "_blank",
 			rel: "noopener noreferrer"
 		});
-		$[10] = t6;
-		$[11] = t7;
-	} else t7 = $[11];
+		$[11] = t6;
+		$[12] = t7;
+	} else t7 = $[12];
 	let t8;
-	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
 		t8 = /* @__PURE__ */ jsx(Settings, {});
-		$[12] = t8;
-	} else t8 = $[12];
+		$[13] = t8;
+	} else t8 = $[13];
 	let t9;
-	if ($[13] !== t7) {
+	if ($[14] !== t7) {
 		t9 = /* @__PURE__ */ jsxs(DropdownMenuItem, {
 			render: t7,
 			children: [t8, "Project settings"]
 		});
-		$[13] = t7;
-		$[14] = t9;
-	} else t9 = $[14];
+		$[14] = t7;
+		$[15] = t9;
+	} else t9 = $[15];
 	let t10;
-	if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
 		t10 = /* @__PURE__ */ jsx(DropdownMenuSeparator, {});
-		$[15] = t10;
-	} else t10 = $[15];
+		$[16] = t10;
+	} else t10 = $[16];
 	let t11;
-	if ($[16] !== project.organizationSlug) {
+	if ($[17] !== project.organizationSlug) {
 		t11 = /* @__PURE__ */ jsx(DropdownMenuLabel, {
 			className: "text-muted-foreground text-xs font-normal",
 			children: project.organizationSlug
 		});
-		$[16] = project.organizationSlug;
-		$[17] = t11;
-	} else t11 = $[17];
+		$[17] = project.organizationSlug;
+		$[18] = t11;
+	} else t11 = $[18];
 	const t12 = authCtx ? `${authCtx.authenticationUrl}/dashboard/${project.organizationSlug}/team` : "#";
 	let t13;
-	if ($[18] !== t12) {
+	if ($[19] !== t12) {
 		t13 = /* @__PURE__ */ jsx("a", {
 			href: t12,
 			target: "_blank",
 			rel: "noopener noreferrer"
 		});
-		$[18] = t12;
-		$[19] = t13;
-	} else t13 = $[19];
+		$[19] = t12;
+		$[20] = t13;
+	} else t13 = $[20];
 	let t14;
-	if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
 		t14 = /* @__PURE__ */ jsx(Users, {});
-		$[20] = t14;
-	} else t14 = $[20];
+		$[21] = t14;
+	} else t14 = $[21];
 	let t15;
-	if ($[21] !== t13) {
+	if ($[22] !== t13) {
 		t15 = /* @__PURE__ */ jsxs(DropdownMenuItem, {
 			render: t13,
 			children: [t14, "Team members"]
 		});
-		$[21] = t13;
-		$[22] = t15;
-	} else t15 = $[22];
+		$[22] = t13;
+		$[23] = t15;
+	} else t15 = $[23];
 	const t16 = authCtx ? `${authCtx.authenticationUrl}/dashboard/${project.organizationSlug}/settings` : "#";
 	let t17;
-	if ($[23] !== t16) {
+	if ($[24] !== t16) {
 		t17 = /* @__PURE__ */ jsx("a", {
 			href: t16,
 			target: "_blank",
 			rel: "noopener noreferrer"
 		});
-		$[23] = t16;
-		$[24] = t17;
-	} else t17 = $[24];
+		$[24] = t16;
+		$[25] = t17;
+	} else t17 = $[25];
 	let t18;
-	if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
 		t18 = /* @__PURE__ */ jsx(Settings, { className: "h-4 w-4" });
-		$[25] = t18;
-	} else t18 = $[25];
+		$[26] = t18;
+	} else t18 = $[26];
 	let t19;
-	if ($[26] !== t17) {
+	if ($[27] !== t17) {
 		t19 = /* @__PURE__ */ jsxs(DropdownMenuItem, {
 			render: t17,
 			children: [t18, "Team settings"]
 		});
-		$[26] = t17;
-		$[27] = t19;
-	} else t19 = $[27];
+		$[27] = t17;
+		$[28] = t19;
+	} else t19 = $[28];
 	let t20;
-	if ($[28] !== t11 || $[29] !== t15 || $[30] !== t19) {
+	if ($[29] !== t11 || $[30] !== t15 || $[31] !== t19) {
 		t20 = /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [
 			t11,
 			t15,
 			t19
 		] });
-		$[28] = t11;
-		$[29] = t15;
-		$[30] = t19;
-		$[31] = t20;
-	} else t20 = $[31];
+		$[29] = t11;
+		$[30] = t15;
+		$[31] = t19;
+		$[32] = t20;
+	} else t20 = $[32];
 	let t21;
-	if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
 		t21 = /* @__PURE__ */ jsx(DropdownMenuSeparator, {});
-		$[32] = t21;
-	} else t21 = $[32];
+		$[33] = t21;
+	} else t21 = $[33];
 	let t22;
-	if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[34] === Symbol.for("react.memo_cache_sentinel")) {
 		t22 = /* @__PURE__ */ jsxs(DropdownMenuItem, {
 			render: /* @__PURE__ */ jsx(Link, {
 				to: "https://camox.ai",
@@ -279,10 +287,10 @@ const ProjectMenu = () => {
 			}),
 			children: [/* @__PURE__ */ jsx(Info, { className: "h-4 w-4" }), "Powered by Camox"]
 		});
-		$[33] = t22;
-	} else t22 = $[33];
+		$[34] = t22;
+	} else t22 = $[34];
 	let t23;
-	if ($[34] !== t20 || $[35] !== t9) {
+	if ($[35] !== t20 || $[36] !== t9) {
 		t23 = /* @__PURE__ */ jsxs(DropdownMenuContent, {
 			className: "w-72",
 			align: "start",
@@ -295,17 +303,17 @@ const ProjectMenu = () => {
 				t22
 			]
 		});
-		$[34] = t20;
-		$[35] = t9;
-		$[36] = t23;
-	} else t23 = $[36];
+		$[35] = t20;
+		$[36] = t9;
+		$[37] = t23;
+	} else t23 = $[37];
 	let t24;
-	if ($[37] !== t23 || $[38] !== t5) {
+	if ($[38] !== t23 || $[39] !== t5) {
 		t24 = /* @__PURE__ */ jsxs(DropdownMenu, { children: [t5, t23] });
-		$[37] = t23;
-		$[38] = t5;
-		$[39] = t24;
-	} else t24 = $[39];
+		$[38] = t23;
+		$[39] = t5;
+		$[40] = t24;
+	} else t24 = $[40];
 	return t24;
 };
 function _temp() {

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

@@ -1,5 +1,5 @@
 import { useAuthContext, useAuthState } from "../../../lib/auth.js";
-import { useTheme } from "../useTheme.js";
+import { useApplyTheme } from "../useTheme.js";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@camox/ui/button";
@@ -9,31 +9,35 @@ import { Avatar, AvatarFallback, AvatarImage } from "@camox/ui/avatar";
 
 //#region src/features/studio/components/UserButton.tsx
 const UserButton = () => {
-	const $ = c(4);
+	const $ = c(5);
+	if ($[0] !== "97ed2ef8d3be381ca1619f023223f59b7d963b94f2c1afa998b161358220d4af") {
+		for (let $i = 0; $i < 5; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "97ed2ef8d3be381ca1619f023223f59b7d963b94f2c1afa998b161358220d4af";
+	}
 	const { isAuthenticated, isLoading } = useAuthState();
-	const { theme, setTheme } = useTheme();
+	const { theme, setTheme } = useApplyTheme();
 	if (!isAuthenticated || isLoading) {
 		let t0;
-		if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		if ($[1] === 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];
+			$[1] = t0;
+		} else t0 = $[1];
 		return t0;
 	}
 	let t0;
-	if ($[1] !== setTheme || $[2] !== theme) {
+	if ($[2] !== setTheme || $[3] !== theme) {
 		t0 = /* @__PURE__ */ jsx(AuthenticatedUserButton, {
 			theme,
 			setTheme
 		});
-		$[1] = setTheme;
-		$[2] = theme;
-		$[3] = t0;
-	} else t0 = $[3];
+		$[2] = setTheme;
+		$[3] = theme;
+		$[4] = t0;
+	} else t0 = $[4];
 	return t0;
 };
 function AuthenticatedUserButton({ theme, setTheme }) {

package/dist/features/studio/useTheme.js

@@ -3,13 +3,47 @@ import { c } from "react/compiler-runtime";
 import * as React from "react";
 
 //#region src/features/studio/useTheme.ts
-function useTheme() {
-	const $ = c(8);
-	const [theme, setTheme] = React.useState(_temp);
-	const applyTheme = _temp2;
+function readStoredTheme() {
+	if (typeof window === "undefined") return "system";
+	return localStorage.getItem("theme") || "system";
+}
+/**
+* Read-only access to the studio theme. Does not mutate `<html>` or localStorage.
+* Use this when you need the current theme value (e.g. to pass to a Toaster) but
+* are not the owner of the studio chrome — applying the theme would bleed onto
+* the host site.
+*/
+function useThemeValue() {
+	const $ = c(3);
+	if ($[0] !== "ae0cc1c225b74076fa89c4e5926593d41740805053ad02469bbe3a3cacd4b93a") {
+		for (let $i = 0; $i < 3; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "ae0cc1c225b74076fa89c4e5926593d41740805053ad02469bbe3a3cacd4b93a";
+	}
+	const [theme] = React.useState(readStoredTheme);
+	let t0;
+	if ($[1] !== theme) {
+		t0 = { theme };
+		$[1] = theme;
+		$[2] = t0;
+	} else t0 = $[2];
+	return t0;
+}
+/**
+* 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(9);
+	if ($[0] !== "ae0cc1c225b74076fa89c4e5926593d41740805053ad02469bbe3a3cacd4b93a") {
+		for (let $i = 0; $i < 9; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "ae0cc1c225b74076fa89c4e5926593d41740805053ad02469bbe3a3cacd4b93a";
+	}
+	const [theme, setTheme] = React.useState(readStoredTheme);
+	const applyTheme = _temp;
 	let t0;
 	let t1;
-	if ($[0] !== theme) {
+	if ($[1] !== theme) {
 		t0 = () => {
 			const root_0 = window.document.documentElement;
 			root_0.classList.remove("light", "dark");
@@ -20,69 +54,75 @@ function useTheme() {
 				};
 				updateSystemTheme();
 				mediaQuery.addEventListener("change", updateSystemTheme);
-				return () => mediaQuery.removeEventListener("change", updateSystemTheme);
+				return () => {
+					mediaQuery.removeEventListener("change", updateSystemTheme);
+					root_0.classList.remove("light", "dark");
+				};
 			}
 			root_0.classList.add(theme);
+			return () => {
+				root_0.classList.remove("light", "dark");
+			};
 		};
 		t1 = [theme];
-		$[0] = theme;
-		$[1] = t0;
-		$[2] = t1;
+		$[1] = theme;
+		$[2] = t0;
+		$[3] = t1;
 	} else {
-		t0 = $[1];
-		t1 = $[2];
+		t0 = $[2];
+		t1 = $[3];
 	}
 	React.useEffect(t0, t1);
 	let t2;
 	let t3;
-	if ($[3] !== theme) {
+	if ($[4] !== theme) {
 		t2 = () => {
 			localStorage.setItem("theme", theme);
 		};
 		t3 = [theme];
-		$[3] = theme;
-		$[4] = t2;
-		$[5] = t3;
+		$[4] = theme;
+		$[5] = t2;
+		$[6] = t3;
 	} else {
-		t2 = $[4];
-		t3 = $[5];
+		t2 = $[5];
+		t3 = $[6];
 	}
 	React.useEffect(t2, t3);
 	let t4;
-	if ($[6] !== theme) {
+	if ($[7] !== theme) {
 		t4 = {
 			theme,
 			setTheme
 		};
-		$[6] = theme;
-		$[7] = t4;
-	} else t4 = $[7];
+		$[7] = theme;
+		$[8] = t4;
+	} else t4 = $[8];
 	return t4;
 }
-function _temp2(themeToApply) {
+function _temp(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();
+	const $ = c(5);
+	if ($[0] !== "ae0cc1c225b74076fa89c4e5926593d41740805053ad02469bbe3a3cacd4b93a") {
+		for (let $i = 0; $i < 5; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "ae0cc1c225b74076fa89c4e5926593d41740805053ad02469bbe3a3cacd4b93a";
+	}
+	const { theme, setTheme } = useApplyTheme();
 	let t0;
 	let t1;
-	if ($[0] !== setTheme || $[1] !== theme) {
+	if ($[1] !== setTheme || $[2] !== theme) {
 		t0 = () => {
 			const actions = [
 				{
 					id: "change-theme",
 					label: "Change theme",
 					groupLabel: "Studio",
-					checkIfAvailable: _temp3,
+					checkIfAvailable: _temp2,
 					hasChildren: true,
-					execute: _temp4
+					execute: _temp3
 				},
 				{
 					id: "switch-to-light-theme",
@@ -116,28 +156,28 @@ function useThemeActions() {
 			return () => {
 				actionsStore.send({
 					type: "unregisterManyActions",
-					ids: actions.map(_temp5)
+					ids: actions.map(_temp4)
 				});
 			};
 		};
 		t1 = [theme, setTheme];
-		$[0] = setTheme;
-		$[1] = theme;
-		$[2] = t0;
-		$[3] = t1;
+		$[1] = setTheme;
+		$[2] = theme;
+		$[3] = t0;
+		$[4] = t1;
 	} else {
-		t0 = $[2];
-		t1 = $[3];
+		t0 = $[3];
+		t1 = $[4];
 	}
 	React.useEffect(t0, t1);
 }
-function _temp5(a) {
+function _temp4(a) {
 	return a.id;
 }
-function _temp4() {}
-function _temp3() {
+function _temp3() {}
+function _temp2() {
 	return true;
 }
 
 //#endregion
-export { useTheme, useThemeActions };
+export { useApplyTheme, useThemeActions, useThemeValue };