matterviz 0.4.0 → 0.4.1

package/dist/layout/FullscreenButton.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  // Fullscreen toggle button (default Icon or custom snippet content), shared by the
+  // Trajectory/ChemPotDiagram3D/ConvexHull viewer chromes
+  import Icon from '../Icon.svelte'
+  import type { HTMLButtonAttributes } from 'svelte/elements'
+  import { type FullscreenToggleProp, toggle_fullscreen } from './fullscreen'
+
+  let {
+    fullscreen = false,
+    toggle = true, // pass a snippet to render custom button content
+    wrapper = undefined, // element sent fullscreen
+    ...rest
+  }: HTMLButtonAttributes & {
+    fullscreen?: boolean
+    toggle?: FullscreenToggleProp
+    wrapper?: HTMLDivElement
+  } = $props()
+</script>
+
+<button
+  type="button"
+  onclick={() => toggle_fullscreen(wrapper)}
+  title="{fullscreen ? `Exit` : `Enter`} fullscreen"
+  aria-pressed={fullscreen}
+  {...rest}
+  class="fullscreen-btn {rest.class ?? ``}"
+>
+  {#if typeof toggle === `function`}
+    {@render toggle({ fullscreen })}
+  {:else}
+    <Icon icon={fullscreen ? `ExitFullscreen` : `Fullscreen`} />
+  {/if}
+</button>

package/dist/layout/FullscreenButton.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import { type FullscreenToggleProp } from './fullscreen';
+type $$ComponentProps = HTMLButtonAttributes & {
+    fullscreen?: boolean;
+    toggle?: FullscreenToggleProp;
+    wrapper?: HTMLDivElement;
+};
+declare const FullscreenButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type FullscreenButton = ReturnType<typeof FullscreenButton>;
+export default FullscreenButton;

package/dist/layout/FullscreenToggle.svelte

@@ -1,28 +1,22 @@
 <script lang="ts">
+  // Toggles a bindable `fullscreen` flag (plot components manage browser fullscreen
+  // themselves). For chromes that call the browser API directly, use FullscreenButton.
   import Icon from '../Icon.svelte'
   import type { HTMLButtonAttributes } from 'svelte/elements'
 
-  let {
-    fullscreen = $bindable(false),
-    class: className,
-    ...rest
-  }: HTMLButtonAttributes & {
+  let { fullscreen = $bindable(false), ...rest }: HTMLButtonAttributes & {
     fullscreen?: boolean
   } = $props()
 </script>
 
 <button
-  class="fullscreen-toggle {className ?? ``}"
+  {...rest}
+  class="fullscreen-toggle {rest.class ?? ``}"
   onclick={() => (fullscreen = !fullscreen)}
   aria-label={fullscreen ? `Exit fullscreen` : `Enter fullscreen`}
   type="button"
-  {...rest}
 >
-  <Icon
-    icon={fullscreen ? `ExitFullscreen` : `Fullscreen`}
-    width="18"
-    height="18"
-  />
+  <Icon icon="{fullscreen ? `Exit` : ``}Fullscreen" width="18" height="18" />
 </button>
 
 <style>
@@ -45,6 +39,6 @@
     background-color: color-mix(in srgb, currentColor 8%, transparent);
     opacity: var(--fullscreen-btn-hover-opacity, 1);
   }
-  /* Note: Parent component should add styles to show on parent hover */
-  /* Example: .parent:hover :global(.fullscreen-toggle) { opacity: 1; } */
+  /* Note: Parent component should add styles to show on parent hover
+  Example: .parent:hover :global(.fullscreen-toggle) { opacity: 1; } */
 </style>

package/dist/layout/ViewerChrome.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+  import type { FullscreenToggleProp } from './fullscreen'
+  import type { ShowControlsState } from '../controls'
+  // Shared control-buttons row (filename chip + fullscreen toggle + snippet buttons/panes) for BrillouinZone/FermiSurface/Structure viewers; themed via neutral --viewer-* CSS vars
+  // TODO Trajectory.svelte still has its own control-buttons variant — migrate it here.
+  import type { Snippet } from 'svelte'
+  import { createAttachmentKey } from 'svelte/attachments'
+  import { tooltip } from 'svelte-multiselect/attachments'
+  import FullscreenButton from './FullscreenButton.svelte'
+
+  let {
+    controls_config,
+    filename = undefined,
+    fullscreen = false,
+    fullscreen_toggle = true,
+    fullscreen_btn_style = undefined,
+    wrapper = undefined,
+    style = undefined,
+    before = undefined,
+    children = undefined,
+  }: {
+    controls_config: ShowControlsState
+    filename?: string
+    fullscreen?: boolean
+    fullscreen_toggle?: FullscreenToggleProp
+    fullscreen_btn_style?: string
+    wrapper?: HTMLDivElement
+    style?: string // extra styles/CSS vars for the section (user config style wins)
+    before?: Snippet // rendered before filename/fullscreen (e.g. reset-camera button)
+    children?: Snippet // rendered after the fullscreen toggle (panes, controls, ...)
+  } = $props()
+
+  // Styled tooltip (reads the button's title attr), forwarded as a spreadable attachment
+  const tooltip_attachment = { [createAttachmentKey()]: tooltip() }
+</script>
+
+<section
+  class="control-buttons {controls_config.class}"
+  style={[style, controls_config.style].filter(Boolean).join(`; `)}
+>
+  {#if controls_config.mode !== `never`}
+    {@render before?.()}
+
+    {#if filename && controls_config.visible(`filename`)}
+      <span class="filename">{filename}</span>
+    {/if}
+
+    {#if fullscreen_toggle && controls_config.visible(`fullscreen`)}
+      <FullscreenButton
+        {fullscreen}
+        toggle={fullscreen_toggle}
+        {wrapper}
+        class="fullscreen-toggle"
+        style={fullscreen_btn_style}
+        {...tooltip_attachment}
+      />
+    {/if}
+
+    {@render children?.()}
+  {/if}
+</section>
+
+<style>
+  section.control-buttons {
+    position: absolute;
+    display: flex;
+    top: var(--viewer-buttons-top, var(--ctrl-btn-top, 1ex));
+    right: var(--viewer-buttons-right, var(--ctrl-btn-right, 1ex));
+    gap: var(--viewer-buttons-gap, clamp(6pt, 1cqmin, 9pt));
+    z-index: var(
+      --viewer-buttons-z-index,
+      var(--z-index-overlay-controls, 100000000)
+    );
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.2s ease;
+    align-items: var(--viewer-buttons-align, center);
+  }
+  /* Mode: always - controls always visible */
+  section.control-buttons.always-visible {
+    opacity: 1;
+    pointer-events: auto;
+  }
+  /* Mode: hover - controls visible while the parent viewer is hovered/focused */
+  :global(.structure:hover) > section.control-buttons.hover-visible,
+  :global(.structure:focus-within) > section.control-buttons.hover-visible,
+  :global(.brillouin-zone:hover) > section.control-buttons.hover-visible,
+  :global(.brillouin-zone:focus-within) > section.control-buttons.hover-visible,
+  :global(.fermi-surface:hover) > section.control-buttons.hover-visible,
+  :global(.fermi-surface:focus-within) > section.control-buttons.hover-visible {
+    opacity: 1;
+    pointer-events: auto;
+  }
+  /* Mode: never - stays hidden (default state, no additional CSS needed) */
+  section.control-buttons > :global(button) {
+    background-color: transparent;
+    display: flex;
+    padding: var(--viewer-buttons-btn-padding, 4px);
+    border-radius: var(--border-radius, 3pt);
+    font-size: clamp(0.85em, 2cqmin, 1.3em);
+  }
+  section.control-buttons :global(button:hover) {
+    background-color: color-mix(in srgb, currentColor 8%, transparent);
+  }
+  .filename {
+    font-family: monospace;
+    font-size: 0.9em;
+    background: var(--code-bg, rgba(0, 0, 0, 0.1));
+    padding: 3pt 6pt;
+    border-radius: 3pt;
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+</style>

package/dist/layout/ViewerChrome.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { FullscreenToggleProp } from './fullscreen';
+import type { ShowControlsState } from '../controls';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    controls_config: ShowControlsState;
+    filename?: string;
+    fullscreen?: boolean;
+    fullscreen_toggle?: FullscreenToggleProp;
+    fullscreen_btn_style?: string;
+    wrapper?: HTMLDivElement;
+    style?: string;
+    before?: Snippet;
+    children?: Snippet;
+};
+declare const ViewerChrome: import("svelte").Component<$$ComponentProps, {}, "">;
+type ViewerChrome = ReturnType<typeof ViewerChrome>;
+export default ViewerChrome;

package/dist/layout/fullscreen.d.ts

@@ -1,3 +1,7 @@
+import type { Snippet } from 'svelte';
+export type FullscreenToggleProp = Snippet<[{
+    fullscreen: boolean;
+}]> | boolean;
 export type InfoItem = Readonly<{
     label: string;
     value: string | number;

package/dist/layout/fullscreen.svelte.d.ts

@@ -0,0 +1,8 @@
+export declare function sync_fullscreen(opts: {
+    get_wrapper: () => HTMLDivElement | undefined;
+    get_fullscreen: () => boolean;
+    set_fullscreen: (fullscreen: boolean) => void;
+    bg_css_var: string;
+    on_request_error?: (err: Error) => void;
+    on_change?: (fullscreen: boolean) => void;
+}): void;

package/dist/layout/fullscreen.svelte.js

@@ -0,0 +1,37 @@
+import { set_fullscreen_bg } from './fullscreen';
+// Two-way sync between a bindable `fullscreen` flag, the browser fullscreen state of a wrapper, and the fullscreen background CSS var. Creates $effects (call during component init). Shared by BrillouinZone/FermiSurface/Structure viewers.
+// TODO Trajectory.svelte still has its own fullscreen variant — migrate it here.
+export function sync_fullscreen(opts) {
+    // Flag -> browser: enter/exit fullscreen when the bound flag changes
+    $effect(() => {
+        if (typeof window === `undefined`)
+            return;
+        const wrapper = opts.get_wrapper();
+        const fullscreen = opts.get_fullscreen();
+        const fs_el = document.fullscreenElement;
+        if (fullscreen && fs_el !== wrapper && wrapper) {
+            wrapper.requestFullscreen().catch((err) => {
+                console.error(err);
+                opts.on_request_error?.(err);
+            });
+        }
+        else if (!fullscreen && fs_el === wrapper) {
+            document.exitFullscreen().catch(console.error);
+        }
+        set_fullscreen_bg(wrapper, fullscreen, opts.bg_css_var);
+    });
+    // Browser -> flag: track fullscreenchange events (covers Esc key, programmatic exit, ...)
+    $effect(() => {
+        if (typeof document === `undefined`)
+            return () => { };
+        const handler = () => {
+            // tie state to this component's own wrapper so another element entering fullscreen
+            // doesn't flip every viewer's flag (would also trigger a requestFullscreen cascade)
+            const is_fullscreen = document.fullscreenElement === opts.get_wrapper();
+            opts.set_fullscreen(is_fullscreen);
+            opts.on_change?.(is_fullscreen);
+        };
+        document.addEventListener(`fullscreenchange`, handler);
+        return () => document.removeEventListener(`fullscreenchange`, handler);
+    });
+}

package/dist/layout/index.d.ts

@@ -1,4 +1,6 @@
 export * from './fullscreen';
+export * from './fullscreen.svelte';
+export { default as FullscreenButton } from './FullscreenButton.svelte';
 export { default as FullscreenToggle } from './FullscreenToggle.svelte';
 export { default as InfoCard } from './InfoCard.svelte';
 export { default as InfoTag } from './InfoTag.svelte';
@@ -6,5 +8,6 @@ export * from './json-tree';
 export { default as PropertyFilter } from './PropertyFilter.svelte';
 export { default as SettingsSection } from './SettingsSection.svelte';
 export { default as SubpageGrid } from './SubpageGrid.svelte';
+export { default as ViewerChrome } from './ViewerChrome.svelte';
 export type InfoTagVariant = `default` | `success` | `warning` | `error` | `info`;
 export type InfoTagSize = `sm` | `md` | `lg`;

package/dist/layout/index.js

@@ -1,4 +1,6 @@
 export * from './fullscreen';
+export * from './fullscreen.svelte';
+export { default as FullscreenButton } from './FullscreenButton.svelte';
 export { default as FullscreenToggle } from './FullscreenToggle.svelte';
 export { default as InfoCard } from './InfoCard.svelte';
 export { default as InfoTag } from './InfoTag.svelte';
@@ -6,3 +8,4 @@ export * from './json-tree';
 export { default as PropertyFilter } from './PropertyFilter.svelte';
 export { default as SettingsSection } from './SettingsSection.svelte';
 export { default as SubpageGrid } from './SubpageGrid.svelte';
+export { default as ViewerChrome } from './ViewerChrome.svelte';

package/dist/math.d.ts

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

package/dist/math.js

@@ -737,13 +737,14 @@ export function compute_bounding_box(vertices) {
     }
     return { min, max };
 }
-// Check if a matrix is square with dimension NxN
+// Check if a matrix is a finite-numeric square matrix of dimension NxN (type predicate
+// so callers get number[][] narrowing without assertions). Rejects NaN/Infinity entries.
 export function is_square_matrix(matrix, dim) {
     if (!Array.isArray(matrix))
         return false;
     if (matrix.length !== dim)
         return false;
-    return matrix.every((row) => Array.isArray(row) && row.length === dim);
+    return matrix.every((row) => Array.isArray(row) && row.length === dim && row.every((val) => Number.isFinite(val)));
 }
 // --- 2D Geometry Utilities ---
 // Point-in-polygon test using ray casting algorithm
@@ -888,31 +889,27 @@ b) {
 }
 export const cross_2d = (origin, point_a, point_b) => (point_a[0] - origin[0]) * (point_b[1] - origin[1]) -
     (point_a[1] - origin[1]) * (point_b[0] - origin[0]);
+// One half of Andrew's monotone chain built from x-then-y *pre-sorted* points
+// (lower chain; pass reversed input for the upper chain).
+export const monotone_chain = (sorted) => {
+    const chain = [];
+    for (const pt of sorted) {
+        while (chain.length >= 2 &&
+            cross_2d(chain[chain.length - 2], chain[chain.length - 1], pt) <= 0) {
+            chain.pop();
+        }
+        chain.push(pt);
+    }
+    return chain;
+};
 // Full 2D convex hull via Andrew's monotone chain algorithm.
 // Returns vertices in counter-clockwise order.
 export function convex_hull_2d(points) {
     if (points.length < 3)
         return [...points];
     const sorted = points.toSorted((a, b) => a[0] - b[0] || a[1] - b[1]);
-    // Lower hull
-    const lower = [];
-    for (const pt of sorted) {
-        while (lower.length >= 2 &&
-            cross_2d(lower[lower.length - 2], lower[lower.length - 1], pt) <= 0) {
-            lower.pop();
-        }
-        lower.push(pt);
-    }
-    // Upper hull
-    const upper = [];
-    for (let idx = sorted.length - 1; idx >= 0; idx--) {
-        const pt = sorted[idx];
-        while (upper.length >= 2 &&
-            cross_2d(upper[upper.length - 2], upper[upper.length - 1], pt) <= 0) {
-            upper.pop();
-        }
-        upper.push(pt);
-    }
+    const lower = monotone_chain(sorted);
+    const upper = monotone_chain(sorted.toReversed());
     // Remove last point of each half (it's the first point of the other)
     lower.pop();
     upper.pop();

package/dist/overlays/index.d.ts

@@ -1,3 +1,7 @@
+import type { ComponentProps } from 'svelte';
+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 type PaneToggleProps = ComponentProps<typeof DraggablePane>[`toggle_props`];
+export type PaneProps = ComponentProps<typeof DraggablePane>[`pane_props`];

package/dist/periodic-table/PeriodicTable.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
-  import { is_color } from '../colors'
+  import { get_d3_interpolator, is_color } from '../colors'
   import type { ChemicalElement, ElementCategory, ElementSymbol } from '../element'
   import { element_data, ElementPhoto, ElementTile } from '../element'
   import { ELEM_SYMBOLS } from '../labels'
   import type { Point2D, Vec2 } from '../math'
   import { ColorBar } from '../plot'
   import { colors } from '../state.svelte'
-  import * as d3_sc from 'd3-scale-chromatic'
   import type { ComponentProps, Snippet } from 'svelte'
   import type { HTMLAttributes } from 'svelte/elements'
   import type { D3InterpolateName } from '../colors'
@@ -186,14 +185,14 @@
   }
 
   let color_scale_fn = $derived(
-    typeof color_scale === `string` ? d3_sc[color_scale] : color_scale,
+    typeof color_scale === `string` ? get_d3_interpolator(color_scale) : color_scale,
   )
 
   let cs_min = $derived(
     color_scale_range[0] ??
       (heat_values.length > 0
         ? Math.min(
-          ...heat_values.flat().filter((v): v is number => typeof v === `number`),
+          ...heat_values.flat().filter((val): val is number => typeof val === `number`),
         )
         : 0),
   )
@@ -201,7 +200,7 @@
     color_scale_range[1] ??
       (heat_values.length > 0
         ? Math.max(
-          ...heat_values.flat().filter((v): v is number => typeof v === `number`),
+          ...heat_values.flat().filter((val): val is number => typeof val === `number`),
         )
         : 1),
   )
@@ -209,7 +208,9 @@
   // smallest positive bound for log color mapping (matches the auto ColorBar's log scale)
   let cs_min_pos = $derived.by(() => {
     if (cs_min > 0) return cs_min
-    const pos = heat_values.flat().filter((v): v is number => typeof v === `number` && v > 0)
+    const pos = heat_values.flat().filter((val): val is number =>
+      typeof val === `number` && val > 0
+    )
     return pos.length > 0 ? Math.min(...pos) : cs_max
   })
 
@@ -224,7 +225,7 @@
       }
 
       // If it's already a color string, return it directly
-      if (is_color(value)) return value as string
+      if (is_color(value)) return value
 
       // Return missing color for zero/invalid values or when no heatmap data
       if (
@@ -264,7 +265,7 @@
 
       return value.map((val) => {
         // If it's already a color string, return it directly
-        if (is_color(val)) return val as string
+        if (is_color(val)) return val
         // Otherwise, map it through the color scale
         return bg_color(val as number, element)
       })

package/dist/phase-diagram/IsobaricBinaryPhaseDiagram.svelte.d.ts

@@ -39,6 +39,6 @@ type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
         }
     ]>;
 };
-declare const IsobaricBinaryPhaseDiagram: import("svelte").Component<$$ComponentProps, {}, "fullscreen" | "controls_open" | "x_axis" | "y_axis" | "show_grid" | "show_boundaries" | "show_labels" | "show_special_points" | "show_component_labels" | "png_dpi" | "wrapper" | "config" | "export_pane_open" | "lever_rule_mode" | "editor_open" | "diagram_input" | "hovered_region" | "display_temp_unit">;
+declare const IsobaricBinaryPhaseDiagram: import("svelte").Component<$$ComponentProps, {}, "show_labels" | "y_axis" | "fullscreen" | "wrapper" | "controls_open" | "x_axis" | "export_pane_open" | "png_dpi" | "config" | "show_grid" | "show_boundaries" | "show_special_points" | "show_component_labels" | "lever_rule_mode" | "editor_open" | "diagram_input" | "hovered_region" | "display_temp_unit">;
 type IsobaricBinaryPhaseDiagram = ReturnType<typeof IsobaricBinaryPhaseDiagram>;
 export default IsobaricBinaryPhaseDiagram;

package/dist/phase-diagram/PhaseDiagramControls.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import type { PaneProps, PaneToggleProps } from '../overlays'
   // NOTE: Axis config objects must be reassigned (not mutated) to trigger $bindable reactivity.
   import { css_color_to_hex } from '../colors'
   import { format_num } from '../labels'
@@ -58,8 +59,8 @@
     enable_export?: boolean
     png_dpi?: number
     // Pane customization
-    pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`]
-    toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`]
+    pane_props?: PaneProps
+    toggle_props?: PaneToggleProps
     // Custom content snippets
     children?: Snippet<[{ controls_open: boolean }]>
     post_children?: Snippet<[{ controls_open: boolean }]>

package/dist/phase-diagram/PhaseDiagramControls.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { PaneProps, PaneToggleProps } from '../overlays';
 import DraggablePane from '../overlays/DraggablePane.svelte';
 import type { AxisConfig } from '../plot';
 import type { ComponentProps, Snippet } from 'svelte';
@@ -16,8 +17,8 @@ type $$ComponentProps = Omit<ComponentProps<typeof DraggablePane>, `children`> &
     data?: PhaseDiagramData;
     enable_export?: boolean;
     png_dpi?: number;
-    pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`];
-    toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`];
+    pane_props?: PaneProps;
+    toggle_props?: PaneToggleProps;
     children?: Snippet<[{
         controls_open: boolean;
     }]>;
@@ -25,6 +26,6 @@ type $$ComponentProps = Omit<ComponentProps<typeof DraggablePane>, `children`> &
         controls_open: boolean;
     }]>;
 };
-declare const PhaseDiagramControls: import("svelte").Component<$$ComponentProps, {}, "controls_open" | "x_axis" | "y_axis" | "show_grid" | "show_boundaries" | "show_labels" | "show_special_points" | "show_component_labels" | "png_dpi" | "config" | "lever_rule_mode">;
+declare const PhaseDiagramControls: import("svelte").Component<$$ComponentProps, {}, "show_labels" | "y_axis" | "controls_open" | "x_axis" | "png_dpi" | "config" | "show_grid" | "show_boundaries" | "show_special_points" | "show_component_labels" | "lever_rule_mode">;
 type PhaseDiagramControls = ReturnType<typeof PhaseDiagramControls>;
 export default PhaseDiagramControls;

package/dist/phase-diagram/PhaseDiagramEditorPane.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import type { PaneToggleProps } from '../overlays'
   import { JsonTree } from '../layout/json-tree'
   import { set_at_path } from '../layout/json-tree/utils'
   import DraggablePane from '../overlays/DraggablePane.svelte'
@@ -21,7 +22,7 @@
     data?: PhaseDiagramData | null
     ondata?: (data: PhaseDiagramData) => void
     icon_style?: string
-    toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`]
+    toggle_props?: PaneToggleProps
   } = $props()
 
   // The source object currently displayed (DiagramInput or PhaseDiagramData)

package/dist/phase-diagram/PhaseDiagramEditorPane.svelte.d.ts

@@ -1,5 +1,4 @@
-import DraggablePane from '../overlays/DraggablePane.svelte';
-import type { ComponentProps } from 'svelte';
+import type { PaneToggleProps } from '../overlays';
 import type { DiagramInput } from './diagram-input';
 import type { PhaseDiagramData } from './types';
 type $$ComponentProps = {
@@ -8,7 +7,7 @@ type $$ComponentProps = {
     data?: PhaseDiagramData | null;
     ondata?: (data: PhaseDiagramData) => void;
     icon_style?: string;
-    toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`];
+    toggle_props?: PaneToggleProps;
 };
 declare const PhaseDiagramEditorPane: import("svelte").Component<$$ComponentProps, {}, "editor_open" | "diagram_input">;
 type PhaseDiagramEditorPane = ReturnType<typeof PhaseDiagramEditorPane>;