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

package/src/components/Divider.vue

@@ -1,49 +0,0 @@
-<script setup lang="ts">
-/** Horizontal or vertical rule with optional inline text label at center or left. */
-interface Props {
-  vertical?: boolean
-  label?: string
-  align?: 'center' | 'left'
-  spacing?: 'sm' | 'md' | 'lg'
-}
-
-withDefaults(defineProps<Props>(), {
-  vertical: false,
-  label: undefined,
-  align: 'center',
-  spacing: 'md',
-})
-</script>
-
-<template>
-  <div
-    v-if="vertical"
-    :class="[
-      'mint-divider',
-      'mint-divider--vertical',
-      `mint-divider--${spacing}`,
-    ]"
-    role="separator"
-    aria-orientation="vertical"
-  />
-  <div
-    v-else
-    :class="[
-      'mint-divider',
-      `mint-divider--${spacing}`,
-      label ? `mint-divider--labeled mint-divider--${align}` : '',
-    ]"
-    role="separator"
-    aria-orientation="horizontal"
-  >
-    <template v-if="label">
-      <span v-if="align === 'center'" class="mint-divider__line" />
-      <span class="mint-divider__label">{{ label }}</span>
-      <span class="mint-divider__line" />
-    </template>
-  </div>
-</template>
-
-<style>
-@import '../styles/components/divider.css';
-</style>

package/src/components/DoseCalculator.story.vue

@@ -1,68 +0,0 @@
-<script setup lang="ts">
-import DoseCalculator from './DoseCalculator.vue'
-
-function initState() {
-  return {
-    mode: 'auto' as const,
-    molecularWeight: 300.44,
-    disabled: false,
-  }
-}
-</script>
-
-<template>
-  <Story title="Lab/DoseCalculator">
-    <Variant title="Playground" :init-state="initState">
-      <template #default="{ state }">
-        <div style="padding: 2rem; max-width: 500px;">
-          <DoseCalculator
-            :mode="state.mode"
-            :molecular-weight="state.molecularWeight"
-            :disabled="state.disabled"
-          />
-        </div>
-      </template>
-      <template #controls="{ state }">
-        <HstSelect
-          v-model="state.mode"
-          title="Mode"
-          :options="[
-            { value: 'auto', label: 'Auto (Tabs)' },
-            { value: 'dilution', label: 'Dilution Only' },
-            { value: 'serial', label: 'Serial Only' },
-            { value: 'conversion', label: 'Conversion Only' },
-          ]"
-        />
-        <HstSlider v-model="state.molecularWeight" title="Molecular Weight (g/mol)" :min="50" :max="1000" :step="0.1" />
-        <HstCheckbox v-model="state.disabled" title="Disabled" />
-      </template>
-    </Variant>
-
-    <Variant title="Dilution Mode">
-      <div style="padding: 2rem; max-width: 500px;">
-        <DoseCalculator mode="dilution" :molecular-weight="300.44" />
-      </div>
-    </Variant>
-
-    <Variant title="Serial Dilution Mode">
-      <div style="padding: 2rem; max-width: 500px;">
-        <DoseCalculator mode="serial" :molecular-weight="300.44" />
-      </div>
-    </Variant>
-
-    <Variant title="With Target Wells">
-      <div style="padding: 2rem; max-width: 500px;">
-        <DoseCalculator
-          mode="auto"
-          :target-wells="['A1', 'A2', 'A3', 'A4', 'A5', 'A6', 'A7', 'A8']"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Disabled">
-      <div style="padding: 2rem; max-width: 500px;">
-        <DoseCalculator mode="auto" disabled />
-      </div>
-    </Variant>
-  </Story>
-</template>

package/src/components/DoseCalculator.vue

@@ -1,416 +0,0 @@
-<script setup lang="ts">
-/** Tabbed dosing calculator supporting single dilution, serial dilution, and unit conversion, with optional direct assignment to selected plate wells. */
-import { ref, computed, watch } from 'vue'
-import ConcentrationInput from './ConcentrationInput.vue'
-import {
-  useConcentrationUnits,
-  type ConcentrationValue,
-} from '../composables/useConcentrationUnits'
-import {
-  useDoseCalculator,
-  type VolumeValue,
-  type DilutionResult,
-  type SerialDilutionResult,
-  type WellConcentration,
-} from '../composables/useDoseCalculator'
-import DoseCalculatorVolumeField from './DoseCalculatorVolumeField.vue'
-
-type CalculatorMode = 'dilution' | 'serial' | 'conversion'
-
-interface Props {
-  mode?: CalculatorMode | 'auto'
-  molecularWeight?: number
-  targetWells?: string[]
-  disabled?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  mode: 'auto',
-  disabled: false,
-})
-
-const emit = defineEmits<{
-  'apply-to-wells': [results: WellConcentration[]]
-  'calculate': [result: DilutionResult | SerialDilutionResult]
-}>()
-
-const { formatWithUnit } = useConcentrationUnits()
-const {
-  volumeUnits,
-  calculateDilution,
-  calculateSerialDilution,
-  formatVolume,
-  generateWellConcentrations,
-} = useDoseCalculator()
-
-// Active mode (for tabbed interface)
-const activeMode = ref<CalculatorMode>(props.mode === 'auto' ? 'dilution' : props.mode)
-
-// Dilution form state
-const stockConcentration = ref<ConcentrationValue>({ value: 10, unit: 'mM' })
-const finalConcentration = ref<ConcentrationValue>({ value: 100, unit: 'µM' })
-const finalVolume = ref<VolumeValue>({ value: 1, unit: 'mL' })
-
-// Serial dilution form state
-const serialStartConcentration = ref<ConcentrationValue>({ value: 100, unit: 'µM' })
-const serialDilutionFactor = ref(3)
-const serialNumberOfDilutions = ref(8)
-const serialVolumePerWell = ref<VolumeValue>({ value: 100, unit: 'µL' })
-
-// Results
-const dilutionResult = ref<DilutionResult | null>(null)
-const serialResult = ref<SerialDilutionResult | null>(null)
-
-// Computed
-const showTabs = computed(() => props.mode === 'auto')
-
-const hasTargetWells = computed(() => {
-  return props.targetWells && props.targetWells.length > 0
-})
-
-const canApplyToWells = computed(() => {
-  if (!hasTargetWells.value) return false
-  if (activeMode.value === 'serial' && serialResult.value?.valid) return true
-  if (activeMode.value === 'dilution' && dilutionResult.value?.valid) return true
-  return false
-})
-
-// Calculate dilution result
-function recalculateDilution() {
-  if (!stockConcentration.value || !finalConcentration.value || !finalVolume.value) {
-    dilutionResult.value = null
-    return
-  }
-
-  dilutionResult.value = calculateDilution({
-    stockConcentration: stockConcentration.value,
-    finalConcentration: finalConcentration.value,
-    finalVolume: finalVolume.value,
-  })
-
-  if (dilutionResult.value.valid) {
-    emit('calculate', dilutionResult.value)
-  }
-}
-
-// Calculate serial dilution result
-function recalculateSerial() {
-  if (
-    !serialStartConcentration.value ||
-    serialDilutionFactor.value <= 1 ||
-    serialNumberOfDilutions.value < 1 ||
-    !serialVolumePerWell.value
-  ) {
-    serialResult.value = null
-    return
-  }
-
-  serialResult.value = calculateSerialDilution({
-    startingConcentration: serialStartConcentration.value,
-    dilutionFactor: serialDilutionFactor.value,
-    numberOfDilutions: serialNumberOfDilutions.value,
-    volumePerWell: serialVolumePerWell.value,
-  })
-
-  if (serialResult.value.valid) {
-    emit('calculate', serialResult.value)
-  }
-}
-
-// Apply to wells
-function handleApplyToWells() {
-  if (!props.targetWells || props.targetWells.length === 0) return
-
-  if (activeMode.value === 'serial' && serialResult.value?.valid) {
-    const wellConcentrations = generateWellConcentrations(
-      serialResult.value,
-      props.targetWells
-    )
-    emit('apply-to-wells', wellConcentrations)
-  }
-
-  if (activeMode.value === 'dilution' && dilutionResult.value?.valid) {
-    // For simple dilution, apply same concentration to all wells
-    const wellConcentrations: WellConcentration[] = props.targetWells.map(wellId => ({
-      wellId,
-      concentration: finalConcentration.value,
-      volume: finalVolume.value,
-    }))
-    emit('apply-to-wells', wellConcentrations)
-  }
-}
-
-// Watch for changes and recalculate
-watch(
-  [stockConcentration, finalConcentration, finalVolume],
-  () => {
-    if (activeMode.value === 'dilution') {
-      recalculateDilution()
-    }
-  },
-  { deep: true, immediate: true }
-)
-
-watch(
-  [serialStartConcentration, serialDilutionFactor, serialNumberOfDilutions, serialVolumePerWell],
-  () => {
-    if (activeMode.value === 'serial') {
-      recalculateSerial()
-    }
-  },
-  { deep: true, immediate: true }
-)
-
-watch(activeMode, (mode) => {
-  if (mode === 'dilution') {
-    recalculateDilution()
-  } else if (mode === 'serial') {
-    recalculateSerial()
-  }
-})
-</script>
-
-<template>
-  <div
-    :class="[
-      'mint-dose-calculator',
-      disabled ? 'mint-dose-calculator--disabled' : '',
-    ]"
-  >
-    <!-- Tabs -->
-    <div v-if="showTabs" class="mint-dose-calculator__tabs" role="tablist">
-      <button
-        type="button"
-        :class="[
-          'mint-dose-calculator__tab',
-          activeMode === 'dilution' ? 'mint-dose-calculator__tab--active' : '',
-        ]"
-        role="tab"
-        :aria-selected="activeMode === 'dilution'"
-        @click="activeMode = 'dilution'"
-      >
-        Dilution
-      </button>
-      <button
-        type="button"
-        :class="[
-          'mint-dose-calculator__tab',
-          activeMode === 'serial' ? 'mint-dose-calculator__tab--active' : '',
-        ]"
-        role="tab"
-        :aria-selected="activeMode === 'serial'"
-        @click="activeMode = 'serial'"
-      >
-        Serial
-      </button>
-      <button
-        type="button"
-        :class="[
-          'mint-dose-calculator__tab',
-          activeMode === 'conversion' ? 'mint-dose-calculator__tab--active' : '',
-        ]"
-        role="tab"
-        :aria-selected="activeMode === 'conversion'"
-        @click="activeMode = 'conversion'"
-      >
-        Conversion
-      </button>
-    </div>
-
-    <!-- Dilution form -->
-    <div
-      v-if="activeMode === 'dilution'"
-      class="mint-dose-calculator__form"
-      role="tabpanel"
-    >
-      <div class="mint-dose-calculator__field">
-        <label class="mint-dose-calculator__field-label">Stock Concentration</label>
-        <ConcentrationInput
-          v-model="stockConcentration"
-          :disabled="disabled"
-          :show-conversion="false"
-          size="md"
-        />
-      </div>
-
-      <div class="mint-dose-calculator__field">
-        <label class="mint-dose-calculator__field-label">Final Concentration</label>
-        <ConcentrationInput
-          v-model="finalConcentration"
-          :disabled="disabled"
-          :show-conversion="false"
-          size="md"
-        />
-      </div>
-
-      <DoseCalculatorVolumeField
-        v-model="finalVolume"
-        label="Final Volume"
-        :units="volumeUnits"
-        :disabled="disabled"
-      />
-
-      <div class="mint-dose-calculator__divider" />
-
-      <!-- Dilution Result -->
-      <div v-if="dilutionResult?.valid" class="mint-dose-calculator__result">
-        <div class="mint-dose-calculator__result-title">Result</div>
-        <div class="mint-dose-calculator__result-row">
-          <span class="mint-dose-calculator__result-label">Stock volume</span>
-          <span class="mint-dose-calculator__result-value">
-            {{ formatVolume(dilutionResult.stockVolume) }}
-          </span>
-        </div>
-        <div class="mint-dose-calculator__result-row">
-          <span class="mint-dose-calculator__result-label">Diluent volume</span>
-          <span class="mint-dose-calculator__result-value">
-            {{ formatVolume(dilutionResult.diluentVolume) }}
-          </span>
-        </div>
-        <div class="mint-dose-calculator__result-row">
-          <span class="mint-dose-calculator__result-label">Dilution factor</span>
-          <span class="mint-dose-calculator__result-value">
-            {{ dilutionResult.dilutionFactor.toFixed(1) }}×
-          </span>
-        </div>
-      </div>
-
-      <div v-else-if="dilutionResult?.error" class="mint-dose-calculator__error">
-        {{ dilutionResult.error }}
-      </div>
-    </div>
-
-    <!-- Serial Dilution form -->
-    <div
-      v-else-if="activeMode === 'serial'"
-      class="mint-dose-calculator__form"
-      role="tabpanel"
-    >
-      <div class="mint-dose-calculator__field">
-        <label class="mint-dose-calculator__field-label">Starting Concentration</label>
-        <ConcentrationInput
-          v-model="serialStartConcentration"
-          :disabled="disabled"
-          :show-conversion="false"
-          size="md"
-        />
-      </div>
-
-      <div class="mint-dose-calculator__field-row">
-        <div class="mint-dose-calculator__field">
-          <label class="mint-dose-calculator__field-label">Dilution Factor</label>
-          <div class="mint-dose-calculator__input-wrapper">
-            <input
-              v-model.number="serialDilutionFactor"
-              type="number"
-              :disabled="disabled"
-              class="mint-dose-calculator__input"
-              min="1.1"
-              step="0.1"
-            />
-            <span class="mint-dose-calculator__unit-suffix">×</span>
-          </div>
-        </div>
-
-        <div class="mint-dose-calculator__field">
-          <label class="mint-dose-calculator__field-label">Dilutions</label>
-          <input
-            v-model.number="serialNumberOfDilutions"
-            type="number"
-            :disabled="disabled"
-            class="mint-dose-calculator__input"
-            min="1"
-            max="24"
-          />
-        </div>
-      </div>
-
-      <DoseCalculatorVolumeField
-        v-model="serialVolumePerWell"
-        label="Volume per Well"
-        :units="volumeUnits"
-        :disabled="disabled"
-      />
-
-      <div class="mint-dose-calculator__divider" />
-
-      <!-- Serial Preview -->
-      <div v-if="serialResult?.valid" class="mint-dose-calculator__preview">
-        <div class="mint-dose-calculator__preview-title">Preview</div>
-        <div class="mint-dose-calculator__preview-steps">
-          <template v-for="(step, index) in serialResult.steps" :key="step.stepNumber">
-            <div class="mint-dose-calculator__preview-step">
-              <span class="mint-dose-calculator__preview-step-num">{{ step.stepNumber }}:</span>
-              <span class="mint-dose-calculator__preview-step-conc">
-                {{ formatWithUnit(step.concentration, 3) }}
-              </span>
-            </div>
-            <span
-              v-if="index < serialResult.steps.length - 1"
-              class="mint-dose-calculator__preview-arrow"
-            >
-              →
-            </span>
-          </template>
-        </div>
-      </div>
-
-      <div v-else-if="serialResult?.error" class="mint-dose-calculator__error">
-        {{ serialResult.error }}
-      </div>
-    </div>
-
-    <!-- Conversion form -->
-    <div
-      v-else-if="activeMode === 'conversion'"
-      class="mint-dose-calculator__form"
-      role="tabpanel"
-    >
-      <div class="mint-dose-calculator__field">
-        <label class="mint-dose-calculator__field-label">Input Concentration</label>
-        <ConcentrationInput
-          :disabled="disabled"
-          :molecular-weight="molecularWeight"
-          :show-conversion="true"
-          size="md"
-        />
-      </div>
-
-      <div
-        v-if="!molecularWeight"
-        class="mint-dose-calculator__error"
-      >
-        Provide molecular weight for mass ↔ molarity conversion
-      </div>
-    </div>
-
-    <!-- Molecular weight section (shown if needed) -->
-    <div
-      v-if="molecularWeight"
-      class="mint-dose-calculator__mw-section"
-    >
-      <span class="mint-dose-calculator__mw-label">
-        Molecular Weight: {{ molecularWeight }} g/mol
-      </span>
-    </div>
-
-    <!-- Apply to wells button -->
-    <div v-if="hasTargetWells" class="mint-dose-calculator__form">
-      <button
-        type="button"
-        class="mint-dose-calculator__apply-btn"
-        :disabled="!canApplyToWells || disabled"
-        @click="handleApplyToWells"
-      >
-        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-        </svg>
-        Apply to {{ targetWells?.length }} selected well{{ targetWells?.length === 1 ? '' : 's' }}
-      </button>
-    </div>
-  </div>
-</template>
-
-<style>
-@import '../styles/components/dose-calculator.css';
-</style>

package/src/components/DoseCalculatorVolumeField.vue

@@ -1,61 +0,0 @@
-<script setup lang="ts">
-/** Number + unit control used by DoseCalculator volume fields. */
-import type { VolumeUnit, VolumeValue } from '../composables/useDoseCalculator'
-
-interface Props {
-  label: string
-  modelValue: VolumeValue
-  units: VolumeUnit[]
-  disabled?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  disabled: false,
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [value: VolumeValue]
-}>()
-
-function handleValueInput(event: Event) {
-  const input = event.target as HTMLInputElement
-  const value = parseFloat(input.value)
-  if (Number.isNaN(value)) return
-  emit('update:modelValue', { ...props.modelValue, value })
-}
-
-function handleUnitChange(event: Event) {
-  const select = event.target as HTMLSelectElement
-  emit('update:modelValue', {
-    ...props.modelValue,
-    unit: select.value as VolumeUnit,
-  })
-}
-</script>
-
-<template>
-  <div class="mint-dose-calculator__field">
-    <label class="mint-dose-calculator__field-label">{{ label }}</label>
-    <div class="mint-dose-calculator__field-row">
-      <input
-        type="number"
-        :value="modelValue.value"
-        :disabled="disabled"
-        class="mint-dose-calculator__input"
-        min="0"
-        step="any"
-        @input="handleValueInput"
-      />
-      <select
-        :value="modelValue.unit"
-        :disabled="disabled"
-        class="mint-dose-calculator__select"
-        @change="handleUnitChange"
-      >
-        <option v-for="unit in units" :key="unit" :value="unit">
-          {{ unit }}
-        </option>
-      </select>
-    </div>
-  </div>
-</template>

package/src/components/DoseDesignWorkspaceView.story.vue

@@ -1,77 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import DoseDesignWorkspaceView from './DoseDesignWorkspaceView.vue'
-import type { DoseDesignControlModelOptions } from '../composables/useControlSchema'
-
-type SidebarVariant = 'analysis' | 'default'
-
-const initState = () => ({
-  title: 'Dose Design Workspace',
-  includeMolecularWeight: true,
-  plateFormat: 96,
-  selectedWells: ['A1', 'A2', 'B1', 'B2'],
-  sidebarTitle: 'Dose Controls',
-  sidebarSubtitle: 'Plate setup',
-  sidebarVariant: 'analysis' as SidebarVariant,
-  responsiveSidebar: true,
-  showSettings: true,
-})
-
-const state = ref(initState())
-const values = ref<Record<string, unknown>>({})
-
-function doseOptions(): DoseDesignControlModelOptions {
-  return {
-    selectedWells: state.value.selectedWells,
-    plateFormat: state.value.plateFormat,
-    includeMolecularWeight: state.value.includeMolecularWeight,
-  }
-}
-</script>
-
-<template>
-  <Story title="Workflow/DoseDesignWorkspaceView" :init-state="initState">
-    <Variant title="Playground">
-      <div style="min-height: 720px; background: var(--bg-secondary, #f8fafc);">
-        <DoseDesignWorkspaceView
-          v-model="values"
-          :title="state.title"
-          :dose-design-options="doseOptions()"
-          :sidebar-title="state.sidebarTitle"
-          :sidebar-subtitle="state.sidebarSubtitle"
-          :sidebar-variant="state.sidebarVariant"
-          :responsive-sidebar="state.responsiveSidebar"
-          :show-settings="state.showSettings"
-          :well-plate-props="{
-            heatmap: { enabled: true, min: 0, max: 100, colorScale: 'viridis' },
-          }"
-        />
-      </div>
-    </Variant>
-
-    <template #controls>
-      <HstText v-model="state.title" title="Title" />
-      <HstText v-model="state.sidebarTitle" title="Sidebar title" />
-      <HstText v-model="state.sidebarSubtitle" title="Sidebar subtitle" />
-      <HstCheckbox v-model="state.includeMolecularWeight" title="Molecular weight" />
-      <HstCheckbox v-model="state.responsiveSidebar" title="Responsive sidebar" />
-      <HstCheckbox v-model="state.showSettings" title="Settings" />
-      <HstSelect
-        v-model="state.sidebarVariant"
-        title="Sidebar variant"
-        :options="[
-          { label: 'Analysis', value: 'analysis' },
-          { label: 'Default', value: 'default' },
-        ]"
-      />
-      <HstSelect
-        v-model="state.plateFormat"
-        title="Plate format"
-        :options="[
-          { label: '96 wells', value: 96 },
-          { label: '384 wells', value: 384 },
-        ]"
-      />
-    </template>
-  </Story>
-</template>