Fix Mantine v9 CI failures for typecheck, lint, and e2e.

Align form generics with v9 TransformedValues typing, merge element-size refs for gridstack, and tighten selectors and lint fixes from the migration.

packages/widgets/src/_inputs/widget-dynamic-select-input.tsx

@@ -25,9 +25,22 @@ export const WidgetDynamicSelectInput = ({ property, kind, options }: CommonWidg
   const [search, setSearch] = useState("");
   const [debouncedSearch] = useDebouncedValue(search, 300);
   const { isPending, options: selectOptions } = options.useOptions(debouncedSearch, form.values.integrationIds);
-  const value = inputProps.value as DynamicSelectOption | null;
+  const currentOption = inputProps.value as DynamicSelectOption | null;
   const onChange = inputProps.onChange as (value: DynamicSelectOption | null) => void;
 
+  const getLabelForValue = (selectedValue: string) => {
+    const matched = selectOptions.find((option) =>
+      typeof option === "string" ? option === selectedValue : option.value === selectedValue,
+    );
+    if (!matched) {
+      return selectedValue;
+    }
+    if (typeof matched === "string") {
+      return matched;
+    }
+    return translateIfNecessary(t, matched.label) ?? selectedValue;
+  };
+
   return (
     <Select
       label={tWidget("label")}
@@ -41,14 +54,15 @@ export const WidgetDynamicSelectInput = ({ property, kind, options }: CommonWidg
               },
         )
         .concat(
-          typeof value === "object" &&
-            value !== null &&
+          currentOption !== null &&
             !selectOptions.some((option) =>
-              typeof option === "string" ? option === value.value : option.value === value.value,
+              typeof option === "string"
+                ? option === currentOption.value
+                : option.value === currentOption.value,
             )
             ? {
-                value: value.value,
-                label: value.label,
+                value: currentOption.value,
+                label: currentOption.label,
               }
             : [],
         )}
@@ -74,19 +88,17 @@ export const WidgetDynamicSelectInput = ({ property, kind, options }: CommonWidg
       description={options.withDescription ? tWidget("description") : undefined}
       searchable
       {...inputProps}
-      value={value?.value ?? null}
-      onChange={(value) =>
-        onChange(
-          value
-            ? {
-                value,
-                label:
-                  selectOptions.filter((option) => typeof option === "object").find((option) => option.value === value)
-                    ?.label ?? value,
-              }
-            : null,
-        )
-      }
+      value={currentOption === null ? null : currentOption.value}
+      onChange={(selectedValue: string | null) => {
+        if (selectedValue === null) {
+          onChange(null);
+          return;
+        }
+        onChange({
+          value: selectedValue,
+          label: getLabelForValue(selectedValue),
+        });
+      }}
     />
   );
 };

packages/widgets/src/_inputs/widget-select-input.tsx

@@ -53,7 +53,7 @@ export const WidgetSelectInput = ({ property, kind, options }: CommonWidgetInput
       )}
       leftSection={CurrentIcon && <CurrentIcon size={16} stroke={1.5} />}
       renderOption={({ option, checked }) => {
-        const Icon = getIconFor(options.options, option.value);
+        const Icon = getIconFor(options.options, String(option.value));
 
         return (
           <Group flex="1" gap="xs">

packages/widgets/src/media-transcoding/component.tsx

@@ -17,6 +17,8 @@ import { WorkersPanel } from "./panels/workers.panel";
 
 type View = (typeof views)[number];
 
+const viewBySegmentValue = Object.fromEntries(views.map((view) => [view, view])) as Record<string, View>;
+
 const viewIcons = {
   workers: IconCpu2,
   queue: IconClipboardList,
@@ -83,7 +85,12 @@ export default function MediaTranscodingWidget({
             };
           })}
           value={view}
-          onChange={(value) => setView(value as View)}
+          onChange={(value) => {
+            const nextView = viewBySegmentValue[value];
+            if (nextView) {
+              setView(nextView);
+            }
+          }}
           size="xs"
         />