@morscherlab/mint-sdk 1.2.0-beta.2 → 1.2.0-beta.20

package/src/components/DatePicker.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 /** Input that opens a calendar dropdown for selecting a single date, with clearable support. */
-import { ref, computed, watch } from 'vue'
+import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom'
+import { ref, computed, nextTick, onBeforeUnmount, watch } from 'vue'
 import { useCalendarGrid, type CalendarGridDay } from '../composables/useCalendarGrid'
 import { useDropdownState } from '../composables/useDropdownState'
-import { useEventListener } from '../composables/useEventListener'
+import { useFocusTrap } from '../composables/useFocusTrap'
 import CalendarGridPanelInternal from './internal/CalendarGridPanelInternal.vue'
 
 interface Props {
@@ -28,12 +29,14 @@ const emit = defineEmits<{
   'update:modelValue': [value: string | undefined]
 }>()
 
-const inputRef = ref<HTMLDivElement | null>(null)
-const dropdownRef = ref<HTMLDivElement | null>(null)
+const dropdownRef = ref<HTMLElement | null>(null)
 const dropdownStyle = ref<Record<string, string>>({})
-const { isOpen, rootRef: containerRef, close, toggle } = useDropdownState({
+const { isOpen, rootRef: containerRef, triggerRef, open, close, toggle } = useDropdownState({
   insideRefs: [dropdownRef],
 })
+// 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 })
 const {
   weekDays,
   monthYear,
@@ -88,41 +91,88 @@ function toggleCalendar() {
   toggle()
 }
 
-function updateDropdownPosition() {
-  if (!inputRef.value) return
-  const rect = inputRef.value.getBoundingClientRect()
+function handleTriggerKeydown(event: KeyboardEvent) {
+  if (props.disabled || isOpen.value) return
+  if (event.key === 'Enter' || event.key === ' ' || event.key === 'ArrowDown') {
+    event.preventDefault()
+    open()
+  }
+}
+
+// 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: `${rect.bottom + 4}px`,
-    left: `${rect.left}px`,
-    width: `${Math.max(rect.width, 288)}px`,
+    top: `${y}px`,
+    left: `${x}px`,
+    width: `${Math.max(trigger.getBoundingClientRect().width, 288)}px`,
     zIndex: '9999',
   }
 }
 
-function handleScrollOrResize() {
-  close()
+function stopPositioning() {
+  stopAutoUpdate?.()
+  stopAutoUpdate = null
 }
 
-watch(isOpen, (open) => {
-  if (open) {
-    updateDropdownPosition()
-    if (selectedDate.value) {
-      setCurrentMonthFromDate(selectedDate.value)
-    }
+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
+  if (!panel) return
+  const target =
+    panel.querySelector<HTMLElement>('.mint-date-picker__day--selected') ??
+    panel.querySelector<HTMLElement>('.mint-date-picker__day--today') ??
+    panel.querySelector<HTMLElement>('.mint-date-picker__day:not([disabled])')
+  target?.focus()
+}
+
+watch(isOpen, async (opened) => {
+  if (!opened) {
+    stopPositioning()
+    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()
 })
 
-useEventListener(() => window, 'scroll', handleScrollOrResize, true)
-useEventListener(() => window, 'resize', handleScrollOrResize)
+onBeforeUnmount(stopPositioning)
 </script>
 
 <template>
   <div ref="containerRef" class="mint-date-picker">
-    <div ref="inputRef" class="mint-date-picker__input-wrapper">
+    <div class="mint-date-picker__input-wrapper">
       <input
+        ref="triggerRef"
         type="text"
         readonly
+        aria-haspopup="dialog"
+        :aria-expanded="isOpen"
         :value="displayValue"
         :placeholder="placeholder || 'Select date'"
         :disabled="disabled"
@@ -133,6 +183,7 @@ useEventListener(() => window, 'resize', handleScrollOrResize)
           disabled ? 'mint-date-picker__input--disabled' : '',
         ]"
         @click="toggleCalendar"
+        @keydown="handleTriggerKeydown"
       />
       <div class="mint-date-picker__icon">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -156,7 +207,6 @@ useEventListener(() => window, 'resize', handleScrollOrResize)
           class="mint-date-picker__dropdown"
           :style="dropdownStyle"
           role="dialog"
-          aria-modal="true"
           aria-label="Date picker"
         >
           <CalendarGridPanelInternal
@@ -191,7 +241,3 @@ useEventListener(() => window, 'resize', handleScrollOrResize)
     </Teleport>
   </div>
 </template>
-
-<style>
-@import '../styles/components/date-picker.css';
-</style>

package/src/components/DateTimePicker.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 /** Combined date and time picker with a dropdown calendar, time slots, and 12/24 h format support. */
-import { computed, watch, nextTick } from 'vue'
+import { computed, ref, watch, nextTick } from 'vue'
 import { useCalendarGrid, type CalendarGridDay } from '../composables/useCalendarGrid'
 import { useDropdownState } from '../composables/useDropdownState'
+import { useFocusTrap } from '../composables/useFocusTrap'
 import { formatTime, formatTimeSlot, generateTimeSlots, toMinutes } from '../composables/useTimeUtils'
 import CalendarGridPanelInternal from './internal/CalendarGridPanelInternal.vue'
 
@@ -35,7 +36,10 @@ const emit = defineEmits<{
   'update:modelValue': [value: string | undefined]
 }>()
 
-const { isOpen, rootRef, close, toggle } = useDropdownState()
+const dropdownRef = ref<HTMLElement | null>(null)
+const { isOpen, rootRef, triggerRef, open, close, toggle } = useDropdownState()
+// Non-modal dialog: Tab stays inside the panel, focus returns to the input on close.
+useFocusTrap({ containerRef: dropdownRef, active: isOpen })
 const {
   weekDays,
   monthYear,
@@ -148,18 +152,42 @@ function toggleDropdown() {
   toggle()
 }
 
-watch(isOpen, (open) => {
-  if (open && selectedDate.value) {
+function handleTriggerKeydown(event: KeyboardEvent) {
+  if (props.disabled || isOpen.value) return
+  if (event.key === 'Enter' || event.key === ' ' || event.key === 'ArrowDown') {
+    event.preventDefault()
+    open()
+  }
+}
+
+/** Moves focus into the calendar grid: selected day, else today, else the first day. */
+function focusCalendar() {
+  const panel = dropdownRef.value
+  if (!panel) return
+  const target =
+    panel.querySelector<HTMLElement>('.mint-date-picker__day--selected') ??
+    panel.querySelector<HTMLElement>('.mint-date-picker__day--today') ??
+    panel.querySelector<HTMLElement>('.mint-date-picker__day:not([disabled])')
+  target?.focus()
+}
+
+watch(isOpen, async (opened) => {
+  if (!opened) return
+  if (selectedDate.value) {
     setCurrentMonthFromDate(selectedDate.value)
-    nextTick(() => {
-      // Scroll time grid to selected time
-      const grid = rootRef.value?.querySelector('.mint-datetime-picker__time-grid')
-      const active = rootRef.value?.querySelector('.mint-datetime-picker__time-chip--active')
-      if (grid && active) {
-        active.scrollIntoView({ block: 'center' })
-      }
-    })
   }
+  await nextTick()
+  if (selectedDate.value) {
+    // Scroll time grid to selected time
+    const grid = dropdownRef.value?.querySelector('.mint-datetime-picker__time-grid')
+    const active = dropdownRef.value?.querySelector('.mint-datetime-picker__time-chip--active')
+    if (grid && active) {
+      active.scrollIntoView({ block: 'center' })
+    }
+  }
+  // A second tick so this focus lands after the focus trap's initial focus.
+  await nextTick()
+  focusCalendar()
 })
 </script>
 
@@ -172,8 +200,11 @@ watch(isOpen, (open) => {
         </svg>
       </div>
       <input
+        ref="triggerRef"
         type="text"
         readonly
+        aria-haspopup="dialog"
+        :aria-expanded="isOpen"
         :value="displayValue"
         :placeholder="placeholder"
         :disabled="disabled"
@@ -185,6 +216,7 @@ watch(isOpen, (open) => {
         ]"
         aria-label="Select date and time"
         @click="toggleDropdown"
+        @keydown="handleTriggerKeydown"
       />
       <div class="mint-datetime-picker__icon-clock">
         <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -203,9 +235,9 @@ watch(isOpen, (open) => {
     >
       <div
         v-if="isOpen"
+        ref="dropdownRef"
         class="mint-datetime-picker__dropdown"
         role="dialog"
-        aria-modal="true"
         aria-label="Date and time picker"
       >
         <!-- Calendar section -->
@@ -265,7 +297,3 @@ watch(isOpen, (open) => {
     </Transition>
   </div>
 </template>
-
-<style>
-@import '../styles/components/datetime-picker.css';
-</style>

package/src/components/Divider.vue

@@ -43,7 +43,3 @@ withDefaults(defineProps<Props>(), {
     </template>
   </div>
 </template>
-
-<style>
-@import '../styles/components/divider.css';
-</style>

package/src/components/DoseCalculator.vue

@@ -410,7 +410,3 @@ watch(activeMode, (mode) => {
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/dose-calculator.css';
-</style>

package/src/components/DoseDesignWorkspaceView.vue

@@ -19,6 +19,7 @@ import type {
   UseControlWorkspaceReturn,
 } from '../composables/useControlSchema'
 import { defineDoseDesignControlModel } from '../composables/useControlSchema'
+import { doseDesignWorkspaceProps } from '../composables/workspaceRecipes'
 import ControlWorkspaceView from './ControlWorkspaceView.vue'
 import DoseCalculator from './DoseCalculator.vue'
 import WellPlate from './WellPlate.vue'
@@ -158,6 +159,10 @@ const resolvedModel = computed<ControlModel | ControlModelBinding>(() =>
   props.model ?? defineDoseDesignControlModel(props.doseDesignOptions)
 )
 
+// Thin recipe: forwards the ~25 props this view shares verbatim with ControlWorkspaceView
+// (see workspaceRecipes.ts) instead of spelling each one out in the template.
+const controlWorkspaceRecipe = computed(() => doseDesignWorkspaceProps(props, resolvedModel.value))
+
 function resolvedPlateId(): string {
   return props.plateId ?? props.doseDesignOptions.componentProps?.plateId ?? 'plate'
 }
@@ -200,31 +205,7 @@ function slotProps(slotProps: {
 
 <template>
   <ControlWorkspaceView
-    :model="resolvedModel"
-    :workspace="workspace"
-    :control-options="controlOptions"
-    :initial-values="initialValues"
-    :model-value="modelValue"
-    :values="values"
-    :title="title"
-    :subtitle="subtitle"
-    :top-bar-variant="topBarVariant"
-    :sidebar-width="sidebarWidth"
-    :sidebar-variant="sidebarVariant"
-    :responsive-sidebar="responsiveSidebar"
-    :sidebar-position="sidebarPosition"
-    :sidebar-title="sidebarTitle"
-    :sidebar-subtitle="sidebarSubtitle"
-    :sidebar-badge="sidebarBadge"
-    :floating="floating"
-    :dense="dense"
-    :show-settings="showSettings"
-    :show-form-actions="showFormActions"
-    :form-enhancements="formEnhancements"
-    :form-loading="formLoading"
-    :form-disabled="formDisabled"
-    :form-readonly="formReadonly"
-    :form-size="formSize"
+    v-bind="controlWorkspaceRecipe"
     @update:model-value="emit('update:modelValue', $event)"
     @update:values="emit('update:values', $event)"
     @submit="emit('submit', $event)"

package/src/components/DropdownButton.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 /** Button that opens a dropdown menu for selecting one option from a list. */
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { useDropdownState } from '../composables/useDropdownState'
+import { useMenuKeyboard } from '../composables/useMenuKeyboard'
 import type { SelectOption, SelectOptionInput, ButtonVariant, ButtonSize } from '../types'
 import { normalizeOptionInput } from '../utils/options'
 
@@ -53,11 +54,25 @@ const emit = defineEmits<{
   select: [option: SelectOption<string | number>]
 }>()
 
-const { isOpen, rootRef, close, toggle: toggleDropdown } = useDropdownState()
+const { isOpen, rootRef, triggerRef, open, close, toggle: toggleDropdown } = useDropdownState()
 const normalizedOptions = computed<SelectOption<string | number>[]>(() =>
   props.options.map(normalizeOptionInput)
 )
 
+const panelRef = ref<HTMLElement | null>(null)
+
+function optionItems(): HTMLElement[] {
+  if (!panelRef.value) return []
+  return Array.from(panelRef.value.querySelectorAll<HTMLElement>('[role="option"]:not([aria-disabled="true"])'))
+}
+
+const { handleTriggerKeydown, handlePanelKeydown } = useMenuKeyboard({
+  items: optionItems,
+  isOpen: () => isOpen.value,
+  open,
+  close,
+})
+
 const selectedLabel = computed(() => {
   if (props.modelValue === undefined) return props.placeholder ?? 'Select...'
   const found = normalizedOptions.value.find(o => o.value === props.modelValue)
@@ -80,6 +95,7 @@ function selectOption(option: SelectOption<string | number>) {
 <template>
   <div ref="rootRef" class="mint-dropdown-button">
     <button
+      ref="triggerRef"
       type="button"
       :disabled="disabled || loading"
       :class="[
@@ -94,6 +110,7 @@ function selectOption(option: SelectOption<string | number>) {
       :aria-expanded="isOpen"
       aria-haspopup="listbox"
       @click="toggle"
+      @keydown="handleTriggerKeydown"
     >
       <svg v-if="loading" class="mint-dropdown-button__spinner" viewBox="0 0 24 24" fill="none" aria-hidden="true">
         <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3" opacity="0.25" />
@@ -116,15 +133,18 @@ function selectOption(option: SelectOption<string | number>) {
     <Transition name="mint-dropdown-button-menu">
       <ul
         v-if="isOpen"
+        ref="panelRef"
         class="mint-dropdown-button__menu"
         role="listbox"
         :aria-activedescendant="modelValue !== undefined ? `mint-dropdown-option-${modelValue}` : undefined"
+        @keydown="handlePanelKeydown"
       >
         <li
           v-for="option in normalizedOptions"
           :id="`mint-dropdown-option-${option.value}`"
           :key="String(option.value)"
           role="option"
+          :tabindex="-1"
           :aria-selected="option.value === modelValue"
           :aria-disabled="option.disabled"
           :class="[
@@ -135,6 +155,8 @@ function selectOption(option: SelectOption<string | number>) {
             },
           ]"
           @click="selectOption(option)"
+          @keydown.enter.prevent="selectOption(option)"
+          @keydown.space.prevent="selectOption(option)"
         >
           <span class="mint-dropdown-button__option-label">{{ option.label }}</span>
           <span v-if="option.description" class="mint-dropdown-button__option-description">
@@ -157,7 +179,3 @@ function selectOption(option: SelectOption<string | number>) {
     </Transition>
   </div>
 </template>
-
-<style>
-@import '../styles/components/dropdown-button.css';
-</style>

package/src/components/EmptyState.vue

@@ -65,7 +65,3 @@ const defaultIconPaths = [
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/empty-state.css';
-</style>

package/src/components/ExperimentCodeBadge.vue

@@ -58,7 +58,3 @@ function handleKeydown(event: KeyboardEvent) {
     {{ copied ? 'Copied!' : code }}
   </span>
 </template>
-
-<style>
-@import '../styles/components/experiment-code-badge.css';
-</style>

package/src/components/ExperimentDataViewer.story.vue

@@ -96,6 +96,7 @@ const views = ['summary', 'tree', 'table'] as const
       <template #default="{ state }">
         <div style="padding: 1rem; max-width: 800px; margin: 0 auto;">
           <ExperimentDataViewer
+            :error="state.error || null"
             :tree-data="treeData"
             :table-data="tableData"
             :summary-data="state.showSummary ? summaryData : null"
@@ -107,6 +108,8 @@ const views = ['summary', 'tree', 'table'] as const
       </template>
 
       <template #controls="{ state }">
+
+        <HstText v-model="state.error" title="Error Message" />
         <HstSelect
           v-model="state.defaultView"
           title="Default View"

package/src/components/ExperimentDataViewer.vue

@@ -8,6 +8,7 @@ import DataFrame from './DataFrame.vue'
 import SegmentedControl from './SegmentedControl.vue'
 import BaseButton from './BaseButton.vue'
 import Skeleton from './Skeleton.vue'
+import DataStateInternal from './internal/DataStateInternal.vue'
 
 interface Props {
   treeData?: TreeNode[]
@@ -20,6 +21,11 @@ interface Props {
   pluginRoutePrefix?: string
   experimentId?: number
   loading?: boolean
+  /**
+   * Error message. When set (or when the auto-fetch fails), the content area
+   * renders an error state instead of the data views.
+   */
+  error?: string | null
   downloadJsonUrl?: string
   downloadCsvUrl?: string
   autoFetch?: boolean
@@ -29,6 +35,7 @@ const props = withDefaults(defineProps<Props>(), {
   title: 'Data',
   defaultView: 'summary',
   loading: false,
+  error: null,
   autoFetch: true,
 })
 
@@ -61,6 +68,9 @@ const mergedSummaryData = computed(() =>
 const isLoading = computed(() =>
   props.loading || expData.isLoading.value,
 )
+const activeError = computed<string | null>(() =>
+  props.error ?? expData.error.value,
+)
 
 const emit = defineEmits<{
   'open-plugin': []
@@ -179,13 +189,20 @@ function handleDownloadCsv() {
     </div>
 
     <div class="mint-data-viewer__content">
-      <div v-if="isLoading" class="mint-data-viewer__loading">
-        <div class="mint-data-viewer__skeleton">
-          <Skeleton width="40%" height="16px" />
-          <Skeleton width="100%" height="12px" />
-          <Skeleton width="100%" height="12px" />
-          <Skeleton width="75%" height="12px" />
-        </div>
+      <div v-if="activeError" class="mint-data-viewer__state">
+        <slot name="error" :error="activeError">
+          <DataStateInternal state="error" :title="activeError" />
+        </slot>
+      </div>
+      <div v-else-if="isLoading" class="mint-data-viewer__loading">
+        <slot name="loading">
+          <div class="mint-data-viewer__skeleton">
+            <Skeleton width="40%" height="16px" />
+            <Skeleton width="100%" height="12px" />
+            <Skeleton width="100%" height="12px" />
+            <Skeleton width="75%" height="12px" />
+          </div>
+        </slot>
       </div>
       <template v-else>
         <!-- Summary View -->
@@ -280,14 +297,17 @@ function handleDownloadCsv() {
           :searchable="true"
           :sortable="true"
         />
-        <div v-else-if="viewMode === 'table'" class="mint-data-viewer__empty">
-          No tabular data available. Use tree view.
+        <div v-else-if="viewMode === 'table'" class="mint-data-viewer__state">
+          <slot name="empty">
+            <DataStateInternal
+              state="empty"
+              title="No tabular data available"
+              description="Switch to the tree view to inspect this experiment."
+              size="sm"
+            />
+          </slot>
         </div>
       </template>
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/experiment-data-viewer.css';
-</style>

package/src/components/ExperimentPopover.vue

@@ -57,12 +57,20 @@ const emit = defineEmits<{
   detach: []
 }>()
 
-const { isOpen, rootRef: popoverRef, close, toggle } = useDropdownState({
+const { isOpen, rootRef: popoverRef, triggerRef, close, toggle } = useDropdownState({
   closeOnEscape: false,
 })
 const showSuccess = ref(false)
 const showConfirm = ref(false)
 
+function handleTriggerClick() {
+  if (!hasExperiment.value && !isUnresolved.value) {
+    handleSelect()
+    return
+  }
+  toggle()
+}
+
 function handleSelect() {
   emit('select')
   close()
@@ -115,9 +123,10 @@ onUnmounted(() => {
         { 'mint-experiment-popover__split--with-save': showSave && experimentName },
       ]"
     >
-      <!-- Left: experiment trigger (opens popover). Prefer the human-readable
+      <!-- Left: experiment trigger (selects when empty, otherwise opens popover). Prefer the human-readable
            name; the formal code, when present, stays in the detail panel. -->
       <button
+        ref="triggerRef"
         type="button"
         :class="[
           'mint-experiment-popover__trigger',
@@ -130,7 +139,7 @@ onUnmounted(() => {
         :aria-label="isUnresolved ? triggerLabel : undefined"
         :aria-busy="isResolving || undefined"
         :aria-expanded="isOpen"
-        @click.stop="toggle"
+        @click.stop="handleTriggerClick"
       >
         <!-- Flask icon -->
         <svg class="mint-experiment-popover__trigger-icon" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -306,7 +315,3 @@ onUnmounted(() => {
     />
   </div>
 </template>
-
-<style>
-@import '../styles/components/experiment-popover.css';
-</style>

package/src/components/ExperimentSelectorModal.vue

@@ -426,7 +426,3 @@ watch(
     </div>
   </BaseModal>
 </template>
-
-<style>
-@import '../styles/components/experiment-selector-modal.css';
-</style>

package/src/components/ExperimentTimeline.story.vue

@@ -57,6 +57,8 @@ const mockSteps: ProtocolStep[] = [
 
 function initState() {
   return {
+    loading: false,
+    error: '',
     modelValue: mockSteps,
     orientation: 'vertical' as const,
     showDuration: true,
@@ -76,6 +78,8 @@ function initState() {
       <template #default="{ state }">
         <div style="padding: 2rem; max-width: 600px;">
           <ExperimentTimeline
+            :loading="state.loading"
+            :error="state.error || null"
             v-model="state.modelValue"
             :orientation="state.orientation"
             :show-duration="state.showDuration"
@@ -89,6 +93,8 @@ function initState() {
         </div>
       </template>
       <template #controls="{ state }">
+        <HstCheckbox v-model="state.loading" title="Loading" />
+        <HstText v-model="state.error" title="Error Message" />
         <HstSelect
           v-model="state.orientation"
           title="Orientation"
@@ -157,5 +163,17 @@ function initState() {
         <ExperimentTimeline :model-value="[]" editable />
       </div>
     </Variant>
+
+    <Variant title="Loading">
+      <div style="padding: 2rem; max-width: 600px;">
+        <ExperimentTimeline :model-value="[]" loading />
+      </div>
+    </Variant>
+
+    <Variant title="Error">
+      <div style="padding: 2rem; max-width: 600px;">
+        <ExperimentTimeline :model-value="[]" error="Could not load the protocol." />
+      </div>
+    </Variant>
   </Story>
 </template>