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

package/dist/editor/component-designer/ComponentDesignerAiTerminal.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComponentDesignerAiTerminal = ComponentDesignerAiTerminal;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const AiTerminal_1 = require("../ai/AiTerminal");
+const aiContext_1 = require("./aiContext");
+function ComponentDesignerAiTerminal() {
+    return ((0, jsx_runtime_1.jsx)(AiTerminal_1.AiTerminal, { createAiContext: aiContext_1.createDesignerAiContext, defaultProfile: "Component Designer" }));
+}

package/dist/editor/component-designer/ComponentDesignerMenu.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComponentDesignerMenu = ComponentDesignerMenu;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const menubar_1 = require("primereact/menubar");
+const componentDesignerService_1 = require("../services/componentDesignerService");
+const ItemNameDialog_1 = require("../ui/ItemNameDialog");
+const react_1 = require("react");
+const editContext_1 = require("../client/editContext");
+const ItemLanguageVersion_1 = require("../menubar/ItemLanguageVersion");
+function ComponentDesignerMenu() {
+    const context = (0, editContext_1.useEditContext)();
+    if (!context)
+        return;
+    const menuItems = [
+        {
+            id: "newComponent",
+            label: "New Component",
+            icon: "pi pi-fw pi-plus",
+            command: () => createNew(),
+            //      disabled: !context.componentRenderingFolder,
+        },
+        {
+            id: "newRendering",
+            label: "New Rendering",
+            icon: "pi pi-fw pi-palette",
+            command: () => createNewRendering(),
+            disabled: !context.componentDesignerComponent,
+        },
+        {
+            id: "delete",
+            label: "Delete rendering",
+            icon: "pi pi-fw pi-trash",
+            disabled: !context.componentDesignerRendering,
+        },
+    ];
+    const itemNameDialogRef = (0, react_1.useRef)(null);
+    const createNew = async () => {
+        itemNameDialogRef.current?.show({
+            title: "Choose Component Name",
+            accept: async (name) => {
+                await (0, componentDesignerService_1.createNewComponent)(name, context.page.item);
+            },
+        });
+    };
+    const createNewRendering = async () => {
+        itemNameDialogRef.current?.show({
+            title: "Choose Rendering Name",
+            accept: async (name) => {
+                if (!context.componentDesignerComponent)
+                    return;
+                const details = await (0, componentDesignerService_1.createRendering)(name, context.page.item, context.componentDesignerComponent.templateId);
+                if (!("id" in details))
+                    return;
+                const component = await (0, componentDesignerService_1.loadComponentDetails)(context.componentDesignerComponent.templateId, context.page.item.id);
+                // const rendering = await getItem({
+                //   id: details.id,
+                //   language: "en",
+                //   version: 0,
+                // });
+                context.setComponentDesignerComponent(component);
+                //    context.setComponentDesignerRendering(rendering);
+            },
+        });
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(menubar_1.Menubar, { model: menuItems, end: (0, jsx_runtime_1.jsx)("div", { className: "flex items-center space-x-2", children: (0, jsx_runtime_1.jsx)(ItemLanguageVersion_1.ItemLanguageVersion, {}) }), className: "p-1 text-sm rounded-none border-0 border-b bg-gray-50" }), (0, jsx_runtime_1.jsx)(ItemNameDialog_1.ItemNameDialog, { ref: itemNameDialogRef })] }));
+}

package/dist/editor/component-designer/ComponentEditor.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComponentEditor = ComponentEditor;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Toolbar_1 = require("../ui/Toolbar");
+const ComponentsDropdown_1 = require("./ComponentsDropdown");
+const TemplateEditor_1 = require("./TemplateEditor");
+const componentTreeHelper_1 = require("../componentTreeHelper");
+const editContext_1 = require("../client/editContext");
+const componentDesignerService_1 = require("../services/componentDesignerService");
+const button_1 = require("primereact/button");
+function ComponentEditor({ allComponents, }) {
+    const context = (0, editContext_1.useEditContext)();
+    (0, react_1.useEffect)(() => {
+        const loadSelectedComponent = async () => {
+            const selectedComponents = (0, componentTreeHelper_1.getSelectedComponents)(context);
+            if (selectedComponents.length !== 1) {
+                return;
+            }
+            const component = selectedComponents[0];
+            if (!component) {
+                context.setComponentDesignerComponent(undefined);
+                context.setComponentDesignerRendering(undefined);
+            }
+            else {
+                context.setComponentDesignerComponent(await (0, componentDesignerService_1.loadComponentDetails)(component.datasourceItem.templateId, context.page.item.id));
+                // if (component.rendering) {
+                //   context.setComponentDesignerRendering(
+                //     await getItem({
+                //       id: component.rendering.id,
+                //       language: "en",
+                //       version: 0,
+                //     })
+                //   );
+                // } else context.setComponentDesignerRendering(undefined);
+            }
+        };
+        loadSelectedComponent();
+    }, [context.selection]);
+    (0, react_1.useEffect)(() => {
+        const refresh = async () => {
+            if (context.componentDesignerComponent) {
+                context.setComponentDesignerComponent(await (0, componentDesignerService_1.loadComponentDetails)(context.componentDesignerComponent.templateId, context.page.item.id));
+            }
+        };
+        refresh();
+    }, [context.refreshCompletedFlag]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col h-full", children: [(0, jsx_runtime_1.jsxs)(Toolbar_1.Toolbar, { children: [(0, jsx_runtime_1.jsx)(ComponentsDropdown_1.ComponentsDropdown, { allComponents: allComponents }), " ", (0, jsx_runtime_1.jsx)(button_1.Button, { icon: "pi pi-fw pi-save", text: true, size: "small", disabled: !context.componentDesignerComponent, onClick: () => {
+                            const save = async () => {
+                                await (0, componentDesignerService_1.saveComponentDetails)(context.componentDesignerComponent, context.page.item);
+                                context.showToast({
+                                    content: "Component saved",
+                                    severity: "success",
+                                });
+                            };
+                            save();
+                        } })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 overflow-auto", children: (0, jsx_runtime_1.jsx)(TemplateEditor_1.TemplateEditor, {}) })] }));
+}

package/dist/editor/component-designer/ComponentRenderingCodeEditor.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.ComponentRenderingCodeEditor = ComponentRenderingCodeEditor;
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("@uiw/react-textarea-code-editor/dist.css");
+const react_textarea_code_editor_1 = __importDefault(require("@uiw/react-textarea-code-editor"));
+function ComponentRenderingCodeEditor({ code, setCode, }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "size-full relative", children: (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 overflow-auto", children: (0, jsx_runtime_1.jsx)(react_textarea_code_editor_1.default, { value: code, language: "js", placeholder: "Please enter TSX code.", onChange: (evn) => setCode(evn.target.value), padding: 15, style: {
+                    fontSize: 12,
+                    backgroundColor: "#f5f5f5",
+                    fontFamily: "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace",
+                } }) }) }));
+}

package/dist/editor/component-designer/ComponentRenderingEditor.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComponentRenderingEditor = ComponentRenderingEditor;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Toolbar_1 = require("../ui/Toolbar");
+const ComponentRenderingCodeEditor_1 = require("./ComponentRenderingCodeEditor");
+const RenderingsDropdown_1 = require("./RenderingsDropdown");
+const editContext_1 = require("../client/editContext");
+const componentTreeHelper_1 = require("../componentTreeHelper");
+const button_1 = require("primereact/button");
+function ComponentRenderingEditor() {
+    const context = (0, editContext_1.useEditContext)();
+    const [code, setCode] = (0, react_1.useState)("");
+    (0, react_1.useEffect)(() => {
+        async function loadRendering() {
+            const selectedComponents = (0, componentTreeHelper_1.getSelectedComponents)(context);
+            if (selectedComponents.length !== 1) {
+                context;
+                return;
+            }
+            const component = selectedComponents[0];
+            const renderingId = component?.rendering?.id;
+            if (renderingId) {
+                const renderingItem = await context.itemsRepository.getItem({
+                    id: renderingId,
+                    language: "en",
+                    version: 0,
+                });
+                context?.setComponentDesignerRendering(renderingItem);
+            }
+            else {
+                context?.setComponentDesignerRendering(undefined);
+            }
+        }
+        loadRendering();
+    }, [context.selection]);
+    const codeField = context.componentDesignerRendering?.fields.find((x) => x.name === "code");
+    (0, react_1.useEffect)(() => {
+        if (codeField) {
+            setCode(codeField.value);
+        }
+        else {
+            setCode("");
+        }
+    }, [context.componentDesignerRendering]);
+    (0, react_1.useEffect)(() => {
+        const refresh = async () => {
+            if (context.componentDesignerRendering) {
+                const renderingItem = await context.itemsRepository.getItem({
+                    id: context.componentDesignerRendering.id,
+                    language: "en",
+                    version: 0,
+                });
+                context?.setComponentDesignerRendering(renderingItem);
+            }
+        };
+        refresh();
+    }, [context.refreshCompletedFlag]);
+    if (!context.componentDesignerComponent)
+        return ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center h-full text-xs", children: "Select a component" }));
+    else
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col h-full", children: [(0, jsx_runtime_1.jsxs)(Toolbar_1.Toolbar, { children: [(0, jsx_runtime_1.jsx)(RenderingsDropdown_1.RenderingsDropdown, {}), (0, jsx_runtime_1.jsx)(button_1.Button, { icon: "pi pi-fw pi-save", text: true, size: "small", disabled: !codeField, onClick: () => {
+                                if (!codeField)
+                                    return;
+                                context.operations.editField({
+                                    field: codeField.descriptor,
+                                    value: code,
+                                });
+                            } })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1", children: [!codeField && ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center h-full text-xs", children: "Select a rendering" })), codeField && ((0, jsx_runtime_1.jsx)(ComponentRenderingCodeEditor_1.ComponentRenderingCodeEditor, { code: code, setCode: setCode }))] })] }));
+}

package/dist/editor/component-designer/ComponentsDropdown.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComponentsDropdown = ComponentsDropdown;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const editContext_1 = require("../client/editContext");
+const componentDesignerService_1 = require("../services/componentDesignerService");
+const dropdown_1 = require("primereact/dropdown");
+function ComponentsDropdown({ allComponents, }) {
+    const context = (0, editContext_1.useEditContext)();
+    if (!context?.page)
+        return null;
+    async function loadComponent(id) {
+        const component = await (0, componentDesignerService_1.loadComponentDetails)(id, context.page.item.id);
+        context.setComponentDesignerComponent(component);
+    }
+    const value = allComponents.find((x) => x.templateId === context.componentDesignerComponent?.templateId);
+    return ((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: value, filter: true, options: allComponents, optionLabel: "name", placeholder: "Select a Component", onChange: (e) => {
+            loadComponent(e.value.templateId);
+            context.setComponentDesignerRendering(undefined);
+            context.select([]);
+        } }));
+}

package/dist/editor/component-designer/PlaceholdersEditor.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PlaceholdersEditor = PlaceholdersEditor;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const editContext_1 = require("../client/editContext");
+const componentDesignerService_1 = require("../services/componentDesignerService");
+const Icons_1 = require("../ui/Icons");
+const Toolbar_1 = require("../ui/Toolbar");
+const button_1 = require("primereact/button");
+const ItemNameDialog_1 = require("../ui/ItemNameDialog");
+const react_1 = require("react");
+function PlaceholdersEditor({ allComponents, }) {
+    const context = (0, editContext_1.useEditContext)();
+    const component = context.componentDesignerComponent;
+    const itemNameDialogRef = (0, react_1.useRef)(null);
+    const handleDragStart = (event, component) => {
+        event.dataTransfer.setData("text/plain", JSON.stringify(component));
+    };
+    const handleDragOver = (event) => {
+        event.preventDefault();
+    };
+    const handleDrop = (event, placeholderName) => {
+        event.preventDefault();
+        const componentData = JSON.parse(event.dataTransfer.getData("text/plain"));
+        const placeholder = component?.placeholders.find((x) => x.name == placeholderName);
+        if (!placeholder)
+            return;
+        console.log(placeholder, componentData);
+        if (placeholder.components.find((x) => x.typeId === componentData.typeId))
+            return;
+        placeholder.components.push(componentData);
+        context.setComponentDesignerComponent({
+            ...context.componentDesignerComponent,
+        });
+    };
+    const removeInsertOption = (placeholder, insertOption) => {
+        placeholder.components = placeholder.components.filter((x) => x.typeId !== insertOption.typeId);
+        context.setComponentDesignerComponent({
+            ...context.componentDesignerComponent,
+        });
+    };
+    const addNewPlaceholder = async () => {
+        itemNameDialogRef.current?.show({
+            title: "Choose Placeholder Name",
+            accept: async (name) => {
+                if (!context.componentDesignerComponent)
+                    return;
+                const placeholder = {
+                    name: name,
+                    components: [],
+                };
+                context.componentDesignerComponent.placeholders.push(placeholder);
+                context.setComponentDesignerComponent({
+                    ...context.componentDesignerComponent,
+                });
+            },
+        });
+    };
+    if (!component)
+        return ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center h-full text-xs", children: "Select a component" }));
+    else
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col h-full", children: [(0, jsx_runtime_1.jsxs)(Toolbar_1.Toolbar, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { icon: "pi pi-fw pi-plus", label: "New Placeholder", text: true, size: "small", className: "text-xs text-gray-800 font-normal", disabled: !component, onClick: () => {
+                                addNewPlaceholder();
+                            } }), (0, jsx_runtime_1.jsx)(button_1.Button, { icon: "pi pi-fw pi-save", label: "Save", text: true, size: "small", className: "text-xs text-gray-800 font-normal", disabled: !component, onClick: () => {
+                                (0, componentDesignerService_1.saveComponentDetails)(component, context.page.item);
+                            } })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-1", children: [(0, jsx_runtime_1.jsx)("div", { className: "relative flex-1 h-full", children: (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-1 overflow-y-auto", children: component.placeholders.map((x) => ((0, jsx_runtime_1.jsxs)("div", { className: "mb-2", onDragOver: handleDragOver, onDrop: (event) => handleDrop(event, x.name), children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-xs flex gap-1 items-center", children: [(0, jsx_runtime_1.jsx)(Icons_1.ArrowDownIcon, {}), " ", x.name] }), (0, jsx_runtime_1.jsx)("div", { className: "flex gap-4 flex-wrap text-xs mt-1.5 p-1", children: x.components.map((y) => ((0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute top-[-12px] right-[-12px] border rounded-full p-1 bg-white cursor-pointer", onClick: () => removeInsertOption(x, y), children: (0, jsx_runtime_1.jsx)("i", { className: "pi pi-times text-xs" }) }), renderComponent(y)] }, y.typeId))) })] }, x.name))) }) }), (0, jsx_runtime_1.jsx)("div", { className: "relative w-24", children: (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 overflow-y-auto text-xs border-l ", children: allComponents.map((x) => ((0, jsx_runtime_1.jsx)("div", { className: "mb-2 cursor-grab", draggable: true, onDragStart: (event) => handleDragStart(event, x), children: renderComponent(x) }, x.templateId))) }) })] }), (0, jsx_runtime_1.jsx)(ItemNameDialog_1.ItemNameDialog, { ref: itemNameDialogRef })] }));
+}
+function renderComponent(y) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center p-2 border border-gray-200", children: [y.svg && ((0, jsx_runtime_1.jsx)("div", { className: "w-8 h-8", dangerouslySetInnerHTML: { __html: y.svg } })), !y.svg && (0, jsx_runtime_1.jsx)("img", { src: y.icon, width: "32", height: "32" }), y.name] }));
+}

package/dist/editor/component-designer/RenderingsDropdown.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderingsDropdown = RenderingsDropdown;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const editContext_1 = require("../client/editContext");
+const dropdown_1 = require("primereact/dropdown");
+function RenderingsDropdown() {
+    const context = (0, editContext_1.useEditContext)();
+    if (!context.componentDesignerComponent)
+        return null;
+    const compatibleRenderings = [
+        ...context.componentDesignerComponent.compatibleRenderings,
+    ];
+    if (!compatibleRenderings)
+        return null;
+    const loadRendering = async (value) => {
+        const item = await context.itemsRepository.getItem({
+            id: value.id,
+            language: "en",
+            version: 0,
+        });
+        context.setComponentDesignerRendering(item);
+    };
+    return ((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { options: compatibleRenderings, optionLabel: "name", value: compatibleRenderings.find((x) => x.id === (context.componentDesignerRendering?.id || "")), onChange: (e) => loadRendering(e.value) }));
+}

package/dist/editor/component-designer/TemplateEditor.js

@@ -0,0 +1,144 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TemplateEditor = TemplateEditor;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const editContext_1 = require("../client/editContext");
+const inputtext_1 = require("primereact/inputtext");
+const componentDesignerService_1 = require("../services/componentDesignerService");
+const react_1 = require("react");
+const dropdown_1 = require("primereact/dropdown");
+function TemplateEditor() {
+    const context = (0, editContext_1.useEditContext)();
+    if (!context)
+        return null;
+    const [sections, setSections] = (0, react_1.useState)([]);
+    const [fieldTypes, setFieldTypes] = (0, react_1.useState)([]);
+    (0, react_1.useEffect)(() => {
+        const newSections = [
+            ...(context.componentDesignerComponent?.template?.sections.map((s) => ({
+                ...s,
+            })) || []),
+        ];
+        if (newSections.length === 0 ||
+            newSections[newSections.length - 1].fields.length > 0)
+            newSections.push({
+                name: "",
+                fields: [],
+                key: Math.random().toString(),
+            });
+        newSections.forEach((section) => {
+            const fields = [...section.fields];
+            if (section.id ||
+                (section.name != "" &&
+                    (!fields.length ||
+                        fields[fields.length - 1].id ||
+                        fields[fields.length - 1].name != ""))) {
+                fields.push({
+                    name: "",
+                    type: "",
+                    source: "",
+                    key: Math.random().toString(),
+                });
+            }
+            section.fields = fields;
+        });
+        setSections(newSections);
+    }, [context.componentDesignerComponent]);
+    (0, react_1.useEffect)(() => {
+        const load = async () => {
+            const types = await (0, componentDesignerService_1.getFieldTypes)();
+            setFieldTypes(types);
+        };
+        load();
+    }, []);
+    const template = context.componentDesignerComponent?.template;
+    if (!template)
+        return null;
+    const updateComponent = (sections) => {
+        const newSections = sections.filter((x) => x.id || x.name);
+        newSections.forEach((section) => {
+            section.fields = section.fields.filter((x) => x.id || x.name);
+        });
+        const newTemplate = {
+            ...template,
+            sections: newSections,
+        };
+        const newComponent = {
+            ...context.componentDesignerComponent,
+            template: newTemplate,
+        };
+        console.log("Updating component", newComponent);
+        context.setComponentDesignerComponent(newComponent);
+    };
+    const update = () => {
+        updateComponent(sections);
+    };
+    const removeField = (section, field) => {
+        section.fields = section.fields.filter((x) => x.id !== field.id);
+        update();
+    };
+    const handleDragStart = (event, index, sectionIndex) => {
+        event.dataTransfer.setData("text/plain", index.toString());
+        event.dataTransfer.effectAllowed = "move";
+        //event.currentTarget.style.opacity = "0.5";
+        if (sectionIndex === undefined) {
+            event.dataTransfer.setData("isSection", "true");
+        }
+        else {
+            event.dataTransfer.setData("sectionIndex", sectionIndex.toString());
+            event.dataTransfer.setData("isSection", "false");
+        }
+    };
+    const handleDragOver = (event) => {
+        event.preventDefault();
+        event.dataTransfer.dropEffect = "move";
+    };
+    const handleDrop = (event, dropIndex, sectionIndex) => {
+        event.preventDefault();
+        const dragIndex = parseInt(event.dataTransfer.getData("text/plain"));
+        const isSectionDrag = event.dataTransfer.getData("isSection") === "true";
+        if (isSectionDrag && sectionIndex === undefined) {
+            const newSections = sections;
+            const [removed] = newSections.splice(dragIndex, 1);
+            newSections.splice(dropIndex, 0, removed);
+            updateComponent(newSections);
+        }
+        else if (!isSectionDrag) {
+            const sourceSectionIndex = parseInt(event.dataTransfer.getData("sectionIndex"));
+            const sourceSection = sections[sourceSectionIndex];
+            const targetSection = sections[sectionIndex ?? dropIndex];
+            const sourceFields = sourceSection.fields;
+            const targetFields = targetSection.fields;
+            const [removed] = sourceFields.splice(dragIndex, 1);
+            if (sectionIndex === undefined) {
+                targetFields.push(removed);
+            }
+            else {
+                targetFields.splice(dropIndex, 0, removed);
+            }
+            updateComponent(sections);
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { className: "p-1", children: sections.map((section, sectionIndex) => {
+            return ((0, jsx_runtime_1.jsxs)("div", { className: "mb-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: " flex gap-1", children: [dragHandle(sectionIndex), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { className: "text-xs", value: section.name, onChange: (e) => {
+                                    section.name = e.target.value;
+                                    update();
+                                } })] }), section.fields.map((field, fieldIndex) => {
+                        return ((0, jsx_runtime_1.jsxs)("div", { className: "ml-4 flex gap-2 mt-1 items-center", children: [dragHandle(fieldIndex, sectionIndex), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { className: "text-xs flex-1", value: field.name, onChange: (e) => {
+                                        field.name = e.target.value;
+                                        update();
+                                    } }, "name"), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { filter: true, options: fieldTypes, optionGroupLabel: "name", optionGroupChildren: "fieldTypes", className: "text-xs flex-1", value: field.type, onChange: (e) => {
+                                        field.type = e.target.value;
+                                        update();
+                                    } }, "type"), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { className: "text-xs flex-1", value: field.source, onChange: (e) => {
+                                        field.source = e.target.value;
+                                        update();
+                                    } }, "source"), (0, jsx_runtime_1.jsx)("i", { className: "pi pi-fw pi-times cursor-pointer", onClick: () => removeField(section, field) })] }, field.id || field.key));
+                    })] }, section.id || section.key));
+        }) }));
+    function dragHandle(index, sectionIndex) {
+        return ((0, jsx_runtime_1.jsx)("div", { draggable: true, onDragStart: (event) => handleDragStart(event, index, sectionIndex), onDragOver: handleDragOver, onDrop: (event) => handleDrop(event, index, sectionIndex), 
+            // onDragEnd={handleDragEnd}
+            className: "cursor-grab text-xs bg-gray-50 text-center p-0.5 border flex justify-center items-center", children: (0, jsx_runtime_1.jsx)("i", { className: "pi pi-ellipsis-v" }) }));
+    }
+}

package/dist/editor/component-designer/aiContext.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createDesignerAiContext = createDesignerAiContext;
+const utils_1 = require("../utils");
+function createDesignerAiContext({ editContext, }) {
+    return {
+        //configuration.services.editorService.baseUrl +
+        endpoint: "/alpaca/ai/designerprompt",
+        callback: () => {
+            editContext.requestRefresh();
+        },
+        promptData: {
+            templateId: editContext.componentDesignerComponent?.templateId,
+            renderingId: editContext.componentDesignerRendering?.id,
+            contextItem: (0, utils_1.getItemDescriptor)(editContext.page?.item),
+        },
+    };
+}

package/dist/editor/componentTreeHelper.js

@@ -0,0 +1,97 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isValidPlaceholder = void 0;
+exports.findComponent = findComponent;
+exports.getComponentById = getComponentById;
+exports.getComponentByIdFromHeadlessLayout = getComponentByIdFromHeadlessLayout;
+exports.getSelectedComponents = getSelectedComponents;
+exports.getComponentByIdWithPlaceholder = getComponentByIdWithPlaceholder;
+exports.findComponentWithPlaceholder = findComponentWithPlaceholder;
+exports.getAllPlaceholders = getAllPlaceholders;
+function findComponent(id, placeholders) {
+    if (!placeholders)
+        return;
+    for (const p of placeholders) {
+        for (const c of p.components) {
+            if (c.id === id || c.datasourceItem?.id === id) {
+                return c;
+            }
+            if (c.placeholders) {
+                const match = findComponent(id, c.placeholders);
+                if (match) {
+                    return match;
+                }
+            }
+        }
+    }
+    return;
+}
+function getComponentById(id, page) {
+    if (!page)
+        return;
+    return findComponent(id, page.rootComponent.placeholders);
+}
+function getComponentByIdFromHeadlessLayout(id, page) {
+    if (!page)
+        return;
+    return findComponent(id, page.placeholders);
+}
+function getSelectedComponents(editContext) {
+    if (!editContext)
+        return [];
+    const page = editContext.page;
+    if (!page)
+        return [];
+    const selectedComponents = editContext.selection
+        .map((x) => getComponentById(x, page))
+        .filter((x) => x);
+    return selectedComponents.length === 0 ? [] : selectedComponents;
+}
+function getComponentByIdWithPlaceholder(id, page) {
+    if (!page)
+        return null;
+    return findComponentWithPlaceholder(id, page.rootComponent.placeholders);
+}
+function findComponentWithPlaceholder(id, placeholders) {
+    if (!placeholders)
+        return null;
+    for (const p of placeholders) {
+        for (const c of p.components) {
+            if (c.id === id || c.datasourceItem?.id === id) {
+                return { component: c, placeholder: p };
+            }
+            if (c.placeholders) {
+                const match = findComponentWithPlaceholder(id, c.placeholders);
+                if (match) {
+                    return match;
+                }
+            }
+        }
+    }
+    return null;
+}
+function getAllPlaceholders(page) {
+    const placeholders = [];
+    const addPlaceholders = (p) => {
+        p.forEach((x) => {
+            placeholders.push(x);
+            if (x.components) {
+                x.components.forEach((c) => {
+                    addPlaceholders(c.placeholders);
+                });
+            }
+        });
+    };
+    addPlaceholders(page.rootComponent.placeholders);
+    return placeholders;
+}
+const isValidPlaceholder = (placeholder, dragObject) => {
+    return (placeholder.insertOptions?.find((y) => y.typeId === dragObject.typeId ||
+        y.typeId === dragObject?.templateId ||
+        y.compatibleTemplates?.find((z) => z == dragObject.typeId) !==
+            undefined ||
+        y.typeId === dragObject.templateId ||
+        y.compatibleTemplates?.find((z) => z == dragObject.templateId) !==
+            undefined) !== undefined);
+};
+exports.isValidPlaceholder = isValidPlaceholder;