camox 0.10.0 → 0.11.0

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`).
@@ -31,15 +31,6 @@ interface CreateBlockOptions<TSchemaShape extends Record<string, TSchema> = Reco
    * }
    */
   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 +55,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 +99,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 +1104,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";
@@ -20,6 +20,7 @@ import { Popover, PopoverContent, PopoverTrigger } from "@camox/ui/popover";
 import { toast } from "@camox/ui/toaster";
 import { Type as Type$1 } from "@sinclair/typebox";
 import { useMutation, useQuery } from "@tanstack/react-query";
+import { useLocation } from "@tanstack/react-router";
 import { useSelector } from "@xstate/store/react";
 import { generateKeyBetween } from "fractional-indexing";
 import * as React from "react";
@@ -35,9 +36,16 @@ const normalizeLinkValue = (value) => {
 	};
 	return value;
 };
-/** Resolve a LinkValue to an href string */
-const resolveLinkHref = (link, pages) => {
-	if (link.type === "page") return (pages?.find((p) => String(p.id) === link.pageId))?.fullPath ?? "#";
+/**
+* Resolve a LinkValue to an href string.
+*
+* Hash-only and empty hrefs are anchored to `currentPathname` so TanStack Router's
+* `<Link to>` builds the same `href` on SSR and client — bare `"#"` otherwise
+* resolves inconsistently across environments, causing hydration mismatches.
+*/
+const resolveLinkHref = (link, pages, currentPathname) => {
+	if (link.type === "page") return (pages?.find((p) => String(p.id) === link.pageId))?.fullPath ?? currentPathname;
+	if (!link.href || link.href.startsWith("#")) return `${currentPathname}${link.href ?? ""}`;
 	return link.href;
 };
 let hasShownEmbedLockToast = false;
@@ -131,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 ? {
@@ -506,7 +514,7 @@ function createBlock(options) {
 		return t28;
 	};
 	const Link = (t0) => {
-		const $ = c(36);
+		const $ = c(37);
 		const { name, children } = t0;
 		const blockContext = React.use(Context);
 		if (!blockContext) throw new Error("Link must be used within a Block Component");
@@ -554,7 +562,12 @@ function createBlock(options) {
 			$[8] = t6;
 		} else t6 = $[8];
 		const { data: pages } = useQuery(t6);
-		const resolvedHref = resolveLinkHref(fieldValue, pages);
+		let t7;
+		if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+			t7 = { select: _temp2 };
+			$[9] = t7;
+		} else t7 = $[9];
+		const resolvedHref = resolveLinkHref(fieldValue, pages, useLocation(t7));
 		const fieldId = getOverlayFieldId(blockId, repeaterContext, String(name));
 		const [isEditing, setIsEditing] = React.useState(false);
 		const [displayText, setDisplayText] = React.useState(fieldValue.text);
@@ -566,24 +579,24 @@ function createBlock(options) {
 			if (!isEditing) setDisplayText(fieldValue.text);
 		}, [fieldValue.text, isEditing]);
 		const isHoveredFromSidebar = useOverlayMessage(iframeWindow, isContentEditable, "CAMOX_HOVER_FIELD", "CAMOX_HOVER_FIELD_END", { fieldId });
-		let t7;
 		let t8;
-		if ($[9] !== isHoveredFromSidebar) {
-			t7 = () => {
+		let t9;
+		if ($[10] !== isHoveredFromSidebar) {
+			t8 = () => {
 				setIsHovered(isHoveredFromSidebar);
 			};
-			t8 = [isHoveredFromSidebar];
-			$[9] = isHoveredFromSidebar;
-			$[10] = t7;
+			t9 = [isHoveredFromSidebar];
+			$[10] = isHoveredFromSidebar;
 			$[11] = t8;
+			$[12] = t9;
 		} else {
-			t7 = $[10];
 			t8 = $[11];
+			t9 = $[12];
 		}
-		React.useEffect(t7, t8);
-		let t9;
-		if ($[12] !== blockId || $[13] !== name || $[14] !== repeaterContext || $[15] !== updateBlockContent || $[16] !== updateRepeatableContent) {
-			t9 = (newLinkValue) => {
+		React.useEffect(t8, t9);
+		let t10;
+		if ($[13] !== blockId || $[14] !== name || $[15] !== repeaterContext || $[16] !== updateBlockContent || $[17] !== updateRepeatableContent) {
+			t10 = (newLinkValue) => {
 				if (repeaterContext?.itemId != null) updateRepeatableContent.mutate({
 					id: repeaterContext.itemId,
 					content: { [name]: newLinkValue }
@@ -593,14 +606,14 @@ function createBlock(options) {
 					content: { [name]: newLinkValue }
 				});
 			};
-			$[12] = blockId;
-			$[13] = name;
-			$[14] = repeaterContext;
-			$[15] = updateBlockContent;
-			$[16] = updateRepeatableContent;
-			$[17] = t9;
-		} else t9 = $[17];
-		const saveLinkValue = t9;
+			$[13] = blockId;
+			$[14] = name;
+			$[15] = repeaterContext;
+			$[16] = updateBlockContent;
+			$[17] = updateRepeatableContent;
+			$[18] = t10;
+		} else t10 = $[18];
+		const saveLinkValue = t10;
 		const handleInput = (e) => {
 			const newText = e.target.textContent || "";
 			saveLinkValue({
@@ -608,9 +621,9 @@ function createBlock(options) {
 				text: newText
 			});
 		};
-		let t10;
-		if ($[18] !== blockId || $[19] !== name || $[20] !== repeaterContext) {
-			t10 = () => {
+		let t11;
+		if ($[19] !== blockId || $[20] !== name || $[21] !== repeaterContext) {
+			t11 = () => {
 				setIsEditing(true);
 				setIsEditorFocused(true);
 				if (repeaterContext?.itemId != null) previewStore.send({
@@ -627,32 +640,32 @@ function createBlock(options) {
 					fieldType: "Link"
 				});
 			};
-			$[18] = blockId;
-			$[19] = name;
-			$[20] = repeaterContext;
-			$[21] = t10;
-		} else t10 = $[21];
-		const handleFocus = t10;
-		let t11;
-		if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
-			t11 = () => {
-				setIsEditing(false);
-				setIsEditorFocused(false);
-			};
+			$[19] = blockId;
+			$[20] = name;
+			$[21] = repeaterContext;
 			$[22] = t11;
 		} else t11 = $[22];
-		const handleBlur = t11;
+		const handleFocus = t11;
 		let t12;
 		if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
-			t12 = (e_0) => {
+			t12 = () => {
+				setIsEditing(false);
+				setIsEditorFocused(false);
+			};
+			$[23] = t12;
+		} else t12 = $[23];
+		const handleBlur = t12;
+		let t13;
+		if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
+			t13 = (e_0) => {
 				e_0.stopPropagation();
 				previewStore.send({ type: "toggleContentSheet" });
 				setIsEditorFocused(false);
 				setIsEditing(false);
 			};
-			$[23] = t12;
-		} else t12 = $[23];
-		const handleEditLink = t12;
+			$[24] = t13;
+		} else t13 = $[24];
+		const handleEditLink = t13;
 		const linkData = {
 			text: displayText,
 			href: resolvedHref,
@@ -664,16 +677,16 @@ function createBlock(options) {
 			rel: fieldValue.newTab ? "noreferrer" : void 0,
 			children: fieldValue.text
 		}, linkData) });
-		let t13;
 		let t14;
-		if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
-			t13 = () => setIsHovered(true);
-			t14 = () => setIsHovered(false);
-			$[24] = t13;
+		let t15;
+		if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
+			t14 = () => setIsHovered(true);
+			t15 = () => setIsHovered(false);
 			$[25] = t14;
+			$[26] = t15;
 		} else {
-			t13 = $[24];
 			t14 = $[25];
+			t15 = $[26];
 		}
 		const linkProps = {
 			ref: elementRef,
@@ -686,56 +699,56 @@ function createBlock(options) {
 			"data-camox-focused": isFocused || void 0,
 			"data-camox-overlay-mode": mode === "layout" ? "layout" : void 0,
 			contentEditable: true,
-			onClick: _temp2,
+			onClick: _temp3,
 			onInput: handleInput,
 			onFocus: handleFocus,
 			onBlur: handleBlur,
-			onMouseEnter: t13,
-			onMouseLeave: t14,
-			onKeyDown: _temp3,
+			onMouseEnter: t14,
+			onMouseLeave: t15,
+			onKeyDown: _temp4,
 			spellCheck: false,
 			suppressContentEditableWarning: true
 		};
 		const T0 = Popover;
-		const t15 = children(linkProps, linkData);
-		let t16;
-		if ($[26] !== handleEditLink) {
-			t16 = /* @__PURE__ */ jsx("button", {
+		const t16 = children(linkProps, linkData);
+		let t17;
+		if ($[27] !== handleEditLink) {
+			t17 = /* @__PURE__ */ jsx("button", {
 				type: "button",
 				className: "hover:bg-accent flex items-center gap-1.5 rounded-md px-2 py-1 text-sm transition-colors",
-				onMouseDown: _temp4,
+				onMouseDown: _temp5,
 				onClick: handleEditLink,
 				children: "Edit link"
 			});
-			$[26] = handleEditLink;
-			$[27] = t16;
-		} else t16 = $[27];
-		let t17;
-		if ($[28] !== elementRef || $[29] !== t16) {
-			t17 = /* @__PURE__ */ jsx(PopoverContent, {
+			$[27] = handleEditLink;
+			$[28] = t17;
+		} else t17 = $[28];
+		let t18;
+		if ($[29] !== elementRef || $[30] !== t17) {
+			t18 = /* @__PURE__ */ jsx(PopoverContent, {
 				className: "w-auto p-2",
 				initialFocus: false,
 				anchor: elementRef,
 				align: "end",
-				children: t16
+				children: t17
 			});
-			$[28] = elementRef;
-			$[29] = t16;
+			$[29] = elementRef;
 			$[30] = t17;
-		} else t17 = $[30];
-		let t18;
-		if ($[31] !== T0 || $[32] !== isEditorFocused || $[33] !== t15 || $[34] !== t17) {
-			t18 = /* @__PURE__ */ jsxs(T0, {
+			$[31] = t18;
+		} else t18 = $[31];
+		let t19;
+		if ($[32] !== T0 || $[33] !== isEditorFocused || $[34] !== t16 || $[35] !== t18) {
+			t19 = /* @__PURE__ */ jsxs(T0, {
 				open: isEditorFocused,
-				children: [t15, t17]
+				children: [t16, t18]
 			});
-			$[31] = T0;
-			$[32] = isEditorFocused;
-			$[33] = t15;
-			$[34] = t17;
+			$[32] = T0;
+			$[33] = isEditorFocused;
+			$[34] = t16;
 			$[35] = t18;
-		} else t18 = $[35];
-		return t18;
+			$[36] = t19;
+		} else t19 = $[36];
+		return t19;
 	};
 	const Image = (t0) => {
 		const $ = c(25);
@@ -1048,9 +1061,9 @@ function createBlock(options) {
 		const isContentEditable = useIsEditable(mode);
 		const { window: iframeWindow } = useFrame();
 		const [isHovered, setIsHovered] = React.useState(false);
-		const selection = useSelector(previewStore, _temp5);
-		const isPageContentSheetOpen = useSelector(previewStore, _temp6);
-		const isAddBlockSheetOpen = useSelector(previewStore, _temp7);
+		const selection = useSelector(previewStore, _temp6);
+		const isPageContentSheetOpen = useSelector(previewStore, _temp7);
+		const isAddBlockSheetOpen = useSelector(previewStore, _temp8);
 		const isAnySideSheetOpen = useIsPreviewSheetOpen();
 		const isBlockSelected = selection?.blockId === blockData._id;
 		const ref = React.useRef(null);
@@ -1123,7 +1136,7 @@ function createBlock(options) {
 			result = { ...blockData.content };
 			for (const key in result) {
 				const value = result[key];
-				if (Array.isArray(value) && value.length > 0 && value[0]?.content !== void 0) result[key] = value.map(_temp8);
+				if (Array.isArray(value) && value.length > 0 && value[0]?.content !== void 0) result[key] = value.map(_temp9);
 			}
 			$[15] = blockData.content;
 			$[16] = result;
@@ -1348,9 +1361,9 @@ function createBlock(options) {
 		const { blockId, mode, isHovered, setIsHovered } = ctx;
 		const isContentEditable = useIsEditable(mode);
 		const { window: iframeWindow } = useFrame();
-		const selection = useSelector(previewStore, _temp9);
-		const isAddBlockSheetOpen = useSelector(previewStore, _temp0);
-		const isPageContentSheetOpen = useSelector(previewStore, _temp1);
+		const selection = useSelector(previewStore, _temp0);
+		const isAddBlockSheetOpen = useSelector(previewStore, _temp1);
+		const isPageContentSheetOpen = useSelector(previewStore, _temp10);
 		const isBlockSelected = selection?.blockId === blockId;
 		const t1 = String(blockId);
 		let t2;
@@ -1538,34 +1551,37 @@ function _temp() {
 		" to interact with the embed content"
 	] }));
 }
-function _temp2(e_1) {
+function _temp2(l) {
+	return l.pathname;
+}
+function _temp3(e_1) {
 	return e_1.preventDefault();
 }
-function _temp3(e_2) {
+function _temp4(e_2) {
 	if (e_2.key === "Escape") e_2.target.blur();
 }
-function _temp4(e_3) {
+function _temp5(e_3) {
 	return e_3.preventDefault();
 }
-function _temp5(state) {
+function _temp6(state) {
 	return state.context.selection;
 }
-function _temp6(state_0) {
+function _temp7(state_0) {
 	return state_0.context.isPageContentSheetOpen;
 }
-function _temp7(state_1) {
+function _temp8(state_1) {
 	return state_1.context.isAddBlockSheetOpen;
 }
-function _temp8(item) {
+function _temp9(item) {
 	return item.content;
 }
-function _temp9(state) {
+function _temp0(state) {
 	return state.context.selection;
 }
-function _temp0(state_0) {
+function _temp1(state_0) {
 	return state_0.context.isAddBlockSheetOpen;
 }
-function _temp1(state_1) {
+function _temp10(state_1) {
 	return state_1.context.isPageContentSheetOpen;
 }
 

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;
@@ -96,15 +101,12 @@ declare const Type$1: {
    *   title: 'Items'
    * })
    */
-  RepeatableItem: <T extends Record<string, TSchema>, const TMarkdown extends readonly string[] = readonly string[]>(shape: T, options: {
+  RepeatableItem: <T extends Record<string, TSchema>>(shape: T, options: {
     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 +166,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"}`,
@@ -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

@@ -19,6 +19,7 @@ import { PeekedBlock } from "./components/PeekedBlock.js";
 import { PreviewFrame, PreviewPanel } from "./components/PreviewPanel.js";
 import { c } from "react/compiler-runtime";
 import { keepPreviousData, useQuery, useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
+import { useLocation, useNavigate } from "@tanstack/react-router";
 import { useSelector } from "@xstate/store/react";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -26,7 +27,6 @@ import { queryKeys } from "@camox/api-contract/query-keys";
 import { Button } from "@camox/ui/button";
 import { PanelContent, PanelHeader } from "@camox/ui/panel";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@camox/ui/tooltip";
-import { useLocation, useNavigate } from "@tanstack/react-router";
 import { Info } from "lucide-react";
 
 //#region src/features/preview/CamoxPreview.tsx

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

@@ -8,13 +8,13 @@ import { trackClientEvent } from "../../../lib/analytics-client.js";
 import { usePreviewedPage } from "../CamoxPreview.js";
 import { c } from "react/compiler-runtime";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useLocation } from "@tanstack/react-router";
 import { useSelector } from "@xstate/store/react";
 import { generateKeyBetween } from "fractional-indexing";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { queryKeys } from "@camox/api-contract/query-keys";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@camox/ui/tooltip";
-import { useLocation } from "@tanstack/react-router";
 import { InfoIcon } from "lucide-react";
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@camox/ui/command";