@morscherlab/mint-sdk 1.3.11 → 1.4.0-beta.10

package/src/components/WellPlate.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 /** Interactive 96/384-well plate grid with drag-to-select, heatmap overlays, per-well editing, and sample-color mapping. */
 import { computed } from 'vue'
-import type { WellPlateFormat, WellPlateSelectionMode, WellPlateSize, Well, HeatmapConfig, WellShape, WellEditField, WellEditData, WellLegendItem, ColumnCondition, RowCondition, WellSampleDropData, WellSampleDropParser, WellClassResolver, WellClassValue, WellStyleResolver } from '../types'
+import type { Well, WellEditField, WellEditData, WellSampleDropData, WellClassValue, WellPlateSpec } from '../types'
+import { applySpecDefaults } from '../composables/componentSpecs'
 import { useEventListener } from '../composables/useEventListener'
 import WellEditPopupInternal from './internal/WellEditPopupInternal.vue'
 import {
@@ -26,7 +27,6 @@ import {
 import { useWellPlateInteraction } from './WellPlate.interaction'
 import {
   sampleTint,
-  warnSampleTypeIndicatorDeprecated,
   wellBadge,
   wellClasses,
   wellLabel,
@@ -36,35 +36,14 @@ import { DEFAULT_WELL_LEGEND_ITEMS } from './WellPlate.legend'
 import DataStateInternal from './internal/DataStateInternal.vue'
 
 interface Props {
+  /** Structure built with defineWellPlate(). Optional: every option has a default. */
+  spec?: WellPlateSpec
+  /** Selected well ids. Bind with `v-model`. */
   modelValue?: string[]
-  format?: WellPlateFormat
+  /** Well data keyed by well id. */
   wells?: Record<string, Partial<Well>>
-  selectionMode?: WellPlateSelectionMode
-  showLabels?: boolean
-  showWellIds?: boolean
-  /**
-   * @deprecated No-op since MINT 1.3; removed in MINT 1.4. Wells show the 3a
-   * sample-type marker (shape per type, `Q` / `i` glyphs for QC / iQC) regardless.
-   */
-  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
   /** Replace the plate grid with a loading placeholder. */
   loading?: boolean
   /**
@@ -77,42 +56,37 @@ interface Props {
    * state only replaces the grid when this message is supplied and no wells
    * carry data.
    */
-  emptyMessage?: string
-  /** Add semantic classes to individual wells without overloading sample data. */
-  wellClass?: WellClassResolver
-  /** Add or override individual well styles after heatmap/sample styling. */
-  wellStyle?: WellStyleResolver
+  emptyText?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
+  spec: () => ({}),
   modelValue: () => [],
-  format: 96,
   wells: () => ({}),
+  disabled: false,
+  readonly: false,
+})
+
+const config = computed(() => applySpecDefaults({
+  format: 96,
   selectionMode: 'multiple',
   showLabels: true,
   showWellIds: false,
-  showSampleTypeIndicator: false,
-  heatmap: () => ({ enabled: false }),
-  sampleColors: () => ({}),
+  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'],
+  editFields: ['label', 'sampleType', 'injectionVolume', 'injectionCount', 'customMethod'],
   defaultInjectionVolume: 5,
   showLegend: false,
-  legendItems: undefined,
-  columnConditions: () => [],
-  rowConditions: () => [],
+  columnConditions: [],
+  rowConditions: [],
   allowSampleDrop: false,
-  sampleDropParser: undefined,
-})
-
-if (props.showSampleTypeIndicator) warnSampleTypeIndicatorDeprecated()
+}, props.spec))
 
 const emit = defineEmits<{
   'update:modelValue': [wellIds: string[]]
@@ -147,7 +121,7 @@ defineSlots<{
   empty?: () => unknown
 }>()
 
-const plateConfig = computed(() => PLATE_CONFIGS[props.format])
+const plateConfig = computed(() => PLATE_CONFIGS[config.value.format])
 
 const rowLabels = computed(() => createPlateRowLabels(plateConfig.value))
 
@@ -155,19 +129,19 @@ 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 sizeConfig = computed(() => WELL_PLATE_SIZE_CONFIGS[config.value.size])
 
-const isFillMode = computed(() => props.size === 'fill')
+const isFillMode = computed(() => config.value.size === 'fill')
 
-const activeLegendItems = computed(() => props.legendItems ?? DEFAULT_WELL_LEGEND_ITEMS)
+const activeLegendItems = computed(() => config.value.legendItems ?? DEFAULT_WELL_LEGEND_ITEMS)
 
 // --- Condition header helpers ---
 
-const hasColumnConditions = computed(() => props.columnConditions.length > 0)
-const hasRowConditions = computed(() => props.rowConditions.length > 0)
+const hasColumnConditions = computed(() => config.value.columnConditions.length > 0)
+const hasRowConditions = computed(() => config.value.rowConditions.length > 0)
 
-const colConditionMap = computed(() => createColumnConditionMap(props.columnConditions))
-const rowConditionMap = computed(() => createRowConditionMap(props.rowConditions))
+const colConditionMap = computed(() => createColumnConditionMap(config.value.columnConditions))
+const rowConditionMap = computed(() => createRowConditionMap(config.value.rowConditions))
 const colConditionSpans = computed(() => createColumnConditionSpans(colLabels.value, colConditionMap.value))
 const rowConditionSpans = computed(() => createRowConditionSpans(rowLabels.value, rowConditionMap.value))
 const rowConditionSpanByRow = computed(() => createRowConditionSpanByRow(rowConditionSpans.value))
@@ -200,12 +174,12 @@ const {
   moveAnnouncerStyle,
 } = useWellPlateInteraction({
   modelValue: () => props.modelValue,
-  selectionMode: () => props.selectionMode,
+  selectionMode: () => config.value.selectionMode,
   disabled: () => props.disabled,
   readonly: () => props.readonly,
-  editable: () => props.editable,
-  allowSampleDrop: () => props.allowSampleDrop,
-  sampleDropParser: () => props.sampleDropParser,
+  editable: () => config.value.editable,
+  allowSampleDrop: () => config.value.allowSampleDrop,
+  sampleDropParser: () => config.value.sampleDropParser,
   rowLabels: () => rowLabels.value,
   wellGrid: () => wellGrid.value,
   emitSelected: (wellIds) => {
@@ -223,8 +197,8 @@ const {
 
 function getWellClasses(well: Well): WellClassValue[] {
   const base = wellClasses(well, {
-    wellShape: props.wellShape,
-    selectionMode: props.selectionMode,
+    wellShape: config.value.wellShape,
+    selectionMode: config.value.selectionMode,
     selected: isSelected(well.id),
     dragOver: dragSelectedWells.value.has(well.id),
     hovered: hoveredWell.value === well.id,
@@ -233,27 +207,27 @@ function getWellClasses(well: Well): WellClassValue[] {
     dragSource: dragSourceWell.value === well.id,
     dragTarget: dragTargetWell.value === well.id,
   })
-  const custom = props.wellClass?.(well)
+  const custom = config.value.wellClass?.(well)
   return custom ? [base, custom] : [base]
 }
 
 function getWellStyle(well: Well): Record<string, string | number | undefined> {
   return {
     ...wellStyle(well, {
-      heatmap: props.heatmap,
-      sampleColors: props.sampleColors,
+      heatmap: config.value.heatmap,
+      sampleColors: config.value.sampleColors,
     }),
-    ...props.wellStyle?.(well),
+    ...config.value.wellStyle?.(well),
   }
 }
 
 function getWellLabel(well: Well): string | undefined {
-  return wellLabel(well, props.showWellLabels)
+  return wellLabel(well, config.value.showWellLabels)
 }
 
 // A group is otherwise shown by color alone; name it from the legend.
 function getWellGroupName(well: Well): string | undefined {
-  return well.group && (props.legendItems?.find(item => item.type === well.group)?.label ?? well.group)
+  return well.group && (config.value.legendItems?.find(item => item.type === well.group)?.label ?? well.group)
 }
 
 // Names the sample even when the cell is too small to draw it.
@@ -264,21 +238,21 @@ function getWellAriaLabel(well: Well): string {
 }
 
 function getWellBadge(well: Well): { text: string; color: string } | null {
-  return wellBadge(well, props.showBadges)
+  return wellBadge(well, config.value.showBadges)
 }
 
 useEventListener(() => document, 'mouseup', handleMouseUp)
 
 const containerStyle = computed(() =>
   isFillMode.value ? {} : {
-    transform: `scale(${props.zoom})`,
+    transform: `scale(${config.value.zoom})`,
     transformOrigin: 'top left',
   }
 )
 
-/** Empty state is opt-in: it needs an `emptyMessage` and a plate with no well data. */
+/** Empty state is opt-in: it needs an `emptyText` and a plate with no well data. */
 const showEmptyState = computed(() =>
-  Boolean(props.emptyMessage) && Object.keys(props.wells).length === 0,
+  Boolean(props.emptyText) && Object.keys(props.wells).length === 0,
 )
 
 const tableStyle = computed(() => ({
@@ -308,7 +282,7 @@ const tableStyle = computed(() => ({
 
     <div v-else-if="showEmptyState" class="mint-well-plate__state">
       <slot name="empty">
-        <DataStateInternal state="empty" :title="emptyMessage" />
+        <DataStateInternal state="empty" :title="emptyText" />
       </slot>
     </div>
 
@@ -317,7 +291,7 @@ const tableStyle = computed(() => ({
         <table
           class="mint-well-plate__table"
           role="grid"
-          :aria-label="`${props.format}-well plate`"
+          :aria-label="`${config.format}-well plate`"
           :style="tableStyle"
         >
         <!-- Column condition label row (drug name + unit) -->
@@ -345,7 +319,7 @@ const tableStyle = computed(() => ({
           </tr>
         </thead>
         <!-- Column headers (with concentration overlay when conditions present) -->
-        <thead v-if="props.showLabels">
+        <thead v-if="config.showLabels">
           <tr>
             <th :style="{ width: sizeConfig.headerWidth, height: sizeConfig.headerHeight }"></th>
             <!-- Spacer for row condition column in column header row -->
@@ -399,7 +373,7 @@ const tableStyle = computed(() => ({
             </template>
             <!-- Row header (with concentration overlay when conditions present) -->
             <td
-              v-if="props.showLabels"
+              v-if="config.showLabels"
               class="mint-well-plate__row-header"
               :style="{
                 width: sizeConfig.headerWidth,
@@ -433,7 +407,7 @@ const tableStyle = computed(() => ({
                 :aria-label="getWellAriaLabel(well)"
                 :aria-selected="isSelected(well.id)"
                 :aria-disabled="props.disabled || well.state === 'disabled'"
-                :draggable="props.selectionMode === 'drag' && !!well.sampleType"
+                :draggable="config.selectionMode === 'drag' && !!well.sampleType"
                 :class="getWellClasses(well)"
                 :style="{
                   width: isFillMode ? '100%' : sizeConfig.cellWidth,
@@ -470,11 +444,18 @@ const tableStyle = computed(() => ({
                 </span>
                 <!-- Well ID -->
                 <span
-                  v-else-if="props.showWellIds"
+                  v-else-if="config.showWellIds"
                   class="mint-well-plate__well-id"
                 >
                   {{ well.id }}
                 </span>
+                <!-- QC / iQC marker glyph when the centre is free -->
+                <span
+                  v-else-if="well.sampleType === 'qc' || well.sampleType === 'iqc'"
+                  class="mint-well-plate__indicator"
+                >
+                  {{ well.sampleType === 'qc' ? 'Q' : 'i' }}
+                </span>
 
                 <!-- Badge (injection count or custom method) -->
                 <span
@@ -493,23 +474,23 @@ const tableStyle = computed(() => ({
 
         <!-- Heatmap legend (inside content wrapper to match table width) -->
         <div
-          v-if="props.heatmap?.enabled && props.heatmap.showLegend"
+          v-if="config.heatmap?.enabled && config.heatmap.showLegend"
           class="mint-well-plate__legend"
         >
-          <span class="mint-well-plate__legend-label">{{ props.heatmap.min ?? 0 }}</span>
+          <span class="mint-well-plate__legend-label">{{ config.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'])"
+              v-for="(color, index) in (config.heatmap.colorScale === 'custom' && config.heatmap.customColors?.length ? config.heatmap.customColors : HEATMAP_COLORS[config.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>
+          <span class="mint-well-plate__legend-label">{{ config.heatmap.max ?? 1 }}</span>
         </div>
 
         <!-- Sample type legend bar -->
-        <div v-if="props.showLegend" class="mint-well-plate__sample-legend">
+        <div v-if="config.showLegend" class="mint-well-plate__sample-legend">
           <div
             v-for="item in activeLegendItems"
             :key="item.type"
@@ -526,13 +507,13 @@ const tableStyle = computed(() => ({
     </div>
 
     <!-- Edit popup -->
-    <template v-if="editable && editingWellId">
+    <template v-if="config.editable && editingWellId">
       <slot
         name="well-editor"
         :well-id="editingWellId"
         :well-data="wells[editingWellId]"
-        :edit-fields="editFields"
-        :default-injection-volume="defaultInjectionVolume"
+        :edit-fields="config.editFields"
+        :default-injection-volume="config.defaultInjectionVolume"
         :position="editPopupPosition"
         :save="handleEditSave"
         :clear="handleEditClear"
@@ -541,9 +522,9 @@ const tableStyle = computed(() => ({
         <WellEditPopupInternal
           :well-id="editingWellId"
           :well-data="wells[editingWellId]"
-          :edit-fields="editFields"
-          :default-injection-volume="defaultInjectionVolume"
-          :marker-colors="sampleColors"
+          :edit-fields="config.editFields"
+          :default-injection-volume="config.defaultInjectionVolume"
+          :marker-colors="config.sampleColors"
           :position="editPopupPosition"
           @save="handleEditSave"
           @clear="handleEditClear"

package/src/components/index.ts

@@ -1,17 +1,16 @@
+// Components exported from the package root. Lab, shell, data and runtime
+// components are exported from their subpath entries (`src/lab.ts`, ...).
+
 // 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 SearchableSelect } from './SearchableSelect.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'
 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'
 export { default as Calendar } from './Calendar.vue'
 export { default as DataFrame } from './DataFrame.vue'
@@ -19,140 +18,39 @@ 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 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'
-/** Complete ControlWorkspaceView page shell for WellPlate + DoseCalculator dose design. @deprecated Scheduled for removal in MINT 1.4; use `ControlWorkspaceView` instead, with `defineDoseDesignControlModel()`. */
-export { /** @deprecated Removed in MINT 1.4. */ default as DoseDesignWorkspaceView } from './DoseDesignWorkspaceView.vue'
 export { default as AppContainer } from './AppContainer.vue'
 export { default as PluginIcon } from './PluginIcon.vue'
-export { default as LayoutResizeHandle } from './LayoutResizeHandle.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 AdductText } from './AdductText.vue'
 export { default as SettingsModal } from './SettingsModal.vue'
 
-// Biological experiment components
-/** Render biology template envelopes with matching SDK components such as WellPlate, DoseCalculator, and DataFrame. @deprecated Scheduled for removal in MINT 1.4; no SDK replacement. */
-export { /** @deprecated Removed in MINT 1.4. */ default as BioTemplateRenderer } from './BioTemplateRenderer.vue'
-/** Current-experiment template workspace with load/save/reset controls and WellPlate/DataFrame/DoseCalculator previews. @deprecated Scheduled for removal in MINT 1.4; no SDK replacement. */
-export { /** @deprecated Removed in MINT 1.4. */ default as BioTemplateExperimentWorkspaceView } from './BioTemplateExperimentWorkspaceView.vue'
-/** Complete current-experiment workspace for a curated biology template pack with save/load controls and component-prop slots. @deprecated Scheduled for removal in MINT 1.4; no SDK replacement. */
-export { /** @deprecated Removed in MINT 1.4. */ default as BioTemplatePackWorkspaceView } from './BioTemplatePackWorkspaceView.vue'
-/** Complete editable biology template preset workspace for WellPlate/DoseCalculator, LC-MS, qPCR, generated controls, preview components, and current-experiment save wiring. @deprecated Scheduled for removal in MINT 1.4; no SDK replacement. */
-export { /** @deprecated Removed in MINT 1.4. */ default as BioTemplatePresetWorkspaceView } from './BioTemplatePresetWorkspaceView.vue'
-export { default as WellPlate } from './WellPlate.vue'
-export { default as PlateEditor } from './PlateEditor.vue'
-/** Clickable color-swatch legend for plate sample types, supporting selection, count display, add/remove, and custom color assignment. @deprecated Scheduled for removal in MINT 1.4; no SDK replacement. */
-export { /** @deprecated Removed in MINT 1.4. */ default as SampleLegend } from './SampleLegend.vue'
-/** Horizontal or vertical timeline of ordered protocol steps with status indicators, drag-to-reorder, and step-type iconography. @deprecated Scheduled for removal in MINT 1.4; no SDK replacement. */
-export { /** @deprecated Removed in MINT 1.4. */ default as ExperimentTimeline } from './ExperimentTimeline.vue'
-
-// Sample management components
-/** Interactive sample list with drag-and-drop group assignment, color labeling, and smart-group support. */
-export { default as SampleSelector } from './SampleSelector.vue'
-/** Smart Group modal wired to the `useAutoGroup` engine. @deprecated Scheduled for removal in MINT 1.4; no SDK replacement. */
-export { /** @deprecated Removed in MINT 1.4. */ default as AutoGroupModal } from './AutoGroupModal.vue'
-/** Drag-and-drop two-zone assigner for splitting sample groups into control and treatment arms. @deprecated Scheduled for removal in MINT 1.4; no SDK replacement. */
-export { /** @deprecated Removed in MINT 1.4. */ default as GroupAssigner } from './GroupAssigner.vue'
-/** Smart Group modal with the auto Field Recipe and the manual cohort builder. @deprecated Scheduled for removal in MINT 1.4; no SDK replacement. */
-export { /** @deprecated Removed in MINT 1.4. */ default as SmartGroupModal } from './SmartGroupModal.vue'
-/** Smart Group auto mode: groups samples by a field recipe. @deprecated Scheduled for removal in MINT 1.4; no SDK replacement. */
-export { /** @deprecated Removed in MINT 1.4. */ default as SmartGroupFieldRecipe } from './SmartGroupFieldRecipe.vue'
-/** Smart Group manual mode: builds cohorts from selected samples. @deprecated Scheduled for removal in MINT 1.4; no SDK replacement. */
-export { /** @deprecated Removed in MINT 1.4. */ 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'
-/** Editor for a single reagent definition with axis orientation, dilution-series generator, and position-count validation for 96/384-well plates. @deprecated Scheduled for removal in MINT 1.4; no SDK replacement. */
-export { /** @deprecated Removed in MINT 1.4. */ default as ReagentEditor, type ReagentDefinition } from './ReagentEditor.vue'
-/** Sortable, searchable table of experiment reagents showing lot number, expiry, storage conditions, and stock level with low-stock warnings. @deprecated Scheduled for removal in MINT 1.4; no SDK replacement. */
-export { /** @deprecated Removed in MINT 1.4. */ 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 PlotlyChart } from './PlotlyChart.vue'
-export { default as ScientificNumber } from './ScientificNumber.vue'
-export { default as ChemicalFormula } from './ChemicalFormula.vue'
-/** Displays LC/MS or GC/MS acquisition sequence progress with ETA and remaining-time labels. */
-export { default as SequenceProgressBar } from './SequenceProgressBar.vue'
-/** Status badge for instrument states: a tone dot (or dash / hollow shape for offline, never-reported and inactive) plus a label. */
-export { default as InstrumentStateBadge } from './InstrumentStateBadge.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'
-export { default as TimeRangeInput } from './TimeRangeInput.vue'
-export { default as ScheduleCalendar } from './ScheduleCalendar.vue'
-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'
-/** Modal picker over the read-only server mounts, recording paths rather than copying data. */
-export { default as GeneratedPathInput } from './GeneratedPathInput.vue'
-export { default as ArtifactSaveDialog } from './ArtifactSaveDialog.vue'
-export { default as ExperimentPopover } from './ExperimentPopover.vue'
-/** Control panel for running a curve-fit job with progress bar, results table, and error display. @deprecated Scheduled for removal in MINT 1.4; no SDK replacement. */
-export { /** @deprecated Removed in MINT 1.4. */ default as FitPanel } from './FitPanel.vue'
-
-export { default as FilePicker } from './FilePicker.vue'

package/src/components/internal/AppTopBarPillNavInternal.vue

@@ -21,7 +21,26 @@ const emit = defineEmits<{
 const openItemId = ref<string | null>(null)
 const itemRefs = ref<Map<string, HTMLElement>>(new Map())
 
-const normalizedItems = computed<PillNavItem[]>(() => props.items.map(normalizePillNavItem))
+/** The bar shows this many items; the rest fold into a More dropdown. */
+const MAX_VISIBLE_ITEMS = 4
+const MORE_ITEM_ID = '__mint-pill-nav-more'
+
+const allItems = computed<PillNavItem[]>(() => props.items.map(normalizePillNavItem))
+
+const normalizedItems = computed<PillNavItem[]>(() => {
+  if (allItems.value.length <= MAX_VISIBLE_ITEMS) return allItems.value
+  const folded = allItems.value.slice(MAX_VISIBLE_ITEMS)
+  return [
+    ...allItems.value.slice(0, MAX_VISIBLE_ITEMS),
+    {
+      id: MORE_ITEM_ID,
+      label: 'More',
+      dot: folded.some(item => item.dot),
+      // A folded group contributes its options; a plain item becomes one option.
+      children: folded.flatMap(item => item.children?.length ? item.children : [item]),
+    },
+  ]
+})
 
 function handleClick(item: PillNavItem) {
   if (item.disabled) return
@@ -35,8 +54,20 @@ function handleClick(item: PillNavItem) {
 
 function handleOptionClick(option: PillNavOption, item: PillNavItem) {
   if (option.disabled) return
-  if (!option.href && !option.to) emit('option-select', option, item)
   openItemId.value = null
+  if (option.href || option.to) return
+  if (item.id !== MORE_ITEM_ID) {
+    emit('option-select', option, item)
+    return
+  }
+  // A folded entry reports as it would from its own pill.
+  const folded = allItems.value.find(candidate => candidate.id === option.id && !candidate.children?.length)
+  if (folded) {
+    emit('select', folded)
+    return
+  }
+  const group = allItems.value.find(candidate => candidate.children?.some(child => child.id === option.id))
+  if (group) emit('option-select', option, group)
 }
 
 function normalizePillNavItem(item: PillNavItemInput): PillNavItem {

package/src/components/{AutoGroupModal.adapter.ts → internal/AutoGroupModalInternal.adapter.ts}

@@ -2,15 +2,15 @@
  * Pure adapters mapping the `useAutoGroup` engine state to the controlled
  * Smart Group UI (`SmartGroupFieldRecipe` / `SmartGroupManual`) and back to an
  * `AutoGroupResult`. Framework-free so the mapping is unit-testable in isolation
- * from `AutoGroupModal.vue`.
+ * from `AutoGroupModalInternal.vue`.
  */
-import type { AutoGroupResult, ClassSchema, ColumnInfo, ColumnRole, SampleClass } from '../types/auto-group'
-import type { SampleGroup } from '../types'
-import type { FieldRecipeGroup, QcRoute, SmartGroupField } from './SmartGroupFieldRecipe.groups'
-import type { ManualSample } from './SmartGroupManual.cohorts'
-import type { FieldRecipeAnatomyToken, FieldRecipeQcChip, SmartGroupSeed } from './SmartGroup.types'
-import { GROUPING_FIELD_ROLES, classKey, isExperimentalKind } from '../composables/autoGroup'
-import type { ExperimentHeader } from '../composables/autoGroup'
+import type { AutoGroupResult, ClassSchema, ColumnInfo, ColumnRole, SampleClass } from '../../types/auto-group'
+import type { SampleGroup } from '../../types'
+import type { FieldRecipeGroup, QcRoute, SmartGroupField } from '../SmartGroupFieldRecipe.groups'
+import type { ManualSample } from '../SmartGroupManual.cohorts'
+import type { FieldRecipeAnatomyToken, FieldRecipeQcChip, SmartGroupSeed } from '../SmartGroup.types'
+import { GROUPING_FIELD_ROLES, classKey, isExperimentalKind } from './autoGroup'
+import type { ExperimentHeader } from './autoGroup'
 
 const PREVIEW_VALUES = 3