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

package/src/components/WellPlate.vue

@@ -0,0 +1,497 @@
+<script setup lang="ts">
+/** Interactive 96/384-well plate grid with drag-to-select, heatmap overlays, per-well editing, and sample-color mapping. */
+import { ref, computed } from 'vue'
+import type { WellPlateFormat, WellPlateSelectionMode, WellPlateSize, Well, HeatmapConfig, WellShape, WellEditField, WellEditData, WellLegendItem, ColumnCondition, RowCondition, WellSampleDropData, WellSampleDropParser } from '../types'
+import { useEventListener } from '../composables/useEventListener'
+import WellEditPopupInternal from './internal/WellEditPopupInternal.vue'
+import {
+  conditionGradientStyle,
+  formatConcentration as formatConc,
+  HEATMAP_COLORS,
+} from './WellPlate.colors'
+import {
+  createColumnConditionMap,
+  createColumnConditionSpans,
+  createRowConditionMap,
+  createRowConditionSpanByRow,
+  createRowConditionSpans,
+} from './WellPlate.conditions'
+import {
+  createPlateColumnLabels,
+  createPlateRowLabels,
+  createWellGrid,
+  PLATE_CONFIGS,
+  WELL_PLATE_SIZE_CONFIGS,
+} from './WellPlate.geometry'
+import { useWellPlateInteraction } from './WellPlate.interaction'
+import {
+  sampleTypeIndicator,
+  wellBadge,
+  wellClasses,
+  wellLabel,
+  wellStyle,
+} from './WellPlate.rendering'
+import { DEFAULT_WELL_LEGEND_ITEMS } from './WellPlate.legend'
+
+interface Props {
+  modelValue?: string[]
+  format?: WellPlateFormat
+  wells?: Record<string, Partial<Well>>
+  selectionMode?: WellPlateSelectionMode
+  showLabels?: boolean
+  showWellIds?: boolean
+  showSampleTypeIndicator?: boolean
+  heatmap?: HeatmapConfig
+  sampleColors?: Record<string, string>
+  zoom?: number
+  disabled?: boolean
+  readonly?: boolean
+  size?: WellPlateSize
+  wellShape?: WellShape
+  showWellLabels?: boolean
+  showBadges?: boolean
+  editable?: boolean
+  editFields?: WellEditField[]
+  defaultInjectionVolume?: number
+  showLegend?: boolean
+  legendItems?: WellLegendItem[]
+  columnConditions?: ColumnCondition[]
+  rowConditions?: RowCondition[]
+  allowSampleDrop?: boolean
+  sampleDropParser?: WellSampleDropParser
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: () => [],
+  format: 96,
+  wells: () => ({}),
+  selectionMode: 'multiple',
+  showLabels: true,
+  showWellIds: false,
+  showSampleTypeIndicator: false,
+  heatmap: () => ({ enabled: false }),
+  sampleColors: () => ({}),
+  zoom: 1,
+  disabled: false,
+  readonly: false,
+  size: 'md',
+  wellShape: 'rounded',
+  showWellLabels: false,
+  showBadges: false,
+  editable: false,
+  editFields: () => ['label', 'sampleType', 'injectionVolume', 'injectionCount', 'customMethod'],
+  defaultInjectionVolume: 5,
+  showLegend: false,
+  legendItems: undefined,
+  columnConditions: () => [],
+  rowConditions: () => [],
+  allowSampleDrop: false,
+  sampleDropParser: undefined,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [wellIds: string[]]
+  'well-click': [wellId: string, event: MouseEvent]
+  'well-hover': [wellId: string | null, event?: MouseEvent]
+  'selection-change': [wellIds: string[]]
+  'context-menu': [wellId: string, event: MouseEvent]
+  'well-move': [sourceWellId: string, targetWellId: string]
+  'well-edit': [wellId: string, data: WellEditData]
+  'well-clear': [wellId: string]
+  'sample-drop': [wellId: string, data: WellSampleDropData, event: DragEvent]
+}>()
+
+interface WellEditorSlotProps {
+  wellId: string
+  wellData?: Partial<Well>
+  editFields: WellEditField[]
+  defaultInjectionVolume: number
+  position: { x: number; y: number }
+  save: (data: WellEditData) => void
+  clear: () => void
+  close: () => void
+}
+
+defineSlots<{
+  'well-editor'?: (props: WellEditorSlotProps) => unknown
+}>()
+
+const plateRef = ref<HTMLElement | null>(null)
+const tableRef = ref<HTMLElement | null>(null)
+
+const plateConfig = computed(() => PLATE_CONFIGS[props.format])
+
+const rowLabels = computed(() => createPlateRowLabels(plateConfig.value))
+
+const colLabels = computed(() => createPlateColumnLabels(plateConfig.value))
+
+const wellGrid = computed(() => createWellGrid(plateConfig.value, rowLabels.value, props.wells))
+
+const sizeConfig = computed(() => WELL_PLATE_SIZE_CONFIGS[props.size])
+
+const isFillMode = computed(() => props.size === 'fill')
+
+const activeLegendItems = computed(() => props.legendItems ?? DEFAULT_WELL_LEGEND_ITEMS)
+
+// --- Condition header helpers ---
+
+const hasColumnConditions = computed(() => props.columnConditions.length > 0)
+const hasRowConditions = computed(() => props.rowConditions.length > 0)
+
+const colConditionMap = computed(() => createColumnConditionMap(props.columnConditions))
+const rowConditionMap = computed(() => createRowConditionMap(props.rowConditions))
+const colConditionSpans = computed(() => createColumnConditionSpans(colLabels.value, colConditionMap.value))
+const rowConditionSpans = computed(() => createRowConditionSpans(rowLabels.value, rowConditionMap.value))
+const rowConditionSpanByRow = computed(() => createRowConditionSpanByRow(rowConditionSpans.value))
+
+const {
+  dragSourceWell,
+  dragTargetWell,
+  hoveredWell,
+  editingWellId,
+  editPopupPosition,
+  dragSelectedWells,
+  isSelected,
+  handleWellClick,
+  handleEditSave,
+  handleEditClear,
+  handleEditClose,
+  handleWellMouseDown,
+  handleWellMouseEnter,
+  handleWellMouseLeave,
+  handleMouseUp,
+  handleContextMenu,
+  handleDragStart,
+  handleDragOver,
+  handleDragLeave,
+  handleDrop,
+  handleDragEnd,
+  handleKeyDown,
+} = useWellPlateInteraction({
+  modelValue: () => props.modelValue,
+  selectionMode: () => props.selectionMode,
+  disabled: () => props.disabled,
+  readonly: () => props.readonly,
+  editable: () => props.editable,
+  allowSampleDrop: () => props.allowSampleDrop,
+  sampleDropParser: () => props.sampleDropParser,
+  rowLabels: () => rowLabels.value,
+  wellGrid: () => wellGrid.value,
+  emitSelected: (wellIds) => {
+    emit('update:modelValue', wellIds)
+    emit('selection-change', wellIds)
+  },
+  emitWellClick: (wellId, event) => emit('well-click', wellId, event),
+  emitWellHover: (wellId, event) => emit('well-hover', wellId, event),
+  emitContextMenu: (wellId, event) => emit('context-menu', wellId, event),
+  emitWellMove: (sourceWellId, targetWellId) => emit('well-move', sourceWellId, targetWellId),
+  emitWellEdit: (wellId, data) => emit('well-edit', wellId, data),
+  emitWellClear: wellId => emit('well-clear', wellId),
+  emitSampleDrop: (wellId, data, event) => emit('sample-drop', wellId, data, event),
+})
+
+function getWellClasses(well: Well): string[] {
+  return wellClasses(well, {
+    wellShape: props.wellShape,
+    selectionMode: props.selectionMode,
+    selected: isSelected(well.id),
+    dragOver: dragSelectedWells.value.has(well.id),
+    hovered: hoveredWell.value === well.id,
+    disabled: props.disabled || well.state === 'disabled',
+    readonly: props.readonly,
+    dragSource: dragSourceWell.value === well.id,
+    dragTarget: dragTargetWell.value === well.id,
+  })
+}
+
+function getWellStyle(well: Well): Record<string, string> {
+  return wellStyle(well, {
+    heatmap: props.heatmap,
+    sampleColors: props.sampleColors,
+  })
+}
+
+function getSampleTypeIndicator(well: Well): string | null {
+  return sampleTypeIndicator(well, props.showSampleTypeIndicator)
+}
+
+function getWellLabel(well: Well): string | undefined {
+  return wellLabel(well, props.showWellLabels)
+}
+
+function getWellBadge(well: Well): { text: string; color: string } | null {
+  return wellBadge(well, props.showBadges)
+}
+
+useEventListener(() => document, 'mouseup', handleMouseUp)
+useEventListener(() => document, 'keydown', handleKeyDown)
+
+const containerStyle = computed(() =>
+  isFillMode.value ? {} : {
+    transform: `scale(${props.zoom})`,
+    transformOrigin: 'top left',
+  }
+)
+
+const tableStyle = computed(() => ({
+  borderCollapse: 'separate' as const,
+  borderSpacing: sizeConfig.value.gap,
+  ...(isFillMode.value ? { width: '100%', tableLayout: 'fixed' as const } : {}),
+}))
+</script>
+
+<template>
+  <div
+    ref="plateRef"
+    :class="['mint-well-plate', isFillMode ? 'mint-well-plate--fill' : 'mint-well-plate--inline']"
+    :style="containerStyle"
+  >
+    <div class="mint-well-plate__scroll">
+      <div class="mint-well-plate__content">
+        <table
+          ref="tableRef"
+          class="mint-well-plate__table"
+          role="grid"
+          :aria-label="`${props.format}-well plate`"
+          :style="tableStyle"
+        >
+        <!-- Column condition label row (drug name + unit) -->
+        <thead v-if="hasColumnConditions">
+          <tr>
+            <!-- Spacer for row header column -->
+            <th :style="{ width: sizeConfig.headerWidth }"></th>
+            <!-- Spacer for row condition column -->
+            <th v-if="hasRowConditions" :style="{ width: sizeConfig.headerWidth }"></th>
+            <template v-for="(span, idx) in colConditionSpans" :key="'clabel-' + idx">
+              <th
+                v-if="'condition' in span"
+                :colspan="span.colspan"
+                class="mint-well-plate__condition-label"
+                :style="{
+                  height: sizeConfig.headerHeight,
+                  fontSize: sizeConfig.fontSize,
+                  color: span.condition.color,
+                }"
+              >
+                {{ span.condition.label }}<template v-if="span.condition.unit"> ({{ span.condition.unit }})</template>
+              </th>
+              <th v-else :colspan="span.colspan"></th>
+            </template>
+          </tr>
+        </thead>
+        <!-- Column headers (with concentration overlay when conditions present) -->
+        <thead v-if="props.showLabels">
+          <tr>
+            <th :style="{ width: sizeConfig.headerWidth, height: sizeConfig.headerHeight }"></th>
+            <!-- Spacer for row condition column in column header row -->
+            <th v-if="hasRowConditions" :style="{ width: sizeConfig.headerWidth, height: sizeConfig.headerHeight }"></th>
+            <th
+              v-for="col in colLabels"
+              :key="col"
+              class="mint-well-plate__col-header"
+              :style="{ height: sizeConfig.headerHeight, fontSize: sizeConfig.fontSize }"
+            >
+              <template v-for="entry in [colConditionMap.get(col)]" :key="col">
+                <span
+                  v-if="entry"
+                  class="mint-well-plate__condition-cell"
+                  :style="conditionGradientStyle(
+                    entry.condition.color,
+                    entry.condition.concentrations[entry.indexInGroup],
+                    entry.condition.concentrations,
+                  )"
+                >
+                  {{ formatConc(entry.condition.concentrations[entry.indexInGroup]) }}
+                </span>
+                <template v-else>{{ col }}</template>
+              </template>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(row, rowIndex) in wellGrid" :key="rowIndex" role="row">
+            <!-- Row condition label cell (drug name, spans multiple rows) -->
+            <template v-if="hasRowConditions && rowConditionSpanByRow.has(rowIndex)">
+              <td
+                v-for="span in [rowConditionSpanByRow.get(rowIndex)!]"
+                :key="rowIndex"
+                :rowspan="span.rowspan"
+                :class="[
+                  'mint-well-plate__row-condition-label',
+                  'gap' in span ? 'mint-well-plate__row-condition-label--empty' : '',
+                ]"
+                :style="{
+                  width: sizeConfig.headerWidth,
+                  minWidth: sizeConfig.headerWidth,
+                  fontSize: sizeConfig.fontSize,
+                  ...('condition' in span ? { color: span.condition.color } : {}),
+                }"
+              >
+                <div v-if="'condition' in span" class="mint-well-plate__row-condition-wrap">
+                  <span class="mint-well-plate__row-condition-text">{{ span.condition.label }}</span>
+                </div>
+              </td>
+            </template>
+            <!-- Row header (with concentration overlay when conditions present) -->
+            <td
+              v-if="props.showLabels"
+              class="mint-well-plate__row-header"
+              :style="{
+                width: sizeConfig.headerWidth,
+                height: sizeConfig.cellHeight,
+                minWidth: sizeConfig.headerWidth,
+                minHeight: sizeConfig.cellHeight,
+                fontSize: sizeConfig.fontSize,
+              }"
+            >
+              <template v-for="entry in [rowConditionMap.get(rowLabels[rowIndex])]" :key="rowIndex">
+                <span
+                  v-if="entry"
+                  class="mint-well-plate__condition-cell"
+                  :style="conditionGradientStyle(
+                    entry.condition.color,
+                    entry.condition.concentrations[entry.indexInGroup],
+                    entry.condition.concentrations,
+                  )"
+                >
+                  {{ formatConc(entry.condition.concentrations[entry.indexInGroup]) }}
+                </span>
+                <template v-else>{{ rowLabels[rowIndex] }}</template>
+              </template>
+            </td>
+
+            <!-- Wells -->
+            <td v-for="well in row" :key="well.id" class="mint-well-plate__cell">
+              <div
+                role="gridcell"
+                tabindex="0"
+                :aria-label="`Well ${well.id}${well.sampleType ? `, Sample type: ${well.sampleType}` : ''}${well.value !== undefined ? `, Value: ${well.value}` : ''}`"
+                :aria-selected="isSelected(well.id)"
+                :aria-disabled="props.disabled || well.state === 'disabled'"
+                :draggable="props.selectionMode === 'drag' && !!well.sampleType"
+                :class="getWellClasses(well)"
+                :style="{
+                  width: isFillMode ? '100%' : sizeConfig.cellWidth,
+                  height: sizeConfig.cellHeight,
+                  minWidth: isFillMode ? '0' : sizeConfig.cellWidth,
+                  minHeight: sizeConfig.cellHeight,
+                  boxSizing: 'border-box',
+                  fontSize: sizeConfig.fontSize,
+                  ...getWellStyle(well),
+                }"
+                :title="`${well.id}${well.sampleType ? `: ${well.sampleType}` : ''}${getWellLabel(well) ? ` - ${getWellLabel(well)}` : ''}`"
+                @click="handleWellClick(well, $event)"
+                @mousedown="handleWellMouseDown(well, $event)"
+                @mouseenter="handleWellMouseEnter(well, $event)"
+                @mouseleave="handleWellMouseLeave"
+                @contextmenu="handleContextMenu(well, $event)"
+                @dragstart="handleDragStart(well, $event)"
+                @dragover="handleDragOver(well, $event)"
+                @dragleave="handleDragLeave"
+                @drop="handleDrop(well, $event)"
+                @dragend="handleDragEnd"
+                @keydown.enter="handleWellClick(well, $event as unknown as MouseEvent)"
+                @keydown.space.prevent="handleWellClick(well, $event as unknown as MouseEvent)"
+              >
+                <!-- Well label text (from metadata.label) -->
+                <span
+                  v-if="getWellLabel(well)"
+                  class="mint-well-plate__label"
+                >
+                  {{ getWellLabel(well) }}
+                </span>
+                <!-- Sample type indicator (S/B/Q/C) -->
+                <span
+                  v-else-if="getSampleTypeIndicator(well)"
+                  class="mint-well-plate__indicator"
+                >
+                  {{ getSampleTypeIndicator(well) }}
+                </span>
+                <!-- Well ID -->
+                <span
+                  v-else-if="props.showWellIds"
+                  class="mint-well-plate__well-id"
+                >
+                  {{ well.id }}
+                </span>
+
+                <!-- Badge (injection count or custom method) -->
+                <span
+                  v-if="getWellBadge(well)"
+                  class="mint-well-plate__badge"
+                  :style="{ backgroundColor: getWellBadge(well)?.color }"
+                  :title="getWellBadge(well)?.text === '+' ? 'Custom method' : `${getWellBadge(well)?.text ?? ''}x injections`"
+                >
+                  {{ getWellBadge(well)?.text }}
+                </span>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+        </table>
+
+        <!-- Heatmap legend (inside content wrapper to match table width) -->
+        <div
+          v-if="props.heatmap?.enabled && props.heatmap.showLegend"
+          class="mint-well-plate__legend"
+        >
+          <span class="mint-well-plate__legend-label">{{ props.heatmap.min ?? 0 }}</span>
+          <div class="mint-well-plate__legend-bar">
+            <div
+              v-for="(color, index) in (props.heatmap.colorScale === 'custom' && props.heatmap.customColors?.length ? props.heatmap.customColors : HEATMAP_COLORS[props.heatmap.colorScale || 'viridis'])"
+              :key="index"
+              class="mint-well-plate__legend-segment"
+              :style="{ backgroundColor: color }"
+            />
+          </div>
+          <span class="mint-well-plate__legend-label">{{ props.heatmap.max ?? 1 }}</span>
+        </div>
+
+        <!-- Sample type legend bar -->
+        <div v-if="props.showLegend" class="mint-well-plate__sample-legend">
+          <div
+            v-for="item in activeLegendItems"
+            :key="item.type"
+            class="mint-well-plate__sample-legend-item"
+          >
+            <span
+              class="mint-well-plate__sample-legend-dot"
+              :style="{ backgroundColor: `${item.color}26`, border: `1px solid ${item.color}66` }"
+            />
+            <span class="mint-well-plate__sample-legend-text">{{ item.label }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Edit popup -->
+    <template v-if="editable && editingWellId">
+      <slot
+        name="well-editor"
+        :well-id="editingWellId"
+        :well-data="wells[editingWellId]"
+        :edit-fields="editFields"
+        :default-injection-volume="defaultInjectionVolume"
+        :position="editPopupPosition"
+        :save="handleEditSave"
+        :clear="handleEditClear"
+        :close="handleEditClose"
+      >
+        <WellEditPopupInternal
+          :well-id="editingWellId"
+          :well-data="wells[editingWellId]"
+          :edit-fields="editFields"
+          :default-injection-volume="defaultInjectionVolume"
+          :position="editPopupPosition"
+          @save="handleEditSave"
+          @clear="handleEditClear"
+          @close="handleEditClose"
+        />
+      </slot>
+    </template>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/well-plate.css';
+</style>

package/src/components/index.ts

@@ -0,0 +1,148 @@
+// Base components
+export { default as BaseButton } from './BaseButton.vue'
+export { default as BaseInput } from './BaseInput.vue'
+export { default as BaseTextarea } from './BaseTextarea.vue'
+export { default as BaseSelect } from './BaseSelect.vue'
+export { default as BaseCheckbox } from './BaseCheckbox.vue'
+export { default as BaseToggle } from './BaseToggle.vue'
+export { default as BaseRadioGroup } from './BaseRadioGroup.vue'
+export { default as BaseSlider } from './BaseSlider.vue'
+/** Range slider with a gradient color track and color-coded value badge for threshold visualization. @deprecated Unused by the MINT platform and scheduled for removal in MINT 1.3; use `BaseSlider` instead. */
+export { default as ColorSlider } from './ColorSlider.vue'
+export { default as BaseTabs } from './BaseTabs.vue'
+export { default as BaseModal } from './BaseModal.vue'
+export { default as SegmentedControl } from './SegmentedControl.vue'
+export { default as MultiSelect } from './MultiSelect.vue'
+export { default as BasePill } from './BasePill.vue'
+/** Button that opens a dropdown menu for selecting one option from a list. @deprecated Unused by the MINT platform and scheduled for removal in MINT 1.3; use `ActionMenu` instead. */
+export { default as DropdownButton } from './DropdownButton.vue'
+export { default as Calendar } from './Calendar.vue'
+export { default as DataFrame } from './DataFrame.vue'
+
+// Form components
+export { default as FormField } from './FormField.vue'
+export { default as DatePicker } from './DatePicker.vue'
+export { default as TimePicker } from './TimePicker.vue'
+export { default as TagsInput } from './TagsInput.vue'
+export { default as SecretInput } from './SecretInput.vue'
+export { default as NumberInput } from './NumberInput.vue'
+export { default as FileUploader } from './FileUploader.vue'
+
+// Feedback components
+export { default as AlertBox } from './AlertBox.vue'
+export { default as AppToastContainer } from './AppToastContainer.vue'
+export { default as RuntimeUpdateNotice } from './RuntimeUpdateNotice.vue'
+
+// Action components
+export { default as ActionMenu } from './ActionMenu.vue'
+export { default as IconButton } from './IconButton.vue'
+export { default as ThemeToggle } from './ThemeToggle.vue'
+
+// Layout components
+export { default as CollapsibleCard } from './CollapsibleCard.vue'
+export { default as AppTopBar } from './AppTopBar.vue'
+export { default as AppAvatarMenu } from './AppAvatarMenu.vue'
+export { default as AppPluginSwitcher } from './AppPluginSwitcher.vue'
+export { default as AppSidebar } from './AppSidebar.vue'
+export { default as AppLayout } from './AppLayout.vue'
+export { default as MobileSupportGate } from './MobileSupportGate.vue'
+export { default as PluginWorkspaceView } from './PluginWorkspaceView.vue'
+export { default as GeneratedPluginView } from './GeneratedPluginView.vue'
+export { default as GeneratedResultRenderer } from './GeneratedResultRenderer.vue'
+export { default as GeneratedPlotlyResult } from './GeneratedPlotlyResult.vue'
+export { default as ComponentBindingRenderer } from './ComponentBindingRenderer.vue'
+export { default as ControlWorkspaceView } from './ControlWorkspaceView.vue'
+export { default as DoseDesignWorkspaceView } from './DoseDesignWorkspaceView.vue'
+export { default as AppContainer } from './AppContainer.vue'
+export { default as PluginIcon } from './PluginIcon.vue'
+
+// Utility components
+export { default as Skeleton } from './Skeleton.vue'
+export { default as LoadingSpinner } from './LoadingSpinner.vue'
+export { default as Divider } from './Divider.vue'
+export { default as StatusIndicator } from './StatusIndicator.vue'
+export { default as ProgressBar } from './ProgressBar.vue'
+export { default as Avatar } from './Avatar.vue'
+export { default as EmptyState } from './EmptyState.vue'
+export { default as Breadcrumb } from './Breadcrumb.vue'
+export { default as Tooltip } from './Tooltip.vue'
+export { default as ConfirmDialog } from './ConfirmDialog.vue'
+export { default as ChartContainer } from './ChartContainer.vue'
+export { default as SettingsModal } from './SettingsModal.vue'
+
+// Biological experiment components
+export { default as BioTemplateRenderer } from './BioTemplateRenderer.vue'
+export { default as BioTemplateExperimentWorkspaceView } from './BioTemplateExperimentWorkspaceView.vue'
+export { default as BioTemplatePackWorkspaceView } from './BioTemplatePackWorkspaceView.vue'
+export { default as BioTemplatePresetWorkspaceView } from './BioTemplatePresetWorkspaceView.vue'
+export { default as WellPlate } from './WellPlate.vue'
+export { default as RackEditor } from './RackEditor.vue'
+export { default as SampleLegend } from './SampleLegend.vue'
+export { default as PlateMapEditor } from './PlateMapEditor.vue'
+export { default as ExperimentTimeline } from './ExperimentTimeline.vue'
+
+// Sample management components
+export { default as SampleSelector } from './SampleSelector.vue'
+export { default as AutoGroupModal } from './AutoGroupModal.vue'
+export { default as GroupAssigner } from './GroupAssigner.vue'
+export { default as SmartGroupModal } from './SmartGroupModal.vue'
+export { default as SmartGroupFieldRecipe } from './SmartGroupFieldRecipe.vue'
+export { default as SmartGroupManual } from './SmartGroupManual.vue'
+
+// Lab/Experiment components
+export { default as MoleculeInput } from './MoleculeInput.vue'
+export { default as ConcentrationInput } from './ConcentrationInput.vue'
+export { default as DoseCalculator } from './DoseCalculator.vue'
+export { default as ReagentEditor, type ReagentDefinition } from './ReagentEditor.vue'
+export { default as ReagentList } from './ReagentList.vue'
+export { default as SampleHierarchyTree } from './SampleHierarchyTree.vue'
+export { default as ProtocolStepEditor } from './ProtocolStepEditor.vue'
+
+// Scientific display components
+export { default as ScientificNumber } from './ScientificNumber.vue'
+/** Renders a chemical formula string (H₂O, C₆H₁₂O₆, Ca(OH)₂) with typographically correct subscripts and superscripts for charges. @deprecated Unused by the MINT platform and scheduled for removal in MINT 1.3; no platform replacement is planned. */
+export { default as ChemicalFormula } from './ChemicalFormula.vue'
+export { default as SequenceProgressBar } from './SequenceProgressBar.vue'
+/** Filterable instrument alert/event list keyed by each alert's required stable event_key. @deprecated Unused by the MINT platform and scheduled for removal in MINT 1.3; instrument UI moves to the mld-ms plugins. */
+export { default as InstrumentAlertLog } from './InstrumentAlertLog.vue'
+export { default as InstrumentStateBadge } from './InstrumentStateBadge.vue'
+/** Compact card for live instrument monitor status, sample, method, sequence progress, and ETA. @deprecated Unused by the MINT platform and scheduled for removal in MINT 1.3; instrument UI moves to the mld-ms plugins. */
+export { default as InstrumentStatusCard } from './InstrumentStatusCard.vue'
+/** Table for Xcalibur-compatible LCMS sequence rows with optional reorder/remove/duplicate controls. @deprecated Unused by the MINT platform and scheduled for removal in MINT 1.3; instrument UI moves to the mld-ms plugins. */
+export { default as LcmsSequenceTable } from './LcmsSequenceTable.vue'
+
+// Scientific input components
+export { default as FormulaInput } from './FormulaInput.vue'
+export { default as SequenceInput } from './SequenceInput.vue'
+export { default as UnitInput } from './UnitInput.vue'
+
+// Workflow components
+export { default as StepWizard } from './StepWizard.vue'
+export { default as AuditTrail } from './AuditTrail.vue'
+export { default as BatchProgressList } from './BatchProgressList.vue'
+export { default as JobsStatusTray } from './JobsStatusTray.vue'
+
+// Form builder components
+export { default as FormBuilder } from './FormBuilder.vue'
+export { default as FormActions } from './FormActions.vue'
+
+// Experiment data display components
+export { default as ExperimentDataViewer } from './ExperimentDataViewer.vue'
+export { default as ExperimentCodeBadge } from './ExperimentCodeBadge.vue'
+
+// Scheduling / booking components
+export { default as DateTimePicker } from './DateTimePicker.vue'
+/** Paired start/end time pickers that validate range order and display computed duration. @deprecated Unused by the MINT platform and scheduled for removal in MINT 1.3; use `TimePicker` instead. */
+export { default as TimeRangeInput } from './TimeRangeInput.vue'
+export { default as ScheduleCalendar } from './ScheduleCalendar.vue'
+/** Card displaying a lab resource with availability status, specs, tags, and a book action. @deprecated Unused by the MINT platform and scheduled for removal in MINT 1.3; no platform replacement is planned. */
+export { default as ResourceCard } from './ResourceCard.vue'
+export { default as SectionCard } from './SectionCard.vue'
+
+// Experiment / analysis components
+export { default as ExperimentSelectorModal } from './ExperimentSelectorModal.vue'
+export { default as ArtifactSelectorModal } from './ArtifactSelectorModal.vue'
+export { default as GeneratedPathInput } from './GeneratedPathInput.vue'
+export { default as ArtifactSaveDialog } from './ArtifactSaveDialog.vue'
+export { default as ExperimentPopover } from './ExperimentPopover.vue'
+export { default as FitPanel } from './FitPanel.vue'