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

package/dist/cjs/components/Link.js

@@ -10,13 +10,22 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Link = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const __1 = require("..");
+const LinkEditor_1 = __importDefault(require("./LinkEditor"));
 function Link(_a) {
+    var _b;
     var { field, children } = _a, props = __rest(_a, ["field", "children"]);
     if (!field)
         return;
+    const editing = (_b = (0, __1.useAlpacaContext)().pageContext) === null || _b === void 0 ? void 0 : _b.pageEditing;
+    if (editing)
+        return ((0, jsx_runtime_1.jsx)(LinkEditor_1.default, Object.assign({ field: field, children: children }, props)));
     return ((0, jsx_runtime_1.jsx)("a", Object.assign({ href: field.value.url }, props, { children: children })));
 }
 exports.Link = Link;

package/dist/cjs/components/LinkEditor.js

@@ -0,0 +1,22 @@
+"use strict";
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+function LinkEditor(_a) {
+    var { field, children } = _a, props = __rest(_a, ["field", "children"]);
+    if (!field)
+        return;
+    return ((0, jsx_runtime_1.jsx)("a", Object.assign({ href: field.value.url }, props, { onClick: (e) => e.preventDefault(), children: children })));
+}
+exports.default = LinkEditor;

package/dist/cjs/components/PictureEditor.js

@@ -22,12 +22,10 @@ const dialog_1 = require("primereact/dialog");
 const PictureEditor = (_a) => {
     var _b, _c;
     var { field, imageParams, sources, defaultVariant, renderJsonLinkedData } = _a, otherProps = __rest(_a, ["field", "imageParams", "sources", "defaultVariant", "renderJsonLinkedData"]);
-    function selectImage() {
-        setMediaSelectorVisible(true);
-    }
     const editContext = (0, __1.useEditContext)();
     const [mediaSelectorVisible, setMediaSelectorVisible] = (0, react_1.useState)(false);
     const [editorVisible, setEditorVisible] = (0, react_1.useState)(false);
+    const [selectedVariant, setSelectedVariant] = (0, react_1.useState)();
     if (!editContext)
         return;
     function imageSelected(imageId) {
@@ -38,6 +36,7 @@ const PictureEditor = (_a) => {
             editContext === null || editContext === void 0 ? void 0 : editContext.editField(field, JSON.stringify(value), false);
     }
     console.log(JSON.stringify(field));
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MediaSelector_1.MediaSelector, { visible: mediaSelectorVisible, onHide: () => setMediaSelectorVisible(false), onMediaSelected: imageSelected }), (0, jsx_runtime_1.jsxs)(dialog_1.Dialog, { header: "Header", visible: editorVisible, style: { width: "50vw" }, onHide: () => setEditorVisible(false), children: [(0, jsx_runtime_1.jsx)("div", { className: "flex gap-1", 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) => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "h-24 w-24 border", children: variant.src && (0, jsx_runtime_1.jsx)("img", { src: variant.src }) }), (0, jsx_runtime_1.jsx)("div", { children: variant.name }), (0, jsx_runtime_1.jsx)("div", { children: variant.aspectRatioText })] }))) }), (0, jsx_runtime_1.jsx)("div", { onClick: selectImage, children: "Select image" })] }), (0, jsx_runtime_1.jsxs)("span", Object.assign({}, otherProps, { onClick: () => setEditorVisible(true), children: ["PICTURE", (0, jsx_runtime_1.jsx)(Picture_1.Picture, { field: field, imageParams: imageParams, sources: sources })] }))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MediaSelector_1.MediaSelector, { visible: mediaSelectorVisible, onHide: () => setMediaSelectorVisible(false), onMediaSelected: imageSelected }), (0, jsx_runtime_1.jsx)(dialog_1.Dialog, { header: "Header", visible: editorVisible, style: { width: "50vw" }, onHide: () => setEditorVisible(false), children: (0, jsx_runtime_1.jsx)("div", { className: "a-flex a-gap-1", 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) => ((0, jsx_runtime_1.jsxs)("div", { onClick: () => setSelectedVariant(variant), children: [(0, jsx_runtime_1.jsxs)("div", { className: "a-h-24 a-w-24 a-border a-relative" +
+                                    (selectedVariant == variant ? " a-shadow-xl " : ""), children: [variant.src && (0, jsx_runtime_1.jsx)("img", { src: variant.src }), (0, jsx_runtime_1.jsx)("div", { className: "a-absolute " })] }, variant.name), (0, jsx_runtime_1.jsx)("div", { children: variant.name }), (0, jsx_runtime_1.jsx)("div", { children: variant.aspectRatioText })] }))) }) }), (0, jsx_runtime_1.jsxs)("span", Object.assign({}, otherProps, { onClick: () => setEditorVisible(true), children: ["PICTURE", (0, jsx_runtime_1.jsx)(Picture_1.Picture, { field: field, imageParams: imageParams, sources: sources })] }))] }));
 };
 exports.PictureEditor = PictureEditor;

package/dist/cjs/editor/AiTerminal.js

@@ -16,7 +16,7 @@ const react_1 = require("react");
 const terminalservice_1 = require("primereact/terminalservice");
 const navigation_1 = require("next/navigation");
 const Terminal_1 = require("./Terminal");
-function AiTerminal({ requestRefresh, selection }) {
+function AiTerminal({ requestRefresh, selection, }) {
     const searchParams = (0, navigation_1.useSearchParams)();
     const [messages, setMessages] = (0, react_1.useState)([]);
     const [tokens, setTokens] = (0, react_1.useState)({ in: 0, out: 0 });
@@ -31,11 +31,17 @@ function AiTerminal({ requestRefresh, selection }) {
     const router = (0, navigation_1.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) {
@@ -62,7 +68,11 @@ 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
@@ -70,29 +80,30 @@ function AiTerminal({ requestRefresh, selection }) {
             setMessages(newMessages);
         });
     }
-    ;
     (0, react_1.useEffect)(() => {
-        terminalservice_1.TerminalService.on('command', commandHandler);
+        terminalservice_1.TerminalService.on("command", commandHandler);
         return () => {
-            terminalservice_1.TerminalService.off('command', commandHandler);
+            terminalservice_1.TerminalService.off("command", commandHandler);
         };
     }, []);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: 'h-full flex flex-col relative', children: [(0, jsx_runtime_1.jsx)("div", { className: 'flex-1 relative', children: (0, jsx_runtime_1.jsx)("div", { className: 'inset-0 absolute', children: (0, jsx_runtime_1.jsx)(Terminal_1.Terminal, { onReset: () => setMessages([]), commandHandler: (v, callback) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "a-h-full a-flex a-flex-col a-relative", children: [(0, jsx_runtime_1.jsx)("div", { className: "a-flex-1 a-relative", children: (0, jsx_runtime_1.jsx)("div", { className: "a-inset-0 a-absolute", children: (0, jsx_runtime_1.jsx)(Terminal_1.Terminal, { onReset: () => setMessages([]), commandHandler: (v, callback) => {
                             commandHandler(v, callback);
-                        } }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: 'text-xs', children: ["Tokens in: ", tokens.in, " out: ", tokens.out] })] }));
+                        } }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "a-text-xs", children: ["Tokens in: ", tokens.in, " out: ", tokens.out] })] }));
 }
 exports.AiTerminal = AiTerminal;
 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(),
@@ -105,7 +116,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();
@@ -114,11 +125,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);
@@ -126,19 +137,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/cjs/editor/ComponentInfo.js

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

package/dist/cjs/editor/ComponentPalette.js

@@ -34,7 +34,7 @@ function ComponentPalette({ selection, page, dragStart, dragEnd, }) {
     //     editContext!.droppedInPlaceholder(key, parseInt(index));
     //   }
     // }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-xl font-bold mb-8", children: "New" }), (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-4 gap-1", children: insertOptions.map((option) => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", { className: "a-text-xl a-font-bold a-mb-8", children: "New" }), (0, jsx_runtime_1.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();
@@ -45,7 +45,7 @@ function ComponentPalette({ selection, page, dragStart, dragEnd, }) {
                     return ((0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)("img", { src: option.icon, width: "32", height: "32" }), option.name] }, option.id));
-                }) }), (0, jsx_runtime_1.jsx)("h2", { className: "text-xl font-bold my-8", children: "Existing" }), (0, jsx_runtime_1.jsx)(ContentTree_1.default, { rootItemId: "0DE95AE4-41AB-4D01-9EB0-67441B7C2450", dragStart: (itemNode) => {
+                }) }), (0, jsx_runtime_1.jsx)("h2", { className: "a-text-xl a-font-bold a-my-8", children: "Existing" }), (0, jsx_runtime_1.jsx)(ContentTree_1.default, { rootItemId: "0DE95AE4-41AB-4D01-9EB0-67441B7C2450", dragStart: (itemNode) => {
                     dragStart({
                         type: "link-component",
                         templateId: itemNode.templateId,

package/dist/cjs/editor/ComponentTree.js

@@ -153,7 +153,7 @@ function ComponentTree({ page, selection, }) {
             if (node)
                 alert(node.getAttribute("data-key"));
             ev.stopPropagation();
-        }, children: [(0, jsx_runtime_1.jsx)(contextmenu_1.ContextMenu, { model: menu, ref: cm }), (0, jsx_runtime_1.jsx)(tree_1.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: [(0, jsx_runtime_1.jsx)(contextmenu_1.ContextMenu, { model: menu, ref: cm }), (0, jsx_runtime_1.jsx)(tree_1.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/cjs/editor/ContentTree.js

@@ -89,11 +89,11 @@ function ContentTree({ isDraggable, dragStart, dragEnd, expandIdPath, selectionM
     const nodeTemplate = (node, options) => {
         let label = (0, jsx_runtime_1.jsx)("b", { children: node.label });
         if (node.url) {
-            label = ((0, jsx_runtime_1.jsx)("a", { onDragStart: (e) => e.preventDefault(), href: node.url, className: "text-primary hover:underline font-semibold", children: node.label }));
+            label = ((0, jsx_runtime_1.jsx)("a", { onDragStart: (e) => e.preventDefault(), href: node.url, className: "a-text-primary hover:a-underline a-font-semibold", children: node.label }));
         }
         return ((0, jsx_runtime_1.jsxs)("span", { onDragStart: (event) => {
                 handleDragStart(event, node.data);
-            }, onDragEnd: handleDragEnd, draggable: node.isDraggable, className: `flex gap-2 ${node.isDraggable ? "cursor-grab" : ""} ${options.className}`, children: [(0, jsx_runtime_1.jsx)("img", { src: node.iconUrl, style: { height: "20px" }, width: "20", height: "20", onDragStart: (e) => e.preventDefault() }), label, node.loading && ((0, jsx_runtime_1.jsx)(progressspinner_1.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: [(0, jsx_runtime_1.jsx)("img", { src: node.iconUrl, style: { height: "20px" }, width: "20", height: "20", onDragStart: (e) => e.preventDefault() }), label, node.loading && ((0, jsx_runtime_1.jsx)(progressspinner_1.ProgressSpinner, { style: { width: "20px", height: "20px" } }))] }));
     };
     function handleDragStart(event, item) {
         if (dragStart)
@@ -110,7 +110,7 @@ function ContentTree({ isDraggable, dragStart, dragEnd, expandIdPath, selectionM
     });
     return ((0, jsx_runtime_1.jsx)("div", { onDragEnterCapture: (ev) => ev.stopPropagation(), onDragOverCapture: (ev) => ev.stopPropagation(), onDragLeaveCapture: (ev) => ev.stopPropagation(), children: (0, jsx_runtime_1.jsx)(tree_1.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/cjs/editor/EditFrame.js

@@ -27,7 +27,7 @@ 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;
@@ -47,11 +47,11 @@ 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 ((0, jsx_runtime_1.jsxs)("div", { className: classNames, onClick: select, draggable: isDraggable, onDragStart: handleDragStart, children: [isSelected && ((0, jsx_runtime_1.jsxs)("div", { className: `absolute top-0 right-0 text-white px-3 bg-${color} ${isDraggable ? "cursor-move" : ""}`, children: [clientComponent.name, (0, jsx_runtime_1.jsx)("button", { className: "ml-3", onClick: (ev) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: classNames, onClick: select, draggable: isDraggable, onDragStart: handleDragStart, children: [isSelected && ((0, jsx_runtime_1.jsxs)("div", { className: `a-absolute a-top-0 a-right-0 a-text-white a-px-3 a-bg-${color} ${isDraggable ? "a-cursor-move" : ""}`, children: [clientComponent.name, (0, jsx_runtime_1.jsx)("button", { className: "a-ml-3", onClick: (ev) => {
                             ev.preventDefault();
                             ev.stopPropagation();
                             editContext.removeComponent(clientComponent.linkItemId || clientComponent.id, () => setIsRemoved(true));
-                        }, children: (0, jsx_runtime_1.jsx)("i", { className: "pi pi-trash" }) }), clientComponent.placeholders.length > 0 && ((0, jsx_runtime_1.jsx)("button", { className: "ml-3", onClick: (ev) => {
+                        }, children: (0, jsx_runtime_1.jsx)("i", { className: "pi pi-trash" }) }), clientComponent.placeholders.length > 0 && ((0, jsx_runtime_1.jsx)("button", { className: "a-ml-3", onClick: (ev) => {
                             editContext.setSelectedForInsertion(clientComponent.id);
                             editContext.openComponentPalette();
                             ev.stopPropagation();

package/dist/cjs/editor/EditHistory.js

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

package/dist/cjs/editor/EditorClient.js

@@ -43,6 +43,9 @@ const PageInfo_1 = require("./PageInfo");
 const VersionSelector_1 = require("./VersionSelector");
 const editService_1 = require("./editService");
 require("../../editor.css");
+require("../../primereact/resources/primereact.min.css");
+require("../../primeicons/primeicons.css");
+require("../../primereact/resources/themes/lara-light-indigo/theme.css");
 // Hook
 function useEventListener(eventName, handler, element) {
     // Create a ref that stores handler
@@ -452,6 +455,6 @@ function EditorClient({ content, dictionaryObject, edit, children, }) {
                                     setHidePalette(false);
                                 }
                                 setSelectedForInsertion("");
-                            } })) }), (0, jsx_runtime_1.jsxs)(blockui_1.BlockUI, { blocked: uiBlocked, template: spinner, children: [(0, jsx_runtime_1.jsx)(menubar_1.Menubar, { model: menuItems, end: endContent }), (0, jsx_runtime_1.jsxs)(splitter_1.Splitter, { children: [(0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { size: 25, className: "alpaca-overflow-scroll", children: (0, jsx_runtime_1.jsxs)(splitter_1.Splitter, { layout: "vertical", children: [(0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { className: "overflow-hidden relative", children: (0, jsx_runtime_1.jsx)("div", { className: "inset-0 absolute overflow-y-auto", children: (0, jsx_runtime_1.jsx)(ComponentTree_1.ComponentTree, { page: page, selection: selection }) }) }), (0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { className: "alpaca-editor-tabs", children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, { className: "inset-0 absolute", scrollable: true, children: [selectedComponent && ((0, jsx_runtime_1.jsxs)(tabview_1.TabPanel, { header: "Fields", children: [(0, jsx_runtime_1.jsx)(ComponentInfo_1.ComponentInfo, { component: selectedComponent }), (0, jsx_runtime_1.jsx)(FieldList_1.FieldList, { fields: selectedComponent.fields })] })), selectedComponent && ((0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "GraphQL", style: { height: "100%" }, children: (0, jsx_runtime_1.jsx)(GraphQL_1.GraphQL, { component: selectedComponent }) })), (0, jsx_runtime_1.jsxs)(tabview_1.TabPanel, { header: "Page", children: [page && (0, jsx_runtime_1.jsx)(PageInfo_1.PageInfo, { page: page }), page && (0, jsx_runtime_1.jsx)(FieldList_1.FieldList, { fields: page.fields })] }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Dictionary", children: (0, jsx_runtime_1.jsx)(DictionaryEditor_1.DictionaryEditor, { dictionary: dictionary }) }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Debug", children: (0, jsx_runtime_1.jsx)(Debug_1.Debug, { component: selectedComponent, page: page }) })] }) })] }) }), (0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { size: 55, className: "alpaca-overflow-scroll alpaca-editor-content", children: (0, jsx_runtime_1.jsx)("div", { onDragEndCapture: () => setDragObject(undefined), children: children }) }), (0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { size: 20, children: (0, jsx_runtime_1.jsxs)(splitter_1.Splitter, { layout: "vertical", className: "alpaca-editor", children: [(0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { className: "overflow-hidden relative", children: (0, jsx_runtime_1.jsx)(EditHistory_1.EditHistory, { operations: editData === null || editData === void 0 ? void 0 : editData.operations }) }), (0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { className: "overflow-hidden relative", children: (0, jsx_runtime_1.jsx)(AiTerminal_1.AiTerminal, { selection: selection, requestRefresh: requestRefresh }) })] }) })] })] })] })] }));
+                            } })) }), (0, jsx_runtime_1.jsxs)(blockui_1.BlockUI, { blocked: uiBlocked, template: spinner, children: [(0, jsx_runtime_1.jsx)(menubar_1.Menubar, { model: menuItems, end: endContent }), (0, jsx_runtime_1.jsxs)(splitter_1.Splitter, { children: [(0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { size: 25, className: "alpaca-overflow-scroll", children: (0, jsx_runtime_1.jsxs)(splitter_1.Splitter, { layout: "vertical", children: [(0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { className: "a-overflow-hidden a-relative", children: (0, jsx_runtime_1.jsx)("div", { className: "a-inset-0 a-absolute a-overflow-y-auto", children: (0, jsx_runtime_1.jsx)(ComponentTree_1.ComponentTree, { page: page, selection: selection }) }) }), (0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { className: "alpaca-editor-tabs", children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, { className: "a-inset-0 a-absolute", scrollable: true, children: [selectedComponent && ((0, jsx_runtime_1.jsxs)(tabview_1.TabPanel, { header: "Fields", children: [(0, jsx_runtime_1.jsx)(ComponentInfo_1.ComponentInfo, { component: selectedComponent }), (0, jsx_runtime_1.jsx)(FieldList_1.FieldList, { fields: selectedComponent.fields })] })), selectedComponent && ((0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "GraphQL", style: { height: "100%" }, children: (0, jsx_runtime_1.jsx)(GraphQL_1.GraphQL, { component: selectedComponent }) })), (0, jsx_runtime_1.jsxs)(tabview_1.TabPanel, { header: "Page", children: [page && (0, jsx_runtime_1.jsx)(PageInfo_1.PageInfo, { page: page }), page && (0, jsx_runtime_1.jsx)(FieldList_1.FieldList, { fields: page.fields })] }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Dictionary", children: (0, jsx_runtime_1.jsx)(DictionaryEditor_1.DictionaryEditor, { dictionary: dictionary }) }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Debug", children: (0, jsx_runtime_1.jsx)(Debug_1.Debug, { component: selectedComponent, page: page }) })] }) })] }) }), (0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { size: 55, className: "alpaca-overflow-scroll alpaca-editor-content", children: (0, jsx_runtime_1.jsx)("div", { onDragEndCapture: () => setDragObject(undefined), className: "alpaca-editor-container", children: children }) }), (0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { size: 20, children: (0, jsx_runtime_1.jsxs)(splitter_1.Splitter, { layout: "vertical", className: "alpaca-editor", children: [(0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { className: "overflow-hidden a-relative", children: (0, jsx_runtime_1.jsx)(EditHistory_1.EditHistory, { operations: editData === null || editData === void 0 ? void 0 : editData.operations }) }), (0, jsx_runtime_1.jsx)(splitter_1.SplitterPanel, { className: "overflow-hidden a-relative", children: (0, jsx_runtime_1.jsx)(AiTerminal_1.AiTerminal, { selection: selection, requestRefresh: requestRefresh }) })] }) })] })] })] })] }));
 }
 exports.EditorClient = EditorClient;

package/dist/cjs/editor/FieldList.js

@@ -23,11 +23,11 @@ function FieldList({ fields }) {
     }, {});
     const sectionList = Object.values(sections);
     sectionList.sort((a, b) => b[0].sortOrder - a[0].sortOrder);
-    return ((0, jsx_runtime_1.jsx)("div", { className: "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))) }));
+    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: "text-xs p-0 m-1", children: "Reset " })) : ((0, jsx_runtime_1.jsx)("button", { children: "Fallback" })), (0, jsx_runtime_1.jsx)("div", { children: getFieldEditor(field) })] }, field.id)));
+    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) {

package/dist/cjs/editor/GraphQL.js

@@ -19,7 +19,7 @@ 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 === null || component === void 0 ? void 0 : component.graphql))
+    if (!component)
         return;
     (0, react_1.useEffect)(() => {
         setQuery(component.graphql_query);
@@ -85,6 +85,6 @@ function GraphQL({ component }) {
         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: "relative", children: (0, jsx_runtime_1.jsxs)("div", { className: "absolute inset-0 flex", children: [(0, jsx_runtime_1.jsx)(inputtextarea_1.InputTextarea, { value: query, onChange: (e) => setQuery(e.target.value), className: "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: "inset-0 absolute", children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Data", style: { height: "100%" }, className: "relative", children: (0, jsx_runtime_1.jsx)("div", { className: "m-1", children: Object.values(fieldsjsonValues).map((x) => renderItem(x)) }) }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "JSON", className: "relative", style: { height: "100%" }, children: (0, jsx_runtime_1.jsx)("div", { className: "inset-0 absolute overflow-y-auto", children: (0, jsx_runtime_1.jsx)(react_json_pretty_1.default, { data: component.graphql }) }) })] }) })] }));
+    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/PageInfo.js

@@ -7,6 +7,6 @@ function PageInfo({ page }) {
     var _a;
     if (!(page === null || page === void 0 ? void 0 : page.fields))
         return;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "p-1", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-xl font-bold my-2", children: page.path }), (0, jsx_runtime_1.jsxs)("div", { className: "text-xs", children: ["ID: ", page.id] }), (0, jsx_runtime_1.jsxs)("div", { className: "text-xs", children: ["Language: ", page.language] }), (0, jsx_runtime_1.jsxs)("div", { className: "text-xs", children: ["Version: ", page.version] }), page.translations && ((0, jsx_runtime_1.jsxs)("div", { className: "text-xs", children: ["Languages: ", (_a = page.translations) === null || _a === void 0 ? void 0 : _a.join(", ")] }))] }));
+    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

@@ -42,13 +42,13 @@ function PlaceholderDropZone({ placeholder, index, parentName, }) {
         editContext.droppedInPlaceholder(placeholder.key, index);
     }
     if (isInserting)
-        return ((0, jsx_runtime_1.jsx)("div", { className: " bg-gray-200 p-10", children: (0, jsx_runtime_1.jsx)(progressbar_1.ProgressBar, { mode: "indeterminate", style: { height: "6px" } }) }));
+        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: "p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4", children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-xl font-medium text-black", children: ["Placeholder ", parentName, " / ", placeholder.name, " ", index] }), (0, jsx_runtime_1.jsx)("p", { className: "text-gray-500", children: "You can add your components here." })] }) }) }));
+        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/Terminal.js

@@ -41,11 +41,11 @@ function Terminal({ commandHandler, onReset, }) {
             return "text-blue-500";
         return "";
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col h-full", children: [(0, jsx_runtime_1.jsx)("div", { className: "p-4 border-b border-gray-200", children: (0, jsx_runtime_1.jsx)("button", { onClick: () => {
+    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: "overflow-y-auto h-full overflow-x-hidden 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: "flex", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-xs", children: [" ", (0, jsx_runtime_1.jsx)("i", { className: "pi pi-spin pi-spinner" })] }), (0, jsx_runtime_1.jsx)("div", { dangerouslySetInnerHTML: {
+                    }, 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: "border-0 border-t-2 rounded-none", onKeyDown: handleKeyPress, onChange: (e) => setValue(e.target.value), rows: 5, cols: 30 })] }));
+                                } })] })), (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

@@ -20,6 +20,6 @@ function TranslateEditor({ text }) {
             ]);
         }
     }, []);
-    return (dictionary[text] || (0, jsx_runtime_1.jsx)("span", { className: "p-1 ring-2 ring-red-500", children: 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

@@ -14,7 +14,7 @@ function VersionSelector({ page, onVersionSelected, }) {
         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: "text-xs", children: ["(", option.updated.toString(), " by ", option.updatedBy, ")"] })] }));
+        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 }) }));
 }