@morscherlab/mint-sdk 1.2.0-beta.9 → 1.2.1

package/src/components/AppToastContainer.vue

@@ -1,17 +1,25 @@
 <script setup lang="ts">
-/** Preferred toast container driven by useToast, with auto-dismiss progress bar and click-to-close on each notification. */
+/** Preferred toast container driven by useToast: title/detail, up to two actions, TTL or indeterminate bar, click-to-close. */
 import { useToast } from '../composables/useToast'
-import type { Toast } from '../types'
+import type { Toast, ToastAction } from '../types'
 
 const { toasts, dismiss } = useToast()
 
-// Semantic accents come from the shared tokens rather than a fourth copy of
-// the same four hexes.
-const accentColors: Record<Toast['type'], string> = {
-  success: 'var(--mint-success)',
-  error: 'var(--mint-error)',
-  warning: 'var(--mint-warning)',
-  info: 'var(--mint-info)',
+function title(toast: Toast): string {
+  return toast.title ?? toast.message
+}
+
+function actions(toast: Toast): ToastAction[] {
+  return (toast.actions ?? []).slice(0, 2)
+}
+
+function progress(toast: Toast): NonNullable<Toast['progress']> {
+  return toast.progress ?? 'ttl'
+}
+
+function runAction(toast: Toast, action: ToastAction) {
+  action.onClick()
+  dismiss(toast.id)
 }
 </script>
 
@@ -22,36 +30,70 @@ const accentColors: Record<Toast['type'], string> = {
         <div
           v-for="toast in toasts"
           :key="toast.id"
-          :class="['mint-toast__item', `mint-toast__item--${toast.type}`]"
-          :style="{
-            borderLeftColor: accentColors[toast.type],
-          }"
-          role="alert"
+          :class="[
+            'mint-toast__item',
+            `mint-toast__item--${toast.type}`,
+            (toast.count ?? 1) > 1 ? 'mint-toast__item--stacked' : '',
+          ]"
+          :role="toast.type === 'error' || toast.type === 'warning' ? 'alert' : 'status'"
           @click="dismiss(toast.id)"
         >
           <!-- Lucide circle-check -->
-          <svg v-if="toast.type === 'success'" class="mint-toast__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" :style="{ color: accentColors[toast.type] }">
+          <svg v-if="toast.type === 'success'" class="mint-toast__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
             <circle cx="12" cy="12" r="10" /><path d="m9 12 2 2 4-4" />
           </svg>
           <!-- Lucide circle-x -->
-          <svg v-else-if="toast.type === 'error'" class="mint-toast__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" :style="{ color: accentColors[toast.type] }">
+          <svg v-else-if="toast.type === 'error'" class="mint-toast__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
             <circle cx="12" cy="12" r="10" /><path d="m15 9-6 6" /><path d="m9 9 6 6" />
           </svg>
           <!-- Lucide triangle-alert -->
-          <svg v-else-if="toast.type === 'warning'" class="mint-toast__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" :style="{ color: accentColors[toast.type] }">
+          <svg v-else-if="toast.type === 'warning'" class="mint-toast__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
             <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" /><path d="M12 9v4" /><path d="M12 17h.01" />
           </svg>
           <!-- Lucide info -->
-          <svg v-else class="mint-toast__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" :style="{ color: accentColors[toast.type] }">
+          <svg v-else class="mint-toast__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
             <circle cx="12" cy="12" r="10" /><path d="M12 16v-4" /><path d="M12 8h.01" />
           </svg>
-          <span class="mint-toast__message">{{ toast.message }}</span>
+
+          <div class="mint-toast__body">
+            <div class="mint-toast__title">
+              <span class="mint-toast__message">{{ title(toast) }}</span>
+              <span v-if="(toast.count ?? 1) > 1" class="mint-toast__count">×{{ toast.count }}</span>
+            </div>
+            <div v-if="toast.detail" class="mint-toast__detail">{{ toast.detail }}</div>
+            <div v-if="actions(toast).length" class="mint-toast__actions">
+              <button
+                v-for="action in actions(toast)"
+                :key="action.label"
+                type="button"
+                :class="['mint-toast__action', action.primary ? 'mint-toast__action--primary' : '']"
+                @click.stop="runAction(toast, action)"
+              >
+                {{ action.label }}
+              </button>
+            </div>
+          </div>
+
+          <button
+            v-if="toast.dismissible !== false"
+            type="button"
+            class="mint-toast__close"
+            aria-label="Dismiss"
+            @click.stop="dismiss(toast.id)"
+          >
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" aria-hidden="true">
+              <path d="M18 6 6 18" /><path d="m6 6 12 12" />
+            </svg>
+          </button>
+
           <span
+            v-if="progress(toast) === 'ttl'"
             class="mint-toast__progress"
-            :style="{
-              backgroundColor: accentColors[toast.type],
-              animationDuration: `${toast.duration ?? 3500}ms`,
-            }"
+            :style="{ animationDuration: `${toast.duration ?? 3500}ms` }"
+          />
+          <span
+            v-else-if="progress(toast) === 'indeterminate'"
+            class="mint-toast__progress mint-toast__progress--indeterminate"
           />
         </div>
       </TransitionGroup>

package/src/components/BasePill.story.vue

@@ -16,6 +16,7 @@ const sizes: PillSize[] = ['sm', 'md', 'lg']
             :size="state.size"
             :removable="state.removable"
             :disabled="state.disabled"
+            :dot="state.dot"
             @remove="() => console.log('Remove clicked')"
           >
             {{ state.label }}
@@ -37,6 +38,7 @@ const sizes: PillSize[] = ['sm', 'md', 'lg']
         />
         <HstCheckbox v-model="state.removable" title="Removable" />
         <HstCheckbox v-model="state.disabled" title="Disabled" />
+        <HstCheckbox v-model="state.dot" title="Status dot" />
       </template>
     </Variant>
 

package/src/components/BasePill.vue

@@ -28,6 +28,8 @@ interface Props {
   disabled?: boolean
   /** Show icon slot */
   icon?: boolean
+  /** Leading status dot in the pill's tone color */
+  dot?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -37,6 +39,7 @@ const props = withDefaults(defineProps<Props>(), {
   removable: false,
   disabled: false,
   icon: false,
+  dot: false,
 })
 
 /**
@@ -64,6 +67,7 @@ function handleRemove(event: MouseEvent) {
       { 'mint-pill--disabled': disabled, 'mint-pill--with-icon': icon },
     ]"
   >
+    <span v-if="dot" class="mint-pill__dot" aria-hidden="true" />
     <span v-if="icon" class="mint-pill__icon">
       <slot name="icon" />
     </span>

package/src/components/BaseTabs.story.vue

@@ -1,9 +1,7 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import BaseTabs from './BaseTabs.vue'
 import type { TabItem } from '../types'
 
-const activeTab = ref('overview')
 
 const basicTabs: TabItem[] = [
   { id: 'overview', label: 'Overview' },
@@ -25,12 +23,9 @@ const tabsWithIcons: TabItem[] = [
   { id: 'analysis', label: 'Analysis', icon: '\u{1F52C}' },
 ]
 
-const variants = ['underline', 'pills'] as const
-
 function initPlayground() {
   return {
     activeTab: 'overview',
-    variant: 'underline' as const,
   }
 }
 </script>
@@ -43,7 +38,6 @@ function initPlayground() {
           <BaseTabs
             v-model="state.activeTab"
             :tabs="basicTabs"
-            :variant="state.variant"
           />
           <p style="margin-top: 1rem; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
             Active tab: <code>{{ state.activeTab }}</code>
@@ -52,11 +46,6 @@ function initPlayground() {
       </template>
 
       <template #controls="{ state }">
-        <HstSelect
-          v-model="state.variant"
-          title="Variant"
-          :options="variants.map(v => ({ label: v, value: v }))"
-        />
         <HstSelect
           v-model="state.activeTab"
           title="Active Tab"
@@ -65,27 +54,11 @@ function initPlayground() {
       </template>
     </Variant>
 
-    <Variant title="All Variants">
-      <div style="padding: 2rem; display: flex; flex-direction: column; gap: 2rem;">
-        <div v-for="variant in variants" :key="variant">
-          <p style="margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.05em;">
-            {{ variant }}
-          </p>
-          <BaseTabs
-            v-model="activeTab"
-            :tabs="basicTabs"
-            :variant="variant"
-          />
-        </div>
-      </div>
-    </Variant>
-
     <Variant title="With Badges">
       <div style="padding: 2rem;">
         <BaseTabs
           model-value="inbox"
           :tabs="tabsWithBadges"
-          variant="underline"
         />
       </div>
     </Variant>
@@ -95,7 +68,6 @@ function initPlayground() {
         <BaseTabs
           model-value="plate"
           :tabs="tabsWithIcons"
-          variant="pills"
         />
       </div>
     </Variant>
@@ -105,23 +77,9 @@ function initPlayground() {
         <BaseTabs
           model-value="inbox"
           :tabs="tabsWithBadges"
-          variant="underline"
         />
       </div>
     </Variant>
 
-    <Variant title="Pills — matches SegmentedControl.card">
-      <div style="padding: 2rem; display: flex; justify-content: center;">
-        <BaseTabs
-          v-model="activeTab"
-          variant="pills"
-          :tabs="[
-            { id: 'overview', label: 'Overview' },
-            { id: 'samples', label: 'Samples' },
-            { id: 'results', label: 'Results' },
-          ]"
-        />
-      </div>
-    </Variant>
   </Story>
 </template>

package/src/components/BaseTabs.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-/** Renders a tab bar with underline or pills variant, badges, icons, and disabled tab support. */
+/** Renders an underline tab bar with mono count badges, icons, and disabled tab support. */
 import { computed, type ComponentPublicInstance } from 'vue'
 import type { TabItem, TabItemInput } from '../types'
 import { normalizeItemInput } from '../utils/items'
@@ -8,12 +8,9 @@ import { useRovingFocus } from '../composables/useRovingFocus'
 interface Props {
   modelValue: string
   tabs: TabItemInput[]
-  variant?: 'underline' | 'pills'
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  variant: 'underline',
-})
+const props = defineProps<Props>()
 
 const emit = defineEmits<{
   'update:modelValue': [value: string]
@@ -55,7 +52,7 @@ const { handleKeydown } = useRovingFocus({
 </script>
 
 <template>
-  <div :class="['mint-tabs', `mint-tabs--${variant}`]" role="tablist">
+  <div class="mint-tabs mint-tabs--underline" role="tablist">
     <button
       v-for="tab in normalizedTabs"
       :id="`mint-tab-${tab.id}`"

package/src/components/ExperimentPopover.vue

@@ -63,6 +63,14 @@ const { isOpen, rootRef: popoverRef, triggerRef, close, toggle } = useDropdownSt
 const showSuccess = ref(false)
 const showConfirm = ref(false)
 
+function handleTriggerClick() {
+  if (!hasExperiment.value && !isUnresolved.value) {
+    handleSelect()
+    return
+  }
+  toggle()
+}
+
 function handleSelect() {
   emit('select')
   close()
@@ -115,7 +123,7 @@ onUnmounted(() => {
         { 'mint-experiment-popover__split--with-save': showSave && experimentName },
       ]"
     >
-      <!-- Left: experiment trigger (opens popover). Prefer the human-readable
+      <!-- Left: experiment trigger (selects when empty, otherwise opens popover). Prefer the human-readable
            name; the formal code, when present, stays in the detail panel. -->
       <button
         ref="triggerRef"
@@ -131,7 +139,7 @@ onUnmounted(() => {
         :aria-label="isUnresolved ? triggerLabel : undefined"
         :aria-busy="isResolving || undefined"
         :aria-expanded="isOpen"
-        @click.stop="toggle"
+        @click.stop="handleTriggerClick"
       >
         <!-- Flask icon -->
         <svg class="mint-experiment-popover__trigger-icon" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24">

package/src/components/FileBrowserModal.story.vue

@@ -0,0 +1,203 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import FileBrowserModal from './FileBrowserModal.vue'
+import type { FileEntry, FileSelection, ServerMount } from '../types/fileBrowserTypes'
+
+const isOpen = ref(true)
+
+const mounts: ServerMount[] = [
+  {
+    id: 'instrument-qe',
+    label: '/mnt/instrument-qe',
+    count: 4,
+    children: [
+      {
+        id: 'instrument-qe/2026-07',
+        label: '2026-07',
+        count: 12,
+        children: [
+          { id: 'instrument-qe/2026-07/raw', label: 'raw', count: '1.2k' },
+          { id: 'instrument-qe/2026-07/converted', label: 'converted', count: 840 },
+          { id: 'instrument-qe/2026-07/logs', label: 'logs', count: 36 },
+        ],
+      },
+      { id: 'instrument-qe/2026-06', label: '2026-06', count: 9 },
+    ],
+  },
+  { id: 'nas-shared', label: '/mnt/nas-shared', count: 18 },
+  { id: 'scratch', label: '/mnt/scratch', count: 7 },
+  { id: 'sequencer-01', label: '/mnt/sequencer-01', available: false },
+]
+
+const entries: FileEntry[] = [
+  { name: 'calibration', path: '2026-07/hypoxia-run3/raw/calibration', kind: 'directory', child_count: 2 },
+  { name: 'blanks', path: '2026-07/hypoxia-run3/raw/blanks', kind: 'directory', child_count: 6 },
+  {
+    name: 'HeLa_norm_0h_r1.raw',
+    path: '2026-07/hypoxia-run3/raw/HeLa_norm_0h_r1.raw',
+    kind: 'file',
+    size_bytes: 2_040_109_465,
+    extension: '.raw',
+  },
+  {
+    name: 'HeLa_norm_0h_r2.raw',
+    path: '2026-07/hypoxia-run3/raw/HeLa_norm_0h_r2.raw',
+    kind: 'file',
+    size_bytes: 2_040_109_465,
+    extension: '.raw',
+  },
+  {
+    name: 'HeLa_hypoxia_1pct_6h_r1.raw',
+    path: '2026-07/hypoxia-run3/raw/HeLa_hypoxia_1pct_6h_r1.raw',
+    kind: 'file',
+    size_bytes: 2_254_857_830,
+    extension: '.raw',
+  },
+  {
+    name: 'HeLa_hypoxia_1pct_6h_r2.raw',
+    path: '2026-07/hypoxia-run3/raw/HeLa_hypoxia_1pct_6h_r2.raw',
+    kind: 'file',
+    size_bytes: 2_254_857_830,
+    extension: '.raw',
+  },
+  {
+    name: 'HeLa_hypoxia_1pct_24h_r1.mzML',
+    path: '2026-07/hypoxia-run3/raw/HeLa_hypoxia_1pct_24h_r1.mzML',
+    kind: 'file',
+    size_bytes: 882_900_992,
+    extension: '.mzml',
+  },
+  {
+    name: 'acquisition_log.txt',
+    path: '2026-07/hypoxia-run3/raw/acquisition_log.txt',
+    kind: 'file',
+    size_bytes: 49_152,
+    extension: '.txt',
+    matches_type_rules: false,
+  },
+  {
+    name: 'sequence_table.csv',
+    path: '2026-07/hypoxia-run3/raw/sequence_table.csv',
+    kind: 'file',
+    size_bytes: 12_288,
+    extension: '.csv',
+    matches_type_rules: false,
+  },
+]
+
+const breadcrumbs = [
+  { label: '/mnt/instrument-qe', path: '' },
+  { label: '2026-07', path: '2026-07' },
+  { label: 'hypoxia-run3', path: '2026-07/hypoxia-run3' },
+  { label: 'raw', path: '2026-07/hypoxia-run3/raw' },
+]
+
+const selected: FileSelection[] = [
+  { mount_id: 'instrument-qe/2026-07/raw', path: '2026-07/hypoxia-run3/raw/blanks', name: 'blanks', kind: 'directory', child_count: 6 },
+  {
+    mount_id: 'instrument-qe/2026-07/raw',
+    path: '2026-07/hypoxia-run3/raw/HeLa_norm_0h_r1.raw',
+    name: 'HeLa_norm_0h_r1.raw',
+    kind: 'file',
+    size_bytes: 2_040_109_465,
+  },
+  {
+    mount_id: 'instrument-qe/2026-07/raw',
+    path: '2026-07/hypoxia-run3/raw/HeLa_hypoxia_1pct_6h_r1.raw',
+    name: 'HeLa_hypoxia_1pct_6h_r1.raw',
+    kind: 'file',
+    size_bytes: 2_254_857_830,
+  },
+  {
+    mount_id: 'instrument-qe/2026-07/raw',
+    path: '2026-07/hypoxia-run3/raw/HeLa_hypoxia_1pct_6h_r2.raw',
+    name: 'HeLa_hypoxia_1pct_6h_r2.raw',
+    kind: 'file',
+    size_bytes: 2_254_857_830,
+  },
+]
+
+function initState() {
+  return {
+    open: true,
+    title: 'Select raw data',
+    contextCode: 'MM-EXP-014',
+    subtitle: '13C glucose tracing — HeLa, 24h',
+    dimNonMatching: true,
+    showLocalPicker: true,
+    loading: false,
+    selected,
+  }
+}
+</script>
+
+<template>
+  <Story title="Experiment/FileBrowserModal">
+    <Variant title="Playground" :init-state="initState">
+      <template #default="{ state }">
+        <div style="padding: 2rem;">
+          <FileBrowserModal
+            v-model="state.open"
+            :mounts="mounts"
+            mount-id="instrument-qe/2026-07/raw"
+            path="2026-07/hypoxia-run3/raw"
+            parent="2026-07/hypoxia-run3"
+            :entries="entries"
+            :breadcrumbs="breadcrumbs"
+            :selected="state.selected"
+            :type-rules="['.raw', '.mzML']"
+            :total-count="1284"
+            :match-count="9"
+            :loading="state.loading"
+            :title="state.title"
+            :context-code="state.contextCode"
+            :subtitle="state.subtitle"
+            :dim-non-matching="state.dimNonMatching"
+            :show-local-picker="state.showLocalPicker"
+            confirm-label="Mount 4 items"
+            @update:selected="state.selected = $event"
+          />
+        </div>
+      </template>
+      <template #controls="{ state }">
+        <HstCheckbox v-model="state.open" title="Open" />
+        <HstText v-model="state.title" title="Title" />
+        <HstText v-model="state.contextCode" title="Context code" />
+        <HstText v-model="state.subtitle" title="Subtitle" />
+        <HstCheckbox v-model="state.dimNonMatching" title="Dim non-matching" />
+        <HstCheckbox v-model="state.showLocalPicker" title="Show local picker" />
+        <HstCheckbox v-model="state.loading" title="Loading" />
+      </template>
+    </Variant>
+
+    <Variant title="Empty folder">
+      <div style="padding: 2rem;">
+        <FileBrowserModal
+          :model-value="isOpen"
+          :mounts="mounts"
+          mount-id="scratch"
+          path=""
+          :parent="null"
+          :entries="[]"
+          :breadcrumbs="[{ label: '/mnt/scratch', path: '' }]"
+          title="Select raw data"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Offline mount">
+      <div style="padding: 2rem;">
+        <FileBrowserModal
+          :model-value="isOpen"
+          :mounts="mounts"
+          mount-id="sequencer-01"
+          path=""
+          :parent="null"
+          :entries="[]"
+          error="This mount is offline. Check that the share is reachable from the MINT server."
+          title="Select raw data"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>