@morscherlab/mint-sdk 1.0.0-beta.2 → 1.0.0-beta.3

package/src/components/GroupingModal.vue

@@ -1,422 +1,61 @@
 <!-- @deprecated Use AutoGroupModal instead -->
 <script setup lang="ts">
-/** @deprecated CSV-based sample grouping modal; use AutoGroupModal instead. */
-import { ref, computed, watch } from 'vue'
-import BaseModal from './BaseModal.vue'
-import BaseButton from './BaseButton.vue'
-import BaseSelect from './BaseSelect.vue'
-import type { SelectOption } from '../types'
+/** @deprecated Compatibility wrapper for the legacy CSV grouping API. Use AutoGroupModal instead. */
+import AutoGroupModal from './AutoGroupModal.vue'
+import type { AutoGroupResult } from '../types/auto-group'
 
 interface Props {
   open: boolean
   samples: string[]
 }
 
-interface ParsedRow {
-  [key: string]: string
-}
-
-const props = defineProps<Props>()
+defineProps<Props>()
 
 const emit = defineEmits<{
   close: []
   apply: [mapping: Record<string, string[]>, columns: string[]]
 }>()
 
-const csvFile = ref<File | null>(null)
-const csvData = ref<ParsedRow[]>([])
-const csvColumns = ref<string[]>([])
-const sampleColumn = ref<string>('')
-const groupColumns = ref<string[]>([])
-const isDragOver = ref(false)
-const parseError = ref<string | null>(null)
-
-const columnOptions = computed<SelectOption[]>(() =>
-  csvColumns.value.map(col => ({ value: col, label: col }))
-)
-
-const availableGroupColumns = computed<SelectOption[]>(() =>
-  csvColumns.value
-    .filter(col => col !== sampleColumn.value && !groupColumns.value.includes(col))
-    .map(col => ({ value: col, label: col }))
-)
-
-const matchedSamples = computed(() => {
-  if (!sampleColumn.value || csvData.value.length === 0) return []
-  const csvSampleValues = csvData.value.map(row => row[sampleColumn.value])
-  return props.samples.filter(sample => csvSampleValues.includes(sample))
-})
-
-const unmatchedSamples = computed(() => {
-  if (!sampleColumn.value || csvData.value.length === 0) return []
-  const csvSampleValues = csvData.value.map(row => row[sampleColumn.value])
-  return props.samples.filter(sample => !csvSampleValues.includes(sample))
-})
-
-const previewData = computed(() => {
-  if (csvData.value.length === 0) return []
-  return csvData.value.slice(0, 5)
-})
-
-const canApply = computed(() =>
-  sampleColumn.value &&
-  groupColumns.value.length > 0 &&
-  matchedSamples.value.length > 0
-)
+let closeEmittedFromApply = false
 
-watch(() => props.open, (isOpen) => {
-  if (!isOpen) {
-    resetState()
-  }
-})
-
-function resetState() {
-  csvFile.value = null
-  csvData.value = []
-  csvColumns.value = []
-  sampleColumn.value = ''
-  groupColumns.value = []
-  parseError.value = null
-}
-
-function handleDrop(event: DragEvent) {
-  event.preventDefault()
-  isDragOver.value = false
-  const files = event.dataTransfer?.files
-  if (files && files.length > 0) {
-    handleFile(files[0])
-  }
-}
-
-function handleFileInput(event: Event) {
-  const target = event.target as HTMLInputElement
-  if (target.files && target.files.length > 0) {
-    handleFile(target.files[0])
-  }
-}
-
-async function handleFile(file: File) {
-  if (!file.name.endsWith('.csv')) {
-    parseError.value = 'Please upload a CSV file'
-    return
-  }
-
-  csvFile.value = file
-  parseError.value = null
-
-  try {
-    const text = await file.text()
-    parseCSV(text)
-  } catch {
-    parseError.value = 'Failed to read file'
-  }
+function handleApply(result: AutoGroupResult) {
+  emit('apply', groupsToLegacyMapping(result), metadataColumns(result))
+  closeEmittedFromApply = true
+  emit('close')
 }
 
-function parseCSV(text: string) {
-  const lines = text.trim().split('\n')
-  if (lines.length < 2) {
-    parseError.value = 'CSV must have at least a header and one data row'
+function handleOpenChange(isOpen: boolean) {
+  if (isOpen) return
+  if (closeEmittedFromApply) {
+    closeEmittedFromApply = false
     return
   }
-
-  const headers = parseCSVLine(lines[0])
-  csvColumns.value = headers
-
-  const data: ParsedRow[] = []
-  for (let i = 1; i < lines.length; i++) {
-    const values = parseCSVLine(lines[i])
-    if (values.length !== headers.length) continue
-
-    const row: ParsedRow = {}
-    headers.forEach((header, idx) => {
-      row[header] = values[idx]
-    })
-    data.push(row)
-  }
-
-  csvData.value = data
-
-  // Auto-select sample column if there's a likely match
-  const sampleColGuess = headers.find(h =>
-    h.toLowerCase().includes('sample') ||
-    h.toLowerCase().includes('name') ||
-    h.toLowerCase().includes('id')
-  )
-  if (sampleColGuess) {
-    sampleColumn.value = sampleColGuess
-  }
-}
-
-function parseCSVLine(line: string): string[] {
-  const result: string[] = []
-  let current = ''
-  let inQuotes = false
-
-  for (let i = 0; i < line.length; i++) {
-    const char = line[i]
-    if (char === '"') {
-      inQuotes = !inQuotes
-    } else if (char === ',' && !inQuotes) {
-      result.push(current.trim())
-      current = ''
-    } else {
-      current += char
-    }
-  }
-  result.push(current.trim())
-
-  return result
-}
-
-function addGroupColumn(column: string) {
-  if (column && !groupColumns.value.includes(column)) {
-    groupColumns.value.push(column)
-  }
-}
-
-function removeGroupColumn(column: string) {
-  groupColumns.value = groupColumns.value.filter(c => c !== column)
+  emit('close')
 }
 
-function moveGroupColumn(index: number, direction: 'up' | 'down') {
-  const newIndex = direction === 'up' ? index - 1 : index + 1
-  if (newIndex < 0 || newIndex >= groupColumns.value.length) return
-
-  const cols = [...groupColumns.value]
-  const temp = cols[index]
-  cols[index] = cols[newIndex]
-  cols[newIndex] = temp
-  groupColumns.value = cols
+function groupsToLegacyMapping(result: AutoGroupResult): Record<string, string[]> {
+  return Object.fromEntries(result.groups.map(group => [group.name, group.samples]))
 }
 
-function applyGrouping() {
-  if (!canApply.value) return
-
-  const mapping: Record<string, string[]> = {}
-
-  for (const row of csvData.value) {
-    const sampleName = row[sampleColumn.value]
-    if (!props.samples.includes(sampleName)) continue
-
-    // Build hierarchical group key
-    const groupKey = groupColumns.value.map(col => row[col]).join(' / ')
-
-    if (!mapping[groupKey]) {
-      mapping[groupKey] = []
+function metadataColumns(result: AutoGroupResult): string[] {
+  const columns: string[] = []
+  const seen = new Set<string>()
+  for (const row of result.metadata) {
+    for (const column of Object.keys(row.fields)) {
+      if (seen.has(column)) continue
+      seen.add(column)
+      columns.push(column)
     }
-    mapping[groupKey].push(sampleName)
   }
-
-  emit('apply', mapping, groupColumns.value)
-  emit('close')
-}
-
-function close() {
-  emit('close')
+  return columns
 }
 </script>
 
 <template>
-  <BaseModal
+  <AutoGroupModal
     :model-value="open"
-    title="Group by Metadata"
-    size="lg"
-    @update:model-value="!$event && close()"
-    @close="close"
-  >
-    <div class="mint-grouping-modal">
-      <!-- File upload area -->
-      <div
-        v-if="!csvFile"
-        :class="[
-          'mint-grouping-modal__dropzone',
-          isDragOver ? 'mint-grouping-modal__dropzone--dragover' : '',
-        ]"
-        @drop="handleDrop"
-        @dragover.prevent="isDragOver = true"
-        @dragleave="isDragOver = false"
-      >
-        <input
-          type="file"
-          accept=".csv"
-          class="mint-grouping-modal__file-input"
-          @change="handleFileInput"
-        />
-        <svg class="mint-grouping-modal__upload-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-        </svg>
-        <p class="mint-grouping-modal__upload-text">
-          <span class="mint-grouping-modal__upload-highlight">Click to upload</span>
-          or drag and drop a CSV file
-        </p>
-        <p class="mint-grouping-modal__upload-hint">
-          CSV should contain sample names and grouping columns
-        </p>
-      </div>
-
-      <!-- Error message -->
-      <div v-if="parseError" class="mint-grouping-modal__error">
-        {{ parseError }}
-      </div>
-
-      <!-- Configuration section -->
-      <template v-if="csvFile && csvData.length > 0">
-        <div class="mint-grouping-modal__file-info">
-          <svg class="mint-grouping-modal__file-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-          </svg>
-          <span class="mint-grouping-modal__file-name">{{ csvFile.name }}</span>
-          <button
-            type="button"
-            class="mint-grouping-modal__file-clear"
-            @click="resetState"
-          >
-            Change file
-          </button>
-        </div>
-
-        <!-- Column selection -->
-        <div class="mint-grouping-modal__config">
-          <div class="mint-grouping-modal__config-row">
-            <label class="mint-grouping-modal__label">Sample Column</label>
-            <BaseSelect
-              v-model="sampleColumn"
-              :options="columnOptions"
-              placeholder="Select sample column..."
-            />
-          </div>
-
-          <div class="mint-grouping-modal__config-row">
-            <label class="mint-grouping-modal__label">Group Columns</label>
-            <div class="mint-grouping-modal__group-columns">
-              <!-- Selected group columns with reordering -->
-              <div v-if="groupColumns.length > 0" class="mint-grouping-modal__selected-columns">
-                <div
-                  v-for="(col, index) in groupColumns"
-                  :key="col"
-                  class="mint-grouping-modal__selected-column"
-                >
-                  <span class="mint-grouping-modal__column-name">{{ col }}</span>
-                  <div class="mint-grouping-modal__column-actions">
-                    <button
-                      type="button"
-                      :disabled="index === 0"
-                      class="mint-grouping-modal__column-btn"
-                      @click="moveGroupColumn(index, 'up')"
-                    >
-                      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                        <path d="M18 15l-6-6-6 6" />
-                      </svg>
-                    </button>
-                    <button
-                      type="button"
-                      :disabled="index === groupColumns.length - 1"
-                      class="mint-grouping-modal__column-btn"
-                      @click="moveGroupColumn(index, 'down')"
-                    >
-                      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                        <path d="M6 9l6 6 6-6" />
-                      </svg>
-                    </button>
-                    <button
-                      type="button"
-                      class="mint-grouping-modal__column-btn mint-grouping-modal__column-btn--remove"
-                      @click="removeGroupColumn(col)"
-                    >
-                      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                        <path d="M6 18L18 6M6 6l12 12" />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </div>
-
-              <!-- Add column dropdown -->
-              <BaseSelect
-                v-if="availableGroupColumns.length > 0"
-                model-value=""
-                :options="availableGroupColumns"
-                placeholder="Add group column..."
-                @update:model-value="addGroupColumn($event as string)"
-              />
-            </div>
-          </div>
-        </div>
-
-        <!-- Match status -->
-        <div v-if="sampleColumn" class="mint-grouping-modal__match-status">
-          <div class="mint-grouping-modal__match-stat mint-grouping-modal__match-stat--matched">
-            <span class="mint-grouping-modal__match-count">{{ matchedSamples.length }}</span>
-            <span class="mint-grouping-modal__match-label">samples matched</span>
-          </div>
-          <div
-            v-if="unmatchedSamples.length > 0"
-            class="mint-grouping-modal__match-stat mint-grouping-modal__match-stat--unmatched"
-          >
-            <span class="mint-grouping-modal__match-count">{{ unmatchedSamples.length }}</span>
-            <span class="mint-grouping-modal__match-label">samples not found in CSV</span>
-          </div>
-        </div>
-
-        <!-- Preview table -->
-        <div v-if="previewData.length > 0" class="mint-grouping-modal__preview">
-          <h4 class="mint-grouping-modal__preview-title">Data Preview</h4>
-          <div class="mint-grouping-modal__table-wrapper">
-            <table class="mint-grouping-modal__table">
-              <thead>
-                <tr>
-                  <th
-                    v-for="col in csvColumns"
-                    :key="col"
-                    :class="[
-                      'mint-grouping-modal__th',
-                      col === sampleColumn ? 'mint-grouping-modal__th--sample' : '',
-                      groupColumns.includes(col) ? 'mint-grouping-modal__th--group' : '',
-                    ]"
-                  >
-                    {{ col }}
-                  </th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr v-for="(row, idx) in previewData" :key="idx">
-                  <td
-                    v-for="col in csvColumns"
-                    :key="col"
-                    :class="[
-                      'mint-grouping-modal__td',
-                      col === sampleColumn ? 'mint-grouping-modal__td--sample' : '',
-                      groupColumns.includes(col) ? 'mint-grouping-modal__td--group' : '',
-                    ]"
-                  >
-                    {{ row[col] }}
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-          <p v-if="csvData.length > 5" class="mint-grouping-modal__preview-note">
-            Showing 5 of {{ csvData.length }} rows
-          </p>
-        </div>
-      </template>
-    </div>
-
-    <template #footer>
-      <div class="mint-grouping-modal__footer">
-        <BaseButton variant="secondary" @click="close">Cancel</BaseButton>
-        <BaseButton
-          variant="primary"
-          :disabled="!canApply"
-          @click="applyGrouping"
-        >
-          Apply Grouping
-        </BaseButton>
-      </div>
-    </template>
-  </BaseModal>
+    :samples="samples"
+    @update:model-value="handleOpenChange"
+    @apply="handleApply"
+  />
 </template>
-
-<style>
-@import '../styles/components/grouping-modal.css';
-</style>

package/src/components/MultiSelect.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 /** Lets users select multiple options from a checkbox list with optional selection cap. */
 import { computed } from 'vue'
-import type { MultiSelectOption, MultiSelectSize } from '../types'
+import type { MultiSelectOption, MultiSelectOptionInput, MultiSelectSize } from '../types'
+import { useListSelection } from '../composables/useListSelection'
+import { normalizeOptionInput } from '../utils/options'
 
 interface Props {
   modelValue: (string | number)[]
-  options: MultiSelectOption[]
+  options: MultiSelectOptionInput[]
   placeholder?: string
   disabled?: boolean
   maxSelections?: number
@@ -22,22 +24,25 @@ const emit = defineEmits<{
   'update:modelValue': [value: (string | number)[]]
 }>()
 
-const canSelectMore = computed(() => {
-  if (props.maxSelections === undefined) return true
-  return props.modelValue.length < props.maxSelections
+const normalizedOptions = computed<MultiSelectOption[]>(() => props.options.map(normalizeOptionInput))
+const optionSelection = useListSelection({
+  selected: () => props.modelValue,
+  items: normalizedOptions,
+  getValue: option => option.value,
+  disabled: () => props.disabled,
+  max: () => props.maxSelections,
 })
+const canSelectMore = optionSelection.canAddMore
 
 function isSelected(value: string | number): boolean {
-  return props.modelValue.includes(value)
+  return optionSelection.isSelected(value)
 }
 
 function toggleOption(option: MultiSelectOption) {
   if (props.disabled || option.disabled) return
 
-  if (isSelected(option.value)) {
-    emit('update:modelValue', props.modelValue.filter(v => v !== option.value))
-  } else if (canSelectMore.value) {
-    emit('update:modelValue', [...props.modelValue, option.value])
+  if (isSelected(option.value) || canSelectMore.value) {
+    emit('update:modelValue', optionSelection.toggleValue(option.value))
   }
 }
 
@@ -50,7 +55,7 @@ function handleKeydown(event: KeyboardEvent, option: MultiSelectOption) {
 
 const selectedLabels = computed(() => {
   return props.modelValue
-    .map(v => props.options.find(o => o.value === v)?.label)
+    .map(v => normalizedOptions.value.find(o => o.value === v)?.label)
     .filter(Boolean)
 })
 </script>
@@ -72,7 +77,7 @@ const selectedLabels = computed(() => {
 
     <div class="mint-multi-select__options" role="group">
       <button
-        v-for="option in options"
+        v-for="option in normalizedOptions"
         :key="String(option.value)"
         type="button"
         role="checkbox"

package/src/components/PlateMapEditor.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 /** Full plate-map design environment for 96/384-well plates with sample assignment, slot-color coding, undo/redo, and CSV/JSON import-export. */
-import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
+import { ref, computed, watch } from 'vue'
 import type { PlateMapEditorState, WellPlateFormat, SampleType, Well } from '../types'
 import { useWellPlateEditor } from '../composables/useWellPlateEditor'
+import { useEventListener } from '../composables/useEventListener'
 import WellPlate from './WellPlate.vue'
 import SampleLegend from './SampleLegend.vue'
 
@@ -221,13 +222,7 @@ function handleKeyDown(event: KeyboardEvent) {
   }
 }
 
-onMounted(() => {
-  document.addEventListener('keydown', handleKeyDown)
-})
-
-onUnmounted(() => {
-  document.removeEventListener('keydown', handleKeyDown)
-})
+useEventListener(() => document, 'keydown', handleKeyDown)
 </script>
 
 <template>

package/src/components/PluginIcon.vue

@@ -8,6 +8,7 @@
  *  http:// URLs and data:image/svg+xml URLs are deliberately rejected
  *  (mixed-content + XSS, see spec 2026-05-04-plugin-icon-component-design.md). */
 import { computed } from 'vue'
+import { detectPluginIcon, type DetectedPluginIcon } from '../utils/pluginIcon'
 
 defineOptions({ name: 'PluginIcon' })
 
@@ -23,28 +24,7 @@ const props = withDefaults(defineProps<Props>(), {
   variant: 'solid',
 })
 
-// MINT canonical plugin placeholder — page-with-corner-fold glyph.
-const FALLBACK_PATH = 'M14 7v4a1 1 0 0 0 1 1h4M5 3h9l5 5v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z'
-
-const PATH_REGEX = /^[Mm][\s,\d\-.]/
-const RASTER_DATA_URL_REGEX = /^data:image\/(png|jpeg|jpg|gif|webp);/
-
-type Format = 'path' | 'data-url' | 'https-url' | 'fallback'
-
-interface Detected {
-  format: Format
-  value: string
-}
-
-const detected = computed<Detected>(() => {
-  // Strip leading whitespace and BOM before pattern checks.
-  const raw = (props.icon ?? '').replace(/^[\s]+/, '')
-  if (!raw) return { format: 'fallback', value: FALLBACK_PATH }
-  if (PATH_REGEX.test(raw)) return { format: 'path', value: raw }
-  if (RASTER_DATA_URL_REGEX.test(raw)) return { format: 'data-url', value: raw }
-  if (raw.startsWith('https://')) return { format: 'https-url', value: raw }
-  return { format: 'fallback', value: FALLBACK_PATH }
-})
+const detected = computed<DetectedPluginIcon>(() => detectPluginIcon(props.icon))
 
 const rootClasses = computed(() => [
   'mint-plugin-icon',

package/src/components/ProtocolStepEditor.vue

@@ -1,7 +1,8 @@
 <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, onUnmounted } from 'vue'
+import { ref, computed, watch, onMounted } from 'vue'
 import type { ProtocolStep, ProtocolStepType, ProtocolStepStatus } from '../types'
+import { useDropdownState } from '../composables/useDropdownState'
 import {
   useProtocolTemplates,
   type StepTemplate,
@@ -38,7 +39,12 @@ const {
 
 // State
 const selectedTemplateId = ref<string | null>(null)
-const dropdownOpen = ref(false)
+const {
+  isOpen: templateDropdownOpen,
+  rootRef: templateDropdownRef,
+  close: closeTemplateDropdown,
+  toggle: toggleTemplateDropdown,
+} = useDropdownState()
 const stepName = ref('')
 const stepDescription = ref('')
 const stepDuration = ref<number | undefined>()
@@ -113,7 +119,7 @@ function initFromStep(step: ProtocolStep) {
 // Handle template selection
 function selectTemplate(template: StepTemplate) {
   selectedTemplateId.value = template.id
-  dropdownOpen.value = false
+  closeTemplateDropdown()
 
   // Reset to template defaults if creating new
   if (props.mode === 'create') {
@@ -185,14 +191,6 @@ function handleCancel() {
   emit('cancel')
 }
 
-// Close dropdown on click outside
-function handleClickOutside(event: MouseEvent) {
-  const target = event.target as HTMLElement
-  if (!target.closest('.mint-protocol-editor__template-dropdown')) {
-    dropdownOpen.value = false
-  }
-}
-
 // Format duration
 function formatDuration(minutes: number | undefined): string {
   if (minutes === undefined) return ''
@@ -202,10 +200,7 @@ function formatDuration(minutes: number | undefined): string {
   return mins > 0 ? `${hours}h ${mins}m` : `${hours}h`
 }
 
-// Lifecycle
 onMounted(() => {
-  document.addEventListener('click', handleClickOutside)
-
   if (props.modelValue) {
     initFromStep(props.modelValue)
   } else if (availableTemplates.value.length > 0) {
@@ -213,10 +208,6 @@ onMounted(() => {
   }
 })
 
-onUnmounted(() => {
-  document.removeEventListener('click', handleClickOutside)
-})
-
 // Watch for external changes
 watch(
   () => props.modelValue,
@@ -250,11 +241,11 @@ watch(
       <!-- Template selector -->
       <div class="mint-protocol-editor__template-select">
         <label class="mint-protocol-editor__template-label">Template</label>
-        <div class="mint-protocol-editor__template-dropdown">
+        <div ref="templateDropdownRef" class="mint-protocol-editor__template-dropdown">
           <button
             type="button"
             class="mint-protocol-editor__template-btn"
-            @click.stop="dropdownOpen = !dropdownOpen"
+            @click="toggleTemplateDropdown"
           >
             <svg
               v-if="selectedTemplate"
@@ -276,7 +267,7 @@ watch(
             <svg
               :class="[
                 'mint-protocol-editor__template-arrow',
-                dropdownOpen ? 'mint-protocol-editor__template-arrow--open' : '',
+                templateDropdownOpen ? 'mint-protocol-editor__template-arrow--open' : '',
               ]"
               fill="none"
               stroke="currentColor"
@@ -286,7 +277,7 @@ watch(
             </svg>
           </button>
 
-          <div v-if="dropdownOpen" class="mint-protocol-editor__template-menu">
+          <div v-if="templateDropdownOpen" class="mint-protocol-editor__template-menu">
             <button
               v-for="template in availableTemplates"
               :key="template.id"