matterviz 0.3.1 → 0.3.3

package/dist/layout/InfoCard.svelte

@@ -1,13 +1,45 @@
-<script lang="ts">import { format_num } from '../labels';
-let { data = [], title = ``, fallback = ``, fmt = `.2f`, as = `section`, title_snippet, fallback_snippet, ...rest } = $props();
-let default_fmt = $derived(fmt); // rename fmt to default_fmt for internal use
+<script lang="ts">
+  import { format_num } from '../labels'
+  import { sanitize_html } from '../sanitize'
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  interface Props<T extends keyof HTMLElementTagNameMap = `section`>
+    extends HTMLAttributes<HTMLElementTagNameMap[T]> {
+    data?: {
+      title: string
+      value?: string | number | number[] | null
+      unit?: string
+      fmt?: string
+      condition?: boolean | number | null
+      tooltip?: string
+    }[]
+    title?: string
+    fallback?: string
+    fmt?: string
+    as?: T
+    title_snippet?: Snippet
+    fallback_snippet?: Snippet
+  }
+  let {
+    data = [],
+    title = ``,
+    fallback = ``,
+    fmt = `.2f`,
+    as = `section`,
+    title_snippet,
+    fallback_snippet,
+    ...rest
+  }: Props = $props()
+
+  let default_fmt = $derived(fmt) // rename fmt to default_fmt for internal use
 </script>
 
 <svelte:element this={as} {...rest} class="info-card {rest.class ?? ``}">
   {#if title || title_snippet}
     <h2>
       {#if title_snippet}{@render title_snippet()}{:else}
-        {@html title}
+        {@html sanitize_html(title)}
       {/if}
     </h2>
   {/if}
@@ -20,10 +52,10 @@ let default_fmt = $derived(fmt); // rename fmt to default_fmt for internal use
   }
     <div>
       <span class="title" {title}>
-        {@html title}
+        {@html sanitize_html(title)}
       </span>
       <strong title={tooltip ?? null}>
-        {@html typeof value == `number` ? format_num(value, fmt) : value}
+        {@html sanitize_html(typeof value == `number` ? format_num(value, fmt) : value)}
         {#if unit}
           <small>{unit}</small>
         {/if}

package/dist/layout/InfoTag.svelte

@@ -1,33 +1,64 @@
-<script lang="ts">import Icon from '../Icon.svelte';
-import { tooltip } from 'svelte-multiselect';
-let { label, value, copy_value, title, variant = `default`, size = `md`, removable = false, disabled = false, onclick, onremove, children, ...rest } = $props();
-let just_copied = $state(false);
-async function copy_to_clipboard() {
-    const to_copy = copy_value ?? value;
-    if (to_copy === undefined)
-        return;
-    await navigator.clipboard.writeText(String(to_copy));
-    just_copied = true;
-    setTimeout(() => (just_copied = false), 1000);
-}
-function handle_click(event) {
-    if (disabled)
-        return;
-    if (onclick)
-        onclick(event);
-    else
-        void copy_to_clipboard();
-}
-function handle_keydown(event) {
-    if (disabled || (event.key !== `Enter` && event.key !== ` `))
-        return;
-    event.preventDefault();
-    event.currentTarget?.click();
-}
-function handle_remove(event) {
-    event.stopPropagation();
-    onremove?.();
-}
+<script lang="ts">
+  import Icon from '../Icon.svelte'
+  import { sanitize_html } from '../sanitize'
+  import type { Snippet } from 'svelte'
+  import { tooltip } from 'svelte-multiselect'
+  import type { HTMLAttributes } from 'svelte/elements'
+  import type { InfoTagSize, InfoTagVariant } from './index'
+
+  let {
+    label,
+    value,
+    copy_value,
+    title,
+    variant = `default`,
+    size = `md`,
+    removable = false,
+    disabled = false,
+    onclick,
+    onremove,
+    children,
+    ...rest
+  }: {
+    label: string // Label text (supports HTML)
+    value: string | number | undefined // Value to display (supports HTML)
+    copy_value?: string | number // Value to copy to clipboard (defaults to value)
+    title?: string // Tooltip text
+    variant?: InfoTagVariant // Visual variant for semantic meaning
+    size?: InfoTagSize // Size variant
+    removable?: boolean // Show remove/close button
+    disabled?: boolean // Disable interactions
+    onclick?: (event: MouseEvent) => void // Custom click handler (overrides copy-to-clipboard default)
+    onremove?: () => void // Callback when remove button is clicked
+    children?: Snippet<[]> // Additional content to render inside the tag
+  } & Omit<HTMLAttributes<HTMLSpanElement>, `onclick` | `onkeydown`> = $props()
+
+  let just_copied = $state(false)
+
+  async function copy_to_clipboard(): Promise<void> {
+    const to_copy = copy_value ?? value
+    if (to_copy === undefined) return
+    await navigator.clipboard.writeText(String(to_copy))
+    just_copied = true
+    setTimeout(() => (just_copied = false), 1000)
+  }
+
+  function handle_click(event: MouseEvent): void {
+    if (disabled) return
+    if (onclick) onclick(event)
+    else void copy_to_clipboard()
+  }
+
+  function handle_keydown(event: KeyboardEvent): void {
+    if (disabled || (event.key !== `Enter` && event.key !== ` `)) return
+    event.preventDefault()
+    ;(event.currentTarget as HTMLElement)?.click()
+  }
+
+  function handle_remove(event: MouseEvent): void {
+    event.stopPropagation()
+    onremove?.()
+  }
 </script>
 
 <span
@@ -42,8 +73,8 @@ function handle_remove(event) {
   aria-disabled={disabled}
   {...rest}
 >
-  {@html label}
-  <em>{@html value}</em>
+  {@html sanitize_html(label)}
+  <em>{@html sanitize_html(value)}</em>
   {#if just_copied}
     <Icon
       icon="Check"
@@ -67,63 +98,63 @@ function handle_remove(event) {
     border: 1px solid;
     white-space: nowrap;
     border-color: color-mix(in srgb, var(--tag-color) 25%, transparent);
-  }
-  .info-tag em {
-    font-style: normal;
-    font-weight: 600;
-    color: var(--tag-color);
-  }
-  .info-tag:hover:not(.disabled) {
-    background: color-mix(in srgb, var(--tag-color) 18%, transparent);
-    border-color: color-mix(in srgb, var(--tag-color) 40%, transparent);
-  }
-  .info-tag.sm {
-    font-size: 0.72em;
-    padding: 0 5pt;
-    border-radius: 4px;
-  }
-  .info-tag.md {
-    font-size: 0.8em;
-    padding: 1pt 6pt;
-    border-radius: 5px;
-  }
-  .info-tag.lg {
-    font-size: 0.9em;
-    padding: 3pt 8pt;
-    border-radius: 6px;
-  }
-  .info-tag.default {
-    --tag-color: var(--highlight, #4db6ff);
-  }
-  .info-tag.success {
-    --tag-color: var(--success-color, #10b981);
-  }
-  .info-tag.warning {
-    --tag-color: var(--warning-color, #f59e0b);
-  }
-  .info-tag.error {
-    --tag-color: var(--error-color, #ef4444);
-  }
-  .info-tag.info {
-    --tag-color: var(--info-color, #3b82f6);
-  }
-  .info-tag.disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-  .info-tag:active:not(.disabled) {
-    transform: scale(0.97);
-  }
-  .info-tag :global(.copy-checkmark) {
-    position: absolute;
-    top: 50%;
-    right: 3pt;
-    transform: translateY(-50%);
-    background: rgba(16, 185, 129, 0.9);
-    border-radius: 50%;
-    padding: 2pt;
-    display: flex;
-    animation: pop-in 0.15s ease-out;
+    em {
+      font-style: normal;
+      font-weight: 600;
+      color: var(--tag-color);
+    }
+    &:hover:not(.disabled) {
+      background: color-mix(in srgb, var(--tag-color) 18%, transparent);
+      border-color: color-mix(in srgb, var(--tag-color) 40%, transparent);
+    }
+    &.sm {
+      font-size: 0.72em;
+      padding: 0 5pt;
+      border-radius: 4px;
+    }
+    &.md {
+      font-size: 0.8em;
+      padding: 1pt 6pt;
+      border-radius: 5px;
+    }
+    &.lg {
+      font-size: 0.9em;
+      padding: 3pt 8pt;
+      border-radius: 6px;
+    }
+    &.default {
+      --tag-color: var(--highlight, #4db6ff);
+    }
+    &.success {
+      --tag-color: var(--success-color, #10b981);
+    }
+    &.warning {
+      --tag-color: var(--warning-color, #f59e0b);
+    }
+    &.error {
+      --tag-color: var(--error-color, #ef4444);
+    }
+    &.info {
+      --tag-color: var(--info-color, #3b82f6);
+    }
+    &.disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+    &:active:not(.disabled) {
+      transform: scale(0.97);
+    }
+    :global(.copy-checkmark) {
+      position: absolute;
+      top: 50%;
+      right: 3pt;
+      transform: translateY(-50%);
+      background: rgba(16, 185, 129, 0.9);
+      border-radius: 50%;
+      padding: 2pt;
+      display: flex;
+      animation: pop-in 0.15s ease-out;
+    }
   }
   [aria-label='Remove'] {
     display: flex;
@@ -137,11 +168,11 @@ function handle_remove(event) {
     border-radius: 50%;
     color: inherit;
     opacity: 0.5;
-  }
-  [aria-label='Remove']:hover {
-    opacity: 1;
-    background: rgba(239, 68, 68, 0.2);
-    color: var(--error-color, #ef4444);
+    &:hover {
+      opacity: 1;
+      background: rgba(239, 68, 68, 0.2);
+      color: var(--error-color, #ef4444);
+    }
   }
   @keyframes pop-in {
     from {

package/dist/layout/PropertyFilter.svelte

@@ -1,50 +1,95 @@
-<script lang="ts">import Icon from '../Icon.svelte';
-import { Histogram } from '../plot';
-let { label, min_value = $bindable(), max_value = $bindable(), placeholders = {}, title, histogram_data, histogram_height = 30, histogram_color = `rgba(0, 0, 0, 0.2)`, histogram_position = `top`, log = false, disabled = false, unit, show_clear_button = true, onchange, onclear, ...rest } = $props();
-let show_histogram = $derived(histogram_position !== `none` && histogram_data?.length);
-// Active when either bound is set (undefined = unbounded)
-let active = $derived(min_value !== undefined || max_value !== undefined);
-let plain_label = $derived(label.replace(/<[^>]*>/g, ``));
-let filtered_data = $derived.by(() => {
-    if (!histogram_data)
-        return [];
+<script lang="ts">
+  import Icon from '../Icon.svelte'
+  import { sanitize_html } from '../sanitize'
+  import type { AxisConfig, DataSeries } from '../plot'
+  import { Histogram } from '../plot'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  let {
+    label,
+    min_value = $bindable(),
+    max_value = $bindable(),
+    placeholders = {},
+    title,
+    histogram_data,
+    histogram_height = 30,
+    histogram_color = `rgba(0, 0, 0, 0.2)`,
+    histogram_position = `top`,
+    log = false,
+    disabled = false,
+    unit,
+    show_clear_button = true,
+    onchange,
+    onclear,
+    ...rest
+  }: {
+    label: string // Label text (supports HTML)
+    min_value?: number // Minimum value for filtering (undefined = unbounded)
+    max_value?: number // Maximum value for filtering (undefined = unbounded)
+    placeholders?: { min?: string; max?: string } // Placeholder text for min/max inputs
+    title?: string // Tooltip title for the label
+    histogram_data?: number[] // Data array for histogram visualization
+    histogram_height?: number // Height of histogram in pixels
+    histogram_color?: string // Color for histogram bars (unfilled data)
+    histogram_position?: `top` | `bottom` | `none` // Position of histogram relative to inputs, or 'none' to hide
+    log?: boolean // Use logarithmic scale for histogram y-axis
+    disabled?: boolean // Disable all inputs
+    unit?: string // Unit label to display after inputs
+    show_clear_button?: boolean // Show clear button when filters are active
+    onchange?: (min: number | undefined, max: number | undefined) => void // Callback when filter values change
+    onclear?: () => void // Callback when clear button is clicked (fires before onchange)
+  } & HTMLAttributes<HTMLDivElement> = $props()
+
+  let show_histogram = $derived(
+    histogram_position !== `none` && histogram_data?.length,
+  )
+
+  // Active when either bound is set (undefined = unbounded)
+  let active = $derived(min_value !== undefined || max_value !== undefined)
+  let plain_label = $derived(label.replace(/<[^>]*>/g, ``))
+
+  let filtered_data = $derived.by(() => {
+    if (!histogram_data) return []
     // undefined means unbounded (-Infinity for min, +Infinity for max)
-    const min = min_value ?? -Infinity;
-    const max = max_value ?? Infinity;
-    return histogram_data.filter((val) => val >= min && val <= max);
-});
-function onkeydown(event) {
+    const min = min_value ?? -Infinity
+    const max = max_value ?? Infinity
+    return histogram_data.filter((val) => val >= min && val <= max)
+  })
+
+  function onkeydown(event: KeyboardEvent): void {
     if (event.key === `Enter`) {
-        event.preventDefault();
-        event.target.blur();
-    }
-    else if (event.key === `Escape` && active) {
-        event.preventDefault();
-        clear_filter();
+      event.preventDefault()
+      ;(event.target as HTMLInputElement).blur()
+    } else if (event.key === `Escape` && active) {
+      event.preventDefault()
+      clear_filter()
     }
-}
-function clear_filter() {
-    min_value = max_value = undefined;
-    onclear?.();
-    onchange?.(undefined, undefined);
-}
-const axis_config = {
+  }
+
+  function clear_filter(): void {
+    min_value = max_value = undefined
+    onclear?.()
+    onchange?.(undefined, undefined)
+  }
+
+  const axis_config: AxisConfig = {
     ticks: 0,
     label: ``,
     grid_style: { style: `opacity: 0` },
     tick: { label: { inside: true } },
     color: `color-mix(in srgb, currentColor 60%, transparent)`,
-};
-// x: [] satisfies DataSeries type requirement; Histogram bins on y values only
-const series = $derived([
+  }
+
+  // x: [] satisfies DataSeries type requirement; Histogram bins on y values only
+  const series: DataSeries[] = $derived([
     { y: histogram_data ?? [], color: histogram_color, label: `All`, x: [] },
     {
-        y: filtered_data,
-        color: `var(--accent-color, #228be6)`,
-        label: `Filtered`,
-        x: [],
+      y: filtered_data,
+      color: `var(--accent-color, #228be6)`,
+      label: `Filtered`,
+      x: [],
     },
-]);
+  ])
 </script>
 
 {#snippet histogram_snippet()}
@@ -76,7 +121,7 @@ const series = $derived([
     {@render histogram_snippet()}
   {/if}
   <div class="filter-row">
-    <span {title} class="filter-label">{@html label}</span>
+    <span {title} class="filter-label">{@html sanitize_html(label)}</span>
     <div class="filter-inputs">
       <input
         bind:value={min_value}

package/dist/layout/SettingsSection.svelte

@@ -1,64 +1,94 @@
-<script lang="ts">import Icon from '../Icon.svelte';
-import { untrack } from 'svelte';
-let { title, current_values, children, on_reset = () => { }, ...rest } = $props();
-// Create a deep copy of current_values on mount to use as reference values
-function deep_copy(obj) {
-    if (obj === null || typeof obj !== `object`)
-        return obj;
-    if (obj instanceof Date)
-        return new Date(obj.getTime());
-    if (obj instanceof RegExp)
-        return new RegExp(obj);
+<script lang="ts">
+  import Icon from '../Icon.svelte'
+  import type { Snippet } from 'svelte'
+  import { untrack } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  let {
+    title,
+    current_values,
+    children,
+    on_reset = () => {},
+    ...rest
+  }: HTMLAttributes<HTMLElementTagNameMap[`section`]> & {
+    title: string
+    current_values: Record<string, unknown>
+    children: Snippet<
+      [{
+        current_values: Record<string, unknown>
+        has_changes: boolean
+        reference_values: Record<string, unknown>
+      }]
+    >
+    on_reset?: () => void
+  } = $props()
+
+  // Create a deep copy of current_values on mount to use as reference values
+  function deep_copy(obj: unknown): unknown {
+    if (obj === null || typeof obj !== `object`) return obj
+    if (obj instanceof Date) return new Date(obj.getTime())
+    if (obj instanceof RegExp) return new RegExp(obj)
     if (Array.isArray(obj)) {
-        return obj.map((item) => typeof item === `object` && item !== null ? deep_copy(item) : item);
+      return obj.map((item) =>
+        typeof item === `object` && item !== null ? deep_copy(item) : item
+      )
     }
-    const copy = {};
-    for (const [key, value] of Object.entries(obj)) {
-        copy[key] = typeof value === `object` && value !== null
-            ? deep_copy(value)
-            : value;
+
+    const copy: Record<string, unknown> = {}
+    for (const [key, value] of Object.entries(obj as Record<string, unknown>)) {
+      copy[key] = typeof value === `object` && value !== null
+        ? deep_copy(value)
+        : value
     }
-    return copy;
-}
-// Capture initial values once at mount - must NOT be $derived or it tracks changes
-const reference_values = untrack(() => deep_copy(current_values));
-// Check if any values have changed from reference values
-let has_changes = $derived.by(() => {
+    return copy
+  }
+
+  // Capture initial values once at mount - must NOT be $derived or it tracks changes
+  const reference_values = untrack(() =>
+    deep_copy(current_values) as Record<string, unknown>
+  )
+
+  // Check if any values have changed from reference values
+  let has_changes = $derived.by(() => {
     for (const [key, reference_value] of Object.entries(reference_values)) {
-        const current_value = current_values[key];
-        // Deep comparison for arrays
-        if (Array.isArray(reference_value) && Array.isArray(current_value)) {
-            if (reference_value.length !== current_value.length)
-                return true;
-            if (reference_value.some((val, idx) => {
-                const curr_val = current_value[idx];
-                // Handle nested objects/arrays in arrays
-                if (typeof val === `object` && val !== null &&
-                    typeof curr_val === `object` && curr_val !== null)
-                    return JSON.stringify(val) !== JSON.stringify(curr_val); // Quick deep comparison fallback
-                return val !== curr_val;
-            })) {
-                return true;
-            }
-            continue;
-        }
-        // Handle undefined/null comparisons properly
-        if (reference_value === undefined && current_value === undefined)
-            continue;
-        if (reference_value === null && current_value === null)
-            continue;
-        // Basic comparison for primitives
-        if (current_value !== reference_value) {
-            return true;
+      const current_value = current_values[key]
+
+      // Deep comparison for arrays
+      if (Array.isArray(reference_value) && Array.isArray(current_value)) {
+        if (reference_value.length !== current_value.length) return true
+        if (
+          reference_value.some((val, idx) => {
+            const curr_val = current_value[idx]
+            // Handle nested objects/arrays in arrays
+            if (
+              typeof val === `object` && val !== null &&
+              typeof curr_val === `object` && curr_val !== null
+            ) return JSON.stringify(val) !== JSON.stringify(curr_val) // Quick deep comparison fallback
+            return val !== curr_val
+          })
+        ) {
+          return true
         }
+        continue
+      }
+
+      // Handle undefined/null comparisons properly
+      if (reference_value === undefined && current_value === undefined) continue
+      if (reference_value === null && current_value === null) continue
+
+      // Basic comparison for primitives
+      if (current_value !== reference_value) {
+        return true
+      }
     }
-    return false;
-});
-function handle_reset(event) {
-    event.stopPropagation();
-    event.preventDefault();
-    on_reset();
-}
+    return false
+  })
+
+  function handle_reset(event: MouseEvent) {
+    event.stopPropagation()
+    event.preventDefault()
+    on_reset()
+  }
 </script>
 
 <h4 id="settings-section-title">