@morscherlab/mint-sdk 1.2.0-beta.2 → 1.2.0-beta.3

package/src/components/ChartContainer.vue

@@ -1,64 +0,0 @@
-<script setup lang="ts">
-/** Wraps a chart with header, toolbar slot, loading overlay, empty state, and legend slot. */
-import LoadingSpinner from './LoadingSpinner.vue'
-import EmptyState from './EmptyState.vue'
-
-interface Props {
-  title?: string
-  description?: string
-  loading?: boolean
-  empty?: boolean
-  emptyMessage?: string
-}
-
-withDefaults(defineProps<Props>(), {
-  loading: false,
-  empty: false,
-  emptyMessage: 'No data available',
-})
-</script>
-
-<template>
-  <div class="mint-chart">
-    <div v-if="title || description || $slots.toolbar" class="mint-chart__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>
-      <div v-if="$slots.toolbar" class="mint-chart__toolbar">
-        <slot name="toolbar" />
-      </div>
-    </div>
-
-    <div class="mint-chart__body">
-      <!-- Loading overlay -->
-      <div v-if="loading" class="mint-chart__loading-overlay">
-        <LoadingSpinner size="lg" />
-      </div>
-
-      <!-- Empty state -->
-      <template v-else-if="empty">
-        <slot name="empty">
-          <EmptyState
-            :title="emptyMessage"
-            size="sm"
-            icon-path="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"
-          />
-        </slot>
-      </template>
-
-      <!-- Chart content -->
-      <template v-else>
-        <slot />
-      </template>
-    </div>
-
-    <div v-if="$slots.legend" class="mint-chart__legend">
-      <slot name="legend" />
-    </div>
-  </div>
-</template>
-
-<style>
-@import '../styles/components/chart-container.css';
-</style>

package/src/components/ChemicalFormula.story.vue

@@ -1,102 +0,0 @@
-<script setup lang="ts">
-import ChemicalFormula from './ChemicalFormula.vue'
-
-const formulas = [
-  { formula: 'H2O', name: 'Water' },
-  { formula: 'NaCl', name: 'Sodium Chloride' },
-  { formula: 'C6H12O6', name: 'Glucose' },
-  { formula: 'Ca(OH)2', name: 'Calcium Hydroxide' },
-  { formula: 'H2SO4', name: 'Sulfuric Acid' },
-  { formula: 'CH3COOH', name: 'Acetic Acid' },
-  { formula: 'C2H5OH', name: 'Ethanol' },
-  { formula: 'NH3', name: 'Ammonia' },
-  { formula: 'CuSO4.5H2O', name: 'Copper Sulfate Pentahydrate' },
-  { formula: 'Fe2O3', name: 'Iron(III) Oxide' },
-]
-</script>
-
-<template>
-  <Story title="Data Display/ChemicalFormula">
-    <Variant title="Playground">
-      <template #default="{ state }">
-        <div style="padding: 2rem; display: flex; align-items: center; justify-content: center; font-size: 1.5rem;">
-          <ChemicalFormula :formula="state.formula" :inline="state.inline" />
-        </div>
-      </template>
-
-      <template #controls="{ state }">
-        <HstText v-model="state.formula" title="Formula" />
-        <HstCheckbox v-model="state.inline" title="Inline" />
-      </template>
-    </Variant>
-
-    <Variant title="Common Formulas">
-      <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
-        <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>
-            </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;">
-                <ChemicalFormula :formula="item.formula" />
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </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);">
-        <p style="margin: 0 0 1rem;">
-          The reaction of <ChemicalFormula formula="NaOH" /> with <ChemicalFormula formula="HCl" /> produces
-          <ChemicalFormula formula="NaCl" /> and <ChemicalFormula formula="H2O" />.
-        </p>
-        <p style="margin: 0 0 1rem;">
-          Photosynthesis converts <ChemicalFormula formula="CO2" /> and <ChemicalFormula formula="H2O" />
-          into <ChemicalFormula formula="C6H12O6" /> and <ChemicalFormula formula="O2" />.
-        </p>
-        <p style="margin: 0;">
-          The drug compound was dissolved in <ChemicalFormula formula="(CH3)2SO" /> (DMSO) at a stock
-          concentration of 10 mM.
-        </p>
-      </div>
-    </Variant>
-
-    <Variant title="Block Display">
-      <div style="padding: 2rem; display: flex; flex-direction: column; gap: 1rem; align-items: center; font-size: 1.5rem;">
-        <ChemicalFormula formula="C6H12O6" :inline="false" />
-        <ChemicalFormula formula="Ca(OH)2" :inline="false" />
-        <ChemicalFormula formula="CuSO4.5H2O" :inline="false" />
-      </div>
-    </Variant>
-
-    <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>
-          <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>
-          <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>
-          <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>
-          <ChemicalFormula formula="C738H1166N812O203S2Fe" />
-        </div>
-      </div>
-    </Variant>
-  </Story>
-</template>

package/src/components/ChemicalFormula.vue

@@ -1,39 +0,0 @@
-<script setup lang="ts">
-/** Renders a chemical formula string (H₂O, C₆H₁₂O₆, Ca(OH)₂) with typographically correct subscripts and superscripts for charges. */
-import { useChemicalFormula, type FormulaPart } from '../composables/useChemicalFormula'
-
-interface Props {
-  formula: string
-  inline?: boolean
-}
-
-withDefaults(defineProps<Props>(), {
-  inline: true,
-})
-
-const { renderFormulaParts } = useChemicalFormula()
-
-function getParts(f: string): FormulaPart[] {
-  return renderFormulaParts(f)
-}
-</script>
-
-<template>
-  <component
-    :is="inline ? 'span' : 'div'"
-    :class="['mint-chem-formula', !inline ? 'mint-chem-formula--block' : '']"
-  >
-    <template v-for="(part, i) in getParts(formula)" :key="i">
-      <span v-if="part.type === 'element'" class="mint-chem-formula__element">{{ part.text }}</span>
-      <span v-else-if="part.type === 'subscript'" class="mint-chem-formula__subscript">{{ part.text }}</span>
-      <span v-else-if="part.type === 'superscript'" class="mint-chem-formula__superscript">{{ part.text }}</span>
-      <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>
-    </template>
-  </component>
-</template>
-
-<style>
-@import '../styles/components/chemical-formula.css';
-</style>

package/src/components/CollapsibleCard.story.vue

@@ -1,135 +0,0 @@
-<script setup lang="ts">
-import CollapsibleCard from './CollapsibleCard.vue'
-
-function initPlayground() {
-  return {
-    title: 'Experiment Settings',
-    subtitle: 'Configure acquisition parameters',
-    defaultOpen: true,
-    disabled: false,
-    showToggle: false,
-    toggleValue: false,
-  }
-}
-</script>
-
-<template>
-  <Story title="Layout/CollapsibleCard">
-    <Variant title="Playground" :init-state="initPlayground">
-      <template #default="{ state }">
-        <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
-          <CollapsibleCard
-            :title="state.title"
-            :subtitle="state.subtitle || undefined"
-            :default-open="state.defaultOpen"
-            :disabled="state.disabled"
-            :show-toggle="state.showToggle"
-            :toggle-value="state.toggleValue"
-          >
-            <p style="margin: 0; color: var(--text-muted, #94a3b8);">
-              This is the collapsible content area. It can contain any child elements.
-            </p>
-          </CollapsibleCard>
-        </div>
-      </template>
-
-      <template #controls="{ state }">
-        <HstText v-model="state.title" title="Title" />
-        <HstText v-model="state.subtitle" title="Subtitle" />
-        <HstCheckbox v-model="state.defaultOpen" title="Default Open" />
-        <HstCheckbox v-model="state.disabled" title="Disabled" />
-        <HstCheckbox v-model="state.showToggle" title="Show Toggle" />
-        <HstCheckbox v-model="state.toggleValue" title="Toggle Value" />
-      </template>
-    </Variant>
-
-    <Variant title="Open by Default">
-      <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
-        <CollapsibleCard title="Open Section" :default-open="true">
-          <p style="margin: 0; color: var(--text-muted, #94a3b8);">
-            This card starts in the open state by default.
-          </p>
-        </CollapsibleCard>
-      </div>
-    </Variant>
-
-    <Variant title="Closed by Default">
-      <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
-        <CollapsibleCard title="Closed Section" :default-open="false">
-          <p style="margin: 0; color: var(--text-muted, #94a3b8);">
-            Click the header to reveal this content.
-          </p>
-        </CollapsibleCard>
-      </div>
-    </Variant>
-
-    <Variant title="With Subtitle">
-      <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
-        <CollapsibleCard
-          title="Analysis Parameters"
-          subtitle="Configure settings for dose-response curve fitting"
-          :default-open="true"
-        >
-          <div style="display: flex; flex-direction: column; gap: 0.5rem;">
-            <p style="margin: 0; color: var(--text-primary, #1e293b);">Model: 4-parameter logistic</p>
-            <p style="margin: 0; color: var(--text-primary, #1e293b);">Weighting: 1/Y^2</p>
-            <p style="margin: 0; color: var(--text-primary, #1e293b);">Iterations: 1000</p>
-          </div>
-        </CollapsibleCard>
-      </div>
-    </Variant>
-
-    <Variant title="With Icon">
-      <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
-        <CollapsibleCard
-          title="Quality Control"
-          subtitle="Plate QC metrics and thresholds"
-          icon="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-          :default-open="true"
-        >
-          <p style="margin: 0; color: var(--text-muted, #94a3b8);">QC parameters and results appear here.</p>
-        </CollapsibleCard>
-      </div>
-    </Variant>
-
-    <Variant title="With Toggle Switch">
-      <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
-        <CollapsibleCard
-          title="Notifications"
-          subtitle="Enable or disable notifications"
-          :default-open="true"
-          :show-toggle="true"
-          :toggle-value="true"
-        >
-          <p style="margin: 0; color: var(--text-muted, #94a3b8);">
-            Notification preferences and settings.
-          </p>
-        </CollapsibleCard>
-      </div>
-    </Variant>
-
-    <Variant title="Disabled">
-      <div style="padding: 2rem; max-width: 500px; margin: 0 auto;">
-        <CollapsibleCard title="Locked Section" :disabled="true" :default-open="false">
-          <p style="margin: 0; color: var(--text-muted, #94a3b8);">
-            This content cannot be accessed.
-          </p>
-        </CollapsibleCard>
-      </div>
-    </Variant>
-
-    <Variant title="Multiple Cards">
-      <div style="padding: 2rem; max-width: 500px; margin: 0 auto; display: flex; flex-direction: column; gap: 0.75rem;">
-        <CollapsibleCard title="General Settings" :default-open="true">
-          <p style="margin: 0; color: var(--text-muted, #94a3b8);">General configuration options.</p>
-        </CollapsibleCard>
-        <CollapsibleCard title="Advanced Settings" :default-open="false">
-          <p style="margin: 0; color: var(--text-muted, #94a3b8);">Advanced configuration for power users.</p>
-        </CollapsibleCard>
-        <CollapsibleCard title="Export Options" :default-open="false">
-          <p style="margin: 0; color: var(--text-muted, #94a3b8);">Configure export format and destination.</p>
-        </CollapsibleCard>
-      </div>
-    </Variant>
-  </Story>
-</template>

package/src/components/CollapsibleCard.vue

@@ -1,245 +0,0 @@
-<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: '',
-})
-
-const emit = defineEmits<{
-  'update:toggleValue': [value: boolean]
-  action: [actionId: string]
-}>()
-
-const isOpen = ref(props.defaultOpen)
-
-const toggle = () => {
-  if (!props.disabled) {
-    isOpen.value = !isOpen.value
-  }
-}
-
-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' : '',
-])
-
-const iconBgStyle = computed(() => ({
-  backgroundColor: props.iconBg || 'var(--color-primary-soft)',
-}))
-
-const iconColorStyle = computed(() => ({
-  color: props.iconColor || 'var(--color-primary)',
-}))
-
-const isSvgIcon = computed(() => isSvgIconValue(props.icon))
-
-const toggleTrackStyle = computed(() => {
-  if (!props.toggleValue || !props.toggleColor) return {}
-  return {
-    backgroundColor: props.toggleColor,
-    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' : '']">
-    <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="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(action.icon)">
-              <path v-for="(d, i) in action.icon" :key="i" :d="d" />
-            </template>
-            <path v-else :d="action.icon" />
-          </svg>
-          <span v-else-if="action.icon" class="mint-collapsible-card__action-text-icon">
-            {{ action.icon }}
-          </span>
-        </button>
-
-        <div
-          v-if="showToggle"
-          class="mint-collapsible-card__toggle"
-          @click="handleToggleClick"
-        >
-          <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>
-        </div>
-
-        <button
-          type="button"
-          class="mint-collapsible-card__chevron-button"
-          :disabled="disabled"
-          :aria-label="isOpen ? 'Collapse section' : 'Expand section'"
-          :aria-expanded="isOpen"
-          @click="toggle"
-        >
-          <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>
-    </div>
-
-    <Transition name="collapse">
-      <div v-show="isOpen" class="mint-collapsible-card__body">
-        <div class="mint-collapsible-card__content">
-          <slot />
-        </div>
-      </div>
-    </Transition>
-  </div>
-</template>
-
-<style>
-@import '../styles/components/collapsible-card.css';
-</style>