Fix regressions

Author: MrFlashAccount

app/gui/src/App.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { createRoot } from 'react-dom/client'
-
 import '@/assets/base.css'
 import { interactionBindings } from '@/bindings'
 import TooltipDisplayer from '@/components/TooltipDisplayer.vue'
@@ -16,11 +14,16 @@ import { registerAutoBlurHandler, registerGlobalBlurHandler } from '@/util/autoB
 import { baseConfig, configValue, mergeConfig, type ApplicationConfigValue } from '@/util/config'
 import { urlParams } from '@/util/urlParams'
 import { useQueryClient } from '@tanstack/vue-query'
-import { createElement, startTransition } from 'react'
+import { createRoot } from 'react-dom/client'
+import { applyPureReactInVue, setVeauryOptions } from 'veaury'
 import { computed, onMounted } from 'vue'
 import { ComponentProps } from 'vue-component-type-helpers'
 import ReactRoot from './ReactRoot'
 
+setVeauryOptions({ react: { createRoot } })
+
+const ReactRootInVue = applyPureReactInVue(ReactRoot)
+
 const { projectViewOnly, onAuthenticated } = defineProps<{
   // Used in Project View integration tests. Once both test projects will be merged, this should be
   // removed
@@ -76,24 +79,11 @@ onMounted(() => {
 <template>
   <div :class="['App', ...classSet.keys()]">
     <ProjectView v-if="projectViewOnly" v-bind="projectViewOnly.options" />
-    <div
+    <ReactRootInVue
       v-else
-      id="ReactRootWrapper"
-      :ref="
-        (el) => {
-          startTransition(() => {
-            const root = createRoot(el as HTMLElement)
-            root.render(
-              createElement(ReactRoot, {
-                queryClient,
-                config: appConfigValue,
-                onAuthenticated: onAuthenticated ?? (() => {}),
-              }),
-            )
-          })
-        }
-      "
-      style="display: contents"
+      :config="appConfigValue"
+      :queryClient="queryClient"
+      @authenticated="onAuthenticated ?? (() => {})"
     />
   </div>
   <div id="floatingLayer" />

app/gui/src/dashboard/components/AriaComponents/Dialog/Dialog.tsx

@@ -29,7 +29,7 @@ import * as utlities from './utilities'
 import { DIALOG_BACKGROUND } from './variants'
 
 // eslint-disable-next-line no-restricted-syntax
-const MotionDialog = motion(aria.Dialog)
+const MotionDialog = motion.create(aria.Dialog)
 
 const OVERLAY_STYLES = tv({
   base: 'fixed inset-0 isolate flex items-center justify-center bg-primary/20',

app/gui/src/dashboard/components/EditableSpan.tsx

@@ -16,7 +16,7 @@ import { useLayoutEffect } from 'react'
 import type { z } from 'zod'
 
 // eslint-disable-next-line no-restricted-syntax
-const MotionText = motion(Text)
+const MotionText = motion.create(Text)
 
 /**
  * Props for {@link EditableSpan}.

app/gui/src/dashboard/components/styled/RadioGroup.tsx

@@ -21,7 +21,6 @@ import * as React from 'react'
 import * as reactStately from 'react-stately'
 
 import * as aria from '#/components/aria'
-import { forwardRef } from '#/utilities/react'
 import type { PropsWithRef } from '../AriaComponents'
 
 /** Options for {@link useRenderProps}. */
@@ -102,10 +101,7 @@ function useSlot(): [React.RefCallback<Element>, boolean] {
 const UNDEFINED = undefined
 
 /** A radio group allows a user to select a single item from a list of mutually exclusive options. */
-export default forwardRef(RadioGroup)
-
-/** A radio group allows a user to select a single item from a list of mutually exclusive options. */
-function RadioGroup(props: aria.RadioGroupProps & PropsWithRef<HTMLDivElement>) {
+export default function RadioGroup(props: aria.RadioGroupProps & PropsWithRef<HTMLDivElement>) {
   let { ref } = props
   // @ts-expect-error Ref could be undefined
   ;[props, ref] = aria.useContextProps(props, ref, aria.RadioGroupContext)