@morscherlab/mint-sdk 1.2.0-beta.12 → 1.2.0-beta.13

package/src/components/FilePicker.vue

@@ -0,0 +1,301 @@
+<script setup lang="ts">
+/** Adapter-driven file picker with Finder-style selection, disclosure and metadata preview. */
+import BaseButton from './BaseButton.vue'
+import BaseInput from './BaseInput.vue'
+import IconButton from './IconButton.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,
+  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
+}
+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 {
+  previewNode,
+  sourceNames,
+  sourceIcons,
+  allowedSources,
+  source,
+  query,
+  recursive,
+  skipBlanks,
+  reviewing,
+  nav,
+  selection,
+  capability,
+  path,
+  trail,
+  loading,
+  error,
+  rows,
+  roots,
+  chosen,
+  focused,
+  resolving,
+  resolutionError,
+  filesInput,
+  folderInput,
+  searchArea,
+  accept,
+  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 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>
+      <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 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-actions">
+          <input
+            ref="filesInput"
+            type="file"
+            :multiple="selectionMode !== 'single-file'"
+            :accept="accept"
+            hidden
+            @change="chooseLocal"
+          />
+          <input
+            ref="folderInput"
+            type="file"
+            webkitdirectory
+            multiple
+            hidden
+            @change="chooseLocal"
+          />
+          <BaseButton
+            v-if="selectionMode !== 'folder'"
+            variant="secondary"
+            size="sm"
+            @click="filesInput?.click()"
+            >Choose files…</BaseButton
+          >
+          <BaseButton
+            v-if="selectionMode !== 'single-file'"
+            variant="secondary"
+            size="sm"
+            @click="folderInput?.click()"
+            >Choose folder…</BaseButton
+          >
+          <span>Files stay in this browser.</span>
+        </div>
+        <div class="mint-picker__workspace">
+          <FilePickerTreeInternal
+            :empty-title="
+              path
+                ? 'No readable files'
+                : source === 'localFile'
+                  ? 'No files chosen'
+                  : '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"
+            variant="ghost"
+            size="sm"
+            @click="reviewing = !reviewing"
+            >{{ chosen.excluded.length }} skipped</BaseButton
+          >
+          <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/fileBrowserPresentation.ts

@@ -0,0 +1,39 @@
+import type { FileEntry } from '../types/fileBrowserTypes'
+
+export const FILE_BROWSER_ICONS = {
+  disk: 'M4 5h16v14H4zM8 9h.01M4 12h16',
+  folder: 'M4 7h6l2 2h8v10H4z',
+  file: 'M14 3v5h5M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z',
+}
+
+export function formatCount(value: number): string {
+  // Thin spaces group digits without the comma/period ambiguity across locales.
+  return value.toLocaleString('en-US').replace(/,/g, ' ')
+}
+
+export function formatSize(entry: FileEntry): string {
+  if (entry.kind === 'directory') {
+    return entry.child_count === null || entry.child_count === undefined
+      ? '—'
+      : `${entry.child_count} item${entry.child_count === 1 ? '' : 's'}`
+  }
+  return formatBytes(entry.size_bytes ?? null)
+}
+
+export function formatBytes(bytes: number | null): string {
+  if (bytes === null) return '—'
+  const units = ['B', 'KB', 'MB', 'GB', 'TB']
+  let value = bytes
+  let unit = 0
+  while (value >= 1024 && unit < units.length - 1) {
+    value /= 1024
+    unit += 1
+  }
+  const rounded = value >= 100 || unit === 0 ? Math.round(value) : Number(value.toFixed(1))
+  return `${rounded} ${units[unit]}`
+}
+
+export function entryType(entry: FileEntry): string {
+  if (entry.kind === 'directory') return 'Folder'
+  return entry.extension ? entry.extension.replace('.', '').toUpperCase() : 'File'
+}

package/src/components/index.ts

@@ -142,7 +142,11 @@ export { default as SectionCard } from './SectionCard.vue'
 // Experiment / analysis components
 export { default as ExperimentSelectorModal } from './ExperimentSelectorModal.vue'
 export { default as ArtifactSelectorModal } from './ArtifactSelectorModal.vue'
+/** Modal picker over the read-only server mounts, recording paths rather than copying data. */
+export { default as FileBrowserModal } from './FileBrowserModal.vue'
 export { default as GeneratedPathInput } from './GeneratedPathInput.vue'
 export { default as ArtifactSaveDialog } from './ArtifactSaveDialog.vue'
 export { default as ExperimentPopover } from './ExperimentPopover.vue'
 export { default as FitPanel } from './FitPanel.vue'
+
+export { default as FilePicker } from './FilePicker.vue'

package/src/components/internal/FileBrowserDialogInternal.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, shallowRef, watch } from 'vue'
+import type { ModalSize } from '../../types'
+import { useFocusTrap } from '../../composables/useFocusTrap'
+import IconButton from '../IconButton.vue'
+
+const props = defineProps<{ open: boolean; label: string; size: ModalSize; variant?: 'picker' }>()
+const emit = defineEmits<{ close: [] }>()
+const containerRef = shallowRef<HTMLElement | null>(null)
+const active = shallowRef(false)
+useFocusTrap({ containerRef, active })
+
+// Activate after mounting so an initially open picker traps focus too.
+onMounted(() => {
+  active.value = props.open
+})
+watch(
+  () => props.open,
+  (open) => {
+    active.value = open
+  },
+)
+watch(
+  active,
+  (open, _, onCleanup) => {
+    if (!open) return
+    const overflow = document.body.style.overflow
+    document.body.style.overflow = 'hidden'
+    onCleanup(() => {
+      document.body.style.overflow = overflow
+    })
+  },
+  { flush: 'sync' },
+)
+onBeforeUnmount(() => {
+  active.value = false
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <div v-if="open" class="mint-file-browser-overlay">
+      <section
+        ref="containerRef"
+        class="mint-file-browser-dialog"
+        :class="[
+          `mint-file-browser-dialog--${size}`,
+          variant === 'picker' ? 'mint-picker-dialog' : '',
+        ]"
+        role="dialog"
+        aria-modal="true"
+        :aria-label="label"
+        tabindex="-1"
+        @keydown.esc.stop.prevent="emit('close')"
+      >
+        <header class="mint-file-browser-dialog__header">
+          <slot name="header" />
+          <IconButton size="sm" label="Close modal" @click="emit('close')">
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              aria-hidden="true"
+            >
+              <path d="M6 6l12 12M18 6L6 18" />
+            </svg>
+          </IconButton>
+        </header>
+        <slot />
+        <footer class="mint-file-browser-dialog__footer"><slot name="footer" /></footer>
+      </section>
+    </div>
+  </Teleport>
+</template>

package/src/components/internal/FileBrowserListingInternal.vue

@@ -0,0 +1,197 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { FileEntry, FileSelection } from '../../types/fileBrowserTypes'
+import {
+  FILE_BROWSER_ICONS as ICON,
+  formatCount,
+  formatSize,
+  entryType,
+} from '../fileBrowserPresentation'
+import EmptyState from '../EmptyState.vue'
+import BaseButton from '../BaseButton.vue'
+import IconButton from '../IconButton.vue'
+import Skeleton from '../Skeleton.vue'
+const props = defineProps<{
+  mountId: string
+  entries: FileEntry[]
+  selected: FileSelection[]
+  loading: boolean
+  error?: string | null
+  dimNonMatching: boolean
+  totalCount: number | null
+  matchCount: number | null
+  truncated: boolean
+  hasMounts: boolean
+  hasAvailableMounts: boolean
+  search: string
+}>()
+const emit = defineEmits<{ toggle: [entry: FileEntry]; open: [entry: FileEntry]; refresh: [] }>()
+const emptyTitle = computed(() =>
+  !props.hasMounts
+    ? 'No server mounts configured'
+    : !props.hasAvailableMounts
+      ? 'Server mounts are offline'
+      : props.search
+        ? 'No matching files or folders'
+        : 'This folder is empty',
+)
+const emptyDescription = computed(() =>
+  !props.hasMounts
+    ? 'Ask your administrator to configure a read-only data mount.'
+    : !props.hasAvailableMounts
+      ? 'Refresh when the data mount is available again.'
+      : props.search
+        ? 'Try a different search or clear the search field.'
+        : 'Choose another folder from the mount list or breadcrumbs.',
+)
+function isSelected(entry: FileEntry) {
+  return props.selected.some((item) => item.mount_id === props.mountId && item.path === entry.path)
+}
+function isDimmed(entry: FileEntry) {
+  return props.dimNonMatching && entry.matches_type_rules === false
+}
+function entryIcon(entry: FileEntry) {
+  return entry.kind === 'directory' ? ICON.folder : ICON.file
+}
+function handleRowClick(entry: FileEntry) {
+  if (!props.loading && !props.error && props.mountId && entry.kind === 'directory')
+    emit('open', entry)
+}
+function toggleEntry(entry: FileEntry) {
+  if (!props.loading && !props.error && props.mountId) emit('toggle', entry)
+}
+function folderNote(entry: FileEntry) {
+  if (entry.kind !== 'directory' || !isSelected(entry)) return ''
+  return entry.child_count == null
+    ? 'whole folder'
+    : `whole folder, ${entry.child_count} item${entry.child_count === 1 ? '' : 's'}`
+}
+const statusLine = computed(() => {
+  if (props.loading) return 'Loading folder…'
+  if (props.error || !props.mountId) return ''
+  const total = props.totalCount ?? props.entries.length
+  const parts = [`${formatCount(total)} item${total === 1 ? '' : 's'}`]
+  if (props.entries.length !== total) parts.push(`${formatCount(props.entries.length)} shown`)
+  if (props.matchCount !== null && props.matchCount !== total)
+    parts.push(`${formatCount(props.matchCount)} match the type rules`)
+  if (props.truncated) parts.push('listing capped')
+  return parts.join(' · ')
+})
+</script>
+<template>
+  <div class="mint-file-browser__listing" :aria-busy="loading">
+    <div class="mint-file-browser__head">
+      <span class="mint-file-browser__col-check" />
+      <span class="mint-file-browser__col-icon" />
+      <span class="mint-file-browser__col-name">Name</span>
+      <span class="mint-file-browser__col-size">Size</span>
+      <span class="mint-file-browser__col-type">Type</span>
+      <span class="mint-file-browser__col-open" />
+    </div>
+
+    <div v-if="loading" class="mint-file-browser__skeleton">
+      <div v-for="n in 6" :key="n" class="mint-file-browser__skeleton-row">
+        <Skeleton width="60%" height="14px" />
+        <Skeleton width="60px" height="10px" />
+      </div>
+    </div>
+
+    <div v-else-if="error" class="mint-file-browser__error" role="alert">
+      <span>{{ error }}</span>
+      <BaseButton
+        variant="secondary"
+        size="sm"
+        class="mint-file-browser__retry"
+        aria-label="Retry folder listing"
+        @click="emit('refresh')"
+      >
+        Try again
+      </BaseButton>
+    </div>
+
+    <EmptyState
+      v-else-if="!entries.length"
+      :title="emptyTitle"
+      :description="emptyDescription"
+      size="sm"
+    />
+
+    <div v-else class="mint-file-browser__rows">
+      <div
+        v-for="entry in entries"
+        :key="entry.path"
+        class="mint-file-browser__row"
+        :class="{
+          'mint-file-browser__row--selected': isSelected(entry),
+          'mint-file-browser__row--dimmed': isDimmed(entry),
+          'mint-file-browser__row--dir': entry.kind === 'directory',
+        }"
+        @click="handleRowClick(entry)"
+      >
+        <input
+          class="mint-file-browser__checkbox"
+          type="checkbox"
+          :checked="isSelected(entry)"
+          :title="entry.kind === 'directory' ? 'Select the whole folder' : 'Select this file'"
+          :aria-label="
+            entry.kind === 'directory'
+              ? `Select the whole ${entry.name} folder`
+              : `Select ${entry.name}`
+          "
+          @click.stop
+          @change="toggleEntry(entry)"
+        />
+        <span
+          class="mint-file-browser__row-icon"
+          :class="`mint-file-browser__row-icon--${entry.kind}`"
+        >
+          <svg
+            class="mint-file-browser__icon"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.8"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path :d="entryIcon(entry)" />
+          </svg>
+        </span>
+        <span class="mint-file-browser__name-cell">
+          <span class="mint-file-browser__name" :title="entry.name">{{ entry.name }}</span>
+          <span v-if="folderNote(entry)" class="mint-file-browser__note-pill">Whole folder</span>
+        </span>
+        <span class="mint-file-browser__size">{{ formatSize(entry) }}</span>
+        <span class="mint-file-browser__type">{{ entryType(entry) }}</span>
+        <!-- The chevron is the keyboard route into a folder: the row
+                   itself is a div, so this button is what Tab can reach. -->
+        <IconButton
+          v-if="entry.kind === 'directory'"
+          size="sm"
+          class="mint-file-browser__open"
+          :label="`Open ${entry.name}`"
+          @click.stop="handleRowClick(entry)"
+        >
+          <svg
+            class="mint-file-browser__icon"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M9 6l6 6-6 6" />
+          </svg>
+        </IconButton>
+        <span v-else class="mint-file-browser__open" aria-hidden="true" />
+      </div>
+    </div>
+
+    <div class="mint-file-browser__status" role="status" aria-live="polite">
+      <span>{{ statusLine }}</span>
+      <div class="mint-file-browser__status-spacer" />
+      <span class="mint-file-browser__legend">Read-only · Select paths, not copies</span>
+    </div>
+  </div>
+</template>