matterviz 0.4.0 → 0.4.2

package/dist/heatmap-matrix/HeatmapMatrix.svelte.d.ts

@@ -1,9 +1,10 @@
 import type { D3InterpolateName } from '../colors';
+import type { Vec2 } from '../math';
 import type { AxisConfig } from '../plot';
 import { type ComponentProps, type Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import HeatmapMatrixControls from './HeatmapMatrixControls.svelte';
-import type { AxisItem, CellContext, DomainMode, HeatmapExportFormat, HeatmapTooltipProp, LegendPosition, NormalizeMode, SymmetricMode } from './index';
+import type { AxisItem, CellContext, DomainMode, HeatmapExportFormat, HeatmapTooltipProp, LegendPosition, MissingCellStyle, NormalizeMode, SymmetricMode } from './index';
 type CellValue = number | string | null;
 type SelectionMode = `single` | `multi` | `range`;
 type AxisOrderKey = `label` | `key` | `sort_value`;
@@ -19,7 +20,7 @@ type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, `onclick` | `ondblc
     color_scale?: D3InterpolateName | ((val: number) => string);
     color_scale_range?: [number | null, number | null];
     color_overrides?: Record<string, string>;
-    missing_color?: string;
+    missing?: MissingCellStyle;
     log?: boolean;
     value_transform?: (value: number, ctx: {
         x_item: AxisItem;
@@ -29,7 +30,7 @@ type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, `onclick` | `ondblc
     }) => number | null;
     normalize?: NormalizeMode;
     domain_mode?: DomainMode;
-    quantile_clip?: [number, number];
+    quantile_clip?: Vec2;
     show_legend?: boolean;
     legend_position?: LegendPosition;
     legend_label?: string;
@@ -51,8 +52,8 @@ type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, `onclick` | `ondblc
     oncontextmenu?: (cell: CellContext, event: MouseEvent) => void;
     enable_brush?: boolean;
     onbrush?: (payload: {
-        x_range: [number, number];
-        y_range: [number, number];
+        x_range: Vec2;
+        y_range: Vec2;
         cells: CellContext[];
     }) => void;
     tile_size?: string;

package/dist/heatmap-matrix/HeatmapMatrixControls.svelte

@@ -1,11 +1,16 @@
 <script lang="ts">
+  import type { PaneProps, PaneToggleProps } from '../overlays'
   import DraggablePane from '../overlays/DraggablePane.svelte'
   import type { ComponentProps, Snippet } from 'svelte'
-  import {
-    ELEMENT_ORDERINGS,
-    ORDERING_LABELS,
+  import { ELEMENT_ORDERINGS, ORDERING_LABELS } from './index'
+  import type {
+    ElementAxisOrderingKey,
+    DomainMode,
+    HeatmapExportFormat,
+    LegendPosition,
+    NormalizeMode,
+    SymmetricMode,
   } from './index'
-  import type { ElementAxisOrderingKey, DomainMode, HeatmapExportFormat, LegendPosition, NormalizeMode, SymmetricMode } from './index'
 
   let {
     ordering = $bindable(`atomic_number`),
@@ -46,15 +51,13 @@
     export_formats?: HeatmapExportFormat[]
     onexport?: (format: HeatmapExportFormat) => void
     show_pane?: boolean
-    pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`]
-    toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`]
+    pane_props?: PaneProps
+    toggle_props?: PaneToggleProps
     children?: Snippet<[{ controls_open: boolean }]>
   } = $props()
 
   function merge_styles(base_style: string, override_style: unknown): string {
-    const override_style_str = typeof override_style === `string`
-      ? override_style
-      : ``
+    const override_style_str = typeof override_style === `string` ? override_style : ``
     return override_style_str ? `${base_style}; ${override_style_str}` : base_style
   }
 

package/dist/heatmap-matrix/HeatmapMatrixControls.svelte.d.ts

@@ -1,5 +1,5 @@
-import DraggablePane from '../overlays/DraggablePane.svelte';
-import type { ComponentProps, Snippet } from 'svelte';
+import type { PaneProps, PaneToggleProps } from '../overlays';
+import type { Snippet } from 'svelte';
 import type { ElementAxisOrderingKey, DomainMode, HeatmapExportFormat, LegendPosition, NormalizeMode, SymmetricMode } from './index';
 type $$ComponentProps = {
     ordering?: ElementAxisOrderingKey;
@@ -19,12 +19,12 @@ type $$ComponentProps = {
     export_formats?: HeatmapExportFormat[];
     onexport?: (format: HeatmapExportFormat) => void;
     show_pane?: boolean;
-    pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`];
-    toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`];
+    pane_props?: PaneProps;
+    toggle_props?: PaneToggleProps;
     children?: Snippet<[{
         controls_open: boolean;
     }]>;
 };
-declare const HeatmapMatrixControls: import("svelte").Component<$$ComponentProps, {}, "normalize" | "theme" | "show_legend" | "controls_open" | "show_values" | "ordering" | "toggle_visible" | "domain_mode" | "legend_position" | "search_query" | "symmetric" | "show_row_summaries" | "show_col_summaries">;
+declare const HeatmapMatrixControls: import("svelte").Component<$$ComponentProps, {}, "normalize" | "theme" | "show_values" | "show_legend" | "controls_open" | "ordering" | "search_query" | "toggle_visible" | "domain_mode" | "legend_position" | "symmetric" | "show_row_summaries" | "show_col_summaries">;
 type HeatmapMatrixControls = ReturnType<typeof HeatmapMatrixControls>;
 export default HeatmapMatrixControls;

package/dist/heatmap-matrix/index.d.ts

@@ -1,4 +1,5 @@
 import type { ChemicalElement, ElementSymbol } from '../element';
+import type { Vec2 } from '../math';
 import type { Snippet } from 'svelte';
 export { COLOR_OVERRIDE_KEY_SEPARATOR, make_color_override_key } from './shared';
 export type AxisItem<T = Record<string, unknown>> = {
@@ -16,6 +17,11 @@ export type CellContext = {
     value: number | string | null;
     bg_color: string | null;
 };
+export interface MissingCellStyle {
+    color?: `element-category` | (string & {});
+    label?: string;
+    style?: string;
+}
 export declare const ORDERING_LABELS: {
     readonly atomic_number: "Atomic Number";
     readonly mendeleev_number: "Pettifor Chemical Similarity";
@@ -41,8 +47,8 @@ export type HeatmapSelection = {
 };
 export type HeatmapExportFormat = `csv` | `json`;
 export type HeatmapBrushPayload = {
-    x_range: [number, number];
-    y_range: [number, number];
+    x_range: Vec2;
+    y_range: Vec2;
     cells: CellContext[];
 };
 export declare const ELEMENT_ORDERINGS: ElementAxisOrderingKey[];

package/dist/icons.d.ts

@@ -540,6 +540,10 @@ export declare const ICON_DATA: {
         readonly viewBox: "0 0 24 24";
         readonly path: "<path fill=\"currentColor\" d=\"M20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2M4 4h5v16H4zm7 0h9v8h-9zm0 10h9v6h-9z\"/>";
     };
+    readonly Grid2x2: {
+        readonly viewBox: "0 0 24 24";
+        readonly path: "<path fill=\"currentColor\" d=\"M20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2M4 4h7v7H4zm0 9h7v7H4zm9-9h7v7h-7zm0 9h7v7h-7z\"/>";
+    };
     readonly FermiSurface: {
         readonly viewBox: "0 0 24 24";
         readonly stroke: "currentColor";

package/dist/icons.js

@@ -620,6 +620,10 @@ export const ICON_DATA = {
         viewBox: `0 0 24 24`,
         path: `<path fill="currentColor" d="M20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2M4 4h5v16H4zm7 0h9v8h-9zm0 10h9v6h-9z"/>`,
     },
+    Grid2x2: {
+        viewBox: `0 0 24 24`,
+        path: `<path fill="currentColor" d="M20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2M4 4h7v7H4zm0 9h7v7H4zm9-9h7v7h-7zm0 9h7v7h-7z"/>`,
+    },
     FermiSurface: {
         viewBox: `0 0 24 24`,
         stroke: `currentColor`,

package/dist/index.d.ts

@@ -27,6 +27,7 @@ export * from './phase-diagram';
 export * from './plot';
 export * from './rdf';
 export * from './sanitize';
+export * from './scene';
 export * from './settings';
 export * from './spectral';
 export * from './structure';

package/dist/index.js

@@ -27,6 +27,7 @@ export * from './phase-diagram';
 export * from './plot';
 export * from './rdf';
 export * from './sanitize';
+export * from './scene';
 export * from './settings';
 export * from './spectral';
 export * from './structure';

package/dist/io/ExportPane.svelte

@@ -0,0 +1,170 @@
+<script lang="ts">
+  import type { PaneProps, PaneToggleProps } from '../overlays'
+  import type { ExportItem, ExportSection } from './types'
+  import DraggablePane from '../overlays/DraggablePane.svelte'
+  import { sanitize_html } from '../sanitize'
+  import { type ComponentProps, onDestroy, type Snippet } from 'svelte'
+  import { tooltip } from 'svelte-multiselect/attachments'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  let {
+    export_pane_open = $bindable(false),
+    sections = [],
+    png_dpi = $bindable(150),
+    dpi_range = [50, 600],
+    icon_style = ``,
+    toggle_props = {},
+    pane_props = {},
+    children = undefined,
+    ...rest
+  }: HTMLAttributes<HTMLDivElement> & {
+    export_pane_open?: boolean
+    sections?: ExportSection[]
+    png_dpi?: number
+    dpi_range?: readonly [number, number]
+    icon_style?: string
+    toggle_props?: PaneToggleProps
+    pane_props?: PaneProps
+    // Pane-specific extras rendered below the sections (e.g. video export controls)
+    children?: Snippet
+  } = $props()
+
+  // Clamp DPI into dpi_range on input change (fires on blur, before any download click)
+  function clamp_dpi(): void {
+    const [min_dpi, max_dpi] = dpi_range
+    if (typeof png_dpi !== `number` || !Number.isFinite(png_dpi)) png_dpi = 150
+    else png_dpi = Math.round(Math.min(max_dpi, Math.max(min_dpi, png_dpi)))
+  }
+
+  // Copy-to-clipboard with temporary ✅ feedback; copy_text runs only on click
+  let copied_key = $state<string | null>(null)
+  let copied_timeout: ReturnType<typeof setTimeout> | undefined
+  async function handle_copy(item: ExportItem, key: string): Promise<void> {
+    if (item.disabled) return
+    const text = item.copy_text?.()
+    if (!text) return
+    try {
+      await navigator.clipboard.writeText(text)
+      copied_key = key
+      clearTimeout(copied_timeout)
+      copied_timeout = setTimeout(() => (copied_key = null), 1000)
+    } catch (error) {
+      console.error(`Failed to copy ${item.label} to clipboard`, error)
+    }
+  }
+  onDestroy(() => clearTimeout(copied_timeout))
+</script>
+
+<DraggablePane
+  bind:show={export_pane_open}
+  open_icon="Cross"
+  closed_icon="Export"
+  {icon_style}
+  pane_props={{
+    ...rest,
+    ...pane_props,
+    class: `export-pane ${rest.class ?? ``} ${pane_props?.class ?? ``}`.trim(),
+  }}
+  {toggle_props}
+>
+  {#each sections as section, sec_idx (section.title ?? sec_idx)}
+    {#if section.title}
+      <h4
+        {@attach section.tooltip
+          ? tooltip({ allow_html: true, content: sanitize_html(section.tooltip) })
+          : () => {}}
+      >
+        {section.title}
+      </h4>
+    {/if}
+    <div class="export-grid">
+      {#each section.items as item, item_idx (item.label)}
+        {@const copy_key = `${sec_idx}-${item_idx}`}
+        <!-- not a <label>: it would forward label-text clicks to the first (download) button -->
+        <span class="export-item">
+          {#if item.hint}
+            <span {@attach tooltip({ allow_html: true, content: sanitize_html(item.hint) })}
+              >{item.label}</span
+            >
+          {:else}
+            {item.label}
+          {/if}
+          {#if item.on_download}
+            <button
+              type="button"
+              onclick={item.on_download}
+              disabled={item.disabled ?? false}
+              aria-label={`Download ${item.label}`}
+              title={`Download ${item.label}${item.show_dpi ? ` (${png_dpi} DPI)` : ``}`}
+            >
+              ⬇
+            </button>
+          {/if}
+          {#if item.copy_text}
+            <button
+              type="button"
+              onclick={() => handle_copy(item, copy_key)}
+              disabled={item.disabled ?? false}
+              aria-label="Copy {item.label} to clipboard"
+              title="Copy {item.label} to clipboard"
+            >
+              {copied_key === copy_key ? `✅` : `📋`}
+            </button>
+          {/if}
+          {#if item.show_dpi}
+            <span class="dpi-input"
+              >(DPI: <input
+                type="number"
+                min={dpi_range[0]}
+                max={dpi_range[1]}
+                bind:value={png_dpi}
+                onchange={clamp_dpi}
+                title="Export resolution in dots per inch"
+              />)</span
+            >
+          {/if}
+        </span>
+      {/each}
+    </div>
+  {/each}
+  {@render children?.()}
+</DraggablePane>
+
+<style>
+  h4 {
+    display: flex;
+    align-items: center;
+    margin: 0;
+  }
+  .export-grid {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 4pt 10pt;
+    font-size: 0.95em;
+  }
+  .export-item {
+    display: flex;
+    align-items: center;
+    gap: 4pt;
+    white-space: nowrap;
+  }
+  .export-grid button {
+    min-width: 1.9em;
+    height: 1.6em;
+    padding: 0 4pt;
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .export-grid input[type='number'] {
+    width: 3.5em;
+  }
+  .dpi-input {
+    display: inline-flex;
+    align-items: center;
+    gap: 2pt;
+    white-space: nowrap;
+  }
+</style>

package/dist/io/ExportPane.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { PaneProps, PaneToggleProps } from '../overlays';
+import type { ExportSection } from './types';
+import { type Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    export_pane_open?: boolean;
+    sections?: ExportSection[];
+    png_dpi?: number;
+    dpi_range?: readonly [number, number];
+    icon_style?: string;
+    toggle_props?: PaneToggleProps;
+    pane_props?: PaneProps;
+    children?: Snippet;
+};
+declare const ExportPane: import("svelte").Component<$$ComponentProps, {}, "export_pane_open" | "png_dpi">;
+type ExportPane = ReturnType<typeof ExportPane>;
+export default ExportPane;

package/dist/io/decompress.d.ts

@@ -1,11 +1,12 @@
 import type { COMPRESSION_EXTENSIONS } from '../constants';
 import { COMPRESSION_FORMATS } from '../constants';
+export declare function strip_compression_extensions(filename: string): string;
 export type CompressionFormat = keyof typeof COMPRESSION_FORMATS;
 export type CompressionExtension = (typeof COMPRESSION_EXTENSIONS)[number];
 export declare function detect_compression_format(filename: string): CompressionFormat | null;
 export declare function decompress_data(data: ArrayBuffer | ReadableStream<Uint8Array> | null, format: CompressionFormat): Promise<string>;
 export declare function decompress_data_binary(data: ArrayBuffer | ReadableStream<Uint8Array> | null, format: CompressionFormat): Promise<ArrayBuffer>;
 export declare function decompress_file(file: File): Promise<{
-    content: string;
+    content: string | ArrayBuffer;
     filename: string;
 }>;

package/dist/io/decompress.js

@@ -1,5 +1,13 @@
 import { COMPRESSION_EXTENSIONS_REGEX, COMPRESSION_FORMATS } from '../constants';
-import { to_error } from '../utils';
+import { is_binary_payload } from './is-binary';
+// Lowercase a filename and strip all trailing compression extensions (.gz, .zip, ...)
+export function strip_compression_extensions(filename) {
+    let base_name = filename.toLowerCase();
+    while (COMPRESSION_EXTENSIONS_REGEX.test(base_name)) {
+        base_name = base_name.replace(COMPRESSION_EXTENSIONS_REGEX, ``);
+    }
+    return base_name;
+}
 export function detect_compression_format(filename) {
     const lower = filename.toLowerCase();
     for (const [format, extensions] of Object.entries(COMPRESSION_FORMATS)) {
@@ -16,7 +24,6 @@ export async function decompress_data(data, format) {
 // Decompress data and return as ArrayBuffer (for binary files like .brml.gz)
 export async function decompress_data_binary(data, format) {
     try {
-        // Handle unsupported formats
         if (format === `zip` || format === `xz` || format === `bz2`) {
             throw new Error(`${format.toUpperCase()} decompression is not supported in the browser. ` +
                 `Please extract the ${format.toUpperCase()} file first.`);
@@ -38,39 +45,18 @@ export async function decompress_data_binary(data, format) {
         throw new Error(`Failed to decompress ${format} file: ${error}`, { cause: error });
     }
 }
-export function decompress_file(file) {
+const to_content = (filename, buffer) => is_binary_payload(filename, buffer) ? buffer : new TextDecoder().decode(buffer);
+// Read a dropped file, decompressing supported formats. Binary payloads (by extension or
+// magic bytes) return as ArrayBuffer so parsers get raw bytes; text decodes to string.
+export async function decompress_file(file) {
     const format = detect_compression_format(file.name);
-    const is_supported = Boolean(format && ![`zip`, `xz`, `bz2`].includes(format));
-    return new Promise((resolve, reject) => {
-        const reader = new FileReader();
-        reader.addEventListener(`load`, () => {
-            try {
-                const result = reader.result;
-                // strict null check: empty files legitimately read as '' (falsy)
-                if (result === null)
-                    throw new Error(`Failed to read file`);
-                if (is_supported && format) {
-                    if (!(result instanceof ArrayBuffer))
-                        throw new Error(`Expected binary file data`);
-                    decompress_data(result, format).then((content) => {
-                        const filename = file.name.replace(COMPRESSION_EXTENSIONS_REGEX, ``);
-                        resolve({ content, filename });
-                    }, reject);
-                }
-                else {
-                    if (typeof result !== `string`)
-                        throw new Error(`Expected text file data`);
-                    resolve({ content: result, filename: file.name });
-                }
-            }
-            catch (error) {
-                reject(to_error(error));
-            }
-        }, { once: true });
-        reader.addEventListener(`error`, () => reject(new Error(`Failed to read file ${file.name}`)));
-        if (is_supported)
-            reader.readAsArrayBuffer(file);
-        else
-            reader.readAsText(file);
-    });
+    // zip/xz/bz2 are handled by their own code paths; null = not compressed
+    const decompressible = format !== null && format !== `zip` && format !== `xz` && format !== `bz2` ? format : null;
+    const buffer = await file.arrayBuffer();
+    if (decompressible) {
+        const filename = file.name.replace(COMPRESSION_EXTENSIONS_REGEX, ``);
+        const decompressed = await decompress_data_binary(buffer, decompressible);
+        return { content: to_content(filename, decompressed), filename };
+    }
+    return { content: to_content(file.name, buffer), filename: file.name };
 }

package/dist/io/export.d.ts

@@ -1,11 +1,19 @@
 import type { AnyStructure } from '../structure';
-import { type Camera, type Scene } from 'three';
+import { type Camera, type Scene, type WebGLRenderer } from 'three';
+export declare const renderer_registry: WeakMap<HTMLCanvasElement, WebGLRenderer>;
+export declare const scene_registry: WeakMap<HTMLCanvasElement, {
+    scene: Scene;
+    camera: Camera;
+}>;
+export declare const dpi_to_scale: (png_dpi: number) => number;
 export declare function canvas_to_png_blob(canvas: HTMLCanvasElement, png_dpi?: number, scene?: Scene | null, camera?: Camera | null): Promise<Blob>;
 export declare function export_canvas_as_png(canvas: HTMLCanvasElement | null, structure_or_filename: AnyStructure | string | undefined, png_dpi?: number, scene?: Scene | null, camera?: Camera | null): void;
 export declare function svg_to_svg_string(svg_element: SVGElement, inline_styles?: readonly string[]): string;
 export declare function export_svg_as_svg(svg_element: SVGElement | null, filename: string, inline_styles?: readonly string[]): void;
 export declare function svg_to_png_blob(svg_element: SVGElement, png_dpi?: number, inline_styles?: readonly string[]): Promise<Blob>;
 export declare function export_svg_as_png(svg_element: SVGElement | null, filename: string, png_dpi?: number, inline_styles?: readonly string[]): void;
+export declare function observe_canvas_presence(wrapper: HTMLElement | undefined, set: (has_canvas: boolean) => void): (() => void) | undefined;
+export declare const estimate_video_bitrate: (pixel_count: number, fps: number) => number;
 export declare function get_ffmpeg_conversion_command(input_filename: string): string;
 export declare function export_trajectory_video(canvas: HTMLCanvasElement | null, filename: string, options?: {
     fps?: number;

package/dist/io/export.js

@@ -2,29 +2,24 @@ import { download } from './fetch';
 import { create_structure_filename } from '../structure/export';
 import { to_error } from '../utils';
 import { Vector2 } from 'three';
-function is_webgl_renderer_like(value) {
-    if (typeof value !== `object` || !value)
-        return false;
-    const renderer_obj = value;
-    return (typeof renderer_obj.render === `function` &&
-        typeof renderer_obj.getPixelRatio === `function` &&
-        typeof renderer_obj.setPixelRatio === `function` &&
-        typeof renderer_obj.getSize === `function` &&
-        typeof renderer_obj.setSize === `function`);
-}
-function get_canvas_renderer(canvas) {
-    // oxlint-disable-next-line no-underscore-dangle -- three.js stores its renderer here
-    const renderer_val = canvas.__renderer;
-    return is_webgl_renderer_like(renderer_val) ? renderer_val : undefined;
-}
+// Maps a Threlte canvas to its WebGLRenderer so PNG export can look up the renderer for a
+// given canvas without mutating the DOM element. Populated by bind_renderer (scene/).
+export const renderer_registry = new WeakMap();
+// Companion scene+camera mapping: WebGL buffers are cleared after present
+// (preserveDrawingBuffer is off), so any capture of a live canvas must
+// re-render synchronously first — which needs the scene and active camera.
+export const scene_registry = new WeakMap();
+// PNG DPI -> render scale relative to the 72 DPI baseline, capped at 10x. DPI floors
+// at 1 (non-finite -> 72) so bad inputs can't yield 0x0 canvases or NaN pixel ratios.
+export const dpi_to_scale = (png_dpi) => Math.min(Math.max(1, Number.isFinite(png_dpi) ? png_dpi : 72) / 72, 10);
 // Capture a WebGL canvas as a PNG Blob at the given DPI.
 // Temporarily adjusts renderer pixel ratio for high-res capture, then restores.
 // Returns data directly (no browser download), suitable for programmatic capture
 // in test suites, server-side rendering, or Python widget integration via anywidget.
 // DPI is converted to a resolution multiplier relative to 72 DPI baseline, capped at 10x.
 export function canvas_to_png_blob(canvas, png_dpi = 150, scene = null, camera = null) {
-    const resolution_multiplier = Math.min(png_dpi / 72, 10);
-    const renderer = get_canvas_renderer(canvas);
+    const resolution_multiplier = dpi_to_scale(png_dpi);
+    const renderer = renderer_registry.get(canvas);
     if (resolution_multiplier <= 1.1 || !renderer) {
         if (renderer && scene && camera)
             renderer.render(scene, camera);
@@ -168,9 +163,10 @@ export function svg_to_png_blob(svg_element, png_dpi = 150, inline_styles = [])
     if (!Number.isFinite(png_dpi) || png_dpi <= 0) {
         return Promise.reject(new Error(`Invalid PNG DPI for export`));
     }
-    const resolution_multiplier = Math.min(png_dpi / 72, 10);
-    const pixel_width = Math.round(width * resolution_multiplier);
-    const pixel_height = Math.round(height * resolution_multiplier);
+    const resolution_multiplier = dpi_to_scale(png_dpi);
+    // Floor at 1px: small viewBoxes at low DPI round to 0 and make toBlob fail confusingly
+    const pixel_width = Math.max(1, Math.round(width * resolution_multiplier));
+    const pixel_height = Math.max(1, Math.round(height * resolution_multiplier));
     const canvas = document.createElement(`canvas`);
     const ctx = canvas.getContext(`2d`);
     if (!ctx)
@@ -217,6 +213,23 @@ export function export_svg_as_png(svg_element, filename, png_dpi = 150, inline_s
         .then((blob) => download(blob, filename, `image/png`))
         .catch((error) => console.error(`Error exporting PNG:`, error));
 }
+// Watch a wrapper element for <canvas> insertion/removal: calls set(bool) immediately
+// and on every DOM mutation. Returns a cleanup that disconnects the observer (or
+// undefined when no wrapper is given). Used by export panes to enable canvas exports.
+export function observe_canvas_presence(wrapper, set) {
+    if (!wrapper) {
+        set(false);
+        return undefined;
+    }
+    const check = () => set(Boolean(wrapper.querySelector(`canvas`)));
+    check();
+    const observer = new MutationObserver(check);
+    observer.observe(wrapper, { childList: true, subtree: true });
+    return () => observer.disconnect();
+}
+// Estimate VP9 video bitrate (bits/s) from pixel count and frame rate.
+// VP9 needs ~0.1 bits per pixel per frame for good quality; clamped to [1, 200] Mbps.
+export const estimate_video_bitrate = (pixel_count, fps) => Math.max(1_000_000, Math.min(pixel_count * fps * 0.1, 200_000_000));
 // Generate FFmpeg command for WebM to MP4 conversion
 export function get_ffmpeg_conversion_command(input_filename) {
     const output = input_filename.replace(/\.webm$/i, `.mp4`);
@@ -230,7 +243,7 @@ export async function export_trajectory_video(canvas, filename, options = {}) {
         typeof MediaRecorder === `undefined` ||
         !MediaRecorder.isTypeSupported(`video/webm;codecs=vp9`))
         throw new Error(`WebM video recording not supported in this browser`);
-    const renderer = get_canvas_renderer(canvas);
+    const renderer = renderer_registry.get(canvas);
     // Store original renderer settings if changing resolution
     let orig_pixel_ratio;
     let orig_size;
@@ -242,13 +255,8 @@ export async function export_trajectory_video(canvas, filename, options = {}) {
         renderer.setSize(orig_size.width, orig_size.height, false);
     }
     // Calculate bitrate based on actual video dimensions
-    // VP9 typically needs 0.08-0.12 bits per pixel per frame for good quality
-    // canvas dimensions include device pixel ratio and any resolution_multiplier
-    const pixels_per_frame = canvas.width * canvas.height;
-    const bits_per_pixel_per_frame = 0.1; // Good quality for VP9
-    // Clamp bitrate to reasonable bounds (1 Mbps min, 200 Mbps max)
-    const calculated_bitrate = pixels_per_frame * fps * bits_per_pixel_per_frame;
-    const bitrate = Math.max(1_000_000, Math.min(calculated_bitrate, 200_000_000));
+    // (canvas dimensions include device pixel ratio and any resolution_multiplier)
+    const bitrate = estimate_video_bitrate(canvas.width * canvas.height, fps);
     const stream = canvas.captureStream(0);
     const chunks = [];
     const recorder = new MediaRecorder(stream, {
@@ -299,7 +307,7 @@ export async function export_trajectory_video(canvas, filename, options = {}) {
             is_resolved = true;
             try {
                 const blob = new Blob(chunks, { type: `video/webm` });
-                const webm_filename = filename.replace(/\.(mp4|webm)$/i, `.webm`);
+                const webm_filename = filename.replace(/\.(?:mp4|webm)$/i, `.webm`);
                 download(blob, webm_filename, `video/webm`);
                 on_progress?.(100);
                 resolve();

package/dist/io/fetch.d.ts

@@ -1,5 +1,3 @@
 export declare const to_query: (params: Record<string, string | number | undefined>) => string;
-export declare function fetch_zipped<T>(url: string, { unzip }?: {
-    unzip?: boolean | undefined;
-}): Promise<T | null>;
-export declare function download(data: string | Blob, filename: string, type: string): void;
+export type DownloadData = string | Blob | ArrayBuffer | ArrayBufferView<ArrayBuffer>;
+export declare function download(data: DownloadData, filename: string, type: string): void;

package/dist/io/fetch.js

@@ -1,19 +1,8 @@
-import { decompress_data } from './decompress';
 // Convert params object to URL query string, omitting empty/undefined values.
 // Example: {foo: "bar", baz: 42, empty: ""} → "foo=bar&baz=42"
 export const to_query = (params) => new URLSearchParams(Object.entries(params)
     .filter(([, val]) => val !== `` && val !== undefined)
     .map(([key, val]) => [key, String(val)])).toString();
-export async function fetch_zipped(url, { unzip = true } = {}) {
-    const response = await fetch(url);
-    if (!response.ok) {
-        console.error(`${response.status} ${response.statusText} for ${response.url}`);
-        return null;
-    }
-    if (!unzip)
-        return (await response.blob());
-    return JSON.parse(await decompress_data(response.body, `gzip`));
-}
 // Original download implementation
 function default_download(data, filename, type) {
     const file = new Blob([data], { type });

package/dist/io/file-drop.d.ts

@@ -4,4 +4,11 @@ export interface FileDropOptions {
     on_error?: (msg: string) => void;
     set_loading?: (loading: boolean) => void;
 }
+export declare const drag_over_handlers: (opts: {
+    allow?: () => boolean;
+    set_dragover: (over: boolean) => void;
+}) => {
+    ondragover: (event: DragEvent) => void;
+    ondragleave: () => void;
+};
 export declare const create_file_drop_handler: (opts: FileDropOptions) => ((event: DragEvent) => Promise<void>);