@morscherlab/mint-sdk 1.2.0 → 1.2.1

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

@@ -45,6 +45,24 @@ describe('GeneratedPathInput', () => {
     })
   })
 
+  it('restores existing selections and keeps the visible files synchronized with the model', async () => {
+    const file = new File(['a'], 'a.txt')
+    const wrapper = mount(GeneratedPathInput, {
+      props: { modelValue: { kind: 'path', files: [file], relativePaths: ['a.txt'] } },
+      global: { plugins: [createPinia()], stubs: { Teleport: true } },
+    })
+    expect(wrapper.find('button[aria-label="Remove a.txt"]').exists()).toBe(true)
+    await wrapper.setProps({
+      modelValue: { kind: 'path', files: [file], rootName: 'dataset', relativePaths: ['dataset/a.txt'] },
+    })
+    expect(wrapper.findComponent(FileUploader).props('mode')).toBe('folder')
+    expect(wrapper.text()).toContain('dataset')
+    await wrapper.get('button[aria-label="Clear folder"]').trigger('click')
+    expect(wrapper.emitted('update:modelValue')?.at(-1)?.[0]).toBeNull()
+    await wrapper.setProps({ modelValue: null })
+    expect(wrapper.find('button[aria-label="Clear folder"]').exists()).toBe(false)
+  })
+
   it('should emit one path selection per file when multiple paths are requested', async () => {
     const wrapper = mount(GeneratedPathInput, {
       props: { multiple: true },

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

@@ -0,0 +1,105 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import NumberInput from '../../components/NumberInput.vue'
+
+function lastEmitted(wrapper: ReturnType<typeof mount>) {
+  return wrapper.emitted('update:modelValue')?.at(-1)?.[0]
+}
+
+describe('NumberInput', () => {
+  it('should never render a range input, with or without min/max', () => {
+    for (const props of [{}, { min: 0 }, { max: 10 }, { min: 0, max: 10 }]) {
+      const wrapper = mount(NumberInput, { props: { modelValue: 5, ...props } })
+      expect(wrapper.find('input[type="range"]').exists()).toBe(false)
+    }
+  })
+
+  it('should draw the range fill only when both min and max are set', () => {
+    expect(mount(NumberInput, { props: { modelValue: 5, min: 0 } }).find('.mint-number-input__rule').exists()).toBe(false)
+    const wrapper = mount(NumberInput, { props: { modelValue: 5, min: 0, max: 10 } })
+    expect(wrapper.find('.mint-number-input__rule').exists()).toBe(true)
+    expect(wrapper.find('.mint-number-input__scrub').attributes('style')).toContain('--mint-number-input-fill: 50%')
+  })
+
+  it('should expose the scrub area as a slider when min and max are set', () => {
+    const scrub = mount(NumberInput, { props: { modelValue: 5, min: 0, max: 10 } }).find('.mint-number-input__scrub')
+    expect(scrub.attributes('role')).toBe('slider')
+    expect(scrub.attributes('aria-valuenow')).toBe('5')
+    expect(scrub.attributes('tabindex')).toBe('0')
+  })
+
+  it('should always render both steppers', () => {
+    const wrapper = mount(NumberInput, { props: { modelValue: 5 } })
+    expect(wrapper.findAll('.mint-number-input__stepper')).toHaveLength(2)
+  })
+
+  it('should disable the steppers at min and max', () => {
+    const atMin = mount(NumberInput, { props: { modelValue: 0, min: 0, max: 10 } })
+    expect(atMin.find('.mint-number-input__stepper--down').attributes('disabled')).toBeDefined()
+    const atMax = mount(NumberInput, { props: { modelValue: 10, min: 0, max: 10 } })
+    expect(atMax.find('.mint-number-input__stepper--up').attributes('disabled')).toBeDefined()
+  })
+
+  it('should emit the step-snapped value when dragging at 25% of the scrub width', async () => {
+    const wrapper = mount(NumberInput, { props: { modelValue: 0, min: 0, max: 50, step: 0.5 } })
+    const scrub = wrapper.find('.mint-number-input__scrub')
+    scrub.element.getBoundingClientRect = () => ({ left: 100, width: 200 } as DOMRect)
+    await scrub.trigger('pointerdown', { clientX: 150, pointerId: 1 })
+    expect(lastEmitted(wrapper)).toBe(12.5)
+  })
+
+  it('should not scrub when the pointer goes down on the input itself', async () => {
+    const wrapper = mount(NumberInput, { props: { modelValue: 0, min: 0, max: 50 } })
+    await wrapper.find('input').trigger('pointerdown', { clientX: 150, pointerId: 1 })
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+  })
+
+  it('should step with the arrow keys', async () => {
+    const wrapper = mount(NumberInput, { props: { modelValue: 5, step: 2 } })
+    await wrapper.find('input').trigger('keydown', { key: 'ArrowUp' })
+    expect(lastEmitted(wrapper)).toBe(7)
+    await wrapper.find('input').trigger('keydown', { key: 'ArrowDown' })
+    expect(lastEmitted(wrapper)).toBe(3)
+  })
+
+  it('should step by ten steps with PageUp and PageDown', async () => {
+    const wrapper = mount(NumberInput, { props: { modelValue: 50, step: 1, min: 0, max: 100 } })
+    await wrapper.find('input').trigger('keydown', { key: 'PageUp' })
+    expect(lastEmitted(wrapper)).toBe(60)
+    await wrapper.find('input').trigger('keydown', { key: 'PageDown' })
+    expect(lastEmitted(wrapper)).toBe(40)
+  })
+
+  it('should jump to min and max with Home and End on the slider surface', async () => {
+    const wrapper = mount(NumberInput, { props: { modelValue: 5, min: 0, max: 10 } })
+    const scrub = wrapper.find('.mint-number-input__scrub')
+    await scrub.trigger('keydown', { key: 'Home' })
+    expect(lastEmitted(wrapper)).toBe(0)
+    await scrub.trigger('keydown', { key: 'End' })
+    expect(lastEmitted(wrapper)).toBe(10)
+  })
+
+  it('should leave Home and End to the caret inside the text input', async () => {
+    const wrapper = mount(NumberInput, { props: { modelValue: 5, min: 0, max: 10 } })
+    await wrapper.find('input').trigger('keydown', { key: 'Home' })
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+  })
+
+  it('should emit once per arrow press in slider mode', async () => {
+    const wrapper = mount(NumberInput, { props: { modelValue: 5, min: 0, max: 10 } })
+    await wrapper.find('input').trigger('keydown', { key: 'ArrowUp' })
+    expect(wrapper.emitted('update:modelValue')).toHaveLength(1)
+  })
+
+  it('should keep a fractional value precision when stepping by an integer', async () => {
+    const wrapper = mount(NumberInput, { props: { modelValue: 2.5, step: 1 } })
+    await wrapper.find('input').trigger('keydown', { key: 'ArrowUp' })
+    expect(lastEmitted(wrapper)).toBe(3.5)
+  })
+
+  it('should trim float noise when stepping by a decimal', async () => {
+    const wrapper = mount(NumberInput, { props: { modelValue: 0.1, step: 0.2 } })
+    await wrapper.find('input').trigger('keydown', { key: 'ArrowUp' })
+    expect(lastEmitted(wrapper)).toBe(0.3)
+  })
+})

package/src/__tests__/components/PluginWorkspaceView.internal.test.ts

@@ -114,9 +114,8 @@ describe('PluginWorkspaceView internal split', () => {
       activeView: 'data',
       title: 'Tools',
       subtitle: 'Current file',
-      variant: 'analysis',
       floating: false,
-      dense: true,
+      density: 'compact',
     })
     expect(wrapper.get('[data-test="topbar-action"]').text()).toBe('Run')
     expect(wrapper.get('[data-test="import-action"]').text()).toBe('Upload')

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

@@ -182,9 +182,8 @@ describe('PluginWorkspaceView', () => {
       activeView: 'data',
       title: 'Tools',
       subtitle: 'Current file',
-      variant: 'analysis',
       floating: false,
-      dense: true,
+      density: 'compact',
     })
     expect(wrapper.get('[data-test="topbar-action"]').text()).toBe('Run')
     expect(wrapper.get('[data-test="import-action"]').text()).toBe('Upload')

package/src/__tests__/composables/localFiles.test.ts

@@ -0,0 +1,57 @@
+import { describe, expect, it, vi } from 'vitest'
+import { localFilesAdapter } from '../../composables/filePicker/localFiles'
+
+describe('localFilesAdapter', () => {
+  it('preserves order, duplicate files, nested statistics and scoped search', async () => {
+    const files = [
+      new File(['abc'], 'run.raw'),
+      new File(['12'], 'run.raw'),
+      new File(['1234'], 'sample.mzML.gz'),
+      new File(['x'], 'other.raw'),
+    ]
+    const adapter = localFilesAdapter(files, [
+      'study/batch/run.raw', 'study/batch/run.raw', 'study/sample.mzML.gz', 'study2/other.raw',
+    ])
+    expect(await adapter.listRoot()).toMatchObject([
+      { path: 'study', fileCount: 3, bytes: 9, formats: { raw: 2, 'mzML.gz': 1 } },
+      { path: 'study2', fileCount: 1, bytes: 1, formats: { raw: 1 } },
+    ])
+    expect(await adapter.listChildren('study')).toMatchObject([
+      { path: 'study/batch', fileCount: 2, bytes: 5, formats: { raw: 2 } },
+      { path: 'study/sample.mzML.gz', file: files[2] },
+    ])
+    expect(await adapter.listChildren('study/batch')).toMatchObject([
+      { path: 'study/batch/run.raw', file: files[0] },
+      { path: 'study/batch/run.raw (2)', file: files[1] },
+    ])
+    expect(await adapter.search('RUN', { path: 'study', recursive: true })).toHaveLength(2)
+    expect(await adapter.search('RUN', { path: 'study', recursive: false })).toEqual([])
+    expect(await adapter.listChildren('missing')).toEqual([])
+    const roots = await adapter.listRoot()
+    roots.pop()
+    expect(await adapter.listRoot()).toHaveLength(2)
+  })
+
+  it('builds and lists many sibling folders without repeatedly scanning all nodes', async () => {
+    const files = Array.from({ length: 200 }, (_, i) => new File(['x'], `${i}.raw`))
+    const paths = files.map((file, i) => `folder-${i}/${file.name}`)
+    const originalValues = Map.prototype.values
+    let visited = 0
+    const values = vi.spyOn(Map.prototype, 'values').mockImplementation(function* (this: Map<unknown, unknown>) {
+      for (const value of originalValues.call(this)) {
+        visited++
+        yield value
+      }
+    } as typeof Map.prototype.values)
+    try {
+      const adapter = localFilesAdapter(files, paths)
+      await adapter.listRoot()
+      for (let i = 0; i < files.length; i++) {
+        expect(await adapter.listChildren(`folder-${i}`)).toHaveLength(1)
+      }
+      expect(visited).toBeLessThanOrEqual(files.length * 8)
+    } finally {
+      values.mockRestore()
+    }
+  })
+})

package/src/__tests__/composables/usePickerSelection.test.ts

@@ -0,0 +1,98 @@
+import { afterEach, describe, expect, it } from 'vitest'
+import { effectScope, ref, type EffectScope } from 'vue'
+import { usePickerNavigation } from '../../composables/filePicker/usePickerNavigation'
+import { usePickerSelection } from '../../composables/filePicker/usePickerSelection'
+import type { PickerCapability, PickerNode, PickerSelectionMode } from '../../types/filePicker'
+
+const scopes: EffectScope[] = []
+afterEach(() => scopes.splice(0).forEach(scope => scope.stop()))
+
+function setup(nodes: PickerNode[]) {
+  const scope = effectScope()
+  scopes.push(scope)
+  return scope.run(() => {
+    const capability = ref<PickerCapability>({ formats: ['raw'] })
+    const hidden = ref('')
+    const mode = ref<PickerSelectionMode>('folder+files')
+    const nav = usePickerNavigation(() => ({
+      listRoot: async () => [], listChildren: async () => [], search: async () => [],
+    }), () => ({}), node => node.path !== hidden.value)
+    nav.register(nodes)
+    const selection = usePickerSelection(nav, () => mode.value, () => capability.value, () => false)
+    const progress = (path: string) => selection.folderProgress(nav.nodes.value.get(path)!)
+    return { nav, selection, capability, hidden, mode, progress }
+  })!
+}
+
+describe('file picker folder progress', () => {
+  it('tracks exclusions, selection modes, replaced paths and changing ancestors', () => {
+    const { nav, selection, capability, hidden, mode, progress } = setup([
+      { kind: 'folder', path: 'root', name: 'root', fileCount: 2 },
+      { kind: 'folder', path: 'a', name: 'a', parentPath: 'root', fileCount: 2 },
+      { kind: 'folder', path: 'b', name: 'b', parentPath: 'root', fileCount: 0 },
+      { kind: 'file', path: 'f', name: 'f.raw', format: 'raw', parentPath: 'a' },
+      { kind: 'file', path: 'g', name: 'g.txt', format: 'txt', parentPath: 'a' },
+    ])
+    selection.keys.value.add('root')
+    expect(progress('root')).toBe('1 / 2')
+    expect(progress('a')).toBe('1 / 2')
+    expect(progress('b')).toBe('0 / 0')
+    selection.dropped.value.add('a')
+    expect(progress('root')).toBe('0 / 2')
+    expect(progress('a')).toBe('0 / 2')
+    selection.dropped.value.clear()
+    capability.value.formats.push('txt')
+    expect(progress('a')).toBe('2 / 2')
+    nav.register([{ kind: 'file', path: 'f', name: 'f.raw', format: 'raw', parentPath: 'b' }])
+    expect(progress('a')).toBe('1 / 2')
+    expect(progress('b')).toBe('1 / 0')
+    expect(progress('root')).toBe('2 / 2')
+    nav.nodes.value.get('b')!.parentPath = null
+    expect(progress('root')).toBe('1 / 2')
+    selection.keys.value.add('b')
+    expect(progress('b')).toBe('1 / 0')
+    hidden.value = 'b'
+    expect(progress('b')).toBe('0 / 0')
+    mode.value = 'folder'
+    expect(progress('a')).toBe('0 / 2')
+    expect(progress('root')).toBe('1 / 2')
+    nav.nodes.value.delete('g')
+    expect(progress('root')).toBe('0 / 2')
+    expect(selection.folderProgress({ kind: 'folder', path: 'unknown', name: 'unknown' })).toBe('')
+    expect(selection.folderProgress(nav.nodes.value.get('f')!)).toBe('')
+  })
+
+  it('counts each file once for cyclic or missing ancestors', () => {
+    const { nav, selection, progress } = setup([
+      { kind: 'folder', path: 'a', name: 'a', parentPath: 'b', fileCount: 1 },
+      { kind: 'folder', path: 'b', name: 'b', parentPath: 'a', fileCount: 1 },
+      { kind: 'file', path: 'f', name: 'f.raw', format: 'raw', parentPath: 'a' },
+    ])
+    selection.keys.value.add('a')
+    expect(progress('a')).toBe('1 / 1')
+    expect(progress('b')).toBe('1 / 1')
+    nav.nodes.value.delete('a')
+    expect(selection.folderProgress({ kind: 'folder', path: 'a', name: 'a', fileCount: 1 })).toBe('1 / 1')
+    expect(progress('b')).toBe('0 / 1')
+  })
+
+  it('does not rescan every selected file for each folder row', () => {
+    const count = 200
+    const { nav, selection, progress } = setup([
+      { kind: 'folder', path: 'root', name: 'root', fileCount: count },
+    ])
+    let parentReads = 0
+    for (let i = 0; i < count; i++) {
+      nav.register([{ kind: 'folder', path: `d${i}`, name: `d${i}`, parentPath: 'root', fileCount: 1 }])
+      nav.nodes.value.set(`f${i}`, {
+        kind: 'file', path: `f${i}`, name: `${i}.raw`, format: 'raw',
+        get parentPath() { parentReads++; return `d${i}` },
+      })
+    }
+    selection.keys.value.add('root')
+    expect(selection.chosen.value.files).toHaveLength(count)
+    parentReads = 0
+    for (let i = 0; i < count; i++) expect(progress(`d${i}`)).toBe('1 / 1')
+    expect(parentReads).toBeLessThanOrEqual(count * 2)
+  })
+})

package/src/__tests__/generatedUi.test.ts

@@ -6,6 +6,8 @@ import {
   normalizeGeneratedJobInput,
 } from '../generated/schema'
 import type { GeneratedJobDefinition } from '../types/generated-ui'
+import { validateFieldValue } from '../composables/useFormValidation'
+import { buildRules } from '../composables/formBuilderSchema'
 
 const definition: GeneratedJobDefinition = {
   id: 'summarize',
@@ -30,6 +32,115 @@ const definition: GeneratedJobDefinition = {
 }
 
 describe('generated UI schema adapter', () => {
+  it('allows present empty strings, arrays, nullable values and false', () => {
+    const requiredDefinition: GeneratedJobDefinition = {
+      ...definition,
+      input_schema: {
+        properties: {
+          nullable: { anyOf: [{ type: 'string' }, { type: 'null' }] },
+          text: { type: 'string' },
+          labels: { type: 'array', items: { type: 'string' } },
+          enabled: { type: 'boolean' },
+          nonempty: { type: 'string', minLength: 1 },
+        },
+        required: ['nullable', 'text', 'labels', 'enabled', 'nonempty'],
+      },
+    }
+    const fields = generatedJobFormSchema(requiredDefinition).sections[0]!.fields
+    const rules = buildRules(fields)
+    const values = { nullable: null, text: '', labels: [], enabled: false, nonempty: 'valid' }
+    expect(fields.map(field => validateFieldValue(values[field.name as keyof typeof values], rules[field.name], values)))
+      .toEqual([null, null, null, null, null])
+    expect(generatedJobDefaults(requiredDefinition)).toEqual({ nullable: null })
+    expect(validateFieldValue('', rules.nonempty, {})).not.toBeNull()
+    expect(normalizeGeneratedJobInput(requiredDefinition, values)).toEqual(values)
+  })
+
+  it('supplies fixed literal values and resolves array enums and numeric items', () => {
+    const arrayDefinition: GeneratedJobDefinition = {
+      ...definition,
+      input_schema: {
+        $defs: { Choice: { type: 'integer', enum: [1, 2] } },
+        properties: {
+          kind: { type: 'string', const: 'fixed' },
+          choices: { type: 'array', items: { $ref: '#/$defs/Choice' } },
+          counts: { type: 'array', items: { type: 'integer' } },
+          scales: { type: 'array', items: { type: 'number' } },
+          labels: { type: 'array', items: { type: 'string' } },
+          flags: { type: 'array', items: { type: 'boolean' } },
+        },
+      },
+    }
+    expect(generatedJobDefaults(arrayDefinition)).toEqual({ kind: 'fixed' })
+    expect(generatedJobFormSchema(arrayDefinition).sections[0]!.fields).toMatchObject([
+      { name: 'kind', defaultValue: 'fixed', disabled: true },
+      { name: 'choices', type: 'multiselect', props: { options: [1, 2] } },
+      { name: 'counts', type: 'tags' },
+      { name: 'scales', type: 'tags' },
+      { name: 'labels', type: 'tags', props: { allowDuplicates: true } },
+      { name: 'flags', type: 'tags' },
+    ])
+    expect(normalizeGeneratedJobInput(arrayDefinition, {
+      counts: ['1', '2'], scales: ['0.5', '1.5'], choices: [1, 2], labels: ['1', '1'],
+    })).toEqual({ counts: [1, 2], scales: [0.5, 1.5], choices: [1, 2], labels: ['1', '1'] })
+    expect(normalizeGeneratedJobInput(arrayDefinition, { counts: ['bad', '1.5'] }))
+      .toEqual({ counts: ['bad', 1.5] })
+    expect(normalizeGeneratedJobInput(arrayDefinition, { flags: ['true', 'false', true, 'bad'] }))
+      .toEqual({ flags: [true, false, true, 'bad'] })
+  })
+
+  it('applies integer bounds and numeric steps to the existing controls', () => {
+    const boundedDefinition: GeneratedJobDefinition = {
+      ...definition,
+      input_schema: { properties: {
+        count: { type: 'integer', exclusiveMinimum: 0, exclusiveMaximum: 10, multipleOf: 2 },
+        fraction: { type: 'number', minimum: 0, maximum: 1, multipleOf: 0.1 },
+      } },
+    }
+    const fields = generatedJobFormSchema(boundedDefinition).sections[0]!.fields
+    const rules = buildRules(fields)
+    expect(fields).toMatchObject([
+      { validation: { min: 2, max: 8 }, props: { min: 2, max: 8, step: 2 } },
+      { validation: { min: 0, max: 1 }, props: { min: 0, max: 1, step: 0.1 } },
+    ])
+    expect(validateFieldValue(0, rules.count, {})).not.toBeNull()
+    expect(validateFieldValue(10, rules.count, {})).not.toBeNull()
+  })
+
+  it('preserves field labels and hints outside nullable schemas and enum references', () => {
+    const annotatedDefinition: GeneratedJobDefinition = {
+      ...definition,
+      input_schema: {
+        type: 'object',
+        $defs: { Method: { type: 'string', enum: ['fast', 'robust'], title: 'Method' } },
+        properties: {
+          count: {
+            anyOf: [{ type: 'integer', minimum: 1 }, { type: 'null' }],
+            title: 'Optional sample count',
+            description: 'Leave empty to use all samples',
+            default: null,
+          },
+          method: {
+            $ref: '#/$defs/Method',
+            title: 'Analysis method',
+            description: 'Choose the analysis method',
+          },
+        },
+      },
+    }
+
+    expect(generatedJobFormSchema(annotatedDefinition).sections[0]?.fields).toMatchObject([
+      {
+        name: 'count', type: 'number', label: 'Optional sample count',
+        hint: 'Leave empty to use all samples', defaultValue: null, validation: { min: 1 },
+      },
+      {
+        name: 'method', type: 'select', label: 'Analysis method',
+        hint: 'Choose the analysis method', props: { options: ['fast', 'robust'] },
+      },
+    ])
+  })
+
   it('maps the supported JSON Schema subset to standard FormBuilder fields', () => {
     expect(generatedJobFormSchema(definition).sections[0]?.fields).toMatchObject([
       { name: 'threshold', type: 'number', validation: { required: true, min: 0, max: 10 } },

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

@@ -0,0 +1,16 @@
+import { readFileSync } from 'node:fs'
+import { dirname, join, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { describe, expect, it } from 'vitest'
+
+const here = dirname(fileURLToPath(import.meta.url))
+const componentsDir = resolve(here, '../../styles/components')
+
+// Every color in these sheets must resolve from a token so dark mode remaps it.
+const TOKEN_ONLY = ['pill.css', 'tabs.css', 'segmented-control.css', 'toast.css']
+
+describe('token-only component stylesheets', () => {
+  it.each(TOKEN_ONLY)('%s has no rgba() literal', (file) => {
+    expect(readFileSync(join(componentsDir, file), 'utf-8')).not.toMatch(/rgba?\(/)
+  })
+})

package/src/components/AppLayout.story.vue

@@ -229,7 +229,7 @@ const logScale = ref(false)
           </template>
           <template #sidebar>
             <AppSidebar
-              variant="analysis"
+              :floating="false"
               title="Feature Filters"
               subtitle="12 active samples"
               :badge="2"

package/src/components/AppSidebar.story.vue

@@ -16,7 +16,7 @@ import { useBioTemplateWorkspace } from '../composables/useBioTemplateWorkspace'
 import { createWellPlateScreenCollection } from '../templates'
 import type { SidebarToolSection } from '../types'
 
-type SidebarVariant = 'analysis' | 'default'
+type SidebarDensity = 'compact' | 'comfortable'
 
 /* --- Icon paths (Lucide-style) --- */
 const icons = {
@@ -256,7 +256,7 @@ function handleToggle(id: string, value: boolean) {
 function initSimpleToolkit() {
   return {
     activeView: 'analysis',
-    variant: 'analysis' as SidebarVariant,
+    density: 'compact' as SidebarDensity,
     floating: false,
     width: '20rem',
     side: 'left' as const,
@@ -351,7 +351,6 @@ function initSimpleToolkit() {
     <Variant title="Schema Driven Controls">
       <div style="padding: 2rem; height: 520px; position: relative; background: var(--bg-primary, #f1f5f9);">
         <AppSidebar
-          variant="analysis"
           title="Peak Picking"
           subtitle="Current experiment"
           :controls="schemaControls"
@@ -365,7 +364,6 @@ function initSimpleToolkit() {
       <div style="padding: 2rem; height: 560px; position: relative; background: var(--bg-primary, #f1f5f9);">
         <AppSidebar
           v-model="modelDrivenValues"
-          variant="analysis"
           title="Peak Picking"
           subtitle="Current experiment"
           :model="modelDrivenSidebarModel"
@@ -376,7 +374,6 @@ function initSimpleToolkit() {
     <Variant title="Route Owned Shell">
       <div style="padding: 2rem; height: 560px; display: flex; gap: 1rem; background: var(--bg-primary, #f1f5f9);">
         <AppSidebar
-          variant="analysis"
           title="Sequence"
           subtitle="Acquisition run"
           content-id="seqgen-sidebar"
@@ -466,7 +463,7 @@ function initSimpleToolkit() {
           </div>
           <AppSidebar
             :panels="simplePanels"
-            :variant="state.variant"
+            :density="state.density"
             :active-view="state.activeView"
             :floating="state.floating"
             :width="state.width"
@@ -531,11 +528,11 @@ function initSimpleToolkit() {
           :options="['analysis', 'results', 'settings'].map(v => ({ label: v, value: v }))"
         />
         <HstSelect
-          v-model="state.variant"
-          title="Variant"
+          v-model="state.density"
+          title="Density"
           :options="[
-            { label: 'Analysis', value: 'analysis' },
-            { label: 'Default', value: 'default' },
+            { label: 'Compact', value: 'compact' },
+            { label: 'Comfortable', value: 'comfortable' },
           ]"
         />
         <HstCheckbox v-model="state.floating" title="Floating" />