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

package/src/components/ConcentrationInput.story.vue

@@ -1,77 +0,0 @@
-<script setup lang="ts">
-import ConcentrationInput from './ConcentrationInput.vue'
-import type { ConcentrationValue, ConcentrationUnit } from '../composables/useConcentrationUnits'
-
-function initState() {
-  return {
-    modelValue: { value: 100, unit: 'uM' as ConcentrationUnit } as ConcentrationValue | undefined,
-    showConversion: true,
-    disabled: false,
-    error: false,
-    size: 'md' as const,
-    placeholder: 'Enter value',
-  }
-}
-</script>
-
-<template>
-  <Story title="Lab/ConcentrationInput">
-    <Variant title="Playground" :init-state="initState">
-      <template #default="{ state }">
-        <div style="padding: 2rem; max-width: 400px;">
-          <ConcentrationInput
-            v-model="state.modelValue"
-            :show-conversion="state.showConversion"
-            :disabled="state.disabled"
-            :error="state.error"
-            :size="state.size"
-            :placeholder="state.placeholder"
-          />
-        </div>
-      </template>
-      <template #controls="{ state }">
-        <HstCheckbox v-model="state.showConversion" title="Show Conversion" />
-        <HstCheckbox v-model="state.disabled" title="Disabled" />
-        <HstCheckbox v-model="state.error" title="Error" />
-        <HstSelect
-          v-model="state.size"
-          title="Size"
-          :options="[
-            { value: 'sm', label: 'Small' },
-            { value: 'md', label: 'Medium' },
-            { value: 'lg', label: 'Large' },
-          ]"
-        />
-        <HstText v-model="state.placeholder" title="Placeholder" />
-      </template>
-    </Variant>
-
-    <Variant title="With Min/Max">
-      <div style="padding: 2rem; max-width: 400px;">
-        <ConcentrationInput
-          :model-value="{ value: 50, unit: 'uM' as ConcentrationUnit }"
-          :min="0"
-          :max="1000"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Disabled">
-      <div style="padding: 2rem; max-width: 400px;">
-        <ConcentrationInput
-          :model-value="{ value: 10, unit: 'mM' as ConcentrationUnit }"
-          disabled
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Error State">
-      <div style="padding: 2rem; max-width: 400px;">
-        <ConcentrationInput
-          :model-value="{ value: -5, unit: 'nM' as ConcentrationUnit }"
-          error
-        />
-      </div>
-    </Variant>
-  </Story>
-</template>

package/src/components/ConcentrationInput.vue

@@ -1,149 +0,0 @@
-<script setup lang="ts">
-/** Paired numeric + unit input for reagent concentrations (pM–M, mg/mL, etc.) with optional molar-mass conversion hint. */
-import { computed, watch } from 'vue'
-import {
-  useConcentrationUnits,
-  type ConcentrationValue,
-  type ConcentrationUnit,
-} from '../composables/useConcentrationUnits'
-import UnitInput from './UnitInput.vue'
-
-interface Props {
-  modelValue?: ConcentrationValue
-  allowedUnits?: ConcentrationUnit[]
-  showConversion?: boolean
-  molecularWeight?: number
-  min?: number
-  max?: number
-  disabled?: boolean
-  error?: boolean
-  size?: 'sm' | 'md' | 'lg'
-  placeholder?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  showConversion: true,
-  disabled: false,
-  error: false,
-  size: 'md',
-  placeholder: 'Enter value',
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [value: ConcentrationValue | undefined]
-}>()
-
-const { unitCategories, getConversionHint } = useConcentrationUnits()
-
-// Filter categories based on allowedUnits
-const filteredCategories = computed(() => {
-  const allowedUnits = props.allowedUnits
-  if (!allowedUnits || allowedUnits.length === 0) {
-    return unitCategories.value
-  }
-  return unitCategories.value
-    .map(cat => ({
-      label: cat.label,
-      units: cat.units.filter(u => allowedUnits.includes(u)),
-    }))
-    .filter(cat => cat.units.length > 0)
-})
-
-// Flatten all available units
-const availableUnits = computed(() => {
-  return filteredCategories.value.flatMap(cat => cat.units)
-})
-
-const unitOptions = computed(() =>
-  filteredCategories.value.flatMap(category =>
-    category.units.map(unit => ({
-      value: unit,
-      label: unit,
-      group: filteredCategories.value.length > 1 ? category.label : undefined,
-    }))
-  )
-)
-
-// Current value and unit
-const currentValue = computed(() => props.modelValue?.value)
-const currentUnit = computed(() => props.modelValue?.unit || availableUnits.value[0] || 'µM')
-
-// Conversion hint
-const conversionHint = computed(() => {
-  if (!props.showConversion || !props.modelValue) return null
-  return getConversionHint(props.modelValue)
-})
-
-function handleValueUpdate(value: number | undefined) {
-  if (value === undefined || isNaN(value)) {
-    emit('update:modelValue', undefined)
-    return
-  }
-
-  // Apply min/max constraints
-  let clampedValue = value
-  if (props.min !== undefined && clampedValue < props.min) {
-    clampedValue = props.min
-  }
-  if (props.max !== undefined && clampedValue > props.max) {
-    clampedValue = props.max
-  }
-
-  emit('update:modelValue', {
-    value: clampedValue,
-    unit: currentUnit.value,
-  })
-}
-
-function handleUnitUpdate(unit: string) {
-  emit('update:modelValue', {
-    value: currentValue.value ?? 0,
-    unit: unit as ConcentrationUnit,
-  })
-}
-
-// Ensure modelValue always has a valid unit
-watch(availableUnits, (units) => {
-  if (props.modelValue && !units.includes(props.modelValue.unit)) {
-    emit('update:modelValue', {
-      value: props.modelValue.value,
-      unit: units[0] || 'µM',
-    })
-  }
-}, { immediate: true })
-</script>
-
-<template>
-  <div
-    :class="[
-      'mint-concentration-input',
-      error ? 'mint-concentration-input--error' : '',
-      disabled ? 'mint-concentration-input--disabled' : '',
-    ]"
-  >
-    <UnitInput
-      :model-value="currentValue"
-      :unit="currentUnit"
-      :units="unitOptions"
-      :min="min"
-      :max="max"
-      :disabled="disabled"
-      :error="error"
-      :size="size"
-      :placeholder="placeholder"
-      @update:model-value="handleValueUpdate"
-      @update:unit="handleUnitUpdate"
-    />
-
-    <div
-      v-if="showConversion && conversionHint"
-      class="mint-concentration-input__conversion"
-    >
-      {{ conversionHint }}
-    </div>
-  </div>
-</template>
-
-<style>
-@import '../styles/components/concentration-input.css';
-</style>

package/src/components/ConfirmDialog.story.vue

@@ -1,248 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import ConfirmDialog from './ConfirmDialog.vue'
-import BaseButton from './BaseButton.vue'
-import type { ConfirmVariant } from '../types'
-
-const variants: ConfirmVariant[] = ['danger', 'warning', 'info']
-
-const dialogOpen = ref(false)
-const dangerOpen = ref(false)
-const warningOpen = ref(false)
-const infoOpen = ref(false)
-const loadingOpen = ref(false)
-const saveOpen = ref(false)
-const uninstallOpen = ref(false)
-const isLoading = ref(false)
-const lastAction = ref<string>('')
-
-function log(action: string) {
-  lastAction.value = action
-}
-
-function handleConfirmLoading() {
-  isLoading.value = true
-  setTimeout(() => {
-    isLoading.value = false
-    loadingOpen.value = false
-    log('submitted')
-  }, 2000)
-}
-
-function initPlayground() {
-  return {
-    title: 'Delete experiment',
-    subtitle: 'EXP-2024-001 · Dose-response',
-    message: 'This will permanently delete the experiment and all associated data. This action cannot be undone.',
-    variant: 'danger' as ConfirmVariant,
-    confirmLabel: 'Delete',
-    cancelLabel: 'Cancel',
-    loading: false,
-  }
-}
-</script>
-
-<template>
-  <Story title="Layout/ConfirmDialog">
-    <!-- Playground — all props wired, BaseButton trigger -->
-    <Variant title="Playground" :init-state="initPlayground">
-      <template #default="{ state }">
-        <div style="padding: 2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;">
-          <BaseButton variant="secondary" @click="dialogOpen = true">Open dialog</BaseButton>
-          <div v-if="lastAction" style="font-family: 'Fira Code', monospace; font-size: 0.75rem; color: var(--text-muted);">
-            Last event: <code>{{ lastAction }}</code>
-          </div>
-          <ConfirmDialog
-            v-model="dialogOpen"
-            :title="state.title"
-            :subtitle="state.subtitle"
-            :message="state.message"
-            :variant="state.variant"
-            :confirm-label="state.confirmLabel"
-            :cancel-label="state.cancelLabel"
-            :loading="state.loading"
-            @confirm="() => { dialogOpen = false; log('confirm') }"
-            @cancel="log('cancel')"
-          />
-        </div>
-      </template>
-
-      <template #controls="{ state }">
-        <HstText v-model="state.title" title="Title" />
-        <HstText v-model="state.subtitle" title="Subtitle (context line)" />
-        <HstText v-model="state.message" title="Message" />
-        <HstSelect
-          v-model="state.variant"
-          title="Variant"
-          :options="variants.map(v => ({ label: v, value: v }))"
-        />
-        <HstText v-model="state.confirmLabel" title="Confirm label" />
-        <HstText v-model="state.cancelLabel" title="Cancel label" />
-        <HstCheckbox v-model="state.loading" title="Loading" />
-      </template>
-    </Variant>
-
-    <!-- Plugin uninstall — the canonical refresh-design pattern with subtitle -->
-    <Variant title="Plugin uninstall" :init-state="() => ({})">
-      <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
-        <BaseButton variant="danger" @click="uninstallOpen = true">Uninstall plugin</BaseButton>
-        <ConfirmDialog
-          v-model="uninstallOpen"
-          title="Confirm uninstall"
-          subtitle="mint-plugin-metabolomics · v2.4.1"
-          message="Removing this plugin will delete its routes from the platform on next restart. Plugin data and registered experiment types will be preserved."
-          variant="danger"
-          confirm-label="Uninstall"
-          @confirm="() => { uninstallOpen = false; log('uninstalled metabolomics') }"
-        />
-      </div>
-      <p style="text-align: center; font-size: 0.75rem; color: var(--text-muted); padding: 0 2rem 1rem;">
-        The canonical refresh layout: title + subtitle (plugin name · version) sit in the modal header; body holds
-        only the explanatory message; red confirm carries the variant intent — no icon needed.
-      </p>
-    </Variant>
-
-    <!-- Danger — destructive, the canonical use case -->
-    <Variant title="Danger" :init-state="() => ({})">
-      <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
-        <BaseButton variant="danger" @click="dangerOpen = true">Delete experiment</BaseButton>
-        <ConfirmDialog
-          v-model="dangerOpen"
-          title="Delete Experiment"
-          message="Are you sure you want to delete this experiment? All associated data, plates, and analysis results will be permanently removed. This action cannot be undone."
-          variant="danger"
-          confirm-label="Delete"
-          @confirm="() => { dangerOpen = false; log('deleted') }"
-        />
-      </div>
-    </Variant>
-
-    <!-- Warning — discard unsaved changes -->
-    <Variant title="Warning" :init-state="() => ({})">
-      <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
-        <BaseButton variant="secondary" @click="warningOpen = true">Reset analysis</BaseButton>
-        <ConfirmDialog
-          v-model="warningOpen"
-          title="Reset Analysis"
-          message="This will discard all unsaved changes and reset the analysis to its initial state. Do you want to continue?"
-          variant="warning"
-          confirm-label="Reset"
-          @confirm="() => { warningOpen = false; log('reset') }"
-        />
-      </div>
-    </Variant>
-
-    <!-- Info — positive affirmation (CTA proceeding with an action) -->
-    <Variant title="Info" :init-state="() => ({})">
-      <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
-        <BaseButton variant="primary" @click="infoOpen = true">Export data</BaseButton>
-        <ConfirmDialog
-          v-model="infoOpen"
-          title="Export Data"
-          message="This will generate a CSV export of all 96 wells across 3 plates. The download will start automatically."
-          variant="info"
-          confirm-label="Export"
-          @confirm="() => { infoOpen = false; log('exported') }"
-        />
-      </div>
-    </Variant>
-
-    <!-- Save to Experiment — the actual ExperimentPopover flow -->
-    <Variant title="Save to Experiment" :init-state="() => ({})">
-      <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
-        <BaseButton variant="primary" @click="saveOpen = true">Save to EXP-042</BaseButton>
-        <ConfirmDialog
-          v-model="saveOpen"
-          title="Save to Experiment"
-          message="Save current data to DRP Dose-Response Screen · March 2026?"
-          variant="info"
-          confirm-label="Save"
-          @confirm="() => { saveOpen = false; log('saved to EXP-042') }"
-        />
-      </div>
-      <p style="text-align: center; font-size: 0.75rem; color: var(--text-muted); padding: 0 2rem 1rem;">
-        The exact dialog raised from <code>ExperimentPopover</code> when the user clicks the inline save in the topbar
-        with <code>confirmSave: true</code>.
-      </p>
-    </Variant>
-
-    <!-- Loading state — confirm button shows spinner, dialog stays open -->
-    <Variant title="Loading state" :init-state="() => ({})">
-      <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
-        <BaseButton variant="primary" @click="loadingOpen = true">Submit results</BaseButton>
-        <ConfirmDialog
-          v-model="loadingOpen"
-          title="Submit Results"
-          message="Submit the analysis results to the platform? This may take a moment."
-          variant="info"
-          confirm-label="Submit"
-          :loading="isLoading"
-          @confirm="handleConfirmLoading"
-        />
-      </div>
-      <p style="text-align: center; font-size: 0.75rem; color: var(--text-muted); padding: 0 2rem 1rem;">
-        Click Submit → confirm button spins for 2s, cancel disables, overlay click/escape blocked while loading.
-      </p>
-    </Variant>
-  </Story>
-</template>
-
-<docs lang="md">
-## ConfirmDialog
-
-A compact modal for confirming a decision. Wraps `BaseModal` (inheriting its
-refresh-design container polish: 2-layer shadow, lighter overlay, 15px title
-hierarchy, horizontal divider between header and body).
-
-### Anatomy (refresh layout)
-
-```
-┌─────────────────────────────────────────────┐
-│  Title                                   ×  │  ← BaseModal header
-│  Subtitle line (context)                    │     (title + optional subtitle)
-├─────────────────────────────────────────────┤
-│                                             │
-│  The message explains what will happen and  │  ← body: just the message
-│  any consequences the user should know.     │
-│                                             │
-├─────────────────────────────────────────────┤
-│                     [ Cancel ]  [ Action ]  │  ← footer: buttons flush-right
-└─────────────────────────────────────────────┘
-```
-
-- **Title + subtitle** live at the top in `BaseModal`'s header — the subtitle is
-  a one-line context string (plugin name · version, experiment code, etc.)
-- **Body** holds only the message. No forced icon sidebar — the variant's intent
-  is carried by the confirm button's color
-- **Icon is opt-in**: pass a `#icon` slot only if your message needs an extra
-  visual signal. Most confirmations don't.
-
-### Button tactile system
-
-The Cancel + Confirm buttons use the **same system as BaseButton**:
-
-- Hover: `translateY(-1px)` + `var(--shadow-sm)` over 150ms with `--mint-ease-out-quart`
-- Press: snap to `translateY(0)`, shadow cleared, gradient flattened at 50ms
-- Filled confirm gets the 12% white gradient overlay
-- `prefers-reduced-motion` guarded
-
-### Variant semantics
-
-| Variant | Confirm button color | When to use |
-|---|---|---|
-| `danger` | `--mint-error` | Destructive or irreversible actions (delete, uninstall, drop table) |
-| `warning` | `--mint-warning` | Potentially lossy actions (discard unsaved, overwrite config) |
-| `info` | `--color-primary` | Affirmative CTAs (save, submit, export, publish) |
-
-**Why `info` uses `--color-primary` not `--mint-info`**: info-as-CTA means
-"proceed with this positive action" — it should match the primary button color,
-not the informational-banner cyan that's reserved for non-action status pills.
-
-### Loading state contract
-
-When `loading: true`:
-- Confirm button replaces its label with a spinner, disables hover
-- Cancel button is disabled
-- Overlay click and Escape-to-close are both blocked — the user can't
-  accidentally dismiss an in-flight operation
-</docs>

package/src/components/ConfirmDialog.vue

@@ -1,100 +0,0 @@
-<script setup lang="ts">
-/** Confirm/cancel dialog with danger, warning, and info variants; blocks close while loading. */
-import { computed } from 'vue'
-import type { ButtonVariant } from '../types'
-import BaseModal from './BaseModal.vue'
-import BaseButton from './BaseButton.vue'
-
-interface Props {
-  modelValue: boolean
-  title?: string
-  subtitle?: string
-  message?: string
-  variant?: 'danger' | 'warning' | 'info'
-  confirmLabel?: string
-  cancelLabel?: string
-  loading?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  title: 'Confirm',
-  variant: 'danger',
-  confirmLabel: 'Confirm',
-  cancelLabel: 'Cancel',
-  loading: false,
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [value: boolean]
-  confirm: []
-  cancel: []
-}>()
-
-function handleCancel() {
-  emit('update:modelValue', false)
-  emit('cancel')
-}
-
-function handleConfirm() {
-  emit('confirm')
-}
-
-const confirmVariant = computed<ButtonVariant>(() => {
-  if (props.variant === 'info') return 'primary'
-  if (props.variant === 'warning') return 'cta'
-  return 'danger'
-})
-</script>
-
-<template>
-  <BaseModal
-    :model-value="modelValue"
-    :title="title"
-    :subtitle="subtitle"
-    size="sm"
-    :closable="!loading"
-    :close-on-overlay="!loading"
-    :close-on-escape="!loading"
-    @update:model-value="emit('update:modelValue', $event)"
-  >
-    <div class="mint-confirm">
-      <!-- Icon is now opt-in via slot. Refresh design keeps the body focused on
-           the message; variant intent is carried by the confirm button's color. -->
-      <div
-        v-if="$slots.icon"
-        :class="['mint-confirm__icon', `mint-confirm__icon--${variant}`]"
-      >
-        <slot name="icon" />
-      </div>
-      <p v-if="message" class="mint-confirm__message">{{ message }}</p>
-      <slot />
-    </div>
-
-    <template #footer>
-      <div class="mint-confirm__footer">
-        <BaseButton
-          type="button"
-          variant="secondary"
-          size="md"
-          :disabled="loading"
-          @click="handleCancel"
-        >
-          {{ cancelLabel }}
-        </BaseButton>
-        <BaseButton
-          type="button"
-          :variant="confirmVariant"
-          size="md"
-          :loading="loading"
-          @click="handleConfirm"
-        >
-          {{ confirmLabel }}
-        </BaseButton>
-      </div>
-    </template>
-  </BaseModal>
-</template>
-
-<style>
-@import '../styles/components/confirm-dialog.css';
-</style>