matterviz 0.3.1 → 0.3.3

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

@@ -74,6 +74,15 @@ export interface LeverRuleResult {
     fraction_left: number;
     fraction_right: number;
 }
+export interface VerticalLeverRuleResult {
+    bottom_phase: string;
+    top_phase: string;
+    bottom_temperature: number;
+    top_temperature: number;
+    fraction_bottom: number;
+    fraction_top: number;
+}
+export type LeverRuleMode = `horizontal` | `vertical`;
 export interface PhaseHoverInfo {
     region: PhaseRegion;
     composition: number;
@@ -83,6 +92,7 @@ export interface PhaseHoverInfo {
         y: number;
     };
     lever_rule?: LeverRuleResult;
+    vertical_lever_rule?: VerticalLeverRuleResult;
     special_point?: SpecialPoint;
 }
 export type PhaseDiagramTooltipConfig = TooltipConfig<PhaseHoverInfo>;

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

@@ -1,6 +1,6 @@
 import { type Vec2 } from '../math';
 import type { Sides } from '../plot';
-import type { CompUnit, LeverRuleResult, PhaseDiagramConfig, PhaseDiagramData, PhaseHoverInfo, PhaseRegion, TempUnit } from './types';
+import type { CompUnit, LeverRuleMode, LeverRuleResult, PhaseDiagramConfig, PhaseDiagramData, PhaseHoverInfo, PhaseRegion, TempUnit, VerticalLeverRuleResult } from './types';
 export declare function convert_temp(value: number, from: TempUnit, to: TempUnit): number;
 export declare const PHASE_DIAGRAM_DEFAULTS: Readonly<{
     show_boundaries: true;
@@ -90,10 +90,11 @@ export declare function compute_label_properties(label: string, bounds: {
     scale: number;
 };
 export declare function transform_vertices(vertices: Vec2[], x_scale: (val: number) => number, y_scale: (val: number) => number): Vec2[];
-export declare function format_composition(value: number, unit?: CompUnit | string, include_unit?: boolean): string;
-export declare function format_temperature(value: number, unit?: TempUnit | string): string;
+export declare function format_composition(value: number, unit?: CompUnit, include_unit?: boolean): string;
+export declare function format_temperature(value: number, unit?: TempUnit): string;
 export declare function calculate_lever_rule(region: PhaseRegion, composition: number, temperature: number): LeverRuleResult | null;
-export declare function format_hover_info_text(info: PhaseHoverInfo, temp_unit?: string, comp_unit?: string, component_a?: string, component_b?: string): string;
+export declare function calculate_vertical_lever_rule(region: PhaseRegion, composition: number, temperature: number): VerticalLeverRuleResult | null;
+export declare function format_hover_info_text(info: PhaseHoverInfo, temp_unit?: TempUnit, comp_unit?: CompUnit, component_a?: string, component_b?: string, data_temp_unit?: TempUnit, lever_rule_mode?: LeverRuleMode): string;
 export declare function get_phase_stability_range(region: PhaseRegion): {
     t_min: number;
     t_max: number;
@@ -111,4 +112,7 @@ export interface FormulaToken {
 export declare function is_compound(name: string): boolean;
 export declare function tokenize_formula(formula: string): FormulaToken[];
 export declare function format_formula_svg(formula: string, use_subscripts?: boolean): string;
+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({
@@ -49,7 +41,7 @@ export const PHASE_DIAGRAM_DEFAULTS = Object.freeze({
         special_point: `#d32f2f`,
     }),
     // Margins
-    margin: Object.freeze({ t: 25, r: 15, b: 50, l: 60 }),
+    margin: Object.freeze({ t: 25, r: 25, b: 50, l: 60 }),
     // Export
     png_dpi: 150,
 });
@@ -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 },
     };
@@ -94,7 +85,7 @@ export const PHASE_COLOR_RGB = Object.freeze(Object.fromEntries(Object.entries(P
 const PHASE_ALPHA = { two_phase: 0.5, default: 0.5, tie_line: 1 };
 export const PHASE_COLORS = Object.freeze(Object.fromEntries(Object.entries(PHASE_COLOR_HEX).map(([key, hex]) => [
     key,
-    add_alpha(hex, PHASE_ALPHA[key] ?? 0.6),
+    add_alpha(hex, key in PHASE_ALPHA ? PHASE_ALPHA[key] : 0.6),
 ])));
 // Phase pattern matching rules: [substrings to match, color key, optional prefix check]
 // Order matters: theta before eta (since "theta" contains "eta" as substring)
@@ -127,7 +118,7 @@ export function get_phase_color_key(name) {
 }
 // Get phase color - returns rgba() by default, or RGB string if format='rgb'
 export function get_phase_color(name, format = `rgba`) {
-    const lower = name.toLowerCase();
+    const lower = name.toLowerCase().trim();
     const key = lower.includes(`+`) ? `two_phase` : get_phase_color_key(name);
     return format === `rgb` ? PHASE_COLOR_RGB[key] : PHASE_COLORS[key];
 }
@@ -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)
@@ -150,17 +144,20 @@ export function find_phase_at_point(composition, temperature, data) {
     // Search regions in reverse order so later-defined regions take precedence
     for (let idx = data.regions.length - 1; idx >= 0; idx--) {
         const region = data.regions[idx];
-        if (point_in_polygon(composition, temperature, region.vertices))
+        if (point_in_polygon(composition, temperature, region.vertices)) {
             return region;
+        }
     }
     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) {
@@ -199,7 +196,7 @@ export function compute_label_properties(label, bounds, font_size) {
     }
     // Scale down as last resort (min 70%)
     const scale = Math.max(0.7, Math.min(avail_w / label_width, avail_h / line_height, 1));
-    const rotation = is_tall && avail_h / label_width > avail_w / label_width ? -90 : 0;
+    const rotation = is_tall ? -90 : 0;
     return { rotation, lines: [label], scale };
 }
 // Wrap text into multiple lines at delimiter boundaries
@@ -210,7 +207,7 @@ function wrap_text(text, max_chars) {
     const lines = [];
     let current_line = ``;
     for (const word of words) {
-        const candidate = current_line ? `${current_line}_${word}` : word;
+        const candidate = current_line ? `${current_line} ${word}` : word;
         if (candidate.length <= max_chars) {
             current_line = candidate;
         }
@@ -222,7 +219,7 @@ function wrap_text(text, max_chars) {
     }
     if (current_line)
         lines.push(current_line);
-    return lines.length > 0 ? lines : [text];
+    return lines;
 }
 // Transform data coordinates to SVG coordinates using scale functions
 export function transform_vertices(vertices, x_scale, y_scale) {
@@ -231,78 +228,158 @@ export function transform_vertices(vertices, x_scale, y_scale) {
 // Format composition value for display
 export function format_composition(value, unit = `at%`, include_unit = true) {
     if (unit === `fraction`)
-        return format_num(value, `.3f`);
-    const formatted = format_num(value * 100, `.3`);
+        return format_num(value, `.3~f`);
+    const formatted = format_num(value * 100, `.3~`);
     return include_unit ? `${formatted} ${unit}` : formatted;
 }
 // Format temperature value for display
 export function format_temperature(value, unit = `K`) {
     return `${format_num(value, `.0f`)} ${unit}`;
 }
-// Calculate lever rule for a point in a two-phase region
-// Returns null if the region is not exactly a two-phase region or calculation fails
-// Note: Lever rule is thermodynamically defined only for two-phase equilibria
-export function calculate_lever_rule(region, composition, temperature) {
-    // Only works for exactly two-phase regions (lever rule undefined for 3+ phases)
-    if (!region.name.includes(`+`))
-        return null;
-    const phase_count = region.name.split(`+`).filter((s) => s.trim()).length;
-    if (phase_count !== 2)
+// Parse a two-phase region name into its two phase names
+// Returns null if the region is not exactly a two-phase region
+function parse_two_phases(name) {
+    if (!name.includes(`+`))
         return null;
-    // Find horizontal intersections with polygon edges at this temperature
+    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)
+// For horizontal: fixed_val = temperature, returns x-intersections
+// For vertical: fixed_val = composition, returns y-intersections
+function find_polygon_intersections(vertices, fixed_val, axis) {
+    const other = axis === 0 ? 1 : 0;
     const intersections = [];
-    const n = region.vertices.length;
-    for (let idx = 0; idx < n; idx++) {
-        const [x1, y1] = region.vertices[idx];
-        const [x2, y2] = region.vertices[(idx + 1) % n];
-        if ((y1 <= temperature && y2 > temperature) || (y2 <= temperature && y1 > temperature)) {
-            intersections.push(x1 + ((temperature - y1) / (y2 - y1)) * (x2 - x1));
+    for (let idx = 0; idx < vertices.length; idx++) {
+        const v1 = vertices[idx];
+        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]));
         }
     }
+    return intersections.toSorted((a, b) => a - b);
+}
+function pick_bracketing_intersection_pair(intersections, position) {
     if (intersections.length < 2)
         return null;
-    intersections.sort((a, b) => a - b);
-    const left_composition = intersections[0];
-    const right_composition = intersections[intersections.length - 1];
-    if (composition < left_composition || composition > right_composition)
+    const unique_intersections = [];
+    const dedup_tol = 1e-9;
+    for (const value of intersections) {
+        const prev_value = unique_intersections.at(-1);
+        if (prev_value === undefined || Math.abs(value - prev_value) > dedup_tol) {
+            unique_intersections.push(value);
+        }
+    }
+    if (unique_intersections.length < 2)
+        return null;
+    const bound_tol = 1e-10;
+    for (let pair_idx = 0; pair_idx + 1 < unique_intersections.length; pair_idx += 2) {
+        const low_bound = unique_intersections[pair_idx];
+        const high_bound = unique_intersections[pair_idx + 1];
+        if (position >= low_bound - bound_tol && position <= high_bound + bound_tol) {
+            return [low_bound, high_bound];
+        }
+    }
+    // Fallback for numerical edge cases where even-odd pairing fails:
+    // pick nearest enclosing neighbors around the hovered point.
+    let left_idx = -1;
+    for (let idx = 0; idx < unique_intersections.length; idx++) {
+        if (unique_intersections[idx] <= position + bound_tol)
+            left_idx = idx;
+    }
+    if (left_idx < 0 || left_idx + 1 >= unique_intersections.length)
+        return null;
+    const left_bound = unique_intersections[left_idx];
+    const right_bound = unique_intersections[left_idx + 1];
+    return right_bound - left_bound > bound_tol ? [left_bound, right_bound] : null;
+}
+// Shared core for lever rule calculations (horizontal and vertical)
+// Parses phases, finds intersections along the scan axis, validates bounds,
+// and computes the fractional position within the two-phase region.
+function lever_rule_core(region, position, scan_val, axis) {
+    const phases = parse_two_phases(region.name);
+    if (!phases)
+        return null;
+    const intersections = find_polygon_intersections(region.vertices, scan_val, axis);
+    const bounds = pick_bracketing_intersection_pair(intersections, position);
+    if (!bounds)
+        return null;
+    const [lo, hi] = bounds;
+    const span = hi - lo;
+    if (span < 1e-10)
+        return null;
+    return { phases, lo, hi, fraction_hi: (position - lo) / span };
+}
+// Calculate lever rule for a point in a two-phase region
+// Returns null if the region is not exactly a two-phase region or calculation fails
+// Note: Lever rule is thermodynamically defined only for two-phase equilibria
+export function calculate_lever_rule(region, composition, temperature) {
+    // Horizontal scan: fixed temperature, find composition intersections
+    const core = lever_rule_core(region, composition, temperature, 1);
+    if (!core)
         return null;
-    const total_width = right_composition - left_composition;
-    if (total_width < 1e-10)
+    return {
+        left_phase: core.phases[0],
+        right_phase: core.phases[1],
+        left_composition: core.lo,
+        right_composition: core.hi,
+        fraction_left: 1 - core.fraction_hi,
+        fraction_right: core.fraction_hi,
+    };
+}
+// Calculate vertical lever rule for a point in a two-phase region
+// Uses constant composition (vertical line) to find temperature boundaries
+export function calculate_vertical_lever_rule(region, composition, temperature) {
+    // Vertical scan: fixed composition, find temperature intersections
+    const core = lever_rule_core(region, temperature, composition, 0);
+    if (!core)
         return null;
-    const fraction_right = (composition - left_composition) / total_width;
-    const fraction_left = 1 - fraction_right;
-    // Parse phase names from "α + β" format
-    const parts = region.name.split(/\s*\+\s*/);
-    const left_phase = parts[0]?.trim() || `Phase 1`;
-    const right_phase = parts[1]?.trim() || `Phase 2`;
     return {
-        left_phase,
-        right_phase,
-        left_composition,
-        right_composition,
-        fraction_left,
-        fraction_right,
+        bottom_phase: core.phases[0],
+        top_phase: core.phases[1],
+        bottom_temperature: core.lo,
+        top_temperature: core.hi,
+        fraction_bottom: 1 - core.fraction_hi,
+        fraction_top: core.fraction_hi,
     };
 }
 // Format hover info as copyable text for clipboard
-export function format_hover_info_text(info, temp_unit = `K`, comp_unit = `at%`, component_a = `A`, component_b = `B`) {
+// Only includes lever rule data for the active mode to match tooltip display
+export function format_hover_info_text(info, temp_unit = `K`, comp_unit = `at%`, component_a = `A`, component_b = `B`, data_temp_unit = temp_unit, lever_rule_mode = `horizontal`) {
+    // Convert temperature from data unit to display unit
+    const to_display = (temp) => convert_temp(temp, data_temp_unit, temp_unit);
     const lines = [
         `Phase: ${info.region.name}`,
-        `Temperature: ${format_temperature(info.temperature, temp_unit)}`,
+        `Temperature: ${format_temperature(to_display(info.temperature), temp_unit)}`,
         `Composition: ${format_composition(info.composition, comp_unit)} ${component_b} (${format_composition(1 - info.composition, comp_unit)} ${component_a})`,
     ];
-    if (info.lever_rule) {
+    if (lever_rule_mode === `horizontal` && info.lever_rule) {
         const lr = info.lever_rule;
         lines.push(``, `Lever Rule:`, `  ${lr.left_phase}: ${format_num(lr.fraction_left * 100, `.1f`)}% (at ${format_composition(lr.left_composition, comp_unit)})`, `  ${lr.right_phase}: ${format_num(lr.fraction_right * 100, `.1f`)}% (at ${format_composition(lr.right_composition, comp_unit)})`);
     }
+    if (lever_rule_mode === `vertical` && info.vertical_lever_rule) {
+        const vlr = info.vertical_lever_rule;
+        lines.push(``, `Vertical Lever Rule:`, `  ${vlr.bottom_phase}: ${format_num(vlr.fraction_bottom * 100, `.1f`)}% (at ${format_temperature(to_display(vlr.bottom_temperature), temp_unit)})`, `  ${vlr.top_phase}: ${format_num(vlr.fraction_top * 100, `.1f`)}% (at ${format_temperature(to_display(vlr.top_temperature), temp_unit)})`);
+    }
     return lines.join(`\n`);
 }
 // Calculate temperature stability range for a phase at given composition
 export function get_phase_stability_range(region) {
     if (!region.vertices?.length)
         return null;
-    const temps = region.vertices.map(([, temp]) => temp);
-    return { t_min: Math.min(...temps), t_max: Math.max(...temps) };
+    let t_min = Infinity;
+    let t_max = -Infinity;
+    for (const [, temp] of region.vertices) {
+        if (temp < t_min)
+            t_min = temp;
+        if (temp > t_max)
+            t_max = temp;
+    }
+    return { t_min, t_max };
 }
 // Extract reference/citation from TDB comments
 export function extract_tdb_reference(comments) {
@@ -325,8 +402,8 @@ export function summarize_models(phases) {
         counts.set(phase.sublattice_count, (counts.get(phase.sublattice_count) ?? 0) + 1);
     }
     return [...counts.entries()]
-        .sort(([a], [b]) => a - b)
-        .map(([n, c]) => `${c}×${n}-SL`)
+        .toSorted(([sl_a], [sl_b]) => sl_a - sl_b)
+        .map(([sublattices, count]) => `${count}×${sublattices}-SL`)
         .join(`, `);
 }
 // Check if a component name is a compound (vs single element)
@@ -342,13 +419,7 @@ export function is_compound(name) {
     // Single element pattern: one uppercase followed by optional lowercase (Fe, Ca, He, C)
     if (/^[A-Z][a-z]?$/.test(name))
         return false;
-    // Count uppercase letters without array allocation
-    let uppercase_count = 0;
-    for (const char of name) {
-        if (char >= `A` && char <= `Z`)
-            uppercase_count++;
-    }
-    return uppercase_count >= 2;
+    return (name.match(/[A-Z]/g)?.length ?? 0) >= 2;
 }
 // Tokenize a chemical formula for rendering with subscripts/superscripts
 // Examples:
@@ -413,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++;
         }
@@ -447,10 +518,29 @@ export function format_formula_svg(formula, use_subscripts = true) {
             offset += dy;
         }
     }
+    // Reset baseline after trailing subscript/superscript using a zero-width space
+    // (empty tspans may not apply dy in all SVG renderers)
     if (offset)
-        result += `<tspan dy="${-offset}em"></tspan>`;
+        result += `<tspan dy="${-offset}em">\u200B</tspan>`;
     return result;
 }
+// Split a multi-phase label on " + " and format each part with the given formatter
+function format_label_parts(label, use_subscripts, formatter) {
+    if (!use_subscripts)
+        return label;
+    return label
+        .split(/(\s*\+\s*)/)
+        .map((part) => {
+        if (part.trim() === `+`)
+            return part;
+        return formatter(part.trim(), use_subscripts);
+    })
+        .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);
+// Format a phase region label as HTML with subscripts (splits on " + ")
+export const format_label_html = (label, use_subscripts = true) => format_label_parts(label, use_subscripts, format_formula_html);
 // Format chemical formula as HTML with <sub> and <sup> tags
 export function format_formula_html(formula, use_subscripts = true) {
     if (!use_subscripts || !is_compound(formula))
@@ -459,3 +549,58 @@ export function format_formula_html(formula, use_subscripts = true) {
         .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

@@ -0,0 +1,51 @@
+<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
+  x={x - AXIS_LABEL_CONTAINER.x_offset}
+  y={y - AXIS_LABEL_CONTAINER.y_offset}
+  width={AXIS_LABEL_CONTAINER.width}
+  height={AXIS_LABEL_CONTAINER.height}
+  style="overflow: visible; pointer-events: none"
+  transform={rotate ? `rotate(-90, ${x}, ${y})` : undefined}
+>
+  <div xmlns="http://www.w3.org/1999/xhtml" style="pointer-events: auto">
+    <InteractiveAxisLabel
+      {label}
+      {options}
+      {selected_key}
+      {loading}
+      {axis_type}
+      {color}
+      {on_select}
+      class="axis-label {axis_type}-label"
+    />
+  </div>
+</foreignObject>

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

@@ -0,0 +1,16 @@
+import type { AxisOption } from './types';
+type $$ComponentProps = {
+    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;
+};
+declare const AxisLabel: import("svelte").Component<$$ComponentProps, {}, "">;
+type AxisLabel = ReturnType<typeof AxisLabel>;
+export default AxisLabel;