@jbpark/live-editor 2.0.3 → 2.1.0

package/dist/core-D5Hn-6ow.js

@@ -0,0 +1,123 @@
+import { a as detectTypeScript, r as cn } from "./utils-DbfbS1yV.js";
+import { useCallback, useMemo, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { javascript } from "@codemirror/lang-javascript";
+import { vscodeLight } from "@uiw/codemirror-theme-vscode";
+import CodeMirror from "@uiw/react-codemirror";
+import { EditorView } from "codemirror";
+//#region src/components/editor/use-format-code.ts
+const loadPrettier = async () => {
+	const [prettier, babel, estree, typescript] = await Promise.all([
+		import("prettier"),
+		import("prettier/plugins/babel"),
+		import("prettier/plugins/estree"),
+		import("prettier/plugins/typescript")
+	]);
+	return {
+		format: prettier.format,
+		plugins: [
+			babel.default,
+			estree.default,
+			typescript.default
+		]
+	};
+};
+const DEFAULT_PRETTIER_OPTIONS = {
+	tabWidth: 2,
+	singleQuote: true,
+	trailingComma: "all",
+	htmlWhitespaceSensitivity: "ignore",
+	arrowParens: "avoid",
+	printWidth: 60
+};
+const useFormatCode = ({ fragment, prettierOptions } = {}) => {
+	const prettierConfig = useMemo(() => ({
+		...DEFAULT_PRETTIER_OPTIONS,
+		...prettierOptions
+	}), [prettierOptions]);
+	return useCallback(async (code) => {
+		const isTypeScript = detectTypeScript(code);
+		const source = fragment ? `<>${code}</>` : code;
+		let prettier;
+		try {
+			prettier = await loadPrettier();
+		} catch {
+			return code;
+		}
+		const formatted = await prettier.format(source, {
+			parser: isTypeScript ? "typescript" : "babel",
+			plugins: prettier.plugins,
+			...prettierConfig
+		});
+		if (fragment) return formatted.replace(/^<>\n?/, "").replace(/\n?<\/>;?\s*$/, "").replace(/^ {2}/gm, "").trim();
+		return formatted;
+	}, [prettierConfig, fragment]);
+};
+//#endregion
+//#region src/components/editor/core.tsx
+const Core = ({ value, theme, height, className, prettierOptions, fragment, raw, onChange, onSave: _onSave, onError, ...props }) => {
+	const editorRef = useRef(null);
+	const formatCode = useFormatCode({
+		fragment,
+		prettierOptions
+	});
+	const onSave = useCallback(async (val) => {
+		try {
+			const currentView = editorRef.current?.view;
+			if (!currentView) return;
+			const currentLength = currentView.state.doc.length;
+			const cursorPos = currentView.state.selection.main.head;
+			const formattedCode = raw ? val : await formatCode(val);
+			if (currentLength === currentView.state.doc.length) {
+				const newCursorPos = Math.min(cursorPos, formattedCode.length);
+				const transaction = currentView.state.update({
+					changes: {
+						from: 0,
+						to: currentLength,
+						insert: formattedCode
+					},
+					selection: { anchor: newCursorPos }
+				});
+				currentView.dispatch(transaction);
+				onChange?.(formattedCode);
+				_onSave?.(formattedCode);
+			}
+			onError?.(null);
+		} catch (e) {
+			onError?.(e instanceof Error ? e.message : String(e));
+		}
+	}, [
+		raw,
+		formatCode,
+		onChange,
+		_onSave,
+		onError
+	]);
+	const onKeyDown = useCallback((e) => {
+		if ((e.metaKey || e.ctrlKey) && e.key === "s") {
+			e.preventDefault();
+			const currentValue = editorRef.current?.view?.state.doc.toString() || value;
+			onSave(currentValue);
+		}
+	}, [onSave, value]);
+	return /* @__PURE__ */ jsx("div", {
+		className: cn(className),
+		onKeyDown,
+		children: /* @__PURE__ */ jsx(CodeMirror, {
+			ref: editorRef,
+			theme: theme || vscodeLight,
+			height: height || "100%",
+			value,
+			extensions: [javascript({
+				jsx: true,
+				typescript: true
+			}), EditorView.lineWrapping],
+			onChange,
+			...props
+		})
+	});
+};
+//#endregion
+export { useFormatCode as n, Core as t };
+
+//# sourceMappingURL=core-D5Hn-6ow.js.map

package/dist/core-D5Hn-6ow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"core-D5Hn-6ow.js","names":[],"sources":["../src/components/editor/use-format-code.ts","../src/components/editor/core.tsx"],"sourcesContent":["import { useCallback, useMemo } from 'react';\n\nimport { detectTypeScript } from '~/utils';\n\n// prettier is an optional peer dependency (#282): the editor subpath is the\n// only thing that needs it, so consumers who don't use format-on-save\n// shouldn't have to install ~9.6 MB. It's loaded lazily below and its absence\n// degrades gracefully (the code is returned unformatted) instead of throwing.\nconst loadPrettier = async () => {\n  const [prettier, babel, estree, typescript] = await Promise.all([\n    import('prettier'),\n    import('prettier/plugins/babel'),\n    import('prettier/plugins/estree'),\n    import('prettier/plugins/typescript'),\n  ]);\n\n  return {\n    format: prettier.format,\n    plugins: [babel.default, estree.default, typescript.default],\n  };\n};\n\nconst DEFAULT_PRETTIER_OPTIONS: Record<string, unknown> = {\n  tabWidth: 2,\n  singleQuote: true,\n  trailingComma: 'all',\n  htmlWhitespaceSensitivity: 'ignore',\n  arrowParens: 'avoid',\n  printWidth: 60,\n};\n\nexport interface UseFormatCodeOptions {\n  fragment?: boolean;\n  prettierOptions?: Record<string, unknown>;\n}\n\n// Extracted out of Core so a custom renderEditor (see editor.tsx's\n// renderEditor prop) can reuse the exact same formatting behavior instead\n// of reimplementing prettier wiring from scratch.\nexport const useFormatCode = ({\n  fragment,\n  prettierOptions,\n}: UseFormatCodeOptions = {}) => {\n  const prettierConfig = useMemo(\n    () => ({\n      ...DEFAULT_PRETTIER_OPTIONS,\n      ...prettierOptions,\n    }),\n    [prettierOptions],\n  );\n\n  return useCallback(\n    async (code: string) => {\n      const isTypeScript = detectTypeScript(code);\n      const source = fragment ? `<>${code}</>` : code;\n\n      // Only a missing prettier is swallowed here; a genuine format error\n      // (prettier present, but the code is unparseable) still propagates so\n      // the editor's Cmd+S path can surface it via onError.\n      let prettier: Awaited<ReturnType<typeof loadPrettier>>;\n      try {\n        prettier = await loadPrettier();\n      } catch {\n        return code;\n      }\n\n      const formatted = await prettier.format(source, {\n        parser: isTypeScript ? 'typescript' : 'babel',\n        plugins: prettier.plugins,\n        ...prettierConfig,\n      });\n\n      if (fragment) {\n        return formatted\n          .replace(/^<>\\n?/, '')\n          .replace(/\\n?<\\/>;?\\s*$/, '')\n          .replace(/^ {2}/gm, '')\n          .trim();\n      }\n\n      return formatted;\n    },\n    [prettierConfig, fragment],\n  );\n};\n","import { useCallback, useRef } from 'react';\n\nimport { javascript } from '@codemirror/lang-javascript';\nimport { vscodeLight } from '@uiw/codemirror-theme-vscode';\nimport CodeMirror, {\n  type Extension,\n  type ReactCodeMirrorRef,\n} from '@uiw/react-codemirror';\nimport { EditorView } from 'codemirror';\n\nimport { cn } from '~/utils';\n\nimport { useFormatCode } from './use-format-code';\n\nexport interface Props {\n  value: string;\n  height?: string;\n  theme?: Extension | 'light' | 'dark' | 'none';\n  prettierOptions?: Record<string, unknown>;\n  fragment?: boolean;\n  raw?: boolean;\n  className?: string;\n  onChange?: (value: string) => void;\n  onSave?: (value: string) => void;\n  onError?: (error: string | null) => void;\n}\n\nconst Core = ({\n  value,\n  theme,\n  height,\n  className,\n  prettierOptions,\n  fragment,\n  raw,\n  onChange,\n  onSave: _onSave,\n  onError,\n  ...props\n}: Props) => {\n  const editorRef = useRef<ReactCodeMirrorRef>(null);\n\n  const formatCode = useFormatCode({ fragment, prettierOptions });\n\n  const onSave = useCallback(\n    async (val: string) => {\n      try {\n        const currentView = editorRef.current?.view;\n        if (!currentView) {\n          return;\n        }\n\n        const currentLength = currentView.state.doc.length;\n        const cursorPos = currentView.state.selection.main.head;\n        const formattedCode = raw ? val : await formatCode(val);\n\n        if (currentLength === currentView.state.doc.length) {\n          const newCursorPos = Math.min(cursorPos, formattedCode.length);\n          const transaction = currentView.state.update({\n            changes: { from: 0, to: currentLength, insert: formattedCode },\n            selection: { anchor: newCursorPos },\n          });\n          currentView.dispatch(transaction);\n\n          onChange?.(formattedCode);\n          _onSave?.(formattedCode);\n        }\n\n        onError?.(null);\n      } catch (e) {\n        onError?.(e instanceof Error ? e.message : String(e));\n      }\n    },\n    [raw, formatCode, onChange, _onSave, onError],\n  );\n\n  const onKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLDivElement>) => {\n      if ((e.metaKey || e.ctrlKey) && e.key === 's') {\n        e.preventDefault();\n        const currentValue =\n          editorRef.current?.view?.state.doc.toString() || value;\n        onSave(currentValue);\n      }\n    },\n    [onSave, value],\n  );\n\n  return (\n    <div className={cn(className)} onKeyDown={onKeyDown}>\n      <CodeMirror\n        ref={editorRef}\n        theme={theme || vscodeLight}\n        height={height || '100%'}\n        value={value}\n        extensions={[\n          javascript({ jsx: true, typescript: true }),\n          EditorView.lineWrapping,\n        ]}\n        onChange={onChange}\n        {...props}\n      />\n    </div>\n  );\n};\n\nexport default Core;\n"],"mappings":";;;;;;;;AAQA,MAAM,eAAe,YAAY;CAC/B,MAAM,CAAC,UAAU,OAAO,QAAQ,cAAc,MAAM,QAAQ,IAAI;EAC9D,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;CACT,CAAC;CAED,OAAO;EACL,QAAQ,SAAS;EACjB,SAAS;GAAC,MAAM;GAAS,OAAO;GAAS,WAAW;EAAO;CAC7D;AACF;AAEA,MAAM,2BAAoD;CACxD,UAAU;CACV,aAAa;CACb,eAAe;CACf,2BAA2B;CAC3B,aAAa;CACb,YAAY;AACd;AAUA,MAAa,iBAAiB,EAC5B,UACA,oBACwB,CAAC,MAAM;CAC/B,MAAM,iBAAiB,eACd;EACL,GAAG;EACH,GAAG;CACL,IACA,CAAC,eAAe,CAClB;CAEA,OAAO,YACL,OAAO,SAAiB;EACtB,MAAM,eAAe,iBAAiB,IAAI;EAC1C,MAAM,SAAS,WAAW,KAAK,KAAK,OAAO;EAK3C,IAAI;EACJ,IAAI;GACF,WAAW,MAAM,aAAa;EAChC,QAAQ;GACN,OAAO;EACT;EAEA,MAAM,YAAY,MAAM,SAAS,OAAO,QAAQ;GAC9C,QAAQ,eAAe,eAAe;GACtC,SAAS,SAAS;GAClB,GAAG;EACL,CAAC;EAED,IAAI,UACF,OAAO,UACJ,QAAQ,UAAU,EAAE,CAAC,CACrB,QAAQ,iBAAiB,EAAE,CAAC,CAC5B,QAAQ,WAAW,EAAE,CAAC,CACtB,KAAK;EAGV,OAAO;CACT,GACA,CAAC,gBAAgB,QAAQ,CAC3B;AACF;;;ACzDA,MAAM,QAAQ,EACZ,OACA,OACA,QACA,WACA,iBACA,UACA,KACA,UACA,QAAQ,SACR,SACA,GAAG,YACQ;CACX,MAAM,YAAY,OAA2B,IAAI;CAEjD,MAAM,aAAa,cAAc;EAAE;EAAU;CAAgB,CAAC;CAE9D,MAAM,SAAS,YACb,OAAO,QAAgB;EACrB,IAAI;GACF,MAAM,cAAc,UAAU,SAAS;GACvC,IAAI,CAAC,aACH;GAGF,MAAM,gBAAgB,YAAY,MAAM,IAAI;GAC5C,MAAM,YAAY,YAAY,MAAM,UAAU,KAAK;GACnD,MAAM,gBAAgB,MAAM,MAAM,MAAM,WAAW,GAAG;GAEtD,IAAI,kBAAkB,YAAY,MAAM,IAAI,QAAQ;IAClD,MAAM,eAAe,KAAK,IAAI,WAAW,cAAc,MAAM;IAC7D,MAAM,cAAc,YAAY,MAAM,OAAO;KAC3C,SAAS;MAAE,MAAM;MAAG,IAAI;MAAe,QAAQ;KAAc;KAC7D,WAAW,EAAE,QAAQ,aAAa;IACpC,CAAC;IACD,YAAY,SAAS,WAAW;IAEhC,WAAW,aAAa;IACxB,UAAU,aAAa;GACzB;GAEA,UAAU,IAAI;EAChB,SAAS,GAAG;GACV,UAAU,aAAa,QAAQ,EAAE,UAAU,OAAO,CAAC,CAAC;EACtD;CACF,GACA;EAAC;EAAK;EAAY;EAAU;EAAS;CAAO,CAC9C;CAEA,MAAM,YAAY,aACf,MAA2C;EAC1C,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,QAAQ,KAAK;GAC7C,EAAE,eAAe;GACjB,MAAM,eACJ,UAAU,SAAS,MAAM,MAAM,IAAI,SAAS,KAAK;GACnD,OAAO,YAAY;EACrB;CACF,GACA,CAAC,QAAQ,KAAK,CAChB;CAEA,OACE,oBAAC,OAAD;EAAK,WAAW,GAAG,SAAS;EAAc;EACxC,UAAA,oBAAC,YAAD;GACE,KAAK;GACL,OAAO,SAAS;GAChB,QAAQ,UAAU;GACX;GACP,YAAY,CACV,WAAW;IAAE,KAAK;IAAM,YAAY;GAAK,CAAC,GAC1C,WAAW,YACb;GACU;GACV,GAAI;EACL,CAAA;CACE,CAAA;AAET"}

package/dist/dnd/index.d.ts

@@ -1,2 +1,2 @@
-import { a as ICON_OPTIONS, c as PanelRenderData, d as DraggableItemDragState, f as DraggableItemProps, i as ICON_MAP, l as Props, n as Panel, o as PaletteRenderData, r as PanelProps, s as PanelBinding, t as Dnd, u as DraggableItem } from "../index-2CUWhF-T.js";
+import { a as ICON_OPTIONS, c as PanelRenderData, d as DraggableItemDragState, f as DraggableItemProps, i as ICON_MAP, l as Props, n as Panel, o as PaletteRenderData, r as PanelProps, s as PanelBinding, t as Dnd, u as DraggableItem } from "../index-9bvWkK07.js";
 export { Panel as DefaultPanel, DraggableItem, type DraggableItemDragState, type DraggableItemProps, ICON_MAP, ICON_OPTIONS, type PaletteRenderData, type PanelBinding, type PanelProps, type PanelRenderData, type Props, Dnd as default };

package/dist/dnd/index.js

@@ -1,2 +1,2 @@
-import { a as DraggableItem, i as ICON_OPTIONS, n as Panel, r as ICON_MAP, t as Dnd } from "../dnd-E8LbmRfE.js";
+import { a as DraggableItem, i as ICON_OPTIONS, n as Panel, r as ICON_MAP, t as Dnd } from "../dnd-C1YGcp4k.js";
 export { Panel as DefaultPanel, DraggableItem, ICON_MAP, ICON_OPTIONS, Dnd as default };

package/dist/{dnd-E8LbmRfE.js → dnd-C1YGcp4k.js}

@@ -1,12 +1,12 @@
-import { C as __toESM, b as DRAGGABLE_ITEMS, f as nanoid, g as BINDING_PROP, m as require_lib, n as createSectionPreviewCache, r as fillSectionIds, y as DEFAULT_TEMPLATE } from "./document-Ddw-tfnt.js";
-import { d as replaceSections, o as extractSections, r as cn, s as generateSection, u as preloadScripts } from "./utils-B6zpA7mT.js";
+import { C as __toESM, b as DRAGGABLE_ITEMS, f as nanoid, g as BINDING_PROP, m as require_lib, n as createSectionPreviewCache, r as fillSectionIds, y as DEFAULT_TEMPLATE } from "./document-CgUTKVQo.js";
+import { d as replaceSections, o as extractSections, r as cn, s as generateSection, u as preloadScripts } from "./utils-DbfbS1yV.js";
 import { i as usePreview } from "./states-Ci1AvoQ9.js";
-import { A as parseValue, D as extractObjectProperties, E as extractNodeValue, M as generateCode, S as parseBinding, _ as moveSelectedIndices, a as extract, b as getCurrentValue, c as moveArrayItem, d as removeArrayItems, f as updateArrayItemProperty, g as replaceIds, h as fillIds, k as parseArrayExpression, l as moveArrayItems, o as appendArrayItem, p as updateArrayItemValue, r as update, s as duplicateArrayItems, t as validateBindingValue, v as removeIndices, x as getStructuredValue, y as findEditableChildren } from "./ast-BhbOxomw.js";
-import { n as useCompiledModule, r as Frame, t as useDynamicTailwind } from "./use-dynamic-tailwind-CRMGuKnH.js";
-import { n as Error, t as ErrorBoundary } from "./boundary-DOBK2HnX.js";
-import { t as Core } from "./core-D-ZvVhdn.js";
+import { A as parseValue, D as extractObjectProperties, E as extractNodeValue, M as generateCode, S as parseBinding, _ as moveSelectedIndices, a as extract, b as getCurrentValue, c as moveArrayItem, d as removeArrayItems, f as updateArrayItemProperty, g as replaceIds, h as fillIds, k as parseArrayExpression, l as moveArrayItems, o as appendArrayItem, p as updateArrayItemValue, r as update, s as duplicateArrayItems, t as validateBindingValue, v as removeIndices, x as getStructuredValue, y as findEditableChildren } from "./ast-CAhr9WXv.js";
+import { n as useCompiledModule, r as Frame, t as useDynamicTailwind } from "./use-dynamic-tailwind-cdaivJXJ.js";
+import { n as Error, t as ErrorBoundary } from "./boundary-DQiKrXhI.js";
+import { t as Core } from "./core-D5Hn-6ow.js";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Button, Card, Checkbox, ColorPicker, DatePicker, Drawer, Input, Select, Space, Toast, Typography, Upload } from "@jbpark/ui-kit";
+import { Button, Card, Checkbox, ColorPicker, DatePicker, Drawer, Input, RichTextEditor, Select, Space, Splitter, Toast, Typography, Upload } from "@jbpark/ui-kit";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { DndContext, DragOverlay, PointerSensor, closestCenter, useDndContext, useDraggable, useDroppable, useSensor, useSensors } from "@dnd-kit/core";
 import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
@@ -14,9 +14,6 @@ import { SortableContext, arrayMove, useSortable, verticalListSortingStrategy }
 import { useDebounce, useMultiSelect, useResponsiveSize } from "@jbpark/use-hooks";
 import { AlertCircle, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Bell, Bookmark, Calendar, Camera, Check, ChevronDown, ChevronRight, ChevronUp, Clock, Copy, Download, Edit, Eye, Filter, Heart, Home, Image, Info, LayoutGrid, Link, Mail, Map as Map$1, Menu, MessageCircle, Phone, Plus, Search, Settings, Share, ShoppingCart, Star, Trash, Upload as Upload$1, User, X } from "lucide-react";
 import { CSS } from "@dnd-kit/utilities";
-import Placeholder from "@tiptap/extension-placeholder";
-import { EditorContent, useEditor } from "@tiptap/react";
-import StarterKit from "@tiptap/starter-kit";
 //#region src/components/dnd/draggable.tsx
 const DraggableItem = ({ item, children }) => {
 	const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
@@ -169,26 +166,6 @@ const Overlay = ({ sections, renderProps }) => {
 	return null;
 };
 //#endregion
-//#region src/components/editor/tiptap.tsx
-const Tiptap = ({ value = "", placeholder = "Enter text...", className, onChange }) => {
-	const editor = useEditor({
-		extensions: [StarterKit, Placeholder.configure({ placeholder })],
-		content: value,
-		onBlur: ({ editor: e }) => {
-			onChange?.(e.getHTML());
-		}
-	});
-	useEffect(() => {
-		if (!editor) return;
-		if (editor.getHTML() !== value) editor.commands.setContent(value, { emitUpdate: false });
-	}, [value, editor]);
-	return /* @__PURE__ */ jsx(EditorContent, {
-		editor,
-		className: cn(`tiptap-editor min-h-20 rounded border border-gray-200 bg-white px-3
-        py-2`, "prose prose-sm max-w-none text-sm text-gray-800", "[&_.tiptap]:outline-none", "[&_.tiptap_p.is-editor-empty:first-child::before]:pointer-events-none", "[&_.tiptap_p.is-editor-empty:first-child::before]:float-left", "[&_.tiptap_p.is-editor-empty:first-child::before]:h-0", "[&_.tiptap_p.is-editor-empty:first-child::before]:text-gray-400", "[&_.tiptap_p.is-editor-empty:first-child::before]:content-[attr(data-placeholder)]", className)
-	});
-};
-//#endregion
 //#region src/components/dnd/panel/node.tsx
 var import_lib = /* @__PURE__ */ __toESM(require_lib(), 1);
 const Node = ({ data, onChange }) => {
@@ -316,8 +293,9 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 				return;
 			}
 			const jsxBindings = {};
+			const jsxFallbacks = {};
 			element.properties.forEach((prop) => {
-				if (!import_lib.isObjectProperty(prop) || !import_lib.isIdentifier(prop.key) || !import_lib.isJSXElement(prop.value)) return;
+				if (!import_lib.isObjectProperty(prop) || !import_lib.isIdentifier(prop.key) || !(import_lib.isJSXElement(prop.value) || import_lib.isJSXFragment(prop.value))) return;
 				const propertyName = prop.key.name;
 				try {
 					const jsxCode = generateCode(prop.value);
@@ -331,6 +309,7 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 						bindings.push(...editableChildren);
 					});
 					if (bindings.length > 0) jsxBindings[propertyName] = bindings;
+					else jsxFallbacks[propertyName] = jsxCode;
 				} catch (error) {
 					console.error(`Failed to parse JSX in property '${propertyName}':`, error);
 				}
@@ -340,7 +319,8 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 				index: objectItems.length,
 				elementIndex,
 				editableProperties: extractObjectProperties(element),
-				jsxBindings
+				jsxBindings,
+				jsxFallbacks
 			});
 		});
 		return {
@@ -614,7 +594,7 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 					}),
 					/* @__PURE__ */ jsx("div", {
 						className: "space-y-3 border-t pt-2",
-						children: Object.entries(item.jsxBindings).length > 0 ? Object.entries(item.jsxBindings).map(([propertyName, bindings]) => /* @__PURE__ */ jsxs("div", {
+						children: Object.entries(item.jsxBindings).length > 0 || Object.entries(item.jsxFallbacks).length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [Object.entries(item.jsxBindings).map(([propertyName, bindings]) => /* @__PURE__ */ jsxs("div", {
 							className: "space-y-2",
 							children: [/* @__PURE__ */ jsxs("div", {
 								className: "text-xs font-medium text-blue-700",
@@ -627,7 +607,7 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 							}), bindings.map((bindingNode, idx) => {
 								const nodeId = bindingNode.dataAttributes.find((a) => a.name === "data-id")?.value;
 								return /* @__PURE__ */ jsxs("div", {
-									className: "rounded border border-blue-100 bg-blue-50\n                            p-2",
+									className: "rounded border border-blue-100 bg-blue-50\n                              p-2",
 									children: [/* @__PURE__ */ jsxs("div", {
 										className: "mb-1 text-xs text-blue-600",
 										children: [
@@ -641,7 +621,24 @@ const Items = ({ value, render, onChange, onChildChange }) => {
 									})]
 								}, `binding-${item.id}-${propertyName}-${nodeId || idx}`);
 							})]
-						}, propertyName)) : /* @__PURE__ */ jsx("div", {
+						}, propertyName)), Object.entries(item.jsxFallbacks).map(([propertyName, code]) => /* @__PURE__ */ jsxs("div", {
+							className: "space-y-2",
+							children: [/* @__PURE__ */ jsx("div", {
+								className: "text-xs font-medium text-blue-700",
+								children: propertyName
+							}), /* @__PURE__ */ jsx(Field, {
+								binding: {
+									id: `item-${item.id}-${propertyName}-jsx`,
+									label: propertyName,
+									property: propertyName,
+									type: "jsx",
+									value: code,
+									rawValue: code,
+									onChange: (next) => updateProperty(item.elementIndex, propertyName, next)
+								},
+								onNodeChange: onChildChange
+							})]
+						}, propertyName))] }) : /* @__PURE__ */ jsx("div", {
 							className: "text-xs text-gray-500",
 							children: "✓ No JSX bindings found"
 						})
@@ -913,6 +910,14 @@ const formatDateValue = (date) => {
 	return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
 };
 const COLOR_COMMIT_DELAY = 75;
+const RICHTEXT_TOOLBAR = [
+	"bold",
+	"italic",
+	"underline",
+	"bulletList",
+	"orderedList",
+	"link"
+];
 const ColorPickerField = ({ value, onChange }) => {
 	const [liveValue, setLiveValue] = useState(value);
 	const [prevValue, setPrevValue] = useState(value);
@@ -960,8 +965,9 @@ const Field = ({ binding, onNodeChange }) => {
 		onChange,
 		onChildChange: onNodeChange
 	});
-	if (binding.type === "richtext") return /* @__PURE__ */ jsx(Tiptap, {
+	if (binding.type === "richtext") return /* @__PURE__ */ jsx(RichTextEditor, {
 		value: rawValue,
+		toolbar: RICHTEXT_TOOLBAR,
 		onChange: (next) => {
 			if (next !== rawValue) onChange(next);
 		}
@@ -1334,6 +1340,35 @@ const useSectionDocument = (value, onChange) => {
 };
 //#endregion
 //#region src/components/dnd/dnd.tsx
+const describeUpdateFailure = (failure, label) => {
+	switch (failure?.reason) {
+		case "attribute-not-found": return {
+			title: `Failed to update "${label}"`,
+			description: `This element has no "${failure.property}" attribute — check the property in its data-binding.`
+		};
+		case "binding-not-declared": return {
+			title: `Failed to update "${label}"`,
+			description: `No binding for ${failure.property ? `property "${failure.property}"` : `label "${label}"`} is declared on this element's data-binding.`
+		};
+		case "duplicate-binding": return {
+			title: `Failed to update "${label}"`,
+			description: `${failure.count} bindings share ${failure.property ? `property "${failure.property}"` : `label "${label}"`} on this element — remove the duplicate in its data-binding.`
+		};
+		case "no-binding": return {
+			title: `Failed to update "${label}"`,
+			description: "This element has no data-binding declaration."
+		};
+		case "element-not-found": return {
+			title: `Failed to update "${label}"`,
+			description: "The target element could not be found in this section."
+		};
+		case "parse-error": return {
+			title: `Failed to update "${label}"`,
+			description: "Check the console for details."
+		};
+		default: return { title: `Failed to update "${label}"` };
+	}
+};
 const conditionalModifiers = (args) => {
 	const { active } = args;
 	if (active?.data.current?.type === "new-item") return args.transform;
@@ -1394,7 +1429,8 @@ const Dnd$1 = ({ value: _value, props, modules = {}, onChange: _onChange, classN
 	const onFieldChange = ({ id, label, property, value: fieldValue }) => {
 		const result = update(updatedCode, id, label, fieldValue, property);
 		if (!result.success) {
-			Toast.error("Failed to update this field", { description: "Check the console for details." });
+			const { title, description } = describeUpdateFailure(result.failure, label);
+			Toast.error(title, description ? { description } : void 0);
 			return;
 		}
 		if (selectedItem) onChange({
@@ -1476,6 +1512,45 @@ const Dnd$1 = ({ value: _value, props, modules = {}, onChange: _onChange, classN
 			onNodeChange: onFieldChange
 		});
 	};
+	const canvas = /* @__PURE__ */ jsx("div", {
+		className: "relative h-full w-full overflow-y-auto",
+		"data-frame-container": true,
+		style: {
+			isolation: "isolate",
+			contain: "layout style",
+			transform: "translateZ(0)"
+		},
+		children: /* @__PURE__ */ jsx(Droppable, {
+			className: cn(!sections.length && "h-full"),
+			children: !sections.length ? /* @__PURE__ */ jsx("div", {
+				className: cn("flex items-center justify-center", "h-full", "text-gray-500"),
+				children: /* @__PURE__ */ jsxs(Space, {
+					orientation: "vertical",
+					align: "center",
+					children: [/* @__PURE__ */ jsx(Typography.Paragraph, { children: "No sections available" }), /* @__PURE__ */ jsx(Typography.Text, { children: isMobile ? "Tap a component to add it" : "Drag a component from the left to add it" })]
+				})
+			}) : /* @__PURE__ */ jsx(SortableContext, {
+				items: sections.map((s) => s.id),
+				strategy: verticalListSortingStrategy,
+				children: sections.map((section, index) => /* @__PURE__ */ jsx(Sortable, {
+					id: section.id,
+					name: section.name,
+					selected: selectedId === section.id,
+					onClick: () => onSelect(section.id),
+					onDelete,
+					onCopy,
+					children: /* @__PURE__ */ jsx(renderer_default, {
+						preview: previews[index],
+						modules,
+						frame,
+						dynamicTailwind,
+						provider,
+						...props
+					})
+				}, section.id))
+			})
+		})
+	});
 	return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(DndContext, {
 		sensors,
 		collisionDetection: closestCenter,
@@ -1484,58 +1559,35 @@ const Dnd$1 = ({ value: _value, props, modules = {}, onChange: _onChange, classN
 		onDragOver,
 		onDragEnd,
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: cn("relative flex w-full", className),
+			className: cn("relative flex h-full w-full", className),
 			...restProps,
 			children: [
-				/* @__PURE__ */ jsx("div", {
-					className: "hidden w-1/5 overflow-y-auto md:block",
-					children: /* @__PURE__ */ jsx("div", {
-						className: "h-full bg-gray-50 p-4",
-						children: renderPaletteItems(addItem)
-					})
-				}),
-				/* @__PURE__ */ jsx("div", {
-					className: cn("relative", "h-full w-full md:w-3/5", "overflow-y-auto"),
-					"data-frame-container": true,
-					style: {
-						isolation: "isolate",
-						contain: "layout style",
-						transform: "translateZ(0)"
-					},
-					children: /* @__PURE__ */ jsx(Droppable, {
-						className: cn(!sections.length && "h-full"),
-						children: !sections.length ? /* @__PURE__ */ jsx("div", {
-							className: cn("flex items-center justify-center", "h-full", "text-gray-500"),
-							children: /* @__PURE__ */ jsxs(Space, {
-								orientation: "vertical",
-								align: "center",
-								children: [/* @__PURE__ */ jsx(Typography.Paragraph, { children: "No sections available" }), /* @__PURE__ */ jsx(Typography.Text, { children: isMobile ? "Tap a component to add it" : "Drag a component from the left to add it" })]
+				isMobile ? canvas : /* @__PURE__ */ jsxs(Splitter, {
+					withHandle: true,
+					orientation: "horizontal",
+					children: [
+						/* @__PURE__ */ jsx(Splitter.Panel, {
+							defaultSize: "20%",
+							minSize: "15%",
+							maxSize: "35%",
+							collapsible: true,
+							children: /* @__PURE__ */ jsx("div", {
+								className: "h-full overflow-y-auto bg-gray-50 p-4",
+								children: renderPaletteItems(addItem)
 							})
-						}) : /* @__PURE__ */ jsx(SortableContext, {
-							items: sections.map((s) => s.id),
-							strategy: verticalListSortingStrategy,
-							children: sections.map((section, index) => /* @__PURE__ */ jsx(Sortable, {
-								id: section.id,
-								name: section.name,
-								selected: selectedId === section.id,
-								onClick: () => onSelect(section.id),
-								onDelete,
-								onCopy,
-								children: /* @__PURE__ */ jsx(renderer_default, {
-									preview: previews[index],
-									modules,
-									frame,
-									dynamicTailwind,
-									provider,
-									...props
-								})
-							}, section.id))
+						}),
+						/* @__PURE__ */ jsx(Splitter.Panel, {
+							defaultSize: "60%",
+							children: canvas
+						}),
+						/* @__PURE__ */ jsx(Splitter.Panel, {
+							defaultSize: "20%",
+							minSize: "15%",
+							maxSize: "35%",
+							collapsible: true,
+							children: renderPanelContent()
 						})
-					})
-				}),
-				/* @__PURE__ */ jsx("div", {
-					className: "hidden w-1/5 md:block",
-					children: renderPanelContent()
+					]
 				}),
 				/* @__PURE__ */ jsx(Button, {
 					type: "primary",
@@ -1585,4 +1637,4 @@ Dnd.DefaultPanel = Panel;
 //#endregion
 export { DraggableItem as a, ICON_OPTIONS as i, Panel as n, ICON_MAP as r, Dnd as t };
 
-//# sourceMappingURL=dnd-E8LbmRfE.js.map
+//# sourceMappingURL=dnd-C1YGcp4k.js.map