@morscherlab/mint-sdk 1.2.0-beta.2 → 1.2.0-beta.20

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

@@ -8,7 +8,9 @@ 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
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -16,6 +18,7 @@ const props = withDefaults(defineProps<Props>(), {
   disabled: false,
   size: 'md',
   mode: 'file',
+  showFiles: true,
 })
 
 const emit = defineEmits<{
@@ -30,9 +33,10 @@ const selectedFiles = ref<File[]>([])
 const folderName = ref<string | null>(null)
 
 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 +158,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 +179,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 +193,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 +305,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 +363,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 +374,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 +400,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"
@@ -418,7 +436,3 @@ function formatFileSize(bytes: number): string {
     </TransitionGroup>
   </div>
 </template>
-
-<style>
-@import '../styles/components/file-uploader.css';
-</style>

package/src/components/FitPanel.vue

@@ -114,7 +114,3 @@ function variantClass(variant?: string): string {
     <slot name="footer" />
   </div>
 </template>
-
-<style>
-@import '../styles/components/fit-panel.css';
-</style>

package/src/components/FormActions.story.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import FormActions from './FormActions.vue'
+
+function log(event: string) {
+  return () => console.log(event)
+}
+
+function initState() {
+  return {
+    isWizard: false,
+    isFirst: true,
+    isLast: true,
+    canProceed: true,
+    loading: false,
+    disabled: false,
+    showCancel: true,
+    submitLabel: 'Submit',
+    cancelLabel: 'Cancel',
+  }
+}
+</script>
+
+<template>
+  <Story title="Forms/FormActions">
+    <Variant title="Playground" :init-state="initState">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 600px;">
+          <FormActions
+            :is-wizard="state.isWizard"
+            :is-first="state.isFirst"
+            :is-last="state.isLast"
+            :can-proceed="state.canProceed"
+            :loading="state.loading"
+            :disabled="state.disabled"
+            :show-cancel="state.showCancel"
+            :submit-label="state.submitLabel"
+            :cancel-label="state.cancelLabel"
+            @submit="log('submit')()"
+            @cancel="log('cancel')()"
+            @back="log('back')()"
+            @next="log('next')()"
+          />
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstCheckbox v-model="state.isWizard" title="Wizard mode" />
+        <HstCheckbox v-model="state.isFirst" title="First step" />
+        <HstCheckbox v-model="state.isLast" title="Last step" />
+        <HstCheckbox v-model="state.canProceed" title="Can proceed" />
+        <HstCheckbox v-model="state.loading" title="Loading" />
+        <HstCheckbox v-model="state.disabled" title="Disabled" />
+        <HstCheckbox v-model="state.showCancel" title="Show cancel" />
+        <HstText v-model="state.submitLabel" title="Submit label" />
+        <HstText v-model="state.cancelLabel" title="Cancel label" />
+      </template>
+    </Variant>
+
+    <Variant title="Flat form">
+      <div style="padding: 2rem; max-width: 600px;">
+        <FormActions show-cancel submit-label="Save design" />
+      </div>
+    </Variant>
+
+    <Variant title="Wizard — first step">
+      <!-- Back is hidden on the first step; Next gates on `canProceed`. -->
+      <div style="padding: 2rem; max-width: 600px;">
+        <FormActions is-wizard :is-first="true" :is-last="false" />
+      </div>
+    </Variant>
+
+    <Variant title="Wizard — middle step">
+      <div style="padding: 2rem; max-width: 600px;">
+        <FormActions is-wizard :is-first="false" :is-last="false" />
+      </div>
+    </Variant>
+
+    <Variant title="Wizard — last step">
+      <div style="padding: 2rem; max-width: 600px;">
+        <FormActions is-wizard :is-first="false" :is-last="true" submit-label="Create experiment" />
+      </div>
+    </Variant>
+
+    <Variant title="Blocked by validation">
+      <div style="padding: 2rem; max-width: 600px;">
+        <FormActions is-wizard :is-first="false" :is-last="false" :can-proceed="false" />
+      </div>
+    </Variant>
+
+    <Variant title="Loading">
+      <div style="padding: 2rem; max-width: 600px;">
+        <FormActions show-cancel loading submit-label="Saving…" />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/FormActions.vue

@@ -86,7 +86,3 @@ const emit = defineEmits<{
     </BaseButton>
   </div>
 </template>
-
-<style>
-@import '../styles/components/form-builder.css';
-</style>

package/src/components/FormBuilder.vue

@@ -305,7 +305,3 @@ defineExpose({
     </template>
   </div>
 </template>
-
-<style>
-@import '../styles/components/form-builder.css';
-</style>

package/src/components/FormField.vue

@@ -53,7 +53,3 @@ const describedBy = computed(() => errorId.value ?? hintId.value)
     </p>
   </div>
 </template>
-
-<style>
-@import '../styles/components/form-field.css';
-</style>

package/src/components/FormulaInput.vue

@@ -119,7 +119,3 @@ function handleInput(event: Event) {
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/formula-input.css';
-</style>

package/src/components/GeneratedPathInput.story.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import GeneratedPathInput from './GeneratedPathInput.vue'
+import type { PluginJobPathInput } from '../types/generated-ui'
+
+const single = ref<PluginJobPathInput | PluginJobPathInput[] | null>(null)
+const multiple = ref<PluginJobPathInput | PluginJobPathInput[] | null>([])
+
+function describe(value: PluginJobPathInput | PluginJobPathInput[] | null): string {
+  if (!value) return 'nothing selected'
+  const selections = Array.isArray(value) ? value : [value]
+  if (!selections.length) return 'nothing selected'
+  return selections
+    .map(selection => selection.rootName ?? selection.relativePaths.join(', '))
+    .join(' · ')
+}
+
+function initState() {
+  return {
+    multiple: false,
+    disabled: false,
+  }
+}
+</script>
+
+<template>
+  <Story title="Forms/GeneratedPathInput">
+    <Variant title="Playground" :init-state="initState">
+      <template #default="{ state }">
+        <!-- Outside an integrated plugin the "Existing artifact" button is
+             hidden, so the story shows the file/folder modes only. -->
+        <div style="padding: 2rem; max-width: 600px;">
+          <GeneratedPathInput
+            v-model="single"
+            :multiple="state.multiple"
+            :disabled="state.disabled"
+          />
+          <p style="margin-top: 1rem; font-size: 0.8125rem; color: var(--text-secondary);">
+            Selection: <code>{{ describe(single) }}</code>
+          </p>
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstCheckbox v-model="state.multiple" title="Allow multiple" />
+        <HstCheckbox v-model="state.disabled" title="Disabled" />
+      </template>
+    </Variant>
+
+    <Variant title="Single path">
+      <div style="padding: 2rem; max-width: 600px;">
+        <GeneratedPathInput v-model="single" />
+      </div>
+    </Variant>
+
+    <Variant title="Multiple paths">
+      <div style="padding: 2rem; max-width: 600px;">
+        <GeneratedPathInput v-model="multiple" multiple />
+      </div>
+    </Variant>
+
+    <Variant title="Disabled">
+      <div style="padding: 2rem; max-width: 600px;">
+        <GeneratedPathInput v-model="single" disabled />
+      </div>
+    </Variant>
+  </Story>
+</template>