@morscherlab/mint-sdk 1.2.10 → 1.3.0-beta.10

package/src/components/PlateEditor.vue

@@ -0,0 +1,793 @@
+<script setup lang="ts">
+/**
+ * Multi-plate editor over WellPlate: plate tabs, format and slot, a single-well
+ * inspector, group assignment, well drag and sample drop.
+ *
+ * At 720px and wider a right rail lists the groups (or sample types) and holds
+ * the inspector for a single selected well; narrower, the rail collapses and
+ * the inspector opens as a popover.
+ *
+ * Controlled: it never changes `modelValue`. Every action is emitted as an
+ * intent (`well-edit`, `assign`, `rack-add`, …) for the caller to apply — or
+ * bind `useRackEditor().plateEditorListeners` to let the SDK hold the state.
+ *
+ * @example
+ * ```vue
+ * <PlateEditor v-model:active-rack-id="activeId" :model-value="racks" slots fill-series @well-edit="save" />
+ * ```
+ */
+import { computed, onBeforeUnmount, onMounted, ref, watch, type ComponentPublicInstance } from 'vue'
+import { Download, Move, Plus, Redo2, Trash2, Undo2, Upload, X } from 'lucide-vue-next'
+import type {
+  ActionMenuItem,
+  PlateEditorClearConfirm,
+  Rack,
+  SampleType,
+  SlotPosition,
+  Well,
+  WellEditData,
+  WellEditField,
+  WellLegendItem,
+  WellPlateFormat,
+  WellPlateSelectionMode,
+  WellPlateSize,
+  WellSampleDropData,
+  WellSampleDropParser,
+} from '../types'
+import { SAMPLE_GROUP_TOKENS, SLOT_ORDER } from '../utils/color'
+import { reorderList, useListReorder } from '../composables/useListReorder'
+import { useRovingFocus } from '../composables/useRovingFocus'
+import { PLATE_CONFIGS, WELL_PLATE_SIZE_CONFIGS } from './WellPlate.geometry'
+import { parseDroppedSampleJson } from './WellPlate.sampleDrop'
+import { DEFAULT_WELL_LEGEND_ITEMS } from './WellPlate.legend'
+import { sampleTypeMarker } from '../utils/sampleTypeMarker'
+import WellPlate from './WellPlate.vue'
+import WellEditPopupInternal from './internal/WellEditPopupInternal.vue'
+import ActionMenu from './ActionMenu.vue'
+import SegmentedControl from './SegmentedControl.vue'
+import IconButton from './IconButton.vue'
+import ConfirmDialog from './ConfirmDialog.vue'
+import BaseTextarea from './BaseTextarea.vue'
+
+interface Props {
+  /** The plates. Never mutated; changes arrive as emitted intents. */
+  modelValue: Rack[]
+  activeRackId?: string
+  /** Formats offered by the format control; one entry hides it. */
+  formats?: WellPlateFormat[]
+  /** R/G/B/Y slot buttons: `true` for all four, a list for a subset. */
+  slots?: boolean | SlotPosition[]
+  /** Reorder plate tabs by drag or Alt+←/→. */
+  reorder?: boolean
+  /** Show the Drag toggle that moves / swaps wells (`well-move`). */
+  wellDrag?: boolean
+  /** Groups for the selection bar; a well's `group` holds the group id and colors it. */
+  groups?: SampleType[] | false
+  /** Fields of the single-well inspector; `false` turns the inspector off. */
+  wellFields?: WellEditField[] | false
+  /** Accept dropped samples: `true` reads JSON payloads, a parser may return `null` to reject. */
+  sampleDrop?: boolean | WellSampleDropParser
+  /** Show an Import button: a chosen file emits `import`, pasted text `import-text` (see `importMode`). */
+  import?: boolean
+  /** What `import` offers: a file picker, a paste dialog whose text `import-text` emits unparsed, or both. */
+  importMode?: 'file' | 'paste' | 'both'
+  /** The file picker's `accept` filter for `import`, e.g. `'.csv'`. */
+  importAccept?: string
+  /** Export formats offered in the Import / Export menu; each emits `export`. */
+  export?: string[] | false
+  /** Clear-plate button: ask first, clear with an Undo button, or hide it. */
+  clear?: 'confirm' | 'undo' | false
+  /** Text and variant of the `clear="confirm"` dialog; unset fields keep the defaults. */
+  clearConfirm?: PlateEditorClearConfirm
+  /** Show Undo / Redo (also shown when `clear` is `'undo'`); they only emit intents. */
+  history?: boolean
+  canUndo?: boolean
+  canRedo?: boolean
+  /** Show the Fill Series button. */
+  fillSeries?: boolean
+  /** On a full plate: disable Fill Series, or keep it enabled and still emit `fill-series` (e.g. to show a toast). */
+  fillSeriesWhenFull?: 'disable' | 'emit'
+  maxRacks?: number
+  minRacks?: number
+  /** No editing controls; well clicks still emit `well-click`. */
+  readonly?: boolean
+  size?: WellPlateSize
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  activeRackId: undefined,
+  formats: () => [54, 96],
+  slots: false,
+  reorder: true,
+  wellDrag: false,
+  groups: false,
+  wellFields: () => ['label', 'sampleType', 'injectionVolume', 'injectionCount', 'customMethod'],
+  sampleDrop: false,
+  import: false,
+  importMode: 'file',
+  importAccept: undefined,
+  export: false,
+  clear: 'confirm',
+  clearConfirm: undefined,
+  history: false,
+  canUndo: false,
+  canRedo: false,
+  fillSeries: false,
+  fillSeriesWhenFull: 'disable',
+  maxRacks: 10,
+  minRacks: 1,
+  readonly: false,
+  size: 'xs',
+})
+
+const emit = defineEmits<{
+  'update:activeRackId': [rackId: string]
+  'rack-add': []
+  'rack-remove': [rackId: string]
+  'rack-reorder': [rackIds: string[]]
+  'update:format': [rackId: string, format: WellPlateFormat]
+  'update:slot': [rackId: string, slot: SlotPosition]
+  'well-click': [rackId: string, wellId: string]
+  'well-edit': [rackId: string, wellId: string, data: WellEditData]
+  'well-clear': [rackId: string, wellId: string]
+  'well-move': [rackId: string, sourceWellId: string, targetWellId: string]
+  'sample-drop': [rackId: string, wellId: string, data: WellSampleDropData, event: DragEvent]
+  /** `groupId` undefined clears the wells. */
+  'assign': [rackId: string, wellIds: string[], groupId: string | undefined]
+  'clear': [rackId: string]
+  'fill-series': [rackId: string]
+  'import': [file: File]
+  /** The pasted text, unparsed. */
+  'import-text': [text: string]
+  'export': [format: string]
+  'group-add': []
+  'undo': []
+  'redo': []
+  'selection-change': [wellIds: string[]]
+}>()
+
+interface PlateEditorWellEditorSlotProps {
+  rack: Rack
+  rackId: string
+  wellId: string
+  wellData?: Partial<Well>
+  editFields: WellEditField[]
+  defaultInjectionVolume: number
+  position: { x: number; y: number }
+  save: (data: WellEditData) => void
+  clear: () => void
+  close: () => void
+  /** True in the rail, false in the popover. */
+  inline: boolean
+}
+
+defineSlots<{
+  /** Replaces the default single-well inspector, in the rail or the popover. */
+  'well-editor'?: (props: PlateEditorWellEditorSlotProps) => unknown
+  /** Extra controls at the right end of the tab bar. */
+  'tab-extra'?: () => unknown
+  /** Extra controls at the right end of the toolbar. */
+  'toolbar-extra'?: () => unknown
+}>()
+
+// --- Active plate: a bound activeRackId wins; unbound, the tabs keep their own choice ---
+const localActiveId = ref<string>()
+
+const activeRack = computed<Rack | undefined>(() => {
+  const id = props.activeRackId ?? localActiveId.value
+  return props.modelValue.find(rack => rack.id === id) ?? props.modelValue[0]
+})
+
+function selectRack(rackId: string) {
+  localActiveId.value = rackId
+  emit('update:activeRackId', rackId)
+}
+
+function filledCount(rack: Rack): number {
+  return Object.values(rack.wells).filter(well => well.sampleType).length
+}
+
+// --- Tabs: roving focus, Alt+←/→ and drag reorder ---
+const tabRefs = new Map<string, HTMLElement>()
+function setTabRef(id: string, el: Element | ComponentPublicInstance | null) {
+  if (el instanceof HTMLElement) tabRefs.set(id, el)
+  else tabRefs.delete(id)
+}
+
+const { handleKeydown: handleTabArrows } = useRovingFocus({
+  ids: () => props.modelValue.map(rack => rack.id),
+  activeId: () => activeRack.value?.id,
+  activate: selectRack,
+  getElement: id => tabRefs.get(id),
+})
+
+const reorder = useListReorder<Rack>({
+  items: () => props.modelValue,
+  getId: rack => rack.id,
+  getLabel: rack => rack.name,
+  disabled: () => !props.reorder || props.readonly,
+  getElement: id => tabRefs.get(id),
+  itemNoun: 'Plate',
+  onReorder: ({ fromIndex, toIndex }) => {
+    emit('rack-reorder', reorderList(props.modelValue.map(rack => rack.id), fromIndex, toIndex))
+  },
+})
+
+function handleTabKeydown(event: KeyboardEvent, rack: Rack, index: number) {
+  if (event.altKey) reorder.onKeydown(event, rack, index)
+  else handleTabArrows(event)
+}
+
+const canReorder = computed(() => props.reorder && !props.readonly)
+const canAdd = computed(() => !props.readonly && props.modelValue.length < props.maxRacks)
+const canRemove = computed(() => !props.readonly && props.modelValue.length > props.minRacks)
+
+// --- Toolbar ---
+const formatOptions = computed(() => props.formats.map(format => ({ value: format, label: String(format) })))
+const slotOptions = computed<readonly SlotPosition[]>(() =>
+  props.slots === true ? SLOT_ORDER : props.slots || [],
+)
+const dragMode = ref(false)
+const confirmOpen = ref(false)
+const isEmpty = computed(() => !activeRack.value || filledCount(activeRack.value) === 0)
+const isFull = computed(() => {
+  const rack = activeRack.value
+  if (!rack) return true
+  const { rows, cols } = PLATE_CONFIGS[rack.format]
+  return filledCount(rack) >= rows * cols
+})
+
+const showToolbar = computed(() => !props.readonly && Boolean(activeRack.value))
+
+function toggleDrag() {
+  dragMode.value = !dragMode.value
+  setSelection([])
+}
+
+function requestClear() {
+  const rack = activeRack.value
+  if (!rack) return
+  if (props.clear === 'confirm') confirmOpen.value = true
+  else emit('clear', rack.id)
+}
+
+function confirmClear() {
+  confirmOpen.value = false
+  if (activeRack.value) emit('clear', activeRack.value.id)
+}
+
+const fileInput = ref<HTMLInputElement | null>(null)
+function handleFile(event: Event) {
+  const input = event.target as HTMLInputElement
+  const file = input.files?.[0]
+  if (file) emit('import', file)
+  input.value = ''
+}
+
+const importFile = computed(() => props.import && props.importMode !== 'paste')
+const importPaste = computed(() => props.import && props.importMode !== 'file')
+const exportFormats = computed(() => props.export || [])
+const ioLabel = computed(() => {
+  if (!exportFormats.value.length) return 'Import'
+  return props.import ? 'Import / Export' : 'Export'
+})
+const ioItems = computed<ActionMenuItem[]>(() => [
+  ...(importFile.value ? [{ id: 'import', label: 'Import file…' }] : []),
+  ...(importPaste.value ? [{ id: 'paste', label: 'Paste…' }] : []),
+  ...exportFormats.value.map(format => ({ id: `export:${format}`, label: `Export ${format.toUpperCase()}` })),
+])
+
+const pasteOpen = ref(false)
+const pasteText = ref('')
+function confirmPaste() {
+  if (pasteText.value.trim()) emit('import-text', pasteText.value)
+  pasteOpen.value = false
+}
+
+function handleIo(item: ActionMenuItem) {
+  if (item.id === 'import') fileInput.value?.click()
+  else if (item.id === 'paste') {
+    // Every Paste starts empty, so text from a canceled dialog is never imported.
+    pasteText.value = ''
+    pasteOpen.value = true
+  }
+  else emit('export', item.id.slice('export:'.length))
+}
+
+const showHistory = computed(() => !props.readonly && (props.history || props.clear === 'undo'))
+
+// Scoped to the editor, and text fields keep their own undo.
+function handleRootKeydown(event: KeyboardEvent) {
+  if (!showHistory.value || !(event.ctrlKey || event.metaKey)) return
+  if ((event.target as HTMLElement).closest('input, textarea, select, [contenteditable="true"]')) return
+  const key = event.key.toLowerCase()
+  const redo = key === 'y' || (key === 'z' && event.shiftKey)
+  if (redo ? !props.canRedo : key !== 'z' || !props.canUndo) return
+  event.preventDefault()
+  if (redo) emit('redo')
+  else emit('undo')
+}
+
+// A focused Undo/Redo that turns disabled would drop focus to <body>, out of reach of
+// the editor's shortcuts; hand it to the editor root first (pre-flush, before the patch).
+watch(() => [props.canUndo, props.canRedo], () => {
+  const step = (document.activeElement as HTMLElement | null)?.dataset?.history
+  if ((step === 'undo' && !props.canUndo) || (step === 'redo' && !props.canRedo)) rootRef.value?.focus()
+})
+
+// --- Plate ---
+const groupList = computed(() => props.groups || [])
+const groupColor = (group: SampleType, index: number) =>
+  group.color ?? SAMPLE_GROUP_TOKENS[index % SAMPLE_GROUP_TOKENS.length]
+
+const sampleColors = computed<Record<string, string>>(() =>
+  Object.fromEntries(groupList.value.map((group, index) => [group.id, groupColor(group, index)])),
+)
+const legendItems = computed<WellLegendItem[] | undefined>(() =>
+  props.groups
+    ? props.groups.map((group, index) => ({ type: group.id, label: group.name, color: groupColor(group, index) }))
+    : undefined,
+)
+
+// --- Rail: measured, because the popover it replaces is teleported out of reach of CSS ---
+const RAIL_MIN_WIDTH = 720
+// __main's 2×20px side padding plus the 232px rail column.
+const RAIL_CHROME = 40 + 232
+const rootRef = ref<HTMLElement | null>(null)
+const railRef = ref<HTMLElement | null>(null)
+const width = ref(0)
+let resizeObserver: ResizeObserver | undefined
+
+onMounted(() => {
+  const root = rootRef.value
+  if (!root) return
+  width.value = root.getBoundingClientRect().width
+  if (typeof ResizeObserver === 'undefined') return
+  resizeObserver = new ResizeObserver(([entry]) => { if (entry) width.value = entry.contentRect.width })
+  resizeObserver.observe(root)
+})
+onBeforeUnmount(() => resizeObserver?.disconnect())
+
+// ponytail: plate width from the size table (table border-spacing counted per column); 'fill' counts as 0.
+const plateWidth = computed(() => {
+  const { cols } = PLATE_CONFIGS[activeRack.value?.format ?? 96]
+  const size = WELL_PLATE_SIZE_CONFIGS[props.size]
+  const px = (value: string) => (value.endsWith('px') ? parseFloat(value) : 0)
+  return px(size.headerWidth) + cols * px(size.cellWidth) + (cols + 2) * px(size.gap)
+})
+// The rail waits until the plate still fits beside it, so it never forces a sideways scroll.
+const railOn = computed(() => width.value >= Math.max(RAIL_MIN_WIDTH, plateWidth.value + RAIL_CHROME))
+
+/** Rail list: the groups, or the sample types when there are none. */
+const railItems = computed(() => {
+  const wells = Object.values(activeRack.value?.wells ?? {})
+  const items = legendItems.value ?? DEFAULT_WELL_LEGEND_ITEMS
+  return items.map(item => ({
+    ...item,
+    count: wells.filter(well => (props.groups ? well.group : well.sampleType) === item.type).length,
+    swatch: props.groups ? { backgroundColor: item.color } : sampleTypeMarker(item.type, item.color).style,
+    glyph: props.groups ? '' : sampleTypeMarker(item.type, item.color).glyph,
+  }))
+})
+
+const inspectorOn = computed(() => Boolean(props.wellFields) && !props.readonly && !dragMode.value)
+
+const selectionMode = computed<WellPlateSelectionMode>(() => {
+  if (props.readonly) return 'none'
+  if (dragMode.value) return 'drag'
+  // Without groups the selection only feeds the inspector; with neither, nothing acts on it.
+  if (!props.groups && !inspectorOn.value) return 'none'
+  // A Ctrl/Cmd-click toggles a well in every mode. Beside the rail a plain click selects
+  // one well and the inspector opens there; in the popover mode it opens the popover.
+  // Groups add the rectangle drag, except where a plain click edits.
+  return props.groups && (railOn.value || !inspectorOn.value) ? 'rectangle' : 'multiple'
+})
+
+const dropParser = computed<WellSampleDropParser | undefined>(() => {
+  if (typeof props.sampleDrop === 'function') return props.sampleDrop
+  return props.sampleDrop ? event => (event.dataTransfer ? parseDroppedSampleJson(event.dataTransfer) : null) : undefined
+})
+
+const selection = ref<string[]>([])
+function setSelection(wellIds: string[]) {
+  selection.value = wellIds
+  emit('selection-change', wellIds)
+}
+// Well ids from another plate or format would be ghosts, and a mode that cannot select
+// could never clear them; drop them and tell the parent.
+watch(
+  [() => activeRack.value?.id, () => activeRack.value?.format, () => selectionMode.value === 'none'],
+  () => { if (selection.value.length) setSelection([]) },
+)
+
+// Without groups a selection beside the rail is the inspected well; it closes with the rail
+// instead of reopening, and stealing focus, when the rail comes back.
+watch(railOn, () => { if (!props.groups && selection.value.length) setSelection([]) })
+
+function handleSelection(wellIds: string[]) {
+  if (selectionMode.value === 'none' || dragMode.value) return
+  setSelection(wellIds)
+}
+
+function handleWellEdit(wellId: string, data: WellEditData) {
+  const rack = activeRack.value
+  if (!rack) return
+  const fields = props.wellFields || []
+  // An unnamed sample is an empty well, unless its group still names it; blanks and QCs stand alone.
+  const grouped = groupList.value.some(group => group.id === rack.wells[wellId]?.group)
+  const sample = !data.sampleType || data.sampleType === 'sample'
+  if (fields.includes('label') && !data.label && sample && !grouped) emit('well-clear', rack.id, wellId)
+  else emit('well-edit', rack.id, wellId, data)
+}
+
+const railWellId = computed(() =>
+  railOn.value && inspectorOn.value && selection.value.length === 1 ? selection.value[0] : undefined,
+)
+const railGroupLabel = computed(() => {
+  const groupId = railWellId.value && activeRack.value?.wells[railWellId.value]?.group
+  return groupList.value.find(group => group.id === groupId)?.name
+})
+const railPosition = () => {
+  const rect = railRef.value?.getBoundingClientRect()
+  return { x: rect?.left ?? 0, y: rect?.top ?? 0 }
+}
+
+// Like the popover's Clear, the rail's closes the inspector and hands focus back to the well.
+function clearRailWell() {
+  emit('well-clear', activeRack.value!.id, railWellId.value!)
+  setSelection([])
+}
+
+function assign(groupId: string | undefined) {
+  if (!activeRack.value) return
+  emit('assign', activeRack.value.id, selection.value, groupId)
+  setSelection([])
+}
+
+const hint = computed(() => {
+  if (dragMode.value) return 'Drag a filled well onto another to move or swap it.'
+  if (!props.groups) return ''
+  if (railOn.value) {
+    return inspectorOn.value
+      ? 'Click a well to edit it on the right. Drag across wells, Ctrl-click to add one or Shift-click for a range.'
+      : 'Click or drag across wells to select them.'
+  }
+  return inspectorOn.value
+    ? 'Click a well to edit it. Ctrl- or Cmd-click to select several, Shift-click for a range.'
+    : 'Click or drag across wells to select them.'
+})
+</script>
+
+<template>
+  <div
+    ref="rootRef"
+    :class="['mint-plate-editor', { 'mint-plate-editor--readonly': readonly, 'mint-plate-editor--rail': railOn }]"
+    tabindex="-1"
+    @keydown="handleRootKeydown"
+  >
+    <!-- Plate tabs -->
+    <div class="mint-plate-editor__tabbar">
+      <div class="mint-plate-editor__tabs" role="tablist" aria-label="Plates">
+        <!-- Tab and close button stay siblings; the item carries the shared underline. -->
+        <span
+          v-for="(rack, index) in modelValue"
+          :key="rack.id"
+          role="presentation"
+          :class="['mint-plate-editor__tab-item', { 'mint-plate-editor__tab-item--active': rack.id === activeRack?.id }]"
+        >
+          <button
+            :ref="(el) => setTabRef(rack.id, el)"
+            type="button"
+            role="tab"
+            :aria-selected="rack.id === activeRack?.id"
+            :tabindex="rack.id === activeRack?.id ? 0 : -1"
+            :draggable="canReorder"
+            :title="canReorder ? `${rack.name} — Alt with ← / → reorders` : undefined"
+            :class="[
+              'mint-plate-editor__tab',
+              {
+                'mint-plate-editor__tab--dragging': reorder.draggingId.value === rack.id,
+                'mint-plate-editor__tab--drag-over': reorder.dragOverId.value === rack.id,
+              },
+            ]"
+            @click="selectRack(rack.id)"
+            @keydown="handleTabKeydown($event, rack, index)"
+            @dragstart="reorder.onDragStart($event, rack, index)"
+            @dragover="reorder.onDragOver($event, rack, index)"
+            @dragleave="reorder.onDragLeave"
+            @drop="reorder.onDrop($event, rack, index)"
+            @dragend="reorder.onDragEnd"
+          >
+            <span :class="['mint-plate-editor__slot-dot', `mint-plate-editor__slot-dot--${rack.slot.toLowerCase()}`]" aria-hidden="true" />
+            {{ rack.name }}
+            <span class="mint-plate-editor__tab-count">{{ filledCount(rack) }}</span>
+          </button>
+          <button
+            v-if="rack.id === activeRack?.id && canRemove"
+            type="button"
+            class="mint-plate-editor__tab-close"
+            :aria-label="`Remove ${rack.name}`"
+            :title="`Remove ${rack.name}`"
+            @click="emit('rack-remove', rack.id)"
+          >
+            <X :size="12" aria-hidden="true" />
+          </button>
+        </span>
+      </div>
+
+      <IconButton
+        v-if="canAdd"
+        class="mint-plate-editor__add"
+        variant="ghost"
+        size="sm"
+        label="Add plate"
+        @click="emit('rack-add')"
+      >
+        <Plus :size="16" aria-hidden="true" />
+      </IconButton>
+
+      <div class="mint-plate-editor__tabbar-end">
+        <template v-if="showHistory">
+          <IconButton variant="ghost" size="sm" label="Undo" title="Undo (Ctrl+Z)" data-history="undo" :disabled="!canUndo" @click="emit('undo')">
+            <Undo2 :size="16" aria-hidden="true" />
+          </IconButton>
+          <IconButton variant="ghost" size="sm" label="Redo" title="Redo (Ctrl+Shift+Z)" data-history="redo" :disabled="!canRedo" @click="emit('redo')">
+            <Redo2 :size="16" aria-hidden="true" />
+          </IconButton>
+        </template>
+        <template v-if="!readonly && ($props.import || exportFormats.length)">
+          <span v-if="showHistory" class="mint-plate-editor__divider" aria-hidden="true" />
+          <ActionMenu v-if="exportFormats.length || ioItems.length > 1" :label="ioLabel" :items="ioItems" @select="handleIo">
+            <template #trigger="{ open, toggle, keydown }">
+              <button
+                type="button"
+                class="mint-plate-editor__action"
+                data-action="import-export"
+                aria-haspopup="menu"
+                :aria-expanded="open"
+                @click="toggle"
+                @keydown="keydown"
+              ><component :is="exportFormats.length ? Download : Upload" :size="14" aria-hidden="true" />{{ ioLabel }}</button>
+            </template>
+          </ActionMenu>
+          <button v-else type="button" class="mint-plate-editor__action" @click="handleIo(ioItems[0])">
+            <Upload :size="14" aria-hidden="true" />
+            Import
+          </button>
+          <input v-if="importFile" ref="fileInput" type="file" class="mint-plate-editor__file" :accept="importAccept" tabindex="-1" aria-hidden="true" @change="handleFile">
+        </template>
+        <slot name="tab-extra" />
+      </div>
+    </div>
+
+    <!-- Toolbar for the active plate -->
+    <div v-if="showToolbar && activeRack" class="mint-plate-editor__toolbar">
+      <div v-if="formats.length > 1" class="mint-plate-editor__field mint-plate-editor__field--format">
+        <span class="mint-plate-editor__label">Format</span>
+        <SegmentedControl
+          :model-value="activeRack.format"
+          :options="formatOptions"
+          size="sm"
+          aria-label="Format"
+          @update:model-value="emit('update:format', activeRack.id, Number($event) as WellPlateFormat)"
+        />
+      </div>
+
+      <div v-if="slotOptions.length" class="mint-plate-editor__field">
+        <span class="mint-plate-editor__label">Slot</span>
+        <div class="mint-plate-editor__slots" role="group" aria-label="Slot">
+          <button
+            v-for="slot in slotOptions"
+            :key="slot"
+            type="button"
+            :aria-pressed="activeRack.slot === slot"
+            :class="[
+              'mint-plate-editor__slot',
+              `mint-plate-editor__slot--${slot.toLowerCase()}`,
+              { 'mint-plate-editor__slot--active': activeRack.slot === slot },
+            ]"
+            @click="emit('update:slot', activeRack.id, slot)"
+          >
+            {{ slot }}
+          </button>
+        </div>
+      </div>
+
+      <div class="mint-plate-editor__toolbar-end">
+        <button
+          v-if="fillSeries"
+          type="button"
+          class="mint-plate-editor__action"
+          data-action="fill-series"
+          :disabled="isFull && fillSeriesWhenFull === 'disable'"
+          :title="isFull ? 'Plate is full' : 'Name every empty well in order'"
+          @click="emit('fill-series', activeRack.id)"
+        >
+          Fill Series
+        </button>
+        <button
+          v-if="wellDrag"
+          type="button"
+          :class="['mint-plate-editor__action', { 'mint-plate-editor__action--on': dragMode }]"
+          data-action="drag"
+          :aria-pressed="dragMode"
+          title="Drag wells to move or swap them"
+          @click="toggleDrag"
+        >
+          <Move :size="14" aria-hidden="true" />
+          Drag
+        </button>
+        <button
+          v-if="clear"
+          type="button"
+          class="mint-plate-editor__action mint-plate-editor__action--danger"
+          :disabled="isEmpty"
+          title="Clear every well on this plate"
+          @click="requestClear"
+        >
+          <Trash2 :size="14" aria-hidden="true" />
+          Clear
+        </button>
+        <slot name="toolbar-extra" />
+      </div>
+    </div>
+
+    <!-- Plate -->
+    <div v-if="activeRack" class="mint-plate-editor__body">
+      <div class="mint-plate-editor__main">
+      <!-- Keyed by rack: the Shift-click anchor and an open popover belong to one plate. -->
+      <WellPlate
+        :key="activeRack.id"
+        :model-value="selection"
+        :format="activeRack.format"
+        :wells="activeRack.wells"
+        :selection-mode="selectionMode"
+        :editable="inspectorOn && !railOn"
+        :edit-fields="wellFields || undefined"
+        :default-injection-volume="activeRack.injectionVolume"
+        :readonly="readonly"
+        :size="size"
+        :sample-colors="sampleColors"
+        :legend-items="legendItems"
+        :allow-sample-drop="Boolean(sampleDrop) && !readonly"
+        :sample-drop-parser="dropParser"
+        :show-well-labels="size !== 'xs'"
+        show-badges
+        :show-legend="!railOn"
+        @well-click="(wellId: string) => emit('well-click', activeRack!.id, wellId)"
+        @selection-change="handleSelection"
+        @well-edit="handleWellEdit"
+        @well-clear="(wellId: string) => emit('well-clear', activeRack!.id, wellId)"
+        @well-move="(source: string, target: string) => emit('well-move', activeRack!.id, source, target)"
+        @sample-drop="(wellId: string, data: WellSampleDropData, event: DragEvent) => emit('sample-drop', activeRack!.id, wellId, data, event)"
+      >
+        <template v-if="$slots['well-editor']" #well-editor="slotProps">
+          <slot name="well-editor" v-bind="slotProps" :rack="activeRack" :rack-id="activeRack.id" :inline="false" />
+        </template>
+      </WellPlate>
+
+      <!-- Selection bar, or a hint while nothing is selected -->
+      <div v-if="!readonly && (groups || wellDrag)" class="mint-plate-editor__footer">
+        <div v-if="selection.length && groups" class="mint-plate-editor__selection" role="toolbar" aria-label="Selected wells">
+          <span class="mint-plate-editor__selection-count">
+            <span class="mint-plate-editor__mono">{{ selection.length }}</span> selected
+          </span>
+          <span class="mint-plate-editor__divider" aria-hidden="true" />
+          <span class="mint-plate-editor__label">Group</span>
+          <button
+            v-for="(group, index) in groups"
+            :key="group.id"
+            type="button"
+            class="mint-plate-editor__group"
+            @click="assign(group.id)"
+          >
+            <span class="mint-plate-editor__group-swatch" :style="{ backgroundColor: groupColor(group, index) }" aria-hidden="true" />
+            {{ group.name }}
+          </button>
+          <span class="mint-plate-editor__divider" aria-hidden="true" />
+          <button
+            type="button"
+            class="mint-plate-editor__icon-action mint-plate-editor__icon-action--danger"
+            aria-label="Clear selected wells"
+            title="Clear selected wells"
+            @click="assign(undefined)"
+          >
+            <Trash2 :size="14" aria-hidden="true" />
+          </button>
+          <button
+            type="button"
+            class="mint-plate-editor__icon-action"
+            aria-label="Cancel selection"
+            title="Cancel selection (Esc)"
+            @click="setSelection([])"
+          >
+            <X :size="14" aria-hidden="true" />
+          </button>
+        </div>
+        <span v-else-if="hint" class="mint-plate-editor__hint">{{ hint }}</span>
+      </div>
+      </div>
+
+      <aside v-if="railOn" ref="railRef" class="mint-plate-editor__rail" aria-label="Plate details">
+        <template v-if="railWellId">
+          <slot
+            name="well-editor"
+            :rack="activeRack"
+            :rack-id="activeRack.id"
+            :well-id="railWellId"
+            :well-data="activeRack.wells[railWellId]"
+            :edit-fields="wellFields || []"
+            :default-injection-volume="activeRack.injectionVolume"
+            :position="railPosition()"
+            :save="(data: WellEditData) => handleWellEdit(railWellId!, data)"
+            :clear="clearRailWell"
+            :close="() => setSelection([])"
+            :inline="true"
+          >
+            <WellEditPopupInternal
+              inline
+              :well-id="railWellId"
+              :well-data="activeRack.wells[railWellId]"
+              :edit-fields="wellFields || undefined"
+              :default-injection-volume="activeRack.injectionVolume"
+              :marker-colors="sampleColors"
+              :group-label="railGroupLabel"
+              :position="{ x: 0, y: 0 }"
+              @save="handleWellEdit(railWellId!, $event)"
+              @clear="clearRailWell"
+              @close="setSelection([])"
+            />
+          </slot>
+        </template>
+        <template v-else>
+          <span class="mint-plate-editor__rail-title">{{ groups ? 'Groups' : 'Sample types' }}</span>
+          <ul class="mint-plate-editor__rail-list">
+            <li v-for="item in railItems" :key="item.type" class="mint-plate-editor__rail-row">
+              <span
+                :class="['mint-plate-editor__rail-swatch', { 'mint-plate-editor__rail-swatch--marker': !groups }]"
+                :style="item.swatch"
+                aria-hidden="true"
+              >{{ item.glyph }}</span>
+              <span class="mint-plate-editor__rail-name">{{ item.label }}</span>
+              <span class="mint-plate-editor__rail-count">{{ item.count }}</span>
+            </li>
+          </ul>
+          <button
+            v-if="groups && !readonly"
+            type="button"
+            class="mint-plate-editor__rail-add"
+            data-action="group-add"
+            @click="emit('group-add')"
+          >
+            <Plus :size="12" aria-hidden="true" />
+            New group
+          </button>
+        </template>
+      </aside>
+    </div>
+
+    <ConfirmDialog
+      v-if="clear === 'confirm'"
+      v-model="confirmOpen"
+      :title="clearConfirm?.title ?? 'Clear plate'"
+      :message="clearConfirm?.message ?? `Clear all ${activeRack ? filledCount(activeRack) : 0} wells on ${activeRack?.name ?? 'this plate'}?`"
+      :confirm-label="clearConfirm?.confirmLabel ?? 'Clear'"
+      :variant="clearConfirm?.variant"
+      @confirm="confirmClear"
+    />
+
+    <ConfirmDialog
+      v-if="importPaste"
+      v-model="pasteOpen"
+      title="Paste wells"
+      message="Paste the rows to import, e.g. copied from a spreadsheet."
+      confirm-label="Import"
+      variant="info"
+      @confirm="confirmPaste"
+    >
+      <BaseTextarea v-model="pasteText" :rows="8" aria-label="Pasted rows" />
+    </ConfirmDialog>
+
+    <div role="status" aria-live="polite" :style="reorder.announcerStyle">{{ reorder.announcement.value }}</div>
+  </div>
+</template>