testeranto 0.203.0 → 0.205.0

package/dist/common/src/app/frontend/components/stateful/FileTree.js

@@ -0,0 +1,59 @@
+"use strict";
+// import React from 'react';
+// import { FileType } from './TextEditorPage';
+// type FileTreeProps = {
+//   files: FileType[];
+//   onSelect: (path: string) => void;
+//   activeFile: string | null;
+// };
+// export const FileTree = ({ files, onSelect, activeFile }: FileTreeProps) => {
+//   // Group files by directory
+//   const fileGroups = files.reduce((acc, file) => {
+//     const dir = file.path.split('/').slice(0, -1).join('/');
+//     if (!acc[dir]) {
+//       acc[dir] = [];
+//     }
+//     acc[dir].push(file);
+//     return acc;
+//   }, {} as Record<string, FileType[]>);
+//   const fileTreeStyle = {
+//     padding: '8px',
+//     fontFamily: 'monospace'
+//   };
+//   const directoryStyle = {
+//     marginBottom: '8px'
+//   };
+//   const directoryNameStyle = {
+//     fontWeight: 'bold',
+//     padding: '4px 0',
+//     color: '#555'
+//   };
+//   const fileStyle = {
+//     padding: '4px 8px',
+//     cursor: 'pointer',
+//     borderRadius: '4px'
+//   };
+//   const activeFileStyle = {
+//     ...fileStyle,
+//     backgroundColor: '#e0e0e0',
+//     fontWeight: 'bold'
+//   };
+//   return (
+//     <div style={fileTreeStyle}>
+//       {Object.entries(fileGroups).map(([dir, dirFiles]) => (
+//         <div key={dir} style={directoryStyle}>
+//           <div style={directoryNameStyle}>{dir || '/'}</div>
+//           {dirFiles.map(file => (
+//             <div 
+//               key={file.path}
+//               style={activeFile === file.path ? activeFileStyle : fileStyle}
+//               onClick={() => onSelect(file.path)}
+//             >
+//               {file.path.split('/').pop()}
+//             </div>
+//           ))}
+//         </div>
+//       ))}
+//     </div>
+//   );
+// };

package/dist/common/src/app/frontend/components/stateful/GenericXMLEditor/AttributeEditor.js

@@ -0,0 +1,51 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AttributeEditor = void 0;
+const react_1 = __importDefault(require("react"));
+const react_bootstrap_1 = require("react-bootstrap");
+const AttributeEditor = ({ node: selectedNode, onUpdateAttributes, onUpdateTextContent }) => {
+    if (!selectedNode) {
+        return (react_1.default.createElement("div", { className: "p-3 text-muted" }, "Select a node to edit its attributes"));
+    }
+    const handleAttributeChange = (key, value) => {
+        const newAttributes = Object.assign({}, selectedNode.attributes);
+        if (value === '') {
+            delete newAttributes[key];
+        }
+        else {
+            newAttributes[key] = value;
+        }
+        onUpdateAttributes(newAttributes);
+    };
+    const handleAddAttribute = () => {
+        const newKey = prompt('Enter attribute name:');
+        if (newKey && newKey.trim() !== '') {
+            const newAttributes = Object.assign(Object.assign({}, selectedNode.attributes), { [newKey]: '' });
+            onUpdateAttributes(newAttributes);
+        }
+    };
+    const handleRemoveAttribute = (key) => {
+        const newAttributes = Object.assign({}, selectedNode.attributes);
+        delete newAttributes[key];
+        onUpdateAttributes(newAttributes);
+    };
+    return (react_1.default.createElement("div", { className: "p-2" },
+        react_1.default.createElement("div", { className: "d-flex justify-content-between align-items-center mb-2" },
+            react_1.default.createElement("h6", { className: "mb-0 small" },
+                "Attributes for ",
+                selectedNode.type),
+            react_1.default.createElement("button", { className: "btn btn-sm btn-outline-success py-0 px-1", onClick: handleAddAttribute }, "+ Add")),
+        Object.entries(selectedNode.attributes).map(([key, value]) => (react_1.default.createElement("div", { key: key, className: "mb-1 d-flex align-items-center" },
+            react_1.default.createElement(react_bootstrap_1.Form.Group, { className: "flex-grow-1 me-1" },
+                react_1.default.createElement(react_bootstrap_1.Form.Label, { className: "small mb-0" }, key),
+                react_1.default.createElement(react_bootstrap_1.Form.Control, { type: "text", size: "sm", value: value, onChange: (e) => handleAttributeChange(key, e.target.value), placeholder: "Value", className: "py-0" })),
+            react_1.default.createElement("button", { className: "btn btn-sm btn-outline-danger py-0 px-1", onClick: () => handleRemoveAttribute(key), style: { marginTop: '1.25rem' } }, "\u00D7")))),
+        Object.keys(selectedNode.attributes).length === 0 && (react_1.default.createElement("div", { className: "text-muted small" }, "No attributes")),
+        onUpdateTextContent && (react_1.default.createElement(react_bootstrap_1.Form.Group, { className: "mt-2" },
+            react_1.default.createElement(react_bootstrap_1.Form.Label, { className: "small mb-0" }, "Text Content"),
+            react_1.default.createElement(react_bootstrap_1.Form.Control, { as: "textarea", rows: 2, value: selectedNode.textContent || '', onChange: (e) => onUpdateTextContent(e.target.value), placeholder: "Text content", className: "py-0" })))));
+};
+exports.AttributeEditor = AttributeEditor;

package/dist/common/src/app/frontend/components/stateful/GenericXMLEditor/Drawer.js

@@ -0,0 +1,152 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Drawer = void 0;
+const react_1 = __importStar(require("react"));
+const Drawer = ({ position, isOpen, zIndex, onBringToFront, title, children }) => {
+    const [size, setSize] = (0, react_1.useState)(position === 'bottom' ? 200 : 300);
+    const [isResizing, setIsResizing] = (0, react_1.useState)(false);
+    const [dragStart, setDragStart] = (0, react_1.useState)({ x: 0, y: 0, size: 0 });
+    const drawerRef = (0, react_1.useRef)(null);
+    const handleMouseDown = (e) => {
+        setIsResizing(true);
+        setDragStart({
+            x: e.clientX,
+            y: e.clientY,
+            size: size
+        });
+        onBringToFront();
+        e.preventDefault();
+    };
+    (0, react_1.useEffect)(() => {
+        const handleMouseMove = (e) => {
+            if (!isResizing)
+                return;
+            switch (position) {
+                case 'left':
+                    setSize(Math.max(40, Math.min(window.innerWidth - 100, dragStart.size + (e.clientX - dragStart.x))));
+                    break;
+                case 'right':
+                    setSize(Math.max(40, Math.min(window.innerWidth - 100, dragStart.size - (e.clientX - dragStart.x))));
+                    break;
+                case 'bottom':
+                    setSize(Math.max(40, Math.min(window.innerHeight - 100, dragStart.size - (e.clientY - dragStart.y))));
+                    break;
+            }
+        };
+        const handleMouseUp = () => {
+            setIsResizing(false);
+        };
+        if (isResizing) {
+            window.addEventListener('mousemove', handleMouseMove);
+            window.addEventListener('mouseup', handleMouseUp);
+            document.body.style.cursor = position === 'bottom' ? 'ns-resize' : 'ew-resize';
+            document.body.style.userSelect = 'none';
+        }
+        return () => {
+            window.removeEventListener('mousemove', handleMouseMove);
+            window.removeEventListener('mouseup', handleMouseUp);
+            document.body.style.cursor = '';
+            document.body.style.userSelect = '';
+        };
+    }, [isResizing, dragStart, position]);
+    const getPositionStyles = () => {
+        switch (position) {
+            case 'left':
+                return {
+                    top: 0,
+                    left: 0,
+                    height: '100%',
+                    width: `${size}px`,
+                    transform: 'none'
+                };
+            case 'right':
+                return {
+                    top: 0,
+                    right: 0,
+                    height: '100%',
+                    width: `${size}px`,
+                    transform: 'none'
+                };
+            case 'bottom':
+                return {
+                    bottom: 0,
+                    left: 0,
+                    width: '100%',
+                    height: `${size}px`,
+                    transform: 'none'
+                };
+            default:
+                return {};
+        }
+    };
+    // Determine which edge to show the drag handle based on position
+    const getDragEdgeStyle = () => {
+        switch (position) {
+            case 'left':
+                return {
+                    right: '0',
+                    top: '0',
+                    height: '100%',
+                    width: '8px',
+                    cursor: 'ew-resize'
+                };
+            case 'right':
+                return {
+                    left: '0',
+                    top: '0',
+                    height: '100%',
+                    width: '8px',
+                    cursor: 'ew-resize'
+                };
+            case 'bottom':
+                return {
+                    top: '0',
+                    left: '0',
+                    width: '100%',
+                    height: '8px',
+                    cursor: 'ns-resize'
+                };
+            default:
+                return {};
+        }
+    };
+    return (react_1.default.createElement("div", { ref: drawerRef, className: `position-absolute bg-light border ${isResizing ? 'user-select-none' : ''}`, style: Object.assign(Object.assign({}, getPositionStyles()), { zIndex, transition: isResizing ? 'none' : 'all 0.3s ease', overflow: 'hidden' }) },
+        react_1.default.createElement("div", { className: "d-flex justify-content-between align-items-center p-2 border-bottom bg-white", onMouseDown: () => onBringToFront(), style: { cursor: 'move' } },
+            react_1.default.createElement("span", null, title)),
+        react_1.default.createElement("div", { className: "h-100", style: { overflow: 'auto' } }, children),
+        react_1.default.createElement("div", { style: Object.assign(Object.assign({ position: 'absolute' }, getDragEdgeStyle()), { backgroundColor: 'rgba(0, 0, 0, 0.2)' }), onMouseDown: handleMouseDown, className: "drag-edge" })));
+};
+exports.Drawer = Drawer;

package/dist/common/src/app/frontend/components/stateful/GenericXMLEditor/GenericPreview.js

@@ -0,0 +1,156 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GenericPreview = void 0;
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+const react_1 = __importStar(require("react"));
+const react_bootstrap_1 = require("react-bootstrap");
+const GenericPreview = ({ onTreeUpdate, xmlTree = {
+    id: "root",
+    type: "root",
+    attributes: {},
+    children: [],
+}, selectedNodeId = null, hiddenNodes = new Set(), renderPreview = (node, isSelected, eventHandlers, onTreeUpdate) => {
+    console.error("Default renderPreview called - this should be overridden");
+    return (react_1.default.createElement("div", { style: {
+            border: isSelected ? "2px solid blue" : "1px solid gray",
+            padding: "4px",
+        } },
+        "Default preview for: ",
+        node.type));
+}, }) => {
+    // Add a check to ensure xmlTree is defined
+    console.log("GenericPreview props:", {
+        xmlTree,
+        selectedNodeId,
+        hiddenNodes,
+        renderPreview,
+        onTreeUpdate
+    });
+    if (!xmlTree) {
+        console.error("xmlTree is undefined in GenericPreview");
+        return react_1.default.createElement("div", null, "No XML tree data available");
+    }
+    const [scale, setScale] = (0, react_1.useState)(1);
+    const [position, setPosition] = (0, react_1.useState)({ x: 0, y: 0 });
+    const [isPanning, setIsPanning] = (0, react_1.useState)(false);
+    const [startPanPoint, setStartPanPoint] = (0, react_1.useState)({ x: 0, y: 0 });
+    const previewRef = (0, react_1.useRef)(null);
+    // Always render the preview using the root xmlTree, not individual nodes
+    // This ensures we only get one preview rendered
+    const previewElement = react_1.default.useMemo(() => {
+        try {
+            const isSelected = selectedNodeId === xmlTree.id;
+            const eventHandlers = {};
+            return renderPreview(xmlTree, isSelected, eventHandlers, onTreeUpdate);
+        }
+        catch (error) {
+            console.error("Error in renderPreview:", error);
+            return (react_1.default.createElement("div", { style: { border: "1px solid red", padding: "4px", margin: "2px" } }, "Error rendering preview"));
+        }
+    }, [xmlTree, selectedNodeId, renderPreview, onTreeUpdate]);
+    // Handle mouse events for panning
+    const handleMouseDown = (0, react_1.useCallback)((e) => {
+        if (e.button === 1 || (e.button === 0 && e.altKey)) {
+            // Middle click or Alt + Left click
+            e.preventDefault();
+            setIsPanning(true);
+            setStartPanPoint({
+                x: e.clientX - position.x,
+                y: e.clientY - position.y,
+            });
+        }
+    }, [position]);
+    const handleMouseMove = (0, react_1.useCallback)((e) => {
+        if (isPanning) {
+            setPosition({
+                x: e.clientX - startPanPoint.x,
+                y: e.clientY - startPanPoint.y,
+            });
+        }
+    }, [isPanning, startPanPoint]);
+    const handleMouseUp = (0, react_1.useCallback)(() => {
+        setIsPanning(false);
+    }, []);
+    const handleWheel = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
+        const delta = -e.deltaY * 0.01;
+        setScale((prevScale) => Math.max(0.1, Math.min(5, prevScale + delta)));
+    }, []);
+    const resetView = (0, react_1.useCallback)(() => {
+        setScale(1);
+        setPosition({ x: 0, y: 0 });
+    }, []);
+    // Check if we're rendering SVG content (root node is svg)
+    let isSVG = false;
+    try {
+        isSVG = xmlTree.type === "svg";
+    }
+    catch (error) {
+        console.error("Error checking if xmlTree is SVG:", error);
+        return (react_1.default.createElement("div", { className: "border rounded p-3 d-flex justify-content-center align-items-center", style: { height: "400px", background: "#f8f9fa" } }, "Error: Invalid XML tree structure"));
+    }
+    // For SVG, we need to handle the transform differently
+    if (isSVG) {
+        return (react_1.default.createElement("div", { className: "border rounded p-3 d-flex justify-content-center align-items-center position-relative", style: { height: "400px", overflow: "hidden" }, ref: previewRef, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onWheel: handleWheel },
+            react_1.default.createElement("div", { className: "position-absolute top-0 end-0 m-2" },
+                react_1.default.createElement(react_bootstrap_1.ButtonGroup, { size: "sm" },
+                    react_1.default.createElement(react_bootstrap_1.Button, { variant: "outline-secondary", onClick: () => setScale((s) => Math.min(5, s + 0.1)) }, "+"),
+                    react_1.default.createElement(react_bootstrap_1.Button, { variant: "outline-secondary", onClick: () => setScale((s) => Math.max(0.1, s - 0.1)) }, "-"),
+                    react_1.default.createElement(react_bootstrap_1.Button, { variant: "outline-secondary", onClick: resetView }, "Reset"))),
+            react_1.default.createElement("div", { style: {
+                    cursor: isPanning ? "grabbing" : scale !== 1 ? "grab" : "default",
+                    transform: `scale(${scale}) translate(${position.x}px, ${position.y}px)`,
+                    transformOrigin: "center center",
+                    transition: isPanning ? "none" : "transform 0.1s ease",
+                } }, previewElement)));
+    }
+    // For non-SVG content (HTML/bootstrap), use a different approach
+    return (react_1.default.createElement("div", { className: "border rounded p-3 position-relative", style: { height: "400px", overflow: "hidden" }, ref: previewRef, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onWheel: handleWheel },
+        react_1.default.createElement("div", { className: "position-absolute top-0 end-0 m-2" },
+            react_1.default.createElement(react_bootstrap_1.ButtonGroup, { size: "sm" },
+                react_1.default.createElement(react_bootstrap_1.Button, { variant: "outline-secondary", onClick: () => setScale((s) => Math.min(5, s + 0.1)) }, "+"),
+                react_1.default.createElement(react_bootstrap_1.Button, { variant: "outline-secondary", onClick: () => setScale((s) => Math.max(0.1, s - 0.1)) }, "-"),
+                react_1.default.createElement(react_bootstrap_1.Button, { variant: "outline-secondary", onClick: resetView }, "Reset"))),
+        react_1.default.createElement("div", { style: {
+                cursor: isPanning ? "grabbing" : scale !== 1 ? "grab" : "default",
+                transform: `scale(${scale}) translate(${position.x}px, ${position.y}px)`,
+                transformOrigin: "0 0",
+                transition: isPanning ? "none" : "transform 0.1s ease",
+                height: "100%",
+            } }, previewElement)));
+};
+exports.GenericPreview = GenericPreview;

package/dist/common/src/app/frontend/components/stateful/GenericXMLEditor/GenericTextEditor.js

@@ -0,0 +1,169 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GenericTextEditor = void 0;
+const react_1 = __importStar(require("react"));
+const react_bootstrap_1 = require("react-bootstrap");
+// Function to convert XMLNode to proper XML string
+const nodeToXML = (node, depth = 0) => {
+    const indent = '  '.repeat(depth);
+    // Handle attributes
+    const attributes = Object.entries(node.attributes || {})
+        .map(([key, value]) => ` ${key}="${value}"`)
+        .join('');
+    // Handle text content
+    const hasTextContent = node.textContent && node.textContent.trim().length > 0;
+    if (node.children.length === 0) {
+        if (hasTextContent) {
+            return `${indent}<${node.type}${attributes}>${node.textContent}</${node.type}>`;
+        }
+        else {
+            return `${indent}<${node.type}${attributes} />`;
+        }
+    }
+    else {
+        let result = `${indent}<${node.type}${attributes}`;
+        if (hasTextContent) {
+            result += `>${node.textContent}\n`;
+        }
+        else {
+            result += '>\n';
+        }
+        // Add children
+        node.children.forEach(child => {
+            result += nodeToXML(child, depth + 1) + '\n';
+        });
+        result += `${indent}</${node.type}>`;
+        return result;
+    }
+};
+// Function to parse XML string back to XMLNode structure
+const parseXmlString = (xmlString) => {
+    // Remove XML declaration if present
+    const cleanXmlString = xmlString.replace(/<\?xml.*?\?>\s*/s, '');
+    const parser = new DOMParser();
+    const xmlDoc = parser.parseFromString(cleanXmlString, 'text/xml');
+    const parseElement = (element) => {
+        var _a;
+        // Get attributes
+        const attributes = {};
+        for (let i = 0; i < element.attributes.length; i++) {
+            const attr = element.attributes[i];
+            attributes[attr.name] = attr.value;
+        }
+        // Process children
+        const children = [];
+        let textContent;
+        for (let i = 0; i < element.childNodes.length; i++) {
+            const node = element.childNodes[i];
+            if (node.nodeType === Node.ELEMENT_NODE) {
+                children.push(parseElement(node));
+            }
+            else if (node.nodeType === Node.TEXT_NODE && ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim())) {
+                textContent = (textContent || '') + node.textContent;
+            }
+        }
+        // Trim text content if it exists
+        if (textContent) {
+            textContent = textContent.trim();
+        }
+        return {
+            id: `${element.nodeName}-${Date.now()}-${Math.random()}`,
+            type: element.nodeName,
+            attributes,
+            children,
+            textContent: textContent || undefined
+        };
+    };
+    // Get the root element
+    const rootElement = xmlDoc.documentElement;
+    return parseElement(rootElement);
+};
+const GenericTextEditor = ({ xmlTree, onUpdateTree }) => {
+    const [xmlContent, setXmlContent] = (0, react_1.useState)('');
+    const [error, setError] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        try {
+            if (!xmlTree) {
+                setXmlContent('');
+                return;
+            }
+            // Generate proper XML content with XML declaration
+            const content = `<?xml version="1.0" encoding="UTF-8"?>\n${nodeToXML(xmlTree, 0)}`;
+            setXmlContent(content);
+            setError(null);
+        }
+        catch (err) {
+            setError('Error generating XML');
+        }
+    }, [xmlTree]);
+    const handleXmlChange = (e) => {
+        const newContent = e.target.value;
+        setXmlContent(newContent);
+        setError(null);
+    };
+    const applyChanges = () => {
+        try {
+            // Parse the XML content back to XMLNode structure
+            const newTree = parseXmlString(xmlContent);
+            onUpdateTree(newTree);
+            setError(null);
+        }
+        catch (err) {
+            setError('Error parsing XML: ' + (err instanceof Error ? err.message : String(err)));
+        }
+    };
+    return (react_1.default.createElement("div", { className: "h-100 d-flex flex-column align-items-center p-1" },
+        react_1.default.createElement("div", { style: { width: '100%', maxWidth: '100%', flex: 1, display: 'flex', flexDirection: 'column' } },
+            react_1.default.createElement("textarea", { value: xmlContent, onChange: handleXmlChange, style: {
+                    width: '100%',
+                    background: '#f8f9fa',
+                    padding: '0.5rem',
+                    borderRadius: '0.125rem',
+                    flex: 1,
+                    fontFamily: 'monospace',
+                    whiteSpace: 'pre',
+                    wordBreak: 'break-word',
+                    lineHeight: '1.2',
+                    outline: 'none',
+                    border: '1px solid #ced4da',
+                    resize: 'none',
+                    fontSize: '0.875rem'
+                } }),
+            error && (react_1.default.createElement(react_bootstrap_1.Alert, { variant: "danger", className: "mt-1 py-1" },
+                react_1.default.createElement("small", null, error))),
+            react_1.default.createElement(react_bootstrap_1.Button, { variant: "primary", onClick: applyChanges, className: "mt-1 py-0", disabled: !!error, size: "sm" }, "Apply"))));
+};
+exports.GenericTextEditor = GenericTextEditor;

package/dist/common/src/app/frontend/components/stateful/GenericXMLEditor/GenericTree.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GenericTree = void 0;
+const react_1 = __importDefault(require("react"));
+const react_bootstrap_1 = require("react-bootstrap");
+const GenericTree = ({ node, selectedNodeId, onSelectNode, onAddNode, onRemoveNode, onToggleVisibility, hiddenNodes, nodeTypes }) => {
+    const isSelected = node.id === selectedNodeId;
+    const isHidden = hiddenNodes.has(node.id);
+    return (react_1.default.createElement("li", { style: { listStyle: 'none', marginLeft: '0', paddingLeft: '10px' } },
+        react_1.default.createElement("div", { className: `d-flex justify-content-between align-items-center p-0 ${isSelected ? 'bg-primary text-white rounded-sm' : ''}`, onClick: () => onSelectNode(node.id), style: { cursor: 'pointer' } },
+            react_1.default.createElement("span", { className: "flex-grow-1 small" }, node.type),
+            node.type !== 'root' && (react_1.default.createElement(react_bootstrap_1.ButtonGroup, { size: "sm" },
+                react_1.default.createElement(react_bootstrap_1.Button, { variant: "outline-secondary", onClick: (e) => {
+                        e.stopPropagation();
+                        onToggleVisibility(node.id);
+                    }, title: isHidden ? 'Show node' : 'Hide node' }, isHidden ? '👁️‍🗨️' : '👁️'),
+                react_1.default.createElement(react_bootstrap_1.Button, { variant: "outline-danger", onClick: (e) => {
+                        e.stopPropagation();
+                        onRemoveNode(node.id);
+                    }, title: "Remove node" }, "\u00D7")))),
+        node.children.length > 0 && (react_1.default.createElement("ul", { style: { marginLeft: '10px', paddingLeft: '0' } }, node.children.map((child) => (react_1.default.createElement(exports.GenericTree, { key: child.id, node: child, selectedNodeId: selectedNodeId, onSelectNode: onSelectNode, onAddNode: onAddNode, onRemoveNode: onRemoveNode, onToggleVisibility: onToggleVisibility, hiddenNodes: hiddenNodes, nodeTypes: nodeTypes }))))),
+        isSelected && (react_1.default.createElement("div", { className: "mt-0" },
+            react_1.default.createElement(react_bootstrap_1.Dropdown, null,
+                react_1.default.createElement(react_bootstrap_1.Dropdown.Toggle, { size: "sm", variant: "outline-success", id: "dropdown-add-node", className: "py-0 px-1" }, "+"),
+                react_1.default.createElement(react_bootstrap_1.Dropdown.Menu, null, nodeTypes.map(({ label, type }) => (react_1.default.createElement(react_bootstrap_1.Dropdown.Item, { key: type, onClick: () => onAddNode(node.id, type), className: "small" }, label)))))))));
+};
+exports.GenericTree = GenericTree;