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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morscherlab/mint-sdk",
-  "version": "1.3.0-beta.4",
+  "version": "1.3.0-beta.5",
   "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,12 @@ 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 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 +1225,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/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,71 @@
 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', 'SampleSelector', 'DoseDesignWorkspaceView']
+    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,8 @@ 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. */
+const identityName = computed(() => (isIntegrated.value && !hasPageSelector.value ? plugin.value?.name : undefined))
 const hasPillNav = computed(() => !!props.pillNav?.length)
 const hasAccountMenu = computed(() => !!props.accountMenu?.length)
 const hasTitleGroup = computed(
@@ -304,9 +304,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/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[]> = {

package/src/components/WellPlate.legend.ts

@@ -1,8 +1,8 @@
 import type { WellLegendItem } from '../types'
 
 export const DEFAULT_WELL_LEGEND_ITEMS: WellLegendItem[] = [
-  { type: 'sample', label: 'Sample', color: 'var(--mint-sample-1)' },
-  { type: 'blank', label: 'Blank', color: 'var(--mint-sample-1)' },
-  { type: 'qc', label: 'QC', color: 'var(--mint-sample-1)' },
-  { type: 'iqc', label: 'IQC', color: 'var(--mint-sample-1)' },
+  { type: 'sample', label: 'Sample', color: '#10b981' },
+  { type: 'blank', label: 'Blank', color: '#f97316' },
+  { type: 'qc', label: 'QC', color: '#8b5cf6' },
+  { type: 'iqc', label: 'IQC', color: '#ec4899' },
 ]

package/src/components/WellPlate.rendering.ts

@@ -1,5 +1,4 @@
 import type { HeatmapConfig, Well, WellPlateSelectionMode, WellShape } from '../types'
-import { sampleTypeMarker } from '../utils/sampleTypeMarker'
 import {
   DEFAULT_SAMPLE_TYPE_COLORS,
   getHeatmapColor,
@@ -55,13 +54,15 @@ export function wellStyle(well: Well, state: WellStyleState): Record<string, str
       ?? state.sampleColors[well.sampleType] ?? DEFAULT_SAMPLE_TYPE_COLORS[well.sampleType])
   if (!groupColor) return {} // empty / filled wells are styled by well-plate.css
 
-  const { background, border } = sampleTypeMarker(well.sampleType!, groupColor).style
-  return { backgroundColor: background, border }
+  return sampleTint(groupColor)
 }
 
-/** In-well glyph of the 3a sample-type marker: `Q` for QC, `i` for iQC. */
-export function sampleTypeGlyph(well: Well): string | null {
-  return well.sampleType ? sampleTypeMarker(well.sampleType, '').glyph : null
+/** 15% fill and 40% outline of a sample color; color-mix accepts hex and `var()` tokens alike. */
+export function sampleTint(color: string): { backgroundColor: string; border: string } {
+  return {
+    backgroundColor: `color-mix(in srgb, ${color} 15%, transparent)`,
+    border: `1px solid color-mix(in srgb, ${color} 40%, transparent)`,
+  }
 }
 
 let sampleTypeIndicatorWarned = false
@@ -89,10 +90,10 @@ export function wellBadge(
   if (!showBadges || !well.metadata) return null
   const count = well.metadata.injectionCount as number | undefined
   if (count && count > 1) {
-    return { text: String(count), color: 'var(--text-primary)' }
+    return { text: String(count), color: '#6366f1' }
   }
   if (well.metadata.customMethod) {
-    return { text: '', color: 'var(--color-purple)' } // custom method: a dot, no glyph
+    return { text: '+', color: '#ec4899' }
   }
   return null
 }

package/src/components/WellPlate.vue

@@ -25,7 +25,7 @@ import {
 } from './WellPlate.geometry'
 import { useWellPlateInteraction } from './WellPlate.interaction'
 import {
-  sampleTypeGlyph,
+  sampleTint,
   warnSampleTypeIndicatorDeprecated,
   wellBadge,
   wellClasses,
@@ -34,7 +34,6 @@ import {
 } from './WellPlate.rendering'
 import { DEFAULT_WELL_LEGEND_ITEMS } from './WellPlate.legend'
 import DataStateInternal from './internal/DataStateInternal.vue'
-import { sampleTypeMarker } from '../utils/sampleTypeMarker'
 
 interface Props {
   modelValue?: string[]
@@ -476,27 +475,13 @@ const tableStyle = computed(() => ({
                 >
                   {{ well.id }}
                 </span>
-                <!-- Sample-type marker glyph (Q / i) -->
-                <span
-                  v-else-if="sampleTypeGlyph(well)"
-                  class="mint-well-plate__indicator"
-                >
-                  {{ sampleTypeGlyph(well) }}
-                </span>
-                <!-- The glyph moves to a corner when a label or well ID takes the centre -->
-                <span
-                  v-if="sampleTypeGlyph(well) && (getWellLabel(well) || props.showWellIds)"
-                  class="mint-well-plate__corner-glyph"
-                >
-                  {{ sampleTypeGlyph(well) }}
-                </span>
 
                 <!-- Badge (injection count or custom method) -->
                 <span
                   v-if="getWellBadge(well)"
-                  :class="['mint-well-plate__badge', { 'mint-well-plate__badge--dot': !getWellBadge(well)?.text }]"
+                  class="mint-well-plate__badge"
                   :style="{ backgroundColor: getWellBadge(well)?.color }"
-                  :title="getWellBadge(well)?.text ? `${getWellBadge(well)?.text}x injections` : 'Custom method'"
+                  :title="getWellBadge(well)?.text === '+' ? 'Custom method' : `${getWellBadge(well)?.text ?? ''}x injections`"
                 >
                   {{ getWellBadge(well)?.text }}
                 </span>
@@ -531,11 +516,9 @@ const tableStyle = computed(() => ({
             class="mint-well-plate__sample-legend-item"
           >
             <span
-              v-for="marker in [sampleTypeMarker(item.type, item.color)]"
-              :key="item.type"
               class="mint-well-plate__sample-legend-dot"
-              :style="marker.style"
-            >{{ marker.glyph }}</span>
+              :style="sampleTint(item.color)"
+            />
             <span class="mint-well-plate__sample-legend-text">{{ item.label }}</span>
           </div>
         </div>