matterviz 0.3.2 → 0.3.4

package/dist/phase-diagram/IsobaricBinaryPhaseDiagram.svelte

@@ -1,338 +1,475 @@
-<script lang="ts">import { format_num } from '../labels';
-import { FullscreenToggle, set_fullscreen_bg, setup_fullscreen_effect, } from '../layout';
-import { compute_bounding_box_2d, polygon_centroid } from '../math';
-import { constrain_tooltip_position } from '../plot/layout';
-import { scaleLinear } from 'd3-scale';
-import { build_diagram } from './build-diagram';
-import PhaseDiagramControls from './PhaseDiagramControls.svelte';
-import PhaseDiagramEditorPane from './PhaseDiagramEditorPane.svelte';
-import PhaseDiagramExportPane from './PhaseDiagramExportPane.svelte';
-import PhaseDiagramTooltip from './PhaseDiagramTooltip.svelte';
-import { parse_phase_diagram_svg } from './svg-to-diagram';
-import { calculate_lever_rule, calculate_vertical_lever_rule, compute_label_properties, convert_temp, find_phase_at_point, format_composition, format_formula_svg, format_hover_info_text, format_label_svg, generate_boundary_path, generate_region_path, get_multi_phase_gradient, get_phase_color, merge_phase_diagram_config, PHASE_COLOR_RGB, transform_vertices, } from './utils';
-let { data, config = $bindable({}), on_phase_hover, fullscreen = $bindable(false), wrapper = $bindable(), hovered_region = $bindable(null), show_boundaries = $bindable(true), show_labels = $bindable(true), show_special_points = $bindable(true), show_grid = $bindable(true), show_component_labels = $bindable(true), fullscreen_toggle = true, enable_export = true, show_controls = true, display_temp_unit = $bindable(), controls_open = $bindable(false), controls_props = {}, export_pane_open = $bindable(false), png_dpi = $bindable(150), export_filename = `phase-diagram`, lever_rule_mode = $bindable(`horizontal`), diagram_input = $bindable(null), editor_open = $bindable(false), x_axis = $bindable({}), y_axis = $bindable({}), tooltip, children, ...rest } = $props();
-// Shared icon/toggle styling for controls and export panes
-const pane_icon_style = `width: 14px; height: 14px`;
-const pane_toggle_props = { style: `padding: 0` };
-// Rebuild diagram data when diagram_input changes ($derived auto-recomputes)
-const rebuilt_data = $derived.by(() => {
-    if (!diagram_input)
-        return null;
+<script lang="ts">
+  import { format_num } from '../labels'
+  import {
+    FullscreenToggle,
+    set_fullscreen_bg,
+    setup_fullscreen_effect,
+  } from '../layout'
+  import { sanitize_svg } from '../sanitize'
+  import { compute_bounding_box_2d, polygon_centroid, type Vec2 } from '../math'
+  import type { AxisConfig } from '../plot'
+  import { constrain_tooltip_position } from '../plot/layout'
+  import { scaleLinear } from 'd3-scale'
+  import type { ComponentProps, Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+  import { build_diagram } from './build-diagram'
+  import type { DiagramInput } from './diagram-input'
+  import PhaseDiagramControls from './PhaseDiagramControls.svelte'
+  import PhaseDiagramEditorPane from './PhaseDiagramEditorPane.svelte'
+  import PhaseDiagramExportPane from './PhaseDiagramExportPane.svelte'
+  import PhaseDiagramTooltip from './PhaseDiagramTooltip.svelte'
+  import { parse_phase_diagram_svg } from './svg-to-diagram'
+  import type {
+    LeverRuleMode,
+    PhaseDiagramConfig,
+    PhaseDiagramData,
+    PhaseDiagramTooltipConfig,
+    PhaseHoverInfo,
+    PhaseRegion,
+    TempUnit,
+  } from './types'
+  import {
+    calculate_lever_rule,
+    calculate_vertical_lever_rule,
+    compute_label_properties,
+    compute_x_domain,
+    convert_temp,
+    find_phase_at_point,
+    format_composition,
+    format_formula_svg,
+    format_hover_info_text,
+    format_label_svg,
+    generate_boundary_path,
+    generate_region_path,
+    get_multi_phase_gradient,
+    get_phase_color,
+    merge_phase_diagram_config,
+    PHASE_COLOR_RGB,
+    transform_vertices,
+  } from './utils'
+
+  type Props = HTMLAttributes<HTMLDivElement> & {
+    data: PhaseDiagramData
+    config?: Partial<PhaseDiagramConfig>
+    // Hover callback
+    on_phase_hover?: (info: PhaseHoverInfo | null) => void
+    // Bindable state
+    fullscreen?: boolean
+    wrapper?: HTMLDivElement
+    hovered_region?: PhaseRegion | null
+    // Display options
+    show_boundaries?: boolean
+    show_labels?: boolean
+    show_special_points?: boolean
+    show_grid?: boolean
+    show_component_labels?: boolean
+    fullscreen_toggle?: boolean
+    enable_export?: boolean
+    show_controls?: boolean
+    // Temperature display unit (can differ from data.temperature_unit)
+    display_temp_unit?: `K` | `°C` | `°F`
+    // Controls pane
+    controls_open?: boolean
+    controls_props?: Partial<ComponentProps<typeof PhaseDiagramControls>>
+    // Export options
+    export_pane_open?: boolean
+    png_dpi?: number
+    export_filename?: string
+    // Lever rule mode (horizontal = composition tie-line, vertical = temperature tie-line)
+    lever_rule_mode?: LeverRuleMode
+    // Diagram input editor (for SVG drop editing)
+    diagram_input?: DiagramInput | null
+    editor_open?: boolean
+    // Axis configuration
+    x_axis?: AxisConfig
+    y_axis?: AxisConfig
+    // Custom tooltip - can be a snippet (replaces default), config object (adds prefix/suffix),
+    // or false to disable tooltip entirely
+    tooltip?: Snippet<[PhaseHoverInfo]> | PhaseDiagramTooltipConfig | false
+    children?: Snippet<
+      [{ width: number; height: number; fullscreen: boolean }]
+    >
+  }
+
+  let {
+    data,
+    config = $bindable({}),
+    on_phase_hover,
+    fullscreen = $bindable(false),
+    wrapper = $bindable(),
+    hovered_region = $bindable(null),
+    show_boundaries = $bindable(true),
+    show_labels = $bindable(true),
+    show_special_points = $bindable(true),
+    show_grid = $bindable(true),
+    show_component_labels = $bindable(true),
+    fullscreen_toggle = true,
+    enable_export = true,
+    show_controls = true,
+    display_temp_unit = $bindable(),
+    controls_open = $bindable(false),
+    controls_props = {},
+    export_pane_open = $bindable(false),
+    png_dpi = $bindable(150),
+    export_filename = `phase-diagram`,
+    lever_rule_mode = $bindable(`horizontal`),
+    diagram_input = $bindable<DiagramInput | null>(null),
+    editor_open = $bindable(false),
+    x_axis = $bindable({}),
+    y_axis = $bindable({}),
+    tooltip,
+    children,
+    ...rest
+  }: Props = $props()
+
+  // Shared icon/toggle styling for controls and export panes
+  const pane_icon_style = `width: 14px; height: 14px`
+  const pane_toggle_props = { style: `padding: 0` }
+
+  // Rebuild diagram data when diagram_input changes ($derived auto-recomputes)
+  const rebuilt_data = $derived.by(() => {
+    if (!diagram_input) return null
     try {
-        return build_diagram(diagram_input);
+      return build_diagram(diagram_input)
+    } catch (error) {
+      console.warn(`Failed to rebuild diagram from input:`, error)
+      return null
     }
-    catch (err) {
-        console.warn(`Failed to rebuild diagram from input:`, err);
-        return null;
-    }
-});
-// Override from direct PhaseDiagramData edits in the editor pane
-let data_override = $state(null);
-// Clear data_override when source data changes (e.g. new SVG dropped or data prop updated)
-$effect(() => {
-    if (diagram_input || data)
-        data_override = null;
-});
-// Use editor override first (clears rebuilt_data path), then rebuilt, then data prop
-const effective_data = $derived(data_override ?? rebuilt_data ?? data);
-// Handle SVG file drop directly on the component
-function handle_svg_drop(event) {
-    event.preventDefault();
-    const file = event.dataTransfer?.files[0];
+  })
+
+  // Override from direct PhaseDiagramData edits in the editor pane
+  let data_override = $state<PhaseDiagramData | null>(null)
+
+  // Clear data_override when source data changes (e.g. new SVG dropped or data prop updated)
+  $effect(() => {
+    if (diagram_input || data) data_override = null
+  })
+
+  // Use editor override first (clears rebuilt_data path), then rebuilt, then data prop
+  const effective_data = $derived(data_override ?? rebuilt_data ?? data)
+
+  // Handle SVG file drop directly on the component
+  function handle_svg_drop(event: DragEvent) {
+    event.preventDefault()
+    const file = event.dataTransfer?.files[0]
     if (!file || (!file.name.endsWith(`.svg`) && file.type !== `image/svg+xml`)) {
-        return;
-    }
-    const reader = new FileReader();
-    reader.onload = () => {
-        try {
-            diagram_input = parse_phase_diagram_svg(reader.result);
-        }
-        catch (err) {
-            console.error(`Failed to parse dropped SVG:`, err);
-        }
-    };
-    reader.readAsText(file);
-}
-// Merge config with centralized defaults using shared helper
-const merged_config = $derived(merge_phase_diagram_config(config));
-// Dimensions - use container size directly, no fallback to avoid layout shift
-let width = $state(0);
-let height = $state(0);
-// Margin from config
-const margin = $derived(merged_config.margin);
-// Pre-computed plot edges to avoid repeated calculations
-const left = $derived(margin.l);
-const right = $derived(width - margin.r);
-const top = $derived(margin.t);
-const bottom = $derived(height - margin.b);
-const plot_width = $derived(right - left);
-const plot_height = $derived(bottom - top);
-// Compute x domain from data extent, x_axis.range override, or default [0, 1]
-// Auto-extends to 0/1 when edge regions contain a pure component
-const x_domain = $derived.by(() => {
-    const lo = x_axis.range?.[0];
-    const hi = x_axis.range?.[1];
-    if (lo != null && hi != null)
-        return [lo, hi];
-    if (effective_data) {
-        // Loop-based min/max to avoid stack overflow with large datasets
-        let data_min = Infinity;
-        let data_max = -Infinity;
-        const update = (val) => {
-            if (val < data_min)
-                data_min = val;
-            if (val > data_max)
-                data_max = val;
-        };
-        for (const region of effective_data.regions) {
-            for (const vertex of region.vertices)
-                update(vertex[0]);
-        }
-        for (const boundary of effective_data.boundaries) {
-            for (const point of boundary.points)
-                update(point[0]);
-        }
-        for (const special_point of effective_data.special_points ?? []) {
-            update(special_point.position[0]);
-        }
-        if (data_min <= data_max) {
-            let x_min = lo ?? data_min;
-            let x_max = hi ?? data_max;
-            // Auto-extend to 0/1 when edge regions contain a pure component AND the
-            // data already nearly reaches the boundary. This prevents extending a
-            // section diagram (e.g. 0.3–0.7) to the full [0, 1] range.
-            // Word boundary regex avoids matching substrings (e.g. "Fe" won't match "Fe3C")
-            const comp_at_edge = (comp, x_val) => {
-                const re = new RegExp(`\\b${comp.replace(/[.*+?^${}()|[\]\\]/g, `\\$&`)}\\b`);
-                return effective_data.regions.some((region) => re.test(region.name) &&
-                    region.vertices.some((vertex) => Math.abs(vertex[0] - x_val) < 1e-6));
-            };
-            if (lo == null && x_min < 0.05 &&
-                effective_data.components[0] &&
-                comp_at_edge(effective_data.components[0], x_min)) {
-                x_min = 0;
-            }
-            if (hi == null && x_max > 0.95 &&
-                effective_data.components[1] &&
-                comp_at_edge(effective_data.components[1], x_max)) {
-                x_max = 1;
-            }
-            return [x_min, x_max];
-        }
+      return
     }
-    return [lo ?? 0, hi ?? 1];
-});
-// Scales
-const x_scale = $derived(scaleLinear().domain(x_domain).range([left, right]));
-// Temperature units (guard for initial render when data may be undefined)
-const data_temp_unit = $derived((effective_data?.temperature_unit ?? `K`));
-const temp_unit = $derived(display_temp_unit ?? data_temp_unit);
-const temp_range = $derived(effective_data?.temperature_range ?? [0, 1000]);
-// Convert temperature range for display
-const display_temp_range = $derived([
+    const reader = new FileReader()
+    reader.addEventListener(`load`, () => {
+      try {
+        diagram_input = parse_phase_diagram_svg(reader.result as string)
+      } catch (error) {
+        console.error(`Failed to parse dropped SVG:`, error)
+      }
+    })
+    reader.readAsText(file)
+  }
+
+  // Merge config with centralized defaults using shared helper
+  const merged_config = $derived(merge_phase_diagram_config(config))
+
+  // Dimensions - use container size directly, no fallback to avoid layout shift
+  let width = $state(0)
+  let height = $state(0)
+
+  // Margin from config
+  const margin = $derived(merged_config.margin)
+
+  // Pre-computed plot edges to avoid repeated calculations
+  const left = $derived(margin.l)
+  const right = $derived(width - margin.r)
+  const top = $derived(margin.t)
+  const bottom = $derived(height - margin.b)
+  const plot_width = $derived(right - left)
+  const plot_height = $derived(bottom - top)
+
+  // Compute x domain from data extent, x_axis.range override, or default [0, 1]
+  // Auto-extends to 0/1 when edge regions contain a pure component
+  const x_domain = $derived(compute_x_domain(x_axis.range, effective_data))
+
+  // Scales
+  const x_scale = $derived(scaleLinear().domain(x_domain).range([left, right]))
+
+  // Temperature units (guard for initial render when data may be undefined)
+  const data_temp_unit = $derived<TempUnit>(
+    (effective_data?.temperature_unit ?? `K`) as TempUnit,
+  )
+  const temp_unit = $derived<TempUnit>(display_temp_unit ?? data_temp_unit)
+  const temp_range = $derived(effective_data?.temperature_range ?? [0, 1000])
+
+  // Convert temperature range for display
+  const display_temp_range = $derived<Vec2>([
     convert_temp(temp_range[0], data_temp_unit, temp_unit),
     convert_temp(temp_range[1], data_temp_unit, temp_unit),
-]);
-// y_scale maps data temperatures to SVG coordinates
-// We keep this in data units so region vertices render correctly
-const y_scale = $derived(scaleLinear().domain(temp_range).range([bottom, top]));
-// y_scale_display maps display temperatures (after unit conversion) to SVG
-// Used for axis labels and ticks
-const y_scale_display = $derived(scaleLinear().domain(display_temp_range).range([bottom, top]));
-// Generate tick values using d3 scale's built-in ticks method
-const x_ticks = $derived(x_scale.ticks(typeof x_axis.ticks === `number` ? x_axis.ticks : 5));
-// Use display scale for y ticks so they show converted temperatures
-const y_ticks = $derived(y_scale_display.ticks(typeof y_axis.ticks === `number` ? y_axis.ticks : 6));
-// Transform regions to SVG coordinates
-const transformed_regions = $derived((effective_data?.regions ?? []).map((region) => {
-    const svg_vertices = transform_vertices(region.vertices, x_scale, y_scale);
-    const { width, height } = compute_bounding_box_2d(svg_vertices);
-    const label_props = compute_label_properties(region.name, { width, height }, merged_config.font_size);
-    // Get gradient stops for multi-phase regions (2+, supports 3+ phases)
-    const gradient = get_multi_phase_gradient(region.name);
-    const x_coords = svg_vertices.map(([vx]) => vx);
-    return {
+  ])
+
+  // y_scale maps data temperatures to SVG coordinates
+  // We keep this in data units so region vertices render correctly
+  const y_scale = $derived(
+    scaleLinear().domain(temp_range).range([bottom, top]),
+  )
+
+  // y_scale_display maps display temperatures (after unit conversion) to SVG
+  // Used for axis labels and ticks
+  const y_scale_display = $derived(
+    scaleLinear().domain(display_temp_range).range([bottom, top]),
+  )
+
+  // Generate tick values using d3 scale's built-in ticks method
+  const x_ticks = $derived(
+    x_scale.ticks(typeof x_axis.ticks === `number` ? x_axis.ticks : 5),
+  )
+  // Use display scale for y ticks so they show converted temperatures
+  const y_ticks = $derived(
+    y_scale_display.ticks(typeof y_axis.ticks === `number` ? y_axis.ticks : 6),
+  )
+
+  // Transform regions to SVG coordinates
+  const transformed_regions = $derived(
+    (effective_data?.regions ?? []).map((region) => {
+      const svg_vertices = transform_vertices(region.vertices, x_scale, y_scale)
+      const { width, height } = compute_bounding_box_2d(svg_vertices)
+      const label_props = compute_label_properties(
+        region.name,
+        { width, height },
+        merged_config.font_size,
+      )
+      // Get gradient stops for multi-phase regions (2+, supports 3+ phases)
+      const gradient = get_multi_phase_gradient(region.name)
+      const x_coords = svg_vertices.map(([vx]) => vx)
+      return {
         ...region,
         svg_path: generate_region_path(svg_vertices),
         label_pos: region.label_position
-            ? [x_scale(region.label_position[0]), y_scale(region.label_position[1])]
-            : polygon_centroid(svg_vertices),
+          ? [x_scale(region.label_position[0]), y_scale(region.label_position[1])]
+          : polygon_centroid(svg_vertices),
         label_rotation: label_props.rotation,
         label_lines: label_props.lines,
         label_scale: label_props.scale,
         gradient,
         x_min: Math.min(...x_coords),
         x_max: Math.max(...x_coords),
-    };
-}));
-// Transform boundaries to SVG coordinates
-const transformed_boundaries = $derived((effective_data?.boundaries ?? []).map((boundary) => ({
-    ...boundary,
-    svg_path: generate_boundary_path(transform_vertices(boundary.points, x_scale, y_scale)),
-})));
-// Transform special points to SVG coordinates
-const transformed_special_points = $derived((effective_data?.special_points ?? []).map((point) => ({
-    ...point,
-    svg_x: x_scale(point.position[0]),
-    svg_y: y_scale(point.position[1]),
-})));
-// Hover state
-let hover_info = $state(null);
-// Locked tooltip state (click to lock, click again to unlock)
-let locked_hover_info = $state(null);
-// Clear hover state helper (used in multiple places)
-function clear_hover() {
-    hover_info = null;
-    hovered_region = null;
-    on_phase_hover?.(null);
-}
-// Handle click to lock/unlock tooltip
-function handle_click() {
+      }
+    }),
+  )
+
+  // Transform boundaries to SVG coordinates
+  const transformed_boundaries = $derived(
+    (effective_data?.boundaries ?? []).map((boundary) => ({
+      ...boundary,
+      svg_path: generate_boundary_path(
+        transform_vertices(boundary.points, x_scale, y_scale),
+      ),
+    })),
+  )
+
+  // Transform special points to SVG coordinates
+  const transformed_special_points = $derived(
+    (effective_data?.special_points ?? []).map((point) => ({
+      ...point,
+      svg_x: x_scale(point.position[0]),
+      svg_y: y_scale(point.position[1]),
+    })),
+  )
+
+  // Hover state
+  let hover_info = $state<PhaseHoverInfo | null>(null)
+  // Locked tooltip state (click to lock, click again to unlock)
+  let locked_hover_info = $state<PhaseHoverInfo | null>(null)
+
+  // Clear hover state helper (used in multiple places)
+  function clear_hover() {
+    hover_info = null
+    hovered_region = null
+    on_phase_hover?.(null)
+  }
+
+  // Handle click to lock/unlock tooltip
+  function handle_click() {
     if (locked_hover_info) {
-        // Unlock if already locked
-        locked_hover_info = null;
-    }
-    else if (hover_info) {
-        // Lock current hover info
-        locked_hover_info = { ...hover_info };
+      // Unlock if already locked
+      locked_hover_info = null
+    } else if (hover_info) {
+      // Lock current hover info
+      locked_hover_info = { ...hover_info }
     }
-}
-// Effective hover info - locked takes precedence
-const effective_hover_info = $derived(locked_hover_info ?? hover_info);
-// Copy feedback state
-let copy_feedback_visible = $state(false);
-let copy_feedback_pos = $state({ x: 0, y: 0 });
-let copy_feedback_timeout;
-// Handle double-click to copy tooltip data
-async function handle_double_click(event) {
-    if (!hover_info)
-        return;
+  }
+
+  // Effective hover info - locked takes precedence
+  const effective_hover_info = $derived(locked_hover_info ?? hover_info)
+
+  // Copy feedback state
+  let copy_feedback_visible = $state(false)
+  let copy_feedback_pos = $state({ x: 0, y: 0 })
+  let copy_feedback_timeout: ReturnType<typeof setTimeout> | undefined
+
+  // Handle double-click to copy tooltip data
+  async function handle_double_click(event: MouseEvent) {
+    if (!hover_info) return
     try {
-        await navigator.clipboard.writeText(format_hover_info_text(hover_info, temp_unit, comp_unit, component_a, component_b, data_temp_unit, lever_rule_mode));
-        if (copy_feedback_timeout)
-            clearTimeout(copy_feedback_timeout);
-        copy_feedback_pos = { x: event.clientX, y: event.clientY };
-        copy_feedback_visible = true;
-        copy_feedback_timeout = setTimeout(() => {
-            copy_feedback_visible = false;
-            copy_feedback_timeout = undefined;
-        }, 1500);
+      await navigator.clipboard.writeText(
+        format_hover_info_text(
+          hover_info,
+          temp_unit,
+          comp_unit,
+          component_a,
+          component_b,
+          data_temp_unit,
+          lever_rule_mode,
+        ),
+      )
+      if (copy_feedback_timeout) clearTimeout(copy_feedback_timeout)
+      copy_feedback_pos = { x: event.clientX, y: event.clientY }
+      copy_feedback_visible = true
+      copy_feedback_timeout = setTimeout(() => {
+        copy_feedback_visible = false
+        copy_feedback_timeout = undefined
+      }, 1500)
+    } catch (error) {
+      console.error(`Failed to copy phase data:`, error)
     }
-    catch (err) {
-        console.error(`Failed to copy phase data:`, err);
-    }
-}
-// Tooltip element reference for measuring actual size
-let tooltip_el = $state(null);
-// Tooltip positioning using shared utility (uses effective_hover_info for locked state)
-const tooltip_pos = $derived.by(() => {
-    const info = effective_hover_info;
-    if (!info)
-        return { x: 0, y: 0 };
-    return constrain_tooltip_position(info.position.x, info.position.y, tooltip_el?.offsetWidth ?? 200, tooltip_el?.offsetHeight ?? 150, globalThis.innerWidth ?? 1000, globalThis.innerHeight ?? 800, { offset: 15 });
-});
-// Find nearest special point within threshold (in SVG pixels)
-function find_nearby_special_point(svg_x, svg_y, threshold = 20) {
-    let nearest = null;
-    let min_dist = threshold;
+  }
+
+  // Tooltip element reference for measuring actual size
+  let tooltip_el = $state<HTMLDivElement | null>(null)
+
+  // Tooltip positioning using shared utility (uses effective_hover_info for locked state)
+  const tooltip_pos = $derived.by(() => {
+    const info = effective_hover_info
+    if (!info) return { x: 0, y: 0 }
+    return constrain_tooltip_position(
+      info.position.x,
+      info.position.y,
+      tooltip_el?.offsetWidth ?? 200,
+      tooltip_el?.offsetHeight ?? 150,
+      globalThis.innerWidth ?? 1000,
+      globalThis.innerHeight ?? 800,
+      { offset: 15 },
+    )
+  })
+
+  // Find nearest special point within threshold (in SVG pixels)
+  function find_nearby_special_point(
+    svg_x: number,
+    svg_y: number,
+    threshold: number = 20,
+  ) {
+    let nearest: (typeof transformed_special_points)[0] | null = null
+    let min_dist = threshold
     for (const point of transformed_special_points) {
-        const dist = Math.hypot(point.svg_x - svg_x, point.svg_y - svg_y);
-        if (dist < min_dist) {
-            min_dist = dist;
-            nearest = point;
-        }
+      const dist = Math.hypot(point.svg_x - svg_x, point.svg_y - svg_y)
+      if (dist < min_dist) {
+        min_dist = dist
+        nearest = point
+      }
     }
-    return nearest;
-}
-// Pointer move handler (unified mouse/touch via Pointer Events API)
-function handle_pointer_move(event) {
-    const svg = event.currentTarget;
-    const rect = svg.getBoundingClientRect();
-    const svg_x = event.clientX - rect.left;
-    const svg_y = event.clientY - rect.top;
+    return nearest
+  }
+
+  // Pointer move handler (unified mouse/touch via Pointer Events API)
+  function handle_pointer_move(event: PointerEvent) {
+    const svg = event.currentTarget as SVGElement
+    const rect = svg.getBoundingClientRect()
+    const svg_x = event.clientX - rect.left
+    const svg_y = event.clientY - rect.top
+
     // Check if within plot area
-    if (svg_x < left || svg_x > right || svg_y < top || svg_y > bottom ||
-        !effective_data) {
-        clear_hover();
-        return;
+    if (
+      svg_x < left || svg_x > right || svg_y < top || svg_y > bottom ||
+      !effective_data
+    ) {
+      clear_hover()
+      return
     }
+
     // Convert to data coordinates and find phase
-    const composition = x_scale.invert(svg_x);
-    const temperature = y_scale.invert(svg_y);
-    const region = find_phase_at_point(composition, temperature, effective_data);
+    const composition = x_scale.invert(svg_x)
+    const temperature = y_scale.invert(svg_y)
+    const region = find_phase_at_point(composition, temperature, effective_data)
+
     // Check for nearby special point
     const nearby_special = show_special_points
-        ? find_nearby_special_point(svg_x, svg_y)
-        : null;
+      ? find_nearby_special_point(svg_x, svg_y)
+      : null
+
     if (region) {
-        hovered_region = region;
-        hover_info = {
-            region,
-            composition,
-            temperature,
-            position: { x: event.clientX, y: event.clientY },
-            lever_rule: calculate_lever_rule(region, composition, temperature) ||
-                undefined,
-            vertical_lever_rule: calculate_vertical_lever_rule(region, composition, temperature) ||
-                undefined,
-            special_point: nearby_special || undefined,
-        };
-        on_phase_hover?.(hover_info);
-    }
-    else {
-        clear_hover();
+      hovered_region = region
+      hover_info = {
+        region,
+        composition,
+        temperature,
+        position: { x: event.clientX, y: event.clientY },
+        lever_rule: calculate_lever_rule(region, composition, temperature) ||
+          undefined,
+        vertical_lever_rule:
+          calculate_vertical_lever_rule(region, composition, temperature) ||
+          undefined,
+        special_point: nearby_special || undefined,
+      }
+      on_phase_hover?.(hover_info)
+    } else {
+      clear_hover()
     }
-}
-function handle_pointer_leave(event) {
+  }
+
+  function handle_pointer_leave(event: PointerEvent) {
     // Don't clear on touch lift (allows reading tooltip) or when locked
-    if (event.pointerType === `touch` || locked_hover_info)
-        return;
-    clear_hover();
-}
-// Document-level keyboard shortcuts
-function handle_doc_keydown(event) {
+    if (event.pointerType === `touch` || locked_hover_info) return
+    clear_hover()
+  }
+
+  // Document-level keyboard shortcuts
+  function handle_doc_keydown(event: KeyboardEvent) {
     if ((event.ctrlKey || event.metaKey) && event.shiftKey && event.key === `E`) {
-        event.preventDefault();
-        export_pane_open = !export_pane_open;
+      event.preventDefault()
+      export_pane_open = !export_pane_open
+    } else if (event.key === `Escape` && locked_hover_info) {
+      locked_hover_info = null
     }
-    else if (event.key === `Escape` && locked_hover_info) {
-        locked_hover_info = null;
-    }
-}
-// SVG keyboard handler (Enter/Space to toggle lock)
-function handle_svg_keydown(event) {
+  }
+
+  // SVG keyboard handler (Enter/Space to toggle lock)
+  function handle_svg_keydown(event: KeyboardEvent) {
     if (event.key === `Enter` || event.key === ` `) {
-        event.preventDefault();
-        handle_click();
+      event.preventDefault()
+      handle_click()
     }
-}
-// Fullscreen handling
-$effect(() => {
-    setup_fullscreen_effect(fullscreen, wrapper);
-    set_fullscreen_bg(wrapper, fullscreen, `--phase-diagram-bg-fullscreen`);
-});
-// Cleanup timeout on unmount to prevent memory leaks
-$effect(() => {
+  }
+
+  // Fullscreen handling
+  $effect(() => {
+    setup_fullscreen_effect(fullscreen, wrapper)
+    set_fullscreen_bg(wrapper, fullscreen, `--phase-diagram-bg-fullscreen`)
+  })
+
+  // Cleanup timeout on unmount to prevent memory leaks
+  $effect(() => {
     return () => {
-        if (copy_feedback_timeout)
-            clearTimeout(copy_feedback_timeout);
-    };
-});
-// Component labels (guard for initial render when data may be undefined)
-const component_a = $derived(effective_data?.components?.[0] ?? ``);
-const component_b = $derived(effective_data?.components?.[1] ?? ``);
-const comp_unit = $derived(effective_data?.composition_unit ?? `at%`);
-// Pseudo-binary support: format compound names with subscripts when enabled
-const use_subscripts = $derived(effective_data?.pseudo_binary?.use_subscripts ?? true);
-// Formatted component labels for SVG axis labels (with tspan subscripts if compound)
-const component_a_svg = $derived(format_formula_svg(component_a, use_subscripts));
-const component_b_svg = $derived(format_formula_svg(component_b, use_subscripts));
-// Default x-axis label as a single string (avoids mixing plain text with {@html})
-const default_x_axis_label = $derived.by(() => {
-    const prefix = comp_unit === `fraction` ? `x ` : ``;
-    const unit = comp_unit === `fraction` ? `mole fraction` : comp_unit;
-    return `${prefix}${component_b_svg} (${unit})`;
-});
+      if (copy_feedback_timeout) clearTimeout(copy_feedback_timeout)
+    }
+  })
+
+  // Component labels (guard for initial render when data may be undefined)
+  const component_a = $derived(effective_data?.components?.[0] ?? ``)
+  const component_b = $derived(effective_data?.components?.[1] ?? ``)
+  const comp_unit = $derived(effective_data?.composition_unit ?? `at%`)
+
+  // Pseudo-binary support: format compound names with subscripts when enabled
+  const use_subscripts = $derived(
+    effective_data?.pseudo_binary?.use_subscripts ?? true,
+  )
+
+  // Formatted component labels for SVG axis labels (with tspan subscripts if compound)
+  const component_a_svg = $derived(format_formula_svg(component_a, use_subscripts))
+  const component_b_svg = $derived(format_formula_svg(component_b, use_subscripts))
+
+  // Default x-axis label as a single string (avoids mixing plain text with {@html})
+  const default_x_axis_label = $derived.by(() => {
+    const prefix = comp_unit === `fraction` ? `x ` : ``
+    const unit = comp_unit === `fraction` ? `mole fraction` : comp_unit
+    return `${prefix}${component_b_svg} (${unit})`
+  })
 </script>
 
 <!-- Grid lines snippet for DRY rendering -->
@@ -568,7 +705,7 @@ const default_x_axis_label = $derived.by(() => {
                   font-weight="500"
                   class="region-label"
                 >
-                  {@html format_label_svg(line, use_subscripts)}
+                  {@html sanitize_svg(format_label_svg(line, use_subscripts))}
                 </text>
               {/each}
             </g>
@@ -686,11 +823,11 @@ const default_x_axis_label = $derived.by(() => {
           font-size={merged_config.font_size + 2}
         >
           {#if x_axis.label}
-            {@html x_axis.label}
+            {@html sanitize_svg(x_axis.label)}
           {:else if effective_data?.x_axis_label}
-            {@html effective_data.x_axis_label}
+            {@html sanitize_svg(effective_data.x_axis_label)}
           {:else}
-            {@html default_x_axis_label}
+            {@html sanitize_svg(default_x_axis_label)}
           {/if}
         </text>
       </g>
@@ -729,9 +866,9 @@ const default_x_axis_label = $derived.by(() => {
           font-size={merged_config.font_size + 2}
         >
           {#if y_axis.label}
-            {@html y_axis.label}
+            {@html sanitize_svg(y_axis.label)}
           {:else if effective_data?.y_axis_label}
-            {@html effective_data.y_axis_label}
+            {@html sanitize_svg(effective_data.y_axis_label)}
           {:else}
             Temperature ({temp_unit})
           {/if}
@@ -748,7 +885,7 @@ const default_x_axis_label = $derived.by(() => {
           font-size={merged_config.font_size + 2}
           font-weight="bold"
         >
-          {@html component_a_svg}
+          {@html sanitize_svg(component_a_svg)}
         </text>
         <text
           x={right}
@@ -758,7 +895,7 @@ const default_x_axis_label = $derived.by(() => {
           font-size={merged_config.font_size + 2}
           font-weight="bold"
         >
-          {@html component_b_svg}
+          {@html sanitize_svg(component_b_svg)}
         </text>
       {/if}
     </svg>