@alpaca-editor/core 1.0.0 → 1.0.3764-editor-mono

package/dist/editor/ui/ItemSearch.js

@@ -0,0 +1,93 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ItemSearch = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const inputtext_1 = require("primereact/inputtext");
+const react_1 = require("react");
+const editContext_1 = require("../client/editContext");
+const aiService_1 = require("../services/aiService");
+const use_debounce_1 = require("use-debounce");
+const progressspinner_1 = require("primereact/progressspinner");
+const utils_1 = require("../utils");
+const ItemSearch = ({ rootItemIds, setHoveredItem, itemSelected, language, resultClassName, autoFocus = false, }) => {
+    const [query, setQuery] = (0, react_1.useState)("");
+    const [results, setResults] = (0, react_1.useState)([]);
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const editContext = (0, editContext_1.useEditContext)();
+    const inputRef = (0, react_1.useRef)(null);
+    const handleSearch = (0, use_debounce_1.useDebouncedCallback)(async (searchPrompt) => {
+        if (!editContext)
+            return;
+        setLoading(true);
+        const currentQuery = searchPrompt;
+        const guidPattern = /^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$/;
+        if (guidPattern.test(searchPrompt)) {
+            const item = await editContext.itemsRepository.getItem({
+                id: searchPrompt,
+                language: language || "en",
+                version: 0,
+            });
+            if (item) {
+                if (query === currentQuery) {
+                    itemSelected({
+                        ...(0, utils_1.getItemDescriptor)(item),
+                        path: item.path || item.name,
+                        idPath: item.idPath,
+                        icon: item.icon,
+                        name: item.name,
+                    });
+                    setLoading(false);
+                }
+            }
+            return;
+        }
+        const result = await (0, aiService_1.executeSearch)({
+            index: "master",
+            query: searchPrompt,
+            editContext,
+            rootItemIds,
+            maxResults: 6,
+        });
+        if (query === currentQuery) {
+            if (result.type == "success") {
+                setResults(() => result.data);
+            }
+            else {
+                editContext.showToast({
+                    severity: "error",
+                    summary: "Error searching",
+                    detail: result.response.statusText,
+                });
+            }
+        }
+        setLoading(false);
+    }, 600);
+    (0, react_1.useEffect)(() => {
+        if (query) {
+            setLoading(true);
+            handleSearch(query);
+        }
+        else {
+            setResults([]);
+        }
+    }, [query]);
+    (0, react_1.useEffect)(() => {
+        if (inputRef.current && autoFocus) {
+            inputRef.current.focus();
+        }
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "relative", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center", children: [(0, jsx_runtime_1.jsx)(inputtext_1.InputText, { className: "w-full text-sm pr-8" // Add padding to the right to make space for the spinner
+                            , onChange: (e) => setQuery(e.target.value), value: query, ref: inputRef }), !loading && !query && ((0, jsx_runtime_1.jsx)("i", { className: "pi pi-search px-3 text-gray-500" })), !loading && query && ((0, jsx_runtime_1.jsx)("i", { className: "pi pi-times px-3 cursor-pointer text-gray-500", onClick: () => setQuery("") })), loading && ((0, jsx_runtime_1.jsx)(progressspinner_1.ProgressSpinner, { style: { width: "24px", height: "24px", margin: "0 12px" } }))] }) }), results.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: `overflow-y-auto flex flex-col gap-1 flex-1 mt-1 ${resultClassName}`, children: results
+                    .filter((x) => x.language)
+                    .slice(0, 6)
+                    .map((x) => ((0, jsx_runtime_1.jsxs)("div", { className: "text-xs cursor-pointer hover:text-gray-400 flex gap-1 items-start", onMouseEnter: () => setHoveredItem?.(x), onMouseLeave: () => setHoveredItem?.(undefined), onClick: () => itemSelected({
+                        id: x.id,
+                        language: x.language,
+                        version: 0,
+                        path: x.path,
+                        icon: x.icon,
+                        idPath: x.idPath,
+                    }), children: [x.icon && (0, jsx_runtime_1.jsx)("img", { src: x.icon, width: "16", height: "16" }), " ", x.path, " ", (0, jsx_runtime_1.jsxs)("span", { className: "text-500", children: ["(", x.language, ")"] })] }, x.id + x.language))) })), results.length === 0 && !loading && query && ((0, jsx_runtime_1.jsx)("div", { className: "text-xs text-gray-500 mt-1", children: "No results found" }))] }));
+};
+exports.ItemSearch = ItemSearch;
+exports.default = exports.ItemSearch;

package/dist/editor/ui/PerfectTree.js

@@ -0,0 +1,223 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PerfectTree = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const progressspinner_1 = require("primereact/progressspinner");
+// Local DropZone component to handle drag-over state.
+const DropZone = (0, react_1.memo)(({ parent, index, isDragging, onDragOverZone, onDrop, onDragEnd, isLast, }) => {
+    const [isDragOver, setIsDragOver] = react_1.default.useState(false);
+    const handleDragEnter = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (onDragOverZone) {
+            const allowed = onDragOverZone(parent, index, e);
+            setIsDragOver(allowed);
+            e.dataTransfer.dropEffect = allowed ? "move" : "none";
+        }
+    }, [onDragOverZone, parent, index]);
+    const handleDragLeave = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragOver(false);
+    }, []);
+    const handleDragOver = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (onDragOverZone) {
+            const allowed = onDragOverZone(parent, index, e);
+            setIsDragOver(allowed);
+        }
+    }, [onDragOverZone, parent, index]);
+    const handleDrop = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragOver(false);
+        if (onDrop) {
+            onDrop(parent, index, e);
+        }
+    }, [onDrop, parent, index]);
+    if (!isDragging)
+        return null;
+    return ((0, jsx_runtime_1.jsx)("div", { className: `relative ${isLast ? "h-3" : ""}`, children: (0, jsx_runtime_1.jsx)("div", { className: `drop-zone absolute top-[-5px] right-0 left-[45px] z-1000 h-3 rounded-md transition-colors duration-100 ${isDragOver ? "bg-sky-200" : ""}`, onDragEnter: handleDragEnter, onDragOver: handleDragOver, onDrop: handleDrop, onDragLeave: handleDragLeave }) }));
+});
+// NodeContent component extracted and memoized
+const NodeContent = (0, react_1.memo)(({ node, isExpanded, isSelected, onSelect, onToggleNode, onStartDrag, onDragEnd, onDragOverZone, onDrop, onDoubleClick, renderNode, onContextMenu, enableDragAndDrop = false, selectedKeys, isDragging, }) => {
+    const [isDragOver, setIsDragOver] = react_1.default.useState(false);
+    (0, react_1.useEffect)(() => {
+        if (!isDragging) {
+            setIsDragOver(false);
+        }
+    }, [isDragging]);
+    const handleDragStart = (0, react_1.useCallback)((event) => {
+        const isMultiSelect = isSelected && selectedKeys && selectedKeys.length > 1;
+        // Set drag preview for multiple items if applicable
+        if (isMultiSelect) {
+            // Create custom drag image showing count of selected items
+            const dragPreview = document.createElement("div");
+            dragPreview.className =
+                "bg-white shadow-md rounded-md border border-gray-300 px-2 py-1 text-sm max-w-24 absolute top-[-1000px] left-[-1000px]";
+            dragPreview.innerHTML = `<div class="flex items-center"><span class="font-bold mr-1">${selectedKeys.length}</span> items</div>`;
+            document.body.appendChild(dragPreview);
+            // Set custom drag image
+            event.dataTransfer.setDragImage(dragPreview, 15, 15);
+            // Remove the element after drag starts
+            setTimeout(() => {
+                console.log("removing drag preview");
+                document.body.removeChild(dragPreview);
+            }, 0);
+        }
+        if (onStartDrag) {
+            onStartDrag({ node, event, isMultiSelect: isMultiSelect ?? false });
+        }
+    }, [node, onStartDrag]);
+    const handleDragLeave = (0, react_1.useCallback)((event) => {
+        event.preventDefault();
+        setIsDragOver(false);
+    }, []);
+    const handleDragEnter = (0, react_1.useCallback)((event) => {
+        event.preventDefault();
+        if (onDragOverZone) {
+            const allowed = onDragOverZone(node, -1, event);
+            setIsDragOver(allowed);
+        }
+    }, [node, onDragOverZone]);
+    const handleDragOver = (0, react_1.useCallback)((event) => {
+        event.preventDefault();
+        if (onDragOverZone) {
+            const allowed = onDragOverZone(node, -1, event);
+            setIsDragOver(allowed);
+            event.dataTransfer.dropEffect = allowed ? "move" : "none";
+        }
+    }, [node, onDragOverZone]);
+    const handleDrop = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (onDrop) {
+            onDrop(node, -1, e);
+        }
+    }, [node, onDrop]);
+    const handleDoubleClick = (0, react_1.useCallback)((e) => {
+        e.stopPropagation();
+        onDoubleClick?.(node);
+    }, [node, onDoubleClick]);
+    const handleSelect = (0, react_1.useCallback)((e) => {
+        e.stopPropagation();
+        onSelect(node.key, e);
+    }, [node.key, onSelect]);
+    const handleToggle = (0, react_1.useCallback)((e) => {
+        e.stopPropagation();
+        onToggleNode(node);
+    }, [node, onToggleNode]);
+    const renderToggle = () => {
+        if (node.hasChildren && node.children === null) {
+            return ((0, jsx_runtime_1.jsx)(progressspinner_1.ProgressSpinner, { style: { width: "18px", height: "18px", margin: "0 2px" }, className: "text-gray-500" }));
+        }
+        return ((0, jsx_runtime_1.jsx)("span", { onClick: handleToggle, className: `mr-2 inline-block transform cursor-pointer transition duration-150 select-none ${isExpanded ? "rotate-90" : "rotate-0"}`, children: (0, jsx_runtime_1.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", "data-pc-section": "togglericon", children: (0, jsx_runtime_1.jsx)("path", { d: "M4.38708 13C4.28408 13.0005 4.18203 12.9804 4.08691 12.9409C3.99178 12.9014 3.9055 12.8433 3.83313 12.7701C3.68634 12.6231 3.60388 12.4238 3.60388 12.2161C3.60388 12.0084 3.68634 11.8091 3.83313 11.6622L8.50507 6.99022L3.83313 2.31827C3.69467 2.16968 3.61928 1.97313 3.62287 1.77005C3.62645 1.56698 3.70872 1.37322 3.85234 1.22959C3.99596 1.08597 4.18972 1.00371 4.3928 1.00012C4.59588 0.996539 4.79242 1.07192 4.94102 1.21039L10.1669 6.43628C10.3137 6.58325 10.3962 6.78249 10.3962 6.99022C10.3962 7.19795 10.3137 7.39718 10.1669 7.54416L4.94102 12.7701C4.86865 12.8433 4.78237 12.9014 4.68724 12.9409C4.59212 12.9804 4.49007 13.0005 4.38708 13Z", fill: "currentColor" }) }) }));
+    };
+    const handleContextMenu = (0, react_1.useCallback)((e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        onContextMenu?.(node, e);
+    }, [node, onContextMenu]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "tree-node mb-0.5 flex cursor-pointer items-center", draggable: enableDragAndDrop, onClick: handleSelect, onDragStart: (event) => handleDragStart(event), onDragEnd: onDragEnd, onDragLeave: handleDragLeave, onDragEnter: handleDragEnter, onDragOver: handleDragOver, onDrop: handleDrop, onDoubleClick: handleDoubleClick, onContextMenu: handleContextMenu, children: [node.hasChildren || node.children?.length ? (renderToggle()) : ((0, jsx_runtime_1.jsx)("div", { className: "w-6" })), (0, jsx_runtime_1.jsx)("div", { className: `rounded-md border border-transparent p-0.5 hover:border-gray-300 ${isDragOver ? "bg-sky-200" : isSelected ? "bg-blue-100" : ""}`, onClick: handleSelect, children: renderNode(node) })] }));
+});
+const PerfectTree = ({ nodes, selectedKeys = [], expandedKeys = [], renderNode, onToggleExpand, onSelect, onDragOverZone, onDrop, isDragging = false, onStartDrag, onDragEnd, onLazyLoad, onDoubleClick, onContextMenu, enableDragAndDrop = false, }) => {
+    // When toggling a node, notify parent and trigger external lazy load if needed.
+    const handleToggle = (0, react_1.useCallback)((node) => {
+        if (onToggleExpand) {
+            onToggleExpand(node.key);
+        }
+        // If the node is expandable and its children haven't been loaded,
+        // call onLazyLoad (external async loading should update the node to `null` while loading)
+        if (node.hasChildren && node.children === undefined && onLazyLoad) {
+            onLazyLoad(node);
+        }
+    }, [onToggleExpand, onLazyLoad]);
+    const handleSelect = (0, react_1.useCallback)((nodeKey, event) => {
+        if (onSelect) {
+            onSelect(nodeKey, event);
+        }
+    }, [onSelect]);
+    // Global drag end handler.
+    const isDraggingRef = react_1.default.useRef(false);
+    (0, react_1.useEffect)(() => {
+        const handleGlobalDragEnd = (event) => {
+            if (isDraggingRef.current && onDragEnd) {
+                onDragEnd(event);
+                isDraggingRef.current = false;
+            }
+        };
+        document.addEventListener("dragend", handleGlobalDragEnd);
+        return () => {
+            document.removeEventListener("dragend", handleGlobalDragEnd);
+        };
+    }, [onDragEnd]);
+    const handleDragEnd = (0, react_1.useCallback)((event) => {
+        isDraggingRef.current = false;
+        if (onDragEnd) {
+            onDragEnd(event);
+        }
+    }, [onDragEnd]);
+    // Recursive function to render tree nodes along with drop zones.
+    const renderTreeList = (0, react_1.useCallback)((nodes, depth, parent = null) => {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col", children: [nodes.map((node, index) => {
+                    const children = node.children;
+                    const isExpanded = expandedKeys.includes(node.key);
+                    const isSelected = selectedKeys.includes(node.key);
+                    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(DropZone, { parent: parent, index: index, isDragging: isDragging, onDragOverZone: onDragOverZone, onDrop: onDrop, onDragEnd: onDragEnd }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                    marginLeft: depth > 0 ? "21px" : undefined,
+                                }, className: "flex flex-col", children: [(0, jsx_runtime_1.jsx)(NodeContent, { node: node, isExpanded: isExpanded, isSelected: isSelected, onSelect: handleSelect, onToggleNode: handleToggle, onStartDrag: onStartDrag, onDragEnd: handleDragEnd, onDragOverZone: onDragOverZone, onDrop: onDrop, onDoubleClick: onDoubleClick, onContextMenu: onContextMenu, renderNode: renderNode, enableDragAndDrop: enableDragAndDrop, selectedKeys: selectedKeys, isDragging: isDragging }), isExpanded && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children && children.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { children: renderTreeList(children, depth + 1, node) })) : null }))] })] }, node.key));
+                }), (0, jsx_runtime_1.jsx)(DropZone, { parent: parent, index: nodes.length, isDragging: isDragging, onDragOverZone: onDragOverZone, onDrop: onDrop, onDragEnd: onDragEnd, isLast: true })] }));
+    }, [
+        expandedKeys,
+        selectedKeys,
+        isDragging,
+        onDragOverZone,
+        onDrop,
+        onDragEnd,
+        onStartDrag,
+        onDoubleClick,
+        handleSelect,
+        handleToggle,
+        renderNode,
+    ]);
+    // Memoize the tree structure
+    const treeContent = (0, react_1.useMemo)(() => renderTreeList(nodes, 0), [nodes, renderTreeList]);
+    return (0, jsx_runtime_1.jsx)("div", { children: treeContent });
+};
+exports.PerfectTree = PerfectTree;
+exports.default = (0, react_1.memo)(exports.PerfectTree);

package/dist/editor/ui/Section.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Section = Section;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("primereact/utils");
+const utils_2 = require("../utils");
+function Section({ title, children, }) {
+    const [open, setOpen] = (0, utils_2.useLocalStorage)("editor.showSection-" + title, true);
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.classNames)(open
+                    ? "border-blue-500 bg-gray-600"
+                    : "border-gray-400 bg-gray-400 hover:bg-gray-500 hover:border-gray-300", "py-2.5 px-3 border-l-[8px] text-white text-xs cursor-pointer flex justify-between items-center"), onClick: () => setOpen(!open), children: [title, (0, jsx_runtime_1.jsx)("i", { className: (0, utils_1.classNames)(open ? "pi-chevron-up" : "pi-chevron-down", "pi cursor-pointer text-xs") })] }), open && (0, jsx_runtime_1.jsx)("div", { className: "pt-4 pb-6 px-2 bg-gray-50", children: children })] }));
+}

package/dist/editor/ui/SimpleIconButton.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SimpleIconButton = SimpleIconButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("primereact/utils");
+function SimpleIconButton({ onClick, className, icon, label, disabled, size, id, selected, }) {
+    return ((0, jsx_runtime_1.jsx)("button", { id: id, disabled: disabled, className: (0, utils_1.classNames)(typeof icon === "string" ? icon + " p-[6px]" : "p-[4px]", "  rounded-full", disabled ? "text-gray-300" : " hover:bg-gray-200  cursor-pointer", className, size === "large" ? "text-lg" : "text-xs", selected ? "bg-gray-200" : ""), onClick: (ev) => {
+            if (!disabled)
+                onClick(ev);
+        }, title: label, children: typeof icon !== "string" && icon }));
+}

package/dist/editor/ui/SimpleMenu.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SimpleMenu = SimpleMenu;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function SimpleMenu({ items, activeItemKey, onItemClick, }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col p-1 h-full", children: items.map((item, index) => ((0, jsx_runtime_1.jsxs)("div", { className: "p-2 h-full flex flex-col gap-1", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-row items-center gap-2 border-b border-gray-200 pb-1 pl-2", children: [item.icon && item.icon, item.label] }), item.items?.map((subItem, subIndex) => ((0, jsx_runtime_1.jsx)("div", { className: `flex flex-col px-4 p-1 cursor-pointer hover:bg-gray-100 ${activeItemKey === subItem.key ? "bg-gray-100" : ""}`, onClick: () => {
+                        onItemClick(subItem);
+                    }, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-row items-center gap-2 text-sm", children: [subItem.icon && subItem.icon, subItem.label] }) }, subIndex)))] }, index))) }));
+}

package/dist/editor/ui/SimpleTable.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SimpleTable = SimpleTable;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("primereact/utils");
+function SimpleTable({ items, columns, onRowHover, onRowClick, rowClassName, }) {
+    return ((0, jsx_runtime_1.jsxs)("table", { className: "table-auto min-w-full text-left text-xs font-light text-surface", children: [(0, jsx_runtime_1.jsx)("thead", { className: "border-b border-neutral-200 font-medium", children: (0, jsx_runtime_1.jsx)("tr", { children: columns.map((col, index) => ((0, jsx_runtime_1.jsx)("th", { className: "px-2 py-3", children: col.header }, index))) }) }), (0, jsx_runtime_1.jsx)("tbody", { children: items.map((item, index) => ((0, jsx_runtime_1.jsx)("tr", { className: (0, utils_1.classNames)("border-b border-neutral-200", onRowClick ? "cursor-pointer hover:bg-neutral-100" : "", rowClassName ? rowClassName(item) : ""), onClick: (ev) => {
+                        if (onRowClick)
+                            onRowClick({ item, event: ev });
+                    }, onMouseOver: () => onRowHover?.(item), onMouseLeave: () => onRowHover?.(undefined), children: columns.map((col, index) => ((0, jsx_runtime_1.jsx)("td", { className: (0, utils_1.classNames)("px-2 py-2", col.className), children: col.body(item) }, index))) }, index))) })] }));
+}

package/dist/editor/ui/SimpleTabs.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SimpleTabs = SimpleTabs;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const tailwind_merge_1 = require("tailwind-merge");
+function SimpleTabs({ tabs, setActiveTab, activeTab, className, }) {
+    if (activeTab > tabs.length - 1) {
+        activeTab = 0;
+    }
+    if (activeTab < 0) {
+        activeTab = 0;
+    }
+    if (tabs.length === 0)
+        return null;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, tailwind_merge_1.twMerge)("flex gap-4 pb-3", className), children: tabs.map((tab, index) => ((0, jsx_runtime_1.jsx)("button", { id: tab.id, className: activeTab === index ? "active-tab" : "cursor-pointer", "data-testid": tab.testId, onClick: () => setActiveTab(index), style: {
+                        fontWeight: index === activeTab ? "bold" : "normal",
+                        borderBottom: index === activeTab ? "3px solid black" : "none",
+                        marginBottom: index === activeTab ? "0" : "3px",
+                        color: index === activeTab ? "black" : "gray",
+                    }, children: tab.label }, tab.id))) }), tabs[activeTab]?.content] }));
+}

package/dist/editor/ui/SimpleToolbar.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SimpleToolbar = SimpleToolbar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function SimpleToolbar({ children }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "flex gap-2 p-2 items-center bg-gray-50 rounded-md border-b border-gray-200 text-gray-500 text-sm", children: children }));
+}

package/dist/editor/ui/Spinner.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Spinner = Spinner;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function Spinner({ size = "4xl", }) {
+    return (0, jsx_runtime_1.jsx)("i", { className: `pi pi-cog pi-spin text-${size} text-gray-600` });
+}

package/dist/editor/ui/Splitter.js

@@ -0,0 +1,187 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Splitter = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const react_dom_1 = require("react-dom");
+const Splitter = ({ panels, localStorageKey = "splitter-sizes", expandLabel = "Expand", }) => {
+    const totalPanels = panels.length;
+    const [panelSizes, setPanelSizes] = (0, react_1.useState)(() => {
+        // Load sizes from local storage on initial render
+        const storedSizes = localStorage.getItem(localStorageKey);
+        if (storedSizes) {
+            try {
+                const parsedSizes = JSON.parse(storedSizes);
+                return parsedSizes.panels;
+            }
+            catch (error) {
+                return null; // Or fallback to default if parsing fails
+            }
+        }
+        return null; // No stored sizes, initial render will handle defaults
+    });
+    const panelRefs = (0, react_1.useRef)([]);
+    const splitterRef = (0, react_1.useRef)(null);
+    const lastPanelCollapsible = panels[panels.length - 1]?.collapsible;
+    const [isLastPanelCollapsed, setIsLastPanelCollapsed] = (0, react_1.useState)(() => {
+        const storedSizes = localStorage.getItem(localStorageKey);
+        if (storedSizes) {
+            const parsedSizes = JSON.parse(storedSizes);
+            return parsedSizes.lastCollapsed;
+        }
+        return true;
+    });
+    const [isResizing, setIsResizing] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        if (!panelSizes && splitterRef.current) {
+            const initialSizes = {};
+            panels.forEach((panel) => {
+                initialSizes[panel.name] = panel.defaultSize;
+            });
+            setPanelSizes(initialSizes);
+        }
+    }, [panels]);
+    (0, react_1.useEffect)(() => {
+        if (panelSizes) {
+            const storedSizes = {
+                panels: panelSizes,
+                lastCollapsed: isLastPanelCollapsed ?? false,
+            };
+            localStorage.setItem(localStorageKey, JSON.stringify(storedSizes));
+        }
+    }, [panelSizes, localStorageKey, isLastPanelCollapsed]);
+    const toggleLastPanelCollapse = () => {
+        if (lastPanelCollapsible) {
+            document.startViewTransition(() => {
+                (0, react_dom_1.flushSync)(() => {
+                    setIsLastPanelCollapsed((prev) => !prev);
+                });
+            });
+        }
+    };
+    const handleResize = (0, react_1.useCallback)((index, event) => {
+        event.preventDefault();
+        const iframes = splitterRef.current?.querySelectorAll("iframe");
+        iframes?.forEach((iframe) => {
+            iframe.classList.add("pointer-events-none");
+        });
+        const startX = event.clientX;
+        // create a copy with the panel name
+        const initialSizes = panelSizes ? { ...panelSizes } : {};
+        const panelElement = panelRefs.current[index];
+        const nextPanelElement = panelRefs.current[index + 1];
+        if (!panelElement || !nextPanelElement || !splitterRef.current) {
+            return;
+        }
+        const panelWidth = panelElement.offsetWidth;
+        const nextPanelWidth = nextPanelElement.offsetWidth;
+        setIsResizing(true);
+        const onMouseMove = (moveEvent) => {
+            const delta = moveEvent.clientX - startX;
+            const newPanelWidth = panelWidth + delta;
+            const newNextPanelWidth = nextPanelWidth - delta;
+            const minPanelWidth = 50;
+            const minNextPanelWidth = 50;
+            if (newNextPanelWidth < minPanelWidth &&
+                index == panels.length - 2 &&
+                lastPanelCollapsible) {
+                setIsLastPanelCollapsed(true);
+                setPanelSizes(initialSizes);
+            }
+            if (newPanelWidth < minPanelWidth ||
+                newNextPanelWidth < minNextPanelWidth) {
+                return;
+            }
+            const updatedSizes = { ...initialSizes };
+            updatedSizes[panels[index].name] = newPanelWidth;
+            updatedSizes[panels[index + 1].name] = newNextPanelWidth;
+            setPanelSizes(updatedSizes);
+        };
+        const onMouseUp = () => {
+            setTimeout(() => {
+                setIsResizing(false);
+            }, 100);
+            iframes?.forEach((iframe) => {
+                iframe.classList.remove("pointer-events-none");
+            });
+            document.removeEventListener("mousemove", onMouseMove);
+            document.removeEventListener("mouseup", onMouseUp, true);
+        };
+        document.addEventListener("mousemove", onMouseMove);
+        document.addEventListener("mouseup", onMouseUp, true);
+    }, [panels, panelSizes]);
+    const isLastResizer = (index) => index === panels.length - 2;
+    const getFlexBasis = (index) => {
+        if (!panelSizes)
+            return "1fr"; // Or a default like "1fr"
+        const panelName = panels[index].name;
+        const size = index === panels.length - 1 &&
+            isLastPanelCollapsed &&
+            lastPanelCollapsible
+            ? 0
+            : panelSizes[panelName] || panels[index].defaultSize;
+        if (typeof size === "number") {
+            return `${size}px`;
+        }
+        else if (size === "auto") {
+            return "auto";
+        }
+        return "1fr"; //default
+    };
+    const getExpandButton = () => {
+        return ((0, jsx_runtime_1.jsx)("div", { onClick: !isResizing ? toggleLastPanelCollapse : undefined, className: "select-none p-1 bg-gray-200  flex items-center justify-center text-gray-500  hover:bg-blue-700 hover:text-white cursor-pointer", style: { writingMode: "vertical-rl", userSelect: "none" }, children: expandLabel }));
+    };
+    const getSplitter = (index) => {
+        if (lastPanelCollapsible && isLastPanelCollapsed && isLastResizer(index)) {
+            return getExpandButton();
+        }
+        return ((0, jsx_runtime_1.jsx)("div", { className: " bg-gray-200 cursor-ew-resize select-none flex items-center justify-center hover:bg-blue-700  w-[4px] relative z-1000", onDoubleClick: isLastResizer(index) ? toggleLastPanelCollapse : undefined, onMouseDown: (event) => {
+                handleResize(index, event);
+            } }));
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { className: "flex w-full h-full overflow-hidden", ref: splitterRef, children: panels.map((panel, index) => ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { ref: (el) => {
+                        panelRefs.current[index] = el;
+                    }, className: "relative", style: {
+                        flex: `${panel.defaultSize === "auto" ? 1 : 0} 1 ${getFlexBasis(index)}`,
+                        minWidth: 0,
+                        display: panel.collapsible &&
+                            isLastPanelCollapsed &&
+                            index === totalPanels - 1
+                            ? "none"
+                            : "block",
+                    }, children: panel.content }), index < panels.length - 1 && getSplitter(index)] }, panel.name))) }));
+};
+exports.Splitter = Splitter;