@morscherlab/mint-sdk 1.3.9 → 1.4.0-beta.1

package/src/components/PlateEditor.vue

@@ -13,14 +13,14 @@
  *
  * @example
  * ```vue
- * <PlateEditor v-model:active-rack-id="activeId" :model-value="racks" slots fill-series @well-edit="save" />
+ * <PlateEditor v-model:active-rack="activeId" :spec="definePlateEditor({ slots: true, fillSeries: true })" :model-value="racks" @well-edit="save" />
  * ```
  */
 import { computed, onBeforeUnmount, onMounted, ref, watch, type ComponentPublicInstance } from 'vue'
 import { Download, Move, Plus, Redo2, Trash2, Undo2, Upload, X } from 'lucide-vue-next'
 import type {
   ActionMenuItem,
-  PlateEditorClearConfirm,
+  PlateEditorSpec,
   Rack,
   SampleType,
   SlotPosition,
@@ -30,7 +30,6 @@ import type {
   WellLegendItem,
   WellPlateFormat,
   WellPlateSelectionMode,
-  WellPlateSize,
   WellSampleDropData,
   WellSampleDropParser,
 } from '../types'
@@ -40,90 +39,61 @@ import { useRovingFocus } from '../composables/useRovingFocus'
 import { PLATE_CONFIGS, WELL_PLATE_SIZE_CONFIGS } from './WellPlate.geometry'
 import { parseDroppedSampleJson } from './WellPlate.sampleDrop'
 import { DEFAULT_WELL_LEGEND_ITEMS } from './WellPlate.legend'
+import { applySpecDefaults, defineWellPlate } from '../composables/componentSpecs'
 import { sampleTypeMarker } from '../utils/sampleTypeMarker'
 import WellPlate from './WellPlate.vue'
 import WellEditPopupInternal from './internal/WellEditPopupInternal.vue'
 import ActionMenu from './ActionMenu.vue'
+import BaseButton from './BaseButton.vue'
 import SegmentedControl from './SegmentedControl.vue'
-import IconButton from './IconButton.vue'
 import ConfirmDialog from './ConfirmDialog.vue'
-import BaseTextarea from './BaseTextarea.vue'
+import BaseInput from './BaseInput.vue'
 
 interface Props {
+  /** Structure built with definePlateEditor(). Optional: every option has a default. */
+  spec?: PlateEditorSpec
   /** The plates. Never mutated; changes arrive as emitted intents. */
   modelValue: Rack[]
-  activeRackId?: string
-  /** Formats offered by the format control; one entry hides it. */
-  formats?: WellPlateFormat[]
-  /** R/G/B/Y slot buttons: `true` for all four, a list for a subset. */
-  slots?: boolean | SlotPosition[]
-  /** Reorder plate tabs by drag or Alt+←/→. */
-  reorder?: boolean
-  /** Show the Drag toggle that moves / swaps wells (`well-move`). */
-  wellDrag?: boolean
-  /** Groups for the selection bar; a well's `group` holds the group id and colors it. */
-  groups?: SampleType[] | false
-  /** Fields of the single-well inspector; `false` turns the inspector off. */
-  wellFields?: WellEditField[] | false
-  /** Accept dropped samples: `true` reads JSON payloads, a parser may return `null` to reject. */
-  sampleDrop?: boolean | WellSampleDropParser
-  /** Show an Import button: a chosen file emits `import`, pasted text `import-text` (see `importMode`). */
-  import?: boolean
-  /** What `import` offers: a file picker, a paste dialog whose text `import-text` emits unparsed, or both. */
-  importMode?: 'file' | 'paste' | 'both'
-  /** The file picker's `accept` filter for `import`, e.g. `'.csv'`. */
-  importAccept?: string
-  /** Export formats offered in the Import / Export menu; each emits `export`. */
-  export?: string[] | false
-  /** Clear-plate button: ask first, clear with an Undo button, or hide it. */
-  clear?: 'confirm' | 'undo' | false
-  /** Text and variant of the `clear="confirm"` dialog; unset fields keep the defaults. */
-  clearConfirm?: PlateEditorClearConfirm
-  /** Show Undo / Redo (also shown when `clear` is `'undo'`); they only emit intents. */
-  history?: boolean
+  /** Id of the active plate. Bind with `v-model:active-rack`; unbound, the tabs keep their own choice. */
+  activeRack?: string
   canUndo?: boolean
   canRedo?: boolean
-  /** Show the Fill Series button. */
-  fillSeries?: boolean
-  /** On a full plate: disable Fill Series, or keep it enabled and still emit `fill-series` (e.g. to show a toast). */
-  fillSeriesWhenFull?: 'disable' | 'emit'
-  maxRacks?: number
-  minRacks?: number
   /** No editing controls; well clicks still emit `well-click`. */
   readonly?: boolean
-  size?: WellPlateSize
   /** Footer text while nothing is selected; replaces the built-in selection hint. */
   hint?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  activeRackId: undefined,
-  formats: () => [54, 96],
+  spec: () => ({}),
+  activeRack: undefined,
+  canUndo: false,
+  canRedo: false,
+  readonly: false,
+})
+
+const config = computed(() => applySpecDefaults({
+  formats: [54, 96],
   slots: false,
   reorder: true,
   wellDrag: false,
   groups: false,
-  wellFields: () => ['label', 'sampleType', 'injectionVolume', 'injectionCount', 'customMethod'],
+  wellFields: ['label', 'sampleType', 'injectionVolume', 'injectionCount', 'customMethod'],
   sampleDrop: false,
   import: false,
   importMode: 'file',
-  importAccept: undefined,
   export: false,
   clear: 'confirm',
-  clearConfirm: undefined,
   history: false,
-  canUndo: false,
-  canRedo: false,
   fillSeries: false,
   fillSeriesWhenFull: 'disable',
   maxRacks: 10,
   minRacks: 1,
-  readonly: false,
   size: 'xs',
-})
+}, props.spec))
 
 const emit = defineEmits<{
-  'update:activeRackId': [rackId: string]
+  'update:activeRack': [rackId: string]
   'rack-add': []
   'rack-remove': [rackId: string]
   'rack-reorder': [rackIds: string[]]
@@ -172,17 +142,17 @@ defineSlots<{
   'toolbar-extra'?: () => unknown
 }>()
 
-// --- Active plate: a bound activeRackId wins; unbound, the tabs keep their own choice ---
+// --- Active plate: a bound activeRack wins; unbound, the tabs keep their own choice ---
 const localActiveId = ref<string>()
 
 const activeRack = computed<Rack | undefined>(() => {
-  const id = props.activeRackId ?? localActiveId.value
+  const id = props.activeRack ?? localActiveId.value
   return props.modelValue.find(rack => rack.id === id) ?? props.modelValue[0]
 })
 
 function selectRack(rackId: string) {
   localActiveId.value = rackId
-  emit('update:activeRackId', rackId)
+  emit('update:activeRack', rackId)
 }
 
 function filledCount(rack: Rack): number {
@@ -207,7 +177,7 @@ const reorder = useListReorder<Rack>({
   items: () => props.modelValue,
   getId: rack => rack.id,
   getLabel: rack => rack.name,
-  disabled: () => !props.reorder || props.readonly,
+  disabled: () => !config.value.reorder || props.readonly,
   getElement: id => tabRefs.get(id),
   itemNoun: 'Plate',
   onReorder: ({ fromIndex, toIndex }) => {
@@ -220,14 +190,14 @@ function handleTabKeydown(event: KeyboardEvent, rack: Rack, index: number) {
   else handleTabArrows(event)
 }
 
-const canReorder = computed(() => props.reorder && !props.readonly)
-const canAdd = computed(() => !props.readonly && props.modelValue.length < props.maxRacks)
-const canRemove = computed(() => !props.readonly && props.modelValue.length > props.minRacks)
+const canReorder = computed(() => config.value.reorder && !props.readonly)
+const canAdd = computed(() => !props.readonly && props.modelValue.length < config.value.maxRacks)
+const canRemove = computed(() => !props.readonly && props.modelValue.length > config.value.minRacks)
 
 // --- Toolbar ---
-const formatOptions = computed(() => props.formats.map(format => ({ value: format, label: String(format) })))
+const formatOptions = computed(() => config.value.formats.map(format => ({ value: format, label: String(format) })))
 const slotOptions = computed<readonly SlotPosition[]>(() =>
-  props.slots === true ? SLOT_ORDER : props.slots || [],
+  config.value.slots === true ? SLOT_ORDER : config.value.slots || [],
 )
 const dragMode = ref(false)
 const confirmOpen = ref(false)
@@ -249,7 +219,7 @@ function toggleDrag() {
 function requestClear() {
   const rack = activeRack.value
   if (!rack) return
-  if (props.clear === 'confirm') confirmOpen.value = true
+  if (config.value.clear === 'confirm') confirmOpen.value = true
   else emit('clear', rack.id)
 }
 
@@ -266,12 +236,12 @@ function handleFile(event: Event) {
   input.value = ''
 }
 
-const importFile = computed(() => props.import && props.importMode !== 'paste')
-const importPaste = computed(() => props.import && props.importMode !== 'file')
-const exportFormats = computed(() => props.export || [])
+const importFile = computed(() => config.value.import && config.value.importMode !== 'paste')
+const importPaste = computed(() => config.value.import && config.value.importMode !== 'file')
+const exportFormats = computed(() => config.value.export || [])
 const ioLabel = computed(() => {
   if (!exportFormats.value.length) return 'Import'
-  return props.import ? 'Import / Export' : 'Export'
+  return config.value.import ? 'Import / Export' : 'Export'
 })
 const ioItems = computed<ActionMenuItem[]>(() => [
   ...(importFile.value ? [{ id: 'import', label: 'Import file…' }] : []),
@@ -296,7 +266,7 @@ function handleIo(item: ActionMenuItem) {
   else emit('export', item.id.slice('export:'.length))
 }
 
-const showHistory = computed(() => !props.readonly && (props.history || props.clear === 'undo'))
+const showHistory = computed(() => !props.readonly && (config.value.history || config.value.clear === 'undo'))
 
 // Scoped to the editor, and text fields keep their own undo.
 function handleRootKeydown(event: KeyboardEvent) {
@@ -318,7 +288,7 @@ watch(() => [props.canUndo, props.canRedo], () => {
 })
 
 // --- Plate ---
-const groupList = computed(() => props.groups || [])
+const groupList = computed(() => config.value.groups || [])
 const groupColor = (group: SampleType, index: number) =>
   group.color ?? SAMPLE_GROUP_TOKENS[index % SAMPLE_GROUP_TOKENS.length]
 
@@ -326,8 +296,8 @@ const sampleColors = computed<Record<string, string>>(() =>
   Object.fromEntries(groupList.value.map((group, index) => [group.id, groupColor(group, index)])),
 )
 const legendItems = computed<WellLegendItem[] | undefined>(() =>
-  props.groups
-    ? props.groups.map((group, index) => ({ type: group.id, label: group.name, color: groupColor(group, index) }))
+  config.value.groups
+    ? config.value.groups.map((group, index) => ({ type: group.id, label: group.name, color: groupColor(group, index) }))
     : undefined,
 )
 
@@ -353,7 +323,7 @@ onBeforeUnmount(() => resizeObserver?.disconnect())
 // ponytail: plate width from the size table (table border-spacing counted per column); 'fill' counts as 0.
 const plateWidth = computed(() => {
   const { cols } = PLATE_CONFIGS[activeRack.value?.format ?? 96]
-  const size = WELL_PLATE_SIZE_CONFIGS[props.size]
+  const size = WELL_PLATE_SIZE_CONFIGS[config.value.size]
   const px = (value: string) => (value.endsWith('px') ? parseFloat(value) : 0)
   return px(size.headerWidth) + cols * px(size.cellWidth) + (cols + 2) * px(size.gap)
 })
@@ -366,30 +336,46 @@ const railItems = computed(() => {
   const items = legendItems.value ?? DEFAULT_WELL_LEGEND_ITEMS
   return items.map(item => ({
     ...item,
-    count: wells.filter(well => (props.groups ? well.group : well.sampleType) === item.type).length,
-    swatch: props.groups ? { backgroundColor: item.color } : sampleTypeMarker(item.type, item.color).style,
-    glyph: props.groups ? '' : sampleTypeMarker(item.type, item.color).glyph,
+    count: wells.filter(well => (config.value.groups ? well.group : well.sampleType) === item.type).length,
+    swatch: config.value.groups ? { backgroundColor: item.color } : sampleTypeMarker(item.type, item.color).style,
+    glyph: config.value.groups ? '' : sampleTypeMarker(item.type, item.color).glyph,
   }))
 })
 
-const inspectorOn = computed(() => Boolean(props.wellFields) && !props.readonly && !dragMode.value)
+const inspectorOn = computed(() => Boolean(config.value.wellFields) && !props.readonly && !dragMode.value)
 
 const selectionMode = computed<WellPlateSelectionMode>(() => {
   if (props.readonly) return 'none'
   if (dragMode.value) return 'drag'
   // Without groups the selection only feeds the inspector; with neither, nothing acts on it.
-  if (!props.groups && !inspectorOn.value) return 'none'
+  if (!config.value.groups && !inspectorOn.value) return 'none'
   // A Ctrl/Cmd-click toggles a well in every mode. Beside the rail a plain click selects
   // one well and the inspector opens there; in the popover mode it opens the popover.
   // Groups add the rectangle drag, except where a plain click edits.
-  return props.groups && (railOn.value || !inspectorOn.value) ? 'rectangle' : 'multiple'
+  return config.value.groups && (railOn.value || !inspectorOn.value) ? 'rectangle' : 'multiple'
 })
 
 const dropParser = computed<WellSampleDropParser | undefined>(() => {
-  if (typeof props.sampleDrop === 'function') return props.sampleDrop
-  return props.sampleDrop ? event => (event.dataTransfer ? parseDroppedSampleJson(event.dataTransfer) : null) : undefined
+  if (typeof config.value.sampleDrop === 'function') return config.value.sampleDrop
+  return config.value.sampleDrop ? event => (event.dataTransfer ? parseDroppedSampleJson(event.dataTransfer) : null) : undefined
 })
 
+const plateSpec = computed(() => defineWellPlate({
+  format: activeRack.value?.format,
+  selectionMode: selectionMode.value,
+  editable: inspectorOn.value && !railOn.value,
+  editFields: config.value.wellFields || undefined,
+  defaultInjectionVolume: activeRack.value?.injectionVolume,
+  size: config.value.size,
+  sampleColors: sampleColors.value,
+  legendItems: legendItems.value,
+  allowSampleDrop: Boolean(config.value.sampleDrop) && !props.readonly,
+  sampleDropParser: dropParser.value,
+  showWellLabels: config.value.size !== 'xs',
+  showBadges: true,
+  showLegend: !railOn.value,
+}))
+
 const selection = ref<string[]>([])
 function setSelection(wellIds: string[]) {
   selection.value = wellIds
@@ -404,7 +390,7 @@ watch(
 
 // Without groups a selection beside the rail is the inspected well; it closes with the rail
 // instead of reopening, and stealing focus, when the rail comes back.
-watch(railOn, () => { if (!props.groups && selection.value.length) setSelection([]) })
+watch(railOn, () => { if (!config.value.groups && selection.value.length) setSelection([]) })
 
 function handleSelection(wellIds: string[]) {
   if (selectionMode.value === 'none' || dragMode.value) return
@@ -414,7 +400,7 @@ function handleSelection(wellIds: string[]) {
 function handleWellEdit(wellId: string, data: WellEditData) {
   const rack = activeRack.value
   if (!rack) return
-  const fields = props.wellFields || []
+  const fields = config.value.wellFields || []
   // An unnamed sample is an empty well, unless its group still names it; blanks and QCs stand alone.
   const grouped = groupList.value.some(group => group.id === rack.wells[wellId]?.group)
   const sample = !data.sampleType || data.sampleType === 'sample'
@@ -449,7 +435,7 @@ function assign(groupId: string | undefined) {
 const hint = computed(() => {
   if (dragMode.value) return 'Drag a filled well onto another to move or swap it.'
   if (props.hint) return props.hint
-  if (!props.groups) return ''
+  if (!config.value.groups) return ''
   if (railOn.value) {
     return inspectorOn.value
       ? 'Click a well to edit it on the right. Drag across wells, Ctrl-click to add one or Shift-click for a range.'
@@ -518,27 +504,22 @@ const hint = computed(() => {
         </span>
       </div>
 
-      <IconButton
+      <BaseButton
         v-if="canAdd"
         class="mint-plate-editor__add"
         variant="ghost"
         size="sm"
+        :icon="Plus"
         label="Add plate"
         @click="emit('rack-add')"
-      >
-        <Plus :size="16" aria-hidden="true" />
-      </IconButton>
+      />
 
       <div class="mint-plate-editor__tabbar-end">
         <template v-if="showHistory">
-          <IconButton variant="ghost" size="sm" label="Undo" title="Undo (Ctrl+Z)" data-history="undo" :disabled="!canUndo" @click="emit('undo')">
-            <Undo2 :size="16" aria-hidden="true" />
-          </IconButton>
-          <IconButton variant="ghost" size="sm" label="Redo" title="Redo (Ctrl+Shift+Z)" data-history="redo" :disabled="!canRedo" @click="emit('redo')">
-            <Redo2 :size="16" aria-hidden="true" />
-          </IconButton>
+          <BaseButton variant="ghost" size="sm" :icon="Undo2" label="Undo" title="Undo (Ctrl+Z)" data-history="undo" :disabled="!canUndo" @click="emit('undo')" />
+          <BaseButton variant="ghost" size="sm" :icon="Redo2" label="Redo" title="Redo (Ctrl+Shift+Z)" data-history="redo" :disabled="!canRedo" @click="emit('redo')" />
         </template>
-        <template v-if="!readonly && ($props.import || exportFormats.length)">
+        <template v-if="!readonly && (config.import || exportFormats.length)">
           <span v-if="showHistory" class="mint-plate-editor__divider" aria-hidden="true" />
           <ActionMenu v-if="exportFormats.length || ioItems.length > 1" :label="ioLabel" :items="ioItems" @select="handleIo">
             <template #trigger="{ open, toggle, keydown }">
@@ -557,7 +538,7 @@ const hint = computed(() => {
             <Upload :size="14" aria-hidden="true" />
             Import
           </button>
-          <input v-if="importFile" ref="fileInput" type="file" class="mint-plate-editor__file" :accept="importAccept" tabindex="-1" aria-hidden="true" @change="handleFile">
+          <input v-if="importFile" ref="fileInput" type="file" class="mint-plate-editor__file" :accept="config.importAccept" tabindex="-1" aria-hidden="true" @change="handleFile">
         </template>
         <slot name="tab-extra" />
       </div>
@@ -565,7 +546,7 @@ const hint = computed(() => {
 
     <!-- Toolbar for the active plate -->
     <div v-if="showToolbar && activeRack" class="mint-plate-editor__toolbar">
-      <div v-if="formats.length > 1" class="mint-plate-editor__field mint-plate-editor__field--format">
+      <div v-if="config.formats.length > 1" class="mint-plate-editor__field mint-plate-editor__field--format">
         <span class="mint-plate-editor__label">Format</span>
         <SegmentedControl
           :model-value="activeRack.format"
@@ -598,18 +579,18 @@ const hint = computed(() => {
 
       <div class="mint-plate-editor__toolbar-end">
         <button
-          v-if="fillSeries"
+          v-if="config.fillSeries"
           type="button"
           class="mint-plate-editor__action"
           data-action="fill-series"
-          :disabled="isFull && fillSeriesWhenFull === 'disable'"
+          :disabled="isFull && config.fillSeriesWhenFull === 'disable'"
           :title="isFull ? 'Plate is full' : 'Name every empty well in order'"
           @click="emit('fill-series', activeRack.id)"
         >
           Fill Series
         </button>
         <button
-          v-if="wellDrag"
+          v-if="config.wellDrag"
           type="button"
           :class="['mint-plate-editor__action', { 'mint-plate-editor__action--on': dragMode }]"
           data-action="drag"
@@ -621,7 +602,7 @@ const hint = computed(() => {
           Drag
         </button>
         <button
-          v-if="clear"
+          v-if="config.clear"
           type="button"
           class="mint-plate-editor__action mint-plate-editor__action--danger"
           :disabled="isEmpty"
@@ -642,21 +623,9 @@ const hint = computed(() => {
       <WellPlate
         :key="activeRack.id"
         :model-value="selection"
-        :format="activeRack.format"
+        :spec="plateSpec"
         :wells="activeRack.wells"
-        :selection-mode="selectionMode"
-        :editable="inspectorOn && !railOn"
-        :edit-fields="wellFields || undefined"
-        :default-injection-volume="activeRack.injectionVolume"
         :readonly="readonly"
-        :size="size"
-        :sample-colors="sampleColors"
-        :legend-items="legendItems"
-        :allow-sample-drop="Boolean(sampleDrop) && !readonly"
-        :sample-drop-parser="dropParser"
-        :show-well-labels="size !== 'xs'"
-        show-badges
-        :show-legend="!railOn"
         @well-click="(wellId: string) => emit('well-click', activeRack!.id, wellId)"
         @selection-change="handleSelection"
         @well-edit="handleWellEdit"
@@ -670,15 +639,15 @@ const hint = computed(() => {
       </WellPlate>
 
       <!-- Selection bar, or a hint while nothing is selected -->
-      <div v-if="!readonly && (groups || wellDrag)" class="mint-plate-editor__footer">
-        <div v-if="selection.length && groups" class="mint-plate-editor__selection" role="toolbar" aria-label="Selected wells">
+      <div v-if="!readonly && (config.groups || config.wellDrag)" class="mint-plate-editor__footer">
+        <div v-if="selection.length && config.groups" class="mint-plate-editor__selection" role="toolbar" aria-label="Selected wells">
           <span class="mint-plate-editor__selection-count">
             <span class="mint-plate-editor__mono">{{ selection.length }}</span> selected
           </span>
           <span class="mint-plate-editor__divider" aria-hidden="true" />
           <span class="mint-plate-editor__label">Group</span>
           <button
-            v-for="(group, index) in groups"
+            v-for="(group, index) in config.groups"
             :key="group.id"
             type="button"
             class="mint-plate-editor__group"
@@ -719,7 +688,7 @@ const hint = computed(() => {
             :rack-id="activeRack.id"
             :well-id="railWellId"
             :well-data="activeRack.wells[railWellId]"
-            :edit-fields="wellFields || []"
+            :edit-fields="config.wellFields || []"
             :default-injection-volume="activeRack.injectionVolume"
             :position="railPosition()"
             :save="(data: WellEditData) => handleWellEdit(railWellId!, data)"
@@ -731,7 +700,7 @@ const hint = computed(() => {
               inline
               :well-id="railWellId"
               :well-data="activeRack.wells[railWellId]"
-              :edit-fields="wellFields || undefined"
+              :edit-fields="config.wellFields || undefined"
               :default-injection-volume="activeRack.injectionVolume"
               :marker-colors="sampleColors"
               :group-label="railGroupLabel"
@@ -743,11 +712,11 @@ const hint = computed(() => {
           </slot>
         </template>
         <template v-else>
-          <span class="mint-plate-editor__rail-title">{{ groups ? 'Groups' : 'Sample types' }}</span>
+          <span class="mint-plate-editor__rail-title">{{ config.groups ? 'Groups' : 'Sample types' }}</span>
           <ul class="mint-plate-editor__rail-list">
             <li v-for="item in railItems" :key="item.type" class="mint-plate-editor__rail-row">
               <span
-                :class="['mint-plate-editor__rail-swatch', { 'mint-plate-editor__rail-swatch--marker': !groups }]"
+                :class="['mint-plate-editor__rail-swatch', { 'mint-plate-editor__rail-swatch--marker': !config.groups }]"
                 :style="item.swatch"
                 aria-hidden="true"
               >{{ item.glyph }}</span>
@@ -756,7 +725,7 @@ const hint = computed(() => {
             </li>
           </ul>
           <button
-            v-if="groups && !readonly"
+            v-if="config.groups && !readonly"
             type="button"
             class="mint-plate-editor__rail-add"
             data-action="group-add"
@@ -770,25 +739,25 @@ const hint = computed(() => {
     </div>
 
     <ConfirmDialog
-      v-if="clear === 'confirm'"
-      v-model="confirmOpen"
-      :title="clearConfirm?.title ?? 'Clear plate'"
-      :message="clearConfirm?.message ?? `Clear all ${activeRack ? filledCount(activeRack) : 0} wells on ${activeRack?.name ?? 'this plate'}?`"
-      :confirm-label="clearConfirm?.confirmLabel ?? 'Clear'"
-      :variant="clearConfirm?.variant"
+      v-if="config.clear === 'confirm'"
+      v-model:open="confirmOpen"
+      :title="config.clearConfirm?.title ?? 'Clear plate'"
+      :message="config.clearConfirm?.message ?? `Clear all ${activeRack ? filledCount(activeRack) : 0} wells on ${activeRack?.name ?? 'this plate'}?`"
+      :confirm-label="config.clearConfirm?.confirmLabel ?? 'Clear'"
+      :tone="config.clearConfirm?.tone"
       @confirm="confirmClear"
     />
 
     <ConfirmDialog
       v-if="importPaste"
-      v-model="pasteOpen"
+      v-model:open="pasteOpen"
       title="Paste wells"
       message="Paste the rows to import, e.g. copied from a spreadsheet."
       confirm-label="Import"
-      variant="info"
+      tone="info"
       @confirm="confirmPaste"
     >
-      <BaseTextarea v-model="pasteText" :rows="8" aria-label="Pasted rows" />
+      <BaseInput type="textarea" v-model="pasteText" :rows="8" aria-label="Pasted rows" />
     </ConfirmDialog>
 
     <div role="status" aria-live="polite" :style="reorder.announcerStyle">{{ reorder.announcement.value }}</div>

package/src/components/PlotlyChart.story.vue

@@ -83,7 +83,7 @@ const layout: Partial<Plotly.Layout> = {
           title="Metabolite response"
           :data="[]"
           empty
-          empty-message="No measurements are available."
+          empty-text="No measurements are available."
         />
       </div>
     </Variant>

package/src/components/PlotlyChart.vue

@@ -20,7 +20,7 @@ import { computed, nextTick, onBeforeUnmount, onMounted, ref, toRaw, watch } fro
 
 import type { ChartLegendItem } from '../types'
 import { SAMPLE_GROUP_TOKENS } from '../utils/color'
-import { mintPlotlyTemplate } from '../utils/plotlyTemplate'
+import { mintPlotlyTemplate, resolveCssColor } from '../utils/plotlyTemplate'
 import ChartContainer from './ChartContainer.vue'
 
 interface Props {
@@ -31,7 +31,7 @@ interface Props {
   description?: string
   loading?: boolean
   empty?: boolean
-  emptyMessage?: string
+  emptyText?: string
   ariaLabel?: string
   /** Use a custom Plotly build instead of the SDK's lazy-loaded default bundle. */
   plotly?: typeof PlotlyType
@@ -56,7 +56,7 @@ const props = withDefaults(defineProps<Props>(), {
   config: () => ({}),
   loading: false,
   empty: false,
-  emptyMessage: 'No data available',
+  emptyText: 'No data available',
   ariaLabel: 'Interactive Plotly chart',
   active: true,
   clickEvents: false,
@@ -184,6 +184,8 @@ function themedLayout(): Partial<PlotlyType.Layout> {
     ...template,
     ...(legendTraces.value.length ? { showlegend: false } : {}),
     ...layout,
+    // Plotly cannot read `var(--…)`; resolve a caller colorway's tokens on every render.
+    ...(layout.colorway ? { colorway: layout.colorway.map(color => (typeof color === 'string' ? resolveCssColor(color, chartElement.value ?? undefined) : color)) } : {}),
     font: { ...template.font, ...layout.font },
     xaxis: { ...template.xaxis, ...layout.xaxis },
     yaxis: { ...template.yaxis, ...layout.yaxis },
@@ -298,7 +300,7 @@ onBeforeUnmount(() => {
     :description="description"
     :loading="loading"
     :empty="empty"
-    :empty-message="emptyMessage"
+    :empty-text="emptyText"
     :variant="variant"
     :legend-items="legendItems"
     @legend-toggle="toggleTrace"

package/src/components/PluginIcon.story.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { reactive } from 'vue'
 import PluginIcon from './PluginIcon.vue'
+import type { Tone } from '../types'
 
 const SAMPLE_PATH = 'M13 10V3L4 14h7v7l9-11h-7z'
 const SAMPLE_STRUCTURED = JSON.stringify({
@@ -33,7 +34,8 @@ function initState() {
     icon: SAMPLE_PATH,
     size: 'md' as 'sm' | 'md' | 'topbar' | 'lg',
     variant: 'solid' as 'solid' | 'tinted',
-    tone: '',
+    tone: '' as '' | Tone,
+    color: '',
   })
 }
 </script>
@@ -43,14 +45,15 @@ function initState() {
     <Variant title="Playground" :init-state="initState">
       <template #default="{ state }">
         <div style="padding: 2rem; max-width: 600px;">
-          <PluginIcon :icon="state.icon" :size="state.size" :variant="state.variant" :tone="state.tone || undefined" />
+          <PluginIcon :icon="state.icon" :size="state.size" :variant="state.variant" :tone="state.tone || undefined" :color="state.color || undefined" />
         </div>
       </template>
       <template #controls="{ state }">
         <HstText v-model="state.icon" title="icon" />
         <HstSelect v-model="state.size" title="size" :options="['sm', 'md', 'topbar', 'lg']" />
         <HstSelect v-model="state.variant" title="variant" :options="['solid', 'tinted']" />
-        <HstText v-model="state.tone" title="tone (hex)" />
+        <HstSelect v-model="state.tone" title="tone" :options="['', 'neutral', 'primary', 'cta', 'success', 'warning', 'error', 'info']" />
+        <HstText v-model="state.color" title="color (CSS color)" />
       </template>
     </Variant>
 
@@ -94,9 +97,9 @@ function initState() {
 
     <Variant title="Tone overrides">
       <div style="padding: 2rem; display: flex; gap: 1rem; align-items: center;">
-        <PluginIcon :icon="SAMPLE_PATH" size="lg" variant="solid" tone="#0EA5E9" />
-        <PluginIcon :icon="SAMPLE_PATH" size="lg" variant="solid" tone="#F97316" />
-        <PluginIcon :icon="SAMPLE_PATH" size="lg" variant="solid" tone="#22C55E" />
+        <PluginIcon :icon="SAMPLE_PATH" size="lg" variant="solid" color="#0EA5E9" />
+        <PluginIcon :icon="SAMPLE_PATH" size="lg" variant="solid" color="#F97316" />
+        <PluginIcon :icon="SAMPLE_PATH" size="lg" variant="solid" color="#22C55E" />
       </div>
     </Variant>
   </Story>

package/src/components/PluginIcon.vue

@@ -9,6 +9,7 @@
  *  http://, protocol-relative, and data:image/svg+xml URLs are deliberately rejected
  *  (mixed-content + XSS, see spec 2026-05-04-plugin-icon-component-design.md). */
 import { computed } from 'vue'
+import type { Tone } from '../types'
 import { detectPluginIcon, type DetectedPluginIcon, type StructuredPluginIcon } from '../utils/pluginIcon'
 
 defineOptions({ name: 'PluginIcon' })
@@ -17,7 +18,10 @@ interface Props {
   icon?: string
   size?: 'sm' | 'md' | 'topbar' | 'lg'
   variant?: 'solid' | 'tinted'
-  tone?: string
+  /** Semantic color; without it the chip uses the primary color. */
+  tone?: Tone
+  /** Custom chip color (any CSS color, such as a plugin's manifest color); replaces the tone. */
+  color?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -76,10 +80,11 @@ const rootClasses = computed(() => [
   'mint-plugin-icon',
   `mint-plugin-icon--${props.size}`,
   `mint-plugin-icon--${props.variant}`,
+  props.tone ? `mint-plugin-icon--${props.tone}` : '',
 ])
 
 const rootStyle = computed(() =>
-  props.tone ? { '--mint-plugin-icon-tone': props.tone } : undefined,
+  props.color ? { '--mint-plugin-icon-tone': props.color } : undefined,
 )
 </script>