matterviz 0.3.2 → 0.3.3

package/dist/phase-diagram/svg-to-diagram.js

@@ -125,10 +125,10 @@ function extract_mpds_scales(doc) {
     // This is intentional — only endpoints are used for scale mapping.
     const comp_vals = [
         ...new Set(numbers.filter((v) => v >= 0 && v <= 100 && v % 10 === 0)),
-    ].sort((a, b) => a - b);
+    ].toSorted((a, b) => a - b);
     const temp_vals = [
         ...new Set(numbers.filter((v) => v >= 100 && v % 100 === 0 && v <= 3000)),
-    ].sort((a, b) => a - b);
+    ].toSorted((a, b) => a - b);
     if (comp_vals.length < 2 || temp_vals.length < 2) {
         throw new Error(`MPDS SVG: could not infer axis ranges (found ${comp_vals.length} composition, ${temp_vals.length} temperature values)`);
     }
@@ -137,13 +137,13 @@ function extract_mpds_scales(doc) {
     const x_major_ticks = [];
     const y_major_ticks = [];
     for (const path of Array.from(doc.querySelectorAll(`path`))) {
-        const d = path.getAttribute(`d`) ?? ``;
+        const path_data = path.getAttribute(`d`) ?? ``;
         const stroke_width = parse_stroke_width(path);
         // Tick mark paths have stroke-width ~0.5
         if (stroke_width < 0.3 || stroke_width > 1.0)
             continue;
         // Parse path into absolute line segments (handles both absolute & relative commands)
-        const segments = parse_path_segments(d);
+        const segments = parse_path_segments(path_data);
         if (segments.length < 3)
             continue;
         for (const [sx1, sy1, sx2, sy2] of segments) {
@@ -163,10 +163,12 @@ function extract_mpds_scales(doc) {
         }
     }
     // Deduplicate and sort
-    const x_ticks_sorted = [...new Set(x_major_ticks.map((v) => Math.round(v * 10) / 10))]
-        .sort((a, b) => a - b);
-    const y_ticks_sorted = [...new Set(y_major_ticks.map((v) => Math.round(v * 10) / 10))]
-        .sort((a, b) => a - b);
+    const x_ticks_sorted = [
+        ...new Set(x_major_ticks.map((v) => Math.round(v * 10) / 10)),
+    ].toSorted((a, b) => a - b);
+    const y_ticks_sorted = [
+        ...new Set(y_major_ticks.map((v) => Math.round(v * 10) / 10)),
+    ].toSorted((a, b) => a - b);
     if (x_ticks_sorted.length < 2 || y_ticks_sorted.length < 2) {
         throw new Error(`MPDS SVG: could not find tick marks (found ${x_ticks_sorted.length} x-ticks, ${y_ticks_sorted.length} y-ticks)`);
     }
@@ -265,29 +267,34 @@ function extract_mpds_boundaries(doc, boundaries, x_scale, y_scale, epsilon) {
         return;
     const { left, right, top, bottom } = plot_rect;
     for (const path of Array.from(doc.querySelectorAll(`path`))) {
-        const d = path.getAttribute(`d`) ?? ``;
+        const path_data = path.getAttribute(`d`) ?? ``;
         const style = path.getAttribute(`style`) ?? ``;
         // Skip tick mark paths (stroke-width > 0.3)
         const stroke_width = parse_stroke_width(path);
         if (stroke_width > 0.3 || stroke_width === 0)
             continue;
         // Skip filled regions (phase region fills)
-        if (style.includes(`fill-rule`) || style.includes(`fill: #`) || style.includes(`fill:#`)) {
-            if (!style.includes(`fill: none`) && !style.includes(`fill:none`))
-                continue;
+        if ((style.includes(`fill-rule`) || style.includes(`fill: #`) || style.includes(`fill:#`)) &&
+            !style.includes(`fill: none`) &&
+            !style.includes(`fill:none`)) {
+            continue;
         }
         // Skip red annotation lines
         if (style.includes(`#e30016`) || style.includes(`#E30016`))
             continue;
         // Parse as simple M...L line
-        const coords = parse_ml_path(d);
+        const coords = parse_ml_path(path_data);
         if (!coords)
             continue;
         // Must be inside the plot area
-        const inside = coords.x1 >= left - 1 && coords.x1 <= right + 1 &&
-            coords.x2 >= left - 1 && coords.x2 <= right + 1 &&
-            coords.y1 >= top - 1 && coords.y1 <= bottom + 1 &&
-            coords.y2 >= top - 1 && coords.y2 <= bottom + 1;
+        const inside = coords.x1 >= left - 1 &&
+            coords.x1 <= right + 1 &&
+            coords.x2 >= left - 1 &&
+            coords.x2 <= right + 1 &&
+            coords.y1 >= top - 1 &&
+            coords.y1 <= bottom + 1 &&
+            coords.y2 >= top - 1 &&
+            coords.y2 <= bottom + 1;
         if (!inside)
             continue;
         // Skip very short segments (< 10px)
@@ -297,8 +304,7 @@ function extract_mpds_boundaries(doc, boundaries, x_scale, y_scale, epsilon) {
             continue;
         // Skip the plot border itself (connects all 4 edges)
         const touches_left = Math.abs(coords.x1 - left) < 2 || Math.abs(coords.x2 - left) < 2;
-        const touches_right = Math.abs(coords.x1 - right) < 2 ||
-            Math.abs(coords.x2 - right) < 2;
+        const touches_right = Math.abs(coords.x1 - right) < 2 || Math.abs(coords.x2 - right) < 2;
         if (touches_left && touches_right)
             continue; // spans full width = likely axis
         add_boundary(boundaries, coords, x_scale, y_scale, epsilon);
@@ -308,14 +314,14 @@ function extract_mpds_boundaries(doc, boundaries, x_scale, y_scale, epsilon) {
 // Handles both M...L...L...L...Z and M...V...H...V...Z formats
 function find_mpds_plot_rect(doc) {
     for (const path of Array.from(doc.querySelectorAll(`path`))) {
-        const d = path.getAttribute(`d`) ?? ``;
+        const path_data = path.getAttribute(`d`) ?? ``;
         const style = path.getAttribute(`style`) ?? ``;
         if (!style.includes(`fill: none`) && !style.includes(`fill:none`))
             continue;
-        if (!d.includes(`Z`) && !d.includes(`z`))
+        if (!path_data.includes(`Z`) && !path_data.includes(`z`))
             continue;
         // Parse path into absolute segments and extract corner points
-        const segments = parse_path_segments(d);
+        const segments = parse_path_segments(path_data);
         if (segments.length < 3)
             continue; // rectangle needs at least 3 segments (4th is Z)
         // Collect all x and y coordinates from segment endpoints
@@ -403,8 +409,7 @@ function extract_matplotlib_labels(doc, labels) {
         // Clean LaTeX: "La$_2$NiO$_4$ + NiO" -> "La2NiO4 + NiO"
         const text = clean_latex(comment.trim());
         // Get position from transform="translate(x, y)"
-        const pos = parse_translate(group.querySelector(`g[transform]`)) ??
-            parse_translate(group);
+        const pos = parse_translate(group.querySelector(`g[transform]`)) ?? parse_translate(group);
         if (!pos)
             continue;
         labels.push({ text, px_x: pos[0], px_y: pos[1] });
@@ -414,7 +419,7 @@ function extract_matplotlib_labels(doc, labels) {
 function extract_simple_labels(doc, labels) {
     for (const text_el of Array.from(doc.querySelectorAll(`.label-main`))) {
         // Get plain text content (strips tspan tags)
-        const text = (text_el.textContent ?? ``).replace(/\s+/g, ` `).trim();
+        const text = (text_el.textContent ?? ``).replaceAll(/\s+/g, ` `).trim();
         if (!text.includes(`+`))
             continue; // skip non-phase labels
         // Get position from transform or x/y attributes
@@ -430,7 +435,7 @@ function extract_simple_labels(doc, labels) {
 // Infer binary components from region labels
 function infer_components(labels) {
     // Sort labels by x position, split each into phases
-    const sorted = [...labels].sort((a, b) => a.px_x - b.px_x);
+    const sorted = labels.toSorted((a, b) => a.px_x - b.px_x);
     if (sorted.length < 2)
         return [`A`, `B`];
     const split = (label) => label.text.split(/\s*\+\s*/);
@@ -440,14 +445,14 @@ function infer_components(labels) {
     // For "La2NiO4 + La2O3", La2O3 is the pure A endpoint
     let comp_a = `A`;
     if (leftmost.length === 2) {
-        const right_phases = sorted.slice(-3).flatMap(split);
-        comp_a = leftmost.find((p) => !right_phases.includes(p)) ?? leftmost[1] ?? `A`;
+        const right_phases = new Set(sorted.slice(-3).flatMap(split));
+        comp_a = leftmost.find((p) => !right_phases.has(p)) ?? leftmost[1] ?? `A`;
     }
     // Component B: the unique phase in the rightmost region that doesn't appear on the left
     let comp_b = `B`;
     if (rightmost.length === 2) {
-        const left_phases = sorted.slice(0, 3).flatMap(split);
-        comp_b = rightmost.find((p) => !left_phases.includes(p)) ?? rightmost[1] ?? `B`;
+        const left_phases = new Set(sorted.slice(0, 3).flatMap(split));
+        comp_b = rightmost.find((p) => !left_phases.has(p)) ?? rightmost[1] ?? `B`;
     }
     return [comp_a, comp_b];
 }
@@ -540,12 +545,13 @@ function infer_regions(boundaries, labels, x_scale, y_scale) {
     for (let region_id = 0; region_id < next_region_id; region_id++) {
         const name = region_labels.get(region_id) ?? `Region ${region_id + 1}`;
         // Slug can be empty for non-ASCII labels like "α + β" — fall back to region_N
-        const slug = name.toLowerCase().replace(/[^a-z0-9]+/g, `_`).replace(/^_|_$/g, ``) || `region_${region_id + 1}`;
+        const slug = name
+            .toLowerCase()
+            .replaceAll(/[^a-z0-9]+/g, `_`)
+            .replaceAll(/^_|_$/g, ``) || `region_${region_id + 1}`;
         // Find bounding box of all cells in this region
-        let min_x = Infinity;
-        let max_x = -Infinity;
-        let min_y = Infinity;
-        let max_y = -Infinity;
+        let [min_x, max_x] = [Infinity, -Infinity];
+        let [min_y, max_y] = [Infinity, -Infinity];
         for (let col = 0; col < n_cols; col++) {
             for (let row = 0; row < n_rows; row++) {
                 if (cell_ids[col][row] !== region_id)
@@ -627,9 +633,7 @@ export function parse_phase_diagram_svg(svg_string) {
     const { x_scale, y_scale } = extract_axis_scales(doc, format);
     const boundaries = extract_boundaries(doc, format, x_scale, y_scale);
     const labels = extract_labels(doc, format);
-    const components = format === `mpds`
-        ? infer_mpds_components(doc)
-        : infer_components(labels);
+    const components = format === `mpds` ? infer_mpds_components(doc) : infer_components(labels);
     if (boundaries.length === 0) {
         throw new Error(`No phase boundaries found in SVG`);
     }
@@ -666,7 +670,7 @@ function infer_mpds_components(doc) {
 // === Utility Functions ===
 // Parse stroke-width from style attribute or direct attribute (returns 0 if not found)
 function parse_stroke_width(el) {
-    const style_match = (el.getAttribute(`style`) ?? ``).match(/stroke-width:\s*([\d.]+)/);
+    const style_match = /stroke-width:\s*([\d.]+)/.exec(el.getAttribute(`style`) ?? ``);
     if (style_match)
         return parseFloat(style_match[1]);
     const attr = el.getAttribute(`stroke-width`);
@@ -718,24 +722,24 @@ function find_comment_text(group) {
 // Clean LaTeX subscript notation: "La$_2$NiO$_4$" -> "La2NiO4"
 function clean_latex(text) {
     return text
-        .replace(/\$_\{([^}]*)\}\$/g, `$1`) // $_{10}$ -> 10
-        .replace(/\$_(\d)\$/g, `$1`) // $_2$ -> 2
-        .replace(/\$/g, ``) // remove any remaining $
-        .replace(/\s+/g, ` `)
+        .replaceAll(/\$_\{([^}]*)\}\$/g, `$1`) // $_{10}$ -> 10
+        .replaceAll(/\$_(\d)\$/g, `$1`) // $_2$ -> 2
+        .replaceAll(`$`, ``) // remove any remaining $
+        .replaceAll(/\s+/g, ` `)
         .trim();
 }
 // Parse SVG path data into absolute line segments [x1,y1,x2,y2]
 // Handles all SVG path commands (M/L/H/V/C/S/Q/T/A/Z, both absolute and relative)
 // Curves (C/S/Q/T/A) are approximated as straight lines from start to endpoint
 // After M/m, implicit coordinates are treated as L/l per SVG spec
-function parse_path_segments(d) {
+function parse_path_segments(path_str) {
     const segments = [];
     let [cursor_x, cursor_y] = [0, 0];
     let [start_x, start_y] = [0, 0];
     let last_cmd = ``;
     // Numbers to skip before the endpoint x,y for each curve command
     const curve_skip = { C: 4, S: 2, Q: 2, T: 0, A: 5 };
-    const tokens = d.match(/[MmLlHhVvCcSsQqTtAaZz]|[-+]?[\d]*\.?[\d]+(?:[eE][-+]?\d+)?/g);
+    const tokens = path_str.match(/[MmLlHhVvCcSsQqTtAaZz]|[-+]?[\d]*\.?[\d]+(?:[eE][-+]?\d+)?/g);
     if (!tokens)
         return segments;
     let idx = 0;
@@ -813,8 +817,8 @@ function parse_path_segments(d) {
 }
 // Parse a simple 2-point line path (M...L only). Returns null for multi-segment paths
 // to enforce the single-line contract expected by boundary extraction.
-function parse_ml_path(d) {
-    const segments = parse_path_segments(d);
+function parse_ml_path(path_str) {
+    const segments = parse_path_segments(path_str);
     if (segments.length !== 1)
         return null;
     const [x1, y1, x2, y2] = segments[0];
@@ -823,7 +827,7 @@ function parse_ml_path(d) {
 // Parse translate(x, y) or translate(x) from a transform attribute
 // Single-arg translate uses implicit y=0 per SVG spec
 function parse_translate(el) {
-    const match = (el?.getAttribute(`transform`) ?? ``).match(/translate\(\s*([\d.eE+-]+)(?:\s*[,\s]\s*([\d.eE+-]+))?\s*\)/);
+    const match = /translate\(\s*([\d.eE+-]+)(?:\s*[,\s]\s*([\d.eE+-]+))?\s*\)/.exec(el?.getAttribute(`transform`) ?? ``);
     if (!match)
         return null;
     return [parseFloat(match[1]), match[2] ? parseFloat(match[2]) : 0];
@@ -837,7 +841,7 @@ function get_group_translate(el, axis) {
 function collect_unique_sorted(values) {
     if (values.length === 0)
         return [];
-    const sorted = [...values].sort((a, b) => a - b);
+    const sorted = values.toSorted((a, b) => a - b);
     const unique = [sorted[0]];
     for (let idx = 1; idx < sorted.length; idx++) {
         if (Math.abs(sorted[idx] - unique[unique.length - 1]) > 1e-4) {

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

@@ -115,3 +115,4 @@ export declare function format_formula_svg(formula: string, use_subscripts?: boo
 export declare const format_label_svg: (label: string, use_subscripts?: boolean) => string;
 export declare const format_label_html: (label: string, use_subscripts?: boolean) => string;
 export declare function format_formula_html(formula: string, use_subscripts?: boolean): string;
+export declare function compute_x_domain(x_range: [number | null, number | null] | undefined, data: PhaseDiagramData | null): Vec2;

package/dist/phase-diagram/utils.js

@@ -7,17 +7,9 @@ export function convert_temp(value, from, to) {
     if (from === to)
         return value;
     // Convert to Kelvin first
-    const kelvin = from === `°C`
-        ? value + 273.15
-        : from === `°F`
-            ? (value - 32) * (5 / 9) + 273.15
-            : value;
+    const kelvin = from === `°C` ? value + 273.15 : from === `°F` ? (value - 32) * (5 / 9) + 273.15 : value;
     // Convert from Kelvin to target
-    return to === `K`
-        ? kelvin
-        : to === `°C`
-            ? kelvin - 273.15
-            : (kelvin - 273.15) * (9 / 5) + 32;
+    return to === `K` ? kelvin : to === `°C` ? kelvin - 273.15 : (kelvin - 273.15) * (9 / 5) + 32;
 }
 // Centralized defaults for phase diagram configuration (single source of truth)
 export const PHASE_DIAGRAM_DEFAULTS = Object.freeze({
@@ -58,8 +50,7 @@ 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,
+        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 },
     };
@@ -136,7 +127,10 @@ export function get_phase_color(name, format = `rgba`) {
 export function get_multi_phase_gradient(name) {
     if (!name.includes(`+`))
         return null;
-    const phases = name.split(`+`).map((s) => s.trim()).filter(Boolean);
+    const phases = name
+        .split(`+`)
+        .map((s) => s.trim())
+        .filter(Boolean);
     if (phases.length < 2)
         return null;
     // Create evenly spaced gradient stops (phases.length >= 2 guaranteed by early return)
@@ -157,11 +151,13 @@ export function find_phase_at_point(composition, temperature, data) {
     return null;
 }
 // SVG path generator using d3-shape
-const path_line = line().x((d) => d[0]).y((d) => d[1]);
+const path_line = line()
+    .x((d) => d[0])
+    .y((d) => d[1]);
 // Generate closed SVG path for polygon regions (min 3 points)
 export const generate_region_path = (vertices) => vertices.length < 3 ? `` : `${path_line(vertices)} Z`;
 // Generate open SVG path for boundary curves (min 2 points)
-export const generate_boundary_path = (points) => points.length < 2 ? `` : path_line(points) ?? ``;
+export const generate_boundary_path = (points) => points.length < 2 ? `` : (path_line(points) ?? ``);
 // Compute label properties (rotation, wrapping, scale) to fit within region bounds
 export function compute_label_properties(label, bounds, font_size) {
     if (bounds.width <= 0 || bounds.height <= 0 || !label || font_size <= 0) {
@@ -245,7 +241,10 @@ export function format_temperature(value, unit = `K`) {
 function parse_two_phases(name) {
     if (!name.includes(`+`))
         return null;
-    const parts = name.trim().split(/\s*\+\s*/).filter(Boolean);
+    const parts = name
+        .trim()
+        .split(/\s*\+\s*/)
+        .filter(Boolean);
     return parts.length === 2 ? [parts[0], parts[1]] : null;
 }
 // Find polygon edge intersections along a scan line (horizontal or vertical)
@@ -259,11 +258,10 @@ function find_polygon_intersections(vertices, fixed_val, axis) {
         const v2 = vertices[(idx + 1) % vertices.length];
         if ((v1[axis] <= fixed_val && v2[axis] > fixed_val) ||
             (v2[axis] <= fixed_val && v1[axis] > fixed_val)) {
-            intersections.push(v1[other] +
-                ((fixed_val - v1[axis]) / (v2[axis] - v1[axis])) * (v2[other] - v1[other]));
+            intersections.push(v1[other] + ((fixed_val - v1[axis]) / (v2[axis] - v1[axis])) * (v2[other] - v1[other]));
         }
     }
-    return intersections.sort((a, b) => a - b);
+    return intersections.toSorted((a, b) => a - b);
 }
 function pick_bracketing_intersection_pair(intersections, position) {
     if (intersections.length < 2)
@@ -404,7 +402,7 @@ export function summarize_models(phases) {
         counts.set(phase.sublattice_count, (counts.get(phase.sublattice_count) ?? 0) + 1);
     }
     return [...counts.entries()]
-        .sort(([sl_a], [sl_b]) => sl_a - sl_b)
+        .toSorted(([sl_a], [sl_b]) => sl_a - sl_b)
         .map(([sublattices, count]) => `${count}×${sublattices}-SL`)
         .join(`, `);
 }
@@ -486,7 +484,7 @@ export function tokenize_formula(formula) {
         // Any other character (lowercase, hyphen, etc.) - collect as text
         let text = char;
         idx++;
-        while (idx < formula.length && !/[A-Z\d\-]/.test(formula[idx])) {
+        while (idx < formula.length && !/[A-Z\d-]/.test(formula[idx])) {
             text += formula[idx];
             idx++;
         }
@@ -530,11 +528,14 @@ export function format_formula_svg(formula, use_subscripts = true) {
 function format_label_parts(label, use_subscripts, formatter) {
     if (!use_subscripts)
         return label;
-    return label.split(/(\s*\+\s*)/).map((part) => {
+    return label
+        .split(/(\s*\+\s*)/)
+        .map((part) => {
         if (part.trim() === `+`)
             return part;
         return formatter(part.trim(), use_subscripts);
-    }).join(``);
+    })
+        .join(``);
 }
 // Format a phase region label (e.g. "La2NiO4 + NiO") as SVG with subscripts
 export const format_label_svg = (label, use_subscripts = true) => format_label_parts(label, use_subscripts, format_formula_svg);
@@ -545,7 +546,61 @@ export function format_formula_html(formula, use_subscripts = true) {
     if (!use_subscripts || !is_compound(formula))
         return formula;
     return tokenize_formula(formula)
-        .map((token) => token.text ??
-        (token.sub ? `<sub>${token.sub}</sub>` : `<sup>${token.sup}</sup>`))
+        .map((token) => token.text ?? (token.sub ? `<sub>${token.sub}</sub>` : `<sup>${token.sup}</sup>`))
         .join(``);
 }
+// Compute the x-axis domain for a binary phase diagram.
+// Uses explicit range if fully specified, otherwise derives from data extent
+// and auto-extends to 0/1 when edge regions contain pure components.
+export function compute_x_domain(x_range, data) {
+    const lo = x_range?.[0];
+    const hi = x_range?.[1];
+    if (lo != null && hi != null)
+        return [lo, hi];
+    if (data) {
+        let data_min = Infinity;
+        let data_max = -Infinity;
+        const update = (val) => {
+            if (val < data_min)
+                data_min = val;
+            if (val > data_max)
+                data_max = val;
+        };
+        for (const region of data.regions) {
+            for (const vertex of region.vertices)
+                update(vertex[0]);
+        }
+        for (const boundary of data.boundaries) {
+            for (const point of boundary.points)
+                update(point[0]);
+        }
+        for (const special_point of data.special_points ?? []) {
+            update(special_point.position[0]);
+        }
+        if (data_min <= data_max) {
+            let x_min = lo ?? data_min;
+            let x_max = hi ?? data_max;
+            // Auto-extend to 0/1 when edge regions contain a pure component AND the
+            // data already nearly reaches the boundary
+            const comp_at_edge = (comp, x_val) => {
+                const re = new RegExp(`\\b${comp.replaceAll(/[.*+?^${}()|[\]\\]/g, `\\$&`)}\\b`);
+                return data.regions.some((region) => re.test(region.name) &&
+                    region.vertices.some((vertex) => Math.abs(vertex[0] - x_val) < 1e-6));
+            };
+            if (lo == null &&
+                x_min < 0.05 &&
+                data.components[0] &&
+                comp_at_edge(data.components[0], x_min)) {
+                x_min = 0;
+            }
+            if (hi == null &&
+                x_max > 0.95 &&
+                data.components[1] &&
+                comp_at_edge(data.components[1], x_max)) {
+                x_max = 1;
+            }
+            return [x_min, x_max];
+        }
+    }
+    return [lo ?? 0, hi ?? 1];
+}

package/dist/plot/AxisLabel.svelte

@@ -1,6 +1,31 @@
-<script lang="ts">import { AXIS_LABEL_CONTAINER } from './axis-utils';
-import InteractiveAxisLabel from './InteractiveAxisLabel.svelte';
-let { x, y, rotate = false, label = ``, options, selected_key, color, loading = false, axis_type, on_select, } = $props();
+<script lang="ts">
+  import { AXIS_LABEL_CONTAINER } from './axis-utils'
+  import type { AxisOption } from './types'
+  import InteractiveAxisLabel from './InteractiveAxisLabel.svelte'
+
+  let {
+    x,
+    y,
+    rotate = false,
+    label = ``,
+    options,
+    selected_key,
+    color,
+    loading = false,
+    axis_type,
+    on_select,
+  }: {
+    x: number
+    y: number
+    rotate?: boolean
+    label?: string
+    options?: AxisOption[]
+    selected_key?: string
+    color?: string | null
+    loading?: boolean
+    axis_type: `x` | `x2` | `y` | `y2`
+    on_select?: (key: string) => void
+  } = $props()
 </script>
 
 <foreignObject