@morscherlab/mint-sdk 1.2.10 → 1.3.0-beta.10

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

@@ -0,0 +1,115 @@
+import { readFileSync } from 'node:fs'
+import { dirname, join, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { describe, expect, it } from 'vitest'
+
+// SDK control refresh, phase 1 base controls (rounds 1 and 10). One rule per
+// test; a failure lists the offending `file:line`.
+
+const here = dirname(fileURLToPath(import.meta.url))
+const componentsDir = resolve(here, '../../styles/components')
+
+/** Lines of a component sheet with block comments blanked (line numbers kept). */
+function lines(file: string): string[] {
+  const text = readFileSync(join(componentsDir, file), 'utf-8')
+  return text.replace(/\/\*[\s\S]*?\*\//g, (c) => c.replace(/[^\n]/g, ' ')).split('\n')
+}
+
+function offenders(files: string[], test: (line: string) => boolean): string[] {
+  return files.flatMap((file) =>
+    lines(file).flatMap((line, i) => (test(line) ? [`${file}:${i + 1}: ${line.trim()}`] : [])),
+  )
+}
+
+const css = (file: string) => lines(file).join('\n')
+
+describe('SDK control refresh base-control rules', () => {
+  it('should find no transparent-border focus when scanning select.css (1a)', () => {
+    expect(offenders(['select.css'], (l) => /border-color:\s*transparent/.test(l))).toEqual([])
+  })
+
+  it('should find no soft or plain focus ring when scanning pressable controls (1a)', () => {
+    const pressables = ['checkbox.css', 'radio-group.css', 'toggle.css', 'icon-button.css', 'multi-select.css']
+    expect(offenders(pressables, (l) => /var\(--focus-ring(-soft)?\)/.test(l))).toEqual([])
+  })
+
+  it.each(['input.css', 'select.css', 'textarea.css'])(
+    'should use the shared field hover border when scanning %s (1e)',
+    (file) => {
+      expect(css(file)).toContain('border-color: var(--_field-border-hover)')
+    },
+  )
+
+  it('should disable select without opacity when scanning select.css (1e)', () => {
+    expect(css('select.css')).not.toContain('--mint-disabled-opacity')
+  })
+
+  it.each(['checkbox.css', 'radio-group.css'])(
+    'should draw the unchecked control with the strong border when scanning %s (1b)',
+    (file) => {
+      expect(css(file)).toContain('border: 1.5px solid var(--_control-border-strong)')
+    },
+  )
+
+  it('should paint the off track with the strong border color when scanning toggle.css (1b)', () => {
+    expect(css('toggle.css')).toMatch(/\.mint-toggle__track--off \{\s*background-color: var\(--_control-border-strong\);/)
+  })
+
+  it('should move the toggle knob with transform only when scanning toggle.css (1b)', () => {
+    expect(offenders(['toggle.css'], (l) => /__knob--on-|transition:\s*left/.test(l))).toEqual([])
+  })
+
+  it('should find no radio input-wrapper size modifiers when scanning radio-group.css (1b)', () => {
+    expect(offenders(['radio-group.css'], (l) => /__input-wrapper--|margin-left:\s*-/.test(l))).toEqual([])
+  })
+
+  it('should find no translateY lift when scanning icon-button.css (1d)', () => {
+    expect(offenders(['icon-button.css'], (l) => /translateY/.test(l))).toEqual([])
+  })
+
+  it('should ring the slider thumb when the native input has keyboard focus (1f)', () => {
+    expect(css('slider.css')).toMatch(
+      /\.mint-slider__input:focus-visible ~ \.mint-slider__thumb \{[^}]*box-shadow: var\(--focus-ring-offset\);/,
+    )
+  })
+
+  it('should find no semantic title color when scanning alert-box.css (1h)', () => {
+    expect(offenders(['alert-box.css'], (l) => /\.mint-alert--\w+ \.mint-alert__title/.test(l))).toEqual([])
+  })
+
+  it('should find no pill radius on the chip when scanning multi-select.css (1i)', () => {
+    expect(offenders(['multi-select.css'], (l) => /9999px|999px/.test(l))).toEqual([])
+  })
+
+  it('should find no literal radius or hand-written shadow when scanning modal.css (1i drift)', () => {
+    expect(offenders(['modal.css'], (l) => /0\.875rem 0|radius:\s*0\.875rem|rgba\(15, 23, 42, 0\.(4|2|08)\)/.test(l))).toEqual([])
+  })
+
+  it('should find no Fira font literal when scanning drift files (1i drift, 10c)', () => {
+    const files = ['modal.css', 'tooltip.css', 'slider.css', 'experiment-code-badge.css']
+    expect(offenders(files, (l) => /'Fira/.test(l))).toEqual([])
+  })
+
+  it('should find no literal var() fallback when scanning drift files (1i drift, 10c)', () => {
+    const files = ['checkbox.css', 'toggle.css', 'slider.css', 'app-layout.css', 'app-container.css', 'mobile-support-gate.css']
+    expect(offenders(files, (l) => /var\(--[\w-]+,\s*[^v\s]/.test(l))).toEqual([])
+  })
+
+  it('should keep the collapsible-card header actions still on hover (10a)', () => {
+    expect(offenders(['collapsible-card.css'], (l) => /translateY/.test(l))).toEqual([])
+  })
+
+  it('should keep the resource-card hover shadow at --shadow-sm (10a)', () => {
+    expect(css('resource-card.css')).not.toMatch(/\.mint-resource-card:hover \{[^}]*box-shadow/)
+  })
+
+  it('should replace the spinner rotation under reduced motion (10c)', () => {
+    expect(css('loading-spinner.css')).toMatch(
+      /@media \(prefers-reduced-motion: reduce\) \{\s*\.mint-spinner__svg \{\s*animation: mint-spinner-pulse [^;]*!important;/,
+    )
+  })
+
+  it('should size the card segmented control border-box so full-width fits its container (3b)', () => {
+    expect(css('segmented-control.css')).toMatch(/\.mint-segmented-control--card \{[^}]*box-sizing: border-box;/)
+  })
+})

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

@@ -0,0 +1,218 @@
+import { readdirSync, readFileSync, statSync } from 'node:fs'
+import { dirname, join, relative, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { describe, expect, it } from 'vitest'
+
+// SDK control refresh (decisions/2026-09-25-sdk-control-refresh) style rules.
+// Each failure message lists every offending `file:line`, so it doubles as the
+// migration work-list.
+
+const here = dirname(fileURLToPath(import.meta.url))
+const pkgRoot = resolve(here, '../../..')
+const srcRoot = join(pkgRoot, 'src')
+const stylesDir = join(srcRoot, 'styles')
+const componentsDir = join(stylesDir, 'components')
+
+const IGNORED_DIRS = new Set(['__tests__', 'generated-ui', 'node_modules'])
+
+function walk(dir: string, exts: string[], out: string[] = []): string[] {
+  for (const entry of readdirSync(dir)) {
+    const full = join(dir, entry)
+    if (statSync(full).isDirectory()) {
+      if (!IGNORED_DIRS.has(entry)) walk(full, exts, out)
+    } else if (exts.some((ext) => entry.endsWith(ext))) {
+      out.push(full)
+    }
+  }
+  return out
+}
+
+/** Block comments blanked out, newlines kept so line numbers stay true. */
+function stripComments(text: string): string {
+  return text.replace(/\/\*[\s\S]*?\*\//g, (c) => c.replace(/[^\n]/g, ' '))
+}
+
+function offenders(files: string[], test: (line: string) => boolean): string[] {
+  const hits: string[] = []
+  for (const file of files) {
+    const lines = stripComments(readFileSync(file, 'utf-8')).split('\n')
+    lines.forEach((line, i) => {
+      if (test(line)) hits.push(`${relative(pkgRoot, file)}:${i + 1}: ${line.trim()}`)
+    })
+  }
+  return hits
+}
+
+function expectNone(hits: string[]): void {
+  expect(hits, `${hits.length} offenders\n${hits.join('\n')}`).toEqual([])
+}
+
+const componentCss = walk(componentsDir, ['.css'])
+const allStyleCss = walk(stylesDir, ['.css'])
+const allSrcCssAndVue = walk(srcRoot, ['.css', '.vue'])
+const component = (name: string) => join(componentsDir, name)
+
+// 8d: UI text >= 11px (0.6875rem). In-graphic well labels are exempt.
+const MIN_FONT_PX = 11
+const FONT_SIZE_WHITELIST = new Set(['well-plate.css'])
+
+function hasTooSmallFont(line: string): boolean {
+  // Several declarations can share a line (`font: inherit; font-size: …`).
+  for (const decl of line.matchAll(/\bfont(?:-size)?\s*:\s*([^;]*)/g)) {
+    // The first length in `font-size:` or the `font:` shorthand is the size.
+    const size = decl[1].match(/(\d*\.?\d+)(px|rem)\b/)
+    if (!size) continue
+    const px = size[2] === 'rem' ? Number(size[1]) * 16 : Number(size[1])
+    if (px < MIN_FONT_PX) return true
+  }
+  return false
+}
+
+describe('SDK control refresh style rules', () => {
+  it('should find no uppercase text-transform when scanning styles (2a)', () => {
+    expectNone(offenders(allStyleCss, (l) => /text-transform\s*:\s*uppercase/i.test(l)))
+  })
+
+  it('should find no font size below 11px when scanning component styles (8d)', () => {
+    const files = componentCss.filter((f) => !FONT_SIZE_WHITELIST.has(relative(componentsDir, f)))
+    expectNone(offenders(files, hasTooSmallFont))
+  })
+
+  it('should find no var(--token, #hex) fallback when scanning styles (4f)', () => {
+    expectNone(offenders(allStyleCss, (l) => /var\(--[\w-]+,\s*#/.test(l)))
+  })
+
+  it('should find no legacy --mint-border/bg-/text- reference when scanning styles (4f)', () => {
+    // Usages only: variables.css still declares the aliases, and
+    // --mint-border-focus is a real token, not part of the legacy chain.
+    expectNone(offenders(allStyleCss, (l) => /var\(--mint-(?:border(?![\w-])|bg-|text-)/.test(l)))
+  })
+
+  it('should find no pre-rebrand blue literal when scanning source CSS and Vue files (6d)', () => {
+    // The --mint-info-* token declarations are the genuine info blue (the
+    // replacement target for info intent), not a legacy use.
+    expectNone(
+      offenders(
+        allSrcCssAndVue,
+        (l) => /rgba\(\s*59\s*,\s*130\s*,\s*246/.test(l) && !/^\s*--mint-info-[\w-]+\s*:/.test(l),
+      ),
+    )
+  })
+
+  it('should find no linear-gradient when scanning flat-surface components (1d, 2f, 2g, 3e)', () => {
+    const files = ['icon-button.css', 'empty-state.css', 'jobs-status-tray.css', 'file-picker.css', 'skeleton.css'].map(component)
+    expectNone(offenders(files, (l) => /linear-gradient/.test(l)))
+  })
+
+  it('should find no hex color literal when scanning token-only graphics (1g, 2b, 3b, 7a)', () => {
+    const files = ['well-plate.css', 'tooltip.css', 'well-edit-popup.css', 'plate-editor.css'].map(component)
+    expectNone(offenders(files, (l) => /#[0-9a-fA-F]{3,8}\b/.test(l)))
+  })
+
+  it('should ring the focused editor root when scanning plate-editor.css (7a)', () => {
+    const css = stripComments(readFileSync(component('plate-editor.css'), 'utf-8'))
+    expect(/\.mint-plate-editor:focus-visible\s*\{[^}]*box-shadow:\s*var\(--focus-ring\)/.test(css)).toBe(true)
+  })
+
+  it('should fill progress with the primary color only when scanning progress-bar.css (6b)', () => {
+    // --mint-info is reserved for the "running" status dot.
+    expectNone(offenders([component('progress-bar.css')], (l) => /--mint-info/.test(l)))
+  })
+
+  it('should keep sequence progress text off --mint-info when scanning sequence-progress-bar.css (6b)', () => {
+    expectNone(offenders([component('sequence-progress-bar.css')], (l) => /--mint-info/.test(l)))
+  })
+
+  it('should fill primary and info progress with --color-primary when scanning progress-bar.css (6b)', () => {
+    // The rail bar, for primary and info.
+    const fills = stripComments(readFileSync(component('progress-bar.css'), 'utf-8'))
+      .split('\n')
+      .filter((l) => /\.mint-progress__[\w.-]*--(primary|info)\s*\{/.test(l))
+      .map((l) => /background-color:\s*([^;]+);/.exec(l)?.[1])
+    expect(fills).toEqual(Array(2).fill('var(--color-primary)'))
+  })
+
+  it('should compose SDK fields instead of private field styles when scanning protocol-step-editor.css and dose-calculator.css (6c)', () => {
+    const files = [component('protocol-step-editor.css'), component('dose-calculator.css')]
+    expectNone(offenders(files, (l) => /__(input|select|textarea|unit-suffix|template-|mode-badge|btn|apply-btn)/.test(l)))
+  })
+
+  it('should wrap FormField rows so a row error sits on its own line (6c)', () => {
+    expect(readFileSync(component('form-field.css'), 'utf-8')).toMatch(/\.mint-form-field--row\s*\{[^}]*flex-wrap:\s*wrap;/)
+  })
+
+  it('should set FormField row labels in 13px text-secondary-strong (3b, 6c)', () => {
+    expect(readFileSync(component('form-field.css'), 'utf-8')).toMatch(/\.mint-form-field--row \.mint-form-field__label\s*\{[^}]*font-size:\s*0\.8125rem;[^}]*color:\s*var\(--text-secondary-strong\);/)
+  })
+
+  it('should draw no checkbox glyph as a data URI when scanning sample-selector.css (7c)', () => {
+    expectNone(offenders([component('sample-selector.css')], (l) => /data:image/.test(l)))
+  })
+
+  it('should generate no label text in CSS when scanning scientific inputs (4b)', () => {
+    // "MW" and "≈" live in templates so they can be translated, selected and read aloud.
+    const files = ['formula-input.css', 'concentration-input.css', 'unit-input.css'].map(component)
+    expectNone(offenders(files, (l) => /(^|[^-\w])content\s*:/.test(l)))
+  })
+
+  it('should find no italic conversion hint when scanning scientific inputs (4b)', () => {
+    const files = ['concentration-input.css', 'unit-input.css'].map(component)
+    expectNone(offenders(files, (l) => /font-style\s*:\s*italic/.test(l)))
+  })
+
+  it('should set the unit at the number size when scanning scientific-number.css (4b)', () => {
+    const css = stripComments(readFileSync(component('scientific-number.css'), 'utf-8'))
+    const rule = /\.mint-sci-number__unit\s*\{([^}]*)\}/.exec(css)?.[1] ?? ''
+    expect(rule).not.toMatch(/font-size/)
+  })
+
+  it('should give numeric DataFrame cells tabular figures when scanning dataframe.css (2a)', () => {
+    const css = stripComments(readFileSync(component('dataframe.css'), 'utf-8'))
+    const rule = /\.mint-dataframe__td--number\s*\{([^}]*)\}/.exec(css)?.[1] ?? ''
+    expect(rule).toMatch(/font-variant-numeric:\s*tabular-nums/)
+  })
+
+  it('should center the select-all checkbox over the row checkboxes when .mint-dataframe__th forces left (2a)', () => {
+    const css = stripComments(readFileSync(component('dataframe.css'), 'utf-8'))
+    const rule = /\.mint-dataframe__th--checkbox\s*\{([^}]*)\}/.exec(css)?.[1] ?? ''
+    expect(rule).toMatch(/text-align:\s*center\s*!important/)
+  })
+
+  it('should wrap a row FormField so its hint drops below the control when scanning form-field.css (3b)', () => {
+    const css = stripComments(readFileSync(component('form-field.css'), 'utf-8'))
+    const rule = /\.mint-form-field--row\s*\{([^}]*)\}/.exec(css)?.[1] ?? ''
+    expect(rule).toMatch(/flex-wrap:\s*wrap/)
+  })
+
+  it('should pad resource picker rows to the roomier two-column layout when scanning resource-picker-list.css', () => {
+    const css = stripComments(readFileSync(component('resource-picker-list.css'), 'utf-8'))
+    const rule = /\.mint-resource-picker__row\s*\{([^}]*)\}/.exec(css)?.[1] ?? ''
+    expect(rule).toMatch(/padding:\s*10px 12px/)
+  })
+
+  // Group bars and the list frame were inset by the modal body padding; the list now runs edge to edge.
+  it('should drop the modal body padding around the resource picker when scanning resource-picker-list.css', () => {
+    const css = stripComments(readFileSync(component('resource-picker-list.css'), 'utf-8'))
+    const rule = /\.mint-modal__body:has\(> \.mint-resource-picker\)\s*\{([^}]*)\}/.exec(css)?.[1] ?? ''
+    expect(rule).toMatch(/padding:\s*0/)
+  })
+
+  it('should pad resource picker group bars to the modal gutter when scanning resource-picker-list.css', () => {
+    const css = stripComments(readFileSync(component('resource-picker-list.css'), 'utf-8'))
+    const rule = /\.mint-resource-picker__group\s*\{([^}]*)\}/.exec(css)?.[1] ?? ''
+    expect(rule).toMatch(/padding:\s*0 1\.25rem/)
+  })
+
+  // The list sat in a bordered card inside the modal card.
+  it('should draw no frame around the resource picker list when scanning resource-picker-list.css', () => {
+    const css = stripComments(readFileSync(component('resource-picker-list.css'), 'utf-8'))
+    const rule = /\.mint-resource-picker__frame\s*\{([^}]*)\}/.exec(css)?.[1] ?? ''
+    expect(rule).not.toMatch(/(^|;)\s*border:/)
+  })
+
+  it('should paint the clear-selection link with primary ink when scanning experiment-selector-modal.css (8b)', () => {
+    const css = stripComments(readFileSync(component('experiment-selector-modal.css'), 'utf-8'))
+    const rule = /\.mint-experiment-selector__clear-btn\s*\{([^}]*)\}/.exec(css)?.[1] ?? ''
+    expect(rule).toMatch(/color:\s*var\(--_ink-primary\)/)
+  })
+})

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

@@ -14,11 +14,7 @@ const variablesCss = readFileSync(join(stylesDir, 'variables.css'), 'utf-8')
  * component-local knobs declared in the same stylesheet that consumes them.
  * Anything else must be a canonical token from variables.css.
  */
-const RUNTIME_PROPERTY_ALLOWLIST = new Set<string>([
-  // Names assembled in JS (`--grp-${i}`) — the literal prefix is what the
-  // scanner sees in a template string.
-  '--grp-',
-])
+const RUNTIME_PROPERTY_ALLOWLIST = new Set<string>([])
 
 const SOURCE_EXTENSIONS = ['.vue', '.css', '.ts']
 const IGNORED_DIRS = new Set(['__tests__', 'generated-ui', 'node_modules'])
@@ -95,6 +91,12 @@ describe('CSS custom properties', () => {
     expect(report).toEqual([])
   })
 
+  // 9a: PlotlyChart reads it through getComputedStyle('--font-sans'), which the
+  // scan above counts as a declaration, so it slipped through as undefined.
+  it('should declare --font-sans as Fira Sans when charts read the sans font token (9a)', () => {
+    expect(variablesCss).toMatch(/--font-sans:\s*'Fira Sans'/)
+  })
+
   it('does not use the platform-only --color-bg-*/--color-text-*/--color-border aliases', () => {
     const platformOnly = /^--color-(bg|text)-|^--color-border$/
     const offenders = [

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

@@ -0,0 +1,47 @@
+import { readdirSync, readFileSync } from 'node:fs'
+import { dirname, join, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { describe, expect, it } from 'vitest'
+
+// SDK control refresh phase 1, fix round 1: dark-mode ink, hairlines and sizing.
+const stylesDir = resolve(dirname(fileURLToPath(import.meta.url)), '../../styles')
+const componentsDir = join(stylesDir, 'components')
+const css = (name: string) => readFileSync(join(componentsDir, name), 'utf-8')
+
+describe('dark-mode ink and hairline rules', () => {
+  it('should find no light-only ink text color when scanning component styles', () => {
+    const offenders = readdirSync(componentsDir)
+      .filter(f => f.endsWith('.css'))
+      .flatMap(f => css(f).split('\n').map((l, i) => ({ l, at: `${f}:${i + 1}` })))
+      .filter(({ l }) => /(^|[\s;{])color:\s*var\(--(color-primary-hover|mint-error-hover)\)/.test(l))
+      .map(({ at }) => at)
+    expect(offenders).toEqual([])
+  })
+
+  it('should lift the ink aliases toward --text-primary when the theme is dark', () => {
+    const dark = readFileSync(join(stylesDir, 'variables.css'), 'utf-8').match(/html\.dark \{[^}]*\}/)?.[0] ?? ''
+    expect(dark).toMatch(/--_ink-primary: color-mix\(in srgb, var\(--color-primary\) 50%, var\(--text-primary\)\);[\s\S]*--_ink-error: color-mix\(in srgb, var\(--mint-error\) 50%, var\(--text-primary\)\);/)
+  })
+
+  it.each([
+    ['batch-progress-list.css', 'mint-batch-progress'],
+    ['dataframe.css', 'mint-dataframe'],
+    ['fit-panel.css', 'mint-fit-panel'],
+    ['jobs-status-tray.css', 'mint-jobs-tray'],
+    ['molecule-input.css', 'mint-molecule-input'],
+    ['reagent-list.css', 'mint-reagent-list'],
+    ['sample-hierarchy-tree.css', 'mint-sample-tree'],
+    ['sequence-input.css', 'mint-sequence-input'],
+    ['step-wizard.css', 'mint-wizard'],
+  ])('should draw %s hairlines with --border-color when the theme is dark', (file, root) => {
+    expect(css(file)).toContain(`:where(html.dark) .${root} {\n  --border-light: var(--border-color);\n}`)
+  })
+
+  it('should stripe DataFrame rows with a tint that differs from the --bg-card surface', () => {
+    expect(css('dataframe.css')).not.toMatch(/\.mint-dataframe__row--striped[^{]*\{[^}]*--bg-secondary/)
+  })
+
+  it('should size timeline icons border-box so the dashed skipped ring keeps the nominal size', () => {
+    expect(css('experiment-timeline.css')).toMatch(/\.mint-timeline__icon \{[^}]*box-sizing: border-box;/)
+  })
+})

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

@@ -0,0 +1,75 @@
+import { readFileSync } from 'node:fs'
+import { dirname, join, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { describe, expect, it } from 'vitest'
+
+// SDK control refresh phase 1 (2c, 5a, 5d): CSS-only cards, locked by value.
+const componentsDir = resolve(dirname(fileURLToPath(import.meta.url)), '../../styles/components')
+const css = (name: string) => readFileSync(join(componentsDir, name), 'utf-8')
+
+describe('menus and app shell styles', () => {
+  it('should fill completed StepWizard connectors with the primary hue (2c)', () => {
+    expect(css('step-wizard.css')).toMatch(/\.mint-wizard__step-connector--completed\s*\{[^}]*background-color:\s*var\(--color-primary\);/)
+  })
+
+  it('should draw the StepWizard connector 1px tall (2c)', () => {
+    expect(css('step-wizard.css')).toMatch(/\.mint-wizard__step-connector\s*\{[^}]*height:\s*1px;/)
+  })
+
+  // Phase 3: the nav renders BaseButton (Finish = primary, see StepWizard.test.ts), so no private button rules remain.
+  it('should leave StepWizard nav buttons to BaseButton (2c)', () => {
+    expect(css('step-wizard.css')).not.toMatch(/\.mint-wizard__nav-btn/)
+  })
+
+  it('should pad the top bar to the 1.2 height (62px)', () => {
+    expect(css('app-top-bar.css')).toMatch(/\.mint-topbar\s*\{[^}]*padding:\s*0\.75rem 1rem;/)
+  })
+
+  // 28px items + 3px track padding + 1px border on each side = the 36px top-bar control height.
+  it('should size pill nav items so the track matches the 36px top-bar controls', () => {
+    expect(css('app-pill-nav.css')).toMatch(/\.mint-pill-nav__item\s*\{[^}]*height:\s*1\.75rem;/)
+  })
+
+  it('should size the page selector trigger to the 36px identity tile', () => {
+    expect(css('app-page-selector.css')).toMatch(/\.mint-page-selector__trigger\s*\{[^}]*height:\s*2\.25rem;/)
+  })
+
+  // Shrinking the tile beside the identity also shrank structured icons inside their solid chip, drawing a ring.
+  it('should keep the 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 identity 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.
+  it('should fit the top-bar title and subtitle inside the control row (5a)', () => {
+    expect(css('app-top-bar.css')).toMatch(/\.mint-topbar-title\s*\{[^}]*line-height:\s*1\.15;/)
+  })
+
+  it('should size the top-bar experiment trigger to the 32px control height (5a)', () => {
+    expect(css('experiment-popover.css')).toMatch(/\.mint-experiment-popover__trigger\s*\{[^}]*height:\s*var\(--form-height-sm\);/)
+  })
+
+  it('should size the top-bar experiment save trigger to the 32px control height (5a)', () => {
+    expect(css('experiment-popover.css')).toMatch(/\.mint-experiment-popover__save-trigger\s*\{[^}]*height:\s*var\(--form-height-sm\);/)
+  })
+
+  it('should give settings number rows a 120px control (5d)', () => {
+    expect(css('settings-modal.css')).toMatch(/> \.mint-number-input\s*\{\s*width:\s*7\.5rem;/)
+  })
+
+  it('should give settings select rows a 220px control (5d)', () => {
+    expect(css('settings-modal.css')).toMatch(/> \.mint-select\s*\{\s*width:\s*13\.75rem;/)
+  })
+
+  it('should keep full-width menu items inside the popover when rendered as <a> or <li> (2d)', () => {
+    expect(css('popover.css')).toMatch(/\.mint-menu-item\s*\{[^}]*box-sizing:\s*border-box;/)
+  })
+
+  it('should size the popover border-box so trigger-width panels do not overhang (2d)', () => {
+    expect(css('popover.css')).toMatch(/\.mint-popover\s*\{[^}]*box-sizing:\s*border-box;/)
+  })
+})

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

@@ -66,6 +66,7 @@ import {
   toInstrumentRunRows,
   toInstrumentRunScheduleEvents,
   toInstrumentRunSteps,
+  racksFromPlateState,
   toPlateMapEditorState,
   toProtocolDataFrame,
   toProtocolSteps,
@@ -251,6 +252,12 @@ describe('bio data templates', () => {
     expect(listBioTemplatePresets()).toEqual(bioTemplatePresetsContract)
   })
 
+  it('should not recommend AutoGroupModal when it is scheduled for removal', () => {
+    const components = listBioTemplateCatalog().flatMap(entry => entry.components)
+
+    expect(components).not.toContain('AutoGroupModal')
+  })
+
   it('prefers generic dataframe adapters in catalog entries', () => {
     const dataframeTemplates = listBioTemplateCatalog().filter(entry =>
       entry.components.includes('DataFrame')
@@ -311,12 +318,12 @@ describe('bio data templates', () => {
     const westernBindings = getBioTemplateComponentBindings('western-blot-assay')
     const wellplateImports = toBioTemplateComponentImports('wellplate-screen')
 
-    expect(bindings['plate-map'].map(binding => binding.component)).toEqual(['PlateMapEditor', 'WellPlate'])
+    expect(bindings['plate-map'].map(binding => binding.component)).toEqual(['PlateEditor', 'WellPlate'])
     expect(wellplateBindings.map(binding => binding.component)).toContain('DoseCalculator')
     expect(wellplateBindings.map(binding => binding.component)).toContain('WellPlate')
     expect(qpcrBindings.map(binding => binding.component)).toContain('WellPlate')
     expect(qpcrBindings.map(binding => binding.component)).toContain('DataFrame')
-    expect(elisaBindings.map(binding => binding.component)).toContain('PlateMapEditor')
+    expect(elisaBindings.map(binding => binding.component)).toContain('PlateEditor')
     expect(elisaBindings.map(binding => binding.component)).toContain('DataFrame')
     expect(lcmsBindings.map(binding => binding.component)).toContain('ScheduleCalendar')
     expect(lcmsBindings.map(binding => binding.component)).toContain('ExperimentTimeline')
@@ -335,8 +342,8 @@ describe('bio data templates', () => {
     expect(wellplateImports).toEqual([
       {
         importPath: '@morscherlab/mint-sdk',
-        components: ['PlateMapEditor', 'WellPlate', 'DataFrame', 'SampleSelector', 'DoseCalculator'],
-        statement: "import { PlateMapEditor, WellPlate, DataFrame, SampleSelector, DoseCalculator } from '@morscherlab/mint-sdk'",
+        components: ['PlateEditor', 'WellPlate', 'DataFrame', 'SampleSelector', 'DoseCalculator'],
+        statement: "import { PlateEditor, WellPlate, DataFrame, SampleSelector, DoseCalculator } from '@morscherlab/mint-sdk'",
       },
     ])
   })
@@ -354,6 +361,12 @@ describe('bio data templates', () => {
     expect(state.samples[1].id).toBe('drug-a')
   })
 
+  it('should convert plate-map state into PlateEditor racks', () => {
+    const state = toPlateMapEditorState(createPlateMapTemplate({ samples: ['DMSO'] }))
+
+    expect(racksFromPlateState(state)[0]).toMatchObject({ id: 'plate-1', format: 96, slot: 'R' })
+  })
+
   it('loads the shared plate-map fixture', () => {
     const state = toPlateMapEditorState(plateMapFixture as PlateMapTemplate)
     const wells = toWellPlateWells(plateMapFixture as PlateMapTemplate)
@@ -390,7 +403,7 @@ describe('bio data templates', () => {
     })
 
     expect(Object.keys(propsById)).toEqual([
-      'plate-map:PlateMapEditor',
+      'plate-map:PlateEditor',
       'plate-map:WellPlate',
       'sample-sheet:DataFrame',
       'sample-sheet:SampleSelector',
@@ -446,13 +459,13 @@ describe('bio data templates', () => {
       propsVariable: 'bindings',
     })
 
-    expect(snippets.map(snippet => snippet.component)).toEqual(['PlateMapEditor', 'WellPlate'])
+    expect(snippets.map(snippet => snippet.component)).toEqual(['PlateEditor', 'WellPlate'])
     expect(snippets.map(snippet => snippet.propsName)).toEqual([
-      'plateMapPlateMapEditorProps',
+      'plateMapPlateEditorProps',
       'plateMapWellPlateProps',
     ])
     expect(snippets[0].propsExpression).toBe('bindings[0].propsObject')
-    expect(snippets[0].template).toBe('<PlateMapEditor v-bind="bindings[0].propsObject" />')
+    expect(snippets[0].template).toBe('<PlateEditor v-bind="bindings[0].propsObject" />')
     expect(snippets[1].template).toBe('<WellPlate v-bind="bindings[1].propsObject" />')
   })
 
@@ -463,20 +476,20 @@ describe('bio data templates', () => {
     })
 
     expect(usage.imports[0].statement).toBe(
-      "import { PlateMapEditor, WellPlate } from '@morscherlab/mint-sdk'"
+      "import { PlateEditor, WellPlate } from '@morscherlab/mint-sdk'"
     )
     expect(usage.componentProps).toHaveLength(2)
     expect(usage.propsDeclarations).toEqual([
-      'const plateMapPlateMapEditorProps = bindings[0].propsObject',
+      'const plateMapPlateEditorProps = bindings[0].propsObject',
       'const plateMapWellPlateProps = bindings[1].propsObject',
     ])
     expect(usage.scriptSetup).toBe([
       'const bindings = toBioTemplateComponentProps(plateMap)',
-      'const plateMapPlateMapEditorProps = bindings[0].propsObject',
+      'const plateMapPlateEditorProps = bindings[0].propsObject',
       'const plateMapWellPlateProps = bindings[1].propsObject',
     ].join('\n'))
     expect(usage.template).toBe([
-      '<PlateMapEditor v-bind="plateMapPlateMapEditorProps" />',
+      '<PlateEditor v-bind="plateMapPlateEditorProps" />',
       '<WellPlate v-bind="plateMapWellPlateProps" />',
     ].join('\n'))
   })
@@ -487,10 +500,10 @@ describe('bio data templates', () => {
     expect(usage.scriptSetup).toContain(
       'const props = defineProps<{ templateCollection: BioTemplateEnvelope<unknown> | TemplateCollectionEnvelope }>()'
     )
-    expect(usage.sfc).toContain("import { PlateMapEditor, WellPlate } from '@morscherlab/mint-sdk'")
+    expect(usage.sfc).toContain("import { PlateEditor, WellPlate } from '@morscherlab/mint-sdk'")
     expect(usage.sfc).toContain("import { toBioTemplateComponentProps } from '@morscherlab/mint-sdk/templates'")
     expect(usage.sfc).toContain('defineProps<{ templateCollection: BioTemplateEnvelope<unknown> | TemplateCollectionEnvelope }>()')
-    expect(usage.sfc).toContain('<PlateMapEditor v-bind="plateMapPlateMapEditorProps" />')
+    expect(usage.sfc).toContain('<PlateEditor v-bind="plateMapPlateEditorProps" />')
     expect(usage.sfc).toContain('<WellPlate v-bind="plateMapWellPlateProps" />')
     expect(usage.sfc).toMatch(/^<script setup lang="ts">[\s\S]*<\/template>$/)
   })
@@ -583,7 +596,7 @@ describe('bio data templates', () => {
     expect(wellplate.metadata?.preset).toBe('wellplate-screen')
     expect(toPlateMapEditorState(wellplateTemplates['plate-map'] as PlateMapTemplate).samples[1].id).toBe('treatment')
     expect(toDoseConditions(wellplateTemplates['dose-response'] as DoseResponseTemplate)[0].label).toBe('Drug A')
-    expect(wellplateComponentProps.map(binding => binding.component)).toContain('PlateMapEditor')
+    expect(wellplateComponentProps.map(binding => binding.component)).toContain('PlateEditor')
     expect(wellplateComponentProps.map(binding => binding.component)).toContain('DoseCalculator')
     expect(Object.keys(qpcrTemplates)).toEqual(['sample-sheet', 'qpcr-plate'])
     expect(toQpcrRows(qpcrTemplates['qpcr-plate'] as QpcrPlateTemplate)[0].sampleId).toBe('S001')
@@ -1183,3 +1196,40 @@ describe('bio data templates', () => {
     expect(template.data.measurements[0].featureId).toBe('lactate')
   })
 })
+
+describe('plate-map PlateEditor binding (7a)', () => {
+  const editorProps = () =>
+    toBioTemplateComponentProps(plateMapFixture as PlateMapTemplate)
+      .find(binding => binding.component === 'PlateEditor')?.propsObject as Record<string, unknown>
+
+  it('should pass the plates as racks with sequential slots', () => {
+    expect((editorProps().modelValue as Array<{ slot: string }>)[0].slot).toBe('R')
+  })
+
+  it('should move the sample id of a well to its group', () => {
+    const racks = editorProps().modelValue as Array<{ wells: Record<string, { group?: string }> }>
+
+    expect(racks[0].wells.A2.group).toBe('drug-a')
+  })
+
+  it('should make a well with a sample id a sample', () => {
+    const racks = editorProps().modelValue as Array<{ wells: Record<string, { sampleType?: string }> }>
+
+    expect(racks[0].wells.A2.sampleType).toBe('sample')
+  })
+
+  it('should leave the stored plate-map wells unchanged', () => {
+    const template = structuredClone(plateMapFixture) as PlateMapTemplate
+    toBioTemplateComponentProps(template)
+
+    expect(template).toEqual(plateMapFixture)
+  })
+
+  it('should offer the template samples as groups', () => {
+    expect((editorProps().groups as Array<{ id: string }>).map(group => group.id)).toContain('drug-a')
+  })
+
+  it('should pin the format to the plate format', () => {
+    expect(editorProps().formats).toEqual([96])
+  })
+})