@morscherlab/mint-sdk 1.0.0-rc.4 → 1.0.0-rc.6

package/src/components/BaseCheckbox.story.vue

@@ -4,6 +4,10 @@ import BaseCheckbox from './BaseCheckbox.vue'
 
 const sizes = ['sm', 'md', 'lg'] as const
 const checked = ref(true)
+const icons = {
+  database: ['M12 3c4.418 0 8 1.343 8 3s-3.582 3-8 3-8-1.343-8-3z', 'M4 6v6c0 1.657 3.582 3 8 3s8-1.343 8-3V6', 'M4 12v6c0 1.657 3.582 3 8 3s8-1.343 8-3v-6'],
+  file: ['M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z', 'M14 2v6h6', 'M16 13H8', 'M16 17H8'],
+}
 </script>
 
 <template>
@@ -53,6 +57,29 @@ const checked = ref(true)
       </div>
     </Variant>
 
+    <Variant title="Choice Rows">
+      <div style="padding: 2rem; max-width: 360px; display: flex; flex-direction: column; gap: 0.5rem;">
+        <BaseCheckbox
+          v-model="checked"
+          variant="row"
+          label="Include metadata"
+          description="Add method and sample context"
+          :icon="icons.database"
+          icon-color="#10b981"
+          icon-bg="#d1fae5"
+        />
+        <BaseCheckbox
+          :model-value="false"
+          variant="row"
+          label="Attach report"
+          description="Include the rendered summary PDF"
+          :icon="icons.file"
+          icon-color="#6366f1"
+          icon-bg="#e0e7ff"
+        />
+      </div>
+    </Variant>
+
     <Variant title="Disabled States">
       <div style="padding: 2rem; display: flex; flex-direction: column; gap: 1rem;">
         <BaseCheckbox :model-value="false" label="Disabled unchecked" disabled />

package/src/components/BaseCheckbox.vue

@@ -1,16 +1,24 @@
 <script setup lang="ts">
 /** Renders a styled checkbox with an optional label, size variants, and disabled state. */
+import Tooltip from './Tooltip.vue'
+
 interface Props {
   modelValue?: boolean
   label?: string
+  description?: string
+  icon?: string | string[]
+  iconColor?: string
+  iconBg?: string
   disabled?: boolean
   size?: 'sm' | 'md' | 'lg'
+  variant?: 'default' | 'row'
 }
 
 const props = withDefaults(defineProps<Props>(), {
   modelValue: false,
   disabled: false,
   size: 'md',
+  variant: 'default',
 })
 
 const emit = defineEmits<{
@@ -21,15 +29,69 @@ function handleChange(event: Event) {
   const target = event.target as HTMLInputElement
   emit('update:modelValue', target.checked)
 }
+
+function isSvgIcon(icon?: string | string[]): boolean {
+  if (!icon) return false
+  return Array.isArray(icon) || icon.startsWith('M') || icon.startsWith('m')
+}
+
+function iconStyle(): Record<string, string> {
+  return {
+    color: props.iconColor ?? (props.modelValue ? 'var(--color-primary)' : 'var(--text-muted)'),
+  }
+}
 </script>
 
 <template>
   <label
     :class="[
       'mint-checkbox',
+      `mint-checkbox--${props.variant}`,
       props.disabled ? 'mint-checkbox--disabled' : '',
+      props.modelValue ? 'mint-checkbox--checked' : '',
     ]"
   >
+    <span
+      v-if="props.variant === 'row' && props.icon"
+      class="mint-checkbox__row-icon"
+      :style="iconStyle()"
+      aria-hidden="true"
+    >
+      <svg
+        v-if="isSvgIcon(props.icon)"
+        class="mint-checkbox__row-svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <template v-if="Array.isArray(props.icon)">
+          <path v-for="(d, i) in props.icon" :key="i" :d="d" />
+        </template>
+        <path v-else :d="props.icon" />
+      </svg>
+      <span v-else class="mint-checkbox__row-text-icon">{{ props.icon }}</span>
+    </span>
+    <span
+      v-if="props.variant === 'row' && props.label"
+      class="mint-checkbox__copy"
+    >
+      <Tooltip
+        v-if="props.description"
+        :text="props.description"
+        position="right"
+        max-width="16rem"
+      >
+        <span :class="['mint-checkbox__label', `mint-checkbox__label--${props.size}`, 'mint-checkbox__label--tooltip']">
+          {{ props.label }}
+        </span>
+      </Tooltip>
+      <span v-else :class="['mint-checkbox__label', `mint-checkbox__label--${props.size}`]">
+        {{ props.label }}
+      </span>
+    </span>
     <div class="mint-checkbox__input-wrapper">
       <input
         type="checkbox"
@@ -58,7 +120,7 @@ function handleChange(event: Event) {
         </svg>
       </div>
     </div>
-    <span v-if="props.label" :class="['mint-checkbox__label', `mint-checkbox__label--${props.size}`]">
+    <span v-if="props.label && props.variant !== 'row'" :class="['mint-checkbox__label', `mint-checkbox__label--${props.size}`]">
       {{ props.label }}
     </span>
   </label>

package/src/components/BaseToggle.story.vue

@@ -5,6 +5,10 @@ import BaseToggle from './BaseToggle.vue'
 const sizes = ['sm', 'md', 'lg'] as const
 const toggleOn = ref(true)
 const toggleOff = ref(false)
+const icons = {
+  eye: ['M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z', 'M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6z'],
+  chart: ['M3 3v18h18', 'M7 15l3-3 3 2 4-6'],
+}
 </script>
 
 <template>
@@ -54,6 +58,29 @@ const toggleOff = ref(false)
       </div>
     </Variant>
 
+    <Variant title="Choice Rows">
+      <div style="padding: 2rem; max-width: 360px; display: flex; flex-direction: column; gap: 0.5rem;">
+        <BaseToggle
+          v-model="toggleOn"
+          variant="row"
+          label="Show outliers"
+          description="Keep flagged peaks visible"
+          :icon="icons.eye"
+          icon-color="#0ea5e9"
+          icon-bg="#e0f2fe"
+        />
+        <BaseToggle
+          v-model="toggleOff"
+          variant="row"
+          label="Log scale"
+          description="Compress high-intensity spread"
+          :icon="icons.chart"
+          icon-color="#8b5cf6"
+          icon-bg="#ede9fe"
+        />
+      </div>
+    </Variant>
+
     <Variant title="Without Label">
       <div style="padding: 2rem; display: flex; gap: 1.5rem; align-items: center;">
         <BaseToggle v-model="toggleOn" size="sm" />

package/src/components/BaseToggle.vue

@@ -1,11 +1,18 @@
 <script setup lang="ts">
 /** Renders an on/off toggle switch with label, size, and keyboard interaction support. */
+import Tooltip from './Tooltip.vue'
+
 interface Props {
   modelValue?: boolean
   label?: string
+  description?: string
+  icon?: string | string[]
+  iconColor?: string
+  iconBg?: string
   disabled?: boolean
   size?: 'sm' | 'md' | 'lg'
   reverse?: boolean
+  variant?: 'default' | 'row'
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -13,6 +20,7 @@ const props = withDefaults(defineProps<Props>(), {
   disabled: false,
   size: 'md',
   reverse: false,
+  variant: 'default',
 })
 
 const emit = defineEmits<{
@@ -31,17 +39,74 @@ function handleKeydown(event: KeyboardEvent) {
     toggle()
   }
 }
+
+function isSvgIcon(icon?: string | string[]): boolean {
+  if (!icon) return false
+  return Array.isArray(icon) || icon.startsWith('M') || icon.startsWith('m')
+}
+
+function iconStyle(): Record<string, string> {
+  return {
+    color: props.iconColor ?? (props.modelValue ? 'var(--color-primary)' : 'var(--text-muted)'),
+  }
+}
 </script>
 
 <template>
   <div
     :class="[
       'mint-toggle',
+      `mint-toggle--${variant}`,
       reverse ? 'mint-toggle--reverse' : '',
       disabled ? 'mint-toggle--disabled' : '',
+      modelValue ? 'mint-toggle--checked' : '',
     ]"
     @click="toggle"
   >
+    <span
+      v-if="variant === 'row' && icon"
+      class="mint-toggle__row-icon"
+      :style="iconStyle()"
+      aria-hidden="true"
+    >
+      <svg
+        v-if="isSvgIcon(icon)"
+        class="mint-toggle__row-svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <template v-if="Array.isArray(icon)">
+          <path v-for="(d, i) in icon" :key="i" :d="d" />
+        </template>
+        <path v-else :d="icon" />
+      </svg>
+      <span v-else class="mint-toggle__row-text-icon">{{ icon }}</span>
+    </span>
+    <span
+      v-if="variant === 'row' && label"
+      class="mint-toggle__copy"
+    >
+      <Tooltip
+        v-if="description"
+        :text="description"
+        position="right"
+        max-width="16rem"
+      >
+        <span :class="['mint-toggle__label', `mint-toggle__label--${size}`, 'mint-toggle__label--tooltip']">
+          {{ label }}
+        </span>
+      </Tooltip>
+      <span
+        v-else
+        :class="['mint-toggle__label', `mint-toggle__label--${size}`]"
+      >
+        {{ label }}
+      </span>
+    </span>
     <div
       role="switch"
       :tabindex="disabled ? -1 : 0"
@@ -63,7 +128,7 @@ function handleKeydown(event: KeyboardEvent) {
       />
     </div>
     <span
-      v-if="label"
+      v-if="label && variant !== 'row'"
       :class="['mint-toggle__label', `mint-toggle__label--${size}`]"
     >
       {{ label }}

package/src/components/CollapsibleCard.vue

@@ -1,25 +1,32 @@
 <script setup lang="ts">
 /** 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'
 
 interface Props {
   title: string
   subtitle?: string
+  badge?: string | number
+  badgeTone?: SidebarBadgeTone
   defaultOpen?: boolean
   disabled?: boolean
   dense?: boolean
   icon?: string | string[]
   iconColor?: string
   iconBg?: string
+  actions?: SidebarToolSectionAction[]
   showToggle?: boolean
   toggleValue?: boolean
   toggleColor?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
+  badge: undefined,
+  badgeTone: 'cta',
   defaultOpen: false,
   disabled: false,
   dense: false,
+  actions: () => [],
   showToggle: false,
   toggleValue: false,
   toggleColor: '',
@@ -27,6 +34,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<{
   'update:toggleValue': [value: boolean]
+  action: [actionId: string]
 }>()
 
 const isOpen = ref(props.defaultOpen)
@@ -55,10 +63,7 @@ const iconColorStyle = computed(() => ({
   color: props.iconColor || 'var(--color-primary)',
 }))
 
-const isSvgIcon = computed(() => {
-  if (!props.icon) return false
-  return Array.isArray(props.icon) || props.icon.startsWith('M') || props.icon.startsWith('m')
-})
+const isSvgIcon = computed(() => isSvgIconValue(props.icon))
 
 const toggleTrackStyle = computed(() => {
   if (!props.toggleValue || !props.toggleColor) return {}
@@ -67,47 +72,111 @@ const toggleTrackStyle = computed(() => {
     borderColor: props.toggleColor,
   }
 })
+
+const badgeClasses = computed(() => [
+  'mint-collapsible-card__badge',
+  `mint-collapsible-card__badge--${props.badgeTone}`,
+])
+
+function isSvgIconValue(icon?: string | string[]): boolean {
+  if (!icon) return false
+  return Array.isArray(icon) || icon.startsWith('M') || icon.startsWith('m')
+}
+
+function actionClasses(action: SidebarToolSectionAction): string[] {
+  return [
+    'mint-collapsible-card__action',
+    action.tone ? `mint-collapsible-card__action--${action.tone}` : '',
+    action.disabled ? 'mint-collapsible-card__action--disabled' : '',
+  ]
+}
+
+function actionStyle(action: SidebarToolSectionAction): Record<string, string> {
+  return action.iconColor ? { color: action.iconColor } : {}
+}
+
+function handleActionClick(action: SidebarToolSectionAction) {
+  if (props.disabled || action.disabled) return
+  emit('action', action.id)
+}
 </script>
 
 <template>
   <div :class="['mint-collapsible-card', dense ? 'mint-collapsible-card--dense' : '']">
-    <button
-      type="button"
-      :class="headerClasses"
-      :disabled="disabled"
-      :aria-expanded="isOpen"
-      @click="toggle"
-    >
-      <div class="mint-collapsible-card__title-section">
-        <!-- Icon badge -->
-        <div v-if="icon" class="mint-collapsible-card__icon-badge" :style="iconBgStyle">
+    <div class="mint-collapsible-card__header-shell">
+      <button
+        type="button"
+        :class="headerClasses"
+        :disabled="disabled"
+        :aria-expanded="isOpen"
+        @click="toggle"
+      >
+        <div class="mint-collapsible-card__title-section">
+          <!-- Icon badge -->
+          <div v-if="icon" class="mint-collapsible-card__icon-badge" :style="iconBgStyle">
+            <svg
+              v-if="isSvgIcon"
+              class="mint-collapsible-card__icon"
+              :style="iconColorStyle"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <template v-if="Array.isArray(icon)">
+                <path v-for="(d, i) in icon" :key="i" :d="d" />
+              </template>
+              <path v-else :d="icon" />
+            </svg>
+            <span v-else class="mint-collapsible-card__icon-text" :style="iconColorStyle">{{ icon }}</span>
+          </div>
+
+          <div class="mint-collapsible-card__titles">
+            <h3 class="mint-collapsible-card__title">{{ title }}</h3>
+            <p v-if="subtitle" class="mint-collapsible-card__subtitle">{{ subtitle }}</p>
+          </div>
+        </div>
+      </button>
+
+      <div class="mint-collapsible-card__actions">
+        <span v-if="badge !== undefined" :class="badgeClasses">
+          {{ badge }}
+        </span>
+
+        <button
+          v-for="action in actions"
+          :key="action.id"
+          type="button"
+          :class="actionClasses(action)"
+          :style="actionStyle(action)"
+          :disabled="disabled || action.disabled"
+          :aria-label="action.label"
+          :title="action.label"
+          @click="handleActionClick(action)"
+        >
           <svg
-            v-if="isSvgIcon"
-            class="mint-collapsible-card__icon"
-            :style="iconColorStyle"
+            v-if="action.icon && isSvgIconValue(action.icon)"
+            class="mint-collapsible-card__action-icon"
             viewBox="0 0 24 24"
             fill="none"
             stroke="currentColor"
             stroke-width="2"
             stroke-linecap="round"
             stroke-linejoin="round"
+            aria-hidden="true"
           >
-            <template v-if="Array.isArray(icon)">
-              <path v-for="(d, i) in icon" :key="i" :d="d" />
+            <template v-if="Array.isArray(action.icon)">
+              <path v-for="(d, i) in action.icon" :key="i" :d="d" />
             </template>
-            <path v-else :d="icon" />
+            <path v-else :d="action.icon" />
           </svg>
-          <span v-else class="mint-collapsible-card__icon-text" :style="iconColorStyle">{{ icon }}</span>
-        </div>
-
-        <div class="mint-collapsible-card__titles">
-          <h3 class="mint-collapsible-card__title">{{ title }}</h3>
-          <p v-if="subtitle" class="mint-collapsible-card__subtitle">{{ subtitle }}</p>
-        </div>
-      </div>
+          <span v-else-if="action.icon" class="mint-collapsible-card__action-text-icon">
+            {{ action.icon }}
+          </span>
+        </button>
 
-      <div class="mint-collapsible-card__actions">
-        <!-- Toggle switch -->
         <div
           v-if="showToggle"
           class="mint-collapsible-card__toggle"
@@ -134,23 +203,32 @@ const toggleTrackStyle = computed(() => {
           </div>
         </div>
 
-        <!-- Chevron -->
-        <svg
-          :class="[
-            'mint-collapsible-card__chevron',
-            isOpen ? 'mint-collapsible-card__chevron--open' : '',
-          ]"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          viewBox="0 0 24 24"
+        <button
+          type="button"
+          class="mint-collapsible-card__chevron-button"
+          :disabled="disabled"
+          :aria-label="isOpen ? 'Collapse section' : 'Expand section'"
+          :aria-expanded="isOpen"
+          @click="toggle"
         >
-          <path d="m6 9 6 6 6-6" />
-        </svg>
+          <svg
+            :class="[
+              'mint-collapsible-card__chevron',
+              isOpen ? 'mint-collapsible-card__chevron--open' : '',
+            ]"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            viewBox="0 0 24 24"
+            aria-hidden="true"
+          >
+            <path d="m6 9 6 6 6-6" />
+          </svg>
+        </button>
       </div>
-    </button>
+    </div>
 
     <Transition name="collapse">
       <div v-show="isOpen" class="mint-collapsible-card__body">

package/src/components/ControlWorkspaceView.vue

@@ -13,7 +13,7 @@ import type {
   ControlWorkspaceOptions,
   UseControlWorkspaceReturn,
 } from '../composables/useControlSchema'
-import { defineControlModel, mergeControlWorkspaceOptions, useControlWorkspace } from '../composables/useControlSchema'
+import { mergeControlWorkspaceOptions, resolveControlModel, useControlWorkspace } from '../composables/useControlSchema'
 import AppLayout from './AppLayout.vue'
 import AppSidebar from './AppSidebar.vue'
 import AppTopBar from './AppTopBar.vue'
@@ -156,8 +156,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const externalValues = computed(() => props.modelValue ?? props.values)
 const resolvedModel = computed<ControlModelBinding | undefined>(() => {
-  if (props.model === undefined) return undefined
-  return isControlModelBinding(props.model) ? props.model : defineControlModel(props.model)
+  return resolveControlModel(props.model)
 })
 const resolvedControls = computed<ControlSchema>(() => props.controls ?? resolvedModel.value?.controls ?? {})
 const baseControlOptions = computed<ControlWorkspaceOptions>(() =>
@@ -282,9 +281,6 @@ function isPlainRecord(value: unknown): value is Record<string, unknown> {
   return typeof value === 'object' && value !== null && !Array.isArray(value)
 }
 
-function isControlModelBinding(model: ControlModel | ControlModelBinding): model is ControlModelBinding {
-  return 'controlOptions' in model
-}
 </script>
 
 <template>

package/src/components/DoseCalculator.vue

@@ -9,11 +9,11 @@ import {
 import {
   useDoseCalculator,
   type VolumeValue,
-  type VolumeUnit,
   type DilutionResult,
   type SerialDilutionResult,
   type WellConcentration,
 } from '../composables/useDoseCalculator'
+import DoseCalculatorVolumeField from './DoseCalculatorVolumeField.vue'
 
 type CalculatorMode = 'dilution' | 'serial' | 'conversion'
 
@@ -140,30 +140,6 @@ function handleApplyToWells() {
   }
 }
 
-// Volume unit change handler
-function handleVolumeChange(event: Event, target: 'final' | 'serial') {
-  const input = event.target as HTMLInputElement
-  const value = parseFloat(input.value)
-  if (isNaN(value)) return
-
-  if (target === 'final') {
-    finalVolume.value = { ...finalVolume.value, value }
-  } else {
-    serialVolumePerWell.value = { ...serialVolumePerWell.value, value }
-  }
-}
-
-function handleVolumeUnitChange(event: Event, target: 'final' | 'serial') {
-  const select = event.target as HTMLSelectElement
-  const unit = select.value as VolumeUnit
-
-  if (target === 'final') {
-    finalVolume.value = { ...finalVolume.value, unit }
-  } else {
-    serialVolumePerWell.value = { ...serialVolumePerWell.value, unit }
-  }
-}
-
 // Watch for changes and recalculate
 watch(
   [stockConcentration, finalConcentration, finalVolume],
@@ -267,30 +243,12 @@ watch(activeMode, (mode) => {
         />
       </div>
 
-      <div class="mint-dose-calculator__field">
-        <label class="mint-dose-calculator__field-label">Final Volume</label>
-        <div class="mint-dose-calculator__field-row">
-          <input
-            type="number"
-            :value="finalVolume.value"
-            :disabled="disabled"
-            class="mint-dose-calculator__input"
-            min="0"
-            step="any"
-            @input="handleVolumeChange($event, 'final')"
-          />
-          <select
-            :value="finalVolume.unit"
-            :disabled="disabled"
-            class="mint-dose-calculator__select"
-            @change="handleVolumeUnitChange($event, 'final')"
-          >
-            <option v-for="unit in volumeUnits" :key="unit" :value="unit">
-              {{ unit }}
-            </option>
-          </select>
-        </div>
-      </div>
+      <DoseCalculatorVolumeField
+        v-model="finalVolume"
+        label="Final Volume"
+        :units="volumeUnits"
+        :disabled="disabled"
+      />
 
       <div class="mint-dose-calculator__divider" />
 
@@ -367,30 +325,12 @@ watch(activeMode, (mode) => {
         </div>
       </div>
 
-      <div class="mint-dose-calculator__field">
-        <label class="mint-dose-calculator__field-label">Volume per Well</label>
-        <div class="mint-dose-calculator__field-row">
-          <input
-            type="number"
-            :value="serialVolumePerWell.value"
-            :disabled="disabled"
-            class="mint-dose-calculator__input"
-            min="0"
-            step="any"
-            @input="handleVolumeChange($event, 'serial')"
-          />
-          <select
-            :value="serialVolumePerWell.unit"
-            :disabled="disabled"
-            class="mint-dose-calculator__select"
-            @change="handleVolumeUnitChange($event, 'serial')"
-          >
-            <option v-for="unit in volumeUnits" :key="unit" :value="unit">
-              {{ unit }}
-            </option>
-          </select>
-        </div>
-      </div>
+      <DoseCalculatorVolumeField
+        v-model="serialVolumePerWell"
+        label="Volume per Well"
+        :units="volumeUnits"
+        :disabled="disabled"
+      />
 
       <div class="mint-dose-calculator__divider" />