@homefile/components-v2 2.57.0 → 2.59.0

package/dist/assets/locales/pt/index.json

@@ -15,7 +15,9 @@
     "terms": "Criando uma conta Homefile você concorda com os nossos ",
     "signupBt": "Criar conta",
     "signin": "Já possui uma conta Homefile?",
-    "signinBt": "Log in"
+    "signinBt": "Log in",
+    "continueGoogle": "Continuar com o Google",
+    "or": "ou"
   },
   "partner": {
     "wizardSteps": {

package/dist/components/animations/Birds.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Birds — self-contained animated flock overlay for the onboarding sky.
+ *
+ * Renders SVG birds onto a fixed, non-interactive layer that sits over the
+ * CloudsAnimation sky (CloudsAnimation supplies the gradient, clouds and trees).
+ * Two archetypes: small fast "flappers" (short wings, quick eased beat) ride low;
+ * wide-winged "soarers" ride high and slow. Flight paths curve, wingbeats are
+ * eased (fast down / slow up with a glide hold), and flight undulates — flap to
+ * climb, glide to sink. Honors prefers-reduced-motion.
+ */
+export declare const Birds: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/animations/Birds.js

@@ -0,0 +1,196 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+/**
+ * Birds — self-contained animated flock overlay for the onboarding sky.
+ *
+ * Renders SVG birds onto a fixed, non-interactive layer that sits over the
+ * CloudsAnimation sky (CloudsAnimation supplies the gradient, clouds and trees).
+ * Two archetypes: small fast "flappers" (short wings, quick eased beat) ride low;
+ * wide-winged "soarers" ride high and slow. Flight paths curve, wingbeats are
+ * eased (fast down / slow up with a glide hold), and flight undulates — flap to
+ * climb, glide to sink. Honors prefers-reduced-motion.
+ */
+export const Birds = () => {
+    const layerRef = useRef(null);
+    useEffect(() => {
+        const layer = layerRef.current;
+        if (!layer)
+            return;
+        const NS = 'http://www.w3.org/2000/svg';
+        const rand = (a, b) => a + Math.random() * (b - a);
+        const clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v));
+        const f = (n) => +(+n).toFixed(2);
+        // Eased wing-flap splines: fast down-stroke, slow up-stroke, then a held glide.
+        const S_DOWN = '0.2 0.75 0.35 1';
+        const S_UP = '0.4 0 0.28 1';
+        const S_GIN = '0.35 0 0.6 1';
+        const S_HOLD = '0.5 0 0.5 1';
+        const S_GOUT = '0.45 0 0.5 1';
+        const buildFlap = (nBeats, glideFrac, vUp, vDown, vGlide) => {
+            const flap = 1 - glideFrac;
+            const seg = flap / (nBeats * 2);
+            const values = [vUp];
+            const times = [0];
+            const splines = [];
+            let t = 0;
+            for (let b = 0; b < nBeats; b++) {
+                t += seg;
+                values.push(vDown);
+                times.push(t);
+                splines.push(S_DOWN);
+                t += seg;
+                values.push(vUp);
+                times.push(t);
+                splines.push(S_UP);
+            }
+            const gin = flap + (1 - flap) * 0.25;
+            const hold = gin + (1 - gin) * 0.5;
+            values.push(vGlide);
+            times.push(gin);
+            splines.push(S_GIN);
+            values.push(vGlide);
+            times.push(hold);
+            splines.push(S_HOLD);
+            values.push(vUp);
+            times.push(1);
+            splines.push(S_GOUT);
+            return {
+                values: values.join('; '),
+                keyTimes: times.map(f).join('; '),
+                keySplines: splines.join('; '),
+            };
+        };
+        const makeBird = (W, H) => {
+            const depth = Math.random(); // haze/opacity/blur depth (independent of size)
+            const soarer = Math.random() < 0.42;
+            const size = soarer ? rand(22, 46) : rand(9, 22);
+            const driftSpeed = (soarer ? rand(30, 52) : rand(13, 30)) + rand(-3, 3);
+            const nBeats = soarer ? (Math.random() < 0.5 ? 1 : 2) : Math.round(rand(3, 6));
+            const glideFrac = soarer ? rand(0.55, 0.8) : rand(0.04, 0.2);
+            const P = soarer ? rand(3.4, 5.4) : rand(0.5, 0.95); // flappers beat much quicker
+            // flapper bounce dampened (was 7–17) so a couple don't over-bob on small bodies
+            const boundAmp = (soarer ? rand(3, 8) : rand(6, 11)) * (0.6 + depth * 0.7);
+            const wingAmp = soarer ? rand(0.55, 0.9) : rand(0.9, 1.4);
+            const upTip = f(15 - 9 * wingAmp);
+            const upBody = f(15 + 2 * wingAmp);
+            const dnTip = f(15 + 5 * wingAmp);
+            const dnBody = f(15 - 1.5 * wingAmp);
+            const glTip = f(15 - 3 * wingAmp);
+            // small fast birds get shorter (stubbier) wingspans
+            const wx0 = soarer ? 5 : 10;
+            const wx1 = soarer ? 35 : 30;
+            const vUp = `M ${wx0},${upTip} L 20,${upBody} L ${wx1},${upTip}`;
+            const vDown = `M ${wx0},${dnTip} L 20,${dnBody} L ${wx1},${dnTip}`;
+            const vGlide = `M ${wx0},${glTip} L 20,16 L ${wx1},${glTip}`;
+            const flapAnim = buildFlap(nBeats, glideFrac, vUp, vDown, vGlide);
+            const phase = -rand(0, P);
+            const ltr = Math.random() < 0.6;
+            const x0 = ltr ? -80 : W + 80;
+            const x1 = ltr ? W + 80 : -80;
+            let pathStr;
+            if (soarer) {
+                // soarers ride thermals: glide in, circle once (a banking turn), drift out
+                const cx = rand(0.25, 0.75) * W;
+                const cy = rand(0.06, 0.3) * H; // high band
+                const r = rand(45, 95);
+                const k = 0.5523 * r; // cubic-bezier circle constant
+                const eY = clamp(cy + rand(-0.12, 0.12) * H, 0.03 * H, 0.4 * H);
+                const xY = clamp(cy + rand(-0.12, 0.12) * H, 0.03 * H, 0.4 * H);
+                const rx = cx + r; // circle entry point (right of center)
+                const loop = `C ${f(x0 + (rx - x0) * 0.5)},${f(eY)} ${f(rx)},${f(cy - r)} ${f(rx)},${f(cy)} ` + // glide in to circle
+                    `C ${f(rx)},${f(cy - k)} ${f(cx + k)},${f(cy - r)} ${f(cx)},${f(cy - r)} ` + // right → top
+                    `C ${f(cx - k)},${f(cy - r)} ${f(cx - r)},${f(cy - k)} ${f(cx - r)},${f(cy)} ` + // top → left
+                    `C ${f(cx - r)},${f(cy + k)} ${f(cx - k)},${f(cy + r)} ${f(cx)},${f(cy + r)} ` + // left → bottom
+                    `C ${f(cx + k)},${f(cy + r)} ${f(rx)},${f(cy + k)} ${f(rx)},${f(cy)} ` + // bottom → right (loop closed)
+                    `C ${f(rx)},${f(cy - r)} ${f(x1 + (rx - x1) * 0.5)},${f(xY)} ${f(x1)},${f(xY)}`; // drift out
+                pathStr = `path("M ${f(x0)},${f(eY)} ${loop}")`;
+            }
+            else {
+                const y0 = rand(0.42, 0.8) * H; // flappers low
+                const y1 = clamp(y0 + rand(-0.2, 0.2) * H, 0.03 * H, 0.86 * H);
+                const cx1 = x0 + (x1 - x0) * rand(0.2, 0.42);
+                const cy1 = clamp(y0 + rand(-0.32, 0.32) * H, 0, H);
+                const cx2 = x0 + (x1 - x0) * rand(0.6, 0.82);
+                const cy2 = clamp(y1 + rand(-0.32, 0.32) * H, 0, H);
+                pathStr = `path("M ${f(x0)},${f(y0)} C ${f(cx1)},${f(cy1)} ${f(cx2)},${f(cy2)} ${f(x1)},${f(y1)}")`;
+            }
+            const bird = document.createElement('div');
+            bird.className = 'hf-bird';
+            bird.style.width = `${size}px`;
+            bird.style.height = `${f(size * 0.77)}px`;
+            bird.style.offsetPath = pathStr;
+            bird.style.animationDuration = `${driftSpeed}s`;
+            bird.style.animationDelay = `${-rand(0, driftSpeed)}s`;
+            // darker/more-present background birds: higher opacity floor + lighter haze so the far ones don't disappear
+            bird.style.opacity = String(f(0.34 + depth * 0.54));
+            bird.style.zIndex = String(Math.round(depth * 10));
+            if (depth < 0.32)
+                bird.style.filter = `blur(${((0.32 - depth) * 2).toFixed(1)}px)`;
+            const bob = document.createElement('div');
+            bob.className = 'hf-bob';
+            bob.style.setProperty('--p', `${P}s`);
+            bob.style.setProperty('--amp', `${f(boundAmp)}px`);
+            bob.style.animationDelay = `${phase}s`;
+            const svg = document.createElementNS(NS, 'svg');
+            svg.setAttribute('viewBox', '0 0 40 30');
+            svg.setAttribute('fill', 'none');
+            svg.setAttribute('stroke', '#4e2d68');
+            svg.setAttribute('stroke-width', soarer ? '2.4' : '3');
+            svg.setAttribute('stroke-linecap', 'round');
+            svg.setAttribute('stroke-linejoin', 'round');
+            const path = document.createElementNS(NS, 'path');
+            path.setAttribute('d', vUp);
+            const anim = document.createElementNS(NS, 'animate');
+            anim.setAttribute('attributeName', 'd');
+            anim.setAttribute('dur', `${P}s`);
+            anim.setAttribute('repeatCount', 'indefinite');
+            anim.setAttribute('calcMode', 'spline');
+            anim.setAttribute('values', flapAnim.values);
+            anim.setAttribute('keyTimes', flapAnim.keyTimes);
+            anim.setAttribute('keySplines', flapAnim.keySplines);
+            anim.setAttribute('begin', `${phase}s`);
+            path.appendChild(anim);
+            svg.appendChild(path);
+            bob.appendChild(svg);
+            bird.appendChild(bob);
+            return bird;
+        };
+        const makeFlock = () => {
+            layer.innerHTML = '';
+            const W = window.innerWidth;
+            const H = window.innerHeight;
+            // a few at a time, not a constant flock — sparse, so they come and go
+            const count = Math.round(clamp(W / 340, 3, 6));
+            for (let i = 0; i < count; i++)
+                layer.appendChild(makeBird(W, H));
+        };
+        makeFlock();
+        let rt;
+        const onResize = () => {
+            clearTimeout(rt);
+            rt = setTimeout(makeFlock, 300);
+        };
+        window.addEventListener('resize', onResize);
+        return () => {
+            window.removeEventListener('resize', onResize);
+            clearTimeout(rt);
+            layer.innerHTML = '';
+        };
+    }, []);
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: BIRDS_CSS }), _jsx("div", { className: "hf-birds", ref: layerRef, "aria-hidden": "true" })] }));
+};
+const BIRDS_CSS = `
+.hf-birds{position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden;}
+.hf-bird{position:absolute; top:0; left:0; will-change:offset-distance; offset-rotate:0deg;
+  animation-name:hf-glide-path; animation-timing-function:linear; animation-iteration-count:infinite;}
+.hf-bird svg{display:block; width:100%; height:100%;}
+@keyframes hf-glide-path{ from{offset-distance:0%;} to{offset-distance:100%;} }
+.hf-bob{width:100%; height:100%; will-change:transform; animation-name:hf-bound;
+  animation-duration:var(--p,3s); animation-iteration-count:infinite;}
+@keyframes hf-bound{
+  0%{transform:translateY(0); animation-timing-function:cubic-bezier(.25,.7,.35,1);}
+  40%{transform:translateY(calc(-1 * var(--amp,10px))); animation-timing-function:cubic-bezier(.55,0,.75,1);}
+  100%{transform:translateY(0);}
+}
+@media (prefers-reduced-motion:reduce){ .hf-bird,.hf-bob{animation:none !important;} }
+`;

package/dist/components/animations/CloudsAnimation.d.ts

@@ -1,5 +1,4 @@
 import { PropsWithChildren } from 'react';
-export declare const moveLeftToRightAirplane: import("@emotion/serialize").Keyframes;
 export declare const moveRightToLeft: import("@emotion/serialize").Keyframes;
 export declare const moveRightToLeftWithFade: import("@emotion/serialize").Keyframes;
 export declare const moveRightToLeftWithFade2: import("@emotion/serialize").Keyframes;

package/dist/components/animations/CloudsAnimation.js

@@ -1,20 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, useEffect, useState } from 'react';
-import { Airplane, Cloud1, Cloud2, Cloud3 } from '../../assets/images';
+import { useEffect, useState } from 'react';
+import { Cloud1, Cloud2, Cloud3 } from '../../assets/images';
 import { useWindowDimensions } from '../../hooks';
 import { colors } from '../../theme/colors';
-import { getTimeOfDay, getTimeOfDaySeason, } from '../../utils';
+import { getTimeOfDay, } from '../../utils';
 import { Box, Image } from '@chakra-ui/react';
 import { keyframes } from '@emotion/react';
 import { WeatherTrees } from './WeatherTrees';
-export const moveLeftToRightAirplane = keyframes `
-    0% {
-      transform: translateX(-100%);
-    }
-    100% {
-      transform: translateX(500%);
-    }
-  `;
+import { Birds } from './Birds';
+import { Stars } from './Stars';
+import { TimeOfDayContext } from './timeOfDayContext';
 export const moveRightToLeft = keyframes `
     0% {
       transform: translateX(250%);
@@ -69,22 +64,62 @@ export const moveRightToLeftWithFade3 = keyframes `
   `;
 export const CloudsAnimation = ({ children }) => {
     const [timeOfDay, setTimeOfDay] = useState(getTimeOfDay());
-    const timeOfDaySeason = getTimeOfDaySeason();
+    // Preview toggle: flip to true to run a fast day→night loop locally. MUST be false in shipped code.
+    const DEMO = false;
+    const CYCLE = 40000; // demo loop length (ms), only used when DEMO is true
     const gradients = {
         day: colors.dayGradient,
         evening: colors.eveningGradient,
         morning: colors.morningGradient,
-        night: colors.nightGradient,
+        // dark night sky for the login background only; the shared nightGradient token is left as-is for other surfaces
+        night: 'linear(to-b, #080c22, #1c2347)',
     };
+    // clouds are pushed back (faint) by day; at night they are not rendered at all (clear night sky)
+    // clouds are faint by day, and very transparent at dusk (evening sky is richer); hidden at night
+    const cloudOpacity = timeOfDay === 'night' ? 0 : timeOfDay === 'evening' ? 0.08 : 0.4;
+    const showClouds = timeOfDay !== 'night';
+    // each corner stacks the time-of-day tree variants and crossfades between them:
+    // morning = yellow, day = green, evening = pink (bespoke art); night reuses the day
+    // shape tinted dark purple so it matches day. Opacity crossfade = smooth color change.
+    const treeLayers = [
+        { key: 'morning', season: 'morning-summer' },
+        { key: 'day', season: 'day-summer' },
+        { key: 'evening', season: 'evening-summer' },
+        {
+            key: 'night',
+            season: 'day-summer',
+            filter: 'brightness(0.36) saturate(1.65) hue-rotate(158deg)',
+        },
+    ];
     useEffect(() => {
-        const interval = setInterval(() => {
-            setTimeOfDay(getTimeOfDay());
-        }, 60000);
+        if (DEMO) {
+            const order = ['night', 'morning', 'day', 'evening'];
+            let i = 0;
+            setTimeOfDay(order[0]);
+            const id = setInterval(() => {
+                i = (i + 1) % order.length;
+                setTimeOfDay(order[i]);
+            }, CYCLE / 4);
+            return () => clearInterval(id);
+        }
+        const interval = setInterval(() => setTimeOfDay(getTimeOfDay()), 60000);
         return () => clearInterval(interval);
-    }, []);
+    }, [DEMO, CYCLE]);
     const { windowDimensions: { width }, } = useWindowDimensions();
     const isMobile = width < 768;
     if (isMobile)
-        return _jsx(Fragment, { children: children });
-    return (_jsxs(Box, { minH: "100vh", w: "full", position: "relative", bgGradient: gradients[timeOfDay], overflowX: "hidden", overflowY: "scroll", children: [children, _jsx(Image, { src: Cloud1, position: "fixed", w: "auto", h: "80px", top: "50px", animation: `${moveRightToLeftWithFade3} 400s linear infinite`, zIndex: "1" }), _jsx(Image, { src: Cloud2, position: "fixed", w: "auto", h: "120px", top: "80px", animation: `${moveRightToLeftWithFade3} 200s linear infinite`, zIndex: "1" }), _jsx(Image, { src: Cloud3, position: "fixed", w: "auto", h: "160px", top: "120px", animation: `${moveRightToLeftWithFade3} 130s linear infinite`, zIndex: "1" }), _jsx(Image, { src: Cloud1, position: "fixed", w: "auto", h: "100px", top: "160px", animation: `${moveRightToLeftWithFade2} 400s linear infinite`, zIndex: "1" }), _jsx(Image, { src: Cloud2, position: "fixed", w: "auto", h: "112px", top: "220px", animation: `${moveRightToLeftWithFade2} 200s linear infinite`, zIndex: "1" }), _jsx(Image, { src: Cloud3, position: "fixed", w: "auto", h: "160px", top: "300px", animation: `${moveRightToLeftWithFade2} 130s linear infinite`, zIndex: "1" }), _jsx(Image, { src: Airplane, position: "fixed", w: "auto", h: "40px", top: "85px", animation: `${moveLeftToRightAirplane} 500s cubic-bezier(1, 1, 1, 500) infinite`, zIndex: "1" }), _jsx(WeatherTrees, { timeOfDaySeason: timeOfDaySeason, position: "fixed", bottom: "0", right: "0", w: "auto", h: "100px", zIndex: "1" }), _jsx(WeatherTrees, { timeOfDaySeason: timeOfDaySeason, position: "fixed", bottom: "0", left: "2", w: "auto", transform: "rotateY(180deg)", h: "100px", zIndex: "1" })] }));
+        return (_jsx(TimeOfDayContext.Provider, { value: timeOfDay, children: children }));
+    return (_jsx(TimeOfDayContext.Provider, { value: timeOfDay, children: _jsxs(Box, { minH: "100vh", w: "full", position: "relative", overflowX: "hidden", overflowY: "scroll", children: [Object.keys(gradients).map((key) => (_jsx(Box, { position: "fixed", inset: 0, zIndex: 0, pointerEvents: "none", bgGradient: gradients[key], opacity: timeOfDay === key ? 1 : 0, transition: timeOfDay === key
+                        ? 'opacity 1.6s ease-in' // incoming sky fades in first
+                        : 'opacity 1.6s ease-out 1.4s' // outgoing waits, then fades — no transparent (white) gap
+                 }, key))), _jsx(Box, { position: "fixed", inset: 0, zIndex: 0, pointerEvents: "none", bgGradient: "linear(to-b, #060a1f 0%, #080c22 28%, rgba(8,12,34,0) 66%)", opacity: timeOfDay === 'night' ? 1 : 0, transition: "opacity 0.9s ease-in" }), children, (timeOfDay === 'night' || timeOfDay === 'evening') && (_jsx(Box, { style: {
+                        opacity: timeOfDay === 'night' ? 1 : 0,
+                        transition: 'opacity 2s ease-in',
+                    }, children: _jsx(Stars, {}) })), _jsxs(Box, { position: "fixed", inset: 0, zIndex: "1", pointerEvents: "none", style: { opacity: cloudOpacity, transition: 'opacity 1.8s ease-in 1.2s' }, children: [_jsx(Image, { src: Cloud1, position: "fixed", w: "auto", h: "80px", top: "50px", animation: `${moveRightToLeftWithFade3} 400s linear infinite`, zIndex: "1" }), _jsx(Image, { src: Cloud2, position: "fixed", w: "auto", h: "120px", top: "80px", animation: `${moveRightToLeftWithFade3} 200s linear infinite`, zIndex: "1" }), _jsx(Image, { src: Cloud3, position: "fixed", w: "auto", h: "160px", top: "120px", animation: `${moveRightToLeftWithFade3} 130s linear infinite`, zIndex: "1" }), _jsx(Image, { src: Cloud1, position: "fixed", w: "auto", h: "100px", top: "160px", animation: `${moveRightToLeftWithFade2} 400s linear infinite`, zIndex: "1" }), _jsx(Image, { src: Cloud2, position: "fixed", w: "auto", h: "112px", top: "220px", animation: `${moveRightToLeftWithFade2} 200s linear infinite`, zIndex: "1" }), _jsx(Image, { src: Cloud3, position: "fixed", w: "auto", h: "160px", top: "300px", animation: `${moveRightToLeftWithFade2} 130s linear infinite`, zIndex: "1" })] }), showClouds && _jsx(Birds, {}), treeLayers.map((t) => (_jsx(WeatherTrees, { timeOfDaySeason: t.season, filter: t.filter, position: "fixed", bottom: "0", right: "0", w: "auto", h: "100px", zIndex: "1", style: {
+                        opacity: timeOfDay === t.key ? 1 : 0,
+                        transition: 'opacity 1.8s ease-in-out',
+                    } }, `tree-r-${t.key}`))), treeLayers.map((t) => (_jsx(WeatherTrees, { timeOfDaySeason: t.season, filter: t.filter, position: "fixed", bottom: "0", left: "2", w: "auto", transform: "rotateY(180deg)", h: "100px", zIndex: "1", style: {
+                        opacity: timeOfDay === t.key ? 1 : 0,
+                        transition: 'opacity 1.8s ease-in-out',
+                    } }, `tree-l-${t.key}`)))] }) }));
 };

package/dist/components/animations/Stars.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Stars — a faint twinkling starfield for the night sky. Rendered only at night
+ * by CloudsAnimation. Sits behind the clouds/birds layer; concentrated in the
+ * upper sky. Honors prefers-reduced-motion.
+ */
+export declare const Stars: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/animations/Stars.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo } from 'react';
+/**
+ * Stars — a faint twinkling starfield for the night sky. Rendered only at night
+ * by CloudsAnimation. Sits behind the clouds/birds layer; concentrated in the
+ * upper sky. Honors prefers-reduced-motion.
+ */
+export const Stars = () => {
+    const stars = useMemo(() => {
+        const n = 80;
+        return Array.from({ length: n }, () => ({
+            left: Math.random() * 100,
+            top: Math.random() * 70, // keep to the upper sky
+            // weighted toward tiny — mostly pinpricks, a few slightly larger, none big
+            size: 0.6 + Math.pow(Math.random(), 2) * 2.1,
+            delay: -Math.random() * 5,
+            dur: 2.5 + Math.random() * 3.5,
+            base: 0.4 + Math.random() * 0.55,
+        }));
+    }, []);
+    // a couple of shooting stars that streak across on a diagonal, then fade — rare, staggered
+    const shooters = useMemo(() => Array.from({ length: 2 }, () => {
+        const dx = (Math.random() < 0.5 ? 1 : -1) * (380 + Math.random() * 320);
+        const dy = 150 + Math.random() * 190;
+        return {
+            left: 10 + Math.random() * 55,
+            top: 2 + Math.random() * 22,
+            dx,
+            dy,
+            rot: (Math.atan2(dy, dx) * 180) / Math.PI,
+            delay: -Math.random() * 25,
+            dur: 18 + Math.random() * 22,
+        };
+    }), []);
+    // a few small accent stars with a stronger, faster twinkle for a bit of sparkle
+    const twinklers = useMemo(() => Array.from({ length: 14 }, () => ({
+        left: Math.random() * 100,
+        top: Math.random() * 62,
+        size: 0.8 + Math.random() * 1.3,
+        delay: -Math.random() * 4,
+        dur: 1.4 + Math.random() * 2.2,
+    })), []);
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: STARS_CSS }), _jsxs("div", { className: "hf-stars", "aria-hidden": "true", children: [stars.map((s, i) => (_jsx("span", { className: "hf-star", style: {
+                            left: `${s.left}%`,
+                            top: `${s.top}%`,
+                            width: `${s.size}px`,
+                            height: `${s.size}px`,
+                            animationDelay: `${s.delay}s`,
+                            animationDuration: `${s.dur}s`,
+                            '--b': s.base,
+                        } }, i))), twinklers.map((s, i) => (_jsx("span", { className: "hf-star hf-twinkler", style: {
+                            left: `${s.left}%`,
+                            top: `${s.top}%`,
+                            width: `${s.size}px`,
+                            height: `${s.size}px`,
+                            animationDelay: `${s.delay}s`,
+                            animationDuration: `${s.dur}s`,
+                        } }, `tw-${i}`))), shooters.map((s, i) => (_jsx("span", { className: "hf-shooting", style: {
+                            left: `${s.left}%`,
+                            top: `${s.top}%`,
+                            animationDelay: `${s.delay}s`,
+                            animationDuration: `${s.dur}s`,
+                            '--dx': `${s.dx}px`,
+                            '--dy': `${s.dy}px`,
+                            '--rot': `${s.rot}deg`,
+                        } }, `shoot-${i}`)))] })] }));
+};
+const STARS_CSS = `
+.hf-stars{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;}
+.hf-star{position:absolute; border-radius:50%; background:#fdfdff;
+  box-shadow:0 0 4px rgba(255,255,255,.7); opacity:var(--b,.6);
+  animation-name:hf-twinkle; animation-iteration-count:infinite; animation-timing-function:ease-in-out;}
+@keyframes hf-twinkle{ 0%,100%{opacity:calc(var(--b,.6) * .3);} 50%{opacity:var(--b,.6);} }
+.hf-twinkler{animation-name:hf-sparkle;}
+@keyframes hf-sparkle{ 0%,100%{opacity:.12; transform:scale(.6);} 50%{opacity:1; transform:scale(1.15);} }
+.hf-shooting{position:absolute; width:100px; height:2px; border-radius:2px;
+  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.95));
+  box-shadow:0 0 6px 1px rgba(200,220,255,.6); opacity:0; will-change:transform,opacity;
+  transform:translate3d(0,0,0) rotate(var(--rot,25deg));
+  animation-name:hf-shoot; animation-iteration-count:infinite; animation-timing-function:linear;}
+@keyframes hf-shoot{
+  0%{ transform:translate3d(0,0,0) rotate(var(--rot,25deg)); opacity:0; }
+  1%{ opacity:1; }
+  7%{ transform:translate3d(var(--dx,600px),var(--dy,260px),0) rotate(var(--rot,25deg)); opacity:0; }
+  100%{ transform:translate3d(var(--dx,600px),var(--dy,260px),0) rotate(var(--rot,25deg)); opacity:0; }
+}
+@media (prefers-reduced-motion:reduce){ .hf-star,.hf-shooting{animation:none !important;} }
+`;

package/dist/components/animations/index.d.ts

@@ -1,3 +1,5 @@
+export * from './Birds';
 export * from './CloudsAnimation';
+export * from './Stars';
 export * from './HomieAnimation';
 export * from './WeatherTrees';

package/dist/components/animations/index.js

@@ -1,3 +1,5 @@
+export * from './Birds';
 export * from './CloudsAnimation';
+export * from './Stars';
 export * from './HomieAnimation';
 export * from './WeatherTrees';

package/dist/components/animations/timeOfDayContext.d.ts

@@ -0,0 +1,9 @@
+import { TimeOfDay } from '../../utils';
+/**
+ * Shares the CloudsAnimation background's current time-of-day with anything
+ * rendered inside it (e.g. the onboarding Footer), so text/colors can adapt to
+ * the sky actually on screen rather than reading the clock independently.
+ * Consumers get `null` when rendered outside a provider and should fall back.
+ */
+export declare const TimeOfDayContext: import("react").Context<TimeOfDay | null>;
+export declare const useTimeOfDay: () => TimeOfDay | null;

package/dist/components/animations/timeOfDayContext.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from 'react';
+/**
+ * Shares the CloudsAnimation background's current time-of-day with anything
+ * rendered inside it (e.g. the onboarding Footer), so text/colors can adapt to
+ * the sky actually on screen rather than reading the clock independently.
+ * Consumers get `null` when rendered outside a provider and should fall back.
+ */
+export const TimeOfDayContext = createContext(null);
+export const useTimeOfDay = () => useContext(TimeOfDayContext);

package/dist/components/onboarding/Footer.js

@@ -1,7 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { t } from 'i18next';
 import { Flex, Text } from '@chakra-ui/react';
+import { getTimeOfDay } from '../../utils';
+import { useTimeOfDay } from '../animations/timeOfDayContext';
 export const Footer = () => {
+    var _a;
     const currentYear = new Date().getFullYear();
-    return (_jsx(Flex, { justifyContent: "center", px: 4, my: 4, children: _jsx(Text, { variant: "label", textAlign: "center", children: `©${currentYear} ${t('footer.copyright')}` }) }));
+    // follow the background's actual time-of-day (falls back to the clock when outside CloudsAnimation)
+    const isNight = ((_a = useTimeOfDay()) !== null && _a !== void 0 ? _a : getTimeOfDay()) === 'night';
+    return (_jsx(Flex, { justifyContent: "center", px: 4, my: 4, children: _jsx(Text, { variant: "label", textAlign: "center", color: isNight ? 'rgba(226,232,248,0.6)' : 'rgba(55,50,62,0.8)', children: `©${currentYear} ${t('footer.copyright')}` }) }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homefile/components-v2",
-  "version": "2.57.0",
+  "version": "2.59.0",
   "author": "Homefile",
   "license": "UNLICENSED",
   "typings": "dist/index.d.ts",