@morscherlab/mint-sdk 1.2.10 → 1.3.0-beta.10

package/src/components/SmartGroupFieldRecipe.vue

@@ -14,6 +14,7 @@
  * bindings declared inside `<script setup>`.
  */
 import type { SmartGroupField, SmartGroupSampleRecord } from './SmartGroupFieldRecipe.groups'
+import { SAMPLE_GROUP_TOKENS } from '../utils/color'
 
 const FR_BASE = [
   { Condition: 'Control', Dose: 'Vehicle' },
@@ -28,18 +29,20 @@ const DEFAULT_FIELDS: SmartGroupField[] = [
   { key: 'Dose', role: 'Factor', vals: 'Vehicle, Low, High', rep: false },
   { key: 'Replicate', role: 'Replicate', vals: 'Rep1, Rep2, Rep3', rep: true },
 ]
-const DEFAULT_PALETTE = ['var(--grp-1)', 'var(--grp-2)', 'var(--grp-3)', 'var(--grp-4)', 'var(--grp-5)']
+const DEFAULT_PALETTE = [...SAMPLE_GROUP_TOKENS]
 </script>
 
 <script setup lang="ts">
-import { computed, h, ref, type FunctionalComponent } from 'vue'
+import { computed, h, ref, useTemplateRef, type FunctionalComponent } from 'vue'
 import {
   appendQcGroup,
   computeFieldGroups,
   fieldRecipeSummary,
+  QC_POOL_NAME,
   sampleTotalFor,
   type QcRoute,
 } from './SmartGroupFieldRecipe.groups'
+import { sampleTypeMarker } from '../utils/sampleTypeMarker'
 import { useDropdownState } from '../composables/useDropdownState'
 import BaseButton from './BaseButton.vue'
 import LoadingSpinner from './LoadingSpinner.vue'
@@ -52,7 +55,7 @@ const props = withDefaults(defineProps<SmartGroupFieldRecipeProps>(), {
   headerCount: 12,
   initialRoute: 'Overlay only',
   palette: () => DEFAULT_PALETTE,
-  qcColor: 'var(--grp-qc)',
+  qcColor: 'var(--mint-sample-9)',
   canDownloadTemplate: true,
   loading: false,
 })
@@ -105,6 +108,8 @@ const ICON = {
 }
 
 const MAX_BAR = 44
+/** QC reads the same everywhere: neutral solid ring, never a group color (3a). */
+const QC_DOT_STYLE = sampleTypeMarker('qc', '').style
 
 // CSV upload (presentational): the component only surfaces the control and
 // emits the chosen/dropped File; AutoGroupModal parses it into the engine.
@@ -146,11 +151,12 @@ function onDrop(event: DragEvent) {
 // items are actions (upload / download), not a persistent value selection.
 const {
   isOpen: csvMenuOpen,
-  rootRef: csvMenuRoot,
-  triggerRef: csvMenuTrigger,
   close: closeCsvMenu,
   toggle: toggleCsvMenu,
-} = useDropdownState()
+} = useDropdownState({
+  rootRef: useTemplateRef<HTMLElement>('csvMenuRoot'),
+  triggerRef: useTemplateRef<HTMLElement>('csvMenuTrigger'),
+})
 
 function chooseUpload() {
   closeCsvMenu()
@@ -454,7 +460,7 @@ function onApply() {
         <div class="sg-grouplist">
           <div v-if="groups.length === 0" class="fr-empty">No groups yet — pick a field to start.</div>
           <div v-for="group in groups" v-else :key="group.name" class="sg-group">
-            <span class="sg-dot" :style="{ background: group.color }" />
+            <span class="sg-dot" :style="group.name === QC_POOL_NAME ? QC_DOT_STYLE : { background: group.color }" />
             <span class="sg-group__name">{{ group.name }}</span>
             <span
               class="sg-group__bar"
@@ -482,7 +488,7 @@ function onApply() {
             class="sg-qc__chip"
             :class="{ 'fr-qc__chip--off': currentRoute === 'Exclude' }"
           >
-            <span class="sg-dot" :style="{ background: qcColor }" />{{ qcChip.name }} ×{{ qcChip.count }}
+            <span class="sg-dot" :style="QC_DOT_STYLE" />{{ qcChip.name }} ×{{ qcChip.count }}
           </span>
         </div>
       </div>

package/src/components/SmartGroupManual.vue

@@ -32,16 +32,19 @@ const DEFAULT_NAMES = [
   'blank_run3',
 ]
 const DEFAULT_SEED: Record<string, SmartGroupSeed> = {
-  Pt001_TumorA_d7_rep1: { group: 'Responder', sub: 'Day 7', sub2: 'Batch 1', color: 'var(--grp-2)' },
-  Pt001_TumorA_d14_rep1: { group: 'Responder', sub: 'Day 14', color: 'var(--grp-2)' },
-  Pt002_TumorB_d7_rep1: { group: 'Non-responder', sub: 'Day 7', sub2: 'Batch 2', color: 'var(--grp-4)' },
+  Pt001_TumorA_d7_rep1: { group: 'Responder', sub: 'Day 7', sub2: 'Batch 1', color: 'var(--mint-sample-2)' },
+  Pt001_TumorA_d14_rep1: { group: 'Responder', sub: 'Day 14', color: 'var(--mint-sample-2)' },
+  Pt002_TumorB_d7_rep1: { group: 'Non-responder', sub: 'Day 7', sub2: 'Batch 2', color: 'var(--mint-sample-3)' },
 }
 const DEFAULT_PALETTE: ManualPaletteEntry[] = [
-  { c: 'var(--grp-1)', k: 'indigo' },
-  { c: 'var(--grp-2)', k: 'teal' },
-  { c: 'var(--grp-3)', k: 'amber' },
-  { c: 'var(--grp-4)', k: 'rose' },
-  { c: 'var(--grp-5)', k: 'violet' },
+  { c: 'var(--mint-sample-1)', k: 'blue' },
+  { c: 'var(--mint-sample-2)', k: 'green' },
+  { c: 'var(--mint-sample-3)', k: 'red' },
+  { c: 'var(--mint-sample-4)', k: 'amber' },
+  { c: 'var(--mint-sample-5)', k: 'violet' },
+  { c: 'var(--mint-sample-6)', k: 'orange' },
+  { c: 'var(--mint-sample-7)', k: 'cyan' },
+  { c: 'var(--mint-sample-8)', k: 'teal' },
 ]
 </script>
 
@@ -121,7 +124,7 @@ const sel = ref<Set<number>>(new Set())
 const grp = ref('')
 const sub = ref('')
 const sub2 = ref('')
-const color = ref(props.palette[0]?.c ?? 'var(--grp-1)')
+const color = ref(props.palette[0]?.c ?? 'var(--mint-sample-1)')
 
 const assignedCount = computed(() => samples.value.filter(sample => sample.group).length)
 const unassignedCount = computed(() => samples.value.length - assignedCount.value)
@@ -179,7 +182,7 @@ function onGroupInput(value: string) {
   // New cohort name → pick the first palette swatch not already in use, so
   // editing a matched name into a new one doesn't bleed the previous colour.
   const used = new Set(existingGroups.value.values())
-  color.value = props.palette.find(p => !used.has(p.c))?.c ?? props.palette[0]?.c ?? 'var(--grp-1)'
+  color.value = props.palette.find(p => !used.has(p.c))?.c ?? props.palette[0]?.c ?? 'var(--mint-sample-1)'
 }
 function assign() {
   if (sel.value.size === 0 || !grp.value.trim()) return
@@ -314,7 +317,7 @@ function onDone() {
           :class="{ 'mg2-unassigned--on': filter === 'unassigned' }"
           @click="filter = filter === 'unassigned' ? 'all' : 'unassigned'"
         >
-          <span class="sg-dot" :style="{ background: 'var(--grp-qc)', opacity: 0.5 }" />
+          <span class="sg-dot" :style="{ background: 'var(--mint-sample-9)' }" />
           <b>{{ unassignedCount }}</b> still unassigned
           <span class="mg2-unassigned__act">{{ filter === 'unassigned' ? 'showing' : 'show' }}</span>
         </button>

package/src/components/StepWizard.vue

@@ -2,6 +2,7 @@
 /** Multi-step wizard with a progress stepper, per-step validity tracking, and Back/Next navigation. */
 import { ref, computed } from 'vue'
 import type { WizardStep, WizardStepState } from '../types'
+import BaseButton from './BaseButton.vue'
 
 export interface Props {
   steps: WizardStep[]
@@ -179,40 +180,36 @@ defineExpose({ setStepValid })
         :is-last="props.modelValue === props.steps.length - 1"
         :can-proceed="stepValidity[props.modelValue] !== false"
       >
-        <button
-          type="button"
-          class="mint-wizard__nav-btn mint-wizard__nav-btn--cancel"
-          @click="cancel"
-        >
+        <span class="mint-wizard__counter">{{ props.modelValue + 1 }} / {{ props.steps.length }}</span>
+        <BaseButton class="mint-wizard__cancel" variant="ghost" :size="props.size" @click="cancel">
           Cancel
-        </button>
-        <div style="flex: 1" />
-        <button
-          type="button"
-          class="mint-wizard__nav-btn mint-wizard__nav-btn--back"
+        </BaseButton>
+        <BaseButton
+          variant="secondary"
+          :size="props.size"
           :disabled="props.modelValue === 0"
           @click="goBack"
         >
           Back
-        </button>
-        <button
+        </BaseButton>
+        <BaseButton
           v-if="props.modelValue < props.steps.length - 1"
-          type="button"
-          class="mint-wizard__nav-btn mint-wizard__nav-btn--next"
+          variant="primary"
+          :size="props.size"
           :disabled="stepValidity[props.modelValue] === false"
           @click="goNext"
         >
           Next
-        </button>
-        <button
+        </BaseButton>
+        <BaseButton
           v-else
-          type="button"
-          class="mint-wizard__nav-btn mint-wizard__nav-btn--finish"
+          variant="primary"
+          :size="props.size"
           :disabled="stepValidity[props.modelValue] === false"
           @click="finish"
         >
           Finish
-        </button>
+        </BaseButton>
       </slot>
     </div>
   </div>

package/src/components/TagsInput.story.vue

@@ -5,6 +5,17 @@ import TagsInput from './TagsInput.vue'
 const sizes = ['sm', 'md', 'lg'] as const
 const sampleTags = ref(['HeLa', 'MCF-7', 'A549'])
 const emptyTags = ref<string[]>([])
+
+function autocompleteState() {
+  return { tags: [] as string[] }
+}
+
+function categorizedState() {
+  return {
+    tags: ['role:control', 'status:passed', 'type:metabolomics', 'qc:outlier'],
+    activeCategory: 'type',
+  }
+}
 </script>
 
 <template>
@@ -21,7 +32,7 @@ const emptyTags = ref<string[]>([])
             :max-tags="state.useMaxTags ? state.maxTags : undefined"
             :allow-duplicates="state.allowDuplicates"
           />
-          <p style="margin-top: 1rem; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">
+          <p style="margin-top: 1rem; font-size: 0.875rem; color: var(--text-muted);">
             Tags: <code>{{ JSON.stringify(state.tags) }}</code>
           </p>
         </div>
@@ -45,7 +56,7 @@ const emptyTags = ref<string[]>([])
     <Variant title="Sizes">
       <div style="padding: 2rem; max-width: 500px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem;">
         <div v-for="size in sizes" :key="size">
-          <p style="margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.05em;">
+          <p style="margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--text-muted); font-family: var(--font-mono);">
             {{ size }}
           </p>
           <TagsInput v-model="sampleTags" :size="size" />
@@ -73,7 +84,7 @@ const emptyTags = ref<string[]>([])
 
     <Variant title="Max Tags Limit">
       <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
-        <p style="margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--text-primary, #e2e8f0);">Maximum 3 tags allowed</p>
+        <p style="margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--text-primary);">Maximum 3 tags allowed</p>
         <TagsInput
           :model-value="['Tag 1', 'Tag 2']"
           :max-tags="3"
@@ -101,7 +112,7 @@ const emptyTags = ref<string[]>([])
       </div>
     </Variant>
 
-    <Variant title="Autocomplete — with suggestions">
+    <Variant title="Autocomplete — with suggestions" :init-state="autocompleteState">
       <template #default="{ state }">
         <div style="padding: 2rem; max-width: 420px; display: flex; flex-direction: column; gap: 0.5rem;">
           <TagsInput
@@ -122,12 +133,9 @@ const emptyTags = ref<string[]>([])
           </p>
         </div>
       </template>
-      <template #initState>
-        {{ { tags: [] } }}
-      </template>
     </Variant>
 
-    <Variant title="Categorized — namespaced tags">
+    <Variant title="Categorized — namespaced tags" :init-state="categorizedState">
       <template #default="{ state }">
         <div style="padding: 2rem; max-width: 520px; display: flex; flex-direction: column; gap: 0.5rem;">
           <TagsInput
@@ -147,9 +155,6 @@ const emptyTags = ref<string[]>([])
           </p>
         </div>
       </template>
-      <template #initState>
-        {{ { tags: ['role:control', 'status:passed', 'type:metabolomics', 'qc:outlier'], activeCategory: 'type' } }}
-      </template>
     </Variant>
   </Story>
 </template>

package/src/components/TagsInput.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 /** Lets users type and add tags with autocomplete suggestions, categories, and a max-tag cap. */
-import { ref, computed } from 'vue'
+import { ref, computed, useTemplateRef } from 'vue'
 import { useSelectionLimit } from '../composables/useSelectionLimit'
 import { useDropdownState } from '../composables/useDropdownState'
 
@@ -49,11 +49,11 @@ const highlightedIndex = ref(-1)
 // composable's `triggerRef` rather than a component-local refocus helper.
 const {
   isOpen: dropdownOpen,
-  rootRef,
   triggerRef: inputRef,
   open: openDropdown,
   close: closeDropdown,
 } = useDropdownState({
+  rootRef: useTemplateRef<HTMLElement>('root'),
   onClose: () => {
     highlightedIndex.value = -1
   },
@@ -84,6 +84,16 @@ function categoryFor(tag: string): TagCategory | undefined {
   return props.categories.find(c => c.prefix === prefix)
 }
 
+// 3f: a category is shown by a group-color dot (3a palette), never a semantic tint.
+const GROUP_COLORS = [
+  'var(--mint-sample-1)', 'var(--mint-sample-2)', 'var(--mint-sample-3)', 'var(--mint-sample-4)',
+  'var(--mint-sample-5)', 'var(--mint-sample-6)', 'var(--mint-sample-7)', 'var(--mint-sample-8)',
+]
+
+function groupColor(category: TagCategory): string {
+  return GROUP_COLORS[props.categories.indexOf(category) % GROUP_COLORS.length]
+}
+
 function addTag(value: string) {
   const trimmed = value.trim()
   if (!trimmed) return
@@ -187,7 +197,7 @@ function onInputEvent() {
 
 <template>
   <div
-    ref="rootRef"
+    ref="root"
     :class="[
       'mint-tags-input',
       `mint-tags-input--${size}`,
@@ -210,6 +220,7 @@ function onInputEvent() {
         :disabled="disabled"
         @click="setCategory(cat.prefix)"
       >
+        <span class="mint-tags-input__tag-dot" :style="{ background: groupColor(cat) }" aria-hidden="true" />
         {{ cat.name }}
       </button>
     </div>
@@ -224,6 +235,12 @@ function onInputEvent() {
           categoryFor(tag) ? `mint-tags-input__tag--${categoryFor(tag)?.color ?? 'neutral'}` : '',
         ]"
       >
+        <span
+          v-if="categoryFor(tag)"
+          class="mint-tags-input__tag-dot"
+          :style="{ background: groupColor(categoryFor(tag)!) }"
+          aria-hidden="true"
+        />
         {{ tag }}
         <button
           v-if="!disabled"

package/src/components/TimePicker.story.vue

@@ -1,5 +1,21 @@
 <script setup lang="ts">
 import TimePicker from './TimePicker.vue'
+import type { TimeSlotDisabledFn } from '../types'
+
+const bookings: Record<string, string> = {
+  '10:00': 'Booked · HPLC-02',
+  '10:30': 'Booked · HPLC-02',
+  '12:00': 'Maintenance window',
+}
+const bookedSlots: TimeSlotDisabledFn = (time) => bookings[time]
+const bookedSlotsNoReason: TimeSlotDisabledFn = (time) => time in bookings
+
+function initUnavailableState() {
+  return {
+    modelValue: '09:00' as string | undefined,
+    showReasons: true,
+  }
+}
 
 function initState() {
   return {
@@ -66,11 +82,12 @@ function initState() {
     </Variant>
 
     <Variant title="With Min/Max">
-      <div style="padding: 2rem; max-width: 300px;">
+      <div style="padding: 2rem; max-width: 300px; min-height: 22rem;">
         <TimePicker
-          model-value="10:00"
+          model-value="09:30"
           min="08:00"
-          max="18:00"
+          max="10:00"
+          :step="30"
         />
       </div>
     </Variant>
@@ -92,5 +109,23 @@ function initState() {
         <TimePicker model-value="09:00" disabled />
       </div>
     </Variant>
+
+    <Variant title="Unavailable Slots" :init-state="initUnavailableState">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 300px; min-height: 22rem;">
+          <TimePicker
+            v-model="state.modelValue"
+            min="08:00"
+            max="17:00"
+            :step="30"
+            :disabled-slots="state.showReasons ? bookedSlots : bookedSlotsNoReason"
+          />
+        </div>
+      </template>
+      <template #controls="{ state }">
+        <HstText v-model="state.modelValue" title="Value (HH:mm)" />
+        <HstCheckbox v-model="state.showReasons" title="Show reasons" />
+      </template>
+    </Variant>
   </Story>
 </template>

package/src/components/TimePicker.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-/** Input that opens a scrollable time-slot dropdown in 12h or 24h format, with min/max range. */
-import { ref, computed, watch, nextTick, useId } from 'vue'
+/** Input that opens a scrollable time-slot dropdown in 12h or 24h format, with min/max range and optional unavailable slots. */
+import { ref, computed, watch, nextTick, useId, useTemplateRef } from 'vue'
+import type { TimeSlotDisabledFn } from '../types'
 import { useDropdownState } from '../composables/useDropdownState'
 import {
   compareTime,
@@ -20,6 +21,8 @@ interface Props {
   step?: number
   format?: '12h' | '24h'
   clearable?: boolean
+  /** Marks slots unavailable; a returned string is shown inline as the reason. */
+  disabledSlots?: TimeSlotDisabledFn
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -39,7 +42,10 @@ const emit = defineEmits<{
 const listRef = ref<HTMLUListElement | null>(null)
 const highlightedIndex = ref(-1)
 const listboxId = `mint-time-picker-listbox-${useId().replace(/:/g, '')}`
-const { isOpen, rootRef, triggerRef, open, close, toggle } = useDropdownState()
+const { isOpen, open, close, toggle } = useDropdownState({
+  rootRef: useTemplateRef<HTMLElement>('root'),
+  triggerRef: useTemplateRef<HTMLElement>('trigger'),
+})
 
 /** Id of the highlighted slot, published to the input as `aria-activedescendant`. */
 const activeSlotId = computed(() =>
@@ -62,7 +68,12 @@ const displayValue = computed(() => {
 function isSlotDisabled(slot: string): boolean {
   if (props.min && compareTime(slot, props.min) < 0) return true
   if (props.max && compareTime(slot, props.max) > 0) return true
-  return false
+  return !!props.disabledSlots?.(slot)
+}
+
+function slotReason(slot: string): string | undefined {
+  const result = props.disabledSlots?.(slot)
+  return typeof result === 'string' && result ? result : undefined
 }
 
 function selectSlot(slot: string) {
@@ -197,10 +208,10 @@ watch(isOpen, (open) => {
 </script>
 
 <template>
-  <div ref="rootRef" class="mint-time-picker" @keydown="handleKeydown">
+  <div ref="root" class="mint-time-picker" @keydown="handleKeydown">
     <div class="mint-time-picker__input-wrapper">
       <input
-        ref="triggerRef"
+        ref="trigger"
         type="text"
         readonly
         :value="displayValue"
@@ -247,7 +258,7 @@ watch(isOpen, (open) => {
     >
       <div
         v-if="isOpen"
-        class="mint-time-picker__dropdown"
+        class="mint-popover mint-time-picker__dropdown"
       >
         <ul
           :id="listboxId"
@@ -264,14 +275,18 @@ watch(isOpen, (open) => {
             :aria-selected="slot === modelValue"
             :aria-disabled="isSlotDisabled(slot)"
             :class="[
-              'mint-time-picker__slot',
-              slot === modelValue ? 'mint-time-picker__slot--active' : '',
+              'mint-menu-item mint-time-picker__slot',
+              slot === modelValue ? 'mint-menu-item--selected mint-time-picker__slot--active' : '',
               isSlotDisabled(slot) ? 'mint-time-picker__slot--disabled' : '',
-              index === highlightedIndex && !isSlotDisabled(slot) ? 'mint-time-picker__slot--highlighted' : '',
+              index === highlightedIndex && !isSlotDisabled(slot) ? 'mint-menu-item--active mint-time-picker__slot--highlighted' : '',
             ]"
             @click="selectSlot(slot)"
           >
-            {{ formatTimeSlot(slot, format) }}
+            <span class="mint-time-picker__slot-time">{{ formatTimeSlot(slot, format) }}</span>
+            <span v-if="slotReason(slot)" class="mint-time-picker__slot-reason">{{ slotReason(slot) }}</span>
+            <svg class="mint-menu-item__check" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <path d="M3.5 8.5l3 3 6-7" />
+            </svg>
           </li>
         </ul>
       </div>

package/src/components/TimeRangeInput.story.vue

@@ -1,6 +1,25 @@
 <script setup lang="ts">
 import TimeRangeInput from './TimeRangeInput.vue'
-import type { TimeRange } from '../types/components'
+import type { TimeRange, TimeSlotDisabledFn } from '../types/components'
+
+const bookings: Record<string, string> = {
+  '10:00': 'Booked · HPLC-02',
+  '10:30': 'Booked · HPLC-02',
+  '12:00': 'Maintenance window',
+}
+const bookedSlots: TimeSlotDisabledFn = (time) => bookings[time]
+
+function initValidityState() {
+  return {
+    modelValue: { start: '09:00', end: '10:30' } as TimeRange | undefined,
+    valid: true,
+  }
+}
+
+// Histoire drops a second state write made in the same tick as the v-model write; defer it.
+function showValidity(state: { valid: boolean }, valid: boolean) {
+  setTimeout(() => { state.valid = valid })
+}
 
 function initState() {
   return {
@@ -100,5 +119,35 @@ function initState() {
         />
       </div>
     </Variant>
+
+    <Variant title="Unavailable Slots + Validity" :init-state="initValidityState">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 500px; min-height: 22rem; display: flex; flex-direction: column; gap: 1rem;">
+          <TimeRangeInput
+            v-model="state.modelValue"
+            min="08:00"
+            max="17:00"
+            :step="30"
+            :disabled-slots="bookedSlots"
+            @validity-change="(valid: boolean) => showValidity(state, valid)"
+          />
+          <div style="font-size: 0.8125rem;">Submit {{ state.valid ? 'enabled' : 'blocked' }}</div>
+        </div>
+      </template>
+      <template #controls="{ state }">
+        <template v-if="state.modelValue">
+          <HstText v-model="state.modelValue.start" title="Start (HH:mm)" />
+          <HstText v-model="state.modelValue.end" title="End (HH:mm)" />
+        </template>
+      </template>
+    </Variant>
+
+    <Variant title="End Before Start">
+      <div style="padding: 2rem; max-width: 500px;">
+        <TimeRangeInput
+          :model-value="{ start: '10:30', end: '09:00' }"
+        />
+      </div>
+    </Variant>
   </Story>
 </template>

package/src/components/TimeRangeInput.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-/** Paired start/end time pickers that validate range order and display computed duration. */
-import { computed } from 'vue'
-import type { TimeRange } from '../types/components'
+/** Paired start/end time pickers that validate range order (end must follow start) and display computed duration. */
+import { computed, watch } from 'vue'
+import type { TimeRange, TimeSlotDisabledFn } from '../types/components'
 import TimePicker from './TimePicker.vue'
-import { durationMinutes, formatDuration, compareTime } from '../composables/useTimeUtils'
+import { durationMinutes, compareTime } from '../composables/useTimeUtils'
 
 interface Props {
   modelValue?: TimeRange
@@ -16,6 +16,8 @@ interface Props {
   format?: '12h' | '24h'
   showDuration?: boolean
   blockedRanges?: TimeRange[]
+  /** Marks slots unavailable in both pickers; a returned string is shown inline as the reason. */
+  disabledSlots?: TimeSlotDisabledFn
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -30,6 +32,8 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<{
   'update:modelValue': [value: TimeRange | undefined]
+  /** Emitted on mount and whenever the order check flips; `false` while end ≤ start. */
+  'validity-change': [valid: boolean]
 }>()
 
 const startValue = computed(() => props.modelValue?.start)
@@ -40,16 +44,25 @@ const duration = computed(() => {
   return durationMinutes(props.modelValue.start, props.modelValue.end)
 })
 
-const durationLabel = computed(() => {
-  if (duration.value === null) return ''
-  return formatDuration(duration.value)
-})
-
 const isInvalid = computed(() => {
   if (!props.modelValue?.start || !props.modelValue?.end) return false
   return compareTime(props.modelValue.start, props.modelValue.end) >= 0
 })
 
+// Always shown; an incomplete or inverted range reads "—", never a negative span.
+const durationLabel = computed(() => {
+  if (duration.value === null || isInvalid.value) return '—'
+  const hours = Math.floor(duration.value / 60)
+  const minutes = duration.value % 60
+  return [hours && `${hours} h`, minutes && `${minutes} min`].filter(Boolean).join(' ')
+})
+
+const isValid = computed(() => !isInvalid.value)
+
+watch(isValid, (valid) => emit('validity-change', valid), { immediate: true })
+
+defineExpose({ isValid })
+
 const endMin = computed(() => {
   if (props.modelValue?.start) return props.modelValue.start
   return props.min
@@ -86,19 +99,13 @@ function onEndChange(value: string | undefined) {
         :max="max"
         :step="step"
         :format="format"
+        :disabled-slots="disabledSlots"
         placeholder="Start"
         @update:model-value="onStartChange"
       />
     </div>
 
-    <div class="mint-time-range__separator">
-      <span
-        v-if="showDuration && duration !== null"
-        :class="['mint-time-range__duration', isInvalid ? 'mint-time-range__duration--error' : '']"
-      >
-        {{ durationLabel }}
-      </span>
-    </div>
+    <span class="mint-time-range__separator" aria-hidden="true">–</span>
 
     <div class="mint-time-range__end">
       <TimePicker
@@ -110,9 +117,21 @@ function onEndChange(value: string | undefined) {
         :max="max"
         :step="step"
         :format="format"
+        :disabled-slots="disabledSlots"
         placeholder="End"
         @update:model-value="onEndChange"
       />
     </div>
+
+    <span
+      v-if="showDuration"
+      :class="['mint-time-range__duration', isInvalid ? 'mint-time-range__duration--error' : '']"
+    >
+      {{ durationLabel }}
+    </span>
+
+    <p v-if="isInvalid" class="mint-time-range__error" role="alert">
+      End time must be after start time
+    </p>
   </div>
 </template>