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

package/src/components/internal/WellEditPopupInternal.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { ref, watch, computed } from 'vue'
+import { onBeforeUnmount, onMounted, ref, watch, computed } from 'vue'
 import type { Well, WellEditData, WellEditField } from '../../types'
 import { useEventListener } from '../../composables/useEventListener'
+import { useFocusTrap } from '../../composables/useFocusTrap'
 
 interface Props {
   wellId: string
@@ -86,6 +87,22 @@ function handleKeydown(e: KeyboardEvent) {
 
 useEventListener(() => document, 'keydown', handleKeydown)
 
+// The popup has no open/close prop of its own — the parent mounts and unmounts it —
+// so the trap activates on mount and releases (restoring focus) just before unmount,
+// the same lifecycle BaseModal drives off `modelValue`.
+const containerRef = ref<HTMLElement | null>(null)
+const trapActive = ref(false)
+
+useFocusTrap({ containerRef, active: trapActive })
+
+onMounted(() => {
+  trapActive.value = true
+})
+
+onBeforeUnmount(() => {
+  trapActive.value = false
+})
+
 const sampleTypeButtons = [
   { type: 'sample', label: 'S', tooltip: 'Sample' },
   { type: 'blank', label: 'B', tooltip: 'Blank' },
@@ -101,8 +118,10 @@ const sampleTypeButtons = [
 
     <!-- Popup -->
     <div
+      ref="containerRef"
       class="mint-well-edit-popup"
       :style="popupStyle"
+      tabindex="-1"
       @click.stop
     >
       <!-- Header -->
@@ -224,7 +243,3 @@ const sampleTypeButtons = [
     </div>
   </Teleport>
 </template>
-
-<style>
-@import '../../styles/components/well-edit-popup.css';
-</style>

package/src/components/internal/WorkspaceControlsInternal.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+/**
+ * Internal: renders PluginWorkspaceView's default (main content) slot bound to the
+ * control-schema-derived scoped-slot payload (active view, values, component bindings/props).
+ * Not part of the public SDK surface — see PluginWorkspaceView.vue for the public component.
+ */
+import type { PluginWorkspaceControlsModel } from '../../composables/pluginWorkspaceModel'
+
+defineProps<{
+  controls: PluginWorkspaceControlsModel
+}>()
+
+defineSlots<{
+  default?: (props: PluginWorkspaceControlsModel) => unknown
+}>()
+</script>
+
+<template>
+  <slot v-bind="controls" />
+</template>

package/src/components/internal/WorkspaceShellInternal.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+/**
+ * Internal: AppLayout + AppTopBar for PluginWorkspaceView, driven by a single `shell` model.
+ * Owns the responsive/collapse layout props and the top bar's default rendering; the caller
+ * decides whether to override the `topbar`/`sidebar` slots and supplies the sidebar content.
+ * Not part of the public SDK surface — see PluginWorkspaceView.vue for the public component.
+ */
+import type {
+  AccountMenuItem,
+  PageSelectorItem,
+  PillNavItem,
+  PillNavOption,
+  PluginSwitcherPlugin,
+} from '../../types'
+import AppLayout from '../AppLayout.vue'
+import AppTopBar from '../AppTopBar.vue'
+import type { PluginWorkspaceShellModel } from '../../composables/pluginWorkspaceModel'
+
+defineProps<{
+  shell: PluginWorkspaceShellModel
+}>()
+
+const emit = defineEmits<{
+  'page-selector-select': [page: PageSelectorItem]
+  'pill-select': [item: PillNavItem]
+  'pill-option-select': [option: PillNavOption, item: PillNavItem]
+  'plugin-switcher-select': [plugin: PluginSwitcherPlugin]
+  'plugin-switcher-install': []
+  'account-menu-select': [item: AccountMenuItem]
+  'sign-out': []
+  'notifications-click': []
+  'settings-values-change': [data: Record<string, unknown>]
+  'admin-click': []
+}>()
+
+function handlePillOptionSelect(option: PillNavOption, item: PillNavItem) {
+  emit('pill-option-select', option, item)
+}
+
+defineSlots<{
+  topbar?: (props: PluginWorkspaceShellModel['controls']) => unknown
+  sidebar?: (props: PluginWorkspaceShellModel['controls']) => unknown
+  default?: (props: PluginWorkspaceShellModel['controls']) => unknown
+  icon?: (props: Record<string, unknown>) => unknown
+  logo?: (props: Record<string, unknown>) => unknown
+  'page-selector-icon'?: (props: Record<string, unknown>) => unknown
+  'page-selector-item-icon'?: (props: Record<string, unknown>) => unknown
+  nav?: (props: Record<string, unknown>) => unknown
+  center?: (props: Record<string, unknown>) => unknown
+  actions?: (props: Record<string, unknown>) => unknown
+  'account-menu-items'?: (props: Record<string, unknown>) => unknown
+  'account-menu-item-icon'?: (props: Record<string, unknown>) => unknown
+  'settings-appearance'?: (props: Record<string, unknown>) => unknown
+}>()
+</script>
+
+<template>
+  <AppLayout
+    class="mint-plugin-workspace-view"
+    :sidebar-position="shell.sidebarPosition"
+    :sidebar-width="shell.sidebarWidth"
+    :floating="shell.floating"
+    :responsive-sidebar="shell.responsiveSidebar"
+    :sidebar-toggle-label="shell.sidebarToggleLabel"
+    :sidebar-close-label="shell.sidebarCloseLabel"
+  >
+    <template #topbar>
+      <slot name="topbar" v-bind="shell.controls">
+        <AppTopBar
+          :title="shell.title"
+          :subtitle="shell.subtitle"
+          :variant="shell.topBarVariant"
+          :home-path="shell.homePath"
+          :show-logo="shell.showLogo"
+          :page-selector="shell.pageSelector"
+          :current-page-selector-id="shell.currentPageSelectorId"
+          :plugin-switcher="shell.pluginSwitcher"
+          :pill-nav="shell.pillNav"
+          :current-pill-id="shell.currentPillId"
+          :show-theme-toggle="shell.showThemeToggle"
+          :show-settings="shell.showSettings"
+          :settings-config="shell.settingsConfig"
+          :show-standalone-label="shell.showStandaloneLabel"
+          :standalone-label="shell.standaloneLabel"
+          :account-menu="shell.accountMenu"
+          :show-notifications="shell.showNotifications"
+          :has-notification-dot="shell.hasNotificationDot"
+          :show-admin="shell.showAdmin"
+          :admin-path="shell.adminPath"
+          :user-name="shell.userName"
+          :user-initial="shell.userInitial"
+          :user-email="shell.userEmail"
+          @page-selector-select="emit('page-selector-select', $event)"
+          @pill-select="emit('pill-select', $event)"
+          @pill-option-select="handlePillOptionSelect"
+          @plugin-switcher-select="emit('plugin-switcher-select', $event)"
+          @plugin-switcher-install="emit('plugin-switcher-install')"
+          @account-menu-select="emit('account-menu-select', $event)"
+          @sign-out="emit('sign-out')"
+          @notifications-click="emit('notifications-click')"
+          @settings-values-change="emit('settings-values-change', $event)"
+          @admin-click="emit('admin-click')"
+        >
+          <template
+            v-for="slotName in shell.topBarSlotNames"
+            :key="slotName"
+            #[slotName]="slotProps"
+          >
+            <!-- @vue-ignore dynamic SDK slot forwarding for AppTopBar passthrough slots -->
+            <slot
+              :name="slotName"
+              v-bind="slotProps ?? {}"
+            />
+          </template>
+        </AppTopBar>
+      </slot>
+    </template>
+
+    <template v-if="shell.hasSidebarSurface" #sidebar>
+      <slot name="sidebar" v-bind="shell.controls" />
+    </template>
+
+    <slot v-bind="shell.controls" />
+  </AppLayout>
+</template>

package/src/components/internal/WorkspaceSidebarInternal.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+/**
+ * Internal: AppSidebar for PluginWorkspaceView, driven by a single `sidebar` model covering
+ * chrome, panels/forms, collapse behavior, and the compact control-schema props that drive
+ * AppSidebar's auto-generated form.
+ * Not part of the public SDK surface — see PluginWorkspaceView.vue for the public component.
+ */
+import AppSidebar from '../AppSidebar.vue'
+import type { PluginWorkspaceSidebarModel } from '../../composables/pluginWorkspaceModel'
+
+defineProps<{
+  sidebar: PluginWorkspaceSidebarModel
+}>()
+
+defineEmits<{
+  'update:modelValue': [values: Record<string, unknown>]
+  'update:collapsed': [value: boolean]
+  'update:toggle': [sectionId: string, value: boolean]
+  'section-action': [sectionId: string, actionId: string]
+  'form-submit': [sectionId: string, values: Record<string, unknown>]
+  'form-cancel': [sectionId: string]
+}>()
+
+defineSlots<{
+  header?: (props: Record<string, unknown>) => unknown
+  collapsed?: (props: Record<string, unknown>) => unknown
+  'collapsed-footer'?: (props: Record<string, unknown>) => unknown
+  footer?: (props: Record<string, unknown>) => unknown
+}>()
+</script>
+
+<template>
+  <AppSidebar
+    :title="sidebar.title"
+    :subtitle="sidebar.subtitle"
+    :badge="sidebar.badge"
+    :variant="sidebar.variant"
+    :panels="sidebar.panels"
+    :active-view="sidebar.activeView"
+    :floating="sidebar.floating"
+    :dense="sidebar.dense"
+    :width="sidebar.width"
+    :side="sidebar.side"
+    :forms="sidebar.forms"
+    :content-id="sidebar.contentId"
+    :show-when-empty="sidebar.showWhenEmpty"
+    :model="sidebar.model"
+    :controls="sidebar.controlSchema"
+    :control-options="sidebar.controlOptions"
+    :values="sidebar.values"
+    :form-enhancements="sidebar.formEnhancements"
+    :show-form-actions="sidebar.showFormActions"
+    :form-loading="sidebar.formLoading"
+    :form-disabled="sidebar.formDisabled"
+    :form-readonly="sidebar.formReadonly"
+    :form-size="sidebar.formSize"
+    :collapsible="sidebar.collapsible"
+    :collapsed="sidebar.collapsed"
+    :default-collapsed="sidebar.defaultCollapsed"
+    :collapsed-width="sidebar.collapsedWidth"
+    :collapse-button-label="sidebar.collapseButtonLabel"
+    :expand-button-label="sidebar.expandButtonLabel"
+    @update:model-value="$emit('update:modelValue', $event)"
+    @update:collapsed="$emit('update:collapsed', $event)"
+    @update:toggle="(sectionId, value) => $emit('update:toggle', sectionId, value)"
+    @section-action="(sectionId, actionId) => $emit('section-action', sectionId, actionId)"
+    @form-submit="(sectionId, values) => $emit('form-submit', sectionId, values)"
+    @form-cancel="$emit('form-cancel', $event)"
+  >
+    <template
+      v-for="slotName in sidebar.slotNames"
+      :key="slotName"
+      #[slotName]="slotProps"
+    >
+      <!-- @vue-ignore dynamic SDK slot forwarding for AppSidebar section-* passthrough slots -->
+      <slot
+        :name="slotName"
+        v-bind="slotProps ?? {}"
+      />
+    </template>
+  </AppSidebar>
+</template>

package/src/composables/controlSchemaTypes.ts

@@ -42,10 +42,27 @@ export interface ControlSectionConfig {
   actions?: SidebarToolSectionAction[]
   columns?: 1 | 2 | 3
   condition?: FieldCondition
+  /** The access policy. Preferred over the flat fields below. */
   access?: AccessPolicy
+  /**
+   * @deprecated Since MINT 1.2; use `access.visibleFor` instead. The flat
+   * duplicate is removed in 1.3.
+   */
   visibleFor?: AccessAudienceInput
+  /**
+   * @deprecated Since MINT 1.2; use `access.requiresAdmin` instead. The flat
+   * duplicate is removed in 1.3.
+   */
   requiresAdmin?: boolean
+  /**
+   * @deprecated Since MINT 1.2; use `access.permissions` instead. The flat
+   * duplicate is removed in 1.3.
+   */
   permissions?: readonly string[]
+  /**
+   * @deprecated Since MINT 1.2; use `access.anyPermissions` instead. The flat
+   * duplicate is removed in 1.3.
+   */
   anyPermissions?: readonly string[]
   defaultOpen?: boolean
   showToggle?: boolean
@@ -86,10 +103,27 @@ export interface ControlDefinition {
   pattern?: string | { value: string; message: string }
   validation?: FieldValidation
   condition?: FieldCondition
+  /** The access policy. Preferred over the flat fields below. */
   access?: AccessPolicy
+  /**
+   * @deprecated Since MINT 1.2; use `access.visibleFor` instead. The flat
+   * duplicate is removed in 1.3.
+   */
   visibleFor?: AccessAudienceInput
+  /**
+   * @deprecated Since MINT 1.2; use `access.requiresAdmin` instead. The flat
+   * duplicate is removed in 1.3.
+   */
   requiresAdmin?: boolean
+  /**
+   * @deprecated Since MINT 1.2; use `access.permissions` instead. The flat
+   * duplicate is removed in 1.3.
+   */
   permissions?: readonly string[]
+  /**
+   * @deprecated Since MINT 1.2; use `access.anyPermissions` instead. The flat
+   * duplicate is removed in 1.3.
+   */
   anyPermissions?: readonly string[]
   options?: readonly ControlOption[]
   section?: string

package/src/composables/experimentDesignData.ts

@@ -1,4 +1,5 @@
 import type { SelectOption } from '../types'
+import { isRecord } from '../utils/records'
 
 export interface ExperimentDesignDataResponse {
   experiment_id?: number
@@ -12,9 +13,6 @@ export interface ExtractExperimentSamplesOptions {
   includeControls?: boolean
 }
 
-function isRecord(value: unknown): value is Record<string, unknown> {
-  return value !== null && typeof value === 'object' && !Array.isArray(value)
-}
 
 function isPlatformDesignDataResponse(value: Record<string, unknown>): boolean {
   return (

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())
+      }),
+  }
+}

package/src/composables/filePicker/usePickerNavigation.ts

@@ -0,0 +1,220 @@
+import { computed, onScopeDispose, ref, shallowRef } from 'vue'
+import type {
+  PickerAdapter,
+  PickerNode,
+  PickerRequest,
+  PickerTreeRow,
+} from '../../types/filePicker'
+
+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[]>([])
+  const nodes = ref(new Map<string, PickerNode>())
+  const children = shallowRef(new Map<string, PickerNode[]>())
+  const expanded = ref(new Set<string>())
+  const expanding = ref(new Set<string>())
+  const expansionErrors = ref(new Map<string, string>())
+  const loading = shallowRef(false)
+  const error = shallowRef('')
+  let epoch = 0
+  let navigation = 0
+  let controller: AbortController | undefined
+  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, {
+        ...item,
+        parentPath:
+          item.parentPath !== undefined
+            ? item.parentPath
+            : parent !== undefined
+              ? parent || null
+              : (nodes.value.get(item.path)?.parentPath ?? null),
+      })
+  }
+  function invalidate() {
+    ++epoch
+    ++navigation
+    controller?.abort()
+    childControllers.forEach((item) => item.abort())
+    childControllers.clear()
+    pending.clear()
+    children.value = new Map()
+    expanding.value.clear()
+    expansionErrors.value.clear()
+  }
+  function clear() {
+    invalidate()
+    nodes.value.clear()
+    expanded.value.clear()
+    expanding.value.clear()
+    expansionErrors.value.clear()
+    entries.value = []
+    loading.value = false
+    error.value = ''
+  }
+  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
+    const existing = pending.get(folder)
+    if (existing) return existing
+    const token = epoch
+    const abort = new AbortController()
+    childControllers.add(abort)
+    const task = adapter()
+      .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))
+        function remove(path: string, seen = new Set<string>()) {
+          if (seen.has(path) || path === folder) return
+          seen.add(path)
+          for (const node of nodes.value.values())
+            if (node.parentPath === path) remove(node.path, seen)
+          nodes.value.delete(path)
+          children.value.delete(path)
+        }
+        for (const node of nodes.value.values())
+          if (node.parentPath === folder && !retained.has(node.path)) remove(node.path)
+        register(items, folder)
+        children.value = new Map(children.value).set(folder, items)
+        return items
+      })
+      .finally(() => {
+        childControllers.delete(abort)
+        if (token === epoch) pending.delete(folder)
+      })
+    pending.set(folder, task)
+    return task
+  }
+  async function load(query = '', recursive = false, refresh = false) {
+    const token = ++navigation
+    controller?.abort()
+    controller = new AbortController()
+    const options = { ...request(), ...(refresh && { refresh }), signal: controller.signal }
+    loading.value = true
+    error.value = ''
+    entries.value = []
+    try {
+      const items = query.trim()
+        ? await adapter().search(query.trim(), { path: path.value, recursive }, options)
+        : path.value
+          ? await loadChildren(path.value, [], refresh)
+          : await adapter().listRoot(options)
+      if (token !== navigation) return
+      register(items, query.trim() ? undefined : path.value)
+      entries.value = items
+    } catch (cause) {
+      if (token === navigation)
+        error.value = cause instanceof Error ? cause.message : 'Could not read this location.'
+    } finally {
+      if (token === navigation) loading.value = false
+    }
+  }
+  async function expand(node: PickerNode) {
+    if (node.kind !== 'folder' || node.unavailableReason || !isAllowed(node)) return
+    if (expanded.value.has(node.path)) {
+      expanded.value.delete(node.path)
+      return
+    }
+    expanded.value.add(node.path)
+    expanding.value.add(node.path)
+    expansionErrors.value.delete(node.path)
+    const token = epoch
+    try {
+      await loadChildren(node.path)
+    } catch (cause) {
+      if (token === epoch)
+        expansionErrors.value.set(
+          node.path,
+          cause instanceof Error ? cause.message : 'Could not read this folder.',
+        )
+    } finally {
+      if (token === epoch) expanding.value.delete(node.path)
+    }
+  }
+  function enter(node: PickerNode) {
+    if (node.kind !== 'folder' || node.unavailableReason || !isAllowed(node)) return
+    const index = trail.value.findIndex((crumb) => crumb.path === node.path)
+    trail.value =
+      index >= 0
+        ? trail.value.slice(0, index + 1)
+        : [...trail.value, { path: node.path, label: node.name }]
+    path.value = node.path
+  }
+  function up(target?: string) {
+    const index =
+      target !== undefined
+        ? trail.value.findIndex((crumb) => crumb.path === target)
+        : trail.value.length - 2
+    trail.value = index < 0 ? [] : trail.value.slice(0, index + 1)
+    path.value = trail.value[trail.value.length - 1]?.path ?? ''
+  }
+  const rows = computed(() => {
+    const result: PickerTreeRow[] = []
+    function visit(items: PickerNode[], depth: number, ancestors: Set<string>) {
+      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,
+          expanded: expanded.value.has(item.path),
+          loading: expanding.value.has(item.path),
+          error: expansionErrors.value.get(item.path),
+        })
+        if (expanded.value.has(item.path))
+          visit(children.value.get(item.path) ?? [], depth + 1, new Set([...ancestors, item.path]))
+      }
+    }
+    visit(entries.value, 0, new Set())
+    return result
+  })
+  onScopeDispose(clear)
+  return {
+    path,
+    trail,
+    entries,
+    nodes,
+    children,
+    expanded,
+    expanding,
+    expansionErrors,
+    loading,
+    error,
+    rows,
+    isAllowed,
+    clear,
+    invalidate,
+    register,
+    loadChildren,
+    load,
+    expand,
+    enter,
+    up,
+  }
+}