matterviz 0.3.7 → 0.4.1

package/dist/phase-diagram/PhaseDiagramExportPane.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
+  import type { PaneToggleProps } from '../overlays'
+  import type { ExportSection } from '../io'
+  import ExportPane from '../io/ExportPane.svelte'
   import { export_svg_as_png, export_svg_as_svg } from '../io/export'
-  import DraggablePane from '../overlays/DraggablePane.svelte'
+  import { download } from '../io/fetch'
   import type { ComponentProps } from 'svelte'
-  import { CopyButton } from 'svelte-multiselect'
-  import { tooltip } from 'svelte-multiselect/attachments'
   import type { HTMLAttributes } from 'svelte/elements'
   import type { PhaseDiagramData } from './types'
 
@@ -29,12 +30,9 @@
     filename?: string
     png_dpi?: number
     icon_style?: string
-    toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`]
+    toggle_props?: PaneToggleProps
   } = $props()
 
-  let json_copy_state = $state<ComponentProps<typeof CopyButton>[`state`]>(`ready`)
-  let svg_copy_state = $state<ComponentProps<typeof CopyButton>[`state`]>(`ready`)
-
   // Generate filename with components if available (requires exactly 2 components)
   const full_filename = $derived(
     data?.components?.length === 2
@@ -48,137 +46,54 @@
   )
 
   const json_export_data = $derived(json_payload ?? data)
+  const json_string = (): string | null =>
+    json_export_data ? JSON.stringify(json_export_data, null, 2) : null
 
-  const svg_string = $derived(svg ? new XMLSerializer().serializeToString(svg) : null)
-
-  function download_json() {
-    if (!json_export_data) return
-
-    const json_string = JSON.stringify(json_export_data, null, 2)
-    const blob = new Blob([json_string], { type: `application/json` })
-    const url = URL.createObjectURL(blob)
-
-    const link = document.createElement(`a`)
-    link.href = url
-    link.download = `${full_filename}.json`
-    link.click()
-
-    URL.revokeObjectURL(url)
-  }
-
-  const json_string = $derived(
-    json_export_data ? JSON.stringify(json_export_data, null, 2) : null,
-  )
+  const sections = $derived<ExportSection[]>([
+    {
+      title: `Image`,
+      tooltip: `Download or copy the phase diagram`,
+      items: [
+        {
+          label: `SVG`,
+          disabled: !svg,
+          on_download: () => svg && export_svg_as_svg(svg, `${full_filename}.svg`),
+          copy_text: () => (svg ? new XMLSerializer().serializeToString(svg) : null),
+        },
+        {
+          label: `PNG`,
+          disabled: !svg,
+          show_dpi: true,
+          on_download: () =>
+            svg && export_svg_as_png(svg, `${full_filename}.png`, png_dpi),
+        },
+      ],
+    },
+    {
+      title: `Data`,
+      tooltip: `Export phase diagram data as JSON`,
+      items: [{
+        label: `JSON`,
+        disabled: !json_export_data,
+        on_download: () => {
+          const content = json_string()
+          if (content) download(content, `${full_filename}.json`, `application/json`)
+        },
+        copy_text: json_string,
+      }],
+    },
+  ])
 </script>
 
-<DraggablePane
-  bind:show={export_pane_open}
-  open_icon="Cross"
-  closed_icon="Export"
-  pane_props={{ ...rest, class: `export-pane ${rest.class ?? ``}` }}
+<ExportPane
+  bind:export_pane_open
+  bind:png_dpi
+  {sections}
   {icon_style}
   toggle_props={{
     class: `pd-export-toggle`,
     title: export_pane_open ? `` : `Export phase diagram`,
     ...caller_toggle_props,
   }}
->
-  <div class="export-grid">
-    <h4 id="image" {@attach tooltip({ content: `Download or copy the phase diagram` })}>
-      Image
-    </h4>
-    <label>
-      SVG
-      <button
-        type="button"
-        onclick={() => svg && export_svg_as_svg(svg, `${full_filename}.svg`)}
-        disabled={!svg}
-        title="Download SVG"
-      >
-        ⬇
-      </button>
-      <CopyButton
-        content={svg_string ?? ``}
-        title="Copy SVG to clipboard"
-        bind:state={svg_copy_state}
-        disabled={!svg_string}
-      />
-    </label>
-    <label>
-      PNG
-      <button
-        type="button"
-        onclick={() => svg && export_svg_as_png(svg, `${full_filename}.png`, png_dpi)}
-        disabled={!svg}
-        title={`Download PNG (${png_dpi} DPI)`}
-      >
-        ⬇
-      </button>
-      <span class="dpi-input"
-      >(DPI: <input
-          type="number"
-          min={50}
-          max={600}
-          bind:value={png_dpi}
-          title="Export resolution in dots per inch"
-        />)</span>
-    </label>
-
-    <h4 id="data" {@attach tooltip({ content: `Export phase diagram data as JSON` })}>
-      Data
-    </h4>
-    <label>
-      JSON
-      <button
-        type="button"
-        onclick={download_json}
-        disabled={!json_export_data}
-        title="Download JSON"
-      >
-        ⬇
-      </button>
-      <CopyButton
-        content={json_string ?? ``}
-        title="Copy JSON to clipboard"
-        bind:state={json_copy_state}
-        disabled={!json_string}
-      />
-    </label>
-  </div>
-</DraggablePane>
-
-<style>
-  .export-grid {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 4pt 10pt;
-  }
-  .export-grid h4 {
-    display: inline-flex;
-    align-items: center;
-    margin: 0;
-  }
-  label {
-    display: flex;
-    align-items: center;
-    gap: 8pt;
-    font-size: 0.95em;
-    white-space: nowrap;
-  }
-  .dpi-input {
-    display: inline-flex;
-    align-items: center;
-    gap: 2pt;
-    white-space: nowrap;
-  }
-  button {
-    width: 1.9em;
-    height: 1.6em;
-    padding: 0 6pt;
-    box-sizing: border-box;
-  }
-  input {
-    width: 3.5em;
-  }
-</style>
+  {...rest}
+/>

package/dist/phase-diagram/PhaseDiagramExportPane.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 { HTMLAttributes } from 'svelte/elements';
 import type { PhaseDiagramData } from './types';
 type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
@@ -12,8 +11,8 @@ type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
     filename?: string;
     png_dpi?: number;
     icon_style?: string;
-    toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`];
+    toggle_props?: PaneToggleProps;
 };
-declare const PhaseDiagramExportPane: import("svelte").Component<$$ComponentProps, {}, "png_dpi" | "export_pane_open">;
+declare const PhaseDiagramExportPane: import("svelte").Component<$$ComponentProps, {}, "export_pane_open" | "png_dpi">;
 type PhaseDiagramExportPane = ReturnType<typeof PhaseDiagramExportPane>;
 export default PhaseDiagramExportPane;

package/dist/phase-diagram/PhaseDiagramTooltip.svelte

@@ -106,7 +106,7 @@
 
   // Calculate distance to nearest phase boundary (liquidus/solidus)
   const boundary_distance = $derived.by(() => {
-    if (!boundaries.length) return null
+    if (boundaries.length === 0) return null
     const { composition, temperature } = hover_info
     let min_dist: { type: string; delta_t: number } | null = null
 

package/dist/phase-diagram/build-diagram.js

@@ -22,8 +22,8 @@ export function parse_curve_ref(ref) {
     const slice_match = /^(.+)\[(-?\d*):(-?\d*)\]$/.exec(name);
     if (slice_match) {
         name = slice_match[1];
-        start = slice_match[2] ? parseInt(slice_match[2]) : null;
-        end = slice_match[3] ? parseInt(slice_match[3]) : null;
+        start = slice_match[2] ? parseInt(slice_match[2], 10) : null;
+        end = slice_match[3] ? parseInt(slice_match[3], 10) : null;
     }
     return { name, reverse, start, end };
 }

package/dist/phase-diagram/colors.js

@@ -1,6 +1,6 @@
 // Phase diagram color palette
 // Keys can be referenced in diagram JSON files
-const rgba = (r, g, b, a = 0.6) => `rgba(${r}, ${g}, ${b}, ${a})`;
+const rgba = (red, green, blue, alpha = 0.6) => `rgba(${red}, ${green}, ${blue}, ${alpha})`;
 // Color palette for diagram JSON files - keyed colors that can be referenced by name
 export const DIAGRAM_COLORS = {
     // Single-phase regions (alpha=0.6)

package/dist/phase-diagram/parse.d.ts

@@ -1,3 +1,4 @@
+import type { Vec2 } from '../math';
 export declare const TDB_TEMP_DEFAULTS: {
     readonly min: 298.15;
     readonly max_fallback: 3000;
@@ -47,7 +48,7 @@ export interface TdbParseResult {
     error?: string;
     binary_system?: [string, string];
     available_phases?: string[];
-    temperature_range?: [number, number];
+    temperature_range?: Vec2;
 }
 export declare function parse_tdb(content: string): TdbParseResult;
 export declare const get_system_name: (elements: string[]) => string;

package/dist/phase-diagram/parse.js

@@ -1,6 +1,7 @@
 // TDB (Thermodynamic Database) file parser
 // Parses CALPHAD TDB files to extract metadata about elements, phases, and parameters
 import { ELEM_SYMBOLS } from '../labels';
+import { to_error } from '../utils';
 // Default temperature bounds for TDB parsing (in Kelvin)
 export const TDB_TEMP_DEFAULTS = {
     min: 298.15, // Room temperature
@@ -20,21 +21,21 @@ export function parse_tdb(content) {
         };
         // Normalize line endings and join continuation lines
         const normalized = content
-            .replace(/\r\n/g, `\n`)
-            .replace(/\r/g, `\n`)
+            .replaceAll('\r\n', `\n`)
+            .replaceAll('\r', `\n`)
             // Join lines that don't end with ! (continuation)
             .split(`\n`)
             .reduce((acc, line) => {
             const trimmed = line.trim();
             if (trimmed.startsWith(`$`)) {
-                data.comments.push(trimmed.substring(1).trim());
+                data.comments.push(trimmed.slice(1).trim());
                 return acc;
             }
             if (acc.length === 0 || acc[acc.length - 1].endsWith(`!`)) {
                 acc.push(trimmed);
             }
             else {
-                acc[acc.length - 1] += ` ` + trimmed;
+                acc[acc.length - 1] += ` ${trimmed}`;
             }
             return acc;
         }, [])
@@ -76,7 +77,7 @@ export function parse_tdb(content) {
         return {
             success: false,
             data: null,
-            error: exc instanceof Error ? exc.message : String(exc),
+            error: to_error(exc).message,
         };
     }
 }

package/dist/phase-diagram/types.d.ts

@@ -1,6 +1,6 @@
 import type { Point2D, Vec2 } from '../math';
 import type { LineStyle } from '../plot';
-import type { Sides } from '../plot/layout';
+import type { Sides } from '../plot/core/layout';
 import type { TooltipConfig, TooltipProp } from '../tooltip';
 export type TempUnit = `K` | `°C` | `°F`;
 export type CompUnit = `at%` | `wt%` | `mol%` | `fraction`;

package/dist/phase-diagram/utils.d.ts

@@ -1,5 +1,5 @@
 import { type Vec2 } from '../math';
-import type { Sides } from '../plot/layout';
+import type { Sides } from '../plot/core/layout';
 import type { CompUnit, LeverRuleMode, LeverRuleResult, PhaseDiagramConfig, PhaseDiagramData, PhaseHoverInfo, PhaseRegion, TempUnit, VerticalLeverRuleResult } from './types';
 export declare function convert_temp(value: number, from: TempUnit, to: TempUnit): number;
 export declare const PHASE_DIAGRAM_DEFAULTS: Readonly<{
@@ -28,7 +28,7 @@ export declare const PHASE_DIAGRAM_DEFAULTS: Readonly<{
     margin: Readonly<Required<Sides>>;
     png_dpi: 150;
 }>;
-export declare function merge_phase_diagram_config(config: Partial<PhaseDiagramConfig>): {
+export declare const merge_phase_diagram_config: (config: Partial<PhaseDiagramConfig>) => {
     margin: {
         t: number;
         b: number;
@@ -91,7 +91,7 @@ export declare function compute_label_properties(label: string, bounds: {
 };
 export declare const transform_vertices: (vertices: Vec2[], x_scale: (val: number) => number, y_scale: (val: number) => number) => Vec2[];
 export declare function format_composition(value: number, unit?: CompUnit, include_unit?: boolean): string;
-export declare function format_temperature(value: number, unit?: TempUnit): string;
+export declare const format_temperature: (value: number, unit?: TempUnit) => string;
 export declare function calculate_lever_rule(region: PhaseRegion, composition: number, temperature: number): LeverRuleResult | null;
 export declare function calculate_vertical_lever_rule(region: PhaseRegion, composition: number, temperature: number): VerticalLeverRuleResult | null;
 export declare function format_hover_info_text(info: PhaseHoverInfo, temp_unit?: TempUnit, comp_unit?: CompUnit, component_a?: string, component_b?: string, data_temp_unit?: TempUnit, lever_rule_mode?: LeverRuleMode): string;

package/dist/phase-diagram/utils.js

@@ -46,15 +46,13 @@ export const PHASE_DIAGRAM_DEFAULTS = Object.freeze({
     png_dpi: 150,
 });
 // Merge partial config with defaults - single helper for consistent merging
-export function merge_phase_diagram_config(config) {
-    return {
-        margin: { ...PHASE_DIAGRAM_DEFAULTS.margin, ...config.margin },
-        font_size: config.font_size ?? PHASE_DIAGRAM_DEFAULTS.font_size,
-        special_point_radius: config.special_point_radius ?? PHASE_DIAGRAM_DEFAULTS.special_point_radius,
-        tie_line: { ...PHASE_DIAGRAM_DEFAULTS.tie_line, ...config.tie_line },
-        colors: { ...PHASE_DIAGRAM_DEFAULTS.colors, ...config.colors },
-    };
-}
+export const merge_phase_diagram_config = (config) => ({
+    margin: { ...PHASE_DIAGRAM_DEFAULTS.margin, ...config.margin },
+    font_size: config.font_size ?? PHASE_DIAGRAM_DEFAULTS.font_size,
+    special_point_radius: config.special_point_radius ?? PHASE_DIAGRAM_DEFAULTS.special_point_radius,
+    tie_line: { ...PHASE_DIAGRAM_DEFAULTS.tie_line, ...config.tie_line },
+    colors: { ...PHASE_DIAGRAM_DEFAULTS.colors, ...config.colors },
+});
 // Phase colors as hex - single source of truth
 // Extended palette supports 3+ phase regions (Greek letters α through λ)
 export const PHASE_COLOR_HEX = {
@@ -231,9 +229,7 @@ export function format_composition(value, unit = `at%`, include_unit = true) {
     return include_unit ? `${formatted} ${unit}` : formatted;
 }
 // Format temperature value for display
-export function format_temperature(value, unit = `K`) {
-    return `${format_num(value, `.0f`)} ${unit}`;
-}
+export const format_temperature = (value, unit = `K`) => `${format_num(value, `.0f`)} ${unit}`;
 // Parse a two-phase region name into its two phase names
 // Returns null if the region is not exactly a two-phase region
 function parse_two_phases(name) {