@alpaca-headless/alpaca-headless-nextjs 1.0.27 → 1.0.129

package/dist/cjs/editor/ContentTree.js

@@ -9,6 +9,9 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const progressspinner_1 = require("primereact/progressspinner");
@@ -16,52 +19,65 @@ const __1 = require("..");
 const tree_1 = require("primereact/tree");
 const react_1 = require("react");
 const contentService_1 = require("./contentService");
-function ContentTree({ isDraggable, dragStart, dragEnd, expandIdPath, selectionMode, selectedItemIds, rootItemId, onSelectionChange, filter, templateIds, }) {
+const contextmenu_1 = require("primereact/contextmenu");
+const editService_1 = require("./editService");
+const ItemNameDialog_1 = __importDefault(require("./ItemNameDialog"));
+function ContentTree({ isDraggable, dragStart, dragEnd, expandIdPath, selectionMode, selectedItemIds, rootItemId, onSelectionChange, filter, templateIds, className, includeEmbeddedItems, onDoubleClick, secondarySelectedItemId, }) {
     const [treeNodes, setTreeNodes] = (0, react_1.useState)([]);
+    const [selectedKeys, setSelectedKeys] = (0, react_1.useState)();
     const [expandedKeys, setExpandedKeys] = (0, react_1.useState)();
+    const treeContainerRef = (0, react_1.useRef)(null);
     const editContext = (0, __1.useEditContext)();
+    const [selectedNodeScrolledIntoView, setSelectedNodeScrolledIntoView] = (0, react_1.useState)(false);
+    const cm = (0, react_1.useRef)(null);
+    const [menu, setMenu] = (0, react_1.useState)([]);
+    const itemNameDialogRef = (0, react_1.useRef)(null);
     const loadOnExpand = (event) => __awaiter(this, void 0, void 0, function* () {
         const node = event.node;
-        node.loading = true;
-        yield loadNodeChildren(node);
-        let value = [...treeNodes];
-        setTreeNodes(value);
-        node.loading = false;
+        yield loadChildren(node);
     });
-    const loadNodeChildren = (node) => __awaiter(this, void 0, void 0, function* () {
-        if (!node.children) {
-            if (!node.key || !editContext)
-                return node.children || [];
-            let children = yield (0, contentService_1.getChildren)(node.key, editContext === null || editContext === void 0 ? void 0 : editContext.sessionId, templateIds);
-            if (filter)
-                children = filter(children);
-            node.children = children.map((x) => ({
-                key: x.id,
-                label: x.name,
-                iconUrl: x.icon,
-                isDraggable: isDraggable && isDraggable(x),
-                data: x,
-                leaf: !x.hasChildren,
-            }));
-        }
-        return node.children;
+    function loadChildren(node) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!node.children) {
+                node.loading = true;
+                const nodes = yield loadNodeChildren(node.key);
+                node.children = nodes;
+                let value = [...treeNodes];
+                setTreeNodes(value);
+                node.loading = false;
+            }
+        });
+    }
+    function refreshNode(node) {
+        node.children = undefined;
+        loadChildren(node);
+    }
+    const loadNodeChildren = (id) => __awaiter(this, void 0, void 0, function* () {
+        if (!editContext)
+            return [];
+        let children = yield (0, contentService_1.getChildren)(id, editContext.sessionId, templateIds, includeEmbeddedItems !== null && includeEmbeddedItems !== void 0 ? includeEmbeddedItems : false);
+        if (filter)
+            children = filter(children);
+        return children.map((x) => ({
+            key: x.id,
+            label: x.name,
+            iconUrl: x.icon,
+            isDraggable: isDraggable && isDraggable(x),
+            data: x,
+            leaf: !x.hasChildren,
+        }));
     });
     (0, react_1.useEffect)(() => {
-        const treeNodes = [
-            {
-                key: rootItemId.toLowerCase(),
-                label: "content",
-                leaf: false,
-            },
-        ];
         const newExpandedKeys = getExpandedKeys();
         setExpandedKeys(newExpandedKeys);
-        preLoadNodes(newExpandedKeys, treeNodes);
+        preLoadNodes(newExpandedKeys);
         setTreeNodes(treeNodes);
     }, []);
     function getExpandedKeys() {
         const newExpandedKeys = {};
         newExpandedKeys[rootItemId.toLocaleLowerCase()] = true;
+        if (!expandIdPath)
+            return newExpandedKeys;
         const idPathArray = expandIdPath.split("/");
         idPathArray.forEach((x) => {
             if (x !== "")
@@ -69,31 +85,43 @@ function ContentTree({ isDraggable, dragStart, dragEnd, expandIdPath, selectionM
         });
         return newExpandedKeys;
     }
-    function preLoadNodes(expandedKeys, treeNodes) {
+    function preLoadNodes(expandedKeys) {
         return __awaiter(this, void 0, void 0, function* () {
-            yield doPreloadNodes(expandedKeys, treeNodes);
+            const rootNodes = yield loadNodeChildren(rootItemId);
+            yield doPreloadNodes(expandedKeys, rootNodes);
             setExpandedKeys(Object.assign({}, expandedKeys));
-            setTreeNodes([...treeNodes]);
+            setTreeNodes([...rootNodes]);
         });
     }
     function doPreloadNodes(expandedKeys, treeNodes) {
         return __awaiter(this, void 0, void 0, function* () {
             for (let i = 0; i < treeNodes.length; i++) {
                 if (expandedKeys[treeNodes[i].key]) {
-                    const children = yield loadNodeChildren(treeNodes[i]);
+                    const children = yield loadNodeChildren(treeNodes[i].key);
+                    treeNodes[i].children = children;
                     yield doPreloadNodes(expandedKeys, children);
                 }
             }
         });
     }
+    const nodeDictionary = {};
+    createMap(treeNodes, nodeDictionary);
+    function createMap(treeNodes, nodeDictionary) {
+        treeNodes.forEach((n) => {
+            if (n.key)
+                nodeDictionary[n.key] = n;
+            if (n.children)
+                createMap(n.children, nodeDictionary);
+        });
+    }
     const nodeTemplate = (node, options) => {
-        let label = (0, jsx_runtime_1.jsx)("b", { children: node.label });
+        let label = (0, jsx_runtime_1.jsx)("span", { children: node.label });
         if (node.url) {
             label = ((0, jsx_runtime_1.jsx)("a", { onDragStart: (e) => e.preventDefault(), href: node.url, className: "a-text-primary hover:a-underline a-font-semibold", children: node.label }));
         }
         return ((0, jsx_runtime_1.jsxs)("span", { onDragStart: (event) => {
                 handleDragStart(event, node.data);
-            }, onDragEnd: handleDragEnd, draggable: node.isDraggable, className: `a-flex a-gap-2 ${node.isDraggable ? "a-cursor-grab" : ""} ${options.className}`, children: [(0, jsx_runtime_1.jsx)("img", { src: node.iconUrl, style: { height: "20px" }, width: "20", height: "20", onDragStart: (e) => e.preventDefault() }), label, node.loading && ((0, jsx_runtime_1.jsx)(progressspinner_1.ProgressSpinner, { style: { width: "20px", height: "20px" } }))] }));
+            }, onDragEnd: handleDragEnd, draggable: node.isDraggable, className: `a-flex a-items-center a-gap-2 ${node.isDraggable ? "a-cursor-grab" : ""} ${options.className}   ${node.data.id == secondarySelectedItemId ? "a-selected-secondary" : ""}`, children: [(0, jsx_runtime_1.jsx)("img", { src: node.iconUrl, style: { height: "20px" }, width: "20", height: "20", onDragStart: (e) => e.preventDefault() }), label, node.loading && ((0, jsx_runtime_1.jsx)(progressspinner_1.ProgressSpinner, { style: { width: "20px", height: "20px" } }))] }));
     };
     function handleDragStart(event, item) {
         if (dragStart)
@@ -104,17 +132,84 @@ function ContentTree({ isDraggable, dragStart, dragEnd, expandIdPath, selectionM
         if (dragEnd)
             dragEnd();
     }
-    const newSelectedKeys = {};
-    selectedItemIds === null || selectedItemIds === void 0 ? void 0 : selectedItemIds.forEach((x) => {
-        newSelectedKeys[x] = true;
-    });
-    return ((0, jsx_runtime_1.jsx)("div", { onDragEnterCapture: (ev) => ev.stopPropagation(), onDragOverCapture: (ev) => ev.stopPropagation(), onDragLeaveCapture: (ev) => ev.stopPropagation(), children: (0, jsx_runtime_1.jsx)(tree_1.Tree, { value: treeNodes, expandedKeys: expandedKeys, onToggle: (e) => setExpandedKeys(e.value), nodeTemplate: nodeTemplate, 
-            //dragdropScope={isDraggable ? "alpaca" : undefined}
-            className: "a-w-full alpaca-no-border a-p-0", onExpand: loadOnExpand, selectionMode: selectionMode, onSelectionChange: (ev) => {
-                if (onSelectionChange && selectionMode == "multiple")
-                    onSelectionChange(Object.keys(ev.value || {}));
-                if (onSelectionChange && selectionMode == "single")
-                    onSelectionChange([ev.value]);
-            }, selectionKeys: newSelectedKeys }) }));
+    (0, react_1.useEffect)(() => {
+        const newSelectedKeys = {};
+        selectedItemIds === null || selectedItemIds === void 0 ? void 0 : selectedItemIds.forEach((x) => {
+            if (x.startsWith("{") && x.endsWith("}") && x.length > 2)
+                x = x.substring(1, x.length - 1);
+            newSelectedKeys[x.toLowerCase()] = true;
+        });
+        if (selectionMode == "single" &&
+            selectedItemIds &&
+            selectedItemIds.length > 0)
+            setSelectedKeys(Object.keys(newSelectedKeys)[0]);
+        else
+            setSelectedKeys(newSelectedKeys);
+    }, [selectedItemIds]);
+    (0, react_1.useEffect)(() => {
+        const scrollNodeIntoView = () => {
+            if (!treeContainerRef.current)
+                return;
+            const selectedNodeElement = treeContainerRef.current.querySelector(`li[aria-selected="true"]`);
+            if (selectedNodeElement) {
+                setSelectedNodeScrolledIntoView(true);
+                selectedNodeElement.scrollIntoView({
+                    behavior: "smooth",
+                    block: "center",
+                    inline: "center",
+                });
+            }
+        };
+        if (!selectedNodeScrolledIntoView)
+            scrollNodeIntoView();
+    }, [treeNodes]);
+    function insertItem(node, parent, templateId) {
+        var _a;
+        (_a = itemNameDialogRef.current) === null || _a === void 0 ? void 0 : _a.show({
+            accept: (name) => __awaiter(this, void 0, void 0, function* () {
+                yield (0, editService_1.createItem)(parent, templateId, name);
+                editContext === null || editContext === void 0 ? void 0 : editContext.requestRefresh("immediate");
+                node.expanded = true;
+                refreshNode(node);
+            }),
+        });
+    }
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ItemNameDialog_1.default, { ref: itemNameDialogRef }), (0, jsx_runtime_1.jsx)(contextmenu_1.ContextMenu, { model: menu, ref: cm, className: "a-text-sm" }), (0, jsx_runtime_1.jsx)("div", { className: className, onDragEnterCapture: (ev) => ev.stopPropagation(), onDragOverCapture: (ev) => ev.stopPropagation(), onDragLeaveCapture: (ev) => ev.stopPropagation(), ref: treeContainerRef, children: (0, jsx_runtime_1.jsx)(tree_1.Tree, { value: treeNodes, expandedKeys: expandedKeys, onToggle: (e) => setExpandedKeys(e.value), nodeTemplate: nodeTemplate, 
+                    //dragdropScope={isDraggable ? "alpaca" : undefined}
+                    className: "a-w-full a-h-full alpaca-no-border a-p-0 a-text-xs", onExpand: loadOnExpand, selectionMode: selectionMode, pt: { container: { className: "a-h-full" } }, onNodeDoubleClick: (e) => {
+                        onDoubleClick === null || onDoubleClick === void 0 ? void 0 : onDoubleClick(e.node.data);
+                    }, onSelectionChange: (ev) => {
+                        if (onSelectionChange && selectionMode == "multiple") {
+                            const selectedKeys = Object.keys(ev.value);
+                            const selectedNodes = selectedKeys
+                                .filter((key) => nodeDictionary[key])
+                                .map((key) => nodeDictionary[key]);
+                            onSelectionChange(selectedNodes.map((x) => x.data));
+                        }
+                        if (onSelectionChange && selectionMode == "single") {
+                            onSelectionChange(nodeDictionary[ev.value].data);
+                        }
+                    }, selectionKeys: selectedKeys, onContextMenu: (e) => __awaiter(this, void 0, void 0, function* () {
+                        var _a;
+                        e.originalEvent.preventDefault();
+                        const item = e.node.data;
+                        var insertOptions = yield (0, editService_1.loadInsertOptions)(item);
+                        setMenu([
+                            {
+                                label: "Insert",
+                                disabled: insertOptions.length == 0,
+                                items: insertOptions.length === 0
+                                    ? undefined
+                                    : insertOptions.map((x) => ({
+                                        label: x.name,
+                                        icon: ((0, jsx_runtime_1.jsx)("img", { className: "p-menuitem-icon", src: x.icon, style: { height: "16px" }, width: "16", height: "16", onDragStart: (e) => e.preventDefault() })),
+                                        command: () => {
+                                            insertItem(e.node, item, x.id);
+                                        },
+                                    })),
+                            },
+                        ]);
+                        (_a = cm.current) === null || _a === void 0 ? void 0 : _a.show(e.originalEvent);
+                    }) }) })] }));
 }
 exports.default = ContentTree;

package/dist/cjs/editor/Debug.js

@@ -8,9 +8,19 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_json_pretty_1 = __importDefault(require("react-json-pretty"));
 require("react-json-pretty/themes/monikai.css");
 const tabview_1 = require("primereact/tabview");
-function Debug({ component, page }) {
+function Debug({ component, page, }) {
     if (!component && !page)
         return;
-    return ((0, jsx_runtime_1.jsxs)(tabview_1.TabView, { children: [component && (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Component", children: (0, jsx_runtime_1.jsx)(react_json_pretty_1.default, { data: component }) }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Page", children: (0, jsx_runtime_1.jsx)(react_json_pretty_1.default, { data: page }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(tabview_1.TabView, { className: "a-h-full", children: [component && ((0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Component", className: "a-relative a-h-full", children: (0, jsx_runtime_1.jsx)("div", { className: "a-inset-0 a-absolute a-overflow-auto", children: (0, jsx_runtime_1.jsx)(react_json_pretty_1.default, { data: component, replacer: function (key, value) {
+                            if (key === "parentComponent") {
+                                return undefined;
+                            }
+                            return value;
+                        } }) }) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Page", className: "a-relative a-h-full", children: (0, jsx_runtime_1.jsx)("div", { className: "a-inset-0 a-absolute a-overflow-auto", children: (0, jsx_runtime_1.jsx)(react_json_pretty_1.default, { data: page, replacer: function (key, value) {
+                            if (key === "parentComponent") {
+                                return undefined;
+                            }
+                            return value;
+                        } }) }) })] }));
 }
 exports.Debug = Debug;

package/dist/cjs/editor/DialogButtons.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+function DialogButtons({ children, }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "a-flex a-justify-end a-gap-3 a-pt-6 a-border-t", children: children }));
+}
+exports.default = DialogButtons;

package/dist/cjs/editor/DictionaryEditor.js

@@ -5,9 +5,9 @@ exports.DictionaryEditor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const datatable_1 = require("primereact/datatable");
 const column_1 = require("primereact/column");
-const inputtext_1 = require("primereact/inputtext");
 const __1 = require("..");
-function DictionaryEditor({ dictionary }) {
+const SingleLineText_1 = require("./fieldTypes/SingleLineText");
+function DictionaryEditor({ dictionary, }) {
     if (!dictionary)
         return;
     const context = (0, __1.useEditContext)();
@@ -17,16 +17,22 @@ function DictionaryEditor({ dictionary }) {
     }
     let entries = Object.keys(dictionary).map((k) => ({
         key: k,
-        translation: dictionary[k],
+        field: dictionary[k],
+        translation: dictionary[k].value,
     }));
-    entries = [...entries, ...context === null || context === void 0 ? void 0 : context.unresolvedDictionaryKeys.map(x => ({
+    entries = [
+        ...entries,
+        ...context === null || context === void 0 ? void 0 : context.unresolvedDictionaryKeys.map((x) => ({
             key: x,
-            translation: "[undefined]"
-        }))];
+            field: null,
+            translation: "[undefined]",
+        })),
+    ];
     entries.sort((a, b) => (a.key > b.key ? -1 : 1));
     const textEditor = (options) => {
-        if (options.value != "[undefined]")
-            return (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { type: "text", value: options.value, onChange: (e) => options.editorCallback(e.target.value) });
+        var _a;
+        if ((_a = options.rowData) === null || _a === void 0 ? void 0 : _a.field)
+            return (0, jsx_runtime_1.jsx)(SingleLineText_1.SingleLineText, { field: options.rowData.field });
         else
             return null;
     };

package/dist/cjs/editor/EditFrame.js

@@ -1,33 +1,59 @@
 "use strict";
 "use client";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EditFrame = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const __1 = require("..");
-function EditFrame({ componentId, children, }) {
+const react_2 = __importDefault(require("react"));
+const AiPopup_1 = require("./AiPopup");
+function EditFrame({ componentId, children, index, }) {
     var _a, _b;
     const editContext = (0, __1.useEditContext)();
+    const [customButtons, setCustomButtons] = (0, react_1.useState)([]);
+    const ref = react_2.default.useRef(null);
     if (!editContext)
         return children;
     const { getComponentById, selection, setSelection } = editContext;
-    const [isRemoved, setIsRemoved] = (0, react_1.useState)(false);
+    const isSelected = selection && selection.indexOf(componentId) >= 0;
+    const aiPopup = react_2.default.useRef(null);
+    (0, react_1.useEffect)(() => {
+        if (ref.current && editContext.scrollIntoView == componentId) {
+            ref.current.scrollIntoView({
+                behavior: "smooth",
+                block: "center",
+                inline: "center",
+            });
+        }
+    }, [editContext.scrollIntoView]);
     const clientComponent = getComponentById(componentId);
     if (!clientComponent) {
         return children;
     }
     function select(e) {
         e.stopPropagation();
-        if (clientComponent)
-            setSelection([clientComponent.id]);
+        e.preventDefault();
+        if (clientComponent) {
+            const s = e.ctrlKey ? [...selection] : [];
+            if (s.indexOf(clientComponent.id) < 0)
+                s.push(clientComponent.id);
+            setSelection(s);
+        }
     }
-    let classNames = "ap-editframe";
+    let classNames = "a-editframe";
     let color = clientComponent.linkItemId ? "orange-400" : "sky-400";
     if (clientComponent.hostingPageItem)
         color = "purple-400";
-    const isSelected = selection && selection.indexOf(clientComponent.id) >= 0;
     if (isSelected)
-        classNames = `ap-editframe a-relative a-ring-2 a-ring-${color}`;
+        classNames = `a-editframe a-selected a-relative`;
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (!isSelected)
+            (_a = aiPopup.current) === null || _a === void 0 ? void 0 : _a.close();
+    }, [isSelected]);
     function handleDragStart(event) {
         if (!clientComponent)
             return;
@@ -37,7 +63,12 @@ function EditFrame({ componentId, children, }) {
             editContext.dragStart({
                 type: "component",
                 templateId: clientComponent.templateId,
-                componentId: clientComponent.id,
+                component: {
+                    id: clientComponent.id,
+                    language: editContext.page.language,
+                    version: editContext.page.version,
+                    name: clientComponent.name,
+                },
             });
         }, 50);
         event.stopPropagation();
@@ -45,17 +76,54 @@ function EditFrame({ componentId, children, }) {
     const isDraggable = isSelected && !clientComponent.hostingPageItem;
     if ((_a = children.props) === null || _a === void 0 ? void 0 : _a.className)
         classNames += " " + ((_b = children === null || children === void 0 ? void 0 : children.props) === null || _b === void 0 ? void 0 : _b.className);
-    if (isRemoved)
-        classNames += " ap-removed";
-    return ((0, jsx_runtime_1.jsxs)("div", { className: classNames, onClick: select, draggable: isDraggable, onDragStart: handleDragStart, children: [isSelected && ((0, jsx_runtime_1.jsxs)("div", { className: `a-absolute a-top-0 a-right-0 a-text-white a-px-3 a-bg-${color} ${isDraggable ? "a-cursor-move" : ""}`, children: [clientComponent.name, (0, jsx_runtime_1.jsx)("button", { className: "a-ml-3", onClick: (ev) => {
-                            ev.preventDefault();
-                            ev.stopPropagation();
-                            editContext.removeComponent(clientComponent.linkItemId || clientComponent.id, () => setIsRemoved(true));
-                        }, children: (0, jsx_runtime_1.jsx)("i", { className: "pi pi-trash" }) }), clientComponent.placeholders.length > 0 && ((0, jsx_runtime_1.jsx)("button", { className: "a-ml-3", onClick: (ev) => {
-                            editContext.setSelectedForInsertion(clientComponent.id);
-                            editContext.openComponentPalette();
-                            ev.stopPropagation();
-                            ev.preventDefault();
-                        }, children: (0, jsx_runtime_1.jsx)("i", { className: "pi pi-plus" }) }))] })), children] }));
+    if (clientComponent.isRemoved)
+        classNames += " a-removed";
+    const commands = editContext.getComponentCommands([clientComponent]);
+    const commandButtons = commands
+        .filter((x) => !x.disabled && x.visibilityScopes.indexOf("editFrame") >= 0)
+        .map((x) => ({
+        icon: x.icon,
+        tooltip: x.label,
+        onClick: (ev) => {
+            ev.preventDefault();
+            ev.stopPropagation();
+            x.execute();
+        },
+    }));
+    const aiButton = {
+        icon: "pi pi-comments",
+        tooltip: "AI",
+        onClick: (ev) => {
+            aiPopup.current.show(ev);
+            ev.preventDefault();
+            ev.stopPropagation();
+        },
+    };
+    const buttons = [...customButtons, aiButton, ...commandButtons];
+    if (clientComponent.placeholders.length > 0) {
+        buttons.push({
+            icon: "pi pi-plus",
+            tooltip: "Insert component",
+            onClick: (ev) => {
+                editContext.setSelectedForInsertion(clientComponent.id);
+                ev.stopPropagation();
+                ev.preventDefault();
+            },
+        });
+    }
+    var filterContext = (0, __1.useEditFilterChildrenContext)();
+    if (filterContext &&
+        filterContext.filterChildCallback &&
+        filterContext.filterChildCallback({
+            component: clientComponent,
+            index: index,
+        }))
+        return null;
+    return ((0, jsx_runtime_1.jsxs)(__1.EditFrameContextProvider, { value: {
+            customButtons,
+            setCustomButtons,
+            componentId: clientComponent.id,
+            isSelected: isSelected,
+        }, children: [(0, jsx_runtime_1.jsx)(AiPopup_1.AiPopup, { componentId: clientComponent.id, ref: aiPopup }), (0, jsx_runtime_1.jsxs)("div", { ref: ref, className: classNames, onClick: select, draggable: isDraggable, onDragStart: handleDragStart, children: [children, isSelected && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `a-pointer-events-none a-absolute a-inset-0 a-border-2 a-border-${color} ` }), (0, jsx_runtime_1.jsxs)("div", { className: `a-editframe-menu a-absolute a-top-px a-right-px a-z-1000 a-text-sm a-text-white a-opacity-50 hover:a-opacity-100 a-whitespace-nowrap a-px-3 a-pt-3px  a-bg-${color} ${isDraggable ? "a-cursor-move" : "a-cursor-default"} `, style: { zoom: 1 / editContext.zoom }, children: [clientComponent.name, buttons.map((b, i) => ((0, jsx_runtime_1.jsx)("button", { className: "a-ml-3", onClick: b.onClick, title: b.tooltip, children: (0, jsx_runtime_1.jsx)("i", { className: b.icon }) }, i)))] })] }))] })] }));
 }
 exports.EditFrame = EditFrame;

package/dist/cjs/editor/EditHistory.js

@@ -7,24 +7,37 @@ function EditHistory({ operations }) {
     if (!operations)
         return;
     const description = (op) => {
+        var _a, _b, _c;
+        if (op.type === "move-component") {
+            const move = op;
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Move ", (_a = move.component) === null || _a === void 0 ? void 0 : _a.name, " to ", (_b = move.parent) === null || _b === void 0 ? void 0 : _b.name, "/", move.placeholderName, " (", move.placeholderIndex, ")", " "] }));
+        }
         if (op.type === "add-component")
-            return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Add ", op.itemName] });
+            return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Add ", (_c = op.component) === null || _c === void 0 ? void 0 : _c.name] });
         if (op.type === "link-component")
             return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Insert ", op.itemName] });
+        if (op.type === "synchronize-components") {
+            const syncOp = op;
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Synchronize components", " ", syncOp.itemsCreated && ((0, jsx_runtime_1.jsxs)("span", { className: "a-text-gray-400 a-ml-1", children: ["(", syncOp.itemsCreated.length, " item", syncOp.itemsCreated.length !== 1 ? "s" : "", " created)"] }))] }));
+        }
         if (op.type === "remove-component")
-            return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Remove ", op.id] });
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Remove", " ", op.components
+                        .map((x) => x.name)
+                        .join(", ")] }));
         if (op.type === "edit-field") {
             const editFieldOp = op;
             return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Edit ", editFieldOp.fieldName, (0, jsx_runtime_1.jsxs)("span", { className: "a-text-gray-400 a-ml-1", children: ["(", editFieldOp.itemName, ", ", editFieldOp.language, ",", " ", editFieldOp.version, ")"] })] }));
         }
         return (0, jsx_runtime_1.jsx)("div", { children: op.type });
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "a-inset-0 a-absolute", children: [(0, jsx_runtime_1.jsx)("div", { className: "a-p-2 a-bg-gray-100 a-m-1", children: "History" }), (0, jsx_runtime_1.jsx)("div", { className: "a-flex a-flex-col a-overflow-y-auto a-overflow-x-hidden", style: { height: "calc(100% - 45px)" }, children: operations.map((o, i) => singleOperation(i, o)) })] }));
+    const reversedOps = [...operations].reverse();
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "a-inset-0 a-absolute", children: [(0, jsx_runtime_1.jsx)("div", { className: "a-p-3 a-bg-gray-50 a-border-b-2  a-text-gray-600 a-text-sm", children: "History" }), (0, jsx_runtime_1.jsx)("div", { className: "a-flex a-flex-col a-overflow-y-auto a-overflow-x-hidden", style: { height: "calc(100% - 45px)" }, children: reversedOps.map((o, i) => singleOperation(i, o)) })] }));
     function singleOperation(i, o) {
+        var _a;
         let className = "a-border-b a-p-2 a-flex a-justify-between";
         if (o.undone)
             className = className + " a-text-gray-300";
-        return ((0, jsx_runtime_1.jsxs)("div", { className: className, children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("small", { className: "a-text-color-secondary", children: description(o) }) }), (0, jsx_runtime_1.jsx)("div", { className: "a-text-xs", children: o.user })] }, i));
+        return ((0, jsx_runtime_1.jsxs)("div", { className: className, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("small", { className: "a-text-color-secondary", children: description(o) }), " ", o.isCommitted && ((0, jsx_runtime_1.jsx)("i", { className: "pi pi-check a-text-green-500 a-ml-1" }))] }), (0, jsx_runtime_1.jsx)("div", { className: "a-text-xs", children: (_a = o.user) === null || _a === void 0 ? void 0 : _a.name })] }, i));
     }
 }
 exports.EditHistory = EditHistory;

package/dist/cjs/editor/Editor.js

@@ -21,7 +21,7 @@ function Editor({ children, content, }) {
         if (!data.editing)
             return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
         var alpacaContext = (0, __1.useAlpacaContext)();
-        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(EditorClientHost_1.EditorClientHost, { content: data, dictionaryObject: alpacaContext.dictionary, edit: alpacaContext.edit, children: children }) }));
+        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(EditorClientHost_1.EditorClientHost, { content: data, dictionaryObject: alpacaContext.dictionary, edit: alpacaContext.edit, site: alpacaContext.pageContext.site.name, children: children }) }));
     });
 }
 exports.Editor = Editor;