@alpaca-headless/alpaca-headless-nextjs 0.0.4 → 1.0.19

package/dist/cjs/editor/AiTerminal.js

@@ -0,0 +1,161 @@
+"use strict";
+"use client";
+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.AiTerminal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const terminalservice_1 = require("primereact/terminalservice");
+const navigation_1 = require("next/navigation");
+const Terminal_1 = require("./Terminal");
+function AiTerminal({ requestRefresh, selection, }) {
+    const searchParams = (0, navigation_1.useSearchParams)();
+    const [messages, setMessages] = (0, react_1.useState)([]);
+    const [tokens, setTokens] = (0, react_1.useState)({ in: 0, out: 0 });
+    const selectionRef = (0, react_1.useRef)(selection);
+    (0, react_1.useEffect)(() => {
+        selectionRef.current = selection;
+    }, [selection]);
+    const messagesRef = (0, react_1.useRef)(messages);
+    (0, react_1.useEffect)(() => {
+        messagesRef.current = messages;
+    }, [messages]);
+    const router = (0, navigation_1.useRouter)();
+    function commandHandler(text, callback) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const newMessages = [
+                ...messagesRef.current,
+                { content: text, role: "user", name: "user" },
+            ];
+            let lastRefresh = new Date().getTime();
+            const response = yield prompt(newMessages, selectionRef.current, searchParams.get("session"), searchParams.get("itemid"), searchParams.get("language"), searchParams.get("version"), (response) => {
+                console.log(response);
+                setTokens({
+                    in: response.numInputTokens,
+                    out: response.numOutputTokens,
+                });
+                handleResponse(response, callback, false);
+                if (response.editOperations.length) {
+                    if (new Date().getTime() - lastRefresh > 500) {
+                        requestRefresh(false);
+                        router.refresh();
+                        lastRefresh = new Date().getTime();
+                    }
+                }
+            });
+            if (response) {
+                handleResponse(response, callback, true);
+                setTokens({ in: response.numInputTokens, out: response.numOutputTokens });
+                router.refresh();
+            }
+            // if (response) {
+            //     messages.push({content: text, 'role': 'assistant', 'name': 'assistant'});
+            // if(response.editOperations) {
+            //       const newEditOperations = [...editOperationsRef.current, {
+            //         type:'composite',
+            //         name: 'ghostwriter',
+            //         date: new Date(),
+            //         operations: response.editOperations
+            //       }];
+            //       setEditOperations(newEditOperations);
+            // }
+            if (response === null || response === void 0 ? void 0 : response.responseText)
+                newMessages.push({
+                    content: response.responseText,
+                    role: "assistant",
+                    name: "assistant",
+                });
+            //     TerminalService.emit('response', response.responseText);
+            // }
+            // // else
+            // //     TerminalService.emit('clear');
+            setMessages(newMessages);
+        });
+    }
+    (0, react_1.useEffect)(() => {
+        terminalservice_1.TerminalService.on("command", commandHandler);
+        return () => {
+            terminalservice_1.TerminalService.off("command", commandHandler);
+        };
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "a-h-full a-flex a-flex-col a-relative", children: [(0, jsx_runtime_1.jsx)("div", { className: "a-flex-1 a-relative", children: (0, jsx_runtime_1.jsx)("div", { className: "a-inset-0 a-absolute", children: (0, jsx_runtime_1.jsx)(Terminal_1.Terminal, { onReset: () => setMessages([]), commandHandler: (v, callback) => {
+                            commandHandler(v, callback);
+                        } }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "a-text-xs", children: ["Tokens in: ", tokens.in, " out: ", tokens.out] })] }));
+}
+exports.AiTerminal = AiTerminal;
+function prompt(messages, selection, session, itemid, language, version, callback) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const response = yield fetch("/alpaca/headless/ai/prompt", {
+            method: "POST",
+            body: JSON.stringify({
+                messages,
+                itemid,
+                language,
+                version,
+                selection,
+                sessionId: session,
+            }),
+            credentials: "omit",
+            headers: {
+                "Content-Type": "application/json",
+                //Cookie: 'test'// new Cookies().getAll(),
+            },
+            next: {
+                revalidate: 0,
+            },
+        });
+        if (!(response === null || response === void 0 ? void 0 : response.body))
+            return null;
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder();
+        let buffer = "";
+        let result = null;
+        while (true) {
+            const { done, value } = yield reader.read();
+            if (done) {
+                break;
+            }
+            buffer += decoder.decode(value, { stream: true }); // 'stream: true' ensures that any incomplete multi-byte characters aren't malformed.
+            // Split the buffer by newline and keep the last partial line for the next iteration.
+            const lines = buffer.split("\n");
+            if (lines.length > 0) {
+                buffer = lines.pop() || ""; // Incomplete line (if any) is kept for the next iteration.
+                for (let line of lines) {
+                    if (line.trim() === "")
+                        continue; // Skip empty lines if any.
+                    try {
+                        const jsonData = JSON.parse(line);
+                        callback(jsonData);
+                        result = jsonData;
+                    }
+                    catch (e) {
+                        console.error("Error parsing line:" + line, e);
+                    }
+                }
+            }
+        }
+        // If there's any remaining content in the buffer after processing all chunks, try to process it.
+        if (buffer.trim() !== "") {
+            try {
+                const jsonData = JSON.parse(buffer);
+                result = jsonData;
+            }
+            catch (e) {
+                console.error("Error parsing the final buffer content:", e);
+            }
+        }
+        return result;
+    });
+}
+function handleResponse(response, terminalCallback, isFinished) {
+    console.log(response.responseText);
+    terminalCallback(response.responseText, isFinished);
+}

package/dist/cjs/editor/ComponentInfo.js

@@ -0,0 +1,14 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComponentInfo = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function ComponentInfo({ component, }) {
+    var _a;
+    if (!(component === null || component === void 0 ? void 0 : component.fields))
+        return;
+    const hostingPageItem = component.hostingPageItem ? ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("div", { className: "a-text-xs", children: ["Source: ", component.hostingPageItem.path, "( ID:", " ", component.hostingPageItem.id, ")"] }) })) : null;
+    const linkedComponent = component.linkedComponentItem ? ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("div", { className: "a-text-xs", children: ["Source: ", component.linkedComponentItem.path] }) })) : null;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "a-p-1", children: [(0, jsx_runtime_1.jsx)("h2", { className: "a-text-xl a-font-bold a-my-2", children: component.name }), (0, jsx_runtime_1.jsxs)("div", { className: "a-text-xs", children: ["ID: ", component.id] }), (0, jsx_runtime_1.jsxs)("div", { className: "a-text-xs", children: ["Languages: ", (_a = component.translations) === null || _a === void 0 ? void 0 : _a.join(", ")] }), hostingPageItem, linkedComponent] }));
+}
+exports.ComponentInfo = ComponentInfo;

package/dist/cjs/editor/ComponentPalette.js

@@ -0,0 +1,78 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComponentPalette = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const __1 = require("..");
+const ContentTree_1 = __importDefault(require("./ContentTree"));
+function ComponentPalette({ selection, page, dragStart, dragEnd, }) {
+    const editContext = (0, __1.useEditContext)();
+    if (!editContext)
+        return;
+    const insertingPlaceholderKeys = selection
+        .map((x) => editContext.getComponentById(x))
+        .filter((x) => x)
+        .reduce((a, x) => a.concat(x.placeholders.map((y) => y.key)), []);
+    const selectedPlaceholderKeys = [
+        ...selection.filter((x) => x.indexOf("_") > 0),
+        ...insertingPlaceholderKeys,
+    ];
+    const insertOptions = collectInsertOptions(page, selectedPlaceholderKeys);
+    // function directInsert() {
+    //   if (editContext!.selectedForInsertion.indexOf("_") > 0) {
+    //     var lastUnderscoreIndex =
+    //       editContext!.selectedForInsertion.lastIndexOf("_");
+    //     const index = editContext!.selectedForInsertion.substring(
+    //       lastUnderscoreIndex + 1
+    //     );
+    //     const key = editContext!.selectedForInsertion.substring(
+    //       0,
+    //       lastUnderscoreIndex
+    //     );
+    //     editContext!.droppedInPlaceholder(key, parseInt(index));
+    //   }
+    // }
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", { className: "a-text-xl a-font-bold a-mb-8", children: "New" }), (0, jsx_runtime_1.jsx)("div", { className: "a-grid a-grid-cols-4 a-gap-1", children: insertOptions.map((option) => {
+                    function handleDragStart(event) {
+                        dragStart({ type: "template", templateId: option.id });
+                        event.stopPropagation();
+                    }
+                    function handleDragEnd() {
+                        dragEnd();
+                    }
+                    return ((0, jsx_runtime_1.jsxs)("div", { 
+                        //    onClick={directInsert}
+                        draggable: true, onDragStart: handleDragStart, onDragEnd: handleDragEnd, className: "p-3 shadow-md flex items-center flex-col gap-1 cursor-grab", children: [(0, jsx_runtime_1.jsx)("img", { src: option.icon, width: "32", height: "32" }), option.name] }, option.id));
+                }) }), (0, jsx_runtime_1.jsx)("h2", { className: "a-text-xl a-font-bold a-my-8", children: "Existing" }), (0, jsx_runtime_1.jsx)(ContentTree_1.default, { rootItemId: "0DE95AE4-41AB-4D01-9EB0-67441B7C2450", dragStart: (itemNode) => {
+                    dragStart({
+                        type: "link-component",
+                        templateId: itemNode.templateId,
+                        componentId: itemNode.id,
+                    });
+                }, expandIdPath: page.idPath, dragEnd: dragEnd, isDraggable: (x) => x.isComponent &&
+                    (insertOptions === null || insertOptions === void 0 ? void 0 : insertOptions.find((insertOption) => insertOption.id == x.templateId)) != undefined })] }));
+}
+exports.ComponentPalette = ComponentPalette;
+function collectInsertOptions(page, placeholderKeys) {
+    const insertOptionsMap = new Map();
+    function traverse(placeholders) {
+        for (const placeholder of placeholders) {
+            if (placeholder.insertOptions &&
+                (placeholderKeys.length === 0 ||
+                    placeholderKeys.includes(placeholder.key))) {
+                for (const option of placeholder.insertOptions) {
+                    insertOptionsMap.set(option.id, option);
+                }
+            }
+            for (const component of placeholder.components) {
+                traverse(component.placeholders);
+            }
+        }
+    }
+    traverse(page.placeholders);
+    // Convert the map back into an array of objects
+    const insertOptionsArray = Array.from(insertOptionsMap.values());
+    return insertOptionsArray;
+}

package/dist/cjs/editor/ComponentTree.js

@@ -0,0 +1,200 @@
+"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");
+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,
+    };
+    if (c.translations && c.translations.length > 1)
+        node.tags.push({
+            severity: "info",
+            value: c.translations.length + " Languages",
+            icon: "pi pi-flag",
+        });
+    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"),
+                });
+            },
+        });
+    }
+    node.children = mapPlaceholders(c, node);
+    return node;
+}
+// function selectTreeNode(event: TreeSelectionEvent): void {
+//   editContext.setSelection(event.value.keys());
+// }
+function ComponentTree({ page, selection, }) {
+    const [expandedKeys, setExpandedKeys] = (0, react_1.useState)({
+        "0": true,
+    });
+    const [selectedKeys, setSelectedKeys] = (0, react_1.useState)();
+    const cm = (0, react_1.useRef)(null);
+    let editContext = (0, __1.useEditContext)();
+    (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 (!page)
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+    const componentsNode = {
+        key: "0",
+        componentId: "0",
+        label: "Components",
+        data: "Components Folder",
+        icon: "pi pi-fw pi-list",
+    };
+    componentsNode.children = mapPlaceholders(page, componentsNode);
+    const treeNodes = [componentsNode];
+    const nodeDictionary = {};
+    createMap(treeNodes, nodeDictionary);
+    const nodeTemplate = (node, options) => {
+        var _a;
+        let label = ((0, jsx_runtime_1.jsxs)("span", { "data-key": node.key, className: "flex", 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" } }, x.value)))] }));
+        return (0, jsx_runtime_1.jsx)("span", { className: options.className, children: label });
+    };
+    const menu = [
+        {
+            label: "View Key",
+            icon: "pi pi-search",
+            command: () => {
+                //  toast.current.show({ severity: 'success', summary: 'Node Key', detail: selectedNodeKey });
+            },
+        },
+        {
+            label: "Toggle",
+            icon: "pi pi-sort",
+            command: () => {
+                // let _expandedKeys = { ...expandedKeys };
+                // if (_expandedKeys[selectedNodeKey]) delete _expandedKeys[selectedNodeKey];
+                // else _expandedKeys[selectedNodeKey] = true;
+                // setExpandedKeys(_expandedKeys);
+            },
+        },
+    ];
+    function findNode(ev) {
+        const treeNodeParent = ev.target.closest(".p-treenode");
+        if (treeNodeParent) {
+            const childWithDataKey = treeNodeParent.querySelector("[data-key]");
+            if (childWithDataKey) {
+                return childWithDataKey;
+            }
+        }
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { onDragOverCapture: (ev) => {
+            var _a;
+            if (!findNode(ev))
+                ev.dataTransfer.dropEffect = "none";
+            ev.dataTransfer.dropEffect =
+                ((_a = editContext === null || editContext === void 0 ? void 0 : editContext.dragObject) === null || _a === void 0 ? void 0 : _a.type) == "template" ? "copy" : "move";
+            ev.preventDefault();
+            ev.stopPropagation();
+        }, onDropCapture: (ev) => {
+            var node = findNode(ev);
+            if (node)
+                alert(node.getAttribute("data-key"));
+            ev.stopPropagation();
+        }, 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", 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);
+                    }
+                    else {
+                        editContext === null || editContext === void 0 ? void 0 : editContext.setSelection([]);
+                    }
+                }, onContextMenu: (e) => { var _a; return (_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/ContentTree.js

@@ -0,0 +1,120 @@
+"use strict";
+"use client";
+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 });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const progressspinner_1 = require("primereact/progressspinner");
+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 [treeNodes, setTreeNodes] = (0, react_1.useState)([]);
+    const [expandedKeys, setExpandedKeys] = (0, react_1.useState)();
+    const editContext = (0, __1.useEditContext)();
+    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;
+    });
+    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;
+    });
+    (0, react_1.useEffect)(() => {
+        const treeNodes = [
+            {
+                key: rootItemId.toLowerCase(),
+                label: "content",
+                leaf: false,
+            },
+        ];
+        const newExpandedKeys = getExpandedKeys();
+        setExpandedKeys(newExpandedKeys);
+        preLoadNodes(newExpandedKeys, treeNodes);
+        setTreeNodes(treeNodes);
+    }, []);
+    function getExpandedKeys() {
+        const newExpandedKeys = {};
+        newExpandedKeys[rootItemId.toLocaleLowerCase()] = true;
+        const idPathArray = expandIdPath.split("/");
+        idPathArray.forEach((x) => {
+            if (x !== "")
+                newExpandedKeys[x.substring(1, x.length - 1).toLowerCase()] = true;
+        });
+        return newExpandedKeys;
+    }
+    function preLoadNodes(expandedKeys, treeNodes) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield doPreloadNodes(expandedKeys, treeNodes);
+            setExpandedKeys(Object.assign({}, expandedKeys));
+            setTreeNodes([...treeNodes]);
+        });
+    }
+    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]);
+                    yield doPreloadNodes(expandedKeys, children);
+                }
+            }
+        });
+    }
+    const nodeTemplate = (node, options) => {
+        let label = (0, jsx_runtime_1.jsx)("b", { 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" } }))] }));
+    };
+    function handleDragStart(event, item) {
+        if (dragStart)
+            dragStart(item);
+        event.stopPropagation();
+    }
+    function handleDragEnd() {
+        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 }) }));
+}
+exports.default = ContentTree;

package/dist/cjs/editor/Debug.js

@@ -0,0 +1,16 @@
+"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, { 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 }) })] }));
+}
+exports.Debug = Debug;

package/dist/cjs/editor/DictionaryEditor.js

@@ -0,0 +1,35 @@
+"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 inputtext_1 = require("primereact/inputtext");
+const __1 = require("..");
+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,
+        translation: dictionary[k],
+    }));
+    entries = [...entries, ...context === null || context === void 0 ? void 0 : context.unresolvedDictionaryKeys.map(x => ({
+            key: x,
+            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) });
+        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;