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

package/src/components/BatchProgressList.story.vue

@@ -21,6 +21,8 @@ const allCompleted = [
 
 function initState() {
   return {
+    loading: false,
+    error: '',
     items: mixedItems,
     showSummary: true,
     title: 'Processing Raw Data Files',
@@ -35,6 +37,8 @@ function initState() {
       <template #default="{ state }">
         <div style="padding: 2rem; max-width: 500px;">
           <BatchProgressList
+            :loading="state.loading"
+            :error="state.error || null"
             :items="state.items"
             :show-summary="state.showSummary"
             :title="state.title"
@@ -45,6 +49,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.showSummary" title="Show Summary" />
         <HstText v-model="state.title" title="Title" />
         <HstCheckbox v-model="state.autoScroll" title="Auto Scroll" />
@@ -88,5 +94,17 @@ function initState() {
         />
       </div>
     </Variant>
+
+    <Variant title="Loading">
+      <div style="padding: 2rem; max-width: 600px;">
+        <BatchProgressList :items="[]" loading />
+      </div>
+    </Variant>
+
+    <Variant title="Error">
+      <div style="padding: 2rem; max-width: 600px;">
+        <BatchProgressList :items="[]" error="Could not load the batch." />
+      </div>
+    </Variant>
   </Story>
 </template>

package/src/components/BatchProgressList.vue

@@ -3,6 +3,7 @@
 import { computed, ref, watch, nextTick } from 'vue'
 import type { BatchItem, BatchSummary } from '../types'
 import { useExpansionSet } from '../composables/useExpansionSet'
+import DataStateInternal from './internal/DataStateInternal.vue'
 
 interface Props {
   items: BatchItem[]
@@ -10,11 +11,23 @@ interface Props {
   title?: string
   maxHeight?: string
   autoScroll?: boolean
+  /** Replace the item list with a loading placeholder. */
+  loading?: boolean
+  /**
+   * Error message. When set, the item list is replaced by an error state.
+   * `null`/`undefined` renders normally.
+   */
+  error?: string | null
+  /** Empty-state headline shown when there are no batch items. */
+  emptyMessage?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
   showSummary: true,
   autoScroll: true,
+  loading: false,
+  error: null,
+  emptyMessage: 'No items in this batch',
 })
 
 const emit = defineEmits<{
@@ -91,7 +104,26 @@ watch(
       </div>
     </slot>
 
+    <div v-if="error" class="mint-batch-progress__state">
+      <slot name="error" :error="error">
+        <DataStateInternal state="error" size="sm" :title="error" />
+      </slot>
+    </div>
+
+    <div v-else-if="loading" class="mint-batch-progress__state">
+      <slot name="loading">
+        <DataStateInternal state="loading" size="sm" loading-label="Loading batch" />
+      </slot>
+    </div>
+
+    <div v-else-if="items.length === 0" class="mint-batch-progress__state">
+      <slot name="empty">
+        <DataStateInternal state="empty" size="sm" :title="emptyMessage" />
+      </slot>
+    </div>
+
     <div
+      v-else
       ref="listRef"
       class="mint-batch-progress__list"
       :style="maxHeight ? { maxHeight, overflowY: 'auto' } : {}"
@@ -175,7 +207,3 @@ watch(
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/batch-progress-list.css';
-</style>

package/src/components/BioTemplateExperimentWorkspaceView.vue

@@ -19,6 +19,7 @@ import {
   type BioTemplateComponentPropsLookupOptions,
   type TemplateCollectionEnvelope,
 } from '../templates'
+import { bioTemplateExperimentWorkspaceProps } from '../composables/workspaceRecipes'
 import AlertBox from './AlertBox.vue'
 import BaseButton from './BaseButton.vue'
 import BioTemplateRenderer from './BioTemplateRenderer.vue'
@@ -114,27 +115,15 @@ const statusMessage = computed(() => {
   return `${props.label} template data saves to experiment design_data.`
 })
 
-const resolvedLoading = computed(() => {
-  if (props.status?.loading !== undefined || props.status?.saving !== undefined) {
-    return Boolean(props.status.loading) || Boolean(props.status.saving)
-  }
-  return props.loading
-})
-const resolvedError = computed(() =>
-  props.status?.error !== undefined ? props.status.error : props.error,
-)
-const resolvedHasExperiment = computed(() =>
-  props.status?.hasExperiment ?? props.hasExperiment,
-)
-const resolvedCurrentExperimentId = computed(() =>
-  props.status?.currentExperimentId ?? props.currentExperimentId,
-)
-const resolvedLastLoadedAt = computed(() =>
-  props.status?.lastLoadedAt !== undefined ? props.status.lastLoadedAt : props.lastLoadedAt,
-)
-const resolvedLastSavedAt = computed(() =>
-  props.status?.lastSavedAt !== undefined ? props.status.lastSavedAt : props.lastSavedAt,
-)
+// Thin recipe over bioTemplateExperimentWorkspaceProps(): merges the grouped `status` prop
+// over the individual loading/error/experiment props (see workspaceRecipes.ts).
+const resolvedStatus = computed(() => bioTemplateExperimentWorkspaceProps(props))
+const resolvedLoading = computed(() => resolvedStatus.value.loading)
+const resolvedError = computed(() => resolvedStatus.value.error)
+const resolvedHasExperiment = computed(() => resolvedStatus.value.hasExperiment)
+const resolvedCurrentExperimentId = computed(() => resolvedStatus.value.currentExperimentId)
+const resolvedLastLoadedAt = computed(() => resolvedStatus.value.lastLoadedAt)
+const resolvedLastSavedAt = computed(() => resolvedStatus.value.lastSavedAt)
 
 const templateSummaries = computed(() =>
   Object.values(extractTemplateCollection(props.target)).map(template => ({

package/src/components/BioTemplatePackWorkspaceView.vue

@@ -14,6 +14,7 @@ import type {
   UseBioTemplatePackWorkspaceReturn,
 } from '../composables/useBioTemplatePackWorkspace'
 import { useBioTemplatePackWorkspace } from '../composables/useBioTemplatePackWorkspace'
+import { bioTemplatePackWorkspaceProps } from '../composables/workspaceRecipes'
 import BioTemplateExperimentWorkspaceView from './BioTemplateExperimentWorkspaceView.vue'
 
 interface BioTemplatePackWorkspaceSlotProps {
@@ -140,6 +141,15 @@ const resolvedActions = computed<PackWorkspaceActions>(() => ({
   save: props.actions?.save ?? (() => resolvedWorkspace.value.saveCurrent()),
 }))
 
+// Thin recipe over bioTemplatePackWorkspaceProps(): forwards this view's own display props
+// plus the pack-derived target/label/status/actions to BioTemplateExperimentWorkspaceView.
+const experimentWorkspaceRecipe = computed(() => bioTemplatePackWorkspaceProps(props, {
+  target: target.value,
+  label: label.value,
+  status: resolvedStatus.value,
+  actions: resolvedActions.value,
+}))
+
 watch(
   [() => props.pack, () => props.workspaceOptions],
   () => {
@@ -152,21 +162,7 @@ onScopeDispose(() => generatedWorkspaceScope?.stop())
 </script>
 
 <template>
-  <BioTemplateExperimentWorkspaceView
-    :target="target"
-    kind="collection"
-    :label="label"
-    :message="message"
-    :status="resolvedStatus"
-    :actions="resolvedActions"
-    :dense="dense"
-    :readonly="readonly"
-    :show-status="showStatus"
-    :show-template-summary="showTemplateSummary"
-    :load-label="loadLabel"
-    :reset-label="resetLabel"
-    :save-label="saveLabel"
-  >
+  <BioTemplateExperimentWorkspaceView v-bind="experimentWorkspaceRecipe">
     <template v-if="hasDefaultSlot" #default="slotProps">
       <slot
         v-bind="slotProps"

package/src/components/BioTemplatePresetWorkspaceView.vue

@@ -14,6 +14,7 @@ import type {
   UseBioTemplatePresetWorkspaceReturn,
 } from '../composables/useBioTemplatePresetWorkspace'
 import { useBioTemplatePresetWorkspace } from '../composables/useBioTemplatePresetWorkspace'
+import { bioTemplatePresetWorkspaceProps } from '../composables/workspaceRecipes'
 import AlertBox from './AlertBox.vue'
 import AppSidebar from './AppSidebar.vue'
 import BaseButton from './BaseButton.vue'
@@ -96,19 +97,13 @@ const props = withDefaults(defineProps<Props>(), {
   resetLabel: 'Reset defaults',
 })
 
-const externalValues = computed(() => props.modelValue ?? props.values)
-const resolvedWorkspaceOptions = computed<UseBioTemplatePresetWorkspaceOptions>(() => {
-  if (props.initialValues === undefined && externalValues.value === undefined) return props.workspaceOptions
-
-  return {
-    ...props.workspaceOptions,
-    initialValues: {
-      ...(props.workspaceOptions.initialValues ?? {}),
-      ...(props.initialValues ?? {}),
-      ...(externalValues.value ?? {}),
-    },
-  }
-})
+// Thin recipe over bioTemplatePresetWorkspaceProps(): merges workspaceOptions/initialValues/
+// v-model into the options useBioTemplatePresetWorkspace() consumes (see workspaceRecipes.ts).
+const resolvedPresetProps = computed(() => bioTemplatePresetWorkspaceProps(props))
+const externalValues = computed(() => resolvedPresetProps.value.externalValues)
+const resolvedWorkspaceOptions = computed<UseBioTemplatePresetWorkspaceOptions>(() =>
+  resolvedPresetProps.value.resolvedWorkspaceOptions
+)
 
 let generatedWorkspaceScope: EffectScope | undefined
 

package/src/components/Breadcrumb.vue

@@ -75,7 +75,3 @@ function handleClick(item: BreadcrumbItem) {
     </ol>
   </nav>
 </template>
-
-<style>
-@import '../styles/components/breadcrumb.css';
-</style>

package/src/components/Calendar.vue

@@ -361,7 +361,3 @@ function nextMonth() {
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/calendar.css';
-</style>

package/src/components/ChartContainer.story.vue

@@ -75,7 +75,7 @@ import ChartContainer from './ChartContainer.vue'
               <button type="button" style="padding: 0.25rem 0.75rem; font-size: 0.8125rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; background: var(--bg-card, #fff); color: var(--text-primary, #1e293b); cursor: pointer;">
                 Linear
               </button>
-              <button type="button" style="padding: 0.25rem 0.75rem; font-size: 0.8125rem; border: 1px solid var(--mint-primary, #3B82F6); border-radius: 0.375rem; background: var(--mint-primary, #3B82F6); color: #fff; cursor: pointer;">
+              <button type="button" style="padding: 0.25rem 0.75rem; font-size: 0.8125rem; border: 1px solid var(--color-primary); border-radius: 0.375rem; background: var(--color-primary); color: #fff; cursor: pointer;">
                 Log
               </button>
             </div>

package/src/components/ChartContainer.vue

@@ -58,7 +58,3 @@ withDefaults(defineProps<Props>(), {
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/chart-container.css';
-</style>

package/src/components/ChemicalFormula.vue

@@ -33,7 +33,3 @@ function getParts(f: string): FormulaPart[] {
     </template>
   </component>
 </template>
-
-<style>
-@import '../styles/components/chemical-formula.css';
-</style>

package/src/components/CollapsibleCard.vue

@@ -239,7 +239,3 @@ function handleActionClick(action: SidebarToolSectionAction) {
     </Transition>
   </div>
 </template>
-
-<style>
-@import '../styles/components/collapsible-card.css';
-</style>

package/src/components/ColorSlider.vue

@@ -158,7 +158,3 @@ function handleInput(event: Event) {
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/color-slider.css';
-</style>

package/src/components/ComponentBindingRenderer.vue

@@ -16,6 +16,7 @@ import ReagentList from './ReagentList.vue'
 import SampleSelector from './SampleSelector.vue'
 import ScheduleCalendar from './ScheduleCalendar.vue'
 import WellPlate from './WellPlate.vue'
+import { isRecord } from '../utils/records'
 
 export interface ComponentBindingRendererBinding {
   id?: string
@@ -173,9 +174,6 @@ function normalizeProps(binding: ComponentBindingRendererBinding): Record<string
   }
 }
 
-function isRecord(value: unknown): value is Record<string, unknown> {
-  return typeof value === 'object' && value !== null && !Array.isArray(value)
-}
 </script>
 
 <template>

package/src/components/ConcentrationInput.vue

@@ -143,7 +143,3 @@ watch(availableUnits, (units) => {
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/concentration-input.css';
-</style>

package/src/components/ConfirmDialog.vue

@@ -94,7 +94,3 @@ const confirmVariant = computed<ButtonVariant>(() => {
     </template>
   </BaseModal>
 </template>
-
-<style>
-@import '../styles/components/confirm-dialog.css';
-</style>

package/src/components/ControlWorkspaceView.vue

@@ -20,7 +20,8 @@ import type {
   ControlWorkspaceOptions,
   UseControlWorkspaceReturn,
 } from '../composables/useControlSchema'
-import { mergeControlWorkspaceOptions, resolveControlModel, useControlWorkspace } from '../composables/useControlSchema'
+import { useControlWorkspace } from '../composables/useControlSchema'
+import { controlWorkspaceProps } from '../composables/workspaceRecipes'
 import AppLayout from './AppLayout.vue'
 import AppSidebar from './AppSidebar.vue'
 import AppTopBar from './AppTopBar.vue'
@@ -161,27 +162,15 @@ const props = withDefaults(defineProps<Props>(), {
   formSize: 'md',
 })
 
-const externalValues = computed(() => props.modelValue ?? props.values)
-const resolvedModel = computed<ControlModelBinding | undefined>(() => {
-  return resolveControlModel(props.model)
-})
-const resolvedControls = computed<ControlSchema>(() => props.controls ?? resolvedModel.value?.controls ?? {})
-const baseControlOptions = computed<ControlWorkspaceOptions>(() =>
-  mergeControlWorkspaceOptions(resolvedModel.value?.controlOptions ?? {}, props.controlOptions)
-)
-
-const resolvedControlOptions = computed<ControlWorkspaceOptions>(() => {
-  if (props.initialValues === undefined && externalValues.value === undefined) return baseControlOptions.value
-
-  return {
-    ...baseControlOptions.value,
-    initialValues: {
-      ...(baseControlOptions.value.initialValues ?? {}),
-      ...(props.initialValues ?? {}),
-      ...(externalValues.value ?? {}),
-    },
-  }
-})
+// Thin recipe over controlWorkspaceProps(): resolves model/controls/controlOptions/v-model
+// into the schema + options pair useControlWorkspace() consumes, shared with
+// DoseDesignWorkspaceView (which forwards its own props here) and
+// BioTemplatePresetWorkspaceView's equivalent options merge.
+const resolvedWorkspaceModel = computed(() => controlWorkspaceProps(props))
+const externalValues = computed(() => resolvedWorkspaceModel.value.externalValues)
+const resolvedModel = computed(() => resolvedWorkspaceModel.value.resolvedModel)
+const resolvedControls = computed(() => resolvedWorkspaceModel.value.resolvedControls)
+const resolvedControlOptions = computed(() => resolvedWorkspaceModel.value.resolvedControlOptions)
 
 let generatedWorkspaceScope: EffectScope | undefined
 

package/src/components/DataFrame.story.vue

@@ -37,6 +37,7 @@ const pagination = ref<PaginationState>({ page: 1, pageSize: 5, total: data.leng
       <template #default="{ state }">
         <div style="padding: 2rem; max-width: 900px; margin: 0 auto;">
           <DataFrame
+            :error="state.error || null"
             :data="data"
             :columns="columns"
             row-key="id"
@@ -55,6 +56,8 @@ const pagination = ref<PaginationState>({ page: 1, pageSize: 5, total: data.leng
       </template>
 
       <template #controls="{ state }">
+
+        <HstText v-model="state.error" title="Error Message" />
         <HstSelect
           v-model="state.size"
           title="Size"
@@ -144,5 +147,16 @@ const pagination = ref<PaginationState>({ page: 1, pageSize: 5, total: data.leng
         />
       </div>
     </Variant>
+
+    <Variant title="Error">
+      <div style="padding: 2rem; max-width: 900px; margin: 0 auto;">
+        <DataFrame
+          :data="data"
+          :columns="columns"
+          row-key="id"
+          error="Could not load the result table."
+        />
+      </div>
+    </Variant>
   </Story>
 </template>

package/src/components/DataFrame.vue

@@ -5,6 +5,14 @@ import type { DataFrameColumn, SortState, PaginationState } from '../types'
 import { useSortedItems } from '../composables/useSortedItems'
 import { useTextSearch } from '../composables/useTextSearch'
 import { useListSelection } from '../composables/useListSelection'
+import DataStateInternal from './internal/DataStateInternal.vue'
+import LoadingSpinner from './LoadingSpinner.vue'
+import { tableDensityToSize, tryUseSettingsStore } from '../stores/settings'
+
+/** Inbox glyph kept from the pre-1.2 hand-rolled empty state. */
+const EMPTY_ICON_PATH
+  = 'M22 12L16 12L14 15L10 15L8 12L2 12'
+  + 'M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'
 
 /**
  * DataFrame - Data table with sorting, searching, pagination, and row selection.
@@ -34,7 +42,11 @@ interface Props {
   striped?: boolean
   /** Show table borders */
   bordered?: boolean
-  /** Table size */
+  /**
+   * Table size. Left unset, it follows the platform's `tableDensity` setting
+   * (compact → `sm`, normal → `md`, comfortable → `lg`) and falls back to
+   * `md` when no settings store is installed.
+   */
   size?: 'sm' | 'md' | 'lg'
   /** Make header sticky on scroll */
   stickyHeader?: boolean
@@ -42,6 +54,11 @@ interface Props {
   maxHeight?: string | number
   /** Show loading overlay */
   loading?: boolean
+  /**
+   * Error message. When set, the table body is replaced by an error state
+   * instead of the empty state. `null`/`undefined` renders normally.
+   */
+  error?: string | null
   /** Empty state message */
   emptyText?: string
   /** Enable column sorting */
@@ -75,9 +92,9 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
   striped: true,
   bordered: true,
-  size: 'md',
   stickyHeader: false,
   loading: false,
+  error: null,
   emptyText: 'No data',
   sortable: false,
   pagination: false,
@@ -108,6 +125,13 @@ const emit = defineEmits<{
   'delete-row': [row: Record<string, unknown>, index: number]
 }>()
 
+const settings = tryUseSettingsStore()
+
+/** Explicit `size` wins; otherwise the user's table density, else `md`. */
+const size = computed<'sm' | 'md' | 'lg'>(() =>
+  props.size ?? (settings ? tableDensityToSize(settings.tableDensity) : 'md'),
+)
+
 const searchQuery = ref('')
 const internalSort = ref<SortState | null>(null)
 
@@ -219,6 +243,21 @@ function isColumnSortable(col: DataFrameColumn): boolean {
   return col.sortable === true || (props.sortable && col.sortable !== false)
 }
 
+/** `aria-sort` for the header cell, omitted on columns that cannot be sorted. */
+function columnAriaSort(col: DataFrameColumn): 'ascending' | 'descending' | 'none' | undefined {
+  if (!isColumnSortable(col)) return undefined
+  if (activeSort.value?.key !== col.key || !activeSort.value.direction) return 'none'
+  return activeSort.value.direction === 'asc' ? 'ascending' : 'descending'
+}
+
+// Native buttons activate on Enter/Space, but the default is prevented here so
+// the header sorts exactly once per key press in every engine.
+function handleSortKeydown(event: KeyboardEvent, col: DataFrameColumn) {
+  if (event.key !== 'Enter' && event.key !== ' ') return
+  event.preventDefault()
+  handleSort(col)
+}
+
 // Selection
 const pageRowKeys = computed(() =>
   paginatedData.value.map((row, i) => getRowKey(row, i))
@@ -264,6 +303,35 @@ function columnStyle(col: DataFrameColumn) {
   }
 }
 
+const RESIZE_KEY_STEP = 16
+
+function columnMinWidth(col: DataFrameColumn): number {
+  return Math.max(MIN_COL_WIDTH, typeof col.minWidth === 'number' ? col.minWidth : 0)
+}
+
+/** Current px width of a column when one is known (resized, or a numeric `width`). */
+function columnWidthValue(col: DataFrameColumn): number | undefined {
+  const width = activeWidths.value[col.key] ?? col.width
+  return typeof width === 'number' ? width : undefined
+}
+
+function applyColumnWidth(key: string, width: number) {
+  const widths = { ...activeWidths.value, [key]: width }
+  if (props.columnWidths === undefined) internalWidths.value = widths
+  emit('update:columnWidths', widths)
+}
+
+/** Left/Right resize the column by a fixed step; the handle is a `role="slider"`. */
+function handleResizeKeydown(event: KeyboardEvent, col: DataFrameColumn) {
+  if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return
+  event.preventDefault()
+  const th = (event.target as HTMLElement).closest('th')
+  const base =
+    columnWidthValue(col) ?? (th instanceof HTMLElement ? th.offsetWidth : MIN_COL_WIDTH)
+  const delta = event.key === 'ArrowRight' ? RESIZE_KEY_STEP : -RESIZE_KEY_STEP
+  applyColumnWidth(col.key, Math.max(columnMinWidth(col), base + delta))
+}
+
 let resizeState: { key: string; startX: number; startWidth: number; min: number } | null = null
 
 function startResize(col: DataFrameColumn, event: MouseEvent) {
@@ -272,8 +340,7 @@ function startResize(col: DataFrameColumn, event: MouseEvent) {
   const th = (event.target as HTMLElement).closest('th')
   const startWidth =
     th instanceof HTMLElement ? th.offsetWidth : (typeof col.width === 'number' ? col.width : MIN_COL_WIDTH)
-  const min = Math.max(MIN_COL_WIDTH, typeof col.minWidth === 'number' ? col.minWidth : 0)
-  resizeState = { key: col.key, startX: event.clientX, startWidth, min }
+  resizeState = { key: col.key, startX: event.clientX, startWidth, min: columnMinWidth(col) }
   window.addEventListener('mousemove', onResizeMove)
   window.addEventListener('mouseup', stopResize)
 }
@@ -281,9 +348,7 @@ function startResize(col: DataFrameColumn, event: MouseEvent) {
 function onResizeMove(event: MouseEvent) {
   if (!resizeState) return
   const next = Math.max(resizeState.min, resizeState.startWidth + (event.clientX - resizeState.startX))
-  const widths = { ...activeWidths.value, [resizeState.key]: next }
-  if (props.columnWidths === undefined) internalWidths.value = widths
-  emit('update:columnWidths', widths)
+  applyColumnWidth(resizeState.key, next)
 }
 
 function stopResize() {
@@ -355,8 +420,15 @@ const wrapperStyle = computed(() => {
                 },
               ]"
               :style="columnStyle(col)"
-              @click="isColumnSortable(col) ? handleSort(col) : undefined"
+              :aria-sort="columnAriaSort(col)"
             >
+              <component
+                :is="isColumnSortable(col) ? 'button' : 'div'"
+                :type="isColumnSortable(col) ? 'button' : undefined"
+                class="mint-dataframe__th-button"
+                @click="isColumnSortable(col) ? handleSort(col) : undefined"
+                @keydown="isColumnSortable(col) ? handleSortKeydown($event, col) : undefined"
+              >
               <slot :name="`header-${col.key}`" :column="col">
                 <div class="mint-dataframe__th-content">
                   <span>{{ col.label }}</span>
@@ -380,13 +452,18 @@ const wrapperStyle = computed(() => {
                   </svg>
                 </div>
               </slot>
+              </component>
               <span
                 v-if="resizable"
                 class="mint-dataframe__resize-handle"
-                role="separator"
+                role="slider"
+                tabindex="0"
                 aria-orientation="vertical"
-                aria-label="Resize column"
+                :aria-label="`Resize ${col.label} column`"
+                :aria-valuemin="columnMinWidth(col)"
+                :aria-valuenow="columnWidthValue(col)"
                 @mousedown="startResize(col, $event)"
+                @keydown="handleResizeKeydown($event, col)"
                 @click.stop
               />
             </th>
@@ -459,23 +536,24 @@ const wrapperStyle = computed(() => {
         </tbody>
       </table>
 
+      <!-- Error state -->
+      <div v-if="error" class="mint-dataframe__state">
+        <slot name="error" :error="error">
+          <DataStateInternal state="error" :title="error" />
+        </slot>
+      </div>
+
       <!-- Empty state -->
-      <div v-if="paginatedData.length === 0 && !loading" class="mint-dataframe__empty">
+      <div v-else-if="paginatedData.length === 0 && !loading" class="mint-dataframe__state">
         <slot name="empty">
-          <svg class="mint-dataframe__empty-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <polyline points="22 12 16 12 14 15 10 15 8 12 2 12" /><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
-          </svg>
-          <p class="mint-dataframe__empty-text">{{ emptyText }}</p>
+          <DataStateInternal state="empty" :title="emptyText" :icon-path="EMPTY_ICON_PATH" />
         </slot>
       </div>
 
       <!-- Loading overlay -->
       <div v-if="loading" class="mint-dataframe__loading">
         <slot name="loading">
-          <svg class="mint-dataframe__loading-spinner" viewBox="0 0 24 24" fill="none" aria-hidden="true">
-            <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3" opacity="0.25" />
-            <path d="M12 2a10 10 0 0 1 10 10" stroke="currentColor" stroke-width="3" stroke-linecap="round" />
-          </svg>
+          <LoadingSpinner size="lg" />
         </slot>
       </div>
     </div>
@@ -514,7 +592,3 @@ const wrapperStyle = computed(() => {
     </div>
   </div>
 </template>
-
-<style>
-@import '../styles/components/dataframe.css';
-</style>