matterviz 0.3.6 → 0.4.0

package/dist/src/lib/table/HeatmapTable.svelte

@@ -1,1833 +0,0 @@
-<script lang="ts">
-  import { luminance, watch_dark_mode } from '$lib/colors'
-  import Icon from '$lib/Icon.svelte'
-  import { format_num } from '$lib/labels'
-  import { SettingsSection } from '$lib/layout'
-  import ContextMenu from '$lib/overlays/ContextMenu.svelte'
-  import DraggablePane from '$lib/overlays/DraggablePane.svelte'
-  import type {
-    CellSnippet,
-    CellVal,
-    ExportData,
-    InitialSort,
-    Label,
-    MultiSortState,
-    Pagination,
-    RowData,
-    Search,
-    SortHint,
-    SortState,
-    SpecialCells,
-  } from '$lib/table'
-  import { calc_cell_color, strip_html } from '$lib/table'
-  import { sanitize_html } from '$lib/sanitize'
-  import { normalize_unicode_minus } from '$lib/utils'
-  import type { Snippet } from 'svelte'
-  import { tooltip } from 'svelte-multiselect/attachments'
-  import { flip } from 'svelte/animate'
-  import type { HTMLAttributes } from 'svelte/elements'
-  import { SvelteMap } from 'svelte/reactivity'
-
-  // Helper to check if value is invalid (null, undefined, NaN)
-  const is_invalid = (val: unknown) =>
-    val == null || (typeof val === `number` && Number.isNaN(val))
-
-  const NUMERIC_WITH_ERROR_RE =
-    /^([-+−]?(?:\d+\.?\d*|\d*\.\d+)(?:[eE][-+−]?\d+)?)\s*(?:±|\+[-−]|\()/
-
-  const parse_numeric_string = (val: string): number | null => {
-    const numeric_str = val.match(NUMERIC_WITH_ERROR_RE)?.[1] ?? val
-    if (numeric_str.trim() === ``) return null
-    const num = Number(normalize_unicode_minus(numeric_str))
-    return isNaN(num) ? null : num
-  }
-
-  // Get sort value from a cell (handles HTML data-sort-value and numbers with errors)
-  const get_sort_val = (val: CellVal): string | number => {
-    if (typeof val === `string`) {
-      // Check for HTML data-sort-value attribute first
-      const sort_attr_match = val.match(/data-sort-value="([^"]*)"/)
-      if (sort_attr_match) {
-        const num = Number(sort_attr_match[1])
-        return isNaN(num) ? sort_attr_match[1] : num
-      }
-      const num = parse_numeric_string(val)
-      if (num !== null) return num
-    }
-    return val as string | number
-  }
-
-  let {
-    data = $bindable([]),
-    columns = [],
-    sort_hint = undefined,
-    cell,
-    special_cells,
-    controls,
-    initial_sort = undefined,
-    sort = $bindable({ column: ``, dir: `asc` }), // allows external control/sync of sorting
-    fixed_header = false,
-    default_num_format = `.3`,
-    show_heatmap = $bindable(true),
-    heatmap_class = `heatmap`,
-    onrowclick,
-    onrowdblclick,
-    column_order = $bindable([]),
-    export_data = false,
-    show_column_toggle = false,
-    search = false,
-    show_row_select = false,
-    pagination = false,
-    selected_rows = $bindable([]),
-    hidden_columns = $bindable([]),
-    scroll_style,
-    root_style,
-    onsort = undefined,
-    onsorterror = undefined,
-    loading = $bindable(false),
-    sort_data = true,
-    heatmap_opacity = $bindable(1),
-    empty_message = `No data`,
-    show_row_numbers = false,
-    allow_better_toggle = false,
-    show_controls = $bindable(false),
-    controls_open = $bindable(false),
-    header_cell,
-    footer,
-    ...rest
-  }: HTMLAttributes<HTMLDivElement> & {
-    data: RowData[]
-    columns?: Label[]
-    sort_hint?: SortHint
-    cell?: CellSnippet
-    special_cells?: SpecialCells
-    controls?: Snippet
-    initial_sort?: InitialSort
-    sort?: { column: string; dir: `asc` | `desc` }
-    fixed_header?: boolean
-    default_num_format?: string
-    show_heatmap?: boolean
-    heatmap_class?: string
-    onrowclick?: (event: MouseEvent | KeyboardEvent, row: RowData) => void
-    onrowdblclick?: (event: MouseEvent, row: RowData) => void
-    // Array of column IDs to control display order. IDs are derived as:
-    // - Ungrouped columns: col.key ?? col.label
-    // - Grouped columns: `${col.key ?? col.label} (${col.group})`
-    // This allows persisting/restoring column order across sessions.
-    column_order?: string[]
-    export_data?: ExportData
-    show_column_toggle?: boolean
-    search?: Search
-    show_row_select?: boolean
-    pagination?: Pagination
-    selected_rows?: RowData[]
-    hidden_columns?: string[]
-    scroll_style?: string
-    // Inline styles for the root table container (merged with rest.style). Use instead of global CSS overrides.
-    root_style?: string
-    // Async callback for server-side sorting. When provided, client-side sorting is skipped
-    // and the callback is called with (column_id, direction) to fetch new data from server.
-    onsort?: (column: string, dir: `asc` | `desc`) => Promise<RowData[]>
-    // Callback when onsort fails, receives the error for parent handling (e.g. toast notification)
-    onsorterror?: (error: unknown, column: string, dir: `asc` | `desc`) => void
-    // Loading state during async sort operations
-    loading?: boolean
-    // Whether to sort data client-side. Set to false when parent handles sorting externally.
-    // When onsort is provided, sort_data behavior is implicitly false.
-    sort_data?: boolean
-    // Heatmap cell background opacity (0–1). Controls both the visual fade via CSS
-    // color-mix() and the JS text contrast correction. Default 1 (fully opaque).
-    heatmap_opacity?: number
-    // Message shown when the table has no data rows. Set to empty string to hide.
-    empty_message?: string
-    // Show a row number column as the first column
-    show_row_numbers?: boolean
-    // When true, show a toggle in colored column headers to cycle gradient direction
-    allow_better_toggle?: boolean
-    // Whether the gear icon for the controls pane is visible
-    show_controls?: boolean
-    // Whether the controls pane is expanded
-    controls_open?: boolean
-    // Custom snippet for rendering header cells. Falls back to {@html col.label}.
-    header_cell?: Snippet<[{ col: Label }]>
-    // Footer snippet rendered inside <tfoot> below the table body
-    footer?: Snippet
-  } = $props()
-
-  let container_el = $state<HTMLDivElement>()
-
-  // Read --page-bg from computed style for text contrast calculation.
-  // Recalculates on mount and when the theme changes (dark/light mode toggle).
-  let page_bg_lum = $state(luminance(`white`))
-  $effect(() => {
-    if (!container_el) return
-    const read_page_bg = () => {
-      if (!container_el) return
-      const page_bg = getComputedStyle(container_el).getPropertyValue(`--page-bg`)
-        .trim()
-      page_bg_lum = luminance(page_bg || `white`)
-    }
-    read_page_bg()
-    return watch_dark_mode(read_page_bg)
-  })
-
-  // Detect HTML to prevent setting raw HTML as data-sort-value. Simple string matching
-  // suffices since false positives just skip setting the attr (sorting still works by inner data-sort-value).
-  function is_html_str(val: unknown): boolean {
-    if (typeof val !== `string`) return false
-    return (
-      (val.includes(`<`) && val.includes(`>`)) || // Has angle brackets
-      val.startsWith(`&lt;`) || // Has HTML entity for <
-      val.includes(`href=`) || // Has href attribute
-      val.includes(`class=`) // Has class attribute
-    )
-  }
-
-  // Normalize initial_sort config
-  let initial_sort_config = $derived(
-    initial_sort
-      ? typeof initial_sort === `string`
-        ? { column: initial_sort, direction: `asc` as const }
-        : { direction: `asc` as const, ...initial_sort }
-      : null,
-  )
-
-  // Normalize pagination config
-  let pagination_config = $derived(
-    pagination
-      ? { page_size: 25, ...(typeof pagination === `object` ? pagination : {}) }
-      : null,
-  )
-
-  // Mutable page size — writable $derived allows user to change via dropdown
-  let effective_page_size = $derived(pagination_config?.page_size ?? 25)
-
-  // Normalize search config
-  let search_config = $derived(
-    search
-      ? {
-        placeholder: `Filter...`,
-        expanded: false,
-        ...(typeof search === `object` ? search : {}),
-      }
-      : null,
-  )
-
-  // Normalize export_data config
-  type ExportFormat = `csv` | `json`
-  const default_formats: ExportFormat[] = [`csv`, `json`]
-  let export_config = $derived(
-    export_data
-      ? {
-        formats: default_formats,
-        filename: `table-export`,
-        ...(typeof export_data === `object` ? export_data : {}),
-      }
-      : null,
-  )
-
-  // Derive sort_state from bindable prop, falling back to initial_sort if sort not yet set
-  // This ensures immediate sorting on first render without waiting for effects
-  let sort_state = $derived<SortState>({
-    column: sort.column || initial_sort_config?.column || ``,
-    ascending: sort.column
-      ? sort.dir !== `desc`
-      : initial_sort_config?.direction !== `desc`,
-  })
-
-  // Multi-column sort state (for Shift+click)
-  let multi_sort = $state<MultiSortState>([])
-
-  // Search/filter state
-  let search_query = $state(``)
-  let search_expanded = $derived(search_config?.expanded ?? false)
-
-  // Pagination state
-  let current_page = $state(1)
-
-  // Dropdown states
-  let show_column_dropdown = $state(false)
-  let show_export_dropdown = $state(false)
-
-  // Per-column gradient direction overrides (user-toggled via header)
-  let better_overrides = new SvelteMap<string, `higher` | `lower`>()
-
-  // Per-column color scale overrides
-  let color_scale_overrides = new SvelteMap<string, string>()
-
-  const color_scale_options = [
-    `interpolateViridis`,
-    `interpolatePlasma`,
-    `interpolateInferno`,
-    `interpolateCividis`,
-    `interpolateTurbo`,
-    `interpolateBlues`,
-    `interpolateGreens`,
-    `interpolateReds`,
-    `interpolateYlOrRd`,
-  ] as const
-
-  // Columns that have a color gradient
-  let colored_columns = $derived(
-    columns.filter((col) =>
-      col.color_scale !== null && col.color_scale !== undefined
-    ),
-  )
-
-  // Column resize state
-  let resize_col_id = $state<string | null>(null)
-  let resize_start_x = $state(0)
-  let resize_start_width = $state(0)
-  let column_widths = $state<Record<string, number>>({})
-
-  // Auto-discover columns from data keys when none are provided
-  $effect.pre(() => {
-    if (columns.length > 0 || data.length === 0) return
-    const seen: Record<string, true> = {}
-    for (const row of data.slice(0, 50)) {
-      for (const key of Object.keys(row)) {
-        if (key !== `style` && key !== `class`) seen[key] = true
-      }
-    }
-    columns = Object.keys(seen).map((key) => ({ label: key }))
-  })
-
-  // Helper to make column IDs (needed since column labels in different groups can be repeated)
-  const get_col_id = (col: Label) =>
-    col.group ? `${col.key ?? col.label} (${col.group})` : (col.key ?? col.label)
-
-  // Sync column_order with columns: initialize if empty, remove stale IDs, append new IDs
-  $effect(() => {
-    if (columns.length === 0) return
-    const col_ids = columns.map(get_col_id)
-
-    // Case 1: First render - initialize with default order
-    if (column_order.length === 0) {
-      column_order = col_ids
-      return
-    }
-
-    // Case 2: Sync needed - keep valid IDs in their order, append any new ones
-    const valid_ids = new Set(col_ids)
-    const kept = column_order.filter((id) => valid_ids.has(id))
-    const new_ids = col_ids.filter((id) => !kept.includes(id))
-    const new_order = [...kept, ...new_ids]
-
-    // Skip assignment if content is unchanged to prevent infinite effect loop.
-    // After drag reorder, column_order differs from col_ids (default order) but the
-    // computed new_order equals the current column_order — assigning a new array
-    // reference would re-trigger this effect endlessly.
-    if (new_order.length === column_order.length &&
-      new_order.every((id, idx) => id === column_order[idx])) return
-
-    column_order = new_order
-  })
-
-  // Reorder columns based on column_order
-  let ordered_columns = $derived.by(() => {
-    if (column_order.length === 0) return columns
-
-    const col_map = new SvelteMap(columns.map((col) => [get_col_id(col), col]))
-
-    // Add columns in specified order, then any remaining columns that weren't in the order list
-    const ordered = column_order
-      .map((id) => col_map.get(id))
-      .filter((col): col is Label => col != null)
-
-    const ordered_ids = new Set(ordered.map(get_col_id))
-    const remaining = columns.filter((col) => !ordered_ids.has(get_col_id(col)))
-
-    return [...ordered, ...remaining]
-  })
-
-  let drag_col_id = $state<string | null>(null)
-  let drag_over_col_id = $state<string | null>(null)
-
-  // Merge root_style with rest.style for root div; omit style from rest to avoid duplicate
-  let rest_props = $derived.by(() => {
-    const { style: rest_style, ...other_props } = rest
-    const merged = [rest_style, root_style].filter(Boolean).join(`; `)
-    return { ...other_props, ...(merged ? { style: merged } : {}) }
-  })
-
-  // WeakMap to assign stable unique IDs to row objects for efficient comparison and keying
-  // This avoids O(n) JSON.stringify calls and prevents unnecessary re-renders
-  const row_id_map = new WeakMap<RowData, string>()
-  let row_id_counter = 0
-
-  function get_row_id(row: RowData): string {
-    let id = row_id_map.get(row)
-    if (id === undefined) {
-      id = `row_${row_id_counter++}`
-      row_id_map.set(row, id)
-    }
-    return id
-  }
-
-  // Returns 'left' or 'right' to indicate which side of target to insert dragged column
-  function get_drag_side(target_col_id: string): `left` | `right` | null {
-    if (!drag_col_id) return null
-    const drag_idx = column_order.indexOf(drag_col_id)
-    const target_idx = column_order.indexOf(target_col_id)
-    if (drag_idx === -1 || target_idx === -1) return null
-    return drag_idx < target_idx ? `right` : `left`
-  }
-
-  function reset_drag_state() {
-    drag_col_id = null
-    drag_over_col_id = null
-  }
-
-  const get_drag_col_group = () =>
-    ordered_columns.find((col) => get_col_id(col) === drag_col_id)?.group
-
-  function handle_drag_start(event: DragEvent, col: Label) {
-    if (!event.dataTransfer) return
-    drag_col_id = get_col_id(col)
-    event.dataTransfer.effectAllowed = `move`
-    event.dataTransfer.setData(`text/html`, ``)
-  }
-
-  function handle_drag_over(event: DragEvent, col: Label) {
-    event.preventDefault()
-    if (!event.dataTransfer) return
-    event.dataTransfer.dropEffect = `move`
-
-    // Prevent cross-group drag-over to keep group headers contiguous
-    if (get_drag_col_group() !== col.group) {
-      event.dataTransfer.dropEffect = `none`
-      drag_over_col_id = null
-      return
-    }
-
-    drag_over_col_id = get_col_id(col)
-  }
-
-  function handle_drop(event: DragEvent, target_col: Label) {
-    event.preventDefault()
-
-    // Block cross-group (or group→ungroup) reorders to preserve group contiguity
-    if (!drag_col_id || drag_col_id === get_col_id(target_col)) {
-      reset_drag_state()
-      return
-    }
-
-    // Block cross-group reorders to preserve group contiguity
-    if (get_drag_col_group() !== target_col.group) {
-      reset_drag_state()
-      return
-    }
-
-    const target_col_id = get_col_id(target_col)
-    const drag_idx = column_order.indexOf(drag_col_id)
-    const target_idx = column_order.indexOf(target_col_id)
-
-    if (drag_idx === -1 || target_idx === -1) {
-      reset_drag_state()
-      return
-    }
-
-    // Reorder: remove dragged column, then insert at target position
-    // When dragging left-to-right (drag_idx < target_idx), removing the dragged
-    // element shifts all subsequent indices down by 1, so we must adjust target_idx
-    const new_order = [...column_order]
-    new_order.splice(drag_idx, 1)
-    const adjusted_target = drag_idx < target_idx ? target_idx - 1 : target_idx
-    new_order.splice(adjusted_target, 0, drag_col_id)
-    column_order = new_order
-    reset_drag_state()
-  }
-
-  // Filter data based on search query
-  let filtered_data = $derived.by(() => {
-    const base_data = data?.filter?.((row) =>
-      Object.values(row).some((val) => val !== undefined)
-    ) ?? []
-
-    if (!search_query.trim()) return base_data
-
-    const query = search_query.toLowerCase().trim()
-    return base_data.filter((row) =>
-      Object.values(row).some((val) => {
-        if (val == null) return false
-        const clean_val = strip_html(String(val)).toLowerCase()
-        return clean_val.includes(query)
-      })
-    )
-  })
-
-  let sorted_data = $derived.by(() => {
-    // Skip client-side sorting when using async onsort callback or sort_data is false
-    if (onsort || !sort_data) return filtered_data
-
-    if (!sort_state.column && multi_sort.length === 0) return filtered_data
-
-    // Build sort criteria: multi_sort takes precedence, fallback to single sort
-    const sort_criteria = multi_sort.length > 0
-      ? multi_sort
-      : sort_state.column
-      ? [sort_state]
-      : []
-
-    if (sort_criteria.length === 0) return filtered_data
-
-    return [...filtered_data].sort((row1, row2) => {
-      for (const { column, ascending } of sort_criteria) {
-        const matched_col = ordered_columns.find((col) => get_col_id(col) === column)
-        if (!matched_col) continue
-
-        const col_id = get_col_id(matched_col)
-        const val1 = row1[col_id]
-        const val2 = row2[col_id]
-
-        if (val1 === val2) continue
-
-        // Push invalid values to bottom
-        if (is_invalid(val1) || is_invalid(val2)) {
-          return +is_invalid(val1) - +is_invalid(val2)
-        }
-
-        const sort_val1 = get_sort_val(val1)
-        const sort_val2 = get_sort_val(val2)
-        const modifier = ascending ? 1 : -1
-
-        if (typeof sort_val1 === `string` && typeof sort_val2 === `string`) {
-          const cmp = sort_val1.localeCompare(sort_val2, undefined, {
-            numeric: true,
-            sensitivity: `base`,
-          })
-          if (cmp !== 0) return cmp * modifier
-        } else {
-          if (sort_val1 !== sort_val2) {
-            return (sort_val1 ?? 0) < (sort_val2 ?? 0) ? -modifier : modifier
-          }
-        }
-      }
-      return 0
-    })
-  })
-
-  // Paginated data
-  let paginated_data = $derived.by(() => {
-    if (!pagination_config) return sorted_data
-    const start = (current_page - 1) * effective_page_size
-    return sorted_data.slice(start, start + effective_page_size)
-  })
-
-  let total_pages = $derived(
-    Math.ceil(sorted_data.length / effective_page_size),
-  )
-
-  // Track previous values to detect actual changes
-  let prev_search_query = $state(``)
-  let prev_data_length = $state(0)
-
-  // Track async sort requests to prevent race conditions
-  let sort_request_id = 0
-
-  // Reset to page 1 when search query or data length actually changes
-  $effect(() => {
-    const query_changed = search_query !== prev_search_query
-    const data_changed = sorted_data.length !== prev_data_length
-
-    if (query_changed || data_changed) {
-      current_page = 1
-      prev_search_query = search_query
-      prev_data_length = sorted_data.length
-    } else if (total_pages > 0 && current_page > total_pages) {
-      // Clamp when total pages decreases (e.g., page size increase)
-      current_page = total_pages
-    }
-  })
-
-  async function sort_rows(
-    column: string,
-    group: string | undefined,
-    event: MouseEvent | KeyboardEvent,
-  ) {
-    // Find the column using both label and group if provided
-    const col = ordered_columns.find(
-      (candidate_col) => candidate_col.label === column && candidate_col.group === group,
-    )
-
-    if (!col) return // Skip if column not found
-    if (col.sortable === false) return // Skip sorting if column marked as unsortable
-
-    const col_id = get_col_id(col)
-
-    // Shift+click for multi-column sort
-    if (event.shiftKey) {
-      const existing_idx = multi_sort.findIndex((sort_entry) => sort_entry.column === col_id)
-      if (existing_idx >= 0) {
-        // Toggle direction or remove if clicked again
-        const existing = multi_sort[existing_idx]
-        if (existing.ascending === (col.better === `lower`)) {
-          // Remove from multi-sort
-          multi_sort = multi_sort.filter((_, idx) => idx !== existing_idx)
-        } else {
-          // Toggle direction
-          multi_sort = multi_sort.map((sort_entry, idx) =>
-            idx === existing_idx ? { ...sort_entry, ascending: !sort_entry.ascending } : sort_entry
-          )
-        }
-      } else {
-        // Add to multi-sort
-        multi_sort = [...multi_sort, {
-          column: col_id,
-          ascending: col.better === `lower`,
-        }]
-      }
-      // Clear single sort when using multi-sort
-      sort = { column: ``, dir: `asc` }
-    } else {
-      // Regular click - single column sort
-      multi_sort = [] // Clear multi-sort
-      // Use sort_state.column for comparison since it includes initial_sort fallback
-      const new_dir = sort_state.column !== col_id
-        ? (col.better === `lower` ? `asc` : `desc`)
-        : (sort_state.ascending ? `desc` : `asc`)
-
-      // Save previous sort state in case we need to revert on error
-      const prev_sort = { ...sort }
-      sort = { column: col_id, dir: new_dir }
-
-      // If onsort callback provided, fetch new data from server
-      if (onsort) {
-        loading = true
-        const request_id = ++sort_request_id
-        try {
-          const result = await onsort(col_id, new_dir)
-          // Only update if this is still the most recent request (avoid race condition)
-          if (request_id === sort_request_id) {
-            data = result
-          }
-        } catch (err) {
-          console.error(`Sort callback failed:`, err)
-          // Revert sort state on failure so UI doesn't show wrong direction
-          if (request_id === sort_request_id) {
-            sort = prev_sort
-            onsorterror?.(err, col_id, new_dir)
-          }
-        } finally {
-          // Only clear loading if this is still the most recent request
-          if (request_id === sort_request_id) {
-            loading = false
-          }
-        }
-      }
-    }
-  }
-
-  // Extract numeric value from strings with uncertainty notation: "1.23 ± 0.05", "1.23 +- 0.05", "1.23(5)"
-  function parse_numeric_val(val: CellVal): number | null {
-    if (typeof val === `number`) return Number.isNaN(val) ? null : val
-    return typeof val === `string` ? parse_numeric_string(val) : null
-  }
-
-  // Memoize parsed column values to avoid O(N²) re-parsing in calc_color
-  let parsed_column_values = $derived.by(() => {
-    const result = new SvelteMap<string, (number | null)[]>()
-    for (const col of ordered_columns) {
-      if (col.color_scale === null) continue
-      const col_id = get_col_id(col)
-      result.set(col_id, sorted_data.map((row) => parse_numeric_val(row[col_id])))
-    }
-    return result
-  })
-
-  function calc_color(val: CellVal, col: Label) {
-    if (!show_heatmap || col.color_scale === null) {
-      return { bg: null, text: null }
-    }
-
-    // Parse numeric value from strings with uncertainty notation
-    const numeric_val = parse_numeric_val(val)
-    if (numeric_val === null) return { bg: null, text: null }
-
-    const col_id = get_col_id(col)
-    // Use memoized parsed values for the column
-    const numeric_vals = parsed_column_values.get(col_id) ?? []
-
-    const better = better_overrides.get(col_id) ?? col.better
-    const scale = (color_scale_overrides.get(col_id) ?? col.color_scale ??
-      `interpolateViridis`) as Parameters<typeof calc_cell_color>[3]
-    const color = calc_cell_color(
-      numeric_val,
-      numeric_vals,
-      better,
-      scale,
-      col.scale_type || `linear`,
-    )
-
-    // Recompute text contrast against effective bg (cell bg blended with page bg by opacity).
-    // Approximation: blend luminances directly; accurate enough for black/white text choice.
-    if (color.bg && heatmap_opacity < 1) {
-      const blended_lum = luminance(color.bg) * heatmap_opacity +
-        page_bg_lum * (1 - heatmap_opacity)
-      color.text = blended_lum > 0.7 ? `black` : `white`
-    }
-    return color
-  }
-
-  let visible_columns = $derived(
-    ordered_columns.filter((col) =>
-      col.visible !== false && !hidden_columns.includes(get_col_id(col))
-    ),
-  )
-
-  const sort_indicator = (col: Label, current_sort_state: SortState) => {
-    const hide_sort_indicator = col.show_sort_indicator === false ||
-      col.style?.includes(`--hide-sort-indicator`)
-    if (hide_sort_indicator) return ``
-
-    const col_id = get_col_id(col)
-
-    // Check multi-sort first
-    const multi_idx = multi_sort.findIndex((sort_entry) => sort_entry.column === col_id)
-    if (multi_idx >= 0) {
-      const arrow = multi_sort[multi_idx].ascending ? `↓` : `↑`
-      const badge = multi_sort.length > 1 ? `<sup>${multi_idx + 1}</sup>` : ``
-      return `<span style="font-size: 0.8em;">${arrow}${badge}</span>`
-    }
-
-    const is_sorted = current_sort_state.column === col_id
-    if (!is_sorted) return ``
-    // Show indicator only for actively sorted columns.
-    const arrow = current_sort_state.ascending ? `↓` : `↑`
-
-    return arrow ? `<span style="font-size: 0.8em;">${arrow}</span>` : ``
-  }
-
-  // Context menu state for column header right-click
-  let context_menu_col = $state<string | null>(null)
-  let context_menu_pos = $state({ x: 0, y: 0 })
-
-  const better_sections = [
-    {
-      title: `Gradient direction`,
-      options: [
-        { value: `higher`, label: `▲ Higher is better` },
-        { value: `lower`, label: `▼ Lower is better` },
-      ],
-    },
-  ] as const
-
-  // Row selection using WeakMap-based ID lookup instead of O(n) JSON.stringify comparison
-  function toggle_row_select(row: RowData) {
-    const row_id = get_row_id(row)
-    const idx = selected_rows.findIndex((selected_row) => get_row_id(selected_row) === row_id)
-    if (idx >= 0) {
-      selected_rows = selected_rows.filter((_, i) => i !== idx)
-    } else {
-      selected_rows = [...selected_rows, row]
-    }
-  }
-
-  function is_row_selected(row: RowData): boolean {
-    const row_id = get_row_id(row)
-    return selected_rows.some((selected_row) => get_row_id(selected_row) === row_id)
-  }
-
-  // Select-all: checks if every row on the current page is selected
-  let all_page_selected = $derived(
-    paginated_data.length > 0 && paginated_data.every((row) => is_row_selected(row)),
-  )
-
-  function toggle_select_all() {
-    if (all_page_selected) {
-      const page_ids = new Set(paginated_data.map(get_row_id))
-      selected_rows = selected_rows.filter((row) => !page_ids.has(get_row_id(row)))
-    } else {
-      const already = new Set(selected_rows.map(get_row_id))
-      const new_rows = paginated_data.filter((row) => !already.has(get_row_id(row)))
-      selected_rows = [...selected_rows, ...new_rows]
-    }
-  }
-
-  // Data source for exports: selected rows when any are selected, otherwise all sorted data
-  let export_rows = $derived(
-    show_row_select && selected_rows.length > 0 ? selected_rows : sorted_data,
-  )
-
-  // Serialize table as delimited text (shared by CSV export and clipboard copy)
-  // Per RFC 4180, fields containing commas, double quotes, or newlines must be quoted
-  function serialize_table(delimiter: string, csv_quote = false): string {
-    const quote = (str: string) => {
-      if (!csv_quote) return str
-      if (str.includes(`,`) || str.includes(`"`) || str.includes(`\n`)) {
-        return `"${str.replace(/"/g, `""`)}"`
-      }
-      return str
-    }
-    const headers = visible_columns.map((col) => quote(strip_html(col.label)))
-    const rows = export_rows.map((row) =>
-      visible_columns.map((col) => {
-        const val = row[get_col_id(col)]
-        if (val == null) return ``
-        return quote(strip_html(String(val)))
-      })
-    )
-    return [headers.join(delimiter), ...rows.map((row) => row.join(delimiter))].join(`\n`)
-  }
-
-  function export_csv(filename = `table-export`) {
-    download_file(serialize_table(`,`, true), `${filename}.csv`, `text/csv`)
-  }
-
-  function export_json(filename = `table-export`) {
-    const rows = export_rows.map((row) => {
-      const clean_row: Record<string, unknown> = {}
-      for (const col of visible_columns) {
-        const col_id = get_col_id(col)
-        const val = row[col_id]
-        clean_row[strip_html(col.label)] = typeof val === `string`
-          ? strip_html(val)
-          : val
-      }
-      return clean_row
-    })
-    download_file(
-      JSON.stringify(rows, null, 2),
-      `${filename}.json`,
-      `application/json`,
-    )
-  }
-
-  function download_file(content: string, filename: string, mime_type: string) {
-    const blob = new Blob([content], { type: mime_type })
-    const url = URL.createObjectURL(blob)
-    const link = document.createElement(`a`)
-    link.href = url
-    link.download = filename
-    document.body.appendChild(link)
-    link.click()
-    document.body.removeChild(link)
-    URL.revokeObjectURL(url)
-  }
-
-  function copy_to_clipboard() {
-    navigator.clipboard.writeText(serialize_table(`\t`))
-  }
-
-  // Column visibility toggle
-  function toggle_column(col_id: string) {
-    if (hidden_columns.includes(col_id)) {
-      hidden_columns = hidden_columns.filter((id) => id !== col_id)
-    } else {
-      hidden_columns = [...hidden_columns, col_id]
-    }
-  }
-
-  // Column resize handlers
-  function start_resize(event: MouseEvent, col: Label) {
-    event.preventDefault()
-    event.stopPropagation()
-    resize_col_id = get_col_id(col)
-    resize_start_x = event.clientX
-    const th = event.target instanceof Element ? event.target.parentElement : null
-    resize_start_width = th?.offsetWidth ?? 100
-
-    document.addEventListener(`mousemove`, handle_resize)
-    document.addEventListener(`mouseup`, stop_resize)
-  }
-
-  function handle_resize(event: MouseEvent) {
-    if (!resize_col_id) return
-    const delta = event.clientX - resize_start_x
-    const new_width = Math.min(500, Math.max(50, resize_start_width + delta))
-    column_widths = { ...column_widths, [resize_col_id]: new_width }
-  }
-
-  function stop_resize() {
-    resize_col_id = null
-    document.removeEventListener(`mousemove`, handle_resize)
-    document.removeEventListener(`mouseup`, stop_resize)
-  }
-
-  // Normalize sort_hint to a config object with defaults
-  let hint_config = $derived(
-    sort_hint
-      ? {
-        position: `bottom` as const,
-        permanent: false,
-        ...(typeof sort_hint === `string` ? { text: sort_hint } : sort_hint),
-      }
-      : null,
-  )
-</script>
-
-{#snippet sort_hint_element(pos: `top` | `bottom`)}
-  {#if hint_config?.position === pos}
-    <div
-      class="sort-hint {hint_config.class ?? ``}"
-      class:permanent={hint_config.permanent}
-      style={hint_config.style}
-    >
-      {hint_config.text}
-    </div>
-  {/if}
-{/snippet}
-
-<div
-  {@attach tooltip({ allow_html: true })}
-  {...rest_props}
-  bind:this={container_el}
-  class="table-container {rest_props.class ?? ``}"
-  style:--heatmap-opacity="{heatmap_opacity * 100}%"
-  onmouseleave={() => {
-    show_column_dropdown = false
-    show_export_dropdown = false
-    context_menu_col = null
-  }}
->
-  <!-- Floating control buttons -->
-  <section class="control-buttons">
-    {#if search_config}
-      {#if search_expanded || search_query}
-        <input
-          type="search"
-          class="search-input"
-          placeholder={search_config.placeholder}
-          bind:value={search_query}
-          onblur={() => {
-            if (!search_query) search_expanded = false
-          }}
-        />
-        <button
-          class="icon-btn"
-          onclick={() => {
-            search_query = ``
-            search_expanded = false
-          }}
-          {@attach tooltip({ content: `Clear`, placement: `top` })}
-        >
-          <Icon icon="Cross" style="width: 10px" />
-        </button>
-      {:else}
-        <button
-          class="icon-btn"
-          onclick={() => search_expanded = true}
-          {@attach tooltip({ content: `Search`, placement: `top` })}
-        >
-          <Icon icon="Search" style="width: 14px" />
-        </button>
-      {/if}
-    {/if}
-
-    {#if show_column_toggle}
-      <div class="dropdown-wrapper">
-        <button
-          class="icon-btn"
-          class:active={show_column_dropdown}
-          onclick={() => show_column_dropdown = !show_column_dropdown}
-          {@attach tooltip({ content: `Columns`, placement: `top` })}
-        >
-          <Icon icon="Columns" style="width: 14px" />
-        </button>
-        {#if show_column_dropdown}
-          <div class="dropdown-pane">
-            {#each ordered_columns as col (get_col_id(col))}
-              {@const col_id = get_col_id(col)}
-              <label class="dropdown-option">
-                <input
-                  type="checkbox"
-                  checked={!hidden_columns.includes(col_id)}
-                  onchange={() => toggle_column(col_id)}
-                />
-                {@html sanitize_html(col.label)}
-              </label>
-            {/each}
-          </div>
-        {/if}
-      </div>
-    {/if}
-
-    {#if export_config}
-      <div class="dropdown-wrapper">
-        <button
-          class="icon-btn"
-          class:active={show_export_dropdown}
-          onclick={() => show_export_dropdown = !show_export_dropdown}
-          {@attach tooltip({ content: `Export`, placement: `top` })}
-        >
-          <Icon icon="Export" style="width: 14px" />
-        </button>
-        {#if show_export_dropdown}
-          <div class="dropdown-pane">
-            {#if export_config.formats.includes(`csv`)}
-              <button
-                class="dropdown-option"
-                onclick={() => {
-                  export_csv(export_config.filename)
-                  show_export_dropdown = false
-                }}
-              >
-                <Icon icon="Download" style="width: 12px" /> CSV
-              </button>
-            {/if}
-            {#if export_config.formats.includes(`json`)}
-              <button
-                class="dropdown-option"
-                onclick={() => {
-                  export_json(export_config.filename)
-                  show_export_dropdown = false
-                }}
-              >
-                <Icon icon="Download" style="width: 12px" /> JSON
-              </button>
-            {/if}
-            <button
-              class="dropdown-option"
-              onclick={() => {
-                copy_to_clipboard()
-                show_export_dropdown = false
-              }}
-            >
-              <Icon icon="Copy" style="width: 12px" /> Copy
-            </button>
-          </div>
-        {/if}
-      </div>
-    {/if}
-
-    {#if show_row_select && selected_rows.length > 0}
-      <button
-        class="icon-btn selection-badge"
-        onclick={() => selected_rows = []}
-        title="Clear {selected_rows.length} selected rows"
-      >
-        <span class="badge">{selected_rows.length}</span>
-        <Icon icon="Cross" style="width: 10px" />
-      </button>
-    {/if}
-
-    {#if controls}
-      {@render controls()}
-    {/if}
-  </section>
-
-  {#if show_controls}
-    <DraggablePane
-      bind:show={controls_open}
-      closed_icon="Settings"
-      open_icon="Cross"
-      toggle_props={{
-        title: `${controls_open ? `Close` : `Open`} table controls`,
-        style: `position: absolute; top: 5pt; right: 1ex; z-index: 10`,
-      }}
-      pane_props={{ style: `max-height: 60vh; overflow-y: auto; font-size: 0.85em` }}
-    >
-      <SettingsSection
-        title="Heatmap"
-        current_values={{ show_heatmap, heatmap_opacity }}
-        on_reset={() => {
-          show_heatmap = true
-          heatmap_opacity = 1
-        }}
-      >
-        <label><input type="checkbox" bind:checked={show_heatmap} /> Show heatmap</label>
-        {#if show_heatmap}
-          <label>
-            Opacity
-            <input
-              type="range"
-              min="0"
-              max="1"
-              step="0.05"
-              bind:value={heatmap_opacity}
-            />
-            <input
-              type="number"
-              min="0"
-              max="1"
-              step="0.05"
-              bind:value={heatmap_opacity}
-              style="width: 3.5em"
-            />
-          </label>
-        {/if}
-      </SettingsSection>
-
-      <SettingsSection
-        title="Display"
-        current_values={{ show_row_numbers }}
-        on_reset={() => {
-          show_row_numbers = false
-        }}
-      >
-        <label><input type="checkbox" bind:checked={show_row_numbers} /> Row
-          numbers</label>
-      </SettingsSection>
-
-      {#if colored_columns.length > 0}
-        <SettingsSection
-          title="Column Colors"
-          current_values={Object.fromEntries([...better_overrides, ...color_scale_overrides])}
-          on_reset={() => {
-            better_overrides.clear()
-            color_scale_overrides.clear()
-          }}
-        >
-          {#each colored_columns as col (get_col_id(col))}
-            {@const col_id = get_col_id(col)}
-            <div class="col-color-row">
-              <span class="col-color-label">{@html sanitize_html(col.label)}</span>
-              <select
-                value={color_scale_overrides.get(col_id) ?? col.color_scale ??
-                `interpolateViridis`}
-                onchange={(event) => {
-                  const val = event.currentTarget.value
-                  if (
-                    val === (col.color_scale ?? `interpolateViridis`)
-                  ) color_scale_overrides.delete(col_id)
-                  else color_scale_overrides.set(col_id, val)
-                }}
-              >
-                {#each color_scale_options as scale (scale)}
-                  <option value={scale}>{scale.replace(`interpolate`, ``)}</option>
-                {/each}
-              </select>
-              <select
-                value={better_overrides.get(col_id) ?? col.better ?? ``}
-                onchange={(event) => {
-                  const val = event.currentTarget.value
-                  if (!val) better_overrides.delete(col_id)
-                  else better_overrides.set(col_id, val as `higher` | `lower`)
-                }}
-              >
-                <option value="">Default</option>
-                <option value="higher">▲ High</option>
-                <option value="lower">▼ Low</option>
-              </select>
-            </div>
-          {/each}
-        </SettingsSection>
-      {/if}
-    </DraggablePane>
-  {/if}
-
-  {@render sort_hint_element(`top`)}
-
-  <div
-    class="table-scroll"
-    style={scroll_style}
-    class:has-scroll={scroll_style}
-  >
-    {#if loading}
-      <div class="loading-overlay">
-        <div class="loading-spinner"></div>
-      </div>
-    {/if}
-    <table class:fixed-header={fixed_header} class={heatmap_class}>
-      <thead>
-        <!-- Don't add a table row for group headers if there are none -->
-        {#if visible_columns.some((col) => col.group)}
-          <!-- First level headers -->
-          <tr class="group-header">
-            {#if show_row_select}
-              <th class="select-col"></th>
-            {/if}
-            {#if show_row_numbers}
-              <th class="row-num-col"></th>
-            {/if}
-            {#each visible_columns as col (get_col_id(col))}
-              {#if !col.group}
-                <th class:sticky-col={col.sticky}></th>
-              {:else}
-                {@const group_cols = visible_columns.filter((column) =>
-              column.group === col.group
-            )}
-                <!-- Only render the group header once for each group by checking if this is the first column of this group -->
-                {#if visible_columns.findIndex((column) => column.group === col.group) ===
-              visible_columns.findIndex((column) =>
-                column.group === col.group && column.label === col.label
-              )}
-                  <th title={col.description} colspan={group_cols.length}>
-                    {@html sanitize_html(col.group)}
-                  </th>
-                {/if}
-              {/if}
-            {/each}
-          </tr>
-        {/if}
-        <!-- Second level headers -->
-        <tr>
-          {#if show_row_select}
-            <th
-              class="select-col"
-              title={all_page_selected ? `Deselect all` : `Select all on this page`}
-            >
-              <input
-                type="checkbox"
-                checked={all_page_selected}
-                onchange={toggle_select_all}
-              />
-            </th>
-          {/if}
-          {#if show_row_numbers}
-            <th class="row-num-col">#</th>
-          {/if}
-          {#each visible_columns as col (get_col_id(col))}
-            {@const col_id = get_col_id(col)}
-            {@const drag_side = drag_over_col_id === col_id
-              ? get_drag_side(col_id)
-              : null}
-            {@const col_width = column_widths[col_id]}
-            <th
-              title={col.description}
-              tabindex={col.sortable === false ? undefined : 0}
-              role={col.sortable === false ? undefined : `button`}
-              oncontextmenu={(event) => {
-                if (
-                  !allow_better_toggle || col.color_scale === null ||
-                  col.color_scale === undefined
-                ) return
-                event.preventDefault()
-                event.stopPropagation()
-                context_menu_col = col_id
-                const rect = container_el?.getBoundingClientRect()
-                context_menu_pos = {
-                  x: event.clientX - (rect?.left ?? 0),
-                  y: event.clientY - (rect?.top ?? 0),
-                }
-              }}
-              onclick={(event) => {
-                if (!drag_col_id && !resize_col_id) {
-                  sort_rows(
-                    col.label,
-                    col.group,
-                    event,
-                  )
-                }
-              }}
-              onkeydown={(event) => {
-                if (
-                  (event.key === `Enter` || event.key === ` `) &&
-                  !drag_col_id && !resize_col_id
-                ) {
-                  event.preventDefault()
-                  sort_rows(col.label, col.group, event)
-                }
-              }}
-              style={`${col.style ?? ``}${
-                col_width
-                  ? `; width: ${col_width}px; min-width: ${col_width}px`
-                  : ``
-              }`}
-              class:sticky-col={col.sticky}
-              class:not-sortable={col.sortable === false}
-              class:dragging={drag_col_id === col_id}
-              class:resizing={resize_col_id === col_id}
-              data-drag-side={drag_side}
-              draggable="true"
-              aria-dropeffect="move"
-              aria-sort={sort_state.column === col_id
-              ? (sort_state.ascending ? `ascending` : `descending`)
-              : `none`}
-              ondragstart={(event: DragEvent & { currentTarget: HTMLElement }) => {
-                handle_drag_start(event, col)
-                event.currentTarget.setAttribute(`aria-grabbed`, `true`)
-              }}
-              ondragover={(event) => handle_drag_over(event, col)}
-              ondragleave={() => (drag_over_col_id = null)}
-              ondrop={(event) => handle_drop(event, col)}
-              ondragend={(event: DragEvent & { currentTarget: HTMLElement }) => {
-                reset_drag_state()
-                event.currentTarget.removeAttribute(`aria-grabbed`)
-              }}
-            >
-              {#if header_cell}
-                {@render header_cell({ col })}
-              {:else}
-                {@html sanitize_html(col.label)}
-              {/if}
-              {@html sanitize_html(sort_indicator(col, sort_state))}
-              <!-- Column resize handle -->
-              <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-              <span
-                class="resize-handle"
-                onmousedown={(event) => start_resize(event, col)}
-                role="separator"
-                aria-orientation="vertical"
-                aria-valuenow={column_widths[get_col_id(col)] ?? 100}
-                aria-valuemin={50}
-                aria-valuemax={500}
-              ></span>
-            </th>
-          {/each}
-        </tr>
-      </thead>
-      <tbody>
-        {#each paginated_data as row, row_idx (get_row_id(row))}
-          {@const row_selected = show_row_select && is_row_selected(row)}
-          <tr
-            animate:flip={{ duration: 500 }}
-            style={row.style}
-            class={row.class ?? ``}
-            class:selected={row_selected}
-            tabindex={onrowclick ? 0 : undefined}
-            onclick={onrowclick ? (event) => onrowclick(event, row) : undefined}
-            ondblclick={onrowdblclick ? (event) => onrowdblclick(event, row) : undefined}
-            onkeydown={onrowclick
-            ? (event) => {
-              if (event.key === `Enter` || event.key === ` `) {
-                event.preventDefault()
-                onrowclick(event, row)
-              } else if (event.key === `ArrowDown`) {
-                event.preventDefault()
-                const next = event.currentTarget.nextElementSibling
-                if (next instanceof HTMLElement) next.focus()
-              } else if (event.key === `ArrowUp`) {
-                event.preventDefault()
-                const prev = event.currentTarget.previousElementSibling
-                if (prev instanceof HTMLElement) prev.focus()
-              }
-            }
-            : undefined}
-          >
-            {#if show_row_select}
-              <td class="select-col">
-                <input
-                  type="checkbox"
-                  checked={row_selected}
-                  onchange={() => toggle_row_select(row)}
-                />
-              </td>
-            {/if}
-            {#if show_row_numbers}
-              <td class="row-num-col">
-                {(current_page - 1) * effective_page_size + row_idx + 1}
-              </td>
-            {/if}
-            {#each visible_columns as col (get_col_id(col))}
-              {@const val = row[get_col_id(col)]}
-              {@const color = calc_color(val, col)}
-              {@const col_width = column_widths[get_col_id(col)]}
-              <td
-                data-col={col.label}
-                data-sort-value={is_html_str(val) ? null : val}
-                class:sticky-col={col.sticky}
-                style:--cell-bg={color.bg}
-                style:color={color.text}
-                style={`${col.cell_style ?? col.style ?? ``}${
-                  col_width
-                    ? `; width: ${col_width}px; max-width: ${col_width}px`
-                    : ``
-                }`}
-              >
-                {#if special_cells?.[col.label]}
-                  {@render special_cells[col.label]({ row, col, val })}
-                {:else if cell}
-                  {@render cell({ row, col, val })}
-                {:else if typeof val === `number` && !Number.isNaN(val)}
-                  {format_num(val, col.format ?? default_num_format)}
-                {:else if val === undefined || val === null || Number.isNaN(val)}
-                  <span {@attach tooltip({ content: `Not available` })}>
-                    n/a
-                  </span>
-                {:else}
-                  {@html sanitize_html(val)}
-                {/if}
-              </td>
-            {/each}
-          </tr>
-        {:else}
-          {#if empty_message}
-            <tr class="empty-row">
-              <td
-                colspan={visible_columns.length + (show_row_select ? 1 : 0) +
-                (show_row_numbers ? 1 : 0)}
-              >
-                {empty_message}
-              </td>
-            </tr>
-          {/if}
-        {/each}
-      </tbody>
-      {#if footer}
-        <tfoot>
-          {@render footer()}
-        </tfoot>
-      {/if}
-    </table>
-  </div>
-
-  {@render sort_hint_element(`bottom`)}
-
-  {#if pagination_config && total_pages > 1}
-    <div class="pagination">
-      <button
-        class="page-btn"
-        disabled={current_page === 1}
-        onclick={() => current_page = 1}
-        title="First page"
-      >
-        «
-      </button>
-      <button
-        class="page-btn"
-        disabled={current_page === 1}
-        onclick={() => current_page--}
-        title="Previous page"
-      >
-        ‹
-      </button>
-      <span class="page-info">
-        Page
-        <input
-          type="number"
-          class="page-input"
-          min="1"
-          max={total_pages}
-          value={current_page}
-          onchange={(event) => {
-            const val = parseInt(event.currentTarget.value, 10)
-            current_page = Math.max(1, Math.min(total_pages, isNaN(val) ? 1 : val))
-            event.currentTarget.value = String(current_page)
-          }}
-        />
-        of {total_pages}
-        <span class="row-count">({sorted_data.length} rows)</span>
-      </span>
-      <button
-        class="page-btn"
-        disabled={current_page === total_pages}
-        onclick={() => current_page++}
-        title="Next page"
-      >
-        ›
-      </button>
-      <button
-        class="page-btn"
-        disabled={current_page === total_pages}
-        onclick={() => current_page = total_pages}
-        title="Last page"
-      >
-        »
-      </button>
-      {#if pagination_config.page_sizes}
-        <select
-          class="page-size-select"
-          onchange={(event) => {
-            effective_page_size = parseInt(event.currentTarget.value, 10)
-            current_page = 1
-          }}
-        >
-          {#each pagination_config.page_sizes as size (size)}
-            <option value={size} selected={size === effective_page_size}>
-              {size} / page
-            </option>
-          {/each}
-        </select>
-      {/if}
-    </div>
-  {/if}
-
-  <ContextMenu
-    sections={better_sections}
-    selected_values={{ 'Gradient direction': better_overrides.get(context_menu_col ?? ``) ?? `` }}
-    position={context_menu_pos}
-    visible={context_menu_col !== null}
-    on_close={() => context_menu_col = null}
-    style={[
-      `--surface-bg: light-dark(#fff, #1e1e1e)`,
-      `--border-color: light-dark(rgba(0,0,0,0.15), rgba(255,255,255,0.15))`,
-      `--text-color: light-dark(#333, #eee)`,
-      `--text-color-muted: light-dark(#888, #999)`,
-      `--surface-bg-hover: light-dark(rgba(0,0,0,0.06), rgba(255,255,255,0.1))`,
-      `--accent-color: light-dark(rgba(0,0,0,0.1), rgba(255,255,255,0.15))`,
-      `z-index: 200`,
-    ].join(`; `)}
-    on_select={(_, option) => {
-      if (!context_menu_col) return
-      const current = better_overrides.get(context_menu_col)
-      if (current === option.value) better_overrides.delete(context_menu_col)
-      else better_overrides.set(context_menu_col, option.value as `higher` | `lower`)
-      context_menu_col = null
-    }}
-  />
-</div>
-
-<style>
-  .table-container {
-    font-size: var(--heatmap-font-size, 0.9em);
-    width: fit-content;
-    max-width: 100%;
-    max-height: inherit;
-    margin: 0 auto;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-  }
-  .table-scroll {
-    position: relative;
-    overflow: auto;
-  }
-  .table-scroll.has-scroll {
-    border: 1px solid light-dark(rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.12));
-    border-radius: var(--border-radius, 3pt);
-    overflow-x: hidden;
-    overflow-y: auto;
-  }
-  table {
-    border-collapse: separate;
-    border-spacing: 0;
-    display: table; /* Override global display: block to enable sticky headers */
-  }
-  th, td {
-    padding: var(--heatmap-cell-padding, 1pt 5pt);
-    text-align: var(--heatmap-text-align, left);
-    border: var(--heatmap-cell-border, none);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    /* --cell-bg is set inline per-cell by calc_color(); --heatmap-opacity is set
-       on the container from the heatmap_opacity prop to fade cell backgrounds */
-    background-color: color-mix(
-      in srgb,
-      var(--cell-bg, transparent) var(--heatmap-opacity, 100%),
-      transparent
-    );
-  }
-  th {
-    background: var(--heatmap-header-bg, var(--page-bg, Canvas));
-    position: sticky;
-    top: 0;
-    z-index: 2;
-    cursor: pointer;
-    user-select: none;
-  }
-  th:hover {
-    background: var(--heatmap-header-hover-bg, var(--nav-bg));
-  }
-  th.dragging {
-    opacity: 0.4;
-    cursor: grabbing;
-  }
-  th[data-drag-side='left'] {
-    border-left: 4px solid var(--highlight, #4a9eff);
-  }
-  th[data-drag-side='right'] {
-    border-right: 4px solid var(--highlight, #4a9eff);
-  }
-  th[draggable='true'] {
-    cursor: grab;
-  }
-  th.sticky-col {
-    position: sticky;
-    left: 0;
-    top: 0;
-    background: var(--heatmap-header-bg, var(--page-bg, Canvas));
-    z-index: 4; /* Higher than regular th (2) to stay above when both scroll */
-    border-right: 1px solid var(--border, #ddd);
-  }
-  td.sticky-col {
-    position: sticky;
-    left: 0;
-    background: var(--page-bg, Canvas);
-    z-index: 1;
-    border-right: 1px solid var(--border, #ddd);
-  }
-  tbody tr:hover {
-    filter: var(--heatmap-row-hover-filter, brightness(1.1));
-  }
-  tbody tr[tabindex] {
-    cursor: pointer;
-  }
-  tbody tr:focus-visible {
-    outline: 2px solid var(--highlight, #4a9eff);
-    outline-offset: -2px;
-  }
-  td[data-sort-value] {
-    cursor: default;
-  }
-  .group-header th {
-    text-align: center;
-    border-bottom: 1px solid var(--border);
-  }
-  /* Sticky cells in group header row need higher z-index to clip scrolling group headers */
-  .group-header th.sticky-col {
-    z-index: 5;
-  }
-  /* Floating control buttons above the table */
-  .control-buttons {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    gap: 2px;
-    margin-bottom: 1px;
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 0.15s;
-  }
-  .table-container:hover .control-buttons,
-  .control-buttons:focus-within {
-    opacity: 1;
-    pointer-events: auto;
-  }
-  .icon-btn {
-    padding: 2px 4px;
-    border: none;
-    border-radius: 3px;
-    background: light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.1));
-    color: light-dark(#333, #ddd);
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 2px;
-    font-size: 0.8em;
-  }
-  .icon-btn :global(svg) {
-    width: 12px;
-    height: 12px;
-  }
-  .icon-btn:hover {
-    background: light-dark(rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.2));
-  }
-  .icon-btn.active {
-    background: light-dark(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.25));
-  }
-  .selection-badge {
-    position: relative;
-  }
-  .selection-badge .badge {
-    background: var(--highlight, #4a9eff);
-    color: white;
-    font-size: 0.7em;
-    padding: 1px 4px;
-    border-radius: 8px;
-    min-width: 14px;
-    text-align: center;
-  }
-  .dropdown-wrapper {
-    position: relative;
-  }
-  .dropdown-pane {
-    position: absolute;
-    top: 100%;
-    right: 0;
-    margin-top: 4px;
-    padding: 4px 0;
-    background: light-dark(rgba(255, 255, 255, 0.98), rgba(30, 30, 30, 0.98));
-    border: 1px solid light-dark(rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.15));
-    border-radius: 6px;
-    box-shadow: 0 4px 12px light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.4));
-    max-height: 280px;
-    overflow-y: auto;
-    z-index: 100;
-    color: light-dark(#333, #eee);
-    font-size: 0.95em;
-  }
-  .dropdown-option {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 3px 6px;
-    cursor: pointer;
-    font-size: 0.95em;
-    white-space: nowrap;
-    background: transparent;
-    border: none;
-    color: inherit;
-    width: 100%;
-    text-align: left;
-  }
-  .dropdown-option:hover {
-    background: light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.1));
-  }
-  /* Column toggle labels - more compact */
-  label.dropdown-option {
-    padding: 4px 10px;
-    gap: 6px;
-  }
-  .search-input {
-    padding: 2px 4px;
-    border: 1px solid light-dark(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.2));
-    border-radius: 3px;
-    background: light-dark(rgba(255, 255, 255, 0.9), rgba(0, 0, 0, 0.3));
-    color: light-dark(#333, #eee);
-    font-size: 0.8em;
-    width: 110px;
-    box-sizing: border-box;
-  }
-  .search-input:focus {
-    outline: 1px solid var(--highlight, #4a9eff);
-  }
-  .search-input::placeholder {
-    color: light-dark(#999, #666);
-  }
-  .sort-hint {
-    text-align: center;
-    font-size: 0.75em;
-    color: var(--text-muted);
-    padding: 4px 0;
-    opacity: 0;
-    transition: opacity 0.15s;
-  }
-  .table-container:hover .sort-hint,
-  .sort-hint.permanent {
-    opacity: 1;
-  }
-  .not-sortable {
-    cursor: default;
-  }
-  tr.highlight {
-    background-color: var(--nav-bg) !important;
-  }
-  tr.highlight, tr.highlight :global(a) {
-    color: var(--highlight) !important;
-  }
-
-  /* Row selection */
-  .select-col {
-    width: 30px;
-    text-align: center;
-    vertical-align: middle;
-    padding: 2px !important;
-  }
-  .select-col :global(svg) {
-    display: block;
-    margin: auto;
-  }
-  tr.selected {
-    background: var(--highlight-bg, rgba(74, 158, 255, 0.15)) !important;
-  }
-  tr.selected td {
-    border-top: 1px solid var(--highlight, #4a9eff);
-    border-bottom: 1px solid var(--highlight, #4a9eff);
-  }
-  /* Pagination */
-  .pagination {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-    margin-top: 12px;
-    padding-top: 12px;
-    border-top: 1px solid var(--border);
-  }
-  .page-btn {
-    padding: 4px 10px;
-    border: 1px solid var(--border, #444);
-    border-radius: 4px;
-    background: var(--page-bg, Canvas);
-    color: inherit;
-    cursor: pointer;
-    font-size: 1em;
-  }
-  .page-btn:hover:not(:disabled) {
-    background: var(--nav-bg, #333);
-  }
-  .page-btn:disabled {
-    opacity: 0.4;
-    cursor: not-allowed;
-  }
-  .page-info {
-    font-size: 0.9em;
-    display: flex;
-    align-items: center;
-    gap: 4px;
-  }
-  .page-input {
-    min-width: 1em !important; /* Override global min-width: 40px from app.css */
-    padding: 2px 4px;
-    border: 1px solid light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
-    border-radius: 3px;
-    background: light-dark(#fff, #333);
-    color: inherit;
-    font-size: inherit;
-    text-align: center;
-    -moz-appearance: textfield;
-    appearance: textfield;
-  }
-  .page-input::-webkit-outer-spin-button,
-  .page-input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    appearance: none;
-    margin: 0;
-  }
-  .page-input:focus {
-    outline: 1px solid var(--highlight, #4a9eff);
-  }
-  .row-count {
-    color: var(--text-muted);
-    font-size: 0.85em;
-  }
-
-  .col-color-row {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    padding: 2px 0;
-    select {
-      font-size: 0.85em;
-      padding: 1px 2px;
-    }
-  }
-  .col-color-label {
-    flex: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    min-width: 0;
-  }
-  /* Column resize */
-  .resize-handle {
-    position: absolute;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    width: 4px;
-    cursor: col-resize;
-    background: transparent;
-  }
-  .resize-handle:hover,
-  th.resizing .resize-handle {
-    background: var(--highlight, #4a9eff);
-  }
-  /* Loading overlay */
-  .loading-overlay {
-    position: absolute;
-    inset: 0;
-    background: light-dark(rgba(255, 255, 255, 0.7), rgba(0, 0, 0, 0.5));
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 10;
-  }
-  .loading-spinner {
-    width: 24px;
-    height: 24px;
-    border: 3px solid light-dark(#e5e7eb, #444);
-    border-top-color: var(--highlight, #3b82f6);
-    border-radius: 50%;
-    animation: spin 0.8s linear infinite;
-  }
-  @keyframes spin {
-    to {
-      transform: rotate(360deg);
-    }
-  }
-  .empty-row td {
-    text-align: center;
-    padding: 2em !important;
-    color: var(--text-muted, #888);
-    font-style: italic;
-  }
-  .row-num-col {
-    text-align: right;
-    color: var(--text-muted, #888);
-    font-size: 0.85em;
-    width: 2em;
-    padding-right: 8px !important;
-  }
-  .page-size-select {
-    padding: 2px 4px;
-    border: 1px solid light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
-    border-radius: 3px;
-    background: light-dark(#fff, #333);
-    color: inherit;
-    font-size: 0.9em;
-  }
-</style>