@morscherlab/mint-sdk 1.0.45 → 1.0.46

package/dist/index.js

@@ -1,4 +1,4 @@
-import { $ as LoadingSpinner_default, A as ReagentEditor_default, B as Avatar_default, C as formatSequenceRemaining, Ct as Calendar_default, D as ScientificNumber_default, Dt as ColorSlider_default, E as ChemicalFormula_default, Et as BaseTabs_default, F as BioTemplatePackWorkspaceView_default, G as DoseDesignWorkspaceView_default, H as StatusIndicator_default, I as BioTemplateExperimentWorkspaceView_default, J as ScheduleCalendar_default, K as ControlWorkspaceView_default, L as BioTemplateRenderer_default, M as GroupAssigner_default, N as RackEditor_default, O as ProtocolStepEditor_default, P as BioTemplatePresetWorkspaceView_default, Q as SmartGroupFieldRecipe_default, R as ChartContainer_default, S as formatSequenceEta, St as DataFrame_default, T as sequenceSamplesRemaining, Tt as SegmentedControl_default, U as Divider_default, V as ProgressBar_default, W as AppContainer_default, X as AutoGroupModal_default, Y as SampleSelector_default, Z as SmartGroupManual_default, _ as InstrumentStateBadge_default, _t as CollapsibleCard_default, a as ExperimentDataViewer_default, at as DoseCalculator_default, b as estimateSequenceFinishDate, bt as AppToastContainer_default, c as LcmsSequenceTable_default, ct as AppLayout_default, d as extractLcmsCommonPrefix, dt as FormActions_default, et as ReagentList_default, f as extractLcmsSampleName, ft as StepWizard_default, g as InstrumentStatusCard_default, gt as PluginIcon_default, h as reconstructLcmsPlateCellsFromSequenceItems, ht as AppAvatarMenu_default, i as TimeRangeInput_default, it as ExperimentTimeline_default, j as SmartGroupModal_default, k as SampleHierarchyTree_default, l as DEFAULT_LCMS_SEQUENCE_COLUMNS, lt as AppSidebar_default, m as lcmsWellIdFromPosition, mt as AppPluginSwitcher_default, n as FitPanel_default, nt as SampleLegend_default, o as BatchProgressList_default, ot as PluginWorkspaceView_default, p as inferLcmsPlateTypeFromWellIds, pt as AppTopBar_default, q as ComponentBindingRenderer_default, r as ResourceCard_default, rt as WellPlate_default, s as AuditTrail_default, st as MobileSupportGate_default, tt as PlateMapEditor_default, u as basenameFromWindowsPath, ut as FormBuilder_default, v as InstrumentAlertLog_default, vt as ThemeToggle_default, w as sequenceProgressPercent, wt as DropdownButton_default, x as estimateSequenceRemainingSeconds, xt as AlertBox_default, y as SequenceProgressBar_default, yt as IconButton_default, z as Breadcrumb_default } from "./components-DjfatNJv.js";
+import { $ as LoadingSpinner_default, A as ReagentEditor_default, B as Avatar_default, C as formatSequenceRemaining, Ct as Calendar_default, D as ScientificNumber_default, Dt as ColorSlider_default, E as ChemicalFormula_default, Et as BaseTabs_default, F as BioTemplatePackWorkspaceView_default, G as DoseDesignWorkspaceView_default, H as StatusIndicator_default, I as BioTemplateExperimentWorkspaceView_default, J as ScheduleCalendar_default, K as ControlWorkspaceView_default, L as BioTemplateRenderer_default, M as GroupAssigner_default, N as RackEditor_default, O as ProtocolStepEditor_default, P as BioTemplatePresetWorkspaceView_default, Q as SmartGroupFieldRecipe_default, R as ChartContainer_default, S as formatSequenceEta, St as DataFrame_default, T as sequenceSamplesRemaining, Tt as SegmentedControl_default, U as Divider_default, V as ProgressBar_default, W as AppContainer_default, X as AutoGroupModal_default, Y as SampleSelector_default, Z as SmartGroupManual_default, _ as InstrumentStateBadge_default, _t as CollapsibleCard_default, a as ExperimentDataViewer_default, at as DoseCalculator_default, b as estimateSequenceFinishDate, bt as AppToastContainer_default, c as LcmsSequenceTable_default, ct as AppLayout_default, d as extractLcmsCommonPrefix, dt as FormActions_default, et as ReagentList_default, f as extractLcmsSampleName, ft as StepWizard_default, g as InstrumentStatusCard_default, gt as PluginIcon_default, h as reconstructLcmsPlateCellsFromSequenceItems, ht as AppAvatarMenu_default, i as TimeRangeInput_default, it as ExperimentTimeline_default, j as SmartGroupModal_default, k as SampleHierarchyTree_default, l as DEFAULT_LCMS_SEQUENCE_COLUMNS, lt as AppSidebar_default, m as lcmsWellIdFromPosition, mt as AppPluginSwitcher_default, n as FitPanel_default, nt as SampleLegend_default, o as BatchProgressList_default, ot as PluginWorkspaceView_default, p as inferLcmsPlateTypeFromWellIds, pt as AppTopBar_default, q as ComponentBindingRenderer_default, r as ResourceCard_default, rt as WellPlate_default, s as AuditTrail_default, st as MobileSupportGate_default, tt as PlateMapEditor_default, u as basenameFromWindowsPath, ut as FormBuilder_default, v as InstrumentAlertLog_default, vt as ThemeToggle_default, w as sequenceProgressPercent, wt as DropdownButton_default, x as estimateSequenceRemainingSeconds, xt as AlertBox_default, y as SequenceProgressBar_default, yt as IconButton_default, z as Breadcrumb_default } from "./components-C7UFkNIp.js";
 import { t as BaseButton_default } from "./BaseButton-Dgqrze41.js";
 import { r as BaseInput_default, t as BaseSelect_default } from "./BaseSelect-ekgr9fDo.js";
 import { $ as parseTime, A as useConcentrationUnits, B as TagsInput_default, C as controlsToViewIds, D as getTypeDefault, E as getFieldRegistryEntry, F as ATOMIC_WEIGHTS, G as findAvailableSlots, H as addMinutes, I as useChemicalFormula, J as formatTime, K as findNearestTimeSlotIndex, L as DateTimePicker_default, M as SequenceInput_default, N as useSequenceUtils, O as ConcentrationInput_default, P as FormulaInput_default, Q as isTimeInRange, R as FileUploader_default, S as controlsToTopBarSettingsConfig, T as getDefaultControlView, U as compareTime, V as TimePicker_default, W as durationMinutes, X as fromMinutes, Y as formatTimeSlot, Z as generateTimeSlots, _ as controlsToFormSchema, a as defineDoseCalculatorControlProps, at as MultiSelect_default, b as controlsToSettingsSchema, c as defineWellPlateDoseComponentBindings, ct as BaseSlider_default, d as defineControlModel, dt as BaseCheckbox_default, et as rangesOverlap, ft as Tooltip_default, h as controlValuesToComponentProps, i as useControlSchema, it as DatePicker_default, j as MoleculeInput_default, k as UnitInput_default, l as defineWellPlateDoseControlProps, lt as BaseRadioGroup_default, m as controlValuesToComponentBindingsById, n as defineControls, nt as toMinutes, o as defineDoseDesignControlModel, ot as useListSelection, p as controlValuesToComponentBindings, pt as BaseTextarea_default, q as formatDuration, r as getControlDefaults, rt as useTimeUtils, s as defineWellPlateControlProps, st as useSelectionLimit, t as defineControlComponentBindings, tt as snapToSlot, u as useControlWorkspace, ut as BaseToggle_default, v as controlsToSectionFormSchema, w as controlsToViewItems, x as controlsToSidebarPanels, y as controlsToSectionFormSchemas, z as NumberInput_default } from "./useControlSchema-BZNdalmL.js";

package/dist/install.js

@@ -1,4 +1,4 @@
-import { t as components_exports } from "./components-DjfatNJv.js";
+import { t as components_exports } from "./components-C7UFkNIp.js";
 import "./BaseButton-Dgqrze41.js";
 import "./BaseSelect-ekgr9fDo.js";
 import "./useControlSchema-BZNdalmL.js";

package/dist/styles.css

@@ -6141,6 +6141,77 @@ to { transform: rotate(360deg);
   width: 0.875rem;
   height: 0.875rem;
 }
+
+/* Resizable columns */
+.mint-dataframe__th--resizable {
+  position: relative;
+}
+.mint-dataframe__resize-handle {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 7px;
+  height: 100%;
+  cursor: col-resize;
+  user-select: none;
+  touch-action: none;
+  z-index: 1;
+}
+.mint-dataframe__resize-handle::after {
+  content: '';
+  position: absolute;
+  top: 20%;
+  right: 3px;
+  width: 1px;
+  height: 60%;
+  background-color: var(--border-color);
+  transition: background-color 0.15s ease;
+}
+.mint-dataframe__resize-handle:hover::after {
+  width: 2px;
+  background-color: var(--color-primary);
+}
+
+/* Row delete action column */
+.mint-dataframe__th--actions,
+.mint-dataframe__td--actions {
+  width: 2.75rem;
+  text-align: center !important;
+  white-space: nowrap;
+}
+.mint-dataframe__delete-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  border: 0;
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+  opacity: 0;
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease,
+    opacity 0.15s ease;
+}
+.mint-dataframe__row:hover .mint-dataframe__delete-btn,
+.mint-dataframe__delete-btn:focus-visible {
+  opacity: 1;
+}
+.mint-dataframe__delete-btn:hover {
+  background-color: color-mix(in srgb, var(--color-error, #ef4444) 14%, transparent);
+  color: var(--color-error, #ef4444);
+}
+.mint-dataframe__delete-btn:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+.mint-dataframe__delete-btn svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 /* AlertBox Component Styles */
 .mint-alert {
   display: flex;
@@ -29680,6 +29751,75 @@ html.dark .mint-dataframe__loading {
   width: 0.875rem;
   height: 0.875rem;
 }
+/* Resizable columns */
+.mint-dataframe__th--resizable {
+  position: relative;
+}
+.mint-dataframe__resize-handle {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 7px;
+  height: 100%;
+  cursor: col-resize;
+  user-select: none;
+  touch-action: none;
+  z-index: 1;
+}
+.mint-dataframe__resize-handle::after {
+  content: '';
+  position: absolute;
+  top: 20%;
+  right: 3px;
+  width: 1px;
+  height: 60%;
+  background-color: var(--border-color);
+  transition: background-color 0.15s ease;
+}
+.mint-dataframe__resize-handle:hover::after {
+  width: 2px;
+  background-color: var(--color-primary);
+}
+/* Row delete action column */
+.mint-dataframe__th--actions,
+.mint-dataframe__td--actions {
+  width: 2.75rem;
+  text-align: center !important;
+  white-space: nowrap;
+}
+.mint-dataframe__delete-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  border: 0;
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+  opacity: 0;
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease,
+    opacity 0.15s ease;
+}
+.mint-dataframe__row:hover .mint-dataframe__delete-btn,
+.mint-dataframe__delete-btn:focus-visible {
+  opacity: 1;
+}
+.mint-dataframe__delete-btn:hover {
+  background-color: color-mix(in srgb, var(--color-error, #ef4444) 14%, transparent);
+  color: var(--color-error, #ef4444);
+}
+.mint-dataframe__delete-btn:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+.mint-dataframe__delete-btn svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
 /* WellEditPopup Component Styles */
 .mint-well-edit-popup__backdrop {
   position: fixed;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morscherlab/mint-sdk",
-  "version": "1.0.45",
+  "version": "1.0.46",
   "description": "MINT Platform SDK — Vue 3 components, composables, and types for plugin development. MINT = Mass-spec INtegrated Toolkit.",
   "type": "module",
   "main": "./dist/index.js",

package/src/__tests__/components/DataFrame.test.ts

@@ -812,4 +812,104 @@ describe('DataFrame', () => {
       expect(wrapper.emitted('row-click')).toBeUndefined()
     })
   })
+
+  describe('row deletion', () => {
+    it('should not show an actions column by default', () => {
+      const wrapper = mount(DataFrame, {
+        props: { data: mockData, columns: mockColumns },
+      })
+      expect(wrapper.find('.mint-dataframe__td--actions').exists()).toBe(false)
+    })
+
+    it('should show a delete button per row when deletable', () => {
+      const wrapper = mount(DataFrame, {
+        props: { data: mockData, columns: mockColumns, deletable: true },
+      })
+      expect(wrapper.find('.mint-dataframe__th--actions').exists()).toBe(true)
+      expect(wrapper.findAll('.mint-dataframe__delete-btn')).toHaveLength(mockData.length)
+    })
+
+    it('should emit delete-row with the row and index', async () => {
+      const wrapper = mount(DataFrame, {
+        props: { data: mockData, columns: mockColumns, deletable: true },
+      })
+      await wrapper.findAll('.mint-dataframe__delete-btn')[1].trigger('click')
+
+      expect(wrapper.emitted('delete-row')).toHaveLength(1)
+      const [row, index] = wrapper.emitted('delete-row')?.[0] as [Record<string, unknown>, number]
+      expect(row.name).toBe('Bob')
+      expect(index).toBe(1)
+    })
+
+    it('should not emit row-click when the delete button is clicked', async () => {
+      const wrapper = mount(DataFrame, {
+        props: { data: mockData, columns: mockColumns, deletable: true },
+      })
+      await wrapper.find('.mint-dataframe__delete-btn').trigger('click')
+      expect(wrapper.emitted('row-click')).toBeUndefined()
+    })
+
+    it('should use a custom delete label', () => {
+      const wrapper = mount(DataFrame, {
+        props: { data: mockData, columns: mockColumns, deletable: true, deleteLabel: 'Remove' },
+      })
+      expect(wrapper.find('.mint-dataframe__delete-btn').attributes('aria-label')).toBe('Remove')
+    })
+  })
+
+  describe('column resizing', () => {
+    it('should not show resize handles by default', () => {
+      const wrapper = mount(DataFrame, {
+        props: { data: mockData, columns: mockColumns },
+      })
+      expect(wrapper.find('.mint-dataframe__resize-handle').exists()).toBe(false)
+    })
+
+    it('should show a resize handle per column when resizable', () => {
+      const wrapper = mount(DataFrame, {
+        props: { data: mockData, columns: mockColumns, resizable: true },
+      })
+      expect(wrapper.findAll('.mint-dataframe__resize-handle')).toHaveLength(mockColumns.length)
+    })
+
+    it('should emit update:columnWidths while dragging a handle', async () => {
+      const wrapper = mount(DataFrame, {
+        props: { data: mockData, columns: mockColumns, resizable: true },
+      })
+      const handle = wrapper.findAll('.mint-dataframe__resize-handle')[0]
+      await handle.trigger('mousedown', { clientX: 100 })
+      window.dispatchEvent(new MouseEvent('mousemove', { clientX: 220 }))
+      window.dispatchEvent(new MouseEvent('mouseup'))
+
+      const events = wrapper.emitted('update:columnWidths')
+      expect(events).toBeTruthy()
+      const widths = events?.[events.length - 1]?.[0] as Record<string, number>
+      expect(widths.name).toBeGreaterThanOrEqual(48) // MIN_COL_WIDTH floor
+    })
+
+    it('should honor controlled columnWidths', () => {
+      const wrapper = mount(DataFrame, {
+        props: {
+          data: mockData,
+          columns: mockColumns,
+          resizable: true,
+          columnWidths: { name: 321 },
+        },
+      })
+      const header = wrapper.find('.mint-dataframe__th')
+      expect(header.attributes('style')).toContain('width: 321px')
+    })
+
+    it('should not trigger sort when the resize handle is clicked', async () => {
+      const wrapper = mount(DataFrame, {
+        props: {
+          data: mockData,
+          columns: [{ key: 'name', label: 'Name', sortable: true }],
+          resizable: true,
+        },
+      })
+      await wrapper.find('.mint-dataframe__resize-handle').trigger('click')
+      expect(wrapper.emitted('update:sort')).toBeUndefined()
+    })
+  })
 })

package/src/components/DataFrame.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 /** Data table with sortable columns, search, pagination, and optional row selection. */
-import { ref, computed } from 'vue'
+import { ref, computed, onBeforeUnmount } from 'vue'
 import type { DataFrameColumn, SortState, PaginationState } from '../types'
 import { useSortedItems } from '../composables/useSortedItems'
 import { useTextSearch } from '../composables/useTextSearch'
@@ -62,6 +62,14 @@ interface Props {
   selectedKeys?: (string | number)[]
   /** Make each body row act as a click/keyboard target. */
   clickableRows?: boolean
+  /** Show a trailing action column with a per-row delete button. */
+  deletable?: boolean
+  /** Tooltip / aria-label for the row delete button. */
+  deleteLabel?: string
+  /** Allow dragging a column's right edge to resize it. */
+  resizable?: boolean
+  /** Controlled column widths in px, keyed by column key (omit for uncontrolled). */
+  columnWidths?: Record<string, number>
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -78,6 +86,9 @@ const props = withDefaults(defineProps<Props>(), {
   selectable: false,
   selectedKeys: () => [],
   clickableRows: false,
+  deletable: false,
+  deleteLabel: 'Delete row',
+  resizable: false,
 })
 
 /**
@@ -91,8 +102,10 @@ const emit = defineEmits<{
   'update:sort': [sort: SortState | null]
   'update:pagination': [pagination: PaginationState]
   'update:selectedKeys': [keys: (string | number)[]]
+  'update:columnWidths': [widths: Record<string, number>]
   'row-click': [row: Record<string, unknown>, index: number]
   'cell-click': [value: unknown, column: DataFrameColumn, row: Record<string, unknown>]
+  'delete-row': [row: Record<string, unknown>, index: number]
 }>()
 
 const searchQuery = ref('')
@@ -234,6 +247,57 @@ function toggleRowSelect(key: string | number) {
   emit('update:selectedKeys', rowSelection.toggleValue(key))
 }
 
+// Column resizing — uncontrolled by default; pass `columnWidths` to control it.
+const MIN_COL_WIDTH = 48
+const internalWidths = ref<Record<string, number>>({})
+const activeWidths = computed(() => props.columnWidths ?? internalWidths.value)
+
+function toCssSize(value: string | number | undefined): string | undefined {
+  if (value === undefined) return undefined
+  return typeof value === 'number' ? `${value}px` : value
+}
+
+function columnStyle(col: DataFrameColumn) {
+  return {
+    width: toCssSize(activeWidths.value[col.key] ?? col.width),
+    minWidth: toCssSize(col.minWidth),
+  }
+}
+
+let resizeState: { key: string; startX: number; startWidth: number; min: number } | null = null
+
+function startResize(col: DataFrameColumn, event: MouseEvent) {
+  event.preventDefault()
+  event.stopPropagation()
+  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 }
+  window.addEventListener('mousemove', onResizeMove)
+  window.addEventListener('mouseup', stopResize)
+}
+
+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)
+}
+
+function stopResize() {
+  resizeState = null
+  window.removeEventListener('mousemove', onResizeMove)
+  window.removeEventListener('mouseup', stopResize)
+}
+
+onBeforeUnmount(stopResize)
+
+function handleDeleteRow(row: Record<string, unknown>, index: number) {
+  emit('delete-row', row, index)
+}
+
 const wrapperStyle = computed(() => {
   if (!props.maxHeight) return undefined
   const maxHeight = typeof props.maxHeight === 'number' ? `${props.maxHeight}px` : props.maxHeight
@@ -287,12 +351,10 @@ const wrapperStyle = computed(() => {
                 {
                   'mint-dataframe__th--sortable': isColumnSortable(col),
                   'mint-dataframe__th--sorted': activeSort?.key === col.key && activeSort?.direction,
+                  'mint-dataframe__th--resizable': resizable,
                 },
               ]"
-              :style="{
-                width: col.width ? (typeof col.width === 'number' ? `${col.width}px` : col.width) : undefined,
-                minWidth: col.minWidth ? (typeof col.minWidth === 'number' ? `${col.minWidth}px` : col.minWidth) : undefined,
-              }"
+              :style="columnStyle(col)"
               @click="isColumnSortable(col) ? handleSort(col) : undefined"
             >
               <slot :name="`header-${col.key}`" :column="col">
@@ -318,7 +380,21 @@ const wrapperStyle = computed(() => {
                   </svg>
                 </div>
               </slot>
+              <span
+                v-if="resizable"
+                class="mint-dataframe__resize-handle"
+                role="separator"
+                aria-orientation="vertical"
+                aria-label="Resize column"
+                @mousedown="startResize(col, $event)"
+                @click.stop
+              />
             </th>
+            <th
+              v-if="deletable"
+              :class="['mint-dataframe__th', `mint-dataframe__th--${size}`, 'mint-dataframe__th--actions']"
+              aria-label="Actions"
+            />
           </tr>
         </thead>
 
@@ -363,6 +439,22 @@ const wrapperStyle = computed(() => {
                 {{ formatCell(col, row, rowIndex) }}
               </slot>
             </td>
+            <td
+              v-if="deletable"
+              :class="['mint-dataframe__td', `mint-dataframe__td--${size}`, 'mint-dataframe__td--actions']"
+            >
+              <button
+                type="button"
+                class="mint-dataframe__delete-btn"
+                :aria-label="deleteLabel"
+                :title="deleteLabel"
+                @click.stop="handleDeleteRow(row, rowIndex)"
+              >
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <path d="M3 6h18" /><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" /><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" /><path d="M10 11v6" /><path d="M14 11v6" />
+                </svg>
+              </button>
+            </td>
           </tr>
         </tbody>
       </table>

package/src/styles/components/dataframe.css

@@ -473,3 +473,82 @@ html.dark .mint-dataframe__loading {
   width: 0.875rem;
   height: 0.875rem;
 }
+
+/* Resizable columns */
+.mint-dataframe__th--resizable {
+  position: relative;
+}
+
+.mint-dataframe__resize-handle {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 7px;
+  height: 100%;
+  cursor: col-resize;
+  user-select: none;
+  touch-action: none;
+  z-index: 1;
+}
+
+.mint-dataframe__resize-handle::after {
+  content: '';
+  position: absolute;
+  top: 20%;
+  right: 3px;
+  width: 1px;
+  height: 60%;
+  background-color: var(--border-color);
+  transition: background-color 0.15s ease;
+}
+
+.mint-dataframe__resize-handle:hover::after {
+  width: 2px;
+  background-color: var(--color-primary);
+}
+
+/* Row delete action column */
+.mint-dataframe__th--actions,
+.mint-dataframe__td--actions {
+  width: 2.75rem;
+  text-align: center !important;
+  white-space: nowrap;
+}
+
+.mint-dataframe__delete-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  border: 0;
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+  opacity: 0;
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease,
+    opacity 0.15s ease;
+}
+
+.mint-dataframe__row:hover .mint-dataframe__delete-btn,
+.mint-dataframe__delete-btn:focus-visible {
+  opacity: 1;
+}
+
+.mint-dataframe__delete-btn:hover {
+  background-color: color-mix(in srgb, var(--color-error, #ef4444) 14%, transparent);
+  color: var(--color-error, #ef4444);
+}
+
+.mint-dataframe__delete-btn:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.mint-dataframe__delete-btn svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}