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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morscherlab/mint-sdk",
-  "version": "1.3.0-beta.4",
+  "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",
@@ -67,16 +67,12 @@
     "story:preview": "histoire preview"
   },
   "peerDependencies": {
-    "@simplewebauthn/browser": "^14.0.0",
     "pinia": "^4.0.3",
     "tailwindcss": "^4.3.3",
     "vue": "^3.5.43",
     "vue-router": "^5.3.1"
   },
   "peerDependenciesMeta": {
-    "@simplewebauthn/browser": {
-      "optional": true
-    },
     "vue-router": {
       "optional": true
     }
@@ -89,7 +85,6 @@
   },
   "devDependencies": {
     "@histoire/plugin-vue": "1.0.0-beta.1",
-    "@simplewebauthn/browser": "14.0.0",
     "@types/node": "22.20.4",
     "@vitejs/plugin-vue": "6.0.9",
     "@vue/language-core": "3.3.11",

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

@@ -1211,12 +1211,20 @@ describe('AppTopBar', () => {
         expect(wrapper.get('.mint-topbar__plugin-name').text()).toBe('LC-MS Analysis')
       })
 
-      it('should render the plugin version in mono after the name when integrated', () => {
+      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 })
 
         const wrapper = createWrapper()
 
-        expect(wrapper.get('.mint-topbar__plugin-version').text()).toBe('v2.4.0')
+        expect(wrapper.text()).not.toContain('v2.4.0')
       })
 
       it('should not render the plugin identity text when standalone', () => {
@@ -1225,21 +1233,29 @@ describe('AppTopBar', () => {
         expect(wrapper.find('.mint-topbar__plugin-name').exists()).toBe(false)
       })
 
-      it('should render a divider between the identity and the page selector', () => {
+      it('should hide the plugin name when a page selector is shown', () => {
         mockPlatformCtx({ isIntegrated: true, plugin: integratedPlugin })
 
         const wrapper = createWrapper({ pageSelector: pages, currentPageSelectorId: 'peaks' })
 
-        expect(wrapper.get('.mint-topbar__divider').element.nextElementSibling?.classList)
-          .toContain('mint-page-selector')
+        expect(wrapper.find('.mint-topbar__plugin-name').exists()).toBe(false)
       })
 
-      it('should not render the divider without a page selector', () => {
-        mockPlatformCtx({ isIntegrated: true, plugin: integratedPlugin })
+      it('should hide the plugin name when the plugin declares several nav items', () => {
+        mockPlatformCtx({
+          isIntegrated: true,
+          plugin: {
+            ...integratedPlugin,
+            nav_items: [
+              { id: 'peaks', path: '/', label: 'Peaks' },
+              { id: 'report', path: '/report', label: 'Report' },
+            ],
+          },
+        })
 
         const wrapper = createWrapper()
 
-        expect(wrapper.find('.mint-topbar__divider').exists()).toBe(false)
+        expect(wrapper.find('.mint-topbar__plugin-name').exists()).toBe(false)
       })
 
       it('should not repeat the title next to the integrated identity', () => {

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

@@ -20,4 +20,19 @@ describe('EmptyState', () => {
 
     expect(wrapper.emitted('action')).toHaveLength(1)
   })
+
+  it('should wrap default-slot content in the spaced content block', () => {
+    const wrapper = mount(EmptyState, {
+      props: { title: 'No instruments yet', description: 'Add the lab systems.' },
+      slots: { default: '<button class="slot-action">New instrument</button>' },
+    })
+
+    expect(wrapper.find('.mint-empty-state__content .slot-action').exists()).toBe(true)
+  })
+
+  it('should not render the content block without default-slot content', () => {
+    const wrapper = mount(EmptyState, { props: { title: 'Empty' } })
+
+    expect(wrapper.find('.mint-empty-state__content').exists()).toBe(false)
+  })
 })

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__/components/WellPlate.decoration.test.ts

@@ -26,7 +26,7 @@ describe('WellPlate per-well decoration', () => {
       .toEqual(['2px', 'solid', 'var(--mint-warning)'])
   })
 
-  it('should render the QC marker glyph when a QC well has no label or id', () => {
+  it('should render no glyph when a QC well has no label or id', () => {
     const wrapper = mount(WellPlate, {
       props: {
         format: 6,
@@ -34,37 +34,13 @@ describe('WellPlate per-well decoration', () => {
       },
     })
 
-    expect(wrapper.findAll('.mint-well-plate__well')[0].text()).toBe('Q')
+    expect(wrapper.findAll('.mint-well-plate__well')[0].text()).toBe('')
   })
 
-  it('should keep the iQC marker glyph when well IDs are shown', () => {
-    const wrapper = mount(WellPlate, {
-      props: {
-        format: 6,
-        showWellIds: true,
-        wells: { A1: { id: 'A1', row: 0, col: 0, state: 'filled', sampleType: 'iqc' } },
-      },
-    })
-
-    expect(wrapper.findAll('.mint-well-plate__well')[0].find('.mint-well-plate__corner-glyph').text()).toBe('i')
-  })
-
-  it('should keep the iQC marker glyph when a custom label is shown', () => {
-    const wrapper = mount(WellPlate, {
-      props: {
-        format: 6,
-        showWellLabels: true,
-        wells: { A1: { id: 'A1', row: 0, col: 0, state: 'filled', sampleType: 'iqc', metadata: { label: 'Std 1' } } },
-      },
-    })
-
-    expect(wrapper.findAll('.mint-well-plate__well')[0].find('.mint-well-plate__corner-glyph').text()).toBe('i')
-  })
-
-  it('should draw legend swatches with the sample-type marker when the legend is shown', () => {
+  it('should draw plain legend swatches when the legend is shown', () => {
     const wrapper = mount(WellPlate, { props: { format: 6, showLegend: true } })
 
     const dots = wrapper.findAll('.mint-well-plate__sample-legend-dot')
-    expect(dots.map(dot => dot.text())).toEqual(['', '', 'Q', 'i'])
+    expect(dots.map(dot => dot.text())).toEqual(['', '', '', ''])
   })
 })

package/src/__tests__/components/WellPlate.rendering.test.ts

@@ -1,6 +1,5 @@
 import { describe, expect, it } from 'vitest'
 import {
-  sampleTypeGlyph,
   wellBadge,
   wellClasses,
   wellLabel,
@@ -70,45 +69,45 @@ describe('WellPlate rendering helpers', () => {
       heatmap: { enabled: false },
       sampleColors: { treated: '#123456' },
     })).toEqual({
-      backgroundColor: 'color-mix(in srgb, #123456 28%, var(--bg-card))',
-      border: '1px solid #123456',
+      backgroundColor: 'color-mix(in srgb, #123456 15%, transparent)',
+      border: '1px solid color-mix(in srgb, #123456 40%, transparent)',
     })
 
     expect(wellStyle(well({ sampleType: 'qc' }), {
       heatmap: { enabled: false },
       sampleColors: {},
     })).toEqual({
-      backgroundColor: 'var(--bg-card)',
-      border: '1.5px solid var(--text-secondary-strong)',
+      backgroundColor: 'color-mix(in srgb, #8b5cf6 15%, transparent)',
+      border: '1px solid color-mix(in srgb, #8b5cf6 40%, transparent)',
     })
   })
 
-  it('should fill a sample well with its group token when no custom color is set', () => {
+  it('should tint a sample well green when no custom color is set', () => {
     expect(wellStyle(well({ sampleType: 'sample' }), {
       heatmap: { enabled: false },
       sampleColors: {},
-    }).border).toBe('1px solid var(--mint-sample-1)')
+    }).border).toBe('1px solid color-mix(in srgb, #10b981 40%, transparent)')
   })
 
-  it('should color a well by its group before its sample type', () => {
-    expect(wellStyle(well({ sampleType: 'iqc', group: 'trt' }), {
+  it('should tint a blank well orange when no custom color is set', () => {
+    expect(wellStyle(well({ sampleType: 'blank' }), {
       heatmap: { enabled: false },
-      sampleColors: { trt: '#123456' },
-    }).border).toBe('1px solid #123456')
+      sampleColors: {},
+    }).border).toBe('1px solid color-mix(in srgb, #f97316 40%, transparent)')
   })
 
-  it('should keep a grouped blank well neutral', () => {
-    expect(wellStyle(well({ sampleType: 'blank', group: 'trt' }), {
+  it('should color a well by its group before its sample type', () => {
+    expect(wellStyle(well({ sampleType: 'iqc', group: 'trt' }), {
       heatmap: { enabled: false },
       sampleColors: { trt: '#123456' },
-    }).border).toBe('1.5px dashed var(--_control-border-strong)')
+    }).border).toBe('1px solid color-mix(in srgb, #123456 40%, transparent)')
   })
 
-  it('should keep QC neutral when a custom QC color is set', () => {
-    expect(wellStyle(well({ sampleType: 'qc' }), {
+  it('should tint a well with a group color token', () => {
+    expect(wellStyle(well({ sampleType: 'sample', group: 'trt' }), {
       heatmap: { enabled: false },
-      sampleColors: { qc: '#8b5cf6' },
-    }).border).toBe('1.5px solid var(--text-secondary-strong)')
+      sampleColors: { trt: 'var(--mint-sample-3)' },
+    }).backgroundColor).toBe('color-mix(in srgb, var(--mint-sample-3) 15%, transparent)')
   })
 
   it('should leave empty wells to the stylesheet when the well has no sample type', () => {
@@ -125,29 +124,17 @@ describe('WellPlate rendering helpers', () => {
     })).toEqual({})
   })
 
-  it('should return the Q glyph when the well is QC', () => {
-    expect(sampleTypeGlyph(well({ sampleType: 'qc' }))).toBe('Q')
-  })
-
-  it('should return the i glyph when the well is iQC', () => {
-    expect(sampleTypeGlyph(well({ sampleType: 'iqc' }))).toBe('i')
-  })
-
-  it('should return no glyph when the well is a sample', () => {
-    expect(sampleTypeGlyph(well({ sampleType: 'sample' }))).toBeNull()
-  })
-
   it('formats labels and badges for optional overlays', () => {
     expect(wellLabel(well({ metadata: { label: 'Dose A' } }), true)).toBe('Dose A')
     expect(wellLabel(well({ metadata: { label: 'Dose A' } }), false)).toBeUndefined()
 
     expect(wellBadge(well({ metadata: { injectionCount: 3 } }), true)).toEqual({
       text: '3',
-      color: 'var(--text-primary)',
+      color: '#6366f1',
     })
     expect(wellBadge(well({ metadata: { customMethod: 'LCMS-2' } }), true)).toEqual({
-      text: '',
-      color: 'var(--color-purple)',
+      text: '+',
+      color: '#ec4899',
     })
     expect(wellBadge(well({ metadata: { injectionCount: 1 } }), true)).toBeNull()
   })

package/src/__tests__/components/WellPlate.sampleTypeIndicator.test.ts

@@ -4,9 +4,9 @@ import { afterEach, describe, expect, it, vi } from 'vitest'
 import WellPlate from '../../components/WellPlate.vue'
 import type { Well } from '../../types'
 
-// `showSampleTypeIndicator` is deprecated (3a): shape encodes the type, only
-// QC `Q` and iQC `i` carry glyphs. The warning fires once per module, so the
-// order of the first two tests matters.
+// `showSampleTypeIndicator` is deprecated (3a): wells carry no letters, color
+// encodes the type. The warning fires once per module, so the order of the
+// first two tests matters.
 
 function mountPlate(sampleType: string, showSampleTypeIndicator: boolean) {
   const wells: Record<string, Partial<Well>> = {
@@ -48,11 +48,11 @@ describe('WellPlate showSampleTypeIndicator (deprecated)', () => {
     expect(firstWellText('blank')).toBe('')
   })
 
-  it('should keep the QC marker glyph when showSampleTypeIndicator is on', () => {
-    expect(firstWellText('qc')).toBe('Q')
+  it('should render no letter for a QC well when showSampleTypeIndicator is on', () => {
+    expect(firstWellText('qc')).toBe('')
   })
 
-  it('should keep the iQC marker glyph when showSampleTypeIndicator is on', () => {
-    expect(firstWellText('iqc')).toBe('i')
+  it('should render no letter for an iQC well when showSampleTypeIndicator is on', () => {
+    expect(firstWellText('iqc')).toBe('')
   })
 })

package/src/__tests__/docs/frontendDocsCatalog.test.ts

@@ -60,7 +60,7 @@ function parseComponentExports(): string[] {
   const componentsDir = join(SDK_ROOT, 'src', 'components')
   const content = readFileSync(join(componentsDir, 'index.ts'), 'utf8')
   return [...content.matchAll(
-    /export\s+\{\s*default\s+as\s+(\w+)(?:\s*,\s*[^}]*)?\s*\}\s+from\s+['"]\.\/([\w-]+)\.vue['"]/g,
+    /export\s+\{\s*(?:\/\*\*.*?\*\/\s*)?default\s+as\s+(\w+)(?:\s*,\s*[^}]*)?\s*\}\s+from\s+['"]\.\/([\w-]+)\.vue['"]/g,
   )]
     .filter((match) => existsSync(join(componentsDir, `${match[2]}.vue`)))
     .map(match => match[1])
@@ -121,7 +121,7 @@ function parseDeprecatedComponentExports(): Record<string, string> {
     }
 
     const exportMatch = line.match(
-      /export\s+\{\s*default\s+as\s+(\w+)(?:\s*,\s*[^}]*)?\s*\}\s+from\s+['"]\.\/([\w-]+)\.vue['"]/,
+      /export\s+\{\s*(?:\/\*\*.*?\*\/\s*)?default\s+as\s+(\w+)(?:\s*,\s*[^}]*)?\s*\}\s+from\s+['"]\.\/([\w-]+)\.vue['"]/,
     )
     if (!exportMatch) continue
 

package/src/__tests__/styles/controlRefreshRules.test.ts

@@ -184,12 +184,6 @@ describe('SDK control refresh style rules', () => {
     expect(rule).toMatch(/flex-wrap:\s*wrap/)
   })
 
-  it('should keep the badge text off white when scanning well-plate.css (7a)', () => {
-    const css = stripComments(readFileSync(component('well-plate.css'), 'utf-8'))
-    const rule = /\.mint-well-plate__badge\s*\{([^}]*)\}/.exec(css)?.[1] ?? ''
-    expect(rule).toMatch(/color:\s*var\(--bg-card\)/)
-  })
-
   it('should pad resource picker rows so two text lines fit the 44px row when scanning resource-picker-list.css (8b)', () => {
     // 16.25px title + 1px gap + 15px meta + 10px padding + 1px border = 43.25px, under min-height.
     const css = stripComments(readFileSync(component('resource-picker-list.css'), 'utf-8'))

package/src/__tests__/styles/menusShellRefresh.test.ts

@@ -25,8 +25,14 @@ describe('menus and app shell styles', () => {
     expect(css('app-top-bar.css')).toMatch(/\.mint-topbar\s*\{[^}]*padding:\s*0\.625rem 0\.75rem;/)
   })
 
-  it('should shrink the plugin tile to 20px beside the static plugin identity (5a)', () => {
-    expect(css('app-top-bar.css')).toMatch(/\.mint-topbar__brand:has\(\+ \.mint-topbar__plugin-identity\) \.mint-plugin-icon--topbar\s*\{[^}]*width:\s*1\.25rem;/)
+  // Shrinking the tile beside the identity also shrank structured icons inside their solid chip, drawing a ring.
+  it('should keep the 32px plugin tile beside the static plugin identity (5a)', () => {
+    expect(css('app-top-bar.css')).not.toMatch(/:has\(\+ \.mint-topbar__plugin-identity\)/)
+  })
+
+  // A slotted 36px logo shrank to 32px wide but kept its height, drawing a 32x36 tile.
+  it('should fit slotted identity content inside the 32px tile (5a)', () => {
+    expect(css('app-top-bar.css')).toMatch(/\.mint-topbar__identity > \*\s*\{[^}]*max-width:\s*100%;[^}]*max-height:\s*100%;/)
   })
 
   // 15px x 1.15 + 12px x 1.2 = 31.7px, so the title group fits the 32px control row.

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

@@ -1,31 +1,78 @@
 import { dirname, resolve } from 'node:path'
 import { fileURLToPath } from 'node:url'
-import { describe, expect, it } from 'vitest'
+import { beforeAll, describe, expect, it } from 'vitest'
 import ts from 'typescript'
 
 const TEMPLATES_INDEX = resolve(dirname(fileURLToPath(import.meta.url)), '../../templates/index.ts')
+const COMPONENTS_INDEX = resolve(dirname(fileURLToPath(import.meta.url)), '../../components/index.ts')
+const COMPOSABLES_DIR = resolve(dirname(fileURLToPath(import.meta.url)), '../../composables')
 
-// TypeScript ignores @deprecated on `export { ... } from` blocks; an import
-// site only shows the deprecation when the original declaration carries it.
-function undeprecatedTemplateValueExports(): string[] {
-  const program = ts.createProgram([TEMPLATES_INDEX], {
+// Composables removed in MINT 1.4 with the templates and sample grouping.
+const REMOVED_COMPOSABLE_FILES = [
+  'useBioTemplateComponents.ts',
+  'useBioTemplateControls.ts',
+  'useBioTemplatePackWorkspace.ts',
+  'useBioTemplatePresetWorkspace.ts',
+  'useBioTemplateWorkspace.ts',
+  'useTemplateCollection.ts',
+  'useExperimentSave.ts',
+  'useGroupAssignment.ts',
+].map(file => resolve(COMPOSABLES_DIR, file))
+
+// One program for every file: building one per file took longer than the test timeout on CI.
+let program: ts.Program
+let checker: ts.TypeChecker
+
+beforeAll(() => {
+  program = ts.createProgram([TEMPLATES_INDEX, COMPONENTS_INDEX, ...REMOVED_COMPOSABLE_FILES], {
     target: ts.ScriptTarget.ES2022,
     module: ts.ModuleKind.ESNext,
     moduleResolution: ts.ModuleResolutionKind.Bundler,
     noEmit: true,
   })
-  const checker = program.getTypeChecker()
-  const moduleSymbol = checker.getSymbolAtLocation(program.getSourceFile(TEMPLATES_INDEX)!)!
-  return checker
-    .getExportsOfModule(moduleSymbol)
+  checker = program.getTypeChecker()
+}, 60_000)
+
+function exportsOf(file: string): ts.Symbol[] {
+  return checker.getExportsOfModule(checker.getSymbolAtLocation(program.getSourceFile(file)!)!)
+}
+
+function isDeprecated(symbol: ts.Symbol): boolean {
+  return symbol.getJsDocTags(checker).some(tag => tag.name === 'deprecated')
+}
+
+// TypeScript ignores @deprecated on `export { ... } from` blocks; an import
+// site only shows the deprecation when the original declaration carries it.
+function undeprecatedValueExports(file: string): string[] {
+  return exportsOf(file)
     .map(symbol => (symbol.flags & ts.SymbolFlags.Alias ? checker.getAliasedSymbol(symbol) : symbol))
     .filter(symbol => symbol.flags & ts.SymbolFlags.Value)
-    .filter(symbol => !symbol.getJsDocTags(checker).some(tag => tag.name === 'deprecated'))
+    .filter(symbol => !isDeprecated(symbol))
     .map(symbol => symbol.getName())
 }
 
 describe('templates deprecation', () => {
+  it('should expose deprecated component tags to TypeScript consumers', () => {
+    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(undeprecatedTemplateValueExports()).toEqual([])
+    expect(undeprecatedValueExports(TEMPLATES_INDEX)).toEqual([])
+  })
+
+  it('should tag every value export of the template and grouping composables when they are removed in MINT 1.4', () => {
+    const untagged = REMOVED_COMPOSABLE_FILES.flatMap(undeprecatedValueExports)
+
+    expect(untagged).toEqual([])
   })
 })

package/src/components/AppTopBar.vue

@@ -144,8 +144,11 @@ const hasPlatformPageSelector = computed(() =>
   props.pageSelector === undefined && (plugin.value?.nav_items?.length ?? 0) > 1,
 )
 const hasPageSelector = computed(() => (props.pageSelector?.length ?? 0) > 1 || hasPlatformPageSelector.value)
-/** Integrated plugins show their name + version as a static identity; it stands in for the title. */
-const identityName = computed(() => (isIntegrated.value ? plugin.value?.name : undefined))
+/** Integrated plugins show their name as a static identity in place of the title; the page selector replaces it. */
+// 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(
@@ -304,9 +307,7 @@ const effectiveCurrentPageSelectorId = computed(() =>
       <!-- Left: static plugin identity (not a control) -->
       <span v-if="identityName" class="mint-topbar__plugin-identity">
         <span class="mint-topbar__plugin-name">{{ identityName }}</span>
-        <span v-if="plugin?.version" class="mint-topbar__plugin-version">v{{ plugin.version }}</span>
       </span>
-      <span v-if="identityName && hasPageSelector" class="mint-topbar__divider" aria-hidden="true" />
 
       <!-- Left: page selector -->
       <AppTopBarPageSelectorInternal

package/src/components/EmptyState.vue

@@ -56,7 +56,9 @@ const defaultIconPaths = [
     <div class="mint-empty-state__body">
       <h3 v-if="title" class="mint-empty-state__title">{{ title }}</h3>
       <p v-if="description" class="mint-empty-state__description">{{ description }}</p>
-      <slot />
+      <div v-if="$slots.default" class="mint-empty-state__content">
+        <slot />
+      </div>
     </div>
     <div v-if="actionLabel" class="mint-empty-state__action">
       <BaseButton variant="secondary" @click="emit('action')">

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/WellPlate.colors.ts

@@ -1,16 +1,12 @@
 import type { HeatmapConfig } from '../types'
 
-/**
- * Group color for the built-in sample types when `sampleColors` has no entry.
- * Color encodes the group and shape encodes the type (3a): blank and QC render
- * neutral markers and ignore it; iQC takes it like a sample.
- */
+/** Color for the built-in sample types when `sampleColors` has no entry. */
 export const DEFAULT_SAMPLE_TYPE_COLORS: Record<string, string> = {
-  sample: 'var(--mint-sample-1)',
-  control: 'var(--mint-sample-2)',
-  blank: 'var(--mint-sample-1)',
-  qc: 'var(--mint-sample-1)',
-  iqc: 'var(--mint-sample-1)',
+  sample: '#10b981',
+  control: '#3b82f6',
+  blank: '#f97316',
+  qc: '#8b5cf6',
+  iqc: '#ec4899',
 }
 
 export const HEATMAP_COLORS: Record<string, string[]> = {