@alpaca-headless/alpaca-headless-nextjs 1.0.13 → 1.0.20

package/dist/esm/editor/AiTerminal.js

@@ -9,11 +9,11 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
-import { TerminalService } from 'primereact/terminalservice';
+import { useEffect, useRef, useState } from "react";
+import { TerminalService } from "primereact/terminalservice";
 import { useRouter, useSearchParams } from "next/navigation";
-import { Terminal } from './Terminal';
-export function AiTerminal({ requestRefresh, selection }) {
+import { Terminal } from "./Terminal";
+export function AiTerminal({ requestRefresh, selection, }) {
     const searchParams = useSearchParams();
     const [messages, setMessages] = useState([]);
     const [tokens, setTokens] = useState({ in: 0, out: 0 });
@@ -28,11 +28,17 @@ export function AiTerminal({ requestRefresh, selection }) {
     const router = useRouter();
     function commandHandler(text, callback) {
         return __awaiter(this, void 0, void 0, function* () {
-            const newMessages = [...messagesRef.current, { content: text, 'role': 'user', 'name': 'user' }];
+            const newMessages = [
+                ...messagesRef.current,
+                { content: text, role: "user", name: "user" },
+            ];
             let lastRefresh = new Date().getTime();
             const response = yield prompt(newMessages, selectionRef.current, searchParams.get("session"), searchParams.get("itemid"), searchParams.get("language"), searchParams.get("version"), (response) => {
                 console.log(response);
-                setTokens({ in: response.numInputTokens, out: response.numOutputTokens });
+                setTokens({
+                    in: response.numInputTokens,
+                    out: response.numOutputTokens,
+                });
                 handleResponse(response, callback, false);
                 if (response.editOperations.length) {
                     if (new Date().getTime() - lastRefresh > 500) {
@@ -59,7 +65,11 @@ export function AiTerminal({ requestRefresh, selection }) {
             //       setEditOperations(newEditOperations);
             // }
             if (response === null || response === void 0 ? void 0 : response.responseText)
-                newMessages.push({ content: response.responseText, 'role': 'assistant', 'name': 'assistant' });
+                newMessages.push({
+                    content: response.responseText,
+                    role: "assistant",
+                    name: "assistant",
+                });
             //     TerminalService.emit('response', response.responseText);
             // }
             // // else
@@ -67,28 +77,29 @@ export function AiTerminal({ requestRefresh, selection }) {
             setMessages(newMessages);
         });
     }
-    ;
     useEffect(() => {
-        TerminalService.on('command', commandHandler);
+        TerminalService.on("command", commandHandler);
         return () => {
-            TerminalService.off('command', commandHandler);
+            TerminalService.off("command", commandHandler);
         };
     }, []);
-    return (_jsxs("div", { className: 'h-full flex flex-col relative', children: [_jsx("div", { className: 'flex-1 relative', children: _jsx("div", { className: 'inset-0 absolute', children: _jsx(Terminal, { onReset: () => setMessages([]), commandHandler: (v, callback) => {
+    return (_jsxs("div", { className: "a-h-full a-flex a-flex-col a-relative", children: [_jsx("div", { className: "a-flex-1 a-relative", children: _jsx("div", { className: "a-inset-0 a-absolute", children: _jsx(Terminal, { onReset: () => setMessages([]), commandHandler: (v, callback) => {
                             commandHandler(v, callback);
-                        } }) }) }), _jsxs("div", { className: 'text-xs', children: ["Tokens in: ", tokens.in, " out: ", tokens.out] })] }));
+                        } }) }) }), _jsxs("div", { className: "a-text-xs", children: ["Tokens in: ", tokens.in, " out: ", tokens.out] })] }));
 }
 function prompt(messages, selection, session, itemid, language, version, callback) {
     return __awaiter(this, void 0, void 0, function* () {
         const response = yield fetch("/alpaca/headless/ai/prompt", {
             method: "POST",
-            body: JSON.stringify({ messages,
+            body: JSON.stringify({
+                messages,
                 itemid,
                 language,
                 version,
                 selection,
-                sessionId: session }),
-            credentials: 'omit',
+                sessionId: session,
+            }),
+            credentials: "omit",
             headers: {
                 "Content-Type": "application/json",
                 //Cookie: 'test'// new Cookies().getAll(),
@@ -101,7 +112,7 @@ function prompt(messages, selection, session, itemid, language, version, callbac
             return null;
         const reader = response.body.getReader();
         const decoder = new TextDecoder();
-        let buffer = '';
+        let buffer = "";
         let result = null;
         while (true) {
             const { done, value } = yield reader.read();
@@ -110,11 +121,11 @@ function prompt(messages, selection, session, itemid, language, version, callbac
             }
             buffer += decoder.decode(value, { stream: true }); // 'stream: true' ensures that any incomplete multi-byte characters aren't malformed.
             // Split the buffer by newline and keep the last partial line for the next iteration.
-            const lines = buffer.split('\n');
+            const lines = buffer.split("\n");
             if (lines.length > 0) {
                 buffer = lines.pop() || ""; // Incomplete line (if any) is kept for the next iteration.
                 for (let line of lines) {
-                    if (line.trim() === '')
+                    if (line.trim() === "")
                         continue; // Skip empty lines if any.
                     try {
                         const jsonData = JSON.parse(line);
@@ -122,19 +133,19 @@ function prompt(messages, selection, session, itemid, language, version, callbac
                         result = jsonData;
                     }
                     catch (e) {
-                        console.error('Error parsing line:' + line, e);
+                        console.error("Error parsing line:" + line, e);
                     }
                 }
             }
         }
         // If there's any remaining content in the buffer after processing all chunks, try to process it.
-        if (buffer.trim() !== '') {
+        if (buffer.trim() !== "") {
             try {
                 const jsonData = JSON.parse(buffer);
                 result = jsonData;
             }
             catch (e) {
-                console.error('Error parsing the final buffer content:', e);
+                console.error("Error parsing the final buffer content:", e);
             }
         }
         return result;

package/dist/esm/editor/ComponentInfo.js

@@ -4,7 +4,7 @@ export function ComponentInfo({ component, }) {
     var _a;
     if (!(component === null || component === void 0 ? void 0 : component.fields))
         return;
-    const hostingPageItem = component.hostingPageItem ? (_jsx("div", { children: _jsxs("div", { className: "text-xs", children: ["Source: ", component.hostingPageItem.path, "( ID:", " ", component.hostingPageItem.id, ")"] }) })) : null;
-    const linkedComponent = component.linkedComponentItem ? (_jsx("div", { children: _jsxs("div", { className: "text-xs", children: ["Source: ", component.linkedComponentItem.path] }) })) : null;
-    return (_jsxs("div", { className: "p-1", children: [_jsx("h2", { className: "text-xl font-bold my-2", children: component.name }), _jsxs("div", { className: "text-xs", children: ["ID: ", component.id] }), _jsxs("div", { className: "text-xs", children: ["Languages: ", (_a = component.translations) === null || _a === void 0 ? void 0 : _a.join(", ")] }), hostingPageItem, linkedComponent] }));
+    const hostingPageItem = component.hostingPageItem ? (_jsx("div", { children: _jsxs("div", { className: "a-text-xs", children: ["Source: ", component.hostingPageItem.path, "( ID:", " ", component.hostingPageItem.id, ")"] }) })) : null;
+    const linkedComponent = component.linkedComponentItem ? (_jsx("div", { children: _jsxs("div", { className: "a-text-xs", children: ["Source: ", component.linkedComponentItem.path] }) })) : null;
+    return (_jsxs("div", { className: "a-p-1", children: [_jsx("h2", { className: "a-text-xl a-font-bold a-my-2", children: component.name }), _jsxs("div", { className: "a-text-xs", children: ["ID: ", component.id] }), _jsxs("div", { className: "a-text-xs", children: ["Languages: ", (_a = component.translations) === null || _a === void 0 ? void 0 : _a.join(", ")] }), hostingPageItem, linkedComponent] }));
 }

package/dist/esm/editor/ComponentPalette.js

@@ -28,7 +28,7 @@ export function ComponentPalette({ selection, page, dragStart, dragEnd, }) {
     //     editContext!.droppedInPlaceholder(key, parseInt(index));
     //   }
     // }
-    return (_jsxs(_Fragment, { children: [_jsx("h2", { className: "text-xl font-bold mb-8", children: "New" }), _jsx("div", { className: "grid grid-cols-4 gap-1", children: insertOptions.map((option) => {
+    return (_jsxs(_Fragment, { children: [_jsx("h2", { className: "a-text-xl a-font-bold a-mb-8", children: "New" }), _jsx("div", { className: "a-grid a-grid-cols-4 a-gap-1", children: insertOptions.map((option) => {
                     function handleDragStart(event) {
                         dragStart({ type: "template", templateId: option.id });
                         event.stopPropagation();
@@ -39,7 +39,7 @@ export function ComponentPalette({ selection, page, dragStart, dragEnd, }) {
                     return (_jsxs("div", { 
                         //    onClick={directInsert}
                         draggable: true, onDragStart: handleDragStart, onDragEnd: handleDragEnd, className: "p-3 shadow-md flex items-center flex-col gap-1 cursor-grab", children: [_jsx("img", { src: option.icon, width: "32", height: "32" }), option.name] }, option.id));
-                }) }), _jsx("h2", { className: "text-xl font-bold my-8", children: "Existing" }), _jsx(ContentTree, { rootItemId: "0DE95AE4-41AB-4D01-9EB0-67441B7C2450", dragStart: (itemNode) => {
+                }) }), _jsx("h2", { className: "a-text-xl a-font-bold a-my-8", children: "Existing" }), _jsx(ContentTree, { rootItemId: "0DE95AE4-41AB-4D01-9EB0-67441B7C2450", dragStart: (itemNode) => {
                     dragStart({
                         type: "link-component",
                         templateId: itemNode.templateId,

package/dist/esm/editor/ComponentTree.js

@@ -150,7 +150,7 @@ export function ComponentTree({ page, selection, }) {
             if (node)
                 alert(node.getAttribute("data-key"));
             ev.stopPropagation();
-        }, children: [_jsx(ContextMenu, { model: menu, ref: cm }), _jsx(Tree, { value: treeNodes, selectionMode: "multiple", selectionKeys: selectedKeys, className: "w-full alpaca-no-border", onToggle: (e) => setExpandedKeys(e.value), expandedKeys: expandedKeys, nodeTemplate: nodeTemplate, dragdropScope: "ignore", onSelectionChange: (ev) => {
+        }, children: [_jsx(ContextMenu, { model: menu, ref: cm }), _jsx(Tree, { value: treeNodes, selectionMode: "multiple", selectionKeys: selectedKeys, className: "a-w-full alpaca-no-border", onToggle: (e) => setExpandedKeys(e.value), expandedKeys: expandedKeys, nodeTemplate: nodeTemplate, dragdropScope: "ignore", onSelectionChange: (ev) => {
                     if (ev.value) {
                         const selectedKeys = Object.keys(ev.value);
                         const selectedComponentIds = selectedKeys

package/dist/esm/editor/ContentTree.js

@@ -87,11 +87,11 @@ export default function ContentTree({ isDraggable, dragStart, dragEnd, expandIdP
     const nodeTemplate = (node, options) => {
         let label = _jsx("b", { children: node.label });
         if (node.url) {
-            label = (_jsx("a", { onDragStart: (e) => e.preventDefault(), href: node.url, className: "text-primary hover:underline font-semibold", children: node.label }));
+            label = (_jsx("a", { onDragStart: (e) => e.preventDefault(), href: node.url, className: "a-text-primary hover:a-underline a-font-semibold", children: node.label }));
         }
         return (_jsxs("span", { onDragStart: (event) => {
                 handleDragStart(event, node.data);
-            }, onDragEnd: handleDragEnd, draggable: node.isDraggable, className: `flex gap-2 ${node.isDraggable ? "cursor-grab" : ""} ${options.className}`, children: [_jsx("img", { src: node.iconUrl, style: { height: "20px" }, width: "20", height: "20", onDragStart: (e) => e.preventDefault() }), label, node.loading && (_jsx(ProgressSpinner, { style: { width: "20px", height: "20px" } }))] }));
+            }, onDragEnd: handleDragEnd, draggable: node.isDraggable, className: `a-flex a-gap-2 ${node.isDraggable ? "a-cursor-grab" : ""} ${options.className}`, children: [_jsx("img", { src: node.iconUrl, style: { height: "20px" }, width: "20", height: "20", onDragStart: (e) => e.preventDefault() }), label, node.loading && (_jsx(ProgressSpinner, { style: { width: "20px", height: "20px" } }))] }));
     };
     function handleDragStart(event, item) {
         if (dragStart)
@@ -108,7 +108,7 @@ export default function ContentTree({ isDraggable, dragStart, dragEnd, expandIdP
     });
     return (_jsx("div", { onDragEnterCapture: (ev) => ev.stopPropagation(), onDragOverCapture: (ev) => ev.stopPropagation(), onDragLeaveCapture: (ev) => ev.stopPropagation(), children: _jsx(Tree, { value: treeNodes, expandedKeys: expandedKeys, onToggle: (e) => setExpandedKeys(e.value), nodeTemplate: nodeTemplate, 
             //dragdropScope={isDraggable ? "alpaca" : undefined}
-            className: "w-full alpaca-no-border p-0", onExpand: loadOnExpand, selectionMode: selectionMode, onSelectionChange: (ev) => {
+            className: "a-w-full alpaca-no-border a-p-0", onExpand: loadOnExpand, selectionMode: selectionMode, onSelectionChange: (ev) => {
                 if (onSelectionChange && selectionMode == "multiple")
                     onSelectionChange(Object.keys(ev.value || {}));
                 if (onSelectionChange && selectionMode == "single")

package/dist/esm/editor/EditFrame.js

@@ -24,7 +24,7 @@ export function EditFrame({ componentId, children, }) {
         color = "purple-400";
     const isSelected = selection && selection.indexOf(clientComponent.id) >= 0;
     if (isSelected)
-        classNames = `ap-editframe relative ring-2 ring-${color}`;
+        classNames = `ap-editframe a-relative a-ring-2 a-ring-${color}`;
     function handleDragStart(event) {
         if (!clientComponent)
             return;
@@ -44,11 +44,11 @@ export function EditFrame({ componentId, children, }) {
         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 (_jsxs("div", { className: classNames, onClick: select, draggable: isDraggable, onDragStart: handleDragStart, children: [isSelected && (_jsxs("div", { className: `absolute top-0 right-0 text-white px-3 bg-${color} ${isDraggable ? "cursor-move" : ""}`, children: [clientComponent.name, _jsx("button", { className: "ml-3", onClick: (ev) => {
+    return (_jsxs("div", { className: classNames, onClick: select, draggable: isDraggable, onDragStart: handleDragStart, children: [isSelected && (_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, _jsx("button", { className: "a-ml-3", onClick: (ev) => {
                             ev.preventDefault();
                             ev.stopPropagation();
                             editContext.removeComponent(clientComponent.linkItemId || clientComponent.id, () => setIsRemoved(true));
-                        }, children: _jsx("i", { className: "pi pi-trash" }) }), clientComponent.placeholders.length > 0 && (_jsx("button", { className: "ml-3", onClick: (ev) => {
+                        }, children: _jsx("i", { className: "pi pi-trash" }) }), clientComponent.placeholders.length > 0 && (_jsx("button", { className: "a-ml-3", onClick: (ev) => {
                             editContext.setSelectedForInsertion(clientComponent.id);
                             editContext.openComponentPalette();
                             ev.stopPropagation();

package/dist/esm/editor/EditHistory.js

@@ -12,15 +12,15 @@ export function EditHistory({ operations }) {
             return _jsxs(_Fragment, { children: ["Remove ", op.id] });
         if (op.type === "edit-field") {
             const editFieldOp = op;
-            return (_jsxs(_Fragment, { children: ["Edit ", editFieldOp.fieldName, _jsxs("span", { className: "text-gray-400 ml-1", children: ["(", editFieldOp.itemName, ", ", editFieldOp.language, ",", " ", editFieldOp.version, ")"] })] }));
+            return (_jsxs(_Fragment, { children: ["Edit ", editFieldOp.fieldName, _jsxs("span", { className: "a-text-gray-400 a-ml-1", children: ["(", editFieldOp.itemName, ", ", editFieldOp.language, ",", " ", editFieldOp.version, ")"] })] }));
         }
         return _jsx("div", { children: op.type });
     };
-    return (_jsxs("div", { className: "inset-0 absolute", children: [_jsx("div", { className: "p-2 bg-gray-100 m-1", children: "History" }), _jsx("div", { className: "flex flex-col overflow-y-auto overflow-x-hidden", style: { height: "calc(100% - 45px)" }, children: operations.map((o, i) => singleOperation(i, o)) })] }));
+    return (_jsxs("div", { className: "a-inset-0 a-absolute", children: [_jsx("div", { className: "a-p-2 a-bg-gray-100 a-m-1", children: "History" }), _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 = "border-b p-2 flex justify-between";
+        let className = "a-border-b a-p-2 a-flex a-justify-between";
         if (o.undone)
-            className = className + " text-gray-300";
-        return (_jsxs("div", { className: className, children: [_jsx("div", { children: _jsx("small", { className: "text-color-secondary", children: description(o) }) }), _jsx("div", { className: "text-xs", children: o.user })] }, i));
+            className = className + " a-text-gray-300";
+        return (_jsxs("div", { className: className, children: [_jsx("div", { children: _jsx("small", { className: "a-text-color-secondary", children: description(o) }) }), _jsx("div", { className: "a-text-xs", children: o.user })] }, i));
     }
 }

package/dist/esm/editor/EditorClient.js

@@ -37,6 +37,9 @@ import { PageInfo } from "./PageInfo";
 import { VersionSelector } from "./VersionSelector";
 import { commitChanges, currentOperation, executeRedo, executeUndo, executeEditOperation, setCurrentOperation, } from "./editService";
 import "../../editor.css";
+import "../../primereact/resources/primereact.min.css";
+import "../../primeicons/primeicons.css";
+import "../../primereact/resources/themes/lara-light-indigo/theme.css";
 // Hook
 function useEventListener(eventName, handler, element) {
     // Create a ref that stores handler
@@ -446,5 +449,5 @@ export function EditorClient({ content, dictionaryObject, edit, children, }) {
                                     setHidePalette(false);
                                 }
                                 setSelectedForInsertion("");
-                            } })) }), _jsxs(BlockUI, { blocked: uiBlocked, template: spinner, children: [_jsx(Menubar, { model: menuItems, end: endContent }), _jsxs(Splitter, { children: [_jsx(SplitterPanel, { size: 25, className: "alpaca-overflow-scroll", children: _jsxs(Splitter, { layout: "vertical", children: [_jsx(SplitterPanel, { className: "overflow-hidden relative", children: _jsx("div", { className: "inset-0 absolute overflow-y-auto", children: _jsx(ComponentTree, { page: page, selection: selection }) }) }), _jsx(SplitterPanel, { className: "alpaca-editor-tabs", children: _jsxs(TabView, { className: "inset-0 absolute", scrollable: true, children: [selectedComponent && (_jsxs(TabPanel, { header: "Fields", children: [_jsx(ComponentInfo, { component: selectedComponent }), _jsx(FieldList, { fields: selectedComponent.fields })] })), selectedComponent && (_jsx(TabPanel, { header: "GraphQL", style: { height: "100%" }, children: _jsx(GraphQL, { component: selectedComponent }) })), _jsxs(TabPanel, { header: "Page", children: [page && _jsx(PageInfo, { page: page }), page && _jsx(FieldList, { fields: page.fields })] }), _jsx(TabPanel, { header: "Dictionary", children: _jsx(DictionaryEditor, { dictionary: dictionary }) }), _jsx(TabPanel, { header: "Debug", children: _jsx(Debug, { component: selectedComponent, page: page }) })] }) })] }) }), _jsx(SplitterPanel, { size: 55, className: "alpaca-overflow-scroll alpaca-editor-content", children: _jsx("div", { onDragEndCapture: () => setDragObject(undefined), children: children }) }), _jsx(SplitterPanel, { size: 20, children: _jsxs(Splitter, { layout: "vertical", className: "alpaca-editor", children: [_jsx(SplitterPanel, { className: "overflow-hidden relative", children: _jsx(EditHistory, { operations: editData === null || editData === void 0 ? void 0 : editData.operations }) }), _jsx(SplitterPanel, { className: "overflow-hidden relative", children: _jsx(AiTerminal, { selection: selection, requestRefresh: requestRefresh }) })] }) })] })] })] })] }));
+                            } })) }), _jsxs(BlockUI, { blocked: uiBlocked, template: spinner, children: [_jsx(Menubar, { model: menuItems, end: endContent }), _jsxs(Splitter, { children: [_jsx(SplitterPanel, { size: 25, className: "alpaca-overflow-scroll", children: _jsxs(Splitter, { layout: "vertical", children: [_jsx(SplitterPanel, { className: "a-overflow-hidden a-relative", children: _jsx("div", { className: "a-inset-0 a-absolute a-overflow-y-auto", children: _jsx(ComponentTree, { page: page, selection: selection }) }) }), _jsx(SplitterPanel, { className: "alpaca-editor-tabs", children: _jsxs(TabView, { className: "a-inset-0 a-absolute", scrollable: true, children: [selectedComponent && (_jsxs(TabPanel, { header: "Fields", children: [_jsx(ComponentInfo, { component: selectedComponent }), _jsx(FieldList, { fields: selectedComponent.fields })] })), selectedComponent && (_jsx(TabPanel, { header: "GraphQL", style: { height: "100%" }, children: _jsx(GraphQL, { component: selectedComponent }) })), _jsxs(TabPanel, { header: "Page", children: [page && _jsx(PageInfo, { page: page }), page && _jsx(FieldList, { fields: page.fields })] }), _jsx(TabPanel, { header: "Dictionary", children: _jsx(DictionaryEditor, { dictionary: dictionary }) }), _jsx(TabPanel, { header: "Debug", children: _jsx(Debug, { component: selectedComponent, page: page }) })] }) })] }) }), _jsx(SplitterPanel, { size: 55, className: "alpaca-overflow-scroll alpaca-editor-content", children: _jsx("div", { onDragEndCapture: () => setDragObject(undefined), className: "alpaca-editor-container", children: children }) }), _jsx(SplitterPanel, { size: 20, children: _jsxs(Splitter, { layout: "vertical", className: "alpaca-editor", children: [_jsx(SplitterPanel, { className: "overflow-hidden a-relative", children: _jsx(EditHistory, { operations: editData === null || editData === void 0 ? void 0 : editData.operations }) }), _jsx(SplitterPanel, { className: "overflow-hidden a-relative", children: _jsx(AiTerminal, { selection: selection, requestRefresh: requestRefresh }) })] }) })] })] })] })] }));
 }

package/dist/esm/editor/FieldList.js

@@ -20,10 +20,10 @@ export function FieldList({ fields }) {
     }, {});
     const sectionList = Object.values(sections);
     sectionList.sort((a, b) => b[0].sortOrder - a[0].sortOrder);
-    return (_jsx("div", { className: "p-1", children: Object.keys(sections).map((section) => (_jsxs("div", { children: [_jsx("div", { className: "alpaca-fields-section-headline", children: section }), getSectionFields(sections[section])] }, section))) }));
+    return (_jsx("div", { className: "a-p-1", children: Object.keys(sections).map((section) => (_jsxs("div", { children: [_jsx("div", { className: "alpaca-fields-section-headline", children: section }), getSectionFields(sections[section])] }, section))) }));
 }
 function getSectionFields(fields) {
-    return fields.map((field) => (_jsxs("div", { children: [_jsx("label", { className: "alpaca-field-label", children: field.name }), !field.containsFallbackValue ? (_jsx("button", { className: "text-xs p-0 m-1", children: "Reset " })) : (_jsx("button", { children: "Fallback" })), _jsx("div", { children: getFieldEditor(field) })] }, field.id)));
+    return fields.map((field) => (_jsxs("div", { children: [_jsx("label", { className: "alpaca-field-label", children: field.name }), !field.containsFallbackValue ? (_jsx("button", { className: "a-text-xs a-p-0 a-m-1", children: "Reset " })) : (_jsx("button", { children: "Fallback" })), _jsx("div", { children: getFieldEditor(field) })] }, field.id)));
 }
 function getFieldEditor(field) {
     switch (field.type) {

package/dist/esm/editor/GraphQL.js

@@ -13,7 +13,7 @@ export function GraphQL({ component }) {
     const editContext = useEditContext();
     const [query, setQuery] = useState("");
     const [showSpinner, setShowSpinner] = useState(false);
-    if (!(component === null || component === void 0 ? void 0 : component.graphql))
+    if (!component)
         return;
     useEffect(() => {
         setQuery(component.graphql_query);
@@ -79,5 +79,5 @@ export function GraphQL({ component }) {
         editContext === null || editContext === void 0 ? void 0 : editContext.editField(field, prettyQuery, false);
         setShowSpinner(true);
     }
-    return (_jsxs(Splitter, { layout: "vertical", style: { height: "100%" }, children: [_jsx(SplitterPanel, { size: 50, className: "relative", children: _jsxs("div", { className: "absolute inset-0 flex", children: [_jsx(InputTextarea, { value: query, onChange: (e) => setQuery(e.target.value), className: "flex-1", style: { height: "100%" } }), _jsx(Button, { icon: "pi pi-refresh" + (showSpinner ? " pi-spin" : ""), onClick: refresh, disabled: showSpinner })] }) }), _jsx(SplitterPanel, { className: "alpaca-editor-tabs", children: _jsxs(TabView, { className: "inset-0 absolute", children: [_jsx(TabPanel, { header: "Data", style: { height: "100%" }, className: "relative", children: _jsx("div", { className: "m-1", children: Object.values(fieldsjsonValues).map((x) => renderItem(x)) }) }), _jsx(TabPanel, { header: "JSON", className: "relative", style: { height: "100%" }, children: _jsx("div", { className: "inset-0 absolute overflow-y-auto", children: _jsx(JSONPretty, { data: component.graphql }) }) })] }) })] }));
+    return (_jsxs(Splitter, { layout: "vertical", style: { height: "100%" }, children: [_jsx(SplitterPanel, { size: 50, className: "a-relative", children: _jsxs("div", { className: "a-absolute a-inset-0 a-flex", children: [_jsx(InputTextarea, { value: query, onChange: (e) => setQuery(e.target.value), className: "a-flex-1", style: { height: "100%" } }), _jsx(Button, { icon: "pi pi-refresh" + (showSpinner ? " pi-spin" : ""), onClick: refresh, disabled: showSpinner })] }) }), _jsx(SplitterPanel, { className: "alpaca-editor-tabs", children: _jsxs(TabView, { className: "a-inset-0 absolute", children: [_jsx(TabPanel, { header: "Data", style: { height: "100%" }, className: "a-relative", children: _jsx("div", { className: "a-m-1", children: Object.values(fieldsjsonValues).map((x) => renderItem(x)) }) }), _jsx(TabPanel, { header: "JSON", className: "a-relative", style: { height: "100%" }, children: _jsx("div", { className: "a-inset-0 a-absolute a-overflow-y-auto", children: _jsx(JSONPretty, { data: component.graphql }) }) })] }) })] }));
 }

package/dist/esm/editor/PageInfo.js

@@ -4,5 +4,5 @@ export function PageInfo({ page }) {
     var _a;
     if (!(page === null || page === void 0 ? void 0 : page.fields))
         return;
-    return (_jsxs("div", { className: "p-1", children: [_jsx("h2", { className: "text-xl font-bold my-2", children: page.path }), _jsxs("div", { className: "text-xs", children: ["ID: ", page.id] }), _jsxs("div", { className: "text-xs", children: ["Language: ", page.language] }), _jsxs("div", { className: "text-xs", children: ["Version: ", page.version] }), page.translations && (_jsxs("div", { className: "text-xs", children: ["Languages: ", (_a = page.translations) === null || _a === void 0 ? void 0 : _a.join(", ")] }))] }));
+    return (_jsxs("div", { className: "a-p-1", children: [_jsx("h2", { className: "a-text-xl a-font-bold a-my-2", children: page.path }), _jsxs("div", { className: "a-text-xs", children: ["ID: ", page.id] }), _jsxs("div", { className: "a-text-xs", children: ["Language: ", page.language] }), _jsxs("div", { className: "a-text-xs", children: ["Version: ", page.version] }), page.translations && (_jsxs("div", { className: "a-text-xs", children: ["Languages: ", (_a = page.translations) === null || _a === void 0 ? void 0 : _a.join(", ")] }))] }));
 }

package/dist/esm/editor/PlaceholderDropZone.js

@@ -39,12 +39,12 @@ export function PlaceholderDropZone({ placeholder, index, parentName, }) {
         editContext.droppedInPlaceholder(placeholder.key, index);
     }
     if (isInserting)
-        return (_jsx("div", { className: " bg-gray-200 p-10", children: _jsx(ProgressBar, { mode: "indeterminate", style: { height: "6px" } }) }));
+        return (_jsx("div", { className: " a-bg-gray-200 a-p-10", children: _jsx(ProgressBar, { mode: "indeterminate", style: { height: "6px" } }) }));
     return (_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: _jsx("div", { className: "p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4", children: _jsxs("div", { children: [_jsxs("div", { className: "text-xl font-medium text-black", children: ["Placeholder ", parentName, " / ", placeholder.name, " ", index] }), _jsx("p", { className: "text-gray-500", children: "You can add your components here." })] }) }) }));
+        className: `ape-placeholder ${isSelected ? "" : "ape-hidden"}`, children: _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: _jsxs("div", { children: [_jsxs("div", { className: "a-text-xl a-font-medium a-text-black", children: ["Placeholder ", parentName, " / ", placeholder.name, " ", index] }), _jsx("p", { className: "a-text-gray-500", children: "You can add your components here." })] }) }) }));
 }

package/dist/esm/editor/Terminal.js

@@ -38,10 +38,10 @@ export function Terminal({ commandHandler, onReset, }) {
             return "text-blue-500";
         return "";
     };
-    return (_jsxs("div", { className: "flex flex-col h-full", children: [_jsx("div", { className: "p-4 border-b border-gray-200", children: _jsx("button", { onClick: () => {
+    return (_jsxs("div", { className: "a-flex a-flex-col a-h-full", children: [_jsx("div", { className: "a-p-4 a-border-b a-border-gray-200", children: _jsx("button", { onClick: () => {
                         setMessages([]);
                         onReset();
-                    }, children: _jsx("i", { className: "pi pi-trash" }) }) }), _jsxs("div", { className: "overflow-y-auto h-full overflow-x-hidden p-2", children: [messages.map((m, i) => (_jsx("div", { className: getClasses(m), children: m.text }, i))), response != null && (_jsxs("div", { className: "flex", children: [_jsxs("div", { className: "text-xs", children: [" ", _jsx("i", { className: "pi pi-spin pi-spinner" })] }), _jsx("div", { dangerouslySetInnerHTML: {
+                    }, children: _jsx("i", { className: "pi pi-trash" }) }) }), _jsxs("div", { className: "a-overflow-y-auto a-h-full a-overflow-x-hidden a-p-2", children: [messages.map((m, i) => (_jsx("div", { className: getClasses(m), children: m.text }, i))), response != null && (_jsxs("div", { className: "a-flex", children: [_jsxs("div", { className: "a-text-xs", children: [" ", _jsx("i", { className: "pi pi-spin pi-spinner" })] }), _jsx("div", { dangerouslySetInnerHTML: {
                                     __html: response.replaceAll("\\n", "<br>"),
-                                } })] })), _jsx("div", { ref: bottomRef })] }), _jsx(InputTextarea, { value: value, className: "border-0 border-t-2 rounded-none", onKeyDown: handleKeyPress, onChange: (e) => setValue(e.target.value), rows: 5, cols: 30 })] }));
+                                } })] })), _jsx("div", { ref: bottomRef })] }), _jsx(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 })] }));
 }

package/dist/esm/editor/TranslateEditor.js

@@ -17,5 +17,5 @@ export function TranslateEditor({ text }) {
             ]);
         }
     }, []);
-    return (dictionary[text] || _jsx("span", { className: "p-1 ring-2 ring-red-500", children: text }));
+    return (dictionary[text] || (_jsx("span", { className: "a-p-1 a-ring-2 a-ring-red-500", children: text })));
 }

package/dist/esm/editor/VersionSelector.js

@@ -11,7 +11,7 @@ export function VersionSelector({ page, onVersionSelected, }) {
         return _jsx("span", { children: props.placeholder });
     };
     const versionOptionTemplate = (option) => {
-        return (_jsxs("div", { children: [option.version, " ", _jsxs("div", { className: "text-xs", children: ["(", option.updated.toString(), " by ", option.updatedBy, ")"] })] }));
+        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, { value: page.version, onChange: (e) => onVersionSelected(e.value), options: page.versions, optionValue: "version", optionLabel: "version", placeholder: "Select a version", valueTemplate: selectedVersionTemplate, itemTemplate: versionOptionTemplate }) }));
 }