camox 0.9.0 → 0.10.0

package/dist/core/createLayout.d.ts

@@ -8,45 +8,56 @@ interface OgImageParams {
   projectName: string;
 }
 interface LayoutBlockData {
-  _id: string;
+  _id: number;
   type: string;
   content: Record<string, unknown>;
   settings?: Record<string, unknown>;
   position: string;
 }
 /** Minimal block interface — avoids importing the full generic Block type. */
-interface LayoutBlock {
-  id: string;
-  Component: React.ComponentType<{
-    blockData: any;
-    mode: "site" | "peek" | "layout";
-    isFirstBlock?: boolean;
-    showAddBlockTop?: boolean;
-    showAddBlockBottom?: boolean;
-    addBlockAfterPosition?: string | null;
-  }>;
-  getInitialBundle: () => {
-    content: Record<string, unknown>;
-    settings: Record<string, unknown>;
-    repeatableItems: Array<{
-      tempId: string;
-      parentTempId: string | null;
-      fieldName: string;
-      content: Record<string, unknown>;
-      position: string;
+interface LayoutBlock<TLayoutOnly extends boolean = boolean> {
+  _internal: {
+    id: string;
+    layoutOnly: TLayoutOnly;
+    Component: React.ComponentType<{
+      blockData: any;
+      mode: "site" | "peek" | "layout";
+      isFirstBlock?: boolean;
+      showAddBlockTop?: boolean;
+      showAddBlockBottom?: boolean;
+      addBlockAfterPosition?: string | null;
     }>;
+    getInitialBundle: () => {
+      content: Record<string, unknown>;
+      settings: Record<string, unknown>;
+      repeatableItems: Array<{
+        tempId: string;
+        parentTempId: string | null;
+        fieldName: string;
+        content: Record<string, unknown>;
+        position: string;
+      }>;
+    };
   };
 }
-interface CreateLayoutOptions {
+/**
+ * Per-element validators that produce a human-readable error string when a block
+ * is in the wrong slot. We use mapped types (instead of `LayoutBlock<true>[]` /
+ * `LayoutBlock<false>[]`) so TypeScript reports
+ *   `Type 'X' is not assignable to type '❌ Camox: ...'`
+ * instead of the unreadable structural diff on the full Block shape.
+ */
+type ValidateLayoutOnlyBlocks<T extends readonly LayoutBlock[]> = { [K in keyof T]: T[K] extends LayoutBlock<true> ? T[K] : "❌ Camox: blocks in `blocks.before` and `blocks.after` must be defined with `layoutOnly: true`. Add `layoutOnly: true` to this block's `createBlock` options." };
+type ValidatePageContentBlocks<T extends readonly LayoutBlock[]> = { [K in keyof T]: T[K] extends LayoutBlock<true> ? "❌ Camox: blocks in `blocks.initial` must NOT be `layoutOnly: true` — `initial` is for page-content blocks. Remove `layoutOnly: true` from this block's `createBlock` options." : T[K] };
+interface CreateLayoutOptions<TBefore extends readonly LayoutBlock[], TAfter extends readonly LayoutBlock[], TInitial extends readonly LayoutBlock[]> {
   id: string;
   title: string;
   description: string;
   blocks: {
-    before: LayoutBlock[];
-    after: LayoutBlock[];
+    before: ValidateLayoutOnlyBlocks<TBefore>;
+    after: ValidateLayoutOnlyBlocks<TAfter>; /** Ordered list of blocks to create on the initial page when a project is first set up. */
+    initial?: ValidatePageContentBlocks<TInitial>;
   };
-  /** Ordered list of blocks to create on the initial page when a project is first set up. */
-  initialBlocks?: LayoutBlock[];
   component: React.ComponentType<{
     children: React.ReactNode;
   }>;
@@ -57,64 +68,73 @@ interface CreateLayoutOptions {
   }) => string;
   buildOgImage?: (params: OgImageParams) => React.ReactElement;
 }
-declare function createLayout(options: CreateLayoutOptions): {
-  id: string;
-  title: string;
-  description: string;
-  buildMetaTitle: (params: {
-    pageMetaTitle: string;
-    projectName: string;
-    pageFullPath: string;
-  }) => string;
-  buildOgImage: ((params: OgImageParams) => Promise<Response>) | undefined;
-  blockDefinitions: ({
-    type: string;
-    content: Record<string, unknown>;
-    settings: Record<string, unknown>;
-    repeatableItems: {
-      tempId: string;
-      parentTempId: string | null;
-      fieldName: string;
+declare function createLayout<const TBefore extends readonly LayoutBlock[], const TAfter extends readonly LayoutBlock[], const TInitial extends readonly LayoutBlock[] = []>(options: CreateLayoutOptions<TBefore, TAfter, TInitial>): {
+  BeforeBlocks: {
+    (): _$react_jsx_runtime0.JSX.Element;
+    displayName: string;
+  };
+  AfterBlocks: {
+    (): _$react_jsx_runtime0.JSX.Element;
+    displayName: string;
+  };
+  _internal: {
+    id: string;
+    title: string;
+    description: string;
+    buildMetaTitle: (params: {
+      pageMetaTitle: string;
+      projectName: string;
+      pageFullPath: string;
+    }) => string;
+    buildOgImage: ((params: OgImageParams) => Promise<Response>) | undefined;
+    blockDefinitions: ({
+      type: string;
       content: Record<string, unknown>;
-      position: string;
-    }[];
-    placement: "before";
-  } | {
-    type: string;
-    content: Record<string, unknown>;
-    settings: Record<string, unknown>;
-    repeatableItems: {
-      tempId: string;
-      parentTempId: string | null;
-      fieldName: string;
+      settings: Record<string, unknown>;
+      repeatableItems: {
+        tempId: string;
+        parentTempId: string | null;
+        fieldName: string;
+        content: Record<string, unknown>;
+        position: string;
+      }[];
+      placement: "before";
+    } | {
+      type: string;
       content: Record<string, unknown>;
-      position: string;
-    }[];
-    placement: "after";
-  })[];
-  initialBlockBundles: {
-    type: string;
-    content: Record<string, unknown>;
-    settings: Record<string, unknown>;
-    repeatableItems: {
-      tempId: string;
-      parentTempId: string | null;
-      fieldName: string;
+      settings: Record<string, unknown>;
+      repeatableItems: {
+        tempId: string;
+        parentTempId: string | null;
+        fieldName: string;
+        content: Record<string, unknown>;
+        position: string;
+      }[];
+      placement: "after";
+    })[];
+    initialBlockBundles: {
+      type: string;
       content: Record<string, unknown>;
-      position: string;
-    }[];
-  }[] | undefined;
-  component: React.ComponentType<{
-    children: React.ReactNode;
-  }>;
-  Provider: ({
-    layoutBlocks,
-    children
-  }: {
-    layoutBlocks: Record<string, LayoutBlockData>;
-    children: React.ReactNode;
-  }) => _$react_jsx_runtime0.JSX.Element;
-  blocks: Record<string, React.ComponentType>;
+      settings: Record<string, unknown>;
+      repeatableItems: {
+        tempId: string;
+        parentTempId: string | null;
+        fieldName: string;
+        content: Record<string, unknown>;
+        position: string;
+      }[];
+    }[] | undefined;
+    component: React.ComponentType<{
+      children: React.ReactNode;
+    }>;
+    Provider: ({
+      layoutBlocks,
+      children
+    }: {
+      layoutBlocks: Record<string, LayoutBlockData>;
+      children: React.ReactNode;
+    }) => _$react_jsx_runtime0.JSX.Element;
+  };
 };
 type Layout = ReturnType<typeof createLayout>;
 //#endregion

package/dist/core/createLayout.js

@@ -1,55 +1,80 @@
+import { BlockErrorBoundary } from "../features/preview/components/BlockErrorBoundary.js";
 import { c } from "react/compiler-runtime";
 import * as React from "react";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx } from "react/jsx-runtime";
 
 //#region src/core/createLayout.tsx
-function toPascalCase(str) {
-	return str.split(/[-_\s]+/).map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join("");
-}
 function createLayout(options) {
 	const LayoutContext = React.createContext(null);
-	const allBlocks = [...options.blocks.before, ...options.blocks.after];
-	const slotComponents = {};
-	const lastBeforeBlock = options.blocks.before[options.blocks.before.length - 1];
-	const firstAfterBlock = options.blocks.after[0];
-	for (const block of allBlocks) {
-		const isLastBefore = block === lastBeforeBlock;
-		const isFirstAfter = block === firstAfterBlock;
-		const SlotComponent = () => {
-			const $ = c(2);
-			const ctx = React.use(LayoutContext);
-			if (!ctx) throw new Error(`Layout slot "${block.id}" must be rendered inside a LayoutContextProvider`);
-			const blockData = ctx.layoutBlocks[block.id];
-			if (!blockData) return null;
-			let t0;
-			bb0: {
-				if (isLastBefore) {
-					t0 = "";
-					break bb0;
-				}
-				if (isFirstAfter) {
-					t0 = null;
-					break bb0;
-				}
-				t0 = void 0;
-			}
-			let t1;
-			if ($[0] !== blockData) {
-				t1 = /* @__PURE__ */ jsx(block.Component, {
-					blockData,
-					mode: "layout",
-					showAddBlockTop: isFirstAfter || void 0,
-					showAddBlockBottom: isLastBefore || void 0,
-					addBlockAfterPosition: t0
-				});
-				$[0] = blockData;
-				$[1] = t1;
-			} else t1 = $[1];
-			return t1;
-		};
-		SlotComponent.displayName = `LayoutSlot(${toPascalCase(block.id)})`;
-		slotComponents[toPascalCase(block.id)] = SlotComponent;
-	}
+	const beforeBlocks = options.blocks.before;
+	const afterBlocks = options.blocks.after;
+	const initialBlocks = options.blocks.initial;
+	const BeforeBlocks = () => {
+		const $ = c(4);
+		const ctx = React.use(LayoutContext);
+		if (!ctx) throw new Error(`Layout "${options.id}" BeforeBlocks must be rendered inside its Provider`);
+		let t0;
+		if ($[0] !== ctx) {
+			t0 = beforeBlocks.map((block, i) => {
+				const blockData = ctx.layoutBlocks[block._internal.id];
+				if (!blockData) return null;
+				const isLastBefore = i === beforeBlocks.length - 1;
+				return /* @__PURE__ */ jsx(BlockErrorBoundary, {
+					blockId: blockData._id,
+					blockType: blockData.type,
+					children: /* @__PURE__ */ jsx(block._internal.Component, {
+						blockData,
+						mode: "layout",
+						showAddBlockBottom: isLastBefore || void 0,
+						addBlockAfterPosition: isLastBefore ? "" : void 0
+					})
+				}, block._internal.id);
+			});
+			$[0] = ctx;
+			$[1] = t0;
+		} else t0 = $[1];
+		let t1;
+		if ($[2] !== t0) {
+			t1 = /* @__PURE__ */ jsx(Fragment, { children: t0 });
+			$[2] = t0;
+			$[3] = t1;
+		} else t1 = $[3];
+		return t1;
+	};
+	BeforeBlocks.displayName = `LayoutBeforeBlocks(${options.id})`;
+	const AfterBlocks = () => {
+		const $ = c(4);
+		const ctx = React.use(LayoutContext);
+		if (!ctx) throw new Error(`Layout "${options.id}" AfterBlocks must be rendered inside its Provider`);
+		let t0;
+		if ($[0] !== ctx) {
+			t0 = afterBlocks.map((block, i) => {
+				const blockData = ctx.layoutBlocks[block._internal.id];
+				if (!blockData) return null;
+				const isFirstAfter = i === 0;
+				return /* @__PURE__ */ jsx(BlockErrorBoundary, {
+					blockId: blockData._id,
+					blockType: blockData.type,
+					children: /* @__PURE__ */ jsx(block._internal.Component, {
+						blockData,
+						mode: "layout",
+						showAddBlockTop: isFirstAfter || void 0,
+						addBlockAfterPosition: isFirstAfter ? null : void 0
+					})
+				}, block._internal.id);
+			});
+			$[0] = ctx;
+			$[1] = t0;
+		} else t0 = $[1];
+		let t1;
+		if ($[2] !== t0) {
+			t1 = /* @__PURE__ */ jsx(Fragment, { children: t0 });
+			$[2] = t0;
+			$[3] = t1;
+		} else t1 = $[3];
+		return t1;
+	};
+	AfterBlocks.displayName = `LayoutAfterBlocks(${options.id})`;
 	const Provider = (t0) => {
 		const $ = c(5);
 		const { layoutBlocks, children } = t0;
@@ -72,19 +97,19 @@ function createLayout(options) {
 		} else t2 = $[4];
 		return t2;
 	};
-	const blockDefinitions = [...options.blocks.before.map((block) => {
-		const bundle = block.getInitialBundle();
+	const blockDefinitions = [...beforeBlocks.map((block) => {
+		const bundle = block._internal.getInitialBundle();
 		return {
-			type: block.id,
+			type: block._internal.id,
 			content: bundle.content,
 			settings: bundle.settings,
 			repeatableItems: bundle.repeatableItems,
 			placement: "before"
 		};
-	}), ...options.blocks.after.map((block) => {
-		const bundle = block.getInitialBundle();
+	}), ...afterBlocks.map((block) => {
+		const bundle = block._internal.getInitialBundle();
 		return {
-			type: block.id,
+			type: block._internal.id,
 			content: bundle.content,
 			settings: bundle.settings,
 			repeatableItems: bundle.repeatableItems,
@@ -98,26 +123,29 @@ function createLayout(options) {
 			height: 630
 		});
 	} : void 0;
-	const initialBlockBundles = options.initialBlocks?.map((block) => {
-		const bundle = block.getInitialBundle();
+	const initialBlockBundles = initialBlocks?.map((block) => {
+		const bundle = block._internal.getInitialBundle();
 		return {
-			type: block.id,
+			type: block._internal.id,
 			content: bundle.content,
 			settings: bundle.settings,
 			repeatableItems: bundle.repeatableItems
 		};
 	});
 	return {
-		id: options.id,
-		title: options.title,
-		description: options.description,
-		buildMetaTitle: options.buildMetaTitle,
-		buildOgImage,
-		blockDefinitions,
-		initialBlockBundles,
-		component: options.component,
-		Provider,
-		blocks: slotComponents
+		BeforeBlocks,
+		AfterBlocks,
+		_internal: {
+			id: options.id,
+			title: options.title,
+			description: options.description,
+			buildMetaTitle: options.buildMetaTitle,
+			buildOgImage,
+			blockDefinitions,
+			initialBlockBundles,
+			component: options.component,
+			Provider
+		}
 	};
 }