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

package/dist/cjs/components/PictureEditor.js

@@ -19,6 +19,7 @@ const Picture_1 = require("./Picture");
 const __1 = require("..");
 const MediaSelector_1 = require("../editor/MediaSelector");
 const dialog_1 = require("primereact/dialog");
+const button_1 = require("primereact/button");
 const PictureEditor = (_a) => {
     var _b, _c;
     var { field, imageParams, sources, defaultVariant, renderJsonLinkedData } = _a, otherProps = __rest(_a, ["field", "imageParams", "sources", "defaultVariant", "renderJsonLinkedData"]);
@@ -29,17 +30,39 @@ const PictureEditor = (_a) => {
     if (!editContext)
         return;
     function imageSelected(imageId) {
-        const value = (field === null || field === void 0 ? void 0 : field.value) || {};
         if (!selectedVariant)
             return;
-        selectedVariant.mediaId = imageId;
+        const value = (field === null || field === void 0 ? void 0 : field.rawValue)
+            ? JSON.parse(field === null || field === void 0 ? void 0 : field.rawValue)
+            : { variants: [] };
+        const selected = value.variants.find((x) => x.name == selectedVariant.name);
+        if (!selected) {
+            value.variants.push({
+                name: selectedVariant.name,
+                mediaId: imageId,
+            });
+        }
+        else {
+            selected.mediaId = imageId;
+        }
         console.log(imageId);
         console.log(JSON.stringify(value));
-        if (field)
+        if (field) {
             editContext === null || editContext === void 0 ? void 0 : editContext.editField(field, JSON.stringify(value), false);
+            editContext === null || editContext === void 0 ? void 0 : editContext.requestRefresh("immediate");
+        }
     }
-    console.log(JSON.stringify(field));
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MediaSelector_1.MediaSelector, { visible: mediaSelectorVisible, onHide: () => setMediaSelectorVisible(false), onMediaSelected: imageSelected }), (0, jsx_runtime_1.jsx)(dialog_1.Dialog, { header: "Edit picture", visible: editorVisible, style: { width: "50vw" }, onHide: () => setEditorVisible(false), children: (0, jsx_runtime_1.jsx)("div", { className: "a-flex a-gap-1", children: (_c = (_b = field === null || field === void 0 ? void 0 : field.value) === null || _b === void 0 ? void 0 : _b.variants) === null || _c === void 0 ? void 0 : _c.map((variant) => ((0, jsx_runtime_1.jsxs)("div", { onClick: () => setSelectedVariant(variant), children: [(0, jsx_runtime_1.jsxs)("div", { className: "a-h-24 a-w-24 a-border a-relative" +
-                                    (selectedVariant == variant ? " a-shadow-xl " : ""), children: [variant.src && (0, jsx_runtime_1.jsx)("img", { src: variant.src }), (0, jsx_runtime_1.jsx)("div", { className: "a-absolute a-top-0 a-right-0 ", children: (0, jsx_runtime_1.jsx)("i", { className: "pi pi-pencil a-m-1 a-cursor-pointer", onClick: () => setMediaSelectorVisible(true) }) })] }, variant.name), (0, jsx_runtime_1.jsx)("div", { children: variant.name }), (0, jsx_runtime_1.jsx)("div", { children: variant.aspectRatioText })] }))) }) }), (0, jsx_runtime_1.jsxs)("span", Object.assign({}, otherProps, { onClick: () => setEditorVisible(true), children: ["PICTURE", (0, jsx_runtime_1.jsx)(Picture_1.Picture, { field: field, imageParams: imageParams, sources: sources })] }))] }));
+    (0, react_1.useEffect)(() => {
+        var _a;
+        setSelectedVariant((_a = field === null || field === void 0 ? void 0 : field.value) === null || _a === void 0 ? void 0 : _a.variants[0]);
+    }, []);
+    console.log("Picture Field: " + JSON.stringify(field));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MediaSelector_1.MediaSelector, { visible: mediaSelectorVisible, onHide: () => setMediaSelectorVisible(false), onMediaSelected: imageSelected }), (0, jsx_runtime_1.jsx)(dialog_1.Dialog, { header: "Edit picture", visible: editorVisible, style: { width: "50vw", height: "50vh" }, onHide: () => setEditorVisible(false), children: (0, jsx_runtime_1.jsxs)("div", { className: "a-flex a-gap-1 a-flex-col a-justify a-h-full", children: [(0, jsx_runtime_1.jsxs)("div", { className: "a-flex-1 a-flex a-gap-1", children: [(0, jsx_runtime_1.jsx)("div", { className: "a-flex a-flex-col a-gap-1 a-h-full a-border-r", children: (_c = (_b = field === null || field === void 0 ? void 0 : field.value) === null || _b === void 0 ? void 0 : _b.variants) === null || _c === void 0 ? void 0 : _c.map((variant) => ((0, jsx_runtime_1.jsxs)("div", { onClick: () => setSelectedVariant(variant), children: [(0, jsx_runtime_1.jsxs)("div", { className: "a-h-24 a-w-24 a-border a-relative" +
+                                                    (selectedVariant == variant ? " a-shadow-xl " : ""), children: [variant.src && (0, jsx_runtime_1.jsx)("img", { src: variant.thumbSrc }), (0, jsx_runtime_1.jsx)("div", { className: "a-absolute a-top-0 a-right-0 ", children: (0, jsx_runtime_1.jsx)("i", { className: "pi pi-pencil a-m-1 a-cursor-pointer", onClick: () => setMediaSelectorVisible(true) }) })] }, variant.name), (0, jsx_runtime_1.jsx)("div", { children: variant.name }), (0, jsx_runtime_1.jsx)("div", { children: variant.aspectRatioText })] }))) }), (0, jsx_runtime_1.jsx)("div", { className: "a-flex-1 a-relative", children: (0, jsx_runtime_1.jsx)("div", { className: "a-absolute a-inset-0 a-overflow-auto", children: selectedVariant && (0, jsx_runtime_1.jsx)("img", { src: selectedVariant.src }) }) })] }), (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: () => {
+                                        setEditorVisible(false);
+                                    }, children: "Ok" }), (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: () => {
+                                        setEditorVisible(false);
+                                        editContext === null || editContext === void 0 ? void 0 : editContext.requestRefresh("immediate");
+                                    }, children: "Cancel" })] })] }) }), (0, jsx_runtime_1.jsx)("span", Object.assign({}, otherProps, { onClick: () => setEditorVisible(true), className: "a-cursor-pointer", children: (0, jsx_runtime_1.jsx)(Picture_1.Picture, { field: field, imageParams: imageParams, sources: sources }) }))] }));
 };
 exports.PictureEditor = PictureEditor;

package/dist/cjs/editor/AiTerminal.js

@@ -86,7 +86,7 @@ function AiTerminal({ requestRefresh, selection, }) {
             terminalservice_1.TerminalService.off("command", commandHandler);
         };
     }, []);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "a-h-full a-flex a-flex-col a-relative", children: [(0, jsx_runtime_1.jsx)("div", { className: "a-flex-1 a-relative", children: (0, jsx_runtime_1.jsx)("div", { className: "a-inset-0 a-absolute", children: (0, jsx_runtime_1.jsx)(Terminal_1.Terminal, { onReset: () => setMessages([]), commandHandler: (v, callback) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "a-h-full a-flex a-flex-col a-relative a-flex-1", children: [(0, jsx_runtime_1.jsx)("div", { className: "a-flex-1 a-relative", children: (0, jsx_runtime_1.jsx)("div", { className: "a-inset-0 a-absolute", children: (0, jsx_runtime_1.jsx)(Terminal_1.Terminal, { onReset: () => setMessages([]), commandHandler: (v, callback) => {
                             commandHandler(v, callback);
                         } }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "a-text-xs", children: ["Tokens in: ", tokens.in, " out: ", tokens.out] })] }));
 }

package/dist/cjs/editor/MediaSelector.js

@@ -21,6 +21,7 @@ const contentService_1 = require("./contentService");
 const editContext_1 = require("./editContext");
 const button_1 = require("primereact/button");
 const dialog_1 = require("primereact/dialog");
+const fileupload_1 = require("primereact/fileupload");
 const MediaSelector = ({ visible, onHide, onMediaSelected, }) => {
     const [selectedFolderId, setSelectedFolderId] = (0, react_1.useState)();
     const [images, setImages] = (0, react_1.useState)();
@@ -40,22 +41,27 @@ const MediaSelector = ({ visible, onHide, onMediaSelected, }) => {
                     "F1828A2C-7E5D-4BBD-98CA-320474871548",
                 ]);
                 setImages(children);
+                return children;
             }
         });
     }
-    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
-                                                    setSelectedFolderId(undefined);
-                                            } }) }), (0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { children: selectedImage === null || selectedImage === void 0 ? void 0 : selectedImage.name })] }) }), (0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { className: "alpaca-overflow-scroll a-relative", children: (0, jsx_runtime_1.jsx)("div", { className: "a-grid a-grid-cols-3 a-gap-2 a-absolute a-inset-0", children: images === null || images === void 0 ? void 0 : images.map((t) => {
-                                    return ((0, jsx_runtime_1.jsxs)("div", { className: "a-flex a-flex-col a-justify-between hover:a-shadow-md a-cursor-pointer a-p-1", onDoubleClick: () => {
+    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, className: "a-relative", children: (0, jsx_runtime_1.jsx)("div", { className: "a-absolute a-inset-0 a-overflow-auto", 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
+                                                        setSelectedFolderId(undefined);
+                                                } }) }) }), (0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { className: "a-flex a-justify-center a-align-center", children: (0, jsx_runtime_1.jsx)("img", { src: selectedImage === null || selectedImage === void 0 ? void 0 : selectedImage.previewUrl }) })] }) }), (0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { className: "a-relative", children: (0, jsx_runtime_1.jsx)("div", { className: "a-flex a-flex-wrap a-content-start a-items-start a-gap-2 a-absolute a-inset-0 a-overflow-auto", children: images === null || images === void 0 ? void 0 : images.map((t) => {
+                                    return ((0, jsx_runtime_1.jsxs)("div", { className: "a-w-24 a-flex a-flex-col a-justify-between hover:a-shadow-md a-cursor-pointer a-p-1", onDoubleClick: () => {
                                             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 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: () => {
+                                        }, onClick: () => setSelectedImage(t), children: [(0, jsx_runtime_1.jsx)("img", { src: t.imageUrl, className: "a-w-24 a-h-24" }), (0, jsx_runtime_1.jsx)("div", { className: "a-text-xs a-break-all", children: t.name })] }, t.id));
+                                }) }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "a-flex a-justify-end a-gap-3 a-mt-3", children: [(0, jsx_runtime_1.jsx)(fileupload_1.FileUpload, { mode: "basic", disabled: !selectedFolderId, auto: true, chooseLabel: "Upload", accept: "image/*", url: "/alpaca/headless/editor/upload?folder=" + selection[0], onUpload: ({ xhr }) => __awaiter(void 0, void 0, void 0, function* () {
+                                const response = JSON.parse(xhr.responseText);
+                                const thumbs = yield loadThumbnails(selectedFolderId);
+                                setSelectedImage(thumbs === null || thumbs === void 0 ? void 0 : thumbs.find((x) => x.id === response.id));
+                            }) }), (0, jsx_runtime_1.jsx)(button_1.Button, { disabled: !selectedImage, onClick: () => {
                                 onMediaSelected(selectedImage.id);
                                 onHide();
-                            }, children: "Select" })] })] }) }));
+                            }, children: "Select" }), (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: () => onHide(), children: "Cancel" })] })] }) }));
 };
 exports.MediaSelector = MediaSelector;

package/dist/editor.css

@@ -88,10 +88,6 @@
   cursor: pointer;
 }
 
-.a-grid-cols-3 {
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-}
-
 .a-grid-cols-4 {
   grid-template-columns: repeat(4, minmax(0, 1fr));
 }
@@ -100,6 +96,18 @@
   flex-direction: column;
 }
 
+.a-flex-wrap {
+  flex-wrap: wrap;
+}
+
+.a-content-start {
+  align-content: flex-start;
+}
+
+.a-items-start {
+  align-items: flex-start;
+}
+
 .a-items-center {
   align-items: center;
 }
@@ -108,6 +116,10 @@
   justify-content: flex-end;
 }
 
+.a-justify-center {
+  justify-content: center;
+}
+
 .a-justify-between {
   justify-content: space-between;
 }
@@ -130,6 +142,10 @@
   margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.a-overflow-auto {
+  overflow: auto;
+}
+
 .a-overflow-hidden {
   overflow: hidden;
 }
@@ -166,6 +182,10 @@
   border-bottom-width: 1px;
 }
 
+.a-border-r {
+  border-right-width: 1px;
+}
+
 .a-border-t-2 {
   border-top-width: 2px;
 }

package/dist/esm/components/PictureEditor.js

@@ -11,11 +11,12 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Picture } from "./Picture";
 import { useEditContext } from "..";
 import { MediaSelector } from "../editor/MediaSelector";
 import { Dialog } from "primereact/dialog";
+import { Button } from "primereact/button";
 export const PictureEditor = (_a) => {
     var _b, _c;
     var { field, imageParams, sources, defaultVariant, renderJsonLinkedData } = _a, otherProps = __rest(_a, ["field", "imageParams", "sources", "defaultVariant", "renderJsonLinkedData"]);
@@ -26,16 +27,38 @@ export const PictureEditor = (_a) => {
     if (!editContext)
         return;
     function imageSelected(imageId) {
-        const value = (field === null || field === void 0 ? void 0 : field.value) || {};
         if (!selectedVariant)
             return;
-        selectedVariant.mediaId = imageId;
+        const value = (field === null || field === void 0 ? void 0 : field.rawValue)
+            ? JSON.parse(field === null || field === void 0 ? void 0 : field.rawValue)
+            : { variants: [] };
+        const selected = value.variants.find((x) => x.name == selectedVariant.name);
+        if (!selected) {
+            value.variants.push({
+                name: selectedVariant.name,
+                mediaId: imageId,
+            });
+        }
+        else {
+            selected.mediaId = imageId;
+        }
         console.log(imageId);
         console.log(JSON.stringify(value));
-        if (field)
+        if (field) {
             editContext === null || editContext === void 0 ? void 0 : editContext.editField(field, JSON.stringify(value), false);
+            editContext === null || editContext === void 0 ? void 0 : editContext.requestRefresh("immediate");
+        }
     }
-    console.log(JSON.stringify(field));
-    return (_jsxs(_Fragment, { children: [_jsx(MediaSelector, { visible: mediaSelectorVisible, onHide: () => setMediaSelectorVisible(false), onMediaSelected: imageSelected }), _jsx(Dialog, { header: "Edit picture", visible: editorVisible, style: { width: "50vw" }, onHide: () => setEditorVisible(false), children: _jsx("div", { className: "a-flex a-gap-1", children: (_c = (_b = field === null || field === void 0 ? void 0 : field.value) === null || _b === void 0 ? void 0 : _b.variants) === null || _c === void 0 ? void 0 : _c.map((variant) => (_jsxs("div", { onClick: () => setSelectedVariant(variant), children: [_jsxs("div", { className: "a-h-24 a-w-24 a-border a-relative" +
-                                    (selectedVariant == variant ? " a-shadow-xl " : ""), children: [variant.src && _jsx("img", { src: variant.src }), _jsx("div", { className: "a-absolute a-top-0 a-right-0 ", children: _jsx("i", { className: "pi pi-pencil a-m-1 a-cursor-pointer", onClick: () => setMediaSelectorVisible(true) }) })] }, variant.name), _jsx("div", { children: variant.name }), _jsx("div", { children: variant.aspectRatioText })] }))) }) }), _jsxs("span", Object.assign({}, otherProps, { onClick: () => setEditorVisible(true), children: ["PICTURE", _jsx(Picture, { field: field, imageParams: imageParams, sources: sources })] }))] }));
+    useEffect(() => {
+        var _a;
+        setSelectedVariant((_a = field === null || field === void 0 ? void 0 : field.value) === null || _a === void 0 ? void 0 : _a.variants[0]);
+    }, []);
+    console.log("Picture Field: " + JSON.stringify(field));
+    return (_jsxs(_Fragment, { children: [_jsx(MediaSelector, { visible: mediaSelectorVisible, onHide: () => setMediaSelectorVisible(false), onMediaSelected: imageSelected }), _jsx(Dialog, { header: "Edit picture", visible: editorVisible, style: { width: "50vw", height: "50vh" }, onHide: () => setEditorVisible(false), children: _jsxs("div", { className: "a-flex a-gap-1 a-flex-col a-justify a-h-full", children: [_jsxs("div", { className: "a-flex-1 a-flex a-gap-1", children: [_jsx("div", { className: "a-flex a-flex-col a-gap-1 a-h-full a-border-r", children: (_c = (_b = field === null || field === void 0 ? void 0 : field.value) === null || _b === void 0 ? void 0 : _b.variants) === null || _c === void 0 ? void 0 : _c.map((variant) => (_jsxs("div", { onClick: () => setSelectedVariant(variant), children: [_jsxs("div", { className: "a-h-24 a-w-24 a-border a-relative" +
+                                                    (selectedVariant == variant ? " a-shadow-xl " : ""), children: [variant.src && _jsx("img", { src: variant.thumbSrc }), _jsx("div", { className: "a-absolute a-top-0 a-right-0 ", children: _jsx("i", { className: "pi pi-pencil a-m-1 a-cursor-pointer", onClick: () => setMediaSelectorVisible(true) }) })] }, variant.name), _jsx("div", { children: variant.name }), _jsx("div", { children: variant.aspectRatioText })] }))) }), _jsx("div", { className: "a-flex-1 a-relative", children: _jsx("div", { className: "a-absolute a-inset-0 a-overflow-auto", children: selectedVariant && _jsx("img", { src: selectedVariant.src }) }) })] }), _jsxs("div", { className: "a-flex a-justify-end a-gap-3 a-mt-3", children: [_jsx(Button, { onClick: () => {
+                                        setEditorVisible(false);
+                                    }, children: "Ok" }), _jsx(Button, { onClick: () => {
+                                        setEditorVisible(false);
+                                        editContext === null || editContext === void 0 ? void 0 : editContext.requestRefresh("immediate");
+                                    }, children: "Cancel" })] })] }) }), _jsx("span", Object.assign({}, otherProps, { onClick: () => setEditorVisible(true), className: "a-cursor-pointer", children: _jsx(Picture, { field: field, imageParams: imageParams, sources: sources }) }))] }));
 };

package/dist/esm/editor/AiTerminal.js

@@ -83,7 +83,7 @@ export function AiTerminal({ requestRefresh, selection, }) {
             TerminalService.off("command", commandHandler);
         };
     }, []);
-    return (_jsxs("div", { className: "a-h-full a-flex a-flex-col a-relative", children: [_jsx("div", { className: "a-flex-1 a-relative", children: _jsx("div", { className: "a-inset-0 a-absolute", children: _jsx(Terminal, { onReset: () => setMessages([]), commandHandler: (v, callback) => {
+    return (_jsxs("div", { className: "a-h-full a-flex a-flex-col a-relative a-flex-1", children: [_jsx("div", { className: "a-flex-1 a-relative", children: _jsx("div", { className: "a-inset-0 a-absolute", children: _jsx(Terminal, { onReset: () => setMessages([]), commandHandler: (v, callback) => {
                             commandHandler(v, callback);
                         } }) }) }), _jsxs("div", { className: "a-text-xs", children: ["Tokens in: ", tokens.in, " out: ", tokens.out] })] }));
 }

package/dist/esm/editor/MediaSelector.js

@@ -15,6 +15,7 @@ import { getChildren } from "./contentService";
 import { useEditContext } from "./editContext";
 import { Button } from "primereact/button";
 import { Dialog } from "primereact/dialog";
+import { FileUpload } from "primereact/fileupload";
 export const MediaSelector = ({ visible, onHide, onMediaSelected, }) => {
     const [selectedFolderId, setSelectedFolderId] = useState();
     const [images, setImages] = useState();
@@ -34,21 +35,26 @@ export const MediaSelector = ({ visible, onHide, onMediaSelected, }) => {
                     "F1828A2C-7E5D-4BBD-98CA-320474871548",
                 ]);
                 setImages(children);
+                return children;
             }
         });
     }
-    return (_jsx(Dialog, { style: { width: "80%", height: "80%" }, visible: visible, onHide: onHide, children: _jsxs("div", { className: "a-flex a-flex-col a-h-full", children: [_jsxs(Splitter, { className: "a-flex-1 a-border-0", children: [_jsx(SplitterPanel, { size: 35, className: "alpaca-overflow-scroll", children: _jsxs(Splitter, { layout: "vertical", children: [_jsx(SplitterPanel, { size: 70, children: _jsx(ContentTree, { 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
-                                                    setSelectedFolderId(undefined);
-                                            } }) }), _jsx(SplitterPanel, { children: selectedImage === null || selectedImage === void 0 ? void 0 : selectedImage.name })] }) }), _jsx(SplitterPanel, { className: "alpaca-overflow-scroll a-relative", children: _jsx("div", { className: "a-grid a-grid-cols-3 a-gap-2 a-absolute a-inset-0", children: images === null || images === void 0 ? void 0 : images.map((t) => {
-                                    return (_jsxs("div", { className: "a-flex a-flex-col a-justify-between hover:a-shadow-md a-cursor-pointer a-p-1", onDoubleClick: () => {
+    return (_jsx(Dialog, { style: { width: "80%", height: "80%" }, visible: visible, onHide: onHide, children: _jsxs("div", { className: "a-flex a-flex-col a-h-full", children: [_jsxs(Splitter, { className: "a-flex-1 a-border-0", children: [_jsx(SplitterPanel, { size: 35, className: "alpaca-overflow-scroll", children: _jsxs(Splitter, { layout: "vertical", children: [_jsx(SplitterPanel, { size: 70, className: "a-relative", children: _jsx("div", { className: "a-absolute a-inset-0 a-overflow-auto", children: _jsx(ContentTree, { 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
+                                                        setSelectedFolderId(undefined);
+                                                } }) }) }), _jsx(SplitterPanel, { className: "a-flex a-justify-center a-align-center", children: _jsx("img", { src: selectedImage === null || selectedImage === void 0 ? void 0 : selectedImage.previewUrl }) })] }) }), _jsx(SplitterPanel, { className: "a-relative", children: _jsx("div", { className: "a-flex a-flex-wrap a-content-start a-items-start a-gap-2 a-absolute a-inset-0 a-overflow-auto", children: images === null || images === void 0 ? void 0 : images.map((t) => {
+                                    return (_jsxs("div", { className: "a-w-24 a-flex a-flex-col a-justify-between hover:a-shadow-md a-cursor-pointer a-p-1", onDoubleClick: () => {
                                             onMediaSelected(t.id);
                                             onHide();
-                                        }, onClick: () => setSelectedImage(t), children: [_jsx("img", { src: t.imageUrl }), _jsx("div", { className: "a-text-xs a-break-all", children: t.name })] }));
-                                }) }) })] }), _jsxs("div", { className: "a-flex a-justify-end a-gap-3 a-mt-3", children: [_jsx(Button, { onClick: () => onHide(), children: "Cancel" }), _jsx(Button, { disabled: !selectedImage, onClick: () => {
+                                        }, onClick: () => setSelectedImage(t), children: [_jsx("img", { src: t.imageUrl, className: "a-w-24 a-h-24" }), _jsx("div", { className: "a-text-xs a-break-all", children: t.name })] }, t.id));
+                                }) }) })] }), _jsxs("div", { className: "a-flex a-justify-end a-gap-3 a-mt-3", children: [_jsx(FileUpload, { mode: "basic", disabled: !selectedFolderId, auto: true, chooseLabel: "Upload", accept: "image/*", url: "/alpaca/headless/editor/upload?folder=" + selection[0], onUpload: ({ xhr }) => __awaiter(void 0, void 0, void 0, function* () {
+                                const response = JSON.parse(xhr.responseText);
+                                const thumbs = yield loadThumbnails(selectedFolderId);
+                                setSelectedImage(thumbs === null || thumbs === void 0 ? void 0 : thumbs.find((x) => x.id === response.id));
+                            }) }), _jsx(Button, { disabled: !selectedImage, onClick: () => {
                                 onMediaSelected(selectedImage.id);
                                 onHide();
-                            }, children: "Select" })] })] }) }));
+                            }, children: "Select" }), _jsx(Button, { onClick: () => onHide(), children: "Cancel" })] })] }) }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alpaca-headless/alpaca-headless-nextjs",
-  "version": "1.0.26",
+  "version": "1.0.27",
   "description": "Alpaca Headless NextJs Integration",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/types/fieldTypes.d.ts

@@ -17,10 +17,10 @@ export type PictureValue = {
 export type PictureVariant = {
     name: string;
     src: string;
-    videoUrl: string;
+    videoUrl?: string;
     width: number;
-    mediaId: string;
     aspectRatioText?: string;
+    thumbSrc?: string;
 };
 export type ImageField = Field & {
     value: ImageValue | null;