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

package/src/components/ReagentEditor.vue

@@ -1,418 +0,0 @@
-<script setup lang="ts">
-/** Editor for a single reagent definition with axis orientation, dilution-series generator, and position-count validation for 96/384-well plates. */
-import { computed, ref } from 'vue'
-import NumberInput from './NumberInput.vue'
-import BaseButton from './BaseButton.vue'
-import BaseSelect from './BaseSelect.vue'
-import {
-  useReagentSeries,
-  DEFAULT_PRESETS,
-  DEFAULT_UNITS,
-  type LevelEntry,
-  type DilutionPreset,
-} from '../composables/useReagentSeries'
-
-export interface ReagentDefinition {
-  id: string
-  name: string
-  color: string
-  axis: 'row' | 'column'
-  startPosition: string
-  levels: LevelEntry[]
-  unit: string
-}
-
-interface Props {
-  modelValue: ReagentDefinition
-  plateFormat?: 96 | 384
-  units?: string[]
-  presets?: DilutionPreset[]
-  maxLevels?: number
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  plateFormat: 96,
-  units: () => DEFAULT_UNITS,
-  presets: () => DEFAULT_PRESETS,
-  maxLevels: 24,
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [value: ReagentDefinition]
-  remove: []
-}>()
-
-const { generateSeries, sortLevels, totalPositions } = useReagentSeries()
-
-// --- Local generator state ---
-const generatorStart = ref(100)
-const generatorCount = ref(8)
-const manualValue = ref<number | undefined>(undefined)
-
-// --- Computed plate dimensions ---
-const plateRows = computed(() => (props.plateFormat === 384 ? 16 : 8))
-const plateCols = computed(() => (props.plateFormat === 384 ? 24 : 12))
-
-const axisOptions = [
-  { value: 'row', label: 'Rows' },
-  { value: 'column', label: 'Columns' },
-]
-
-// --- Start position validation ---
-const startPositionError = computed<string | null>(() => {
-  const { axis, startPosition } = props.modelValue
-  if (!startPosition) return null
-
-  if (axis === 'row') {
-    const letter = startPosition.toUpperCase()
-    if (!/^[A-Z]$/.test(letter)) return 'Must be a letter'
-    const idx = letter.charCodeAt(0) - 65
-    if (idx >= plateRows.value) return `Max row: ${String.fromCharCode(64 + plateRows.value)}`
-  } else {
-    const num = parseInt(startPosition, 10)
-    if (isNaN(num) || num < 1) return 'Must be a number ≥ 1'
-    if (num > plateCols.value) return `Max col: ${plateCols.value}`
-  }
-  return null
-})
-
-// --- Position summary ---
-const positionCount = computed(() => totalPositions(props.modelValue.levels))
-
-const positionOverflows = computed(() => {
-  const { axis, startPosition, levels } = props.modelValue
-  if (!startPosition || levels.length === 0 || startPositionError.value) return false
-
-  const span = positionCount.value
-  if (axis === 'row') {
-    const startIdx = startPosition.toUpperCase().charCodeAt(0) - 65
-    return startIdx + span > plateRows.value
-  } else {
-    const startIdx = parseInt(startPosition, 10)
-    return startIdx + span - 1 > plateCols.value
-  }
-})
-
-const positionRange = computed(() => {
-  const { axis, startPosition, levels } = props.modelValue
-  if (!startPosition || levels.length === 0 || startPositionError.value) return null
-
-  const span = positionCount.value
-  if (span === 0) return null
-
-  if (axis === 'row') {
-    const startIdx = startPosition.toUpperCase().charCodeAt(0) - 65
-    const endIdx = Math.min(startIdx + span - 1, plateRows.value - 1)
-    const startLetter = String.fromCharCode(65 + startIdx)
-    const endLetter = String.fromCharCode(65 + endIdx)
-    return `${startLetter}–${endLetter}`
-  } else {
-    const startIdx = parseInt(startPosition, 10)
-    if (isNaN(startIdx)) return null
-    const endIdx = Math.min(startIdx + span - 1, plateCols.value)
-    return `${startIdx}–${endIdx}`
-  }
-})
-
-// --- Update helpers ---
-function update(partial: Partial<ReagentDefinition>) {
-  emit('update:modelValue', { ...props.modelValue, ...partial })
-}
-
-function updateName(event: Event) {
-  update({ name: (event.target as HTMLInputElement).value })
-}
-
-function updateColor(event: Event) {
-  update({ color: (event.target as HTMLInputElement).value })
-}
-
-function updateAxis(value: string | number) {
-  update({ axis: value as 'row' | 'column', startPosition: '' })
-}
-
-function updateStartPosition(event: Event) {
-  const raw = (event.target as HTMLInputElement).value
-  update({ startPosition: raw })
-}
-
-function updateUnit(event: Event) {
-  update({ unit: (event.target as HTMLSelectElement).value })
-}
-
-// --- Level manipulation ---
-function setLevels(levels: LevelEntry[]) {
-  update({ levels: sortLevels(levels) })
-}
-
-function applyPreset(preset: DilutionPreset) {
-  if (generatorStart.value <= 0 || generatorCount.value < 1) return
-  const count = Math.min(generatorCount.value, props.maxLevels)
-  const levels = generateSeries(generatorStart.value, count, preset.factor)
-  setLevels(levels)
-}
-
-function addManualLevel() {
-  if (manualValue.value === undefined || manualValue.value < 0) return
-  if (props.modelValue.levels.length >= props.maxLevels) return
-
-  const exists = props.modelValue.levels.some((l) => l.value === manualValue.value)
-  if (exists) return
-
-  setLevels([...props.modelValue.levels, { value: manualValue.value, replicates: 1 }])
-  manualValue.value = undefined
-}
-
-function handleManualKeydown(event: KeyboardEvent) {
-  if (event.key === 'Enter') {
-    event.preventDefault()
-    addManualLevel()
-  }
-}
-
-function removeLevel(index: number) {
-  const next = [...props.modelValue.levels]
-  next.splice(index, 1)
-  setLevels(next)
-}
-
-function updateLevelReplicates(index: number, replicates: number | undefined) {
-  if (replicates === undefined || replicates < 1) return
-  const next = [...props.modelValue.levels]
-  next[index] = { ...next[index], replicates }
-  update({ levels: next })
-}
-
-function formatLevel(value: number): string {
-  if (!Number.isFinite(value)) return '–'
-  if (value === 0) return 'Ctrl (0)'
-  if (value >= 1000) return value.toLocaleString('en-US', { maximumSignificantDigits: 4 })
-  if (value >= 1) return value.toString()
-  if (value >= 0.001) return value.toFixed(3)
-  return value.toExponential(1)
-}
-</script>
-
-<template>
-  <div
-    class="mint-reagent-editor"
-    :style="{ '--reagent-color': modelValue.color }"
-  >
-    <!-- Identity -->
-    <div class="mint-reagent-editor__section">
-      <div class="mint-reagent-editor__identity">
-        <label class="mint-reagent-editor__color-wrapper">
-          <input
-            type="color"
-            :value="modelValue.color"
-            class="mint-reagent-editor__color-input"
-            aria-label="Reagent color"
-            @input="updateColor"
-          />
-          <span
-            class="mint-reagent-editor__color-swatch"
-            :style="{ backgroundColor: modelValue.color }"
-          />
-        </label>
-        <input
-          type="text"
-          :value="modelValue.name"
-          placeholder="Reagent name"
-          class="mint-reagent-editor__name-input"
-          maxlength="64"
-          aria-label="Reagent name"
-          @input="updateName"
-        />
-      </div>
-    </div>
-
-    <!-- Position Mapping -->
-    <div class="mint-reagent-editor__section">
-      <div class="mint-reagent-editor__section-header">
-        <svg class="mint-reagent-editor__section-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <rect x="3" y="3" width="7" height="7" /><rect x="14" y="3" width="7" height="7" /><rect x="3" y="14" width="7" height="7" /><rect x="14" y="14" width="7" height="7" />
-        </svg>
-        Position
-      </div>
-      <div class="mint-reagent-editor__position-row">
-        <div class="mint-reagent-editor__field mint-reagent-editor__field--flex">
-          <label class="mint-reagent-editor__label">Axis</label>
-          <BaseSelect
-            :model-value="modelValue.axis"
-            :options="axisOptions"
-            size="sm"
-            @update:model-value="updateAxis"
-          />
-        </div>
-        <div class="mint-reagent-editor__field mint-reagent-editor__field--flex">
-          <label class="mint-reagent-editor__label">Start</label>
-          <input
-            type="text"
-            :value="modelValue.startPosition"
-            :placeholder="modelValue.axis === 'row' ? 'e.g. B' : 'e.g. 2'"
-            :class="[
-              'mint-reagent-editor__inline-input',
-              startPositionError ? 'mint-reagent-editor__inline-input--error' : '',
-            ]"
-            :maxlength="modelValue.axis === 'row' ? 1 : 2"
-            :aria-invalid="!!startPositionError"
-            aria-label="Start position"
-            @input="updateStartPosition"
-          />
-          <span v-if="startPositionError" class="mint-reagent-editor__field-error">
-            {{ startPositionError }}
-          </span>
-        </div>
-      </div>
-    </div>
-
-    <!-- Series -->
-    <div class="mint-reagent-editor__section">
-      <div class="mint-reagent-editor__section-header">
-        <svg class="mint-reagent-editor__section-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <path d="M3 3v18h18" /><path d="m19 9-5 5-4-4-3 3" />
-        </svg>
-        Series
-        <select
-          :value="modelValue.unit"
-          class="mint-reagent-editor__unit-select"
-          @change="updateUnit"
-        >
-          <option v-for="u in units" :key="u" :value="u">{{ u }}</option>
-        </select>
-      </div>
-
-      <!-- Dilution generator -->
-      <div class="mint-reagent-editor__generator">
-        <div class="mint-reagent-editor__generator-inputs">
-          <div class="mint-reagent-editor__field mint-reagent-editor__field--flex">
-            <label class="mint-reagent-editor__label">Start</label>
-            <NumberInput v-model="generatorStart" :min="0" :step="10" size="sm" />
-          </div>
-          <div class="mint-reagent-editor__field mint-reagent-editor__field--flex">
-            <label class="mint-reagent-editor__label">Doses</label>
-            <NumberInput v-model="generatorCount" :min="2" :max="maxLevels" :step="1" size="sm" />
-          </div>
-        </div>
-        <div class="mint-reagent-editor__presets">
-          <button
-            v-for="preset in presets"
-            :key="preset.label"
-            type="button"
-            class="mint-reagent-editor__preset-btn"
-            @click="applyPreset(preset)"
-          >
-            {{ preset.label }}
-          </button>
-        </div>
-      </div>
-
-      <!-- Manual entry -->
-      <div class="mint-reagent-editor__manual" @keydown="handleManualKeydown">
-        <NumberInput
-          v-model="manualValue"
-          :min="0"
-          :step="1"
-          size="sm"
-          placeholder="Add value"
-        />
-        <button
-          type="button"
-          class="mint-reagent-editor__add-btn"
-          :disabled="manualValue === undefined || manualValue < 0 || modelValue.levels.length >= maxLevels"
-          aria-label="Add level"
-          @click="addManualLevel"
-        >
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M5 12h14" /><path d="M12 5v14" />
-          </svg>
-        </button>
-      </div>
-
-      <!-- Level table -->
-      <div v-if="modelValue.levels.length > 0" class="mint-reagent-editor__table">
-        <div class="mint-reagent-editor__table-header">
-          <span class="mint-reagent-editor__table-col mint-reagent-editor__table-col--level">Level</span>
-          <span class="mint-reagent-editor__table-col mint-reagent-editor__table-col--reps">Reps</span>
-          <span class="mint-reagent-editor__table-col mint-reagent-editor__table-col--action" />
-        </div>
-        <div class="mint-reagent-editor__table-body">
-        <div
-          v-for="(level, i) in modelValue.levels"
-          :key="level.value"
-          class="mint-reagent-editor__table-row"
-        >
-          <span class="mint-reagent-editor__table-col mint-reagent-editor__table-col--level">
-            <span class="mint-reagent-editor__level-value">{{ formatLevel(level.value) }}</span>
-            <span v-if="level.value !== 0" class="mint-reagent-editor__level-unit">{{ modelValue.unit }}</span>
-          </span>
-          <span class="mint-reagent-editor__table-col mint-reagent-editor__table-col--reps">
-            <NumberInput
-              :model-value="level.replicates"
-              :min="1"
-              :max="12"
-              :step="1"
-              size="sm"
-              @update:model-value="updateLevelReplicates(i, $event)"
-            />
-          </span>
-          <span class="mint-reagent-editor__table-col mint-reagent-editor__table-col--action">
-            <button
-              type="button"
-              class="mint-reagent-editor__remove-level-btn"
-              aria-label="Remove level"
-              @click="removeLevel(i)"
-            >
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <path d="M18 6 6 18" /><path d="m6 6 12 12" />
-              </svg>
-            </button>
-          </span>
-        </div>
-        </div>
-      </div>
-
-      <div v-else class="mint-reagent-editor__empty">
-        Use a preset above or add levels manually
-      </div>
-    </div>
-
-    <!-- Position Summary -->
-    <div
-      v-if="modelValue.levels.length > 0 && modelValue.startPosition && !startPositionError"
-      :class="[
-        'mint-reagent-editor__summary',
-        positionOverflows ? 'mint-reagent-editor__summary--overflow' : '',
-      ]"
-    >
-      <div class="mint-reagent-editor__summary-item">
-        <span class="mint-reagent-editor__summary-value">{{ modelValue.levels.length }}</span>
-        <span class="mint-reagent-editor__summary-label">levels</span>
-      </div>
-      <div class="mint-reagent-editor__summary-dot" />
-      <div class="mint-reagent-editor__summary-item">
-        <span class="mint-reagent-editor__summary-value">{{ positionCount }}</span>
-        <span class="mint-reagent-editor__summary-label">positions</span>
-      </div>
-      <div v-if="positionRange" class="mint-reagent-editor__summary-dot" />
-      <div v-if="positionRange" class="mint-reagent-editor__summary-item">
-        <span class="mint-reagent-editor__summary-value">{{ positionRange }}</span>
-        <span class="mint-reagent-editor__summary-label">{{ modelValue.axis === 'row' ? 'rows' : 'cols' }}</span>
-      </div>
-      <span v-if="positionOverflows" class="mint-reagent-editor__summary-warning">
-        Exceeds plate
-      </span>
-    </div>
-
-    <!-- Remove -->
-    <div class="mint-reagent-editor__footer">
-      <BaseButton variant="danger" size="sm" @click="emit('remove')">
-        Remove Reagent
-      </BaseButton>
-    </div>
-  </div>
-</template>
-
-<style>
-@import '../styles/components/reagent-editor.css';
-</style>

package/src/components/ReagentList.presentation.ts

@@ -1,105 +0,0 @@
-import type { Reagent, ReagentColumn } from '../types'
-
-export const REAGENT_COLUMN_LABELS: Record<ReagentColumn, string> = {
-  name: 'Name',
-  catalog: 'Catalog #',
-  lot: 'Lot #',
-  expiry: 'Expiry',
-  storage: 'Storage',
-  location: 'Location',
-  stock: 'Stock',
-  supplier: 'Supplier',
-}
-
-export interface ReagentRowClassOptions {
-  lowStockThreshold: number
-  draggedId?: string | null
-  dragOverId?: string | null
-  now?: Date
-}
-
-export function getReagentColumnValue(reagent: Reagent, column: ReagentColumn): unknown {
-  switch (column) {
-    case 'name':
-      return reagent.name
-    case 'catalog':
-      return reagent.catalogNumber
-    case 'lot':
-      return reagent.lotNumber
-    case 'expiry':
-      return reagent.expiryDate ? new Date(reagent.expiryDate).getTime() : null
-    case 'storage':
-      return reagent.storageCondition
-    case 'location':
-      return reagent.location
-    case 'stock':
-      return reagent.stockLevel
-    case 'supplier':
-      return reagent.supplier
-    default:
-      return null
-  }
-}
-
-export function isReagentExpired(reagent: Reagent, now = new Date()): boolean {
-  if (!reagent.expiryDate) return false
-  const expiry = new Date(reagent.expiryDate)
-  return expiry < now
-}
-
-export function isReagentExpiringSoon(
-  reagent: Reagent,
-  daysThreshold = 30,
-  now = new Date()
-): boolean {
-  if (!reagent.expiryDate) return false
-  const expiry = new Date(reagent.expiryDate)
-  const daysUntilExpiry = (expiry.getTime() - now.getTime()) / (1000 * 60 * 60 * 24)
-  return daysUntilExpiry > 0 && daysUntilExpiry <= daysThreshold
-}
-
-export function isReagentLowStock(reagent: Reagent, lowStockThreshold: number): boolean {
-  if (reagent.stockLevel === undefined) return false
-  return reagent.stockLevel <= lowStockThreshold
-}
-
-export function formatReagentExpiryDate(date: Date | string | undefined): string {
-  if (!date) return '-'
-  const parsed = new Date(date)
-  return parsed.toLocaleDateString('en-US', { year: 'numeric', month: 'short' })
-}
-
-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
-): string[] {
-  const classes: string[] = ['mint-reagent-list__row']
-
-  if (isReagentExpired(reagent, options.now)) {
-    classes.push('mint-reagent-list__row--expired')
-  } else if (isReagentExpiringSoon(reagent, 30, options.now)) {
-    classes.push('mint-reagent-list__row--expiring-soon')
-  }
-
-  if (isReagentLowStock(reagent, options.lowStockThreshold)) {
-    classes.push('mint-reagent-list__row--low-stock')
-  }
-  if (options.draggedId === reagent.id) {
-    classes.push('mint-reagent-list__row--dragging')
-  }
-  if (options.dragOverId === reagent.id) {
-    classes.push('mint-reagent-list__row--drag-over')
-  }
-
-  return classes
-}

package/src/components/ReagentList.story.vue

@@ -1,137 +0,0 @@
-<script setup lang="ts">
-import ReagentList from './ReagentList.vue'
-import type { Reagent } from '../types'
-
-const today = new Date()
-const pastDate = new Date(today)
-pastDate.setMonth(pastDate.getMonth() - 2)
-const soonDate = new Date(today)
-soonDate.setDate(soonDate.getDate() + 15)
-const futureDate = new Date(today)
-futureDate.setFullYear(futureDate.getFullYear() + 1)
-
-const mockReagents: Reagent[] = [
-  {
-    id: 'r1',
-    name: 'DMEM High Glucose',
-    catalogNumber: '11965092',
-    lotNumber: '2584391',
-    expiryDate: futureDate.toISOString(),
-    storageCondition: '4C',
-    location: 'Fridge A, Shelf 2',
-    stockLevel: 75,
-    stockUnit: '%',
-    supplier: 'Gibco',
-    url: 'https://www.thermofisher.com',
-  },
-  {
-    id: 'r2',
-    name: 'Fetal Bovine Serum',
-    catalogNumber: '10082147',
-    lotNumber: '2612847',
-    expiryDate: soonDate.toISOString(),
-    storageCondition: '-20C',
-    location: 'Freezer B, Rack 3',
-    stockLevel: 15,
-    stockUnit: '%',
-    supplier: 'Gibco',
-  },
-  {
-    id: 'r3',
-    name: 'Trypsin-EDTA (0.25%)',
-    catalogNumber: '25200056',
-    lotNumber: '2598412',
-    expiryDate: pastDate.toISOString(),
-    storageCondition: '-20C',
-    location: 'Freezer B, Rack 1',
-    stockLevel: 5,
-    stockUnit: '%',
-    supplier: 'Gibco',
-  },
-  {
-    id: 'r4',
-    name: 'Cisplatin',
-    catalogNumber: 'P4394',
-    lotNumber: 'SLCH2891',
-    expiryDate: futureDate.toISOString(),
-    storageCondition: 'RT',
-    location: 'Chemical Cabinet',
-    stockLevel: 90,
-    stockUnit: '%',
-    supplier: 'Sigma-Aldrich',
-  },
-  {
-    id: 'r5',
-    name: 'CellTiter-Glo 2.0',
-    catalogNumber: 'G9242',
-    lotNumber: '0000561234',
-    expiryDate: futureDate.toISOString(),
-    storageCondition: '-80C',
-    location: 'Freezer C, Rack 1',
-    stockLevel: 45,
-    stockUnit: '%',
-    supplier: 'Promega',
-  },
-]
-
-function initState() {
-  return {
-    modelValue: mockReagents,
-    readonly: false,
-    showStockLevel: true,
-    lowStockThreshold: 10,
-    sortable: true,
-    searchable: true,
-  }
-}
-</script>
-
-<template>
-  <Story title="Lab/ReagentList">
-    <Variant title="Playground" :init-state="initState">
-      <template #default="{ state }">
-        <div style="padding: 2rem;">
-          <ReagentList
-            v-model="state.modelValue"
-            :readonly="state.readonly"
-            :show-stock-level="state.showStockLevel"
-            :low-stock-threshold="state.lowStockThreshold"
-            :sortable="state.sortable"
-            :searchable="state.searchable"
-          />
-        </div>
-      </template>
-      <template #controls="{ state }">
-        <HstCheckbox v-model="state.readonly" title="Readonly" />
-        <HstCheckbox v-model="state.showStockLevel" title="Show Stock Level" />
-        <HstSlider v-model="state.lowStockThreshold" title="Low Stock Threshold (%)" :min="0" :max="50" />
-        <HstCheckbox v-model="state.sortable" title="Sortable" />
-        <HstCheckbox v-model="state.searchable" title="Searchable" />
-      </template>
-    </Variant>
-
-    <Variant title="Readonly">
-      <div style="padding: 2rem;">
-        <ReagentList
-          :model-value="mockReagents"
-          readonly
-        />
-      </div>
-    </Variant>
-
-    <Variant title="All Columns">
-      <div style="padding: 2rem;">
-        <ReagentList
-          :model-value="mockReagents"
-          :columns="['name', 'catalog', 'lot', 'expiry', 'storage', 'location', 'stock', 'supplier']"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Empty">
-      <div style="padding: 2rem;">
-        <ReagentList :model-value="[]" />
-      </div>
-    </Variant>
-  </Story>
-</template>