matterviz 0.3.2 → 0.3.3

package/dist/plot/PortalSelect.svelte

@@ -1,170 +1,198 @@
-<script module lang="ts">"use strict";
-// Track active dropdown across all instances - only one can be open at a time
-let active_close_fn = null;
+<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">let { options, selected_key = $bindable(), on_select, disabled = false, format_option = (opt) => (opt.unit ? `${opt.label} (${opt.unit})` : opt.label), ...rest } = $props();
-let dropdown_open = $state(false);
-let trigger_el = $state();
-let portal_el;
-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;
+<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`;
+    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 = {
+    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;`,
+    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:
+      `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) {
+  }
+
+  function style_sub_sup(el: HTMLElement) {
     for (const sub of el.querySelectorAll(`sub`)) {
-        ;
-        sub.style.cssText =
-            `font-size: 0.75em; line-height: 0; margin: 0; padding: 0; position: relative; top: 0.15em;`;
+      ;(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.style.cssText =
-            `font-size: 0.75em; line-height: 0; margin: 0; padding: 0; position: relative; top: -0.4em;`;
+      ;(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;
+  }
+
+  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 = format_option(opt);
-        style_sub_sup(btn);
-        btn.onclick = () => select(opt.key);
-        btn.onmouseenter = () => {
-            if (!btn.classList.contains(`selected`)) {
-                btn.style.background = `rgba(128, 128, 128, 0.15)`;
-            }
-        };
-        btn.onmouseleave = () => {
-            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;
+      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.onclick = () => select(opt.key)
+      btn.onmouseenter = () => {
+        if (!btn.classList.contains(`selected`)) {
+          btn.style.background = `rgba(128, 128, 128, 0.15)`
         }
-        li.appendChild(btn);
-        ul.appendChild(li);
+      }
+      btn.onmouseleave = () => {
+        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.appendChild(btn)
+      ul.appendChild(li)
     }
-    portal_el.appendChild(ul);
-    document.body.appendChild(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) {
+
+    portal_el.appendChild(ul)
+    document.body.appendChild(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;
+      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) {
+    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
-        }
+      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) {
-    if (!dropdown_open)
-        return;
-    const target = evt.target;
-    if (!(target instanceof Node) ||
-        (!trigger_el?.contains(target) && !portal_el?.contains(target))) {
-        close_dropdown();
+    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) {
-    if (!portal_el)
-        return;
-    const buttons = [...portal_el.querySelectorAll(`button`)];
-    const idx = buttons.indexOf(document.activeElement);
-    const len = buttons.length;
+  }
+
+  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();
+      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 < 0 ? len - 1 : (idx - 1 + len) % len]?.focus()
+    } else if (evt.key === `Enter` && idx >= 0) {
+      evt.preventDefault()
+      buttons[idx].click()
     }
-    else if (evt.key === `ArrowUp`) {
-        evt.preventDefault();
-        buttons[idx < 0 ? len - 1 : (idx - 1 + len) % len]?.focus();
-    }
-    else if (evt.key === `Enter` && idx >= 0) {
-        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);
-});
-export {};
+  }
+
+  // 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} />
@@ -180,7 +208,7 @@ export {};
     {...rest}
     class="portal-select-trigger {rest.class ?? ``}"
   >
-    {@html format_option(selected_option)}
+    {@html sanitize_html(format_option(selected_option))}
     <span class="arrow">▾</span>
   </button>
 {/if}

package/dist/plot/ReferenceLine.svelte

@@ -1,40 +1,94 @@
-<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 { 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, } = $props();
-let endpoints = $derived(resolve_line_endpoints(ref_line, { x_min, x_max, y_min, y_max }, {
+<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,
-}));
-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({
+    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) => ({
+  })
+
+  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) {
+  })
+
+  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);
+      event.preventDefault()
+      const evt = make_event(event)
+      ref_line.on_click?.(evt)
+      on_click?.(evt)
     }
-}
+  }
 </script>
 
 {#if endpoints && ref_line.visible !== false}