@svgrid/grid 2.6.3 → 2.6.5

package/src/svgrid.group-props-reactive.svelte.test.ts

@@ -0,0 +1,151 @@
+/**
+ * Reactivity for `groupBy` / `expanded`: reassigning the prop must re-apply to
+ * the engine, and a controlled parent that echoes `onExpandedChange` straight
+ * back into `expanded` must settle instead of looping.
+ *
+ * Lives in a `.svelte.test.ts` so runes are available - the props object is a
+ * `$state` proxy, which is what makes a prop reassignment reach the component.
+ */
+import { describe, expect, it } from 'vitest'
+import { mount, unmount, flushSync } from 'svelte'
+import SvGrid from './SvGrid.svelte'
+import {
+  columnGroupingFeature,
+  createCoreRowModel,
+  createExpandedRowModel,
+  createFilteredRowModel,
+  createGroupedRowModel,
+  createPaginatedRowModel,
+  createSortedRowModel,
+  rowExpandingFeature,
+  rowSortingFeature,
+  sortFns,
+  tableFeatures,
+} from './index'
+import type { SvGridApi } from './index'
+
+type Row = { id: number; name: string; department: string }
+
+const rows: Row[] = [
+  { id: 1, name: 'Ada', department: 'Engineering' },
+  { id: 2, name: 'Grace', department: 'Engineering' },
+  { id: 3, name: 'Linus', department: 'Operations' },
+]
+const columns = [
+  { field: 'name', header: 'Name', width: 150 },
+  { field: 'department', header: 'Department', width: 180 },
+]
+const features = tableFeatures({ rowSortingFeature, columnGroupingFeature, rowExpandingFeature })
+
+function baseProps(extra: Record<string, unknown>): Record<string, unknown> {
+  return {
+    data: rows,
+    columns,
+    features,
+    _rowModels: {
+      coreRowModel: createCoreRowModel(),
+      filteredRowModel: createFilteredRowModel(),
+      sortedRowModel: createSortedRowModel(sortFns),
+      groupedRowModel: createGroupedRowModel(),
+      expandedRowModel: createExpandedRowModel(),
+      paginatedRowModel: createPaginatedRowModel(),
+    },
+    containerHeight: 480,
+    virtualization: false,
+    ...extra,
+  }
+}
+
+describe('groupBy reactivity', () => {
+  it('re-groups when the prop is reassigned, and ungroups when emptied', () => {
+    const target = document.createElement('div')
+    document.body.appendChild(target)
+    let api: SvGridApi<typeof features, Row> | null = null
+    const props = $state(
+      baseProps({
+        groupBy: ['department'],
+        onApiReady: (next: SvGridApi<typeof features, Row>) => (api = next),
+      }),
+    )
+    const app = mount(SvGrid, { target, props: props as never })
+    flushSync()
+    expect(api!.getState().grouping).toEqual(['department'])
+
+    props.groupBy = ['name']
+    flushSync()
+    expect(api!.getState().grouping).toEqual(['name'])
+
+    props.groupBy = []
+    flushSync()
+    expect(api!.getState().grouping).toEqual([])
+    expect(target.querySelectorAll('tbody tr').length).toBe(3) // flat again
+
+    unmount(app)
+    target.remove()
+  })
+})
+
+describe('expanded reactivity', () => {
+  it('opens and closes a group when the prop is reassigned', () => {
+    const target = document.createElement('div')
+    document.body.appendChild(target)
+    const props = $state(baseProps({ groupBy: ['department'], expanded: {} }))
+    const app = mount(SvGrid, { target, props: props as never })
+    flushSync()
+    expect(target.querySelectorAll('tbody tr').length).toBe(2) // two banners
+
+    props.expanded = {
+      group_department_Engineering: true,
+    }
+    flushSync()
+    expect(target.querySelectorAll('tbody tr').length).toBe(4) // + Ada, Grace
+
+    props.expanded = {}
+    flushSync()
+    expect(target.querySelectorAll('tbody tr').length).toBe(2)
+
+    unmount(app)
+    target.remove()
+  })
+
+  it('settles when a controlled parent echoes onExpandedChange back into the prop', () => {
+    const target = document.createElement('div')
+    document.body.appendChild(target)
+    let api: SvGridApi<typeof features, Row> | null = null
+    let notifications = 0
+    const props = $state(
+      baseProps({
+        groupBy: ['department'],
+        expanded: {} as Record<string, boolean>,
+        // The exact round-trip the docs recommend.
+        onExpandedChange: (next: Record<string, boolean>) => {
+          notifications += 1
+          props.expanded = next
+        },
+        onApiReady: (next: SvGridApi<typeof features, Row>) => (api = next),
+      }),
+    )
+    const app = mount(SvGrid, { target, props: props as never })
+    flushSync()
+    notifications = 0
+
+    api!.expandAllGroups()
+    flushSync()
+
+    // The echo must not re-seed and re-fire; one settled notification.
+    expect(notifications).toBe(1)
+    expect(props.expanded).toEqual({
+      group_department_Engineering: true,
+      group_department_Operations: true,
+    })
+    expect(target.querySelectorAll('tbody tr').length).toBe(5) // 2 banners + 3 leaves
+
+    api!.collapseAllGroups()
+    flushSync()
+    expect(notifications).toBe(2)
+    expect(target.querySelectorAll('tbody tr').length).toBe(2)
+
+    unmount(app)
+    target.remove()
+  })
+})

package/src/svgrid.group-props.test.ts

@@ -0,0 +1,280 @@
+/**
+ * DOM: the `groupBy`, `expanded` and `onExpandedChange` props.
+ *
+ * `groupBy` seeds the engine's group-by list from markup instead of forcing an
+ * `onApiReady` + `api.setGroupBy()` round trip. `expanded` / `onExpandedChange`
+ * hoist the expansion map out of the engine so saved views can persist it.
+ *
+ * The interesting cases are the ones where two writers meet: the prop and the
+ * imperative API both target the same state, and a controlled parent echoes the
+ * callback value straight back into the prop.
+ */
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { mount, unmount } from 'svelte'
+import SvGrid from './SvGrid.svelte'
+import {
+  createCoreRowModel,
+  createExpandedRowModel,
+  createFilteredRowModel,
+  createGroupedRowModel,
+  createPaginatedRowModel,
+  createSortedRowModel,
+  rowExpandingFeature,
+  columnGroupingFeature,
+  rowSortingFeature,
+  sortFns,
+  tableFeatures,
+} from './index'
+import type { SvGridApi } from './index'
+
+type Row = { id: number; name: string; department: string; salary: number }
+
+const data: Row[] = [
+  { id: 1, name: 'Ada', department: 'Engineering', salary: 100 },
+  { id: 2, name: 'Grace', department: 'Engineering', salary: 120 },
+  { id: 3, name: 'Linus', department: 'Operations', salary: 90 },
+  { id: 4, name: 'Ken', department: 'Operations', salary: 80 },
+  { id: 5, name: 'Barbara', department: 'Research', salary: 140 },
+]
+
+const columns = [
+  { field: 'name', header: 'Name', width: 150 },
+  { field: 'department', header: 'Department', width: 180 },
+  { field: 'salary', header: 'Salary', width: 120 },
+]
+
+const features = tableFeatures({ rowSortingFeature, columnGroupingFeature, rowExpandingFeature })
+const tick = async (n = 3) => {
+  for (let i = 0; i < n; i++) await new Promise((r) => setTimeout(r, 0))
+}
+
+const mounted: Array<() => void> = []
+afterEach(() => {
+  while (mounted.length) mounted.pop()!()
+})
+
+function mountGrid(extra: Record<string, unknown> = {}, rows: unknown[] = data, cols: unknown = columns) {
+  const target = document.createElement('div')
+  document.body.appendChild(target)
+  let api: SvGridApi<never, Row> | null = null
+  const app = mount(SvGrid, {
+    target,
+    props: {
+      data: rows,
+      columns: cols,
+      features,
+      _rowModels: {
+        coreRowModel: createCoreRowModel(),
+        filteredRowModel: createFilteredRowModel(),
+        sortedRowModel: createSortedRowModel(sortFns),
+        groupedRowModel: createGroupedRowModel(),
+        expandedRowModel: createExpandedRowModel(),
+        paginatedRowModel: createPaginatedRowModel(),
+      },
+      containerHeight: 600,
+      virtualization: false,
+      onApiReady: (next: SvGridApi<never, Row>) => (api = next),
+      ...extra,
+    } as never,
+  })
+  mounted.push(() => unmount(app))
+  return { target, get api() { return api! } }
+}
+
+const bodyRows = (t: HTMLElement) => t.querySelectorAll('tbody tr').length
+
+describe('groupBy prop', () => {
+  it('groups from markup with no api round trip', async () => {
+    const g = mountGrid({ groupBy: ['department'] })
+    await tick()
+    expect(g.api.getState().grouping).toEqual(['department'])
+    // One banner per distinct department, all collapsed.
+    expect(bodyRows(g.target)).toBe(3)
+    expect(g.target.querySelector('tbody')?.textContent).toContain('Engineering')
+  })
+
+  it('nests in the order given', async () => {
+    const g = mountGrid({ groupBy: ['department', 'name'] })
+    await tick()
+    expect(g.api.getState().grouping).toEqual(['department', 'name'])
+    g.api.expandAllGroups()
+    await tick()
+    // Outer banners still bucket by department, so the leaves stay under them.
+    expect(g.api.getDisplayedRows()).toHaveLength(5)
+  })
+
+  it('defaults to no grouping when omitted', async () => {
+    const g = mountGrid()
+    await tick()
+    expect(g.api.getState().grouping).toEqual([])
+    expect(bodyRows(g.target)).toBe(5)
+  })
+
+  it('re-applies when the prop changes', async () => {
+    // Re-mounting with a different prop value is the component-level
+    // equivalent of the parent reassigning it.
+    const g = mountGrid({ groupBy: ['name'] })
+    await tick()
+    expect(g.api.getState().grouping).toEqual(['name'])
+  })
+
+  it('does not clobber a group-by set through the api', async () => {
+    const g = mountGrid({ groupBy: ['department'] })
+    await tick()
+    g.api.setGroupBy(['name'])
+    await tick(5)
+    // The prop has not changed, so the seeding effect must stay out of the way.
+    expect(g.api.getState().grouping).toEqual(['name'])
+  })
+
+  it('is ignored when treeData is set', async () => {
+    const tree = [
+      { id: 1, managerId: null, name: 'Ada', department: 'Engineering', salary: 1 },
+      { id: 2, managerId: 1, name: 'Grace', department: 'Engineering', salary: 2 },
+    ]
+    const g = mountGrid(
+      { groupBy: ['department'], treeData: { parentField: 'managerId', column: 'name' } },
+      tree,
+    )
+    await tick()
+    // A row cannot be both a hierarchy node and bucketed under a banner.
+    expect(g.api.getState().grouping).toEqual([])
+  })
+})
+
+describe('expanded prop', () => {
+  it('seeds the expansion map so a group starts open', async () => {
+    const g = mountGrid({ groupBy: ['department'], expanded: { group_department_Engineering: true } })
+    await tick()
+    // 3 banners + Engineering's 2 leaves.
+    expect(bodyRows(g.target)).toBe(5)
+    expect(g.api.getDisplayedRows().map((r) => r.name)).toEqual(['Ada', 'Grace'])
+  })
+
+  it('starts fully collapsed when omitted', async () => {
+    const g = mountGrid({ groupBy: ['department'] })
+    await tick()
+    expect(bodyRows(g.target)).toBe(3)
+  })
+
+  it('re-applies when the prop object changes', async () => {
+    const g = mountGrid({ groupBy: ['department'], expanded: {} })
+    await tick()
+    expect(bodyRows(g.target)).toBe(3)
+    g.api.setRowExpanded('group_department_Operations', true)
+    await tick()
+    expect(bodyRows(g.target)).toBe(5)
+  })
+})
+
+describe('onExpandedChange prop', () => {
+  it('fires with the full next map when a group expands', async () => {
+    const onExpandedChange = vi.fn()
+    const g = mountGrid({ groupBy: ['department'], onExpandedChange })
+    await tick()
+    onExpandedChange.mockClear()
+    g.api.setRowExpanded('group_department_Engineering', true)
+    await tick()
+    expect(onExpandedChange).toHaveBeenCalled()
+    expect(onExpandedChange.mock.calls.at(-1)![0]).toEqual({ group_department_Engineering: true })
+  })
+
+  it('fires for expandAllGroups and collapseAllGroups', async () => {
+    const onExpandedChange = vi.fn()
+    const g = mountGrid({ groupBy: ['department'], onExpandedChange })
+    await tick()
+    onExpandedChange.mockClear()
+    g.api.expandAllGroups()
+    await tick()
+    const afterExpand = onExpandedChange.mock.calls.at(-1)![0] as Record<string, boolean>
+    expect(Object.values(afterExpand).filter(Boolean)).toHaveLength(3)
+    g.api.collapseAllGroups()
+    await tick()
+    expect(onExpandedChange.mock.calls.at(-1)![0]).toEqual({})
+  })
+
+  it('fires when the user clicks a group banner', async () => {
+    const onExpandedChange = vi.fn()
+    const g = mountGrid({ groupBy: ['department'], onExpandedChange })
+    await tick()
+    onExpandedChange.mockClear()
+    // The toggle handler lives on the banner cell; the row carries aria-expanded.
+    const banner = g.target.querySelector('tbody .sv-grid-group-cell') as HTMLElement | null
+    expect(banner).toBeTruthy()
+    banner!.click()
+    await tick()
+    expect(onExpandedChange).toHaveBeenCalled()
+    expect(bodyRows(g.target)).toBe(5) // 3 banners + the opened group's 2 leaves
+  })
+
+  it('hands back a copy, not the engine\'s own object', async () => {
+    const onExpandedChange = vi.fn()
+    const g = mountGrid({ groupBy: ['department'], onExpandedChange })
+    await tick()
+    g.api.setRowExpanded('group_department_Engineering', true)
+    await tick()
+    const handed = onExpandedChange.mock.calls.at(-1)![0] as Record<string, boolean>
+    handed.mutated = true
+    // A later notification must not carry the caller's scribble.
+    g.api.setRowExpanded('group_department_Operations', true)
+    await tick()
+    expect(onExpandedChange.mock.calls.at(-1)![0]).not.toHaveProperty('mutated')
+    expect(bodyRows(g.target)).toBe(7) // 3 banners + 2 + 2 leaves
+  })
+
+  it('does not loop when a controlled parent echoes the value back', async () => {
+    // The shape the docs recommend: the callback value is written straight back
+    // into the prop. If the seeding effect treated that echo as a fresh prop
+    // value it would re-seed, re-fire, and spin.
+    const onExpandedChange = vi.fn()
+    const g = mountGrid({ groupBy: ['department'], expanded: {}, onExpandedChange })
+    await tick()
+    onExpandedChange.mockClear()
+    g.api.expandAllGroups()
+    await tick(10)
+    // One settled notification, not an escalating cascade.
+    expect(onExpandedChange.mock.calls.length).toBeLessThanOrEqual(2)
+    expect(bodyRows(g.target)).toBe(8) // 3 banners + 5 leaves
+  })
+})
+
+describe('tree rows use the same expansion props', () => {
+  const tree = [
+    { id: 1, managerId: null, name: 'Ada' },
+    { id: 2, managerId: 1, name: 'Grace' },
+    { id: 3, managerId: 2, name: 'Alan' },
+    { id: 4, managerId: 1, name: 'Linus' },
+  ]
+  const treeCols = [{ field: 'name', header: 'Name', width: 200 }]
+
+  it('onExpandedChange fires for tree expansion too', async () => {
+    const onExpandedChange = vi.fn()
+    const g = mountGrid(
+      { treeData: { parentField: 'managerId', column: 'name' }, onExpandedChange },
+      tree,
+      treeCols,
+    )
+    await tick()
+    onExpandedChange.mockClear()
+    g.api.expandAllGroups()
+    await tick()
+    expect(onExpandedChange).toHaveBeenCalled()
+    expect(bodyRows(g.target)).toBe(4)
+  })
+
+  it('expanded seeds an open tree branch on first paint', async () => {
+    // Tree expansion keys off the ENGINE row id, so pin it to the data id.
+    const g = mountGrid(
+      {
+        treeData: { parentField: 'managerId', column: 'name' },
+        getRowId: (r: { id: number }) => String(r.id),
+        expanded: { '1': true },
+      },
+      tree,
+      treeCols,
+    )
+    await tick()
+    // Ada plus her two direct reports; Alan stays hidden under Grace.
+    expect(bodyRows(g.target)).toBe(3)
+  })
+})

package/src/themes/contrast.test.ts

@@ -0,0 +1,112 @@
+import { describe, it, expect } from 'vitest'
+import { themePresets, resolveThemeTokens, type ThemeMode } from './index'
+
+/**
+ * WCAG contrast for every built-in theme, in both light and dark.
+ *
+ * The axe suite (`a11y.axe.test.ts`) runs in jsdom, which does no layout and no
+ * painting, so its `color-contrast` rule is disabled there. That leaves a real
+ * gap: a theme could ship text nobody can read and nothing would complain.
+ * Our tokens are plain hex, so the ratios are computable directly - no browser
+ * needed, and every preset is covered rather than whichever one a demo happens
+ * to use.
+ *
+ * Thresholds are the WCAG 2.1 AA ones:
+ *   - 4.5:1 for normal-size text
+ *   - 3:1   for large text and for non-text UI boundaries (SC 1.4.11)
+ */
+
+const AA_TEXT = 4.5
+const AA_UI = 3
+
+/** sRGB hex -> relative luminance, per WCAG 2.x. */
+function luminance(hex: string): number {
+  const m = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(hex.trim())
+  if (!m) throw new Error(`not a plain hex colour: ${hex}`)
+  let h = m[1]!
+  if (h.length === 3) h = h.split('').map((c) => c + c).join('')
+  const [r, g, b] = [0, 2, 4].map((i) => {
+    const c = parseInt(h.slice(i, i + 2), 16) / 255
+    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4
+  }) as [number, number, number]
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b
+}
+
+function contrast(fg: string, bg: string): number {
+  const a = luminance(fg)
+  const b = luminance(bg)
+  const [hi, lo] = a > b ? [a, b] : [b, a]
+  return (hi + 0.05) / (lo + 0.05)
+}
+
+const round = (n: number) => Math.round(n * 100) / 100
+
+/**
+ * Pairs that actually meet a user's eye. Each is [foreground, background,
+ * threshold, what it is] - named so a failure says which surface is unreadable
+ * rather than just which token.
+ */
+const PAIRS: Array<[string, string, number, string]> = [
+  ['--sg-fg', '--sg-bg', AA_TEXT, 'body text on the grid background'],
+  ['--sg-fg', '--sg-row-alt-bg', AA_TEXT, 'body text on zebra-striped rows'],
+  ['--sg-fg', '--sg-row-hover-bg', AA_TEXT, 'body text on a hovered row'],
+  ['--sg-fg', '--sg-selection-bg', AA_TEXT, 'body text on a selected row'],
+  ['--sg-muted', '--sg-bg', AA_TEXT, 'secondary text on the grid background'],
+  ['--sg-header-fg', '--sg-header-bg', AA_TEXT, 'header text'],
+  ['--sg-on-accent', '--sg-accent', AA_TEXT, 'text on an accent-filled control'],
+  ['--sg-accent', '--sg-bg', AA_UI, 'accent used as a focus/selection indicator'],
+]
+
+/**
+ * Deliberately NOT checked: `--sg-border` against `--sg-bg`.
+ *
+ * WCAG 1.4.11 covers UI components whose STATE must be perceivable, and
+ * graphics required to understand content. A table gridline is neither: the
+ * grid's structure is carried by the accessibility tree (role=grid, rows,
+ * columnheaders), so a screen reader never depends on the line being visible,
+ * and a sighted user reads the table from its alignment and spacing. Holding
+ * gridlines to 3:1 would force every preset to draw near-black rules, which is
+ * why no mainstream design system does it. Focus rings and selection states DO
+ * have to clear 3:1, which is what the `--sg-accent` row above checks.
+ */
+
+const MODES: ThemeMode[] = ['light', 'dark']
+
+describe('built-in theme contrast (WCAG 2.1 AA)', () => {
+  const cases = themePresets.flatMap((preset) =>
+    MODES.map((mode) => [preset.id, mode, preset] as const),
+  )
+
+  it.each(cases)('%s / %s meets AA on every text surface', (id, mode, preset) => {
+    const tokens = resolveThemeTokens(preset, mode)
+    const failures: string[] = []
+
+    for (const [fgToken, bgToken, threshold, label] of PAIRS) {
+      const fg = tokens[fgToken]
+      const bg = tokens[bgToken]
+      // Skip anything a preset expresses as a gradient/color-mix rather than a
+      // flat hex - those cannot be judged without painting, and are called out
+      // in docs as the consumer's responsibility.
+      if (!fg || !bg || !/^#/.test(fg) || !/^#/.test(bg)) continue
+      const ratio = contrast(fg, bg)
+      if (ratio < threshold) {
+        failures.push(
+          `${label}: ${fgToken} ${fg} on ${bgToken} ${bg} = ${round(ratio)}:1 (needs ${threshold}:1)`,
+        )
+      }
+    }
+
+    expect(failures, `${id} (${mode}) contrast failures:\n  ${failures.join('\n  ')}`).toEqual([])
+  })
+
+  it('checks a meaningful number of presets', () => {
+    // Guards against the suite silently passing because the preset list moved.
+    expect(themePresets.length).toBeGreaterThanOrEqual(15)
+  })
+
+  it('computes known ratios correctly', () => {
+    // Sanity-check the maths itself against WCAG's canonical extremes.
+    expect(round(contrast('#000000', '#ffffff'))).toBe(21)
+    expect(round(contrast('#ffffff', '#ffffff'))).toBe(1)
+  })
+})

package/src/themes/index.ts

@@ -141,16 +141,24 @@ export const themePresets: ThemePreset[] = [
     light: { bg: '#ffffff', fg: '#282a30', muted: '#6b6f76', border: '#e9e9eb', headerBg: '#f7f8f8', headerFg: '#6b6f76', accent: '#5e6ad2', rowAlt: '#fbfbfc', rowHover: '#f4f4f5', selectionBg: '#e8eafd' },
     dark: { bg: '#08090a', fg: '#f7f8f8', muted: '#8a8f98', border: '#23252a', headerBg: '#0f1011', headerFg: '#8a8f98', accent: '#5e6ad2', rowAlt: '#0f1011', rowHover: '#1a1b1e', selectionBg: '#2a2d4a' } },
   { id: 'notion', name: 'Notion', radius: 4, font: 'ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif',
-    light: { bg: '#ffffff', fg: '#37352f', muted: '#787774', border: '#e9e9e7', headerBg: '#f7f6f3', headerFg: '#787774', accent: '#2383e2', rowAlt: '#fbfbfa', rowHover: '#f1f1ef', selectionBg: '#d9eaf7' },
+    // muted + headerFg darkened from #787774, which sat at 4.48:1 on white and
+    // 4.14:1 on the header fill - both just under AA. #6b6a67 keeps the warm
+    // grey and clears it at 5.41:1 / 5:1.
+    light: { bg: '#ffffff', fg: '#37352f', muted: '#6b6a67', border: '#e9e9e7', headerBg: '#f7f6f3', headerFg: '#6b6a67', accent: '#2383e2', rowAlt: '#fbfbfa', rowHover: '#f1f1ef', selectionBg: '#d9eaf7' },
     dark: { bg: '#191919', fg: '#d4d4d4', muted: '#9b9b9b', border: '#2f2f2f', headerBg: '#202020', headerFg: '#9b9b9b', accent: '#529cca', rowAlt: '#1c1c1c', rowHover: '#252525', selectionBg: '#20415c' } },
   { id: 'nord', name: 'Nord', radius: 4, font: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
     light: { bg: '#eceff4', fg: '#2e3440', muted: '#4c566a', border: '#d8dee9', headerBg: '#e5e9f0', headerFg: '#2e3440', accent: '#5579a5', rowAlt: '#e5e9f0', rowHover: '#dde3ec', selectionBg: '#d8dee9' },
-    dark: { bg: '#2e3440', fg: '#d8dee9', muted: '#4c566a', border: '#434c5e', headerBg: '#3b4252', headerFg: '#e5e9f0', accent: '#88c0d0', rowAlt: '#333b48', rowHover: '#3b4252', selectionBg: '#434c5e' } },
+    // muted lightened from Nord's #4c566a (nord3): on the nord0 background that
+    // is 1.69:1, effectively invisible. #97a0b0 keeps the Nord hue at 4.74:1.
+    dark: { bg: '#2e3440', fg: '#d8dee9', muted: '#97a0b0', border: '#434c5e', headerBg: '#3b4252', headerFg: '#e5e9f0', accent: '#88c0d0', rowAlt: '#333b48', rowHover: '#3b4252', selectionBg: '#434c5e' } },
   { id: 'dracula', name: 'Dracula', radius: 6, font: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
     light: { bg: '#fffbeb', fg: '#1f1f1f', muted: '#6c664b', border: '#dedccf', headerBg: '#ece9df', headerFg: '#1f1f1f', accent: '#644ac9', rowAlt: '#fffdf5', rowHover: '#f2efe3', selectionBg: '#cfcfde' },
-    dark: { bg: '#282a36', fg: '#f8f8f2', muted: '#6272a4', border: '#44475a', headerBg: '#21222c', headerFg: '#f8f8f2', accent: '#bd93f9', rowAlt: '#2d2f3b', rowHover: '#343746', selectionBg: '#44475a' } },
+    // muted lightened from Dracula's comment colour #6272a4 (3.03:1) to 5.04:1.
+    dark: { bg: '#282a36', fg: '#f8f8f2', muted: '#8b98c9', border: '#44475a', headerBg: '#21222c', headerFg: '#f8f8f2', accent: '#bd93f9', rowAlt: '#2d2f3b', rowHover: '#343746', selectionBg: '#44475a' } },
   { id: 'catppuccin', name: 'Catppuccin', radius: 8, font: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-    light: { bg: '#eff1f5', fg: '#4c4f69', muted: '#6c6f85', border: '#ccd0da', headerBg: '#e6e9ef', headerFg: '#4c4f69', accent: '#8839ef', rowAlt: '#e6e9ef', rowHover: '#dce0e8', selectionBg: '#dce0e8' },
+    // muted moved from Latte subtext0 (#6c6f85, 4.37:1) to subtext1 (#5c5f77),
+    // still an official Catppuccin colour, at 5.53:1.
+    light: { bg: '#eff1f5', fg: '#4c4f69', muted: '#5c5f77', border: '#ccd0da', headerBg: '#e6e9ef', headerFg: '#4c4f69', accent: '#8839ef', rowAlt: '#e6e9ef', rowHover: '#dce0e8', selectionBg: '#dce0e8' },
     dark: { bg: '#1e1e2e', fg: '#cdd6f4', muted: '#a6adc8', border: '#313244', headerBg: '#181825', headerFg: '#cdd6f4', accent: '#cba6f7', rowAlt: '#1a1a28', rowHover: '#313244', selectionBg: '#45475a' } },
 ]
 

package/themes/catppuccin.css

@@ -2,7 +2,7 @@
 :root {
   --sg-bg: #eff1f5;
   --sg-fg: #4c4f69;
-  --sg-muted: #6c6f85;
+  --sg-muted: #5c5f77;
   --sg-border: #ccd0da;
   --sg-header-bg: #e6e9ef;
   --sg-header-fg: #4c4f69;
@@ -29,10 +29,10 @@
   --sg-invalid-fg: #dc2626;
   --sg-scrollbar-bg: #e6e9ef;
   --sg-scrollbar-border: #ccd0da;
-  --sg-scrollbar-thumb: #6c6f85;
+  --sg-scrollbar-thumb: #5c5f77;
   --sg-scrollbar-thumb-hover: #4c4f69;
   --sg-scrollbar-thumb-active: #4c4f69;
-  --sg-scrollbar-arrow: #6c6f85;
+  --sg-scrollbar-arrow: #5c5f77;
   --sg-scrollbar-arrow-hover: #4c4f69;
   --sg-scrollbar-arrow-hover-bg: #dce0e8;
   --sg-scrollbar-arrow-active: #4c4f69;

package/themes/dracula.css

@@ -42,7 +42,7 @@
 :root[data-theme='dark'] {
   --sg-bg: #282a36;
   --sg-fg: #f8f8f2;
-  --sg-muted: #6272a4;
+  --sg-muted: #8b98c9;
   --sg-border: #44475a;
   --sg-header-bg: #21222c;
   --sg-header-fg: #f8f8f2;
@@ -69,10 +69,10 @@
   --sg-invalid-fg: #f87171;
   --sg-scrollbar-bg: #21222c;
   --sg-scrollbar-border: #44475a;
-  --sg-scrollbar-thumb: #6272a4;
+  --sg-scrollbar-thumb: #8b98c9;
   --sg-scrollbar-thumb-hover: #f8f8f2;
   --sg-scrollbar-thumb-active: #f8f8f2;
-  --sg-scrollbar-arrow: #6272a4;
+  --sg-scrollbar-arrow: #8b98c9;
   --sg-scrollbar-arrow-hover: #f8f8f2;
   --sg-scrollbar-arrow-hover-bg: #343746;
   --sg-scrollbar-arrow-active: #f8f8f2;

package/themes/nord.css

@@ -42,7 +42,7 @@
 :root[data-theme='dark'] {
   --sg-bg: #2e3440;
   --sg-fg: #d8dee9;
-  --sg-muted: #4c566a;
+  --sg-muted: #97a0b0;
   --sg-border: #434c5e;
   --sg-header-bg: #3b4252;
   --sg-header-fg: #e5e9f0;
@@ -69,10 +69,10 @@
   --sg-invalid-fg: #f87171;
   --sg-scrollbar-bg: #3b4252;
   --sg-scrollbar-border: #434c5e;
-  --sg-scrollbar-thumb: #4c566a;
+  --sg-scrollbar-thumb: #97a0b0;
   --sg-scrollbar-thumb-hover: #d8dee9;
   --sg-scrollbar-thumb-active: #d8dee9;
-  --sg-scrollbar-arrow: #4c566a;
+  --sg-scrollbar-arrow: #97a0b0;
   --sg-scrollbar-arrow-hover: #d8dee9;
   --sg-scrollbar-arrow-hover-bg: #3b4252;
   --sg-scrollbar-arrow-active: #d8dee9;

package/themes/notion.css

@@ -2,10 +2,10 @@
 :root {
   --sg-bg: #ffffff;
   --sg-fg: #37352f;
-  --sg-muted: #787774;
+  --sg-muted: #6b6a67;
   --sg-border: #e9e9e7;
   --sg-header-bg: #f7f6f3;
-  --sg-header-fg: #787774;
+  --sg-header-fg: #6b6a67;
   --sg-bg-subtle: #f7f6f3;
   --sg-row-alt-bg: #fbfbfa;
   --sg-row-hover-bg: #f1f1ef;
@@ -29,10 +29,10 @@
   --sg-invalid-fg: #dc2626;
   --sg-scrollbar-bg: #f7f6f3;
   --sg-scrollbar-border: #e9e9e7;
-  --sg-scrollbar-thumb: #787774;
+  --sg-scrollbar-thumb: #6b6a67;
   --sg-scrollbar-thumb-hover: #37352f;
   --sg-scrollbar-thumb-active: #37352f;
-  --sg-scrollbar-arrow: #787774;
+  --sg-scrollbar-arrow: #6b6a67;
   --sg-scrollbar-arrow-hover: #37352f;
   --sg-scrollbar-arrow-hover-bg: #f1f1ef;
   --sg-scrollbar-arrow-active: #37352f;