Feat/cherry blossom reduced motion

components/CherryBlossom.accessibility.test.tsx

@@ -5,6 +5,7 @@ import CherryBlossom from './CherryBlossom';
 import type React from 'react';
 
 vi.mock('framer-motion', () => ({
+  useReducedMotion: vi.fn(() => false),
   motion: {
     div: ({
       children,

components/CherryBlossom.empty-fallback.test.tsx

@@ -5,6 +5,7 @@ import CherryBlossom from './CherryBlossom';
 // Mock framer-motion to avoid animation DOM complexity
 vi.mock('framer-motion', () => {
   return {
+    useReducedMotion: vi.fn(() => false),
     motion: {
       div: ({ children }: { children?: React.ReactNode }) => <div>{children}</div>,
     },

components/CherryBlossom.error-resilience.test.tsx

@@ -11,6 +11,7 @@ const motionRuntime = vi.hoisted(() => ({
 }));
 
 vi.mock('framer-motion', () => ({
+  useReducedMotion: vi.fn(() => false),
   motion: {
     div: ({ children, ...props }: React.HTMLAttributes<HTMLDivElement>) => {
       if (motionRuntime.shouldThrow) {

components/CherryBlossom.mock-integrations.test.tsx

@@ -6,6 +6,7 @@ import CherryBlossom from './CherryBlossom';
 // 1. Mock standard asynchronous imports and databases using stubs
 // We mock framer-motion to execute synchronously to avoid async animation timeouts
 vi.mock('framer-motion', () => ({
+  useReducedMotion: vi.fn(() => false),
   motion: {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     div: ({ children, className, ...props }: any) => (

components/CherryBlossom.mouse-interactivity.test.tsx

@@ -6,6 +6,7 @@ import '@testing-library/jest-dom';
 
 // Mock framer-motion to keep the tests simple and stable
 vi.mock('framer-motion', () => ({
+  useReducedMotion: vi.fn(() => false),
   motion: {
     div: ({
       children,

components/CherryBlossom.responsive-breakpoints.test.tsx

@@ -6,6 +6,7 @@ import '@testing-library/jest-dom';
 
 // Mock framer-motion to inspect the props passed to the animated elements
 vi.mock('framer-motion', () => ({
+  useReducedMotion: vi.fn(() => false),
   motion: {
     div: ({
       children,

components/CherryBlossom.test.tsx

@@ -1,8 +1,10 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render, screen, waitFor } from '@testing-library/react';
 import CherryBlossom from './CherryBlossom';
+import { useReducedMotion } from 'framer-motion';
 import type React from 'react';
 import '@testing-library/jest-dom';
+
 // Mock framer-motion
 vi.mock('framer-motion', () => ({
   motion: {
@@ -15,11 +17,13 @@ vi.mock('framer-motion', () => ({
       </div>
     ),
   },
+  useReducedMotion: vi.fn(() => false), // default: motion is allowed
 }));
 
 describe('CherryBlossom', () => {
   beforeEach(() => {
     vi.restoreAllMocks();
+    vi.mocked(useReducedMotion).mockReturnValue(false);
   });
 
   it('renders without crashing after mount', async () => {
@@ -68,3 +72,30 @@ describe('CherryBlossom', () => {
     expect(() => unmount()).not.toThrow();
   });
 });
+
+describe('CherryBlossom - Reduced Motion Accessibility', () => {
+  beforeEach(() => {
+    vi.restoreAllMocks();
+    vi.mocked(useReducedMotion).mockReturnValue(false);
+  });
+
+  it('renders nothing when the user prefers reduced motion', async () => {
+    vi.mocked(useReducedMotion).mockReturnValue(true);
+
+    const { container } = render(<CherryBlossom />);
+
+    await waitFor(() => {
+      expect(container.firstChild).toBeNull();
+    });
+  });
+
+  it('still renders the falling petals when reduced motion is not requested', async () => {
+    vi.mocked(useReducedMotion).mockReturnValue(false);
+
+    const { container } = render(<CherryBlossom />);
+
+    await waitFor(() => {
+      expect(container.querySelector('.fixed.inset-0')).toBeInTheDocument();
+    });
+  });
+});

components/CherryBlossom.theme-contrast.test.tsx

@@ -6,6 +6,7 @@ import '@testing-library/jest-dom';
 
 // Mock framer-motion to inspect the props passed to the animated elements
 vi.mock('framer-motion', () => ({
+  useReducedMotion: vi.fn(() => false),
   motion: {
     div: ({
       children,

components/CherryBlossom.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { motion } from 'framer-motion';
+import { motion, useReducedMotion } from 'framer-motion';
 import { useEffect, useState } from 'react';
 
 const generatePetals = (count: number) => {
@@ -32,6 +32,7 @@
 export default function CherryBlossom() {
   const [petals] = useState<Petal[]>(() => generatePetals(25));
   const [mounted, setMounted] = useState(false);
+  const prefersReducedMotion = useReducedMotion();
 
   // SSR hydration guard: the petal animations use framer-motion values derived
   // from Math.random() at component initialisation time (via useState initialiser).
@@ -43,6 +44,9 @@
   }, []);
 
   if (!mounted) return null;
+  if (prefersReducedMotion) {
+    return null;
+  }
 
   return (
     <div className="fixed inset-0 pointer-events-none z-10 overflow-hidden">

lib/validations.ts

@@ -299,14 +299,12 @@ const baseStreakParamsSchema = z.object({
   grace: z
     .string()
     .optional()
-    .refine(
-      (val) => {
-        if (val === undefined || val === '') return true;
-        return /^\d+$/.test(val) && Number(val) >= 0 && Number(val) <= 7;
-      },
-      { message: 'grace must be an integer between 0 and 7' }
-    )
-    .transform((val) => (val === undefined || val === '' ? 1 : Number(val)))
+    .transform((val) => {
+      if (val === undefined || val === '') return 1;
+      const n = Number(val);
+      if (isNaN(n) || !Number.isInteger(n)) return 1;
+      return Math.min(7, Math.max(0, n));
+    })
     .default(1),
 
   mode: z.enum(['commits', 'loc']).catch('commits').default('commits'),