@morscherlab/mint-sdk 1.4.0-beta.20 → 1.4.0-beta.22

package/src/__tests__/composables/useFloatingPanel.test.ts

@@ -0,0 +1,68 @@
+import { mount } from '@vue/test-utils'
+import { defineComponent, nextTick, ref } from 'vue'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { computePosition } from '@floating-ui/dom'
+import { useFloatingPanel } from '../../composables/useFloatingPanel'
+
+const cleanup = vi.fn()
+vi.mock('@floating-ui/dom', async (importOriginal) => ({
+  ...(await importOriginal<typeof import('@floating-ui/dom')>()),
+  autoUpdate: vi.fn((_reference: unknown, _floating: unknown, update: () => void) => {
+    update()
+    return cleanup
+  }),
+  computePosition: vi.fn(async () => ({ x: 10, y: 20, placement: 'bottom-start', strategy: 'fixed', middlewareData: {} })),
+}))
+
+/** A trigger and the panel placed next to it. */
+const Panel = defineComponent({
+  setup() {
+    const trigger = ref<HTMLElement | null>(null)
+    const panel = ref<HTMLElement | null>(null)
+    const isOpen = ref(true)
+    const { style } = useFloatingPanel(trigger, panel, isOpen)
+    return { trigger, panel, isOpen, style }
+  },
+  template: '<div><button ref="trigger">Open</button><div v-if="isOpen" ref="panel" class="panel" :style="style" /></div>',
+})
+
+async function settle() {
+  for (let i = 0; i < 3; i++) await nextTick()
+}
+
+describe('useFloatingPanel', () => {
+  afterEach(() => {
+    cleanup.mockClear()
+    document.body.innerHTML = ''
+  })
+
+  it.each([
+    ['closes', (wrapper: ReturnType<typeof mount>) => { (wrapper.vm as unknown as { isOpen: boolean }).isOpen = false }],
+    ['unmounts', (wrapper: ReturnType<typeof mount>) => wrapper.unmount()],
+  ])('should stop autoUpdate when the panel %s', async (_, end) => {
+    const wrapper = mount(Panel, { attachTo: document.body })
+    await settle()
+    expect(cleanup).not.toHaveBeenCalled()
+
+    end(wrapper)
+    await settle()
+
+    expect(cleanup).toHaveBeenCalledTimes(1)
+  })
+
+  it.each([
+    [false, ''],
+    [true, 'hidden'],
+  ])('should set the panel visibility to %j when referenceHidden is %s', async (referenceHidden, visibility) => {
+    vi.mocked(computePosition).mockResolvedValueOnce({
+      x: 10, y: 20, placement: 'bottom-start', strategy: 'fixed', middlewareData: { hide: { referenceHidden } },
+    })
+    mount(Panel, { attachTo: document.body })
+    await settle()
+
+    const panel = document.querySelector<HTMLElement>('.panel')!
+    expect(panel.style.position).toBe('fixed')
+    expect(panel.style.top).toBe('20px')
+    expect(panel.style.visibility).toBe(visibility)
+  })
+})

package/src/components/ActionMenu.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 /** Compact overflow actions with an icon-only BaseButton trigger and a viewport-safe teleported menu. */
-import { computePosition, flip, offset, shift } from '@floating-ui/dom'
 import { Check, Ellipsis } from 'lucide-vue-next'
-import { nextTick, onMounted, ref, watch } from 'vue'
+import { nextTick, onMounted, ref } from 'vue'
 import { useDropdownState } from '../composables/useDropdownState'
+import { useFloatingPanel } from '../composables/useFloatingPanel'
 import { useMenuKeyboard } from '../composables/useMenuKeyboard'
 import type { ActionMenuItem } from '../types/components'
 import BaseButton from './BaseButton.vue'
@@ -30,19 +30,15 @@ defineSlots<{
 }>()
 
 const panelRef = ref<HTMLElement | null>(null)
-const panelStyle = ref<Record<string, string>>({ visibility: 'hidden' })
 
-// Disclosure state (outside-click, Escape, scroll/resize closing, focus return)
-// comes from the shared composable; only floating-ui placement stays local.
+// Disclosure state (outside-click, Escape, focus return) and placement come from
+// the shared composables; the open menu follows its trigger on scroll.
 const { isOpen, rootRef, triggerRef, open, close } = useDropdownState({
-  closeOnScroll: true,
   insideRefs: [panelRef],
-  onOpen: () => {
-    panelStyle.value = { visibility: 'hidden' }
-    emit('open')
-  },
+  onOpen: () => emit('open'),
   onClose: () => emit('close'),
 })
+const { style: panelStyle } = useFloatingPanel(triggerRef, panelRef, isOpen, { placement: 'bottom-end' })
 
 // BaseButton owns the actual <button>, so the trigger element is resolved from
 // the wrapper once mounted rather than bound with a template ref.
@@ -57,27 +53,6 @@ function menuItems(): HTMLElement[] {
   )
 }
 
-async function positionPanel() {
-  const trigger = triggerRef.value
-  const panel = panelRef.value
-  if (!trigger || !panel) return
-
-  const position = await computePosition(trigger, panel, {
-    placement: 'bottom-end',
-    strategy: 'fixed',
-    middleware: [
-      offset(4),
-      flip(),
-      shift({ padding: 8 }),
-    ],
-  })
-  panelStyle.value = {
-    left: `${position.x}px`,
-    top: `${position.y}px`,
-    visibility: 'visible',
-  }
-}
-
 /** `focusFirst` is false when the keyboard composable owns the initial focus. */
 function openMenu(focusFirst = true) {
   if (props.disabled || isOpen.value) return
@@ -105,12 +80,6 @@ function handleSelect(item: ActionMenuItem) {
   emit('select', item)
   close()
 }
-
-watch(isOpen, async (opened) => {
-  if (!opened) return
-  await nextTick()
-  await positionPanel()
-})
 </script>
 
 <template>

package/src/components/BaseModal.vue

@@ -107,8 +107,9 @@ watch(() => props.open, (isOpen) => {
   if (!isOpen && index !== -1) openModals.splice(index, 1)
 }, { immediate: true })
 
+// A control inside the modal that handles Escape (an open select) prevents the default first.
 function handleEscapeKeydown(event: KeyboardEvent) {
-  if (event.key === 'Escape' && props.closeOnEscape && props.open && openModals[openModals.length - 1] === self) {
+  if (event.key === 'Escape' && !event.defaultPrevented && props.closeOnEscape && props.open && openModals[openModals.length - 1] === self) {
     close()
   }
 }

package/src/components/Tooltip.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
 /** Floating tooltip using @floating-ui with auto-flip, delay, optional keyboard shortcut badge, and body Teleport. */
-import { ref, onBeforeUnmount, nextTick } from 'vue'
-import { computePosition, flip, offset, shift, type Placement } from '@floating-ui/dom'
-import { useEventListener } from '../composables/useEventListener'
+import { ref, onBeforeUnmount } from 'vue'
+import { useFloatingPanel } from '../composables/useFloatingPanel'
 
 interface Props {
   text: string
@@ -21,40 +20,19 @@ const props = withDefaults(defineProps<Props>(), {
 
 const tooltipId = `mint-tooltip-${Math.random().toString(36).slice(2, 9)}`
 const visible = ref(false)
-const actualPlacement = ref<Placement>(props.position)
 const triggerRef = ref<HTMLElement | null>(null)
 const contentRef = ref<HTMLElement | null>(null)
-const coords = ref({ top: '0px', left: '0px' })
 let timeoutId: ReturnType<typeof setTimeout> | undefined
 
-async function updatePosition() {
-  if (!triggerRef.value || !contentRef.value) return
-
-  const { x, y, placement } = await computePosition(triggerRef.value, contentRef.value, {
-    placement: props.position,
-    middleware: [
-      offset(6),
-      flip(),
-      shift({ padding: 8 }),
-    ],
-  })
-
-  coords.value = { top: `${y}px`, left: `${x}px` }
-  actualPlacement.value = placement
-}
-
-useEventListener(() => window, 'scroll', updatePosition, {
-  passive: true,
-  capture: true,
-  enabled: visible,
+// Follows the trigger while visible; the placement after flip picks the arrow side.
+const { style: coords, placement: actualPlacement } = useFloatingPanel(triggerRef, contentRef, visible, {
+  placement: () => props.position,
+  offset: 6,
 })
-useEventListener(() => window, 'resize', updatePosition, { enabled: visible })
 
-async function show() {
-  timeoutId = setTimeout(async () => {
+function show() {
+  timeoutId = setTimeout(() => {
     visible.value = true
-    await nextTick()
-    await updatePosition()
   }, props.delay)
 }
 
@@ -96,8 +74,7 @@ function resolvedMaxWidth(value: string | number | undefined): string | undefine
           maxWidth ? 'mint-tooltip__content--multiline' : '',
         ]"
         :style="{
-          top: coords.top,
-          left: coords.left,
+          ...coords,
           maxWidth: resolvedMaxWidth(maxWidth),
         }"
         role="tooltip"

package/src/components/internal/DatePickerDateInternal.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 /** DatePicker type="date": input that opens a calendar dropdown for selecting a single date, with clearable support. */
-import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom'
-import { ref, computed, nextTick, onBeforeUnmount, watch, useTemplateRef } from 'vue'
+import { ref, computed, nextTick, watch, useTemplateRef } from 'vue'
 import { useCalendarGrid, type CalendarGridDay } from '../../composables/useCalendarGrid'
 import { useDropdownState } from '../../composables/useDropdownState'
+import { useFloatingPanel } from '../../composables/useFloatingPanel'
 import { useFocusTrap } from '../../composables/useFocusTrap'
 import CalendarGridPanelInternal from './CalendarGridPanelInternal.vue'
 
@@ -30,11 +30,13 @@ const emit = defineEmits<{
 }>()
 
 const dropdownRef = ref<HTMLElement | null>(null)
-const dropdownStyle = ref<Record<string, string>>({})
 const { isOpen, triggerRef, open, close, toggle } = useDropdownState({
   rootRef: useTemplateRef<HTMLElement>('container'),
   insideRefs: [dropdownRef],
 })
+// floating-ui keeps the panel anchored (flip/shift) while the page scrolls,
+// instead of the panel closing on every scroll or resize.
+const { style: dropdownStyle } = useFloatingPanel(triggerRef, dropdownRef, isOpen)
 // The panel is a non-modal dialog: Tab cycles inside it while it is open, and
 // focus returns to the input when it closes.
 useFocusTrap({ containerRef: dropdownRef, active: isOpen })
@@ -83,41 +85,6 @@ function handleTriggerKeydown(event: KeyboardEvent) {
   }
 }
 
-// floating-ui keeps the panel anchored (flip/shift) while the page scrolls,
-// instead of the panel closing on every scroll or resize.
-let stopAutoUpdate: (() => void) | null = null
-
-async function updateDropdownPosition() {
-  const trigger = triggerRef.value
-  const panel = dropdownRef.value
-  if (!trigger || !panel) return
-
-  const { x, y } = await computePosition(trigger, panel, {
-    placement: 'bottom-start',
-    strategy: 'fixed',
-    middleware: [offset(4), flip(), shift({ padding: 8 })],
-  })
-  dropdownStyle.value = {
-    position: 'fixed',
-    top: `${y}px`,
-    left: `${x}px`,
-    zIndex: '9999',
-  }
-}
-
-function stopPositioning() {
-  stopAutoUpdate?.()
-  stopAutoUpdate = null
-}
-
-function startPositioning() {
-  const trigger = triggerRef.value
-  const panel = dropdownRef.value
-  if (!trigger || !panel) return
-  stopPositioning()
-  stopAutoUpdate = autoUpdate(trigger, panel, () => void updateDropdownPosition())
-}
-
 /** Moves focus into the calendar grid: selected day, else today, else the first day. */
 function focusCalendar() {
   const panel = dropdownRef.value
@@ -130,21 +97,15 @@ function focusCalendar() {
 }
 
 watch(isOpen, async (opened) => {
-  if (!opened) {
-    stopPositioning()
-    return
-  }
+  if (!opened) return
   if (selectedDate.value) {
     setCurrentMonthFromDate(selectedDate.value)
   }
   await nextTick()
-  startPositioning()
   // A second tick so this focus lands after the focus trap's initial focus.
   await nextTick()
   focusCalendar()
 })
-
-onBeforeUnmount(stopPositioning)
 </script>
 
 <template>
@@ -202,6 +163,7 @@ onBeforeUnmount(stopPositioning)
           :style="dropdownStyle"
           role="dialog"
           aria-label="Date picker"
+          @keydown.escape.prevent="close(true)"
         >
           <CalendarGridPanelInternal
             :week-days="weekDays"

package/src/components/internal/DatePickerDateTimeInternal.vue

@@ -3,6 +3,7 @@
 import { computed, ref, watch, nextTick, useTemplateRef } from 'vue'
 import { useCalendarGrid, type CalendarGridDay } from '../../composables/useCalendarGrid'
 import { useDropdownState } from '../../composables/useDropdownState'
+import { useFloatingPanel } from '../../composables/useFloatingPanel'
 import { useFocusTrap } from '../../composables/useFocusTrap'
 import { formatTime, formatTimeSlot, generateTimeSlots, toMinutes } from '../../utils/time'
 import CalendarGridPanelInternal from './CalendarGridPanelInternal.vue'
@@ -37,10 +38,13 @@ const emit = defineEmits<{
 }>()
 
 const dropdownRef = ref<HTMLElement | null>(null)
+const rootRef = useTemplateRef<HTMLElement>('root')
 const { isOpen, open, close, toggle } = useDropdownState({
-  rootRef: useTemplateRef<HTMLElement>('root'),
+  rootRef,
   triggerRef: useTemplateRef<HTMLElement>('trigger'),
 })
+// Fixed below the field, so a modal body's overflow does not clip it; it stays in place in the DOM.
+const { style: dropdownStyle } = useFloatingPanel(rootRef, dropdownRef, isOpen)
 // Non-modal dialog: Tab stays inside the panel, focus returns to the input on close.
 useFocusTrap({ containerRef: dropdownRef, active: isOpen })
 const {
@@ -230,8 +234,10 @@ watch(isOpen, async (opened) => {
         v-if="isOpen"
         ref="dropdownRef"
         class="mint-popover mint-datetime-picker__dropdown"
+        :style="dropdownStyle"
         role="dialog"
         aria-label="Date and time picker"
+        @keydown.escape.prevent="close(true)"
       >
         <!-- Calendar section -->
         <div class="mint-datetime-picker__calendar-section">

package/src/components/internal/DatePickerTimeInternal.vue

@@ -3,6 +3,7 @@
 import { ref, computed, watch, nextTick, useId, useTemplateRef } from 'vue'
 import type { TimeSlotDisabledFn } from '../../types'
 import { useDropdownState } from '../../composables/useDropdownState'
+import { useFloatingPanel } from '../../composables/useFloatingPanel'
 import {
   compareTime,
   findNearestTimeSlotIndex,
@@ -40,12 +41,16 @@ const emit = defineEmits<{
 }>()
 
 const listRef = ref<HTMLUListElement | null>(null)
+const dropdownRef = ref<HTMLElement | null>(null)
 const highlightedIndex = ref(-1)
 const listboxId = `mint-time-picker-listbox-${useId().replace(/:/g, '')}`
+const rootRef = useTemplateRef<HTMLElement>('root')
 const { isOpen, open, close, toggle } = useDropdownState({
-  rootRef: useTemplateRef<HTMLElement>('root'),
+  rootRef,
   triggerRef: useTemplateRef<HTMLElement>('trigger'),
 })
+// Fixed below the field and at least as wide, so a modal body's overflow does not clip it; it stays in place in the DOM.
+const { style: dropdownStyle } = useFloatingPanel(rootRef, dropdownRef, isOpen, { matchWidth: true })
 
 /** Id of the highlighted slot, published to the input as `aria-activedescendant`. */
 const activeSlotId = computed(() =>
@@ -258,7 +263,9 @@ watch(isOpen, (open) => {
     >
       <div
         v-if="isOpen"
+        ref="dropdownRef"
         class="mint-popover mint-time-picker__dropdown"
+        :style="dropdownStyle"
       >
         <ul
           :id="listboxId"

package/src/components/internal/NumberUnitInputInternal.vue

@@ -4,9 +4,9 @@
  * previews the value in each unit; units with a `factor` also get a hint in the neighbour unit
  * nearest to 1–1000.
  */
-import { computePosition, flip, offset, shift } from '@floating-ui/dom'
-import { computed, nextTick, ref, useTemplateRef, watch } from 'vue'
+import { computed, nextTick, ref, useTemplateRef } from 'vue'
 import { useDropdownState } from '../../composables/useDropdownState'
+import { useFloatingPanel } from '../../composables/useFloatingPanel'
 import { useMenuKeyboard } from '../../composables/useMenuKeyboard'
 import type { UnitOption } from '../../types'
 
@@ -148,27 +148,13 @@ function selectUnit(newUnitValue: string) {
 
 // ---- Unit menu (disclosure + WAI-ARIA keyboard, shared with ActionMenu) ----
 const menuRef = ref<HTMLElement | null>(null)
-// Transparent (not visibility:hidden) until placed, so the open-time focus can land on an option.
-const menuStyle = ref<Record<string, string>>({ opacity: '0' })
 const { isOpen, rootRef, open, close } = useDropdownState({
   triggerRef: useTemplateRef<HTMLElement>('trigger'),
-  closeOnScroll: true,
   insideRefs: [menuRef],
-  onOpen: () => { menuStyle.value = { opacity: '0' } },
 })
 
-/** Teleported + fixed like ActionMenu, so overflow:hidden/auto ancestors never clip the menu. */
-watch(isOpen, async (opened) => {
-  if (!opened) return
-  await nextTick()
-  if (!rootRef.value || !menuRef.value) return
-  const { x, y } = await computePosition(rootRef.value, menuRef.value, {
-    placement: 'bottom-end',
-    strategy: 'fixed',
-    middleware: [offset(4), flip(), shift({ padding: 8 })],
-  })
-  menuStyle.value = { left: `${x}px`, top: `${y}px` }
-})
+/** Teleported + fixed like ActionMenu, so overflow:hidden/auto ancestors never clip the menu; it follows the field on scroll. */
+const { style: menuStyle } = useFloatingPanel(rootRef, menuRef, isOpen, { placement: 'bottom-end' })
 
 function menuItems(): HTMLElement[] {
   return menuRef.value ? Array.from(menuRef.value.querySelectorAll<HTMLElement>('[role="option"]')) : []

package/src/components/internal/SelectMultipleInternal.vue

@@ -4,6 +4,7 @@ import { computed, nextTick, ref, useAttrs, useId, watch } from 'vue'
 import { Check, ChevronDown, X } from 'lucide-vue-next'
 import type { OptionPrimitive, SelectOption, SelectOptionInput } from '../../types'
 import { useEventListener } from '../../composables/useEventListener'
+import { useFloatingPanel } from '../../composables/useFloatingPanel'
 import { useListSelection } from '../../composables/useListSelection'
 import { normalizeOptionInput } from '../../utils/options'
 
@@ -49,6 +50,7 @@ const listboxId = `mint-multi-select-${id}`
 const root = ref<HTMLElement | null>(null)
 const field = ref<HTMLElement | null>(null)
 const search = ref<HTMLInputElement | null>(null)
+const panel = ref<HTMLElement | null>(null)
 const open = ref(false)
 const query = ref('')
 const activeIndex = ref(-1)
@@ -136,6 +138,9 @@ function handleSearchKeydown(event: KeyboardEvent): void {
   event.preventDefault()
 }
 
+// Fixed next to the field, so a modal body's overflow does not clip it; it stays in place in the DOM.
+const { style: panelStyle } = useFloatingPanel(field, panel, open, { matchWidth: true })
+
 watch(visibleOptions, options => { activeIndex.value = options.length > 0 ? 0 : -1 })
 watch(() => props.disabled, disabled => { if (disabled) void closePanel() })
 useEventListener(() => document, 'pointerdown', event => {
@@ -192,7 +197,7 @@ useEventListener(() => document, 'pointerdown', event => {
       <ChevronDown class="mint-multi-select__icon" :size="14" aria-hidden="true" />
     </div>
 
-    <div v-if="open" class="mint-popover mint-searchable-select__panel">
+    <div v-if="open" ref="panel" class="mint-popover mint-searchable-select__panel" :style="panelStyle">
       <div class="mint-searchable-select__search-wrap">
         <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" aria-hidden="true">
           <circle cx="8.5" cy="8.5" r="5.5" /><path d="m13 13 4 4" />

package/src/components/internal/SelectSearchableInternal.vue

@@ -4,6 +4,7 @@ import { computed, nextTick, ref, useAttrs, useId, watch } from 'vue'
 import { ChevronsUpDown } from 'lucide-vue-next'
 import type { SelectOption, SelectOptionInput } from '../../types'
 import { useEventListener } from '../../composables/useEventListener'
+import { useFloatingPanel } from '../../composables/useFloatingPanel'
 import { normalizeOptionInput } from '../../utils/options'
 
 interface Props {
@@ -53,6 +54,7 @@ const triggerId = `${listboxId}-trigger`
 const root = ref<HTMLElement | null>(null)
 const trigger = ref<HTMLButtonElement | null>(null)
 const search = ref<HTMLInputElement | null>(null)
+const panel = ref<HTMLElement | null>(null)
 const open = ref(false)
 const query = ref('')
 const activeIndex = ref(-1)
@@ -144,6 +146,9 @@ function handleTriggerKeydown(event: KeyboardEvent): void {
   })
 }
 
+// Fixed next to the trigger, so a modal body's overflow does not clip it; it stays in place in the DOM.
+const { style: panelStyle } = useFloatingPanel(trigger, panel, open, { matchWidth: true })
+
 watch(visibleOptions, options => { activeIndex.value = firstEnabledIndex(options) })
 watch(() => props.disabled, disabled => { if (disabled) void closePanel() })
 useEventListener(() => document, 'pointerdown', event => {
@@ -180,7 +185,7 @@ useEventListener(() => document, 'pointerdown', event => {
       <ChevronsUpDown :size="14" aria-hidden="true" />
     </button>
 
-    <div v-if="open" class="mint-popover mint-searchable-select__panel">
+    <div v-if="open" ref="panel" class="mint-popover mint-searchable-select__panel" :style="panelStyle">
       <div class="mint-searchable-select__search-wrap">
         <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" aria-hidden="true">
           <circle cx="8.5" cy="8.5" r="5.5" /><path d="m13 13 4 4" />

package/src/components/internal/WellEditPopupInternal.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 /** Single-well inspector for WellPlate / PlateEditor, composed from SDK fields (3b). */
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import { computePosition, flip, shift } from '@floating-ui/dom'
 import { ChevronRight, X } from 'lucide-vue-next'
 import type { Well, WellEditData, WellEditField } from '../../types'
+import { useFloatingPanel } from '../../composables/useFloatingPanel'
 import { useFocusTrap } from '../../composables/useFocusTrap'
 import { sampleTypeMarker } from '../../utils/sampleTypeMarker'
 import { DEFAULT_SAMPLE_TYPE_COLORS } from '../WellPlate.colors'
@@ -157,28 +157,18 @@ function handleInlineEnter(event: KeyboardEvent) {
   emit('close')
 }
 
-// Placement: flip and clamp to the viewport. Transparent (not hidden) until
-// placed, so the focus trap can move focus in on mount.
+// Placement at the clicked point: flip and clamp to the viewport. Inline, the
+// inspector stays in place and is not positioned.
 const containerRef = ref<HTMLElement | null>(null)
-const panelStyle = ref<Record<string, string>>({ opacity: '0' })
-
-async function place() {
-  const panel = containerRef.value
-  if (!panel || props.inline) return
+const pointAnchor = () => {
+  if (props.inline) return null
   const { x, y } = props.position
-  const anchor = {
-    getBoundingClientRect: () => ({ x, y, left: x, top: y, right: x, bottom: y, width: 0, height: 0 }),
-  }
-  const placed = await computePosition(anchor, panel, {
-    placement: 'right-start',
-    strategy: 'fixed',
-    middleware: [flip(), shift({ padding: 8 })],
-  })
-  panelStyle.value = { left: `${placed.x}px`, top: `${placed.y}px` }
+  return { getBoundingClientRect: () => ({ x, y, left: x, top: y, right: x, bottom: y, width: 0, height: 0 }) }
 }
-
-watch(() => props.position, place)
-watch(showAdvanced, () => nextTick(place))
+const { style: panelStyle } = useFloatingPanel(pointAnchor, containerRef, computed(() => !props.inline), {
+  placement: 'right-start',
+  offset: 0,
+})
 
 // The parent mounts and unmounts the popup, so the trap follows the lifecycle,
 // the same way BaseModal drives it off `modelValue`.
@@ -200,7 +190,6 @@ watch(() => props.wellId, () => { if (props.inline) focusInline() }, { flush: 'p
 onMounted(() => {
   if (props.inline) return focusInline()
   trapActive.value = true
-  void place()
   // Runs after the trap's own first-element focus: start in the name field.
   void nextTick(() => containerRef.value?.querySelector<HTMLInputElement>('[data-field="label"] input')?.focus())
 })
@@ -223,7 +212,7 @@ onBeforeUnmount(() => {
       :aria-label="`Edit well ${wellId}`"
       :tabindex="inline ? undefined : -1"
       @click="inline || $event.stopPropagation()"
-      @keydown.escape="commit(); emit('close')"
+      @keydown.escape.prevent="commit(); emit('close')"
       @keydown="inline && handleInlineEnter($event)"
       @focusout="handleFocusout"
     >

package/src/composables/useFileImport.ts

@@ -1,4 +1,5 @@
 import { ref, shallowRef, type Ref, type ShallowRef } from 'vue'
+import type { SheetData } from 'read-excel-file/universal'
 import { readErrorMessage } from '../utils/errors'
 
 export interface DelimitedTable {
@@ -116,6 +117,53 @@ export function readFileAsText(file: File, encoding?: string): Promise<string> {
   })
 }
 
+/**
+ * Read a `.csv`, `.tsv` or `.xlsx` upload as comma-delimited CSV text.
+ * A `.csv` file (or any other extension) comes back unchanged. An `.xlsx`
+ * file gives its first sheet; each cell is its stored value, so number
+ * formats such as leading zeros are not applied. Dates become ISO text.
+ */
+export async function readTableFileAsCsv(file: File): Promise<string> {
+  const name = file.name.toLowerCase()
+  if (name.endsWith('.xlsx')) return rowsToCsv(await readFirstSheet(file))
+  const text = await readFileAsText(file)
+  return name.endsWith('.tsv') ? rowsToCsv(parseDelimitedRows(text, '\t')) : text
+}
+
+async function readFirstSheet(file: File): Promise<string[][]> {
+  // Lazy import: plugins that never read .xlsx do not load the library.
+  const { readSheet } = await import('read-excel-file/universal')
+  let rows: SheetData<string>
+  try {
+    // Keep the stored text: no trim, and no float parse that rounds big numbers.
+    rows = await readSheet(file, { trim: false, parseNumber: text => text })
+  } catch {
+    throw new Error(`${file.name} is not a valid .xlsx workbook.`)
+  }
+  return rows.map(row => row.map(formatCell))
+}
+
+function formatCell(value: unknown): string {
+  if (value === null || value === undefined) return ''
+  if (typeof value === 'boolean') return value ? 'TRUE' : 'FALSE'
+  if (value instanceof Date) {
+    // Excel stores dates as float day counts; round off the float error.
+    const [date, time] = new Date(Math.round(value.getTime() / 1000) * 1000)
+      .toISOString().slice(0, 19).split('T')
+    if (date === '1899-12-30') return time   // a time-only cell
+    return time === '00:00:00' ? date : `${date}T${time}`
+  }
+  return String(value)
+}
+
+function rowsToCsv(rows: readonly (readonly string[])[]): string {
+  return rows.map(row => row.map(quoteCsvField).join(',')).join('\n')
+}
+
+function quoteCsvField(value: string): string {
+  return /[",\r\n]/.test(value) ? `"${value.replace(/"/g, '""')}"` : value
+}
+
 export function parseDelimitedText(
   text: string,
   options: ParseDelimitedTextOptions = {},
@@ -170,8 +218,10 @@ function parseDelimitedRows(text: string, delimiter: string): string[][] {
       if (quoted && next === '"') {
         field += '"'
         index++
-      } else {
+      } else if (quoted || field === '') {
         quoted = !quoted
+      } else {
+        field += '"'   // a quote inside an unquoted field is text
       }
       continue
     }