matterviz 0.3.1 → 0.3.2

package/dist/phase-diagram/PhaseDiagramEditorPane.svelte

@@ -0,0 +1,103 @@
+<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;
+    }
+    // PhaseDiagramData format — clear diagram_input so rebuilt_data doesn't shadow
+    diagram_input = null;
+    ondata?.(updated);
+}
+</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;

package/dist/phase-diagram/PhaseDiagramExportPane.svelte

@@ -1,30 +1,22 @@
-<script lang="ts">import DraggablePane from '../overlays/DraggablePane.svelte';
-import { export_svg_as_png, export_svg_as_svg } from '../io/export';
+<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, wrapper, filename = `phase-diagram`, png_dpi = $bindable(150), ...rest } = $props();
-// Copy button feedback state
-let copy_status = $state({
-    json: false,
-    svg: false,
-});
-const copy_confirm = `✅`;
+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(wrapper?.querySelector(`svg.binary-phase-diagram`));
-async function copy_svg() {
-    if (!svg)
-        return;
-    const svg_string = new XMLSerializer().serializeToString(svg);
-    await navigator.clipboard.writeText(svg_string);
-    copy_status.svg = true;
-    setTimeout(() => (copy_status.svg = false), 1500);
-}
+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 (!data)
+    if (!json_export_data)
         return;
-    const json_string = JSON.stringify(data, null, 2);
+    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`);
@@ -33,14 +25,7 @@ function download_json() {
     link.click();
     URL.revokeObjectURL(url);
 }
-async function copy_json() {
-    if (!data)
-        return;
-    const json_string = JSON.stringify(data, null, 2);
-    await navigator.clipboard.writeText(json_string);
-    copy_status.json = true;
-    setTimeout(() => (copy_status.json = false), 1500);
-}
+const json_string = $derived(json_export_data ? JSON.stringify(json_export_data, null, 2) : null);
 </script>
 
 <DraggablePane
@@ -48,95 +33,117 @@ async function copy_json() {
   open_icon="Cross"
   closed_icon="Export"
   pane_props={{ ...rest, class: `export-pane ${rest.class ?? ``}` }}
+  {icon_style}
   toggle_props={{
     class: `pd-export-toggle`,
     title: export_pane_open ? `` : `Export phase diagram`,
+    ...caller_toggle_props,
   }}
 >
-  <h4 id="export-as-image"
-    {@attach tooltip({
-      content: `Download or copy the phase diagram`,
-    })}
-  >
-    Export as image
-  </h4>
-  <label>
-    SVG
-    <button
-      type="button"
-      onclick={() => svg && export_svg_as_svg(svg, `${full_filename}.svg`)}
-      disabled={!svg}
-      title="Download SVG"
+  <div class="export-grid">
+    <h4 id="image"
+      {@attach tooltip({
+        content: `Download or copy the phase diagram`,
+      })}
     >
-      ⬇
-    </button>
-    <button
-      type="button"
-      onclick={copy_svg}
-      disabled={!svg}
-      title="Copy SVG to clipboard"
-    >
-      {copy_status.svg ? copy_confirm : `📋`}
-    </button>
-  </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>
-    &nbsp;(DPI: <input
-      type="number"
-      min={50}
-      max={600}
-      bind:value={png_dpi}
-      title="Export resolution in dots per inch"
-    />)
-  </label>
+      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="export-as-data"
-    {@attach tooltip({
-      content: `Export phase diagram data as JSON`,
-    })}
-  >
-    Export as data
-  </h4>
-  <label>
-    JSON
-    <button type="button" onclick={download_json} disabled={!data} title="Download JSON">
-      ⬇
-    </button>
-    <button
-      type="button"
-      onclick={copy_json}
-      disabled={!data}
-      title="Copy JSON to clipboard"
+    <h4 id="data"
+      {@attach tooltip({
+        content: `Export phase diagram data as JSON`,
+      })}
     >
-      {copy_status.json ? copy_confirm : `📋`}
-    </button>
-  </label>
+      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>
-  label {
+  .export-grid {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    gap: 4pt;
+    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;
-    margin: 0 0 0 4pt;
     box-sizing: border-box;
   }
   input {
-    margin: 0 0 0 2pt;
+    width: 3.5em;
   }
 </style>

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

@@ -1,11 +1,18 @@
+import DraggablePane from '../overlays/DraggablePane.svelte';
+import type { ComponentProps } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import type { PhaseDiagramData } from './types';
 type $$ComponentProps = 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`];
 };
 declare const PhaseDiagramExportPane: import("svelte").Component<$$ComponentProps, {}, "export_pane_open" | "png_dpi">;
 type PhaseDiagramExportPane = ReturnType<typeof PhaseDiagramExportPane>;

package/dist/phase-diagram/PhaseDiagramTooltip.svelte

@@ -1,8 +1,14 @@
 <script lang="ts">import { ATOMIC_WEIGHTS } from '../composition/parse';
 import { format_num } from '../labels';
 import { TooltipContent } from '../tooltip';
-import { format_composition, format_temperature, get_phase_stability_range, } from './utils';
-let { hover_info, temperature_unit = `K`, composition_unit = `at%`, component_a = `A`, component_b = `B`, boundaries = [], tooltip, } = $props();
+import { convert_temp, format_composition, format_formula_html, format_label_html, format_temperature, get_phase_stability_range, } from './utils';
+let { hover_info, temperature_unit = `K`, data_temperature_unit, composition_unit = `at%`, component_a = `A`, component_b = `B`, boundaries = [], lever_rule_mode = `horizontal`, use_subscripts = true, tooltip, } = $props();
+// The unit that hover_info.temperature is actually in
+const data_unit = $derived(data_temperature_unit ?? temperature_unit);
+// Convert a temperature from data unit to display unit
+function to_display(temp) {
+    return convert_temp(temp, data_unit, temperature_unit);
+}
 // Convert atomic fraction to weight fraction: wt_B = (x_B * M_B) / (x_A * M_A + x_B * M_B)
 const wt_fraction_b = $derived.by(() => {
     const mass_a = ATOMIC_WEIGHTS.get(component_a);
@@ -22,7 +28,7 @@ const special_point_info = $derived.by(() => {
         return null;
     const type = point.type;
     const position = point.position;
-    const temp = format_temperature(position[1], temperature_unit);
+    const temp = format_temperature(to_display(position[1]), temperature_unit);
     // Check if this is a melting point (at composition edge)
     const is_at_edge = position[0] <= 0.01 || position[0] >= 0.99;
     const is_melting = type === `melting_point` || type === `congruent`;
@@ -69,12 +75,41 @@ const boundary_distance = $derived.by(() => {
     }
     return min_dist;
 });
+// Normalized lever rule display data (unifies horizontal and vertical modes)
+const lever_display = $derived.by(() => {
+    if (lever_rule_mode === `vertical` && hover_info.vertical_lever_rule) {
+        const vlr = hover_info.vertical_lever_rule;
+        return {
+            label: `Lever Rule (vertical)`,
+            phase_a: vlr.bottom_phase,
+            phase_b: vlr.top_phase,
+            fraction_a: vlr.fraction_bottom,
+            fraction_b: vlr.fraction_top,
+            detail_a: format_temperature(to_display(vlr.bottom_temperature), temperature_unit),
+            detail_b: format_temperature(to_display(vlr.top_temperature), temperature_unit),
+        };
+    }
+    if (lever_rule_mode === `horizontal` && hover_info.lever_rule) {
+        const lr = hover_info.lever_rule;
+        return {
+            label: `Lever Rule`,
+            phase_a: lr.left_phase,
+            phase_b: lr.right_phase,
+            fraction_a: lr.fraction_left,
+            fraction_b: lr.fraction_right,
+            detail_a: format_composition(lr.left_composition, composition_unit),
+            detail_b: format_composition(lr.right_composition, composition_unit),
+        };
+    }
+    return null;
+});
 </script>
 
 <TooltipContent data={hover_info} snippet_arg={hover_info} {tooltip}>
   <div class="phase-diagram-tooltip">
+    <!-- Note: {@html} is safe here because region/phase names come from trusted JSON data files -->
     <header>
-      <strong>{hover_info.region.name}</strong>
+      <strong>{@html format_label_html(hover_info.region.name, use_subscripts)}</strong>
       {#if special_point_info}<span class="special-point-badge">{
           special_point_info.badge
         }</span>{/if}
@@ -86,49 +121,84 @@ const boundary_distance = $derived.by(() => {
 
     <dl>
       <dt>Temperature</dt>
-      <dd>{format_temperature(hover_info.temperature, temperature_unit)}</dd>
+      <dd>
+        {
+          format_temperature(
+            to_display(hover_info.temperature),
+            temperature_unit,
+          )
+        }
+        {#if temperature_unit !== `°C`}
+          <small>({
+              format_temperature(
+                convert_temp(hover_info.temperature, data_unit, `°C`),
+                `°C`,
+              )
+            })</small>
+        {/if}
+      </dd>
       <dt>Composition</dt>
       <dd>
-        {format_composition(hover_info.composition, composition_unit)} {component_b}
-        <small>({format_composition(1 - hover_info.composition, composition_unit)} {
-            component_a
-          })</small>
+        {format_composition(hover_info.composition, composition_unit)}
+        {@html format_formula_html(component_b, use_subscripts)}
+        <small>({format_composition(1 - hover_info.composition, composition_unit)}
+          {@html format_formula_html(component_a, use_subscripts)})</small>
       </dd>
       {#if wt_fraction_b !== null}
         <dt>Weight</dt>
         <dd>
-          {format_num(wt_fraction_b * 100, `.1f`)}% {component_b}
-          <small>({format_num((1 - wt_fraction_b) * 100, `.1f`)}% {component_a})</small>
+          {format_num(wt_fraction_b * 100, `.1f`)}%
+          {@html format_formula_html(component_b, use_subscripts)}
+          <small>({format_num((1 - wt_fraction_b) * 100, `.1f`)}%
+            {@html format_formula_html(component_a, use_subscripts)})</small>
         </dd>
       {/if}
       {#if stability}
-        <dt>Stable</dt><dd>{stability.t_min} – {stability.t_max} {temperature_unit}</dd>
+        <dt>Stable</dt><dd>
+          {format_num(to_display(stability.t_min), `.0f`)} – {
+            format_num(to_display(stability.t_max), `.0f`)
+          } {temperature_unit}
+          {#if temperature_unit !== `°C`}
+            <small>({
+                format_num(
+                  convert_temp(stability.t_min, data_unit, `°C`),
+                  `.0f`,
+                )
+              } – {
+                format_num(
+                  convert_temp(stability.t_max, data_unit, `°C`),
+                  `.0f`,
+                )
+              } °C)</small>
+          {/if}
+        </dd>
       {/if}
     </dl>
 
-    {#if hover_info.lever_rule}
-      {@const lr = hover_info.lever_rule}
+    {#if lever_display}
+      {@const ld = lever_display}
       <div class="lever">
-        <span>Lever Rule</span>
+        <span>{ld.label}</span>
         <div class="bar">
           <div
-            style:width="{lr.fraction_left * 100}%"
-            title="{lr.left_phase}: {format_num(lr.fraction_left * 100, `.1f`)}%"
+            style:width="{ld.fraction_a * 100}%"
+            title="{ld.phase_a}: {format_num(ld.fraction_a * 100, `.1f`)}%"
           >
           </div>
           <div
-            style:width="{lr.fraction_right * 100}%"
-            title="{lr.right_phase}: {format_num(lr.fraction_right * 100, `.1f`)}%"
+            style:width="{ld.fraction_b * 100}%"
+            title="{ld.phase_b}: {format_num(ld.fraction_b * 100, `.1f`)}%"
           >
           </div>
-          <i style:left="{lr.fraction_left * 100}%"></i>
+          <i style:left="{ld.fraction_a * 100}%"></i>
         </div>
         <div class="phase-info">
-          <span>{lr.left_phase}: {format_num(lr.fraction_left * 100, `.0f`)}% <small>at {
-                format_composition(lr.left_composition, composition_unit)
-              }</small></span>
-          <span>{lr.right_phase}: {format_num(lr.fraction_right * 100, `.0f`)}% <small>at
-              {format_composition(lr.right_composition, composition_unit)}</small></span>
+          <span>{@html format_formula_html(ld.phase_a, use_subscripts)}: {
+              format_num(ld.fraction_a * 100, `.0f`)
+            }% <small>at {ld.detail_a}</small></span>
+          <span>{@html format_formula_html(ld.phase_b, use_subscripts)}: {
+              format_num(ld.fraction_b * 100, `.0f`)
+            }% <small>at {ld.detail_b}</small></span>
         </div>
       </div>
     {/if}
@@ -136,8 +206,12 @@ const boundary_distance = $derived.by(() => {
     {#if boundary_distance}
       {@const { type, delta_t } = boundary_distance}
       {@const label = delta_t > 0 ? `above` : `below`}
+      {@const display_delta = Math.abs(
+        to_display(hover_info.temperature) -
+          to_display(hover_info.temperature - delta_t),
+      )}
       <div class="boundary-info">
-        {Math.round(Math.abs(delta_t))} {temperature_unit} {label} {type}
+        {Math.round(display_delta)} {temperature_unit} {label} {type}
       </div>
     {/if}
   </div>

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

@@ -1,11 +1,14 @@
-import type { PhaseBoundary, PhaseDiagramTooltipProp, PhaseHoverInfo } from './types';
+import type { CompUnit, LeverRuleMode, PhaseBoundary, PhaseDiagramTooltipProp, PhaseHoverInfo, TempUnit } from './types';
 type $$ComponentProps = {
     hover_info: PhaseHoverInfo;
-    temperature_unit?: string;
-    composition_unit?: string;
+    temperature_unit?: TempUnit;
+    data_temperature_unit?: TempUnit;
+    composition_unit?: CompUnit;
     component_a?: string;
     component_b?: string;
     boundaries?: PhaseBoundary[];
+    lever_rule_mode?: LeverRuleMode;
+    use_subscripts?: boolean;
     tooltip?: PhaseDiagramTooltipProp;
 };
 declare const PhaseDiagramTooltip: import("svelte").Component<$$ComponentProps, {}, "">;

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

@@ -4,8 +4,10 @@ export * from './diagram-input';
 export { default as IsobaricBinaryPhaseDiagram } from './IsobaricBinaryPhaseDiagram.svelte';
 export * from './parse';
 export { default as PhaseDiagramControls } from './PhaseDiagramControls.svelte';
+export { default as PhaseDiagramEditorPane } from './PhaseDiagramEditorPane.svelte';
 export { default as PhaseDiagramExportPane } from './PhaseDiagramExportPane.svelte';
 export { default as PhaseDiagramTooltip } from './PhaseDiagramTooltip.svelte';
+export { parse_phase_diagram_svg } from './svg-to-diagram';
 export { default as TdbInfoPanel } from './TdbInfoPanel.svelte';
 export * from './types';
 export * from './utils';

package/dist/phase-diagram/index.js

@@ -4,8 +4,10 @@ export * from './diagram-input';
 export { default as IsobaricBinaryPhaseDiagram } from './IsobaricBinaryPhaseDiagram.svelte';
 export * from './parse';
 export { default as PhaseDiagramControls } from './PhaseDiagramControls.svelte';
+export { default as PhaseDiagramEditorPane } from './PhaseDiagramEditorPane.svelte';
 export { default as PhaseDiagramExportPane } from './PhaseDiagramExportPane.svelte';
 export { default as PhaseDiagramTooltip } from './PhaseDiagramTooltip.svelte';
+export { parse_phase_diagram_svg } from './svg-to-diagram';
 export { default as TdbInfoPanel } from './TdbInfoPanel.svelte';
 export * from './types';
 export * from './utils';

package/dist/phase-diagram/svg-to-diagram.d.ts

@@ -0,0 +1,2 @@
+import type { DiagramInput } from './diagram-input';
+export declare function parse_phase_diagram_svg(svg_string: string): DiagramInput;