@morscherlab/mint-sdk 1.2.0-beta.15 → 1.2.0-beta.17

package/src/components/PlotlyChart.vue

@@ -0,0 +1,233 @@
+<script setup lang="ts">
+/**
+ * Render native Plotly data with MINT loading, empty, theme, and error states.
+ *
+ * Plotly is loaded only when the component is mounted, so importing the SDK does
+ * not add Plotly to the application's initial bundle.
+ *
+ * @example
+ * ```vue
+ * <PlotlyChart
+ *   title="QC overview"
+ *   :data="traces"
+ *   :layout="{ xaxis: { title: { text: 'Sample' } } }"
+ *   :config="{ toImageButtonOptions: { filename: 'qc-overview' } }"
+ * />
+ * ```
+ */
+import type * as PlotlyType from 'plotly.js'
+import { nextTick, onBeforeUnmount, onMounted, ref, toRaw, watch } from 'vue'
+
+import ChartContainer from './ChartContainer.vue'
+
+interface Props {
+  data: PlotlyType.Data[]
+  layout?: Partial<PlotlyType.Layout>
+  config?: Partial<PlotlyType.Config>
+  title?: string
+  description?: string
+  loading?: boolean
+  empty?: boolean
+  emptyMessage?: string
+  ariaLabel?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  layout: () => ({}),
+  config: () => ({}),
+  loading: false,
+  empty: false,
+  emptyMessage: 'No data available',
+  ariaLabel: 'Interactive Plotly chart',
+})
+
+const chartElement = ref<HTMLDivElement | null>(null)
+const failed = ref(false)
+let plotly: typeof PlotlyType | null = null
+let resizeObserver: ResizeObserver | null = null
+let themeObserver: MutationObserver | null = null
+let renderedElement: HTMLDivElement | null = null
+let rendering = false
+let disposed = false
+let revision = 0
+
+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
+}
+
+function cssValue(name: string, fallback: string): string {
+  const value = getComputedStyle(chartElement.value ?? document.documentElement).getPropertyValue(name).trim()
+  return value || getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback
+}
+
+// Unwrap nested Vue proxies while copying Plotly's mutable input tree. Keep
+// native dates/typed arrays and callbacks instead of round-tripping through JSON.
+function clonePlotlyInput<T>(value: T): T {
+  const raw = toRaw(value)
+  if (Array.isArray(raw)) return raw.map(clonePlotlyInput) as T
+  if (raw !== null && typeof raw === 'object') {
+    if (Object.getPrototypeOf(raw) === Object.prototype) {
+      return Object.fromEntries(Object.entries(raw).map(([key, item]) => [key, clonePlotlyInput(item)])) as T
+    }
+    return structuredClone(raw)
+  }
+  return raw
+}
+
+function themedLayout(): Partial<PlotlyType.Layout> {
+  const textColor = cssValue('--text-primary', '#1E293B')
+  const gridColor = cssValue('--border-color', '#E5E7EB')
+  const layout = clonePlotlyInput(props.layout)
+  return {
+    autosize: true,
+    paper_bgcolor: 'rgba(0,0,0,0)',
+    plot_bgcolor: 'rgba(0,0,0,0)',
+    ...layout,
+    font: { color: textColor, family: cssValue('--font-sans', 'Arial, sans-serif'), ...layout.font },
+    xaxis: { gridcolor: gridColor, ...layout.xaxis },
+    yaxis: { gridcolor: gridColor, ...layout.yaxis },
+  }
+}
+
+function purgeChart(): void {
+  resizeObserver?.disconnect()
+  if (renderedElement) plotly?.purge(renderedElement)
+  renderedElement = null
+}
+
+async function renderChart(): Promise<void> {
+  revision++
+  if (rendering || disposed || props.loading || props.empty) return
+  rendering = true
+  try {
+    while (!disposed && !props.loading && !props.empty) {
+      const currentRevision = revision
+      failed.value = false
+      await nextTick()
+      if (disposed || props.loading || props.empty) break
+      try {
+        plotly ??= await loadPlotly()
+        if (disposed || props.loading || props.empty) break
+        if (currentRevision !== revision) continue
+        const element = chartElement.value
+        if (!element) break
+        renderedElement = element
+        // Plotly mutates traces and nested layout fields; keep caller-owned values intact.
+        await plotly.react(
+          element,
+          clonePlotlyInput(props.data),
+          themedLayout(),
+          { responsive: true, displaylogo: false, ...props.config },
+        )
+        if (disposed || props.loading || props.empty || element !== chartElement.value) {
+          purgeChart()
+        } else {
+          resizeObserver?.observe(element)
+        }
+      } catch {
+        purgeChart()
+        if (!disposed && currentRevision === revision) failed.value = true
+      }
+      if (currentRevision === revision) break
+    }
+  } finally {
+    rendering = false
+    if (disposed || props.loading || props.empty) purgeChart()
+  }
+}
+
+onMounted(() => {
+  if (typeof ResizeObserver !== 'undefined') {
+    resizeObserver = new ResizeObserver(() => {
+      if (rendering || !plotly || !renderedElement) return
+      // A tab can become hidden or unmount before Plotly's async resize finishes.
+      void Promise.resolve(plotly.Plots.resize(renderedElement)).catch(() => {})
+    })
+  }
+
+  if (typeof MutationObserver !== 'undefined') {
+    themeObserver = new MutationObserver(() => void renderChart())
+    themeObserver.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class', 'style'],
+    })
+  }
+  void renderChart()
+})
+
+watch(
+  [() => props.data, () => props.layout, () => props.config, () => props.loading, () => props.empty],
+  () => {
+    if (props.loading || props.empty) {
+      resizeObserver?.disconnect()
+      if (!rendering) purgeChart()
+    }
+    void renderChart()
+  },
+)
+
+onBeforeUnmount(() => {
+  disposed = true
+  resizeObserver?.disconnect()
+  themeObserver?.disconnect()
+  // An in-flight react must finish before its resources can be purged completely.
+  if (!rendering) purgeChart()
+})
+</script>
+
+<template>
+  <ChartContainer
+    :title="title"
+    :description="description"
+    :loading="loading"
+    :empty="empty"
+    :empty-message="emptyMessage"
+  >
+    <template v-if="$slots.toolbar" #toolbar>
+      <slot name="toolbar" />
+    </template>
+    <template v-if="$slots.empty" #empty>
+      <slot name="empty" />
+    </template>
+
+    <template v-if="failed">
+      <slot name="error">
+        <div class="mint-plotly-chart__error">
+          <p role="alert">Unable to display this chart.</p>
+        </div>
+      </slot>
+    </template>
+    <div
+      ref="chartElement"
+      v-show="!failed"
+      class="mint-plotly-chart__plot"
+      role="group"
+      :aria-label="ariaLabel"
+    />
+
+    <template v-if="$slots.legend" #legend>
+      <slot name="legend" />
+    </template>
+  </ChartContainer>
+</template>
+
+<style scoped>
+.mint-plotly-chart__plot {
+  width: 100%;
+  min-height: 24rem;
+}
+
+.mint-plotly-chart__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-hover);
+}
+
+.mint-plotly-chart__error :deep(p) {
+  margin: 0;
+}
+</style>

package/src/components/SegmentedControl.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-/** Renders a segmented button group for single-option selection, with simple or solid variants. */
+/** Renders a segmented button group for single-option selection, defaulting to the card variant. */
 import { computed, type ComponentPublicInstance } from 'vue'
 import type { SegmentedOption, SegmentedOptionInput, SegmentedControlVariant, SegmentedControlSize } from '../types'
 import { normalizeOptionInput } from '../utils/options'
@@ -16,7 +16,7 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  variant: 'simple',
+  variant: 'card',
   size: 'md',
   fullWidth: false,
   disabled: false,

package/src/components/index.ts

@@ -99,6 +99,7 @@ export { default as SampleHierarchyTree } from './SampleHierarchyTree.vue'
 export { default as ProtocolStepEditor } from './ProtocolStepEditor.vue'
 
 // Scientific display components
+export { default as PlotlyChart } from './PlotlyChart.vue'
 export { default as ScientificNumber } from './ScientificNumber.vue'
 /** Renders a chemical formula string (H₂O, C₆H₁₂O₆, Ca(OH)₂) with typographically correct subscripts and superscripts for charges. @deprecated Unused by the MINT platform and scheduled for removal in MINT 1.3; no platform replacement is planned. */
 export { default as ChemicalFormula } from './ChemicalFormula.vue'

package/src/composables/filePicker/localFiles.ts

@@ -2,10 +2,13 @@ import type { PickerAdapter, PickerFile, PickerNode } from '../../types/filePick
 import { pickerFormat } from './validation'
 
 /** Construct metadata only: no FileReader, arrayBuffer or upload. */
-export function localFilesAdapter(files: File[]): PickerAdapter {
+export function localFilesAdapter(
+  files: File[],
+  relativePaths?: (string | undefined)[],
+): PickerAdapter {
   const nodes = new Map<string, PickerNode>()
-  for (const file of files) {
-    const relative = file.webkitRelativePath || file.name
+  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++) {

package/src/composables/filePicker/usePickerNavigation.ts

@@ -6,7 +6,11 @@ import type {
   PickerTreeRow,
 } from '../../types/filePicker'
 
-export function usePickerNavigation(adapter: () => PickerAdapter, request: () => PickerRequest) {
+export function usePickerNavigation(
+  adapter: () => PickerAdapter,
+  request: () => PickerRequest,
+  systemFilter: (node: PickerNode) => boolean = () => true,
+) {
   const path = shallowRef('')
   const trail = ref<{ path: string; label: string }[]>([])
   const entries = shallowRef<PickerNode[]>([])
@@ -23,6 +27,17 @@ export function usePickerNavigation(adapter: () => PickerAdapter, request: () =>
   const pending = new Map<string, Promise<PickerNode[]>>()
   const childControllers = new Set<AbortController>()
 
+  function isAllowed(node: PickerNode): boolean {
+    const seen = new Set<string>()
+    let current: PickerNode | undefined = node
+    while (current && !seen.has(current.path)) {
+      if (!systemFilter(current)) return false
+      seen.add(current.path)
+      current = current.parentPath ? nodes.value.get(current.parentPath) : undefined
+    }
+    return true
+  }
+
   function register(items: PickerNode[], parent?: string) {
     for (const item of items)
       nodes.value.set(item.path, {
@@ -56,7 +71,11 @@ export function usePickerNavigation(adapter: () => PickerAdapter, request: () =>
     loading.value = false
     error.value = ''
   }
-  async function loadChildren(folder: string, ancestors: string[] = []): Promise<PickerNode[]> {
+  async function loadChildren(
+    folder: string,
+    ancestors: string[] = [],
+    refresh = false,
+  ): Promise<PickerNode[]> {
     if (ancestors.includes(folder)) throw new Error('The adapter returned a circular folder tree.')
     const cached = children.value.get(folder)
     if (cached) return cached
@@ -66,7 +85,7 @@ export function usePickerNavigation(adapter: () => PickerAdapter, request: () =>
     const abort = new AbortController()
     childControllers.add(abort)
     const task = adapter()
-      .listChildren(folder, { ...request(), signal: abort.signal })
+      .listChildren(folder, { ...request(), ...(refresh && { refresh }), signal: abort.signal })
       .then((items) => {
         if (token !== epoch) throw new DOMException('Cancelled', 'AbortError')
         const retained = new Set(items.map((item) => item.path))
@@ -91,11 +110,11 @@ export function usePickerNavigation(adapter: () => PickerAdapter, request: () =>
     pending.set(folder, task)
     return task
   }
-  async function load(query = '', recursive = false) {
+  async function load(query = '', recursive = false, refresh = false) {
     const token = ++navigation
     controller?.abort()
     controller = new AbortController()
-    const options = { ...request(), signal: controller.signal }
+    const options = { ...request(), ...(refresh && { refresh }), signal: controller.signal }
     loading.value = true
     error.value = ''
     entries.value = []
@@ -103,7 +122,7 @@ export function usePickerNavigation(adapter: () => PickerAdapter, request: () =>
       const items = query.trim()
         ? await adapter().search(query.trim(), { path: path.value, recursive }, options)
         : path.value
-          ? await loadChildren(path.value)
+          ? await loadChildren(path.value, [], refresh)
           : await adapter().listRoot(options)
       if (token !== navigation) return
       register(items, query.trim() ? undefined : path.value)
@@ -116,7 +135,7 @@ export function usePickerNavigation(adapter: () => PickerAdapter, request: () =>
     }
   }
   async function expand(node: PickerNode) {
-    if (node.kind !== 'folder' || node.unavailableReason) return
+    if (node.kind !== 'folder' || node.unavailableReason || !isAllowed(node)) return
     if (expanded.value.has(node.path)) {
       expanded.value.delete(node.path)
       return
@@ -138,7 +157,7 @@ export function usePickerNavigation(adapter: () => PickerAdapter, request: () =>
     }
   }
   function enter(node: PickerNode) {
-    if (node.kind !== 'folder' || node.unavailableReason) return
+    if (node.kind !== 'folder' || node.unavailableReason || !isAllowed(node)) return
     const index = trail.value.findIndex((crumb) => crumb.path === node.path)
     trail.value =
       index >= 0
@@ -160,6 +179,7 @@ export function usePickerNavigation(adapter: () => PickerAdapter, request: () =>
       for (const item of items) {
         if (ancestors.has(item.path) || depth > 30) continue
         const node = nodes.value.get(item.path) ?? item
+        if (!isAllowed(node)) continue
         result.push({
           node,
           depth,
@@ -187,6 +207,7 @@ export function usePickerNavigation(adapter: () => PickerAdapter, request: () =>
     loading,
     error,
     rows,
+    isAllowed,
     clear,
     invalidate,
     register,

package/src/composables/filePicker/usePickerSelection.ts

@@ -1,4 +1,4 @@
-import { computed, ref, shallowRef } from 'vue'
+import { computed, ref, shallowRef, watch } from 'vue'
 import type {
   PickerCapability,
   PickerExcluded,
@@ -36,6 +36,8 @@ export function usePickerSelection(
     return false
   }
   function exclusion(node: PickerNode) {
+    if (!nav.isAllowed(node))
+      return { path: node.path, name: node.name, reason: 'forbidden' as const }
     const own = pickerExclusion(node, capability(), skipBlanks())
     if (own) return own
     const seen = new Set<string>()
@@ -72,7 +74,9 @@ export function usePickerSelection(
     focusPath.value = node.path
     if (!selectable(node)) return
     const multi = mode() === 'multi-file' || mode() === 'folder+files'
-    const additive = multi && (modifiers.metaKey || modifiers.ctrlKey)
+    // Multi modes behave like a checklist: a plain click (or Space) adds or
+    // removes one row, Shift extends a range, Ctrl/Cmd is accepted for habit.
+    const additive = multi && (modifiers.metaKey || modifiers.ctrlKey || modifiers.toggle)
     if (multi && modifiers.shiftKey && anchor) {
       const rows = nav.rows.value.map((row) => row.node)
       const from = rows.findIndex((item) => item.path === anchor)
@@ -141,12 +145,13 @@ export function usePickerSelection(
   const roots = computed(() =>
     [...keys.value]
       .map((key) => nav.nodes.value.get(key))
-      .filter((node): node is PickerNode => !!node && !ancestorSelected(node)),
+      .filter((node): node is PickerNode => !!node && !ancestorSelected(node) && nav.isAllowed(node)),
   )
   const chosen = computed(() => {
     const files: PickerFile[] = []
     const excluded: PickerExcluded[] = []
     for (const node of nav.nodes.value.values()) {
+      if (!nav.isAllowed(node)) continue
       if (!keys.value.has(node.path) && !ancestorSelected(node)) continue
       const reason =
         exclusion(node) ??
@@ -170,6 +175,7 @@ export function usePickerSelection(
     const seen = new Set<string>()
     async function walk(node: PickerNode, ancestors: string[] = []): Promise<PickerFile[]> {
       if (token !== generation) throw new DOMException('Cancelled', 'AbortError')
+      if (!nav.isAllowed(node)) return []
       if (node.kind === 'file') return [node]
       if (node.unavailableReason) return []
       if (ancestors.includes(node.path))
@@ -213,8 +219,17 @@ export function usePickerSelection(
       if (token === generation) resolving.value = false
     }
   }
-  const focused = computed(
-    () => nav.nodes.value.get(focusPath.value) ?? roots.value[roots.value.length - 1] ?? null,
+  const focused = computed(() => {
+    const node = nav.nodes.value.get(focusPath.value)
+    return node && nav.isAllowed(node) ? node : roots.value[roots.value.length - 1] ?? null
+  })
+  watch(
+    () => new Map([...nav.nodes.value].map(([path, node]) => [path, nav.isAllowed(node)])),
+    (allowed, previous) => {
+      if (keys.value.size && [...allowed].some(([path, value]) =>
+        previous.has(path) && value !== previous.get(path),
+      )) void resolve()
+    },
   )
   function folderProgress(node: PickerNode): string {
     if (node.kind !== 'folder' || node.fileCount == null) return ''

package/src/composables/filePicker/validation.ts

@@ -31,6 +31,7 @@ export function pickerReason(excluded: PickerExcluded | null, node?: PickerNode)
     blank: 'Skipped by the blank-file rule.',
     unreadable: node?.unavailableReason || 'This item cannot be read.',
     deselected: 'Removed from the selection.',
+    forbidden: 'This item is not permitted by the system filter.',
   }[excluded.reason]
 }
 

package/src/composables/useApi.ts

@@ -1,6 +1,7 @@
 import axios, { type AxiosInstance, type AxiosRequestConfig, type InternalAxiosRequestConfig } from 'axios'
 import { useSettingsStore } from '../stores/settings'
 import { useAuthStore } from '../stores/auth'
+import { mintApiErrorFromResponse } from '../apiErrors'
 
 let apiClientInstance: AxiosInstance | null = null
 let interceptorAttached = false
@@ -8,11 +9,13 @@ let interceptorAttached = false
 interface MintAxiosRequestConfig extends AxiosRequestConfig {
   _mintSkipAuth?: boolean
   _mintAuthToken?: string
+  _mintTypedErrors?: boolean
 }
 
 interface MintInternalAxiosRequestConfig extends InternalAxiosRequestConfig {
   _mintSkipAuth?: boolean
   _mintAuthToken?: string
+  _mintTypedErrors?: boolean
 }
 
 type MutableHeaders = Record<string, unknown> & {
@@ -141,6 +144,8 @@ export interface ApiClientOptions {
   baseUrl?: string
   timeout?: number
   withAuth?: boolean
+  /** Normalize failed responses into MintApiError. Generated clients enable this by default. */
+  typedErrors?: boolean
 }
 
 export interface UseApiReturn {
@@ -187,11 +192,34 @@ export function useApi(options: ApiClientOptions = {}): UseApiReturn {
     })
     apiClient.interceptors.response.use(
       (response) => response,
-      (error: unknown) => {
-        if (axios.isAxiosError(error) && error.response?.status === 401) {
+      async (error: unknown) => {
+        if (axios.isAxiosError(error) && error.response) {
           const request = error.config as MintInternalAxiosRequestConfig | undefined
-          if (request?._mintSkipAuth !== true) {
-            return Promise.reject(authenticationRequiredError(error, request?._mintAuthToken))
+          if (request?._mintTypedErrors) {
+            if (error.response.status === 401 && request._mintSkipAuth !== true) {
+              authenticationRequiredError(error, request._mintAuthToken)
+            }
+            let payload: unknown = error.response.data
+            if (payload instanceof Blob) {
+              try {
+                payload = JSON.parse(await payload.text())
+              } catch {
+                // Keep non-JSON download errors available as the original body.
+              }
+            }
+            return Promise.reject(mintApiErrorFromResponse(
+              error.response.status,
+              payload,
+              {
+                requestId: String(error.response.headers?.['x-request-id'] ?? '') || null,
+                cause: error,
+              },
+            ))
+          }
+          if (error.response.status === 401) {
+            if (request?._mintSkipAuth !== true) {
+              return Promise.reject(authenticationRequiredError(error, request?._mintAuthToken))
+            }
           }
         }
         return Promise.reject(error)
@@ -213,6 +241,7 @@ export function useApi(options: ApiClientOptions = {}): UseApiReturn {
     const base: MintAxiosRequestConfig = {
       baseURL: getBaseUrl(),
       timeout: options.timeout ?? settingsStore.requestTimeout,
+      _mintTypedErrors: options.typedErrors,
       ...config,
     }
     // Strip auth header if explicitly disabled

package/src/composables/useFilePicker.ts

@@ -1,4 +1,4 @@
-import { computed, nextTick, onScopeDispose, ref, shallowRef, watch } from 'vue'
+import { computed, nextTick, onScopeDispose, ref, shallowRef, toRaw, watch } from 'vue'
 import type {
   PickerAdapter,
   PickerCapabilities,
@@ -19,6 +19,7 @@ interface PickerStateProps {
   capabilities: PickerCapabilities
   initialPath: string
   initialSelection: PickerSelection | null
+  systemFilter?: (node: PickerNode, source: PickerSource) => boolean
 }
 type PickerEmit = {
   (event: 'update:open', value: boolean): void
@@ -47,10 +48,14 @@ export function useFilePicker(props: PickerStateProps, emit: PickerEmit) {
   const skipBlanks = shallowRef(false)
   const reviewing = shallowRef(false)
   const localFiles = shallowRef<File[]>([])
-  const localAdapter = computed(() => localFilesAdapter(localFiles.value))
+  const localPaths = new WeakMap<File, string>()
+  const localAdapter = computed(() =>
+    localFilesAdapter(localFiles.value, localFiles.value.map((file) => localPaths.get(toRaw(file)))),
+  )
   const nav = usePickerNavigation(
     () => (source.value === 'localFile' ? localAdapter.value : props.adapter),
     () => ({ source: source.value }),
+    (node) => props.systemFilter?.(node, source.value) !== false,
   )
   const capability = computed(() => props.capabilities[source.value])
   const selection = usePickerSelection(
@@ -79,14 +84,7 @@ export function useFilePicker(props: PickerStateProps, emit: PickerEmit) {
     }
   })
 
-  const filesInput = ref<HTMLInputElement | null>(null)
-  const folderInput = ref<HTMLInputElement | null>(null)
   const searchArea = ref<HTMLElement | null>(null)
-  const accept = computed(
-    () =>
-      capability.value?.formats.map((format) => `.${format.replace(/^\./, '')}`).join(',') ||
-      undefined,
-  )
   const confirmLabel = computed(
     () =>
       ({
@@ -133,12 +131,17 @@ export function useFilePicker(props: PickerStateProps, emit: PickerEmit) {
     selection.reset(seed?.source === source.value ? seed : null)
     reviewing.value = false
     if (!allowedSources.value.includes(source.value)) return
-    if (seed?.source === 'localFile' && source.value === 'localFile') localFiles.value = seed.files
+    if (seed?.source === 'localFile' && source.value === 'localFile') {
+      seed.files.forEach((file, index) => {
+        if (seed.relativePaths?.[index]) localPaths.set(toRaw(file), seed.relativePaths[index]!)
+      })
+      localFiles.value = seed.files
+    }
     await nav.load(query.value, recursive.value)
     if (token !== openGeneration || !props.open) return
     if (seed?.source === 'localFile' && source.value === 'localFile') {
       // Restored local File objects are already the confirmed subset.
-      for (const node of nav.entries.value) selection.select(node, { ctrlKey: true })
+      await selectLocalFiles()
     }
     if (selection.keys.value.size) await selection.resolve()
   }
@@ -238,7 +241,7 @@ export function useFilePicker(props: PickerStateProps, emit: PickerEmit) {
   }
   async function refresh() {
     nav.invalidate()
-    await nav.load(query.value, recursive.value)
+    await nav.load(query.value, recursive.value, true)
     if (selection.keys.value.size) await selection.resolve()
   }
   function selectParent(node: PickerNode) {
@@ -251,12 +254,14 @@ export function useFilePicker(props: PickerStateProps, emit: PickerEmit) {
     nav.register([parent])
     selection.select(parent)
   }
-  async function chooseLocal(event: Event) {
+  async function chooseLocal(files: File[], _rootName?: string, relativePaths?: string[]) {
     const token = openGeneration
-    const input = event.target as HTMLInputElement
-    if (!input.files?.length) return
-    localFiles.value = Array.from(input.files)
-    input.value = ''
+    if (!files.length || !props.open || source.value !== 'localFile') return
+    files.forEach((file, index) => {
+      if (relativePaths?.[index]) localPaths.set(toRaw(file), relativePaths[index]!)
+    })
+    localFiles.value = files
+    clearTimeout(timer)
     nav.clear()
     selection.reset()
     path.value = ''
@@ -264,7 +269,16 @@ export function useFilePicker(props: PickerStateProps, emit: PickerEmit) {
     query.value = ''
     await nav.load()
     if (token !== openGeneration || !props.open || source.value !== 'localFile') return
-    const candidates = nav.entries.value.filter((node) => selection.selectable(node))
+    await selectLocalFiles()
+  }
+  async function selectLocalFiles() {
+    const token = openGeneration
+    const items = props.selectionMode === 'single-file' || props.selectionMode === 'multi-file'
+      ? await localAdapter.value.search('', { path: '', recursive: true })
+      : nav.entries.value
+    if (token !== openGeneration || !props.open || source.value !== 'localFile') return
+    nav.register(items)
+    const candidates = items.filter((node) => selection.selectable(node))
     for (const node of props.selectionMode === 'single-file' || props.selectionMode === 'folder'
       ? candidates.slice(0, 1)
       : candidates)
@@ -280,7 +294,7 @@ export function useFilePicker(props: PickerStateProps, emit: PickerEmit) {
       source.value === 'localFile'
         ? {
             source: 'localFile',
-            files: chosen.value.files.flatMap((node) => (node.file ? [node.file] : [])),
+            files: chosen.value.files.flatMap((node) => (node.file ? [toRaw(node.file)] : [])),
           }
         : {
             source: 'server',
@@ -288,6 +302,14 @@ export function useFilePicker(props: PickerStateProps, emit: PickerEmit) {
             files: [...chosen.value.files],
             excluded: [...chosen.value.excluded],
           }
+    if (result.source === 'localFile') {
+      const relativePaths = result.files.map((file) =>
+        localPaths.get(file) || file.webkitRelativePath || file.name,
+      )
+      if (relativePaths.some((path, index) =>
+        path !== (result.files[index]!.webkitRelativePath || result.files[index]!.name),
+      )) result.relativePaths = relativePaths
+    }
     lastConfirmed = result
     emit('select', result)
     emit('update:open', false)
@@ -326,10 +348,7 @@ export function useFilePicker(props: PickerStateProps, emit: PickerEmit) {
     focused,
     resolving,
     resolutionError,
-    filesInput,
-    folderInput,
     searchArea,
-    accept,
     confirmLabel,
     folderCount,
     canConfirm,