camox 0.34.0 → 0.36.0

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

@@ -1,7 +1,7 @@
 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";
+import { Label } from "@camox/ui/label";
+import { Input } from "@camox/ui/input";
 
 //#region src/features/preview/components/PageNicknameField.tsx
 const PAGE_NICKNAME_MAX_LENGTH = 80;

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

@@ -4,15 +4,15 @@ import { pageMutations, pageQueries, projectQueries } from "../../../lib/queries
 import { cn } from "../../../lib/utils.js";
 import { previewStore } from "../previewStore.js";
 import { PageStatusBadge } from "./PageStatusBadge.js";
-import { Popover, PopoverContent, PopoverTrigger } from "@camox/ui/popover";
 import { useMutation, useQuery } from "@tanstack/react-query";
-import { useSelector } from "@xstate/store-react";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { toast } from "@camox/ui/toaster";
+import { useSelector } from "@xstate/store-react";
 import { Button } from "@camox/ui/button";
 import { Check, ChevronsUpDown, Pencil, Plus, Trash2 } from "lucide-react";
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@camox/ui/alert-dialog";
+import { Popover, PopoverContent, PopoverTrigger } from "@camox/ui/popover";
+import { toast } from "@camox/ui/toaster";
 import { Skeleton } from "@camox/ui/skeleton";
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from "@camox/ui/command";
 

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

@@ -1,15 +1,15 @@
-import { cn } from "../../../lib/utils.js";
-import { previewStore } from "../previewStore.js";
 import { usePageBlocks } from "../../../lib/normalized-data.js";
+import { cn } from "../../../lib/utils.js";
 import { useCamoxApp } from "../../provider/components/CamoxAppContext.js";
+import { previewStore } from "../previewStore.js";
 import { useRequireDraftSource } from "../../../core/hooks/useRequireDraftSource.js";
 import { useUpdateBlockPosition } from "./useUpdateBlockPosition.js";
 import { BlockActionsPopover } from "./BlockActionsPopover.js";
 import { usePreviewedPage } from "../CamoxPreview.js";
 import { c } from "react/compiler-runtime";
-import { useSelector } from "@xstate/store-react";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useSelector } from "@xstate/store-react";
 import { Button } from "@camox/ui/button";
 import { Ellipsis, GripVertical, LayoutTemplate, Plus } from "lucide-react";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@camox/ui/tooltip";

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

@@ -1,10 +1,10 @@
-import { previewStore } from "../previewStore.js";
 import { NormalizedDataProvider } from "../../../lib/normalized-data.js";
 import { BlockErrorBoundary } from "./BlockErrorBoundary.js";
+import { previewStore } from "../previewStore.js";
 import { c } from "react/compiler-runtime";
-import { useSelector } from "@xstate/store-react";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
+import { useSelector } from "@xstate/store-react";
 
 //#region src/features/preview/components/PeekedBlock.tsx
 const PeekedBlock = (t0) => {

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

@@ -1,17 +1,17 @@
 import { actionsStore } from "../../provider/actionsStore.js";
 import { checkIfInputFocused, cn } from "../../../lib/utils.js";
-import { Frame, useFrame } from "./Frame.js";
 import { previewStore } from "../previewStore.js";
 import { useBlockActionsShortcuts } from "./BlockActionsPopover.js";
 import { FieldOverlayStyles } from "./FieldOverlayStyles.js";
 import { FieldToolbar } from "./FieldToolbar.js";
+import { Frame, useFrame } from "./Frame.js";
 import { Overlays } from "./Overlays.js";
 import { OverlayTracker } from "./OverlayTracker.js";
 import { PreviewToolbar } from "./PreviewToolbar.js";
 import { c } from "react/compiler-runtime";
-import { useSelector } from "@xstate/store-react";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useSelector } from "@xstate/store-react";
 import { PanelContent } from "@camox/ui/panel";
 
 //#region src/features/preview/components/PreviewPanel.tsx

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

@@ -2,25 +2,25 @@ import { actionsStore } from "../../provider/actionsStore.js";
 import { getActionShortcut } from "../../../lib/utils.js";
 import { previewStore } from "../previewStore.js";
 import { c } from "react/compiler-runtime";
-import { Label } from "@camox/ui/label";
-import { useSelector } from "@xstate/store-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useSelector } from "@xstate/store-react";
 import { Button } from "@camox/ui/button";
 import { Monitor, Smartphone, Tablet, X } from "lucide-react";
+import { Label } from "@camox/ui/label";
 import { ButtonGroup } from "@camox/ui/button-group";
-import { Switch } from "@camox/ui/switch";
 import * as Tooltip$1 from "@camox/ui/tooltip";
+import { Switch } from "@camox/ui/switch";
 import { FloatingToolbar } from "@camox/ui/floating-toolbar";
 import { Toggle } from "@camox/ui/toggle";
 
 //#region src/features/preview/components/PreviewToolbar.tsx
 const PreviewToolbar = (t0) => {
-	const $ = c(68);
-	if ($[0] !== "68e35a20462160afd6c2aeaffaf03edcd93240318bca212e17001e624c1d829c") {
-		for (let $i = 0; $i < 68; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "68e35a20462160afd6c2aeaffaf03edcd93240318bca212e17001e624c1d829c";
+	const $ = c(74);
+	if ($[0] !== "f9ff999569a69264033e31a270ebbb7097b2072aec97a7129d1758e95b5b6407") {
+		for (let $i = 0; $i < 74; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "f9ff999569a69264033e31a270ebbb7097b2072aec97a7129d1758e95b5b6407";
 	}
-	const { onEditModeChange } = t0;
+	const { onEditModeChange, pageStatus, hasLiveVersion } = t0;
 	const isEditMode = useSelector(previewStore, _temp);
 	const isToolbarHidden = useSelector(previewStore, _temp2);
 	const actions = useSelector(actionsStore, _temp3);
@@ -70,7 +70,7 @@ const PreviewToolbar = (t0) => {
 	let t5;
 	if ($[11] !== t2 || $[12] !== t4) {
 		t5 = /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-2 px-2",
+			className: "flex shrink-0 items-center gap-2 px-2",
 			children: [t2, t4]
 		});
 		$[11] = t2;
@@ -246,65 +246,88 @@ const PreviewToolbar = (t0) => {
 		$[53] = t30;
 	} else t30 = $[53];
 	let t31;
-	if ($[54] !== isEditMode) {
-		t31 = /* @__PURE__ */ jsx(Button, {
+	if ($[54] !== hasLiveVersion || $[55] !== pageStatus) {
+		t31 = pageStatus && /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "outline",
+			disabled: pageStatus === "published" || !hasLiveVersion,
+			onClick: _temp5,
+			children: "View live site"
+		});
+		$[54] = hasLiveVersion;
+		$[55] = pageStatus;
+		$[56] = t31;
+	} else t31 = $[56];
+	let t32;
+	if ($[57] !== isEditMode) {
+		t32 = /* @__PURE__ */ jsx(Button, {
 			type: "button",
 			variant: "ghost",
 			size: "icon",
 			disabled: isEditMode,
-			onClick: _temp5,
+			onClick: _temp6,
 			"aria-label": "Hide toolbar",
 			className: "text-muted-foreground"
 		});
-		$[54] = isEditMode;
-		$[55] = t31;
-	} else t31 = $[55];
-	let t32;
-	if ($[56] === Symbol.for("react.memo_cache_sentinel")) {
-		t32 = /* @__PURE__ */ jsx(X, {});
-		$[56] = t32;
-	} else t32 = $[56];
+		$[57] = isEditMode;
+		$[58] = t32;
+	} else t32 = $[58];
 	let t33;
-	if ($[57] !== t31) {
-		t33 = /* @__PURE__ */ jsx(Tooltip$1.TooltipTrigger, {
-			render: t31,
-			children: t32
-		});
-		$[57] = t31;
-		$[58] = t33;
-	} else t33 = $[58];
-	let t34;
 	if ($[59] === Symbol.for("react.memo_cache_sentinel")) {
-		t34 = /* @__PURE__ */ jsx(Tooltip$1.TooltipContent, { children: "Hide toolbar" });
-		$[59] = t34;
-	} else t34 = $[59];
+		t33 = /* @__PURE__ */ jsx(X, {});
+		$[59] = t33;
+	} else t33 = $[59];
+	let t34;
+	if ($[60] !== t32) {
+		t34 = /* @__PURE__ */ jsx(Tooltip$1.TooltipTrigger, {
+			render: t32,
+			children: t33
+		});
+		$[60] = t32;
+		$[61] = t34;
+	} else t34 = $[61];
 	let t35;
-	if ($[60] !== t33) {
-		t35 = /* @__PURE__ */ jsxs(Tooltip$1.Tooltip, { children: [t33, t34] });
-		$[60] = t33;
-		$[61] = t35;
-	} else t35 = $[61];
+	if ($[62] === Symbol.for("react.memo_cache_sentinel")) {
+		t35 = /* @__PURE__ */ jsx(Tooltip$1.TooltipContent, { children: "Hide toolbar" });
+		$[62] = t35;
+	} else t35 = $[62];
 	let t36;
-	if ($[62] !== t30 || $[63] !== t35) {
-		t36 = /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-2",
-			children: [t30, t35]
-		});
-		$[62] = t30;
-		$[63] = t35;
+	if ($[63] !== t34) {
+		t36 = /* @__PURE__ */ jsxs(Tooltip$1.Tooltip, { children: [t34, t35] });
+		$[63] = t34;
 		$[64] = t36;
 	} else t36 = $[64];
 	let t37;
-	if ($[65] !== t36 || $[66] !== t5) {
-		t37 = /* @__PURE__ */ jsxs(FloatingToolbar, {
-			className: "bottom-2 justify-between gap-8 transition-none",
-			children: [t5, t36]
+	if ($[65] !== t31 || $[66] !== t36) {
+		t37 = /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [t31, t36]
 		});
-		$[65] = t36;
-		$[66] = t5;
+		$[65] = t31;
+		$[66] = t36;
 		$[67] = t37;
 	} else t37 = $[67];
-	return t37;
+	let t38;
+	if ($[68] !== t30 || $[69] !== t37) {
+		t38 = /* @__PURE__ */ jsxs("div", {
+			className: "flex shrink-0 items-center gap-8 self-stretch",
+			children: [t30, t37]
+		});
+		$[68] = t30;
+		$[69] = t37;
+		$[70] = t38;
+	} else t38 = $[70];
+	let t39;
+	if ($[71] !== t38 || $[72] !== t5) {
+		t39 = /* @__PURE__ */ jsxs(FloatingToolbar, {
+			className: "bottom-2 w-max justify-between gap-8 transition-none",
+			children: [t5, t38]
+		});
+		$[71] = t38;
+		$[72] = t5;
+		$[73] = t39;
+	} else t39 = $[73];
+	return t39;
 };
 function _temp(state) {
 	return state.context.isEditMode;
@@ -319,6 +342,9 @@ function _temp4(state_2) {
 	return state_2.context.viewportMode;
 }
 function _temp5() {
+	return previewStore.send({ type: "viewLivePage" });
+}
+function _temp6() {
 	return previewStore.send({ type: "hideToolbar" });
 }
 

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

@@ -1,11 +1,11 @@
 import { pageMutations } from "../../../lib/queries.js";
 import { trackClientEvent } from "../../../lib/telemetry-client.js";
-import { Label } from "@camox/ui/label";
 import { useMutation } from "@tanstack/react-query";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { toast } from "@camox/ui/toaster";
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@camox/ui/alert-dialog";
+import { toast } from "@camox/ui/toaster";
+import { Label } from "@camox/ui/label";
 import { Switch } from "@camox/ui/switch";
 
 //#region src/features/preview/components/PublishDialog.tsx

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

@@ -4,8 +4,8 @@ import { previewStore, selectionItemId } from "../previewStore.js";
 import { useRepeatableItemActions } from "./useRepeatableItemActions.js";
 import { c } from "react/compiler-runtime";
 import { useMutation } from "@tanstack/react-query";
-import { useSelector } from "@xstate/store-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useSelector } from "@xstate/store-react";
 import { Button } from "@camox/ui/button";
 import { CircleMinus, CirclePlus, GripVertical } from "lucide-react";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@camox/ui/tooltip";

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

@@ -3,8 +3,8 @@ import { AgentChatSidebar } from "../../agent-chat/components/AgentChatSidebar.j
 import { PageEditorSidebar } from "./PageEditorSidebar.js";
 import { PageInfoSidebar } from "./PageInfoSidebar.js";
 import { c } from "react/compiler-runtime";
-import { useSelector } from "@xstate/store-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useSelector } from "@xstate/store-react";
 
 //#region src/features/preview/components/RightSidebar.tsx
 const getRightSidebarRoute = ({ pageId, selectedBlockId, isAgentChatSidebarOpen }) => {

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

@@ -1,6 +1,6 @@
 import { repeatableItemMutations } from "../../../lib/queries.js";
-import { previewStore } from "../previewStore.js";
 import "../../provider/components/CamoxAppContext.js";
+import { previewStore } from "../previewStore.js";
 import { useRequireDraftSource } from "../../../core/hooks/useRequireDraftSource.js";
 import { c } from "react/compiler-runtime";
 import { useMutation, useQuery } from "@tanstack/react-query";

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

@@ -3,8 +3,8 @@ import { blockMutations } from "../../../lib/queries.js";
 import { previewStore } from "../previewStore.js";
 import { c } from "react/compiler-runtime";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { useSelector } from "@xstate/store-react";
 import { generateKeyBetween } from "fractional-indexing";
+import { useSelector } from "@xstate/store-react";
 import { queryKeys } from "@camox/api-contract/query-keys";
 
 //#region src/features/preview/components/useUpdateBlockPosition.ts

package/dist/features/preview/previewStore.js

@@ -26,7 +26,6 @@ const previewStore = createStore({
 	context: {
 		isEditMode: false,
 		isToolbarHidden: false,
-		isSidebarOpen: true,
 		isPageEditorSidebarOpen: false,
 		isAddBlockSidebarOpen: false,
 		addBlockSource: null,
@@ -64,17 +63,25 @@ const previewStore = createStore({
 			return {
 				...context,
 				isEditMode: true,
-				isSidebarOpen: true
+				isToolbarHidden: false
 			};
 		},
 		hideToolbar: (context) => ({
 			...context,
 			isToolbarHidden: true
 		}),
-		toggleSidebar: (context) => ({
-			...context,
-			isSidebarOpen: true
-		}),
+		viewLivePage: (context, _, enqueue) => {
+			enqueue.effect(() => {
+				if (context.isEditMode) trackClientEvent("edit_mode_toggled", { enabled: false });
+				toast("Viewing live version of the site");
+			});
+			return {
+				...context,
+				isEditMode: false,
+				isToolbarHidden: true,
+				previewSource: "live"
+			};
+		},
 		setViewportMode: (context, event) => {
 			if (context.viewportMode === event.mode) return context;
 			return {

package/dist/features/provider/AuthenticatedCamoxProvider.js

@@ -0,0 +1,63 @@
+import { AuthContext, useAuthActions } from "../../lib/auth.js";
+import { projectQueries } from "../../lib/queries.js";
+import { useApplyTheme, useThemeActions } from "../studio/useTheme.js";
+import { useNavbarActions } from "../studio/components/Navbar.js";
+import { identifyProject, identifyUser } from "../../lib/telemetry-client.js";
+import { usePreviewPagesActions } from "../preview/CamoxPreview.js";
+import { useProjectRoom } from "../../lib/use-project-room.js";
+import { CommandPalette, useCommandPaletteActions } from "./components/CommandPalette.js";
+import { useAdminShortcuts } from "./useAdminShortcuts.js";
+import { useQuery } from "@tanstack/react-query";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Toaster } from "@camox/ui/toaster";
+import studioCssUrl from "virtual:camox-studio-css";
+
+//#region src/features/provider/AuthenticatedCamoxProvider.tsx
+function AuthenticatedCamoxProvider({ children }) {
+	useAdminShortcuts();
+	useCommandPaletteActions();
+	useThemeActions();
+	useAuthActions();
+	useNavbarActions();
+	usePreviewPagesActions();
+	const { authClient, apiUrl, projectSlug, environmentName } = React.useContext(AuthContext);
+	const { data: session } = authClient.useSession();
+	const { data: project } = useQuery(projectQueries.getBySlug(projectSlug));
+	useProjectRoom(apiUrl, project?.id);
+	React.useEffect(() => {
+		const user = session?.user;
+		if (!user) return;
+		identifyUser({
+			userId: user.id,
+			email: user.email,
+			name: user.name
+		});
+	}, [session?.user]);
+	React.useEffect(() => {
+		if (!project) return;
+		identifyProject({
+			projectId: project.id,
+			projectSlug,
+			projectName: project.name,
+			environmentName
+		});
+	}, [
+		environmentName,
+		project,
+		projectSlug
+	]);
+	const { resolvedTheme } = useApplyTheme();
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("link", {
+			rel: "stylesheet",
+			href: studioCssUrl
+		}),
+		children,
+		/* @__PURE__ */ jsx(Toaster, { theme: resolvedTheme }),
+		/* @__PURE__ */ jsx(CommandPalette, {})
+	] });
+}
+
+//#endregion
+export { AuthenticatedCamoxProvider };

package/dist/features/provider/CamoxProvider.d.ts

@@ -4,20 +4,13 @@ import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/features/provider/CamoxProvider.d.ts
 interface CamoxProviderProps {
-  children: React.ReactNode;
-  camoxApp: CamoxApp;
-  authenticationUrl: string;
   apiUrl: string;
-  projectSlug: string;
+  authenticationUrl: string;
+  camoxApp: CamoxApp;
+  children: React.ReactNode;
   environmentName?: string;
+  projectSlug: string;
 }
-declare function CamoxProvider({
-  children,
-  camoxApp,
-  authenticationUrl,
-  apiUrl,
-  projectSlug,
-  environmentName
-}: CamoxProviderProps): _$react_jsx_runtime0.JSX.Element | null;
+declare function CamoxProvider(props: CamoxProviderProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { CamoxProvider };