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

package/dist/cjs/editor/PictureEditorDialog.js

@@ -0,0 +1,93 @@
+"use strict";
+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());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PictureEditorDialog = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const dialog_1 = require("primereact/dialog");
+const __1 = require("..");
+const react_1 = require("react");
+const button_1 = require("primereact/button");
+const DialogButtons_1 = __importDefault(require("./DialogButtons"));
+function PictureEditorDialog({ field, onCancel, onOk, }) {
+    var _a, _b;
+    const [selectedVariantName, setSelectedVariantName] = (0, react_1.useState)();
+    const [pictureValue, setPictureValue] = (0, react_1.useState)();
+    const [rawValue, setRawValue] = (0, react_1.useState)();
+    const editContext = (0, __1.useEditContext)();
+    (0, react_1.useEffect)(() => {
+        var _a;
+        setSelectedVariantName((_a = field === null || field === void 0 ? void 0 : field.value) === null || _a === void 0 ? void 0 : _a.variants[0].name);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        var _a, _b;
+        const deepCopy = JSON.parse(JSON.stringify(field.value));
+        setPictureValue(deepCopy);
+        const raw = (field === null || field === void 0 ? void 0 : field.rawValue)
+            ? JSON.parse(field === null || field === void 0 ? void 0 : field.rawValue)
+            : { variants: [] };
+        setRawValue(raw);
+        if (!((_a = field === null || field === void 0 ? void 0 : field.value) === null || _a === void 0 ? void 0 : _a.variants[0].src))
+            selectMedia((_b = field === null || field === void 0 ? void 0 : field.value) === null || _b === void 0 ? void 0 : _b.variants[0].name, raw);
+    }, [field]);
+    function selectMedia(variantName, raw) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const chosenImage = yield (editContext === null || editContext === void 0 ? void 0 : editContext.selectMedia({
+                selectedIdPath: (selectedVariant === null || selectedVariant === void 0 ? void 0 : selectedVariant.idPath) || "",
+            }));
+            if (chosenImage)
+                imageSelected(chosenImage, variantName !== null && variantName !== void 0 ? variantName : selectedVariantName, raw !== null && raw !== void 0 ? raw : rawValue);
+        });
+    }
+    const selectedVariant = pictureValue && pictureValue.variants
+        ? (_a = pictureValue.variants) === null || _a === void 0 ? void 0 : _a.find((x) => x.name == selectedVariantName)
+        : null;
+    const imageSelected = (0, react_1.useCallback)((imageId, variantName, rawValue) => __awaiter(this, void 0, void 0, function* () {
+        var _c;
+        if (!variantName || !rawValue)
+            return;
+        const selected = (_c = rawValue.variants) === null || _c === void 0 ? void 0 : _c.find((x) => x.name == variantName);
+        if (!selected) {
+            rawValue.variants.push({
+                name: variantName,
+                mediaId: imageId,
+            });
+        }
+        else {
+            selected.mediaId = imageId;
+        }
+        setRawValue(rawValue);
+        const newValue = yield (editContext === null || editContext === void 0 ? void 0 : editContext.getPictureFieldValue(field, rawValue));
+        if (newValue)
+            setPictureValue(newValue);
+    }), []);
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(dialog_1.Dialog, { header: "Edit " + (field === null || field === void 0 ? void 0 : field.name), visible: true, style: { width: "70vw", height: "70vh" }, onHide: onCancel, 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-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "a-flex a-flex-col a-gap-1 a-h-full a-border-r a-pr-3 a-pt-3", children: pictureValue &&
+                                    ((_b = pictureValue.variants) === null || _b === void 0 ? void 0 : _b.map((variant) => ((0, jsx_runtime_1.jsxs)("div", { onClick: () => setSelectedVariantName(variant.name), children: [(0, jsx_runtime_1.jsx)("div", { className: "a-flex a-justify-center a-items-center a-h-24 a-w-24 a-border a-relative" +
+                                                    (selectedVariantName == variant.name
+                                                        ? " a-shadow-xl "
+                                                        : ""), children: variant.src && (0, jsx_runtime_1.jsx)("img", { src: variant.thumbSrc }) }), (0, jsx_runtime_1.jsx)("div", { children: variant.name }), (0, jsx_runtime_1.jsx)("div", { children: variant.aspectRatioText })] }, variant.name)))) }), (0, jsx_runtime_1.jsx)("div", { className: "a-flex-1 a-relative a-p-3", children: (0, jsx_runtime_1.jsxs)("div", { className: "a-absolute a-inset-0 a-top-3 a-overflow-auto a-select-none a-flex a-align-center a-justify-center", children: [selectedVariant && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("img", { src: selectedVariant.src, className: "a-object-contain a-h-full a-w-full" }) })), selectedVariant && ((0, jsx_runtime_1.jsx)("div", { className: "a-absolute a-top-0 a-right-0 a-cursor-pointer", children: (0, jsx_runtime_1.jsx)("i", { className: "pi pi-pencil a-text-3xl a-cursor-pointer a-p-1 a-bg-gray-100 a-bg-opacity-70", onClick: () => selectMedia() }) }))] }) })] }), (0, jsx_runtime_1.jsxs)(DialogButtons_1.default, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { onClick: () => {
+                                    if (pictureValue) {
+                                        if (field) {
+                                            editContext === null || editContext === void 0 ? void 0 : editContext.editField({
+                                                field,
+                                                rawValue: JSON.stringify(rawValue),
+                                                refresh: "immediate",
+                                            });
+                                        }
+                                        onOk(pictureValue);
+                                    }
+                                }, children: "Ok" }), (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: () => {
+                                    onCancel();
+                                }, children: "Cancel" })] })] }) }) }));
+}
+exports.PictureEditorDialog = PictureEditorDialog;

package/dist/cjs/editor/PlaceholderDropZone.js

@@ -1,14 +1,22 @@
 "use strict";
 "use client";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PlaceholderDropZone = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const progressbar_1 = require("primereact/progressbar");
 const __1 = require("..");
+const utils_1 = require("primereact/utils");
+const react_dom_1 = __importDefault(require("react-dom"));
 function PlaceholderDropZone({ placeholder, index, parentName, }) {
     const [isInserting, setIsInserting] = (0, react_1.useState)(false);
     const [isSelected, setIsSelected] = (0, react_1.useState)(false);
+    const [isHovering, setIsHovering] = (0, react_1.useState)(false);
+    const spotRef = (0, react_1.useRef)(null);
+    const [spotPosition, setSpotPosition] = (0, react_1.useState)({ x: 0, y: 0 });
     const editContext = (0, __1.useEditContext)();
     if (!editContext)
         return;
@@ -16,6 +24,19 @@ function PlaceholderDropZone({ placeholder, index, parentName, }) {
     function isAnyPlaceholderSelected() {
         return selection.find((x) => x.indexOf("_") > 0) != undefined;
     }
+    const updateSpotPosition = () => {
+        var _a, _b;
+        if (spotRef.current) {
+            const editorRect = (_a = editContext.editorContainerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            if (editorRect) {
+                const spotRect = (_b = spotRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+                setSpotPosition({
+                    x: spotRect.left * editContext.zoom - editorRect.left,
+                    y: spotRect.top * editContext.zoom - editorRect.top,
+                });
+            }
+        }
+    };
     (0, react_1.useEffect)(() => {
         setIsInserting(false);
     }, [refreshCompletedFlag]);
@@ -24,31 +45,49 @@ function PlaceholderDropZone({ placeholder, index, parentName, }) {
         const isSelectedForInsertion = editContext.selectedForInsertion.length > 0 &&
             placeholder.key.indexOf(editContext.selectedForInsertion) >= 0;
         const dragObjectAllowed = (editContext.dragObject ? true : false) &&
-            ((_a = placeholder.insertOptions) === null || _a === void 0 ? void 0 : _a.find((x) => { var _a; return x.id == ((_a = editContext.dragObject) === null || _a === void 0 ? void 0 : _a.templateId); })) != undefined;
+            ((_a = placeholder.insertOptions) === null || _a === void 0 ? void 0 : _a.find((x) => {
+                var _a, _b;
+                return x.id == ((_a = editContext.dragObject) === null || _a === void 0 ? void 0 : _a.templateId) ||
+                    ((_b = x.compatibleTemplates) === null || _b === void 0 ? void 0 : _b.find((y) => { var _a; return y == ((_a = editContext.dragObject) === null || _a === void 0 ? void 0 : _a.templateId); })) !== undefined;
+            })) != undefined;
         const selected = (isSelectedForInsertion ||
             (!isAnyPlaceholderSelected() && editContext.dragObject != undefined)) &&
             (!editContext.dragObject ? true : false || dragObjectAllowed);
         setIsSelected(selected);
+        if (selected)
+            updateSpotPosition();
     }, [selection, dragObject, selectedForInsertion, editContext]);
+    (0, react_1.useEffect)(() => {
+        updateSpotPosition();
+    }, [editContext.zoom, editContext.scroll, isSelected]);
     function dragOver(ev) {
         var _a;
         ev.dataTransfer.dropEffect =
             ((_a = editContext === null || editContext === void 0 ? void 0 : editContext.dragObject) === null || _a === void 0 ? void 0 : _a.type) == "template" ? "copy" : "move";
+        setIsHovering(true);
         ev.preventDefault();
     }
     function drop(ev) {
         ev.preventDefault();
         setIsInserting(true);
+        setIsHovering(false);
         editContext.droppedInPlaceholder(placeholder.key, index);
     }
     if (isInserting)
-        return ((0, jsx_runtime_1.jsx)("div", { className: " a-bg-gray-200 a-p-10", children: (0, jsx_runtime_1.jsx)(progressbar_1.ProgressBar, { mode: "indeterminate", style: { height: "6px" } }) }));
-    return ((0, jsx_runtime_1.jsx)("div", { onClick: (ev) => {
-            //  editContext.setSelectedForInsertion(placeholder.key + "_" + index);
-            editContext.openComponentPalette();
-            ev.stopPropagation();
-        }, onDragOver: dragOver, onDrop: drop, 
-        //   ref={setNodeRef}
-        className: `ape-placeholder ${isSelected ? "" : "ape-hidden"}`, children: (0, jsx_runtime_1.jsx)("div", { className: "a-p-6 a-max-w-sm a-mx-auto a-bg-white a-rounded-xl a-shadow-md a-flex a-items-center a-space-x-4", children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "a-text-xl a-font-medium a-text-black", children: ["Placeholder ", parentName, " / ", placeholder.name, " ", index] }), (0, jsx_runtime_1.jsx)("p", { className: "a-text-gray-500", children: "You can add your components here." })] }) }) }));
+        return ((0, jsx_runtime_1.jsx)("div", { className: "a-inserting-placeholder a-p-8 a-border a-border-dashed", children: (0, jsx_runtime_1.jsx)(progressbar_1.ProgressBar, { mode: "indeterminate", style: { height: "6px" } }) }));
+    let overlayStyle = undefined;
+    overlayStyle = {
+        top: spotPosition.y,
+        left: spotPosition.x,
+        zIndex: isHovering ? 1000 : 900,
+        position: "absolute",
+    };
+    if (!isSelected)
+        return;
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.classNames)(isHovering ? "a-z-50  a-border a-border-dashed" : "a-z-10", "a-flex a-justify-center a-items-center a-relative a-transition-all a-duration-200"), children: (0, jsx_runtime_1.jsx)("div", { ref: spotRef, children: editContext.editorContainerRef.current &&
+                overlayStyle &&
+                react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)("div", { style: overlayStyle, onDragOver: dragOver, onDrop: drop, onDragLeave: () => setIsHovering(false), onClick: (e) => e.preventDefault(), className: `a-placeholder ${isSelected ? "a-placeholder-dropzone" : "a-hidden"} `, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.classNames)(isHovering
+                            ? "a-z-50 a-shadow-xl shadow-black a-w-28 a-h-28 a-shadow-blue-500/50"
+                            : "a-z-49 a-w-10 a-h-10 hover:a-scale-[1.1]", "a-transition-all a-duration-200 a-text-white a-text-center a-p-2 a-text-sm a-flex a-justify-center a-items-center a-bg-blue-500 a-rounded-full a-absolute a-top-1/2 a-left-1/2 a--translate-x-1/2 a--translate-y-1/2 "), children: [!isHovering && (0, jsx_runtime_1.jsx)("i", { className: "pi pi-plus a-block" }), isHovering && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [parentName, " (", index, ")"] }))] }) }), editContext.editorContainerRef.current) }) }));
 }
 exports.PlaceholderDropZone = PlaceholderDropZone;

package/dist/cjs/editor/SidebarTabs.js

@@ -0,0 +1,47 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const tabview_1 = require("primereact/tabview");
+const DictionaryEditor_1 = require("./DictionaryEditor");
+const Debug_1 = require("./Debug");
+const FieldList_1 = require("./FieldList");
+const ItemInfo_1 = require("./ItemInfo");
+const GraphQL_1 = require("./GraphQL");
+const ComponentInfo_1 = require("./ComponentInfo");
+const react_1 = require("react");
+const ItemEditor_1 = __importDefault(require("./ItemEditor"));
+function SidebarTabs({ selectedComponent, page, dictionary, item, }) {
+    const [activeIndex, setActiveIndex] = (0, react_1.useState)(0);
+    (0, react_1.useEffect)(() => {
+        if (selectedComponent)
+            setActiveIndex(1);
+        else
+            setActiveIndex(0);
+    }, [selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id]);
+    (0, react_1.useEffect)(() => {
+        if (selectedComponent && item)
+            setActiveIndex(2);
+        else if (item) {
+            setActiveIndex(1);
+        }
+        else
+            setActiveIndex(0);
+    }, [item]);
+    const panels = [
+        (0, jsx_runtime_1.jsxs)(tabview_1.TabPanel, { header: "Page", className: "a-h-fill-available", children: [page && (0, jsx_runtime_1.jsx)(ItemInfo_1.ItemInfo, { item: page }), page && (0, jsx_runtime_1.jsx)(FieldList_1.FieldList, { fields: page.fields })] }, "page"),
+    ];
+    if (selectedComponent)
+        panels.push((0, jsx_runtime_1.jsxs)(tabview_1.TabPanel, { header: "Component", className: "a-h-fill-available", children: [(0, jsx_runtime_1.jsx)(ComponentInfo_1.ComponentInfo, { component: selectedComponent }), (0, jsx_runtime_1.jsx)(FieldList_1.FieldList, { fields: selectedComponent.fields })] }, "component"));
+    if (item)
+        panels.push((0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Item", className: "a-h-fill-available", children: (0, jsx_runtime_1.jsx)(ItemEditor_1.default, { item: item }) }, "item"));
+    if (selectedComponent) {
+        panels.push((0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "GraphQL", style: { height: "100%" }, children: (0, jsx_runtime_1.jsx)(GraphQL_1.GraphQL, { component: selectedComponent }) }, "graphql"));
+    }
+    panels.push((0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Dictionary", children: (0, jsx_runtime_1.jsx)(DictionaryEditor_1.DictionaryEditor, { dictionary: dictionary }) }, "dictionary"));
+    panels.push((0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Debug", className: "a-h-full", children: (0, jsx_runtime_1.jsx)(Debug_1.Debug, { component: selectedComponent, page: page }) }, "debug"));
+    return ((0, jsx_runtime_1.jsx)(tabview_1.TabView, { className: "a-inset-0 a-absolute alpaca-editor-tabs ", scrollable: true, activeIndex: activeIndex, onTabChange: (e) => setActiveIndex(e.index), children: panels }));
+}
+exports.default = SidebarTabs;

package/dist/cjs/editor/Terminal.js

@@ -3,14 +3,21 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Terminal = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const button_1 = require("primereact/button");
 const inputtextarea_1 = require("primereact/inputtextarea");
 const react_1 = require("react");
-function Terminal({ commandHandler, onReset, }) {
+function Terminal({ commandHandler, onReset, toolbar, }) {
     const [value, setValue] = (0, react_1.useState)("");
     const [response, setResponse] = (0, react_1.useState)();
     const [messages, setMessages] = (0, react_1.useState)([]);
     const bottomRef = (0, react_1.useRef)(null);
     const messageRef = (0, react_1.useRef)(messages);
+    const inputRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (inputRef.current) {
+            inputRef.current.focus();
+        }
+    }, []);
     (0, react_1.useEffect)(() => {
         messageRef.current = messages;
     }, [messages]);
@@ -25,10 +32,7 @@ function Terminal({ commandHandler, onReset, }) {
     const handleKeyPress = (e) => {
         if (e.key === "Enter" && !e.shiftKey) {
             e.preventDefault(); // Prevent newline insertion
-            setMessages([...messages, { type: "command", text: value }]);
-            setValue("");
-            setResponse("...");
-            commandHandler(value, callback);
+            submit();
         }
     };
     (0, react_1.useEffect)(() => {
@@ -38,14 +42,20 @@ function Terminal({ commandHandler, onReset, }) {
     }, [messages, response]);
     const getClasses = (m) => {
         if (m.type === "response")
-            return "text-blue-500";
+            return "a-text-blue-500";
         return "";
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "a-flex a-flex-col a-h-full", children: [(0, jsx_runtime_1.jsx)("div", { className: "a-p-4 a-border-b a-border-gray-200", children: (0, jsx_runtime_1.jsx)("button", { onClick: () => {
-                        setMessages([]);
-                        onReset();
-                    }, children: (0, jsx_runtime_1.jsx)("i", { className: "pi pi-trash" }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "a-overflow-y-auto a-h-full a-overflow-x-hidden a-p-2", children: [messages.map((m, i) => ((0, jsx_runtime_1.jsx)("div", { className: getClasses(m), children: m.text }, i))), response != null && ((0, jsx_runtime_1.jsxs)("div", { className: "a-flex", children: [(0, jsx_runtime_1.jsxs)("div", { className: "a-text-xs", children: [" ", (0, jsx_runtime_1.jsx)("i", { className: "pi pi-spin pi-spinner" })] }), (0, jsx_runtime_1.jsx)("div", { dangerouslySetInnerHTML: {
+    function submit() {
+        setMessages([...messages, { type: "command", text: value }]);
+        setValue("");
+        setResponse("...");
+        commandHandler(value, callback);
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "a-flex a-flex-col a-h-full", children: [(0, jsx_runtime_1.jsxs)("div", { className: "a-p-4 a-border-b a-border-gray-200 a-flex a-justify-between a-gap-2", children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => {
+                            setMessages([]);
+                            onReset();
+                        }, children: (0, jsx_runtime_1.jsx)("i", { className: "pi pi-trash" }) }), toolbar] }), (0, jsx_runtime_1.jsxs)("div", { className: "a-overflow-y-auto a-h-full a-overflow-x-hidden a-p-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "a-flex a-flex-col a-gap-2", children: messages.map((m, i) => ((0, jsx_runtime_1.jsx)("div", { className: getClasses(m), children: m.text }, i))) }), response != null && ((0, jsx_runtime_1.jsxs)("div", { className: "a-flex", children: [(0, jsx_runtime_1.jsxs)("div", { className: "a-text-xs", children: [" ", (0, jsx_runtime_1.jsx)("i", { className: "pi pi-spin pi-spinner" })] }), (0, jsx_runtime_1.jsx)("div", { dangerouslySetInnerHTML: {
                                     __html: response.replaceAll("\\n", "<br>"),
-                                } })] })), (0, jsx_runtime_1.jsx)("div", { ref: bottomRef })] }), (0, jsx_runtime_1.jsx)(inputtextarea_1.InputTextarea, { value: value, className: "a-border-0 a-border-t-2 a-rounded-none", onKeyDown: handleKeyPress, onChange: (e) => setValue(e.target.value), rows: 5, cols: 30 })] }));
+                                } })] })), (0, jsx_runtime_1.jsx)("div", { ref: bottomRef })] }), (0, jsx_runtime_1.jsxs)("div", { className: "a-flex", children: [(0, jsx_runtime_1.jsx)(inputtextarea_1.InputTextarea, { ref: inputRef, value: value, className: "a-border-0 a-border-t-2 a-rounded-none a-flex-1", onKeyDown: handleKeyPress, onChange: (e) => setValue(e.target.value), rows: 5, cols: 30 }), (0, jsx_runtime_1.jsx)(button_1.Button, { icon: "pi pi-chevron-right", onClick: submit })] })] }));
 }
 exports.Terminal = Terminal;

package/dist/cjs/editor/Utils.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLocalStorage = exports.useEventListenerExt = void 0;
+const react_1 = require("react");
+const react_2 = require("react");
+// Hook
+function useEventListenerExt(eventName, handler, element) {
+    // Create a ref that stores handler
+    const savedHandler = (0, react_2.useRef)();
+    // Update ref.current value if handler changes.
+    // This allows our effect below to always get latest handler ...
+    // ... without us needing to pass it in effect deps array ...
+    // ... and potentially cause effect to re-run every render.
+    (0, react_2.useEffect)(() => {
+        savedHandler.current = handler;
+    }, [handler]);
+    (0, react_2.useEffect)(() => {
+        // Make sure element supports addEventListener
+        // On
+        const isSupported = element && element.addEventListener;
+        if (!isSupported)
+            return;
+        // Create event listener that calls handler function stored in ref
+        const eventListener = (event) => savedHandler.current(event);
+        // Add event listener
+        element.addEventListener(eventName, eventListener);
+        // Remove event listener on cleanup
+        return () => {
+            element.removeEventListener(eventName, eventListener);
+        };
+    }, [eventName, element] // Re-run if eventName or element changes
+    );
+}
+exports.useEventListenerExt = useEventListenerExt;
+const useLocalStorage = (storageKey, fallbackState) => {
+    var _a;
+    const [value, setValue] = (0, react_1.useState)(JSON.parse((_a = localStorage.getItem(storageKey)) !== null && _a !== void 0 ? _a : JSON.stringify(fallbackState)));
+    (0, react_2.useEffect)(() => {
+        localStorage.setItem(storageKey, JSON.stringify(value));
+    }, [value, storageKey]);
+    return [value, setValue];
+};
+exports.useLocalStorage = useLocalStorage;

package/dist/cjs/editor/VersionSelector.js

@@ -16,6 +16,6 @@ function VersionSelector({ page, onVersionSelected, }) {
     const versionOptionTemplate = (option) => {
         return ((0, jsx_runtime_1.jsxs)("div", { children: [option.version, " ", (0, jsx_runtime_1.jsxs)("div", { className: "a-text-xs", children: ["(", option.updated.toString(), " by ", option.updatedBy, ")"] })] }));
     };
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: page.version, onChange: (e) => onVersionSelected(e.value), options: page.versions, optionValue: "version", optionLabel: "version", placeholder: "Select a version", valueTemplate: selectedVersionTemplate, itemTemplate: versionOptionTemplate }) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "a-text-sm", value: page.version, onChange: (e) => onVersionSelected(e.value), options: page.versions, optionValue: "version", optionLabel: "version", placeholder: "Select a version", valueTemplate: selectedVersionTemplate, itemTemplate: versionOptionTemplate }) }));
 }
 exports.VersionSelector = VersionSelector;

package/dist/cjs/editor/Workbox.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const column_1 = require("primereact/column");
+const datatable_1 = require("primereact/datatable");
+const tooltip_1 = require("primereact/tooltip");
+const button_1 = require("primereact/button");
+function Workbox({ workbox, lockItem, executeWorkflowCommand, }) {
+    const nameBodyTemplate = (wbItem) => {
+        const id = wbItem.item.id + wbItem.item.language + wbItem.item.version;
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "a-flex a-gap-2 a-items-center", children: [(wbItem.lockedBy || wbItem.hasLock) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("i", { className: `a-lock-tooltip-${id} ` +
+                                "a-text-xs pi pi-lock " +
+                                (wbItem.hasLock ? "a-text-green-600" : "a-text-red-600") }), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { target: `.a-lock-tooltip-${id}`, content: wbItem.lockedBy })] })), !wbItem.lockedBy && !wbItem.hasLock && ((0, jsx_runtime_1.jsx)("i", { className: "a-text-xs pi pi-lock-open", onClick: () => {
+                        lockItem(wbItem.item);
+                    } })), (0, jsx_runtime_1.jsxs)("span", { className: `a-name-tooltip-${id}`, style: { position: "relative" }, children: [wbItem.item.name, " ", (0, jsx_runtime_1.jsxs)("span", { className: "a-text-gray-300", children: ["(", wbItem.item.language, ", ", wbItem.item.version, ")"] }), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { target: `.a-name-tooltip-${id}`, content: wbItem.path })] })] }));
+    };
+    const stateBodyTemplate = (item) => {
+        if (item.isFinalState) {
+            if (item.publishStatus === "")
+                return "Published";
+            return item.publishStatus;
+        }
+        else
+            return item.workflowState;
+    };
+    const actionsBodyTemplate = (item) => {
+        var _a;
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "a-workbox", children: [item.isFinalState && item.publishStatus, !item.isFinalState &&
+                    ((_a = item.commands) === null || _a === void 0 ? void 0 : _a.map((action) => {
+                        return ((0, jsx_runtime_1.jsx)(button_1.Button, { label: action.name, className: "a-text-xs a-p-1", onClick: () => executeWorkflowCommand(item.item, action.id), size: "small" }, action.id));
+                    }))] }));
+    };
+    let items = workbox.items;
+    items = items.sort((a, b) => {
+        if (a.publishStatus.length > 0 && b.publishStatus.length > 0)
+            return 0;
+        return a.publishStatus.length > 0 || !a.isPublishable ? -1 : 1;
+    });
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "a-p-3 a-bg-gray-50 a-text-gray-600 a-text-sm a-border-b-2", children: "Workbox" }), (0, jsx_runtime_1.jsx)("div", { className: "a-overflow-hidden a-relative a-flex-1 a-workbox", children: (0, jsx_runtime_1.jsx)("div", { className: "a-inset-0 a-absolute a-overflow-y-auto", children: (0, jsx_runtime_1.jsxs)(datatable_1.DataTable, { value: items, className: "a-text-xs", children: [(0, jsx_runtime_1.jsx)(column_1.Column, { body: nameBodyTemplate, header: "Item" }), (0, jsx_runtime_1.jsx)(column_1.Column, { body: stateBodyTemplate, header: "State" }), (0, jsx_runtime_1.jsx)(column_1.Column, { body: actionsBodyTemplate, header: "Actions" })] }) }) })] }));
+}
+exports.default = Workbox;

package/dist/cjs/editor/componentCommands.js

@@ -0,0 +1,141 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getComponentCommands = exports.getCommands = void 0;
+const confirmdialog_1 = require("primereact/confirmdialog");
+const react_uuid_1 = __importDefault(require("react-uuid"));
+const isPlaceholder = (x) => x.components !== undefined;
+function getCommands(entities, editContext) {
+    const commands = [
+        getDeleteCommand(entities.filter((x) => !isPlaceholder(x)), editContext),
+        getSyncCommand(entities, editContext),
+    ];
+    return commands;
+}
+exports.getCommands = getCommands;
+function getComponentCommands(components, editContext) {
+    const commands = [
+        getDeleteCommand(components, editContext),
+        getSyncCommand(components, editContext),
+    ];
+    return commands;
+}
+exports.getComponentCommands = getComponentCommands;
+function getDeleteCommand(components, editContext) {
+    const applicableComponents = components.filter((c) => {
+        var _a, _b;
+        return (!isPlaceholder(c) && !c.hostingPageItem) ||
+            ((_a = c.hostingPageItem) === null || _a === void 0 ? void 0 : _a.id) === ((_b = editContext.page) === null || _b === void 0 ? void 0 : _b.id);
+    });
+    return {
+        name: "delete",
+        label: "Delete",
+        icon: "pi pi-fw pi-trash",
+        execute: () => deleteComponents(applicableComponents, editContext),
+        disabled: applicableComponents.length === 0 ||
+            applicableComponents.length !== components.length,
+        visibilityScopes: ["editFrame", "menu"],
+    };
+}
+function canSynchronize(placeholderData) {
+    if (placeholderData.canSynchronize)
+        return true;
+    placeholderData.components.forEach((c) => {
+        if (c.placeholders.find((x) => canSynchronize(x)))
+            return true;
+    });
+    return false;
+}
+function getSyncCommand(components, editContext) {
+    var _a, _b;
+    const placeholders = [];
+    for (const component of components) {
+        if (isPlaceholder(component) && canSynchronize(component)) {
+            placeholders.push({
+                item: component.parentComponent
+                    ? getItemDescriptor(component.parentComponent, editContext)
+                    : undefined,
+                name: component.name,
+            });
+        }
+        else {
+            if ((_a = component.placeholders) === null || _a === void 0 ? void 0 : _a.find((x) => canSynchronize(x))) {
+                placeholders.push({
+                    item: getItemDescriptor(component, editContext),
+                });
+            }
+        }
+    }
+    const canSync = placeholders.length > 0 ||
+        (components.length === 0 &&
+            ((_b = editContext.page) === null || _b === void 0 ? void 0 : _b.placeholders.find((x) => canSynchronize(x))));
+    return {
+        name: "synchronize",
+        label: "Synchronize",
+        icon: "pi pi-fw pi-sync",
+        disabled: !canSync,
+        visibilityScopes: ["menu", "editFrame"],
+        execute: () => {
+            const op = {
+                type: "synchronize-components",
+                date: new Date(),
+                delete: false,
+                id: (0, react_uuid_1.default)(),
+                placeholders: placeholders,
+                pageItem: getPageItemDescriptor(editContext),
+            };
+            editContext.executeEditOperation(op);
+        },
+    };
+}
+function getItemDescriptors(components, editContext) {
+    const items = components
+        .map((c) => getItemDescriptor(c, editContext))
+        .flatMap((f) => (f ? [f] : []));
+    return items;
+}
+function deleteComponents(components, editContext) {
+    const items = getItemDescriptors(components, editContext);
+    if (!items.length)
+        return;
+    (0, confirmdialog_1.confirmDialog)({
+        message: (items.length > 1
+            ? "Are you sure you want to remove these components? "
+            : "Are you sure you want to remove this component? ") +
+            items.map((x) => x.name).join(", "),
+        header: items.length > 1 ? "Remove components" : "Remove component",
+        icon: "pi pi-exclamation-triangle",
+        accept: () => {
+            const op = {
+                type: "remove-component",
+                date: new Date(),
+                id: (0, react_uuid_1.default)(),
+                components: items,
+                pageItem: getPageItemDescriptor(editContext),
+            };
+            editContext.executeEditOperation(op);
+            components.forEach((c) => {
+                if (c)
+                    c.isRemoved = true;
+            });
+        },
+    });
+}
+function getItemDescriptor(component, editContext) {
+    var _a, _b;
+    return {
+        id: component.id,
+        language: ((_a = component.hostingPageItem) === null || _a === void 0 ? void 0 : _a.language) || editContext.page.language,
+        version: ((_b = component.hostingPageItem) === null || _b === void 0 ? void 0 : _b.version) || editContext.page.version,
+        name: component.name,
+    };
+}
+function getPageItemDescriptor(editContext) {
+    return {
+        id: editContext.page.id,
+        language: editContext.page.language,
+        version: editContext.page.version,
+    };
+}

package/dist/cjs/editor/contentService.js

@@ -12,14 +12,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getChildren = void 0;
+exports.getItem = exports.getChildren = void 0;
 const universal_cookie_1 = __importDefault(require("universal-cookie"));
-function getChildren(itemId, sessionId, templateIds = []) {
+function getChildren(itemId, sessionId, templateIds = [], includeEmbeddedItems) {
     return __awaiter(this, void 0, void 0, function* () {
         let url = "/alpaca/headless/editor/children?itemId=" +
             itemId +
             "&sessionId=" +
-            sessionId;
+            sessionId +
+            "&includeEmbeddedItems=" +
+            includeEmbeddedItems;
         url = templateIds.reduce((u, t) => u + "&templateIds=" + t, url);
         const response = yield fetch(url, {
             method: "GET",
@@ -36,3 +38,43 @@ function getChildren(itemId, sessionId, templateIds = []) {
     });
 }
 exports.getChildren = getChildren;
+function getItem(page, item, sessionId) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const query = `query { item(id: "${item.id}", language: "${item.language}", version: ${item.version}) { id name version language path template {id name} ` +
+            " fields { " +
+            " jsonValue}  } } ";
+        const response = yield fetch("/alpaca/headless/graphql?sessionId=" + sessionId, {
+            method: "POST",
+            body: JSON.stringify({
+                itemId: page.id,
+                language: page.language,
+                version: page.version,
+                query: query,
+                isEditing: true,
+            }),
+            credentials: "include",
+            headers: {
+                "Content-Type": "application/json",
+                Cookie: new universal_cookie_1.default().getAll(),
+            },
+            next: {
+                revalidate: 0,
+            },
+        });
+        const json = yield response.json();
+        if (json.data.item) {
+            const itemData = json.data.item;
+            return {
+                id: itemData.id,
+                name: itemData.name,
+                language: itemData.language,
+                version: itemData.version,
+                path: itemData.path,
+                fields: itemData.fields.map((x) => x.jsonValue),
+                templateId: itemData.template.id,
+                templateName: itemData.template.name,
+            };
+        }
+    });
+}
+exports.getItem = getItem;

package/dist/cjs/editor/editContext.js

@@ -24,12 +24,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useEditContext = exports.EditContextProvider = void 0;
+exports.EditFilterChildrenContextProvider = exports.useEditFilterChildrenContext = exports.EditFrameContextProvider = exports.useEditFrameContext = exports.useEditContext = exports.EditContextProvider = void 0;
 const react_1 = __importStar(require("react"));
 const EditContext = react_1.default.createContext(undefined);
 exports.EditContextProvider = EditContext.Provider;
 const useEditContext = () => (0, react_1.useContext)(EditContext);
 exports.useEditContext = useEditContext;
-// const TestContext = React.createContext<string | undefined>(undefined);
-// export const TestContextProvider = TestContext.Provider;
-// export const useTestContext = () => useContext(TestContext);
+const EditFrameContext = react_1.default.createContext(undefined);
+const useEditFrameContext = () => (0, react_1.useContext)(EditFrameContext);
+exports.useEditFrameContext = useEditFrameContext;
+exports.EditFrameContextProvider = EditFrameContext.Provider;
+const EditFilterChildrenContext = react_1.default.createContext(undefined);
+const useEditFilterChildrenContext = () => (0, react_1.useContext)(EditFilterChildrenContext);
+exports.useEditFilterChildrenContext = useEditFilterChildrenContext;
+exports.EditFilterChildrenContextProvider = EditFilterChildrenContext.Provider;