Merge branch 'main' into bolt/route-lazy-loading-17202030222576625568

src/components/effects/GradientBlinds.test.tsx

@@ -176,17 +176,11 @@ describe('GradientBlinds', () => {
     unmount();
     expect(removeEventListenerSpy).toHaveBeenCalledWith('pointermove', expect.any(Function));
   });
+
   it('minimizes getBoundingClientRect calls during pointer move', () => {
     const { unmount } = render(<GradientBlinds />);
 
-    // Spy on getBoundingClientRect
-    // Note: In jsdom, canvas is an HTMLCanvasElement which inherits from HTMLElement
     const spy = vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect');
-
-    // Trigger pointer move to clear any initial calls or verify baseline
-    // The initial render calls resize(), which calls getBoundingClientRect on container
-
-    // Clear spy history from initial render
     spy.mockClear();
 
     act(() => {
@@ -198,9 +192,37 @@ describe('GradientBlinds', () => {
       window.dispatchEvent(event);
     });
 
-    // EXPECTATION: It should NOT be called because the listener shouldn't be attached (not visible)
     expect(spy).not.toHaveBeenCalled();
 
     unmount();
   });
+
+  it('avoids expensive DOM reads (scrollX/Y) in pointermove handler when visible', () => {
+    const { unmount } = render(<GradientBlinds />);
+
+    // Spy on scrollX/scrollY getters
+    // Note: In jsdom, these are properties on window.
+    const scrollSpy = vi.spyOn(window, 'scrollX', 'get');
+
+    // Make visible to attach listener
+    act(() => {
+      if (ioCallback) {
+        ioCallback([{ isIntersecting: true } as IntersectionObserverEntry]);
+      }
+    });
+
+    scrollSpy.mockClear();
+
+    // Trigger pointer move
+    act(() => {
+       window.dispatchEvent(new PointerEvent('pointermove', { clientX: 100, clientY: 100 }));
+    });
+
+    // With the optimization (moving to RAF loop), this should be 0.
+    // Without optimization, this will be > 0.
+    // Since we are mocking RAF and not running the loop, if it's in the loop, it won't be called.
+    expect(scrollSpy).not.toHaveBeenCalled();
+
+    unmount();
+  });
 });

src/components/effects/GradientBlinds.tsx

@@ -64,6 +64,8 @@ const GradientBlinds: React.FC<GradientBlindsProps> = ({
   const geometryRef = useRef<Geometry | null>(null);
   const rendererRef = useRef<Renderer | null>(null);
   const mouseTargetRef = useRef<[number, number]>([0, 0]);
+  // Optimization: store raw pointer position (viewport coords) to decouple event handling from calculation
+  const pointerPosRef = useRef<{ x: number; y: number } | null>(null);
   const lastTimeRef = useRef<number>(0);
   const firstResizeRef = useRef<boolean>(true);
   const rectRef = useRef<DOMRect | null>(null);
@@ -309,31 +311,34 @@ void main() {
     ro.observe(container);
 
     const onPointerMove = (e: PointerEvent) => {
-      const scale = (renderer as unknown as { dpr?: number }).dpr || 1;
-      let x, y;
-
-      if (rectRef.current) {
-        const dx = window.scrollX - scrollPosRef.current.x;
-        const dy = window.scrollY - scrollPosRef.current.y;
-        const rectLeft = rectRef.current.left - dx;
-        const rectTop = rectRef.current.top - dy;
-        x = (e.clientX - rectLeft) * scale;
-        y = (rectRef.current.height - (e.clientY - rectTop)) * scale;
-      } else {
-        const rect = canvas.getBoundingClientRect();
-        x = (e.clientX - rect.left) * scale;
-        y = (rect.height - (e.clientY - rect.top)) * scale;
-      }
-
-      mouseTargetRef.current = [x, y];
-      if (mouseDampening <= 0) {
-        uniforms.iMouse.value = [x, y];
-      }
+      pointerPosRef.current = { x: e.clientX, y: e.clientY };
     };
 
     const loop = (t: number) => {
       rafRef.current = requestAnimationFrame(loop);
       uniforms.iTime.value = t * 0.001;
+
+      // Update target based on pointer position and scroll offset
+      if (pointerPosRef.current) {
+        const scale = (renderer as unknown as { dpr?: number }).dpr || 1;
+        let x, y;
+
+        if (rectRef.current) {
+          const dx = window.scrollX - scrollPosRef.current.x;
+          const dy = window.scrollY - scrollPosRef.current.y;
+          const rectLeft = rectRef.current.left - dx;
+          const rectTop = rectRef.current.top - dy;
+          x = (pointerPosRef.current.x - rectLeft) * scale;
+          y = (rectRef.current.height - (pointerPosRef.current.y - rectTop)) * scale;
+        } else {
+           // Fallback if rectRef missing
+           const rect = canvas.getBoundingClientRect();
+           x = (pointerPosRef.current.x - rect.left) * scale;
+           y = (rect.height - (pointerPosRef.current.y - rect.top)) * scale;
+        }
+        mouseTargetRef.current = [x, y];
+      }
+
       if (mouseDampening > 0) {
         if (!lastTimeRef.current) lastTimeRef.current = t;
         const dt = (t - lastTimeRef.current) / 1000;
@@ -346,6 +351,9 @@ void main() {
         cur[0] += (target[0] - cur[0]) * factor;
         cur[1] += (target[1] - cur[1]) * factor;
       } else {
+        if (pointerPosRef.current) {
+          uniforms.iMouse.value = mouseTargetRef.current;
+        }
         lastTimeRef.current = t;
       }
       if (!paused && programRef.current && meshRef.current) {

src/components/sections/Hero.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef, memo } from "react";
 import { Link } from "react-router-dom";
 import { motion } from "motion/react";
 import { useTranslation } from "../../i18n";
@@ -9,6 +9,21 @@ import styles from "./Hero.module.css";
 
 const GRADIENT_COLORS = ["#26a269", "#8ff0a4"];
 
+interface TypedTextProps {
+  words: string[];
+}
+
+const TypedText = memo(({ words }: TypedTextProps) => {
+  const { text } = useTypingEffect({
+    words,
+    typingSpeed: 80,
+    deletingSpeed: 40,
+    pauseDuration: 2500,
+  });
+
+  return <>{text}</>;
+});
+
 export function Hero() {
   const { t } = useTranslation();
   const [showScrollIndicator, setShowScrollIndicator] = useState(true);
@@ -29,13 +44,6 @@ export function Hero() {
     return () => observer.disconnect();
   }, []);
 
-  const { text } = useTypingEffect({
-    words: t.hero.rotatingWords,
-    typingSpeed: 80,
-    deletingSpeed: 40,
-    pauseDuration: 2500,
-  });
-
   return (
     <section className={styles.hero}>
       <div
@@ -100,7 +108,7 @@ export function Hero() {
           >
             <span>{t.hero.tagline}</span>
             <span className={styles.typed}>
-              {text}
+              <TypedText words={t.hero.rotatingWords} />
               <span className={styles.cursor}>|</span>
             </span>
           </motion.div>

src/components/ui/Button.module.css

@@ -1,5 +1,6 @@
 .button {
   display: inline-flex;
+  position: relative;
   align-items: center;
   justify-content: center;
   gap: var(--space-sm);
@@ -80,3 +81,23 @@
     transform: rotate(360deg);
   }
 }
+
+.content {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-sm);
+  transition: opacity 0.2s;
+}
+
+.contentHidden {
+  opacity: 0;
+}
+
+.loaderWrapper {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

src/components/ui/Button.tsx

@@ -2,7 +2,7 @@ import { type ReactNode, type ButtonHTMLAttributes } from 'react';
 import { motion } from 'motion/react';
 import styles from './Button.module.css';
 
-interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onAnimationStart' | 'onDragStart' | 'onDragEnd' | 'onDrag'> {
   variant?: 'primary' | 'secondary' | 'outline';
   size?: 'sm' | 'md' | 'lg';
   children: ReactNode;
@@ -24,14 +24,18 @@ export function Button({
       type={type}
       className={`${styles.button} ${styles[variant]} ${styles[size]} ${className || ''}`}
       disabled={disabled || isLoading}
+      aria-busy={isLoading}
       whileHover={{ scale: 1.02 }}
       whileTap={{ scale: 0.98 }}
       {...props}
     >
-      {isLoading ? (
-        <span className={styles.loader} />
-      ) : (
-        children
+      <span className={`${styles.content} ${isLoading ? styles.contentHidden : ''}`}>
+        {children}
+      </span>
+      {isLoading && (
+        <span className={styles.loaderWrapper} aria-hidden="true">
+          <span className={styles.loader} />
+        </span>
       )}
     </motion.button>
   );

src/components/ui/Input.module.css

@@ -10,6 +10,11 @@
   color: var(--md-sys-color-on-surface);
 }
 
+.required {
+  color: var(--md-sys-color-error);
+  margin-left: 0.25rem;
+}
+
 .input {
   padding: var(--space-md);
   font-family: var(--md-sys-typescale-body-font);

src/components/ui/Input.tsx

@@ -15,6 +15,11 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
       <div className={`${styles.field} ${error ? styles.hasError : ''} ${className || ''}`}>
         <label htmlFor={inputId} className={styles.label}>
           {label}
+          {props.required && (
+            <span className={styles.required} aria-hidden="true">
+              *
+            </span>
+          )}
         </label>
         <input
           ref={ref}
@@ -46,6 +51,11 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
       <div className={`${styles.field} ${error ? styles.hasError : ''} ${className || ''}`}>
         <label htmlFor={inputId} className={styles.label}>
           {label}
+          {props.required && (
+            <span className={styles.required} aria-hidden="true">
+              *
+            </span>
+          )}
         </label>
         <textarea
           ref={ref}

src/components/ui/__tests__/Button.test.tsx

@@ -2,7 +2,6 @@
 import { render, screen, cleanup } from '@testing-library/react';
 import { describe, it, expect, afterEach } from 'vitest';
 import { Button } from '../Button';
-import React from 'react';
 
 describe('Button', () => {
   afterEach(() => {
@@ -20,4 +19,13 @@ describe('Button', () => {
     const button = screen.getByTestId('custom-button');
     expect(button).toBeTruthy();
   });
+
+  it('renders loading state correctly', () => {
+    render(<Button isLoading>Submit</Button>);
+    const button = screen.getByRole('button', { name: /submit/i }) as HTMLButtonElement;
+    expect(button.getAttribute('aria-busy')).toBe('true');
+    expect(button.disabled).toBe(true);
+    // Verify text is present (opacity: 0 doesn't remove from DOM)
+    expect(screen.getByText('Submit')).toBeTruthy();
+  });
 });

src/components/ui/__tests__/Input.test.tsx

@@ -32,6 +32,19 @@ describe('Input', () => {
     expect(input.getAttribute('aria-invalid')).toBe('false');
     expect(input.hasAttribute('aria-describedby')).toBe(false);
   });
+
+  it('renders required asterisk when required prop is passed', () => {
+    render(<Input label="Required Input" required />);
+
+    // We search for the asterisk specifically
+    // Note: getByText('*') matches the content of the span
+    const asterisk = screen.getByText('*');
+    expect(asterisk).toBeTruthy();
+    expect(asterisk.getAttribute('aria-hidden')).toBe('true');
+
+    const input = screen.getByRole('textbox', { name: /Required Input/i });
+    expect(input.hasAttribute('required')).toBe(true);
+  });
 });
 
 describe('Textarea', () => {
@@ -49,4 +62,15 @@ describe('Textarea', () => {
     expect(error.id).toBeDefined();
     expect(error.id).not.toBe('');
   });
+
+  it('renders required asterisk when required prop is passed', () => {
+    render(<Textarea label="Required Textarea" required />);
+
+    const asterisk = screen.getByText('*');
+    expect(asterisk).toBeTruthy();
+    expect(asterisk.getAttribute('aria-hidden')).toBe('true');
+
+    const textarea = screen.getByRole('textbox', { name: /Required Textarea/i });
+    expect(textarea.hasAttribute('required')).toBe(true);
+  });
 });