@morscherlab/mint-sdk 1.2.0-beta.7 → 1.2.0-beta.9

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/DropdownButton.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 /** Button that opens a dropdown menu for selecting one option from a list. */
-import { computed, nextTick, ref } 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'
@@ -54,12 +54,11 @@ const emit = defineEmits<{
   select: [option: SelectOption<string | number>]
 }>()
 
-const { isOpen, rootRef, open, close: closeDropdown, toggle: toggleDropdown } = useDropdownState()
+const { isOpen, rootRef, triggerRef, open, close, toggle: toggleDropdown } = useDropdownState()
 const normalizedOptions = computed<SelectOption<string | number>[]>(() =>
   props.options.map(normalizeOptionInput)
 )
 
-const triggerRef = ref<HTMLElement | null>(null)
 const panelRef = ref<HTMLElement | null>(null)
 
 function optionItems(): HTMLElement[] {
@@ -67,13 +66,6 @@ function optionItems(): HTMLElement[] {
   return Array.from(panelRef.value.querySelectorAll<HTMLElement>('[role="option"]:not([aria-disabled="true"])'))
 }
 
-function close(returnFocus = false) {
-  closeDropdown()
-  if (returnFocus) {
-    void nextTick(() => triggerRef.value?.focus())
-  }
-}
-
 const { handleTriggerKeydown, handlePanelKeydown } = useMenuKeyboard({
   items: optionItems,
   isOpen: () => isOpen.value,
@@ -187,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,7 +57,7 @@ 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)
@@ -118,6 +118,7 @@ onUnmounted(() => {
       <!-- Left: experiment trigger (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',
@@ -306,7 +307,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>

package/src/components/ExperimentTimeline.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
 /** Horizontal or vertical timeline of ordered protocol steps with status indicators, drag-to-reorder, and step-type iconography. */
-import { ref, computed } from 'vue'
+import { ref, computed, type ComponentPublicInstance } from 'vue'
 import type { ProtocolStep, ProtocolStepStatus } from '../types'
+import { useListReorder } from '../composables/useListReorder'
 import {
   PROTOCOL_STEP_TYPE_COLORS as stepTypeColors,
   PROTOCOL_STEP_TYPE_ICONS as stepTypeIcons,
   formatProtocolDuration as formatDuration,
 } from './ProtocolStep.presentation'
+import DataStateInternal from './internal/DataStateInternal.vue'
 
 interface Props {
   modelValue?: ProtocolStep[]
@@ -19,6 +21,13 @@ interface Props {
   size?: 'sm' | 'md' | 'lg'
   colorByStatus?: boolean
   colorByType?: boolean
+  /** Replace the timeline with a loading placeholder. */
+  loading?: boolean
+  /**
+   * Error message. When set, the timeline is replaced by an error state.
+   * `null`/`undefined` renders normally.
+   */
+  error?: string | null
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -32,6 +41,8 @@ const props = withDefaults(defineProps<Props>(), {
   size: 'md',
   colorByStatus: true,
   colorByType: false,
+  loading: false,
+  error: null,
 })
 
 const emit = defineEmits<{
@@ -46,8 +57,7 @@ const emit = defineEmits<{
 }>()
 
 const localExpandedId = ref<string | undefined>(props.expandedStepId)
-const draggedStepId = ref<string | null>(null)
-const dragOverStepId = ref<string | null>(null)
+const stepRefs = new Map<string, HTMLElement>()
 
 const expandedId = computed({
   get: () => props.expandedStepId ?? localExpandedId.value,
@@ -123,54 +133,38 @@ function handleAddStep(afterStepId?: string) {
   emit('step-add', afterStepId)
 }
 
-function handleDragStart(event: DragEvent, step: ProtocolStep) {
-  if (!props.editable) return
-  draggedStepId.value = step.id
-  if (event.dataTransfer) {
-    event.dataTransfer.effectAllowed = 'move'
-    event.dataTransfer.setData('text/plain', step.id)
-  }
-}
-
-function handleDragOver(event: DragEvent, step: ProtocolStep) {
-  if (!props.editable || !draggedStepId.value) return
-  event.preventDefault()
-  dragOverStepId.value = step.id
-}
-
-function handleDragLeave() {
-  dragOverStepId.value = null
-}
-
-function handleDrop(event: DragEvent, targetStep: ProtocolStep) {
-  if (!props.editable || !draggedStepId.value) return
-  event.preventDefault()
+// Steps are a plain ordered list, so pointer drag and the Alt+Arrow keyboard
+// alternative both come from the shared reorder composable.
+const {
+  draggingId: draggedStepId,
+  dragOverId: dragOverStepId,
+  announcement: reorderAnnouncement,
+  announcerStyle,
+  onDragStart: onStepDragStart,
+  onDragOver: onStepDragOver,
+  onDragLeave: onStepDragLeave,
+  onDrop: onStepDrop,
+  onDragEnd: onStepDragEnd,
+  onKeydown: onStepReorderKeydown,
+} = useListReorder<ProtocolStep>({
+  items: () => sortedSteps.value,
+  getId: (step) => step.id,
+  getLabel: (step) => step.name,
+  disabled: () => !props.editable,
+  getElement: (id) => stepRefs.get(id),
+  itemNoun: 'Step',
+  onReorder: ({ toIndex, items }) => {
+    emit('step-reorder', items[toIndex].id, toIndex)
+    emit('update:modelValue', items.map((step, index) => ({ ...step, order: index })))
+  },
+})
 
-  const draggedStep = props.modelValue.find(s => s.id === draggedStepId.value)
-  if (!draggedStep || draggedStep.id === targetStep.id) {
-    draggedStepId.value = null
-    dragOverStepId.value = null
-    return
+function setStepRef(id: string, el: Element | ComponentPublicInstance | null) {
+  if (el instanceof HTMLElement) {
+    stepRefs.set(id, el)
+  } else {
+    stepRefs.delete(id)
   }
-
-  const steps = [...props.modelValue]
-  const draggedIndex = steps.findIndex(s => s.id === draggedStepId.value)
-  const targetIndex = steps.findIndex(s => s.id === targetStep.id)
-
-  steps.splice(draggedIndex, 1)
-  steps.splice(targetIndex, 0, draggedStep)
-
-  const reordered = steps.map((s, i) => ({ ...s, order: i }))
-  emit('step-reorder', draggedStepId.value, targetIndex)
-  emit('update:modelValue', reordered)
-
-  draggedStepId.value = null
-  dragOverStepId.value = null
-}
-
-function handleDragEnd() {
-  draggedStepId.value = null
-  dragOverStepId.value = null
 }
 
 </script>
@@ -182,16 +176,22 @@ function handleDragEnd() {
     :aria-label="`Protocol timeline with ${sortedSteps.length} steps`"
   >
     <div
-      v-for="(step, index) in sortedSteps"
+      v-for="(step, index) in (loading || error ? [] : sortedSteps)"
       :key="step.id"
+      :ref="(el) => setStepRef(step.id, el)"
       class="mint-timeline__step"
       role="listitem"
       :draggable="editable"
-      @dragstart="handleDragStart($event, step)"
-      @dragover="handleDragOver($event, step)"
-      @dragleave="handleDragLeave"
-      @drop="handleDrop($event, step)"
-      @dragend="handleDragEnd"
+      :tabindex="editable ? 0 : undefined"
+      :aria-label="editable
+        ? `${step.name}, step ${index + 1} of ${sortedSteps.length}. Press Alt with the arrow keys to reorder.`
+        : undefined"
+      @dragstart="onStepDragStart($event, step, index)"
+      @dragover="onStepDragOver($event, step, index)"
+      @dragleave="onStepDragLeave"
+      @drop="onStepDrop($event, step, index)"
+      @dragend="onStepDragEnd"
+      @keydown="onStepReorderKeydown($event, step, index)"
     >
       <div
         v-if="index < sortedSteps.length - 1"
@@ -321,25 +321,32 @@ function handleDragEnd() {
       <div v-if="orientation === 'horizontal' && index < sortedSteps.length - 1" class="mint-timeline__spacer--horizontal" />
     </div>
 
-    <div
-      v-if="sortedSteps.length === 0"
-      class="mint-timeline__empty"
-    >
-      <div class="mint-timeline__empty-content">
-        <p class="mint-timeline__empty-text">No protocol steps defined</p>
-        <button
-          v-if="editable"
-          type="button"
-          class="mint-timeline__empty-btn"
-          @click="handleAddStep()"
-        >
-          Add First Step
-        </button>
-      </div>
+    <div v-if="error" class="mint-timeline__state">
+      <slot name="error" :error="error">
+        <DataStateInternal state="error" size="sm" :title="error" />
+      </slot>
+    </div>
+
+    <div v-else-if="loading" class="mint-timeline__state">
+      <slot name="loading">
+        <DataStateInternal state="loading" size="sm" loading-label="Loading protocol" />
+      </slot>
+    </div>
+
+    <div v-else-if="sortedSteps.length === 0" class="mint-timeline__state">
+      <slot name="empty">
+        <DataStateInternal
+          state="empty"
+          size="sm"
+          title="No protocol steps defined"
+          :action-label="editable ? 'Add First Step' : undefined"
+          @action="handleAddStep()"
+        />
+      </slot>
     </div>
 
     <button
-      v-if="editable && sortedSteps.length > 0"
+      v-if="editable && !loading && !error && sortedSteps.length > 0"
       type="button"
       :class="['mint-timeline__add-end', `mint-timeline__add-end--${size}`]"
       @click="handleAddStep()"
@@ -349,9 +356,8 @@ function handleDragEnd() {
       </svg>
       <span :class="`mint-timeline__add-end-text--${size}`">Add Step</span>
     </button>
+
+    <!-- Reorder announcements for screen readers -->
+    <div role="status" aria-live="polite" :style="announcerStyle">{{ reorderAnnouncement }}</div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/experiment-timeline.css';
-</style>

package/src/components/FileUploader.vue

@@ -418,7 +418,3 @@ function formatFileSize(bytes: number): string {
     </TransitionGroup>
   </div>
 </template>
-
-<style>
-@import '../styles/components/file-uploader.css';
-</style>

package/src/components/FitPanel.vue

@@ -114,7 +114,3 @@ function variantClass(variant?: string): string {
     <slot name="footer" />
   </div>
 </template>
-
-<style>
-@import '../styles/components/fit-panel.css';
-</style>