@morscherlab/mint-sdk 1.4.0-beta.11 → 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/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/variables.css

@@ -51,13 +51,8 @@
      where --text-secondary would drop to ~4.35:1. */
   --text-secondary-strong: #475569;
 
-  /* Brand colors — one teal accent: teal-600 fills, teal-700 hover + ink,
-     teal-800 pressed. White on #0D9488 is 3.74:1, a known AA exception. */
-  --color-primary: #0D9488;
-  --color-primary-hover: #0F766E;
-  --color-primary-pressed: #115E59;
-  --color-primary-soft: rgba(13, 148, 136, 0.10);
-  --color-primary-border: #99F6E4;
+  /* Brand colors: the accent (--color-primary*) comes from the palette
+     blocks below the dark block (html[data-palette], default teal). */
   /* Fixed teal scale, the same in both themes. */
   --color-primary-50: #F0FDFA;
   --color-primary-100: #CCFBF1;
@@ -175,7 +170,7 @@
   /* Soft focus rings — 3px translucent. Used by all form primitives
      post-0.16 visual refresh. Solid variants above kept for legacy
      components that haven't migrated yet. */
-  --focus-ring-soft: 0 0 0 3px rgba(13, 148, 136, 0.18);
+  --focus-ring-soft: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
   /* Red is perceptually brighter than teal at equal alpha; drop 2pp to keep visual weight matched. */
   --focus-ring-soft-error: 0 0 0 3px rgba(239, 68, 68, 0.18);
 
@@ -213,12 +208,7 @@ html.dark {
   --border-light: #172033;
   --border-strong: #334155;
 
-  /* Brand colors - Dark mode (CTA, purple and entity aliases follow) */
-  --color-primary: #2DD4BF;
-  --color-primary-hover: #5EEAD4;
-  --color-primary-pressed: #99F6E4;
-  --color-primary-soft: rgba(45, 212, 191, 0.12);
-  --color-primary-border: rgba(45, 212, 191, 0.35);
+  /* Brand colors - Dark mode: the accent comes from the palette blocks below. */
   /* Dark ink on the light accent fill (10.1:1 on #2DD4BF). */
   --text-on-accent: #0B1120;
   --color-experiment-hover: #E2E8F0;
@@ -254,7 +244,7 @@ html.dark {
 
   /* Focus ring - dark mode offset uses bg-primary instead of white */
   --focus-ring-offset: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--color-primary);
-  --focus-ring-soft: 0 0 0 3px rgba(45, 212, 191, 0.22);
+  --focus-ring-soft: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent);
   --focus-ring-soft-error: 0 0 0 3px rgba(248, 113, 113, 0.26);
 
   /* Legacy aliases */
@@ -264,6 +254,122 @@ html.dark {
   color-scheme: dark;
 }
 
+/* Accent palettes (Settings → Color palette). The settings store writes
+   html[data-palette]; the palette swatches set the same attribute on their
+   strip to preview a palette. Each palette is one accent in both themes: white
+   text on the light-mode fill, dark text (--text-on-accent) on the dark-mode
+   fill. Hues come from the biology plot-style palettes. */
+
+/* Teal (default): teal-600 fill, teal-700 hover + ink, teal-800 pressed.
+   White on #0D9488 is 3.74:1, a known AA exception. */
+:root,
+[data-palette="default"] {
+  --color-primary: #0D9488;
+  --color-primary-hover: #0F766E;
+  --color-primary-pressed: #115E59;
+  --color-primary-soft: rgba(13, 148, 136, 0.10);
+  --color-primary-border: #99F6E4;
+}
+html.dark,
+html.dark [data-palette="default"] {
+  --color-primary: #2DD4BF;
+  --color-primary-hover: #5EEAD4;
+  --color-primary-pressed: #99F6E4;
+  --color-primary-soft: rgba(45, 212, 191, 0.12);
+  --color-primary-border: rgba(45, 212, 191, 0.35);
+}
+
+/* Colour-blind safe: Okabe-Ito blue accent, and Okabe-Ito bluish green,
+   vermilion and orange for status, so success and error differ for every
+   colour-vision type. White on #0072B2 is 5.19:1. */
+:root[data-palette="colorblind"],
+[data-palette="colorblind"] {
+  --color-primary: #0072B2;
+  --color-primary-hover: #005F94;
+  --color-primary-pressed: #004C77;
+  --color-primary-soft: rgba(0, 114, 178, 0.10);
+  --color-primary-border: #B3D5EA;
+  --mint-success: #009E73;
+  --mint-success-hover: #00805D;
+  --mint-success-bg: rgba(0, 158, 115, 0.1);
+  --mint-success-border: rgba(0, 158, 115, 0.3);
+  --mint-error: #D55E00;
+  --mint-error-hover: #B34E00;
+  --mint-error-bg: rgba(213, 94, 0, 0.1);
+  --mint-error-border: rgba(213, 94, 0, 0.3);
+  --mint-warning: #E69F00;
+  --mint-warning-hover: #C78800;
+  --mint-warning-bg: rgba(230, 159, 0, 0.1);
+  --mint-warning-border: rgba(230, 159, 0, 0.3);
+  --mint-warning-text: #8F5F00;
+}
+html.dark[data-palette="colorblind"],
+html.dark [data-palette="colorblind"] {
+  --color-primary: #56B4E9;
+  --color-primary-hover: #7CC5EE;
+  --color-primary-pressed: #A3D6F3;
+  --color-primary-soft: rgba(86, 180, 233, 0.14);
+  --color-primary-border: rgba(86, 180, 233, 0.38);
+  --mint-success-bg: rgba(0, 158, 115, 0.15);
+  --mint-error-bg: rgba(213, 94, 0, 0.15);
+  --mint-warning-bg: rgba(230, 159, 0, 0.15);
+  --mint-warning-text: #FCD34D;
+}
+
+/* Purple: plot-style purple #8781bd, deepened so white text is 5.15:1. */
+:root[data-palette="purple"],
+[data-palette="purple"] {
+  --color-primary: #6B64B0;
+  --color-primary-hover: #5A539E;
+  --color-primary-pressed: #4A448A;
+  --color-primary-soft: rgba(107, 100, 176, 0.10);
+  --color-primary-border: #D3D0EC;
+}
+html.dark[data-palette="purple"],
+html.dark [data-palette="purple"] {
+  --color-primary: #A9A3DB;
+  --color-primary-hover: #C2BDE7;
+  --color-primary-pressed: #D8D4F1;
+  --color-primary-soft: rgba(169, 163, 219, 0.14);
+  --color-primary-border: rgba(169, 163, 219, 0.38);
+}
+
+/* Ocean: plot-style ocean ramp, #2171B5 fill (white 5.13:1), #6BAED6 dark. */
+:root[data-palette="ocean"],
+[data-palette="ocean"] {
+  --color-primary: #2171B5;
+  --color-primary-hover: #1B5F99;
+  --color-primary-pressed: #164E7E;
+  --color-primary-soft: rgba(33, 113, 181, 0.10);
+  --color-primary-border: #BBD7EE;
+}
+html.dark[data-palette="ocean"],
+html.dark [data-palette="ocean"] {
+  --color-primary: #6BAED6;
+  --color-primary-hover: #8EC2E2;
+  --color-primary-pressed: #B0D5EC;
+  --color-primary-soft: rgba(107, 174, 214, 0.14);
+  --color-primary-border: rgba(107, 174, 214, 0.38);
+}
+
+/* Forest: plot-style forest_clay, #2F6B4F fill (white 6.29:1), #7AA874 dark. */
+:root[data-palette="forest"],
+[data-palette="forest"] {
+  --color-primary: #2F6B4F;
+  --color-primary-hover: #275A42;
+  --color-primary-pressed: #1F4935;
+  --color-primary-soft: rgba(47, 107, 79, 0.10);
+  --color-primary-border: #BFD8C6;
+}
+html.dark[data-palette="forest"],
+html.dark [data-palette="forest"] {
+  --color-primary: #7AA874;
+  --color-primary-hover: #95BC90;
+  --color-primary-pressed: #B1CFAD;
+  --color-primary-soft: rgba(122, 168, 116, 0.14);
+  --color-primary-border: rgba(122, 168, 116, 0.38);
+}
+
 /* Comfortable density (html[data-density], written by the settings store):
    the pre-v2 control heights and a wider gutter. */
 [data-density="comfortable"] {

package/src/types/platform.ts

@@ -66,5 +66,5 @@ export type PlatformContext = Partial<Omit<PlatformFrontendContext, 'plugin'>> &
 
 // Settings state types
 export type ThemeMode = 'light' | 'dark' | 'system'
-export type ColorPalette = 'default' | 'colorblind' | 'viridis' | 'pastel'
+export type ColorPalette = 'default' | 'colorblind' | 'purple' | 'ocean' | 'forest'
 export type TableDensity = 'compact' | 'normal' | 'comfortable'

package/dist/SettingsModal-DO3IZ7qz.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SettingsModal-DO3IZ7qz.js","names":[],"sources":["../src/components/internal/SettingsPaneHeadInternal.vue","../src/components/internal/SettingsPaneHeadInternal.vue","../src/components/SettingsModal.schema.ts","../src/components/SettingsModal.vue","../src/components/SettingsModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/** SettingsModal pane header: title + description or mono count, and an optional \"Restore group defaults\" action. */\ninterface Props {\n  title: string\n  description?: string\n  /** Mono count after the title (search results). */\n  count?: string\n  /** Modified fields in the group. Omit to hide the restore action; 0 renders it disabled. */\n  modifiedCount?: number\n}\n\ndefineProps<Props>()\n\nconst emit = defineEmits<{\n  restore: []\n}>()\n</script>\n\n<template>\n  <div class=\"mint-settings-modal__head\">\n    <div class=\"mint-settings-modal__head-text\">\n      <h4 class=\"mint-settings-modal__head-title\">\n        {{ title }}\n        <span v-if=\"count\" class=\"mint-settings-modal__head-count\">{{ count }}</span>\n      </h4>\n      <p v-if=\"description\" class=\"mint-settings-modal__head-description\">{{ description }}</p>\n    </div>\n    <button\n      v-if=\"modifiedCount !== undefined\"\n      type=\"button\"\n      class=\"mint-settings-modal__restore-group\"\n      :disabled=\"modifiedCount === 0\"\n      @click=\"emit('restore')\"\n    >\n      <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n        <path d=\"M3 8a5 5 0 1 0 1.5-3.5M3 3v2.5h2.5\" />\n      </svg>\n      Restore group defaults\n    </button>\n  </div>\n</template>\n","<script setup lang=\"ts\">\n/** SettingsModal pane header: title + description or mono count, and an optional \"Restore group defaults\" action. */\ninterface Props {\n  title: string\n  description?: string\n  /** Mono count after the title (search results). */\n  count?: string\n  /** Modified fields in the group. Omit to hide the restore action; 0 renders it disabled. */\n  modifiedCount?: number\n}\n\ndefineProps<Props>()\n\nconst emit = defineEmits<{\n  restore: []\n}>()\n</script>\n\n<template>\n  <div class=\"mint-settings-modal__head\">\n    <div class=\"mint-settings-modal__head-text\">\n      <h4 class=\"mint-settings-modal__head-title\">\n        {{ title }}\n        <span v-if=\"count\" class=\"mint-settings-modal__head-count\">{{ count }}</span>\n      </h4>\n      <p v-if=\"description\" class=\"mint-settings-modal__head-description\">{{ description }}</p>\n    </div>\n    <button\n      v-if=\"modifiedCount !== undefined\"\n      type=\"button\"\n      class=\"mint-settings-modal__restore-group\"\n      :disabled=\"modifiedCount === 0\"\n      @click=\"emit('restore')\"\n    >\n      <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n        <path d=\"M3 8a5 5 0 1 0 1.5-3.5M3 3v2.5h2.5\" />\n      </svg>\n      Restore group defaults\n    </button>\n  </div>\n</template>\n","import type {\n  FormSchema,\n  FormSectionSchema,\n  SettingsGroup,\n  SettingsModalSchema,\n  SettingsTab,\n  SettingsTabInput,\n} from '../types'\nimport type { AccessControlled } from '../permissions'\nimport { normalizeItemInput } from '../utils/items'\n\nexport const APPEARANCE_TAB_ID = 'appearance'\n\nexport const APPEARANCE_TAB: SettingsTab = {\n  id: APPEARANCE_TAB_ID,\n  label: 'Appearance',\n  // Heroicons \"swatch\" — the built-in tab sits beside plugin tabs that all\n  // carry icons, so it needs one of its own to keep the rail consistent.\n  icon: '<svg fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4.098 19.902a3.75 3.75 0 0 0 5.304 0l6.401-6.402M6.75 21A3.75 3.75 0 0 1 3 17.25V4.125C3 3.504 3.504 3 4.125 3h5.25c.621 0 1.125.504 1.125 1.125v4.072M6.75 21a3.75 3.75 0 0 0 3.75-3.75V8.197M6.75 21h13.125c.621 0 1.125-.504 1.125-1.125v-5.25c0-.621-.504-1.125-1.125-1.125h-4.072M10.5 8.197l2.88-2.88c.438-.439 1.15-.439 1.59 0l3.712 3.713c.44.44.44 1.152 0 1.59l-2.879 2.88M6.75 17.25h.008v.008H6.75v-.008Z\"></path></svg>',\n  description: 'Theme, color palette, and density',\n}\n\n// Map settings groups onto the form-builder's flat-section shape.\n// `title: ''` because the rail/pane header already shows the group name.\nexport function buildFlatSettingsSchema(schema: SettingsModalSchema): FormSchema {\n  return {\n    sections: schema.groups.map<FormSectionSchema>((group) => ({\n      id: group.id,\n      title: '',\n      fields: group.fields,\n      columns: group.columns,\n      condition: group.condition,\n    })),\n  }\n}\n\nexport function filterSettingsSchemaByAccess(\n  schema: SettingsModalSchema,\n  canShow: (item: AccessControlled) => boolean\n): SettingsModalSchema {\n  const groups = schema.groups.flatMap((group) => {\n    if (!canShow(group)) return []\n\n    const fields = group.fields.filter(canShow)\n    if (fields.length === 0) return []\n\n    return [{ ...group, fields }]\n  })\n\n  return { groups }\n}\n\nexport function settingsGroupToTab(group: SettingsGroup): SettingsTab {\n  return {\n    id: group.id,\n    label: group.label,\n    icon: group.icon,\n    description: group.description,\n  }\n}\n\nexport function normalizeVisibleSettingsTabs(\n  tabs: SettingsTabInput[],\n  canShow: (item: AccessControlled) => boolean\n): SettingsTab[] {\n  return tabs.map(normalizeItemInput).filter(canShow)\n}\n\nexport function buildSettingsTabs(\n  baseTabs: SettingsTab[],\n  showAppearance: boolean,\n  appearanceFirst = false\n): SettingsTab[] {\n  if (!showAppearance) return baseTabs\n  return appearanceFirst ? [APPEARANCE_TAB, ...baseTabs] : [...baseTabs, APPEARANCE_TAB]\n}\n","<script setup lang=\"ts\">\n/**\n * Tabbed settings modal with three usage modes:\n *\n *   1. Schema-driven (recommended) — pass a `defineControlModel()` result or a\n *      `SettingsModalSchema` as `spec`, plus `v-model:values`. Each\n *      group/section becomes a tab; fields auto-render via the SDK form field\n *      registry (text, select, number, toggle, molecule, concentration, …).\n *      Conditional visibility, validation, and dynamic options come for free.\n *\n *   2. Manual tabs + slots — pass `tabs` and a `<template #tab-{id}>` slot\n *      per tab. Use this when you need bespoke widgets the form-builder\n *      registry doesn't cover (or for legacy plugins).\n *\n *   3. Appearance only — `showAppearance` (default true) renders the built-in\n *      theme / palette / table-density tab. Works alongside both modes above.\n *\n * Layout: omitted (default) renders a sidebar rail split into \"Plugin\" and\n * \"Personal\" (Appearance) sections when there are more than three groups, and\n * stacks every group on one page otherwise. `vertical` always uses the rail;\n * `horizontal` keeps the underline tab strip.\n *\n * Schema-driven settings also get a search across groups (label + hint), a\n * modified-from-default marker with a per-row reset for every field with a\n * non-null `defaultValue` (every control model field gets one), and a \"Restore group defaults\" action. Changes\n * apply immediately; the default footer says so and closes with \"Done\".\n *\n * @example Recommended\n * ```vue\n * <SettingsModal v-model:open=\"open\" v-model:values=\"values\" :spec=\"settingsModel\" />\n * ```\n */\nimport { ref, computed, watch } from 'vue'\nimport BaseModal from './BaseModal.vue'\nimport BaseButton from './BaseButton.vue'\nimport BaseInput from './BaseInput.vue'\nimport SegmentedControl from './SegmentedControl.vue'\nimport FormFieldRendererInternal from './internal/FormFieldRendererInternal.vue'\nimport SettingsPaneHeadInternal from './internal/SettingsPaneHeadInternal.vue'\nimport { useFormBuilder } from '../composables/useFormBuilder'\nimport {\n  controlsToSettingsSchema,\n  isControlModelBinding,\n  type ControlModelBinding,\n} from '../composables/useControlSchema'\nimport { useSettingsStore, colorPalettes } from '../stores/settings'\nimport { useAuthStore } from '../stores/auth'\nimport { usePlatform } from '../composables/usePlatform'\nimport { canAccessByPolicy } from '../permissions'\nimport {\n  formSchemaFieldNames,\n  pickExistingRecordKeys,\n  pickRecordKeys,\n  recordValuesEqualForKeys,\n  valuesEqual,\n} from '../utils/formModelSync'\nimport type {\n  ThemeMode,\n  ColorPalette,\n  TableDensity,\n  ModalLayout,\n  ModalTab,\n  SettingsGroup,\n  SettingsTab,\n  SettingsTabInput,\n  SettingsModalLayout,\n  SettingsModalSchema,\n  SettingsUserType,\n  FormFieldSchema,\n} from '../types'\nimport type { AccessControlled, PermissionUser } from '../permissions'\nimport {\n  APPEARANCE_TAB,\n  APPEARANCE_TAB_ID,\n  buildFlatSettingsSchema,\n  buildSettingsTabs,\n  filterSettingsSchemaByAccess,\n  normalizeVisibleSettingsTabs,\n  settingsGroupToTab,\n} from './SettingsModal.schema'\n\ninterface Props {\n  open: boolean\n  title?: string\n  /** Manual tab descriptors. Ignored when `spec` is set (groups become tabs). */\n  tabs?: SettingsTabInput[]\n  showAppearance?: boolean\n  /** List Appearance before the other tabs and open on it. */\n  appearanceFirst?: boolean\n  size?: 'md' | 'lg' | 'xl'\n  layout?: SettingsModalLayout\n  /** Control model built with defineControlModel(), or a SettingsModalSchema (e.g. the generated `settingsForm`). Fields auto-render via SDK form components. */\n  spec?: ControlModelBinding | SettingsModalSchema\n  /** Two-way bound values when `spec` is set. */\n  values?: Record<string, unknown>\n  /** Optional user type override for permission-filtered settings content. Defaults to SDK auth/platform context. */\n  userType?: SettingsUserType\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  title: 'Settings',\n  tabs: () => [],\n  showAppearance: true,\n  size: 'lg',\n  layout: undefined,\n  spec: undefined,\n})\n\nconst emit = defineEmits<{\n  'update:open': [value: boolean]\n  'update:values': [data: Record<string, unknown>]\n  close: []\n}>()\n\nconst settings = useSettingsStore()\nconst auth = useAuthStore()\nconst { user: platformUser, integrated, isAdmin: platformIsAdmin } = usePlatform()\n// With sign-in turned off (`authRequired: false`) every caller of an integrated page is the\n// implicit administrator, and usePlatform reports a page with no user as admin.\nconst implicitPlatformAdmin = computed(() => integrated.value && !platformUser.value && platformIsAdmin.value)\n\nconst resolvedModel = computed<ControlModelBinding | undefined>(() =>\n  isControlModelBinding(props.spec) ? props.spec : undefined,\n)\nconst sourceSettingsSchema = computed<SettingsModalSchema | undefined>(() =>\n  resolvedModel.value\n    ? controlsToSettingsSchema(resolvedModel.value.controls, resolvedModel.value.controlOptions)\n    : props.spec as SettingsModalSchema | undefined,\n)\nconst currentAccessUser = computed<PermissionUser | null>(() => {\n  if (props.userType) {\n    return { role: props.userType === 'admin' ? 'admin' : 'user' }\n  }\n  return auth.userInfo ?? platformUser.value ?? (implicitPlatformAdmin.value ? { role: 'admin' } : null)\n})\nconst isAccessUserAuthenticated = computed(() =>\n  props.userType !== undefined || auth.isAuthenticated || !!platformUser.value || implicitPlatformAdmin.value,\n)\nconst settingsSchema = computed<SettingsModalSchema | undefined>(() => {\n  if (!sourceSettingsSchema.value) return undefined\n  return filterSettingsSchemaByAccess(sourceSettingsSchema.value, canShowForCurrentUser)\n})\nconst isSchemaDriven = computed(() => !!settingsSchema.value)\nconst resolvedValues = computed<Record<string, unknown>>(() => ({\n  ...(resolvedModel.value?.controlOptions.initialValues ?? {}),\n  ...(props.values ?? {}),\n}))\n\n// Schema-driven mode keeps one form-builder instance and syncs schema changes\n// into it, so callers can swap groups/fields without remounting the modal.\nconst builder = useFormBuilder(\n  settingsSchema.value ? buildFlatSettingsSchema(settingsSchema.value) : { sections: [] },\n  resolvedValues.value,\n  resolvedModel.value?.controlOptions.enhancements,\n)\n\nwatch(\n  () => settingsSchema.value,\n  (schema) => {\n    if (!schema) {\n      builder.updateSchema({ sections: [] }, {})\n      return\n    }\n\n    const flatSchema = buildFlatSettingsSchema(schema)\n    const fieldNames = formSchemaFieldNames(flatSchema)\n    const sourceValues = props.values === undefined\n      ? {\n          ...resolvedValues.value,\n          ...(builder.form.data as Record<string, unknown>),\n        }\n      : resolvedValues.value\n\n    builder.updateSchema(flatSchema, pickExistingRecordKeys(sourceValues ?? {}, fieldNames))\n  },\n  { deep: true },\n)\n\nwatch(\n  () => ({ ...resolvedValues.value }),\n  (data) => {\n    if (!settingsSchema.value) return\n    const fieldNames = builderFieldNames()\n    if (recordValuesEqualForKeys(data, builder.form.data as Record<string, unknown>, fieldNames)) return\n    builder.reset(pickRecordKeys(data, fieldNames))\n  },\n  { deep: true },\n)\n\n// Changes apply immediately; the footer confirms it once the user changed something.\nconst applied = ref(false)\n\nwatch(\n  () => ({ ...builder.form.data }),\n  (data) => {\n    // A reset to the parent's values (async load, schema swap) is not a user change.\n    if (!recordValuesEqualForKeys(data, resolvedValues.value, builderFieldNames())) applied.value = true\n    if (settingsSchema.value) {\n      emit('update:values', {\n        ...resolvedValues.value,\n        ...data,\n      })\n    }\n  },\n  { deep: true },\n)\n\n// Schema groups whose `condition` evaluates false against the current data are\n// dropped from the rail entirely — same semantics as section visibility in\n// FormBuilder. Manual `tabs` have no condition mechanism, so they pass through.\nconst visibleSchemaGroups = computed(() =>\n  settingsSchema.value\n    ? settingsSchema.value.groups.filter((g) => builder.isSectionVisible(g.id))\n    : [],\n)\n\nconst manualTabs = computed<SettingsTab[]>(() =>\n  normalizeVisibleSettingsTabs(props.tabs, canShowForCurrentUser)\n)\n\nconst allTabs = computed<SettingsTab[]>(() => {\n  const base: SettingsTab[] = settingsSchema.value\n    ? visibleSchemaGroups.value.map(settingsGroupToTab)\n    : manualTabs.value\n  return buildSettingsTabs(base, props.showAppearance, props.appearanceFirst)\n})\n\nconst activeTab = ref(allTabs.value[0]?.id || APPEARANCE_TAB_ID)\n\n/** Above this many plugin groups the default layout switches from one stacked page to the rail. */\nconst STACKED_GROUP_LIMIT = 3\n\n// BaseModal owns the tab chrome: 'vertical' keeps its public name and maps to\n// the shell rail; horizontal maps to the shell strip (plain when single-tab).\nconst baseLayout = computed<ModalLayout>(() => {\n  if (props.layout === 'vertical') return 'rail'\n  if (props.layout === 'horizontal') return allTabs.value.length > 1 ? 'tabs' : 'plain'\n  const pluginTabCount = settingsSchema.value ? visibleSchemaGroups.value.length : manualTabs.value.length\n  return pluginTabCount > STACKED_GROUP_LIMIT ? 'rail' : 'plain'\n})\nconst isRail = computed(() => baseLayout.value === 'rail')\nconst isStacked = computed(() => baseLayout.value === 'plain')\n\nconst query = ref('')\nconst searchTerm = computed(() => query.value.trim().toLowerCase())\nconst isSearching = computed(() => isSchemaDriven.value && searchTerm.value !== '')\n\nconst modalTabs = computed<ModalTab[]>(() =>\n  allTabs.value.map((tab) => {\n    const group = visibleSchemaGroups.value.find((g) => g.id === tab.id)\n    const modified = group ? modifiedCount(group) : 0\n    return {\n      id: tab.id,\n      label: tab.label,\n      icon: tab.icon,\n      description: tab.description,\n      meta: group ? (modified ? String(modified) : undefined) : tab.meta,\n      // Sections only split plugin groups from Appearance; without it there is nothing to split.\n      section: props.showAppearance ? (tab.id === APPEARANCE_TAB_ID ? 'Personal' : tab.section ?? 'Plugin') : undefined,\n    }\n  }),\n)\n\nfunction selectTab(id: string) {\n  activeTab.value = id\n  query.value = ''\n}\n\nfunction handleSearchKeydown(event: KeyboardEvent) {\n  // First Escape clears the search; the next one closes the modal.\n  if (event.key === 'Escape' && query.value) {\n    event.stopPropagation()\n    query.value = ''\n  }\n}\n\n// If the active tab vanishes (group hidden by condition), drop back to the first available.\nwatch(allTabs, (tabs) => {\n  if (!tabs.some((t) => t.id === activeTab.value)) {\n    activeTab.value = tabs[0]?.id ?? APPEARANCE_TAB_ID\n  }\n})\n\nconst activeGroup = computed(() =>\n  visibleSchemaGroups.value.find((g) => g.id === activeTab.value),\n)\n\nfunction visibleFields(group: SettingsGroup): FormFieldSchema[] {\n  return group.fields.filter((f) => builder.isFieldVisible(f.name))\n}\n\n/**\n * Modified = differs from the field's own `defaultValue`. A field without one, or with a `null`\n * default (a secret, or an optional setting), never is: restoring `null` would clear a stored value.\n */\nfunction isModified(field: FormFieldSchema): boolean {\n  return field.defaultValue != null\n    && !valuesEqual((builder.form.data as Record<string, unknown>)[field.name], field.defaultValue)\n}\n\nfunction modifiedCount(group: SettingsGroup): number {\n  return visibleFields(group).filter(isModified).length\n}\n\nfunction resetField(field: FormFieldSchema) {\n  builder.form.setFieldValue(field.name, field.defaultValue)\n}\n\nfunction restoreGroup(group: SettingsGroup | undefined) {\n  if (group) visibleFields(group).filter(isModified).forEach(resetField)\n}\n\nfunction isBooleanField(field: FormFieldSchema): boolean {\n  return field.type === 'checkbox' || field.type === 'toggle'\n}\n\n/** Booleans are always toggles inside settings rows; their hint is printed under the row, not in a tooltip. */\nfunction settingsField(field: FormFieldSchema): FormFieldSchema {\n  return isBooleanField(field) ? { ...field, type: 'toggle', hint: undefined } : field\n}\n\ninterface SettingsRow {\n  field: FormFieldSchema\n  group: SettingsGroup\n}\n\nconst searchResults = computed<SettingsRow[]>(() => {\n  if (!isSearching.value) return []\n  return visibleSchemaGroups.value.flatMap((group) =>\n    visibleFields(group)\n      .filter((field) => [field.label, field.hint, group.label].join(' ').toLowerCase().includes(searchTerm.value))\n      .map((field) => ({ field, group })),\n  )\n})\n\nconst resultCount = computed(() =>\n  `${searchResults.value.length} result${searchResults.value.length === 1 ? '' : 's'}`,\n)\n\n/** What the pane renders: one list of search hits, every group (stacked) or the active group. */\nconst paneSections = computed<{ key: string; group?: SettingsGroup; rows: SettingsRow[] }[]>(() => {\n  if (isSearching.value) {\n    return searchResults.value.length ? [{ key: 'search', rows: searchResults.value }] : []\n  }\n  const groups = isStacked.value\n    ? visibleSchemaGroups.value\n    : activeGroup.value ? [activeGroup.value] : []\n  return groups.map((group) => ({\n    key: group.id,\n    group,\n    rows: visibleFields(group).map((field) => ({ field, group })),\n  }))\n})\n\nconst themeOptions: { value: ThemeMode; label: string; halves: ('light' | 'dark')[] }[] = [\n  { value: 'light', label: 'Light', halves: ['light'] },\n  { value: 'dark', label: 'Dark', halves: ['dark'] },\n  { value: 'system', label: 'System', halves: ['light', 'dark'] },\n]\n\n/** Five stops along the palette's primary → accent hue arc (shortest way round), as in the board. */\nfunction paletteSwatches(key: ColorPalette): string[] {\n  const [from, to] = colorPalettes[key].hues\n  const span = ((to - from + 540) % 360) - 180\n  const tone = key === 'pastel' ? '60% 72%' : '65% 48%'\n  return Array.from({ length: 5 }, (_, i) => `hsl(${Math.round(from + (span * i) / 4)} ${tone})`)\n}\n\nconst densityPreviewRows = [\n  ['S-0012', '2.41', '12.5'],\n  ['S-0013', '7.90', '3.25'],\n  ['S-0014', '10.60', '0.80'],\n]\n\nconst densityOptions: { value: TableDensity; label: string }[] = [\n  { value: 'compact', label: 'Compact' },\n  { value: 'normal', label: 'Normal' },\n  { value: 'comfortable', label: 'Comfortable' },\n]\n\nwatch(\n  () => [settings.theme, settings.colorPalette, settings.tableDensity],\n  () => { applied.value = true },\n)\n\nfunction handleClose() {\n  emit('update:open', false)\n  emit('close')\n}\n\nfunction builderFieldNames(): string[] {\n  return builder.fields.map(field => field.name)\n}\n\nfunction canShowForCurrentUser(item: AccessControlled): boolean {\n  return canAccessByPolicy(\n    currentAccessUser.value,\n    item.access,\n    isAccessUserAuthenticated.value,\n  )\n}\n</script>\n\n<template>\n  <BaseModal\n    :open=\"open\"\n    :title=\"title\"\n    :size=\"size\"\n    :layout=\"baseLayout\"\n    :tabs=\"modalTabs\"\n    :active-tab=\"isSearching ? '' : activeTab\"\n    @update:active-tab=\"selectTab\"\n    @update:open=\"emit('update:open', $event)\"\n    @close=\"handleClose\"\n  >\n    <template #header>\n      <div class=\"mint-settings-modal__header\">\n        <h3 class=\"mint-modal__title\">{{ title }}</h3>\n        <div v-if=\"isSchemaDriven\" class=\"mint-settings-modal__search\">\n          <svg class=\"mint-settings-modal__search-icon\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" aria-hidden=\"true\">\n            <circle cx=\"7\" cy=\"7\" r=\"4.5\" /><path d=\"M10.5 10.5L14 14\" />\n          </svg>\n          <BaseInput\n            :model-value=\"query\"\n            type=\"search\"\n            size=\"sm\"\n            placeholder=\"Search settings\"\n            aria-label=\"Search settings\"\n            @update:model-value=\"query = String($event ?? '')\"\n            @keydown=\"handleSearchKeydown\"\n          />\n        </div>\n      </div>\n    </template>\n\n    <template v-if=\"isRail && isSchemaDriven\" #pane-header=\"{ tab }\">\n      <SettingsPaneHeadInternal v-if=\"isSearching\" title=\"Search results\" :count=\"resultCount\" />\n      <SettingsPaneHeadInternal\n        v-else\n        :title=\"tab?.label ?? ''\"\n        :description=\"tab?.description\"\n        :modified-count=\"activeGroup ? modifiedCount(activeGroup) : undefined\"\n        @restore=\"restoreGroup(activeGroup)\"\n      />\n    </template>\n\n    <!-- Body: the active pane only — tab strip / rail / footer are BaseModal's shell. -->\n    <div :class=\"['mint-settings-modal', { 'mint-settings-modal--schema': isSchemaDriven }]\">\n      <template v-if=\"isSchemaDriven\">\n        <SettingsPaneHeadInternal v-if=\"isSearching && !isRail\" title=\"Search results\" :count=\"resultCount\" />\n        <section v-for=\"section in paneSections\" :key=\"section.key\" class=\"mint-settings-modal__group\">\n          <SettingsPaneHeadInternal\n            v-if=\"section.group && !isRail\"\n            :title=\"section.group.label\"\n            :description=\"section.group.description\"\n            :modified-count=\"modifiedCount(section.group)\"\n            @restore=\"restoreGroup(section.group)\"\n          />\n          <div\n            class=\"mint-settings-modal__group-grid\"\n            :style=\"{ '--mint-settings-cols': section.group?.columns ?? 1 }\"\n          >\n            <div\n              v-for=\"row in section.rows\"\n              :key=\"row.field.name\"\n              :class=\"['mint-settings-modal__row', { 'mint-settings-modal__row--modified': isModified(row.field) }]\"\n              :style=\"row.field.colSpan ? { gridColumn: `span ${row.field.colSpan}` } : undefined\"\n            >\n              <span v-if=\"!section.group\" class=\"mint-settings-modal__row-group\">{{ row.group.label }}</span>\n              <div class=\"mint-settings-modal__row-field\">\n                <slot\n                  :name=\"`field:${row.field.name}`\"\n                  :field=\"row.field\"\n                  :form=\"builder.form\"\n                  :field-props=\"builder.form.getFieldProps(row.field.name)\"\n                >\n                  <FormFieldRendererInternal\n                    :field=\"settingsField(row.field)\"\n                    :resolved-props=\"builder.getResolvedFieldProps(settingsField(row.field))\"\n                    :form=\"builder.form\"\n                  />\n                </slot>\n                <p v-if=\"isBooleanField(row.field) && row.field.hint\" class=\"mint-settings-modal__row-hint\">\n                  {{ row.field.hint }}\n                </p>\n                <button\n                  v-if=\"isModified(row.field)\"\n                  type=\"button\"\n                  class=\"mint-settings-modal__reset\"\n                  title=\"Restore default\"\n                  :aria-label=\"`Restore default for ${row.field.label}`\"\n                  @click=\"resetField(row.field)\"\n                >\n                  <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                    <path d=\"M3 8a5 5 0 1 0 1.5-3.5M3 3v2.5h2.5\" />\n                  </svg>\n                </button>\n              </div>\n            </div>\n          </div>\n        </section>\n        <p v-if=\"isSearching && searchResults.length === 0\" class=\"mint-settings-modal__empty\">\n          No settings match \"{{ query.trim() }}\"\n        </p>\n      </template>\n\n      <template v-else>\n        <section\n          v-for=\"tab in manualTabs\"\n          v-show=\"isStacked || activeTab === tab.id\"\n          :key=\"tab.id\"\n          class=\"mint-settings-modal__group\"\n        >\n          <SettingsPaneHeadInternal v-if=\"isStacked\" :title=\"tab.label\" :description=\"tab.description\" />\n          <slot :name=\"`tab-${tab.id}`\" />\n        </section>\n      </template>\n\n      <section\n        v-if=\"showAppearance\"\n        v-show=\"!isSearching && (isStacked || activeTab === APPEARANCE_TAB_ID)\"\n        class=\"mint-settings-modal__group mint-settings-modal__appearance\"\n      >\n        <SettingsPaneHeadInternal\n          v-if=\"isStacked\"\n          :title=\"APPEARANCE_TAB.label\"\n          :description=\"APPEARANCE_TAB.description\"\n        />\n\n        <div class=\"mint-settings-modal__setting\">\n          <div class=\"mint-settings-modal__setting-text\">\n            <span class=\"mint-settings-modal__setting-label\">Theme</span>\n            <span class=\"mint-settings-modal__setting-hint\">Applies to this browser only</span>\n          </div>\n          <div class=\"mint-settings-modal__themes\">\n            <button\n              v-for=\"opt in themeOptions\"\n              :key=\"opt.value\"\n              type=\"button\"\n              :aria-pressed=\"settings.theme === opt.value\"\n              :class=\"['mint-settings-modal__theme', { 'mint-settings-modal__theme--active': settings.theme === opt.value }]\"\n              @click=\"settings.theme = opt.value\"\n            >\n              <span class=\"mint-settings-modal__theme-preview\" aria-hidden=\"true\">\n                <span\n                  v-for=\"half in opt.halves\"\n                  :key=\"half\"\n                  :class=\"['mint-settings-modal__theme-half', `mint-settings-modal__theme-half--${half}`]\"\n                >\n                  <span class=\"mint-settings-modal__theme-line\" />\n                  <span class=\"mint-settings-modal__theme-card\" />\n                </span>\n              </span>\n              <span class=\"mint-settings-modal__theme-label\">\n                <span class=\"mint-settings-modal__theme-radio\" aria-hidden=\"true\" />\n                {{ opt.label }}\n              </span>\n            </button>\n          </div>\n        </div>\n\n        <div class=\"mint-settings-modal__setting\">\n          <div class=\"mint-settings-modal__setting-text\">\n            <span class=\"mint-settings-modal__setting-label\">Color palette</span>\n            <span class=\"mint-settings-modal__setting-hint\">Primary and accent hues across the interface</span>\n          </div>\n          <div class=\"mint-settings-modal__palettes\">\n            <button\n              v-for=\"(palette, key) in colorPalettes\"\n              :key=\"key\"\n              type=\"button\"\n              :aria-pressed=\"settings.colorPalette === key\"\n              :class=\"['mint-settings-modal__palette', { 'mint-settings-modal__palette--active': settings.colorPalette === key }]\"\n              @click=\"settings.colorPalette = key as ColorPalette\"\n            >\n              <span class=\"mint-settings-modal__swatches\" aria-hidden=\"true\">\n                <span\n                  v-for=\"color in paletteSwatches(key as ColorPalette)\"\n                  :key=\"color\"\n                  class=\"mint-settings-modal__swatch\"\n                  :style=\"{ backgroundColor: color }\"\n                />\n              </span>\n              <span class=\"mint-settings-modal__palette-name\">{{ palette.name }}</span>\n              <svg class=\"mint-settings-modal__palette-check\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                <path d=\"M3.5 8.5l3 3 6-7\" />\n              </svg>\n            </button>\n          </div>\n        </div>\n\n        <div class=\"mint-settings-modal__setting mint-settings-modal__setting--inline\">\n          <div class=\"mint-settings-modal__setting-text\">\n            <span class=\"mint-settings-modal__setting-label\">Density</span>\n            <span class=\"mint-settings-modal__setting-hint\">Adjusts control and table row height</span>\n          </div>\n          <SegmentedControl\n            :model-value=\"settings.tableDensity\"\n            :options=\"densityOptions\"\n            size=\"sm\"\n            @update:model-value=\"settings.tableDensity = $event as TableDensity\"\n          />\n          <div\n            :class=\"['mint-settings-modal__density-preview', `mint-settings-modal__density-preview--${settings.tableDensity}`]\"\n            aria-hidden=\"true\"\n          >\n            <div class=\"mint-settings-modal__density-row mint-settings-modal__density-row--head\">\n              <span>Sample</span><span>RT</span><span>IC50</span>\n            </div>\n            <div v-for=\"cells in densityPreviewRows\" :key=\"cells[0]\" class=\"mint-settings-modal__density-row\">\n              <span>{{ cells[0] }}</span><span>{{ cells[1] }}</span><span>{{ cells[2] }}</span>\n            </div>\n          </div>\n        </div>\n\n        <slot name=\"appearance\" />\n      </section>\n    </div>\n\n    <template #footer>\n      <slot\n        name=\"footer\"\n        :values=\"builder.form.data\"\n        :close=\"handleClose\"\n      >\n        <span class=\"mint-settings-modal__status\" role=\"status\">\n          <svg v-if=\"applied\" class=\"mint-settings-modal__status-icon\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n            <path d=\"M3.5 8.5l3 3 6-7\" />\n          </svg>\n          {{ applied ? 'Applied · changes take effect immediately' : 'Changes take effect immediately' }}\n        </span>\n        <BaseButton class=\"mint-settings-modal__done\" variant=\"primary\" @click=\"handleClose\">Done</BaseButton>\n      </slot>\n    </template>\n  </BaseModal>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Tabbed settings modal with three usage modes:\n *\n *   1. Schema-driven (recommended) — pass a `defineControlModel()` result or a\n *      `SettingsModalSchema` as `spec`, plus `v-model:values`. Each\n *      group/section becomes a tab; fields auto-render via the SDK form field\n *      registry (text, select, number, toggle, molecule, concentration, …).\n *      Conditional visibility, validation, and dynamic options come for free.\n *\n *   2. Manual tabs + slots — pass `tabs` and a `<template #tab-{id}>` slot\n *      per tab. Use this when you need bespoke widgets the form-builder\n *      registry doesn't cover (or for legacy plugins).\n *\n *   3. Appearance only — `showAppearance` (default true) renders the built-in\n *      theme / palette / table-density tab. Works alongside both modes above.\n *\n * Layout: omitted (default) renders a sidebar rail split into \"Plugin\" and\n * \"Personal\" (Appearance) sections when there are more than three groups, and\n * stacks every group on one page otherwise. `vertical` always uses the rail;\n * `horizontal` keeps the underline tab strip.\n *\n * Schema-driven settings also get a search across groups (label + hint), a\n * modified-from-default marker with a per-row reset for every field with a\n * non-null `defaultValue` (every control model field gets one), and a \"Restore group defaults\" action. Changes\n * apply immediately; the default footer says so and closes with \"Done\".\n *\n * @example Recommended\n * ```vue\n * <SettingsModal v-model:open=\"open\" v-model:values=\"values\" :spec=\"settingsModel\" />\n * ```\n */\nimport { ref, computed, watch } from 'vue'\nimport BaseModal from './BaseModal.vue'\nimport BaseButton from './BaseButton.vue'\nimport BaseInput from './BaseInput.vue'\nimport SegmentedControl from './SegmentedControl.vue'\nimport FormFieldRendererInternal from './internal/FormFieldRendererInternal.vue'\nimport SettingsPaneHeadInternal from './internal/SettingsPaneHeadInternal.vue'\nimport { useFormBuilder } from '../composables/useFormBuilder'\nimport {\n  controlsToSettingsSchema,\n  isControlModelBinding,\n  type ControlModelBinding,\n} from '../composables/useControlSchema'\nimport { useSettingsStore, colorPalettes } from '../stores/settings'\nimport { useAuthStore } from '../stores/auth'\nimport { usePlatform } from '../composables/usePlatform'\nimport { canAccessByPolicy } from '../permissions'\nimport {\n  formSchemaFieldNames,\n  pickExistingRecordKeys,\n  pickRecordKeys,\n  recordValuesEqualForKeys,\n  valuesEqual,\n} from '../utils/formModelSync'\nimport type {\n  ThemeMode,\n  ColorPalette,\n  TableDensity,\n  ModalLayout,\n  ModalTab,\n  SettingsGroup,\n  SettingsTab,\n  SettingsTabInput,\n  SettingsModalLayout,\n  SettingsModalSchema,\n  SettingsUserType,\n  FormFieldSchema,\n} from '../types'\nimport type { AccessControlled, PermissionUser } from '../permissions'\nimport {\n  APPEARANCE_TAB,\n  APPEARANCE_TAB_ID,\n  buildFlatSettingsSchema,\n  buildSettingsTabs,\n  filterSettingsSchemaByAccess,\n  normalizeVisibleSettingsTabs,\n  settingsGroupToTab,\n} from './SettingsModal.schema'\n\ninterface Props {\n  open: boolean\n  title?: string\n  /** Manual tab descriptors. Ignored when `spec` is set (groups become tabs). */\n  tabs?: SettingsTabInput[]\n  showAppearance?: boolean\n  /** List Appearance before the other tabs and open on it. */\n  appearanceFirst?: boolean\n  size?: 'md' | 'lg' | 'xl'\n  layout?: SettingsModalLayout\n  /** Control model built with defineControlModel(), or a SettingsModalSchema (e.g. the generated `settingsForm`). Fields auto-render via SDK form components. */\n  spec?: ControlModelBinding | SettingsModalSchema\n  /** Two-way bound values when `spec` is set. */\n  values?: Record<string, unknown>\n  /** Optional user type override for permission-filtered settings content. Defaults to SDK auth/platform context. */\n  userType?: SettingsUserType\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  title: 'Settings',\n  tabs: () => [],\n  showAppearance: true,\n  size: 'lg',\n  layout: undefined,\n  spec: undefined,\n})\n\nconst emit = defineEmits<{\n  'update:open': [value: boolean]\n  'update:values': [data: Record<string, unknown>]\n  close: []\n}>()\n\nconst settings = useSettingsStore()\nconst auth = useAuthStore()\nconst { user: platformUser, integrated, isAdmin: platformIsAdmin } = usePlatform()\n// With sign-in turned off (`authRequired: false`) every caller of an integrated page is the\n// implicit administrator, and usePlatform reports a page with no user as admin.\nconst implicitPlatformAdmin = computed(() => integrated.value && !platformUser.value && platformIsAdmin.value)\n\nconst resolvedModel = computed<ControlModelBinding | undefined>(() =>\n  isControlModelBinding(props.spec) ? props.spec : undefined,\n)\nconst sourceSettingsSchema = computed<SettingsModalSchema | undefined>(() =>\n  resolvedModel.value\n    ? controlsToSettingsSchema(resolvedModel.value.controls, resolvedModel.value.controlOptions)\n    : props.spec as SettingsModalSchema | undefined,\n)\nconst currentAccessUser = computed<PermissionUser | null>(() => {\n  if (props.userType) {\n    return { role: props.userType === 'admin' ? 'admin' : 'user' }\n  }\n  return auth.userInfo ?? platformUser.value ?? (implicitPlatformAdmin.value ? { role: 'admin' } : null)\n})\nconst isAccessUserAuthenticated = computed(() =>\n  props.userType !== undefined || auth.isAuthenticated || !!platformUser.value || implicitPlatformAdmin.value,\n)\nconst settingsSchema = computed<SettingsModalSchema | undefined>(() => {\n  if (!sourceSettingsSchema.value) return undefined\n  return filterSettingsSchemaByAccess(sourceSettingsSchema.value, canShowForCurrentUser)\n})\nconst isSchemaDriven = computed(() => !!settingsSchema.value)\nconst resolvedValues = computed<Record<string, unknown>>(() => ({\n  ...(resolvedModel.value?.controlOptions.initialValues ?? {}),\n  ...(props.values ?? {}),\n}))\n\n// Schema-driven mode keeps one form-builder instance and syncs schema changes\n// into it, so callers can swap groups/fields without remounting the modal.\nconst builder = useFormBuilder(\n  settingsSchema.value ? buildFlatSettingsSchema(settingsSchema.value) : { sections: [] },\n  resolvedValues.value,\n  resolvedModel.value?.controlOptions.enhancements,\n)\n\nwatch(\n  () => settingsSchema.value,\n  (schema) => {\n    if (!schema) {\n      builder.updateSchema({ sections: [] }, {})\n      return\n    }\n\n    const flatSchema = buildFlatSettingsSchema(schema)\n    const fieldNames = formSchemaFieldNames(flatSchema)\n    const sourceValues = props.values === undefined\n      ? {\n          ...resolvedValues.value,\n          ...(builder.form.data as Record<string, unknown>),\n        }\n      : resolvedValues.value\n\n    builder.updateSchema(flatSchema, pickExistingRecordKeys(sourceValues ?? {}, fieldNames))\n  },\n  { deep: true },\n)\n\nwatch(\n  () => ({ ...resolvedValues.value }),\n  (data) => {\n    if (!settingsSchema.value) return\n    const fieldNames = builderFieldNames()\n    if (recordValuesEqualForKeys(data, builder.form.data as Record<string, unknown>, fieldNames)) return\n    builder.reset(pickRecordKeys(data, fieldNames))\n  },\n  { deep: true },\n)\n\n// Changes apply immediately; the footer confirms it once the user changed something.\nconst applied = ref(false)\n\nwatch(\n  () => ({ ...builder.form.data }),\n  (data) => {\n    // A reset to the parent's values (async load, schema swap) is not a user change.\n    if (!recordValuesEqualForKeys(data, resolvedValues.value, builderFieldNames())) applied.value = true\n    if (settingsSchema.value) {\n      emit('update:values', {\n        ...resolvedValues.value,\n        ...data,\n      })\n    }\n  },\n  { deep: true },\n)\n\n// Schema groups whose `condition` evaluates false against the current data are\n// dropped from the rail entirely — same semantics as section visibility in\n// FormBuilder. Manual `tabs` have no condition mechanism, so they pass through.\nconst visibleSchemaGroups = computed(() =>\n  settingsSchema.value\n    ? settingsSchema.value.groups.filter((g) => builder.isSectionVisible(g.id))\n    : [],\n)\n\nconst manualTabs = computed<SettingsTab[]>(() =>\n  normalizeVisibleSettingsTabs(props.tabs, canShowForCurrentUser)\n)\n\nconst allTabs = computed<SettingsTab[]>(() => {\n  const base: SettingsTab[] = settingsSchema.value\n    ? visibleSchemaGroups.value.map(settingsGroupToTab)\n    : manualTabs.value\n  return buildSettingsTabs(base, props.showAppearance, props.appearanceFirst)\n})\n\nconst activeTab = ref(allTabs.value[0]?.id || APPEARANCE_TAB_ID)\n\n/** Above this many plugin groups the default layout switches from one stacked page to the rail. */\nconst STACKED_GROUP_LIMIT = 3\n\n// BaseModal owns the tab chrome: 'vertical' keeps its public name and maps to\n// the shell rail; horizontal maps to the shell strip (plain when single-tab).\nconst baseLayout = computed<ModalLayout>(() => {\n  if (props.layout === 'vertical') return 'rail'\n  if (props.layout === 'horizontal') return allTabs.value.length > 1 ? 'tabs' : 'plain'\n  const pluginTabCount = settingsSchema.value ? visibleSchemaGroups.value.length : manualTabs.value.length\n  return pluginTabCount > STACKED_GROUP_LIMIT ? 'rail' : 'plain'\n})\nconst isRail = computed(() => baseLayout.value === 'rail')\nconst isStacked = computed(() => baseLayout.value === 'plain')\n\nconst query = ref('')\nconst searchTerm = computed(() => query.value.trim().toLowerCase())\nconst isSearching = computed(() => isSchemaDriven.value && searchTerm.value !== '')\n\nconst modalTabs = computed<ModalTab[]>(() =>\n  allTabs.value.map((tab) => {\n    const group = visibleSchemaGroups.value.find((g) => g.id === tab.id)\n    const modified = group ? modifiedCount(group) : 0\n    return {\n      id: tab.id,\n      label: tab.label,\n      icon: tab.icon,\n      description: tab.description,\n      meta: group ? (modified ? String(modified) : undefined) : tab.meta,\n      // Sections only split plugin groups from Appearance; without it there is nothing to split.\n      section: props.showAppearance ? (tab.id === APPEARANCE_TAB_ID ? 'Personal' : tab.section ?? 'Plugin') : undefined,\n    }\n  }),\n)\n\nfunction selectTab(id: string) {\n  activeTab.value = id\n  query.value = ''\n}\n\nfunction handleSearchKeydown(event: KeyboardEvent) {\n  // First Escape clears the search; the next one closes the modal.\n  if (event.key === 'Escape' && query.value) {\n    event.stopPropagation()\n    query.value = ''\n  }\n}\n\n// If the active tab vanishes (group hidden by condition), drop back to the first available.\nwatch(allTabs, (tabs) => {\n  if (!tabs.some((t) => t.id === activeTab.value)) {\n    activeTab.value = tabs[0]?.id ?? APPEARANCE_TAB_ID\n  }\n})\n\nconst activeGroup = computed(() =>\n  visibleSchemaGroups.value.find((g) => g.id === activeTab.value),\n)\n\nfunction visibleFields(group: SettingsGroup): FormFieldSchema[] {\n  return group.fields.filter((f) => builder.isFieldVisible(f.name))\n}\n\n/**\n * Modified = differs from the field's own `defaultValue`. A field without one, or with a `null`\n * default (a secret, or an optional setting), never is: restoring `null` would clear a stored value.\n */\nfunction isModified(field: FormFieldSchema): boolean {\n  return field.defaultValue != null\n    && !valuesEqual((builder.form.data as Record<string, unknown>)[field.name], field.defaultValue)\n}\n\nfunction modifiedCount(group: SettingsGroup): number {\n  return visibleFields(group).filter(isModified).length\n}\n\nfunction resetField(field: FormFieldSchema) {\n  builder.form.setFieldValue(field.name, field.defaultValue)\n}\n\nfunction restoreGroup(group: SettingsGroup | undefined) {\n  if (group) visibleFields(group).filter(isModified).forEach(resetField)\n}\n\nfunction isBooleanField(field: FormFieldSchema): boolean {\n  return field.type === 'checkbox' || field.type === 'toggle'\n}\n\n/** Booleans are always toggles inside settings rows; their hint is printed under the row, not in a tooltip. */\nfunction settingsField(field: FormFieldSchema): FormFieldSchema {\n  return isBooleanField(field) ? { ...field, type: 'toggle', hint: undefined } : field\n}\n\ninterface SettingsRow {\n  field: FormFieldSchema\n  group: SettingsGroup\n}\n\nconst searchResults = computed<SettingsRow[]>(() => {\n  if (!isSearching.value) return []\n  return visibleSchemaGroups.value.flatMap((group) =>\n    visibleFields(group)\n      .filter((field) => [field.label, field.hint, group.label].join(' ').toLowerCase().includes(searchTerm.value))\n      .map((field) => ({ field, group })),\n  )\n})\n\nconst resultCount = computed(() =>\n  `${searchResults.value.length} result${searchResults.value.length === 1 ? '' : 's'}`,\n)\n\n/** What the pane renders: one list of search hits, every group (stacked) or the active group. */\nconst paneSections = computed<{ key: string; group?: SettingsGroup; rows: SettingsRow[] }[]>(() => {\n  if (isSearching.value) {\n    return searchResults.value.length ? [{ key: 'search', rows: searchResults.value }] : []\n  }\n  const groups = isStacked.value\n    ? visibleSchemaGroups.value\n    : activeGroup.value ? [activeGroup.value] : []\n  return groups.map((group) => ({\n    key: group.id,\n    group,\n    rows: visibleFields(group).map((field) => ({ field, group })),\n  }))\n})\n\nconst themeOptions: { value: ThemeMode; label: string; halves: ('light' | 'dark')[] }[] = [\n  { value: 'light', label: 'Light', halves: ['light'] },\n  { value: 'dark', label: 'Dark', halves: ['dark'] },\n  { value: 'system', label: 'System', halves: ['light', 'dark'] },\n]\n\n/** Five stops along the palette's primary → accent hue arc (shortest way round), as in the board. */\nfunction paletteSwatches(key: ColorPalette): string[] {\n  const [from, to] = colorPalettes[key].hues\n  const span = ((to - from + 540) % 360) - 180\n  const tone = key === 'pastel' ? '60% 72%' : '65% 48%'\n  return Array.from({ length: 5 }, (_, i) => `hsl(${Math.round(from + (span * i) / 4)} ${tone})`)\n}\n\nconst densityPreviewRows = [\n  ['S-0012', '2.41', '12.5'],\n  ['S-0013', '7.90', '3.25'],\n  ['S-0014', '10.60', '0.80'],\n]\n\nconst densityOptions: { value: TableDensity; label: string }[] = [\n  { value: 'compact', label: 'Compact' },\n  { value: 'normal', label: 'Normal' },\n  { value: 'comfortable', label: 'Comfortable' },\n]\n\nwatch(\n  () => [settings.theme, settings.colorPalette, settings.tableDensity],\n  () => { applied.value = true },\n)\n\nfunction handleClose() {\n  emit('update:open', false)\n  emit('close')\n}\n\nfunction builderFieldNames(): string[] {\n  return builder.fields.map(field => field.name)\n}\n\nfunction canShowForCurrentUser(item: AccessControlled): boolean {\n  return canAccessByPolicy(\n    currentAccessUser.value,\n    item.access,\n    isAccessUserAuthenticated.value,\n  )\n}\n</script>\n\n<template>\n  <BaseModal\n    :open=\"open\"\n    :title=\"title\"\n    :size=\"size\"\n    :layout=\"baseLayout\"\n    :tabs=\"modalTabs\"\n    :active-tab=\"isSearching ? '' : activeTab\"\n    @update:active-tab=\"selectTab\"\n    @update:open=\"emit('update:open', $event)\"\n    @close=\"handleClose\"\n  >\n    <template #header>\n      <div class=\"mint-settings-modal__header\">\n        <h3 class=\"mint-modal__title\">{{ title }}</h3>\n        <div v-if=\"isSchemaDriven\" class=\"mint-settings-modal__search\">\n          <svg class=\"mint-settings-modal__search-icon\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" aria-hidden=\"true\">\n            <circle cx=\"7\" cy=\"7\" r=\"4.5\" /><path d=\"M10.5 10.5L14 14\" />\n          </svg>\n          <BaseInput\n            :model-value=\"query\"\n            type=\"search\"\n            size=\"sm\"\n            placeholder=\"Search settings\"\n            aria-label=\"Search settings\"\n            @update:model-value=\"query = String($event ?? '')\"\n            @keydown=\"handleSearchKeydown\"\n          />\n        </div>\n      </div>\n    </template>\n\n    <template v-if=\"isRail && isSchemaDriven\" #pane-header=\"{ tab }\">\n      <SettingsPaneHeadInternal v-if=\"isSearching\" title=\"Search results\" :count=\"resultCount\" />\n      <SettingsPaneHeadInternal\n        v-else\n        :title=\"tab?.label ?? ''\"\n        :description=\"tab?.description\"\n        :modified-count=\"activeGroup ? modifiedCount(activeGroup) : undefined\"\n        @restore=\"restoreGroup(activeGroup)\"\n      />\n    </template>\n\n    <!-- Body: the active pane only — tab strip / rail / footer are BaseModal's shell. -->\n    <div :class=\"['mint-settings-modal', { 'mint-settings-modal--schema': isSchemaDriven }]\">\n      <template v-if=\"isSchemaDriven\">\n        <SettingsPaneHeadInternal v-if=\"isSearching && !isRail\" title=\"Search results\" :count=\"resultCount\" />\n        <section v-for=\"section in paneSections\" :key=\"section.key\" class=\"mint-settings-modal__group\">\n          <SettingsPaneHeadInternal\n            v-if=\"section.group && !isRail\"\n            :title=\"section.group.label\"\n            :description=\"section.group.description\"\n            :modified-count=\"modifiedCount(section.group)\"\n            @restore=\"restoreGroup(section.group)\"\n          />\n          <div\n            class=\"mint-settings-modal__group-grid\"\n            :style=\"{ '--mint-settings-cols': section.group?.columns ?? 1 }\"\n          >\n            <div\n              v-for=\"row in section.rows\"\n              :key=\"row.field.name\"\n              :class=\"['mint-settings-modal__row', { 'mint-settings-modal__row--modified': isModified(row.field) }]\"\n              :style=\"row.field.colSpan ? { gridColumn: `span ${row.field.colSpan}` } : undefined\"\n            >\n              <span v-if=\"!section.group\" class=\"mint-settings-modal__row-group\">{{ row.group.label }}</span>\n              <div class=\"mint-settings-modal__row-field\">\n                <slot\n                  :name=\"`field:${row.field.name}`\"\n                  :field=\"row.field\"\n                  :form=\"builder.form\"\n                  :field-props=\"builder.form.getFieldProps(row.field.name)\"\n                >\n                  <FormFieldRendererInternal\n                    :field=\"settingsField(row.field)\"\n                    :resolved-props=\"builder.getResolvedFieldProps(settingsField(row.field))\"\n                    :form=\"builder.form\"\n                  />\n                </slot>\n                <p v-if=\"isBooleanField(row.field) && row.field.hint\" class=\"mint-settings-modal__row-hint\">\n                  {{ row.field.hint }}\n                </p>\n                <button\n                  v-if=\"isModified(row.field)\"\n                  type=\"button\"\n                  class=\"mint-settings-modal__reset\"\n                  title=\"Restore default\"\n                  :aria-label=\"`Restore default for ${row.field.label}`\"\n                  @click=\"resetField(row.field)\"\n                >\n                  <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                    <path d=\"M3 8a5 5 0 1 0 1.5-3.5M3 3v2.5h2.5\" />\n                  </svg>\n                </button>\n              </div>\n            </div>\n          </div>\n        </section>\n        <p v-if=\"isSearching && searchResults.length === 0\" class=\"mint-settings-modal__empty\">\n          No settings match \"{{ query.trim() }}\"\n        </p>\n      </template>\n\n      <template v-else>\n        <section\n          v-for=\"tab in manualTabs\"\n          v-show=\"isStacked || activeTab === tab.id\"\n          :key=\"tab.id\"\n          class=\"mint-settings-modal__group\"\n        >\n          <SettingsPaneHeadInternal v-if=\"isStacked\" :title=\"tab.label\" :description=\"tab.description\" />\n          <slot :name=\"`tab-${tab.id}`\" />\n        </section>\n      </template>\n\n      <section\n        v-if=\"showAppearance\"\n        v-show=\"!isSearching && (isStacked || activeTab === APPEARANCE_TAB_ID)\"\n        class=\"mint-settings-modal__group mint-settings-modal__appearance\"\n      >\n        <SettingsPaneHeadInternal\n          v-if=\"isStacked\"\n          :title=\"APPEARANCE_TAB.label\"\n          :description=\"APPEARANCE_TAB.description\"\n        />\n\n        <div class=\"mint-settings-modal__setting\">\n          <div class=\"mint-settings-modal__setting-text\">\n            <span class=\"mint-settings-modal__setting-label\">Theme</span>\n            <span class=\"mint-settings-modal__setting-hint\">Applies to this browser only</span>\n          </div>\n          <div class=\"mint-settings-modal__themes\">\n            <button\n              v-for=\"opt in themeOptions\"\n              :key=\"opt.value\"\n              type=\"button\"\n              :aria-pressed=\"settings.theme === opt.value\"\n              :class=\"['mint-settings-modal__theme', { 'mint-settings-modal__theme--active': settings.theme === opt.value }]\"\n              @click=\"settings.theme = opt.value\"\n            >\n              <span class=\"mint-settings-modal__theme-preview\" aria-hidden=\"true\">\n                <span\n                  v-for=\"half in opt.halves\"\n                  :key=\"half\"\n                  :class=\"['mint-settings-modal__theme-half', `mint-settings-modal__theme-half--${half}`]\"\n                >\n                  <span class=\"mint-settings-modal__theme-line\" />\n                  <span class=\"mint-settings-modal__theme-card\" />\n                </span>\n              </span>\n              <span class=\"mint-settings-modal__theme-label\">\n                <span class=\"mint-settings-modal__theme-radio\" aria-hidden=\"true\" />\n                {{ opt.label }}\n              </span>\n            </button>\n          </div>\n        </div>\n\n        <div class=\"mint-settings-modal__setting\">\n          <div class=\"mint-settings-modal__setting-text\">\n            <span class=\"mint-settings-modal__setting-label\">Color palette</span>\n            <span class=\"mint-settings-modal__setting-hint\">Primary and accent hues across the interface</span>\n          </div>\n          <div class=\"mint-settings-modal__palettes\">\n            <button\n              v-for=\"(palette, key) in colorPalettes\"\n              :key=\"key\"\n              type=\"button\"\n              :aria-pressed=\"settings.colorPalette === key\"\n              :class=\"['mint-settings-modal__palette', { 'mint-settings-modal__palette--active': settings.colorPalette === key }]\"\n              @click=\"settings.colorPalette = key as ColorPalette\"\n            >\n              <span class=\"mint-settings-modal__swatches\" aria-hidden=\"true\">\n                <span\n                  v-for=\"color in paletteSwatches(key as ColorPalette)\"\n                  :key=\"color\"\n                  class=\"mint-settings-modal__swatch\"\n                  :style=\"{ backgroundColor: color }\"\n                />\n              </span>\n              <span class=\"mint-settings-modal__palette-name\">{{ palette.name }}</span>\n              <svg class=\"mint-settings-modal__palette-check\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                <path d=\"M3.5 8.5l3 3 6-7\" />\n              </svg>\n            </button>\n          </div>\n        </div>\n\n        <div class=\"mint-settings-modal__setting mint-settings-modal__setting--inline\">\n          <div class=\"mint-settings-modal__setting-text\">\n            <span class=\"mint-settings-modal__setting-label\">Density</span>\n            <span class=\"mint-settings-modal__setting-hint\">Adjusts control and table row height</span>\n          </div>\n          <SegmentedControl\n            :model-value=\"settings.tableDensity\"\n            :options=\"densityOptions\"\n            size=\"sm\"\n            @update:model-value=\"settings.tableDensity = $event as TableDensity\"\n          />\n          <div\n            :class=\"['mint-settings-modal__density-preview', `mint-settings-modal__density-preview--${settings.tableDensity}`]\"\n            aria-hidden=\"true\"\n          >\n            <div class=\"mint-settings-modal__density-row mint-settings-modal__density-row--head\">\n              <span>Sample</span><span>RT</span><span>IC50</span>\n            </div>\n            <div v-for=\"cells in densityPreviewRows\" :key=\"cells[0]\" class=\"mint-settings-modal__density-row\">\n              <span>{{ cells[0] }}</span><span>{{ cells[1] }}</span><span>{{ cells[2] }}</span>\n            </div>\n          </div>\n        </div>\n\n        <slot name=\"appearance\" />\n      </section>\n    </div>\n\n    <template #footer>\n      <slot\n        name=\"footer\"\n        :values=\"builder.form.data\"\n        :close=\"handleClose\"\n      >\n        <span class=\"mint-settings-modal__status\" role=\"status\">\n          <svg v-if=\"applied\" class=\"mint-settings-modal__status-icon\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n            <path d=\"M3.5 8.5l3 3 6-7\" />\n          </svg>\n          {{ applied ? 'Applied · changes take effect immediately' : 'Changes take effect immediately' }}\n        </span>\n        <BaseButton class=\"mint-settings-modal__done\" variant=\"primary\" @click=\"handleClose\">Done</BaseButton>\n      </slot>\n    </template>\n  </BaseModal>\n</template>\n"],"mappings":"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"}