matterviz 0.1.12 → 0.1.13

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

@@ -1,48 +1,32 @@
-import { DraggablePane } from '..';
-import type { DataSeries } from './';
+import type { AxisConfig, BarStyle } from './';
 import { PlotLegend } from './';
+import type { BasePlotProps, DataSeries, DisplayConfig } from './types';
 import type { ComponentProps, Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import type { ScaleType, TicksOption } from './scales';
 type LegendConfig = ComponentProps<typeof PlotLegend>;
-interface Props extends HTMLAttributes<HTMLDivElement> {
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & BasePlotProps & {
     series: DataSeries[];
-    x_lim?: [number | null, number | null];
-    y_lim?: [number | null, number | null];
-    x_range?: [number | null, number | null];
-    y_range?: [number | null, number | null];
-    range_padding?: number;
+    x_axis?: AxisConfig;
+    y_axis?: AxisConfig;
+    y2_axis?: AxisConfig;
+    display?: DisplayConfig;
+    hovered?: boolean;
+    show_controls?: boolean;
+    controls_open?: boolean;
     bins?: number;
-    x_label?: string;
-    y_label?: string;
-    x_format?: string;
-    y_format?: string;
-    x_scale_type?: ScaleType;
-    y_scale_type?: ScaleType;
-    padding?: {
-        t: number;
-        b: number;
-        l: number;
-        r: number;
-    };
     show_legend?: boolean;
     legend?: LegendConfig | null;
-    bar_opacity?: number;
-    bar_stroke_width?: number;
-    bar_color?: string;
+    bar?: BarStyle;
     selected_property?: string;
     mode?: `single` | `overlay`;
-    show_zero_lines?: boolean;
-    x_grid?: boolean | Record<string, unknown>;
-    y_grid?: boolean | Record<string, unknown>;
-    x_ticks?: TicksOption;
-    y_ticks?: TicksOption;
-    tooltip?: Snippet<[{
-        value: number;
-        count: number;
-        property: string;
-    }]>;
-    hovered?: boolean;
+    tooltip?: Snippet<[
+        {
+            value: number;
+            count: number;
+            property: string;
+            axis: `y1` | `y2`;
+        }
+    ]>;
     change?: (data: {
         value: number;
         count: number;
@@ -60,12 +44,8 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
         property: string;
         event: MouseEvent;
     } | null) => void;
-    show_controls?: boolean;
-    controls_open?: boolean;
-    plot_controls?: Snippet<[]>;
     on_series_toggle?: (series_idx: number) => void;
-    controls_toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`];
-}
-declare const Histogram: import("svelte").Component<Props, {}, "mode" | "show_controls" | "show_zero_lines" | "x_grid" | "y_grid" | "x_format" | "y_format" | "x_scale_type" | "y_scale_type" | "x_ticks" | "y_ticks" | "show_legend" | "controls_open" | "hovered" | "series" | "bins" | "bar_opacity" | "bar_stroke_width" | "bar_color" | "selected_property">;
+};
+declare const Histogram: import("svelte").Component<$$ComponentProps, {}, "display" | "mode" | "bar" | "show_controls" | "show_legend" | "y_axis" | "y2_axis" | "series" | "x_axis" | "hovered" | "controls_open" | "bins" | "selected_property">;
 type Histogram = ReturnType<typeof Histogram>;
 export default Histogram;

package/dist/plot/HistogramControls.svelte

@@ -1,371 +1,139 @@
-<script lang="ts">import { DraggablePane, SettingsSection } from '..';
+<script lang="ts">import { SettingsSection } from '..';
+import { PlotControls } from './';
 import { DEFAULTS } from '../settings';
-import { format } from 'd3-format';
-import { timeFormat } from 'd3-time-format';
-let { show_controls = $bindable(false), controls_open = $bindable(false), plot_controls, series = [], bins = $bindable(DEFAULTS.trajectory.histogram_bin_count), mode = $bindable(DEFAULTS.trajectory.histogram_mode), bar_opacity = $bindable(DEFAULTS.trajectory.histogram_bar_opacity), bar_stroke_width = $bindable(DEFAULTS.trajectory.histogram_bar_stroke_width), bar_color = $bindable(`#4682b4`), show_legend = $bindable(DEFAULTS.trajectory.histogram_show_legend), 
-// Display controls
-show_zero_lines = $bindable(DEFAULTS.plot.show_zero_lines), x_grid = $bindable(DEFAULTS.plot.x_grid), y_grid = $bindable(DEFAULTS.plot.y_grid), 
-// Scale type controls
-x_scale_type = $bindable(DEFAULTS.plot.x_scale_type), y_scale_type = $bindable(DEFAULTS.plot.y_scale_type), 
-// Range controls
-x_range = $bindable(undefined), y_range = $bindable(undefined), auto_x_range = [0, 1], auto_y_range = [0, 1], 
-// Tick controls
-x_ticks = $bindable(DEFAULTS.plot.x_ticks), y_ticks = $bindable(DEFAULTS.plot.y_ticks), 
-// Format controls
-x_format = $bindable(DEFAULTS.plot.x_format), y_format = $bindable(DEFAULTS.plot.y_format), selected_property = $bindable(``), toggle_props, pane_props, } = $props();
-// Local variables for format inputs to prevent invalid values from reaching props
-let x_format_input = $state(x_format);
-let y_format_input = $state(y_format);
+let { series = [], bins = $bindable(DEFAULTS.histogram.bin_count), mode = $bindable(DEFAULTS.histogram.mode), bar = $bindable({}), show_legend = $bindable(DEFAULTS.histogram.show_legend), selected_property = $bindable(``), x_axis = $bindable({}), y_axis = $bindable({}), y2_axis = $bindable({}), display = $bindable({}), show_controls = $bindable(false), controls_open = $bindable(false), auto_y2_range = undefined, ...rest } = $props();
+// Initialize bar styles with defaults (runs once)
+bar = { ...DEFAULTS.histogram.bar, ...bar };
 // Derived state
 let has_multiple_series = $derived(series.filter(Boolean).length > 1);
-let visible_series = $derived(series.filter((s) => s && (s.visible ?? true)));
-let series_options = $derived(visible_series.map((s) => s.label || `Series`));
-// Validation function for format specifiers
-function is_valid_format(format_string) {
-    if (!format_string)
-        return true; // Empty string is valid (uses default formatting)
-    try {
-        if (format_string.startsWith(`%`)) { // Time format validation
-            timeFormat(format_string)(new Date());
-            return true;
-        }
-        else { // Number format validation
-            format(format_string)(123.456);
-            return true;
-        }
-    }
-    catch {
-        return false;
-    }
-}
-// Handle format input changes - only update prop if valid
-const format_input_handler = (format_type) => (event) => {
-    const input = event.target;
-    // Update local variable
-    if (format_type === `x`)
-        x_format_input = input.value;
-    else if (format_type === `y`)
-        y_format_input = input.value;
-    // Only update prop if valid
-    if (is_valid_format(input.value)) {
-        input.classList.remove(`invalid`);
-        if (format_type === `x`)
-            x_format = input.value;
-        else if (format_type === `y`)
-            y_format = input.value;
-    }
-    else
-        input.classList.add(`invalid`);
-};
-// Handle ticks input changes
-const ticks_input_handler = (axis) => (event) => {
-    const input = event.target;
-    const value = parseInt(input.value, 10);
-    if (!isNaN(value) && value > 0) {
-        if (axis === `x`)
-            x_ticks = value;
-        else if (axis === `y`)
-            y_ticks = value;
-    }
-};
-// Range control helpers
-const range_complete = (axis) => {
-    const [min_el, max_el] = [`min`, `max`].map((b) => document.getElementById(`${axis}-range-${b}`));
-    if (!min_el || !max_el)
-        return;
-    const [min, max] = [min_el, max_el].map((el) => (el.classList.remove(`invalid`), el.value === `` ? null : +el.value));
-    const auto = { x: auto_x_range, y: auto_y_range }[axis];
-    if (min !== null && max !== null && min >= max) {
-        ;
-        [min_el, max_el].forEach((el) => el.classList.add(`invalid`));
-        return;
-    }
-    const ranges = {
-        x: (r) => x_range = r,
-        y: (r) => y_range = r,
-    };
-    ranges[axis](min === null && max === null ? undefined : [min ?? auto[0], max ?? auto[1]]);
-};
-const input_props = (axis, bound, range) => ({
-    id: `${axis}-range-${bound}`,
-    type: `number`,
-    value: range?.[bound === `min` ? 0 : 1] ?? ``,
-    placeholder: `auto`,
-    class: `range-input`,
-    onblur: () => range_complete(axis),
-    onkeydown: (e) => e.key === `Enter` && e.target.blur(),
-});
-// Sync local format inputs with props
-$effect(() => {
-    x_format_input = x_format;
-    y_format_input = y_format;
-});
-// Update range inputs when ranges change
-$effect(() => [[x_range, `x`], [y_range, `y`]].forEach(([range, axis]) => {
-    if (!range) {
-        ;
-        [`min`, `max`].forEach((b) => {
-            const el = document.getElementById(`${axis}-range-${b}`);
-            if (el)
-                el.value = ``;
-        });
-    }
-}));
+let visible_series = $derived(series.filter((srs) => srs && (srs.visible ?? true)));
+let series_options = $derived(visible_series.map((srs) => srs.label || `Series`));
 </script>
 
-{#if show_controls}
-  {@const toggle_style =
-    `position: absolute; top: var(--ctrl-btn-top, 1ex); right: var(--ctrl-btn-right, 1ex); background-color: transparent;`}
-  <DraggablePane
-    bind:show={controls_open}
-    closed_icon="Settings"
-    open_icon="Cross"
-    toggle_props={{
-      title: `${controls_open ? `Close` : `Open`} histogram controls`,
-      ...toggle_props,
-      class: `histogram-controls-toggle ${toggle_props?.class ?? ``}`,
-      style: `${toggle_style} ${toggle_props?.style ?? ``}`,
-    }}
-    pane_props={{
-      ...pane_props,
-      class: `histogram-controls-pane ${pane_props?.class ?? ``}`,
+<PlotControls
+  bind:show_controls
+  bind:controls_open
+  bind:x_axis
+  bind:y_axis
+  bind:y2_axis
+  bind:display
+  {auto_y2_range}
+  {...rest}
+>
+  <SettingsSection
+    title="Histogram"
+    current_values={{ bins, mode, show_legend }}
+    on_reset={() => {
+      ;({ bin_count: bins, mode, show_legend } = DEFAULTS.histogram)
     }}
   >
-    {#if plot_controls}
-      {@render plot_controls()}
-    {:else}
-      <SettingsSection
-        title="Display"
-        current_values={{ show_zero_lines, x_grid, y_grid }}
-        on_reset={() => {
-          show_zero_lines = DEFAULTS.plot.show_zero_lines
-          x_grid = DEFAULTS.plot.x_grid
-          y_grid = DEFAULTS.plot.y_grid
-        }}
-        style="display: flex; flex-wrap: wrap; gap: 1ex"
-      >
-        <label>
-          <input type="checkbox" bind:checked={show_zero_lines} />
-          Show zero lines
-        </label>
-        <label>
-          <input type="checkbox" bind:checked={x_grid as boolean} />
-          X-axis grid
-        </label>
-        <label>
-          <input type="checkbox" bind:checked={y_grid as boolean} />
-          Y-axis grid
+    <div class="pane-row">
+      <label>Bins:
+        <input
+          type="range"
+          min="5"
+          max="100"
+          step="5"
+          bind:value={bins}
+        />
+      </label>
+      <input type="number" min="5" max="100" step="5" bind:value={bins} />
+    </div>
+    {#if has_multiple_series}
+      <div class="pane-row">
+        <label>Mode:
+          <select bind:value={mode}>
+            <option value="single">Single</option>
+            <option value="overlay">Overlay</option>
+          </select>
         </label>
-      </SettingsSection>
-
-      <SettingsSection
-        title="Axis Range"
-        current_values={{ x_range, y_range }}
-        on_reset={() => {
-          x_range = undefined
-          y_range = undefined
-        }}
-        class="pane-grid"
-        style="grid-template-columns: repeat(4, max-content)"
-      >
-        <label for="x-range-min">X-axis:</label>
-        <input {...input_props(`x`, `min`, x_range)} />
-        &nbsp;to
-        <input {...input_props(`x`, `max`, x_range)} />
-        <label for="y-range-min">Y-axis:</label>
-        <input {...input_props(`y`, `min`, y_range)} />
-        &nbsp;to
-        <input {...input_props(`y`, `max`, y_range)} />
-      </SettingsSection>
-
-      <SettingsSection
-        title="Histogram"
-        current_values={{ bins, mode, show_legend }}
-        on_reset={() => {
-          bins = DEFAULTS.trajectory.histogram_bin_count
-          mode = DEFAULTS.trajectory.histogram_mode
-          show_legend = DEFAULTS.trajectory.histogram_show_legend
-        }}
-      >
+      </div>
+      {#if mode === `single`}
         <div class="pane-row">
-          <label for="bins-input">Bins:</label>
-          <input
-            id="bins-input"
-            type="range"
-            min="5"
-            max="100"
-            step="5"
-            bind:value={bins}
-          />
-          <input
-            type="number"
-            min="5"
-            max="100"
-            step="5"
-            bind:value={bins}
-          />
-        </div>
-        {#if has_multiple_series}
-          <div class="pane-row">
-            <label for="mode-select">Mode:</label>
-            <select bind:value={mode} id="mode-select">
-              <option value="single">Single</option>
-              <option value="overlay">Overlay</option>
+          <label>Property:
+            <select bind:value={selected_property}>
+              <option value="">All</option>
+              {#each series_options as option (option)}
+                <option value={option}>{option}</option>
+              {/each}
             </select>
-          </div>
-          {#if mode === `single`}
-            <div class="pane-row">
-              <label for="property-select">Property:</label>
-              <select bind:value={selected_property} id="property-select">
-                <option value="">All</option>
-                {#each series_options as option (option)}
-                  <option value={option}>{option}</option>
-                {/each}
-              </select>
-            </div>
-          {/if}
-        {/if}
-        <label>
-          <input type="checkbox" bind:checked={show_legend} />
-          Show legend
-        </label>
-      </SettingsSection>
+          </label>
+        </div>
+      {/if}
+    {/if}
+    <label>
+      <input type="checkbox" bind:checked={show_legend} />
+      Show legend
+    </label>
+  </SettingsSection>
 
-      <SettingsSection
-        title="Bar Style"
-        current_values={{ bar_opacity, bar_stroke_width, bar_color }}
-        on_reset={() => {
-          bar_opacity = DEFAULTS.trajectory.histogram_bar_opacity
-          bar_stroke_width = DEFAULTS.trajectory.histogram_bar_stroke_width
-          bar_color = `#4682b4`
-        }}
-        class="pane-grid"
-        style="grid-template-columns: auto 1fr auto"
-      >
-        <label for="bar-opacity-range">Opacity:</label>
+  <SettingsSection
+    title="Bar Style"
+    current_values={bar}
+    on_reset={() => {
+      bar = { ...DEFAULTS.histogram.bar }
+    }}
+    class="pane-grid"
+  >
+    {#if bar}
+      {#if visible_series.length === 1}
+        <label>Fill: <input type="color" bind:value={bar.color} /></label>
+      {/if}
+      <label>Opacity:
+        <input type="range" min="0" max="1" step="0.05" bind:value={bar.opacity} />
+        <input type="number" min="0" max="1" step="0.05" bind:value={bar.opacity} />
+      </label>
+      <label>Stroke Width:
+        <input type="range" min="0" max="5" step="0.1" bind:value={bar.stroke_width} />
+        <input type="number" min="0" max="5" step="0.1" bind:value={bar.stroke_width} />
+      </label>
+      <label>Stroke Color:
+        <input type="color" bind:value={bar.stroke_color} />
         <input
-          id="bar-opacity-range"
           type="range"
           min="0"
           max="1"
           step="0.05"
-          bind:value={bar_opacity}
+          bind:value={bar.stroke_opacity}
+          title="Opacity"
         />
         <input
           type="number"
           min="0"
           max="1"
           step="0.05"
-          bind:value={bar_opacity}
-        />
-        <label for="bar-stroke-width-range">Stroke Width:</label>
-        <input
-          id="bar-stroke-width-range"
-          type="range"
-          min="0"
-          max="5"
-          step="0.1"
-          bind:value={bar_stroke_width}
+          bind:value={bar.stroke_opacity}
         />
-        <input
-          type="number"
-          min="0"
-          max="5"
-          step="0.1"
-          bind:value={bar_stroke_width}
-        />
-        {#if visible_series.length === 1}
-          <label for="bar-color-input">Color:</label>
-          <input
-            id="bar-color-input"
-            type="color"
-            bind:value={bar_color}
-            style="grid-column: 2 / 4"
-          />
-        {/if}
-      </SettingsSection>
-
-      <SettingsSection
-        title="Scale Type"
-        current_values={{ x_scale_type, y_scale_type }}
-        on_reset={() => {
-          x_scale_type = DEFAULTS.plot.x_scale_type as `linear` | `log`
-          y_scale_type = DEFAULTS.plot.y_scale_type as `linear` | `log`
-        }}
-        class="pane-grid"
-        style="grid-template-columns: auto 1fr"
-      >
-        <label for="x-scale-select">X-axis:</label>
-        <select bind:value={x_scale_type} id="x-scale-select">
-          <option value="linear">Linear</option>
-          <option value="log">Log</option>
-        </select>
-        <label for="y-scale-select">Y-axis:</label>
-        <select bind:value={y_scale_type} id="y-scale-select">
-          <option value="linear">Linear</option>
-          <option value="log">Log</option>
-        </select>
-      </SettingsSection>
-
-      <SettingsSection
-        title="Ticks"
-        current_values={{ x_ticks, y_ticks }}
-        on_reset={() => {
-          x_ticks = DEFAULTS.plot.x_ticks
-          y_ticks = DEFAULTS.plot.y_ticks
-        }}
-        class="pane-grid"
-        style="grid-template-columns: auto 1fr"
-      >
-        <label for="x-ticks-input">X-axis:</label>
-        <input
-          id="x-ticks-input"
-          type="number"
-          min="2"
-          max="20"
-          step="1"
-          value={typeof x_ticks === `number` ? x_ticks : 8}
-          oninput={ticks_input_handler(`x`)}
-        />
-        <label for="y-ticks-input">Y-axis:</label>
-        <input
-          id="y-ticks-input"
-          type="number"
-          min="2"
-          max="20"
-          step="1"
-          value={typeof y_ticks === `number` ? y_ticks : 6}
-          oninput={ticks_input_handler(`y`)}
-        />
-      </SettingsSection>
-
-      <SettingsSection
-        title="Tick Format"
-        current_values={{ x_format, y_format }}
-        on_reset={() => {
-          x_format = DEFAULTS.plot.x_format
-          y_format = DEFAULTS.plot.y_format
-        }}
-        class="pane-grid"
-        style="grid-template-columns: auto 1fr"
-      >
-        <label for="x-format">X-axis:</label>
-        <input
-          id="x-format"
-          type="text"
-          bind:value={x_format_input}
-          placeholder=".2~s / .0% / %Y-%m-%d"
-          oninput={format_input_handler(`x`)}
-        />
-        <label for="y-format">Y-axis:</label>
-        <input
-          id="y-format"
-          type="text"
-          bind:value={y_format_input}
-          placeholder="d / .1e / .0%"
-          oninput={format_input_handler(`y`)}
-        />
-      </SettingsSection>
+      </label>
     {/if}
-  </DraggablePane>
-{/if}
+  </SettingsSection>
+
+  <SettingsSection
+    title="Scale Type"
+    current_values={{
+      x_scale_type: x_axis.scale_type,
+      y_scale_type: y_axis.scale_type,
+      y2_scale_type: y2_axis.scale_type,
+    }}
+    on_reset={() => {
+      x_axis.scale_type = DEFAULTS.plot.x_scale_type as `linear` | `log`
+      y_axis.scale_type = DEFAULTS.plot.y_scale_type as `linear` | `log`
+      y2_axis.scale_type = DEFAULTS.plot.y_scale_type as `linear` | `log`
+    }}
+    class="pane-grid"
+    style="grid-template-columns: 1fr 1fr"
+  >
+    <label>X: <select bind:value={x_axis.scale_type}>
+        <option value="linear">Linear</option>
+        <option value="log">Log</option>
+      </select></label>
+    <label>Y: <select bind:value={y_axis.scale_type}>
+        <option value="linear">Linear</option>
+        <option value="log">Log</option>
+      </select></label>
+    <label>Y2: <select bind:value={y2_axis.scale_type}>
+        <option value="linear">Linear</option>
+        <option value="log">Log</option>
+      </select></label>
+  </SettingsSection>
+</PlotControls>

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

@@ -1,35 +1,20 @@
-import { DraggablePane } from '..';
-import type { DataSeries } from './';
-import type { ComponentProps, Snippet } from 'svelte';
-import type { TicksOption } from './scales';
-interface Props {
-    show_controls?: boolean;
-    controls_open?: boolean;
-    plot_controls?: Snippet<[]>;
+import type { AxisConfig, BarStyle, DataSeries } from './';
+import type { DisplayConfig, PlotControlsProps } from './types';
+type $$ComponentProps = Omit<PlotControlsProps, `children` | `post_children`> & {
     series?: readonly DataSeries[];
     bins?: number;
     mode?: `single` | `overlay`;
-    bar_opacity?: number;
-    bar_stroke_width?: number;
-    bar_color?: string;
+    bar?: BarStyle;
     show_legend?: boolean;
-    show_zero_lines?: boolean;
-    x_grid?: boolean | Record<string, unknown>;
-    y_grid?: boolean | Record<string, unknown>;
-    x_scale_type?: `linear` | `log`;
-    y_scale_type?: `linear` | `log`;
-    x_range?: [number | null, number | null];
-    y_range?: [number | null, number | null];
-    auto_x_range?: [number, number];
-    auto_y_range?: [number, number];
-    x_ticks?: TicksOption;
-    y_ticks?: TicksOption;
-    x_format?: string;
-    y_format?: string;
     selected_property?: string;
-    toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`];
-    pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`];
-}
-declare const HistogramControls: import("svelte").Component<Props, {}, "mode" | "show_controls" | "show_zero_lines" | "x_grid" | "y_grid" | "x_format" | "y_format" | "x_scale_type" | "y_scale_type" | "x_ticks" | "y_ticks" | "show_legend" | "controls_open" | "bins" | "bar_opacity" | "bar_stroke_width" | "bar_color" | "selected_property" | "x_range" | "y_range">;
+    x_axis?: AxisConfig;
+    y_axis?: AxisConfig;
+    y2_axis?: AxisConfig;
+    display?: DisplayConfig;
+    show_controls?: boolean;
+    controls_open?: boolean;
+    auto_y2_range?: [number, number];
+};
+declare const HistogramControls: import("svelte").Component<$$ComponentProps, {}, "display" | "mode" | "bar" | "show_controls" | "show_legend" | "y_axis" | "y2_axis" | "x_axis" | "controls_open" | "bins" | "selected_property">;
 type HistogramControls = ReturnType<typeof HistogramControls>;
 export default HistogramControls;

package/dist/plot/Line.svelte

@@ -4,7 +4,7 @@ import { interpolatePath } from 'd3-interpolate-path';
 import { curveMonotoneX, line } from 'd3-shape';
 import { linear } from 'svelte/easing';
 import { Tween } 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 } = $props();
+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 } = $props();
 const lineGenerator = line()
     .x((point) => point[0])
     .y((point) => point[1])

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

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