matterviz 0.4.1 → 0.4.3

package/dist/math.js

@@ -147,22 +147,19 @@ export function matrix_inverse_3x3(matrix) {
 export function mat3x3_vec3_multiply(matrix, vector) {
     const [a, b, c] = matrix;
     const [x, y, z] = vector;
-    const a_new = a[0] * x + a[1] * y + a[2] * z;
-    const b_new = b[0] * x + b[1] * y + b[2] * z;
-    const c_new = c[0] * x + c[1] * y + c[2] * z;
-    return [a_new, b_new, c_new];
+    return [
+        a[0] * x + a[1] * y + a[2] * z,
+        b[0] * x + b[1] * y + b[2] * z,
+        c[0] * x + c[1] * y + c[2] * z,
+    ];
 }
+// Add up any number of same-length vectors
 export function add(...vecs) {
-    // add up any number of same-length vectors
     if (vecs.length === 0)
         throw new Error(`Cannot add zero vectors`);
-    const first_vec = vecs[0];
-    const length = first_vec.length;
-    // Validate all vectors have the same length
-    for (const vec of vecs) {
-        if (vec.length !== length) {
-            throw new Error(`All vectors must have the same length`);
-        }
+    const length = vecs[0].length;
+    if (vecs.some((vec) => vec.length !== length)) {
+        throw new Error(`All vectors must have the same length`);
     }
     const result = Array.from({ length }).fill(0);
     for (const vec of vecs) {
@@ -180,20 +177,14 @@ export function subtract(vec1, vec2) {
 }
 // Validate matrix structure and return column count
 function validate_matrix(mat, name) {
-    // Check for empty matrix (no rows)
-    if (mat.length === 0) {
+    if (mat.length === 0)
         throw new Error(`${name} must have at least one row`);
-    }
     if (!mat.every((row) => Array.isArray(row))) {
         throw new Error(`${name} must contain only array rows (no undefined/non-array elements)`);
     }
-    const cols = mat[0]?.length;
-    if (!Number.isFinite(cols))
-        throw new Error(`${name} has no columns`);
-    // Check for zero columns
-    if (cols === 0) {
+    const cols = mat[0].length;
+    if (cols === 0)
         throw new Error(`${name} must have at least one column`);
-    }
     if (!mat.every((row) => row.length === cols)) {
         throw new Error(`${name} must be rectangular`);
     }
@@ -293,7 +284,10 @@ export function scale_lattice_matrix(orig_matrix, scaling_factors) {
         [c[0] * nz, c[1] * nz, c[2] * nz],
     ];
 }
-const create_cart_to_frac_matrix = (lattice) => matrix_inverse_3x3(transpose_3x3_matrix(lattice));
+// Matrix mapping Cartesian coords to fractional (inverse of transposed
+// row-vector lattice). Prefer create_cart_to_frac unless the raw matrix is
+// needed, e.g. for allocation-free scalar arithmetic in hot loops.
+export const create_cart_to_frac_matrix = (lattice) => matrix_inverse_3x3(transpose_3x3_matrix(lattice));
 // Curried fractional→Cartesian converter (caches transposed matrix)
 export const create_frac_to_cart = (lattice) => {
     const transposed = transpose_3x3_matrix(lattice);
@@ -426,6 +420,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
@@ -792,11 +805,12 @@ export function compute_bounding_box_2d(vertices) {
 export function polygon_centroid(vertices) {
     if (vertices.length === 0)
         return [0, 0];
-    if (vertices.length < 3) {
-        const sum_x = vertices.reduce((acc, [x]) => acc + x, 0);
-        const sum_y = vertices.reduce((acc, [, y]) => acc + y, 0);
-        return [sum_x / vertices.length, sum_y / vertices.length];
-    }
+    const vertex_average = () => [
+        vertices.reduce((acc, [x]) => acc + x, 0) / vertices.length,
+        vertices.reduce((acc, [, y]) => acc + y, 0) / vertices.length,
+    ];
+    if (vertices.length < 3)
+        return vertex_average();
     let [signed_area, cx, cy] = [0, 0, 0];
     for (let idx = 0; idx < vertices.length; idx++) {
         const [x0, y0] = vertices[idx];
@@ -807,12 +821,8 @@ export function polygon_centroid(vertices) {
         cy += (y0 + y1) * cross;
     }
     signed_area *= 0.5;
-    // Fall back to vertex average for degenerate polygons
-    if (Math.abs(signed_area) < EPS) {
-        const sum_x = vertices.reduce((acc, [x]) => acc + x, 0);
-        const sum_y = vertices.reduce((acc, [, y]) => acc + y, 0);
-        return [sum_x / vertices.length, sum_y / vertices.length];
-    }
+    if (Math.abs(signed_area) < EPS)
+        return vertex_average();
     const factor = 1 / (6 * signed_area);
     return [cx * factor, cy * factor];
 }
@@ -891,11 +901,11 @@ export const cross_2d = (origin, point_a, point_b) => (point_a[0] - origin[0]) *
     (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) => {
+export const monotone_chain = (sorted, tolerance = 0) => {
     const chain = [];
     for (const pt of sorted) {
         while (chain.length >= 2 &&
-            cross_2d(chain[chain.length - 2], chain[chain.length - 1], pt) <= 0) {
+            cross_2d(chain[chain.length - 2], chain[chain.length - 1], pt) <= tolerance) {
             chain.pop();
         }
         chain.push(pt);
@@ -904,12 +914,12 @@ export const monotone_chain = (sorted) => {
 };
 // Full 2D convex hull via Andrew's monotone chain algorithm.
 // Returns vertices in counter-clockwise order.
-export function convex_hull_2d(points) {
+export function convex_hull_2d(points, tolerance = 0) {
     if (points.length < 3)
         return [...points];
     const sorted = points.toSorted((a, b) => a[0] - b[0] || a[1] - b[1]);
-    const lower = monotone_chain(sorted);
-    const upper = monotone_chain(sorted.toReversed());
+    const lower = monotone_chain(sorted, tolerance);
+    const upper = monotone_chain(sorted.toReversed(), tolerance);
     // Remove last point of each half (it's the first point of the other)
     lower.pop();
     upper.pop();

package/dist/overlays/ContextMenu.svelte

@@ -38,47 +38,28 @@
     return { x: Math.max(0, x), y: Math.max(0, y) }
   }
 
-  // Handle click outside to close
-  function handle_click_outside(event: MouseEvent) {
-    const target = event.target
-    if (target instanceof Element && visible) {
-      const menu = target.closest(`.context-menu`)
-      if (!menu) on_close?.()
-    }
-  }
-
-  // Handle right-click outside to close
-  function handle_right_click_outside(event: MouseEvent) {
-    if (!visible) return
-    const target = event.target
-    const menu = target instanceof Element ? target.closest(`.context-menu`) : null
-    if (!menu) {
-      event.preventDefault()
-      on_close?.()
-    }
-  }
-
-  // Handle keyboard shortcuts
-  function handle_keydown(event: KeyboardEvent) {
-    if (event.key === `Escape` && visible) on_close?.()
-  }
-
-  // Handle option selection
-  function handle_option_click(section_title: string, option: MenuOption) {
-    if (!option.disabled) on_select?.(section_title, option)
+  // Close on click or right-click outside the menu (right-click also suppresses
+  // the native context menu)
+  function handle_outside_pointer(event: MouseEvent) {
+    if (!visible || !(event.target instanceof Element)) return
+    if (event.target.closest(`.context-menu`)) return
+    if (event.type === `contextmenu`) event.preventDefault()
+    on_close?.()
   }
 </script>
 
 <svelte:document
-  onclick={handle_click_outside}
-  oncontextmenu={handle_right_click_outside}
-  onkeydown={handle_keydown}
+  onclick={handle_outside_pointer}
+  oncontextmenu={handle_outside_pointer}
+  onkeydown={(event) => {
+    if (event.key === `Escape` && visible) on_close?.()
+  }}
 />
 
 {#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>
@@ -86,7 +67,9 @@
           <button
             class:selected={selected_values[title] === option.value}
             class:disabled={option.disabled}
-            onclick={() => handle_option_click(title, option)}
+            onclick={() => {
+              if (!option.disabled) on_select?.(title, option)
+            }}
           >
             {#if option.icon}
               <Icon icon={option.icon as IconName} />
@@ -104,7 +87,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

@@ -2,7 +2,7 @@
   import Icon from '../Icon.svelte'
   import type { IconName } from '../icons'
   import { DragControlTab } from './'
-  import type { Snippet } from 'svelte'
+  import { onDestroy, type Snippet } from 'svelte'
   import { draggable, tooltip } from 'svelte-multiselect/attachments'
   import type { HTMLAttributes } from 'svelte/elements'
 
@@ -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() {
@@ -111,21 +118,29 @@
     onclose()
   }
 
-  function reset_position() {
-    if (toggle_pane_btn) {
-      const pos = calculate_position()
-      initial_position = pos
-      if (pane_div) {
-        Object.assign(pane_div.style, {
-          left: pos.left,
-          top: pos.top,
-          right: `auto`,
-          bottom: `auto`,
-          width: ``,
-          maxHeight: ``,
-        })
-      }
+  // Move the pane back under the toggle button, clear manual size overrides and
+  // refresh --pane-viewport-clamp (without which a reset after a drag + window
+  // resize would keep a stale bottom-edge cap)
+  function position_pane() {
+    if (pane_div) {
+      // Clear manual size first so calculate_position() uses natural pane dimensions
+      pane_div.style.width = ``
+      pane_div.style.maxHeight = ``
     }
+    const pos = calculate_position()
+    initial_position = pos
+    if (!pane_div) return
+    Object.assign(pane_div.style, {
+      left: pos.left,
+      top: pos.top,
+      right: `auto`,
+      bottom: `auto`,
+    })
+    apply_viewport_clamp()
+  }
+
+  function reset_position() {
+    if (toggle_pane_btn) position_pane()
     // Hide the control buttons after reset
     show_control_buttons = false
     has_been_dragged = false
@@ -147,10 +162,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 {
@@ -172,52 +208,49 @@
     // (Playwright and some browsers synthesize a click after pointer up)
     if (Date.now() - resize_end_time < 200) return
 
-    const target = event.target
-    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))
-
-    if (!is_toggle_button && !is_inside_pane && !currently_dragging && !resizing) {
-      close_pane()
-    }
+    const target = event.target instanceof Node ? event.target : null
+    const inside_toggle_or_pane = [toggle_pane_btn, pane_div].some(
+      (el) => el && (el === target || el.contains(target)),
+    )
+    if (!inside_toggle_or_pane && !currently_dragging && !resizing) close_pane()
   }
 
   // Debounced resize handler for better performance
-  let resize_timeout: ReturnType<typeof setTimeout> | undefined = $state(undefined)
+  let resize_timeout: ReturnType<typeof setTimeout> | undefined
+  onDestroy(() => resize_timeout && clearTimeout(resize_timeout))
 
-  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)
-    const current_timeout = setTimeout(() => {
-      if (resize_timeout !== current_timeout) return
-      if (show && toggle_pane_btn && !has_been_dragged && pane_div) {
-        const pos = calculate_position()
-        initial_position = pos
-        pane_div.style.left = pos.left
-        pane_div.style.top = pos.top
-      }
+    resize_timeout = setTimeout(() => {
+      // Re-check state since it may have changed during the debounce window
+      if (show && toggle_pane_btn && !has_been_dragged && pane_div) position_pane()
     }, 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) {
-      const pos = calculate_position()
-      initial_position = pos
-      if (pane_div) {
-        Object.assign(pane_div.style, {
-          left: pos.left,
-          top: pos.top,
-          right: `auto`,
-          bottom: `auto`,
-          width: ``,
-          maxHeight: ``,
-        })
-      }
-    }
+    if (show && toggle_pane_btn && !has_been_dragged) position_pane()
   })
 </script>
 
@@ -240,7 +273,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 +289,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}
@@ -319,7 +353,7 @@
     background-color: color-mix(in srgb, currentColor 8%, transparent);
   }
   div.draggable-pane {
-    position: absolute; /* Use absolute so pane scrolls with page content */
+    /* position set inline via style:position (default absolute: scrolls with page) */
     background: var(--pane-bg, var(--page-bg, light-dark(white, black)));
     border: var(
       --pane-border,
@@ -329,21 +363,26 @@
     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);
+    z-index: var(--pane-z-index, var(--z-index-viewer-pane, 10));
+    /* own compositing layer, or WKWebView paints the canvas over this (see app.css) */
+    will-change: transform;
     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 +407,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;
   }
@@ -411,7 +447,7 @@
   .draggable-pane :global(input[type='number']) {
     box-sizing: border-box;
     text-align: center;
-    width: 2.2em;
+    width: 3.5em;
     margin: 0 3pt;
     flex-shrink: 0;
   }

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

@@ -1,5 +1,5 @@
 import type { IconName } from '../icons';
-import type { Snippet } from 'svelte';
+import { type Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 type $$ComponentProps = {
     show?: boolean;
@@ -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,32 @@
+<!-- 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, var(--z-index-viewer-chip, 2));
+    /* own compositing layer, or WKWebView paints the canvas over this (see app.css) */
+    will-change: transform;
+    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;