matterviz 0.3.0 → 0.3.2

package/dist/table/HeatmapTable.svelte

@@ -1,11 +1,31 @@
-<script lang="ts">import Icon from '../Icon.svelte';
+<script lang="ts">import { luminance, watch_dark_mode } from '../colors';
+import Icon from '../Icon.svelte';
 import { format_num } from '../labels';
+import { SettingsSection } from '../layout';
+import ContextMenu from '../overlays/ContextMenu.svelte';
+import DraggablePane from '../overlays/DraggablePane.svelte';
 import { calc_cell_color, strip_html } from './';
+import { normalize_unicode_minus } from '../utils';
 import { tooltip } from 'svelte-multiselect/attachments';
 import { flip } from 'svelte/animate';
 import { SvelteMap } from 'svelte/reactivity';
 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`, 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, onsort = undefined, onsorterror = undefined, loading = $bindable(false), sort_data = true, ...rest } = $props();
+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 } = $props();
+let container_el = $state();
+// 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 = () => {
+        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) {
@@ -27,6 +47,8 @@ let initial_sort_config = $derived(initial_sort
 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
     ? {
@@ -61,11 +83,41 @@ 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();
+// Per-column color scale overrides
+let color_scale_overrides = new SvelteMap();
+const color_scale_options = [
+    `interpolateViridis`,
+    `interpolatePlasma`,
+    `interpolateInferno`,
+    `interpolateCividis`,
+    `interpolateTurbo`,
+    `interpolateBlues`,
+    `interpolateGreens`,
+    `interpolateReds`,
+    `interpolateYlOrRd`,
+];
+// 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(null);
 let resize_start_x = $state(0);
 let resize_start_width = $state(0);
 let column_widths = $state({});
+// Auto-discover columns from data keys when none are provided
+$effect.pre(() => {
+    if (columns.length > 0 || data.length === 0)
+        return;
+    const seen = {};
+    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) => 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
@@ -97,13 +149,19 @@ let ordered_columns = $derived.by(() => {
     // 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(Boolean);
+        .filter((col) => 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(null);
 let drag_over_col_id = $state(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();
@@ -272,10 +330,10 @@ let sorted_data = $derived.by(() => {
 let paginated_data = $derived.by(() => {
     if (!pagination_config)
         return sorted_data;
-    const start = (current_page - 1) * pagination_config.page_size;
-    return sorted_data.slice(start, start + pagination_config.page_size);
+    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 / (pagination_config?.page_size ?? 25)));
+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);
@@ -290,6 +348,10 @@ $effect(() => {
         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, group, event) {
     // Find the column using both label and group if provided
@@ -375,14 +437,14 @@ function parse_numeric_val(val) {
     const error_match = val.match(/^([-+−]?(?:\d+\.?\d*|\d*\.\d+)(?:[eE][-+−]?\d+)?)\s*(?:±|\+[-−]|\()/);
     if (error_match) {
         // Normalize unicode minus (U+2212) to ASCII hyphen for Number()
-        const normalized = error_match[1].replace(/−/g, `-`);
+        const normalized = normalize_unicode_minus(error_match[1]);
         const num = Number(normalized);
         if (!isNaN(num))
             return num;
     }
     // Try parsing as a plain number (handles "1.23" strings)
     // Also normalize unicode minus for plain numbers
-    const normalized_val = val.replace(/−/g, `-`);
+    const normalized_val = normalize_unicode_minus(val);
     const plain_num = Number(normalized_val);
     if (!isNaN(plain_num) && val.trim() !== ``)
         return plain_num;
@@ -410,11 +472,25 @@ function calc_color(val, col) {
     const col_id = get_col_id(col);
     // Use memoized parsed values for the column
     const numeric_vals = parsed_column_values.get(col_id) ?? [];
-    // calc_cell_color handles null/NaN filtering internally
-    return calc_cell_color(numeric_val, numeric_vals, col.better, col.color_scale || `interpolateViridis`, col.scale_type || `linear`);
+    const better = better_overrides.get(col_id) ?? col.better;
+    const scale = (color_scale_overrides.get(col_id) ?? col.color_scale ??
+        `interpolateViridis`);
+    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, sort_state) => {
+    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((s) => s.column === col_id);
@@ -424,13 +500,24 @@ const sort_indicator = (col, sort_state) => {
         return `<span style="font-size: 0.8em;">${arrow}${badge}</span>`;
     }
     const is_sorted = sort_state.column === col_id;
-    // Show ↓ for ascending/↑ for descending when sorted
-    // Show ↑ for higher-is-better/↓ for lower-is-better when not sorted
-    const arrow = is_sorted
-        ? (sort_state.ascending ? `↓` : `↑`)
-        : (col.better === `higher` ? `↑` : col.better === `lower` ? `↓` : ``);
+    if (!is_sorted)
+        return ``;
+    // Show indicator only for actively sorted columns.
+    const arrow = 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(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` },
+        ],
+    },
+];
 // Row selection using WeakMap-based ID lookup instead of O(n) JSON.stringify comparison
 function toggle_row_select(row) {
     const row_id = get_row_id(row);
@@ -446,35 +533,57 @@ function is_row_selected(row) {
     const row_id = get_row_id(row);
     return selected_rows.some((r) => get_row_id(r) === row_id);
 }
-// Export functions
-function export_csv(filename = `table-export`) {
-    const headers = visible_columns.map((col) => col.label);
-    const rows = sorted_data.map((row) => visible_columns.map((col) => {
+// 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, csv_quote = false) {
+    const quote = (str) => {
+        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 ``;
-        const str_val = strip_html(String(val));
-        // Escape quotes and wrap in quotes if contains comma
-        if (str_val.includes(`,`) || str_val.includes(`"`)) {
-            return `"${str_val.replace(/"/g, `""`)}"`;
-        }
-        return str_val;
+        return quote(strip_html(String(val)));
     }));
-    const csv_content = [headers.join(`,`), ...rows.map((r) => r.join(`,`))].join(`\n`);
-    download_file(csv_content, `${filename}.csv`, `text/csv`);
+    return [headers.join(delimiter), ...rows.map((r) => r.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 = sorted_data.map((row) => {
+    const rows = export_rows.map((row) => {
         const clean_row = {};
         for (const col of visible_columns) {
             const col_id = get_col_id(col);
             const val = row[col_id];
-            clean_row[col.label] = typeof val === `string` ? strip_html(val) : val;
+            clean_row[strip_html(col.label)] = typeof val === `string`
+                ? strip_html(val)
+                : val;
         }
         return clean_row;
     });
-    const json_content = JSON.stringify(rows, null, 2);
-    download_file(json_content, `${filename}.json`, `application/json`);
+    download_file(JSON.stringify(rows, null, 2), `${filename}.json`, `application/json`);
 }
 function download_file(content, filename, mime_type) {
     const blob = new Blob([content], { type: mime_type });
@@ -487,6 +596,9 @@ function download_file(content, filename, mime_type) {
     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) {
     if (hidden_columns.includes(col_id)) {
@@ -502,7 +614,7 @@ function start_resize(event, col) {
     event.stopPropagation();
     resize_col_id = get_col_id(col);
     resize_start_x = event.clientX;
-    const th = event.target.parentElement;
+    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);
@@ -543,9 +655,15 @@ let hint_config = $derived(sort_hint
 
 <div
   {@attach tooltip()}
-  {...rest}
-  class="table-container {rest.class ?? ``}"
-  onmouseleave={() => [show_column_dropdown, show_export_dropdown] = [false, false]}
+  {...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">
@@ -566,12 +684,16 @@ let hint_config = $derived(sort_hint
             search_query = ``
             search_expanded = false
           }}
-          title="Clear"
+          {@attach tooltip({ content: `Clear`, placement: `top` })}
         >
           <Icon icon="Cross" style="width: 10px" />
         </button>
       {:else}
-        <button class="icon-btn" onclick={() => search_expanded = true} title="Search">
+        <button
+          class="icon-btn"
+          onclick={() => search_expanded = true}
+          {@attach tooltip({ content: `Search`, placement: `top` })}
+        >
           <Icon icon="Search" style="width: 14px" />
         </button>
       {/if}
@@ -583,7 +705,7 @@ let hint_config = $derived(sort_hint
           class="icon-btn"
           class:active={show_column_dropdown}
           onclick={() => show_column_dropdown = !show_column_dropdown}
-          title="Columns"
+          {@attach tooltip({ content: `Columns`, placement: `top` })}
         >
           <Icon icon="Columns" style="width: 14px" />
         </button>
@@ -611,7 +733,7 @@ let hint_config = $derived(sort_hint
           class="icon-btn"
           class:active={show_export_dropdown}
           onclick={() => show_export_dropdown = !show_export_dropdown}
-          title="Export"
+          {@attach tooltip({ content: `Export`, placement: `top` })}
         >
           <Icon icon="Export" style="width: 14px" />
         </button>
@@ -639,6 +761,15 @@ let hint_config = $derived(sort_hint
                 <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>
@@ -660,6 +791,106 @@ let hint_config = $derived(sort_hint
     {/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 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
@@ -681,20 +912,24 @@ let hint_config = $derived(sort_hint
             {#if show_row_select}
               <th class="select-col"></th>
             {/if}
-            {#each visible_columns as
-              { label, group, description, sticky }
-              (label + group)
-            }
-              {#if !group}
-                <th class:sticky-col={sticky}></th>
+            {#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((c) => c.group === group)}
+                {@const group_cols = visible_columns.filter((c) =>
+              c.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((c) => c.group === group) ===
+                {#if visible_columns.findIndex((c) => c.group === col.group) ===
               visible_columns.findIndex((c) =>
-                c.group === group && c.label === label
+                c.group === col.group && c.label === col.label
               )}
-                  <th title={description} colspan={group_cols.length}>{@html group}</th>
+                  <th title={col.description} colspan={group_cols.length}>
+                    {@html col.group}
+                  </th>
                 {/if}
               {/if}
             {/each}
@@ -703,11 +938,21 @@ let hint_config = $derived(sort_hint
         <!-- Second level headers -->
         <tr>
           {#if show_row_select}
-            <th class="select-col" title="Select rows">
-              <Icon icon="Checkbox" style="width: 14px; opacity: 0.7" />
+            <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}
-          {#each visible_columns as col (col.label + col.group)}
+          {#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)
@@ -717,6 +962,20 @@ let hint_config = $derived(sort_hint
               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(
@@ -762,7 +1021,11 @@ let hint_config = $derived(sort_hint
                 event.currentTarget.removeAttribute(`aria-grabbed`)
               }}
             >
-              {@html col.label}
+              {#if header_cell}
+                {@render header_cell({ col })}
+              {:else}
+                {@html col.label}
+              {/if}
               {@html sort_indicator(col, sort_state)}
               <!-- Column resize handle -->
               <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
@@ -780,14 +1043,32 @@ let hint_config = $derived(sort_hint
         </tr>
       </thead>
       <tbody>
-        {#each paginated_data as row (get_row_id(row))}
+        {#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">
@@ -798,7 +1079,12 @@ let hint_config = $derived(sort_hint
                 />
               </td>
             {/if}
-            {#each visible_columns as col (col.label + col.group)}
+            {#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)]}
@@ -806,7 +1092,7 @@ let hint_config = $derived(sort_hint
                 data-col={col.label}
                 data-sort-value={is_html_str(val) ? null : val}
                 class:sticky-col={col.sticky}
-                style:background-color={color.bg}
+                style:--cell-bg={color.bg}
                 style:color={color.text}
                 style={`${col.cell_style ?? col.style ?? ``}${
                   col_width
@@ -830,8 +1116,24 @@ let hint_config = $derived(sort_hint
               </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>
 
@@ -888,8 +1190,47 @@ let hint_config = $derived(sort_hint
       >
         »
       </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>
@@ -897,15 +1238,21 @@ let hint_config = $derived(sort_hint
     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 {
-    overflow: auto;
-    border: 1px solid var(--border, #333);
+    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;
@@ -919,6 +1266,13 @@ let hint_config = $derived(sort_hint
     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));
@@ -962,6 +1316,13 @@ let hint_config = $derived(sort_hint
   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;
   }
@@ -979,7 +1340,7 @@ let hint_config = $derived(sort_hint
     justify-content: flex-end;
     align-items: center;
     gap: 2px;
-    margin-bottom: 4px;
+    margin-bottom: 1px;
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.15s;
@@ -990,21 +1351,21 @@ let hint_config = $derived(sort_hint
     pointer-events: auto;
   }
   .icon-btn {
-    padding: 5px 8px;
+    padding: 2px 4px;
     border: none;
-    border-radius: 4px;
+    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: 4px;
-    font-size: 0.95em;
+    gap: 2px;
+    font-size: 0.8em;
   }
   .icon-btn :global(svg) {
-    width: 16px;
-    height: 16px;
+    width: 12px;
+    height: 12px;
   }
   .icon-btn:hover {
     background: light-dark(rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.2));
@@ -1066,13 +1427,13 @@ let hint_config = $derived(sort_hint
     gap: 6px;
   }
   .search-input {
-    padding: 5px 8px;
+    padding: 2px 4px;
     border: 1px solid light-dark(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.2));
-    border-radius: 4px;
+    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.95em;
-    width: 120px;
+    font-size: 0.8em;
+    width: 110px;
     box-sizing: border-box;
   }
   .search-input:focus {
@@ -1179,6 +1540,23 @@ let hint_config = $derived(sort_hint
     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;
@@ -1216,4 +1594,25 @@ let hint_config = $derived(sort_hint
       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>