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

package/src/components/BaseInput.story.vue

@@ -5,6 +5,17 @@ import FormField from './FormField.vue'
 
 const textValue = ref('Hello world')
 const numberValue = ref<number | undefined>(42)
+
+function initAffixes() {
+  return {
+    value: '250',
+    prefix: '',
+    suffix: 'µL',
+    size: 'md' as 'sm' | 'md' | 'lg',
+    error: false,
+    disabled: false,
+  }
+}
 </script>
 
 <template>
@@ -94,5 +105,45 @@ const numberValue = ref<number | undefined>(42)
         </FormField>
       </div>
     </Variant>
+
+    <Variant title="Disabled">
+      <div style="padding: 2rem; max-width: 400px; margin: 0 auto;">
+        <BaseInput model-value="Locked value" disabled />
+      </div>
+    </Variant>
+
+    <Variant title="Prefix / Suffix" :init-state="initAffixes">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 400px; display: flex; flex-direction: column; gap: 1rem;">
+          <BaseInput
+            v-model="state.value"
+            :size="state.size"
+            :error="state.error"
+            :disabled="state.disabled"
+            aria-label="Volume"
+          >
+            <template v-if="state.prefix" #prefix>{{ state.prefix }}</template>
+            <template v-if="state.suffix" #suffix>{{ state.suffix }}</template>
+          </BaseInput>
+          <BaseInput placeholder="Search samples" aria-label="Search samples">
+            <template #prefix>
+              <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true"><circle cx="7" cy="7" r="4.5" /><path d="M10.5 10.5L14 14" /></svg>
+            </template>
+          </BaseInput>
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstText v-model="state.prefix" title="Prefix" />
+        <HstText v-model="state.suffix" title="Suffix" />
+        <HstSelect
+          v-model="state.size"
+          title="Size"
+          :options="[{ label: 'sm', value: 'sm' }, { label: 'md', value: 'md' }, { label: 'lg', value: 'lg' }]"
+        />
+        <HstCheckbox v-model="state.error" title="Error" />
+        <HstCheckbox v-model="state.disabled" title="Disabled" />
+      </template>
+    </Variant>
   </Story>
 </template>

package/src/components/BaseInput.vue

@@ -1,7 +1,13 @@
 <script setup lang="ts">
-/** Renders a styled `<input>` supporting text/number/email types, size, error, and readonly states. */
+/**
+ * Renders a styled `<input>` supporting text/number/email types, size, error, and readonly states.
+ * Optional `#prefix` (bare leading glyph, e.g. a search icon) and `#suffix` (neutral unit segment) slots sit inside the field border.
+ */
+import { computed, useAttrs, useSlots, type StyleValue } from 'vue'
 import type { InputType } from '../types'
 
+defineOptions({ inheritAttrs: false })
+
 interface Props {
   modelValue?: string | number
   type?: InputType
@@ -34,6 +40,24 @@ const emit = defineEmits<{
   keydown: [event: KeyboardEvent]
 }>()
 
+defineSlots<{
+  /** Leading glyph inside the field border (search icon, currency, …), no segment background. */
+  prefix?: () => unknown
+  /** Trailing segment inside the field border, e.g. a unit (mono 12px on `--bg-primary`). */
+  suffix?: () => unknown
+}>()
+
+const attrs = useAttrs()
+const slots = useSlots()
+const wrapped = computed(() => Boolean(slots.prefix || slots.suffix))
+
+/** Wrapped: class/style style the group, every other attribute (id, name, aria-*) stays on the input. */
+const inputAttrs = computed(() => {
+  if (!wrapped.value) return attrs
+  const { class: _class, style: _style, ...rest } = attrs
+  return rest
+})
+
 function handleInput(event: Event) {
   const target = event.target as HTMLInputElement
   const value = props.type === 'number'
@@ -44,7 +68,44 @@ function handleInput(event: Event) {
 </script>
 
 <template>
+  <div
+    v-if="wrapped"
+    :class="[
+      'mint-input-group',
+      `mint-input-group--${size}`,
+      error ? 'mint-input-group--error' : '',
+      disabled ? 'mint-input-group--disabled' : '',
+      attrs.class,
+    ]"
+    :style="attrs.style as StyleValue"
+  >
+    <span v-if="slots.prefix" class="mint-input-group__prefix"><slot name="prefix" /></span>
+    <input
+      v-bind="inputAttrs"
+      :type="type"
+      :value="modelValue"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :readonly="readonly"
+      :autocomplete="autocomplete"
+      :autofocus="autofocus"
+      :min="min"
+      :max="max"
+      :step="step"
+      :list="list"
+      :aria-invalid="error || undefined"
+      :aria-describedby="ariaDescribedby || undefined"
+      :class="['mint-input', `mint-input--${size}`, 'mint-input-group__control']"
+      @input="handleInput"
+      @focus="emit('focus', $event)"
+      @blur="emit('blur', $event)"
+      @keydown="emit('keydown', $event)"
+    />
+    <span v-if="slots.suffix" class="mint-input-group__suffix"><slot name="suffix" /></span>
+  </div>
   <input
+    v-else
+    v-bind="inputAttrs"
     :type="type"
     :value="modelValue"
     :placeholder="placeholder"

package/src/components/BaseModal.story.vue

@@ -41,6 +41,22 @@ const railTabs: ModalTab[] = [
   { id: 'tokens', label: 'API tokens', meta: '3', description: 'Programmatic access keys', icon: 'M15 7h3a4 4 0 0 1 0 8h-3M9 15H6a4 4 0 0 1 0-8h3M8 11h8' },
   { id: 'appearance', label: 'Appearance', description: 'Theme and density', icon: 'M12 3a9 9 0 1 0 0 18 3 3 0 0 0 0-6 3 3 0 0 1 0-6 3 3 0 0 0 0-6M7 10h.01M12 7h.01M17 10h.01' },
 ]
+
+// ---- rail sections + pane-header slot ----
+const sectionRailOpen = ref(false)
+function initSectionRailState() {
+  return {
+    active: 'detection',
+    withSections: true,
+    customHeader: true,
+  }
+}
+const sectionRailTabs: ModalTab[] = [
+  { id: 'detection', label: 'Peak detection', description: 'Tolerances used when matching features', section: 'Plugin' },
+  { id: 'alignment', label: 'Alignment', meta: '2', section: 'Plugin' },
+  { id: 'export', label: 'Export', section: 'Plugin' },
+  { id: 'appearance', label: 'Appearance', description: 'Theme and density', section: 'Personal' },
+]
 </script>
 
 <template>
@@ -331,5 +347,44 @@ const railTabs: ModalTab[] = [
         </template>
       </BaseModal>
     </Variant>
+
+    <Variant title="Rail sections + pane-header slot" :init-state="initSectionRailState">
+      <template #default="{ state }">
+        <div style="padding: 2rem;">
+          <BaseButton variant="primary" @click="sectionRailOpen = true">
+            Open sectioned rail
+          </BaseButton>
+          <p style="margin: 1rem 0 0; font-size: 0.8125rem; color: var(--text-muted);">
+            <code>ModalTab.section</code> groups adjacent rail items under a heading with a divider
+            between sections. The <code>#pane-header</code> slot (scoped: <code>{ tab }</code>) replaces
+            the default title + subtitle, e.g. to add a pane action.
+          </p>
+        </div>
+
+        <BaseModal
+          v-model="sectionRailOpen"
+          v-model:active-tab="state.active"
+          layout="rail"
+          :tabs="state.withSections ? sectionRailTabs : sectionRailTabs.map(({ section, ...tab }) => tab)"
+          size="lg"
+          title="Feature finder settings"
+        >
+          <template v-if="state.customHeader" #pane-header="{ tab }">
+            <div style="display: flex; align-items: flex-start; gap: 0.75rem;">
+              <div style="flex: 1; min-width: 0;">
+                <h4 class="mint-modal__pane-title">{{ tab?.label }}</h4>
+                <p v-if="tab?.description" class="mint-modal__pane-subtitle">{{ tab.description }}</p>
+              </div>
+              <BaseButton variant="ghost" size="sm">Restore defaults</BaseButton>
+            </div>
+          </template>
+          <p style="margin: 0;">{{ state.active }} settings</p>
+        </BaseModal>
+      </template>
+      <template #controls="{ state }">
+        <HstCheckbox v-model="state.withSections" title="Sections" />
+        <HstCheckbox v-model="state.customHeader" title="Custom pane header" />
+      </template>
+    </Variant>
   </Story>
 </template>

package/src/components/BaseModal.vue

@@ -1,3 +1,8 @@
+<script lang="ts">
+/** Open modals, oldest first; shared by every BaseModal instance. */
+const openModals: object[] = []
+</script>
+
 <script setup lang="ts">
 /** Modal dialog with backdrop, focus trap, Escape-to-close, and configurable size/variant/layout. */
 import { computed, ref, toRef, watch, onUnmounted, type ComponentPublicInstance } from 'vue'
@@ -5,7 +10,7 @@ import type { ModalLayout, ModalSize, ModalTab, ModalVariant } from '../types'
 import { useEventListener } from '../composables/useEventListener'
 import { useFocusTrap } from '../composables/useFocusTrap'
 
-interface Props {
+export interface Props {
   modelValue: boolean
   title?: string
   subtitle?: string
@@ -44,6 +49,17 @@ const emit = defineEmits<{
 
 const activeTabMeta = computed(() => props.tabs.find((tab) => tab.id === props.activeTab))
 
+/** Roving tabindex; with no active tab (e.g. a search is showing) the first tab stays reachable. */
+function isTabStop(tab: ModalTab, index: number): boolean {
+  return activeTabMeta.value ? tab.id === props.activeTab : index === 0
+}
+
+/** A rail section heading goes before the first tab of each run of one `section`. */
+function startsSection(index: number): boolean {
+  const section = props.tabs[index].section
+  return !!section && section !== props.tabs[index - 1]?.section
+}
+
 const tabButtonRefs = new Map<string, HTMLElement>()
 
 function setTabButtonRef(id: string, el: Element | ComponentPublicInstance | null) {
@@ -83,8 +99,16 @@ watch(() => props.modelValue, (isOpen) => {
   document.body.style.overflow = isOpen ? 'hidden' : ''
 })
 
+// Every open modal listens on document, so only the most recently opened one answers Escape.
+const self = {}
+watch(() => props.modelValue, (isOpen) => {
+  const index = openModals.indexOf(self)
+  if (isOpen && index === -1) openModals.push(self)
+  if (!isOpen && index !== -1) openModals.splice(index, 1)
+}, { immediate: true })
+
 function handleEscapeKeydown(event: KeyboardEvent) {
-  if (event.key === 'Escape' && props.closeOnEscape && props.modelValue) {
+  if (event.key === 'Escape' && props.closeOnEscape && props.modelValue && openModals[openModals.length - 1] === self) {
     close()
   }
 }
@@ -106,6 +130,8 @@ useEventListener(() => document, 'keydown', handleEscapeKeydown)
 
 onUnmounted(() => {
   document.body.style.overflow = ''
+  const index = openModals.indexOf(self)
+  if (index !== -1) openModals.splice(index, 1)
 })
 </script>
 
@@ -168,14 +194,14 @@ onUnmounted(() => {
             role="tablist"
           >
             <button
-              v-for="tab in tabs"
+              v-for="(tab, index) in tabs"
               :key="tab.id"
               :ref="(el) => setTabButtonRef(tab.id, el)"
               type="button"
               role="tab"
               :aria-selected="activeTab === tab.id"
               :aria-disabled="tab.disabled || undefined"
-              :tabindex="activeTab === tab.id ? 0 : -1"
+              :tabindex="isTabStop(tab, index) ? 0 : -1"
               :class="['mint-modal__tab', {
                 'mint-modal__tab--active': activeTab === tab.id,
                 'mint-modal__tab--disabled': tab.disabled,
@@ -193,47 +219,51 @@ onUnmounted(() => {
           <div v-if="layout === 'rail'" class="mint-modal__split">
             <div class="mint-modal__rail" role="tablist" aria-orientation="vertical">
               <div class="mint-modal__rail-items">
-                <button
-                  v-for="tab in tabs"
-                  :key="tab.id"
-                  :ref="(el) => setTabButtonRef(tab.id, el)"
-                  type="button"
-                  role="tab"
-                  :aria-selected="activeTab === tab.id"
-                  :aria-disabled="tab.disabled || undefined"
-                  :tabindex="activeTab === tab.id ? 0 : -1"
-                  :class="['mint-modal__rail-item', {
-                    'mint-modal__rail-item--active': activeTab === tab.id,
-                    'mint-modal__rail-item--disabled': tab.disabled,
-                  }]"
-                  @click="selectTab(tab)"
-                  @keydown.up.prevent="focusTab(-1)"
-                  @keydown.down.prevent="focusTab(1)"
-                >
-                  <span v-if="tab.icon" class="mint-modal__rail-item-icon" aria-hidden="true">
-                    <svg
-                      v-if="isPathIcon(tab.icon)"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      stroke-width="1.8"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                    >
-                      <template v-if="Array.isArray(tab.icon)">
-                        <path v-for="(d, index) in tab.icon" :key="index" :d="d" />
-                      </template>
-                      <path v-else :d="tab.icon" />
-                    </svg>
-                    <!-- Trusted, author-controlled markup only — same contract as SettingsTab.icon. -->
-                    <span v-else v-html="tab.icon" />
-                  </span>
-                  <span class="mint-modal__rail-item-text">
-                    <span class="mint-modal__rail-item-label">{{ tab.label }}</span>
-                    <span v-if="tab.description" class="mint-modal__rail-item-description">{{ tab.description }}</span>
-                  </span>
-                  <span v-if="tab.meta" class="mint-modal__rail-item-meta">{{ tab.meta }}</span>
-                </button>
+                <template v-for="(tab, index) in tabs" :key="tab.id">
+                  <template v-if="startsSection(index)">
+                    <div v-if="index > 0" class="mint-modal__rail-divider" aria-hidden="true" />
+                    <span class="mint-modal__rail-section" aria-hidden="true">{{ tab.section }}</span>
+                  </template>
+                  <button
+                    :ref="(el) => setTabButtonRef(tab.id, el)"
+                    type="button"
+                    role="tab"
+                    :aria-selected="activeTab === tab.id"
+                    :aria-disabled="tab.disabled || undefined"
+                    :tabindex="isTabStop(tab, index) ? 0 : -1"
+                    :class="['mint-modal__rail-item', {
+                      'mint-modal__rail-item--active': activeTab === tab.id,
+                      'mint-modal__rail-item--disabled': tab.disabled,
+                    }]"
+                    @click="selectTab(tab)"
+                    @keydown.up.prevent="focusTab(-1)"
+                    @keydown.down.prevent="focusTab(1)"
+                  >
+                    <span v-if="tab.icon" class="mint-modal__rail-item-icon" aria-hidden="true">
+                      <svg
+                        v-if="isPathIcon(tab.icon)"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="1.8"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      >
+                        <template v-if="Array.isArray(tab.icon)">
+                          <path v-for="(d, index) in tab.icon" :key="index" :d="d" />
+                        </template>
+                        <path v-else :d="tab.icon" />
+                      </svg>
+                      <!-- Trusted, author-controlled markup only — same contract as SettingsTab.icon. -->
+                      <span v-else v-html="tab.icon" />
+                    </span>
+                    <span class="mint-modal__rail-item-text">
+                      <span class="mint-modal__rail-item-label">{{ tab.label }}</span>
+                      <span v-if="tab.description" class="mint-modal__rail-item-description">{{ tab.description }}</span>
+                    </span>
+                    <span v-if="tab.meta" class="mint-modal__rail-item-meta">{{ tab.meta }}</span>
+                  </button>
+                </template>
               </div>
               <!-- Quiet rail-bottom action (e.g. Log out) -->
               <slot name="rail-footer" />
@@ -245,11 +275,14 @@ onUnmounted(() => {
               :aria-label="activeTabMeta?.label"
               tabindex="0"
             >
-              <header v-if="activeTabMeta?.label" class="mint-modal__pane-header">
-                <h4 class="mint-modal__pane-title">{{ activeTabMeta.label }}</h4>
-                <p v-if="activeTabMeta.description" class="mint-modal__pane-subtitle">
-                  {{ activeTabMeta.description }}
-                </p>
+              <header v-if="$slots['pane-header'] || activeTabMeta?.label" class="mint-modal__pane-header">
+                <!-- Replaces the default title + subtitle, e.g. to add pane actions. -->
+                <slot name="pane-header" :tab="activeTabMeta">
+                  <h4 class="mint-modal__pane-title">{{ activeTabMeta?.label }}</h4>
+                  <p v-if="activeTabMeta?.description" class="mint-modal__pane-subtitle">
+                    {{ activeTabMeta.description }}
+                  </p>
+                </slot>
               </header>
               <div class="mint-modal__pane-body">
                 <slot />

package/src/components/BaseRadioGroup.vue

@@ -47,7 +47,7 @@ function handleChange(value: string | number) {
       ]"
     >
       <template v-if="props.variant === 'list'">
-        <div :class="['mint-radio-option__input-wrapper', `mint-radio-option__input-wrapper--${props.size}`]">
+        <div class="mint-radio-option__input-wrapper">
           <input
             type="radio"
             :name="props.name"

package/src/components/BaseSlider.story.vue

@@ -91,6 +91,42 @@ function initPlayground() {
       </div>
     </Variant>
 
+    <Variant title="Color Stops and Thresholds">
+      <div style="padding: 2rem; max-width: 400px; margin: 0 auto; display: flex; flex-direction: column; gap: 2rem;">
+        <div>
+          <p style="margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--text-primary, #e2e8f0);">Green to red, badge toned at 10% / 30%</p>
+          <BaseSlider
+            :model-value="20"
+            :color-stops="[
+              { value: 0, color: '#22c55e' },
+              { value: 30, color: '#eab308' },
+              { value: 100, color: '#ef4444' },
+            ]"
+            :thresholds="[10, 30]"
+            show-labels
+          />
+        </div>
+        <div>
+          <p style="margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--text-primary, #e2e8f0);">Cold to hot, custom end labels</p>
+          <BaseSlider
+            :model-value="50"
+            :color-stops="[
+              { value: 0, color: '#3b82f6' },
+              { value: 50, color: '#a855f7' },
+              { value: 100, color: '#ef4444' },
+            ]"
+            show-labels
+            min-label="Cold"
+            max-label="Hot"
+          />
+        </div>
+        <div>
+          <p style="margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--text-primary, #e2e8f0);">Thresholds on the primary track (25% / 75%)</p>
+          <BaseSlider :model-value="80" :thresholds="[25, 75]" />
+        </div>
+      </div>
+    </Variant>
+
     <Variant title="Edge values (in-bounds thumb)">
       <!-- Verifies the thumb-in-bounds-offset fix: at min and max the
            thumb's edge — not its center — should align with the track,

package/src/components/BaseSlider.vue

@@ -1,7 +1,16 @@
 <script setup lang="ts">
-/** Renders a range slider with a filled track, optional value display, and size variants. */
+/**
+ * Renders a range slider with a filled track, optional value display, and size variants.
+ * Optional color stops, value thresholds, and end labels turn it into a threshold slider.
+ */
 import { computed, ref } from 'vue'
 
+interface SliderColorStop {
+  /** Position along the track, in percent (0-100). */
+  value: number
+  color: string
+}
+
 interface Props {
   modelValue?: number
   min?: number
@@ -10,6 +19,16 @@ interface Props {
   disabled?: boolean
   showValue?: boolean
   size?: 'sm' | 'md' | 'lg'
+  /** Paint the track with a gradient through these stops instead of the primary fill. */
+  colorStops?: SliderColorStop[]
+  /** Tone the value badge by percent of range: success up to the first, warning up to the second, error above. */
+  thresholds?: [number, number]
+  /** Show the range ends under the slider. */
+  showLabels?: boolean
+  /** Label for the low end. Defaults to `min`. */
+  minLabel?: string
+  /** Label for the high end. Defaults to `max`. */
+  maxLabel?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -19,6 +38,7 @@ const props = withDefaults(defineProps<Props>(), {
   disabled: false,
   showValue: true,
   size: 'md',
+  showLabels: false,
 })
 
 const emit = defineEmits<{
@@ -29,9 +49,9 @@ const isDragging = ref(false)
 
 const sizeConfig = computed(() => {
   switch (props.size) {
-    case 'sm': return { height: 4, thumb: 14 }
-    case 'lg': return { height: 10, thumb: 24 }
-    default: return { height: 6, thumb: 18 }
+    case 'sm': return { height: 2, thumb: 12 }
+    case 'lg': return { height: 6, thumb: 18 }
+    default: return { height: 4, thumb: 14 }
   }
 })
 
@@ -56,6 +76,20 @@ const thumbPosition = computed(() => {
   return `calc(${percentage.value}% + ${offsetPx}px)`
 })
 
+const trackBackground = computed(() => {
+  if (!props.colorStops) return undefined
+  const stops = props.colorStops.map(stop => `${stop.color} ${stop.value}%`).join(', ')
+  return `linear-gradient(to right, ${stops})`
+})
+
+const valueTone = computed(() => {
+  if (!props.thresholds) return undefined
+  const [warningAbove, errorAbove] = props.thresholds
+  if (percentage.value <= warningAbove) return 'success'
+  if (percentage.value <= errorAbove) return 'warning'
+  return 'error'
+})
+
 function handleInput(event: Event) {
   const target = event.target as HTMLInputElement
   emit('update:modelValue', Number(target.value))
@@ -63,18 +97,22 @@ function handleInput(event: Event) {
 </script>
 
 <template>
-  <div class="mint-slider" :class="{ 'mint-slider--disabled': disabled }">
+  <div
+    class="mint-slider"
+    :class="{ 'mint-slider--disabled': disabled, 'mint-slider--labeled': showLabels }"
+  >
     <div class="mint-slider__container">
       <!-- Track background -->
       <div
         class="mint-slider__track"
-        :style="{ height: `${sizeConfig.height}px` }"
+        :style="{ height: `${sizeConfig.height}px`, background: trackBackground }"
       />
 
       <!-- Filled track — extends to the thumb's center so the two visually
            meet at every position (no gap at the right edge, no overshoot
-           at the left). -->
+           at the left). A gradient track has no fill. -->
       <div
+        v-if="!colorStops"
         class="mint-slider__fill"
         :style="{
           height: `${sizeConfig.height}px`,
@@ -115,8 +153,18 @@ function handleInput(event: Event) {
     </div>
 
     <!-- Value display -->
-    <span v-if="showValue" class="mint-slider__value">
+    <span
+      v-if="showValue"
+      class="mint-slider__value"
+      :class="valueTone && `mint-slider__value--${valueTone}`"
+    >
       {{ currentValue }}
     </span>
+
+    <!-- Range end labels -->
+    <div v-if="showLabels" class="mint-slider__labels">
+      <span>{{ minLabel ?? min }}</span>
+      <span>{{ maxLabel ?? max }}</span>
+    </div>
   </div>
 </template>

package/src/components/BaseToggle.vue

@@ -121,13 +121,7 @@ function iconStyle(): Record<string, string> {
       ]"
       @keydown="handleKeydown"
     >
-      <span
-        :class="[
-          'mint-toggle__knob',
-          `mint-toggle__knob--${size}`,
-          modelValue ? `mint-toggle__knob--on-${size}` : 'mint-toggle__knob--off',
-        ]"
-      />
+      <span :class="['mint-toggle__knob', `mint-toggle__knob--${size}`]" />
     </div>
     <span
       v-if="label && variant !== 'row'"