camox 0.48.0 → 0.52.1

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

@@ -1,8 +1,8 @@
 import { useProjectUuid } from "../../../lib/auth.js";
 import { useNavigate } from "../../navigation/navigation.js";
-import { useCamoxApp } from "../../provider/components/CamoxAppContext.js";
 import { reads, useReadQuery } from "../../../lib/studio-reads.js";
 import { pageMutations } from "../../../lib/queries.js";
+import { useLayoutDefinitions } from "../../../lib/studio-definitions.js";
 import { useLocalizedPath } from "../../../lib/view-locale.js";
 import { PageNicknameField } from "./PageNicknameField.js";
 import { previewStore } from "../previewStore.js";
@@ -27,7 +27,7 @@ const slugifyPathSegment = (nickname) => {
 	return trimmedNickname.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
 };
 const CreatePageModal = () => {
-	const $ = c(56);
+	const $ = c(51);
 	const projectUuid = useProjectUuid();
 	const open = useSelector(previewStore, _temp);
 	let t0;
@@ -57,43 +57,28 @@ const CreatePageModal = () => {
 		$[6] = t4;
 	} else t4 = $[6];
 	const { data: pages } = useReadQuery(t2, t4);
+	const allLayouts = useLayoutDefinitions();
 	let t5;
-	if ($[7] !== project?.id) {
-		t5 = reads.layoutList({ projectId: project?.id ?? 0 });
-		$[7] = project?.id;
+	if ($[7] !== allLayouts) {
+		t5 = allLayouts.filter(_temp2);
+		$[7] = allLayouts;
 		$[8] = t5;
 	} else t5 = $[8];
-	const t6 = !!project;
-	let t7;
-	if ($[9] !== t6) {
-		t7 = { enabled: t6 };
-		$[9] = t6;
-		$[10] = t7;
-	} else t7 = $[10];
-	const { data: allLayouts } = useReadQuery(t5, t7);
-	const camoxApp = useCamoxApp();
-	let t8;
-	if ($[11] !== allLayouts || $[12] !== camoxApp) {
-		t8 = allLayouts?.filter((layout) => camoxApp.getLayoutById(layout.layoutId)?._internal.kind === "curated");
-		$[11] = allLayouts;
-		$[12] = camoxApp;
-		$[13] = t8;
-	} else t8 = $[13];
-	const layouts = t8;
+	const layouts = t5;
 	const navigate = useNavigate();
 	const localized = useLocalizedPath();
-	let t9;
-	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
-		t9 = {
+	let t6;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = {
 			nickname: "",
 			parentPageId: void 0,
 			pathSegment: "",
 			layoutId: ""
 		};
-		$[14] = t9;
-	} else t9 = $[14];
+		$[9] = t6;
+	} else t6 = $[9];
 	const form = useForm({
-		defaultValues: t9,
+		defaultValues: t6,
 		onSubmit: async (values) => {
 			try {
 				if (!project) {
@@ -120,49 +105,50 @@ const CreatePageModal = () => {
 				const { fullPath } = await createPagePromise;
 				previewStore.send({ type: "closeCreatePageModal" });
 				form.reset();
-				await new Promise(_temp2);
+				await new Promise(_temp3);
 				await navigate({ to: localized(fullPath) });
-			} catch (t10) {
-				console.error("Failed to create page:", t10);
+			} catch (t7) {
+				console.error("Failed to create page:", t7);
 				toast.error("Could not create page");
 			}
 		}
 	});
-	let t11;
-	if ($[15] !== form || $[16] !== layouts) {
-		t11 = () => {
-			if (layouts && layouts.length > 0 && !form.getFieldValue("layoutId")) form.setFieldValue("layoutId", layouts[0].layoutId);
+	let t8;
+	if ($[10] !== form || $[11] !== layouts[0] || $[12] !== layouts.length) {
+		t8 = () => {
+			if (layouts.length > 0 && !form.getFieldValue("layoutId")) form.setFieldValue("layoutId", layouts[0].id);
 		};
-		$[15] = form;
-		$[16] = layouts;
-		$[17] = t11;
-	} else t11 = $[17];
-	let t12;
-	if ($[18] !== form || $[19] !== layouts) {
-		t12 = [layouts, form];
-		$[18] = form;
-		$[19] = layouts;
-		$[20] = t12;
-	} else t12 = $[20];
-	useEffect(t11, t12);
-	let t13;
-	if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
-		t13 = /* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogTitle, { children: "Create page" }), /* @__PURE__ */ jsx(DialogDescription, { children: "Fill in the details to create a new page. It will be created as a draft." })] });
-		$[21] = t13;
-	} else t13 = $[21];
-	let t14;
-	if ($[22] !== form) {
-		t14 = (e) => {
+		$[10] = form;
+		$[11] = layouts[0];
+		$[12] = layouts.length;
+		$[13] = t8;
+	} else t8 = $[13];
+	let t9;
+	if ($[14] !== form || $[15] !== layouts) {
+		t9 = [layouts, form];
+		$[14] = form;
+		$[15] = layouts;
+		$[16] = t9;
+	} else t9 = $[16];
+	useEffect(t8, t9);
+	let t10;
+	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = /* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogTitle, { children: "Create page" }), /* @__PURE__ */ jsx(DialogDescription, { children: "Fill in the details to create a new page. It will be created as a draft." })] });
+		$[17] = t10;
+	} else t10 = $[17];
+	let t11;
+	if ($[18] !== form) {
+		t11 = (e) => {
 			e.preventDefault();
 			e.stopPropagation();
 			form.handleSubmit();
 		};
-		$[22] = form;
-		$[23] = t14;
-	} else t14 = $[23];
-	let t15;
-	if ($[24] !== form) {
-		t15 = (field) => /* @__PURE__ */ jsx(PageNicknameField, {
+		$[18] = form;
+		$[19] = t11;
+	} else t11 = $[19];
+	let t12;
+	if ($[20] !== form) {
+		t12 = (field) => /* @__PURE__ */ jsx(PageNicknameField, {
 			value: field.state.value,
 			onChange: (value_0) => {
 				field.handleChange(value_0);
@@ -171,22 +157,22 @@ const CreatePageModal = () => {
 			},
 			autoFocus: true
 		});
-		$[24] = form;
-		$[25] = t15;
-	} else t15 = $[25];
-	let t16;
-	if ($[26] !== form.Field || $[27] !== t15) {
-		t16 = /* @__PURE__ */ jsx(form.Field, {
+		$[20] = form;
+		$[21] = t12;
+	} else t12 = $[21];
+	let t13;
+	if ($[22] !== form.Field || $[23] !== t12) {
+		t13 = /* @__PURE__ */ jsx(form.Field, {
 			name: "nickname",
-			children: t15
+			children: t12
 		});
-		$[26] = form.Field;
-		$[27] = t15;
-		$[28] = t16;
-	} else t16 = $[28];
-	let t17;
-	if ($[29] !== form.Field || $[30] !== pages) {
-		t17 = (parentField) => /* @__PURE__ */ jsx(form.Field, {
+		$[22] = form.Field;
+		$[23] = t12;
+		$[24] = t13;
+	} else t13 = $[24];
+	let t14;
+	if ($[25] !== form.Field || $[26] !== pages) {
+		t14 = (parentField) => /* @__PURE__ */ jsx(form.Field, {
 			name: "pathSegment",
 			children: (pathField) => /* @__PURE__ */ jsx(PageLocationFieldset, {
 				parentPageId: parentField.state.value,
@@ -196,23 +182,23 @@ const CreatePageModal = () => {
 				pages
 			})
 		});
-		$[29] = form.Field;
-		$[30] = pages;
-		$[31] = t17;
-	} else t17 = $[31];
-	let t18;
-	if ($[32] !== form.Field || $[33] !== t17) {
-		t18 = /* @__PURE__ */ jsx(form.Field, {
+		$[25] = form.Field;
+		$[26] = pages;
+		$[27] = t14;
+	} else t14 = $[27];
+	let t15;
+	if ($[28] !== form.Field || $[29] !== t14) {
+		t15 = /* @__PURE__ */ jsx(form.Field, {
 			name: "parentPageId",
-			children: t17
+			children: t14
 		});
-		$[32] = form.Field;
-		$[33] = t17;
-		$[34] = t18;
-	} else t18 = $[34];
-	let t19;
-	if ($[35] !== camoxApp || $[36] !== layouts) {
-		t19 = (field_0) => /* @__PURE__ */ jsxs("div", {
+		$[28] = form.Field;
+		$[29] = t14;
+		$[30] = t15;
+	} else t15 = $[30];
+	let t16;
+	if ($[31] !== layouts) {
+		t16 = (field_0) => /* @__PURE__ */ jsxs("div", {
 			className: "space-y-2",
 			children: [/* @__PURE__ */ jsx(Label, {
 				htmlFor: "layoutId",
@@ -222,98 +208,106 @@ const CreatePageModal = () => {
 				onValueChange: (value_1) => {
 					if (value_1 != null) field_0.handleChange(value_1);
 				},
-				disabled: layouts != null && layouts.length <= 1,
-				items: layouts?.map((t) => ({
-					value: t.layoutId,
-					label: camoxApp.getLayoutById(t.layoutId)?._internal.title ?? t.layoutId
-				})),
-				children: [/* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select a layout" }) }), /* @__PURE__ */ jsx(SelectContent, { children: layouts?.map((t_0) => /* @__PURE__ */ jsx(SelectItem, {
-					value: t_0.layoutId,
-					children: camoxApp.getLayoutById(t_0.layoutId)?._internal.title ?? t_0.layoutId
-				}, t_0.layoutId)) })]
+				disabled: layouts.length <= 1,
+				items: layouts.map(_temp5),
+				children: [/* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select a layout" }) }), /* @__PURE__ */ jsx(SelectContent, { children: layouts.map(_temp6) })]
 			})]
 		});
-		$[35] = camoxApp;
-		$[36] = layouts;
-		$[37] = t19;
-	} else t19 = $[37];
-	let t20;
-	if ($[38] !== form.Field || $[39] !== t19) {
-		t20 = /* @__PURE__ */ jsx(form.Field, {
+		$[31] = layouts;
+		$[32] = t16;
+	} else t16 = $[32];
+	let t17;
+	if ($[33] !== form.Field || $[34] !== t16) {
+		t17 = /* @__PURE__ */ jsx(form.Field, {
 			name: "layoutId",
-			children: t19
+			children: t16
 		});
-		$[38] = form.Field;
-		$[39] = t19;
-		$[40] = t20;
-	} else t20 = $[40];
-	let t21;
-	if ($[41] !== form.state.isSubmitting) {
-		t21 = form.state.isSubmitting && /* @__PURE__ */ jsx(Spinner, {});
-		$[41] = form.state.isSubmitting;
-		$[42] = t21;
-	} else t21 = $[42];
-	const t22 = form.state.isSubmitting && "...";
-	let t23;
-	if ($[43] !== form.state.isSubmitting || $[44] !== t21 || $[45] !== t22) {
-		t23 = /* @__PURE__ */ jsxs(Button, {
+		$[33] = form.Field;
+		$[34] = t16;
+		$[35] = t17;
+	} else t17 = $[35];
+	let t18;
+	if ($[36] !== form.state.isSubmitting) {
+		t18 = form.state.isSubmitting && /* @__PURE__ */ jsx(Spinner, {});
+		$[36] = form.state.isSubmitting;
+		$[37] = t18;
+	} else t18 = $[37];
+	const t19 = form.state.isSubmitting && "...";
+	let t20;
+	if ($[38] !== form.state.isSubmitting || $[39] !== t18 || $[40] !== t19) {
+		t20 = /* @__PURE__ */ jsxs(Button, {
 			type: "submit",
 			disabled: form.state.isSubmitting,
 			children: [
-				t21,
+				t18,
 				"Create page",
-				t22
+				t19
 			]
 		});
-		$[43] = form.state.isSubmitting;
-		$[44] = t21;
-		$[45] = t22;
-		$[46] = t23;
-	} else t23 = $[46];
-	let t24;
-	if ($[47] !== t14 || $[48] !== t16 || $[49] !== t18 || $[50] !== t20 || $[51] !== t23) {
-		t24 = /* @__PURE__ */ jsxs(DialogContent, {
+		$[38] = form.state.isSubmitting;
+		$[39] = t18;
+		$[40] = t19;
+		$[41] = t20;
+	} else t20 = $[41];
+	let t21;
+	if ($[42] !== t11 || $[43] !== t13 || $[44] !== t15 || $[45] !== t17 || $[46] !== t20) {
+		t21 = /* @__PURE__ */ jsxs(DialogContent, {
 			className: "flex max-h-[90vh] flex-col sm:max-w-lg",
-			children: [t13, /* @__PURE__ */ jsxs("form", {
-				onSubmit: t14,
+			children: [t10, /* @__PURE__ */ jsxs("form", {
+				onSubmit: t11,
 				className: "-mx-1 space-y-4 overflow-y-auto px-1 py-2",
 				children: [
-					t16,
-					t18,
-					t20,
-					t23
+					t13,
+					t15,
+					t17,
+					t20
 				]
 			})]
 		});
-		$[47] = t14;
-		$[48] = t16;
-		$[49] = t18;
-		$[50] = t20;
-		$[51] = t23;
-		$[52] = t24;
-	} else t24 = $[52];
-	let t25;
-	if ($[53] !== open || $[54] !== t24) {
-		t25 = /* @__PURE__ */ jsx(Dialog, {
+		$[42] = t11;
+		$[43] = t13;
+		$[44] = t15;
+		$[45] = t17;
+		$[46] = t20;
+		$[47] = t21;
+	} else t21 = $[47];
+	let t22;
+	if ($[48] !== open || $[49] !== t21) {
+		t22 = /* @__PURE__ */ jsx(Dialog, {
 			open,
-			onOpenChange: _temp3,
-			children: t24
+			onOpenChange: _temp4,
+			children: t21
 		});
-		$[53] = open;
-		$[54] = t24;
-		$[55] = t25;
-	} else t25 = $[55];
-	return t25;
+		$[48] = open;
+		$[49] = t21;
+		$[50] = t22;
+	} else t22 = $[50];
+	return t22;
 };
 function _temp(state) {
 	return state.context.isCreatePageModalOpen;
 }
-function _temp2(resolve) {
+function _temp2(layout) {
+	return layout.kind === "curated";
+}
+function _temp3(resolve) {
 	return setTimeout(resolve, 50);
 }
-function _temp3(value) {
+function _temp4(value) {
 	if (!value) previewStore.send({ type: "closeCreatePageModal" });
 }
+function _temp5(layout_0) {
+	return {
+		value: layout_0.id,
+		label: layout_0.title
+	};
+}
+function _temp6(layout_1) {
+	return /* @__PURE__ */ jsx(SelectItem, {
+		value: layout_1.id,
+		children: layout_1.title
+	}, layout_1.id);
+}
 
 //#endregion
 export { CreatePageModal };

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

@@ -7,9 +7,9 @@ import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@camox/ui/button";
 import { Bold, Highlighter, Italic, Strikethrough } from "lucide-react";
-import { Kbd } from "@camox/ui/kbd";
 import { ButtonGroup } from "@camox/ui/button-group";
 import * as Tooltip$1 from "@camox/ui/tooltip";
+import { Kbd } from "@camox/ui/kbd";
 import { FloatingToolbar } from "@camox/ui/floating-toolbar";
 import { Toggle } from "@camox/ui/toggle";
 

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

@@ -21,6 +21,23 @@ function useFrame() {
 	if (!context) throw new Error("useFrame must be used within a Frame");
 	return context;
 }
+/** The stylesheets of a document's head that are the site's: not the studio's. */
+const SITE_STYLESHEETS = "link[rel~=\"stylesheet\"], style";
+const siteStylesheetsOf = (head) => Array.from(head.querySelectorAll(SITE_STYLESHEETS)).filter((element) => element.parentElement === head && isSiteStyle(element));
+/**
+* Gives the frame's document the site stylesheets of `html`, a site document: the ones it no
+* longer has go, and its new ones are added, the rest of the frame left as it is.
+*/
+function restyle(frame, html) {
+	const doc = frame.document;
+	const { DOMParser } = frame;
+	const wanted = siteStylesheetsOf(new DOMParser().parseFromString(html, "text/html").head);
+	const held = siteStylesheetsOf(doc.head);
+	const wantedMarkup = new Set(wanted.map((element) => element.outerHTML));
+	const heldMarkup = new Set(held.map((element) => element.outerHTML));
+	for (const element of held) if (!wantedMarkup.has(element.outerHTML)) element.remove();
+	for (const element of wanted) if (!heldMarkup.has(element.outerHTML)) doc.head.appendChild(doc.importNode(element, true));
+}
 function ClearServerMarkup(t0) {
 	const $ = c(4);
 	const { nodes } = t0;
@@ -47,7 +64,7 @@ function ClearServerMarkup(t0) {
 function _temp(node) {
 	return node.remove();
 }
-const Frame = ({ children, className, style, copyStyles = true, serverOnly = false, onIframeReady, iframeProps, inCanvas = false }) => {
+const Frame = ({ children, className, style, copyStyles = true, onIframeReady, iframeProps, inCanvas = false }) => {
 	const inCanvasRef = React.useRef(inCanvas);
 	const navigate = useNavigate();
 	const { pathname, hash, href } = useLocation();
@@ -92,7 +109,6 @@ const Frame = ({ children, className, style, copyStyles = true, serverOnly = fal
 				const clonedStyle = style.cloneNode(true);
 				iframeDoc.head.appendChild(clonedStyle);
 			});
-			if (serverOnly) return;
 			setServerNodes(Array.from(root.childNodes));
 			setMountNode(root);
 			setIframeWindow(iframeWin);
@@ -107,8 +123,15 @@ const Frame = ({ children, className, style, copyStyles = true, serverOnly = fal
 	}, [
 		copyStyles,
 		onIframeReady,
-		srcDoc,
-		serverOnly
+		srcDoc
+	]);
+	React.useLayoutEffect(() => {
+		if (!iframeWindow || !previewDocument || srcDoc === "<!doctype html><html><head></head><body><div id=\"root\" data-camox-preview-root></div></body></html>") return;
+		restyle(iframeWindow, previewDocument);
+	}, [
+		iframeWindow,
+		previewDocument,
+		srcDoc
 	]);
 	React.useLayoutEffect(() => {
 		if (!iframeWindow || !mountNode) return;

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

@@ -1,7 +1,8 @@
-import { useAuthContext } from "../../../lib/auth.js";
-import { reads, useReadQuery } from "../../../lib/studio-reads.js";
+import { useNavigate } from "../../navigation/navigation.js";
 import { cn } from "../../../lib/utils.js";
+import { useLocalizedPath } from "../../../lib/view-locale.js";
 import { previewStore, selectionBlockId, selectionForPage } from "../previewStore.js";
+import { STUDIO_SETTINGS_PATH } from "../../studio/routes.js";
 import { UserButton } from "../../studio/components/UserButton.js";
 import { PageInfo, PageMarkdownContent, PageSeoContent } from "./PageInfo.js";
 import { PageNavigatorHeader } from "./PageNavigatorHeader.js";
@@ -28,8 +29,8 @@ function MobilePreviewDrawer({ page, projectName }) {
 	const [isExpanded, setIsExpanded] = React.useState(false);
 	const [isDragging, setIsDragging] = React.useState(false);
 	const [screen, setScreen] = React.useState("root");
-	const authCtx = useAuthContext();
-	const { data: project } = useReadQuery(reads.project({ projectUuid: authCtx.projectUuid }));
+	const navigate = useNavigate();
+	const localized = useLocalizedPath();
 	const dragStartRef = React.useRef({
 		y: 0,
 		height: COLLAPSED_HEIGHT
@@ -200,11 +201,7 @@ function MobilePreviewDrawer({ page, projectName }) {
 								/* @__PURE__ */ jsx(DrawerTile, {
 									title: "Project settings",
 									icon: Settings,
-									onClick: () => {
-										if (!project) return;
-										window.open(`${authCtx.authenticationUrl}/${project.organizationSlug}/${project.slug}/overview`, "_blank", "noopener,noreferrer");
-									},
-									disabled: !project
+									onClick: () => void navigate({ to: localized("/camox/settings") })
 								})
 							]
 						})]