@morscherlab/mint-sdk 1.1.0-beta.1 → 1.1.0-beta.3

package/src/__tests__/composables/usePluginConfig.test.ts

@@ -38,16 +38,24 @@ type FakeResponse = Record<string, unknown>
 
 let getResponse: FakeResponse = { plugin_name: 'drp', config: {} }
 let patchResponse: FakeResponse = { plugin_name: 'drp', config: {} }
+let putResponse: FakeResponse = { plugin_name: 'drp', config: {} }
 let getError: Error | null = null
 let patchError: Error | null = null
-let recordedCalls: { method: string; url: string; data?: unknown }[] = []
+let recordedBaseUrls: Array<string | undefined> = []
+let recordedCalls: {
+  method: string
+  url: string
+  data?: unknown
+  headers?: AxiosRequestConfig['headers']
+}[] = []
 
 function mockAxios() {
   vi.spyOn(axios.Axios.prototype, 'get').mockImplementation(async function (
     this: unknown,
     url: string,
-    _config?: AxiosRequestConfig,
+    config?: AxiosRequestConfig,
   ) {
+    recordedBaseUrls.push(config?.baseURL)
     recordedCalls.push({ method: 'GET', url })
     if (getError) throw getError
     return { data: getResponse }
@@ -56,12 +64,23 @@ function mockAxios() {
     this: unknown,
     url: string,
     data?: unknown,
-    _config?: AxiosRequestConfig,
+    config?: AxiosRequestConfig,
   ) {
+    recordedBaseUrls.push(config?.baseURL)
     recordedCalls.push({ method: 'PATCH', url, data })
     if (patchError) throw patchError
     return { data: patchResponse }
   })
+  vi.spyOn(axios.Axios.prototype, 'put').mockImplementation(async function (
+    this: unknown,
+    url: string,
+    data?: unknown,
+    config?: AxiosRequestConfig,
+  ) {
+    recordedBaseUrls.push(config?.baseURL)
+    recordedCalls.push({ method: 'PUT', url, data, headers: config?.headers })
+    return { data: putResponse }
+  })
 }
 
 describe('usePluginConfig', () => {
@@ -70,13 +89,17 @@ describe('usePluginConfig', () => {
     autoLoadOnMount = false
     getResponse = { plugin_name: 'drp', config: {} }
     patchResponse = { plugin_name: 'drp', config: {} }
+    putResponse = { plugin_name: 'drp', config: {} }
     getError = null
     patchError = null
     recordedCalls = []
+    recordedBaseUrls = []
+    delete (window as unknown as { __MINT_PLATFORM__?: unknown }).__MINT_PLATFORM__
     mockAxios()
   })
 
   afterEach(() => {
+    delete (window as unknown as { __MINT_PLATFORM__?: unknown }).__MINT_PLATFORM__
     vi.restoreAllMocks()
   })
 
@@ -106,12 +129,148 @@ describe('usePluginConfig', () => {
     expect(recordedCalls[0]!.url).toBe('/plugins/my%2Fplugin/config')
   })
 
-  it('save PATCHes the plugin config endpoint', async () => {
-    getResponse = { plugin_name: 'drp', config: { n: 1 } }
-    patchResponse = { plugin_name: 'drp', config: { n: 2 } }
+  it.each([
+    'platform',
+    undefined,
+  ] as const)(
+    'should use the platform config facade when settings_api is %s',
+    async (settingsApi) => {
+      ;(window as unknown as { __MINT_PLATFORM__?: unknown }).__MINT_PLATFORM__ = {
+        isIntegrated: true,
+        theme: 'light',
+        platformApiUrl: '/api',
+        plugin: {
+          id: 'drp',
+          name: 'drp',
+          version: '1.0.0',
+          route_prefix: '/drp',
+          api_prefix: '/api/drp',
+          ...(settingsApi ? { settings_api: settingsApi } : {}),
+        },
+      }
+      getResponse = {
+        plugin_name: 'drp',
+        config: { n: 1 },
+        revision: 'revision-1',
+      }
+      const hook = usePluginConfig('drp')
+
+      await hook.load()
+
+      expect(recordedCalls).toEqual([
+        { method: 'GET', url: '/plugins/drp/config' },
+      ])
+    },
+  )
+
+  it('should use the plugin settings router for an integrated plugin capability', async () => {
+    ;(window as unknown as { __MINT_PLATFORM__?: unknown }).__MINT_PLATFORM__ = {
+      isIntegrated: true,
+      theme: 'light',
+      platformApiUrl: '/api',
+      plugin: {
+        id: 'drp',
+        name: 'drp',
+        version: '1.0.0',
+        route_prefix: '/drp',
+        api_prefix: '/api/drp',
+        settings_api: 'plugin',
+      },
+    }
+    getResponse = {
+      settings: { n: 1 },
+      mode: 'integrated',
+      revision: 'revision-1',
+    }
+    putResponse = {
+      settings: { n: 2 },
+      mode: 'integrated',
+      revision: 'revision-2',
+    }
     const hook = usePluginConfig('drp')
     await hook.load()
     hook.config.value = { n: 2 }
+
+    const saved = await hook.save()
+
+    expect({
+      saved,
+      calls: recordedCalls,
+      baseUrls: recordedBaseUrls,
+      config: hook.config.value,
+    }).toEqual({
+      saved: true,
+      baseUrls: ['/api/drp', '/api/drp'],
+      calls: [
+        { method: 'GET', url: '/settings' },
+        {
+          method: 'PUT',
+          url: '/settings',
+          data: { n: 2 },
+          headers: { 'If-Match': '"revision-1"' },
+        },
+      ],
+      config: { n: 2 },
+    })
+  })
+
+  it('should use the platform facade for an explicit different plugin name', async () => {
+    ;(window as unknown as { __MINT_PLATFORM__?: unknown }).__MINT_PLATFORM__ = {
+      isIntegrated: true,
+      theme: 'light',
+      platformApiUrl: '/api',
+      plugin: {
+        id: 'current-plugin',
+        name: 'current-plugin',
+        version: '1.0.0',
+        route_prefix: '/current-plugin',
+        api_prefix: '/api/current-plugin',
+        settings_api: 'plugin',
+      },
+    }
+    getResponse = {
+      plugin_name: 'other-plugin',
+      config: { n: 1 },
+      revision: 'revision-1',
+    }
+
+    const hook = usePluginConfig('other-plugin')
+    await hook.load()
+
+    expect({
+      calls: recordedCalls,
+      config: hook.config.value,
+    }).toEqual({
+      calls: [
+        { method: 'GET', url: '/plugins/other-plugin/config' },
+      ],
+      config: { n: 1 },
+    })
+  })
+
+  it('should PATCH only dirty typed fields through a versioned platform facade', async () => {
+    getResponse = {
+      plugin_name: 'drp',
+      config: {
+        n: 1,
+        allowed_experiment_types: ['metabolomics'],
+      },
+      revision: 'revision-1',
+    }
+    patchResponse = {
+      plugin_name: 'drp',
+      config: {
+        n: 2,
+        allowed_experiment_types: ['metabolomics'],
+      },
+      revision: 'revision-2',
+    }
+    const hook = usePluginConfig('drp')
+    await hook.load()
+    hook.config.value = {
+      n: 2,
+      allowed_experiment_types: ['metabolomics'],
+    }
     await nextTick()
     expect(hook.isDirty.value).toBe(true)
 
@@ -120,11 +279,168 @@ describe('usePluginConfig', () => {
     const patchCall = recordedCalls.find((c) => c.method === 'PATCH')!
     expect(patchCall.url).toBe('/plugins/drp/config')
     expect(patchCall.data).toEqual({ config: { n: 2 } })
-    expect(hook.config.value).toEqual({ n: 2 })
+    expect(patchCall.headers).toBeUndefined()
+    expect(hook.config.value).toEqual({
+      n: 2,
+      allowed_experiment_types: ['metabolomics'],
+    })
     expect(hook.isDirty.value).toBe(false)
     expect(hook.lastSavedAt.value).toBeInstanceOf(Date)
   })
 
+  it('should split changed platform-owned config from a versioned typed save', async () => {
+    getResponse = {
+      plugin_name: 'drp',
+      config: {
+        n: 1,
+        allowed_experiment_types: ['metabolomics'],
+      },
+      revision: 'revision-1',
+    }
+    patchResponse = {
+      plugin_name: 'drp',
+      config: {
+        n: 2,
+        allowed_experiment_types: ['proteomics'],
+      },
+      revision: 'untrusted-platform-revision',
+    }
+    const hook = usePluginConfig('drp')
+    await hook.load()
+    hook.config.value = {
+      n: 2,
+      allowed_experiment_types: ['proteomics'],
+    }
+
+    const saved = await hook.save()
+    patchResponse = {
+      plugin_name: 'drp',
+      config: {
+        n: 3,
+        allowed_experiment_types: ['proteomics'],
+      },
+      revision: 'revision-3',
+    }
+    hook.config.value = {
+      n: 3,
+      allowed_experiment_types: ['proteomics'],
+    }
+    const savedAgain = await hook.save()
+
+    expect({
+      saved,
+      savedAgain,
+      calls: recordedCalls,
+      config: hook.config.value,
+      isDirty: hook.isDirty.value,
+    }).toEqual({
+      saved: true,
+      savedAgain: true,
+      calls: [
+        { method: 'GET', url: '/plugins/drp/config' },
+        {
+          method: 'PATCH',
+          url: '/plugins/drp/config',
+          data: { config: { n: 2 } },
+        },
+        {
+          method: 'PATCH',
+          url: '/plugins/drp/config',
+          data: { config: { allowed_experiment_types: ['proteomics'] } },
+        },
+        {
+          method: 'PATCH',
+          url: '/plugins/drp/config',
+          data: { config: { n: 3 } },
+        },
+      ],
+      config: {
+        n: 3,
+        allowed_experiment_types: ['proteomics'],
+      },
+      isDirty: false,
+    })
+  })
+
+  it('should avoid a typed PUT when only the platform-owned config changes', async () => {
+    getResponse = {
+      plugin_name: 'drp',
+      config: {
+        n: 1,
+        allowed_experiment_types: ['metabolomics'],
+      },
+      revision: 'revision-1',
+    }
+    patchResponse = {
+      plugin_name: 'drp',
+      config: {
+        n: 1,
+        allowed_experiment_types: ['proteomics'],
+      },
+    }
+    const hook = usePluginConfig('drp')
+    await hook.load()
+    hook.config.value = {
+      n: 1,
+      allowed_experiment_types: ['proteomics'],
+    }
+
+    const saved = await hook.save()
+
+    expect({
+      saved,
+      calls: recordedCalls,
+      config: hook.config.value,
+    }).toEqual({
+      saved: true,
+      calls: [
+        { method: 'GET', url: '/plugins/drp/config' },
+        {
+          method: 'PATCH',
+          url: '/plugins/drp/config',
+          data: { config: { allowed_experiment_types: ['proteomics'] } },
+        },
+      ],
+      config: {
+        n: 1,
+        allowed_experiment_types: ['proteomics'],
+      },
+    })
+  })
+
+  it('should detect nested config edits and restore the saved JSON snapshot', async () => {
+    getResponse = {
+      plugin_name: 'drp',
+      config: {
+        rules: {
+          thresholds: [1, 2],
+        },
+      },
+    }
+    const hook = usePluginConfig('drp')
+    await hook.load()
+    const rules = hook.config.value.rules as { thresholds: number[] }
+    rules.thresholds[0] = 9
+    await nextTick()
+
+    const dirtyAfterMutation = hook.isDirty.value
+    hook.reset()
+
+    expect({
+      dirtyAfterMutation,
+      config: hook.config.value,
+      isDirty: hook.isDirty.value,
+    }).toEqual({
+      dirtyAfterMutation: true,
+      config: {
+        rules: {
+          thresholds: [1, 2],
+        },
+      },
+      isDirty: false,
+    })
+  })
+
   it('isDirty reflects edits vs last saved snapshot', async () => {
     getResponse = { plugin_name: 'drp', config: { k: 'v' } }
     const hook = usePluginConfig('drp')

package/src/components/SectionCard.story.vue

@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import SectionCard from './SectionCard.vue'
+import type { SectionCardAccent, SectionCardDivider } from '../types'
+
+const flaskIcon =
+  'M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4'
+const folderIcon = 'M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z'
+
+const experiments = [
+  { code: 'MM-2026-014', name: '13C glucose tracing — HeLa, 24h', updated: '2h ago' },
+  { code: 'MM-2026-013', name: 'Hypoxia timecourse — passage 6', updated: '5h ago' },
+  { code: 'MM-2026-011', name: 'Glutamine dropout, triplicate', updated: 'yesterday' },
+]
+
+function initPlayground() {
+  return {
+    title: 'Experiments',
+    count: '14 ongoing · 42 total',
+    accent: 'experiment' as SectionCardAccent,
+    uppercase: true,
+    divider: 'strong' as SectionCardDivider,
+    showIcon: true,
+  }
+}
+</script>
+
+<template>
+  <Story title="Layout/SectionCard">
+    <Variant title="Playground" :init-state="initPlayground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 600px;">
+          <SectionCard
+            :title="state.title"
+            :count="state.count || undefined"
+            :icon="state.showIcon ? flaskIcon : undefined"
+            :accent="state.accent"
+            :uppercase="state.uppercase"
+            :divider="state.divider"
+          >
+            <div class="mint-section-card__rows">
+              <a
+                v-for="e in experiments"
+                :key="e.code"
+                href="#"
+                class="mint-section-card__row"
+              >
+                <span style="flex: 1; min-width: 0">
+                  <span style="display: block; font-size: 0.8125rem; font-weight: 500; color: var(--text-primary)">{{ e.name }}</span>
+                  <span style="display: block; font-family: 'Fira Code', monospace; font-size: 0.65625rem; color: var(--text-muted)">{{ e.code }}</span>
+                </span>
+                <span style="flex-shrink: 0; font-size: 0.71875rem; color: var(--text-muted)">{{ e.updated }}</span>
+              </a>
+            </div>
+          </SectionCard>
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstText v-model="state.title" title="Title" />
+        <HstText v-model="state.count" title="Count" />
+        <HstCheckbox v-model="state.showIcon" title="Show icon chip" />
+        <HstCheckbox v-model="state.uppercase" title="Uppercase title" />
+        <HstSelect
+          v-model="state.accent"
+          title="Accent"
+          :options="{
+            primary: 'primary',
+            experiment: 'experiment',
+            project: 'project',
+            success: 'success',
+            error: 'error',
+            warning: 'warning',
+            info: 'info',
+          }"
+        />
+        <HstSelect
+          v-model="state.divider"
+          title="Divider"
+          :options="{ strong: 'strong', light: 'light' }"
+        />
+      </template>
+    </Variant>
+
+    <Variant title="Home category card">
+      <div style="padding: 2rem; max-width: 600px;">
+        <SectionCard
+          title="Projects"
+          count="6 active · 9 total"
+          :icon="folderIcon"
+          accent="project"
+          uppercase
+        >
+          <template #actions>
+            <a href="#" style="font-size: 0.75rem; font-weight: 500; color: var(--color-primary-hover)">All →</a>
+          </template>
+          <div class="mint-section-card__rows">
+            <a href="#" class="mint-section-card__row">
+              <span style="flex: 1; font-size: 0.8125rem; font-weight: 500; color: var(--text-primary)">Hypoxia metabolic rewiring</span>
+              <span style="font-size: 0.71875rem; color: var(--text-muted)">12 experiments</span>
+            </a>
+            <a href="#" class="mint-section-card__row">
+              <span style="flex: 1; font-size: 0.8125rem; font-weight: 500; color: var(--text-primary)">Serine one-carbon flux</span>
+              <span style="font-size: 0.71875rem; color: var(--text-muted)">7 experiments</span>
+            </a>
+          </div>
+        </SectionCard>
+      </div>
+    </Variant>
+
+    <Variant title="Detail card with footer">
+      <div style="padding: 2rem; max-width: 600px;">
+        <SectionCard title="Analysis artifacts" :count="4" divider="light">
+          <div class="mint-section-card__rows">
+            <div class="mint-section-card__row">
+              <span style="flex: 1; font-size: 0.8125rem; color: var(--text-primary)">isotopologue_matrix.csv</span>
+              <span style="font-size: 0.71875rem; color: var(--text-secondary)">DRP</span>
+            </div>
+            <div class="mint-section-card__row">
+              <span style="flex: 1; font-size: 0.8125rem; color: var(--text-primary)">natural_abundance_corrected.parquet</span>
+              <span style="font-size: 0.71875rem; color: var(--text-secondary)">DRP</span>
+            </div>
+          </div>
+          <template #footer>
+            <span style="font-size: 0.71875rem; color: var(--text-muted)">Showing 1–2 of 4</span>
+            <span style="font-size: 0.71875rem; color: var(--text-secondary)">1 / 2</span>
+          </template>
+        </SectionCard>
+      </div>
+    </Variant>
+
+    <Variant title="Fill with pinned toolbar">
+      <div style="padding: 2rem; height: 420px; display: flex;">
+        <SectionCard title="All experiments" :count="42" divider="light" fill>
+          <template #toolbar>
+            <div style="display: flex; gap: 0.5rem; padding: 0.6875rem 1rem; border-bottom: 1px solid var(--border-color)">
+              <span style="font-size: 0.78125rem; color: var(--text-secondary)">Toolbar stays put while the rows scroll</span>
+            </div>
+          </template>
+          <div class="mint-section-card__rows">
+            <div v-for="n in 20" :key="n" class="mint-section-card__row">
+              <span style="flex: 1; font-size: 0.8125rem; color: var(--text-primary)">Row {{ n }}</span>
+              <span style="font-family: 'Fira Code', monospace; font-size: 0.71875rem; color: var(--text-muted)">MM-2026-{{ String(n).padStart(3, '0') }}</span>
+            </div>
+          </div>
+          <template #footer>
+            <span style="font-size: 0.71875rem; color: var(--text-muted)">Showing 1–20 of 42</span>
+            <span style="font-size: 0.71875rem; color: var(--text-secondary)">1 / 3</span>
+          </template>
+        </SectionCard>
+      </div>
+    </Variant>
+
+    <Variant title="No icon, plain title">
+      <div style="padding: 2rem; max-width: 600px;">
+        <SectionCard title="Design data" count="96 samples · 4 timepoints" divider="light">
+          <div style="padding: 1rem; font-size: 0.8125rem; color: var(--text-secondary)">
+            Card body content sits directly on the card surface — no nested card.
+          </div>
+        </SectionCard>
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/SectionCard.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+/** One-card page region from the MINT 1.1 card system: 12px radius, the
+ * single --card-shadow token, a header strip (icon chip, title, mono count,
+ * actions), and hairline-separated content — no card-in-card. */
+import { computed } from 'vue'
+import type { SectionCardAccent, SectionCardDivider } from '../types'
+
+interface Props {
+  title: string
+  /** Monospace meta shown next to the title, e.g. "14 ongoing · 42 total". */
+  count?: string | number
+  /** SVG path(s) for the 22px icon chip; omit to render no chip. */
+  icon?: string | string[]
+  /** Tint of the icon chip. */
+  accent?: SectionCardAccent
+  /** Uppercase category heading (home cards) vs plain heading (detail cards). */
+  uppercase?: boolean
+  /** Header hairline: 'strong' = --border-color, 'light' = --border-light. */
+  divider?: SectionCardDivider
+  /**
+   * Stretch to fill the height its parent offers, scrolling the body and
+   * pinning the header and footer. Requires a parent that gives the card a
+   * definite height (a flex or grid track).
+   */
+  fill?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  count: undefined,
+  icon: undefined,
+  accent: 'primary',
+  uppercase: false,
+  divider: 'strong',
+  fill: false,
+})
+
+const iconPaths = computed(() =>
+  props.icon === undefined ? [] : Array.isArray(props.icon) ? props.icon : [props.icon],
+)
+
+const headerClasses = computed(() => [
+  'mint-section-card__header',
+  props.divider === 'light' ? 'mint-section-card__header--divider-light' : '',
+])
+
+const titleClasses = computed(() => [
+  'mint-section-card__title',
+  props.uppercase ? 'mint-section-card__title--uppercase' : '',
+])
+
+const cardClasses = computed(() => [
+  'mint-section-card',
+  props.fill ? 'mint-section-card--fill' : '',
+])
+</script>
+
+<template>
+  <section :class="cardClasses">
+    <div :class="headerClasses">
+      <span
+        v-if="iconPaths.length"
+        :class="['mint-section-card__icon-chip', `mint-section-card__icon-chip--${accent}`]"
+      >
+        <svg
+          class="mint-section-card__icon"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <path v-for="(d, i) in iconPaths" :key="i" :d="d" />
+        </svg>
+      </span>
+      <h2 :class="titleClasses">{{ title }}</h2>
+      <span v-if="count !== undefined" class="mint-section-card__count">{{ count }}</span>
+      <div class="mint-section-card__spacer"></div>
+      <slot name="actions" />
+    </div>
+    <!-- Controls belong to the card's chrome, so they sit outside the body and
+         stay put while the body scrolls. -->
+    <div v-if="$slots.toolbar" class="mint-section-card__toolbar">
+      <slot name="toolbar" />
+    </div>
+    <div class="mint-section-card__body">
+      <slot />
+    </div>
+    <div v-if="$slots.footer" class="mint-section-card__footer">
+      <slot name="footer" />
+    </div>
+  </section>
+</template>
+
+<style>
+@import '../styles/components/section-card.css';
+</style>

package/src/components/index.ts

@@ -126,6 +126,7 @@ export { default as DateTimePicker } from './DateTimePicker.vue'
 export { default as TimeRangeInput } from './TimeRangeInput.vue'
 export { default as ScheduleCalendar } from './ScheduleCalendar.vue'
 export { default as ResourceCard } from './ResourceCard.vue'
+export { default as SectionCard } from './SectionCard.vue'
 
 // Experiment / analysis components
 export { default as ExperimentSelectorModal } from './ExperimentSelectorModal.vue'