@morscherlab/mint-sdk 1.2.0 → 1.2.1

package/src/components/FormField.vue

@@ -10,9 +10,13 @@ interface Props {
   showOptional?: boolean
   htmlFor?: string
   fieldId?: string
+  /** `row` puts the label left and the control in a fixed 7.5rem column. Use for numbers, toggles, short enums. */
+  layout?: 'stacked' | 'row'
 }
 
-const props = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+  layout: 'stacked',
+})
 
 const errorId = computed(() =>
   props.error && props.fieldId ? `${props.fieldId}-error` : undefined
@@ -26,7 +30,7 @@ const describedBy = computed(() => errorId.value ?? hintId.value)
 </script>
 
 <template>
-  <div class="mint-form-field">
+  <div :class="['mint-form-field', layout === 'row' ? 'mint-form-field--row' : '']">
     <div v-if="label" class="mint-form-field__label-row">
       <label
         :for="htmlFor"
@@ -43,7 +47,10 @@ const describedBy = computed(() => errorId.value ?? hintId.value)
       </span>
     </div>
 
-    <slot :described-by="describedBy" />
+    <div v-if="layout === 'row'" class="mint-form-field__control">
+      <slot :described-by="describedBy" />
+    </div>
+    <slot v-else :described-by="describedBy" />
 
     <p v-if="error" :id="errorId" class="mint-form-field__error" role="alert">
       {{ error }}

package/src/components/GeneratedPathInput.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 
 import { createGeneratedAnalysisTransport } from '../composables/useGeneratedAnalysis'
 import {
@@ -32,6 +32,13 @@ const emit = defineEmits<{
 }>()
 
 const mode = ref<'file' | 'folder'>('file')
+const selections = computed(() => Array.isArray(props.modelValue)
+  ? props.modelValue
+  : props.modelValue ? [props.modelValue] : [])
+const selectedFiles = computed(() => selections.value.flatMap(selection => selection.files))
+watch(selections, (current) => {
+  if (current.length) mode.value = current.every(selection => selection.rootName) ? 'folder' : 'file'
+}, { immediate: true })
 const artifactOpen = ref(false)
 const artifactLoading = ref(false)
 const artifactError = ref('')
@@ -73,12 +80,7 @@ function selectFiles(
 
 function removeFiles(files: File[]): void {
   const removed = new Set(files)
-  const current = Array.isArray(props.modelValue)
-    ? props.modelValue
-    : props.modelValue
-      ? [props.modelValue]
-      : []
-  const remaining = current.flatMap((selection) => {
+  const remaining = selections.value.flatMap((selection) => {
     const indexes = selection.files
       .map((file, index) => removed.has(file) ? -1 : index)
       .filter(index => index >= 0)
@@ -186,6 +188,8 @@ function artifactFileReference(detail: AnalysisArtifactDetail): ArtifactFileRefe
     <FileUploader
       :key="mode"
       :mode="mode"
+      :files="selectedFiles"
+      :root-name="selections[0]?.rootName"
       :multiple="multiple && mode === 'file'"
       :disabled="disabled"
       @upload="selectFiles"

package/src/components/NumberInput.story.vue

@@ -1,7 +1,20 @@
 <script setup lang="ts">
+import { ref } from 'vue'
 import NumberInput from './NumberInput.vue'
 
 const sizes = ['sm', 'md', 'lg'] as const
+
+const sizeValues = ref<Record<string, number | undefined>>({ sm: 42, md: 42, lg: 42 })
+const samples = ref<number | undefined>(96)
+const temperature = ref<number | undefined>(37)
+const volume = ref<number | undefined>(100)
+const overMax = ref<number | undefined>(999)
+const empty = ref<number | undefined>(undefined)
+const mass = ref<number | undefined>(12.5)
+const ph = ref<number | undefined>(7.4)
+const wells = ref<number | undefined>(96)
+const sliderPh = ref<number | undefined>(7.4)
+const percent = ref<number | undefined>(45)
 </script>
 
 <template>
@@ -39,6 +52,9 @@ const sizes = ['sm', 'md', 'lg'] as const
         <HstCheckbox v-model="state.disabled" title="Disabled" />
         <HstCheckbox v-model="state.error" title="Error" />
       </template>
+      <template #initState>
+        {{ { value: 42, min: 0, max: 100, step: 1, size: 'md', placeholder: '', disabled: false, error: false } }}
+      </template>
     </Variant>
 
     <Variant title="Sizes">
@@ -47,7 +63,7 @@ const sizes = ['sm', 'md', 'lg'] as const
           <p style="margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.05em;">
             {{ size }}
           </p>
-          <NumberInput :model-value="42" :size="size" />
+          <NumberInput v-model="sizeValues[size]" :size="size" />
         </div>
       </div>
     </Variant>
@@ -56,22 +72,22 @@ const sizes = ['sm', 'md', 'lg'] as const
       <div style="padding: 2rem; max-width: 300px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem;">
         <div>
           <p style="margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--text-primary, #e2e8f0);">Sample count (0-384)</p>
-          <NumberInput :model-value="96" :min="0" :max="384" :step="1" placeholder="Samples" />
+          <NumberInput v-model="samples" :min="0" :max="384" :step="1" placeholder="Samples" />
         </div>
         <div>
           <p style="margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--text-primary, #e2e8f0);">Temperature (step 0.5)</p>
-          <NumberInput :model-value="37" :min="0" :max="100" :step="0.5" />
+          <NumberInput v-model="temperature" :min="0" :max="100" :step="0.5" />
         </div>
         <div>
           <p style="margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--text-primary, #e2e8f0);">Volume in uL (step 10)</p>
-          <NumberInput :model-value="100" :min="0" :max="1000" :step="10" />
+          <NumberInput v-model="volume" :min="0" :max="1000" :step="10" />
         </div>
       </div>
     </Variant>
 
     <Variant title="Error State">
       <div style="padding: 2rem; max-width: 300px; margin: 0 auto;">
-        <NumberInput :model-value="999" :max="100" error />
+        <NumberInput v-model="overMax" :max="100" error />
       </div>
     </Variant>
 
@@ -83,16 +99,16 @@ const sizes = ['sm', 'md', 'lg'] as const
 
     <Variant title="Empty with Placeholder">
       <div style="padding: 2rem; max-width: 300px; margin: 0 auto;">
-        <NumberInput placeholder="Enter value..." />
+        <NumberInput v-model="empty" placeholder="Enter value..." />
       </div>
     </Variant>
 
-    <Variant title="Hover-Reveal Steppers (default)">
+    <Variant title="Steppers (always visible)">
       <template #default="{ state }">
         <div style="padding: 2rem; max-width: 320px; display: flex; flex-direction: column; gap: 1rem;">
           <NumberInput v-model="state.value" :step="0.5" />
           <p style="margin: 0; font-size: 0.8125rem; color: var(--text-muted);">
-            Hover or focus to reveal the ↑/↓ steppers. Rest = clean.
+            Two horizontal steppers, hairline-divided. Arrow keys, PageUp/PageDown also step.
           </p>
         </div>
       </template>
@@ -106,16 +122,19 @@ const sizes = ['sm', 'md', 'lg'] as const
 
     <Variant title="With unit suffix">
       <div style="padding: 2rem; max-width: 320px; display: flex; flex-direction: column; gap: 0.75rem;">
-        <NumberInput :model-value="12.5" unit="mg" :step="0.1" />
-        <NumberInput :model-value="7.4" unit="pH" :step="0.1" :min="0" :max="14" />
-        <NumberInput :model-value="96" unit="wells" :step="1" />
+        <NumberInput v-model="mass" unit="mg" :step="0.1" />
+        <NumberInput v-model="ph" unit="pH" :step="0.1" :min="0" :max="14" />
+        <NumberInput v-model="wells" unit="wells" :step="1" />
       </div>
     </Variant>
 
     <Variant title="Slider mode (min + max provided)">
       <div style="padding: 2rem; max-width: 320px; display: flex; flex-direction: column; gap: 1rem;">
-        <NumberInput :model-value="7.4" :min="0" :max="14" :step="0.1" unit="pH" />
-        <NumberInput :model-value="45" :min="0" :max="100" :step="1" unit="%" />
+        <NumberInput v-model="sliderPh" :min="0" :max="14" :step="0.1" unit="pH" />
+        <NumberInput v-model="percent" :min="0" :max="100" :step="1" unit="%" />
+        <p style="margin: 0; font-size: 0.8125rem; color: var(--text-muted);">
+          Drag anywhere in the field (outside the text) to scrub. Home/End jump to min/max.
+        </p>
       </div>
     </Variant>
   </Story>

package/src/components/NumberInput.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-/** Numeric input with increment/decrement buttons, optional unit label, and slider progress track. */
+/** Numeric input with always-visible steppers, optional unit label, and (with min+max) an in-field drag-to-scrub range fill. */
 import { computed } from 'vue'
 
 interface Props {
@@ -33,7 +33,7 @@ const sliderPercent = computed(() => {
   if (min === undefined || max === undefined || props.modelValue === undefined) return 0
   const range = max - min
   if (range === 0) return 0
-  return ((props.modelValue - min) / range) * 100
+  return Math.min(100, Math.max(0, ((props.modelValue - min) / range) * 100))
 })
 
 const canDecrement = computed(() => {
@@ -55,6 +55,17 @@ function clamp(value: number): number {
   return result
 }
 
+/** Clamp and trim float noise (0.1 + 0.2 → 0.3) without losing real precision. */
+function settle(value: number): number {
+  return Number(clamp(value).toFixed(10))
+}
+
+/** Snap to the step grid anchored at `min`, for pointer scrubbing. */
+function snap(value: number): number {
+  const origin = props.min ?? 0
+  return settle(origin + Math.round((value - origin) / props.step) * props.step)
+}
+
 function handleInput(event: Event) {
   const target = event.target as HTMLInputElement
   const value = target.value === '' ? undefined : Number(target.value)
@@ -65,24 +76,70 @@ function handleInput(event: Event) {
   }
 }
 
-function handleSliderInput(event: Event) {
-  const target = event.target as HTMLInputElement
-  const value = Number(target.value)
-  if (!isNaN(value)) {
-    emit('update:modelValue', clamp(value))
-  }
+function nudge(delta: number) {
+  if (props.disabled) return
+  if (delta < 0 && !canDecrement.value) return
+  if (delta > 0 && !canIncrement.value) return
+  const current = props.modelValue ?? (delta < 0 ? props.max ?? 0 : props.min ?? 0)
+  emit('update:modelValue', settle(current + delta))
 }
 
 function decrement() {
-  if (props.disabled || !canDecrement.value) return
-  const current = props.modelValue ?? (props.max ?? 0)
-  emit('update:modelValue', clamp(current - props.step))
+  nudge(-props.step)
 }
 
 function increment() {
-  if (props.disabled || !canIncrement.value) return
-  const current = props.modelValue ?? (props.min ?? 0)
-  emit('update:modelValue', clamp(current + props.step))
+  nudge(props.step)
+}
+
+// Home/End only apply on the slider surface: inside the text input they must
+// keep moving the caret.
+function handleKeydown(event: KeyboardEvent, allowJump = false) {
+  if (props.disabled) return
+  switch (event.key) {
+    case 'ArrowUp': increment(); break
+    case 'ArrowDown': decrement(); break
+    case 'PageUp': nudge(props.step * 10); break
+    case 'PageDown': nudge(-props.step * 10); break
+    case 'Home':
+      if (!allowJump || props.min === undefined) return
+      emit('update:modelValue', props.min)
+      break
+    case 'End':
+      if (!allowJump || props.max === undefined) return
+      emit('update:modelValue', props.max)
+      break
+    default:
+      return
+  }
+  event.preventDefault()
+}
+
+// Drag-to-scrub across the field. Pointerdown on the <input> itself is left
+// alone so click-to-place-caret and double-click-to-select keep working.
+function scrubTo(clientX: number, area: HTMLElement) {
+  const rect = area.getBoundingClientRect()
+  if (rect.width === 0 || props.min === undefined || props.max === undefined) return
+  const ratio = Math.min(1, Math.max(0, (clientX - rect.left) / rect.width))
+  emit('update:modelValue', snap(props.min + ratio * (props.max - props.min)))
+}
+
+function handleScrubStart(event: PointerEvent) {
+  if (props.disabled || !isSliderMode.value) return
+  if ((event.target as HTMLElement).tagName === 'INPUT') return
+  const area = event.currentTarget as HTMLElement
+  event.preventDefault()
+  area.setPointerCapture?.(event.pointerId)
+  scrubTo(event.clientX, area)
+  const move = (e: PointerEvent) => scrubTo(e.clientX, area)
+  const stop = () => {
+    area.removeEventListener('pointermove', move)
+    area.removeEventListener('pointerup', stop)
+    area.removeEventListener('pointercancel', stop)
+  }
+  area.addEventListener('pointermove', move)
+  area.addEventListener('pointerup', stop)
+  area.addEventListener('pointercancel', stop)
 }
 </script>
 
@@ -97,62 +154,66 @@ function increment() {
     ]"
   >
     <div class="mint-number-input__field">
-      <input
-        type="number"
-        :value="modelValue"
-        :min="min"
-        :max="max"
-        :step="step"
-        :disabled="disabled"
-        :placeholder="placeholder"
-        :class="[
-          'mint-number-input__input',
-          `mint-number-input__input--${size}`,
-        ]"
-        @input="handleInput"
-      />
-
-      <span v-if="unit" class="mint-number-input__unit">{{ unit }}</span>
+      <div
+        class="mint-number-input__scrub"
+        :style="isSliderMode ? { '--mint-number-input-fill': `${sliderPercent}%` } : undefined"
+        :role="isSliderMode ? 'slider' : undefined"
+        :tabindex="isSliderMode && !disabled ? 0 : undefined"
+        :aria-valuenow="isSliderMode ? modelValue : undefined"
+        :aria-valuemin="isSliderMode ? min : undefined"
+        :aria-valuemax="isSliderMode ? max : undefined"
+        :aria-orientation="isSliderMode ? 'horizontal' : undefined"
+        @pointerdown="handleScrubStart"
+        @keydown.self="isSliderMode && handleKeydown($event, true)"
+      >
+        <template v-if="isSliderMode">
+          <span class="mint-number-input__wash" aria-hidden="true" />
+          <span class="mint-number-input__rule" aria-hidden="true" />
+        </template>
+        <input
+          type="number"
+          :value="modelValue"
+          :min="min"
+          :max="max"
+          :step="step"
+          :disabled="disabled"
+          :placeholder="placeholder"
+          :class="[
+            'mint-number-input__input',
+            `mint-number-input__input--${size}`,
+          ]"
+          @input="handleInput"
+          @keydown="handleKeydown"
+        />
+        <span v-if="unit" class="mint-number-input__unit">{{ unit }}</span>
+      </div>
 
       <div class="mint-number-input__steppers" aria-hidden="true">
         <button
           type="button"
           tabindex="-1"
-          aria-label="Increase value"
-          :disabled="disabled || !canIncrement"
-          class="mint-number-input__stepper mint-number-input__stepper--up"
-          @click="increment"
+          aria-label="Decrease value"
+          :disabled="disabled || !canDecrement"
+          class="mint-number-input__stepper mint-number-input__stepper--down"
+          @click="decrement"
         >
-          <svg viewBox="0 0 10 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M1 5l4-4 4 4" />
+          <svg viewBox="0 0 10 10" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round">
+            <path d="M2 5h6" />
           </svg>
         </button>
         <button
           type="button"
           tabindex="-1"
-          aria-label="Decrease value"
-          :disabled="disabled || !canDecrement"
-          class="mint-number-input__stepper mint-number-input__stepper--down"
-          @click="decrement"
+          aria-label="Increase value"
+          :disabled="disabled || !canIncrement"
+          class="mint-number-input__stepper mint-number-input__stepper--up"
+          @click="increment"
         >
-          <svg viewBox="0 0 10 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M1 1l4 4 4-4" />
+          <svg viewBox="0 0 10 10" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round">
+            <path d="M5 2v6" /><path d="M2 5h6" />
           </svg>
         </button>
       </div>
     </div>
-
-    <input
-      v-if="isSliderMode"
-      type="range"
-      :value="modelValue ?? min"
-      :min="min"
-      :max="max"
-      :step="step"
-      :disabled="disabled"
-      :style="{ '--mint-slider-fill': `${sliderPercent}%` }"
-      class="mint-number-input__slider"
-      @input="handleSliderInput"
-    />
   </div>
 </template>

package/src/components/PluginWorkspaceView.props.ts

@@ -97,9 +97,9 @@ export interface PluginWorkspaceViewProps {
   sidebarSubtitle?: string
   /** Optional compact badge/count rendered in the sidebar header. */
   sidebarBadge?: string | number
-  /** AppSidebar visual preset. `analysis` matches the LEAF-style MINT analysis sidebar language. */
+  /** @deprecated No-op. AppSidebar has one look now; the former `analysis` preset is the default. */
   sidebarVariant?: PluginWorkspaceSidebarVariant
-  /** Sidebar CSS width. Defaults to AppSidebar's variant width. */
+  /** Sidebar CSS width. Defaults to AppSidebar's width. */
   sidebarWidth?: string
   /** Sidebar position in AppLayout. */
   sidebarPosition?: 'left' | 'right'
@@ -113,7 +113,7 @@ export interface PluginWorkspaceViewProps {
   sidebarContentId?: string
   /** Compact AppSidebar density. */
   dense?: boolean
-  /** Show a built-in collapse/expand button in the sidebar chrome. Defaults to AppSidebar's variant behavior. */
+  /** Show a built-in collapse/expand button in the sidebar chrome. Defaults to true. */
   sidebarCollapsible?: boolean
   /** Sidebar width when collapsed. */
   sidebarCollapsedWidth?: string

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/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. */

package/src/composables/usePluginWorkspace.ts

@@ -167,7 +167,6 @@ export function usePluginWorkspace(options: UsePluginWorkspaceOptions): UsePlugi
     title: props.sidebarTitle,
     subtitle: props.sidebarSubtitle,
     badge: props.sidebarBadge,
-    variant: props.sidebarVariant ?? 'analysis',
     panels: props.panels ?? {},
     activeView: navigationState.resolvedActiveView.value,
     floating: false,
@@ -187,7 +186,7 @@ export function usePluginWorkspace(options: UsePluginWorkspaceOptions): UsePlugi
     formDisabled: props.formDisabled ?? false,
     formReadonly: props.formReadonly ?? false,
     formSize: props.formSize ?? 'sm',
-    collapsible: props.sidebarCollapsible,
+    collapsible: props.sidebarCollapsible ?? true,
     collapsed: props.sidebarCollapsed,
     defaultCollapsed: props.defaultSidebarCollapsed ?? false,
     collapsedWidth: props.sidebarCollapsedWidth ?? '3rem',

package/src/composables/useToast.ts

@@ -1,15 +1,31 @@
 import { ref } from 'vue'
-import type { Toast } from '../types'
+import type { Toast, ToastOptions } from '../types'
 
 const toasts = ref<Toast[]>([])
 let nextId = 0
 
 /** Reactive global toast queue with success/error/warning/info variants and auto-dismiss timers. */
 export function useToast() {
-  function show(message: string, type: Toast['type'] = 'success', duration = 3500) {
+  /** Push a structured toast. `progress: 'indeterminate'` is the in-progress form and never auto-dismisses. */
+  function push(options: ToastOptions): number {
     const id = nextId++
-    toasts.value.push({ id, message, type, duration })
-    setTimeout(() => dismiss(id), duration)
+    const duration = options.duration ?? 3500
+    toasts.value.push({
+      id,
+      type: 'success',
+      ...options,
+      message: options.message ?? options.title,
+      duration,
+      actions: options.actions?.slice(0, 2),
+    })
+    if (options.progress !== 'indeterminate') {
+      setTimeout(() => dismiss(id), duration)
+    }
+    return id
+  }
+
+  function show(message: string, type: Toast['type'] = 'success', duration = 3500) {
+    push({ title: message, type, duration })
   }
 
   function success(message: string, duration = 3500) {
@@ -36,5 +52,5 @@ export function useToast() {
     toasts.value = []
   }
 
-  return { toasts, show, success, error, warning, info, dismiss, clear }
+  return { toasts, push, show, success, error, warning, info, dismiss, clear }
 }