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

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

@@ -0,0 +1,78 @@
+import { dirname, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+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')
+
+// 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,
+  })
+  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 => !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(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/__tests__/utils/permissions.test.ts

@@ -7,7 +7,6 @@ import {
   hasAllPermissions,
   hasAnyPermission,
   isAdminUser,
-  normalizeAccessPolicy,
 } from '../../permissions'
 
 describe('permission helpers', () => {
@@ -61,70 +60,3 @@ describe('permission helpers', () => {
     expect(canAccessByPolicy(member, { plugin: 'reports' })).toBe(false)
   })
 })
-
-describe('normalizeAccessPolicy precedence', () => {
-  it('returns an empty policy for an absent rule', () => {
-    expect(normalizeAccessPolicy(undefined)).toEqual({})
-  })
-
-  it('reads a flat-only rule as-is', () => {
-    expect(normalizeAccessPolicy({
-      visibleFor: 'admin',
-      requiresAdmin: true,
-      permissions: ['users.manage'],
-      anyPermissions: ['plugins.install'],
-    })).toEqual({
-      visibleFor: 'admin',
-      requiresAdmin: true,
-      permissions: ['users.manage'],
-      anyPermissions: ['plugins.install'],
-    })
-  })
-
-  it('lifts a nested-only policy to the top level', () => {
-    expect(normalizeAccessPolicy({
-      access: { requiresAuth: true, plugin: 'reports', visibleFor: 'admin' },
-    })).toEqual({
-      requiresAuth: true,
-      plugin: 'reports',
-      visibleFor: 'admin',
-    })
-  })
-
-  it('lets the nested policy win over the deprecated flat duplicates', () => {
-    expect(normalizeAccessPolicy({
-      access: {
-        visibleFor: 'admin',
-        requiresAdmin: true,
-        permissions: ['users.manage'],
-        anyPermissions: ['plugins.install'],
-      },
-      visibleFor: 'user',
-      requiresAdmin: false,
-      permissions: ['experiments.view'],
-      anyPermissions: ['experiments.edit'],
-    })).toEqual({
-      visibleFor: 'admin',
-      requiresAdmin: true,
-      permissions: ['users.manage'],
-      anyPermissions: ['plugins.install'],
-    })
-  })
-
-  it('treats an undefined nested field as unset instead of masking the flat one', () => {
-    expect(normalizeAccessPolicy({
-      access: { visibleFor: undefined, requiresAdmin: true },
-      visibleFor: 'user',
-    })).toEqual({
-      visibleFor: 'user',
-      requiresAdmin: true,
-    })
-  })
-
-  it('feeds canAccessByPolicy from the nested policy', () => {
-    const member = { role: 'member', permissions: ['experiments.view'] }
-
-    expect(canAccessByPolicy(member, { access: { requiresAdmin: true }, requiresAdmin: false })).toBe(false)
-    expect(canAccessByPolicy(member, { access: { visibleFor: 'user' }, visibleFor: 'admin' })).toBe(true)
-  })
-})

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

@@ -0,0 +1,69 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { mintPlotlyTemplate } from '../../utils/plotlyTemplate'
+
+const tokens: Record<string, string> = {
+  '--mint-sample-1': '#111111',
+  '--mint-sample-2': '#222222',
+  '--mint-sample-3': '#333333',
+  '--mint-sample-4': '#444444',
+  '--mint-sample-5': '#555555',
+  '--mint-sample-6': '#666666',
+  '--mint-sample-7': '#777777',
+  '--mint-sample-8': '#888888',
+  '--font-sans': 'Fira Sans',
+  '--font-mono': 'Fira Code',
+  '--text-primary': '#1E293B',
+  '--text-secondary': '#64748B',
+  '--border-light': '#F3F4F6',
+  '--border-color': '#E5E7EB',
+  '--bg-card': '#FFFFFF',
+}
+
+describe('mintPlotlyTemplate', () => {
+  beforeEach(() => {
+    for (const [name, value] of Object.entries(tokens)) document.documentElement.style.setProperty(name, value)
+  })
+
+  afterEach(() => {
+    document.documentElement.removeAttribute('style')
+  })
+
+  it('should take the colorway from the eight group tokens when they are defined', () => {
+    expect(mintPlotlyTemplate().layout?.colorway).toEqual(
+      ['#111111', '#222222', '#333333', '#444444', '#555555', '#666666', '#777777', '#888888'],
+    )
+  })
+
+  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' })
+  })
+
+  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' })
+  })
+
+  it('should draw the grid with --border-light when tokens are defined', () => {
+    expect(mintPlotlyTemplate().layout?.xaxis?.gridcolor).toBe('#F3F4F6')
+  })
+
+  it('should draw axis lines with --border-color when tokens are defined', () => {
+    expect(mintPlotlyTemplate().layout?.xaxis?.linecolor).toBe('#E5E7EB')
+  })
+
+  it('should style the hover label as a bordered card when tokens are defined', () => {
+    expect(mintPlotlyTemplate().layout?.hoverlabel).toMatchObject({ bgcolor: '#FFFFFF', bordercolor: '#E5E7EB' })
+  })
+
+  it('should read tokens from the given element when it overrides them', () => {
+    const element = document.createElement('div')
+    element.style.setProperty('--text-primary', '#F8FAFC')
+    document.body.appendChild(element)
+    expect(mintPlotlyTemplate(element).layout?.font?.color).toBe('#F8FAFC')
+    element.remove()
+  })
+
+  it('should fall back to the hex group scale when the group tokens are missing', () => {
+    document.documentElement.removeAttribute('style')
+    expect(mintPlotlyTemplate().layout?.colorway?.[0]).toBe('#3B82F6')
+  })
+})

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

@@ -0,0 +1,54 @@
+import { describe, expect, it } from 'vitest'
+import { sampleTypeMarker } from '../../utils/sampleTypeMarker'
+
+const group = 'var(--mint-sample-2)'
+
+describe('sampleTypeMarker', () => {
+  it('should fill with a tint of the group color when the type is sample', () => {
+    expect(sampleTypeMarker('sample', group).style.background).toBe(
+      'color-mix(in srgb, var(--mint-sample-2) 28%, var(--bg-card))',
+    )
+  })
+
+  it('should outline in the group color when the type is sample', () => {
+    expect(sampleTypeMarker('sample', group).style.border).toBe('1px solid var(--mint-sample-2)')
+  })
+
+  it('should render no glyph when the type is sample', () => {
+    expect(sampleTypeMarker('sample', group).glyph).toBeNull()
+  })
+
+  it('should draw a dashed hollow outline when the type is blank', () => {
+    expect(sampleTypeMarker('blank', group).style.border).toBe('1.5px dashed var(--_control-border-strong)')
+  })
+
+  it('should ignore the group color when the type is blank', () => {
+    expect(sampleTypeMarker('blank', group).style.background).toBe('var(--bg-card)')
+  })
+
+  it('should draw a neutral solid ring when the type is qc', () => {
+    expect(sampleTypeMarker('qc', group).style.border).toBe('1.5px solid var(--text-secondary-strong)')
+  })
+
+  it('should mark with Q when the type is qc', () => {
+    expect(sampleTypeMarker('qc', group).glyph).toBe('Q')
+  })
+
+  it('should keep the group fill when the type is iqc', () => {
+    expect(sampleTypeMarker('iqc', group).style.background).toBe(
+      sampleTypeMarker('sample', group).style.background,
+    )
+  })
+
+  it('should mark with i when the type is iqc', () => {
+    expect(sampleTypeMarker('iqc', group).glyph).toBe('i')
+  })
+
+  it('should match case-insensitively when the type is upper case', () => {
+    expect(sampleTypeMarker('QC', group).glyph).toBe('Q')
+  })
+
+  it('should fall back to the sample marker when the type is unknown', () => {
+    expect(sampleTypeMarker('control', group)).toEqual(sampleTypeMarker('sample', group))
+  })
+})

package/src/components/ActionMenu.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 /** Compact overflow actions with an IconButton trigger and a viewport-safe teleported menu. */
 import { computePosition, flip, offset, shift } from '@floating-ui/dom'
-import { Ellipsis } from 'lucide-vue-next'
+import { Check, Ellipsis } from 'lucide-vue-next'
 import { nextTick, onMounted, ref, watch } from 'vue'
 import { useDropdownState } from '../composables/useDropdownState'
 import { useMenuKeyboard } from '../composables/useMenuKeyboard'
@@ -24,6 +24,11 @@ const emit = defineEmits<{
   close: []
 }>()
 
+defineSlots<{
+  /** Replaces the ellipsis IconButton; `toggle` and `keydown` go on the slotted button. */
+  trigger?: (props: { open: boolean; toggle: () => void; keydown: (event: KeyboardEvent) => void }) => unknown
+}>()
+
 const panelRef = ref<HTMLElement | null>(null)
 const panelStyle = ref<Record<string, string>>({ visibility: 'hidden' })
 
@@ -110,41 +115,49 @@ watch(isOpen, async (opened) => {
 
 <template>
   <span ref="rootRef" class="mint-action-menu">
-    <IconButton
-      variant="secondary"
-      size="sm"
-      :label="label"
-      :disabled="disabled"
-      aria-haspopup="menu"
-      :aria-expanded="isOpen"
-      @click="toggleMenu"
-      @keydown="handleTriggerKeydown"
-    >
-      <Ellipsis
-        class="mint-action-menu__trigger-icon"
-        :size="16"
-        :stroke-width="2"
-        aria-hidden="true"
-      />
-    </IconButton>
+    <!-- A custom trigger must render one <button> and wire toggle + keydown to it. -->
+    <slot name="trigger" :open="isOpen" :toggle="toggleMenu" :keydown="handleTriggerKeydown">
+      <IconButton
+        variant="secondary"
+        size="sm"
+        :label="label"
+        :disabled="disabled"
+        aria-haspopup="menu"
+        :aria-expanded="isOpen"
+        @click="toggleMenu"
+        @keydown="handleTriggerKeydown"
+      >
+        <Ellipsis
+          class="mint-action-menu__trigger-icon"
+          :size="16"
+          :stroke-width="2"
+          aria-hidden="true"
+        />
+      </IconButton>
+    </slot>
   </span>
 
   <Teleport to="body">
     <div
       v-if="isOpen"
       ref="panelRef"
-      class="mint-action-menu__panel"
+      class="mint-popover mint-action-menu__panel"
       :style="panelStyle"
       role="menu"
       @keydown="handlePanelKeydown"
     >
-      <template v-for="item in items" :key="item.id">
+      <template v-for="(item, index) in items" :key="item.id">
+        <div
+          v-if="item.danger && index > 0 && !items[index - 1].danger"
+          class="mint-menu-separator"
+          role="separator"
+        />
         <a
           v-if="item.href !== undefined && !item.disabled"
           :href="item.href"
           :target="item.target"
           :rel="item.target === '_blank' ? 'noopener noreferrer' : undefined"
-          :class="['mint-action-menu__item', { 'mint-action-menu__item--danger': item.danger }]"
+          :class="['mint-menu-item mint-action-menu__item', { 'mint-menu-item--danger mint-action-menu__item--danger': item.danger }]"
           role="menuitem"
           @click="handleSelect(item)"
         >
@@ -153,11 +166,19 @@ watch(isOpen, async (opened) => {
         <button
           v-else
           type="button"
-          :class="['mint-action-menu__item', { 'mint-action-menu__item--danger': item.danger }]"
-          role="menuitem"
+          :class="['mint-menu-item mint-action-menu__item', { 'mint-menu-item--danger mint-action-menu__item--danger': item.danger }]"
+          :role="item.checked === undefined ? 'menuitem' : 'menuitemradio'"
+          :aria-checked="item.checked"
           :disabled="item.disabled"
           @click="handleSelect(item)"
         >
+          <Check
+            v-if="item.checked !== undefined"
+            class="mint-action-menu__check"
+            :class="{ 'mint-action-menu__check--off': !item.checked }"
+            :size="14"
+            aria-hidden="true"
+          />
           {{ item.label }}
         </button>
       </template>

package/src/components/AdductText.story.vue

@@ -11,5 +11,23 @@ import AdductText from './AdductText.vue'
         <AdductText />
       </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;">
+          <AdductText value="[M+2H]2+" size="inherit" tone="default" />
+          <AdductText value="[M-H]-" size="inherit" tone="muted" />
+          <AdductText value="[M+NH4]+" size="inherit" variant="badge" />
+        </div>
+        <div style="display: flex; align-items: center; gap: 1rem; padding: 0.75rem; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-card);">
+          <AdductText value="[M+H]+" tone="on-primary" size="inherit" />
+          <AdductText value="[M+Na]+" tone="on-primary" variant="badge" size="inherit" />
+          <span style="display: inline-flex; gap: 0.5rem; padding: 0.25rem 0.625rem; border-radius: var(--radius); background: var(--color-primary); color: white;">
+            <AdductText value="[M+H]+" tone="on-primary" size="inherit" />
+            <AdductText value="[M+K]+" tone="on-primary" variant="badge" size="inherit" />
+          </span>
+        </div>
+      </div>
+    </Variant>
   </Story>
 </template>

package/src/components/AdductText.vue

@@ -21,6 +21,11 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const value = computed(() => props.value?.trim() ?? '')
+// `[M+2H]2+` → base `[M+2H]`, charge `2+`; anything unbracketed stays one run.
+const parts = computed(() => {
+  const match = /^(.*\])(\d*[+\-−]+\d*)$/.exec(value.value)
+  return match ? { base: match[1], charge: match[2] } : { base: value.value, charge: '' }
+})
 </script>
 
 <template>
@@ -35,6 +40,7 @@ const value = computed(() => props.value?.trim() ?? '')
     ]"
     :title="value || undefined"
   >
-    {{ value || emptyText }}
+    <template v-if="value">{{ parts.base }}<sup v-if="parts.charge" class="mint-adduct-text__charge">{{ parts.charge }}</sup></template>
+    <template v-else>{{ emptyText }}</template>
   </span>
 </template>

package/src/components/AlertBox.vue

@@ -2,6 +2,7 @@
 /** Inline alert banner with semantic icon, title, message slot, optional action button, and optional dismiss button. */
 import { useSlots } from 'vue'
 import type { AlertType } from '../types'
+import BaseButton from './BaseButton.vue'
 
 interface Props {
   type?: AlertType
@@ -58,14 +59,9 @@ const hasActions = () => !!props.actionLabel || !!slots.actions
 
     <div v-if="hasActions()" class="mint-alert__actions">
       <slot name="actions">
-        <button
-          type="button"
-          class="mint-alert__action-btn"
-          :class="`mint-alert__action-btn--${props.type}`"
-          @click="emit('action')"
-        >
+        <BaseButton variant="secondary" size="sm" @click="emit('action')">
           {{ props.actionLabel }}
-        </button>
+        </BaseButton>
       </slot>
     </div>
 

package/src/components/AppAvatarMenu.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 /** Avatar-triggered dropdown with user name/email header, configurable menu items, dividers, and a sign-out action. */
-import { computed, ref } from 'vue'
+import { computed, ref, useTemplateRef } from 'vue'
 import { useDropdownState } from '../composables/useDropdownState'
 import { useMenuKeyboard } from '../composables/useMenuKeyboard'
 import type { AccountMenuItem } from '../types/components'
@@ -28,7 +28,9 @@ const emit = defineEmits<{
   'menu-close': []
 }>()
 
-const { isOpen, rootRef, triggerRef, open, close, toggle } = useDropdownState({
+const { isOpen, open, close, toggle } = useDropdownState({
+  rootRef: useTemplateRef<HTMLElement>('root'),
+  triggerRef: useTemplateRef<HTMLElement>('trigger'),
   onOpen: () => emit('menu-open'),
   onClose: () => emit('menu-close'),
 })
@@ -77,9 +79,9 @@ function handleSignOut() {
 </script>
 
 <template>
-  <div ref="rootRef" class="mint-avatar-menu">
+  <div ref="root" class="mint-avatar-menu">
     <button
-      ref="triggerRef"
+      ref="trigger"
       type="button"
       class="mint-avatar-menu__trigger"
       :class="{ 'mint-avatar-menu__trigger--open': isOpen }"
@@ -100,7 +102,7 @@ function handleSignOut() {
     <div
       v-if="isOpen"
       ref="panelRef"
-      class="mint-avatar-menu__panel"
+      class="mint-popover mint-avatar-menu__panel"
       role="menu"
       @keydown="handlePanelKeydown"
     >
@@ -111,12 +113,12 @@ function handleSignOut() {
 
       <slot name="items" :close="closeSilently">
         <template v-for="item in items" :key="item.id">
-          <div v-if="item.divider" class="mint-avatar-menu__divider" role="separator" />
+          <div v-if="item.divider" class="mint-menu-separator mint-avatar-menu__divider" role="separator" />
           <ActionItemInternal
             v-else
             :href="item.href"
             :to="item.to"
-            :class="['mint-avatar-menu__item', { 'mint-avatar-menu__item--danger': item.danger }]"
+            :class="['mint-menu-item mint-avatar-menu__item', { 'mint-menu-item--danger mint-avatar-menu__item--danger': item.danger }]"
             role="menuitem"
             @click="handleSelect(item)"
           >
@@ -124,16 +126,16 @@ function handleSignOut() {
               <slot name="item-icon" :item="item" />
             </span>
             <span class="mint-avatar-menu__item-label">{{ item.label }}</span>
-            <span v-if="item.rightLabel" class="mint-avatar-menu__item-right">{{ item.rightLabel }}</span>
+            <span v-if="item.rightLabel" class="mint-menu-item__meta mint-avatar-menu__item-right">{{ item.rightLabel }}</span>
           </ActionItemInternal>
         </template>
       </slot>
 
       <template v-if="showSignOut">
-        <div class="mint-avatar-menu__divider" role="separator" />
+        <div class="mint-menu-separator mint-avatar-menu__divider" role="separator" />
         <button
           type="button"
-          class="mint-avatar-menu__item mint-avatar-menu__item--danger"
+          class="mint-menu-item mint-menu-item--danger mint-avatar-menu__item mint-avatar-menu__item--danger"
           role="menuitem"
           @click="handleSignOut"
         >

package/src/components/AppSidebar.vue

@@ -46,7 +46,7 @@ interface Props {
   floating?: boolean
   /** Section density. `compact` (default) is the 36px header row; `comfortable` restores the roomier spacing. */
   density?: 'compact' | 'comfortable'
-  /** @deprecated Compact is now the default. Pass `density="comfortable"` for the roomier layout. */
+  /** @deprecated Compact is now the default; removed in MINT 1.4. Pass `density="comfortable"` for the roomier layout. */
   dense?: boolean
   /** Width when visible. */
   width?: string

package/src/components/AppTopBar.story.vue

@@ -6,6 +6,7 @@ import type {
   PillNavItem,
   PageSelectorItem,
   AccountMenuItem,
+  PluginInfo,
 } from '../types'
 
 const variants: TopBarVariant[] = ['card', 'default']
@@ -17,6 +18,20 @@ const samplePillNav: PillNavItem[] = [
   { id: 'admin', label: 'Admin' },
 ]
 
+// Records dropdown labels itself with the active child; Instruments carries an alert dot.
+const platformPillNav: PillNavItem[] = [
+  { id: 'home', label: 'Home' },
+  {
+    id: 'records',
+    label: 'Experiments',
+    children: [
+      { id: 'experiments', label: 'Experiments' },
+      { id: 'projects', label: 'Projects' },
+    ],
+  },
+  { id: 'instruments', label: 'Instruments', dot: true },
+]
+
 const samplePageSelector: PageSelectorItem[] = [
   { id: 'workspace', label: 'Workspace' },
   { id: 'experiments', label: 'Experiments' },
@@ -27,6 +42,22 @@ const samplePageSelector: PageSelectorItem[] = [
 
 // Theme is now surfaced as a top-level icon button (show-theme-toggle),
 // not as an account-menu item. Menu holds identity-level actions only.
+const samplePluginPages: PageSelectorItem[] = [
+  { id: 'peaks', label: 'Peak integration' },
+  { id: 'calibration', label: 'Calibration' },
+  { id: 'report', label: 'Report' },
+]
+
+const samplePlugin: PluginInfo = {
+  id: 'lcms-analysis',
+  name: 'LC-MS Analysis',
+  version: '2.4.0',
+  icon: 'activity',
+  color: 'cyan',
+  route_prefix: '/lcms',
+  api_prefix: '/api/lcms',
+}
+
 const sampleAccountMenu: AccountMenuItem[] = [
   { id: 'profile', label: 'Profile' },
   { id: 'settings', label: 'Settings' },
@@ -77,7 +108,7 @@ const sampleAccountMenu: AccountMenuItem[] = [
     </Variant>
 
     <Variant title="Refresh · Workspace">
-      <div style="padding: 2rem; background: var(--bg-primary); min-height: 12rem;">
+      <div style="padding: 2rem; background: var(--bg-primary); min-height: 22rem;">
         <AppTopBar
           :page-selector="samplePageSelector"
           current-page-selector-id="workspace"
@@ -119,10 +150,10 @@ const sampleAccountMenu: AccountMenuItem[] = [
 
     <Variant title="Refresh · Inside plugin">
       <div style="padding: 2rem; background: var(--bg-primary); min-height: 12rem;">
-        <ExperimentProvider>
+        <ExperimentProvider :plugin="samplePlugin">
           <AppTopBar
-            :page-selector="samplePageSelector"
-            current-page-selector-id="plugins"
+            :page-selector="samplePluginPages"
+            current-page-selector-id="peaks"
             :pill-nav="samplePillNav"
             current-pill-id="experiments"
             show-theme-toggle
@@ -258,6 +289,18 @@ const sampleAccountMenu: AccountMenuItem[] = [
       </div>
     </Variant>
 
+    <Variant title="Navigation · Pill nav with dropdown and dot">
+      <div style="padding: 2rem;">
+        <AppTopBar
+          title="Projects"
+          :pill-nav="platformPillNav"
+          current-pill-id="projects"
+          variant="card"
+          home-path=""
+        />
+      </div>
+    </Variant>
+
     <Variant title="Base · Minimal (logo only)">
       <div style="padding: 2rem;">
         <AppTopBar :show-logo="true" home-path="/" />