@morscherlab/mint-sdk 1.0.0-beta.7 → 1.0.0-rc.2

package/src/components/SegmentedControl.vue

@@ -11,6 +11,7 @@ interface Props {
   size?: SegmentedControlSize
   fullWidth?: boolean
   disabled?: boolean
+  disabledValues?: Array<string | number>
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -18,6 +19,7 @@ const props = withDefaults(defineProps<Props>(), {
   size: 'md',
   fullWidth: false,
   disabled: false,
+  disabledValues: () => [],
 })
 
 const emit = defineEmits<{
@@ -25,9 +27,18 @@ const emit = defineEmits<{
 }>()
 
 const normalizedOptions = computed<SegmentedOption[]>(() => props.options.map(normalizeOptionInput))
+const disabledValueSet = computed(() => new Set(props.disabledValues))
+
+function isOptionDisabled(option: SegmentedOption) {
+  return option.disabled === true || disabledValueSet.value.has(option.value)
+}
+
+function isSelectionDisabled(option: SegmentedOption) {
+  return props.disabled || isOptionDisabled(option)
+}
 
 function handleSelect(option: SegmentedOption) {
-  if (props.disabled || option.disabled) return
+  if (isSelectionDisabled(option)) return
   emit('update:modelValue', option.value)
 }
 
@@ -56,13 +67,13 @@ function handleKeydown(event: KeyboardEvent, option: SegmentedOption) {
       type="button"
       role="radio"
       :aria-checked="modelValue === option.value"
-      :disabled="disabled || option.disabled"
+      :disabled="isSelectionDisabled(option)"
       :class="[
         'mint-segmented-control__option',
         `mint-segmented-control__option--${variant}`,
         `mint-segmented-control__option--${size}`,
         modelValue === option.value ? 'mint-segmented-control__option--active' : '',
-        option.disabled ? 'mint-segmented-control__option--disabled' : '',
+        isOptionDisabled(option) ? 'mint-segmented-control__option--disabled' : '',
       ]"
       @click="handleSelect(option)"
       @keydown="handleKeydown($event, option)"

package/src/components/SequenceProgressBar.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+/** Displays LC/MS or GC/MS acquisition sequence progress with ETA and remaining-time labels. */
+import { computed } from 'vue'
+import {
+  formatSequenceEta,
+  formatSequenceRemaining,
+  sequenceProgressPercent,
+} from '../instrument'
+import type { SequenceProgress } from '../types'
+import ProgressBar from './ProgressBar.vue'
+
+interface Props {
+  progress: SequenceProgress
+  compact?: boolean
+  label?: string
+  showEta?: boolean
+  showRemaining?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  compact: false,
+  label: 'samples',
+  showEta: true,
+  showRemaining: true,
+})
+
+const percent = computed(() => sequenceProgressPercent(props.progress))
+const remainingLabel = computed(() => formatSequenceRemaining(props.progress))
+const etaLabel = computed(() => formatSequenceEta(props.progress))
+const hasFooter = computed(() => {
+  if (props.compact) return false
+  return (props.showRemaining && remainingLabel.value) || (props.showEta && etaLabel.value)
+})
+</script>
+
+<template>
+  <div class="mint-sequence-progress">
+    <div class="mint-sequence-progress__header">
+      <span class="mint-sequence-progress__label">
+        {{ progress.current_sample }} / {{ progress.total_samples }} {{ label }}
+      </span>
+      <span class="mint-sequence-progress__percent">{{ percent }}%</span>
+    </div>
+
+    <ProgressBar
+      :value="percent"
+      color="info"
+      size="sm"
+      aria-label="Sequence progress"
+    />
+
+    <div v-if="hasFooter" class="mint-sequence-progress__footer">
+      <span
+        v-if="showRemaining && remainingLabel"
+        class="mint-sequence-progress__remaining"
+      >
+        {{ remainingLabel }}
+      </span>
+      <span
+        v-if="showEta && etaLabel"
+        class="mint-sequence-progress__eta"
+      >
+        ETA {{ etaLabel }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/sequence-progress-bar.css';
+</style>

package/src/components/SettingsModal.vue

@@ -32,6 +32,9 @@ import {
   type ControlWorkspaceOptions,
 } from '../composables/useControlSchema'
 import { useSettingsStore, colorPalettes } from '../stores/settings'
+import { useAuthStore } from '../stores/auth'
+import { usePlatformContext } from '../composables/usePlatformContext'
+import { canAccessByPolicy } from '../permissions'
 import {
   formSchemaFieldNames,
   pickExistingRecordKeys,
@@ -46,10 +49,12 @@ import type {
   SettingsTabInput,
   SettingsModalLayout,
   SettingsModalSchema,
+  SettingsUserType,
   FormSchema,
   FormSectionSchema,
   FormEnhancements,
 } from '../types'
+import type { AccessControlled, PermissionUser } from '../permissions'
 import { normalizeItemInput } from '../utils/items'
 
 // Map our settings groups onto the form-builder's flat-section shape.
@@ -86,6 +91,8 @@ interface Props {
   values?: Record<string, unknown>
   /** Optional dynamic enhancements (validators, dynamic options, callbacks). */
   enhancements?: FormEnhancements<Record<string, unknown>>
+  /** Optional user type override for permission-filtered settings content. Defaults to SDK auth/platform context. */
+  userType?: SettingsUserType
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -104,6 +111,8 @@ const emit = defineEmits<{
 }>()
 
 const settings = useSettingsStore()
+const auth = useAuthStore()
+const { user: platformUser } = usePlatformContext()
 
 const APPEARANCE_TAB_ID = 'appearance'
 
@@ -130,13 +139,34 @@ const resolvedControls = computed<ControlSchema | undefined>(() =>
 const resolvedControlOptions = computed<ControlWorkspaceOptions>(() =>
   mergeControlWorkspaceOptions(resolvedModel.value?.controlOptions ?? {}, props.controlOptions)
 )
-const settingsSchema = computed<SettingsModalSchema | undefined>(() =>
+const sourceSettingsSchema = computed<SettingsModalSchema | undefined>(() =>
   props.schema ?? (
     resolvedControls.value
       ? controlsToSettingsSchema(resolvedControls.value, resolvedControlOptions.value)
       : undefined
   ),
 )
+const currentAccessUser = computed<PermissionUser | null>(() => {
+  if (props.userType) {
+    return { role: props.userType === 'admin' ? 'admin' : 'user' }
+  }
+  return auth.userInfo ?? platformUser.value ?? null
+})
+const isAccessUserAuthenticated = computed(() =>
+  props.userType !== undefined || auth.isAuthenticated || !!platformUser.value,
+)
+const settingsSchema = computed<SettingsModalSchema | undefined>(() => {
+  if (!sourceSettingsSchema.value) return undefined
+  const groups = sourceSettingsSchema.value.groups.flatMap((group) => {
+    if (!canShowForCurrentUser(group)) return []
+
+    const fields = group.fields.filter(canShowForCurrentUser)
+    if (fields.length === 0) return []
+
+    return [{ ...group, fields }]
+  })
+  return { groups }
+})
 const isSchemaDriven = computed(() => !!settingsSchema.value)
 const resolvedValues = computed<Record<string, unknown>>(() => ({
   ...(resolvedControlOptions.value.initialValues ?? {}),
@@ -201,7 +231,9 @@ const visibleSchemaGroups = computed(() =>
     : [],
 )
 
-const manualTabs = computed<SettingsTab[]>(() => props.tabs.map(normalizeItemInput))
+const manualTabs = computed<SettingsTab[]>(() =>
+  props.tabs.map(normalizeItemInput).filter(canShowForCurrentUser)
+)
 
 const allTabs = computed<SettingsTab[]>(() => {
   const base: SettingsTab[] = settingsSchema.value
@@ -256,6 +288,14 @@ function builderFieldNames(): string[] {
 function isControlModelBinding(model: ControlModel | ControlModelBinding): model is ControlModelBinding {
   return 'controls' in model && 'controlOptions' in model
 }
+
+function canShowForCurrentUser(item: AccessControlled): boolean {
+  return canAccessByPolicy(
+    currentAccessUser.value,
+    item,
+    isAccessUserAuthenticated.value,
+  )
+}
 </script>
 
 <template>
@@ -416,6 +456,13 @@ function isControlModelBinding(model: ControlModel | ControlModelBinding): model
         </div>
       </component>
     </div>
+    <div v-if="$slots.footer" class="mint-settings-modal__footer">
+      <slot
+        name="footer"
+        :values="builder.form.data"
+        :close="handleClose"
+      />
+    </div>
   </BaseModal>
 </template>
 

package/src/components/UnitInput.vue

@@ -47,8 +47,12 @@ const groupedUnits = computed(() => {
   const ungrouped: UnitOption[] = []
   for (const u of props.units) {
     if (u.group) {
-      if (!groups.has(u.group)) groups.set(u.group, [])
-      groups.get(u.group)!.push(u)
+      const group = groups.get(u.group)
+      if (group) {
+        group.push(u)
+      } else {
+        groups.set(u.group, [u])
+      }
     } else {
       ungrouped.push(u)
     }

package/src/components/WellPlate.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 /** Interactive 96/384-well plate grid with drag-to-select, heatmap overlays, per-well editing, and sample-color mapping. */
 import { ref, computed } from 'vue'
-import type { WellPlateFormat, WellPlateSelectionMode, WellPlateSize, Well, HeatmapConfig, WellShape, WellEditField, WellEditData, WellLegendItem, ColumnCondition, RowCondition } from '../types'
+import type { WellPlateFormat, WellPlateSelectionMode, WellPlateSize, Well, HeatmapConfig, WellShape, WellEditField, WellEditData, WellLegendItem, ColumnCondition, RowCondition, WellSampleDropData, WellSampleDropParser } from '../types'
 import { useEventListener } from '../composables/useEventListener'
 import WellEditPopupInternal from './internal/WellEditPopupInternal.vue'
 
@@ -29,6 +29,8 @@ interface Props {
   legendItems?: WellLegendItem[]
   columnConditions?: ColumnCondition[]
   rowConditions?: RowCondition[]
+  allowSampleDrop?: boolean
+  sampleDropParser?: WellSampleDropParser
 }
 
 // Drag state for moving wells
@@ -59,6 +61,8 @@ const props = withDefaults(defineProps<Props>(), {
   legendItems: undefined,
   columnConditions: () => [],
   rowConditions: () => [],
+  allowSampleDrop: false,
+  sampleDropParser: undefined,
 })
 
 const emit = defineEmits<{
@@ -70,6 +74,22 @@ const emit = defineEmits<{
   'well-move': [sourceWellId: string, targetWellId: string]
   'well-edit': [wellId: string, data: WellEditData]
   'well-clear': [wellId: string]
+  'sample-drop': [wellId: string, data: WellSampleDropData, event: DragEvent]
+}>()
+
+interface WellEditorSlotProps {
+  wellId: string
+  wellData?: Partial<Well>
+  editFields: WellEditField[]
+  defaultInjectionVolume: number
+  position: { x: number; y: number }
+  save: (data: WellEditData) => void
+  clear: () => void
+  close: () => void
+}
+
+defineSlots<{
+  'well-editor'?: (props: WellEditorSlotProps) => unknown
 }>()
 
 const plateRef = ref<HTMLElement | null>(null)
@@ -164,6 +184,7 @@ const defaultLegendItems: WellLegendItem[] = [
   { type: 'sample', label: 'Sample', color: '#10b981' },
   { type: 'blank', label: 'Blank', color: '#f97316' },
   { type: 'qc', label: 'QC', color: '#8b5cf6' },
+  { type: 'iqc', label: 'IQC', color: '#ec4899' },
 ]
 
 const activeLegendItems = computed(() => props.legendItems ?? defaultLegendItems)
@@ -285,6 +306,7 @@ const defaultSampleTypeColors: Record<string, { bg: string; border: string }> =
   control: { bg: 'rgba(59, 130, 246, 0.15)', border: 'rgba(59, 130, 246, 0.4)' },
   blank: { bg: 'rgba(249, 115, 22, 0.15)', border: 'rgba(249, 115, 22, 0.4)' },
   qc: { bg: 'rgba(139, 92, 246, 0.15)', border: 'rgba(139, 92, 246, 0.4)' },
+  iqc: { bg: 'rgba(236, 72, 153, 0.15)', border: 'rgba(236, 72, 153, 0.4)' },
 }
 
 const heatmapColors: Record<string, string[]> = {
@@ -373,6 +395,7 @@ function getSampleTypeIndicator(well: Well): string | null {
     control: 'C',
     blank: 'B',
     qc: 'Q',
+    iqc: 'I',
   }
   return typeMap[well.sampleType] || well.sampleType.charAt(0).toUpperCase()
 }
@@ -511,10 +534,12 @@ function handleDragStart(well: Well, event: DragEvent) {
 }
 
 function handleDragOver(well: Well, event: DragEvent) {
-  if (props.selectionMode !== 'drag' || !dragSourceWell.value) return
+  const isMovingWell = props.selectionMode === 'drag' && !!dragSourceWell.value
+  if (!isMovingWell && !props.allowSampleDrop) return
+
   event.preventDefault()
   if (event.dataTransfer) {
-    event.dataTransfer.dropEffect = 'move'
+    event.dataTransfer.dropEffect = isMovingWell ? 'move' : 'copy'
   }
   dragTargetWell.value = well.id
 }
@@ -524,14 +549,27 @@ function handleDragLeave() {
 }
 
 function handleDrop(well: Well, event: DragEvent) {
+  const isMovingWell = props.selectionMode === 'drag' && !!dragSourceWell.value
+  if (!isMovingWell && !props.allowSampleDrop) return
+
   event.preventDefault()
-  if (props.selectionMode !== 'drag' || !dragSourceWell.value) return
 
-  const sourceId = dragSourceWell.value
-  const targetId = well.id
+  if (isMovingWell && dragSourceWell.value) {
+    const sourceId = dragSourceWell.value
+    const targetId = well.id
+
+    if (sourceId !== targetId) {
+      emit('well-move', sourceId, targetId)
+    }
 
-  if (sourceId !== targetId) {
-    emit('well-move', sourceId, targetId)
+    dragSourceWell.value = null
+    dragTargetWell.value = null
+    return
+  }
+
+  const droppedSample = parseDroppedSample(event, well.id)
+  if (droppedSample) {
+    emit('sample-drop', well.id, droppedSample, event)
   }
 
   dragSourceWell.value = null
@@ -543,6 +581,76 @@ function handleDragEnd() {
   dragTargetWell.value = null
 }
 
+function parseDroppedSample(event: DragEvent, wellId: string): WellSampleDropData | null {
+  if (props.sampleDropParser) {
+    return props.sampleDropParser(event, { wellId, event }) ?? null
+  }
+
+  const transfer = event.dataTransfer
+  if (!transfer) return null
+
+  const json = transfer.getData('application/json') || transfer.getData('text/json')
+  if (json) {
+    try {
+      return normalizeDroppedSample(JSON.parse(json))
+    } catch {
+      return null
+    }
+  }
+
+  const text = transfer.getData('text/plain')?.trim()
+  if (!text) return null
+  return {
+    sampleName: text,
+    label: text,
+    raw: text,
+  }
+}
+
+function normalizeDroppedSample(raw: unknown): WellSampleDropData | null {
+  if (!raw || typeof raw !== 'object') return null
+
+  const record = raw as Record<string, unknown>
+  const sampleName =
+    getString(record.sampleName) ??
+    getString(record.sample_name) ??
+    getString(record.name) ??
+    getString(record.label)
+  const label = getString(record.label) ?? sampleName
+  const sampleType =
+    getString(record.sampleType) ??
+    getString(record.sample_type) ??
+    (record.type === 'sample' ? 'sample' : undefined)
+
+  if (!sampleName && !label && !getString(record.id)) return null
+
+  return {
+    id: getString(record.id),
+    sampleName,
+    label,
+    sampleType,
+    injectionVolume: getNumber(record.injectionVolume ?? record.injection_volume),
+    injectionCount: getNumber(record.injectionCount ?? record.injection_count),
+    customMethod: getString(record.customMethod ?? record.custom_method) ?? null,
+    metadata: getRecord(record.metadata),
+    raw,
+  }
+}
+
+function getString(value: unknown): string | undefined {
+  return typeof value === 'string' && value.trim() ? value.trim() : undefined
+}
+
+function getNumber(value: unknown): number | undefined {
+  return typeof value === 'number' && Number.isFinite(value) ? value : undefined
+}
+
+function getRecord(value: unknown): Record<string, unknown> | undefined {
+  return value && typeof value === 'object' && !Array.isArray(value)
+    ? value as Record<string, unknown>
+    : undefined
+}
+
 function handleKeyDown(event: KeyboardEvent) {
   if (props.disabled || props.readonly) return
 
@@ -726,9 +834,9 @@ const tableStyle = computed(() => ({
                 @mouseleave="handleWellMouseLeave"
                 @contextmenu="handleContextMenu(well, $event)"
                 @dragstart="handleDragStart(well, $event)"
-                @dragover.prevent="handleDragOver(well, $event)"
+                @dragover="handleDragOver(well, $event)"
                 @dragleave="handleDragLeave"
-                @drop.prevent="handleDrop(well, $event)"
+                @drop="handleDrop(well, $event)"
                 @dragend="handleDragEnd"
                 @keydown.enter="handleWellClick(well, $event as unknown as MouseEvent)"
                 @keydown.space.prevent="handleWellClick(well, $event as unknown as MouseEvent)"
@@ -759,10 +867,10 @@ const tableStyle = computed(() => ({
                 <span
                   v-if="getWellBadge(well)"
                   class="mint-well-plate__badge"
-                  :style="{ backgroundColor: getWellBadge(well)!.color }"
-                  :title="getWellBadge(well)!.text === '+' ? 'Custom method' : `${getWellBadge(well)!.text}x injections`"
+                  :style="{ backgroundColor: getWellBadge(well)?.color }"
+                  :title="getWellBadge(well)?.text === '+' ? 'Custom method' : `${getWellBadge(well)?.text ?? ''}x injections`"
                 >
-                  {{ getWellBadge(well)!.text }}
+                  {{ getWellBadge(well)?.text }}
                 </span>
               </div>
             </td>
@@ -805,17 +913,30 @@ const tableStyle = computed(() => ({
     </div>
 
     <!-- Edit popup -->
-    <WellEditPopupInternal
-      v-if="editable && editingWellId"
-      :well-id="editingWellId"
-      :well-data="wells[editingWellId]"
-      :edit-fields="editFields"
-      :default-injection-volume="defaultInjectionVolume"
-      :position="editPopupPosition"
-      @save="handleEditSave"
-      @clear="handleEditClear"
-      @close="handleEditClose"
-    />
+    <template v-if="editable && editingWellId">
+      <slot
+        name="well-editor"
+        :well-id="editingWellId"
+        :well-data="wells[editingWellId]"
+        :edit-fields="editFields"
+        :default-injection-volume="defaultInjectionVolume"
+        :position="editPopupPosition"
+        :save="handleEditSave"
+        :clear="handleEditClear"
+        :close="handleEditClose"
+      >
+        <WellEditPopupInternal
+          :well-id="editingWellId"
+          :well-data="wells[editingWellId]"
+          :edit-fields="editFields"
+          :default-injection-volume="defaultInjectionVolume"
+          :position="editPopupPosition"
+          @save="handleEditSave"
+          @clear="handleEditClear"
+          @close="handleEditClose"
+        />
+      </slot>
+    </template>
   </div>
 </template>
 

package/src/components/index.ts

@@ -89,6 +89,11 @@ export { default as ProtocolStepEditor } from './ProtocolStepEditor.vue'
 // Scientific display components
 export { default as ScientificNumber } from './ScientificNumber.vue'
 export { default as ChemicalFormula } from './ChemicalFormula.vue'
+export { default as SequenceProgressBar } from './SequenceProgressBar.vue'
+export { default as InstrumentAlertLog } from './InstrumentAlertLog.vue'
+export { default as InstrumentStateBadge } from './InstrumentStateBadge.vue'
+export { default as InstrumentStatusCard } from './InstrumentStatusCard.vue'
+export { default as LcmsSequenceTable } from './LcmsSequenceTable.vue'
 
 // Scientific input components
 export { default as FormulaInput } from './FormulaInput.vue'

package/src/components/internal/WellEditPopupInternal.vue

@@ -90,6 +90,7 @@ const sampleTypeButtons = [
   { type: 'sample', label: 'S', tooltip: 'Sample' },
   { type: 'blank', label: 'B', tooltip: 'Blank' },
   { type: 'qc', label: 'Q', tooltip: 'QC' },
+  { type: 'iqc', label: 'I', tooltip: 'IQC' },
 ]
 </script>