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

package/src/components/BatchProgressList.vue

@@ -2,7 +2,6 @@
 /** Scrollable list tracking per-item status for a batch operation with overall progress summary. */
 import { computed, ref, watch, nextTick } from 'vue'
 import type { BatchItem, BatchSummary } from '../types'
-import { useExpansionSet } from '../composables/useExpansionSet'
 import DataStateInternal from './internal/DataStateInternal.vue'
 
 interface Props {
@@ -36,7 +35,11 @@ const emit = defineEmits<{
 }>()
 
 const listRef = ref<HTMLElement | null>(null)
-const errorExpansion = useExpansionSet()
+// 6b: completed items keep full contrast but collapse behind a toggle.
+const showCompleted = ref(false)
+const visibleItems = computed(() => (
+  showCompleted.value ? props.items : props.items.filter(i => i.status !== 'completed')
+))
 
 const summary = computed<BatchSummary>(() => {
   const total = props.items.length
@@ -49,10 +52,6 @@ const summary = computed<BatchSummary>(() => {
   return { total, completed, processing, error, pending, skipped, percent }
 })
 
-function toggleError(id: string) {
-  errorExpansion.toggle(id)
-}
-
 watch(
   () => props.items.map(i => i.status),
   (newStatuses, oldStatuses) => {
@@ -74,6 +73,7 @@ watch(
   <div class="mint-batch-progress">
     <div v-if="title" class="mint-batch-progress__header">
       <span class="mint-batch-progress__title">{{ title }}</span>
+      <span class="mint-batch-progress__count">{{ summary.completed }} / {{ summary.total }}</span>
       <span class="mint-batch-progress__percent">{{ summary.percent }}%</span>
     </div>
 
@@ -87,19 +87,24 @@ watch(
     <slot v-if="showSummary" name="summary" :summary="summary">
       <div class="mint-batch-progress__summary">
         <span v-if="summary.completed" class="mint-batch-progress__summary-item mint-batch-progress__summary-item--completed">
-          {{ summary.completed }} completed
+          <svg class="mint-batch-progress__shape" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path class="mint-batch-progress__check" d="M3.5 8.5l3 3 6-7" /></svg>
+          <span class="mint-batch-progress__summary-count">{{ summary.completed }}</span> completed
         </span>
         <span v-if="summary.processing" class="mint-batch-progress__summary-item mint-batch-progress__summary-item--processing">
-          {{ summary.processing }} processing
+          <span class="mint-batch-progress__running-dot" aria-hidden="true" />
+          <span class="mint-batch-progress__summary-count">{{ summary.processing }}</span> processing
         </span>
         <span v-if="summary.error" class="mint-batch-progress__summary-item mint-batch-progress__summary-item--error">
-          {{ summary.error }} failed
+          <svg class="mint-batch-progress__shape" viewBox="0 0 16 16" aria-hidden="true"><circle class="mint-batch-progress__error-disc" cx="8" cy="8" r="7" /><path class="mint-batch-progress__error-mark" d="M8 4.5v4M8 11v.01" /></svg>
+          <span class="mint-batch-progress__summary-count">{{ summary.error }}</span> failed
         </span>
         <span v-if="summary.pending" class="mint-batch-progress__summary-item mint-batch-progress__summary-item--pending">
-          {{ summary.pending }} pending
+          <span class="mint-batch-progress__pending-ring" aria-hidden="true" />
+          <span class="mint-batch-progress__summary-count">{{ summary.pending }}</span> pending
         </span>
         <span v-if="summary.skipped" class="mint-batch-progress__summary-item mint-batch-progress__summary-item--skipped">
-          {{ summary.skipped }} skipped
+          <svg class="mint-batch-progress__shape" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path class="mint-batch-progress__dash" d="M4 8h8" /></svg>
+          <span class="mint-batch-progress__summary-count">{{ summary.skipped }}</span> skipped
         </span>
       </div>
     </slot>
@@ -129,47 +134,41 @@ watch(
       :style="maxHeight ? { maxHeight, overflowY: 'auto' } : {}"
     >
       <div
-        v-for="item in items"
+        v-for="item in visibleItems"
         :key="item.id"
         :data-item-id="item.id"
         :class="['mint-batch-progress__item', `mint-batch-progress__item--${item.status}`]"
       >
         <slot name="item" :item="item">
           <div class="mint-batch-progress__item-row">
-            <!-- Status icon -->
-            <div :class="['mint-batch-progress__item-icon', `mint-batch-progress__item-icon--${item.status}`]">
-              <!-- Pending: clock -->
-              <svg v-if="item.status === 'pending'" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
-                <circle cx="8" cy="8" r="6.5" />
-                <path d="M8 4.5V8l2.5 1.5" stroke-linecap="round" stroke-linejoin="round" />
-              </svg>
-              <!-- Processing: spinner -->
-              <svg v-else-if="item.status === 'processing'" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
-                <path d="M8 1.5A6.5 6.5 0 1 1 1.5 8" stroke-linecap="round" />
+            <!-- Status by shape: hollow ring / progress arc / check / filled ! / dash -->
+            <span :class="['mint-batch-progress__item-icon', `mint-batch-progress__item-icon--${item.status}`]" aria-hidden="true">
+              <span v-if="item.status === 'pending'" class="mint-batch-progress__pending-ring" />
+              <svg v-else-if="item.status === 'processing'" class="mint-batch-progress__shape" viewBox="0 0 16 16" fill="none">
+                <circle class="mint-batch-progress__arc-track" cx="8" cy="8" r="6" />
+                <path class="mint-batch-progress__arc" d="M8 2a6 6 0 0 1 6 6" />
               </svg>
-              <!-- Completed: checkmark -->
-              <svg v-else-if="item.status === 'completed'" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
-                <path d="M3.5 8.5L6.5 11.5L12.5 4.5" stroke-linecap="round" stroke-linejoin="round" />
+              <svg v-else-if="item.status === 'completed'" class="mint-batch-progress__shape" viewBox="0 0 16 16" fill="none">
+                <path class="mint-batch-progress__check" d="M3.5 8.5l3 3 6-7" />
               </svg>
-              <!-- Error: x -->
-              <svg v-else-if="item.status === 'error'" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
-                <path d="M4.5 4.5l7 7M11.5 4.5l-7 7" stroke-linecap="round" stroke-linejoin="round" />
+              <svg v-else-if="item.status === 'error'" class="mint-batch-progress__shape" viewBox="0 0 16 16">
+                <circle class="mint-batch-progress__error-disc" cx="8" cy="8" r="7" />
+                <path class="mint-batch-progress__error-mark" d="M8 4.5v4M8 11v.01" />
               </svg>
-              <!-- Skipped: dash -->
-              <svg v-else viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
-                <path d="M4 8h8" stroke-linecap="round" />
+              <svg v-else class="mint-batch-progress__shape" viewBox="0 0 16 16" fill="none">
+                <path class="mint-batch-progress__dash" d="M4 8h8" />
               </svg>
-            </div>
+            </span>
 
             <span class="mint-batch-progress__item-label">{{ item.label }}</span>
 
-            <!-- Mini progress bar for processing items -->
-            <div v-if="item.status === 'processing' && item.progress !== undefined" class="mint-batch-progress__item-progress">
-              <div class="mint-batch-progress__item-progress-bar" :style="{ width: `${item.progress}%` }" />
-            </div>
-
-            <!-- Actions -->
-            <div class="mint-batch-progress__item-actions">
+            <span class="mint-batch-progress__item-meta">
+              <template v-if="item.status === 'processing' && item.progress !== undefined">
+                <span class="mint-batch-progress__item-progress">
+                  <span class="mint-batch-progress__item-progress-bar" :style="{ width: `${item.progress}%` }" />
+                </span>
+                {{ item.progress }}%
+              </template>
               <button
                 v-if="item.status === 'error'"
                 type="button"
@@ -186,24 +185,23 @@ watch(
               >
                 Cancel
               </button>
-            </div>
+            </span>
           </div>
 
-          <!-- Error message (expandable) -->
-          <div v-if="item.status === 'error' && item.message" class="mint-batch-progress__item-error">
-            <button
-              type="button"
-              class="mint-batch-progress__error-toggle"
-              @click.stop="toggleError(item.id)"
-            >
-              {{ errorExpansion.isExpanded(item.id) ? 'Hide error' : 'Show error' }}
-            </button>
-            <div v-if="errorExpansion.isExpanded(item.id)" class="mint-batch-progress__item-message">
-              {{ item.message }}
-            </div>
+          <div v-if="item.status === 'error' && item.message" class="mint-batch-progress__item-message">
+            {{ item.message }}
           </div>
         </slot>
       </div>
+
+      <button
+        v-if="summary.completed"
+        type="button"
+        class="mint-batch-progress__completed-toggle"
+        @click="showCompleted = !showCompleted"
+      >
+        {{ showCompleted ? 'Hide completed' : `Show ${summary.completed} completed` }}
+      </button>
     </div>
   </div>
 </template>

package/src/components/BioTemplatePresetWorkspaceView.vue

@@ -52,7 +52,7 @@ interface Props {
   label?: string
   /** Sidebar CSS 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?: BioTemplatePresetSidebarVariant
   /** Compact sidebar and preview layout. */
   dense?: boolean

package/src/components/Breadcrumb.story.vue

@@ -12,7 +12,7 @@ const deepItems: BreadcrumbItem[] = [
   { label: 'Home', href: '#' },
   { label: 'Projects', href: '#' },
   { label: 'Oncology Screen', href: '#' },
-  { label: 'Experiment Batch 3', href: '#' },
+  { label: 'EXP-042', href: '#' },
   { label: 'Plate PLT-096-A1' },
 ]
 

package/src/components/Breadcrumb.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 /** Renders a breadcrumb trail where ancestors are links or emit-based buttons and the last item is the current page. */
-import { computed } from 'vue'
+import { computed, ref, watch } from 'vue'
 import type { BreadcrumbItem, BreadcrumbItemInput } from '../types'
 import { normalizeLabelItemInput } from '../utils/items'
 
@@ -21,6 +21,31 @@ const normalizedItems = computed<BreadcrumbItem[]>(() =>
   props.items.map(normalizeLabelItemInput)
 )
 
+/** Trails longer than this collapse their middle into "…" (4e). */
+const MAX_VISIBLE = 4
+
+const expanded = ref(false)
+
+// A new trail (navigation) starts collapsed again; keyed on labels so a parent
+// re-render with an equal inline array does not collapse it.
+watch(() => normalizedItems.value.map(item => item.label).join('\u0000'), () => {
+  expanded.value = false
+})
+
+/** Visible segments with their index in the full trail; `null` marks the collapsed "…". */
+const segments = computed<({ item: BreadcrumbItem; index: number } | null)[]>(() => {
+  const all = normalizedItems.value.map((item, index) => ({ item, index }))
+  if (expanded.value || all.length <= MAX_VISIBLE) return all
+  return [all[0], null, ...all.slice(-2)]
+})
+
+const hiddenCount = computed(() => normalizedItems.value.length - 3)
+
+/** ID-like segments (EXP-042) render mono. */
+function isIdLabel(label: string): boolean {
+  return /^[A-Z]+-\d+$/.test(label)
+}
+
 function handleClick(item: BreadcrumbItem) {
   if (!item.href) {
     emit('navigate', item)
@@ -32,35 +57,45 @@ function handleClick(item: BreadcrumbItem) {
   <nav class="mint-breadcrumb" aria-label="Breadcrumb">
     <ol class="mint-breadcrumb__list">
       <li
-        v-for="(item, index) in normalizedItems"
-        :key="index"
+        v-for="(segment, position) in segments"
+        :key="segment ? segment.index : 'ellipsis'"
         class="mint-breadcrumb__item"
       >
-        <slot name="item" :item="item" :index="index" :is-last="index === normalizedItems.length - 1">
+        <button
+          v-if="!segment"
+          type="button"
+          class="mint-breadcrumb__link mint-breadcrumb__ellipsis"
+          :aria-label="`Show ${hiddenCount} hidden levels`"
+          :aria-expanded="false"
+          @click="expanded = true"
+        >
+          …
+        </button>
+        <slot v-else name="item" :item="segment.item" :index="segment.index" :is-last="segment.index === normalizedItems.length - 1">
           <a
-            v-if="item.href && index !== normalizedItems.length - 1"
-            :href="item.href"
-            class="mint-breadcrumb__link"
+            v-if="segment.item.href && segment.index !== normalizedItems.length - 1"
+            :href="segment.item.href"
+            :class="['mint-breadcrumb__link', { 'mint-breadcrumb__segment--id': isIdLabel(segment.item.label) }]"
           >
-            {{ item.label }}
+            {{ segment.item.label }}
           </a>
           <button
-            v-else-if="index !== normalizedItems.length - 1"
-            class="mint-breadcrumb__link"
-            @click="handleClick(item)"
+            v-else-if="segment.index !== normalizedItems.length - 1"
+            :class="['mint-breadcrumb__link', { 'mint-breadcrumb__segment--id': isIdLabel(segment.item.label) }]"
+            @click="handleClick(segment.item)"
           >
-            {{ item.label }}
+            {{ segment.item.label }}
           </button>
           <span
             v-else
-            class="mint-breadcrumb__current"
+            :class="['mint-breadcrumb__current', { 'mint-breadcrumb__segment--id': isIdLabel(segment.item.label) }]"
             aria-current="page"
           >
-            {{ item.label }}
+            {{ segment.item.label }}
           </span>
         </slot>
         <span
-          v-if="index !== normalizedItems.length - 1"
+          v-if="position !== segments.length - 1"
           class="mint-breadcrumb__separator"
           aria-hidden="true"
         >

package/src/components/ChartContainer.story.vue

@@ -1,6 +1,18 @@
 <script setup lang="ts">
 import ChartContainer from './ChartContainer.vue'
 import IconButton from './IconButton.vue'
+import type { ChartLegendItem } from '../types'
+
+function initLegendState() {
+  return {
+    items: [
+      { label: 'Control', color: 'var(--mint-sample-1)', hidden: false },
+      { label: 'Treatment A', color: 'var(--mint-sample-2)', hidden: false },
+      { label: 'Treatment B', color: 'var(--mint-sample-3)', hidden: true },
+    ] as ChartLegendItem[],
+    variant: 'card' as 'card' | 'frame',
+  }
+}
 </script>
 
 <template>
@@ -68,6 +80,36 @@ import IconButton from './IconButton.vue'
       </div>
     </Variant>
 
+    <Variant title="Header Legend" :init-state="initLegendState">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 700px; margin: 0 auto;">
+          <ChartContainer
+            title="Dose-response"
+            description="EXP-042 · 4PL fit"
+            :variant="state.variant"
+            :legend-items="state.items"
+            @legend-toggle="(i: number) => (state.items[i].hidden = !state.items[i].hidden)"
+          >
+            <template #toolbar>
+              <IconButton variant="ghost" size="sm" label="Download">
+                <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 2.5v8M4.5 7L8 10.5 11.5 7M3 13.5h10" /></svg>
+              </IconButton>
+            </template>
+            <div style="height: 240px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 0.8125rem;">
+              Hidden: {{ state.items.filter((item: ChartLegendItem) => item.hidden).map((item: ChartLegendItem) => item.label).join(', ') || 'none' }}
+            </div>
+          </ChartContainer>
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstSelect v-model="state.variant" title="Variant" :options="[{ label: 'card', value: 'card' }, { label: 'frame', value: 'frame' }]" />
+        <HstCheckbox v-model="state.items[0].hidden" title="Hide Control" />
+        <HstCheckbox v-model="state.items[1].hidden" title="Hide Treatment A" />
+        <HstCheckbox v-model="state.items[2].hidden" title="Hide Treatment B" />
+      </template>
+    </Variant>
+
     <Variant title="With Toolbar Slot">
       <div style="padding: 2rem; max-width: 700px; margin: 0 auto;">
         <ChartContainer title="Proliferation Assay">

package/src/components/ChartContainer.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 /** Wraps a chart with header, toolbar slot, loading overlay, empty state, and legend slot. */
+import type { ChartLegendItem } from '../types'
 import LoadingSpinner from './LoadingSpinner.vue'
 import EmptyState from './EmptyState.vue'
 
@@ -11,6 +12,8 @@ interface Props {
   emptyMessage?: string
   /** `frame` fills its parent and uses compact workbench chrome. */
   variant?: 'card' | 'frame'
+  /** Series shown as clickable items in the header; a click emits `legend-toggle`. */
+  legendItems?: ChartLegendItem[]
 }
 
 withDefaults(defineProps<Props>(), {
@@ -20,6 +23,10 @@ withDefaults(defineProps<Props>(), {
   variant: 'card',
 })
 
+const emit = defineEmits<{
+  'legend-toggle': [index: number]
+}>()
+
 defineSlots<{
   default?: () => unknown
   header?: () => unknown
@@ -33,13 +40,27 @@ defineSlots<{
 
 <template>
   <div :class="['mint-chart', `mint-chart--${variant}`]">
-    <div v-if="title || description || $slots.header || $slots.toolbar" class="mint-chart__header">
+    <div v-if="title || description || $slots.header || $slots.toolbar || legendItems?.length" class="mint-chart__header">
       <slot name="header">
         <div v-if="title || description" class="mint-chart__header-text">
           <h3 v-if="title" class="mint-chart__title">{{ title }}</h3>
           <p v-if="description" class="mint-chart__description">{{ description }}</p>
         </div>
       </slot>
+      <div v-if="legendItems?.length" class="mint-chart__header-legend">
+        <button
+          v-for="(item, index) in legendItems"
+          :key="index"
+          type="button"
+          class="mint-chart__legend-item"
+          :class="{ 'mint-chart__legend-item--hidden': item.hidden }"
+          :aria-pressed="!item.hidden"
+          @click="emit('legend-toggle', index)"
+        >
+          <span class="mint-chart__legend-swatch" :style="{ background: item.color }" aria-hidden="true" />
+          {{ item.label }}
+        </button>
+      </div>
       <div v-if="$slots.toolbar" class="mint-chart__toolbar">
         <slot name="toolbar" />
       </div>

package/src/components/ChemicalFormula.story.vue

@@ -35,16 +35,16 @@ const formulas = [
         <table style="width: 100%; border-collapse: collapse; font-size: 1rem;">
           <thead>
             <tr>
-              <th style="text-align: left; padding: 0.75rem 0.5rem; border-bottom: 2px solid var(--border-color, #e2e8f0); color: var(--text-muted, #94a3b8); font-weight: 600;">Name</th>
-              <th style="text-align: left; padding: 0.75rem 0.5rem; border-bottom: 2px solid var(--border-color, #e2e8f0); color: var(--text-muted, #94a3b8); font-weight: 600;">Formula</th>
-              <th style="text-align: left; padding: 0.75rem 0.5rem; border-bottom: 2px solid var(--border-color, #e2e8f0); color: var(--text-muted, #94a3b8); font-weight: 600;">Rendered</th>
+              <th style="text-align: left; padding: 0.75rem 0.5rem; border-bottom: 2px solid var(--border-color); color: var(--text-muted); font-weight: 600;">Name</th>
+              <th style="text-align: left; padding: 0.75rem 0.5rem; border-bottom: 2px solid var(--border-color); color: var(--text-muted); font-weight: 600;">Formula</th>
+              <th style="text-align: left; padding: 0.75rem 0.5rem; border-bottom: 2px solid var(--border-color); color: var(--text-muted); font-weight: 600;">Rendered</th>
             </tr>
           </thead>
           <tbody>
             <tr v-for="item in formulas" :key="item.formula">
-              <td style="padding: 0.5rem; border-bottom: 1px solid var(--border-color, #e2e8f0); color: var(--text-primary, #1e293b);">{{ item.name }}</td>
-              <td style="padding: 0.5rem; border-bottom: 1px solid var(--border-color, #e2e8f0); font-family: monospace; color: var(--text-muted, #94a3b8);">{{ item.formula }}</td>
-              <td style="padding: 0.5rem; border-bottom: 1px solid var(--border-color, #e2e8f0); color: var(--text-primary, #1e293b); font-size: 1.125rem;">
+              <td style="padding: 0.5rem; border-bottom: 1px solid var(--border-color); color: var(--text-primary);">{{ item.name }}</td>
+              <td style="padding: 0.5rem; border-bottom: 1px solid var(--border-color); font-family: var(--font-mono); color: var(--text-muted);">{{ item.formula }}</td>
+              <td style="padding: 0.5rem; border-bottom: 1px solid var(--border-color); color: var(--text-primary); font-size: 1.125rem;">
                 <ChemicalFormula :formula="item.formula" />
               </td>
             </tr>
@@ -54,7 +54,7 @@ const formulas = [
     </Variant>
 
     <Variant title="Inline in Text">
-      <div style="padding: 2rem; max-width: 600px; margin: 0 auto; line-height: 1.8; color: var(--text-primary, #1e293b);">
+      <div style="padding: 2rem; max-width: 600px; margin: 0 auto; line-height: 1.8; color: var(--text-primary);">
         <p style="margin: 0 0 1rem;">
           The reaction of <ChemicalFormula formula="NaOH" /> with <ChemicalFormula formula="HCl" /> produces
           <ChemicalFormula formula="NaCl" /> and <ChemicalFormula formula="H2O" />.
@@ -81,19 +81,19 @@ const formulas = [
     <Variant title="Complex Formulas">
       <div style="padding: 2rem; display: flex; flex-direction: column; gap: 1.25rem; align-items: center; font-size: 1.25rem;">
         <div style="display: flex; gap: 0.75rem; align-items: baseline;">
-          <span style="min-width: 180px; text-align: right; color: var(--text-muted, #94a3b8); font-size: 0.875rem;">Aspirin:</span>
+          <span style="min-width: 180px; text-align: right; color: var(--text-muted); font-size: 0.875rem;">Aspirin:</span>
           <ChemicalFormula formula="C9H8O4" />
         </div>
         <div style="display: flex; gap: 0.75rem; align-items: baseline;">
-          <span style="min-width: 180px; text-align: right; color: var(--text-muted, #94a3b8); font-size: 0.875rem;">Caffeine:</span>
+          <span style="min-width: 180px; text-align: right; color: var(--text-muted); font-size: 0.875rem;">Caffeine:</span>
           <ChemicalFormula formula="C8H10N4O2" />
         </div>
         <div style="display: flex; gap: 0.75rem; align-items: baseline;">
-          <span style="min-width: 180px; text-align: right; color: var(--text-muted, #94a3b8); font-size: 0.875rem;">ATP:</span>
+          <span style="min-width: 180px; text-align: right; color: var(--text-muted); font-size: 0.875rem;">ATP:</span>
           <ChemicalFormula formula="C10H16N5O13P3" />
         </div>
         <div style="display: flex; gap: 0.75rem; align-items: baseline;">
-          <span style="min-width: 180px; text-align: right; color: var(--text-muted, #94a3b8); font-size: 0.875rem;">Hemoglobin subunit:</span>
+          <span style="min-width: 180px; text-align: right; color: var(--text-muted); font-size: 0.875rem;">Hemoglobin subunit:</span>
           <ChemicalFormula formula="C738H1166N812O203S2Fe" />
         </div>
       </div>

package/src/components/ChemicalFormula.vue

@@ -54,6 +54,7 @@ function getParts(f: string): FormulaPart[] {
           <span v-else-if="part.type === 'paren'" class="mint-chem-formula__paren">{{ part.text }}</span>
           <span v-else-if="part.type === 'dot'" class="mint-chem-formula__dot">{{ part.text }}</span>
           <span v-else-if="part.type === 'charge'" class="mint-chem-formula__charge">{{ part.text }}</span>
+          <span v-else-if="part.type === 'coefficient'" class="mint-chem-formula__element mint-chem-formula__coefficient">{{ part.text }}</span>
         </template>
       </span>
       <AdductText v-if="adduct" :value="adduct" size="inherit" />

package/src/components/CollapsibleCard.vue

@@ -2,6 +2,7 @@
 /** Card whose body collapses with a chevron-rotate animation, with an optional inline toggle switch independent of expand state. */
 import { ref, computed } from 'vue'
 import type { SidebarBadgeTone, SidebarToolSectionAction } from '../types'
+import BaseToggle from './BaseToggle.vue'
 
 interface Props {
   title: string
@@ -45,11 +46,6 @@ const toggle = () => {
   }
 }
 
-const handleToggleClick = (event: Event) => {
-  event.stopPropagation()
-  emit('update:toggleValue', !props.toggleValue)
-}
-
 const headerClasses = computed(() => [
   'mint-collapsible-card__header',
   props.disabled ? 'mint-collapsible-card__header--disabled' : '',
@@ -65,13 +61,9 @@ const iconColorStyle = computed(() => ({
 
 const isSvgIcon = computed(() => isSvgIconValue(props.icon))
 
-const toggleTrackStyle = computed(() => {
-  if (!props.toggleValue || !props.toggleColor) return {}
-  return {
-    backgroundColor: props.toggleColor,
-    borderColor: props.toggleColor,
-  }
-})
+const toggleColorStyle = computed(() =>
+  props.toggleColor ? { '--_cc-toggle-on': props.toggleColor } : undefined,
+)
 
 const badgeClasses = computed(() => [
   'mint-collapsible-card__badge',
@@ -180,27 +172,15 @@ function handleActionClick(action: SidebarToolSectionAction) {
         <div
           v-if="showToggle"
           class="mint-collapsible-card__toggle"
-          @click="handleToggleClick"
+          :style="toggleColorStyle"
+          @click.stop
         >
-          <div
-            role="switch"
-            tabindex="0"
-            :aria-checked="toggleValue"
-            :class="[
-              'mint-collapsible-card__toggle-track',
-              toggleValue ? 'mint-collapsible-card__toggle-track--on' : '',
-            ]"
-            :style="toggleTrackStyle"
-            @keydown.enter.prevent="handleToggleClick"
-            @keydown.space.prevent="handleToggleClick"
-          >
-            <span
-              :class="[
-                'mint-collapsible-card__toggle-knob',
-                toggleValue ? 'mint-collapsible-card__toggle-knob--on' : '',
-              ]"
-            />
-          </div>
+          <!-- md = the board's 32x18 header switch (10a) -->
+          <BaseToggle
+            :model-value="toggleValue"
+            :aria-label="title"
+            @update:model-value="emit('update:toggleValue', $event)"
+          />
         </div>
 
         <button

package/src/components/ComponentBindingRenderer.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 /**
- * Render generated SDK component bindings such as WellPlate, DoseCalculator, DataFrame, and PlateMapEditor.
+ * Render generated SDK component bindings such as WellPlate, DoseCalculator, DataFrame, and PlateEditor.
  *
  * @example Recommended
  * ```vue
@@ -11,7 +11,7 @@ import { computed, type Component } from 'vue'
 import DataFrame from './DataFrame.vue'
 import DoseCalculator from './DoseCalculator.vue'
 import ExperimentTimeline from './ExperimentTimeline.vue'
-import PlateMapEditor from './PlateMapEditor.vue'
+import PlateEditorBindingInternal from './internal/PlateEditorBindingInternal.vue'
 import ReagentList from './ReagentList.vue'
 import SampleSelector from './SampleSelector.vue'
 import ScheduleCalendar from './ScheduleCalendar.vue'
@@ -75,7 +75,8 @@ const componentRegistry: Record<string, Component> = {
   DataFrame,
   DoseCalculator,
   ExperimentTimeline,
-  PlateMapEditor,
+  // Holds its own copy of the plates: PlateEditor itself is controlled.
+  PlateEditor: PlateEditorBindingInternal,
   ReagentList,
   SampleSelector,
   ScheduleCalendar,
@@ -130,14 +131,11 @@ function normalizeProps(binding: ComponentBindingRendererBinding): Record<string
         readonly: props.readonly || Boolean(base.readonly),
         size: props.dense ? 'md' : (base.size ?? 'fill'),
       }
-    case 'PlateMapEditor':
+    case 'PlateEditor':
       return {
         ...base,
+        readonly: props.readonly || Boolean(base.readonly),
         size: props.dense ? 'md' : (base.size ?? 'fill'),
-        showToolbar: props.readonly ? false : (base.showToolbar ?? true),
-        showSidebar: props.readonly ? false : (base.showSidebar ?? true),
-        allowAddPlates: props.readonly ? false : (base.allowAddPlates ?? true),
-        allowAddSamples: props.readonly ? false : (base.allowAddSamples ?? true),
       }
     case 'DataFrame':
       return {

package/src/components/ConcentrationInput.story.vue

@@ -4,7 +4,7 @@ import type { ConcentrationValue, ConcentrationUnit } from '../composables/useCo
 
 function initState() {
   return {
-    modelValue: { value: 100, unit: 'uM' as ConcentrationUnit } as ConcentrationValue | undefined,
+    modelValue: { value: 250, unit: 'µM' as ConcentrationUnit } as ConcentrationValue | undefined,
     showConversion: true,
     disabled: false,
     error: false,