@morscherlab/mint-sdk 1.2.10 → 1.3.0-beta.10

package/src/components/FilePicker.story.vue

@@ -2,30 +2,85 @@
 import { ref } from 'vue'
 import BaseButton from './BaseButton.vue'
 import FilePicker from './FilePicker.vue'
-import type { PickerAdapter, PickerNode } from '../types/filePicker'
+import type { PickerAdapter, PickerNode, PickerSelectionMode, PickerView } from '../types/filePicker'
 
 const open = ref(true)
+const mountsOpen = ref(true)
 const hideRestricted = ref(true)
+
+function adapterFor(items: PickerNode[], mounts = false): PickerAdapter {
+  return {
+    mounts,
+    listRoot: async () => items.filter((node) => !node.parentPath),
+    listChildren: async (path) => items.filter((node) => node.parentPath === path),
+    search: async (query, scope) => items.filter((node) =>
+      (scope.recursive ? !scope.path || node.path.startsWith(`${scope.path}/`) : (node.parentPath ?? '') === scope.path)
+      && node.name.toLowerCase().includes(query.toLowerCase()),
+    ),
+  }
+}
+
 const nodes: PickerNode[] = [
   { kind: 'folder', path: 'shared', name: 'Shared data' },
   { kind: 'folder', path: 'restricted', name: 'Restricted data' },
-  { kind: 'file', path: 'shared/run.raw', parentPath: 'shared', name: 'run.raw', format: 'raw', bytes: 4096 },
+  { kind: 'file', path: 'shared/run.raw', parentPath: 'shared', name: 'run.raw', format: 'raw', bytes: 4096, modifiedAt: '2026-09-24T14:32:00' },
   { kind: 'file', path: 'restricted/private.raw', parentPath: 'restricted', name: 'private.raw', format: 'raw', bytes: 2048 },
 ]
-const adapter: PickerAdapter = {
-  listRoot: async () => nodes.filter((node) => !node.parentPath),
-  listChildren: async (path) => nodes.filter((node) => node.parentPath === path),
-  search: async (query, scope) => nodes.filter((node) =>
-    (scope.recursive ? !scope.path || node.path.startsWith(`${scope.path}/`) : (node.parentPath ?? '') === scope.path)
-    && node.name.toLowerCase().includes(query.toLowerCase()),
-  ),
-}
+const adapter = adapterFor(nodes)
 // The host owns this rule; its server must also enforce access independently.
 const systemFilter = (node: PickerNode) => !hideRestricted.value || !node.path.startsWith('restricted')
+
+const mountNodes: PickerNode[] = [
+  { kind: 'folder', path: 'proj', name: 'Project files' },
+  { kind: 'folder', path: 'share', name: 'Lab share' },
+  { kind: 'folder', path: 'archive', name: 'Archive', unavailableReason: 'This mount is offline.' },
+  { kind: 'folder', path: 'proj/raw', parentPath: 'proj', name: 'raw' },
+  { kind: 'file', path: 'proj/S-0012_P1-B3.mzML', parentPath: 'proj', name: 'S-0012_P1-B3.mzML', format: 'mzML', bytes: 412 * 1024 ** 2, modifiedAt: '2026-09-24T14:32:00' },
+  { kind: 'file', path: 'proj/S-0013_P1-B4.mzML', parentPath: 'proj', name: 'S-0013_P1-B4.mzML', format: 'mzML', bytes: 398 * 1024 ** 2, modifiedAt: '2026-09-24T14:47:00' },
+  { kind: 'file', path: 'proj/QC_pool_01.mzML', parentPath: 'proj', name: 'QC_pool_01.mzML', format: 'mzML', bytes: 405 * 1024 ** 2, modifiedAt: '2026-09-24T13:10:00' },
+  { kind: 'file', path: 'proj/locked_vendor.raw', parentPath: 'proj', name: 'locked_vendor.raw', format: 'raw', bytes: 1.2 * 1024 ** 3, modifiedAt: '2026-09-23T18:02:00', unavailableReason: 'No read permission' },
+  { kind: 'file', path: 'proj/raw/S-0012_P1-B3.raw', parentPath: 'proj/raw', name: 'S-0012_P1-B3.raw', format: 'raw', bytes: 1.1 * 1024 ** 3, modifiedAt: '2026-09-24T14:30:00' },
+  { kind: 'folder', path: 'share/methods', parentPath: 'share', name: 'methods' },
+  { kind: 'file', path: 'share/methods/RP-pos-15min.meth', parentPath: 'share/methods', name: 'RP-pos-15min.meth', format: 'meth', bytes: 84 * 1024, modifiedAt: '2026-08-30T10:00:00' },
+]
+const mountAdapter = adapterFor(mountNodes, true)
+
+function initState() {
+  return {
+    view: 'list' as PickerView,
+    selectionMode: 'folder+files' as PickerSelectionMode,
+    title: 'Choose data files',
+  }
+}
 </script>
 
 <template>
   <Story title="Forms/FilePicker">
+    <Variant title="Mounts as sources" :init-state="initState">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 600px;">
+          <BaseButton @click="mountsOpen = true">Choose data</BaseButton>
+          <FilePicker
+            v-model:open="mountsOpen"
+            :title="state.title"
+            :adapter="mountAdapter"
+            :sources="['server', 'localFile']"
+            :capabilities="{ server: { formats: ['mzML', 'raw'] } }"
+            :selection-mode="state.selectionMode"
+            :view="state.view"
+          />
+        </div>
+      </template>
+      <template #controls="{ state }">
+        <HstText v-model="state.title" title="Title" />
+        <HstSelect v-model="state.view" title="View" :options="['list', 'tree']" />
+        <HstSelect
+          v-model="state.selectionMode"
+          title="Selection mode"
+          :options="['single-file', 'multi-file', 'folder', 'folder+files']"
+        />
+      </template>
+    </Variant>
     <Variant title="Local upload and system filter">
       <div style="padding: 2rem; max-width: 600px;">
         <BaseButton @click="open = true">Choose data</BaseButton>

package/src/components/FilePicker.vue

@@ -1,23 +1,33 @@
 <script setup lang="ts">
-/** Adapter-driven file picker with Finder-style selection, disclosure and metadata preview. */
-import { ref } from 'vue'
+/**
+ * Adapter-driven file picker: mounts and local files as header sources, a flat
+ * (or tree) listing with multi-select, a metadata preview and a selection receipt.
+ *
+ * @example Recommended
+ * ```vue
+ * <FilePicker v-model:open="open" :adapter="usePlatformFilePickerAdapter()" @select="use" />
+ * ```
+ */
+import { computed, ref, useTemplateRef } from 'vue'
+import BaseModal from './BaseModal.vue'
 import BaseButton from './BaseButton.vue'
 import BaseInput from './BaseInput.vue'
-import IconButton from './IconButton.vue'
+import ActionMenu from './ActionMenu.vue'
+import SegmentedControl from './SegmentedControl.vue'
 import FileUploader from './FileUploader.vue'
-import FileBrowserDialogInternal from './internal/FileBrowserDialogInternal.vue'
-import FilePickerTreeInternal from './internal/FilePickerTreeInternal.vue'
+import FilePickerListInternal from './internal/FilePickerListInternal.vue'
 import FilePickerPreviewInternal from './internal/FilePickerPreviewInternal.vue'
-import { formatBytes } from './fileBrowserPresentation'
+import { formatBytes } from './internal/filePickerPresentation'
 import { useFilePicker } from '../composables/useFilePicker'
-import { pickerReason } from '../composables/filePicker/validation'
 import type {
   PickerAdapter,
   PickerCapabilities,
   PickerNode,
   PickerSelection,
   PickerSelectionMode,
+  PickerSort,
   PickerSource,
+  PickerView,
 } from '../types/filePicker'
 
 interface Props {
@@ -29,6 +39,10 @@ interface Props {
   initialPath?: string
   initialSelection?: PickerSelection | null
   title?: string
+  /** `list` shows one folder at a time; `tree` adds disclosure triangles. */
+  view?: PickerView
+  /** Row order on each open; the user can change it from the path bar until closing. */
+  defaultSort?: PickerSort
   /** Host-owned visibility/selection filter; backend must still enforce access. */
   systemFilter?: (node: PickerNode, source: PickerSource) => boolean
 }
@@ -39,6 +53,8 @@ const props = withDefaults(defineProps<Props>(), {
   initialPath: '',
   initialSelection: null,
   title: 'Choose data',
+  view: 'list',
+  defaultSort: 'newest',
 })
 const emit = defineEmits<{
   'update:open': [open: boolean]
@@ -49,11 +65,15 @@ const uploadError = ref('')
 const {
   previewNode,
   sourceNames,
-  sourceIcons,
+  mounts,
+  segments,
+  activeSegment,
+  mountView,
   allowedSources,
   source,
   query,
   recursive,
+  sort,
   skipBlanks,
   reviewing,
   nav,
@@ -69,11 +89,11 @@ const {
   focused,
   resolving,
   resolutionError,
-  searchArea,
   confirmLabel,
   folderCount,
   canConfirm,
-  switchSource,
+  chooseSegment,
+  clearSelection,
   selectNode,
   enter,
   up,
@@ -83,112 +103,162 @@ const {
   cancel,
   confirm,
   keyboard,
-} = useFilePicker(props, emit)
+} = useFilePicker(props, emit, useTemplateRef<HTMLElement>('searchArea'))
+
+// The preview can outlive a mount switch, so name the mount that holds the node.
+const sourceLabel = computed(() => {
+  const node = previewNode.value
+  if (!mountView.value || !node) return sourceNames[source.value]
+  for (let at: string | null | undefined = node.path; at; at = nav.nodes.value.get(at)?.parentPath) {
+    const mount = mounts.value.find((item) => item.path === at)
+    if (mount) return mount.name
+  }
+  return mounts.value.find((item) => item.path === props.adapter.mountOf?.(node.path))?.name ?? sourceNames.server
+})
+const SORT_LABELS: Record<PickerSort, string> = {
+  newest: 'Newest first',
+  oldest: 'Oldest first',
+  name: 'Name A–Z',
+  'name-desc': 'Name Z–A',
+}
+const sortItems = computed(() =>
+  (Object.keys(SORT_LABELS) as PickerSort[]).map((id) => ({
+    id,
+    label: SORT_LABELS[id],
+    checked: sort.value === id,
+  })),
+)
+const accepts = computed(() =>
+  (capability.value?.formats ?? []).map((format) => `.${format.replace(/^\./, '')}`).join(' '),
+)
+const summary = computed(() => {
+  if (!roots.value.length) return 'No selection'
+  const files = chosen.value.files.length
+  return [
+    ...(folderCount.value
+      ? [`${folderCount.value} folder${folderCount.value === 1 ? '' : 's'}`]
+      : []),
+    `${files} file${files === 1 ? '' : 's'} selected`,
+    resolving.value ? 'Checking…' : formatBytes(chosen.value.bytes),
+  ].join(' · ')
+})
 </script>
 
 <template>
-  <FileBrowserDialogInternal
-    :open="open"
-    :label="title"
-    size="full"
-    variant="picker"
-    @close="cancel"
-  >
+  <BaseModal :model-value="open" size="xl" layout="plain" @close="cancel">
     <template #header>
-      <div v-if="source === 'server'" ref="searchArea" class="mint-picker__search">
-        <svg
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="1.8"
-          aria-hidden="true"
-        >
-          <circle cx="10.5" cy="10.5" r="7" />
-          <path d="m16 16 5 5" />
-        </svg>
-        <BaseInput
-          v-model="query"
-          aria-label="Search folders and files"
-          placeholder="Search folders and files…"
-        />
-        <kbd>/</kbd>
-      </div>
-      <h2 v-else class="mint-file-browser__title mint-picker__local-title">{{ title }}</h2>
-      <div
-        v-if="allowedSources.length > 1"
-        class="mint-picker__sources"
-        role="group"
-        aria-label="Data source"
-        :style="{ '--picker-source-index': allowedSources.indexOf(source) }"
-      >
-        <span class="mint-picker__source-indicator" aria-hidden="true" />
-        <IconButton
-          v-for="item in allowedSources"
-          :key="item"
+      <div class="mint-picker__head" @keydown="keyboard">
+        <h2 class="mint-picker__title">{{ title }}</h2>
+        <SegmentedControl
+          v-if="segments.length > 1"
+          class="mint-picker__sources"
+          aria-label="Data source"
           size="sm"
-          variant="ghost"
-          :label="sourceNames[item]"
-          :aria-pressed="item === source"
-          @click="switchSource(item)"
-        >
-          <svg
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="1.8"
-            aria-hidden="true"
+          :options="segments"
+          :model-value="activeSegment"
+          @update:model-value="chooseSegment"
+        />
+        <div v-if="source === 'server'" ref="searchArea" class="mint-picker__search">
+          <BaseInput
+            v-model="query"
+            size="sm"
+            aria-label="Search folders and files"
+            placeholder="Search this source"
           >
-            <path :d="sourceIcons[item]" />
-          </svg>
-        </IconButton>
+            <template #prefix>
+              <svg
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.8"
+                aria-hidden="true"
+              >
+                <circle cx="10.5" cy="10.5" r="7" />
+                <path d="m16 16 5 5" />
+              </svg>
+            </template>
+            <template #suffix><kbd>/</kbd></template>
+          </BaseInput>
+        </div>
       </div>
     </template>
     <div :key="source" class="mint-picker mint-picker__source-panel" @keydown="keyboard">
       <div v-if="source === 'server'" class="mint-picker__pathbar">
-        <IconButton
-          label="Up one level"
-          size="sm"
-          variant="secondary"
-          :disabled="!path"
-          @click="up()"
-          ><svg
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            aria-hidden="true"
-          >
-            <path d="M11 17l-5-5 5-5M6 12h13" /></svg
-        ></IconButton>
         <nav aria-label="Breadcrumb" class="mint-picker__breadcrumbs">
-          <BaseButton variant="ghost" size="sm" @click="up('')">{{
-            sourceNames[source]
-          }}</BaseButton>
-          <template v-for="crumb in trail" :key="crumb.path"
-            ><span>/</span
-            ><BaseButton variant="ghost" size="sm" @click="up(crumb.path)">{{
-              crumb.label
-            }}</BaseButton></template
+          <button
+            v-if="!mountView"
+            type="button"
+            class="mint-picker__crumb"
+            :aria-current="trail.length ? undefined : 'location'"
+            @click="up('')"
           >
+            {{ sourceNames[source] }}
+          </button>
+          <template v-for="(crumb, index) in trail" :key="crumb.path">
+            <svg
+              v-if="index > 0 || !mountView"
+              class="mint-picker__crumb-separator"
+              viewBox="0 0 16 16"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.5"
+              aria-hidden="true"
+            >
+              <path d="M6 4l4 4-4 4" />
+            </svg>
+            <button
+              type="button"
+              class="mint-picker__crumb"
+              :aria-current="index === trail.length - 1 ? 'location' : undefined"
+              @click="up(crumb.path)"
+            >
+              {{ crumb.label }}
+            </button>
+          </template>
         </nav>
-        <BaseButton
-          variant="ghost"
-          size="sm"
+        <span v-if="accepts" class="mint-picker__accepts">Accepts {{ accepts }}</span>
+        <ActionMenu
+          label="Sort"
+          :items="sortItems"
+          @select="sort = $event.id as PickerSort"
+        >
+          <template #trigger="{ open: menuOpen, toggle, keydown }">
+            <button
+              type="button"
+              class="mint-picker__sort"
+              aria-haspopup="menu"
+              :aria-expanded="menuOpen"
+              :aria-label="`Sort: ${SORT_LABELS[sort]}`"
+              @click="toggle"
+              @keydown="keydown"
+            >
+              {{ SORT_LABELS[sort] }}
+              <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
+                <path d="M4 6l4 4 4-4" />
+              </svg>
+            </button>
+          </template>
+        </ActionMenu>
+        <button
+          type="button"
           class="mint-picker__scope"
           :aria-pressed="recursive"
           @click="recursive = !recursive"
-          >{{ recursive ? 'Subfolders' : 'This folder' }}</BaseButton
         >
-        <IconButton size="sm" label="Refresh location" :disabled="loading" @click="refresh()"
-          ><svg
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="1.8"
-            aria-hidden="true"
-          >
-            <path d="M20 7v5h-5M4 17v-5h5M6 8a7 7 0 0 1 12-2l2 3M4 15l2 3a7 7 0 0 0 12-2" /></svg
-        ></IconButton>
+          {{ recursive ? 'Subfolders' : 'This folder' }}
+        </button>
+        <button
+          type="button"
+          class="mint-picker__scope mint-picker__refresh"
+          aria-label="Refresh location"
+          title="Refresh location"
+          :disabled="loading"
+          @click="refresh()"
+        >
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
+            <path d="M20 7v5h-5M4 17v-5h5M6 8a7 7 0 0 1 12-2l2 3M4 15l2 3a7 7 0 0 0 12-2" />
+          </svg>
+        </button>
       </div>
       <div v-if="!allowedSources.length" class="mint-picker__empty">
         No data sources are enabled.
@@ -197,10 +267,21 @@ const {
         <div v-if="source === 'localFile'" class="mint-picker__local-upload">
           <FileUploader
             size="lg"
-            :mode="selectionMode === 'folder' ? 'folder' : selectionMode === 'single-file' ? 'file' : 'file+folder'"
+            :mode="
+              selectionMode === 'folder'
+                ? 'folder'
+                : selectionMode === 'single-file'
+                  ? 'file'
+                  : 'file+folder'
+            "
             :multiple="selectionMode !== 'single-file'"
             :show-files="false"
-            @upload="(...args) => { uploadError = ''; chooseLocal(...args) }"
+            @upload="
+              (...args) => {
+                uploadError = ''
+                chooseLocal(...args)
+              }
+            "
             @error="uploadError = $event"
           />
           <p v-if="uploadError || error || resolutionError" role="alert">
@@ -208,19 +289,18 @@ const {
           </p>
         </div>
         <div v-else class="mint-picker__workspace">
-          <FilePickerTreeInternal
-            :empty-title="
-              path
-                ? 'No readable files'
-                : 'No server locations configured'
-            "
+          <FilePickerListInternal
+            :empty-title="path ? 'No readable files' : 'No server locations configured'"
+            :view="view"
             :rows="rows"
             :loading="loading"
             :error="error"
             :query="query"
+            :truncated="nav.truncated.value"
             :mode="selectionMode"
             :selected="selection.selected"
-            :reason="(node) => pickerReason(selection.exclusion(node), node)"
+            :selectable="selection.selectable"
+            :exclusion="selection.exclusion"
             :progress="selection.folderProgress"
             :focus-path="selection.focusPath.value"
             @select="selectNode"
@@ -233,7 +313,7 @@ const {
           <FilePickerPreviewInternal
             :node="previewNode"
             :total-count="focused?.kind === 'folder' ? focused.fileCount : undefined"
-            :source="source"
+            :source-label="sourceLabel"
             :exclusions="chosen.excluded"
             :busy="resolving"
             :error="resolutionError"
@@ -247,21 +327,23 @@ const {
     <template #footer>
       <div class="mint-picker__footer">
         <div class="mint-picker__receipt" role="status">
-          <span v-if="folderCount" class="mint-picker__badge"
-            >{{ folderCount }} folder{{ folderCount === 1 ? '' : 's' }}</span
-          >
-          <span v-if="chosen.files.length" class="mint-picker__badge"
-            >{{ chosen.files.length }} {{ chosen.files.length === 1 ? 'file' : 'files' }}</span
+          <span class="mint-picker__summary">{{ summary }}</span>
+          <button
+            v-if="roots.length"
+            type="button"
+            class="mint-picker__link mint-picker__clear"
+            @click="clearSelection"
           >
-          <span v-if="roots.length">{{ resolving ? 'Checking…' : formatBytes(chosen.bytes) }}</span>
-          <span v-else>No selection</span>
-          <BaseButton
+            Clear
+          </button>
+          <button
             v-if="chosen.excluded.length && source === 'server'"
-            variant="ghost"
-            size="sm"
+            type="button"
+            class="mint-picker__link"
             @click="reviewing = !reviewing"
-            >{{ chosen.excluded.length }} skipped</BaseButton
           >
+            {{ chosen.excluded.length }} skipped
+          </button>
           <span v-else-if="chosen.excluded.length">{{ chosen.excluded.length }} skipped</span>
           <BaseButton
             v-if="capability?.isBlank"
@@ -280,5 +362,5 @@ const {
         </div>
       </div>
     </template>
-  </FileBrowserDialogInternal>
+  </BaseModal>
 </template>

package/src/components/FitPanel.story.vue

@@ -1,17 +1,58 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import FitPanel from './FitPanel.vue'
-import type { FitState, FitResultSummary } from '../types'
+import type { FitState, FitResultSummary, FitSeries } from '../types'
 
 const states: FitState[] = ['idle', 'running', 'completed', 'error']
 
 const sampleResults: FitResultSummary[] = [
-  { label: 'IC50', value: '2.34 uM', variant: 'success' },
-  { label: 'Hill Slope', value: '-1.12' },
-  { label: 'R-squared', value: '0.987', variant: 'success' },
-  { label: 'Max Response', value: '98.2%' },
+  { label: 'IC50', value: '2.34 µM' },
+  { label: 'Hill slope', value: '-1.12' },
+  { label: 'Max response', value: '98.2%' },
+  { label: 'R²', value: '0.987 ≥ 0.95', variant: 'success', verdict: true },
+  { label: 'Outliers', value: '2 excluded', variant: 'warning', verdict: true },
 ]
 
+const fitSeries: FitSeries[] = [
+  {
+    label: 'Control',
+    results: [
+      { label: 'IC50', unit: 'nM', value: '631', ci: '512 – 778' },
+      { label: 'Hill slope', value: '1.10', ci: '0.94 – 1.26' },
+      { label: 'Top', unit: '%', value: '99.2', ci: '96.8 – 101.6' },
+      { label: 'Bottom', unit: '%', value: '0.8', ci: '−1.9 – 3.5' },
+      { label: 'R²', value: '0.991 ≥ 0.95', variant: 'success', verdict: true },
+      { label: 'No outliers', value: '', variant: 'success', verdict: true },
+    ],
+  },
+  {
+    label: 'Treatment A',
+    results: [
+      { label: 'IC50', unit: 'nM', value: '39.8', ci: '33.1 – 47.9' },
+      { label: 'Hill slope', value: '1.21', ci: '1.02 – 1.40' },
+      { label: 'Top', unit: '%', value: '98.7', ci: '95.9 – 101.5' },
+      { label: 'Bottom', unit: '%', value: '1.4', ci: '−1.2 – 4.0' },
+      { label: 'R²', value: '0.982 ≥ 0.95', variant: 'success', verdict: true },
+      { label: '2 outliers excluded', value: '(Grubbs)', variant: 'warning', verdict: true },
+    ],
+  },
+  {
+    label: 'Treatment B',
+    results: [
+      { label: 'IC50', unit: 'nM', value: '7.94', ci: '5.62 – 11.2' },
+      { label: 'Hill slope', value: '0.88', ci: '0.66 – 1.10' },
+      { label: 'Top', unit: '%', value: '97.1', ci: '93.0 – 101.2' },
+      { label: 'Bottom', unit: '%', value: '3.2', ci: '−0.8 – 7.2' },
+      { label: 'R²', value: '0.931 < 0.95', variant: 'warning', verdict: true },
+      { label: '1 outlier excluded', value: '(Grubbs)', variant: 'warning', verdict: true },
+    ],
+  },
+]
+
+function initSeriesState() {
+  return { activeSeries: 1, parameterLabel: 'Parameter', valueLabel: 'Value', ciLabel: '95% CI' }
+}
+
 const playgroundState = ref<FitState>('idle')
 const playgroundProgress = ref(45)
 const playgroundDisabled = ref(false)
@@ -61,6 +102,31 @@ function handleRun() {
       </template>
     </Variant>
 
+    <Variant title="Multi-series with CI" :init-state="initSeriesState">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 420px; margin: 0 auto;">
+          <FitPanel
+            v-model:active-series="state.activeSeries"
+            state="completed"
+            :series="fitSeries"
+            :column-labels="{ parameter: state.parameterLabel, value: state.valueLabel, ci: state.ciLabel }"
+            run-label="Re-run Fit"
+          />
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstSelect
+          v-model="state.activeSeries"
+          title="Active series"
+          :options="fitSeries.map((s, i) => ({ label: s.label, value: i }))"
+        />
+        <HstText v-model="state.parameterLabel" title="Parameter column" />
+        <HstText v-model="state.valueLabel" title="Value column" />
+        <HstText v-model="state.ciLabel" title="CI column" />
+      </template>
+    </Variant>
+
     <Variant title="Idle">
       <div style="padding: 2rem; max-width: 320px; margin: 0 auto;">
         <FitPanel
@@ -106,7 +172,7 @@ function handleRun() {
 
     <Variant title="Interactive Demo">
       <div style="padding: 2rem; max-width: 320px; margin: 0 auto;">
-        <p style="font-size: 0.8125rem; color: var(--text-muted, #94a3b8); margin: 0 0 1rem;">
+        <p style="font-size: 0.8125rem; color: var(--text-muted); margin: 0 0 1rem;">
           Click "Run IC50 Fit" to see the full state flow
         </p>
         <FitPanel