@morscherlab/mint-sdk 1.3.0-beta.9 → 1.3.0

package/dist/index.js

@@ -1,4 +1,4 @@
-import { $ as PlateEditor_default, A as SampleLegend_default, At as AppToastContainer_default, B as StatusIndicator_default, C as ChemicalFormula_default, Ct as AppAvatarMenu_default, D as ReagentEditor_default, Dt as ActionMenu_default, E as SampleHierarchyTree_default, Et as ThemeToggle_default, F as SettingsModal_default, Ft as Calendar_default, G as ControlWorkspaceView_default, H as LayoutResizeHandle_default, I as AdductText_default, It as BasePill_default, J as SampleSelector_default, K as ComponentBindingRenderer_default, L as Breadcrumb_default, Lt as SegmentedControl_default, M as BioTemplatePackWorkspaceView_default, Mt as FormField_default, N as BioTemplateExperimentWorkspaceView_default, Nt as DataFrame_default, O as SmartGroupModal_default, Ot as IconButton_default, P as BioTemplateRenderer_default, Pt as LoadingSpinner_default, Q as ReagentList_default, R as Avatar_default, Rt as BaseTabs_default, S as sequenceSamplesRemaining, St as AppTopBar_default, T as ProtocolStepEditor_default, Tt as CollapsibleCard_default, U as AppContainer_default, V as Divider_default, W as DoseDesignWorkspaceView_default, X as SmartGroupManual_default, Y as AutoGroupModal_default, Z as SmartGroupFieldRecipe_default, _ as estimateSequenceFinishDate, _t as AppLayout_default, a as ArtifactSaveDialog_default, at as GeneratedPluginView_default, b as formatSequenceRemaining, bt as FormActions_default, c as SectionCard_default, ct as GeneratedPlotlyResult_default, d as ExperimentCodeBadge_default, dt as ChartContainer_default, et as ConfirmDialog_default, f as ExperimentDataViewer_default, ft as generatedJobDefaults, g as SequenceProgressBar_default, gt as MobileSupportGate_default, h as InstrumentStateBadge_default, ht as PluginWorkspaceView_default, i as ExperimentPopover_default, it as DoseCalculator_default, j as BioTemplatePresetWorkspaceView_default, jt as AlertBox_default, k as GroupAssigner_default, kt as RuntimeUpdateNotice_default, l as ResourceCard_default, lt as PlotlyChart_default, m as AuditTrail_default, mt as normalizeGeneratedJobInput, n as FilePicker_default, nt as sampleTypeMarker, o as ArtifactSelectorModal_default, ot as JobsStatusTray_default, p as BatchProgressList_default, pt as generatedJobFormSchema, q as ScheduleCalendar_default, r as FitPanel_default, rt as ExperimentTimeline_default, s as ExperimentSelectorModal_default, st as GeneratedResultRenderer_default, tt as WellPlate_default, u as TimeRangeInput_default, ut as mintPlotlyTemplate, v as estimateSequenceRemainingSeconds, vt as AppSidebar_default, w as ScientificNumber_default, wt as PluginIcon_default, x as sequenceProgressPercent, xt as StepWizard_default, y as formatSequenceEta, yt as FormBuilder_default, z as ProgressBar_default, zt as SearchableSelect_default } from "./components-GDDvof8D.js";
+import { $ as PlateEditor_default, A as SampleLegend_default, At as AppToastContainer_default, B as StatusIndicator_default, C as ChemicalFormula_default, Ct as AppAvatarMenu_default, D as ReagentEditor_default, Dt as ActionMenu_default, E as SampleHierarchyTree_default, Et as ThemeToggle_default, F as SettingsModal_default, Ft as Calendar_default, G as ControlWorkspaceView_default, H as LayoutResizeHandle_default, I as AdductText_default, It as BasePill_default, J as SampleSelector_default, K as ComponentBindingRenderer_default, L as Breadcrumb_default, Lt as SegmentedControl_default, M as BioTemplatePackWorkspaceView_default, Mt as FormField_default, N as BioTemplateExperimentWorkspaceView_default, Nt as DataFrame_default, O as SmartGroupModal_default, Ot as IconButton_default, P as BioTemplateRenderer_default, Pt as LoadingSpinner_default, Q as ReagentList_default, R as Avatar_default, Rt as BaseTabs_default, S as sequenceSamplesRemaining, St as AppTopBar_default, T as ProtocolStepEditor_default, Tt as CollapsibleCard_default, U as AppContainer_default, V as Divider_default, W as DoseDesignWorkspaceView_default, X as SmartGroupManual_default, Y as AutoGroupModal_default, Z as SmartGroupFieldRecipe_default, _ as estimateSequenceFinishDate, _t as AppLayout_default, a as ArtifactSaveDialog_default, at as GeneratedPluginView_default, b as formatSequenceRemaining, bt as FormActions_default, c as SectionCard_default, ct as GeneratedPlotlyResult_default, d as ExperimentCodeBadge_default, dt as ChartContainer_default, et as ConfirmDialog_default, f as ExperimentDataViewer_default, ft as generatedJobDefaults, g as SequenceProgressBar_default, gt as MobileSupportGate_default, h as InstrumentStateBadge_default, ht as PluginWorkspaceView_default, i as ExperimentPopover_default, it as DoseCalculator_default, j as BioTemplatePresetWorkspaceView_default, jt as AlertBox_default, k as GroupAssigner_default, kt as RuntimeUpdateNotice_default, l as ResourceCard_default, lt as PlotlyChart_default, m as AuditTrail_default, mt as normalizeGeneratedJobInput, n as FilePicker_default, nt as sampleTypeMarker, o as ArtifactSelectorModal_default, ot as JobsStatusTray_default, p as BatchProgressList_default, pt as generatedJobFormSchema, q as ScheduleCalendar_default, r as FitPanel_default, rt as ExperimentTimeline_default, s as ExperimentSelectorModal_default, st as GeneratedResultRenderer_default, tt as WellPlate_default, u as TimeRangeInput_default, ut as mintPlotlyTemplate, v as estimateSequenceRemainingSeconds, vt as AppSidebar_default, w as ScientificNumber_default, wt as PluginIcon_default, x as sequenceProgressPercent, xt as StepWizard_default, y as formatSequenceEta, yt as FormBuilder_default, z as ProgressBar_default, zt as SearchableSelect_default } from "./components-vHfxV2PB.js";
 import { a as tryUseSettingsStore, c as mintApiErrorFromResponse, i as tableDensityToSize, n as colorPalettes, o as useSettingsStore, r as paletteCssVariables, s as MintApiError, t as PALETTE_CSS_VARIABLES } from "./settings-BLr8lzw6.js";
 import { a as SORT_OPTIONS, c as formatExperimentDate, d as resolveExperimentCode, f as BaseModal_default, h as BaseButton_default, i as EXPERIMENT_STATUS_VARIANT_MAP, l as formatExperimentStatus, m as useEventListener, n as EXPERIMENT_STATUS_LABELS, o as datePresetToISO, p as useFocusTrap, r as EXPERIMENT_STATUS_OPTIONS, s as experimentIdFromRoute, t as DATE_PRESET_OPTIONS, u as getExperimentStatusVariant } from "./experiment-utils-DTANyVKV.js";
 import { i as BaseSelect_default, n as Skeleton_default, o as BaseInput_default, r as EmptyState_default } from "./ResourcePickerListInternal-CFAw4vTZ.js";

package/dist/install.js

@@ -1,4 +1,4 @@
-import { t as components_exports } from "./components-GDDvof8D.js";
+import { t as components_exports } from "./components-vHfxV2PB.js";
 //#region src/install.ts
 /**
 * Vue plugin that registers all MINT SDK components globally.

package/dist/styles.css

@@ -19491,8 +19491,8 @@ html.dark .mint-experiment-selector__filters-toggle--active {
 
 /* AppTopBar page selector — left-side route/page dropdown.
    Trigger speaks the field language (5a): 36px (the identity tile height), hover changes the background
-   only, open = field focus, inline 12px chevron. Menu = .mint-popover +
-   .mint-menu-item (2d); __menu / __item stay as aliases. */
+   only, open = field focus, inline 12px chevron. The menu keeps the 1.2 panel
+   (own card, tinted active row) rather than .mint-popover + .mint-menu-item. */
 
 .mint-page-selector {
   position: relative;
@@ -19592,44 +19592,88 @@ html.dark .mint-experiment-selector__filters-toggle--active {
 
 .mint-page-selector__menu {
   position: absolute;
-  top: calc(100% + 0.25rem);
+  top: calc(100% + 0.375rem);
   left: 0;
   width: 16.25rem;
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-md);
+  padding: 0.375rem;
   z-index: 50;
 }
 
 .mint-page-selector__menu-title {
-  padding: 0.25rem 0.5rem 0.375rem;
+  padding: 0.375rem 0.625rem 0.5rem;
   font-size: 0.75rem;
   font-weight: 500;
   color: var(--text-secondary);
 }
 
+.mint-page-selector__item {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  width: 100%;
+  padding: 0.5rem 0.625rem;
+  border: 0;
+  background: transparent;
+  border-radius: 0.4375rem;
+  color: var(--text-primary);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  font-family: inherit;
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background-color var(--mint-transition);
+}
+
+.mint-page-selector__item:hover:not(.mint-page-selector__item--disabled) {
+  background: var(--bg-hover);
+}
+
+.mint-page-selector__item--active {
+  background: var(--bg-tertiary);
+  font-weight: 600;
+}
+
+.mint-page-selector__item--disabled {
+  opacity: var(--mint-disabled-opacity);
+  cursor: not-allowed;
+}
+
 .mint-page-selector__item-icon {
-  width: 1.25rem;
-  height: 1.25rem;
-  border-radius: var(--radius-sm);
+  width: 1.375rem;
+  height: 1.375rem;
+  border-radius: 0.3125rem;
   background: var(--bg-tertiary);
-  color: var(--text-secondary-strong);
+  color: var(--text-secondary);
   display: grid;
   place-items: center;
   flex-shrink: 0;
 }
 
-.mint-page-selector__item-icon--metadata {
+.mint-page-selector__item--active .mint-page-selector__item-icon {
+  background: var(--color-primary-soft);
+  color: var(--color-primary);
+}
+
+.mint-page-selector__item-icon--metadata,
+.mint-page-selector__item--active .mint-page-selector__item-icon--metadata {
   background: transparent;
   color: inherit;
 }
 
 .mint-page-selector__item-icon svg {
-  width: 0.75rem;
-  height: 0.75rem;
+  width: 0.8125rem;
+  height: 0.8125rem;
 }
 
 .mint-page-selector__metadata-icon.mint-plugin-icon--sm {
-  width: 1.25rem;
-  height: 1.25rem;
-  border-radius: var(--radius-sm);
+  width: 1.375rem;
+  height: 1.375rem;
+  border-radius: 0.3125rem;
 }
 
 .mint-page-selector__item-label {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morscherlab/mint-sdk",
-  "version": "1.3.0-beta.9",
+  "version": "1.3.0",
   "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/__tests__/components/AppTopBarPageSelector.test.ts

@@ -154,23 +154,23 @@ describe('AppTopBarPageSelectorInternal', () => {
     expect(wrapper.get('.mint-plugin-icon__img').attributes('src')).toBe(httpsIcon)
   })
 
-  it('should render the menu on the shared popover surface when opened', async () => {
+  it('should render the menu as its own panel, not the shared popover, when opened', async () => {
     const wrapper = mount(AppTopBarPageSelectorInternal, {
       props: { currentPageId: 'Workspace', pages: ['Workspace', 'Results'] },
     })
 
     await wrapper.get('.mint-page-selector__trigger').trigger('click')
 
-    expect(wrapper.get('.mint-page-selector__menu').classes()).toContain('mint-popover')
+    expect(wrapper.get('.mint-page-selector__menu').classes()).not.toContain('mint-popover')
   })
 
-  it('should mark the current page as a selected menu item when opened', async () => {
+  it('should mark the current page as the active item when opened', async () => {
     const wrapper = mount(AppTopBarPageSelectorInternal, {
       props: { currentPageId: 'Workspace', pages: ['Workspace', 'Results'] },
     })
 
     await wrapper.get('.mint-page-selector__trigger').trigger('click')
 
-    expect(wrapper.findAll('.mint-page-selector__item')[0].classes()).toContain('mint-menu-item--selected')
+    expect(wrapper.findAll('.mint-page-selector__item')[0].classes()).toContain('mint-page-selector__item--active')
   })
 })

package/src/components/internal/AppTopBarPageSelectorInternal.vue

@@ -89,7 +89,7 @@ function handleSelect(page: PageSelectorItem) {
       </span>
     </button>
 
-    <div v-if="isOpen" class="mint-popover mint-page-selector__menu" role="menu">
+    <div v-if="isOpen" class="mint-page-selector__menu" role="menu">
       <div class="mint-page-selector__menu-title">Go to</div>
       <ActionItemInternal
         v-for="page in normalizedPages"
@@ -98,8 +98,8 @@ function handleSelect(page: PageSelectorItem) {
         :to="page.to"
         :disabled="page.disabled"
         :class="[
-          'mint-menu-item mint-page-selector__item',
-          { 'mint-menu-item--selected mint-page-selector__item--active': page.id === current?.id },
+          'mint-page-selector__item',
+          { 'mint-page-selector__item--active': page.id === current?.id },
           { 'mint-page-selector__item--disabled': page.disabled },
         ]"
         role="menuitem"
@@ -121,9 +121,6 @@ function handleSelect(page: PageSelectorItem) {
           </slot>
         </span>
         <span class="mint-page-selector__item-label">{{ page.label }}</span>
-        <svg class="mint-menu-item__check" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-          <path d="M3.5 8.5l3 3 6-7" />
-        </svg>
       </ActionItemInternal>
     </div>
   </div>

package/src/styles/components/app-page-selector.css

@@ -1,7 +1,7 @@
 /* AppTopBar page selector — left-side route/page dropdown.
    Trigger speaks the field language (5a): 36px (the identity tile height), hover changes the background
-   only, open = field focus, inline 12px chevron. Menu = .mint-popover +
-   .mint-menu-item (2d); __menu / __item stay as aliases. */
+   only, open = field focus, inline 12px chevron. The menu keeps the 1.2 panel
+   (own card, tinted active row) rather than .mint-popover + .mint-menu-item. */
 
 .mint-page-selector {
   position: relative;
@@ -101,44 +101,88 @@
 
 .mint-page-selector__menu {
   position: absolute;
-  top: calc(100% + 0.25rem);
+  top: calc(100% + 0.375rem);
   left: 0;
   width: 16.25rem;
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-md);
+  padding: 0.375rem;
   z-index: 50;
 }
 
 .mint-page-selector__menu-title {
-  padding: 0.25rem 0.5rem 0.375rem;
+  padding: 0.375rem 0.625rem 0.5rem;
   font-size: 0.75rem;
   font-weight: 500;
   color: var(--text-secondary);
 }
 
+.mint-page-selector__item {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  width: 100%;
+  padding: 0.5rem 0.625rem;
+  border: 0;
+  background: transparent;
+  border-radius: 0.4375rem;
+  color: var(--text-primary);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  font-family: inherit;
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background-color var(--mint-transition);
+}
+
+.mint-page-selector__item:hover:not(.mint-page-selector__item--disabled) {
+  background: var(--bg-hover);
+}
+
+.mint-page-selector__item--active {
+  background: var(--bg-tertiary);
+  font-weight: 600;
+}
+
+.mint-page-selector__item--disabled {
+  opacity: var(--mint-disabled-opacity);
+  cursor: not-allowed;
+}
+
 .mint-page-selector__item-icon {
-  width: 1.25rem;
-  height: 1.25rem;
-  border-radius: var(--radius-sm);
+  width: 1.375rem;
+  height: 1.375rem;
+  border-radius: 0.3125rem;
   background: var(--bg-tertiary);
-  color: var(--text-secondary-strong);
+  color: var(--text-secondary);
   display: grid;
   place-items: center;
   flex-shrink: 0;
 }
 
-.mint-page-selector__item-icon--metadata {
+.mint-page-selector__item--active .mint-page-selector__item-icon {
+  background: var(--color-primary-soft);
+  color: var(--color-primary);
+}
+
+.mint-page-selector__item-icon--metadata,
+.mint-page-selector__item--active .mint-page-selector__item-icon--metadata {
   background: transparent;
   color: inherit;
 }
 
 .mint-page-selector__item-icon svg {
-  width: 0.75rem;
-  height: 0.75rem;
+  width: 0.8125rem;
+  height: 0.8125rem;
 }
 
 .mint-page-selector__metadata-icon.mint-plugin-icon--sm {
-  width: 1.25rem;
-  height: 1.25rem;
-  border-radius: var(--radius-sm);
+  width: 1.375rem;
+  height: 1.375rem;
+  border-radius: 0.3125rem;
 }
 
 .mint-page-selector__item-label {