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

package/src/components/ProtocolStepEditor.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
 /** Form for creating or editing a single protocol step (incubation, wash, addition, centrifuge, etc.) with template picker, typed parameters, and duration. */
-import { ref, computed, watch, onMounted } from 'vue'
-import type { ProtocolStep } from '../types'
-import { useDropdownState } from '../composables/useDropdownState'
+import { ref, computed, watch, onMounted, useId } from 'vue'
+import type { ProtocolStep, SelectOption } from '../types'
 import {
   useProtocolTemplates,
   type StepTemplate,
@@ -11,7 +10,12 @@ import {
   PROTOCOL_STEP_TYPE_ICONS as stepTypeIcons,
   formatProtocolDuration as formatDuration,
 } from './ProtocolStep.presentation'
+import BaseButton from './BaseButton.vue'
+import BaseInput from './BaseInput.vue'
+import BaseTextarea from './BaseTextarea.vue'
+import FormField from './FormField.vue'
 import ProtocolStepParameterField from './ProtocolStepParameterField.vue'
+import SearchableSelect from './SearchableSelect.vue'
 import {
   buildCustomProtocolTemplate,
   buildProtocolPreviewParams,
@@ -27,6 +31,10 @@ interface Props {
   customTemplates?: StepTemplate[]
   mode?: 'create' | 'edit'
   showPreview?: boolean
+  /** 1-based position of this step, shown as "3 / 7" beside the title together with stepCount. */
+  stepNumber?: number
+  /** Total steps in the protocol; the ordinal shows only when both are set. */
+  stepCount?: number
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -49,14 +57,8 @@ const {
 } = useProtocolTemplates()
 
 // State
+const fieldId = useId()
 const selectedTemplateId = ref<string | null>(null)
-const {
-  isOpen: templateDropdownOpen,
-  rootRef: templateDropdownRef,
-  triggerRef: templateTriggerRef,
-  close: closeTemplateDropdown,
-  toggle: toggleTemplateDropdown,
-} = useDropdownState()
 const stepName = ref('')
 const stepDescription = ref('')
 const stepDuration = ref<number | undefined>()
@@ -75,6 +77,10 @@ const availableTemplates = computed(() => {
   return combined
 })
 
+const templateOptions = computed<SelectOption<string>[]>(() =>
+  availableTemplates.value.map((t) => ({ value: t.id, label: t.name, description: t.description })),
+)
+
 // Selected template
 const selectedTemplate = computed(() => {
   if (!selectedTemplateId.value) return null
@@ -121,7 +127,6 @@ function initFromStep(step: ProtocolStep) {
 // Handle template selection
 function selectTemplate(template: StepTemplate) {
   selectedTemplateId.value = template.id
-  closeTemplateDropdown()
 
   // Reset to template defaults if creating new
   if (props.mode === 'create') {
@@ -129,6 +134,11 @@ function selectTemplate(template: StepTemplate) {
   }
 }
 
+function handleTemplateChange(id: string | number) {
+  const template = availableTemplates.value.find((t) => t.id === id)
+  if (template) selectTemplate(template)
+}
+
 // Handle parameter change
 function handleParamChange(key: string, value: unknown) {
   parameters.value[key] = value
@@ -183,118 +193,37 @@ watch(
 
 <template>
   <div class="mint-protocol-editor">
-    <!-- Header -->
+    <!-- Header: the mode is part of the title -->
     <div class="mint-protocol-editor__header">
       <span class="mint-protocol-editor__title">
-        {{ mode === 'create' ? 'Create Protocol Step' : 'Edit Protocol Step' }}
-      </span>
-      <span
-        :class="[
-          'mint-protocol-editor__mode-badge',
-          `mint-protocol-editor__mode-badge--${mode}`,
-        ]"
-      >
-        {{ mode }}
+        {{ mode === 'create' ? 'Create step' : 'Edit step' }}
       </span>
+      <span v-if="stepNumber && stepCount" class="mint-protocol-editor__counter">{{ stepNumber }} / {{ stepCount }}</span>
     </div>
 
     <!-- Form -->
     <div class="mint-protocol-editor__form">
-      <!-- Template selector -->
-      <div class="mint-protocol-editor__template-select">
-        <label class="mint-protocol-editor__template-label">Template</label>
-        <div ref="templateDropdownRef" class="mint-protocol-editor__template-dropdown">
-          <button
-            ref="templateTriggerRef"
-            type="button"
-            class="mint-protocol-editor__template-btn"
-            @click="toggleTemplateDropdown"
-          >
-            <svg
-              v-if="selectedTemplate"
-              class="mint-protocol-editor__template-icon"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                :d="stepTypeIcons[selectedTemplate.type]"
-              />
-            </svg>
-            <span class="mint-protocol-editor__template-text">
-              {{ selectedTemplate?.name || 'Select template...' }}
-            </span>
-            <svg
-              :class="[
-                'mint-protocol-editor__template-arrow',
-                templateDropdownOpen ? 'mint-protocol-editor__template-arrow--open' : '',
-              ]"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
-            </svg>
-          </button>
-
-          <div v-if="templateDropdownOpen" class="mint-protocol-editor__template-menu">
-            <button
-              v-for="template in availableTemplates"
-              :key="template.id"
-              type="button"
-              :class="[
-                'mint-protocol-editor__template-option',
-                selectedTemplateId === template.id ? 'mint-protocol-editor__template-option--active' : '',
-              ]"
-              @click="selectTemplate(template)"
-            >
-              <svg
-                class="mint-protocol-editor__template-option-icon"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  :d="stepTypeIcons[template.type]"
-                />
-              </svg>
-              <div class="mint-protocol-editor__template-option-text">
-                <div>{{ template.name }}</div>
-                <div v-if="template.description" class="mint-protocol-editor__template-option-desc">
-                  {{ template.description }}
-                </div>
-              </div>
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <div class="mint-protocol-editor__divider" />
+      <FormField label="Template" :field-id="`${fieldId}-template`" layout="row">
+        <SearchableSelect
+          size="sm"
+          :aria-labelledby="`${fieldId}-template-label`"
+          :model-value="selectedTemplateId ?? undefined"
+          :options="templateOptions"
+          placeholder="Select template…"
+          search-placeholder="Search templates…"
+          @update:model-value="handleTemplateChange"
+        />
+      </FormField>
 
-      <!-- Step name -->
-      <div class="mint-protocol-editor__field">
-        <label class="mint-protocol-editor__field-label mint-protocol-editor__field-label--required">
-          Step Name
-        </label>
-        <input
+      <FormField label="Step name" required :error="validationErrors.name" :html-for="`${fieldId}-name`" layout="row">
+        <BaseInput
+          :id="`${fieldId}-name`"
           v-model="stepName"
-          type="text"
-          :class="[
-            'mint-protocol-editor__input',
-            validationErrors.name ? 'mint-protocol-editor__input--error' : '',
-          ]"
+          size="sm"
           placeholder="Enter step name"
+          :error="!!validationErrors.name"
         />
-        <span v-if="validationErrors.name" class="mint-protocol-editor__field-error">
-          {{ validationErrors.name }}
-        </span>
-      </div>
+      </FormField>
 
       <!-- Dynamic parameters -->
       <template v-if="selectedTemplate">
@@ -308,16 +237,14 @@ watch(
         />
       </template>
 
-      <!-- Description -->
-      <div class="mint-protocol-editor__field">
-        <label class="mint-protocol-editor__field-label">Description</label>
-        <textarea
+      <FormField label="Description" :html-for="`${fieldId}-description`" layout="row">
+        <BaseTextarea
+          :id="`${fieldId}-description`"
           v-model="stepDescription"
-          class="mint-protocol-editor__textarea"
           placeholder="Optional step description"
-          rows="2"
+          :rows="2"
         />
-      </div>
+      </FormField>
     </div>
 
     <!-- Preview -->
@@ -348,33 +275,16 @@ watch(
 
     <!-- Actions -->
     <div class="mint-protocol-editor__actions">
-      <div class="mint-protocol-editor__actions-left">
-        <button
-          type="button"
-          class="mint-protocol-editor__btn mint-protocol-editor__btn--ghost"
-          @click="handleSaveTemplate"
-        >
-          <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4" />
-          </svg>
-          Save as Template
-        </button>
-      </div>
-      <button
-        type="button"
-        class="mint-protocol-editor__btn mint-protocol-editor__btn--secondary"
-        @click="handleCancel"
-      >
+      <BaseButton variant="ghost" size="sm" @click="handleSaveTemplate">
+        Save as template
+      </BaseButton>
+      <div class="mint-protocol-editor__actions-spacer" />
+      <BaseButton variant="secondary" size="sm" @click="handleCancel">
         Cancel
-      </button>
-      <button
-        type="button"
-        class="mint-protocol-editor__btn mint-protocol-editor__btn--primary"
-        :disabled="!selectedTemplate"
-        @click="handleSave"
-      >
-        {{ mode === 'create' ? 'Add Step' : 'Save Changes' }}
-      </button>
+      </BaseButton>
+      <BaseButton variant="primary" size="sm" :disabled="!selectedTemplate" @click="handleSave">
+        {{ mode === 'create' ? 'Add step' : 'Save changes' }}
+      </BaseButton>
     </div>
   </div>
 </template>

package/src/components/ProtocolStepParameterField.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
-/** Renders one typed parameter control for ProtocolStepEditor. */
-import { computed } from 'vue'
+/** Renders one typed parameter control for ProtocolStepEditor, composed from SDK fields. */
+import { computed, useId } from 'vue'
 import type { ParameterDefinition } from '../composables/useProtocolTemplates'
 import type { ConcentrationValue } from '../composables/useConcentrationUnits'
+import BaseInput from './BaseInput.vue'
+import BaseSelect from './BaseSelect.vue'
 import ConcentrationInput from './ConcentrationInput.vue'
+import FormField from './FormField.vue'
 
 interface Props {
   parameter: ParameterDefinition
@@ -17,6 +20,10 @@ const emit = defineEmits<{
   'update:modelValue': [value: unknown]
 }>()
 
+const controlId = useId()
+
+const isNumeric = computed(() => ['number', 'temperature', 'duration'].includes(props.parameter.type))
+
 const scalarValue = computed(() => (
   props.modelValue as string | number | undefined
 ))
@@ -25,110 +32,65 @@ const concentrationValue = computed(() => (
   props.modelValue as ConcentrationValue | undefined
 ))
 
-const hasError = computed(() => !!props.error)
-
-function handleNumberInput(event: Event) {
-  emit('update:modelValue', (event.target as HTMLInputElement).valueAsNumber)
-}
-
-function handleTextInput(event: Event) {
-  emit('update:modelValue', (event.target as HTMLInputElement).value)
-}
-
-function handleSelectChange(event: Event) {
-  emit('update:modelValue', (event.target as HTMLSelectElement).value)
-}
+const placeholder = computed(() => props.parameter.placeholder
+  || (props.parameter.type === 'reagent' ? 'Enter reagent name' : `Enter ${props.parameter.label.toLowerCase()}`))
 
-function handleConcentrationChange(value: ConcentrationValue | undefined) {
-  emit('update:modelValue', value)
+/** BaseInput reports an empty number field as null; an empty parameter is undefined. */
+function handleInput(value: string | number | null) {
+  emit('update:modelValue', value ?? undefined)
 }
 </script>
 
 <template>
-  <div class="mint-protocol-editor__field">
-    <label
-      :class="[
-        'mint-protocol-editor__field-label',
-        parameter.required ? 'mint-protocol-editor__field-label--required' : '',
-      ]"
+  <FormField
+    :label="parameter.label"
+    :required="parameter.required"
+    :error="error"
+    :html-for="controlId"
+    layout="row"
+  >
+    <BaseInput
+      v-if="isNumeric"
+      :id="controlId"
+      type="number"
+      size="sm"
+      :model-value="scalarValue"
+      :min="parameter.min"
+      :max="parameter.max"
+      :placeholder="placeholder"
+      :error="!!error"
+      @update:model-value="handleInput"
     >
-      {{ parameter.label }}
-    </label>
+      <template v-if="parameter.unit" #suffix>{{ parameter.unit }}</template>
+    </BaseInput>
 
-    <div
-      v-if="parameter.type === 'number' || parameter.type === 'temperature' || parameter.type === 'duration'"
-      class="mint-protocol-editor__input-unit"
-    >
-      <input
-        type="number"
-        :value="scalarValue"
-        :min="parameter.min"
-        :max="parameter.max"
-        :placeholder="parameter.placeholder || `Enter ${parameter.label.toLowerCase()}`"
-        :class="[
-          'mint-protocol-editor__input',
-          hasError ? 'mint-protocol-editor__input--error' : '',
-        ]"
-        @input="handleNumberInput"
-      />
-      <span v-if="parameter.unit" class="mint-protocol-editor__unit-suffix">
-        {{ parameter.unit }}
-      </span>
-    </div>
-
-    <input
-      v-else-if="parameter.type === 'text'"
-      type="text"
-      :value="scalarValue"
-      :placeholder="parameter.placeholder || `Enter ${parameter.label.toLowerCase()}`"
-      :class="[
-        'mint-protocol-editor__input',
-        hasError ? 'mint-protocol-editor__input--error' : '',
-      ]"
-      @input="handleTextInput"
-    />
-
-    <select
+    <BaseSelect
       v-else-if="parameter.type === 'select'"
-      :value="scalarValue"
-      :class="[
-        'mint-protocol-editor__select',
-        hasError ? 'mint-protocol-editor__input--error' : '',
-      ]"
-      @change="handleSelectChange"
-    >
-      <option value="" disabled>Select {{ parameter.label.toLowerCase() }}</option>
-      <option
-        v-for="option in parameter.options"
-        :key="option.value"
-        :value="option.value"
-      >
-        {{ option.label }}
-      </option>
-    </select>
+      :id="controlId"
+      size="sm"
+      :model-value="scalarValue"
+      :options="parameter.options ?? []"
+      :placeholder="`Select ${parameter.label.toLowerCase()}`"
+      :error="!!error"
+      @update:model-value="emit('update:modelValue', $event)"
+    />
 
     <ConcentrationInput
       v-else-if="parameter.type === 'concentration'"
       :model-value="concentrationValue"
-      :error="hasError"
-      size="md"
-      @update:model-value="handleConcentrationChange"
+      :error="!!error"
+      size="sm"
+      @update:model-value="emit('update:modelValue', $event)"
     />
 
-    <input
-      v-else-if="parameter.type === 'reagent'"
-      type="text"
-      :value="scalarValue"
-      :placeholder="parameter.placeholder || 'Enter reagent name'"
-      :class="[
-        'mint-protocol-editor__input',
-        hasError ? 'mint-protocol-editor__input--error' : '',
-      ]"
-      @input="handleTextInput"
+    <BaseInput
+      v-else
+      :id="controlId"
+      size="sm"
+      :model-value="scalarValue"
+      :placeholder="placeholder"
+      :error="!!error"
+      @update:model-value="handleInput"
     />
-
-    <span v-if="error" class="mint-protocol-editor__field-error">
-      {{ error }}
-    </span>
-  </div>
+  </FormField>
 </template>

package/src/components/ReagentList.presentation.ts

@@ -58,6 +58,13 @@ export function isReagentExpiringSoon(
   return daysUntilExpiry > 0 && daysUntilExpiry <= daysThreshold
 }
 
+/** Relative expiry for an expiring-soon reagent, e.g. `3 days left` (3d). */
+export function formatReagentExpiresIn(reagent: Reagent, now = new Date()): string {
+  if (!reagent.expiryDate) return ''
+  const days = Math.ceil((new Date(reagent.expiryDate).getTime() - now.getTime()) / (1000 * 60 * 60 * 24))
+  return `${days} ${days === 1 ? 'day' : 'days'} left`
+}
+
 export function isReagentLowStock(reagent: Reagent, lowStockThreshold: number): boolean {
   if (reagent.stockLevel === undefined) return false
   return reagent.stockLevel <= lowStockThreshold
@@ -73,12 +80,6 @@ export function getReagentStockLevel(reagent: Reagent): number {
   return reagent.stockLevel ?? 0
 }
 
-export function getReagentStockFillClass(level: number): string {
-  if (level >= 50) return 'mint-reagent-list__stock-fill--good'
-  if (level >= 20) return 'mint-reagent-list__stock-fill--warning'
-  return 'mint-reagent-list__stock-fill--low'
-}
-
 export function getReagentRowClasses(
   reagent: Reagent,
   options: ReagentRowClassOptions

package/src/components/ReagentList.vue

@@ -7,14 +7,16 @@ import { useSortedItems } from '../composables/useSortedItems'
 import { useTextSearch } from '../composables/useTextSearch'
 import {
   REAGENT_COLUMN_LABELS as columnLabels,
+  formatReagentExpiresIn as formatExpiresIn,
   formatReagentExpiryDate as formatExpiryDate,
   getReagentColumnValue,
   getReagentRowClasses,
-  getReagentStockFillClass as getStockFillClass,
   getReagentStockLevel as getStockLevel,
   isReagentExpired as isExpired,
   isReagentExpiringSoon as isExpiringSoon,
+  isReagentLowStock as isLowStock,
 } from './ReagentList.presentation'
+import BaseButton from './BaseButton.vue'
 import DataStateInternal from './internal/DataStateInternal.vue'
 
 /** Beaker glyph kept from the pre-1.2 hand-rolled empty state. */
@@ -197,17 +199,18 @@ function handleAdd() {
       </div>
 
       <!-- Add button -->
-      <button
+      <BaseButton
         v-if="!readonly"
-        type="button"
+        variant="secondary"
+        size="sm"
         class="mint-reagent-list__add-btn"
         @click="handleAdd"
       >
-        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
         </svg>
         Add
-      </button>
+      </BaseButton>
     </div>
 
     <!-- Table -->
@@ -318,25 +321,20 @@ function handleAdd() {
             <span v-if="isExpired(reagent)" class="mint-reagent-list__expired-text">
               {{ formatExpiryDate(reagent.expiryDate) }}
             </span>
-            <span v-else-if="isExpiringSoon(reagent)" class="mint-reagent-list__expiring-text">
-              {{ formatExpiryDate(reagent.expiryDate) }}
-            </span>
             <span v-else>
               {{ formatExpiryDate(reagent.expiryDate) }}
             </span>
 
-            <!-- Expiry badge -->
+            <!-- Expiry status: expired = error text + strike, expiring = clock + relative time (3d) -->
             <span v-if="isExpired(reagent)" class="mint-reagent-list__badge mint-reagent-list__badge--error">
-              <svg class="mint-reagent-list__badge-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-              </svg>
               Expired
             </span>
             <span v-else-if="isExpiringSoon(reagent)" class="mint-reagent-list__badge mint-reagent-list__badge--warning">
-              <svg class="mint-reagent-list__badge-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+              <svg class="mint-reagent-list__badge-icon" fill="none" stroke="currentColor" viewBox="0 0 16 16" aria-hidden="true">
+                <circle cx="8" cy="8" r="6" stroke-width="1.8" />
+                <path stroke-linecap="round" stroke-width="1.8" d="M8 5v3.5l2 1.5" />
               </svg>
-              Soon
+              {{ formatExpiresIn(reagent) }}
             </span>
           </td>
 
@@ -361,12 +359,15 @@ function handleAdd() {
             <div v-if="reagent.stockLevel !== undefined" class="mint-reagent-list__stock">
               <div class="mint-reagent-list__stock-bar">
                 <div
-                  :class="['mint-reagent-list__stock-fill', getStockFillClass(getStockLevel(reagent))]"
+                  class="mint-reagent-list__stock-fill"
                   :style="{ width: `${Math.min(100, getStockLevel(reagent))}%` }"
                 />
               </div>
               <span class="mint-reagent-list__stock-text">
-                {{ getStockLevel(reagent) }}%
+                <span v-if="isLowStock(reagent, lowStockThreshold)" class="mint-reagent-list__stock-status">
+                  <span class="mint-reagent-list__status-dot" aria-hidden="true" />Low ·
+                </span>
+                <span class="mint-reagent-list__stock-value">{{ getStockLevel(reagent) }}%</span>
               </span>
             </div>
             <span v-else class="mint-reagent-list__cell--muted">-</span>

package/src/components/SampleHierarchyTree.story.vue

@@ -93,6 +93,10 @@ function initState() {
     size: 'md' as const,
   }
 }
+
+function initSelectionState() {
+  return { selectedId: 'sample-2' as string | null }
+}
 </script>
 
 <template>
@@ -129,6 +133,21 @@ function initState() {
       </template>
     </Variant>
 
+    <Variant title="Selection" :init-state="initSelectionState">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 500px;">
+          <SampleHierarchyTree
+            v-model:selected-id="state.selectedId"
+            :nodes="mockNodes"
+            :default-expanded-ids="['study-1', 'exp-1', 'plate-1']"
+          />
+        </div>
+      </template>
+      <template #controls="{ state }">
+        <HstText v-model="state.selectedId" title="Selected id" />
+      </template>
+    </Variant>
+
     <Variant title="Expanded">
       <div style="padding: 2rem; max-width: 500px;">
         <SampleHierarchyTree