matterviz 0.3.3 → 0.3.5

package/dist/overlays/InfoPaneCards.svelte

@@ -0,0 +1,149 @@
+<script lang="ts">
+  import { sanitize_html } from '../sanitize'
+  import type { HTMLAttributes } from 'svelte/elements'
+  import { SvelteSet } from 'svelte/reactivity'
+  import CopyButton from './CopyButton.svelte'
+
+  type InfoPaneRow = {
+    label: string
+    value: string | number
+    key?: string
+    tooltip?: string
+  }
+  type InfoPaneCard = {
+    title: string
+    rows: InfoPaneRow[]
+  }
+
+  let {
+    cards,
+    filter_placeholder,
+    empty_label,
+    show_filter = true,
+    heading_level = 4,
+    row_label_min = `5em`,
+    ...rest
+  }: HTMLAttributes<HTMLDivElement> & {
+    cards: InfoPaneCard[]
+    filter_placeholder: string
+    empty_label: string
+    show_filter?: boolean
+    heading_level?: 4 | 5
+    row_label_min?: string
+  } = $props()
+
+  let info_filter = $state(``)
+  const copied_items = new SvelteSet<string>()
+  const row_key = (card_title: string, row: InfoPaneRow, row_idx: number): string =>
+    row.key ?? `${card_title}:${row.label}:${row.value}:${row_idx}`
+
+  let filtered_cards = $derived.by(() => {
+    const filter = info_filter.trim().toLowerCase()
+    if (!filter) return cards
+    return cards
+      .map((card) => ({
+        ...card,
+        rows: card.rows.filter(({ label, value }) =>
+          `${card.title} ${label} ${value}`.toLowerCase().includes(filter)
+        ),
+      }))
+      .filter(({ rows }) => rows.length > 0)
+  })
+
+  async function copy_row(
+    card_title: string,
+    row: InfoPaneRow,
+    row_idx: number,
+  ): Promise<void> {
+    const key = row_key(card_title, row, row_idx)
+    try {
+      await navigator.clipboard.writeText(`${row.label}: ${row.value}`)
+      copied_items.add(key)
+      setTimeout(() => copied_items.delete(key), 1000)
+    } catch (error) {
+      console.error(`Failed to copy to clipboard:`, error)
+    }
+  }
+</script>
+{#if show_filter}
+  <input
+    class="info-filter"
+    type="search"
+    bind:value={info_filter}
+    placeholder={filter_placeholder}
+    aria-label={filter_placeholder}
+  />
+{/if}
+
+{#if filtered_cards.length === 0}
+  <p class="empty-filter">No {empty_label} matches "{info_filter}".</p>
+{:else}
+  <div {...rest} class="info-cards {rest.class ?? ``}" style:--row-label-min={row_label_min}>
+    {#each filtered_cards as card (card.title)}
+      <section class="info-card">
+        <svelte:element this={`h${heading_level}`}>{card.title}</svelte:element>
+        {#each card.rows as row, row_idx (row_key(card.title, row, row_idx))}
+          <div class="info-row" data-testid={row.key}>
+            <span>{@html sanitize_html(row.label)}</span>
+            <span title={row.tooltip}>{@html sanitize_html(row.value)}</span>
+            <CopyButton
+              label="Copy {row.label}: {row.value}"
+              title="Copy {row.label}"
+              copied={copied_items.has(row_key(card.title, row, row_idx))}
+              onclick={() => copy_row(card.title, row, row_idx)}
+            />
+          </div>
+        {/each}
+      </section>
+    {/each}
+  </div>
+{/if}
+
+<style>
+  .info-filter {
+    box-sizing: border-box;
+    width: 100%;
+    margin-bottom: 5pt;
+    padding: 4pt 6pt;
+    border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
+    border-radius: var(--border-radius, 3pt);
+    background: color-mix(in srgb, var(--pane-bg, Canvas) 88%, currentColor);
+    color: inherit;
+  }
+  .empty-filter {
+    margin: 0.25em 0;
+    opacity: 0.75;
+  }
+  .info-cards {
+    display: grid;
+    gap: 5pt;
+  }
+  .info-card {
+    padding: var(--info-card-padding, 5pt);
+    border-left: 3px solid var(--accent-color, currentColor);
+    border-radius: var(--border-radius, 3pt);
+    background: var(--info-card-bg, color-mix(in srgb, currentColor 4%, transparent));
+    :is(h4, h5) {
+      margin: 0 0 var(--info-card-heading-gap, 3pt);
+    }
+  }
+  .info-row {
+    display: grid;
+    grid-template-columns: minmax(var(--row-label-min), var(--row-label-max, 0.8fr)) minmax(
+        0,
+        1fr
+      ) auto;
+    align-items: center;
+    gap: 5pt;
+    padding: var(--info-row-padding, 1pt 0);
+    line-height: 1.5;
+    span:first-child {
+      color: var(--info-row-label-color);
+    }
+    span:nth-child(2) {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+</style>

package/dist/overlays/InfoPaneCards.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type InfoPaneRow = {
+    label: string;
+    value: string | number;
+    key?: string;
+    tooltip?: string;
+};
+type InfoPaneCard = {
+    title: string;
+    rows: InfoPaneRow[];
+};
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    cards: InfoPaneCard[];
+    filter_placeholder: string;
+    empty_label: string;
+    show_filter?: boolean;
+    heading_level?: 4 | 5;
+    row_label_min?: string;
+};
+declare const InfoPaneCards: import("svelte").Component<$$ComponentProps, {}, "">;
+type InfoPaneCards = ReturnType<typeof InfoPaneCards>;
+export default InfoPaneCards;

package/dist/phase-diagram/IsobaricBinaryPhaseDiagram.svelte

@@ -48,7 +48,36 @@
     transform_vertices,
   } from './utils'
 
-  type Props = HTMLAttributes<HTMLDivElement> & {
+  let {
+    data,
+    config = $bindable({}),
+    on_phase_hover,
+    fullscreen = $bindable(false),
+    wrapper = $bindable(),
+    hovered_region = $bindable(null),
+    show_boundaries = $bindable(true),
+    show_labels = $bindable(true),
+    show_special_points = $bindable(true),
+    show_grid = $bindable(true),
+    show_component_labels = $bindable(true),
+    fullscreen_toggle = true,
+    enable_export = true,
+    show_controls = true,
+    display_temp_unit = $bindable(),
+    controls_open = $bindable(false),
+    controls_props = {},
+    export_pane_open = $bindable(false),
+    png_dpi = $bindable(150),
+    export_filename = `phase-diagram`,
+    lever_rule_mode = $bindable(`horizontal`),
+    diagram_input = $bindable<DiagramInput | null>(null),
+    editor_open = $bindable(false),
+    x_axis = $bindable({}),
+    y_axis = $bindable({}),
+    tooltip,
+    children,
+    ...rest
+  }: HTMLAttributes<HTMLDivElement> & {
     data: PhaseDiagramData
     config?: Partial<PhaseDiagramConfig>
     // Hover callback
@@ -89,38 +118,7 @@
     children?: Snippet<
       [{ width: number; height: number; fullscreen: boolean }]
     >
-  }
-
-  let {
-    data,
-    config = $bindable({}),
-    on_phase_hover,
-    fullscreen = $bindable(false),
-    wrapper = $bindable(),
-    hovered_region = $bindable(null),
-    show_boundaries = $bindable(true),
-    show_labels = $bindable(true),
-    show_special_points = $bindable(true),
-    show_grid = $bindable(true),
-    show_component_labels = $bindable(true),
-    fullscreen_toggle = true,
-    enable_export = true,
-    show_controls = true,
-    display_temp_unit = $bindable(),
-    controls_open = $bindable(false),
-    controls_props = {},
-    export_pane_open = $bindable(false),
-    png_dpi = $bindable(150),
-    export_filename = `phase-diagram`,
-    lever_rule_mode = $bindable(`horizontal`),
-    diagram_input = $bindable<DiagramInput | null>(null),
-    editor_open = $bindable(false),
-    x_axis = $bindable({}),
-    y_axis = $bindable({}),
-    tooltip,
-    children,
-    ...rest
-  }: Props = $props()
+  } = $props()
 
   // Shared icon/toggle styling for controls and export panes
   const pane_icon_style = `width: 14px; height: 14px`
@@ -229,10 +227,10 @@
   const transformed_regions = $derived(
     (effective_data?.regions ?? []).map((region) => {
       const svg_vertices = transform_vertices(region.vertices, x_scale, y_scale)
-      const { width, height } = compute_bounding_box_2d(svg_vertices)
+      const { width: box_width, height: box_height } = compute_bounding_box_2d(svg_vertices)
       const label_props = compute_label_properties(
         region.name,
-        { width, height },
+        { width: box_width, height: box_height },
         merged_config.font_size,
       )
       // Get gradient stops for multi-phase regions (2+, supports 3+ phases)

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

@@ -4,7 +4,7 @@ import type { HTMLAttributes } from 'svelte/elements';
 import type { DiagramInput } from './diagram-input';
 import PhaseDiagramControls from './PhaseDiagramControls.svelte';
 import type { LeverRuleMode, PhaseDiagramConfig, PhaseDiagramData, PhaseDiagramTooltipConfig, PhaseHoverInfo, PhaseRegion } from './types';
-type Props = HTMLAttributes<HTMLDivElement> & {
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
     data: PhaseDiagramData;
     config?: Partial<PhaseDiagramConfig>;
     on_phase_hover?: (info: PhaseHoverInfo | null) => void;
@@ -39,6 +39,6 @@ type Props = HTMLAttributes<HTMLDivElement> & {
         }
     ]>;
 };
-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">;
+declare const IsobaricBinaryPhaseDiagram: import("svelte").Component<$$ComponentProps, {}, "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

@@ -10,34 +10,6 @@
   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
@@ -65,7 +37,33 @@
     children,
     post_children,
     ...rest
-  }: Props = $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 }]>
+  } = $props()
 
   // Merged config using shared helper
   const merged_config = $derived(merge_phase_diagram_config(config))

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

@@ -2,7 +2,7 @@ import DraggablePane from '../overlays/DraggablePane.svelte';
 import type { AxisConfig } from '../plot';
 import type { ComponentProps, Snippet } from 'svelte';
 import type { LeverRuleMode, PhaseDiagramConfig, PhaseDiagramData } from './types';
-type Props = Omit<ComponentProps<typeof DraggablePane>, `children`> & {
+type $$ComponentProps = Omit<ComponentProps<typeof DraggablePane>, `children`> & {
     controls_open?: boolean;
     show_boundaries?: boolean;
     show_labels?: boolean;
@@ -25,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_grid" | "config" | "show_boundaries" | "show_labels" | "show_special_points" | "show_component_labels" | "png_dpi" | "lever_rule_mode">;
+declare const PhaseDiagramControls: import("svelte").Component<$$ComponentProps, {}, "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/parse.js

@@ -124,9 +124,9 @@ const LINE_PARSERS = [
                 .split(`,`)
                 .map((name) => name.trim())
                 .filter((name) => name.length > 0));
-            const phase = data.phases.find((phase) => phase.name.toUpperCase() === phase_name.toUpperCase());
-            if (phase)
-                phase.constituents = constituents;
+            const matched_phase = data.phases.find((candidate_phase) => candidate_phase.name.toUpperCase() === phase_name.toUpperCase());
+            if (matched_phase)
+                matched_phase.constituents = constituents;
         },
     },
     {

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

@@ -475,10 +475,10 @@ function infer_regions(boundaries, labels, x_scale, y_scale) {
     // Build cell grid: cells[col][row]
     const n_cols = x_coords.length - 1;
     const n_rows = y_coords.length - 1;
-    const cell_ids = Array.from({ length: n_cols }, () => new Array(n_rows).fill(-1));
+    const cell_ids = Array.from({ length: n_cols }, () => Array(n_rows).fill(-1));
     // Check which cell edges have boundaries
-    const h_walls = Array.from({ length: n_cols }, () => new Array(n_rows + 1).fill(false));
-    const v_walls = Array.from({ length: n_cols + 1 }, () => new Array(n_rows).fill(false));
+    const h_walls = Array.from({ length: n_cols }, () => Array(n_rows + 1).fill(false));
+    const v_walls = Array.from({ length: n_cols + 1 }, () => Array(n_rows).fill(false));
     // Mark horizontal walls (bottom/top of cells)
     for (const hb of horizontals) {
         const row = find_coord_index(y_coords, hb.y1);
@@ -720,14 +720,12 @@ function find_comment_text(group) {
     return null;
 }
 // Clean LaTeX subscript notation: "La$_2$NiO$_4$" -> "La2NiO4"
-function clean_latex(text) {
-    return text
-        .replaceAll(/\$_\{([^}]*)\}\$/g, `$1`) // $_{10}$ -> 10
-        .replaceAll(/\$_(\d)\$/g, `$1`) // $_2$ -> 2
-        .replaceAll(`$`, ``) // remove any remaining $
-        .replaceAll(/\s+/g, ` `)
-        .trim();
-}
+const clean_latex = (text) => text
+    .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
@@ -798,7 +796,7 @@ function parse_path_segments(path_str) {
             const upper = cmd.toUpperCase();
             const skip = curve_skip[upper];
             if (skip !== undefined) {
-                for (let _skip = 0; _skip < skip; _skip++)
+                for (let skip_idx = 0; skip_idx < skip; skip_idx++)
                     next_num();
                 const end_x = next_num();
                 const end_y = next_num();

package/dist/plot/BarPlot.svelte

@@ -25,7 +25,6 @@
     RefLine,
     RefLineEvent,
     ScaleType,
-    TweenedOptions,
     UserContentProps,
     XyObj,
   } from './'
@@ -70,7 +69,7 @@
   import type { Snippet } from 'svelte'
   import { untrack } from 'svelte'
   import type { HTMLAttributes } from 'svelte/elements'
-  import { Tween } from 'svelte/motion'
+  import { Tween, type TweenOptions } from 'svelte/motion'
   import { SvelteMap } from 'svelte/reactivity'
   import type { Vec2 } from '../math'
   import {
@@ -193,7 +192,7 @@
       radius_range?: [number, number]
       value_range?: [number, number]
     }
-    point_tween?: TweenedOptions<XyObj>
+    point_tween?: TweenOptions<XyObj>
     on_point_click?: (
       data: LineMarkerHandlerProps & { event: MouseEvent | KeyboardEvent },
     ) => void
@@ -366,7 +365,7 @@
 
       if (!points.length) return [0, 1]
 
-      let y_range = get_nice_data_range(
+      let computed_y_range = get_nice_data_range(
         points,
         (pt) => pt.y,
         y_limit,
@@ -384,12 +383,12 @@
 
         // Only adjust if no explicit y_range is set
         if (y_limit?.[0] == null && y_limit?.[1] == null) {
-          if (has_positive && !has_negative) y_range = [0, y_range[1]]
-          else if (has_negative && !has_positive) y_range = [y_range[0], 0]
+          if (has_positive && !has_negative) computed_y_range = [0, computed_y_range[1]]
+          else if (has_negative && !has_positive) computed_y_range = [computed_y_range[0], 0]
         }
       }
 
-      return y_range
+      return computed_y_range
     }
 
     // Get x values split by axis for range calculation
@@ -1070,6 +1069,7 @@
 
   // Legend placement stability state
   let legend_element = $state<HTMLDivElement | undefined>()
+  let hovered_legend_series_idx = $state<number | null>(null)
   const legend_hover = create_hover_lock()
   const dim_tracker = create_dimension_tracker()
   let has_initial_legend_placement = $state(false)
@@ -1102,7 +1102,7 @@
   // untrack() explicitly captures initial tween config (intentional - config set once at mount)
   const tweened_legend_coords = new Tween(
     { x: 0, y: 0 },
-    untrack(() => ({ duration: 400, ...(legend?.tween ?? {}) })),
+    untrack(() => ({ duration: 400, ...legend?.tween })),
   )
 
   // Update legend position with stability checks
@@ -1450,7 +1450,7 @@
                   y1={-(height - pad.b - pad.t)}
                   y2="0"
                   {...DEFAULT_GRID_STYLE}
-                  {...(x_axis.grid_style ?? {})}
+                  {...x_axis.grid_style}
                 />
               {/if}
               <line
@@ -1525,7 +1525,7 @@
                     y1="0"
                     y2={height - pad.b - pad.t}
                     {...DEFAULT_GRID_STYLE}
-                    {...(x2_axis.grid_style ?? {})}
+                    {...x2_axis.grid_style}
                   />
                 {/if}
                 <line
@@ -1595,7 +1595,7 @@
                   x1="0"
                   x2={width - pad.l - pad.r}
                   {...DEFAULT_GRID_STYLE}
-                  {...(y_axis.grid_style ?? {})}
+                  {...y_axis.grid_style}
                 />
               {/if}
               <line
@@ -1674,7 +1674,7 @@
                     x1={-(width - pad.l - pad.r)}
                     x2="0"
                     {...DEFAULT_GRID_STYLE}
-                    {...(y2_axis.grid_style ?? {})}
+                    {...y2_axis.grid_style}
                   />
                 {/if}
                 <line
@@ -1766,6 +1766,10 @@
             <g
               class={is_line ? `line-series` : `bar-series`}
               data-series-idx={series_idx}
+              opacity={hovered_legend_series_idx !== null &&
+                  hovered_legend_series_idx !== series_idx
+                ? 0.25
+                : 1}
             >
               {#if is_line}
                 <!-- Render as line -->
@@ -2079,7 +2083,7 @@
     </svg>
 
     <!-- Legend -->
-    {#if legend && series.length > 1}
+    {#if legend && (show_legend !== undefined ? show_legend : series.length > 1)}
       <PlotLegend
         bind:root_element={legend_element}
         {...legend}
@@ -2087,6 +2091,11 @@
         on_toggle={legend?.on_toggle || toggle_series_visibility}
         on_group_toggle={legend?.on_group_toggle || toggle_group_visibility}
         on_hover_change={legend_hover.set_locked}
+        on_item_hover={(series_idx) =>
+          (hovered_legend_series_idx = series_idx != null && series_idx >= 0
+            ? series_idx
+            : null)}
+        active_series_idx={hover_info?.series_idx ?? hovered_legend_series_idx}
         style={`
           position: absolute;
           left: ${legend_placement ? tweened_legend_coords.current.x : pad.l + 10}px;
@@ -2196,8 +2205,8 @@
     left: 0;
     width: 100vw !important;
     height: 100vh !important;
-    /* Must be higher than Structure.svelte's --struct-buttons-z-index (100000000) */
-    z-index: var(--barplot-fullscreen-z-index, 100000001);
+    /* Must be higher than Structure.svelte's --struct-buttons-z-index. */
+    z-index: var(--barplot-fullscreen-z-index, var(--z-index-overlay-nav, 100000001));
     margin: 0;
     border-radius: 0;
     background: var(--barplot-fullscreen-bg, var(--barplot-bg, var(--plot-bg)));

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

@@ -1,7 +1,8 @@
 import type { D3ColorSchemeName, D3InterpolateName } from '../colors';
-import type { AxisLoadError, BarHandlerProps, BarMode, BarSeries, BarStyle, BasePlotProps, DataLoaderFn, InternalPoint, LegendConfig, LineStyle, Orientation, PanConfig, PlotConfig, RefLine, RefLineEvent, ScaleType, TweenedOptions, UserContentProps, XyObj } from './';
+import type { AxisLoadError, BarHandlerProps, BarMode, BarSeries, BarStyle, BasePlotProps, DataLoaderFn, InternalPoint, LegendConfig, LineStyle, Orientation, PanConfig, PlotConfig, RefLine, RefLineEvent, ScaleType, UserContentProps, XyObj } from './';
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
+import { type TweenOptions } from 'svelte/motion';
 declare function $$render<Metadata extends Record<string, unknown> = Record<string, unknown>>(): {
     props: HTMLAttributes<HTMLDivElement> & BasePlotProps & PlotConfig & {
         series?: BarSeries<Metadata>[];
@@ -39,7 +40,7 @@ declare function $$render<Metadata extends Record<string, unknown> = Record<stri
             radius_range?: [number, number];
             value_range?: [number, number];
         };
-        point_tween?: TweenedOptions<XyObj>;
+        point_tween?: TweenOptions<XyObj>;
         on_point_click?: (data: (BarHandlerProps<Metadata> & {
             point: InternalPoint<Metadata>;
         }) & {

package/dist/plot/FillArea.svelte

@@ -3,12 +3,11 @@
   // Supports gradients, hover/click interactions, and animated path transitions
   import { interpolatePath } from 'd3-interpolate-path'
   import { untrack } from 'svelte'
-  import { Tween } from 'svelte/motion'
+  import { Tween, type TweenOptions } from 'svelte/motion'
   import type {
     FillGradient,
     FillHandlerEvent,
     FillRegion,
-    TweenedOptions,
   } from './types'
 
   let {
@@ -32,7 +31,7 @@
     hovered_region?: number | null
     on_click?: (event: FillHandlerEvent) => void
     on_hover?: (event: FillHandlerEvent | null) => void
-    tween_options?: TweenedOptions<string>
+    tween_options?: TweenOptions<string>
   } = $props()
 
   // Stable instance ID for gradient uniqueness (generated once per component instance)

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

@@ -1,4 +1,5 @@
-import type { FillHandlerEvent, FillRegion, TweenedOptions } from './types';
+import { type TweenOptions } from 'svelte/motion';
+import type { FillHandlerEvent, FillRegion } from './types';
 type $$ComponentProps = {
     region: FillRegion;
     region_idx: number;
@@ -13,7 +14,7 @@ type $$ComponentProps = {
     hovered_region?: number | null;
     on_click?: (event: FillHandlerEvent) => void;
     on_hover?: (event: FillHandlerEvent | null) => void;
-    tween_options?: TweenedOptions<string>;
+    tween_options?: TweenOptions<string>;
 };
 declare const FillArea: import("svelte").Component<$$ComponentProps, {}, "">;
 type FillArea = ReturnType<typeof FillArea>;