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

package/src/components/internal/FormSchemaInternal.vue

@@ -0,0 +1,253 @@
+<script setup lang="ts">
+/**
+ * FormSchema renderer behind FormBuilder and the sidebar forms: flat sections
+ * or a multi-step wizard, with the action bar when `schema.actions` is set.
+ *
+ * Slots:
+ * - `field:<name>` — override a single field's input component
+ * - `section:<id>` — replace an entire section body
+ * - `section:<id>:after` — inject content after a section
+ * - `actions` — replace the default action bar
+ */
+import { ref, computed, watch } from 'vue'
+import type { FormSchema, FormEnhancements, UseFormBuilderReturn } from '../../types/form-builder'
+import type { WizardStep } from '../../types'
+import { useFormBuilder } from '../../composables/useFormBuilder'
+import {
+  formSchemaFieldNames,
+  pickExistingRecordKeys,
+  recordValuesEqualForKeys,
+} from '../../utils/formModelSync'
+import StepWizard from '../StepWizard.vue'
+import FormSectionRenderer from './FormSectionRenderer.vue'
+import FormActionsInternal from './FormActionsInternal.vue'
+
+interface Props {
+  schema: FormSchema
+  /** Values under `modelValue`: control defaults and initial values. */
+  defaults?: Record<string, unknown>
+  modelValue?: Record<string, unknown>
+  enhancements?: FormEnhancements<Record<string, unknown>>
+  loading?: boolean
+  disabled?: boolean
+  size?: 'sm' | 'md' | 'lg'
+  readonly?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  defaults: () => ({}),
+  loading: false,
+  disabled: false,
+  readonly: false,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [data: Record<string, unknown>]
+  submit: [data: Record<string, unknown>]
+  cancel: []
+}>()
+
+const resolvedSchema = computed<FormSchema>(() => props.schema)
+
+const resolvedModelValue = computed<Record<string, unknown>>(() => ({
+  ...props.defaults,
+  ...(props.modelValue ?? {}),
+}))
+
+const builder = useFormBuilder(
+  resolvedSchema.value,
+  resolvedModelValue.value,
+  props.enhancements,
+)
+
+// Sync schema/control changes into the internal builder so generated forms stay coherent.
+watch(
+  resolvedSchema,
+  (schema) => {
+    const fieldNames = formSchemaFieldNames(schema)
+    const schemaValues = pickExistingRecordKeys(resolvedModelValue.value, fieldNames)
+    const existingValues = pickExistingRecordKeys(
+      builder.form.data as Record<string, unknown>,
+      fieldNames,
+    )
+    const nextValues = props.modelValue === undefined
+      ? { ...schemaValues, ...existingValues }
+      : schemaValues
+
+    builder.updateSchema(schema, nextValues)
+  },
+  { deep: true },
+)
+
+// Sync external modelValue changes into the internal form without resetting on no-op echo updates.
+watch(
+  () => props.modelValue,
+  () => {
+    const data = resolvedModelValue.value
+    const fieldNames = builderFieldNames()
+    if (recordValuesEqualForKeys(data, builder.form.data as Record<string, unknown>, fieldNames)) return
+    builder.reset(pickExistingRecordKeys(data, fieldNames))
+  },
+  { deep: true },
+)
+
+// Sync modelValue changes back to parent
+watch(
+  () => ({ ...builder.form.data }),
+  (data) => emit('update:modelValue', data as Record<string, unknown>),
+  { deep: true },
+)
+
+// Wizard support
+const isWizard = computed(() => !!resolvedSchema.value.steps)
+const wizardRef = ref<InstanceType<typeof StepWizard> | null>(null)
+
+const wizardSteps = computed<WizardStep[]>(() => {
+  if (!resolvedSchema.value.steps) return []
+  return resolvedSchema.value.steps.map((step) => ({
+    id: step.id,
+    label: step.label,
+    description: step.description,
+    icon: step.icon,
+    optional: step.optional,
+  }))
+})
+
+// Sync step validation state with StepWizard
+watch(
+  () => builder.isCurrentStepValid.value,
+  (valid) => {
+    wizardRef.value?.setStepValid(builder.currentStep.value, valid)
+  },
+)
+
+function handleNext() {
+  const success = builder.goNext()
+  if (success) {
+    wizardRef.value?.setStepValid(builder.currentStep.value - 1, true)
+  }
+}
+
+async function handleSubmit() {
+  await builder.submit()
+  const formData = builder.form.data as Record<string, unknown>
+  const visibleData = Object.fromEntries(
+    builder.fields
+      .filter((f) => builder.isFieldVisible(f.name))
+      .map((f) => [f.name, formData[f.name]]),
+  )
+  emit('submit', visibleData)
+}
+
+function handleCancel() {
+  emit('cancel')
+}
+
+function builderFieldNames(): string[] {
+  return builder.fields.map(field => field.name)
+}
+
+defineExpose({
+  form: builder.form,
+  validate: builder.validate,
+  reset: builder.reset,
+  updateSchema: builder.updateSchema,
+  goNext: builder.goNext,
+  goBack: builder.goBack,
+  goToStep: builder.goToStep,
+  builder,
+})
+</script>
+
+<template>
+  <div :class="['mint-form-builder', size ? `mint-form-builder--${size}` : '']">
+    <!-- Wizard mode -->
+    <template v-if="isWizard && resolvedSchema.steps">
+      <StepWizard
+        ref="wizardRef"
+        :steps="wizardSteps"
+        :model-value="builder.currentStep.value"
+        @update:model-value="builder.goToStep($event)"
+      >
+        <template v-for="step in resolvedSchema.steps" :key="step.id" #[`step-${step.id}`]>
+          <div class="mint-form-builder__step">
+            <template v-for="section in step.sections" :key="section.id">
+              <FormSectionRenderer
+                v-if="builder.isSectionVisible(section.id)"
+                :section="section"
+                :builder="(builder as UseFormBuilderReturn<Record<string, unknown>>)"
+              >
+                <!-- Forward field slots -->
+                <template v-for="field in section.fields" :key="field.name" #[`field:${field.name}`]="slotProps">
+                  <slot :name="`field:${field.name}`" v-bind="slotProps" />
+                </template>
+                <!-- Forward section slots -->
+                <template #[`section:${section.id}`]="slotProps">
+                  <slot :name="`section:${section.id}`" v-bind="slotProps" />
+                </template>
+                <template #[`section:${section.id}:after`]="slotProps">
+                  <slot :name="`section:${section.id}:after`" v-bind="slotProps" />
+                </template>
+              </FormSectionRenderer>
+            </template>
+          </div>
+        </template>
+
+        <template v-if="resolvedSchema.actions" #navigation="{ isFirst, isLast }">
+          <slot name="actions" :form="builder.form" :builder="builder">
+            <FormActionsInternal
+              is-wizard
+              :is-first="isFirst"
+              :is-last="isLast"
+              :can-proceed="builder.isCurrentStepValid.value"
+              :loading="loading || builder.form.isSubmitting.value"
+              :disabled="disabled"
+              :submit-label="resolvedSchema.submitLabel ?? 'Submit'"
+              :cancel-label="resolvedSchema.cancelLabel ?? 'Cancel'"
+              :show-cancel="resolvedSchema.showCancel ?? false"
+              @next="handleNext"
+              @back="builder.goBack"
+              @submit="handleSubmit"
+              @cancel="handleCancel"
+            />
+          </slot>
+        </template>
+      </StepWizard>
+    </template>
+
+    <!-- Flat mode -->
+    <template v-else-if="resolvedSchema.sections">
+      <template v-for="section in resolvedSchema.sections" :key="section.id">
+        <FormSectionRenderer
+          v-if="builder.isSectionVisible(section.id)"
+          :section="section"
+          :builder="(builder as UseFormBuilderReturn<Record<string, unknown>>)"
+        >
+          <!-- Forward field slots -->
+          <template v-for="field in section.fields" :key="field.name" #[`field:${field.name}`]="slotProps">
+            <slot :name="`field:${field.name}`" v-bind="slotProps" />
+          </template>
+          <!-- Forward section slots -->
+          <template #[`section:${section.id}`]="slotProps">
+            <slot :name="`section:${section.id}`" v-bind="slotProps" />
+          </template>
+          <template #[`section:${section.id}:after`]="slotProps">
+            <slot :name="`section:${section.id}:after`" v-bind="slotProps" />
+          </template>
+        </FormSectionRenderer>
+      </template>
+
+      <slot v-if="resolvedSchema.actions" name="actions" :form="builder.form" :builder="builder">
+        <FormActionsInternal
+          :loading="loading || builder.form.isSubmitting.value"
+          :disabled="disabled"
+          :submit-label="resolvedSchema.submitLabel ?? 'Submit'"
+          :cancel-label="resolvedSchema.cancelLabel ?? 'Cancel'"
+          :show-cancel="resolvedSchema.showCancel ?? false"
+          @submit="handleSubmit"
+          @cancel="handleCancel"
+        />
+      </slot>
+    </template>
+  </div>
+</template>

package/src/components/{UnitInput.vue → internal/NumberUnitInputInternal.vue}

@@ -1,16 +1,17 @@
 <script setup lang="ts">
 /**
- * Numeric input with a unit segment. Several units open a menu that previews the value in each
- * unit; units with a `factor` also get a hint in the neighbour unit nearest to 1–1000.
+ * NumberInput with `units`: a numeric input with a unit segment. Several units open a menu that
+ * previews the value in each unit; units with a `factor` also get a hint in the neighbour unit
+ * nearest to 1–1000.
  */
 import { computePosition, flip, offset, shift } from '@floating-ui/dom'
 import { computed, nextTick, ref, useTemplateRef, watch } from 'vue'
-import { useDropdownState } from '../composables/useDropdownState'
-import { useMenuKeyboard } from '../composables/useMenuKeyboard'
-import type { UnitOption } from '../types'
+import { useDropdownState } from '../../composables/useDropdownState'
+import { useMenuKeyboard } from '../../composables/useMenuKeyboard'
+import type { UnitOption } from '../../types'
 
 interface Props {
-  modelValue?: number
+  modelValue?: number | null
   unit?: string
   units: UnitOption[]
   precision?: number
@@ -19,7 +20,7 @@ interface Props {
   step?: number
   placeholder?: string
   disabled?: boolean
-  error?: boolean
+  invalid?: boolean
   size?: 'sm' | 'md' | 'lg'
   convertOnUnitChange?: boolean
 }
@@ -29,15 +30,14 @@ const props = withDefaults(defineProps<Props>(), {
   step: undefined,
   placeholder: 'Enter value',
   disabled: false,
-  error: false,
+  invalid: false,
   size: 'md',
   convertOnUnitChange: false,
 })
 
 const emit = defineEmits<{
-  'update:modelValue': [value: number | undefined]
+  'update:modelValue': [value: number | null]
   'update:unit': [unit: string]
-  'change': [data: { value: number | undefined; unit: string }]
 }>()
 
 const currentUnit = computed(() => props.unit || (props.units.length > 0 ? props.units[0].value : ''))
@@ -82,7 +82,7 @@ function formatNumber(value: number): string {
 /** The current value in `target`; null without factors or across unit groups (M vs mg/mL). */
 function convertTo(target: UnitOption): number | null {
   const current = currentOption.value
-  if (props.modelValue === undefined || current?.factor === undefined || !target.factor) return null
+  if (props.modelValue == null || current?.factor === undefined || !target.factor) return null
   if (target.group !== current.group) return null
   return props.modelValue * current.factor / target.factor
 }
@@ -114,37 +114,36 @@ const conversionHint = computed(() => {
   return best && `${formatNumber(best.value)} ${best.unit.label}`
 })
 
+// Typing emits the raw value so a prefix below `min` (the "1" of "120") stays editable;
+// the change event (blur or Enter) clamps it.
 function handleValueInput(event: Event) {
   const target = event.target as HTMLInputElement
-  const value = target.value === '' ? undefined : Number(target.value)
-
-  if (value === undefined || isNaN(value)) {
-    emit('update:modelValue', undefined)
-    emit('change', { value: undefined, unit: currentUnit.value })
-    return
-  }
+  const value = target.value === '' ? NaN : Number(target.value)
+  emit('update:modelValue', isNaN(value) ? null : value)
+}
 
-  const clamped = clamp(value)
-  emit('update:modelValue', clamped)
-  emit('change', { value: clamped, unit: currentUnit.value })
+function handleValueChange(event: Event) {
+  const target = event.target as HTMLInputElement
+  if (target.value === '') return
+  const value = clamp(Number(target.value))
+  target.value = String(value)
+  emit('update:modelValue', value)
 }
 
 function selectUnit(newUnitValue: string) {
   close(true)
   if (newUnitValue === currentUnit.value) return
 
-  let newValue = props.modelValue
-  if (props.convertOnUnitChange && newValue !== undefined) {
+  const value = props.modelValue
+  if (props.convertOnUnitChange && value != null) {
     const oldUnit = currentOption.value
     const newUnit = findUnit(newUnitValue)
     if (oldUnit?.factor !== undefined && newUnit?.factor !== undefined && newUnit.factor !== 0) {
-      newValue = clamp(roundToPrecision(newValue * (oldUnit.factor / newUnit.factor)))
-      emit('update:modelValue', newValue)
+      emit('update:modelValue', clamp(roundToPrecision(value * (oldUnit.factor / newUnit.factor))))
     }
   }
 
   emit('update:unit', newUnitValue)
-  emit('change', { value: newValue, unit: newUnitValue })
 }
 
 // ---- Unit menu (disclosure + WAI-ARIA keyboard, shared with ActionMenu) ----
@@ -200,7 +199,7 @@ const { handleTriggerKeydown, handlePanelKeydown } = useMenuKeyboard({
   <div
     :class="[
       'mint-unit-input',
-      error ? 'mint-unit-input--error' : '',
+      invalid ? 'mint-unit-input--error' : '',
       disabled ? 'mint-unit-input--disabled' : '',
     ]"
   >
@@ -214,7 +213,7 @@ const { handleTriggerKeydown, handlePanelKeydown } = useMenuKeyboard({
           :step="step"
           :disabled="disabled"
           :placeholder="placeholder"
-          :aria-invalid="error || undefined"
+          :aria-invalid="invalid || undefined"
           :class="[
             'mint-unit-input__value',
             `mint-unit-input__value--${size}`,
@@ -222,6 +221,7 @@ const { handleTriggerKeydown, handlePanelKeydown } = useMenuKeyboard({
           ]"
           aria-label="Value"
           @input="handleValueInput"
+          @change="handleValueChange"
         />
 
         <button

package/src/components/internal/PlateEditorBindingInternal.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 /** PlateEditor holding its own copy of the plates (useRackEditor), for ComponentBindingRenderer bindings. */
 import { watch } from 'vue'
-import type { Rack } from '../../types'
+import type { PlateEditorSpec, Rack } from '../../types'
 import { useRackEditor } from '../../composables/useRackEditor'
 import PlateEditor from '../PlateEditor.vue'
 
@@ -9,27 +9,28 @@ defineOptions({ inheritAttrs: false })
 
 const props = defineProps<{
   modelValue: Rack[]
-  activeRackId?: string
+  activeRack?: string
+  spec?: PlateEditorSpec
 }>()
 
 const editor = useRackEditor(props.modelValue)
 const { racks, activeRackId, plateEditorListeners, canUndo, canRedo } = editor
 // A new binding (template reloaded) replaces the local copy and its history, then reselects: the
-// activeRackId watch may have run first, before its rack existed.
+// activeRack watch may have run first, before its rack existed.
 watch(() => props.modelValue, (next) => {
   racks.value = next.map(rack => ({ ...rack, wells: { ...rack.wells } }))
   editor.clearHistory()
-  if (props.activeRackId) editor.setActiveRack(props.activeRackId)
+  if (props.activeRack) editor.setActiveRack(props.activeRack)
 })
-watch(() => props.activeRackId, (id) => { if (id) editor.setActiveRack(id) }, { immediate: true })
+watch(() => props.activeRack, (id) => { if (id) editor.setActiveRack(id) }, { immediate: true })
 </script>
 
 <template>
   <PlateEditor
-    history
     v-bind="$attrs"
+    :spec="{ history: true, ...spec }"
     :model-value="racks"
-    :active-rack-id="activeRackId"
+    :active-rack="activeRackId"
     :can-undo="canUndo"
     :can-redo="canRedo"
     v-on="plateEditorListeners"

package/src/components/internal/ResourcePickerListInternal.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts" generic="T">
 /**
- * Searchable, optionally grouped single-select list shared by the experiment and
+ * Searchable single-select list shared by the experiment and
  * artifact selector modals: two-line rows (title, then code + meta) with status and date
  * in a right-hand column, a filled selected row, skeleton,
  * error and empty states, and the combobox keyboard model (↑ ↓ Enter).
  */
-import { computed, nextTick, reactive, ref, useId, watch } from 'vue'
+import { computed, nextTick, ref, useId, watch } from 'vue'
 import BaseInput from '../BaseInput.vue'
 import Skeleton from '../Skeleton.vue'
 import EmptyState from '../EmptyState.vue'
-import type { PillVariant } from '../../types'
+import type { Tone } from '../../types'
 
 export interface ResourcePickerRow {
   /** Identifier shown as a gray pill at the start of the second line, e.g. an experiment code. */
@@ -17,8 +17,8 @@ export interface ResourcePickerRow {
   title: string
   /** Second-line facts after the code, joined with " · ". */
   meta?: string[]
-  /** Right column, above the date, tinted by its variant. */
-  status?: { label: string; variant: PillVariant }
+  /** Right column, above the date, tinted by its tone. */
+  status?: { label: string; tone: Tone }
   /** Right column, in mono. */
   date?: string
 }
@@ -26,8 +26,6 @@ export interface ResourcePickerRow {
 const props = withDefaults(
   defineProps<{
     items: T[]
-    /** When set, rows render under collapsible group headers in this order. */
-    groups?: { label: string; items: T[] }[] | null
     itemKey: (item: T) => string | number
     describe: (item: T) => ResourcePickerRow
     selectedKey?: string | number | null
@@ -39,9 +37,10 @@ const props = withDefaults(
     error?: string | null
     emptyTitle?: string
     emptyDescription?: string
+    /** Focus the search field when the list mounts (the modal's focus trap honours `autofocus`). */
+    autofocusSearch?: boolean
   }>(),
   {
-    groups: null,
     selectedKey: null,
     placeholder: 'Search…',
     loading: false,
@@ -57,50 +56,33 @@ const emit = defineEmits<{
 defineSlots<{
   /** Extra filters on the search row. */
   filters?: () => unknown
-  /** A second filter row under the search. */
-  advanced?: () => unknown
   /** Row controls before the check; keys pressed inside them never select the row. */
   actions?: (props: { item: T }) => unknown
 }>()
 
 const listId = `mint-resource-picker-${useId().replace(/:/g, '')}`
-const collapsed = reactive(new Set<string>())
 const activeIndex = ref(-1)
 const listRef = ref<HTMLElement | null>(null)
 
-const visibleGroups = computed(() =>
-  props.groups?.map((group) => ({
-    ...group,
-    rows: collapsed.has(group.label) ? [] : group.items,
-  })),
-)
-/** Keyboard order: the rows on screen, top to bottom. */
-const flat = computed(() =>
-  visibleGroups.value ? visibleGroups.value.flatMap((group) => group.rows) : props.items,
-)
-const indexByKey = computed(() => new Map(flat.value.map((item, i) => [props.itemKey(item), i])))
+const indexByKey = computed(() => new Map(props.items.map((item, i) => [props.itemKey(item), i])))
 const showList = computed(() => !props.loading && !props.error && props.items.length > 0)
 
 function optionId(item: T): string {
   return `${listId}-${props.itemKey(item)}`
 }
 const activeDescendant = computed(() => {
-  const item = flat.value[activeIndex.value]
+  const item = props.items[activeIndex.value]
   return item === undefined ? undefined : optionId(item)
 })
 
 function indexOf(item: T): number {
   return indexByKey.value.get(props.itemKey(item)) ?? -1
 }
-function toggleGroup(label: string) {
-  if (collapsed.has(label)) collapsed.delete(label)
-  else collapsed.add(label)
-}
 function keydown(event: KeyboardEvent) {
-  // Keys belong to the search combobox; a focused header, filter or row action keeps its own Enter.
+  // Keys belong to the search combobox; a focused filter or row action keeps its own Enter.
   const target = event.target as HTMLElement | null
   if (target !== event.currentTarget && !target?.closest('.mint-resource-picker__search')) return
-  const rows = flat.value
+  const rows = props.items
   if (!rows.length) return
   if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
     event.preventDefault()
@@ -120,7 +102,7 @@ function keydown(event: KeyboardEvent) {
 }
 
 watch(
-  () => [props.items, props.groups],
+  () => props.items,
   () => {
     activeIndex.value = -1
   },
@@ -136,6 +118,7 @@ watch(
         :placeholder="placeholder"
         size="sm"
         type="search"
+        :autofocus="autofocusSearch"
         role="combobox"
         :aria-label="`Search ${label.toLowerCase()}`"
         :aria-expanded="showList"
@@ -151,7 +134,6 @@ watch(
       </BaseInput>
       <slot name="filters" />
     </div>
-    <slot name="advanced" />
 
     <div v-if="loading" class="mint-resource-picker__frame" aria-busy="true">
       <div v-for="n in 4" :key="n" class="mint-resource-picker__skeleton-row">
@@ -174,64 +156,42 @@ watch(
       role="listbox"
       :aria-label="label"
     >
-      <template v-for="group in visibleGroups ?? [{ label: '', items, rows: items }]" :key="group.label">
-        <button
-          v-if="visibleGroups"
-          type="button"
-          class="mint-resource-picker__group"
-          :aria-expanded="!collapsed.has(group.label)"
-          @click="toggleGroup(group.label)"
-        >
-          <svg
-            class="mint-resource-picker__chevron"
-            viewBox="0 0 16 16"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="1.5"
-            aria-hidden="true"
+      <div
+        v-for="item in items"
+        :id="optionId(item)"
+        :key="itemKey(item)"
+        role="option"
+        :aria-selected="itemKey(item) === selectedKey"
+        class="mint-resource-picker__row"
+        :class="{
+          'mint-resource-picker__row--selected': itemKey(item) === selectedKey,
+          'mint-resource-picker__row--active': indexOf(item) === activeIndex,
+        }"
+        @click="emit('select', item)"
+        @mouseenter="activeIndex = indexOf(item)"
+      >
+        <span class="mint-resource-picker__text">
+          <span class="mint-resource-picker__title">{{ describe(item).title }}</span>
+          <span v-if="describe(item).code || describe(item).meta?.length" class="mint-resource-picker__meta"
+            ><span v-if="describe(item).code" class="mint-resource-picker__code mint-exp-code mint-exp-code--sm">{{
+              describe(item).code
+            }}</span
+            ><span v-if="describe(item).meta?.length">{{ describe(item).meta!.join(' · ') }}</span></span
           >
-            <path d="M4 6l4 4 4-4" />
-          </svg>
-          <span class="mint-resource-picker__group-label">{{ group.label }}</span>
-          <span class="mint-resource-picker__group-count">{{ group.items.length }}</span>
-        </button>
-        <div
-          v-for="item in group.rows"
-          :id="optionId(item)"
-          :key="itemKey(item)"
-          role="option"
-          :aria-selected="itemKey(item) === selectedKey"
-          class="mint-resource-picker__row"
-          :class="{
-            'mint-resource-picker__row--selected': itemKey(item) === selectedKey,
-            'mint-resource-picker__row--active': indexOf(item) === activeIndex,
-          }"
-          @click="emit('select', item)"
-          @mouseenter="activeIndex = indexOf(item)"
-        >
-          <span class="mint-resource-picker__text">
-            <span class="mint-resource-picker__title">{{ describe(item).title }}</span>
-            <span v-if="describe(item).code || describe(item).meta?.length" class="mint-resource-picker__meta"
-              ><span v-if="describe(item).code" class="mint-resource-picker__code mint-exp-code mint-exp-code--sm">{{
-                describe(item).code
-              }}</span
-              ><span v-if="describe(item).meta?.length">{{ describe(item).meta!.join(' · ') }}</span></span
-            >
-          </span>
-          <span v-if="describe(item).status || describe(item).date" class="mint-resource-picker__aside">
-            <span
-              v-if="describe(item).status"
-              class="mint-resource-picker__status"
-              :class="`mint-resource-picker__status--${describe(item).status!.variant}`"
-              >{{ describe(item).status!.label }}</span
-            >
-            <span v-if="describe(item).date" class="mint-resource-picker__date">{{ describe(item).date }}</span>
-          </span>
-          <span v-if="$slots.actions" class="mint-resource-picker__actions" @click.stop>
-            <slot name="actions" :item="item" />
-          </span>
-        </div>
-      </template>
+        </span>
+        <span v-if="describe(item).status || describe(item).date" class="mint-resource-picker__aside">
+          <span
+            v-if="describe(item).status"
+            class="mint-resource-picker__status"
+            :class="`mint-resource-picker__status--${describe(item).status!.tone}`"
+            >{{ describe(item).status!.label }}</span
+          >
+          <span v-if="describe(item).date" class="mint-resource-picker__date">{{ describe(item).date }}</span>
+        </span>
+        <span v-if="$slots.actions" class="mint-resource-picker__actions" @click.stop>
+          <slot name="actions" :item="item" />
+        </span>
+      </div>
     </div>
   </div>
 </template>