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

package/dist/esm/editor/Outline.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useContext, useEffect, useRef } from "react";
+import { useEditContext } from "./editContext";
+const OutlineContext = React.createContext(undefined);
+export const useOutlineContext = () => useContext(OutlineContext);
+export const OutlineContextProvider = OutlineContext.Provider;
+export function Outline({ children, editorContainerRef, }) {
+    var _a;
+    const editContext = useEditContext();
+    const [scale, setScale] = React.useState(1);
+    const outlineRef = useRef(null);
+    const outlineContainerRef = useRef(null);
+    const outlineWidth = (editContext === null || editContext === void 0 ? void 0 : editContext.configuration.outline.width) || 100;
+    useEffect(() => {
+        var _a;
+        const viewport = editContext === null || editContext === void 0 ? void 0 : editContext.pageView.viewport;
+        if (!viewport)
+            return;
+        const width = viewport.width;
+        const scaleX = outlineWidth / width;
+        const scaleY = viewport.height / ((_a = editorContainerRef.current) === null || _a === void 0 ? void 0 : _a.scrollHeight);
+        const newScale = Math.min(scaleX, scaleY, 1);
+        setScale(newScale);
+    }, [
+        editorContainerRef,
+        editContext === null || editContext === void 0 ? void 0 : editContext.windowSize,
+        editContext === null || editContext === void 0 ? void 0 : editContext.pageView.zoom,
+        editContext === null || editContext === void 0 ? void 0 : editContext.pageView.viewport,
+    ]);
+    if (!editContext) {
+        return null;
+    }
+    const scrollDocumentTo = (y) => {
+        var _a;
+        if (!editorContainerRef.current)
+            return;
+        if (!outlineRef.current)
+            return;
+        const rect = outlineRef.current.getBoundingClientRect();
+        (_a = editorContainerRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
+            top: (y - rect.y) / scale,
+            behavior: "smooth",
+        });
+    };
+    const scrollHeight = (_a = editorContainerRef.current) === null || _a === void 0 ? void 0 : _a.scrollHeight;
+    const scrollTop = editContext.pageView.scroll;
+    const viewport = editContext.pageView.viewport;
+    return (_jsxs("div", { className: "a-absolute", ref: outlineContainerRef, style: {
+            right: "2px",
+            top: "0",
+            width: outlineWidth + "px",
+            boxShadow: "5px 0 5px -5px #333",
+        }, children: [_jsx("div", { className: "a-fixed a-bg-opacity-50 a-overflow-hidden a-select-none", style: {
+                    width: outlineWidth + "px",
+                    padding: "0 6px",
+                    boxShadow: "rgb(200, 200, 200) -10px 1px 13px -10px",
+                }, children: _jsx("div", { ref: outlineRef, onDragOverCapture: (e) => {
+                        scrollDocumentTo(e.clientY);
+                        e.stopPropagation();
+                        e.preventDefault();
+                    }, onContextMenuCapture: (e) => {
+                        e.stopPropagation();
+                        e.preventDefault();
+                    }, onClickCapture: (e) => {
+                        scrollDocumentTo(e.clientY);
+                        e.stopPropagation();
+                        e.preventDefault();
+                    }, onWheelCapture: (e) => {
+                        var _a;
+                        (_a = editorContainerRef.current) === null || _a === void 0 ? void 0 : _a.scrollBy(0, e.deltaY);
+                        e.stopPropagation();
+                        e.preventDefault();
+                    }, style: {
+                        cursor: "pointer",
+                        transformOrigin: "top left",
+                        transform: "scale(" + scale + ")",
+                        width: viewport.width - 105 / editContext.pageView.zoom + "px",
+                    }, children: _jsx(OutlineContextProvider, { value: { outlineContainerRef, scale }, children: children }) }) }), scrollTop !== undefined && scrollHeight !== undefined && (_jsx("div", { className: "a-absolute a-bg-opacity-40 a-bg-gray-200 a-w-full a-pointer-events-none", style: {
+                    top: scrollTop * scale + "px",
+                    height: viewport.height * scale + "px",
+                } }))] }));
+}

package/dist/esm/editor/PageViewer.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { useEditContext } from "./editContext";
+import { Outline } from "./Outline";
+export function PageViewer() {
+    const editContext = useEditContext();
+    if (!editContext)
+        return null;
+    const children = editContext.renderedPage;
+    const device = editContext.pageView.device;
+    const zoom = editContext.pageView.zoom;
+    const setZoom = editContext.pageView.setZoom;
+    const containerRef = useRef(null);
+    const showOutline = (containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) &&
+        containerRef.current.scrollHeight > containerRef.current.offsetHeight;
+    const paddingRight = showOutline
+        ? editContext.configuration.outline.width / zoom + "px"
+        : "0";
+    useEffect(() => {
+        if (!containerRef.current)
+            return;
+        containerRef.current.addEventListener("wheel", handleWheel, {
+            passive: false,
+        });
+    }, [containerRef]);
+    const handleWheel = (e) => {
+        if (e.ctrlKey) {
+            e.preventDefault();
+            if (e.deltaY < 0) {
+                setZoom((zoom) => (zoom > 50 ? zoom : zoom * 1.2));
+            }
+            else {
+                setZoom((zoom) => (zoom < 0.1 ? zoom : zoom / 1.2));
+            }
+        }
+    };
+    const renderedPage = (_jsx("div", { onDragEndCapture: () => editContext.dragEnd(), className: "a-flex a-flex-col a-w-full a-h-full a-items-center a-bg-gray-100", ref: editContext.pageView.editorContainerRef, children: _jsxs("div", { className: "a-flex-1 a-relative a-h-full a-bg-white", style: { width: device == "desktop" ? "100%" : "640px" }, children: [_jsx("div", { className: "alpaca-editor-container a-absolute a-inset-0 a-overflow-auto", style: { zoom: zoom, paddingRight }, ref: containerRef, onScroll: (e) => {
+                        editContext.pageView.setScroll(e.currentTarget.scrollTop);
+                    }, children: children }), showOutline && (_jsx(Outline, { editorContainerRef: containerRef, children: children }))] }) }));
+    return renderedPage;
+}

package/dist/esm/editor/PictureEditorDialog.js

@@ -0,0 +1,201 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Dialog } from "primereact/dialog";
+import { useEditContext } from ".";
+import { useCallback, useEffect, useState } from "react";
+import { Button } from "primereact/button";
+import DialogButtons from "./DialogButtons";
+import { getRenderedPictureVariant, } from "../components/picture-shared";
+import { getPictureValue } from "./services/editService";
+export function PictureEditorDialog({ field, onCancel, onOk, params, }) {
+    var _a, _b, _c, _d;
+    const [selectedVariantName, setSelectedVariantName] = useState();
+    const [pictureValue, setPictureValue] = useState();
+    const [rawValue, setRawValue] = useState();
+    const emptyRect = () => ({
+        width: 0,
+        height: 0,
+        top: 0,
+        left: 0,
+    });
+    const [rect, setRect] = useState(emptyRect());
+    const editContext = useEditContext();
+    useEffect(() => {
+        var _a;
+        setSelectedVariantName((_a = field === null || field === void 0 ? void 0 : field.value) === null || _a === void 0 ? void 0 : _a.variants[0].name);
+    }, []);
+    useEffect(() => {
+        var _a, _b, _c, _d;
+        const deepCopy = JSON.parse(JSON.stringify(field.value));
+        setPictureValue(deepCopy);
+        const raw = ((_a = field === null || field === void 0 ? void 0 : field._editor) === null || _a === void 0 ? void 0 : _a.rawValue)
+            ? JSON.parse((_b = field === null || field === void 0 ? void 0 : field._editor) === null || _b === void 0 ? void 0 : _b.rawValue)
+            : { Variants: [] };
+        setRawValue(raw);
+        if (!((_c = field === null || field === void 0 ? void 0 : field.value) === null || _c === void 0 ? void 0 : _c.variants[0].src))
+            selectMedia((_d = field === null || field === void 0 ? void 0 : field.value) === null || _d === void 0 ? void 0 : _d.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;
+    useEffect(() => {
+        if ((selectedVariant === null || selectedVariant === void 0 ? void 0 : selectedVariant.region) &&
+            (!selectedVariant.aspectRatioLock ||
+                Math.abs(selectedVariant.aspectRatioLock -
+                    selectedVariant.region.width / selectedVariant.region.height) < 0.1))
+            setRect({
+                width: selectedVariant.region.width,
+                height: selectedVariant.region.height,
+                top: selectedVariant.region.y,
+                left: selectedVariant.region.x,
+            });
+        else {
+            setRect(emptyRect());
+        }
+    }, [selectedVariantName]);
+    const getPictureFieldValue = (field, rawValue) => __awaiter(this, void 0, void 0, function* () {
+        var _e;
+        if (!((_e = editContext === null || editContext === void 0 ? void 0 : editContext.page) === null || _e === void 0 ? void 0 : _e.site))
+            return null;
+        return getPictureValue(field, rawValue, editContext.page.site.name, editContext.sessionId);
+    });
+    const imageSelected = useCallback((imageId, variantName, rawValue) => __awaiter(this, void 0, void 0, function* () {
+        var _f;
+        if (!variantName || !rawValue)
+            return;
+        const selected = (_f = rawValue.Variants) === null || _f === void 0 ? void 0 : _f.find((x) => x.Name == variantName);
+        if (!selected) {
+            if (!rawValue.Variants)
+                rawValue.Variants = [];
+            rawValue.Variants.push({
+                Name: variantName,
+                MediaId: imageId,
+            });
+        }
+        else {
+            selected.MediaId = imageId;
+        }
+        setRawValue(rawValue);
+        const newValue = yield getPictureFieldValue(field, rawValue);
+        if (newValue) {
+            setPictureValue(newValue);
+        }
+    }), []);
+    const updateRawValue = (rawValue) => __awaiter(this, void 0, void 0, function* () {
+        setRawValue(rawValue);
+        const newValue = yield getPictureFieldValue(field, rawValue);
+        if (newValue) {
+            setPictureValue(newValue);
+        }
+    });
+    const setVariantCrop = () => __awaiter(this, void 0, void 0, function* () {
+        var _g, _h;
+        if (!rawValue)
+            return;
+        if (!selectedVariantName)
+            return;
+        if (selectedVariant) {
+            let selected = (_g = rawValue.Variants) === null || _g === void 0 ? void 0 : _g.find((x) => x.Name == selectedVariantName);
+            if (!selected) {
+                selected = {
+                    Name: selectedVariantName,
+                    MediaId: selectedVariant.mediaId,
+                };
+                (_h = rawValue.Variants) === null || _h === void 0 ? void 0 : _h.push(selected);
+            }
+            if (selected) {
+                selected.Region = {
+                    X: rect.left,
+                    Y: rect.top,
+                    Width: rect.width,
+                    Height: rect.height,
+                };
+                yield updateRawValue(rawValue);
+            }
+        }
+    });
+    const usage = getUsage(pictureValue, params);
+    return (_jsx(_Fragment, { children: _jsx(Dialog, { header: "Edit " + ((_b = field._editor) === null || _b === void 0 ? void 0 : _b.name), visible: true, style: { width: "70vw", height: "70vh" }, onHide: onCancel, 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-2", children: [_jsxs("div", { className: "a-flex a-flex-col a-gap-6 a-h-full a-border-r a-pr-3 a-pt-3 a-w-40", children: [pictureValue &&
+                                        ((_c = pictureValue.variants) === null || _c === void 0 ? void 0 : _c.map((variant) => (_jsxs("div", { onClick: () => setSelectedVariantName(variant.name), className: "a-text-xs a-flex a-flex-col a-items-center a-justify-center a-gap-1 a-cursor-pointer", children: [_jsx("div", { className: "a-flex a-justify-center a-items-center a-h-40 a-w-40 a-border a-relative" +
+                                                        (selectedVariantName == variant.name
+                                                            ? " a-shadow-xl "
+                                                            : ""), children: variant.src && _jsx("img", { src: variant.thumbSrc }) }), _jsxs("div", { className: "a-w-40", children: [_jsx("div", { children: variant.name }), _jsx("div", { children: variant.aspectRatioLockText }), _jsxs("div", { children: [_jsxs("div", { className: "a-break-all", children: ["Name: ", variant.mediaItemName] }), _jsxs("div", { children: ["Orig. size: ", variant.width, " x ", variant.height] }), (variant.width < 1 || variant.height < 1) && (_jsxs("span", { children: [" ", _jsx("i", { className: "pi pi-exclamation-triangle a-text-red-600 " })] }))] })] })] }, variant.name)))), usage && _jsx("div", { className: "a-text-xs", children: usage })] }), _jsx("div", { className: "a-flex-1 a-relative a-p-3", children: _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 && (_jsxs("div", { className: "a-relative", onDoubleClick: () => selectMedia(), onMouseDown: (ev) => {
+                                                ev.preventDefault();
+                                                ev.stopPropagation();
+                                                const bounds = ev.currentTarget.getBoundingClientRect();
+                                                setRect({
+                                                    left: (ev.clientX - bounds.left) / bounds.width,
+                                                    top: (ev.clientY - bounds.top) / bounds.height,
+                                                    width: 0,
+                                                    height: 0,
+                                                });
+                                            }, onMouseMoveCapture: (ev) => {
+                                                if (ev.buttons === 1) {
+                                                    const bounds = ev.currentTarget.getBoundingClientRect();
+                                                    const width = (ev.clientX - bounds.left) / bounds.width - rect.left;
+                                                    const newRect = Object.assign(Object.assign({}, rect), { width, height: selectedVariant.aspectRatioLock
+                                                            ? width / selectedVariant.aspectRatioLock
+                                                            : (ev.clientY - bounds.top) / bounds.height -
+                                                                rect.top });
+                                                    setRect(newRect);
+                                                    ev.preventDefault();
+                                                    ev.stopPropagation();
+                                                }
+                                            }, onMouseUp: () => setVariantCrop(), children: [_jsx("img", { src: (_d = selectedVariant.originalSrc) !== null && _d !== void 0 ? _d : selectedVariant.src, className: "a-object-contain a-h-full a-w-full" }), _jsx("div", { className: "a-absolute a-bg-opacity-70 a-bg-gray-300", style: {
+                                                        left: rect.left * 100 + "%",
+                                                        top: rect.top * 100 + "%",
+                                                        width: rect.width * 100 + "%",
+                                                        height: rect.height * 100 + "%",
+                                                    } })] })), selectedVariant && (_jsxs("div", { className: "a-absolute a-top-0 a-right-0 a-cursor-pointer a-text-sm a-flex a-flex-col a-gap-1 a-items-center a-p-2 a-bg-gray-100 a-bg-opacity-70", onClick: () => selectMedia(), children: [_jsx("i", { className: "pi pi-pencil a-text-xl" }), "Choose"] }))] }) })] }), _jsxs(DialogButtons, { children: [_jsx(Button, { size: "small", 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" }), _jsx(Button, { onClick: () => {
+                                    onCancel();
+                                }, size: "small", children: "Cancel" })] })] }) }) }));
+}
+function getUsage(pictureValue, params) {
+    var _a;
+    if (!params)
+        return;
+    if (!pictureValue)
+        return;
+    if (pictureValue.variants.length <= 1)
+        return;
+    const mediaParams = typeof params === "object" && "default" in params ? params : undefined;
+    if (mediaParams) {
+        const sources = Object.keys(mediaParams !== null && mediaParams !== void 0 ? mediaParams : {});
+        const variants = sources
+            .map((source) => ({
+            source,
+            variant: getRenderedPictureVariant(mediaParams[source], pictureValue.variants),
+        }))
+            .filter((x) => x.variant);
+        return (_jsxs(_Fragment, { children: ["This field rendering is using these variants:", _jsx("table", { children: variants.map((v) => (_jsxs("tr", { children: [_jsx("td", { children: v.source }), _jsx("td", { children: _jsx("b", { children: v.variant.name }) })] }))) })] }));
+    }
+    return (_jsxs(_Fragment, { children: ["This field rendering is using the variant", " ", _jsxs("b", { children: [(_a = getRenderedPictureVariant(params, pictureValue.variants)) === null || _a === void 0 ? void 0 : _a.name, "."] })] }));
+}

package/dist/esm/editor/PlaceholderDropZone.js

@@ -0,0 +1,130 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { ProgressBar } from "primereact/progressbar";
+import { useEditContext } from ".";
+import { classNames } from "primereact/utils";
+import ReactDOM from "react-dom";
+import { useOutlineContext } from "./Outline";
+export function PlaceholderDropZone({ placeholder, description, index, parentName, }) {
+    var _a, _b;
+    const [isInserting, setIsInserting] = useState(false);
+    const [isSelected, setIsSelected] = useState(false);
+    const [isHovering, setIsHovering] = useState(false);
+    const spotRef = useRef(null);
+    const [spotPosition, setSpotPosition] = useState({ x: 0, y: 0 });
+    const editContext = useEditContext();
+    const outlineContext = useOutlineContext();
+    if (!editContext)
+        return;
+    const { selection, refreshCompletedFlag, dragObject, selectedForInsertion } = editContext;
+    function isAnyPlaceholderSelected() {
+        return (selection === null || selection === void 0 ? void 0 : selection.find((x) => (x === null || x === void 0 ? void 0 : x.indexOf("_")) > 0)) != undefined;
+    }
+    const updateSpotPosition = () => {
+        var _a, _b;
+        if (spotRef.current) {
+            const editorRect = (_a = editContext.pageView.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.pageView.zoom - editorRect.left,
+                    y: spotRect.top * editContext.pageView.zoom - editorRect.top,
+                });
+            }
+        }
+    };
+    useEffect(() => {
+        setIsInserting(false);
+    }, [refreshCompletedFlag]);
+    useEffect(() => {
+        var _a, _b;
+        const isSelectedForInsertion = editContext.selectedForInsertion.length > 0 &&
+            placeholder.key.indexOf(editContext.selectedForInsertion) >= 0;
+        const dragObjectAllowed = (editContext.dragObject ? true : false) &&
+            ((_b = (_a = placeholder._editor) === null || _a === void 0 ? void 0 : _a.insertOptions) === null || _b === void 0 ? void 0 : _b.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]);
+    useEffect(() => {
+        updateSpotPosition();
+    }, [editContext.pageView.zoom, editContext.pageView.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 (_jsx("div", { className: "a-inserting-placeholder a-p-8 a-border a-border-dashed", children: _jsx(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;
+    if (outlineContext) {
+        const spotRect = (_a = spotRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        const containerRect = (_b = outlineContext.outlineContainerRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+        return (_jsx("div", { ref: spotRef, className: "spot", children: outlineContext.outlineContainerRef.current &&
+                containerRect &&
+                spotRect &&
+                ReactDOM.createPortal(_jsx("div", { className: "a-absolute a-text-blue-500", style: {
+                        left: "-8px",
+                        top: spotRect.top - containerRect.top - 8 + "px",
+                        fontSize: "12px",
+                    }, onDragOver: dragOver, title: (description !== null && description !== void 0 ? description : placeholder.name) + " (" + index + ")", onDrop: drop, onDragLeave: () => setIsHovering(false), children: _jsx("i", { className: "pi pi-angle-right " }) }), outlineContext.outlineContainerRef.current) }));
+    }
+    else
+        return (_jsx("div", { className: classNames(isHovering ? "a-z-50  a-border a-border-dashed" : "a-z-10", "a-placeholder-dropzone a-flex a-justify-center a-items-center a-relative a-transition-all a-duration-200"), children: _jsx("div", { ref: spotRef, children: editContext.pageView.editorContainerRef.current &&
+                    overlayStyle &&
+                    ReactDOM.createPortal(_jsx("div", { style: overlayStyle, onDragOver: dragOver, title: (description !== null && description !== void 0 ? description : placeholder.name) + " (" + index + ")", onDrop: drop, onDragLeave: () => setIsHovering(false), onClick: (e) => {
+                            var _a, _b;
+                            const insertOptions = ((_b = (_a = placeholder._editor) === null || _a === void 0 ? void 0 : _a.insertOptions) === null || _b === void 0 ? void 0 : _b.filter((x) => !x.isHidden && x.isComponent).map((x) => ({
+                                id: x.id,
+                                icon: (_jsx("img", { src: x.icon, width: "16", height: "16", className: "a-m-1" })),
+                                label: x.name,
+                                command: () => {
+                                    setIsInserting(true);
+                                    const placeholderKeyComponents = placeholder.key.split("_");
+                                    const parentId = placeholderKeyComponents.length === 1
+                                        ? undefined
+                                        : placeholderKeyComponents[0];
+                                    editContext.addComponent(x.id, x.name || "component", placeholder.name, index, parentId);
+                                },
+                            }))) || [];
+                            if (insertOptions.length > 0)
+                                editContext.showContextMenu(e, [
+                                    {
+                                        label: "Insert",
+                                        disabled: true,
+                                        className: "a-border-b a-border-gray-600 a-pb-2 a-pl-2",
+                                        template: () => {
+                                            return (_jsx("span", { className: "a-text-black a-text-sm ", children: "Insert" }));
+                                        },
+                                    },
+                                    ...insertOptions,
+                                ]);
+                            e.preventDefault();
+                        }, className: `a-placeholder a-cursor-pointer ${isSelected ? "a-placeholder-dropzone" : "a-hidden"} `, children: _jsxs("div", { className: 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 && _jsx("i", { className: "pi pi-plus a-block" }), isHovering && (_jsxs(_Fragment, { children: [parentName, " (", description || "", " ", index, ")"] }))] }) }), editContext.pageView.editorContainerRef.current) }) }));
+}

package/dist/esm/editor/PlaceholderDropZoneHost.js

@@ -0,0 +1,7 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import dynamic from "next/dynamic";
+const PlaceholderDropZone = dynamic(() => import("./PlaceholderDropZone").then((dnd) => dnd.PlaceholderDropZone), { ssr: false });
+export function PlaceholderDropZoneHost({ placeholder, description, index, parentName, }) {
+    return (_jsx(PlaceholderDropZone, { placeholder: placeholder, description: description, index: index, parentName: parentName }));
+}

package/dist/esm/editor/PreviewClient.js

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

package/dist/esm/editor/PreviewClientHost.js

@@ -0,0 +1,7 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import dynamic from "next/dynamic";
+const PreviewClient = dynamic(() => import("./PreviewClient").then((dnd) => dnd.PreviewClient), { ssr: false });
+export function PreviewClientHost({ children }) {
+    return _jsx(PreviewClient, { children: children });
+}

package/dist/esm/editor/PreviewPanel.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PreviewClient } from "./PreviewClient";
+import { useEditContext } from "./editContext";
+export function PreviewPanel() {
+    const editContext = useEditContext();
+    return _jsx(PreviewClient, { children: editContext === null || editContext === void 0 ? void 0 : editContext.renderedPage });
+}

package/dist/esm/editor/PublishDialog.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Dialog } from "primereact/dialog";
+import { Workbox as WorkboxWidget } from "./sidebar/Workbox";
+import DialogButtons from "./DialogButtons";
+import { Button } from "primereact/button";
+export function PublishDialog({ 
+// lockItems,
+// unlockItems,
+visible, onHide, page, }) {
+    const allUnlocked = page._editor.workbox.items.filter((x) => x.hasLock).length > 0;
+    const allInFinalState = page._editor.workbox.items.filter((x) => !x.isFinalState).length > 0;
+    return (_jsx(_Fragment, { children: _jsx(Dialog, { header: "Publish page " + page.name, style: { width: "70vw", height: "70vh" }, onHide: onHide, visible: visible, children: _jsxs("div", { className: "a-w-full a-h-full a-flex a-flex-col", children: [_jsx(WorkboxWidget, {}), _jsxs(DialogButtons, { children: [allInFinalState && (_jsx(Button, { size: "small", onClick: () => { }, children: "Publish" })), !(allInFinalState || !allUnlocked) && (_jsx(Button, { onClick: () => {
+                                    onHide();
+                                }, size: "small", children: "Cancel" }))] })] }) }) }));
+}

package/dist/esm/editor/Terminal.js

@@ -0,0 +1,55 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "primereact/button";
+import { InputTextarea } from "primereact/inputtextarea";
+import { useEffect, useRef, useState } from "react";
+export function Terminal({ commandHandler, onReset, toolbar, statusbar, infobar, prompt, setPrompt, }) {
+    const [response, setResponse] = useState();
+    const [messages, setMessages] = useState([]);
+    const bottomRef = useRef(null);
+    const messageRef = useRef(messages);
+    const inputRef = useRef(null);
+    useEffect(() => {
+        if (inputRef.current) {
+            inputRef.current.focus();
+        }
+    }, []);
+    useEffect(() => {
+        messageRef.current = messages;
+    }, [messages]);
+    const callback = (text, finished) => {
+        if (!finished)
+            setResponse(text);
+        else {
+            setResponse(undefined);
+            setMessages([...messageRef.current, { type: "response", text }]);
+        }
+    };
+    const handleKeyPress = (e) => {
+        if (e.key === "Enter" && !e.shiftKey) {
+            e.preventDefault(); // Prevent newline insertion
+            submit();
+        }
+    };
+    useEffect(() => {
+        var _a;
+        // 👇️ scroll to bottom every time messages change
+        (_a = bottomRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
+    }, [messages, response]);
+    const responseBoxClasses = "a-text-xs a-self-stretch a-text-gray-700 a-p-2 a-rounded a-shadow a-border a-border-gray-200";
+    const getClasses = (m) => {
+        if (m.type === "response")
+            return responseBoxClasses;
+        return "a-text-xs a-text-gray-700 a-bg-indigo-100 a-p-2 a-rounded";
+    };
+    function submit() {
+        setMessages([...messages, { type: "command", text: prompt }]);
+        setPrompt("");
+        setResponse("...");
+        commandHandler(prompt, callback);
+    }
+    return (_jsxs("div", { className: "a-flex a-flex-col a-h-full", children: [_jsxs("div", { className: "a-p-1 a-border-b a-border-gray-200 a-flex a-justify-between a-gap-2 a-text-xs a-items-center", children: [_jsx("button", { onClick: () => {
+                            setMessages([]);
+                            onReset();
+                        }, children: _jsx("i", { className: "pi pi-trash a-text-xs" }) }), toolbar] }), _jsx("div", { className: "a-overflow-y-auto a-h-full a-overflow-x-hidden a-p-2", children: _jsxs("div", { className: "a-flex a-flex-col a-gap-3 a-items-end", children: [messages.map((m, i) => (_jsx("div", { className: getClasses(m), children: m.text }, i))), response != null && (_jsx("div", { className: responseBoxClasses, children: _jsxs("div", { className: "a-flex a-text-xs", children: [_jsxs("div", { className: "a-text-xs a-mr-4", children: [_jsx("i", { className: "pi pi-spin pi-spinner" }), " "] }), response] }) })), _jsx("div", { ref: bottomRef })] }) }), _jsxs("div", { className: "a-flex a-flex-col a-p-1 a-pb-0", children: [infobar, _jsx(InputTextarea, { ref: inputRef, value: prompt, className: "a-border-gray-300 a-border a-rounded a-flex-1 a-text-xs a-resize-none a-self-stretch", onKeyDown: handleKeyPress, onChange: (e) => setPrompt(e.target.value), rows: 2, cols: 30 }), _jsxs("div", { className: "a-flex a-justify-between a-items-center", children: [_jsx("div", { children: statusbar }), _jsx(Button, { icon: "pi pi-send", text: true, size: "small", onClick: submit, disabled: prompt.length === 0 })] })] })] }));
+}

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

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

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

@@ -0,0 +1,20 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { AiToolCall } from "./AiToolCall";
+import { useEditContext } from "../editContext";
+export function AiResponseMessage({ responseText, toolcalls, editOperations, }) {
+    const editContext = useEditContext();
+    if (!editContext)
+        return _jsx(_Fragment, {});
+    const [showFunctions, setShowFunctions] = useState(false);
+    const [changesRejected, setChangesRejected] = useState(undefined);
+    const reversedEditOperations = [...editOperations].reverse();
+    const canReject = editContext.editHistory.length > editOperations.length &&
+        reversedEditOperations.find((x, index) => editContext.editHistory[index].id !== x.id) === undefined;
+    return (_jsxs("div", { children: [_jsx("div", { dangerouslySetInnerHTML: {
+                    __html: responseText.replaceAll("\\n", "<br>"),
+                } }), toolcalls.length > 0 && (_jsxs("div", { className: "a-text-xs a-text-gray-400  a-cursor-pointer a-flex a-items-center a-gap-1 a-mt-1", onClick: () => setShowFunctions(!showFunctions), children: [_jsx("i", { className: "pi pi-wrench a-text-xs" }), " Tool calls"] })), showFunctions && (_jsx("div", { className: "a-text-xs a-text-gray-400", children: toolcalls.map((x, index) => (_jsx(AiToolCall, { toolCall: x }, index))) })), editOperations.length > 0 && (_jsxs("div", { className: "a-flex a-gap-2 a-my-2 a-items-center", children: [_jsxs("div", { className: "a-text-xs", children: [editOperations.length, " changes"] }), canReject && !changesRejected && (_jsxs("div", { className: "a-text-xs a-text-red-500  a-cursor-pointer a-flex a-items-center a-gap-1", onClick: () => {
+                            editContext === null || editContext === void 0 ? void 0 : editContext.undo(editOperations.length);
+                            setChangesRejected(true);
+                        }, children: [_jsx("i", { className: "pi pi-times" }), " Reject"] })), changesRejected && (_jsx("div", { className: "a-text-xs a-text-red-500", children: "rejected" }))] }))] }));
+}