testeranto 0.202.0 → 0.205.0

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

@@ -0,0 +1,400 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React, { useState, useCallback } from "react";
+import { GenericXMLEditorPage } from "./GenericXMLEditorPage";
+export const GrafeoPage = () => {
+    const initialTree = {
+        id: "root",
+        type: "graphml",
+        attributes: {
+            xmlns: "http://graphml.graphdrawing.org/xmlns"
+        },
+        children: [
+            {
+                id: "graph-1",
+                type: "graph",
+                attributes: {
+                    id: "G",
+                    edgedefault: "undirected"
+                },
+                children: [
+                    // Sample nodes
+                    {
+                        id: "node-1",
+                        type: "node",
+                        attributes: { id: "n1" },
+                        children: [
+                            {
+                                id: "data-1",
+                                type: "data",
+                                attributes: { key: "d0" },
+                                children: [],
+                                textContent: "Node 1"
+                            }
+                        ]
+                    },
+                    {
+                        id: "node-2",
+                        type: "node",
+                        attributes: { id: "n2" },
+                        children: [
+                            {
+                                id: "data-2",
+                                type: "data",
+                                attributes: { key: "d0" },
+                                children: [],
+                                textContent: "Node 2"
+                            }
+                        ]
+                    },
+                    {
+                        id: "node-3",
+                        type: "node",
+                        attributes: { id: "n3" },
+                        children: [
+                            {
+                                id: "data-3",
+                                type: "data",
+                                attributes: { key: "d0" },
+                                children: [],
+                                textContent: "Node 3"
+                            }
+                        ]
+                    },
+                    // Sample edges
+                    {
+                        id: "edge-1",
+                        type: "edge",
+                        attributes: { source: "n1", target: "n2" },
+                        children: [
+                            {
+                                id: "data-4",
+                                type: "data",
+                                attributes: { key: "d1" },
+                                children: [],
+                                textContent: "Edge from 1 to 2"
+                            }
+                        ]
+                    },
+                    {
+                        id: "edge-2",
+                        type: "edge",
+                        attributes: { source: "n2", target: "n3" },
+                        children: [
+                            {
+                                id: "data-5",
+                                type: "data",
+                                attributes: { key: "d1" },
+                                children: [],
+                                textContent: "Edge from 2 to 3"
+                            }
+                        ]
+                    },
+                    {
+                        id: "edge-3",
+                        type: "edge",
+                        attributes: { source: "n3", target: "n1" },
+                        children: [
+                            {
+                                id: "data-6",
+                                type: "data",
+                                attributes: { key: "d1" },
+                                children: [],
+                                textContent: "Edge from 3 to 1"
+                            }
+                        ]
+                    }
+                ]
+            }
+        ],
+    };
+    const [graphmlTree, setGraphmlTree] = useState(initialTree);
+    const [selectedNodeId, setSelectedNodeId] = useState(null);
+    const [activeTab, setActiveTab] = useState("preview");
+    const [history, setHistory] = useState([initialTree]);
+    const [historyIndex, setHistoryIndex] = useState(0);
+    const [hiddenNodes, setHiddenNodes] = useState(new Set());
+    // Find a node by ID
+    const findNode = useCallback((node, id) => {
+        if (node.id === id)
+            return node;
+        for (const child of node.children) {
+            const found = findNode(child, id);
+            if (found)
+                return found;
+        }
+        return null;
+    }, []);
+    // Helper to update tree and manage history
+    const updateTree = useCallback((newTree) => {
+        setGraphmlTree(newTree);
+        setHistory((prevHistory) => {
+            const newHistory = prevHistory.slice(0, historyIndex + 1);
+            newHistory.push(newTree);
+            return newHistory;
+        });
+        setHistoryIndex((prevIndex) => prevIndex + 1);
+    }, [historyIndex]);
+    // Update node attributes
+    const updateNodeAttributes = useCallback((nodeId, attributes) => {
+        setGraphmlTree((prevTree) => {
+            const newTree = JSON.parse(JSON.stringify(prevTree));
+            const node = findNode(newTree, nodeId);
+            if (node) {
+                node.attributes = Object.assign(Object.assign({}, node.attributes), attributes);
+            }
+            updateTree(newTree);
+            return newTree;
+        });
+    }, [findNode, updateTree]);
+    // Update node text content
+    const updateNodeTextContent = useCallback((nodeId, textContent) => {
+        setGraphmlTree((prevTree) => {
+            const newTree = JSON.parse(JSON.stringify(prevTree));
+            const node = findNode(newTree, nodeId);
+            if (node) {
+                node.textContent = textContent;
+            }
+            updateTree(newTree);
+            return newTree;
+        });
+    }, [findNode, updateTree]);
+    // Toggle node visibility
+    const toggleNodeVisibility = useCallback((nodeId) => {
+        setHiddenNodes((prev) => {
+            const newHidden = new Set(prev);
+            if (newHidden.has(nodeId)) {
+                newHidden.delete(nodeId);
+            }
+            else {
+                newHidden.add(nodeId);
+            }
+            return newHidden;
+        });
+    }, []);
+    // Add a new child node
+    const addChildNode = useCallback((parentId, nodeType) => {
+        setGraphmlTree((prevTree) => {
+            const newTree = JSON.parse(JSON.stringify(prevTree));
+            const parent = findNode(newTree, parentId);
+            if (parent) {
+                // Default attributes based on node type
+                let defaultAttributes = {};
+                switch (nodeType) {
+                    case "node":
+                        defaultAttributes = { id: `n${Date.now()}` };
+                        break;
+                    case "edge":
+                        defaultAttributes = { source: "", target: "" };
+                        break;
+                    case "data":
+                        defaultAttributes = { key: "" };
+                        break;
+                    case "key":
+                        defaultAttributes = { id: "", for: "node", "attr.name": "", "attr.type": "string" };
+                        break;
+                    default:
+                        defaultAttributes = {};
+                }
+                const newNode = {
+                    id: `${nodeType}-${Date.now()}`,
+                    type: nodeType,
+                    attributes: defaultAttributes,
+                    children: [],
+                };
+                parent.children = [...parent.children, newNode];
+                setSelectedNodeId(newNode.id);
+                updateTree(newTree);
+            }
+            return newTree;
+        });
+    }, [findNode, updateTree]);
+    // Remove a node
+    const removeNode = useCallback((nodeId) => {
+        setGraphmlTree((prevTree) => {
+            const newTree = JSON.parse(JSON.stringify(prevTree));
+            const removeFromParent = (node, targetId) => {
+                for (let i = 0; i < node.children.length; i++) {
+                    if (node.children[i].id === targetId) {
+                        node.children.splice(i, 1);
+                        return true;
+                    }
+                    if (removeFromParent(node.children[i], targetId)) {
+                        return true;
+                    }
+                }
+                return false;
+            };
+            removeFromParent(newTree, nodeId);
+            if (selectedNodeId === nodeId) {
+                setSelectedNodeId(null);
+            }
+            updateTree(newTree);
+            return newTree;
+        });
+    }, [selectedNodeId, updateTree]);
+    const selectedNode = selectedNodeId
+        ? findNode(graphmlTree, selectedNodeId)
+        : null;
+    // Define node types for GraphML
+    const graphmlNodeTypes = [
+        { label: 'Node', type: 'node' },
+        { label: 'Edge', type: 'edge' },
+        { label: 'Key', type: 'key' },
+        { label: 'Data', type: 'data' }
+    ];
+    // Function to create new GraphML nodes
+    const createGraphMLNode = (parentId, nodeType) => {
+        // Default attributes based on node type
+        let defaultAttributes = {};
+        switch (nodeType) {
+            case "node":
+                defaultAttributes = { id: `n${Date.now()}` };
+                break;
+            case "edge":
+                defaultAttributes = { source: "", target: "" };
+                break;
+            case "data":
+                defaultAttributes = { key: "" };
+                break;
+            case "key":
+                defaultAttributes = { id: "", for: "node", "attr.name": "", "attr.type": "string" };
+                break;
+            default:
+                defaultAttributes = {};
+        }
+        return {
+            id: `${nodeType}-${Date.now()}`,
+            type: nodeType,
+            attributes: defaultAttributes,
+            children: [],
+        };
+    };
+    // Render preview for GraphML
+    const renderGraphMLPreview = (node, isSelected, eventHandlers) => {
+        const { type, attributes, children, textContent } = node;
+        const style = isSelected ? { outline: '2px dashed blue' } : {};
+        // Convert children to React elements
+        const childElements = children.map(child => renderGraphMLPreview(child, selectedNodeId === child.id, {}));
+        // Handle different GraphML element types
+        switch (type) {
+            case 'node':
+                return (React.createElement("div", Object.assign({ key: node.id, className: "border rounded p-2 m-1 d-inline-block", style: Object.assign(Object.assign({}, style), { background: '#f0f8ff' }) }, eventHandlers),
+                    "Node: ",
+                    attributes.id,
+                    childElements));
+            case 'edge':
+                return (React.createElement("div", Object.assign({ key: node.id, className: "border-top pt-1 m-1", style: style }, eventHandlers),
+                    "Edge: ",
+                    attributes.source,
+                    " \u2192 ",
+                    attributes.target,
+                    childElements));
+            case 'key':
+                return (React.createElement("div", Object.assign({ key: node.id, className: "border rounded p-1 m-1 small", style: Object.assign(Object.assign({}, style), { background: '#fff0f0' }) }, eventHandlers),
+                    "Key: ",
+                    attributes.id,
+                    " (",
+                    attributes.for,
+                    ")",
+                    childElements));
+            case 'data':
+                return (React.createElement("div", Object.assign({ key: node.id, className: "border rounded p-1 m-1 small", style: Object.assign(Object.assign({}, style), { background: '#f0fff0' }) }, eventHandlers),
+                    "Data: ",
+                    attributes.key,
+                    " = ",
+                    textContent,
+                    childElements));
+            case 'graph':
+                return (React.createElement("div", Object.assign({ key: node.id, className: "border rounded p-3 m-2", style: Object.assign(Object.assign({}, style), { background: '#f8f9fa' }) }, eventHandlers),
+                    "Graph: ",
+                    attributes.id,
+                    childElements));
+            case 'graphml':
+                return (React.createElement("div", Object.assign({ key: node.id, className: "p-3", style: style }, eventHandlers), childElements));
+            default:
+                return (React.createElement("div", Object.assign({ key: node.id, style: style }, eventHandlers),
+                    type,
+                    " element",
+                    childElements,
+                    textContent));
+        }
+    };
+    // Attribute editor for GraphML
+    const renderGraphMLAttributeEditor = (node, onUpdateAttributes, onUpdateTextContent) => {
+        const handleAttributeChange = (key, value) => {
+            const newAttributes = Object.assign(Object.assign({}, node.attributes), { [key]: value });
+            onUpdateAttributes(newAttributes);
+        };
+        const handleTextChange = (e) => {
+            onUpdateTextContent(e.target.value);
+        };
+        return (React.createElement("div", null,
+            node.type === 'data' && (React.createElement("div", { className: "mb-3" },
+                React.createElement("label", { className: "form-label" }, "Value"),
+                React.createElement("input", { type: "text", className: "form-control", value: node.textContent || '', onChange: handleTextChange }))),
+            Object.entries(node.attributes).map(([key, value]) => (React.createElement("div", { key: key, className: "mb-2" },
+                React.createElement("label", { className: "form-label" }, key),
+                React.createElement("input", { type: "text", className: "form-control", value: value, onChange: (e) => handleAttributeChange(key, e.target.value) }))))));
+    };
+    // Custom preview component for GraphML that renders a proper graph visualization
+    const GraphMLPreview = ({ xmlTree }) => {
+        // Find the graph node
+        const findGraph = (node) => {
+            if (node.type === 'graph')
+                return node;
+            for (const child of node.children) {
+                const found = findGraph(child);
+                if (found)
+                    return found;
+            }
+            return null;
+        };
+        const graph = findGraph(xmlTree);
+        if (!graph) {
+            return React.createElement("div", null, "No graph found");
+        }
+        // Extract nodes and edges
+        const nodes = graph.children.filter(child => child.type === 'node');
+        const edges = graph.children.filter(child => child.type === 'edge');
+        // Simple layout - arrange nodes in a circle
+        const radius = 150;
+        const centerX = 200;
+        const centerY = 200;
+        return (React.createElement("div", { className: "border rounded p-3 d-flex justify-content-center align-items-center", style: { height: '400px', background: '#f8f9fa' } },
+            React.createElement("svg", { width: "400", height: "400", style: { background: 'white' } },
+                edges.map(edge => {
+                    const sourceId = edge.attributes.source;
+                    const targetId = edge.attributes.target;
+                    const sourceNode = nodes.find(n => n.attributes.id === sourceId);
+                    const targetNode = nodes.find(n => n.attributes.id === targetId);
+                    if (!sourceNode || !targetNode)
+                        return null;
+                    // Calculate positions in a circle
+                    const sourceIndex = nodes.findIndex(n => n.attributes.id === sourceId);
+                    const targetIndex = nodes.findIndex(n => n.attributes.id === targetId);
+                    const sourceAngle = (2 * Math.PI * sourceIndex) / nodes.length;
+                    const targetAngle = (2 * Math.PI * targetIndex) / nodes.length;
+                    const sourceX = centerX + radius * Math.cos(sourceAngle);
+                    const sourceY = centerY + radius * Math.sin(sourceAngle);
+                    const targetX = centerX + radius * Math.cos(targetAngle);
+                    const targetY = centerY + radius * Math.sin(targetAngle);
+                    return (React.createElement("line", { key: edge.id, x1: sourceX, y1: sourceY, x2: targetX, y2: targetY, stroke: "#666", strokeWidth: "2" }));
+                }),
+                nodes.map((node, index) => {
+                    const angle = (2 * Math.PI * index) / nodes.length;
+                    const x = centerX + radius * Math.cos(angle);
+                    const y = centerY + radius * Math.sin(angle);
+                    const isSelected = selectedNodeId === node.id;
+                    return (React.createElement("g", { key: node.id },
+                        React.createElement("circle", { cx: x, cy: y, r: "20", fill: isSelected ? '#007bff' : '#6c757d', stroke: isSelected ? '#0056b3' : '#495057', strokeWidth: "2", style: { cursor: 'pointer' }, onClick: () => setSelectedNodeId(node.id) }),
+                        React.createElement("text", { x: x, y: y, textAnchor: "middle", dy: ".3em", fill: "white", fontSize: "12", style: { pointerEvents: 'none' } }, node.attributes.id)));
+                }))));
+    };
+    // Always use the custom graph visualization for the preview
+    const renderGraphMLPreviewWithGraph = (node, isSelected, eventHandlers) => {
+        // Always render the full graph visualization
+        return React.createElement(GraphMLPreview, { xmlTree: graphmlTree });
+    };
+    return (React.createElement(GenericXMLEditorPage, { initialTree: initialTree, renderPreview: renderGraphMLPreviewWithGraph, attributeEditor: renderGraphMLAttributeEditor, nodeTypes: graphmlNodeTypes, onAddNode: createGraphMLNode }));
+};

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" })));
+};