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

package/dist/esm/editor/EditorClient.js

@@ -16,7 +16,7 @@ import { ProgressSpinner } from "primereact/progressspinner";
 import { Toast } from "primereact/toast";
 import { BlockUI } from "primereact/blockui";
 import { ConfirmDialog } from "primereact/confirmdialog";
-import { EditContextProvider, } from ".";
+import { EditContextProvider } from "./editContext";
 import { useRouter, useSearchParams, usePathname } from "next/navigation";
 import { findComponent, getComponentById } from "./componentTreeHelper";
 import { executeRedo, executeUndo, executeEditOperation, createVersion, executeWorkflowCommand, executeFieldAction, validateItems, connectSocket, lockField, lockItems, unlockItems, getEditHistory, releaseFieldLocks, } from "./services/editService";
@@ -36,8 +36,12 @@ import { FieldEditorPopup } from "./FieldEditorPopup";
 import { Sidebar } from "./sidebar/Sidebar";
 import { Menu } from "./menubar/Menu";
 import { AiPopup } from "./ai/AiPopup";
-export function EditorClient({ page, dictionaryObject, editData, children, configuration, }) {
-    var _a, _b;
+import { getComponentDesignerContext } from "./component-designer/componentDesignerContext";
+export function EditorClient({ context, children, configuration, }) {
+    var _a, _b, _c;
+    const page = context.page;
+    const dictionaryObject = context.dictionary;
+    //const editData = context.ed;
     const router = useRouter();
     const pathname = usePathname();
     const searchParams = useSearchParams();
@@ -47,10 +51,10 @@ export function EditorClient({ page, dictionaryObject, editData, children, confi
     const [dictionary, setDictionary] = useState(dictionaryObject);
     const [unresolvedDictionaryKeys, setUnresolvedDictionaryKeys] = useState([]);
     const [refreshCompletedFlag, setRefreshCompletedFlag] = useState(false);
+    const [editOperationExecutedFlag, setEditOperationExecutedFlag] = useState(false);
     //const [refreshing, setRefreshing] = useState(false);
     const [updateContentEditingFields, setUpdateContentEditingFields] = useState(false);
     const [dragObject, setDragObject] = useState();
-    const [refreshTimer, setRefreshTimer] = useState();
     const [mediaResolver, setMediaResolver] = useState();
     const [mediaSelectorVisible, setMediaSelectorVisible] = useState(false);
     const [selectedMediaIdPath, setSelectedMediaIdPath] = useState("");
@@ -216,7 +220,7 @@ export function EditorClient({ page, dictionaryObject, editData, children, confi
                 switchVersion(itemToLoad.version);
                 return;
             }
-            const result = yield getItem(itemToLoad, sessionId);
+            const result = yield getItem(itemToLoad);
             setSecondaryItem(result);
             setSelection([]);
             setEditHistory([]);
@@ -234,7 +238,7 @@ export function EditorClient({ page, dictionaryObject, editData, children, confi
                 header: "Not logged in",
                 message: "You are not logged in anymore. Proceed to login page?",
                 accept: () => {
-                    window.location.href = editData.loginUrl;
+                    //window.location.href = editData.loginUrl;
                 },
             });
             showErrorToast(result);
@@ -278,16 +282,17 @@ export function EditorClient({ page, dictionaryObject, editData, children, confi
                     requestRefresh(currentEditOperation.refreshAfterQuietPeriod
                         ? "waitForQuietPeriod"
                         : "immediate");
+                setEditOperationExecutedFlag((state) => !state);
             }
         });
         sync();
     }, [currentEditOperation]);
     const ensureLock = (field) => __awaiter(this, void 0, void 0, function* () {
-        var _c;
+        var _d;
         if (!field || !field.item)
             return;
         const result = yield lockField(field.item, field.fieldId, sessionId);
-        const status = yield ((_c = result.response) === null || _c === void 0 ? void 0 : _c.json());
+        const status = yield ((_d = result.response) === null || _d === void 0 ? void 0 : _d.json());
         if (status.success) {
             const existingField = getLiveFieldIfExists(field);
             if (!existingField)
@@ -365,6 +370,11 @@ export function EditorClient({ page, dictionaryObject, editData, children, confi
         loadHistory(page);
         sendClientInfo();
     }, [page]);
+    useEffect(() => {
+        if (searchParams.get("fullscreen")) {
+            setFullscreen(true);
+        }
+    }, []);
     function loadHistory(item) {
         return __awaiter(this, void 0, void 0, function* () {
             const operations = yield getEditHistory(item);
@@ -372,13 +382,13 @@ export function EditorClient({ page, dictionaryObject, editData, children, confi
         });
     }
     const requestRefresh = (mode) => {
+        const refreshTimer = globalThis.editorRefreshTimer;
         const doRefresh = () => {
-            clearTimeout(refreshTimer);
             //setRefreshing(true);
             if (secondaryItem)
                 loadItem(secondaryItem);
             router.refresh();
-            setRefreshTimer(undefined);
+            globalThis.editorRefreshTimer = undefined;
         };
         if (mode === "immediate") {
             console.log("Immediate refresh requested");
@@ -390,14 +400,14 @@ export function EditorClient({ page, dictionaryObject, editData, children, confi
             clearTimeout(refreshTimer);
         }
         if (!refreshTimer || mode === "waitForQuietPeriod") {
-            setRefreshTimer(setTimeout(() => {
+            globalThis.editorRefreshTimer = setTimeout(() => {
                 console.log("refreshing");
                 doRefresh();
-            }, mode === "waitForQuietPeriod" ? 1200 : 700));
+            }, mode === "waitForQuietPeriod" ? 1200 : 700);
         }
     };
     useEffect(() => {
-        if (fullscreen)
+        if (fullscreen && !searchParams.get("fullscreen"))
             setShowFullscreenHint(true);
     }, [fullscreen]);
     // function requestPageLock(page: Item) {
@@ -641,6 +651,7 @@ export function EditorClient({ page, dictionaryObject, editData, children, confi
     }
     const editContext = {
         configuration,
+        currentEditOperation,
         item: centerPanelView == "form" ? secondaryItem || page : page,
         renderedPage: children,
         sessionId: sessionId,
@@ -659,6 +670,7 @@ export function EditorClient({ page, dictionaryObject, editData, children, confi
         setDictionary,
         requestRefresh,
         refreshCompletedFlag,
+        editOperationExecutedFlag,
         unresolvedDictionaryKeys,
         setUnresolvedDictionaryKeys,
         updateContentEditingFields,
@@ -821,7 +833,6 @@ export function EditorClient({ page, dictionaryObject, editData, children, confi
             yield releaseFieldLocks(sessionId);
         }),
         executeWorkflowCommand: executeWorkflowCommandAndRefresh,
-        editData,
         duplicateComponents: ({ componentIds, parent, placeholderName, }) => {
             const op = {
                 type: "duplicate-components",
@@ -868,9 +879,10 @@ export function EditorClient({ page, dictionaryObject, editData, children, confi
             setFullscreen,
             editorContainerRef,
         },
+        componentDesignerContext: getComponentDesignerContext(),
     };
     const spinner = _jsx(ProgressSpinner, {});
-    return (_jsx(EditContextProvider, { value: editContext, children: fullscreen ? (_jsxs("div", { onMouseMoveCapture: () => setTimeout(() => setShowFullscreenHint(false), 600), children: [children, showFullscreenHint && (_jsx("div", { className: "a-fixed a-left-1/2 a-top-3 a-transform \r\n            -a-translate-x-1/2 a-p-12 a-bg-gray-200", children: "Press Ctrl + F11 to exit fullscreen mode" }))] })) : (_jsxs(_Fragment, { children: [_jsx(Toast, { ref: toast }), _jsxs(PrimeReactProvider, { children: [_jsx(ConfirmationDialog, { ref: confirmationDialogRef }), _jsx(ConfirmDialog, {}), _jsxs(BlockUI, { blocked: false, template: spinner, children: [_jsx(EditContextMenu, { ref: contextMenuRef }), _jsx(Menu, {}), _jsx(MainLayout, { content: ((_a = configuration.chrome.editor.centerPanelViews.find((x) => x.name === centerPanelView)) === null || _a === void 0 ? void 0 : _a.content) || "Unknown view " + centerPanelView, leftSidebar: _jsx(Sidebar, { views: (_b = configuration.chrome.editor.views) !== null && _b !== void 0 ? _b : [] }) })] }), _jsx(MediaSelector, { visible: mediaSelectorVisible, onHide: () => setMediaSelectorVisible(false), onMediaSelected: onMediaSelect, selectedIdPath: selectedMediaIdPath }), _jsx(PublishDialog, { visible: showPublishDialog, onHide: () => setShowPublishDialog(false), page: page, 
+    return (_jsx(EditContextProvider, { value: editContext, children: fullscreen ? (_jsxs("div", { onMouseMoveCapture: () => setTimeout(() => setShowFullscreenHint(false), 600), children: [children, showFullscreenHint && (_jsx("div", { className: "a-fixed a-left-1/2 a-top-3 a-transform \r\n            -a-translate-x-1/2 a-p-12 a-bg-gray-200", children: "Press Ctrl + F11 to exit fullscreen mode" }))] })) : (_jsxs(_Fragment, { children: [_jsx(Toast, { ref: toast }), _jsxs(PrimeReactProvider, { children: [_jsx(ConfirmationDialog, { ref: confirmationDialogRef }), _jsx(ConfirmDialog, {}), _jsxs(BlockUI, { blocked: false, template: spinner, children: [_jsx(EditContextMenu, { ref: contextMenuRef }), (_a = view.menuBar) !== null && _a !== void 0 ? _a : _jsx(Menu, {}), _jsx(MainLayout, { content: ((_b = configuration.chrome.editor.centerPanelViews.find((x) => x.name === centerPanelView)) === null || _b === void 0 ? void 0 : _b.content) || "Unknown view " + centerPanelView, leftSidebar: _jsx(Sidebar, { views: (_c = configuration.chrome.editor.views) !== null && _c !== void 0 ? _c : [] }) })] }), _jsx(MediaSelector, { visible: mediaSelectorVisible, onHide: () => setMediaSelectorVisible(false), onMediaSelected: onMediaSelect, selectedIdPath: selectedMediaIdPath }), _jsx(PublishDialog, { visible: showPublishDialog, onHide: () => setShowPublishDialog(false), page: page, 
                             // lockItems={lockItemsAndRefresh}
                             // unlockItems={unlockItemsAndRefresh}
                             executeWorkflowCommand: executeWorkflowCommandAndRefresh }), _jsx(AiPopup, { ref: aiPopupRef }), _jsx(FieldEditorPopup, { ref: fieldEditorPopupRef })] })] })) }));

package/dist/esm/editor/EditorClientHost.js

@@ -3,10 +3,10 @@ import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import dynamic from "next/dynamic";
 import { configuration } from "./config/config";
 const EditorClient = dynamic(() => import("./EditorClient").then((dnd) => dnd.EditorClient), { ssr: false });
-export function EditorClientHost({ content, dictionaryObject, children, edit, clientBuilder, }) {
+export function EditorClientHost({ context, clientBuilder, children, }) {
     const ClientBuilder = clientBuilder;
     const buildClient = (configuration) => {
-        return (_jsx(EditorClient, { page: content, dictionaryObject: dictionaryObject, editData: edit, configuration: configuration, children: _jsx(_Fragment, { children: children }) }));
+        return (_jsx(EditorClient, { context: context, configuration: configuration, children: _jsx(_Fragment, { children: children }) }));
     };
     if (!ClientBuilder)
         return buildClient(configuration);

package/dist/esm/editor/FieldList.js

@@ -1,9 +1,9 @@
 "use client";
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
-import FieldListField from "./FieldListField";
 import { Section } from "./ui/Section";
 import { useEditContext } from "./editContext";
+import { FieldListFieldWithFallbacks } from "./FieldListFieldWithFallbacks";
 export function FieldList({ fields, sections, validators, filter, simplified, }) {
     const editContext = useEditContext();
     const [liveFields, setLiveFields] = useState();
@@ -39,7 +39,7 @@ export function FieldList({ fields, sections, validators, filter, simplified, })
     sectionList.sort((a, b) => a[0]._editor.sectionSortOrder - b[0]._editor.sectionSortOrder);
     function getSectionFields(fields) {
         fields.sort((a, b) => a.sortOrder - b.sortOrder);
-        return fields.map((field) => (_jsx(FieldListField, { field: field, simplified: simplified, validators: validators.filter((x) => x.fieldId === field.id) }, field.id)));
+        return fields.map((field) => (_jsx(FieldListFieldWithFallbacks, { field: field, simplified: simplified, validators: validators.filter((x) => x.fieldId === field.id) }, field.id)));
     }
     return (_jsx("div", { className: "a-h-fill-available", children: sectionList
             .map((x) => { var _a; return (_a = x[0]._editor) === null || _a === void 0 ? void 0 : _a.section; })

package/dist/esm/editor/FieldListField.js

@@ -9,67 +9,25 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Tooltip } from "primereact/tooltip";
-import { useEditContext } from ".";
-import { useEffect, useRef, useState } from "react";
+import { useEditContext } from "./editContext";
+import { useRef, useState } from "react";
 import { WizardIcon } from "./ui/Icons";
 import { OverlayPanel } from "primereact/overlaypanel";
-import { loadFallbackChain } from "./services/editService";
-export default function FieldListField({ field, validators, simplified, title, }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+export default function FieldListField({ field, validators, simplified, title, isFocusedField, showFallbackButton, }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const editContext = useEditContext();
     if (!editContext)
         return;
-    const ref = useRef(null);
     const fieldItem = field._editor.descriptor.item;
-    const isFocusedField = ((_a = editContext === null || editContext === void 0 ? void 0 : editContext.focusedField) === null || _a === void 0 ? void 0 : _a.fieldId) === field.id &&
-        editContext.focusedField.item.id === fieldItem.id &&
-        editContext.focusedField.item.language === fieldItem.language;
     const [showRawValue, setShowRawValue] = useState(false);
     const generatorsOverlay = useRef(null);
-    const [fallbackChain, setFallbackChain] = useState();
-    const [showFallback, setShowFallback] = useState(false);
-    useEffect(() => {
-        var _a;
-        if (ref.current && isFocusedField) {
-            ref.current.scrollIntoView({
-                behavior: "smooth",
-                block: "center",
-                inline: "center",
-            });
-            if ((_a = liveField._editor) === null || _a === void 0 ? void 0 : _a.isFallback) {
-                loadFallback();
-            }
-        }
-    }, [editContext.focusedField]);
-    function loadFallback() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const chain = yield loadFallbackChain(field._editor.descriptor);
-            const liveChain = chain.map((x) => editContext.getLiveField(x));
-            setFallbackChain(liveChain);
-        });
-    }
-    useEffect(() => {
-        if (ref.current && isFocusedField) {
-            ref.current.scrollIntoView({
-                behavior: "smooth",
-                block: "center",
-                inline: "center",
-            });
-        }
-    }, [editContext.focusedField]);
     const liveField = editContext.getLiveField(field);
-    useEffect(() => {
-        var _a;
-        if ((_a = liveField._editor) === null || _a === void 0 ? void 0 : _a.isFallback) {
-            editContext.requestRefresh("waitForQuietPeriod");
-        }
-    }, [fallbackChain === null || fallbackChain === void 0 ? void 0 : fallbackChain.map((x) => x.value).join("")]);
     function editButtonClicked(x) {
         return __awaiter(this, void 0, void 0, function* () {
             editContext === null || editContext === void 0 ? void 0 : editContext.triggerFieldAction(field, x);
         });
     }
-    let classNames = "[&:not(:first-child)]:a-mt-5 a-flex a-items-stretch";
+    let classNames = " a-flex a-items-stretch";
     if (isFocusedField)
         classNames += " a-focused-field ";
     let validationBarClassNames = undefined;
@@ -84,10 +42,10 @@ export default function FieldListField({ field, validators, simplified, title, }
     });
     if ((executingAction === null || executingAction === void 0 ? void 0 : executingAction.state) == "running")
         classNames += " a-executing-action ";
-    const isLocked = (((_b = liveField._editor) === null || _b === void 0 ? void 0 : _b.lockedBy) &&
-        ((_d = (_c = liveField._editor) === null || _c === void 0 ? void 0 : _c.lockedBy) === null || _d === void 0 ? void 0 : _d.sessionId) != editContext.sessionId) ||
+    const isLocked = (((_a = liveField._editor) === null || _a === void 0 ? void 0 : _a.lockedBy) &&
+        ((_c = (_b = liveField._editor) === null || _b === void 0 ? void 0 : _b.lockedBy) === null || _c === void 0 ? void 0 : _c.sessionId) != editContext.sessionId) ||
         false;
-    const isReadOnly = !((_e = field._editor) === null || _e === void 0 ? void 0 : _e.canWrite) || isLocked;
+    const isReadOnly = !((_d = field._editor) === null || _d === void 0 ? void 0 : _d.canWrite) || isLocked;
     const renderButtons = () => {
         var _a, _b, _c, _d;
         if (((_b = (_a = field._editor) === null || _a === void 0 ? void 0 : _a.buttons) === null || _b === void 0 ? void 0 : _b.length) || 0 > 0)
@@ -103,24 +61,15 @@ export default function FieldListField({ field, validators, simplified, title, }
                             }, children: [x.icon && _jsx("i", { className: x.icon + " a-mr-2 a-text-xs" }), x.label] }, x.id))) })] }));
         return null;
     };
-    return (_jsxs("div", { ref: ref, className: classNames, onClick: () => {
-            var _a;
-            editContext.setFocusedField((_a = field._editor) === null || _a === void 0 ? void 0 : _a.descriptor, true);
-        }, children: [validationBarClassNames && (_jsxs(_Fragment, { children: [_jsx("div", { className: validationBarClassNames, id: "validation_" + field.id }), _jsx(Tooltip, { target: "#validation_" + field.id, children: validators
+    return (_jsxs("div", { className: classNames, children: [validationBarClassNames && (_jsxs(_Fragment, { children: [_jsx("div", { className: validationBarClassNames, id: "validation_" + field.id }), _jsx(Tooltip, { target: "#validation_" + field.id, children: validators
                             .filter((x) => x.result > 1)
-                            .map((x) => (_jsx("div", { children: x.message }, x.validator))) })] })), _jsxs("div", { className: "a-flex-1", children: [_jsxs("div", { className: "a-flex a-justify-between", children: [_jsx("label", { className: "a-font-bold a-block a-mb-1 a-text-sm", children: title || ((_f = field._editor) === null || _f === void 0 ? void 0 : _f.name) }), _jsxs("div", { className: "a-flex a-gap-2", children: [renderButtons(), isLocked && (_jsxs("div", { className: "a-text-xs a-bg-pink-400 a-text-white a-p-1", children: ["locked by ", (_h = (_g = liveField._editor) === null || _g === void 0 ? void 0 : _g.lockedBy) === null || _h === void 0 ? void 0 : _h.user.name] }))] })] }), isFocusedField && (_jsxs("div", { className: "a-flex a-gap-3 a-gap-y-1 a-flex-wrap", children: [!((_j = field._editor) === null || _j === void 0 ? void 0 : _j.isFallback) &&
-                                ((_k = liveField._editor) === null || _k === void 0 ? void 0 : _k.rawValue) !== null ? (_jsxs("button", { className: "a-text-xs a-p-0 ", onClick: () => {
+                            .map((x) => (_jsx("div", { children: x.message }, x.validator))) })] })), _jsxs("div", { className: "a-flex-1", children: [_jsxs("div", { className: "a-flex a-justify-between", children: [_jsx("label", { className: "a-font-bold a-block a-mb-1 a-text-sm", children: title || ((_e = field._editor) === null || _e === void 0 ? void 0 : _e.name) }), _jsxs("div", { className: "a-flex a-gap-2", children: [renderButtons(), isLocked && (_jsxs("div", { className: "a-text-xs a-bg-pink-400 a-text-white a-p-1", children: ["locked by ", (_g = (_f = liveField._editor) === null || _f === void 0 ? void 0 : _f.lockedBy) === null || _g === void 0 ? void 0 : _g.user.name] }))] })] }), isFocusedField && (_jsxs("div", { className: "a-flex a-gap-3 a-gap-y-1 a-flex-wrap", children: [!((_h = field._editor) === null || _h === void 0 ? void 0 : _h.isFallback) &&
+                                ((_j = liveField._editor) === null || _j === void 0 ? void 0 : _j.rawValue) !== null ? (_jsxs("button", { className: "a-text-xs a-p-0 ", onClick: () => {
                                     editContext === null || editContext === void 0 ? void 0 : editContext.editField({ field: field, rawValue: null });
-                                }, children: ["Reset", " "] })) : (_jsxs("button", { className: "a-text-xs a-p-0", onClick: () => setShowFallback(!showFallback), children: [_jsx("i", { className: "a-text-xs pi " +
-                                            (showFallback ? "pi-check-square" : "pi-stop") }), " ", "Fallback"] })), !simplified && (_jsxs("button", { className: "a-text-xs a-p-0", onClick: () => {
+                                }, children: ["Reset", " "] })) : (showFallbackButton), !simplified && (_jsxs("button", { className: "a-text-xs a-p-0", onClick: () => {
                                     setShowRawValue(!showRawValue);
                                 }, children: [_jsx("i", { className: "a-text-xs pi " +
-                                            (showRawValue ? "pi-check-square" : "pi-stop") }), " ", "Raw"] }))] })), (executingAction === null || executingAction === void 0 ? void 0 : executingAction.message) && (_jsx("div", { className: "a-text-xs a-p-0 a-mt-1 a-mb-1", children: executingAction === null || executingAction === void 0 ? void 0 : executingAction.message })), _jsx("div", { className: "a-text-xs a-p-0 a-mt-1", children: getFieldEditor(liveField, showRawValue, isReadOnly, editContext.configuration) }), liveField._editor.isFallback && isFocusedField && showFallback && (_jsxs("div", { children: [_jsx("div", { className: "a-text-center a-relative a-top-3.5", children: _jsx("i", { className: "pi pi-arrow-up a-text-xl a-font-bold  a-text-blue-300 a-fallback-arrow-animation" }) }), fallbackChain &&
-                                fallbackChain.map((x, i) => {
-                                    var _a, _b;
-                                    return (_jsx("div", { className: "a-ml-3", children: _jsx(FieldListField, { field: x, validators: validators, simplified: true, title: _jsxs("div", { className: "a-text-xs", children: [(_a = x._editor) === null || _a === void 0 ? void 0 : _a.name, " (", x._editor.descriptor.item.language, ")", x._editor.descriptor.item.id !=
-                                                        ((_b = liveField._editor) === null || _b === void 0 ? void 0 : _b.descriptor.item.id) && (_jsxs("span", { className: "a-text-gray-400", children: ["- Item: ", x._editor.descriptor.item.id] }))] }) }, i) }));
-                                })] }))] })] }, field.id +
+                                            (showRawValue ? "pi-check-square" : "pi-stop") }), " ", "Raw"] }))] })), (executingAction === null || executingAction === void 0 ? void 0 : executingAction.message) && (_jsx("div", { className: "a-text-xs a-p-0 a-mt-1 a-mb-1", children: executingAction === null || executingAction === void 0 ? void 0 : executingAction.message })), _jsx("div", { className: "a-text-xs a-p-0 a-mt-1", children: getFieldEditor(liveField, showRawValue, isReadOnly, editContext.configuration) })] })] }, field.id +
         "_" +
         fieldItem.id +
         "_" +

package/dist/esm/editor/FieldListFieldWithFallbacks.js

@@ -0,0 +1,79 @@
+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, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import FieldListField from "./FieldListField";
+import { useEditContext } from "./editContext";
+import { loadFallbackChain } from "./services/editService";
+export function FieldListFieldWithFallbacks({ field, validators, simplified, title, }) {
+    var _a;
+    const [showFallback, setShowFallback] = useState(false);
+    const [fallbackChain, setFallbackChain] = useState();
+    const ref = useRef(null);
+    const editContext = useEditContext();
+    if (!editContext)
+        return;
+    const liveField = editContext.getLiveField(field);
+    function isEditFieldOp(op) {
+        return (op === null || op === void 0 ? void 0 : op.type) === "edit-field";
+    }
+    function loadFallback(init) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const chain = yield loadFallbackChain(field._editor.descriptor);
+            const liveChain = chain.map((x) => editContext.getLiveField(x));
+            const currentEditOp = editContext.currentEditOperation;
+            liveChain.forEach((x, i) => {
+                if (init ||
+                    !isEditFieldOp(currentEditOp) ||
+                    currentEditOp.fieldId !== x.id ||
+                    currentEditOp.item.id !== x._editor.descriptor.item.id ||
+                    currentEditOp.item.language !== x._editor.descriptor.item.language) {
+                    x._editor = chain[i]._editor;
+                    x.value = chain[i].value;
+                    x.jsonValue = chain[i].jsonValue;
+                }
+            });
+            setFallbackChain(liveChain);
+        });
+    }
+    const fieldItem = field._editor.descriptor.item;
+    const isFocusedField = ((_a = editContext === null || editContext === void 0 ? void 0 : editContext.focusedField) === null || _a === void 0 ? void 0 : _a.fieldId) === field.id &&
+        editContext.focusedField.item.id === fieldItem.id &&
+        editContext.focusedField.item.language === fieldItem.language;
+    useEffect(() => {
+        var _a;
+        if (ref.current && isFocusedField) {
+            ref.current.scrollIntoView({
+                behavior: "smooth",
+                block: "center",
+                inline: "center",
+            });
+            if ((_a = liveField._editor) === null || _a === void 0 ? void 0 : _a.isFallback) {
+                loadFallback(true);
+            }
+        }
+    }, [editContext.focusedField]);
+    useEffect(() => {
+        var _a;
+        if (((_a = liveField._editor) === null || _a === void 0 ? void 0 : _a.isFallback) && isFocusedField) {
+            loadFallback(false);
+        }
+    }, [editContext.editOperationExecutedFlag, editContext.refreshCompletedFlag]);
+    const showFallbackButton = (_jsxs("button", { className: "a-text-xs a-p-0", onClick: () => setShowFallback(!showFallback), children: [_jsx("i", { className: "a-text-xs pi " + (showFallback ? "pi-check-square" : "pi-stop") }), " ", "Fallback"] }));
+    return (_jsxs("div", { ref: ref, className: "[&:not(:first-child)]:a-mt-5", onClick: () => {
+            var _a;
+            editContext.setFocusedField((_a = field._editor) === null || _a === void 0 ? void 0 : _a.descriptor, true);
+        }, children: [_jsx(FieldListField, { field: field, validators: validators, simplified: simplified, title: title, isFocusedField: isFocusedField, showFallbackButton: showFallbackButton }), liveField._editor.isFallback && isFocusedField && showFallback && (_jsx(_Fragment, { children: fallbackChain &&
+                    fallbackChain.slice(1).map((x, i) => {
+                        var _a, _b;
+                        return (_jsxs("div", { className: "a-ml-3", children: [_jsx("div", { className: "a-text-center", children: _jsx("i", { className: "pi pi-arrow-up a-text-xl a-font-bold a-text-blue-300 a-fallback-arrow-animation a-relative a-top-3" }) }), _jsx(FieldListField, { field: x, validators: validators, simplified: true, isFocusedField: true, title: _jsxs("div", { className: "a-text-xs", children: [(_a = x._editor) === null || _a === void 0 ? void 0 : _a.name, " (", x._editor.descriptor.item.language, ")", x._editor.descriptor.item.id !=
+                                                ((_b = liveField._editor) === null || _b === void 0 ? void 0 : _b.descriptor.item.id) && (_jsxs("span", { className: "a-text-gray-400", children: ["- Item: ", x._editor.descriptor.item.id] }))] }) }, i)] }, i));
+                    }) }))] }, field.id));
+}

package/dist/esm/editor/PictureEditorDialog.js

@@ -9,7 +9,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Dialog } from "primereact/dialog";
-import { useEditContext } from ".";
+import { useEditContext } from "./editContext";
 import { useCallback, useEffect, useState } from "react";
 import { Button } from "primereact/button";
 import DialogButtons from "./DialogButtons";

package/dist/esm/editor/PlaceholderDropZone.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import { ProgressBar } from "primereact/progressbar";
-import { useEditContext } from ".";
+import { useEditContext } from "./editContext";
 import { classNames } from "primereact/utils";
 import ReactDOM from "react-dom";
 import { useOutlineContext } from "./Outline";

package/dist/esm/editor/PreviewClient.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PreviewContextProvider } from "./previewContext";
+import "../../editor.css";
 export function PreviewClient({ children }) {
     return (_jsxs(PreviewContextProvider, { value: {}, children: [children, _jsxs("div", { className: "a-fixed a-right-2 a-bottom-1 a-text-opacity-50 a-cursor-default a-text-xs a-flex a-items-center a-text-gray-500 a-gap-2", children: [_jsx("i", { className: "pi pi-eye a-text-gray-100" }), " Preview"] })] }));
 }

package/dist/esm/editor/ai/AiPopup.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { OverlayPanel } from "primereact/overlaypanel";
-import { AiTerminal } from "./AiTerminal";
 import { Button } from "primereact/button";
 import { forwardRef, useImperativeHandle, useRef } from "react";
+import { EditorAiTerminal } from "./EditorAiTerminal";
 export const AiPopup = forwardRef((_, ref) => {
     const overlayRef = useRef(null);
     //const [components, setComponents] = useState<ComponentData[]>([]); // [componentId, componentId, ...]
@@ -18,7 +18,7 @@ export const AiPopup = forwardRef((_, ref) => {
             (_a = overlayRef.current) === null || _a === void 0 ? void 0 : _a.hide();
         },
     }));
-    return (_jsx(OverlayPanel, { ref: overlayRef, children: _jsx("div", { className: "a-w-96 a-h-96 a-flex a-flex-col a-gap-2", onClick: (ev) => ev.stopPropagation(), children: _jsx(AiTerminal
+    return (_jsx(OverlayPanel, { ref: overlayRef, children: _jsx("div", { className: "a-w-96 a-h-96 a-flex a-flex-col a-gap-2", onClick: (ev) => ev.stopPropagation(), children: _jsx(EditorAiTerminal
             //selection={components?.map((x) => x.id)}
             //newEditOperations={(ops) => setOperations([...operations, ...ops])}
             , { 

package/dist/esm/editor/ai/AiTerminal.js

@@ -15,10 +15,11 @@ import { useRouter, useSearchParams } from "next/navigation";
 import { Terminal } from "../Terminal";
 import { useEditContext } from "../editContext";
 import { Dropdown } from "primereact/dropdown";
-import { getSelectedText } from "../utils";
+import { getItemDescriptor, getSelectedText } from "../utils";
 import Cookies from "universal-cookie";
 import { WizardIcon } from "../ui/Icons";
 import { AiResponseMessage } from "./AiResponseMessage";
+import { loadAiConfig } from "../services/aiService";
 export function AiTerminal({ closeButton }) {
     const searchParams = useSearchParams();
     const editContext = useEditContext();
@@ -29,7 +30,17 @@ export function AiTerminal({ closeButton }) {
     const [response, setResponse] = useState();
     const [model, setModel] = useState("gpt-3.5-turbo-0125");
     const [prompt, setPrompt] = useState("");
+    const [config, setConfig] = useState();
     const selection = editContext.selection;
+    useEffect(() => {
+        function fetchConfig() {
+            return __awaiter(this, void 0, void 0, function* () {
+                const config = yield loadAiConfig(getItemDescriptor(editContext.page));
+                setConfig(config);
+            });
+        }
+        fetchConfig();
+    }, []);
     const messagesRef = useRef(messages);
     useEffect(() => {
         messagesRef.current = messages;
@@ -111,10 +122,11 @@ export function AiTerminal({ closeButton }) {
                         setResponse(undefined);
                     }, infobar: (response === null || response === void 0 ? void 0 : response.numInputTokens) && (_jsxs("div", { className: "a-text-gray-400 a-text-right", style: { fontSize: "10px" }, children: ["Tokens in: ", response === null || response === void 0 ? void 0 : response.numInputTokens, " out:", " ", response === null || response === void 0 ? void 0 : response.numOutputTokens, " ", response === null || response === void 0 ? void 0 : response.state, " "] })), prompt: prompt, setPrompt: setPrompt, statusbar: _jsxs("div", { className: "a-flex a-items-center a-justify-between a-gap-1", children: [_jsxs("a", { className: "a-text-xs a-text-blue-300 a-cursor-pointer a-flex a-items-center a-gap-1", onClick: () => {
                                     setShowPredefined(!showPredefined);
-                                }, children: [_jsx(WizardIcon, { className: "a-w-5 a-h-5" }), "Predefined prompts"] }), showPredefined && (_jsx("div", { className: "a-absolute a-right-0 a-left-0 a-bottom-8 a-text-sm a-overflow-y-auto a-bg-white a-p-3 a-pb-1 a-flex a-flex-col a-gap-1 ", children: editContext.editData.aiPrompts.map((p, index) => (_jsx("div", { className: "a-p-1.5 a-mb-1 a-border a-border-gray-200 a-rounded-lg a-cursor-pointer a-text-gray-700 a-text-xs", onClick: () => {
-                                        setPrompt(p.prompt);
-                                        setShowPredefined(false);
-                                    }, children: p.title }, index))) }))] }), toolbar: _jsxs("div", { className: "a-flex a-items-center", children: [_jsx(Dropdown, { className: "a-text-sm", value: model, onChange: (e) => setModel(e.value), options: [
+                                }, children: [_jsx(WizardIcon, { className: "a-w-5 a-h-5" }), "Predefined prompts"] }), showPredefined && (_jsx("div", { className: "a-absolute a-right-0 a-left-0 a-bottom-8 a-text-sm a-overflow-y-auto a-bg-white a-p-3 a-pb-1 a-flex a-flex-col a-gap-1 ", children: config &&
+                                    config.prompts.map((p, index) => (_jsx("div", { className: "a-p-1.5 a-mb-1 a-border a-border-gray-200 a-rounded-lg a-cursor-pointer a-text-gray-700 a-text-xs", onClick: () => {
+                                            setPrompt(p.prompt);
+                                            setShowPredefined(false);
+                                        }, children: p.title }, index))) }))] }), toolbar: _jsxs("div", { className: "a-flex a-items-center", children: [_jsx(Dropdown, { className: "a-text-sm", value: model, onChange: (e) => setModel(e.value), options: [
                                     "gpt-3.5-turbo-0125",
                                     "gpt-4-0125-preview",
                                     "gpt-3.5-turbo-1106",

package/dist/esm/editor/ai/EditorAiTerminal.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AiTerminal } from "./AiTerminal";
+export function EditorAiTerminal({ closeButton, }) {
+    return _jsx(AiTerminal, { closeButton: closeButton });
+}

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ComponentPreview } from "./ComponentPreview";
+import { ComponentRenderingEditor } from "./ComponentRenderingEditor";
+import { Splitter, SplitterPanel } from "primereact/splitter";
+export function ComponentDesigner() {
+    return (_jsxs(Splitter, { className: "a-h-full", children: [_jsx(SplitterPanel, { children: _jsx(ComponentRenderingEditor, {}) }), _jsx(SplitterPanel, { children: _jsx(ComponentPreview, {}) })] }));
+}

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AiTerminal } from "../ai/AiTerminal";
+export function ComponentDesignerAiTerminal() {
+    return _jsx(AiTerminal, {});
+}

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

@@ -0,0 +1,39 @@
+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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Menubar } from "primereact/menubar";
+import { useComponentDesignerContext } from "./componentDesignerContext";
+import { createNewComponent } from "../services/componentDesignerService";
+import ItemNameDialog from "../ui/ItemNameDialog";
+import { useRef } from "react";
+export function ComponentDesignerMenu() {
+    const context = useComponentDesignerContext();
+    if (!context)
+        return;
+    const menuItems = [
+        {
+            label: "New Component",
+            icon: "pi pi-fw pi-plus",
+            command: () => createNew(),
+            disabled: !context.componentRenderingFolder,
+        },
+    ];
+    const itemNameDialogRef = useRef(null);
+    const createNew = () => __awaiter(this, void 0, void 0, function* () {
+        var _a;
+        (_a = itemNameDialogRef.current) === null || _a === void 0 ? void 0 : _a.show({
+            title: "Choose component name",
+            accept: (name) => __awaiter(this, void 0, void 0, function* () {
+                yield createNewComponent(context.componentRenderingFolder, name);
+            }),
+        });
+    });
+    return (_jsxs(_Fragment, { children: [_jsx(Menubar, { model: menuItems, className: "a-p-1 a-text-sm a-rounded-none a-border-0 a-border-b a-bg-gray-50" }), _jsx(ItemNameDialog, { ref: itemNameDialogRef })] }));
+}

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { usePathname } from "next/navigation";
+import { useComponentDesignerContext } from "./componentDesignerContext";
+import { useEffect, useState } from "react";
+import { useEditContext } from "../editContext";
+export function ComponentPreview() {
+    const context = useComponentDesignerContext();
+    const editContext = useEditContext();
+    if (!context)
+        return null;
+    const pathname = usePathname();
+    // State to hold the iframe src URL
+    const [iframeSrc, setIframeSrc] = useState("");
+    useEffect(() => {
+        var _a;
+        const newSrc = `${pathname}?itemid=${(_a = context.sampleItem) === null || _a === void 0 ? void 0 : _a.id}&language=en&mode=edit&codeVersion=${Date.now()}&fullscreen=true`;
+        setIframeSrc(newSrc);
+    }, [editContext === null || editContext === void 0 ? void 0 : editContext.editOperationExecutedFlag]);
+    return (_jsx("iframe", { className: "a-w-full a-h-full", src: iframeSrc, title: "Component Preview" }));
+}

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

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import dynamic from "next/dynamic";
+import "@uiw/react-textarea-code-editor/dist.css";
+import { useEffect } from "react";
+import { useComponentDesignerContext } from "./componentDesignerContext";
+import { useEditContext } from "../editContext";
+const CodeEditor = dynamic(() => import("@uiw/react-textarea-code-editor").then((mod) => mod.default), { ssr: false });
+export function ComponentRenderingEditor() {
+    const context = useComponentDesignerContext();
+    if (!context)
+        return null;
+    const editContext = useEditContext();
+    if (!editContext)
+        return null;
+    useEffect(() => {
+        var _a, _b, _c;
+        context.setCode(((_c = (_b = (_a = context.componentRenderingItem) === null || _a === void 0 ? void 0 : _a.fields) === null || _b === void 0 ? void 0 : _b.code) === null || _c === void 0 ? void 0 : _c.value) || "");
+    }, [context.componentRenderingItem]);
+    useEffect(() => {
+        const timeout = setTimeout(() => {
+            if (context.componentRenderingItem) {
+                context.componentRenderingItem.fields.code.value = context.code;
+                editContext.editField({
+                    field: context.componentRenderingItem.fields.code,
+                    value: context.code,
+                });
+            }
+        }, 600);
+        return () => clearTimeout(timeout);
+    }, [context.code]);
+    if (!context.componentRenderingItem)
+        return null;
+    return (_jsx("div", { children: _jsx(CodeEditor, { value: context.code, language: "js", placeholder: "Please enter TSX code.", onChange: (evn) => context.setCode(evn.target.value), padding: 15, style: {
+                fontSize: 12,
+                backgroundColor: "#f5f5f5",
+                fontFamily: "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace",
+            } }) }));
+}