matterviz 0.3.6 → 0.3.7

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

@@ -1,246 +0,0 @@
-<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

@@ -1,148 +0,0 @@
-<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

@@ -1,82 +0,0 @@
-<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

@@ -1,65 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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`