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

package/src/components/ConcentrationInput.vue

@@ -33,7 +33,13 @@ const emit = defineEmits<{
   'update:modelValue': [value: ConcentrationValue | undefined]
 }>()
 
-const { unitCategories, getConversionHint } = useConcentrationUnits()
+const { unitCategories, convert, getBaseUnit, isMolarity, isMassVolume } = useConcentrationUnits()
+
+/** Scale factor to the category base unit; UnitInput uses it for menu previews and the nearest-unit hint. */
+function factorOf(unit: ConcentrationUnit): number | undefined {
+  if (!props.showConversion || !(isMolarity(unit) || isMassVolume(unit))) return undefined
+  return convert(1, unit, getBaseUnit(unit)) ?? undefined
+}
 
 // Filter categories based on allowedUnits
 const filteredCategories = computed(() => {
@@ -60,6 +66,7 @@ const unitOptions = computed(() =>
       value: unit,
       label: unit,
       group: filteredCategories.value.length > 1 ? category.label : undefined,
+      factor: factorOf(unit),
     }))
   )
 )
@@ -68,12 +75,6 @@ const unitOptions = computed(() =>
 const currentValue = computed(() => props.modelValue?.value)
 const currentUnit = computed(() => props.modelValue?.unit || availableUnits.value[0] || 'µM')
 
-// Conversion hint
-const conversionHint = computed(() => {
-  if (!props.showConversion || !props.modelValue) return null
-  return getConversionHint(props.modelValue)
-})
-
 function handleValueUpdate(value: number | undefined) {
   if (value === undefined || isNaN(value)) {
     emit('update:modelValue', undefined)
@@ -134,12 +135,5 @@ watch(availableUnits, (units) => {
       @update:model-value="handleValueUpdate"
       @update:unit="handleUnitUpdate"
     />
-
-    <div
-      v-if="showConversion && conversionHint"
-      class="mint-concentration-input__conversion"
-    >
-      {{ conversionHint }}
-    </div>
   </div>
 </template>

package/src/components/ControlWorkspaceView.vue

@@ -75,7 +75,7 @@ interface Props {
   topBarVariant?: TopBarVariant
   /** AppSidebar/AppLayout sidebar width. */
   sidebarWidth?: string
-  /** AppSidebar visual preset. `analysis` matches the LEAF-style MINT analysis sidebar design language. */
+  /** @deprecated No-op, removed in MINT 1.4. AppSidebar has one look now; the former `analysis` preset is the default. */
   sidebarVariant?: ControlWorkspaceSidebarVariant
   /** Convert the sidebar into an SDK-owned mobile overlay below the AppLayout breakpoint. */
   responsiveSidebar?: boolean

package/src/components/DataFrame.story.vue

@@ -6,8 +6,8 @@ import type { DataFrameColumn, PaginationState } from '../types'
 const columns: DataFrameColumn[] = [
   { key: 'id', label: 'ID', sortable: true, width: 60, align: 'center' },
   { key: 'compound', label: 'Compound', sortable: true },
-  { key: 'concentration', label: 'Conc. (uM)', sortable: true, align: 'right' },
-  { key: 'response', label: 'Response (%)', sortable: true, align: 'right' },
+  { key: 'concentration', label: 'Conc.', unit: 'µM', type: 'number', sortable: true },
+  { key: 'response', label: 'Response', unit: '%', type: 'number', sortable: true },
   { key: 'well', label: 'Well', align: 'center' },
   { key: 'status', label: 'Status' },
 ]
@@ -28,6 +28,35 @@ const data = [
 ]
 
 const selectedKeys = ref<(string | number)[]>([])
+
+// Case-sensitive units stay as written; numeric columns align on the decimal (2a).
+const measureData = [
+  { sample: 'A-01', rt: 2.41, mz: 180.0634, conc: 12.5, volume: 1.5 },
+  { sample: 'B-03', rt: 7.9, mz: 146.0459, conc: 3.25, volume: 0.25 },
+  { sample: 'C-12', rt: 10.6, mz: 132.0768, conc: 128, volume: 12 },
+  { sample: 'D-04', rt: 12.07, mz: 89.0239, conc: 0.8, volume: 2 },
+]
+
+interface UnitsState {
+  precision: number
+  numeric: boolean
+  concUnit: string
+}
+
+function initUnitsState(): UnitsState {
+  return { precision: 2, numeric: true, concUnit: 'µM' }
+}
+
+function measureColumns(state: UnitsState): DataFrameColumn[] {
+  const type = state.numeric ? 'number' : 'text'
+  return [
+    { key: 'sample', label: 'Sample' },
+    { key: 'rt', label: 'RT', unit: 'min', type, precision: state.precision, sortable: true },
+    { key: 'mz', label: 'Mass', unit: 'm/z', type, precision: 4 },
+    { key: 'conc', label: 'Conc.', unit: state.concUnit || undefined, type, precision: state.precision },
+    { key: 'volume', label: 'Volume', unit: 'mL', type, precision: state.precision },
+  ]
+}
 const pagination = ref<PaginationState>({ page: 1, pageSize: 5, total: data.length })
 </script>
 
@@ -73,6 +102,20 @@ const pagination = ref<PaginationState>({ page: 1, pageSize: 5, total: data.leng
       </template>
     </Variant>
 
+    <Variant title="Units and Numeric Columns" :init-state="initUnitsState">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 900px; margin: 0 auto;">
+          <DataFrame :data="measureData" :columns="measureColumns(state)" row-key="sample" />
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstNumber v-model="state.precision" title="Precision" :min="0" :max="6" />
+        <HstCheckbox v-model="state.numeric" title="type: 'number'" />
+        <HstText v-model="state.concUnit" title="Conc. unit" />
+      </template>
+    </Variant>
+
     <Variant title="Sortable with Search">
       <div style="padding: 2rem; max-width: 900px; margin: 0 auto;">
         <DataFrame

package/src/components/DataFrame.vue

@@ -5,6 +5,7 @@ import type { DataFrameColumn, SortState, PaginationState } from '../types'
 import { useSortedItems } from '../composables/useSortedItems'
 import { useTextSearch } from '../composables/useTextSearch'
 import { useListSelection } from '../composables/useListSelection'
+import BaseCheckbox from './BaseCheckbox.vue'
 import DataStateInternal from './internal/DataStateInternal.vue'
 import LoadingSpinner from './LoadingSpinner.vue'
 import { tableDensityToSize, tryUseSettingsStore } from '../stores/settings'
@@ -154,9 +155,15 @@ function formatCell(col: DataFrameColumn, row: Record<string, unknown>, index: n
   const value = getCellValue(row, col.key)
   if (col.formatter) return col.formatter(value, row, index)
   if (value === null || value === undefined) return ''
+  if (typeof value === 'number' && col.precision !== undefined) return value.toFixed(col.precision)
   return String(value)
 }
 
+/** Explicit `align` wins; numeric columns default to the right (2a). */
+function columnAlign(col: DataFrameColumn): 'left' | 'center' | 'right' {
+  return col.align ?? (col.type === 'number' ? 'right' : 'left')
+}
+
 const textSearch = useTextSearch({
   items: () => props.data,
   query: searchQuery,
@@ -398,12 +405,13 @@ const wrapperStyle = computed(() => {
         <thead :class="['mint-dataframe__thead', { 'mint-dataframe__thead--sticky': stickyHeader }]">
           <tr>
             <th v-if="selectable" class="mint-dataframe__th mint-dataframe__th--checkbox">
-              <input
-                type="checkbox"
-                :checked="allSelected"
+              <BaseCheckbox
+                :model-value="allSelected"
                 :indeterminate="selectIndeterminate"
+                size="sm"
+                aria-label="Select all rows"
                 class="mint-dataframe__checkbox"
-                @change="toggleSelectAll"
+                @update:model-value="toggleSelectAll"
               />
             </th>
             <th
@@ -412,7 +420,7 @@ const wrapperStyle = computed(() => {
               :class="[
                 'mint-dataframe__th',
                 `mint-dataframe__th--${size}`,
-                `mint-dataframe__th--align-${col.align ?? 'left'}`,
+                `mint-dataframe__th--align-${columnAlign(col)}`,
                 {
                   'mint-dataframe__th--sortable': isColumnSortable(col),
                   'mint-dataframe__th--sorted': activeSort?.key === col.key && activeSort?.direction,
@@ -431,7 +439,8 @@ const wrapperStyle = computed(() => {
               >
               <slot :name="`header-${col.key}`" :column="col">
                 <div class="mint-dataframe__th-content">
-                  <span>{{ col.label }}</span>
+                  <span class="mint-dataframe__th-label">{{ col.label }}</span>
+                  <span v-if="col.unit" class="mint-dataframe__th-unit">{{ col.unit }}</span>
                   <svg
                     v-if="isColumnSortable(col)"
                     :class="[
@@ -448,7 +457,9 @@ const wrapperStyle = computed(() => {
                     stroke-linecap="round"
                     stroke-linejoin="round"
                   >
-                    <path d="m21 16-4 4-4-4" /><path d="M17 20V4" /><path d="m3 8 4-4 4 4" /><path d="M7 4v16" />
+                    <path v-if="activeSort?.key === col.key && activeSort?.direction === 'asc'" d="M12 19V5m-6 6 6-6 6 6" />
+                    <path v-else-if="activeSort?.key === col.key && activeSort?.direction === 'desc'" d="M12 5v14m6-6-6 6-6-6" />
+                    <g v-else><path d="m21 16-4 4-4-4" /><path d="M17 20V4" /><path d="m3 8 4-4 4 4" /><path d="M7 4v16" /></g>
                   </svg>
                 </div>
               </slot>
@@ -493,12 +504,13 @@ const wrapperStyle = computed(() => {
             @keydown="handleRowKeydown($event, row, rowIndex)"
           >
             <td v-if="selectable" class="mint-dataframe__td mint-dataframe__td--checkbox">
-              <input
-                type="checkbox"
-                :checked="rowSelection.isSelected(getRowKey(row, rowIndex))"
+              <BaseCheckbox
+                :model-value="rowSelection.isSelected(getRowKey(row, rowIndex))"
+                size="sm"
+                aria-label="Select row"
                 class="mint-dataframe__checkbox"
                 @click.stop
-                @change="toggleRowSelect(getRowKey(row, rowIndex))"
+                @update:model-value="toggleRowSelect(getRowKey(row, rowIndex))"
               />
             </td>
             <td
@@ -507,8 +519,11 @@ const wrapperStyle = computed(() => {
               :class="[
                 'mint-dataframe__td',
                 `mint-dataframe__td--${size}`,
-                `mint-dataframe__td--align-${col.align ?? 'left'}`,
-                { 'mint-dataframe__td--ellipsis': col.ellipsis },
+                `mint-dataframe__td--align-${columnAlign(col)}`,
+                {
+                  'mint-dataframe__td--ellipsis': col.ellipsis,
+                  'mint-dataframe__td--number': col.type === 'number',
+                },
               ]"
               @click.stop="handleCellClick(row, col, rowIndex)"
             >

package/src/components/DatePicker.story.vue

@@ -3,6 +3,11 @@ import DatePicker from './DatePicker.vue'
 
 const sizes = ['sm', 'md', 'lg'] as const
 
+// A day in the current month that is not today, so "today" and "selected" show side by side.
+const now = new Date()
+const nearDay = new Date(now.getFullYear(), now.getMonth(), now.getDate() > 7 ? now.getDate() - 7 : now.getDate() + 7)
+const nearDayValue = `${nearDay.getFullYear()}-${String(nearDay.getMonth() + 1).padStart(2, '0')}-${String(nearDay.getDate()).padStart(2, '0')}`
+
 function initPlayground() {
   return {
     value: '2026-04-22',
@@ -115,5 +120,11 @@ function initPlayground() {
         />
       </div>
     </Variant>
+
+    <Variant title="Today and Selected">
+      <div style="padding: 2rem; max-width: 400px; margin: 0 auto; min-height: 24rem;">
+        <DatePicker :model-value="nearDayValue" />
+      </div>
+    </Variant>
   </Story>
 </template>

package/src/components/DatePicker.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 /** 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 } from 'vue'
+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'
@@ -31,7 +31,8 @@ const emit = defineEmits<{
 
 const dropdownRef = ref<HTMLElement | null>(null)
 const dropdownStyle = ref<Record<string, string>>({})
-const { isOpen, rootRef: containerRef, triggerRef, open, close, toggle } = useDropdownState({
+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
@@ -117,7 +118,6 @@ async function updateDropdownPosition() {
     position: 'fixed',
     top: `${y}px`,
     left: `${x}px`,
-    width: `${Math.max(trigger.getBoundingClientRect().width, 288)}px`,
     zIndex: '9999',
   }
 }
@@ -165,7 +165,7 @@ onBeforeUnmount(stopPositioning)
 </script>
 
 <template>
-  <div ref="containerRef" class="mint-date-picker">
+  <div ref="container" class="mint-date-picker">
     <div class="mint-date-picker__input-wrapper">
       <input
         ref="triggerRef"
@@ -204,7 +204,7 @@ onBeforeUnmount(stopPositioning)
         <div
           v-if="isOpen"
           ref="dropdownRef"
-          class="mint-date-picker__dropdown"
+          class="mint-popover mint-date-picker__dropdown"
           :style="dropdownStyle"
           role="dialog"
           aria-label="Date picker"

package/src/components/DateTimePicker.story.vue

@@ -26,7 +26,7 @@ function initState() {
   <Story title="Scheduling/DateTimePicker">
     <Variant title="Playground" :init-state="initState">
       <template #default="{ state }">
-        <div style="padding: 2rem; max-width: 400px;">
+        <div style="padding: 2rem; max-width: 400px; min-height: 36rem;">
           <DateTimePicker
             v-model="state.modelValue"
             :placeholder="state.placeholder"

package/src/components/DateTimePicker.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 /** Combined date and time picker with a dropdown calendar, time slots, and 12/24 h format support. */
-import { computed, ref, watch, nextTick } from 'vue'
+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'
@@ -37,7 +37,10 @@ const emit = defineEmits<{
 }>()
 
 const dropdownRef = ref<HTMLElement | null>(null)
-const { isOpen, rootRef, triggerRef, open, close, toggle } = useDropdownState()
+const { isOpen, open, close, toggle } = useDropdownState({
+  rootRef: useTemplateRef<HTMLElement>('root'),
+  triggerRef: useTemplateRef<HTMLElement>('trigger'),
+})
 // Non-modal dialog: Tab stays inside the panel, focus returns to the input on close.
 useFocusTrap({ containerRef: dropdownRef, active: isOpen })
 const {
@@ -192,7 +195,7 @@ watch(isOpen, async (opened) => {
 </script>
 
 <template>
-  <div ref="rootRef" class="mint-datetime-picker">
+  <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">
@@ -200,7 +203,7 @@ watch(isOpen, async (opened) => {
         </svg>
       </div>
       <input
-        ref="triggerRef"
+        ref="trigger"
         type="text"
         readonly
         aria-haspopup="dialog"
@@ -236,7 +239,7 @@ watch(isOpen, async (opened) => {
       <div
         v-if="isOpen"
         ref="dropdownRef"
-        class="mint-datetime-picker__dropdown"
+        class="mint-popover mint-datetime-picker__dropdown"
         role="dialog"
         aria-label="Date and time picker"
       >

package/src/components/Divider.story.vue

@@ -43,7 +43,7 @@ const spacings: DividerSpacing[] = ['sm', 'md', 'lg']
     <Variant title="With Label">
       <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
         <p style="margin: 0; color: var(--text-primary, #1e293b);">Section A</p>
-        <Divider label="OR" />
+        <Divider label="or" />
         <p style="margin: 0; color: var(--text-primary, #1e293b);">Section B</p>
       </div>
     </Variant>

package/src/components/DoseCalculator.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
 /** Tabbed dosing calculator supporting single dilution, serial dilution, and unit conversion, with optional direct assignment to selected plate wells. */
 import { ref, computed, watch } from 'vue'
+import BaseButton from './BaseButton.vue'
+import BaseInput from './BaseInput.vue'
 import ConcentrationInput from './ConcentrationInput.vue'
+import FormField from './FormField.vue'
 import {
   useConcentrationUnits,
   type ConcentrationValue,
@@ -223,25 +226,23 @@ watch(activeMode, (mode) => {
       class="mint-dose-calculator__form"
       role="tabpanel"
     >
-      <div class="mint-dose-calculator__field">
-        <label class="mint-dose-calculator__field-label">Stock Concentration</label>
+      <FormField label="Stock Concentration">
         <ConcentrationInput
           v-model="stockConcentration"
           :disabled="disabled"
           :show-conversion="false"
-          size="md"
+          size="sm"
         />
-      </div>
+      </FormField>
 
-      <div class="mint-dose-calculator__field">
-        <label class="mint-dose-calculator__field-label">Final Concentration</label>
+      <FormField label="Final Concentration">
         <ConcentrationInput
           v-model="finalConcentration"
           :disabled="disabled"
           :show-conversion="false"
-          size="md"
+          size="sm"
         />
-      </div>
+      </FormField>
 
       <DoseCalculatorVolumeField
         v-model="finalVolume"
@@ -286,44 +287,40 @@ watch(activeMode, (mode) => {
       class="mint-dose-calculator__form"
       role="tabpanel"
     >
-      <div class="mint-dose-calculator__field">
-        <label class="mint-dose-calculator__field-label">Starting Concentration</label>
+      <FormField label="Starting Concentration">
         <ConcentrationInput
           v-model="serialStartConcentration"
           :disabled="disabled"
           :show-conversion="false"
-          size="md"
+          size="sm"
         />
-      </div>
+      </FormField>
 
-      <div class="mint-dose-calculator__field-row">
-        <div class="mint-dose-calculator__field">
-          <label class="mint-dose-calculator__field-label">Dilution Factor</label>
-          <div class="mint-dose-calculator__input-wrapper">
-            <input
-              v-model.number="serialDilutionFactor"
-              type="number"
-              :disabled="disabled"
-              class="mint-dose-calculator__input"
-              min="1.1"
-              step="0.1"
-            />
-            <span class="mint-dose-calculator__unit-suffix">×</span>
-          </div>
-        </div>
-
-        <div class="mint-dose-calculator__field">
-          <label class="mint-dose-calculator__field-label">Dilutions</label>
-          <input
-            v-model.number="serialNumberOfDilutions"
-            type="number"
-            :disabled="disabled"
-            class="mint-dose-calculator__input"
-            min="1"
-            max="24"
-          />
-        </div>
-      </div>
+      <FormField label="Dilution Factor" layout="row">
+        <BaseInput
+          type="number"
+          size="sm"
+          :model-value="serialDilutionFactor"
+          :disabled="disabled"
+          :min="1.1"
+          :step="0.1"
+          @update:model-value="serialDilutionFactor = Number($event ?? 0)"
+        >
+          <template #suffix>×</template>
+        </BaseInput>
+      </FormField>
+
+      <FormField label="Dilutions" layout="row">
+        <BaseInput
+          type="number"
+          size="sm"
+          :model-value="serialNumberOfDilutions"
+          :disabled="disabled"
+          :min="1"
+          :max="24"
+          @update:model-value="serialNumberOfDilutions = Number($event ?? 0)"
+        />
+      </FormField>
 
       <DoseCalculatorVolumeField
         v-model="serialVolumePerWell"
@@ -366,15 +363,14 @@ watch(activeMode, (mode) => {
       class="mint-dose-calculator__form"
       role="tabpanel"
     >
-      <div class="mint-dose-calculator__field">
-        <label class="mint-dose-calculator__field-label">Input Concentration</label>
+      <FormField label="Input Concentration">
         <ConcentrationInput
           :disabled="disabled"
           :molecular-weight="molecularWeight"
           :show-conversion="true"
-          size="md"
+          size="sm"
         />
-      </div>
+      </FormField>
 
       <div
         v-if="!molecularWeight"
@@ -396,17 +392,14 @@ watch(activeMode, (mode) => {
 
     <!-- Apply to wells button -->
     <div v-if="hasTargetWells" class="mint-dose-calculator__form">
-      <button
-        type="button"
-        class="mint-dose-calculator__apply-btn"
+      <BaseButton
+        variant="primary"
+        full-width
         :disabled="!canApplyToWells || disabled"
         @click="handleApplyToWells"
       >
-        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-        </svg>
         Apply to {{ targetWells?.length }} selected well{{ targetWells?.length === 1 ? '' : 's' }}
-      </button>
+      </BaseButton>
     </div>
   </div>
 </template>

package/src/components/DoseCalculatorVolumeField.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
-/** Number + unit control used by DoseCalculator volume fields. */
+/** Volume field for DoseCalculator: a FormField row around a UnitInput with the volume units. */
+import { computed } from 'vue'
 import type { VolumeUnit, VolumeValue } from '../composables/useDoseCalculator'
+import FormField from './FormField.vue'
+import UnitInput from './UnitInput.vue'
 
 interface Props {
   label: string
@@ -17,45 +20,29 @@ const emit = defineEmits<{
   'update:modelValue': [value: VolumeValue]
 }>()
 
-function handleValueInput(event: Event) {
-  const input = event.target as HTMLInputElement
-  const value = parseFloat(input.value)
-  if (Number.isNaN(value)) return
+const unitOptions = computed(() => props.units.map((unit) => ({ value: unit, label: unit })))
+
+function handleValue(value: number | undefined) {
+  if (value === undefined) return
   emit('update:modelValue', { ...props.modelValue, value })
 }
 
-function handleUnitChange(event: Event) {
-  const select = event.target as HTMLSelectElement
-  emit('update:modelValue', {
-    ...props.modelValue,
-    unit: select.value as VolumeUnit,
-  })
+function handleUnit(unit: string) {
+  emit('update:modelValue', { ...props.modelValue, unit: unit as VolumeUnit })
 }
 </script>
 
 <template>
-  <div class="mint-dose-calculator__field">
-    <label class="mint-dose-calculator__field-label">{{ label }}</label>
-    <div class="mint-dose-calculator__field-row">
-      <input
-        type="number"
-        :value="modelValue.value"
-        :disabled="disabled"
-        class="mint-dose-calculator__input"
-        min="0"
-        step="any"
-        @input="handleValueInput"
-      />
-      <select
-        :value="modelValue.unit"
-        :disabled="disabled"
-        class="mint-dose-calculator__select"
-        @change="handleUnitChange"
-      >
-        <option v-for="unit in units" :key="unit" :value="unit">
-          {{ unit }}
-        </option>
-      </select>
-    </div>
-  </div>
+  <FormField :label="label" layout="row">
+    <UnitInput
+      size="sm"
+      :model-value="modelValue.value"
+      :unit="modelValue.unit"
+      :units="unitOptions"
+      :min="0"
+      :disabled="disabled"
+      @update:model-value="handleValue"
+      @update:unit="handleUnit"
+    />
+  </FormField>
 </template>

package/src/components/DoseDesignWorkspaceView.vue

@@ -73,7 +73,7 @@ interface Props {
   topBarVariant?: TopBarVariant
   /** AppSidebar/AppLayout sidebar width. */
   sidebarWidth?: string
-  /** AppSidebar visual preset. `analysis` matches the LEAF-style MINT analysis sidebar design language. */
+  /** @deprecated No-op, removed in MINT 1.4. AppSidebar has one look now; the former `analysis` preset is the default. */
   sidebarVariant?: DoseDesignSidebarVariant
   /** Convert the sidebar into an SDK-owned mobile overlay below the AppLayout breakpoint. */
   responsiveSidebar?: boolean

package/src/components/EmptyState.story.vue

@@ -81,7 +81,7 @@ const sizes: EmptyStateSize[] = ['sm', 'md', 'lg']
         <EmptyState
           v-for="color in colors"
           :key="color"
-          :title="`${color.charAt(0).toUpperCase() + color.slice(1)} state`"
+          :title="color === 'cta' ? 'CTA state' : `${color.charAt(0).toUpperCase() + color.slice(1)} state`"
           description="Example description text."
           :color="color"
           size="sm"
@@ -92,7 +92,7 @@ const sizes: EmptyStateSize[] = ['sm', 'md', 'lg']
     <Variant title="All Sizes">
       <div style="padding: 2rem; display: flex; flex-direction: column; gap: 3rem;">
         <div v-for="size in sizes" :key="size">
-          <p style="margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.05em;">
+          <p style="margin: 0 0 0.5rem; font-size: 0.75rem; color: var(--text-muted); font-family: var(--font-mono);">
             {{ size }}
           </p>
           <EmptyState
@@ -112,8 +112,8 @@ const sizes: EmptyStateSize[] = ['sm', 'md', 'lg']
           description="Drag and drop CSV or Excel files, or click below to browse."
           color="cta"
         >
-          <div style="margin-top: 1rem; padding: 2rem; border: 2px dashed var(--border-color, #e2e8f0); border-radius: 0.5rem; text-align: center;">
-            <p style="margin: 0; color: var(--text-muted, #94a3b8); font-size: 0.875rem;">
+          <div style="margin-top: 1rem; padding: 2rem; border: 2px dashed var(--border-color); border-radius: 0.5rem; text-align: center;">
+            <p style="margin: 0; color: var(--text-muted); font-size: 0.875rem;">
               Drop files here or click to upload
             </p>
           </div>

package/src/components/EmptyState.vue

@@ -56,10 +56,12 @@ const defaultIconPaths = [
     <div class="mint-empty-state__body">
       <h3 v-if="title" class="mint-empty-state__title">{{ title }}</h3>
       <p v-if="description" class="mint-empty-state__description">{{ description }}</p>
-      <slot />
+      <div v-if="$slots.default" class="mint-empty-state__content">
+        <slot />
+      </div>
     </div>
     <div v-if="actionLabel" class="mint-empty-state__action">
-      <BaseButton @click="emit('action')">
+      <BaseButton variant="secondary" @click="emit('action')">
         {{ actionLabel }}
       </BaseButton>
     </div>