@morscherlab/mint-sdk 1.4.0-beta.10 → 1.4.0-beta.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morscherlab/mint-sdk",
-  "version": "1.4.0-beta.10",
+  "version": "1.4.0-beta.11",
   "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__/styles/v2AuditRules.test.ts

@@ -0,0 +1,96 @@
+import { readFileSync } from 'node:fs'
+import { dirname, join, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { describe, expect, it } from 'vitest'
+
+// v2 design audit (2026-10-28) fixes in the SDK stylesheets.
+
+const srcRoot = resolve(dirname(fileURLToPath(import.meta.url)), '../..')
+const stylesDir = join(srcRoot, 'styles')
+
+function css(path: string): string {
+  return readFileSync(join(stylesDir, path), 'utf-8').replace(/\/\*[\s\S]*?\*\//g, '')
+}
+
+function rule(text: string, selector: string): string {
+  const escaped = selector.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+  return new RegExp(`(?:^|\\})\\s*${escaped}\\s*\\{([^}]*)\\}`).exec(text)?.[1] ?? ''
+}
+
+const rem = (value: string): number => Number(value.replace('rem', '')) * 16
+
+describe('v2 audit style rules', () => {
+  it('should keep the outermost cards at least 16px from the window edge', () => {
+    const inset = /--mint-page-inset:\s*([\d.]+rem)/.exec(css('variables.css'))?.[1] ?? '0rem'
+    expect(rem(inset)).toBeGreaterThanOrEqual(16)
+    expect(rule(css('components/app-layout.css'), '.mint-layout--floating')).toMatch(/padding:\s*var\(--mint-page-inset\)/)
+    const topBarCard = rule(css('components/app-top-bar.css'), '.mint-topbar--card')
+    expect(topBarCard).toMatch(/width:\s*calc\(100% - 2 \* var\(--mint-page-inset\)\)/)
+    expect(topBarCard).toMatch(/margin:\s*var\(--mint-page-inset\) var\(--mint-page-inset\) 0/)
+  })
+
+  it('should put the SDK utility classes in the utilities layer so host variants beat them', () => {
+    const vars = css('variables.css')
+    const order = vars.indexOf('@layer theme, base, components, utilities;')
+    const layer = vars.indexOf('@layer utilities {')
+    expect(order).toBeGreaterThan(-1)
+    expect(order).toBeLessThan(vars.indexOf('@layer base {'))
+    const utilities = vars.slice(layer, vars.indexOf('@media (prefers-reduced-motion'))
+    expect(layer).toBeGreaterThan(-1)
+    for (const selector of ['.flex-col {', '.text-text-muted {', '.truncate {', '.max-w-sm {']) {
+      expect(utilities).toContain(selector)
+    }
+  })
+
+  it('should drop the last DataFrame row rule over the !important cell border', () => {
+    const body = rule(css('components/dataframe.css'), '.mint-dataframe__row:last-child .mint-dataframe__td')
+    expect(body).toMatch(/border-bottom:\s*none\s*!important/)
+  })
+
+  it('should round the modal close button with --radius-md', () => {
+    expect(rule(css('components/modal.css'), '.mint-modal__close')).toMatch(/border-radius:\s*var\(--radius-md\)/)
+  })
+
+  it('should draw no capsule on the progress rail or the sheet grab hint', () => {
+    expect(css('components/progress-bar.css')).not.toMatch(/9999px/)
+    expect(rule(css('components/modal.css'), '.mint-modal__grab-hint')).not.toMatch(/9999px/)
+  })
+
+  it('should keep a 28px header control inside the section card header strip', () => {
+    const text = css('components/section-card.css')
+    const cases: Array<[string, number]> = [
+      ['.mint-section-card__header', 28],
+      ['[data-density="comfortable"] .mint-section-card__header', 32],
+    ]
+    for (const [selector, control] of cases) {
+      const body = rule(text, selector)
+      const minHeight = rem(/min-height:\s*([\d.]+rem)/.exec(body)?.[1] ?? '0rem')
+      const padTop = rem(/padding:\s*([\d.]+rem)/.exec(body)?.[1] ?? '0rem')
+      expect(control + 2 * padTop + 1, selector).toBeLessThanOrEqual(minHeight)
+    }
+  })
+
+  it('should end the settings pane without a closing row hairline and draw no box around the density preview', () => {
+    const text = css('components/settings-modal.css')
+    const last = rule(
+      text,
+      '.mint-settings-modal__group:last-of-type > .mint-settings-modal__group-grid > .mint-settings-modal__row:last-child',
+    )
+    expect(last).toMatch(/border-bottom:\s*none/)
+    expect(rule(text, '.mint-settings-modal__density-preview')).not.toMatch(/(^|;)\s*border(-radius)?:/)
+  })
+
+  it('should set the md number input text no smaller than the sm one', () => {
+    const text = css('components/number-input.css')
+    const size = (variant: string) =>
+      rem(/font-size:\s*([\d.]+rem)/.exec(rule(text, `.mint-number-input__input--${variant}`))?.[1] ?? '0rem')
+    expect(size('md')).toBeGreaterThan(size('sm'))
+  })
+
+  it('should give the generated JSON block a token radius and no frame', () => {
+    const sfc = readFileSync(join(srcRoot, 'components/GeneratedResultRenderer.vue'), 'utf-8')
+    const body = /\.mint-generated-result__json\s*\{([^}]*overflow:[^}]*)\}/.exec(sfc)?.[1] ?? ''
+    expect(body).toMatch(/border-radius:\s*var\(--radius-md\)/)
+    expect(body).not.toMatch(/(^|;)\s*border:/)
+  })
+})

package/src/components/GeneratedResultRenderer.vue

@@ -130,10 +130,9 @@ function humanize(value: string): string {
 
 .mint-generated-result__json {
   overflow: auto;
-  padding: 1rem;
-  border: 1px solid var(--border-color);
-  border-radius: 0.75rem;
-  background: var(--bg-secondary);
+  padding: 0.75rem 1rem;
+  border-radius: var(--radius-md);
+  background: var(--bg-tertiary);
   font-size: 0.8125rem;
   line-height: 1.55;
   white-space: pre-wrap;

package/src/styles/components/app-layout.css

@@ -60,10 +60,11 @@
 }
 
 /* Floating variant: all sections appear as separate cards on a background,
-   spaced by the density gutter (8px, 12px comfortable). */
+   16px from the window edge and spaced by the density gutter (8px, 12px
+   comfortable). */
 .mint-layout--floating {
   background-color: var(--bg-primary);
-  padding: var(--mint-gutter);
+  padding: var(--mint-page-inset);
   gap: var(--mint-gutter);
 }
 

package/src/styles/components/app-top-bar.css

@@ -110,10 +110,10 @@
   padding: 0 0.375rem 0 0;
 }
 
-/* Variant: card - flat floating card, inset by the layout gutter */
+/* Variant: card - flat floating card, inset 16px from the window edge */
 .mint-topbar--card {
-  width: calc(100% - 2 * var(--mint-gutter));
-  margin: var(--mint-gutter) var(--mint-gutter) 0;
+  width: calc(100% - 2 * var(--mint-page-inset));
+  margin: var(--mint-page-inset) var(--mint-page-inset) 0;
   padding: 0.375rem 0.5rem 0.375rem 0.625rem;
   border-radius: var(--radius-lg);
   border: 1px solid var(--border-color);

package/src/styles/components/dataframe.css

@@ -357,7 +357,7 @@
 }
 
 .mint-dataframe__row:last-child .mint-dataframe__td {
-  border-bottom: none;
+  border-bottom: none !important;
 }
 
 /* Empty / error placeholder host (content comes from EmptyState) */

package/src/styles/components/modal.css

@@ -115,7 +115,7 @@
   width: 2.5rem;
   height: 3px;
   background-color: var(--border-color);
-  border-radius: 9999px;
+  border-radius: var(--radius-sm);
   margin: 0.5rem auto 0;
   flex-shrink: 0;
 }
@@ -163,7 +163,7 @@
   width: 1.75rem;
   height: 1.75rem;
   padding: 0;
-  border-radius: 0.4375rem;
+  border-radius: var(--radius-md);
   color: var(--text-secondary);
   background: none;
   border: none;

package/src/styles/components/number-input.css

@@ -121,7 +121,7 @@
 /* Horizontal padding matches BaseInput canonical scale (10/12/16) so FormField's
    12px label indent aligns with the numeric text across all input types. */
 .mint-number-input__input--sm { padding: 0.25rem 0.625rem; font-size: 0.8125rem; }
-.mint-number-input__input--md { padding: 0.375rem 0.75rem;    font-size: 0.75rem; }
+.mint-number-input__input--md { padding: 0.375rem 0.75rem;    font-size: 0.875rem; }
 .mint-number-input__input--lg { padding: 0.5rem 1rem;      font-size: 1rem; }
 
 /* ---------- Unit suffix ---------- */

package/src/styles/components/progress-bar.css

@@ -22,13 +22,13 @@
 }
 
 /* ========================================================================
-   Rail variant (default) — single filled track, pill ends
+   Rail variant (default) — single filled track, square-ish ends (v2: no capsules)
    ======================================================================== */
 
 .mint-progress__track {
   width: 100%;
   background-color: var(--bg-tertiary);
-  border-radius: 9999px; /* pill ends — spec */
+  border-radius: var(--radius-sm);
   overflow: hidden;
 }
 
@@ -38,7 +38,7 @@
 
 .mint-progress__bar {
   height: 100%;
-  border-radius: 9999px;
+  border-radius: var(--radius-sm);
   transition: width 0.3s ease;
 }
 

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

@@ -34,7 +34,9 @@
   gap: 0.625rem;
   box-sizing: border-box;
   min-height: 2.5rem;
-  padding: 0.375rem 0.625rem 0.375rem 0.75rem;
+  /* 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;
   border-bottom: 1px solid var(--border-color);
   flex-shrink: 0;
 }
@@ -131,7 +133,7 @@ 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.5rem 0.75rem 0.5rem 0.875rem;
+  padding: 0.25rem 0.75rem 0.25rem 0.875rem;
 }
 
 [data-density="comfortable"] .mint-section-card__row {

package/src/styles/components/settings-modal.css

@@ -37,6 +37,12 @@
   border-bottom-color: var(--border-color);
 }
 
+/* The pane ends after the last group's last row: no closing hairline there,
+   it would sit on the footer rule with nothing between them. */
+.mint-settings-modal__group:last-of-type > .mint-settings-modal__group-grid > .mint-settings-modal__row:last-child {
+  border-bottom: none;
+}
+
 /* The field cell anchors the ↺ reset, which sits just left of the control (5d).
    --_settings-control-w is the control's width; stacked fields (text, custom slots)
    keep 0 and put the reset at the right end of their label line. */
@@ -655,10 +661,9 @@
 .mint-settings-modal__density-preview {
   --_density-row: 2.125rem;
 
+  /* A hairline table in the setting row, not a bordered box inside the modal. */
   grid-column: 1 / -1;
   overflow: hidden;
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-md);
   font-size: 0.75rem;
 }
 

package/src/styles/variables.css

@@ -5,6 +5,10 @@
 
 @import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');
 
+/* Tailwind v4's layer order, declared first so the SDK's base and utilities
+   layers sort the same way with or without Tailwind in the host. */
+@layer theme, base, components, utilities;
+
 /* ==========================================================================
    CSS Variables - Light Mode
    ========================================================================== */
@@ -135,6 +139,8 @@
   --form-height-md: 2rem;
   --form-height-lg: 2.5rem;
   --mint-gutter: 0.5rem;
+  /* Distance from the outermost cards to the window edge, in every density. */
+  --mint-page-inset: 1rem;
 
   /* Semantic colors */
   --mint-success: #10B981;
@@ -344,6 +350,9 @@ button, input, select, textarea {
 /* ==========================================================================
    MINT Utility Classes (for Tailwind v4 compatibility)
    ========================================================================== */
+/* In Tailwind's utilities layer: unlayered, these beat every layered rule, so a
+   host's responsive variant (`lg:flex-row`) lost to the SDK's `.flex-col`. */
+@layer utilities {
 .bg-bg-hover {
   background-color: var(--bg-tertiary);
 }
@@ -719,6 +728,7 @@ button, input, select, textarea {
 .max-w-sm {
   max-width: 24rem;
 }
+} /* @layer utilities */
 
 /* ==========================================================================
    Reduced Motion