@morscherlab/mint-sdk 1.2.1 → 1.2.3

package/src/styles/components/searchable-select.css

@@ -0,0 +1,63 @@
+.mint-searchable-select { position: relative; min-width: 0; }
+
+.mint-searchable-select__trigger {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: var(--form-height-md);
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+  font: inherit;
+  font-size: 0.8125rem;
+  cursor: pointer;
+  transition: border-color 150ms ease, box-shadow 150ms ease;
+}
+
+.mint-searchable-select--sm .mint-searchable-select__trigger { min-height: var(--form-height-sm); padding: 0.3rem 0.5rem; font-size: 0.75rem; }
+.mint-searchable-select--lg .mint-searchable-select__trigger { min-height: var(--form-height-lg); padding: 0.75rem 1rem; font-size: 1rem; }
+.mint-searchable-select__trigger:focus-visible { outline: none; border-color: transparent; box-shadow: var(--focus-ring); }
+.mint-searchable-select__trigger:disabled { background: var(--bg-tertiary); cursor: not-allowed; opacity: var(--mint-disabled-opacity); }
+.mint-searchable-select__trigger svg { width: 1rem; height: 1rem; flex: none; color: var(--text-muted); }
+.mint-searchable-select__value { flex: 1; min-width: 0; overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
+.mint-searchable-select__value--placeholder { color: var(--text-muted); }
+
+.mint-searchable-select__panel {
+  position: absolute;
+  top: calc(100% + 0.25rem);
+  right: 0;
+  left: 0;
+  z-index: 30;
+  display: flex;
+  max-height: min(38rem, 80vh);
+  flex-direction: column;
+  overflow: hidden;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  background: var(--bg-card);
+  box-shadow: var(--shadow-lg);
+}
+
+.mint-searchable-select__search-wrap { position: relative; padding: 0.5rem; border-bottom: 1px solid var(--border-color); }
+.mint-searchable-select__search-wrap svg { position: absolute; top: 50%; left: 1rem; width: 0.875rem; height: 0.875rem; color: var(--text-muted); transform: translateY(-50%); pointer-events: none; }
+.mint-searchable-select__search { width: 100%; min-height: var(--form-height-sm); padding: 0.375rem 0.625rem 0.375rem 1.75rem; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-primary); color: var(--text-primary); font: inherit; font-size: 0.8125rem; box-sizing: border-box; }
+.mint-searchable-select__search:focus-visible { outline: none; border-color: transparent; box-shadow: var(--focus-ring); }
+.mint-searchable-select__list { min-height: 0; margin: 0; padding: 0.25rem; overflow-y: auto; list-style: none; }
+.mint-searchable-select__option { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.5rem; border-radius: var(--radius-sm); color: var(--text-primary); cursor: pointer; }
+.mint-searchable-select__option--active { background: var(--bg-tertiary); }
+.mint-searchable-select__option--selected { background: var(--color-primary-soft); color: var(--text-primary); }
+.mint-searchable-select__option--disabled { cursor: not-allowed; opacity: 0.5; }
+.mint-searchable-select__option-text { display: flex; min-width: 0; flex: 1; flex-direction: column; }
+.mint-searchable-select__option-label { overflow: hidden; font-size: 0.75rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
+.mint-searchable-select__option-description { font-size: 0.625rem; line-height: 1.35; color: var(--text-muted); }
+.mint-searchable-select__option-meta { flex: none; padding: 0.0625rem 0.3125rem; border-radius: var(--radius-sm); background: var(--bg-secondary); color: var(--text-muted); font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.04em; text-transform: uppercase; }
+.mint-searchable-select__check { width: 1rem; height: 1rem; flex: none; }
+.mint-searchable-select__empty { padding: 1rem; text-align: center; color: var(--text-muted); font-size: 0.75rem; }
+.mint-searchable-select__footer { padding: 0.625rem; border-top: 1px solid var(--border-color); color: var(--text-secondary); font-size: 0.6875rem; }
+
+@media (prefers-reduced-motion: reduce) {
+  .mint-searchable-select__trigger { transition: none; }
+}

package/src/styles/components/well-plate.css

@@ -127,6 +127,15 @@
   background-color: rgba(16, 185, 129, 0.2);
 }
 
+/* Optional semantic classes for `wellClass` callbacks. */
+.mint-well-plate__well--outlier {
+  box-shadow: inset 0 0 0 1.6px var(--mint-warning);
+}
+
+.mint-well-plate__well--conflict {
+  box-shadow: inset 0 0 0 1.6px var(--mint-error);
+}
+
 /* Draggable well — explicit -webkit-user-drag for Chrome inside <table> cells */
 .mint-well-plate__well--draggable {
   cursor: grab;

package/src/styles/index.css

@@ -7,6 +7,7 @@
 
 /* Component styles - alphabetically ordered */
 @import './components/action-menu.css';
+@import './components/adduct-text.css';
 @import './components/alert-box.css';
 @import './components/app-container.css';
 @import './components/app-layout.css';
@@ -23,6 +24,7 @@
 @import './components/icon-button.css';
 @import './components/instrument-monitor.css';
 @import './components/jobs-status-tray.css';
+@import './components/layout-resize-handle.css';
 @import './components/input.css';
 @import './components/modal.css';
 @import './components/number-input.css';
@@ -32,6 +34,7 @@
 @import './components/section-card.css';
 @import './components/secret-input.css';
 @import './components/select.css';
+@import './components/searchable-select.css';
 @import './components/skeleton.css';
 @import './components/slider.css';
 @import './components/tabs.css';

package/src/types/componentLabTypes.ts

@@ -15,6 +15,12 @@ export interface Well {
   metadata?: Record<string, unknown>
 }
 
+export type WellClassValue = string | string[] | Record<string, boolean>
+export type WellClassResolver = (well: Well) => WellClassValue | undefined
+export type WellStyleResolver = (
+  well: Well,
+) => Record<string, string | number | undefined> | undefined
+
 export type HeatmapColorScale = 'viridis' | 'plasma' | 'turbo' | 'custom'
 
 export interface HeatmapConfig {

package/src/types/components.ts

@@ -103,6 +103,10 @@ export interface SelectOption<T = string> {
   label: string
   disabled?: boolean
   description?: string
+  /** Short trailing classification, count, or status. */
+  meta?: string
+  /** Explanation shown for an unavailable option. */
+  disabledReason?: string
 }
 
 export type SelectOptionInput<T extends OptionPrimitive = OptionPrimitive> = SelectOption<T> | T
@@ -281,6 +285,9 @@ export type {
   WellPlateSize,
   WellShape,
   Well,
+  WellClassValue,
+  WellClassResolver,
+  WellStyleResolver,
   HeatmapColorScale,
   HeatmapConfig,
   SlotPosition,

package/src/types/index.ts

@@ -45,6 +45,9 @@ export type {
   WellPlateSize,
   WellShape,
   Well,
+  WellClassValue,
+  WellClassResolver,
+  WellStyleResolver,
   HeatmapColorScale,
   HeatmapConfig,
   // Well Plate editing types