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

package/dist/esm/editor/component-designer/ComponentSelectionTree.js

@@ -0,0 +1,56 @@
+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());
+    });
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import ContentTree from "../ContentTree";
+import { getItem } from "../services/contentService";
+import { useComponentDesignerContext } from "./componentDesignerContext";
+export function ComponentSelectionTree() {
+    var _a, _b, _c;
+    const context = useComponentDesignerContext();
+    if (!context)
+        return;
+    const loadItem = (item) => __awaiter(this, void 0, void 0, function* () {
+        const itemData = yield getItem({
+            id: item.id,
+            language: item.language,
+            version: item.version,
+        });
+        if (!itemData)
+            return;
+        if (itemData.templateId === "d7dd274d-69ee-4686-9171-21c89a088fd8") {
+            context.setComponentRenderingItem(itemData);
+            context.setComponentRenderingFolder(undefined);
+            context.setSampleItem(undefined);
+        }
+        if (itemData.templateId === "dcfdeb8f-c2a6-4046-a7fc-23296b2d4569") {
+            context.setComponentRenderingFolder(itemData);
+            context.setComponentRenderingItem(undefined);
+            context.setSampleItem(undefined);
+        }
+        if (itemData.templateId === "e85ffcff-38b8-4a0b-844e-17f6faf745fe") {
+            context.setSampleItem(itemData);
+            const parent = yield getItem({
+                id: itemData._editor.parentId,
+                language: item.language,
+                version: 0,
+            });
+            context.setComponentRenderingItem(parent);
+        }
+    });
+    return (_jsx(ContentTree, { rootItemId: "{11111111-1111-1111-1111-111111111111}", expandIdPath: "{11111111-1111-1111-1111-111111111111}/{0de95ae4-41ab-4d01-9eb0-67441b7c2450}/{c8c7b950-e876-448e-991f-5eaf756a1db2}/{5f2dcc67-d9c1-451f-ad14-85244c9cca41}", className: "a-p-1", selectionMode: "single", selectedItemIds: [
+            ((_a = context.sampleItem) === null || _a === void 0 ? void 0 : _a.id) ||
+                ((_b = context.componentRenderingItem) === null || _b === void 0 ? void 0 : _b.id) ||
+                ((_c = context.componentRenderingFolder) === null || _c === void 0 ? void 0 : _c.id) ||
+                "11111111-1111-1111-1111-111111111111",
+        ], onSelectionChange: (selection) => {
+            const selectedItem = selection;
+            loadItem(selectedItem);
+        } }));
+}

package/dist/esm/editor/component-designer/componentDesignerContext.js

@@ -0,0 +1,22 @@
+import { useState } from "react";
+import { useEditContext } from "../editContext";
+export function getComponentDesignerContext() {
+    const [componentRenderingItem, setComponentRenderingItem] = useState();
+    const [componentRenderingFolder, setComponentRenderingFolder] = useState();
+    const [sampleItem, setSampleItem] = useState();
+    const [code, setCode] = useState();
+    return {
+        componentRenderingItem,
+        setComponentRenderingItem,
+        componentRenderingFolder,
+        setComponentRenderingFolder,
+        sampleItem,
+        setSampleItem,
+        code,
+        setCode,
+    };
+}
+export function useComponentDesignerContext() {
+    var _a;
+    return (_a = useEditContext()) === null || _a === void 0 ? void 0 : _a.componentDesignerContext;
+}

package/dist/esm/editor/config/config.js

@@ -1,3 +1,12 @@
+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());
+    });
+};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { RichTextEditor } from "../fieldTypes/RichTextEditor";
 import { LinkFieldEditor } from "../fieldTypes/LinkFieldEditor";
@@ -23,11 +32,15 @@ import { GraphQL } from "../sidebar/GraphQL";
 import { PageViewer } from "../PageViewer";
 import { ItemEditor } from "../views/ItemEditor";
 import { EditorForm } from "../sidebar/EditorForm";
-import { AiTerminal } from "../ai/AiTerminal";
+import { EditorAiTerminal } from "../ai/EditorAiTerminal";
 import { Insert } from "../sidebar/Insert";
 import { getCreateAndSwitchToNewVersionCommand } from "../commands/createVersionCommand";
 import { getSelectedComponentCommands } from "../commands/componentCommands";
 import { getRedoCommand, getUndoCommand } from "../commands/undo";
+import { ComponentSelectionTree } from "../component-designer/ComponentSelectionTree";
+import { ComponentDesigner } from "../component-designer/ComponentDesigner";
+import { ComponentDesignerMenu } from "../component-designer/ComponentDesignerMenu";
+import { ComponentDesignerAiTerminal } from "../component-designer/ComponentDesignerAiTerminal";
 const defaultRichTextEditorProfile = {
     toolbar: {
         groups: [
@@ -131,25 +144,18 @@ export const configuration = {
                     ],
                 },
                 {
-                    name: "content-editor",
+                    name: "navigate",
                     title: "Navigate",
                     icon: "pi pi-sitemap",
-                    centerPanelView: "form",
+                    centerPanelView: "page",
                     leftSidebar: [
                         {
-                            name: "debug",
-                            icon: "pi pi-sitemap",
-                            title: "Content",
-                            content: _jsx(MainContentTree, {}),
+                            name: "tree",
+                            icon: "pi pi-list",
+                            title: "Select Page",
+                            content: _jsx(MainContentTree, { mode: "select-page" }),
                             initialSize: 100,
                         },
-                        {
-                            name: "history",
-                            icon: "pi pi-clock",
-                            title: "History",
-                            content: _jsx(EditHistory, {}),
-                            initialSize: 0,
-                        },
                     ],
                 },
                 {
@@ -175,7 +181,7 @@ export const configuration = {
                             name: "ai-terminal",
                             icon: "pi pi-comments",
                             title: "AI",
-                            content: _jsx(AiTerminal, {}),
+                            content: _jsx(EditorAiTerminal, {}),
                             initialSize: 20,
                         },
                         {
@@ -187,6 +193,28 @@ export const configuration = {
                         },
                     ],
                 },
+                {
+                    name: "content-editor",
+                    title: "Content Editor",
+                    icon: "pi pi-list",
+                    centerPanelView: "form",
+                    leftSidebar: [
+                        {
+                            name: "tree",
+                            icon: "pi pi-sitemap",
+                            title: "Content",
+                            content: _jsx(MainContentTree, { mode: "normal" }),
+                            initialSize: 100,
+                        },
+                        {
+                            name: "history",
+                            icon: "pi pi-clock",
+                            title: "History",
+                            content: _jsx(EditHistory, {}),
+                            initialSize: 0,
+                        },
+                    ],
+                },
                 {
                     name: "dictionary",
                     title: "Dictionary",
@@ -237,10 +265,34 @@ export const configuration = {
                         },
                     ],
                 },
+                {
+                    name: "component-designer",
+                    title: "Component Designer",
+                    icon: "pi pi-palette",
+                    centerPanelView: "component-designer",
+                    menuBar: _jsx(ComponentDesignerMenu, {}),
+                    leftSidebar: [
+                        {
+                            name: "component-designer",
+                            icon: "pi pi-palette",
+                            title: "Component List",
+                            initialSize: 60,
+                            content: _jsx(ComponentSelectionTree, {}),
+                        },
+                        {
+                            name: "ai-terminal",
+                            icon: "pi pi-comments",
+                            title: "AI",
+                            content: _jsx(ComponentDesignerAiTerminal, {}),
+                            initialSize: 40,
+                        },
+                    ],
+                },
             ],
             centerPanelViews: [
                 { name: "page", content: _jsx(PageViewer, {}) },
                 { name: "form", content: _jsx(ItemEditor, {}) },
+                { name: "component-designer", content: _jsx(ComponentDesigner, {}) },
             ],
             mainNavigation: [
                 getUndoCommand(),
@@ -255,6 +307,20 @@ export const configuration = {
                     icon: "pi pi-fw",
                     items: (editContext) => getSelectedComponentCommands(editContext),
                 },
+                {
+                    name: "preview",
+                    disabled: () => false,
+                    label: "Preview",
+                    icon: "pi pi-fw pi-external-link",
+                    execute: () => __awaiter(void 0, void 0, void 0, function* () {
+                        const currentUrl = new URL(window.location.href);
+                        const searchParams = currentUrl.searchParams;
+                        if (searchParams.get("mode") === "edit") {
+                            searchParams.set("mode", "preview");
+                        }
+                        window.open(currentUrl.href);
+                    }),
+                },
             ],
         },
     },

package/dist/esm/editor/config/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/editor/fieldTypes/CheckboxEditor.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEditContext } from "..";
+import { useEditContext } from "../editContext";
 import { Checkbox } from "primereact/checkbox";
 export function CheckboxEditor({ field, readOnly, }) {
     var _a;

package/dist/esm/editor/fieldTypes/DropLinkEditor.js

@@ -10,7 +10,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Dropdown } from "primereact/dropdown";
-import { useEditContext } from "..";
+import { useEditContext } from "../editContext";
 import { useEffect, useState } from "react";
 import { loadDropLinkOptions } from "../services/editService";
 import { Skeleton } from "primereact/skeleton";

package/dist/esm/editor/fieldTypes/MultiLineText.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { InputTextarea } from "primereact/inputtextarea";
-import { useEditContext } from "..";
+import { useEditContext } from "../editContext";
 export function MultiLineText({ field, readOnly, }) {
     var _a;
     const editContext = useEditContext();

package/dist/esm/editor/fieldTypes/RawEditor.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { InputTextarea } from "primereact/inputtextarea";
-import { useEditContext } from "..";
+import { useEditContext } from "../editContext";
 export function RawEditor({ field, readOnly, }) {
     var _a, _b;
     const editContext = useEditContext();

package/dist/esm/editor/fieldTypes/RichTextEditorComponent.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { Editor } from "primereact/editor";
-import { useEditContext } from "..";
+import { useEditContext } from "../editContext";
 import Quill from "quill";
 let Inline = Quill.import("blots/inline");
 class BoldBlot extends Inline {

package/dist/esm/editor/fieldTypes/SingleLineText.js

@@ -1,20 +1,18 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { InputText } from "primereact/inputtext";
-import { useEditContext } from "..";
+import { useEditContext } from "../editContext";
 export function SingleLineText({ field, readOnly, }) {
     var _a;
     const editContext = useEditContext();
     if (!editContext)
         return;
     const liveField = editContext.getLiveField(field);
-    if (!editContext)
-        return;
     const value = (liveField === null || liveField === void 0 ? void 0 : liveField.value) || field.value;
     const fieldItem = (_a = field._editor) === null || _a === void 0 ? void 0 : _a.descriptor.item;
     if (!fieldItem)
         return;
-    return (_jsx(InputText, { value: value, disabled: readOnly, className: "a-p-2 a-focus-shadow a-text-sm", style: { width: "100%" }, onChange: (e) => {
+    return (_jsx(InputText, { value: value || "", disabled: readOnly, className: "a-p-2 a-focus-shadow a-text-sm", style: { width: "100%" }, onChange: (e) => {
             editContext.editField({
                 field,
                 value: e.target.value,

package/dist/esm/editor/fieldTypes/TreeListEditor.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Splitter, SplitterPanel } from "primereact/splitter";
-import { useEditContext } from "..";
+import { useEditContext } from "../editContext";
 import ContentTree from "../ContentTree";
 import { useState } from "react";
 import { ListBox } from "primereact/listbox";

package/dist/esm/editor/menubar/Menu.js

@@ -101,5 +101,5 @@ export function Menu() {
     //     //{ separator: true },
     //   ];
     const endContent = (_jsxs("div", { className: "a-flex a-gap-3 a-items-center", children: [_jsx(PageViewerControls, {}), _jsx(ItemLanguageVersion, {})] }));
-    return (_jsx(Menubar, { model: menuItems, end: endContent, className: "a-p-1 a-text-sm a-rounded-none a-border-0 a-border-b" }));
+    return (_jsx(Menubar, { model: menuItems, end: endContent, className: "a-p-1 a-text-sm a-rounded-none a-border-0 a-border-b a-bg-gray-50" }));
 }

package/dist/esm/editor/services/aiService.js

@@ -0,0 +1,20 @@
+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());
+    });
+};
+import { post } from "./serviceHelper";
+export function loadAiConfig(item) {
+    return __awaiter(this, void 0, void 0, function* () {
+        let url = "/alpaca/headless/ai/config";
+        const response = yield post(url, item);
+        if (!response.response.ok) {
+            throw new Error("Error loading AI config");
+        }
+        return yield response.response.json();
+    });
+}

package/dist/esm/editor/services/componentDesignerService.js

@@ -0,0 +1,23 @@
+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());
+    });
+};
+import { post } from "./serviceHelper";
+export function createNewComponent(parent, name) {
+    return __awaiter(this, void 0, void 0, function* () {
+        let url = "/alpaca/headless/component/create";
+        const response = yield post(url, {
+            settingsItemId: parent.id,
+            name,
+        });
+        if (!response.response.ok) {
+            return new Error("Error creating new item");
+        }
+        return yield response.response.json();
+    });
+}

package/dist/esm/editor/services/contentService.js

@@ -31,16 +31,14 @@ export function getChildren(itemId, sessionId, templateIds = [], includeEmbedded
         return yield response.json();
     });
 }
-export function getItem(item, sessionId) {
+export function getItem(item) {
     return __awaiter(this, void 0, void 0, function* () {
         let url = "/alpaca/headless/editor/item?itemId=" +
             item.id +
             "&language=" +
             item.language +
             "&version=" +
-            item.version +
-            "&sessionId=" +
-            sessionId;
+            item.version;
         const response = yield fetch(url, {
             method: "GET",
             credentials: "include",

package/dist/esm/editor/services/editService.js

@@ -8,6 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import Cookies from "universal-cookie";
+import { post } from "./serviceHelper";
 export function connectSocket(sessionId) {
     let loc = window.location, new_uri;
     if (loc.protocol === "https:") {
@@ -141,41 +142,6 @@ export function validateItems(items, sessionId) {
         return yield response;
     });
 }
-function post(url, body, session) {
-    return __awaiter(this, void 0, void 0, function* () {
-        if (session)
-            url += "?sessionId=" + session;
-        const response = yield fetch(url, {
-            method: "POST",
-            body: JSON.stringify(body),
-            credentials: "include",
-            headers: {
-                "Content-Type": "application/json",
-                Cookie: new Cookies().getAll(),
-            },
-            next: {
-                revalidate: 0,
-            },
-        });
-        if (response.status === 500 || response.redirected) {
-            return {
-                type: "error",
-                summary: "Error",
-                details: "An error occured while locking the item.",
-                response,
-            };
-        }
-        if (response.status === 401) {
-            return {
-                type: "error",
-                summary: "Unauthorized",
-                details: "Not logged in anymore?",
-                response,
-            };
-        }
-        return { type: "success", response };
-    });
-}
 export function executeWorkflowCommand(item, commandId, comment) {
     return __awaiter(this, void 0, void 0, function* () {
         const response = yield fetch("/alpaca/headless/editor/executeWorkflowCommand", {

package/dist/esm/editor/services/serviceHelper.js

@@ -0,0 +1,45 @@
+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());
+    });
+};
+import Cookies from "universal-cookie";
+export function post(url, body, session) {
+    return __awaiter(this, void 0, void 0, function* () {
+        if (session)
+            url += "?sessionId=" + session;
+        const response = yield fetch(url, {
+            method: "POST",
+            body: JSON.stringify(body),
+            credentials: "include",
+            headers: {
+                "Content-Type": "application/json",
+                Cookie: new Cookies().getAll(),
+            },
+            next: {
+                revalidate: 0,
+            },
+        });
+        if (response.status === 500 || response.redirected) {
+            return {
+                type: "error",
+                summary: "Error",
+                details: "An error occured while locking the item.",
+                response,
+            };
+        }
+        if (response.status === 401) {
+            return {
+                type: "error",
+                summary: "Unauthorized",
+                details: "Not logged in anymore?",
+                response,
+            };
+        }
+        return { type: "success", response };
+    });
+}

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEditContext } from "..";
+import { useEditContext } from "../editContext";
 import { getInsertOptionsForCurrentSelection } from "../utils/insertOptions";
 import { ArrowDownIcon } from "../ui/Icons";
 export function ComponentPalette({}) {

package/dist/esm/editor/sidebar/MainContentTree.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import ContentTree from "../ContentTree";
 import { useEditContext } from "../editContext";
 import { getInsertOptionsForCurrentSelection } from "../utils/insertOptions";
-export function MainContentTree({ mode }) {
+export function MainContentTree({ mode, }) {
     var _a;
     const editContext = useEditContext();
     if (!editContext)
@@ -11,7 +11,7 @@ export function MainContentTree({ mode }) {
     if (!(page === null || page === void 0 ? void 0 : page._editor))
         return null;
     const currentInsertOptions = getInsertOptionsForCurrentSelection(editContext);
-    return (_jsx(ContentTree, { rootItemId: "{11111111-1111-1111-1111-111111111111}", expandIdPath: page._editor.idPath, className: "a-p-1", selectionMode: mode == "insert" ? "none" : "single", selectedItemIds: editContext.secondaryItem ? [editContext.secondaryItem.id] : [page.id], secondarySelectedItemId: (_a = editContext.secondaryItem) === null || _a === void 0 ? void 0 : _a.id, onSelectionChange: (selection) => {
+    return (_jsx(ContentTree, { rootItemId: "{11111111-1111-1111-1111-111111111111}", expandIdPath: page._editor.idPath, className: "a-p-1", selectPagesOnly: mode === "select-page", selectionMode: mode == "insert" ? "none" : "single", selectedItemIds: editContext.secondaryItem ? [editContext.secondaryItem.id] : [page.id], secondarySelectedItemId: (_a = editContext.secondaryItem) === null || _a === void 0 ? void 0 : _a.id, onSelectionChange: (selection) => {
             const selectedItem = selection;
             editContext.loadItem({
                 id: selectedItem.id,
@@ -19,7 +19,7 @@ export function MainContentTree({ mode }) {
                 version: selectedItem.version,
                 hasLayout: selectedItem.hasLayout,
             });
-        }, isDraggable: (x) => mode !== "insert" &&
+        }, isDraggable: (x) => mode === "insert" &&
             (currentInsertOptions === null || currentInsertOptions === void 0 ? void 0 : currentInsertOptions.find((insertOption) => {
                 var _a;
                 return insertOption.id == x.templateId ||

package/dist/esm/editor/sidebar/Sidebar.js

@@ -7,7 +7,7 @@ export function Sidebar({ views }) {
     if (!editContext)
         return null;
     const view = editContext.view;
-    return (_jsxs("div", { className: "a-flex a-items-stretch a-h-full", children: [_jsx("div", { className: "a-bg-slate-700 a-flex a-flex-col ", children: views.map((x, i) => (_jsx("div", { title: x.title, className: classNames(view.name == x.name
+    return (_jsxs("div", { className: "a-flex a-items-stretch a-h-full", children: [_jsx("div", { className: "a-bg-slate-700 a-flex a-flex-col", children: views.map((x, i) => (_jsx("div", { title: x.title, className: classNames(view.name == x.name
                         ? "a-text-white"
                         : "a-text-gray-400 hover:a-text-white", "a-cursor-pointer a-p-3"), onClick: () => editContext.setView(x), children: typeof x.icon === "string" ? (_jsx("i", { className: classNames(x.icon, "a-text-xl") })) : (x.icon) }, i))) }), views.map((x, i) => (_jsx(SidebarView, { view: x, editContext: editContext, active: view.name === x.name }, i)))] }));
 }

package/dist/esm/editor/sidebar/SidebarView.js

@@ -6,13 +6,14 @@ import { classNames } from "primereact/utils";
 export function SidebarView({ view, editContext, active, }) {
     const splitter = useRef(null);
     const [sizes, setSizes] = useState([]);
-    const [preferredSizes, setPreferredSizes] = useState([]);
+    const [preferredSizes, setPreferredSizes] = useState(undefined);
     const [panelsExpanded, setPanelsExpanded] = useState([]);
+    const [sizeToSet, setSizeToSet] = useState();
     const panelHeaderSize = 30;
     const toggle = (panelIndex) => {
         const newSize = panelsExpanded[panelIndex]
             ? panelHeaderSize
-            : preferredSizes[panelIndex];
+            : (preferredSizes || sizes)[panelIndex];
         resizePanel(panelIndex, newSize);
         setPanelsExpanded((x) => {
             const newState = [...x];
@@ -20,12 +21,6 @@ export function SidebarView({ view, editContext, active, }) {
             return newState;
         });
     };
-    useEffect(() => {
-        var _a;
-        if (sizes.length == 0)
-            return;
-        (_a = splitter.current) === null || _a === void 0 ? void 0 : _a.resize(sizes);
-    }, [sizes]);
     const resolvedPanels = view.leftSidebar.map((x) => {
         if (typeof x === "function") {
             return x(editContext);
@@ -47,23 +42,32 @@ export function SidebarView({ view, editContext, active, }) {
         const newSizes = percentages.map((x) => x * remaining);
         newSizes[panelIndex] = newSize;
         setSizes(newSizes);
+        setSizeToSet(newSizes);
     };
+    useEffect(() => {
+        var _a;
+        if (sizeToSet)
+            (_a = splitter.current) === null || _a === void 0 ? void 0 : _a.resize(sizeToSet);
+    }, [sizeToSet]);
     const getHeader = (panel, index) => {
         if (panel.header)
             return panel.header({ panel, index });
         return (_jsxs("div", { className: classNames("a-p-1.5 a-bg-gray-50 a-uppercase a-text-gray-500 a-text-xs a-flex a-justify a-items-center a-cursor-pointer", panelsExpanded[index] ? "a-border-b" : ""), onClick: () => toggle(index), children: [panel.icon &&
                     (typeof panel.icon === "string" ? (_jsx("i", { className: classNames(panel.icon, "pi a-mr-1.5") })) : (_jsx("div", { className: "a-w-4 a-h-4 a-mr-1.5", children: panel.icon }))), _jsx("div", { className: "a-mr-auto", children: panel.title }), _jsx("i", { className: classNames(panelsExpanded[index] ? "pi-chevron-up" : "pi-chevron-down", "pi  a-text-sm") })] }));
     };
-    return (_jsx(Allotment, { vertical: true, snap: true, defaultSizes: resolvedPanels.map((x) => x.initialSize), className: !active ? "a-hidden a-h-full" : "a-h-full", ref: splitter, onChange: (s) => {
-            if (preferredSizes.length == 0)
-                return;
+    const initalSizes = resolvedPanels.map((x) => x.initialSize);
+    return (_jsx(Allotment, { vertical: true, snap: true, className: !active ? "a-hidden a-h-full" : "a-h-full", ref: splitter, defaultSizes: initalSizes, onChange: (s) => {
             if (sizes.join(",") != s.join(","))
                 setSizes(s);
-            const newPreferred = [...preferredSizes];
+            const newPreferred = [...(preferredSizes || s)];
             s.forEach((x, i) => {
                 if (x > panelHeaderSize)
                     newPreferred[i] = x;
             });
             setPreferredSizes(newPreferred);
-        }, children: resolvedPanels.map((panel, index) => (_jsx(Allotment.Pane, { preferredSize: preferredSizes[index] + "%", maxSize: panelsExpanded[index] ? 10000 : panelHeaderSize, children: _jsxs("div", { className: "a-flex a-flex-col a-h-full", children: [getHeader(panel, index), panelsExpanded[index] && (_jsx("div", { className: "a-overflow-hidden a-relative a-flex-1", children: _jsx("div", { className: "a-inset-0 a-absolute a-overflow-y-auto", children: panel.content }) }))] }) }, index))) }));
+        }, children: resolvedPanels.map((panel, index) => (_jsx(Allotment.Pane, { 
+            //  preferredSize={(preferredSizes || initalSizes)[index] + "%"}
+            maxSize: panelsExpanded.length <= index || panelsExpanded[index]
+                ? 10000
+                : panelHeaderSize, children: _jsxs("div", { className: "a-flex a-flex-col a-h-full", children: [getHeader(panel, index), panelsExpanded[index] && (_jsx("div", { className: "a-overflow-hidden a-relative a-flex-1", children: _jsx("div", { className: "a-inset-0 a-absolute a-overflow-y-auto", children: panel.content }) }))] }) }, index))) }));
 }

package/dist/esm/editor/sidebar/Workbox.js

@@ -1,7 +1,7 @@
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { Column } from "primereact/column";
 import { DataTable } from "primereact/datatable";
-import { useEditContext } from "..";
+import { useEditContext } from "../editContext";
 import { Tooltip } from "primereact/tooltip";
 import { Button } from "primereact/button";
 import { useRef, useState } from "react";

package/dist/esm/editor/{ItemNameDialog.js → ui/ItemNameDialog.js}

@@ -2,9 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Dialog } from "primereact/dialog";
 import { InputText } from "primereact/inputtext";
 import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
-import DialogButtons from "./DialogButtons";
+import DialogButtons from "../DialogButtons";
 import { Button } from "primereact/button";
 const ItemNameDialog = forwardRef((_props, ref) => {
+    var _a;
     const [visible, setVisible] = useState(false);
     const [props, setProps] = useState();
     const [name, setName] = useState("");
@@ -24,7 +25,7 @@ const ItemNameDialog = forwardRef((_props, ref) => {
     };
     return (_jsxs(Dialog, { visible: visible, onHide: () => {
             setVisible(false);
-        }, header: "Choose item name", children: [_jsx("div", { className: "a-pt-3", children: _jsx(InputText, { autoFocus: true, value: name, onChange: (e) => setName(e.target.value), onKeyDown: (ev) => {
+        }, header: (_a = props === null || props === void 0 ? void 0 : props.title) !== null && _a !== void 0 ? _a : "Choose item name", children: [_jsx("div", { className: "a-pt-3", children: _jsx(InputText, { autoFocus: true, value: name, onChange: (e) => setName(e.target.value), onKeyDown: (ev) => {
                         if (ev.key === "Enter" && isValidName)
                             handleOk();
                     } }) }), _jsxs(DialogButtons, { children: [_jsx(Button, { onClick: handleOk, label: "Ok", disabled: !isValidName }), _jsx(Button, { onClick: () => setVisible(false), label: "Cancel" })] })] }));