matterviz 0.4.1 → 0.4.2

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);

package/dist/overlays/index.d.ts

@@ -1,7 +1,14 @@
 import type { ComponentProps } from 'svelte';
+import { SvelteSet } from 'svelte/reactivity';
 import type DraggablePane from './DraggablePane.svelte';
 export { default as ContextMenu } from './ContextMenu.svelte';
 export { default as DraggablePane } from './DraggablePane.svelte';
 export { default as DragControlTab } from './DragControlTab.svelte';
+export { default as GlassChip } from './GlassChip.svelte';
+export * from './portal';
 export type PaneToggleProps = ComponentProps<typeof DraggablePane>[`toggle_props`];
 export type PaneProps = ComponentProps<typeof DraggablePane>[`pane_props`];
+export declare function create_clipboard_feedback(duration?: number): {
+    copied: SvelteSet<string>;
+    copy: (text: string, key: string) => Promise<void>;
+};

package/dist/overlays/index.js

@@ -1,3 +1,29 @@
+import { SvelteMap, SvelteSet } from 'svelte/reactivity';
 export { default as ContextMenu } from './ContextMenu.svelte';
 export { default as DraggablePane } from './DraggablePane.svelte';
 export { default as DragControlTab } from './DragControlTab.svelte';
+export { default as GlassChip } from './GlassChip.svelte';
+export * from './portal';
+// Reactive clipboard-copy feedback shared by info panes. `copy(text, key)` writes
+// `text` to the clipboard and flags `key` as recently-copied in the returned reactive
+// `copied` set for `duration` ms, so UIs can show a transient "copied" checkmark.
+export function create_clipboard_feedback(duration = 1000) {
+    const copied = new SvelteSet();
+    const timers = new SvelteMap();
+    const copy = async (text, key) => {
+        try {
+            await navigator.clipboard.writeText(text);
+            copied.add(key);
+            // reset any in-flight timer so a re-copy gets the full feedback duration
+            clearTimeout(timers.get(key));
+            timers.set(key, setTimeout(() => {
+                copied.delete(key);
+                timers.delete(key);
+            }, duration));
+        }
+        catch (error) {
+            console.error(`Failed to copy to clipboard:`, error);
+        }
+    };
+    return { copied, copy };
+}

package/dist/overlays/portal.d.ts

@@ -0,0 +1,2 @@
+import type { Attachment } from 'svelte/attachments';
+export declare const portal: (target: HTMLElement | null | undefined) => Attachment;

package/dist/overlays/portal.js

@@ -0,0 +1,14 @@
+// Attachment that moves its element into `target` (e.g. a host panel's toolbar),
+// so components can offer optional external placement of their chrome (search/
+// export/settings buttons etc.) without duplicating markup: pass nothing and the
+// element renders inline where declared; pass a target and it teleports there.
+// A comment anchor marks the original position so the element is restored when
+// the target changes or unmounts, keeping Svelte's teardown sound.
+export const portal = (target) => (element) => {
+    if (!target)
+        return undefined;
+    const anchor = document.createComment(`portal`);
+    element.before(anchor);
+    target.append(element);
+    return () => anchor.replaceWith(element);
+};