fix(core): add null checks for timeout refs and event listeners for React 19 compatibility (#9116)

## Description
- Add null checks before clearTimeout calls in colorful-fallback.tsx, edgeless.dialog.tsx, and local.dialog.tsx
- Fix event listener cleanup in unfolding.tsx
- Update tsconfig.jsx to use react-jsx transform

## Testing
- [x] Verified type safety improvements for React 19 compatibility
- [x] Ensured proper cleanup of event listeners and timeouts
- [x] Confirmed no unintended side effects from the changes

Link to Devin run: https://app.devin.ai/sessions/2e790f3ea0d84402837ec6c3c6f83e4c

packages/frontend/component/src/components/internal-lottie/index.tsx

@@ -2,7 +2,7 @@ import type { AnimationItem } from 'lottie-web';
 import lottie from 'lottie-web';
 import { useEffect, useRef } from 'react';
 
-interface CustomLottieProps {
+export interface CustomLottieProps {
   options: {
     loop?: boolean | number | undefined;
     autoReverse?: boolean | undefined;
@@ -26,7 +26,7 @@ export const InternalLottie = ({
   height,
 }: CustomLottieProps) => {
   const element = useRef<HTMLDivElement>(null);
-  const lottieInstance = useRef<AnimationItem>();
+  const lottieInstance = useRef<AnimationItem | null>(null);
   const directionRef = useRef<1 | -1>(1);
 
   useEffect(() => {

packages/frontend/component/src/components/not-found-page/not-found-page.tsx

@@ -1,5 +1,6 @@
 import { useI18n } from '@affine/i18n';
 import { SignOutIcon } from '@blocksuite/icons/rc';
+import type { JSX } from 'react';
 
 import { Avatar } from '../../ui/avatar';
 import { Button, IconButton } from '../../ui/button';

packages/frontend/component/src/components/notification-center/index.jotai.ts

@@ -1,5 +1,6 @@
 import { atom } from 'jotai';
 import { nanoid } from 'nanoid';
+import type { JSX, ReactNode } from 'react';
 
 /**
  * @deprecated use `import type { Notification } from '@affine/component'` instead
@@ -12,7 +13,7 @@ export type Notification = {
   theme?: 'light' | 'dark' | 'default';
   timeout?: number;
   progressingBar?: boolean;
-  multimedia?: React.ReactNode | JSX.Element;
+  multimedia?: ReactNode | JSX.Element;
   // actions
   action?: () => Promise<void>;
   actionLabel?: string;

packages/frontend/component/src/components/notification-center/index.tsx

@@ -85,7 +85,7 @@ function NotificationCard(props: NotificationCardProps): ReactNode {
   const [animationKey, setAnimationKey] = useState(0);
   const animationRef = useRef<SVGAnimateElement>(null);
   const notificationRef = useRef<HTMLLIElement>(null);
-  const timerIdRef = useRef<number>();
+  const timerIdRef = useRef<number | null>(null);
   const isFront = index === 0;
   const isVisible = index + 1 <= 3;
   const progressDuration = notification.timeout || 3000;