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

package/dist/cjs/editor/FieldList.js

@@ -0,0 +1,59 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldList = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const inputtext_1 = require("primereact/inputtext");
+const checkbox_1 = require("primereact/checkbox");
+const SingleLineText_1 = require("./fieldTypes/SingleLineText");
+const RichTextEditor_1 = require("./fieldTypes/RichTextEditor");
+function FieldList({ fields }) {
+    if (!fields)
+        return;
+    if (!Array.isArray(fields))
+        fields = Object.values(fields);
+    const sections = fields.reduce((acc, value) => {
+        // Group initialization
+        if (!acc[value.section || "Default"]) {
+            acc[value.section || "Default"] = [];
+        }
+        // Grouping
+        acc[value.section || "Default"].push(value);
+        return acc;
+    }, {});
+    const sectionList = Object.values(sections);
+    sectionList.sort((a, b) => b[0].sortOrder - a[0].sortOrder);
+    return ((0, jsx_runtime_1.jsx)("div", { className: "a-p-1", children: Object.keys(sections).map((section) => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "alpaca-fields-section-headline", children: section }), getSectionFields(sections[section])] }, section))) }));
+}
+exports.FieldList = FieldList;
+function getSectionFields(fields) {
+    return fields.map((field) => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "alpaca-field-label", children: field.name }), !field.containsFallbackValue ? ((0, jsx_runtime_1.jsx)("button", { className: "a-text-xs a-p-0 a-m-1", children: "Reset " })) : ((0, jsx_runtime_1.jsx)("button", { children: "Fallback" })), (0, jsx_runtime_1.jsx)("div", { children: getFieldEditor(field) })] }, field.id)));
+}
+function getFieldEditor(field) {
+    switch (field.type) {
+        case "checkbox":
+            return checkbox(field);
+        case "picture":
+            return picture(field);
+        case "image":
+            return image(field);
+        case "rich text":
+            return (0, jsx_runtime_1.jsx)(RichTextEditor_1.RichTextEditor, { field: field });
+        default:
+            return (0, jsx_runtime_1.jsx)(SingleLineText_1.SingleLineText, { field: field });
+    }
+}
+function checkbox(field) {
+    return (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: field.value === "1" });
+}
+// function singleLineText(field: Field) {
+//   return <InputText value={field.value as string} />;
+// }
+function picture(field) {
+    var _a, _b;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("label", { className: "alpaca-minor-label", children: "Alt" }), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { value: (_b = (_a = field.value) === null || _a === void 0 ? void 0 : _a.alt) !== null && _b !== void 0 ? _b : "" })] }));
+}
+function image(field) {
+    var _a, _b;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("label", { className: "alpaca-minor-label", children: "Alt" }), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { value: (_b = (_a = field.value) === null || _a === void 0 ? void 0 : _a.altText) !== null && _b !== void 0 ? _b : "" })] }));
+}

package/dist/cjs/editor/GraphQL.js

@@ -0,0 +1,90 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GraphQL = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const __1 = require("..");
+const react_json_pretty_1 = __importDefault(require("react-json-pretty"));
+require("react-json-pretty/themes/monikai.css");
+const tabview_1 = require("primereact/tabview");
+const FieldList_1 = require("./FieldList");
+const splitter_1 = require("primereact/splitter");
+const inputtextarea_1 = require("primereact/inputtextarea");
+const button_1 = require("primereact/button");
+const react_1 = require("react");
+const graphql_formatter_1 = require("graphql-formatter");
+function GraphQL({ component }) {
+    const editContext = (0, __1.useEditContext)();
+    const [query, setQuery] = (0, react_1.useState)("");
+    const [showSpinner, setShowSpinner] = (0, react_1.useState)(false);
+    if (!component)
+        return;
+    (0, react_1.useEffect)(() => {
+        setQuery(component.graphql_query);
+    }, [component.graphql_query]);
+    (0, react_1.useEffect)(() => {
+        setShowSpinner(false);
+    }, [editContext === null || editContext === void 0 ? void 0 : editContext.refreshCompletedFlag]);
+    function findFields(json) {
+        let result = {};
+        for (let key in json) {
+            if (typeof json[key] === "object" && json[key] !== null) {
+                let subResult = findFields(json[key]);
+                for (let subKey in subResult) {
+                    if (result[subKey]) {
+                        result[subKey] = result[subKey].concat(subResult[subKey]);
+                    }
+                    else {
+                        result[subKey] = subResult[subKey];
+                    }
+                }
+            }
+            if (key === "jsonValue") {
+                let groupKey = `${json[key].itemId}_${json[key].language}_${json[key].version}`;
+                if (result[groupKey]) {
+                    result[groupKey].push(json[key]);
+                }
+                else {
+                    result[groupKey] = [json[key]];
+                }
+            }
+        }
+        return result;
+    }
+    const fieldsjsonValues = findFields(component.graphql);
+    function renderItem(fields) {
+        const first = fields[0];
+        return ((0, jsx_runtime_1.jsxs)("div", { children: ["Item: ", first.path, " ", first.id, " ", first.language, " ", first.version, (0, jsx_runtime_1.jsx)(FieldList_1.FieldList, { fields: fields })] }, first.path + first.id + first.language + first.version));
+    }
+    function refresh() {
+        var _a, _b;
+        if (!component)
+            return;
+        let language = ((_a = component.hostingPageItem) === null || _a === void 0 ? void 0 : _a.language) || "en";
+        let version = ((_b = component.hostingPageItem) === null || _b === void 0 ? void 0 : _b.version) || 0;
+        if (component.linkedComponentItem) {
+            language = component.linkedComponentItem.language;
+            version = component.linkedComponentItem.version;
+        }
+        const field = {
+            name: "_GraphQL",
+            itemId: component === null || component === void 0 ? void 0 : component.id,
+            language: language,
+            version: version,
+            path: "graphql",
+            id: "3622F861-ECA9-45D7-8DA7-2CDA35235002",
+            value: query,
+            type: "jsonValue",
+        };
+        const prettyQuery = (0, graphql_formatter_1.format)(query);
+        console.log(query);
+        console.log(prettyQuery);
+        setQuery(prettyQuery);
+        editContext === null || editContext === void 0 ? void 0 : editContext.editField(field, prettyQuery, false);
+        setShowSpinner(true);
+    }
+    return ((0, jsx_runtime_1.jsxs)(splitter_1.Splitter, { layout: "vertical", style: { height: "100%" }, children: [(0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { size: 50, className: "a-relative", children: (0, jsx_runtime_1.jsxs)("div", { className: "a-absolute a-inset-0 a-flex", children: [(0, jsx_runtime_1.jsx)(inputtextarea_1.InputTextarea, { value: query, onChange: (e) => setQuery(e.target.value), className: "a-flex-1", style: { height: "100%" } }), (0, jsx_runtime_1.jsx)(button_1.Button, { icon: "pi pi-refresh" + (showSpinner ? " pi-spin" : ""), onClick: refresh, disabled: showSpinner })] }) }), (0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { className: "alpaca-editor-tabs", children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, { className: "a-inset-0 absolute", children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Data", style: { height: "100%" }, className: "a-relative", children: (0, jsx_runtime_1.jsx)("div", { className: "a-m-1", children: Object.values(fieldsjsonValues).map((x) => renderItem(x)) }) }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "JSON", className: "a-relative", style: { height: "100%" }, children: (0, jsx_runtime_1.jsx)("div", { className: "a-inset-0 a-absolute a-overflow-y-auto", children: (0, jsx_runtime_1.jsx)(react_json_pretty_1.default, { data: component.graphql }) }) })] }) })] }));
+}
+exports.GraphQL = GraphQL;

package/dist/cjs/editor/LanguageSelector.js

@@ -0,0 +1,21 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LanguageSelector = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const dropdown_1 = require("primereact/dropdown");
+function LanguageSelector({ page, onLanguageSelected, }) {
+    if (page == null)
+        return;
+    const selectedCountryTemplate = (option, props) => {
+        if (option) {
+            return (0, jsx_runtime_1.jsx)("div", { children: option.name });
+        }
+        return (0, jsx_runtime_1.jsx)("span", { children: props.placeholder });
+    };
+    const countryOptionTemplate = (option) => {
+        return ((0, jsx_runtime_1.jsxs)("div", { children: [option.name, " (", option.versions, ")"] }));
+    };
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: page.language, onChange: (e) => onLanguageSelected(e.value), options: page.languages, optionValue: "languageCode", optionLabel: "name", placeholder: "Select a language", filter: true, valueTemplate: selectedCountryTemplate, itemTemplate: countryOptionTemplate }) }));
+}
+exports.LanguageSelector = LanguageSelector;

package/dist/cjs/editor/MediaSelector.js

@@ -0,0 +1,61 @@
+"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.MediaSelector = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const sidebar_1 = require("primereact/sidebar");
+const ContentTree_1 = __importDefault(require("./ContentTree"));
+const splitter_1 = require("primereact/splitter");
+const react_1 = require("react");
+const contentService_1 = require("./contentService");
+const editContext_1 = require("./editContext");
+const button_1 = require("primereact/button");
+const MediaSelector = ({ visible, onHide, onMediaSelected, }) => {
+    const [selectedFolderId, setSelectedFolderId] = (0, react_1.useState)();
+    const [images, setImages] = (0, react_1.useState)();
+    const [selectedImage, setSelectedImage] = (0, react_1.useState)();
+    const selection = selectedFolderId ? [selectedFolderId] : [];
+    const editContext = (0, editContext_1.useEditContext)();
+    (0, react_1.useEffect)(() => {
+        loadThumbnails(selectedFolderId);
+    }, [selectedFolderId]);
+    function loadThumbnails(selectedFolderId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!selectedFolderId)
+                setImages([]);
+            else {
+                const children = yield (0, contentService_1.getChildren)(selectedFolderId, editContext.sessionId, [
+                    "C97BA923-8009-4858-BDD5-D8BE5FCCECF7",
+                    "F1828A2C-7E5D-4BBD-98CA-320474871548",
+                ]);
+                setImages(children);
+            }
+        });
+    }
+    return ((0, jsx_runtime_1.jsx)(sidebar_1.Sidebar, { style: { width: "60%" }, position: "right", visible: visible, onHide: onHide, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col h-full", children: [(0, jsx_runtime_1.jsxs)(splitter_1.Splitter, { className: "flex-1 border-0", children: [(0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { size: 35, className: "alpaca-overflow-scroll", children: (0, jsx_runtime_1.jsxs)(splitter_1.Splitter, { layout: "vertical", children: [(0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { size: 70, children: (0, jsx_runtime_1.jsx)(ContentTree_1.default, { rootItemId: "3D6658D8-A0BF-4E75-B3E2-D050FABCF4E1", selectionMode: "single", selectedItemIds: selection, templateIds: ["FE5DD826-48C6-436D-B87A-7C4210C7413B"], expandIdPath: "3D6658D8-A0BF-4E75-B3E2-D050FABCF4E1", onSelectionChange: (selection) => {
+                                                if (selection.length)
+                                                    setSelectedFolderId(selection[0]);
+                                                else
+                                                    setSelectedFolderId(undefined);
+                                            } }) }), (0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { children: selectedImage === null || selectedImage === void 0 ? void 0 : selectedImage.name })] }) }), (0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { className: "alpaca-overflow-scroll relative", children: (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-3 gap-2 absolute inset-0", children: images === null || images === void 0 ? void 0 : images.map((t) => {
+                                    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col justify-between hover:shadow-md cursor-pointer p-1", onDoubleClick: () => {
+                                            onMediaSelected(t.id);
+                                            onHide();
+                                        }, onClick: () => setSelectedImage(t), children: [(0, jsx_runtime_1.jsx)("img", { src: t.imageUrl }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs break-all", children: t.name })] }));
+                                }) }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-end gap-3", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { onClick: () => onHide(), children: "Cancel" }), (0, jsx_runtime_1.jsx)(button_1.Button, { disabled: !selectedImage, onClick: () => {
+                                onMediaSelected(selectedImage.id);
+                                onHide();
+                            }, children: "Select" })] })] }) }));
+};
+exports.MediaSelector = MediaSelector;

package/dist/cjs/editor/PageInfo.js

@@ -0,0 +1,12 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageInfo = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function PageInfo({ page }) {
+    var _a;
+    if (!(page === null || page === void 0 ? void 0 : page.fields))
+        return;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "a-p-1", children: [(0, jsx_runtime_1.jsx)("h2", { className: "a-text-xl a-font-bold a-my-2", children: page.path }), (0, jsx_runtime_1.jsxs)("div", { className: "a-text-xs", children: ["ID: ", page.id] }), (0, jsx_runtime_1.jsxs)("div", { className: "a-text-xs", children: ["Language: ", page.language] }), (0, jsx_runtime_1.jsxs)("div", { className: "a-text-xs", children: ["Version: ", page.version] }), page.translations && ((0, jsx_runtime_1.jsxs)("div", { className: "a-text-xs", children: ["Languages: ", (_a = page.translations) === null || _a === void 0 ? void 0 : _a.join(", ")] }))] }));
+}
+exports.PageInfo = PageInfo;

package/dist/cjs/editor/PlaceholderDropZone.js

@@ -0,0 +1,54 @@
+"use strict";
+"use client";
+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("..");
+function PlaceholderDropZone({ placeholder, index, parentName, }) {
+    const [isInserting, setIsInserting] = (0, react_1.useState)(false);
+    const [isSelected, setIsSelected] = (0, react_1.useState)(false);
+    const editContext = (0, __1.useEditContext)();
+    if (!editContext)
+        return;
+    const { selection, refreshCompletedFlag, dragObject, selectedForInsertion } = editContext;
+    function isAnyPlaceholderSelected() {
+        return selection.find((x) => x.indexOf("_") > 0) != undefined;
+    }
+    (0, react_1.useEffect)(() => {
+        setIsInserting(false);
+    }, [refreshCompletedFlag]);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        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;
+        const selected = (isSelectedForInsertion ||
+            (!isAnyPlaceholderSelected() && editContext.dragObject != undefined)) &&
+            (!editContext.dragObject ? true : false || dragObjectAllowed);
+        setIsSelected(selected);
+    }, [selection, dragObject, selectedForInsertion, editContext]);
+    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";
+        ev.preventDefault();
+    }
+    function drop(ev) {
+        ev.preventDefault();
+        setIsInserting(true);
+        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." })] }) }) }));
+}
+exports.PlaceholderDropZone = PlaceholderDropZone;

package/dist/cjs/editor/PlaceholderDropZoneHost.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.PlaceholderDropZoneHost = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const dynamic_1 = __importDefault(require("next/dynamic"));
+const PlaceholderDropZone = (0, dynamic_1.default)(() => Promise.resolve().then(() => __importStar(require("./PlaceholderDropZone"))).then((dnd) => dnd.PlaceholderDropZone), { ssr: false });
+function PlaceholderDropZoneHost({ placeholder, index, parentName, }) {
+    return ((0, jsx_runtime_1.jsx)(PlaceholderDropZone, { placeholder: placeholder, index: index, parentName: parentName }));
+}
+exports.PlaceholderDropZoneHost = PlaceholderDropZoneHost;

package/dist/cjs/editor/Terminal.js

@@ -0,0 +1,51 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Terminal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const inputtextarea_1 = require("primereact/inputtextarea");
+const react_1 = require("react");
+function Terminal({ commandHandler, onReset, }) {
+    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);
+    (0, react_1.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
+            setMessages([...messages, { type: "command", text: value }]);
+            setValue("");
+            setResponse("...");
+            commandHandler(value, callback);
+        }
+    };
+    (0, react_1.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 getClasses = (m) => {
+        if (m.type === "response")
+            return "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: {
+                                    __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 })] }));
+}
+exports.Terminal = Terminal;

package/dist/cjs/editor/TranslateEditor.js

@@ -0,0 +1,25 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TranslateEditor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const __1 = require("..");
+function TranslateEditor({ text }) {
+    const context = (0, __1.useEditContext)();
+    if (!context || !context.dictionary)
+        return text;
+    const dictionary = context.dictionary;
+    (0, react_1.useEffect)(() => {
+        if (Object.keys(dictionary).indexOf(text) < 0 &&
+            context.unresolvedDictionaryKeys.indexOf(text) < 0) {
+            console.log("Pushing...");
+            context.setUnresolvedDictionaryKeys([
+                ...context.unresolvedDictionaryKeys,
+                text,
+            ]);
+        }
+    }, []);
+    return (dictionary[text] || ((0, jsx_runtime_1.jsx)("span", { className: "a-p-1 a-ring-2 a-ring-red-500", children: text })));
+}
+exports.TranslateEditor = TranslateEditor;

package/dist/cjs/editor/VersionSelector.js

@@ -0,0 +1,21 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VersionSelector = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const dropdown_1 = require("primereact/dropdown");
+function VersionSelector({ page, onVersionSelected, }) {
+    if (page == null)
+        return;
+    const selectedVersionTemplate = (option, props) => {
+        if (option) {
+            return (0, jsx_runtime_1.jsx)("div", { children: option.version });
+        }
+        return (0, jsx_runtime_1.jsx)("span", { children: props.placeholder });
+    };
+    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 }) }));
+}
+exports.VersionSelector = VersionSelector;

package/dist/cjs/editor/componentTreeHelper.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.findComponent = void 0;
+function findComponent(id, placeholders) {
+    for (const p of placeholders) {
+        for (const c of p.components) {
+            if (c.id == id) {
+                return c;
+            }
+            const match = findComponent(id, c.placeholders);
+            if (match) {
+                return match;
+            }
+        }
+    }
+    return null;
+}
+exports.findComponent = findComponent;

package/dist/cjs/editor/contentService.js

@@ -0,0 +1,38 @@
+"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.getChildren = void 0;
+const universal_cookie_1 = __importDefault(require("universal-cookie"));
+function getChildren(itemId, sessionId, templateIds = []) {
+    return __awaiter(this, void 0, void 0, function* () {
+        let url = "/alpaca/headless/editor/children?itemId=" +
+            itemId +
+            "&sessionId=" +
+            sessionId;
+        url = templateIds.reduce((u, t) => u + "&templateIds=" + t, url);
+        const response = yield fetch(url, {
+            method: "GET",
+            credentials: "include",
+            headers: {
+                "Content-Type": "application/json",
+                Cookie: new universal_cookie_1.default().getAll(),
+            },
+            next: {
+                revalidate: 0,
+            },
+        });
+        return yield response.json();
+    });
+}
+exports.getChildren = getChildren;

package/dist/cjs/editor/editContext.js

@@ -0,0 +1,35 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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);