@morscherlab/mint-sdk 1.0.16 → 1.0.18

package/dist/index.js

@@ -1,4 +1,4 @@
-import { $ as SampleLegend_default, A as ReagentEditor_default, B as ProgressBar_default, C as formatSequenceRemaining, Ct as BaseTabs_default, D as ScientificNumber_default, E as ChemicalFormula_default, F as BioTemplateExperimentWorkspaceView_default, G as ControlWorkspaceView_default, H as Divider_default, I as BioTemplateRenderer_default, J as SampleSelector_default, K as ComponentBindingRenderer_default, L as ChartContainer_default, M as RackEditor_default, N as BioTemplatePresetWorkspaceView_default, O as ProtocolStepEditor_default, P as BioTemplatePackWorkspaceView_default, Q as PlateMapEditor_default, R as Breadcrumb_default, S as formatSequenceEta, St as SegmentedControl_default, T as sequenceSamplesRemaining, U as AppContainer_default, V as StatusIndicator_default, W as DoseDesignWorkspaceView_default, X as LoadingSpinner_default, Y as AutoGroupModal_default, Z as ReagentList_default, _ as InstrumentStateBadge_default, _t as AppToastContainer_default, a as ExperimentDataViewer_default, at as AppLayout_default, b as estimateSequenceFinishDate, bt as Calendar_default, c as LcmsSequenceTable_default, ct as FormActions_default, d as extractLcmsCommonPrefix, dt as AppPluginSwitcher_default, et as WellPlate_default, f as extractLcmsSampleName, ft as AppAvatarMenu_default, g as InstrumentStatusCard_default, gt as IconButton_default, h as reconstructLcmsPlateCellsFromSequenceItems, ht as ThemeToggle_default, i as TimeRangeInput_default, it as MobileSupportGate_default, j as GroupAssigner_default, k as SampleHierarchyTree_default, l as DEFAULT_LCMS_SEQUENCE_COLUMNS, lt as StepWizard_default, m as lcmsWellIdFromPosition, mt as CollapsibleCard_default, n as FitPanel_default, nt as DoseCalculator_default, o as BatchProgressList_default, ot as AppSidebar_default, p as inferLcmsPlateTypeFromWellIds, pt as PluginIcon_default, q as ScheduleCalendar_default, r as ResourceCard_default, rt as PluginWorkspaceView_default, s as AuditTrail_default, st as FormBuilder_default, tt as ExperimentTimeline_default, u as basenameFromWindowsPath, ut as AppTopBar_default, v as InstrumentAlertLog_default, vt as AlertBox_default, w as sequenceProgressPercent, wt as ColorSlider_default, x as estimateSequenceRemainingSeconds, xt as DropdownButton_default, y as SequenceProgressBar_default, yt as DataFrame_default, z as Avatar_default } from "./components-D0CzE0XK.js";
+import { $ as SampleLegend_default, A as ReagentEditor_default, B as ProgressBar_default, C as formatSequenceRemaining, Ct as BaseTabs_default, D as ScientificNumber_default, E as ChemicalFormula_default, F as BioTemplateExperimentWorkspaceView_default, G as ControlWorkspaceView_default, H as Divider_default, I as BioTemplateRenderer_default, J as SampleSelector_default, K as ComponentBindingRenderer_default, L as ChartContainer_default, M as RackEditor_default, N as BioTemplatePresetWorkspaceView_default, O as ProtocolStepEditor_default, P as BioTemplatePackWorkspaceView_default, Q as PlateMapEditor_default, R as Breadcrumb_default, S as formatSequenceEta, St as SegmentedControl_default, T as sequenceSamplesRemaining, U as AppContainer_default, V as StatusIndicator_default, W as DoseDesignWorkspaceView_default, X as LoadingSpinner_default, Y as AutoGroupModal_default, Z as ReagentList_default, _ as InstrumentStateBadge_default, _t as AppToastContainer_default, a as ExperimentDataViewer_default, at as AppLayout_default, b as estimateSequenceFinishDate, bt as Calendar_default, c as LcmsSequenceTable_default, ct as FormActions_default, d as extractLcmsCommonPrefix, dt as AppPluginSwitcher_default, et as WellPlate_default, f as extractLcmsSampleName, ft as AppAvatarMenu_default, g as InstrumentStatusCard_default, gt as IconButton_default, h as reconstructLcmsPlateCellsFromSequenceItems, ht as ThemeToggle_default, i as TimeRangeInput_default, it as MobileSupportGate_default, j as GroupAssigner_default, k as SampleHierarchyTree_default, l as DEFAULT_LCMS_SEQUENCE_COLUMNS, lt as StepWizard_default, m as lcmsWellIdFromPosition, mt as CollapsibleCard_default, n as FitPanel_default, nt as DoseCalculator_default, o as BatchProgressList_default, ot as AppSidebar_default, p as inferLcmsPlateTypeFromWellIds, pt as PluginIcon_default, q as ScheduleCalendar_default, r as ResourceCard_default, rt as PluginWorkspaceView_default, s as AuditTrail_default, st as FormBuilder_default, tt as ExperimentTimeline_default, u as basenameFromWindowsPath, ut as AppTopBar_default, v as InstrumentAlertLog_default, vt as AlertBox_default, w as sequenceProgressPercent, wt as ColorSlider_default, x as estimateSequenceRemainingSeconds, xt as DropdownButton_default, y as SequenceProgressBar_default, yt as DataFrame_default, z as Avatar_default } from "./components-CzdeV1xe.js";
 import { a as BasePill_default, i as Skeleton_default, n as ExperimentCodeBadge_default, o as BaseButton_default, r as EmptyState_default, t as ExperimentSelectorModal_default } from "./ExperimentSelectorModal-CX0oBzpV.js";
 import { r as BaseInput_default, t as BaseSelect_default } from "./BaseSelect-ekgr9fDo.js";
 import { $ as parseTime, A as useConcentrationUnits, B as TagsInput_default, C as controlsToViewIds, D as getTypeDefault, E as getFieldRegistryEntry, F as ATOMIC_WEIGHTS, G as findAvailableSlots, H as addMinutes, I as useChemicalFormula, J as formatTime, K as findNearestTimeSlotIndex, L as DateTimePicker_default, M as SequenceInput_default, N as useSequenceUtils, O as ConcentrationInput_default, P as FormulaInput_default, Q as isTimeInRange, R as FileUploader_default, S as controlsToTopBarSettingsConfig, T as getDefaultControlView, U as compareTime, V as TimePicker_default, W as durationMinutes, X as fromMinutes, Y as formatTimeSlot, Z as generateTimeSlots, _ as controlsToFormSchema, a as defineDoseCalculatorControlProps, at as MultiSelect_default, b as controlsToSettingsSchema, c as defineWellPlateDoseComponentBindings, ct as BaseSlider_default, d as defineControlModel, dt as BaseCheckbox_default, et as rangesOverlap, ft as Tooltip_default, h as controlValuesToComponentProps, i as useControlSchema, it as DatePicker_default, j as MoleculeInput_default, k as UnitInput_default, l as defineWellPlateDoseControlProps, lt as BaseRadioGroup_default, m as controlValuesToComponentBindingsById, n as defineControls, nt as toMinutes, o as defineDoseDesignControlModel, ot as useListSelection, p as controlValuesToComponentBindings, pt as BaseTextarea_default, q as formatDuration, r as getControlDefaults, rt as useTimeUtils, s as defineWellPlateControlProps, st as useSelectionLimit, t as defineControlComponentBindings, tt as snapToSlot, u as useControlWorkspace, ut as BaseToggle_default, v as controlsToSectionFormSchema, w as controlsToViewItems, x as controlsToSidebarPanels, y as controlsToSectionFormSchemas, z as NumberInput_default } from "./useControlSchema-Dkm-W_lg.js";

package/dist/install.js

@@ -1,4 +1,4 @@
-import { t as components_exports } from "./components-D0CzE0XK.js";
+import { t as components_exports } from "./components-CzdeV1xe.js";
 import "./ExperimentSelectorModal-CX0oBzpV.js";
 import "./BaseSelect-ekgr9fDo.js";
 import "./useControlSchema-Dkm-W_lg.js";

package/dist/styles.css

@@ -10925,6 +10925,14 @@ to {
   min-height: 0;
   min-width: 0;
 }
+.mint-modal__body:has(> .mint-auto-group .mint-auto-group__manual-mode) {
+  overflow: hidden;
+}
+.mint-auto-group:has(.mint-auto-group__manual-mode) {
+  height: min(34rem, calc(100vh - 12rem));
+  min-height: min(26rem, calc(100vh - 12rem));
+  overflow: hidden;
+}
 
 /* --- Workflow tabs --- */
 .mint-auto-group__workflow-bar {
@@ -10971,11 +10979,13 @@ to {
   color: var(--color-primary);
 }
 .mint-auto-group__manual-mode {
+  flex: 1;
   display: flex;
   flex-direction: column;
   gap: 0.625rem;
   min-height: 0;
   min-width: 0;
+  overflow: hidden;
 }
 .mint-auto-group__manual-summary {
   display: flex;
@@ -11036,12 +11046,15 @@ to {
   display: grid;
   grid-template-columns: minmax(0, 1.15fr) minmax(20rem, 0.85fr);
   gap: 0.625rem;
-  min-height: 31rem;
+  flex: 1;
+  min-height: 0;
   min-width: 0;
+  overflow: hidden;
 }
 .mint-auto-group__manual-panel {
   min-width: 0;
   min-height: 0;
+  overflow: hidden;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
@@ -11437,13 +11450,13 @@ to {
   flex-shrink: 0;
 }
 .mint-auto-group__manual-cohorts {
-  flex: 1;
+  flex: 0 1 auto;
   min-height: 0;
-  overflow-y: auto;
+  overflow: visible;
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
-  padding-right: 0.25rem;
+  padding-right: 0;
 }
 .mint-auto-group__manual-cohorts-head {
   position: sticky;
@@ -12149,8 +12162,7 @@ to {
 .mint-auto-group__manual-grid {
     min-height: 0;
 }
-.mint-auto-group__manual-list,
-  .mint-auto-group__manual-cohorts {
+.mint-auto-group__manual-list {
     max-height: 18rem;
 }
 .mint-auto-group__manual-sample {
@@ -12248,24 +12260,30 @@ to {
   position: relative;
 }
 .mint-sample-selector__actions-row {
-  display: flex;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
   align-items: center;
-  gap: 0.5rem;
-  flex-wrap: nowrap; /* Ensure buttons stay on one line */
+  gap: 0.375rem;
+  min-width: 0;
+}
+.mint-sample-selector__actions-row--single-primary {
+  grid-template-columns: minmax(0, 1fr) auto;
 }
 
 /* BaseButton overrides for action buttons */
 .mint-sample-selector__action-btn {
-  flex: 1 1 auto;
-  display: flex;
+  width: 100%;
+  min-width: 0; /* Allow labels to ellipsize inside tight containers */
   align-items: center;
   justify-content: center;
-  gap: 0.5rem;
-  min-width: 0; /* Allow buttons to shrink below content size */
+  gap: 0.375rem;
+  padding-inline: 0.5rem;
+  font-size: 0.8125rem;
 }
 .mint-sample-selector__action-btn--reset {
-  flex: 0 0 auto; /* Don't grow or shrink */
-  min-width: auto;
+  width: var(--form-height-sm);
+  min-width: var(--form-height-sm);
+  aspect-ratio: 1;
   padding: 0.5rem;
 }
 .mint-sample-selector__action-icon {
@@ -12273,6 +12291,12 @@ to {
   height: 1rem;
   flex-shrink: 0;
 }
+.mint-sample-selector__action-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 
 /* Level Popover */
 .mint-sample-selector__popover {
@@ -24389,23 +24413,29 @@ html.dark .mint-toast__item .mint-toast__message {
   position: relative;
 }
 .mint-sample-selector__actions-row {
-  display: flex;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
   align-items: center;
-  gap: 0.5rem;
-  flex-wrap: nowrap; /* Ensure buttons stay on one line */
+  gap: 0.375rem;
+  min-width: 0;
+}
+.mint-sample-selector__actions-row--single-primary {
+  grid-template-columns: minmax(0, 1fr) auto;
 }
 /* BaseButton overrides for action buttons */
 .mint-sample-selector__action-btn {
-  flex: 1 1 auto;
-  display: flex;
+  width: 100%;
+  min-width: 0; /* Allow labels to ellipsize inside tight containers */
   align-items: center;
   justify-content: center;
-  gap: 0.5rem;
-  min-width: 0; /* Allow buttons to shrink below content size */
+  gap: 0.375rem;
+  padding-inline: 0.5rem;
+  font-size: 0.8125rem;
 }
 .mint-sample-selector__action-btn--reset {
-  flex: 0 0 auto; /* Don't grow or shrink */
-  min-width: auto;
+  width: var(--form-height-sm);
+  min-width: var(--form-height-sm);
+  aspect-ratio: 1;
   padding: 0.5rem;
 }
 .mint-sample-selector__action-icon {
@@ -24413,6 +24443,12 @@ html.dark .mint-toast__item .mint-toast__message {
   height: 1rem;
   flex-shrink: 0;
 }
+.mint-sample-selector__action-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 /* Level Popover */
 .mint-sample-selector__popover {
   position: absolute;
@@ -24978,6 +25014,14 @@ html.dark .mint-toast__item .mint-toast__message {
   min-height: 0;
   min-width: 0;
 }
+.mint-modal__body:has(> .mint-auto-group .mint-auto-group__manual-mode) {
+  overflow: hidden;
+}
+.mint-auto-group:has(.mint-auto-group__manual-mode) {
+  height: min(34rem, calc(100vh - 12rem));
+  min-height: min(26rem, calc(100vh - 12rem));
+  overflow: hidden;
+}
 /* --- Workflow tabs --- */
 .mint-auto-group__workflow-bar {
   display: flex;
@@ -25023,11 +25067,13 @@ html.dark .mint-toast__item .mint-toast__message {
   color: var(--color-primary);
 }
 .mint-auto-group__manual-mode {
+  flex: 1;
   display: flex;
   flex-direction: column;
   gap: 0.625rem;
   min-height: 0;
   min-width: 0;
+  overflow: hidden;
 }
 .mint-auto-group__manual-summary {
   display: flex;
@@ -25088,12 +25134,15 @@ html.dark .mint-toast__item .mint-toast__message {
   display: grid;
   grid-template-columns: minmax(0, 1.15fr) minmax(20rem, 0.85fr);
   gap: 0.625rem;
-  min-height: 31rem;
+  flex: 1;
+  min-height: 0;
   min-width: 0;
+  overflow: hidden;
 }
 .mint-auto-group__manual-panel {
   min-width: 0;
   min-height: 0;
+  overflow: hidden;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
@@ -25489,13 +25538,13 @@ html.dark .mint-toast__item .mint-toast__message {
   flex-shrink: 0;
 }
 .mint-auto-group__manual-cohorts {
-  flex: 1;
+  flex: 0 1 auto;
   min-height: 0;
-  overflow-y: auto;
+  overflow: visible;
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
-  padding-right: 0.25rem;
+  padding-right: 0;
 }
 .mint-auto-group__manual-cohorts-head {
   position: sticky;
@@ -26126,8 +26175,7 @@ html.dark .mint-toast__item .mint-toast__message {
     min-height: 0;
   }
 
-  .mint-auto-group__manual-list,
-  .mint-auto-group__manual-cohorts {
+  .mint-auto-group__manual-list {
     max-height: 18rem;
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morscherlab/mint-sdk",
-  "version": "1.0.16",
+  "version": "1.0.18",
   "description": "MINT Platform SDK — Vue 3 components, composables, and types for plugin development. MINT = Mass-spec INtegrated Toolkit.",
   "type": "module",
   "main": "./dist/index.js",

package/src/components/SampleSelector.story.vue

@@ -92,7 +92,7 @@ function handleSmartGroup(result: AutoGroupResult, state: { groups: SampleGroup[
       </template>
       <template #controls="{ state }">
         <HstCheckbox v-model="state.enableGrouping" title="Enable Grouping" />
-        <HstCheckbox v-model="state.enableSmartGroup" title="Enable Smart Group" />
+        <HstCheckbox v-model="state.enableSmartGroup" title="Enable Smart" />
       </template>
     </Variant>
 
@@ -106,7 +106,17 @@ function handleSmartGroup(result: AutoGroupResult, state: { groups: SampleGroup[
       </div>
     </Variant>
 
-    <Variant title="With Manual Group Button">
+    <Variant title="Narrow Action Bar">
+      <div style="padding: 2rem; width: 320px;">
+        <SampleSelector
+          :model-value="['Control_Rep1']"
+          :samples="mockSamples"
+          :groups="mockGroups"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="With Manual Button">
       <div style="padding: 2rem; max-width: 1040px;">
         <SampleSelector
           :model-value="[]"

package/src/components/SampleSelector.vue

@@ -245,8 +245,13 @@ defineExpose({ handleSmartGroupApply })
 
     <!-- Action Buttons Row -->
     <div v-if="enableGrouping" class="mint-sample-selector__actions">
-      <div class="mint-sample-selector__actions-row">
-        <!-- Smart Group Button -->
+      <div
+        :class="[
+          'mint-sample-selector__actions-row',
+          !enableSmartGroup ? 'mint-sample-selector__actions-row--single-primary' : '',
+        ]"
+      >
+        <!-- Smart Button -->
         <BaseButton
           v-if="enableSmartGroup"
           :variant="groupingEnabled ? 'primary' : 'secondary'"
@@ -258,7 +263,7 @@ defineExpose({ handleSmartGroupApply })
           <svg class="mint-sample-selector__action-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
           </svg>
-          <span>Smart Group</span>
+          <span class="mint-sample-selector__action-label">Smart</span>
         </BaseButton>
 
         <BaseButton
@@ -271,7 +276,7 @@ defineExpose({ handleSmartGroupApply })
           <svg class="mint-sample-selector__action-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3 3 7.5l9 4.5 9-4.5L12 3ZM3 12l9 4.5 9-4.5M3 16.5l9 4.5 9-4.5" />
           </svg>
-          <span>Manual Group</span>
+          <span class="mint-sample-selector__action-label">Manual</span>
         </BaseButton>
 
         <!-- Reset Button -->
@@ -599,7 +604,7 @@ defineExpose({ handleSmartGroupApply })
 
         <!-- Empty state -->
         <div v-if="internalGroups.length === 0" class="mint-sample-selector__empty">
-          Click Smart Group to auto-group samples
+          Click Smart to auto-group samples
         </div>
       </div>
 
@@ -710,7 +715,7 @@ defineExpose({ handleSmartGroupApply })
       </div>
     </div>
 
-    <!-- Smart Grouping Modal -->
+    <!-- Smart grouping modal -->
     <AutoGroupModal
       v-model="showSmartGroupModal"
       :samples="resolvedSamples"

package/src/styles/components/auto-group-modal.css

@@ -9,6 +9,16 @@
   min-width: 0;
 }
 
+.mint-modal__body:has(> .mint-auto-group .mint-auto-group__manual-mode) {
+  overflow: hidden;
+}
+
+.mint-auto-group:has(.mint-auto-group__manual-mode) {
+  height: min(34rem, calc(100vh - 12rem));
+  min-height: min(26rem, calc(100vh - 12rem));
+  overflow: hidden;
+}
+
 /* --- Workflow tabs --- */
 .mint-auto-group__workflow-bar {
   display: flex;
@@ -61,11 +71,13 @@
 }
 
 .mint-auto-group__manual-mode {
+  flex: 1;
   display: flex;
   flex-direction: column;
   gap: 0.625rem;
   min-height: 0;
   min-width: 0;
+  overflow: hidden;
 }
 
 .mint-auto-group__manual-summary {
@@ -134,13 +146,16 @@
   display: grid;
   grid-template-columns: minmax(0, 1.15fr) minmax(20rem, 0.85fr);
   gap: 0.625rem;
-  min-height: 31rem;
+  flex: 1;
+  min-height: 0;
   min-width: 0;
+  overflow: hidden;
 }
 
 .mint-auto-group__manual-panel {
   min-width: 0;
   min-height: 0;
+  overflow: hidden;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
@@ -591,13 +606,13 @@
 }
 
 .mint-auto-group__manual-cohorts {
-  flex: 1;
+  flex: 0 1 auto;
   min-height: 0;
-  overflow-y: auto;
+  overflow: visible;
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
-  padding-right: 0.25rem;
+  padding-right: 0;
 }
 
 .mint-auto-group__manual-cohorts-head {
@@ -1286,8 +1301,7 @@
     min-height: 0;
   }
 
-  .mint-auto-group__manual-list,
-  .mint-auto-group__manual-cohorts {
+  .mint-auto-group__manual-list {
     max-height: 18rem;
   }
 

package/src/styles/components/sample-selector.css

@@ -72,25 +72,32 @@
 }
 
 .mint-sample-selector__actions-row {
-  display: flex;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
   align-items: center;
-  gap: 0.5rem;
-  flex-wrap: nowrap; /* Ensure buttons stay on one line */
+  gap: 0.375rem;
+  min-width: 0;
+}
+
+.mint-sample-selector__actions-row--single-primary {
+  grid-template-columns: minmax(0, 1fr) auto;
 }
 
 /* BaseButton overrides for action buttons */
 .mint-sample-selector__action-btn {
-  flex: 1 1 auto;
-  display: flex;
+  width: 100%;
+  min-width: 0; /* Allow labels to ellipsize inside tight containers */
   align-items: center;
   justify-content: center;
-  gap: 0.5rem;
-  min-width: 0; /* Allow buttons to shrink below content size */
+  gap: 0.375rem;
+  padding-inline: 0.5rem;
+  font-size: 0.8125rem;
 }
 
 .mint-sample-selector__action-btn--reset {
-  flex: 0 0 auto; /* Don't grow or shrink */
-  min-width: auto;
+  width: var(--form-height-sm);
+  min-width: var(--form-height-sm);
+  aspect-ratio: 1;
   padding: 0.5rem;
 }
 
@@ -100,6 +107,13 @@
   flex-shrink: 0;
 }
 
+.mint-sample-selector__action-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 /* Level Popover */
 .mint-sample-selector__popover {
   position: absolute;