matterviz 0.3.7 → 0.4.1

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/{FillArea.svelte → core/components/FillArea.svelte}

@@ -8,7 +8,8 @@
     FillGradient,
     FillHandlerEvent,
     FillRegion,
-  } from './types'
+  } from '../types'
+  import { unique_id } from '../utils'
 
   let {
     region,
@@ -35,14 +36,17 @@
   } = $props()
 
   // Stable instance ID for gradient uniqueness (generated once per component instance)
-  const instance_id = crypto.randomUUID().slice(0, 8)
+  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 != null
-      ? region.hover_style.fill_opacity
+    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(
@@ -53,6 +57,8 @@
   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`),
@@ -205,11 +211,16 @@
     </defs>
   {/if}
 
-  <!-- Main fill path -->
+  <!-- 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>
 
@@ -218,6 +229,6 @@
     transition: opacity 0.15s ease;
   }
   .fill-region.hovered {
-    filter: brightness(1.1);
+    filter: brightness(1.35) saturate(1.2);
   }
 </style>

package/dist/plot/{FillArea.svelte.d.ts → core/components/FillArea.svelte.d.ts}

@@ -1,5 +1,5 @@
 import { type TweenOptions } from 'svelte/motion';
-import type { FillHandlerEvent, FillRegion } from './types';
+import type { FillHandlerEvent, FillRegion } from '../types';
 type $$ComponentProps = {
     region: FillRegion;
     region_idx: number;

package/dist/plot/{InteractiveAxisLabel.svelte → core/components/InteractiveAxisLabel.svelte}

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import Spinner from '../feedback/Spinner.svelte'
-  import { sanitize_html } from '../sanitize'
+  import Spinner from '../../../feedback/Spinner.svelte'
+  import { sanitize_html } from '../../../sanitize'
   import PortalSelect from './PortalSelect.svelte'
-  import type { AxisOption } from './types'
+  import type { AxisOption } from '../types'
 
   let {
     label = ``,

package/dist/plot/{InteractiveAxisLabel.svelte.d.ts → core/components/InteractiveAxisLabel.svelte.d.ts}

@@ -1,4 +1,4 @@
-import type { AxisOption } from './types';
+import type { AxisOption } from '../types';
 type $$ComponentProps = {
     label?: string;
     options?: AxisOption[];
@@ -9,6 +9,6 @@ type $$ComponentProps = {
     on_select?: (key: string) => void;
     [key: string]: unknown;
 };
-declare const InteractiveAxisLabel: import("svelte").Component<$$ComponentProps, {}, "color" | "selected_key" | "loading">;
+declare const InteractiveAxisLabel: import("svelte").Component<$$ComponentProps, {}, "color" | "loading" | "selected_key">;
 type InteractiveAxisLabel = ReturnType<typeof InteractiveAxisLabel>;
 export default InteractiveAxisLabel;

package/dist/plot/{Line.svelte → core/components/Line.svelte}

@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { DEFAULTS } from '../settings'
+  import type { Vec2 } from '../../../math'
+  import { DEFAULTS } from '../../../settings'
   import { extent, min } from 'd3-array'
   import { interpolatePath } from 'd3-interpolate-path'
   import { curveMonotoneX, line } from 'd3-shape'
@@ -19,8 +20,8 @@
     line_dash = DEFAULTS.scatter.line.dash,
     ...rest
   }: Omit<SVGAttributes<SVGPathElement>, `origin` | `points`> & {
-    points: readonly [number, number][]
-    origin: [number, number]
+    points: readonly Vec2[]
+    origin: Vec2
     line_color?: string
     line_width?: number
     area_color?: string
@@ -34,12 +35,20 @@
     .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(
-    line_path && isFinite(x_min ?? NaN) && isFinite(x_max ?? NaN) &&
+    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`
       : ``,
@@ -50,32 +59,41 @@
     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 tweened_line = new Tween(
-    ``,
-    untrack(() => ({ ...default_tween, ...line_tween })),
-  )
-  const tweened_area = new Tween(
-    ``,
-    untrack(() => ({ ...default_tween, ...line_tween })),
-  )
+  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
-    tweened_area.target = area_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={tweened_line.current}
+  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={tweened_area.current} fill={area_color} stroke={area_stroke} {...rest} />
+<path d={area_d} fill={area_color} stroke={area_stroke} {...rest} />
 
 <style>
   path {

package/dist/plot/{Line.svelte.d.ts → core/components/Line.svelte.d.ts}

@@ -1,8 +1,9 @@
+import type { Vec2 } from '../../../math';
 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];
+    points: readonly Vec2[];
+    origin: Vec2;
     line_color?: string;
     line_width?: number;
     area_color?: string;

package/dist/plot/{PlotAxis.svelte → core/components/PlotAxis.svelte}

@@ -1,9 +1,10 @@
 <script lang="ts">
-  import { format_value } from '../labels'
+  import { format_value } from '../../../labels'
+  import type { Vec2 } from '../../../math'
   import AxisLabel from './AxisLabel.svelte'
-  import type { Sides } from './layout'
-  import type { AxisConfig } from './types'
-  import { DEFAULT_GRID_STYLE } from './types'
+  import type { Sides } from '../layout'
+  import type { AxisConfig } from '../types'
+  import { DEFAULT_GRID_STYLE } from '../types'
 
   type Side = `x` | `x2` | `y` | `y2`
 
@@ -21,6 +22,7 @@
     show_grid = false,
     show_baseline = true,
     tick_label,
+    tick_color,
     domain,
     unit_on_first_tick = false,
     label_x,
@@ -38,7 +40,8 @@
     show_grid?: boolean
     show_baseline?: boolean // axis spine line (ScatterPlot omits it)
     tick_label?: (tick: number) => string | null | undefined // custom/categorical label
-    domain?: [number, number] // when set, cull off-plot ticks and hide out-of-domain labels
+    tick_color?: (tick: number) => string | undefined // per-tick label color (else axis.color)
+    domain?: Vec2 // when set, cull off-plot ticks and hide out-of-domain labels
     unit_on_first_tick?: boolean // append axis.unit after the first tick label (ScatterPlot)
     label_x?: number
     label_y?: number
@@ -136,7 +139,7 @@
             y={text_y}
             text-anchor={text_anchor}
             dominant-baseline={text_baseline}
-            fill={text_fill}
+            fill={tick_color?.(tick) ?? text_fill}
             transform={text_transform}
           >
             {tick_text(tick)}{#if unit_on_first_tick && idx === 0 && axis.unit}&zwnj;&ensp;{axis

package/dist/plot/{PlotAxis.svelte.d.ts → core/components/PlotAxis.svelte.d.ts}

@@ -1,5 +1,6 @@
-import type { Sides } from './layout';
-import type { AxisConfig } from './types';
+import type { Vec2 } from '../../../math';
+import type { Sides } from '../layout';
+import type { AxisConfig } from '../types';
 type Side = `x` | `x2` | `y` | `y2`;
 type $$ComponentProps = {
     side: Side;
@@ -12,7 +13,8 @@ type $$ComponentProps = {
     show_grid?: boolean;
     show_baseline?: boolean;
     tick_label?: (tick: number) => string | null | undefined;
-    domain?: [number, number];
+    tick_color?: (tick: number) => string | undefined;
+    domain?: Vec2;
     unit_on_first_tick?: boolean;
     label_x?: number;
     label_y?: number;

package/dist/plot/{PlotControls.svelte → core/components/PlotControls.svelte}

@@ -2,16 +2,16 @@
   // NOTE: Axis config objects (x_axis, x2_axis, y_axis, y2_axis) must be reassigned (not mutated)
   // to trigger $bindable reactivity propagation to parent components.
   // Pattern: `x_axis = { ...x_axis, prop: value }` instead of `x_axis.prop = value`
-  import SettingsSection from '../layout/SettingsSection.svelte'
-  import DraggablePane from '../overlays/DraggablePane.svelte'
-  import { DEFAULTS } from '../settings'
+  import SettingsSection from '../../../layout/SettingsSection.svelte'
+  import ControlPane from './ControlPane.svelte'
+  import { DEFAULTS } from '../../../settings'
   import { format } from 'd3-format'
   import { timeFormat } from 'd3-time-format'
   import { tooltip } from 'svelte-multiselect/attachments'
-  import type { Vec2 } from '../math'
-  import type { AxisKey, PlotControlsProps } from './index'
-  import { normalize_y2_sync } from './interactions'
-  import { get_scale_type_name, is_scale_type_name, is_y2_sync_mode } from './types'
+  import type { Vec2 } from '../../../math'
+  import type { AxisKey, PlotControlsProps } from '../types'
+  import { normalize_y2_sync } from '../interactions'
+  import { get_scale_type_name, is_scale_type_name, is_y2_sync_mode } from '../types'
 
   let {
     show_controls = $bindable(false),
@@ -31,7 +31,7 @@
     has_y2_points = false,
     show_ticks = false,
     controls_title = `plot`,
-    controls_class = ``,
+    controls_class = `plot`,
     toggle_props = {},
     pane_props = {},
   }: PlotControlsProps = $props()
@@ -80,10 +80,9 @@
       if (format_string.startsWith(`%`)) {
         timeFormat(format_string)(new Date())
         return true
-      } else {
-        format(format_string)(123.456)
-        return true
       }
+      format(format_string)(123.456)
+      return true
     } catch {
       return false
     }
@@ -148,23 +147,12 @@
 </script>
 
 {#if show_controls}
-  <DraggablePane
-    bind:show={controls_open}
-    closed_icon="Settings"
-    open_icon="Cross"
-    toggle_props={{
-      title: `${controls_open ? `Close` : `Open`} ${controls_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 ?? ``}`,
-    }}
+  <ControlPane
+    bind:controls_open
+    controls_class={controls_class}
+    title={controls_title}
+    {toggle_props}
+    {pane_props}
   >
     {@render children?.(ctrl_state)}
 
@@ -533,5 +521,5 @@
 
     <!-- Custom controls after base controls -->
     {@render post_children?.(ctrl_state)}
-  </DraggablePane>
+  </ControlPane>
 {/if}

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

@@ -0,0 +1,4 @@
+import type { PlotControlsProps } from '../types';
+declare const PlotControls: import("svelte").Component<PlotControlsProps, {}, "display" | "show_controls" | "x2_axis" | "y_axis" | "y2_axis" | "controls_open" | "x_axis">;
+type PlotControls = ReturnType<typeof PlotControls>;
+export default PlotControls;

package/dist/plot/{PlotLegend.svelte → core/components/PlotLegend.svelte}

@@ -1,13 +1,15 @@
 <script lang="ts">
-  import type { LegendItem, Orientation } from './'
-  import { sanitize_html } from '../sanitize'
-  import { strip_html } from '../table'
+  import { add_alpha } from '../../../colors'
+  import type { LegendItem, Orientation } from '../..'
+  import { unique_id } from '../utils'
+  import { sanitize_html } from '../../../sanitize'
+  import { strip_html } from '../../../table'
   import { onDestroy } from 'svelte'
   import type { HTMLAttributes } from 'svelte/elements'
   import { SvelteMap, SvelteSet } from 'svelte/reactivity'
 
   // Unique instance ID to prevent gradient ID collisions when multiple legends render on the same page
-  const instance_id = crypto.randomUUID().slice(0, 8)
+  const instance_id = unique_id()
 
   let {
     series_data = [],
@@ -28,6 +30,7 @@
     on_hover_change,
     on_item_hover,
     active_series_idx = null,
+    active_fill_idx = null,
     filterable = true,
     filter_threshold = 12,
     draggable = true,
@@ -58,8 +61,9 @@
     on_drag_end?: (event: MouseEvent) => void
     // Callback when hover state changes (for placement stability)
     on_hover_change?: (is_hovered: boolean) => void
-    on_item_hover?: (series_idx: number | null) => void
+    on_item_hover?: (item: LegendItem | null) => void
     active_series_idx?: number | null
+    active_fill_idx?: number | null // highlight the fill legend item with this fill_idx
     filterable?: boolean
     filter_threshold?: number
     draggable?: boolean
@@ -214,10 +218,13 @@
 
 {#snippet legend_item(series: LegendItem, indent: boolean = false)}
   {@const is_fill_item = series.item_type === `fill`}
+  {@const is_active = is_fill_item
+  ? active_fill_idx === series.fill_idx
+  : active_series_idx === series.series_idx}
   <div
     class="legend-item"
     class:hidden={!series.visible}
-    class:active={active_series_idx === series.series_idx}
+    class:active={is_active}
     class:indented={indent}
     class:fill-item={is_fill_item}
     style={item_style}
@@ -237,9 +244,9 @@
         toggle_item(series)
       }
     }}
-    onmouseenter={() => on_item_hover?.(series.series_idx)}
+    onmouseenter={() => on_item_hover?.(series)}
     onmouseleave={() => on_item_hover?.(null)}
-    onfocus={() => on_item_hover?.(series.series_idx)}
+    onfocus={() => on_item_hover?.(series)}
     onblur={() => on_item_hover?.(null)}
     role="button"
     tabindex="0"
@@ -286,8 +293,8 @@
             rx="2"
             fill={gradient
             ? `url(#${gradient_id})`
-            : (series.display_style.fill_color ?? `steelblue`)}
-            fill-opacity={series.display_style.fill_opacity ?? 0.3}
+            : add_alpha(series.display_style.fill_color ?? `steelblue`, 1)}
+            fill-opacity="0.7"
             stroke={series.display_style.edge_color ?? `none`}
             stroke-width="1"
           />
@@ -454,6 +461,10 @@
     font-size: var(--plot-legend-font-size, 0.8em);
     max-width: var(--plot-legend-max-width);
     width: fit-content;
+    /* cap height so legends with many series don't overflow the plot; scroll the rest.
+    % resolves against the (position: relative) plot wrapper's height. */
+    max-height: var(--plot-legend-max-height, 80%);
+    overflow-y: auto;
     z-index: var(--plot-legend-z-index, 2);
     box-sizing: border-box;
   }

package/dist/plot/{PlotLegend.svelte.d.ts → core/components/PlotLegend.svelte.d.ts}

@@ -1,4 +1,4 @@
-import type { LegendItem, Orientation } from './';
+import type { LegendItem, Orientation } from '../..';
 import type { HTMLAttributes } from 'svelte/elements';
 type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, `style`> & {
     series_data: LegendItem[];
@@ -17,8 +17,9 @@ type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, `style`> & {
     on_drag?: (event: MouseEvent) => void;
     on_drag_end?: (event: MouseEvent) => void;
     on_hover_change?: (is_hovered: boolean) => void;
-    on_item_hover?: (series_idx: number | null) => void;
+    on_item_hover?: (item: LegendItem | null) => void;
     active_series_idx?: number | null;
+    active_fill_idx?: number | null;
     filterable?: boolean;
     filter_threshold?: number;
     draggable?: boolean;

package/dist/plot/{PlotTooltip.svelte → core/components/PlotTooltip.svelte}

@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { luminance } from '../colors'
+  import { luminance } from '../../../colors'
+  import { constrain_tooltip_position } from '../layout'
   import type { Snippet } from 'svelte'
   import type { HTMLAttributes } from 'svelte/elements'
 
@@ -9,6 +10,8 @@
     bg_color,
     offset = { x: 6, y: 0 },
     fixed = false,
+    constrain_to,
+    fallback_size,
     wrapper = $bindable(),
     children,
     ...rest
@@ -18,6 +21,8 @@
     bg_color?: string | null
     offset?: { x: number; y: number }
     fixed?: boolean // Use position: fixed (for viewport coords) vs absolute
+    constrain_to?: { width: number; height: number } // flip/clamp within these bounds (offset consumed by constraining)
+    fallback_size?: { width: number; height: number } // size estimate before first measure
     wrapper?: HTMLDivElement // Bindable reference for measuring tooltip size
     children: Snippet
   } = $props()
@@ -29,6 +34,17 @@
 
   // For fixed positioning (viewport coords), flip to opposite side when near viewport edges
   const pos = $derived.by(() => {
+    if (constrain_to) {
+      return constrain_tooltip_position(
+        x,
+        y,
+        wrapper?.offsetWidth ?? fallback_size?.width ?? 0,
+        wrapper?.offsetHeight ?? fallback_size?.height ?? 0,
+        constrain_to.width,
+        constrain_to.height,
+        { offset_x: offset.x, offset_y: offset.y },
+      )
+    }
     const raw_x = x + offset.x
     const raw_y = y + offset.y
     if (!fixed) return { x: raw_x, y: raw_y }

package/dist/plot/{PlotTooltip.svelte.d.ts → core/components/PlotTooltip.svelte.d.ts}

@@ -9,6 +9,14 @@ type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
         y: number;
     };
     fixed?: boolean;
+    constrain_to?: {
+        width: number;
+        height: number;
+    };
+    fallback_size?: {
+        width: number;
+        height: number;
+    };
     wrapper?: HTMLDivElement;
     children: Snippet;
 };

package/dist/plot/{PortalSelect.svelte → core/components/PortalSelect.svelte}

@@ -4,7 +4,7 @@
 </script>
 
 <script lang="ts">
-  import { sanitize_html } from '../sanitize'
+  import { sanitize_html } from '../../../sanitize'
   import type { HTMLButtonAttributes } from 'svelte/elements'
 
   type Option = { key: string; label: string; unit?: string }
@@ -115,12 +115,12 @@
         btn.setAttribute(`aria-selected`, `true`)
         selected_btn = btn
       }
-      li.appendChild(btn)
-      ul.appendChild(li)
+      li.append(btn)
+      ul.append(li)
     }
 
-    portal_el.appendChild(ul)
-    document.body.appendChild(portal_el)
+    portal_el.append(ul)
+    document.body.append(portal_el)
     update_position()
     dropdown_open = true
     active_close_fn = close_dropdown
@@ -181,8 +181,8 @@
       buttons[(idx + 1) % len]?.focus()
     } else if (evt.key === `ArrowUp`) {
       evt.preventDefault()
-      buttons[idx < 0 ? len - 1 : (idx - 1 + len) % len]?.focus()
-    } else if (evt.key === `Enter` && idx >= 0) {
+      buttons[idx === -1 ? len - 1 : (idx - 1 + len) % len]?.focus()
+    } else if (evt.key === `Enter` && idx !== -1) {
       evt.preventDefault()
       buttons[idx].click()
     }
@@ -223,6 +223,8 @@
     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;
   }
@@ -235,6 +237,8 @@
   }
   .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)) {

package/dist/plot/{ReferenceLine.svelte → core/components/ReferenceLine.svelte}

@@ -3,9 +3,9 @@
   import {
     calculate_annotation_position,
     resolve_line_endpoints,
-  } from './reference-line'
-  import type { RefLine, RefLineEvent, RefLineStyle } from './types'
-  import { REF_LINE_STYLE_DEFAULTS } from './types'
+  } from '../reference-line'
+  import type { RefLine, RefLineEvent, RefLineStyle } from '../types'
+  import { REF_LINE_STYLE_DEFAULTS } from '../types'
 
   let {
     ref_line,

package/dist/plot/{ReferenceLine.svelte.d.ts → core/components/ReferenceLine.svelte.d.ts}

@@ -1,4 +1,4 @@
-import type { RefLine, RefLineEvent } from './types';
+import type { RefLine, RefLineEvent } from '../types';
 type $$ComponentProps = {
     ref_line: RefLine;
     line_idx: number;