@morscherlab/mint-sdk 1.2.0-beta.1 → 1.2.0-beta.11

package/src/components/ProgressBar.vue

@@ -111,7 +111,3 @@ const segmentCount = computed(() => props.steps.length || 0)
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/progress-bar.css';
-</style>

package/src/components/ProtocolStepEditor.vue

@@ -53,6 +53,7 @@ const selectedTemplateId = ref<string | null>(null)
 const {
   isOpen: templateDropdownOpen,
   rootRef: templateDropdownRef,
+  triggerRef: templateTriggerRef,
   close: closeTemplateDropdown,
   toggle: toggleTemplateDropdown,
 } = useDropdownState()
@@ -204,6 +205,7 @@ watch(
         <label class="mint-protocol-editor__template-label">Template</label>
         <div ref="templateDropdownRef" class="mint-protocol-editor__template-dropdown">
           <button
+            ref="templateTriggerRef"
             type="button"
             class="mint-protocol-editor__template-btn"
             @click="toggleTemplateDropdown"
@@ -376,7 +378,3 @@ watch(
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/protocol-step-editor.css';
-</style>

package/src/components/RackEditor.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 /** Multi-rack editor for managing collections of well-plate racks with add/remove/reorder controls and per-well editing. */
-import { ref, computed, watch } from 'vue'
+import { computed, watch, type ComponentPublicInstance } from 'vue'
+import { SLOT_COLORS, SLOT_ORDER } from '../utils/color'
 import type { Rack, SlotPosition, WellPlateFormat, WellPlateSize, WellEditData, Well, WellEditField, WellSampleDropData, RackSampleDropMapper } from '../types'
+import { useListReorder } from '../composables/useListReorder'
 import { useRackEditor } from '../composables/useRackEditor'
 import WellPlate from './WellPlate.vue'
 
@@ -104,23 +106,48 @@ watch(
   },
 )
 
-const SLOT_COLORS: Record<SlotPosition, string> = {
-  R: '#ef4444',
-  G: '#22c55e',
-  B: '#3b82f6',
-  Y: '#eab308',
-}
-
-const SLOT_OPTIONS: SlotPosition[] = ['R', 'G', 'B', 'Y']
+const SLOT_OPTIONS: readonly SlotPosition[] = SLOT_ORDER
 
 const FORMAT_OPTIONS: { value: WellPlateFormat; label: string }[] = [
   { value: 54, label: '54' },
   { value: 96, label: '96' },
 ]
 
-// Drag state for rack reordering
-const draggingRackId = ref<string | null>(null)
-const dragOverRackId = ref<string | null>(null)
+// Rack tab reordering: HTML5 drag for pointers, Alt+Arrow for the keyboard,
+// both owned by the shared reorder composable.
+const tabRefs = new Map<string, HTMLElement>()
+
+const {
+  draggingId: draggingRackId,
+  dragOverId: dragOverRackId,
+  announcement: reorderAnnouncement,
+  announcerStyle,
+  onDragStart: onRackDragStart,
+  onDragOver: onRackDragOver,
+  onDragLeave: onRackDragLeave,
+  onDrop: onRackDrop,
+  onDragEnd: onRackDragEnd,
+  onKeydown: onRackReorderKeydown,
+} = useListReorder<Rack>({
+  items: () => editor.racks.value,
+  getId: (rack) => rack.id,
+  getLabel: (rack) => rack.name,
+  disabled: () => !props.allowReorder || props.readonly,
+  getElement: (id) => tabRefs.get(id),
+  itemNoun: 'Rack',
+  onReorder: ({ fromIndex, toIndex }) => {
+    editor.reorderRacks(fromIndex, toIndex)
+    emit('rack-reorder', editor.racks.value.map(r => r.id))
+  },
+})
+
+function setTabRef(id: string, el: Element | ComponentPublicInstance | null) {
+  if (el instanceof HTMLElement) {
+    tabRefs.set(id, el)
+  } else {
+    tabRefs.delete(id)
+  }
+}
 
 function handleAddRack() {
   const rack = editor.addRack()
@@ -136,54 +163,6 @@ function handleTabClick(rackId: string) {
   editor.setActiveRack(rackId)
 }
 
-// Rack drag handlers
-function handleRackDragStart(event: DragEvent, rackId: string) {
-  if (!props.allowReorder) return
-  draggingRackId.value = rackId
-  if (event.dataTransfer) {
-    event.dataTransfer.effectAllowed = 'move'
-    event.dataTransfer.setData('text/plain', rackId)
-  }
-}
-
-function handleRackDragOver(event: DragEvent, rackId: string) {
-  event.preventDefault()
-  if (draggingRackId.value && draggingRackId.value !== rackId) {
-    dragOverRackId.value = rackId
-  }
-}
-
-function handleRackDragLeave() {
-  dragOverRackId.value = null
-}
-
-function handleRackDrop(event: DragEvent, targetRackId: string) {
-  event.preventDefault()
-  if (!draggingRackId.value || draggingRackId.value === targetRackId) {
-    clearDragState()
-    return
-  }
-
-  const fromIndex = editor.racks.value.findIndex(r => r.id === draggingRackId.value)
-  const toIndex = editor.racks.value.findIndex(r => r.id === targetRackId)
-
-  if (fromIndex !== -1 && toIndex !== -1) {
-    editor.reorderRacks(fromIndex, toIndex)
-    emit('rack-reorder', editor.racks.value.map(r => r.id))
-  }
-
-  clearDragState()
-}
-
-function handleRackDragEnd() {
-  clearDragState()
-}
-
-function clearDragState() {
-  draggingRackId.value = null
-  dragOverRackId.value = null
-}
-
 // Toolbar actions
 function handleFormatChange(format: WellPlateFormat) {
   if (!editor.activeRack.value) return
@@ -281,9 +260,11 @@ const activeRackWells = computed(() => editor.activeRack.value?.wells ?? {})
     <div class="mint-rack-editor__tabs">
       <div class="mint-rack-editor__tabs-inner">
         <button
-          v-for="rack in editor.racks.value"
+          v-for="(rack, rackIndex) in editor.racks.value"
           :key="rack.id"
+          :ref="(el) => setTabRef(rack.id, el)"
           :draggable="allowReorder && !readonly"
+          :title="allowReorder && !readonly ? `${rack.name} — press Alt with the arrow keys to reorder` : undefined"
           :class="[
             'mint-rack-editor__tab',
             {
@@ -293,11 +274,12 @@ const activeRackWells = computed(() => editor.activeRack.value?.wells ?? {})
             },
           ]"
           @click="handleTabClick(rack.id)"
-          @dragstart="handleRackDragStart($event, rack.id)"
-          @dragover="handleRackDragOver($event, rack.id)"
-          @dragleave="handleRackDragLeave"
-          @drop="handleRackDrop($event, rack.id)"
-          @dragend="handleRackDragEnd"
+          @keydown="onRackReorderKeydown($event, rack, rackIndex)"
+          @dragstart="onRackDragStart($event, rack, rackIndex)"
+          @dragover="onRackDragOver($event, rack, rackIndex)"
+          @dragleave="onRackDragLeave"
+          @drop="onRackDrop($event, rack, rackIndex)"
+          @dragend="onRackDragEnd"
         >
           <span
             class="mint-rack-editor__slot-dot"
@@ -434,9 +416,8 @@ const activeRackWells = computed(() => editor.activeRack.value?.wells ?? {})
         </template>
       </WellPlate>
     </div>
+
+    <!-- Reorder announcements for screen readers -->
+    <div role="status" aria-live="polite" :style="announcerStyle">{{ reorderAnnouncement }}</div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/rack-editor.css';
-</style>

package/src/components/ReagentEditor.vue

@@ -412,7 +412,3 @@ function formatLevel(value: number): string {
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/reagent-editor.css';
-</style>

package/src/components/ReagentList.story.vue

@@ -76,6 +76,8 @@ const mockReagents: Reagent[] = [
 
 function initState() {
   return {
+    loading: false,
+    error: '',
     modelValue: mockReagents,
     readonly: false,
     showStockLevel: true,
@@ -92,6 +94,8 @@ function initState() {
       <template #default="{ state }">
         <div style="padding: 2rem;">
           <ReagentList
+            :loading="state.loading"
+            :error="state.error || null"
             v-model="state.modelValue"
             :readonly="state.readonly"
             :show-stock-level="state.showStockLevel"
@@ -102,6 +106,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.readonly" title="Readonly" />
         <HstCheckbox v-model="state.showStockLevel" title="Show Stock Level" />
         <HstSlider v-model="state.lowStockThreshold" title="Low Stock Threshold (%)" :min="0" :max="50" />
@@ -133,5 +139,17 @@ function initState() {
         <ReagentList :model-value="[]" />
       </div>
     </Variant>
+
+    <Variant title="Loading">
+      <div style="padding: 2rem;">
+        <ReagentList :model-value="[]" loading />
+      </div>
+    </Variant>
+
+    <Variant title="Error">
+      <div style="padding: 2rem;">
+        <ReagentList :model-value="[]" error="Could not load reagents." />
+      </div>
+    </Variant>
   </Story>
 </template>

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>