camox 0.52.2 → 0.53.1

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

@@ -1,53 +1,33 @@
 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 { Plus } from "lucide-react";
-import { Command as Command$1, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, commandFilter } from "@camox/ui/command";
+import { CheckIcon, Plus } from "lucide-react";
 
 //#region src/features/canvas/sidebar/CanvasNavigator.tsx
 /**
 * 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.
+* in Canvas order, with its path. Picking a Page shows it: the camera goes to it. One card
+* groups them, a line across it between each Page.
 */
 function CanvasNavigator(t0) {
-	const $ = c(17);
+	const $ = c(7);
 	const { pages, selectedKey, onShowPage } = t0;
-	const [search, setSearch] = React.useState("");
 	let t1;
-	if ($[0] !== search) {
-		t1 = /* @__PURE__ */ jsx(CommandInput, {
-			placeholder: "Search pages…",
-			autoFocus: true,
-			value: search,
-			onValueChange: setSearch
-		});
-		$[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 ($[3] !== onShowPage || $[4] !== pages || $[5] !== selectedKey) {
-		let t5;
-		if ($[7] !== onShowPage || $[8] !== selectedKey) {
-			t5 = (page) => {
+	if ($[0] !== onShowPage || $[1] !== pages || $[2] !== selectedKey) {
+		t1 = pages.length > 0 && /* @__PURE__ */ jsx("ul", {
+			className: "bg-background divide-border/50 border-border/70 m-1 flex shrink-0 flex-col divide-y overflow-hidden rounded-lg border",
+			children: pages.map((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", {
+				return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					"data-canvas-navigator-page": page.key,
+					"aria-current": selected ? "page" : void 0,
+					className: "hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground flex w-full cursor-pointer items-start gap-2 px-3 py-2 text-left text-sm outline-hidden transition-colors",
+					onClick: () => onShowPage(page.key),
+					children: [/* @__PURE__ */ jsxs("span", {
 						className: "flex min-w-0 flex-col py-0.5",
 						children: [/* @__PURE__ */ jsx("span", {
 							className: "truncate font-medium",
@@ -56,69 +36,45 @@ function CanvasNavigator(t0) {
 							className: "text-muted-foreground truncate font-mono text-xs",
 							children: path
 						})]
-					})
-				}, page.key);
-			};
-			$[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", {
+					}), selected && /* @__PURE__ */ jsx(CheckIcon, { className: "text-muted-foreground mt-[3px] ml-auto size-4 shrink-0" })]
+				}) }, page.key);
+			})
+		});
+		$[0] = onShowPage;
+		$[1] = pages;
+		$[2] = selectedKey;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx("div", {
 			className: "p-1",
 			children: /* @__PURE__ */ jsxs(Button, {
 				type: "button",
 				variant: "secondary",
 				className: "w-full",
-				onClick: _temp2,
+				onClick: _temp,
 				children: [/* @__PURE__ */ jsx(Plus, {}), "Create page"]
 			})
 		});
-		$[10] = t5;
-	} else t5 = $[10];
-	let t6;
-	if ($[11] !== t3 || $[12] !== t4) {
-		t6 = /* @__PURE__ */ jsxs(CommandList, {
-			className: "max-h-none flex-1",
-			children: [t2, /* @__PURE__ */ jsxs(CommandGroup, {
-				heading: t3,
-				children: [t4, t5]
-			})]
-		});
-		$[11] = t3;
-		$[12] = t4;
-		$[13] = t6;
-	} else t6 = $[13];
-	let t7;
-	if ($[14] !== t1 || $[15] !== t6) {
-		t7 = /* @__PURE__ */ jsx("div", {
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t1) {
+		t3 = /* @__PURE__ */ jsxs("nav", {
 			"data-canvas-navigator": true,
-			className: "flex min-h-0 flex-1 flex-col",
-			children: /* @__PURE__ */ jsxs(Command$1, {
-				className: "rounded-none! bg-transparent",
-				filter: _temp,
-				children: [t1, t6]
-			})
+			"aria-label": "Pages",
+			className: "flex min-h-0 flex-1 flex-col overflow-y-auto p-1",
+			children: [t1, t2]
 		});
-		$[14] = t1;
-		$[15] = t6;
-		$[16] = t7;
-	} else t7 = $[16];
-	return t7;
+		$[5] = t1;
+		$[6] = t3;
+	} else t3 = $[6];
+	return t3;
 }
-function _temp2() {
+function _temp() {
 	return previewStore.send({ type: "openCreatePageModal" });
 }
-function _temp(_value, search_0, keywords) {
-	return commandFilter(keywords?.join(" ") ?? "", search_0);
-}
 
 //#endregion
 export { CanvasNavigator };

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

@@ -1,4 +1,6 @@
+import { SidebarStack, SidebarStackView } from "../../preview/components/SidebarStack.js";
 import { CanvasSidebarFrame } from "./CanvasSidebarFrame.js";
+import { CanvasViewHeader } from "./CanvasViewHeader.js";
 import { CreatePageModal } from "../../preview/components/CreatePageModal.js";
 import { CanvasNavigator } from "./CanvasNavigator.js";
 import { PageInspector } from "./PageInspector.js";
@@ -7,47 +9,67 @@ 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.
+* The sidebar beside the Canvas, a stack of views: the Canvas's own, which shows the Canvas
+* Navigator, then the Canvas Inspector of the selected Page laid over it, if any.
 */
 function CanvasSidebar(t0) {
-	const $ = c(11);
-	const { page, navigator, onShowWholeCanvas, onRenamePage, owner: t1, pageRecord } = t0;
+	const $ = c(16);
+	const { page, navigator, onShowWholeCanvas, owner: t1, pageRecord, runtimeBasePath } = t0;
 	const owner = t1 === void 0 ? null : t1;
 	const t2 = page?.title ?? "Canvas navigator";
-	let t3;
-	if ($[0] !== navigator || $[1] !== onRenamePage || $[2] !== onShowWholeCanvas || $[3] !== owner || $[4] !== page || $[5] !== pageRecord) {
-		t3 = page ? /* @__PURE__ */ jsx(PageInspector, {
+	const t3 = page != null;
+	let t4;
+	if ($[0] !== onShowWholeCanvas || $[1] !== t3) {
+		t4 = /* @__PURE__ */ jsx(CanvasViewHeader, {
+			covered: t3,
+			onShowWholeCanvas
+		});
+		$[0] = onShowWholeCanvas;
+		$[1] = t3;
+		$[2] = t4;
+	} else t4 = $[2];
+	let t5;
+	if ($[3] !== navigator || $[4] !== owner || $[5] !== page || $[6] !== pageRecord || $[7] !== runtimeBasePath) {
+		t5 = page ? /* @__PURE__ */ jsx(PageInspector, {
 			page,
 			owner,
 			pageRecord,
-			onBack: onShowWholeCanvas,
-			onRenamePage
-		}) : /* @__PURE__ */ jsx(CanvasNavigator, { ...navigator });
-		$[0] = navigator;
-		$[1] = onRenamePage;
-		$[2] = onShowWholeCanvas;
-		$[3] = owner;
-		$[4] = page;
-		$[5] = pageRecord;
-		$[6] = t3;
-	} else t3 = $[6];
-	let t4;
-	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
-		t4 = /* @__PURE__ */ jsx(CreatePageModal, {});
-		$[7] = t4;
-	} else t4 = $[7];
-	let t5;
-	if ($[8] !== t2 || $[9] !== t3) {
-		t5 = /* @__PURE__ */ jsxs(CanvasSidebarFrame, {
-			label: t2,
-			children: [t3, t4]
+			runtimeBasePath
+		}) : /* @__PURE__ */ jsx(SidebarStackView, {
+			depth: 0,
+			className: "flex flex-col",
+			children: /* @__PURE__ */ jsx(CanvasNavigator, { ...navigator })
 		});
-		$[8] = t2;
-		$[9] = t3;
+		$[3] = navigator;
+		$[4] = owner;
+		$[5] = page;
+		$[6] = pageRecord;
+		$[7] = runtimeBasePath;
+		$[8] = t5;
+	} else t5 = $[8];
+	let t6;
+	if ($[9] !== t4 || $[10] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(SidebarStack, { children: [t4, t5] });
+		$[9] = t4;
 		$[10] = t5;
-	} else t5 = $[10];
-	return t5;
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(CreatePageModal, {});
+		$[12] = t7;
+	} else t7 = $[12];
+	let t8;
+	if ($[13] !== t2 || $[14] !== t6) {
+		t8 = /* @__PURE__ */ jsxs(CanvasSidebarFrame, {
+			label: t2,
+			children: [t6, t7]
+		});
+		$[13] = t2;
+		$[14] = t6;
+		$[15] = t8;
+	} else t8 = $[15];
+	return t8;
 }
 
 //#endregion

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

@@ -3,8 +3,9 @@ import { jsx } from "react/jsx-runtime";
 
 //#region src/features/canvas/sidebar/CanvasSidebarFrame.tsx
 /**
-* The Canvas sidebar's own box, beside the Canvas: the Canvas Navigator or the Canvas
-* Inspector, or a stand-in for either, goes in it.
+* The Canvas sidebar's own box, laid over the Canvas's left side: the Canvas Navigator or the
+* Canvas Inspector, or a stand-in for either, goes in it. Only its cards have a background:
+* around them, the Canvas shows through.
 */
 function CanvasSidebarFrame(t0) {
 	const $ = c(9);
@@ -31,7 +32,7 @@ function CanvasSidebarFrame(t0) {
 	if ($[5] !== children || $[6] !== label || $[7] !== props) {
 		t2 = /* @__PURE__ */ jsx("aside", {
 			"aria-label": label,
-			className: "bg-background relative flex shrink-0 flex-col border-r-2",
+			className: "absolute inset-y-0 left-0 z-10 flex flex-col py-2",
 			style: t1,
 			...props,
 			children

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

@@ -1,15 +1,15 @@
+import { SidebarStack, SidebarStackView } from "../../preview/components/SidebarStack.js";
 import { CanvasInspectorBody, CanvasInspectorHeaderSkeleton } from "./CanvasInspector.js";
 import { CanvasSidebarFrame } from "./CanvasSidebarFrame.js";
+import { CanvasViewHeader } from "./CanvasViewHeader.js";
 import { CuratedPageSkeleton, LayoutPageSkeleton } from "./PageInspectorSkeleton.js";
 import { c } from "react/compiler-runtime";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/features/canvas/sidebar/CanvasSidebarSkeleton.tsx
 /**
-* Stands in for the Canvas sidebar while the Canvas loads, so the page beside it
-* doesn't shift once the Canvas shows. For a selected Page, it takes the Canvas
-* Inspector's layout. Without one, it is empty but just as wide, so selecting and
-* deselecting on the Canvas never resizes the page frame's place under it.
+* Stands in for the Canvas sidebar while the Canvas loads, where the sidebar will show. For a
+* selected Page, it takes the Canvas Inspector's layout. Without one, it is empty.
 */
 function CanvasSidebarSkeleton(t0) {
 	const $ = c(5);
@@ -18,7 +18,15 @@ function CanvasSidebarSkeleton(t0) {
 	const layoutPage = t2 === void 0 ? false : t2;
 	let t3;
 	if ($[0] !== layoutPage || $[1] !== page) {
-		t3 = page && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(CanvasInspectorHeaderSkeleton, {}), /* @__PURE__ */ jsx(CanvasInspectorBody, { children: layoutPage ? /* @__PURE__ */ jsx(LayoutPageSkeleton, {}) : /* @__PURE__ */ jsx(CuratedPageSkeleton, {}) })] });
+		t3 = page && /* @__PURE__ */ jsxs(SidebarStack, { children: [
+			/* @__PURE__ */ jsx(CanvasViewHeader, { covered: true }),
+			/* @__PURE__ */ jsx(CanvasInspectorHeaderSkeleton, {}),
+			/* @__PURE__ */ jsx(CanvasInspectorBody, { children: /* @__PURE__ */ jsx(SidebarStackView, {
+				depth: 1,
+				className: "flex flex-col",
+				children: layoutPage ? /* @__PURE__ */ jsx(LayoutPageSkeleton, {}) : /* @__PURE__ */ jsx(CuratedPageSkeleton, {})
+			}) })
+		] });
 		$[0] = layoutPage;
 		$[1] = page;
 		$[2] = t3;

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

@@ -0,0 +1,50 @@
+import { SidebarStackHeader, useSelectionViewCount } from "../../preview/components/SidebarStack.js";
+import { SHOW_WHOLE_CANVAS_SHORTCUT } from "../../preview/previewConstants.js";
+import { formatShortcut } from "../../../lib/shortcuts.js";
+import { c } from "react/compiler-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/features/canvas/sidebar/CanvasViewHeader.tsx
+/**
+* The header of the Canvas's own view, the bottom of the sidebar's stack. Under a Page's
+* inspector, it leaves the selection and zooms out to the whole Canvas.
+*/
+function CanvasViewHeader(t0) {
+	const $ = c(7);
+	const { covered, onShowWholeCanvas } = t0;
+	const selectionViews = useSelectionViewCount();
+	const distance = covered ? 1 + selectionViews : 0;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsxs(Fragment, { children: ["Show entire site ", formatShortcut(SHOW_WHOLE_CANVAS_SHORTCUT)] });
+		$[0] = t1;
+	} else t1 = $[0];
+	let t2;
+	if ($[1] !== covered) {
+		t2 = covered ? "Site" : /* @__PURE__ */ jsx("h2", {
+			className: "truncate text-sm font-medium",
+			children: "Site"
+		});
+		$[1] = covered;
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] !== distance || $[4] !== onShowWholeCanvas || $[5] !== t2) {
+		t3 = /* @__PURE__ */ jsx(SidebarStackHeader, {
+			first: true,
+			depth: 0,
+			distance,
+			onSelect: onShowWholeCanvas,
+			tooltip: t1,
+			children: t2
+		});
+		$[3] = distance;
+		$[4] = onShowWholeCanvas;
+		$[5] = t2;
+		$[6] = t3;
+	} else t3 = $[6];
+	return t3;
+}
+
+//#endregion
+export { CanvasViewHeader };

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

@@ -8,29 +8,41 @@ import { jsx } from "react/jsx-runtime";
 * its code generates. A record page's content is its record, edited from the preview.
 */
 function DerivedPageInspector(t0) {
-	const $ = c(5);
-	const { layoutId, pageRecord } = t0;
-	const t1 = pageRecord ? "Changes to these blocks apply to every page using this layout. Select this page’s content in the preview to edit its record, shared everywhere it appears." : "Changes apply to every page using this layout. The generated page content is managed outside the studio.";
-	let t2;
-	if ($[0] !== t1) {
-		t2 = {
-			title: "Shared layout blocks",
-			description: t1
+	const $ = c(9);
+	const { layoutId, pageRecord, runtimeBasePath } = t0;
+	let t1;
+	if ($[0] !== layoutId || $[1] !== runtimeBasePath) {
+		t1 = {
+			runtimeBasePath,
+			derivedLayoutId: layoutId
 		};
-		$[0] = t1;
-		$[1] = t2;
-	} else t2 = $[1];
+		$[0] = layoutId;
+		$[1] = runtimeBasePath;
+		$[2] = t1;
+	} else t1 = $[2];
+	const t2 = pageRecord ? "Changes to these blocks apply to every page using this layout. Select this page’s content in the preview to edit its record, shared everywhere it appears." : "Changes apply to every page using this layout. The generated page content is managed outside the studio.";
 	let t3;
-	if ($[2] !== layoutId || $[3] !== t2) {
-		t3 = /* @__PURE__ */ jsx(LayoutPageOverview, {
-			layoutId,
-			notice: t2
-		});
-		$[2] = layoutId;
+	if ($[3] !== t2) {
+		t3 = {
+			title: "Shared layout blocks",
+			description: t2
+		};
 		$[3] = t2;
 		$[4] = t3;
 	} else t3 = $[4];
-	return t3;
+	let t4;
+	if ($[5] !== layoutId || $[6] !== t1 || $[7] !== t3) {
+		t4 = /* @__PURE__ */ jsx(LayoutPageOverview, {
+			layoutId,
+			target: t1,
+			notice: t3
+		});
+		$[5] = layoutId;
+		$[6] = t1;
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	return t4;
 }
 
 //#endregion

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

@@ -2,6 +2,7 @@ import { useProjectUuid } from "../../../lib/auth.js";
 import { reads, useRead } from "../../../lib/studio-reads.js";
 import { PageOverview } from "./PageOverview.js";
 import { LayoutPageBlocks } from "./LayoutPageBlocks.js";
+import { LayoutPageSeo } from "./LayoutPageSeo.js";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Alert, AlertDescription, AlertTitle } from "@camox/ui/alert";
@@ -9,11 +10,11 @@ import { Alert, AlertDescription, AlertTitle } from "@camox/ui/alert";
 //#region src/features/canvas/sidebar/LayoutPageOverview.tsx
 /**
 * A layout page's overview: its layout's blocks, then a notice, which a singleton and a
-* derived page word for themselves.
+* derived page word for themselves, then its SEO and Markdown, which its code builds.
 */
 function LayoutPageOverview(t0) {
-	const $ = c(15);
-	const { layoutId, notice } = t0;
+	const $ = c(20);
+	const { layoutId, notice, target } = t0;
 	const projectUuid = useProjectUuid();
 	let t1;
 	if ($[0] !== layoutId || $[1] !== projectUuid) {
@@ -53,18 +54,34 @@ function LayoutPageOverview(t0) {
 	} else t5 = $[11];
 	let t6;
 	if ($[12] !== t2 || $[13] !== t5) {
-		t6 = /* @__PURE__ */ jsx(PageOverview, { children: /* @__PURE__ */ jsx("div", {
-			className: "flex min-h-0 flex-1 flex-col overflow-auto",
-			children: /* @__PURE__ */ jsxs("div", {
-				className: "flex flex-col gap-4 px-2 pt-5",
-				children: [t2, t5]
-			})
-		}) });
+		t6 = /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-4 px-2 pt-5",
+			children: [t2, t5]
+		});
 		$[12] = t2;
 		$[13] = t5;
 		$[14] = t6;
 	} else t6 = $[14];
-	return t6;
+	let t7;
+	if ($[15] !== target) {
+		t7 = /* @__PURE__ */ jsx("div", {
+			className: "space-y-4 p-2 pt-4",
+			children: /* @__PURE__ */ jsx(LayoutPageSeo, { target })
+		});
+		$[15] = target;
+		$[16] = t7;
+	} else t7 = $[16];
+	let t8;
+	if ($[17] !== t6 || $[18] !== t7) {
+		t8 = /* @__PURE__ */ jsx(PageOverview, { children: /* @__PURE__ */ jsxs("div", {
+			className: "flex min-h-0 flex-1 flex-col overflow-auto",
+			children: [t6, t7]
+		}) });
+		$[17] = t6;
+		$[18] = t7;
+		$[19] = t8;
+	} else t8 = $[19];
+	return t8;
 }
 
 //#endregion