@morscherlab/mint-sdk 1.2.0 → 1.2.2

package/src/components/RackEditor.vue

@@ -259,51 +259,57 @@ const activeRackWells = computed(() => editor.activeRack.value?.wells ?? {})
     <!-- Rack tabs -->
     <div class="mint-rack-editor__tabs">
       <div class="mint-rack-editor__tabs-inner">
-        <button
+        <div
           v-for="(rack, rackIndex) in editor.racks.value"
           :key="rack.id"
-          :ref="(el) => setTabRef(rack.id, el)"
-          :draggable="allowReorder && !readonly"
-          :title="allowReorder && !readonly ? `${rack.name} — press Alt with the arrow keys to reorder` : undefined"
-          :class="[
-            'mint-rack-editor__tab',
-            {
-              'mint-rack-editor__tab--active': editor.activeRackId.value === rack.id,
-              'mint-rack-editor__tab--dragging': draggingRackId === rack.id,
-              'mint-rack-editor__tab--drag-over': dragOverRackId === rack.id,
-            },
-          ]"
-          @click="handleTabClick(rack.id)"
-          @keydown="onRackReorderKeydown($event, rack, rackIndex)"
-          @dragstart="onRackDragStart($event, rack, rackIndex)"
-          @dragover="onRackDragOver($event, rack, rackIndex)"
-          @dragleave="onRackDragLeave"
-          @drop="onRackDrop($event, rack, rackIndex)"
-          @dragend="onRackDragEnd"
+          class="mint-rack-editor__tab-item"
         >
-          <span
-            class="mint-rack-editor__slot-dot"
-            :style="{ backgroundColor: SLOT_COLORS[rack.slot] }"
-          />
-          {{ rack.name }}
-          <span
-            v-if="getWellCount(rack) > 0"
+          <button
+            :ref="(el) => setTabRef(rack.id, el)"
+            type="button"
+            :draggable="allowReorder && !readonly"
+            :title="allowReorder && !readonly ? `${rack.name} — press Alt with the arrow keys to reorder` : undefined"
             :class="[
-              'mint-rack-editor__count',
-              editor.activeRackId.value === rack.id ? 'mint-rack-editor__count--active' : 'mint-rack-editor__count--inactive',
+              'mint-rack-editor__tab',
+              {
+                'mint-rack-editor__tab--active': editor.activeRackId.value === rack.id,
+                'mint-rack-editor__tab--dragging': draggingRackId === rack.id,
+                'mint-rack-editor__tab--drag-over': dragOverRackId === rack.id,
+              },
             ]"
+            @click="handleTabClick(rack.id)"
+            @keydown="onRackReorderKeydown($event, rack, rackIndex)"
+            @dragstart="onRackDragStart($event, rack, rackIndex)"
+            @dragover="onRackDragOver($event, rack, rackIndex)"
+            @dragleave="onRackDragLeave"
+            @drop="onRackDrop($event, rack, rackIndex)"
+            @dragend="onRackDragEnd"
           >
-            {{ getWellCount(rack) }}
-          </span>
-          <!-- Remove button -->
+            <span
+              class="mint-rack-editor__slot-dot"
+              :style="{ backgroundColor: SLOT_COLORS[rack.slot] }"
+            />
+            {{ rack.name }}
+            <span
+              v-if="getWellCount(rack) > 0"
+              :class="[
+                'mint-rack-editor__count',
+                editor.activeRackId.value === rack.id ? 'mint-rack-editor__count--active' : 'mint-rack-editor__count--inactive',
+              ]"
+            >
+              {{ getWellCount(rack) }}
+            </span>
+          </button>
           <button
             v-if="editor.racks.value.length > minRacks && !readonly"
+            type="button"
             class="mint-rack-editor__tab-remove"
+            :aria-label="`Remove ${rack.name}`"
             @click.stop="handleRemoveRack(rack.id)"
           >
             &times;
           </button>
-        </button>
+        </div>
       </div>
 
       <!-- Add rack button -->

package/src/components/SearchableSelect.story.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { SelectOption } from '../types'
+import SearchableSelect from './SearchableSelect.vue'
+
+const value = ref<string | number>('viability')
+const options: SelectOption[] = [
+  { value: 'viability', label: 'Live cells (%)', description: 'Primary response metric', meta: 'pct' },
+  { value: 'count', label: 'Cell count', description: 'Absolute cell count', meta: 'count' },
+  { value: 'position', label: 'Well position', disabled: true, disabledReason: 'Coordinate columns cannot be analyzed', meta: 'text' },
+]
+</script>
+
+<template>
+  <Story title="Base Inputs/SearchableSelect">
+    <Variant title="Rich options">
+      <div style="padding: 2rem; max-width: 28rem; min-height: 24rem;">
+        <SearchableSelect v-model="value" :options="options">
+          <template #footer>Disabled options remain visible with their reason.</template>
+        </SearchableSelect>
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/SearchableSelect.vue

@@ -0,0 +1,223 @@
+<script setup lang="ts">
+/** Searchable single-select listbox with descriptions, disabled reasons, and custom slots. */
+import { computed, nextTick, ref, useId, watch } from 'vue'
+import type { SelectOption, SelectOptionInput } from '../types'
+import { useEventListener } from '../composables/useEventListener'
+import { normalizeOptionInput } from '../utils/options'
+
+interface Props {
+  modelValue?: string | number
+  options: SelectOptionInput<string | number>[]
+  placeholder?: string
+  searchPlaceholder?: string
+  noResultsText?: string
+  size?: 'sm' | 'md' | 'lg'
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  placeholder: 'Select an option',
+  searchPlaceholder: 'Search options…',
+  noResultsText: 'No matching options',
+  size: 'md',
+  disabled: false,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | number]
+}>()
+
+defineSlots<{
+  option?: (props: { option: SelectOption<string | number>; selected: boolean; active: boolean }) => unknown
+  footer?: () => unknown
+}>()
+
+const id = useId().replace(/:/g, '')
+const listboxId = `mint-searchable-select-${id}`
+const root = ref<HTMLElement | null>(null)
+const trigger = ref<HTMLButtonElement | null>(null)
+const search = ref<HTMLInputElement | null>(null)
+const open = ref(false)
+const query = ref('')
+const activeIndex = ref(-1)
+const normalizedOptions = computed<SelectOption<string | number>[]>(() =>
+  props.options.map(normalizeOptionInput),
+)
+const selectedOption = computed(() =>
+  normalizedOptions.value.find(option => option.value === props.modelValue),
+)
+const visibleOptions = computed(() => {
+  const needle = query.value.trim().toLocaleLowerCase()
+  if (!needle) return normalizedOptions.value
+  return normalizedOptions.value.filter(option =>
+    [option.label, option.description, option.meta, option.disabledReason]
+      .some(value => value?.toLocaleLowerCase().includes(needle)),
+  )
+})
+const activeDescendant = computed(() =>
+  activeIndex.value >= 0 ? `${listboxId}-option-${activeIndex.value}` : undefined,
+)
+
+function firstEnabledIndex(options = visibleOptions.value): number {
+  return options.findIndex(option => !option.disabled)
+}
+
+async function openPanel(): Promise<void> {
+  if (props.disabled) return
+  query.value = ''
+  open.value = true
+  activeIndex.value = firstEnabledIndex(normalizedOptions.value)
+  await nextTick()
+  search.value?.focus()
+}
+
+async function closePanel(restoreFocus = false): Promise<void> {
+  open.value = false
+  query.value = ''
+  activeIndex.value = -1
+  if (restoreFocus) {
+    await nextTick()
+    trigger.value?.focus()
+  }
+}
+
+function moveActive(direction: 1 | -1): void {
+  const enabled = visibleOptions.value
+    .map((option, index) => ({ option, index }))
+    .filter(({ option }) => !option.disabled)
+  if (enabled.length === 0) return
+  const current = enabled.findIndex(({ index }) => index === activeIndex.value)
+  const next = current < 0
+    ? (direction === 1 ? 0 : enabled.length - 1)
+    : (current + direction + enabled.length) % enabled.length
+  activeIndex.value = enabled[next]!.index
+  void nextTick(() => document.getElementById(activeDescendant.value ?? '')?.scrollIntoView({ block: 'nearest' }))
+}
+
+function select(option: SelectOption<string | number>): void {
+  if (option.disabled) return
+  emit('update:modelValue', option.value)
+  void closePanel(true)
+}
+
+function handleSearchKeydown(event: KeyboardEvent): void {
+  if (event.key === 'ArrowDown') moveActive(1)
+  else if (event.key === 'ArrowUp') moveActive(-1)
+  else if (event.key === 'Home') activeIndex.value = firstEnabledIndex()
+  else if (event.key === 'End') {
+    for (let index = visibleOptions.value.length - 1; index >= 0; index--) {
+      if (!visibleOptions.value[index]?.disabled) {
+        activeIndex.value = index
+        break
+      }
+    }
+  } else if (event.key === 'Enter') {
+    const option = visibleOptions.value[activeIndex.value]
+    if (option) select(option)
+  } else if (event.key === 'Escape') {
+    void closePanel(true)
+  } else return
+  event.preventDefault()
+}
+
+function handleTriggerKeydown(event: KeyboardEvent): void {
+  if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return
+  event.preventDefault()
+  void openPanel().then(() => {
+    if (event.key === 'ArrowUp') moveActive(-1)
+  })
+}
+
+watch(visibleOptions, options => { activeIndex.value = firstEnabledIndex(options) })
+watch(() => props.disabled, disabled => { if (disabled) void closePanel() })
+useEventListener(() => document, 'pointerdown', event => {
+  if (open.value && !root.value?.contains(event.target as Node)) void closePanel()
+})
+</script>
+
+<template>
+  <div
+    ref="root"
+    :class="['mint-searchable-select', `mint-searchable-select--${size}`]"
+    @focusout="!root?.contains($event.relatedTarget as Node | null) && closePanel()"
+  >
+    <button
+      ref="trigger"
+      type="button"
+      class="mint-searchable-select__trigger"
+      :disabled="disabled"
+      :aria-expanded="open"
+      :aria-controls="listboxId"
+      aria-haspopup="listbox"
+      @click="open ? closePanel() : openPanel()"
+      @keydown="handleTriggerKeydown"
+    >
+      <span :class="['mint-searchable-select__value', { 'mint-searchable-select__value--placeholder': !selectedOption }]">
+        {{ selectedOption?.label ?? placeholder }}
+      </span>
+      <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" aria-hidden="true">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="m6 8 4 4 4-4" />
+      </svg>
+    </button>
+
+    <div v-if="open" class="mint-searchable-select__panel">
+      <div class="mint-searchable-select__search-wrap">
+        <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" aria-hidden="true">
+          <circle cx="8.5" cy="8.5" r="5.5" /><path d="m13 13 4 4" />
+        </svg>
+        <input
+          ref="search"
+          v-model="query"
+          role="combobox"
+          type="search"
+          class="mint-searchable-select__search"
+          :placeholder="searchPlaceholder"
+          :aria-label="searchPlaceholder"
+          :aria-expanded="open"
+          :aria-controls="listboxId"
+          :aria-activedescendant="activeDescendant"
+          aria-autocomplete="list"
+          @keydown="handleSearchKeydown"
+        >
+      </div>
+
+      <ul :id="listboxId" class="mint-searchable-select__list" role="listbox">
+        <li
+          v-for="(option, index) in visibleOptions"
+          :id="`${listboxId}-option-${index}`"
+          :key="String(option.value)"
+          role="option"
+          class="mint-searchable-select__option"
+          :class="{
+            'mint-searchable-select__option--active': activeIndex === index,
+            'mint-searchable-select__option--selected': modelValue === option.value,
+            'mint-searchable-select__option--disabled': option.disabled,
+          }"
+          :aria-selected="modelValue === option.value"
+          :aria-disabled="option.disabled || undefined"
+          @mousedown.prevent
+          @mouseenter="!option.disabled && (activeIndex = index)"
+          @click="select(option)"
+        >
+          <slot name="option" :option="option" :selected="modelValue === option.value" :active="activeIndex === index">
+            <span class="mint-searchable-select__option-text">
+              <span class="mint-searchable-select__option-label">{{ option.label }}</span>
+              <span v-if="option.disabled ? option.disabledReason || option.description : option.description" class="mint-searchable-select__option-description">
+                {{ option.disabled ? option.disabledReason || option.description : option.description }}
+              </span>
+            </span>
+            <span v-if="option.meta" class="mint-searchable-select__option-meta">{{ option.meta }}</span>
+            <svg v-if="modelValue === option.value" class="mint-searchable-select__check" viewBox="0 0 20 20" fill="none" stroke="currentColor" aria-hidden="true">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 10 3 3 7-7" />
+            </svg>
+          </slot>
+        </li>
+        <li v-if="visibleOptions.length === 0" class="mint-searchable-select__empty">{{ noResultsText }}</li>
+      </ul>
+
+      <div v-if="$slots.footer" class="mint-searchable-select__footer">
+        <slot name="footer" />
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/WellPlate.story.vue

@@ -211,6 +211,22 @@ function initState() {
       </div>
     </Variant>
 
+    <Variant title="Heatmap QC Decorations">
+      <div style="padding: 2rem;">
+        <WellPlate
+          :format="96"
+          :wells="heatmapWells"
+          :heatmap="{ enabled: true, min: 0, max: 1, colorScale: 'viridis', showLegend: true }"
+          :well-class="well => well.id === 'A1'
+            ? 'mint-well-plate__well--outlier'
+            : well.id === 'A2' ? 'mint-well-plate__well--conflict' : ''"
+          selection-mode="none"
+          show-labels
+          size="md"
+        />
+      </div>
+    </Variant>
+
     <Variant title="6-Well Plate">
       <div style="padding: 2rem;">
         <WellPlate

package/src/components/WellPlate.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 /** Interactive 96/384-well plate grid with drag-to-select, heatmap overlays, per-well editing, and sample-color mapping. */
 import { ref, computed } from 'vue'
-import type { WellPlateFormat, WellPlateSelectionMode, WellPlateSize, Well, HeatmapConfig, WellShape, WellEditField, WellEditData, WellLegendItem, ColumnCondition, RowCondition, WellSampleDropData, WellSampleDropParser } from '../types'
+import type { WellPlateFormat, WellPlateSelectionMode, WellPlateSize, Well, HeatmapConfig, WellShape, WellEditField, WellEditData, WellLegendItem, ColumnCondition, RowCondition, WellSampleDropData, WellSampleDropParser, WellClassResolver, WellClassValue, WellStyleResolver } from '../types'
 import { useEventListener } from '../composables/useEventListener'
 import WellEditPopupInternal from './internal/WellEditPopupInternal.vue'
 import {
@@ -73,6 +73,10 @@ interface Props {
    * carry data.
    */
   emptyMessage?: string
+  /** Add semantic classes to individual wells without overloading sample data. */
+  wellClass?: WellClassResolver
+  /** Add or override individual well styles after heatmap/sample styling. */
+  wellStyle?: WellStyleResolver
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -213,8 +217,8 @@ const {
   emitSampleDrop: (wellId, data, event) => emit('sample-drop', wellId, data, event),
 })
 
-function getWellClasses(well: Well): string[] {
-  return wellClasses(well, {
+function getWellClasses(well: Well): WellClassValue[] {
+  const base = wellClasses(well, {
     wellShape: props.wellShape,
     selectionMode: props.selectionMode,
     selected: isSelected(well.id),
@@ -225,13 +229,18 @@ function getWellClasses(well: Well): string[] {
     dragSource: dragSourceWell.value === well.id,
     dragTarget: dragTargetWell.value === well.id,
   })
+  const custom = props.wellClass?.(well)
+  return custom ? [base, custom] : [base]
 }
 
-function getWellStyle(well: Well): Record<string, string> {
-  return wellStyle(well, {
-    heatmap: props.heatmap,
-    sampleColors: props.sampleColors,
-  })
+function getWellStyle(well: Well): Record<string, string | number | undefined> {
+  return {
+    ...wellStyle(well, {
+      heatmap: props.heatmap,
+      sampleColors: props.sampleColors,
+    }),
+    ...props.wellStyle?.(well),
+  }
 }
 
 function getSampleTypeIndicator(well: Well): string | null {

package/src/components/index.ts

@@ -3,6 +3,7 @@ export { default as BaseButton } from './BaseButton.vue'
 export { default as BaseInput } from './BaseInput.vue'
 export { default as BaseTextarea } from './BaseTextarea.vue'
 export { default as BaseSelect } from './BaseSelect.vue'
+export { default as SearchableSelect } from './SearchableSelect.vue'
 export { default as BaseCheckbox } from './BaseCheckbox.vue'
 export { default as BaseToggle } from './BaseToggle.vue'
 export { default as BaseRadioGroup } from './BaseRadioGroup.vue'
@@ -55,6 +56,7 @@ export { default as ControlWorkspaceView } from './ControlWorkspaceView.vue'
 export { default as DoseDesignWorkspaceView } from './DoseDesignWorkspaceView.vue'
 export { default as AppContainer } from './AppContainer.vue'
 export { default as PluginIcon } from './PluginIcon.vue'
+export { default as LayoutResizeHandle } from './LayoutResizeHandle.vue'
 
 // Utility components
 export { default as Skeleton } from './Skeleton.vue'
@@ -68,6 +70,7 @@ export { default as Breadcrumb } from './Breadcrumb.vue'
 export { default as Tooltip } from './Tooltip.vue'
 export { default as ConfirmDialog } from './ConfirmDialog.vue'
 export { default as ChartContainer } from './ChartContainer.vue'
+export { default as AdductText } from './AdductText.vue'
 export { default as SettingsModal } from './SettingsModal.vue'
 
 // Biological experiment components
@@ -101,7 +104,6 @@ export { default as ProtocolStepEditor } from './ProtocolStepEditor.vue'
 // Scientific display components
 export { default as PlotlyChart } from './PlotlyChart.vue'
 export { default as ScientificNumber } from './ScientificNumber.vue'
-/** Renders a chemical formula string (H₂O, C₆H₁₂O₆, Ca(OH)₂) with typographically correct subscripts and superscripts for charges. @deprecated Unused by the MINT platform and scheduled for removal in MINT 1.3; no platform replacement is planned. */
 export { default as ChemicalFormula } from './ChemicalFormula.vue'
 export { default as SequenceProgressBar } from './SequenceProgressBar.vue'
 /** Filterable instrument alert/event list keyed by each alert's required stable event_key. @deprecated Unused by the MINT platform and scheduled for removal in MINT 1.3; instrument UI moves to the mld-ms plugins. */

package/src/components/internal/FormFieldRendererInternal.vue

@@ -20,6 +20,23 @@ const isChoiceField = computed(() =>
 )
 
 const componentProps = computed<Record<string, unknown>>(() => {
+  if (props.field.type === 'multiselect') {
+    const values = Array.isArray(props.resolvedProps.modelValue) ? props.resolvedProps.modelValue : []
+    return { ...props.resolvedProps, modelValue: values }
+  }
+  if (props.field.type === 'tags') {
+    const values = Array.isArray(props.resolvedProps.modelValue) ? props.resolvedProps.modelValue : []
+    const onUpdate = props.resolvedProps['onUpdate:modelValue'] as ((value: unknown) => void) | undefined
+    // TagsInput edits strings; numeric fields are parsed back on the way out so
+    // nullable or numeric form data is displayed without being replaced.
+    return {
+      ...props.resolvedProps,
+      modelValue: values.map(String),
+      'onUpdate:modelValue': (next: unknown) => onUpdate?.(
+        props.field.itemType === 'number' && Array.isArray(next) ? next.map(Number) : next,
+      ),
+    }
+  }
   if (!isChoiceField.value) return props.resolvedProps
 
   return {

package/src/components/internal/WorkspaceSidebarInternal.vue

@@ -34,11 +34,10 @@ defineSlots<{
     :title="sidebar.title"
     :subtitle="sidebar.subtitle"
     :badge="sidebar.badge"
-    :variant="sidebar.variant"
     :panels="sidebar.panels"
     :active-view="sidebar.activeView"
     :floating="sidebar.floating"
-    :dense="sidebar.dense"
+    :density="sidebar.dense ? 'compact' : 'comfortable'"
     :width="sidebar.width"
     :side="sidebar.side"
     :forms="sidebar.forms"

package/src/composables/filePicker/localFiles.ts

@@ -1,4 +1,4 @@
-import type { PickerAdapter, PickerFile, PickerNode } from '../../types/filePicker'
+import type { PickerAdapter, PickerNode } from '../../types/filePicker'
 import { pickerFormat } from './validation'
 
 /** Construct metadata only: no FileReader, arrayBuffer or upload. */
@@ -14,7 +14,10 @@ export function localFilesAdapter(
     for (let i = 0; i < parts.length - 1; i++) {
       const path = parts.slice(0, i + 1).join('/')
       if (!nodes.has(path))
-        nodes.set(path, { kind: 'folder', name: parts[i]!, path, parentPath: parent })
+        nodes.set(path, {
+          kind: 'folder', name: parts[i]!, path, parentPath: parent,
+          fileCount: 0, bytes: 0, formats: {},
+        })
       parent = path
     }
     // Plain file picks can have equal names; preserve both File objects.
@@ -30,20 +33,24 @@ export function localFilesAdapter(
       file,
     })
   }
+  const children = new Map<string, PickerNode[]>()
   for (const node of nodes.values()) {
-    if (node.kind !== 'folder') continue
-    const descendants = [...nodes.values()].filter(
-      (item): item is PickerFile => item.kind === 'file' && item.path.startsWith(`${node.path}/`),
-    )
-    node.fileCount = descendants.length
-    node.bytes = descendants.reduce((sum, file) => sum + (file.bytes ?? 0), 0)
-    node.formats = {}
-    descendants.forEach((file) => {
-      node.formats![file.format] = (node.formats![file.format] ?? 0) + 1
-    })
+    const parent = node.parentPath ?? ''
+    const siblings = children.get(parent)
+    if (siblings) siblings.push(node)
+    else children.set(parent, [node])
+    if (node.kind !== 'file') continue
+    // Each file contributes once to its ancestors, rather than scanning all
+    // files again for every folder in the selection.
+    for (let slash = node.path.indexOf('/'); slash >= 0; slash = node.path.indexOf('/', slash + 1)) {
+      const folder = nodes.get(node.path.slice(0, slash))
+      if (folder?.kind !== 'folder') continue
+      folder.fileCount = (folder.fileCount ?? 0) + 1
+      folder.bytes = (folder.bytes ?? 0) + (node.bytes ?? 0)
+      folder.formats![node.format] = (folder.formats![node.format] ?? 0) + 1
+    }
   }
-  const list = (path: string) =>
-    [...nodes.values()].filter((node) => (node.parentPath ?? '') === path)
+  const list = (path: string) => [...(children.get(path) ?? [])]
   return {
     listRoot: async () => list(''),
     listChildren: async (path) => list(path),

package/src/composables/filePicker/usePickerSelection.ts

@@ -231,12 +231,23 @@ export function usePickerSelection(
       )) void resolve()
     },
   )
+  const selectedFileCounts = computed(() => {
+    const counts = new Map<string, number>()
+    for (const file of chosen.value.files) {
+      const seen = new Set<string>()
+      let parent = file.parentPath
+      while (parent && !seen.has(parent)) {
+        seen.add(parent)
+        counts.set(parent, (counts.get(parent) ?? 0) + 1)
+        parent = nav.nodes.value.get(parent)?.parentPath
+      }
+    }
+    return counts
+  })
   function folderProgress(node: PickerNode): string {
     if (node.kind !== 'folder' || node.fileCount == null) return ''
-    const allowed = chosen.value.files.filter((file) =>
-      ancestorSelected(file, new Set([node.path])),
-    ).length
-    return `${selected(node) ? allowed : 0} / ${node.fileCount}`
+    const allowed = selected(node) ? (selectedFileCounts.value.get(node.path) ?? 0) : 0
+    return `${allowed} / ${node.fileCount}`
   }
   return {
     keys,

package/src/composables/index.ts

@@ -139,6 +139,16 @@ export {
   type UseDebouncedWatchOptions,
   type UseDebouncedWatchReturn,
 } from './useDebouncedWatch'
+export {
+  resizedLeadingPanelWidth,
+  resizedTrailingPanelWidth,
+  resizedVerticalSplitPercent,
+  useManualLayoutResize,
+  type ManualLayoutResizeContext,
+  type ManualLayoutResizeTarget,
+  type ResizePanelWidthConstraints,
+  type ResizePercentConstraints,
+} from './useManualLayoutResize'
 export { useFormBuilder, evaluateCondition } from './useFormBuilder'
 export {
   createGeneratedAnalysisTransport,

package/src/composables/pluginWorkspaceModel.ts

@@ -16,7 +16,6 @@ import type {
   ControlSchema,
   ControlWorkspaceOptions,
 } from './useControlSchema'
-import type { PluginWorkspaceSidebarVariant } from '../components/PluginWorkspaceView.props'
 
 /**
  * Scoped-slot payload shared by PluginWorkspaceView's `default`, `topbar`, and `sidebar`
@@ -125,8 +124,6 @@ export interface PluginWorkspaceSidebarModel {
   subtitle?: string
   /** Optional compact badge/count rendered in the sidebar header. */
   badge?: string | number
-  /** AppSidebar visual preset. */
-  variant: PluginWorkspaceSidebarVariant
   /** Map of view IDs to sidebar tool sections. */
   panels: Record<string, SidebarToolSection[]>
   /** Resolved active view, used to pick which panels/forms render. */