camox 0.43.0 → 0.44.0

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

@@ -1,20 +1,40 @@
+import { observeOverlayHighlights } from "../overlayHighlights.js";
+import { useFrame } from "./Frame.js";
 import { c } from "react/compiler-runtime";
+import { useLayoutEffect } from "react";
 import { jsx } from "react/jsx-runtime";
 import overlayStyles from "virtual:camox-overlay-css";
 
 //#region src/features/preview/components/FieldOverlayStyles.tsx
 const FieldOverlayStyles = () => {
-	const $ = c(2);
-	if ($[0] !== "83d25ec6adf4086440810b5b8470ed59a6027bd66aa8eceb3fd93db084e20139") {
-		for (let $i = 0; $i < 2; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "83d25ec6adf4086440810b5b8470ed59a6027bd66aa8eceb3fd93db084e20139";
+	const $ = c(5);
+	if ($[0] !== "1aef50f61b41fbdb91f283373fd928447f799905d1774e36dd8b81214d12c471") {
+		for (let $i = 0; $i < 5; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "1aef50f61b41fbdb91f283373fd928447f799905d1774e36dd8b81214d12c471";
 	}
+	const { window } = useFrame();
 	let t0;
-	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = /* @__PURE__ */ jsx("style", { children: overlayStyles });
-		$[1] = t0;
-	} else t0 = $[1];
-	return t0;
+	let t1;
+	if ($[1] !== window) {
+		t0 = () => {
+			if (!window) return;
+			return observeOverlayHighlights(window.document);
+		};
+		t1 = [window];
+		$[1] = window;
+		$[2] = t0;
+		$[3] = t1;
+	} else {
+		t0 = $[2];
+		t1 = $[3];
+	}
+	useLayoutEffect(t0, t1);
+	let t2;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx("style", { children: overlayStyles });
+		$[4] = t2;
+	} else t2 = $[4];
+	return t2;
 };
 
 //#endregion

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

@@ -9,7 +9,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useSelector } from "@xstate/store-react";
 import { Kbd } from "@camox/ui/kbd";
 import { Button } from "@camox/ui/button";
-import { Bold, Highlighter, Italic, Underline } from "lucide-react";
+import { Bold, Highlighter, Italic, Strikethrough } from "lucide-react";
 import * as Tooltip$1 from "@camox/ui/tooltip";
 import { ButtonGroup } from "@camox/ui/button-group";
 import { FloatingToolbar } from "@camox/ui/floating-toolbar";
@@ -32,11 +32,11 @@ const FORMAT_BUTTONS = [
 		shortcut: "⌘ I"
 	},
 	{
-		key: "underline",
-		flag: FORMAT_FLAGS.underline,
-		icon: Underline,
-		label: "Underline",
-		shortcut: "⌘ U"
+		key: "strikethrough",
+		flag: FORMAT_FLAGS.strikethrough,
+		icon: Strikethrough,
+		label: "Strikethrough",
+		shortcut: null
 	},
 	{
 		key: "highlight",
@@ -48,9 +48,9 @@ const FORMAT_BUTTONS = [
 ];
 const FieldToolbar = () => {
 	const $ = c(28);
-	if ($[0] !== "cb7cd90f7cc268633db3dcbb4458cac864e661f9d57f1cb6764d8a2f3e167b39") {
+	if ($[0] !== "d1e889a3597708ac2bc6872804f1131756eb2e3aa358ca08ef83b3491906d96a") {
 		for (let $i = 0; $i < 28; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "cb7cd90f7cc268633db3dcbb4458cac864e661f9d57f1cb6764d8a2f3e167b39";
+		$[0] = "d1e889a3597708ac2bc6872804f1131756eb2e3aa358ca08ef83b3491906d96a";
 	}
 	const iframeElement = useSelector(previewStore, _temp);
 	const [hasSelection, setHasSelection] = React.useState(false);

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

@@ -0,0 +1,231 @@
+import { IconSvg } from "../../../core/lib/icons.js";
+import { c } from "react/compiler-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@camox/ui/button";
+import { ChevronsUpDown, SearchIcon } from "lucide-react";
+import { Popover, PopoverContent, PopoverTrigger } from "@camox/ui/popover";
+import { InputGroup, InputGroupAddon, InputGroupInput } from "@camox/ui/input-group";
+import { commandFilter } from "@camox/ui/command";
+import { Combobox } from "@base-ui/react/combobox";
+import { defaultRangeExtractor, useVirtualizer } from "@tanstack/react-virtual";
+
+//#region src/features/preview/components/IconFieldEditor.tsx
+const COLUMNS = 7;
+const ROW_HEIGHT = 44;
+function IconPicker({ value, ids, onSelect }) {
+	"use no memo";
+	const scrollRef = useRef(null);
+	const [ready, setReady] = useState(false);
+	useEffect(() => setReady(true), []);
+	const [search, setSearch] = useState("");
+	const [activeId, setActiveId] = useState(value);
+	const filteredIds = useMemo(() => {
+		const query = search.trim();
+		if (!query) return ids;
+		return ids.map((id) => ({
+			id,
+			score: commandFilter(id, query)
+		})).filter(({ score }) => score > 0).sort((a, b) => b.score - a.score).map(({ id: id_0 }) => id_0);
+	}, [ids, search]);
+	const activeIndex = Math.max(0, filteredIds.indexOf(activeId));
+	const activeRow = Math.floor(activeIndex / COLUMNS);
+	const virtualizer = useVirtualizer({
+		count: Math.ceil(filteredIds.length / COLUMNS),
+		getScrollElement: () => scrollRef.current,
+		estimateSize: () => ROW_HEIGHT,
+		overscan: 2,
+		initialOffset: () => activeRow * ROW_HEIGHT,
+		rangeExtractor: (range) => [...new Set([...defaultRangeExtractor(range), activeRow])].sort((a_0, b_0) => a_0 - b_0)
+	});
+	return /* @__PURE__ */ jsx(Combobox.Root, {
+		inline: true,
+		open: ready,
+		grid: true,
+		virtualized: true,
+		autoHighlight: true,
+		loopFocus: false,
+		items: ids,
+		filteredItems: filteredIds,
+		value,
+		inputValue: search,
+		onInputValueChange: (nextSearch) => {
+			setSearch(nextSearch);
+			setActiveId("");
+			virtualizer.scrollToOffset(0);
+		},
+		onItemHighlighted: (id_1, { index, reason }) => {
+			setActiveId(id_1 ?? "");
+			if (index < 0 || reason === "pointer") return;
+			virtualizer.scrollToIndex(Math.floor(index / COLUMNS), { align: "auto" });
+		},
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-1 p-1",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "p-1 pb-0",
+				children: /* @__PURE__ */ jsxs(InputGroup, {
+					className: "border-input/30 bg-input/30 h-8 rounded-lg shadow-none",
+					children: [/* @__PURE__ */ jsx(Combobox.Input, {
+						render: /* @__PURE__ */ jsx(InputGroupInput, {}),
+						"aria-label": "Search icons",
+						placeholder: "Search icons…"
+					}), /* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(SearchIcon, { className: "size-4" }) })]
+				})
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "p-1",
+				children: [/* @__PURE__ */ jsx(Combobox.List, {
+					ref: scrollRef,
+					"aria-rowcount": Math.ceil(filteredIds.length / COLUMNS),
+					"aria-colcount": COLUMNS,
+					"aria-label": "Choose icon",
+					className: "no-scrollbar max-h-72 overflow-x-hidden overflow-y-auto",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "relative",
+						style: { height: virtualizer.getTotalSize() },
+						children: virtualizer.getVirtualItems().map((row) => /* @__PURE__ */ jsx(Combobox.Row, {
+							"aria-rowindex": row.index + 1,
+							className: "absolute top-0 left-0 grid w-full grid-cols-7 gap-1",
+							style: {
+								height: ROW_HEIGHT - 4,
+								transform: `translateY(${row.start}px)`
+							},
+							children: filteredIds.slice(row.index * COLUMNS, (row.index + 1) * COLUMNS).map((id_2, column) => {
+								const index_0 = row.index * COLUMNS + column;
+								return /* @__PURE__ */ jsx(Combobox.Item, {
+									value: id_2,
+									index: index_0,
+									"aria-colindex": column + 1,
+									onClick: () => onSelect(id_2),
+									title: id_2,
+									"aria-label": id_2,
+									className: "text-muted-foreground data-highlighted:bg-accent data-highlighted:text-accent-foreground data-selected:bg-accent data-selected:text-accent-foreground flex cursor-default items-center justify-center rounded-sm p-2 outline-none",
+									children: /* @__PURE__ */ jsx(IconSvg, {
+										iconId: id_2,
+										className: "size-5"
+									})
+								}, id_2);
+							})
+						}, row.key))
+					})
+				}), !filteredIds.length && /* @__PURE__ */ jsx("div", {
+					role: "status",
+					className: "py-6 text-center text-sm",
+					children: "No matching icons."
+				})]
+			})]
+		})
+	});
+}
+function IconFieldEditor(t0) {
+	const $ = c(25);
+	if ($[0] !== "06a7f09856913d7ee595c1cdc9745a723a0630fd9b9973c23b1dc93d15da4da5") {
+		for (let $i = 0; $i < 25; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "06a7f09856913d7ee595c1cdc9745a723a0630fd9b9973c23b1dc93d15da4da5";
+	}
+	const { value, ids, onChange } = t0;
+	const [open, setOpen] = useState(false);
+	let t1;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(Button, {
+			variant: "outline",
+			role: "combobox",
+			"aria-label": "Choose icon",
+			className: "w-full justify-between"
+		});
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== value) {
+		t2 = /* @__PURE__ */ jsx(IconSvg, {
+			iconId: value,
+			className: "size-4 shrink-0"
+		});
+		$[2] = value;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== value) {
+		t3 = value.split(":")[1] ?? value;
+		$[4] = value;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== t3) {
+		t4 = /* @__PURE__ */ jsx("span", {
+			className: "truncate",
+			children: t3
+		});
+		$[6] = t3;
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== t2 || $[9] !== t4) {
+		t5 = /* @__PURE__ */ jsxs("span", {
+			className: "flex min-w-0 items-center gap-2",
+			children: [t2, t4]
+		});
+		$[8] = t2;
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx(ChevronsUpDown, { className: "size-4 shrink-0 opacity-50" });
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== t5) {
+		t7 = /* @__PURE__ */ jsxs(PopoverTrigger, {
+			render: t1,
+			children: [t5, t6]
+		});
+		$[12] = t5;
+		$[13] = t7;
+	} else t7 = $[13];
+	let t8;
+	if ($[14] !== ids || $[15] !== onChange || $[16] !== open || $[17] !== value) {
+		t8 = open && /* @__PURE__ */ jsx(IconPicker, {
+			value,
+			ids,
+			onSelect: (id) => {
+				onChange(id);
+				setOpen(false);
+			}
+		});
+		$[14] = ids;
+		$[15] = onChange;
+		$[16] = open;
+		$[17] = value;
+		$[18] = t8;
+	} else t8 = $[18];
+	let t9;
+	if ($[19] !== t8) {
+		t9 = /* @__PURE__ */ jsx(PopoverContent, {
+			align: "start",
+			side: "bottom",
+			className: "w-80 p-0",
+			children: t8
+		});
+		$[19] = t8;
+		$[20] = t9;
+	} else t9 = $[20];
+	let t10;
+	if ($[21] !== open || $[22] !== t7 || $[23] !== t9) {
+		t10 = /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col",
+			children: /* @__PURE__ */ jsxs(Popover, {
+				open,
+				onOpenChange: setOpen,
+				children: [t7, t9]
+			})
+		});
+		$[21] = open;
+		$[22] = t7;
+		$[23] = t9;
+		$[24] = t10;
+	} else t10 = $[24];
+	return t10;
+}
+
+//#endregion
+export { IconFieldEditor };

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

@@ -2,6 +2,7 @@ import { isFileMarker, isItemMarker, resolveFileMarker } from "../../../lib/norm
 import { lexicalStateToPlainText } from "../../../core/lib/lexicalState.js";
 import { previewStore } from "../previewStore.js";
 import { SidebarLexicalEditor } from "../../../core/components/lexical/SidebarLexicalEditor.js";
+import { IconFieldEditor } from "./IconFieldEditor.js";
 import { RepeatableItemsList } from "./RepeatableItemsList.js";
 import { c } from "react/compiler-runtime";
 import * as React from "react";
@@ -35,9 +36,9 @@ const getSchemaFieldsInOrder = (schema) => {
 };
 const DrillRow = (t0) => {
 	const $ = c(28);
-	if ($[0] !== "b2eb497558ebaf4700b0ba067f5c7a528445a839255d88cef77056524cd2971c") {
+	if ($[0] !== "75fc5969a4033b113dd269f700cf2eca07d78852485b78d36d0f7631827b7b66") {
 		for (let $i = 0; $i < 28; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "b2eb497558ebaf4700b0ba067f5c7a528445a839255d88cef77056524cd2971c";
+		$[0] = "75fc5969a4033b113dd269f700cf2eca07d78852485b78d36d0f7631827b7b66";
 	}
 	const { label, preview, Icon, onClick, hover, postToIframe } = t0;
 	let t1;
@@ -140,9 +141,9 @@ const DrillRow = (t0) => {
 };
 const ItemFieldsEditor = (t0) => {
 	const $ = c(46);
-	if ($[0] !== "b2eb497558ebaf4700b0ba067f5c7a528445a839255d88cef77056524cd2971c") {
+	if ($[0] !== "75fc5969a4033b113dd269f700cf2eca07d78852485b78d36d0f7631827b7b66") {
 		for (let $i = 0; $i < 46; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "b2eb497558ebaf4700b0ba067f5c7a528445a839255d88cef77056524cd2971c";
+		$[0] = "75fc5969a4033b113dd269f700cf2eca07d78852485b78d36d0f7631827b7b66";
 	}
 	const { selectedFieldName, schema, data, blockId, itemId, onFieldChange, postToIframe, filesMap, itemsMap, fieldIdPrefix } = t0;
 	let t1;
@@ -314,7 +315,8 @@ const ItemFieldsEditor = (t0) => {
 					"Embed",
 					"Repeater",
 					"Enum",
-					"Boolean"
+					"Boolean",
+					"Icon"
 				].includes(field_0.fieldType)) {
 					const value_0 = data[field_0.name];
 					return /* @__PURE__ */ jsx(DrillRow, {
@@ -333,6 +335,11 @@ const ItemFieldsEditor = (t0) => {
 						postToIframe
 					}, field_0.name);
 				}
+				if (field_0.fieldType === "Icon") return /* @__PURE__ */ jsx(IconFieldEditor, {
+					value: String(data[field_0.name] ?? schema?.properties?.[field_0.name]?.default ?? ""),
+					ids: field_0.enumValues ?? [],
+					onChange: (value_1) => onFieldChange(field_0.name, value_1)
+				}, field_0.name);
 				if (field_0.fieldType === "Boolean") return /* @__PURE__ */ jsxs("div", {
 					className: "flex items-center justify-between",
 					children: [/* @__PURE__ */ jsx(Label, {
@@ -341,7 +348,7 @@ const ItemFieldsEditor = (t0) => {
 					}), /* @__PURE__ */ jsx(Switch, {
 						id: getFieldElementId(field_0.name),
 						checked: Boolean(data[field_0.name]),
-						onCheckedChange: (value_1) => onFieldChange(field_0.name, value_1)
+						onCheckedChange: (value_2) => onFieldChange(field_0.name, value_2)
 					})]
 				}, field_0.name);
 				if (field_0.fieldType === "Enum") return /* @__PURE__ */ jsxs("div", {
@@ -351,14 +358,14 @@ const ItemFieldsEditor = (t0) => {
 						children: label
 					}), /* @__PURE__ */ jsxs(Select, {
 						value: typeof data[field_0.name] === "string" ? data[field_0.name] : "",
-						onValueChange: (value_2) => onFieldChange(field_0.name, value_2),
+						onValueChange: (value_3) => onFieldChange(field_0.name, value_3),
 						children: [/* @__PURE__ */ jsx(SelectTrigger, {
 							id: getFieldElementId(field_0.name),
 							children: /* @__PURE__ */ jsx(SelectValue, {})
-						}), /* @__PURE__ */ jsx(SelectContent, { children: field_0.enumValues?.map((value_3) => /* @__PURE__ */ jsx(SelectItem, {
-							value: value_3,
-							children: field_0.enumLabels?.[value_3] ?? value_3
-						}, value_3)) })]
+						}), /* @__PURE__ */ jsx(SelectContent, { children: field_0.enumValues?.map((value_4) => /* @__PURE__ */ jsx(SelectItem, {
+							value: value_4,
+							children: field_0.enumLabels?.[value_4] ?? value_4
+						}, value_4)) })]
 					})]
 				}, field_0.name);
 				if (field_0.fieldType === "String") return /* @__PURE__ */ jsx(form.Field, {
@@ -379,7 +386,7 @@ const ItemFieldsEditor = (t0) => {
 						}), /* @__PURE__ */ jsx(SidebarLexicalEditor, {
 							id: getFieldElementId(field_0.name),
 							value: fieldApi_0.state.value,
-							onChange: (value_4) => handleScalarChange(field_0.name, value_4, fieldApi_0),
+							onChange: (value_5) => handleScalarChange(field_0.name, value_5, fieldApi_0),
 							onFocus: () => handleFieldFocus(field_0.name, field_0.fieldType),
 							onBlur: () => handleFieldBlur(field_0.name)
 						})]
@@ -425,8 +432,8 @@ const ItemFieldsEditor = (t0) => {
 					}, field_0.name);
 				}
 				if (field_0.fieldType === "ImageList" || field_0.fieldType === "FileList") {
-					const value_5 = data[field_0.name];
-					const count = Array.isArray(value_5) ? value_5.length : 0;
+					const value_6 = data[field_0.name];
+					const count = Array.isArray(value_6) ? value_6.length : 0;
 					const isImage = field_0.fieldType === "ImageList";
 					const noun = isImage ? "image" : "file";
 					let preview_1;

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

@@ -1,6 +1,6 @@
 import { previewStore } from "../previewStore.js";
-import { isOverlayMessage } from "../overlayMessages.js";
 import { useFrame } from "./Frame.js";
+import { isOverlayMessage } from "../overlayMessages.js";
 import { c } from "react/compiler-runtime";
 import * as React from "react";
 import { useSelector } from "@xstate/store-react";

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

@@ -99,21 +99,21 @@ const PagePicker = () => {
 					]
 				}), /* @__PURE__ */ jsx(ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })]
 			}), /* @__PURE__ */ jsx(PopoverContent, {
-				className: "flex h-[300px] w-[400px] flex-col p-0",
+				className: "w-[400px] p-0",
 				align: "start",
 				side: "bottom",
 				children: /* @__PURE__ */ jsxs(Command, {
-					className: "flex flex-1 flex-col overflow-hidden",
+					className: "h-auto",
 					children: [
 						/* @__PURE__ */ jsx(CommandInput, {
 							placeholder: "Search page...",
 							className: "h-9"
 						}),
-						/* @__PURE__ */ jsxs(CommandList, {
-							className: "flex-1 overflow-y-auto",
-							children: [
-								/* @__PURE__ */ jsx(CommandEmpty, { children: "No page found." }),
-								/* @__PURE__ */ jsx(CommandGroup, { children: pages.map((page_1) => /* @__PURE__ */ jsxs(CommandItem, {
+						/* @__PURE__ */ jsxs(CommandList, { children: [
+							/* @__PURE__ */ jsx(CommandEmpty, { children: "No page found." }),
+							/* @__PURE__ */ jsx(CommandGroup, {
+								heading: "Curated pages",
+								children: pages.map((page_1) => /* @__PURE__ */ jsxs(CommandItem, {
 									value: page_1.fullPath,
 									className: "group/item justify-between",
 									hideCheck: true,
@@ -182,45 +182,45 @@ const PagePicker = () => {
 											children: /* @__PURE__ */ jsx(Trash2, { className: "size-4" })
 										})]
 									})]
-								}, page_1.id)) }),
-								["singleton", "derived"].map((kind) => /* @__PURE__ */ jsx(CommandGroup, {
-									heading: kind === "singleton" ? "Singleton pages" : "Derived pages",
-									children: derivedLayouts.filter((layout_1) => layout_1._internal.kind === kind).map((layout_2) => /* @__PURE__ */ jsx(CommandItem, {
-										value: `${DERIVED_LAYOUT_PREFIX}${layout_2._internal.id}`,
-										keywords: [layout_2._internal.title],
-										hideCheck: true,
-										onSelect: () => {
-											closePopover();
-											const segments = routeSegments(layout_2._internal.id);
-											if (!segments.some((segment) => segment.startsWith("$"))) {
-												navigate({ to: `/${segments.map(encodeURIComponent).join("/")}` });
-												return;
-											}
-											setLayoutToPreview(layout_2);
-										},
-										children: /* @__PURE__ */ jsxs("div", {
-											className: "flex min-w-0 flex-1 items-start gap-2",
-											children: [/* @__PURE__ */ jsx(Check, { className: cn("size-4 mt-0.5 shrink-0", currentDerived?.layout._internal.id !== layout_2._internal.id && "invisible") }), /* @__PURE__ */ jsxs("div", {
-												className: "flex min-w-0 flex-col",
-												children: [/* @__PURE__ */ jsxs("div", {
-													className: "flex min-w-0 items-center gap-1.5",
-													children: [/* @__PURE__ */ jsx("p", {
-														className: "truncate",
-														children: layout_2._internal.title
-													}), layoutStatusById.has(layout_2._internal.id) && /* @__PURE__ */ jsx(PageStatusBadge, {
-														size: "sm",
-														status: layoutStatusById.get(layout_2._internal.id)
-													})]
-												}), /* @__PURE__ */ jsxs("p", {
-													className: "text-muted-foreground truncate font-mono text-xs",
-													children: ["/", routeSegments(layout_2._internal.id).join("/")]
+								}, page_1.id))
+							}),
+							["singleton", "derived"].map((kind) => /* @__PURE__ */ jsx(CommandGroup, {
+								heading: kind === "singleton" ? "Singleton pages" : "Derived pages",
+								children: derivedLayouts.filter((layout_1) => layout_1._internal.kind === kind).map((layout_2) => /* @__PURE__ */ jsx(CommandItem, {
+									value: `${DERIVED_LAYOUT_PREFIX}${layout_2._internal.id}`,
+									keywords: [layout_2._internal.title],
+									hideCheck: true,
+									onSelect: () => {
+										closePopover();
+										const segments = routeSegments(layout_2._internal.id);
+										if (!segments.some((segment) => segment.startsWith("$"))) {
+											navigate({ to: `/${segments.map(encodeURIComponent).join("/")}` });
+											return;
+										}
+										setLayoutToPreview(layout_2);
+									},
+									children: /* @__PURE__ */ jsxs("div", {
+										className: "flex min-w-0 flex-1 items-start gap-2",
+										children: [/* @__PURE__ */ jsx(Check, { className: cn("size-4 mt-0.5 shrink-0", currentDerived?.layout._internal.id !== layout_2._internal.id && "invisible") }), /* @__PURE__ */ jsxs("div", {
+											className: "flex min-w-0 flex-col",
+											children: [/* @__PURE__ */ jsxs("div", {
+												className: "flex min-w-0 items-center gap-1.5",
+												children: [/* @__PURE__ */ jsx("p", {
+													className: "truncate",
+													children: layout_2._internal.title
+												}), layoutStatusById.has(layout_2._internal.id) && /* @__PURE__ */ jsx(PageStatusBadge, {
+													size: "sm",
+													status: layoutStatusById.get(layout_2._internal.id)
 												})]
+											}), /* @__PURE__ */ jsxs("p", {
+												className: "text-muted-foreground truncate font-mono text-xs",
+												children: ["/", routeSegments(layout_2._internal.id).join("/")]
 											})]
-										})
-									}, layout_2._internal.id))
-								}, kind))
-							]
-						}),
+										})]
+									})
+								}, layout_2._internal.id))
+							}, kind))
+						] }),
 						/* @__PURE__ */ jsx(CommandSeparator, {}),
 						/* @__PURE__ */ jsx(CommandGroup, {
 							className: "shrink-0 pt-2",

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

@@ -5,9 +5,9 @@ import { areCommentsEnabled } from "../commentsEnabled.js";
 import { previewStore, selectIsCommentMode, selectIsEditMode } from "../previewStore.js";
 import { useBlockActionsShortcuts } from "./BlockActionsPopover.js";
 import { PreviewPageContext } from "../previewSelection.js";
+import { Frame, useFrame } from "./Frame.js";
 import { FieldOverlayStyles } from "./FieldOverlayStyles.js";
 import { FieldToolbar } from "./FieldToolbar.js";
-import { Frame, useFrame } from "./Frame.js";
 import { MobilePreviewDrawer } from "./MobilePreviewDrawer.js";
 import { Overlays } from "./Overlays.js";
 import { OverlayTracker } from "./OverlayTracker.js";