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

package/src/components/{AutoGroupModal.vue → internal/AutoGroupModalInternal.vue}

@@ -5,17 +5,17 @@
  * staying wired to the `useAutoGroup` engine. The UI is the Smart Group design
  * (`SmartGroupFieldRecipe` / `SmartGroupManual`) driven in controlled mode; this
  * component is the adapter that maps engine state ↔ that UI and emits the
- * resulting `AutoGroupResult`. Public props/emits are unchanged so existing
- * consumers (`SampleSelector`, template catalog) keep working.
+ * resulting `AutoGroupResult`. Private to `SampleSelector`, which emits that
+ * result as its `smartGroup` event.
  */
 import { ref, computed, watch } from 'vue'
-import BaseModal from './BaseModal.vue'
-import AlertBox from './AlertBox.vue'
-import SmartGroupFieldRecipe from './SmartGroupFieldRecipe.vue'
-import SmartGroupManual from './SmartGroupManual.vue'
-import { useAutoGroup, parseCSV } from '../composables/useAutoGroup'
-import { useApi } from '../composables/useApi'
-import { readFileAsText } from '../composables/useFileImport'
+import BaseModal from '../BaseModal.vue'
+import AlertBox from '../AlertBox.vue'
+import SmartGroupFieldRecipe from '../SmartGroupFieldRecipe.vue'
+import SmartGroupManual from '../SmartGroupManual.vue'
+import { useAutoGroup, parseCSV } from './useAutoGroup'
+import { useApi } from '../../composables/useApi'
+import { readFileAsText } from '../../composables/useFileImport'
 import {
   engineAnatomy,
   engineColumnNames,
@@ -27,18 +27,18 @@ import {
   manualSamplesToResult,
   qcRouteToEngine,
   seedFromGroups,
-} from './AutoGroupModal.adapter'
-import { SAMPLE_GROUP_COLOR_OPTIONS } from './SampleSelector.colors'
-import { mostlySingletons, type QcRoute } from './SmartGroupFieldRecipe.groups'
-import type { ManualSample } from './SmartGroupManual.cohorts'
-import type { ManualPaletteEntry } from './SmartGroup.types'
-import type { AutoGroupResult } from '../types/auto-group'
-import type { SampleGroup } from '../types'
+} from './AutoGroupModalInternal.adapter'
+import { SAMPLE_GROUP_COLOR_OPTIONS } from '../SampleSelector.colors'
+import { mostlySingletons, type QcRoute } from '../SmartGroupFieldRecipe.groups'
+import type { ManualSample } from '../SmartGroupManual.cohorts'
+import type { ManualPaletteEntry } from '../SmartGroup.types'
+import type { AutoGroupResult } from '../../types/auto-group'
+import type { SampleGroup } from '../../types'
 
 type GroupingWorkflow = 'auto' | 'manual'
 
 export interface Props {
-  modelValue: boolean
+  open: boolean
   samples?: string[]
   groups?: SampleGroup[]
   initialMode?: GroupingWorkflow
@@ -56,7 +56,7 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const emit = defineEmits<{
-  'update:modelValue': [value: boolean]
+  'update:open': [value: boolean]
   'apply': [result: AutoGroupResult]
 }>()
 
@@ -206,7 +206,7 @@ function applyManual(payload: { samples: ManualSample[] }) {
 }
 
 function close() {
-  emit('update:modelValue', false)
+  emit('update:open', false)
 }
 
 async function fetchExperimentData() {
@@ -242,7 +242,7 @@ async function fetchExperimentData() {
 // comes from the `samples` / `designData` / `experimentId` props exactly as
 // before — the redesign just drops the multi-step input/schema/merge UI.
 watch(
-  () => props.modelValue,
+  () => props.open,
   (open) => {
     if (!open) return
     activeWorkflow.value = props.initialMode
@@ -268,14 +268,14 @@ watch(
 <template>
   <BaseModal
     class="sg-host"
-    :model-value="modelValue"
+    :open="open"
     :closable="false"
     :close-on-overlay="false"
     :close-on-escape="false"
     size="lg"
-    @update:model-value="emit('update:modelValue', $event)"
+    @update:open="emit('update:open', $event)"
   >
-    <AlertBox v-if="experimentError" type="error" class="sg-host__error">
+    <AlertBox v-if="experimentError" tone="error" class="sg-host__error">
       {{ experimentError }}
     </AlertBox>
 

package/src/components/{BaseToggle.vue → internal/CheckboxSwitchInternal.vue}

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-/** Renders an on/off toggle switch with label, size, and keyboard interaction support. */
-import Tooltip from './Tooltip.vue'
+/** BaseCheckbox with `type="switch"`: an on/off switch with label, size, and keyboard interaction support. */
+import Tooltip from '../Tooltip.vue'
 
 interface Props {
   modelValue?: boolean
@@ -14,7 +14,7 @@ interface Props {
   disabled?: boolean
   size?: 'sm' | 'md' | 'lg'
   reverse?: boolean
-  variant?: 'default' | 'row'
+  layout?: 'inline' | 'row'
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -22,7 +22,7 @@ const props = withDefaults(defineProps<Props>(), {
   disabled: false,
   size: 'md',
   reverse: false,
-  variant: 'default',
+  layout: 'inline',
 })
 
 const emit = defineEmits<{
@@ -58,7 +58,7 @@ function iconStyle(): Record<string, string> {
   <div
     :class="[
       'mint-toggle',
-      `mint-toggle--${variant}`,
+      `mint-toggle--${layout}`,
       reverse ? 'mint-toggle--reverse' : '',
       disabled ? 'mint-toggle--disabled' : '',
       modelValue ? 'mint-toggle--checked' : '',
@@ -66,7 +66,7 @@ function iconStyle(): Record<string, string> {
     @click="toggle"
   >
     <span
-      v-if="variant === 'row' && icon"
+      v-if="layout === 'row' && icon"
       class="mint-toggle__row-icon"
       :style="iconStyle()"
       aria-hidden="true"
@@ -89,7 +89,7 @@ function iconStyle(): Record<string, string> {
       <span v-else class="mint-toggle__row-text-icon">{{ icon }}</span>
     </span>
     <span
-      v-if="variant === 'row' && label"
+      v-if="layout === 'row' && label"
       class="mint-toggle__copy"
     >
       <Tooltip
@@ -124,7 +124,7 @@ function iconStyle(): Record<string, string> {
       <span :class="['mint-toggle__knob', `mint-toggle__knob--${size}`]" />
     </div>
     <span
-      v-if="label && variant !== 'row'"
+      v-if="label && layout !== 'row'"
       :class="['mint-toggle__label', `mint-toggle__label--${size}`]"
     >
       {{ label }}

package/src/components/internal/DataStateInternal.vue

@@ -61,7 +61,7 @@ const spinnerSize = computed(() => (props.size === 'sm' ? 'sm' : props.size ===
       :title="title"
       :description="description"
       :icon-path="state === 'error' ? ERROR_ICON_PATH : iconPath"
-      :color="state === 'error' ? 'error' : 'muted'"
+      :tone="state === 'error' ? 'error' : 'neutral'"
       :size="size"
       :variant="variant"
       :action-label="actionLabel"

package/src/components/internal/DatePickerDateInternal.vue

@@ -0,0 +1,219 @@
+<script setup lang="ts">
+/** DatePicker type="date": input that opens a calendar dropdown for selecting a single date, with clearable support. */
+import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom'
+import { ref, computed, nextTick, onBeforeUnmount, watch, useTemplateRef } from 'vue'
+import { useCalendarGrid, type CalendarGridDay } from '../../composables/useCalendarGrid'
+import { useDropdownState } from '../../composables/useDropdownState'
+import { useFocusTrap } from '../../composables/useFocusTrap'
+import CalendarGridPanelInternal from './CalendarGridPanelInternal.vue'
+
+interface Props {
+  modelValue?: string
+  placeholder?: string
+  disabled?: boolean
+  invalid?: boolean
+  size?: 'sm' | 'md' | 'lg'
+  min?: string
+  max?: string
+  clearable?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+  invalid: false,
+  size: 'md',
+  clearable: true,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | undefined]
+}>()
+
+const dropdownRef = ref<HTMLElement | null>(null)
+const dropdownStyle = ref<Record<string, string>>({})
+const { isOpen, triggerRef, open, close, toggle } = useDropdownState({
+  rootRef: useTemplateRef<HTMLElement>('container'),
+  insideRefs: [dropdownRef],
+})
+// The panel is a non-modal dialog: Tab cycles inside it while it is open, and
+// focus returns to the input when it closes.
+useFocusTrap({ containerRef: dropdownRef, active: isOpen })
+const {
+  weekDays,
+  monthYear,
+  calendarDays,
+  formatDateValue,
+  setCurrentMonthFromDate,
+  prevMonth,
+  nextMonth,
+} = useCalendarGrid({
+  min: () => props.min,
+  max: () => props.max,
+})
+
+const selectedDate = computed(() => {
+  if (!props.modelValue) return null
+  const date = new Date(props.modelValue + 'T00:00:00')
+  return isNaN(date.getTime()) ? null : date
+})
+
+const displayValue = computed(() => (selectedDate.value ? formatDateValue(selectedDate.value) : ''))
+
+function selectDate(day: CalendarGridDay) {
+  if (day.isDisabled || props.disabled) return
+  emit('update:modelValue', formatDateValue(day.date))
+  close()
+}
+
+function clear() {
+  emit('update:modelValue', undefined)
+  close()
+}
+
+function toggleCalendar() {
+  if (props.disabled) return
+  toggle()
+}
+
+function handleTriggerKeydown(event: KeyboardEvent) {
+  if (props.disabled || isOpen.value) return
+  if (event.key === 'Enter' || event.key === ' ' || event.key === 'ArrowDown') {
+    event.preventDefault()
+    open()
+  }
+}
+
+// floating-ui keeps the panel anchored (flip/shift) while the page scrolls,
+// instead of the panel closing on every scroll or resize.
+let stopAutoUpdate: (() => void) | null = null
+
+async function updateDropdownPosition() {
+  const trigger = triggerRef.value
+  const panel = dropdownRef.value
+  if (!trigger || !panel) return
+
+  const { x, y } = await computePosition(trigger, panel, {
+    placement: 'bottom-start',
+    strategy: 'fixed',
+    middleware: [offset(4), flip(), shift({ padding: 8 })],
+  })
+  dropdownStyle.value = {
+    position: 'fixed',
+    top: `${y}px`,
+    left: `${x}px`,
+    zIndex: '9999',
+  }
+}
+
+function stopPositioning() {
+  stopAutoUpdate?.()
+  stopAutoUpdate = null
+}
+
+function startPositioning() {
+  const trigger = triggerRef.value
+  const panel = dropdownRef.value
+  if (!trigger || !panel) return
+  stopPositioning()
+  stopAutoUpdate = autoUpdate(trigger, panel, () => void updateDropdownPosition())
+}
+
+/** Moves focus into the calendar grid: selected day, else today, else the first day. */
+function focusCalendar() {
+  const panel = dropdownRef.value
+  if (!panel) return
+  const target =
+    panel.querySelector<HTMLElement>('.mint-date-picker__day--selected') ??
+    panel.querySelector<HTMLElement>('.mint-date-picker__day--today') ??
+    panel.querySelector<HTMLElement>('.mint-date-picker__day:not([disabled])')
+  target?.focus()
+}
+
+watch(isOpen, async (opened) => {
+  if (!opened) {
+    stopPositioning()
+    return
+  }
+  if (selectedDate.value) {
+    setCurrentMonthFromDate(selectedDate.value)
+  }
+  await nextTick()
+  startPositioning()
+  // A second tick so this focus lands after the focus trap's initial focus.
+  await nextTick()
+  focusCalendar()
+})
+
+onBeforeUnmount(stopPositioning)
+</script>
+
+<template>
+  <div ref="container" class="mint-date-picker">
+    <div class="mint-date-picker__input-wrapper">
+      <div class="mint-date-picker__icon">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="M8 2v4" /><path d="M16 2v4" /><rect width="18" height="18" x="3" y="4" rx="2" /><path d="M3 10h18" />
+        </svg>
+      </div>
+      <input
+        ref="triggerRef"
+        type="text"
+        readonly
+        aria-haspopup="dialog"
+        :aria-expanded="isOpen"
+        :value="displayValue"
+        :placeholder="placeholder || 'Select date'"
+        :disabled="disabled"
+        :class="[
+          'mint-date-picker__input',
+          `mint-date-picker__input--${size}`,
+          invalid ? 'mint-date-picker__input--error' : '',
+          disabled ? 'mint-date-picker__input--disabled' : '',
+        ]"
+        @click="toggleCalendar"
+        @keydown="handleTriggerKeydown"
+      />
+      <button
+        v-if="clearable && modelValue && !disabled"
+        type="button"
+        class="mint-date-picker__clear-btn"
+        aria-label="Clear date"
+        @click.stop="clear"
+      >
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="M18 6 6 18" /><path d="m6 6 12 12" />
+        </svg>
+      </button>
+    </div>
+
+    <Teleport to="body">
+      <Transition
+        enter-active-class="mint-date-picker__dropdown-enter-active"
+        enter-from-class="mint-date-picker__dropdown-enter-from"
+        enter-to-class="mint-date-picker__dropdown-enter-to"
+        leave-active-class="mint-date-picker__dropdown-leave-active"
+        leave-from-class="mint-date-picker__dropdown-leave-from"
+        leave-to-class="mint-date-picker__dropdown-leave-to"
+      >
+        <div
+          v-if="isOpen"
+          ref="dropdownRef"
+          class="mint-popover mint-date-picker__dropdown"
+          :style="dropdownStyle"
+          role="dialog"
+          aria-label="Date picker"
+        >
+          <CalendarGridPanelInternal
+            :week-days="weekDays"
+            :month-year="monthYear"
+            :days="calendarDays"
+            :selected-date="selectedDate"
+            @previous-month="prevMonth"
+            @next-month="nextMonth"
+            @select="selectDate"
+          />
+        </div>
+      </Transition>
+    </Teleport>
+  </div>
+</template>

package/src/components/{DateTimePicker.vue → internal/DatePickerDateTimeInternal.vue}

@@ -1,17 +1,17 @@
 <script setup lang="ts">
-/** Combined date and time picker with a dropdown calendar, time slots, and 12/24 h format support. */
+/** DatePicker type="datetime": combined date and time picker with a dropdown calendar, time slots, and 12/24 h format support. */
 import { computed, ref, watch, nextTick, useTemplateRef } from 'vue'
-import { useCalendarGrid, type CalendarGridDay } from '../composables/useCalendarGrid'
-import { useDropdownState } from '../composables/useDropdownState'
-import { useFocusTrap } from '../composables/useFocusTrap'
-import { formatTime, formatTimeSlot, generateTimeSlots, toMinutes } from '../composables/useTimeUtils'
-import CalendarGridPanelInternal from './internal/CalendarGridPanelInternal.vue'
+import { useCalendarGrid, type CalendarGridDay } from '../../composables/useCalendarGrid'
+import { useDropdownState } from '../../composables/useDropdownState'
+import { useFocusTrap } from '../../composables/useFocusTrap'
+import { formatTime, formatTimeSlot, generateTimeSlots, toMinutes } from '../../utils/time'
+import CalendarGridPanelInternal from './CalendarGridPanelInternal.vue'
 
 interface Props {
   modelValue?: string
   placeholder?: string
   disabled?: boolean
-  error?: boolean
+  invalid?: boolean
   size?: 'sm' | 'md' | 'lg'
   min?: string
   max?: string
@@ -24,7 +24,7 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
   placeholder: 'Select date & time',
   disabled: false,
-  error: false,
+  invalid: false,
   size: 'md',
   timeStep: 15,
   timeFormat: '24h',
@@ -76,17 +76,12 @@ const selectedTimeStr = computed(() => {
 
 const displayValue = computed(() => {
   if (!selectedDate.value) return ''
-  const dateStr = selectedDate.value.toLocaleDateString(props.locale, {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric',
-  })
   const timeStr = formatTime(
     selectedDate.value.getHours(),
     selectedDate.value.getMinutes(),
     props.timeFormat,
   )
-  return `${dateStr} ${timeStr}`
+  return `${formatDateValue(selectedDate.value)} ${timeStr}`
 })
 
 // Time slots
@@ -198,8 +193,8 @@ watch(isOpen, async (opened) => {
   <div ref="root" class="mint-datetime-picker">
     <div class="mint-datetime-picker__input-wrapper">
       <div class="mint-datetime-picker__icon-calendar">
-        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="M8 2v4" /><path d="M16 2v4" /><rect width="18" height="18" x="3" y="4" rx="2" /><path d="M3 10h18" />
         </svg>
       </div>
       <input
@@ -214,18 +209,13 @@ watch(isOpen, async (opened) => {
         :class="[
           'mint-datetime-picker__input',
           `mint-datetime-picker__input--${size}`,
-          error ? 'mint-datetime-picker__input--error' : '',
+          invalid ? 'mint-datetime-picker__input--error' : '',
           disabled ? 'mint-datetime-picker__input--disabled' : '',
         ]"
         aria-label="Select date and time"
         @click="toggleDropdown"
         @keydown="handleTriggerKeydown"
       />
-      <div class="mint-datetime-picker__icon-clock">
-        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
-        </svg>
-      </div>
     </div>
 
     <Transition

package/src/components/{TimePicker.vue → internal/DatePickerTimeInternal.vue}

@@ -1,20 +1,20 @@
 <script setup lang="ts">
-/** Input that opens a scrollable time-slot dropdown in 12h or 24h format, with min/max range and optional unavailable slots. */
+/** DatePicker type="time": 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 type { TimeSlotDisabledFn } from '../../types'
+import { useDropdownState } from '../../composables/useDropdownState'
 import {
   compareTime,
   findNearestTimeSlotIndex,
   formatTimeSlot,
   generateTimeSlots,
-} from '../composables/useTimeUtils'
+} from '../../utils/time'
 
 interface Props {
   modelValue?: string
   placeholder?: string
   disabled?: boolean
-  error?: boolean
+  invalid?: boolean
   size?: 'sm' | 'md' | 'lg'
   min?: string
   max?: string
@@ -28,7 +28,7 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
   placeholder: 'Select time',
   disabled: false,
-  error: false,
+  invalid: false,
   size: 'md',
   step: 15,
   format: '24h',
@@ -210,6 +210,11 @@ watch(isOpen, (open) => {
 <template>
   <div ref="root" class="mint-time-picker" @keydown="handleKeydown">
     <div class="mint-time-picker__input-wrapper">
+      <div class="mint-time-picker__icon">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <circle cx="12" cy="12" r="10" /><path d="M12 6v6l4 2" />
+        </svg>
+      </div>
       <input
         ref="trigger"
         type="text"
@@ -220,7 +225,7 @@ watch(isOpen, (open) => {
         :class="[
           'mint-time-picker__input',
           `mint-time-picker__input--${size}`,
-          error ? 'mint-time-picker__input--error' : '',
+          invalid ? 'mint-time-picker__input--error' : '',
           disabled ? 'mint-time-picker__input--disabled' : '',
         ]"
         role="combobox"
@@ -241,11 +246,6 @@ watch(isOpen, (open) => {
           <path d="M18 6 6 18" /><path d="m6 6 12 12" />
         </svg>
       </button>
-      <div class="mint-time-picker__icon">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <circle cx="12" cy="12" r="10" /><path d="M12 6v6l4 2" />
-        </svg>
-      </div>
     </div>
 
     <Transition
@@ -284,9 +284,6 @@ watch(isOpen, (open) => {
           >
             <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/internal/FilePickerListInternal.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { computed, nextTick, ref } from 'vue'
-import IconButton from '../IconButton.vue'
+import { computed, h, nextTick, ref, type FunctionalComponent } from 'vue'
 import BaseButton from '../BaseButton.vue'
 import BaseCheckbox from '../BaseCheckbox.vue'
 import Skeleton from '../Skeleton.vue'
@@ -15,6 +14,9 @@ import type {
   PickerView,
 } from '../../types/filePicker'
 
+const DisclosureTriangle: FunctionalComponent = () =>
+  h('svg', { viewBox: '0 0 16 16', fill: 'currentColor' }, [h('path', { d: 'm6 3 5 5-5 5z' })])
+
 const props = defineProps<{
   emptyTitle?: string
   view: PickerView
@@ -241,26 +243,18 @@ function parts(name: string) {
         </span>
         <span class="mint-picker__cell mint-picker__cell--name">
           <template v-if="tree">
-            <IconButton
+            <BaseButton
               v-if="row.node.kind === 'folder' && row.node.hasChildren !== false && !reason(row.node)"
               size="sm"
               variant="ghost"
-              class="mint-picker__disclosure"
+              :class="['mint-picker__disclosure', { 'mint-picker__chevron--open': row.expanded }]"
+              :icon="DisclosureTriangle"
               :label="`${row.expanded ? 'Collapse' : 'Expand'} ${row.node.name}`"
               tabindex="-1"
               :loading="row.loading"
               @click.stop="emit('expand', row.node)"
               @dblclick.stop
-            >
-              <svg
-                viewBox="0 0 16 16"
-                fill="currentColor"
-                aria-hidden="true"
-                :class="{ 'mint-picker__chevron--open': row.expanded }"
-              >
-                <path d="m6 3 5 5-5 5z" />
-              </svg>
-            </IconButton>
+            />
             <span v-else class="mint-picker__disclosure" />
           </template>
           <svg

package/src/components/{FormActions.vue → internal/FormActionsInternal.vue}

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 /**
- * Action bar rendered at the bottom of a FormBuilder.
+ * Action bar rendered at the bottom of a FormBuilder (`actions` in the control model).
  *
  * Supports two modes:
  * - Flat form: shows an optional Cancel button and a Submit button.
@@ -10,7 +10,7 @@
  * The `canProceed` prop gates the primary action (Next or Submit) to prevent
  * advancing when the current step has validation errors.
  */
-import BaseButton from './BaseButton.vue'
+import BaseButton from '../BaseButton.vue'
 
 interface Props {
   isWizard?: boolean

package/src/components/internal/FormFieldRendererInternal.vue

@@ -40,7 +40,7 @@ const componentProps = computed<Record<string, unknown>>(() => {
   if (!isChoiceField.value) return props.resolvedProps
 
   return {
-    variant: 'row',
+    layout: 'row',
     label: props.field.label,
     description: props.field.hint,
     icon: props.field.icon,