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

package/dist/cjs/editor/AiPopup.js

@@ -1,33 +0,0 @@
-"use strict";
-"use client";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AiPopup = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const overlaypanel_1 = require("primereact/overlaypanel");
-const AiTerminal_1 = require("./AiTerminal");
-const button_1 = require("primereact/button");
-const react_1 = require("react");
-const __1 = require("..");
-exports.AiPopup = (0, react_1.forwardRef)((props, ref) => {
-    const overlayRef = (0, react_1.useRef)(null);
-    const [operations, setOperations] = (0, react_1.useState)([]);
-    const editContext = (0, __1.useEditContext)();
-    (0, react_1.useImperativeHandle)(ref, () => ({
-        show: (ev) => {
-            var _a;
-            setOperations([]);
-            (_a = overlayRef.current) === null || _a === void 0 ? void 0 : _a.toggle(ev);
-        },
-        close: () => {
-            var _a;
-            (_a = overlayRef.current) === null || _a === void 0 ? void 0 : _a.hide();
-        },
-    }));
-    return ((0, jsx_runtime_1.jsx)(overlaypanel_1.OverlayPanel, { ref: overlayRef, children: (0, jsx_runtime_1.jsxs)("div", { className: "a-w-96 a-h-96 a-flex a-flex-col a-gap-2", children: [(0, jsx_runtime_1.jsx)(AiTerminal_1.AiTerminal, { selection: [props.componentId], newEditOperations: (ops) => setOperations([...operations, ...ops]) }), operations.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "a-text-xs", children: [operations.length, " changes"] })), (0, jsx_runtime_1.jsxs)("div", { className: "a-flex a-gap-4 a-justify-end", children: [!operations.length && ((0, jsx_runtime_1.jsx)(button_1.Button, { label: "Close", onClick: () => { var _a; return (_a = overlayRef.current) === null || _a === void 0 ? void 0 : _a.hide(); }, size: "small" })), operations.length > 0 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { icon: "pi pi-check", severity: "success", label: "Accept", onClick: () => { var _a; return (_a = overlayRef.current) === null || _a === void 0 ? void 0 : _a.hide(); }, size: "small" }), (0, jsx_runtime_1.jsx)(button_1.Button, { icon: "pi pi-times", severity: "danger", label: "Reject", onClick: () => {
-                                        var _a;
-                                        if (operations.length > 0) {
-                                            editContext === null || editContext === void 0 ? void 0 : editContext.undo(operations.length);
-                                            (_a = overlayRef.current) === null || _a === void 0 ? void 0 : _a.hide();
-                                        }
-                                    }, size: "small" })] }))] })] }) }));
-});

package/dist/cjs/editor/ComponentInfo.js

@@ -1,15 +0,0 @@
-"use strict";
-"use client";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ComponentInfo = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const Section_1 = require("./ui/Section");
-function ComponentInfo({ component, }) {
-    var _a;
-    if (!(component === null || component === void 0 ? void 0 : component.fields))
-        return;
-    const hostingPageItem = component.hostingPageItem ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "a-font-bold", children: "Source:" }), (0, jsx_runtime_1.jsxs)("div", { children: [component.hostingPageItem.path, " (ID: ", component.hostingPageItem.id, ")"] })] })) : null;
-    const linkedComponent = component.linkedComponentItem ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "a-font-bold", children: "Source:" }), (0, jsx_runtime_1.jsxs)("div", { children: [component.linkedComponentItem.path, " (", component.linkedComponentItem.id, ")"] })] })) : null;
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h2", { className: "a-py-5 a-px-3 a-text-xl a-font-bold a-my-2", children: component.name }), (0, jsx_runtime_1.jsx)(Section_1.Section, { title: "Info", children: (0, jsx_runtime_1.jsxs)("div", { className: "a-grid a-grid-cols-[min-content_1fr] a-gap-3 a-text-xs a-p-2 a-bg-gray-100", children: [(0, jsx_runtime_1.jsx)("div", { className: "a-font-bold", children: "ID:" }), (0, jsx_runtime_1.jsxs)("div", { children: [" ", component.id] }), (0, jsx_runtime_1.jsx)("div", { className: "a-font-bold", children: "Template" }), (0, jsx_runtime_1.jsxs)("div", { children: [component.componentType, " (", component.templateId, ")"] }), (0, jsx_runtime_1.jsx)("div", { className: "a-font-bold", children: "Languages" }), (0, jsx_runtime_1.jsx)("div", { children: (_a = component.translations) === null || _a === void 0 ? void 0 : _a.join(", ") }), hostingPageItem, linkedComponent] }) })] }));
-}
-exports.ComponentInfo = ComponentInfo;

package/dist/cjs/editor/ComponentPalette.js

@@ -1,23 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ComponentPalette = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const __1 = require("..");
-function ComponentPalette({ insertOptions, dragStart, dragEnd, }) {
-    const editContext = (0, __1.useEditContext)();
-    if (!editContext)
-        return;
-    return ((0, jsx_runtime_1.jsx)("div", { className: "a-grid a-gap-1 a-grid-cols-[repeat(auto-fill,_minmax(70px,_1fr))] a-m-3", children: insertOptions
-            .filter((x) => !x.isHidden)
-            .map((option) => {
-            function handleDragStart(event) {
-                dragStart({ type: "template", templateId: option.id });
-                event.stopPropagation();
-            }
-            function handleDragEnd() {
-                dragEnd();
-            }
-            return ((0, jsx_runtime_1.jsxs)("div", { draggable: true, onDragStart: handleDragStart, onDragEnd: handleDragEnd, className: "a-p-2 a-shadow-md a-flex a-items-center a-flex-col a-gap-2 a-cursor-grab a-text-center a-text-xs", children: [(0, jsx_runtime_1.jsx)("div", { className: "a-p-2 a-border", children: (0, jsx_runtime_1.jsx)("img", { src: option.icon, width: "16", height: "16" }) }), option.name] }, option.id));
-        }) }));
-}
-exports.ComponentPalette = ComponentPalette;

package/dist/cjs/editor/ComponentTree.js

@@ -1,217 +0,0 @@
-"use strict";
-"use client";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ComponentTree = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const __1 = require("..");
-const tree_1 = require("primereact/tree");
-const react_1 = require("react");
-const tag_1 = require("primereact/tag");
-const contextmenu_1 = require("primereact/contextmenu");
-const confirmdialog_1 = require("primereact/confirmdialog");
-const componentCommands_1 = require("./componentCommands");
-function mapPlaceholderNode(p, parent) {
-    const node = {
-        key: p.key,
-        componentId: p.key,
-        label: p.name,
-        data: p,
-        icon: "pi pi-folder",
-        parent: parent,
-        droppable: true,
-    };
-    node.children = p.components.map((c) => mapComponentNode(c, node));
-    return node;
-}
-function mapPlaceholders(c, parent) {
-    if (c.placeholders.length > 1)
-        return c.placeholders.map((x) => mapPlaceholderNode(x, parent));
-    else if (c.placeholders.length > 0)
-        return c.placeholders[0].components.map((c) => mapComponentNode(c, parent));
-    return [];
-}
-function mapComponentNode(c, parent) {
-    const node = {
-        key: c.linkItemId + "_" + c.id || c.id,
-        componentId: c.id,
-        label: c.name,
-        icon: "pi pi-stop",
-        data: c,
-        parent: parent,
-        tags: [],
-        droppable: true,
-        className: c.isRemovedFromMasterLanguage ? "a-text-gray-400" : "",
-    };
-    // if (c.translations && c.translations.length > 1)
-    //   node.tags!.push({
-    //     severity: "info",
-    //     value: c.translations!.length + " Languages",
-    //     icon: "pi pi-flag",
-    //   });
-    if (c.isInheritedFromMasterLanguage) {
-        node.tags.push({
-            severity: "info",
-            value: "Inherited " + (c.isRemovedFromMasterLanguage ? " / removed" : ""),
-            icon: "pi pi-caret-right",
-        });
-    }
-    if (c.hostingPageItem) {
-        node.tags.push({
-            severity: "warning",
-            value: "Layout",
-            icon: "",
-            color: "rgb(192 132 252)",
-            onClick: () => {
-                var _a;
-                (0, confirmdialog_1.confirmDialog)({
-                    header: "Edit layout",
-                    message: "Edit layout " + ((_a = c.hostingPageItem) === null || _a === void 0 ? void 0 : _a.path) + "?",
-                    accept: () => window.open(c.hostingPageItem.editUrl, "_blank"),
-                });
-            },
-        });
-    }
-    if (c.linkedComponentItem) {
-        node.tags.push({
-            severity: "warning",
-            value: "Shared",
-            icon: "",
-            color: "rgb(251, 146, 60)",
-        });
-    }
-    node.children = mapPlaceholders(c, node);
-    return node;
-}
-function ComponentTree({ page, selection, }) {
-    const [expandedKeys, setExpandedKeys] = (0, react_1.useState)({
-        "0": true,
-    });
-    const [selectedKeys, setSelectedKeys] = (0, react_1.useState)();
-    const [nodeDataForContextMenu, setNodeDataForContextMenu] = (0, react_1.useState)();
-    const cm = (0, react_1.useRef)(null);
-    let editContext = (0, __1.useEditContext)();
-    const treeRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
-        if (treeRef.current) {
-            const selectedNodeKey = Object.keys(selectedKeys || {})[0];
-            const selectedNodeElement = treeRef.current.querySelector(`[data-key="${selectedNodeKey}"]`);
-            if (selectedNodeElement) {
-                selectedNodeElement.scrollIntoView({
-                    behavior: "smooth",
-                    block: "nearest",
-                });
-            }
-        }
-    }, [selectedKeys]);
-    (0, react_1.useEffect)(() => {
-        const newSelectedKeys = {};
-        selection.forEach((id) => {
-            const nodes = findNodesByComponentId(id, nodeDictionary);
-            nodes.forEach((nodeId) => {
-                newSelectedKeys[nodeId] = true;
-            });
-        });
-        const newExpandedKeys = Object.assign({}, expandedKeys);
-        Object.keys(newSelectedKeys).forEach((id) => {
-            const node = nodeDictionary[id];
-            if (node)
-                expandParents(node.parent, newExpandedKeys);
-        });
-        if (!hasSameProps(newExpandedKeys, expandedKeys))
-            setExpandedKeys(newExpandedKeys);
-        setSelectedKeys(newSelectedKeys);
-    }, [selection]);
-    if (!editContext)
-        return;
-    if (!page)
-        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
-    const treeNodes = mapPlaceholders(page, {});
-    const nodeDictionary = {};
-    createMap(treeNodes, nodeDictionary);
-    const nodeTemplate = (node, options) => {
-        var _a;
-        let label = ((0, jsx_runtime_1.jsxs)("span", { "data-key": node.key, className: "a-flex a-items-center", children: [(0, jsx_runtime_1.jsx)("span", { className: node.className, children: node.label }), (_a = node.tags) === null || _a === void 0 ? void 0 : _a.map((x) => ((0, jsx_runtime_1.jsx)(tag_1.Tag, { icon: x.icon, value: x.value, severity: x.severity, onClick: x.onClick, style: {
-                        backgroundColor: x.color,
-                        marginLeft: "8px",
-                        fontSize: "10px",
-                        padding: "1px 4px 2px 2px",
-                    } }, x.value)))] }));
-        return (0, jsx_runtime_1.jsx)("span", { className: options.className, children: label });
-    };
-    let selectedEntities = selection
-        .filter((key) => nodeDictionary[key])
-        .map((key) => nodeDictionary[key].data)
-        .filter((x) => x);
-    if (selectedEntities.length === 0 && nodeDataForContextMenu) {
-        selectedEntities = [nodeDataForContextMenu];
-    }
-    let commands = (0, componentCommands_1.getComponentCommands)(selectedEntities, editContext);
-    const menu = commands.map((x) => ({
-        label: x.label,
-        icon: x.icon,
-        disabled: x.disabled,
-        command: () => {
-            x.execute();
-        },
-    }));
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "a-p-1", ref: treeRef, children: [(0, jsx_runtime_1.jsx)(contextmenu_1.ContextMenu, { model: menu, ref: cm }), (0, jsx_runtime_1.jsx)(tree_1.Tree, { value: treeNodes, selectionMode: "multiple", selectionKeys: selectedKeys, className: "a-w-full alpaca-no-border a-text-xs", onToggle: (e) => setExpandedKeys(e.value), expandedKeys: expandedKeys, nodeTemplate: nodeTemplate, dragdropScope: "ignore", onSelectionChange: (ev) => {
-                    if (ev.value) {
-                        const selectedKeys = Object.keys(ev.value);
-                        const selectedComponentIds = selectedKeys
-                            .filter((key) => nodeDictionary[key])
-                            .map((key) => nodeDictionary[key].componentId);
-                        editContext === null || editContext === void 0 ? void 0 : editContext.setSelection(selectedComponentIds);
-                        if (selectedComponentIds.length === 1)
-                            editContext.setScrollIntoView(selectedComponentIds[0]);
-                    }
-                    else {
-                        editContext === null || editContext === void 0 ? void 0 : editContext.setSelection([]);
-                    }
-                }, onDragDrop: (e) => {
-                    console.log(e.dropNode);
-                    console.log(e.dragNode);
-                    console.log(e.dropIndex);
-                }, onContextMenu: (e) => {
-                    var _a;
-                    const componentId = nodeDictionary[e.node.key].componentId;
-                    if (componentId) {
-                        if (selection.indexOf(componentId) < 0) {
-                            editContext === null || editContext === void 0 ? void 0 : editContext.setSelection([componentId]);
-                        }
-                    }
-                    setNodeDataForContextMenu(e.node.data);
-                    (_a = cm.current) === null || _a === void 0 ? void 0 : _a.show(e.originalEvent);
-                } })] }));
-}
-exports.ComponentTree = ComponentTree;
-function createMap(treeNodes, nodeDictionary) {
-    treeNodes.forEach((n) => {
-        if (n.key)
-            nodeDictionary[n.key] = n;
-        if (n.children)
-            createMap(n.children, nodeDictionary);
-    });
-}
-function findNodesByComponentId(id, nodesDictionary) {
-    const allNodes = Object.values(nodesDictionary);
-    return allNodes
-        .filter((x) => x.componentId === id)
-        .map((x) => { var _a; return ((_a = x.key) === null || _a === void 0 ? void 0 : _a.toString()) || ""; });
-}
-function expandParents(node, newExpandedKeys) {
-    if (!node)
-        return;
-    if (node.key)
-        newExpandedKeys[node.key] = true;
-    if (node.parent)
-        expandParents(node.parent, newExpandedKeys);
-}
-function hasSameProps(obj1, obj2) {
-    var obj1Props = Object.keys(obj1), obj2Props = Object.keys(obj2);
-    if (obj1Props.length == obj2Props.length) {
-        return obj1Props.every(function (prop) {
-            return obj2Props.indexOf(prop) >= 0;
-        });
-    }
-    return false;
-}

package/dist/cjs/editor/ConfirmationDialog.js

@@ -1,31 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const dialog_1 = require("primereact/dialog");
-const button_1 = require("primereact/button");
-const ConfirmationDialog = (0, react_1.forwardRef)((_props, ref) => {
-    const [visible, setVisible] = (0, react_1.useState)(false);
-    const [props, setProps] = (0, react_1.useState)();
-    (0, react_1.useImperativeHandle)(ref, () => ({
-        confirm: (props) => {
-            setVisible(true);
-            setProps(props);
-        },
-    }));
-    const handleAccept = () => {
-        props === null || props === void 0 ? void 0 : props.accept();
-        setVisible(false);
-    };
-    const handleReject = () => {
-        if (props === null || props === void 0 ? void 0 : props.reject)
-            props.reject();
-        setVisible(false);
-    };
-    const handleCancel = () => {
-        setVisible(false);
-    };
-    const dialogFooter = ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { label: (props === null || props === void 0 ? void 0 : props.acceptLabel) || "Yes", icon: (props === null || props === void 0 ? void 0 : props.acceptIcon) || "pi pi-check", onClick: handleAccept, className: "p-button-text" }), (props === null || props === void 0 ? void 0 : props.rejectLabel) && ((0, jsx_runtime_1.jsx)(button_1.Button, { label: props === null || props === void 0 ? void 0 : props.rejectLabel, icon: (props === null || props === void 0 ? void 0 : props.rejectIcon) || "pi pi-times", onClick: handleReject, className: "p-button-text" })), (props === null || props === void 0 ? void 0 : props.showCancel) && ((0, jsx_runtime_1.jsx)(button_1.Button, { label: "Cancel", icon: "pi pi-ban", onClick: handleCancel, className: "p-button-text" }))] }));
-    return ((0, jsx_runtime_1.jsx)(dialog_1.Dialog, { header: (props === null || props === void 0 ? void 0 : props.header) || "Confirm", visible: visible, style: { width: "50vw" }, footer: dialogFooter, onHide: handleCancel, children: (0, jsx_runtime_1.jsxs)("div", { className: "a-pt-3 a-flex a-items-center a-gap-2", children: [(props === null || props === void 0 ? void 0 : props.icon) && (0, jsx_runtime_1.jsx)("i", { className: props.icon + " a-text-3xl" }), props === null || props === void 0 ? void 0 : props.message] }) }));
-});
-exports.default = ConfirmationDialog;

package/dist/cjs/editor/Debug.js

@@ -1,26 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Debug = void 0;
-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, }) {
-    if (!component && !page)
-        return;
-    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

@@ -1,7 +0,0 @@
-"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

@@ -1,41 +0,0 @@
-"use strict";
-"use client";
-Object.defineProperty(exports, "__esModule", { value: true });
-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 __1 = require("..");
-const SingleLineText_1 = require("./fieldTypes/SingleLineText");
-function DictionaryEditor({ dictionary, }) {
-    if (!dictionary)
-        return;
-    const context = (0, __1.useEditContext)();
-    if (!context) {
-        console.log("Context is undefined!");
-        return;
-    }
-    let entries = Object.keys(dictionary).map((k) => ({
-        key: k,
-        field: dictionary[k],
-        translation: dictionary[k].value,
-    }));
-    entries = [
-        ...entries,
-        ...context === null || context === void 0 ? void 0 : context.unresolvedDictionaryKeys.map((x) => ({
-            key: x,
-            field: null,
-            translation: "[undefined]",
-        })),
-    ];
-    entries.sort((a, b) => (a.key > b.key ? -1 : 1));
-    const textEditor = (options) => {
-        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;
-    };
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(datatable_1.DataTable, { value: entries, children: [(0, jsx_runtime_1.jsx)(column_1.Column, { field: "key", header: "Key" }), (0, jsx_runtime_1.jsx)(column_1.Column, { field: "translation", header: "Translation", editor: (options) => textEditor(options) })] }) }));
-}
-exports.DictionaryEditor = DictionaryEditor;

package/dist/cjs/editor/EditFrame.js

@@ -1,129 +0,0 @@
-"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("..");
-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 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();
-        e.preventDefault();
-        if (clientComponent) {
-            const s = e.ctrlKey ? [...selection] : [];
-            if (s.indexOf(clientComponent.id) < 0)
-                s.push(clientComponent.id);
-            setSelection(s);
-        }
-    }
-    let classNames = "a-editframe";
-    let color = clientComponent.linkItemId ? "orange-400" : "sky-400";
-    if (clientComponent.hostingPageItem)
-        color = "purple-400";
-    if (isSelected)
-        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;
-        event.dataTransfer.setData("text/plain", clientComponent.id);
-        event.dataTransfer.setData("alpaca", clientComponent.id);
-        setTimeout(() => {
-            editContext.dragStart({
-                type: "component",
-                templateId: clientComponent.templateId,
-                component: {
-                    id: clientComponent.id,
-                    language: editContext.page.language,
-                    version: editContext.page.version,
-                    name: clientComponent.name,
-                },
-            });
-        }, 50);
-        event.stopPropagation();
-    }
-    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 (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

@@ -1,43 +0,0 @@
-"use strict";
-"use client";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.EditHistory = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-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 ", (_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.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 });
-    };
-    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.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

@@ -1,27 +0,0 @@
-"use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Editor = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const __1 = require("..");
-const EditorClientHost_1 = require("./EditorClientHost");
-function Editor({ children, content, }) {
-    return __awaiter(this, void 0, void 0, function* () {
-        const data = yield content;
-        if (data.type !== "page")
-            return;
-        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, site: alpacaContext.pageContext.site.name, children: children }) }));
-    });
-}
-exports.Editor = Editor;