@morscherlab/mint-sdk 1.3.11 → 1.4.0-beta.10

package/src/components/internal/SelectMultipleInternal.vue

@@ -0,0 +1,242 @@
+<script setup lang="ts">
+/** BaseSelect with `multiple`: a field of removable chips that opens a filterable checkbox listbox, capped by `max`. */
+import { computed, nextTick, ref, useAttrs, useId, watch } from 'vue'
+import { Check, ChevronDown, X } from 'lucide-vue-next'
+import type { OptionPrimitive, SelectOption, SelectOptionInput } from '../../types'
+import { useEventListener } from '../../composables/useEventListener'
+import { useListSelection } from '../../composables/useListSelection'
+import { normalizeOptionInput } from '../../utils/options'
+
+type MultiOption = SelectOption<OptionPrimitive>
+
+interface Props {
+  modelValue: OptionPrimitive[]
+  options: SelectOptionInput[]
+  placeholder?: string
+  disabled?: boolean
+  invalid?: boolean
+  max?: number
+  size?: 'sm' | 'md' | 'lg'
+  ariaLabelledby?: string
+  ariaDescribedby?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  placeholder: 'Select options...',
+  disabled: false,
+  invalid: false,
+  max: undefined,
+  size: 'md',
+  ariaLabelledby: undefined,
+  ariaDescribedby: undefined,
+})
+
+defineOptions({ inheritAttrs: false })
+
+// The wrapper takes class and style; every other attribute (aria-label, data-*) names the focusable field.
+const attrs = useAttrs()
+const fieldAttrs = computed(() => {
+  const { class: _class, style: _style, ...rest } = attrs
+  return rest
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: OptionPrimitive[]]
+}>()
+
+const id = useId().replace(/:/g, '')
+const listboxId = `mint-multi-select-${id}`
+const root = ref<HTMLElement | null>(null)
+const field = ref<HTMLElement | null>(null)
+const search = ref<HTMLInputElement | null>(null)
+const open = ref(false)
+const query = ref('')
+const activeIndex = ref(-1)
+
+const normalizedOptions = computed<MultiOption[]>(() => props.options.map(normalizeOptionInput<OptionPrimitive, MultiOption>))
+const selection = useListSelection({
+  selected: () => props.modelValue,
+  items: normalizedOptions,
+  getValue: option => option.value,
+  disabled: () => props.disabled,
+  max: () => props.max,
+})
+
+const chips = computed(() => props.modelValue.map(value => ({
+  value,
+  label: normalizedOptions.value.find(option => option.value === value)?.label ?? String(value),
+})))
+const visibleOptions = computed(() => {
+  const needle = query.value.trim().toLocaleLowerCase()
+  if (!needle) return normalizedOptions.value
+  return normalizedOptions.value.filter(option => option.label.toLocaleLowerCase().includes(needle))
+})
+const activeDescendant = computed(() =>
+  activeIndex.value >= 0 ? `${listboxId}-option-${activeIndex.value}` : undefined,
+)
+
+function isUnavailable(option: MultiOption): boolean {
+  return !!option.disabled || (!selection.isSelected(option.value) && !selection.canAddMore.value)
+}
+
+async function openPanel(): Promise<void> {
+  if (props.disabled || open.value) return
+  query.value = ''
+  open.value = true
+  activeIndex.value = visibleOptions.value.length > 0 ? 0 : -1
+  await nextTick()
+  search.value?.focus()
+}
+
+async function closePanel(restoreFocus = false): Promise<void> {
+  open.value = false
+  query.value = ''
+  activeIndex.value = -1
+  if (restoreFocus) {
+    await nextTick()
+    field.value?.focus()
+  }
+}
+
+function moveActive(direction: 1 | -1): void {
+  const count = visibleOptions.value.length
+  if (count === 0) return
+  const start = activeIndex.value < 0 ? (direction === 1 ? -1 : count) : activeIndex.value
+  activeIndex.value = (start + direction + count) % count
+  void nextTick(() => document.getElementById(activeDescendant.value ?? '')?.scrollIntoView({ block: 'nearest' }))
+}
+
+function toggle(option: MultiOption): void {
+  if (props.disabled || isUnavailable(option)) return
+  emit('update:modelValue', selection.toggleValue(option.value))
+}
+
+function remove(value: OptionPrimitive): void {
+  if (props.disabled) return
+  emit('update:modelValue', props.modelValue.filter(selected => selected !== value))
+}
+
+function handleFieldKeydown(event: KeyboardEvent): void {
+  if (event.key !== 'Enter' && event.key !== ' ' && event.key !== 'ArrowDown') return
+  event.preventDefault()
+  void openPanel()
+}
+
+function handleSearchKeydown(event: KeyboardEvent): void {
+  if (event.key === 'ArrowDown') moveActive(1)
+  else if (event.key === 'ArrowUp') moveActive(-1)
+  else if (event.key === 'Enter') {
+    const option = visibleOptions.value[activeIndex.value]
+    if (option) toggle(option)
+  } else if (event.key === 'Escape') {
+    void closePanel(true)
+  } else if (event.key === 'Backspace' && query.value === '' && props.modelValue.length > 0) {
+    remove(props.modelValue[props.modelValue.length - 1]!)
+  } else return
+  event.preventDefault()
+}
+
+watch(visibleOptions, options => { activeIndex.value = options.length > 0 ? 0 : -1 })
+watch(() => props.disabled, disabled => { if (disabled) void closePanel() })
+useEventListener(() => document, 'pointerdown', event => {
+  if (open.value && !root.value?.contains(event.target as Node)) void closePanel()
+})
+</script>
+
+<template>
+  <div
+    ref="root"
+    :class="['mint-multi-select', `mint-multi-select--${size}`, $attrs.class]"
+    :style="$attrs.style"
+    @focusout="!root?.contains($event.relatedTarget as Node | null) && closePanel()"
+  >
+    <div
+      v-bind="fieldAttrs"
+      ref="field"
+      role="combobox"
+      :tabindex="disabled ? undefined : 0"
+      :class="[
+        'mint-multi-select__field',
+        {
+          'mint-multi-select__field--open': open,
+          'mint-multi-select__field--error': invalid,
+          'mint-multi-select__field--disabled': disabled,
+        },
+      ]"
+      aria-haspopup="listbox"
+      :aria-expanded="open"
+      :aria-controls="listboxId"
+      :aria-disabled="disabled || undefined"
+      :aria-invalid="invalid || undefined"
+      :aria-labelledby="ariaLabelledby || undefined"
+      :aria-describedby="ariaDescribedby || undefined"
+      @click="open ? closePanel() : openPanel()"
+      @keydown.self="handleFieldKeydown"
+    >
+      <div class="mint-multi-select__chips">
+        <span v-for="chip in chips" :key="String(chip.value)" class="mint-multi-select__chip">
+          {{ chip.label }}
+          <button
+            v-if="!disabled"
+            type="button"
+            tabindex="-1"
+            class="mint-multi-select__chip-remove"
+            :aria-label="`Remove ${chip.label}`"
+            @click.stop="remove(chip.value)"
+          >
+            <X :size="11" :stroke-width="2.25" aria-hidden="true" />
+          </button>
+        </span>
+        <span v-if="chips.length === 0" class="mint-multi-select__placeholder">{{ placeholder }}</span>
+      </div>
+      <ChevronDown class="mint-multi-select__icon" :size="14" aria-hidden="true" />
+    </div>
+
+    <div v-if="open" class="mint-popover mint-searchable-select__panel">
+      <div class="mint-searchable-select__search-wrap">
+        <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" aria-hidden="true">
+          <circle cx="8.5" cy="8.5" r="5.5" /><path d="m13 13 4 4" />
+        </svg>
+        <input
+          ref="search"
+          v-model="query"
+          role="combobox"
+          type="search"
+          class="mint-searchable-select__search"
+          placeholder="Filter…"
+          aria-label="Filter options"
+          :aria-expanded="open"
+          :aria-controls="listboxId"
+          :aria-activedescendant="activeDescendant"
+          aria-autocomplete="list"
+          @keydown="handleSearchKeydown"
+        >
+      </div>
+
+      <ul :id="listboxId" class="mint-searchable-select__list" role="listbox" aria-multiselectable="true">
+        <li
+          v-for="(option, index) in visibleOptions"
+          :id="`${listboxId}-option-${index}`"
+          :key="String(option.value)"
+          role="option"
+          class="mint-menu-item mint-multi-select__option"
+          :class="{ 'mint-menu-item--active': activeIndex === index }"
+          :aria-selected="selection.isSelected(option.value)"
+          :aria-disabled="isUnavailable(option) || undefined"
+          @mousedown.prevent
+          @mouseenter="!isUnavailable(option) && (activeIndex = index)"
+          @click="toggle(option)"
+        >
+          <span
+            :class="['mint-multi-select__check', { 'mint-multi-select__check--on': selection.isSelected(option.value) }]"
+            aria-hidden="true"
+          >
+            <Check v-if="selection.isSelected(option.value)" :size="10" :stroke-width="3.5" />
+          </span>
+          <span class="mint-menu-item__label">{{ option.label }}</span>
+        </li>
+        <li v-if="visibleOptions.length === 0" class="mint-searchable-select__empty">No matching options</li>
+      </ul>
+    </div>
+  </div>
+</template>

package/src/components/{SearchableSelect.vue → internal/SelectSearchableInternal.vue}

@@ -1,20 +1,23 @@
 <script setup lang="ts">
-/** Searchable single-select listbox with descriptions, disabled reasons, and custom slots. */
-import { computed, nextTick, ref, useId, watch } from 'vue'
-import type { SelectOption, SelectOptionInput } from '../types'
-import { useEventListener } from '../composables/useEventListener'
-import { normalizeOptionInput } from '../utils/options'
+/** BaseSelect with `searchable`: a single-select listbox with a search field, descriptions, disabled reasons, and custom slots. */
+import { computed, nextTick, ref, useAttrs, useId, watch } from 'vue'
+import { ChevronsUpDown } from 'lucide-vue-next'
+import type { SelectOption, SelectOptionInput } from '../../types'
+import { useEventListener } from '../../composables/useEventListener'
+import { normalizeOptionInput } from '../../utils/options'
 
 interface Props {
-  modelValue?: string | number
+  modelValue?: string | number | null
   options: SelectOptionInput<string | number>[]
   placeholder?: string
   searchPlaceholder?: string
   noResultsText?: string
   size?: 'sm' | 'md' | 'lg'
   disabled?: boolean
+  invalid?: boolean
   /** Id of the visible label; the trigger is then named by the label and the selected value. */
   ariaLabelledby?: string
+  ariaDescribedby?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -23,6 +26,16 @@ const props = withDefaults(defineProps<Props>(), {
   noResultsText: 'No matching options',
   size: 'md',
   disabled: false,
+  invalid: false,
+})
+
+defineOptions({ inheritAttrs: false })
+
+// The wrapper takes class and style; every other attribute (aria-label, data-*) names the focused trigger.
+const attrs = useAttrs()
+const triggerAttrs = computed(() => {
+  const { class: _class, style: _style, ...rest } = attrs
+  return rest
 })
 
 const emit = defineEmits<{
@@ -141,16 +154,20 @@ useEventListener(() => document, 'pointerdown', event => {
 <template>
   <div
     ref="root"
-    :class="['mint-searchable-select', `mint-searchable-select--${size}`]"
+    :class="['mint-searchable-select', `mint-searchable-select--${size}`, $attrs.class]"
+    :style="$attrs.style"
     @focusout="!root?.contains($event.relatedTarget as Node | null) && closePanel()"
   >
     <button
+      v-bind="triggerAttrs"
       :id="triggerId"
       ref="trigger"
       type="button"
+      :aria-describedby="ariaDescribedby || undefined"
       :aria-labelledby="ariaLabelledby ? `${ariaLabelledby} ${triggerId}` : undefined"
-      class="mint-searchable-select__trigger"
+      :class="['mint-searchable-select__trigger', { 'mint-searchable-select__trigger--error': invalid }]"
       :disabled="disabled"
+      :aria-invalid="invalid || undefined"
       :aria-expanded="open"
       :aria-controls="listboxId"
       aria-haspopup="listbox"
@@ -160,9 +177,7 @@ useEventListener(() => document, 'pointerdown', event => {
       <span :class="['mint-searchable-select__value', { 'mint-searchable-select__value--placeholder': !selectedOption }]">
         {{ selectedOption?.label ?? placeholder }}
       </span>
-      <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" aria-hidden="true">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="m6 8 4 4 4-4" />
-      </svg>
+      <ChevronsUpDown :size="14" aria-hidden="true" />
     </button>
 
     <div v-if="open" class="mint-popover mint-searchable-select__panel">

package/src/components/internal/WellEditPopupInternal.vue

@@ -10,7 +10,6 @@ import { DEFAULT_SAMPLE_TYPE_COLORS } from '../WellPlate.colors'
 import BaseButton from '../BaseButton.vue'
 import BaseInput from '../BaseInput.vue'
 import FormField from '../FormField.vue'
-import IconButton from '../IconButton.vue'
 import NumberInput from '../NumberInput.vue'
 import SegmentedControl from '../SegmentedControl.vue'
 
@@ -232,9 +231,7 @@ onBeforeUnmount(() => {
         <span class="mint-well-edit-popup__marker" :style="marker.style" aria-hidden="true">{{ marker.glyph }}</span>
         <span class="mint-well-edit-popup__well-id">{{ wellId }}</span>
         <span class="mint-well-edit-popup__title">{{ groupLabel ?? 'Edit well' }}</span>
-        <IconButton class="mint-well-edit-popup__close" variant="ghost" size="sm" label="Close" @click="commit(); emit('close')">
-          <X :size="16" aria-hidden="true" />
-        </IconButton>
+        <BaseButton class="mint-well-edit-popup__close" variant="ghost" size="sm" :icon="X" label="Close" @click="commit(); emit('close')" />
       </div>
 
       <div class="mint-well-edit-popup__body">
@@ -274,17 +271,15 @@ onBeforeUnmount(() => {
         </FormField>
 
         <FormField v-if="hasField('injectionVolume')" label="Volume" :layout="fieldLayout" data-field="injectionVolume">
-          <BaseInput
+          <NumberInput
             v-model="formData.injectionVolume"
-            type="number"
             size="sm"
             :min="0.1"
             :max="100"
             :step="0.5"
+            unit="µL"
             aria-label="Volume"
-          >
-            <template #suffix>µL</template>
-          </BaseInput>
+          />
         </FormField>
 
         <template v-if="hasAdvanced">

package/src/components/internal/WorkspaceShellInternal.vue

@@ -6,8 +6,6 @@
  * Not part of the public SDK surface — see PluginWorkspaceView.vue for the public component.
  */
 import type {
-  AccountMenuItem,
-  PageSelectorItem,
   PillNavItem,
   PillNavOption,
 } from '../../types'
@@ -20,14 +18,9 @@ defineProps<{
 }>()
 
 const emit = defineEmits<{
-  'page-selector-select': [page: PageSelectorItem]
   'pill-select': [item: PillNavItem]
   'pill-option-select': [option: PillNavOption, item: PillNavItem]
-  'account-menu-select': [item: AccountMenuItem]
-  'sign-out': []
-  'notifications-click': []
   'settings-values-change': [data: Record<string, unknown>]
-  'admin-click': []
 }>()
 
 function handlePillOptionSelect(option: PillNavOption, item: PillNavItem) {
@@ -40,13 +33,9 @@ defineSlots<{
   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>
@@ -64,36 +53,14 @@ defineSlots<{
     <template #topbar>
       <slot name="topbar" v-bind="shell.controls">
         <AppTopBar
+          v-if="shell.topBar"
           :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"
-          :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)"
+          :spec="shell.topBar"
+          :pill="shell.pill"
           @pill-select="emit('pill-select', $event)"
           @pill-option-select="handlePillOptionSelect"
-          @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"

package/src/components/internal/WorkspaceSidebarInternal.vue

@@ -13,7 +13,7 @@ defineProps<{
 }>()
 
 defineEmits<{
-  'update:modelValue': [values: Record<string, unknown>]
+  'update:values': [values: Record<string, unknown>]
   'update:collapsed': [value: boolean]
   'update:toggle': [sectionId: string, value: boolean]
   'section-action': [sectionId: string, actionId: string]
@@ -31,35 +31,14 @@ defineSlots<{
 
 <template>
   <AppSidebar
-    :title="sidebar.title"
-    :subtitle="sidebar.subtitle"
-    :badge="sidebar.badge"
-    :panels="sidebar.panels"
+    :spec="sidebar.spec"
     :active-view="sidebar.activeView"
-    :floating="sidebar.floating"
-    :density="sidebar.dense ? 'compact' : 'comfortable'"
-    :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"
+    :collapsed="sidebar.collapsed"
     :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:values="$emit('update:values', $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)"

package/src/{composables → components/internal}/autoGroup/classKey.ts

@@ -1,4 +1,4 @@
-import type { SampleClass } from '../../types/auto-group'
+import type { SampleClass } from '../../../types/auto-group'
 
 export function classKey(
   c: Pick<SampleClass, 'kind'> & { subKind?: string; tokenLength?: number },

package/src/{composables → components/internal}/autoGroup/classify.ts

@@ -1,4 +1,4 @@
-import type { SampleClass, SampleClassKind, ClassDisposition } from '../../types/auto-group'
+import type { SampleClass, SampleClassKind, ClassDisposition } from '../../../types/auto-group'
 import { classKey } from './classKey'
 import vocabData from './vocab.json'
 

package/src/{composables → components/internal}/autoGroup/columns.ts

@@ -4,7 +4,7 @@ import type {
   ClassSchema,
   NumericParse,
   SampleClassKind,
-} from '../../types/auto-group'
+} from '../../../types/auto-group'
 import vocabData from './vocab.json'
 
 const NUMERIC_VALUE_UNIT = /^(\d+(?:(?:dot|\.)\d+)?)([A-Za-z%/μ]+)$/

package/src/{composables → components/internal}/autoGroup/compose.ts

@@ -5,9 +5,9 @@ import type {
   MetadataRow,
   NumericBinning,
   SampleClass,
-} from '../../types/auto-group'
-import type { SampleGroup } from '../../types/components'
-import type { TreeNode } from '../../types/componentLabTypes'
+} from '../../../types/auto-group'
+import type { SampleGroup } from '../../../types/components'
+import type { TreeNode } from '../../../types/componentLabTypes'
 import { DEFAULT_COLORS, QC_OVERLAY_COLOR } from './colors'
 import { classKey } from './classKey'
 

package/src/{composables → components/internal}/autoGroup/cooccurrence.ts

@@ -1,4 +1,4 @@
-import type { ClassSchema, MergeSuggestion } from '../../types/auto-group'
+import type { ClassSchema, MergeSuggestion } from '../../../types/auto-group'
 
 const THRESHOLD = 0.95
 const MIN_CLASS_SIZE = 4

package/src/{composables → components/internal}/autoGroup/csv-shim.ts

@@ -1,4 +1,4 @@
-import type { ParsedCsvData } from '../../types/auto-group'
+import type { ParsedCsvData } from '../../../types/auto-group'
 
 function parseCSVLine(line: string, delimiter: string = ','): string[] {
   const result: string[] = []

package/src/{composables → components/internal}/autoGroup/fingerprint.ts

@@ -1,4 +1,4 @@
-import type { ClassSchema, SchemaFingerprint } from '../../types/auto-group'
+import type { ClassSchema, SchemaFingerprint } from '../../../types/auto-group'
 
 export function serializeFingerprint(schemas: ClassSchema[]): SchemaFingerprint {
   return {

package/src/{composables → components/internal}/autoGroup/index.ts

@@ -1,5 +1,4 @@
-// Internal engine for `useAutoGroup` / `AutoGroupModal`. Deprecated: scheduled
-// for removal in MINT 1.4 together with `useAutoGroup`; no SDK replacement.
+// Private engine for `useAutoGroup` / `AutoGroupModalInternal`, used only by `SampleSelector`.
 
 export { splitMulti, pickPrimaryDelimiter, tokenizeBatch } from './tokenize'
 export type { Delimiter, ExperimentHeader, TokenizedBatch } from './tokenize'

package/src/{composables → components/internal}/autoGroup/template.ts

@@ -1,4 +1,4 @@
-import type { ClassSchema, ColumnInfo, SampleClass } from '../../types/auto-group'
+import type { ClassSchema, ColumnInfo, SampleClass } from '../../../types/auto-group'
 import { classKey } from './classKey'
 
 export interface TemplateOptions {

package/src/{composables → components/internal}/autoGroup/tokenLength.ts

@@ -1,4 +1,4 @@
-import type { SampleClass } from '../../types/auto-group'
+import type { SampleClass } from '../../../types/auto-group'
 import { isExperimentalKind } from './classify'
 
 /**

package/src/components/internal/generatedJobsApi.ts

@@ -1,6 +1,6 @@
 import type { InjectionKey } from 'vue'
 
-import type { GeneratedAnalysisTransport } from '../../composables/useGeneratedAnalysis'
+import type { GeneratedAnalysisTransport } from '../../composables/useJobsEndpoint'
 
 /** The plugin jobs API a generated workspace talks to, for fields that need it. */
 export interface GeneratedJobsApi {