matterviz 0.4.0 → 0.4.2

package/dist/plot/treemap/Treemap.svelte.d.ts

@@ -0,0 +1,84 @@
+import type { D3InterpolateName } from '../../colors';
+import type { Vec2 } from '../../math';
+import type { BasePlotProps, LegendConfig, SunburstLabelText, SunburstSort, SunburstValueMode } from '..';
+import { ColorBar } from '..';
+import type { Rect, Sides } from '../core/layout';
+import type { PositionedArc } from '../sunburst/sunburst';
+import type { TreemapNode, TreemapNodeHandlerProps } from './treemap';
+import type { ComponentProps, Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type TweenOptions } from 'svelte/motion';
+declare function $$render<Metadata extends Record<string, unknown> = Record<string, unknown>>(): {
+    props: HTMLAttributes<HTMLDivElement> & Omit<BasePlotProps, "change"> & {
+        data?: TreemapNode<Metadata> | TreemapNode<Metadata>[];
+        value_mode?: SunburstValueMode;
+        sort?: SunburstSort;
+        level_lighten?: number;
+        min_fraction?: number;
+        other_label?: string;
+        max_depth?: number;
+        padding_inner?: number;
+        padding_top?: number;
+        padding_outer?: number;
+        show_labels?: boolean;
+        label_text?: SunburstLabelText;
+        zoom_on_click?: boolean;
+        zoom_root_id?: string | number | null;
+        show_breadcrumbs?: boolean;
+        color_values?: (rect: PositionedArc<Metadata>) => number | null;
+        color_scale?: D3InterpolateName;
+        color_range?: Vec2;
+        colorbar?: ComponentProps<typeof ColorBar> | null;
+        export_buttons?: boolean;
+        export_filename?: string;
+        tween?: Omit<TweenOptions<Rect[]>, `interpolate`>;
+        value_format?: string;
+        padding?: Sides;
+        legend?: LegendConfig | null;
+        show_legend?: boolean;
+        tooltip?: Snippet<[TreemapNodeHandlerProps<Metadata>]>;
+        cell_content?: Snippet<[{
+            arc: PositionedArc<Metadata>;
+            rect: Rect;
+        }]>;
+        change?: (data: TreemapNodeHandlerProps<Metadata> | null) => void;
+        on_node_click?: (data: TreemapNodeHandlerProps<Metadata> & {
+            event: MouseEvent | KeyboardEvent;
+        }) => void;
+        on_node_hover?: (data: (TreemapNodeHandlerProps<Metadata> & {
+            event: MouseEvent | FocusEvent;
+        }) | null) => void;
+        on_zoom?: (data: {
+            root: TreemapNodeHandlerProps<Metadata> | null;
+        }) => void;
+        header_controls?: Snippet<[{
+            height: number;
+            width: number;
+            fullscreen: boolean;
+        }]>;
+        controls_extra?: Snippet<[{
+            zoom_root_id: string | number | null;
+        }]>;
+    };
+    exports: {};
+    bindings: "show_controls" | "data" | "show_labels" | "fullscreen" | "hovered" | "controls_open" | "padding_inner" | "padding_top" | "padding_outer" | "value_mode" | "max_depth" | "min_fraction" | "label_text" | "zoom_on_click" | "show_breadcrumbs" | "zoom_root_id";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Metadata extends Record<string, unknown> = Record<string, unknown>> {
+    props(): ReturnType<typeof $$render<Metadata>>['props'];
+    events(): ReturnType<typeof $$render<Metadata>>['events'];
+    slots(): ReturnType<typeof $$render<Metadata>>['slots'];
+    bindings(): "show_controls" | "data" | "show_labels" | "fullscreen" | "hovered" | "controls_open" | "padding_inner" | "padding_top" | "padding_outer" | "value_mode" | "max_depth" | "min_fraction" | "label_text" | "zoom_on_click" | "show_breadcrumbs" | "zoom_root_id";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Metadata extends Record<string, unknown> = Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Metadata>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Metadata>['props']>, ReturnType<__sveltets_Render<Metadata>['events']>, ReturnType<__sveltets_Render<Metadata>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Metadata>['bindings']>;
+    } & ReturnType<__sveltets_Render<Metadata>['exports']>;
+    <Metadata extends Record<string, unknown> = Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<Metadata>['props']> & {}): ReturnType<__sveltets_Render<Metadata>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Treemap: $$IsomorphicComponent;
+type Treemap<Metadata extends Record<string, unknown> = Record<string, unknown>> = InstanceType<typeof Treemap<Metadata>>;
+export default Treemap;

package/dist/plot/treemap/index.d.ts

@@ -0,0 +1,3 @@
+export * from './treemap';
+export { default as Treemap } from './Treemap.svelte';
+export { default as TreemapControls } from '../core/components/HierarchyControls.svelte';

package/dist/plot/treemap/index.js

@@ -0,0 +1,4 @@
+export * from './treemap';
+export { default as Treemap } from './Treemap.svelte';
+// Shared with Sunburst; pass chart="treemap"
+export { default as TreemapControls } from '../core/components/HierarchyControls.svelte';

package/dist/plot/treemap/treemap.d.ts

@@ -0,0 +1,26 @@
+import type { Rect } from '../core/layout';
+import type { PositionedArc, SunburstLayoutOptions, SunburstNode, SunburstNodeHandlerProps } from '../sunburst/sunburst';
+export type TreemapNode<Metadata = Record<string, unknown>> = SunburstNode<Metadata>;
+export type TreemapArc<Metadata = Record<string, unknown>> = PositionedArc<Metadata>;
+export type TreemapNodeHandlerProps<Metadata = Record<string, unknown>> = SunburstNodeHandlerProps<Metadata>;
+export type TreemapLayoutOptions = SunburstLayoutOptions;
+export interface TilePadding {
+    padding_inner: number;
+    padding_top: number;
+    padding_outer: number;
+}
+export declare function tile_rects<Metadata>(arcs: readonly PositionedArc<Metadata>[], root_idx: number, size: {
+    width: number;
+    height: number;
+}, pad: TilePadding): Rect[];
+export declare function lerp_rects(prev: readonly Rect[], next: readonly Rect[], t: number): Rect[];
+export interface TreemapLayoutResult<Metadata = Record<string, unknown>> {
+    arcs: TreemapArc<Metadata>[];
+    rects: Rect[];
+    root: TreemapArc<Metadata> | null;
+    max_depth: number;
+}
+export declare function compute_treemap_layout<Metadata = Record<string, unknown>>(data: TreemapNode<Metadata> | TreemapNode<Metadata>[], size: {
+    width: number;
+    height: number;
+}, opts?: TreemapLayoutOptions & Partial<TilePadding>): TreemapLayoutResult<Metadata>;

package/dist/plot/treemap/treemap.js

@@ -0,0 +1,99 @@
+// Layout helpers for Treemap charts. All tree semantics (value modes, sorting,
+// 'Other' bucketing, color inheritance, stable ids, pre-order indexing) are
+// delegated to compute_sunburst_layout — a treemap is the same hierarchy with
+// squarified pixel rects instead of polar partition coordinates, so the two
+// charts share data builders (sunburst_from_paths, chem_sys_sunburst_data, …)
+// and value semantics (plotly branchvalues) by construction.
+import { hierarchy, treemap, treemapSquarify } from 'd3-hierarchy';
+import { compute_sunburst_layout } from '../sunburst/sunburst';
+import { DEFAULTS } from '../../settings';
+// Fresh object per call: returned rect arrays hand these to consumers, and a
+// shared constant would let mutating one zero rect corrupt every other one
+const zero_rect = () => ({ x: 0, y: 0, width: 0, height: 0 });
+// Squarify the subtree under arcs[root_idx] into pixel rects filling `size`.
+// Returns an array aligned with `arcs` by node_idx (nodes outside the subtree
+// get zero rects). Separate from tree-semantics so zooming re-tiles the new
+// root's subtree to the full viewport (plotly behavior) — unlike the sunburst's
+// size-independent partition, squarified tiling depends on the target aspect
+// ratio, so projecting one fixed layout through a zoom window would distort
+// cells and scale up the fixed-px header strips.
+export function tile_rects(arcs, root_idx, size, pad) {
+    const rects = arcs.map(zero_rect);
+    const root_arc = arcs[root_idx];
+    if (!root_arc || !(size.width > 0) || !(size.height > 0))
+        return rects;
+    // Rebuild the (already value-resolved, sorted and bucketed) subtree from the
+    // flat pre-order arcs: children of arc N are the top-level subtree ranges in
+    // (N, N.subtree_end].
+    const children_of = (arc) => {
+        const kids = [];
+        for (let idx = arc.node_idx + 1; idx <= arc.subtree_end; idx = arcs[idx].subtree_end + 1) {
+            kids.push(arcs[idx]);
+        }
+        return kids;
+    };
+    const root = hierarchy(root_arc, children_of);
+    // Values are assigned manually (the documented d3 way to bypass .sum()) so all
+    // three value modes carry over — with 'total', children summing to less than
+    // their parent leave unfilled space in the parent cell, matching plotly.
+    // Non-finite/negative values would make d3's tiling emit NaN/out-of-bounds
+    // rects; coerce them to zero-size instead of corrupting the whole chart.
+    root.each((node) => {
+        const { value } = node.data;
+        node.value = Number.isFinite(value) && value >= 0 ? value : 0;
+    });
+    const tiled = treemap()
+        .tile(treemapSquarify)
+        .size([size.width, size.height])
+        .paddingInner(pad.padding_inner)
+        // inset children within branch cells below the tiling root (the root fills
+        // the viewport and is labeled by breadcrumbs, not a frame + header) …
+        .paddingOuter((node) => (node.depth > 0 ? pad.padding_outer : 0))
+        // … with the top inset enlarged into the label header strip. paddingTop is
+        // applied after paddingOuter, overriding its top component.
+        .paddingTop((node) => node.depth > 0 && node.children ? Math.max(pad.padding_top, pad.padding_outer) : 0)(root);
+    // Clamp to the tiling area: with value_mode 'total', children exceeding their
+    // parent's value overflow the parent rect (d3 scales children by parent value;
+    // compute_sunburst_layout warns). Clamping keeps overflow inside the chart,
+    // mirroring the sunburst's clamp01 window projection.
+    const clamp_x = (val) => Math.min(Math.max(val, 0), size.width);
+    const clamp_y = (val) => Math.min(Math.max(val, 0), size.height);
+    tiled.each((node) => {
+        const x = clamp_x(node.x0);
+        const y = clamp_y(node.y0);
+        rects[node.data.node_idx] = {
+            x,
+            y,
+            width: Math.max(0, clamp_x(node.x1) - x),
+            height: Math.max(0, clamp_y(node.y1) - y),
+        };
+    });
+    return rects;
+}
+// Interpolate between two tilings (zoom animation). Rects are aligned by
+// node_idx; frames allocate one array but reuse rect objects at t = 0/1.
+export function lerp_rects(prev, next, t) {
+    if (t >= 1 || prev.length !== next.length)
+        return next;
+    if (t <= 0)
+        return prev;
+    return next.map((to, idx) => {
+        const from = prev[idx];
+        return {
+            x: from.x + (to.x - from.x) * t,
+            y: from.y + (to.y - from.y) * t,
+            width: from.width + (to.width - from.width) * t,
+            height: from.height + (to.height - from.height) * t,
+        };
+    });
+}
+// One-shot semantic layout + root tiling (tests and non-zooming callers; the
+// component calls compute_sunburst_layout and tile_rects separately so zoom
+// re-tiles without recomputing tree semantics).
+export function compute_treemap_layout(data, size, opts = {}) {
+    // padding fallbacks derive from DEFAULTS.treemap to prevent drift with the component
+    const { padding_inner = DEFAULTS.treemap.padding_inner, padding_top = DEFAULTS.treemap.padding_top, padding_outer = DEFAULTS.treemap.padding_outer, ...tree_opts } = opts;
+    const { arcs, root, max_depth } = compute_sunburst_layout(data, tree_opts);
+    const rects = tile_rects(arcs, 0, size, { padding_inner, padding_top, padding_outer });
+    return { arcs, rects, root, max_depth };
+}

package/dist/rdf/RdfPlot.svelte

@@ -56,9 +56,7 @@
 
   const compute_and_add = (content: string | ArrayBuffer, filename: string) => {
     try {
-      const text = content instanceof ArrayBuffer
-        ? new TextDecoder().decode(content)
-        : content
+      const text = content instanceof ArrayBuffer ? new TextDecoder().decode(content) : content
       const parsed_struct = parse_any_structure(text, filename)
       if (is_crystal(parsed_struct)) {
         drag_dropped = [...drag_dropped, parsed_struct]
@@ -66,16 +64,13 @@
         error_msg = `Crystal has no lattice or sites; cannot compute RDF`
       }
     } catch (exc) {
-      error_msg = `Failed to process structure: ${
-        to_error(exc).message
-      }`
+      error_msg = `Failed to process structure: ${to_error(exc).message}`
     }
   }
 
   const handle_drop = create_file_drop_handler({
     allow: () => enable_drop,
-    on_drop: (content, filename) =>
-      (on_file_drop || compute_and_add)(content, filename),
+    on_drop: (content, filename) => (on_file_drop || compute_and_add)(content, filename),
     on_error: (msg) => {
       error_msg = msg
     },
@@ -85,9 +80,9 @@
     },
   })
 
-  function handle_dragover(ev: DragEvent) {
-    ev.preventDefault()
-    if (ev.dataTransfer) ev.dataTransfer.dropEffect = `copy`
+  function handle_dragover(event: DragEvent) {
+    event.preventDefault()
+    if (event.dataTransfer) event.dataTransfer.dropEffect = `copy`
     dragging = true
   }
 
@@ -108,7 +103,7 @@
           struct_list.push({
             struct,
             label: format_structure_label(struct, `Crystal ${idx + 1}`),
-          })
+          }),
         )
       } else if (is_crystal(structures)) {
         struct_list.push({
@@ -117,7 +112,7 @@
         })
       } else {
         Object.entries(structures).forEach(([label, struct]) =>
-          struct_list.push({ struct, label: format_structure_label(struct, label) })
+          struct_list.push({ struct, label: format_structure_label(struct, label) }),
         )
       }
     }
@@ -125,17 +120,21 @@
       struct_list.push({
         struct,
         label: format_structure_label(struct, `Dropped ${idx + 1}`),
-      })
+      }),
     )
 
     for (const { struct, label } of struct_list) {
       if (mode === `element_pairs`) {
         const pairs = calculate_all_pair_rdfs(struct, { cutoff, n_bins, pbc })
-        result.push(...pairs.map((pair) => ({
-          label: pair.element_pair ? `${pair.element_pair[0]}-${pair.element_pair[1]}` : label,
-          legend_group: label, // Group by structure name for multi-structure plots
-          pattern: pair,
-        })))
+        result.push(
+          ...pairs.map((pair) => ({
+            label: pair.element_pair
+              ? `${pair.element_pair[0]}-${pair.element_pair[1]}`
+              : label,
+            legend_group: label, // Group by structure name for multi-structure plots
+            pattern: pair,
+          })),
+        )
       } else {
         const pattern = calculate_rdf(struct, { cutoff, n_bins, pbc })
         result.push({ label, pattern })
@@ -146,7 +145,6 @@
 
   const max_r = $derived(Math.max(...entries.flatMap((entry) => entry.pattern.r), 0))
   const max_g = $derived(Math.max(1.2, ...entries.flatMap((entry) => entry.pattern.g_r)))
-
   const series = $derived<DataSeries[]>(
     entries.map((ent, idx) => ({
       x: ent.pattern.r,
@@ -182,8 +180,8 @@
   >
     <StatusMessage
       message={enable_drop
-      ? `Drag and drop structure files here to visualize RDFs`
-      : `No RDF data to display`}
+        ? `Drag and drop structure files here to visualize RDFs`
+        : `No RDF data to display`}
       style="border: none"
     />
   </div>
@@ -194,7 +192,7 @@
     x_axis={{ label: `r (Å)`, range: [0, max_r], ...x_axis }}
     y_axis={{ label: `g(r)`, range: [0, max_g * 1.05], ...y_axis }}
     styles={{ show_lines: true, show_points: false }}
-    class="{rest.class ?? ``} {dragging ? `dragging` : ``}"
+    class={[rest.class, dragging && `dragging`]}
     style={rest.style ?? `height: 400px;`}
     ondragover={enable_drop ? handle_dragover : undefined}
     ondragleave={enable_drop ? () => (dragging = false) : undefined}
@@ -207,9 +205,7 @@
           {@const [x1, x2] = [pad.l, width - pad.r]}
           {@const [x, y] = [width - pad.r - 5, y1 - 5]}
           <line {x1} {x2} {y1} y2={y1} stroke="gray" stroke-dasharray="4" opacity="0.5" />
-          <text {x} {y} text-anchor="end" fill="gray" font-size="0.8em">
-            g(r) = 1
-          </text>
+          <text {x} {y} text-anchor="end" fill="gray" font-size="0.8em"> g(r) = 1 </text>
         {/if}
       {/if}
     {/snippet}

package/dist/rdf/RdfPlot.svelte.d.ts

@@ -22,6 +22,6 @@ type $$ComponentProps = {
     drag_dropped?: Crystal[];
     dragging?: boolean;
 } & ComponentProps<typeof ScatterPlot>;
-declare const RdfPlot: import("svelte").Component<$$ComponentProps, {}, "loading" | "error_msg" | "dragging" | "drag_dropped">;
+declare const RdfPlot: import("svelte").Component<$$ComponentProps, {}, "dragging" | "loading" | "error_msg" | "drag_dropped">;
 type RdfPlot = ReturnType<typeof RdfPlot>;
 export default RdfPlot;

package/dist/rdf/calc-rdf.js

@@ -42,12 +42,11 @@ export function calculate_rdf(structure, options = {}) {
     // Get occupancy weight for a site-species pair (supports mixed occupancy)
     const centers = center_sites.filter((site) => has_species(site, center_species));
     const neighbors = sites.filter((site) => has_species(site, neighbor_species));
-    if (centers.length === 0 || neighbors.length === 0) {
-        const element_pair = center_species && neighbor_species
-            ? [center_species, neighbor_species]
-            : undefined;
+    const element_pair = center_species && neighbor_species
+        ? [center_species, neighbor_species]
+        : undefined;
+    if (centers.length === 0 || neighbors.length === 0)
         return { r, g_r, element_pair };
-    }
     // Calculate distances and bin them with occupancy weighting
     const use_pbc = pbc.some(Boolean);
     const converters = use_pbc ? create_lattice_converters(lattice) : undefined;
@@ -78,9 +77,6 @@ export function calculate_rdf(structure, options = {}) {
             g_r[idx] /= n_pairs * ((4 * Math.PI * r[idx] ** 2 * bin_size) / volume);
         }
     }
-    const element_pair = center_species && neighbor_species
-        ? [center_species, neighbor_species]
-        : undefined;
     return { r, g_r, element_pair };
 }
 // Calculate RDF for all element pairs

package/dist/sanitize.js

@@ -3,7 +3,7 @@ import { format_formula_html } from './phase-diagram/utils';
 const SAFE_TAGS = [`a`, `b`, `i`, `em`, `strong`, `sub`, `sup`, `br`, `span`, `code`, `small`];
 const SAFE_ATTRS = [`style`, `class`, `title`, `href`, `target`, `rel`];
 // only allow safe CSS properties for text formatting
-const SAFE_STYLE_RE = /^\s*(color|font-weight|font-style|font-size|text-decoration|vertical-align)\s*:/;
+const SAFE_STYLE_RE = /^\s*(?:color|font-weight|font-style|font-size|text-decoration|vertical-align)\s*:/;
 // Add a token to a space-separated string if not already present
 const ensure_token = (value, token) => {
     const tokens = new Set(value.split(/\s+/).filter(Boolean));
@@ -75,21 +75,32 @@ const stringify_html_input = (html) => {
         return ``;
     }
 };
+// Memoize by input: two DOMPurify passes per call are costly when a component re-sanitizes
+// many cells on every render (e.g. HeatmapTable). Sanitization is deterministic for the
+// fixed config, so caching is output-identical.
+const sanitize_cache = new Map();
 // Sanitize HTML string, allowing only safe formatting tags and links.
 // Two-pass: happy-dom promotes dangerous children when a non-allowed parent is
 // stripped (e.g. <div><script>…</script></div> → <script>…</script>). The first
 // pass explicitly removes dangerous tags so they can't survive promotion.
 export function sanitize_html(html) {
     const str = stringify_html_input(html);
+    const cached = sanitize_cache.get(str);
+    if (cached !== undefined)
+        return cached;
     const dp = get_purify();
     if (!dp)
-        return str;
+        return str; // no DOM (SSR): return as-is, don't cache
     // oxfmt-ignore
     const safe = dp.sanitize(str, { ADD_ATTR: [`target`], FORBID_TAGS: [
             `script`, `style`, `iframe`, `object`, `embed`, `form`, `input`, `textarea`,
             `select`, `button`, `meta`, `link`, `base`, `template`, `noscript`,
         ] });
-    return dp.sanitize(safe, { ALLOWED_TAGS: SAFE_TAGS, ALLOWED_ATTR: SAFE_ATTRS });
+    const result = dp.sanitize(safe, { ALLOWED_TAGS: SAFE_TAGS, ALLOWED_ATTR: SAFE_ATTRS });
+    if (sanitize_cache.size >= 4096)
+        sanitize_cache.clear(); // bound memory (rarely hit)
+    sanitize_cache.set(str, result);
+    return result;
 }
 export const compact_formula = (formula) => formula.replaceAll(/\s+/g, ``);
 // Sanitize a chemical formula with optional subscript formatting

package/dist/scene/SceneCamera.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+  // Dual perspective/orthographic camera with OrbitControls + axis Gizmo, shared by BrillouinZoneScene, FermiSurfaceScene and StructureScene
+  import type { Vec3 } from '../math'
+  import { type CameraProjection, DEFAULTS } from '../settings'
+  import { T } from '@threlte/core'
+  import * as extras from '@threlte/extras'
+  import type { ComponentProps } from 'svelte'
+  import { build_gizmo_props, build_orbit_props } from './props'
+
+  let {
+    camera_projection = `perspective`,
+    position,
+    fov = DEFAULTS.structure.fov,
+    zoom = DEFAULTS.structure.initial_zoom,
+    near = undefined,
+    far = undefined,
+    orbit_props,
+    gizmo = false,
+    orbit_controls = $bindable(undefined),
+  }: {
+    camera_projection?: CameraProjection
+    position: Vec3 // camera position
+    fov?: number // perspective field of view
+    zoom?: number // orthographic zoom level
+    near?: number // perspective near plane (orthographic always uses -100)
+    far?: number // far plane (applied to either projection when provided)
+    orbit_props: ReturnType<typeof build_orbit_props>
+    gizmo?: boolean | ComponentProps<typeof extras.Gizmo>
+    orbit_controls?: ComponentProps<typeof extras.OrbitControls>[`ref`]
+  } = $props()
+
+  const gizmo_props = $derived(build_gizmo_props(gizmo))
+  // Only pass clipping planes that were explicitly provided so three.js defaults apply otherwise
+  const persp_planes = $derived({
+    ...(near !== undefined && { near }),
+    ...(far !== undefined && { far }),
+  })
+  const ortho_far = $derived(far !== undefined ? { far } : {})
+</script>
+
+{#snippet camera_contents()}
+  <extras.OrbitControls bind:ref={orbit_controls} {...orbit_props}>
+    {#if gizmo}<extras.Gizmo {...gizmo_props} />{/if}
+  </extras.OrbitControls>
+{/snippet}
+
+{#if camera_projection === `perspective`}
+  <T.PerspectiveCamera makeDefault {position} {fov} {...persp_planes}>
+    {@render camera_contents()}
+  </T.PerspectiveCamera>
+{:else}
+  <T.OrthographicCamera makeDefault {position} {zoom} near={-100} {...ortho_far}>
+    {@render camera_contents()}
+  </T.OrthographicCamera>
+{/if}
+
+<style>
+  :global(.responsive-gizmo) {
+    width: clamp(70px, 18cqmin, 100px) !important;
+    height: clamp(70px, 18cqmin, 100px) !important;
+  }
+</style>

package/dist/scene/SceneCamera.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Vec3 } from '../math';
+import { type CameraProjection } from '../settings';
+import * as extras from '@threlte/extras';
+import type { ComponentProps } from 'svelte';
+import { build_orbit_props } from './props';
+type $$ComponentProps = {
+    camera_projection?: CameraProjection;
+    position: Vec3;
+    fov?: number;
+    zoom?: number;
+    near?: number;
+    far?: number;
+    orbit_props: ReturnType<typeof build_orbit_props>;
+    gizmo?: boolean | ComponentProps<typeof extras.Gizmo>;
+    orbit_controls?: ComponentProps<typeof extras.OrbitControls>[`ref`];
+};
+declare const SceneCamera: import("svelte").Component<$$ComponentProps, {}, "orbit_controls">;
+type SceneCamera = ReturnType<typeof SceneCamera>;
+export default SceneCamera;

package/dist/scene/bind-renderer.svelte.d.ts

@@ -0,0 +1,2 @@
+import type { Camera, Scene, WebGLRenderer } from 'three';
+export declare function bind_renderer(on_bind: (scene: Scene, camera: Camera) => void, on_renderer?: (renderer: WebGLRenderer) => void): import("@threlte/core").ThrelteContext<WebGLRenderer>;

package/dist/scene/bind-renderer.svelte.js

@@ -0,0 +1,22 @@
+import { renderer_registry, scene_registry } from '../io/export';
+import { useThrelte } from '@threlte/core';
+// Mirror the Threlte scene + active camera into bindable props (for export panes etc.) and register the canvas->renderer/scene mappings so PNG-export and element-capture helpers can find them. Creates an $effect (call during component init). Returns the Threlte context for further use (e.g. clipping planes).
+export function bind_renderer(on_bind, on_renderer) {
+    const threlte = useThrelte();
+    $effect(() => {
+        const renderer = threlte.renderer;
+        // `camera.current` is not reactive, so subscribe to be notified when the active camera changes
+        const unsubscribe = threlte.camera.subscribe((camera) => {
+            on_bind(threlte.scene, camera);
+            if (renderer) {
+                scene_registry.set(renderer.domElement, { scene: threlte.scene, camera });
+            }
+        });
+        if (renderer) {
+            on_renderer?.(renderer);
+            renderer_registry.set(renderer.domElement, renderer);
+        }
+        return unsubscribe;
+    });
+    return threlte;
+}

package/dist/scene/index.d.ts

@@ -0,0 +1,4 @@
+export * from './bind-renderer.svelte';
+export * from './props';
+export { default as SceneCamera } from './SceneCamera.svelte';
+export type * from './types';

package/dist/scene/index.js

@@ -0,0 +1,5 @@
+// Shared Three.js/Threlte scene boilerplate (cameras, orbit controls, gizmo,
+// renderer binding) used by BrillouinZoneScene, FermiSurfaceScene and StructureScene.
+export * from './bind-renderer.svelte';
+export * from './props';
+export { default as SceneCamera } from './SceneCamera.svelte';

package/dist/scene/props.js

@@ -0,0 +1,52 @@
+import { AXIS_COLORS, NEG_AXIS_COLORS } from '../colors';
+// ScatterPlot3DScene keeps its own gizmo/orbit props on purpose: its gizmo offset is
+// ColorBar-aware (build_gizmo_props' fixed offset would clobber it) and its orbit controls
+// differ by design (no zoom-to-cursor / ortho zoom-doubling / camera-moving tracking).
+// Shared Gizmo config: colored +/- axis handles, transparent background, responsive sizing. An object `gizmo` overrides the per-axis defaults.
+export function build_gizmo_props(gizmo) {
+    return {
+        background: { enabled: false },
+        className: `responsive-gizmo`,
+        ...Object.fromEntries([...AXIS_COLORS, ...NEG_AXIS_COLORS].map(([axis, color, hover]) => [
+            axis,
+            {
+                color,
+                labelColor: `#111`,
+                opacity: axis.startsWith(`n`) ? 0.9 : 0.8,
+                hover: {
+                    color: hover,
+                    labelColor: `#222`,
+                    opacity: axis.startsWith(`n`) ? 1 : 0.9,
+                },
+            },
+        ])),
+        ...(typeof gizmo === `object` ? gizmo : {}),
+        offset: { left: 5, bottom: 5 },
+    };
+}
+// Shared OrbitControls config; `onstart_extra` runs extra cleanup when the camera starts moving (e.g. StructureScene closes hover tooltips/context menus)
+export function build_orbit_props(opts) {
+    const is_ortho = opts.camera_projection === `orthographic`;
+    return {
+        position: [0, 0, 0],
+        target: opts.target,
+        enableRotate: opts.rotate_speed > 0,
+        rotateSpeed: opts.rotate_speed,
+        enableZoom: opts.zoom_speed > 0,
+        zoomSpeed: is_ortho ? opts.zoom_speed * 2 : opts.zoom_speed,
+        zoomToCursor: opts.zoom_to_cursor,
+        enablePan: opts.pan_speed > 0,
+        panSpeed: opts.pan_speed,
+        maxZoom: opts.max_zoom,
+        minZoom: opts.min_zoom,
+        autoRotate: Boolean(opts.auto_rotate),
+        autoRotateSpeed: opts.auto_rotate,
+        enableDamping: Boolean(opts.rotation_damping),
+        dampingFactor: opts.rotation_damping,
+        onstart: () => {
+            opts.set_camera_is_moving?.(true);
+            opts.onstart_extra?.();
+        },
+        onend: () => opts.set_camera_is_moving?.(false),
+    };
+}

package/dist/scene/types.d.ts

@@ -0,0 +1,26 @@
+import type { CameraProjection } from '../settings';
+import type { Gizmo } from '@threlte/extras';
+import type { ComponentProps } from 'svelte';
+import type { Camera, Scene, Vector3 } from 'three';
+export type ThreltePointerEvent = {
+    point: Vector3;
+    nativeEvent: PointerEvent;
+};
+export type SceneControlProps = {
+    camera_projection?: CameraProjection;
+    rotation_damping?: number;
+    max_zoom?: number;
+    min_zoom?: number;
+    rotate_speed?: number;
+    zoom_speed?: number;
+    pan_speed?: number;
+    zoom_to_cursor?: boolean;
+    fov?: number;
+    initial_zoom?: number;
+    ambient_light?: number;
+    directional_light?: number;
+    gizmo?: boolean | ComponentProps<typeof Gizmo>;
+    auto_rotate?: number;
+    scene?: Scene;
+    camera?: Camera;
+};

package/dist/scene/types.js

@@ -0,0 +1 @@
+export {};