camox 0.6.1 → 0.7.0

package/dist/features/content/components/AssetCard.js

@@ -49,7 +49,7 @@ var AssetCard = (t0) => {
 	let t8;
 	if ($[10] !== extension || $[11] !== file.alt || $[12] !== file.filename || $[13] !== file.url || $[14] !== isImage) {
 		t8 = /* @__PURE__ */ jsx("div", {
-			className: "bg-muted flex aspect-4/3 w-full items-center justify-center overflow-hidden rounded-md",
+			className: "bg-muted flex aspect-4/3 w-full items-center justify-center overflow-hidden rounded-sm",
 			children: isImage ? /* @__PURE__ */ jsx("img", {
 				src: file.url,
 				alt: file.alt || file.filename,

package/dist/features/preview/CamoxPreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CamoxPreview.d.ts","sourceRoot":"","sources":["../../../src/features/preview/CamoxPreview.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA0D/B,wBAAgB,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;EAqC/B;AA6CD,eAAO,MAAM,WAAW,+CAoHvB,CAAC;AAMF,eAAO,MAAM,YAAY,GAAI,cAAc;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,4CA0FvE,CAAC;AAEF,wBAAgB,sBAAsB,SAuErC"}
+{"version":3,"file":"CamoxPreview.d.ts","sourceRoot":"","sources":["../../../src/features/preview/CamoxPreview.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA0D/B,wBAAgB,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;EAqC/B;AA6CD,eAAO,MAAM,WAAW,+CAoHvB,CAAC;AAMF,eAAO,MAAM,YAAY,GAAI,cAAc;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,4CA4FvE,CAAC;AAEF,wBAAgB,sBAAsB,SAuErC"}

package/dist/features/preview/CamoxPreview.js

@@ -3,8 +3,8 @@ import { actionsStore } from "../provider/actionsStore.js";
 import { useIsAuthenticated, useProjectSlug } from "../../lib/auth.js";
 import { getApiClient } from "../../lib/api-client.js";
 import { blockQueries, pageQueries, projectQueries } from "../../lib/queries.js";
-import { NormalizedDataProvider, seedBlockCaches, usePageBlocks } from "../../lib/normalized-data.js";
 import { formatPathSegment } from "../../lib/utils.js";
+import { NormalizedDataProvider, seedBlockCaches, usePageBlocks } from "../../lib/normalized-data.js";
 import { useCamoxApp } from "../provider/components/CamoxAppContext.js";
 import { Navbar } from "../studio/components/Navbar.js";
 import { AddBlockSheet } from "./components/AddBlockSheet.js";
@@ -371,22 +371,18 @@ var CamoxPreview = (t0) => {
 			className: "flex w-[300px] flex-col border-r-2",
 			children: [/* @__PURE__ */ jsxs(PanelHeader, {
 				className: "flew-row flex gap-2 px-2 py-2",
-				children: [/* @__PURE__ */ jsx(PagePicker, {}), /* @__PURE__ */ jsxs(Tooltip, {
-					delayDuration: 500,
-					children: [/* @__PURE__ */ jsx(TooltipTrigger, {
-						asChild: true,
-						children: /* @__PURE__ */ jsx(Button, {
-							type: "button",
-							variant: "outline",
-							size: "icon",
-							onClick: () => previewStore.send({
-								type: "openEditPageSheet",
-								pageId: pageData.page.id
-							}),
-							children: /* @__PURE__ */ jsx(Info, { className: "text-muted-foreground size-4" })
+				children: [/* @__PURE__ */ jsx(PagePicker, {}), /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+					render: /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "outline",
+						size: "icon",
+						onClick: () => previewStore.send({
+							type: "openEditPageSheet",
+							pageId: pageData.page.id
 						})
-					}), /* @__PURE__ */ jsx(TooltipContent, { children: "Page metadata, SEO and markdown" })]
-				})]
+					}),
+					children: /* @__PURE__ */ jsx(Info, { className: "text-muted-foreground size-4" })
+				}), /* @__PURE__ */ jsx(TooltipContent, { children: "Page metadata, SEO and markdown" })] })]
 			}), /* @__PURE__ */ jsx(PanelContent, {
 				className: "flex grow basis-0 flex-col gap-2 overflow-auto p-2",
 				children: /* @__PURE__ */ jsx(PageTree, {})

package/dist/features/preview/components/AddBlockSheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AddBlockSheet.d.ts","sourceRoot":"","sources":["../../../../src/features/preview/components/AddBlockSheet.tsx"],"names":[],"mappings":"AAkCA,QAAA,MAAM,aAAa,+CAqPlB,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"AddBlockSheet.d.ts","sourceRoot":"","sources":["../../../../src/features/preview/components/AddBlockSheet.tsx"],"names":[],"mappings":"AAkCA,QAAA,MAAM,aAAa,+CAiPlB,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,CAAC"}

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

@@ -259,8 +259,7 @@ var AddBlockSheet = () => {
 	if ($[31] === Symbol.for("react.memo_cache_sentinel")) {
 		t19 = /* @__PURE__ */ jsx(CommandInput, {
 			placeholder: "Search blocks...",
-			autoFocus: true,
-			wrapperClassName: "border border-input rounded-md shadow-xs focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]"
+			autoFocus: true
 		});
 		$[31] = t19;
 	} else t19 = $[31];

package/dist/features/preview/components/AssetLightbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AssetLightbox.d.ts","sourceRoot":"","sources":["../../../../src/features/preview/components/AssetLightbox.tsx"],"names":[],"mappings":"AAuDA,UAAU,kBAAkB;IAC1B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,aAAa,GAAI,gCAAgC,kBAAkB,mDAsUxE,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"AssetLightbox.d.ts","sourceRoot":"","sources":["../../../../src/features/preview/components/AssetLightbox.tsx"],"names":[],"mappings":"AAuDA,UAAU,kBAAkB;IAC1B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,aAAa,GAAI,gCAAgC,kBAAkB,mDAkVxE,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,CAAC"}

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

@@ -195,6 +195,7 @@ var AssetLightbox = ({ open, onOpenChange, fileId }) => {
 		children: /* @__PURE__ */ jsxs(DialogContent, {
 			className: "h-[90vh] max-h-[90vh] w-[90vw] max-w-[90vw] gap-0 overflow-hidden p-0 sm:max-w-[90vw]",
 			showCloseButton: false,
+			forceOverlay: true,
 			children: [
 				/* @__PURE__ */ jsx(DialogTitle, {
 					className: "sr-only",
@@ -306,34 +307,31 @@ var AssetLightbox = ({ open, onOpenChange, fileId }) => {
 							children: [
 								/* @__PURE__ */ jsxs(ButtonGroup, { children: [
 									/* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
-										asChild: true,
-										children: /* @__PURE__ */ jsx(Button, {
+										render: /* @__PURE__ */ jsx(Button, {
 											type: "button",
 											variant: "outline",
 											size: "icon",
-											onClick: handleCopyUrl,
-											children: /* @__PURE__ */ jsx(Link, {})
-										})
+											onClick: handleCopyUrl
+										}),
+										children: /* @__PURE__ */ jsx(Link, {})
 									}), /* @__PURE__ */ jsx(TooltipContent, { children: "Copy URL" })] }),
 									/* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
-										asChild: true,
-										children: /* @__PURE__ */ jsx(Button, {
+										render: /* @__PURE__ */ jsx(Button, {
 											type: "button",
 											variant: "outline",
 											size: "icon",
-											onClick: handleDownload,
-											children: /* @__PURE__ */ jsx(Download, {})
-										})
+											onClick: handleDownload
+										}),
+										children: /* @__PURE__ */ jsx(Download, {})
 									}), /* @__PURE__ */ jsx(TooltipContent, { children: "Download" })] }),
 									/* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
-										asChild: true,
-										children: /* @__PURE__ */ jsx(Button, {
+										render: /* @__PURE__ */ jsx(Button, {
 											type: "button",
 											variant: "outline",
 											size: "icon",
-											onClick: handleDelete,
-											children: /* @__PURE__ */ jsx(Trash2, {})
-										})
+											onClick: handleDelete
+										}),
+										children: /* @__PURE__ */ jsx(Trash2, {})
 									}), /* @__PURE__ */ jsx(TooltipContent, { children: "Delete" })] })
 								] }),
 								/* @__PURE__ */ jsxs("div", {

package/dist/features/preview/components/BlockActionsPopover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BlockActionsPopover.d.ts","sourceRoot":"","sources":["../../../../src/features/preview/components/BlockActionsPopover.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,KAAK,eAAe,EAAiB,MAAM,uBAAuB,CAAC;AAW5E,UAAU,wBAAwB;IAChC,KAAK,EAAE,eAAe,GAAG,SAAS,GAAG,IAAI,CAAC;IAC1C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,eAAe,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;CACtC;AAED,QAAA,MAAM,mBAAmB,GAAI,iFAQ1B,wBAAwB,4CAiT1B,CAAC;AAQF,iBAAS,wBAAwB,SA4NhC;AAED,OAAO,EAAE,mBAAmB,EAAE,wBAAwB,EAAE,CAAC"}
+{"version":3,"file":"BlockActionsPopover.d.ts","sourceRoot":"","sources":["../../../../src/features/preview/components/BlockActionsPopover.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,KAAK,eAAe,EAAiB,MAAM,uBAAuB,CAAC;AAW5E,UAAU,wBAAwB;IAChC,KAAK,EAAE,eAAe,GAAG,SAAS,GAAG,IAAI,CAAC;IAC1C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,eAAe,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;CACtC;AAED,QAAA,MAAM,mBAAmB,GAAI,iFAQ1B,wBAAwB,4CA2T1B,CAAC;AAQF,iBAAS,wBAAwB,SA4NhC;AAED,OAAO,EAAE,mBAAmB,EAAE,wBAAwB,EAAE,CAAC"}

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

@@ -1,8 +1,8 @@
 import { previewStore, selectionItemId } from "../previewStore.js";
 import { actionsStore } from "../../provider/actionsStore.js";
 import { blockMutations, repeatableItemMutations } from "../../../lib/queries.js";
-import { usePageBlocks } from "../../../lib/normalized-data.js";
 import { formatShortcut } from "../../../lib/utils.js";
+import { usePageBlocks } from "../../../lib/normalized-data.js";
 import { useCamoxApp } from "../../provider/components/CamoxAppContext.js";
 import { trackClientEvent } from "../../../lib/analytics-client.js";
 import { useUpdateBlockPosition } from "./useUpdateBlockPosition.js";
@@ -14,9 +14,8 @@ import { useMutation } from "@tanstack/react-query";
 import { useSelector } from "@xstate/store/react";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Button } from "@camox/ui/button";
 import { Copy, Pen, Settings, Trash2 } from "lucide-react";
-import { Command, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from "@camox/ui/command";
+import { Command, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from "@camox/ui/command";
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@camox/ui/alert-dialog";
 //#region src/features/preview/components/BlockActionsPopover.tsx
 var BlockActionsPopover = ({ block, children, open, onOpenChange, align = "start", isLayoutBlock, layoutPlacement }) => {
@@ -105,10 +104,7 @@ var BlockActionsPopover = ({ block, children, open, onOpenChange, align = "start
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Popover, {
 		open,
 		onOpenChange,
-		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
-			asChild: true,
-			children
-		}), block && /* @__PURE__ */ jsx(PopoverContent, {
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, { render: children }), block && /* @__PURE__ */ jsx(PopoverContent, {
 			className: "w-[300px] p-0",
 			align,
 			children: /* @__PURE__ */ jsxs(Command, { children: [/* @__PURE__ */ jsx(CommandInput, { placeholder: "Search actions..." }), /* @__PURE__ */ jsxs(CommandList, {
@@ -126,10 +122,10 @@ var BlockActionsPopover = ({ block, children, open, onOpenChange, align = "start
 						children: [/* @__PURE__ */ jsxs("div", {
 							className: "flex items-center gap-2",
 							children: [/* @__PURE__ */ jsx(Pen, { className: "h-4 w-4" }), "Edit in form"]
-						}), formatShortcut({
+						}), /* @__PURE__ */ jsx(CommandShortcut, { children: formatShortcut({
 							key: "j",
 							withMeta: true
-						})]
+						}) })]
 					}), !isLayoutBlock && (() => {
 						const blockDef = camoxApp.getBlockById(block.type);
 						if (!(blockDef?.settingsSchema?.properties && Object.keys(blockDef.settingsSchema.properties).length > 0)) return null;
@@ -186,7 +182,7 @@ var BlockActionsPopover = ({ block, children, open, onOpenChange, align = "start
 							children: [/* @__PURE__ */ jsxs("div", {
 								className: "flex items-center gap-2",
 								children: [/* @__PURE__ */ jsx("span", { className: "w-4" }), "Add block below"]
-							}), formatShortcut({ key: "o" })]
+							}), /* @__PURE__ */ jsx(CommandShortcut, { children: formatShortcut({ key: "o" }) })]
 						}), /* @__PURE__ */ jsxs(CommandItem, {
 							className: "justify-between",
 							onSelect: () => {
@@ -196,10 +192,10 @@ var BlockActionsPopover = ({ block, children, open, onOpenChange, align = "start
 							children: [/* @__PURE__ */ jsxs("div", {
 								className: "flex items-center gap-2",
 								children: [/* @__PURE__ */ jsx("span", { className: "w-4" }), "Add block above"]
-							}), formatShortcut({
+							}), /* @__PURE__ */ jsx(CommandShortcut, { children: formatShortcut({
 								key: "o",
 								withShift: true
-							})]
+							}) })]
 						})] }),
 						/* @__PURE__ */ jsx(CommandSeparator, {}),
 						/* @__PURE__ */ jsx(CommandGroup, { children: /* @__PURE__ */ jsxs(CommandItem, {
@@ -211,10 +207,10 @@ var BlockActionsPopover = ({ block, children, open, onOpenChange, align = "start
 							children: [/* @__PURE__ */ jsxs("div", {
 								className: "flex items-center gap-2",
 								children: [/* @__PURE__ */ jsx(Copy, { className: "h-4 w-4" }), "Duplicate block"]
-							}), formatShortcut({
+							}), /* @__PURE__ */ jsx(CommandShortcut, { children: formatShortcut({
 								key: "d",
 								withMeta: true
-							})]
+							}) })]
 						}) }),
 						/* @__PURE__ */ jsx(CommandSeparator, {}),
 						/* @__PURE__ */ jsxs(CommandGroup, { children: [
@@ -243,10 +239,10 @@ var BlockActionsPopover = ({ block, children, open, onOpenChange, align = "start
 								children: [/* @__PURE__ */ jsxs("div", {
 									className: "flex items-center gap-2",
 									children: [/* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4" }), "Delete block"]
-								}), formatShortcut({
+								}), /* @__PURE__ */ jsx(CommandShortcut, { children: formatShortcut({
 									key: "Backspace",
 									withMeta: true
-								})]
+								}) })]
 							})
 						] })
 					] })
@@ -260,13 +256,14 @@ var BlockActionsPopover = ({ block, children, open, onOpenChange, align = "start
 			"Are you sure you want to delete ",
 			/* @__PURE__ */ jsx("strong", { children: blockToDelete?.summary }),
 			"? This action cannot be undone."
-		] })] }), /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [/* @__PURE__ */ jsx(AlertDialogCancel, { children: "Cancel" }), /* @__PURE__ */ jsx(AlertDialogAction, {
+		] })] }), /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [/* @__PURE__ */ jsx(AlertDialogCancel, {
+			variant: "outline",
+			size: "default",
+			children: "Cancel"
+		}), /* @__PURE__ */ jsx(AlertDialogAction, {
+			variant: "destructive",
 			onClick: () => blockToDelete && handleDeleteBlock(blockToDelete),
-			asChild: true,
-			children: /* @__PURE__ */ jsx(Button, {
-				variant: "destructive",
-				children: "Delete"
-			})
+			children: "Delete"
 		})] })] })
 	})] });
 };

package/dist/features/preview/components/CreatePageSheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CreatePageSheet.d.ts","sourceRoot":"","sources":["../../../../src/features/preview/components/CreatePageSheet.tsx"],"names":[],"mappings":"AAyBA,QAAA,MAAM,eAAe,+CA2JpB,CAAC;AAEF,OAAO,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"CreatePageSheet.d.ts","sourceRoot":"","sources":["../../../../src/features/preview/components/CreatePageSheet.tsx"],"names":[],"mappings":"AAyBA,QAAA,MAAM,eAAe,+CAiKpB,CAAC;AAEF,OAAO,EAAE,eAAe,EAAE,CAAC"}

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

@@ -118,12 +118,18 @@ var CreatePageSheet = () => {
 								children: "Layout"
 							}), /* @__PURE__ */ jsxs(Select, {
 								value: field.state.value,
-								onValueChange: field.handleChange,
+								onValueChange: (value_0) => {
+									if (value_0 != null) field.handleChange(value_0);
+								},
 								disabled: layouts != null && layouts.length <= 1,
-								children: [/* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select a layout" }) }), /* @__PURE__ */ jsx(SelectContent, { children: layouts?.map((t) => /* @__PURE__ */ jsx(SelectItem, {
+								items: layouts?.map((t) => ({
 									value: String(t.id),
-									children: camoxApp.getLayoutById(t.layoutId)?.title ?? t.layoutId
-								}, t.id)) })]
+									label: camoxApp.getLayoutById(t.layoutId)?.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: String(t_0.id),
+									children: camoxApp.getLayoutById(t_0.layoutId)?.title ?? t_0.layoutId
+								}, t_0.id)) })]
 							})]
 						})
 					}),

package/dist/features/preview/components/EditPageSheet.d.ts

@@ -1,3 +1,3 @@
-declare const EditPageSheet: () => import("react/jsx-runtime").JSX.Element | null;
+declare const EditPageSheet: () => import("react/jsx-runtime").JSX.Element;
 export { EditPageSheet };
 //# sourceMappingURL=EditPageSheet.d.ts.map

package/dist/features/preview/components/EditPageSheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditPageSheet.d.ts","sourceRoot":"","sources":["../../../../src/features/preview/components/EditPageSheet.tsx"],"names":[],"mappings":"AAqCA,QAAA,MAAM,aAAa,sDAMlB,CAAC;AAoXF,OAAO,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"EditPageSheet.d.ts","sourceRoot":"","sources":["../../../../src/features/preview/components/EditPageSheet.tsx"],"names":[],"mappings":"AAqCA,QAAA,MAAM,aAAa,+CAIlB,CAAC;AA2XF,OAAO,EAAE,aAAa,EAAE,CAAC"}

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

@@ -27,7 +27,6 @@ import { Switch } from "@camox/ui/switch";
 var EditPageSheet = () => {
 	const $ = c(2);
 	const editingPageId = useSelector(previewStore, _temp);
-	if (!editingPageId) return null;
 	let t0;
 	if ($[0] !== editingPageId) {
 		t0 = /* @__PURE__ */ jsx(EditPageSheetContent, { pageId: editingPageId });
@@ -43,7 +42,10 @@ var EditPageSheetContent = ({ pageId }) => {
 	const setAiSeo = useMutation(pageMutations.setAiSeo());
 	const setMetaTitle = useMutation(pageMutations.setMetaTitle());
 	const setMetaDescription = useMutation(pageMutations.setMetaDescription());
-	const { data: page } = useQuery(pageQueries.getById(pageId));
+	const { data: page } = useQuery({
+		...pageQueries.getById(pageId),
+		enabled: pageId != null
+	});
 	const { data: project } = useQuery(projectQueries.getBySlug(projectSlug));
 	const { data: pages } = useQuery({
 		...pageQueries.list(project?.id ?? 0),
@@ -106,17 +108,17 @@ var EditPageSheetContent = ({ pageId }) => {
 		page,
 		form
 	]);
-	if (!page) return null;
-	const isRootPage = page.fullPath === "/";
-	const pageLayoutRecord = layouts?.find((l) => l.id === page.layoutId);
+	const isOpen = pageId != null && !!page;
+	const isRootPage = page?.fullPath === "/";
+	const pageLayoutRecord = layouts?.find((l) => l.id === page?.layoutId);
 	const layoutDef = pageLayoutRecord ? camoxApp.getLayoutById(pageLayoutRecord.layoutId) : void 0;
-	const metaTitle = layoutDef ? layoutDef.buildMetaTitle({
+	const metaTitle = layoutDef && page ? layoutDef.buildMetaTitle({
 		pageMetaTitle: page.metaTitle ?? "",
 		projectName: project?.name ?? "",
 		pageFullPath: page.fullPath
-	}) : page.metaTitle ?? "";
+	}) : page?.metaTitle ?? "";
 	return /* @__PURE__ */ jsx(Sheet.Sheet, {
-		open: true,
+		open: isOpen,
 		onOpenChange: (value) => {
 			if (!value) previewStore.send({ type: "closeEditPageSheet" });
 		},
@@ -125,7 +127,7 @@ var EditPageSheetContent = ({ pageId }) => {
 			children: [/* @__PURE__ */ jsxs(Sheet.SheetHeader, {
 				className: "border-border border-b",
 				children: [/* @__PURE__ */ jsx(Sheet.SheetTitle, { children: "Edit page" }), /* @__PURE__ */ jsx(Sheet.SheetDescription, { children: "Update the page details." })]
-			}), /* @__PURE__ */ jsxs("div", {
+			}), page && /* @__PURE__ */ jsxs("div", {
 				className: "flex-1 overflow-y-auto",
 				children: [
 					/* @__PURE__ */ jsxs("div", {
@@ -168,10 +170,14 @@ var EditPageSheetContent = ({ pageId }) => {
 											children: [/* @__PURE__ */ jsx(Label, { children: "Layout" }), /* @__PURE__ */ jsxs(Select, {
 												value: field.state.value ? String(field.state.value) : "",
 												onValueChange: (value_0) => field.handleChange(Number(value_0)),
-												children: [/* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select a layout" }) }), /* @__PURE__ */ jsx(SelectContent, { children: layouts.map((t) => /* @__PURE__ */ jsx(SelectItem, {
+												items: layouts.map((t) => ({
 													value: String(t.id),
-													children: camoxApp.getLayoutById(t.layoutId)?.title ?? t.layoutId
-												}, t.id)) })]
+													label: camoxApp.getLayoutById(t.layoutId)?.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: String(t_0.id),
+													children: camoxApp.getLayoutById(t_0.layoutId)?.title ?? t_0.layoutId
+												}, t_0.id)) })]
 											})]
 										})
 									}),
@@ -291,10 +297,7 @@ var SearchEnginePreview = (t0) => {
 	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
 		t2 = /* @__PURE__ */ jsxs("div", {
 			className: "flex items-center gap-1.5",
-			children: [t1, /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
-				asChild: true,
-				children: /* @__PURE__ */ jsx(Info, { className: "text-muted-foreground size-3.5" })
-			}), /* @__PURE__ */ jsx(TooltipContent, { children: "Titles are cropped after 60 characters and descriptions after 155, like Google typically does." })] })]
+			children: [t1, /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(Info, { className: "text-muted-foreground size-3.5" }) }), /* @__PURE__ */ jsx(TooltipContent, { children: "Titles are cropped after 60 characters and descriptions after 155, like Google typically does." })] })]
 		});
 		$[1] = t2;
 	} else t2 = $[1];
@@ -458,7 +461,7 @@ var SocialPreviewSection = (t0) => {
 		t11 = /* @__PURE__ */ jsxs("div", {
 			className: "space-y-2 pt-2",
 			children: [t2, /* @__PURE__ */ jsxs("div", {
-				className: "border-border bg-background overflow-hidden rounded-lg border",
+				className: "border-border overflow-hidden rounded-lg border",
 				children: [t3, t10]
 			})]
 		});

package/dist/features/preview/components/FieldOverlayStyles.d.ts

@@ -0,0 +1,2 @@
+export declare const FieldOverlayStyles: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FieldOverlayStyles.d.ts.map

package/dist/features/preview/components/FieldOverlayStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldOverlayStyles.d.ts","sourceRoot":"","sources":["../../../../src/features/preview/components/FieldOverlayStyles.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,+CAE9B,CAAC"}

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

@@ -0,0 +1,15 @@
+import studio_overlays_default from "../studio-overlays.css?inline.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+//#region src/features/preview/components/FieldOverlayStyles.tsx
+var FieldOverlayStyles = () => {
+	const $ = c(1);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx("style", { children: studio_overlays_default });
+		$[0] = t0;
+	} else t0 = $[0];
+	return t0;
+};
+//#endregion
+export { FieldOverlayStyles };

package/dist/features/preview/components/Frame.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+interface FrameContextValue {
+    window: Window | null;
+    iframeElement: HTMLIFrameElement | null;
+}
+export declare function useFrame(): FrameContextValue;
+interface FrameProps {
+    children: React.ReactNode;
+    /** Optional className for the iframe element */
+    className?: string;
+    /** Optional inline styles for the iframe element */
+    style?: React.CSSProperties;
+    /** Whether to copy parent document styles into the iframe (default: true) */
+    copyStyles?: boolean;
+    /** Callback when iframe is ready, receives the iframe element */
+    onIframeReady?: (iframe: HTMLIFrameElement) => void;
+}
+export declare const Frame: ({ children, className, style, copyStyles, onIframeReady, }: FrameProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Frame.d.ts.map

package/dist/features/preview/components/Frame.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Frame.d.ts","sourceRoot":"","sources":["../../../../src/features/preview/components/Frame.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,UAAU,iBAAiB;IACzB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,aAAa,EAAE,iBAAiB,GAAG,IAAI,CAAC;CACzC;AAOD,wBAAgB,QAAQ,sBAMvB;AAED,UAAU,UAAU;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oDAAoD;IACpD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,6EAA6E;IAC7E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iEAAiE;IACjE,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;CACrD;AAED,eAAO,MAAM,KAAK,GAAI,4DAMnB,UAAU,4CAyGZ,CAAC"}

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

@@ -0,0 +1,162 @@
+import { cn } from "../../../lib/utils.js";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+import { createPortal } from "react-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/features/preview/components/Frame.tsx
+var FrameContext = React.createContext({
+	window: null,
+	iframeElement: null
+});
+function useFrame() {
+	const context = React.use(FrameContext);
+	if (!context) throw new Error("useFrame must be used within a Frame");
+	return context;
+}
+var Frame = (t0) => {
+	const $ = c(25);
+	const { children, className, style, copyStyles: t1, onIframeReady } = t0;
+	const copyStyles = t1 === void 0 ? true : t1;
+	const iframeRef = React.useRef(null);
+	const [iframeWindow, setIframeWindow] = React.useState(null);
+	const [iframeElement, setIframeElement] = React.useState(null);
+	const [mountNode, setMountNode] = React.useState(null);
+	const [hasOpenPopup, setHasOpenPopup] = React.useState(false);
+	let t2;
+	let t3;
+	if ($[0] !== copyStyles || $[1] !== onIframeReady) {
+		t2 = () => {
+			const iframe = iframeRef.current;
+			if (!iframe) return;
+			const handleLoad = () => {
+				const iframeDoc = iframe.contentDocument;
+				const iframeWin = iframe.contentWindow;
+				if (!iframeDoc || !iframeWin) return;
+				iframeDoc.open();
+				iframeDoc.write("<!DOCTYPE html><html><head></head><body style='background: transparent;'></body></html>");
+				iframeDoc.close();
+				iframeWin.addEventListener("click", _temp);
+				if (copyStyles) Array.from(document.head.querySelectorAll("style, link[rel=\"stylesheet\"]")).forEach((style_0) => {
+					const clonedStyle = style_0.cloneNode(true);
+					iframeDoc.head.appendChild(clonedStyle);
+				});
+				setMountNode(iframeDoc.body);
+				setIframeWindow(iframeWin);
+				setIframeElement(iframe);
+				onIframeReady?.(iframe);
+			};
+			iframe.addEventListener("load", handleLoad);
+			if (iframe.contentDocument?.readyState === "complete") handleLoad();
+			return () => {
+				iframe.removeEventListener("load", handleLoad);
+			};
+		};
+		t3 = [copyStyles, onIframeReady];
+		$[0] = copyStyles;
+		$[1] = onIframeReady;
+		$[2] = t2;
+		$[3] = t3;
+	} else {
+		t2 = $[2];
+		t3 = $[3];
+	}
+	React.useEffect(t2, t3);
+	let t4;
+	let t5;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = () => {
+			const checkForOpenPopup = () => {
+				setHasOpenPopup(document.body.querySelector(":scope > [data-open]") !== null);
+			};
+			checkForOpenPopup();
+			const observer = new MutationObserver(checkForOpenPopup);
+			observer.observe(document.body, {
+				childList: true,
+				subtree: true,
+				attributes: true,
+				attributeFilter: ["data-open", "data-closed"]
+			});
+			return () => {
+				observer.disconnect();
+			};
+		};
+		t5 = [];
+		$[4] = t4;
+		$[5] = t5;
+	} else {
+		t4 = $[4];
+		t5 = $[5];
+	}
+	React.useEffect(t4, t5);
+	let t6;
+	if ($[6] !== className) {
+		t6 = cn("relative w-full h-full", className);
+		$[6] = className;
+		$[7] = t6;
+	} else t6 = $[7];
+	let t7;
+	if ($[8] !== hasOpenPopup) {
+		t7 = hasOpenPopup && /* @__PURE__ */ jsx("div", { className: "absolute top-0 left-0 h-full w-full" });
+		$[8] = hasOpenPopup;
+		$[9] = t7;
+	} else t7 = $[9];
+	let t8;
+	if ($[10] !== iframeElement || $[11] !== iframeWindow) {
+		t8 = {
+			window: iframeWindow,
+			iframeElement
+		};
+		$[10] = iframeElement;
+		$[11] = iframeWindow;
+		$[12] = t8;
+	} else t8 = $[12];
+	let t9;
+	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = /* @__PURE__ */ jsx("iframe", {
+			ref: iframeRef,
+			className: cn("w-full h-full")
+		});
+		$[13] = t9;
+	} else t9 = $[13];
+	let t10;
+	if ($[14] !== children || $[15] !== mountNode) {
+		t10 = mountNode && createPortal(children, mountNode);
+		$[14] = children;
+		$[15] = mountNode;
+		$[16] = t10;
+	} else t10 = $[16];
+	let t11;
+	if ($[17] !== t10 || $[18] !== t8) {
+		t11 = /* @__PURE__ */ jsxs(FrameContext.Provider, {
+			value: t8,
+			children: [t9, t10]
+		});
+		$[17] = t10;
+		$[18] = t8;
+		$[19] = t11;
+	} else t11 = $[19];
+	let t12;
+	if ($[20] !== style || $[21] !== t11 || $[22] !== t6 || $[23] !== t7) {
+		t12 = /* @__PURE__ */ jsxs("div", {
+			className: t6,
+			style,
+			children: [t7, t11]
+		});
+		$[20] = style;
+		$[21] = t11;
+		$[22] = t6;
+		$[23] = t7;
+		$[24] = t12;
+	} else t12 = $[24];
+	return t12;
+};
+function _temp(e) {
+	if (e.defaultPrevented) return;
+	const anchor = e.target.closest("a");
+	if (!anchor?.href) return;
+	if (anchor.target === "_blank") return;
+	e.preventDefault();
+	window.top?.location.assign(anchor.href);
+}
+//#endregion
+export { Frame, useFrame };

package/dist/features/preview/components/LinkFieldEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LinkFieldEditor.d.ts","sourceRoot":"","sources":["../../../../src/features/preview/components/LinkFieldEditor.tsx"],"names":[],"mappings":"AA2BA,UAAU,oBAAoB;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACnC,MAAM,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;CACrE;AAUD,QAAA,MAAM,eAAe,GAAI,gDAAgD,oBAAoB,4CA6K5F,CAAC;AAEF,OAAO,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"LinkFieldEditor.d.ts","sourceRoot":"","sources":["../../../../src/features/preview/components/LinkFieldEditor.tsx"],"names":[],"mappings":"AA2BA,UAAU,oBAAoB;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACnC,MAAM,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;CACrE;AAUD,QAAA,MAAM,eAAe,GAAI,gDAAgD,oBAAoB,4CA+K5F,CAAC;AAEF,OAAO,EAAE,eAAe,EAAE,CAAC"}

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

@@ -271,20 +271,19 @@ var LinkFieldEditor = (t0) => {
 	const t29 = linkValue.type === "page" ? /* @__PURE__ */ jsxs(Popover, {
 		open: pagePickerOpen,
 		onOpenChange: setPagePickerOpen,
-		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
-			asChild: true,
-			children: /* @__PURE__ */ jsxs(Button, {
+		children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
+			render: /* @__PURE__ */ jsx(Button, {
 				variant: "outline",
 				role: "combobox",
-				className: "justify-between font-normal",
-				children: [selectedPage ? /* @__PURE__ */ jsx("span", {
-					className: "truncate",
-					children: selectedPage.metaTitle ?? formatPathSegment(selectedPage.pathSegment)
-				}) : /* @__PURE__ */ jsx("span", {
-					className: "text-muted-foreground",
-					children: "Select a page"
-				}), /* @__PURE__ */ jsx(ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })]
-			})
+				className: "justify-between font-normal"
+			}),
+			children: [selectedPage ? /* @__PURE__ */ jsx("span", {
+				className: "truncate",
+				children: selectedPage.metaTitle ?? formatPathSegment(selectedPage.pathSegment)
+			}) : /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground",
+				children: "Select a page"
+			}), /* @__PURE__ */ jsx(ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })]
 		}), /* @__PURE__ */ jsx(PopoverContent, {
 			align: "start",
 			className: "p-0",