camox 0.45.0 → 0.46.0

package/dist/features/canvas/sidebar/CanvasNavigator.js

@@ -1,224 +1,122 @@
-import { cn } from "../../../lib/utils.js";
 import { previewStore } from "../../preview/previewStore.js";
 import { canvasPagePath } from "../canvasPages.js";
 import { c } from "react/compiler-runtime";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@camox/ui/button";
-import { ChevronsUpDown, Plus } from "lucide-react";
+import { Plus } from "lucide-react";
 import { Command as Command$1, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, commandFilter } from "@camox/ui/command";
 
 //#region src/features/canvas/sidebar/CanvasNavigator.tsx
-/** Blocks behind a bordered toggle, collapsed until opened. */
-function CollapsedBlocks(t0) {
-	const $ = c(14);
-	const { label, children } = t0;
-	const [expanded, setExpanded] = React.useState(false);
-	let t1;
-	let t2;
-	let t3;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = cn("hover:bg-accent/75 flex w-full cursor-default items-center gap-2 px-3 py-2 text-left text-sm", "focus-visible:rounded-none focus-visible:ring-inset");
-		t2 = () => setExpanded(_temp);
-		t3 = /* @__PURE__ */ jsx(ChevronsUpDown, { className: "text-muted-foreground size-4 shrink-0" });
-		$[0] = t1;
-		$[1] = t2;
-		$[2] = t3;
-	} else {
-		t1 = $[0];
-		t2 = $[1];
-		t3 = $[2];
-	}
-	let t4;
-	if ($[3] !== label) {
-		t4 = /* @__PURE__ */ jsx("span", {
-			className: "truncate",
-			children: label
-		});
-		$[3] = label;
-		$[4] = t4;
-	} else t4 = $[4];
-	let t5;
-	if ($[5] !== expanded || $[6] !== t4) {
-		t5 = /* @__PURE__ */ jsxs("button", {
-			type: "button",
-			"aria-expanded": expanded,
-			className: t1,
-			onClick: t2,
-			children: [t3, t4]
-		});
-		$[5] = expanded;
-		$[6] = t4;
-		$[7] = t5;
-	} else t5 = $[7];
-	let t6;
-	if ($[8] !== children || $[9] !== expanded) {
-		t6 = expanded && /* @__PURE__ */ jsx("div", {
-			className: "border-input border-t p-1",
-			children
-		});
-		$[8] = children;
-		$[9] = expanded;
-		$[10] = t6;
-	} else t6 = $[10];
-	let t7;
-	if ($[11] !== t5 || $[12] !== t6) {
-		t7 = /* @__PURE__ */ jsxs("div", {
-			className: "border-input flex flex-col overflow-hidden rounded-lg border shadow-xs",
-			children: [t5, t6]
-		});
-		$[11] = t5;
-		$[12] = t6;
-		$[13] = t7;
-	} else t7 = $[13];
-	return t7;
-}
-function _temp(value) {
-	return !value;
-}
-function canvasItemLabel(item) {
-	return item.kind === "page" ? item.page.title : item.block._internal.title;
-}
-/** Search an item by its label, and a Page by its path too, never by its key. */
-function canvasItemKeywords(item) {
-	const label = canvasItemLabel(item);
-	const path = item.kind === "page" ? canvasPagePath(item.page) : null;
-	return path ? [label, path] : [label];
-}
 /**
-* The Canvas Navigator, shown while nothing is selected: every item of the Canvas,
-* in Canvas order, grouped under its shelf with its count, and a search that takes
-* focus. Pages show with their path; blocks start collapsed, though a search still
-* finds them. Picking an item shows it: the camera goes to it.
+* The Canvas Navigator, shown while nothing is selected: every Page of the Canvas,
+* in Canvas order, with its path, and a search that takes focus. Picking a Page
+* shows it: the camera goes to it.
 */
 function CanvasNavigator(t0) {
-	const $ = c(20);
-	const { shelves, selectedKey, onShowItem } = t0;
+	const $ = c(17);
+	const { pages, selectedKey, onShowPage } = t0;
 	const [search, setSearch] = React.useState("");
 	let t1;
 	if ($[0] !== search) {
-		t1 = search.trim();
-		$[0] = search;
-		$[1] = t1;
-	} else t1 = $[1];
-	const searching = t1 !== "";
-	let t2;
-	if ($[2] !== onShowItem || $[3] !== selectedKey) {
-		t2 = (item) => {
-			const selected = item.key === selectedKey;
-			const path = item.kind === "page" ? canvasPagePath(item.page) : null;
-			return /* @__PURE__ */ jsx(CommandItem, {
-				value: item.key,
-				keywords: canvasItemKeywords(item),
-				"data-checked": selected,
-				"aria-current": selected ? "true" : void 0,
-				onSelect: () => onShowItem(item.key),
-				children: item.kind === "page" ? /* @__PURE__ */ jsxs("div", {
-					className: "flex min-w-0 flex-col py-0.5",
-					children: [/* @__PURE__ */ jsx("span", {
-						className: "truncate font-medium",
-						children: canvasItemLabel(item)
-					}), path && /* @__PURE__ */ jsx("span", {
-						className: "text-muted-foreground truncate font-mono text-xs",
-						children: path
-					})]
-				}) : /* @__PURE__ */ jsx("span", {
-					className: "truncate",
-					children: canvasItemLabel(item)
-				})
-			}, item.key);
-		};
-		$[2] = onShowItem;
-		$[3] = selectedKey;
-		$[4] = t2;
-	} else t2 = $[4];
-	const renderItem = t2;
-	let t3;
-	if ($[5] !== search) {
-		t3 = /* @__PURE__ */ jsx(CommandInput, {
-			placeholder: "Search the Canvas…",
+		t1 = /* @__PURE__ */ jsx(CommandInput, {
+			placeholder: "Search pages…",
 			autoFocus: true,
 			value: search,
 			onValueChange: setSearch
 		});
-		$[5] = search;
-		$[6] = t3;
-	} else t3 = $[6];
+		$[0] = search;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(CommandEmpty, { children: "Nothing found." });
+		$[2] = t2;
+	} else t2 = $[2];
+	const t3 = `Pages (${pages.length})`;
 	let t4;
-	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
-		t4 = /* @__PURE__ */ jsx(CommandEmpty, { children: "Nothing found." });
-		$[7] = t4;
-	} else t4 = $[7];
-	let t5;
-	if ($[8] !== renderItem || $[9] !== searching || $[10] !== shelves) {
-		let t6;
-		if ($[12] !== renderItem || $[13] !== searching) {
-			t6 = (shelf) => {
-				const heading = `${shelf.label} (${shelf.items.length})`;
-				if (shelf.key === "shelf:pages") return /* @__PURE__ */ jsxs(CommandGroup, {
-					heading,
-					children: [shelf.items.map(renderItem), /* @__PURE__ */ jsx("div", {
-						className: "p-1",
-						children: /* @__PURE__ */ jsxs(Button, {
-							type: "button",
-							variant: "secondary",
-							className: "w-full",
-							onClick: _temp3,
-							children: [/* @__PURE__ */ jsx(Plus, {}), "Create page"]
-						})
-					})]
-				}, shelf.key);
-				return /* @__PURE__ */ jsx(CommandGroup, {
-					heading: searching ? heading : void 0,
-					children: searching || shelf.items.length === 0 ? shelf.items.map(renderItem) : /* @__PURE__ */ jsx("div", {
-						className: "p-1",
-						children: /* @__PURE__ */ jsx(CollapsedBlocks, {
-							label: `${shelf.items.length} ${shelf.items.length === 1 ? "block" : "blocks"}`,
-							children: shelf.items.map(renderItem)
-						})
+	if ($[3] !== onShowPage || $[4] !== pages || $[5] !== selectedKey) {
+		let t5;
+		if ($[7] !== onShowPage || $[8] !== selectedKey) {
+			t5 = (page) => {
+				const selected = page.key === selectedKey;
+				const path = canvasPagePath(page);
+				return /* @__PURE__ */ jsx(CommandItem, {
+					value: page.key,
+					keywords: path ? [page.title, path] : [page.title],
+					"data-checked": selected,
+					"aria-current": selected ? "true" : void 0,
+					onSelect: () => onShowPage(page.key),
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "flex min-w-0 flex-col py-0.5",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "truncate font-medium",
+							children: page.title
+						}), path && /* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground truncate font-mono text-xs",
+							children: path
+						})]
 					})
-				}, shelf.key);
+				}, page.key);
 			};
-			$[12] = renderItem;
-			$[13] = searching;
-			$[14] = t6;
-		} else t6 = $[14];
-		t5 = shelves.map(t6);
-		$[8] = renderItem;
-		$[9] = searching;
-		$[10] = shelves;
-		$[11] = t5;
-	} else t5 = $[11];
+			$[7] = onShowPage;
+			$[8] = selectedKey;
+			$[9] = t5;
+		} else t5 = $[9];
+		t4 = pages.map(t5);
+		$[3] = onShowPage;
+		$[4] = pages;
+		$[5] = selectedKey;
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx("div", {
+			className: "p-1",
+			children: /* @__PURE__ */ jsxs(Button, {
+				type: "button",
+				variant: "secondary",
+				className: "w-full",
+				onClick: _temp2,
+				children: [/* @__PURE__ */ jsx(Plus, {}), "Create page"]
+			})
+		});
+		$[10] = t5;
+	} else t5 = $[10];
 	let t6;
-	if ($[15] !== t5) {
+	if ($[11] !== t3 || $[12] !== t4) {
 		t6 = /* @__PURE__ */ jsxs(CommandList, {
 			className: "max-h-none flex-1",
-			children: [t4, t5]
+			children: [t2, /* @__PURE__ */ jsxs(CommandGroup, {
+				heading: t3,
+				children: [t4, t5]
+			})]
 		});
-		$[15] = t5;
-		$[16] = t6;
-	} else t6 = $[16];
+		$[11] = t3;
+		$[12] = t4;
+		$[13] = t6;
+	} else t6 = $[13];
 	let t7;
-	if ($[17] !== t3 || $[18] !== t6) {
+	if ($[14] !== t1 || $[15] !== t6) {
 		t7 = /* @__PURE__ */ jsx("div", {
 			"data-canvas-navigator": true,
 			className: "flex min-h-0 flex-1 flex-col",
 			children: /* @__PURE__ */ jsxs(Command$1, {
 				className: "rounded-none! bg-transparent",
-				filter: _temp2,
-				children: [t3, t6]
+				filter: _temp,
+				children: [t1, t6]
 			})
 		});
-		$[17] = t3;
-		$[18] = t6;
-		$[19] = t7;
-	} else t7 = $[19];
+		$[14] = t1;
+		$[15] = t6;
+		$[16] = t7;
+	} else t7 = $[16];
 	return t7;
 }
-function _temp3() {
+function _temp2() {
 	return previewStore.send({ type: "openCreatePageModal" });
 }
-function _temp2(_value, search_0, keywords) {
+function _temp(_value, search_0, keywords) {
 	return commandFilter(keywords?.join(" ") ?? "", search_0);
 }
 

package/dist/features/canvas/sidebar/CanvasSidebar.js

@@ -1,7 +1,6 @@
 import { CanvasSidebarFrame } from "./CanvasSidebarFrame.js";
 import { CreatePageModal } from "../../preview/components/CreatePageModal.js";
 import { CanvasNavigator } from "./CanvasNavigator.js";
-import { CatalogBlockInspector } from "./CatalogBlockInspector.js";
 import { PageInspector } from "./PageInspector.js";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -9,50 +8,45 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/features/canvas/sidebar/CanvasSidebar.tsx
 /**
 * The sidebar beside the Canvas. Without a selection, it shows the Canvas Navigator;
-* with one, the Canvas Inspector of the selected Page or block of the Block Catalog.
+* with one, the Canvas Inspector of the selected Page.
 */
 function CanvasSidebar(t0) {
-	const $ = c(12);
-	const { page, catalog, navigator, onShowWholeCanvas, onRenamePage, owner: t1, pageRecord } = t0;
+	const $ = c(11);
+	const { page, navigator, onShowWholeCanvas, onRenamePage, owner: t1, pageRecord } = t0;
 	const owner = t1 === void 0 ? null : t1;
-	const t2 = catalog?.block._internal.title ?? page?.title ?? "Canvas navigator";
+	const t2 = page?.title ?? "Canvas navigator";
 	let t3;
-	if ($[0] !== catalog || $[1] !== navigator || $[2] !== onRenamePage || $[3] !== onShowWholeCanvas || $[4] !== owner || $[5] !== page || $[6] !== pageRecord) {
-		t3 = catalog ? /* @__PURE__ */ jsx(CatalogBlockInspector, {
-			block: catalog.block,
-			projectId: catalog.projectId,
-			onBack: onShowWholeCanvas
-		}) : page ? /* @__PURE__ */ jsx(PageInspector, {
+	if ($[0] !== navigator || $[1] !== onRenamePage || $[2] !== onShowWholeCanvas || $[3] !== owner || $[4] !== page || $[5] !== pageRecord) {
+		t3 = page ? /* @__PURE__ */ jsx(PageInspector, {
 			page,
 			owner,
 			pageRecord,
 			onBack: onShowWholeCanvas,
 			onRenamePage
 		}) : /* @__PURE__ */ jsx(CanvasNavigator, { ...navigator });
-		$[0] = catalog;
-		$[1] = navigator;
-		$[2] = onRenamePage;
-		$[3] = onShowWholeCanvas;
-		$[4] = owner;
-		$[5] = page;
-		$[6] = pageRecord;
-		$[7] = t3;
-	} else t3 = $[7];
+		$[0] = navigator;
+		$[1] = onRenamePage;
+		$[2] = onShowWholeCanvas;
+		$[3] = owner;
+		$[4] = page;
+		$[5] = pageRecord;
+		$[6] = t3;
+	} else t3 = $[6];
 	let t4;
-	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
 		t4 = /* @__PURE__ */ jsx(CreatePageModal, {});
-		$[8] = t4;
-	} else t4 = $[8];
+		$[7] = t4;
+	} else t4 = $[7];
 	let t5;
-	if ($[9] !== t2 || $[10] !== t3) {
+	if ($[8] !== t2 || $[9] !== t3) {
 		t5 = /* @__PURE__ */ jsxs(CanvasSidebarFrame, {
 			label: t2,
 			children: [t3, t4]
 		});
-		$[9] = t2;
-		$[10] = t3;
-		$[11] = t5;
-	} else t5 = $[11];
+		$[8] = t2;
+		$[9] = t3;
+		$[10] = t5;
+	} else t5 = $[10];
 	return t5;
 }
 

package/dist/features/canvas/sidebar/CuratedPageInspector.js

@@ -1,7 +1,7 @@
 import { useProjectUuid } from "../../../lib/auth.js";
 import { reads, useRead } from "../../../lib/studio-reads.js";
 import { useLocalePath } from "../../../lib/view-locale.js";
-import { AddBlockDialog } from "../../preview/components/AddBlockDialog.js";
+import { AddBlockSheet } from "../../preview/components/AddBlockSheet.js";
 import { PreviewEditingOwnerContext } from "../../preview/previewSelection.js";
 import { PageInfo } from "../../preview/components/PageInfo.js";
 import { PageTree } from "../../preview/components/PageTree.js";
@@ -51,7 +51,7 @@ function CuratedPageInspector() {
 	const t3 = owner?.kind === "page" && owner.pageId === pageId;
 	let t4;
 	if ($[6] !== t3) {
-		t4 = /* @__PURE__ */ jsx(AddBlockDialog, { focusCreatedBlock: t3 });
+		t4 = /* @__PURE__ */ jsx(AddBlockSheet, { focusCreatedBlock: t3 });
 		$[6] = t3;
 		$[7] = t4;
 	} else t4 = $[7];

package/dist/features/canvas/useCanvasCamera.js

@@ -71,13 +71,6 @@ function useCanvasCamera(workspaceKey, initialTarget, row) {
 		};
 	}, []);
 	/**
-	* Pan immediately so a world x sits at or right of a screen x; never pans
-	* otherwise, nor while a selection holds the camera.
-	*/
-	const keepInView = React.useCallback((worldX, screenX) => {
-		flightControls.current?.keepInView(worldX, screenX);
-	}, []);
-	/**
 	* Pan vertically to an element inside a Canvas frame, such as a selected block,
 	* unless enough of it already shows. A page flight or a drag in progress keeps the camera.
 	*/
@@ -433,18 +426,6 @@ function useCanvasCamera(workspaceKey, initialTarget, row) {
 		};
 		flightControls.current = {
 			flyTo: startFlight,
-			keepInView: (worldX, screenX) => {
-				const x = screenX - worldX * camera.scale;
-				if (selection || camera.x >= x) return;
-				cancelCameraFlight();
-				restoredCamera = void 0;
-				fittingInitialPage = false;
-				gesture = void 0;
-				applyCamera({
-					...camera,
-					x
-				}, true);
-			},
 			reveal: (element, immediate) => {
 				const frame = element.ownerDocument.defaultView?.frameElement;
 				if (!frame || flight && !flight.pan || pointers.size) return;
@@ -793,7 +774,6 @@ function useCanvasCamera(workspaceKey, initialTarget, row) {
 		contentRef,
 		flyTo,
 		mirrorCamera,
-		keepInView,
 		reveal,
 		fitAll
 	};

package/dist/features/canvas/useCanvasFrame.js

@@ -20,7 +20,7 @@ function toError(error) {
 * Unless live, the frame's document is paused. A resting frame keeps its size:
 * its content is hidden, and must not shrink the frame and move the Canvas.
 */
-function useCanvasFrame({ previewDocument, href, width, viewportHeight, fit, subject, mode }) {
+function useCanvasFrame({ previewDocument, href, width, viewportHeight, mode }) {
 	const iframeRef = React.useRef(null);
 	const [srcDoc, setSrcDoc] = React.useState();
 	const [mount, setMount] = React.useState(null);
@@ -44,7 +44,7 @@ function useCanvasFrame({ previewDocument, href, width, viewportHeight, fit, sub
 	React.useLayoutEffect(() => {
 		const iframe = iframeRef.current;
 		if (!iframe || !mount) return;
-		const stop = observeCanvasDocument(iframe, mount, viewportHeight, fit, () => restingRef.current);
+		const stop = observeCanvasDocument(iframe, mount, viewportHeight, () => restingRef.current);
 		sizing.current = stop;
 		return () => {
 			stop();
@@ -53,8 +53,7 @@ function useCanvasFrame({ previewDocument, href, width, viewportHeight, fit, sub
 	}, [
 		mount,
 		viewportHeight,
-		width,
-		fit
+		width
 	]);
 	React.useEffect(() => {
 		if (!mount || live) return;
@@ -73,7 +72,7 @@ function useCanvasFrame({ previewDocument, href, width, viewportHeight, fit, sub
 				try {
 					const loaded = iframeRef.current;
 					const root = (loaded?.contentDocument)?.querySelector("[data-camox-preview-root]");
-					if (!root) throw new Error(`The ${subject} preview document has no content root.`);
+					if (!root) throw new Error("The page preview document has no content root.");
 					if (root === mount) return;
 					root.replaceChildren();
 					setMount(root);
@@ -82,7 +81,7 @@ function useCanvasFrame({ previewDocument, href, width, viewportHeight, fit, sub
 					setFailure(toError(error));
 				}
 			},
-			onError: () => setFailure(/* @__PURE__ */ new Error(`The ${subject} preview document could not load.`))
+			onError: () => setFailure(/* @__PURE__ */ new Error("The page preview document could not load."))
 		}
 	};
 }

package/dist/features/preview/CamoxPreview.js

@@ -20,7 +20,7 @@ import { DerivedPageContent } from "../page/DerivedPageContent.js";
 import { STUDIO_CANVAS_PATH } from "../studio/routes.js";
 import { studioStore } from "../studio/studioStore.js";
 import { previewStore, selectIsCanvasShown } from "./previewStore.js";
-import { AddBlockDialog } from "./components/AddBlockDialog.js";
+import { AddBlockSheet } from "./components/AddBlockSheet.js";
 import { CanvasPreview, prefetchCanvas } from "./components/CanvasPreview.js";
 import { CreatePageModal } from "./components/CreatePageModal.js";
 import { PreviewEditingOwnerContext } from "./previewSelection.js";
@@ -667,7 +667,7 @@ const PreviewShell = (t0) => {
 		t3 = () => {
 			if (!isMobileStudio) return;
 			previewStore.send({ type: "hideCanvas" });
-			previewStore.send({ type: "closeAddBlockDialog" });
+			previewStore.send({ type: "closeAddBlockSheet" });
 		};
 		t4 = [isMobileStudio];
 		$[4] = isMobileStudio;
@@ -823,7 +823,7 @@ const PreviewShell = (t0) => {
 	} else t18 = $[33];
 	let t19;
 	if ($[34] !== isCanvasEnabled || $[35] !== pageId) {
-		t19 = !isCanvasEnabled && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(CreatePageModal, {}), pageId != null && /* @__PURE__ */ jsx(AddBlockDialog, {})] });
+		t19 = !isCanvasEnabled && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(CreatePageModal, {}), pageId != null && /* @__PURE__ */ jsx(AddBlockSheet, {})] });
 		$[34] = isCanvasEnabled;
 		$[35] = pageId;
 		$[36] = t19;

package/dist/features/preview/components/{AddBlockDialog.js → AddBlockSheet.js}

@@ -14,12 +14,12 @@ import { generateKeyBetween } from "fractional-indexing";
 import { useSelector } from "@xstate/store-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMutation } from "@tanstack/react-query";
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@camox/ui/dialog";
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "@camox/ui/sheet";
 import { Badge } from "@camox/ui/badge";
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, commandFilter } from "@camox/ui/command";
 
-//#region src/features/preview/components/AddBlockDialog.tsx
-const AddBlockDialog = ({ focusCreatedBlock = true }) => {
+//#region src/features/preview/components/AddBlockSheet.tsx
+const AddBlockSheet = ({ focusCreatedBlock = true }) => {
 	const [highlightedValue, setHighlightedValue] = React.useState("");
 	const [search, setSearch] = React.useState("");
 	const [error, setError] = React.useState(null);
@@ -32,7 +32,7 @@ const AddBlockDialog = ({ focusCreatedBlock = true }) => {
 		};
 	}, []);
 	const gridRef = React.useRef(null);
-	const dialog = useSelector(previewStore, (state) => state.context.addBlockDialog);
+	const sheet = useSelector(previewStore, (state) => state.context.addBlockSheet);
 	const studioCache = useStudioCache();
 	const projectUuid = useProjectUuid();
 	const pathname = useLocalePath();
@@ -117,15 +117,15 @@ const AddBlockDialog = ({ focusCreatedBlock = true }) => {
 		for (const block of pageBlocks) counts[block.type] = (counts[block.type] ?? 0) + 1;
 		return counts;
 	}, [page, pageBlocks]);
-	const [previousDialog, setPreviousDialog] = React.useState(dialog);
-	if (dialog !== previousDialog) {
-		setPreviousDialog(dialog);
+	const [previousSheet, setPreviousSheet] = React.useState(sheet);
+	if (sheet !== previousSheet) {
+		setPreviousSheet(sheet);
 		setHighlightedValue("");
 		setSearch("");
 		setError(null);
 	}
 	const handleAddBlock = async (block) => {
-		if (!page || !dialog || submitting.current) return;
+		if (!page || !sheet || submitting.current) return;
 		submitting.current = true;
 		setError(null);
 		const owner = {
@@ -140,21 +140,21 @@ const AddBlockDialog = ({ focusCreatedBlock = true }) => {
 				type: block._internal.id,
 				content: bundle.content,
 				settings: bundle.settings,
-				afterPosition: dialog.afterPosition,
+				afterPosition: sheet.afterPosition,
 				repeatableItems: bundle.repeatableItems
 			});
 			const context = previewStore.getSnapshot().context;
 			if (!mounted.current) return;
 			if (focusCreatedBlock && !sameEditingOwner(context.editingContext, owner)) return;
-			if (context.addBlockDialog !== dialog) return;
-			previewStore.send({ type: "closeAddBlockDialog" });
+			if (context.addBlockSheet !== sheet) return;
+			previewStore.send({ type: "closeAddBlockSheet" });
 			if (focusCreatedBlock) previewStore.send({
 				type: "focusCreatedBlock",
 				...owner,
 				blockId
 			});
 		} catch {
-			if (previewStore.getSnapshot().context.addBlockDialog === dialog) setError("Could not add this block. Please try again.");
+			if (previewStore.getSnapshot().context.addBlockSheet === sheet) setError("Could not add this block. Please try again.");
 		} finally {
 			submitting.current = false;
 		}
@@ -165,24 +165,25 @@ const AddBlockDialog = ({ focusCreatedBlock = true }) => {
 		const page = pageCounts[blockId] ?? "none";
 		return `${total} use${total > 1 ? "s" : ""} (${page} here)`;
 	};
-	return /* @__PURE__ */ jsx(Dialog, {
-		open: dialog != null,
+	return /* @__PURE__ */ jsx(Sheet, {
+		open: sheet != null,
 		onOpenChange: (open) => {
-			if (!open && !submitting.current) previewStore.send({ type: "closeAddBlockDialog" });
+			if (!open && !submitting.current) previewStore.send({ type: "closeAddBlockSheet" });
 		},
-		children: /* @__PURE__ */ jsxs(DialogContent, {
-			className: "flex h-[min(85dvh,900px)] flex-col gap-4 overflow-hidden sm:max-w-6xl",
+		children: /* @__PURE__ */ jsxs(SheetContent, {
+			side: "right",
+			className: "gap-0 overflow-hidden data-[side=right]:w-full data-[side=right]:sm:max-w-4xl",
 			children: [
-				/* @__PURE__ */ jsxs(DialogHeader, {
-					className: "pr-8",
-					children: [/* @__PURE__ */ jsx(DialogTitle, { children: "Add a block" }), /* @__PURE__ */ jsx(DialogDescription, { children: "Search blocks, use the arrow keys to browse, and press Enter to add." })]
+				/* @__PURE__ */ jsxs(SheetHeader, {
+					className: "pr-12",
+					children: [/* @__PURE__ */ jsx(SheetTitle, { children: "Add a block" }), /* @__PURE__ */ jsx(SheetDescription, { children: "Search blocks, use the arrow keys to browse, and press Enter to add." })]
 				}),
 				/* @__PURE__ */ jsxs(Command, {
 					label: "Search blocks",
 					shouldFilter: false,
 					value: selectedValue,
 					onValueChange: setHighlightedValue,
-					className: "h-0 min-h-0 flex-1 rounded-none! bg-transparent! p-0!",
+					className: "h-0 min-h-0 flex-1 rounded-none! bg-transparent! px-4! pt-0! pb-0!",
 					onKeyDown: (e) => {
 						if (e.nativeEvent.isComposing || e.altKey || e.ctrlKey || e.metaKey) return;
 						if (![
@@ -214,11 +215,11 @@ const AddBlockDialog = ({ focusCreatedBlock = true }) => {
 						autoFocus: true
 					}), /* @__PURE__ */ jsxs(CommandList, {
 						label: "Available blocks",
-						className: "mt-4 max-h-none min-h-0 flex-1 pb-2",
+						className: "mt-4 max-h-none min-h-0 flex-1 pb-4",
 						"aria-busy": createBlock.isPending,
 						children: [/* @__PURE__ */ jsx(CommandEmpty, { children: "No blocks found." }), /* @__PURE__ */ jsx(CommandGroup, {
 							ref: gridRef,
-							className: "p-0 [&>[cmdk-group-items]]:grid [&>[cmdk-group-items]]:grid-cols-1 [&>[cmdk-group-items]]:gap-4 sm:[&>[cmdk-group-items]]:grid-cols-2 lg:[&>[cmdk-group-items]]:grid-cols-3",
+							className: "@container p-0 [&>[cmdk-group-items]]:grid [&>[cmdk-group-items]]:grid-cols-1 [&>[cmdk-group-items]]:gap-4 @xl:[&>[cmdk-group-items]]:grid-cols-2 @3xl:[&>[cmdk-group-items]]:grid-cols-3",
 							children: filteredBlocks.map((block) => /* @__PURE__ */ jsxs(CommandItem, {
 								value: block._internal.id,
 								keywords: [block._internal.title, block._internal.description ?? ""],
@@ -252,14 +253,16 @@ const AddBlockDialog = ({ focusCreatedBlock = true }) => {
 						})]
 					})]
 				}),
-				createBlock.isPending && /* @__PURE__ */ jsx("p", {
-					role: "status",
-					children: "Adding block…"
-				}),
-				error && /* @__PURE__ */ jsx("p", {
-					role: "alert",
-					className: "text-destructive",
-					children: error
+				(createBlock.isPending || error) && /* @__PURE__ */ jsxs("div", {
+					className: "border-border border-t p-4",
+					children: [createBlock.isPending && /* @__PURE__ */ jsx("p", {
+						role: "status",
+						children: "Adding block…"
+					}), error && /* @__PURE__ */ jsx("p", {
+						role: "alert",
+						className: "text-destructive",
+						children: error
+					})]
 				})
 			]
 		})
@@ -267,4 +270,4 @@ const AddBlockDialog = ({ focusCreatedBlock = true }) => {
 };
 
 //#endregion
-export { AddBlockDialog };
+export { AddBlockSheet };