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

package/src/components/internal/FileBrowserToolbarInternal.vue

@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import BaseButton from '../BaseButton.vue'
+import BaseInput from '../BaseInput.vue'
+import IconButton from '../IconButton.vue'
+import type {
+  FileBrowserSortKey,
+  FilePathCrumb,
+  FileBrowserLocation,
+} from '../../types/fileBrowserTypes'
+const props = defineProps<{
+  mountId: string
+  path: string
+  parent: string | null
+  breadcrumbs: FilePathCrumb[]
+  search: string
+  sort: FileBrowserSortKey
+  typeRules: string[]
+  loading: boolean
+  error?: string | null
+}>()
+const emit = defineEmits<{
+  navigate: [location: FileBrowserLocation]
+  selectFolder: [location: FileBrowserLocation]
+  'update:search': [value: string]
+  'update:sort': [value: FileBrowserSortKey]
+  refresh: []
+}>()
+const typeRuleLabel = computed(() => props.typeRules.join(' '))
+function handleBack() {
+  if (props.parent !== null && !props.loading && !props.error)
+    emit('navigate', { mount_id: props.mountId, path: props.parent })
+}
+function handleCrumb(crumb: FilePathCrumb) {
+  emit('navigate', { mount_id: props.mountId, path: crumb.path })
+}
+function cycleSort() {
+  const order: FileBrowserSortKey[] = ['name', 'size', 'modified']
+  emit('update:sort', order[(order.indexOf(props.sort) + 1) % order.length]!)
+}
+</script>
+<template>
+  <div class="mint-file-browser__toolbar">
+    <div class="mint-file-browser__pathbar">
+      <IconButton
+        size="sm"
+        class="mint-file-browser__back"
+        label="Go to parent folder"
+        :disabled="parent === null || loading || !!error"
+        @click="handleBack"
+      >
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          aria-hidden="true"
+        >
+          <path d="M12 19V5m-6 6 6-6 6 6" />
+        </svg>
+      </IconButton>
+      <nav class="mint-file-browser__crumbs" aria-label="Breadcrumb">
+        <template v-for="(crumb, index) in breadcrumbs" :key="crumb.path">
+          <span v-if="index" class="mint-file-browser__crumb-sep" aria-hidden="true">/</span>
+          <BaseButton
+            variant="ghost"
+            size="sm"
+            class="mint-file-browser__crumb"
+            :class="{ 'mint-file-browser__crumb--current': index === breadcrumbs.length - 1 }"
+            :aria-current="index === breadcrumbs.length - 1 ? 'location' : undefined"
+            @click="handleCrumb(crumb)"
+            >{{ crumb.label }}</BaseButton
+          >
+        </template>
+        <span v-if="!breadcrumbs.length" class="mint-file-browser__selection-hint">{{
+          path || 'Choose a location'
+        }}</span>
+      </nav>
+      <IconButton
+        size="sm"
+        label="Refresh folder listing"
+        :disabled="loading"
+        @click="emit('refresh')"
+      >
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          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 class="mint-file-browser__tools">
+      <BaseInput
+        :model-value="search"
+        type="search"
+        size="sm"
+        class="mint-file-browser__search"
+        placeholder="Search this folder…"
+        aria-label="Search this folder"
+        @update:model-value="emit('update:search', String($event ?? ''))"
+      />
+      <span v-if="typeRuleLabel" class="mint-file-browser__rules" title="Matching file types">{{
+        typeRuleLabel
+      }}</span>
+      <IconButton
+        size="sm"
+        class="mint-file-browser__sort"
+        :label="`Sorted by ${sort}. Click to change.`"
+        @click="cycleSort"
+      >
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          aria-hidden="true"
+        >
+          <path d="M4 6h10M4 12h16M4 18h7" />
+        </svg>
+      </IconButton>
+      <BaseButton
+        variant="secondary"
+        size="sm"
+        class="mint-file-browser__select-folder"
+        :title="`Select ${path || 'this folder'} itself as the input`"
+        :disabled="!mountId || loading || !!error"
+        @click="emit('selectFolder', { mount_id: mountId, path })"
+        >Select this folder</BaseButton
+      >
+    </div>
+  </div>
+</template>

package/src/components/internal/FilePickerPreviewInternal.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import BaseButton from '../BaseButton.vue'
+import { FILE_BROWSER_ICONS as ICON, formatBytes } from '../fileBrowserPresentation'
+import type { PickerNode, PickerExcluded, PickerSource } from '../../types/filePicker'
+import { pickerReason } from '../../composables/filePicker/validation'
+
+defineProps<{
+  totalCount?: number | null
+  node: PickerNode | null
+  source: PickerSource
+  exclusions: PickerExcluded[]
+  busy: boolean
+  error: string
+  reviewing: boolean
+}>()
+const emit = defineEmits<{ review: []; retry: [] }>()
+</script>
+<template>
+  <aside class="mint-picker__preview" aria-label="Selection preview">
+    <div class="mint-picker__preview-heading">{{ reviewing ? 'Skipped files' : 'Preview' }}</div>
+    <div v-if="reviewing" class="mint-picker__preview-content">
+      <BaseButton variant="ghost" size="sm" @click="emit('review')">Back to preview</BaseButton>
+      <div
+        v-for="item in exclusions"
+        :key="item.path"
+        class="mint-picker__exclusion"
+        :title="item.path"
+      >
+        <strong>{{ item.name }}</strong
+        ><span>{{ pickerReason(item) }}</span>
+      </div>
+    </div>
+    <div v-else-if="node" class="mint-picker__preview-content">
+      <div class="mint-picker__preview-icon">
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.7"
+          aria-hidden="true"
+        >
+          <path :d="node.kind === 'folder' ? ICON.folder : ICON.file" />
+        </svg>
+      </div>
+      <strong class="mint-picker__preview-name">{{ node.name }}</strong>
+      <dl class="mint-picker__metadata">
+        <div>
+          <dt>Location</dt>
+          <dd :title="node.parentName || node.path">{{ node.parentName || node.path }}</dd>
+        </div>
+        <div>
+          <dt>Size</dt>
+          <dd>{{ node.bytes == null ? 'Not available' : formatBytes(node.bytes) }}</dd>
+        </div>
+        <div v-if="node.kind === 'folder'">
+          <dt>Files</dt>
+          <dd>
+            {{ node.fileCount ?? 'Not counted yet'
+            }}<template v-if="totalCount != null && totalCount !== node.fileCount">
+              of {{ totalCount }}</template
+            >
+          </dd>
+        </div>
+        <div>
+          <dt>Format</dt>
+          <dd v-if="node.kind === 'file'">{{ node.format.toUpperCase() || 'Unknown' }}</dd>
+          <dd v-else>
+            <span v-for="(count, format) in node.formats" :key="format"
+              >{{ format.toUpperCase() }} ×{{ count }}<br /></span
+            ><span v-if="!node.formats">Not counted yet</span>
+          </dd>
+        </div>
+        <div>
+          <dt>Source</dt>
+          <dd>
+            {{ source === 'localFile' ? 'Local files' : 'Server' }}
+          </dd>
+        </div>
+      </dl>
+      <BaseButton
+        v-if="exclusions.length"
+        variant="ghost"
+        size="sm"
+        class="mint-picker__skipped"
+        @click="emit('review')"
+        >{{ exclusions.length }} skipped · Review</BaseButton
+      >
+      <div v-if="error" class="mint-picker__preview-error" role="alert">
+        {{ error
+        }}<BaseButton variant="secondary" size="sm" @click="emit('retry')">Try again</BaseButton>
+      </div>
+      <span v-else class="mint-picker__ready" role="status">{{
+        busy ? 'Checking selection…' : '✓ Metadata available'
+      }}</span>
+    </div>
+    <div v-else class="mint-picker__preview-empty">
+      Select a file or folder to preview its details.
+    </div>
+  </aside>
+</template>

package/src/components/internal/FilePickerTreeInternal.vue

@@ -0,0 +1,238 @@
+<script setup lang="ts">
+import { computed, nextTick, ref } from 'vue'
+import IconButton from '../IconButton.vue'
+import BaseButton from '../BaseButton.vue'
+import Skeleton from '../Skeleton.vue'
+import { FILE_BROWSER_ICONS as ICON, formatBytes } from '../fileBrowserPresentation'
+import type { PickerNode, PickerTreeRow, PickerSelectionMode } from '../../types/filePicker'
+
+const props = defineProps<{
+  emptyTitle?: string
+  rows: PickerTreeRow[]
+  loading: boolean
+  error: string
+  query: string
+  mode: PickerSelectionMode
+  selected: (node: PickerNode) => boolean
+  reason: (node: PickerNode) => string
+  progress: (node: PickerNode) => string
+  focusPath: string
+}>()
+const emit = defineEmits<{
+  select: [node: PickerNode, event: MouseEvent | KeyboardEvent]
+  enter: [node: PickerNode]
+  expand: [node: PickerNode]
+  up: []
+  retry: []
+  parent: [node: PickerNode]
+}>()
+const list = ref<HTMLElement | null>(null)
+const focusablePath = computed(() => {
+  const available = props.rows.filter((row) => !props.reason(row.node))
+  return (
+    available.find((row) => row.node.path === props.focusPath)?.node.path ?? available[0]?.node.path
+  )
+})
+function focusRow(path: string) {
+  nextTick(() => {
+    const target = [...(list.value?.querySelectorAll<HTMLElement>('[role="treeitem"]') ?? [])].find(
+      (el) => el.dataset.path === path,
+    )
+    target?.focus()
+    target?.scrollIntoView({ block: 'nearest' })
+  })
+}
+function keydown(event: KeyboardEvent, row: PickerTreeRow) {
+  if (props.reason(row.node)) return
+  const available = props.rows.filter((item) => !props.reason(item.node))
+  const index = available.findIndex((item) => item.node.path === row.node.path)
+  if (['ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {
+    event.preventDefault()
+    const target =
+      event.key === 'Home'
+        ? available[0]
+        : event.key === 'End'
+          ? available[available.length - 1]
+          : available[
+              Math.max(
+                0,
+                Math.min(available.length - 1, index + (event.key === 'ArrowDown' ? 1 : -1)),
+              )
+            ]
+    if (target) {
+      emit('select', target.node, event)
+      focusRow(target.node.path)
+    }
+  } else if (event.key === 'ArrowRight') {
+    event.preventDefault()
+    if (row.node.kind === 'folder' && !row.expanded) emit('expand', row.node)
+    else if (row.expanded) {
+      const next = available[index + 1]
+      if (next && next.depth > row.depth) {
+        emit('select', next.node, event)
+        focusRow(next.node.path)
+      }
+    }
+  } else if (event.key === 'ArrowLeft') {
+    event.preventDefault()
+    if (row.expanded) emit('expand', row.node)
+    else {
+      const parent = props.rows
+        .slice(0, props.rows.indexOf(row))
+        .reverse()
+        .find((item) => item.depth < row.depth)
+      if (parent) {
+        emit('select', parent.node, event)
+        focusRow(parent.node.path)
+      } else emit('up')
+    }
+  } else if (event.key === 'Enter') {
+    event.preventDefault()
+    emit('enter', row.node)
+  } else if (event.key === ' ') {
+    event.preventDefault()
+    emit('select', row.node, event)
+  }
+}
+function parts(name: string) {
+  const index = props.query ? name.toLowerCase().indexOf(props.query.toLowerCase()) : -1
+  return index < 0
+    ? [name, '', '']
+    : [
+        name.slice(0, index),
+        name.slice(index, index + props.query.length),
+        name.slice(index + props.query.length),
+      ]
+}
+</script>
+
+<template>
+  <div
+    ref="list"
+    class="mint-picker__tree"
+    role="tree"
+    aria-label="Folders and files"
+    :aria-multiselectable="mode === 'multi-file' || mode === 'folder+files'"
+    :aria-busy="loading"
+  >
+    <div v-if="loading" class="mint-picker__skeleton">
+      <Skeleton v-for="n in 6" :key="n" width="100%" height="36px" />
+    </div>
+    <div v-else-if="error" role="alert" class="mint-picker__empty">
+      <span>{{ error }}</span
+      ><BaseButton variant="secondary" size="sm" @click="emit('retry')">Try again</BaseButton>
+    </div>
+    <div v-else-if="!rows.length" class="mint-picker__empty" role="status">
+      <strong>{{
+        query ? 'No matching folders or files' : emptyTitle || 'No readable files'
+      }}</strong>
+      <span>{{
+        query
+          ? 'Try a different search or include subfolders.'
+          : 'Choose a location, go up a level, or choose local files.'
+      }}</span>
+    </div>
+    <template v-else v-for="row in rows" :key="row.node.path">
+      <div
+        role="treeitem"
+        :data-path="row.node.path"
+        :aria-level="row.depth + 1"
+        :aria-selected="selected(row.node)"
+        :aria-disabled="!!reason(row.node)"
+        :aria-expanded="row.node.kind === 'folder' && !reason(row.node) ? row.expanded : undefined"
+        :tabindex="!reason(row.node) && row.node.path === focusablePath ? 0 : -1"
+        class="mint-picker__row"
+        :class="{
+          'mint-picker__row--selected': selected(row.node),
+          'mint-picker__row--unreadable': !!reason(row.node),
+          'mint-picker__row--child': row.depth > 0,
+        }"
+        :style="{ '--picker-depth': row.depth }"
+        :title="reason(row.node) || row.node.name"
+        @click="!reason(row.node) && emit('select', row.node, $event)"
+        @dblclick="!reason(row.node) && emit('enter', row.node)"
+        @keydown="keydown($event, row)"
+      >
+        <IconButton
+          v-if="row.node.kind === 'folder' && row.node.hasChildren !== false && !reason(row.node)"
+          size="sm"
+          class="mint-picker__disclosure"
+          :label="`${row.expanded ? 'Collapse' : 'Expand'} ${row.node.name}`"
+          tabindex="-1"
+          :loading="row.loading"
+          @click.stop="emit('expand', row.node)"
+          @dblclick.stop
+        >
+          <svg
+            viewBox="0 0 16 16"
+            fill="currentColor"
+            aria-hidden="true"
+            :class="{ 'mint-picker__chevron--open': row.expanded }"
+          >
+            <path d="m6 3 5 5-5 5z" />
+          </svg>
+        </IconButton>
+        <span v-else class="mint-picker__disclosure-spacer" />
+        <svg
+          class="mint-picker__node-icon"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.7"
+          aria-hidden="true"
+        >
+          <path :d="row.node.kind === 'folder' ? ICON.folder : ICON.file" />
+        </svg>
+        <span class="mint-picker__row-name">
+          <span class="mint-picker__name"
+            >{{ parts(row.node.name)[0]
+            }}<mark v-if="parts(row.node.name)[1]">{{ parts(row.node.name)[1] }}</mark
+            >{{ parts(row.node.name)[2] }}</span
+          >
+          <span v-if="row.node.kind === 'folder' && row.node.formats" class="mint-picker__formats">
+            <span v-for="(count, format) in row.node.formats" :key="format"
+              >{{ format.toUpperCase() }} ×{{ count }}</span
+            >
+          </span>
+          <span v-else-if="query && row.node.parentName" class="mint-picker__parent-name">{{
+            row.node.parentName
+          }}</span>
+        </span>
+        <span class="mint-picker__row-meta">
+          <span
+            v-if="row.node.kind === 'folder' && progress(row.node)"
+            :class="{
+              'mint-picker__partial':
+                selected(row.node) &&
+                progress(row.node).split(' / ')[0] !== String(row.node.fileCount),
+            }"
+            >{{ progress(row.node) }}</span
+          >
+          <span v-if="!reason(row.node) && row.node.bytes != null">{{
+            formatBytes(row.node.bytes)
+          }}</span>
+          <span v-if="reason(row.node)" aria-label="Unavailable">ⓘ</span>
+        </span>
+        <BaseButton
+          v-if="
+            query &&
+            mode === 'folder' &&
+            row.node.kind === 'file' &&
+            row.node.parentPath &&
+            !reason(row.node)
+          "
+          variant="ghost"
+          size="sm"
+          @click.stop="emit('parent', row.node)"
+          >Select its folder</BaseButton
+        >
+      </div>
+      <div v-if="row.error" class="mint-picker__branch-error" role="alert">
+        {{ row.error
+        }}<BaseButton variant="ghost" size="sm" @click="emit('expand', row.node)"
+          >Close branch</BaseButton
+        >
+      </div>
+    </template>
+  </div>
+</template>

package/src/composables/filePicker/localFiles.ts

@@ -0,0 +1,58 @@
+import type { PickerAdapter, PickerFile, PickerNode } from '../../types/filePicker'
+import { pickerFormat } from './validation'
+
+/** Construct metadata only: no FileReader, arrayBuffer or upload. */
+export function localFilesAdapter(
+  files: File[],
+  relativePaths?: (string | undefined)[],
+): PickerAdapter {
+  const nodes = new Map<string, PickerNode>()
+  for (const [index, file] of files.entries()) {
+    const relative = relativePaths?.[index] || file.webkitRelativePath || file.name
+    const parts = relative.split('/')
+    let parent: string | null = null
+    for (let i = 0; i < parts.length - 1; i++) {
+      const path = parts.slice(0, i + 1).join('/')
+      if (!nodes.has(path))
+        nodes.set(path, { kind: 'folder', name: parts[i]!, path, parentPath: parent })
+      parent = path
+    }
+    // Plain file picks can have equal names; preserve both File objects.
+    let path = relative
+    for (let n = 2; nodes.has(path); n++) path = `${relative} (${n})`
+    nodes.set(path, {
+      kind: 'file',
+      name: file.name,
+      path,
+      parentPath: parent,
+      bytes: file.size,
+      format: pickerFormat(file.name),
+      file,
+    })
+  }
+  for (const node of nodes.values()) {
+    if (node.kind !== 'folder') continue
+    const descendants = [...nodes.values()].filter(
+      (item): item is PickerFile => item.kind === 'file' && item.path.startsWith(`${node.path}/`),
+    )
+    node.fileCount = descendants.length
+    node.bytes = descendants.reduce((sum, file) => sum + (file.bytes ?? 0), 0)
+    node.formats = {}
+    descendants.forEach((file) => {
+      node.formats![file.format] = (node.formats![file.format] ?? 0) + 1
+    })
+  }
+  const list = (path: string) =>
+    [...nodes.values()].filter((node) => (node.parentPath ?? '') === path)
+  return {
+    listRoot: async () => list(''),
+    listChildren: async (path) => list(path),
+    search: async (query, scope) =>
+      [...nodes.values()].filter((node) => {
+        const inScope = scope.recursive
+          ? !scope.path || node.path.startsWith(`${scope.path}/`)
+          : (node.parentPath ?? '') === scope.path
+        return inScope && node.name.toLowerCase().includes(query.toLowerCase())
+      }),
+  }
+}