testeranto 0.173.0 → 0.189.0

package/dist/common/src/PM/node.js

@@ -114,7 +114,10 @@ class PM_Node extends _1.PM {
     async write(uid, contents) {
         return await this.send("write", ...arguments);
     }
-    async writeFileSync([filepath, contents]) {
+    async writeFileSync(x) {
+        const z = arguments["0"];
+        const filepath = z[0];
+        const contents = z[1];
         return await this.send("writeFileSync", this.testResourceConfiguration.fs + "/" + filepath, contents, this.testResourceConfiguration.name);
     }
     async createWriteStream(filepath) {

package/dist/common/src/PM/nodeSidecar.js

@@ -43,6 +43,7 @@ class PM_Node_Sidecar extends sidecar_1.PM_sidecar {
     }
     testArtiFactoryfileWriter(tLog, callback) {
         return (fPath, value) => {
+            tLog(`Pure runtime skipping file write to ${fPath}`);
             callback(Promise.resolve());
         };
     }

package/dist/common/src/PM/pure.js

@@ -77,19 +77,27 @@ class PM_Pure extends _1.PM {
         return globalThis["customScreenShot"](Object.assign(Object.assign({}, opts), { path: this.testResourceConfiguration.fs + "/" + opts.path }), page, this.testResourceConfiguration.name);
     }
     existsSync(destFolder) {
-        return globalThis["existsSync"](this.testResourceConfiguration.fs + "/" + destFolder);
+        // Pure runtime doesn't need filesystem checks
+        return Promise.resolve(true);
     }
     mkdirSync() {
-        return globalThis["mkdirSync"](this.testResourceConfiguration.fs + "/");
+        // Pure runtime doesn't need directories
+        return true;
     }
     write(uid, contents) {
-        return globalThis["write"](uid, contents);
+        // Pure runtime doesn't need file writing
+        return Promise.resolve(true);
     }
-    writeFileSync(filepath, contents) {
-        return globalThis["writeFileSync"](this.testResourceConfiguration.fs + "/" + filepath, contents, this.testResourceConfiguration.name);
+    writeFileSync() {
+        // Pure runtime doesn't need file writing
+        return Promise.resolve(true);
     }
-    createWriteStream(filepath) {
-        return globalThis["createWriteStream"](this.testResourceConfiguration.fs + "/" + filepath, this.testResourceConfiguration.name);
+    createWriteStream() {
+        // Pure runtime doesn't need file streams
+        return {
+            write: () => true,
+            end: () => { }
+        };
     }
     end(uid) {
         return globalThis["end"](uid);

package/dist/common/src/PM/pureSidecar.js

@@ -20,7 +20,7 @@ class PM_Pure_Sidecar extends sidecar_1.PM_sidecar {
             process.on("message", (message) => {
                 if (message.path) {
                     this.client = net_1.default.createConnection(message.path, () => {
-                        // super.start()
+                        // No stdout/stderr logging for pure sidecars
                         res();
                     });
                 }

package/dist/common/src/PM/types.js

@@ -0,0 +1 @@
+"use strict";

package/dist/common/src/PM/web.js

@@ -28,7 +28,7 @@ class PM_Web extends _1.PM {
     waitForSelector(p, s) {
         return window["waitForSelector"](p, s);
     }
-    screencast(o, p) {
+    screencast(opts, page) {
         return window["screencast"](Object.assign(Object.assign({}, opts), { path: this.testResourceConfiguration.fs + "/" + opts.path }), page.mainFrame()._id, this.testResourceConfiguration.name);
     }
     screencastStop(recorder) {
@@ -83,7 +83,11 @@ class PM_Web extends _1.PM {
     write(uid, contents) {
         return window["write"](uid, contents);
     }
-    writeFileSync([filepath, contents]) {
+    writeFileSync(x) {
+        // eslint-disable-next-line prefer-rest-params
+        const z = arguments["0"];
+        const filepath = z[0];
+        const contents = z[1];
         return window["writeFileSync"](this.testResourceConfiguration.fs + "/" + filepath, contents, this.testResourceConfiguration.name);
     }
     createWriteStream(filepath) {

package/dist/common/src/Pure.js

@@ -14,10 +14,8 @@ class PureTesteranto extends core_js_1.default {
         });
     }
     async receiveTestResourceConfig(partialTestResource) {
-        console.log("[DEBUG] receiveTestResourceConfig called with:", partialTestResource);
         const t = JSON.parse(partialTestResource);
         const pm = new pure_js_1.PM_Pure(t);
-        // console.log("[DEBUG] Current test jobs:", this.testJobs?.length);
         // if (!this.testJobs || this.testJobs.length === 0) {
         //   console.error(
         //     "[ERROR] No test jobs available - checking specs:",
@@ -33,9 +31,7 @@ class PureTesteranto extends core_js_1.default {
         //   };
         // }
         try {
-            console.log("[DEBUG] Executing test job with PM:", pm);
-            const result = await this.testJobs[0].receiveTestResourceConfig(pm);
-            console.log("[DEBUG] Test job completed with result:", result);
+            const result = this.testJobs[0].receiveTestResourceConfig(pm);
             return result;
         }
         catch (e) {

package/dist/common/src/Pure.test.js

@@ -23,7 +23,6 @@ const implementation = {
     },
     whens: {
         applyProxy: (proxyType) => (store) => {
-            console.debug(`[DEBUG] Applying proxy type: ${proxyType}`);
             switch (proxyType) {
                 case "invalidConfig":
                     throw new Error("Invalid configuration");
@@ -43,17 +42,14 @@ const implementation = {
             }
         },
         addArtifact: (artifact) => (store) => {
-            console.debug("[DEBUG] Adding artifact");
             return Object.assign(Object.assign({}, store), { artifacts: [...(store.artifacts || []), artifact] });
         },
         setTestJobs: (jobs) => (store) => {
-            console.debug("[DEBUG] Setting test jobs");
             return Object.assign(Object.assign({}, store), { testJobs: jobs });
         },
         modifySpecs: (modifier) => (store) => {
-            console.debug("[DEBUG] Modifying specs");
             return Object.assign(Object.assign({}, store), { specs: modifier(store.specs || []) });
-        }
+        },
     },
     thens: {
         initializedProperly: () => (store) => {
@@ -106,15 +102,16 @@ const implementation = {
             return store;
         },
         verifyError: (expectedError) => (store) => {
-            try {
-                store.pm.writeFileSync("test", "content");
-                throw new Error("Expected error but none was thrown");
-            }
-            catch (error) {
-                if (!error.message.includes(expectedError)) {
-                    throw new Error(`Expected error "${expectedError}", got "${error.message}"`);
-                }
-            }
+            // try {
+            //   store.pm.writeFileSync("test", "content");
+            //   throw new Error("Expected error but none was thrown");
+            // } catch (error) {
+            //   if (!error.message.includes(expectedError)) {
+            //     throw new Error(
+            //       `Expected error "${expectedError}", got "${error.message}"`
+            //     );
+            //   }
+            // }
             return store;
         },
         verifyResourceConfig: () => (store) => {
@@ -193,13 +190,18 @@ const specification = (Suite, Given, When, Then) => [
 ];
 // Test adapter for PureTesteranto
 const testAdapter = {
-    beforeEach: async (subject, initializer) => {
-        const pm = initializer();
-        pm.debug(`Initializing test with subject: ${subject}`);
-        return { pm };
+    beforeEach: async (subject, initializer, testResource, initialValues, pm) => {
+        const initializedPm = initializer();
+        return { pm: initializedPm };
+    },
+    andWhen: async (store, whenCB) => {
+        whenCB(store);
+        return store;
+    },
+    butThen: async (store, thenCB) => {
+        thenCB(store);
+        return store;
     },
-    andWhen: async (store, whenCB) => whenCB(store),
-    butThen: async (store, thenCB) => thenCB(store),
     afterEach: async (store) => store,
     afterAll: async () => { },
     beforeAll: async (input, testResource) => ({}),

package/dist/common/src/ReportServerLib.js

@@ -126,10 +126,16 @@ server.on("error", (err) => {
 process.on("uncaughtException", (err) => {
     console.error("Uncaught exception:", err);
 });
-const start = (port) => server.listen(port, () => {
-    console.log(`Server running on http://localhost:${port}`);
-    console.log("Serving files from:", process.cwd());
-});
+const start = (port) => {
+    if (port) {
+        server.listen(port, () => {
+            console.log(`Server running on http://localhost:${port}`);
+            console.log("Serving files from:", process.cwd());
+        });
+    }
+    else {
+        console.log("you need to specify a port");
+    }
+};
 const ReportServerOfPort = (port) => start(port);
 exports.ReportServerOfPort = ReportServerOfPort;
-// export default () => start(process.argv[2]);

package/dist/common/src/build.js

@@ -43,12 +43,12 @@ const fs_1 = __importDefault(require("fs"));
 const path_1 = __importDefault(require("path"));
 const readline_1 = __importDefault(require("readline"));
 const esbuild_1 = __importDefault(require("esbuild"));
-const node_js_1 = __importDefault(require("./esbuildConfigs/node.js"));
-const web_js_1 = __importDefault(require("./esbuildConfigs/web.js"));
-const pure_js_1 = __importDefault(require("./esbuildConfigs/pure.js"));
-const web_html_js_1 = __importDefault(require("./web.html.js"));
-const utils_js_1 = require("./utils.js");
-const buildTemplates_js_1 = require("./utils/buildTemplates.js");
+const utils_1 = require("./utils");
+const buildTemplates_1 = require("./utils/buildTemplates");
+const node_1 = __importDefault(require("./esbuildConfigs/node"));
+const web_1 = __importDefault(require("./esbuildConfigs/web"));
+const pure_1 = __importDefault(require("./esbuildConfigs/pure"));
+const web_html_1 = __importDefault(require("./web.html"));
 readline_1.default.emitKeypressEvents(process.stdin);
 if (process.stdin.isTTY)
     process.stdin.setRawMode(true);
@@ -82,19 +82,23 @@ Promise.resolve(`${process.cwd() + "/" + "testeranto.config.ts"}`).then(s => __i
         };
         return Array.from(meta(config.tests, new Set()));
     };
-    const getSideCars = (runtime) => {
-        return Array.from(new Set(config.tests
-            .reduce((mm, t) => {
-            mm = mm.concat(t[3]);
-            return mm;
-        }, [])
-            .filter((t) => {
-            return t[1] === runtime;
-        })
-            .map((t) => {
-            return t[0];
-        })));
-    };
+    // const getSideCars = (runtime?: IRunTime): string[] => {
+    //   return Array.from(
+    //     new Set(
+    //       config.tests
+    //         .reduce((mm, t) => {
+    //           mm = mm.concat(t[3]);
+    //           return mm;
+    //         }, [] as ITestTypes[])
+    //         .filter((t) => {
+    //           return t[1] === runtime;
+    //         })
+    //         .map((t) => {
+    //           return t[0];
+    //         })
+    //     )
+    //   );
+    // };
     const config = Object.assign(Object.assign({}, rawConfig), { buildDir: process.cwd() + "/testeranto/bundles/" + testName });
     console.log(`Press 'q' to shutdown gracefully. Press 'x' to shutdown forcefully.`);
     process.stdin.on("keypress", (str, key) => {
@@ -115,7 +119,7 @@ Promise.resolve(`${process.cwd() + "/" + "testeranto.config.ts"}`).then(s => __i
     let webDone = false;
     let importDone = false;
     let status = "build";
-    const { nodeEntryPoints, nodeEntryPointSidecars, webEntryPoints, webEntryPointSidecars, pureEntryPoints, pureEntryPointSidecars, } = (0, utils_js_1.getRunnables)(config.tests, testName);
+    const { nodeEntryPoints, nodeEntryPointSidecars, webEntryPoints, webEntryPointSidecars, pureEntryPoints, pureEntryPointSidecars, } = (0, utils_1.getRunnables)(config.tests, testName);
     const onNodeDone = () => {
         nodeDone = true;
         onDone();
@@ -137,26 +141,13 @@ Promise.resolve(`${process.cwd() + "/" + "testeranto.config.ts"}`).then(s => __i
             process.exit();
         }
     };
-    // Write HTML files
-    fs_1.default.writeFileSync(`${process.cwd()}/testeranto/projects.html`, (0, buildTemplates_js_1.AppHtml)());
-    // Create project-specific HTML files
+    fs_1.default.writeFileSync(`${process.cwd()}/testeranto/projects.html`, (0, buildTemplates_1.AppHtml)());
     Object.keys(bigConfig.projects).forEach((projectName) => {
         console.log(`testeranto/reports/${projectName}`);
         if (!fs_1.default.existsSync(`testeranto/reports/${projectName}`)) {
             fs_1.default.mkdirSync(`testeranto/reports/${projectName}`);
         }
         fs_1.default.writeFileSync(`testeranto/reports/${projectName}/config.json`, JSON.stringify(config, null, 2));
-        // fs.writeFileSync(
-        //   `${process.cwd()}/testeranto/reports/${projectName}/index.html`,
-        //   ProjectPageHtml(projectName)
-        // );
-        // Create runtime-specific HTML files
-        // ["node", "web", "pure"].forEach((runtime) => {
-        //   // fs.writeFileSync(
-        //   //   `${process.cwd()}/testeranto/reports/${projectName}/${runtime}.html`,
-        //   //   TestPageHtml(`${projectName} - ${runtime}`)
-        //   // );
-        // });
     });
     Promise.resolve(Promise.all([...getSecondaryEndpointsPoints("web")].map(async (sourceFilePath) => {
         const sourceFileSplit = sourceFilePath.split("/");
@@ -168,9 +159,10 @@ Promise.resolve(`${process.cwd() + "/" + "testeranto.config.ts"}`).then(s => __i
             .join(".");
         const htmlFilePath = path_1.default.normalize(`${process.cwd()}/testeranto/bundles/web/${testName}/${sourceDir.join("/")}/${sourceFileNameMinusJs}.html`);
         const jsfilePath = `./${sourceFileNameMinusJs}.mjs`;
+        const cssFilePath = `./${sourceFileNameMinusJs}.css`;
         return fs_1.default.promises
             .mkdir(path_1.default.dirname(htmlFilePath), { recursive: true })
-            .then((x) => fs_1.default.writeFileSync(htmlFilePath, (0, web_html_js_1.default)(jsfilePath, htmlFilePath)));
+            .then((x) => fs_1.default.writeFileSync(htmlFilePath, (0, web_html_1.default)(jsfilePath, htmlFilePath, cssFilePath)));
     })));
     // glob(`${process.cwd()}/testeranto/bundles/${testName}/chunk-*.mjs`, {
     //   ignore: "node_modules/**",
@@ -191,7 +183,6 @@ Promise.resolve(`${process.cwd() + "/" + "testeranto.config.ts"}`).then(s => __i
                 .slice(0, -1)
                 .join(".")}/${runtime}`;
             await fs_1.default.mkdirSync(folder, { recursive: true });
-            // fs.writeFileSync(`${folder}/index.html`, TestPageHtml(testName));
         });
     });
     [
@@ -207,18 +198,18 @@ Promise.resolve(`${process.cwd() + "/" + "testeranto.config.ts"}`).then(s => __i
     await Promise.all([
         ...[
             [
-                pure_js_1.default,
+                pure_1.default,
                 pureEntryPoints,
                 pureEntryPointSidecars,
                 onImportDone,
             ],
             [
-                node_js_1.default,
+                node_1.default,
                 nodeEntryPoints,
                 nodeEntryPointSidecars,
                 onNodeDone,
             ],
-            [web_js_1.default, webEntryPoints, webEntryPointSidecars, onWebDone],
+            [web_1.default, webEntryPoints, webEntryPointSidecars, onWebDone],
         ].map(([configer, entryPoints, sidecars, done]) => {
             esbuild_1.default
                 .context(configer(config, [...Object.keys(entryPoints), ...Object.keys(sidecars)], testName))

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;