@alpaca-headless/alpaca-headless-nextjs 0.0.4 → 1.0.19

package/dist/cjs/editor/EditFrame.js

@@ -0,0 +1,61 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditFrame = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const __1 = require("..");
+function EditFrame({ componentId, children, }) {
+    var _a, _b;
+    const editContext = (0, __1.useEditContext)();
+    if (!editContext)
+        return children;
+    const { getComponentById, selection, setSelection } = editContext;
+    const [isRemoved, setIsRemoved] = (0, react_1.useState)(false);
+    const clientComponent = getComponentById(componentId);
+    if (!clientComponent) {
+        return children;
+    }
+    function select(e) {
+        e.stopPropagation();
+        if (clientComponent)
+            setSelection([clientComponent.id]);
+    }
+    let classNames = "ap-editframe";
+    let color = clientComponent.linkItemId ? "orange-400" : "sky-400";
+    if (clientComponent.hostingPageItem)
+        color = "purple-400";
+    const isSelected = selection && selection.indexOf(clientComponent.id) >= 0;
+    if (isSelected)
+        classNames = `ap-editframe a-relative a-ring-2 a-ring-${color}`;
+    function handleDragStart(event) {
+        if (!clientComponent)
+            return;
+        event.dataTransfer.setData("text/plain", clientComponent.id);
+        event.dataTransfer.setData("alpaca", clientComponent.id);
+        setTimeout(() => {
+            editContext.dragStart({
+                type: "component",
+                templateId: clientComponent.templateId,
+                componentId: clientComponent.id,
+            });
+        }, 50);
+        event.stopPropagation();
+    }
+    const isDraggable = isSelected && !clientComponent.hostingPageItem;
+    if ((_a = children.props) === null || _a === void 0 ? void 0 : _a.className)
+        classNames += " " + ((_b = children === null || children === void 0 ? void 0 : children.props) === null || _b === void 0 ? void 0 : _b.className);
+    if (isRemoved)
+        classNames += " ap-removed";
+    return ((0, jsx_runtime_1.jsxs)("div", { className: classNames, onClick: select, draggable: isDraggable, onDragStart: handleDragStart, children: [isSelected && ((0, jsx_runtime_1.jsxs)("div", { className: `a-absolute a-top-0 a-right-0 a-text-white a-px-3 a-bg-${color} ${isDraggable ? "a-cursor-move" : ""}`, children: [clientComponent.name, (0, jsx_runtime_1.jsx)("button", { className: "a-ml-3", onClick: (ev) => {
+                            ev.preventDefault();
+                            ev.stopPropagation();
+                            editContext.removeComponent(clientComponent.linkItemId || clientComponent.id, () => setIsRemoved(true));
+                        }, children: (0, jsx_runtime_1.jsx)("i", { className: "pi pi-trash" }) }), clientComponent.placeholders.length > 0 && ((0, jsx_runtime_1.jsx)("button", { className: "a-ml-3", onClick: (ev) => {
+                            editContext.setSelectedForInsertion(clientComponent.id);
+                            editContext.openComponentPalette();
+                            ev.stopPropagation();
+                            ev.preventDefault();
+                        }, children: (0, jsx_runtime_1.jsx)("i", { className: "pi pi-plus" }) }))] })), children] }));
+}
+exports.EditFrame = EditFrame;

package/dist/cjs/editor/EditHistory.js

@@ -0,0 +1,30 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditHistory = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function EditHistory({ operations }) {
+    if (!operations)
+        return;
+    const description = (op) => {
+        if (op.type === "add-component")
+            return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Add ", op.itemName] });
+        if (op.type === "link-component")
+            return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Insert ", op.itemName] });
+        if (op.type === "remove-component")
+            return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Remove ", op.id] });
+        if (op.type === "edit-field") {
+            const editFieldOp = op;
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Edit ", editFieldOp.fieldName, (0, jsx_runtime_1.jsxs)("span", { className: "a-text-gray-400 a-ml-1", children: ["(", editFieldOp.itemName, ", ", editFieldOp.language, ",", " ", editFieldOp.version, ")"] })] }));
+        }
+        return (0, jsx_runtime_1.jsx)("div", { children: op.type });
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "a-inset-0 a-absolute", children: [(0, jsx_runtime_1.jsx)("div", { className: "a-p-2 a-bg-gray-100 a-m-1", children: "History" }), (0, jsx_runtime_1.jsx)("div", { className: "a-flex a-flex-col a-overflow-y-auto a-overflow-x-hidden", style: { height: "calc(100% - 45px)" }, children: operations.map((o, i) => singleOperation(i, o)) })] }));
+    function singleOperation(i, o) {
+        let className = "a-border-b a-p-2 a-flex a-justify-between";
+        if (o.undone)
+            className = className + " a-text-gray-300";
+        return ((0, jsx_runtime_1.jsxs)("div", { className: className, children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("small", { className: "a-text-color-secondary", children: description(o) }) }), (0, jsx_runtime_1.jsx)("div", { className: "a-text-xs", children: o.user })] }, i));
+    }
+}
+exports.EditHistory = EditHistory;

package/dist/cjs/editor/Editor.js

@@ -0,0 +1,27 @@
+"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());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Editor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const __1 = require("..");
+const EditorClientHost_1 = require("./EditorClientHost");
+function Editor({ children, content, }) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const data = yield content;
+        if (data.type !== "page")
+            return;
+        if (!data.editing)
+            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
+        var alpacaContext = (0, __1.useAlpacaContext)();
+        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(EditorClientHost_1.EditorClientHost, { content: data, dictionaryObject: alpacaContext.dictionary, edit: alpacaContext.edit, children: children }) }));
+    });
+}
+exports.Editor = Editor;

package/dist/cjs/editor/EditorClient.js

@@ -0,0 +1,460 @@
+"use strict";
+"use client";
+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.EditorClient = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_uuid_1 = __importDefault(require("react-uuid"));
+const api_1 = require("primereact/api");
+const menubar_1 = require("primereact/menubar");
+const progressspinner_1 = require("primereact/progressspinner");
+const tabview_1 = require("primereact/tabview");
+const toast_1 = require("primereact/toast");
+const splitter_1 = require("primereact/splitter");
+const blockui_1 = require("primereact/blockui");
+const confirmdialog_1 = require("primereact/confirmdialog");
+const sidebar_1 = require("primereact/sidebar");
+const __1 = require("..");
+const navigation_1 = require("next/navigation");
+const FieldList_1 = require("./FieldList");
+const GraphQL_1 = require("./GraphQL");
+const ComponentTree_1 = require("./ComponentTree");
+const ComponentInfo_1 = require("./ComponentInfo");
+const LanguageSelector_1 = require("./LanguageSelector");
+const componentTreeHelper_1 = require("./componentTreeHelper");
+const ComponentPalette_1 = require("./ComponentPalette");
+const DictionaryEditor_1 = require("./DictionaryEditor");
+const AiTerminal_1 = require("./AiTerminal");
+const EditHistory_1 = require("./EditHistory");
+const Debug_1 = require("./Debug");
+const PageInfo_1 = require("./PageInfo");
+const VersionSelector_1 = require("./VersionSelector");
+const editService_1 = require("./editService");
+require("../../editor.css");
+require("../../primereact/resources/primereact.min.css");
+require("../../primeicons/primeicons.css");
+require("../../primereact/resources/themes/lara-light-indigo/theme.css");
+// Hook
+function useEventListener(eventName, handler, element) {
+    // Create a ref that stores handler
+    const savedHandler = (0, react_1.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_1.useEffect)(() => {
+        savedHandler.current = handler;
+    }, [handler]);
+    (0, react_1.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
+    );
+}
+function EditorClient({ content, dictionaryObject, edit, children, }) {
+    const router = (0, navigation_1.useRouter)();
+    const pathname = (0, navigation_1.usePathname)();
+    const searchParams = (0, navigation_1.useSearchParams)();
+    const [selection, setSelection] = (0, react_1.useState)([]);
+    const [selectedForInsertion, setSelectedForInsertion] = (0, react_1.useState)("");
+    const [currentEditOperation, setCurrentEditOperation] = (0, react_1.useState)();
+    const [dictionary, setDictionary] = (0, react_1.useState)(dictionaryObject);
+    const [unresolvedDictionaryKeys, setUnresolvedDictionaryKeys] = (0, react_1.useState)([]);
+    const [editData, setEditData] = (0, react_1.useState)(edit);
+    const [refreshCompletedFlag, setRefreshCompletedFlag] = (0, react_1.useState)(false);
+    const [updateContentEditingFields, setUpdateContentEditingFields] = (0, react_1.useState)(false);
+    const [page, setPageData] = (0, react_1.useState)(null);
+    const [uiBlocked, setUiBlocked] = (0, react_1.useState)(false);
+    const [componentsPaletteVisible, setComponentsPaletteVisible] = (0, react_1.useState)(false);
+    const [dragObject, setDragObject] = (0, react_1.useState)();
+    const [hidePalette, setHidePalette] = (0, react_1.useState)(false);
+    const [refreshTimer, setRefreshTimer] = (0, react_1.useState)();
+    const sessionId = searchParams.get("session");
+    if (!sessionId)
+        return;
+    function switchLanguage(language) {
+        const current = new URLSearchParams(Array.from(searchParams.entries()));
+        current.set("language", language);
+        const newUrl = `${pathname}?${current.toString()}`;
+        router.replace(newUrl, { scroll: false });
+    }
+    function switchVersion(version) {
+        const current = new URLSearchParams(Array.from(searchParams.entries()));
+        current.set("version", version.toString());
+        const newUrl = `${pathname}?${current.toString()}`;
+        router.replace(newUrl, { scroll: false });
+    }
+    function handleErrorResult(result) {
+        if (result.type === "error") {
+            showErrorToast(result);
+            return true;
+        }
+        if (result.type === "unauthenticated") {
+            (0, confirmdialog_1.confirmDialog)({
+                header: "Not logged in",
+                message: "You are not logged in anymore. Proceed to login page?",
+                accept: () => {
+                    window.location.href = edit.loginUrl;
+                },
+            });
+            showErrorToast(result);
+            return true;
+        }
+    }
+    (0, react_1.useEffect)(() => {
+        if (selection.length)
+            setSelectedForInsertion("");
+    }, [selection]);
+    (0, react_1.useEffect)(() => {
+        const sync = () => __awaiter(this, void 0, void 0, function* () {
+            if (currentEditOperation) {
+                const result = yield (0, editService_1.executeEditOperation)(currentEditOperation, sessionId);
+                if (handleErrorResult(result))
+                    return;
+                if ((result.id && edit.operations.length == 0) ||
+                    edit.operations[edit.operations.length - 1].id !=
+                        result.id) {
+                    edit.operations = edit.operations.filter((x) => !x.undone);
+                    edit.operations.push(result);
+                    setEditData(Object.assign({}, edit));
+                }
+                if (result.type === "add-component" ||
+                    result.type === "link-component") {
+                    console.log("CURRENT: " + JSON.stringify(result));
+                    setSelection([result.componentId]);
+                }
+                if (!currentEditOperation.noRefresh)
+                    requestRefresh(currentEditOperation.refreshAfterQuietPeriod);
+            }
+        });
+        sync();
+    }, [currentEditOperation]);
+    const requestRefresh = (waitForQuietPeriod) => {
+        console.log("request refresh with " + waitForQuietPeriod);
+        if (waitForQuietPeriod && refreshTimer) {
+            clearTimeout(refreshTimer);
+        }
+        if (!refreshTimer || waitForQuietPeriod) {
+            setRefreshTimer(setTimeout(() => {
+                console.log("refreshing");
+                router.refresh();
+                setRefreshCompletedFlag(!refreshCompletedFlag);
+                setRefreshTimer(undefined);
+            }, waitForQuietPeriod ? 2000 : 1000));
+        }
+    };
+    const saveAndRefresh = (callback) => __awaiter(this, void 0, void 0, function* () {
+        if (!edit.operations.length) {
+            if (callback)
+                callback();
+            return;
+        }
+        setUiBlocked(true);
+        if (!(yield (0, editService_1.commitChanges)(sessionId))) {
+            setUiBlocked(false);
+            return;
+        }
+        router.refresh();
+        //setEditOperations([]);
+        setUiBlocked(false);
+        toast.current.show({
+            severity: "success",
+            summary: "Saved",
+            detail: "Your changes were saved successfully.",
+            life: 3000,
+        });
+        if (callback)
+            callback();
+    });
+    // function ensureSaved(callback: () => void) {
+    //   if (!edit.operations.length) {
+    //     callback();
+    //     return;
+    //   }
+    //   confirmDialog({
+    //     message: "Save changes?",
+    //     header: "Save changes?",
+    //     icon: "pi pi-exclamation-triangle",
+    //     accept: () => saveAndRefresh(callback),
+    //     reject: callback,
+    //   });
+    // }
+    function handleKeyDown(event) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (event.ctrlKey && event.key === "s") {
+                event.preventDefault();
+                yield saveAndRefresh();
+            }
+            if (event.ctrlKey && event.key === "z") {
+                event.preventDefault();
+                yield undo();
+            }
+            if (event.ctrlKey && event.key === "y") {
+                event.preventDefault();
+                yield redo();
+            }
+        });
+    }
+    if (typeof window !== "undefined")
+        useEventListener("keydown", handleKeyDown, window);
+    const toast = (0, react_1.useRef)();
+    (0, react_1.useEffect)(() => {
+        setPageData(content);
+    }, [content]);
+    (0, react_1.useEffect)(() => {
+        setEditData(edit);
+    }, [edit]);
+    function getComponentById(id) {
+        if (!page)
+            return null;
+        return (0, componentTreeHelper_1.findComponent)(id, page.placeholders);
+    }
+    function redo() {
+        return __awaiter(this, void 0, void 0, function* () {
+            setUpdateContentEditingFields(!updateContentEditingFields);
+            let result = yield (0, editService_1.executeRedo)(sessionId);
+            if (result.type === "success") {
+                router.refresh();
+                return true;
+            }
+            else {
+                showErrorToast(result);
+                return false;
+            }
+        });
+    }
+    function showErrorToast(result) {
+        toast.current.show({
+            severity: "error",
+            summary: result.summary,
+            detail: result.details,
+            life: 3000,
+        });
+    }
+    function undo() {
+        return __awaiter(this, void 0, void 0, function* () {
+            setUpdateContentEditingFields(!updateContentEditingFields);
+            let result = yield (0, editService_1.executeUndo)(sessionId);
+            if (result.type === "success") {
+                router.refresh();
+                return true;
+            }
+            else {
+                showErrorToast(result);
+                return false;
+            }
+        });
+    }
+    const selectedComponent = selection.length === 1 && page ? getComponentById(selection[0]) : null;
+    const editField = (field, value, noRefresh = true) => {
+        var _a;
+        if (!page)
+            return;
+        const component = (0, componentTreeHelper_1.findComponent)(field.itemId, page.placeholders);
+        let op = editService_1.currentOperation;
+        if (!op ||
+            op.type !== "edit-field" ||
+            op.itemId !== field.itemId ||
+            op.fieldId !== field.id ||
+            op.language !== field.language ||
+            op.version !== field.version) {
+            op = {
+                type: "edit-field",
+                itemId: field.itemId,
+                fieldId: field.id,
+                version: field.version,
+                language: field.language,
+                fieldName: field.name,
+                itemName: field.itemId == page.id ? "Page" : (_a = component === null || component === void 0 ? void 0 : component.name) !== null && _a !== void 0 ? _a : "<unknown>",
+                pageItemId: page.id,
+                pageItemLanguage: page.language,
+                pageItemVersion: page.version,
+                date: new Date(),
+                id: (0, react_uuid_1.default)(),
+            };
+        }
+        op.date = new Date();
+        op.noRefresh = noRefresh;
+        op.refreshAfterQuietPeriod = !noRefresh;
+        op.value = value;
+        function getField(fields, id) {
+            return Object.values(fields).find((f) => f.id === id);
+        }
+        if (component) {
+            const f = getField(component.fields, field.id);
+            if (f && f.value != value) {
+                f.value = value;
+            }
+        }
+        else {
+            const f = getField(page.fields, field.id);
+            if (f && f.value != value)
+                f.value = value;
+        }
+        (0, editService_1.setCurrentOperation)(op);
+        setCurrentEditOperation(Object.assign({}, op));
+    };
+    const menuItems = [
+        {
+            label: "Save",
+            icon: "pi pi-fw pi-save text-red",
+            command: () => saveAndRefresh(),
+        },
+        {
+            label: "Insert",
+            icon: "pi pi-fw pi-sitemap",
+            command: () => setComponentsPaletteVisible(true),
+        },
+    ];
+    const spinner = (0, jsx_runtime_1.jsx)(progressspinner_1.ProgressSpinner, {});
+    const endContent = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(LanguageSelector_1.LanguageSelector, { page: page, onLanguageSelected: (language) => {
+                    if (!language)
+                        return;
+                    //ensureSaved(() => switchLanguage(language));
+                    switchLanguage(language);
+                } }), (0, jsx_runtime_1.jsx)(VersionSelector_1.VersionSelector, { page: page, onVersionSelected: (version) => {
+                    switchVersion(version);
+                } })] }));
+    return ((0, jsx_runtime_1.jsxs)(__1.EditContextProvider, { value: {
+            sessionId: sessionId,
+            selection,
+            setSelection,
+            selectedForInsertion,
+            setSelectedForInsertion,
+            editField,
+            getComponentById,
+            dragObject,
+            dictionary,
+            setDictionary,
+            refreshCompletedFlag,
+            unresolvedDictionaryKeys,
+            setUnresolvedDictionaryKeys,
+            updateContentEditingFields,
+            showToast: () => { },
+            removeComponent: (componentId, callback) => {
+                (0, confirmdialog_1.confirmDialog)({
+                    message: "Are you sure you want to remove this component?",
+                    header: "Remove component",
+                    icon: "pi pi-exclamation-triangle",
+                    accept: () => {
+                        var _a;
+                        const op = {
+                            type: "remove-component",
+                            date: new Date(),
+                            id: (0, react_uuid_1.default)(),
+                            pageItemId: page.id,
+                            pageItemLanguage: page.language,
+                            pageItemVersion: page.version,
+                            componentId,
+                            componentName: (_a = getComponentById(componentId)) === null || _a === void 0 ? void 0 : _a.name,
+                        };
+                        setCurrentEditOperation(op);
+                        callback(true);
+                    },
+                });
+            },
+            openComponentPalette: () => setComponentsPaletteVisible(true),
+            dragStart: (dragObject) => {
+                console.log("dragging " + JSON.stringify(dragObject));
+                setDragObject(dragObject);
+            },
+            droppedInPlaceholder: (placeholderKey, index) => __awaiter(this, void 0, void 0, function* () {
+                if (!dragObject)
+                    return;
+                console.log(dragObject.templateId +
+                    " dropped in " +
+                    placeholderKey +
+                    " " +
+                    index);
+                // console.log(JSON.stringify(page));
+                const placeholderKeyComponents = placeholderKey.split("_");
+                const parentId = placeholderKeyComponents.length === 1
+                    ? null
+                    : placeholderKeyComponents[0];
+                const placeholderName = placeholderKeyComponents.length === 1
+                    ? placeholderKeyComponents[0]
+                    : placeholderKeyComponents[1];
+                let op;
+                if (dragObject.type == "template") {
+                    op = {
+                        type: "add-component",
+                        pageItemId: page.id,
+                        pageItemLanguage: page.language,
+                        pageItemVersion: page.version,
+                        parentItemId: parentId,
+                        placeholderName: placeholderName,
+                        placeholderIndex: index,
+                        templateId: dragObject === null || dragObject === void 0 ? void 0 : dragObject.templateId,
+                        date: new Date(),
+                        id: (0, react_uuid_1.default)(),
+                    };
+                }
+                if (dragObject.type == "component" ||
+                    (dragObject.type == "link-component" && dragObject.componentId)) {
+                    op = {
+                        type: dragObject.type == "link-component"
+                            ? "link-component"
+                            : "move-component",
+                        pageItemId: page.id,
+                        pageItemLanguage: page.language,
+                        pageItemVersion: page.version,
+                        parentItemId: parentId,
+                        placeholderName: placeholderName,
+                        placeholderIndex: index,
+                        componentId: dragObject.componentId,
+                        date: new Date(),
+                        id: (0, react_uuid_1.default)(),
+                    };
+                }
+                //const newOps = [...editOperations, op];
+                //setEditOperations();
+                // await sendEditOperationsToServer(newOps as EditOperation[]);
+                // router.refresh();
+                //setEditOperations(newOps);
+                if (op)
+                    setCurrentEditOperation(op);
+                setDragObject(undefined);
+            }),
+        }, children: [(0, jsx_runtime_1.jsx)(toast_1.Toast, { ref: toast }), (0, jsx_runtime_1.jsxs)(api_1.PrimeReactProvider, { children: [(0, jsx_runtime_1.jsx)(confirmdialog_1.ConfirmDialog, {}), (0, jsx_runtime_1.jsx)(sidebar_1.Sidebar, { style: { width: "40%" }, visible: componentsPaletteVisible, position: "right", onHide: () => setComponentsPaletteVisible(false), pt: {
+                            mask: {
+                                onDragOver: () => setHidePalette(true),
+                                style: {
+                                    left: hidePalette || !componentsPaletteVisible ? "100vw" : 0,
+                                },
+                            },
+                        }, children: page && ((0, jsx_runtime_1.jsx)(ComponentPalette_1.ComponentPalette, { page: page, selection: selection, dragStart: (dragObject) => {
+                                //console.log("dragging " + JSON.stringify(dragObject));
+                                setDragObject(dragObject);
+                            }, dragEnd: () => {
+                                setDragObject(undefined);
+                                if (hidePalette) {
+                                    setComponentsPaletteVisible(false);
+                                    setHidePalette(false);
+                                }
+                                setSelectedForInsertion("");
+                            } })) }), (0, jsx_runtime_1.jsxs)(blockui_1.BlockUI, { blocked: uiBlocked, template: spinner, children: [(0, jsx_runtime_1.jsx)(menubar_1.Menubar, { model: menuItems, end: endContent }), (0, jsx_runtime_1.jsxs)(splitter_1.Splitter, { children: [(0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { size: 25, className: "alpaca-overflow-scroll", children: (0, jsx_runtime_1.jsxs)(splitter_1.Splitter, { layout: "vertical", children: [(0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { className: "a-overflow-hidden a-relative", children: (0, jsx_runtime_1.jsx)("div", { className: "a-inset-0 a-absolute a-overflow-y-auto", children: (0, jsx_runtime_1.jsx)(ComponentTree_1.ComponentTree, { page: page, selection: selection }) }) }), (0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { className: "alpaca-editor-tabs", children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, { className: "a-inset-0 a-absolute", scrollable: true, children: [selectedComponent && ((0, jsx_runtime_1.jsxs)(tabview_1.TabPanel, { header: "Fields", children: [(0, jsx_runtime_1.jsx)(ComponentInfo_1.ComponentInfo, { component: selectedComponent }), (0, jsx_runtime_1.jsx)(FieldList_1.FieldList, { fields: selectedComponent.fields })] })), selectedComponent && ((0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "GraphQL", style: { height: "100%" }, children: (0, jsx_runtime_1.jsx)(GraphQL_1.GraphQL, { component: selectedComponent }) })), (0, jsx_runtime_1.jsxs)(tabview_1.TabPanel, { header: "Page", children: [page && (0, jsx_runtime_1.jsx)(PageInfo_1.PageInfo, { page: page }), page && (0, jsx_runtime_1.jsx)(FieldList_1.FieldList, { fields: page.fields })] }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Dictionary", children: (0, jsx_runtime_1.jsx)(DictionaryEditor_1.DictionaryEditor, { dictionary: dictionary }) }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Debug", children: (0, jsx_runtime_1.jsx)(Debug_1.Debug, { component: selectedComponent, page: page }) })] }) })] }) }), (0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { size: 55, className: "alpaca-overflow-scroll alpaca-editor-content", children: (0, jsx_runtime_1.jsx)("div", { onDragEndCapture: () => setDragObject(undefined), className: "alpaca-editor-container", children: children }) }), (0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { size: 20, children: (0, jsx_runtime_1.jsxs)(splitter_1.Splitter, { layout: "vertical", className: "alpaca-editor", children: [(0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { className: "overflow-hidden a-relative", children: (0, jsx_runtime_1.jsx)(EditHistory_1.EditHistory, { operations: editData === null || editData === void 0 ? void 0 : editData.operations }) }), (0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { className: "overflow-hidden a-relative", children: (0, jsx_runtime_1.jsx)(AiTerminal_1.AiTerminal, { selection: selection, requestRefresh: requestRefresh }) })] }) })] })] })] })] }));
+}
+exports.EditorClient = EditorClient;

package/dist/cjs/editor/EditorClientHost.js

@@ -0,0 +1,37 @@
+"use strict";
+"use client";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditorClientHost = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const dynamic_1 = __importDefault(require("next/dynamic"));
+const EditorClient = (0, dynamic_1.default)(() => Promise.resolve().then(() => __importStar(require("./EditorClient"))).then((dnd) => dnd.EditorClient), { ssr: false });
+function EditorClientHost({ content, dictionaryObject, children, edit, }) {
+    return ((0, jsx_runtime_1.jsx)(EditorClient, { content: content, dictionaryObject: dictionaryObject, edit: edit, children: children }));
+}
+exports.EditorClientHost = EditorClientHost;