@morscherlab/mint-sdk 1.2.0-beta.8 → 1.2.0

package/src/components/ReagentList.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 /** Sortable, searchable table of experiment reagents showing lot number, expiry, storage conditions, and stock level with low-stock warnings. */
-import { ref, computed } from 'vue'
+import { ref, computed, type ComponentPublicInstance } from 'vue'
 import type { ReagentColumn, Reagent } from '../types'
+import { useListReorder } from '../composables/useListReorder'
 import { useSortedItems } from '../composables/useSortedItems'
 import { useTextSearch } from '../composables/useTextSearch'
 import {
@@ -14,6 +15,13 @@ import {
   isReagentExpired as isExpired,
   isReagentExpiringSoon as isExpiringSoon,
 } from './ReagentList.presentation'
+import DataStateInternal from './internal/DataStateInternal.vue'
+
+/** Beaker glyph kept from the pre-1.2 hand-rolled empty state. */
+const EMPTY_ICON_PATH
+  = 'M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0'
+  + ' 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26'
+  + ' 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z'
 
 interface Props {
   modelValue?: Reagent[]
@@ -23,6 +31,13 @@ interface Props {
   columns?: ReagentColumn[]
   sortable?: boolean
   searchable?: boolean
+  /** Replace the table with a loading placeholder. */
+  loading?: boolean
+  /**
+   * Error message. When set, the table is replaced by an error state.
+   * `null`/`undefined` renders normally.
+   */
+  error?: string | null
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -33,6 +48,8 @@ const props = withDefaults(defineProps<Props>(), {
   columns: () => ['name', 'lot', 'expiry', 'storage', 'stock'],
   sortable: true,
   searchable: true,
+  loading: false,
+  error: null,
 })
 
 const emit = defineEmits<{
@@ -47,8 +64,7 @@ const emit = defineEmits<{
 const searchQuery = ref('')
 const sortColumn = ref<ReagentColumn | null>(null)
 const sortDirection = ref<'asc' | 'desc'>('asc')
-const draggedId = ref<string | null>(null)
-const dragOverId = ref<string | null>(null)
+const dragHandleRefs = new Map<string, HTMLElement>()
 
 const reagentSearch = useTextSearch({
   items: () => props.modelValue || [],
@@ -78,14 +94,63 @@ const sortedReagents = useSortedItems<Reagent, ReagentColumn>({
 })
 const filteredReagents = sortedReagents.sortedItems
 
+// Drag-and-drop plus the Alt+Arrow keyboard alternative live in the shared
+// reorder composable, which also announces every move politely.
+const {
+  draggingId,
+  dragOverId,
+  announcement: reorderAnnouncement,
+  announcerStyle,
+  onDragStart,
+  onDragOver,
+  onDragLeave,
+  onDrop,
+  onDragEnd,
+  onKeydown: onReorderKeydown,
+} = useListReorder<Reagent>({
+  items: () => props.modelValue || [],
+  getId: (reagent) => reagent.id,
+  getLabel: (reagent) => reagent.name,
+  disabled: () => props.readonly || !props.sortable,
+  getElement: (id) => dragHandleRefs.get(id),
+  itemNoun: 'Reagent',
+  onReorder: ({ fromIndex, toIndex, items }) => {
+    emit('reorder', items[toIndex].id, fromIndex, toIndex)
+    emit('update:modelValue', items)
+  },
+})
+
+function setDragHandleRef(id: string, el: Element | ComponentPublicInstance | null) {
+  if (el instanceof HTMLElement) {
+    dragHandleRefs.set(id, el)
+  } else {
+    dragHandleRefs.delete(id)
+  }
+}
+
 function getRowClass(reagent: Reagent): string[] {
   return getReagentRowClasses(reagent, {
     lowStockThreshold: props.lowStockThreshold,
-    draggedId: draggedId.value,
+    draggedId: draggingId.value,
     dragOverId: dragOverId.value,
   })
 }
 
+/** `aria-sort` for a column header, omitted while sorting is off. */
+function columnAriaSort(column: ReagentColumn): 'ascending' | 'descending' | 'none' | undefined {
+  if (!props.sortable) return undefined
+  if (sortColumn.value !== column) return 'none'
+  return sortDirection.value === 'asc' ? 'ascending' : 'descending'
+}
+
+// Native buttons activate on Enter/Space; the default is prevented so a header
+// sorts exactly once per key press in every engine.
+function handleSortKeydown(event: KeyboardEvent, column: ReagentColumn) {
+  if (event.key !== 'Enter' && event.key !== ' ') return
+  event.preventDefault()
+  handleSort(column)
+}
+
 // Actions
 function handleSort(column: ReagentColumn) {
   if (!props.sortable) return
@@ -111,54 +176,7 @@ function handleAdd() {
   emit('add')
 }
 
-// Drag and drop
-function handleDragStart(event: DragEvent, reagent: Reagent) {
-  if (props.readonly || !props.sortable) return
-  draggedId.value = reagent.id
-  if (event.dataTransfer) {
-    event.dataTransfer.effectAllowed = 'move'
-    event.dataTransfer.setData('text/plain', reagent.id)
-  }
-}
-
-function handleDragOver(event: DragEvent, reagent: Reagent) {
-  if (props.readonly || !props.sortable || !draggedId.value) return
-  event.preventDefault()
-  dragOverId.value = reagent.id
-}
-
-function handleDragLeave() {
-  dragOverId.value = null
-}
-
-function handleDrop(event: DragEvent, targetReagent: Reagent) {
-  if (props.readonly || !props.sortable || !draggedId.value) return
-  event.preventDefault()
-
-  const reagents = [...(props.modelValue || [])]
-  const fromIndex = reagents.findIndex((r) => r.id === draggedId.value)
-  const toIndex = reagents.findIndex((r) => r.id === targetReagent.id)
-
-  if (fromIndex === -1 || toIndex === -1 || fromIndex === toIndex) {
-    draggedId.value = null
-    dragOverId.value = null
-    return
-  }
 
-  const [removed] = reagents.splice(fromIndex, 1)
-  reagents.splice(toIndex, 0, removed)
-
-  emit('reorder', draggedId.value, fromIndex, toIndex)
-  emit('update:modelValue', reagents)
-
-  draggedId.value = null
-  dragOverId.value = null
-}
-
-function handleDragEnd() {
-  draggedId.value = null
-  dragOverId.value = null
-}
 </script>
 
 <template>
@@ -193,7 +211,10 @@ function handleDragEnd() {
     </div>
 
     <!-- Table -->
-    <table v-if="filteredReagents.length > 0" class="mint-reagent-list__table">
+    <table
+      v-if="!loading && !error && filteredReagents.length > 0"
+      class="mint-reagent-list__table"
+    >
       <thead>
         <tr>
           <th v-if="sortable && !readonly" style="width: 24px" />
@@ -201,8 +222,15 @@ function handleDragEnd() {
             v-for="col in columns"
             :key="col"
             :class="[sortable ? 'mint-reagent-list__col--sortable' : '']"
-            @click="handleSort(col)"
+            :aria-sort="columnAriaSort(col)"
           >
+            <component
+              :is="sortable ? 'button' : 'span'"
+              :type="sortable ? 'button' : undefined"
+              class="mint-reagent-list__sort-btn"
+              @click="handleSort(col)"
+              @keydown="sortable ? handleSortKeydown($event, col) : undefined"
+            >
             {{ columnLabels[col] }}
             <svg
               v-if="sortable"
@@ -229,27 +257,36 @@ function handleDragEnd() {
                 d="M5 15l7-7 7 7"
               />
             </svg>
+            </component>
           </th>
           <th v-if="!readonly" style="width: 80px" />
         </tr>
       </thead>
       <tbody>
         <tr
-          v-for="reagent in filteredReagents"
+          v-for="(reagent, index) in filteredReagents"
           :key="reagent.id"
           :class="getRowClass(reagent)"
           :draggable="sortable && !readonly"
-          @dragstart="handleDragStart($event, reagent)"
-          @dragover="handleDragOver($event, reagent)"
-          @dragleave="handleDragLeave"
-          @drop="handleDrop($event, reagent)"
-          @dragend="handleDragEnd"
+          @dragstart="onDragStart($event, reagent, index)"
+          @dragover="onDragOver($event, reagent, index)"
+          @dragleave="onDragLeave"
+          @drop="onDrop($event, reagent, index)"
+          @dragend="onDragEnd"
         >
-          <!-- Drag handle -->
+          <!-- Drag handle: also the keyboard reorder target (Alt+Arrow keys). -->
           <td v-if="sortable && !readonly">
-            <svg class="mint-reagent-list__drag-handle" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8h16M4 16h16" />
-            </svg>
+            <button
+              :ref="(el) => setDragHandleRef(reagent.id, el)"
+              type="button"
+              class="mint-reagent-list__drag-handle-btn"
+              :aria-label="`Reorder ${reagent.name}. Press Alt with the arrow keys to move it.`"
+              @keydown="onReorderKeydown($event, reagent, index)"
+            >
+              <svg class="mint-reagent-list__drag-handle" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8h16M4 16h16" />
+              </svg>
+            </button>
           </td>
 
           <!-- Name -->
@@ -367,26 +404,34 @@ function handleDragEnd() {
       </tbody>
     </table>
 
+    <!-- Error state -->
+    <div v-else-if="error" class="mint-reagent-list__state">
+      <slot name="error" :error="error">
+        <DataStateInternal state="error" :title="error" />
+      </slot>
+    </div>
+
+    <!-- Loading state -->
+    <div v-else-if="loading" class="mint-reagent-list__state">
+      <slot name="loading">
+        <DataStateInternal state="loading" loading-label="Loading reagents" />
+      </slot>
+    </div>
+
     <!-- Empty state -->
-    <div v-else class="mint-reagent-list__empty">
-      <svg class="mint-reagent-list__empty-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
-      </svg>
-      <p class="mint-reagent-list__empty-text">
-        {{ searchQuery ? 'No reagents found' : 'No reagents added yet' }}
-      </p>
-      <button
-        v-if="!readonly && !searchQuery"
-        type="button"
-        class="mint-reagent-list__empty-btn"
-        @click="handleAdd"
-      >
-        Add Reagent
-      </button>
+    <div v-else class="mint-reagent-list__state">
+      <slot name="empty">
+        <DataStateInternal
+          state="empty"
+          :title="searchQuery ? 'No reagents found' : 'No reagents added yet'"
+          :icon-path="EMPTY_ICON_PATH"
+          :action-label="!readonly && !searchQuery ? 'Add Reagent' : undefined"
+          @action="handleAdd"
+        />
+      </slot>
     </div>
+
+    <!-- Reorder announcements for screen readers -->
+    <div role="status" aria-live="polite" :style="announcerStyle">{{ reorderAnnouncement }}</div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/reagent-list.css';
-</style>

package/src/components/ResourceCard.vue

@@ -155,7 +155,3 @@ function handleClick() {
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/resource-card.css';
-</style>

package/src/components/RuntimeUpdateNotice.story.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import RuntimeUpdateNotice from './RuntimeUpdateNotice.vue'
+
+function handleReload() {
+  console.log('reload requested')
+}
+
+function initState() {
+  return {
+    visible: true,
+  }
+}
+</script>
+
+<template>
+  <Story title="Feedback/RuntimeUpdateNotice">
+    <Variant title="Playground" :init-state="initState">
+      <template #default="{ state }">
+        <!-- The notice is `position: fixed`, so it anchors to the preview
+             viewport rather than this wrapper. -->
+        <div style="padding: 2rem; min-height: 14rem; background: var(--bg-primary);">
+          <p style="margin: 0; font-size: 0.8125rem; color: var(--text-secondary);">
+            Shown after the platform detects a new frontend build.
+          </p>
+          <RuntimeUpdateNotice :visible="state.visible" @reload="handleReload" />
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstCheckbox v-model="state.visible" title="Visible" />
+      </template>
+    </Variant>
+
+    <Variant title="Visible">
+      <div style="padding: 2rem; min-height: 14rem; background: var(--bg-primary);">
+        <RuntimeUpdateNotice :visible="true" @reload="handleReload" />
+      </div>
+    </Variant>
+
+    <Variant title="Hidden">
+      <div style="padding: 2rem; min-height: 8rem; background: var(--bg-primary);">
+        <p style="margin: 0; font-size: 0.8125rem; color: var(--text-secondary);">
+          Nothing renders while <code>visible</code> is false.
+        </p>
+        <RuntimeUpdateNotice :visible="false" @reload="handleReload" />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/RuntimeUpdateNotice.vue

@@ -30,9 +30,9 @@ const emit = defineEmits<{
   align-items: center;
   gap: 10px;
   padding: 10px 12px;
-  color: var(--mint-text-primary, #172033);
-  background: var(--mint-bg-primary, #fff);
-  border: 1px solid var(--mint-border-default, #d9e1ec);
+  color: var(--text-primary);
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
   border-radius: 10px;
   box-shadow: 0 10px 28px rgb(15 23 42 / 16%);
   font-size: 13px;
@@ -42,7 +42,7 @@ const emit = defineEmits<{
 .mint-runtime-update button {
   padding: 5px 9px;
   color: #fff;
-  background: var(--mint-color-primary, #0f9f8f);
+  background: var(--color-primary);
   border: 0;
   border-radius: 6px;
   font: inherit;

package/src/components/SampleHierarchyTree.story.vue

@@ -84,6 +84,8 @@ const mockNodes: TreeNode[] = [
 
 function initState() {
   return {
+    loading: false,
+    error: '',
     nodes: mockNodes,
     expandAll: false,
     showIcons: true,
@@ -99,6 +101,8 @@ function initState() {
       <template #default="{ state }">
         <div style="padding: 2rem; max-width: 500px;">
           <SampleHierarchyTree
+            :loading="state.loading"
+            :error="state.error || null"
             :nodes="state.nodes"
             :expand-all="state.expandAll"
             :show-icons="state.showIcons"
@@ -108,6 +112,8 @@ function initState() {
         </div>
       </template>
       <template #controls="{ state }">
+        <HstCheckbox v-model="state.loading" title="Loading" />
+        <HstText v-model="state.error" title="Error Message" />
         <HstCheckbox v-model="state.expandAll" title="Expand All" />
         <HstCheckbox v-model="state.showIcons" title="Show Icons" />
         <HstCheckbox v-model="state.showCounts" title="Show Counts" />
@@ -157,5 +163,17 @@ function initState() {
         <SampleHierarchyTree :nodes="[]" />
       </div>
     </Variant>
+
+    <Variant title="Loading">
+      <div style="padding: 2rem; max-width: 600px;">
+        <SampleHierarchyTree :nodes="[]" loading />
+      </div>
+    </Variant>
+
+    <Variant title="Error">
+      <div style="padding: 2rem; max-width: 600px;">
+        <SampleHierarchyTree :nodes="[]" error="Could not load the sample hierarchy." />
+      </div>
+    </Variant>
   </Story>
 </template>

package/src/components/SampleHierarchyTree.vue

@@ -3,6 +3,11 @@
 import { h, Transition, type VNode } from 'vue'
 import type { TreeNodeType, BadgeVariant, TreeNode } from '../types'
 import { useExpansionSet } from '../composables/useExpansionSet'
+import DataStateInternal from './internal/DataStateInternal.vue'
+
+/** Folder glyph kept from the pre-1.2 hand-rolled empty state. */
+const EMPTY_ICON_PATH
+  = 'M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z'
 
 interface Props {
   nodes: TreeNode[]
@@ -12,6 +17,13 @@ interface Props {
   showCounts?: boolean
   maxDepth?: number
   size?: 'sm' | 'md' | 'lg'
+  /** Replace the tree with a loading placeholder. */
+  loading?: boolean
+  /**
+   * Error message. When set, the tree is replaced by an error state.
+   * `null`/`undefined` renders normally.
+   */
+  error?: string | null
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -20,6 +32,8 @@ const props = withDefaults(defineProps<Props>(), {
   showIcons: true,
   showCounts: true,
   size: 'md',
+  loading: false,
+  error: null,
 })
 
 const emit = defineEmits<{
@@ -226,12 +240,25 @@ function renderTree(): VNode[] {
 
 <template>
   <div :class="['mint-sample-tree', `mint-sample-tree--${size}`]" role="tree">
+    <!-- Error state -->
+    <div v-if="error" class="mint-sample-tree__state">
+      <slot name="error" :error="error">
+        <DataStateInternal state="error" size="sm" :title="error" />
+      </slot>
+    </div>
+
+    <!-- Loading state -->
+    <div v-else-if="loading" class="mint-sample-tree__state">
+      <slot name="loading">
+        <DataStateInternal state="loading" size="sm" loading-label="Loading samples" />
+      </slot>
+    </div>
+
     <!-- Empty state -->
-    <div v-if="nodes.length === 0" class="mint-sample-tree__empty">
-      <svg class="mint-sample-tree__empty-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-        <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" />
-      </svg>
-      <p class="mint-sample-tree__empty-text">No items</p>
+    <div v-else-if="nodes.length === 0" class="mint-sample-tree__state">
+      <slot name="empty">
+        <DataStateInternal state="empty" size="sm" title="No items" :icon-path="EMPTY_ICON_PATH" />
+      </slot>
     </div>
 
     <!-- Tree nodes rendered via render function -->
@@ -240,7 +267,3 @@ function renderTree(): VNode[] {
     </template>
   </div>
 </template>
-
-<style>
-@import '../styles/components/sample-hierarchy-tree.css';
-</style>

package/src/components/SampleLegend.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 /** Clickable color-swatch legend for plate sample types, supporting selection, count display, add/remove, and custom color assignment. */
 import type { SampleType } from '../types'
+import { SAMPLE_COLOR_SCALE } from '../utils/color'
 
 interface Props {
   modelValue?: string
@@ -17,10 +18,7 @@ const props = withDefaults(defineProps<Props>(), {
   samples: () => [],
   showCounts: true,
   editable: false,
-  colorPalette: () => [
-    '#3B82F6', '#10B981', '#EF4444', '#F59E0B', '#8B5CF6',
-    '#F97316', '#06B6D4', '#14B8A6', '#6B7280',
-  ],
+  colorPalette: () => [...SAMPLE_COLOR_SCALE],
   size: 'md',
   orientation: 'vertical',
 })
@@ -113,7 +111,3 @@ function handleAdd() {
     </button>
   </div>
 </template>
-
-<style>
-@import '../styles/components/sample-legend.css';
-</style>

package/src/components/SampleSelector.drag.ts

@@ -1,5 +1,7 @@
 import { ref } from 'vue'
 import type { SampleGroup } from '../types'
+import { useReorderAnnouncer } from '../composables/useListReorder'
+import { getSampleGroupMajorPrefix } from '../utils/sampleGroupPath'
 import {
   detectSampleGroupSeparator,
   getSampleGroupParentPath,
@@ -23,6 +25,7 @@ export function useSampleSelectorDrag(groups: MutableSampleGroups) {
   const draggingGroupKind = ref<GroupDragKind | null>(null)
   const reorderTarget = ref<string | null>(null)
   const reorderPosition = ref<GroupReorderPosition | null>(null)
+  const { announcement, announce, announcerStyle } = useReorderAnnouncer()
 
   function handleDragStart(sample: string, sourceGroup: string | null, event: DragEvent) {
     draggingSample.value = sample
@@ -143,7 +146,45 @@ export function useSampleSelectorDrag(groups: MutableSampleGroups) {
     handleGroupDragEnd()
   }
 
+  /**
+   * Keyboard alternative to the group reorder drag. The hierarchy constrains a
+   * move to the dragged node's siblings (a leaf may not cross a parent), so this
+   * is not a flat list reorder and does not use `useListReorder`: Alt+ArrowUp /
+   * Alt+ArrowDown swap the node with its previous / next sibling instead.
+   */
+  function handleGroupReorderKeydown(name: string, kind: GroupDragKind, event: KeyboardEvent) {
+    if (!event.altKey) return
+    const direction = event.key === 'ArrowUp' ? -1 : event.key === 'ArrowDown' ? 1 : 0
+    if (direction === 0) return
+
+    event.preventDefault()
+    const separator = detectSampleGroupSeparator(groups.value)
+    const siblings = kind === 'major'
+      ? uniqueMajorPrefixes(groups.value, separator)
+      : groups.value
+        .filter(group =>
+          getSampleGroupParentPath(group.name, separator) ===
+          getSampleGroupParentPath(name, separator))
+        .map(group => group.name)
+
+    const currentIndex = siblings.indexOf(name)
+    const target = siblings[currentIndex + direction]
+    if (currentIndex === -1 || target === undefined) return
+
+    const position: GroupReorderPosition = direction === -1 ? 'before' : 'after'
+    const nextGroups = kind === 'major'
+      ? reorderSampleMajorGroup(groups.value, name, target, position)
+      : reorderSampleGroup(groups.value, name, target, position)
+
+    if (nextGroups === groups.value) return
+    groups.value = nextGroups
+    announce(`${name} moved ${direction === -1 ? 'up' : 'down'} to position ${currentIndex + direction + 1} of ${siblings.length}.`)
+  }
+
   return {
+    announcement,
+    announcerStyle,
+    handleGroupReorderKeydown,
     draggingSample,
     dragOverGroup,
     draggingGroup,
@@ -162,3 +203,13 @@ export function useSampleSelectorDrag(groups: MutableSampleGroups) {
     handleGroupDrop,
   }
 }
+
+/** Major-group prefixes in tree order, de-duplicated. */
+function uniqueMajorPrefixes(groups: SampleGroup[], separator: string): string[] {
+  const seen: string[] = []
+  for (const group of groups) {
+    const prefix = getSampleGroupMajorPrefix(group.name, separator)
+    if (!seen.includes(prefix)) seen.push(prefix)
+  }
+  return seen
+}

package/src/components/SampleSelector.story.vue

@@ -72,6 +72,8 @@ const lcmsSamples = ['Liver', 'Kidney'].flatMap(tissue =>
 
 function initState() {
   return {
+    loading: false,
+    error: '',
     samples: mockSamples,
     selected: [] as string[],
     groups: [] as SampleGroup[],
@@ -100,6 +102,8 @@ function handleSmartGroup(result: AutoGroupResult, state: { groups: SampleGroup[
       <template #default="{ state }">
         <div style="padding: 2rem; max-width: 400px;">
           <SampleSelector
+            :loading="state.loading"
+            :error="state.error || null"
             v-model="state.selected"
             v-model:groups="state.groups"
             :samples="state.samples"
@@ -110,6 +114,8 @@ function handleSmartGroup(result: AutoGroupResult, state: { groups: SampleGroup[
         </div>
       </template>
       <template #controls="{ state }">
+        <HstCheckbox v-model="state.loading" title="Loading" />
+        <HstText v-model="state.error" title="Error Message" />
         <HstCheckbox v-model="state.enableGrouping" title="Enable Grouping" />
         <HstCheckbox v-model="state.enableSmartGroup" title="Enable Smart" />
       </template>

package/src/components/SampleSelector.tree.ts

@@ -34,6 +34,8 @@ export interface SampleGroupTreeContext {
   onGroupDragOver: (name: string, kind: GroupDragKind, event: DragEvent) => void
   onGroupDragLeave: (event: DragEvent) => void
   onGroupDrop: (name: string, kind: GroupDragKind, event: DragEvent) => void
+  /** Alt+ArrowUp / Alt+ArrowDown reorder a group among its siblings. */
+  onGroupReorderKeydown: (name: string, kind: GroupDragKind, event: KeyboardEvent) => void
 }
 
 /** Every concrete group name beneath a node, in tree order. */