@morscherlab/mint-sdk 1.2.1 → 1.2.2

package/src/components/WellPlate.vue

@@ -1,7 +1,7 @@
 <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 type { WellPlateFormat, WellPlateSelectionMode, WellPlateSize, Well, HeatmapConfig, WellShape, WellEditField, WellEditData, WellLegendItem, ColumnCondition, RowCondition, WellSampleDropData, WellSampleDropParser, WellClassResolver, WellClassValue, WellStyleResolver } from '../types'
 import { useEventListener } from '../composables/useEventListener'
 import WellEditPopupInternal from './internal/WellEditPopupInternal.vue'
 import {
@@ -73,6 +73,10 @@ interface Props {
    * 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
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -213,8 +217,8 @@ const {
   emitSampleDrop: (wellId, data, event) => emit('sample-drop', wellId, data, event),
 })
 
-function getWellClasses(well: Well): string[] {
-  return wellClasses(well, {
+function getWellClasses(well: Well): WellClassValue[] {
+  const base = wellClasses(well, {
     wellShape: props.wellShape,
     selectionMode: props.selectionMode,
     selected: isSelected(well.id),
@@ -225,13 +229,18 @@ function getWellClasses(well: Well): string[] {
     dragSource: dragSourceWell.value === well.id,
     dragTarget: dragTargetWell.value === well.id,
   })
+  const custom = props.wellClass?.(well)
+  return custom ? [base, custom] : [base]
 }
 
-function getWellStyle(well: Well): Record<string, string> {
-  return wellStyle(well, {
-    heatmap: props.heatmap,
-    sampleColors: props.sampleColors,
-  })
+function getWellStyle(well: Well): Record<string, string | number | undefined> {
+  return {
+    ...wellStyle(well, {
+      heatmap: props.heatmap,
+      sampleColors: props.sampleColors,
+    }),
+    ...props.wellStyle?.(well),
+  }
 }
 
 function getSampleTypeIndicator(well: Well): string | null {

package/src/components/index.ts

@@ -3,6 +3,7 @@ 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'
@@ -55,6 +56,7 @@ 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'
+export { default as LayoutResizeHandle } from './LayoutResizeHandle.vue'
 
 // Utility components
 export { default as Skeleton } from './Skeleton.vue'
@@ -68,6 +70,7 @@ 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
@@ -101,7 +104,6 @@ export { default as ProtocolStepEditor } from './ProtocolStepEditor.vue'
 // Scientific display components
 export { default as PlotlyChart } from './PlotlyChart.vue'
 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. */

package/src/composables/index.ts

@@ -139,6 +139,16 @@ export {
   type UseDebouncedWatchOptions,
   type UseDebouncedWatchReturn,
 } from './useDebouncedWatch'
+export {
+  resizedLeadingPanelWidth,
+  resizedTrailingPanelWidth,
+  resizedVerticalSplitPercent,
+  useManualLayoutResize,
+  type ManualLayoutResizeContext,
+  type ManualLayoutResizeTarget,
+  type ResizePanelWidthConstraints,
+  type ResizePercentConstraints,
+} from './useManualLayoutResize'
 export { useFormBuilder, evaluateCondition } from './useFormBuilder'
 export {
   createGeneratedAnalysisTransport,

package/src/composables/useManualLayoutResize.ts

@@ -0,0 +1,165 @@
+import { computed, onBeforeUnmount, shallowRef, toValue, watch, type MaybeRefOrGetter } from 'vue'
+
+export interface ResizePanelWidthConstraints {
+  minWidth: number
+  maxWidth: number
+  mainMinWidth?: number
+  layoutGap?: number
+}
+
+export interface ResizePercentConstraints {
+  minPercent: number
+  maxPercent: number
+}
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, value))
+}
+
+function availablePanelWidth(
+  containerWidth: number,
+  constraints: ResizePanelWidthConstraints,
+): number {
+  return Math.min(
+    constraints.maxWidth,
+    containerWidth - (constraints.mainMinWidth ?? 0) - (constraints.layoutGap ?? 0),
+  )
+}
+
+export function resizedLeadingPanelWidth(
+  startWidth: number,
+  deltaX: number,
+  containerWidth: number,
+  constraints: ResizePanelWidthConstraints,
+): number {
+  return Math.round(clamp(
+    startWidth + deltaX,
+    constraints.minWidth,
+    Math.max(constraints.minWidth, availablePanelWidth(containerWidth, constraints)),
+  ))
+}
+
+export function resizedTrailingPanelWidth(
+  startWidth: number,
+  deltaX: number,
+  containerWidth: number,
+  constraints: ResizePanelWidthConstraints,
+): number {
+  return resizedLeadingPanelWidth(startWidth, -deltaX, containerWidth, constraints)
+}
+
+export function resizedVerticalSplitPercent(
+  startPercent: number,
+  deltaY: number,
+  containerHeight: number,
+  constraints: ResizePercentConstraints,
+): number {
+  if (containerHeight <= 0) return startPercent
+  return Math.round(clamp(
+    startPercent + (deltaY / containerHeight) * 100,
+    constraints.minPercent,
+    constraints.maxPercent,
+  ))
+}
+
+export interface ManualLayoutResizeContext<TKind extends string> {
+  kind: TKind
+  startValue: number
+  deltaX: number
+  deltaY: number
+  containerRect: DOMRectReadOnly
+  secondaryRect: DOMRectReadOnly | null
+}
+
+export interface ManualLayoutResizeTarget<TKind extends string> {
+  cursor?: string
+  getContainerElement: () => HTMLElement | null
+  getSecondaryElement?: () => HTMLElement | null
+  getStartValue: () => number
+  onResize: (context: ManualLayoutResizeContext<TKind>) => void
+}
+
+/** Coordinates pointer-driven resizing for one or more layout splitters. */
+export function useManualLayoutResize<TKind extends string>(options: {
+  enabled: MaybeRefOrGetter<boolean>
+  resolveTarget: (kind: TKind) => ManualLayoutResizeTarget<TKind> | null
+}) {
+  const activeResize = shallowRef<{
+    kind: TKind
+    startClientX: number
+    startClientY: number
+    startValue: number
+    containerRect: DOMRectReadOnly
+    secondaryRect: DOMRectReadOnly | null
+    cursor: string
+  } | null>(null)
+  const isResizing = computed(() => activeResize.value !== null)
+  let previousBodyCursor = ''
+  let previousBodyUserSelect = ''
+
+  function stopResize(): void {
+    if (!activeResize.value) return
+    activeResize.value = null
+    window.removeEventListener('pointermove', handlePointerMove)
+    window.removeEventListener('pointerup', stopResize)
+    window.removeEventListener('pointercancel', stopResize)
+    if (typeof document !== 'undefined') {
+      document.body.style.cursor = previousBodyCursor
+      document.body.style.userSelect = previousBodyUserSelect
+    }
+  }
+
+  function handlePointerMove(event: PointerEvent): void {
+    const state = activeResize.value
+    if (!state) return
+    options.resolveTarget(state.kind)?.onResize({
+      kind: state.kind,
+      startValue: state.startValue,
+      deltaX: event.clientX - state.startClientX,
+      deltaY: event.clientY - state.startClientY,
+      containerRect: state.containerRect,
+      secondaryRect: state.secondaryRect,
+    })
+  }
+
+  function startResize(kind: TKind, event: PointerEvent): void {
+    if (!toValue(options.enabled) || event.button !== 0) return
+    const target = options.resolveTarget(kind)
+    const containerRect = target?.getContainerElement()?.getBoundingClientRect()
+    if (!target || !containerRect) return
+
+    event.preventDefault()
+    if (event.currentTarget instanceof HTMLElement) {
+      event.currentTarget.setPointerCapture(event.pointerId)
+    }
+    const secondary = target.getSecondaryElement?.() ?? null
+    activeResize.value = {
+      kind,
+      startClientX: event.clientX,
+      startClientY: event.clientY,
+      startValue: target.getStartValue(),
+      containerRect,
+      secondaryRect: secondary?.getBoundingClientRect() ?? null,
+      cursor: target.cursor ?? 'col-resize',
+    }
+
+    if (typeof document !== 'undefined') {
+      previousBodyCursor = document.body.style.cursor
+      previousBodyUserSelect = document.body.style.userSelect
+      document.body.style.cursor = activeResize.value.cursor
+      document.body.style.userSelect = 'none'
+    }
+    window.addEventListener('pointermove', handlePointerMove)
+    window.addEventListener('pointerup', stopResize)
+    window.addEventListener('pointercancel', stopResize)
+  }
+
+  function isResizingKind(kind: TKind): boolean {
+    return activeResize.value?.kind === kind
+  }
+
+  watch(() => toValue(options.enabled), enabled => { if (!enabled) stopResize() })
+  onBeforeUnmount(stopResize)
+
+  return { activeResize, isResizing, isResizingKind, startResize, stopResize }
+}

package/src/styles/components/adduct-text.css

@@ -0,0 +1,45 @@
+.mint-adduct-text {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  max-width: 100%;
+  overflow: hidden;
+  color: var(--text-muted);
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  letter-spacing: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mint-adduct-text--mono { font-family: var(--font-mono); font-feature-settings: 'liga' 0, 'calt' 0; }
+.mint-adduct-text--sans { font-family: var(--font-sans); font-feature-settings: 'liga' 1, 'calt' 1; font-weight: 650; }
+
+.mint-adduct-text--xs {
+  font-size: 0.625rem;
+  line-height: 1rem;
+}
+
+.mint-adduct-text--inherit {
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.mint-adduct-text--badge {
+  padding: 0.125rem 0.25rem;
+  border-radius: var(--radius-sm);
+  background: var(--bg-tertiary);
+}
+
+.mint-adduct-text--on-primary {
+  color: rgb(255 255 255 / 0.82);
+}
+
+.mint-adduct-text--badge.mint-adduct-text--on-primary {
+  background: rgb(255 255 255 / 0.2);
+}
+
+.mint-adduct-text--muted,
+.mint-adduct-text--empty {
+  color: var(--text-muted);
+}

package/src/styles/components/chart-container.css

@@ -7,6 +7,16 @@
   overflow: hidden;
 }
 
+.mint-chart--frame {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  border: 0;
+  border-radius: 0;
+  background: var(--bg-card);
+}
+
 .mint-chart__header {
   display: flex;
   align-items: flex-start;
@@ -51,6 +61,44 @@
   min-height: 12rem;
 }
 
+.mint-chart--frame .mint-chart__header {
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.625rem 0.875rem;
+  flex-shrink: 0;
+}
+
+.mint-chart--frame .mint-chart__header-text {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.mint-chart--frame .mint-chart__title {
+  overflow: hidden;
+  font-size: 0.8125rem;
+  letter-spacing: -0.005em;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mint-chart--frame .mint-chart__description {
+  margin-top: 0 !important;
+  overflow: hidden;
+  font-size: 0.75rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mint-chart--frame .mint-chart__toolbar {
+  gap: 0.375rem;
+}
+
+.mint-chart--frame .mint-chart__body {
+  flex: 1;
+  min-height: 0;
+}
+
 .mint-chart__loading-overlay {
   position: absolute;
   inset: 0;
@@ -61,9 +109,53 @@
   z-index: 1;
 }
 
+.mint-chart--frame .mint-chart__loading-overlay {
+  z-index: 10;
+  padding: 1.5rem;
+}
+
+.mint-chart--frame .mint-chart__body > .mint-empty-state {
+  position: absolute;
+  inset: 0;
+  z-index: 10;
+  max-width: none;
+  padding: 1.5rem;
+  background: var(--bg-card);
+}
+
+.mint-chart--frame .mint-empty-state__icon-wrapper {
+  width: 2.5rem;
+  height: 2.5rem;
+  margin-bottom: 0.5rem;
+  background: transparent;
+}
+
+.mint-chart--frame .mint-empty-state__title {
+  font-size: 0.8125rem;
+}
+
 .mint-chart__legend {
   padding: 0.75rem 1.5rem;
   border-top: 1px solid var(--border-color);
   font-size: 0.8125rem;
   color: var(--text-secondary);
 }
+
+.mint-chart__footer {
+  padding: 0.625rem 0.875rem;
+  border-top: 1px solid var(--border-color);
+  color: var(--text-secondary);
+  font-size: 0.75rem;
+}
+
+.mint-chart--frame .mint-chart__footer {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.4375rem 0.875rem;
+  background: var(--bg-primary);
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: 0.65625rem;
+  flex-shrink: 0;
+}

package/src/styles/components/chemical-formula.css

@@ -1,18 +1,48 @@
 /* ChemicalFormula Component Styles */
 
 .mint-chem-formula {
-  display: inline;
-  font-family: Arial, Helvetica, sans-serif;
+  display: inline-flex;
+  align-items: baseline;
+  gap: 0.25rem;
+  max-width: 100%;
+  font-family: var(--font-mono);
+  font-weight: 600;
   color: var(--text-primary);
-  letter-spacing: 0.01em;
+  letter-spacing: 0;
+  white-space: nowrap;
 }
 
 .mint-chem-formula--block {
-  display: block;
+  display: flex;
   font-size: 1.25em;
   padding: 0.25rem 0;
 }
 
+.mint-chem-formula--xs { font-size: 0.625rem; line-height: 1rem; }
+.mint-chem-formula--sm { font-size: 0.75rem; line-height: 1rem; }
+.mint-chem-formula--primary { color: var(--text-primary); }
+.mint-chem-formula--secondary { color: var(--text-secondary); }
+.mint-chem-formula--muted,
+.mint-chem-formula--empty { color: var(--text-muted); }
+
+.mint-chem-formula--pill {
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.375rem;
+  background: var(--bg-tertiary);
+}
+
+.mint-chem-formula--pill.mint-chem-formula--sm {
+  padding: 0.125rem 0.625rem;
+  border: 1px solid var(--border-color);
+  border-radius: 999px;
+}
+
+.mint-chem-formula__formula {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .mint-chem-formula__element {
   /* default styling inherited */
 }

package/src/styles/components/layout-resize-handle.css

@@ -0,0 +1,60 @@
+.mint-layout-resize-handle {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  cursor: col-resize;
+}
+
+.mint-layout-resize-handle--vertical { width: 1rem; min-height: 2.75rem; }
+.mint-layout-resize-handle--horizontal { min-width: 2.75rem; height: 1rem; cursor: row-resize; }
+.mint-layout-resize-handle--edge-left,
+.mint-layout-resize-handle--edge-right { position: absolute; top: 0; bottom: 0; z-index: 10; height: auto; }
+.mint-layout-resize-handle--edge-left { left: 0; transform: translateX(-100%); }
+.mint-layout-resize-handle--edge-right { right: 0; transform: translateX(100%); }
+
+.mint-layout-resize-handle__bar {
+  display: block;
+  width: 0.25rem;
+  height: 2.75rem;
+  border-radius: 999px;
+  background: var(--border-color);
+  opacity: 0.72;
+  transition: background-color 150ms ease, opacity 150ms ease, transform 150ms ease;
+}
+
+.mint-layout-resize-handle--horizontal .mint-layout-resize-handle__bar {
+  width: 2.75rem;
+  height: 0.25rem;
+}
+
+.mint-layout-resize-handle:hover .mint-layout-resize-handle__bar,
+.mint-layout-resize-handle:focus-visible .mint-layout-resize-handle__bar {
+  background: var(--color-primary);
+  opacity: 1;
+}
+
+.mint-layout-resize-handle--vertical:hover .mint-layout-resize-handle__bar,
+.mint-layout-resize-handle--vertical:focus-visible .mint-layout-resize-handle__bar { transform: scaleX(1.35); }
+.mint-layout-resize-handle--horizontal:hover .mint-layout-resize-handle__bar,
+.mint-layout-resize-handle--horizontal:focus-visible .mint-layout-resize-handle__bar { transform: scaleY(1.35); }
+
+.mint-layout-resize-handle:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+.mint-layout-resize-handle--edge-left:focus-visible,
+.mint-layout-resize-handle--edge-right:focus-visible { outline-offset: -2px; }
+
+.mint-layout-resize-handle[aria-disabled='true'] { cursor: not-allowed; opacity: 0.5; }
+
+@media (prefers-reduced-motion: reduce) {
+  .mint-layout-resize-handle__bar { transition: none; }
+}
+
+@media (pointer: coarse) {
+  .mint-layout-resize-handle--vertical { width: 2.75rem; }
+  .mint-layout-resize-handle--horizontal { height: 2.75rem; }
+}

package/src/styles/components/number-input.css

@@ -105,6 +105,8 @@
   -webkit-appearance: textfield;
   -moz-appearance: textfield;
   appearance: textfield;
+  cursor: ew-resize;
+  touch-action: pan-y;
 }
 
 .mint-number-input__input::-webkit-outer-spin-button,

package/src/styles/components/rack-editor.css

@@ -20,6 +20,12 @@
   gap: 2px;
 }
 
+.mint-rack-editor__tab-item {
+  position: relative;
+  display: flex;
+  align-items: flex-end;
+}
+
 .mint-rack-editor__tab {
   position: relative;
   display: flex;
@@ -32,7 +38,7 @@
   border-top-right-radius: 0.5rem;
   border: 1px solid transparent;
   cursor: grab;
-  transition: all 0.2s;
+  transition: background-color 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s;
   background: transparent;
   color: var(--text-muted);
   white-space: nowrap;
@@ -47,6 +53,11 @@
   color: var(--text-secondary);
 }
 
+.mint-rack-editor__tab:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: -2px;
+}
+
 .mint-rack-editor__tab--active {
   background-color: var(--bg-secondary);
   color: var(--text-primary);
@@ -61,7 +72,7 @@
 }
 
 .mint-rack-editor__tab--drag-over {
-  box-shadow: 0 0 0 2px #6366f1, 0 0 0 3px white;
+  box-shadow: var(--focus-ring);
 }
 
 /* Slot color dot */
@@ -82,8 +93,8 @@
 }
 
 .mint-rack-editor__count--active {
-  background-color: rgba(16, 185, 129, 0.15);
-  color: #10b981;
+  background-color: color-mix(in srgb, var(--mint-success) 15%, transparent);
+  color: var(--mint-success);
 }
 
 .mint-rack-editor__count--inactive {
@@ -104,7 +115,7 @@
   justify-content: center;
   font-size: 10px;
   font-weight: 700;
-  background-color: rgba(239, 68, 68, 0.9);
+  background-color: color-mix(in srgb, var(--mint-error) 90%, transparent);
   color: white;
   border: none;
   cursor: pointer;
@@ -112,7 +123,8 @@
   transition: opacity 0.15s, transform 0.15s;
 }
 
-.mint-rack-editor__tab:hover .mint-rack-editor__tab-remove {
+.mint-rack-editor__tab-item:hover .mint-rack-editor__tab-remove,
+.mint-rack-editor__tab-item:focus-within .mint-rack-editor__tab-remove {
   opacity: 1;
 }
 
@@ -120,6 +132,16 @@
   transform: scale(1.1);
 }
 
+.mint-rack-editor__tab-remove:focus-visible {
+  opacity: 1;
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+@media (hover: none) {
+  .mint-rack-editor__tab-remove { opacity: 1; }
+}
+
 /* Add rack button */
 .mint-rack-editor__add-btn {
   display: flex;
@@ -131,15 +153,15 @@
   font-weight: 500;
   border-radius: var(--radius-md);
   cursor: pointer;
-  transition: all 0.2s;
+  transition: background-color 0.2s, color 0.2s;
   border: none;
   background: transparent;
   color: var(--text-muted);
 }
 
 .mint-rack-editor__add-btn:hover {
-  background-color: rgba(16, 185, 129, 0.1);
-  color: #10b981;
+  background-color: color-mix(in srgb, var(--mint-success) 10%, transparent);
+  color: var(--mint-success);
 }
 
 /* Toolbar */