@morscherlab/mint-sdk 1.2.0 → 1.2.2

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

@@ -4,6 +4,8 @@ import { describe, expect, it } from 'vitest'
 import FormBuilder from '../../components/FormBuilder.vue'
 import FormActions from '../../components/FormActions.vue'
 import Tooltip from '../../components/Tooltip.vue'
+import { generatedJobFormSchema } from '../../generated/schema'
+import type { GeneratedJsonSchema } from '../../types/generated-ui'
 import { defineControlModel, useControlWorkspace, type ControlSchema } from '../../composables/useControlSchema'
 import type { FormSchema } from '../../types/form-builder'
 
@@ -31,6 +33,30 @@ const controls: ControlSchema = {
 }
 
 describe('FormBuilder', () => {
+  it.each([
+    { name: 'nullable tags', items: { type: 'string' }, value: null, component: 'TagsInput', displayed: [], updated: ['1'] },
+    { name: 'nullable enum array', items: { type: 'string', enum: ['a', 'b'] }, value: null, component: 'MultiSelect', displayed: [], updated: ['1'] },
+    { name: 'numeric tags', items: { type: 'number' }, value: [1, 2], component: 'TagsInput', displayed: ['1', '2'], updated: [1] },
+  ])('renders $name without changing its submitted default', async ({ items, value, component, displayed, updated }) => {
+    const field: GeneratedJsonSchema = {
+      anyOf: [{ type: 'array', items }, { type: 'null' }], default: value,
+    }
+    const schema = generatedJobFormSchema({
+      id: 'arrays', title: 'Arrays', description: '', cpu: 1,
+      input_schema: { properties: { values: field } }, output_schema: {},
+    })
+    const wrapper = mount(FormBuilder, { props: { schema } })
+    const control = wrapper.findComponent({ name: component })
+    expect(control.props('modelValue')).toEqual(displayed)
+    wrapper.findComponent(FormActions).vm.$emit('submit')
+    await flushPromises()
+    expect(wrapper.emitted('submit')?.at(-1)?.[0]).toEqual({ values: value })
+
+    control.vm.$emit('update:modelValue', ['1'])
+    await nextTick()
+    expect(wrapper.emitted('update:modelValue')?.at(-1)?.[0]).toEqual({ values: updated })
+  })
+
   it('renders compact controls without a prebuilt FormSchema', () => {
     const wrapper = mount(FormBuilder, {
       props: { controls },

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

@@ -0,0 +1,26 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import FormField from '../../components/FormField.vue'
+
+describe('FormField', () => {
+  it('should stack label above control by default', () => {
+    const wrapper = mount(FormField, {
+      props: { label: 'Threshold' },
+      slots: { default: '<input class="ctl" />' },
+    })
+    expect(wrapper.classes()).not.toContain('mint-form-field--row')
+    expect(wrapper.find('.mint-form-field__control').exists()).toBe(false)
+  })
+
+  it('should wrap the control in a fixed column when layout is row', () => {
+    const wrapper = mount(FormField, {
+      props: { label: 'Threshold', layout: 'row' },
+      slots: { default: '<input class="ctl" />' },
+    })
+    expect(wrapper.classes()).toContain('mint-form-field--row')
+    const children = wrapper.element.children
+    expect(children[0].className).toContain('mint-form-field__label-row')
+    expect(children[1].className).toContain('mint-form-field__control')
+    expect(wrapper.find('.mint-form-field__control .ctl').exists()).toBe(true)
+  })
+})

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/LayoutResizeHandle.test.ts

@@ -0,0 +1,19 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+
+import LayoutResizeHandle from '../../components/LayoutResizeHandle.vue'
+
+describe('LayoutResizeHandle', () => {
+  it('exposes splitter values and supports arrow, Home, and End keys', async () => {
+    const wrapper = mount(LayoutResizeHandle, {
+      props: { modelValue: 320, min: 240, max: 480, step: 20, label: 'Resize sidebar', orientation: 'vertical' },
+    })
+
+    expect(wrapper.attributes('role')).toBe('separator')
+    expect(wrapper.attributes('aria-valuenow')).toBe('320')
+    await wrapper.trigger('keydown', { key: 'ArrowRight' })
+    await wrapper.trigger('keydown', { key: 'Home' })
+    await wrapper.trigger('keydown', { key: 'End' })
+    expect(wrapper.emitted('update:modelValue')?.map(event => event[0])).toEqual([340, 240, 480])
+  })
+})

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

@@ -0,0 +1,149 @@
+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 leave clicks and small pointer movements on the number available for typing', async () => {
+    const wrapper = mount(NumberInput, { props: { modelValue: 0, min: 0, max: 50 } })
+    await wrapper.find('input').trigger('pointerdown', { clientX: 150, pointerId: 1 })
+    await wrapper.find('input').trigger('pointermove', { clientX: 152, pointerId: 1 })
+    await wrapper.find('input').trigger('pointerup', { pointerId: 1 })
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    await wrapper.find('input').setValue('12')
+    expect(lastEmitted(wrapper)).toBe(12)
+  })
+
+  it('should drag the number relative to its starting value and stop on release', async () => {
+    const wrapper = mount(NumberInput, { props: { modelValue: 10, min: 0, max: 50, step: 0.5 } })
+    const input = wrapper.find('input')
+    wrapper.find('.mint-number-input__scrub').element.getBoundingClientRect = () => ({ left: 100, width: 200 } as DOMRect)
+    await input.trigger('pointerdown', { clientX: 120, pointerId: 1 })
+    await input.trigger('pointermove', { clientX: 170, pointerId: 1 })
+    expect(lastEmitted(wrapper)).toBe(22.5)
+    await input.trigger('pointermove', { clientX: 500, pointerId: 1 })
+    expect(lastEmitted(wrapper)).toBe(50)
+    await input.trigger('pointerup', { pointerId: 1 })
+    const count = wrapper.emitted('update:modelValue')?.length
+    await input.trigger('pointermove', { clientX: 100, pointerId: 1 })
+    expect(wrapper.emitted('update:modelValue')).toHaveLength(count!)
+  })
+
+  it('should drag numbers without a full range in step increments', async () => {
+    const wrapper = mount(NumberInput, { props: { modelValue: 2.5, min: 0, step: 1 } })
+    const input = wrapper.find('input')
+    await input.trigger('pointerdown', { clientX: 100, pointerId: 1 })
+    await input.trigger('pointermove', { clientX: 116, pointerId: 1 })
+    expect(lastEmitted(wrapper)).toBe(4.5)
+    await input.trigger('pointermove', { clientX: 60, pointerId: 1 })
+    expect(lastEmitted(wrapper)).toBe(0)
+    await input.trigger('pointercancel', { pointerId: 1 })
+    const count = wrapper.emitted('update:modelValue')?.length
+    await input.trigger('pointermove', { clientX: 120, pointerId: 1 })
+    expect(wrapper.emitted('update:modelValue')).toHaveLength(count!)
+  })
+
+  it('should ignore disabled inputs and non-primary buttons when dragging', async () => {
+    for (const props of [{ disabled: true }, { disabled: false }]) {
+      const wrapper = mount(NumberInput, { props: { modelValue: 5, min: 0, max: 10, ...props } })
+      const input = wrapper.find('input')
+      await input.trigger('pointerdown', { clientX: 100, pointerId: 1, button: props.disabled ? 0 : 2 })
+      await input.trigger('pointermove', { clientX: 150, pointerId: 1 })
+      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+      wrapper.unmount()
+    }
+  })
+
+  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/PlotlyChart.test.ts

@@ -302,4 +302,52 @@ describe('PlotlyChart', () => {
 
     expect(plotly.purge).toHaveBeenCalledTimes(1)
   })
+
+  it('should use an injected Plotly build and forward point clicks', async () => {
+    let clickHandler: ((event: unknown) => void) | undefined
+    const custom = {
+      Plots: { resize: vi.fn() },
+      purge: vi.fn(),
+      react: vi.fn(async (element: HTMLElement) => {
+        Object.assign(element, {
+          on: (_name: string, handler: (event: unknown) => void) => { clickHandler = handler },
+          removeAllListeners: vi.fn(),
+        })
+      }),
+    }
+    const wrapper = mount(PlotlyChart, {
+      props: {
+        data: [{ x: [1] }],
+        plotly: custom as never,
+        clickEvents: true,
+        height: 320,
+        variant: 'frame',
+      },
+      slots: { header: 'Chart header', footer: 'Time (min)' },
+    })
+    await flushPromises()
+
+    expect(custom.react).toHaveBeenCalledOnce()
+    expect(plotly.react).not.toHaveBeenCalled()
+    expect(wrapper.get('.mint-plotly-chart__plot').attributes('style')).toContain('height: 320px')
+    expect(wrapper.get('.mint-chart').classes()).toContain('mint-chart--frame')
+    expect(wrapper.text()).toContain('Chart header')
+    expect(wrapper.text()).toContain('Time (min)')
+
+    const event = { points: [] }
+    clickHandler?.(event)
+    expect(wrapper.emitted('plotly-click')?.[0]?.[0]).toBe(event)
+  })
+
+  it('should wait to render until an inactive chart becomes active', async () => {
+    const wrapper = mount(PlotlyChart, {
+      props: { data: [{ x: [1] }], active: false },
+    })
+    await flushPromises()
+    expect(plotly.react).not.toHaveBeenCalled()
+
+    await wrapper.setProps({ active: true })
+    await flushPromises()
+    expect(plotly.react).toHaveBeenCalledOnce()
+  })
 })

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__/components/RackEditor.test.ts

@@ -40,6 +40,15 @@ function jsonDataTransfer(data: unknown): DataTransfer {
 }
 
 describe('RackEditor', () => {
+  it('keeps rack selection and removal as sibling buttons', () => {
+    const racks = makeRacks()
+    racks.push({ ...racks[0], id: 'rack-2', name: 'Rack 2', wells: {} })
+    const wrapper = mount(RackEditor, { props: { modelValue: racks } })
+
+    expect(wrapper.find('.mint-rack-editor__tab button').exists()).toBe(false)
+    expect(wrapper.get('.mint-rack-editor__tab-item').findAll('button')).toHaveLength(2)
+  })
+
   it('passes rack-aware well editor slot props through to WellPlate', async () => {
     const wrapper = mount(RackEditor, {
       props: {

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

@@ -0,0 +1,61 @@
+import { flushPromises, mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+
+import SearchableSelect from '../../components/SearchableSelect.vue'
+
+const options = [
+  { value: 'alpha', label: 'Alpha', description: 'First option' },
+  { value: 'beta', label: 'Beta', disabled: true, disabledReason: 'Unavailable' },
+  { value: 'gamma', label: 'Gamma', meta: 'count' },
+]
+
+describe('SearchableSelect', () => {
+  it('filters rich options and explains disabled choices', async () => {
+    const wrapper = mount(SearchableSelect, { props: { options } })
+    await wrapper.get('.mint-searchable-select__trigger').trigger('click')
+    await wrapper.get('input').setValue('bet')
+
+    expect(wrapper.findAll('[role="option"]')).toHaveLength(1)
+    expect(wrapper.get('[role="option"]').text()).toContain('Unavailable')
+    expect(wrapper.get('[role="option"]').attributes('aria-disabled')).toBe('true')
+  })
+
+  it('skips disabled options during keyboard selection', async () => {
+    const wrapper = mount(SearchableSelect, { props: { options } })
+    await wrapper.get('.mint-searchable-select__trigger').trigger('click')
+    await flushPromises()
+    await wrapper.get('input').trigger('keydown', { key: 'ArrowDown' })
+    await wrapper.get('input').trigger('keydown', { key: 'Enter' })
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['gamma'])
+    expect(wrapper.get('.mint-searchable-select__trigger').text()).toContain('Select an option')
+  })
+
+  it('keeps footer actions reachable until focus leaves the select', async () => {
+    const wrapper = mount(SearchableSelect, {
+      attachTo: document.body,
+      props: { options },
+      slots: { footer: '<button type="button">Add option</button>' },
+    })
+    const outside = document.createElement('button')
+    document.body.append(outside)
+    try {
+      await wrapper.get('.mint-searchable-select__trigger').trigger('click')
+      await wrapper.get('input').trigger('keydown', { key: 'Tab' })
+      expect(wrapper.find('.mint-searchable-select__footer').exists()).toBe(true)
+
+      const footer = wrapper.get<HTMLButtonElement>('.mint-searchable-select__footer button')
+      footer.element.focus()
+      await flushPromises()
+      expect(document.activeElement).toBe(footer.element)
+      expect(wrapper.find('[role="listbox"]').exists()).toBe(true)
+
+      outside.focus()
+      await flushPromises()
+      expect(wrapper.find('[role="listbox"]').exists()).toBe(false)
+    } finally {
+      wrapper.unmount()
+      outside.remove()
+    }
+  })
+})

package/src/__tests__/components/WellPlate.decoration.test.ts

@@ -0,0 +1,28 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+
+import WellPlate from '../../components/WellPlate.vue'
+
+describe('WellPlate per-well decoration', () => {
+  it('applies custom classes and lets custom styles override heatmap borders', () => {
+    const wrapper = mount(WellPlate, {
+      props: {
+        format: 6,
+        wells: {
+          A1: { id: 'A1', row: 0, col: 0, state: 'filled', value: 0.5 },
+        },
+        heatmap: { enabled: true, min: 0, max: 1 },
+        wellClass: well => well.id === 'A1' ? 'mint-well-plate__well--outlier' : undefined,
+        wellStyle: well => well.id === 'A1'
+          ? { borderWidth: '2px', borderStyle: 'solid', borderColor: 'var(--mint-warning)' }
+          : undefined,
+      },
+    })
+
+    const well = wrapper.findAll('.mint-well-plate__well')[0]
+    expect(well.classes()).toContain('mint-well-plate__well--outlier')
+    const style = (well.element as HTMLElement).style
+    expect([style.borderWidth, style.borderStyle, style.borderColor])
+      .toEqual(['2px', 'solid', 'var(--mint-warning)'])
+  })
+})

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/useManualLayoutResize.test.ts

@@ -0,0 +1,21 @@
+import { describe, expect, it } from 'vitest'
+import {
+  resizedLeadingPanelWidth,
+  resizedTrailingPanelWidth,
+  resizedVerticalSplitPercent,
+} from '../../composables/useManualLayoutResize'
+
+describe('manual layout resize helpers', () => {
+  const limits = { minWidth: 260, maxWidth: 480, mainMinWidth: 560, layoutGap: 16 }
+
+  it('clamps leading, trailing, and vertical splits', () => {
+    expect(resizedLeadingPanelWidth(320, 400, 900, limits)).toBe(324)
+    expect(resizedTrailingPanelWidth(320, -400, 1400, limits)).toBe(480)
+    expect(resizedVerticalSplitPercent(60, 400, 800, { minPercent: 35, maxPercent: 75 })).toBe(75)
+  })
+
+  it('preserves the panel minimum when the container cannot fit both panes', () => {
+    expect(resizedLeadingPanelWidth(320, 0, 500, limits)).toBe(260)
+    expect(resizedTrailingPanelWidth(320, 0, 800, limits)).toBe(260)
+  })
+})

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)
+  })
+})