@morscherlab/mint-sdk 1.2.1 → 1.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morscherlab/mint-sdk",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "MINT Platform SDK — Vue 3 components, composables, and types for plugin development. MINT = Mass-spec INtegrated Toolkit.",
   "type": "module",
   "main": "./dist/index.js",

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

@@ -0,0 +1,24 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+
+import ChartContainer from '../../components/ChartContainer.vue'
+
+describe('ChartContainer', () => {
+  it('renders workbench header, subhead, and footer slots in a filling frame', () => {
+    const wrapper = mount(ChartContainer, {
+      props: { variant: 'frame' },
+      slots: {
+        header: 'Header',
+        subhead: 'Subhead',
+        default: 'Chart',
+        footer: 'Footer',
+      },
+    })
+
+    expect(wrapper.classes()).toContain('mint-chart--frame')
+    expect(wrapper.text()).toContain('Header')
+    expect(wrapper.text()).toContain('Subhead')
+    expect(wrapper.text()).toContain('Chart')
+    expect(wrapper.get('.mint-chart__footer').text()).toBe('Footer')
+  })
+})

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

@@ -0,0 +1,27 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+
+import AdductText from '../../components/AdductText.vue'
+import ChemicalFormula from '../../components/ChemicalFormula.vue'
+
+describe('ChemicalFormula', () => {
+  it('renders formula typography and an adduct as separate parts', () => {
+    const wrapper = mount(ChemicalFormula, {
+      props: { formula: 'C6H12O6', adduct: '[M+H]+', pill: true },
+    })
+
+    expect(wrapper.findAll('.mint-chem-formula__subscript').map(node => node.text()))
+      .toEqual(['6', '12', '6'])
+    expect(wrapper.getComponent(AdductText).text()).toBe('[M+H]+')
+    expect(wrapper.classes()).toContain('mint-chem-formula--pill')
+  })
+
+  it('renders explicit empty text when no formula is available', () => {
+    expect(mount(ChemicalFormula, { props: { emptyText: 'Unknown' } }).text()).toBe('Unknown')
+  })
+
+  it('supports standalone sans-serif adduct labels', () => {
+    expect(mount(AdductText, { props: { value: '[M-H]-', font: 'sans' } }).classes())
+      .toContain('mint-adduct-text--sans')
+  })
+})

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

@@ -48,10 +48,54 @@ describe('NumberInput', () => {
     expect(lastEmitted(wrapper)).toBe(12.5)
   })
 
-  it('should not scrub when the pointer goes down on the input itself', async () => {
+  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 () => {

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/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/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/components/AdductText.story.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import AdductText from './AdductText.vue'
+</script>
+
+<template>
+  <Story title="Data Display/AdductText">
+    <Variant title="Inline and badge">
+      <div style="display: flex; align-items: center; gap: 1rem; padding: 2rem; color: var(--text-primary);">
+        <AdductText value="[M+H]+" />
+        <AdductText value="[M+Na]+" variant="badge" />
+        <AdductText />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/AdductText.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+/** Compact, overflow-safe display for mass-spectrometry adduct notation. */
+import { computed } from 'vue'
+
+interface Props {
+  value?: string | null
+  emptyText?: string
+  variant?: 'inline' | 'badge'
+  tone?: 'default' | 'on-primary' | 'muted'
+  size?: 'xs' | 'inherit'
+  font?: 'mono' | 'sans'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  value: null,
+  emptyText: '-',
+  variant: 'inline',
+  tone: 'default',
+  size: 'xs',
+  font: 'mono',
+})
+
+const value = computed(() => props.value?.trim() ?? '')
+</script>
+
+<template>
+  <span
+    :class="[
+      'mint-adduct-text',
+      `mint-adduct-text--${variant}`,
+      `mint-adduct-text--${tone}`,
+      `mint-adduct-text--${size}`,
+      `mint-adduct-text--${font}`,
+      { 'mint-adduct-text--empty': !value },
+    ]"
+    :title="value || undefined"
+  >
+    {{ value || emptyText }}
+  </span>
+</template>

package/src/components/ChartContainer.story.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import ChartContainer from './ChartContainer.vue'
+import IconButton from './IconButton.vue'
 </script>
 
 <template>
@@ -109,5 +110,25 @@ import ChartContainer from './ChartContainer.vue'
         </ChartContainer>
       </div>
     </Variant>
+
+    <Variant title="Workbench Frame">
+      <div style="height: 420px; border: 1px solid var(--border-color); border-radius: 0.5rem; overflow: hidden;">
+        <ChartContainer variant="frame" empty empty-message="Select a sample to populate this chart">
+          <template #header>
+            <strong style="font-size: 0.8125rem; color: var(--text-primary);">Extracted Ion Chromatogram</strong>
+          </template>
+          <template #toolbar>
+            <IconButton size="sm" label="Reset zoom">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
+                <path d="M4 4v6h6M20 20v-6h-6M5.5 15a7 7 0 0 0 11.8 2M18.5 9A7 7 0 0 0 6.7 7" />
+              </svg>
+            </IconButton>
+          </template>
+          <template #footer>
+            Retention time (min)
+          </template>
+        </ChartContainer>
+      </div>
+    </Variant>
   </Story>
 </template>

package/src/components/ChartContainer.vue

@@ -9,27 +9,44 @@ interface Props {
   loading?: boolean
   empty?: boolean
   emptyMessage?: string
+  /** `frame` fills its parent and uses compact workbench chrome. */
+  variant?: 'card' | 'frame'
 }
 
 withDefaults(defineProps<Props>(), {
   loading: false,
   empty: false,
   emptyMessage: 'No data available',
+  variant: 'card',
 })
+
+defineSlots<{
+  default?: () => unknown
+  header?: () => unknown
+  toolbar?: () => unknown
+  subhead?: () => unknown
+  empty?: () => unknown
+  legend?: () => unknown
+  footer?: () => unknown
+}>()
 </script>
 
 <template>
-  <div class="mint-chart">
-    <div v-if="title || description || $slots.toolbar" class="mint-chart__header">
-      <div v-if="title || description" class="mint-chart__header-text">
-        <h3 v-if="title" class="mint-chart__title">{{ title }}</h3>
-        <p v-if="description" class="mint-chart__description">{{ description }}</p>
-      </div>
+  <div :class="['mint-chart', `mint-chart--${variant}`]">
+    <div v-if="title || description || $slots.header || $slots.toolbar" class="mint-chart__header">
+      <slot name="header">
+        <div v-if="title || description" class="mint-chart__header-text">
+          <h3 v-if="title" class="mint-chart__title">{{ title }}</h3>
+          <p v-if="description" class="mint-chart__description">{{ description }}</p>
+        </div>
+      </slot>
       <div v-if="$slots.toolbar" class="mint-chart__toolbar">
         <slot name="toolbar" />
       </div>
     </div>
 
+    <slot name="subhead" />
+
     <div class="mint-chart__body">
       <!-- Loading overlay -->
       <div v-if="loading" class="mint-chart__loading-overlay">
@@ -56,5 +73,9 @@ withDefaults(defineProps<Props>(), {
     <div v-if="$slots.legend" class="mint-chart__legend">
       <slot name="legend" />
     </div>
+
+    <div v-if="$slots.footer" class="mint-chart__footer">
+      <slot name="footer" />
+    </div>
   </div>
 </template>

package/src/components/ChemicalFormula.story.vue

@@ -98,5 +98,12 @@ const formulas = [
         </div>
       </div>
     </Variant>
+
+    <Variant title="Formula with Adduct">
+      <div style="display: flex; gap: 1rem; padding: 2rem; align-items: center;">
+        <ChemicalFormula formula="C6H12O6" adduct="[M+H]+" size="sm" />
+        <ChemicalFormula formula="C3H6O3" adduct="[M-H]-" size="sm" pill tone="secondary" />
+      </div>
+    </Variant>
   </Story>
 </template>

package/src/components/ChemicalFormula.vue

@@ -1,17 +1,32 @@
 <script setup lang="ts">
-/** Renders a chemical formula string (H₂O, C₆H₁₂O₆, Ca(OH)₂) with typographically correct subscripts and superscripts for charges. */
+/** Renders a chemical formula and optional MS adduct with typographically correct subscripts and charges. */
+import { computed } from 'vue'
 import { useChemicalFormula, type FormulaPart } from '../composables/useChemicalFormula'
+import AdductText from './AdductText.vue'
 
 interface Props {
-  formula: string
+  formula?: string | null
   inline?: boolean
+  adduct?: string | null
+  emptyText?: string
+  pill?: boolean
+  size?: 'xs' | 'sm' | 'inherit'
+  tone?: 'primary' | 'secondary' | 'muted'
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
+  formula: null,
   inline: true,
+  adduct: null,
+  emptyText: '-',
+  pill: false,
+  size: 'inherit',
+  tone: 'primary',
 })
 
 const { renderFormulaParts } = useChemicalFormula()
+const formula = computed(() => props.formula?.trim() ?? '')
+const title = computed(() => [formula.value, props.adduct?.trim()].filter(Boolean).join(' '))
 
 function getParts(f: string): FormulaPart[] {
   return renderFormulaParts(f)
@@ -21,15 +36,29 @@ function getParts(f: string): FormulaPart[] {
 <template>
   <component
     :is="inline ? 'span' : 'div'"
-    :class="['mint-chem-formula', !inline ? 'mint-chem-formula--block' : '']"
+    :class="[
+      'mint-chem-formula',
+      !inline ? 'mint-chem-formula--block' : '',
+      `mint-chem-formula--${size}`,
+      `mint-chem-formula--${tone}`,
+      { 'mint-chem-formula--pill': pill, 'mint-chem-formula--empty': !formula },
+    ]"
+    :title="title || undefined"
   >
-    <template v-for="(part, i) in getParts(formula)" :key="i">
-      <span v-if="part.type === 'element'" class="mint-chem-formula__element">{{ part.text }}</span>
-      <span v-else-if="part.type === 'subscript'" class="mint-chem-formula__subscript">{{ part.text }}</span>
-      <span v-else-if="part.type === 'superscript'" class="mint-chem-formula__superscript">{{ part.text }}</span>
-      <span v-else-if="part.type === 'paren'" class="mint-chem-formula__paren">{{ part.text }}</span>
-      <span v-else-if="part.type === 'dot'" class="mint-chem-formula__dot">{{ part.text }}</span>
-      <span v-else-if="part.type === 'charge'" class="mint-chem-formula__charge">{{ part.text }}</span>
+    <template v-if="formula">
+      <span class="mint-chem-formula__formula">
+        <template v-for="(part, i) in getParts(formula)" :key="i">
+          <span v-if="part.type === 'element'" class="mint-chem-formula__element">{{ part.text }}</span>
+          <span v-else-if="part.type === 'subscript'" class="mint-chem-formula__subscript">{{ part.text }}</span>
+          <span v-else-if="part.type === 'superscript'" class="mint-chem-formula__superscript">{{ part.text }}</span>
+          <span v-else-if="part.type === 'paren'" class="mint-chem-formula__paren">{{ part.text }}</span>
+          <span v-else-if="part.type === 'dot'" class="mint-chem-formula__dot">{{ part.text }}</span>
+          <span v-else-if="part.type === 'charge'" class="mint-chem-formula__charge">{{ part.text }}</span>
+        </template>
+      </span>
+      <AdductText v-if="adduct" :value="adduct" size="inherit" />
+      <slot />
     </template>
+    <span v-else>{{ emptyText }}</span>
   </component>
 </template>

package/src/components/LayoutResizeHandle.story.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import LayoutResizeHandle from './LayoutResizeHandle.vue'
+
+const width = ref(320)
+</script>
+
+<template>
+  <Story title="Layout/LayoutResizeHandle">
+    <Variant title="Keyboard splitter">
+      <div style="display: flex; height: 16rem; padding: 2rem;">
+        <div :style="{ width: `${width}px`, background: 'var(--bg-secondary)', border: '1px solid var(--border-color)' }">
+          Panel width: {{ width }}px
+        </div>
+        <LayoutResizeHandle
+          v-model="width"
+          orientation="vertical"
+          label="Resize panel"
+          :min="240"
+          :max="480"
+        />
+        <div style="flex: 1; background: var(--bg-tertiary);" />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/LayoutResizeHandle.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+/** Accessible pointer and keyboard handle for resizable workbench panes. */
+interface Props {
+  modelValue: number
+  min: number
+  max: number
+  label: string
+  orientation: 'vertical' | 'horizontal'
+  edge?: 'left' | 'right'
+  step?: number
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  edge: undefined,
+  step: 10,
+  disabled: false,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: number]
+  'resize-start': [event: PointerEvent]
+}>()
+
+function update(value: number): void {
+  emit('update:modelValue', Math.min(props.max, Math.max(props.min, value)))
+}
+
+function handleKeydown(event: KeyboardEvent): void {
+  if (props.disabled) return
+  const decrement = props.orientation === 'vertical' ? 'ArrowLeft' : 'ArrowUp'
+  const increment = props.orientation === 'vertical' ? 'ArrowRight' : 'ArrowDown'
+  if (event.key === decrement) update(props.modelValue - props.step)
+  else if (event.key === increment) update(props.modelValue + props.step)
+  else if (event.key === 'Home') update(props.min)
+  else if (event.key === 'End') update(props.max)
+  else return
+  event.preventDefault()
+}
+</script>
+
+<template>
+  <div
+    role="separator"
+    :tabindex="disabled ? -1 : 0"
+    :class="[
+      'mint-layout-resize-handle',
+      `mint-layout-resize-handle--${orientation}`,
+      edge ? `mint-layout-resize-handle--edge-${edge}` : '',
+    ]"
+    :aria-label="label"
+    :aria-orientation="orientation"
+    :aria-valuemin="min"
+    :aria-valuemax="max"
+    :aria-valuenow="modelValue"
+    :aria-disabled="disabled || undefined"
+    @pointerdown="!disabled && emit('resize-start', $event)"
+    @keydown="handleKeydown"
+  >
+    <span class="mint-layout-resize-handle__bar" aria-hidden="true" />
+  </div>
+</template>