matterviz 0.3.2 → 0.3.3

package/dist/heatmap-matrix/HeatmapMatrix.svelte

@@ -1,851 +1,1105 @@
-<script lang="ts">import { is_color, pick_contrast_color } from '../colors';
-import { format_num } from '../labels';
-import ColorBar from '../plot/ColorBar.svelte';
-import * as d3_sc from 'd3-scale-chromatic';
-import { onDestroy, onMount } from 'svelte';
-import { SvelteMap, SvelteSet } from 'svelte/reactivity';
-import HeatmapMatrixControls from './HeatmapMatrixControls.svelte';
-import { matrix_to_rows, rows_to_csv } from './index';
-import { make_color_override_key } from './shared';
-let { 
-// Data props
-x_items, y_items, values = [], color_scale = $bindable(`interpolateViridis`), color_scale_range = [null, null], color_overrides = {}, missing_color = `transparent`, log = false, value_transform, normalize = `linear`, domain_mode = `auto`, quantile_clip = [0.02, 0.98], show_legend = false, legend_position = `bottom`, legend_label = `Value`, legend_ticks = 5, legend_format = `.3~f`, 
-// Interaction props
-active_cell = $bindable(null), selected_cells = $bindable([]), selection_mode = `single`, pinned_cell = $bindable(null), tooltip_mode = `hover`, disabled = false, onclick, ondblclick, onselect, onpin, oncontextmenu, enable_brush = false, onbrush, 
-// Display props
-tile_size = `6px`, gap = `0px`, hide_empty = false, show_x_labels = true, show_y_labels = true, stagger_axis_labels = `auto`, symmetric: symmetric_prop = false, symmetric_label_position = `diagonal`, label_style = ``, x_order, y_order, highlight_x_keys = [], highlight_y_keys = [], search_query = ``, sticky_x_labels = false, sticky_y_labels = false, virtualize = false, overscan = 3, export_formats = [`csv`, `json`], onexport, show_gridlines = false, gridline_color = `color-mix(in srgb, currentColor 18%, transparent)`, gridline_width = `1px`, animate_updates = false, animation_duration = `120ms`, show_row_summaries = false, show_col_summaries = false, summary_fn, theme = `default`, 
-// Controls pane
-show_controls = false, controls_open = $bindable(false), controls_props = {}, controls_children, 
-// Cell value display
-show_values = false, 
-// Axis config (label used as axis title)
-x_axis = {}, y_axis = {}, 
-// Snippet props
-tooltip = false, cell, x_label_cell, y_label_cell, children, ...rest } = $props();
-// Normalize symmetric prop: true→'lower', otherwise pass through
-const symmetric = $derived(symmetric_prop === true ? `lower` : symmetric_prop);
-// Check if a cell should be skipped in symmetric mode
-function is_hidden_cell(x_idx, y_idx) {
-    if (symmetric === `lower`)
-        return x_idx > y_idx;
-    if (symmetric === `upper`)
-        return x_idx < y_idx;
-    return false;
-}
-// === Value resolution ===
-let x_keys = $derived(x_items.map((item) => item.key ?? item.label));
-let y_keys = $derived(y_items.map((item) => item.key ?? item.label));
-let highlight_x_key_set = $derived(new SvelteSet(highlight_x_keys));
-let highlight_y_key_set = $derived(new SvelteSet(highlight_y_keys));
-let search_query_norm = $derived(search_query.trim().toLowerCase());
-let get_value = $derived.by(() => {
+<script lang="ts">
+  import type { D3InterpolateName } from '../colors'
+  import { is_color, pick_contrast_color } from '../colors'
+  import { format_num } from '../labels'
+  import type { AxisConfig } from '../plot'
+  import ColorBar from '../plot/ColorBar.svelte'
+  import * as d3_sc from 'd3-scale-chromatic'
+  import { type ComponentProps, onDestroy, onMount, type Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+  import { SvelteMap, SvelteSet } from 'svelte/reactivity'
+  import HeatmapMatrixControls from './HeatmapMatrixControls.svelte'
+  import type {
+    AxisItem,
+    CellContext,
+    DomainMode,
+    HeatmapExportFormat,
+    HeatmapTooltipProp,
+    LegendPosition,
+    NormalizeMode,
+    SymmetricMode,
+  } from './index'
+  import { matrix_to_rows, rows_to_csv } from './index'
+  import { make_color_override_key } from './shared'
+
+  type CellValue = number | string | null
+  type ColorBarOrientation = `vertical` | `horizontal`
+  type SelectionMode = `single` | `multi` | `range`
+  type AxisOrderKey = `label` | `key` | `sort_value`
+  type AxisOrder = AxisOrderKey | ((a: AxisItem, b: AxisItem) => number)
+  type CellPos = { x_idx: number; y_idx: number }
+
+  let {
+    // Data props
+    x_items,
+    y_items,
+    values = [],
+    color_scale = $bindable(`interpolateViridis`),
+    color_scale_range = [null, null],
+    color_overrides = {},
+    missing_color = `transparent`,
+    log = false,
+    value_transform,
+    normalize = `linear`,
+    domain_mode = `auto`,
+    quantile_clip = [0.02, 0.98],
+    show_legend = false,
+    legend_position = `bottom`,
+    legend_label = `Value`,
+    legend_ticks = 5,
+    legend_format = `.3~f`,
+    // Interaction props
+    active_cell = $bindable(null),
+    selected_cells = $bindable([]),
+    selection_mode = `single`,
+    pinned_cell = $bindable(null),
+    tooltip_mode = `hover`,
+    disabled = false,
+    onclick,
+    ondblclick,
+    onselect,
+    onpin,
+    oncontextmenu,
+    enable_brush = false,
+    onbrush,
+    // Display props
+    tile_size = `6px`,
+    gap = `0px`,
+    hide_empty = false,
+    show_x_labels = true,
+    show_y_labels = true,
+    stagger_axis_labels = `auto`,
+    symmetric: symmetric_prop = false,
+    symmetric_label_position = `diagonal`,
+    label_style = ``,
+    x_order,
+    y_order,
+    highlight_x_keys = [],
+    highlight_y_keys = [],
+    search_query = ``,
+    sticky_x_labels = false,
+    sticky_y_labels = false,
+    virtualize = false,
+    overscan = 3,
+    export_formats = [`csv`, `json`],
+    onexport,
+    show_gridlines = false,
+    gridline_color = `color-mix(in srgb, currentColor 18%, transparent)`,
+    gridline_width = `1px`,
+    animate_updates = false,
+    animation_duration = `120ms`,
+    show_row_summaries = false,
+    show_col_summaries = false,
+    summary_fn,
+    theme = `default`,
+    // Controls pane
+    show_controls = false,
+    controls_open = $bindable(false),
+    controls_props = {},
+    controls_children,
+    // Cell value display
+    show_values = false,
+    // Axis config (label used as axis title)
+    x_axis = {},
+    y_axis = {},
+    // Snippet props
+    tooltip = false,
+    cell,
+    x_label_cell,
+    y_label_cell,
+    children,
+    ...rest
+  }: Omit<HTMLAttributes<HTMLDivElement>, `onclick` | `ondblclick`> & {
+    x_items: AxisItem[]
+    y_items: AxisItem[]
+    values?:
+      | CellValue[][]
+      | Record<string, Record<string, CellValue>>
+    color_scale?: D3InterpolateName | ((val: number) => string)
+    color_scale_range?: [number | null, number | null]
+    color_overrides?: Record<string, string>
+    missing_color?: string
+    log?: boolean
+    value_transform?: (
+      value: number,
+      ctx: { x_item: AxisItem; y_item: AxisItem; x_idx: number; y_idx: number },
+    ) => number | null
+    normalize?: NormalizeMode
+    domain_mode?: DomainMode
+    quantile_clip?: [number, number]
+    show_legend?: boolean
+    legend_position?: LegendPosition
+    legend_label?: string
+    legend_ticks?: number
+    legend_format?: string
+    active_cell?: { x_idx: number; y_idx: number } | null
+    selected_cells?: CellPos[]
+    selection_mode?: SelectionMode
+    pinned_cell?: CellPos | null
+    tooltip_mode?: `hover` | `pinned` | `both`
+    disabled?: boolean
+    onclick?: (cell: CellContext) => void
+    ondblclick?: (cell: CellContext) => void
+    onselect?: (cells: CellPos[]) => void
+    onpin?: (cell: CellPos | null) => void
+    oncontextmenu?: (cell: CellContext, event: MouseEvent) => void
+    enable_brush?: boolean
+    onbrush?: (payload: {
+      x_range: [number, number]
+      y_range: [number, number]
+      cells: CellContext[]
+    }) => void
+    tile_size?: string
+    gap?: string
+    // false: show all rows/cols. 'compact': remove all-null rows/cols.
+    // 'gaps': keep grid positions but hide all-null rows/cols (preserves alignment).
+    hide_empty?: false | `compact` | `gaps`
+    show_x_labels?: boolean
+    show_y_labels?: boolean
+    stagger_axis_labels?: boolean | `auto`
+    symmetric?: SymmetricMode
+    symmetric_label_position?: `diagonal` | `edge`
+    label_style?: string
+    x_order?: AxisOrder
+    y_order?: AxisOrder
+    highlight_x_keys?: string[]
+    highlight_y_keys?: string[]
+    search_query?: string
+    sticky_x_labels?: boolean
+    sticky_y_labels?: boolean
+    virtualize?: boolean
+    overscan?: number
+    export_formats?: HeatmapExportFormat[]
+    onexport?: (format: HeatmapExportFormat, payload: unknown) => void
+    show_gridlines?: boolean
+    gridline_color?: string
+    gridline_width?: string
+    animate_updates?: boolean
+    animation_duration?: string
+    show_row_summaries?: boolean
+    show_col_summaries?: boolean
+    summary_fn?: (values: number[]) => number | null
+    theme?: `default` | `light` | `dark` | `publication`
+    // Controls pane (opt-in, renders HeatmapMatrixControls inside the shell)
+    show_controls?: boolean
+    controls_open?: boolean
+    controls_props?: Partial<ComponentProps<typeof HeatmapMatrixControls>>
+    controls_children?: Snippet<[{ controls_open: boolean }]>
+    // Cell value display (true uses '.3~g', string is a format_num spec; ignored when cell snippet is set)
+    show_values?: boolean | string
+    // Axis config (label used as axis title)
+    x_axis?: AxisConfig
+    y_axis?: AxisConfig
+    tooltip?: HeatmapTooltipProp
+    cell?: Snippet<[CellContext]>
+    x_label_cell?: Snippet<[{ item: AxisItem; idx: number }]>
+    y_label_cell?: Snippet<[{ item: AxisItem; idx: number }]>
+    children?: Snippet
+  } = $props()
+
+  // Normalize symmetric prop: true→'lower', otherwise pass through
+  const symmetric = $derived(
+    symmetric_prop === true ? `lower` : symmetric_prop,
+  )
+
+  // Check if a cell should be skipped in symmetric mode
+  function is_hidden_cell(x_idx: number, y_idx: number): boolean {
+    if (symmetric === `lower`) return x_idx > y_idx
+    if (symmetric === `upper`) return x_idx < y_idx
+    return false
+  }
+
+  // === Value resolution ===
+  let x_keys = $derived(x_items.map((item) => item.key ?? item.label))
+  let y_keys = $derived(y_items.map((item) => item.key ?? item.label))
+  let highlight_x_key_set = $derived(new SvelteSet(highlight_x_keys))
+  let highlight_y_key_set = $derived(new SvelteSet(highlight_y_keys))
+  let search_query_norm = $derived(search_query.trim().toLowerCase())
+
+  let get_value = $derived.by(() => {
     if (Array.isArray(values)) {
-        const matrix_values = values;
-        return (x_idx, y_idx) => matrix_values[y_idx]?.[x_idx] ?? null;
+      const matrix_values = values as CellValue[][]
+      return (x_idx: number, y_idx: number): CellValue =>
+        matrix_values[y_idx]?.[x_idx] ?? null
     }
     // Record<y_key, Record<x_key, value>>
-    const record = values;
-    return (x_idx, y_idx) => {
-        const y_key = y_keys[y_idx];
-        const x_key = x_keys[x_idx];
-        return record[y_key]?.[x_key] ?? null;
-    };
-});
-// === Visibility filtering ===
-// Single pass to find which columns and rows have at least one non-null value
-function sort_indices(indices, items, axis_order) {
-    if (!axis_order)
-        return indices;
-    const sorted = [...indices];
+    const record = values as Record<string, Record<string, CellValue>>
+    return (x_idx: number, y_idx: number): CellValue => {
+      const y_key = y_keys[y_idx]
+      const x_key = x_keys[x_idx]
+      return record[y_key]?.[x_key] ?? null
+    }
+  })
+
+  // === Visibility filtering ===
+  // Single pass to find which columns and rows have at least one non-null value
+  function sort_indices(
+    indices: number[],
+    items: AxisItem[],
+    axis_order: AxisOrder | undefined,
+  ): number[] {
+    if (!axis_order) return indices
+    const sorted = [...indices]
     if (typeof axis_order === `function`) {
-        sorted.sort((idx_a, idx_b) => axis_order(items[idx_a], items[idx_b]));
-        return sorted;
+      sorted.sort((idx_a, idx_b) => axis_order(items[idx_a], items[idx_b]))
+      return sorted
     }
     sorted.sort((idx_a, idx_b) => {
-        const item_a = items[idx_a];
-        const item_b = items[idx_b];
-        if (axis_order === `sort_value`) {
-            const a_val = item_a.sort_value ?? Number.POSITIVE_INFINITY;
-            const b_val = item_b.sort_value ?? Number.POSITIVE_INFINITY;
-            return a_val - b_val;
-        }
-        if (axis_order === `key`) {
-            return (item_a.key ?? item_a.label).localeCompare(item_b.key ?? item_b.label);
-        }
-        return item_a.label.localeCompare(item_b.label);
-    });
-    return sorted;
-}
-let { vis_x, vis_y } = $derived.by(() => {
-    const all_x = Array.from({ length: x_items.length }, (_, idx) => idx);
-    const all_y = Array.from({ length: y_items.length }, (_, idx) => idx);
+      const item_a = items[idx_a]
+      const item_b = items[idx_b]
+      if (axis_order === `sort_value`) {
+        const a_val = item_a.sort_value ?? Number.POSITIVE_INFINITY
+        const b_val = item_b.sort_value ?? Number.POSITIVE_INFINITY
+        return a_val - b_val
+      }
+      if (axis_order === `key`) {
+        return (item_a.key ?? item_a.label).localeCompare(item_b.key ?? item_b.label)
+      }
+      return item_a.label.localeCompare(item_b.label)
+    })
+    return sorted
+  }
+
+  let { vis_x, vis_y } = $derived.by(() => {
+    const all_x = Array.from({ length: x_items.length }, (_, idx) => idx)
+    const all_y = Array.from({ length: y_items.length }, (_, idx) => idx)
     const filtered_x = search_query_norm
-        ? all_x.filter((idx) => {
-            const item = x_items[idx];
-            const key = item.key ?? item.label;
-            return key.toLowerCase().includes(search_query_norm) ||
-                item.label.toLowerCase().includes(search_query_norm);
-        })
-        : all_x;
+      ? all_x.filter((idx) => {
+        const item = x_items[idx]
+        const key = item.key ?? item.label
+        return key.toLowerCase().includes(search_query_norm) ||
+          item.label.toLowerCase().includes(search_query_norm)
+      })
+      : all_x
     const filtered_y = search_query_norm
-        ? all_y.filter((idx) => {
-            const item = y_items[idx];
-            const key = item.key ?? item.label;
-            return key.toLowerCase().includes(search_query_norm) ||
-                item.label.toLowerCase().includes(search_query_norm);
-        })
-        : all_y;
+      ? all_y.filter((idx) => {
+        const item = y_items[idx]
+        const key = item.key ?? item.label
+        return key.toLowerCase().includes(search_query_norm) ||
+          item.label.toLowerCase().includes(search_query_norm)
+      })
+      : all_y
     if (!hide_empty) {
-        return {
-            vis_x: sort_indices(filtered_x, x_items, x_order),
-            vis_y: sort_indices(filtered_y, y_items, y_order),
-        };
+      return {
+        vis_x: sort_indices(filtered_x, x_items, x_order),
+        vis_y: sort_indices(filtered_y, y_items, y_order),
+      }
     }
-    const col_has_data = new Array(x_items.length).fill(false);
-    const row_has_data = new Array(y_items.length).fill(false);
+
+    const col_has_data = new Array(x_items.length).fill(false)
+    const row_has_data = new Array(y_items.length).fill(false)
     for (let y_idx = 0; y_idx < y_items.length; y_idx++) {
-        for (let x_idx = 0; x_idx < x_items.length; x_idx++) {
-            if (get_value(x_idx, y_idx) !== null) {
-                col_has_data[x_idx] = true;
-                row_has_data[y_idx] = true;
-            }
+      for (let x_idx = 0; x_idx < x_items.length; x_idx++) {
+        if (get_value(x_idx, y_idx) !== null) {
+          col_has_data[x_idx] = true
+          row_has_data[y_idx] = true
         }
+      }
     }
     return {
-        vis_x: sort_indices(filtered_x.filter((idx) => col_has_data[idx]), x_items, x_order),
-        vis_y: sort_indices(filtered_y.filter((idx) => row_has_data[idx]), y_items, y_order),
-    };
-});
-// === Color computation ===
-let color_scale_fn = $derived.by(() => {
-    if (typeof color_scale === `function`)
-        return color_scale;
-    const named_scale = d3_sc[color_scale];
-    return typeof named_scale === `function` ? named_scale : d3_sc.interpolateViridis;
-});
-function get_transformed_value(x_idx, y_idx) {
-    const raw_value = get_value(x_idx, y_idx);
-    if (typeof raw_value !== `number` || !Number.isFinite(raw_value))
-        return null;
-    if (!value_transform)
-        return raw_value;
+      vis_x: sort_indices(
+        filtered_x.filter((idx) => col_has_data[idx]),
+        x_items,
+        x_order,
+      ),
+      vis_y: sort_indices(
+        filtered_y.filter((idx) => row_has_data[idx]),
+        y_items,
+        y_order,
+      ),
+    }
+  })
+
+  // === Color computation ===
+  let color_scale_fn = $derived.by(() => {
+    if (typeof color_scale === `function`) return color_scale
+    const named_scale = d3_sc[color_scale]
+    return typeof named_scale === `function` ? named_scale : d3_sc.interpolateViridis
+  })
+
+  function get_transformed_value(x_idx: number, y_idx: number): number | null {
+    const raw_value = get_value(x_idx, y_idx)
+    if (typeof raw_value !== `number` || !Number.isFinite(raw_value)) return null
+    if (!value_transform) return raw_value
     const transformed_value = value_transform(raw_value, {
-        x_item: x_items[x_idx],
-        y_item: y_items[y_idx],
-        x_idx,
-        y_idx,
-    });
-    if (transformed_value === null || !Number.isFinite(transformed_value))
-        return null;
-    return transformed_value;
-}
-function get_quantile(sorted_values, quantile) {
-    if (!sorted_values.length)
-        return 0;
-    const clipped_quantile = Math.max(0, Math.min(1, quantile));
-    const float_idx = (sorted_values.length - 1) * clipped_quantile;
-    const low_idx = Math.floor(float_idx);
-    const high_idx = Math.ceil(float_idx);
-    if (low_idx === high_idx)
-        return sorted_values[low_idx];
-    const low_weight = high_idx - float_idx;
-    const high_weight = float_idx - low_idx;
-    return sorted_values[low_idx] * low_weight + sorted_values[high_idx] * high_weight;
-}
-let valid_numeric_values = $derived.by(() => {
-    const numeric_values = [];
+      x_item: x_items[x_idx],
+      y_item: y_items[y_idx],
+      x_idx,
+      y_idx,
+    })
+    if (transformed_value === null || !Number.isFinite(transformed_value)) return null
+    return transformed_value
+  }
+
+  function get_quantile(sorted_values: number[], quantile: number): number {
+    if (!sorted_values.length) return 0
+    const clipped_quantile = Math.max(0, Math.min(1, quantile))
+    const float_idx = (sorted_values.length - 1) * clipped_quantile
+    const low_idx = Math.floor(float_idx)
+    const high_idx = Math.ceil(float_idx)
+    if (low_idx === high_idx) return sorted_values[low_idx]
+    const low_weight = high_idx - float_idx
+    const high_weight = float_idx - low_idx
+    return sorted_values[low_idx] * low_weight + sorted_values[high_idx] * high_weight
+  }
+
+  let valid_numeric_values = $derived.by(() => {
+    const numeric_values: number[] = []
     for (let y_idx = 0; y_idx < y_items.length; y_idx++) {
-        for (let x_idx = 0; x_idx < x_items.length; x_idx++) {
-            if (is_hidden_cell(x_idx, y_idx))
-                continue;
-            const value = get_transformed_value(x_idx, y_idx);
-            if (value === null)
-                continue;
-            numeric_values.push(value);
-        }
+      for (let x_idx = 0; x_idx < x_items.length; x_idx++) {
+        if (is_hidden_cell(x_idx, y_idx)) continue
+        const value = get_transformed_value(x_idx, y_idx)
+        if (value === null) continue
+        numeric_values.push(value)
+      }
     }
-    return numeric_values;
-});
-// Single-pass min/max to avoid spreading large arrays into Math.min/max
-let [auto_min, auto_max] = $derived.by(() => {
-    let min = Infinity;
-    let max = -Infinity;
+    return numeric_values
+  })
+
+  // Single-pass min/max to avoid spreading large arrays into Math.min/max
+  let [auto_min, auto_max] = $derived.by(() => {
+    let [min, max] = [Infinity, -Infinity]
     for (const value of valid_numeric_values) {
-        if (value < min)
-            min = value;
-        if (value > max)
-            max = value;
+      if (value < min) min = value
+      if (value > max) max = value
     }
-    return min <= max ? [min, max] : [0, 1];
-});
-let [robust_min, robust_max] = $derived.by(() => {
-    if (!valid_numeric_values.length)
-        return [0, 1];
-    const sorted_values = [...valid_numeric_values].sort((value_a, value_b) => value_a - value_b);
-    const [q_low, q_high] = quantile_clip;
-    const clipped_min = get_quantile(sorted_values, q_low);
-    const clipped_max = get_quantile(sorted_values, q_high);
+    return min <= max ? [min, max] as const : [0, 1] as const
+  })
+
+  let [robust_min, robust_max] = $derived.by(() => {
+    if (!valid_numeric_values.length) return [0, 1] as const
+    const sorted_values = valid_numeric_values.toSorted((value_a, value_b) =>
+      value_a - value_b
+    )
+    const [q_low, q_high] = quantile_clip
+    const clipped_min = get_quantile(sorted_values, q_low)
+    const clipped_max = get_quantile(sorted_values, q_high)
     return clipped_min <= clipped_max
-        ? [clipped_min, clipped_max]
-        : [clipped_max, clipped_min];
-});
-let [domain_min, domain_max] = $derived.by(() => {
-    if (domain_mode === `fixed` &&
-        color_scale_range[0] !== null &&
-        color_scale_range[1] !== null) {
-        return [color_scale_range[0], color_scale_range[1]];
+      ? [clipped_min, clipped_max] as const
+      : [clipped_max, clipped_min] as const
+  })
+
+  let [domain_min, domain_max] = $derived.by(() => {
+    if (
+      domain_mode === `fixed` &&
+      color_scale_range[0] !== null &&
+      color_scale_range[1] !== null
+    ) {
+      return [color_scale_range[0], color_scale_range[1]] as const
     }
-    if (domain_mode === `robust`)
-        return [robust_min, robust_max];
-    return [auto_min, auto_max];
-});
-let cs_min = $derived(color_scale_range[0] ?? domain_min);
-let cs_max = $derived(color_scale_range[1] ?? domain_max);
-let use_log_norm = $derived(normalize === `log` || log);
-// Map a single value to a background color
-function value_to_color(val) {
-    if (val === null)
-        return missing_color || null;
+    if (domain_mode === `robust`) return [robust_min, robust_max] as const
+    return [auto_min, auto_max] as const
+  })
+
+  let cs_min = $derived(color_scale_range[0] ?? domain_min)
+  let cs_max = $derived(color_scale_range[1] ?? domain_max)
+  let use_log_norm = $derived(normalize === `log` || log)
+
+  // Map a single value to a background color
+  function value_to_color(val: CellValue): string | null {
+    if (val === null) return missing_color || null
     if (typeof val === `string`) {
-        if (is_color(val))
-            return val;
-        return missing_color || null;
+      if (is_color(val)) return val
+      return missing_color || null
     }
-    if (!Number.isFinite(val) || !color_scale_fn)
-        return missing_color || null;
-    if (use_log_norm && val <= 0)
-        return missing_color || null;
-    const span = cs_max - cs_min;
-    if (!Number.isFinite(span) || span === 0)
-        return color_scale_fn(0.5);
+    if (!Number.isFinite(val) || !color_scale_fn) return missing_color || null
+    if (use_log_norm && val <= 0) return missing_color || null
+
+    const span = cs_max - cs_min
+    if (!Number.isFinite(span) || span === 0) return color_scale_fn(0.5)
+
     let normalized = typeof normalize === `function`
-        ? normalize(val, cs_min, cs_max)
-        : (val - cs_min) / span;
+      ? normalize(val, cs_min, cs_max)
+      : (val - cs_min) / span
     if (use_log_norm) {
-        const is_descending_range = cs_min > cs_max;
-        const lower_bound = Math.min(cs_min, cs_max);
-        const upper_bound = Math.max(cs_min, cs_max);
-        if (upper_bound <= 0)
-            return missing_color || null;
-        const safe_lower_bound = Math.max(lower_bound, Number.MIN_VALUE);
-        const safe_value = Math.max(val, safe_lower_bound);
-        const log_min = Math.log(safe_lower_bound);
-        const log_max = Math.log(upper_bound);
-        if (!Number.isFinite(log_min) || !Number.isFinite(log_max) || log_max === log_min) {
-            return color_scale_fn(0.5);
-        }
-        const log_normalized = (Math.log(safe_value) - log_min) / (log_max - log_min);
-        normalized = is_descending_range ? 1 - log_normalized : log_normalized;
+      const is_descending_range = cs_min > cs_max
+      const lower_bound = Math.min(cs_min, cs_max)
+      const upper_bound = Math.max(cs_min, cs_max)
+      if (upper_bound <= 0) return missing_color || null
+      const safe_lower_bound = Math.max(lower_bound, Number.MIN_VALUE)
+      const safe_value = Math.max(val, safe_lower_bound)
+      const log_min = Math.log(safe_lower_bound)
+      const log_max = Math.log(upper_bound)
+      if (
+        !Number.isFinite(log_min) || !Number.isFinite(log_max) || log_max === log_min
+      ) {
+        return color_scale_fn(0.5)
+      }
+      const log_normalized = (Math.log(safe_value) - log_min) / (log_max - log_min)
+      normalized = is_descending_range ? 1 - log_normalized : log_normalized
     }
-    if (!Number.isFinite(normalized))
-        return missing_color || null;
-    return color_scale_fn(Math.max(0, Math.min(1, normalized)));
-}
-// Batch compute background colors as a flat array indexed by y_idx * n_x + x_idx.
-// Text colors are only computed when a cell snippet is provided (otherwise cells have no text).
-let n_x = $derived(x_items.length);
-let bg_flat = $derived.by(() => {
-    const n_y = y_items.length;
-    const colors = new Array(n_x * n_y);
+    if (!Number.isFinite(normalized)) return missing_color || null
+    return color_scale_fn(Math.max(0, Math.min(1, normalized)))
+  }
+
+  // Batch compute background colors as a flat array indexed by y_idx * n_x + x_idx.
+  // Text colors are only computed when a cell snippet is provided (otherwise cells have no text).
+  let n_x = $derived(x_items.length)
+  let bg_flat = $derived.by(() => {
+    const n_y = y_items.length
+    const colors = new Array<string | null>(n_x * n_y)
     for (let y_idx = 0; y_idx < n_y; y_idx++) {
-        const row_offset = y_idx * n_x;
-        for (let x_idx = 0; x_idx < n_x; x_idx++) {
-            if (is_hidden_cell(x_idx, y_idx)) {
-                colors[row_offset + x_idx] = null;
-                continue;
-            }
-            const override_key = make_color_override_key(x_keys[x_idx], y_keys[y_idx]);
-            const raw_value = get_value(x_idx, y_idx);
-            const transformed_value = typeof raw_value === `number`
-                ? get_transformed_value(x_idx, y_idx)
-                : raw_value;
-            colors[row_offset + x_idx] = override_key in color_overrides
-                ? color_overrides[override_key]
-                : value_to_color(transformed_value);
+      const row_offset = y_idx * n_x
+      for (let x_idx = 0; x_idx < n_x; x_idx++) {
+        if (is_hidden_cell(x_idx, y_idx)) {
+          colors[row_offset + x_idx] = null
+          continue
         }
+        const override_key = make_color_override_key(x_keys[x_idx], y_keys[y_idx])
+        const raw_value = get_value(x_idx, y_idx)
+        const transformed_value = typeof raw_value === `number`
+          ? get_transformed_value(x_idx, y_idx)
+          : raw_value
+        colors[row_offset + x_idx] = override_key in color_overrides
+          ? color_overrides[override_key]
+          : value_to_color(transformed_value)
+      }
     }
-    return colors;
-});
-function to_contrast_colors(bg_values) {
-    return bg_values.map((bg_color) => bg_color ? pick_contrast_color({ bg_color }) : null);
-}
-// Compute text colors when cells render content that needs contrast (cell snippet or show_values)
-let text_flat = $derived.by(() => {
-    if (!cell && !show_values)
-        return null;
-    return to_contrast_colors(bg_flat);
-});
-// Keep selected outlines visible against each cell's background.
-let selected_outline_flat = $derived.by(() => to_contrast_colors(bg_flat));
-function get_flat_idx(x_idx, y_idx) {
-    return y_idx * n_x + x_idx;
-}
-// Look up bg color by indices
-function get_bg(x_idx, y_idx) {
-    return bg_flat[get_flat_idx(x_idx, y_idx)];
-}
-// === Cell context builder (only called for clicks, not per-hover) ===
-function build_cell_context(x_idx, y_idx) {
+    return colors
+  })
+
+  const to_contrast_colors = (bg_values: Array<string | null>): Array<string | null> =>
+    bg_values.map((bg_color) =>
+      bg_color ? pick_contrast_color({ bg_color }) : null
+    )
+
+  // Compute text colors when cells render content that needs contrast (cell snippet or show_values)
+  let text_flat = $derived.by(() => {
+    if (!cell && !show_values) return null
+    return to_contrast_colors(bg_flat)
+  })
+
+  // Keep selected outlines visible against each cell's background.
+  let selected_outline_flat = $derived.by(() => to_contrast_colors(bg_flat))
+
+  const get_flat_idx = (x_idx: number, y_idx: number): number => y_idx * n_x + x_idx
+
+  // Look up bg color by indices
+  const get_bg = (x_idx: number, y_idx: number): string | null =>
+    bg_flat[get_flat_idx(x_idx, y_idx)]
+
+  // === Cell context builder (only called for clicks, not per-hover) ===
+  function build_cell_context(x_idx: number, y_idx: number): CellContext {
     return {
-        x_item: x_items[x_idx],
-        y_item: y_items[y_idx],
-        x_idx,
-        y_idx,
-        value: get_value(x_idx, y_idx),
-        bg_color: get_bg(x_idx, y_idx),
-    };
-}
-// === Fully imperative hover management ===
-// ZERO $state writes during mouseover — all DOM updates are direct.
-// This avoids Svelte's reactive flush which would re-evaluate effects.
-const is_browser = typeof window !== `undefined`;
-let tooltip_div = $state();
-let active_cell_raf = 0; // rAF handle for deferred active_cell update
-let click_timeout_id = null;
-const dblclick_delay_ms = 250;
-let last_hover_x = -1;
-let last_hover_y = -1;
-let matrix_el = $state();
-let scroll_left = $state(0);
-let scroll_top = $state(0);
-let viewport_width = $state(0);
-let viewport_height = $state(0);
-let grid_offset_left = $state(0);
-let grid_offset_top = $state(0);
-let brush_start = $state(null);
-let brush_end = $state(null);
-let last_selected_cell = $state(null);
-// In symmetric mode, labels can either stay on outer edges ('edge')
-// or move toward the missing triangle and hug the diagonal ('diagonal').
-let use_diagonal_symmetric_labels = $derived(symmetric && symmetric_label_position === `diagonal`);
-let use_staggered_x_labels = $derived(stagger_axis_labels === true ||
-    (stagger_axis_labels === `auto` && vis_x.length >= 24));
-let use_staggered_y_labels = $derived(stagger_axis_labels === true ||
-    (stagger_axis_labels === `auto` && vis_y.length >= 24));
-let use_side_split_x_labels = $derived(use_staggered_x_labels && !use_diagonal_symmetric_labels);
-// Don't split y-labels to both sides when symmetric -- one side has no cells
-let use_side_split_y_labels = $derived(use_staggered_y_labels && !symmetric);
-// For 'gaps' mode: explicit grid placement to preserve positional alignment
-let gaps_mode = $derived(hide_empty === `gaps`);
-let visible_col_count = $derived(gaps_mode ? x_items.length : vis_x.length);
-let visible_row_count = $derived(gaps_mode ? y_items.length : vis_y.length);
-let show_bottom_summary_row = $derived(show_col_summaries);
-let show_right_summary_col = $derived(show_row_summaries);
-let grid_col_count = $derived(visible_col_count + (show_right_summary_col ? 1 : 0));
-let grid_row_count = $derived(visible_row_count + (show_bottom_summary_row ? 1 : 0));
-function cell_pos_key(x_idx, y_idx) {
-    return `${x_idx}:${y_idx}`;
-}
-let selected_cell_key_set = $derived(new SvelteSet(selected_cells.map((cell_pos) => cell_pos_key(cell_pos.x_idx, cell_pos.y_idx))));
-function parse_px_size(size) {
-    const parsed = Number.parseFloat(size);
-    return Number.isFinite(parsed) && parsed > 0 ? parsed : 12;
-}
-let tile_size_px = $derived(parse_px_size(tile_size));
-let gap_px = $derived(parse_px_size(gap));
-let tile_stride_px = $derived(tile_size_px + gap_px);
-let render_vis_x = $derived.by(() => {
-    if (!virtualize)
-        return vis_x;
-    const raw_start_pos = Math.floor((scroll_left - grid_offset_left) / tile_stride_px) - overscan;
-    const start_pos = Math.max(0, raw_start_pos);
-    const raw_end_pos = Math.ceil((scroll_left - grid_offset_left + viewport_width) / tile_stride_px) +
-        overscan;
-    const end_pos = Math.min(vis_x.length, raw_end_pos);
-    return vis_x.slice(start_pos, end_pos);
-});
-let render_vis_y = $derived.by(() => {
-    if (!virtualize)
-        return vis_y;
-    const raw_start_pos = Math.floor((scroll_top - grid_offset_top) / tile_stride_px) - overscan;
-    const start_pos = Math.max(0, raw_start_pos);
-    const raw_end_pos = Math.ceil((scroll_top - grid_offset_top + viewport_height) / tile_stride_px) +
-        overscan;
-    const end_pos = Math.min(vis_y.length, raw_end_pos);
-    return vis_y.slice(start_pos, end_pos);
-});
-function is_selected_cell(x_idx, y_idx) {
-    return selected_cell_key_set.has(cell_pos_key(x_idx, y_idx));
-}
-let vis_x_pos_map = $derived.by(() => {
-    const position_map = new SvelteMap();
+      x_item: x_items[x_idx],
+      y_item: y_items[y_idx],
+      x_idx,
+      y_idx,
+      value: get_value(x_idx, y_idx),
+      bg_color: get_bg(x_idx, y_idx),
+    }
+  }
+
+  // === Fully imperative hover management ===
+  // ZERO $state writes during mouseover — all DOM updates are direct.
+  // This avoids Svelte's reactive flush which would re-evaluate effects.
+  const is_browser = typeof window !== `undefined`
+  let tooltip_div: HTMLDivElement | undefined = $state()
+  let active_cell_raf = 0 // rAF handle for deferred active_cell update
+  let click_timeout_id: ReturnType<typeof setTimeout> | null = null
+  const dblclick_delay_ms = 250
+  let last_hover_x = -1
+  let last_hover_y = -1
+  let matrix_el: HTMLDivElement | undefined = $state()
+  let scroll_left = $state(0)
+  let scroll_top = $state(0)
+  let viewport_width = $state(0)
+  let viewport_height = $state(0)
+  let grid_offset_left = $state(0)
+  let grid_offset_top = $state(0)
+  let brush_start: CellPos | null = $state(null)
+  let brush_end: CellPos | null = $state(null)
+  let last_selected_cell: CellPos | null = $state(null)
+
+  // In symmetric mode, labels can either stay on outer edges ('edge')
+  // or move toward the missing triangle and hug the diagonal ('diagonal').
+  let use_diagonal_symmetric_labels = $derived(
+    symmetric && symmetric_label_position === `diagonal`,
+  )
+  let use_staggered_x_labels = $derived(
+    stagger_axis_labels === true ||
+      (stagger_axis_labels === `auto` && vis_x.length >= 24),
+  )
+  let use_staggered_y_labels = $derived(
+    stagger_axis_labels === true ||
+      (stagger_axis_labels === `auto` && vis_y.length >= 24),
+  )
+  let use_side_split_x_labels = $derived(
+    use_staggered_x_labels && !use_diagonal_symmetric_labels,
+  )
+  // Don't split y-labels to both sides when symmetric -- one side has no cells
+  let use_side_split_y_labels = $derived(use_staggered_y_labels && !symmetric)
+  // For 'gaps' mode: explicit grid placement to preserve positional alignment
+  let gaps_mode = $derived(hide_empty === `gaps`)
+  let visible_col_count = $derived(gaps_mode ? x_items.length : vis_x.length)
+  let visible_row_count = $derived(gaps_mode ? y_items.length : vis_y.length)
+  let show_bottom_summary_row = $derived(show_col_summaries)
+  let show_right_summary_col = $derived(show_row_summaries)
+  let grid_col_count = $derived(visible_col_count + (show_right_summary_col ? 1 : 0))
+  let grid_row_count = $derived(visible_row_count + (show_bottom_summary_row ? 1 : 0))
+
+  const cell_pos_key = (x_idx: number, y_idx: number): string => `${x_idx}:${y_idx}`
+
+  let selected_cell_key_set = $derived(
+    new SvelteSet(
+      selected_cells.map((cell_pos) => cell_pos_key(cell_pos.x_idx, cell_pos.y_idx)),
+    ),
+  )
+
+  function parse_px_size(size: string): number {
+    const parsed = Number.parseFloat(size)
+    return Number.isFinite(parsed) && parsed > 0 ? parsed : 12
+  }
+
+  let tile_size_px = $derived(parse_px_size(tile_size))
+  let gap_px = $derived(parse_px_size(gap))
+  let tile_stride_px = $derived(tile_size_px + gap_px)
+  let render_vis_x = $derived.by(() => {
+    if (!virtualize) return vis_x
+    const raw_start_pos =
+      Math.floor((scroll_left - grid_offset_left) / tile_stride_px) - overscan
+    const start_pos = Math.max(0, raw_start_pos)
+    const raw_end_pos =
+      Math.ceil((scroll_left - grid_offset_left + viewport_width) / tile_stride_px) +
+      overscan
+    const end_pos = Math.min(vis_x.length, raw_end_pos)
+    return vis_x.slice(start_pos, end_pos)
+  })
+  let render_vis_y = $derived.by(() => {
+    if (!virtualize) return vis_y
+    const raw_start_pos =
+      Math.floor((scroll_top - grid_offset_top) / tile_stride_px) - overscan
+    const start_pos = Math.max(0, raw_start_pos)
+    const raw_end_pos =
+      Math.ceil((scroll_top - grid_offset_top + viewport_height) / tile_stride_px) +
+      overscan
+    const end_pos = Math.min(vis_y.length, raw_end_pos)
+    return vis_y.slice(start_pos, end_pos)
+  })
+
+  function is_selected_cell(x_idx: number, y_idx: number): boolean {
+    return selected_cell_key_set.has(cell_pos_key(x_idx, y_idx))
+  }
+
+  let vis_x_pos_map = $derived.by(() => {
+    const position_map = new SvelteMap<number, number>()
     for (const [vis_pos, item_idx] of vis_x.entries()) {
-        position_map.set(item_idx, vis_pos);
+      position_map.set(item_idx, vis_pos)
     }
-    return position_map;
-});
-let vis_y_pos_map = $derived.by(() => {
-    const position_map = new SvelteMap();
+    return position_map
+  })
+
+  let vis_y_pos_map = $derived.by(() => {
+    const position_map = new SvelteMap<number, number>()
     for (const [vis_pos, item_idx] of vis_y.entries()) {
-        position_map.set(item_idx, vis_pos);
+      position_map.set(item_idx, vis_pos)
     }
-    return position_map;
-});
-let highlight_x_by_idx = $derived(new SvelteSet(vis_x.filter((idx) => highlight_x_key_set.has(x_items[idx].key ?? x_items[idx].label))));
-let highlight_y_by_idx = $derived(new SvelteSet(vis_y.filter((idx) => highlight_y_key_set.has(y_items[idx].key ?? y_items[idx].label))));
-function get_vis_col(item_idx) {
-    if (gaps_mode)
-        return item_idx;
-    return vis_x_pos_map.get(item_idx) ?? null;
-}
-function get_vis_row(item_idx) {
-    if (gaps_mode)
-        return item_idx;
-    return vis_y_pos_map.get(item_idx) ?? null;
-}
-function x_label_diag_grid_row(x_idx) {
-    const vis_row = get_vis_row(x_idx);
-    if (vis_row === null)
-        return undefined;
+    return position_map
+  })
+  let highlight_x_by_idx = $derived(
+    new SvelteSet(
+      vis_x.filter((idx) =>
+        highlight_x_key_set.has(x_items[idx].key ?? x_items[idx].label)
+      ),
+    ),
+  )
+  let highlight_y_by_idx = $derived(
+    new SvelteSet(
+      vis_y.filter((idx) =>
+        highlight_y_key_set.has(y_items[idx].key ?? y_items[idx].label)
+      ),
+    ),
+  )
+
+  function get_vis_col(item_idx: number): number | null {
+    if (gaps_mode) return item_idx
+    return vis_x_pos_map.get(item_idx) ?? null
+  }
+
+  function get_vis_row(item_idx: number): number | null {
+    if (gaps_mode) return item_idx
+    return vis_y_pos_map.get(item_idx) ?? null
+  }
+
+  function x_label_diag_grid_row(x_idx: number): number | undefined {
+    const vis_row = get_vis_row(x_idx)
+    if (vis_row === null) return undefined
     if (symmetric === `upper`) {
-        // Upper triangle: place x label below diagonal (in empty lower-left area)
-        return Math.min(visible_row_count + 1, vis_row + 3);
+      // Upper triangle: place x label below diagonal (in empty lower-left area)
+      return Math.min(visible_row_count + 1, vis_row + 3)
     }
     // Lower/default: place x label above diagonal (in empty upper-right area)
-    return Math.max(1, vis_row + 1);
-}
-function x_label_diag_grid_col(x_idx) {
-    const vis_col = get_vis_col(x_idx);
-    if (vis_col === null)
-        return undefined;
-    return vis_col + 2;
-}
-function y_label_edge_grid_row(y_idx) {
-    const vis_row = get_vis_row(y_idx);
-    if (vis_row === null)
-        return undefined;
-    return vis_row + 2;
-}
-function x_label_grid_col(x_idx) {
-    if (use_diagonal_symmetric_labels)
-        return x_label_diag_grid_col(x_idx);
-    return cell_grid_col(x_idx);
-}
-function x_label_grid_row(x_idx) {
-    if (use_diagonal_symmetric_labels)
-        return x_label_diag_grid_row(x_idx);
+    return Math.max(1, vis_row + 1)
+  }
+
+  function x_label_diag_grid_col(x_idx: number): number | undefined {
+    const vis_col = get_vis_col(x_idx)
+    if (vis_col === null) return undefined
+    return vis_col + 2
+  }
+
+  function y_label_edge_grid_row(y_idx: number): number | undefined {
+    const vis_row = get_vis_row(y_idx)
+    if (vis_row === null) return undefined
+    return vis_row + 2
+  }
+
+  function x_label_grid_col(x_idx: number): number | undefined {
+    if (use_diagonal_symmetric_labels) return x_label_diag_grid_col(x_idx)
+    return cell_grid_col(x_idx)
+  }
+
+  function x_label_grid_row(x_idx: number): number | undefined {
+    if (use_diagonal_symmetric_labels) return x_label_diag_grid_row(x_idx)
     if (use_side_split_x_labels && x_idx % 2 !== 0) {
-        return visible_row_count + 2 + (show_bottom_summary_row ? 1 : 0);
+      return visible_row_count + 2 + (show_bottom_summary_row ? 1 : 0)
     }
-    return 1;
-}
-// Upper symmetric or staggered odd labels: place on right side
-function y_label_grid_col(y_idx) {
+    return 1
+  }
+
+  // Upper symmetric or staggered odd labels: place on right side
+  function y_label_grid_col(y_idx: number): number {
     if (symmetric === `upper` || (use_side_split_y_labels && y_idx % 2 !== 0)) {
-        return visible_col_count + 2 + (show_right_summary_col ? 1 : 0);
+      return visible_col_count + 2 + (show_right_summary_col ? 1 : 0)
     }
-    return 1;
-}
-function cell_grid_col(x_idx) {
-    const vis_col = get_vis_col(x_idx);
-    if (vis_col === null)
-        return undefined;
-    return vis_col + 2;
-}
-function cell_grid_row(y_idx) {
-    const vis_row = get_vis_row(y_idx);
-    if (vis_row === null)
-        return undefined;
-    return vis_row + 2;
-}
-function schedule_raf(callback) {
+    return 1
+  }
+
+  function cell_grid_col(x_idx: number): number | undefined {
+    const vis_col = get_vis_col(x_idx)
+    if (vis_col === null) return undefined
+    return vis_col + 2
+  }
+
+  function cell_grid_row(y_idx: number): number | undefined {
+    const vis_row = get_vis_row(y_idx)
+    if (vis_row === null) return undefined
+    return vis_row + 2
+  }
+
+  function schedule_raf(callback: () => void): number {
     if (!is_browser) {
-        callback();
-        return 0;
+      callback()
+      return 0
     }
-    return window.requestAnimationFrame(callback);
-}
-function cancel_raf(raf_handle) {
-    if (!is_browser || raf_handle === 0)
-        return;
-    window.cancelAnimationFrame(raf_handle);
-}
-function clear_pending_click() {
-    if (click_timeout_id === null)
-        return;
-    clearTimeout(click_timeout_id);
-    click_timeout_id = null;
-}
-function parse_cell_indices(cell_el) {
-    const x_value = Number(cell_el.dataset.x);
-    const y_value = Number(cell_el.dataset.y);
-    if (!Number.isInteger(x_value) || !Number.isInteger(y_value))
-        return null;
-    return { x_idx: x_value, y_idx: y_value };
-}
-function get_cell_context_from_target(event_target) {
-    const cell_el = get_cell_el_from_target(event_target);
-    if (!cell_el)
-        return null;
-    const indices = parse_cell_indices(cell_el);
-    if (!indices)
-        return null;
-    return build_cell_context(indices.x_idx, indices.y_idx);
-}
-function trigger_click(cell_context) {
-    if (!onclick)
-        return;
+    return globalThis.requestAnimationFrame(callback)
+  }
+
+  function cancel_raf(raf_handle: number): void {
+    if (!is_browser || raf_handle === 0) return
+    globalThis.cancelAnimationFrame(raf_handle)
+  }
+
+  function clear_pending_click(): void {
+    if (click_timeout_id === null) return
+    clearTimeout(click_timeout_id)
+    click_timeout_id = null
+  }
+
+  function parse_cell_indices(
+    cell_el: HTMLElement,
+  ): { x_idx: number; y_idx: number } | null {
+    const x_value = Number(cell_el.dataset.x)
+    const y_value = Number(cell_el.dataset.y)
+    if (!Number.isInteger(x_value) || !Number.isInteger(y_value)) return null
+    return { x_idx: x_value, y_idx: y_value }
+  }
+
+  function get_cell_context_from_target(
+    event_target: EventTarget | null,
+  ): CellContext | null {
+    const cell_el = get_cell_el_from_target(event_target)
+    if (!cell_el) return null
+    const indices = parse_cell_indices(cell_el)
+    if (!indices) return null
+    return build_cell_context(indices.x_idx, indices.y_idx)
+  }
+
+  function trigger_click(cell_context: CellContext): void {
+    if (!onclick) return
     if (!ondblclick) {
-        onclick(cell_context);
-        return;
+      onclick(cell_context)
+      return
     }
-    clear_pending_click();
+    clear_pending_click()
     click_timeout_id = setTimeout(() => {
-        onclick(cell_context);
-        click_timeout_id = null;
-    }, dblclick_delay_ms);
-}
-function get_cell_el_from_target(event_target) {
-    const target_node = event_target;
-    if (!(target_node instanceof Element))
-        return null;
+      onclick(cell_context)
+      click_timeout_id = null
+    }, dblclick_delay_ms)
+  }
+
+  function get_cell_el_from_target(
+    event_target: EventTarget | null,
+  ): HTMLElement | null {
+    const target_node = event_target
+    if (!(target_node instanceof Element)) return null
     if (target_node instanceof HTMLElement && target_node.dataset.x !== undefined) {
-        return target_node;
+      return target_node
     }
-    const closest_cell = target_node.closest(`[data-x][data-y]`);
-    return closest_cell instanceof HTMLElement ? closest_cell : null;
-}
-function update_selected_cells(event, clicked_cell) {
+    const closest_cell = target_node.closest(`[data-x][data-y]`)
+    return closest_cell instanceof HTMLElement ? closest_cell : null
+  }
+
+  function update_selected_cells(
+    event: MouseEvent,
+    clicked_cell: CellPos,
+  ): void {
     if (selection_mode === `single`) {
-        selected_cells = [clicked_cell];
-        last_selected_cell = clicked_cell;
-        onselect?.(selected_cells);
-        return;
+      selected_cells = [clicked_cell]
+      last_selected_cell = clicked_cell
+      onselect?.(selected_cells)
+      return
     }
-    if (selection_mode === `range` &&
-        event.shiftKey &&
-        last_selected_cell) {
-        const x_min = Math.min(last_selected_cell.x_idx, clicked_cell.x_idx);
-        const x_max = Math.max(last_selected_cell.x_idx, clicked_cell.x_idx);
-        const y_min = Math.min(last_selected_cell.y_idx, clicked_cell.y_idx);
-        const y_max = Math.max(last_selected_cell.y_idx, clicked_cell.y_idx);
-        const next_cells = [];
-        for (let y_idx = y_min; y_idx <= y_max; y_idx++) {
-            for (let x_idx = x_min; x_idx <= x_max; x_idx++) {
-                if (is_hidden_cell(x_idx, y_idx))
-                    continue;
-                next_cells.push({ x_idx, y_idx });
-            }
+    if (
+      selection_mode === `range` &&
+      event.shiftKey &&
+      last_selected_cell
+    ) {
+      const x_min = Math.min(last_selected_cell.x_idx, clicked_cell.x_idx)
+      const x_max = Math.max(last_selected_cell.x_idx, clicked_cell.x_idx)
+      const y_min = Math.min(last_selected_cell.y_idx, clicked_cell.y_idx)
+      const y_max = Math.max(last_selected_cell.y_idx, clicked_cell.y_idx)
+      const next_cells: CellPos[] = []
+      for (let y_idx = y_min; y_idx <= y_max; y_idx++) {
+        for (let x_idx = x_min; x_idx <= x_max; x_idx++) {
+          if (is_hidden_cell(x_idx, y_idx)) continue
+          next_cells.push({ x_idx, y_idx })
         }
-        selected_cells = next_cells;
-        onselect?.(selected_cells);
-        return;
-    }
-    const clicked_key = cell_pos_key(clicked_cell.x_idx, clicked_cell.y_idx);
-    const next_cells = [...selected_cells];
-    const existing_idx = next_cells.findIndex((pos) => cell_pos_key(pos.x_idx, pos.y_idx) === clicked_key);
-    const toggle_mode = selection_mode === `multi` && (event.metaKey || event.ctrlKey);
-    if (existing_idx >= 0 && toggle_mode) {
-        next_cells.splice(existing_idx, 1);
-    }
-    else if (selection_mode === `multi` && toggle_mode) {
-        next_cells.push(clicked_cell);
-    }
-    else {
-        next_cells.splice(0, next_cells.length, clicked_cell);
+      }
+      selected_cells = next_cells
+      onselect?.(selected_cells)
+      return
     }
-    selected_cells = next_cells;
-    last_selected_cell = clicked_cell;
-    onselect?.(selected_cells);
-}
-function update_tooltip_position(client_x, client_y) {
-    if (!tooltip_div)
-        return;
-    tooltip_div.style.left = `${client_x + 10}px`;
-    tooltip_div.style.top = `${client_y + 12}px`;
-}
-function set_pinned_cell(next_cell) {
-    pinned_cell = next_cell;
-    onpin?.(next_cell);
-}
-// Write default tooltip content imperatively (no reactive state)
-function update_tooltip_content(td, x_idx, y_idx) {
-    const x_label = x_items[x_idx]?.label ?? ``;
-    const y_label = y_items[y_idx]?.label ?? ``;
-    const val = get_value(x_idx, y_idx);
-    const value_str = val === null || val === undefined
-        ? ``
-        : typeof val === `number`
-            ? format_num(val)
-            : String(val);
+    const clicked_key = cell_pos_key(clicked_cell.x_idx, clicked_cell.y_idx)
+    const next_cells = [...selected_cells]
+    const existing_idx = next_cells.findIndex((pos) =>
+      cell_pos_key(pos.x_idx, pos.y_idx) === clicked_key
+    )
+    const toggle_mode = selection_mode === `multi` && (event.metaKey || event.ctrlKey)
+    if (existing_idx >= 0 && toggle_mode) next_cells.splice(existing_idx, 1)
+    else if (selection_mode === `multi` && toggle_mode) next_cells.push(clicked_cell)
+    else next_cells.splice(0, next_cells.length, clicked_cell)
+    selected_cells = next_cells
+    last_selected_cell = clicked_cell
+    onselect?.(selected_cells)
+  }
+
+  function update_tooltip_position(client_x: number, client_y: number): void {
+    if (!tooltip_div) return
+    const tw = tooltip_div.offsetWidth
+    const th = tooltip_div.offsetHeight
+    // Flip to opposite side of cursor when near viewport edges
+    const left = client_x + 10 + tw > globalThis.innerWidth ? client_x - 10 - tw : client_x + 10
+    const top = client_y + 12 + th > globalThis.innerHeight ? client_y - 12 - th : client_y + 12
+    tooltip_div.style.left = `${Math.max(0, left)}px`
+    tooltip_div.style.top = `${Math.max(0, top)}px`
+  }
+
+  function set_pinned_cell(next_cell: CellPos | null): void {
+    pinned_cell = next_cell
+    onpin?.(next_cell)
+  }
+
+  // Write default tooltip content imperatively (no reactive state)
+  function update_tooltip_content(
+    td: HTMLElement,
+    x_idx: number,
+    y_idx: number,
+  ): void {
+    const x_label = x_items[x_idx]?.label ?? ``
+    const y_label = y_items[y_idx]?.label ?? ``
+    const val = get_value(x_idx, y_idx)
+    const value_str = val == null
+      ? ``
+      : typeof val === `number`
+      ? format_num(val)
+      : String(val)
     td.textContent = value_str
-        ? `${x_label} - ${y_label}: ${value_str}`
-        : `${x_label} - ${y_label}`;
-}
-function handle_mouseover(event) {
-    if (disabled)
-        return;
-    const cell_el = get_cell_el_from_target(event.target);
-    if (!cell_el)
-        return;
-    const indices = parse_cell_indices(cell_el);
-    if (!indices)
-        return;
-    const { x_idx, y_idx } = indices;
+      ? `${x_label} - ${y_label}: ${value_str}`
+      : `${x_label} - ${y_label}`
+  }
+
+  function handle_mouseover(event: MouseEvent) {
+    if (disabled) return
+    const cell_el = get_cell_el_from_target(event.target)
+    if (!cell_el) return
+    const indices = parse_cell_indices(cell_el)
+    if (!indices) return
+    const { x_idx, y_idx } = indices
+
     // Ignore redundant enters on the same cell (can happen with nested children)
     if (last_hover_x === x_idx && last_hover_y === y_idx) {
-        return;
+      return
     }
-    last_hover_x = x_idx;
-    last_hover_y = y_idx;
+    last_hover_x = x_idx
+    last_hover_y = y_idx
+
     // Defer bindable writes out of the hot mouseover path
-    cancel_raf(active_cell_raf);
+    cancel_raf(active_cell_raf)
     active_cell_raf = schedule_raf(() => {
-        active_cell = { x_idx, y_idx };
-    });
-    if (enable_brush && brush_start)
-        brush_end = { x_idx, y_idx };
-    if (tooltip === false || !tooltip_div || tooltip_mode === `pinned`)
-        return;
+      active_cell = { x_idx, y_idx }
+    })
+
+    if (enable_brush && brush_start) brush_end = { x_idx, y_idx }
+    if (tooltip === false || !tooltip_div || tooltip_mode === `pinned`) return
+
     // Use viewport coordinates to avoid forced layout reads on large grids
-    update_tooltip_position(event.clientX, event.clientY);
-    tooltip_div.classList.add(`visible`);
+    update_tooltip_position(event.clientX, event.clientY)
+    tooltip_div.classList.add(`visible`)
+
     if (typeof tooltip === `function`) {
-        tooltip_cell = build_cell_context(x_idx, y_idx);
-    }
-    else {
-        update_tooltip_content(tooltip_div, x_idx, y_idx);
+      tooltip_cell = build_cell_context(x_idx, y_idx)
+    } else {
+      update_tooltip_content(tooltip_div, x_idx, y_idx)
     }
-}
-function handle_mouseout(event) {
-    if (disabled)
-        return;
-    const related = event.relatedTarget;
-    if (related?.closest?.(`[data-x][data-y]`))
-        return;
+  }
+
+  function handle_mouseout(event: MouseEvent) {
+    if (disabled) return
+    const related = event.relatedTarget as HTMLElement | null
+    if (related?.closest?.(`[data-x][data-y]`)) return
     // Clear active state imperatively
-    last_hover_x = -1;
-    last_hover_y = -1;
+    last_hover_x = -1
+    last_hover_y = -1
     const keep_tooltip_visible = tooltip_mode === `pinned` ||
-        (tooltip_mode === `both` && pinned_cell !== null);
+      (tooltip_mode === `both` && pinned_cell !== null)
     if (!keep_tooltip_visible) {
-        tooltip_div?.classList.remove(`visible`);
+      tooltip_div?.classList.remove(`visible`)
     }
     // Defer reactive cleanup to rAF
-    cancel_raf(active_cell_raf);
+    cancel_raf(active_cell_raf)
     active_cell_raf = schedule_raf(() => {
-        active_cell = null;
-        if (!keep_tooltip_visible)
-            tooltip_cell = null;
-    });
-}
-function handle_click(event) {
-    if (disabled)
-        return;
-    const cell_context = get_cell_context_from_target(event.target);
-    if (!cell_context)
-        return;
-    update_selected_cells(event, {
-        x_idx: cell_context.x_idx,
-        y_idx: cell_context.y_idx,
-    });
+      active_cell = null
+      if (!keep_tooltip_visible) tooltip_cell = null
+    })
+  }
+
+  function handle_click(event: MouseEvent) {
+    if (disabled) return
+    const cell_context = get_cell_context_from_target(event.target)
+    if (!cell_context) return
+    const { x_idx, y_idx } = cell_context
+    update_selected_cells(event, { x_idx, y_idx })
     if (tooltip_mode === `both` || tooltip_mode === `pinned`) {
-        set_pinned_cell({ x_idx: cell_context.x_idx, y_idx: cell_context.y_idx });
-        if (tooltip !== false && tooltip_div) {
-            update_tooltip_position(event.clientX, event.clientY);
-            tooltip_div.classList.add(`visible`);
-            if (typeof tooltip === `function`) {
-                tooltip_cell = cell_context;
-            }
-            else {
-                update_tooltip_content(tooltip_div, cell_context.x_idx, cell_context.y_idx);
-            }
-        }
+      set_pinned_cell({ x_idx, y_idx })
+      if (tooltip !== false && tooltip_div) {
+        update_tooltip_position(event.clientX, event.clientY)
+        tooltip_div.classList.add(`visible`)
+        if (typeof tooltip === `function`) tooltip_cell = cell_context
+        else update_tooltip_content(tooltip_div, x_idx, y_idx)
+      }
     }
-    if (!onclick)
-        return;
-    trigger_click(cell_context);
-}
-function handle_dblclick(event) {
-    if (disabled || !ondblclick)
-        return;
-    const cell_context = get_cell_context_from_target(event.target);
-    if (!cell_context)
-        return;
-    clear_pending_click();
-    ondblclick(cell_context);
-}
-function handle_contextmenu(event) {
-    if (disabled || !oncontextmenu)
-        return;
-    const cell_context = get_cell_context_from_target(event.target);
-    if (!cell_context)
-        return;
-    event.preventDefault();
-    oncontextmenu(cell_context, event);
-}
-function handle_mousedown(event) {
-    if (disabled || !enable_brush)
-        return;
-    const cell_context = get_cell_context_from_target(event.target);
-    if (!cell_context)
-        return;
-    brush_start = { x_idx: cell_context.x_idx, y_idx: cell_context.y_idx };
-    brush_end = { x_idx: cell_context.x_idx, y_idx: cell_context.y_idx };
-}
-function handle_mouseup() {
+    if (!onclick) return
+    trigger_click(cell_context)
+  }
+
+  function handle_dblclick(event: MouseEvent) {
+    if (disabled || !ondblclick) return
+    const cell_context = get_cell_context_from_target(event.target)
+    if (!cell_context) return
+    clear_pending_click()
+    ondblclick(cell_context)
+  }
+
+  function handle_contextmenu(event: MouseEvent): void {
+    if (disabled || !oncontextmenu) return
+    const cell_context = get_cell_context_from_target(event.target)
+    if (!cell_context) return
+    event.preventDefault()
+    oncontextmenu(cell_context, event)
+  }
+
+  function handle_mousedown(event: MouseEvent): void {
+    if (disabled || !enable_brush) return
+    const cell_context = get_cell_context_from_target(event.target)
+    if (!cell_context) return
+    brush_start = { x_idx: cell_context.x_idx, y_idx: cell_context.y_idx }
+    brush_end = { x_idx: cell_context.x_idx, y_idx: cell_context.y_idx }
+  }
+
+  function handle_mouseup(): void {
     if (!enable_brush || !brush_start || !brush_end || !onbrush) {
-        brush_start = null;
-        brush_end = null;
-        return;
+      brush_start = null
+      brush_end = null
+      return
     }
-    const x_min = Math.min(brush_start.x_idx, brush_end.x_idx);
-    const x_max = Math.max(brush_start.x_idx, brush_end.x_idx);
-    const y_min = Math.min(brush_start.y_idx, brush_end.y_idx);
-    const y_max = Math.max(brush_start.y_idx, brush_end.y_idx);
-    const cells = [];
+    const x_min = Math.min(brush_start.x_idx, brush_end.x_idx)
+    const x_max = Math.max(brush_start.x_idx, brush_end.x_idx)
+    const y_min = Math.min(brush_start.y_idx, brush_end.y_idx)
+    const y_max = Math.max(brush_start.y_idx, brush_end.y_idx)
+    const cells: CellContext[] = []
     for (let y_idx = y_min; y_idx <= y_max; y_idx++) {
-        for (let x_idx = x_min; x_idx <= x_max; x_idx++) {
-            if (is_hidden_cell(x_idx, y_idx))
-                continue;
-            cells.push(build_cell_context(x_idx, y_idx));
-        }
+      for (let x_idx = x_min; x_idx <= x_max; x_idx++) {
+        if (is_hidden_cell(x_idx, y_idx)) continue
+        cells.push(build_cell_context(x_idx, y_idx))
+      }
     }
-    onbrush({ x_range: [x_min, x_max], y_range: [y_min, y_max], cells });
-    brush_start = null;
-    brush_end = null;
-}
-function focus_cell(x_idx, y_idx) {
-    const target = matrix_el?.querySelector(`[data-x="${x_idx}"][data-y="${y_idx}"]`);
-    if (!(target instanceof HTMLElement))
-        return false;
-    target.focus();
-    active_cell = { x_idx, y_idx };
-    return true;
-}
-function handle_keydown(event) {
-    const active_el = document.activeElement;
-    if (!(active_el instanceof HTMLElement))
-        return;
-    if (!(active_el.dataset.x && active_el.dataset.y))
-        return;
-    const x_idx = Number(active_el.dataset.x);
-    const y_idx = Number(active_el.dataset.y);
-    if (!Number.isInteger(x_idx) || !Number.isInteger(y_idx))
-        return;
-    let x_step = 0;
-    let y_step = 0;
-    if (event.key === `ArrowRight`)
-        x_step = 1;
-    else if (event.key === `ArrowLeft`)
-        x_step = -1;
-    else if (event.key === `ArrowDown`)
-        y_step = 1;
-    else if (event.key === `ArrowUp`)
-        y_step = -1;
+    onbrush({ x_range: [x_min, x_max], y_range: [y_min, y_max], cells })
+    brush_start = null
+    brush_end = null
+  }
+
+  function focus_cell(x_idx: number, y_idx: number): boolean {
+    const target = matrix_el?.querySelector(`[data-x="${x_idx}"][data-y="${y_idx}"]`)
+    if (!(target instanceof HTMLElement)) return false
+    target.focus()
+    active_cell = { x_idx, y_idx }
+    return true
+  }
+
+  function handle_keydown(event: KeyboardEvent): void {
+    const active_el = document.activeElement
+    if (!(active_el instanceof HTMLElement)) return
+    if (!(active_el.dataset.x && active_el.dataset.y)) return
+    const x_idx = Number(active_el.dataset.x)
+    const y_idx = Number(active_el.dataset.y)
+    if (!Number.isInteger(x_idx) || !Number.isInteger(y_idx)) return
+    let [x_step, y_step] = [0, 0]
+    if (event.key === `ArrowRight`) x_step = 1
+    else if (event.key === `ArrowLeft`) x_step = -1
+    else if (event.key === `ArrowDown`) y_step = 1
+    else if (event.key === `ArrowUp`) y_step = -1
     else if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === `e`) {
-        const format = export_formats[0];
-        if (format && onexport)
-            onexport(format, build_export_payload(format));
-        return;
-    }
-    else
-        return;
-    event.preventDefault();
-    let next_x = x_idx;
-    let next_y = y_idx;
-    const max_steps = Math.max(x_items.length, y_items.length) + 1;
+      const format = export_formats[0]
+      if (format && onexport) onexport(format, build_export_payload(format))
+      return
+    } else return
+    event.preventDefault()
+    let [next_x, next_y] = [x_idx, y_idx]
+    const max_steps = Math.max(x_items.length, y_items.length) + 1
     for (let step_idx = 0; step_idx < max_steps; step_idx++) {
-        next_x += x_step;
-        next_y += y_step;
-        if (next_x < 0 || next_y < 0 || next_x >= x_items.length ||
-            next_y >= y_items.length) {
-            return;
-        }
-        if (is_hidden_cell(next_x, next_y))
-            continue;
-        if (focus_cell(next_x, next_y))
-            return;
+      next_x += x_step
+      next_y += y_step
+      if (
+        next_x < 0 || next_y < 0 || next_x >= x_items.length ||
+        next_y >= y_items.length
+      ) {
+        return
+      }
+      if (is_hidden_cell(next_x, next_y)) continue
+      if (focus_cell(next_x, next_y)) return
     }
-}
-function build_export_payload(format) {
-    const rows = matrix_to_rows(vis_x.map((x_idx) => x_items[x_idx]), vis_y.map((y_idx) => y_items[y_idx]), vis_y.map((y_idx) => vis_x.map((x_idx) => get_value(x_idx, y_idx))));
-    if (format === `json`)
-        return rows;
-    return rows_to_csv(rows);
-}
-function update_viewport_state() {
-    if (!matrix_el)
-        return;
-    scroll_left = matrix_el.scrollLeft;
-    scroll_top = matrix_el.scrollTop;
-    viewport_width = matrix_el.clientWidth;
-    viewport_height = matrix_el.clientHeight;
-    const first_rendered_cell = matrix_el.querySelector(`.cell[data-x][data-y]`);
-    if (!first_rendered_cell)
-        return;
-    const x_idx = Number(first_rendered_cell.dataset.x);
-    const y_idx = Number(first_rendered_cell.dataset.y);
-    if (!Number.isInteger(x_idx) || !Number.isInteger(y_idx))
-        return;
-    const vis_col = get_vis_col(x_idx) ?? 0;
-    const vis_row = get_vis_row(y_idx) ?? 0;
-    grid_offset_left = first_rendered_cell.offsetLeft - vis_col * tile_stride_px;
-    grid_offset_top = first_rendered_cell.offsetTop - vis_row * tile_stride_px;
-}
-function compute_summary(values) {
-    if (!values.length)
-        return null;
-    if (summary_fn)
-        return summary_fn(values);
-    const total = values.reduce((sum, value) => sum + value, 0);
-    return total / values.length;
-}
-function summarize_axis_values(primary_indices, secondary_indices, get_x_idx, get_y_idx) {
-    const summary_map = new SvelteMap();
+  }
+
+  function build_export_payload(format: HeatmapExportFormat): unknown {
+    const rows = matrix_to_rows(
+      vis_x.map((x_idx) => x_items[x_idx]),
+      vis_y.map((y_idx) => y_items[y_idx]),
+      vis_y.map((y_idx) => vis_x.map((x_idx) => get_value(x_idx, y_idx))),
+    )
+    if (format === `json`) return rows
+    return rows_to_csv(rows)
+  }
+
+  function update_viewport_state(): void {
+    if (!matrix_el) return
+    scroll_left = matrix_el.scrollLeft
+    scroll_top = matrix_el.scrollTop
+    viewport_width = matrix_el.clientWidth
+    viewport_height = matrix_el.clientHeight
+    const first_rendered_cell = matrix_el.querySelector(
+      `.cell[data-x][data-y]`,
+    ) as HTMLElement | null
+    if (!first_rendered_cell) return
+    const x_idx = Number(first_rendered_cell.dataset.x)
+    const y_idx = Number(first_rendered_cell.dataset.y)
+    if (!Number.isInteger(x_idx) || !Number.isInteger(y_idx)) return
+    const vis_col = get_vis_col(x_idx) ?? 0
+    const vis_row = get_vis_row(y_idx) ?? 0
+    grid_offset_left = first_rendered_cell.offsetLeft - vis_col * tile_stride_px
+    grid_offset_top = first_rendered_cell.offsetTop - vis_row * tile_stride_px
+  }
+
+  function compute_summary(values: number[]): number | null {
+    if (!values.length) return null
+    if (summary_fn) return summary_fn(values)
+    const total = values.reduce((sum, value) => sum + value, 0)
+    return total / values.length
+  }
+
+  function summarize_axis_values(
+    primary_indices: number[],
+    secondary_indices: number[],
+    get_x_idx: (primary_idx: number, secondary_idx: number) => number,
+    get_y_idx: (primary_idx: number, secondary_idx: number) => number,
+  ): SvelteMap<number, number | null> {
+    const summary_map = new SvelteMap<number, number | null>()
     for (const primary_idx of primary_indices) {
-        const values_for_summary = [];
-        for (const secondary_idx of secondary_indices) {
-            const x_idx = get_x_idx(primary_idx, secondary_idx);
-            const y_idx = get_y_idx(primary_idx, secondary_idx);
-            if (is_hidden_cell(x_idx, y_idx))
-                continue;
-            const value = get_value(x_idx, y_idx);
-            if (typeof value === `number` && Number.isFinite(value)) {
-                values_for_summary.push(value);
-            }
+      const values_for_summary: number[] = []
+      for (const secondary_idx of secondary_indices) {
+        const x_idx = get_x_idx(primary_idx, secondary_idx)
+        const y_idx = get_y_idx(primary_idx, secondary_idx)
+        if (is_hidden_cell(x_idx, y_idx)) continue
+        const value = get_value(x_idx, y_idx)
+        if (typeof value === `number` && Number.isFinite(value)) {
+          values_for_summary.push(value)
         }
-        summary_map.set(primary_idx, compute_summary(values_for_summary));
+      }
+      summary_map.set(primary_idx, compute_summary(values_for_summary))
     }
-    return summary_map;
-}
-let row_summaries = $derived.by(() => {
-    if (!show_row_summaries)
-        return new SvelteMap();
-    return summarize_axis_values(vis_y, vis_x, (_y_idx, x_idx) => x_idx, (y_idx) => y_idx);
-});
-let col_summaries = $derived.by(() => {
-    if (!show_col_summaries)
-        return new SvelteMap();
-    return summarize_axis_values(vis_x, vis_y, (x_idx) => x_idx, (_x_idx, y_idx) => y_idx);
-});
-let legend_orientation = $derived(legend_position === `right` ? `vertical` : `horizontal`);
-let legend_wrapper_style = $derived.by(() => legend_position === `right`
-    ? `--cbar-height: 120px; --cbar-min-height: 120px; --cbar-max-height: 120px;`
-    : `--cbar-width: 180px;`);
-let has_interaction_handlers = $derived(!disabled &&
-    (Boolean(onclick) ||
+    return summary_map
+  }
+
+  let row_summaries = $derived.by(() => {
+    if (!show_row_summaries) return new SvelteMap<number, number | null>()
+    return summarize_axis_values(
+      vis_y,
+      vis_x,
+      (_y_idx, x_idx) => x_idx,
+      (y_idx) => y_idx,
+    )
+  })
+
+  let col_summaries = $derived.by(() => {
+    if (!show_col_summaries) return new SvelteMap<number, number | null>()
+    return summarize_axis_values(
+      vis_x,
+      vis_y,
+      (x_idx) => x_idx,
+      (_x_idx, y_idx) => y_idx,
+    )
+  })
+
+  let legend_orientation = $derived<ColorBarOrientation>(
+    legend_position === `right` ? `vertical` : `horizontal`,
+  )
+  let legend_wrapper_style = $derived.by(() =>
+    legend_position === `right`
+      ? `--cbar-height: 120px; --cbar-min-height: 120px; --cbar-max-height: 120px;`
+      : `--cbar-width: 180px;`
+  )
+
+  let has_interaction_handlers = $derived(
+    !disabled &&
+      (
+        Boolean(onclick) ||
         Boolean(ondblclick) ||
         Boolean(oncontextmenu) ||
         selection_mode !== `single` ||
-        tooltip_mode !== `hover`));
-let cell_tag_name = $derived(has_interaction_handlers ? `button` : `div`);
-let cell_class_name = $derived(has_interaction_handlers ? `cell interactive` : `cell`);
-// Tooltip state: only used for custom tooltip snippets (function tooltips)
-let tooltip_cell = $state(null);
-onMount(() => {
-    update_viewport_state();
-    if (!is_browser)
-        return;
-    window.addEventListener(`mouseup`, handle_mouseup);
+        tooltip_mode !== `hover`
+      ),
+  )
+  let cell_tag_name = $derived(has_interaction_handlers ? `button` : `div`)
+  let cell_class_name = $derived(
+    has_interaction_handlers ? `cell interactive` : `cell`,
+  )
+
+  // Tooltip state: only used for custom tooltip snippets (function tooltips)
+  let tooltip_cell: CellContext | null = $state(null)
+
+  onMount(() => {
+    update_viewport_state()
+    if (!is_browser) return
+    globalThis.addEventListener(`mouseup`, handle_mouseup)
     return () => {
-        window.removeEventListener(`mouseup`, handle_mouseup);
-    };
-});
-onDestroy(() => {
-    cancel_raf(active_cell_raf);
-    clear_pending_click();
-});
+      globalThis.removeEventListener(`mouseup`, handle_mouseup)
+    }
+  })
+
+  onDestroy(() => {
+    cancel_raf(active_cell_raf)
+    clear_pending_click()
+  })
 </script>
 
 <div