matterviz 0.3.0 → 0.3.2

package/dist/plot/BarPlot.svelte.d.ts

@@ -54,12 +54,12 @@ declare function $$render<Metadata extends Record<string, unknown> = Record<stri
         on_ref_line_click?: (event: RefLineEvent) => void;
         on_ref_line_hover?: (event: RefLineEvent | null) => void;
         data_loader?: DataLoaderFn<Metadata, BarSeries<Metadata>>;
-        on_axis_change?: (axis: `x` | `y` | `y2`, key: string, new_series: BarSeries<Metadata>[]) => void;
+        on_axis_change?: (axis: `x` | `x2` | `y` | `y2`, key: string, new_series: BarSeries<Metadata>[]) => void;
         on_error?: (error: AxisLoadError) => void;
         pan?: PanConfig;
     };
     exports: {};
-    bindings: "display" | "mode" | "orientation" | "fullscreen" | "series" | "hovered" | "ref_lines" | "show_controls" | "controls_open" | "x_axis" | "y_axis" | "y2_axis";
+    bindings: "display" | "mode" | "orientation" | "series" | "show_controls" | "controls_open" | "x_axis" | "x2_axis" | "y_axis" | "y2_axis" | "fullscreen" | "hovered" | "ref_lines";
     slots: {};
     events: {};
 };
@@ -67,7 +67,7 @@ declare class __sveltets_Render<Metadata extends Record<string, unknown> = Recor
     props(): ReturnType<typeof $$render<Metadata>>['props'];
     events(): ReturnType<typeof $$render<Metadata>>['events'];
     slots(): ReturnType<typeof $$render<Metadata>>['slots'];
-    bindings(): "display" | "mode" | "orientation" | "fullscreen" | "series" | "hovered" | "ref_lines" | "show_controls" | "controls_open" | "x_axis" | "y_axis" | "y2_axis";
+    bindings(): "display" | "mode" | "orientation" | "series" | "show_controls" | "controls_open" | "x_axis" | "x2_axis" | "y_axis" | "y2_axis" | "fullscreen" | "hovered" | "ref_lines";
     exports(): {};
 }
 interface $$IsomorphicComponent {

package/dist/plot/BarPlotControls.svelte

@@ -2,19 +2,20 @@
 import { PlotControls } from './';
 // Unique ID prefix to avoid conflicts when multiple instances on same page
 const uid = crypto.randomUUID().slice(0, 8);
-let { orientation = $bindable(`vertical`), mode = $bindable(`overlay`), x_axis = $bindable({}), y_axis = $bindable({}), y2_axis = $bindable({}), display = $bindable({}), show_controls = $bindable(false), controls_open = $bindable(false), children, ...rest } = $props();
+let { orientation = $bindable(`vertical`), mode = $bindable(`overlay`), x_axis = $bindable({}), x2_axis = $bindable({}), y_axis = $bindable({}), y2_axis = $bindable({}), display = $bindable({}), show_controls = $bindable(false), controls_open = $bindable(false), children, ...rest } = $props();
 </script>
 
 <PlotControls
   bind:show_controls
   bind:controls_open
   bind:x_axis
+  bind:x2_axis
   bind:y_axis
   bind:y2_axis
   bind:display
   {...rest}
 >
-  {@render children?.({ orientation, mode, x_axis, y_axis, y2_axis, display })}
+  {@render children?.({ orientation, mode, x_axis, x2_axis, y_axis, y2_axis, display })}
   <SettingsSection
     title="Layout"
     current_values={{ orientation, mode }}

package/dist/plot/BarPlotControls.svelte.d.ts

@@ -13,6 +13,6 @@ type $$ComponentProps = Omit<PlotControlsProps, `children` | `post_children`> &
         } & Required<PlotConfig>
     ]>;
 };
-declare const BarPlotControls: import("svelte").Component<$$ComponentProps, {}, "display" | "mode" | "orientation" | "show_controls" | "controls_open" | "x_axis" | "y_axis" | "y2_axis">;
+declare const BarPlotControls: import("svelte").Component<$$ComponentProps, {}, "display" | "mode" | "orientation" | "show_controls" | "controls_open" | "x_axis" | "x2_axis" | "y_axis" | "y2_axis">;
 type BarPlotControls = ReturnType<typeof BarPlotControls>;
 export default BarPlotControls;

package/dist/plot/ColorBar.svelte

@@ -503,40 +503,40 @@ let div_style = $derived(`
     background: var(--cbar-tick-label-bg);
     padding: var(--cbar-tick-label-padding, 0 2px);
     white-space: nowrap;
-  }
-  /* --- Horizontal Ticks --- */
-  .tick-label.horizontal {
-    transform: translateX(-50%); /* Center horizontally by default */
-  }
-  .tick-label.horizontal.tick-primary {
-    top: 100%; /* Position below bar */
-    margin-top: var(--cbar-tick-offset, 0);
-  }
-  .tick-label.horizontal.tick-secondary {
-    bottom: 100%; /* Position above bar */
-    margin-bottom: var(--cbar-tick-offset, 0);
-  }
-  .tick-label.horizontal.tick-inside {
-    top: 50%; /* Center vertically */
-    transform: translate(-50%, -50%); /* Center horizontally and vertically */
-    margin: 0; /* No extra margin for inside */
-  }
-  /* --- Vertical Ticks --- */
-  .tick-label.vertical {
-    transform: translateY(-50%); /* Center vertically by default */
-  }
-  .tick-label.vertical.tick-primary {
-    left: 100%; /* Position right of bar */
-    padding-left: var(--cbar-tick-offset, 0);
-  }
-  .tick-label.vertical.tick-secondary {
-    right: 100%; /* Position left of bar */
-    padding-right: var(--cbar-tick-offset, 0);
-  }
-  .tick-label.vertical.tick-inside {
-    left: 50%; /* Center horizontally */
-    transform: translate(-50%, -50%); /* Center horizontally and vertically */
-    padding: 0; /* No extra padding for inside */
+    /* --- Horizontal Ticks --- */
+    &.horizontal {
+      transform: translateX(-50%); /* Center horizontally by default */
+      &.tick-primary {
+        top: 100%; /* Position below bar */
+        margin-top: var(--cbar-tick-offset, 0);
+      }
+      &.tick-secondary {
+        bottom: 100%; /* Position above bar */
+        margin-bottom: var(--cbar-tick-offset, 0);
+      }
+      &.tick-inside {
+        top: 50%; /* Center vertically */
+        transform: translate(-50%, -50%); /* Center horizontally and vertically */
+        margin: 0; /* No extra margin for inside */
+      }
+    }
+    /* --- Vertical Ticks --- */
+    &.vertical {
+      transform: translateY(-50%); /* Center vertically by default */
+      &.tick-primary {
+        left: 100%; /* Position right of bar */
+        margin-left: var(--cbar-tick-offset, 1pt);
+      }
+      &.tick-secondary {
+        right: 100%; /* Position left of bar */
+        margin-right: var(--cbar-tick-offset, 1pt);
+      }
+      &.tick-inside {
+        left: 50%; /* Center horizontally */
+        transform: translate(-50%, -50%); /* Center horizontally and vertically */
+        padding: 0; /* No extra padding for inside */
+      }
+    }
   }
   /* Title row with optional selects */
   .title-row {
@@ -545,25 +545,25 @@ let div_style = $derived(`
     gap: var(--cbar-select-gap, 0.3em);
     white-space: nowrap;
     width: auto;
-  }
-  .title-row:is(.left, .right) {
-    flex-direction: column;
-  }
-  /* Rotate only the label element, not the entire row (keeps selects usable) */
-  /* Only rotate when orientation is vertical AND title is on left/right side */
-  .title-row.vertical:is(.left, .right) .label {
-    writing-mode: vertical-lr;
-    white-space: nowrap;
-  }
-  .title-row.vertical.left .label {
-    transform: rotate(180deg);
-  }
-  /* Style PortalSelect triggers in colorbar context */
-  .title-row :global(:is(.property-select, .color-scale-select)) {
-    padding: 0 4px;
-  }
-  .title-row.loading :global(.property-select) {
-    opacity: 0.6;
-    pointer-events: none;
+    &:is(.left, .right) {
+      flex-direction: column;
+    }
+    /* Rotate only the label element, not the entire row (keeps selects usable) */
+    /* Only rotate when orientation is vertical AND title is on left/right side */
+    &.vertical:is(.left, .right) .label {
+      writing-mode: vertical-lr;
+      white-space: nowrap;
+    }
+    &.vertical.left .label {
+      transform: rotate(180deg);
+    }
+    /* Style PortalSelect triggers in colorbar context */
+    :global(:is(.property-select, .color-scale-select)) {
+      padding: 0 4px;
+    }
+    &.loading :global(.property-select) {
+      opacity: 0.6;
+      pointer-events: none;
+    }
   }
 </style>

package/dist/plot/ColorBar.svelte.d.ts

@@ -26,6 +26,6 @@ type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
     selected_color_scale_key?: string;
     on_color_scale_change?: (key: string) => void;
 };
-declare const ColorBar: import("svelte").Component<$$ComponentProps, {}, "title" | "color_scale" | "tick_labels" | "range" | "nice_range" | "selected_property_key" | "selected_color_scale_key">;
+declare const ColorBar: import("svelte").Component<$$ComponentProps, {}, "title" | "range" | "color_scale" | "tick_labels" | "nice_range" | "selected_property_key" | "selected_color_scale_key">;
 type ColorBar = ReturnType<typeof ColorBar>;
 export default ColorBar;

package/dist/plot/ElementScatter.svelte

@@ -22,7 +22,7 @@ $effect.pre(() => {
       x: [...Array(y.length + 1).keys()].slice(1),
       y,
       color_values: y,
-      point_style: { radius: 4 },
+      point_style: { radius: 2 },
     },
   ]}
   bind:tooltip_point
@@ -35,7 +35,8 @@ $effect.pre(() => {
   {...rest}
 >
   {#snippet tooltip({ x, y })}
-    <strong>{x} - {element_data[x - 1]?.name}</strong><br />
-    {y_axis.label} = {format_num(y, y_axis.format ?? `~s`)}{y_unit ?? ``}
+    {@const elem = element_data[x - 1]}
+    <strong>{elem ? `${x} ${elem.symbol} - ${elem.name}` : `Element ${x}`}</strong><br />
+    {@html y_axis.label || `Value`}: {format_num(y, y_axis.format ?? `~s`)}{y_unit ?? ``}
   {/snippet}
 </ScatterPlot>

package/dist/plot/FillArea.svelte

@@ -52,6 +52,8 @@ function handle_keydown(event) {
             return;
         // For keyboard activation, use center of element or default coordinates
         const target = event.currentTarget;
+        if (!(target instanceof SVGElement))
+            return;
         const rect = target.ownerSVGElement?.getBoundingClientRect();
         const element_rect = target.getBoundingClientRect();
         // Use center of the fill region element
@@ -79,7 +81,8 @@ function handle_keydown(event) {
 }
 // Construct FillHandlerEvent from MouseEvent
 function construct_event(event) {
-    const rect = event.currentTarget.ownerSVGElement
+    const current = event.currentTarget;
+    const rect = (current instanceof SVGElement ? current.ownerSVGElement : null)
         ?.getBoundingClientRect();
     const px = event.clientX - (rect?.left ?? 0);
     const py = event.clientY - (rect?.top ?? 0);