matterviz 0.3.4 → 0.3.6

package/dist/src/lib/layout/PropertyFilter.svelte

@@ -0,0 +1,246 @@
+<script lang="ts">
+  import Icon from '$lib/Icon.svelte'
+  import { sanitize_html } from '$lib/sanitize'
+  import type { AxisConfig, DataSeries } from '$lib/plot'
+  import { Histogram } from '$lib/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: KeyboardEvent & { currentTarget: HTMLInputElement },
+  ): void {
+    if (event.key === `Enter`) {
+      event.preventDefault()
+      event.currentTarget.blur()
+    } else if (event.key === `Escape` && active) {
+      event.preventDefault()
+      clear_filter()
+    }
+  }
+
+  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: DataSeries[] = $derived([
+    { y: histogram_data ?? [], color: histogram_color, label: `All`, x: [] },
+    {
+      y: filtered_data,
+      color: `var(--accent-color, #228be6)`,
+      label: `Filtered`,
+      x: [],
+    },
+  ])
+</script>
+
+{#snippet histogram_snippet()}
+  <Histogram
+    {series}
+    mode="overlay"
+    bins={50}
+    show_controls={false}
+    show_legend={false}
+    x_axis={{ ...axis_config, ticks: 3 }}
+    y_axis={{
+      ticks: 0,
+      label: ``,
+      color: `transparent`,
+      scale_type: log ? `log` : `linear`,
+    }}
+    display={{ y_grid: false, x_grid: false }}
+    padding={{ t: 0, b: 12, l: 2, r: 2 }}
+    bar={{ stroke_width: 0, border_radius: 1, opacity: 0.5 }}
+    style="--histogram-min-height: {histogram_height}px; --histogram-svg-height: 0; --histogram-bg: transparent"
+    fullscreen_toggle={false}
+    range_padding={0}
+  />
+  {#if log}<span class="log-label">log</span>{/if}
+{/snippet}
+
+<div class="filter-container" class:active class:disabled {...rest}>
+  {#if show_histogram && histogram_position === `top`}
+    {@render histogram_snippet()}
+  {/if}
+  <div class="filter-row">
+    <span {title} class="filter-label">{@html sanitize_html(label)}</span>
+    <div class="filter-inputs">
+      <input
+        bind:value={min_value}
+        type="number"
+        step="any"
+        placeholder={placeholders.min ?? `min`}
+        {onkeydown}
+        onblur={() => onchange?.(min_value, max_value)}
+        {disabled}
+        aria-label="{plain_label} minimum"
+      />
+      <input
+        bind:value={max_value}
+        type="number"
+        step="any"
+        placeholder={placeholders.max ?? `max`}
+        {onkeydown}
+        onblur={() => onchange?.(min_value, max_value)}
+        {disabled}
+        aria-label="{plain_label} maximum"
+      />
+      {#if unit}<span class="unit-label">{unit}</span>{/if}
+      {#if show_clear_button && active && !disabled}
+        <button
+          type="button"
+          class="clear-btn"
+          onclick={clear_filter}
+          title="Clear filter (Escape)"
+          aria-label="Clear filter"
+        >
+          <Icon icon="Close" style="width: 12px; height: 12px" />
+        </button>
+      {/if}
+    </div>
+  </div>
+  {#if show_histogram && histogram_position === `bottom`}
+    {@render histogram_snippet()}
+  {/if}
+</div>
+
+<style>
+  .filter-container {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    padding: 4pt 8pt;
+    border-radius: 6px;
+    transition: all 0.15s;
+    background: var(--filter-bg, rgba(128, 128, 128, 0.05));
+  }
+  .filter-container.active {
+    background: var(--filter-active-bg, rgba(77, 182, 255, 0.08));
+  }
+  .filter-container.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+  .filter-row {
+    display: flex;
+    align-items: center;
+    gap: 8pt;
+  }
+  .log-label {
+    position: absolute;
+    top: 2pt;
+    right: 4pt;
+    font-size: 0.6em;
+    font-weight: 600;
+    text-transform: uppercase;
+    opacity: 0.4;
+    padding: 1pt 3pt;
+    background: rgba(128, 128, 128, 0.1);
+    border-radius: 2px;
+  }
+  .filter-inputs {
+    display: flex;
+    align-items: center;
+    gap: 4pt;
+    flex: 1;
+    min-width: 0;
+  }
+  .filter-inputs input {
+    flex: 1;
+    min-width: 0;
+    border: 1px solid rgba(128, 128, 128, 0.2);
+    border-radius: 4px;
+    padding: 3pt 6pt;
+    background: color-mix(in srgb, currentColor 2%, transparent);
+    color: inherit;
+    font-family: var(--mono-font, monospace);
+  }
+  .filter-inputs input::placeholder {
+    opacity: 0.4;
+  }
+  .filter-inputs input:focus {
+    outline: none;
+    border-color: var(--highlight, #4db6ff);
+  }
+  .unit-label {
+    font-size: 0.8em;
+    opacity: 0.5;
+    white-space: nowrap;
+  }
+  .clear-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 3pt;
+    border-radius: 4px;
+    color: inherit;
+    opacity: 0.5;
+  }
+  .clear-btn:hover {
+    opacity: 1;
+    background: rgba(128, 128, 128, 0.15);
+  }
+</style>

package/dist/src/lib/layout/SettingsSection.svelte

@@ -0,0 +1,148 @@
+<script lang="ts">
+  import Icon from '$lib/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
+      )
+    }
+
+    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) 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
+      }
+    }
+    return false
+  })
+
+  function handle_reset(event: MouseEvent) {
+    event.stopPropagation()
+    event.preventDefault()
+    on_reset()
+  }
+</script>
+
+<h4 id="settings-section-title">
+  {title}
+
+  {#if has_changes}
+    <button
+      class="reset-button"
+      onclick={handle_reset}
+      title="Reset {title.toLowerCase()} to defaults"
+      aria-label="Reset {title.toLowerCase()} to defaults"
+    >
+      <Icon icon="Reset" style="width: 0.9em; height: 0.9em" />
+      Reset
+    </button>
+  {/if}
+</h4>
+<section {...rest} aria-labelledby="settings-section-title">
+  {@render children?.({ current_values, has_changes, reference_values })}
+</section>
+
+<style>
+  h4 {
+    margin: 0;
+    position: relative;
+  }
+  .reset-button {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    gap: 2pt;
+    padding: var(--reset-btn-padding, 1pt 4pt);
+    font-size: 0.65em;
+    border-radius: var(--reset-btn-border-radius, var(--border-radius, 3pt));
+    background: var(--btn-bg, rgba(0, 0, 0, 0.1));
+    color: var(--text-color-muted, #6b7280);
+    border: 1px solid var(--border-color, #d1d5db);
+    cursor: pointer;
+    z-index: 5;
+    transition: all 0.15s ease;
+    box-shadow: none;
+    opacity: 0.7;
+  }
+  .reset-button:hover {
+    background: var(--btn-bg-hover, rgba(0, 0, 0, 0.2));
+    color: var(--text-color, #374151);
+    opacity: 1;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  }
+  .reset-button.standalone {
+    position: absolute;
+    top: -8pt;
+    right: -8pt;
+  }
+</style>

package/dist/src/lib/layout/SubpageGrid.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+  import Icon from '$lib/Icon.svelte'
+  import type { IconName } from '$lib/icons'
+
+  interface Props {
+    title: string
+    subtitle: string
+    subpages: { href: string; title: string; description: string; icon: IconName }[]
+  }
+  const { title, subtitle, subpages }: Props = $props()
+</script>
+
+<h1>{title}</h1>
+<p class="subtitle">{subtitle}</p>
+
+<nav class="grid">
+  {#each subpages as { href, title: page_title, description, icon } (href)}
+    <a {href} class="card">
+      <Icon {icon} class="icon" />
+      <div>
+        <h2>{page_title}</h2>
+        <p>{description}</p>
+      </div>
+    </a>
+  {/each}
+</nav>
+
+<style>
+  h1 {
+    text-align: center;
+    margin-bottom: 0.3em;
+  }
+  .subtitle {
+    text-align: center;
+    color: var(--text-color-muted);
+    margin: 0 auto 2em;
+  }
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 1.2em;
+    max-width: 1100px;
+    margin: 0 auto;
+    padding: 0;
+  }
+  .card {
+    display: flex;
+    gap: 1em;
+    align-items: flex-start;
+    padding: 1.2em 1.4em;
+    border-radius: var(--border-radius, 5pt);
+    border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
+    text-decoration: none;
+    color: inherit;
+    transition: border-color 0.15s, box-shadow 0.15s;
+    &:hover {
+      border-color: color-mix(in srgb, currentColor 35%, transparent);
+      box-shadow: 0 2px 12px color-mix(in srgb, currentColor 8%, transparent);
+    }
+    &:hover :global(.icon) {
+      opacity: 1;
+    }
+    h2 {
+      margin: 0 0 0.4em;
+      font-size: 1.1em;
+    }
+    p {
+      margin: 0;
+      font-size: 0.88em;
+      color: var(--text-color-muted);
+      line-height: 1.5;
+    }
+  }
+  .card :global(.icon) {
+    width: 2em;
+    height: 2em;
+    flex-shrink: 0;
+    margin-top: 0.1em;
+    opacity: 0.6;
+    transition: opacity 0.15s;
+  }
+</style>

package/dist/src/lib/layout/fullscreen.ts

@@ -0,0 +1,65 @@
+import { get_page_background } from '$lib/colors'
+
+// A key-value pair for displaying structured info in cards and panes
+export type InfoItem = Readonly<{
+  label: string
+  value: string | number
+  key?: string
+  tooltip?: string
+}>
+
+// Toggle fullscreen mode for a wrapper element
+export async function toggle_fullscreen(wrapper?: HTMLDivElement): Promise<void> {
+  if (!wrapper || !wrapper.isConnected) return
+  try {
+    if (!document.fullscreenElement) {
+      await wrapper.requestFullscreen()
+    } else if (document.fullscreenElement === wrapper) {
+      await document.exitFullscreen()
+    } else {
+      await document.exitFullscreen()
+      await wrapper.requestFullscreen()
+    }
+  } catch (error) {
+    console.error(`Fullscreen operation failed:`, error)
+  }
+}
+
+// Setup fullscreen effect with optional callback for when fullscreen state changes
+export function setup_fullscreen_effect(
+  fullscreen: boolean,
+  wrapper: HTMLDivElement | undefined,
+  on_fullscreen_change?: (entering_fullscreen: boolean) => void,
+): void {
+  if (typeof window === `undefined`) return
+
+  if (fullscreen && !document.fullscreenElement && wrapper?.isConnected) {
+    wrapper
+      .requestFullscreen()
+      .then(() => on_fullscreen_change?.(true))
+      .catch((error) => {
+        console.error(`Fullscreen request failed:`, error)
+        on_fullscreen_change?.(false)
+      })
+  } else if (!fullscreen && document.fullscreenElement === wrapper) {
+    // Only exit if this wrapper is the fullscreen element (avoids exiting another component's session)
+    document
+      .exitFullscreen()
+      .then(() => on_fullscreen_change?.(false))
+      .catch((error) => {
+        console.error(`Exit fullscreen failed:`, error)
+        on_fullscreen_change?.(false)
+      })
+  }
+}
+
+// Set CSS variable to page background when entering fullscreen mode
+export function set_fullscreen_bg(
+  wrapper: HTMLDivElement | undefined,
+  fullscreen: boolean,
+  css_var_name: string,
+): void {
+  if (!wrapper || !fullscreen) return
+  const bg = get_page_background()
+  if (bg) wrapper.style.setProperty(css_var_name, bg)
+}

package/dist/src/lib/layout/index.ts

@@ -0,0 +1,11 @@
+export * from './fullscreen'
+export { default as FullscreenToggle } from './FullscreenToggle.svelte'
+export { default as InfoCard } from './InfoCard.svelte'
+export { default as InfoTag } from './InfoTag.svelte'
+export * from './json-tree'
+export { default as PropertyFilter } from './PropertyFilter.svelte'
+export { default as SettingsSection } from './SettingsSection.svelte'
+export { default as SubpageGrid } from './SubpageGrid.svelte'
+
+export type InfoTagVariant = `default` | `success` | `warning` | `error` | `info`
+export type InfoTagSize = `sm` | `md` | `lg`