@alpaca-headless/alpaca-headless-nextjs 1.0.21 → 1.0.26

package/dist/cjs/components/Error.js

@@ -0,0 +1,15 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorFallbackWithDetails = exports.ErrorFallback = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function ErrorFallback() {
+    // Call resetErrorBoundary() to reset the error boundary and retry the render.
+    return ((0, jsx_runtime_1.jsx)("div", { role: "alert", children: (0, jsx_runtime_1.jsx)("p", { children: "Something went wrong." }) }));
+}
+exports.ErrorFallback = ErrorFallback;
+function ErrorFallbackWithDetails({ error }) {
+    // Call resetErrorBoundary() to reset the error boundary and retry the render.
+    return ((0, jsx_runtime_1.jsxs)("div", { role: "alert", children: [(0, jsx_runtime_1.jsx)("p", { children: "Something went wrong:" }), (0, jsx_runtime_1.jsxs)("pre", { style: { color: "red" }, children: [error.message, " ", error.stack] })] }));
+}
+exports.ErrorFallbackWithDetails = ErrorFallbackWithDetails;

package/dist/cjs/components/Link.js

@@ -23,6 +23,11 @@ function Link(_a) {
     var { field, children } = _a, props = __rest(_a, ["field", "children"]);
     if (!field)
         return;
+    if (field.jsonValue) {
+        field = field.jsonValue;
+    }
+    if (!field.value)
+        return;
     const editing = (_b = (0, __1.useAlpacaContext)().pageContext) === null || _b === void 0 ? void 0 : _b.pageEditing;
     if (editing)
         return ((0, jsx_runtime_1.jsx)(LinkEditor_1.default, Object.assign({ field: field, children: children }, props)));

package/dist/cjs/components/Picture.js

@@ -34,6 +34,9 @@ const Picture = (_a) => {
     var { field, imageParams, sources, defaultVariant, renderJsonLinkedData } = _a, otherProps = __rest(_a, ["field", "imageParams", "sources", "defaultVariant", "renderJsonLinkedData"]);
     if (!field)
         return null;
+    if (field.jsonValue) {
+        field = field.jsonValue;
+    }
     if ((_b = (0, __1.useAlpacaContext)().pageContext) === null || _b === void 0 ? void 0 : _b.pageEditing)
         return (0, jsx_runtime_1.jsx)(PictureEditor_1.PictureEditor, Object.assign({ field: field }, otherProps));
     const variants = (_c = field.value) === null || _c === void 0 ? void 0 : _c.variants;

package/dist/cjs/components/PictureEditor.js

@@ -30,8 +30,11 @@ const PictureEditor = (_a) => {
         return;
     function imageSelected(imageId) {
         const value = (field === null || field === void 0 ? void 0 : field.value) || {};
-        //value.variants[0].mediaId = imageId;
+        if (!selectedVariant)
+            return;
+        selectedVariant.mediaId = imageId;
         console.log(imageId);
+        console.log(JSON.stringify(value));
         if (field)
             editContext === null || editContext === void 0 ? void 0 : editContext.editField(field, JSON.stringify(value), false);
     }

package/dist/cjs/components/Placeholder.js

@@ -18,6 +18,8 @@ const EditFrame_1 = require("../editor/EditFrame");
 const __1 = require("..");
 const PlaceholderDropZoneHost_1 = require("../editor/PlaceholderDropZoneHost");
 const Slot_1 = __importDefault(require("./Slot"));
+const react_error_boundary_1 = require("react-error-boundary");
+const Error_1 = require("./Error");
 function Placeholder({ name, content, }) {
     return __awaiter(this, void 0, void 0, function* () {
         const data = yield content;
@@ -50,11 +52,16 @@ function Placeholder({ name, content, }) {
         const components = yield Promise.all(promises);
         if (context.pageContext.pageEditing) {
             return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [components.map(({ Component, data, parent }, index) => {
-                        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(PlaceholderDropZoneHost_1.PlaceholderDropZoneHost, { parentName: parent === null || parent === void 0 ? void 0 : parent.name, placeholder: placeholderData, index: index + 1 }), (0, jsx_runtime_1.jsx)(EditFrame_1.EditFrame, { componentId: data.id, children: (0, jsx_runtime_1.jsx)(Component, { component: data }) }, data.id)] }));
+                        try {
+                            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(PlaceholderDropZoneHost_1.PlaceholderDropZoneHost, { parentName: parent === null || parent === void 0 ? void 0 : parent.name, placeholder: placeholderData, index: index + 1 }), (0, jsx_runtime_1.jsx)(EditFrame_1.EditFrame, { componentId: data.id, children: (0, jsx_runtime_1.jsx)(react_error_boundary_1.ErrorBoundary, { FallbackComponent: Error_1.ErrorFallbackWithDetails, children: (0, jsx_runtime_1.jsx)(Component, { component: data }) }) }, data.id)] }));
+                        }
+                        catch (e) {
+                            return ((0, jsx_runtime_1.jsxs)("div", { children: ["Error rendering component ", data.name, ": ", e.message] }));
+                        }
                     }), (0, jsx_runtime_1.jsx)(PlaceholderDropZoneHost_1.PlaceholderDropZoneHost, { parentName: data === null || data === void 0 ? void 0 : data.name, placeholder: placeholderData, index: components.length + 1 })] }));
         }
         else
-            return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: components.map(({ Component, data }) => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Component, { component: data }) }))) }));
+            return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: components.map(({ Component, data }) => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_error_boundary_1.ErrorBoundary, { FallbackComponent: Error_1.ErrorFallback, children: (0, jsx_runtime_1.jsx)(Component, { component: data }) }) }))) }));
     });
 }
 exports.Placeholder = Placeholder;

package/dist/cjs/components/RichText.js

@@ -33,9 +33,12 @@ function RichText(_a) {
     return __awaiter(this, void 0, void 0, function* () {
         if (!field)
             return;
+        if (field.jsonValue) {
+            field = field.jsonValue;
+        }
         const internalProps = Object.assign(Object.assign({}, props), { dangerouslySetInnerHTML: {
                 __html: field.value,
-            }, editable: editable, contentEditable: true, "data-test": "test", placeholder: '[' + field.name + ']' });
+            }, editable: editable, contentEditable: true, "data-test": "test", placeholder: "[" + field.name + "]" });
         if ((0, __1.useAlpacaContext)().pageContext.pageEditing)
             return (0, jsx_runtime_1.jsx)(RichTextEditor_1.RichTextEditor, Object.assign({ field: field, tag: tag }, props));
         return react_1.default.createElement(tag || "div", Object.assign(props, internalProps));

package/dist/cjs/components/RichTextEditor.js

@@ -46,10 +46,7 @@ function RichTextEditor(_a) {
     if (!editContext)
         return;
     const { updateContentEditingFields } = editContext;
-    const component = editContext.getComponentById(field.itemId);
-    if (!component)
-        return;
-    const liveField = Object.values(component.fields).find((f) => f.id == field.id);
+    const liveField = editContext.getLiveField(field);
     (0, react_1.useEffect)(() => {
         if (editedValue != liveField.value &&
             "<p>" + editedValue + "</p>" != liveField.value) {

package/dist/cjs/components/Text.js

@@ -36,8 +36,9 @@ function Text(_a) {
         if (field.jsonValue) {
             field = field.jsonValue;
         }
-        if ((0, __1.useAlpacaContext)().pageContext.pageEditing)
-            return (0, jsx_runtime_1.jsx)(TextEditor_1.TextEditor, Object.assign({ field: field, tag: tag }, props));
+        if ((0, __1.useAlpacaContext)().pageContext.pageEditing) {
+            return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(TextEditor_1.TextEditor, Object.assign({ field: field, tag: tag }, props)) }));
+        }
         else
             return react_1.default.createElement(tag || "div", props, field.value);
     });

package/dist/cjs/components/TextEditor.js

@@ -46,10 +46,7 @@ function TextEditor(_a) {
     if (!editContext)
         return;
     const { updateContentEditingFields } = editContext;
-    const component = editContext.getComponentById(field.itemId);
-    if (!component)
-        return;
-    const liveField = Object.values(component.fields).find((f) => f.id == field.id);
+    const liveField = editContext.getLiveField(field);
     (0, react_1.useEffect)(() => {
         if (editedValue != liveField.value)
             setValue(liveField.value);

package/dist/cjs/editor/AiTerminal.js

@@ -45,7 +45,7 @@ function AiTerminal({ requestRefresh, selection, }) {
                 handleResponse(response, callback, false);
                 if (response.editOperations.length) {
                     if (new Date().getTime() - lastRefresh > 500) {
-                        requestRefresh(false);
+                        requestRefresh("delayed");
                         router.refresh();
                         lastRefresh = new Date().getTime();
                     }

package/dist/cjs/editor/ComponentPalette.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ComponentPalette = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const tabview_1 = require("primereact/tabview");
 const __1 = require("..");
 const ContentTree_1 = __importDefault(require("./ContentTree"));
 function ComponentPalette({ selection, page, dragStart, dragEnd, }) {
@@ -34,25 +35,25 @@ function ComponentPalette({ selection, page, dragStart, dragEnd, }) {
     //     editContext!.droppedInPlaceholder(key, parseInt(index));
     //   }
     // }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", { className: "a-text-xl a-font-bold a-mb-8", children: "New" }), (0, jsx_runtime_1.jsx)("div", { className: "a-grid a-grid-cols-4 a-gap-1", children: insertOptions.map((option) => {
-                    function handleDragStart(event) {
-                        dragStart({ type: "template", templateId: option.id });
-                        event.stopPropagation();
-                    }
-                    function handleDragEnd() {
-                        dragEnd();
-                    }
-                    return ((0, jsx_runtime_1.jsxs)("div", { 
-                        //    onClick={directInsert}
-                        draggable: true, onDragStart: handleDragStart, onDragEnd: handleDragEnd, className: "a-p-3 a-shadow-md a-flex a-items-center a-flex-col a-gap-1 a-cursor-grab", children: [(0, jsx_runtime_1.jsx)("img", { src: option.icon, width: "32", height: "32" }), option.name] }, option.id));
-                }) }), (0, jsx_runtime_1.jsx)("h2", { className: "a-text-xl a-font-bold a-my-8", children: "Existing" }), (0, jsx_runtime_1.jsx)(ContentTree_1.default, { rootItemId: "0DE95AE4-41AB-4D01-9EB0-67441B7C2450", dragStart: (itemNode) => {
-                    dragStart({
-                        type: "link-component",
-                        templateId: itemNode.templateId,
-                        componentId: itemNode.id,
-                    });
-                }, expandIdPath: page.idPath, dragEnd: dragEnd, isDraggable: (x) => x.isComponent &&
-                    (insertOptions === null || insertOptions === void 0 ? void 0 : insertOptions.find((insertOption) => insertOption.id == x.templateId)) != undefined })] }));
+    return ((0, jsx_runtime_1.jsxs)(tabview_1.TabView, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "New", children: (0, jsx_runtime_1.jsx)("div", { className: "a-grid a-grid-cols-4 a-gap-1", children: insertOptions.map((option) => {
+                        function handleDragStart(event) {
+                            dragStart({ type: "template", templateId: option.id });
+                            event.stopPropagation();
+                        }
+                        function handleDragEnd() {
+                            dragEnd();
+                        }
+                        return ((0, jsx_runtime_1.jsxs)("div", { 
+                            //    onClick={directInsert}
+                            draggable: true, onDragStart: handleDragStart, onDragEnd: handleDragEnd, className: "a-p-3 a-shadow-md a-flex a-items-center a-flex-col a-gap-1 a-cursor-grab", children: [(0, jsx_runtime_1.jsx)("img", { src: option.icon, width: "32", height: "32" }), option.name] }, option.id));
+                    }) }) }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Existing", children: (0, jsx_runtime_1.jsx)(ContentTree_1.default, { rootItemId: "0DE95AE4-41AB-4D01-9EB0-67441B7C2450", dragStart: (itemNode) => {
+                        dragStart({
+                            type: "link-component",
+                            templateId: itemNode.templateId,
+                            componentId: itemNode.id,
+                        });
+                    }, expandIdPath: page.idPath, dragEnd: dragEnd, isDraggable: (x) => x.isComponent &&
+                        (insertOptions === null || insertOptions === void 0 ? void 0 : insertOptions.find((insertOption) => insertOption.id == x.templateId)) != undefined }) })] }));
 }
 exports.ComponentPalette = ComponentPalette;
 function collectInsertOptions(page, placeholderKeys) {

package/dist/cjs/editor/EditorClient.js

@@ -80,6 +80,7 @@ function EditorClient({ content, dictionaryObject, edit, children, }) {
     const searchParams = (0, navigation_1.useSearchParams)();
     const [selection, setSelection] = (0, react_1.useState)([]);
     const [selectedForInsertion, setSelectedForInsertion] = (0, react_1.useState)("");
+    const [liveUpdatingFields, setLiveUpdatingFields] = (0, react_1.useState)([]);
     const [currentEditOperation, setCurrentEditOperation] = (0, react_1.useState)();
     const [dictionary, setDictionary] = (0, react_1.useState)(dictionaryObject);
     const [unresolvedDictionaryKeys, setUnresolvedDictionaryKeys] = (0, react_1.useState)([]);
@@ -147,23 +148,33 @@ function EditorClient({ content, dictionaryObject, edit, children, }) {
                     setSelection([result.componentId]);
                 }
                 if (!currentEditOperation.noRefresh)
-                    requestRefresh(currentEditOperation.refreshAfterQuietPeriod);
+                    requestRefresh(currentEditOperation.refreshAfterQuietPeriod
+                        ? "waitForQuietPeriod"
+                        : "delayed");
             }
         });
         sync();
     }, [currentEditOperation]);
-    const requestRefresh = (waitForQuietPeriod) => {
-        console.log("request refresh with " + waitForQuietPeriod);
-        if (waitForQuietPeriod && refreshTimer) {
+    const requestRefresh = (mode) => {
+        if (mode === "immediate") {
+            console.log("Immediate refresh requested");
+            clearTimeout(refreshTimer);
+            router.refresh();
+            setRefreshCompletedFlag(!refreshCompletedFlag);
+            setRefreshTimer(undefined);
+            return;
+        }
+        console.log("request refresh with mode: " + mode);
+        if (mode === "waitForQuietPeriod" && refreshTimer) {
             clearTimeout(refreshTimer);
         }
-        if (!refreshTimer || waitForQuietPeriod) {
+        if (!refreshTimer || mode === "waitForQuietPeriod") {
             setRefreshTimer(setTimeout(() => {
                 console.log("refreshing");
                 router.refresh();
                 setRefreshCompletedFlag(!refreshCompletedFlag);
                 setRefreshTimer(undefined);
-            }, waitForQuietPeriod ? 2000 : 1000));
+            }, mode === "waitForQuietPeriod" ? 2000 : 1000));
         }
     };
     const saveAndRefresh = (callback) => __awaiter(this, void 0, void 0, function* () {
@@ -268,6 +279,16 @@ function EditorClient({ content, dictionaryObject, edit, children, }) {
             }
         });
     }
+    const getLiveField = (field) => {
+        const existingField = liveUpdatingFields.find((f) => f.id === field.id &&
+            f.language === field.language &&
+            f.version === field.version &&
+            f.itemId === field.itemId);
+        if (existingField)
+            return existingField;
+        setLiveUpdatingFields([...liveUpdatingFields, field]);
+        return field;
+    };
     const selectedComponent = selection.length === 1 && page ? getComponentById(selection[0]) : null;
     const editField = (field, value, noRefresh = true) => {
         var _a;
@@ -300,6 +321,7 @@ function EditorClient({ content, dictionaryObject, edit, children, }) {
         op.noRefresh = noRefresh;
         op.refreshAfterQuietPeriod = !noRefresh;
         op.value = value;
+        getLiveField(field).value = value;
         function getField(fields, id) {
             return Object.values(fields).find((f) => f.id === id);
         }
@@ -349,10 +371,12 @@ function EditorClient({ content, dictionaryObject, edit, children, }) {
             dragObject,
             dictionary,
             setDictionary,
+            requestRefresh,
             refreshCompletedFlag,
             unresolvedDictionaryKeys,
             setUnresolvedDictionaryKeys,
             updateContentEditingFields,
+            getLiveField,
             showToast: () => { },
             removeComponent: (componentId, callback) => {
                 (0, confirmdialog_1.confirmDialog)({
@@ -438,7 +462,7 @@ function EditorClient({ content, dictionaryObject, edit, children, }) {
                     setCurrentEditOperation(op);
                 setDragObject(undefined);
             }),
-        }, children: [(0, jsx_runtime_1.jsx)(toast_1.Toast, { ref: toast }), (0, jsx_runtime_1.jsxs)(api_1.PrimeReactProvider, { children: [(0, jsx_runtime_1.jsx)(confirmdialog_1.ConfirmDialog, {}), (0, jsx_runtime_1.jsx)(sidebar_1.Sidebar, { style: { width: "40%" }, visible: componentsPaletteVisible, position: "right", onHide: () => setComponentsPaletteVisible(false), pt: {
+        }, children: [(0, jsx_runtime_1.jsx)(toast_1.Toast, { ref: toast }), (0, jsx_runtime_1.jsxs)(api_1.PrimeReactProvider, { children: [(0, jsx_runtime_1.jsx)(confirmdialog_1.ConfirmDialog, {}), (0, jsx_runtime_1.jsx)(sidebar_1.Sidebar, { style: { width: "40%" }, visible: componentsPaletteVisible, position: "right", onHide: () => setComponentsPaletteVisible(false), header: "Insert component", pt: {
                             mask: {
                                 onDragOver: () => setHidePalette(true),
                                 style: {
@@ -455,6 +479,6 @@ function EditorClient({ content, dictionaryObject, edit, children, }) {
                                     setHidePalette(false);
                                 }
                                 setSelectedForInsertion("");
-                            } })) }), (0, jsx_runtime_1.jsxs)(blockui_1.BlockUI, { blocked: uiBlocked, template: spinner, children: [(0, jsx_runtime_1.jsx)(menubar_1.Menubar, { model: menuItems, end: endContent }), (0, jsx_runtime_1.jsxs)(splitter_1.Splitter, { children: [(0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { size: 25, className: "alpaca-overflow-scroll", children: (0, jsx_runtime_1.jsxs)(splitter_1.Splitter, { layout: "vertical", children: [(0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { className: "a-overflow-hidden a-relative", children: (0, jsx_runtime_1.jsx)("div", { className: "a-inset-0 a-absolute a-overflow-y-auto", children: (0, jsx_runtime_1.jsx)(ComponentTree_1.ComponentTree, { page: page, selection: selection }) }) }), (0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { className: "alpaca-editor-tabs", children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, { className: "a-inset-0 a-absolute", scrollable: true, children: [selectedComponent && ((0, jsx_runtime_1.jsxs)(tabview_1.TabPanel, { header: "Fields", children: [(0, jsx_runtime_1.jsx)(ComponentInfo_1.ComponentInfo, { component: selectedComponent }), (0, jsx_runtime_1.jsx)(FieldList_1.FieldList, { fields: selectedComponent.fields })] })), selectedComponent && ((0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "GraphQL", style: { height: "100%" }, children: (0, jsx_runtime_1.jsx)(GraphQL_1.GraphQL, { component: selectedComponent }) })), (0, jsx_runtime_1.jsxs)(tabview_1.TabPanel, { header: "Page", children: [page && (0, jsx_runtime_1.jsx)(PageInfo_1.PageInfo, { page: page }), page && (0, jsx_runtime_1.jsx)(FieldList_1.FieldList, { fields: page.fields })] }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Dictionary", children: (0, jsx_runtime_1.jsx)(DictionaryEditor_1.DictionaryEditor, { dictionary: dictionary }) }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Debug", children: (0, jsx_runtime_1.jsx)(Debug_1.Debug, { component: selectedComponent, page: page }) })] }) })] }) }), (0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { size: 55, className: "alpaca-overflow-scroll alpaca-editor-content", children: (0, jsx_runtime_1.jsx)("div", { onDragEndCapture: () => setDragObject(undefined), className: "alpaca-editor-container", children: children }) }), (0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { size: 20, children: (0, jsx_runtime_1.jsxs)(splitter_1.Splitter, { layout: "vertical", className: "alpaca-editor", children: [(0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { className: "overflow-hidden a-relative", children: (0, jsx_runtime_1.jsx)(EditHistory_1.EditHistory, { operations: editData === null || editData === void 0 ? void 0 : editData.operations }) }), (0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { className: "overflow-hidden a-relative", children: (0, jsx_runtime_1.jsx)(AiTerminal_1.AiTerminal, { selection: selection, requestRefresh: requestRefresh }) })] }) })] })] })] })] }));
+                            } })) }), (0, jsx_runtime_1.jsxs)(blockui_1.BlockUI, { blocked: uiBlocked, template: spinner, children: [(0, jsx_runtime_1.jsx)(menubar_1.Menubar, { model: menuItems, end: endContent }), (0, jsx_runtime_1.jsxs)(splitter_1.Splitter, { children: [(0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { size: 30, className: "alpaca-overflow-scroll", children: (0, jsx_runtime_1.jsxs)(splitter_1.Splitter, { layout: "vertical", children: [(0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { size: 30, className: "a-overflow-hidden a-relative", children: (0, jsx_runtime_1.jsx)("div", { className: "a-inset-0 a-absolute a-overflow-y-auto", children: (0, jsx_runtime_1.jsx)(ComponentTree_1.ComponentTree, { page: page, selection: selection }) }) }), (0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { className: "alpaca-editor-tabs", children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, { className: "a-inset-0 a-absolute", scrollable: true, children: [selectedComponent && ((0, jsx_runtime_1.jsxs)(tabview_1.TabPanel, { header: "Fields", children: [(0, jsx_runtime_1.jsx)(ComponentInfo_1.ComponentInfo, { component: selectedComponent }), (0, jsx_runtime_1.jsx)(FieldList_1.FieldList, { fields: selectedComponent.fields })] })), selectedComponent && ((0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "GraphQL", style: { height: "100%" }, children: (0, jsx_runtime_1.jsx)(GraphQL_1.GraphQL, { component: selectedComponent }) })), (0, jsx_runtime_1.jsxs)(tabview_1.TabPanel, { header: "Page", children: [page && (0, jsx_runtime_1.jsx)(PageInfo_1.PageInfo, { page: page }), page && (0, jsx_runtime_1.jsx)(FieldList_1.FieldList, { fields: page.fields })] }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Dictionary", children: (0, jsx_runtime_1.jsx)(DictionaryEditor_1.DictionaryEditor, { dictionary: dictionary }) }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Debug", children: (0, jsx_runtime_1.jsx)(Debug_1.Debug, { component: selectedComponent, page: page }) })] }) })] }) }), (0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { size: 55, className: "alpaca-overflow-scroll alpaca-editor-content", children: (0, jsx_runtime_1.jsx)("div", { onDragEndCapture: () => setDragObject(undefined), className: "alpaca-editor-container", children: children }) }), (0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { size: 15, children: (0, jsx_runtime_1.jsxs)(splitter_1.Splitter, { layout: "vertical", className: "alpaca-editor", children: [(0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { className: "overflow-hidden a-relative", children: (0, jsx_runtime_1.jsx)(EditHistory_1.EditHistory, { operations: editData === null || editData === void 0 ? void 0 : editData.operations }) }), (0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { className: "overflow-hidden a-relative", children: (0, jsx_runtime_1.jsx)(AiTerminal_1.AiTerminal, { selection: selection, requestRefresh: requestRefresh }) })] }) })] })] })] })] }));
 }
 exports.EditorClient = EditorClient;

package/dist/cjs/editor/FieldList.js

@@ -3,13 +3,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FieldList = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const __1 = require("..");
 const inputtext_1 = require("primereact/inputtext");
 const checkbox_1 = require("primereact/checkbox");
 const SingleLineText_1 = require("./fieldTypes/SingleLineText");
 const RichTextEditor_1 = require("./fieldTypes/RichTextEditor");
 function FieldList({ fields }) {
-    if (!fields)
-        return;
+    const editContext = (0, __1.useEditContext)();
+    if (!editContext)
+        if (!fields)
+            return;
     if (!Array.isArray(fields))
         fields = Object.values(fields);
     const sections = fields.reduce((acc, value) => {
@@ -23,11 +26,13 @@ function FieldList({ fields }) {
     }, {});
     const sectionList = Object.values(sections);
     sectionList.sort((a, b) => b[0].sortOrder - a[0].sortOrder);
-    return ((0, jsx_runtime_1.jsx)("div", { className: "a-p-1", children: Object.keys(sections).map((section) => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "alpaca-fields-section-headline", children: section }), getSectionFields(sections[section])] }, section))) }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: "a-p-1", children: Object.keys(sections).map((section) => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "alpaca-fields-section-headline", children: section }), getSectionFields(sections[section], editContext)] }, section))) }));
 }
 exports.FieldList = FieldList;
-function getSectionFields(fields) {
-    return fields.map((field) => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "alpaca-field-label", children: field.name }), !field.containsFallbackValue ? ((0, jsx_runtime_1.jsx)("button", { className: "a-text-xs a-p-0 a-m-1", children: "Reset " })) : ((0, jsx_runtime_1.jsx)("button", { children: "Fallback" })), (0, jsx_runtime_1.jsx)("div", { children: getFieldEditor(field) })] }, field.id)));
+function getSectionFields(fields, editContext) {
+    return fields
+        .map((field) => editContext.getLiveField(field))
+        .map((field) => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "alpaca-field-label", children: field.name }), !field.containsFallbackValue ? ((0, jsx_runtime_1.jsx)("button", { className: "a-text-xs a-p-0 a-m-1", children: "Reset " })) : ((0, jsx_runtime_1.jsx)("button", { children: "Fallback" })), (0, jsx_runtime_1.jsx)("div", { children: getFieldEditor(field) })] }, field.id)));
 }
 function getFieldEditor(field) {
     switch (field.type) {

package/dist/cjs/editor/GraphQL.js

@@ -79,11 +79,10 @@ function GraphQL({ component }) {
             type: "jsonValue",
         };
         const prettyQuery = (0, graphql_formatter_1.format)(query);
-        console.log(query);
-        console.log(prettyQuery);
         setQuery(prettyQuery);
         editContext === null || editContext === void 0 ? void 0 : editContext.editField(field, prettyQuery, false);
         setShowSpinner(true);
+        editContext === null || editContext === void 0 ? void 0 : editContext.requestRefresh("immediate");
     }
     return ((0, jsx_runtime_1.jsxs)(splitter_1.Splitter, { layout: "vertical", style: { height: "100%" }, children: [(0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { size: 50, className: "a-relative", children: (0, jsx_runtime_1.jsxs)("div", { className: "a-absolute a-inset-0 a-flex", children: [(0, jsx_runtime_1.jsx)(inputtextarea_1.InputTextarea, { value: query, onChange: (e) => setQuery(e.target.value), className: "a-flex-1", style: { height: "100%" } }), (0, jsx_runtime_1.jsx)(button_1.Button, { icon: "pi pi-refresh" + (showSpinner ? " pi-spin" : ""), onClick: refresh, disabled: showSpinner })] }) }), (0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { className: "alpaca-editor-tabs", children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, { className: "a-inset-0 a-absolute", children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Data", style: { height: "100%" }, className: "a-relative", children: (0, jsx_runtime_1.jsx)("div", { className: "a-m-1", children: Object.values(fieldsjsonValues).map((x) => renderItem(x)) }) }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "JSON", className: "a-relative", style: { height: "100%" }, children: (0, jsx_runtime_1.jsx)("div", { className: "a-inset-0 a-absolute a-overflow-y-auto", children: (0, jsx_runtime_1.jsx)(react_json_pretty_1.default, { data: component.graphql }) }) })] }) })] }));
 }

package/dist/cjs/editor/MediaSelector.js

@@ -43,7 +43,7 @@ const MediaSelector = ({ visible, onHide, onMediaSelected, }) => {
             }
         });
     }
-    return ((0, jsx_runtime_1.jsx)(dialog_1.Dialog, { style: { width: "60%" }, visible: visible, onHide: onHide, children: (0, jsx_runtime_1.jsxs)("div", { className: "a-flex a-flex-col a-h-full", children: [(0, jsx_runtime_1.jsxs)(splitter_1.Splitter, { className: "a-flex-1 a-border-0", children: [(0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { size: 35, className: "alpaca-overflow-scroll", children: (0, jsx_runtime_1.jsxs)(splitter_1.Splitter, { layout: "vertical", children: [(0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { size: 70, children: (0, jsx_runtime_1.jsx)(ContentTree_1.default, { rootItemId: "3D6658D8-A0BF-4E75-B3E2-D050FABCF4E1", selectionMode: "single", selectedItemIds: selection, templateIds: ["FE5DD826-48C6-436D-B87A-7C4210C7413B"], expandIdPath: "3D6658D8-A0BF-4E75-B3E2-D050FABCF4E1", onSelectionChange: (selection) => {
+    return ((0, jsx_runtime_1.jsx)(dialog_1.Dialog, { style: { width: "80%", height: "80%" }, visible: visible, onHide: onHide, children: (0, jsx_runtime_1.jsxs)("div", { className: "a-flex a-flex-col a-h-full", children: [(0, jsx_runtime_1.jsxs)(splitter_1.Splitter, { className: "a-flex-1 a-border-0", children: [(0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { size: 35, className: "alpaca-overflow-scroll", children: (0, jsx_runtime_1.jsxs)(splitter_1.Splitter, { layout: "vertical", children: [(0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { size: 70, children: (0, jsx_runtime_1.jsx)(ContentTree_1.default, { rootItemId: "3D6658D8-A0BF-4E75-B3E2-D050FABCF4E1", selectionMode: "single", selectedItemIds: selection, templateIds: ["FE5DD826-48C6-436D-B87A-7C4210C7413B"], expandIdPath: "3D6658D8-A0BF-4E75-B3E2-D050FABCF4E1", onSelectionChange: (selection) => {
                                                 if (selection.length)
                                                     setSelectedFolderId(selection[0]);
                                                 else
@@ -53,7 +53,7 @@ const MediaSelector = ({ visible, onHide, onMediaSelected, }) => {
                                             onMediaSelected(t.id);
                                             onHide();
                                         }, onClick: () => setSelectedImage(t), children: [(0, jsx_runtime_1.jsx)("img", { src: t.imageUrl }), (0, jsx_runtime_1.jsx)("div", { className: "a-text-xs a-break-all", children: t.name })] }));
-                                }) }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "a-flex a-justify-end a-gap-3", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { onClick: () => onHide(), children: "Cancel" }), (0, jsx_runtime_1.jsx)(button_1.Button, { disabled: !selectedImage, onClick: () => {
+                                }) }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "a-flex a-justify-end a-gap-3 a-mt-3", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { onClick: () => onHide(), children: "Cancel" }), (0, jsx_runtime_1.jsx)(button_1.Button, { disabled: !selectedImage, onClick: () => {
                                 onMediaSelected(selectedImage.id);
                                 onHide();
                             }, children: "Select" })] })] }) }));

package/dist/editor.css

@@ -32,15 +32,6 @@
   margin-bottom: 0.5rem;
 }
 
-.a-my-8 {
-  margin-top: 2rem;
-  margin-bottom: 2rem;
-}
-
-.a-mb-8 {
-  margin-bottom: 2rem;
-}
-
 .a-ml-1 {
   margin-left: 0.25rem;
 }
@@ -49,6 +40,10 @@
   margin-left: 0.75rem;
 }
 
+.a-mt-3 {
+  margin-top: 0.75rem;
+}
+
 .a-flex {
   display: flex;
 }
@@ -445,6 +440,20 @@ div.p-tree .p-treenode-droppoint {
   opacity: 0;
 }
 
+.p-dropdown-label.p-inputtext {
+  padding: 8px;
+}
+
+div.p-tabview .p-tabview-nav li .p-tabview-nav-link {
+  padding: 1rem;
+}
+
+.p-sidebar-header.p-sidebar-custom-header {
+  justify-content: space-between;
+  font-weight: bold;
+  font-size: 18px;
+}
+
 .hover\:a-underline:hover {
   text-decoration-line: underline;
 }

package/dist/esm/components/Error.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function ErrorFallback() {
+    // Call resetErrorBoundary() to reset the error boundary and retry the render.
+    return (_jsx("div", { role: "alert", children: _jsx("p", { children: "Something went wrong." }) }));
+}
+export function ErrorFallbackWithDetails({ error }) {
+    // Call resetErrorBoundary() to reset the error boundary and retry the render.
+    return (_jsxs("div", { role: "alert", children: [_jsx("p", { children: "Something went wrong:" }), _jsxs("pre", { style: { color: "red" }, children: [error.message, " ", error.stack] })] }));
+}

package/dist/esm/components/Link.js

@@ -17,6 +17,11 @@ export function Link(_a) {
     var { field, children } = _a, props = __rest(_a, ["field", "children"]);
     if (!field)
         return;
+    if (field.jsonValue) {
+        field = field.jsonValue;
+    }
+    if (!field.value)
+        return;
     const editing = (_b = useAlpacaContext().pageContext) === null || _b === void 0 ? void 0 : _b.pageEditing;
     if (editing)
         return (_jsx(LinkEditor, Object.assign({ field: field, children: children }, props)));

package/dist/esm/components/Picture.js

@@ -31,6 +31,9 @@ export const Picture = (_a) => {
     var { field, imageParams, sources, defaultVariant, renderJsonLinkedData } = _a, otherProps = __rest(_a, ["field", "imageParams", "sources", "defaultVariant", "renderJsonLinkedData"]);
     if (!field)
         return null;
+    if (field.jsonValue) {
+        field = field.jsonValue;
+    }
     if ((_b = useAlpacaContext().pageContext) === null || _b === void 0 ? void 0 : _b.pageEditing)
         return _jsx(PictureEditor, Object.assign({ field: field }, otherProps));
     const variants = (_c = field.value) === null || _c === void 0 ? void 0 : _c.variants;

package/dist/esm/components/PictureEditor.js

@@ -27,8 +27,11 @@ export const PictureEditor = (_a) => {
         return;
     function imageSelected(imageId) {
         const value = (field === null || field === void 0 ? void 0 : field.value) || {};
-        //value.variants[0].mediaId = imageId;
+        if (!selectedVariant)
+            return;
+        selectedVariant.mediaId = imageId;
         console.log(imageId);
+        console.log(JSON.stringify(value));
         if (field)
             editContext === null || editContext === void 0 ? void 0 : editContext.editField(field, JSON.stringify(value), false);
     }

package/dist/esm/components/Placeholder.js

@@ -12,6 +12,8 @@ import { EditFrame } from "../editor/EditFrame";
 import { useAlpacaContext, } from "..";
 import { PlaceholderDropZoneHost } from "../editor/PlaceholderDropZoneHost";
 import Slot from "./Slot";
+import { ErrorBoundary } from "react-error-boundary";
+import { ErrorFallbackWithDetails, ErrorFallback } from "./Error";
 export function Placeholder({ name, content, }) {
     return __awaiter(this, void 0, void 0, function* () {
         const data = yield content;
@@ -44,11 +46,16 @@ export function Placeholder({ name, content, }) {
         const components = yield Promise.all(promises);
         if (context.pageContext.pageEditing) {
             return (_jsxs(_Fragment, { children: [components.map(({ Component, data, parent }, index) => {
-                        return (_jsxs(_Fragment, { children: [_jsx(PlaceholderDropZoneHost, { parentName: parent === null || parent === void 0 ? void 0 : parent.name, placeholder: placeholderData, index: index + 1 }), _jsx(EditFrame, { componentId: data.id, children: _jsx(Component, { component: data }) }, data.id)] }));
+                        try {
+                            return (_jsxs(_Fragment, { children: [_jsx(PlaceholderDropZoneHost, { parentName: parent === null || parent === void 0 ? void 0 : parent.name, placeholder: placeholderData, index: index + 1 }), _jsx(EditFrame, { componentId: data.id, children: _jsx(ErrorBoundary, { FallbackComponent: ErrorFallbackWithDetails, children: _jsx(Component, { component: data }) }) }, data.id)] }));
+                        }
+                        catch (e) {
+                            return (_jsxs("div", { children: ["Error rendering component ", data.name, ": ", e.message] }));
+                        }
                     }), _jsx(PlaceholderDropZoneHost, { parentName: data === null || data === void 0 ? void 0 : data.name, placeholder: placeholderData, index: components.length + 1 })] }));
         }
         else
-            return (_jsx(_Fragment, { children: components.map(({ Component, data }) => (_jsx(_Fragment, { children: _jsx(Component, { component: data }) }))) }));
+            return (_jsx(_Fragment, { children: components.map(({ Component, data }) => (_jsx(_Fragment, { children: _jsx(ErrorBoundary, { FallbackComponent: ErrorFallback, children: _jsx(Component, { component: data }) }) }))) }));
     });
 }
 function ComponentNotFound({ component }) {

package/dist/esm/components/RichText.js

@@ -27,9 +27,12 @@ export function RichText(_a) {
     return __awaiter(this, void 0, void 0, function* () {
         if (!field)
             return;
+        if (field.jsonValue) {
+            field = field.jsonValue;
+        }
         const internalProps = Object.assign(Object.assign({}, props), { dangerouslySetInnerHTML: {
                 __html: field.value,
-            }, editable: editable, contentEditable: true, "data-test": "test", placeholder: '[' + field.name + ']' });
+            }, editable: editable, contentEditable: true, "data-test": "test", placeholder: "[" + field.name + "]" });
         if (useAlpacaContext().pageContext.pageEditing)
             return _jsx(RichTextEditor, Object.assign({ field: field, tag: tag }, props));
         return React.createElement(tag || "div", Object.assign(props, internalProps));

package/dist/esm/components/RichTextEditor.js

@@ -20,10 +20,7 @@ export function RichTextEditor(_a) {
     if (!editContext)
         return;
     const { updateContentEditingFields } = editContext;
-    const component = editContext.getComponentById(field.itemId);
-    if (!component)
-        return;
-    const liveField = Object.values(component.fields).find((f) => f.id == field.id);
+    const liveField = editContext.getLiveField(field);
     useEffect(() => {
         if (editedValue != liveField.value &&
             "<p>" + editedValue + "</p>" != liveField.value) {

package/dist/esm/components/Text.js

@@ -30,8 +30,9 @@ export function Text(_a) {
         if (field.jsonValue) {
             field = field.jsonValue;
         }
-        if (useAlpacaContext().pageContext.pageEditing)
-            return _jsx(TextEditor, Object.assign({ field: field, tag: tag }, props));
+        if (useAlpacaContext().pageContext.pageEditing) {
+            return (_jsx("div", { children: _jsx(TextEditor, Object.assign({ field: field, tag: tag }, props)) }));
+        }
         else
             return React.createElement(tag || "div", props, field.value);
     });

package/dist/esm/components/TextEditor.js

@@ -20,10 +20,7 @@ export function TextEditor(_a) {
     if (!editContext)
         return;
     const { updateContentEditingFields } = editContext;
-    const component = editContext.getComponentById(field.itemId);
-    if (!component)
-        return;
-    const liveField = Object.values(component.fields).find((f) => f.id == field.id);
+    const liveField = editContext.getLiveField(field);
     useEffect(() => {
         if (editedValue != liveField.value)
             setValue(liveField.value);

package/dist/esm/editor/AiTerminal.js

@@ -42,7 +42,7 @@ export function AiTerminal({ requestRefresh, selection, }) {
                 handleResponse(response, callback, false);
                 if (response.editOperations.length) {
                     if (new Date().getTime() - lastRefresh > 500) {
-                        requestRefresh(false);
+                        requestRefresh("delayed");
                         router.refresh();
                         lastRefresh = new Date().getTime();
                     }