matterviz 0.3.4 → 0.3.5

package/dist/icons.d.ts

@@ -60,7 +60,7 @@ export declare const ICON_DATA: {
         readonly path: "M13 3a9 9 0 0 0-9 9H1l4 4l4-4H6c0-3.87 3.13-7 7-7s7 3.13 7 7s-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42A8.95 8.95 0 0 0 13 21a9 9 0 0 0 0-18m-1 5v5l4.25 2.52l.77-1.28l-3.52-2.09V8z";
     };
     readonly Info: {
-        readonly viewBox: "0 0 24 24";
+        readonly viewBox: "1.5 1.5 21 21";
         readonly path: "M11 9h2V7h-2m1 13c-4.41 0-8-3.59-8-8s3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8m0-18A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2m-1 15h2v-6h-2z";
     };
     readonly Edit: {
@@ -244,12 +244,12 @@ export declare const ICON_DATA: {
         readonly path: "<g fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"20\" r=\"3\"/><circle cx=\"6\" cy=\"6\" r=\"3\"/><circle cx=\"18\" cy=\"6\" r=\"3\"/><path d=\"M18 9v2c0 .6-.4 1-1 1H7c-.6 0-1-.4-1-1V9\"/><path d=\"M12 12v5\"/></g>";
     };
     readonly Fullscreen: {
-        readonly viewBox: "0 0 24 24";
-        readonly path: "M5 5h5V3H3v7h2zm5 14H5v-5H3v7h7zm11-5h-2v5h-5v2h7zm-2-4h2V3h-7v2h5z";
+        readonly viewBox: "1.25 1.25 21.5 21.5";
+        readonly path: "M3 3h7v2.5H5.5V10H3zm0 11h2.5v4.5H10V21H3zm11 7v-2.5h4.5V14H21v7zm4.5-11V5.5H14V3h7v7z";
     };
     readonly ExitFullscreen: {
-        readonly viewBox: "0 0 24 24";
-        readonly path: "M10 4H8v4H4v2h6zM8 20h2v-6H4v2h4zm12-6h-6v6h2v-4h4zm0-6h-4V4h-2v6h6z";
+        readonly viewBox: "1.25 1.25 21.5 21.5";
+        readonly path: "M10 4H7.5v4.5H4V11h6zm-2.5 16H10v-6H4v2.5h3.5zM20 14h-6v6h2.5v-3.5H20zm0-5.5h-3.5V4H14v7h6z";
     };
     readonly Weight: {
         readonly viewBox: "0 0 24 24";
@@ -297,7 +297,7 @@ export declare const ICON_DATA: {
     };
     readonly Reset: {
         readonly viewBox: "0 0 15 15";
-        readonly path: "M4.854 2.146a.5.5 0 0 1 0 .708L3.707 4H9a4.5 4.5 0 1 1 0 9H5a.5.5 0 0 1 0-1h4a3.5 3.5 0 1 0 0-7H3.707l1.147 1.146a.5.5 0 1 1-.708.708l-2-2a.5.5 0 0 1 0-.708l2-2a.5.5 0 0 1 .708 0";
+        readonly path: "M4.94 2.06a.62.62 0 0 1 0 .88L4.13 3.75H9a4.75 4.75 0 1 1 0 9.5H5a.62.62 0 0 1 0-1.24h4a3.51 3.51 0 1 0 0-7.02H4.13l.81.81a.62.62 0 1 1-.88.88l-2-2a.62.62 0 0 1 0-.88l2-2a.62.62 0 0 1 .88 0";
     };
     readonly Undo: {
         readonly viewBox: "0 0 24 24";

package/dist/icons.js

@@ -61,7 +61,7 @@ export const ICON_DATA = {
         path: `M13 3a9 9 0 0 0-9 9H1l4 4l4-4H6c0-3.87 3.13-7 7-7s7 3.13 7 7s-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42A8.95 8.95 0 0 0 13 21a9 9 0 0 0 0-18m-1 5v5l4.25 2.52l.77-1.28l-3.52-2.09V8z`,
     },
     Info: {
-        viewBox: `0 0 24 24`,
+        viewBox: `1.5 1.5 21 21`,
         path: `M11 9h2V7h-2m1 13c-4.41 0-8-3.59-8-8s3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8m0-18A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2m-1 15h2v-6h-2z`,
     },
     Edit: {
@@ -283,12 +283,12 @@ export const ICON_DATA = {
     },
     Fullscreen: {
         // from BoxIcons by Atisa
-        viewBox: `0 0 24 24`,
-        path: `M5 5h5V3H3v7h2zm5 14H5v-5H3v7h7zm11-5h-2v5h-5v2h7zm-2-4h2V3h-7v2h5z`,
+        viewBox: `1.25 1.25 21.5 21.5`,
+        path: `M3 3h7v2.5H5.5V10H3zm0 11h2.5v4.5H10V21H3zm11 7v-2.5h4.5V14H21v7zm4.5-11V5.5H14V3h7v7z`,
     },
     ExitFullscreen: {
-        viewBox: `0 0 24 24`,
-        path: `M10 4H8v4H4v2h6zM8 20h2v-6H4v2h4zm12-6h-6v6h2v-4h4zm0-6h-4V4h-2v6h6z`,
+        viewBox: `1.25 1.25 21.5 21.5`,
+        path: `M10 4H7.5v4.5H4V11h6zm-2.5 16H10v-6H4v2.5h3.5zM20 14h-6v6h2.5v-3.5H20zm0-5.5h-3.5V4H14v7h6z`,
     },
     Weight: {
         viewBox: `0 0 24 24`,
@@ -336,7 +336,7 @@ export const ICON_DATA = {
     },
     Reset: {
         viewBox: `0 0 15 15`,
-        path: `M4.854 2.146a.5.5 0 0 1 0 .708L3.707 4H9a4.5 4.5 0 1 1 0 9H5a.5.5 0 0 1 0-1h4a3.5 3.5 0 1 0 0-7H3.707l1.147 1.146a.5.5 0 1 1-.708.708l-2-2a.5.5 0 0 1 0-.708l2-2a.5.5 0 0 1 .708 0`,
+        path: `M4.94 2.06a.62.62 0 0 1 0 .88L4.13 3.75H9a4.75 4.75 0 1 1 0 9.5H5a.62.62 0 0 1 0-1.24h4a3.51 3.51 0 1 0 0-7.02H4.13l.81.81a.62.62 0 1 1-.88.88l-2-2a.62.62 0 0 1 0-.88l2-2a.62.62 0 0 1 .88 0`,
     },
     Undo: {
         viewBox: `0 0 24 24`,

package/dist/io/decompress.js

@@ -42,25 +42,30 @@ export function decompress_file(file) {
     const is_supported = Boolean(format && ![`zip`, `xz`, `bz2`].includes(format));
     return new Promise((resolve, reject) => {
         const reader = new FileReader();
-        reader.onload = async (event) => {
+        reader.addEventListener(`load`, () => {
             try {
-                const result = event.target?.result;
+                const result = reader.result;
                 if (!result)
                     throw new Error(`Failed to read file`);
                 if (is_supported && format) {
-                    const content = await decompress_data(result, format);
-                    const filename = file.name.replace(COMPRESSION_EXTENSIONS_REGEX, ``);
-                    resolve({ content, filename });
+                    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(error);
             }
-        };
-        reader.onerror = () => reject(new Error(`Failed to read file ${file.name}`));
+        }, { once: true });
+        reader.addEventListener(`error`, () => reject(new Error(`Failed to read file ${file.name}`)));
         if (is_supported)
             reader.readAsArrayBuffer(file);
         else

package/dist/io/export.js

@@ -11,6 +11,10 @@ function is_webgl_renderer_like(value) {
         typeof renderer_obj.getSize === `function` &&
         typeof renderer_obj.setSize === `function`);
 }
+function get_canvas_renderer(canvas) {
+    const renderer_val = canvas[`__renderer`];
+    return is_webgl_renderer_like(renderer_val) ? renderer_val : undefined;
+}
 // 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
@@ -18,8 +22,7 @@ function is_webgl_renderer_like(value) {
 // 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_val = canvas.__renderer;
-    const renderer = is_webgl_renderer_like(renderer_val) ? renderer_val : undefined;
+    const renderer = get_canvas_renderer(canvas);
     if (resolution_multiplier <= 1.1 || !renderer) {
         if (renderer && scene && camera)
             renderer.render(scene, camera);
@@ -157,7 +160,7 @@ export function svg_to_png_blob(svg_element, png_dpi = 150) {
     const svg_data_url = URL.createObjectURL(svg_blob);
     return new Promise((resolve, reject) => {
         const img = new Image();
-        img.onload = () => {
+        img.addEventListener(`load`, () => {
             try {
                 ctx.clearRect(0, 0, pixel_width, pixel_height);
                 ctx.drawImage(img, 0, 0, pixel_width, pixel_height);
@@ -174,11 +177,11 @@ export function svg_to_png_blob(svg_element, png_dpi = 150) {
             finally {
                 URL.revokeObjectURL(svg_data_url);
             }
-        };
-        img.onerror = () => {
+        });
+        img.addEventListener(`error`, () => {
             URL.revokeObjectURL(svg_data_url);
             reject(new Error(`Failed to load SVG for PNG export`));
-        };
+        });
         img.src = svg_data_url;
     });
 }
@@ -205,8 +208,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_val = canvas.__renderer;
-    const renderer = is_webgl_renderer_like(renderer_val) ? renderer_val : undefined;
+    const renderer = get_canvas_renderer(canvas);
     // Store original renderer settings if changing resolution
     let orig_pixel_ratio;
     let orig_size;
@@ -231,10 +233,10 @@ export async function export_trajectory_video(canvas, filename, options = {}) {
         mimeType: `video/webm;codecs=vp9`,
         videoBitsPerSecond: bitrate,
     });
-    recorder.ondataavailable = (event) => {
+    recorder.addEventListener(`dataavailable`, (event) => {
         if (event.data.size > 0)
             chunks.push(event.data);
-    };
+    });
     const track = stream.getVideoTracks()[0];
     // Start recording
     recorder.start();
@@ -269,7 +271,7 @@ export async function export_trajectory_video(canvas, filename, options = {}) {
     // Finalize recording
     return new Promise((resolve, reject) => {
         let is_resolved = false;
-        recorder.onstop = () => {
+        recorder.addEventListener(`stop`, () => {
             if (is_resolved)
                 return;
             is_resolved = true;
@@ -283,14 +285,16 @@ export async function export_trajectory_video(canvas, filename, options = {}) {
             catch (error) {
                 reject(error);
             }
-        };
-        recorder.onerror = (event) => {
+        });
+        recorder.addEventListener(`error`, (event) => {
             if (is_resolved)
                 return;
             is_resolved = true;
-            // Extract error details from MediaRecorderErrorEvent or ErrorEvent
-            reject(new Error(`MediaRecorder error: ${event.error}`));
-        };
+            const error_msg = event instanceof ErrorEvent && event.error instanceof Error
+                ? event.error.message
+                : event.type;
+            reject(new Error(`MediaRecorder error: ${error_msg}`));
+        });
         // Stop recording with safety timeout
         try {
             recorder.stop();

package/dist/io/is-binary.js

@@ -1,5 +1,20 @@
 // Simplified binary detection
-export const is_binary = (content) => content.includes(`\0`) ||
-    (content.match(/[\u0000-\u0008\u000E-\u001F\u007F-\u00FF]/g) || []).length / content.length >
-        0.1 ||
-    (content.match(/[\u0020-\u007E]/g) || []).length / content.length < 0.7;
+export const is_binary = (content) => {
+    if (!content)
+        return false;
+    if (content.includes(`\0`))
+        return true;
+    let binary_char_count = 0;
+    let printable_ascii_count = 0;
+    for (let char_idx = 0; char_idx < content.length; char_idx += 1) {
+        const char_code = content.charCodeAt(char_idx);
+        if (char_code <= 8 ||
+            (char_code >= 14 && char_code <= 31) ||
+            (char_code >= 127 && char_code <= 255)) {
+            binary_char_count += 1;
+        }
+        if (char_code >= 32 && char_code <= 126)
+            printable_ascii_count += 1;
+    }
+    return (binary_char_count / content.length > 0.1 || printable_ascii_count / content.length < 0.7);
+};

package/dist/isosurface/parse.js

@@ -87,16 +87,16 @@ function read_lines(text, pos, count) {
     return { lines: result, next: pos };
 }
 function build_grid({ data, nx, ny, nz, divisor = 1, data_order = `z_fastest`, }) {
-    const grid = new Array(nx);
+    const grid = Array(nx);
     let [min_val, max_val, sum] = [Infinity, -Infinity, 0];
     const total = nx * ny * nz;
     const data_len = Math.min(data.length, total);
     if (data_len === 0) {
         // Empty data: return zeroed grid with neutral data_range
         for (let ix = 0; ix < nx; ix++) {
-            const plane = new Array(ny);
+            const plane = Array(ny);
             for (let iy = 0; iy < ny; iy++)
-                plane[iy] = new Array(nz).fill(0);
+                plane[iy] = Array(nz).fill(0);
             grid[ix] = plane;
         }
         return { grid, data_range: { min: 0, max: 0, abs_max: 0, mean: 0 } };
@@ -105,9 +105,9 @@ function build_grid({ data, nx, ny, nz, divisor = 1, data_order = `z_fastest`, }
         // .cube convention: z varies fastest, then y, then x.
         const ny_nz = ny * nz;
         for (let ix = 0; ix < nx; ix++) {
-            const plane = new Array(ny);
+            const plane = Array(ny);
             for (let iy = 0; iy < ny; iy++) {
-                const row = new Array(nz).fill(0);
+                const row = Array(nz).fill(0);
                 const base = ix * ny_nz + iy * nz;
                 const row_end = Math.min(base + nz, data_len);
                 for (let flat_idx = base; flat_idx < row_end; flat_idx++) {
@@ -127,9 +127,9 @@ function build_grid({ data, nx, ny, nz, divisor = 1, data_order = `z_fastest`, }
     else {
         // VASP CHGCAR/ELFCAR/LOCPOT convention: x varies fastest, then y, then z.
         for (let ix = 0; ix < nx; ix++) {
-            const plane = new Array(ny);
+            const plane = Array(ny);
             for (let iy = 0; iy < ny; iy++)
-                plane[iy] = new Array(nz).fill(0);
+                plane[iy] = Array(nz).fill(0);
             grid[ix] = plane;
         }
         let [flat_idx, data_exhausted] = [0, false];
@@ -504,7 +504,7 @@ export function parse_cube(content, options = {}) {
 function atomic_number_to_symbol(atomic_number) {
     // ELEM_SYMBOLS is 0-indexed (H at index 0), atomic numbers are 1-indexed
     const idx = atomic_number - 1;
-    return (idx >= 0 && idx < ELEM_SYMBOLS.length ? ELEM_SYMBOLS[idx] : `H`);
+    return idx >= 0 && idx < ELEM_SYMBOLS.length ? ELEM_SYMBOLS[idx] : `H`;
 }
 // Auto-detect and parse volumetric file format based on filename and content
 export function parse_volumetric_file(content, filename) {

package/dist/isosurface/types.js

@@ -50,12 +50,12 @@ export function pad_periodic_grid(grid, dims, pad_fraction) {
     const out_ny = ny + 2 * py;
     const out_nz = nz + 2 * pz;
     const wrap = (val, size) => ((val % size) + size) % size;
-    const out = new Array(out_nx);
+    const out = Array(out_nx);
     for (let ix = 0; ix < out_nx; ix++) {
-        const plane = new Array(out_ny);
+        const plane = Array(out_ny);
         const src_x = wrap(ix - px, nx);
         for (let iy = 0; iy < out_ny; iy++) {
-            const row = new Array(out_nz);
+            const row = Array(out_nz);
             const src_y = wrap(iy - py, ny);
             for (let iz = 0; iz < out_nz; iz++) {
                 row[iz] = grid[src_x][src_y][wrap(iz - pz, nz)];
@@ -110,12 +110,12 @@ export function downsample_grid(grid, dims, max_points = MAX_GRID_POINTS) {
     const x_ranges = partition(new_nx, nx);
     const y_ranges = partition(new_ny, ny);
     const z_ranges = partition(new_nz, nz);
-    const out = new Array(new_nx);
+    const out = Array(new_nx);
     for (let ix = 0; ix < new_nx; ix++) {
-        const plane = new Array(new_ny);
+        const plane = Array(new_ny);
         const [sx_start, sx_end] = x_ranges[ix];
         for (let iy = 0; iy < new_ny; iy++) {
-            const row = new Array(new_nz);
+            const row = Array(new_nz);
             const [sy_start, sy_end] = y_ranges[iy];
             for (let iz = 0; iz < new_nz; iz++) {
                 let sum = 0;
@@ -203,12 +203,12 @@ export function tile_volumetric_data(volume, scaling) {
     const new_nx = nx * sx;
     const new_ny = ny * sy;
     const new_nz = nz * sz;
-    const new_grid = new Array(new_nx);
+    const new_grid = Array(new_nx);
     for (let ix = 0; ix < new_nx; ix++) {
-        const plane = new Array(new_ny);
+        const plane = Array(new_ny);
         const src_x = ix % nx;
         for (let iy = 0; iy < new_ny; iy++) {
-            const row = new Array(new_nz);
+            const row = Array(new_nz);
             const src_y = iy % ny;
             const src_row = src_grid[src_x][src_y];
             for (let iz = 0; iz < new_nz; iz++) {

package/dist/layout/InfoTag.svelte

@@ -2,7 +2,7 @@
   import Icon from '../Icon.svelte'
   import { sanitize_html } from '../sanitize'
   import type { Snippet } from 'svelte'
-  import { tooltip } from 'svelte-multiselect'
+  import { tooltip } from 'svelte-multiselect/attachments'
   import type { HTMLAttributes } from 'svelte/elements'
   import type { InfoTagSize, InfoTagVariant } from './index'
 

package/dist/layout/json-tree/JsonNode.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import Icon from '../../Icon.svelte'
   import { getContext, onMount } from 'svelte'
+  // oxlint-disable-next-line import/no-self-import -- recursive Svelte component
   import JsonNode from './JsonNode.svelte'
   import JsonValue from './JsonValue.svelte'
   import type { JsonTreeContext } from './types'

package/dist/layout/json-tree/utils.js

@@ -273,7 +273,8 @@ export function find_matching_paths(value, query, current_path = ``, current_key
     for_each_child(value, type, (child_value, key, map_key) => {
         const child_path = build_path(current_path, key);
         // Also check if Map key matches
-        if (map_key !== undefined && String(map_key).toLowerCase().includes(lower_query)) {
+        if (map_key !== undefined &&
+            serialize_for_copy(map_key).toLowerCase().includes(lower_query)) {
             matches.add(child_path);
         }
         for (const match of find_matching_paths(child_value, query, child_path, key, seen)) {

package/dist/marching-cubes.js

@@ -432,7 +432,7 @@ export function marching_cubes(grid, iso_value, k_lattice, options = {}) {
     const max_y = periodic ? ny : ny - 1;
     const max_z = periodic ? nz : nz - 1;
     // Preallocate cube_values array (reuse across iterations)
-    const cube_values = new Array(8);
+    const cube_values = Array(8);
     for (let ix = 0; ix < max_x; ix++) {
         const ix_row = grid[ix];
         const ix1_row = grid[(ix + 1) % nx];

package/dist/math.js

@@ -222,7 +222,7 @@ export function dot(vec1, vec2) {
         if (mat1_cols !== mat2.length) {
             throw new Error(`First matrix columns must equal second matrix rows`);
         }
-        return mat1.map((_, ii) => Array.from({ length: mat2_cols }, (_, jj) => mat1[ii].reduce((sum, _val, kk) => sum + mat1[ii][kk] * mat2[kk][jj], 0)));
+        return mat1.map((_row, ii) => Array.from({ length: mat2_cols }, (_col, jj) => mat1[ii].reduce((sum, _val, kk) => sum + mat1[ii][kk] * mat2[kk][jj], 0)));
     }
     throw new Error(`Unsupported input types for dot product`);
 }

package/dist/overlays/CopyButton.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import Icon from '../Icon.svelte'
+  import type { HTMLButtonAttributes } from 'svelte/elements'
+
+  let { copied = false, label, title = label, onclick, ...rest }: Omit<
+    HTMLButtonAttributes,
+    `type` | `aria-label`
+  > & { copied?: boolean; label: string } = $props()
+</script>
+
+<button
+  {...rest}
+  type="button"
+  class="copy-button {rest.class ?? ``}"
+  aria-label={label}
+  {title}
+  {onclick}
+>
+  <Icon icon={copied ? `Check` : `Copy`} />
+</button>
+
+<style>
+  .copy-button {
+    display: inline-grid;
+    place-items: center;
+    flex: 0 0 auto;
+    width: 1.6em;
+    height: 1.6em;
+    border: 0;
+    border-radius: var(--border-radius, 3pt);
+    background: color-mix(in srgb, currentColor 8%, transparent);
+    color: inherit;
+    cursor: pointer;
+    opacity: 0.75;
+    padding: 0;
+    &:is(:hover, :focus-visible) {
+      opacity: 1;
+      background: color-mix(in srgb, currentColor 14%, transparent);
+    }
+    :global(svg) {
+      width: 0.9em;
+      height: 0.9em;
+    }
+  }
+</style>

package/dist/overlays/CopyButton.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLButtonAttributes } from 'svelte/elements';
+type $$ComponentProps = Omit<HTMLButtonAttributes, `type` | `aria-label`> & {
+    copied?: boolean;
+    label: string;
+};
+declare const CopyButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type CopyButton = ReturnType<typeof CopyButton>;
+export default CopyButton;

package/dist/overlays/InfoPaneCards.svelte

@@ -0,0 +1,149 @@
+<script lang="ts">
+  import { sanitize_html } from '../sanitize'
+  import type { HTMLAttributes } from 'svelte/elements'
+  import { SvelteSet } from 'svelte/reactivity'
+  import CopyButton from './CopyButton.svelte'
+
+  type InfoPaneRow = {
+    label: string
+    value: string | number
+    key?: string
+    tooltip?: string
+  }
+  type InfoPaneCard = {
+    title: string
+    rows: InfoPaneRow[]
+  }
+
+  let {
+    cards,
+    filter_placeholder,
+    empty_label,
+    show_filter = true,
+    heading_level = 4,
+    row_label_min = `5em`,
+    ...rest
+  }: HTMLAttributes<HTMLDivElement> & {
+    cards: InfoPaneCard[]
+    filter_placeholder: string
+    empty_label: string
+    show_filter?: boolean
+    heading_level?: 4 | 5
+    row_label_min?: string
+  } = $props()
+
+  let info_filter = $state(``)
+  const copied_items = new SvelteSet<string>()
+  const row_key = (card_title: string, row: InfoPaneRow, row_idx: number): string =>
+    row.key ?? `${card_title}:${row.label}:${row.value}:${row_idx}`
+
+  let filtered_cards = $derived.by(() => {
+    const filter = info_filter.trim().toLowerCase()
+    if (!filter) return cards
+    return cards
+      .map((card) => ({
+        ...card,
+        rows: card.rows.filter(({ label, value }) =>
+          `${card.title} ${label} ${value}`.toLowerCase().includes(filter)
+        ),
+      }))
+      .filter(({ rows }) => rows.length > 0)
+  })
+
+  async function copy_row(
+    card_title: string,
+    row: InfoPaneRow,
+    row_idx: number,
+  ): Promise<void> {
+    const key = row_key(card_title, row, row_idx)
+    try {
+      await navigator.clipboard.writeText(`${row.label}: ${row.value}`)
+      copied_items.add(key)
+      setTimeout(() => copied_items.delete(key), 1000)
+    } catch (error) {
+      console.error(`Failed to copy to clipboard:`, error)
+    }
+  }
+</script>
+{#if show_filter}
+  <input
+    class="info-filter"
+    type="search"
+    bind:value={info_filter}
+    placeholder={filter_placeholder}
+    aria-label={filter_placeholder}
+  />
+{/if}
+
+{#if filtered_cards.length === 0}
+  <p class="empty-filter">No {empty_label} matches "{info_filter}".</p>
+{:else}
+  <div {...rest} class="info-cards {rest.class ?? ``}" style:--row-label-min={row_label_min}>
+    {#each filtered_cards as card (card.title)}
+      <section class="info-card">
+        <svelte:element this={`h${heading_level}`}>{card.title}</svelte:element>
+        {#each card.rows as row, row_idx (row_key(card.title, row, row_idx))}
+          <div class="info-row" data-testid={row.key}>
+            <span>{@html sanitize_html(row.label)}</span>
+            <span title={row.tooltip}>{@html sanitize_html(row.value)}</span>
+            <CopyButton
+              label="Copy {row.label}: {row.value}"
+              title="Copy {row.label}"
+              copied={copied_items.has(row_key(card.title, row, row_idx))}
+              onclick={() => copy_row(card.title, row, row_idx)}
+            />
+          </div>
+        {/each}
+      </section>
+    {/each}
+  </div>
+{/if}
+
+<style>
+  .info-filter {
+    box-sizing: border-box;
+    width: 100%;
+    margin-bottom: 5pt;
+    padding: 4pt 6pt;
+    border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
+    border-radius: var(--border-radius, 3pt);
+    background: color-mix(in srgb, var(--pane-bg, Canvas) 88%, currentColor);
+    color: inherit;
+  }
+  .empty-filter {
+    margin: 0.25em 0;
+    opacity: 0.75;
+  }
+  .info-cards {
+    display: grid;
+    gap: 5pt;
+  }
+  .info-card {
+    padding: var(--info-card-padding, 5pt);
+    border-left: 3px solid var(--accent-color, currentColor);
+    border-radius: var(--border-radius, 3pt);
+    background: var(--info-card-bg, color-mix(in srgb, currentColor 4%, transparent));
+    :is(h4, h5) {
+      margin: 0 0 var(--info-card-heading-gap, 3pt);
+    }
+  }
+  .info-row {
+    display: grid;
+    grid-template-columns: minmax(var(--row-label-min), var(--row-label-max, 0.8fr)) minmax(
+        0,
+        1fr
+      ) auto;
+    align-items: center;
+    gap: 5pt;
+    padding: var(--info-row-padding, 1pt 0);
+    line-height: 1.5;
+    span:first-child {
+      color: var(--info-row-label-color);
+    }
+    span:nth-child(2) {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+</style>

package/dist/overlays/InfoPaneCards.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type InfoPaneRow = {
+    label: string;
+    value: string | number;
+    key?: string;
+    tooltip?: string;
+};
+type InfoPaneCard = {
+    title: string;
+    rows: InfoPaneRow[];
+};
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    cards: InfoPaneCard[];
+    filter_placeholder: string;
+    empty_label: string;
+    show_filter?: boolean;
+    heading_level?: 4 | 5;
+    row_label_min?: string;
+};
+declare const InfoPaneCards: import("svelte").Component<$$ComponentProps, {}, "">;
+type InfoPaneCards = ReturnType<typeof InfoPaneCards>;
+export default InfoPaneCards;