Update more web deps and reformat with updated prettier (#24358)

* update date-fns, i18next, react-dropzone, react-markdown and @types/node

react-i18next 17 peers `i18next >= 26.2.0`, so the two move together. react-day-picker already depends on date-fns 4, so date-fns now dedupes to a single copy. react-dropzone 20 declares `node >=22` in `engines`, but npm only warns on Node 20 and nothing in the build needs Node 22.

* update js-yaml, @hookform/resolvers and prettier

js-yaml 5 has no default export, so `DictAsYamlField` imports `dump`, `load` and `YAMLException` by name. @hookform/resolvers 5 types `zodResolver` with the schema's input and output types separately, and fields with defaults are optional on input, so the zone and classification model forms pass both types to `useForm`. zod's range now starts at 3.25, which resolvers 5 requires.

* format with prettier 3.9

web/src/components/config-form/theme/fields/DictAsYamlField.tsx

@@ -1,5 +1,5 @@
 import type { FieldPathList, FieldProps } from "@rjsf/utils";
-import yaml from "js-yaml";
+import { dump, load, YAMLException } from "js-yaml";
 import { Textarea } from "@/components/ui/textarea";
 import { cn } from "@/lib/utils";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -16,7 +16,7 @@ function formatYaml(value: unknown): string {
     return "";
   }
   try {
-    return yaml.dump(value, { indent: 2, lineWidth: -1 }).trimEnd();
+    return dump(value, { indent: 2, lineWidth: -1 }).trimEnd();
   } catch {
     return "";
   }
@@ -31,7 +31,7 @@ function parseYaml(text: string): {
     return { value: {}, error: undefined };
   }
   try {
-    const parsed = yaml.load(trimmed);
+    const parsed = load(trimmed);
     if (
       typeof parsed !== "object" ||
       parsed === null ||
@@ -41,7 +41,7 @@ function parseYaml(text: string): {
     }
     return { value: parsed as Record<string, unknown>, error: undefined };
   } catch (e) {
-    const msg = e instanceof yaml.YAMLException ? e.reason : "Invalid YAML";
+    const msg = e instanceof YAMLException ? e.reason : "Invalid YAML";
     return { value: undefined, error: msg };
   }
 }

web/src/components/config-form/theme/fields/KnownPlatesField.tsx

@@ -217,8 +217,7 @@ function PlateCombobox({
 export function KnownPlatesField(props: FieldProps) {
   const { schema, formData, onChange, idSchema, disabled, readonly } = props;
   const formContext = props.registry?.formContext as
-    | ConfigFormContext
-    | undefined;
+    ConfigFormContext | undefined;
 
   const configNamespace =
     formContext?.i18nNamespace ??

web/src/components/config-form/theme/fields/LiveStreamsField.tsx

@@ -159,8 +159,7 @@ function StreamValueCombobox({
 export function LiveStreamsField(props: FieldProps) {
   const { schema, formData, onChange, idSchema, disabled, readonly } = props;
   const formContext = props.registry?.formContext as
-    | ConfigFormContext
-    | undefined;
+    ConfigFormContext | undefined;
 
   const configNamespace =
     formContext?.i18nNamespace ??

web/src/components/config-form/theme/fields/ModelsField.tsx

@@ -96,8 +96,7 @@ const getItemProperties = (
 
 const getSceneOptions = (itemSchema: RJSFSchema | undefined): string[] => {
   const scene = getItemProperties(itemSchema).scene as
-    | Record<string, unknown>
-    | undefined;
+    Record<string, unknown> | undefined;
   const values = scene?.enum;
 
   return Array.isArray(values)

web/src/components/config-form/theme/fields/ReplaceRulesField.tsx

@@ -44,8 +44,7 @@ function getPropertyTitle(itemSchema: RJSFSchema | undefined, key: string) {
 export function ReplaceRulesField(props: FieldProps) {
   const { schema, formData, onChange, idSchema, disabled, readonly } = props;
   const formContext = props.registry?.formContext as
-    | ConfigFormContext
-    | undefined;
+    ConfigFormContext | undefined;
 
   const configNamespace =
     formContext?.i18nNamespace ??