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

package/dist/styles.css

@@ -19708,6 +19708,145 @@ to { transform: rotate(360deg);
     animation: none;
 }
 }
+/* SectionCard — the MINT 1.1 one-card system.
+ *
+ * One card per page region: 12px radius, one shadow token (--card-shadow),
+ * a single header strip, and hairline-separated regions inside — never a
+ * card nested in a card.
+ */
+.mint-section-card {
+  display: flex;
+  flex-direction: column;
+  border-radius: 12px;
+  border: 1px solid var(--border-color);
+  background: var(--bg-secondary);
+  box-shadow: var(--card-shadow);
+  overflow: hidden;
+  transition: background-color var(--mint-transition), border-color var(--mint-transition);
+}
+
+/* Fill the height the parent offers: the body takes the slack and scrolls,
+ * so the header and footer stay pinned to the card's edges. */
+.mint-section-card--fill {
+  flex: 1;
+  min-height: 0;
+}
+.mint-section-card--fill .mint-section-card__body {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
+.mint-section-card__header {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  padding: 0.6875rem 1rem;
+  border-bottom: 1px solid var(--border-color);
+  flex-shrink: 0;
+}
+.mint-section-card__header--divider-light {
+  border-bottom-color: var(--border-light);
+}
+.mint-section-card__icon-chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1.375rem;
+  height: 1.375rem;
+  border-radius: 6px;
+}
+.mint-section-card__icon {
+  width: 0.8125rem;
+  height: 0.8125rem;
+}
+.mint-section-card__icon-chip--primary {
+  background: var(--color-primary-soft);
+  color: var(--color-primary);
+}
+.mint-section-card__icon-chip--experiment {
+  background: var(--color-experiment-soft);
+  color: var(--color-experiment);
+}
+.mint-section-card__icon-chip--project {
+  background: var(--color-project-soft);
+  color: var(--color-project);
+}
+.mint-section-card__icon-chip--success {
+  background: var(--mint-success-bg);
+  color: var(--mint-success);
+}
+.mint-section-card__icon-chip--error {
+  background: var(--mint-error-bg);
+  color: var(--mint-error);
+}
+.mint-section-card__icon-chip--warning {
+  background: var(--mint-warning-bg);
+  color: var(--mint-warning);
+}
+.mint-section-card__icon-chip--info {
+  background: var(--mint-info-bg);
+  color: var(--mint-info);
+}
+.mint-section-card__title {
+  margin: 0;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+.mint-section-card__title--uppercase {
+  font-size: 0.75rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--text-secondary);
+}
+.mint-section-card__count {
+  font-family: 'Fira Code', monospace;
+  font-size: 0.6875rem;
+  color: var(--text-muted);
+}
+.mint-section-card__spacer {
+  flex: 1;
+}
+.mint-section-card__toolbar {
+  flex-shrink: 0;
+}
+.mint-section-card__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 1rem;
+  border-top: 1px solid var(--border-color);
+  background: var(--bg-primary);
+  flex-shrink: 0;
+}
+
+/* Hairline row helpers — regions inside a card separate with 1px lines,
+ * rendered by a 1px gap over a hairline-colored track. */
+.mint-section-card__rows {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  background: var(--border-light);
+}
+.mint-section-card__row {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  padding: 0.5625rem 1rem;
+  background: var(--bg-secondary);
+  transition: background-color var(--mint-transition);
+}
+a.mint-section-card__row,
+button.mint-section-card__row {
+  cursor: pointer;
+  color: inherit;
+  text-decoration: none;
+}
+a.mint-section-card__row:hover,
+button.mint-section-card__row:hover {
+  background: var(--bg-primary);
+}
 .mint-artifact-save-dialog {
   display: flex;
   flex-direction: column;
@@ -19824,6 +19963,18 @@ to { transform: rotate(360deg);
   --color-cta-hover: #EA580C;
   --color-purple: #8B5CF6;
 
+  /* Entity accent colors — experiments (cyan) and projects (sky), from the
+     MINT 1.1 card system. -soft backs icon chips and pills, -border outlines
+     pills that sit on a card surface. */
+  --color-experiment: #06B6D4;
+  --color-experiment-hover: #0891B2;
+  --color-experiment-soft: rgba(6, 182, 212, 0.12);
+  --color-experiment-border: rgba(6, 182, 212, 0.3);
+  --color-project: #0EA5E9;
+  --color-project-hover: #0284C7;
+  --color-project-soft: rgba(14, 165, 233, 0.12);
+  --color-project-border: rgba(14, 165, 233, 0.32);
+
   /* MINT brand mark — used for browser theme-color, marketing chrome, app icon background */
   --mint-brand: #7BD0B5;
   --mint-brand-hover: #5FB89A;
@@ -19839,6 +19990,8 @@ to { transform: rotate(360deg);
   --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  /* The MINT 1.1 card system uses exactly one shadow for every card. */
+  --card-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.04), 0 1px 3px 0 rgb(0 0 0 / 0.06);
 
   /* Border radius */
   --radius-sm: 0.25rem;
@@ -19935,6 +20088,17 @@ html.dark {
   --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.2);
   --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.2);
   --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.2);
+  --card-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.24), 0 1px 3px 0 rgb(0 0 0 / 0.32);
+
+  /* Entity accent colors - Dark mode */
+  --color-experiment: #22D3EE;
+  --color-experiment-hover: #67E8F9;
+  --color-experiment-soft: rgba(34, 211, 238, 0.16);
+  --color-experiment-border: rgba(34, 211, 238, 0.36);
+  --color-project: #38BDF8;
+  --color-project-hover: #7DD3FC;
+  --color-project-soft: rgba(56, 189, 248, 0.16);
+  --color-project-border: rgba(56, 189, 248, 0.38);
 
   /* Semantic colors - Dark mode */
   --mint-success-bg: rgba(16, 185, 129, 0.15);
@@ -25587,6 +25751,143 @@ code, pre {
 .mint-sample-legend__add-text--lg {
   font-size: 1rem;
 }
+/* SectionCard — the MINT 1.1 one-card system.
+ *
+ * One card per page region: 12px radius, one shadow token (--card-shadow),
+ * a single header strip, and hairline-separated regions inside — never a
+ * card nested in a card.
+ */
+.mint-section-card {
+  display: flex;
+  flex-direction: column;
+  border-radius: 12px;
+  border: 1px solid var(--border-color);
+  background: var(--bg-secondary);
+  box-shadow: var(--card-shadow);
+  overflow: hidden;
+  transition: background-color var(--mint-transition), border-color var(--mint-transition);
+}
+/* Fill the height the parent offers: the body takes the slack and scrolls,
+ * so the header and footer stay pinned to the card's edges. */
+.mint-section-card--fill {
+  flex: 1;
+  min-height: 0;
+}
+.mint-section-card--fill .mint-section-card__body {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
+.mint-section-card__header {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  padding: 0.6875rem 1rem;
+  border-bottom: 1px solid var(--border-color);
+  flex-shrink: 0;
+}
+.mint-section-card__header--divider-light {
+  border-bottom-color: var(--border-light);
+}
+.mint-section-card__icon-chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1.375rem;
+  height: 1.375rem;
+  border-radius: 6px;
+}
+.mint-section-card__icon {
+  width: 0.8125rem;
+  height: 0.8125rem;
+}
+.mint-section-card__icon-chip--primary {
+  background: var(--color-primary-soft);
+  color: var(--color-primary);
+}
+.mint-section-card__icon-chip--experiment {
+  background: var(--color-experiment-soft);
+  color: var(--color-experiment);
+}
+.mint-section-card__icon-chip--project {
+  background: var(--color-project-soft);
+  color: var(--color-project);
+}
+.mint-section-card__icon-chip--success {
+  background: var(--mint-success-bg);
+  color: var(--mint-success);
+}
+.mint-section-card__icon-chip--error {
+  background: var(--mint-error-bg);
+  color: var(--mint-error);
+}
+.mint-section-card__icon-chip--warning {
+  background: var(--mint-warning-bg);
+  color: var(--mint-warning);
+}
+.mint-section-card__icon-chip--info {
+  background: var(--mint-info-bg);
+  color: var(--mint-info);
+}
+.mint-section-card__title {
+  margin: 0;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+.mint-section-card__title--uppercase {
+  font-size: 0.75rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--text-secondary);
+}
+.mint-section-card__count {
+  font-family: 'Fira Code', monospace;
+  font-size: 0.6875rem;
+  color: var(--text-muted);
+}
+.mint-section-card__spacer {
+  flex: 1;
+}
+.mint-section-card__toolbar {
+  flex-shrink: 0;
+}
+.mint-section-card__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 1rem;
+  border-top: 1px solid var(--border-color);
+  background: var(--bg-primary);
+  flex-shrink: 0;
+}
+/* Hairline row helpers — regions inside a card separate with 1px lines,
+ * rendered by a 1px gap over a hairline-colored track. */
+.mint-section-card__rows {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  background: var(--border-light);
+}
+.mint-section-card__row {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  padding: 0.5625rem 1rem;
+  background: var(--bg-secondary);
+  transition: background-color var(--mint-transition);
+}
+a.mint-section-card__row,
+button.mint-section-card__row {
+  cursor: pointer;
+  color: inherit;
+  text-decoration: none;
+}
+a.mint-section-card__row:hover,
+button.mint-section-card__row:hover {
+  background: var(--bg-primary);
+}
 /* BaseSelect Component Styles */
 .mint-select {
   position: relative;

package/dist/tailwind.preset.d.ts

@@ -16,6 +16,10 @@ declare const mintPreset: {
                     'warning-hover': string;
                     brand: string;
                     'brand-hover': string;
+                    experiment: string;
+                    'experiment-hover': string;
+                    project: string;
+                    'project-hover': string;
                 };
                 bg: {
                     primary: string;
@@ -48,6 +52,7 @@ declare const mintPreset: {
                 mint: string;
                 'mint-md': string;
                 'mint-lg': string;
+                'mint-card': string;
             };
             transitionDuration: {
                 mint: string;

package/dist/tailwind.preset.js

@@ -14,7 +14,11 @@ var mintPreset = { theme: { extend: {
 			warning: "var(--mint-warning)",
 			"warning-hover": "var(--mint-warning-hover)",
 			brand: "var(--mint-brand)",
-			"brand-hover": "var(--mint-brand-hover)"
+			"brand-hover": "var(--mint-brand-hover)",
+			experiment: "var(--color-experiment)",
+			"experiment-hover": "var(--color-experiment-hover)",
+			project: "var(--color-project)",
+			"project-hover": "var(--color-project-hover)"
 		},
 		bg: {
 			primary: "var(--mint-bg-primary)",
@@ -56,7 +60,8 @@ var mintPreset = { theme: { extend: {
 	boxShadow: {
 		mint: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
 		"mint-md": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
-		"mint-lg": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)"
+		"mint-lg": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+		"mint-card": "var(--card-shadow)"
 	},
 	transitionDuration: { mint: "150ms" }
 } } };

package/dist/tailwind.preset.js.map

@@ -1 +1 @@
-{"version":3,"file":"tailwind.preset.js","names":[],"sources":["../src/tailwind.preset.ts"],"sourcesContent":["import type { Config } from 'tailwindcss'\n\nconst mintPreset = {\n  theme: {\n    extend: {\n      colors: {\n        mint: {\n          primary: 'var(--color-primary)',\n          'primary-hover': 'var(--color-primary-hover)',\n          'primary-light': 'var(--color-primary-light)',\n          cta: 'var(--color-cta)',\n          'cta-hover': 'var(--color-cta-hover)',\n          danger: 'var(--mint-error)',\n          'danger-hover': 'var(--mint-error-hover)',\n          success: 'var(--mint-success)',\n          'success-hover': 'var(--mint-success-hover)',\n          warning: 'var(--mint-warning)',\n          'warning-hover': 'var(--mint-warning-hover)',\n          brand: 'var(--mint-brand)',\n          'brand-hover': 'var(--mint-brand-hover)',\n        },\n        bg: {\n          primary: 'var(--mint-bg-primary)',\n          secondary: 'var(--mint-bg-secondary)',\n          card: 'var(--mint-bg-card)',\n          hover: 'var(--mint-bg-hover)',\n          input: 'var(--mint-bg-input)',\n        },\n        text: {\n          primary: 'var(--mint-text-primary)',\n          secondary: 'var(--mint-text-secondary)',\n          muted: 'var(--mint-text-muted)',\n          inverse: 'var(--mint-text-inverse)',\n        },\n        border: {\n          DEFAULT: 'var(--mint-border)',\n          focus: 'var(--mint-border-focus)',\n        },\n      },\n      fontFamily: {\n        sans: ['Fira Sans', 'system-ui', '-apple-system', 'sans-serif'],\n        mono: ['Fira Code', 'ui-monospace', 'SFMono-Regular', 'monospace'],\n      },\n      borderRadius: {\n        mint: '0.5rem',\n        'mint-sm': '0.375rem',\n        'mint-lg': '0.75rem',\n      },\n      boxShadow: {\n        mint: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',\n        'mint-md': '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',\n        'mint-lg': '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',\n      },\n      transitionDuration: {\n        mint: '150ms',\n      },\n    },\n  },\n} satisfies Partial<Config>\n\nexport default mintPreset\n"],"mappings":";AAEA,IAAM,aAAa,EACjB,OAAO,EACL,QAAQ;CACN,QAAQ;EACN,MAAM;GACJ,SAAS;GACT,iBAAiB;GACjB,iBAAiB;GACjB,KAAK;GACL,aAAa;GACb,QAAQ;GACR,gBAAgB;GAChB,SAAS;GACT,iBAAiB;GACjB,SAAS;GACT,iBAAiB;GACjB,OAAO;GACP,eAAe;GAChB;EACD,IAAI;GACF,SAAS;GACT,WAAW;GACX,MAAM;GACN,OAAO;GACP,OAAO;GACR;EACD,MAAM;GACJ,SAAS;GACT,WAAW;GACX,OAAO;GACP,SAAS;GACV;EACD,QAAQ;GACN,SAAS;GACT,OAAO;GACR;EACF;CACD,YAAY;EACV,MAAM;GAAC;GAAa;GAAa;GAAiB;GAAa;EAC/D,MAAM;GAAC;GAAa;GAAgB;GAAkB;GAAY;EACnE;CACD,cAAc;EACZ,MAAM;EACN,WAAW;EACX,WAAW;EACZ;CACD,WAAW;EACT,MAAM;EACN,WAAW;EACX,WAAW;EACZ;CACD,oBAAoB,EAClB,MAAM,SACP;CACF,EACF,EACF"}
+{"version":3,"file":"tailwind.preset.js","names":[],"sources":["../src/tailwind.preset.ts"],"sourcesContent":["import type { Config } from 'tailwindcss'\n\nconst mintPreset = {\n  theme: {\n    extend: {\n      colors: {\n        mint: {\n          primary: 'var(--color-primary)',\n          'primary-hover': 'var(--color-primary-hover)',\n          'primary-light': 'var(--color-primary-light)',\n          cta: 'var(--color-cta)',\n          'cta-hover': 'var(--color-cta-hover)',\n          danger: 'var(--mint-error)',\n          'danger-hover': 'var(--mint-error-hover)',\n          success: 'var(--mint-success)',\n          'success-hover': 'var(--mint-success-hover)',\n          warning: 'var(--mint-warning)',\n          'warning-hover': 'var(--mint-warning-hover)',\n          brand: 'var(--mint-brand)',\n          'brand-hover': 'var(--mint-brand-hover)',\n          experiment: 'var(--color-experiment)',\n          'experiment-hover': 'var(--color-experiment-hover)',\n          project: 'var(--color-project)',\n          'project-hover': 'var(--color-project-hover)',\n        },\n        bg: {\n          primary: 'var(--mint-bg-primary)',\n          secondary: 'var(--mint-bg-secondary)',\n          card: 'var(--mint-bg-card)',\n          hover: 'var(--mint-bg-hover)',\n          input: 'var(--mint-bg-input)',\n        },\n        text: {\n          primary: 'var(--mint-text-primary)',\n          secondary: 'var(--mint-text-secondary)',\n          muted: 'var(--mint-text-muted)',\n          inverse: 'var(--mint-text-inverse)',\n        },\n        border: {\n          DEFAULT: 'var(--mint-border)',\n          focus: 'var(--mint-border-focus)',\n        },\n      },\n      fontFamily: {\n        sans: ['Fira Sans', 'system-ui', '-apple-system', 'sans-serif'],\n        mono: ['Fira Code', 'ui-monospace', 'SFMono-Regular', 'monospace'],\n      },\n      borderRadius: {\n        mint: '0.5rem',\n        'mint-sm': '0.375rem',\n        'mint-lg': '0.75rem',\n      },\n      boxShadow: {\n        mint: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',\n        'mint-md': '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',\n        'mint-lg': '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',\n        'mint-card': 'var(--card-shadow)',\n      },\n      transitionDuration: {\n        mint: '150ms',\n      },\n    },\n  },\n} satisfies Partial<Config>\n\nexport default mintPreset\n"],"mappings":";AAEA,IAAM,aAAa,EACjB,OAAO,EACL,QAAQ;CACN,QAAQ;EACN,MAAM;GACJ,SAAS;GACT,iBAAiB;GACjB,iBAAiB;GACjB,KAAK;GACL,aAAa;GACb,QAAQ;GACR,gBAAgB;GAChB,SAAS;GACT,iBAAiB;GACjB,SAAS;GACT,iBAAiB;GACjB,OAAO;GACP,eAAe;GACf,YAAY;GACZ,oBAAoB;GACpB,SAAS;GACT,iBAAiB;GAClB;EACD,IAAI;GACF,SAAS;GACT,WAAW;GACX,MAAM;GACN,OAAO;GACP,OAAO;GACR;EACD,MAAM;GACJ,SAAS;GACT,WAAW;GACX,OAAO;GACP,SAAS;GACV;EACD,QAAQ;GACN,SAAS;GACT,OAAO;GACR;EACF;CACD,YAAY;EACV,MAAM;GAAC;GAAa;GAAa;GAAiB;GAAa;EAC/D,MAAM;GAAC;GAAa;GAAgB;GAAkB;GAAY;EACnE;CACD,cAAc;EACZ,MAAM;EACN,WAAW;EACX,WAAW;EACZ;CACD,WAAW;EACT,MAAM;EACN,WAAW;EACX,WAAW;EACX,aAAa;EACd;CACD,oBAAoB,EAClB,MAAM,SACP;CACF,EACF,EACF"}

package/dist/types/components.d.ts

@@ -41,6 +41,8 @@ export interface FormFieldProps {
     hint?: string;
     required?: boolean;
 }
+export type SectionCardAccent = 'primary' | 'experiment' | 'project' | 'success' | 'error' | 'warning' | 'info';
+export type SectionCardDivider = 'strong' | 'light';
 export type SidebarBadgeTone = 'primary' | 'cta' | 'success' | 'warning' | 'error' | 'info' | 'neutral';
 export interface SidebarToolSectionAction {
     id: string;

package/dist/types/index.d.ts

@@ -1,4 +1,4 @@
-export type { ContainerDirection, ButtonVariant, ButtonSize, InputType, ModalSize, ModalVariant, AlertType, Toast, TabItem, TabItemInput, OptionPrimitive, SelectOption, SelectOptionInput, RadioOption, RadioOptionInput, FormFieldProps, SidebarBadgeTone, SidebarToolSection, SidebarToolSectionAction, CollapsibleState, TopBarVariant, TopBarSettingsConfig, PillNavOption, PillNavOptionInput, PillNavItem, PillNavItemInput, PageSelectorItem, PageSelectorItemInput, PluginSwitcherPlugin, PluginSwitcherInfo, AccountMenuItem, WellPlateFormat, WellState, WellPlateSelectionMode, WellPlateSize, WellShape, Well, HeatmapColorScale, HeatmapConfig, SlotPosition, WellExtendedData, WellEditData, WellEditField, WellSampleDropData, WellSampleDropContext, WellSampleDropParser, WellLegendItem, PlateCondition, ColumnCondition, RowCondition, Rack, RackSampleDropContext, RackSampleDropMapper, SampleType, PlateMap, PlateMapEditorState, ProtocolStepType, ProtocolStepStatus, ProtocolStep, SampleGroup, GroupItem, FileUploaderMode, SegmentedOption, SegmentedOptionInput, SegmentedControlVariant, SegmentedControlSize, MultiSelectOption, MultiSelectOptionInput, MultiSelectSize, PillVariant, PillColor, PillSize, CalendarSelectionMode, CalendarMarker, CalendarDayContext, SortDirection, SortState, DataFrameColumn, PaginationState, SpinnerSize, SpinnerVariant, DividerSpacing, StatusType, ProgressVariant, ProgressSize, AvatarSize, EmptyStateColor, EmptyStateSize, BreadcrumbItem, BreadcrumbItemInput, TooltipPosition, ConfirmVariant, SettingsTab, SettingsTabInput, SettingsModalLayout, SettingsGroup, SettingsModalSchema, SettingsUserType, SettingsAudience, SettingsAudienceInput, NumberNotation, UnitOption, WizardStep, WizardStepState, AuditEntryType, AuditEntry, BatchItemStatus, BatchItem, BatchSummary, TimePickerFormat, TimeRange, ScheduleView, ScheduleEventStatus, ScheduleEvent, ScheduleBlockedSlot, ScheduleSlotContext, ScheduleEventCreateContext, ScheduleEventUpdateContext, SummarySectionItem, SummarySection, SummaryData, ResourceStatus, ResourceSpec, MoleculeData, ExperimentStatus, DatePreset, ExperimentSortField, ExperimentTypeOption, ExperimentSummary, ExperimentListResponse, ExperimentFilters, FitState, FitResultSummary, StorageCondition, ReagentColumn, Reagent, TreeNodeType, BadgeVariant, TreeNode, } from './components';
+export type { ContainerDirection, ButtonVariant, ButtonSize, InputType, ModalSize, ModalVariant, AlertType, Toast, TabItem, TabItemInput, OptionPrimitive, SelectOption, SelectOptionInput, RadioOption, RadioOptionInput, FormFieldProps, SectionCardAccent, SectionCardDivider, SidebarBadgeTone, SidebarToolSection, SidebarToolSectionAction, CollapsibleState, TopBarVariant, TopBarSettingsConfig, PillNavOption, PillNavOptionInput, PillNavItem, PillNavItemInput, PageSelectorItem, PageSelectorItemInput, PluginSwitcherPlugin, PluginSwitcherInfo, AccountMenuItem, WellPlateFormat, WellState, WellPlateSelectionMode, WellPlateSize, WellShape, Well, HeatmapColorScale, HeatmapConfig, SlotPosition, WellExtendedData, WellEditData, WellEditField, WellSampleDropData, WellSampleDropContext, WellSampleDropParser, WellLegendItem, PlateCondition, ColumnCondition, RowCondition, Rack, RackSampleDropContext, RackSampleDropMapper, SampleType, PlateMap, PlateMapEditorState, ProtocolStepType, ProtocolStepStatus, ProtocolStep, SampleGroup, GroupItem, FileUploaderMode, SegmentedOption, SegmentedOptionInput, SegmentedControlVariant, SegmentedControlSize, MultiSelectOption, MultiSelectOptionInput, MultiSelectSize, PillVariant, PillColor, PillSize, CalendarSelectionMode, CalendarMarker, CalendarDayContext, SortDirection, SortState, DataFrameColumn, PaginationState, SpinnerSize, SpinnerVariant, DividerSpacing, StatusType, ProgressVariant, ProgressSize, AvatarSize, EmptyStateColor, EmptyStateSize, BreadcrumbItem, BreadcrumbItemInput, TooltipPosition, ConfirmVariant, SettingsTab, SettingsTabInput, SettingsModalLayout, SettingsGroup, SettingsModalSchema, SettingsUserType, SettingsAudience, SettingsAudienceInput, NumberNotation, UnitOption, WizardStep, WizardStepState, AuditEntryType, AuditEntry, BatchItemStatus, BatchItem, BatchSummary, TimePickerFormat, TimeRange, ScheduleView, ScheduleEventStatus, ScheduleEvent, ScheduleBlockedSlot, ScheduleSlotContext, ScheduleEventCreateContext, ScheduleEventUpdateContext, SummarySectionItem, SummarySection, SummaryData, ResourceStatus, ResourceSpec, MoleculeData, ExperimentStatus, DatePreset, ExperimentSortField, ExperimentTypeOption, ExperimentSummary, ExperimentListResponse, ExperimentFilters, FitState, FitResultSummary, StorageCondition, ReagentColumn, Reagent, TreeNodeType, BadgeVariant, TreeNode, } from './components';
 export type * from './generated-ui';
 export type { AnalysisArtifactStatus, AnalysisArtifactStatusFilter, AnalysisArtifactSummary, AnalysisArtifactDetail, AnalysisArtifactListResponse, AnalysisArtifactMetadataUpdate, ArtifactSaveMode, ArtifactFileSource, JsonArtifactSavePayload, FileArtifactCreatePayload, FileArtifactUpdatePayload, HandlerFileArtifactCreatePayload, HandlerFileArtifactUpdatePayload, ArtifactSavePayload, HandlerArtifactSavePayload, ArtifactSaveDialogPayload, ArtifactSaveResult, ArtifactSaveHandler, HandlerArtifactSaveHandler, ArtifactSaveDialogHandler, } from './analysisArtifactTypes';
 export { ANALYSIS_FILE_ARTIFACT_SCHEMA } from './analysisArtifactTypes';

package/dist/types/platform.d.ts

@@ -8,6 +8,8 @@ export interface PluginInfo {
     color?: string;
     route_prefix: string;
     api_prefix: string;
+    /** Settings route selected by the platform for this plugin runtime. */
+    settings_api?: 'plugin' | 'platform';
     nav_items?: PluginNavItem[];
     settings?: PluginSettings;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morscherlab/mint-sdk",
-  "version": "1.1.0-beta.1",
+  "version": "1.1.0-beta.3",
   "description": "MINT Platform SDK — Vue 3 components, composables, and types for plugin development. MINT = Mass-spec INtegrated Toolkit.",
   "type": "module",
   "main": "./dist/index.js",

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

@@ -0,0 +1,181 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import SectionCard from '../../components/SectionCard.vue'
+
+describe('SectionCard', () => {
+  describe('basic rendering', () => {
+    it('should render container, header, and title when given the required title prop', () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Experiments' },
+      })
+      expect(wrapper.find('.mint-section-card').exists()).toBe(true)
+      expect(wrapper.find('.mint-section-card__header').exists()).toBe(true)
+      expect(wrapper.find('.mint-section-card__title').text()).toBe('Experiments')
+    })
+
+    it('should render default slot content in the body', () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Experiments' },
+        slots: { default: '<p class="body-probe">rows</p>' },
+      })
+      expect(wrapper.find('.mint-section-card__body .body-probe').exists()).toBe(true)
+    })
+  })
+
+  describe('count meta', () => {
+    it('should render the count in the header when provided', () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Plugins', count: '10 enabled' },
+      })
+      expect(wrapper.find('.mint-section-card__count').text()).toBe('10 enabled')
+    })
+
+    it('should not render a count element when count is omitted', () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Plugins' },
+      })
+      expect(wrapper.find('.mint-section-card__count').exists()).toBe(false)
+    })
+
+    it('should accept a numeric count', () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Artifacts', count: 4 },
+      })
+      expect(wrapper.find('.mint-section-card__count').text()).toBe('4')
+    })
+  })
+
+  describe('title style variants', () => {
+    it('should apply the uppercase modifier when uppercase is true', () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Experiments', uppercase: true },
+      })
+      expect(wrapper.find('.mint-section-card__title--uppercase').exists()).toBe(true)
+    })
+
+    it('should not apply the uppercase modifier by default', () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Design data' },
+      })
+      expect(wrapper.find('.mint-section-card__title--uppercase').exists()).toBe(false)
+    })
+  })
+
+  describe('icon chip', () => {
+    it('should render an icon chip with an SVG path when icon is provided', () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Experiments', icon: 'M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7' },
+      })
+      expect(wrapper.find('.mint-section-card__icon-chip').exists()).toBe(true)
+      expect(wrapper.find('.mint-section-card__icon-chip path').exists()).toBe(true)
+    })
+
+    it('should render one path per entry when icon is an array of paths', () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Experiments', icon: ['M4 7v10', 'M4 7c0 2.21'] },
+      })
+      expect(wrapper.findAll('.mint-section-card__icon-chip path')).toHaveLength(2)
+    })
+
+    it('should not render an icon chip when icon is omitted', () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Experiments' },
+      })
+      expect(wrapper.find('.mint-section-card__icon-chip').exists()).toBe(false)
+    })
+
+    it('should apply the accent modifier class matching the accent prop', () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Projects', icon: 'M3 7v10', accent: 'project' },
+      })
+      expect(wrapper.find('.mint-section-card__icon-chip--project').exists()).toBe(true)
+    })
+
+    it('should default to the primary accent when accent is omitted', () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Projects', icon: 'M3 7v10' },
+      })
+      expect(wrapper.find('.mint-section-card__icon-chip--primary').exists()).toBe(true)
+    })
+  })
+
+  describe('header divider', () => {
+    it('should use the strong divider by default', () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Experiments' },
+      })
+      expect(wrapper.find('.mint-section-card__header--divider-light').exists()).toBe(false)
+    })
+
+    it('should apply the light divider modifier when divider is light', () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Design data', divider: 'light' },
+      })
+      expect(wrapper.find('.mint-section-card__header--divider-light').exists()).toBe(true)
+    })
+  })
+
+  describe('fill mode', () => {
+    it('should not stretch by default', () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Experiments' },
+      })
+      expect(wrapper.find('.mint-section-card--fill').exists()).toBe(false)
+    })
+
+    it('should apply the fill modifier when fill is true', () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Experiments', fill: true },
+      })
+      expect(wrapper.find('.mint-section-card--fill').exists()).toBe(true)
+    })
+
+    it('should render the toolbar slot outside the scrolling body', () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Experiments', fill: true },
+        slots: { toolbar: '<div class="toolbar-probe">chips</div>', default: '<p>rows</p>' },
+      })
+      expect(wrapper.find('.mint-section-card__toolbar .toolbar-probe').exists()).toBe(true)
+      expect(wrapper.find('.mint-section-card__body .toolbar-probe').exists()).toBe(false)
+    })
+
+    it('should not render a toolbar region when the slot is unused', () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Experiments' },
+      })
+      expect(wrapper.find('.mint-section-card__toolbar').exists()).toBe(false)
+    })
+
+    it('should keep the header, body and footer structure when filling', () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Experiments', fill: true },
+        slots: { default: '<p>rows</p>', footer: '<span>1 / 3</span>' },
+      })
+      expect(wrapper.find('.mint-section-card__header').exists()).toBe(true)
+      expect(wrapper.find('.mint-section-card__body').exists()).toBe(true)
+      expect(wrapper.find('.mint-section-card__footer').exists()).toBe(true)
+    })
+  })
+
+  describe('slots', () => {
+    it('should render the actions slot at the end of the header', () => {
+      const wrapper = mount(SectionCard, {
+        props: { title: 'Experiments' },
+        slots: { actions: '<a class="actions-probe" href="#">All →</a>' },
+      })
+      expect(wrapper.find('.mint-section-card__header .actions-probe').exists()).toBe(true)
+    })
+
+    it('should render the footer strip only when the footer slot is provided', () => {
+      const withFooter = mount(SectionCard, {
+        props: { title: 'Experiments' },
+        slots: { footer: '<span class="footer-probe">Showing 1–18 of 42</span>' },
+      })
+      const withoutFooter = mount(SectionCard, {
+        props: { title: 'Experiments' },
+      })
+      expect(withFooter.find('.mint-section-card__footer .footer-probe').exists()).toBe(true)
+      expect(withoutFooter.find('.mint-section-card__footer').exists()).toBe(false)
+    })
+  })
+})

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

@@ -17,6 +17,11 @@ vi.mock('vue', async () => {
 })
 
 import { usePlatformContext } from '../../composables/usePlatformContext'
+import type { PlatformContext } from '../../types'
+
+type InjectedPlatformWindow = Window & {
+  __MINT_PLATFORM__?: PlatformContext
+}
 
 function sendThemeMessage(origin: string, theme: 'light' | 'dark' | 'system'): void {
   if (!messageHandler) {
@@ -37,6 +42,7 @@ describe('usePlatformContext', () => {
   beforeEach(() => {
     unmountedCallbacks.length = 0
     messageHandler = null
+    delete (window as InjectedPlatformWindow).__MINT_PLATFORM__
 
     vi.spyOn(window, 'addEventListener').mockImplementation((type, listener) => {
       if (type === 'message') {
@@ -51,9 +57,31 @@ describe('usePlatformContext', () => {
       const callback = unmountedCallbacks.pop()
       callback?.()
     }
+    delete (window as InjectedPlatformWindow).__MINT_PLATFORM__
     vi.restoreAllMocks()
   })
 
+  it('preserves the injected plugin settings API capability', () => {
+    const injectedContext: PlatformContext = {
+      isIntegrated: true,
+      theme: 'light',
+      platformApiUrl: '/api',
+      plugin: {
+        id: 'test-plugin',
+        name: 'test-plugin',
+        version: '1.0.0',
+        route_prefix: '/test-plugin',
+        api_prefix: '/api/test-plugin',
+        settings_api: 'plugin',
+      },
+    }
+    ;(window as InjectedPlatformWindow).__MINT_PLATFORM__ = injectedContext
+
+    const context = usePlatformContext()
+
+    expect(context.plugin.value?.settings_api).toBe('plugin')
+  })
+
   it('clears allowAnyOrigin policy after last consumer unmounts', () => {
     const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})