matterviz 0.3.6 → 0.4.0

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

@@ -0,0 +1,31 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { AxisOption, ColorBarDataLoaderFn, ColorScaleOption, Orientation, ScaleType } from '../types';
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    title?: string;
+    color_scale?: ((x: number) => string) | string | null;
+    title_side?: `left` | `right` | `top` | `bottom`;
+    bar_style?: string;
+    title_style?: string;
+    wrapper_style?: string;
+    tick_labels?: (string | number)[] | number;
+    tick_format?: string;
+    range?: [number, number];
+    tick_side?: `primary` | `secondary` | `inside`;
+    orientation?: Orientation;
+    snap_ticks?: boolean;
+    steps?: number;
+    nice_range?: [number, number];
+    scale_type?: ScaleType;
+    color_scale_fn?: (value: number) => string;
+    color_scale_domain?: [number, number];
+    property_options?: AxisOption[];
+    selected_property_key?: string;
+    data_loader?: ColorBarDataLoaderFn;
+    on_property_change?: (key: string, range: [number, number]) => void;
+    color_scale_options?: ColorScaleOption[];
+    selected_color_scale_key?: string;
+    on_color_scale_change?: (key: string) => void;
+};
+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/core/components/ColorScaleSelect.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import { ColorBar } from '../..'
+  import * as d3_sc from 'd3-scale-chromatic'
+  import type { ComponentProps } from 'svelte'
+  import Select from 'svelte-multiselect'
+  import type { D3InterpolateName } from '../../../colors'
+
+  let {
+    options = Object.keys(d3_sc).filter((key) =>
+      key.startsWith(`interpolate`)
+    ) as D3InterpolateName[],
+    value = $bindable(options[0]),
+    selected = $bindable([]),
+    minSelect = 1,
+    placeholder = `Select a color scale`,
+    colorbar = {},
+    ...rest
+  }: Omit<ComponentProps<typeof Select>, `options`> & {
+    options?: D3InterpolateName[]
+    value?: D3InterpolateName
+    selected?: D3InterpolateName[]
+    minSelect?: number
+    placeholder?: string
+    colorbar?: ComponentProps<typeof ColorBar>
+  } = $props()
+</script>
+
+<Select
+  {options}
+  maxSelect={1}
+  maxOptions={options.length}
+  {minSelect}
+  bind:value
+  bind:selected
+  {placeholder}
+  liOptionStyle="padding: 3pt 6pt;"
+  liSelectedStyle="width: 100%; background-color: transparent;"
+  ulSelectedStyle="display: contents;"
+  inputStyle="min-width: 0; width: 0; padding: 0; border: none; caret-color: transparent;"
+  {...rest}
+  style={`min-width: 0; ${rest.style ?? ``}`}
+>
+  {#snippet children({ option }: { option: unknown; idx: number })}
+    {@const d3_option = option as D3InterpolateName}
+    <ColorBar
+      title={d3_option.replace(/^interpolate/, ``)}
+      color_scale={d3_option}
+      tick_labels={0}
+      title_side="left"
+      wrapper_style="width: 100%;"
+      title_style="width: 6em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; font-size: 0.9rem;"
+      {...colorbar}
+    />
+  {/snippet}
+</Select>

package/dist/plot/core/components/ColorScaleSelect.svelte.d.ts

@@ -0,0 +1,15 @@
+import { ColorBar } from '../..';
+import type { ComponentProps } from 'svelte';
+import Select from 'svelte-multiselect';
+import type { D3InterpolateName } from '../../../colors';
+type $$ComponentProps = Omit<ComponentProps<typeof Select>, `options`> & {
+    options?: D3InterpolateName[];
+    value?: D3InterpolateName;
+    selected?: D3InterpolateName[];
+    minSelect?: number;
+    placeholder?: string;
+    colorbar?: ComponentProps<typeof ColorBar>;
+};
+declare const ColorScaleSelect: import("svelte").Component<$$ComponentProps, {}, "value" | "selected">;
+type ColorScaleSelect = ReturnType<typeof ColorScaleSelect>;
+export default ColorScaleSelect;

package/dist/plot/core/components/ControlPane.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  // Shared draggable controls-pane shell (gear toggle + settings pane) used by plot/diagram
+  // controls components. Centralizes the toggle/pane styling and the `*-controls-toggle` /
+  // `*-controls-pane` class convention so it lives in one place instead of being re-typed in
+  // every *Controls component (PlotControls, SankeyControls, ...).
+  import { DraggablePane } from '../../../overlays'
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  let {
+    controls_open = $bindable(false),
+    controls_class = `plot`,
+    title = controls_class || `plot`,
+    toggle_props = {},
+    pane_props = {},
+    children,
+  }: {
+    controls_open?: boolean
+    controls_class?: string // class prefix -> `${controls_class}-controls-{toggle,pane}`
+    title?: string // toggle button title text ("Open <title> controls")
+    toggle_props?: HTMLAttributes<HTMLButtonElement>
+    pane_props?: HTMLAttributes<HTMLDivElement>
+    children?: Snippet
+  } = $props()
+</script>
+
+<DraggablePane
+  bind:show={controls_open}
+  closed_icon="Settings"
+  open_icon="Cross"
+  toggle_props={{
+    title: `${controls_open ? `Close` : `Open`} ${title} controls`,
+    ...toggle_props,
+    class: `${controls_class}-controls-toggle ${toggle_props?.class ?? ``}`,
+    style:
+      `position: absolute; top: var(--ctrl-btn-top, 5pt); right: var(--ctrl-btn-right, 1ex);` +
+      (toggle_props?.style ?? ``),
+  }}
+  pane_props={{
+    ...pane_props,
+    class: `${controls_class}-controls-pane ${pane_props?.class ?? ``}`,
+    style: `--pane-padding: 12px; --pane-gap: 4px; ${pane_props?.style ?? ``}`,
+  }}
+>
+  {@render children?.()}
+</DraggablePane>

package/dist/plot/core/components/ControlPane.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = {
+    controls_open?: boolean;
+    controls_class?: string;
+    title?: string;
+    toggle_props?: HTMLAttributes<HTMLButtonElement>;
+    pane_props?: HTMLAttributes<HTMLDivElement>;
+    children?: Snippet;
+};
+declare const ControlPane: import("svelte").Component<$$ComponentProps, {}, "controls_open">;
+type ControlPane = ReturnType<typeof ControlPane>;
+export default ControlPane;

package/dist/plot/core/components/FillArea.svelte

@@ -0,0 +1,234 @@
+<script lang="ts">
+  // FillArea component for rendering fill-between regions in ScatterPlot
+  // Supports gradients, hover/click interactions, and animated path transitions
+  import { interpolatePath } from 'd3-interpolate-path'
+  import { untrack } from 'svelte'
+  import { Tween, type TweenOptions } from 'svelte/motion'
+  import type {
+    FillGradient,
+    FillHandlerEvent,
+    FillRegion,
+  } from '../types'
+  import { unique_id } from '../utils'
+
+  let {
+    region,
+    region_idx,
+    path,
+    clip_path_id,
+    x_scale_fn,
+    y_scale_fn,
+    is_hovered = false,
+    on_click,
+    on_hover,
+    tween_options,
+  }: {
+    region: FillRegion
+    region_idx: number
+    path: string
+    clip_path_id: string
+    x_scale_fn: ((x: number) => number) & { invert?: (y: number) => number | Date }
+    y_scale_fn: ((y: number) => number) & { invert?: (y: number) => number }
+    is_hovered?: boolean
+    on_click?: (event: FillHandlerEvent) => void
+    on_hover?: (event: FillHandlerEvent | null) => void
+    tween_options?: TweenOptions<string>
+  } = $props()
+
+  // Stable instance ID for gradient uniqueness (generated once per component instance)
+  const instance_id = unique_id()
+  let gradient_id = $derived(
+    `fill-gradient-${region.id ?? region_idx}-${instance_id}`,
+  )
+
+  // On hover (without an explicit hover_style), noticeably raise opacity. A faint fill (e.g. a
+  // low-alpha rgba color at the default 0.3 fill-opacity) is otherwise nearly invisible, so a mere
+  // brightness filter reads as "no change". An explicit hover_style.fill_opacity always wins.
+  let effective_opacity = $derived(
+    is_hovered
+      ? region.hover_style?.fill_opacity ?? Math.min(1, (region.fill_opacity ?? 0.3) + 0.4)
+      : region.fill_opacity ?? 0.3,
+  )
+  let effective_fill = $derived(
+    is_hovered && region.hover_style?.fill
+      ? region.hover_style.fill
+      : region.fill ?? `steelblue`,
+  )
+  let path_fill = $derived(
+    typeof effective_fill === `object` ? `url(#${gradient_id})` : effective_fill,
+  )
+  // outline drawn only on hover when the user opted in via hover_style.stroke
+  let hover_stroke = $derived(is_hovered ? region.hover_style?.stroke : undefined)
+  let is_clickable = $derived(Boolean(on_click || region.on_click))
+  let cursor_style = $derived(
+    region.hover_style?.cursor ?? (is_clickable ? `pointer` : `default`),
+  )
+
+  // Path animation using Tween - create once, update target via effect
+  // untrack() explicitly captures initial values (intentional - config set once at mount)
+  const tweened_path = new Tween(
+    untrack(() => path),
+    untrack(() => ({
+      duration: 300,
+      interpolate: interpolatePath,
+      ...tween_options,
+    })),
+  )
+
+  $effect.pre(() => {
+    tweened_path.target = path
+  })
+
+  // Emit helpers - call both region-level and prop-level handlers when distinct
+  const emit_hover = (evt: FillHandlerEvent | null) => {
+    region.on_hover?.(evt)
+    if (on_hover !== region.on_hover) on_hover?.(evt)
+  }
+  const emit_click = (evt: FillHandlerEvent) => {
+    region.on_click?.(evt)
+    if (on_click !== region.on_click) on_click?.(evt)
+  }
+
+  // Event handlers
+  const handle_mouse_enter = (event: MouseEvent) => emit_hover(construct_event(event))
+  const handle_mouse_leave = () => emit_hover(null)
+  const handle_mouse_move = (event: MouseEvent) =>
+    is_hovered && emit_hover(construct_event(event))
+  const handle_click = (event: MouseEvent) => emit_click(construct_event(event))
+
+  // Keyboard handler - creates event with default coordinates since no mouse position
+  function handle_keydown(event: KeyboardEvent) {
+    if (event.key === `Enter` || event.key === ` `) {
+      event.preventDefault()
+      if (!is_clickable) 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
+      const px = element_rect
+        ? (element_rect.left + element_rect.right) / 2 - (rect?.left ?? 0)
+        : 0
+      const py = element_rect
+        ? (element_rect.top + element_rect.bottom) / 2 - (rect?.top ?? 0)
+        : 0
+
+      const raw_x = x_scale_fn.invert?.(px) ?? 0
+      const data_x = raw_x instanceof Date ? raw_x.getTime() : raw_x
+      const data_y = y_scale_fn.invert?.(py) ?? 0
+
+      emit_click({
+        event,
+        region_idx,
+        region_id: region.id,
+        x: data_x,
+        y: data_y,
+        px,
+        py,
+        label: region.label,
+        metadata: region.metadata,
+      })
+    }
+  }
+
+  // Construct FillHandlerEvent from MouseEvent
+  function construct_event(event: MouseEvent): FillHandlerEvent {
+    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)
+    const raw_x = x_scale_fn.invert?.(px) ?? 0
+    const data_x = raw_x instanceof Date ? raw_x.getTime() : raw_x
+    const data_y = y_scale_fn.invert?.(py) ?? 0
+
+    return {
+      event,
+      region_idx,
+      region_id: region.id,
+      x: data_x,
+      y: data_y,
+      px,
+      py,
+      label: region.label,
+      metadata: region.metadata,
+    }
+  }
+
+  // Type guard for gradient fill
+  const is_gradient = (
+    fill: string | FillGradient | undefined,
+  ): fill is FillGradient =>
+    typeof fill === `object` && fill !== null && `type` in fill
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<g
+  class="fill-region"
+  class:hovered={is_hovered}
+  clip-path={`url(#${clip_path_id})`}
+  style:cursor={cursor_style}
+  style:pointer-events="all"
+  onmouseenter={handle_mouse_enter}
+  onmouseleave={handle_mouse_leave}
+  onmousemove={handle_mouse_move}
+  onclick={handle_click}
+  onkeydown={handle_keydown}
+  role="img"
+  tabindex={is_clickable ? 0 : -1}
+  aria-label={region.label ?? `Fill region ${region_idx}`}
+>
+  {#snippet gradient_stops(stops: readonly [number, string][])}
+    {#each stops as [offset, color], idx (idx)}
+      <stop offset="{offset * 100}%" stop-color={color} />
+    {/each}
+  {/snippet}
+
+  <!-- Gradient defs -->
+  {#if is_gradient(region.fill)}
+    <defs>
+      {#if region.fill.type === `linear`}
+        <linearGradient
+          id={gradient_id}
+          gradientTransform="rotate({region.fill.angle ?? 0}, 0.5, 0.5)"
+        >
+          {@render gradient_stops(region.fill.stops)}
+        </linearGradient>
+      {:else if region.fill.type === `radial`}
+        <radialGradient
+          id={gradient_id}
+          cx={region.fill.center?.x ?? 0.5}
+          cy={region.fill.center?.y ?? 0.5}
+          r="0.5"
+        >
+          {@render gradient_stops(region.fill.stops)}
+        </radialGradient>
+      {/if}
+    </defs>
+  {/if}
+
+  <!-- Main fill path. On hover the opacity boost (effective_opacity) highlights the area. We do NOT
+       stroke by default: a fill-between region is one closed polygon, so stroking traces its whole
+       perimeter (both boundaries + the straight closing edges), which looks messy and doesn't follow
+       the visible area. Users can still opt into an outline via hover_style.stroke. -->
+  <path
+    d={tweened_path.current}
+    fill={path_fill}
+    fill-opacity={effective_opacity}
+    stroke={hover_stroke ?? `none`}
+    stroke-width={hover_stroke ? region.hover_style?.stroke_width ?? 1.5 : 0}
+  />
+</g>
+
+<style>
+  .fill-region {
+    transition: opacity 0.15s ease;
+  }
+  .fill-region.hovered {
+    filter: brightness(1.35) saturate(1.2);
+  }
+</style>

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

@@ -0,0 +1,21 @@
+import { type TweenOptions } from 'svelte/motion';
+import type { FillHandlerEvent, FillRegion } from '../types';
+type $$ComponentProps = {
+    region: FillRegion;
+    region_idx: number;
+    path: string;
+    clip_path_id: string;
+    x_scale_fn: ((x: number) => number) & {
+        invert?: (y: number) => number | Date;
+    };
+    y_scale_fn: ((y: number) => number) & {
+        invert?: (y: number) => number;
+    };
+    is_hovered?: boolean;
+    on_click?: (event: FillHandlerEvent) => void;
+    on_hover?: (event: FillHandlerEvent | null) => void;
+    tween_options?: TweenOptions<string>;
+};
+declare const FillArea: import("svelte").Component<$$ComponentProps, {}, "">;
+type FillArea = ReturnType<typeof FillArea>;
+export default FillArea;

package/dist/plot/core/components/InteractiveAxisLabel.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+  import Spinner from '../../../feedback/Spinner.svelte'
+  import { sanitize_html } from '../../../sanitize'
+  import PortalSelect from './PortalSelect.svelte'
+  import type { AxisOption } from '../types'
+
+  let {
+    label = ``,
+    options = undefined,
+    selected_key = $bindable(),
+    loading = $bindable(false),
+    axis_type = `x`,
+    color = $bindable(),
+    on_select,
+    ...rest
+  }: {
+    label?: string
+    options?: AxisOption[]
+    selected_key?: string
+    loading?: boolean
+    axis_type?: `x` | `x2` | `y` | `y2`
+    color?: string | null
+    on_select?: (key: string) => void
+    [key: string]: unknown
+  } = $props()
+
+  let is_interactive = $derived(Boolean(options?.length))
+
+  const stop = (evt: Event) => evt.stopPropagation()
+  // Only stop propagation for keys the dropdown handles, allow Tab/Escape for navigation
+  const stop_key = (evt: KeyboardEvent) => {
+    if (![`Tab`, `Escape`].includes(evt.key)) evt.stopPropagation()
+  }
+</script>
+
+<div
+  class:interactive={is_interactive}
+  class:loading
+  style:color
+  onmousedown={stop}
+  onmouseup={stop}
+  onclick={stop}
+  onkeydown={stop_key}
+  role="group"
+  {...rest}
+  class="interactive-axis-label {axis_type} {rest.class ?? ``}"
+>
+  {#if is_interactive && options}
+    <PortalSelect
+      {options}
+      bind:selected_key
+      {on_select}
+      disabled={loading}
+      class="axis-trigger"
+    />
+    {#if loading}
+      <Spinner
+        style="--spinner-size: 0.9em; --spinner-border-width: 2px; --spinner-margin: 0 0 0 0.3em"
+      />
+    {/if}
+  {:else}
+    <span class="static-label">{@html sanitize_html(label)}</span>
+  {/if}
+</div>
+
+<style>
+  .interactive-axis-label {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+  }
+  .static-label {
+    display: inline-flex;
+    align-items: baseline;
+  }
+  .loading :global(.axis-trigger) {
+    opacity: 0.7;
+    pointer-events: none;
+  }
+  .interactive-axis-label :global(:is(sub, sup)) {
+    font-size: 0.75em;
+    line-height: 0;
+    /* vertical-align is ignored in the flex label wrapper. */
+    position: relative;
+    vertical-align: baseline;
+  }
+  .interactive-axis-label :global(sub) {
+    top: 0.35em;
+  }
+  .interactive-axis-label :global(sup) {
+    top: -0.5em;
+  }
+</style>

package/dist/plot/core/components/InteractiveAxisLabel.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { AxisOption } from '../types';
+type $$ComponentProps = {
+    label?: string;
+    options?: AxisOption[];
+    selected_key?: string;
+    loading?: boolean;
+    axis_type?: `x` | `x2` | `y` | `y2`;
+    color?: string | null;
+    on_select?: (key: string) => void;
+    [key: string]: unknown;
+};
+declare const InteractiveAxisLabel: import("svelte").Component<$$ComponentProps, {}, "color" | "loading" | "selected_key">;
+type InteractiveAxisLabel = ReturnType<typeof InteractiveAxisLabel>;
+export default InteractiveAxisLabel;

package/dist/plot/core/components/Line.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+  import { DEFAULTS } from '../../../settings'
+  import { extent, min } from 'd3-array'
+  import { interpolatePath } from 'd3-interpolate-path'
+  import { curveMonotoneX, line } from 'd3-shape'
+  import { untrack } from 'svelte'
+  import { linear } from 'svelte/easing'
+  import type { SVGAttributes } from 'svelte/elements'
+  import { Tween, type TweenOptions } from 'svelte/motion'
+
+  let {
+    points,
+    origin = [0, 0],
+    line_color = `rgba(255, 255, 255, 0.5)`,
+    line_width = 2,
+    area_color = `rgba(255, 255, 255, 0.1)`,
+    area_stroke = null,
+    line_tween = {},
+    line_dash = DEFAULTS.scatter.line.dash,
+    ...rest
+  }: Omit<SVGAttributes<SVGPathElement>, `origin` | `points`> & {
+    points: readonly [number, number][]
+    origin: [number, number]
+    line_color?: string
+    line_width?: number
+    area_color?: string
+    area_stroke?: string | null
+    line_tween?: TweenOptions<string>
+    line_dash?: string
+  } = $props()
+
+  const lineGenerator = line()
+    .x((point) => point[0])
+    .y((point) => point[1])
+    .curve(curveMonotoneX)
+
+  // Only compute/render/tween the area fill when it is actually visible. Most line
+  // plots (e.g. every ScatterPlot line) pass a transparent area, so skipping it
+  // avoids a second expensive interpolatePath tween per line.
+  let show_area = $derived(
+    (Boolean(area_color) && area_color !== `transparent` && area_color !== `none`) ||
+      Boolean(area_stroke),
+  )
+
+  let [x_min, x_max] = $derived(extent(points.map((point) => point[0])))
+  let line_path = $derived(lineGenerator(points) ?? ``)
+  let ymin = $derived(origin[1] ?? min(points.map((point) => point[1])))
+  // Guard against NaN/Infinity in area_path coords (can happen during scale transitions)
+  let area_path = $derived(
+    show_area && line_path && isFinite(x_min ?? NaN) && isFinite(x_max ?? NaN) &&
+      isFinite(ymin ?? NaN)
+      ? `${line_path}L${x_max},${ymin}L${x_min},${ymin}Z`
+      : ``,
+  )
+
+  const default_tween = {
+    duration: 300,
+    easing: linear,
+    interpolate: interpolatePath,
+  }
+  // Path morphing via interpolatePath is costly (parse + resample + re-serialize
+  // every frame, per line). When the tween is disabled (duration <= 0) bind the
+  // path directly and skip the Tween entirely for zero per-frame cost.
+  let tween_disabled = $derived.by(() => {
+    const duration = line_tween.duration ?? default_tween.duration
+    return typeof duration === `number` && duration <= 0
+  })
+
+  // Tween objects are stateful - create once, update target via effect
+  // untrack() explicitly captures initial tween config (intentional - config set once at mount)
+  const tween_opts = untrack(() => ({ ...default_tween, ...line_tween }))
+  const tweened_line = new Tween(``, tween_opts)
+  const tweened_area = new Tween(``, tween_opts)
+
+  $effect.pre(() => {
+    if (tween_disabled) return // paths bind line_path/area_path directly below
+    tweened_line.target = line_path
+    if (show_area) tweened_area.target = area_path
+  })
+
+  let line_d = $derived(tween_disabled ? line_path : tweened_line.current)
+  let area_d = $derived(
+    show_area ? (tween_disabled ? area_path : tweened_area.current) : ``,
+  )
+</script>
+
+<path
+  d={line_d}
+  stroke={line_color}
+  stroke-width={line_width}
+  stroke-dasharray={line_dash && line_dash !== `solid` ? line_dash : null}
+  fill="none"
+  {...rest}
+/>
+<path d={area_d} fill={area_color} stroke={area_stroke} {...rest} />
+
+<style>
+  path {
+    transition: var(--line-transition, all 0.2s);
+  }
+</style>

package/dist/plot/core/components/Line.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { SVGAttributes } from 'svelte/elements';
+import { type TweenOptions } from 'svelte/motion';
+type $$ComponentProps = Omit<SVGAttributes<SVGPathElement>, `origin` | `points`> & {
+    points: readonly [number, number][];
+    origin: [number, number];
+    line_color?: string;
+    line_width?: number;
+    area_color?: string;
+    area_stroke?: string | null;
+    line_tween?: TweenOptions<string>;
+    line_dash?: string;
+};
+declare const Line: import("svelte").Component<$$ComponentProps, {}, "">;
+type Line = ReturnType<typeof Line>;
+export default Line;