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

package/src/components/ConcentrationInput.story.vue

@@ -0,0 +1,77 @@
+<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

@@ -0,0 +1,149 @@
+<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

@@ -0,0 +1,248 @@
+<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

@@ -0,0 +1,100 @@
+<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>