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

package/src/components/Tooltip.vue

@@ -1,114 +0,0 @@
-<script setup lang="ts">
-/** Floating tooltip using @floating-ui with auto-flip, delay, optional keyboard shortcut badge, and body Teleport. */
-import { ref, onBeforeUnmount, nextTick } from 'vue'
-import { computePosition, flip, offset, shift, type Placement } from '@floating-ui/dom'
-import { useEventListener } from '../composables/useEventListener'
-
-interface Props {
-  text: string
-  position?: 'top' | 'bottom' | 'left' | 'right'
-  delay?: number
-  shortcut?: string
-  maxWidth?: string | number
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  position: 'top',
-  delay: 200,
-  shortcut: undefined,
-  maxWidth: undefined,
-})
-
-const tooltipId = `mint-tooltip-${Math.random().toString(36).slice(2, 9)}`
-const visible = ref(false)
-const actualPlacement = ref<Placement>(props.position)
-const triggerRef = ref<HTMLElement | null>(null)
-const contentRef = ref<HTMLElement | null>(null)
-const coords = ref({ top: '0px', left: '0px' })
-let timeoutId: ReturnType<typeof setTimeout> | undefined
-
-async function updatePosition() {
-  if (!triggerRef.value || !contentRef.value) return
-
-  const { x, y, placement } = await computePosition(triggerRef.value, contentRef.value, {
-    placement: props.position,
-    middleware: [
-      offset(6),
-      flip(),
-      shift({ padding: 8 }),
-    ],
-  })
-
-  coords.value = { top: `${y}px`, left: `${x}px` }
-  actualPlacement.value = placement
-}
-
-useEventListener(() => window, 'scroll', updatePosition, {
-  passive: true,
-  capture: true,
-  enabled: visible,
-})
-useEventListener(() => window, 'resize', updatePosition, { enabled: visible })
-
-async function show() {
-  timeoutId = setTimeout(async () => {
-    visible.value = true
-    await nextTick()
-    await updatePosition()
-  }, props.delay)
-}
-
-function hide() {
-  clearTimeout(timeoutId)
-  timeoutId = undefined
-  visible.value = false
-}
-
-onBeforeUnmount(() => {
-  clearTimeout(timeoutId)
-})
-
-function resolvedMaxWidth(value: string | number | undefined): string | undefined {
-  if (value === undefined) return undefined
-  return typeof value === 'number' ? `${value}px` : value
-}
-</script>
-
-<template>
-  <span
-    ref="triggerRef"
-    class="mint-tooltip"
-    :aria-describedby="visible ? tooltipId : undefined"
-    @mouseenter="show"
-    @mouseleave="hide"
-    @focusin="show"
-    @focusout="hide"
-  >
-    <slot />
-    <Teleport to="body">
-      <span
-        v-if="visible"
-        :id="tooltipId"
-        ref="contentRef"
-        :class="[
-          'mint-tooltip__content',
-          `mint-tooltip__content--${actualPlacement}`,
-          maxWidth ? 'mint-tooltip__content--multiline' : '',
-        ]"
-        :style="{
-          top: coords.top,
-          left: coords.left,
-          maxWidth: resolvedMaxWidth(maxWidth),
-        }"
-        role="tooltip"
-      >
-        <span class="mint-tooltip__body">{{ text }}</span>
-        <kbd v-if="shortcut" class="mint-tooltip__shortcut">{{ shortcut }}</kbd>
-      </span>
-    </Teleport>
-  </span>
-</template>
-
-<style>
-@import '../styles/components/tooltip.css';
-</style>

package/src/components/UnitInput.story.vue

@@ -1,194 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import UnitInput from './UnitInput.vue'
-
-const sizes: ('sm' | 'md' | 'lg')[] = ['sm', 'md', 'lg']
-
-const concentrationValue = ref<number | undefined>(10)
-const concentrationUnit = ref('uM')
-
-const concentrationUnits = [
-  { value: 'M', label: 'M', factor: 1, group: 'Molar' },
-  { value: 'mM', label: 'mM', factor: 1e-3, group: 'Molar' },
-  { value: 'uM', label: 'uM', factor: 1e-6, group: 'Molar' },
-  { value: 'nM', label: 'nM', factor: 1e-9, group: 'Molar' },
-  { value: 'pM', label: 'pM', factor: 1e-12, group: 'Molar' },
-  { value: 'mg/mL', label: 'mg/mL', factor: 1e-3, group: 'Mass' },
-  { value: 'ug/mL', label: 'ug/mL', factor: 1e-6, group: 'Mass' },
-  { value: 'ng/mL', label: 'ng/mL', factor: 1e-9, group: 'Mass' },
-]
-
-const volumeUnits = [
-  { value: 'L', label: 'L', factor: 1 },
-  { value: 'mL', label: 'mL', factor: 1e-3 },
-  { value: 'uL', label: 'uL', factor: 1e-6 },
-  { value: 'nL', label: 'nL', factor: 1e-9 },
-]
-
-const temperatureUnits = [
-  { value: 'C', label: 'Celsius' },
-  { value: 'F', label: 'Fahrenheit' },
-  { value: 'K', label: 'Kelvin' },
-]
-
-const weightUnits = [
-  { value: 'kg', label: 'kg', factor: 1000 },
-  { value: 'g', label: 'g', factor: 1 },
-  { value: 'mg', label: 'mg', factor: 1e-3 },
-  { value: 'ug', label: 'ug', factor: 1e-6 },
-]
-</script>
-
-<template>
-  <Story title="Scientific/UnitInput">
-    <Variant title="Playground">
-      <template #default="{ state }">
-        <div style="padding: 2rem; max-width: 350px; margin: 0 auto;">
-          <UnitInput
-            v-model="concentrationValue"
-            v-model:unit="concentrationUnit"
-            :units="concentrationUnits"
-            :placeholder="state.placeholder"
-            :size="state.size"
-            :disabled="state.disabled"
-            :error="state.error"
-            :convert-on-unit-change="state.convertOnUnitChange"
-            :precision="state.precision"
-          />
-        </div>
-      </template>
-
-      <template #controls="{ state }">
-        <HstText v-model="state.placeholder" title="Placeholder" />
-        <HstSelect
-          v-model="state.size"
-          title="Size"
-          :options="sizes.map(s => ({ label: s, value: s }))"
-        />
-        <HstSlider v-model="state.precision" title="Precision" :min="0" :max="8" :step="1" />
-        <HstCheckbox v-model="state.convertOnUnitChange" title="Convert on Unit Change" />
-        <HstCheckbox v-model="state.disabled" title="Disabled" />
-        <HstCheckbox v-model="state.error" title="Error" />
-      </template>
-    </Variant>
-
-    <Variant title="Concentration (Grouped Units)">
-      <div style="padding: 2rem; max-width: 350px; margin: 0 auto;">
-        <p style="margin: 0 0 0.75rem; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
-          Grouped units with automatic conversion
-        </p>
-        <UnitInput
-          :model-value="10"
-          unit="uM"
-          :units="concentrationUnits"
-          convert-on-unit-change
-          :precision="3"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Volume">
-      <div style="padding: 2rem; max-width: 350px; margin: 0 auto;">
-        <UnitInput
-          :model-value="250"
-          unit="uL"
-          :units="volumeUnits"
-          convert-on-unit-change
-          :precision="2"
-          placeholder="Enter volume"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Temperature (No Conversion)">
-      <div style="padding: 2rem; max-width: 350px; margin: 0 auto;">
-        <UnitInput
-          :model-value="37"
-          unit="C"
-          :units="temperatureUnits"
-          placeholder="Enter temperature"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Weight with Min/Max">
-      <div style="padding: 2rem; max-width: 350px; margin: 0 auto;">
-        <p style="margin: 0 0 0.75rem; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
-          Clamped between 0 and 1000
-        </p>
-        <UnitInput
-          :model-value="5.5"
-          unit="mg"
-          :units="weightUnits"
-          :min="0"
-          :max="1000"
-          :step="0.1"
-          convert-on-unit-change
-          :precision="2"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="All Sizes">
-      <div style="padding: 2rem; max-width: 350px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem;">
-        <div v-for="size in sizes" :key="size">
-          <p style="margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.05em;">
-            {{ size }}
-          </p>
-          <UnitInput
-            :model-value="10"
-            unit="uM"
-            :units="concentrationUnits"
-            :size="size"
-          />
-        </div>
-      </div>
-    </Variant>
-
-    <Variant title="Error State">
-      <div style="padding: 2rem; max-width: 350px; margin: 0 auto;">
-        <UnitInput
-          :model-value="10"
-          unit="uM"
-          :units="concentrationUnits"
-          error
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Disabled State">
-      <div style="padding: 2rem; max-width: 350px; margin: 0 auto;">
-        <UnitInput
-          :model-value="37"
-          unit="C"
-          :units="temperatureUnits"
-          disabled
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Refresh · Clean Bordered + primary-softer chip">
-      <div style="padding: 2rem; max-width: 360px; display: flex; flex-direction: column; gap: 1rem;">
-        <UnitInput
-          :model-value="12.5"
-          unit="mg"
-          :units="[
-            { value: 'mg', label: 'mg' },
-            { value: 'g', label: 'g' },
-            { value: 'µg', label: 'µg' },
-            { value: 'kg', label: 'kg' },
-          ]"
-        />
-        <UnitInput
-          :model-value="37.0"
-          unit="°C"
-          :units="[
-            { value: '°C', label: '°C' },
-            { value: '°F', label: '°F' },
-            { value: 'K', label: 'K' },
-          ]"
-        />
-      </div>
-    </Variant>
-  </Story>
-</template>

package/src/components/UnitInput.vue

@@ -1,217 +0,0 @@
-<script setup lang="ts">
-/** Numeric input paired with a grouped unit selector, with optional auto-conversion and conversion hint when the unit changes. */
-import { computed, ref, watch } from 'vue'
-import type { UnitOption } from '../types'
-
-interface Props {
-  modelValue?: number
-  unit?: string
-  units: UnitOption[]
-  precision?: number
-  min?: number
-  max?: number
-  step?: number
-  placeholder?: string
-  disabled?: boolean
-  error?: boolean
-  size?: 'sm' | 'md' | 'lg'
-  convertOnUnitChange?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  precision: undefined,
-  step: undefined,
-  placeholder: 'Enter value',
-  disabled: false,
-  error: false,
-  size: 'md',
-  convertOnUnitChange: false,
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [value: number | undefined]
-  'update:unit': [unit: string]
-  'change': [data: { value: number | undefined; unit: string }]
-}>()
-
-const conversionHint = ref<string | null>(null)
-
-const currentUnit = computed(() => props.unit || (props.units.length > 0 ? props.units[0].value : ''))
-
-// Group units by their group property
-const hasGroups = computed(() => props.units.some(u => u.group))
-
-const groupedUnits = computed(() => {
-  if (!hasGroups.value) return null
-  const groups = new Map<string, UnitOption[]>()
-  const ungrouped: UnitOption[] = []
-  for (const u of props.units) {
-    if (u.group) {
-      const group = groups.get(u.group)
-      if (group) {
-        group.push(u)
-      } else {
-        groups.set(u.group, [u])
-      }
-    } else {
-      ungrouped.push(u)
-    }
-  }
-  return { groups, ungrouped }
-})
-
-function findUnit(value: string): UnitOption | undefined {
-  return props.units.find(u => u.value === value)
-}
-
-function roundToPrecision(value: number): number {
-  if (props.precision === undefined) return value
-  const factor = Math.pow(10, props.precision)
-  return Math.round(value * factor) / factor
-}
-
-function clamp(value: number): number {
-  let result = value
-  if (props.min !== undefined && result < props.min) result = props.min
-  if (props.max !== undefined && result > props.max) result = props.max
-  return result
-}
-
-function handleValueInput(event: Event) {
-  const target = event.target as HTMLInputElement
-  const value = target.value === '' ? undefined : Number(target.value)
-
-  conversionHint.value = null
-
-  if (value === undefined || isNaN(value)) {
-    emit('update:modelValue', undefined)
-    emit('change', { value: undefined, unit: currentUnit.value })
-    return
-  }
-
-  const clamped = clamp(value)
-  emit('update:modelValue', clamped)
-  emit('change', { value: clamped, unit: currentUnit.value })
-}
-
-function handleUnitChange(event: Event) {
-  const target = event.target as HTMLSelectElement
-  const newUnitValue = target.value
-  const oldUnitValue = currentUnit.value
-
-  let newValue = props.modelValue
-
-  if (props.convertOnUnitChange && newValue !== undefined) {
-    const oldUnit = findUnit(oldUnitValue)
-    const newUnit = findUnit(newUnitValue)
-
-    if (oldUnit?.factor !== undefined && newUnit?.factor !== undefined && newUnit.factor !== 0) {
-      const converted = newValue * (oldUnit.factor / newUnit.factor)
-      newValue = roundToPrecision(converted)
-      newValue = clamp(newValue)
-      conversionHint.value = `Converted from ${oldUnit.label} to ${newUnit.label}`
-      emit('update:modelValue', newValue)
-    }
-  }
-
-  emit('update:unit', newUnitValue)
-  emit('change', { value: newValue, unit: newUnitValue })
-}
-
-// Clear conversion hint after a delay
-watch(conversionHint, (hint) => {
-  if (hint) {
-    setTimeout(() => {
-      conversionHint.value = null
-    }, 3000)
-  }
-})
-</script>
-
-<template>
-  <div
-    :class="[
-      'mint-unit-input',
-      error ? 'mint-unit-input--error' : '',
-      disabled ? 'mint-unit-input--disabled' : '',
-    ]"
-  >
-    <div :class="['mint-unit-input__controls', `mint-unit-input__controls--${size}`]">
-      <input
-        type="number"
-        :value="modelValue"
-        :min="min"
-        :max="max"
-        :step="step"
-        :disabled="disabled"
-        :placeholder="placeholder"
-        :class="[
-          'mint-unit-input__value',
-          `mint-unit-input__value--${size}`,
-          disabled ? 'mint-unit-input__value--disabled' : '',
-        ]"
-        aria-label="Value"
-        @input="handleValueInput"
-      />
-
-      <div class="mint-unit-input__unit">
-        <select
-          :value="currentUnit"
-          :disabled="disabled"
-          :class="[
-            'mint-unit-input__unit-select',
-            `mint-unit-input__unit-select--${size}`,
-          ]"
-          aria-label="Unit"
-          @change="handleUnitChange"
-        >
-          <template v-if="groupedUnits">
-            <template v-if="groupedUnits.ungrouped.length > 0">
-              <option
-                v-for="u in groupedUnits.ungrouped"
-                :key="u.value"
-                :value="u.value"
-              >
-                {{ u.label }}
-              </option>
-            </template>
-            <optgroup
-              v-for="[groupLabel, groupUnits] in groupedUnits.groups"
-              :key="groupLabel"
-              :label="groupLabel"
-              class="mint-unit-input__unit-group"
-            >
-              <option
-                v-for="u in groupUnits"
-                :key="u.value"
-                :value="u.value"
-              >
-                {{ u.label }}
-              </option>
-            </optgroup>
-          </template>
-          <template v-else>
-            <option
-              v-for="u in units"
-              :key="u.value"
-              :value="u.value"
-            >
-              {{ u.label }}
-            </option>
-          </template>
-        </select>
-      </div>
-    </div>
-
-    <div
-      v-if="conversionHint"
-      class="mint-unit-input__conversion-hint"
-    >
-      {{ conversionHint }}
-    </div>
-  </div>
-</template>
-
-<style>
-@import '../styles/components/unit-input.css';
-</style>

package/src/components/WellPlate.colors.ts

@@ -1,56 +0,0 @@
-import type { HeatmapConfig } from '../types'
-
-export const DEFAULT_SAMPLE_TYPE_COLORS: Record<string, { bg: string; border: string }> = {
-  sample: { bg: 'rgba(16, 185, 129, 0.15)', border: 'rgba(16, 185, 129, 0.4)' },
-  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)' },
-}
-
-export const HEATMAP_COLORS: Record<string, string[]> = {
-  viridis: ['#440154', '#482878', '#3e4989', '#31688e', '#26828e', '#1f9e89', '#35b779', '#6ece58', '#b5de2b', '#fde725'],
-  plasma: ['#0d0887', '#46039f', '#7201a8', '#9c179e', '#bd3786', '#d8576b', '#ed7953', '#fb9f3a', '#fdca26', '#f0f921'],
-  turbo: ['#30123b', '#4145ab', '#4675ed', '#39a2fc', '#1bcfd4', '#24e79e', '#71f05f', '#c1f034', '#f1c83c', '#f99538', '#e45a31', '#ba2512', '#7a0403'],
-}
-
-export function conditionGradientStyle(
-  color: string,
-  concentration: number,
-  concentrations: number[],
-): Record<string, string> {
-  const min = Math.min(...concentrations)
-  const max = Math.max(...concentrations)
-  const t = max <= min ? 1 : (concentration - min) / (max - min)
-  const opacity = 0.25 + t * 0.50
-  const r = parseInt(color.slice(1, 3), 16)
-  const g = parseInt(color.slice(3, 5), 16)
-  const b = parseInt(color.slice(5, 7), 16)
-  const er = 255 * (1 - opacity) + r * opacity
-  const eg = 255 * (1 - opacity) + g * opacity
-  const eb = 255 * (1 - opacity) + b * opacity
-  const luminance = (0.299 * er + 0.587 * eg + 0.114 * eb) / 255
-  return {
-    backgroundColor: `rgba(${r}, ${g}, ${b}, ${opacity})`,
-    color: luminance > 0.55 ? '#1e293b' : '#ffffff',
-  }
-}
-
-export function formatConcentration(value: number): string {
-  if (value >= 1000) return `${value / 1000}k`
-  if (value < 0.01) return value.toExponential(0)
-  return String(value)
-}
-
-export function getHeatmapColor(config: HeatmapConfig | undefined, value: number | undefined): string | null {
-  if (!config?.enabled || value === undefined) return null
-
-  const min = config.min ?? 0
-  const max = config.max ?? 1
-  const normalized = Math.max(0, Math.min(1, (value - min) / (max - min)))
-  const colors = config.colorScale === 'custom' && config.customColors?.length
-    ? config.customColors
-    : HEATMAP_COLORS[config.colorScale || 'viridis']
-  const index = Math.min(Math.floor(normalized * (colors.length - 1)), colors.length - 1)
-  return colors[index]
-}

package/src/components/WellPlate.conditions.ts

@@ -1,100 +0,0 @@
-import type { ColumnCondition, RowCondition } from '../types'
-
-export interface ConditionEntry<TCondition> {
-  condition: TCondition
-  indexInGroup: number
-}
-
-export type ColumnConditionSpan =
-  | { condition: ColumnCondition; colspan: number }
-  | { gap: true; colspan: number }
-
-export type RowConditionSpan =
-  | { condition: RowCondition; rowspan: number; startRow: number }
-  | { gap: true; rowspan: number; startRow: number }
-
-export function createColumnConditionMap(
-  conditions: ColumnCondition[],
-): Map<number, ConditionEntry<ColumnCondition>> {
-  const map = new Map<number, ConditionEntry<ColumnCondition>>()
-  for (const condition of conditions) {
-    condition.cols.forEach((col, indexInGroup) => {
-      map.set(col, { condition, indexInGroup })
-    })
-  }
-  return map
-}
-
-export function createRowConditionMap(
-  conditions: RowCondition[],
-): Map<string, ConditionEntry<RowCondition>> {
-  const map = new Map<string, ConditionEntry<RowCondition>>()
-  for (const condition of conditions) {
-    condition.rows.forEach((row, indexInGroup) => {
-      map.set(row, { condition, indexInGroup })
-    })
-  }
-  return map
-}
-
-export function createColumnConditionSpans(
-  cols: number[],
-  conditionMap: ReadonlyMap<number, ConditionEntry<ColumnCondition>>,
-): ColumnConditionSpan[] {
-  const spans: ColumnConditionSpan[] = []
-  let index = 0
-
-  while (index < cols.length) {
-    const entry = conditionMap.get(cols[index])
-    if (entry?.indexInGroup === 0) {
-      spans.push({ condition: entry.condition, colspan: entry.condition.cols.length })
-      index += entry.condition.cols.length
-      continue
-    }
-
-    let gapCount = 0
-    while (index + gapCount < cols.length && !conditionMap.has(cols[index + gapCount])) {
-      gapCount++
-    }
-    spans.push({ gap: true, colspan: gapCount || 1 })
-    index += gapCount || 1
-  }
-
-  return spans
-}
-
-export function createRowConditionSpans(
-  rows: string[],
-  conditionMap: ReadonlyMap<string, ConditionEntry<RowCondition>>,
-): RowConditionSpan[] {
-  const spans: RowConditionSpan[] = []
-  let index = 0
-
-  while (index < rows.length) {
-    const entry = conditionMap.get(rows[index])
-    if (entry?.indexInGroup === 0) {
-      spans.push({ condition: entry.condition, rowspan: entry.condition.rows.length, startRow: index })
-      index += entry.condition.rows.length
-      continue
-    }
-
-    let gapCount = 0
-    while (index + gapCount < rows.length && !conditionMap.has(rows[index + gapCount])) {
-      gapCount++
-    }
-    spans.push({ gap: true, rowspan: gapCount || 1, startRow: index })
-    index += gapCount || 1
-  }
-
-  return spans
-}
-
-export function createRowConditionSpanByRow(
-  spans: RowConditionSpan[],
-): Map<number, RowConditionSpan> {
-  const map = new Map<number, RowConditionSpan>()
-  for (const span of spans) {
-    map.set(span.startRow, span)
-  }
-  return map
-}