matterviz 0.3.0 → 0.3.2

package/dist/phase-diagram/IsobaricBinaryPhaseDiagram.svelte

@@ -3,11 +3,56 @@ import { FullscreenToggle, set_fullscreen_bg, setup_fullscreen_effect, } from '.
 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 { 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();
+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;
+    try {
+        return build_diagram(diagram_input);
+    }
+    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];
+    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
@@ -22,12 +67,67 @@ 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 [lo ?? 0, hi ?? 1];
+});
 // Scales
-const x_scale = $derived(scaleLinear().domain([0, 1]).range([left, right]));
+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((data?.temperature_unit ?? `K`));
+const data_temp_unit = $derived((effective_data?.temperature_unit ?? `K`));
 const temp_unit = $derived(display_temp_unit ?? data_temp_unit);
-const temp_range = $derived(data?.temperature_range ?? [0, 1000]);
+const temp_range = $derived(effective_data?.temperature_range ?? [0, 1000]);
 // Convert temperature range for display
 const display_temp_range = $derived([
     convert_temp(temp_range[0], data_temp_unit, temp_unit),
@@ -40,13 +140,11 @@ const y_scale = $derived(scaleLinear().domain(temp_range).range([bottom, top]));
 // 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));
+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(y_tick_count));
+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((data?.regions ?? []).map((region) => {
+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);
@@ -68,12 +166,12 @@ const transformed_regions = $derived((data?.regions ?? []).map((region) => {
     };
 }));
 // Transform boundaries to SVG coordinates
-const transformed_boundaries = $derived((data?.boundaries ?? []).map((boundary) => ({
+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((data?.special_points ?? []).map((point) => ({
+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]),
@@ -110,7 +208,7 @@ async function handle_double_click(event) {
     if (!hover_info)
         return;
     try {
-        await navigator.clipboard.writeText(format_hover_info_text(hover_info, temp_unit, comp_unit, component_a, component_b));
+        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 };
@@ -153,14 +251,15 @@ function handle_pointer_move(event) {
     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) {
+    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 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)
@@ -174,6 +273,8 @@ function handle_pointer_move(event) {
             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);
@@ -218,17 +319,14 @@ $effect(() => {
     };
 });
 // 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%`);
+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(data?.pseudo_binary?.use_subscripts ?? true);
+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));
-// 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 ` : ``;
@@ -251,6 +349,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 +408,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 +424,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 +539,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 +568,7 @@ const default_x_axis_label = $derived.by(() => {
                   font-weight="500"
                   class="region-label"
                 >
-                  {line}
+                  {@html format_label_svg(line, use_subscripts)}
                 </text>
               {/each}
             </g>
@@ -420,51 +577,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) -->
@@ -541,8 +687,8 @@ const default_x_axis_label = $derived.by(() => {
         >
           {#if x_axis.label}
             {@html x_axis.label}
-          {:else if data_x_axis_label}
-            {@html data_x_axis_label}
+          {:else if effective_data?.x_axis_label}
+            {@html effective_data.x_axis_label}
           {:else}
             {@html default_x_axis_label}
           {/if}
@@ -577,15 +723,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}
+          {:else if effective_data?.y_axis_label}
+            {@html effective_data.y_axis_label}
           {:else}
             Temperature ({temp_unit})
           {/if}
@@ -636,9 +782,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 +849,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 {

package/dist/phase-diagram/IsobaricBinaryPhaseDiagram.svelte.d.ts

@@ -1,8 +1,9 @@
 import type { AxisConfig } from '../plot';
 import type { ComponentProps, Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
+import type { DiagramInput } from './diagram-input';
 import PhaseDiagramControls from './PhaseDiagramControls.svelte';
-import type { PhaseDiagramConfig, PhaseDiagramData, PhaseDiagramTooltipConfig, PhaseHoverInfo, PhaseRegion } from './types';
+import type { LeverRuleMode, PhaseDiagramConfig, PhaseDiagramData, PhaseDiagramTooltipConfig, PhaseHoverInfo, PhaseRegion } from './types';
 type Props = HTMLAttributes<HTMLDivElement> & {
     data: PhaseDiagramData;
     config?: Partial<PhaseDiagramConfig>;
@@ -24,6 +25,9 @@ type Props = HTMLAttributes<HTMLDivElement> & {
     export_pane_open?: boolean;
     png_dpi?: number;
     export_filename?: string;
+    lever_rule_mode?: LeverRuleMode;
+    diagram_input?: DiagramInput | null;
+    editor_open?: boolean;
     x_axis?: AxisConfig;
     y_axis?: AxisConfig;
     tooltip?: Snippet<[PhaseHoverInfo]> | PhaseDiagramTooltipConfig | false;
@@ -35,6 +39,6 @@ type Props = HTMLAttributes<HTMLDivElement> & {
         }
     ]>;
 };
-declare const IsobaricBinaryPhaseDiagram: import("svelte").Component<Props, {}, "fullscreen" | "controls_open" | "x_axis" | "y_axis" | "show_labels" | "export_pane_open" | "wrapper" | "png_dpi" | "show_grid" | "hovered_region" | "config" | "show_boundaries" | "show_special_points" | "show_component_labels" | "display_temp_unit">;
+declare const IsobaricBinaryPhaseDiagram: import("svelte").Component<Props, {}, "controls_open" | "x_axis" | "y_axis" | "show_grid" | "fullscreen" | "wrapper" | "hovered_region" | "config" | "show_labels" | "export_pane_open" | "png_dpi" | "show_boundaries" | "show_special_points" | "show_component_labels" | "lever_rule_mode" | "editor_open" | "diagram_input" | "display_temp_unit">;
 type IsobaricBinaryPhaseDiagram = ReturnType<typeof IsobaricBinaryPhaseDiagram>;
 export default IsobaricBinaryPhaseDiagram;

package/dist/phase-diagram/PhaseDiagramControls.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">// NOTE: Axis config objects must be reassigned (not mutated) to trigger $bindable reactivity.
+import { css_color_to_hex } from '../colors';
 import { format_num } from '../labels';
 import SettingsSection from '../layout/SettingsSection.svelte';
 import DraggablePane from '../overlays/DraggablePane.svelte';
-import { css_color_to_hex } from '../colors';
 import { tooltip } from 'svelte-multiselect/attachments';
 import { merge_phase_diagram_config, PHASE_DIAGRAM_DEFAULTS } from './utils';
 let { controls_open = $bindable(false), 
@@ -10,6 +10,8 @@ let { controls_open = $bindable(false),
 show_boundaries = $bindable(PHASE_DIAGRAM_DEFAULTS.show_boundaries), show_labels = $bindable(PHASE_DIAGRAM_DEFAULTS.show_labels), show_special_points = $bindable(PHASE_DIAGRAM_DEFAULTS.show_special_points), show_grid = $bindable(PHASE_DIAGRAM_DEFAULTS.show_grid), show_component_labels = $bindable(PHASE_DIAGRAM_DEFAULTS.show_component_labels), 
 // Configuration
 config = $bindable({}), 
+// Lever rule mode
+lever_rule_mode = $bindable(`horizontal`), 
 // Axis configuration
 x_axis = $bindable({}), y_axis = $bindable({}), 
 // Data
@@ -65,7 +67,7 @@ const has_special_points = $derived((data?.special_points?.length ?? 0) > 0);
   pane_props={{
     ...pane_props,
     class: `phase-diagram-controls-pane ${pane_props?.class ?? ``}`,
-    style: `--pane-padding: 12px; --pane-gap: 6px; ${pane_props?.style ?? ``}`,
+    style: pane_props?.style ?? ``,
   }}
   toggle_props={{
     title: controls_open ? `` : `Phase diagram controls`,
@@ -200,14 +202,29 @@ const has_special_points = $derived((data?.special_points?.length ?? 0) > 0);
     title="Tie-line Display"
     current_values={{
       ...merged_config.tie_line,
+      lever_rule_mode,
     }}
     on_reset={() => {
       config = {
         ...config,
         tie_line: { ...PHASE_DIAGRAM_DEFAULTS.tie_line },
       }
+      lever_rule_mode = `horizontal`
     }}
   >
+    <span {@attach tooltip({ content: `Direction of the lever rule tie-line` })}>
+      Direction
+      <div class="pane-row">
+        <label>
+          <input type="radio" bind:group={lever_rule_mode} value="horizontal" />
+          Horizontal
+        </label>
+        <label>
+          <input type="radio" bind:group={lever_rule_mode} value="vertical" />
+          Vertical
+        </label>
+      </div>
+    </span>
     {@render num_range(
         `Line width`,
         merged_config.tie_line.stroke_width,
@@ -215,7 +232,7 @@ const has_special_points = $derived((data?.special_points?.length ?? 0) > 0);
         5,
         0.5,
         (val) => update_nested(`tie_line`, `stroke_width`, val),
-        `Thickness of the horizontal tie-line`,
+        `Thickness of the tie-line`,
       )}
     {@render num_range(
         `Endpoint radius`,
@@ -291,6 +308,7 @@ const has_special_points = $derived((data?.special_points?.length ?? 0) > 0);
           min={72}
           max={600}
           step={50}
+          style="width: 3.5em"
           bind:value={png_dpi}
         />
         <input
@@ -313,14 +331,16 @@ const has_special_points = $derived((data?.special_points?.length ?? 0) > 0);
   :global(.phase-diagram-controls-pane) {
     font-size: 0.85em;
     max-width: 320px;
+    --pane-padding: 10px;
+    --pane-gap: 4px;
   }
   :global(.phase-diagram-controls-pane section) {
     display: flex;
     flex-direction: column;
-    gap: 6pt;
+    gap: 4pt;
   }
   :global(.phase-diagram-controls-pane h4) {
-    margin: 10pt 0 4pt !important;
+    margin: 6pt 0 2pt !important;
   }
   :global(.phase-diagram-controls-pane h4:first-of-type) {
     margin-top: 0 !important;
@@ -328,18 +348,16 @@ const has_special_points = $derived((data?.special_points?.length ?? 0) > 0);
   .pane-row {
     display: flex;
     gap: 12pt;
-    justify-content: space-between;
-    width: 100%;
   }
   .visibility-grid {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 6pt 12pt;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4pt 10pt;
   }
   .color-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    gap: 8pt;
+    gap: 6pt;
   }
   .color-grid label {
     flex-direction: column;
@@ -355,6 +373,9 @@ const has_special_points = $derived((data?.special_points?.length ?? 0) > 0);
     font-size: inherit;
     font-family: inherit;
   }
+  input[type='number'] {
+    width: 3.5em;
+  }
   input[type='range'] {
     flex: 1;
     min-width: 40px;

package/dist/phase-diagram/PhaseDiagramControls.svelte.d.ts

@@ -1,7 +1,7 @@
 import DraggablePane from '../overlays/DraggablePane.svelte';
 import type { AxisConfig } from '../plot';
 import type { ComponentProps, Snippet } from 'svelte';
-import type { PhaseDiagramConfig, PhaseDiagramData } from './types';
+import type { LeverRuleMode, PhaseDiagramConfig, PhaseDiagramData } from './types';
 type Props = Omit<ComponentProps<typeof DraggablePane>, `children`> & {
     controls_open?: boolean;
     show_boundaries?: boolean;
@@ -10,6 +10,7 @@ type Props = Omit<ComponentProps<typeof DraggablePane>, `children`> & {
     show_grid?: boolean;
     show_component_labels?: boolean;
     config?: Partial<PhaseDiagramConfig>;
+    lever_rule_mode?: LeverRuleMode;
     x_axis?: AxisConfig;
     y_axis?: AxisConfig;
     data?: PhaseDiagramData;
@@ -24,6 +25,6 @@ type Props = Omit<ComponentProps<typeof DraggablePane>, `children`> & {
         controls_open: boolean;
     }]>;
 };
-declare const PhaseDiagramControls: import("svelte").Component<Props, {}, "controls_open" | "x_axis" | "y_axis" | "show_labels" | "png_dpi" | "show_grid" | "config" | "show_boundaries" | "show_special_points" | "show_component_labels">;
+declare const PhaseDiagramControls: import("svelte").Component<Props, {}, "controls_open" | "x_axis" | "y_axis" | "show_grid" | "config" | "show_labels" | "png_dpi" | "show_boundaries" | "show_special_points" | "show_component_labels" | "lever_rule_mode">;
 type PhaseDiagramControls = ReturnType<typeof PhaseDiagramControls>;
 export default PhaseDiagramControls;