matterviz 0.1.12 → 0.1.13

package/dist/ContextMenu.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { Icon } from './';
-let { sections, selected_values = {}, on_select, position, visible, on_close, menu_element = $bindable(), ...rest } = $props();
+let { sections, selected_values = {}, on_select, position, visible, on_close, menu_element, ...rest } = $props();
 // Calculate smart position that keeps menu in viewport
 function get_smart_position() {
     if (!menu_element)

package/dist/ContextMenu.svelte.d.ts

@@ -5,7 +5,7 @@ interface MenuOption {
     label?: string;
     disabled?: boolean;
 }
-interface Props extends HTMLAttributes<HTMLDivElement> {
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
     sections: Readonly<{
         title: string;
         options: readonly MenuOption[];
@@ -19,7 +19,7 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
     visible: boolean;
     on_close?: () => void;
     menu_element?: HTMLDivElement;
-}
-declare const ContextMenu: import("svelte").Component<Props, {}, "menu_element">;
+};
+declare const ContextMenu: import("svelte").Component<$$ComponentProps, {}, "">;
 type ContextMenu = ReturnType<typeof ContextMenu>;
 export default ContextMenu;

package/dist/DraggablePane.svelte

@@ -108,9 +108,10 @@ $effect(() => {
 
 <svelte:window
   onkeydown={(event: KeyboardEvent) => {
-    if (event.key !== `Escape`) return
-    event.preventDefault()
-    close_pane()
+    if (event.key === `Escape` && show) {
+      event.preventDefault()
+      close_pane()
+    }
   }}
   onresize={handle_resize}
 />
@@ -238,7 +239,7 @@ $effect(() => {
     text-align: right; /* right align long line-breaking trajectory file names */
   }
   .draggable-pane :global(label) {
-    display: flex;
+    display: inline-flex;
     align-items: center;
     gap: var(--pane-label-gap, 2pt);
   }
@@ -262,10 +263,14 @@ $effect(() => {
     flex: 1;
     min-width: 60px;
   }
+  .draggable-pane :global(input[type='color']) {
+    width: 2.5em;
+    height: 1.3em;
+    margin: 0 5pt;
+  }
   .draggable-pane :global(input[type='number']) {
     box-sizing: border-box;
     text-align: center;
-    border-radius: 3pt;
     width: 2.2em;
     margin: 0 3pt 0 6pt;
     flex-shrink: 0;

package/dist/DraggablePane.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { IconName } from './icons';
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-interface Props {
+type $$ComponentProps = {
     show?: boolean;
     show_pane?: boolean;
     children: Snippet<[]>;
@@ -21,7 +21,7 @@ interface Props {
     pane_div?: HTMLDivElement;
     has_been_dragged?: boolean;
     currently_dragging?: boolean;
-}
-declare const DraggablePane: import("svelte").Component<Props, {}, "show" | "toggle_pane_btn" | "pane_div" | "has_been_dragged" | "currently_dragging">;
+};
+declare const DraggablePane: import("svelte").Component<$$ComponentProps, {}, "show" | "toggle_pane_btn" | "pane_div" | "has_been_dragged" | "currently_dragging">;
 type DraggablePane = ReturnType<typeof DraggablePane>;
 export default DraggablePane;

package/dist/FilePicker.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { FileInfo } from './';
 import type { HTMLAttributes } from 'svelte/elements';
-interface Props extends HTMLAttributes<HTMLDivElement> {
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
     files: FileInfo[];
     active_files?: string[];
     show_category_filters?: boolean;
@@ -8,7 +8,7 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
     on_drag_end?: () => void;
     type_mapper?: (file: FileInfo) => string;
     file_type_colors?: Record<string, string>;
-}
-declare const FilePicker: import("svelte").Component<Props, {}, "">;
+};
+declare const FilePicker: import("svelte").Component<$$ComponentProps, {}, "">;
 type FilePicker = ReturnType<typeof FilePicker>;
 export default FilePicker;

package/dist/Icon.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { SVGAttributes } from 'svelte/elements';
 import { type IconName } from './icons';
-interface Props extends SVGAttributes<SVGSVGElement> {
+type $$ComponentProps = {
     icon: IconName;
-}
-declare const Icon: import("svelte").Component<Props, {}, "">;
+} & SVGAttributes<SVGSVGElement>;
+declare const Icon: import("svelte").Component<$$ComponentProps, {}, "">;
 type Icon = ReturnType<typeof Icon>;
 export default Icon;

package/dist/Nav.svelte

@@ -1,5 +1,5 @@
-<script lang="ts">import { click_outside } from 'svelte-multiselect';
-import Icon from './Icon.svelte';
+<script lang="ts">import { Icon } from './';
+import { click_outside } from 'svelte-multiselect';
 let { routes = [], children, link, menu_style, page, labels, ...rest } = $props();
 let is_open = $state(false);
 let hovered_dropdown = $state(null);
@@ -132,15 +132,14 @@ function parse_route(route) {
         <!-- Dropdown menu item -->
         {@const parent = format_label(label)}
         {@const child_is_active = is_child_current(sub_routes)}
+        {@const parent_page_exists = sub_routes.includes(href)}
+        {@const filtered_sub_routes = sub_routes.filter((route) => route !== href)}
         <div
           class="dropdown-wrapper"
           class:active={child_is_active}
-          role="button"
-          tabindex="0"
           data-href={href}
+          role="group"
           aria-current={child_is_active ? `true` : undefined}
-          aria-expanded={hovered_dropdown === href}
-          aria-haspopup="true"
           onmouseenter={() => !is_touch_device && (hovered_dropdown = href)}
           onmouseleave={() => !is_touch_device && (hovered_dropdown = null)}
           onfocusin={() => (hovered_dropdown = href)}
@@ -150,16 +149,33 @@ function parse_route(route) {
               hovered_dropdown = null
             }
           }}
-          onclick={() => toggle_dropdown(href, false)}
-          onkeydown={(event) => handle_dropdown_keydown(event, href, sub_routes)}
         >
-          <span class="dropdown-trigger" style={parent.style}>
-            {@html parent.label}
-            <Icon
-              icon="ArrowDown"
-              style="width: 0.8em; height: 0.8em; margin-left: 0.2em"
-            />
-          </span>
+          <div class="dropdown-trigger-wrapper">
+            <svelte:element
+              this={parent_page_exists ? `a` : `span`}
+              href={parent_page_exists ? href : undefined}
+              class="dropdown-trigger"
+              aria-current={is_current(href)}
+              onclick={close_menus}
+              role={parent_page_exists ? undefined : `button`}
+              style={parent.style}
+            >
+              {@html parent.label}
+            </svelte:element>
+            <button
+              class="dropdown-toggle"
+              aria-label="Toggle {parent.label} submenu"
+              aria-expanded={hovered_dropdown === href}
+              aria-haspopup="true"
+              onclick={() => toggle_dropdown(href, false)}
+              onkeydown={(event) => handle_dropdown_keydown(event, href, filtered_sub_routes)}
+            >
+              <Icon
+                icon="ArrowDown"
+                style="width: 0.8em; height: 0.8em"
+              />
+            </button>
+          </div>
           <div
             class="dropdown-menu"
             class:visible={hovered_dropdown === href}
@@ -175,11 +191,8 @@ function parse_route(route) {
               }
             }}
           >
-            {#each sub_routes as child_href (child_href)}
-              {@const child = format_label(
-            child_href,
-            true,
-          )}
+            {#each filtered_sub_routes as child_href (child_href)}
+              {@const child = format_label(child_href, true)}
               {#if link}
                 {@render link({ href: child_href, label: child.label })}
               {:else}
@@ -232,8 +245,7 @@ function parse_route(route) {
     flex-wrap: wrap;
     padding: 0.5em;
   }
-  .menu-content > a,
-  .dropdown-trigger {
+  .menu-content > a {
     line-height: 1.3;
     padding: 1pt 5pt;
     border-radius: var(--nav-border-radius);
@@ -241,8 +253,7 @@ function parse_route(route) {
     color: inherit;
     transition: background-color 0.2s;
   }
-  .menu-content > a:hover,
-  .dropdown-wrapper:hover .dropdown-trigger {
+  .menu-content > a:hover {
     background-color: var(--nav-link-bg-hover);
   }
   .menu-content > a[aria-current='page'] {
@@ -252,9 +263,8 @@ function parse_route(route) {
   /* Dropdown styles */
   .dropdown-wrapper {
     position: relative;
-    cursor: pointer;
   }
-  .dropdown-wrapper.active > .dropdown-trigger {
+  .dropdown-wrapper.active .dropdown-trigger {
     color: var(--nav-link-active-color);
   }
   .dropdown-wrapper::after {
@@ -265,11 +275,36 @@ function parse_route(route) {
     right: 0;
     height: var(--nav-dropdown-margin, 3pt);
   }
+  .dropdown-trigger-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 0;
+    border-radius: var(--nav-border-radius);
+    transition: background-color 0.2s;
+  }
+  .dropdown-trigger-wrapper:hover {
+    background-color: var(--nav-link-bg-hover);
+  }
   .dropdown-trigger {
+    line-height: 1.3;
+    padding: 1pt 5pt;
+    text-decoration: none;
+    color: inherit;
+    border-radius: var(--nav-border-radius) 0 0 var(--nav-border-radius);
+  }
+  .dropdown-trigger[aria-current='page'] {
+    color: var(--nav-link-active-color);
+  }
+  .dropdown-toggle {
+    padding: 1pt 3pt;
+    border: none;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
     display: flex;
     align-items: center;
-    gap: 0.2em;
-    user-select: none;
+    justify-content: center;
+    border-radius: 0 var(--nav-border-radius) var(--nav-border-radius) 0;
   }
   .dropdown-menu {
     position: absolute;
@@ -372,6 +407,19 @@ function parse_route(route) {
       flex-direction: column;
       align-items: stretch;
     }
+    .dropdown-trigger-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    .dropdown-trigger {
+      flex: 1;
+      border-radius: var(--nav-border-radius);
+    }
+    .dropdown-toggle {
+      padding: 4pt 8pt;
+      border-radius: var(--nav-border-radius);
+    }
     .dropdown-menu {
       position: static;
       border: none;
@@ -380,8 +428,5 @@ function parse_route(route) {
       padding: 0 0 0 1em;
       background-color: transparent;
     }
-    .dropdown-trigger {
-      cursor: pointer;
-    }
   }
 </style>

package/dist/SettingsSection.svelte.d.ts

@@ -1,11 +1,11 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-interface Props extends HTMLAttributes<HTMLElementTagNameMap[`section`]> {
+type $$ComponentProps = HTMLAttributes<HTMLElementTagNameMap[`section`]> & {
     title: string;
     current_values: Record<string, unknown>;
     children: Snippet<[]>;
     on_reset?: () => void;
-}
-declare const SettingsSection: import("svelte").Component<Props, {}, "">;
+};
+declare const SettingsSection: import("svelte").Component<$$ComponentProps, {}, "">;
 type SettingsSection = ReturnType<typeof SettingsSection>;
 export default SettingsSection;

package/dist/Spinner.svelte

@@ -1,42 +1,31 @@
-<script lang="ts">let { text = `Loading...`, ...rest } = $props();
+<script lang="ts">let { text, ...rest } = $props();
 export {};
 </script>
 
-<div class="spinner-overlay" role="status" aria-live="polite" aria-busy="true" {...rest}>
+<div class="spinner" role="status" aria-live="polite" aria-busy="true" {...rest}>
   <div class="spinner" aria-hidden="true"></div>
-  <p>{text}</p>
+  {#if text}
+    <span>{text}</span>
+  {/if}
 </div>
 
 <style>
-  .spinner-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    background: var(--spinner-bg);
-    color: var(--spinner-text-color, #333);
-    backdrop-filter: blur(4px);
-    z-index: var(--spinner-z-index, 10);
-  }
   .spinner {
-    width: var(--spinner-size, 40px);
-    height: var(--spinner-size, 40px);
-    border: var(--spinner-border-width, 4px) solid var(--spinner-track-color, #f3f3f3);
-    border-top: var(--spinner-border-width, 4px) solid var(--spinner-color, #007acc);
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-    margin-bottom: 1rem;
-    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin: var(--spinner-margin, 3pt);
+    > div {
+      width: var(--spinner-size, 1em);
+      height: var(--spinner-size, 1em);
+      border: var(--spinner-border-width, 4px) solid var(--spinner-track-color, #f3f3f3);
+      border-top: var(--spinner-border-width, 4px) solid var(--spinner-color, #007acc);
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+      box-sizing: border-box;
+    }
   }
   @keyframes spin {
-    0% {
-      transform: rotate(0deg);
-    }
     100% {
       transform: rotate(360deg);
     }

package/dist/Spinner.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { HTMLAttributes } from 'svelte/elements';
-interface Props extends HTMLAttributes<HTMLDivElement> {
+type $$ComponentProps = {
     text?: string;
-}
-declare const Spinner: import("svelte").Component<Props, {}, "">;
+} & HTMLAttributes<HTMLDivElement>;
+declare const Spinner: import("svelte").Component<$$ComponentProps, {}, "">;
 type Spinner = ReturnType<typeof Spinner>;
 export default Spinner;

package/dist/app.css

@@ -6,6 +6,10 @@
 
   --sms-max-width: 20em;
   --sms-text-color: var(--text-color);
+
+  /* Svelte MultiSelect */
+  --sms-options-bg: var(--page-bg);
+  --sms-active-color: light-dark(var(--accent-color), cornflowerblue);
 }
 
 /* Targeted theme transitions for performance */

package/dist/bands/Bands.svelte

@@ -0,0 +1,216 @@
+<script lang="ts">import * as helpers from './helpers';
+import { plot_colors } from '../colors';
+import ScatterPlot from '../plot/ScatterPlot.svelte';
+let { band_structs, line_kwargs = {}, path_mode = `strict`, band_type = undefined, show_legend = true, x_axis = {}, y_axis = {}, ...rest } = $props();
+// Helper function to get line styling for a band
+function get_line_style(color, is_acoustic, mode_type, frequencies, band_idx) {
+    let stroke = color;
+    let stroke_width = is_acoustic ? 1.5 : 1;
+    if (typeof line_kwargs === `function`) {
+        const custom = line_kwargs(frequencies, band_idx);
+        return {
+            stroke: custom.stroke ?? stroke,
+            stroke_width: custom.stroke_width ?? stroke_width,
+        };
+    }
+    if (typeof line_kwargs === `object` && line_kwargs !== null) {
+        const lk = line_kwargs;
+        // Check for mode-specific styling
+        if (`acoustic` in lk || `optical` in lk) {
+            const mode_kwargs = lk[mode_type];
+            if (mode_kwargs) {
+                stroke = mode_kwargs.stroke ?? stroke;
+                stroke_width = mode_kwargs.stroke_width ?? stroke_width;
+            }
+        }
+        else {
+            // Global styling for all bands
+            stroke = lk.stroke ?? stroke;
+            stroke_width = lk.stroke_width ?? stroke_width;
+        }
+    }
+    return { stroke, stroke_width };
+}
+// Normalize input to dict format
+let band_structs_dict = $derived.by(() => {
+    if (!band_structs)
+        return {};
+    const is_single_struct = `qpoints` in band_structs && `branches` in band_structs;
+    if (is_single_struct) {
+        const normalized = helpers.normalize_band_structure(band_structs);
+        return normalized ? { default: normalized } : {};
+    }
+    // Normalize each structure in the dict
+    const result = {};
+    for (const [key, bs] of Object.entries(band_structs)) {
+        const normalized = helpers.normalize_band_structure(bs);
+        if (normalized)
+            result[key] = normalized;
+    }
+    return result;
+});
+let detected_band_type = $derived.by(() => band_type ?? `phonon`);
+// Determine which segments to plot based on path_mode
+let segments_to_plot = $derived.by(() => {
+    const all_segments = {};
+    // Collect all segments from all structures
+    for (const [label, bs] of Object.entries(band_structs_dict)) {
+        for (const branch of bs.branches) {
+            const start_label = bs.qpoints[branch.start_index]?.label ?? undefined;
+            const end_label = bs.qpoints[branch.end_index]?.label ?? undefined;
+            const segment_key = helpers.get_segment_key(start_label, end_label);
+            all_segments[segment_key] ??= [];
+            all_segments[segment_key].push([label, bs]);
+        }
+    }
+    const num_structs = Object.keys(band_structs_dict).length;
+    const is_intersection = path_mode === `strict` || path_mode === `intersection`;
+    if (is_intersection) {
+        // Only segments present in all structures
+        const common_segments = Object.keys(all_segments).filter((seg) => all_segments[seg].length === num_structs);
+        // Warn in strict mode if not all segments are common
+        if (path_mode === `strict` &&
+            common_segments.length !== Object.keys(all_segments).length) {
+            console.warn(`Band structures have different q-point paths. Use path_mode="union" or "intersection".`);
+        }
+        return new Set(common_segments);
+    }
+    // union - all segments
+    return new Set(Object.keys(all_segments));
+});
+// Map segments to x-axis positions
+let x_positions = $derived.by(() => {
+    const positions = {};
+    let current_x = 0;
+    // Preserve physical path order using the first available structure
+    const canonical = Object.values(band_structs_dict)[0];
+    const ordered_segments = helpers.get_ordered_segments(canonical, segments_to_plot);
+    for (const segment_key of ordered_segments) {
+        if (positions[segment_key])
+            continue;
+        const [start_label, end_label] = segment_key.split(`_`);
+        // Find the first band structure that has this segment
+        for (const bs of Object.values(band_structs_dict)) {
+            const matching_branch = bs.branches.find((branch) => {
+                const branch_start = bs.qpoints[branch.start_index]?.label || `null`;
+                const branch_end = bs.qpoints[branch.end_index]?.label || `null`;
+                return branch_start === start_label && branch_end === end_label;
+            });
+            if (matching_branch) {
+                const segment_len = bs.distance[matching_branch.end_index] -
+                    bs.distance[matching_branch.start_index];
+                positions[segment_key] = [current_x, current_x + segment_len];
+                current_x += segment_len;
+                break;
+            }
+        }
+    }
+    return positions;
+});
+// Convert band structures to scatter plot series
+let series_data = $derived.by(() => {
+    if (Object.keys(band_structs_dict).length === 0 || segments_to_plot.size === 0) {
+        return [];
+    }
+    const all_series = [];
+    for (const [bs_idx, [label, bs]] of Object.entries(band_structs_dict).entries()) {
+        const color = plot_colors[bs_idx % plot_colors.length];
+        const structure_label = label || `Structure ${bs_idx + 1}`;
+        for (const branch of bs.branches) {
+            const start_idx = branch.start_index;
+            const end_idx = branch.end_index + 1;
+            const start_label = bs.qpoints[start_idx]?.label ?? undefined;
+            const end_label = bs.qpoints[end_idx - 1]?.label ?? undefined;
+            const segment_key = helpers.get_segment_key(start_label, end_label);
+            if (!segments_to_plot.has(segment_key))
+                continue;
+            const [x_start, x_end] = x_positions[segment_key] || [0, 1];
+            // Scale distances for this segment
+            const segment_distances = bs.distance.slice(start_idx, end_idx);
+            const dist_min = segment_distances[0];
+            const dist_range = segment_distances[segment_distances.length - 1] - dist_min;
+            const scaled_distances = dist_range === 0
+                ? segment_distances.map(() => (x_start + x_end) / 2)
+                : segment_distances.map((d) => x_start + ((d - dist_min) / dist_range) * (x_end - x_start));
+            // Create series for each band
+            for (let band_idx = 0; band_idx < bs.nb_bands; band_idx++) {
+                const frequencies = bs.bands[band_idx].slice(start_idx, end_idx);
+                const is_acoustic = detected_band_type === `phonon` &&
+                    band_idx < helpers.N_ACOUSTIC_MODES;
+                const mode_type = is_acoustic ? `acoustic` : `optical`;
+                const line_style = get_line_style(color, is_acoustic, mode_type, frequencies, band_idx);
+                all_series.push({
+                    x: scaled_distances,
+                    y: frequencies,
+                    markers: `line`,
+                    label: structure_label,
+                    line_style,
+                });
+            }
+        }
+    }
+    return all_series;
+});
+// Get x-axis tick positions with custom labels for symmetry points
+let x_axis_ticks = $derived.by(() => {
+    const tick_labels = {};
+    const sorted_positions = Object.entries(x_positions).sort(([, [a]], [, [b]]) => a - b);
+    for (const [segment_key, [x_start, x_end]] of sorted_positions) {
+        const [start_label, end_label] = segment_key.split(`_`);
+        // Add start label if not already present
+        if (!(x_start in tick_labels)) {
+            const pretty_start = start_label !== `null`
+                ? helpers.pretty_sym_point(start_label)
+                : ``;
+            if (pretty_start)
+                tick_labels[x_start] = pretty_start;
+        }
+        // Add end label
+        const pretty_end = end_label !== `null`
+            ? helpers.pretty_sym_point(end_label)
+            : ``;
+        if (pretty_end)
+            tick_labels[x_end] = pretty_end;
+    }
+    return tick_labels;
+});
+let x_range = $derived.by(() => {
+    const all_x = Object.values(x_positions).flat().sort();
+    return [all_x.at(0) ?? 0, all_x.at(-1) ?? 1];
+});
+</script>
+
+<ScatterPlot
+  series={series_data}
+  x_axis={{
+    label: `Wave Vector`,
+    ticks: Object.keys(x_axis_ticks).length > 0 ? x_axis_ticks : undefined,
+    format: ``,
+    range: x_range, // Explicitly set range to disable padding
+    ...x_axis,
+  }}
+  y_axis={{
+    label: detected_band_type === `phonon` ? `Frequency (THz)` : `Energy (eV)`,
+    format: `.2f`,
+    ...y_axis,
+  }}
+  display={{ x_grid: false, y_grid: true, y_zero_line: true }}
+  legend={show_legend && Object.keys(band_structs_dict).length > 1 ? {} : null}
+  {...rest}
+>
+  {#snippet user_content({ height, x_scale_fn, pad })}
+    <!-- Vertical lines at high-symmetry points -->
+    {@const tick_positions = Object.keys(x_axis_ticks).map(Number).sort((a, b) => a - b)}
+    {#each tick_positions as x_pos (x_pos)}
+      <line
+        x1={x_scale_fn(x_pos)}
+        x2={x_scale_fn(x_pos)}
+        y1={pad.t}
+        y2={height - pad.b}
+        stroke="var(--bands-symmetry-line-color, light-dark(black, white))"
+        stroke-width="var(--bands-symmetry-line-width, 1)"
+        opacity="var(--bands-symmetry-line-opacity, 0.5)"
+      />
+    {/each}
+  {/snippet}
+</ScatterPlot>

package/dist/bands/Bands.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { BandStructureType, BaseBandStructure, LineKwargs, PathMode } from './types';
+import ScatterPlot from '../plot/ScatterPlot.svelte';
+import type { AxisConfig } from '../plot/types';
+import type { ComponentProps } from 'svelte';
+type $$ComponentProps = ComponentProps<typeof ScatterPlot> & {
+    band_structs: BaseBandStructure | Record<string, BaseBandStructure>;
+    x_axis?: AxisConfig;
+    y_axis?: AxisConfig;
+    line_kwargs?: LineKwargs;
+    path_mode?: PathMode;
+    band_type?: BandStructureType;
+    show_legend?: boolean;
+};
+declare const Bands: import("svelte").Component<$$ComponentProps, {}, "">;
+type Bands = ReturnType<typeof Bands>;
+export default Bands;

package/dist/bands/BandsAndDos.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">import Bands from './Bands.svelte';
+import Dos from './Dos.svelte';
+let { band_structs, doses, bands_props = {}, dos_props = {}, shared_y_axis = true, ...rest } = $props();
+// Shared y-axis configuration - use single object when shared_y_axis is true
+let shared_y_axis_obj = $state({});
+let bands_y_axis = $derived(shared_y_axis ? shared_y_axis_obj : {});
+let dos_y_axis = $derived(shared_y_axis ? shared_y_axis_obj : {});
+let grid_style = $derived(`display: grid; grid-template-columns: 1fr 200px; gap: 0; ${rest.style ?? ``}`);
+</script>
+
+<div {...rest} class="bands-and-dos {rest.class ?? ``}" style={grid_style}>
+  <Bands
+    {band_structs}
+    y_axis={bands_y_axis}
+    {...bands_props}
+    padding={{ r: 15 }}
+  />
+
+  <Dos
+    {doses}
+    orientation="horizontal"
+    y_axis={{ ...dos_y_axis, label: `` }}
+    padding={{ l: 15 }}
+    {...dos_props}
+  />
+</div>

package/dist/bands/BandsAndDos.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { ComponentProps } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import Bands from './Bands.svelte';
+import Dos from './Dos.svelte';
+import type { BaseBandStructure, Dos as DosData } from './types';
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    band_structs: BaseBandStructure | Record<string, BaseBandStructure>;
+    doses: DosData | Record<string, DosData>;
+    bands_props?: Partial<ComponentProps<typeof Bands>>;
+    dos_props?: Partial<ComponentProps<typeof Dos>>;
+    shared_y_axis?: boolean;
+    class?: string;
+};
+declare const BandsAndDos: import("svelte").Component<$$ComponentProps, {}, "">;
+type BandsAndDos = ReturnType<typeof BandsAndDos>;
+export default BandsAndDos;