matterviz 0.3.0 → 0.3.2

package/dist/FilePicker.svelte

@@ -14,6 +14,10 @@ let { files = [], active_files = [], show_category_filters = false, layout = `wr
     yaml: `rgba(255, 0, 255, 0.8)`,
     xdatcar: `rgba(255, 215, 0, 0.8)`,
     tdb: `rgba(0, 188, 212, 0.8)`,
+    chgcar: `rgba(59, 130, 246, 0.8)`,
+    locpot: `rgba(245, 158, 11, 0.8)`,
+    elfcar: `rgba(16, 185, 129, 0.8)`,
+    cube: `rgba(168, 85, 247, 0.8)`,
 }, ...rest } = $props();
 let active_category_filter = $state(null);
 let active_type_filter = $state(null);
@@ -28,11 +32,11 @@ const clear_click_timer = () => {
 };
 // Helper function to get the base file type (removing .gz extension)
 const get_base_file_type = (file) => {
-    // Use custom type mapper if provided
     if (type_mapper)
         return type_mapper(file);
+    if (file.type)
+        return file.type.toLowerCase();
     let base_name = file.name.toLowerCase();
-    // Remove .gz extension if present
     if (base_name.endsWith(`.gz`))
         base_name = base_name.slice(0, -3);
     return base_name.split(`.`).pop() || `file`;
@@ -103,7 +107,10 @@ let uniq_categories = $derived([...new Set(files.map(get_category_id))].filter(B
         {category}
       </span>
     {/each}
-    {#if uniq_categories.length > 0 && uniq_formats.length > 0}&emsp;{/if}
+    {#if show_category_filters && uniq_categories.length > 0 &&
+        uniq_formats.length > 0}
+      <span class="divider"></span>
+    {/if}
 
     {#each uniq_formats as format (format)}
       {@const is_active = active_type_filter === format}
@@ -137,11 +144,9 @@ let uniq_categories = $derived([...new Set(files.map(get_category_id))].filter(B
 
   {#each filtered_files as file (file.name)}
     {@const base_type = get_base_file_type(file)}
-    {@const is_compressed = file.name.toLowerCase().endsWith(`.gz`)}
     <div
       class="file-item"
       class:active={active_files.includes(file.name)}
-      class:compressed={is_compressed}
       style:background-color={file_type_colors[base_type]?.replace(`0.8`, `0.08`)}
       draggable="true"
       ondragstart={handle_drag_start(file)}
@@ -179,9 +184,14 @@ let uniq_categories = $derived([...new Set(files.map(get_category_id))].filter(B
       ? `Click to load or drag this ${base_type.toUpperCase()} file`
       : `Drag this ${base_type.toUpperCase()} file`}
     >
+      {#if file.label}
+        <span
+          class="file-type-badge"
+          style:background-color={file_type_colors[base_type] ?? `rgba(128,128,128,0.8)`}
+        >{base_type.toUpperCase()}</span>
+      {/if}
       <div class="file-name">
-        {file.category ? `${file.category_icon} ` : ``}{file.name}
-        {#if is_compressed}<span class="compression-indicator">📦</span>{/if}
+        {file.category ? `${file.category_icon} ` : ``}{file.label ?? file.name}
       </div>
     </div>
   {/each}
@@ -220,6 +230,12 @@ let uniq_categories = $derived([...new Set(files.map(get_category_id))].filter(B
     opacity: 0.8;
     margin: 0 0 0.5em;
   }
+  .divider {
+    width: 1px;
+    align-self: stretch;
+    background: light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
+    margin-inline: 0.3em;
+  }
   .legend-item {
     cursor: pointer;
     padding: 0.2em 0.4em;
@@ -267,7 +283,10 @@ let uniq_categories = $derived([...new Set(files.map(get_category_id))].filter(B
     cursor: grab;
     background: light-dark(rgba(0, 0, 0, 0.02), rgba(255, 255, 255, 0.1));
     transition: all 0.2s ease;
-    gap: 0.5em;
+    gap: 4pt;
+    &:has(.file-type-badge) {
+      padding-left: 3pt;
+    }
   }
   .file-item.active {
     border-color: var(--success-color, #00ff00);
@@ -282,21 +301,19 @@ let uniq_categories = $derived([...new Set(files.map(get_category_id))].filter(B
     background: light-dark(rgba(0, 122, 204, 0.15), rgba(0, 122, 204, 0.25));
     filter: brightness(1.1);
   }
+  .file-type-badge {
+    font-size: 0.5em;
+    font-weight: 700;
+    letter-spacing: 0.03em;
+    padding: 1px 5px;
+    border-radius: 10px;
+    color: white;
+    white-space: nowrap;
+    line-height: 1.4;
+  }
   .file-name {
     font-size: 0.7em;
     line-height: 1.1;
     white-space: pre-line;
   }
-  .compression-indicator {
-    opacity: 0.7;
-    font-size: 0.8em;
-    margin-left: 0.2em;
-  }
-  .file-item.compressed {
-    border-style: dashed;
-    opacity: 0.9;
-  }
-  .file-item.compressed:hover {
-    opacity: 1;
-  }
 </style>

package/dist/Icon.svelte

@@ -27,8 +27,8 @@ const data = $derived.by(() => {
 
 <style>
   svg {
-    width: 1em;
-    height: auto;
+    width: var(--icon-size, 1em);
+    height: var(--icon-size, auto);
     display: inline-block;
     vertical-align: middle;
   }

package/dist/MillerIndexInput.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">let { value = $bindable([0, 0, 1]) } = $props();
+// Format: compact "001" for single-digit, spaced "10 0 1" for multi-digit
+let hkl_text = $derived(value.every((v) => Math.abs(v) < 10) ? value.join(``) : value.join(` `));
+// Parse hkl string: supports compact "001"/"-101" and spaced/comma "10, 0, 1"
+function parse_hkl(input) {
+    // Try spaced/comma format first (handles multi-digit)
+    const spaced = input.trim().split(/[,\s]+/);
+    if (spaced.length === 3) {
+        const nums = spaced.map(Number);
+        if (nums.every((n) => !isNaN(n)))
+            return nums;
+    }
+    // Fall back to compact single-digit format: "001", "-101"
+    const compact = input.replace(/\s+/g, ``);
+    const match = compact.match(/^(-?\d)(-?\d)(-?\d)$/);
+    if (match)
+        return [Number(match[1]), Number(match[2]), Number(match[3])];
+    return null;
+}
+function handle_input(event) {
+    const parsed = parse_hkl(event.target.value);
+    if (parsed)
+        value = parsed;
+}
+export {};
+</script>
+
+<label class="miller-input">
+  <span>hkl</span>
+  <input
+    type="text"
+    value={hkl_text}
+    oninput={handle_input}
+    placeholder="001"
+    maxlength="12"
+    title="Miller indices (e.g. 001, -101, or 10 0 1)"
+  />
+</label>
+
+<style>
+  .miller-input {
+    display: flex;
+    align-items: center;
+    gap: 0.3em;
+    span {
+      font-weight: 600;
+      font-size: 0.85em;
+    }
+    input {
+      width: 4em;
+      padding: 0.15em 0.3em;
+      border: 1px solid var(--border-color, #ccc);
+      border-radius: 4px;
+      font-family: monospace;
+      font-size: 0.9em;
+      text-align: center;
+      box-sizing: border-box;
+    }
+  }
+</style>

package/dist/MillerIndexInput.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Vec3 } from './math';
+type $$ComponentProps = {
+    value?: Vec3;
+};
+declare const MillerIndexInput: import("svelte").Component<$$ComponentProps, {}, "value">;
+type MillerIndexInput = ReturnType<typeof MillerIndexInput>;
+export default MillerIndexInput;

package/dist/app.css

@@ -8,12 +8,14 @@
   --max-text-width: 50em;
 
   --sms-max-width: 20em;
+  --sms-min-height: 19pt;
   --sms-text-color: var(--text-color);
 
   /* Svelte MultiSelect */
   --sms-options-bg: var(--page-bg);
   --sms-active-color: light-dark(var(--accent-color), cornflowerblue);
   --sms-li-active-bg: light-dark(rgba(100, 149, 237, 0.25), cornflowerblue);
+  --sms-selected-bg: light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.15));
   --border-radius: 3pt;
 }
 
@@ -33,18 +35,23 @@
 }
 body {
   background: var(--page-bg);
-  padding: 6vh 3vw;
+  padding: 5vh 3vw 3vh;
   font-family: -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
   margin: auto;
   color: var(--text-color);
   line-height: 1.5;
+  /* Sticky footer: footer stays at bottom when content is short */
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  box-sizing: border-box;
 }
 main {
   margin: auto;
-  margin-bottom: 3em;
   width: 100%;
   max-width: var(--max-text-width);
   container-type: inline-size;
+  flex: 1; /* Grow to fill available space (sticky footer) */
 }
 a {
   color: var(--accent-color, cornflowerblue);
@@ -128,6 +135,35 @@ textarea {
   margin: 1em auto;
 }
 
+/* Theme-aware form controls (works consistently in notebooks and VSCode/Cursor webviews) */
+:is(
+  input:not([type='checkbox'], [type='radio'], [type='range'], [type='color']),
+  textarea,
+  select
+) {
+  background-color: var(--surface-bg);
+  color: var(--text-color);
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius);
+  padding: 2px 6px;
+}
+:is(
+  input:not([type='checkbox'], [type='radio'], [type='range'], [type='color']),
+  textarea,
+  select
+):focus {
+  outline: none;
+  border-color: var(--accent-color);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color) 25%, transparent);
+}
+:is(input, textarea)::placeholder {
+  color: var(--text-color-muted);
+}
+select option {
+  background-color: var(--surface-bg);
+  color: var(--text-color);
+}
+
 /* Modern flat input styling */
 input {
   border: none;

package/dist/brillouin/BrillouinZone.svelte

@@ -1,17 +1,17 @@
-<script lang="ts">import { toggle_fullscreen } from '../layout';
-import { normalize_show_controls } from '../controls';
+<script lang="ts">import { normalize_show_controls } from '../controls';
 import EmptyState from '../EmptyState.svelte';
+import { StatusMessage } from '../feedback';
 import Spinner from '../feedback/Spinner.svelte';
 import Icon from '../Icon.svelte';
-import { decompress_file, handle_url_drop, load_from_url } from '../io';
-import { set_fullscreen_bg } from '../layout';
+import { create_file_drop_handler, load_from_url } from '../io';
+import { set_fullscreen_bg, toggle_fullscreen } from '../layout';
+import { PlotTooltip } from '../plot';
 import { DEFAULTS } from '../settings';
 import { parse_any_structure } from '../structure/parse';
 import { analyze_structure_symmetry } from '../symmetry';
 import { Canvas } from '@threlte/core';
 import { untrack } from 'svelte';
 import { tooltip } from 'svelte-multiselect/attachments';
-import { PlotTooltip } from '../plot';
 import BrillouinZoneControls from './BrillouinZoneControls.svelte';
 import BrillouinZoneExportPane from './BrillouinZoneExportPane.svelte';
 import BrillouinZoneInfoPane from './BrillouinZoneInfoPane.svelte';
@@ -131,33 +131,19 @@ $effect(() => {
         }
     }
 });
-async function handle_file_drop(event) {
-    event.preventDefault();
-    dragover = false;
-    if (!allow_file_drop)
-        return;
-    loading = true;
-    error_msg = undefined;
-    try {
-        const handler = on_file_drop || safe_parse;
-        const handled = await handle_url_drop(event, handler).catch(() => false);
-        if (handled)
-            return;
-        const file = event.dataTransfer?.files[0];
-        if (file) {
-            const { content, filename } = await decompress_file(file);
-            if (content)
-                handler(content, filename);
-        }
-    }
-    catch (err) {
-        error_msg = `File drop failed: ${err}`;
-        on_error?.({ error_msg });
-    }
-    finally {
-        loading = false;
-    }
-}
+const handle_file_drop = create_file_drop_handler({
+    allow: () => allow_file_drop,
+    on_drop: (content, filename) => (on_file_drop || safe_parse)(content, filename),
+    on_error: (msg) => {
+        error_msg = msg;
+        on_error?.({ error_msg: msg });
+    },
+    set_loading: (val) => {
+        loading = val;
+        if (val)
+            [error_msg, dragover] = [undefined, false];
+    },
+});
 function onkeydown(event) {
     const target = event.target;
     if (target.tagName === `INPUT` || target.tagName === `TEXTAREA`)
@@ -221,10 +207,7 @@ $effect(() => {
   {#if loading}
     <Spinner text="Loading structure..." {...spinner_props} />
   {:else if error_msg}
-    <div class="error-state">
-      <p class="error">{error_msg}</p>
-      <button onclick={() => (error_msg = undefined)}>Dismiss</button>
-    </div>
+    <StatusMessage bind:message={error_msg} type="error" dismissible />
   {:else if structure && `lattice` in structure}
     <section
       class="control-buttons {controls_config.class}"
@@ -394,7 +377,7 @@ $effect(() => {
     display: flex;
     padding: 4px;
     border-radius: var(--border-radius, 3pt);
-    font-size: clamp(0.85em, 2cqmin, 2.5em);
+    font-size: clamp(0.85em, 2cqmin, 1.3em);
   }
   section.control-buttons :global(button:hover) {
     background-color: color-mix(in srgb, currentColor 8%, transparent);
@@ -414,29 +397,4 @@ $effect(() => {
     text-align: center;
     padding: 2rem;
   }
-  .error-state {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    padding: 2rem;
-    text-align: center;
-    box-sizing: border-box;
-  }
-  .error-state p {
-    color: var(--error-color, #ff6b6b);
-    margin: 0 0 1rem;
-  }
-  .error-state button {
-    padding: 0.5rem 1rem;
-    background: var(--error-color, #ff6b6b);
-    color: white;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-  }
-  .error-state button:hover {
-    background: var(--error-color-hover, #ff5252);
-  }
 </style>

package/dist/brillouin/BrillouinZone.svelte.d.ts

@@ -78,6 +78,6 @@ type $$ComponentProps = {
     on_fullscreen_change?: (data: BZHandlerData) => void;
     on_hover?: (data: BZHoverData | null) => void;
 } & HTMLAttributes<HTMLDivElement>;
-declare const BrillouinZone: import("svelte").Component<$$ComponentProps, {}, "height" | "width" | "dragover" | "fullscreen" | "structure" | "hovered" | "controls_open" | "camera_projection" | "info_pane_open" | "loading" | "error_msg" | "wrapper" | "png_dpi" | "bz_order" | "surface_color" | "surface_opacity" | "edge_color" | "edge_width" | "show_vectors" | "show_ibz" | "ibz_color" | "ibz_opacity" | "bz_data" | "vector_scale" | "ibz_data">;
+declare const BrillouinZone: import("svelte").Component<$$ComponentProps, {}, "structure" | "height" | "width" | "dragover" | "controls_open" | "loading" | "fullscreen" | "hovered" | "camera_projection" | "info_pane_open" | "wrapper" | "error_msg" | "png_dpi" | "bz_order" | "surface_color" | "surface_opacity" | "edge_color" | "edge_width" | "show_vectors" | "show_ibz" | "ibz_color" | "ibz_opacity" | "bz_data" | "vector_scale" | "ibz_data">;
 type BrillouinZone = ReturnType<typeof BrillouinZone>;
 export default BrillouinZone;

package/dist/brillouin/BrillouinZoneExportPane.svelte

@@ -1,9 +1,9 @@
-<script lang="ts">import DraggablePane from '../overlays/DraggablePane.svelte';
-import { export_canvas_as_png } from '../io/export';
+<script lang="ts">import { export_canvas_as_png } from '../io/export';
+import DraggablePane from '../overlays/DraggablePane.svelte';
+import { CopyButton } from 'svelte-multiselect';
 import { tooltip } from 'svelte-multiselect/attachments';
 let { export_pane_open = $bindable(false), bz_data, wrapper, scene, camera, filename = `brillouin-zone`, png_dpi = $bindable(150), ...rest } = $props();
-let copy_status = $state(false);
-const copy_confirm = `✅`;
+let json_copy_state = $state(`ready`);
 function export_as_png() {
     const canvas = wrapper?.querySelector(`canvas`);
     if (!canvas || !scene || !camera)
@@ -38,16 +38,10 @@ function get_json_data() {
         reciprocal_lattice: bz_data.k_lattice,
     };
 }
-async function copy_json() {
+let json_string = $derived.by(() => {
     const json_data = get_json_data();
-    if (!json_data)
-        return;
-    await navigator.clipboard.writeText(JSON.stringify(json_data, null, 2));
-    copy_status = true;
-    setTimeout(() => {
-        copy_status = false;
-    }, 1000);
-}
+    return json_data ? JSON.stringify(json_data, null, 2) : null;
+});
 </script>
 
 <DraggablePane
@@ -97,14 +91,12 @@ async function copy_json() {
     >
       ⬇
     </button>
-    <button
-      type="button"
-      onclick={copy_json}
-      disabled={!bz_data}
+    <CopyButton
+      content={json_string ?? ``}
+      bind:state={json_copy_state}
+      disabled={!json_string}
       title="Copy JSON to clipboard"
-    >
-      {copy_status ? copy_confirm : `📋`}
-    </button>
+    />
   </label>
 </DraggablePane>
 

package/dist/brillouin/BrillouinZoneScene.svelte

@@ -243,7 +243,7 @@ function handle_leave(is_ibz) {
     {/if}
 
     <!-- BZ edges -->
-    {#each bz_data.edges as edge_segment (JSON.stringify(edge_segment))}
+    {#each bz_data.edges as edge_segment, edge_idx (`bz-edge-${edge_idx}`)}
       {@const [from, to] = edge_segment}
       <Cylinder {from} {to} thickness={edge_width} color={edge_color} />
     {/each}
@@ -267,7 +267,7 @@ function handle_leave(is_ibz) {
 
     <!-- IBZ edges -->
     {#if show_ibz && ibz_data}
-      {#each ibz_data.edges as edge_segment (JSON.stringify(edge_segment))}
+      {#each ibz_data.edges as edge_segment, edge_idx (`ibz-edge-${edge_idx}`)}
         {@const [from, to] = edge_segment}
         <Cylinder {from} {to} thickness={edge_width * 1.5} color={ibz_color} />
       {/each}

package/dist/brillouin/BrillouinZoneScene.svelte.d.ts

@@ -43,6 +43,6 @@ type $$ComponentProps = {
     hovered_qpoint_index?: number | null;
     hover_data?: BZHoverData | null;
 };
-declare const BrillouinZoneScene: import("svelte").Component<$$ComponentProps, {}, "camera_position" | "camera_projection" | "camera_is_moving" | "scene" | "camera" | "surface_color" | "surface_opacity" | "edge_color" | "edge_width" | "show_vectors" | "bz_data" | "vector_scale" | "hover_data">;
+declare const BrillouinZoneScene: import("svelte").Component<$$ComponentProps, {}, "camera_position" | "camera_projection" | "scene" | "camera" | "camera_is_moving" | "surface_color" | "surface_opacity" | "edge_color" | "edge_width" | "show_vectors" | "bz_data" | "vector_scale" | "hover_data">;
 type BrillouinZoneScene = ReturnType<typeof BrillouinZoneScene>;
 export default BrillouinZoneScene;

package/dist/chempot-diagram/ChemPotDiagram.svelte

@@ -0,0 +1,192 @@
+<script lang="ts">import { get_hill_formula } from '../composition/format';
+import { format_num } from '../labels';
+import ChemPotDiagram2D from './ChemPotDiagram2D.svelte';
+import ChemPotDiagram3D from './ChemPotDiagram3D.svelte';
+import { CHEMPOT_DEFAULTS } from './types';
+let { entries = [], config = {}, width = $bindable(600), height = $bindable(600), 
+// Bound temperature may be auto-corrected by 2D/3D child components.
+temperature = $bindable(), hover_info = $bindable(null), } = $props();
+// Extract unique elements from all entries (composition keys are element symbols)
+const all_elements = $derived([
+    ...new Set(entries.flatMap((entry) => Object.entries(entry.composition)
+        .filter(([, amount]) => amount > 0)
+        .map(([element]) => element))),
+].sort());
+// How many display axes (2 = binary/2D, 3+ = ternary/3D)
+const display_elements = $derived(config.elements ?? all_elements);
+const n_display = $derived(display_elements.length);
+const show_tooltip = $derived(config.show_tooltip ?? CHEMPOT_DEFAULTS.show_tooltip);
+const tooltip_detail_level = $derived(config.tooltip_detail_level ?? CHEMPOT_DEFAULTS.tooltip_detail_level);
+function is_hover_info_3d(value) {
+    return value?.view === `3d`;
+}
+</script>
+
+<div class="chempot-diagram-wrapper">
+  {#if n_display < 2}
+    <div
+      class="chempot-error"
+      role="alert"
+      aria-live="polite"
+      style:width="{width}px"
+      style:height="{height}px"
+    >
+      <div>
+        <h3 id="unsupported-chemical-system">Unsupported Chemical System</h3>
+        <p>
+          Chemical potential diagrams require at least 2 elements. Found {n_display}
+          element{n_display === 1 ? `` : `s`}:
+          {display_elements.join(`, `) || `none`}
+        </p>
+      </div>
+    </div>
+  {:else if n_display === 2}
+    <ChemPotDiagram2D
+      {entries}
+      {config}
+      bind:width
+      bind:height
+      bind:temperature
+      bind:hover_info
+      render_local_tooltip={false}
+    />
+  {:else}
+    <ChemPotDiagram3D
+      {entries}
+      {config}
+      bind:width
+      bind:height
+      bind:temperature
+      bind:hover_info
+      render_local_tooltip={false}
+    />
+  {/if}
+  {#if show_tooltip && hover_info}
+    <aside
+      class="chempot-tooltip"
+      style:left="{hover_info.pointer?.x ?? 4}px"
+      style:top="{hover_info.pointer?.y ?? 4}px"
+    >
+      <h4>{@html get_hill_formula(hover_info.formula, false, ``)}</h4>
+      {#if hover_info.view === `2d`}
+        <p>2D domain · Points: {hover_info.n_points}</p>
+        {#if tooltip_detail_level === `detailed`}
+          <h5 id="axis-ranges">Axis ranges</h5>
+          {#each hover_info.axis_ranges as axis_range (axis_range.element)}
+            <p>
+              {axis_range.element}: {format_num(axis_range.min_val, `.4~g`)} to
+              {format_num(axis_range.max_val, `.4~g`)} eV
+            </p>
+          {/each}
+        {/if}
+      {:else if is_hover_info_3d(hover_info)}
+        <p>
+          {hover_info.is_elemental ? `Elemental phase` : `Compound phase`}
+          {#if hover_info.is_draw_formula}
+            <span> · Overlay target</span>
+          {/if}
+        </p>
+        <p>
+          Vertices: {hover_info.n_vertices} · Edges: {hover_info.n_edges} · Points:
+          {hover_info.n_points}
+        </p>
+        <p>
+          Entries: {hover_info.matching_entry_count}
+          {#if hover_info.min_energy_per_atom !== null &&
+          hover_info.max_energy_per_atom !== null}
+            · E/atom: {format_num(hover_info.min_energy_per_atom, `.4~g`)}
+            to {format_num(hover_info.max_energy_per_atom, `.4~g`)} eV
+          {/if}
+        </p>
+        {#if tooltip_detail_level === `detailed`}
+          <h5 id="axis-ranges-1">Axis ranges</h5>
+          {#each hover_info.axis_ranges as axis_range (axis_range.element)}
+            <p>
+              {axis_range.element}: {format_num(axis_range.min_val, `.4~g`)} to
+              {format_num(axis_range.max_val, `.4~g`)} eV
+            </p>
+          {/each}
+          <p>
+            Centroid: ({
+              hover_info.ann_loc.map((value) => format_num(value, `.3~g`)).join(
+                `, `,
+              )
+            })
+          </p>
+          {#if hover_info.neighbors.length > 0}
+            <h5 id="neighbors">Neighbors ({hover_info.neighbors.length})</h5>
+            <p>
+              {
+                hover_info.neighbors.map((f) => get_hill_formula(f, true, ``)).join(
+                  `, `,
+                )
+              }
+            </p>
+          {/if}
+          {#if hover_info.touches_limits.length > 0}
+            <h5 id="touches-bounds">Touches bounds</h5>
+            <p>{hover_info.touches_limits.join(`, `)}</p>
+          {/if}
+        {/if}
+      {/if}
+    </aside>
+  {/if}
+</div>
+
+<style>
+  .chempot-diagram-wrapper {
+    position: relative;
+  }
+  .chempot-error {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--border-color, #ccc);
+    border-radius: var(--border-radius, 3pt);
+    background: var(--bg-color, transparent);
+  }
+  .chempot-error > div {
+    text-align: center;
+    padding: 2em;
+    color: var(--text-color, #666);
+  }
+  .chempot-error h3 {
+    margin: 0 0 1em;
+  }
+  .chempot-error p {
+    margin: 0;
+  }
+  .chempot-tooltip {
+    position: absolute;
+    max-width: min(32rem, 92vw);
+    background: var(
+      --tooltip-bg,
+      light-dark(rgba(255, 255, 255, 0.95), rgba(0, 0, 0, 0.9))
+    );
+    color: var(--tooltip-text, var(--text-color, #222));
+    border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
+    border-radius: 6px;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
+    padding: 8px 10px;
+    font-size: 12px;
+    line-height: 1.35;
+    pointer-events: none;
+    z-index: 40;
+  }
+  .chempot-tooltip h4 {
+    margin: 0 0 4px;
+    font-size: 13px;
+  }
+  .chempot-tooltip p {
+    margin: 1px 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .chempot-tooltip h5 {
+    margin-top: 6px;
+    margin-bottom: 0;
+    font-size: 12px;
+    font-weight: 600;
+  }
+</style>