matterviz 0.3.6 → 0.3.7

package/dist/src/lib/phase-diagram/svg-to-diagram.ts

@@ -1,1023 +0,0 @@
-// SVG-to-DiagramInput converter
-// Parses phase diagram SVGs (matplotlib or simple/Gemini format) into DiagramInput JSON
-// for immediate rendering by IsobaricBinaryPhaseDiagram
-
-import type { DiagramInput, DiagramPoint, RegionInput } from './diagram-input'
-
-// Two-phase color keys to cycle through for region assignment
-const TWO_PHASE_COLORS = [
-  `two_phase`,
-  `two_phase_intermetallic`,
-  `two_phase_fcc_liquid`,
-  `two_phase_intermetallic_alt`,
-  `two_phase_alt`,
-  `two_phase_gamma`,
-  `two_phase_mixed`,
-  `two_phase_si`,
-  `two_phase_bcc_liquid`,
-  `two_phase_hcp_liquid`,
-  `two_phase_theta_liquid`,
-  `two_phase_eta`,
-]
-
-// Round to 6 decimal places for clean floating-point output
-const round = (val: number): number => Math.round(val * 1e6) / 1e6
-
-// === Types ===
-
-type SvgFormat = `matplotlib` | `simple` | `mpds`
-
-interface LinearScale {
-  to_data: (px: number) => number
-  domain: [number, number] // [min_data, max_data]
-}
-
-interface Boundary {
-  x1: number // data coordinates
-  y1: number
-  x2: number
-  y2: number
-  orientation: `horizontal` | `vertical`
-}
-
-interface Label {
-  text: string // plain text, e.g. "La2NiO4 + NiO"
-  px_x: number // pixel position
-  px_y: number
-}
-
-// === Format Detection ===
-
-// Detect whether the SVG is matplotlib, MPDS, or simple format
-function detect_format(doc: Document): SvgFormat {
-  // Matplotlib SVGs have xtick/ytick group IDs
-  if (doc.querySelector(`[id^="xtick_"]`) || doc.querySelector(`[id^="ytick_"]`)) {
-    return `matplotlib`
-  }
-  // MPDS SVGs (from CorelDRAW/Inkscape) have sodipodi namespace or inkscape attributes
-  const svg_el = doc.querySelector(`svg`)
-  if (
-    svg_el?.getAttribute(`sodipodi:docname`) ||
-    svg_el?.getAttribute(`inkscape:version`) ||
-    svg_el?.getAttributeNS(`http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd`, `docname`)
-  ) {
-    return `mpds`
-  }
-  return `simple`
-}
-
-// === Axis Scale Extraction ===
-
-// Extract x and y axis scales from tick marks
-function extract_axis_scales(
-  doc: Document,
-  format: SvgFormat,
-): { x_scale: LinearScale; y_scale: LinearScale } {
-  const x_ticks: { px: number; value: number }[] = []
-  const y_ticks: { px: number; value: number }[] = []
-
-  if (format === `matplotlib`) {
-    extract_matplotlib_ticks(doc, x_ticks, y_ticks)
-  } else if (format === `mpds`) {
-    return extract_mpds_scales(doc)
-  } else {
-    extract_simple_ticks(doc, x_ticks, y_ticks)
-  }
-
-  if (x_ticks.length < 2) {
-    throw new Error(`Need at least 2 x-axis ticks, found ${x_ticks.length}`)
-  }
-  if (y_ticks.length < 2) {
-    throw new Error(`Need at least 2 y-axis ticks, found ${y_ticks.length}`)
-  }
-
-  return {
-    x_scale: build_scale(x_ticks),
-    y_scale: build_scale(y_ticks), // y-axis inverted (SVG y down, temp up)
-  }
-}
-
-// Extract ticks from matplotlib SVG (id="xtick_N", comment-based values)
-function extract_matplotlib_ticks(
-  doc: Document,
-  x_ticks: { px: number; value: number }[],
-  y_ticks: { px: number; value: number }[],
-): void {
-  const axes: [string, string, { px: number; value: number }[]][] = [
-    [`xtick_`, `x`, x_ticks],
-    [`ytick_`, `y`, y_ticks],
-  ]
-  for (const [prefix, attr, ticks] of axes) {
-    for (const group of Array.from(doc.querySelectorAll(`[id^="${prefix}"]`))) {
-      const value = extract_comment_number(group)
-      const use_el = group.querySelector(`use`)
-      if (value !== null && use_el) {
-        const px = parse_float_attr(use_el, attr)
-        if (px !== null) ticks.push({ px, value })
-      }
-    }
-  }
-}
-
-// Extract ticks from simple SVG (class-based text elements)
-function extract_simple_ticks(
-  doc: Document,
-  x_ticks: { px: number; value: number }[],
-  y_ticks: { px: number; value: number }[],
-): void {
-  // Y-axis ticks: class="tick-text" with text-anchor: end
-  for (const text_el of Array.from(doc.querySelectorAll(`.tick-text`))) {
-    const value = parseFloat(text_el.textContent?.trim() ?? ``)
-    if (isNaN(value)) continue
-
-    // Find the immediately preceding sibling tick line (not just any line in parent)
-    const tick_line = text_el.previousElementSibling
-    if (!tick_line || !tick_line.matches(`.tick-line, line`)) continue
-    const py = parse_float_attr(tick_line, `y1`)
-    // Apply parent group transform if present
-    const parent = text_el.parentElement
-    const transform_y = get_group_translate(parent, `y`)
-    if (py !== null) y_ticks.push({ px: py + transform_y, value })
-  }
-
-  // X-axis ticks: class="tick-text-x"
-  for (const text_el of Array.from(doc.querySelectorAll(`.tick-text-x`))) {
-    const value = parseFloat(text_el.textContent?.trim() ?? ``)
-    if (isNaN(value)) continue
-
-    const px_x = parse_float_attr(text_el, `x`)
-    // Apply parent group transform if present
-    const parent = text_el.parentElement
-    const transform_x = get_group_translate(parent, `x`)
-    if (px_x !== null) x_ticks.push({ px: px_x + transform_x, value })
-  }
-}
-
-// Extract scales from MPDS SVGs using tick mark paths and text values
-// MPDS SVGs store tick marks as multi-segment paths with major ticks (longer)
-// and minor ticks (shorter). Text values are not positionally useful but
-// tell us the data range.
-function extract_mpds_scales(doc: Document): {
-  x_scale: LinearScale
-  y_scale: LinearScale
-} {
-  // Extract all numeric text values to infer axis ranges
-  const numbers: number[] = []
-  for (const text_el of Array.from(doc.querySelectorAll(`text`))) {
-    const val = parseFloat(text_el.textContent?.trim() ?? ``)
-    if (!isNaN(val)) numbers.push(val)
-  }
-
-  // Separate composition (0-100 at%) from temperature (typically 100-3000)
-  // Note: value 100 appears in both filters (valid as 100 at% and 100°C).
-  // This is intentional — only endpoints are used for scale mapping.
-  const comp_vals = [
-    ...new Set(numbers.filter((value) => value >= 0 && value <= 100 && value % 10 === 0)),
-  ].toSorted((a, b) => a - b)
-  const temp_vals = [
-    ...new Set(numbers.filter((value) => value >= 100 && value % 100 === 0 && value <= 3000)),
-  ].toSorted((a, b) => a - b)
-
-  if (comp_vals.length < 2 || temp_vals.length < 2) {
-    throw new Error(
-      `MPDS SVG: could not infer axis ranges (found ${comp_vals.length} composition, ${temp_vals.length} temperature values)`,
-    )
-  }
-
-  // Find tick mark paths — multi-segment paths with stroke-width ~0.5
-  // containing both major (longer) and minor (shorter) tick marks
-  const x_major_ticks: number[] = []
-  const y_major_ticks: number[] = []
-
-  for (const path of Array.from(doc.querySelectorAll(`path`))) {
-    const path_data = path.getAttribute(`d`) ?? ``
-    const stroke_width = parse_stroke_width(path)
-
-    // Tick mark paths have stroke-width ~0.5
-    if (stroke_width < 0.3 || stroke_width > 1.0) continue
-
-    // Parse path into absolute line segments (handles both absolute & relative commands)
-    const segments = parse_path_segments(path_data)
-    if (segments.length < 3) continue
-
-    for (const [sx1, sy1, sx2, sy2] of segments) {
-      const seg_dx = Math.abs(sx2 - sx1)
-      const seg_dy = Math.abs(sy2 - sy1)
-
-      // Major ticks are longer (~3.9 px), minor are shorter (~1.7 px)
-      if (Math.hypot(seg_dx, seg_dy) < 3) continue
-
-      // Horizontal tick segments → y-axis tick (x changes, y constant)
-      if (seg_dy < 0.1 && seg_dx > 2) {
-        y_major_ticks.push(Math.round(sy1 * 100) / 100)
-      }
-      // Vertical tick segments → x-axis tick (y changes, x constant)
-      if (seg_dx < 0.1 && seg_dy > 2) {
-        x_major_ticks.push(Math.round(sx1 * 100) / 100)
-      }
-    }
-  }
-
-  // Deduplicate and sort
-  const x_ticks_sorted = [
-    ...new Set(x_major_ticks.map((value) => Math.round(value * 10) / 10)),
-  ].toSorted((a, b) => a - b)
-  const y_ticks_sorted = [
-    ...new Set(y_major_ticks.map((value) => Math.round(value * 10) / 10)),
-  ].toSorted((a, b) => a - b)
-
-  if (x_ticks_sorted.length < 2 || y_ticks_sorted.length < 2) {
-    throw new Error(
-      `MPDS SVG: could not find tick marks (found ${x_ticks_sorted.length} x-ticks, ${y_ticks_sorted.length} y-ticks)`,
-    )
-  }
-
-  // Map tick positions to data values using endpoints
-  // Only the first and last tick+value need to match for a linear scale
-  // x-axis: composition in at% → fraction; y-axis: temperature (SVG y inverted)
-  const x_ticks = [
-    { px: x_ticks_sorted[0], value: comp_vals[0] / 100 },
-    {
-      px: x_ticks_sorted[x_ticks_sorted.length - 1],
-      value: comp_vals[comp_vals.length - 1] / 100,
-    },
-  ]
-  const y_ticks = [
-    { px: y_ticks_sorted[0], value: temp_vals[temp_vals.length - 1] }, // top = highest temp
-    { px: y_ticks_sorted[y_ticks_sorted.length - 1], value: temp_vals[0] }, // bottom = lowest temp
-  ]
-
-  return {
-    x_scale: build_scale(x_ticks),
-    y_scale: build_scale(y_ticks),
-  }
-}
-
-// Build a linear scale from tick data points
-function build_scale(ticks: { px: number; value: number }[]): LinearScale {
-  ticks.sort((a, b) => a.value - b.value)
-  const first = ticks[0]
-  const last = ticks[ticks.length - 1]
-
-  const range = last.value - first.value
-  if (range === 0) {
-    return { to_data: () => first.value, domain: [first.value, last.value] }
-  }
-  const px_per_unit = (last.px - first.px) / range
-
-  return {
-    to_data: (px: number) => first.value + (px - first.px) / px_per_unit,
-    domain: [first.value, last.value],
-  }
-}
-
-// === Boundary Extraction ===
-
-// Extract phase boundary lines from SVG and convert to data coordinates
-function extract_boundaries(
-  doc: Document,
-  format: SvgFormat,
-  x_scale: LinearScale,
-  y_scale: LinearScale,
-): Boundary[] {
-  const boundaries: Boundary[] = []
-  const epsilon = 0.5 // pixel tolerance for classifying horizontal/vertical
-
-  if (format === `mpds`) {
-    extract_mpds_boundaries(doc, boundaries, x_scale, y_scale, epsilon)
-  } else if (format === `matplotlib`) {
-    // Matplotlib: look for line2d_N groups with path elements (skip tick marks at line2d_1..12ish)
-    for (const group of Array.from(doc.querySelectorAll(`[id^="line2d_"]`))) {
-      const path_el = group.querySelector(`path`)
-      if (!path_el) continue
-
-      const d_attr = path_el.getAttribute(`d`)
-      if (!d_attr) continue
-
-      // Parse "M x1 y1 L x2 y2" path data
-      const coords = parse_ml_path(d_attr)
-      if (!coords) continue
-
-      // Skip tick mark lines (short lines, typically < 10px)
-      const dx = Math.abs(coords.x2 - coords.x1)
-      const dy = Math.abs(coords.y2 - coords.y1)
-      if (dx < 15 && dy < 15) continue
-
-      // Check stroke-width to distinguish boundaries from axis lines
-      const stroke_width = parse_stroke_width(path_el) || 1
-
-      // Axis patches (id="patch_*") are axis borders, not phase boundaries
-      const parent_id = group.getAttribute(`id`) ?? ``
-      if (parent_id.startsWith(`patch_`)) continue
-
-      // Only include lines with meaningful stroke
-      if (stroke_width < 1) continue
-
-      add_boundary(boundaries, coords, x_scale, y_scale, epsilon)
-    }
-  } else {
-    // Simple: <line class="phase-boundary">
-    for (const line_el of Array.from(
-      doc.querySelectorAll(`.phase-boundary, line[class*="phase-boundary"]`),
-    )) {
-      const x1 = parse_float_attr(line_el, `x1`)
-      const y1 = parse_float_attr(line_el, `y1`)
-      const x2 = parse_float_attr(line_el, `x2`)
-      const y2 = parse_float_attr(line_el, `y2`)
-      if (x1 === null || y1 === null || x2 === null || y2 === null) continue
-
-      add_boundary(boundaries, { x1, y1, x2, y2 }, x_scale, y_scale, epsilon)
-    }
-  }
-
-  return boundaries
-}
-
-// Extract boundaries from MPDS SVGs — simple M x1,y1 L x2,y2 path elements
-// inside the plot area with thin stroke (0.216) and dark color
-function extract_mpds_boundaries(
-  doc: Document,
-  boundaries: Boundary[],
-  x_scale: LinearScale,
-  y_scale: LinearScale,
-  epsilon: number,
-): void {
-  // Find the plot border to filter boundaries inside it
-  const plot_rect = find_mpds_plot_rect(doc)
-  if (!plot_rect) return
-
-  const { left, right, top, bottom } = plot_rect
-
-  for (const path of Array.from(doc.querySelectorAll(`path`))) {
-    const path_data = path.getAttribute(`d`) ?? ``
-    const style = path.getAttribute(`style`) ?? ``
-
-    // Skip tick mark paths (stroke-width > 0.3)
-    const stroke_width = parse_stroke_width(path)
-    if (stroke_width > 0.3 || stroke_width === 0) continue
-
-    // Skip filled regions (phase region fills)
-    if (
-      (style.includes(`fill-rule`) || style.includes(`fill: #`) || style.includes(`fill:#`)) &&
-      !style.includes(`fill: none`) &&
-      !style.includes(`fill:none`)
-    ) {
-      continue
-    }
-
-    // Skip red annotation lines
-    if (style.includes(`#e30016`) || style.includes(`#E30016`)) continue
-
-    // Parse as simple M...L line
-    const coords = parse_ml_path(path_data)
-    if (!coords) continue
-
-    // Must be inside the plot area
-    const inside =
-      coords.x1 >= left - 1 &&
-      coords.x1 <= right + 1 &&
-      coords.x2 >= left - 1 &&
-      coords.x2 <= right + 1 &&
-      coords.y1 >= top - 1 &&
-      coords.y1 <= bottom + 1 &&
-      coords.y2 >= top - 1 &&
-      coords.y2 <= bottom + 1
-    if (!inside) continue
-
-    // Skip very short segments (< 10px)
-    const dx = Math.abs(coords.x2 - coords.x1)
-    const dy = Math.abs(coords.y2 - coords.y1)
-    if (dx < 10 && dy < 10) continue
-
-    // Skip the plot border itself (connects all 4 edges)
-    const touches_left = Math.abs(coords.x1 - left) < 2 || Math.abs(coords.x2 - left) < 2
-    const touches_right = Math.abs(coords.x1 - right) < 2 || Math.abs(coords.x2 - right) < 2
-    if (touches_left && touches_right) continue // spans full width = likely axis
-
-    add_boundary(boundaries, coords, x_scale, y_scale, epsilon)
-  }
-}
-
-// Find the plot area rectangle in an MPDS SVG
-// Handles both M...L...L...L...Z and M...V...H...V...Z formats
-function find_mpds_plot_rect(
-  doc: Document,
-): { left: number; right: number; top: number; bottom: number } | null {
-  for (const path of Array.from(doc.querySelectorAll(`path`))) {
-    const path_data = path.getAttribute(`d`) ?? ``
-    const style = path.getAttribute(`style`) ?? ``
-    if (!style.includes(`fill: none`) && !style.includes(`fill:none`)) continue
-    if (!path_data.includes(`Z`) && !path_data.includes(`z`)) continue
-
-    // Parse path into absolute segments and extract corner points
-    const segments = parse_path_segments(path_data)
-    if (segments.length < 3) continue // rectangle needs at least 3 segments (4th is Z)
-
-    // Collect all x and y coordinates from segment endpoints
-    const xs: number[] = []
-    const ys: number[] = []
-    for (const [x1, y1, x2, y2] of segments) {
-      xs.push(Math.round(x1 * 10) / 10, Math.round(x2 * 10) / 10)
-      ys.push(Math.round(y1 * 10) / 10, Math.round(y2 * 10) / 10)
-    }
-
-    const unique_x = [...new Set(xs)]
-    const unique_y = [...new Set(ys)]
-
-    // Rectangle has exactly 2 unique x and 2 unique y values
-    if (unique_x.length === 2 && unique_y.length === 2) {
-      return {
-        left: Math.min(...unique_x),
-        right: Math.max(...unique_x),
-        top: Math.min(...unique_y),
-        bottom: Math.max(...unique_y),
-      }
-    }
-  }
-  return null
-}
-
-// Add a boundary line, classifying as horizontal or vertical
-function add_boundary(
-  boundaries: Boundary[],
-  px: { x1: number; y1: number; x2: number; y2: number },
-  x_scale: LinearScale,
-  y_scale: LinearScale,
-  epsilon: number,
-): void {
-  const is_vertical = Math.abs(px.x1 - px.x2) < epsilon
-  const is_horizontal = Math.abs(px.y1 - px.y2) < epsilon
-
-  if (!is_vertical && !is_horizontal) return // skip diagonal lines
-
-  const data_x1 = x_scale.to_data(px.x1)
-  const data_y1 = y_scale.to_data(px.y1)
-  const data_x2 = x_scale.to_data(px.x2)
-  const data_y2 = y_scale.to_data(px.y2)
-
-  boundaries.push({
-    x1: Math.min(data_x1, data_x2),
-    y1: Math.min(data_y1, data_y2),
-    x2: Math.max(data_x1, data_x2),
-    y2: Math.max(data_y1, data_y2),
-    orientation: is_vertical ? `vertical` : `horizontal`,
-  })
-}
-
-// === Label Extraction ===
-
-// Extract phase region labels with their pixel positions
-function extract_labels(doc: Document, format: SvgFormat): Label[] {
-  const labels: Label[] = []
-
-  if (format === `matplotlib`) {
-    extract_matplotlib_labels(doc, labels)
-  } else if (format === `mpds`) {
-    // MPDS labels use garbled encoding; skip label extraction
-    // Regions will get auto-generated names from infer_regions
-  } else {
-    extract_simple_labels(doc, labels)
-  }
-
-  return labels
-}
-
-// Extract labels from matplotlib SVG using XML comments
-function extract_matplotlib_labels(doc: Document, labels: Label[]): void {
-  // Find text groups with comments containing phase names
-  // Matplotlib may split multi-line labels (especially rotated ones) into
-  // separate <g> groups: text_N has "La$_2$NiO$_4$", followed by a sibling
-  // with "+ La$_3$Ni$_2$O$_7$". We concatenate these continuation groups.
-  for (const group of Array.from(doc.querySelectorAll(`[id^="text_"]`))) {
-    let comment = find_comment_text(group)
-    if (!comment) continue
-
-    // Check following sibling groups for continuation comments starting with "+"
-    let sibling = group.nextElementSibling
-    while (sibling) {
-      // Stop at the next text_N group (that's a separate label)
-      if (sibling.id?.startsWith(`text_`)) break
-      const continuation = find_comment_text(sibling)
-      if (continuation?.trimStart().startsWith(`+`)) {
-        comment += ` ${continuation.trim()}`
-        sibling = sibling.nextElementSibling
-      } else {
-        break
-      }
-    }
-
-    if (!comment.includes(`+`)) continue // skip axis labels (no "+")
-
-    // Clean LaTeX: "La$_2$NiO$_4$ + NiO" -> "La2NiO4 + NiO"
-    const text = clean_latex(comment.trim())
-
-    // Get position from transform="translate(x, y)"
-    const pos = parse_translate(group.querySelector(`g[transform]`)) ?? parse_translate(group)
-    if (!pos) continue
-
-    labels.push({ text, px_x: pos[0], px_y: pos[1] })
-  }
-}
-
-// Extract labels from simple SVG using class="label-main"
-function extract_simple_labels(doc: Document, labels: Label[]): void {
-  for (const text_el of Array.from(doc.querySelectorAll(`.label-main`))) {
-    // Get plain text content (strips tspan tags)
-    const text = (text_el.textContent ?? ``).replaceAll(/\s+/g, ` `).trim()
-    if (!text.includes(`+`)) continue // skip non-phase labels
-
-    // Get position from transform or x/y attributes
-    const pos = parse_translate(text_el)
-    const px_x = pos?.[0] ?? parse_float_attr(text_el, `x`)
-    const px_y = pos?.[1] ?? parse_float_attr(text_el, `y`)
-
-    if (px_x !== null && px_y !== null) {
-      labels.push({ text, px_x, px_y })
-    }
-  }
-}
-
-// === Component Inference ===
-
-const split_phase_label = (label: Label) => label.text.split(/\s*\+\s*/)
-
-// Infer binary components from region labels
-function infer_components(labels: Label[]): [string, string] {
-  // Sort labels by x position, split each into phases
-  const sorted = labels.toSorted((a, b) => a.px_x - b.px_x)
-  if (sorted.length < 2) return [`A`, `B`]
-
-  const leftmost = split_phase_label(sorted[0])
-  const rightmost = split_phase_label(sorted[sorted.length - 1])
-
-  // Component A: the unique phase in the leftmost region that doesn't appear on the right
-  // For "La2NiO4 + La2O3", La2O3 is the pure A endpoint
-  let comp_a = `A`
-  if (leftmost.length === 2) {
-    const right_phases = new Set(sorted.slice(-3).flatMap(split_phase_label))
-    comp_a = leftmost.find((phase) => !right_phases.has(phase)) ?? leftmost[1] ?? `A`
-  }
-
-  // Component B: the unique phase in the rightmost region that doesn't appear on the left
-  let comp_b = `B`
-  if (rightmost.length === 2) {
-    const left_phases = new Set(sorted.slice(0, 3).flatMap(split_phase_label))
-    comp_b = rightmost.find((phase) => !left_phases.has(phase)) ?? rightmost[1] ?? `B`
-  }
-
-  return [comp_a, comp_b]
-}
-
-// === Region Inference ===
-
-// Infer phase regions from orthogonal boundaries using flood-fill on a cell grid
-function infer_regions(
-  boundaries: Boundary[],
-  labels: Label[],
-  x_scale: LinearScale,
-  y_scale: LinearScale,
-): RegionInput[] {
-  const verticals = boundaries.filter((boundary) => boundary.orientation === `vertical`)
-  const horizontals = boundaries.filter((boundary) => boundary.orientation === `horizontal`)
-
-  // Collect all unique x and y coordinates (boundaries + domain edges)
-  const x_coords = collect_unique_sorted([
-    x_scale.domain[0],
-    x_scale.domain[1],
-    ...verticals.map((boundary) => boundary.x1), // x1 === x2 for vertical
-  ])
-
-  const y_coords = collect_unique_sorted([
-    y_scale.domain[0],
-    y_scale.domain[1],
-    ...horizontals.map((boundary) => boundary.y1), // y1 === y2 for horizontal
-  ])
-
-  // Build cell grid: cells[col][row]
-  const n_cols = x_coords.length - 1
-  const n_rows = y_coords.length - 1
-  const cell_ids = Array.from({ length: n_cols }, () => Array(n_rows).fill(-1))
-
-  // Check which cell edges have boundaries
-  const h_walls = Array.from({ length: n_cols }, () => Array(n_rows + 1).fill(false))
-  const v_walls = Array.from({ length: n_cols + 1 }, () => Array(n_rows).fill(false))
-
-  // Mark horizontal walls (bottom/top of cells)
-  for (const hb of horizontals) {
-    const row = find_coord_index(y_coords, hb.y1)
-    if (row === -1) continue
-    for (let col = 0; col < n_cols; col++) {
-      const cell_x_min = x_coords[col]
-      const cell_x_max = x_coords[col + 1]
-      // Check if the boundary spans this cell's x range
-      if (hb.x1 <= cell_x_min + 1e-6 && hb.x2 >= cell_x_max - 1e-6) {
-        h_walls[col][row] = true
-      }
-    }
-  }
-
-  // Mark vertical walls (left/right of cells)
-  for (const vb of verticals) {
-    const col = find_coord_index(x_coords, vb.x1)
-    if (col === -1) continue
-    for (let row = 0; row < n_rows; row++) {
-      const cell_y_min = y_coords[row]
-      const cell_y_max = y_coords[row + 1]
-      // Check if the boundary spans this cell's y range
-      if (vb.y1 <= cell_y_min + 1e-6 && vb.y2 >= cell_y_max - 1e-6) {
-        v_walls[col][row] = true
-      }
-    }
-  }
-
-  // Plot edges are always walls
-  for (let col = 0; col < n_cols; col++) {
-    h_walls[col][0] = true // bottom edge
-    h_walls[col][n_rows] = true // top edge
-  }
-  for (let row = 0; row < n_rows; row++) {
-    v_walls[0][row] = true // left edge
-    v_walls[n_cols][row] = true // right edge
-  }
-
-  // Flood-fill to assign region IDs
-  let next_region_id = 0
-  for (let col = 0; col < n_cols; col++) {
-    for (let row = 0; row < n_rows; row++) {
-      if (cell_ids[col][row] !== -1) continue
-      flood_fill(cell_ids, h_walls, v_walls, col, row, n_cols, n_rows, next_region_id)
-      next_region_id++
-    }
-  }
-
-  // Assign labels to regions by checking which region contains each label's position
-  const region_labels = new Map<number, string>()
-  for (const label of labels) {
-    const data_x = x_scale.to_data(label.px_x)
-    const data_y = y_scale.to_data(label.px_y)
-
-    const col = find_cell_index(x_coords, data_x)
-    const row = find_cell_index(y_coords, data_y)
-    if (col >= 0 && col < n_cols && row >= 0 && row < n_rows) {
-      const region_id = cell_ids[col][row]
-      if (region_id !== -1) {
-        region_labels.set(region_id, label.text)
-      }
-    }
-  }
-
-  // Build region polygons from merged cells
-  const regions: RegionInput[] = []
-  for (let region_id = 0; region_id < next_region_id; region_id++) {
-    const name = region_labels.get(region_id) ?? `Region ${region_id + 1}`
-    // Slug can be empty for non-ASCII labels like "α + β" — fall back to region_N
-    const slug =
-      name
-        .toLowerCase()
-        .replaceAll(/[^a-z0-9]+/g, `_`)
-        .replaceAll(/^_|_$/g, ``) || `region_${region_id + 1}`
-
-    // Find bounding box of all cells in this region
-    let [min_x, max_x] = [Infinity, -Infinity]
-    let [min_y, max_y] = [Infinity, -Infinity]
-    for (let col = 0; col < n_cols; col++) {
-      for (let row = 0; row < n_rows; row++) {
-        if (cell_ids[col][row] !== region_id) continue
-        min_x = Math.min(min_x, x_coords[col])
-        max_x = Math.max(max_x, x_coords[col + 1])
-        min_y = Math.min(min_y, y_coords[row])
-        max_y = Math.max(max_y, y_coords[row + 1])
-      }
-    }
-
-    if (min_x === Infinity) continue
-
-    const bounds: DiagramPoint[] = [
-      [round(min_x), round(min_y)],
-      [round(max_x), round(min_y)],
-      [round(max_x), round(max_y)],
-      [round(min_x), round(max_y)],
-    ]
-
-    regions.push({
-      id: slug,
-      name,
-      color: TWO_PHASE_COLORS[region_id % TWO_PHASE_COLORS.length],
-      bounds,
-    })
-  }
-
-  return regions
-}
-
-// Flood-fill connected cells that share an open edge
-function flood_fill(
-  cell_ids: number[][],
-  h_walls: boolean[][],
-  v_walls: boolean[][],
-  start_col: number,
-  start_row: number,
-  n_cols: number,
-  n_rows: number,
-  region_id: number,
-): void {
-  const stack: [number, number][] = [[start_col, start_row]]
-
-  for (let item = stack.pop(); item; item = stack.pop()) {
-    const [col, row] = item
-    if (col < 0 || col >= n_cols || row < 0 || row >= n_rows) continue
-    if (cell_ids[col][row] !== -1) continue
-
-    cell_ids[col][row] = region_id
-
-    // Check neighbors (no wall between them)
-    // Left neighbor: check v_walls[col][row]
-    if (col > 0 && !v_walls[col][row]) stack.push([col - 1, row])
-    // Right neighbor: check v_walls[col+1][row]
-    if (col < n_cols - 1 && !v_walls[col + 1][row]) stack.push([col + 1, row])
-    // Bottom neighbor: check h_walls[col][row]
-    if (row > 0 && !h_walls[col][row]) stack.push([col, row - 1])
-    // Top neighbor: check h_walls[col][row+1]
-    if (row < n_rows - 1 && !h_walls[col][row + 1]) stack.push([col, row + 1])
-  }
-}
-
-// === Curve Generation ===
-
-// Generate named curves from boundaries for the DiagramInput format
-function generate_curves(boundaries: Boundary[]): Record<string, DiagramPoint[]> {
-  const curves: Record<string, DiagramPoint[]> = {}
-  const counts = { vertical: 0, horizontal: 0 }
-
-  for (const bnd of boundaries) {
-    const is_vert = bnd.orientation === `vertical`
-    const name = `${bnd.orientation}_${counts[bnd.orientation]++}`
-    curves[name] = [
-      [round(bnd.x1), round(bnd.y1)],
-      [round(is_vert ? bnd.x1 : bnd.x2), round(is_vert ? bnd.y2 : bnd.y1)],
-    ]
-  }
-
-  return curves
-}
-
-// === Main Entry Point ===
-
-// Parse a phase diagram SVG string and return a DiagramInput
-export function parse_phase_diagram_svg(svg_string: string): DiagramInput {
-  const parser = new DOMParser()
-  const doc = parser.parseFromString(svg_string, `image/svg+xml`)
-
-  // Check for parse errors
-  const parse_error = doc.querySelector(`parsererror`)
-  if (parse_error) {
-    throw new Error(`Invalid SVG: ${parse_error.textContent}`)
-  }
-
-  const format = detect_format(doc)
-  const { x_scale, y_scale } = extract_axis_scales(doc, format)
-  const boundaries = extract_boundaries(doc, format, x_scale, y_scale)
-  const labels = extract_labels(doc, format)
-  const components = format === `mpds` ? infer_mpds_components(doc) : infer_components(labels)
-
-  if (boundaries.length === 0) {
-    throw new Error(`No phase boundaries found in SVG`)
-  }
-
-  const regions = infer_regions(boundaries, labels, x_scale, y_scale)
-  const curves = generate_curves(boundaries)
-
-  // MPDS SVGs use °C for temperature
-  const temp_unit = format === `mpds` ? `°C` : `K`
-
-  return {
-    meta: {
-      components,
-      temp_range: y_scale.domain,
-      temp_unit,
-      comp_unit: `fraction`,
-      title: `Imported Phase Diagram`,
-    },
-    curves,
-    regions,
-  }
-}
-
-// Infer components from MPDS SVGs by finding element-like text content
-// MPDS SVGs have readable element names as text (e.g., "Cu", "Si")
-function infer_mpds_components(doc: Document): [string, string] {
-  const elements = new Set<string>()
-  for (const text_el of Array.from(doc.querySelectorAll(`text`))) {
-    const content = text_el.textContent?.trim() ?? ``
-    // Match single/two-letter element symbols, exclude common non-element text
-    if (/^[A-Z][a-z]?$/.test(content) && content !== `L` && content !== `M`) {
-      elements.add(content)
-    }
-  }
-  const unique = [...elements]
-  return [unique[0] ?? `A`, unique[1] ?? `B`]
-}
-
-// === Utility Functions ===
-
-// Parse stroke-width from style attribute or direct attribute (returns 0 if not found)
-function parse_stroke_width(el: Element): number {
-  const style_match = /stroke-width:\s*([\d.]+)/.exec(el.getAttribute(`style`) ?? ``)
-  if (style_match) return parseFloat(style_match[1])
-  const attr = el.getAttribute(`stroke-width`)
-  return attr ? parseFloat(attr) || 0 : 0
-}
-
-// Parse a float attribute from an SVG element
-function parse_float_attr(el: Element, attr: string): number | null {
-  const val = el.getAttribute(attr)
-  if (val === null) return null
-  const parsed = parseFloat(val)
-  return isNaN(parsed) ? null : parsed
-}
-
-// Extract a number from XML comment nodes inside a group element
-function extract_comment_number(group: Element): number | null {
-  const walker = group.ownerDocument.createTreeWalker(group, NodeFilter.SHOW_COMMENT)
-  let node: Comment | null
-  while ((node = walker.nextNode() as Comment | null)) {
-    const value = parseFloat(node.textContent?.trim() ?? ``)
-    if (!isNaN(value)) return value
-  }
-  return null
-}
-
-// Find the first XML comment text inside or preceding a group
-function find_comment_text(group: Element): string | null {
-  // Check comment nodes inside the group
-  const walker = group.ownerDocument.createTreeWalker(group, NodeFilter.SHOW_COMMENT)
-  let node: Comment | null
-  while ((node = walker.nextNode() as Comment | null)) {
-    const text = node.textContent?.trim()
-    if (text && text.length > 1) return text
-  }
-
-  // Check preceding sibling comments
-  let sibling = group.previousSibling
-  while (sibling) {
-    if (sibling.nodeType === Node.COMMENT_NODE) {
-      const text = sibling.textContent?.trim()
-      if (text && text.length > 1) return text
-    }
-    if (sibling.nodeType === Node.ELEMENT_NODE) break // stop at previous element
-    sibling = sibling.previousSibling
-  }
-
-  return null
-}
-
-// Clean LaTeX subscript notation: "La$_2$NiO$_4$" -> "La2NiO4"
-const clean_latex = (text: string): string =>
-  text
-    .replaceAll(/\$_\{([^}]*)\}\$/g, `$1`) // $_{10}$ -> 10
-    .replaceAll(/\$_(\d)\$/g, `$1`) // $_2$ -> 2
-    .replaceAll(`$`, ``) // remove any remaining $
-    .replaceAll(/\s+/g, ` `)
-    .trim()
-
-// Parse SVG path data into absolute line segments [x1,y1,x2,y2]
-// Handles all SVG path commands (M/L/H/V/C/S/Q/T/A/Z, both absolute and relative)
-// Curves (C/S/Q/T/A) are approximated as straight lines from start to endpoint
-// After M/m, implicit coordinates are treated as L/l per SVG spec
-function parse_path_segments(path_str: string): [number, number, number, number][] {
-  const segments: [number, number, number, number][] = []
-  let [cursor_x, cursor_y] = [0, 0]
-  let [start_x, start_y] = [0, 0]
-  let last_cmd = ``
-
-  // Numbers to skip before the endpoint x,y for each curve command
-  const curve_skip: Record<string, number> = { C: 4, S: 2, Q: 2, T: 0, A: 5 }
-  const tokens = path_str.match(/[MmLlHhVvCcSsQqTtAaZz]|[-+]?[\d]*\.?[\d]+(?:[eE][-+]?\d+)?/g)
-  if (!tokens) return segments
-
-  let idx = 0
-  const peek = () => tokens[idx]
-  const next_num = () => parseFloat(tokens[idx++] ?? `0`)
-
-  while (idx < tokens.length) {
-    let cmd = peek() ?? ``
-
-    if (cmd.length === 1 && /[A-Za-z]/.test(cmd)) {
-      idx++
-      last_cmd = cmd
-    } else {
-      // Implicit repeat: after M→L, after m→l, others repeat themselves
-      cmd = last_cmd === `M` ? `L` : last_cmd === `m` ? `l` : last_cmd
-    }
-
-    if (cmd === `M` || cmd === `m`) {
-      const next_x = next_num()
-      const next_y = next_num()
-      cursor_x = cmd === `M` ? next_x : cursor_x + next_x
-      cursor_y = cmd === `M` ? next_y : cursor_y + next_y
-      start_x = cursor_x
-      start_y = cursor_y
-      last_cmd = cmd
-    } else if (cmd === `L` || cmd === `l`) {
-      const next_x = next_num()
-      const next_y = next_num()
-      const x2 = cmd === `L` ? next_x : cursor_x + next_x
-      const y2 = cmd === `L` ? next_y : cursor_y + next_y
-      segments.push([cursor_x, cursor_y, x2, y2])
-      cursor_x = x2
-      cursor_y = y2
-    } else if (cmd === `H` || cmd === `h`) {
-      const next_x = next_num()
-      const x2 = cmd === `H` ? next_x : cursor_x + next_x
-      segments.push([cursor_x, cursor_y, x2, cursor_y])
-      cursor_x = x2
-    } else if (cmd === `V` || cmd === `v`) {
-      const next_y = next_num()
-      const y2 = cmd === `V` ? next_y : cursor_y + next_y
-      segments.push([cursor_x, cursor_y, cursor_x, y2])
-      cursor_y = y2
-    } else if (cmd === `Z` || cmd === `z`) {
-      if (cursor_x !== start_x || cursor_y !== start_y) {
-        segments.push([cursor_x, cursor_y, start_x, start_y])
-      }
-      cursor_x = start_x
-      cursor_y = start_y
-    } else {
-      // Curve commands: skip control/arc params, use endpoint as straight line
-      // C=4 skip, S=2, Q=2, T=0, A=5 (numbers before the final x,y endpoint)
-      const upper = cmd.toUpperCase()
-      const skip = curve_skip[upper]
-      if (skip !== undefined) {
-        for (let skip_idx = 0; skip_idx < skip; skip_idx++) next_num()
-        const end_x = next_num()
-        const end_y = next_num()
-        const x2 = cmd === upper ? end_x : cursor_x + end_x
-        const y2 = cmd === upper ? end_y : cursor_y + end_y
-        segments.push([cursor_x, cursor_y, x2, y2])
-        cursor_x = x2
-        cursor_y = y2
-      } else {
-        idx++ // skip unknown tokens
-      }
-    }
-  }
-  return segments
-}
-
-// Parse a simple 2-point line path (M...L only). Returns null for multi-segment paths
-// to enforce the single-line contract expected by boundary extraction.
-function parse_ml_path(
-  path_str: string,
-): { x1: number; y1: number; x2: number; y2: number } | null {
-  const segments = parse_path_segments(path_str)
-  if (segments.length !== 1) return null
-  const [x1, y1, x2, y2] = segments[0]
-  return { x1, y1, x2, y2 }
-}
-
-// Parse translate(x, y) or translate(x) from a transform attribute
-// Single-arg translate uses implicit y=0 per SVG spec
-function parse_translate(el: Element | null): [number, number] | null {
-  const match = /translate\(\s*([\d.eE+-]+)(?:\s*[,\s]\s*([\d.eE+-]+))?\s*\)/.exec(
-    el?.getAttribute(`transform`) ?? ``,
-  )
-  if (!match) return null
-  return [parseFloat(match[1]), match[2] ? parseFloat(match[2]) : 0]
-}
-
-// Get translate X or Y from a group's transform attribute
-function get_group_translate(el: Element | null, axis: `x` | `y`): number {
-  const coords = parse_translate(el)
-  return coords ? coords[axis === `x` ? 0 : 1] : 0
-}
-
-// Collect unique sorted values from an array (with epsilon deduplication)
-function collect_unique_sorted(values: number[]): number[] {
-  if (values.length === 0) return []
-  const sorted = values.toSorted((a, b) => a - b)
-  const unique: number[] = [sorted[0]]
-  for (let idx = 1; idx < sorted.length; idx++) {
-    if (Math.abs(sorted[idx] - unique[unique.length - 1]) > 1e-4) {
-      unique.push(sorted[idx])
-    }
-  }
-  return unique
-}
-
-// Find the index of a coordinate in a sorted array (with epsilon tolerance)
-function find_coord_index(coords: number[], value: number): number {
-  for (let idx = 0; idx < coords.length; idx++) {
-    if (Math.abs(coords[idx] - value) < 1e-4) return idx
-  }
-  return -1
-}
-
-// Find which cell interval a value falls into
-function find_cell_index(coords: number[], value: number): number {
-  for (let idx = 0; idx < coords.length - 1; idx++) {
-    if (value >= coords[idx] - 1e-4 && value <= coords[idx + 1] + 1e-4) {
-      return idx
-    }
-  }
-  return -1
-}