matterviz 0.3.4 → 0.3.6

package/dist/table/HeatmapTable.svelte.d.ts

@@ -1,49 +0,0 @@
-import type { CellSnippet, ExportData, InitialSort, Label, Pagination, RowData, Search, SortHint, SpecialCells } from './';
-import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
-    data: RowData[];
-    columns?: Label[];
-    sort_hint?: SortHint;
-    cell?: CellSnippet;
-    special_cells?: SpecialCells;
-    controls?: Snippet;
-    initial_sort?: InitialSort;
-    sort?: {
-        column: string;
-        dir: `asc` | `desc`;
-    };
-    fixed_header?: boolean;
-    default_num_format?: string;
-    show_heatmap?: boolean;
-    heatmap_class?: string;
-    onrowclick?: (event: MouseEvent | KeyboardEvent, row: RowData) => void;
-    onrowdblclick?: (event: MouseEvent, row: RowData) => void;
-    column_order?: string[];
-    export_data?: ExportData;
-    show_column_toggle?: boolean;
-    search?: Search;
-    show_row_select?: boolean;
-    pagination?: Pagination;
-    selected_rows?: RowData[];
-    hidden_columns?: string[];
-    scroll_style?: string;
-    root_style?: string;
-    onsort?: (column: string, dir: `asc` | `desc`) => Promise<RowData[]>;
-    onsorterror?: (error: unknown, column: string, dir: `asc` | `desc`) => void;
-    loading?: boolean;
-    sort_data?: boolean;
-    heatmap_opacity?: number;
-    empty_message?: string;
-    show_row_numbers?: boolean;
-    allow_better_toggle?: boolean;
-    show_controls?: boolean;
-    controls_open?: boolean;
-    header_cell?: Snippet<[{
-        col: Label;
-    }]>;
-    footer?: Snippet;
-};
-declare const HeatmapTable: import("svelte").Component<$$ComponentProps, {}, "sort" | "data" | "show_controls" | "controls_open" | "show_heatmap" | "column_order" | "selected_rows" | "hidden_columns" | "loading" | "heatmap_opacity">;
-type HeatmapTable = ReturnType<typeof HeatmapTable>;
-export default HeatmapTable;

package/dist/table/ToggleMenu.svelte

@@ -1,376 +0,0 @@
-<script lang="ts">
-  import Icon from '../Icon.svelte'
-  import { sanitize_html } from '../sanitize'
-  import type { Label } from './'
-  import { click_outside, tooltip } from 'svelte-multiselect/attachments'
-  import { slide } from 'svelte/transition'
-
-  let {
-    columns = $bindable([]),
-    column_panel_open = $bindable(false),
-    n_columns,
-    collapsed_sections = $bindable<string[]>([]),
-    on_reset,
-  }: {
-    columns: Label[]
-    column_panel_open?: boolean
-    // Number of grid columns for toggle layout
-    n_columns?: number
-    collapsed_sections?: string[]
-    // Called after reset with the section name (or undefined for global reset)
-    on_reset?: (section?: string) => void
-  } = $props()
-
-  const col_id = (col: Label) => col.key ?? col.label
-
-  // Snapshot default visibility when column set changes (new dataset).
-  // Compare by column keys to avoid re-snapshotting on internal columns = [...columns] reactivity.
-  // Intentionally non-reactive: mutated only inside snapshot_defaults() and compared manually.
-  let prev_col_keys = ``
-  let default_visibility: Record<string, boolean> = {}
-  function snapshot_defaults() {
-    default_visibility = {}
-    for (const col of columns) {
-      default_visibility[col_id(col)] = col.visible !== false
-    }
-    prev_col_keys = columns.map(col_id).join(`\0`)
-  }
-  snapshot_defaults()
-
-  $effect(() => {
-    const current_keys = columns.map(col_id).join(`\0`)
-    if (current_keys !== prev_col_keys) {
-      snapshot_defaults()
-    }
-  })
-
-  // Check if a column's visibility differs from its default
-  const is_changed = (col: Label) =>
-    (col.visible !== false) !== (default_visibility[col_id(col)] ?? true)
-
-  let has_any_changes = $derived(columns.some(is_changed))
-
-  // Reset columns to default visibility
-  function reset_columns(items: Label[]): void {
-    for (const col of items) {
-      col.visible = default_visibility[col_id(col)] ?? true
-    }
-    columns = [...columns]
-  }
-
-  function reset_all(): void {
-    reset_columns(columns)
-    on_reset?.()
-  }
-
-  function reset_section(section_name: string): void {
-    const section = sections.find((sec) => sec.name === section_name)
-    if (!section) return
-    reset_columns(section.items)
-    on_reset?.(section_name)
-  }
-
-  // Group columns by their group property
-  let sections = $derived.by(() => {
-    const grouped: Record<string, Label[]> = {}
-    const ungrouped: Label[] = []
-
-    for (const col of columns) {
-      if (col.group) {
-        grouped[col.group] ??= []
-        grouped[col.group].push(col)
-      } else {
-        ungrouped.push(col)
-      }
-    }
-
-    const result = Object.entries(grouped).map(([name, items]) => ({ name, items }))
-    if (ungrouped.length > 0) result.push({ name: ``, items: ungrouped })
-    return result
-  })
-
-  // Check if any column defines a group (to decide whether to show sections)
-  let has_sections = $derived(columns.some((col) => col.group))
-
-  function toggle_section(name: string) {
-    collapsed_sections = collapsed_sections.includes(name)
-      ? collapsed_sections.filter((s) => s !== name)
-      : [...collapsed_sections, name]
-  }
-
-  function toggle_column_visibility(col: Label, event: Event) {
-    if (!(event.target instanceof HTMLInputElement)) return
-    col.visible = event.target.checked
-    columns = [...columns] // trigger reactivity on parent binding
-  }
-
-  // Grid template for section items
-  let grid_template = $derived(
-    n_columns
-      ? `repeat(${n_columns}, max-content)`
-      : `repeat(auto-fill, minmax(135px, 1fr))`,
-  )
-
-  // Reposition dropdown: left-aligned by default, switch to right if it overflows viewport
-  let details_el: HTMLElement | undefined
-  $effect(() => {
-    if (!column_panel_open || !details_el) return
-    // Re-run when section state changes while open
-    void n_columns
-    void collapsed_sections
-    void sections
-    const dropdown = details_el.querySelector<HTMLElement>(
-      `.column-menu, .sections-container`,
-    )
-    if (!dropdown) return
-    // Reset to left-aligned
-    dropdown.style.left = `0`
-    dropdown.style.right = `auto`
-    requestAnimationFrame(() => {
-      const rect = dropdown.getBoundingClientRect()
-      if (rect.right > window.innerWidth) {
-        dropdown.style.left = `auto`
-        dropdown.style.right = `0`
-      }
-    })
-  })
-</script>
-
-{#snippet toggle_item(col: Label)}
-  <label
-    class="toggle-label"
-    class:disabled={col.disabled}
-    {@attach tooltip({ content: col.description })}
-  >
-    <input
-      type="checkbox"
-      checked={col.visible !== false}
-      disabled={col.disabled}
-      onchange={(event) => toggle_column_visibility(col, event)}
-    />
-    {@html sanitize_html(col.label)}
-  </label>
-{/snippet}
-
-<svelte:window
-  onkeydown={(event) => {
-    if (event.key === `Escape` && column_panel_open) {
-      column_panel_open = false
-      event.preventDefault()
-    }
-  }}
-/>
-
-<details
-  class="column-toggles"
-  bind:this={details_el}
-  bind:open={column_panel_open}
-  {@attach click_outside({ callback: () => (column_panel_open = false) })}
->
-  <summary aria-expanded={column_panel_open}>
-    Columns <Icon icon="Columns" />
-    {#if has_any_changes}
-      <button
-        class="reset-btn"
-        onclick={(event) => {
-          event.stopPropagation()
-          event.preventDefault()
-          reset_all()
-        }}
-        type="button"
-        aria-label="Reset all columns to defaults"
-        {@attach tooltip()}
-      >
-        <Icon icon="Reset" width="12px" />
-      </button>
-    {/if}
-  </summary>
-
-  {#if has_sections}
-    <div class="sections-container" role="group">
-      {#each sections as section (section.name)}
-        {@const is_collapsed = section.name !== `` &&
-        collapsed_sections.includes(section.name)}
-        <div class="section">
-          {#if section.name}
-            <div class="section-header-row">
-              <button
-                class="section-header"
-                aria-expanded={!is_collapsed}
-                onclick={() => toggle_section(section.name)}
-                type="button"
-              >
-                <span class="collapse-icon">{is_collapsed ? `▶` : `▼`}</span>
-                {section.name}
-              </button>
-              {#if section.items.some(is_changed)}
-                <button
-                  class="reset-btn"
-                  onclick={() => reset_section(section.name)}
-                  type="button"
-                  aria-label="Reset {section.name} to defaults"
-                  {@attach tooltip()}
-                >
-                  <Icon icon="Reset" width="12px" />
-                </button>
-              {/if}
-            </div>
-          {/if}
-          {#if !is_collapsed}
-            <div
-              class="section-items"
-              style:grid-template-columns={grid_template}
-              transition:slide={{ duration: 200 }}
-            >
-              {#each section.items as col, idx (col.key ?? col.label ?? idx)}
-                {@render toggle_item(col)}
-              {/each}
-            </div>
-          {/if}
-        </div>
-      {/each}
-    </div>
-  {:else}
-    <div class="column-menu" role="group" style:grid-template-columns={grid_template}>
-      {#each columns as col, idx (col.key ?? col.label ?? idx)}
-        {@render toggle_item(col)}
-      {/each}
-    </div>
-  {/if}
-</details>
-
-<style>
-  .column-toggles {
-    position: relative;
-    summary {
-      background: var(--tgl-btn-bg, var(--btn-bg));
-      padding: 0 6pt;
-      margin: 4pt 0;
-      border-radius: var(--tgl-border-radius, 4pt);
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      gap: 4px;
-      &:hover {
-        background: var(--tgl-hover-bg, var(--nav-bg));
-      }
-      &::-webkit-details-marker {
-        display: none;
-      }
-    }
-  }
-  /* Shared dropdown styling */
-  .column-menu,
-  .sections-container {
-    font-size: var(--tgl-font-size, 1.1em);
-    position: absolute;
-    left: 0;
-    top: calc(100% + 1pt);
-    background: var(--tgl-dropdown-bg, var(--page-bg));
-    border: 1px solid
-      var(--tgl-dropdown-border, color-mix(in srgb, currentColor 10%, transparent));
-    border-radius: var(--tgl-border-radius, 4pt);
-    box-shadow: var(
-      --tgl-dropdown-shadow,
-      0 4px 12px color-mix(in srgb, currentColor 8%, transparent)
-    );
-    min-width: 150px;
-    max-height: var(--tgl-dropdown-max-height, min(70vh, 600px));
-    overflow-y: auto;
-    z-index: 1;
-  }
-  .column-menu {
-    padding: 3pt 5pt;
-    display: grid;
-  }
-  .sections-container {
-    padding: 6pt 8pt;
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-  }
-  .reset-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 2pt;
-    border: none;
-    border-radius: var(--tgl-border-radius, 3pt);
-    background: transparent;
-    cursor: pointer;
-    color: inherit;
-    opacity: 0.5;
-    flex-shrink: 0;
-    &:hover {
-      background: color-mix(in srgb, currentColor 12%, transparent);
-      opacity: 1;
-    }
-  }
-  summary .reset-btn {
-    margin-left: auto;
-  }
-  .section-header-row {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    margin-bottom: 4pt;
-    padding: 2pt 4pt;
-    border-radius: var(--tgl-border-radius, 3pt);
-    background: var(
-      --tgl-section-header-bg,
-      color-mix(in srgb, currentColor 5%, transparent)
-    );
-    &:hover {
-      background: var(
-        --tgl-section-header-hover-bg,
-        color-mix(in srgb, currentColor 12%, transparent)
-      );
-    }
-  }
-  .section-header {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    font-weight: 600;
-    font-size: 0.9em;
-    padding: 0;
-    border: none;
-    background: transparent;
-    cursor: pointer;
-    flex: 1;
-    text-align: left;
-    color: inherit;
-  }
-  .collapse-icon {
-    font-size: 0.7em;
-    width: 1em;
-    flex-shrink: 0;
-  }
-  .section-items {
-    display: grid;
-  }
-  .toggle-label {
-    display: inline-block;
-    margin: 1px 2px;
-    border-radius: 3px;
-    line-height: 1.3em;
-    height: 1.3em;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    &:hover:not(.disabled) {
-      background: var(--tgl-hover-bg, var(--nav-bg));
-    }
-    &.disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-      input {
-        cursor: not-allowed;
-      }
-    }
-  }
-  details :global(:is(sub, sup)) {
-    transform: translate(-3pt, 6pt);
-    font-size: 0.7em;
-  }
-</style>

package/dist/table/ToggleMenu.svelte.d.ts

@@ -1,11 +0,0 @@
-import type { Label } from './';
-type $$ComponentProps = {
-    columns: Label[];
-    column_panel_open?: boolean;
-    n_columns?: number;
-    collapsed_sections?: string[];
-    on_reset?: (section?: string) => void;
-};
-declare const ToggleMenu: import("svelte").Component<$$ComponentProps, {}, "columns" | "column_panel_open" | "collapsed_sections">;
-type ToggleMenu = ReturnType<typeof ToggleMenu>;
-export default ToggleMenu;

package/dist/table/index.d.ts

@@ -1,74 +0,0 @@
-import * as d3sc from 'd3-scale-chromatic';
-import type { Snippet } from 'svelte';
-export { default as HeatmapTable } from './HeatmapTable.svelte';
-export { default as ToggleMenu } from './ToggleMenu.svelte';
-export type CellVal = string | number | boolean | undefined | null | Record<string, unknown> | {
-    [key: string]: string | number | null | undefined | boolean;
-}[];
-export type RowData = {
-    style?: string;
-    class?: string;
-    [key: string]: CellVal;
-};
-export type Label = {
-    label: string;
-    key?: string;
-    group?: string;
-    description?: string;
-    format?: string;
-    better?: `higher` | `lower`;
-    color_scale?: keyof typeof d3sc | null;
-    scale_type?: `linear` | `log`;
-    sticky?: boolean;
-    visible?: boolean;
-    sortable?: boolean;
-    show_sort_indicator?: boolean;
-    disabled?: boolean;
-    style?: string;
-    cell_style?: string;
-};
-export type CellSnippetArgs = {
-    row: RowData;
-    col: Label;
-    val: CellVal;
-};
-export type CellSnippet = Snippet<[CellSnippetArgs]>;
-export type SpecialCells = Record<string, CellSnippet>;
-export type SortState = {
-    column: string;
-    ascending: boolean;
-};
-export type MultiSortState = SortState[];
-export type SortHint = string | {
-    text: string;
-    position?: `top` | `bottom`;
-    permanent?: boolean;
-    style?: string;
-    class?: string;
-};
-export type InitialSort = string | {
-    column: string;
-    direction?: `asc` | `desc`;
-};
-export type Pagination = boolean | {
-    page_size?: number;
-    page_sizes?: number[];
-};
-export type Search = boolean | {
-    placeholder?: string;
-    expanded?: boolean;
-};
-export type ExportData = boolean | {
-    formats?: (`csv` | `json`)[];
-    filename?: string;
-};
-export type OnSortCallback = (column: string, dir: `asc` | `desc`) => Promise<RowData[]>;
-export declare const strip_html: (str: string) => string;
-export declare function calc_cell_color(val: number | null | undefined, // cell value
-all_values: CellVal[], // all values in the column
-better: `higher` | `lower` | undefined, // sort direction
-color_scale?: keyof typeof d3sc | null, // color scale name
-scale_type?: `linear` | `log`): {
-    bg: string | null;
-    text: string | null;
-};

package/dist/table/index.js

@@ -1,38 +0,0 @@
-import { pick_contrast_color } from '../colors';
-import { max, min } from 'd3-array';
-import { scaleLog, scaleSequential } from 'd3-scale';
-import * as d3sc from 'd3-scale-chromatic';
-export { default as HeatmapTable } from './HeatmapTable.svelte';
-export { default as ToggleMenu } from './ToggleMenu.svelte';
-// Strip HTML tags from a string (for search, export, etc.)
-export const strip_html = (str) => str.replace(/<[^>]*>/g, ``);
-// Calculate table cell background color based on its value and column config
-export function calc_cell_color(val, // cell value
-all_values, // all values in the column
-better, // sort direction
-color_scale = `interpolateViridis`, // color scale name
-scale_type = `linear`) {
-    // Skip color calculation for null/undefined/NaN values or if color_scale is null
-    if (val == null || Number.isNaN(val) || color_scale === null) {
-        return { bg: null, text: null };
-    }
-    // Log scale cannot handle non-positive values, return null colors
-    if (scale_type === `log` && val <= 0) {
-        return { bg: null, text: null };
-    }
-    const numeric_vals = all_values.filter((v) => typeof v === `number` && !Number.isNaN(v) && (scale_type === `log` ? v > 0 : true));
-    if (numeric_vals.length === 0)
-        return { bg: null, text: null };
-    const range = [min(numeric_vals) ?? 0, max(numeric_vals) ?? 1];
-    // Reverse the range if lower values are better
-    if (better === `lower`)
-        range.reverse();
-    // Get interpolator function, fallback to viridis if not a valid function
-    const scale_fn = d3sc[color_scale];
-    const interpolator = (typeof scale_fn === `function` ? scale_fn : d3sc.interpolateViridis);
-    // Use log scale for positive values, otherwise linear/sequential scale
-    const bg = scale_type === `log` && range[0] > 0 && range[1] > 0
-        ? interpolator(scaleLog().domain(range).range([0, 1]).clamp(true)(val))
-        : scaleSequential().domain(range).interpolator(interpolator)(val);
-    return { bg, text: pick_contrast_color({ bg_color: bg }) };
-}

package/dist/theme/ThemeControl.svelte

@@ -1,53 +0,0 @@
-<script lang="ts">
-  import { theme_state } from '../state.svelte'
-  import type { HTMLAttributes } from 'svelte/elements'
-  import type { ThemeMode } from './index'
-  import { apply_theme_to_dom, save_theme_preference, THEME_OPTIONS } from './index'
-
-  let { theme_mode = $bindable(theme_state.mode), onchange = () => {}, ...rest }:
-    & Omit<HTMLAttributes<HTMLSelectElement>, `onchange`>
-    & {
-      theme_mode?: ThemeMode // Current theme mode (now bindable to global state)
-      onchange?: (mode: ThemeMode) => void // Callback when theme changes
-    } = $props()
-
-  $effect(() => { // Sync and save to local storage when theme changes
-    const prev = theme_state.mode
-    if (prev === theme_mode) return
-    theme_state.mode = theme_mode
-    save_theme_preference(theme_mode)
-    apply_theme_to_dom(theme_mode)
-    onchange(theme_mode)
-  })
-</script>
-
-<select bind:value={theme_mode} {...rest} class="theme-control {rest.class ?? ``}">
-  {#each THEME_OPTIONS as { label, icon, value } (value)}
-    <option {value}>{icon}&ensp;{label}</option>
-  {/each}
-</select>
-
-<style>
-  .theme-control {
-    position: fixed;
-    bottom: 1em;
-    left: 1em;
-    z-index: var(--theme-control-z-index, 2);
-    background: var(--btn-bg);
-    border: var(--pane-border);
-    color: var(--text-color);
-    border-radius: var(--theme-control-border-radius, var(--border-radius, 3pt));
-    padding: var(--theme-control-padding, 1pt 2pt);
-    backdrop-filter: blur(10px);
-    transition: all 0.2s ease;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  }
-  .theme-control:hover {
-    background: var(--btn-bg-hover);
-    border: var(--pane-border);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  }
-  .theme-control:focus {
-    outline: 0.5px solid var(--accent-color);
-  }
-</style>

package/dist/theme/ThemeControl.svelte.d.ts

@@ -1,9 +0,0 @@
-import type { HTMLAttributes } from 'svelte/elements';
-import type { ThemeMode } from './index';
-type $$ComponentProps = Omit<HTMLAttributes<HTMLSelectElement>, `onchange`> & {
-    theme_mode?: ThemeMode;
-    onchange?: (mode: ThemeMode) => void;
-};
-declare const ThemeControl: import("svelte").Component<$$ComponentProps, {}, "theme_mode">;
-type ThemeControl = ReturnType<typeof ThemeControl>;
-export default ThemeControl;

package/dist/theme/index.d.ts

@@ -1,29 +0,0 @@
-export declare const COLOR_THEMES: {
-    readonly light: "light";
-    readonly dark: "dark";
-    readonly white: "white";
-    readonly black: "black";
-};
-export declare const AUTO_THEME: "auto";
-export type ThemeType = `light` | `dark`;
-export declare const THEME_TYPE: Record<ThemeName, ThemeType>;
-export type ThemeName = keyof typeof COLOR_THEMES;
-export type ThemeMode = ThemeName | typeof AUTO_THEME;
-export interface ThemeOption {
-    value: ThemeMode;
-    label: string;
-    icon: string;
-}
-export declare const THEME_OPTIONS: ThemeOption[];
-export declare const is_valid_theme_mode: (value: string) => value is ThemeMode;
-export declare const is_valid_theme_name: (value: string) => value is ThemeName;
-export declare const resolve_theme_mode: (mode: ThemeMode, system_preference?: ThemeType) => ThemeName;
-export declare const get_theme_preference: () => ThemeMode;
-export declare const save_theme_preference: (mode: ThemeMode) => void;
-export declare const get_system_mode: () => ThemeType;
-export declare const apply_theme_to_dom: (mode: ThemeMode) => void;
-export declare const light_theme: () => any;
-export declare const dark_theme: () => any;
-export declare const white_theme: () => any;
-export declare const black_theme: () => any;
-export declare const get_theme_by_name: (name: ThemeName) => any;