@morscherlab/mint-sdk 1.4.0-beta.1 → 1.4.0-beta.11

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

@@ -29,11 +29,11 @@ describe('SDK control refresh base-control rules', () => {
   })
 
   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']
+    const pressables = ['checkbox.css', 'radio-group.css', 'toggle.css', 'icon-button.css']
     expect(offenders(pressables, (l) => /var\(--focus-ring(-soft)?\)/.test(l))).toEqual([])
   })
 
-  it.each(['input.css', 'select.css', 'textarea.css'])(
+  it.each(['input.css', 'select.css', 'textarea.css', 'multi-select.css'])(
     'should use the shared field hover border when scanning %s (1e)',
     (file) => {
       expect(css(file)).toContain('border-color: var(--_field-border-hover)')
@@ -77,6 +77,10 @@ describe('SDK control refresh base-control rules', () => {
     expect(offenders(['alert-box.css'], (l) => /\.mint-alert--\w+ \.mint-alert__title/.test(l))).toEqual([])
   })
 
+  it('should find no tone fill on the alert surface when scanning alert-box.css (v2 callout)', () => {
+    expect(offenders(['alert-box.css'], (l) => /^\.mint-alert--\w+\s*\{/.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([])
   })

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

@@ -197,12 +197,6 @@ describe('SDK control refresh style rules', () => {
     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'))

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

@@ -93,8 +93,8 @@ describe('CSS custom properties', () => {
 
   // 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('should declare --font-sans as Geist when charts read the sans font token (9a)', () => {
+    expect(variablesCss).toMatch(/--font-sans:\s*'Geist'/)
   })
 
   it('does not use the platform-only --color-bg-*/--color-text-*/--color-border aliases', () => {

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

@@ -25,9 +25,9 @@ describe('menus and app shell styles', () => {
     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;/)
+  // 26px items + 2px track padding + 1px border on each side = the 32px top-bar control height.
+  it('should size pill nav items so the track matches the 32px top-bar controls', () => {
+    expect(css('app-pill-nav.css')).toMatch(/\.mint-pill-nav__item\s*\{[^}]*height:\s*1\.625rem;/)
   })
 
   it('should size the page selector trigger to the 36px identity tile', () => {
@@ -44,17 +44,21 @@ describe('menus and app shell styles', () => {
     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;/)
+  // 18px name + 15px subtitle lines, spread over the 36px identity tile height (top and bottom aligned).
+  it('should fit the top-bar title and subtitle to the 36px identity tile (5a)', () => {
+    const topBar = css('app-top-bar.css')
+    expect(topBar).toMatch(/\.mint-topbar-title-group\s*\{[^}]*justify-content:\s*space-between;[^}]*height:\s*2\.25rem;/)
+    expect(topBar).toMatch(/\.mint-topbar-title\s*\{[^}]*font-size:\s*0\.9375rem;[^}]*line-height:\s*1\.125rem;/)
+    expect(topBar).toMatch(/\.mint-topbar-subtitle\s*\{[^}]*font-size:\s*0\.75rem;[^}]*line-height:\s*0\.9375rem;/)
   })
 
-  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\);/)
+  // Design v2: the joined [trigger | Save] group is 30px inside its 1px border.
+  it('should size the top-bar experiment trigger to the 30px v2 control height (5a)', () => {
+    expect(css('experiment-popover.css')).toMatch(/\.mint-experiment-popover__trigger\s*\{[^}]*height:\s*30px;/)
   })
 
-  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 size the top-bar experiment save button to the 30px v2 control height (5a)', () => {
+    expect(css('experiment-popover.css')).toMatch(/\.mint-experiment-popover__save\s*\{[^}]*height:\s*30px;/)
   })
 
   it('should give settings number rows a 120px control (5d)', () => {

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

@@ -0,0 +1,96 @@
+import { readFileSync } from 'node:fs'
+import { dirname, join, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { describe, expect, it } from 'vitest'
+
+// v2 design audit (2026-10-28) fixes in the SDK stylesheets.
+
+const srcRoot = resolve(dirname(fileURLToPath(import.meta.url)), '../..')
+const stylesDir = join(srcRoot, 'styles')
+
+function css(path: string): string {
+  return readFileSync(join(stylesDir, path), 'utf-8').replace(/\/\*[\s\S]*?\*\//g, '')
+}
+
+function rule(text: string, selector: string): string {
+  const escaped = selector.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+  return new RegExp(`(?:^|\\})\\s*${escaped}\\s*\\{([^}]*)\\}`).exec(text)?.[1] ?? ''
+}
+
+const rem = (value: string): number => Number(value.replace('rem', '')) * 16
+
+describe('v2 audit style rules', () => {
+  it('should keep the outermost cards at least 16px from the window edge', () => {
+    const inset = /--mint-page-inset:\s*([\d.]+rem)/.exec(css('variables.css'))?.[1] ?? '0rem'
+    expect(rem(inset)).toBeGreaterThanOrEqual(16)
+    expect(rule(css('components/app-layout.css'), '.mint-layout--floating')).toMatch(/padding:\s*var\(--mint-page-inset\)/)
+    const topBarCard = rule(css('components/app-top-bar.css'), '.mint-topbar--card')
+    expect(topBarCard).toMatch(/width:\s*calc\(100% - 2 \* var\(--mint-page-inset\)\)/)
+    expect(topBarCard).toMatch(/margin:\s*var\(--mint-page-inset\) var\(--mint-page-inset\) 0/)
+  })
+
+  it('should put the SDK utility classes in the utilities layer so host variants beat them', () => {
+    const vars = css('variables.css')
+    const order = vars.indexOf('@layer theme, base, components, utilities;')
+    const layer = vars.indexOf('@layer utilities {')
+    expect(order).toBeGreaterThan(-1)
+    expect(order).toBeLessThan(vars.indexOf('@layer base {'))
+    const utilities = vars.slice(layer, vars.indexOf('@media (prefers-reduced-motion'))
+    expect(layer).toBeGreaterThan(-1)
+    for (const selector of ['.flex-col {', '.text-text-muted {', '.truncate {', '.max-w-sm {']) {
+      expect(utilities).toContain(selector)
+    }
+  })
+
+  it('should drop the last DataFrame row rule over the !important cell border', () => {
+    const body = rule(css('components/dataframe.css'), '.mint-dataframe__row:last-child .mint-dataframe__td')
+    expect(body).toMatch(/border-bottom:\s*none\s*!important/)
+  })
+
+  it('should round the modal close button with --radius-md', () => {
+    expect(rule(css('components/modal.css'), '.mint-modal__close')).toMatch(/border-radius:\s*var\(--radius-md\)/)
+  })
+
+  it('should draw no capsule on the progress rail or the sheet grab hint', () => {
+    expect(css('components/progress-bar.css')).not.toMatch(/9999px/)
+    expect(rule(css('components/modal.css'), '.mint-modal__grab-hint')).not.toMatch(/9999px/)
+  })
+
+  it('should keep a 28px header control inside the section card header strip', () => {
+    const text = css('components/section-card.css')
+    const cases: Array<[string, number]> = [
+      ['.mint-section-card__header', 28],
+      ['[data-density="comfortable"] .mint-section-card__header', 32],
+    ]
+    for (const [selector, control] of cases) {
+      const body = rule(text, selector)
+      const minHeight = rem(/min-height:\s*([\d.]+rem)/.exec(body)?.[1] ?? '0rem')
+      const padTop = rem(/padding:\s*([\d.]+rem)/.exec(body)?.[1] ?? '0rem')
+      expect(control + 2 * padTop + 1, selector).toBeLessThanOrEqual(minHeight)
+    }
+  })
+
+  it('should end the settings pane without a closing row hairline and draw no box around the density preview', () => {
+    const text = css('components/settings-modal.css')
+    const last = rule(
+      text,
+      '.mint-settings-modal__group:last-of-type > .mint-settings-modal__group-grid > .mint-settings-modal__row:last-child',
+    )
+    expect(last).toMatch(/border-bottom:\s*none/)
+    expect(rule(text, '.mint-settings-modal__density-preview')).not.toMatch(/(^|;)\s*border(-radius)?:/)
+  })
+
+  it('should set the md number input text no smaller than the sm one', () => {
+    const text = css('components/number-input.css')
+    const size = (variant: string) =>
+      rem(/font-size:\s*([\d.]+rem)/.exec(rule(text, `.mint-number-input__input--${variant}`))?.[1] ?? '0rem')
+    expect(size('md')).toBeGreaterThan(size('sm'))
+  })
+
+  it('should give the generated JSON block a token radius and no frame', () => {
+    const sfc = readFileSync(join(srcRoot, 'components/GeneratedResultRenderer.vue'), 'utf-8')
+    const body = /\.mint-generated-result__json\s*\{([^}]*overflow:[^}]*)\}/.exec(sfc)?.[1] ?? ''
+    expect(body).toMatch(/border-radius:\s*var\(--radius-md\)/)
+    expect(body).not.toMatch(/(^|;)\s*border:/)
+  })
+})

package/src/__tests__/utils/plotlyTemplate.test.ts

@@ -10,8 +10,8 @@ const tokens: Record<string, string> = {
   '--mint-sample-6': '#666666',
   '--mint-sample-7': '#777777',
   '--mint-sample-8': '#888888',
-  '--font-sans': 'Fira Sans',
-  '--font-mono': 'Fira Code',
+  '--font-sans': 'Geist',
+  '--font-mono': 'Geist Mono',
   '--text-primary': '#1E293B',
   '--text-secondary': '#64748B',
   '--border-light': '#F3F4F6',
@@ -35,11 +35,11 @@ describe('mintPlotlyTemplate', () => {
   })
 
   it('should set 12px sans body text in the primary text color when tokens are defined', () => {
-    expect(mintPlotlyTemplate().layout?.font).toEqual({ family: 'Fira Sans', size: 12, color: '#1E293B' })
+    expect(mintPlotlyTemplate().layout?.font).toEqual({ family: 'Geist', size: 12, color: '#1E293B' })
   })
 
   it('should set 11px mono ticks in the secondary text color when tokens are defined', () => {
-    expect(mintPlotlyTemplate().layout?.yaxis?.tickfont).toEqual({ family: 'Fira Code', size: 11, color: '#64748B' })
+    expect(mintPlotlyTemplate().layout?.yaxis?.tickfont).toEqual({ family: 'Geist Mono', size: 11, color: '#64748B' })
   })
 
   it('should draw the grid with --border-light when tokens are defined', () => {

package/src/__tests__/utils/time.test.ts

@@ -1,6 +1,7 @@
-import { describe, expect, it } from 'vitest'
+import { afterEach, describe, expect, it, vi } from 'vitest'
 import {
   findNearestTimeSlotIndex,
+  formatRelativeTime,
   formatTimeSlot,
   fromMinutes,
   generateTimeSlots,
@@ -25,4 +26,20 @@ describe('time', () => {
     expect(findNearestTimeSlotIndex('08:00', [])).toBe(-1)
   })
 
+  describe('formatRelativeTime', () => {
+    afterEach(() => {
+      vi.useRealTimers()
+    })
+
+    it.each([
+      [{ weeks: true }, '2 weeks ago'],
+      [{}, new Date('2026-10-14T12:00:00Z').toLocaleDateString()],
+    ])('should format a 14-day-old time as a week count only when weeks is on (%o)', (options, expected) => {
+      vi.useFakeTimers({ toFake: ['Date'] })
+      vi.setSystemTime(new Date('2026-10-28T12:00:00Z'))
+
+      expect(formatRelativeTime('2026-10-14T12:00:00Z', options)).toBe(expected)
+    })
+  })
+
 })

package/src/components/AdductText.story.vue

@@ -12,6 +12,13 @@ import AdductText from './AdductText.vue'
       </div>
     </Variant>
 
+    <Variant title="Badges">
+      <div style="display: flex; align-items: center; gap: 0.5rem; padding: 2rem;">
+        <AdductText v-for="v in ['[M+H]+', '[M-H]-', '[M+Na]+', '[M-H2O+H]+', '[M+2H]2+']" :key="v" :value="v" variant="badge" />
+        <AdductText value="[M+H]+" variant="badge" font="mono" />
+      </div>
+    </Variant>
+
     <Variant title="Tones and inherited size">
       <div style="display: flex; flex-direction: column; gap: 0.75rem; padding: 2rem; max-width: 600px; color: var(--text-primary); font-size: 0.875rem;">
         <div style="display: flex; align-items: center; gap: 1rem;">

package/src/components/AdductText.vue

@@ -17,7 +17,7 @@ const props = withDefaults(defineProps<Props>(), {
   variant: 'inline',
   tone: 'default',
   size: 'xs',
-  font: 'mono',
+  font: 'sans',
 })
 
 const value = computed(() => props.value?.trim() ?? '')

package/src/components/AlertBox.story.vue

@@ -35,7 +35,7 @@ function handleAction(label: string) {
           </AlertBox>
           <p
             v-if="actionFired"
-            style="margin-top: 0.75rem; font-size: 0.8rem; color: var(--mint-success, #10B981); font-family: 'Fira Code', monospace;"
+            style="margin-top: 0.75rem; font-size: 0.8rem; color: var(--mint-success, #10B981); font-family: var(--font-mono);"
           >
             Action fired: "{{ actionFired }}"
           </p>
@@ -111,7 +111,7 @@ function handleAction(label: string) {
 
         <p
           v-if="actionFired"
-          style="font-size: 0.8rem; color: var(--mint-success, #10B981); font-family: 'Fira Code', monospace;"
+          style="font-size: 0.8rem; color: var(--mint-success, #10B981); font-family: var(--font-mono);"
         >
           Action fired: "{{ actionFired }}"
         </p>

package/src/components/AlertBox.vue

@@ -31,22 +31,24 @@ const hasActions = () => !!props.actionLabel || !!slots.actions
     :class="`mint-alert--${props.tone}`"
     role="alert"
   >
-    <!-- Lucide circle-check -->
-    <svg v-if="props.tone === 'success'" class="mint-alert__icon mint-alert__icon--success" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-      <circle cx="12" cy="12" r="10" /><path d="m9 12 2 2 4-4" />
-    </svg>
-    <!-- Lucide circle-x -->
-    <svg v-else-if="props.tone === 'error'" class="mint-alert__icon mint-alert__icon--error" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-      <circle cx="12" cy="12" r="10" /><path d="m15 9-6 6" /><path d="m9 9 6 6" />
-    </svg>
-    <!-- Lucide triangle-alert -->
-    <svg v-else-if="props.tone === 'warning'" class="mint-alert__icon mint-alert__icon--warning" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-      <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" /><path d="M12 9v4" /><path d="M12 17h.01" />
-    </svg>
-    <!-- Lucide info -->
-    <svg v-else :class="['mint-alert__icon', `mint-alert__icon--${props.tone}`]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-      <circle cx="12" cy="12" r="10" /><path d="M12 16v-4" /><path d="M12 8h.01" />
-    </svg>
+    <span :class="['mint-alert__icon', `mint-alert__icon--${props.tone}`]">
+      <!-- Lucide circle-check -->
+      <svg v-if="props.tone === 'success'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round">
+        <circle cx="12" cy="12" r="10" /><path d="m9 12 2 2 4-4" />
+      </svg>
+      <!-- Lucide circle-x -->
+      <svg v-else-if="props.tone === 'error'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round">
+        <circle cx="12" cy="12" r="10" /><path d="m15 9-6 6" /><path d="m9 9 6 6" />
+      </svg>
+      <!-- Lucide triangle-alert -->
+      <svg v-else-if="props.tone === 'warning'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round">
+        <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" /><path d="M12 9v4" /><path d="M12 17h.01" />
+      </svg>
+      <!-- Lucide info -->
+      <svg v-else viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round">
+        <circle cx="12" cy="12" r="10" /><path d="M12 16v-4" /><path d="M12 8h.01" />
+      </svg>
+    </span>
 
     <div class="mint-alert__content">
       <h4 v-if="props.title" class="mint-alert__title">

package/src/components/AppSidebar.story.vue

@@ -36,16 +36,12 @@ const sequencePanels: Record<string, SidebarToolSection[]> = {
       label: 'Import Layout',
       subtitle: 'Upload from Excel',
       icon: icons.upload,
-      iconColor: '#3b82f6',
-      iconBg: '#dbeafe',
     },
     {
       id: 'naming',
       label: 'Experiment & Naming',
       subtitle: 'exp001_260210_XP_M...',
       icon: icons.fileText,
-      iconColor: '#6366f1',
-      iconBg: '#e0e7ff',
       showToggle: true,
       badge: 'on',
       badgeTone: 'success',
@@ -55,8 +51,6 @@ const sequencePanels: Record<string, SidebarToolSection[]> = {
       label: 'Randomize Samples',
       subtitle: 'Sequential order',
       icon: icons.shuffle,
-      iconColor: '#6366f1',
-      iconBg: '#e0e7ff',
       showToggle: true,
       badge: 3,
       badgeTone: 'cta',
@@ -70,16 +64,12 @@ const sequencePanels: Record<string, SidebarToolSection[]> = {
       label: 'Acquisition',
       subtitle: 'NEG, VIAL',
       icon: icons.zap,
-      iconColor: '#ef4444',
-      iconBg: '#fee2e2',
     },
     {
       id: 'method',
       label: 'Method & Path',
       subtitle: 'Select method',
       icon: icons.route,
-      iconColor: '#8b5cf6',
-      iconBg: '#ede9fe',
       defaultOpen: false,
     },
   ],
@@ -93,16 +83,12 @@ const simplePanels: Record<string, SidebarToolSection[]> = {
       label: 'Parameters',
       subtitle: 'Analysis settings',
       icon: ['M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z', 'M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8z'],
-      iconColor: '#6366f1',
-      iconBg: '#e0e7ff',
     },
     {
       id: 'filters',
       label: 'Filters',
       subtitle: 'Refine results',
       icon: ['M22 3H2l8 9.46V19l4 2v-8.54L22 3'],
-      iconColor: '#0ea5e9',
-      iconBg: '#e0f2fe',
       defaultOpen: false,
     },
   ],
@@ -112,16 +98,12 @@ const simplePanels: Record<string, SidebarToolSection[]> = {
       label: 'Display Options',
       subtitle: 'Chart and table settings',
       icon: ['M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z', 'M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6z'],
-      iconColor: '#8b5cf6',
-      iconBg: '#ede9fe',
     },
     {
       id: 'export',
       label: 'Export',
       subtitle: 'Download data',
       icon: ['M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4', 'M7 10l5 5 5-5', 'M12 15V3'],
-      iconColor: '#10b981',
-      iconBg: '#d1fae5',
       defaultOpen: false,
     },
   ],
@@ -163,8 +145,6 @@ const schemaControls = defineControls({
     view: 'analysis',
     sidebar: {
       icon: icons.settings,
-      iconColor: '#6366f1',
-      iconBg: '#e0e7ff',
     },
   },
   method: {
@@ -180,16 +160,12 @@ const schemaControls = defineControls({
     default: true,
     hint: 'Keep flagged points visible',
     icon: icons.eye,
-    iconColor: '#0ea5e9',
-    iconBg: '#e0f2fe',
     section: 'display',
     sectionLabel: 'Display',
     sectionSubtitle: 'Result filters',
     view: 'analysis',
     sidebar: {
       icon: icons.zap,
-      iconColor: '#0ea5e9',
-      iconBg: '#e0f2fe',
       defaultOpen: false,
     },
   },
@@ -215,8 +191,6 @@ const modelDrivenSidebarModel = defineControlModel({
           description: 'Result cleanup',
           sidebar: {
             icon: icons.zap,
-            iconColor: '#0ea5e9',
-            iconBg: '#e0f2fe',
             defaultOpen: false,
           },
           controls: {
@@ -225,8 +199,6 @@ const modelDrivenSidebarModel = defineControlModel({
               default: true,
               hint: 'Keep flagged points visible',
               icon: icons.eye,
-              iconColor: '#0ea5e9',
-              iconBg: '#e0f2fe',
             },
             minPeakArea: { type: 'number', default: 1000, min: 0 },
           },

package/src/components/AppTopBar.story.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import AppTopBar from './AppTopBar.vue'
 import Avatar from './Avatar.vue'
+import PluginIcon from './PluginIcon.vue'
 import { ExperimentProvider } from '../__stories__/experiment-helpers'
+import { providePluginIdentity } from '../composables/pluginIdentity'
+import type { App } from 'vue'
 import type {
   TopBarVariant,
   PillNavItem,
@@ -59,6 +62,25 @@ const samplePlugin: PluginInfo = {
   settings_api: 'platform',
 }
 
+const samplePluginWithSubtitle: PluginInfo = {
+  ...samplePlugin,
+  id: 'ms-planner',
+  name: 'ms-planner',
+  display_name: 'MS Planner',
+  subtitle: 'Experiment Scheduler',
+  icon: 'calendar',
+  route_prefix: '/ms-planner',
+  api_prefix: '/api/ms-planner',
+}
+
+// The seed is module state: clear it when the variant unmounts.
+function seedIdentity({ app }: { app: App }) {
+  providePluginIdentity({
+    plugin: { name: 'ms-planner', displayName: 'MS Planner', subtitle: 'Experiment Scheduler', icon: 'calendar' },
+  })
+  app.onUnmount(() => providePluginIdentity({ plugin: { name: '' } }))
+}
+
 </script>
 
 <template>
@@ -82,18 +104,7 @@ const samplePlugin: PluginInfo = {
           pill="experiments"
         >
           <template #icon>
-            <div
-              style="width: 2.25rem; height: 2.25rem; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #F97316 0%, #FB923C 100%);"
-            >
-              <svg
-                style="width: 1.25rem; height: 1.25rem; color: white;"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
-              </svg>
-            </div>
+            <PluginIcon size="topbar" />
           </template>
         </AppTopBar>
       </div>
@@ -223,6 +234,20 @@ const samplePlugin: PluginInfo = {
       </div>
     </Variant>
 
+    <Variant title="Identity · Integrated with subtitle">
+      <div style="padding: 2rem; background: var(--bg-primary); min-height: 12rem;">
+        <ExperimentProvider :plugin="samplePluginWithSubtitle">
+          <AppTopBar :spec="{ pills: samplePillNav, homePath: '' }" pill="workspace" />
+        </ExperimentProvider>
+      </div>
+    </Variant>
+
+    <Variant title="Identity · Standalone seeded" :setup-app="seedIdentity">
+      <div style="padding: 2rem;">
+        <AppTopBar :spec="{ pills: samplePillNav, homePath: '' }" pill="workspace" />
+      </div>
+    </Variant>
+
     <Variant title="Navigation · Page selector">
       <div style="padding: 2rem;">
         <AppTopBar
@@ -244,6 +269,16 @@ const samplePlugin: PluginInfo = {
       </div>
     </Variant>
 
+    <Variant title="Navigation · Pill nav overflow (More)">
+      <div style="padding: 2rem; min-height: 14rem;">
+        <AppTopBar
+          :spec="{ pills: ['Queue', 'Calendar', 'Utilization', 'Instruments', 'Reports', 'Settings', 'Logs'], homePath: '' }"
+          title="MS Planner"
+          pill="Reports"
+        />
+      </div>
+    </Variant>
+
     <Variant title="Navigation · Pill nav with dropdown and dot">
       <div style="padding: 2rem;">
         <AppTopBar