@jbpark/live-editor 1.16.3 → 1.17.0

package/dist/dnd/index.d.ts

@@ -1,2 +1,2 @@
-import { a as Props, c as DraggableItemProps, i as PanelRenderData, n as PaletteRenderData, o as DraggableItem, r as PanelBinding, s as DraggableItemDragState, t as Dnd } from "../index-CfuDi3An.js";
-export { DraggableItem, type DraggableItemDragState, type DraggableItemProps, type PaletteRenderData, type PanelBinding, type PanelRenderData, type Props, Dnd as default };
+import { a as PanelRenderData, c as DraggableItemDragState, i as PanelBinding, l as DraggableItemProps, n as ICON_MAP, o as Props, r as PaletteRenderData, s as DraggableItem, t as Dnd } from "../index-qdhllaw-.js";
+export { DraggableItem, type DraggableItemDragState, type DraggableItemProps, ICON_MAP, type PaletteRenderData, type PanelBinding, type PanelRenderData, type Props, Dnd as default };

package/dist/dnd/index.js

@@ -1,2 +1,2 @@
-import { n as DraggableItem, t as Dnd } from "../dnd-A3lFh7yx.js";
-export { DraggableItem, Dnd as default };
+import { n as ICON_MAP, r as DraggableItem, t as Dnd } from "../dnd-D8hsq1Fl.js";
+export { DraggableItem, ICON_MAP, Dnd as default };

package/dist/{dnd-A3lFh7yx.js → dnd-D8hsq1Fl.js}

@@ -1,11 +1,11 @@
-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 { d as replaceSections, o as extractSections, r as cn, s as generateSection, u as preloadScripts } from "./utils-BzfDKU6y.js";
+import { C as __toESM, b as DRAGGABLE_ITEMS, f as nanoid, g as BINDING_PROP, h as require_lib, m as require_lib$1, n as createSectionPreviewCache, r as fillSectionIds, y as DEFAULT_TEMPLATE } from "./document-DhMip8lL.js";
+import { d as replaceSections, o as extractSections, r as cn, s as generateSection, u as preloadScripts } from "./utils-CCrTYGUG.js";
 import { i as usePreview } from "./states-Ci1AvoQ9.js";
-import { 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 parseArrayExpression, x as generateCode, y as parseValue } from "./ast-DK9INzeu.js";
-import { n as useCompiledModule, r as Frame, t as useDynamicTailwind } from "./use-dynamic-tailwind-D-EEKBIy.js";
-import { n as Error, t as ErrorBoundary } from "./boundary-BWBdNmNi.js";
-import { t as Core } from "./core-B7igZRDs.js";
-import { memo, useEffect, useMemo, useRef, useState } from "react";
+import { _ as parseArrayExpression, b as generateCode, c as extract, d as parseBinding, f as arrayExpressionToCode, h as extractObjectProperties, i as replaceIds, l as findEditableChildren, m as extractNodeValue, n as clone, o as update, p as createNodeFromValue, r as fillIds, t as validateBindingValue, u as getCurrentValue, v as parseValue } from "./ast-Cyi-jw9Z.js";
+import { n as useCompiledModule, r as Frame, t as useDynamicTailwind } from "./use-dynamic-tailwind-DkK3r-as.js";
+import { n as Error, t as ErrorBoundary } from "./boundary-DUTt8lXq.js";
+import { t as Core } from "./core-ttOtjNaX.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 { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { DndContext, DragOverlay, PointerSensor, closestCenter, useDndContext, useDraggable, useDroppable, useSensor, useSensors } from "@dnd-kit/core";
@@ -13,7 +13,6 @@ import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
 import { SortableContext, arrayMove, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
 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 { v4 } from "uuid";
 import { CSS } from "@dnd-kit/utilities";
 import Placeholder from "@tiptap/extension-placeholder";
 import { EditorContent, useEditor } from "@tiptap/react";
@@ -1167,7 +1166,7 @@ const Field = ({ binding, id, value, onChange }) => {
 		className: "mt-1 text-xs text-red-500",
 		children: validationError
 	})] });
-	if (binding.type === "icon-picker") {
+	if (binding.widget === "icon-picker" || binding.type === "icon-picker") {
 		const SelectedIcon = ICON_MAP[stringValue];
 		return /* @__PURE__ */ jsxs("div", {
 			className: "flex items-center gap-2",
@@ -1188,7 +1187,7 @@ const Field = ({ binding, id, value, onChange }) => {
 			})]
 		});
 	}
-	if (binding.type === "asset-picker") {
+	if (binding.widget === "asset-picker" || binding.type === "asset-picker") {
 		const defaultUploadValue = stringValue ? [{
 			uid: "current",
 			name: stringValue.split("/").pop() || "asset",
@@ -1373,6 +1372,90 @@ const Panel = ({ item, onDelete, onMoveUp, onMoveDown, canMoveUp = false, canMov
 	});
 };
 //#endregion
+//#region src/components/dnd/use-section-document.ts
+const useSectionDocument = (value, onChange) => {
+	const { setCode } = usePreview();
+	const [selectedId, setSelectedId] = useState(null);
+	const document = useMemo(() => fillSectionIds(value), [value]);
+	const sections = useMemo(() => extractSections(document), [document]);
+	const [previewCache] = useState(() => createSectionPreviewCache());
+	const previews = useMemo(() => previewCache.compute(document, sections), [
+		previewCache,
+		sections,
+		document
+	]);
+	const selectedIndex = sections.findIndex((s) => s.id === selectedId);
+	const selectedItem = selectedIndex >= 0 ? sections[selectedIndex] : void 0;
+	const commit = useCallback((nextSections) => {
+		const nextCode = fillSectionIds(replaceSections(document, nextSections.map((s) => s.code)));
+		onChange?.(nextCode);
+		setCode(nextCode);
+		return extractSections(nextCode);
+	}, [
+		document,
+		onChange,
+		setCode
+	]);
+	return {
+		sections,
+		previews,
+		selectedId,
+		selectedItem,
+		selectedIndex,
+		select: useCallback((id) => {
+			setSelectedId((prev) => prev === id ? null : id);
+		}, []),
+		clearSelection: useCallback(() => setSelectedId(null), []),
+		add: useCallback((item, atIndex) => {
+			const next = { code: item.code };
+			commit(atIndex === void 0 || atIndex < 0 ? [...sections, next] : [
+				...sections.slice(0, atIndex),
+				next,
+				...sections.slice(atIndex)
+			]);
+		}, [commit, sections]),
+		remove: useCallback((id) => {
+			const index = sections.findIndex((s) => s.id === id);
+			if (index < 0) return;
+			if (id === selectedId) setSelectedId(null);
+			commit(sections.filter((_, i) => i !== index));
+		}, [
+			commit,
+			sections,
+			selectedId
+		]),
+		copy: useCallback((id) => {
+			const index = sections.findIndex((s) => s.id === id);
+			const source = sections[index];
+			if (!source) return;
+			const committed = commit([
+				...sections.slice(0, index + 1),
+				{ code: replaceIds(source.code) },
+				...sections.slice(index + 1)
+			]);
+			setSelectedId(committed[index + 1]?.id ?? null);
+		}, [commit, sections]),
+		move: useCallback((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;
+			commit(arrayMove(sections, index, targetIndex));
+		}, [commit, sections]),
+		reorder: useCallback((activeId, overId) => {
+			const prevIndex = sections.findIndex((s) => s.id === activeId);
+			const nextIndex = sections.findIndex((s) => s.id === overId);
+			if (prevIndex < 0 || nextIndex < 0 || prevIndex === nextIndex) return;
+			commit(arrayMove(sections, prevIndex, nextIndex));
+		}, [commit, sections]),
+		patch: useCallback((next) => {
+			commit(sections.map((s) => s.id === next.id ? {
+				...s,
+				...next
+			} : s));
+		}, [commit, sections])
+	};
+};
+//#endregion
 //#region src/components/dnd/dnd.tsx
 const conditionalModifiers = (args) => {
 	const { active } = args;
@@ -1380,120 +1463,30 @@ const conditionalModifiers = (args) => {
 	return restrictToVerticalAxis(args);
 };
 const Dnd$1 = ({ value: _value, props, modules = {}, onChange: _onChange, className, items = [], frame, dynamicTailwind = false, provider, renderPalette, renderPanel, ...restProps }) => {
-	const [selectedId, setSelectedId] = useState(null);
 	const [mobilePaletteOpen, setMobilePaletteOpen] = useState(false);
 	const { breakpoint } = useResponsiveSize();
 	const isMobile = breakpoint.current === "xs" || breakpoint.current === "sm";
-	const { code, setCode } = usePreview();
+	const { code } = usePreview();
 	const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 10 } }));
 	const value = _value || code || 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,
-		sections,
-		value
-	]);
+	const { sections, previews, selectedId, selectedItem, selectedIndex, select, clearSelection, add: addItem, remove: onDelete, copy: onCopy, move: moveSection, reorder, patch } = useSectionDocument(value, _onChange);
 	const onDragStart = (_) => {};
 	const onDragOver = (_e) => {};
 	const onDragEnd = (event) => {
 		const { active, over } = event;
 		if (!over) return;
 		if (active.data.current?.type === "new-item") {
-			const newItem = active.data.current.item;
-			const newSection = {
-				id: v4(),
-				name: newItem.name,
-				code: newItem.code
-			};
-			let nextSections;
-			if (over.id === "sortable-area" || over.id === "sortable-area-bottom") nextSections = [...sections, newSection];
-			else {
-				const overIndex = sections.findIndex((s) => s.id === over.id);
-				if (overIndex >= 0) nextSections = [
-					...sections.slice(0, overIndex),
-					newSection,
-					...sections.slice(overIndex)
-				];
-				else nextSections = [...sections, newSection];
-			}
-			const nextCode = replaceSections(value, nextSections.map((s) => s.code));
-			_onChange?.(nextCode);
-			setCode(nextCode);
+			const item = active.data.current.item;
+			const atBottom = over.id === "sortable-area" || over.id === "sortable-area-bottom";
+			addItem(item, atBottom ? void 0 : sections.findIndex((s) => s.id === over.id));
 			return;
 		}
-		if (active.id !== over.id && sections.some((s) => s.id === active.id)) {
-			const prevIndex = sections.findIndex((s) => s.id === active.id);
-			const nextIndex = sections.findIndex((s) => s.id === over.id);
-			if (prevIndex >= 0 && nextIndex >= 0) {
-				const nextSections = arrayMove(sections, prevIndex, nextIndex);
-				const nextCode = replaceSections(value, nextSections.map((s) => s.code));
-				_onChange?.(nextCode);
-				setCode(nextCode);
-			}
-		}
-	};
-	const addItem = (item) => {
-		const newSection = {
-			id: v4(),
-			name: item.name,
-			code: item.code
-		};
-		const nextSections = [...sections, newSection];
-		const nextCode = replaceSections(value, nextSections.map((s) => s.code));
-		_onChange?.(nextCode);
-		setCode(nextCode);
-	};
-	const onDelete = (id) => {
-		const nextSections = sections.filter((s) => s.id !== id);
-		setSelectedId(null);
-		const nextCode = replaceSections(value, nextSections.map((s) => s.code));
-		_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];
-		if (sectionToCopy) {
-			const nextId = v4();
-			const nextSection = {
-				id: nextId,
-				code: replaceIds(sectionToCopy.code),
-				name: sectionToCopy.name
-			};
-			const nextSections = [
-				...sections.slice(0, sectionIndex + 1),
-				nextSection,
-				...sections.slice(sectionIndex + 1)
-			];
-			setSelectedId(nextId);
-			const nextCode = replaceSections(value, nextSections.map((s) => s.code));
-			_onChange?.(nextCode);
-			setCode(nextCode);
-		}
-	};
-	const onSelect = (id) => {
-		setSelectedId((prev) => prev === id ? null : id);
+		if (active.id !== over.id && sections.some((s) => s.id === active.id)) reorder(String(active.id), String(over.id));
 	};
+	const onSelect = (id) => select(id);
 	const onChange = (next) => {
-		const nextSections = sections.map((s) => s.id === next.id ? {
-			...s,
-			...next
-		} : s);
-		const nextCode = replaceSections(value, nextSections.map((s) => s.code));
-		_onChange?.(nextCode);
-		setCode(nextCode);
+		if (!next.id) return;
+		patch(next);
 	};
 	const selectedCode = selectedItem?.code;
 	const { fields, updatedCode, parseError } = useMemo(() => {
@@ -1542,6 +1535,7 @@ const Dnd$1 = ({ value: _value, props, modules = {}, onChange: _onChange, classN
 				label: binding.label,
 				property: binding.property,
 				type: binding.type,
+				widget: binding.widget,
 				options: binding.options,
 				render: binding.render,
 				min: binding.min,
@@ -1580,7 +1574,6 @@ const Dnd$1 = ({ value: _value, props, modules = {}, onChange: _onChange, classN
 		});
 	};
 	const renderPanelContent = () => {
-		const selectedIndex = sections.findIndex((s) => s.id === selectedId);
 		const canMoveUp = selectedIndex > 0;
 		const canMoveDown = selectedIndex >= 0 && selectedIndex < sections.length - 1;
 		if (renderPanel) return renderPanel({
@@ -1686,7 +1679,7 @@ const Dnd$1 = ({ value: _value, props, modules = {}, onChange: _onChange, classN
 				}),
 				/* @__PURE__ */ jsx(Drawer, {
 					open: isMobile && Boolean(selectedId),
-					onClose: () => setSelectedId(null),
+					onClose: clearSelection,
 					direction: "bottom",
 					size: "large",
 					title: "Properties",
@@ -1710,6 +1703,6 @@ const Dnd$1 = ({ value: _value, props, modules = {}, onChange: _onChange, classN
 const Dnd = Dnd$1;
 Dnd.DraggableItem = DraggableItem;
 //#endregion
-export { DraggableItem as n, Dnd as t };
+export { ICON_MAP as n, DraggableItem as r, Dnd as t };
 
-//# sourceMappingURL=dnd-A3lFh7yx.js.map
+//# sourceMappingURL=dnd-D8hsq1Fl.js.map