camox 0.10.1 → 0.12.1

package/dist/core/components/lexical/SidebarLexicalEditor.js

@@ -12,42 +12,15 @@ import { ContentEditable } from "@lexical/react/LexicalContentEditable";
 
 //#region src/core/components/lexical/SidebarLexicalEditor.tsx
 function ExternalStateSync(t0) {
-	const $ = c(8);
+	const $ = c(5);
 	const { value, isSyncingRef } = t0;
 	const [editor] = useLexicalComposerContext();
-	const isFocusedRef = React.useRef(false);
 	let t1;
 	let t2;
-	if ($[0] !== editor) {
-		t1 = () => editor.registerRootListener((root) => {
-			if (!root) return;
-			const handleFocus = () => {
-				isFocusedRef.current = true;
-			};
-			const handleBlur = () => {
-				isFocusedRef.current = false;
-			};
-			root.addEventListener("focus", handleFocus);
-			root.addEventListener("blur", handleBlur);
-			return () => {
-				root.removeEventListener("focus", handleFocus);
-				root.removeEventListener("blur", handleBlur);
-			};
-		});
-		t2 = [editor];
-		$[0] = editor;
-		$[1] = t1;
-		$[2] = t2;
-	} else {
-		t1 = $[1];
-		t2 = $[2];
-	}
-	React.useEffect(t1, t2);
-	let t3;
-	let t4;
-	if ($[3] !== editor || $[4] !== isSyncingRef || $[5] !== value) {
-		t3 = () => {
-			if (isFocusedRef.current) return;
+	if ($[0] !== editor || $[1] !== isSyncingRef || $[2] !== value) {
+		t1 = () => {
+			const root = editor.getRootElement();
+			if (root !== null && root === document.activeElement) return;
 			try {
 				const normalized = normalizeLexicalState(value);
 				const newState = editor.parseEditorState(normalized);
@@ -55,21 +28,21 @@ function ExternalStateSync(t0) {
 				editor.setEditorState(newState);
 			} catch {}
 		};
-		t4 = [
+		t2 = [
 			editor,
 			value,
 			isSyncingRef
 		];
-		$[3] = editor;
-		$[4] = isSyncingRef;
-		$[5] = value;
-		$[6] = t3;
-		$[7] = t4;
+		$[0] = editor;
+		$[1] = isSyncingRef;
+		$[2] = value;
+		$[3] = t1;
+		$[4] = t2;
 	} else {
-		t3 = $[6];
-		t4 = $[7];
+		t1 = $[3];
+		t2 = $[4];
 	}
-	React.useEffect(t3, t4);
+	React.useEffect(t1, t2);
 	return null;
 }
 function SidebarLexicalEditor({ id, value, onChange, onFocus, onBlur }) {

package/dist/core/createApp.d.ts

@@ -296,7 +296,7 @@ declare function createApp({
         description: string;
         properties: Record<string, _$_sinclair_typebox0.TSchema>;
         required: string[];
-        toMarkdown: readonly string[];
+        toMarkdown: string[];
       };
       settingsSchema: {
         type: "object";
@@ -618,7 +618,7 @@ declare function createApp({
         description: string;
         properties: Record<string, _$_sinclair_typebox0.TSchema>;
         required: string[];
-        toMarkdown: readonly string[];
+        toMarkdown: string[];
       };
       settingsSchema: {
         type: "object";
@@ -804,7 +804,7 @@ declare function createApp({
       description: string;
       properties: Record<string, _$_sinclair_typebox0.TSchema>;
       required: string[];
-      toMarkdown: readonly string[];
+      toMarkdown: string[];
     };
     settingsSchema: {
       type: "object";

package/dist/core/createBlock.d.ts

@@ -1,11 +1,11 @@
-import { EmbedURL, ExtractAllPlaceholders, FileValue, ImageValue, LinkValue, Type } from "./lib/contentType.js";
+import { EmbedURL, FileValue, ImageValue, LinkValue, ToMarkdownBuilder, Type } from "./lib/contentType.js";
 import * as _$_sinclair_typebox0 from "@sinclair/typebox";
 import { Static, TSchema, Type as Type$1 } from "@sinclair/typebox";
 import * as React from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/core/createBlock.d.ts
-interface CreateBlockOptions<TSchemaShape extends Record<string, TSchema> = Record<string, TSchema>, TSettingsShape extends Record<string, TSchema> = Record<string, TSchema>, TMarkdown extends readonly string[] = readonly string[], TLayoutOnly extends boolean = false> {
+interface CreateBlockOptions<TSchemaShape extends Record<string, TSchema> = Record<string, TSchema>, TSettingsShape extends Record<string, TSchema> = Record<string, TSchema>, TLayoutOnly extends boolean = false> {
   id: string;
   /**
    * Human-readable title for the block (JSON Schema `title`).
@@ -26,20 +26,14 @@ interface CreateBlockOptions<TSchemaShape extends Record<string, TSchema> = Reco
    * content: {
    *   title: Type.String({ default: 'Hello' }),
    *   items: Type.RepeatableItem({
-   *     name: Type.String({ default: 'Item' })
-   *   }, { minItems: 1, maxItems: 10 })
+   *     content: { name: Type.String({ default: 'Item' }) },
+   *     minItems: 1,
+   *     maxItems: 10,
+   *     toMarkdown: (c) => [c.name],
+   *   })
    * }
    */
   content: TSchemaShape;
-  /**
-   * Template for rendering block content as markdown.
-   * Each line is joined with `\n\n`. Use `{{fieldName}}` placeholders for field values.
-   * Lines where all placeholders resolve to empty are omitted.
-   *
-   * @example
-   * toMarkdown: ["# {{title}}", "{{description}}", "{{illustration}}", "{{cta}}"]
-   */
-  toMarkdown: [ExtractAllPlaceholders<TMarkdown>] extends [Extract<keyof TSchemaShape, string>] ? TMarkdown : readonly [`Invalid toMarkdown placeholder {{${Exclude<ExtractAllPlaceholders<TMarkdown>, Extract<keyof TSchemaShape, string>>}}}`];
   /**
    * Optional schema defining block-level settings (e.g. layout variant, toggles).
    * Settings are not inline-editable; they use Type.Enum() and Type.Boolean().
@@ -64,6 +58,16 @@ interface CreateBlockOptions<TSchemaShape extends Record<string, TSchema> = Reco
   component: React.ComponentType<{
     content: Static<ReturnType<typeof Type$1.Object<TSchemaShape>>>;
   }>;
+  /**
+   * Builder for rendering block content as markdown.
+   * `c` is a proxy typed on `content` keys — `c.title`, `c.description`, etc.
+   * Each returned entry becomes a paragraph (joined with `\n\n`).
+   * Lines where all referenced fields resolve to empty are omitted at render time.
+   *
+   * @example
+   * toMarkdown: (c) => [`# ${c.title}`, c.description, c.illustration, c.cta]
+   */
+  toMarkdown: ToMarkdownBuilder<TSchemaShape>;
 }
 interface BlockData<TContent> {
   _id: number;
@@ -98,7 +102,7 @@ interface RepeatableItemSeed {
   content: Record<string, unknown>;
   position: string;
 }
-declare function createBlock<TSchemaShape extends Record<string, TSchema>, TSettingsShape extends Record<string, TSchema> = Record<string, never>, const TMarkdown extends readonly string[] = readonly string[], TLayoutOnly extends boolean = false>(options: CreateBlockOptions<TSchemaShape, TSettingsShape, TMarkdown, TLayoutOnly>): {
+declare function createBlock<TSchemaShape extends Record<string, TSchema>, TSettingsShape extends Record<string, TSchema> = Record<string, never>, TLayoutOnly extends boolean = false>(options: CreateBlockOptions<TSchemaShape, TSettingsShape, TLayoutOnly>): {
   Detached: ({
     children
   }: {
@@ -1103,7 +1107,7 @@ declare function createBlock<TSchemaShape extends Record<string, TSchema>, TSett
       description: string;
       properties: TSchemaShape;
       required: string[];
-      toMarkdown: readonly string[];
+      toMarkdown: string[];
     };
     settingsSchema: {
       type: "object";

package/dist/core/createBlock.js

@@ -10,7 +10,7 @@ import { InlineLexicalEditor } from "./components/lexical/InlineLexicalEditor.js
 import { useFieldSelection } from "./hooks/useFieldSelection.js";
 import { useIsEditable } from "./hooks/useIsEditable.js";
 import { useOverlayMessage } from "./hooks/useOverlayMessage.js";
-import { Type } from "./lib/contentType.js";
+import { Type, resolveToMarkdown } from "./lib/contentType.js";
 import { markdownToReactNodes } from "./lib/lexicalReact.js";
 import { c } from "react/compiler-runtime";
 import { Input } from "@camox/ui/input";
@@ -139,7 +139,7 @@ function createBlock(options) {
 		description: options.description,
 		properties: typeboxSchema.properties,
 		required: Object.keys(options.content),
-		toMarkdown: options.toMarkdown
+		toMarkdown: resolveToMarkdown(options.toMarkdown)
 	};
 	const settingsTypeboxSchema = options.settings ? Type$1.Object(options.settings) : null;
 	const settingsSchema = settingsTypeboxSchema ? {

package/dist/core/lib/contentType.d.ts

@@ -2,8 +2,13 @@ import * as _$_sinclair_typebox0 from "@sinclair/typebox";
 import { TArray, TObject, TSchema, TUnsafe } from "@sinclair/typebox";
 
 //#region src/core/lib/contentType.d.ts
-type ExtractPlaceholders<S extends string> = S extends `${string}{{${infer Key}}}${infer Rest}` ? Key | ExtractPlaceholders<Rest> : never;
-type ExtractAllPlaceholders<T extends readonly string[]> = ExtractPlaceholders<T[number]>;
+declare class FieldToken {
+  readonly fieldName: string;
+  constructor(fieldName: string);
+  toString(): string;
+}
+type ContentProxy<TShape extends Record<string, TSchema>> = { [K in keyof TShape & string]: FieldToken };
+type ToMarkdownBuilder<TShape extends Record<string, TSchema>> = (c: ContentProxy<TShape>) => ReadonlyArray<string | FieldToken>;
 declare const EmbedURLBrand: unique symbol;
 type EmbedURL = string & {
   readonly [EmbedURLBrand]: true;
@@ -88,23 +93,23 @@ declare const Type$1: {
    *
    * @example
    * Type.RepeatableItem({
-   *   title: Type.String({ default: 'Item' }),
-   *   description: Type.String({ default: 'Description' })
-   * }, {
+   *   content: {
+   *     title: Type.String({ default: 'Item' }),
+   *     description: Type.String({ default: 'Description' }),
+   *   },
    *   minItems: 1,
    *   maxItems: 10,
-   *   title: 'Items'
+   *   title: 'Items',
+   *   toMarkdown: (c) => [`### ${c.title}`, c.description],
    * })
    */
-  RepeatableItem: <T extends Record<string, TSchema>, const TMarkdown extends readonly string[] = readonly string[]>(shape: T, options: {
+  RepeatableItem: <T extends Record<string, TSchema>>(options: {
+    content: T;
     minItems: number;
     maxItems: number;
     title?: string;
-  } & ([ExtractAllPlaceholders<TMarkdown>] extends [Extract<keyof T, string>] ? {
-    toMarkdown?: TMarkdown;
-  } : {
-    toMarkdown?: readonly [`Invalid toMarkdown placeholder: "{{${Exclude<ExtractAllPlaceholders<TMarkdown>, Extract<keyof T, string>>}}}"`];
-  })) => TArray<TObject<T>>;
+    toMarkdown: ToMarkdownBuilder<T>;
+  }) => TArray<TObject<T>>;
   /**
    * Creates an enum field with a set of predefined options.
    *
@@ -164,4 +169,4 @@ declare const Type$1: {
   File: typeof _fileType;
 };
 //#endregion
-export { EmbedURL, ExtractAllPlaceholders, FileValue, ImageValue, LinkValue, Type$1 as Type };
+export { EmbedURL, FileValue, ImageValue, LinkValue, ToMarkdownBuilder, Type$1 as Type };

package/dist/core/lib/contentType.js

@@ -1,6 +1,23 @@
 import { Type } from "@sinclair/typebox";
 
 //#region src/core/lib/contentType.ts
+var FieldToken = class {
+	constructor(fieldName) {
+		this.fieldName = fieldName;
+	}
+	toString() {
+		return `{{${this.fieldName}}}`;
+	}
+};
+function createContentProxy() {
+	return new Proxy({}, { get(_target, prop) {
+		if (typeof prop !== "string") return void 0;
+		return new FieldToken(prop);
+	} });
+}
+function resolveToMarkdown(builder) {
+	return builder(createContentProxy()).map((entry) => entry instanceof FieldToken ? entry.toString() : String(entry));
+}
 function _imageType(options) {
 	const imageDefault = {
 		url: `https://placehold.co/1200x800/f4f4f5/a1a1aa.png?text=${options?.title || "image"}`,
@@ -79,9 +96,9 @@ const Type$1 = {
 			fieldType: "String"
 		});
 	},
-	RepeatableItem: (shape, options) => {
+	RepeatableItem: (options) => {
 		if (options.minItems < 1) throw new Error("RepeatableItem requires minItems to be at least 1");
-		const objectSchema = Type.Object(shape);
+		const objectSchema = Type.Object(options.content);
 		const defaultItem = {};
 		for (const [key, prop] of Object.entries(objectSchema.properties)) if ("default" in prop) defaultItem[key] = prop.default;
 		const defaultArray = Array(options.minItems).fill(null).map(() => ({ ...defaultItem }));
@@ -91,7 +108,7 @@ const Type$1 = {
 			default: defaultArray,
 			title: options.title,
 			fieldType: "RepeatableItem",
-			..."toMarkdown" in options && options.toMarkdown ? { toMarkdown: options.toMarkdown } : {}
+			toMarkdown: resolveToMarkdown(options.toMarkdown)
 		});
 	},
 	Enum: (options) => {
@@ -148,4 +165,4 @@ const Type$1 = {
 };
 
 //#endregion
-export { Type$1 as Type };
+export { Type$1 as Type, resolveToMarkdown };

package/dist/features/content/CamoxContent.js

@@ -203,7 +203,7 @@ const CamoxContent = () => {
 	let t18;
 	if ($[39] !== deleteFiles || $[40] !== selectedIds) {
 		t18 = selectedIds.size > 0 && /* @__PURE__ */ jsxs(FloatingToolbar, {
-			className: "bottom-4 min-w-xs justify-between gap-4",
+			className: "bottom-4 min-w-xs justify-between gap-4 pl-3",
 			children: [/* @__PURE__ */ jsxs("span", {
 				className: "text-muted-foreground",
 				children: [

package/dist/features/preview/CamoxPreview.js

@@ -306,7 +306,7 @@ const CamoxPreview = (t0) => {
 			const actions = [
 				{
 					id: "enter-presentation-mode",
-					label: "Enter presentation mode",
+					label: "Hide Camox Studio",
 					groupLabel: "Preview",
 					checkIfAvailable: () => isAuthenticated && !isPresentationMode,
 					execute: _temp4,
@@ -317,12 +317,12 @@ const CamoxPreview = (t0) => {
 				},
 				{
 					id: "exit-presentation-mode",
-					label: "Exit presentation mode",
+					label: "",
 					groupLabel: "Preview",
 					checkIfAvailable: () => isAuthenticated && isPresentationMode,
 					execute: _temp5,
 					shortcut: {
-						key: "Escape",
+						key: "Enter",
 						withMeta: true
 					}
 				},

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

@@ -194,7 +194,7 @@ const SingleAssetFieldEditor = (t0) => {
 				children: [
 					/* @__PURE__ */ jsxs("button", {
 						type: "button",
-						className: "flex min-w-0 flex-1 cursor-zoom-in items-center gap-2 rounded-sm p-1 focus-visible:outline-2",
+						className: "flex min-w-0 flex-1 cursor-zoom-in items-center gap-2 rounded-sm p-1",
 						onClick: () => setLightboxOpen(true),
 						children: [isImage ? /* @__PURE__ */ jsx("div", {
 							className: "border-border h-10 w-10 shrink-0 overflow-hidden rounded border",

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

@@ -305,7 +305,7 @@ const SearchEnginePreview = (t0) => {
 			children: [t1, /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
 				delay: 50,
 				render: /* @__PURE__ */ jsx(Info, { className: "text-muted-foreground size-3.5" })
-			}), /* @__PURE__ */ jsx(TooltipContent, { children: "Titles are cropped after 60 characters and descriptions after 155, like Google typically does." })] })]
+			}), /* @__PURE__ */ jsx(TooltipContent, { children: "Titles are cropped after 60 characters and descriptions after 155, like on Google Search results." })] })]
 		});
 		$[1] = t2;
 	} else t2 = $[1];

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

@@ -88,7 +88,7 @@ const PeekedBlock = (t0) => {
 			if (e.propertyName !== "grid-template-rows" || e.target !== e.currentTarget) return;
 			if (isExpanded) {
 				peekedBlockRef.current?.scrollIntoView({
-					behavior: "instant",
+					behavior: "smooth",
 					block: "start"
 				});
 				return;

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

@@ -197,7 +197,7 @@ const PreviewToolbar = () => {
 	} else t27 = $[44];
 	let t28;
 	if ($[45] !== t27) {
-		t28 = /* @__PURE__ */ jsxs(Tooltip$1.TooltipContent, { children: ["Hide all Camox UI ", t27] });
+		t28 = /* @__PURE__ */ jsxs(Tooltip$1.TooltipContent, { children: ["Hide Camox Studio ", t27] });
 		$[45] = t27;
 		$[46] = t28;
 	} else t28 = $[46];

package/dist/features/preview/previewStore.js

@@ -43,18 +43,15 @@ const previewStore = createStore({
 		enterPresentationMode: (context, _, enqueue) => {
 			if (context.isPresentationMode) return context;
 			enqueue.effect(() => {
-				toast("Entering presentation mode. Press ⌘ + Escape to restore admin interface", { duration: 4e3 });
+				toast("Press ⌘ + Enter to restore Camox Studio", { duration: 2500 });
 			});
 			return {
 				...context,
 				isPresentationMode: true
 			};
 		},
-		exitPresentationMode: (context, _, enqueue) => {
+		exitPresentationMode: (context) => {
 			if (!context.isPresentationMode) return context;
-			enqueue.effect(() => {
-				toast("Leaving presentation mode");
-			});
 			return {
 				...context,
 				isPresentationMode: false

package/dist/features/provider/CamoxProvider.js

@@ -62,7 +62,7 @@ const AuthenticatedCamoxProvider = (t0) => {
 	return t4;
 };
 const UnauthenticatedCamoxProvider = (t0) => {
-	const $ = c(11);
+	const $ = c(16);
 	const { children } = t0;
 	const signInRedirect = useSignInRedirect();
 	const { authenticationUrl } = useAuthContext();
@@ -70,7 +70,7 @@ const UnauthenticatedCamoxProvider = (t0) => {
 	if ($[0] !== signInRedirect) {
 		t1 = () => {
 			const handleKeyDown = (event) => {
-				if ((event.metaKey || event.ctrlKey) && event.key === "Escape") {
+				if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
 					event.preventDefault();
 					signInRedirect();
 				}
@@ -112,25 +112,39 @@ const UnauthenticatedCamoxProvider = (t0) => {
 		t4 = $[7];
 	}
 	React.useEffect(t3, t4);
+	const { theme } = useTheme();
 	let t5;
 	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
-		t5 = /* @__PURE__ */ jsx(Toaster, {
-			theme: "light",
-			position: "bottom-right",
-			offset: { bottom: "1rem" }
-		});
+		t5 = { bottom: "1rem" };
 		$[8] = t5;
 	} else t5 = $[8];
 	let t6;
-	if ($[9] !== children) {
-		t6 = /* @__PURE__ */ jsxs(Fragment, { children: [t5, /* @__PURE__ */ jsx("div", {
-			className: "bg-background min-h-screen",
-			children
-		})] });
-		$[9] = children;
+	if ($[9] !== theme) {
+		t6 = /* @__PURE__ */ jsx(Toaster, {
+			theme,
+			position: "bottom-right",
+			offset: t5
+		});
+		$[9] = theme;
 		$[10] = t6;
 	} else t6 = $[10];
-	return t6;
+	let t7;
+	if ($[11] !== children) {
+		t7 = /* @__PURE__ */ jsx("div", {
+			className: "bg-background min-h-screen",
+			children
+		});
+		$[11] = children;
+		$[12] = t7;
+	} else t7 = $[12];
+	let t8;
+	if ($[13] !== t6 || $[14] !== t7) {
+		t8 = /* @__PURE__ */ jsxs(Fragment, { children: [t6, t7] });
+		$[13] = t6;
+		$[14] = t7;
+		$[15] = t8;
+	} else t8 = $[15];
+	return t8;
 };
 function CamoxProvider({ children, camoxApp, authenticationUrl, apiUrl, projectSlug, environmentName }) {
 	const authClient = React.useMemo(() => createCamoxAuthClient(apiUrl), [apiUrl]);

package/dist/features/studio/components/EnvironmentMenu.js

@@ -9,11 +9,12 @@ import { Badge } from "@camox/ui/badge";
 
 //#region src/features/studio/components/EnvironmentMenu.tsx
 const EnvironmentMenu = () => {
-	const $ = c(13);
+	const $ = c(14);
 	const [open, setOpen] = React.useState(false);
 	const authCtx = React.useContext(AuthContext);
 	if (!authCtx?.environmentName) return null;
 	const isProduction = authCtx.environmentName === "production";
+	const label = isProduction ? "PROD" : "DEV";
 	const badgeClassName = isProduction ? "bg-green-100 text-green-800 border border-green-300 hover:bg-green-100 dark:bg-green-900 dark:text-green-300 dark:border-green-700 dark:hover:bg-green-900 font-mono text-xs" : "bg-yellow-100 text-yellow-800 border border-yellow-300 hover:bg-yellow-100 dark:bg-yellow-900 dark:text-yellow-300 dark:border-yellow-700 dark:hover:bg-yellow-900 font-mono text-xs";
 	let t0;
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
@@ -24,14 +25,14 @@ const EnvironmentMenu = () => {
 		$[0] = t0;
 	} else t0 = $[0];
 	let t1;
-	if ($[1] !== authCtx.environmentName || $[2] !== badgeClassName) {
+	if ($[1] !== badgeClassName || $[2] !== label) {
 		t1 = /* @__PURE__ */ jsx(Badge, {
 			variant: "secondary",
 			className: badgeClassName,
-			children: authCtx.environmentName
+			children: label
 		});
-		$[1] = authCtx.environmentName;
-		$[2] = badgeClassName;
+		$[1] = badgeClassName;
+		$[2] = label;
 		$[3] = t1;
 	} else t1 = $[3];
 	let t2;
@@ -49,7 +50,7 @@ const EnvironmentMenu = () => {
 		$[6] = t3;
 	} else t3 = $[6];
 	let t4;
-	if ($[7] !== isProduction) {
+	if ($[7] !== authCtx.environmentName || $[8] !== isProduction) {
 		t4 = /* @__PURE__ */ jsx(PopoverContent, {
 			className: "w-96 p-4",
 			align: "start",
@@ -59,30 +60,38 @@ const EnvironmentMenu = () => {
 				children: isProduction ? /* @__PURE__ */ jsx("p", {
 					className: "text-sm",
 					children: "You are viewing the production environment."
-				}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("p", {
-					className: "text-sm",
-					children: "This environment is your own space to iterate on content and data structures. It won't affect your teammates or production."
-				}), /* @__PURE__ */ jsx("p", {
-					className: "text-muted-foreground text-xs",
-					children: "You will be able to pull and push data between environments from here."
-				})] })
+				}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsx("p", {
+						className: "text-sm",
+						children: "This environment is your own space to iterate on content and data structures. It won't affect your teammates or production."
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground font-mono text-xs",
+						children: authCtx.environmentName
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground text-xs",
+						children: "You will be able to pull and push data between environments from here."
+					})
+				] })
 			})
 		});
-		$[7] = isProduction;
-		$[8] = t4;
-	} else t4 = $[8];
+		$[7] = authCtx.environmentName;
+		$[8] = isProduction;
+		$[9] = t4;
+	} else t4 = $[9];
 	let t5;
-	if ($[9] !== open || $[10] !== t3 || $[11] !== t4) {
+	if ($[10] !== open || $[11] !== t3 || $[12] !== t4) {
 		t5 = /* @__PURE__ */ jsxs(Popover, {
 			open,
 			onOpenChange: setOpen,
 			children: [t3, t4]
 		});
-		$[9] = open;
-		$[10] = t3;
-		$[11] = t4;
-		$[12] = t5;
-	} else t5 = $[12];
+		$[10] = open;
+		$[11] = t3;
+		$[12] = t4;
+		$[13] = t5;
+	} else t5 = $[13];
 	return t5;
 };
 

package/dist/features/vite/blockBoilerplate.js

@@ -27,7 +27,7 @@ const ${camelName} = createBlock({
     title: Type.String({ default: "Title" }),
   },
   component: ${pascalName}Component,
-  toMarkdown: ['{{title}}']
+  toMarkdown: (c) => [c.title]
 });
 
 function ${pascalName}Component() {

package/dist/features/vite/definitionsSync.js

@@ -11,8 +11,14 @@ const SYNC_DEBOUNCE_DELAY_MS = 100;
 function throwIfSyncAuthError(error) {
 	if (error instanceof Error && error.name === "ORPCError" && error.message.toLowerCase().includes("unauthorized")) throw new Error("[camox] Definition sync failed: invalid syncSecret.");
 }
+function isNotFoundError(error) {
+	return error instanceof Error && error.name === "ORPCError" && error.message.toLowerCase().includes("not found");
+}
+function throwUnknownEnvironmentError(environmentName) {
+	throw new Error(`[camox] Environment "${environmentName}" does not exist. CAMOX_ENV must be "production" or a dev environment previously created by running the dev server while authenticated. Run \`npx camox login\` if needed.`);
+}
 async function syncDefinitionsToApi(options) {
-	const { camoxApp, projectSlug, apiUrl, syncSecret, environmentName, logger } = options;
+	const { camoxApp, projectSlug, apiUrl, syncSecret, environmentName, autoCreate, logger } = options;
 	const client = createServerApiClient(apiUrl, environmentName);
 	const blocks = camoxApp.getBlocks();
 	const layoutDefinitions = camoxApp.getSerializableLayoutDefinitions();
@@ -33,13 +39,15 @@ async function syncDefinitionsToApi(options) {
 		environmentCreated = (await client.blockDefinitions.sync({
 			projectSlug,
 			syncSecret,
+			autoCreate,
 			definitions
 		})).environmentCreated;
 	} catch (error) {
 		throwIfSyncAuthError(error);
+		if (!autoCreate && isNotFoundError(error)) throwUnknownEnvironmentError(environmentName);
 		throw error;
 	}
-	if (environmentCreated && environmentName) logger.info(`[camox] Created environment "${environmentName}" (forked from production)`, { timestamp: true });
+	if (environmentCreated) logger.info(`[camox] Created empty environment "${environmentName}"`, { timestamp: true });
 	logger.info(`[camox] Synced ${definitions.length} block definition${definitions.length === 1 ? "" : "s"}`, { timestamp: true });
 	if (layoutDefinitions.length > 0) {
 		let layoutSyncResults;
@@ -47,10 +55,12 @@ async function syncDefinitionsToApi(options) {
 			layoutSyncResults = await client.layouts.sync({
 				projectSlug,
 				syncSecret,
+				autoCreate,
 				layouts: layoutDefinitions
 			});
 		} catch (error) {
 			throwIfSyncAuthError(error);
+			if (!autoCreate && isNotFoundError(error)) throwUnknownEnvironmentError(environmentName);
 			throw error;
 		}
 		logger.info(`[camox] Synced ${layoutDefinitions.length} layout${layoutDefinitions.length === 1 ? "" : "s"} to Camox API`, { timestamp: true });
@@ -119,7 +129,7 @@ async function ssrLoadModule(server, modulePath) {
 	}
 }
 async function syncDefinitions(server, options) {
-	const { projectSlug, syncSecret, apiUrl, environmentName } = options;
+	const { projectSlug, syncSecret, apiUrl, environmentName, autoCreate } = options;
 	const blocksDir = path.resolve(server.config.root, "src/camox/blocks");
 	const client = createServerApiClient(apiUrl, environmentName);
 	async function performInitialSync() {
@@ -136,6 +146,7 @@ async function syncDefinitions(server, options) {
 			apiUrl,
 			syncSecret,
 			environmentName,
+			autoCreate,
 			logger: server.config.logger
 		});
 	}