matterviz 0.4.0 → 0.4.2

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

@@ -31,9 +31,7 @@
 
   // Extract max_string_length threshold for reuse
   let max_len = $derived(ctx?.settings.max_string_length ?? 200)
-  let is_long_string = $derived(
-    value_type === `string` && (value as string).length > max_len,
-  )
+  let is_long_string = $derived(value_type === `string` && (value as string).length > max_len)
 
   // Check for changes on mount and when value changes
   $effect(() => {
@@ -89,9 +87,7 @@
     if (value_type === `circular`) return `[Circular]`
     if (value_type === `string`) {
       const str = value as string
-      return is_long_string && !is_expanded
-        ? `"${str.slice(0, max_len)}..."`
-        : `"${str}"`
+      return is_long_string && !is_expanded ? `"${str.slice(0, max_len)}..."` : `"${str}"`
     }
     return format_preview(value)
   })
@@ -200,17 +196,11 @@
         ...
       </button>
     {:else if is_long_string && is_expanded}
-      <button
-        type="button"
-        class="expand-btn"
-        onclick={toggle_expand}
-        title="Collapse string"
-      >
+      <button type="button" class="expand-btn" onclick={toggle_expand} title="Collapse string">
         ▲
       </button>
     {/if}
-    {#if ctx?.settings.show_data_types && value_type !== `null` &&
-      value_type !== `undefined`}
+    {#if ctx?.settings.show_data_types && value_type !== `null` && value_type !== `undefined`}
       <span class="type-annotation">{value_type}</span>
     {/if}
   </span>
@@ -235,7 +225,9 @@
   .json-value {
     cursor: pointer;
     border-radius: 2px;
-    transition: background-color 0.15s, color 0.15s;
+    transition:
+      background-color 0.15s,
+      color 0.15s;
     &:hover {
       background: var(
         --jt-hover-bg,

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

@@ -299,8 +299,16 @@ export function parse_path(path) {
     const segments = [];
     let current = ``;
     let in_bracket = false;
-    for (let idx = 0; idx < path.length; idx++) {
-        const char = path[idx];
+    // Bracket tokens are numeric indices or quoted keys (quotes stripped, \" unescaped)
+    const push_bracket_token = (token) => {
+        const num = Number(token);
+        if (Number.isNaN(num)) {
+            segments.push(token.replaceAll(/^"|"$/g, ``).replaceAll(String.raw `\"`, `"`));
+        }
+        else
+            segments.push(num);
+    };
+    for (const char of path) {
         if (char === `.` && !in_bracket) {
             if (current)
                 segments.push(current);
@@ -313,17 +321,8 @@ export function parse_path(path) {
             in_bracket = true;
         }
         else if (char === `]`) {
-            if (current) {
-                // Check if it's a number index
-                const num = Number(current);
-                if (Number.isNaN(num)) {
-                    // Remove surrounding quotes and unescape internal quotes
-                    const unquoted = current.replaceAll(/^"|"$/g, ``).replaceAll('\\"', `"`);
-                    segments.push(unquoted);
-                }
-                else
-                    segments.push(num);
-            }
+            if (current)
+                push_bracket_token(current);
             current = ``;
             in_bracket = false;
         }
@@ -332,16 +331,8 @@ export function parse_path(path) {
     }
     // Handle trailing content (e.g., unclosed bracket like "a[0")
     if (current) {
-        if (in_bracket) {
-            // Apply same numeric/quoted-string logic as inside brackets
-            const num = Number(current);
-            if (Number.isNaN(num)) {
-                const unquoted = current.replaceAll(/^"|"$/g, ``).replaceAll('\\"', `"`);
-                segments.push(unquoted);
-            }
-            else
-                segments.push(num);
-        }
+        if (in_bracket)
+            push_bracket_token(current);
         else
             segments.push(current);
     }

package/dist/math.d.ts

@@ -2,6 +2,7 @@ import type { LatticeParams, Pbc } from './structure/index';
 export type Vec2 = [number, number];
 export type Vec3 = [number, number, number];
 export type Vec4 = [number, number, number, number];
+export type Vec5 = [number, number, number, number, number];
 export type Vec9 = [number, number, number, number, number, number, number, number, number];
 export type Point2D = {
     x: number;
@@ -51,12 +52,14 @@ export declare function matrix_inverse_3x3(matrix: Matrix3x3): Matrix3x3;
 export declare function mat3x3_vec3_multiply(matrix: Matrix3x3, vector: Vec3): Vec3;
 export declare function add<T extends NdVector>(...vecs: T[]): T;
 export declare function subtract<T extends NdVector>(vec1: T, vec2: T): T;
+export declare function dot(vec1: Matrix3x3, vec2: Matrix3x3): Matrix3x3;
+export declare function dot(vec1: Matrix3x3, vec2: Vec3): Vec3;
 export declare function dot(vec1: NdVector, vec2: NdVector): number;
 export declare function dot(vec1: NdVector[], vec2: NdVector): number[];
 export declare function dot(vec1: NdVector[], vec2: NdVector[]): number[][];
 export declare function to_voigt(tensor: number[][]): number[];
-export declare function from_voigt(voigt: number[]): number[][];
-export declare function vec9_to_mat3x3(flat_array: number[]): number[][];
+export declare function from_voigt(voigt: number[]): Matrix3x3;
+export declare function vec9_to_mat3x3(flat_array: number[]): Matrix3x3;
 export declare function tensor_to_flat_array(tensor: number[][]): number[];
 export declare const transpose_3x3_matrix: (matrix: Matrix3x3) => Matrix3x3;
 export declare function scale_lattice_matrix(orig_matrix: Matrix3x3, scaling_factors: Vec3): Matrix3x3;
@@ -74,6 +77,8 @@ export declare function get_coefficient_of_variation(values: number[]): number;
 export declare function det_4x4(matrix: Matrix4x4): number;
 export declare function det_nxn(matrix: number[][]): number;
 export declare const cross_3d: (vec1: Vec3, vec2: Vec3) => Vec3;
+export declare function cell_heights(matrix: Matrix3x3): Vec3;
+export declare const frac_cutoff_per_axis: (matrix: Matrix3x3, dist: number) => Vec3;
 export declare const lerp: (start: number, end: number, t: number) => number;
 export declare const lerp_vec3: (start: Vec3, end: Vec3, t: number) => Vec3;
 export declare const centered_frac: (val: number) => number;
@@ -89,7 +94,7 @@ export declare function compute_bounding_box(vertices: Vec3[]): {
     min: Vec3;
     max: Vec3;
 };
-export declare function is_square_matrix(matrix: unknown, dim: number): boolean;
+export declare function is_square_matrix(matrix: unknown, dim: number): matrix is number[][];
 export declare function point_in_polygon(point_x: number, point_y: number, vertices: Vec2[]): boolean;
 export declare function compute_bounding_box_2d(vertices: Vec2[]): {
     min: Vec2;
@@ -101,5 +106,6 @@ export declare function polygon_centroid(vertices: Vec2[]): Vec2;
 export declare function solve_linear_system(A: number[][], // NxN coefficient matrix
 b: number[]): number[] | null;
 export declare const cross_2d: (origin: Vec2, point_a: Vec2, point_b: Vec2) => number;
+export declare const monotone_chain: (sorted: Vec2[]) => Vec2[];
 export declare function convex_hull_2d(points: Vec2[]): Vec2[];
 export {};

package/dist/math.js

@@ -426,6 +426,25 @@ export const cross_3d = (vec1, vec2) => [
     vec1[2] * vec2[0] - vec1[0] * vec2[2],
     vec1[0] * vec2[1] - vec1[1] * vec2[0],
 ];
+// Perpendicular distance between opposite cell faces per axis: volume / opposite-
+// face area. This (not the lattice vector length) is the correct denominator for
+// per-axis fractional reach in oblique cells. Degenerate (zero-volume) cells →
+// Infinity so callers' `dist / height` collapses to 0.
+export function cell_heights(matrix) {
+    const [a_vec, b_vec, c_vec] = matrix;
+    const cross_bc = cross_3d(b_vec, c_vec);
+    const volume = Math.abs(dot(a_vec, cross_bc));
+    if (volume === 0)
+        return [Infinity, Infinity, Infinity];
+    // height along axis k = volume / area of the face spanned by the OTHER two vectors
+    const height_a = volume / Math.hypot(...cross_bc); // face b×c ⟂ a
+    const height_b = volume / Math.hypot(...cross_3d(a_vec, c_vec)); // face a×c ⟂ b
+    const height_c = volume / Math.hypot(...cross_3d(a_vec, b_vec)); // face a×b ⟂ c
+    return [height_a, height_b, height_c];
+}
+// `dist` Å of real-space reach as a fractional pad per axis (via cell heights,
+// correct for oblique cells). Degenerate cells → 0 (no images).
+export const frac_cutoff_per_axis = (matrix, dist) => cell_heights(matrix).map((height) => dist / height);
 // Scalar linear interpolation
 export const lerp = (start, end, t) => start + t * (end - start);
 // Vec3 linear interpolation
@@ -737,13 +756,14 @@ export function compute_bounding_box(vertices) {
     }
     return { min, max };
 }
-// Check if a matrix is square with dimension NxN
+// Check if a matrix is a finite-numeric square matrix of dimension NxN (type predicate
+// so callers get number[][] narrowing without assertions). Rejects NaN/Infinity entries.
 export function is_square_matrix(matrix, dim) {
     if (!Array.isArray(matrix))
         return false;
     if (matrix.length !== dim)
         return false;
-    return matrix.every((row) => Array.isArray(row) && row.length === dim);
+    return matrix.every((row) => Array.isArray(row) && row.length === dim && row.every((val) => Number.isFinite(val)));
 }
 // --- 2D Geometry Utilities ---
 // Point-in-polygon test using ray casting algorithm
@@ -888,31 +908,27 @@ b) {
 }
 export const cross_2d = (origin, point_a, point_b) => (point_a[0] - origin[0]) * (point_b[1] - origin[1]) -
     (point_a[1] - origin[1]) * (point_b[0] - origin[0]);
+// One half of Andrew's monotone chain built from x-then-y *pre-sorted* points
+// (lower chain; pass reversed input for the upper chain).
+export const monotone_chain = (sorted) => {
+    const chain = [];
+    for (const pt of sorted) {
+        while (chain.length >= 2 &&
+            cross_2d(chain[chain.length - 2], chain[chain.length - 1], pt) <= 0) {
+            chain.pop();
+        }
+        chain.push(pt);
+    }
+    return chain;
+};
 // Full 2D convex hull via Andrew's monotone chain algorithm.
 // Returns vertices in counter-clockwise order.
 export function convex_hull_2d(points) {
     if (points.length < 3)
         return [...points];
     const sorted = points.toSorted((a, b) => a[0] - b[0] || a[1] - b[1]);
-    // Lower hull
-    const lower = [];
-    for (const pt of sorted) {
-        while (lower.length >= 2 &&
-            cross_2d(lower[lower.length - 2], lower[lower.length - 1], pt) <= 0) {
-            lower.pop();
-        }
-        lower.push(pt);
-    }
-    // Upper hull
-    const upper = [];
-    for (let idx = sorted.length - 1; idx >= 0; idx--) {
-        const pt = sorted[idx];
-        while (upper.length >= 2 &&
-            cross_2d(upper[upper.length - 2], upper[upper.length - 1], pt) <= 0) {
-            upper.pop();
-        }
-        upper.push(pt);
-    }
+    const lower = monotone_chain(sorted);
+    const upper = monotone_chain(sorted.toReversed());
     // Remove last point of each half (it's the first point of the other)
     lower.pop();
     upper.pop();

package/dist/overlays/ContextMenu.svelte

@@ -78,7 +78,7 @@
 {#if visible}
   {@const { x, y } = get_smart_position()}
   {@const style = `position: absolute; left: ${x}px; top: ${y}px; ${rest.style ?? ``}`}
-  <div {...rest} class="context-menu {rest.class ?? ``}" {style} bind:this={menu_element}>
+  <div {...rest} class={[`context-menu`, rest.class]} {style} bind:this={menu_element}>
     {#each sections as { title, options } (title)}
       <div class="section">
         <div class="header">{title}</div>
@@ -104,7 +104,9 @@
     background: var(--surface-bg);
     border: 1px solid var(--border-color);
     border-radius: var(--context-menu-border-radius, var(--border-radius, 3pt));
-    box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.3), 0 4px 8px -2px rgba(0, 0, 0, 0.1);
+    box-shadow:
+      0 8px 16px -4px rgba(0, 0, 0, 0.3),
+      0 4px 8px -2px rgba(0, 0, 0, 0.1);
     backdrop-filter: blur(4px);
     min-width: var(--context-menu-min-width, 160px);
     overflow: hidden;

package/dist/overlays/CopyButton.svelte

@@ -2,16 +2,22 @@
   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()
+  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 ?? ``}"
+  class={[`copy-button`, rest.class]}
   aria-label={label}
   {title}
   {onclick}

package/dist/overlays/DragControlTab.svelte

@@ -13,7 +13,12 @@
   } = $props()
 </script>
 
-{#snippet control_button(callback: () => void, css_class: string, icon: IconName, label: string)}
+{#snippet control_button(
+  callback: () => void,
+  css_class: string,
+  icon: IconName,
+  label: string,
+)}
   <button
     type="button"
     class={css_class}

package/dist/overlays/DraggablePane.svelte

@@ -25,16 +25,19 @@
     has_been_dragged = $bindable(false),
     currently_dragging = $bindable(false),
     resizable = `none`,
+    position = `absolute`,
   }: {
     show?: boolean
     show_pane?: boolean
     children: Snippet<
-      [{
-        show: boolean
-        show_control_buttons: boolean
-        has_been_dragged: boolean
-        currently_dragging: boolean
-      }]
+      [
+        {
+          show: boolean
+          show_control_buttons: boolean
+          has_been_dragged: boolean
+          currently_dragging: boolean
+        },
+      ]
     >
     // Toggle button
     toggle_props?: HTMLAttributes<HTMLButtonElement>
@@ -49,6 +52,10 @@
     persistent?: boolean
     // Resize mode: 'both' | 'width' | 'height' | 'none'
     resizable?: `both` | `width` | `height` | `none`
+    // 'fixed' renders the pane relative to the viewport so it escapes
+    // overflow-clipping ancestors (e.g. cards/tables with overflow: hidden)
+    // and clamps its max-height to the space below the toggle button.
+    position?: `absolute` | `fixed`
     // Callbacks
     onclose?: () => void
     on_drag_start?: () => void
@@ -63,6 +70,8 @@
   let show_control_buttons = $state(false)
   let resizing = $state(false)
   let resize_end_time = 0
+  const viewport_margin_px = 8
+  const min_reachable_pane_height_px = 180
 
   // Resize via bottom-right grip
   function handle_resize_start(event: PointerEvent) {
@@ -83,9 +92,7 @@
         pane_div.style.width = `${Math.max(200, start_w + evt.clientX - start_x)}px`
       }
       if (resizable !== `width`) {
-        pane_div.style.maxHeight = `${
-          Math.max(100, start_h + evt.clientY - start_y)
-        }px`
+        pane_div.style.maxHeight = `${Math.max(100, start_h + evt.clientY - start_y)}px`
       }
     }
     function on_up() {
@@ -124,6 +131,10 @@
           width: ``,
           maxHeight: ``,
         })
+        // Refresh --pane-viewport-clamp for the new position (matches
+        // handle_resize and the mount effect; without this a reset after a
+        // drag + window resize keeps a stale bottom-edge cap)
+        apply_viewport_clamp()
       }
     }
     // Hide the control buttons after reset
@@ -147,10 +158,31 @@
     const pane_width = pane_div?.getBoundingClientRect().width || 450
     const ox = offset.x ?? 5
     const oy = offset.y ?? 5
+
+    if (position === `fixed`) {
+      // Viewport-relative: keep the pane reachable within the screen.
+      const left = Math.max(
+        viewport_margin_px,
+        Math.min(
+          toggle_rect.right - pane_width + ox,
+          window.innerWidth - pane_width - viewport_margin_px,
+        ),
+      )
+      const top = Math.max(
+        viewport_margin_px,
+        Math.min(
+          toggle_rect.bottom + oy,
+          window.innerHeight - min_reachable_pane_height_px - viewport_margin_px,
+        ),
+      )
+      return { left: `${left}px`, top: `${top}px` }
+    }
+
     const positioned_ancestor = toggle_pane_btn.offsetParent
     const ancestor_rect = positioned_ancestor?.getBoundingClientRect()
 
-    if (!ancestor_rect) { // Fallback to document positioning
+    if (!ancestor_rect) {
+      // Fallback to document positioning
       const scroll_x = window.scrollX || document.documentElement.scrollLeft
       const scroll_y = window.scrollY || document.documentElement.scrollTop
       return {
@@ -173,10 +205,11 @@
     if (Date.now() - resize_end_time < 200) return
 
     const target = event.target
-    const is_toggle_button = target instanceof Node &&
+    const is_toggle_button =
+      target instanceof Node &&
       (target === toggle_pane_btn || (toggle_pane_btn?.contains(target) ?? false))
-    const is_inside_pane = target instanceof Node &&
-      (target === pane_div || (pane_div?.contains(target) ?? false))
+    const is_inside_pane =
+      target instanceof Node && (target === pane_div || (pane_div?.contains(target) ?? false))
 
     if (!is_toggle_button && !is_inside_pane && !currently_dragging && !resizing) {
       close_pane()
@@ -186,7 +219,8 @@
   // Debounced resize handler for better performance
   let resize_timeout: ReturnType<typeof setTimeout> | undefined = $state(undefined)
 
-  function handle_resize() { // Only reposition if pane is visible and hasn't been manually dragged
+  function handle_resize() {
+    // Only reposition if pane is visible and hasn't been manually dragged
     if (!show || has_been_dragged || currently_dragging) return
 
     if (resize_timeout) clearTimeout(resize_timeout)
@@ -197,11 +231,30 @@
         initial_position = pos
         pane_div.style.left = pos.left
         pane_div.style.top = pos.top
+        apply_viewport_clamp()
       }
     }, 50) // Debounce resize events
     resize_timeout = current_timeout
   }
 
+  // Fixed panes must never extend past the bottom viewport edge: cap the
+  // --pane-viewport-clamp var (combined with --pane-max-height via min() in
+  // CSS) to the space below the pane's top edge. No minimum here — usability
+  // is handled by calculate_position, which clamps the top so at least
+  // min_reachable_pane_height_px of space remains below.
+  function apply_viewport_clamp(): void {
+    if (position !== `fixed` || !pane_div || !toggle_pane_btn) return
+    // style.top is a `${n}px` string when set; "0px" is a valid position, so only
+    // fall back to the live rect when the inline style is unset or non-numeric
+    const parsed_top = Number(pane_div.style.top.replace(/px$/, ``))
+    const pane_top =
+      pane_div.style.top && !Number.isNaN(parsed_top)
+        ? parsed_top
+        : pane_div.getBoundingClientRect().top
+    const available = window.innerHeight - pane_top - viewport_margin_px
+    pane_div.style.setProperty(`--pane-viewport-clamp`, `${Math.max(0, available)}px`)
+  }
+
   // Position pane when shown
   $effect(() => {
     if (show && toggle_pane_btn && !has_been_dragged) {
@@ -216,6 +269,7 @@
           width: ``,
           maxHeight: ``,
         })
+        apply_viewport_clamp()
       }
     }
   })
@@ -240,7 +294,7 @@
     {...toggle_props}
     style={toggle_props.style ?? ``}
     onclick={toggle_pane}
-    class="pane-toggle {toggle_props.class ?? ``}"
+    class={[`pane-toggle`, toggle_props.class]}
     {@attach tooltip({ content: toggle_props.title ?? (show ? `Close pane` : `Open pane`) })}
   >
     <Icon icon={show ? open_icon : closed_icon} style={icon_style} />
@@ -256,12 +310,13 @@
     role="dialog"
     aria-label="Draggable pane"
     aria-modal="false"
+    style:position
     style:max-width={max_width}
     style:top={initial_position.top}
     style:left={initial_position.left}
     style:display={show ? `grid` : `none`}
     {...pane_props}
-    class="draggable-pane toc-exclude {show ? `pane-open` : ``} {pane_props.class ?? ``}"
+    class={[`draggable-pane toc-exclude`, show && `pane-open`, pane_props.class]}
   >
     <DragControlTab
       show_controls={show_control_buttons}
@@ -329,21 +384,24 @@
     box-sizing: border-box;
     box-shadow: var(
       --pane-box-shadow,
-      light-dark(
-        0 4px 20px -4px rgba(0, 0, 0, 0.15),
-        0 8px 16px -4px rgba(0, 0, 0, 0.3)
-      )
+      light-dark(0 4px 20px -4px rgba(0, 0, 0, 0.15), 0 8px 16px -4px rgba(0, 0, 0, 0.3))
     );
     z-index: var(--pane-z-index, 10);
     display: grid;
     text-align: left;
     /* Exclude position from being transitioned to prevent sluggish dragging */
-    transition: opacity 0.3s, background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
+    transition:
+      opacity 0.3s,
+      background-color 0.3s,
+      border-color 0.3s,
+      box-shadow 0.3s;
     width: 28em;
     max-width: var(--pane-max-width, 80cqw);
     overflow: visible; /* Allow control-tab to protrude above the pane border */
     min-height: var(--pane-min-height, auto);
-    max-height: var(--pane-max-height, 80vh);
+    /* --pane-viewport-clamp (set for position="fixed" panes) keeps the pane
+       above the bottom viewport edge even when the toggle sits low on screen */
+    max-height: min(var(--pane-max-height, 80vh), var(--pane-viewport-clamp, 200vh));
   }
   .draggable-pane .pane-content {
     padding: var(--pane-padding, 1ex);
@@ -368,10 +426,7 @@
   }
   .draggable-pane :global(hr) {
     border: none;
-    background: var(
-      --pane-hr-bg,
-      light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.1))
-    );
+    background: var(--pane-hr-bg, light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.1)));
     margin: var(--pane-hr-margin, 4pt 0);
     height: 1px;
   }

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

@@ -24,6 +24,7 @@ type $$ComponentProps = {
     pane_props?: HTMLAttributes<HTMLDivElement>;
     persistent?: boolean;
     resizable?: `both` | `width` | `height` | `none`;
+    position?: `absolute` | `fixed`;
     onclose?: () => void;
     on_drag_start?: () => void;
     toggle_pane_btn?: HTMLButtonElement;

package/dist/overlays/GlassChip.svelte

@@ -0,0 +1,30 @@
+<!-- Small text overlay with a frosted-glass backdrop, for annotating visual
+  content (3D structure viewers, plots) without fully obscuring it. Shared by
+  StructurePopup's stats block and StructureCarousel's card headers so both
+  render identically. Position/size via --glass-chip-* custom properties. -->
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  let { children, ...rest }: HTMLAttributes<HTMLDivElement> & { children: Snippet } = $props()
+</script>
+
+<div {...rest} class={[`glass-chip`, rest.class]}>
+  {@render children()}
+</div>
+
+<style>
+  .glass-chip {
+    position: absolute;
+    top: var(--glass-chip-top, 10px);
+    left: var(--glass-chip-left, 10px);
+    z-index: var(--glass-chip-z, 2);
+    max-width: var(--glass-chip-max-width, calc(100% - 20px));
+    padding: 4px 8px;
+    border-radius: 6px;
+    background: var(--glass-chip-bg, transparent);
+    backdrop-filter: blur(8px);
+    color: var(--text-color);
+    font-size: var(--glass-chip-font-size, 0.85em);
+  }
+</style>

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

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    children: Snippet;
+};
+declare const GlassChip: import("svelte").Component<$$ComponentProps, {}, "">;
+type GlassChip = ReturnType<typeof GlassChip>;
+export default GlassChip;

package/dist/overlays/InfoPaneCards.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { sanitize_html } from '../sanitize'
   import type { HTMLAttributes } from 'svelte/elements'
-  import { SvelteSet } from 'svelte/reactivity'
+  import { create_clipboard_feedback } from './'
   import CopyButton from './CopyButton.svelte'
 
   type InfoPaneRow = {
@@ -33,7 +33,7 @@
   } = $props()
 
   let info_filter = $state(``)
-  const copied_items = new SvelteSet<string>()
+  const { copied, copy } = create_clipboard_feedback()
   const row_key = (card_title: string, row: InfoPaneRow, row_idx: number): string =>
     row.key ?? `${card_title}:${row.label}:${row.value}:${row_idx}`
 
@@ -44,27 +44,16 @@
       .map((card) => ({
         ...card,
         rows: card.rows.filter(({ label, value }) =>
-          `${card.title} ${label} ${value}`.toLowerCase().includes(filter)
+          `${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)
-    }
-  }
+  const copy_row = (card_title: string, row: InfoPaneRow, row_idx: number): Promise<void> =>
+    copy(`${row.label}: ${row.value}`, row_key(card_title, row, row_idx))
 </script>
+
 {#if show_filter}
   <input
     class="info-filter"
@@ -78,7 +67,7 @@
 {#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}>
+  <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>
@@ -89,7 +78,7 @@
             <CopyButton
               label="Copy {row.label}: {row.value}"
               title="Copy {row.label}"
-              copied={copied_items.has(row_key(card.title, row, row_idx))}
+              copied={copied.has(row_key(card.title, row, row_idx))}
               onclick={() => copy_row(card.title, row, row_idx)}
             />
           </div>
@@ -129,10 +118,9 @@
   }
   .info-row {
     display: grid;
-    grid-template-columns: minmax(var(--row-label-min), var(--row-label-max, 0.8fr)) minmax(
-        0,
-        1fr
-      ) auto;
+    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);