camox 0.24.1 → 0.26.0

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

@@ -3,8 +3,10 @@ import { previewStore, selectionBlockId, selectionField, selectionItemId } from
 import { PreviewSideSheet, Sheet } from "./PreviewSideSheet.js";
 import { actionsStore } from "../../provider/actionsStore.js";
 import { blockMutations, blockQueries, fileQueries, repeatableItemMutations } from "../../../lib/queries.js";
+import { cn } from "../../../lib/utils.js";
 import { isFileMarker } from "../../../lib/normalized-data.js";
 import { useCamoxApp } from "../../provider/components/CamoxAppContext.js";
+import { useRequireDraftSource } from "../../../core/hooks/useRequireDraftSource.js";
 import { fieldTypesDictionary } from "../../../core/lib/fieldTypes.js";
 import { SingleAssetFieldEditor } from "./AssetFieldEditor.js";
 import { useRepeatableItemActions } from "./useRepeatableItemActions.js";
@@ -17,11 +19,11 @@ 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 { Switch } from "@camox/ui/switch";
 import { CircleMinus, CirclePlus, CornerLeftUp } from "lucide-react";
 import { Spinner } from "@camox/ui/spinner";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@camox/ui/dropdown-menu";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@camox/ui/select";
-import { Switch } from "@camox/ui/switch";
 import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@camox/ui/breadcrumb";
 
 //#region src/features/preview/components/PageContentSheet.tsx
@@ -97,9 +99,11 @@ const PageContentSheet = () => {
 	const updateSettings = useMutation(blockMutations.updateSettings());
 	const updateRepeatableContent = useMutation(repeatableItemMutations.updateContent());
 	const updateRepeatableSettings = useMutation(repeatableItemMutations.updateSettings());
+	const requireDraft = useRequireDraftSource();
 	const isOpen = useSelector(previewStore, (state) => state.context.isPageContentSheetOpen);
 	const selection = useSelector(previewStore, (state_0) => state_0.context.selection);
 	const iframeElement = useSelector(previewStore, (state_1) => state_1.context.iframeElement);
+	const isReadOnly = useSelector(previewStore, (state_2) => state_2.context.previewSource) !== "draft";
 	const postToIframe = React.useCallback((message) => {
 		if (!iframeElement?.contentWindow) return;
 		iframeElement.contentWindow.postMessage(message, "*");
@@ -269,20 +273,30 @@ const PageContentSheet = () => {
 	}, [blockId, isOpen]);
 	const handleBlockFieldChange = React.useCallback((fieldName, value_1) => {
 		if (!block) return;
+		if (!requireDraft()) return;
 		sessionDirtyRef.current = true;
 		updateContent.mutate({
 			id: block.id,
 			content: { [fieldName]: value_1 }
 		});
-	}, [block, updateContent]);
+	}, [
+		block,
+		updateContent,
+		requireDraft
+	]);
 	const handleItemFieldChange = React.useCallback((fieldName_0, value_2) => {
 		if (currentItemId == null) return;
+		if (!requireDraft()) return;
 		sessionDirtyRef.current = true;
 		updateRepeatableContent.mutate({
 			id: currentItemId,
 			content: { [fieldName_0]: value_2 }
 		});
-	}, [currentItemId, updateRepeatableContent]);
+	}, [
+		currentItemId,
+		updateRepeatableContent,
+		requireDraft
+	]);
 	const activeFieldChangeHandler = currentItemId != null ? handleItemFieldChange : handleBlockFieldChange;
 	const handleOpenChange = (open) => {
 		if (open) return;
@@ -378,196 +392,214 @@ const PageContentSheet = () => {
 					]
 				})
 			})]
-		}), /* @__PURE__ */ jsx("div", {
-			className: "flex-1 overflow-auto",
-			children: isItemLoading ? /* @__PURE__ */ jsx("div", {
-				className: "flex h-full items-center justify-center py-12",
-				children: /* @__PURE__ */ jsx(Spinner, {})
-			}) : /* @__PURE__ */ jsxs(Fragment, { children: [
-				currentItemId == null && !fieldHasOwnView && settingsFields.length > 0 && /* @__PURE__ */ jsxs("div", {
-					className: "border-border space-y-4 border-b px-4 py-4",
-					children: [/* @__PURE__ */ jsx(Label, {
-						className: "text-muted-foreground",
-						children: "Settings"
-					}), settingsFields.map((field) => {
-						const label = field.label ?? formatFieldName(field.name);
-						const settingsValues = block.settings ?? {};
-						if (field.fieldType === "Enum") {
-							const value_3 = settingsValues[field.name] ?? (blockDef._internal.settingsSchema?.properties?.[field.name])?.default ?? "";
-							return /* @__PURE__ */ jsxs("div", {
-								className: "space-y-2",
-								children: [/* @__PURE__ */ jsx(Label, {
-									htmlFor: `setting-${field.name}`,
-									children: label
-								}), /* @__PURE__ */ jsxs(Select, {
-									value: value_3,
-									onValueChange: (newValue) => {
-										sessionDirtyRef.current = true;
-										updateSettings.mutate({
-											id: block.id,
-											settings: { [field.name]: newValue }
-										});
-									},
-									children: [/* @__PURE__ */ jsx(SelectTrigger, {
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "relative flex-1 overflow-auto",
+			children: [isReadOnly && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": "Switch to draft to edit",
+				className: "absolute inset-0 z-10 h-full w-full cursor-not-allowed",
+				onClick: () => previewStore.send({ type: "requestDraftSwitch" })
+			}), /* @__PURE__ */ jsx("div", {
+				className: cn(isReadOnly && "pointer-events-none opacity-50"),
+				children: isItemLoading ? /* @__PURE__ */ jsx("div", {
+					className: "flex h-full items-center justify-center py-12",
+					children: /* @__PURE__ */ jsx(Spinner, {})
+				}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+					currentItemId == null && !fieldHasOwnView && settingsFields.length > 0 && /* @__PURE__ */ jsxs("div", {
+						className: "border-border space-y-4 border-b px-4 py-4",
+						children: [/* @__PURE__ */ jsx(Label, {
+							className: "text-muted-foreground",
+							children: "Settings"
+						}), settingsFields.map((field) => {
+							const label = field.label ?? formatFieldName(field.name);
+							const settingsValues = block.settings ?? {};
+							if (field.fieldType === "Enum") {
+								const value_3 = settingsValues[field.name] ?? (blockDef._internal.settingsSchema?.properties?.[field.name])?.default ?? "";
+								return /* @__PURE__ */ jsxs("div", {
+									className: "space-y-2",
+									children: [/* @__PURE__ */ jsx(Label, {
+										htmlFor: `setting-${field.name}`,
+										children: label
+									}), /* @__PURE__ */ jsxs(Select, {
+										value: value_3,
+										onValueChange: (newValue) => {
+											if (!requireDraft()) return;
+											sessionDirtyRef.current = true;
+											updateSettings.mutate({
+												id: block.id,
+												settings: { [field.name]: newValue }
+											});
+										},
+										children: [/* @__PURE__ */ jsx(SelectTrigger, {
+											id: `setting-${field.name}`,
+											children: /* @__PURE__ */ jsx(SelectValue, {})
+										}), /* @__PURE__ */ jsx(SelectContent, { children: field.enumValues?.map((enumValue) => /* @__PURE__ */ jsx(SelectItem, {
+											value: enumValue,
+											children: field.enumLabels?.[enumValue] ?? enumValue
+										}, enumValue)) })]
+									})]
+								}, field.name);
+							}
+							if (field.fieldType === "Boolean") {
+								const checked = settingsValues[field.name] ?? (blockDef._internal.settingsSchema?.properties?.[field.name])?.default ?? false;
+								return /* @__PURE__ */ jsxs("div", {
+									className: "flex items-center justify-between",
+									children: [/* @__PURE__ */ jsx(Label, {
+										htmlFor: `setting-${field.name}`,
+										children: label
+									}), /* @__PURE__ */ jsx(Switch, {
 										id: `setting-${field.name}`,
-										children: /* @__PURE__ */ jsx(SelectValue, {})
-									}), /* @__PURE__ */ jsx(SelectContent, { children: field.enumValues?.map((enumValue) => /* @__PURE__ */ jsx(SelectItem, {
-										value: enumValue,
-										children: field.enumLabels?.[enumValue] ?? enumValue
-									}, enumValue)) })]
-								})]
-							}, field.name);
-						}
-						if (field.fieldType === "Boolean") {
-							const checked = settingsValues[field.name] ?? (blockDef._internal.settingsSchema?.properties?.[field.name])?.default ?? false;
-							return /* @__PURE__ */ jsxs("div", {
-								className: "flex items-center justify-between",
-								children: [/* @__PURE__ */ jsx(Label, {
-									htmlFor: `setting-${field.name}`,
-									children: label
-								}), /* @__PURE__ */ jsx(Switch, {
-									id: `setting-${field.name}`,
-									checked,
-									onCheckedChange: (newValue_0) => {
-										sessionDirtyRef.current = true;
-										updateSettings.mutate({
-											id: block.id,
-											settings: { [field.name]: newValue_0 }
-										});
-									}
-								})]
-							}, field.name);
-						}
-						return null;
-					})]
-				}),
-				currentItemId != null && !fieldHasOwnView && itemSettingsFields.length > 0 && /* @__PURE__ */ jsxs("div", {
-					className: "border-border space-y-4 border-b px-4 py-4",
-					children: [/* @__PURE__ */ jsx(Label, {
-						className: "text-muted-foreground",
-						children: "Settings"
-					}), itemSettingsFields.map((field_0) => {
-						const label_0 = field_0.label ?? formatFieldName(field_0.name);
-						const itemSettingsValues = currentItem?.settings ?? {};
-						const itemSettingsSchemaProps = itemArraySchema?.itemSettingsSchema?.properties;
-						if (field_0.fieldType === "Enum") {
-							const value_4 = itemSettingsValues[field_0.name] ?? itemSettingsSchemaProps?.[field_0.name]?.default ?? "";
-							return /* @__PURE__ */ jsxs("div", {
-								className: "space-y-2",
-								children: [/* @__PURE__ */ jsx(Label, {
-									htmlFor: `item-setting-${field_0.name}`,
-									children: label_0
-								}), /* @__PURE__ */ jsxs(Select, {
-									value: value_4,
-									onValueChange: (newValue_1) => {
-										sessionDirtyRef.current = true;
-										updateRepeatableSettings.mutate({
-											id: currentItemId,
-											settings: { [field_0.name]: newValue_1 }
-										});
-									},
-									children: [/* @__PURE__ */ jsx(SelectTrigger, {
+										checked,
+										onCheckedChange: (newValue_0) => {
+											if (!requireDraft()) return;
+											sessionDirtyRef.current = true;
+											updateSettings.mutate({
+												id: block.id,
+												settings: { [field.name]: newValue_0 }
+											});
+										}
+									})]
+								}, field.name);
+							}
+							return null;
+						})]
+					}),
+					currentItemId != null && !fieldHasOwnView && itemSettingsFields.length > 0 && /* @__PURE__ */ jsxs("div", {
+						className: "border-border space-y-4 border-b px-4 py-4",
+						children: [/* @__PURE__ */ jsx(Label, {
+							className: "text-muted-foreground",
+							children: "Settings"
+						}), itemSettingsFields.map((field_0) => {
+							const label_0 = field_0.label ?? formatFieldName(field_0.name);
+							const itemSettingsValues = currentItem?.settings ?? {};
+							const itemSettingsSchemaProps = itemArraySchema?.itemSettingsSchema?.properties;
+							if (field_0.fieldType === "Enum") {
+								const value_4 = itemSettingsValues[field_0.name] ?? itemSettingsSchemaProps?.[field_0.name]?.default ?? "";
+								return /* @__PURE__ */ jsxs("div", {
+									className: "space-y-2",
+									children: [/* @__PURE__ */ jsx(Label, {
+										htmlFor: `item-setting-${field_0.name}`,
+										children: label_0
+									}), /* @__PURE__ */ jsxs(Select, {
+										value: value_4,
+										onValueChange: (newValue_1) => {
+											if (!requireDraft()) return;
+											sessionDirtyRef.current = true;
+											updateRepeatableSettings.mutate({
+												id: currentItemId,
+												settings: { [field_0.name]: newValue_1 }
+											});
+										},
+										children: [/* @__PURE__ */ jsx(SelectTrigger, {
+											id: `item-setting-${field_0.name}`,
+											children: /* @__PURE__ */ jsx(SelectValue, {})
+										}), /* @__PURE__ */ jsx(SelectContent, { children: field_0.enumValues?.map((enumValue_0) => /* @__PURE__ */ jsx(SelectItem, {
+											value: enumValue_0,
+											children: field_0.enumLabels?.[enumValue_0] ?? enumValue_0
+										}, enumValue_0)) })]
+									})]
+								}, field_0.name);
+							}
+							if (field_0.fieldType === "Boolean") {
+								const checked_0 = itemSettingsValues[field_0.name] ?? itemSettingsSchemaProps?.[field_0.name]?.default ?? false;
+								return /* @__PURE__ */ jsxs("div", {
+									className: "flex items-center justify-between",
+									children: [/* @__PURE__ */ jsx(Label, {
+										htmlFor: `item-setting-${field_0.name}`,
+										children: label_0
+									}), /* @__PURE__ */ jsx(Switch, {
 										id: `item-setting-${field_0.name}`,
-										children: /* @__PURE__ */ jsx(SelectValue, {})
-									}), /* @__PURE__ */ jsx(SelectContent, { children: field_0.enumValues?.map((enumValue_0) => /* @__PURE__ */ jsx(SelectItem, {
-										value: enumValue_0,
-										children: field_0.enumLabels?.[enumValue_0] ?? enumValue_0
-									}, enumValue_0)) })]
-								})]
-							}, field_0.name);
-						}
-						if (field_0.fieldType === "Boolean") {
-							const checked_0 = itemSettingsValues[field_0.name] ?? itemSettingsSchemaProps?.[field_0.name]?.default ?? false;
-							return /* @__PURE__ */ jsxs("div", {
-								className: "flex items-center justify-between",
-								children: [/* @__PURE__ */ jsx(Label, {
-									htmlFor: `item-setting-${field_0.name}`,
-									children: label_0
-								}), /* @__PURE__ */ jsx(Switch, {
-									id: `item-setting-${field_0.name}`,
-									checked: checked_0,
-									onCheckedChange: (newValue_2) => {
-										sessionDirtyRef.current = true;
-										updateRepeatableSettings.mutate({
-											id: currentItemId,
-											settings: { [field_0.name]: newValue_2 }
-										});
-									}
-								})]
-							}, field_0.name);
-						}
-						return null;
-					})]
-				}),
-				isViewingAsset && assetFieldName && isMultipleAsset && /* @__PURE__ */ jsx(MultipleAssetFieldEditor, {
-					fieldName: assetFieldName,
-					assetType,
-					currentData,
-					onFieldChange: activeFieldChangeHandler
-				}),
-				isViewingAsset && assetFieldName && !isMultipleAsset && /* @__PURE__ */ jsx(SingleAssetFieldEditor, {
-					fieldName: assetFieldName,
-					assetType,
-					currentData,
-					onFieldChange: activeFieldChangeHandler
-				}),
-				!isViewingAsset && isViewingLink && linkFieldName && /* @__PURE__ */ jsx("div", {
-					className: "px-4 py-4",
-					children: /* @__PURE__ */ jsx(LinkFieldEditor, {
-						fieldName: linkFieldName,
-						linkValue: currentData[linkFieldName] ?? {
-							type: "external",
-							text: "",
-							href: "",
-							newTab: false
-						},
-						onSave: (fieldName_1, value_5) => {
-							activeFieldChangeHandler(fieldName_1, value_5);
-						}
-					})
-				}),
-				!isViewingAsset && !isViewingLink && (currentItemId == null || currentItem) && /* @__PURE__ */ jsx(ItemFieldsEditor, {
-					schema: currentSchema,
-					data: currentData,
-					blockId: block.id,
-					itemId: currentItemId ?? void 0,
-					onFieldChange: activeFieldChangeHandler,
-					postToIframe,
-					filesMap,
-					itemsMap,
-					fieldIdPrefix,
-					autoFocusFieldName
-				}, currentItemId ?? `block-${block.id}`),
-				!isViewingAsset && !isViewingLink && currentItemId != null && currentItem && /* @__PURE__ */ jsxs("div", {
-					className: "border-border flex items-center gap-1 border-t px-4 py-4",
-					children: [
-						canAddSibling && /* @__PURE__ */ jsxs(Button, {
-							type: "button",
-							variant: "ghost",
-							size: "sm",
-							className: "text-muted-foreground justify-start",
-							onClick: () => addSibling({ afterPosition: currentItem.position }),
-							children: [/* @__PURE__ */ jsx(CirclePlus, { className: "h-4 w-4" }), "Add item"]
-						}),
-						canRemoveCurrent && /* @__PURE__ */ jsxs(Button, {
-							type: "button",
-							variant: "ghost",
-							size: "sm",
-							className: "text-muted-foreground justify-start",
-							onClick: () => removeCurrent(currentItemId, { onSuccess: () => previewStore.send({ type: "selectParent" }) }),
-							children: [/* @__PURE__ */ jsx(CircleMinus, { className: "h-4 w-4" }), "Remove item"]
-						}),
-						/* @__PURE__ */ jsxs(Button, {
-							type: "button",
-							variant: "ghost",
-							size: "sm",
-							className: "text-muted-foreground justify-start",
-							onClick: () => previewStore.send({ type: "selectParent" }),
-							children: [/* @__PURE__ */ jsx(CornerLeftUp, { className: "h-4 w-4" }), "Select parent"]
+										checked: checked_0,
+										onCheckedChange: (newValue_2) => {
+											if (!requireDraft()) return;
+											sessionDirtyRef.current = true;
+											updateRepeatableSettings.mutate({
+												id: currentItemId,
+												settings: { [field_0.name]: newValue_2 }
+											});
+										}
+									})]
+								}, field_0.name);
+							}
+							return null;
+						})]
+					}),
+					isViewingAsset && assetFieldName && isMultipleAsset && /* @__PURE__ */ jsx(MultipleAssetFieldEditor, {
+						fieldName: assetFieldName,
+						assetType,
+						currentData,
+						onFieldChange: activeFieldChangeHandler
+					}),
+					isViewingAsset && assetFieldName && !isMultipleAsset && /* @__PURE__ */ jsx(SingleAssetFieldEditor, {
+						fieldName: assetFieldName,
+						assetType,
+						currentData,
+						onFieldChange: activeFieldChangeHandler
+					}),
+					!isViewingAsset && isViewingLink && linkFieldName && /* @__PURE__ */ jsx("div", {
+						className: "px-4 py-4",
+						children: /* @__PURE__ */ jsx(LinkFieldEditor, {
+							fieldName: linkFieldName,
+							linkValue: currentData[linkFieldName] ?? {
+								type: "external",
+								text: "",
+								href: "",
+								newTab: false
+							},
+							onSave: (fieldName_1, value_5) => {
+								activeFieldChangeHandler(fieldName_1, value_5);
+							}
 						})
-					]
-				})
-			] })
+					}),
+					!isViewingAsset && !isViewingLink && (currentItemId == null || currentItem) && /* @__PURE__ */ jsx(ItemFieldsEditor, {
+						schema: currentSchema,
+						data: currentData,
+						blockId: block.id,
+						itemId: currentItemId ?? void 0,
+						onFieldChange: activeFieldChangeHandler,
+						postToIframe,
+						filesMap,
+						itemsMap,
+						fieldIdPrefix,
+						autoFocusFieldName
+					}, currentItemId ?? `block-${block.id}`),
+					!isViewingAsset && !isViewingLink && currentItemId != null && currentItem && /* @__PURE__ */ jsxs("div", {
+						className: "border-border flex items-center gap-1 border-t px-4 py-4",
+						children: [
+							canAddSibling && /* @__PURE__ */ jsxs(Button, {
+								type: "button",
+								variant: "ghost",
+								size: "sm",
+								className: "text-muted-foreground justify-start",
+								onClick: () => {
+									if (!requireDraft()) return;
+									addSibling({ afterPosition: currentItem.position });
+								},
+								children: [/* @__PURE__ */ jsx(CirclePlus, { className: "h-4 w-4" }), "Add item"]
+							}),
+							canRemoveCurrent && /* @__PURE__ */ jsxs(Button, {
+								type: "button",
+								variant: "ghost",
+								size: "sm",
+								className: "text-muted-foreground justify-start",
+								onClick: () => {
+									if (!requireDraft()) return;
+									removeCurrent(currentItemId, { onSuccess: () => previewStore.send({ type: "selectParent" }) });
+								},
+								children: [/* @__PURE__ */ jsx(CircleMinus, { className: "h-4 w-4" }), "Remove item"]
+							}),
+							/* @__PURE__ */ jsxs(Button, {
+								type: "button",
+								variant: "ghost",
+								size: "sm",
+								className: "text-muted-foreground justify-start",
+								onClick: () => previewStore.send({ type: "selectParent" }),
+								children: [/* @__PURE__ */ jsx(CornerLeftUp, { className: "h-4 w-4" }), "Select parent"]
+							})
+						]
+					})
+				] })
+			})]
 		})]
 	});
 };

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

@@ -2,6 +2,7 @@ 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 { Popover, PopoverContent, PopoverTrigger } from "@camox/ui/popover";
 import { toast } from "@camox/ui/toaster";
 import { useMutation, useQuery } from "@tanstack/react-query";
@@ -10,12 +11,86 @@ 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 { 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);
@@ -113,9 +188,12 @@ const PagePicker = () => {
 									children: [/* @__PURE__ */ jsx("p", {
 										className: "truncate",
 										children: page_1.metaTitle ?? formatPathSegment(page_1.pathSegment)
-									}), /* @__PURE__ */ jsx("p", {
-										className: "text-muted-foreground truncate font-mono text-xs",
-										children: page_1.fullPath
+									}), /* @__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__ */ jsxs("div", {