@alpaca-editor/core 1.0.0 → 1.0.3

package/dist/editor/services/translationService.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"translationService.js","sourceRoot":"","sources":["../../../src/editor/services/translationService.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAE5C,MAAM,CAAC,KAAK,UAAU,kBAAkB,CAAC,EAAC,MAAM,EAAE,cAAc,EAAE,cAAc,EAAE,SAAS,EAAE,QAAQ,EAAwG;IAC3M,OAAO,MAAM,IAAI,CACf,+CAA+C,EAC/C,EAAE,MAAM,EAAE,cAAc,EAAE,cAAc,EAAE,SAAS,EAAE,QAAQ,EAAG,CACjE,CAAC;AACJ,CAAC;AAGD,MAAM,CAAC,KAAK,UAAU,oBAAoB,CAAC,MAAc;IACvD,OAAO,MAAM,GAAG,CACd,qDAAqD,MAAM,EAAE,CAC9D,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,uBAAuB;IAC3C,OAAO,MAAM,GAAG,CAAW,sCAAsC,CAAC,CAAC;AACrE,CAAC"}

package/dist/editor/services-server/api.d.ts

@@ -0,0 +1,19 @@
+import "server-only";
+export type FetchOptions = {
+    tags?: string[];
+    revalidate?: number | false;
+};
+export type FetchResult = {
+    status: number;
+    error?: string;
+    data?: any;
+    headers: Headers;
+};
+export type ApiConfig = {
+    apiKey?: string;
+    headers?: Headers;
+};
+export declare function apiGet(route: string, config?: ApiConfig): Promise<FetchResult>;
+export declare function apiPostObject(route: string, object: any, config?: ApiConfig): Promise<FetchResult>;
+export declare function getApiKey(): string | undefined;
+export declare function getApiHeaders(): Promise<Headers>;

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

@@ -0,0 +1,111 @@
+import "server-only";
+import { headers } from "next/headers";
+import axios from "axios";
+export async function apiGet(route, config) {
+    const url = process.env.LAYOUT_SERVICE_URL + route;
+    const requestHeaders = getRequestHeaders(config);
+    try {
+        const response = await axios.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;
+}
+export 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.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(),
+            };
+        }
+    }
+}
+export 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;
+}
+export async function getApiHeaders() {
+    const requestHeaders = await headers();
+    const apiHeaders = new Headers();
+    apiHeaders.set("Cookie", requestHeaders.get("Cookie") || "");
+    apiHeaders.set("Authorization", requestHeaders.get("Authorization") || "");
+    return apiHeaders;
+}
+//# sourceMappingURL=api.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"api.js","sourceRoot":"","sources":["../../../src/editor/services-server/api.ts"],"names":[],"mappings":"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"}

package/dist/editor/services-server/graphQL.d.ts

@@ -0,0 +1,29 @@
+import { ApiConfig } from "../services-server/api";
+export type ExecuteGraphQLParams = {
+    query: string;
+    tags?: string[];
+    host?: string;
+    path?: string;
+    language?: string;
+    mode?: string;
+    itemId?: string;
+    version?: number;
+    revalidate?: number;
+    siteName?: string;
+    sessionId?: string;
+    schema?: string;
+    apiConfig?: ApiConfig;
+};
+export declare function executeGraphQLQuery({ query, host, path, language, mode, itemId, version, siteName, schema, sessionId, apiConfig, }: ExecuteGraphQLParams): Promise<{
+    status: number;
+    errors: any;
+    data?: undefined;
+} | {
+    data: any;
+    status: number;
+    errors: any;
+}>;
+export declare function getGraphQLSchema({ id, apiConfig, }: {
+    id: string;
+    apiConfig: ApiConfig;
+}): Promise<any>;

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

@@ -0,0 +1,53 @@
+import { apiGet, apiPostObject } from "../services-server/api";
+export 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 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;
+}
+export async function getGraphQLSchema({ id, apiConfig, }) {
+    let url = "/alpaca/headless/graphql/schema?id=" + id;
+    const response = await apiGet(url, apiConfig);
+    if (response.status !== 200) {
+        return { status: response.status, error: response.error };
+    }
+    return response.data;
+}
+//# sourceMappingURL=graphQL.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"graphQL.js","sourceRoot":"","sources":["../../../src/editor/services-server/graphQL.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,MAAM,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAkB1E,MAAM,CAAC,KAAK,UAAU,mBAAmB,CAAC,EACxC,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,MAAM,EACN,OAAO;AACP,QAAQ;AACR,cAAc;AACd,QAAQ,EACR,MAAM,EACN,SAAS,EACT,SAAS,GACY;IACrB,IAAI,GAAG,GAAG,0BAA0B,CAAC;IAErC,IAAI,SAAS;QAAE,GAAG,IAAI,aAAa,GAAG,SAAS,CAAC;IAEhD,uCAAuC;IAEvC,MAAM,OAAO,GAUT;QACF,KAAK,EAAE,KAAK;QACZ,IAAI,EAAE,IAAI;QACV,IAAI,EAAE,IAAI;QACV,MAAM,EAAE,MAAM;QACd,QAAQ,EAAE,QAAQ;QAClB,OAAO,EAAE,OAAO;QAChB,IAAI,EAAE,IAAI;QACV,QAAQ,EAAE,QAAQ;QAClB,MAAM,EAAE,MAAM;KACf,CAAC;IAEF,cAAc;IAEd,MAAM,QAAQ,GAAG,MAAM,aAAa,CAAC,GAAG,EAAE,OAAO,EAAE,SAAS,CAAC,CAAC;IAE9D,IAAI,QAAQ,CAAC,MAAM,KAAK,GAAG,EAAE,CAAC;QAC5B,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,CAAC,QAAQ,CAAC,EAAE,CAAC;IAClE,CAAC;IAED,IAAI,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,CAAC;QAC1B,OAAO;YACL,MAAM,EAAE,GAAG;YACX,MAAM,EAAE,QAAQ,CAAC,IAAI,EAAE,MAAM;SAC9B,CAAC;IACJ,CAAC;IAED,OAAO;QACL,IAAI,EAAE,QAAQ,CAAC,IAAI,EAAE,IAAI;QACzB,MAAM,EAAE,QAAQ,CAAC,MAAM;QACvB,MAAM,EAAE,SAAS,CAAC,QAAQ,CAAC;KAC5B,CAAC;AACJ,CAAC;AAED,SAAS,SAAS,CAAC,QAAa;IAC9B,IAAI,QAAQ,CAAC,IAAI,EAAE,MAAM;QAAE,OAAO,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACxD,IAAI,QAAQ,CAAC,KAAK;QAAE,OAAO,CAAC,EAAE,OAAO,EAAE,QAAQ,CAAC,KAAK,EAAE,CAAC,CAAC;IACzD,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,gBAAgB,CAAC,EACrC,EAAE,EACF,SAAS,GAIV;IACC,IAAI,GAAG,GAAG,qCAAqC,GAAG,EAAE,CAAC;IAErD,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,GAAG,EAAE,SAAS,CAAC,CAAC;IAE9C,IAAI,QAAQ,CAAC,MAAM,KAAK,GAAG,EAAE,CAAC;QAC5B,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,MAAM,EAAE,KAAK,EAAE,QAAQ,CAAC,KAAK,EAAE,CAAC;IAC5D,CAAC;IAED,OAAO,QAAQ,CAAC,IAAI,CAAC;AACvB,CAAC"}

package/dist/editor/sidebar/ComponentPalette.d.ts

@@ -0,0 +1 @@
+export declare function ComponentPalette({}: {}): import("react/jsx-runtime").JSX.Element;

package/dist/editor/sidebar/ComponentPalette.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getInsertOptionsForCurrentSelection } from "../utils/insertOptions";
+import { ArrowDownIcon } from "../ui/Icons";
+import { getAbsoluteIconUrl } from "../utils";
+import { classNames } from "primereact/utils";
+import { useEditContext } from "../client/editContext";
+import { InputText } from "primereact/inputtext";
+import { useState, useRef } from "react";
+export function ComponentPalette({}) {
+    const editContext = useEditContext();
+    const [filter, setFilter] = useState("");
+    const filterRef = useRef(null);
+    const insertOptions = 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 (_jsx("div", { className: "h-full relative tour-component-palette", children: _jsxs("div", { className: "overflow-y-auto absolute inset-0", children: [_jsx("div", { className: "p-4", children: _jsx(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 (_jsxs("div", { className: classNames("m-4", index > 0 ? " border-t border-gray-200" : ""), children: [_jsxs("div", { className: "text-xs font-bold mt-2 mb-3 flex items-center gap-2", children: [_jsx(ArrowDownIcon, {}), " ", group] }), _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 (_jsxs("div", { id: "insert-component-" + option.typeId, onClick: () => {
+                                            editContext.setSelectedForInsertion(option.typeId);
+                                        }, draggable: isDraggable, onDragStart: handleDragStart, onDragEnd: handleDragEnd, className: 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 && (_jsx("div", { className: "w-8 h-8", dangerouslySetInnerHTML: { __html: option.svg } })), !option.svg && (_jsx("img", { src: getAbsoluteIconUrl(option.icon), width: "32", height: "32" })), _jsx("div", { className: "text-xs", children: option.name
+                                                    .split(new RegExp(`(${filter})`, "i"))
+                                                    .map((part, i) => part.toLowerCase() === filter.toLowerCase() &&
+                                                    part ? (_jsx("u", { className: "font-bold", children: part }, i)) : (part && _jsx("span", { children: part }, i))) }), option.isInvalid && (_jsx("i", { className: "pi pi-exclamation-triangle text-red-500 absolute top-0 right-0", title: option.message }))] }, option.typeId));
+                                }) })] }, group));
+                })] }) }));
+}
+//# sourceMappingURL=ComponentPalette.js.map

package/dist/editor/sidebar/ComponentPalette.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentPalette.js","sourceRoot":"","sources":["../../../src/editor/sidebar/ComponentPalette.tsx"],"names":[],"mappings":"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"}

package/dist/editor/sidebar/ComponentTree.d.ts

@@ -0,0 +1 @@
+export declare function ComponentTree({}: {}): import("react/jsx-runtime").JSX.Element;

package/dist/editor/sidebar/ComponentTree.js

@@ -0,0 +1,360 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEditContext, useEditContextRef } from "../client/editContext";
+import { useEffect, useRef, useState } from "react";
+import { confirmDialog } from "primereact/confirmdialog";
+import { getComponentCommands } from "../commands/componentCommands";
+import { PerfectTree } from "../ui/PerfectTree";
+import { isValidPlaceholder } from "../componentTreeHelper";
+export function ComponentTree({}) {
+    const [expandedKeys, setExpandedKeys] = useState([]);
+    const [selectedKeys, setSelectedKeys] = useState([]);
+    const [rootNodes, setRootNodes] = useState([]);
+    const [nodeDictionary, setNodeDictionary] = useState({});
+    let editContextRef = useEditContextRef();
+    const editContext = useEditContext();
+    const treeRef = useRef(null);
+    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]);
+    useEffect(() => {
+        if (editContext?.selection) {
+            setSelectedKeys(editContext.selection);
+        }
+    }, [editContext?.selection]);
+    const selection = editContext?.selection || [];
+    const page = editContext?.page;
+    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;
+                    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;
+    }
+    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 = 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 = 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 (_jsx("div", { className: "flex h-full items-center justify-center text-sm text-gray-500" }));
+    // Use the PerfectTree component
+    return (_jsx("div", { className: "p-2", ref: treeRef, children: _jsx(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 (_jsx("div", { children: _jsxs("div", { className: "font-geist-sans flex items-center gap-2 p-0.5 text-[12px] text-gray-600", children: [_jsx("i", { className: node.icon }), _jsx("span", { className: node.className, children: node.label }), node.tags?.map((x) => (_jsx("div", { children: _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 && _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;
+}
+//# sourceMappingURL=ComponentTree.js.map