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

package/dist/{cjs → esm}/editor/fieldTypes/LinkFieldEditor.js

@@ -1,16 +1,13 @@
-"use strict";
 "use client";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LinkFieldEditor = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const __1 = require("../..");
-const LinkEditorDialog_1 = require("../LinkEditorDialog");
-function LinkFieldEditor({ field }) {
-    const editContext = (0, __1.useEditContext)();
-    const [showDialog, setShowDialog] = (0, react_1.useState)(false);
-    const [link, setLink] = (0, react_1.useState)();
-    (0, react_1.useEffect)(() => {
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { LinkEditorDialog } from "../LinkEditorDialog";
+import { useEditContext } from "../editContext";
+export function LinkFieldEditor({ field, readOnly, }) {
+    const editContext = useEditContext();
+    const [showDialog, setShowDialog] = useState(false);
+    const [link, setLink] = useState();
+    useEffect(() => {
         var _a;
         setLink({
             url: field.value.url,
@@ -25,10 +22,12 @@ function LinkFieldEditor({ field }) {
         return;
     if (!editContext)
         return;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "a-p-3 a-bg-gray-50 a-flex a-justify-between a-focus-shadow", onClick: (e) => {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "a-p-3 a-bg-gray-50 a-flex a-justify-between a-focus-shadow", onClick: (e) => {
+                    if (readOnly)
+                        return;
                     setShowDialog(true);
                     e.preventDefault();
-                }, children: [(0, jsx_runtime_1.jsx)("div", { children: field.value.url }), (0, jsx_runtime_1.jsx)("i", { className: "pi pi-link a-cursor-pointer" })] }), showDialog && ((0, jsx_runtime_1.jsx)(LinkEditorDialog_1.LinkEditorDialog, { linkValue: link || { type: "internal" }, onOk: (link) => {
+                }, children: [_jsx("div", { children: field.value.url }), !readOnly && _jsx("i", { className: "pi pi-link a-cursor-pointer" })] }), showDialog && (_jsx(LinkEditorDialog, { linkValue: link || { type: "internal" }, onOk: (link) => {
                     var _a, _b;
                     const xml = link.type == "internal"
                         ? '<link linktype="internal" querystring="' +
@@ -40,7 +39,7 @@ function LinkFieldEditor({ field }) {
                             '" />'
                         : '<link linktype="external" querystring="' +
                             ((_b = link.queryString) !== null && _b !== void 0 ? _b : "") +
-                            ' url="' +
+                            '" url="' +
                             link.url +
                             '" target="' +
                             link.target +
@@ -52,4 +51,3 @@ function LinkFieldEditor({ field }) {
                     setShowDialog(false);
                 } }))] }));
 }
-exports.LinkFieldEditor = LinkFieldEditor;

package/dist/esm/editor/fieldTypes/MultiLineText.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { InputTextarea } from "primereact/inputtextarea";
+import { useEditContext } from "../editContext";
+export function MultiLineText({ field, readOnly, }) {
+    var _a;
+    const editContext = useEditContext();
+    if (!editContext)
+        return;
+    const liveField = editContext.getLiveField(field);
+    if (!editContext)
+        return;
+    const value = (liveField === null || liveField === void 0 ? void 0 : liveField.value) || field.value;
+    const fieldItem = (_a = field._editor) === null || _a === void 0 ? void 0 : _a.descriptor.item;
+    if (!fieldItem)
+        return;
+    return (_jsx(InputTextarea, { value: value, disabled: readOnly, className: "a-p-2 a-focus-shadow a-text-sm", style: { width: "100%" }, rows: 12, onChange: (e) => {
+            editContext.editField({
+                field,
+                value: e.target.value,
+                refresh: "none",
+            });
+            // field.value = e.target.value;
+        } }, fieldItem.id + field.id + fieldItem.language + fieldItem.version));
+}

package/dist/esm/editor/fieldTypes/PictureFieldEditor.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEditContext } from "../editContext";
+import { PictureEditorDialog } from "../PictureEditorDialog";
+import { useState } from "react";
+import { InputText } from "primereact/inputtext";
+export function PictureFieldEditor({ field, readOnly, }) {
+    var _a, _b, _c, _d;
+    const editContext = useEditContext();
+    const [editorVisible, setEditorVisible] = useState(false);
+    if (!field)
+        return;
+    if (!editContext)
+        return;
+    var item = (_a = field._editor) === null || _a === void 0 ? void 0 : _a.descriptor.item;
+    return (_jsxs("div", { children: [_jsx("div", { className: "a-flex a-gap-2 a-h-full a-border-r a-focus-shadow a-overflow-auto", children: (_c = (_b = field === null || field === void 0 ? void 0 : field.value) === null || _b === void 0 ? void 0 : _b.variants) === null || _c === void 0 ? void 0 : _c.map((variant) => (_jsxs("div", { children: [_jsx("div", { className: "a-h-40 a-w-40 a-border a-relative a-cursor-pointer a-flex a-justify-center a-items-center", onClick: () => {
+                                if (!readOnly)
+                                    setEditorVisible(true);
+                            }, children: variant.src && _jsx("img", { src: variant.thumbSrc }) }), _jsx("div", { className: "a-text-xs", children: variant.name }), _jsx("div", { className: "a-text-xs", children: variant.aspectRatioLockText })] }, variant.name))) }), _jsxs("div", { className: "a-mt-2", children: [_jsx("div", { className: "a-mb-1", children: "Alt Text" }), _jsx(InputText, { value: ((_d = field.value) === null || _d === void 0 ? void 0 : _d.alt) || "", disabled: readOnly, className: "a-p-2 a-focus-shadow a-text-sm", style: { width: "100%" }, onChange: (e) => {
+                            const raw = (field === null || field === void 0 ? void 0 : field._editor.rawValue)
+                                ? JSON.parse(field === null || field === void 0 ? void 0 : field._editor.rawValue)
+                                : { Variants: [] };
+                            raw.AltText = e.target.value;
+                            if (field.value)
+                                field.value.alt = e.target.value;
+                            editContext.editField({
+                                field,
+                                rawValue: JSON.stringify(raw),
+                                refresh: "none",
+                            });
+                            // field.value = e.target.value;
+                        } }, item.id + field.id + item.language + item.version)] }), editorVisible && (_jsx(PictureEditorDialog, { field: field, onCancel: () => setEditorVisible(false), onOk: () => setEditorVisible(false) }))] }));
+}

package/dist/esm/editor/fieldTypes/RawEditor.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { InputTextarea } from "primereact/inputtextarea";
+import { useEditContext } from "../editContext";
+export function RawEditor({ field, readOnly, }) {
+    var _a, _b;
+    const editContext = useEditContext();
+    if (!editContext)
+        return;
+    const liveField = editContext.getLiveField(field);
+    if (!editContext)
+        return;
+    const value = ((_a = liveField === null || liveField === void 0 ? void 0 : liveField._editor) === null || _a === void 0 ? void 0 : _a.rawValue) || ((_b = field._editor) === null || _b === void 0 ? void 0 : _b.rawValue);
+    const fieldItem = field._editor.descriptor.item;
+    return (_jsx(InputTextarea, { value: value || "", disabled: readOnly, className: "a-p-2 a-focus-shadow a-text-sm", style: { width: "100%" }, rows: 12, onChange: (e) => {
+            field._editor.rawValue = e.target.value;
+            if (liveField)
+                liveField._editor.rawValue = e.target.value;
+            editContext.editField({
+                field,
+                rawValue: e.target.value,
+                refresh: "waitForQuietPeriod",
+            });
+            // field.value = e.target.value;
+        } }, fieldItem.id + field.id + fieldItem.language + fieldItem.version));
+}

package/dist/esm/editor/fieldTypes/RichTextEditor.js

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

package/dist/esm/editor/fieldTypes/RichTextEditorComponent.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Editor } from "primereact/editor";
+import { useEditContext } from "../editContext";
+import Quill from "quill";
+let Inline = Quill.import("blots/inline");
+class BoldBlot extends Inline {
+}
+BoldBlot.blotName = "bold";
+BoldBlot.tagName = "strong";
+Quill.register("formats/bold", BoldBlot);
+export function RichTextEditorComponent({ field, readOnly, }) {
+    var _a;
+    const editContext = useEditContext();
+    if (!editContext)
+        return;
+    const liveField = editContext.getLiveField(field);
+    //   const profile =
+    //     editContext.configuration.fieldTypes["rich text"].custom.profiles.default;
+    //   const toolbar = getToolbar(profile);
+    //   const editorModules = {
+    //     toolbar: {
+    //       container: [
+    //         // ... other toolbar options
+    //         ["customButton"], // Add your custom button here
+    //       ],
+    //     },
+    //     customButton: {}, // Initialize your custom module
+    //   };
+    const fieldItem = (_a = field._editor) === null || _a === void 0 ? void 0 : _a.descriptor.item;
+    if (!fieldItem)
+        return;
+    return (_jsx(_Fragment, { children: _jsx(Editor, { className: "a-focus-shadow", disabled: readOnly, value: liveField.value, style: { width: "100%" }, 
+            // headerTemplate={toolbar}
+            //modules={editorModules}
+            onTextChange: (e) => {
+                var _a;
+                //  console.log("Text change: " + field.itemId);
+                editContext.editField({
+                    field,
+                    value: (_a = e.htmlValue) !== null && _a !== void 0 ? _a : "",
+                    refresh: "none",
+                });
+                // field.value = e.htmlValue;
+            } }, fieldItem.id + field.id + fieldItem.language + fieldItem.version) }));
+}

package/dist/esm/editor/fieldTypes/SingleLineText.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { InputText } from "primereact/inputtext";
+import { useEditContext } from "../editContext";
+export function SingleLineText({ field, readOnly, }) {
+    var _a;
+    const editContext = useEditContext();
+    if (!editContext)
+        return;
+    const liveField = editContext.getLiveField(field);
+    const value = (liveField === null || liveField === void 0 ? void 0 : liveField.value) || field.value;
+    const fieldItem = (_a = field._editor) === null || _a === void 0 ? void 0 : _a.descriptor.item;
+    if (!fieldItem)
+        return;
+    return (_jsx(InputText, { value: value || "", disabled: readOnly, className: "a-p-2 a-focus-shadow a-text-sm", style: { width: "100%" }, onChange: (e) => {
+            editContext.editField({
+                field,
+                value: e.target.value,
+                refresh: "none",
+            });
+            // field.value = e.target.value;
+        } }, fieldItem.id + field.id + fieldItem.language + fieldItem.version));
+}

package/dist/esm/editor/fieldTypes/TreeListEditor.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Splitter, SplitterPanel } from "primereact/splitter";
+import { useEditContext } from "../editContext";
+import ContentTree from "../ContentTree";
+import { useState } from "react";
+import { ListBox } from "primereact/listbox";
+export default function TreeListEditor({ field, readOnly, }) {
+    const editContext = useEditContext();
+    const [selectedItemIdsInTree, setSelectedItemIdsInTree] = useState([]);
+    const [selectedFromList, setSelectedFromList] = useState([]);
+    if (!editContext)
+        return;
+    const rootItemId = field._editor.customProperties.datasources &&
+        field._editor.customProperties.datasources.length
+        ? field._editor.customProperties.datasources[0]
+        : "{11111111-1111-1111-1111-111111111111}";
+    const trimPath = (path) => {
+        const splitPath = path.split("/");
+        if (splitPath.length > 2) {
+            return (splitPath[splitPath.length - 2] + "/" + splitPath[splitPath.length - 1]);
+        }
+        return path;
+    };
+    function removeFromList(items) {
+        editContext === null || editContext === void 0 ? void 0 : editContext.editField({
+            field: field,
+            rawValue: field.value
+                .filter((x) => !items.find((i) => x.id == i.id))
+                .map((x) => x.id)
+                .join("|"),
+            refresh: "immediate",
+        });
+    }
+    function addToList(itemIds) {
+        const ids = field.value.map((x) => x.id);
+        itemIds.forEach((element) => {
+            if (ids.indexOf(element) == -1) {
+                ids.push(element);
+            }
+        });
+        editContext === null || editContext === void 0 ? void 0 : editContext.editField({
+            field: field,
+            rawValue: ids.join("|"),
+            refresh: "immediate",
+        });
+    }
+    return (_jsx("div", { className: "a-border a-focus-shadow", children: _jsxs(Splitter, { className: "a-h-52", children: [_jsx(SplitterPanel, { size: 50, className: "a-relative", children: _jsx("div", { className: "a-absolute a-inset-0 a-overflow-auto", children: _jsx(ContentTree, { onDoubleClick: (node) => {
+                                if (!readOnly)
+                                    addToList([node.id]);
+                            }, selectionMode: "multiple", selectedItemIds: selectedItemIdsInTree, onSelectionChange: (e) => {
+                                const selcetedIds = e.map((x) => x.id);
+                                setSelectedItemIdsInTree(selcetedIds);
+                            }, rootItemId: rootItemId }) }) }), _jsx(SplitterPanel, { children: _jsx("div", { className: "a-h-full a-w-full a-relative", children: _jsxs("div", { className: "a-absolute a-inset-0 a-flex", children: [_jsxs("div", { className: "a-bg-gray-100 a-flex a-flex-col a-justify-center", children: [_jsx("button", { onClick: () => addToList(selectedItemIdsInTree), disabled: readOnly, children: _jsx("i", { className: "pi pi-angle-right a-p-2 hover:a-bg-gray-50" }) }), _jsx("button", { onClick: () => removeFromList(selectedFromList), disabled: readOnly, children: _jsx("i", { className: "pi pi-angle-left a-p-2 hover:a-bg-gray-50" }) })] }), _jsx("div", { className: "a-flex-1 a-h-full a-relative", children: _jsx(ListBox, { className: "a-absolute a-inset-0 a-overflow-auto a-text-xs", options: field.value || [], optionLabel: "path", emptyMessage: "None selected", multiple: true, value: selectedFromList, onChange: (e) => setSelectedFromList(e.value), itemTemplate: (option) => (_jsxs("div", { className: "a-select-none", onDoubleClick: () => {
+                                                if (!readOnly)
+                                                    removeFromList([option]);
+                                            }, children: [trimPath(option.path), " "] })) }) }), _jsx("div", {})] }) }) })] }) }));
+}

package/dist/esm/editor/itemCommands.js

@@ -0,0 +1,27 @@
+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 { deleteItem } from "./services/editService";
+import { confirmDialog } from "primereact/confirmdialog";
+export function getDeleteItemCommand(item, editContext, callback) {
+    return () => {
+        confirmDialog({
+            message: "Are you sure you want to delete " +
+                item.name +
+                "? This cannot be undone.",
+            header: "Confirmation",
+            icon: "pi pi-exclamation-triangle",
+            accept: () => __awaiter(this, void 0, void 0, function* () {
+                yield deleteItem(item);
+                editContext === null || editContext === void 0 ? void 0 : editContext.requestRefresh("immediate");
+                callback();
+            }),
+        });
+    };
+}

package/dist/esm/editor/menubar/BrowseHistory.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Dropdown } from "primereact/dropdown";
+import { useEditContext } from "../editContext";
+import { useEffect, useState } from "react";
+export function BrowseHistory({ item }) {
+    const editContext = useEditContext();
+    if (!editContext)
+        return;
+    // Initialize state with data from local storage (if available)
+    const [history, setHistory] = useState(() => {
+        const savedHistory = localStorage.getItem("editor.browseHistory");
+        return savedHistory ? JSON.parse(savedHistory) : [];
+    });
+    let currentValue = {
+        name: item._editor.path || "unknown",
+        id: item.id,
+        hasLayout: item._editor.hasLayout,
+    };
+    useEffect(() => {
+        setHistory((history) => {
+            const newItem = item;
+            if (!newItem)
+                return history;
+            const newHistory = [
+                currentValue,
+                ...history.filter((x) => x.id !== newItem.id).slice(0, 100),
+            ];
+            return newHistory;
+        });
+    }, [item]);
+    return (_jsx(_Fragment, { children: _jsx(Dropdown, { className: "a-text-sm", value: currentValue, onChange: (e) => {
+                editContext.loadItem({
+                    id: e.value.id,
+                    language: item.language,
+                    version: 0,
+                    hasLayout: e.value.hasLayout,
+                });
+            }, options: history, optionLabel: "name", filter: true }) }));
+}

package/dist/esm/editor/menubar/ItemLanguageVersion.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEditContext } from "../editContext";
+import { BrowseHistory } from "./BrowseHistory";
+import { LanguageSelector } from "./LanguageSelector";
+import { VersionSelector } from "./VersionSelector";
+export function ItemLanguageVersion() {
+    const editContext = useEditContext();
+    if (!editContext)
+        return;
+    const item = editContext.view.centerPanelView === "form"
+        ? editContext.secondaryItem || editContext.page
+        : editContext.page;
+    if (!item)
+        return;
+    return (_jsxs("div", { children: [_jsx(BrowseHistory, { item: item }), _jsx(LanguageSelector, { item: item, onLanguageSelected: (language) => {
+                    editContext.loadItem(Object.assign(Object.assign({}, item), { language }));
+                } }), _jsx(VersionSelector, { item: item, onVersionSelected: (version) => {
+                    editContext.loadItem(Object.assign(Object.assign({}, item), { version }));
+                } })] }));
+}

package/dist/esm/editor/menubar/LanguageSelector.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Dropdown } from "primereact/dropdown";
+export function LanguageSelector({ item, onLanguageSelected, }) {
+    var _a;
+    if (item == null)
+        return;
+    const selectedCountryTemplate = (option, props) => {
+        if (option) {
+            return _jsx("div", { children: option.name });
+        }
+        return _jsx("span", { children: props.placeholder });
+    };
+    const countryOptionTemplate = (option) => {
+        return (_jsxs("div", { children: [option.name, " (", option.versions, ")"] }));
+    };
+    return (_jsx(_Fragment, { children: _jsx(Dropdown, { className: "a-text-sm", value: item.language, onChange: (e) => onLanguageSelected(e.value), options: (_a = item._editor) === null || _a === void 0 ? void 0 : _a.languages, optionValue: "languageCode", optionLabel: "name", placeholder: "Select a language", filter: true, valueTemplate: selectedCountryTemplate, itemTemplate: countryOptionTemplate }) }));
+}

package/dist/esm/editor/menubar/Menu.js

@@ -0,0 +1,105 @@
+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 } from "react/jsx-runtime";
+import { Menubar } from "primereact/menubar";
+import { useEditContext } from "../editContext";
+import { ItemLanguageVersion } from "./ItemLanguageVersion";
+import { configuration } from "../config/config";
+import { PageViewerControls } from "./PageViewerControls";
+export function Menu() {
+    const editContext = useEditContext();
+    if (!editContext)
+        return;
+    const getSubItems = (items) => {
+        if (typeof items === "function")
+            items = items(editContext);
+        return items.map((y) => {
+            if ("execute" in y)
+                return {
+                    label: y.label,
+                    icon: y.icon,
+                    disabled: editContext.isCommandDisabled(y),
+                    command: (event) => __awaiter(this, void 0, void 0, function* () {
+                        yield editContext.executeCommand({
+                            command: y,
+                            event: event.originalEvent,
+                        });
+                    }),
+                };
+            return {
+                label: y.label,
+                icon: y.icon,
+            };
+        });
+    };
+    const menuItems = configuration.chrome.editor.mainNavigation.map((x) => {
+        if ("execute" in x)
+            return {
+                label: x.label,
+                icon: x.icon,
+                disabled: editContext.isCommandDisabled(x),
+                command: (event) => __awaiter(this, void 0, void 0, function* () {
+                    yield editContext.executeCommand({
+                        command: x,
+                        event: event.originalEvent,
+                    });
+                }),
+            };
+        return {
+            label: x.label,
+            icon: x.icon,
+            items: getSubItems(x.items),
+        };
+    });
+    //   [
+    //     {
+    //       label: "Undo",
+    //       icon: "pi pi-fw pi-undo",
+    //       command: () => editContext.undo(),
+    //       disabled:
+    //         editHistory.length === 0 ||
+    //         !editHistory.find((x) => x.sessionId === sessionId && x.canUndo),
+    //     },
+    //     {
+    //       label: "Redo",
+    //       icon: "pi pi-fw pi-refresh",
+    //       //command: () => editContext.redo(),
+    //       disabled:
+    //         editHistory.length === 0 ||
+    //         !editHistory.find((x) => x.sessionId === sessionId && x.canRedo),
+    //     },
+    //     {
+    //       label: "Selection",
+    //       icon: "pi pi-fw pi-bars",
+    //       items: componentCommandMenuItems,
+    //     },
+    //     { separator: true },
+    //     {
+    //       label: "Preview",
+    //       icon: "pi pi-fw pi-external-link",
+    //       command: () => {
+    //         const currentUrl = new URL(window.location.href);
+    //         const searchParams = currentUrl.searchParams;
+    //         if (searchParams.get("mode") === "edit") {
+    //           searchParams.set("mode", "preview");
+    //         }
+    //         window.open(currentUrl.href);
+    //       },
+    //     },
+    //     // {
+    //     //   label: "Publish",
+    //     //   icon: "pi pi-fw pi-upload",
+    //     //   // command: () => publish(),
+    //     // },
+    //     //{ separator: true },
+    //   ];
+    const endContent = (_jsxs("div", { className: "a-flex a-gap-3 a-items-center", children: [_jsx(PageViewerControls, {}), _jsx(ItemLanguageVersion, {})] }));
+    return (_jsx(Menubar, { model: menuItems, end: endContent, className: "a-p-1 a-text-sm a-rounded-none a-border-0 a-border-b a-bg-gray-50" }));
+}

package/dist/esm/editor/menubar/PageViewerControls.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from "primereact/utils";
+import { useEditContext } from "../editContext";
+import { Menubar } from "primereact/menubar";
+export function PageViewerControls() {
+    const editContext = useEditContext();
+    if (!editContext)
+        return null;
+    if (editContext.view.centerPanelView !== "page")
+        return null;
+    const zoom = editContext.pageView.zoom;
+    const setZoom = editContext.pageView.setZoom;
+    const device = editContext.pageView.device;
+    const setDevice = editContext.pageView.setDevice;
+    const zoomMenu = {
+        label: Math.floor(zoom * 100) + "%",
+        icon: "pi pi-search",
+        items: [
+            {
+                label: "25%",
+                icon: "pi pi-search",
+                command: () => setZoom(0.25),
+            },
+            {
+                label: "50%",
+                icon: "pi pi-search",
+                command: () => setZoom(0.5),
+            },
+            {
+                label: "75%",
+                icon: "pi pi-search",
+                command: () => setZoom(0.75),
+            },
+            {
+                label: "100%",
+                icon: "pi pi-search",
+                command: () => setZoom(1),
+            },
+            {
+                label: "125%",
+                icon: "pi pi-search",
+                command: () => setZoom(1.25),
+            },
+            {
+                label: "150%",
+                icon: "pi pi-search",
+                command: () => setZoom(1.5),
+            },
+            {
+                label: "200%",
+                icon: "pi pi-search",
+                command: () => setZoom(2),
+            },
+            {
+                label: "400%",
+                icon: "pi pi-search",
+                command: () => setZoom(4),
+            },
+        ],
+    };
+    return (_jsxs("div", { className: "a-flex a-gap-2 a-items-center a-mr-4", children: [_jsx(Menubar, { model: [zoomMenu], className: "a-border-0 a-p-0" }), _jsx("i", { className: classNames(device === "desktop" ? "a-bg-gray-100" : "", "pi pi-desktop  a-cursor-pointer"), onClick: () => {
+                    setDevice("desktop");
+                } }), _jsx("i", { className: classNames(device === "mobile" ? "a-bg-gray-100" : "", "pi pi-tablet  a-cursor-pointer"), onClick: () => {
+                    setDevice("mobile");
+                } }), _jsx("i", { className: "pi pi-external-link a-cursor-pointer", onClick: () => editContext.pageView.setFullscreen(true) })] }));
+}

package/dist/esm/editor/menubar/VersionSelector.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Dropdown } from "primereact/dropdown";
+export function VersionSelector({ item, onVersionSelected, }) {
+    var _a;
+    if (item == null)
+        return;
+    const selectedVersionTemplate = (option, props) => {
+        if (option) {
+            return _jsx("div", { children: option.version });
+        }
+        return _jsx("span", { children: props.placeholder });
+    };
+    const versionOptionTemplate = (option) => {
+        return (_jsxs("div", { children: [option.version, " ", _jsxs("div", { className: "a-text-xs", children: ["(", option.updated.toString(), " by ", option.updatedBy, ")"] })] }));
+    };
+    return (_jsx(_Fragment, { children: _jsx(Dropdown, { className: "a-text-sm", value: item.version, onChange: (e) => onVersionSelected(e.value), options: (_a = item._editor) === null || _a === void 0 ? void 0 : _a.versions, optionValue: "version", optionLabel: "version", placeholder: "Select a version", valueTemplate: selectedVersionTemplate, itemTemplate: versionOptionTemplate }) }));
+}

package/dist/esm/editor/previewContext.js

@@ -0,0 +1,5 @@
+"use client";
+import React, { useContext } from "react";
+const PreviewContext = React.createContext(undefined);
+export const PreviewContextProvider = PreviewContext.Provider;
+export const usePreviewContext = () => useContext(PreviewContext);

package/dist/esm/editor/services/aiService.js

@@ -0,0 +1,20 @@
+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 { post } from "./serviceHelper";
+export function loadAiConfig(item) {
+    return __awaiter(this, void 0, void 0, function* () {
+        let url = "/alpaca/headless/ai/config";
+        const response = yield post(url, item);
+        if (!response.response.ok) {
+            throw new Error("Error loading AI config");
+        }
+        return yield response.response.json();
+    });
+}

package/dist/esm/editor/services/componentDesignerService.js

@@ -0,0 +1,23 @@
+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 { post } from "./serviceHelper";
+export function createNewComponent(parent, name) {
+    return __awaiter(this, void 0, void 0, function* () {
+        let url = "/alpaca/headless/component/create";
+        const response = yield post(url, {
+            settingsItemId: parent.id,
+            name,
+        });
+        if (!response.response.ok) {
+            return new Error("Error creating new item");
+        }
+        return yield response.response.json();
+    });
+}