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

package/src/__tests__/styles/paletteTokens.test.ts

@@ -0,0 +1,44 @@
+import { readFileSync } from 'node:fs'
+import { dirname, join, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { describe, expect, it } from 'vitest'
+import { colorPalettes } from '../../stores/settings'
+
+const here = dirname(fileURLToPath(import.meta.url))
+const variablesCss = readFileSync(join(resolve(here, '../..'), 'styles/variables.css'), 'utf-8')
+
+const ACCENT_TOKENS = [
+  '--color-primary',
+  '--color-primary-hover',
+  '--color-primary-pressed',
+  '--color-primary-soft',
+  '--color-primary-border',
+]
+const STATUS_TOKENS = ['--mint-success', '--mint-error', '--mint-warning', '--mint-warning-text']
+
+/** Declarations of every rule whose selector list has a selector that ends in `[data-palette="<key>"]`. */
+function paletteDeclarations(key: string, dark: boolean): string {
+  const attr = `[data-palette="${key}"]`
+  return [...variablesCss.matchAll(/([^{}]+)\{([^}]*)\}/g)]
+    .filter(([, selector]) => selector.split(',').some((s) => {
+      const one = s.trim()
+      return one.endsWith(attr) && one.startsWith('html.dark') === dark
+    }))
+    .map(([, , body]) => body)
+    .join('\n')
+}
+
+describe('accent palettes', () => {
+  it.each(Object.keys(colorPalettes).flatMap((key) => [[key, 'light'], [key, 'dark']]))(
+    'should define every accent token for the %s palette in %s mode',
+    (key, theme) => {
+      const body = paletteDeclarations(key, theme === 'dark')
+      for (const token of ACCENT_TOKENS) expect(body, `${key} ${theme} ${token}`).toMatch(new RegExp(`${token}\\s*:`))
+    },
+  )
+
+  it('should give the colour-blind palette Okabe-Ito status colours', () => {
+    const body = paletteDeclarations('colorblind', false)
+    for (const token of STATUS_TOKENS) expect(body, token).toMatch(new RegExp(`${token}\\s*:`))
+  })
+})

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/components/SettingsModal.vue

@@ -358,13 +358,8 @@ const themeOptions: { value: ThemeMode; label: string; halves: ('light' | 'dark'
   { value: 'system', label: 'System', halves: ['light', 'dark'] },
 ]
 
-/** Five stops along the palette's primary → accent hue arc (shortest way round), as in the board. */
-function paletteSwatches(key: ColorPalette): string[] {
-  const [from, to] = colorPalettes[key].hues
-  const span = ((to - from + 540) % 360) - 180
-  const tone = key === 'pastel' ? '60% 72%' : '65% 48%'
-  return Array.from({ length: 5 }, (_, i) => `hsl(${Math.round(from + (span * i) / 4)} ${tone})`)
-}
+/** Accent tokens a palette swatch shows; `data-palette` on the strip resolves them per palette. */
+const paletteSwatchTokens = ['--color-primary', '--color-primary-hover', '--color-primary-soft', '--color-primary-border']
 
 const densityPreviewRows = [
   ['S-0012', '2.41', '12.5'],
@@ -562,7 +557,7 @@ function canShowForCurrentUser(item: AccessControlled): boolean {
         <div class="mint-settings-modal__setting">
           <div class="mint-settings-modal__setting-text">
             <span class="mint-settings-modal__setting-label">Color palette</span>
-            <span class="mint-settings-modal__setting-hint">Primary and accent hues across the interface</span>
+            <span class="mint-settings-modal__setting-hint">Accent colour across the interface</span>
           </div>
           <div class="mint-settings-modal__palettes">
             <button
@@ -573,12 +568,12 @@ function canShowForCurrentUser(item: AccessControlled): boolean {
               :class="['mint-settings-modal__palette', { 'mint-settings-modal__palette--active': settings.colorPalette === key }]"
               @click="settings.colorPalette = key as ColorPalette"
             >
-              <span class="mint-settings-modal__swatches" aria-hidden="true">
+              <span class="mint-settings-modal__swatches" :data-palette="key" aria-hidden="true">
                 <span
-                  v-for="color in paletteSwatches(key as ColorPalette)"
-                  :key="color"
+                  v-for="token in paletteSwatchTokens"
+                  :key="token"
                   class="mint-settings-modal__swatch"
-                  :style="{ backgroundColor: color }"
+                  :style="{ backgroundColor: `var(${token})` }"
                 />
               </span>
               <span class="mint-settings-modal__palette-name">{{ palette.name }}</span>

package/src/stores/index.ts

@@ -3,9 +3,7 @@ export {
   useSettingsStore,
   tryUseSettingsStore,
   colorPalettes,
-  paletteCssVariables,
   tableDensityToSize,
-  PALETTE_CSS_VARIABLES,
   type SettingsState,
 } from './settings'
 export { useExperimentStore } from './experiment'

package/src/stores/settings.ts

@@ -55,39 +55,24 @@ const defaultSettings: SettingsState = {
   tableDensity: 'normal',
 }
 
-export const colorPalettes: Record<ColorPalette, { name: string; hues: [number, number] }> = {
-  default: { name: 'Default (Cyan-Pink)', hues: [180, 320] },
-  colorblind: { name: 'Colorblind-friendly', hues: [45, 260] },
-  viridis: { name: 'Viridis', hues: [280, 80] },
-  pastel: { name: 'Pastel', hues: [200, 340] },
-}
-
 /**
- * Custom properties a non-default palette overrides on `<html>`.
- *
- * The saturation/lightness pairs are lifted from the original indigo/orange
- * tokens in `styles/variables.css` so only the hue moves; the `default`
- * palette writes nothing at all and the stylesheet values stand.
+ * Accent palettes. `styles/variables.css` holds each palette's light and dark
+ * tokens under `[data-palette]`; the store only writes the attribute.
  */
-export const PALETTE_CSS_VARIABLES = [
-  '--color-primary',
-  '--color-primary-hover',
-  '--color-primary-soft',
-  '--color-cta',
-  '--color-cta-hover',
-] as const
-
-/** Build the `<html>` custom-property overrides for a palette. */
-export function paletteCssVariables(palette: ColorPalette): Record<string, string> {
-  if (palette === 'default') return {}
-  const [primaryHue, accentHue] = colorPalettes[palette].hues
-  return {
-    '--color-primary': `hsl(${primaryHue} 84% 67%)`,
-    '--color-primary-hover': `hsl(${primaryHue} 75% 59%)`,
-    '--color-primary-soft': `hsl(${primaryHue} 84% 67% / 0.12)`,
-    '--color-cta': `hsl(${accentHue} 95% 53%)`,
-    '--color-cta-hover': `hsl(${accentHue} 90% 48%)`,
-  }
+export const colorPalettes: Record<ColorPalette, { name: string }> = {
+  default: { name: 'Teal' },
+  colorblind: { name: 'Colour-blind safe' },
+  purple: { name: 'Purple' },
+  ocean: { name: 'Ocean' },
+  forest: { name: 'Forest' },
+}
+
+/** Pre-v2 palette ids and the palette that replaces each one. */
+const RETIRED_PALETTES: Record<string, ColorPalette> = { viridis: 'purple', pastel: 'default' }
+
+function knownPalette(value: unknown): ColorPalette {
+  if (typeof value === 'string' && value in colorPalettes) return value as ColorPalette
+  return (typeof value === 'string' && RETIRED_PALETTES[value]) || 'default'
 }
 
 /** `DataFrame`-style size that each table density maps onto. */
@@ -107,13 +92,13 @@ function loadSettings(): SettingsState {
     const stored = localStorage.getItem(STORAGE_KEY)
     if (stored) {
       const parsed = JSON.parse(stored)
-      return { ...defaultSettings, ...parsed }
+      return { ...defaultSettings, ...parsed, colorPalette: knownPalette(parsed.colorPalette) }
     }
 
     const legacyStored = localStorage.getItem(LEGACY_STORAGE_KEY)
     if (legacyStored) {
       const parsed = JSON.parse(legacyStored)
-      const migrated = { ...defaultSettings, ...parsed }
+      const migrated = { ...defaultSettings, ...parsed, colorPalette: knownPalette(parsed.colorPalette) }
       localStorage.setItem(STORAGE_KEY, JSON.stringify(migrated))
       localStorage.removeItem(LEGACY_STORAGE_KEY)
       return migrated
@@ -202,20 +187,10 @@ export const useSettingsStore = defineStore('mint-settings', () => {
     document.documentElement.classList.toggle('dark', dark)
   }
 
-  /**
-   * Write the selected palette's hues onto `<html>` as custom-property
-   * overrides. The `default` palette clears them so `styles/variables.css`
-   * keeps ownership of the brand colors.
-   */
+  /** Mirror the palette onto `<html data-palette>`; `styles/variables.css` maps it to tokens. */
   function applyPalette() {
     if (typeof document === 'undefined') return
-    const style = document.documentElement.style
-    const overrides = paletteCssVariables(colorPalette.value)
-    for (const name of PALETTE_CSS_VARIABLES) {
-      const value = overrides[name]
-      if (value) style.setProperty(name, value)
-      else style.removeProperty(name)
-    }
+    document.documentElement.dataset.palette = colorPalette.value
   }
 
   /** Mirror the table density onto `<html data-density>` for CSS consumers. */
@@ -269,10 +244,6 @@ export const useSettingsStore = defineStore('mint-settings', () => {
     tableDensity.value = defaultSettings.tableDensity
   }
 
-  function getPaletteHues(): [number, number] {
-    return colorPalettes[colorPalette.value].hues
-  }
-
   /** The `size` the SDK table components default to for the current density. */
   function getTableSize(): 'sm' | 'md' | 'lg' {
     return tableDensityToSize(tableDensity.value)
@@ -298,7 +269,6 @@ export const useSettingsStore = defineStore('mint-settings', () => {
     applyDensity,
     persistSettings,
     resetToDefaults,
-    getPaletteHues,
     getTableSize,
     isDark,
     getApiBaseUrl,

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;
 }