refactor(spx-gui): replace naive-ui dropdown and tooltip popups

spx-gui/package.json

@@ -16,6 +16,7 @@
     "test": "vitest"
   },
   "dependencies": {
+    "@floating-ui/dom": "^1.7.6",
     "@jridgewell/resolve-uri": "^3.1.2",
     "@lottiefiles/dotlottie-vue": "^0.5.8",
     "@nighca/fflate": "^0.8.3",

spx-gui/src/components/ui/README.md

@@ -27,14 +27,12 @@
 - Root class handling
 
   - Current cases fall into three buckets: DOM-root components with merged utilities, single-root semantic wrappers that rely on inherited classes, and Naive UI-root wrappers whose root-level styling behavior still needs component-specific judgment
-  - If the root is a normal DOM element and the component already owns root utility classes, prefer an explicit `class?: ClassValue` prop and merge it with `cn(..., props.class ?? null)` so external root classes participate in `tailwind-merge`
+  - If the root is a normal DOM element and the component already owns root utility classes, prefer an explicit `class?: ClassValue` prop and merge it with `cn(..., props.class)` so external root classes participate in `tailwind-merge`
   - If the component is a single-root wrapper whose styling still depends on semantic hook classes in `@layer components`, prefer Vue's default root attr/class/style inheritance unless explicit root attr control is needed
   - If the rendered root is primarily a Naive UI component, remember that Naive UI styles live in the `naive-ui` layer while our authored UI styles live in `@layer components`, so component-layer rules have higher cascade priority than Naive UI defaults on the same element/property pair
   - Even so, Naive UI-root components still do not behave exactly like DOM-root utility wrappers: some visual details live on internal child nodes, teleported content, or Naive UI theme tokens instead of the exposed root element
   - Current Naive UI-root components that need extra care are:
 
-    - `UIDropdown` → `NPopover`
-    - `UITooltip` → `NTooltip`
     - `UIModal` → `NModal`
     - `UIMessageProvider` → `NMessageProvider`
     - `UISlider` → `NSlider`

spx-gui/src/components/ui/UIButton.vue

@@ -277,7 +277,7 @@ const classes = computed(() =>
     iconOnly: iconOnly.value
   })
 )
-const rootClass = computed(() => classes.value.root(props.class ?? null))
+const rootClass = computed(() => classes.value.root(props.class))
 const contentClass = computed(() => classes.value.content())
 const iconClass = computed(() => classes.value.icon())
 

spx-gui/src/components/ui/UIButtonGroup.vue

@@ -41,7 +41,7 @@ const emit = defineEmits<{
   'update:value': [string]
 }>()
 
-const rootClass = computed(() => cn('flex', props.class ?? null))
+const rootClass = computed(() => cn('flex', props.class))
 
 provide(selectedValueInjectionKey, () => props.value)
 provide(updateValueInjectionKey, (value: string) => {

spx-gui/src/components/ui/UIButtonGroupItem.vue

@@ -39,7 +39,7 @@ const rootClass = computed(() =>
         ? 'bg-grey-200 text-turquoise-600'
         : 'bg-[#47d8e4] text-grey-200',
     isActive.value ? 'cursor-default' : 'cursor-pointer',
-    props.class ?? null
+    props.class
   )
 )
 

spx-gui/src/components/ui/UICard.vue

@@ -13,5 +13,5 @@ const props = defineProps<{
   class?: ClassValue
 }>()
 
-const rootClass = computed(() => cn('overflow-hidden rounded-lg bg-grey-100 shadow-diffusion', props.class ?? null))
+const rootClass = computed(() => cn('overflow-hidden rounded-lg bg-grey-100 shadow-diffusion', props.class))
 </script>

spx-gui/src/components/ui/UIChip.vue

@@ -24,7 +24,7 @@ const rootClass = computed(() =>
       'text-grey-100 bg-primary-main border-primary-main': props.type === 'primary',
       'text-grey-900 bg-grey-300 border-grey-300': props.type === 'boring'
     },
-    props.class ?? null
+    props.class
   )
 )
 </script>

spx-gui/src/components/ui/UICode.vue

@@ -14,6 +14,6 @@ const props = defineProps<{
 }>()
 
 const rootClass = computed(() =>
-  cn('rounded-[4px] bg-primary-200 px-1 py-[2px] font-code text-10/[1.6] text-primary-main', props.class ?? null)
+  cn('rounded-[4px] bg-primary-200 px-1 py-[2px] font-code text-10/[1.6] text-primary-main', props.class)
 )
 </script>

spx-gui/src/components/ui/UIConfigProvider.vue

@@ -14,6 +14,7 @@ import { type GlobalThemeOverrides } from 'naive-ui'
 import { inject, type InjectionKey } from 'vue'
 import { computedShallowReactive } from '@/utils/utils'
 import * as uiVariables from './tokens'
+import { providePopupStack } from './popup'
 import { getCssVars } from './tokens/utils'
 import { useProvideLastClickEvent } from './utils'
 import { providePopupContainer, provideModalContainer, provideRootContainer } from '.'
@@ -84,22 +85,6 @@ const themeOverrides: GlobalThemeOverrides = {
     heightMedium: uiVariables.lineHeight[2],
     heightLarge: uiVariables.lineHeight[3]
   },
-  Popover: {
-    space: '8px', // TODO: some var like gap?
-    arrowOffset: '30px'
-  },
-  Tooltip: {
-    borderRadius: uiVariables.borderRadius[1],
-    boxShadow: uiVariables.boxShadow.small,
-    color: uiVariables.color.grey[1000],
-    textColor: uiVariables.color.grey[100],
-    padding: '7px 8px',
-    peers: {
-      Popover: {
-        arrowOffset: '12px' // TODO: `UITooltip` should be smart enough to use a smaller `arrowOffset` when the trigger element size is small
-      }
-    }
-  },
   Input: {
     border: 'none',
     borderHover: 'none',
@@ -160,6 +145,7 @@ const nConfigProviderEl = computed(() => nConfigProvider.value?.$el)
 provideRootContainer(nConfigProviderEl)
 providePopupContainer(nConfigProviderEl)
 provideModalContainer(nConfigProviderEl)
+providePopupStack()
 
 useProvideLastClickEvent()
 
@@ -176,12 +162,3 @@ const cssVariables = getCssVars('--ui-', uiVariables)
   line-height: 1.57143;
 }
 </style>
-
-<style>
-/* vueuc (dep of naive-ui) uses `pointer-events: all` on children of `v-binder-follower-content`, which wraps `Popover` content in naive-ui. */
-/* It causes pointer behavior issues in popup content. For example, a svg in a `visibility: hidden` element will still be clickable. */
-/* So we override it here to fix the issue. See details in https://github.com/07akioni/vueuc/issues/314 */
-.v-binder-follower-content > * {
-  pointer-events: initial;
-}
-</style>