testeranto 0.203.0 → 0.205.0

package/dist/module/src/app/frontend/components/stateful/ProcessManagerPage.js

@@ -0,0 +1,76 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { useState, useEffect, useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useWebSocket } from '../../useWebSocket';
+import { ProcessManagerView } from '../pure/ProcessManagerView';
+// import { ProcessManagerView, Process } from '../pure/ProcessManagerView';
+// import { useWebSocket } from '../../App';
+export const ProcessManagerPage = () => {
+    const [processes, setProcesses] = useState([]);
+    const { ws } = useWebSocket();
+    const [loading, setLoading] = useState(false);
+    const navigate = useNavigate();
+    // Handle WebSocket messages
+    useEffect(() => {
+        if (!ws)
+            return;
+        const handleMessage = (event) => {
+            try {
+                const data = JSON.parse(event.data);
+                if (data.type === 'runningProcesses') {
+                    // Processes should come with their full logs
+                    setProcesses(data.processes.map((p) => (Object.assign(Object.assign({}, p), { status: p.status || 'running', logs: p.logs || [] }))));
+                    setLoading(false);
+                }
+                else if (data.type === 'processStarted') {
+                    setProcesses(prev => [...prev, Object.assign(Object.assign({}, data), { status: 'running', logs: data.logs || [] })]);
+                }
+                else if (data.type === 'processExited') {
+                    setProcesses(prev => prev.map(p => p.processId === data.processId
+                        ? Object.assign(Object.assign({}, p), { status: 'exited', exitCode: data.exitCode }) : p));
+                }
+                else if (data.type === 'processError') {
+                    setProcesses(prev => prev.map(p => p.processId === data.processId
+                        ? Object.assign(Object.assign({}, p), { status: 'error', error: data.error }) : p));
+                }
+                else if (data.type === 'processStdout' || data.type === 'processStderr') {
+                    setProcesses(prev => prev.map(p => p.processId === data.processId
+                        ? Object.assign(Object.assign({}, p), { logs: [...(p.logs || []), data.data] }) : p));
+                }
+            }
+            catch (error) {
+                console.error('Error parsing process message:', error);
+                setLoading(false);
+            }
+        };
+        ws.addEventListener('message', handleMessage);
+        // Request current processes when connected
+        if (ws.readyState === WebSocket.OPEN) {
+            setLoading(true);
+            ws.send(JSON.stringify({ type: 'getRunningProcesses' }));
+        }
+        return () => {
+            ws.removeEventListener('message', handleMessage);
+        };
+    }, [ws]);
+    const handleRefresh = useCallback(() => {
+        if (ws && ws.readyState === WebSocket.OPEN) {
+            setLoading(true);
+            ws.send(JSON.stringify({ type: 'getRunningProcesses' }));
+        }
+    }, [ws]);
+    const handleKillProcess = useCallback((processId) => {
+        if (ws && ws.readyState === WebSocket.OPEN) {
+            ws.send(JSON.stringify({
+                type: 'killProcess',
+                processId
+            }));
+        }
+    }, [ws]);
+    const handleBack = useCallback(() => {
+        navigate('/');
+    }, [navigate]);
+    return (
+    // don't put this in AppFrame- this is correct
+    React.createElement(ProcessManagerView, { processes: processes, onRefresh: handleRefresh, onBack: handleBack, loading: loading, onKillProcess: handleKillProcess }));
+};

package/dist/module/src/app/frontend/components/stateful/ProjectPage.js

@@ -0,0 +1,71 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { useEffect, useState } from "react";
+import { useParams, useNavigate, useLocation } from "react-router-dom";
+import { ProjectPageView } from "../pure/ProjectPageView";
+import { summaryDotJson } from "../../api";
+export const ProjectPage = () => {
+    const [summary, setSummary] = useState(null);
+    const [nodeLogs, setNodeLogs] = useState(null);
+    const [webLogs, setWebLogs] = useState(null);
+    const [pureLogs, setPureLogs] = useState(null);
+    const [config, setConfig] = useState({});
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [projectName, setProjectName] = useState("");
+    const navigate = useNavigate();
+    const location = useLocation();
+    const [route, setRoute] = useState("tests");
+    useEffect(() => {
+        const hash = location.hash.replace("#", "");
+        if (hash && ["tests", "node", "web", "pure"].includes(hash)) {
+            setRoute(hash);
+        }
+        else {
+            setRoute("tests");
+        }
+    }, [location.hash]);
+    const { projectName: name } = useParams();
+    useEffect(() => {
+        if (!name)
+            return;
+        setProjectName(name);
+        const fetchData = async () => {
+            try {
+                const [summaryRes, nodeRes, webRes, pureRes, configRes] = await Promise.all([
+                    fetch(summaryDotJson(name)),
+                    fetch(`metafiles/node/${name}.json`),
+                    fetch(`metafiles/web/${name}.json`),
+                    fetch(`metafiles/pure/${name}.json`),
+                    fetch(`reports/${name}/config.json`),
+                ]);
+                const [summaryData, nodeData, webData, pureData, configData] = await Promise.all([
+                    summaryRes.ok ? summaryRes.json() : {},
+                    nodeRes.ok
+                        ? nodeRes.json()
+                        : { errors: ["Failed to load node build logs"] },
+                    webRes.ok
+                        ? webRes.json()
+                        : { errors: ["Failed to load web build logs"] },
+                    pureRes.ok
+                        ? pureRes.json()
+                        : { errors: ["Failed to load pure build logs"] },
+                    configRes.ok ? configRes.json() : { tests: [] },
+                ]);
+                setSummary(summaryData);
+                setNodeLogs(nodeData);
+                setWebLogs(webData);
+                setPureLogs(pureData);
+                setConfig(configData);
+            }
+            catch (err) {
+                setError(err instanceof Error ? err.message : "Unknown error");
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        fetchData();
+    }, [name]);
+    return (React.createElement(ProjectPageView, { summary: summary, nodeLogs: nodeLogs, webLogs: webLogs, pureLogs: pureLogs, config: config, loading: loading, error: error, projectName: projectName, activeTab: route, setActiveTab: setRoute }));
+};

package/dist/module/src/app/frontend/components/stateful/ProjectsPage.js

@@ -0,0 +1,99 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
+// import { useWebSocket } from "../../App";
+import { ProjectsPageView } from "../pure/ProjectsPageView";
+import { useWebSocket } from "../../useWebSocket";
+import { useFs } from "../../useFs";
+export const ProjectsPage = () => {
+    // const [projects, setProjects] = useState<any[]>([]);
+    // const [summaries, setSummaries] = useState<Record<string, ISummary>>({});
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [configs, setConfigs] = useState({});
+    const navigate = useNavigate();
+    const { ws } = useWebSocket();
+    const fs = useFs();
+    // const summaries = fs.fs.readFile('./testeranto/projects.json', undefined, () => { });
+    // useEffect(() => {
+    //   if (!ws) return;
+    //   const handleMessage = (event: MessageEvent) => {
+    //     try {
+    //       const data = JSON.parse(event.data);
+    //       if (data.type === "summaryUpdate") {
+    //         // Update summaries when we receive updates
+    //         setSummaries((prev) => ({ ...prev, ...data.data }));
+    //       }
+    //     } catch (error) {
+    //       console.error("Error parsing WebSocket message:", error);
+    //     }
+    //   };
+    //   ws.addEventListener("message", handleMessage);
+    //   return () => {
+    //     ws.removeEventListener("message", handleMessage);
+    //   };
+    // }, [ws]);
+    // useEffect(() => {
+    //   const fetchProjects = async () => {
+    //     try {
+    //       const projectsRes = await fetch(`projects.json`);
+    //       const projectNames = await projectsRes.json();
+    //       const projectsData = await Promise.all(
+    //         projectNames.map(async (name) => {
+    //           const [summaryRes, nodeRes, webRes, pureRes, configRes] =
+    //             await Promise.all([
+    //               fetch(summaryDotJson(name)),
+    //               fetch(`metafiles/node/${name}.json`),
+    //               fetch(`metafiles/web/${name}.json`),
+    //               fetch(`metafiles/pure/${name}.json`),
+    //               fetch(`reports/${name}/config.json`),
+    //             ]);
+    //           const [summary, nodeData, webData, pureData, configData] =
+    //             await Promise.all([
+    //               summaryRes.json(),
+    //               nodeRes.ok
+    //                 ? nodeRes.json()
+    //                 : { errors: ["Failed to load node build logs"] },
+    //               webRes.ok
+    //                 ? webRes.json()
+    //                 : { errors: ["Failed to load web build logs"] },
+    //               pureRes.ok
+    //                 ? pureRes.json()
+    //                 : { errors: ["Failed to load pure build logs"] },
+    //               configRes.json(),
+    //             ]);
+    //           setSummaries((prev) => ({ ...prev, [name]: summary }));
+    //           setConfigs((prev) => ({ ...prev, [name]: configData }));
+    //           return {
+    //             name,
+    //             testCount: Object.keys(summary).length,
+    //             nodeStatus: nodeData.errors?.length
+    //               ? "failed"
+    //               : nodeData.warnings?.length
+    //                 ? "warning"
+    //                 : "success",
+    //             webStatus: webData.errors?.length
+    //               ? "failed"
+    //               : webData.warnings?.length
+    //                 ? "warning"
+    //                 : "success",
+    //             pureStatus: pureData.errors?.length
+    //               ? "failed"
+    //               : pureData.warnings?.length
+    //                 ? "warning"
+    //                 : "success",
+    //           };
+    //         })
+    //       );
+    //       setProjects(projectsData);
+    //     } catch (err) {
+    //       setError(err instanceof Error ? err.message : "Unknown error");
+    //     } finally {
+    //       setLoading(false);
+    //     }
+    //   };
+    //   fetchProjects();
+    // }, []);
+    return (React.createElement(ProjectsPageView, { projects: projects, summaries: summaries, configs: configs, loading: loading, error: error, navigate: navigate }));
+};

package/dist/module/src/app/frontend/components/stateful/SVGEditor/CircleForm.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { SVGAttributeField } from './SVGAttributeField';
+export const CircleForm = ({ attributes, onChange }) => {
+    const handleChange = (key, value) => {
+        onChange(Object.assign(Object.assign({}, attributes), { [key]: value }));
+    };
+    return (React.createElement("div", null,
+        React.createElement("h3", null, "Circle Attributes"),
+        React.createElement(SVGAttributeField, { label: "Center X", value: attributes.cx, onChange: (value) => handleChange('cx', value), type: "number" }),
+        React.createElement(SVGAttributeField, { label: "Center Y", value: attributes.cy, onChange: (value) => handleChange('cy', value), type: "number" }),
+        React.createElement(SVGAttributeField, { label: "Radius", value: attributes.r, onChange: (value) => handleChange('r', value), type: "number" }),
+        React.createElement(SVGAttributeField, { label: "Fill Color", value: attributes.fill, onChange: (value) => handleChange('fill', value), type: "color" }),
+        React.createElement(SVGAttributeField, { label: "Stroke Color", value: attributes.stroke, onChange: (value) => handleChange('stroke', value), type: "color" }),
+        React.createElement(SVGAttributeField, { label: "Stroke Width", value: attributes.strokeWidth, onChange: (value) => handleChange('strokeWidth', value), type: "number" }),
+        React.createElement(SVGAttributeField, { label: "ID", value: attributes.id, onChange: (value) => handleChange('id', value), type: "text" }),
+        React.createElement(SVGAttributeField, { label: "Class Name", value: attributes.className, onChange: (value) => handleChange('className', value), type: "text" })));
+};

package/dist/module/src/app/frontend/components/stateful/SVGEditor/GroupForm.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { SVGAttributeField } from './SVGAttributeField';
+export const GroupForm = ({ attributes, onChange }) => {
+    const handleChange = (key, value) => {
+        onChange(Object.assign(Object.assign({}, attributes), { [key]: value }));
+    };
+    return (React.createElement("div", null,
+        React.createElement("h3", null, "Group Attributes"),
+        React.createElement(SVGAttributeField, { label: "ID", value: attributes.id, onChange: (value) => handleChange('id', value), type: "text" }),
+        React.createElement(SVGAttributeField, { label: "Class Name", value: attributes.className, onChange: (value) => handleChange('className', value), type: "text" }),
+        React.createElement(SVGAttributeField, { label: "Transform", value: attributes.transform, onChange: (value) => handleChange('transform', value), type: "text" }),
+        React.createElement(SVGAttributeField, { label: "Fill Color", value: attributes.fill, onChange: (value) => handleChange('fill', value), type: "color" }),
+        React.createElement(SVGAttributeField, { label: "Stroke Color", value: attributes.stroke, onChange: (value) => handleChange('stroke', value), type: "color" }),
+        React.createElement(SVGAttributeField, { label: "Stroke Width", value: attributes.strokeWidth, onChange: (value) => handleChange('strokeWidth', value), type: "number" })));
+};

package/dist/module/src/app/frontend/components/stateful/SVGEditor/RectForm.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { SVGAttributeField } from './SVGAttributeField';
+export const RectForm = ({ attributes, onChange }) => {
+    const handleChange = (key, value) => {
+        onChange(Object.assign(Object.assign({}, attributes), { [key]: value }));
+    };
+    return (React.createElement("div", null,
+        React.createElement("h3", null, "Rectangle Attributes"),
+        React.createElement(SVGAttributeField, { label: "X Position", value: attributes.x, onChange: (value) => handleChange('x', value), type: "number" }),
+        React.createElement(SVGAttributeField, { label: "Y Position", value: attributes.y, onChange: (value) => handleChange('y', value), type: "number" }),
+        React.createElement(SVGAttributeField, { label: "Width", value: attributes.width, onChange: (value) => handleChange('width', value), type: "number" }),
+        React.createElement(SVGAttributeField, { label: "Height", value: attributes.height, onChange: (value) => handleChange('height', value), type: "number" }),
+        React.createElement(SVGAttributeField, { label: "RX (Corner Radius X)", value: attributes.rx, onChange: (value) => handleChange('rx', value), type: "number" }),
+        React.createElement(SVGAttributeField, { label: "RY (Corner Radius Y)", value: attributes.ry, onChange: (value) => handleChange('ry', value), type: "number" }),
+        React.createElement(SVGAttributeField, { label: "Fill Color", value: attributes.fill, onChange: (value) => handleChange('fill', value), type: "color" }),
+        React.createElement(SVGAttributeField, { label: "Stroke Color", value: attributes.stroke, onChange: (value) => handleChange('stroke', value), type: "color" }),
+        React.createElement(SVGAttributeField, { label: "Stroke Width", value: attributes.strokeWidth, onChange: (value) => handleChange('strokeWidth', value), type: "number" })));
+};

package/dist/module/src/app/frontend/components/stateful/SVGEditor/SVGAttributeField.js

@@ -0,0 +1,8 @@
+import React from 'react';
+export const SVGAttributeField = ({ label, value, onChange, type = 'text' }) => {
+    return (React.createElement("div", { style: { marginBottom: '8px' } },
+        React.createElement("label", { style: { display: 'block', marginBottom: '4px' } },
+            label,
+            ":"),
+        React.createElement("input", { type: type, value: value || '', onChange: (e) => onChange(e.target.value), style: { width: '100%' } })));
+};

package/dist/module/src/app/frontend/components/stateful/SVGEditor/SVGAttributesEditor.js

@@ -0,0 +1,50 @@
+import React, { useState, useEffect } from 'react';
+import { Form } from 'react-bootstrap';
+export const SVGAttributesEditor = ({ node, onUpdateAttributes, onUpdateTextContent }) => {
+    const [attributes, setAttributes] = useState(node.attributes);
+    const [textContent, setTextContent] = useState('');
+    useEffect(() => {
+        setAttributes(node.attributes);
+        // For text and tspan nodes, we might want to handle text content
+        // This is a simple approach - in a real implementation, you'd need to track text content separately
+    }, [node.id]);
+    const handleAttributeChange = (key, value) => {
+        const newAttributes = Object.assign(Object.assign({}, attributes), { [key]: value });
+        setAttributes(newAttributes);
+        onUpdateAttributes(newAttributes);
+    };
+    // const handleTextContentChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    //   const newText = e.target.value;
+    //   setTextContent(newText);
+    //   if (onUpdateTextContent) {
+    //     onUpdateTextContent(newText);
+    //   }
+    // };
+    return (React.createElement("div", null,
+        (node.type === 'text' || node.type === 'tspan') && (React.createElement(Form.Group, { className: "mb-3" },
+            React.createElement(Form.Label, null, "Text Content"),
+            React.createElement(Form.Control, { type: "text", value: node.attributes['text-content'] || '', onChange: (e) => {
+                    handleAttributeChange('text-content', e.target.value);
+                    // Also update the actual text content if needed
+                    if (onUpdateTextContent) {
+                        onUpdateTextContent(e.target.value);
+                    }
+                } }))),
+        Object.entries(attributes)
+            .filter(([key]) => key !== 'text-content')
+            .map(([key, value]) => (React.createElement(Form.Group, { key: key, className: "mb-2" },
+            React.createElement(Form.Label, null, key),
+            React.createElement(Form.Control, { type: "text", value: value, onChange: (e) => handleAttributeChange(key, e.target.value) })))),
+        React.createElement(Form.Group, null,
+            React.createElement(Form.Label, null, "Add New Attribute"),
+            React.createElement(Form.Control, { type: "text", placeholder: "attribute=value", onKeyPress: (e) => {
+                    if (e.key === 'Enter') {
+                        const target = e.target;
+                        const [key, value] = target.value.split('=');
+                        if (key && value) {
+                            handleAttributeChange(key.trim(), value.trim());
+                            target.value = '';
+                        }
+                    }
+                } }))));
+};

package/dist/module/src/app/frontend/components/stateful/SVGEditor/SVGEditorControls.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Button, ButtonGroup, Card } from 'react-bootstrap';
+export const SVGEditorControls = ({ selectedNode, onAddNode, onRemoveNode }) => {
+    return (React.createElement(Card, null,
+        React.createElement(Card.Header, null, "Controls"),
+        React.createElement(Card.Body, null,
+            React.createElement(ButtonGroup, { vertical: true, className: "w-100" },
+                React.createElement("h6", null, "Add Elements:"),
+                React.createElement(Button, { variant: "outline-primary", onClick: () => onAddNode('rect') }, "Rectangle"),
+                React.createElement(Button, { variant: "outline-primary", onClick: () => onAddNode('circle') }, "Circle"),
+                React.createElement(Button, { variant: "outline-primary", onClick: () => onAddNode('path') }, "Path"),
+                React.createElement(Button, { variant: "outline-primary", onClick: () => onAddNode('text') }, "Text"),
+                React.createElement(Button, { variant: "outline-primary", onClick: () => onAddNode('g') }, "Group"),
+                React.createElement("hr", null),
+                React.createElement(Button, { variant: "outline-danger", onClick: onRemoveNode }, "Remove This Element")))));
+};

package/dist/module/src/app/frontend/components/stateful/SVGEditor/SVGElementForm.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { CircleForm } from './CircleForm';
+import { RectForm } from './RectForm';
+import { GroupForm } from './GroupForm';
+export const SVGElementForm = ({ elementType, attributes, onChange }) => {
+    switch (elementType) {
+        case 'circle':
+            return (React.createElement(CircleForm, { attributes: attributes, onChange: onChange }));
+        case 'rect':
+            return (React.createElement(RectForm, { attributes: attributes, onChange: onChange }));
+        case 'g':
+            return (React.createElement(GroupForm, { attributes: attributes, onChange: onChange }));
+        default:
+            return React.createElement("div", null, "Select an element type");
+    }
+};

package/dist/module/src/app/frontend/components/stateful/SVGEditor/SVGPreview.js

@@ -0,0 +1,141 @@
+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;
+};
+import React, { useState, useRef, useCallback } from 'react';
+const renderGrid = (width, height) => {
+    const gridSize = 20;
+    const lines = [];
+    // Horizontal lines
+    for (let y = 0; y <= height; y += gridSize) {
+        lines.push(React.createElement("line", { key: `h-${y}`, x1: 0, y1: y, x2: width, y2: y, stroke: "#e0e0e0", strokeWidth: 1 }));
+    }
+    // Vertical lines
+    for (let x = 0; x <= width; x += gridSize) {
+        lines.push(React.createElement("line", { key: `v-${x}`, x1: x, y1: 0, x2: x, y2: height, stroke: "#e0e0e0", strokeWidth: 1 }));
+    }
+    return lines;
+};
+export const SVGPreview = ({ svgTree, editMode, showGrid, selectedNodeId, onNodeInteraction, hiddenNodes }) => {
+    const svgRef = useRef(null);
+    const [isInteracting, setIsInteracting] = useState(false);
+    const [startPoint, setStartPoint] = useState({ x: 0, y: 0 });
+    const [originalAttributes, setOriginalAttributes] = useState({});
+    const getSVGPoint = useCallback((clientX, clientY) => {
+        var _a;
+        if (svgRef.current) {
+            const pt = svgRef.current.createSVGPoint();
+            pt.x = clientX;
+            pt.y = clientY;
+            return pt.matrixTransform((_a = svgRef.current.getScreenCTM()) === null || _a === void 0 ? void 0 : _a.inverse());
+        }
+        return { x: 0, y: 0 };
+    }, []);
+    const handleMouseDown = useCallback((e, node) => {
+        if (editMode !== 'none' && selectedNodeId === node.id) {
+            e.preventDefault();
+            setIsInteracting(true);
+            setStartPoint({ x: e.clientX, y: e.clientY });
+            setOriginalAttributes(Object.assign({}, node.attributes));
+        }
+    }, [editMode, selectedNodeId]);
+    const handleMouseMove = useCallback((e, node) => {
+        if (isInteracting && editMode !== 'none' && selectedNodeId === node.id) {
+            e.preventDefault();
+            const currentPoint = getSVGPoint(e.clientX, e.clientY);
+            const startSVGPoint = getSVGPoint(startPoint.x, startPoint.y);
+            const dx = currentPoint.x - startSVGPoint.x;
+            const dy = currentPoint.y - startSVGPoint.y;
+            const updates = {};
+            switch (editMode) {
+                case 'move':
+                    if (node.type === 'rect' || node.type === 'text') {
+                        updates.x = (parseFloat(originalAttributes.x || '0') + dx).toString();
+                        updates.y = (parseFloat(originalAttributes.y || '0') + dy).toString();
+                    }
+                    else if (node.type === 'circle') {
+                        updates.cx = (parseFloat(originalAttributes.cx || '0') + dx).toString();
+                        updates.cy = (parseFloat(originalAttributes.cy || '0') + dy).toString();
+                    }
+                    break;
+                case 'scale':
+                    if (node.type === 'rect') {
+                        updates.width = Math.max(0, parseFloat(originalAttributes.width || '0') + dx).toString();
+                        updates.height = Math.max(0, parseFloat(originalAttributes.height || '0') + dy).toString();
+                    }
+                    else if (node.type === 'circle') {
+                        updates.r = Math.max(0, parseFloat(originalAttributes.r || '0') + dx).toString();
+                    }
+                    break;
+                case 'rotate':
+                    // Calculate angle from center
+                    const centerX = parseFloat(originalAttributes.cx || originalAttributes.x || '0') +
+                        parseFloat(originalAttributes.width || '0') / 2;
+                    const centerY = parseFloat(originalAttributes.cy || originalAttributes.y || '0') +
+                        parseFloat(originalAttributes.height || '0') / 2;
+                    const startAngle = Math.atan2(startSVGPoint.y - centerY, startSVGPoint.x - centerX);
+                    const currentAngle = Math.atan2(currentPoint.y - centerY, currentPoint.x - centerX);
+                    const angleDiff = (currentAngle - startAngle) * 180 / Math.PI;
+                    updates.transform = `rotate(${angleDiff}, ${centerX}, ${centerY})`;
+                    break;
+            }
+            onNodeInteraction(node.id, updates);
+        }
+    }, [isInteracting, editMode, selectedNodeId, startPoint, originalAttributes, getSVGPoint, onNodeInteraction]);
+    const handleMouseUp = useCallback(() => {
+        setIsInteracting(false);
+    }, []);
+    const renderSVGNode = useCallback((node) => {
+        // Skip rendering if node is hidden
+        if (hiddenNodes.has(node.id)) {
+            return null;
+        }
+        const isSelected = selectedNodeId === node.id;
+        const { type, attributes, children } = node;
+        const eventHandlers = editMode !== 'none' && isSelected ? {
+            onMouseDown: (e) => handleMouseDown(e, node),
+            onMouseMove: (e) => handleMouseMove(e, node),
+            style: { cursor: getCursorForMode(editMode), outline: isSelected ? '2px dashed blue' : 'none' }
+        } : {
+            style: { outline: isSelected ? '2px dashed blue' : 'none' }
+        };
+        // Filter out hidden children
+        const visibleChildren = children
+            .map(renderSVGNode)
+            .filter(child => child !== null);
+        // For text elements, use the text content
+        if (type === 'text' || type === 'tspan') {
+            const textContent = attributes['text-content'] || '';
+            // Filter out the text-content attribute to prevent it from being added as an SVG attribute
+            const { 'text-content': _ } = attributes, filteredAttributes = __rest(attributes, ['text-content']);
+            return React.createElement(type, Object.assign(Object.assign({ key: node.id }, filteredAttributes), eventHandlers), textContent, ...visibleChildren);
+        }
+        return React.createElement(type, Object.assign(Object.assign({ key: node.id }, attributes), eventHandlers), visibleChildren);
+    }, [editMode, selectedNodeId, hiddenNodes, handleMouseDown, handleMouseMove]);
+    const getCursorForMode = (mode) => {
+        switch (mode) {
+            case 'move': return 'move';
+            case 'scale': return 'nwse-resize';
+            case 'rotate': return 'crosshair';
+            default: return 'pointer';
+        }
+    };
+    const width = parseInt(svgTree.attributes.width || '400');
+    const height = parseInt(svgTree.attributes.height || '400');
+    return (React.createElement("div", { className: "border rounded p-3 d-flex justify-content-center align-items-center", style: { height: '400px' }, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp },
+        React.createElement("svg", Object.assign({ ref: svgRef }, svgTree.attributes, { style: {
+                background: showGrid ? '#f8f9fa' : 'white',
+                cursor: editMode !== 'none' ? getCursorForMode(editMode) : 'default'
+            }, onMouseMove: (e) => {
+                // Handle mouse move on the SVG itself if needed
+            } }),
+            showGrid && renderGrid(width, height),
+            svgTree.children.map(renderSVGNode))));
+};