@jbpark/live-editor 1.12.0 → 1.14.0

package/dist/{document-BVWq-dmf.d.mts → document-DXOwpvWM.d.ts}

@@ -1,4 +1,16 @@
-import { n as Section } from "./index-C8h8TcIl.mjs";
+//#region src/types/index.d.ts
+interface Module {
+  exports: {
+    default?: React.ComponentType<Record<string, unknown>>;
+  };
+  error?: string;
+}
+interface Section {
+  id: string;
+  name: string;
+  code: string;
+}
+//#endregion
 //#region node_modules/.pnpm/@babel+types@7.29.8/node_modules/@babel/types/lib/index-legacy.d.ts
 // NOTE: This file is autogenerated. Do not modify.
 // See packages/babel-types/scripts/generators/typescript-legacy.ts for script used.
@@ -1516,5 +1528,5 @@ interface SectionPreviewCache {
 }
 declare const createSectionPreviewCache: () => SectionPreviewCache;
 //#endregion
-export { generateDocumentCode as a, getSections as c, ArrayExpression as d, Expression as f, ObjectExpression as h, createSectionPreviewCache as i, parseDocument as l, Node as m, SectionPreviewCache as n, generateSectionPreview as o, File as p, clearDocumentParseCache as r, generateSectionPreviews as s, DocumentTree as t, replaceDocumentSections as u };
-//# sourceMappingURL=document-BVWq-dmf.d.mts.map
+export { Section as _, generateDocumentCode as a, getSections as c, ArrayExpression as d, Expression as f, Module as g, ObjectExpression as h, createSectionPreviewCache as i, parseDocument as l, Node as m, SectionPreviewCache as n, generateSectionPreview as o, File as p, clearDocumentParseCache as r, generateSectionPreviews as s, DocumentTree as t, replaceDocumentSections as u };
+//# sourceMappingURL=document-DXOwpvWM.d.ts.map

package/dist/{utils/ast/index.d.mts → index-BVjSMVya.d.ts}

@@ -1,4 +1,4 @@
-import { a as generateDocumentCode, c as getSections, d as ArrayExpression, f as Expression, h as ObjectExpression, i as createSectionPreviewCache, l as parseDocument, m as Node, n as SectionPreviewCache, o as generateSectionPreview, p as File, r as clearDocumentParseCache, s as generateSectionPreviews, t as DocumentTree, u as replaceDocumentSections } from "../../document-BVWq-dmf.mjs";
+import { d as ArrayExpression, f as Expression, h as ObjectExpression, m as Node, p as File } from "./document-DXOwpvWM.js";
 //#region src/utils/ast/types.d.ts
 interface Attribute {
   name: string;
@@ -134,5 +134,5 @@ interface ValidationResult {
 }
 declare const validateBindingValue: (binding: BindingItem, value: unknown) => ValidationResult;
 //#endregion
-export { type BindingItem, type BindingOption, type BindingRenderLeaf, type BindingRenderMap, type BindingType, type DataAttrNode, type DocumentTree, type EditableNodeValueType, type ExtractedNodeValue, type NodeValueType, type SectionPreviewCache, type ValidationResult, arrayExpressionToCode, bulkUpdate, clearDocumentParseCache, clearExtractCache, clone, createNodeFromValue, createSectionPreviewCache, extract, extractNodeValue, extractObjectProperties, fillIds, findEditableChildren, generateCode, generateDocumentCode, generateSectionPreview, generateSectionPreviews, getCurrentValue, getSections, parseArrayExpression, parseBinding, parseDocument, parseValue, replaceDocumentSections, replaceIds, update, validateBindingValue };
-//# sourceMappingURL=index.d.mts.map
+export { BindingRenderMap as C, ExtractedNodeValue as D, EditableNodeValueType as E, NodeValueType as O, BindingRenderLeaf as S, DataAttrNode as T, findEditableChildren as _, replaceIds as a, BindingItem as b, clearExtractCache as c, arrayExpressionToCode as d, createNodeFromValue as f, parseValue as g, parseArrayExpression as h, fillIds as i, extract as l, extractObjectProperties as m, validateBindingValue as n, bulkUpdate as o, extractNodeValue as p, clone as r, update as s, ValidationResult as t, generateCode as u, getCurrentValue as v, BindingType as w, BindingOption as x, parseBinding as y };
+//# sourceMappingURL=index-BVjSMVya.d.ts.map

package/dist/{index.d.mts → index.d.ts}

@@ -1,4 +1,5 @@
-import { n as Section } from "./index-C8h8TcIl.mjs";
+import { _ as Section } from "./document-DXOwpvWM.js";
+import { w as BindingType, x as BindingOption } from "./index-BVjSMVya.js";
 import "@jbpark/ui-kit/style.css";
 import React$1, { ReactNode } from "react";
 import { Extension } from "@uiw/react-codemirror";
@@ -135,11 +136,26 @@ interface PaletteRenderData {
   items: Section[];
   onAdd: (item: Section) => void;
   DraggableItem: typeof DraggableItem;
+  isMobile: boolean;
 }
 interface PanelRenderData {
   item?: Section;
   onChange: (next: Partial<Section>) => void;
   onDelete: (id: string) => void;
+  onMoveUp: () => void;
+  onMoveDown: () => void;
+  canMoveUp: boolean;
+  canMoveDown: boolean;
+  bindings: PanelBinding[];
+}
+interface PanelBinding {
+  id: string;
+  label: string;
+  property: string;
+  type?: BindingType;
+  options?: BindingOption[];
+  value: string;
+  onChange: (value: string) => void;
 }
 interface Props extends Omit<React.ComponentPropsWithRef<'div'>, 'onChange'> {
   value?: string;
@@ -182,4 +198,4 @@ declare const App: {
 declare const LiveRenderer: ({ code, props, modules, dynamicTailwind, provider, ...restProps }: Props$7) => import("react").JSX.Element;
 //#endregion
 export { Dnd as LiveDnd, Editor as LiveEditor, Error$1 as LiveError, Preview as LivePreview, App as LiveProvider, App as default, LiveRenderer };
-//# sourceMappingURL=index.d.mts.map
+//# sourceMappingURL=index.d.ts.map

package/dist/{index.mjs → index.js}

@@ -1,7 +1,7 @@
-import { _ as DEFAULT_TEMPLATE, f as require_lib$1, m as BINDING_PROP, n as createSectionPreviewCache, p as require_lib, v as DRAGGABLE_ITEMS, x as __toESM } from "./document-DocoSXLT.mjs";
-import { a as detectTypeScript, d as replaceSections, i as compile, l as getCachedScriptBlob, n as clearCompilationCache, o as extractSections, r as cn, s as generateSection, t as baseModules, u as preloadScripts } from "./utils-DP9WPbBJ.mjs";
-import { _ as parseArrayExpression, c as extract, d as getCurrentValue, f as parseBinding, g as extractObjectProperties, h as extractNodeValue, i as replaceIds, l as nanoid, m as createNodeFromValue, n as clone, o as update, p as arrayExpressionToCode, r as fillIds, t as validateBindingValue, u as findEditableChildren, v as parseValue, y as generateCode } from "./ast-9E8pNi7j.mjs";
-import { t as generateTailwindCSS } from "./tailwind-CzPhj3D9.mjs";
+import { _ as DEFAULT_TEMPLATE, f as require_lib$1, m as BINDING_PROP, n as createSectionPreviewCache, p as require_lib, v as DRAGGABLE_ITEMS, x as __toESM } from "./document-CSIscFpL.js";
+import { a as detectTypeScript, d as replaceSections, i as compile, l as getCachedScriptBlob, n as clearCompilationCache, o as extractSections, r as cn, s as generateSection, t as baseModules, u as preloadScripts } from "./utils-B11t9ZYd.js";
+import { _ as parseArrayExpression, c as extract, d as getCurrentValue, f as parseBinding, g as extractObjectProperties, h as extractNodeValue, i as replaceIds, l as nanoid, m as createNodeFromValue, n as clone, o as update, p as arrayExpressionToCode, r as fillIds, t as validateBindingValue, u as findEditableChildren, v as parseValue, y as generateCode } from "./ast-Dq1EfxA5.js";
+import { t as generateTailwindCSS } from "./tailwind-CzPhj3D9.js";
 import "@jbpark/ui-kit/style.css";
 import React, { createContext, memo, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Button, Card, Checkbox, ColorPicker, DatePicker, Drawer, Input, Select, Space, Toast, Typography, Upload } from "@jbpark/ui-kit";
@@ -10,7 +10,7 @@ import { DndContext, DragOverlay, PointerSensor, closestCenter, useDndContext, u
 import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
 import { SortableContext, arrayMove, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
 import { useDebounce, useDebouncedValue, useEventListener, useMultiSelect, useMutationObserver, useResizeObserver, useResponsiveSize } from "@jbpark/use-hooks";
-import { AlertCircle, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Bell, Bookmark, Calendar, Camera, Check, ChevronDown, ChevronRight, 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 { 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 { v4 } from "uuid";
 import { createPortal } from "react-dom";
 import { CSS } from "@dnd-kit/utilities";
@@ -100,6 +100,20 @@ const UNIT_MAP = {
 const UNITS_PATTERN = Object.keys(UNIT_MAP).sort((a, b) => b.length - a.length).join("|");
 const VIEWPORT_UNIT_RE = new RegExp(`(?<![\\w.-])(-?(?:\\d+\\.?\\d*|\\.\\d+))(${UNITS_PATTERN})(?![a-zA-Z0-9_-])`, "gi");
 const convertViewportUnits = (css) => css.replace(VIEWPORT_UNIT_RE, (_match, number, unit) => number + UNIT_MAP[unit.toLowerCase()]);
+const rewriteInlineViewportUnits = (root) => {
+	root.querySelectorAll("[style*=\"vh\" i], [style*=\"vmin\" i], [style*=\"vmax\" i]").forEach((el) => {
+		const current = el.getAttribute("style");
+		if (current == null) return;
+		const converted = convertViewportUnits(current);
+		if (converted !== current) el.setAttribute("style", converted);
+	});
+	root.querySelectorAll("style").forEach((styleEl) => {
+		const current = styleEl.textContent;
+		if (!current) return;
+		const converted = convertViewportUnits(current);
+		if (converted !== current) styleEl.textContent = converted;
+	});
+};
 //#endregion
 //#region src/components/frame/iframe.tsx
 const EMPTY_STRING_ARRAY = [];
@@ -237,6 +251,7 @@ const IFrame = ({ title = "Live Preview", sandbox, style = {}, scripts = EMPTY_S
 		prevStylesheetCountRef.current = stylesheets.length;
 	}, [styles, stylesheets]);
 	const CONTAINER_STYLE_ID = "autoheight-container";
+	const HIDE_SCROLLBAR_STYLE_ID = "autoheight-hide-scrollbar";
 	const ensureContainerStyle = (doc, probeHeight) => {
 		let styleEl = doc.getElementById(CONTAINER_STYLE_ID);
 		if (!styleEl) {
@@ -288,6 +303,7 @@ const IFrame = ({ title = "Live Preview", sandbox, style = {}, scripts = EMPTY_S
 		let contentHeight = 0;
 		withMeasurementOverrides(doc, () => {
 			ensureContainerStyle(doc, probeHeight);
+			rewriteInlineViewportUnits(mountNode);
 			contentHeight = mountNode.scrollHeight;
 			mountNode.querySelectorAll("*").forEach((el) => {
 				const style = win.getComputedStyle(el);
@@ -304,6 +320,20 @@ const IFrame = ({ title = "Live Preview", sandbox, style = {}, scripts = EMPTY_S
 		if (shouldAutoHeight) return;
 		iframeRef.current?.contentDocument?.getElementById(CONTAINER_STYLE_ID)?.remove();
 	}, [shouldAutoHeight]);
+	useEffect(() => {
+		const doc = iframeRef.current?.contentDocument;
+		if (!doc?.head) return;
+		const existing = doc.getElementById(HIDE_SCROLLBAR_STYLE_ID);
+		if (!shouldAutoHeight) {
+			existing?.remove();
+			return;
+		}
+		if (existing) return;
+		const styleEl = doc.createElement("style");
+		styleEl.id = HIDE_SCROLLBAR_STYLE_ID;
+		styleEl.textContent = ["html, body { scrollbar-width: none !important; }", "html::-webkit-scrollbar, body::-webkit-scrollbar { display: none !important; }"].join("\n");
+		doc.head.appendChild(styleEl);
+	}, [shouldAutoHeight, mountNode]);
 	useEffect(() => {
 		updateHeight();
 	}, [updateHeight]);
@@ -405,13 +435,14 @@ const DraggableItem = ({ item, children }) => {
 		isDragging
 	});
 };
-const DefaultDraggableItem = ({ item, onAdd }) => /* @__PURE__ */ jsx(DraggableItem, {
+const DefaultDraggableItem = ({ item, onAdd, tapToAdd = false }) => /* @__PURE__ */ jsx(DraggableItem, {
 	item,
 	children: ({ ref, dragProps, isDragging }) => /* @__PURE__ */ jsx(Card, {
 		ref,
 		style: { opacity: isDragging ? .5 : 1 },
 		...dragProps,
 		className: cn("cursor-grab", "outline-none", "hover:border-blue-300 hover:shadow-md", isDragging && "opacity-50"),
+		onClick: tapToAdd && onAdd ? () => onAdd(item) : void 0,
 		onDoubleClick: onAdd ? () => onAdd(item) : void 0,
 		children: item.name
 	})
@@ -12861,33 +12892,7 @@ const Node = ({ data, onChange }) => {
 };
 //#endregion
 //#region src/components/dnd/panel/panel.tsx
-const Panel = ({ item, onChange, onDelete }) => {
-	const code = item?.code;
-	const { dataAttrNodes, updatedCode, parseError } = useMemo(() => {
-		if (!code) return {
-			dataAttrNodes: [],
-			updatedCode: "",
-			parseError: false
-		};
-		try {
-			const updatedCode = fillIds(code);
-			return {
-				dataAttrNodes: extract(updatedCode).filter((node) => node.tagName !== "section"),
-				updatedCode: updatedCode !== code ? updatedCode : code,
-				parseError: false
-			};
-		} catch (e) {
-			console.warn("⚠️ Parsing error", e);
-			return {
-				dataAttrNodes: [],
-				updatedCode: "",
-				parseError: true
-			};
-		}
-	}, [code]);
-	useEffect(() => {
-		if (parseError) Toast.error("Failed to parse this section", { description: "Check the console for details." });
-	}, [parseError]);
+const Panel = ({ item, onDelete, onMoveUp, onMoveDown, canMoveUp = false, canMoveDown = false, fields, onFieldChange }) => {
 	if (!item) return /* @__PURE__ */ jsx(Typography.Paragraph, {
 		className: cn("p-4 text-sm text-gray-500"),
 		children: "Please select a section."
@@ -12900,29 +12905,37 @@ const Panel = ({ item, onChange, onDelete }) => {
 				children: [/* @__PURE__ */ jsx(Typography.Title, {
 					className: "text-lg font-semibold",
 					children: item.name
-				}), onDelete && /* @__PURE__ */ jsx(Button, {
-					danger: true,
-					icon: /* @__PURE__ */ jsx(Trash, {}),
-					onClick: () => onDelete(item.id)
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-1",
+					children: [
+						onMoveUp && /* @__PURE__ */ jsx(Button, {
+							icon: /* @__PURE__ */ jsx(ChevronUp, {}),
+							disabled: !canMoveUp,
+							onClick: onMoveUp,
+							"aria-label": "Move section up"
+						}),
+						onMoveDown && /* @__PURE__ */ jsx(Button, {
+							icon: /* @__PURE__ */ jsx(ChevronDown, {}),
+							disabled: !canMoveDown,
+							onClick: onMoveDown,
+							"aria-label": "Move section down"
+						}),
+						onDelete && /* @__PURE__ */ jsx(Button, {
+							danger: true,
+							icon: /* @__PURE__ */ jsx(Trash, {}),
+							onClick: () => onDelete(item.id),
+							"aria-label": "Delete section"
+						})
+					]
 				})]
 			}),
-			!dataAttrNodes.length && /* @__PURE__ */ jsx(Typography.Text, {
+			!fields.length && /* @__PURE__ */ jsx(Typography.Text, {
 				className: "text-xs text-gray-400",
 				children: "No editable elements."
 			}),
-			dataAttrNodes.map((node, index) => /* @__PURE__ */ jsx(Node, {
+			fields.map((node, index) => /* @__PURE__ */ jsx(Node, {
 				data: node,
-				onChange: ({ id, label, value }) => {
-					const result = update(updatedCode, id, label, value);
-					if (!result.success) {
-						Toast.error("Failed to update this field", { description: "Check the console for details." });
-						return;
-					}
-					onChange?.({
-						...item,
-						code: result.code
-					});
-				}
+				onChange: onFieldChange
 			}, `${item.id}-${index}`))
 		]
 	});
@@ -12943,6 +12956,7 @@ const Dnd$1 = ({ value: _value, props, modules = {}, onChange: _onChange, classN
 	const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 10 } }));
 	const value = _value || DEFAULT_TEMPLATE;
 	const sections = useMemo(() => extractSections(value), [value]);
+	const selectedItem = useMemo(() => sections.find((s) => s.id === selectedId), [sections, selectedId]);
 	const [previewCache] = useState(() => createSectionPreviewCache());
 	const previews = useMemo(() => previewCache.compute(value, sections), [
 		previewCache,
@@ -13006,6 +13020,16 @@ const Dnd$1 = ({ value: _value, props, modules = {}, onChange: _onChange, classN
 		_onChange?.(nextCode);
 		setCode(nextCode);
 	};
+	const moveSection = (id, direction) => {
+		const index = sections.findIndex((s) => s.id === id);
+		const targetIndex = direction === "up" ? index - 1 : index + 1;
+		if (index < 0 || targetIndex < 0 || targetIndex >= sections.length) return;
+		const nextSections = arrayMove(sections, index, targetIndex);
+		const nextCode = replaceSections(value, nextSections.map((s) => s.code));
+		_onChange?.(nextCode);
+		setCode(nextCode);
+		setSelectedId(String(targetIndex));
+	};
 	const onCopy = (id) => {
 		const sectionIndex = sections.findIndex((s) => s.id === id);
 		const sectionToCopy = sections[sectionIndex];
@@ -13039,36 +13063,107 @@ const Dnd$1 = ({ value: _value, props, modules = {}, onChange: _onChange, classN
 		_onChange?.(nextCode);
 		setCode(nextCode);
 	};
+	const selectedCode = selectedItem?.code;
+	const { fields, updatedCode, parseError } = useMemo(() => {
+		if (!selectedCode) return {
+			fields: [],
+			updatedCode: "",
+			parseError: false
+		};
+		try {
+			const updated = fillIds(selectedCode);
+			return {
+				fields: extract(updated).filter((node) => node.tagName !== "section"),
+				updatedCode: updated !== selectedCode ? updated : selectedCode,
+				parseError: false
+			};
+		} catch (e) {
+			console.warn("⚠️ Parsing error", e);
+			return {
+				fields: [],
+				updatedCode: "",
+				parseError: true
+			};
+		}
+	}, [selectedCode]);
+	useEffect(() => {
+		if (parseError) Toast.error("Failed to parse this section", { description: "Check the console for details." });
+	}, [parseError]);
+	const onFieldChange = ({ id, label, value: fieldValue }) => {
+		const result = update(updatedCode, id, label, fieldValue);
+		if (!result.success) {
+			Toast.error("Failed to update this field", { description: "Check the console for details." });
+			return;
+		}
+		if (selectedItem) onChange({
+			...selectedItem,
+			code: result.code
+		});
+	};
+	const bindings = useMemo(() => {
+		return fields.flatMap((node) => {
+			const dataId = node.dataAttributes.find((a) => a.name === "data-id")?.value;
+			const bindingAttr = node.dataAttributes.find((a) => a.name === "data-binding")?.value;
+			if (!dataId || !bindingAttr) return [];
+			return (node.bindings ?? parseBinding(bindingAttr)).map((binding) => ({
+				id: dataId,
+				label: binding.label,
+				property: binding.property,
+				type: binding.type,
+				options: binding.options,
+				value: getCurrentValue(node, binding.property),
+				onChange: (value) => onFieldChange({
+					id: dataId,
+					label: binding.label,
+					value
+				})
+			}));
+		});
+	}, [fields]);
 	useEffect(() => {
 		if (frame?.scripts?.length) preloadScripts(frame.scripts);
 	}, [frame?.scripts]);
-	const renderPaletteItems = (onAdd) => {
+	const renderPaletteItems = (onAdd, forMobileDrawer = false) => {
 		const paletteItems = items?.length ? items : DRAGGABLE_ITEMS;
 		if (renderPalette) return renderPalette({
 			items: paletteItems,
 			onAdd,
-			DraggableItem
+			DraggableItem,
+			isMobile: forMobileDrawer
 		});
 		return /* @__PURE__ */ jsx(Space, {
 			orientation: "vertical",
 			align: "start",
 			children: paletteItems.map((item) => /* @__PURE__ */ jsx(DefaultDraggableItem, {
 				item,
-				onAdd
+				onAdd,
+				tapToAdd: forMobileDrawer
 			}, item.id))
 		});
 	};
 	const renderPanelContent = () => {
-		const selectedItem = sections.find((s) => s.id === selectedId);
+		const selectedIndex = sections.findIndex((s) => s.id === selectedId);
+		const canMoveUp = selectedIndex > 0;
+		const canMoveDown = selectedIndex >= 0 && selectedIndex < sections.length - 1;
 		if (renderPanel) return renderPanel({
 			item: selectedItem,
 			onChange,
-			onDelete
+			onDelete,
+			onMoveUp: () => moveSection(selectedId, "up"),
+			onMoveDown: () => moveSection(selectedId, "down"),
+			canMoveUp,
+			canMoveDown,
+			bindings
 		});
 		return /* @__PURE__ */ jsx(Panel, {
 			item: selectedItem,
-			onChange,
-			onDelete
+			onDelete,
+			onMoveUp: () => moveSection(selectedId, "up"),
+			onMoveDown: () => moveSection(selectedId, "down"),
+			canMoveUp,
+			canMoveDown,
+			fields,
+			onFieldChange
 		});
 	};
 	return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(DndContext, {
@@ -13148,7 +13243,7 @@ const Dnd$1 = ({ value: _value, props, modules = {}, onChange: _onChange, classN
 					children: renderPaletteItems((item) => {
 						addItem(item);
 						setMobilePaletteOpen(false);
-					})
+					}, true)
 				}),
 				/* @__PURE__ */ jsx(Drawer, {
 					open: isMobile && Boolean(selectedId),
@@ -13528,4 +13623,4 @@ App.Dnd = Dnd;
 //#endregion
 export { Dnd as LiveDnd, Editor as LiveEditor, Error$1 as LiveError, Preview as LivePreview, App as LiveProvider, App as default, LiveRenderer };
 
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.js.map