@morscherlab/mint-sdk 1.2.0-beta.1 → 1.2.0-beta.11

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>

package/src/components/FormActions.story.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import FormActions from './FormActions.vue'
+
+function log(event: string) {
+  return () => console.log(event)
+}
+
+function initState() {
+  return {
+    isWizard: false,
+    isFirst: true,
+    isLast: true,
+    canProceed: true,
+    loading: false,
+    disabled: false,
+    showCancel: true,
+    submitLabel: 'Submit',
+    cancelLabel: 'Cancel',
+  }
+}
+</script>
+
+<template>
+  <Story title="Forms/FormActions">
+    <Variant title="Playground" :init-state="initState">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 600px;">
+          <FormActions
+            :is-wizard="state.isWizard"
+            :is-first="state.isFirst"
+            :is-last="state.isLast"
+            :can-proceed="state.canProceed"
+            :loading="state.loading"
+            :disabled="state.disabled"
+            :show-cancel="state.showCancel"
+            :submit-label="state.submitLabel"
+            :cancel-label="state.cancelLabel"
+            @submit="log('submit')()"
+            @cancel="log('cancel')()"
+            @back="log('back')()"
+            @next="log('next')()"
+          />
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstCheckbox v-model="state.isWizard" title="Wizard mode" />
+        <HstCheckbox v-model="state.isFirst" title="First step" />
+        <HstCheckbox v-model="state.isLast" title="Last step" />
+        <HstCheckbox v-model="state.canProceed" title="Can proceed" />
+        <HstCheckbox v-model="state.loading" title="Loading" />
+        <HstCheckbox v-model="state.disabled" title="Disabled" />
+        <HstCheckbox v-model="state.showCancel" title="Show cancel" />
+        <HstText v-model="state.submitLabel" title="Submit label" />
+        <HstText v-model="state.cancelLabel" title="Cancel label" />
+      </template>
+    </Variant>
+
+    <Variant title="Flat form">
+      <div style="padding: 2rem; max-width: 600px;">
+        <FormActions show-cancel submit-label="Save design" />
+      </div>
+    </Variant>
+
+    <Variant title="Wizard — first step">
+      <!-- Back is hidden on the first step; Next gates on `canProceed`. -->
+      <div style="padding: 2rem; max-width: 600px;">
+        <FormActions is-wizard :is-first="true" :is-last="false" />
+      </div>
+    </Variant>
+
+    <Variant title="Wizard — middle step">
+      <div style="padding: 2rem; max-width: 600px;">
+        <FormActions is-wizard :is-first="false" :is-last="false" />
+      </div>
+    </Variant>
+
+    <Variant title="Wizard — last step">
+      <div style="padding: 2rem; max-width: 600px;">
+        <FormActions is-wizard :is-first="false" :is-last="true" submit-label="Create experiment" />
+      </div>
+    </Variant>
+
+    <Variant title="Blocked by validation">
+      <div style="padding: 2rem; max-width: 600px;">
+        <FormActions is-wizard :is-first="false" :is-last="false" :can-proceed="false" />
+      </div>
+    </Variant>
+
+    <Variant title="Loading">
+      <div style="padding: 2rem; max-width: 600px;">
+        <FormActions show-cancel loading submit-label="Saving…" />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/FormActions.vue

@@ -86,7 +86,3 @@ const emit = defineEmits<{
     </BaseButton>
   </div>
 </template>
-
-<style>
-@import '../styles/components/form-builder.css';
-</style>

package/src/components/FormBuilder.vue

@@ -305,7 +305,3 @@ defineExpose({
     </template>
   </div>
 </template>
-
-<style>
-@import '../styles/components/form-builder.css';
-</style>

package/src/components/FormField.vue

@@ -53,7 +53,3 @@ const describedBy = computed(() => errorId.value ?? hintId.value)
     </p>
   </div>
 </template>
-
-<style>
-@import '../styles/components/form-field.css';
-</style>

package/src/components/FormulaInput.vue

@@ -119,7 +119,3 @@ function handleInput(event: Event) {
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/formula-input.css';
-</style>

package/src/components/GeneratedPathInput.story.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import GeneratedPathInput from './GeneratedPathInput.vue'
+import type { PluginJobPathInput } from '../types/generated-ui'
+
+const single = ref<PluginJobPathInput | PluginJobPathInput[] | null>(null)
+const multiple = ref<PluginJobPathInput | PluginJobPathInput[] | null>([])
+
+function describe(value: PluginJobPathInput | PluginJobPathInput[] | null): string {
+  if (!value) return 'nothing selected'
+  const selections = Array.isArray(value) ? value : [value]
+  if (!selections.length) return 'nothing selected'
+  return selections
+    .map(selection => selection.rootName ?? selection.relativePaths.join(', '))
+    .join(' · ')
+}
+
+function initState() {
+  return {
+    multiple: false,
+    disabled: false,
+  }
+}
+</script>
+
+<template>
+  <Story title="Forms/GeneratedPathInput">
+    <Variant title="Playground" :init-state="initState">
+      <template #default="{ state }">
+        <!-- Outside an integrated plugin the "Existing artifact" button is
+             hidden, so the story shows the file/folder modes only. -->
+        <div style="padding: 2rem; max-width: 600px;">
+          <GeneratedPathInput
+            v-model="single"
+            :multiple="state.multiple"
+            :disabled="state.disabled"
+          />
+          <p style="margin-top: 1rem; font-size: 0.8125rem; color: var(--text-secondary);">
+            Selection: <code>{{ describe(single) }}</code>
+          </p>
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstCheckbox v-model="state.multiple" title="Allow multiple" />
+        <HstCheckbox v-model="state.disabled" title="Disabled" />
+      </template>
+    </Variant>
+
+    <Variant title="Single path">
+      <div style="padding: 2rem; max-width: 600px;">
+        <GeneratedPathInput v-model="single" />
+      </div>
+    </Variant>
+
+    <Variant title="Multiple paths">
+      <div style="padding: 2rem; max-width: 600px;">
+        <GeneratedPathInput v-model="multiple" multiple />
+      </div>
+    </Variant>
+
+    <Variant title="Disabled">
+      <div style="padding: 2rem; max-width: 600px;">
+        <GeneratedPathInput v-model="single" disabled />
+      </div>
+    </Variant>
+  </Story>
+</template>