@jbpark/live-editor 1.1.0 → 1.3.0

package/dist/index.mjs

@@ -1,18 +1,19 @@
-import { S as __toESM, _ as findEditableChildren, b as require_lib$1, c as extract, d as createNodeFromValue, f as extractNodeValue, g as generateCode, h as parseValue, i as replaceIds, l as nanoid, m as parseArrayExpression, n as clone, o as update, p as extractObjectProperties, r as fillIds, t as validateBindingValue, u as arrayExpressionToCode, v as getCurrentValue, x as require_lib, y as parseBinding } from "./ast-UXy9dqvD.mjs";
+import { S as __toESM, _ as parseArrayExpression, b as require_lib$1, 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, x as require_lib, y as generateCode } from "./ast-fX6Whrjc.mjs";
 import { a as DRAGGABLE_ITEMS, i as DEFAULT_TEMPLATE, t as BINDING_PROP } from "./enums-3yleLgqV.mjs";
 import { a as detectTypeScript, c as getCachedScriptBlob, i as compile, l as preloadScripts, n as clearCompilationCache, o as extractSections, r as cn, s as generateSection, t as baseModules, u as replaceSections } from "./utils-INSWI9h0.mjs";
 import { generateTailwindCSS } from "./utils/tailwind/index.mjs";
 import "@jbpark/ui-kit/style.css";
 import React, { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { Button, Card, Checkbox, ColorPicker, DatePicker, Input, Select, Space, Typography, Upload } from "@jbpark/ui-kit";
+import { Button, Card, Checkbox, ColorPicker, DatePicker, Drawer, Input, Select, Space, 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";
 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, 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";
-import { AlertCircle, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Bell, Bookmark, Calendar, Camera, Check, ChevronDown, ChevronRight, Clock, Copy, Download, Edit, Eye, Filter, Heart, Home, Image, Info, 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 { javascript } from "@codemirror/lang-javascript";
 import { vscodeLight } from "@uiw/codemirror-theme-vscode";
 import CodeMirror from "@uiw/react-codemirror";
@@ -23,7 +24,6 @@ import prettierPluginTypeScript from "prettier/plugins/typescript";
 import Placeholder from "@tiptap/extension-placeholder";
 import { EditorContent, useEditor } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
-import { useDebounce, useMultiSelect } from "@jbpark/use-hooks";
 
 //#region src/components/context/states.ts
 const PreviewContext = createContext({
@@ -12571,6 +12571,9 @@ const conditionalModifiers = (args) => {
 };
 const Dnd = ({ value: _value, props, modules = {}, onChange: _onChange, className, items = [], frame, provider, ...restProps }) => {
 	const [selectedId, setSelectedId] = useState(null);
+	const [mobilePaletteOpen, setMobilePaletteOpen] = useState(false);
+	const { breakpoint } = useResponsiveSize();
+	const isMobile = breakpoint.current === "xs" || breakpoint.current === "sm";
 	const { setCode } = usePreview();
 	const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 10 } }));
 	const value = _value || DEFAULT_TEMPLATE;
@@ -12665,6 +12668,14 @@ const Dnd = ({ value: _value, props, modules = {}, onChange: _onChange, classNam
 	useEffect(() => {
 		if (frame?.scripts?.length) preloadScripts(frame.scripts);
 	}, [frame?.scripts]);
+	const renderPaletteItems = (onAdd) => /* @__PURE__ */ jsx(Space, {
+		orientation: "vertical",
+		align: "start",
+		children: (items?.length ? items : DRAGGABLE_ITEMS).map((item) => /* @__PURE__ */ jsx(Draggable, {
+			item,
+			onAdd
+		}, item.id))
+	});
 	return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(DndContext, {
 		sensors,
 		collisionDetection: closestCenter,
@@ -12673,25 +12684,18 @@ const Dnd = ({ value: _value, props, modules = {}, onChange: _onChange, classNam
 		onDragOver,
 		onDragEnd,
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: cn("flex w-full", className),
+			className: cn("relative flex w-full", className),
 			...restProps,
 			children: [
 				/* @__PURE__ */ jsx("div", {
-					className: "w-1/5 overflow-y-auto",
+					className: "hidden w-1/5 overflow-y-auto md:block",
 					children: /* @__PURE__ */ jsx("div", {
 						className: "h-full bg-gray-50 p-4",
-						children: /* @__PURE__ */ jsx(Space, {
-							orientation: "vertical",
-							align: "start",
-							children: (items?.length ? items : DRAGGABLE_ITEMS).map((item) => /* @__PURE__ */ jsx(Draggable, {
-								item,
-								onAdd: addItem
-							}, item.id))
-						})
+						children: renderPaletteItems(addItem)
 					})
 				}),
 				/* @__PURE__ */ jsx("div", {
-					className: cn("relative", "h-full w-3/5", "overflow-y-auto"),
+					className: cn("relative", "h-full w-full md:w-3/5", "overflow-y-auto"),
 					"data-frame-container": true,
 					style: {
 						isolation: "isolate",
@@ -12730,7 +12734,37 @@ const Dnd = ({ value: _value, props, modules = {}, onChange: _onChange, classNam
 					})
 				}),
 				/* @__PURE__ */ jsx("div", {
-					className: "w-1/5",
+					className: "hidden w-1/5 md:block",
+					children: /* @__PURE__ */ jsx(Panel, {
+						item: sections.find((s) => s.id === selectedId),
+						onChange
+					})
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					type: "primary",
+					shape: "circle",
+					icon: /* @__PURE__ */ jsx(LayoutGrid, {}),
+					"aria-label": "Components",
+					className: "fixed right-4 bottom-4 z-20 md:hidden",
+					onClick: () => setMobilePaletteOpen(true)
+				}),
+				/* @__PURE__ */ jsx(Drawer, {
+					open: isMobile && mobilePaletteOpen,
+					onClose: () => setMobilePaletteOpen(false),
+					direction: "bottom",
+					size: "large",
+					title: "Components",
+					children: renderPaletteItems((item) => {
+						addItem(item);
+						setMobilePaletteOpen(false);
+					})
+				}),
+				/* @__PURE__ */ jsx(Drawer, {
+					open: isMobile && Boolean(selectedId),
+					onClose: () => setSelectedId(null),
+					direction: "bottom",
+					size: "large",
+					title: "Properties",
 					children: /* @__PURE__ */ jsx(Panel, {
 						item: sections.find((s) => s.id === selectedId),
 						onChange