matterviz 0.3.1 → 0.3.3

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, {}, "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,44 +1,105 @@
-<script lang="ts">// NOTE: Axis config objects must be reassigned (not mutated) to trigger $bindable reactivity.
-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), 
-// 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({}), 
-// 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 -->
@@ -65,7 +126,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 +261,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 +291,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 +367,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 +390,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 +407,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 +432,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_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

@@ -0,0 +1,126 @@
+<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 as PhaseDiagramData)
+  }
+</script>
+
+<DraggablePane
+  bind:show={editor_open}
+  open_icon="Cross"
+  closed_icon="Edit"
+  {icon_style}
+  persistent
+  pane_props={{ class: `pd-editor-pane` }}
+  toggle_props={{
+    class: `pd-editor-toggle`,
+    title: editor_open ? `` : `Edit diagram data`,
+    ...caller_toggle_props,
+  }}
+  max_width="600px"
+>
+  {#if rejection_msg}
+    <div class="rejection-flash">{rejection_msg}</div>
+  {/if}
+  {#if display_source}
+    <JsonTree
+      value={display_source}
+      {root_label}
+      default_fold_level={2}
+      download_filename="diagram-data.json"
+      editable
+      onchange={handle_change}
+    />
+  {:else}
+    <p class="placeholder">
+      No diagram data loaded. Drop an SVG or JSON file onto the diagram.
+    </p>
+  {/if}
+</DraggablePane>
+
+<style>
+  .rejection-flash {
+    color: #d32f2f;
+    font-size: 11px;
+    padding: 4px 8px;
+    background: rgba(211, 47, 47, 0.08);
+    border-radius: 3px;
+    word-break: break-word;
+    animation: fade-out 3s ease-out forwards;
+  }
+  @keyframes fade-out {
+    0%, 80% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+  .placeholder {
+    color: var(--text-muted, #888);
+    font-style: italic;
+    text-align: center;
+    padding: 20px;
+    margin: 0;
+  }
+</style>

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

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