camox 0.26.0 → 0.27.0

package/dist/features/preview/components/PageNicknameField.js

@@ -0,0 +1,69 @@
+import { c } from "react/compiler-runtime";
+import { Input } from "@camox/ui/input";
+import { Label } from "@camox/ui/label";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/features/preview/components/PageNicknameField.tsx
+const PAGE_NICKNAME_MAX_LENGTH = 80;
+const PageNicknameField = (t0) => {
+	const $ = c(11);
+	if ($[0] !== "162dc2b9b16d70dc0796d14680eaaca4d0c3fb2e642401f82c11c475d9d72a71") {
+		for (let $i = 0; $i < 11; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "162dc2b9b16d70dc0796d14680eaaca4d0c3fb2e642401f82c11c475d9d72a71";
+	}
+	const { value, onChange, autoFocus } = t0;
+	let t1;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(Label, {
+			htmlFor: "pageNickname",
+			children: "Nickname"
+		});
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== onChange) {
+		t2 = (e) => onChange(e.target.value);
+		$[2] = onChange;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== autoFocus || $[5] !== t2 || $[6] !== value) {
+		t3 = /* @__PURE__ */ jsx(Input, {
+			id: "pageNickname",
+			value,
+			onChange: t2,
+			placeholder: "e.g. Home, Pricing, About",
+			maxLength: 80,
+			autoFocus
+		});
+		$[4] = autoFocus;
+		$[5] = t2;
+		$[6] = value;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground text-xs",
+			children: "A short internal name used in Camox Studio. It does not affect the public page or SEO."
+		});
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t3) {
+		t5 = /* @__PURE__ */ jsxs("div", {
+			className: "space-y-2",
+			children: [
+				t1,
+				t3,
+				t4
+			]
+		});
+		$[9] = t3;
+		$[10] = t5;
+	} else t5 = $[10];
+	return t5;
+};
+
+//#endregion
+export { PageNicknameField };

package/dist/features/preview/components/PagePicker.js

@@ -1,8 +1,8 @@
 import { previewStore } from "../previewStore.js";
 import { useProjectSlug } from "../../../lib/auth.js";
 import { pageMutations, pageQueries, projectQueries } from "../../../lib/queries.js";
-import { cn, formatPathSegment } from "../../../lib/utils.js";
-import { c } from "react/compiler-runtime";
+import { cn } from "../../../lib/utils.js";
+import { PageStatusBadge } from "./PageStatusBadge.js";
 import { Popover, PopoverContent, PopoverTrigger } from "@camox/ui/popover";
 import { toast } from "@camox/ui/toaster";
 import { useMutation, useQuery } from "@tanstack/react-query";
@@ -10,87 +10,13 @@ import { useLocation, useNavigate } from "@tanstack/react-router";
 import { useSelector } from "@xstate/store-react";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@camox/ui/alert-dialog";
 import { Button } from "@camox/ui/button";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@camox/ui/tooltip";
 import { Check, ChevronsUpDown, Pencil, Plus, Trash2 } from "lucide-react";
-import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@camox/ui/alert-dialog";
-import { Badge } from "@camox/ui/badge";
 import { Skeleton } from "@camox/ui/skeleton";
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from "@camox/ui/command";
 
 //#region src/features/preview/components/PagePicker.tsx
-const StatusBadge = (t0) => {
-	const $ = c(9);
-	if ($[0] !== "b1d62d8bb85e72a5793231a5fd9f232264a809f20c92f8c88b773f51f15623ec") {
-		for (let $i = 0; $i < 9; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "b1d62d8bb85e72a5793231a5fd9f232264a809f20c92f8c88b773f51f15623ec";
-	}
-	const { page } = t0;
-	if (page.status === "draft") {
-		let t1;
-		if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-			t1 = /* @__PURE__ */ jsx(Badge, {
-				variant: "outline",
-				className: "h-4 shrink-0 px-1.5",
-				children: "Draft"
-			});
-			$[1] = t1;
-		} else t1 = $[1];
-		return t1;
-	}
-	if (page.status === "published") {
-		let t1;
-		if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-			t1 = /* @__PURE__ */ jsx(Badge, {
-				variant: "secondary",
-				className: "h-4 shrink-0 px-1.5",
-				children: "Published"
-			});
-			$[2] = t1;
-		} else t1 = $[2];
-		return t1;
-	}
-	const reason = page.modifiedReason;
-	let t1;
-	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = /* @__PURE__ */ jsx(Badge, {
-			variant: "default",
-			className: "h-4 shrink-0 px-1.5",
-			children: "Modified"
-		});
-		$[3] = t1;
-	} else t1 = $[3];
-	const badge = t1;
-	if (reason && (reason.reason === "layout" || reason.reason === "both")) {
-		const pluralized = reason.affectedPagesCount === 1 ? "page" : "pages";
-		const headline = reason.reason === "layout" ? `Layout ${reason.layoutHandle} has unpublished changes` : `This page and layout ${reason.layoutHandle} both have unpublished changes`;
-		let t2;
-		if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-			t2 = /* @__PURE__ */ jsx(TooltipTrigger, {
-				render: /* @__PURE__ */ jsx("span", { className: "shrink-0" }),
-				children: badge
-			});
-			$[4] = t2;
-		} else t2 = $[4];
-		let t3;
-		if ($[5] !== headline || $[6] !== pluralized || $[7] !== reason.affectedPagesCount) {
-			t3 = /* @__PURE__ */ jsxs(Tooltip, { children: [t2, /* @__PURE__ */ jsxs(TooltipContent, { children: [
-				headline,
-				" (affects ",
-				reason.affectedPagesCount,
-				" ",
-				pluralized,
-				")"
-			] })] });
-			$[5] = headline;
-			$[6] = pluralized;
-			$[7] = reason.affectedPagesCount;
-			$[8] = t3;
-		} else t3 = $[8];
-		return t3;
-	}
-	return badge;
-};
 const CREATE_PAGE_VALUE = "__create_page__";
 const PagePicker = () => {
 	const [open, setOpen] = React.useState(false);
@@ -110,7 +36,7 @@ const PagePicker = () => {
 		setOpen(false);
 	};
 	const handleDeletePage = async (page) => {
-		const displayName = page.metaTitle ?? formatPathSegment(page.pathSegment);
+		const displayName = page.nickname;
 		try {
 			await deletePage.mutateAsync({ id: page.id });
 			toast.success(`Deleted ${displayName} page`);
@@ -145,9 +71,16 @@ const PagePicker = () => {
 				role: "combobox",
 				className: "min-w-0 flex-1 justify-between"
 			}),
-			children: [/* @__PURE__ */ jsx("span", {
-				className: "truncate",
-				children: currentPage.metaTitle ?? currentPage.fullPath
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-1 items-center gap-2",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					children: currentPage.nickname
+				}), /* @__PURE__ */ jsx(PageStatusBadge, {
+					size: "sm",
+					status: currentPage.status,
+					modifiedReason: currentPage.modifiedReason
+				})]
 			}), /* @__PURE__ */ jsx(ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })]
 		}), /* @__PURE__ */ jsx(PopoverContent, {
 			className: "flex h-[300px] w-[400px] flex-col p-0",
@@ -187,13 +120,17 @@ const PagePicker = () => {
 									className: "flex min-w-0 flex-col",
 									children: [/* @__PURE__ */ jsx("p", {
 										className: "truncate",
-										children: page_1.metaTitle ?? formatPathSegment(page_1.pathSegment)
+										children: page_1.nickname
 									}), /* @__PURE__ */ jsxs("div", {
 										className: "flex min-w-0 items-center gap-1.5",
 										children: [/* @__PURE__ */ jsx("p", {
 											className: "text-muted-foreground truncate font-mono text-xs",
 											children: page_1.fullPath
-										}), /* @__PURE__ */ jsx(StatusBadge, { page: page_1 })]
+										}), /* @__PURE__ */ jsx(PageStatusBadge, {
+											size: "sm",
+											status: page_1.status,
+											modifiedReason: page_1.modifiedReason
+										})]
 									})]
 								})]
 							}), /* @__PURE__ */ jsxs("div", {
@@ -258,7 +195,7 @@ const PagePicker = () => {
 		children: /* @__PURE__ */ jsxs(AlertDialogContent, { children: [/* @__PURE__ */ jsxs(AlertDialogHeader, { children: [/* @__PURE__ */ jsx(AlertDialogTitle, { children: "Delete page" }), /* @__PURE__ */ jsxs(AlertDialogDescription, { children: [
 			"Are you sure you want to delete",
 			" ",
-			/* @__PURE__ */ jsx("strong", { children: pageToDelete ? pageToDelete.metaTitle ?? formatPathSegment(pageToDelete.pathSegment) : "" }),
+			/* @__PURE__ */ jsx("strong", { children: pageToDelete ? pageToDelete.nickname : "" }),
 			"? This action cannot be undone."
 		] })] }), /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [/* @__PURE__ */ jsx(AlertDialogCancel, {
 			variant: "outline",

package/dist/features/preview/components/PageStatusBadge.js

@@ -0,0 +1,97 @@
+import { cn } from "../../../lib/utils.js";
+import { c } from "react/compiler-runtime";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@camox/ui/tooltip";
+import { Badge } from "@camox/ui/badge";
+
+//#region src/features/preview/components/PageStatusBadge.tsx
+const statusStyles = {
+	draft: {
+		className: "bg-blue-500/10 text-blue-700 dark:bg-blue-500/20 dark:text-blue-400",
+		label: "Draft"
+	},
+	published: {
+		className: "bg-primary/10 text-primary dark:bg-primary/20",
+		label: "Published"
+	},
+	modified: {
+		className: "bg-purple-500/10 text-purple-700 dark:bg-purple-500/20 dark:text-purple-400",
+		label: "Modified"
+	}
+};
+const PageStatusBadge = (t0) => {
+	const $ = c(18);
+	if ($[0] !== "9168a870b9514df0e89a2bb3f4bf1b341d85dcccf45743f1d6f9b68bbb30a7d4") {
+		for (let $i = 0; $i < 18; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "9168a870b9514df0e89a2bb3f4bf1b341d85dcccf45743f1d6f9b68bbb30a7d4";
+	}
+	const { status, modifiedReason, size: t1, className } = t0;
+	const size = t1 === void 0 ? "default" : t1;
+	const { className: statusClassName, label } = statusStyles[status];
+	let t2;
+	if ($[1] !== className || $[2] !== statusClassName) {
+		t2 = cn(statusClassName, className);
+		$[1] = className;
+		$[2] = statusClassName;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== label || $[5] !== size || $[6] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Badge, {
+			size,
+			className: t2,
+			children: label
+		});
+		$[4] = label;
+		$[5] = size;
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	const badge = t3;
+	if (status === "modified" && modifiedReason && (modifiedReason.reason === "layout" || modifiedReason.reason === "both")) {
+		const pluralized = modifiedReason.affectedPagesCount === 1 ? "page" : "pages";
+		const headline = modifiedReason.reason === "layout" ? `Layout ${modifiedReason.layoutHandle} has unpublished changes` : `This page and layout ${modifiedReason.layoutHandle} both have unpublished changes`;
+		let t4;
+		if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+			t4 = /* @__PURE__ */ jsx("span", { className: "shrink-0" });
+			$[8] = t4;
+		} else t4 = $[8];
+		let t5;
+		if ($[9] !== badge) {
+			t5 = /* @__PURE__ */ jsx(TooltipTrigger, {
+				render: t4,
+				children: badge
+			});
+			$[9] = badge;
+			$[10] = t5;
+		} else t5 = $[10];
+		let t6;
+		if ($[11] !== headline || $[12] !== modifiedReason.affectedPagesCount || $[13] !== pluralized) {
+			t6 = /* @__PURE__ */ jsxs(TooltipContent, { children: [
+				headline,
+				" (affects ",
+				modifiedReason.affectedPagesCount,
+				" ",
+				pluralized,
+				")"
+			] });
+			$[11] = headline;
+			$[12] = modifiedReason.affectedPagesCount;
+			$[13] = pluralized;
+			$[14] = t6;
+		} else t6 = $[14];
+		let t7;
+		if ($[15] !== t5 || $[16] !== t6) {
+			t7 = /* @__PURE__ */ jsxs(Tooltip, { children: [t5, t6] });
+			$[15] = t5;
+			$[16] = t6;
+			$[17] = t7;
+		} else t7 = $[17];
+		return t7;
+	}
+	return badge;
+};
+
+//#endregion
+export { PageStatusBadge };

package/dist/features/preview/components/PreviewToolbar.js

@@ -6,9 +6,9 @@ import { Kbd } from "@camox/ui/kbd";
 import { useSelector } from "@xstate/store-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@camox/ui/button";
+import { ButtonGroup } from "@camox/ui/button-group";
 import * as Tooltip$1 from "@camox/ui/tooltip";
 import { Lock, MonitorPlay, PanelRight, TabletSmartphone } from "lucide-react";
-import { ButtonGroup } from "@camox/ui/button-group";
 import { FloatingToolbar } from "@camox/ui/floating-toolbar";
 import { Toggle } from "@camox/ui/toggle";
 

package/dist/features/preview/components/PublishDialog.js

@@ -5,8 +5,8 @@ import { toast } from "@camox/ui/toaster";
 import { useMutation } from "@tanstack/react-query";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Switch } from "@camox/ui/switch";
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@camox/ui/alert-dialog";
+import { Switch } from "@camox/ui/switch";
 
 //#region src/features/preview/components/PublishDialog.tsx
 /**

package/dist/features/preview/components/UnlinkAssetButton.js

@@ -4,10 +4,10 @@ import { c } from "react/compiler-runtime";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { AlertDialog, AlertDialogAction, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@camox/ui/alert-dialog";
 import { Button } from "@camox/ui/button";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@camox/ui/tooltip";
 import { X } from "lucide-react";
-import { AlertDialog, AlertDialogAction, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@camox/ui/alert-dialog";
 
 //#region src/features/preview/components/UnlinkAssetButton.tsx
 const UnlinkAssetButton = (t0) => {

package/dist/features/routes/pageRoute.d.ts

@@ -8,6 +8,7 @@ import * as _$_tanstack_react_start0 from "@tanstack/react-start";
 declare function parseQuality(part: string): number;
 declare function prefersMarkdown(accept: string): boolean;
 declare const getOrigin: _$_tanstack_react_start0.OptionalFetcher<undefined, undefined, Promise<string>>;
+declare const getServerLoaderAuthCookieHeader: _$_tanstack_react_start0.OptionalFetcher<undefined, undefined, Promise<string>>;
 declare function createMarkdownMiddleware(apiUrl: string, projectSlug: string, environmentName?: string): _$_tanstack_react_start0.RequestMiddlewareAfterServer<{}, undefined, undefined>;
 declare function createPageLoader(apiUrl: string, projectSlug: string, environmentName?: string): ({
   location,
@@ -36,6 +37,7 @@ declare function createPageLoader(apiUrl: string, projectSlug: string, environme
       layoutId: number;
       livePublishedCheckpointId: number | null;
       contentUpdatedAt: number;
+      nickname: string;
       metaTitle: string | null;
       metaDescription: string | null;
       aiSeoEnabled: boolean | null;
@@ -77,4 +79,4 @@ declare function createPageHead(camoxApp: CamoxApp): ({
 };
 declare const PageRouteComponent: () => _$react_jsx_runtime0.JSX.Element;
 //#endregion
-export { PageRouteComponent, createMarkdownMiddleware, createPageHead, createPageLoader, getOrigin, parseQuality, prefersMarkdown };
+export { PageRouteComponent, createMarkdownMiddleware, createPageHead, createPageLoader, getOrigin, getServerLoaderAuthCookieHeader, parseQuality, prefersMarkdown };

package/dist/features/routes/pageRoute.js

@@ -1,3 +1,4 @@
+import { getAuthCookieHeader, getServerAuthCookieHeader } from "../../lib/auth.js";
 import { seedBlockCaches } from "../../lib/normalized-data.js";
 import { CamoxPreview, PageContent } from "../preview/CamoxPreview.js";
 import { trackEvent } from "../../lib/telemetry.js";
@@ -25,18 +26,25 @@ function prefersMarkdown(accept) {
 	}
 	return markdownQ > 0 && markdownQ >= htmlQ;
 }
-function createServerApiClient(apiUrl, environmentName) {
+function createServerApiClient(apiUrl, environmentName, options) {
 	const headers = {};
 	if (environmentName) headers["x-environment-name"] = environmentName;
 	return createORPCClient(new RPCLink({
 		url: `${apiUrl}/rpc`,
-		headers
+		headers,
+		fetch: (request, init) => {
+			if (options?.authCookieHeader && request instanceof Request) request.headers.set("Better-Auth-Cookie", options.authCookieHeader);
+			return fetch(request, init);
+		}
 	}));
 }
 const getOrigin = createServerFn({ method: "GET" }).handler(async () => {
 	const request = getRequest();
 	return new URL(request.url).origin;
 });
+const getServerLoaderAuthCookieHeader = createServerFn({ method: "GET" }).handler(async () => {
+	return getServerAuthCookieHeader(getRequest().headers);
+});
 function createMarkdownMiddleware(apiUrl, projectSlug, environmentName) {
 	const api = createServerApiClient(apiUrl, environmentName);
 	return createMiddleware().server(async ({ next, request }) => {
@@ -65,20 +73,35 @@ function createMarkdownMiddleware(apiUrl, projectSlug, environmentName) {
 	});
 }
 function createPageLoader(apiUrl, projectSlug, environmentName) {
-	const serverApi = createServerApiClient(apiUrl, environmentName);
 	return async ({ location, context }) => {
 		try {
+			const authCookieHeader = typeof window !== "undefined" ? getAuthCookieHeader() : await getServerLoaderAuthCookieHeader();
+			const source = authCookieHeader ? "draft" : "live";
+			const serverApi = createServerApiClient(apiUrl, environmentName, { authCookieHeader });
 			const [page, origin] = await Promise.all([context.queryClient.ensureQueryData({
-				queryKey: queryKeys.pages.getByPath(location.pathname, "live"),
+				queryKey: queryKeys.pages.getByPath(location.pathname, source),
 				queryFn: async () => {
 					const [data, pagesList] = await Promise.all([serverApi.pages.getByPath({
 						path: location.pathname,
 						projectSlug,
-						source: "live"
+						source
 					}), serverApi.pages.listBySlug({ projectSlug }).catch(() => null)]);
-					seedBlockCaches(context.queryClient, data, "live");
-					seedBlockCaches(context.queryClient, data, "draft");
-					context.queryClient.setQueryData(queryKeys.pages.getByPath(location.pathname, "draft"), data);
+					seedBlockCaches(context.queryClient, data, source);
+					context.queryClient.setQueryData(queryKeys.pages.getByPath(location.pathname, source), {
+						page: data.page,
+						layout: data.layout,
+						projectName: data.projectName,
+						project: data.project
+					});
+					if (source === "live") {
+						seedBlockCaches(context.queryClient, data, "draft");
+						context.queryClient.setQueryData(queryKeys.pages.getByPath(location.pathname, "draft"), {
+							page: data.page,
+							layout: data.layout,
+							projectName: data.projectName,
+							project: data.project
+						});
+					}
 					if (pagesList) context.queryClient.setQueryData(queryKeys.pages.list, pagesList);
 					return {
 						page: data.page,
@@ -156,9 +179,9 @@ function createPageHead(camoxApp) {
 }
 const PageRouteComponent = () => {
 	const $ = c(2);
-	if ($[0] !== "70af43df8dd9dfc07ba240c4b5ef667ad871db6e9cbe22eb8e3647d7a89af86f") {
+	if ($[0] !== "c7f5f058711714d2b4ce2a6ee4fb3259e56b272fafb972520b82049c0f52d9df") {
 		for (let $i = 0; $i < 2; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "70af43df8dd9dfc07ba240c4b5ef667ad871db6e9cbe22eb8e3647d7a89af86f";
+		$[0] = "c7f5f058711714d2b4ce2a6ee4fb3259e56b272fafb972520b82049c0f52d9df";
 	}
 	let t0;
 	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
@@ -169,4 +192,4 @@ const PageRouteComponent = () => {
 };
 
 //#endregion
-export { PageRouteComponent, createMarkdownMiddleware, createPageHead, createPageLoader, getOrigin, parseQuality, prefersMarkdown };
+export { PageRouteComponent, createMarkdownMiddleware, createPageHead, createPageLoader, getOrigin, getServerLoaderAuthCookieHeader, parseQuality, prefersMarkdown };

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

@@ -6,9 +6,9 @@ import { toast } from "@camox/ui/toaster";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@camox/ui/alert-dialog";
 import { Button } from "@camox/ui/button";
 import { ChevronDown, Download, Upload } from "lucide-react";
-import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@camox/ui/alert-dialog";
 import { Badge } from "@camox/ui/badge";
 import { Separator } from "@camox/ui/separator";
 import { Spinner } from "@camox/ui/spinner";

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

@@ -6,8 +6,8 @@ import { Link } from "@tanstack/react-router";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@camox/ui/button";
-import { ChevronDown, Globe, Info, Settings, Users } from "lucide-react";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "@camox/ui/dropdown-menu";
+import { ChevronDown, Globe, Info, Settings, Users } from "lucide-react";
 import { Skeleton } from "@camox/ui/skeleton";
 
 //#region src/features/studio/components/ProjectMenu.tsx

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

@@ -3,8 +3,8 @@ import { useApplyTheme } from "../useTheme.js";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@camox/ui/button";
-import { Check, LogOut, Monitor, Moon, Settings, Sun, User } from "lucide-react";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "@camox/ui/dropdown-menu";
+import { Check, LogOut, Monitor, Moon, Settings, Sun, User } from "lucide-react";
 import { Avatar, AvatarFallback, AvatarImage } from "@camox/ui/avatar";
 
 //#region src/features/studio/components/UserButton.tsx

package/dist/lib/auth.js

@@ -5,6 +5,26 @@ import { oneTimeTokenClient, organizationClient } from "better-auth/client/plugi
 import { createAuthClient } from "better-auth/react";
 
 //#region src/lib/auth.ts
+const SERVER_AUTH_COOKIE_NAME = "camox_auth_cookie";
+function writeServerAuthCookie(cookie) {
+	if (typeof document === "undefined") return;
+	const secure = window.location.protocol === "https:" ? "; Secure" : "";
+	if (!cookie) {
+		document.cookie = `${SERVER_AUTH_COOKIE_NAME}=; Path=/; SameSite=Lax; Max-Age=0${secure}`;
+		return;
+	}
+	document.cookie = `${SERVER_AUTH_COOKIE_NAME}=${encodeURIComponent(cookie)}; Path=/; SameSite=Lax; Max-Age=2592000${secure}`;
+}
+function getServerAuthCookieHeader(headers) {
+	const authCookie = (headers.get("Cookie") ?? headers.get("cookie") ?? "").split(";").map((part) => part.trim()).find((part) => part.startsWith(`${SERVER_AUTH_COOKIE_NAME}=`));
+	if (!authCookie) return "";
+	const value = authCookie.slice(18);
+	try {
+		return decodeURIComponent(value);
+	} catch {
+		return "";
+	}
+}
 function parseSetCookieHeader(header) {
 	const cookieMap = /* @__PURE__ */ new Map();
 	header.split(", ").forEach((cookie) => {
@@ -59,7 +79,9 @@ function getCookie(cookie) {
 */
 function getAuthCookieHeader() {
 	if (typeof window === "undefined") return "";
-	return getCookie(localStorage.getItem("better-auth_cookie") || "{}");
+	const cookie = getCookie(localStorage.getItem("better-auth_cookie") || "{}");
+	writeServerAuthCookie(cookie);
+	return cookie;
 }
 function crossDomainClient(opts = {}) {
 	let store = null;
@@ -101,6 +123,7 @@ function crossDomainClient(opts = {}) {
 					const prevCookie = storage.getItem(cookieName);
 					const toSetCookie = getSetCookie(setCookie || "", prevCookie ?? void 0);
 					await storage.setItem(cookieName, toSetCookie);
+					writeServerAuthCookie(getCookie(toSetCookie));
 					if (setCookie.includes(".session_token=")) {
 						const parsed = parseSetCookieHeader(setCookie);
 						let prevParsed = {};
@@ -114,7 +137,10 @@ function crossDomainClient(opts = {}) {
 				if (context.request.url.toString().includes("/get-session") && !opts?.disableCache) {
 					const data = context.data;
 					storage.setItem(localCacheName, JSON.stringify(data));
-					if (data === null) storage.setItem(cookieName, "{}");
+					if (data === null) {
+						storage.setItem(cookieName, "{}");
+						writeServerAuthCookie("");
+					} else writeServerAuthCookie(getCookie(storage.getItem(cookieName) || "{}"));
 				}
 			} },
 			async init(url, options) {
@@ -124,6 +150,7 @@ function crossDomainClient(opts = {}) {
 				};
 				options = options || {};
 				const cookie = getCookie(storage.getItem(cookieName) || "{}");
+				writeServerAuthCookie(cookie);
 				options.credentials = "omit";
 				options.headers = {
 					...options.headers,
@@ -131,6 +158,7 @@ function crossDomainClient(opts = {}) {
 				};
 				if (url.includes("/sign-out")) {
 					await storage.setItem(cookieName, "{}");
+					writeServerAuthCookie("");
 					store?.atoms.session?.set({
 						data: null,
 						error: null,
@@ -164,9 +192,9 @@ function createCamoxAuthClient(apiUrl) {
 */
 function useProcessOtt(authClient) {
 	const $ = c(5);
-	if ($[0] !== "e81e7f3a7847debd5cb6569770cedb214617cac7132fef9c515454bbdf62997f") {
+	if ($[0] !== "576010e4eb39afcae6f9e5e7fcb1b2de7558bf9039ed93e955c51d3fe8a38f1a") {
 		for (let $i = 0; $i < 5; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "e81e7f3a7847debd5cb6569770cedb214617cac7132fef9c515454bbdf62997f";
+		$[0] = "576010e4eb39afcae6f9e5e7fcb1b2de7558bf9039ed93e955c51d3fe8a38f1a";
 	}
 	const [ready, setReady] = React.useState(_temp);
 	let t0;
@@ -209,9 +237,9 @@ function _temp() {
 const AuthContext = React.createContext(null);
 function useAuthContext() {
 	const $ = c(1);
-	if ($[0] !== "e81e7f3a7847debd5cb6569770cedb214617cac7132fef9c515454bbdf62997f") {
+	if ($[0] !== "576010e4eb39afcae6f9e5e7fcb1b2de7558bf9039ed93e955c51d3fe8a38f1a") {
 		for (let $i = 0; $i < 1; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "e81e7f3a7847debd5cb6569770cedb214617cac7132fef9c515454bbdf62997f";
+		$[0] = "576010e4eb39afcae6f9e5e7fcb1b2de7558bf9039ed93e955c51d3fe8a38f1a";
 	}
 	const ctx = React.useContext(AuthContext);
 	if (!ctx) throw new Error("Missing CamoxProvider");
@@ -219,9 +247,9 @@ function useAuthContext() {
 }
 function useProjectSlug() {
 	const $ = c(1);
-	if ($[0] !== "e81e7f3a7847debd5cb6569770cedb214617cac7132fef9c515454bbdf62997f") {
+	if ($[0] !== "576010e4eb39afcae6f9e5e7fcb1b2de7558bf9039ed93e955c51d3fe8a38f1a") {
 		for (let $i = 0; $i < 1; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "e81e7f3a7847debd5cb6569770cedb214617cac7132fef9c515454bbdf62997f";
+		$[0] = "576010e4eb39afcae6f9e5e7fcb1b2de7558bf9039ed93e955c51d3fe8a38f1a";
 	}
 	return useAuthContext().projectSlug;
 }
@@ -235,18 +263,18 @@ function useAuthState() {
 }
 function useIsAuthenticated() {
 	const $ = c(1);
-	if ($[0] !== "e81e7f3a7847debd5cb6569770cedb214617cac7132fef9c515454bbdf62997f") {
+	if ($[0] !== "576010e4eb39afcae6f9e5e7fcb1b2de7558bf9039ed93e955c51d3fe8a38f1a") {
 		for (let $i = 0; $i < 1; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "e81e7f3a7847debd5cb6569770cedb214617cac7132fef9c515454bbdf62997f";
+		$[0] = "576010e4eb39afcae6f9e5e7fcb1b2de7558bf9039ed93e955c51d3fe8a38f1a";
 	}
 	const { isAuthenticated } = useAuthState();
 	return isAuthenticated;
 }
 function useSignInRedirect() {
 	const $ = c(3);
-	if ($[0] !== "e81e7f3a7847debd5cb6569770cedb214617cac7132fef9c515454bbdf62997f") {
+	if ($[0] !== "576010e4eb39afcae6f9e5e7fcb1b2de7558bf9039ed93e955c51d3fe8a38f1a") {
 		for (let $i = 0; $i < 3; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "e81e7f3a7847debd5cb6569770cedb214617cac7132fef9c515454bbdf62997f";
+		$[0] = "576010e4eb39afcae6f9e5e7fcb1b2de7558bf9039ed93e955c51d3fe8a38f1a";
 	}
 	const { authenticationUrl } = useAuthContext();
 	let t0;
@@ -267,9 +295,9 @@ function useSignInRedirect() {
 */
 function useAuthActions() {
 	const $ = c(5);
-	if ($[0] !== "e81e7f3a7847debd5cb6569770cedb214617cac7132fef9c515454bbdf62997f") {
+	if ($[0] !== "576010e4eb39afcae6f9e5e7fcb1b2de7558bf9039ed93e955c51d3fe8a38f1a") {
 		for (let $i = 0; $i < 5; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "e81e7f3a7847debd5cb6569770cedb214617cac7132fef9c515454bbdf62997f";
+		$[0] = "576010e4eb39afcae6f9e5e7fcb1b2de7558bf9039ed93e955c51d3fe8a38f1a";
 	}
 	const { authClient, authenticationUrl } = useAuthContext();
 	let t0;
@@ -321,4 +349,4 @@ function _temp2() {
 }
 
 //#endregion
-export { AuthContext, createCamoxAuthClient, getAuthCookieHeader, useAuthActions, useAuthContext, useAuthState, useIsAuthenticated, useProcessOtt, useProjectSlug, useSignInRedirect };
+export { AuthContext, createCamoxAuthClient, getAuthCookieHeader, getServerAuthCookieHeader, useAuthActions, useAuthContext, useAuthState, useIsAuthenticated, useProcessOtt, useProjectSlug, useSignInRedirect };

package/dist/lib/queries.js

@@ -145,6 +145,7 @@ const pageMutations = {
 	setMetaDescription: () => getOrpc().pages.setMetaDescription.mutationOptions(),
 	publish: () => getOrpc().pages.publish.mutationOptions(),
 	unpublish: () => getOrpc().pages.unpublish.mutationOptions(),
+	discardChanges: () => getOrpc().pages.discardChanges.mutationOptions(),
 	uploadCustomOgImage: () => ({ mutationFn: async ({ pageId, file }) => {
 		const formData = new FormData();
 		formData.append("file", file);