@morscherlab/mint-sdk 1.3.0-beta.5 → 1.3.0-beta.6

package/package.json

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

@@ -1211,6 +1211,14 @@ describe('AppTopBar', () => {
         expect(wrapper.get('.mint-topbar__plugin-name').text()).toBe('LC-MS Analysis')
       })
 
+      it('should render the platform display name when integrated', () => {
+        mockPlatformCtx({ isIntegrated: true, plugin: { ...integratedPlugin, display_name: 'LC-MS Peak Review' } })
+
+        const wrapper = createWrapper()
+
+        expect(wrapper.get('.mint-topbar__plugin-name').text()).toBe('LC-MS Peak Review')
+      })
+
       it('should not render the plugin version when integrated', () => {
         mockPlatformCtx({ isIntegrated: true, plugin: integratedPlugin })
 

package/src/__tests__/components/FileUploader.test.ts

@@ -3,16 +3,13 @@ import { describe, expect, it } from 'vitest'
 import FileUploader from '../../components/FileUploader.vue'
 
 describe('FileUploader', () => {
-  it('should prompt to release with the dragged file count when files are dragged over', async () => {
-    const wrapper = mount(FileUploader, { props: { multiple: true } })
-    await wrapper.get('.mint-file-uploader__dropzone').trigger('dragover', {
-      dataTransfer: { items: { length: 3 } },
-    })
-    expect(wrapper.get('.mint-file-uploader__text').text()).toBe('Release to add 3 files')
+  it('should name the accepted formats in the prompt when accept is set', () => {
+    const wrapper = mount(FileUploader, { props: { accept: '.raw, .mzML' } })
+    expect(wrapper.get('.mint-file-uploader__text').text()).toBe('Drop RAW, MZML or click')
   })
 
-  it('should list accepted formats as written when accept and maxSize are set', () => {
-    const wrapper = mount(FileUploader, { props: { accept: '.raw, .mzML', maxSize: 2 * 1024 ** 3 } })
-    expect(wrapper.get('.mint-file-uploader__formats').text()).toBe('.raw .mzML · max 2.0 GB')
+  it('should prompt for any file when accept is not set', () => {
+    const wrapper = mount(FileUploader)
+    expect(wrapper.get('.mint-file-uploader__text').text()).toBe('Drop any file or click')
   })
 })

package/src/__tests__/templates/templatesDeprecation.test.ts

@@ -53,12 +53,19 @@ function undeprecatedValueExports(file: string): string[] {
 
 describe('templates deprecation', () => {
   it('should expose deprecated component tags to TypeScript consumers', () => {
-    const names = ['BioTemplateRenderer', 'SmartGroupModal', 'SampleSelector', 'DoseDesignWorkspaceView']
+    const names = ['BioTemplateRenderer', 'SmartGroupModal', 'DoseDesignWorkspaceView']
     const tagged = exportsOf(COMPONENTS_INDEX).filter(isDeprecated).map(symbol => symbol.getName())
 
     expect(names.filter(name => !tagged.includes(name))).toEqual([])
   })
 
+  it('should not tag components that stay public in MINT 1.4', () => {
+    const names = ['SampleSelector', 'SequenceProgressBar', 'InstrumentStateBadge']
+    const tagged = exportsOf(COMPONENTS_INDEX).filter(isDeprecated).map(symbol => symbol.getName())
+
+    expect(names.filter(name => tagged.includes(name))).toEqual([])
+  })
+
   it('should tag every template value export when the templates move out in MINT 1.4', () => {
     expect(undeprecatedValueExports(TEMPLATES_INDEX)).toEqual([])
   })

package/src/components/AppTopBar.vue

@@ -145,7 +145,10 @@ const hasPlatformPageSelector = computed(() =>
 )
 const hasPageSelector = computed(() => (props.pageSelector?.length ?? 0) > 1 || hasPlatformPageSelector.value)
 /** Integrated plugins show their name as a static identity in place of the title; the page selector replaces it. */
-const identityName = computed(() => (isIntegrated.value && !hasPageSelector.value ? plugin.value?.name : undefined))
+// Platforms before 1.3 send no display_name.
+const identityName = computed(() =>
+  isIntegrated.value && !hasPageSelector.value ? plugin.value?.display_name || plugin.value?.name : undefined,
+)
 const hasPillNav = computed(() => !!props.pillNav?.length)
 const hasAccountMenu = computed(() => !!props.accountMenu?.length)
 const hasTitleGroup = computed(

package/src/components/FileUploader.vue

@@ -31,7 +31,6 @@ const emit = defineEmits<{
 }>()
 
 const isDragOver = ref(false)
-const dragCount = ref(0)
 const inputRef = ref<HTMLInputElement>()
 const selectedFiles = ref<File[]>([])
 const folderName = ref<string | null>(null)
@@ -45,14 +44,9 @@ watch(() => [props.files, props.rootName] as const, ([files, rootName]) => {
 const isFolder = computed(() => props.mode === 'folder')
 const isMixed = computed(() => props.mode === 'file+folder')
 
-const promptText = computed(() => {
-  if (isDragOver.value) {
-    if (isFolder.value || dragCount.value === 0) return 'Release to add'
-    return `Release to add ${dragCount.value} file${dragCount.value === 1 ? '' : 's'}`
-  }
-  if (isMixed.value) return 'Drop files or a folder, or click to choose files'
-  if (isFolder.value) return 'Drop a folder, or click to choose'
-  return props.multiple ? 'Drop files, or click to choose' : 'Drop a file, or click to choose'
+const acceptLabel = computed(() => {
+  if (!props.accept) return isFolder.value ? 'a folder' : 'any file'
+  return props.accept.split(',').map(a => a.trim().replace('.', '').toUpperCase()).join(', ')
 })
 
 const maxSizeLabel = computed(() => {
@@ -69,12 +63,6 @@ const maxSizeLabel = computed(() => {
   return `${props.maxSize} bytes`
 })
 
-/** Accepted formats exactly as the caller wrote them, plus the size cap. */
-const formatsLabel = computed(() => [
-  props.accept?.split(',').map(a => a.trim()).filter(Boolean).join(' '),
-  maxSizeLabel.value && `max ${maxSizeLabel.value}`,
-].filter(Boolean).join(' · '))
-
 const fileTypeMap: Record<string, { color: string; label: string }> = {
   csv: { color: '#10B981', label: 'CSV' },
   tsv: { color: '#10B981', label: 'TSV' },
@@ -272,7 +260,6 @@ function handleDragOver(event: DragEvent) {
   event.preventDefault()
   if (!props.disabled) {
     isDragOver.value = true
-    dragCount.value = event.dataTransfer?.items?.length ?? 0
   }
 }
 
@@ -359,37 +346,34 @@ function formatFileSize(bytes: number): string {
       />
 
       <div class="mint-file-uploader__content">
-        <span class="mint-file-uploader__icon-tile">
-          <svg
-            v-if="isFolder"
-            class="mint-file-uploader__icon"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="1.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            viewBox="0 0 24 24"
-          >
-            <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" />
-          </svg>
-          <svg
-            v-else
-            class="mint-file-uploader__icon"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="1.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            viewBox="0 0 24 24"
-          >
-            <path d="M12 16V4M7 9l5-5 5 5M4 20h16" />
-          </svg>
-        </span>
+        <svg
+          v-if="isFolder"
+          class="mint-file-uploader__icon"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          viewBox="0 0 24 24"
+        >
+          <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" />
+        </svg>
+        <svg
+          v-else
+          class="mint-file-uploader__icon"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          viewBox="0 0 24 24"
+        >
+          <path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3" /><path d="m16 16-4-4-4 4" /><path d="M12 12v9" />
+        </svg>
 
-        <div class="mint-file-uploader__copy">
-          <p class="mint-file-uploader__text">{{ promptText }}</p>
-          <p v-if="formatsLabel" class="mint-file-uploader__formats">{{ formatsLabel }}</p>
-        </div>
+        <p class="mint-file-uploader__text">
+          {{ isMixed ? 'Drop files or a folder, or click to choose files' : `Drop ${acceptLabel} or click` }}
+        </p>
       </div>
     </div>
 

package/src/components/index.ts

@@ -86,8 +86,8 @@ export { /** @deprecated Removed in MINT 1.4. */ default as SampleLegend } from
 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. @deprecated Scheduled for removal in MINT 1.4; no SDK replacement. */
-export { /** @deprecated Removed in MINT 1.4. */ default as SampleSelector } from './SampleSelector.vue'
+/** 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. */
@@ -114,7 +114,7 @@ export { default as ProtocolStepEditor } from './ProtocolStepEditor.vue'
 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. @deprecated Scheduled for removal in MINT 1.4; instrument UI moves to the mld-ms plugins. */
+/** 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'

package/src/styles/components/file-uploader.css

@@ -14,113 +14,80 @@
 
 .mint-file-uploader__dropzone {
   position: relative;
-  border: 1px dashed var(--_control-border-strong);
+  border: 2px dashed var(--border-color);
   border-radius: var(--radius-lg);
   cursor: pointer;
   background: var(--bg-secondary);
   transition: border-color 0.15s ease, background-color 0.15s ease;
 }
 
-/* 2g: hover only changes the surface; the border change is reserved for dragover. */
 .mint-file-uploader__dropzone:hover {
-  background: var(--bg-hover);
+  border-color: var(--color-primary);
+  background: color-mix(in srgb, var(--color-primary) 3%, var(--bg-secondary));
 }
 
 .mint-file-uploader__dropzone:focus-visible {
-  outline: none;
-  box-shadow: var(--focus-ring-offset);
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
 }
 
-.mint-file-uploader__dropzone--dragover,
-.mint-file-uploader__dropzone--dragover:hover {
-  border: 1.5px solid var(--color-primary);
-  background: var(--color-primary-soft);
+.mint-file-uploader__dropzone--dragover {
+  border-color: var(--color-primary);
+  background: color-mix(in srgb, var(--color-primary) 5%, var(--bg-secondary));
 }
 
-.mint-file-uploader__dropzone--disabled,
-.mint-file-uploader__dropzone--disabled:hover {
-  background: var(--bg-tertiary);
+.mint-file-uploader__dropzone--disabled {
   opacity: var(--mint-disabled-opacity);
   cursor: not-allowed;
 }
 
 .mint-file-uploader__dropzone--sm {
-  padding: 0.75rem;
+  padding: 1.25rem;
 }
 
 .mint-file-uploader__dropzone--md {
-  padding: 1.125rem;
+  padding: 1.5rem;
 }
 
 .mint-file-uploader__dropzone--lg {
-  padding: 1.5rem;
+  padding: 2rem;
 }
 
 /* ==========================================================================
-   Content area — compact row: icon tile + prompt + accepted formats
+   Content area
    ========================================================================== */
 
 .mint-file-uploader__content {
   display: flex;
+  flex-direction: column;
   align-items: center;
-  gap: 0.75rem;
+  text-align: center;
 }
 
 .mint-file-uploader__input {
   display: none;
 }
 
-.mint-file-uploader__icon-tile {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
+.mint-file-uploader__icon {
   width: 2rem;
   height: 2rem;
-  border-radius: var(--radius-md);
-  background: var(--bg-tertiary);
-  color: var(--text-secondary);
-  transition: background-color 0.15s ease, color 0.15s ease;
-}
-
-.mint-file-uploader__dropzone--dragover .mint-file-uploader__icon-tile {
-  background: var(--color-primary);
-  color: white;
-}
-
-.mint-file-uploader__icon {
-  width: 1rem;
-  height: 1rem;
-  stroke-width: 1.8;
+  color: var(--text-muted);
+  margin-bottom: 0.5rem;
 }
 
-.mint-file-uploader__copy {
-  display: flex;
-  flex-direction: column;
-  gap: 0.125rem;
-  min-width: 0;
+.mint-file-uploader__dropzone:hover .mint-file-uploader__icon,
+.mint-file-uploader__dropzone--dragover .mint-file-uploader__icon {
+  color: var(--color-primary);
 }
 
 .mint-file-uploader__text {
-  color: var(--text-primary);
+  color: var(--text-secondary);
   font-size: 0.8125rem;
   font-weight: 500;
   margin: 0;
   padding: 0;
 }
 
-.mint-file-uploader__dropzone--dragover .mint-file-uploader__text {
-  color: var(--_ink-primary);
-}
-
-.mint-file-uploader__formats {
-  color: var(--text-secondary);
-  font-family: var(--font-mono);
-  font-size: 0.6875rem;
-  margin: 0;
-  padding: 0;
-}
-
 /* ==========================================================================
    Actions slot
    ========================================================================== */

package/src/types/platform.ts

@@ -4,6 +4,8 @@ import type { RoleInfo } from '../permissions'
 export interface PluginInfo {
   id: string
   name: string
+  /** Name to show in the UI; the platform falls back to the plugin ID. Absent before MINT 1.3. */
+  display_name?: string
   version: string
   plugin_type?: string
   description?: string