testeranto 0.177.0 → 0.197.0

package/dist/common/src/components/DesignEditorPage.js

@@ -0,0 +1,169 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DesignEditorPage = void 0;
+const react_1 = __importStar(require("react"));
+const DesignEditor_1 = require("../../design-editor/DesignEditor");
+const react_bootstrap_1 = require("react-bootstrap");
+const file_saver_1 = require("file-saver");
+const DesignEditorPage = () => {
+    const [projectId, setProjectId] = (0, react_1.useState)('default-project');
+    const [fileHandle, setFileHandle] = (0, react_1.useState)(null);
+    const handleSave = async () => {
+        try {
+            if (!designEditorRef.current) {
+                console.warn('Design editor ref not available');
+                return;
+            }
+            // Get and save current design state
+            const designData = designEditorRef.current.saveDesign();
+            if (!designData) {
+                console.warn('No design data to save');
+                return;
+            }
+            // Include projectId in the saved data
+            const fullDesign = Object.assign(Object.assign({}, designData), { projectId });
+            // Force immediate render after save
+            if (designEditorRef.current) {
+                designEditorRef.current.loadDesign(fullDesign);
+            }
+            // @ts-ignore - File System Access API
+            const newHandle = await window.showSaveFilePicker({
+                types: [{
+                        description: 'Design Files',
+                        accept: {
+                            'application/json': ['.json'],
+                        },
+                    }],
+                suggestedName: `${projectId}.json`
+            });
+            const jsonData = JSON.stringify(fullDesign, null, 2);
+            const writable = await newHandle.createWritable();
+            await writable.write(jsonData);
+            await writable.close();
+            setFileHandle(newHandle);
+            console.log('Design saved successfully:', fullDesign);
+        }
+        catch (err) {
+            console.error('Error saving file:', err);
+            if (err instanceof Error) {
+                console.error('Error details:', {
+                    name: err.name,
+                    message: err.message,
+                    stack: err.stack
+                });
+            }
+        }
+    };
+    const [design, setDesign] = (0, react_1.useState)(null);
+    const designEditorRef = (0, react_1.useRef)(null);
+    const handleOpen = async () => {
+        console.log('handleOpen triggered');
+        try {
+            if (!window.showOpenFilePicker) {
+                throw new Error('File System Access API not supported in this browser');
+            }
+            console.log('Attempting to show file picker...');
+            const [handle] = await window.showOpenFilePicker({
+                types: [{
+                        description: 'Design Files',
+                        accept: {
+                            'application/json': ['.json'],
+                        },
+                    }],
+                multiple: false
+            });
+            if (!handle) {
+                throw new Error('No file selected');
+            }
+            console.log('File handle obtained:', handle);
+            const file = await handle.getFile();
+            console.log('File object obtained:', file);
+            const contents = await file.text();
+            console.log('File contents loaded, length:', contents.length);
+            let loadedDesign = JSON.parse(contents);
+            console.log('Design parsed successfully:', loadedDesign);
+            // Ensure design has proper structure
+            if (!loadedDesign.objects || !loadedDesign.version) {
+                loadedDesign = Object.assign({ version: '1.0', background: '#ffffff', objects: [] }, loadedDesign);
+            }
+            // Validate objects array exists
+            if (!Array.isArray(loadedDesign.objects)) {
+                loadedDesign.objects = [];
+            }
+            const newProjectId = loadedDesign.projectId || 'default-project';
+            console.log('Setting projectId to:', newProjectId);
+            setProjectId(newProjectId);
+            console.log('Setting design state...');
+            setDesign(loadedDesign);
+            setFileHandle(handle);
+            // Load the design into the editor
+            if (designEditorRef.current) {
+                console.log('Calling loadDesign on editor ref with:', loadedDesign);
+                designEditorRef.current.loadDesign(loadedDesign);
+            }
+            else {
+                console.warn('designEditorRef.current is null');
+            }
+        }
+        catch (err) {
+            console.error('Error opening file:', err);
+            if (err instanceof Error) {
+                console.error('Error details:', {
+                    name: err.name,
+                    message: err.message,
+                    stack: err.stack
+                });
+            }
+        }
+    };
+    const handleExport = () => {
+        const designData = JSON.stringify({ projectId }, null, 2);
+        const blob = new Blob([designData], { type: 'application/json' });
+        (0, file_saver_1.saveAs)(blob, `${projectId}.json`);
+    };
+    return (react_1.default.createElement(react_bootstrap_1.Container, { fluid: true },
+        react_1.default.createElement(react_bootstrap_1.Row, { className: "mb-3" },
+            react_1.default.createElement(react_bootstrap_1.Col, null,
+                react_1.default.createElement("h1", null, "Design Editor"),
+                react_1.default.createElement("div", { className: "d-flex gap-2" },
+                    react_1.default.createElement(react_bootstrap_1.Button, { variant: "primary", onClick: handleOpen }, "Open"),
+                    react_1.default.createElement(react_bootstrap_1.Button, { variant: "success", onClick: handleSave }, "Save"),
+                    react_1.default.createElement(react_bootstrap_1.Button, { variant: "secondary", onClick: handleExport }, "Export")))),
+        react_1.default.createElement(react_bootstrap_1.Row, null,
+            react_1.default.createElement(react_bootstrap_1.Col, null,
+                react_1.default.createElement(DesignEditor_1.DesignEditor, { projectId: projectId, ref: designEditorRef })))));
+};
+exports.DesignEditorPage = DesignEditorPage;

package/dist/common/src/components/SunriseAnimation.js

@@ -0,0 +1,291 @@
+"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 });
+const react_1 = __importStar(require("react"));
+const SunriseAnimation = ({ active }) => {
+    const [position, setPosition] = (0, react_1.useState)(0);
+    const [dimensions, setDimensions] = (0, react_1.useState)({ width: 0, height: 0 });
+    const animationIdRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        // Set initial dimensions
+        setDimensions({
+            width: window.innerWidth,
+            height: window.innerHeight
+        });
+        const handleResize = () => {
+            setDimensions({
+                width: window.innerWidth,
+                height: window.innerHeight
+            });
+        };
+        window.addEventListener('resize', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []);
+    // Animation timing parameters
+    const ANIMATION_DURATION = 10000; //30000; // 30 seconds for full day/night cycle
+    const UPDATE_INTERVAL = 50; // Update every 50ms (~20fps)
+    (0, react_1.useEffect)(() => {
+        if (!active) {
+            // Clean up animation frame if active becomes false
+            if (animationIdRef.current) {
+                cancelAnimationFrame(animationIdRef.current);
+                animationIdRef.current = null;
+            }
+            return;
+        }
+        console.log('Starting animation with duration:', ANIMATION_DURATION, 'ms');
+        let startTime = performance.now();
+        let lastUpdateTime = 0;
+        const animate = (timestamp) => {
+            if (!active)
+                return;
+            const elapsed = (timestamp - startTime) % ANIMATION_DURATION;
+            const progress = elapsed / ANIMATION_DURATION;
+            // Only update if enough time has passed since last update
+            if (timestamp - lastUpdateTime >= UPDATE_INTERVAL) {
+                // Use cosine for smooth transition from -1 to 1 over full duration
+                const newPos = Math.cos(progress * Math.PI * 2);
+                setPosition(newPos);
+                lastUpdateTime = timestamp;
+            }
+            animationIdRef.current = requestAnimationFrame(animate);
+        };
+        // Start the animation loop
+        animationIdRef.current = requestAnimationFrame(animate);
+        return () => {
+            if (animationIdRef.current) {
+                cancelAnimationFrame(animationIdRef.current);
+                animationIdRef.current = null;
+            }
+        };
+    }, [active]);
+    const yPos = dimensions.height * (1 - position);
+    const normalizedPos = (position + 1) / 2; // Convert from [-1,1] to [0,1]
+    if (!active)
+        return null;
+    return (react_1.default.createElement("div", { id: "sunrise", style: {
+            width: '100vw',
+            height: '100vh',
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            backgroundColor: 'transparent',
+            overflow: 'hidden',
+            pointerEvents: 'none'
+        } },
+        react_1.default.createElement("div", { id: "daily-bg", style: {
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%',
+                height: '100%',
+                backgroundColor: 'rgba(0,0,0,0.3)',
+                zIndex: -1001
+            } }),
+        "Stars Container",
+        react_1.default.createElement("div", { id: "starsContainer", style: {
+                perspective: 350,
+                perspectiveOrigin: '50% 300%',
+                overflow: 'hidden',
+                position: 'absolute',
+                top: 0,
+                left: '-50%',
+                width: '200%',
+                height: '50%',
+                zIndex: -1000,
+                opacity: Math.max(0, 0.5 - normalizedPos * 0.5)
+            } },
+            react_1.default.createElement("div", { id: "stars", style: {
+                    backgroundRepeat: 'repeat',
+                    position: 'absolute',
+                    width: '200%',
+                    height: '200%',
+                    left: '-50%',
+                    bottom: 0,
+                    opacity: 0.5,
+                    transform: 'rotateX(-90deg)'
+                } })),
+        react_1.default.createElement("div", { id: "sun", style: {
+                position: 'absolute',
+                top: 0,
+                left: '50%',
+                transform: `translateX(-50%) translateY(${yPos}px)`,
+                width: '100%',
+                height: '50%',
+                background: `radial-gradient(50% ${yPos}px, circle, rgba(242,248,247,1) 0%,rgba(249,249,28,1) 3%,rgba(247,214,46,1) 8%,rgba(248,200,95,1) 12%,rgba(201,165,132,1) 30%,rgba(115,130,133,1) 51%,rgba(46,97,122,1) 85%,rgba(24,75,106,1) 100%)`,
+                zIndex: -900,
+                opacity: 0.5
+            } }),
+        react_1.default.createElement("div", { id: "sunDay", style: {
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%',
+                height: '50%',
+                background: `radial-gradient(50% ${yPos}px, circle, rgba(252,255,251,0.9) 0%,rgba(253,250,219,0.4) 30%,rgba(226,219,197,0.01) 70%,rgba(226,219,197,0.0) 70%,rgba(201,165,132,0) 100%)`,
+                zIndex: -800,
+                opacity: Math.max(0, 1 - yPos / dimensions.height)
+            } }),
+        react_1.default.createElement("div", { id: "sunSet", style: {
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%',
+                height: '50%',
+                background: `radial-gradient(50% ${yPos}px, circle, rgba(254,255,255,0.8) 5%,rgba(236,255,0,1) 10%,rgba(253,50,41,1) 25%,rgba(243,0,0,1) 40%,rgba(93,0,0,1) 100%)`,
+                zIndex: -800,
+                opacity: Math.max(0, yPos / dimensions.height - 0.2)
+            } }),
+        react_1.default.createElement("div", { id: "sky", style: {
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%',
+                height: '50%',
+                zIndex: -700,
+                background: 'linear-gradient(to top, rgba(249,251,240,1) 10%,rgba(215,253,254,1) 20%,rgba(167,222,253,1) 40%,rgba(110,175,255,1) 100%)',
+                opacity: Math.max(0, 1 - yPos / dimensions.height)
+            } }),
+        react_1.default.createElement("div", { id: "horizon", style: {
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%',
+                height: '50%',
+                background: 'linear-gradient(to top, rgba(212,87,43,0.9) 0%,rgba(246,149,52,0.8) 20%,rgba(24,75,106,0) 100%)',
+                zIndex: -700,
+                opacity: Math.max(0, yPos > dimensions.height / 2
+                    ? (dimensions.height - yPos) / (dimensions.height / 2) + 0.2
+                    : yPos / (dimensions.height / 2))
+            } }),
+        react_1.default.createElement("div", { id: "horizonNight", style: {
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%',
+                height: '50%',
+                background: 'linear-gradient(to top, rgba(57,167,255,1) 0%,rgba(13,98,245,1) 20%,rgba(0,11,22,0.1) 60%)',
+                zIndex: -600,
+                opacity: Math.max(0, (yPos - (dimensions.height * 4 / 5)) / (dimensions.height - (dimensions.height * 4 / 5)))
+            } }),
+        react_1.default.createElement("div", { id: "moon", style: {
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%',
+                height: '50%',
+                background: 'radial-gradient(40% 55%, circle, rgba(249,249,250,1) -1%,rgba(189,255,254,1) 1%,rgba(8,49,78,1) 1%,rgba(8,26,56,1) 10%,rgba(4,16,46,1) 40%,rgba(2,8,13,1) 70%)',
+                zIndex: -500,
+                opacity: Math.max(0, (yPos - (dimensions.height * 9 / 10)) / (dimensions.height - (dimensions.height * 9 / 10)))
+            } }),
+        react_1.default.createElement("div", { id: "water", style: {
+                overflow: 'hidden',
+                position: 'absolute',
+                bottom: 0,
+                left: 0,
+                width: '100%',
+                height: '50%',
+                background: 'linear-gradient(to top, rgba(0,25,45,1) 0%,rgba(14,71,117,1) 35%,rgba(26,126,174,1) 70%,rgba(62,168,220,1) 100%)',
+                zIndex: -400
+            } }),
+        react_1.default.createElement("div", { id: "waterReflectionContainer", style: {
+                perspective: 30,
+                perspectiveOrigin: `50% ${-15 + (normalizedPos * 30)}%`,
+                overflow: 'hidden',
+                position: 'absolute',
+                top: '50%',
+                left: '-3%',
+                width: '103%',
+                height: '50%',
+                zIndex: -300,
+                transform: `translateY(${dimensions.height - yPos}px)`
+            } },
+            react_1.default.createElement("div", { id: "waterReflectionMiddle", style: {
+                    position: 'absolute',
+                    top: 0,
+                    left: '-50%',
+                    width: '200%',
+                    height: '55%',
+                    background: 'radial-gradient(50% 0px, rgba(247,177,72,1) 3%,rgba(248,175,65,1) 6%,rgba(207,62,30,0.4) 35%,rgba(176,91,48,0.1) 45%,rgba(141,88,47,0.0) 60%,rgba(116,82,63,0.0) 70%,rgba(44,65,68,0.0) 80%,rgba(7,19,31,0.0) 100%)',
+                    zIndex: -200,
+                    opacity: Math.max(0, yPos > dimensions.height / 2
+                        ? (dimensions.height - yPos) / (dimensions.height / 2) - 0.1
+                        : yPos / (dimensions.height / 2) - 0.1),
+                    transform: 'rotateX(45deg)'
+                } })),
+        react_1.default.createElement("div", { id: "waterDistance", style: {
+                position: 'absolute',
+                bottom: 0,
+                left: 0,
+                width: '100%',
+                height: '50%',
+                background: 'linear-gradient(90deg, rgba(0,0,0,0.0) 10%,rgba(0,0,0,0.20) 44%,rgba(0,0,0,0.65) 95%,rgba(0,0,0,0.62) 100%)',
+                zIndex: -100,
+                opacity: Math.max(0, yPos / dimensions.height + 0.6)
+            } }),
+        react_1.default.createElement("div", { id: "darknessOverlaySky", style: {
+                backgroundColor: '#000',
+                opacity: Math.max(0, (yPos - (dimensions.height * 7 / 10)) / (dimensions.height - (dimensions.height * 7 / 10))),
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%',
+                height: '50%',
+                zIndex: -50
+            } }),
+        react_1.default.createElement("div", { id: "darknessOverlay", style: {
+                backgroundColor: '#000',
+                opacity: Math.max(0, (yPos - (dimensions.height / 2)) / (dimensions.height / 2)),
+                position: 'absolute',
+                bottom: 0,
+                left: 0,
+                width: '100%',
+                height: '50%',
+                zIndex: -5
+            } }),
+        react_1.default.createElement("div", { id: "oceanRipple", style: {
+                backgroundImage: 'repeating-linear-gradient(175deg, rgba(165,165,165,0.08) 43%,rgba(175,175,175,0.08) 45%,rgba(235,235,235,0.08) 49%,rgba(195,195,195,0.08) 50%,rgba(165,165,165,0.08) 54%)',
+                opacity: 0.5,
+                position: 'absolute',
+                left: '0%',
+                bottom: 0,
+                width: '100%',
+                height: '50%',
+                zIndex: -10
+            } })));
+};
+exports.default = SunriseAnimation;

package/dist/common/src/components/SunriseAnimation.test/interface.js

@@ -1 +1,68 @@
 "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.interface = void 0;
+const React = __importStar(require("react"));
+const ReactDom = __importStar(require("react-dom/client"));
+exports.interface = {
+    beforeEach: async (subject, initializer) => {
+        const container = document.createElement('div');
+        document.body.appendChild(container);
+        const root = ReactDom.createRoot(container);
+        const props = initializer();
+        const reactElement = React.createElement(subject, props);
+        root.render(reactElement);
+        return {
+            container,
+            reactElement,
+            domRoot: root,
+            animationElement: container.querySelector('.sunrise-animation')
+        };
+    },
+    afterEach: async (store) => {
+        store.domRoot.unmount();
+        document.body.removeChild(store.container);
+        return store;
+    },
+    andWhen: async (store, whenCB) => {
+        return whenCB(store);
+    },
+    butThen: async (store, thenCB) => {
+        return thenCB(store);
+    },
+    afterAll: () => { },
+    beforeAll: () => ({}),
+    assertThis: (x) => x,
+};

package/dist/common/src/components/SunriseAnimation.test/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/common/src/components/TestStatusBadge.js

@@ -4,51 +4,31 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TestStatusBadge = void 0;
+/* eslint-disable @typescript-eslint/no-explicit-any */
 const react_1 = __importDefault(require("react"));
 const react_bootstrap_1 = require("react-bootstrap");
 const TestStatusBadge = (props) => {
-    // Enhanced logging
-    console.groupCollapsed(`[TestStatusBadge] Rendering for ${props.testName}`);
-    console.log('Raw props:', JSON.parse(JSON.stringify(props)));
     // Simplified status determination
     const hasTests = props.testsExist !== false;
     const testCompleted = props.runTimeErrors !== -1;
     const hasRuntimeErrors = props.runTimeErrors > 0;
-    console.log('Status flags:', {
-        hasTests,
-        testCompleted,
-        hasRuntimeErrors,
-        typeErrors: props.typeErrors,
-        staticErrors: props.staticErrors
-    });
     let bddStatus;
     if (!hasTests) {
-        console.warn('No tests.json found - marking as failed');
         bddStatus = { text: '❌ No Tests', variant: 'danger' };
     }
     else if (!testCompleted) {
-        console.warn('Test did not complete (runTimeErrors=-1) - marking as failed');
         bddStatus = { text: '❌ No Tests', variant: 'danger' };
     }
     else if (hasRuntimeErrors) {
-        console.warn(`Test failed with ${props.runTimeErrors} runtime errors`);
         bddStatus = { text: `❌ BDD (${props.runTimeErrors})`, variant: 'danger' };
     }
     else {
-        console.log('Test passed all runtime checks');
         bddStatus = { text: '✅ BDD', variant: 'success' };
     }
     if (props.variant === 'compact') {
-        console.log('Rendering compact badge:', bddStatus);
         console.groupEnd();
         return react_1.default.createElement(react_bootstrap_1.Badge, { bg: bddStatus.variant }, bddStatus.text);
     }
-    console.log('Rendering full badge set with:', {
-        bddStatus,
-        typeErrors: props.typeErrors,
-        staticErrors: props.staticErrors
-    });
-    console.groupEnd();
     return (react_1.default.createElement("div", { className: "d-flex gap-2" },
         react_1.default.createElement(react_bootstrap_1.Badge, { bg: bddStatus.variant }, bddStatus.text)));
 };

package/dist/common/src/components/pure/AppFrame.js

@@ -0,0 +1,69 @@
+"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.AppFrame = void 0;
+/* eslint-disable @typescript-eslint/no-unused-vars */
+const react_1 = __importStar(require("react"));
+const react_bootstrap_1 = require("react-bootstrap");
+const react_router_dom_1 = require("react-router-dom");
+const react_router_dom_2 = require("react-router-dom");
+const AppFrame = ({ children, title, rightContent }) => {
+    const location = (0, react_router_dom_2.useLocation)();
+    const [isExpanded, setIsExpanded] = (0, react_1.useState)(true);
+    return (react_1.default.createElement("div", { className: "d-flex min-vh-100", style: { backgroundColor: '#f8f9fa' } },
+        react_1.default.createElement("div", { className: "bg-light border-end d-flex flex-column", style: {
+                width: isExpanded ? '250px' : '60px',
+                minHeight: '100vh',
+                transition: 'width 0.3s ease'
+            }, onMouseEnter: () => setIsExpanded(true), onMouseLeave: () => setIsExpanded(false) },
+            react_1.default.createElement("div", { className: "p-3 border-bottom d-flex align-items-center justify-content-center" }, isExpanded ? (react_1.default.createElement("img", { src: "/logo.svg", alt: "Testeranto Logo", style: { width: '128px', height: '128px' } })) : (react_1.default.createElement("img", { src: "/logo.svg", alt: "Testeranto Logo", style: { width: '40px', height: '40px' } }))),
+            react_1.default.createElement(react_bootstrap_1.Nav, { variant: "pills", className: "flex-column p-2 flex-grow-1" },
+                react_1.default.createElement(react_bootstrap_1.Nav.Link, { as: react_router_dom_1.NavLink, to: "/", className: `${location.pathname === '/' ? 'active' : ''} text-truncate d-flex align-items-center`, style: { width: '100%' }, title: "Projects" },
+                    react_1.default.createElement("span", { className: "me-2" }, "\uD83D\uDCC1"),
+                    isExpanded && 'Projects'),
+                react_1.default.createElement(react_bootstrap_1.Nav.Link, { as: react_router_dom_1.NavLink, to: "/processes", className: `${location.pathname.startsWith('/processes') ? 'active' : ''} text-truncate d-flex align-items-center`, style: { width: '100%' }, title: "Process Manager" },
+                    react_1.default.createElement("span", { className: "me-2" }, "\uD83D\uDCCA"),
+                    isExpanded && 'Process Manager'),
+                react_1.default.createElement(react_bootstrap_1.Nav.Link, { as: react_router_dom_1.NavLink, to: "/settings", className: `${location.pathname === '/settings' ? 'active' : ''} text-truncate d-flex align-items-center`, style: { width: '100%' }, title: "Settings" },
+                    react_1.default.createElement("span", { className: "me-2" }, "\u2699\uFE0F"),
+                    isExpanded && 'Settings')),
+            react_1.default.createElement("div", { className: "p-3 border-top text-center mt-auto" }, isExpanded ? (react_1.default.createElement("small", { className: "text-muted" },
+                "made with \u2764\uFE0F and ",
+                react_1.default.createElement("a", { href: "https://www.npmjs.com/package/testeranto" }, "testeranto"))) : (react_1.default.createElement("small", { className: "text-muted" }, "\u2764\uFE0F")))),
+        react_1.default.createElement("div", { className: "flex-grow-1 d-flex flex-column" },
+            react_1.default.createElement("main", { className: "flex-grow-1 p-4", style: { overflow: 'auto' } },
+                react_1.default.createElement(react_bootstrap_1.Container, { fluid: true, className: "h-100" }, children)))));
+};
+exports.AppFrame = AppFrame;