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

package/dist/editor/services/serviceHelper.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.post = post;
+exports.get = get;
+async function post(url, body, session) {
+    if (session)
+        url += "?sessionId=" + session;
+    const response = await fetch(url, {
+        method: "POST",
+        body: JSON.stringify(body),
+        credentials: "include",
+        headers: {
+            "Content-Type": "application/json",
+        },
+    });
+    return handleResponse(response);
+}
+async function get(url, session) {
+    if (session)
+        url += "?sessionId=" + session;
+    const response = await fetch(url, {
+        method: "GET",
+        credentials: "include",
+        headers: {
+            "Content-Type": "application/json",
+        },
+    });
+    return handleResponse(response);
+}
+async function handleResponse(response) {
+    if (response.status === 400) {
+        const data = await response.json();
+        return {
+            type: "error",
+            summary: data.summary,
+            details: data.details,
+            response,
+        };
+    }
+    if (response.status === 500 || response.redirected) {
+        return {
+            type: "error",
+            summary: "Error",
+            details: await response.text(),
+            response,
+        };
+    }
+    if (response.status === 401) {
+        return {
+            type: "unauthorized",
+            summary: "Unauthorized",
+            details: "Not logged in anymore?",
+            response,
+        };
+    }
+    if (response.status !== 200) {
+        return { type: "error", response, details: await response.text() };
+    }
+    if (!response.headers.get("content-type")?.includes("application/json")) {
+        return {
+            type: "success",
+            response,
+        };
+    }
+    const data = (await response.json());
+    return { type: "success", response, data };
+}

package/dist/editor/services/systemService.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSystemStatus = getSystemStatus;
+const serviceHelper_1 = require("./serviceHelper");
+function getSystemStatus() {
+    return (0, serviceHelper_1.get)("/alpaca/editor/status");
+}

package/dist/editor/services/translationService.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.requestTranslation = requestTranslation;
+exports.getTranslationStatus = getTranslationStatus;
+exports.getTranslationProviders = getTranslationProviders;
+const serviceHelper_1 = require("./serviceHelper");
+async function requestTranslation({ itemId, targetLanguage, sourceLanguage, sessionId, provider }) {
+    return await (0, serviceHelper_1.post)("/alpaca/editor/translation/requestTranslation", { itemId, targetLanguage, sourceLanguage, sessionId, provider });
+}
+async function getTranslationStatus(itemId) {
+    return await (0, serviceHelper_1.get)(`/alpaca/editor/translation/getTranslations?itemId=${itemId}`);
+}
+async function getTranslationProviders() {
+    return await (0, serviceHelper_1.get)(`/alpaca/editor/translation/providers`);
+}

package/dist/editor/services-server/api.js

@@ -0,0 +1,119 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.apiGet = apiGet;
+exports.apiPostObject = apiPostObject;
+exports.getApiKey = getApiKey;
+exports.getApiHeaders = getApiHeaders;
+require("server-only");
+const headers_1 = require("next/headers");
+const axios_1 = __importDefault(require("axios"));
+async function apiGet(route, config) {
+    const url = process.env.LAYOUT_SERVICE_URL + route;
+    const requestHeaders = getRequestHeaders(config);
+    try {
+        const response = await axios_1.default.get(url, {
+            headers: requestHeaders,
+        });
+        return {
+            data: response.data,
+            status: response.status,
+            headers: convertAxiosHeaders(response.headers),
+        };
+    }
+    catch (error) {
+        if (error.response) {
+            return {
+                status: error.response.status,
+                error: error.response.statusText,
+                headers: convertAxiosHeaders(error.response.headers),
+            };
+        }
+        else {
+            return {
+                status: 500,
+                error: error.message,
+                headers: convertAxiosHeaders(error.response.headers),
+            };
+        }
+    }
+}
+function getRequestHeaders(config) {
+    const requestHeaders = {};
+    // Convert Headers (node-fetch) to AxiosRequestHeaders (plain object)
+    if (config?.headers) {
+        config.headers.forEach((value, key) => {
+            requestHeaders[key] = value;
+        });
+    }
+    // Set default headers
+    requestHeaders["Content-Type"] = "application/json";
+    requestHeaders["x-api-key"] = config?.apiKey ?? getApiKey();
+    return requestHeaders;
+}
+async function apiPostObject(route, object, config) {
+    const url = process.env.LAYOUT_SERVICE_URL + route;
+    const requestHeaders = getRequestHeaders(config);
+    const body = JSON.stringify(object);
+    try {
+        const response = await axios_1.default.post(url, body, {
+            headers: requestHeaders,
+        });
+        return {
+            data: response.data,
+            status: response.status,
+            headers: convertAxiosHeaders(response.headers),
+        };
+    }
+    catch (error) {
+        if (error.errors) {
+            let message = "";
+            error.errors.forEach((error) => {
+                message += error.message + " ";
+            });
+            return {
+                status: 500,
+                error: message,
+                headers: new Headers(),
+            };
+        }
+        if (error.response) {
+            return {
+                status: error.response.status,
+                error: error.response.statusText,
+                headers: convertAxiosHeaders(error.response.headers),
+            };
+        }
+        else {
+            return {
+                status: 500,
+                error: error.message,
+                headers: new Headers(),
+            };
+        }
+    }
+}
+function getApiKey() {
+    const apiKey = process.env.ALPACA_HEADLESS_API_KEY || process.env.API_KEY;
+    if (!apiKey)
+        console.log("ERROR: Could not find API key environment variable: ALPACA_HEADLESS_API_KEY");
+    return apiKey;
+}
+function convertAxiosHeaders(headers) {
+    const convertedHeaders = new Headers();
+    for (const key in headers) {
+        if (headers.hasOwnProperty(key)) {
+            convertedHeaders.set(key.toLowerCase(), headers[key]);
+        }
+    }
+    return convertedHeaders;
+}
+async function getApiHeaders() {
+    const requestHeaders = await (0, headers_1.headers)();
+    const apiHeaders = new Headers();
+    apiHeaders.set("Cookie", requestHeaders.get("Cookie") || "");
+    apiHeaders.set("Authorization", requestHeaders.get("Authorization") || "");
+    return apiHeaders;
+}

package/dist/editor/services-server/graphQL.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.executeGraphQLQuery = executeGraphQLQuery;
+exports.getGraphQLSchema = getGraphQLSchema;
+const api_1 = require("../services-server/api");
+async function executeGraphQLQuery({ query, host, path, language, mode, itemId, version, 
+// tags,
+// revalidate,
+siteName, schema, sessionId, apiConfig, }) {
+    let url = "/alpaca/headless/graphql";
+    if (sessionId)
+        url += "?sessionId=" + sessionId;
+    //console.log(`GraphQL query:`, query);
+    const request = {
+        Query: query,
+        Host: host,
+        Path: path,
+        ItemId: itemId,
+        Language: language,
+        Version: version,
+        Mode: mode,
+        SiteName: siteName,
+        Schema: schema,
+    };
+    //TODO: cache:
+    const response = await (0, api_1.apiPostObject)(url, request, apiConfig);
+    if (response.status !== 200) {
+        return { status: response.status, errors: getErrors(response) };
+    }
+    if (response.data?.errors) {
+        return {
+            status: 400,
+            errors: response.data?.errors,
+        };
+    }
+    return {
+        data: response.data?.data,
+        status: response.status,
+        errors: getErrors(response),
+    };
+}
+function getErrors(response) {
+    if (response.data?.errors)
+        return response.data?.errors;
+    if (response.error)
+        return [{ message: response.error }];
+    return undefined;
+}
+async function getGraphQLSchema({ id, apiConfig, }) {
+    let url = "/alpaca/headless/graphql/schema?id=" + id;
+    const response = await (0, api_1.apiGet)(url, apiConfig);
+    if (response.status !== 200) {
+        return { status: response.status, error: response.error };
+    }
+    return response.data;
+}

package/dist/editor/sidebar/ComponentPalette.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComponentPalette = ComponentPalette;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const insertOptions_1 = require("../utils/insertOptions");
+const Icons_1 = require("../ui/Icons");
+const utils_1 = require("../utils");
+const utils_2 = require("primereact/utils");
+const editContext_1 = require("../client/editContext");
+const inputtext_1 = require("primereact/inputtext");
+const react_1 = require("react");
+function ComponentPalette({}) {
+    const editContext = (0, editContext_1.useEditContext)();
+    const [filter, setFilter] = (0, react_1.useState)("");
+    const filterRef = (0, react_1.useRef)(null);
+    const insertOptions = (0, insertOptions_1.getInsertOptionsForCurrentSelection)(editContext);
+    const insertOptionsByGroup = insertOptions.reduce((acc, value) => {
+        const group = value.group || "Other";
+        if (!acc[group]) {
+            acc[group] = [];
+        }
+        acc[group].push(value);
+        return acc;
+    }, {});
+    return ((0, jsx_runtime_1.jsx)("div", { className: "h-full relative tour-component-palette", children: (0, jsx_runtime_1.jsxs)("div", { className: "overflow-y-auto absolute inset-0", children: [(0, jsx_runtime_1.jsx)("div", { className: "p-4", children: (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { ref: filterRef, className: "w-full text-sm", placeholder: "Filter components", onChange: (e) => setFilter(e.target.value) }) }), Object.keys(insertOptionsByGroup)
+                    .sort()
+                    .map((group, index) => {
+                    const options = insertOptionsByGroup[group].filter((x) => !x.isHidden).filter((x) => x.name.toLowerCase().indexOf(filter.toLowerCase()) > -1);
+                    if (options.length === 0)
+                        return;
+                    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_2.classNames)("m-4", index > 0 ? " border-t border-gray-200" : ""), children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-xs font-bold mt-2 mb-3 flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(Icons_1.ArrowDownIcon, {}), " ", group] }), (0, jsx_runtime_1.jsx)("div", { className: "grid gap-4 grid-cols-[repeat(auto-fill,_minmax(70px,_1fr))]", children: options.map((option) => {
+                                    function handleDragStart(event) {
+                                        editContext?.dragStart({
+                                            type: "template",
+                                            typeId: option.typeId,
+                                            name: option.name,
+                                        });
+                                        event.stopPropagation();
+                                    }
+                                    function handleDragEnd() {
+                                        editContext.dragEnd();
+                                        editContext.setSelectedForInsertion("");
+                                    }
+                                    const isDraggable = !option.isInvalid;
+                                    return ((0, jsx_runtime_1.jsxs)("div", { id: "insert-component-" + option.typeId, onClick: () => {
+                                            editContext.setSelectedForInsertion(option.typeId);
+                                        }, draggable: isDraggable, onDragStart: handleDragStart, onDragEnd: handleDragEnd, className: (0, utils_2.classNames)("p-2 border border-gray-200 flex items-center flex-col gap-2 text-center text-xs relative rounded break-all ", isDraggable ? "cursor-grab" : "", editContext.selectedForInsertion === option.typeId
+                                            ? "border-sky-500"
+                                            : ""), "data-testid": "insert-component-option", children: [option.svg && ((0, jsx_runtime_1.jsx)("div", { className: "w-8 h-8", dangerouslySetInnerHTML: { __html: option.svg } })), !option.svg && ((0, jsx_runtime_1.jsx)("img", { src: (0, utils_1.getAbsoluteIconUrl)(option.icon), width: "32", height: "32" })), (0, jsx_runtime_1.jsx)("div", { className: "text-xs", children: option.name
+                                                    .split(new RegExp(`(${filter})`, "i"))
+                                                    .map((part, i) => part.toLowerCase() === filter.toLowerCase() &&
+                                                    part ? ((0, jsx_runtime_1.jsx)("u", { className: "font-bold", children: part }, i)) : (part && (0, jsx_runtime_1.jsx)("span", { children: part }, i))) }), option.isInvalid && ((0, jsx_runtime_1.jsx)("i", { className: "pi pi-exclamation-triangle text-red-500 absolute top-0 right-0", title: option.message }))] }, option.typeId));
+                                }) })] }, group));
+                })] }) }));
+}

package/dist/editor/sidebar/ComponentTree.js

@@ -0,0 +1,362 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComponentTree = ComponentTree;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const editContext_1 = require("../client/editContext");
+const react_1 = require("react");
+const confirmdialog_1 = require("primereact/confirmdialog");
+const componentCommands_1 = require("../commands/componentCommands");
+const PerfectTree_1 = require("../ui/PerfectTree");
+const componentTreeHelper_1 = require("../componentTreeHelper");
+function ComponentTree({}) {
+    const [expandedKeys, setExpandedKeys] = (0, react_1.useState)([]);
+    const [selectedKeys, setSelectedKeys] = (0, react_1.useState)([]);
+    const [rootNodes, setRootNodes] = (0, react_1.useState)([]);
+    const [nodeDictionary, setNodeDictionary] = (0, react_1.useState)({});
+    let editContextRef = (0, editContext_1.useEditContextRef)();
+    const editContext = (0, editContext_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-id="${selectedNodeKey}"]`);
+            if (selectedNodeElement) {
+                selectedNodeElement.scrollIntoView({
+                    behavior: "smooth",
+                    block: "nearest",
+                });
+            }
+        }
+    }, [selectedKeys]);
+    (0, react_1.useEffect)(() => {
+        if (editContext?.selection) {
+            setSelectedKeys(editContext.selection);
+        }
+    }, [editContext?.selection]);
+    const selection = editContext?.selection || [];
+    const page = editContext?.page;
+    (0, react_1.useEffect)(() => {
+        const newExpandedKeys = [...expandedKeys];
+        for (const id of selection) {
+            if (nodeDictionary[id]?.parent) {
+                expandParents(nodeDictionary[id].parent, newExpandedKeys);
+            }
+        }
+        if (newExpandedKeys.length !== expandedKeys.length ||
+            !newExpandedKeys.every((key, i) => key === expandedKeys[i])) {
+            setExpandedKeys(newExpandedKeys);
+        }
+    }, [selection, nodeDictionary]);
+    function mapPlaceholderNode(p, parent) {
+        const node = {
+            key: p.key,
+            componentId: p.key,
+            label: p.name,
+            icon: "pi pi-folder",
+            data: p,
+            parent: parent,
+            type: "placeholder",
+        };
+        node.children = p.components.map((c) => mapComponentNode(c, node));
+        return node;
+    }
+    function mapPlaceholders(c, parent) {
+        if (!c?.placeholders)
+            return [];
+        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.id,
+            componentId: c.id,
+            label: c.name,
+            icon: "pi pi-stop",
+            data: c,
+            parent: parent,
+            tags: [],
+            className: c.isRemovedFromMasterLanguage ? "text-gray-400" : "",
+            type: "component",
+        };
+        if (c.isInheritedFromMasterLanguage) {
+            node.tags.push({
+                id: "inherited",
+                severity: "info",
+                value: "Inherited " + (c.isRemovedFromMasterLanguage ? " / removed" : ""),
+                tooltip: c.isRemovedFromMasterLanguage
+                    ? "Component was removed from master language"
+                    : "Component is inherited from master language",
+                icon: "pi pi-caret-right",
+            });
+        }
+        if (c.layoutId) {
+            node.tags.push({
+                id: "layout",
+                severity: "warning",
+                value: "Layout",
+                icon: "",
+                color: "rgb(192 132 252)",
+                tooltip: "Component is inherited from layout. Click to edit layout.",
+                onClick: async () => {
+                    if (!editContext || !c.layoutId)
+                        return;
+                    const hostItem = await editContext.itemsRepository.getItem({
+                        id: c.layoutId,
+                        language: page.item.language,
+                        version: 0,
+                    });
+                    if (!hostItem)
+                        return;
+                    (0, confirmdialog_1.confirmDialog)({
+                        header: "Edit layout",
+                        message: "Edit layout " + hostItem.path + "?",
+                        accept: () => editContext.loadItem({
+                            id: c.layoutId,
+                            language: page.item.language,
+                            version: 0,
+                        }),
+                    });
+                },
+            });
+        }
+        if (c.datasourceItem && c.datasourceItem?.id !== c.id) {
+            node.tags.push({
+                id: "linked",
+                severity: "warning",
+                value: "Shared",
+                icon: "",
+                tooltip: "Component is linked to " + c.datasourceItem?.id,
+                color: "rgb(251, 146, 60)",
+            });
+        }
+        node.children = mapPlaceholders(c, node);
+        if (c.items.length > 0 && c.items[0].id !== c.datasourceItem?.id) {
+            const itemsNode = {
+                key: "items" + c.id,
+                label: "items",
+                icon: "pi pi-circle",
+                parent: node,
+                type: "items",
+            };
+            itemsNode.children = c.items.map((x) => {
+                const itemNode = {
+                    key: x.id,
+                    label: x.name,
+                    icon: "pi pi-file",
+                    parent: itemsNode,
+                    type: "item",
+                };
+                return itemNode;
+            });
+            node.children.push(itemsNode);
+        }
+        return node;
+    }
+    (0, react_1.useEffect)(() => {
+        if (!page)
+            return;
+        const treeNodes = mapPlaceholders(page.rootComponent, {
+            key: "root",
+            label: "Root",
+            icon: "pi pi-home",
+            children: [],
+            type: "placeholder",
+        });
+        const dict = {};
+        createMap(treeNodes, dict);
+        const otherNode = {
+            key: "other",
+            label: "Other",
+            icon: "pi pi-file",
+            children: [],
+            type: "other",
+        };
+        if (otherNode.children?.length)
+            treeNodes.push(otherNode);
+        const pageNode = {
+            key: "page",
+            label: "Page",
+            icon: "pi pi-home",
+            parent: undefined,
+            componentId: page.item.id,
+            type: "page",
+        };
+        setRootNodes([pageNode, ...treeNodes]);
+        setNodeDictionary(dict);
+    }, [page]);
+    const handleTreeSelection = (key, event) => {
+        let newKeys = [key];
+        if (event.ctrlKey) {
+            if (selectedKeys.includes(key)) {
+                newKeys = selectedKeys.filter((x) => x !== key);
+            }
+            else {
+                newKeys = [...selectedKeys, key];
+            }
+        }
+        const selectedComponentIds = newKeys
+            .filter((key) => nodeDictionary[key])
+            .map((key) => nodeDictionary[key].componentId);
+        editContextRef.current?.select(selectedComponentIds);
+        if (selectedComponentIds.length === 1) {
+            editContextRef.current?.setScrollIntoView(selectedComponentIds[0]);
+        }
+    };
+    // Handle tree context menu
+    const handleTreeContextMenu = (item, event) => {
+        const componentId = nodeDictionary[item.id]?.componentId;
+        let selectedComponentIds = editContext?.selection || [];
+        if (componentId) {
+            if (selectedComponentIds.indexOf(componentId) < 0) {
+                editContextRef.current?.select([componentId]);
+                selectedComponentIds = [componentId];
+            }
+        }
+        function isDefinedEntity(entity) {
+            return entity !== undefined;
+        }
+        let selectedEntities = selectedComponentIds
+            .filter((key) => nodeDictionary[key])
+            .map((key) => nodeDictionary[key].data)
+            .filter(isDefinedEntity);
+        if (selectedEntities.length === 0 && item.data) {
+            selectedEntities = [item.data];
+        }
+        let commands = (0, componentCommands_1.getComponentCommands)(selectedEntities, editContextRef.current);
+        const menu = commands.map((x) => ({
+            label: x.label,
+            icon: x.icon,
+            disabled: editContextRef.current?.isCommandDisabled({
+                command: x,
+            }),
+            command: (ev) => {
+                editContextRef.current?.executeCommand({
+                    command: x,
+                    data: { components: selectedEntities },
+                    event: ev.originalEvent,
+                });
+            },
+        }));
+        editContextRef.current?.showContextMenu(event, menu);
+    };
+    // Convert expanded keys for PerfectTree
+    const expandedItems = expandedKeys;
+    // Convert selected keys for PerfectTree
+    const selectedItems = selectedKeys;
+    // Handle expanding nodes
+    const handleToggle = (key) => {
+        if (expandedKeys.includes(key)) {
+            handleCollapseItem(key);
+        }
+        else {
+            const newExpandedKeys = [...expandedKeys];
+            newExpandedKeys.push(key);
+            setExpandedKeys(newExpandedKeys);
+        }
+    };
+    // Handle collapsing nodes
+    const handleCollapseItem = (key) => {
+        // First, get the node we're collapsing
+        const nodeToCollapse = nodeDictionary[key];
+        // Create a new array for expanded keys
+        const newExpandedKeys = [...expandedKeys].filter((x) => x !== key);
+        setExpandedKeys(newExpandedKeys);
+    };
+    const getPlaceholder = (node) => {
+        if (!node)
+            return null;
+        if (node.type === "placeholder")
+            return node.data;
+        if (node.type === "component" && node.data.placeholders) {
+            if (node.data.placeholders.length === 1)
+                return node.data.placeholders[0];
+        }
+        return null;
+    };
+    // Handle drag over node
+    const handleDragOverZone = (dragOverNode, index, event) => {
+        if (!editContext?.dragObject)
+            return false;
+        const placeholder = getPlaceholder(dragOverNode);
+        if (!placeholder)
+            return false;
+        var isValid = (0, componentTreeHelper_1.isValidPlaceholder)(placeholder, editContext.dragObject);
+        return isValid;
+    };
+    // Handle drop on node
+    const handleDropZone = (droppedOnNode, index, event) => {
+        const placeholder = getPlaceholder(droppedOnNode);
+        if (!placeholder)
+            return;
+        editContext.droppedInPlaceholder(placeholder.key, index);
+    };
+    if (!page)
+        return ((0, jsx_runtime_1.jsx)("div", { className: "flex h-full items-center justify-center text-sm text-gray-500" }));
+    // Use the PerfectTree component
+    return ((0, jsx_runtime_1.jsx)("div", { className: "p-2", ref: treeRef, children: (0, jsx_runtime_1.jsx)(PerfectTree_1.PerfectTree, { nodes: rootNodes, isDragging: !!editContext?.dragObject, selectedKeys: selectedItems, expandedKeys: expandedItems, onToggleExpand: handleToggle, onSelect: handleTreeSelection, enableDragAndDrop: true, onDragOverZone: (parent, index, event) => handleDragOverZone(parent, index, event), onStartDrag: (data) => {
+                const component = data.node.data;
+                // Initialize drag data to make sure dataTransfer is set
+                data.event.dataTransfer.setData("text/plain", data.node.key);
+                // Only create drag object for components with datasourceItem
+                if (!component?.datasourceItem)
+                    return;
+                editContext.dragStart({
+                    type: "component",
+                    typeId: component.typeId,
+                    templateId: component.datasourceItem?.templateId,
+                    name: component.name,
+                    component: {
+                        id: component.id,
+                        language: editContext.page.item.language,
+                        version: editContext.page.item.version,
+                    },
+                });
+            }, onDragEnd: (event) => {
+                editContext.dragEnd();
+            }, onDrop: (parent, index, event) => handleDropZone(parent, index, event), renderNode: (node) => renderNode(node) }) }));
+}
+function renderNode(node) {
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("div", { className: "font-geist-sans flex items-center gap-2 p-0.5 text-[12px] text-gray-600", children: [(0, jsx_runtime_1.jsx)("i", { className: node.icon }), (0, jsx_runtime_1.jsx)("span", { className: node.className, children: node.label }), node.tags?.map((x) => ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("span", { id: `id-${node.key}-${x.id}`, className: "ml-2 rounded px-1 py-0.5 text-xs", style: {
+                            backgroundColor: x.color,
+                            marginLeft: "8px",
+                            fontSize: "10px",
+                            padding: "1px 4px 2px 2px",
+                        }, title: x.tooltip, onClick: x.onClick
+                            ? (e) => {
+                                e.stopPropagation();
+                                x.onClick();
+                            }
+                            : undefined, children: [x.icon && (0, jsx_runtime_1.jsx)("i", { className: x.icon }), x.value] }) }, `tag-${node.key}-${x.id}`)))] }) }));
+}
+function createMap(treeNodes, nodeDictionary) {
+    treeNodes.forEach((n) => {
+        if (n.key)
+            nodeDictionary[n.key] = n;
+        if (n.children)
+            createMap(n.children, nodeDictionary);
+    });
+}
+function expandParents(node, expandedKeysList) {
+    if (!node)
+        return;
+    if (node.key && !expandedKeysList.includes(node.key)) {
+        expandedKeysList.push(node.key);
+    }
+    if (node.parent) {
+        expandParents(node.parent, expandedKeysList);
+    }
+}
+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;
+}