@morscherlab/mint-sdk 1.4.5 → 1.4.6

package/dist/lab.js

@@ -1,5 +1,5 @@
 import { P as time_exports } from "./records-CWRztE5M.js";
 import { C as FormulaInput_default, L as definePlateEditor, S as useSequenceUtils, a as StepWizard_default, b as MoleculeInput_default, v as ConcentrationInput_default, w as formula_exports, x as SequenceInput_default, y as useConcentrationUnits, z as defineWellPlate } from "./useListReorder-QqJc1dpX.js";
-import { C as defineWellPlateControlProps, S as defineDoseDesignControlModel, T as defineWellPlateDoseControlProps, _ as SampleSelector_default, a as useReagentSeries, c as InstrumentStatusPanels_default, d as ChemicalFormula_default, f as AdductText_default, g as SampleHierarchyTree_default, h as useProtocolTemplates, i as generateDilutionSeries, l as InstrumentStateBadge_default, m as ProtocolStepEditor_default, n as DEFAULT_PRESETS, o as ResourceCard_default, p as ScientificNumber_default, r as DEFAULT_UNITS, s as TimeRangeInput_default, u as SequenceProgressBar_default, v as useSampleGroups, w as defineWellPlateDoseComponentBindings, x as defineDoseCalculatorControlProps } from "./lab-CbdDLAVr.js";
+import { C as defineWellPlateControlProps, S as defineDoseDesignControlModel, T as defineWellPlateDoseControlProps, _ as SampleSelector_default, a as useReagentSeries, c as InstrumentStatusPanels_default, d as ChemicalFormula_default, f as AdductText_default, g as SampleHierarchyTree_default, h as useProtocolTemplates, i as generateDilutionSeries, l as InstrumentStateBadge_default, m as ProtocolStepEditor_default, n as DEFAULT_PRESETS, o as ResourceCard_default, p as ScientificNumber_default, r as DEFAULT_UNITS, s as TimeRangeInput_default, u as SequenceProgressBar_default, v as useSampleGroups, w as defineWellPlateDoseComponentBindings, x as defineDoseCalculatorControlProps } from "./lab-C3BmZ2lI.js";
 import { C as hexToHsl, E as sampleTypeMarker, S as deriveShade, T as WellPlate_default, _ as mintPlotlyTemplate, b as PlateEditor_default, g as ChartContainer_default, h as PlotlyChart_default, n as ScheduleCalendar_default, r as useScheduleDrag, t as useRackEditor, v as DoseCalculator_default, w as hslToHex, y as dose_exports } from "./useRackEditor-BHGM1Ngz.js";
 export { AdductText_default as AdductText, ChartContainer_default as ChartContainer, ChemicalFormula_default as ChemicalFormula, ConcentrationInput_default as ConcentrationInput, DEFAULT_PRESETS, DEFAULT_UNITS, DoseCalculator_default as DoseCalculator, FormulaInput_default as FormulaInput, InstrumentStateBadge_default as InstrumentStateBadge, InstrumentStatusPanels_default as InstrumentStatusPanels, MoleculeInput_default as MoleculeInput, PlateEditor_default as PlateEditor, PlotlyChart_default as PlotlyChart, ProtocolStepEditor_default as ProtocolStepEditor, ResourceCard_default as ResourceCard, SampleHierarchyTree_default as SampleHierarchyTree, SampleSelector_default as SampleSelector, ScheduleCalendar_default as ScheduleCalendar, ScientificNumber_default as ScientificNumber, SequenceInput_default as SequenceInput, SequenceProgressBar_default as SequenceProgressBar, StepWizard_default as StepWizard, TimeRangeInput_default as TimeRangeInput, WellPlate_default as WellPlate, defineDoseCalculatorControlProps, defineDoseDesignControlModel, definePlateEditor, defineWellPlate, defineWellPlateControlProps, defineWellPlateDoseComponentBindings, defineWellPlateDoseControlProps, deriveShade, dose_exports as dose, formula_exports as formula, generateDilutionSeries, hexToHsl, hslToHex, mintPlotlyTemplate, sampleTypeMarker, time_exports as time, useConcentrationUnits, useProtocolTemplates, useRackEditor, useReagentSeries, useSampleGroups, useScheduleDrag, useSequenceUtils };

package/dist/styles.css

@@ -88,17 +88,17 @@
   text-decoration: none;
 }
 
-.mint-status-panels__tabs[data-v-3c05755e] { padding: 0 1rem;
+.mint-status-panels__tabs[data-v-1a9246f6] { padding: 0 var(--mint-section-card-inset);
 }
-.mint-status-panels__body[data-v-3c05755e] { padding: 0.75rem 1rem;
+.mint-status-panels__body[data-v-1a9246f6] { padding: 0.75rem var(--mint-section-card-inset);
 }
-.mint-status-panels__bar[data-v-3c05755e] { display: flex; flex-direction: column; gap: 0.5rem;
+.mint-status-panels__bar[data-v-1a9246f6] { display: flex; flex-direction: column; gap: 0.5rem;
 }
-.mint-status-panels__series[data-v-3c05755e] { align-self: flex-end;
+.mint-status-panels__series[data-v-1a9246f6] { align-self: flex-end;
 }
-.mint-status-panels__kv[data-v-3c05755e] { margin: 0; padding: 0.25rem 1rem 0.5rem;
+.mint-status-panels__kv[data-v-1a9246f6] { margin: 0; padding: 0.25rem var(--mint-section-card-inset) 0.5rem;
 }
-.mint-status-panels__kv-row[data-v-3c05755e] {
+.mint-status-panels__kv-row[data-v-1a9246f6] {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
@@ -106,11 +106,11 @@
   padding: 0.4375rem 0;
   border-bottom: 1px solid var(--border-light);
 }
-.mint-status-panels__kv-row[data-v-3c05755e]:last-child { border-bottom: 0;
+.mint-status-panels__kv-row[data-v-1a9246f6]:last-child { border-bottom: 0;
 }
-.mint-status-panels__kv-key[data-v-3c05755e] { font-size: 0.75rem; color: var(--text-secondary);
+.mint-status-panels__kv-key[data-v-1a9246f6] { font-size: 0.75rem; color: var(--text-secondary);
 }
-.mint-status-panels__kv-value[data-v-3c05755e] {
+.mint-status-panels__kv-value[data-v-1a9246f6] {
   margin: 0;
   min-width: 0;
   font-family: var(--font-mono);
@@ -443,6 +443,9 @@
   --mint-gutter: 0.5rem;
   /* Distance from the outermost cards to the window edge, in every density. */
   --mint-page-inset: 1rem;
+  /* Text inset of a SectionCard: its title, row text and table edge columns
+     start here, and page chrome over a card (breadcrumbs) can line up with it. */
+  --mint-section-card-inset: 0.75rem;
 
   /* Semantic colors */
   --mint-success: #10B981;
@@ -686,6 +689,7 @@ html.dark [data-palette="forest"] {
 /* Comfortable density (html[data-density], written by the settings store):
    the pre-v2 control heights and a wider gutter. */
 [data-density="comfortable"] {
+  --mint-section-card-inset: 0.875rem;
   --form-height-sm: 2rem;
   --form-height-md: 2.25rem;
   --form-height-lg: 3rem;
@@ -6900,6 +6904,11 @@ html.dark {
   min-height: 0;
 }
 
+/* A collapsed fill card gives its track back to its siblings. */
+.mint-section-card--fill.mint-section-card--collapsed {
+  flex: none;
+}
+
 .mint-section-card--fill .mint-section-card__body {
   flex: 1;
   min-height: 0;
@@ -6914,7 +6923,7 @@ html.dark {
   min-height: 2.5rem;
   /* 4px block padding: a 28px header control plus padding plus the 1px rule
      stays inside the 40px strip (6px made it 41px). */
-  padding: 0.25rem 0.625rem 0.25rem 0.75rem;
+  padding: 0.25rem 0.625rem 0.25rem var(--mint-section-card-inset);
   border-bottom: 1px solid var(--border-color);
   flex-shrink: 0;
 }
@@ -6923,6 +6932,45 @@ html.dark {
   border-bottom-color: var(--border-light);
 }
 
+/* A collapsed card is its header alone: no rule under it. */
+.mint-section-card__header--collapsed {
+  border-bottom-color: transparent;
+}
+
+.mint-section-card__toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--mint-section-card-gap);
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
+.mint-section-card__toggle:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring-offset);
+  border-radius: var(--radius-sm);
+}
+
+.mint-section-card__chevron {
+  width: 0.875rem;
+  height: 0.875rem;
+  color: var(--text-muted);
+  transition: transform var(--mint-transition);
+}
+
+.mint-section-card__toggle[aria-expanded="false"] .mint-section-card__chevron {
+  transform: rotate(-90deg);
+}
+
+.mint-section-card__toggle:hover .mint-section-card__chevron {
+  color: var(--text-secondary);
+}
+
 /* Muted icon, no tinted chip: every accent renders the same. */
 .mint-section-card__icon-chip {
   display: inline-flex;
@@ -6970,7 +7018,8 @@ html.dark {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0.5rem 1rem;
+  /* Text starts on the card inset; controls end where the header's do. */
+  padding: 0.5rem 0.625rem 0.5rem var(--mint-section-card-inset);
   border-top: 1px solid var(--border-color);
   background: var(--bg-primary);
   font-size: 0.75rem;
@@ -6991,7 +7040,7 @@ html.dark {
   display: flex;
   align-items: center;
   gap: var(--mint-section-card-gap);
-  padding: 0.375rem 0.75rem;
+  padding: 0.375rem var(--mint-section-card-inset);
   background: var(--bg-secondary);
   transition: background-color var(--mint-transition);
 }
@@ -7026,14 +7075,28 @@ button.mint-section-card__row:hover {
 /* Comfortable density gives the header and rows back their height. */
 [data-density="comfortable"] .mint-section-card__header {
   min-height: 2.75rem;
-  padding: 0.25rem 0.75rem 0.25rem 0.875rem;
+  padding-right: 0.75rem;
+}
+
+[data-density="comfortable"] .mint-section-card__footer {
+  padding-right: 0.75rem;
 }
 
 [data-density="comfortable"] .mint-section-card__row {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
-  /* Same left inset as the header, so row content lines up under the header. */
-  padding-left: 0.875rem;
+}
+
+/* A table that is the card body's own child starts and ends on the card's text
+   inset, so its first column lines up under the header title. A table inside a
+   padded wrapper keeps its padding, and the checkbox and actions columns stay
+   centred controls. The table's size padding uses !important, so this must too. */
+.mint-section-card__body > .mint-dataframe :is(.mint-dataframe__th, .mint-dataframe__td):first-child:not(.mint-dataframe__th--checkbox, .mint-dataframe__td--checkbox) {
+  padding-left: var(--mint-section-card-inset) !important;
+}
+
+.mint-section-card__body > .mint-dataframe :is(.mint-dataframe__th, .mint-dataframe__td):last-child:not(.mint-dataframe__th--actions, .mint-dataframe__td--actions) {
+  padding-right: var(--mint-section-card-inset) !important;
 }
 
 /* SecretInput — plugin secret settings field with a set / not set / environment status.

package/dist/styles.d.ts

@@ -0,0 +1 @@
+export {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morscherlab/mint-sdk",
-  "version": "1.4.5",
+  "version": "1.4.6",
   "description": "MINT Platform SDK — Vue 3 components, composables, and types for plugin development. MINT = Mass-spec Infrastructure for Next-generation Toolkits.",
   "type": "module",
   "main": "./dist/index.js",
@@ -51,7 +51,10 @@
       "types": "./dist/types/index.d.ts",
       "import": "./dist/types/index.js"
     },
-    "./styles": "./dist/styles.css"
+    "./styles": {
+      "types": "./dist/styles.d.ts",
+      "default": "./dist/styles.css"
+    }
   },
   "files": [
     "dist",

package/src/__tests__/components/SectionCard.test.ts

@@ -178,4 +178,37 @@ describe('SectionCard', () => {
       expect(withoutFooter.find('.mint-section-card__footer').exists()).toBe(false)
     })
   })
+
+  describe('collapsible', () => {
+    it('should hide the body and emit the collapsed state when a collapsible header is clicked', async () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Alerts', count: 3, collapsible: true },
+        slots: { default: '<p class="body-probe">rows</p>', actions: '<button class="action-probe">Export</button>' },
+        attachTo: document.body,
+      })
+      const toggle = wrapper.find('button.mint-section-card__toggle')
+      expect(toggle.attributes('aria-expanded')).toBe('true')
+      expect(wrapper.find('h2.mint-section-card__title > button').element).toBe(toggle.element)
+      expect(toggle.text()).toContain('Alerts')
+      expect(toggle.find('.action-probe').exists()).toBe(false)
+
+      await toggle.trigger('click')
+
+      expect(toggle.attributes('aria-expanded')).toBe('false')
+      expect(wrapper.find('.mint-section-card__body').isVisible()).toBe(false)
+      expect(wrapper.emitted('update:collapsed')).toEqual([[true]])
+      wrapper.unmount()
+    })
+
+    it('should keep the body visible with no toggle when collapsed is set without collapsible', () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Alerts', collapsed: true },
+        slots: { default: '<p class="body-probe">rows</p>' },
+        attachTo: document.body,
+      })
+      expect(wrapper.find('.mint-section-card__toggle').exists()).toBe(false)
+      expect(wrapper.find('.mint-section-card__body').isVisible()).toBe(true)
+      wrapper.unmount()
+    })
+  })
 })

package/src/components/InstrumentStatusPanels.vue

@@ -105,11 +105,11 @@ function formatValue(value: string | number | boolean | null): string {
 </template>
 
 <style scoped>
-.mint-status-panels__tabs { padding: 0 1rem; }
-.mint-status-panels__body { padding: 0.75rem 1rem; }
+.mint-status-panels__tabs { padding: 0 var(--mint-section-card-inset); }
+.mint-status-panels__body { padding: 0.75rem var(--mint-section-card-inset); }
 .mint-status-panels__bar { display: flex; flex-direction: column; gap: 0.5rem; }
 .mint-status-panels__series { align-self: flex-end; }
-.mint-status-panels__kv { margin: 0; padding: 0.25rem 1rem 0.5rem; }
+.mint-status-panels__kv { margin: 0; padding: 0.25rem var(--mint-section-card-inset) 0.5rem; }
 .mint-status-panels__kv-row {
   display: flex;
   align-items: baseline;

package/src/components/SectionCard.vue

@@ -2,7 +2,7 @@
 /** 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 { computed, useId } from 'vue'
 import type { SectionCardAccent, SectionCardDivider } from '../types'
 
 interface Props {
@@ -23,6 +23,8 @@ interface Props {
    * definite height (a flex or grid track).
    */
   fill?: boolean
+  /** The title toggles the body; bind `v-model:collapsed` to control or keep the state. */
+  collapsible?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -32,8 +34,14 @@ const props = withDefaults(defineProps<Props>(), {
   uppercase: false,
   divider: 'strong',
   fill: false,
+  collapsible: false,
 })
 
+const collapsed = defineModel<boolean>('collapsed', { default: false })
+const bodyId = useId()
+/** `collapsed` hides content only on a card that also shows the toggle to open it again. */
+const hidden = computed(() => props.collapsible && collapsed.value)
+
 const iconPaths = computed(() =>
   props.icon === undefined ? [] : Array.isArray(props.icon) ? props.icon : [props.icon],
 )
@@ -41,6 +49,7 @@ const iconPaths = computed(() =>
 const headerClasses = computed(() => [
   'mint-section-card__header',
   props.divider === 'light' ? 'mint-section-card__header--divider-light' : '',
+  hidden.value ? 'mint-section-card__header--collapsed' : '',
 ])
 
 const titleClasses = computed(() => [
@@ -51,6 +60,7 @@ const titleClasses = computed(() => [
 const cardClasses = computed(() => [
   'mint-section-card',
   props.fill ? 'mint-section-card--fill' : '',
+  hidden.value ? 'mint-section-card--collapsed' : '',
 ])
 </script>
 
@@ -74,20 +84,46 @@ const cardClasses = computed(() => [
           <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>
+      <!-- Disclosure pattern: the button sits inside the heading, never the reverse. -->
+      <h2 :class="titleClasses">
+        <button
+          v-if="collapsible"
+          type="button"
+          class="mint-section-card__toggle"
+          :aria-expanded="!collapsed"
+          :aria-controls="bodyId"
+          @click="collapsed = !collapsed"
+        >
+          {{ title }}
+          <span v-if="count !== undefined" class="mint-section-card__count">{{ count }}</span>
+          <svg
+            class="mint-section-card__chevron"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+          >
+            <path d="m6 9 6 6 6-6" />
+          </svg>
+        </button>
+        <template v-else>{{ title }}</template>
+      </h2>
+      <span v-if="count !== undefined && !collapsible" 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">
+    <div v-if="$slots.toolbar" v-show="!hidden" class="mint-section-card__toolbar">
       <slot name="toolbar" />
     </div>
-    <div class="mint-section-card__body">
+    <div :id="bodyId" v-show="!hidden" class="mint-section-card__body">
       <slot />
     </div>
-    <div v-if="$slots.footer" class="mint-section-card__footer">
+    <div v-if="$slots.footer" v-show="!hidden" class="mint-section-card__footer">
       <slot name="footer" />
     </div>
   </section>

package/src/styles/components/section-card.css

@@ -27,6 +27,11 @@
   min-height: 0;
 }
 
+/* A collapsed fill card gives its track back to its siblings. */
+.mint-section-card--fill.mint-section-card--collapsed {
+  flex: none;
+}
+
 .mint-section-card--fill .mint-section-card__body {
   flex: 1;
   min-height: 0;
@@ -41,7 +46,7 @@
   min-height: 2.5rem;
   /* 4px block padding: a 28px header control plus padding plus the 1px rule
      stays inside the 40px strip (6px made it 41px). */
-  padding: 0.25rem 0.625rem 0.25rem 0.75rem;
+  padding: 0.25rem 0.625rem 0.25rem var(--mint-section-card-inset);
   border-bottom: 1px solid var(--border-color);
   flex-shrink: 0;
 }
@@ -50,6 +55,45 @@
   border-bottom-color: var(--border-light);
 }
 
+/* A collapsed card is its header alone: no rule under it. */
+.mint-section-card__header--collapsed {
+  border-bottom-color: transparent;
+}
+
+.mint-section-card__toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--mint-section-card-gap);
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
+.mint-section-card__toggle:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring-offset);
+  border-radius: var(--radius-sm);
+}
+
+.mint-section-card__chevron {
+  width: 0.875rem;
+  height: 0.875rem;
+  color: var(--text-muted);
+  transition: transform var(--mint-transition);
+}
+
+.mint-section-card__toggle[aria-expanded="false"] .mint-section-card__chevron {
+  transform: rotate(-90deg);
+}
+
+.mint-section-card__toggle:hover .mint-section-card__chevron {
+  color: var(--text-secondary);
+}
+
 /* Muted icon, no tinted chip: every accent renders the same. */
 .mint-section-card__icon-chip {
   display: inline-flex;
@@ -97,7 +141,8 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0.5rem 1rem;
+  /* Text starts on the card inset; controls end where the header's do. */
+  padding: 0.5rem 0.625rem 0.5rem var(--mint-section-card-inset);
   border-top: 1px solid var(--border-color);
   background: var(--bg-primary);
   font-size: 0.75rem;
@@ -118,7 +163,7 @@
   display: flex;
   align-items: center;
   gap: var(--mint-section-card-gap);
-  padding: 0.375rem 0.75rem;
+  padding: 0.375rem var(--mint-section-card-inset);
   background: var(--bg-secondary);
   transition: background-color var(--mint-transition);
 }
@@ -153,12 +198,26 @@ button.mint-section-card__row:hover {
 /* Comfortable density gives the header and rows back their height. */
 [data-density="comfortable"] .mint-section-card__header {
   min-height: 2.75rem;
-  padding: 0.25rem 0.75rem 0.25rem 0.875rem;
+  padding-right: 0.75rem;
+}
+
+[data-density="comfortable"] .mint-section-card__footer {
+  padding-right: 0.75rem;
 }
 
 [data-density="comfortable"] .mint-section-card__row {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
-  /* Same left inset as the header, so row content lines up under the header. */
-  padding-left: 0.875rem;
+}
+
+/* A table that is the card body's own child starts and ends on the card's text
+   inset, so its first column lines up under the header title. A table inside a
+   padded wrapper keeps its padding, and the checkbox and actions columns stay
+   centred controls. The table's size padding uses !important, so this must too. */
+.mint-section-card__body > .mint-dataframe :is(.mint-dataframe__th, .mint-dataframe__td):first-child:not(.mint-dataframe__th--checkbox, .mint-dataframe__td--checkbox) {
+  padding-left: var(--mint-section-card-inset) !important;
+}
+
+.mint-section-card__body > .mint-dataframe :is(.mint-dataframe__th, .mint-dataframe__td):last-child:not(.mint-dataframe__th--actions, .mint-dataframe__td--actions) {
+  padding-right: var(--mint-section-card-inset) !important;
 }

package/src/styles/variables.css

@@ -134,6 +134,9 @@
   --mint-gutter: 0.5rem;
   /* Distance from the outermost cards to the window edge, in every density. */
   --mint-page-inset: 1rem;
+  /* Text inset of a SectionCard: its title, row text and table edge columns
+     start here, and page chrome over a card (breadcrumbs) can line up with it. */
+  --mint-section-card-inset: 0.75rem;
 
   /* Semantic colors */
   --mint-success: #10B981;
@@ -377,6 +380,7 @@ html.dark [data-palette="forest"] {
 /* Comfortable density (html[data-density], written by the settings store):
    the pre-v2 control heights and a wider gutter. */
 [data-density="comfortable"] {
+  --mint-section-card-inset: 0.875rem;
   --form-height-sm: 2rem;
   --form-height-md: 2.25rem;
   --form-height-lg: 3rem;