camox 0.44.0 → 0.45.0

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

@@ -0,0 +1,78 @@
+import { useCamoxApp } from "../../provider/components/CamoxAppContext.js";
+import { usePageBlocks } from "../../../lib/normalized-data.js";
+import { BlocksGroup, CollapsedPageTree, LayoutBlockItem } from "../../preview/components/PageTree.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/features/canvas/sidebar/LayoutPageBlocks.tsx
+const EMPTY_PAGE = { blockIds: [] };
+/** A layout page's blocks: all its layout's, before and after where page content would be. */
+function LayoutPageBlocks(t0) {
+	const $ = c(12);
+	const { layout } = t0;
+	let t1;
+	if ($[0] !== layout) {
+		t1 = {
+			page: EMPTY_PAGE,
+			layout
+		};
+		$[0] = layout;
+		$[1] = t1;
+	} else t1 = $[1];
+	const { beforeBlocks, afterBlocks } = usePageBlocks(t1);
+	const app = useCamoxApp();
+	let t2;
+	if ($[2] !== app || $[3] !== layout.layoutId) {
+		t2 = app.getLayoutById(layout.layoutId)?._internal.title ?? layout.layoutId;
+		$[2] = app;
+		$[3] = layout.layoutId;
+		$[4] = t2;
+	} else t2 = $[4];
+	const layoutName = t2;
+	const t3 = beforeBlocks.length + afterBlocks.length;
+	let t4;
+	if ($[5] !== afterBlocks || $[6] !== beforeBlocks || $[7] !== layoutName) {
+		t4 = /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col gap-4 py-1",
+			children: [["Before", beforeBlocks], ["After", afterBlocks]].map((t5) => {
+				const [title, blocks] = t5;
+				return /* @__PURE__ */ jsxs("section", {
+					className: "space-y-1",
+					children: [/* @__PURE__ */ jsx("h2", {
+						className: "text-muted-foreground px-2 text-xs font-medium",
+						children: title
+					}), blocks.length === 0 ? /* @__PURE__ */ jsxs("p", {
+						className: "text-muted-foreground px-2 py-2 text-sm",
+						children: [
+							"No ",
+							title.toLowerCase(),
+							" blocks"
+						]
+					}) : blocks.map((block) => /* @__PURE__ */ jsx(LayoutBlockItem, {
+						block,
+						layoutName,
+						withActions: false
+					}, block.id))]
+				}, title);
+			})
+		});
+		$[5] = afterBlocks;
+		$[6] = beforeBlocks;
+		$[7] = layoutName;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t3 || $[10] !== t4) {
+		t5 = /* @__PURE__ */ jsx(BlocksGroup, { children: /* @__PURE__ */ jsx(CollapsedPageTree, {
+			blockCount: t3,
+			children: t4
+		}) });
+		$[9] = t3;
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	return t5;
+}
+
+//#endregion
+export { LayoutPageBlocks };

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

@@ -0,0 +1,71 @@
+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 { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+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.
+*/
+function LayoutPageOverview(t0) {
+	const $ = c(15);
+	const { layoutId, notice } = t0;
+	const projectUuid = useProjectUuid();
+	let t1;
+	if ($[0] !== layoutId || $[1] !== projectUuid) {
+		t1 = reads.layoutStructure({
+			projectUuid,
+			layoutId
+		});
+		$[0] = layoutId;
+		$[1] = projectUuid;
+		$[2] = t1;
+	} else t1 = $[2];
+	const layout = useRead(t1);
+	let t2;
+	if ($[3] !== layout) {
+		t2 = /* @__PURE__ */ jsx(LayoutPageBlocks, { layout });
+		$[3] = layout;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== notice.title) {
+		t3 = /* @__PURE__ */ jsx(AlertTitle, { children: notice.title });
+		$[5] = notice.title;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== notice.description) {
+		t4 = /* @__PURE__ */ jsx(AlertDescription, { children: notice.description });
+		$[7] = notice.description;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t3 || $[10] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(Alert, { children: [t3, t4] });
+		$[9] = t3;
+		$[10] = t4;
+		$[11] = t5;
+	} 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]
+			})
+		}) });
+		$[12] = t2;
+		$[13] = t5;
+		$[14] = t6;
+	} else t6 = $[14];
+	return t6;
+}
+
+//#endregion
+export { LayoutPageOverview };

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

@@ -0,0 +1,157 @@
+import { useLocation } from "../../navigation/navigation.js";
+import { CanvasInspectorBody, CanvasInspectorHeader, CanvasInspectorNicknameTitle, CanvasInspectorTitle } from "./CanvasInspector.js";
+import { PageInspectorSkeleton } from "./PageInspectorSkeleton.js";
+import { PreviewEditingOwnerContext } from "../../preview/previewSelection.js";
+import { CuratedPageInspector } from "./CuratedPageInspector.js";
+import { DerivedPageInspector } from "./DerivedPageInspector.js";
+import { SingletonPageInspector } from "./SingletonPageInspector.js";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/features/canvas/sidebar/PageInspector.tsx
+function PageInspectorError() {
+	const $ = c(1);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx("p", {
+			role: "alert",
+			className: "p-4",
+			children: "This page’s sidebar could not be loaded."
+		});
+		$[0] = t0;
+	} else t0 = $[0];
+	return t0;
+}
+var PageInspectorBoundary = class extends React.Component {
+	state = { failed: false };
+	static getDerivedStateFromError() {
+		return { failed: true };
+	}
+	render() {
+		if (this.state.failed) return /* @__PURE__ */ jsx(PageInspectorError, {});
+		return this.props.children;
+	}
+};
+function PageInspectorContent(t0) {
+	const $ = c(6);
+	const { page, pageRecord } = t0;
+	switch (page.kind) {
+		case "curated": {
+			let t1;
+			if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+				t1 = /* @__PURE__ */ jsx(CuratedPageInspector, {});
+				$[0] = t1;
+			} else t1 = $[0];
+			return t1;
+		}
+		case "singleton": {
+			let t1;
+			if ($[1] !== page.layoutId) {
+				t1 = /* @__PURE__ */ jsx(SingletonPageInspector, { layoutId: page.layoutId });
+				$[1] = page.layoutId;
+				$[2] = t1;
+			} else t1 = $[2];
+			return t1;
+		}
+		case "derived": {
+			let t1;
+			if ($[3] !== page.layoutId || $[4] !== pageRecord) {
+				t1 = /* @__PURE__ */ jsx(DerivedPageInspector, {
+					layoutId: page.layoutId,
+					pageRecord
+				});
+				$[3] = page.layoutId;
+				$[4] = pageRecord;
+				$[5] = t1;
+			} else t1 = $[5];
+			return t1;
+		}
+	}
+}
+/**
+* A selected Page's inspector: its name, which a curated page's can rename, then its
+* overview for its kind of Page, which loads at the Page's URL and edits for `owner`.
+*/
+function PageInspector(t0) {
+	const $ = c(25);
+	const { page, owner, pageRecord, onBack, onRenamePage } = t0;
+	const { pathname } = useLocation();
+	let t1;
+	if ($[0] !== onRenamePage || $[1] !== page.kind || $[2] !== page.pageId || $[3] !== page.title) {
+		t1 = page.kind === "curated" && onRenamePage ? /* @__PURE__ */ jsx(CanvasInspectorNicknameTitle, {
+			nickname: page.title,
+			onRename: (nickname) => onRenamePage(page.pageId, nickname)
+		}) : /* @__PURE__ */ jsx(CanvasInspectorTitle, { children: page.title });
+		$[0] = onRenamePage;
+		$[1] = page.kind;
+		$[2] = page.pageId;
+		$[3] = page.title;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== onBack || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(CanvasInspectorHeader, {
+			onBack,
+			children: t1
+		});
+		$[5] = onBack;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	const t3 = `${page.key}:${pathname}`;
+	let t4;
+	if ($[8] !== page.kind) {
+		t4 = /* @__PURE__ */ jsx(PageInspectorSkeleton, { kind: page.kind });
+		$[8] = page.kind;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== page || $[11] !== pageRecord) {
+		t5 = /* @__PURE__ */ jsx(PageInspectorContent, {
+			page,
+			pageRecord
+		});
+		$[10] = page;
+		$[11] = pageRecord;
+		$[12] = t5;
+	} else t5 = $[12];
+	let t6;
+	if ($[13] !== t4 || $[14] !== t5) {
+		t6 = /* @__PURE__ */ jsx(React.Suspense, {
+			fallback: t4,
+			children: t5
+		});
+		$[13] = t4;
+		$[14] = t5;
+		$[15] = t6;
+	} else t6 = $[15];
+	let t7;
+	if ($[16] !== t3 || $[17] !== t6) {
+		t7 = /* @__PURE__ */ jsx(PageInspectorBoundary, { children: t6 }, t3);
+		$[16] = t3;
+		$[17] = t6;
+		$[18] = t7;
+	} else t7 = $[18];
+	let t8;
+	if ($[19] !== owner || $[20] !== t7) {
+		t8 = /* @__PURE__ */ jsx(CanvasInspectorBody, { children: /* @__PURE__ */ jsx(PreviewEditingOwnerContext, {
+			value: owner,
+			children: t7
+		}) });
+		$[19] = owner;
+		$[20] = t7;
+		$[21] = t8;
+	} else t8 = $[21];
+	let t9;
+	if ($[22] !== t2 || $[23] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(Fragment, { children: [t2, t8] });
+		$[22] = t2;
+		$[23] = t8;
+		$[24] = t9;
+	} else t9 = $[24];
+	return t9;
+}
+
+//#endregion
+export { PageInspector };

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

@@ -0,0 +1,90 @@
+import { PageInfoSkeleton } from "../../preview/components/PageInfoSkeleton.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Skeleton } from "@camox/ui/skeleton";
+
+//#region src/features/canvas/sidebar/PageInspectorSkeleton.tsx
+/** A `BlocksGroup` of a `CollapsedPageTree`. */
+function BlocksGroupSkeleton(t0) {
+	const $ = c(4);
+	const { children } = t0;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 w-12" });
+		$[0] = t1;
+	} else t1 = $[0];
+	let t2;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(Skeleton, { className: "h-9.5 w-full rounded-lg" });
+		$[1] = t2;
+	} else t2 = $[1];
+	let t3;
+	if ($[2] !== children) {
+		t3 = /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-2",
+			children: [t1, /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-1",
+				children: [t2, children]
+			})]
+		});
+		$[2] = children;
+		$[3] = t3;
+	} else t3 = $[3];
+	return t3;
+}
+function LoadingPage(t0) {
+	const $ = c(2);
+	const { children } = t0;
+	let t1;
+	if ($[0] !== children) {
+		t1 = /* @__PURE__ */ jsx("div", {
+			role: "status",
+			"aria-label": "Loading page sidebar",
+			className: "flex min-h-0 flex-1 flex-col overflow-hidden",
+			children
+		});
+		$[0] = children;
+		$[1] = t1;
+	} else t1 = $[1];
+	return t1;
+}
+/** A curated page's blocks and page info. */
+function CuratedPageSkeleton() {
+	const $ = c(1);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsxs(LoadingPage, { children: [/* @__PURE__ */ jsx("div", {
+			className: "px-2 pt-4",
+			children: /* @__PURE__ */ jsx(BlocksGroupSkeleton, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-full" }) })
+		}), /* @__PURE__ */ jsx(PageInfoSkeleton, {})] });
+		$[0] = t0;
+	} else t0 = $[0];
+	return t0;
+}
+/** A layout page's blocks and notice. */
+function LayoutPageSkeleton() {
+	const $ = c(1);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(LoadingPage, { children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-4 px-2 pt-4",
+			children: [/* @__PURE__ */ jsx(BlocksGroupSkeleton, {}), /* @__PURE__ */ jsx(Skeleton, { className: "h-20 w-full rounded-lg" })]
+		}) });
+		$[0] = t0;
+	} else t0 = $[0];
+	return t0;
+}
+function PageInspectorSkeleton(t0) {
+	const $ = c(2);
+	const { kind } = t0;
+	let t1;
+	if ($[0] !== kind) {
+		t1 = kind === "curated" ? /* @__PURE__ */ jsx(CuratedPageSkeleton, {}) : /* @__PURE__ */ jsx(LayoutPageSkeleton, {});
+		$[0] = kind;
+		$[1] = t1;
+	} else t1 = $[1];
+	return t1;
+}
+
+//#endregion
+export { CuratedPageSkeleton, LayoutPageSkeleton, PageInspectorSkeleton };

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

@@ -0,0 +1,27 @@
+import { usePreviewTargetSelection } from "../../preview/previewSelection.js";
+import { SelectionEditor } from "../../preview/components/SelectionEditor.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/features/canvas/sidebar/PageOverview.tsx
+/**
+* A Page's overview, which the selection editor replaces while something on the Page is
+* selected: a block, or a record page's record, which no block places. Every kind of Page
+* tracks its selection the same way.
+*/
+function PageOverview(t0) {
+	const $ = c(3);
+	const { children } = t0;
+	const selection = usePreviewTargetSelection();
+	let t1;
+	if ($[0] !== children || $[1] !== selection) {
+		t1 = selection != null ? /* @__PURE__ */ jsx(SelectionEditor, {}) : children;
+		$[0] = children;
+		$[1] = selection;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
+}
+
+//#endregion
+export { PageOverview };

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

@@ -0,0 +1,31 @@
+import { LayoutPageOverview } from "./LayoutPageOverview.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/features/canvas/sidebar/SingletonPageInspector.tsx
+/** A singleton page: its layout's blocks are all its blocks, edited here, at a fixed URL. */
+function SingletonPageInspector(t0) {
+	const $ = c(3);
+	const { layoutId } = t0;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = {
+			title: "Fixed page structure",
+			description: "Edit this page’s blocks here. Its URL and structure are defined in code. Synced blocks share content with their other placements."
+		};
+		$[0] = t1;
+	} else t1 = $[0];
+	let t2;
+	if ($[1] !== layoutId) {
+		t2 = /* @__PURE__ */ jsx(LayoutPageOverview, {
+			layoutId,
+			notice: t1
+		});
+		$[1] = layoutId;
+		$[2] = t2;
+	} else t2 = $[2];
+	return t2;
+}
+
+//#endregion
+export { SingletonPageInspector };