refactor: prepare react 19 types (#4553)

React 19 simplified ref object story, moved JSX from global into react
package. Here prepared our code to not refactor too much in packages
bump.

Author: TrySound

@types/canvas-iframe.d.ts

@@ -1,10 +1,5 @@
-declare namespace JSX {
-  interface IntrinsicElements {
-    iframe: React.DetailedHTMLProps<
-      React.IframeHTMLAttributes<HTMLIFrameElement> & {
-        credentialless?: "true";
-      },
-      HTMLIFrameElement
-    >;
+declare namespace React {
+  interface IframeHTMLAttributes {
+    credentialless?: "true";
   }
 }

apps/builder/app/auth/brand-button.tsx

@@ -1,5 +1,5 @@
 import { css, textVariants, theme } from "@webstudio-is/design-system";
-import type { ComponentProps } from "react";
+import type { ComponentProps, JSX } from "react";
 
 export const buttonStyle = css({
   boxSizing: "border-box",

apps/builder/app/auth/login.stories.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "react";
 import type { StoryFn } from "@storybook/react";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import { Login } from "./login";

apps/builder/app/builder/builder.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState, type ReactNode } from "react";
+import { useEffect, useMemo, useState, type JSX, type ReactNode } from "react";
 import { useStore } from "@nanostores/react";
 import { TooltipProvider } from "@radix-ui/react-tooltip";
 import { usePublish, $publisher } from "~/shared/pubsub";

apps/builder/app/builder/features/address-bar.tsx

@@ -143,7 +143,7 @@ const Suggestions = ({
   options,
   onSelect,
 }: {
-  containerRef: RefObject<HTMLFormElement>;
+  containerRef: RefObject<null | HTMLFormElement>;
   options: string[];
   onSelect: (option: string) => void;
 }) => {

apps/builder/app/builder/features/ai/ai-command-bar.tsx

@@ -71,7 +71,7 @@ export const AiCommandBar = () => {
 
   const [isAudioTranscribing, setIsAudioTranscribing] = useState(false);
   const [isAiRequesting, setIsAiRequesting] = useState(false);
-  const abortController = useRef<AbortController>();
+  const abortController = useRef<undefined | AbortController>(undefined);
   const recordButtonRef = useRef<HTMLButtonElement>(null);
   const guardIdRef = useRef(0);
   const { enableCanvasPointerEvents, disableCanvasPointerEvents } =

apps/builder/app/builder/features/ai/hooks/long-press-toggle.ts

@@ -15,7 +15,7 @@ type UseClickAndHoldProps = {
  * - `onCancel`: Pointer up outside target during long press.
  */
 export const useLongPressToggle = (props: UseClickAndHoldProps) => {
-  const currentTarget = useRef<Element>();
+  const currentTarget = useRef<undefined | Element>(undefined);
   const pointerDownTimeRef = useRef(0);
   const stateRef = useRef<"idle" | "active">("idle");
   const keyMapRef = useRef(new Set<string>());

apps/builder/app/builder/features/ai/hooks/media-recorder.ts

@@ -14,7 +14,7 @@ export const useMediaRecorder = (
   },
   options = DEFAULT_OPTIONS
 ) => {
-  const disposeRef = useRef<() => void>();
+  const disposeRef = useRef<undefined | (() => void)>(undefined);
 
   const cancelRef = useRef(false);
   const isActiveRef = useRef<boolean>(false);

apps/builder/app/builder/features/pages/folder-settings.tsx

@@ -1,5 +1,5 @@
 import { z } from "zod";
-import { type FocusEventHandler, useState, useCallback } from "react";
+import { type FocusEventHandler, useState, useCallback, type JSX } from "react";
 import { useStore } from "@nanostores/react";
 import { useDebouncedCallback } from "use-debounce";
 import slugify from "slugify";

apps/builder/app/builder/features/pages/form.tsx

@@ -1,3 +1,5 @@
+import type { JSX } from "react";
+
 export const Form = ({
   onSubmit,
   children,