matterviz 0.4.0 → 0.4.2

package/dist/phase-diagram/IsobaricBinaryPhaseDiagram.svelte

@@ -1,10 +1,6 @@
 <script lang="ts">
   import { format_num } from '../labels'
-  import {
-    FullscreenToggle,
-    set_fullscreen_bg,
-    setup_fullscreen_effect,
-  } from '../layout'
+  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'
@@ -116,9 +112,7 @@
     // 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 }]
-    >
+    children?: Snippet<[{ width: number; height: number; fullscreen: boolean }]>
   } = $props()
 
   // Shared icon/toggle styling for controls and export panes
@@ -210,9 +204,7 @@
 
   // 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]),
-  )
+  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
@@ -221,9 +213,7 @@
   )
 
   // 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),
-  )
+  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),
@@ -262,9 +252,7 @@
   const transformed_boundaries = $derived(
     (effective_data?.boundaries ?? []).map((boundary) => ({
       ...boundary,
-      svg_path: generate_boundary_path(
-        transform_vertices(boundary.points, x_scale, y_scale),
-      ),
+      svg_path: generate_boundary_path(transform_vertices(boundary.points, x_scale, y_scale)),
     })),
   )
 
@@ -354,11 +342,7 @@
   })
 
   // Find nearest special point within threshold (in SVG pixels)
-  function find_nearby_special_point(
-    svg_x: number,
-    svg_y: number,
-    threshold: number = 20,
-  ) {
+  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) {
@@ -372,19 +356,14 @@
   }
 
   // Pointer move handler (unified mouse/touch via Pointer Events API)
-  function handle_pointer_move(
-    event: PointerEvent & { currentTarget: SVGElement },
-  ) {
+  function handle_pointer_move(event: PointerEvent & { currentTarget: SVGElement }) {
     const svg = event.currentTarget
     const rect = svg.getBoundingClientRect()
     const svg_x = event.clientX - rect.left
     const svg_y = event.clientY - rect.top
 
     // Check if within plot area
-    if (
-      svg_x < left || svg_x > right || svg_y < top || svg_y > bottom ||
-      !effective_data
-    ) {
+    if (svg_x < left || svg_x > right || svg_y < top || svg_y > bottom || !effective_data) {
       clear_hover()
       return
     }
@@ -395,9 +374,7 @@
     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
+    const nearby_special = show_special_points ? find_nearby_special_point(svg_x, svg_y) : null
 
     if (region) {
       hovered_region = region
@@ -406,11 +383,9 @@
         composition,
         temperature,
         position: { x: event.clientX, y: event.clientY },
-        lever_rule: calculate_lever_rule(region, composition, temperature) ||
-          undefined,
+        lever_rule: calculate_lever_rule(region, composition, temperature) || undefined,
         vertical_lever_rule:
-          calculate_vertical_lever_rule(region, composition, temperature) ||
-          undefined,
+          calculate_vertical_lever_rule(region, composition, temperature) || undefined,
         special_point: nearby_special || undefined,
       }
       on_phase_hover?.(hover_info)
@@ -462,9 +437,7 @@
   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,
-  )
+  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))
@@ -545,7 +518,7 @@
 
 <div
   {...rest}
-  class="binary-phase-diagram {rest.class ?? ``}"
+  class={[`binary-phase-diagram`, rest.class]}
   class:fullscreen
   bind:this={wrapper}
   bind:clientWidth={width}
@@ -593,7 +566,7 @@
         bind:editor_open
         bind:diagram_input
         data={effective_data}
-        ondata={(edited) => data_override = edited}
+        ondata={(edited) => (data_override = edited)}
         icon_style={pane_icon_style}
         toggle_props={pane_toggle_props}
       />
@@ -667,8 +640,8 @@
           <path
             d={region.svg_path}
             fill={region.gradient
-            ? `url(#${gradient_uid}-${region.id})`
-            : (region.color || get_phase_color(region.name))}
+              ? `url(#${gradient_uid}-${region.id})`
+              : region.color || get_phase_color(region.name)}
             stroke="none"
             class:hovered={hovered_region?.id === region.id}
           />
@@ -683,7 +656,7 @@
               d={boundary.svg_path}
               fill="none"
               stroke={boundary.style?.color ?? merged_config.colors.boundary}
-              stroke-width={boundary.style?.width || 2}
+              stroke-width={boundary.style?.width ?? 2}
               stroke-dasharray={boundary.style?.dash || ``}
               stroke-linecap="round"
               stroke-linejoin="round"
@@ -698,7 +671,8 @@
           {#each transformed_regions as region (region.id)}
             {@const line_height = merged_config.font_size * 1.2}
             <g
-              transform="translate({region.label_pos[0]}, {region.label_pos[1]}) rotate({region.label_rotation}) scale({region.label_scale})"
+              transform="translate({region.label_pos[0]}, {region
+                .label_pos[1]}) rotate({region.label_rotation}) scale({region.label_scale})"
             >
               {#each region.label_lines as line, line_idx (line_idx)}
                 <text
@@ -726,34 +700,34 @@
         {@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),
-      )}
+          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 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,
-      )}
+          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) -->
@@ -996,8 +970,7 @@
   .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:is(:hover, :focus-within) :is(:global(.pane-toggle), .header-controls),
   .binary-phase-diagram :global(.pane-toggle:is(:focus-visible, [aria-expanded='true'])),
   .header-controls:has(:global(.pane-open)) {
     opacity: 1;
@@ -1024,7 +997,12 @@
     pointer-events: none; /* Let hit-area handle events */
   }
   /* Grouped pointer-events: none */
-  .region-label, .tie-line, .tooltip-container, .copy-feedback, .grid, .region-labels {
+  .region-label,
+  .tie-line,
+  .tooltip-container,
+  .copy-feedback,
+  .grid,
+  .region-labels {
     pointer-events: none;
   }
   .region-label {
@@ -1081,7 +1059,8 @@
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
   }
   @keyframes copy-fade-up {
-    0%, 70% {
+    0%,
+    70% {
       opacity: 1;
     }
     100% {

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

@@ -31,14 +31,12 @@ type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
     x_axis?: AxisConfig;
     y_axis?: AxisConfig;
     tooltip?: Snippet<[PhaseHoverInfo]> | PhaseDiagramTooltipConfig | false;
-    children?: Snippet<[
-        {
-            width: number;
-            height: number;
-            fullscreen: boolean;
-        }
-    ]>;
+    children?: Snippet<[{
+        width: number;
+        height: number;
+        fullscreen: boolean;
+    }]>;
 };
-declare const IsobaricBinaryPhaseDiagram: import("svelte").Component<$$ComponentProps, {}, "fullscreen" | "controls_open" | "x_axis" | "y_axis" | "show_grid" | "show_boundaries" | "show_labels" | "show_special_points" | "show_component_labels" | "png_dpi" | "wrapper" | "config" | "export_pane_open" | "lever_rule_mode" | "editor_open" | "diagram_input" | "hovered_region" | "display_temp_unit">;
+declare const IsobaricBinaryPhaseDiagram: import("svelte").Component<$$ComponentProps, {}, "show_labels" | "y_axis" | "fullscreen" | "wrapper" | "controls_open" | "x_axis" | "config" | "export_pane_open" | "png_dpi" | "show_grid" | "show_boundaries" | "show_special_points" | "show_component_labels" | "lever_rule_mode" | "editor_open" | "diagram_input" | "hovered_region" | "display_temp_unit">;
 type IsobaricBinaryPhaseDiagram = ReturnType<typeof IsobaricBinaryPhaseDiagram>;
 export default IsobaricBinaryPhaseDiagram;

package/dist/phase-diagram/PhaseDiagramControls.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
+  import type { PaneProps, PaneToggleProps } from '../overlays'
   // 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 NumberRangeInput from '../layout/NumberRangeInput.svelte'
   import SettingsSection from '../layout/SettingsSection.svelte'
   import DraggablePane from '../overlays/DraggablePane.svelte'
   import type { AxisConfig } from '../plot'
@@ -58,8 +60,8 @@
     enable_export?: boolean
     png_dpi?: number
     // Pane customization
-    pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`]
-    toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`]
+    pane_props?: PaneProps
+    toggle_props?: PaneToggleProps
     // Custom content snippets
     children?: Snippet<[{ controls_open: boolean }]>
     post_children?: Snippet<[{ controls_open: boolean }]>
@@ -77,9 +79,7 @@
   }
 
   // Helper to update nested config properties
-  function update_nested<
-    K extends keyof Pick<PhaseDiagramConfig, `colors` | `tie_line`>,
-  >(
+  function update_nested<K extends keyof Pick<PhaseDiagramConfig, `colors` | `tie_line`>>(
     key: K,
     prop: string,
     value: string | number,
@@ -100,25 +100,6 @@
   const has_special_points = $derived((data?.special_points?.length ?? 0) > 0)
 </script>
 
-<!-- Reusable snippet for number + range input pairs -->
-{#snippet num_range(
-  label: string,
-  value: number,
-  min: number,
-  max: number,
-  step: number,
-  on_change: (val: number) => void,
-  tip: string,
-)}
-  {@const oninput = (ev: Event & { currentTarget: HTMLInputElement }) =>
-    on_change(Number(ev.currentTarget.value))}
-  <label {@attach tooltip({ content: tip })}>
-    {label}
-    <input type="number" {min} {max} {step} {value} {oninput} />
-    <input type="range" {min} {max} {step} {value} {oninput} />
-  </label>
-{/snippet}
-
 <DraggablePane
   bind:show={controls_open}
   pane_props={{
@@ -176,9 +157,7 @@
           Special Pts
         </label>
       {/if}
-      <label
-        {@attach tooltip({ content: `Show component labels at axes` })}
-      >
+      <label {@attach tooltip({ content: `Show component labels at axes` })}>
         <input type="checkbox" bind:checked={show_component_labels} />
         Comp. Labels
       </label>
@@ -194,43 +173,40 @@
     }}
     on_reset={() => {
       update_config(`font_size`, PHASE_DIAGRAM_DEFAULTS.font_size)
-      update_config(
-        `special_point_radius`,
-        PHASE_DIAGRAM_DEFAULTS.special_point_radius,
-      )
+      update_config(`special_point_radius`, PHASE_DIAGRAM_DEFAULTS.special_point_radius)
     }}
   >
-    {@render num_range(
-        `Font size`,
-        merged_config.font_size,
-        8,
-        20,
-        1,
-        (val) => update_config(`font_size`, val),
-        `Font size for axis labels and tick marks`,
-      )}
+    <NumberRangeInput
+      min={8}
+      max={20}
+      step={1}
+      title="Font size for axis labels and tick marks"
+      bind:value={() => merged_config.font_size, (val) => update_config(`font_size`, val)}
+      >Font size</NumberRangeInput
+    >
     {#if has_special_points}
-      {@render num_range(
-        `Special pt radius`,
-        merged_config.special_point_radius,
-        2,
-        12,
-        1,
-        (val) => update_config(`special_point_radius`, val),
-        `Radius of special point markers (eutectic, peritectic, etc.)`,
-      )}
+      <NumberRangeInput
+        min={2}
+        max={12}
+        step={1}
+        title="Radius of special point markers (eutectic, peritectic, etc.)"
+        bind:value={
+          () => merged_config.special_point_radius,
+          (val) => update_config(`special_point_radius`, val)
+        }>Special pt radius</NumberRangeInput
+      >
     {/if}
   </SettingsSection>
 
   <!-- Colors Section -->
   {@const color_options = [
-      [`background`, `#ffffff`, `Background`, `Background color of the plot area`],
-      [`grid`, `#888888`, `Grid`, `Color of grid lines`],
-      [`boundary`, `#333333`, `Boundaries`, `Color of phase boundary lines`],
-      [`special_point`, `#d32f2f`, `Special Pts`, `Color of special point markers`],
-      [`axis`, `#333333`, `Axis`, `Color of axis lines`],
-      [`text`, `#333333`, `Text`, `Color of text labels`],
-    ] as const}
+    [`background`, `#ffffff`, `Background`, `Background color of the plot area`],
+    [`grid`, `#888888`, `Grid`, `Color of grid lines`],
+    [`boundary`, `#333333`, `Boundaries`, `Color of phase boundary lines`],
+    [`special_point`, `#d32f2f`, `Special Pts`, `Color of special point markers`],
+    [`axis`, `#333333`, `Axis`, `Color of axis lines`],
+    [`text`, `#333333`, `Text`, `Color of text labels`],
+  ] as const}
   <SettingsSection
     title="Colors"
     current_values={{ ...merged_config.colors }}
@@ -280,40 +256,43 @@
         </label>
       </div>
     </span>
-    {@render num_range(
-        `Line width`,
-        merged_config.tie_line.stroke_width,
-        0.5,
-        5,
-        0.5,
-        (val) => update_nested(`tie_line`, `stroke_width`, val),
-        `Thickness of the tie-line`,
-      )}
-    {@render num_range(
-        `Endpoint radius`,
-        merged_config.tie_line.endpoint_radius,
-        2,
-        10,
-        1,
-        (val) => update_nested(`tie_line`, `endpoint_radius`, val),
-        `Radius of phase boundary endpoint markers`,
-      )}
-    {@render num_range(
-        `Cursor radius`,
-        merged_config.tie_line.cursor_radius,
-        2,
-        10,
-        1,
-        (val) => update_nested(`tie_line`, `cursor_radius`, val),
-        `Radius of the cursor position marker`,
-      )}
+    <NumberRangeInput
+      min={0.5}
+      max={5}
+      step={0.5}
+      title="Thickness of the tie-line"
+      bind:value={
+        () => merged_config.tie_line.stroke_width,
+        (val) => update_nested(`tie_line`, `stroke_width`, val)
+      }>Line width</NumberRangeInput
+    >
+    <NumberRangeInput
+      min={2}
+      max={10}
+      step={1}
+      title="Radius of phase boundary endpoint markers"
+      bind:value={
+        () => merged_config.tie_line.endpoint_radius,
+        (val) => update_nested(`tie_line`, `endpoint_radius`, val)
+      }>Endpoint radius</NumberRangeInput
+    >
+    <NumberRangeInput
+      min={2}
+      max={10}
+      step={1}
+      title="Radius of the cursor position marker"
+      bind:value={
+        () => merged_config.tie_line.cursor_radius,
+        (val) => update_nested(`tie_line`, `cursor_radius`, val)
+      }>Cursor radius</NumberRangeInput
+    >
   </SettingsSection>
 
   <!-- Axis Configuration Section -->
   {@const axis_configs = [
-      [x_axis, `x`, comp_unit, `composition`],
-      [y_axis, `y`, temp_unit, `temperature`],
-    ] as const}
+    [x_axis, `x`, comp_unit, `composition`],
+    [y_axis, `y`, temp_unit, `temperature`],
+  ] as const}
   <SettingsSection
     title="Axes"
     current_values={{ x_ticks: x_axis.ticks, y_ticks: y_axis.ticks }}
@@ -352,7 +331,9 @@
       }}
     >
       <label
-        {@attach tooltip({ content: `DPI (dots per inch) for PNG export. Higher values produce larger, higher-quality images.` })}
+        {@attach tooltip({
+          content: `DPI (dots per inch) for PNG export. Higher values produce larger, higher-quality images.`,
+        })}
       >
         PNG DPI
         <input
@@ -363,15 +344,11 @@
           style="width: 3.5em"
           bind:value={png_dpi}
         />
-        <input
-          type="range"
-          min={72}
-          max={600}
-          step={50}
-          bind:value={png_dpi}
-        />
-        <span style="font-size: 0.85em; opacity: 0.7">{format_num(png_dpi, `d`)}
-          dpi</span>
+        <input type="range" min={72} max={600} step={50} bind:value={png_dpi} />
+        <span style="font-size: 0.85em; opacity: 0.7"
+          >{format_num(png_dpi, `d`)}
+          dpi</span
+        >
       </label>
     </SettingsSection>
   {/if}

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

@@ -1,3 +1,4 @@
+import type { PaneProps, PaneToggleProps } from '../overlays';
 import DraggablePane from '../overlays/DraggablePane.svelte';
 import type { AxisConfig } from '../plot';
 import type { ComponentProps, Snippet } from 'svelte';
@@ -16,8 +17,8 @@ type $$ComponentProps = Omit<ComponentProps<typeof DraggablePane>, `children`> &
     data?: PhaseDiagramData;
     enable_export?: boolean;
     png_dpi?: number;
-    pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`];
-    toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`];
+    pane_props?: PaneProps;
+    toggle_props?: PaneToggleProps;
     children?: Snippet<[{
         controls_open: boolean;
     }]>;
@@ -25,6 +26,6 @@ type $$ComponentProps = Omit<ComponentProps<typeof DraggablePane>, `children`> &
         controls_open: boolean;
     }]>;
 };
-declare const PhaseDiagramControls: import("svelte").Component<$$ComponentProps, {}, "controls_open" | "x_axis" | "y_axis" | "show_grid" | "show_boundaries" | "show_labels" | "show_special_points" | "show_component_labels" | "png_dpi" | "config" | "lever_rule_mode">;
+declare const PhaseDiagramControls: import("svelte").Component<$$ComponentProps, {}, "show_labels" | "y_axis" | "controls_open" | "x_axis" | "config" | "png_dpi" | "show_grid" | "show_boundaries" | "show_special_points" | "show_component_labels" | "lever_rule_mode">;
 type PhaseDiagramControls = ReturnType<typeof PhaseDiagramControls>;
 export default PhaseDiagramControls;

package/dist/phase-diagram/PhaseDiagramEditorPane.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import type { PaneToggleProps } from '../overlays'
   import { JsonTree } from '../layout/json-tree'
   import { set_at_path } from '../layout/json-tree/utils'
   import DraggablePane from '../overlays/DraggablePane.svelte'
@@ -21,7 +22,7 @@
     data?: PhaseDiagramData | null
     ondata?: (data: PhaseDiagramData) => void
     icon_style?: string
-    toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`]
+    toggle_props?: PaneToggleProps
   } = $props()
 
   // The source object currently displayed (DiagramInput or PhaseDiagramData)
@@ -110,7 +111,8 @@
     animation: fade-out 3s ease-out forwards;
   }
   @keyframes fade-out {
-    0%, 80% {
+    0%,
+    80% {
       opacity: 1;
     }
     100% {

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

@@ -1,5 +1,4 @@
-import DraggablePane from '../overlays/DraggablePane.svelte';
-import type { ComponentProps } from 'svelte';
+import type { PaneToggleProps } from '../overlays';
 import type { DiagramInput } from './diagram-input';
 import type { PhaseDiagramData } from './types';
 type $$ComponentProps = {
@@ -8,7 +7,7 @@ type $$ComponentProps = {
     data?: PhaseDiagramData | null;
     ondata?: (data: PhaseDiagramData) => void;
     icon_style?: string;
-    toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`];
+    toggle_props?: PaneToggleProps;
 };
 declare const PhaseDiagramEditorPane: import("svelte").Component<$$ComponentProps, {}, "editor_open" | "diagram_input">;
 type PhaseDiagramEditorPane = ReturnType<typeof PhaseDiagramEditorPane>;