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

package/src/components/FilePicker.vue

@@ -0,0 +1,284 @@
+<script setup lang="ts">
+/** Adapter-driven file picker with Finder-style selection, disclosure and metadata preview. */
+import { ref } from 'vue'
+import BaseButton from './BaseButton.vue'
+import BaseInput from './BaseInput.vue'
+import IconButton from './IconButton.vue'
+import FileUploader from './FileUploader.vue'
+import FileBrowserDialogInternal from './internal/FileBrowserDialogInternal.vue'
+import FilePickerTreeInternal from './internal/FilePickerTreeInternal.vue'
+import FilePickerPreviewInternal from './internal/FilePickerPreviewInternal.vue'
+import { formatBytes } from './fileBrowserPresentation'
+import { useFilePicker } from '../composables/useFilePicker'
+import { pickerReason } from '../composables/filePicker/validation'
+import type {
+  PickerAdapter,
+  PickerCapabilities,
+  PickerNode,
+  PickerSelection,
+  PickerSelectionMode,
+  PickerSource,
+} from '../types/filePicker'
+
+interface Props {
+  open: boolean
+  adapter: PickerAdapter
+  selectionMode?: PickerSelectionMode
+  sources?: PickerSource[]
+  capabilities?: PickerCapabilities
+  initialPath?: string
+  initialSelection?: PickerSelection | null
+  title?: string
+  /** Host-owned visibility/selection filter; backend must still enforce access. */
+  systemFilter?: (node: PickerNode, source: PickerSource) => boolean
+}
+const props = withDefaults(defineProps<Props>(), {
+  selectionMode: 'folder+files',
+  sources: () => ['server'],
+  capabilities: () => ({}),
+  initialPath: '',
+  initialSelection: null,
+  title: 'Choose data',
+})
+const emit = defineEmits<{
+  'update:open': [open: boolean]
+  select: [selection: PickerSelection]
+  cancel: []
+}>()
+const uploadError = ref('')
+const {
+  previewNode,
+  sourceNames,
+  sourceIcons,
+  allowedSources,
+  source,
+  query,
+  recursive,
+  skipBlanks,
+  reviewing,
+  nav,
+  selection,
+  capability,
+  path,
+  trail,
+  loading,
+  error,
+  rows,
+  roots,
+  chosen,
+  focused,
+  resolving,
+  resolutionError,
+  searchArea,
+  confirmLabel,
+  folderCount,
+  canConfirm,
+  switchSource,
+  selectNode,
+  enter,
+  up,
+  refresh,
+  selectParent,
+  chooseLocal,
+  cancel,
+  confirm,
+  keyboard,
+} = useFilePicker(props, emit)
+</script>
+
+<template>
+  <FileBrowserDialogInternal
+    :open="open"
+    :label="title"
+    size="full"
+    variant="picker"
+    @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"
+          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"
+          >
+            <path :d="sourceIcons[item]" />
+          </svg>
+        </IconButton>
+      </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
+          >
+        </nav>
+        <BaseButton
+          variant="ghost"
+          size="sm"
+          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>
+      </div>
+      <div v-if="!allowedSources.length" class="mint-picker__empty">
+        No data sources are enabled.
+      </div>
+      <template v-else>
+        <div v-if="source === 'localFile'" class="mint-picker__local-upload">
+          <FileUploader
+            size="lg"
+            :mode="selectionMode === 'folder' ? 'folder' : selectionMode === 'single-file' ? 'file' : 'file+folder'"
+            :multiple="selectionMode !== 'single-file'"
+            :show-files="false"
+            @upload="(...args) => { uploadError = ''; chooseLocal(...args) }"
+            @error="uploadError = $event"
+          />
+          <p v-if="uploadError || error || resolutionError" role="alert">
+            {{ uploadError || error || resolutionError }}
+          </p>
+        </div>
+        <div v-else class="mint-picker__workspace">
+          <FilePickerTreeInternal
+            :empty-title="
+              path
+                ? 'No readable files'
+                : 'No server locations configured'
+            "
+            :rows="rows"
+            :loading="loading"
+            :error="error"
+            :query="query"
+            :mode="selectionMode"
+            :selected="selection.selected"
+            :reason="(node) => pickerReason(selection.exclusion(node), node)"
+            :progress="selection.folderProgress"
+            :focus-path="selection.focusPath.value"
+            @select="selectNode"
+            @enter="enter"
+            @expand="nav.expand"
+            @up="up"
+            @retry="refresh"
+            @parent="selectParent"
+          />
+          <FilePickerPreviewInternal
+            :node="previewNode"
+            :total-count="focused?.kind === 'folder' ? focused.fileCount : undefined"
+            :source="source"
+            :exclusions="chosen.excluded"
+            :busy="resolving"
+            :error="resolutionError"
+            :reviewing="reviewing"
+            @review="reviewing = !reviewing"
+            @retry="selection.resolve"
+          />
+        </div>
+      </template>
+    </div>
+    <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 v-if="roots.length">{{ resolving ? 'Checking…' : formatBytes(chosen.bytes) }}</span>
+          <span v-else>No selection</span>
+          <BaseButton
+            v-if="chosen.excluded.length && source === 'server'"
+            variant="ghost"
+            size="sm"
+            @click="reviewing = !reviewing"
+            >{{ chosen.excluded.length }} skipped</BaseButton
+          >
+          <span v-else-if="chosen.excluded.length">{{ chosen.excluded.length }} skipped</span>
+          <BaseButton
+            v-if="capability?.isBlank"
+            size="sm"
+            variant="ghost"
+            :aria-pressed="skipBlanks"
+            @click="skipBlanks = !skipBlanks"
+            >Skip blanks {{ skipBlanks ? 'on' : 'off' }}</BaseButton
+          >
+        </div>
+        <div class="mint-picker__actions">
+          <BaseButton variant="ghost" size="sm" @click="cancel">Cancel</BaseButton
+          ><BaseButton size="sm" :disabled="!canConfirm" @click="confirm">{{
+            confirmLabel
+          }}</BaseButton>
+        </div>
+      </div>
+    </template>
+  </FileBrowserDialogInternal>
+</template>

package/src/components/FileUploader.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 /** Drag-and-drop file upload zone with type filtering, size validation, and folder mode. */
-import { ref, computed } from 'vue'
+import { ref, computed, watch } from 'vue'
 
 interface Props {
   accept?: string
@@ -8,7 +8,12 @@ interface Props {
   maxSize?: number
   disabled?: boolean
   size?: 'sm' | 'md' | 'lg'
-  mode?: 'file' | 'folder'
+  mode?: 'file' | 'folder' | 'file+folder'
+  /** Hide the selection list when a parent presents the files itself. */
+  showFiles?: boolean
+  /** Restore selections owned by a parent form; omitted for internal selection state. */
+  files?: File[]
+  rootName?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -16,6 +21,7 @@ const props = withDefaults(defineProps<Props>(), {
   disabled: false,
   size: 'md',
   mode: 'file',
+  showFiles: true,
 })
 
 const emit = defineEmits<{
@@ -29,10 +35,17 @@ const inputRef = ref<HTMLInputElement>()
 const selectedFiles = ref<File[]>([])
 const folderName = ref<string | null>(null)
 
+watch(() => [props.files, props.rootName] as const, ([files, rootName]) => {
+  if (files === undefined) return
+  selectedFiles.value = [...files]
+  folderName.value = rootName ?? extractFolderName(files)
+}, { immediate: true })
+
 const isFolder = computed(() => props.mode === 'folder')
+const isMixed = computed(() => props.mode === 'file+folder')
 
 const acceptLabel = computed(() => {
-  if (!props.accept) return 'any file'
+  if (!props.accept) return isFolder.value ? 'a folder' : 'any file'
   return props.accept.split(',').map(a => a.trim().replace('.', '').toUpperCase()).join(', ')
 })
 
@@ -154,15 +167,19 @@ function extractFolderName(files: File[]): string | null {
   return null
 }
 
-function handleDrop(event: DragEvent) {
+async function handleDrop(event: DragEvent) {
   event.preventDefault()
   isDragOver.value = false
   if (props.disabled) return
 
-  if (isFolder.value && event.dataTransfer?.items) {
-    handleFolderDrop(event.dataTransfer.items)
-  } else if (event.dataTransfer?.files) {
-    handleFiles(event.dataTransfer.files)
+  try {
+    if (props.mode !== 'file' && event.dataTransfer?.items?.length) {
+      await handleFolderDrop(event.dataTransfer.items)
+    } else if (event.dataTransfer?.files) {
+      handleFiles(event.dataTransfer.files)
+    }
+  } catch (cause) {
+    emit('error', cause instanceof Error ? cause.message : 'Could not read the dropped folder.')
   }
 }
 
@@ -171,8 +188,12 @@ async function handleFolderDrop(items: DataTransferItemList) {
   const relativePaths: string[] = []
   let folderNameFromDrop: string | undefined
 
-  for (const item of Array.from(items)) {
+  // Capture live drag data before awaiting: the browser protects it after the drop handler.
+  const dropped = Array.from(items, (item) => {
     const entry = item.webkitGetAsEntry?.()
+    return { entry, file: entry ? null : item.getAsFile?.() }
+  })
+  for (const { entry, file: droppedFile } of dropped) {
     if (entry?.isDirectory) {
       folderNameFromDrop = entry.name
       await readDirectory(
@@ -181,8 +202,10 @@ async function handleFolderDrop(items: DataTransferItemList) {
         relativePaths,
         entry.name,
       )
-    } else if (entry?.isFile) {
-      const file = await getFile(entry as FileSystemFileEntry)
+    } else {
+      const file = entry?.isFile
+        ? await getFile(entry as FileSystemFileEntry)
+        : droppedFile
       if (file) {
         files.push(file)
         relativePaths.push(file.name)
@@ -291,7 +314,11 @@ function formatFileSize(bytes: number): string {
     <div
       role="button"
       tabindex="0"
-      :aria-label="disabled ? 'File upload disabled' : 'Click or drag files to upload'"
+      :aria-label="disabled
+        ? 'File upload disabled'
+        : isMixed
+          ? 'Drop files or a folder, or click to choose files'
+          : isFolder ? 'Click or drag a folder to upload' : 'Click or drag files to upload'"
       :aria-disabled="disabled"
       :class="[
         'mint-file-uploader__dropzone',
@@ -345,7 +372,7 @@ function formatFileSize(bytes: number): string {
         </svg>
 
         <p class="mint-file-uploader__text">
-          Drop {{ acceptLabel }} or click
+          {{ isMixed ? 'Drop files or a folder, or click to choose files' : `Drop ${acceptLabel} or click` }}
         </p>
       </div>
     </div>
@@ -356,7 +383,7 @@ function formatFileSize(bytes: number): string {
     </div>
 
     <!-- Folder summary display -->
-    <div v-if="isFolder && folderName && selectedFiles.length > 0" class="mint-file-uploader__folder-summary">
+    <div v-if="showFiles && isFolder && folderName && selectedFiles.length > 0" class="mint-file-uploader__folder-summary">
       <div class="mint-file-uploader__folder-info">
         <div class="mint-file-uploader__folder-icon-wrapper">
           <svg class="mint-file-uploader__folder-icon" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
@@ -382,7 +409,7 @@ function formatFileSize(bytes: number): string {
 
     <!-- File list display -->
     <TransitionGroup
-      v-if="!isFolder && selectedFiles.length > 0"
+      v-if="showFiles && !isFolder && selectedFiles.length > 0"
       tag="ul"
       name="mint-file-uploader-item"
       class="mint-file-uploader__list"

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/GeneratedPlotlyResult.vue

@@ -1,87 +1,52 @@
 <script setup lang="ts">
-import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import type * as PlotlyType from 'plotly.js'
+import { computed, toRaw } from 'vue'
 
-import ChartContainer from './ChartContainer.vue'
+import PlotlyChart from './PlotlyChart.vue'
 
 const props = defineProps<{
   spec: Record<string, unknown>
   fallback?: { media_type: string; data: string }
 }>()
 
-const chartElement = ref<HTMLDivElement | null>(null)
-const failed = ref(false)
-let plotly: typeof PlotlyType | null = null
-
-async function loadPlotly(): Promise<typeof PlotlyType> {
-  const module = await import('plotly.js-dist-min')
-  return ('default' in module ? module.default : module) as unknown as typeof PlotlyType
-}
-
-async function renderChart(): Promise<void> {
-  if (!chartElement.value) return
-  failed.value = false
-  await nextTick()
-  try {
-    const renderer = plotly ?? await loadPlotly()
-    plotly = renderer
-    const data = Array.isArray(props.spec.data) ? props.spec.data : []
-    const layout = props.spec.layout && typeof props.spec.layout === 'object'
-      ? props.spec.layout
-      : {}
-    await renderer.react(
-      chartElement.value,
-      data as PlotlyType.Data[],
-      layout as Partial<PlotlyType.Layout>,
-      { responsive: true, displaylogo: false },
-    )
-    failed.value = false
-  } catch {
-    failed.value = true
-  }
-}
-
-onMounted(renderChart)
-watch(() => props.spec, async () => {
-  await nextTick()
-  await renderChart()
-})
-onBeforeUnmount(() => {
-  if (plotly && chartElement.value) plotly.purge(chartElement.value)
+const data = computed<PlotlyType.Data[]>(() => {
+  const traces = toRaw(props.spec).data
+  return Array.isArray(traces) ? [...toRaw(traces)] as PlotlyType.Data[] : []
 })
+const layout = computed<Partial<PlotlyType.Layout>>(() => (
+  props.spec.layout && typeof props.spec.layout === 'object'
+    ? props.spec.layout as Partial<PlotlyType.Layout>
+    : {}
+))
+const config = computed<Partial<PlotlyType.Config>>(() => (
+  props.spec.config && typeof props.spec.config === 'object'
+    ? props.spec.config as Partial<PlotlyType.Config>
+    : {}
+))
 </script>
 
 <template>
-  <ChartContainer title="Interactive chart">
-    <img
-      v-if="failed && fallback"
-      class="mint-generated-result__image"
-      :src="`data:${fallback.media_type};base64,${fallback.data}`"
-      alt="Static Plotly chart fallback"
-    >
-    <p
-      v-else-if="failed"
-      class="mint-generated-result__plotly-error"
-      role="alert"
-    >
-      Unable to display this chart.
-    </p>
-    <div
-      ref="chartElement"
-      v-show="!failed"
-      class="mint-generated-result__plotly"
-      aria-label="Interactive Plotly chart"
-    />
-  </ChartContainer>
+  <PlotlyChart
+    title="Interactive chart"
+    :data="data"
+    :layout="layout"
+    :config="config"
+  >
+    <template v-if="fallback" #error>
+      <img
+        class="mint-generated-result__image"
+        :src="`data:${fallback.media_type};base64,${fallback.data}`"
+        alt="Static Plotly chart fallback"
+      >
+    </template>
+  </PlotlyChart>
 </template>
 
 <style scoped>
-.mint-generated-result__plotly-error {
-  margin: 0;
-  padding: 1rem;
-  border: 1px solid var(--mint-error-border);
-  border-radius: 0.75rem;
-  background: var(--mint-error-bg);
-  color: var(--mint-error);
+.mint-generated-result__image {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  margin: 0 auto;
 }
 </style>

package/src/components/GeneratedResultRenderer.vue

@@ -128,11 +128,6 @@ function humanize(value: string): string {
   margin: 0 auto;
 }
 
-.mint-generated-result__plotly {
-  width: 100%;
-  min-height: 24rem;
-}
-
 .mint-generated-result__artifact {
   display: flex;
   align-items: center;