matterviz 0.3.6 → 0.4.0

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

@@ -0,0 +1,25 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    x: number;
+    y: number;
+    bg_color?: string | null;
+    offset?: {
+        x: number;
+        y: number;
+    };
+    fixed?: boolean;
+    constrain_to?: {
+        width: number;
+        height: number;
+    };
+    fallback_size?: {
+        width: number;
+        height: number;
+    };
+    wrapper?: HTMLDivElement;
+    children: Snippet;
+};
+declare const PlotTooltip: import("svelte").Component<$$ComponentProps, {}, "wrapper">;
+type PlotTooltip = ReturnType<typeof PlotTooltip>;
+export default PlotTooltip;

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

@@ -0,0 +1,257 @@
+<script module lang="ts">
+  // Track active dropdown across all instances - only one can be open at a time
+  let active_close_fn: (() => void) | null = null
+</script>
+
+<script lang="ts">
+  import { sanitize_html } from '../../../sanitize'
+  import type { HTMLButtonAttributes } from 'svelte/elements'
+
+  type Option = { key: string; label: string; unit?: string }
+
+  let {
+    options,
+    selected_key = $bindable(),
+    on_select,
+    disabled = false,
+    format_option = (
+      opt: Option,
+    ) => (opt.unit ? `${opt.label} (${opt.unit})` : opt.label),
+    ...rest
+  }: Omit<HTMLButtonAttributes, `onclick`> & {
+    options: Option[]
+    selected_key?: string
+    on_select?: (key: string, prev_key?: string) => void | Promise<void>
+    disabled?: boolean
+    format_option?: (opt: Option) => string
+  } = $props()
+
+  let dropdown_open = $state(false)
+  let trigger_el: HTMLButtonElement | undefined = $state()
+  let portal_el: HTMLDivElement | undefined
+
+  const selected_option = $derived(
+    options?.find((opt) => opt.key === selected_key) ?? options?.[0],
+  )
+
+  function update_position() {
+    if (!trigger_el || !portal_el) return
+    const rect = trigger_el.getBoundingClientRect()
+    const dropdown_rect = portal_el.getBoundingClientRect()
+    const gap = 4
+    const vw = window.innerWidth
+    const vh = window.innerHeight
+
+    // Vertical: prefer below, flip above if no room
+    const below_y = rect.bottom + gap
+    const above_y = rect.top - gap - dropdown_rect.height
+    const fits_below = below_y + dropdown_rect.height <= vh
+    portal_el.style.top = `${fits_below ? below_y : Math.max(gap, above_y)}px`
+
+    // Horizontal: center, but clamp to viewport edges
+    const center_x = rect.left + rect.width / 2
+    const half_width = dropdown_rect.width / 2
+    const min_x = half_width + gap
+    const max_x = vw - half_width - gap
+    portal_el.style.left = `${Math.max(min_x, Math.min(max_x, center_x))}px`
+  }
+
+  // Inline styles for portal elements (can't use scoped CSS for elements in document.body)
+  const portal_styles = {
+    container: `position: fixed; transform: translateX(-50%); z-index: 10000;`,
+    ul:
+      `margin: 0; padding: 0; list-style: none; background: var(--dropdown-bg, white); border: 1px solid var(--dropdown-border, #ccc); border-radius: 4px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); min-width: max-content; max-height: 300px; overflow-y: auto; font-size: 14px;`,
+    li: `margin: 0;`,
+    btn:
+      `display: block; width: 100%; padding: var(--dropdown-padding-v, 3px) var(--dropdown-padding-h, 10px); border: none; background: transparent; font: inherit; color: var(--dropdown-color, black); text-align: left; cursor: pointer; white-space: nowrap;`,
+    btn_selected: `font-weight: 500; background: rgba(0, 100, 200, 0.15);`,
+  }
+
+  function style_sub_sup(el: HTMLElement) {
+    for (const sub of el.querySelectorAll(`sub`)) {
+      ;(sub as HTMLElement).style.cssText =
+        `font-size: 0.75em; line-height: 0; margin: 0; padding: 0; position: relative; top: 0.15em;`
+    }
+    for (const sup of el.querySelectorAll(`sup`)) {
+      ;(sup as HTMLElement).style.cssText =
+        `font-size: 0.75em; line-height: 0; margin: 0; padding: 0; position: relative; top: -0.4em;`
+    }
+  }
+
+  function open_dropdown() {
+    if (!trigger_el || !options?.length) return
+    if (active_close_fn && active_close_fn !== close_dropdown) active_close_fn()
+
+    portal_el = document.createElement(`div`)
+    portal_el.className = `portal-select-dropdown`
+    portal_el.style.cssText = portal_styles.container
+    portal_el.setAttribute(`role`, `listbox`)
+
+    const ul = document.createElement(`ul`)
+    ul.style.cssText = portal_styles.ul
+    let selected_btn: HTMLButtonElement | undefined
+    for (const opt of options) {
+      const li = document.createElement(`li`)
+      li.style.cssText = portal_styles.li
+      li.setAttribute(`role`, `presentation`)
+      const btn = document.createElement(`button`)
+      btn.type = `button`
+      btn.style.cssText = portal_styles.btn
+      btn.setAttribute(`role`, `option`)
+      btn.innerHTML = sanitize_html(format_option(opt))
+      style_sub_sup(btn)
+      btn.addEventListener(`click`, () => select(opt.key))
+      btn.addEventListener(`mouseenter`, () => {
+        if (!btn.classList.contains(`selected`)) {
+          btn.style.background = `rgba(128, 128, 128, 0.15)`
+        }
+      })
+      btn.addEventListener(`mouseleave`, () => {
+        if (!btn.classList.contains(`selected`)) btn.style.background = `transparent`
+      })
+      if (opt.key === selected_key) {
+        btn.classList.add(`selected`)
+        btn.style.cssText = portal_styles.btn + portal_styles.btn_selected
+        btn.setAttribute(`aria-selected`, `true`)
+        selected_btn = btn
+      }
+      li.append(btn)
+      ul.append(li)
+    }
+
+    portal_el.append(ul)
+    document.body.append(portal_el)
+    update_position()
+    dropdown_open = true
+    active_close_fn = close_dropdown
+    window.addEventListener(`scroll`, update_position, true)
+    window.addEventListener(`resize`, update_position)
+    window.addEventListener(`keydown`, handle_keydown)
+    selected_btn?.focus()
+  }
+
+  function close_dropdown(return_focus = true) {
+    if (portal_el) {
+      window.removeEventListener(`scroll`, update_position, true)
+      window.removeEventListener(`resize`, update_position)
+      window.removeEventListener(`keydown`, handle_keydown)
+      portal_el.remove()
+      portal_el = undefined
+    }
+    if (active_close_fn === close_dropdown) active_close_fn = null
+    dropdown_open = false
+    if (return_focus) trigger_el?.focus()
+  }
+
+  async function select(key: string) {
+    if (key !== selected_key) {
+      const prev_key = selected_key
+      selected_key = key // Optimistic update for responsive UI
+      try {
+        await on_select?.(key, prev_key)
+      } catch {
+        selected_key = prev_key // Roll back on error
+      }
+    }
+    close_dropdown()
+  }
+
+  function handle_click_outside(evt: MouseEvent) {
+    if (!dropdown_open) return
+    const target = evt.target
+    if (
+      !(target instanceof Node) ||
+      (!trigger_el?.contains(target) && !portal_el?.contains(target))
+    ) {
+      close_dropdown()
+    }
+  }
+
+  function handle_keydown(evt: KeyboardEvent) {
+    if (!portal_el) return
+    const buttons = [...portal_el.querySelectorAll(`button`)] as HTMLButtonElement[]
+    const idx = buttons.indexOf(document.activeElement as HTMLButtonElement)
+    const len = buttons.length
+
+    if (evt.key === `Escape`) {
+      evt.preventDefault()
+      close_dropdown()
+    } else if (evt.key === `ArrowDown`) {
+      evt.preventDefault()
+      buttons[(idx + 1) % len]?.focus()
+    } else if (evt.key === `ArrowUp`) {
+      evt.preventDefault()
+      buttons[idx === -1 ? len - 1 : (idx - 1 + len) % len]?.focus()
+    } else if (evt.key === `Enter` && idx !== -1) {
+      evt.preventDefault()
+      buttons[idx].click()
+    }
+  }
+
+  // Close dropdown when disabled, options empty, or component unmounts
+  $effect(() => {
+    if ((disabled || !options?.length) && dropdown_open) close_dropdown(false)
+    return () => close_dropdown(false)
+  })
+</script>
+
+<svelte:window onclick={handle_click_outside} />
+
+{#if selected_option}
+  <button
+    bind:this={trigger_el}
+    type="button"
+    onclick={() => (dropdown_open ? close_dropdown() : open_dropdown())}
+    {disabled}
+    aria-expanded={dropdown_open}
+    aria-haspopup="listbox"
+    {...rest}
+    class="portal-select-trigger {rest.class ?? ``}"
+  >
+    {@html sanitize_html(format_option(selected_option))}
+    <span class="arrow">▾</span>
+  </button>
+{/if}
+
+<style>
+  .portal-select-trigger {
+    display: inline-flex;
+    align-items: baseline;
+    gap: 0.3em;
+    background: transparent;
+    border: none;
+    border-radius: 3px;
+    padding: 2px 4px;
+    font: inherit;
+    /* hug the text: `font: inherit` pulls in the page's loose line-height, inflating the hover bg */
+    line-height: 1.2;
+    color: inherit;
+    cursor: pointer;
+  }
+  .portal-select-trigger:hover {
+    background-color: var(--portal-select-hover-bg, rgba(128, 128, 128, 0.15));
+  }
+  .portal-select-trigger:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+  .arrow {
+    font-size: 1.4em;
+    /* keep the larger glyph from inflating the trigger height (and thus the hover bg) */
+    line-height: 1;
+    opacity: 0.8;
+  }
+  .portal-select-trigger :global(:is(sub, sup)) {
+    font-size: 0.75em;
+    line-height: 0;
+    margin: 0 0 0 -0.25em;
+    padding: 0;
+    position: relative;
+  }
+  .portal-select-trigger :global(sub) {
+    top: 0.25em;
+  }
+  .portal-select-trigger :global(sup) {
+    top: -0.4em;
+  }
+</style>

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

@@ -0,0 +1,16 @@
+import type { HTMLButtonAttributes } from 'svelte/elements';
+type Option = {
+    key: string;
+    label: string;
+    unit?: string;
+};
+type $$ComponentProps = Omit<HTMLButtonAttributes, `onclick`> & {
+    options: Option[];
+    selected_key?: string;
+    on_select?: (key: string, prev_key?: string) => void | Promise<void>;
+    disabled?: boolean;
+    format_option?: (opt: Option) => string;
+};
+declare const PortalSelect: import("svelte").Component<$$ComponentProps, {}, "selected_key">;
+type PortalSelect = ReturnType<typeof PortalSelect>;
+export default PortalSelect;

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

@@ -0,0 +1,204 @@
+<script lang="ts">
+  // ReferenceLine: 2D reference lines with annotations (horizontal, vertical, diagonal, segment, line)
+  import {
+    calculate_annotation_position,
+    resolve_line_endpoints,
+  } from '../reference-line'
+  import type { RefLine, RefLineEvent, RefLineStyle } from '../types'
+  import { REF_LINE_STYLE_DEFAULTS } from '../types'
+
+  let {
+    ref_line,
+    line_idx,
+    x_min,
+    x_max,
+    y_min,
+    y_max,
+    x_scale,
+    x2_scale,
+    y_scale,
+    y2_scale,
+    clip_path_id,
+    hovered_line_idx = null,
+    on_click,
+    on_hover,
+  }: {
+    ref_line: RefLine
+    line_idx: number
+    x_min: number
+    x_max: number
+    y_min: number
+    y_max: number
+    x_scale: (val: number) => number
+    x2_scale?: (val: number) => number
+    y_scale: (val: number) => number
+    y2_scale?: (val: number) => number
+    clip_path_id: string
+    hovered_line_idx?: number | null
+    on_click?: (event: RefLineEvent) => void
+    on_hover?: (event: RefLineEvent | null) => void
+  } = $props()
+
+  let endpoints = $derived(
+    resolve_line_endpoints(ref_line, { x_min, x_max, y_min, y_max }, {
+      x_scale,
+      x2_scale,
+      y_scale,
+      y2_scale,
+    }),
+  )
+
+  let is_focused = $state(false)
+  let is_hovered = $derived(hovered_line_idx === line_idx || is_focused)
+  let is_clickable = $derived(Boolean(on_click || ref_line.on_click))
+
+  let style = $derived<Required<RefLineStyle>>({
+    ...REF_LINE_STYLE_DEFAULTS,
+    ...ref_line.style,
+    ...(is_hovered && ref_line.hover_style),
+  })
+
+  let annotation_pos = $derived(
+    endpoints && ref_line.annotation
+      ? calculate_annotation_position(
+        endpoints[0],
+        endpoints[1],
+        endpoints[2],
+        endpoints[3],
+        ref_line.annotation,
+      )
+      : null,
+  )
+
+  const make_event = (
+    event: MouseEvent | KeyboardEvent | FocusEvent,
+  ): RefLineEvent => ({
+    event,
+    line_idx,
+    line_id: ref_line.id,
+    type: ref_line.type,
+    label: ref_line.label ?? ref_line.annotation?.text,
+    metadata: ref_line.metadata,
+  })
+
+  function handle_keydown(event: KeyboardEvent) {
+    if (event.key === `Enter` || event.key === ` `) {
+      event.preventDefault()
+      const evt = make_event(event)
+      ref_line.on_click?.(evt)
+      on_click?.(evt)
+    }
+  }
+</script>
+
+{#if endpoints && ref_line.visible !== false}
+  {@const [x1, y1, x2, y2] = endpoints}
+
+  <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+  <g
+    class="reference-line"
+    class:hovered={is_hovered}
+    role={is_clickable ? `button` : `img`}
+    aria-label={ref_line.label ?? ref_line.annotation?.text ?? `Reference line ${line_idx}`}
+    tabindex={is_clickable ? 0 : -1}
+    style:cursor={is_clickable ? `pointer` : `default`}
+    onmouseenter={(evt) => on_hover?.(make_event(evt))}
+    onmouseleave={() => on_hover?.(null)}
+    onfocus={(evt) => {
+      is_focused = true
+      on_hover?.(make_event(evt))
+    }}
+    onblur={() => {
+      is_focused = false
+      on_hover?.(null)
+    }}
+    onclick={(evt) => {
+      const ref_evt = make_event(evt)
+      ref_line.on_click?.(ref_evt)
+      on_click?.(ref_evt)
+    }}
+    onkeydown={handle_keydown}
+  >
+    <!-- Lines clipped to plot area -->
+    <g clip-path="url(#{clip_path_id})">
+      <!-- Invisible hit area for easier interaction (8px wide) -->
+      <line
+        {x1}
+        {y1}
+        {x2}
+        {y2}
+        stroke="transparent"
+        stroke-width="8"
+        style:pointer-events="stroke"
+      />
+
+      <!-- Visible line -->
+      <line
+        {x1}
+        {y1}
+        {x2}
+        {y2}
+        stroke={style.color}
+        stroke-width={style.width}
+        stroke-dasharray={style.dash || null}
+        stroke-opacity={style.opacity}
+        style:pointer-events="none"
+      />
+    </g>
+
+    <!-- Annotation (outside clip-path to remain visible) -->
+    {#if annotation_pos && ref_line.annotation}
+      {@const anno = ref_line.annotation}
+      {@const anno_padding = anno.padding ?? 2}
+      {@const font_size = parseFloat(String(anno.font_size ?? 12))}
+      {@const text_width = anno.text.length * font_size * 0.6}
+      {@const anchor_offset = {
+      start: 0,
+      middle: text_width / 2,
+      end: text_width,
+    }[annotation_pos.text_anchor] ?? 0}
+      {#if anno.background}
+        <rect
+          x={annotation_pos.x - anno_padding - anchor_offset}
+          y={annotation_pos.y - font_size * 0.8 - anno_padding}
+          width={text_width + anno_padding * 2}
+          height={font_size * 1.2 + anno_padding * 2}
+          fill={anno.background}
+          rx="2"
+          ry="2"
+          transform={annotation_pos.rotation
+          ? `rotate(${annotation_pos.rotation}, ${annotation_pos.x}, ${annotation_pos.y})`
+          : undefined}
+          style:pointer-events="none"
+        />
+      {/if}
+      <text
+        x={annotation_pos.x}
+        y={annotation_pos.y}
+        text-anchor={annotation_pos.text_anchor}
+        dominant-baseline={annotation_pos.dominant_baseline}
+        transform={annotation_pos.rotation
+        ? `rotate(${annotation_pos.rotation}, ${annotation_pos.x}, ${annotation_pos.y})`
+        : undefined}
+        fill={anno.color ?? style.color}
+        font-size={anno.font_size ?? `12px`}
+        font-family={anno.font_family ?? `inherit`}
+        style:pointer-events="none"
+      >
+        {anno.text}
+      </text>
+    {/if}
+  </g>
+{/if}
+
+<style>
+  .reference-line {
+    transition: opacity 0.15s ease;
+  }
+  .reference-line.hovered line:not([stroke='transparent']) {
+    filter: brightness(1.2);
+  }
+  .reference-line text {
+    user-select: none;
+  }
+</style>

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

@@ -0,0 +1,20 @@
+import type { RefLine, RefLineEvent } from '../types';
+type $$ComponentProps = {
+    ref_line: RefLine;
+    line_idx: number;
+    x_min: number;
+    x_max: number;
+    y_min: number;
+    y_max: number;
+    x_scale: (val: number) => number;
+    x2_scale?: (val: number) => number;
+    y_scale: (val: number) => number;
+    y2_scale?: (val: number) => number;
+    clip_path_id: string;
+    hovered_line_idx?: number | null;
+    on_click?: (event: RefLineEvent) => void;
+    on_hover?: (event: RefLineEvent | null) => void;
+};
+declare const ReferenceLine: import("svelte").Component<$$ComponentProps, {}, "">;
+type ReferenceLine = ReturnType<typeof ReferenceLine>;
+export default ReferenceLine;

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

@@ -0,0 +1,156 @@
+<script lang="ts">
+  // ReferenceLine3D: 3D reference lines for axis-parallel, segments, and extended lines
+  // Uses Line2 for proper variable-width lines (WebGL ignores linewidth on basic lines)
+  import type { Point3D, Vec3 } from '../../../math'
+  import { T, useThrelte } from '@threlte/core'
+  import * as THREE from 'three'
+  import { Line2 } from 'three/examples/jsm/lines/Line2.js'
+  import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry.js'
+  import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial.js'
+  import { create_to_threejs, span_or } from '../reference-line'
+  import type { RefLine3D } from '../types'
+
+  let { ref_line, scene_size = [10, 10, 5], ranges }: {
+    ref_line: RefLine3D
+    scene_size?: Vec3
+    ranges: { x: [number, number]; y: [number, number]; z: [number, number] }
+  } = $props()
+
+  const { size } = useThrelte()
+  let [scene_x, scene_y, scene_z] = $derived(scene_size)
+  let { x: x_range, y: y_range, z: z_range } = $derived(ranges)
+
+  // Transform data coords to Three.js coordinates
+  let to_coords = $derived.by(() => {
+    const transform = create_to_threejs({
+      scene_x,
+      scene_y,
+      scene_z,
+      x_range,
+      y_range,
+      z_range,
+    })
+    return (ux: number, uy: number, uz: number) => transform(ux, uy, uz)
+  })
+  const endpoints_from = (point_a: Vec3, point_b: Vec3): [Point3D, Point3D] => [
+    to_coords(...point_a),
+    to_coords(...point_b),
+  ]
+
+  // Compute line endpoints based on type
+  let endpoints = $derived.by(
+    (): [Point3D, Point3D] | null => {
+      if (ref_line.visible === false) return null
+      const [x_min, x_max] = span_or(ref_line.x_span, x_range)
+      const [y_min, y_max] = span_or(ref_line.y_span, y_range)
+      const [z_min, z_max] = span_or(ref_line.z_span, z_range)
+
+      if (ref_line.type === `x-axis`) {
+        return endpoints_from([x_min, ref_line.y, ref_line.z], [x_max, ref_line.y, ref_line.z])
+      }
+      if (ref_line.type === `y-axis`) {
+        return endpoints_from([ref_line.x, y_min, ref_line.z], [ref_line.x, y_max, ref_line.z])
+      }
+      if (ref_line.type === `z-axis`) {
+        return endpoints_from([ref_line.x, ref_line.y, z_min], [ref_line.x, ref_line.y, z_max])
+      }
+      if (ref_line.type === `segment`) {
+        return endpoints_from(ref_line.p1, ref_line.p2)
+      }
+      if (ref_line.type === `line`) {
+        // Extend line through two points to bounding box
+        const [p1x, p1y, p1z] = ref_line.p1
+        const [dx, dy, dz] = [
+          ref_line.p2[0] - p1x,
+          ref_line.p2[1] - p1y,
+          ref_line.p2[2] - p1z,
+        ]
+        // Find t values at each boundary plane
+        const t_values = [
+          ...(dx !== 0 ? [(x_min - p1x) / dx, (x_max - p1x) / dx] : []),
+          ...(dy !== 0 ? [(y_min - p1y) / dy, (y_max - p1y) / dy] : []),
+          ...(dz !== 0 ? [(z_min - p1z) / dz, (z_max - p1z) / dz] : []),
+        ]
+        // Keep only t values where the resulting point is inside bounds
+        const eps = 1e-6
+        const valid_t = t_values.filter((t_value) => {
+          const [px, py, pz] = [
+            p1x + t_value * dx,
+            p1y + t_value * dy,
+            p1z + t_value * dz,
+          ]
+          return (
+            px >= x_min - eps && px <= x_max + eps &&
+            py >= y_min - eps && py <= y_max + eps &&
+            pz >= z_min - eps && pz <= z_max + eps
+          )
+        })
+        if (valid_t.length < 2) return null
+        const t_min = Math.min(...valid_t)
+        const t_max = Math.max(...valid_t)
+        return endpoints_from(
+          [p1x + t_min * dx, p1y + t_min * dy, p1z + t_min * dz],
+          [p1x + t_max * dx, p1y + t_max * dy, p1z + t_max * dz],
+        )
+      }
+      return null
+    },
+  )
+
+  // Line style (with defaults)
+  let style = $derived({
+    color: ref_line.style?.color ?? `white`,
+    opacity: ref_line.style?.opacity ?? 1,
+    width: ref_line.style?.width ?? 2,
+    dashed: Boolean(ref_line.style?.dash),
+  })
+
+  // Create Line2 with LineGeometry and LineMaterial for proper variable-width lines
+  let line2: Line2 | null = $state(null)
+  let material: LineMaterial | null = $state(null)
+
+  $effect(() => {
+    if (!endpoints) {
+      line2 = null
+      material = null
+      return
+    }
+    const [p1, p2] = endpoints
+
+    const geo = new LineGeometry()
+    geo.setPositions([p1.x, p1.y, p1.z, p2.x, p2.y, p2.z])
+
+    const mat = new LineMaterial({
+      color: new THREE.Color(style.color).getHex(),
+      linewidth: style.width,
+      transparent: style.opacity < 1,
+      opacity: style.opacity,
+      dashed: style.dashed,
+      dashSize: 0.3,
+      gapSize: 0.1,
+      resolution: new THREE.Vector2($size.width || 1, $size.height || 1),
+    })
+
+    const line = new Line2(geo, mat)
+    line.computeLineDistances() // Required for dashed lines
+
+    material = mat
+    line2 = line
+
+    return () => {
+      geo.dispose()
+      mat.dispose()
+    }
+  })
+
+  // Update material resolution when canvas size changes
+  $effect(() => {
+    if (material) {
+      material.resolution.set($size.width || 1, $size.height || 1)
+    }
+  })
+</script>
+
+{#if line2}
+  <T is={line2} />
+{/if}

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

@@ -0,0 +1,14 @@
+import type { Vec3 } from '../../../math';
+import type { RefLine3D } from '../types';
+type $$ComponentProps = {
+    ref_line: RefLine3D;
+    scene_size?: Vec3;
+    ranges: {
+        x: [number, number];
+        y: [number, number];
+        z: [number, number];
+    };
+};
+declare const ReferenceLine3D: import("svelte").Component<$$ComponentProps, {}, "">;
+type ReferenceLine3D = ReturnType<typeof ReferenceLine3D>;
+export default ReferenceLine3D;