Fix front component pointer/mouse event coordinates (#21117)

Fixes https://github.com/twentyhq/twenty/issues/21000

Front-component event handlers read standard event fields
(event.clientX, event.offsetX, …), but these were always undefined. On
the remote side, serialized event data was passed only as the
CustomEvent's detail — and CustomEvent ignores every constructor option
except detail, so the values lived at event.detail.clientX and never on
the event object itself.

- Added `applySerializedEventProperties`, to copy a curated allowlist of
event-level keys onto the event. Element/target state (value, checked,
files, scroll, media props) stays in
`applySerializedEventTargetProperties`, applied to this (the dispatch
element = event.target).
- Added x/y to `SerializedEventData` and to host-side serialization in
`createHtmlHostWrapper`.
- Added an `svg-pointer `story + `createHtmlTagPointerStory`

Note: Also pinned @types/react to v18 so the renderer stops dragging in
React 19 types and breaking typecheck.

packages/twenty-front-component-renderer/src/constants/applySerializedEventTargetProperties.ts

@@ -0,0 +1,54 @@
+import { type SerializedEventData } from '@/types/SerializedEventData';
+
+export const applySerializedEventTargetProperties = (
+  element: Record<string, unknown>,
+  eventData: SerializedEventData,
+): void => {
+  if ('value' in eventData) {
+    element.value = eventData.value;
+  }
+
+  if ('checked' in eventData) {
+    element.checked = eventData.checked;
+  }
+
+  if ('files' in eventData) {
+    element.files = eventData.files;
+  }
+
+  if ('scrollTop' in eventData) {
+    element.scrollTop = eventData.scrollTop;
+  }
+
+  if ('scrollLeft' in eventData) {
+    element.scrollLeft = eventData.scrollLeft;
+  }
+
+  if ('currentTime' in eventData) {
+    element.currentTime = eventData.currentTime;
+  }
+
+  if ('duration' in eventData) {
+    element.duration = eventData.duration;
+  }
+
+  if ('paused' in eventData) {
+    element.paused = eventData.paused;
+  }
+
+  if ('ended' in eventData) {
+    element.ended = eventData.ended;
+  }
+
+  if ('volume' in eventData) {
+    element.volume = eventData.volume;
+  }
+
+  if ('muted' in eventData) {
+    element.muted = eventData.muted;
+  }
+
+  if ('playbackRate' in eventData) {
+    element.playbackRate = eventData.playbackRate;
+  }
+};