@morscherlab/mint-sdk 1.4.0-beta.8 → 1.4.0

package/src/components/internal/ResourcePickerListInternal.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts" generic="T">
 /**
- * Searchable, optionally grouped single-select list shared by the experiment and
+ * Searchable single-select list shared by the experiment and
  * artifact selector modals: two-line rows (title, then code + meta) with status and date
  * in a right-hand column, a filled selected row, skeleton,
  * error and empty states, and the combobox keyboard model (↑ ↓ Enter).
  */
-import { computed, nextTick, reactive, ref, useId, watch } from 'vue'
+import { computed, nextTick, ref, useId, watch } from 'vue'
 import BaseInput from '../BaseInput.vue'
 import Skeleton from '../Skeleton.vue'
 import EmptyState from '../EmptyState.vue'
@@ -26,8 +26,6 @@ export interface ResourcePickerRow {
 const props = withDefaults(
   defineProps<{
     items: T[]
-    /** When set, rows render under collapsible group headers in this order. */
-    groups?: { label: string; items: T[] }[] | null
     itemKey: (item: T) => string | number
     describe: (item: T) => ResourcePickerRow
     selectedKey?: string | number | null
@@ -39,9 +37,10 @@ const props = withDefaults(
     error?: string | null
     emptyTitle?: string
     emptyDescription?: string
+    /** Focus the search field when the list mounts (the modal's focus trap honours `autofocus`). */
+    autofocusSearch?: boolean
   }>(),
   {
-    groups: null,
     selectedKey: null,
     placeholder: 'Search…',
     loading: false,
@@ -57,50 +56,33 @@ const emit = defineEmits<{
 defineSlots<{
   /** Extra filters on the search row. */
   filters?: () => unknown
-  /** A second filter row under the search. */
-  advanced?: () => unknown
   /** Row controls before the check; keys pressed inside them never select the row. */
   actions?: (props: { item: T }) => unknown
 }>()
 
 const listId = `mint-resource-picker-${useId().replace(/:/g, '')}`
-const collapsed = reactive(new Set<string>())
 const activeIndex = ref(-1)
 const listRef = ref<HTMLElement | null>(null)
 
-const visibleGroups = computed(() =>
-  props.groups?.map((group) => ({
-    ...group,
-    rows: collapsed.has(group.label) ? [] : group.items,
-  })),
-)
-/** Keyboard order: the rows on screen, top to bottom. */
-const flat = computed(() =>
-  visibleGroups.value ? visibleGroups.value.flatMap((group) => group.rows) : props.items,
-)
-const indexByKey = computed(() => new Map(flat.value.map((item, i) => [props.itemKey(item), i])))
+const indexByKey = computed(() => new Map(props.items.map((item, i) => [props.itemKey(item), i])))
 const showList = computed(() => !props.loading && !props.error && props.items.length > 0)
 
 function optionId(item: T): string {
   return `${listId}-${props.itemKey(item)}`
 }
 const activeDescendant = computed(() => {
-  const item = flat.value[activeIndex.value]
+  const item = props.items[activeIndex.value]
   return item === undefined ? undefined : optionId(item)
 })
 
 function indexOf(item: T): number {
   return indexByKey.value.get(props.itemKey(item)) ?? -1
 }
-function toggleGroup(label: string) {
-  if (collapsed.has(label)) collapsed.delete(label)
-  else collapsed.add(label)
-}
 function keydown(event: KeyboardEvent) {
-  // Keys belong to the search combobox; a focused header, filter or row action keeps its own Enter.
+  // Keys belong to the search combobox; a focused filter or row action keeps its own Enter.
   const target = event.target as HTMLElement | null
   if (target !== event.currentTarget && !target?.closest('.mint-resource-picker__search')) return
-  const rows = flat.value
+  const rows = props.items
   if (!rows.length) return
   if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
     event.preventDefault()
@@ -120,7 +102,7 @@ function keydown(event: KeyboardEvent) {
 }
 
 watch(
-  () => [props.items, props.groups],
+  () => props.items,
   () => {
     activeIndex.value = -1
   },
@@ -136,6 +118,7 @@ watch(
         :placeholder="placeholder"
         size="sm"
         type="search"
+        :autofocus="autofocusSearch"
         role="combobox"
         :aria-label="`Search ${label.toLowerCase()}`"
         :aria-expanded="showList"
@@ -151,7 +134,6 @@ watch(
       </BaseInput>
       <slot name="filters" />
     </div>
-    <slot name="advanced" />
 
     <div v-if="loading" class="mint-resource-picker__frame" aria-busy="true">
       <div v-for="n in 4" :key="n" class="mint-resource-picker__skeleton-row">
@@ -174,64 +156,42 @@ watch(
       role="listbox"
       :aria-label="label"
     >
-      <template v-for="group in visibleGroups ?? [{ label: '', items, rows: items }]" :key="group.label">
-        <button
-          v-if="visibleGroups"
-          type="button"
-          class="mint-resource-picker__group"
-          :aria-expanded="!collapsed.has(group.label)"
-          @click="toggleGroup(group.label)"
-        >
-          <svg
-            class="mint-resource-picker__chevron"
-            viewBox="0 0 16 16"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="1.5"
-            aria-hidden="true"
+      <div
+        v-for="item in items"
+        :id="optionId(item)"
+        :key="itemKey(item)"
+        role="option"
+        :aria-selected="itemKey(item) === selectedKey"
+        class="mint-resource-picker__row"
+        :class="{
+          'mint-resource-picker__row--selected': itemKey(item) === selectedKey,
+          'mint-resource-picker__row--active': indexOf(item) === activeIndex,
+        }"
+        @click="emit('select', item)"
+        @mouseenter="activeIndex = indexOf(item)"
+      >
+        <span class="mint-resource-picker__text">
+          <span class="mint-resource-picker__title">{{ describe(item).title }}</span>
+          <span v-if="describe(item).code || describe(item).meta?.length" class="mint-resource-picker__meta"
+            ><span v-if="describe(item).code" class="mint-resource-picker__code mint-exp-code mint-exp-code--sm">{{
+              describe(item).code
+            }}</span
+            ><span v-if="describe(item).meta?.length">{{ describe(item).meta!.join(' · ') }}</span></span
           >
-            <path d="M4 6l4 4 4-4" />
-          </svg>
-          <span class="mint-resource-picker__group-label">{{ group.label }}</span>
-          <span class="mint-resource-picker__group-count">{{ group.items.length }}</span>
-        </button>
-        <div
-          v-for="item in group.rows"
-          :id="optionId(item)"
-          :key="itemKey(item)"
-          role="option"
-          :aria-selected="itemKey(item) === selectedKey"
-          class="mint-resource-picker__row"
-          :class="{
-            'mint-resource-picker__row--selected': itemKey(item) === selectedKey,
-            'mint-resource-picker__row--active': indexOf(item) === activeIndex,
-          }"
-          @click="emit('select', item)"
-          @mouseenter="activeIndex = indexOf(item)"
-        >
-          <span class="mint-resource-picker__text">
-            <span class="mint-resource-picker__title">{{ describe(item).title }}</span>
-            <span v-if="describe(item).code || describe(item).meta?.length" class="mint-resource-picker__meta"
-              ><span v-if="describe(item).code" class="mint-resource-picker__code mint-exp-code mint-exp-code--sm">{{
-                describe(item).code
-              }}</span
-              ><span v-if="describe(item).meta?.length">{{ describe(item).meta!.join(' · ') }}</span></span
-            >
-          </span>
-          <span v-if="describe(item).status || describe(item).date" class="mint-resource-picker__aside">
-            <span
-              v-if="describe(item).status"
-              class="mint-resource-picker__status"
-              :class="`mint-resource-picker__status--${describe(item).status!.tone}`"
-              >{{ describe(item).status!.label }}</span
-            >
-            <span v-if="describe(item).date" class="mint-resource-picker__date">{{ describe(item).date }}</span>
-          </span>
-          <span v-if="$slots.actions" class="mint-resource-picker__actions" @click.stop>
-            <slot name="actions" :item="item" />
-          </span>
-        </div>
-      </template>
+        </span>
+        <span v-if="describe(item).status || describe(item).date" class="mint-resource-picker__aside">
+          <span
+            v-if="describe(item).status"
+            class="mint-resource-picker__status"
+            :class="`mint-resource-picker__status--${describe(item).status!.tone}`"
+            >{{ describe(item).status!.label }}</span
+          >
+          <span v-if="describe(item).date" class="mint-resource-picker__date">{{ describe(item).date }}</span>
+        </span>
+        <span v-if="$slots.actions" class="mint-resource-picker__actions" @click.stop>
+          <slot name="actions" :item="item" />
+        </span>
+      </div>
     </div>
   </div>
 </template>

package/src/components/internal/SelectMultipleInternal.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
-/** BaseSelect with `multiple`: a checkbox chip list with an optional selection cap (`max`). */
-import { computed } from 'vue'
+/** BaseSelect with `multiple`: a field of removable chips that opens a filterable checkbox listbox, capped by `max`. */
+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'
 
@@ -15,6 +18,8 @@ interface Props {
   invalid?: boolean
   max?: number
   size?: 'sm' | 'md' | 'lg'
+  ariaLabelledby?: string
+  ariaDescribedby?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -23,103 +28,220 @@ const props = withDefaults(defineProps<Props>(), {
   invalid: false,
   max: undefined,
   size: 'md',
+  ariaLabelledby: undefined,
+  ariaDescribedby: undefined,
+})
+
+defineOptions({ inheritAttrs: false })
+
+// The wrapper takes class and style; every other attribute (aria-label, data-*) names the focusable field.
+const attrs = useAttrs()
+const fieldAttrs = computed(() => {
+  const { class: _class, style: _style, ...rest } = attrs
+  return rest
 })
 
 const emit = defineEmits<{
   'update:modelValue': [value: OptionPrimitive[]]
 }>()
 
+const id = useId().replace(/:/g, '')
+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)
+
 const normalizedOptions = computed<MultiOption[]>(() => props.options.map(normalizeOptionInput<OptionPrimitive, MultiOption>))
-const optionSelection = useListSelection({
+const selection = useListSelection({
   selected: () => props.modelValue,
   items: normalizedOptions,
   getValue: option => option.value,
   disabled: () => props.disabled,
   max: () => props.max,
 })
-const canSelectMore = optionSelection.canAddMore
 
-function isSelected(value: OptionPrimitive): boolean {
-  return optionSelection.isSelected(value)
+const chips = computed(() => props.modelValue.map(value => ({
+  value,
+  label: normalizedOptions.value.find(option => option.value === value)?.label ?? String(value),
+})))
+const visibleOptions = computed(() => {
+  const needle = query.value.trim().toLocaleLowerCase()
+  if (!needle) return normalizedOptions.value
+  return normalizedOptions.value.filter(option => option.label.toLocaleLowerCase().includes(needle))
+})
+const activeDescendant = computed(() =>
+  activeIndex.value >= 0 ? `${listboxId}-option-${activeIndex.value}` : undefined,
+)
+
+function isUnavailable(option: MultiOption): boolean {
+  return !!option.disabled || (!selection.isSelected(option.value) && !selection.canAddMore.value)
 }
 
-function toggleOption(option: MultiOption) {
-  if (props.disabled || option.disabled) return
+async function openPanel(): Promise<void> {
+  if (props.disabled || open.value) return
+  query.value = ''
+  open.value = true
+  activeIndex.value = visibleOptions.value.length > 0 ? 0 : -1
+  await nextTick()
+  search.value?.focus()
+}
 
-  if (isSelected(option.value) || canSelectMore.value) {
-    emit('update:modelValue', optionSelection.toggleValue(option.value))
+async function closePanel(restoreFocus = false): Promise<void> {
+  open.value = false
+  query.value = ''
+  activeIndex.value = -1
+  if (restoreFocus) {
+    await nextTick()
+    field.value?.focus()
   }
 }
 
-function handleKeydown(event: KeyboardEvent, option: MultiOption) {
-  if (event.key === 'Enter' || event.key === ' ') {
-    event.preventDefault()
-    toggleOption(option)
-  }
+function moveActive(direction: 1 | -1): void {
+  const count = visibleOptions.value.length
+  if (count === 0) return
+  const start = activeIndex.value < 0 ? (direction === 1 ? -1 : count) : activeIndex.value
+  activeIndex.value = (start + direction + count) % count
+  void nextTick(() => document.getElementById(activeDescendant.value ?? '')?.scrollIntoView({ block: 'nearest' }))
+}
+
+function toggle(option: MultiOption): void {
+  if (props.disabled || isUnavailable(option)) return
+  emit('update:modelValue', selection.toggleValue(option.value))
+}
+
+function remove(value: OptionPrimitive): void {
+  if (props.disabled) return
+  emit('update:modelValue', props.modelValue.filter(selected => selected !== value))
 }
 
-const selectedLabels = computed(() => {
-  return props.modelValue
-    .map(v => normalizedOptions.value.find(o => o.value === v)?.label)
-    .filter(Boolean)
+function handleFieldKeydown(event: KeyboardEvent): void {
+  if (event.key !== 'Enter' && event.key !== ' ' && event.key !== 'ArrowDown') return
+  event.preventDefault()
+  void openPanel()
+}
+
+function handleSearchKeydown(event: KeyboardEvent): void {
+  if (event.key === 'ArrowDown') moveActive(1)
+  else if (event.key === 'ArrowUp') moveActive(-1)
+  else if (event.key === 'Enter') {
+    const option = visibleOptions.value[activeIndex.value]
+    if (option) toggle(option)
+  } else if (event.key === 'Escape') {
+    void closePanel(true)
+  } else if (event.key === 'Backspace' && query.value === '' && props.modelValue.length > 0) {
+    remove(props.modelValue[props.modelValue.length - 1]!)
+  } else return
+  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 => {
+  if (open.value && !root.value?.contains(event.target as Node)) void closePanel()
 })
 </script>
 
 <template>
   <div
-    :class="[
-      'mint-multi-select',
-      `mint-multi-select--${size}`,
-      disabled ? 'mint-multi-select--disabled' : '',
-      invalid ? 'mint-multi-select--error' : '',
-    ]"
+    ref="root"
+    :class="['mint-multi-select', `mint-multi-select--${size}`, $attrs.class]"
+    :style="$attrs.style"
+    @focusout="!root?.contains($event.relatedTarget as Node | null) && closePanel()"
   >
     <div
-      v-if="modelValue.length === 0"
-      class="mint-multi-select__placeholder"
+      v-bind="fieldAttrs"
+      ref="field"
+      role="combobox"
+      :tabindex="disabled ? undefined : 0"
+      :class="[
+        'mint-multi-select__field',
+        {
+          'mint-multi-select__field--open': open,
+          'mint-multi-select__field--error': invalid,
+          'mint-multi-select__field--disabled': disabled,
+        },
+      ]"
+      aria-haspopup="listbox"
+      :aria-expanded="open"
+      :aria-controls="listboxId"
+      :aria-disabled="disabled || undefined"
+      :aria-invalid="invalid || undefined"
+      :aria-labelledby="ariaLabelledby || undefined"
+      :aria-describedby="ariaDescribedby || undefined"
+      @click="open ? closePanel() : openPanel()"
+      @keydown.self="handleFieldKeydown"
     >
-      {{ placeholder }}
+      <div class="mint-multi-select__chips">
+        <span v-for="chip in chips" :key="String(chip.value)" class="mint-multi-select__chip">
+          {{ chip.label }}
+          <button
+            v-if="!disabled"
+            type="button"
+            tabindex="-1"
+            class="mint-multi-select__chip-remove"
+            :aria-label="`Remove ${chip.label}`"
+            @click.stop="remove(chip.value)"
+          >
+            <X :size="11" :stroke-width="2.25" aria-hidden="true" />
+          </button>
+        </span>
+        <span v-if="chips.length === 0" class="mint-multi-select__placeholder">{{ placeholder }}</span>
+      </div>
+      <ChevronDown class="mint-multi-select__icon" :size="14" aria-hidden="true" />
     </div>
 
-    <div class="mint-multi-select__options" role="group" :aria-invalid="invalid || undefined">
-      <button
-        v-for="option in normalizedOptions"
-        :key="String(option.value)"
-        type="button"
-        role="checkbox"
-        :aria-checked="isSelected(option.value)"
-        :disabled="disabled || option.disabled || (!isSelected(option.value) && !canSelectMore)"
-        :class="[
-          'mint-multi-select__chip',
-          `mint-multi-select__chip--${size}`,
-          isSelected(option.value) ? 'mint-multi-select__chip--active' : '',
-          option.disabled ? 'mint-multi-select__chip--disabled' : '',
-          !isSelected(option.value) && !canSelectMore ? 'mint-multi-select__chip--disabled' : '',
-        ]"
-        @click="toggleOption(option)"
-        @keydown="handleKeydown($event, option)"
-      >
-        <svg
-          class="mint-multi-select__chip-check"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2.5"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          aria-hidden="true"
-        >
-          <path d="M20 6 9 17l-5-5" />
+    <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" />
         </svg>
-        <span class="mint-multi-select__chip-label">{{ option.label }}</span>
-      </button>
-    </div>
+        <input
+          ref="search"
+          v-model="query"
+          role="combobox"
+          type="search"
+          class="mint-searchable-select__search"
+          placeholder="Filter…"
+          aria-label="Filter options"
+          :aria-expanded="open"
+          :aria-controls="listboxId"
+          :aria-activedescendant="activeDescendant"
+          aria-autocomplete="list"
+          @keydown="handleSearchKeydown"
+        >
+      </div>
 
-    <div
-      v-if="modelValue.length > 0"
-      class="mint-multi-select__summary"
-    >
-      {{ selectedLabels.join(', ') }}
+      <ul :id="listboxId" class="mint-searchable-select__list" role="listbox" aria-multiselectable="true">
+        <li
+          v-for="(option, index) in visibleOptions"
+          :id="`${listboxId}-option-${index}`"
+          :key="String(option.value)"
+          role="option"
+          class="mint-menu-item mint-multi-select__option"
+          :class="{ 'mint-menu-item--active': activeIndex === index }"
+          :aria-selected="selection.isSelected(option.value)"
+          :aria-disabled="isUnavailable(option) || undefined"
+          @mousedown.prevent
+          @mouseenter="!isUnavailable(option) && (activeIndex = index)"
+          @click="toggle(option)"
+        >
+          <span
+            :class="['mint-multi-select__check', { 'mint-multi-select__check--on': selection.isSelected(option.value) }]"
+            aria-hidden="true"
+          >
+            <Check v-if="selection.isSelected(option.value)" :size="10" :stroke-width="3.5" />
+          </span>
+          <span class="mint-menu-item__label">{{ option.label }}</span>
+        </li>
+        <li v-if="visibleOptions.length === 0" class="mint-searchable-select__empty">No matching options</li>
+      </ul>
     </div>
   </div>
 </template>

package/src/components/internal/SelectSearchableInternal.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
 /** BaseSelect with `searchable`: a single-select listbox with a search field, descriptions, disabled reasons, and custom slots. */
 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 {
@@ -52,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)
@@ -143,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 => {
@@ -176,12 +182,10 @@ useEventListener(() => document, 'pointerdown', event => {
       <span :class="['mint-searchable-select__value', { 'mint-searchable-select__value--placeholder': !selectedOption }]">
         {{ selectedOption?.label ?? placeholder }}
       </span>
-      <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" aria-hidden="true">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="m6 8 4 4 4-4" />
-      </svg>
+      <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/components/internal/WorkspaceShellInternal.vue

@@ -12,15 +12,22 @@ import type {
 import AppLayout from '../AppLayout.vue'
 import AppTopBar from '../AppTopBar.vue'
 import type { PluginWorkspaceShellModel } from '../../composables/pluginWorkspaceModel'
+import type { TopBarJob } from '../../types/jobs'
 
 defineProps<{
   shell: PluginWorkspaceShellModel
+  /** Passed to AppTopBar; undefined means no jobs control. */
+  job?: TopBarJob | null
+  jobsDone?: number
+  jobsOpen?: boolean
+  jobsPanelId?: string
 }>()
 
 const emit = defineEmits<{
   'pill-select': [item: PillNavItem]
   'pill-option-select': [option: PillNavOption, item: PillNavItem]
   'settings-values-change': [data: Record<string, unknown>]
+  'job-click': []
 }>()
 
 function handlePillOptionSelect(option: PillNavOption, item: PillNavItem) {
@@ -58,6 +65,11 @@ defineSlots<{
           :subtitle="shell.subtitle"
           :spec="shell.topBar"
           :pill="shell.pill"
+          :job="job"
+          :jobs-done="jobsDone"
+          :jobs-open="jobsOpen"
+          :jobs-panel-id="jobsPanelId"
+          @job-click="emit('job-click')"
           @pill-select="emit('pill-select', $event)"
           @pill-option-select="handlePillOptionSelect"
           @settings-values-change="emit('settings-values-change', $event)"