matterviz 0.3.1 → 0.3.3

package/dist/phase-diagram/IsobaricBinaryPhaseDiagram.svelte

@@ -1,240 +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 PhaseDiagramControls from './PhaseDiagramControls.svelte';
-import PhaseDiagramExportPane from './PhaseDiagramExportPane.svelte';
-import PhaseDiagramTooltip from './PhaseDiagramTooltip.svelte';
-import { calculate_lever_rule, compute_label_properties, convert_temp, find_phase_at_point, format_composition, format_formula_svg, format_hover_info_text, 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`, x_axis = $bindable({}), y_axis = $bindable({}), tooltip, children, ...rest } = $props();
-// 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);
-// Scales
-const x_scale = $derived(scaleLinear().domain([0, 1]).range([left, right]));
-// Temperature units (guard for initial render when data may be undefined)
-const data_temp_unit = $derived((data?.temperature_unit ?? `K`));
-const temp_unit = $derived(display_temp_unit ?? data_temp_unit);
-const temp_range = $derived(data?.temperature_range ?? [0, 1000]);
-// Convert temperature range for display
-const display_temp_range = $derived([
+<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)
+    } catch (error) {
+      console.warn(`Failed to rebuild diagram from input:`, error)
+      return null
+    }
+  })
+
+  // 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.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_tick_count = $derived(typeof x_axis.ticks === `number` ? x_axis.ticks : 5);
-const y_tick_count = $derived(typeof y_axis.ticks === `number` ? y_axis.ticks : 6);
-const x_ticks = $derived(x_scale.ticks(x_tick_count));
-// Use display scale for y ticks so they show converted temperatures
-const y_ticks = $derived(y_scale_display.ticks(y_tick_count));
-// Transform regions to SVG coordinates
-const transformed_regions = $derived((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((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((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));
-        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 (err) {
-        console.error(`Failed to copy phase data:`, err);
+      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)
     }
-}
-// 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 || !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, 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,
-            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;
-    }
-    else if (event.key === `Escape` && locked_hover_info) {
-        locked_hover_info = null;
+      event.preventDefault()
+      export_pane_open = !export_pane_open
+    } 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(data?.components?.[0] ?? ``);
-const component_b = $derived(data?.components?.[1] ?? ``);
-const comp_unit = $derived(data?.composition_unit ?? `at%`);
-// Pseudo-binary support: format compound names with subscripts when enabled
-const use_subscripts = $derived(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));
-// Custom axis labels from data (for pseudo-binary or special cases)
-const data_x_axis_label = $derived(data?.x_axis_label);
-const data_y_axis_label = $derived(data?.y_axis_label);
-// 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 -->
@@ -251,6 +486,50 @@ const default_x_axis_label = $derived.by(() => {
   {/each}
 {/snippet}
 
+<!-- Tie-line snippet: renders line with white outline, phase endpoints, and cursor marker -->
+{#snippet tie_line_viz(
+  x1: number,
+  y1: number,
+  x2: number,
+  y2: number,
+  endpoints: Array<{ cx: number; cy: number; color: string }>,
+  cursor_cx: number,
+  cursor_cy: number,
+)}
+  {@const tl = merged_config.tie_line}
+  <g class="tie-line" class:locked={locked_hover_info}>
+    {#each [`white`, `rgb(${PHASE_COLOR_RGB.tie_line})`] as stroke (stroke)}
+      <line
+        {x1}
+        {y1}
+        {x2}
+        {y2}
+        {stroke}
+        stroke-width={tl.stroke_width + (stroke === `white` ? 1 : 0)}
+        stroke-linecap="round"
+      />
+    {/each}
+    {#each endpoints as ep, idx (idx)}
+      <circle
+        cx={ep.cx}
+        cy={ep.cy}
+        r={tl.endpoint_radius}
+        fill="rgb({ep.color})"
+        stroke="white"
+        stroke-width={1.5}
+      />
+    {/each}
+    <circle
+      cx={cursor_cx}
+      cy={cursor_cy}
+      r={tl.cursor_radius}
+      fill="rgb({PHASE_COLOR_RGB.tie_line})"
+      stroke="white"
+      stroke-width={2}
+    />
+  </g>
+{/snippet}
+
 <svelte:document
   onfullscreenchange={() => {
     fullscreen = Boolean(document.fullscreenElement)
@@ -266,7 +545,9 @@ const default_x_axis_label = $derived.by(() => {
   bind:clientWidth={width}
   bind:clientHeight={height}
   role="img"
-  aria-label={`${component_a}-${component_b} binary phase diagram`}
+  aria-label="{component_a}-{component_b} binary phase diagram"
+  ondrop={handle_svg_drop}
+  ondragover={(ev) => ev.preventDefault()}
 >
   {#if width > 0 && height > 0}
     <!-- Header controls -->
@@ -280,23 +561,36 @@ const default_x_axis_label = $derived.by(() => {
           bind:show_grid
           bind:show_component_labels
           bind:config
+          bind:lever_rule_mode
           bind:x_axis
           bind:y_axis
           bind:png_dpi
-          {data}
+          data={effective_data}
           {enable_export}
           {...controls_props}
+          icon_style={pane_icon_style}
+          toggle_props={pane_toggle_props}
         />
       {/if}
       {#if enable_export}
         <PhaseDiagramExportPane
           bind:export_pane_open
           bind:png_dpi
-          {data}
+          data={effective_data}
           {wrapper}
           filename={export_filename}
+          icon_style={pane_icon_style}
+          toggle_props={pane_toggle_props}
         />
       {/if}
+      <PhaseDiagramEditorPane
+        bind:editor_open
+        bind:diagram_input
+        data={effective_data}
+        ondata={(edited) => data_override = edited}
+        icon_style={pane_icon_style}
+        toggle_props={pane_toggle_props}
+      />
       {#if fullscreen_toggle}
         <FullscreenToggle bind:fullscreen />
       {/if}
@@ -382,7 +676,7 @@ const default_x_axis_label = $derived.by(() => {
             <path
               d={boundary.svg_path}
               fill="none"
-              stroke={boundary.style?.color || merged_config.colors.boundary}
+              stroke={boundary.style?.color ?? merged_config.colors.boundary}
               stroke-width={boundary.style?.width || 2}
               stroke-dasharray={boundary.style?.dash || ``}
               stroke-linecap="round"
@@ -411,7 +705,7 @@ const default_x_axis_label = $derived.by(() => {
                   font-weight="500"
                   class="region-label"
                 >
-                  {line}
+                  {@html sanitize_svg(format_label_svg(line, use_subscripts))}
                 </text>
               {/each}
             </g>
@@ -420,51 +714,40 @@ const default_x_axis_label = $derived.by(() => {
       {/if}
 
       <!-- Tie-line visualization for two-phase regions -->
-      {#if effective_hover_info?.lever_rule}
-        {@const info = effective_hover_info}
+      {#if lever_rule_mode === `vertical` && effective_hover_info?.vertical_lever_rule}
+        {@const vlr = effective_hover_info.vertical_lever_rule}
+        {@const cx = x_scale(effective_hover_info.composition)}
+        {@const y_bot = y_scale(vlr.bottom_temperature)}
+        {@const y_top = y_scale(vlr.top_temperature)}
+        {@render tie_line_viz(
+        cx,
+        y_bot,
+        cx,
+        y_top,
+        [
+          { cx, cy: y_bot, color: get_phase_color(vlr.bottom_phase, `rgb`) },
+          { cx, cy: y_top, color: get_phase_color(vlr.top_phase, `rgb`) },
+        ],
+        cx,
+        y_scale(effective_hover_info.temperature),
+      )}
+      {:else if lever_rule_mode === `horizontal` && effective_hover_info?.lever_rule}
         {@const lr = effective_hover_info.lever_rule}
-        {@const y_pos = y_scale(info.temperature)}
-        {@const x_left = x_scale(lr.left_composition)}
-        {@const x_right = x_scale(lr.right_composition)}
-        {@const tie_line = merged_config.tie_line}
-        {@const endpoints = [
-        { cx: x_left, color: get_phase_color(lr.left_phase, `rgb`) },
-        { cx: x_right, color: get_phase_color(lr.right_phase, `rgb`) },
-      ]}
-        <g class="tie-line" class:locked={locked_hover_info}>
-          <!-- Horizontal tie-line with white outline for contrast -->
-          {#each [`white`, `rgb(${PHASE_COLOR_RGB.tie_line})`] as stroke (stroke)}
-            <line
-              x1={x_left}
-              y1={y_pos}
-              x2={x_right}
-              y2={y_pos}
-              {stroke}
-              stroke-width={tie_line.stroke_width + (stroke === `white` ? 1 : 0)}
-              stroke-linecap="round"
-            />
-          {/each}
-          <!-- Phase endpoints -->
-          {#each endpoints as { cx, color } (cx)}
-            <circle
-              {cx}
-              cy={y_pos}
-              r={tie_line.endpoint_radius}
-              fill="rgb({color})"
-              stroke="white"
-              stroke-width={1.5}
-            />
-          {/each}
-          <!-- Cursor position marker -->
-          <circle
-            cx={x_scale(info.composition)}
-            cy={y_pos}
-            r={tie_line.cursor_radius}
-            fill="rgb({PHASE_COLOR_RGB.tie_line})"
-            stroke="white"
-            stroke-width={2}
-          />
-        </g>
+        {@const cy = y_scale(effective_hover_info.temperature)}
+        {@const x_l = x_scale(lr.left_composition)}
+        {@const x_r = x_scale(lr.right_composition)}
+        {@render tie_line_viz(
+        x_l,
+        cy,
+        x_r,
+        cy,
+        [
+          { cx: x_l, cy, color: get_phase_color(lr.left_phase, `rgb`) },
+          { cx: x_r, cy, color: get_phase_color(lr.right_phase, `rgb`) },
+        ],
+        x_scale(effective_hover_info.composition),
+        cy,
+      )}
       {/if}
 
       <!-- Special points (rendered last for highest z-index) -->
@@ -540,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}
-          {:else if data_x_axis_label}
-            {@html data_x_axis_label}
+            {@html sanitize_svg(x_axis.label)}
+          {:else if 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>
@@ -577,15 +860,15 @@ const default_x_axis_label = $derived.by(() => {
         <text
           transform="rotate(-90)"
           x={-(top + plot_height / 2)}
-          y={12}
+          y={16}
           text-anchor="middle"
           fill={merged_config.colors.text}
           font-size={merged_config.font_size + 2}
         >
           {#if y_axis.label}
-            {@html y_axis.label}
-          {:else if data_y_axis_label}
-            {@html data_y_axis_label}
+            {@html sanitize_svg(y_axis.label)}
+          {:else if effective_data?.y_axis_label}
+            {@html sanitize_svg(effective_data.y_axis_label)}
           {:else}
             Temperature ({temp_unit})
           {/if}
@@ -602,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}
@@ -612,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>
@@ -636,9 +919,13 @@ const default_x_axis_label = $derived.by(() => {
           <PhaseDiagramTooltip
             hover_info={effective_hover_info}
             temperature_unit={temp_unit}
+            data_temperature_unit={data_temp_unit}
             composition_unit={comp_unit}
             {component_a}
             {component_b}
+            boundaries={effective_data?.boundaries ?? []}
+            {lever_rule_mode}
+            {use_subscripts}
             {tooltip}
           />
         {/if}
@@ -699,9 +986,14 @@ const default_x_axis_label = $derived.by(() => {
     opacity: 0;
     transition: opacity 0.2s ease;
   }
+  /* Keep editor toggle always visible so users discover the edit feature */
+  .binary-phase-diagram :global(.pd-editor-toggle) {
+    opacity: 1;
+  }
   .binary-phase-diagram:is(:hover, :focus-within)
     :is(:global(.pane-toggle), .header-controls),
-  .binary-phase-diagram :global(.pane-toggle:is(:focus-visible, [aria-expanded='true'])) {
+  .binary-phase-diagram :global(.pane-toggle:is(:focus-visible, [aria-expanded='true'])),
+  .header-controls:has(:global(.pane-open)) {
     opacity: 1;
   }
   .phase-regions path {