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

package/src/components/internal/SelectMultipleInternal.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
-/** BaseSelect with `multiple`: a checkbox chip list with an optional selection cap (`max`). */
-import { computed } from 'vue'
+/** 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'
 
@@ -15,6 +17,8 @@ interface Props {
   invalid?: boolean
   max?: number
   size?: 'sm' | 'md' | 'lg'
+  ariaLabelledby?: string
+  ariaDescribedby?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -23,103 +27,216 @@ const props = withDefaults(defineProps<Props>(), {
   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 optionSelection = useListSelection({
+const selection = useListSelection({
   selected: () => props.modelValue,
   items: normalizedOptions,
   getValue: option => option.value,
   disabled: () => props.disabled,
   max: () => props.max,
 })
-const canSelectMore = optionSelection.canAddMore
 
-function isSelected(value: OptionPrimitive): boolean {
-  return optionSelection.isSelected(value)
+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)
 }
 
-function toggleOption(option: MultiOption) {
-  if (props.disabled || option.disabled) return
+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()
+}
 
-  if (isSelected(option.value) || canSelectMore.value) {
-    emit('update:modelValue', optionSelection.toggleValue(option.value))
+async function closePanel(restoreFocus = false): Promise<void> {
+  open.value = false
+  query.value = ''
+  activeIndex.value = -1
+  if (restoreFocus) {
+    await nextTick()
+    field.value?.focus()
   }
 }
 
-function handleKeydown(event: KeyboardEvent, option: MultiOption) {
-  if (event.key === 'Enter' || event.key === ' ') {
-    event.preventDefault()
-    toggleOption(option)
-  }
+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()
 }
 
-const selectedLabels = computed(() => {
-  return props.modelValue
-    .map(v => normalizedOptions.value.find(o => o.value === v)?.label)
-    .filter(Boolean)
+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
-    :class="[
-      'mint-multi-select',
-      `mint-multi-select--${size}`,
-      disabled ? 'mint-multi-select--disabled' : '',
-      invalid ? 'mint-multi-select--error' : '',
-    ]"
+    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-if="modelValue.length === 0"
-      class="mint-multi-select__placeholder"
+      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"
     >
-      {{ placeholder }}
+      <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 class="mint-multi-select__options" role="group" :aria-invalid="invalid || undefined">
-      <button
-        v-for="option in normalizedOptions"
-        :key="String(option.value)"
-        type="button"
-        role="checkbox"
-        :aria-checked="isSelected(option.value)"
-        :disabled="disabled || option.disabled || (!isSelected(option.value) && !canSelectMore)"
-        :class="[
-          'mint-multi-select__chip',
-          `mint-multi-select__chip--${size}`,
-          isSelected(option.value) ? 'mint-multi-select__chip--active' : '',
-          option.disabled ? 'mint-multi-select__chip--disabled' : '',
-          !isSelected(option.value) && !canSelectMore ? 'mint-multi-select__chip--disabled' : '',
-        ]"
-        @click="toggleOption(option)"
-        @keydown="handleKeydown($event, option)"
-      >
-        <svg
-          class="mint-multi-select__chip-check"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2.5"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          aria-hidden="true"
-        >
-          <path d="M20 6 9 17l-5-5" />
+    <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>
-        <span class="mint-multi-select__chip-label">{{ option.label }}</span>
-      </button>
-    </div>
+        <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>
 
-    <div
-      v-if="modelValue.length > 0"
-      class="mint-multi-select__summary"
-    >
-      {{ selectedLabels.join(', ') }}
+      <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/internal/SelectSearchableInternal.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 /** 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'
@@ -176,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/WorkspaceShellInternal.vue

@@ -12,15 +12,22 @@ import type {
 import AppLayout from '../AppLayout.vue'
 import AppTopBar from '../AppTopBar.vue'
 import type { PluginWorkspaceShellModel } from '../../composables/pluginWorkspaceModel'
+import type { TopBarJob } from '../../types/jobs'
 
 defineProps<{
   shell: PluginWorkspaceShellModel
+  /** Passed to AppTopBar; undefined means no jobs control. */
+  job?: TopBarJob | null
+  jobsDone?: number
+  jobsOpen?: boolean
+  jobsPanelId?: string
 }>()
 
 const emit = defineEmits<{
   'pill-select': [item: PillNavItem]
   'pill-option-select': [option: PillNavOption, item: PillNavItem]
   'settings-values-change': [data: Record<string, unknown>]
+  'job-click': []
 }>()
 
 function handlePillOptionSelect(option: PillNavOption, item: PillNavItem) {
@@ -58,6 +65,11 @@ defineSlots<{
           :subtitle="shell.subtitle"
           :spec="shell.topBar"
           :pill="shell.pill"
+          :job="job"
+          :jobs-done="jobsDone"
+          :jobs-open="jobsOpen"
+          :jobs-panel-id="jobsPanelId"
+          @job-click="emit('job-click')"
           @pill-select="emit('pill-select', $event)"
           @pill-option-select="handlePillOptionSelect"
           @settings-values-change="emit('settings-values-change', $event)"

package/src/composables/createClient.ts

@@ -86,6 +86,8 @@ export interface PluginContract {
   schemaVersion: 2
   plugin: {
     name?: string
+    displayName?: string
+    subtitle?: string
     packageName?: string
     version?: string
     description?: string

package/src/composables/index.ts

@@ -6,6 +6,7 @@ export { useToast } from './useToast'
 export { usePlatform } from './usePlatform'
 export { useExperiment, type ExperimentLoadStatus, type UseExperimentReturn } from './useExperiment'
 export { resolvePluginFrontendBase } from './pluginFrontendBase'
+export { providePluginIdentity, type PluginIdentityContract } from './pluginIdentity'
 export {
   useRequest,
   type RequestKind,

package/src/composables/pluginIdentity.ts

@@ -0,0 +1,31 @@
+import { reactive, readonly } from 'vue'
+import type { PluginContract } from './createClient'
+
+/** The `plugin` block of the generated contract (`./generated/mint-plugin`) that `providePluginIdentity` reads. */
+export interface PluginIdentityContract {
+  plugin: Pick<PluginContract['plugin'], 'name' | 'displayName' | 'subtitle' | 'description' | 'icon'>
+}
+
+const identity = reactive<{ name?: string; subtitle?: string; icon?: string }>({})
+
+/** The seeded identity AppTopBar shows in standalone mode. Internal: not exported from the package. */
+export const pluginIdentity = readonly(identity)
+
+/**
+ * Seed the standalone AppTopBar with the plugin name, subtitle and icon. In integrated
+ * mode the platform supplies them. Explicit `title`/`subtitle` props and the `#icon` slot still win.
+ *
+ * @example
+ * ```typescript
+ * import { providePluginIdentity } from '@morscherlab/mint-sdk'
+ * import { contract } from './generated/mint-plugin'
+ *
+ * providePluginIdentity(contract)
+ * ```
+ */
+export function providePluginIdentity(contract: PluginIdentityContract): void {
+  const { plugin } = contract
+  identity.name = plugin.displayName || plugin.name || undefined
+  identity.subtitle = plugin.subtitle || plugin.description || undefined
+  identity.icon = plugin.icon || undefined
+}

package/src/composables/pluginWorkspaceModel.ts

@@ -50,8 +50,8 @@ export interface PluginWorkspaceShellModel {
   sidebarCloseLabel: string
   /** Whether AppLayout should render a `#sidebar` template at all. */
   hasSidebarSurface: boolean
-  /** App or plugin title shown in the top bar. */
-  title: string
+  /** Top bar title. Unset, the top bar shows the plugin identity (`providePluginIdentity` or the platform). */
+  title?: string
   /** Secondary copy shown under the title. */
   subtitle?: string
   /** AppTopBar spec with the workspace defaults applied and the generated pills filled in; `false` removes the top bar. */

package/src/composables/useAppExperiment.ts

@@ -23,12 +23,19 @@ export interface UseAppExperimentOptions {
   onDetach?: () => void
   saveDisabled?: Ref<boolean> | ComputedRef<boolean>
   saveDisabledMessage?: string | Ref<string | undefined> | ComputedRef<string | undefined>
+  /** Unsaved changes; marks the Save button with a dot. */
+  dirty?: Ref<boolean> | ComputedRef<boolean>
 }
 
 export interface AppExperimentPopoverBinding {
   experimentName?: string
   experimentCode?: string
   experimentStatus?: ExperimentStatus
+  experimentId?: number | null
+  experimentProject?: string
+  experimentOwner?: string
+  /** ISO timestamp of the experiment's last update. */
+  experimentUpdatedAt?: string
   /** An experiment is bound but its record has not arrived yet. */
   isResolving: boolean
   /** Resolution failed; the binding is kept so the user can retry or detach. */
@@ -39,6 +46,7 @@ export interface AppExperimentPopoverBinding {
   saveDisabledMessage?: string
   saveLoading: boolean
   saveSuccessMessage?: string
+  dirty?: boolean
 }
 
 export interface AppExperimentSelectorModalBinding {
@@ -125,10 +133,19 @@ export function useAppExperiment(options: UseAppExperimentOptions = {}): UseAppE
   const showDetach = computed(() => experimentId.value !== null)
   const saveDisabled = computed(() => toValue(options.saveDisabled) ?? false)
   const saveDisabledMessage = computed(() => toValue(options.saveDisabledMessage))
+  const dirty = computed(() => toValue(options.dirty) ?? false)
+  const experimentOwner = computed(() => {
+    const owner = store.current?.created_by_user
+    return owner ? [owner.first_name, owner.last_name].filter(Boolean).join(' ') || owner.username : undefined
+  })
   const popover = computed<AppExperimentPopoverBinding>(() => ({
     experimentName: experimentName.value,
     experimentCode: experimentCode.value,
     experimentStatus: experimentStatus.value,
+    experimentId: experimentId.value,
+    experimentProject: store.current?.project_name || store.current?.project || undefined,
+    experimentOwner: experimentOwner.value,
+    experimentUpdatedAt: store.current?.updated_at,
     isResolving: isResolving.value,
     error: error.value ?? undefined,
     showSave: showSave.value,
@@ -137,6 +154,7 @@ export function useAppExperiment(options: UseAppExperimentOptions = {}): UseAppE
     saveDisabledMessage: saveDisabledMessage.value,
     saveLoading: saveLoading.value,
     saveSuccessMessage: saveSuccessMessage.value,
+    dirty: dirty.value,
   }))
   const selectorModal = computed<AppExperimentSelectorModalBinding>(() => ({
     open: showModal.value,
@@ -166,6 +184,8 @@ export function useAppExperiment(options: UseAppExperimentOptions = {}): UseAppE
     saveLoading.value = true
     try {
       const message = await options.onSave()
+      // The save changed the record on the platform; read it back so "Updated" is current.
+      await store.refresh()
       if (message) {
         saveSuccessMessage.value = message
         if (successTimer) clearTimeout(successTimer)

package/src/composables/useCalendarGrid.ts

@@ -26,9 +26,9 @@ export interface UseCalendarGridReturn {
   nextMonth: () => void
 }
 
-const WEEK_DAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'] as const
+const WEEK_DAYS = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'] as const
 
-/** Shared calendar grid state for date and datetime pickers. */
+/** Shared Monday-first calendar grid state for date and datetime pickers. */
 export function useCalendarGrid(options: UseCalendarGridOptions = {}): UseCalendarGridReturn {
   const currentMonth = ref(new Date())
 
@@ -46,7 +46,8 @@ export function useCalendarGrid(options: UseCalendarGridOptions = {}): UseCalend
     const lastDay = new Date(year, month + 1, 0)
     const days: CalendarGridDay[] = []
 
-    const startPadding = firstDay.getDay()
+    // Weeks start on Monday.
+    const startPadding = (firstDay.getDay() + 6) % 7
     for (let i = startPadding - 1; i >= 0; i--) {
       const date = new Date(year, month, -i)
       days.push({ date, isCurrentMonth: false, isDisabled: isDateDisabled(date) })