testeranto 0.202.0 → 0.205.0

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

@@ -0,0 +1,113 @@
+"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.ProcessManagerPage = void 0;
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const react_1 = __importStar(require("react"));
+const react_router_dom_1 = require("react-router-dom");
+const useWebSocket_1 = require("../../useWebSocket");
+const ProcessManagerView_1 = require("../pure/ProcessManagerView");
+// import { ProcessManagerView, Process } from '../pure/ProcessManagerView';
+// import { useWebSocket } from '../../App';
+const ProcessManagerPage = () => {
+    const [processes, setProcesses] = (0, react_1.useState)([]);
+    const { ws } = (0, useWebSocket_1.useWebSocket)();
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const navigate = (0, react_router_dom_1.useNavigate)();
+    // Handle WebSocket messages
+    (0, react_1.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 = (0, react_1.useCallback)(() => {
+        if (ws && ws.readyState === WebSocket.OPEN) {
+            setLoading(true);
+            ws.send(JSON.stringify({ type: 'getRunningProcesses' }));
+        }
+    }, [ws]);
+    const handleKillProcess = (0, react_1.useCallback)((processId) => {
+        if (ws && ws.readyState === WebSocket.OPEN) {
+            ws.send(JSON.stringify({
+                type: 'killProcess',
+                processId
+            }));
+        }
+    }, [ws]);
+    const handleBack = (0, react_1.useCallback)(() => {
+        navigate('/');
+    }, [navigate]);
+    return (
+    // don't put this in AppFrame- this is correct
+    react_1.default.createElement(ProcessManagerView_1.ProcessManagerView, { processes: processes, onRefresh: handleRefresh, onBack: handleBack, loading: loading, onKillProcess: handleKillProcess }));
+};
+exports.ProcessManagerPage = ProcessManagerPage;

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

@@ -0,0 +1,108 @@
+"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.ProjectPage = void 0;
+const react_1 = __importStar(require("react"));
+const react_router_dom_1 = require("react-router-dom");
+const ProjectPageView_1 = require("../pure/ProjectPageView");
+const api_1 = require("../../api");
+const ProjectPage = () => {
+    const [summary, setSummary] = (0, react_1.useState)(null);
+    const [nodeLogs, setNodeLogs] = (0, react_1.useState)(null);
+    const [webLogs, setWebLogs] = (0, react_1.useState)(null);
+    const [pureLogs, setPureLogs] = (0, react_1.useState)(null);
+    const [config, setConfig] = (0, react_1.useState)({});
+    const [loading, setLoading] = (0, react_1.useState)(true);
+    const [error, setError] = (0, react_1.useState)(null);
+    const [projectName, setProjectName] = (0, react_1.useState)("");
+    const navigate = (0, react_router_dom_1.useNavigate)();
+    const location = (0, react_router_dom_1.useLocation)();
+    const [route, setRoute] = (0, react_1.useState)("tests");
+    (0, react_1.useEffect)(() => {
+        const hash = location.hash.replace("#", "");
+        if (hash && ["tests", "node", "web", "pure"].includes(hash)) {
+            setRoute(hash);
+        }
+        else {
+            setRoute("tests");
+        }
+    }, [location.hash]);
+    const { projectName: name } = (0, react_router_dom_1.useParams)();
+    (0, react_1.useEffect)(() => {
+        if (!name)
+            return;
+        setProjectName(name);
+        const fetchData = async () => {
+            try {
+                const [summaryRes, nodeRes, webRes, pureRes, configRes] = await Promise.all([
+                    fetch((0, api_1.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_1.default.createElement(ProjectPageView_1.ProjectPageView, { summary: summary, nodeLogs: nodeLogs, webLogs: webLogs, pureLogs: pureLogs, config: config, loading: loading, error: error, projectName: projectName, activeTab: route, setActiveTab: setRoute }));
+};
+exports.ProjectPage = ProjectPage;

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;