matterviz 0.3.2 → 0.3.3

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

@@ -39,6 +39,6 @@ type Props = HTMLAttributes<HTMLDivElement> & {
         }
     ]>;
 };
-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">;
+declare const IsobaricBinaryPhaseDiagram: import("svelte").Component<Props, {}, "fullscreen" | "controls_open" | "x_axis" | "y_axis" | "show_grid" | "wrapper" | "hovered_region" | "config" | "show_boundaries" | "show_labels" | "show_special_points" | "show_component_labels" | "png_dpi" | "export_pane_open" | "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,46 +1,105 @@
-<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 { tooltip } from 'svelte-multiselect/attachments';
-import { merge_phase_diagram_config, PHASE_DIAGRAM_DEFAULTS } from './utils';
-let { controls_open = $bindable(false), 
-// Visibility toggles
-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
-data, 
-// Export
-enable_export = true, png_dpi = $bindable(PHASE_DIAGRAM_DEFAULTS.png_dpi), 
-// Pane props
-pane_props = {}, toggle_props = {}, 
-// Snippets
-children, post_children, ...rest } = $props();
-// Merged config using shared helper
-const merged_config = $derived(merge_phase_diagram_config(config));
-// Helper to update top-level config properties (e.g., font_size, special_point_radius)
-function update_config(key, value) {
-    config = { ...config, [key]: value };
-}
-// Helper to update nested config properties
-function update_nested(key, prop, value) {
-    config = { ...config, [key]: { ...config[key], [prop]: value } };
-}
-// Derive component info from data
-const component_a = $derived(data?.components?.[0]);
-const component_b = $derived(data?.components?.[1]);
-const title = $derived(component_a && component_b
-    ? `${component_a}-${component_b} Phase Diagram`
-    : `Phase Diagram Controls`);
-const temp_unit = $derived(data?.temperature_unit ?? `K`);
-const comp_unit = $derived(data?.composition_unit ?? `at%`);
-const has_special_points = $derived((data?.special_points?.length ?? 0) > 0);
+<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 type { AxisConfig } from '../plot'
+  import type { ComponentProps, Snippet } from 'svelte'
+  import { tooltip } from 'svelte-multiselect/attachments'
+  import type { LeverRuleMode, PhaseDiagramConfig, PhaseDiagramData } from './types'
+  import { merge_phase_diagram_config, PHASE_DIAGRAM_DEFAULTS } from './utils'
+
+  type Props = Omit<ComponentProps<typeof DraggablePane>, `children`> & {
+    controls_open?: boolean
+    // Visibility toggles
+    show_boundaries?: boolean
+    show_labels?: boolean
+    show_special_points?: boolean
+    show_grid?: boolean
+    show_component_labels?: boolean
+    // Configuration
+    config?: Partial<PhaseDiagramConfig>
+    // Lever rule mode
+    lever_rule_mode?: LeverRuleMode
+    // Axis configuration
+    x_axis?: AxisConfig
+    y_axis?: AxisConfig
+    // Data for context (components, units, etc.)
+    data?: PhaseDiagramData
+    // Export settings
+    enable_export?: boolean
+    png_dpi?: number
+    // Pane customization
+    pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`]
+    toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`]
+    // Custom content snippets
+    children?: Snippet<[{ controls_open: boolean }]>
+    post_children?: Snippet<[{ controls_open: boolean }]>
+  }
+
+  let {
+    controls_open = $bindable(false),
+    // Visibility toggles
+    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
+    data,
+    // Export
+    enable_export = true,
+    png_dpi = $bindable(PHASE_DIAGRAM_DEFAULTS.png_dpi),
+    // Pane props
+    pane_props = {},
+    toggle_props = {},
+    // Snippets
+    children,
+    post_children,
+    ...rest
+  }: Props = $props()
+
+  // Merged config using shared helper
+  const merged_config = $derived(merge_phase_diagram_config(config))
+
+  // Helper to update top-level config properties (e.g., font_size, special_point_radius)
+  function update_config<K extends keyof PhaseDiagramConfig>(
+    key: K,
+    value: PhaseDiagramConfig[K],
+  ) {
+    config = { ...config, [key]: value }
+  }
+
+  // Helper to update nested config properties
+  function update_nested<
+    K extends keyof Pick<PhaseDiagramConfig, `colors` | `tie_line`>,
+  >(
+    key: K,
+    prop: string,
+    value: string | number,
+  ) {
+    config = { ...config, [key]: { ...config[key], [prop]: value } }
+  }
+
+  // Derive component info from data
+  const component_a = $derived(data?.components?.[0])
+  const component_b = $derived(data?.components?.[1])
+  const title = $derived(
+    component_a && component_b
+      ? `${component_a}-${component_b} Phase Diagram`
+      : `Phase Diagram Controls`,
+  )
+  const temp_unit = $derived(data?.temperature_unit ?? `K`)
+  const comp_unit = $derived(data?.composition_unit ?? `at%`)
+  const has_special_points = $derived((data?.special_points?.length ?? 0) > 0)
 </script>
 
 <!-- Reusable snippet for number + range input pairs -->

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

@@ -25,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_grid" | "config" | "show_labels" | "png_dpi" | "show_boundaries" | "show_special_points" | "show_component_labels" | "lever_rule_mode">;
+declare const PhaseDiagramControls: import("svelte").Component<Props, {}, "controls_open" | "x_axis" | "y_axis" | "show_grid" | "config" | "show_boundaries" | "show_labels" | "show_special_points" | "show_component_labels" | "png_dpi" | "lever_rule_mode">;
 type PhaseDiagramControls = ReturnType<typeof PhaseDiagramControls>;
 export default PhaseDiagramControls;

package/dist/phase-diagram/PhaseDiagramEditorPane.svelte

@@ -1,45 +1,68 @@
-<script lang="ts">import { JsonTree } from '../layout/json-tree';
-import { set_at_path } from '../layout/json-tree/utils';
-import DraggablePane from '../overlays/DraggablePane.svelte';
-import { build_diagram } from './build-diagram';
-let { editor_open = $bindable(false), diagram_input = $bindable(null), data = null, ondata, icon_style = ``, toggle_props: caller_toggle_props = {}, } = $props();
-// The source object currently displayed (DiagramInput or PhaseDiagramData)
-const display_source = $derived(diagram_input ?? data);
-const root_label = `diagram`;
-// Brief error flash when an edit is rejected by build_diagram
-let rejection_msg = $state(null);
-let rejection_timer;
-function show_rejection(msg) {
-    if (rejection_timer)
-        clearTimeout(rejection_timer);
-    rejection_msg = msg;
-    rejection_timer = setTimeout(() => (rejection_msg = null), 3000);
-}
-// Shared format detection: true if obj looks like a DiagramInput
-function is_diagram_input(obj) {
-    const meta = obj.meta;
-    return Boolean(meta && Array.isArray(meta.components) && `curves` in obj);
-}
-// Handle inline value edits from JsonTree
-function handle_change(path, new_value, _old_value) {
-    if (!display_source)
-        return;
-    const updated = set_at_path(display_source, path, new_value, root_label);
-    if (is_diagram_input(updated)) {
-        try {
-            build_diagram(updated);
-            diagram_input = updated;
-        }
-        catch (err) {
-            const msg = err instanceof Error ? err.message : String(err);
-            show_rejection(msg);
-        }
-        return;
+<script lang="ts">
+  import { JsonTree } from '../layout/json-tree'
+  import { set_at_path } from '../layout/json-tree/utils'
+  import DraggablePane from '../overlays/DraggablePane.svelte'
+  import type { ComponentProps } from 'svelte'
+  import { build_diagram } from './build-diagram'
+  import type { DiagramInput } from './diagram-input'
+  import type { PhaseDiagramData } from './types'
+
+  let {
+    editor_open = $bindable(false),
+    diagram_input = $bindable<DiagramInput | null>(null),
+    data = null,
+    ondata,
+    icon_style = ``,
+    toggle_props: caller_toggle_props = {},
+  }: {
+    editor_open?: boolean
+    diagram_input?: DiagramInput | null
+    data?: PhaseDiagramData | null
+    ondata?: (data: PhaseDiagramData) => void
+    icon_style?: string
+    toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`]
+  } = $props()
+
+  // The source object currently displayed (DiagramInput or PhaseDiagramData)
+  const display_source = $derived(diagram_input ?? data)
+
+  const root_label = `diagram`
+
+  // Brief error flash when an edit is rejected by build_diagram
+  let rejection_msg = $state<string | null>(null)
+  let rejection_timer: ReturnType<typeof setTimeout> | undefined
+
+  function show_rejection(msg: string) {
+    if (rejection_timer) clearTimeout(rejection_timer)
+    rejection_msg = msg
+    rejection_timer = setTimeout(() => (rejection_msg = null), 3000)
+  }
+
+  // Shared format detection: true if obj looks like a DiagramInput
+  function is_diagram_input(obj: Record<string, unknown>): boolean {
+    const meta = obj.meta as Record<string, unknown> | undefined
+    return Boolean(meta && Array.isArray(meta.components) && `curves` in obj)
+  }
+
+  // Handle inline value edits from JsonTree
+  function handle_change(path: string, new_value: unknown, _old_value: unknown) {
+    if (!display_source) return
+    const updated = set_at_path(display_source, path, new_value, root_label)
+
+    if (is_diagram_input(updated as Record<string, unknown>)) {
+      try {
+        build_diagram(updated as DiagramInput)
+        diagram_input = updated as DiagramInput
+      } catch (error) {
+        const msg = error instanceof Error ? error.message : String(error)
+        show_rejection(msg)
+      }
+      return
     }
     // PhaseDiagramData format — clear diagram_input so rebuilt_data doesn't shadow
-    diagram_input = null;
-    ondata?.(updated);
-}
+    diagram_input = null
+    ondata?.(updated as PhaseDiagramData)
+  }
 </script>
 
 <DraggablePane

package/dist/phase-diagram/PhaseDiagramExportPane.svelte

@@ -1,31 +1,74 @@
-<script lang="ts">import { export_svg_as_png, export_svg_as_svg } from '../io/export';
-import DraggablePane from '../overlays/DraggablePane.svelte';
-import { CopyButton } from 'svelte-multiselect';
-import { tooltip } from 'svelte-multiselect/attachments';
-let { export_pane_open = $bindable(false), data, json_payload = undefined, wrapper, svg_element = undefined, svg_query_selector = `svg.binary-phase-diagram`, filename = `phase-diagram`, png_dpi = $bindable(150), icon_style = ``, toggle_props: caller_toggle_props = {}, ...rest } = $props();
-let json_copy_state = $state(`ready`);
-let svg_copy_state = $state(`ready`);
-// Generate filename with components if available (requires exactly 2 components)
-const full_filename = $derived(data?.components?.length === 2
-    ? `${filename}-${data.components[0]}-${data.components[1]}`
-    : filename);
-const svg = $derived(svg_element ??
-    wrapper?.querySelector(svg_query_selector));
-const json_export_data = $derived(json_payload ?? data);
-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);
+<script lang="ts">
+  import { export_svg_as_png, export_svg_as_svg } from '../io/export'
+  import DraggablePane from '../overlays/DraggablePane.svelte'
+  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'
+
+  let {
+    export_pane_open = $bindable(false),
+    data,
+    json_payload = undefined,
+    wrapper,
+    svg_element = undefined,
+    svg_query_selector = `svg.binary-phase-diagram`,
+    filename = `phase-diagram`,
+    png_dpi = $bindable(150),
+    icon_style = ``,
+    toggle_props: caller_toggle_props = {},
+    ...rest
+  }: HTMLAttributes<HTMLDivElement> & {
+    export_pane_open?: boolean
+    data?: PhaseDiagramData
+    json_payload?: unknown
+    wrapper?: HTMLDivElement
+    svg_element?: SVGSVGElement | null
+    svg_query_selector?: string
+    filename?: string
+    png_dpi?: number
+    icon_style?: string
+    toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`]
+  } = $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
+      ? `${filename}-${data.components[0]}-${data.components[1]}`
+      : filename,
+  )
+
+  const svg = $derived(
+    svg_element ??
+      (wrapper?.querySelector(svg_query_selector) as SVGSVGElement | null),
+  )
+
+  const json_export_data = $derived(json_payload ?? data)
+
+  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,
+  )
 </script>
 
 <DraggablePane

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

@@ -14,6 +14,6 @@ type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
     icon_style?: string;
     toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`];
 };
-declare const PhaseDiagramExportPane: import("svelte").Component<$$ComponentProps, {}, "export_pane_open" | "png_dpi">;
+declare const PhaseDiagramExportPane: import("svelte").Component<$$ComponentProps, {}, "png_dpi" | "export_pane_open">;
 type PhaseDiagramExportPane = ReturnType<typeof PhaseDiagramExportPane>;
 export default PhaseDiagramExportPane;