@morscherlab/mint-sdk 1.1.25 → 1.2.0-beta.10

package/src/components/SegmentedControl.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 /** Renders a segmented button group for single-option selection, with simple or solid variants. */
-import { computed } from 'vue'
+import { computed, type ComponentPublicInstance } from 'vue'
 import type { SegmentedOption, SegmentedOptionInput, SegmentedControlVariant, SegmentedControlSize } from '../types'
 import { normalizeOptionInput } from '../utils/options'
+import { useRovingFocus } from '../composables/useRovingFocus'
 
 interface Props {
   modelValue: string | number
@@ -42,11 +43,55 @@ function handleSelect(option: SegmentedOption) {
   emit('update:modelValue', option.value)
 }
 
+// Roving tabindex over the radio group: only the checked option is tabbable and
+// Left/Right (plus Home/End) move between the selectable options, matching BaseTabs.
+const optionRefs = new Map<string, HTMLElement>()
+
+function optionId(option: SegmentedOption): string {
+  return String(option.value)
+}
+
+function setOptionRef(id: string, el: Element | ComponentPublicInstance | null) {
+  if (el instanceof HTMLElement) {
+    optionRefs.set(id, el)
+  } else {
+    optionRefs.delete(id)
+  }
+}
+
+const selectableOptions = computed(() =>
+  normalizedOptions.value.filter(option => !isSelectionDisabled(option)),
+)
+
+/** The one option carrying `tabindex="0"`: the checked one, else the first selectable. */
+const tabbableId = computed(() => {
+  const checked = selectableOptions.value.find(option => option.value === props.modelValue)
+  const target = checked ?? selectableOptions.value[0]
+  return target ? optionId(target) : ''
+})
+
+function isTabbable(option: SegmentedOption): boolean {
+  return optionId(option) === tabbableId.value
+}
+
+const { handleKeydown: handleArrowKeydown } = useRovingFocus({
+  ids: () => selectableOptions.value.map(optionId),
+  activeId: () => tabbableId.value,
+  activate: (id) => {
+    const option = selectableOptions.value.find(candidate => optionId(candidate) === id)
+    if (option) handleSelect(option)
+  },
+  getElement: (id) => optionRefs.get(id),
+  orientation: 'horizontal',
+})
+
 function handleKeydown(event: KeyboardEvent, option: SegmentedOption) {
   if (event.key === 'Enter' || event.key === ' ') {
     event.preventDefault()
     handleSelect(option)
+    return
   }
+  handleArrowKeydown(event)
 }
 </script>
 
@@ -64,9 +109,11 @@ function handleKeydown(event: KeyboardEvent, option: SegmentedOption) {
     <button
       v-for="option in normalizedOptions"
       :key="String(option.value)"
+      :ref="(el) => setOptionRef(String(option.value), el)"
       type="button"
       role="radio"
       :aria-checked="modelValue === option.value"
+      :tabindex="isTabbable(option) ? 0 : -1"
       :disabled="isSelectionDisabled(option)"
       :class="[
         'mint-segmented-control__option',
@@ -88,7 +135,3 @@ function handleKeydown(event: KeyboardEvent, option: SegmentedOption) {
     </button>
   </div>
 </template>
-
-<style>
-@import '../styles/components/segmented-control.css';
-</style>

package/src/components/SequenceInput.vue

@@ -203,7 +203,3 @@ function getBaseClass(char: string): string {
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/sequence-input.css';
-</style>

package/src/components/SequenceProgressBar.story.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import SequenceProgressBar from './SequenceProgressBar.vue'
+import type { SequenceProgress } from '../types'
+
+const running: SequenceProgress = {
+  sequence_name: 'HILIC-neg-2026-09-05',
+  current_sample: 37,
+  total_samples: 96,
+  elapsed_seconds: 4_260,
+  estimated_remaining_seconds: 6_780,
+  avg_sample_seconds: 115,
+  current_sample_name: 'PLASMA_QC_04',
+  current_method: 'HILIC_neg_12min',
+}
+
+const almostDone: SequenceProgress = {
+  ...running,
+  current_sample: 94,
+  estimated_remaining_seconds: 230,
+}
+
+const finished: SequenceProgress = {
+  ...running,
+  current_sample: 96,
+  estimated_remaining_seconds: 0,
+}
+
+const justStarted: SequenceProgress = {
+  sequence_name: 'RP-pos-batch-7',
+  current_sample: 1,
+  total_samples: 384,
+}
+
+function initState() {
+  return {
+    current: 37,
+    total: 96,
+    remaining: 6780,
+    compact: false,
+    showEta: true,
+    showRemaining: true,
+    label: 'samples',
+  }
+}
+</script>
+
+<template>
+  <Story title="Workflow/SequenceProgressBar">
+    <Variant title="Playground" :init-state="initState">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 600px;">
+          <SequenceProgressBar
+            :progress="{
+              sequence_name: 'HILIC-neg-2026-09-05',
+              current_sample: state.current,
+              total_samples: state.total,
+              estimated_remaining_seconds: state.remaining,
+            }"
+            :compact="state.compact"
+            :label="state.label"
+            :show-eta="state.showEta"
+            :show-remaining="state.showRemaining"
+          />
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstNumber v-model="state.current" title="Current sample" />
+        <HstNumber v-model="state.total" title="Total samples" />
+        <HstNumber v-model="state.remaining" title="Remaining (s)" />
+        <HstText v-model="state.label" title="Unit label" />
+        <HstCheckbox v-model="state.compact" title="Compact" />
+        <HstCheckbox v-model="state.showEta" title="Show ETA" />
+        <HstCheckbox v-model="state.showRemaining" title="Show remaining" />
+      </template>
+    </Variant>
+
+    <Variant title="Mid-run">
+      <div style="padding: 2rem; max-width: 600px;">
+        <SequenceProgressBar :progress="running" />
+      </div>
+    </Variant>
+
+    <Variant title="Compact (no footer)">
+      <!-- Compact drops the remaining/ETA row for dense instrument tables. -->
+      <div style="padding: 2rem; max-width: 600px;">
+        <SequenceProgressBar :progress="running" compact />
+      </div>
+    </Variant>
+
+    <Variant title="Nearly finished">
+      <div style="padding: 2rem; max-width: 600px;">
+        <SequenceProgressBar :progress="almostDone" />
+      </div>
+    </Variant>
+
+    <Variant title="Complete">
+      <div style="padding: 2rem; max-width: 600px;">
+        <SequenceProgressBar :progress="finished" />
+      </div>
+    </Variant>
+
+    <Variant title="Queued — no timing yet">
+      <!-- Without timing fields the footer collapses on its own. -->
+      <div style="padding: 2rem; max-width: 600px;">
+        <SequenceProgressBar :progress="justStarted" label="injections" />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/SequenceProgressBar.vue

@@ -65,7 +65,3 @@ const hasFooter = computed(() => {
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/sequence-progress-bar.css';
-</style>

package/src/components/SettingsModal.vue

@@ -393,7 +393,3 @@ function canShowForCurrentUser(item: AccessControlled): boolean {
     </template>
   </BaseModal>
 </template>
-
-<style>
-@import '../styles/components/settings-modal.css';
-</style>

package/src/components/Skeleton.vue

@@ -68,7 +68,3 @@ const classes = computed(() => {
 <template>
   <div :class="classes" :style="style" />
 </template>
-
-<style>
-@import '../styles/components/skeleton.css';
-</style>

package/src/components/SmartGroupFieldRecipe.vue

@@ -144,8 +144,13 @@ function onDrop(event: DragEvent) {
 // CSV action menu — reuses the SDK's dropdown state (outside-click / Escape
 // close) but renders a compact action menu in the .fr-* styling, since the
 // items are actions (upload / download), not a persistent value selection.
-const { isOpen: csvMenuOpen, rootRef: csvMenuRoot, close: closeCsvMenu, toggle: toggleCsvMenu } =
-  useDropdownState()
+const {
+  isOpen: csvMenuOpen,
+  rootRef: csvMenuRoot,
+  triggerRef: csvMenuTrigger,
+  close: closeCsvMenu,
+  toggle: toggleCsvMenu,
+} = useDropdownState()
 
 function chooseUpload() {
   closeCsvMenu()
@@ -294,6 +299,7 @@ function onApply() {
       <div class="sg-head__spacer" />
       <div ref="csvMenuRoot" class="fr-csv">
         <button
+          ref="csvMenuTrigger"
           type="button"
           class="fr-upload"
           aria-haspopup="menu"
@@ -493,7 +499,3 @@ function onApply() {
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/smart-group.css';
-</style>

package/src/components/SmartGroupManual.vue

@@ -392,7 +392,3 @@ function onDone() {
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/smart-group.css';
-</style>

package/src/components/StatusIndicator.vue

@@ -34,7 +34,3 @@ const dotStyle = computed(() =>
     <span v-if="label" class="mint-status__label">{{ label }}</span>
   </span>
 </template>
-
-<style>
-@import '../styles/components/status-indicator.css';
-</style>

package/src/components/StepWizard.vue

@@ -217,7 +217,3 @@ defineExpose({ setStepValid })
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/step-wizard.css';
-</style>

package/src/components/TagsInput.vue

@@ -44,11 +44,13 @@ const emit = defineEmits<{
 }>()
 
 const inputValue = ref('')
-const inputRef = ref<HTMLInputElement>()
 const highlightedIndex = ref(-1)
+// The text input doubles as the dropdown trigger, so focus restoration is the
+// composable's `triggerRef` rather than a component-local refocus helper.
 const {
   isOpen: dropdownOpen,
   rootRef,
+  triggerRef: inputRef,
   open: openDropdown,
   close: closeDropdown,
 } = useDropdownState({
@@ -129,7 +131,7 @@ function handleKeydown(event: KeyboardEvent) {
     return
   }
   if (event.key === 'Escape') {
-    closeDropdown()
+    closeDropdown(true)
     return
   }
   if (event.key === 'Backspace' && !inputValue.value && props.modelValue.length > 0) {
@@ -274,7 +276,3 @@ function onInputEvent() {
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/tags-input.css';
-</style>

package/src/components/ThemeToggle.vue

@@ -50,7 +50,3 @@ const { isDark, toggleTheme } = useTheme()
     </svg>
   </IconButton>
 </template>
-
-<style>
-@import '../styles/components/theme-toggle.css';
-</style>

package/src/components/TimePicker.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 /** Input that opens a scrollable time-slot dropdown in 12h or 24h format, with min/max range. */
-import { ref, computed, watch, nextTick } from 'vue'
+import { ref, computed, watch, nextTick, useId } from 'vue'
 import { useDropdownState } from '../composables/useDropdownState'
 import {
   compareTime,
@@ -38,7 +38,15 @@ const emit = defineEmits<{
 
 const listRef = ref<HTMLUListElement | null>(null)
 const highlightedIndex = ref(-1)
-const { isOpen, rootRef, open, close, toggle } = useDropdownState()
+const listboxId = `mint-time-picker-listbox-${useId().replace(/:/g, '')}`
+const { isOpen, rootRef, triggerRef, open, close, toggle } = useDropdownState()
+
+/** Id of the highlighted slot, published to the input as `aria-activedescendant`. */
+const activeSlotId = computed(() =>
+  isOpen.value && highlightedIndex.value >= 0
+    ? `${listboxId}-option-${highlightedIndex.value}`
+    : undefined,
+)
 
 const slots = computed(() => {
   const start = props.min ?? '00:00'
@@ -134,9 +142,29 @@ function handleKeydown(event: KeyboardEvent) {
       }
       break
     }
+    case 'Home': {
+      event.preventDefault()
+      const first = slots.value.findIndex(slot => !isSlotDisabled(slot))
+      if (first >= 0) {
+        highlightedIndex.value = first
+        scrollToHighlighted()
+      }
+      break
+    }
+    case 'End': {
+      event.preventDefault()
+      for (let index = slots.value.length - 1; index >= 0; index--) {
+        if (!isSlotDisabled(slots.value[index])) {
+          highlightedIndex.value = index
+          scrollToHighlighted()
+          break
+        }
+      }
+      break
+    }
     case 'Escape': {
       event.preventDefault()
-      close()
+      close(true)
       break
     }
   }
@@ -172,6 +200,7 @@ watch(isOpen, (open) => {
   <div ref="rootRef" class="mint-time-picker" @keydown="handleKeydown">
     <div class="mint-time-picker__input-wrapper">
       <input
+        ref="triggerRef"
         type="text"
         readonly
         :value="displayValue"
@@ -186,6 +215,8 @@ watch(isOpen, (open) => {
         role="combobox"
         aria-haspopup="listbox"
         :aria-expanded="isOpen"
+        :aria-controls="isOpen ? listboxId : undefined"
+        :aria-activedescendant="activeSlotId"
         @click="toggleDropdown"
       />
       <button
@@ -219,6 +250,7 @@ watch(isOpen, (open) => {
         class="mint-time-picker__dropdown"
       >
         <ul
+          :id="listboxId"
           ref="listRef"
           class="mint-time-picker__list"
           role="listbox"
@@ -226,6 +258,7 @@ watch(isOpen, (open) => {
         >
           <li
             v-for="(slot, index) in slots"
+            :id="`${listboxId}-option-${index}`"
             :key="slot"
             role="option"
             :aria-selected="slot === modelValue"
@@ -245,7 +278,3 @@ watch(isOpen, (open) => {
     </Transition>
   </div>
 </template>
-
-<style>
-@import '../styles/components/time-picker.css';
-</style>

package/src/components/TimeRangeInput.vue

@@ -116,7 +116,3 @@ function onEndChange(value: string | undefined) {
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/time-range-input.css';
-</style>

package/src/components/Tooltip.story.vue

@@ -55,15 +55,15 @@ const positions: ('top' | 'bottom' | 'left' | 'right')[] = ['top', 'bottom', 'le
         <p style="margin: 0;">
           The experiment used
           <Tooltip text="Dimethyl sulfoxide - a polar aprotic solvent" position="top" :delay="100">
-            <span style="text-decoration: underline dotted; cursor: help; color: var(--mint-primary, #3B82F6);">DMSO</span>
+            <span style="text-decoration: underline dotted; cursor: help; color: var(--color-primary);">DMSO</span>
           </Tooltip>
           as the vehicle control. Samples were incubated at
           <Tooltip text="Standard mammalian cell culture temperature" position="top" :delay="100">
-            <span style="text-decoration: underline dotted; cursor: help; color: var(--mint-primary, #3B82F6);">37 C</span>
+            <span style="text-decoration: underline dotted; cursor: help; color: var(--color-primary);">37 C</span>
           </Tooltip>
           for 24 hours before
           <Tooltip text="3-(4,5-dimethylthiazol-2-yl)-2,5-diphenyltetrazolium bromide" position="top" :delay="100">
-            <span style="text-decoration: underline dotted; cursor: help; color: var(--mint-primary, #3B82F6);">MTT</span>
+            <span style="text-decoration: underline dotted; cursor: help; color: var(--color-primary);">MTT</span>
           </Tooltip>
           assay readout.
         </p>

package/src/components/Tooltip.vue

@@ -108,7 +108,3 @@ function resolvedMaxWidth(value: string | number | undefined): string | undefine
     </Teleport>
   </span>
 </template>
-
-<style>
-@import '../styles/components/tooltip.css';
-</style>

package/src/components/UnitInput.vue

@@ -211,7 +211,3 @@ watch(conversionHint, (hint) => {
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/unit-input.css';
-</style>

package/src/components/WellPlate.geometry.ts

@@ -37,8 +37,67 @@ export const WELL_PLATE_SIZE_CONFIGS: Record<WellPlateSize, WellPlateSizeConfig>
   fill: { cellWidth: '100%', cellHeight: '32px', headerWidth: '32px', headerHeight: '24px', fontSize: '0.75rem', gap: '2px' },
 }
 
+/**
+ * Spreadsheet-style row label for a zero-based row index: A…Z, then AA, AB, …
+ *
+ * This is the single row-label generator for the SDK — plate grids, rack
+ * grids, well-id parsing and the template builders all go through it.
+ */
+export function rowLabel(index: number): string {
+  let label = ''
+  let current = index
+  for (;;) {
+    label = String.fromCharCode(65 + (current % 26)) + label
+    current = Math.floor(current / 26) - 1
+    if (current < 0) return label
+  }
+}
+
+/** Inverse of {@link rowLabel}: 'A' → 0, 'Z' → 25, 'AA' → 26. */
+export function rowIndex(label: string): number {
+  return [...label].reduce((value, char) => value * 26 + char.charCodeAt(0) - 64, 0) - 1
+}
+
 export function createPlateRowLabels(config: WellPlateConfig): string[] {
-  return Array.from({ length: config.rows }, (_, index) => String.fromCharCode(65 + index))
+  return Array.from({ length: config.rows }, (_, index) => rowLabel(index))
+}
+
+function plateConfigOrThrow(format: number): WellPlateConfig {
+  const config = PLATE_CONFIGS[format as WellPlateFormat]
+  if (!config) throw new Error(`Unsupported plate format '${format}'.`)
+  return config
+}
+
+/** Every well id of a plate, row-major (A1, A2, … B1, …). */
+export function wellIdsForFormat(format: number): string[] {
+  const { rows, cols } = plateConfigOrThrow(format)
+  return Array.from({ length: rows }, (_, row) =>
+    Array.from({ length: cols }, (_col, col) => `${rowLabel(row)}${col + 1}`)
+  ).flat()
+}
+
+/** Throw unless `wellId` names a well that exists on a `format`-well plate. */
+export function assertWellInFormat(wellId: string, format: number): void {
+  const { rows, cols } = plateConfigOrThrow(format)
+  const match = /^([A-Z]+)([1-9][0-9]*)$/.exec(wellId.toUpperCase())
+  if (!match) {
+    throw new Error(`Invalid well id '${wellId}'.`)
+  }
+  const row = rowIndex(match[1])
+  const col = Number(match[2]) - 1
+  if (row < 0 || col < 0 || row >= rows || col >= cols) {
+    throw new Error(`Well '${wellId}' is outside a ${format}-well plate.`)
+  }
+}
+
+/** Coerce an unknown value to a supported plate format, else `fallback`. */
+export function readPlateFormat(value: unknown, fallback: WellPlateFormat): WellPlateFormat {
+  const parsed = typeof value === 'number'
+    ? value
+    : typeof value === 'string'
+      ? Number(value)
+      : Number.NaN
+  return parsed in PLATE_CONFIGS ? (parsed as WellPlateFormat) : fallback
 }
 
 export function createPlateColumnLabels(config: WellPlateConfig): number[] {

package/src/components/WellPlate.interaction.ts

@@ -11,6 +11,7 @@ import {
   type WellPlateCoordinate,
 } from './WellPlate.geometry'
 import { parseDroppedSampleTransfer } from './WellPlate.sampleDrop'
+import { useReorderAnnouncer } from '../composables/useListReorder'
 
 export interface WellPlateInteractionOptions {
   modelValue: () => string[]
@@ -64,6 +65,7 @@ export function useWellPlateInteraction(options: WellPlateInteractionOptions) {
   const hoveredWell = ref<string | null>(null)
   const editingWellId = ref<string | null>(null)
   const editPopupPosition = ref({ x: 0, y: 0 })
+  const { announcement, announce, announcerStyle } = useReorderAnnouncer()
 
   const selectedWellSet = computed(() => new Set(options.modelValue()))
 
@@ -215,6 +217,45 @@ export function useWellPlateInteraction(options: WellPlateInteractionOptions) {
     dragTargetWell.value = null
   }
 
+  // Keyboard alternative to the well-to-well drag. The plate is a 2D grid, not a
+  // list, so it cannot use `useListReorder`'s index maths: instead Alt+Enter (or
+  // Alt+Space) picks a filled well up, the same chord on another well drops it
+  // there, and Escape cancels. Every step is announced politely.
+  function handleWellMoveKeydown(well: Well, event: KeyboardEvent) {
+    if (options.disabled() || options.readonly() || options.selectionMode() !== 'drag') return
+
+    if (event.key === 'Escape' && dragSourceWell.value) {
+      event.preventDefault()
+      announce(`Move cancelled. ${dragSourceWell.value} stays in place.`)
+      dragSourceWell.value = null
+      dragTargetWell.value = null
+      return
+    }
+
+    if (!event.altKey || (event.key !== 'Enter' && event.key !== ' ')) return
+    event.preventDefault()
+
+    const source = dragSourceWell.value
+    if (!source) {
+      if (!well.sampleType) {
+        announce(`Well ${well.id} is empty and cannot be moved.`)
+        return
+      }
+      dragSourceWell.value = well.id
+      announce(`Well ${well.id} picked up. Move to another well and press Alt and Enter to drop it.`)
+      return
+    }
+
+    if (source !== well.id) {
+      options.emitWellMove(source, well.id)
+      announce(`Well ${source} moved to ${well.id}.`)
+    } else {
+      announce(`Move cancelled. ${source} stays in place.`)
+    }
+    dragSourceWell.value = null
+    dragTargetWell.value = null
+  }
+
   function parseDroppedSample(event: DragEvent, wellId: string): WellSampleDropData | null {
     const customParser = options.sampleDropParser()
     if (customParser) return customParser(event, { wellId, event }) ?? null
@@ -267,6 +308,9 @@ export function useWellPlateInteraction(options: WellPlateInteractionOptions) {
     handleDragLeave,
     handleDrop,
     handleDragEnd,
+    handleWellMoveKeydown,
     handleKeyDown,
+    moveAnnouncement: announcement,
+    moveAnnouncerStyle: announcerStyle,
   }
 }

package/src/components/WellPlate.story.vue

@@ -121,6 +121,8 @@ const doseWells = generateDoseWells()
 
 function initState() {
   return {
+    loading: false,
+    error: '',
     format: 96 as WellPlateFormat,
     selectionMode: 'multiple' as WellPlateSelectionMode,
     size: 'md' as WellPlateSize,
@@ -141,6 +143,8 @@ function initState() {
       <template #default="{ state }">
         <div style="padding: 2rem;">
           <WellPlate
+            :loading="state.loading"
+            :error="state.error || null"
             v-model="selectedWells"
             :format="state.format"
             :wells="generateMockWells(state.format)"
@@ -161,6 +165,10 @@ function initState() {
       </template>
 
       <template #controls="{ state }">
+
+        <HstCheckbox v-model="state.loading" title="Loading" />
+
+        <HstText v-model="state.error" title="Error Message" />
         <HstSelect
           v-model="state.format"
           title="Format"