testeranto 0.203.0 → 0.205.0

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

@@ -0,0 +1,136 @@
+"use strict";
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+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.ProjectsPage = void 0;
+const react_1 = __importStar(require("react"));
+const react_router_dom_1 = require("react-router-dom");
+// import { useWebSocket } from "../../App";
+const ProjectsPageView_1 = require("../pure/ProjectsPageView");
+const useWebSocket_1 = require("../../useWebSocket");
+const useFs_1 = require("../../useFs");
+const ProjectsPage = () => {
+    // const [projects, setProjects] = useState<any[]>([]);
+    // const [summaries, setSummaries] = useState<Record<string, ISummary>>({});
+    const [loading, setLoading] = (0, react_1.useState)(true);
+    const [error, setError] = (0, react_1.useState)(null);
+    const [configs, setConfigs] = (0, react_1.useState)({});
+    const navigate = (0, react_router_dom_1.useNavigate)();
+    const { ws } = (0, useWebSocket_1.useWebSocket)();
+    const fs = (0, useFs_1.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_1.default.createElement(ProjectsPageView_1.ProjectsPageView, { projects: projects, summaries: summaries, configs: configs, loading: loading, error: error, navigate: navigate }));
+};
+exports.ProjectsPage = ProjectsPage;

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

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CircleForm = void 0;
+const react_1 = __importDefault(require("react"));
+const SVGAttributeField_1 = require("./SVGAttributeField");
+const CircleForm = ({ attributes, onChange }) => {
+    const handleChange = (key, value) => {
+        onChange(Object.assign(Object.assign({}, attributes), { [key]: value }));
+    };
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement("h3", null, "Circle Attributes"),
+        react_1.default.createElement(SVGAttributeField_1.SVGAttributeField, { label: "Center X", value: attributes.cx, onChange: (value) => handleChange('cx', value), type: "number" }),
+        react_1.default.createElement(SVGAttributeField_1.SVGAttributeField, { label: "Center Y", value: attributes.cy, onChange: (value) => handleChange('cy', value), type: "number" }),
+        react_1.default.createElement(SVGAttributeField_1.SVGAttributeField, { label: "Radius", value: attributes.r, onChange: (value) => handleChange('r', value), type: "number" }),
+        react_1.default.createElement(SVGAttributeField_1.SVGAttributeField, { label: "Fill Color", value: attributes.fill, onChange: (value) => handleChange('fill', value), type: "color" }),
+        react_1.default.createElement(SVGAttributeField_1.SVGAttributeField, { label: "Stroke Color", value: attributes.stroke, onChange: (value) => handleChange('stroke', value), type: "color" }),
+        react_1.default.createElement(SVGAttributeField_1.SVGAttributeField, { label: "Stroke Width", value: attributes.strokeWidth, onChange: (value) => handleChange('strokeWidth', value), type: "number" }),
+        react_1.default.createElement(SVGAttributeField_1.SVGAttributeField, { label: "ID", value: attributes.id, onChange: (value) => handleChange('id', value), type: "text" }),
+        react_1.default.createElement(SVGAttributeField_1.SVGAttributeField, { label: "Class Name", value: attributes.className, onChange: (value) => handleChange('className', value), type: "text" })));
+};
+exports.CircleForm = CircleForm;

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

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GroupForm = void 0;
+const react_1 = __importDefault(require("react"));
+const SVGAttributeField_1 = require("./SVGAttributeField");
+const GroupForm = ({ attributes, onChange }) => {
+    const handleChange = (key, value) => {
+        onChange(Object.assign(Object.assign({}, attributes), { [key]: value }));
+    };
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement("h3", null, "Group Attributes"),
+        react_1.default.createElement(SVGAttributeField_1.SVGAttributeField, { label: "ID", value: attributes.id, onChange: (value) => handleChange('id', value), type: "text" }),
+        react_1.default.createElement(SVGAttributeField_1.SVGAttributeField, { label: "Class Name", value: attributes.className, onChange: (value) => handleChange('className', value), type: "text" }),
+        react_1.default.createElement(SVGAttributeField_1.SVGAttributeField, { label: "Transform", value: attributes.transform, onChange: (value) => handleChange('transform', value), type: "text" }),
+        react_1.default.createElement(SVGAttributeField_1.SVGAttributeField, { label: "Fill Color", value: attributes.fill, onChange: (value) => handleChange('fill', value), type: "color" }),
+        react_1.default.createElement(SVGAttributeField_1.SVGAttributeField, { label: "Stroke Color", value: attributes.stroke, onChange: (value) => handleChange('stroke', value), type: "color" }),
+        react_1.default.createElement(SVGAttributeField_1.SVGAttributeField, { label: "Stroke Width", value: attributes.strokeWidth, onChange: (value) => handleChange('strokeWidth', value), type: "number" })));
+};
+exports.GroupForm = GroupForm;

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

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RectForm = void 0;
+const react_1 = __importDefault(require("react"));
+const SVGAttributeField_1 = require("./SVGAttributeField");
+const RectForm = ({ attributes, onChange }) => {
+    const handleChange = (key, value) => {
+        onChange(Object.assign(Object.assign({}, attributes), { [key]: value }));
+    };
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement("h3", null, "Rectangle Attributes"),
+        react_1.default.createElement(SVGAttributeField_1.SVGAttributeField, { label: "X Position", value: attributes.x, onChange: (value) => handleChange('x', value), type: "number" }),
+        react_1.default.createElement(SVGAttributeField_1.SVGAttributeField, { label: "Y Position", value: attributes.y, onChange: (value) => handleChange('y', value), type: "number" }),
+        react_1.default.createElement(SVGAttributeField_1.SVGAttributeField, { label: "Width", value: attributes.width, onChange: (value) => handleChange('width', value), type: "number" }),
+        react_1.default.createElement(SVGAttributeField_1.SVGAttributeField, { label: "Height", value: attributes.height, onChange: (value) => handleChange('height', value), type: "number" }),
+        react_1.default.createElement(SVGAttributeField_1.SVGAttributeField, { label: "RX (Corner Radius X)", value: attributes.rx, onChange: (value) => handleChange('rx', value), type: "number" }),
+        react_1.default.createElement(SVGAttributeField_1.SVGAttributeField, { label: "RY (Corner Radius Y)", value: attributes.ry, onChange: (value) => handleChange('ry', value), type: "number" }),
+        react_1.default.createElement(SVGAttributeField_1.SVGAttributeField, { label: "Fill Color", value: attributes.fill, onChange: (value) => handleChange('fill', value), type: "color" }),
+        react_1.default.createElement(SVGAttributeField_1.SVGAttributeField, { label: "Stroke Color", value: attributes.stroke, onChange: (value) => handleChange('stroke', value), type: "color" }),
+        react_1.default.createElement(SVGAttributeField_1.SVGAttributeField, { label: "Stroke Width", value: attributes.strokeWidth, onChange: (value) => handleChange('strokeWidth', value), type: "number" })));
+};
+exports.RectForm = RectForm;

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

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SVGAttributeField = void 0;
+const react_1 = __importDefault(require("react"));
+const SVGAttributeField = ({ label, value, onChange, type = 'text' }) => {
+    return (react_1.default.createElement("div", { style: { marginBottom: '8px' } },
+        react_1.default.createElement("label", { style: { display: 'block', marginBottom: '4px' } },
+            label,
+            ":"),
+        react_1.default.createElement("input", { type: type, value: value || '', onChange: (e) => onChange(e.target.value), style: { width: '100%' } })));
+};
+exports.SVGAttributeField = SVGAttributeField;

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

@@ -0,0 +1,87 @@
+"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.SVGAttributesEditor = void 0;
+const react_1 = __importStar(require("react"));
+const react_bootstrap_1 = require("react-bootstrap");
+const SVGAttributesEditor = ({ node, onUpdateAttributes, onUpdateTextContent }) => {
+    const [attributes, setAttributes] = (0, react_1.useState)(node.attributes);
+    const [textContent, setTextContent] = (0, react_1.useState)('');
+    (0, react_1.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_1.default.createElement("div", null,
+        (node.type === 'text' || node.type === 'tspan') && (react_1.default.createElement(react_bootstrap_1.Form.Group, { className: "mb-3" },
+            react_1.default.createElement(react_bootstrap_1.Form.Label, null, "Text Content"),
+            react_1.default.createElement(react_bootstrap_1.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_1.default.createElement(react_bootstrap_1.Form.Group, { key: key, className: "mb-2" },
+            react_1.default.createElement(react_bootstrap_1.Form.Label, null, key),
+            react_1.default.createElement(react_bootstrap_1.Form.Control, { type: "text", value: value, onChange: (e) => handleAttributeChange(key, e.target.value) })))),
+        react_1.default.createElement(react_bootstrap_1.Form.Group, null,
+            react_1.default.createElement(react_bootstrap_1.Form.Label, null, "Add New Attribute"),
+            react_1.default.createElement(react_bootstrap_1.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 = '';
+                        }
+                    }
+                } }))));
+};
+exports.SVGAttributesEditor = SVGAttributesEditor;

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

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SVGEditorControls = void 0;
+const react_1 = __importDefault(require("react"));
+const react_bootstrap_1 = require("react-bootstrap");
+const SVGEditorControls = ({ selectedNode, onAddNode, onRemoveNode }) => {
+    return (react_1.default.createElement(react_bootstrap_1.Card, null,
+        react_1.default.createElement(react_bootstrap_1.Card.Header, null, "Controls"),
+        react_1.default.createElement(react_bootstrap_1.Card.Body, null,
+            react_1.default.createElement(react_bootstrap_1.ButtonGroup, { vertical: true, className: "w-100" },
+                react_1.default.createElement("h6", null, "Add Elements:"),
+                react_1.default.createElement(react_bootstrap_1.Button, { variant: "outline-primary", onClick: () => onAddNode('rect') }, "Rectangle"),
+                react_1.default.createElement(react_bootstrap_1.Button, { variant: "outline-primary", onClick: () => onAddNode('circle') }, "Circle"),
+                react_1.default.createElement(react_bootstrap_1.Button, { variant: "outline-primary", onClick: () => onAddNode('path') }, "Path"),
+                react_1.default.createElement(react_bootstrap_1.Button, { variant: "outline-primary", onClick: () => onAddNode('text') }, "Text"),
+                react_1.default.createElement(react_bootstrap_1.Button, { variant: "outline-primary", onClick: () => onAddNode('g') }, "Group"),
+                react_1.default.createElement("hr", null),
+                react_1.default.createElement(react_bootstrap_1.Button, { variant: "outline-danger", onClick: onRemoveNode }, "Remove This Element")))));
+};
+exports.SVGEditorControls = SVGEditorControls;

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

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SVGElementForm = void 0;
+const react_1 = __importDefault(require("react"));
+const CircleForm_1 = require("./CircleForm");
+const RectForm_1 = require("./RectForm");
+const GroupForm_1 = require("./GroupForm");
+const SVGElementForm = ({ elementType, attributes, onChange }) => {
+    switch (elementType) {
+        case 'circle':
+            return (react_1.default.createElement(CircleForm_1.CircleForm, { attributes: attributes, onChange: onChange }));
+        case 'rect':
+            return (react_1.default.createElement(RectForm_1.RectForm, { attributes: attributes, onChange: onChange }));
+        case 'g':
+            return (react_1.default.createElement(GroupForm_1.GroupForm, { attributes: attributes, onChange: onChange }));
+        default:
+            return react_1.default.createElement("div", null, "Select an element type");
+    }
+};
+exports.SVGElementForm = SVGElementForm;

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

@@ -0,0 +1,178 @@
+"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;
+    };
+})();
+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 });
+exports.SVGPreview = void 0;
+const react_1 = __importStar(require("react"));
+const renderGrid = (width, height) => {
+    const gridSize = 20;
+    const lines = [];
+    // Horizontal lines
+    for (let y = 0; y <= height; y += gridSize) {
+        lines.push(react_1.default.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_1.default.createElement("line", { key: `v-${x}`, x1: x, y1: 0, x2: x, y2: height, stroke: "#e0e0e0", strokeWidth: 1 }));
+    }
+    return lines;
+};
+const SVGPreview = ({ svgTree, editMode, showGrid, selectedNodeId, onNodeInteraction, hiddenNodes }) => {
+    const svgRef = (0, react_1.useRef)(null);
+    const [isInteracting, setIsInteracting] = (0, react_1.useState)(false);
+    const [startPoint, setStartPoint] = (0, react_1.useState)({ x: 0, y: 0 });
+    const [originalAttributes, setOriginalAttributes] = (0, react_1.useState)({});
+    const getSVGPoint = (0, react_1.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 = (0, react_1.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 = (0, react_1.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 = (0, react_1.useCallback)(() => {
+        setIsInteracting(false);
+    }, []);
+    const renderSVGNode = (0, react_1.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_1.default.createElement(type, Object.assign(Object.assign({ key: node.id }, filteredAttributes), eventHandlers), textContent, ...visibleChildren);
+        }
+        return react_1.default.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_1.default.createElement("div", { className: "border rounded p-3 d-flex justify-content-center align-items-center", style: { height: '400px' }, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp },
+        react_1.default.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))));
+};
+exports.SVGPreview = SVGPreview;